@import url("https://use.typekit.net/bnf7jzd.css");
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@300;400&display=swap');
/* 
@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) {
  /* ====== SP ===== */
  .bredlist.lp {
    line-height: 5.33333vw;
    font-size: 2.66667vw;
    margin: 3.33333vw auto;
    width: 92.592%;
    text-align: left;
    padding: 0;
  }
  /*basic*/
  .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;
}
.main_container h2,
.main_container h3,
.main_container h4{
  font-weight: 400;
}
.main_container a{
  display: inline-block;
  width: 100%;
}
.main_container picture,
.main_container source{
  width: 100%;
  height: auto;
}
.image-rendering img,
.image-rendering picture{
  image-rendering: -webkit-optimize-contrast;
}


.spOnly {
  display: block;
}
.pcOnly {
  display: none;
}

/* ja style */
.main_container {
  margin: 0 auto;
  width: 100%;
  font-size: calc(24 * (100vw / 750));
  font-family: toppan-bunkyu-mincho-pr6n, "Noto Serif JP", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-feature-settings: "palt";
  font-weight: 400;
  font-style: normal;
  line-height: 2;
  letter-spacing: 0.1em;
  -ms-font-feature-settings: "normal";
  color: #343434;
  text-align: left;
}
/* en style */
.main_container .heading--ttl {
  font-family: trajan-sans-pro, sans-serif;
  text-align: center;
}
/* credit style */
.creditBox .credit{
  display: inline-block;
  margin: calc(33 * (100vw/ 750)) auto 0;
  font-size: calc(20 * (100vw / 750));
  line-height: 1.75;
  letter-spacing: 0.12em;
}
.creditBox .credit span{
  display: block;
}
.creditBox .credit span.tax{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  margin: calc(0 * (100vw / 750)) auto 0 calc(5 * (100vw / 750));
}
.creditBox .buyBtn{
  display: block;
  width: calc(60 * (100vw / 750));
  height: calc(24 * (100vw / 750));
  margin: 0 0 0 calc(15 * (100vw / 750));
  line-height: calc(24 * (100vw / 750));
}
/* mobile style */
@media all and (-ms-high-contrast: none) {
  .main_container {
    font-feature-settings: inherit;
    letter-spacing: 0!important;
  }
}
@media only screen and (min-width: 768px) {
/* pc */
.spOnly {
  display: none;
}
.pcOnly {
  display: block;
}
/* ja style */
  .main_container {
    font-size: 1.4rem;
    letter-spacing: 0.12em;
  }
  /* credit style */
  .creditBox .credit{
    margin: 3.2rem auto 0;
    white-space: nowrap;font-size: 1.4rem;
    line-height: 2;
  }
  .creditBox .credit span.tax{
    margin: 0em auto 0 0.5em;
  }
  .creditBox .buyBtn{
    width: 4.4rem;
    height: 1.8rem;
    margin: 0 0 0 1rem;
    line-height: 1.8rem;
  }
}



/* ------------------------------------------
Header
------------------------------------------ */
/* sp */
.headingWrap{
  padding: calc(60 * (100vw / 750)) 0 calc(75 * (100vw / 750));
  width: calc(750 * (100vw / 750));
  margin: auto;
  text-align: center;
  background-color: #f5f5f5;
}
.headingWrap .imgContents{
  width: calc(680 * (100vw / 750));
  margin: 0 auto;
}
.headingWrap .heading--ttl{
  margin-top: calc(80 * (100vw / 750));
  font-size: calc(50 * (100vw / 750));
  line-height: 1;
  letter-spacing: 0.15em;
}
.headingWrap .heading--txt{
  margin-top: calc(38 * (100vw / 750));
  font-size: calc(24 * (100vw / 750));
  line-height: 2;
  letter-spacing: 0.12em;
}
.headingWrap .heading--txt span{
  display: block;
  margin-top: calc(20 * (100vw / 750));
}
@media only screen and (min-width: 768px) {
/* pc */
  .headingWrap{
    padding: 6.0rem 0 5.5rem;
  }
  .headingWrap .imgContents{
    width: 80.0rem;
  }
  .headingWrap .heading--ttl{
    margin-top: 5.8rem;
    font-size: 3.2rem;
    letter-spacing: 0.15em;
  }
  .headingWrap .heading--txt{
    margin-top: 3.6rem;
    font-size: 1.6rem;
  }
  .headingWrap .heading--txt span{
    margin-top: 2.8rem;
  }
}




/* ------------------------------------------
section--1
------------------------------------------ */
/* sp */
.main_container .section--1{
  margin-top: calc(144 * (100vw / 750));
  text-align: center;
}
.main_container h3[class^="contentsTtl"]{
  padding: calc(25 * (100vw / 750)) 0 calc(20 * (100vw / 750));
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  letter-spacing: 0.12em;
}
.main_container div[class^="itemContents"]:not(.itemContents--3){
  margin: calc(80 * (100vw / 750)) auto 0;
}

.section--1 .contentsTtl--1{
  font-size: calc(34 * (100vw / 750));
  line-height: 1.941;
}
.section--1 .lead--ttl{
  margin: calc(65 * (100vw / 750)) auto 0;
  font-size: calc(34 * (100vw / 750));
  line-height: 1.941;
  letter-spacing: 0.12em;
}
.section--1 .lead--txt{
  width: calc(600 * (100vw / 750));
  margin: calc(40 * (100vw / 750)) auto 0;
  font-size: calc(24 * (100vw / 750));
  line-height: 2;
  letter-spacing: 0.12em;
}
.section--1 .leadContents .lead--txt{
  text-align: left;
}

.section--1 .itemContents--1{
  width: 100%;
}
.section--1 .itemContents--2{
  width: calc(600 * (100vw / 750));
  margin: calc(67 * (100vw / 750)) auto 0!important;
}
.section--1 .itemContents--2 .lead--txt{
  margin: calc(67 * (100vw / 750)) auto 0;
}
@media only screen and (min-width: 768px) {
/* pc */
  .main_container .section--1{
    width: 66.0rem;margin: 10.0rem auto 0;
  }
  .main_container h3[class^="contentsTtl"]{
    width: auto;padding: 1.6rem 0 1.2rem;
    margin: auto;
  }
  .main_container .section--1 div[class^="itemContents--1"]{
    width: 60.0rem;margin: 6rem auto 0;
  }

  .section--1 .contentsTtl--1{
    font-size: 2.0rem;
    line-height: 2;
  }
  .section--1 .lead--txt{
    width: auto;
    margin: 2.8rem auto 0;
    font-size: 1.4rem;
    line-height: 2;
  }

  .section--1 .itemContents--2{
    width: 42.0rem;
    margin: 5.1rem auto 0!important;
  }
  .section--1 .lead--ttl{
    margin: 5rem auto 0;
    font-size: 2.0rem;
    line-height: 2.1;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }
  .section--1 .itemContents--2 .lead--txt{
    margin: 5.4rem auto 0;
  }
}




/* ------------------------------------------
section--2
------------------------------------------ */
/* sp */
.main_container .section--2{
  margin-top: calc(109 * (100vw / 750));
  text-align: center;
}
.section--2 .contentsTtl--1{
  font-size: calc(30 * (100vw / 750));
line-height: 1.8;}
.main_container div[class^="prodContents"]{
  width: calc(320 * (100vw / 750));
  margin: 0 0 calc(74.5 * (100vw / 750));
}

.section--2 .itemContents--3{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: calc(670 * (100vw / 750));
  margin: calc(80 * (100vw / 750)) auto 0;
  /* padding-left: calc(5 * (100vw / 750)); */
  text-align: center;
}
@media only screen and (min-width: 768px) {
/* pc */
  .main_container .section--2{
    width: 68.0rem;margin: 9.2rem auto 0;
  }
  .section--2 .contentsTtl--1{
    font-size: 2rem;
  line-height: 2.467;}
  .main_container div[class^="prodContents"]{
    width: 22.0rem;
    margin: 0 0 7.9rem;
  }

  .section--2 .itemContents--3{
    width: 54rem;
    margin: 8.5rem auto 0;
    /* padding-left: calc(5 * (100vw / 750)); */
  }
}




/* ------------------------------------------
ALL-item
------------------------------------------ */
/* sp */
.all_item_btn{
  display: block;
  width: calc(570 * (100vw / 750));
  margin: calc(69 * (100vw / 750)) auto calc(120 * (100vw / 750));
}
@media only screen and (min-width: 768px) {
/* pc */
  .all_item_btn{
    width: 46.0rem;
    margin: 3.7rem auto 8.0rem;
  }
}






/* fade */
.fade {
  transition-property: opacity, transform;
  transition-duration: 1.5s;
  opacity: 0;
  transform: translateY(1.5rem);
}
 
.fade.onView {
  opacity: 1;
  transform: translateY(0);
}