@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
   ========================================================================== */
   @media only screen and (min-width: 768px) and (max-width: 1600px) {
    html {
      font-size: calc(10* (100vw / 1600))!important;

    }
  }

   @media (max-width: 767px) {
    .lp * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
  }
  html {
    font-size: 62.5%;
  }

  * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  img,
  video,
  svg {
    width: 100%;
    height: auto;
  }

/* for pc*/

  .sp {
    display: none;
  }

  .pc {
    display: block;
  }

  #Contents {
    width: 160rem;
    /*width: 100%;*/
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center -156px;
    height: auto;
    margin: 0 auto;
    background-image: url(./img/page_pc.png);
  }

/*basic*/

  .main_container {
    margin: 0 auto;
    width: 100%;
    -ms-font-feature-settings: "normal";
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem;
    line-height: 2;
    letter-spacing: 0.1em;
    color: #333;
    text-align: left;
    font-feature-settings: "palt";
  }

/*ヘッド部分*/

  .heading{
    margin-bottom: 11.5rem;
  }

  .heading_img{
    width: 100rem;
    margin: auto;
    margin-bottom: 7rem;
  }

  .heading_ttl{
    margin: auto;
    margin-bottom: 2.8rem;
    font-size: 2.6rem;
    line-height: 2.0;
    letter-spacing: 0.12em;
    font-family: trajan-sans-pro, sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
  }

  .heading_txt{
    margin: auto;
    font-size: 1.4rem;
    letter-spacing: 0.12em;
    text-align: center;
  }

/*コンテンツ部分*/

  .content_price{
    text-align: right;
    font-size: 1.2rem;
    letter-spacing: 0.09em;
    text-align: right;
  }

  .content_ttl{
    margin-top: 5.6rem;
    margin-left: -1.7rem;
    text-align: left;
    z-index: 1;
  }

  .content_txt_area{
    position: absolute;
    border: 0.3rem #f0f0f0 solid;
  }

  .item{
    position: absolute;
    z-index: 1;
  }

  .price_left{
    margin-left: 1.2rem;
  }

  .price_left2{
    margin-left: 1.5rem;;
  }


  /*1段目*/
  .sec01{
    height: 76.4rem;
    position: relative;
    margin: auto;
    margin-bottom: 12rem;
  }

  .sec01 .ttl_width{
    display: flex;
    width: 70rem;
    height: 10rem;
    background-color: #f0f0f0;
    margin: auto;
  }

  .sec01 .ttl_txt{
    display: block;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 7.9rem;
    padding-right: 7.8rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    text-align: center;
    border: 0.2rem #fff solid;
    font-size: 2rem;
    line-height: 1.75;
    letter-spacing: 0.12em;
    z-index: 1;
  }


  .sec01 .content_txt{
    padding: 2rem;
  }

  .sec01 .content_txt_area._1{
    width: 41rem;
    padding-left: 2.4rem;
    top: 16rem;
    right: 30rem;
  }

  .sec01 .content_txt_area._2{
    width: 34.1rem;
    padding-right: 5.4rem;
    top: 17.5rem;
    left: 25rem;
  }

  .sec01 .content_txt_area._3{
    width: 35.4rem;
    padding-left: 5.5rem;
    top: 50.5rem;
    left: 30rem;
    letter-spacing: 0.09em;
  }

  .sec01 .content_txt_area._4{
    width: 34.1rem;
    padding-right: 5.9rem;
    bottom: 8.1rem;
    right: 33.6rem;
  }

  .sec01 .content_img_area_1{
    width: 27.2rem;
    margin: auto;
    top: 15.5rem;
    left: 65.9rem;
  }

  .sec01 .content_img_area_2{
    width: 26.7rem;
    margin: auto;
    top: 45.5rem;
    left: 66rem;
  }

  .sec01 .content_img_area_3{
    margin: auto;
    width: 13rem;
    top: 19.7rem;
    left: 50rem;
  }

  .sec01 .content_img_area_4{
    width: 19rem;
    bottom: 8.7rem;
    left: 18.8rem;
  }

  .sec01 .content_img_area_5{
    width: 23.7rem;
    bottom: 8.8rem;
    right: 17.6rem;
  }


/*2段目*/
.sec02{
  height: 60.2rem;
  position: relative;
  margin: auto;
  margin-bottom: 12rem;
}

.sec02 .ttl_width{
  margin: auto;
  display: flex;
  width: 70rem;
  height: 10rem;
  background-color: #f0f0f0;
  margin: auto;
}

.sec02 .ttl_txt{
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 9.2rem;
  padding-right: 9.2rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  text-align: center;
  border: 0.2rem #fff solid;
  font-size: 2rem;
  line-height: 1.75;
  letter-spacing: 0.1em;
  z-index: 1;
}


.sec02 .content_txt{
  padding: 2rem;
}

.sec02 .content_txt_area._1{
  width: 41rem;
  padding-right: 3.4rem;
  top: 17.6rem;
  left: 46.4rem;
}

.sec02 .content_txt_area._2{
  width: 35.1rem;
  padding-left: 2.2rem;
  bottom: -0.4rem;
  left: 71.6rem;
}

.sec02 .content_img_area_1{
  width: 28.2rem;
  top: 17.8rem;
  left: 85rem;
}

.sec02 .content_img_area_2{
  width: 21.3rem;
  top: 44.5rem;
  left: 53.5rem;
}

/*3段目*/
  .sec03{
    height: 84.4rem;
    position: relative;
    margin: auto;
    margin-bottom: 12rem;
  }

  .sec03 .ttl_width{
    display: flex;
    width: 70rem;
    height: 10rem;
    background-color: #f0f0f0;
    margin: auto;
  }

  .sec03 .ttl_txt{
    margin: auto;
    padding-left: 21.7rem;
    padding-right: 21.7rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    border: 0.2rem #fff solid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2rem;
    line-height: 1.75;
    letter-spacing: 0.12em;
    z-index: 1;
  }

  .sec03 .content_txt{
    letter-spacing: 0.11em;
    padding: 2rem;
  }

  .sec03 .content_txt_area._1{
    width: 40rem;
    padding-bottom: 5rem;
    top: 17.5rem;
    left: 42rem;
  }

  .sec03 .content_txt_area._2{
    width: 29.3rem;
    padding-top: 5rem;
    top: 29.6rem;
    right: 44rem;
  }

  .sec03 .content_txt_area._3{
    width: 45.3rem;
    padding-right: 5rem;
    padding-left: 1.3rem;
    bottom: 2.7rem;
    left: 51.1rem;
    letter-spacing: 0.09em;
  }

  .sec03 .content_img_area_1{
    width: 23.2rem;
    top: 43rem;
    left: 38.5rem;
  }

  .sec03 .content_img_area_2{
    width: 16rem;
    top: 41.4rem;
    left: 62.5rem;
  }

  .sec03 .content_img_area_3{
    width: 14rem;
    top: 14.4rem;
    right: 51rem;
  }

  .sec03 .content_img_area_4{
    width: 19.3rem;
    bottom: 1.8rem;
    right: 50.6rem;
  }

/*all_item*/
  .all_item_btn{
    width: 46rem;
    margin:0 auto;
    margin-bottom: 8rem;
  }

/*gift*/
  .gift_area{
    margin: auto;
  }

  .gift_img{
    width: 33rem;
    margin: auto;
    margin-bottom: 2.5rem;
  }

  .gift_ttl{
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.5;
    margin-bottom: 0.9rem;
  }

  .gift_txt{
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.9285;
  }

  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

    .sec01 .ttl_txt {
      margin-top: 0.6rem;
      margin-bottom: 0.6rem;
      padding-left: 5.8rem;
      padding-right: 5.8rem;
      border:0.1rem #fff solid;
      position: static;
    }

    .sec02 .ttl_txt{
      border:0.1rem #fff solid;
      margin-top: 0.6rem;
      margin-bottom: 0.6rem;
      padding-left: 7.7rem;
      padding-right: 7.7rem;
    }

    .sec03 .ttl_txt{
      border:0.1rem #fff solid;
      margin-top: 0.8rem;
      margin-bottom: 0.8rem;
      padding-left: 20.5rem;
      padding-right: 20.5rem;
    }
  }



/* ====== TABLET ===== */

@media only screen and (max-width: 1200px) {


}






/* ====== SP ===== */
@media only screen and (max-width: 750px) {

  a{
    color: #333;
  }

  .bredlist.lp {
    line-height: 5.33333vw;
    font-size: 2.66667vw;
    margin: 3.33333vw auto;
    width: 92.592%;
    text-align: left;
    padding: 0;
  }

 #Contents {
    max-width: calc(750* (100vw/750));
    background-position: center calc(198* (100vw/750));
    background-image: url(./img/page_sp.png);
  }

/*basic*/

  .sp {
    display: block;
  }

  .pc {
    display: none;
  }
/*basic*/

.main_container {
  font-size: calc(24* (100vw / 750));
  line-height: 2.1;
  letter-spacing: 0.13em;
  overflow-x: hidden;
}

/*ヘッド部分*/

.heading{
  margin-bottom: calc(113* (100vw / 750));
}

.heading_img{
  width: 100%;
  margin: auto;
  margin-bottom: calc(72* (100vw / 750));
}

.heading_ttl{
  margin: auto;
  margin-bottom: calc(30* (100vw / 750));
  font-size: calc(40* (100vw / 750));
  line-height: 1.75;
  letter-spacing: 0.11em;
}

.heading_txt{
  margin: auto;
  font-size: calc(24* (100vw / 750));
  line-height: 2.0;
  letter-spacing: 0.12em;
}

/*コンテンツ部分*/

.content_txt_area{
  position: absolute;
  border: calc(7* (100vw / 750)) #f0f0f0 solid;
}

.item{
  position: absolute;
  z-index: 1;
}

.price_left{
  margin-left: calc(24* (100vw / 750));
}

.price_left2{
  margin-left: calc(27* (100vw / 750));
}


/*1段目*/
.sec01{
  width: 100%;
  height: calc(2820* (100vw / 750));
  position: relative;
  margin: auto;
  margin-bottom: calc(120* (100vw / 750));
}

.sec01 .ttl_width{
  margin: auto;
  width: calc(670* (100vw / 750));
  height: calc(184* (100vw / 750));
}

.sec01 .ttl_txt{
  margin: auto;
  padding-left: calc(73* (100vw / 750));
  padding-right: calc(73* (100vw / 750));
  padding-top: calc(22* (100vw / 750));
  padding-bottom: calc(22* (100vw / 750));
  border: calc(3* (100vw / 750)) #fff solid;
  font-size: calc(34* (100vw / 750));
  line-height: 1.764;
  z-index: 1;
}

.sec01 .content_txt{
  padding: calc(35* (100vw / 750));
}

.sec01 .content_txt_area._1{
  width: calc(637* (100vw / 750));
  padding-left: calc(10* (100vw / 750));
  top: calc(695* (100vw / 750));
  right: calc(65* (100vw / 750));
  word-break: break-all;
}

.sec01 .content_txt_area._2{
  width: calc(637* (100vw / 750));
  padding-right: 0;
  padding-left: calc(167* (100vw / 750));
  top: calc(1183* (100vw / 750));
  left: calc(56* (100vw / 750));
  line-height: 2.12;
  letter-spacing: 0.13em;
}

.sec01 .content_txt_area._3{
  width: calc(637* (100vw / 750));
  padding-left: calc(13* (100vw / 750));
  padding-right: calc(205* (100vw / 750));
  top: calc(1760* (100vw / 750));
  left: calc(56* (100vw / 750));
  letter-spacing: 0.13em;
}

.sec01 .content_txt_area._4{
  width: calc(637* (100vw / 750));
  padding-right: 0;
  padding-left: calc(227* (100vw / 750));
  bottom: calc(0* (100vw / 750));
  right: calc(57* (100vw / 750));
}

.sec01 .content_img_area_1{
  width: calc(350* (100vw / 750));
  top: calc(255* (100vw / 750));
  left: calc(82* (100vw / 750));
}

.sec01 .content_img_area_2{
  width: calc(340* (100vw / 750));
  top: calc(328* (100vw / 750));
  left: calc(400* (100vw / 750));
}

.sec01 .content_img_area_3{
  width: calc(200* (100vw / 750));
  top: calc(1220* (100vw / 750));
  left: calc(30* (100vw / 750));
}

.sec01 .content_img_area_4{
  width: calc(295* (100vw / 750));
  bottom: calc(670* (100vw / 750));
  left: calc(444* (100vw / 750));
}

.sec01 .content_img_area_5{
  width: calc(330* (100vw / 750));
  bottom: calc(117* (100vw / 750));
  right: calc(430* (100vw / 750));
}


/*2段目*/
.sec02{
  width: 100%;
  height: calc(1515* (100vw / 750));
  position: relative;
  margin: auto;
  margin-bottom: calc(120* (100vw / 750));
}

.sec02 .ttl_width{
  margin: auto;
  width: calc(670* (100vw / 750));
  height: calc(184* (100vw / 750));
}

.sec02 .ttl_txt{
  margin: auto;
  padding-left: calc(21* (100vw / 750));
  padding-right: calc(18* (100vw / 750));
  padding-top: calc(17* (100vw / 750));
  padding-bottom: calc(20* (100vw / 750));
  border: calc(3* (100vw / 750)) #fff solid;
  font-size: calc(34* (100vw / 750));
  line-height: 1.764;
  letter-spacing: 0.12em;
  z-index: 1;
}


.sec02 .content_txt{
  padding: calc(35* (100vw / 750));
}


.sec02 .content_txt_area._1{
  width: calc(637* (100vw / 750));
  padding-left: calc(10* (100vw / 750));
  padding-right: 0;
  padding-top: calc(5* (100vw / 750));
  top: calc(500* (100vw / 750));
  left: calc(56* (100vw / 750));
}

.sec02 .content_txt_area._2{
  width: calc(637* (100vw / 750));
  padding-left: calc(10* (100vw / 750));
  padding-right: calc(1* (100vw / 750));
  top: calc(1188* (100vw / 750));
  left: calc(56* (100vw / 750));
  line-height: 2.17;
  letter-spacing: 0.13em;
}

.sec02 .content_img_area_1{
  width: calc(350* (100vw / 750));
  top: calc(255* (100vw / 750));
  left: calc(215* (100vw / 750));
}

.sec02 .content_img_area_2{
  width: calc(280* (100vw / 750));
  top: calc(1018* (100vw / 750));
  left: calc(240* (100vw / 750));
}

/*3段目*/
.sec03{
  width: 100%;
  height: calc(2200* (100vw / 750));
  position: relative;
  margin: auto;
  margin-bottom: calc(165* (100vw / 750));
}

.sec03 .ttl_width{
  margin: auto;
  width: calc(670* (100vw / 750));
  height: calc(125* (100vw / 750));
}

.sec03 .ttl_txt{
  margin: auto;
  padding-left: calc(107* (100vw / 750));
  padding-right: calc(107* (100vw / 750));
  padding-top: calc(15* (100vw / 750));
  padding-bottom: calc(22* (100vw / 750));
  border: calc(3* (100vw / 750)) #fff solid;
  font-size: calc(34* (100vw / 750));
  line-height: 1.764;
  z-index: 1;
}

.sec03 .content_txt{
  letter-spacing: 0.11em;
  padding: calc(35* (100vw / 750));
}

.sec03 .content_txt_area._1{
  width: calc(637* (100vw / 750));
  padding-left: calc(10* (100vw / 750));
  padding-bottom: calc(53* (100vw / 750));
  top: calc(225* (100vw / 750));
  left: calc(56* (100vw / 750));
}

.sec03 .content_txt_area._2{
  width: calc(637* (100vw / 750));
  padding-top: 0;
  padding-left: calc(113* (100vw / 750));
  top: calc(1100* (100vw / 750));
  right: calc(65* (100vw / 750));
}

.sec03 .content_txt_area._2_2{
  width: calc(637* (100vw / 750));
  padding-left: calc(50* (100vw / 750));
  padding-top: calc(38* (100vw / 750));
  padding-right: calc(35* (100vw / 750));
  padding-bottom: calc(35* (100vw / 750));
  top: calc(1100* (100vw / 750));
  right: calc(65* (100vw / 750));
  letter-spacing: 0.16em;
  word-break: break-all;
}

.txt_up_1{
  padding-left: calc(140* (100vw / 750));
}

.txt_under_1{
  padding-left: calc(105* (100vw / 750));
}

.sec03 .content_txt_area._3{
  width: 45.3rem;
  padding-right: calc(113* (100vw / 750));
  padding-left: 0;
  bottom: 2.7rem;
  left: calc(65* (100vw / 750));
  letter-spacing: 0.09em;
}

.sec03 .content_txt_area._3_2{
  width: calc(637* (100vw / 750));
  padding-left: calc(50* (100vw / 750));
  padding-top: calc(40* (100vw / 750));
  padding-right: calc(35* (100vw / 750));
  padding-bottom: calc(37* (100vw / 750));
  bottom: calc(15* (100vw / 750));
  right: calc(65* (100vw / 750));
  letter-spacing: 0.13em;
  word-break: break-all;
}

.txt_up_2{
  padding-right: calc(210* (100vw / 750));
}

.txt_under_2{
  padding-right: calc(95* (100vw / 750));
}

.sec03 .content_img_area_1{
  width: calc(315* (100vw / 750));
  top: calc(885* (100vw / 750));
  left: calc(95* (100vw / 750));
}

.sec03 .content_img_area_2{
  width: calc(220* (100vw / 750));
  top: calc(855* (100vw / 750));
  left: calc(440* (100vw / 750));
}

.socks_txt{
  margin-right: calc(30* (100vw / 750));
}

.shose2_txt{
  padding-right: calc(76* (100vw / 750));
}

.sec03 .content_img_area_3{
  width: calc(205* (100vw / 750));
  top: calc(1175* (100vw / 750));
  right: calc(530* (100vw / 750));
}

.sec03 .content_img_area_4{
  width: calc(230* (100vw / 750));
  bottom: calc(150* (100vw / 750));
  right: calc(50* (100vw / 750));
}

/*all_item*/
.all_item_btn{
  width: calc(570* (100vw / 750));
  margin:0 auto;
  margin-bottom: calc(120* (100vw / 750));
}

/*gift*/
.gift_area{
  margin: auto;
}

.gift_img{
  width: calc(600* (100vw / 750));
  margin: auto;
  margin-bottom: calc(40* (100vw / 750));
}

.gift_ttl{
  text-align: center;
  font-size: calc(30* (100vw / 750));
  line-height: 1.392;
  margin-bottom: calc(11* (100vw / 750));
}

.gift_txt{
  text-align: center;
  font-size: calc(26* (100vw / 750));
  line-height: 1.625;
}



  }

  /************ fade **********/
.fade {
  -webkit-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
  opacity: 0;
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
}

.fade.onView {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}