@charset "UTF-8";
/* media query

/* function
------------------------------------------ */
/* 変数
------------------------------------------ */
:root {
  --color-sub: #faf3dc;
  --lp-header-color: linear-gradient(180deg, initial, transparent);
}

/* overwrite
/* ------------------------------------------ */
/* #header {
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(88, 98, 68)), to(rgba(88, 98, 68, 0)));
  background: linear-gradient(180deg, rgb(88, 98, 68), rgba(88, 98, 68, 0));
} */
 .main-area.lp {
  margin-bottom: 0px;
  padding-top: 0;
}

.header[data-header-theme="light"].c-active, .header[data-header-theme="dark"] {
  background: var(--lp-header-color);
}

/* .main-area.lp{
  background-color: #d3ddc3;
} */

#header .header__inner .header__inner--left .header-logo a svg path {
  fill: #000;
}
#header .header__inner .header__inner--right .header-nav__user svg path {
  fill: #000;
}
#header .header__inner .header__inner--right .header-nav__search svg path {
  fill: #000;
}
#header .header__inner .header__inner--right .header-nav__cart svg path {
  fill: #000;
}
#header .header-nav__menuBtn span {
  background-color: #000;
}
#header .header-nav__menuBtn.open span {
  background-color: var(--color-main);
}
#header .header-menu a {
  color: #000;
}
#header .toggle-arrow::before, #header .toggle-arrow::after {
  background: #000;
}

/* 
.header[data-header-theme="light"].c-active, .header[data-header-theme="dark"]{
  background: none;
} */

#MC260319PROTECTU {
  /* 可変設定
  ------------------------------------------ */
  /*デザインの値*/
  --pc-width: 1400; /*PCデザイン幅*/
  --sp-width: 375; /*SPデザイン幅*/
  --pc-artboard-width: 450; /*SP共通デザイン幅*/
  --sp-artboard-width: 375; /*PC共通デザイン幅*/
  /*可変率の計算式*/
  --formula: calc(
    var(--variable) * var(--ratio)
  ); /*SP,PC共通箇所の可変割合の計算式*/
  --formula_pc: calc(var(--variable) * 1); /*PCデザインの可変割合の計算式*/
  /* PC画面幅 1400px以上 固定 */
  /* PC画面幅 768～1400px 可変 */
  /* SP画面幅 767px以下 可変 */

  /* mixin
  ------------------------------------------ */
  /* reset
  ------------------------------------------ */
  /* animation
  ------------------------------------------ */
  /* 共通
  ------------------------------------------ */
  /* LP style
  ------------------------------------------ */
  margin: 0 auto;
  --color-white: #fff;
  --color-lightblue: #f2f9fc;
  --color-lightblue02: #d3e4ed;
  --color-blue: #223e51;
  --font-cezanne: "fot-cezanne-pron", sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  font-style: normal;
  color: var(--color-blue);
  background-color: var(--color-lightblue);
}

@media (min-width: 1401px) {
  #MC260319PROTECTU {
    --ratio: calc(
      var(--pc-artboard-width) / var(--sp-artboard-width)
    ); /* PCとSPのデザイン幅の比率 */
    --variable: 1px; /* 固定値（可変しない） */
  }
}

@media (min-width: 768px) and (max-width: 1400px) {
  #MC260319PROTECTU {
    --ratio: calc(
      var(--pc-artboard-width) / var(--sp-artboard-width)
    ); /* PCとSPのデザイン幅の比率 */
    --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */

    /* background-image: url(../img/pc-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat; */
    width: 100%;
  }
}

@media (max-width: 767px) {
  #MC260319PROTECTU {
    --ratio: 1; /* 比率は1（変わらない） */
    --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}


.MC260319PROTECTU img {
  width: 100%;
  height: auto;
}

.MC260319PROTECTU a{
  display: inline-block;
  width: 100%;
}

.MC260319PROTECTU * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
/* 
.MC260319PROTECTU{
  border-top: solid 1px var(--color-black);
} */

/* .pc-bg{
  display: none;
} */

@media (max-width: 767px) {
  .hidden-mobile{
    display: none;
  }

  .hidden-desktop{
    display: block;
  }
}

@media (min-width: 768px) {
  .hidden-mobile{
    display: block;
  }

  .hidden-desktop{
    display: none;
  }
}

/* PC レイアウト
------------------------------------------ */
@media (min-width: 768px) {
  #MC260319PROTECTU{
    padding-top: min(50px, calc(50 * (100vw / 1440)));
  }

  #main-container{
    display: grid;
    grid-template-columns: 1fr calc(450 * var(--formula_pc)) 1fr;
    /* display: flex;
    justify-content: center;
    align-items: flex-start; */
  }

  #main-container .lp-cont{
    width: calc(450 * var(--formula_pc));

  }

  #main-container .lp-right-area,
  #main-container .lp-left-area{
    position: sticky !important;
    position: -webkit-sticky !important;
    display: flex;
    align-items: end;
    top: calc(10 * var(--formula_pc));
    height: 100vh;
  }

  #main-container .lp-right-area .lp-right-area__inner,
  #main-container .lp-left-area .lp-left-area__inner{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - var(--header-height));
  }

  #main-container .lp-right-area{
    justify-content: flex-end;
  }

  #main-container .lp-right-area .lp-right-area__inner{
    align-items: flex-end;
    transform: translate(calc(-39 * var(--formula_pc)), -4rem);
  }

  #main-container .lp-left-area .lp-left-area__inner{
    align-items: baseline;
    transform: translate(calc(39 * var(--formula_pc)), -4rem);
  }

  #main-container .lp-left-area .pc-collection{
    width: calc(110.3057 * var(--formula_pc));
  }

  #main-container .lp-left-area .pc-ttl{
    width: calc(346.6174 * var(--formula_pc));
    margin-bottom: calc(50 * var(--formula));
  }

  #main-container .lp-left-area .pc-txt{
    width: calc(265.7031 * var(--formula_pc));
    margin-bottom: calc(18 * var(--formula_pc));
  }

  #main-container .lp-right-area .pc-summer{
    width: calc(134.5146 * var(--formula_pc));
  }

  #main-container .lp-right-area .shop_now_img-btn{
    width: calc(104.548 * var(--formula_pc));
    margin-bottom: calc(20 * var(--formula_pc));
  }
}


/* SP
------------------------------------------ */
@media (max-width: 767px) {
  #MC260319PROTECTU{
    padding-top: calc(50 * (100vw / 375));
  }


  #main-container .shop_now_img-btn{
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: end;
    z-index: 10;
    width: 100%;
  }

  /* .main-area__inner .lp-cont{
    position: relative;
  } */

  .shop_now_img-btn__inner{
    position: fixed;
    display: block;
    bottom: 0;
    z-index: 20;
    width: calc(77.0252 * var(--formula));
    pointer-events: all;
    margin: 0 calc(20 * var(--formula)) calc(20 * var(--formula)) auto;
  }
}

/* mv
------------------------------------------ */
.main-area__inner .lp-cont{
  margin: 0 auto;
  overflow: clip;
}

.MC260319PROTECTU .mv{
  position: relative;
  z-index: 0;
  width: 100%;
  background-color: var(--color-lightblue02);
  padding: calc(151 * var(--formula)) 0 calc(125 * var(--formula));
}

.MC260319PROTECTU .mv::before{
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--ticker-height));
  left: 0;
  width: 100%;
  height: calc(710.148 * var(--formula));
  background-image: url(../img/mv-bg01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

/* .MC260319PROTECTU .mv::after{
  content: "";
  position: absolute;
  z-index: -1;
  background-image: url(../img/mv-bg02.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(329.5389 * var(--formula));
  height: calc(486.3258 * var(--formula));
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} */

.MC260319PROTECTU .mv-img{
  width: calc(157.0855 * var(--formula));
  margin: 0 auto calc(12 * var(--formula));
}

.MC260319PROTECTU .mv-ttl{
  width: calc(333.2484 * var(--formula));
  margin: 0 auto calc(40 * var(--formula));
}

.MC260319PROTECTU .mv-txt{
  font-family: var(--font-cezanne);
  font-size: calc(12 * var(--formula));
  text-align: center;
  letter-spacing: -0.04em;
  line-height: 2;
  color: var(--color-blue);
}

/* section.item
------------------------------------------ */
.MC260319PROTECTU .item{
  width: calc(350 * var(--formula));
  margin: 0 auto;
  padding-top: calc(82 * var(--formula))!important;
  overflow-x: hidden;
}

.MC260319PROTECTU .item-img{
  position: relative;
  margin-bottom: calc(14 * var(--formula));
}

.MC260319PROTECTU .content-box01{
  margin-bottom: calc(10 * var(--formula));
}

.MC260319PROTECTU .item-ttl svg{
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.MC260319PROTECTU .modal-txt__wrapper{
  position: relative;
}

/* .MC260319PROTECTU .modal-txt__wrapper{
  width: calc(337.4975 * var(--formula));
} */

/* section.item.--01
------------------------------------------ */
.MC260319PROTECTU .item.--01{
  padding-top: calc(95 * var(--formula))!important;
}

/* horizontal scroll
------------------------------------------ */
.slider-init:not(.slick-initialized) {
  display: flex;
  overflow: hidden;
}

.slider-init:not(.slick-initialized) .slide-image {
  width: 100%;
  flex-shrink: 0;
}

.slider-init:not(.slick-initialized) .slide-image:not(:first-child) {
  display: none; /* 1枚目以外を隠す */
}

/* Slick実行後の画像サイズ固定 */
.slick-slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* slickのドットデザインを調整（既存の.dotクラスに合わせる場合） */
.dots-container{
  position: absolute;
  bottom: calc(11 * var(--formula));
  right: calc(8 * var(--formula));
}

.slick-dots li{
  margin: 0;
}

.dots-container .slick-dots {
  display: flex;
  list-style: none;
  padding: 0;
  justify-content: center;
  margin: 0;
}

.dots-container .slick-dots li button {
  font-size: 0; /* 数字を隠す */
  width: calc(4.9493 * var(--formula));
  height: calc(4.9493 * var(--formula));
  border-radius: 50%;
  background-color: var(--color-blue);
  border: none;
  margin: 0 calc(4.6 * var(--formula)) 0 0;
  cursor: pointer;
  opacity: 0.4;
  /* transition: 0.3s; */
}

.dots-container .slick-dots li.slick-active button {
  background-color: var(--color-blue);
  opacity: 1;
  /* transform: scale(1.2); */
}

/* Dots Indicator Styles */
/* .dots-container {
  position: absolute;
  bottom: calc(11 * var(--formula));
  right: calc(12 * var(--formula));
  display: flex;
  gap: calc(4.6 * var(--formula));
  z-index: 50;
  border-radius: 9999px;
}

.dot {
  width: calc(4.9493 * var(--formula));
  height: calc(4.9493 * var(--formula));
  border-radius: 50%;
  background-color: var(--color-blue);
  opacity: 0.4;
} */

/* Modal
------------------------------------------ */
#modal-overlay {
  position: fixed;
  display: none;
  justify-content: center;
  align-items: center;
  inset: 0;
  background: var(--color-lightblue);
  z-index: 100;
}

#modal-body-content {
  overflow-y: auto;
  flex: 1;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#modal-body-content::-webkit-scrollbar {
  display: none;
}

#modal-card {
  position: relative;
  display: flex;
  max-height: 100%;
  background: var(--color-lightblue);
  width: 100%;
  opacity: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#modal-card::-webkit-scrollbar {
  display: none;
}

.close-button {
  position: absolute;
  top: calc(var(--header-height) + 2px);
  /* top: calc(45 * var(--formula)); */
  right: 0;
  width: calc(30.5106 * var(--formula));
  cursor: pointer;
  z-index: 10;
  pointer-events: all;
  padding: 0;
}

.modal-templates {
  display: none;
}

/* style ___________________________*/
.MC260319PROTECTU .modal-txt__wrapper{
  margin-bottom: calc(32 * var(--formula));
  padding-top: calc(var(--header-height) + 2px);
}

.MC260319PROTECTU .flex-txt{
  display: flex;
}

.MC260319PROTECTU .modal-ttl{
  margin-bottom: calc(8 * var(--formula));
}

.MC260319PROTECTU .nmbr{
  width: calc(11.8145 * var(--formula));
  margin-right: calc(19 * var(--formula));
}

.MC260319PROTECTU .item-name{
  font-family: var(--font-cezanne);
  font-size: calc(15 * var(--formula));
  line-height: 1.4;
  letter-spacing: -0.04em;
  text-align: left;
  transform: translateY(calc(-8 * var(--formula)));
}

.MC260319PROTECTU .modal-price{
  margin-bottom: calc(29 * var(--formula));
}

.MC260319PROTECTU .price{
  width: calc(20.7256 * var(--formula));
  margin-right: calc(11 * var(--formula));
}

.MC260319PROTECTU .item-price{
  font-family: var(--font-cezanne);
  font-size: calc(15 * var(--formula));
  line-height: 1;
  letter-spacing: 0.025em;
  transform: translateY(calc(-3 * var(--formula)));
}

.MC260319PROTECTU .item-price span{
  font-family: var(--font-cezanne);
  font-size: calc(8.6 * var(--formula));
  letter-spacing: 0.25em;
  margin-left: calc(-2 * var(--formula));
}

.MC260319PROTECTU .modal-txt{
  font-family: var(--font-cezanne);
  font-size: calc(12 * var(--formula));
  line-height: 1.5833333333;
  letter-spacing: 0.028em;
  text-align: left;
  width: calc(250 * var(--formula));
  margin-bottom: calc(34 * var(--formula));
}

.MC260319PROTECTU .shop_now-btn{
  width: calc(104.6705 * var(--formula));
  margin: 0 0 calc(19 * var(--formula)) auto;
}

.MC260319PROTECTU .modal-img__wrapper{
  display: flex;
  flex-direction: column;
  row-gap: calc(10 * var(--formula));
}

.MC260319PROTECTU .modal-txt__wrapper{
  max-width: calc(336.9992 * var(--formula_pc));
  margin-right: auto;
  margin-left: auto;
}

.MC260319PROTECTU .cai-btn-btn_img{
  width: calc(174.0336 * var(--formula));
  margin: calc(95 * var(--formula)) auto calc(20 * var(--formula));
}

.MC260319PROTECTU .credit_img{
  width: calc(230.9907 * var(--formula));
  margin: 0 auto;
  padding-bottom: calc(111 * var(--formula));
}


/*  modal01 ___________________________*/
.MC260319PROTECTU .modal-txt__wrapper.--01 .modal-txt{
  margin-bottom: calc(34 * var(--formula));
}

.MC260319PROTECTU .modal-txt__wrapper.--01 .modal-txt{
  font-size: calc(11 * var(--formula));
  line-height: 1.4545454545;
  letter-spacing: 0.028em;
  width: calc(250 * var(--formula));
}

/*  modal02 ___________________________*/
.MC260319PROTECTU .modal-txt__wrapper.--02 .item-name span{
  display: inline-block;
  letter-spacing: 0.014em;
  transform: translateX(calc(-8 * var(--formula)));
}

.MC260319PROTECTU .modal-txt__wrapper.--02 .item-name{
  letter-spacing: -0.065em;
}

.MC260319PROTECTU .modal-txt__wrapper.--02 .modal-txt {
  letter-spacing: 0.001em;
  margin-bottom: calc(51 * var(--formula));
}

/*  modal03 ___________________________*/
.MC260319PROTECTU .modal-txt__wrapper.--03 .modal-price {
  margin-bottom: calc(27 * var(--formula));
}

.MC260319PROTECTU .modal-txt__wrapper.--03 .modal-txt {
  letter-spacing: -0.01em;
  margin-bottom: calc(33 * var(--formula));
}

/*  modal04 ___________________________*/
.MC260319PROTECTU .modal-txt__wrapper.--04 .item-name{
  letter-spacing: -0.1em;
}

.MC260319PROTECTU .modal-txt__wrapper.--04 .modal-txt {
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-bottom: calc(33 * var(--formula));
}

/*  PC ___________________________*/

/*  PC ___________________________*/
@media (min-width: 768px) {
  #modal-overlay,
  #modal-card{
    max-width: calc(450 * var(--formula_pc));
    margin: 0 auto;
  }

  .MC260319PROTECTU .modal-txt__wrapper{
    max-width: calc(399.9057 * var(--formula_pc));
  }
}

/*******************************
.animation
*******************************/

/*  fadeIn ___________________________*/
.js-show.fadeIn {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}

.js-show.fadeIn.js-scrollIn {
  opacity: 1;
}

/*  show-btn ___________________________*/
.js-show-btn {
  opacity: 1;
  transition: opacity .3s ease;
}

.js-show-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/*  anim-delay ___________________________*/
.js-show.fadeIn.anim-delay01{
  transition-delay: 0.3s;
}

.js-show.fadeIn.anim-delay02{
  transition-delay: 0.6s;
}