@import url("https://use.typekit.net/bnf7jzd.css");
 
@font-face {
  font-family: "classical-garamond-bt";
  src: url(../fonts/classical_garamond_bt.ttf) format("truetype"), url(../fonts/classical_garamond_bt.woff) format("woff");
  }
 
/* ==========================================================================
    Typograpgy
   ========================================================================== */
   .main_inner * {
    color: #343434;
    font-family: toppan-bunkyu-mincho-pr6n, serif;
    font-weight: 400;
    font-style: normal;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
  }
  
  /* ==========================================================================
     Base
     ========================================================================== */
  .main_inner,
  .main {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .main_inner *,
  .main * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  #wrap {
    width: 100%;
    /* background-image: url(../img/pc.jpg); */
    background-size: 1600px;
    background-position-x: center;
    background-position-y: -150px;
    background-repeat: no-repeat;
  }
 
  #wrap .inner {
    width: 88rem;
    margin: 0 auto;
    padding-top: 6rem;
  }
  
  #wrap .inner img {
    width: 100%;
    /* opacity: 0.5; */
  }
  
  #wrap .sp_only {
      display: none!important;
  }

  .inner .txt {
    font-size:1.4rem;
    line-height: 2;
    letter-spacing:0.05em;
  }

  .inner .txtm {
    display: block;
    font-feature-settings: "palt";
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    font-weight: 500;
    font-size:1.2rem;
    line-height: 1.67;
    letter-spacing:0.12em;
    color: #8c8c8c;
  }

  .inner .pop {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 2.1rem;
    letter-spacing: 0.05em;
    color: #8c8c8c;
  }

  .inner .popl {
    margin-top: 1.6rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 3.4rem;
    letter-spacing:0.05em ;
    color: #8c8c8c;
  }

  .inner .ttlbox {
    margin: 0 auto;  
    text-align: center;  
  }

  .inner .ttlbox .ttl01 {
    margin: 0 auto;
    width: 19.8rem;
  }

  .inner .ttlbox .ttl02 {
    width: 30.4rem;
    margin:2.4rem auto 0;
    
  }

  .inner .ttlbox .txt01 {
    margin-top: 2.1rem;
    text-align: center;
    font-size: 1.4rem;
    line-height:1.8 ;
    letter-spacing: 0.1em;
  }

  .inner .sec01 .imgbox {
    margin-top: 5.8rem;
    display: flex;
    justify-content: space-between;
  }

  .inner .sec01 .imgbox .it01 {
    width: 40rem;
  }

  .inner .sec01 .imgbox .it01 .txtm {
    margin-top: 1rem;
  }

  .inner .sec01 .imgbox .it01 .txt01 {
    margin-top: 2.1rem;
  }

  .inner .sec01 .imgbox02 {
    margin-top: 7.4rem;
  }

  .inner .sec01 .imgbox03 {
    margin-top: 7.4rem;
  }
  
  .inner .sec01 .imgbox04 {
    margin-top: 7.2rem;
  }

  .inner .viewall {
    width: 46rem;
    margin: 14.5rem auto 0 ;
  }

  
  
  
  
  
  
  
  
  
  
  
  /* ====== TABLET ===== */
  @media screen and (max-width: 1280px) and (min-width:751px){
    html{
      font-size: calc(10*(100vw/1280));
    }
  }
 
 
 
 
 
 
  /* ====== SP ===== */
@media only screen and (max-width: 750px) {
  #wrap .sp_only {
    display: block!important;
  }
 
  #wrap .pc_only {
    display: none!important;
  } 
 
  #Contents {
    width: 100%;
    /* background-image: url(../img/sp.jpg); */
    background-size: 100%;
    background-position-x: center;
    background-position-y:-82px;
    background-repeat: no-repeat;
    color: #343434;
  }
 
  .bredlist.lp {
    line-height: 5.33333vw;
    font-size: 2.66667vw;
    margin: 3.33333vw auto;
    width: 92.592%;
    text-align: left;
    padding: 0;
  }
　.main_inner {
    padding: 0 calc(45 * (100vw / 750));
  }
  
  #wrap .inner {
    width: calc(660 * (100vw / 750));
    margin: 0 auto;
    padding-top: 0;
  }
  
  .inner .txt {
    font-size:calc(28 * (100vw / 750));
    line-height: 1.88;
    letter-spacing:0.1em;
  }

  .inner .txtm {
    display: block;
    font-feature-settings: "palt";
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    font-weight: 500;
    font-size:calc(25 * (100vw / 750));
    line-height: 1.8;
    letter-spacing:0.1em;
  }

  .inner .pop {
    font-size: calc(40 * (100vw / 750));
    letter-spacing: 0.05em;
  }

  .inner .popl {
    margin-top: calc(24 * (100vw / 750));
    font-size: calc(66 * (100vw / 750));
    letter-spacing: 0.04em;
  }

  .inner .ttlbox {
    margin: 0 auto;
    padding-top:calc(45 * (100vw / 750));
  }

  .inner .ttlbox .ttl01 {
    margin: 0 auto;
    width: calc(380 * (100vw / 750));
  }

  .inner .ttlbox .ttl02 {
    width: calc(586 * (100vw / 750));
    margin: calc(41 * (100vw / 750)) auto 0;    
  }

  .inner .ttlbox .txt01 {
    margin-top: calc(46 * (100vw / 750));
    text-align: center;
    font-size: calc(28 * (100vw / 750));
    line-height:1.88;
    letter-spacing: 0.1em;
  }

  .inner .sec01 .imgbox {
    margin-top: calc(92 * (100vw / 750));
    flex-direction: column;
  }

  .inner .sec01 .imgbox .it01 {
    width: 100%;
  }

  .inner .sec01 .imgbox .it01 .txtm {
    margin-top: calc(21 * (100vw / 750));
  }

  .inner .sec01 .imgbox .it01 .txt01 {
    margin-top: calc(23 * (100vw / 750));
    letter-spacing: 0.1em;
    text-align: justify;
  }

  .inner .sec01 .imgbox .it02 {
    margin-top: calc(104 * (100vw / 750));
  }

  .inner .sec01 .imgbox02 {
    margin-top: calc(104 * (100vw / 750));
  }

  .inner .sec01 .imgbox02 .it02 {
    margin-top: calc(107 * (100vw / 750));
  }

  .inner .sec01 .imgbox02 .it01 .txt01 {
    margin-top: calc(21 * (100vw / 750));
    letter-spacing: 0.096em;
  }

  .inner .sec01 .imgbox02 .it02 .txt01 {
    letter-spacing: 0.108em;
  }

  .inner .sec01 .imgbox03 {
    margin-top: calc(104 * (100vw / 750));
  }

  .inner .sec01 .imgbox03 .it01 .txt01 {
    margin-top: calc(23 * (100vw / 750));
    letter-spacing: 0.1em;
  }

  .inner .sec01 .imgbox03 .it02 {
    margin-top: calc(104 * (100vw / 750));
  }
  
  .inner .sec01 .imgbox04 {
    margin-top: calc(104 * (100vw / 750));
  }

  .inner .sec01 .imgbox04 .it02 {
    margin-top: calc(104 * (100vw / 750));
  }
 
  .inner .sec01 .imgbox04 .it01 .txt01 {
    margin-top: calc(23 * (100vw / 750));
    letter-spacing: 0.11em;
  }
  
  .inner .sec01 .imgbox04 .it02 .txt01 {
    letter-spacing: 0.095em;
  }


  .inner .viewall {
    width: calc(570 * (100vw / 750));
    margin: calc(134  * (100vw / 750)) auto 0 ;
  }
 
}