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

/* function
------------------------------------------ */
/* 変数
------------------------------------------ */
:root {
  --color-sub: #faf3dc;
}

/* 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{
background-color: #edede6;
}

#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"]{
  background: none;
}

.main-area{
  padding-top: 0;
}

.main-area.lp {
  margin-bottom: 0;
}

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

#MC260528whiterum {
  /* 可変設定
  ------------------------------------------ */
  /*デザインの値*/
  --pc-width: 1400; /*PCデザイン幅*/
  --sp-width: 750; /*SPデザイン幅*/
  --pc-artboard-width: 480; /*SP共通デザイン幅*/
  --sp-artboard-width: 750; /*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-orange: #fea903;
  --color-green: #006656;
  --color-beige-bg: #fbf7e5;

  --font-dnp: dnp-shuei-gothic-kin-std, sans-serif;
  --font-neue-haas: neue-haas-grotesk-display, sans-serif;
  --font-garamond: garamond-premier-pro-display, serif;
  /* --font-yu: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --fw-semibold: 700;
  font-style: normal;
  color: var(--color-black);
  background-color: var(--color-beige-bg);
}

/* font-family: garamond-premier-pro-display, serif;
font-weight: 400;
font-style: normal;

font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 500;
font-style: normal;

font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 700;
font-style: normal;*/

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

@media (min-width: 768px) and (max-width: 1400px) {
  #MC260528whiterum {
    --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) {
  #MC260528whiterum {
    --ratio: 1; /* 比率は1（変わらない） */
    --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}

/* @media (min-width: 768px) {
  .MC260528whiterum {
    padding-top: min(50px, calc(50 * (100vw / 1440)));
  }
} */

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


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

.MC260528whiterum a{
  display: inline-block;
}

.MC260528whiterum * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
/* 
.MC260528whiterum{
  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) {
  .MC260528whiterum{
    display: flex;
    width: 100%;
    background-color: var(--color-beige-bg);
  }

  .MC260528whiterum .intro_inner,
  .MC260528whiterum .lp__inner,
  .MC260528whiterum .lastsec_inner{
    width: calc(480 * var(--formula_pc));
    margin: 0 auto;
    overflow-x: clip;
  }

  .MC260528whiterum .intro,
  .MC260528whiterum .lastsec{
    width: 50vw;
    background-color: var(--color-green);
  }

  .MC260528whiterum .contents__left{
    position: sticky;
    top: 0;
    width: 50%;
    height: 100vh;
    z-index: 1;
    overflow: hidden;
  }

  .MC260528whiterum .mv{
    /* position: relative; */
    overflow: hidden;
    height: 100vh;
    padding-top: min(50px, calc(50 * (100vw / 1440)));
    /* transform: translateY(calc(50 * (100vw / 1440))); */
  }

  .MC260528whiterum .mv_img img{
    height: 100%;
    object-fit: cover;
  }

  .MC260528whiterum .mv .mv_inner{
    width: 100%;
    height: 100%;
  }

  .MC260528whiterum .mv_img,
  .MC260528whiterum .mv a{
    width: 100%;
    height: 100%;
  }

  .MC260528whiterum .mv_ttl{
    width: calc(420.24 * var(--formula_pc));
    /* top: calc(100 * var(--formula_pc)); */
    top: calc(100 * var(--formula_pc));
  }

  .MC260528whiterum .mv_txt{
    width: calc(339.8975 * var(--formula_pc));
    bottom: calc(30 * var(--formula_pc));
  }

  .MC260528whiterum .intro{
   background-color: var(--color-green);
   padding: calc(calc(120 * var(--formula)) + calc(50 * (100vw / 1440))) 0 calc(138 * var(--formula));
  }

  .MC260528whiterum .sec__accordion-cont:not(.is-open) + [class*="__accordion-btn"] .btn-open-01::after{
    width: calc(480 * var(--formula_pc));
  }
}

.main-area__inner .lp-cont{
  margin: 0 auto;
  overflow: clip;
  background-color: var(--color-beige-bg);
}


/* SP｜mv
------------------------------------------ */
.MC260528whiterum .mv .mv_inner{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.MC260528whiterum .mv_ttl,
.MC260528whiterum .mv_txt{
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

@media (max-width: 767px) {
  .MC260528whiterum .mv{
    position: relative;
    overflow-y: clip;
    z-index: 1;
  }

  .MC260528whiterum .mv::after{
    content: "";
    position: absolute;
    background-image: url(../img/SVG/mv-frame.svg);
    width: calc(720.0014 * var(--formula));
    height: calc(1215 * var(--formula));
    top: calc(-30 * var(--formula));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
  }

  .MC260528whiterum .mv_ttl{
    position: absolute;
    width: calc(667.2 * var(--formula));
    top: calc(190 * var(--formula));
    z-index: 1;
  }

  .MC260528whiterum .mv_txt{
    width: calc(489.6895 * var(--formula));
    bottom: calc(55 * var(--formula));
  }
}


/* intro
------------------------------------------ */
.MC260528whiterum .intro{
  background-color: var(--color-green);
}

@media screen and (max-width: 767px) {
  .MC260528whiterum .intro{
    padding: calc(120 * var(--formula)) 0 calc(138 * var(--formula));
  }
}

.MC260528whiterum .intro .intro_inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.MC260528whiterum .intro .intro_ttl{
  position: absolute;
  top: 0;
  z-index: 2;
  width: calc(589.8667 * var(--formula));
  pointer-events: none;
}

.MC260528whiterum .intro .intro_img{
  position: relative;
  width: calc(570 * var(--formula));
  margin-top: calc(100 * var(--formula));
}

.MC260528whiterum .intro .intro_img::before,
.MC260528whiterum .intro .intro_img::after{
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  top: 50%;
  transform: translateY(-50%);
}

.MC260528whiterum .intro .intro_img::before{
  background-image: url(../img/SVG/am_mucha.svg);
  width: calc(13.41 * var(--formula));
  height: calc(156.17 * var(--formula));
  right: calc(-60 * var(--formula));
}

.MC260528whiterum .intro .intro_img::after{
  background-image: url(../img/SVG/whtie_rum.svg);
  width: calc(13.07 * var(--formula));
  height: calc(153 * var(--formula));
  left: calc(-60 * var(--formula));
}

.MC260528whiterum .intro .intro_subttl{
  width: calc(393.69 * var(--formula));
  margin: calc(64 * var(--formula)) auto calc(45 * var(--formula));
}

.MC260528whiterum .intro .intro_txt{
  font-family: var(--font-dnp);
  font-weight: var(--fw-medium);
  font-size: calc(26 * var(--formula));
  letter-spacing: -0.05em;
  color: var(--color-orange);
  text-align: center;
  line-height: 2;
}

/* lp__inner 共通
------------------------------------------ */
.MC260528whiterum .crdt{
  margin-top: calc(28 * var(--formula));
}

.MC260528whiterum .crdt a,
.MC260528whiterum .crdt span{
  display: inline-block;
  font-family: var(--font-neue-haas);
  font-weight: var(--fw-medium);
  font-size: calc(24 * var(--formula));
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--color-green);
}

.MC260528whiterum .sec{
  padding-bottom: calc(207 * var(--formula));
}

.MC260528whiterum .sec .ttl__wrapper{
  position: relative;
}

.MC260528whiterum .sec .ttl__wrapper::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-image: url(../img/SVG/frame-top.svg);
  width: calc(710 * var(--formula));
  height: calc(183.4368 * var(--formula));
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

.MC260528whiterum .sec_txt{
  font-family: var(--font-dnp);
  font-weight: var(--fw-medium);
  font-size: calc(24 * var(--formula));
  line-height: 2;
  letter-spacing: -0.08em;
  color: var(--color-green);
  text-align: left;
}

.MC260528whiterum .sec .sec_subttle,
.MC260528whiterum .sec .sec_txt{
  color: var(--color-green);
  width: calc(630 * var(--formula));
  margin: 0 auto;
}

.MC260528whiterum .sec .sec_subttle{
  font-family: var(--font-dnp);
  font-weight: var(--fw-bold);
  font-size: calc(30 * var(--formula));
  /* letter-spacing: 0.1em; */
  text-align: center;
  line-height: 2;
}

/* description
------------------------------------------ */
.MC260528whiterum .description{
  position: relative;
  z-index: 1;
  padding: calc(125 * var(--formula)) 0 calc(150 * var(--formula));
}

.MC260528whiterum .description::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../img/bg_img01.png);
  width: 100%;
  height: calc(550 * var(--formula));
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}

.MC260528whiterum .description_ttl{
  width: calc(364.2 * var(--formula));
  margin: 0 auto calc(40 * var(--formula));
}

.MC260528whiterum .chart_img{
  width: calc(660 * var(--formula));
  margin: 0 auto calc(55 * var(--formula));
}

.MC260528whiterum .accordion-txt_area .sec_txt{
  width: calc(630 * var(--formula));
  margin: 0 auto;
}

.MC260528whiterum .accordion-txt_area .sec_txt.--01{
  padding-bottom: calc(25 * var(--formula));
}

.MC260528whiterum .sec__accordion-btn{
  margin: 0 auto;
  padding: calc(0 * var(--formula)) 0 0;
}

#main-container .btn-close-01 {
  width: calc(90 * var(--formula));
}

#main-container .btn-open-01 {
  width: calc(155.38 * var(--formula));
  margin-top: calc(30 * var(--formula));
}

.MC260528whiterum  [class*="__accordion-cont"] {
  display: flex; /* flexを維持 */
  flex-direction: column;
  align-items: center;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.8s ease,
    opacity 1s ease,
    padding 0.8s ease;
}

.MC260528whiterum [class*="__accordion-cont"].is-open {
  opacity: 1;
}

.MC260528whiterum .accordion-inner {
  min-height: 0;
}

.MC260528whiterum [class*="__accordion-btn"] {
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
}

.MC260528whiterum .btn-close-01,
.MC260528whiterum .btn-open-01 {
  grid-area: 1 / 1;
  transition:
    opacity 0.3s ease,
    visibility 0.3s;
}

.MC260528whiterum .btn-close-01 {
  position: relative;
  opacity: 0;
  visibility: hidden;
}
.MC260528whiterum .is-open + [class*="__accordion-btn"] .btn-close-01 {
  opacity: 1;
  visibility: visible;
  padding-top: calc(48 * var(--formula));
}

.MC260528whiterum .is-open + [class*="__accordion-btn"] .btn-open-01 {
  opacity: 0;
  visibility: hidden;
  z-index: 0;
}

.MC260528whiterum + [class*="__accordion-btn"] .btn-close-01::after{
  content: "";
  position: absolute;
  left: 0;
  top: calc(-40 * var(--formula));
  width: 100%;
  height: calc(72 * var(--formula));
  background: linear-gradient(90deg, #fbf7e5 0%, #ffffff 100%);
  z-index: 1;
}

.MC260528whiterum .sec__accordion-cont:not(.is-open) + [class*="__accordion-btn"] .btn-open-01{
  position: relative;
  z-index: 2;
}

.MC260528whiterum .sec__accordion-cont:not(.is-open) + [class*="__accordion-btn"] .btn-open-01::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(-110 * var(--formula));
  width: calc(750 * var(--formula));
  height: calc(72 * var(--formula));
  background: linear-gradient(
    180deg,
    rgba(251, 247, 229, 0) 0%,
    #fbf7e5 100%
  );
  z-index: 1;
}





/* sec
------------------------------------------ */
/* ----------------- 01 ---------------- */
.MC260528whiterum .sec.--01 .sec_ttl{
  width: calc(452.28 * var(--formula));
  padding-top: calc(160 * var(--formula));
  margin: 0 auto calc(50 * var(--formula));
}

.MC260528whiterum .sec.--01 .sec_subttle{
  text-align: left;
  padding-bottom: calc(12 * var(--formula));
}

.MC260528whiterum .sec.--01 .sec_txt{
  padding-bottom: calc(165 * var(--formula));
}

.MC260528whiterum .sec.--01 .item_block{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: calc(690 * var(--formula));
}

.MC260528whiterum .sec.--01 .item_block.--01{
  margin: 0 auto 0 0;
  padding-bottom: calc(170 * var(--formula));
}

.MC260528whiterum .sec.--01 .item_block.--01 .item_ttl{
  position: absolute;
  top: calc(-44 * var(--formula));
  right: calc(-25.6 * var(--formula));
  width: calc(307.78 * var(--formula));
  height: calc(177.77 * var(--formula));
  z-index: 2;
  pointer-events: none;
}

.MC260528whiterum .sec.--01 .item_block.--01 .crdt{
  text-align: right;
}

.MC260528whiterum .sec.--01 .item_block.--02{
  align-items: flex-start;
  margin: 0 0 0 auto;
}

.MC260528whiterum .sec.--01 .item_block.--02 .item_ttl{
  position: absolute;
  top: calc(-45.4 * var(--formula));
  left: calc(-28 * var(--formula));
  width: calc(389.51 * var(--formula));
  height: calc(177.77 * var(--formula));
  z-index: 2;
  pointer-events: none;
}

.MC260528whiterum .sec.--01 .item_block.--02 .crdt{
  text-align: left;
}

/* ----------------- 02 ---------------- */
.MC260528whiterum .sec.--02{
  padding-bottom: calc(185 * var(--formula));
}

.MC260528whiterum .sec.--02 .sec_ttl{
  width: calc(452.28 * var(--formula));
  padding-top: calc(135 * var(--formula));
  margin: 0 auto calc(25 * var(--formula));
}

.MC260528whiterum .sec.--02 .sec_subttle{
  padding-bottom: calc(85 * var(--formula));
}

.MC260528whiterum .sec.--02 .item_block.--01{
  width: 100%;
  padding-bottom: calc(105 * var(--formula));
}

.MC260528whiterum .sec.--02 .item_block.--01 .crdt{
  text-align: left;
  margin-left: calc(30 * var(--formula));
}

.MC260528whiterum .sec.--02 .item_block.--02{
  display: flex;
  flex-direction: column;
  width: calc(630 * var(--formula));
  margin: 0 auto;
}

.MC260528whiterum .sec.--02 .item_block.--02:nth-of-type(3){
  margin-bottom: calc(110 * var(--formula));
}

/* ----------------- 03 ---------------- */
.MC260528whiterum .sec.--03{
  position: relative;
  z-index: 1;
  padding-bottom: calc(140 * var(--formula));
}

.MC260528whiterum .sec.--03::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../img/bg_img02.png);
  width: 100%;
  height: calc(680 * var(--formula));
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}

.MC260528whiterum .sec.--03::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(../img/bg_img03.png);
  width: 100%;
  height: calc(500 * var(--formula));
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}

.MC260528whiterum .sec.--03 .sec_subttle{
  text-align: center;
  font-size: calc(36 * var(--formula));
  padding-top: calc(148 * var(--formula));
  padding-bottom: calc(30 * var(--formula));
}

.MC260528whiterum .sec.--03 .sec_txt_en{
  font-family: var(--font-neue-haas);
  letter-spacing: 0.05em;
  line-height: 1.5;
  width: calc(660 * var(--formula));
  margin: 0 auto;
}

.MC260528whiterum .sec.--03 .sec_txt_en.--01{
  color: var(--color-green);
  font-weight: var(--fw-bold);
  font-size: calc(30 * var(--formula));
  word-spacing: calc(2.5 * var(--formula));
  padding-bottom: calc(20 * var(--formula));
}

.MC260528whiterum .sec.--03 .sec_txt_en.--02{
  font-weight: var(--fw-medium);
  font-size: calc(24 * var(--formula));
  color: var(--color-green);
  letter-spacing: 0.047em;
  text-align: justify;
  padding-bottom: calc(70 * var(--formula));
}

.MC260528whiterum .sec.--03 .item_block.--01{
  width: calc(660 * var(--formula));
  margin: 0 auto;
}


/* ----------------- lastsec ---------------- */
.MC260528whiterum .lastsec_inner{
  position: relative;
  z-index: 1;
  background-color: var(--color-green);
  padding: calc(80 * var(--formula)) 0 calc(40 * var(--formula));
}

.MC260528whiterum .lastsec_inner::after,
.MC260528whiterum .lastsec_inner::before{
  content: "";
  position: absolute;
  z-index: 2;
  height: 100%;
  width: 2px;
  background-color: var(--color-beige-bg);
  top: 0;
}

.MC260528whiterum .lastsec_inner::after{
  right: calc(20 * var(--formula));
}

.MC260528whiterum .lastsec_inner::before{
  left: calc(20 * var(--formula));
}

.MC260528whiterum .lastsec_inner .cai_btn a{
  width: 100%;
  height: auto;
}

.MC260528whiterum .lastsec_inner .cai_btn{
  width: calc(503.8533 * var(--formula));
  /* height: calc(100 * var(--formula)); */
  padding-bottom: calc(24 * var(--formula));
  margin: 0 auto calc(80 * var(--formula));
}

.MC260528whiterum .lastsec_inner .copy_writing{
  width: calc(506.86 * var(--formula));
  margin: 0 auto;
}


/*******************************
.animation
*******************************/
.js-show.fadeIn.delay_1{
  transition-delay: 0.2s;
}

.js-show.anim_delay_1{
  transition-delay: 0.2s;
  animation-delay: 0.2s;
}

.js-show.fadeIn.delay_2{
  transition-delay: 0.5s;
}

/*  fadeIn ___________________________*/
.js-show.fadeIn {
  opacity: 0;
  -webkit-transition: opacity 2.0s ease-out 0s;
  transition: opacity 2.0s ease-out 0s;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}

.js-show.fadeIn.js-scrollIn {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/*  zoomOut img ___________________________*/
.js-show.zoomOut{
  overflow: hidden
}

.js-show.zoomOut img {
  opacity: 0;
  transition: 3s;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: scale(1.2);
}

.js-show.zoomOut.js-scrollIn img {
  opacity: 1;
  transform: none;
}

/* .lineAnimation ___________________________*/

.js-show.lineAnimation{
  position: relative;
}

.js-show.lineAnimation::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(503.2258 * var(--formula));
  height: 1px;
  background: var(--color-orange);
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform 1s;
  opacity: 0.85;
}

.js-show.lineAnimation.js-scrollIn::after{
  transform: scale(1, 1);
}