@charset "utf-8";

/*******************

- common

********************/
html, body {
    height: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  html {
    font-size: 16px;
    line-height: 1.375;
    color: #000000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  @media (max-width:500px) {
    html {
      font-size: 14px;
    }
  }
  body {
    word-break: break-all;
  }
  body,
  section, div,
  ul, li,
  dl, dt, dd,
  h1, h2, h3, h4,
  p {
    margin: 0;
    padding: 0;
  }
  h1, h2, h3, h4 {
    font-size: 1em;
  }
  img {
    border: none;
    max-width: 100%;
    vertical-align: bottom;
  }
  a {
    color: #0066cc;
    text-decoration: none;
    -webkit-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
  }
  a:hover {
    opacity: 0.7;
  }
  li {
    list-style:none;
  }
  input[type=text]{
    font-size: 16px;
  }
  :placeholder-shown {
    color : #ccc;
  }
  ::-webkit-input-placeholder {
    color : #ccc;
  }
  :-moz-placeholder {
    color : #ccc;
  }
  ::-moz-placeholder {
    color : #ccc;
  }
  :-ms-input-placeholder {
    color : #ccc;
  }
  :placeholder-shown {
    color : #ccc;
  }
  .underline {
    text-decoration: underline;
  }
  .txt-right  { text-align: right; }
  .txt-center { text-align: center; }
  
  .pc_none { display: none; }
  @media (max-width:767px) {
    .pc_none { display: block; }
    br.pc_none,
    span.pc_none,
    img.pc_none {
      display: inline;
    }
    .sp_none { display: none !important; }
  }
  body, section, div, ul, li, dl, dt, dd, h1, h2, h3, h4, p {
    box-sizing: border-box;
  }
  
  /*********************************
  *
  *  .frame
  *
  **********************************/
  .frame {
    width: 1000px;
    margin: 0 auto;
  }
  @media (max-width:1040px) {
    .frame {
      width: auto;
      margin: 0 1.923%;
    }
  }
  @media (max-width:520px) {
    .frame {
      width: auto;
      margin: 0 calc(40 / 750 * 100vw);
    }
  }

  /*******************

- .slide-feature
  (with JavaScript)

********************/
.slide-feature {
    margin:0 auto;
    max-width:1000px;
  }
  
  /*******************
  
  - modal
    (with JavaScript)
  
  ********************/
  .wrapper.fixed {
    overflow:hidden;
    position:fixed;
    top:0;
    left:0; right:0;
    bottom:0;
  }
  .modal-contents {
    position:relative;
    z-index:100;
  }
  .modal-bg {
    position:absolute;
    top:0;
    left:0; right:0;
    bottom:0;
    background-color:rgba(0, 0, 0, 0.4);
    z-index:50;
  }
  
  /*******************
  
  - .modal-help
    (with JavaScript)
  
  ********************/
  .modal-help {
    position:fixed;
    top:0;
    left:0; right:0;
    bottom:0;
    z-index:100;
    display:none;
  }
  .modal-help > .modal-contents {
    width:89%;
    max-width:440px;
    margin:0 auto;
    position:absolute;
    top:0;
    left:0; right:0;
    background-color:#fff;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    margin-top:5%;
    overflow:hidden;
  }
  .modal-help > .modal-contents > .btn-close {
    width:7.76%;
    position:absolute;
    top:0;
    right:0;
    margin-right:2.985%;
    margin-top:2.985%;
    cursor:pointer;
    z-index:20;
  }
  
  /*******************
  
  - .slide
    (slick.js)
  
  ********************/
  .slide-help.slick-slider {
    margin-bottom:50px;
  }
  .slide-detail-image.slick-slider{
    margin-bottom: 70px;
  }
  .slick-dots {
    margin-top:10px;
    top:100%;
  }
  .slick-dots li {
    margin:0 5px ;
  }
  .slick-dots li button {
    width:10px;
    height:10px;
  }
  .slick-dots li button::before {
    content:"";
    background-color:transparent;
    border-radius:50%;
    border:1px solid #444;
    width:10px;
    height:10px;
    opacity:1;
  }
  .slick-dots li.slick-active button::before {
    background-color:#444;
  }
  
  /*******************
  
  - .slide-help
    (with JavaScript)
  
  ********************/
  .slide-help-wrap {
    margin:2.985%;
    position:relative;
  }
  .slide-help .item {
    width:100%;
    position:relative;
  }
  .slide-help :focus {
    outline : none;
  }
  .slide-help .item .btn-start {
    display:block;
    width:71.11%;
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin:71.11% auto 0;
    cursor:pointer;
  }
  
  /*******************
  
  - .slide-detail-image
    (with JavaScript)
  
  ********************/
  .slide-detail-image {
    width: 700px;
    margin:1em auto;
  }
  .slide-detail-image .item .wrap {
    padding:0 50px;
  }
  .slide-detail-image .item .image {
    display:block;
    padding-top:66.667%;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
  }
  .slide-detail-image .slick-dots {
    bottom:auto;
  }
  @media (max-width: 767px) {
    .slide-detail-image {
      width:100%;
    }
    .slide-detail-image.slick-slider {
      margin-bottom:40px;
    }
    .slide-detail-image .item .wrap {
      padding:0;
    }
    .slide-detail-image .slick-dots {
      margin-top:15px;
    }
  }
  /*******************

- .footer

********************/
.footer {
  color:#fff;
  background-color:#555;
  padding-top:30px;
  padding-bottom:30px;
  font-size:87.5%;
}
.footer a {
  color:inherit;
}
.footer .layout {
  display:table;
  width:100%;
}
.footer .site-logo ,
.footer .copyright {
  display:table-cell;
  vertical-align:middle;
}
.footer .site-logo {
  margin-top:0;
}
.footer .copyright {
  text-align:right;
  letter-spacing:0.1em;
}
.footer .site-logo .poweredby {
  margin-right:1em;
  letter-spacing:0.1em;
  font-size:1.1em;
}
.footer .site-logo .poweredby ,
.footer .site-logo .logo-img {
  display:inline-block;
  vertical-align:middle;
}
@media (max-width:1040px) {
  .footer {
    padding-top:30px;
    padding-bottom:30px;
  }
  .footer .site-logo .poweredby {
    font-size:1em;
  }
  .footer .copyright {
    font-size:0.8em;
  }
  .footer .site-logo .logo-img {
    width:50%;
  }
}
@media (max-width:767px) {
  .footer {
    padding-top:1.5em;
    padding-bottom:1.5em;
  }
  .footer .layout {
    display:block;
  }
  .footer .site-logo ,
  .footer .copyright {
    width:100%;
    display:block;
    text-align:center;
  }
  .footer .site-logo .poweredby {
    font-size:1em;
    letter-spacing:0;
  }
  .footer .copyright {
    margin-top:0.5em;
    letter-spacing:0;
    font-size:0.9em;
  }
  .footer .site-logo .logo-img {
    width:39.15%;
    max-width:278px;
  }
}

/*******************

- .footer

********************/
.footer {
    color:#fff;
    background-color:#555;
    padding-top:30px;
    padding-bottom:30px;
    font-size:87.5%;
  }
  .footer a {
    color:inherit;
  }
  .footer .layout {
    display:table;
    width:100%;
  }
  .footer .site-logo ,
  .footer .copyright {
    display:table-cell;
    vertical-align:middle;
  }
  .footer .site-logo {
    margin-top:0;
  }
  .footer .copyright {
    text-align:right;
    letter-spacing:0.1em;
  }
  .footer .site-logo .poweredby {
    margin-right:1em;
    letter-spacing:0.1em;
    font-size:1.1em;
  }
  .footer .site-logo .poweredby ,
  .footer .site-logo .logo-img {
    display:inline-block;
    vertical-align:middle;
  }
  @media (max-width:1040px) {
    .footer {
      padding-top:30px;
      padding-bottom:30px;
    }
    .footer .site-logo .poweredby {
      font-size:1em;
    }
    .footer .copyright {
      font-size:0.8em;
    }
    .footer .site-logo .logo-img {
      width:50%;
    }
  }
  @media (max-width:767px) {
    .footer {
      padding-top:1.5em;
      padding-bottom:1.5em;
    }
    .footer .layout {
      display:block;
    }
    .footer .site-logo ,
    .footer .copyright {
      width:100%;
      display:block;
      text-align:center;
    }
    .footer .site-logo .poweredby {
      font-size:1em;
      letter-spacing:0;
    }
    .footer .copyright {
      margin-top:0.5em;
      letter-spacing:0;
      font-size:0.9em;
    }
    .footer .site-logo .logo-img {
      width:39.15%;
      max-width:278px;
    }
  }