@charset "utf-8";

/* =======================================
    01.Base（reset / base / typography）
======================================= */
/* ------ Reset -------*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}
html,body {
  -webkit-text-size-adjust: 100%;
}


/* ------ root（PC：最大570px、SP：375px基準） -------*/
:root {

  /* color */
  --mdc-color-primary: #f8f7f0;
  --mdc-color-accent: rgba(255, 200, 30, 0.3);
  --mdc-color-button: #807566;
  --mdc-color-button-hover: #595248;
  --mdc-color-font: #323232;

  /* font family */
  --mdc-font-gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --mdc-font-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "HGS明朝E", "MS PMincho", serif;

  /* size（750pxデザイン値 / 最大570px） */
  --mdc-size-10:  min(1.333vw, 7.6px);      /* 750px時は 10px */
  --mdc-size-15:  min(2vw, 11.4px);         /* 750px時は 15px */
  --mdc-size-20:  min(2.667vw, 15.2px);     /* 750px時は 20px */
  --mdc-size-25:  min(3.333vw, 19px);       /* 750px時は 25px */
  --mdc-size-30:  min(4vw, 22.8px);         /* 750px時は 30px */
  --mdc-size-40:  min(5.333vw, 30.4px);     /* 750px時は 40px */
  --mdc-size-50:  min(6.667vw, 38px);       /* 750px時は 50px */
  --mdc-size-60:  min(8vw, 45.6px);         /* 750px時は 60px */
  --mdc-size-70:  min(9.333vw, 53.2px);     /* 750px時は 70px */
  --mdc-size-80:  min(10.667vw, 60.8px);    /* 750px時は 80px */
  --mdc-size-90:  min(12vw, 68.4px);        /* 750px時は 90px */
  --mdc-size-100: min(13.333vw, 76px);      /* 750px時は 100px */
  --mdc-size-110: min(14.667vw, 83.6px);    /* 750px時は 110px */
  --mdc-size-120: min(16vw, 91.2px);        /* 750px時は 120px */
  --mdc-size-130: min(17.333vw, 98.8px);    /* 750px時は 130px */
  --mdc-size-140: min(18.667vw, 106.4px);   /* 750px時は 140px */

  /* font（750pxデザイン値 / 最大570px） */
  --mdc-font-size-3xl:  min(5.6vw, 31.92px);  /* 750px時は 42px */
  --mdc-font-size-2xl:  min(5.333vw, 30.40px);/* 750px時は 40px */
  --mdc-font-size-xl:   min(4.933vw, 28.12px);/* 750px時は 37px */
  --mdc-font-size-lg:   min(3.6vw, 20.52px);  /* 750px時は 27px */
  --mdc-font-size-md:   min(3.2vw, 18.24px);  /* 750px時は 24px */
  --mdc-font-size-base: min(2.8vw, 15.96px);  /* 750px時は 21px */
  --mdc-font-size-xs:   min(2vw, 11.40px);    /* 750px時は 15px */
}

@media screen and (max-width: 767px) {
  :root {

    /* size（375px基準） */
    --mdc-size-10:  1.333vw;
    --mdc-size-15:  2vw;
    --mdc-size-20:  2.667vw;
    --mdc-size-25:  3.333vw;
    --mdc-size-30:  4vw;
    --mdc-size-40:  5.333vw;
    --mdc-size-50:  6.667vw;
    --mdc-size-60:  8vw;
    --mdc-size-70:  9.333vw;
    --mdc-size-80:  10.667vw;
    --mdc-size-90:  12vw;
    --mdc-size-100: 13.333vw;
    --mdc-size-110: 14.667vw;
    --mdc-size-120: 16vw;
    --mdc-size-130: 17.333vw;
    --mdc-size-140: 18.667vw;

    /* font（375px基準） */
    --mdc-font-size-3xl:  5.6vw;
    --mdc-font-size-2xl:  5.333vw;
    --mdc-font-size-xl:   4.933vw;
    --mdc-font-size-lg:   3.6vw;
    --mdc-font-size-md:   3.2vw;
    --mdc-font-size-base: 2.8vw;
    --mdc-font-size-xs:   2vw;
  }
}


/* ------ Responsive -------*/
#pageMaisondecalmOilmist .pc {
  display: block;
}
#pageMaisondecalmOilmist .sp {
  display: none;
}
@media screen and (max-width: 767px) {
  #pageMaisondecalmOilmist .pc {
    display: none;
  }
  #pageMaisondecalmOilmist .sp {
    display: block;
  }
}


/* ------ text -------*/
#pageMaisondecalmOilmist {
  color: var(--mdc-color-font);
  font-family: var(--mdc-font-gothic);
  font-size: var(--mdc-font-size-base);
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#pageMaisondecalmOilmist h2{
  background-color: transparent;
}
#pageMaisondecalmOilmist p{
  margin-bottom: 1em;
}
#pageMaisondecalmOilmist p:last-child{
  margin-bottom: 0;
}


/* =======================================
  02. Utilities（margin / padding etc）
======================================= */
/* ------ padding -------*/
.mdc_sec_pad{
  padding: var(--mdc-size-60) 0;
}
.mdc_box_mb{
  margin-bottom: var(--mdc-size-60) !important;
}


/* =======================================
    03. Components（button / card / badge）
======================================= */
/* ------ text -------*/
.mdc_ttl_main{
  font-size: var(--mdc-font-size-2xl);
  font-family: var(--mdc-font-mincho);
  font-weight: 500;
  padding-top: var(--mdc-size-30);
  margin-bottom: 1.5em;
  letter-spacing: 0.1em;
  text-align: center;
}
.mdc_ttl_main span:nth-child(1){
  background-image: url(/img/usr/brand/maisondecalm-oilmist/line_ttl_main.png);
  background-size: 100% auto;
  background-position: bottom center;
  background-repeat: no-repeat;
  display: block;
  padding-bottom: var(--mdc-size-10);
}
.mdc_ttl_main span.ja{
  font-size: var(--mdc-font-size-md);
  display: block;
  margin-top: var(--mdc-size-10)
}
.mdc_ttl_item{
  font-size: var(--mdc-font-size-md);
  font-weight: 500;
  margin-bottom: 1em;
  text-align: center;
}

.mdc_txt_marker {
  display: inline;
  background: linear-gradient(
    transparent 60%,
    var(--mdc-color-accent) 60%
  );
  padding: 0 0.25em 0;
}
.mdc_txt_orange{
  color: #ed8525;
}
.mdc_txt_small{
  font-size: 90%;
}
.mdc_txt_large{
  font-size: 150%;
}


/* ------ icon -------*/
/* .mdc_icon_plus */
.mdc_icon_plus{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23323232%3B %7D %3C/style%3E%3C/defs%3E%3Cg id='text'%3E%3Cg id='icon_plus'%3E%3Crect class='cls-1' y='14' width='30' height='2'/%3E%3Crect class='cls-1' x='14' width='2' height='30'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 100%;
  display: block;
  width: var(--mdc-size-30);
  height: var(--mdc-size-30);
}


/* ------ btn -------*/
/* a */
#pageMaisondecalmOilmist a{
  color: var(--mdc-color-font);
  text-decoration: none;
}
@media (hover:hover){
  #pageMaisondecalmOilmist a:hover{
    text-decoration: underline;
  }
}

/* btn */
#pageMaisondecalmOilmist .mdc_btn{
  display: block;
  margin: 0 auto;
  text-decoration: none;
}
@media (hover:hover){
  #pageMaisondecalmOilmist .mdc_btn:hover{
    text-decoration: none;
  }
}

/* .mdc_btn_purchase */
#pageMaisondecalmOilmist .mdc_btn_purchase{
  background-color: var(--mdc-color-button);
  border-bottom: min(0.877vw, 3.8px) solid var( --mdc-color-button-hover); /* 750px時は 5px */
  border-left: min(0.877vw, 3.8px) solid var( --mdc-color-button-hover); /* 750px時は 5px */

  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mdc-font-mincho);
  font-size: min(4.561vw, 19.76px); /* 750px時は 26px */
  height: min(14.035vw, 60.8px); /* 750px時は 80px */
  letter-spacing: 0.08em;
  position: relative;
  width: min(52.632vw, 228px); /* 750px時は 300px */

  transition: background-color .3s;
}
#pageMaisondecalmOilmist .mdc_btn_purchase::after{
  content: '';
  aspect-ratio: 12 / 17 ;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.84' height='16.95' viewBox='0 0 11.84 16.95'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff%3B %7D %3C/style%3E%3C/defs%3E%3Cg id='text'%3E%3Cpath id='icon_arrow' class='cls-1' d='M1.22,16.95l-1.22-1.63,9.12-6.84L0,1.63,1.22,0l10.21,7.66c.26.19.41.5.41.82s-.15.62-.41.82L1.22,16.95Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% auto;
  display: block;
  margin-left: var(--mdc-size-10);
  width: min(2.105vw, 9.12px); /* 750px時は 12px */
}
@media (hover:hover){
  #pageMaisondecalmOilmist .mdc_btn_purchase:hover{
    background-color: var( --mdc-color-button-hover);
  }
}
@media screen and (max-width: 767px){
  #pageMaisondecalmOilmist .mdc_btn_purchase{
    border-bottom: 0.667vw solid var( --mdc-color-button-hover); /* 375px基準 */
    border-left: 0.667vw solid var( --mdc-color-button-hover); /* 375px基準 */
    font-size: 3.467vw; /* 375px基準 */
    height: 10.667vw; /* 375px基準 */
    width: 40vw; /* 375px基準 */
  }
}

/* .mdc_btn_atcosme */
#pageMaisondecalmOilmist .mdc_btn_atcosme{
  width: min(80vw, 456px); /* 750px時は 600px */
  transition: opacity .3s;
}
@media (hover:hover){
  #pageMaisondecalmOilmist .mdc_btn_atcosme:hover{
    opacity: 0.7;
  }
}
@media screen and (max-width: 767px) {
  #pageMaisondecalmOilmist .mdc_btn_atcosme{
    width: 80vw; /* 375px基準 */
  }
}


/* ------ background -------*/
/* .mdc_white_box */
.mdc_white_box{
  background-color: #fff;
  border-radius: var(--mdc-size-20);
  margin: 0 auto;
  overflow: hidden;
}


/* ------ list -------*/
/* .mdc_list_box */
.mdc_list_box{
  position: relative;
  margin: 0;
}
.mdc_list_box li{
  padding-left: 1em;
  position: relative;
}
.mdc_list_box li::before{
  content: '・';
  position: absolute;
  left: 0;
}


/* ------ img -------*/
.mdc_img_box{
  position: relative;
}


/* ------ .deco -------*/
.mdc_deco{
  position: absolute;
}


/* ------ accordion -------*/
/* .mdc_accordion_head */
.mdc_accordion_head{
  position: relative;
  width: 100%;
}

/* .mdc_accordion_trigger */
.mdc_accordion_trigger{
  background: none;
  border: none;
  color: var(--mdc-color-font);
  cursor: pointer;
  font-size: var(--mdc-font-size-base);
  outline: none;
  position: relative;
  width: 100%;
  z-index: 10;
}
.mdc_accordion_mark{
  position: absolute;
  right: var(--mdc-size-30);
  top: 0;
  width: var(--mdc-size-30);
  height: var(--mdc-size-30);
  display: grid;
  place-items: center;
}
.mdc_accordion_mark::before{
  content: "";
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg id='text'%3E%3Cg id='icon_open'%3E%3Crect y='12.25' width='26' height='1.5'/%3E%3Crect x='12.25' width='1.5' height='26'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  display: inline-block;
  width: var(--mdc-size-30);
}
.mdc_accordion_trigger[aria-expanded="true"] .mdc_accordion_mark::before{
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: none%3B %7D %3C/style%3E%3C/defs%3E%3Cg id='text'%3E%3Cg id='icon_close'%3E%3Crect y='12.2' width='26' height='1.5'/%3E%3Crect class='st0' x='12.2' width='1.5' height='26'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* .mdc_accordion_panel */
.mdc_accordion_panel{
  overflow: hidden;
  height: 0;
  transition: height 0.3s ease;
}

/* ------ mdc_side -------*/
.mdc_side .logo_maisondecalm{
  margin: 0 auto var(--mdc-size-60)
}
.mdc_side .mdc_nav_box{
  text-align: center;
}
.mdc_side .mdc_nav_box li{
  font-family: var(--mdc-font-mincho);
  margin-bottom: var(--mdc-size-15)
}
#pageMaisondecalmOilmist .mdc_side .mdc_nav_box a{
  transition: color .3s;
}
#pageMaisondecalmOilmist .mdc_side .mdc_nav_box a.is-current{
  color: #d19e43;
}
@media (hover:hover){
  #pageMaisondecalmOilmist .mdc_side .mdc_nav_box a:hover                            {
    color: #d19e43;
    text-decoration: none;
  }
}


/* ------ mdc_purchase_box -------*/
.mdc_purchase_box{
  margin: 0 auto;
  width: min(40vw, 228px); /* 750px時は 300px */
}
.mdc_purchase_box .mdc_txt_product{
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .mdc_purchase_box{
    width: 40vw; /* 375px基準 */
  }
}


/* =======================================
    04. Layout（header / footer / grid）
======================================= */
/* ------ page -------*/
#pageMaisondecalmOilmist{
  overflow: hidden;
  position: relative;
}


/* ------ background -------*/
.mdc_bg{
  background-image: url("/img/usr/brand/maisondecalm-oilmist/bg_maisondecalm-oilmist.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  inset: 0;
  position: fixed;
  /* z-index: -1; */
}
.mdc_drop{
  position: absolute;
  pointer-events: none;
}
.drop_bg_01{
  top: 360px;
  left: calc(50% - 480px);
}
.drop_bg_02{
  top: 280px;
  left: calc(50% - 400px);
}
.drop_bg_03{
  top: 550px;
  left: calc(50% - 470px);
}
.drop_bg_04{
  top: 660px;
  left: calc(50% - 1150px);
}
.drop_bg_05{
  top: 100px;
  left: calc(50% + 480px);
}
.drop_bg_06{
  top: 420px;
  left: calc(50% + 350px);
}
.drop_bg_07{
  top: 530px;
  left: calc(50% + 391px);
}
.drop_bg_08{
  top: 630px;
  left: calc(50% + 590px);
}
.drop_bg_09{
  top: 460px;
  left: calc(50% + 690px);
}

@media screen and (max-width: 767px) {
  .mdc_drop{
    display: none;
  }
}


/* ------ layout -------*/
.mdc_body{
  position: relative;
}

/* .mdc_side */
.mdc_side{
  position: absolute;
  left: calc(50% - 740px);
  top: 180px;
  width: 335px;
  z-index: 3;
  opacity: 1;
  transition: opacity .3s ease;
}
.drop_bg_01,.drop_bg_02{
  transition: opacity .3s ease;
}
@media (max-width: 1540px){
  .mdc_side{
    left: calc(50% - 660px);
    width: 280px;
  }
  .drop_bg_01{
    opacity: 0 !important
  }
}
@media (max-width: 1340px){
  .mdc_side{
    left: calc(50% - 560px);
    width: 240px;
  }
  .drop_bg_02{
    opacity: 0 !important
  }
}
@media (max-width: 1080px){
  .mdc_side{
    opacity: 0 !important;
    pointer-events: none;
  }
}


/* .mdc_contents */
.mdc_contents{
  background-color: var(--mdc-color-primary);
  box-shadow: 0 0 20px 10px rgba(128,117,102, 0.1);
  margin: 0 auto;
  max-width: 570px;
  position: relative;
  overflow: hidden;
  width: 100%;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .mdc_contents{
    max-width: 100%;
  }
}


/* ------ section -------*/
#pageMaisondecalmOilmist section {
  position: relative;
  width: 100%;
}


/* ------ container -------*/
.mdc_container {
  margin: 0 auto;
  position: relative;
  padding: 0;
  width: 86.6%;
}


/* =======================================
    05. Animation
======================================= */
/* ------ show -------*/
.mdc_body .mdc_bg,
.mdc_body .mdc_side{
  opacity: 0;
  transition: opacity .8s;
}
.mdc_body.is-show .mdc_bg,
.mdc_body.is-show .mdc_side{
  opacity: 1;
}
.mdc_body .mdc_drop{
  opacity: 0;
  transition: opacity 1.2s;
}


/* ------ fixed -------*/
.mdc_body.is-fixed .mdc_side{
  position: fixed;
}
.mdc_body.is-fixed .mdc_drop{
  opacity: 1;
}


/* ------ content end -------*/
.mdc_body.is-content-end .mdc_side,
.mdc_body.is-content-end .mdc_drop{
  opacity: 0;
}


/* ------ animation drop motion -------*/
.mdc_drop{
  will-change: transform;
}

/* Pattern 01 */
@keyframes dropMotion01{
  0%{
    transform: translate(0, 0) rotate(0deg);
  }
  25%{
    transform: translate(6px, -12px) rotate(.5deg);
  }
  50%{
    transform: translate(-8px, 8px) rotate(-.5deg);
  }
  75%{
    transform: translate(8px, 4px) rotate(.3deg);
  }
  100%{
    transform: translate(0, 0) rotate(0deg);
  }
}
.dropMotion01{
  animation: dropMotion01 15s ease-in-out infinite;
}

/* Pattern 02 */
@keyframes dropMotion02{
  0%{
    transform: translate(0, 0) rotate(0deg);
  }
  25%{
    transform: translate(10px, -6px) rotate(.8deg);
  }
  50%{
    transform: translate(0, 10px) rotate(0deg);
  }
  75%{
    transform: translate(-10px, 2px) rotate(-.8deg);
  }
  100%{
    transform: translate(0, 0) rotate(0deg);
  }
}
.dropMotion02{
  animation: dropMotion02 25s ease-in-out infinite;
}

/* Pattern 03 */
@keyframes dropMotion03{
  0%{
    transform: translate(0, 0) rotate(0deg);
  }
  30%{
    transform: translate(18px, -10px) rotate(1deg);
  }
  60%{
    transform: translate(-18px, 14px) rotate(-1deg);
  }
  90%{
    transform: translate(14px, 8px) rotate(.6deg);
  }
  100%{
    transform: translate(0, 0) rotate(0deg);
  }
}
.dropMotion03{
  animation: dropMotion03 40s ease-in-out infinite;
}

/* Pattern 04 */
@keyframes dropMotion04{
  0%{
    transform: translate(0, 0) rotate(0deg);
  }
  20%{
    transform: translate(-12px, -8px) rotate(-0.8deg);
  }
  40%{
    transform: translate(-6px, 14px) rotate(0.5deg);
  }
  60%{
    transform: translate(12px, 10px) rotate(0.8deg);
  }
  80%{
    transform: translate(8px, -12px) rotate(-0.5deg);
  }
  100%{
    transform: translate(0, 0) rotate(0deg);
  }
}
.dropMotion04{
  animation: dropMotion04 32s ease-in-out infinite;
}


/* delay */
.drop_bg_01{ animation-delay: 0s; }
.drop_bg_02{ animation-delay: -3s; }
.drop_bg_03{ animation-delay: -8s; }
.drop_bg_04{ animation-delay: -5s; }
.drop_bg_05{ animation-delay: -11s; }
.drop_bg_06{ animation-delay: -6s; }
.drop_bg_07{ animation-delay: -14s; }
.drop_bg_08{ animation-delay: -5s; }
.drop_bg_09{ animation-delay: -11s; }


/* ------ animation delay -------*/
.mdc_delay1  { animation-delay: .15s; }
.mdc_delay2  { animation-delay: .30s; }
.mdc_delay3  { animation-delay: .45s; }
.mdc_delay4  { animation-delay: .60s; }
.mdc_delay5  { animation-delay: .75s; }
.mdc_delay6  { animation-delay: .90s; }
.mdc_delay7  { animation-delay: 1.05s; }
.mdc_delay8  { animation-delay: 1.20s; }
.mdc_delay9  { animation-delay: 1.35s; }
.mdc_delay10 { animation-delay: 1.50s; }


/* ------ animation fadeInUp -------*/
.mdc_fadeInUp{
  -webkit-transform: translate3d(0, 20px, 0);
  transform: translate3d(0, 20px, 0);
  opacity: 0;
}
.mdc_fadeInUp.is-animated{
  animation-name: mdc_fadeInUp;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
@keyframes mdc_fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


/* ------ animation fadeInScale -------*/
.mdc_fadeInScale{
  opacity: 0;
  transform: scale(0.8);
  transform-origin: center center;
}
.mdc_fadeInScale.is-animated{
  animation-name: mdc_fadeInScale;
  animation-duration: 1.2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
@keyframes mdc_fadeInScale {
  0%{
    opacity: 0;
    transform:
      scale(0.8)
      translate3d(0, 0, 0)
      rotate(.00001deg);
  }
  60%{
    opacity: 1;
    transform:
      scale(1.03)
      translate3d(0, 0, 0)
      rotate(.00001deg);
  }
  100%{
    opacity: 1;
    transform:
      scale(1)
      translate3d(0, 0, 0)
      rotate(.00001deg);
  }
}


/* ------ animation blurIn -------*/
.mdc_blurIn{
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.03);
}
/* scroll animation発火後 */
.mdc_blurIn.is-animated{
  animation-name: mdc_blurIn;
  animation-duration: 1.6s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
@keyframes mdc_blurIn{
  0%{
    opacity: 0;
    filter: blur(12px);
    transform: scale(1.03);
  }
  100%{
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}


/* ------ animation revealLeft -------*/
.mdc_revealLeft{
  clip-path: inset(0 100% 0 0);
  overflow: hidden;
  will-change: clip-path;
}
.mdc_revealLeft.is-animated{
  animation-name: mdc_revealLeft;
  animation-duration: 1.6s;
  animation-timing-function: cubic-bezier(.7,0,.2,1);
  animation-fill-mode: forwards;
}
@keyframes mdc_revealLeft{
  from{
    clip-path: inset(0 100% 0 0);
  }
  to{
    clip-path: inset(0 0 0 0);
  }
}

/* ------ animation revealRight -------*/
.mdc_revealRight{
  clip-path: inset(0 0 0 100%);
  will-change: clip-path;
}
.mdc_revealRight.is-animated{
  animation-name: mdc_revealRight;
  animation-duration: 1.6s;
  animation-timing-function: cubic-bezier(.7,0,.2,1);
  animation-fill-mode: forwards;
}
@keyframes mdc_revealRight{
  from{
    clip-path: inset(0 0 0 100%);
  }
  to{
    clip-path: inset(0 0 0 0);
  }
}


/* =======================================
    06. Section（Contents）
======================================= */
/* ------ .mdc_sec_mv -------*/
.mdc_sec_mv{
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  overflow: hidden;
}
@media screen and (min-width:768px){
  .mdc_sec_mv{
    height: calc(100dvh - var(--header-height,0px));
    min-height: 700px;
  }
}
@media screen and (min-width: 1600px) {
  .mdc_sec_mv {
    min-height: 800px;
  }
}
@media screen and (max-width:767px){
  .mdc_sec_mv{
    aspect-ratio: 750 / 1170;
  }
}

/* background */
.mdc_bg_mv{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* inner */
.mdc_mv_inner{
  position: relative;
  width: min(100%, 1920px);
  aspect-ratio: 1920 / 854;
  height: auto;
  margin: 0 auto;
}
@media screen and (max-width:767px){
  .mdc_mv_inner{
    width: 100%;
    aspect-ratio: 750 / 1170;
  }
}

/* logo */
.mdc_mv_logo{
  position: absolute;
  top: var(--mdc-size-40);
  right: var(--mdc-size-40);
  width: min(15.469vw, 297px); /* 1920px基準 */
  transition: opacity .3s;
  z-index: 30;
}
@media (hover:hover){
  .mdc_mv_logo:hover{
    opacity: 0.7;
  }
}
@media screen and (max-width:767px){
  .mdc_mv_logo{
    top: auto;
    right: auto;
    bottom: var(--mdc-size-60);
    left: var(--mdc-size-70);
    width: 40vw; /* 375px基準 */
  }
}

/* txt_mv_copy */
.mdc_mv_copy{
  position: absolute;
  top: min(12.5vw, 240px);/* 1920px基準 */
  left: calc(50% - min(42.188vw, 810px)); /* 1920px基準 */
  width: min(35.677vw, 685px); /* 1920px基準 */
  z-index: 20;
}
.mdc_mv_copy img{
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (max-width:767px){
  .mdc_mv_copy{
    top: 5%;
    left: 8%;
    width: 61.467vw; /* 375px基準 */
  }
}

/* product pc */
.img_mv_product_pc{
  position: absolute;
  top: calc(min(3.646vw, 70px) * -1);
  right: calc(50% - min(40.104vw, 770px)); /* 1920px基準 */
  width: min(73.542vw, 1412px); /* 1920px基準 */
  aspect-ratio: 1412 / 876;
  z-index: 10;
}
.img_mv_product_oilmist_pc{
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(22.5vw, 432px); /* 1920px基準 */
  z-index: 2;
}
.img_mv_spray_pc{
  position: absolute;
  top: 0.3%;
  right: 29%;
  width: min(52.031vw, 999px); /* 1920px基準 */
  height: auto;
}

/* product sp */
.img_mv_product_sp{
  position: relative;
  width: 100%; /* 375px基準 */
  aspect-ratio: 750 / 1170;
  z-index: 10;
}
.img_mv_product_oilmist_sp{
  position: absolute;
  right: 7%;
  bottom: 6%;
  width: 56.533vw; /* 375px基準 */
  z-index: 2;
}
.img_mv_spray_sp{
  position: absolute;
  top: 18.3%;
  left: -7%;
  width: 49.333vw; /* 375px基準 */
  height: auto;
}

/* drop */
.mdc_sec_mv .mdc_drop{
  display: block;
  position: absolute;
  z-index: 5;
}
@media screen and (min-width:768px){
  .drop_mv_01{
    right: calc(50% - min(30.73vw, 590px)); /* 1920px基準 */
    top: min(22.22%, 200px); /* 1920px基準 */
    width: min(22.81vw, 438px); /* 1920px基準 */
  }
  .drop_mv_02{
    right: calc(50% - min(22.92vw, 440px)); /* 1920px基準 */
    top: min(61.89%, 557px); /* 1920px基準 */
    width: min(10.31vw, 198px); /* 1920px基準 */
    opacity: 0.8 !important;
  }
  .drop_mv_03{
    right: calc(50% - min(7.81vw, 150px)); /* 1920px基準 */
    top: min(53.33%, 480px); /* 1920px基準 */
    width: min(7.03vw, 135px); /* 1920px基準 */
  }
  .drop_mv_04{
    right: calc(50% - min(0.52vw, 10px)); /* 1920px基準 */
    top: min(67.78%, 610px); /* 1920px基準 */
    width: min(11.93vw, 229px); /* 1920px基準 */
  }
}
@media screen and (max-width:767px){
  .drop_mv_01{
    left: 15.467vw;
    bottom: 40.933vw;
    width: 52.8vw; /* 375px基準 */
  }
  .drop_mv_02{
    left: 26.667vw;
    bottom: 26vw;
    width: 23.733vw; /* 375px基準 */
    opacity: 0.8 !important;
  }
  .drop_mv_03{
    display: none;
  }
  .drop_mv_04{
    left: -5.333vw;
    bottom: 15.333vw;
    width: 27.6vw; /* 375px基準 */
  }
}


/* ------ .mdc_sec_about -------*/
.mdc_ttl_about{
  font-size: var(--mdc-font-size-3xl);
  font-family: var(--mdc-font-mincho);
  font-weight: 500;
  margin-bottom: 1em;
  text-align: center;
}
.mdc_ttl_about_sub{
  margin-bottom: var(--mdc-size-60);
  margin-left: calc(var(--mdc-size-20) * -1);
  width: min(63.467vw, 361.76px); /* 750px時は 476px */
}
@media screen and (max-width: 767px) {
  .mdc_ttl_about_sub{
    width: 63.467vw;
  }
}

/* .mdc_top_box */
.mdc_sec_about .mdc_top_box{
  padding-top: var(--mdc-size-100);
  padding-bottom: var(--mdc-size-60);
}
.mdc_sec_about .mdc_top_box p{
  font-family: var(--mdc-font-mincho);
  text-align: center;
  line-height: 2.6;
}

/* .mdc_bottom_box */
.mdc_sec_about .mdc_bottom_box{
  aspect-ratio: 1;
  background-image: url(/img/usr/brand/maisondecalm-oilmist/bg_about.jpg);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;

  padding-top: var(--mdc-size-60);
  padding-bottom: var(--mdc-size-50);
}
.mdc_sec_about .mdc_bottom_box .mdc_container{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mdc_sec_about .mdc_purchase_box{
  margin-top: auto;
}

/* deco */
.deco_about_01{
  top: calc(min(22.667vw, 129.2px) * -1);   /* 750px時は 170px */
  left: calc(min(21.333vw, 121.6px) * -1);  /* 750px時は 160px */
  width: min(32.133vw, 183.16px); /* 750px時は 241px */
}
.deco_about_02{
  bottom: calc(var(--mdc-size-80) * -1);
  right:calc(var(--mdc-size-30) * -1);
  width: min(18.267vw, 104.12px); /* 750px時は 137px */
}
@media screen and (max-width: 767px) {
  .deco_about_01{
    top: -22.667vw;
    left:  -21.333vw;
    width: 32.133vw;
  }
  .deco_about_02{
    width: 18.267vw;
  }
}

/* ------ .mdc_sec_point -------*/
.mdc_sec_point .mdc_case{
  padding-top: var(--mdc-size-40);
  position: relative;
}
.mdc_sec_point .mdc_point_01_box{
  padding-bottom: var(--mdc-size-120);
}
.mdc_sec_point .mdc_point_02_box{
  background-image: url(/img/usr/brand/maisondecalm-oilmist/bg_point_02_box.jpg);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding-bottom: var(--mdc-size-90);
}
.mdc_sec_point .mdc_point_03_box{
  padding-bottom: var(--mdc-size-60);
}

/* .mdc_ttl_point */
.mdc_sec_point .mdc_ttl_point{
  margin-bottom: var(--mdc-size-40);
}
.mdc_sec_point .mdc_ttl_point img{
  width: min(29.333vw, 167.2px); /* 750px時は 220px */
}
@media screen and (max-width: 767px) {
  .mdc_sec_point .mdc_ttl_point img{
    width: 29.333vw; /* 375px基準 */
  }
}

/* .mdc_ttl_point_sub */
.mdc_sec_point .mdc_ttl_point_sub{
  font-family: var(--mdc-font-mincho);
  font-size: var(--mdc-font-size-2xl);
  font-weight: 500;
  margin-bottom: 0.75em;
  text-align: center;
}

.mdc_sec_point p{
  text-align: center;
}

/* .mdc_feature_box */
.mdc_point_03_box .mdc_feature_box{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  left: var(--mdc-size-25)
}
.mdc_point_03_box .mdc_feature_box .mdc_icon_plus{
  position: absolute;
  top: var(--mdc-size-140);
  left: calc(50% - min(5.733vw, 32.68px)); /* 750px時は 43px */
  z-index: 10;
}
.img_point_03_a, .img_point_03_b{
  width: min(46.933vw, 267.52px); /* 750px時は 352px */
}
@media screen and (max-width: 767px) {
  .mdc_point_03_box .mdc_feature_box .mdc_icon_plus{
    left: calc(50% - 5.733vw); /* 375px基準 */
  }
  .img_point_03_a, .img_point_03_b{
    width: 46.933vw; /* 375px基準 */
  }
}

/* .mdc_white_box */
.mdc_sec_point .mdc_point_03_box .mdc_white_box{
  padding: var(--mdc-size-40) var(--mdc-size-40) var(--mdc-size-20);
}
.mdc_sec_point .mdc_point_03_box .mdc_white_box .mdc_icon_plus{
  margin: var(--mdc-size-30) auto var(--mdc-size-20);
}
.mdc_sec_point .mdc_point_03_box .mdc_white_box .img_point_03_d{
  position: relative;
  left: min(26.667vw, 152px); /* 750px時は 200px */
  top: calc(var(--mdc-size-15) * -1);
  width: min(41.2vw, 234.84px); /* 750px時は 309px */
}
.mdc_sec_point .mdc_point_03_box .mdc_white_box .mdc_txt_note{
  font-size: var(--mdc-font-size-xs);
  text-align: right;
}
@media screen and (max-width: 767px) {
  .mdc_sec_point .mdc_point_03_box .mdc_white_box .img_point_03_d{
    left: 26.667vw; /* 375px基準 */
    width: 41.2vw; /* 375px基準 */
  }
}

/* deco */
.img_point_01_b .mdc_deco{
  bottom: calc(var(--mdc-size-40) * -1);
  left: calc(var(--mdc-size-30) * -1);
  width: min(41.6vw, 237.12px); /* 750px時は 312px */
}
.img_point_02_a .mdc_deco{
  top: var(--mdc-size-20);
  right: calc(var(--mdc-size-15) * -1);
  width: min(24vw, 136.8px); /* 750px時は 180px */
}
.deco_drop_point_01{
  top: calc(var(--mdc-size-60) * -1);
  right: 0;
  width: min(43.067vw, 245.48px); /* 750px時は 323px */
}
.deco_drop_point_02{
  top: calc(var(--mdc-size-30) * -1);
  left: min(30.667vw, 174.8px); /* 750px時は 230px */
  width: min(20.8vw, 118.56px);   /* 750px時は 156px */
}
@media screen and (max-width: 767px) {
  .img_point_01_b .mdc_deco{
    width: 41.6vw; /* 375px基準 */
  }
  .img_point_02_a .mdc_deco{
    width: 24vw;; /* 375px基準 */
  }
  .deco_drop_point_01{
    width: 43.067vw; /* 375px基準 */
  }
  .deco_drop_point_02{
    left: 30.667vw;
    width: 20.8vw; /* 375px基準 */
  }
}


/* ------ .mdc_sec_texture -------*/
.mdc_sec_texture{
  background-color: #e4ded6;
}
.mdc_sec_texture .mdc_white_box{
  padding: var(--mdc-size-25);
}
.mdc_sec_texture .mdc_white_box .mdc_box{
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
}
.mdc_texture_01_box{
  aspect-ratio: 550 / 270;
  background-image: url(/img/usr/brand/maisondecalm-oilmist/img_texture_01.png);
  position: relative;
  margin-bottom: var(--mdc-size-20);
}
.mdc_texture_01_box::after{
  content: '';
  background-image: url(/img/usr/brand/maisondecalm-oilmist/line_dots.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  height: 3px;
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.mdc_texture_02_box{
  aspect-ratio: 550 / 330;
  background-image: url(/img/usr/brand/maisondecalm-oilmist/img_texture_02.png);
}

/* .ttl_texture */
.ttl_texture{
  font-size: var(--mdc-font-size-2xl);
  font-family: var(--mdc-font-mincho);
  position: relative;
  left: calc(var(--mdc-size-50) * -1);
  margin-bottom: .5em;
}
.ttl_texture .mdc_txt_marker{
  padding-left: var(--mdc-size-50);
  padding-right: var(--mdc-size-20);
}

/* .mdc_txt_texture */
.mdc_txt_texture{
  font-size: calc(var(--mdc-font-size-base) * 1.03);
  padding-left:  var(--mdc-size-15);
}
.mdc_txt_texture .mdc_txt_orange{
  font-weight: 600;
}


/* ------ .mdc_sec_howtouse -------*/
.mdc_sec_howtouse{
  aspect-ratio: 750 / 433;
  background-image: url(/img/usr/brand/maisondecalm-oilmist/bg_howtouse.png);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  padding-bottom: var(--mdc-size-90);
}
.mdc_sec_howtouse .mdc_white_box{
  padding: var(--mdc-size-25);
}
.mdc_sec_howtouse .mdc_box{
  border-left: min(0.4vw, 2.28px) solid #e7e3d4; /* 750px時は 3px */
  border-radius: var(--mdc-size-10) 0 0 0;
  overflow: hidden;
}
.mdc_sec_howtouse .mdc_box:nth-child(1){
  margin-bottom: var(--mdc-size-40);
}
@media screen and (max-width: 767px) {
  .mdc_sec_howtouse .mdc_box{
    border-left: 0.4vw solid #e7e3d4; /* 375px基準 */
  }
}

/* .ttl_howtouse */
.mdc_sec_howtouse .ttl_howtouse{
  aspect-ratio: 180 / 40;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='40' viewBox='0 0 180 40'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23e7e3d4%3B %7D %3C/style%3E%3C/defs%3E%3Cpath id='bg_ttl_howtouse' class='cls-1' d='M142.5,0H10C4.48,0,0,4.48,0,10v30h180l-25.5-34c-2.83-3.78-7.28-6-12-6Z'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left top;
  display: inline-flex;
  align-items: center;

  font-size: calc(var(--mdc-font-size-lg) * 0.94);
  font-weight: 500;
  line-height: 1;
  min-height: min(5.333vw, 30.4px); /* 750px時は 40px */
  padding: 0 var(--mdc-size-30);
  position: relative;
  left: calc(min(0.4vw, 2.28px) * -1); /* 750px時は 3px */
}
@media screen and (max-width: 767px) {
  .mdc_sec_howtouse .ttl_howtouse{
    min-height: 5.333vw; /* 375px基準 */
    left: -0.4vw; /* 375px基準 */
  }
}

/* .mdc_list_box */
.mdc_sec_howtouse .mdc_list_box{
  padding: var(--mdc-size-10)
}
.mdc_sec_howtouse .mdc_list_box li{
  margin-bottom: 0.25em;
}
.mdc_sec_howtouse .mdc_list_box li:last-child{
  margin-bottom: 0;
}

/* deco */
.deco_drop_howtouse{
  bottom: var(--mdc-size-40);
  right:var(--mdc-size-70);
  width: min(16.133vw, 91.96px); /* 750px時は 121px */
}
@media screen and (max-width: 767px) {
  .deco_drop_howtouse{
    width: 16.133vw; /* 375px基準 */
  }
}
 

/* ------ .mdc_sec_usersvoice -------*/
.mdc_sec_usersvoice{
  aspect-ratio: 750 / 1030;
  background-image: url(/img/usr/brand/maisondecalm-oilmist/bg_usersvoice.jpg);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

/* .mdc_usersvoice_box */
.mdc_usersvoice_box{
  aspect-ratio: 610 / 584;
}
.mdc_usersvoice_box img{
  position: absolute;
}
.img_usersvoice_01{
  top: calc(var(--mdc-size-10) * -1);
  left: var(--mdc-size-30);
  width: min(44vw, 250.8px);   /* 750px時は 330px */
}
.img_usersvoice_02{
  top: var(--mdc-size-130);
  right: 0;
  width: min(56vw, 319.2px);   /* 750px時は 420px */
}
.img_usersvoice_03{
  top: min(38.667vw, 220.4px); /* 750px時は 290px */
  right: var(--mdc-size-50);
  width: min(50.133vw, 285.76px); /* 750px時は 376px */
}
.img_usersvoice_04{
  top: min(58.667vw, 334.4px); /* 750px時は 440px */
  right: 0;
  width: min(52vw, 296.4px); /* 750px時は 390px */
}
@media screen and (max-width: 767px) {
  .img_usersvoice_01{
    width: 44vw; /* 375px基準 */
  }
  .img_usersvoice_02{
    width: 56vw; /* 375px基準 */
  }
  .img_usersvoice_03{
    top: 38.667vw;
    width: 50.133vw; /* 375px基準 */
  }
  .img_usersvoice_04{
    top: 58.667vw;
    width: 52vw; /* 375px基準 */
  }
}
#pageMaisondecalmOilmist .mdc_btn_atcosme{
  margin: var(--mdc-size-50) auto var(--mdc-size-15);
}
.mdc_txt_note{
  font-size: var(--mdc-font-size-xs);
  padding-right: var(--mdc-size-30);
  text-align: right;
}


/* ------ .mdc_sec_story -------*/
.mdc_sec_story{
  aspect-ratio: 750 / 1090;
  background-image: url(/img/usr/brand/maisondecalm-oilmist/bg_story.jpg);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
.mdc_sec_story .mdc_container{
  width: 88%;
}
.mdc_sec_story p{
  font-size: 95%;
  font-family: var(--mdc-font-mincho);
  margin-bottom: 2em !important;
  line-height: 1.75;
  letter-spacing: 0;

  text-shadow:
    0 0 4px rgba(255,255,255,1),
    0 0 10px rgba(255,255,255,.95),
    0 0 20px rgba(255,255,255,.8),
    0 0 32px rgba(255,255,255,.5);
}
.mdc_sec_story p:last-child{
  margin-top: 3em;
}


/* ------ .mdc_sec_purchase -------*/
.mdc_sec_purchase{
  aspect-ratio: 750 / 1070;
  background-image: url(/img/usr/brand/maisondecalm-oilmist/bg_purchase.jpg);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding-bottom: var(--mdc-size-40);
}
.ttl_purchase{
  font-size: var(--mdc-font-size-xl);
  font-family: var(--mdc-font-mincho);
  font-weight: 500;
  text-align: center;
}
.ttl_purchase .mdc_txt_small{
  font-size: var(--mdc-font-size-base);
  font-family: var(--mdc-font-gothic);
  display: block;
  padding-top: 0.5em;
}

/* img_box */
.mdc_sec_purchase .img_product_oilmist{
  margin-top: var(--mdc-size-140);
  margin-bottom: var(--mdc-size-40);
  text-align: center;
}
.mdc_sec_purchase .img_product_oilmist .img{
  width: min(31.067vw, 177.08px); /* 750px時は 233px */
}
.mdc_sec_purchase .img_product_oilmist .mdc_deco{
  top: calc(var(--mdc-size-130) * -1);
  right: var(--mdc-size-40);
  width: min(26.133vw, 148.96px); /* 750px時は 196px */
}
@media screen and (max-width: 767px) {
  .mdc_sec_purchase .img_product_oilmist .img{
    width: 31.067vw; /* 375px基準 */
  }
  .mdc_sec_purchase .img_product_oilmist .mdc_deco{
    width: 26.133vw; /* 375px基準 */
  }
}

/* .mdc_purchase_box */
.mdc_sec_purchase .mdc_purchase_box{
  margin-top: auto;
  width: min(48vw, 273.6px); /* 750px時は 360px */
}
.mdc_sec_purchase .mdc_txt_product{
  font-size: var(--mdc-font-size-lg);
  position: relative;
  left: var(--mdc-size-20);
  margin-bottom: var(--mdc-size-10) !important;
}
.mdc_sec_purchase .mdc_txt_price{
  position: relative;
  left: var(--mdc-size-20);
}
@media screen and (max-width: 767px) {
  .mdc_sec_purchase .mdc_purchase_box {
    width: 48vw; /* 375px基準 */
  }
}

/* deco */
.mdc_sec_purchase .deco_drop_purchase{
  top: var(--mdc-size-100);
  left: calc(var(--mdc-size-10) * -1);
  width: min(21.2vw, 120.84px); /* 750px時は 159px */
}
@media screen and (max-width: 767px) {
  .mdc_sec_purchase .deco_drop_purchase{
    width: 21.2vw; /* 375px基準 */
  }
}


/* ------ .mdc_sec_faq -------*/
.mdc_sec_faq{
  padding-bottom: var(--mdc-size-90);
}

/* .mdc_list_faq_box */
.mdc_list_faq_box::before{
  content: '';
  background-image: url(/img/usr/brand/maisondecalm-oilmist/line_faq.png);
  background-size: 100% auto;
  background-position: top center;
  display: block;
  height: 1.5px;
  width: 100%;
}
.mdc_list_faq_box .mdc_faq_item::after{
  content: '';
  background-image: url(/img/usr/brand/maisondecalm-oilmist/line_faq.png);
  background-size: 100% auto;
  background-position: bottom center;
  display: block;
  height: 1.5px;
  width: 100%;
}
.mdc_list_faq_box .mdc_accordion_trigger{
  font-size: calc(var(--mdc-font-size-lg) * 1.03);
  font-family: var(--mdc-font-gothic);
  font-weight: 500;
  padding: var(--mdc-size-40) var(--mdc-size-60);
  text-align: left;
}
.mdc_list_faq_box .mdc_accordion_mark{
  top: min(6vw, 34.2px); /* 750px時は 45px */
}
.mdc_list_faq_box .mdc_accordion_content{
  padding: 0 var(--mdc-size-60) var(--mdc-size-40);
}
@media screen and (max-width: 767px) {
  .mdc_list_faq_box::before,
  .mdc_list_faq_box .mdc_faq_item::after{
    height: 0.2vw; /* 375px基準 */
  }
  .mdc_list_faq_box .mdc_accordion_mark{
    top: 6vw; /* 375px基準 */
  }
}