@charset "UTF-8";

@import url("common.css");
@import url("nav.css");
@import url("tab.css");


h2,h3,.d-desc{
  letter-spacing: 0.04em;
}

/* = SP ================================================ */

@media screen and (min-width:320px) {

  /* header
  -------------------------- */
  header{
    margin:62px 0 30px;
  }
  .main{
    position: relative;
  }
  .category{
    position: absolute;
    width: 60px;
    height: 60px;
    margin-top: 62px;
    top: 15px;
    right: 15px;
  }

  /* title
  -------------------------- */
  .title{
    text-align: left;
    border-bottom: 6px solid #e0d179;
    padding-bottom: 1em;
  }
  .t-s{
    border-color: #b58c4b;
  }
  .t-f{
    border-color: #868e27;
  }
  .t-g{
    border-color: #958c87;
  }
  .t-inner{
    margin-bottom: 1.5em;
  }
  .number{
    font-size: 1.4rem;
    color: #004da0;
    letter-spacing: 0.1em;
    margin-bottom: 0.25em;
  }
  h1{
    font-size: 4rem;
    line-height: 0.85;
    margin-bottom: 0.15em;
  }
  .ruby,.price{
    font-size: 1.5rem;
  }
  .item{
    font-size: 2.2rem;
    line-height: 1.15;
  }

  /* lead
  -------------------------- */
  .lead{
    margin: 4em 0 3.5em;
  }
  h2{
    font-size: 2.2rem;
    line-height: 1.2;
    color: #004da0;
    margin-bottom: 0.85em;
  }
  .desc{
    font-size: 1.7rem;
    line-height: 1.6;
    text-align: justify;
  }
  .exp{
    margin-top: 3.5em;
  }
  .exp p{
    margin-bottom: 0.6em;
  }

  /* ballon
  -------------------------- */
  .ballon{
    text-align: left;
    margin-top: 0;
    margin-bottom: 4.5em;
  }
  .recommend{
    display: inline-flex;
    align-items: center;
    margin-bottom: 1em;
  }
  .face{
    width: 60px;
    margin-right: 10px;
  }
  h3{
    flex: 1;
    font-size: 1.9rem;
    line-height: 1.26;
    color: #004da0;
  }
  .r-desc{
    font-size: 1.5rem;
  }

  /* detail
  -------------------------- */
  .detail{
    margin-bottom: 3.5em;
  }
  .detail figure img{
    margin-bottom: 1.25em;
  }
  .d-desc{
    font-size: 1.4rem;
    font-weight: normal;
  }
  .d-item{
    width: 50%;
  }
  .d-item figcaption{
    width: 80%;
    margin: 0 auto;
  }
  .spec{
    border-top: 1px solid #14171a;
    padding-top: 1em;
    margin-bottom: 3em;
  }
  h4{
    font-size: 2.4rem;
    line-height: 2;
  }
  .t-japan{
    font-size: 1.7rem;
    line-height: 1.25;
    margin-bottom: 0.4em;
  }

  /* youtube
  -------------------------- */
  .youtube {
    position: relative;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    height: 56.25vw;
  }
  .youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .cap{
    margin-bottom: 1.25em;
  }
  .y-cap{
    margin-bottom: 3em;
  }
  .nocap{
    margin-bottom: 3.5em;
  }

  /* table
  -------------------------- */
  table,td,th {
    border: 1px solid #14171a;
    border-collapse: collapse;
    width: 330px;
    margin: 0.75em 0;
  }
  td, th {
    padding: 0.5em;
  }

  /* info
  -------------------------- */
  .info{
    text-align: left;
  }
  h5{
    font-size: 2em;
    line-height: 2;
  }
  dt{
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: bold;
    margin-top: 0.8em;
  }

  /* more
  -------------------------- */
  .ec{
    font-size: 1.7rem;
    text-align: center;
    width: 330px;
    margin: 1em auto 0;
  }
  .buy{
    border: 2px solid #14171a;
    background: #004da0;
  }
  .sn{
    margin-top: 0;
  }

  } /* = SP ============================================== */


  /* = PC ================================================ */


  @media screen and (min-width:769px) {

    /* header
    -------------------------- */
    header{
      background: #e0d179;
    }
    .h-s{
      background: #b58c4b;
    }
    .h-f{
      background: #868e27;
    }
    .h-g{
      background: #958c87;
    }
    .main{
      max-width: 940px;
      height: auto;
      margin: 0 auto;
    }
    .category{
      width: 100px;
      height: 100px;
    }

    /* title
    -------------------------- */
    .t-inner{
      margin-bottom: 1.8em;
    }
    .number{
      font-size: 1.7rem;
    }
    h1{
      font-size: 5rem;
    }
    .ruby,.price{
      font-size: 1.9rem;
    }
    .item{
      font-size: 2.7rem;
    }

    /* lead
    -------------------------- */
    h2{
      font-size: 2.7rem;
    }
    .desc{
      font-size: 2rem;
    }

    /* ballon
    -------------------------- */
    .face{
      width: 86px;
    }
    h3{
      font-size: 2.2rem;
    }
    .r-desc{
      font-size: 1.8rem;
    }

    /* detail
    -------------------------- */
    .d-desc{
      font-size: 1.5rem;
    }
    h4{
      font-size: 3rem;
    }
    .t-japan{
      font-size: 2.3rem;
      line-height: 2;
      margin-bottom: 0;
    }

    /* youtube
    -------------------------- */
    .youtube {
      width: 100%;
      height: 0px;
      padding-top: 56.25%;
      margin-left: auto;
      margin-right: auto;
    }

    /* more
    -------------------------- */
    .more{
      padding: 1.15em 0;
    }
    .ec{
      width: 480px;
    }

  }

  @media screen and (min-width:941px) {
    .category{
      right: calc(2% + 468 * (100vw - 941px)/979);
    }

    } /* = PC ============================================== */