@charset "utf-8";

:root { --cqw: 1px; }

html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; scroll-behavior: smooth; }
body { min-height: 100vh; line-height: 1.5; }
html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }
#mfs { container-type: inline-size; font-family: "Noto Sans JP", "Inter", sans-serif; background: var(--c-wt); --c-c1: #03457A; --c-c2: #fff6e8; --c-c3: #c5c5c5; --c-c4: #d3e6f8; --c-c5: #b7d1b2; --c-c6: #a8cade; --c-c7: #c2adcf; --c-c8: #bababa; --c-c9: #c5b1a0; --c-bk: #000; --c-wt: #fff; --c-bu: #152a3b;/*#1d2b4b*/ --c-gd2:#d79f4f; --c-gd: #c9a960; --c-yl: #f3f3f3; --c-yl2: #d3d3d3; --c-yl3: #e8e8e8; --c-ly: #f6f5f3; --c-lg: #d0d0d0; --c-gb: #555; --c-gl: #727271; --c-gy: #9c9c9c; --c-cp: #c8395e;  --c-cp2: #e12953; width: 100%; }
#mfs *, #mfs *::before, #mfs *::after { box-sizing: border-box; margin: 0; padding: 0; }
#mfs .--font-m{ font-family: 'Noto Serif JP', serif;}
#mfs .--font-a{ font-family: 'Abril Fatface', serif;}
#mfs .--inr { width: 100%; margin: 0 auto; display: block; }
#mfs section{max-width: 1280px; margin: 0 auto;}
#mfs section#bar{max-width: none;}

/*#mfs #bar { background: var(--c-gd); color: var(--c-bu); text-align: center; font-weight: 700; letter-spacing: 0.05em; z-index: 10; width: 100%; display: flex; align-items: center; justify-content: center; line-height: 1.2; }
#mfs #bar.is-fixed { position: fixed; left: 0; }*/

#mfs #kv h1, #mfs #kv picture, #mfs #kv img { display: block; width: 100%; height: auto; }

#mfs #lead { background: var(--c-wt); width: 100%; }
#mfs #lead p { color: var(--c-bu); font-weight: 400; width: 100%; line-height: 1.6; text-align: center;}

#mfs #item{background: linear-gradient(90deg, #FFF8ED 0%, #FFFFFF 30%, #FFFFFF 70%, #FFF8ED 100%); /*background:var(--c-yl);*/ box-sizing: border-box;}
#mfs #item h2 { text-align: center; flex-shrink: 0; /*min-height: 2.2em;*/}
#mfs #item #acc5 + label h2{padding: 0.55em 0;}
#mfs #item h2 .sale-title {justify-content: center; display: flex; align-items: center; gap: 5px; font-weight: 700; color: var(--c-bu);}
#mfs #item h2 .grad-text { background: linear-gradient(180deg, #D79F4F 0%, #F4DB85 50%, #D79F4F 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; filter: drop-shadow(2px 4px 0px rgba(0, 0, 0, 0.5));}
#mfs #item h2 .sale-subtitle,
#mfs #item h2 .sale-period { display: block; color: var(--c-bu); font-weight: 700;}
#mfs #item nav{border-bottom: var(--c-bu) 1px solid;}
#mfs #item nav div{display: flex; justify-content: center; background: var(--c-bu); padding: 0; flex-wrap: wrap; text-align: center;}
#mfs #item nav div a{flex: 1; text-decoration: none; display: flex; align-items: center; justify-content: center; border-right:2px var(--c-gd) solid;}
#mfs #item nav div a:last-child { border-right: none;}
#mfs #item nav div a span{font-weight: bold; line-height: 1.1; background: linear-gradient(180deg, #D79F4F 0%, #F4DB85 50%, #D79F4F 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block;}

#mfs #zero-gravity h2 + p br,
#mfs #sleep-latex h2 + p br{display: none;}

.--item-box {margin: 0 auto; /*border:var(--c-bu) 1px solid; overflow: hidden; background: linear-gradient(90deg, #FFF8ED 0%, #FFFFFF 15%, #FFFFFF 85%, #FFF8ED 100%); / *background:var(--c-yl);* / box-sizing: border-box;*/}
.--item-box .toggle-accordion { display: none; }
.--item-box .header-container { display: flex; align-items: center; background: var(--c-bu); color: var(--c-wt); cursor: pointer; position: relative; user-select: none; box-sizing: border-box; }
.--item-box h2 {font-weight: bold; line-height: 1.1; background: linear-gradient(180deg, #D79F4F 0%, #F4DB85 50%, #D79F4F 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.--item-box h2 + p{line-height: 1.5; margin: 0; }
.--item-box .arrow-icon { position: absolute; transform: rotate(-90deg) /*translateY(-25%) rotate(-45deg)*/; transition: transform 0.3s ease;}
.--item-box .arrow-icon::before {content: "＞"; display: block;}
.--item-box ul.list { list-style: none; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease; }
.--item-box .toggle-accordion:checked ~ ul.list { max-height: 1900px; }
.--item-box .toggle-accordion:not(:checked) ~ .header-container .arrow-icon { transform: rotate(90deg)  /*translateY(-75%) rotate(135deg)*/; }
.--item-box ul.list li.box { background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(90deg, #D79F4F 0%, #F4DB85 50%, #D79F4F 100%); background-origin: border-box; background-clip: content-box, border-box; box-sizing: border-box; }
.--item-box .product { display: flex; align-items: center;}
.--item-box .first { width: 45%; display: flex; align-items: center; justify-content: center;}
.--item-box .second { width: 55%; }
.--item-box .first img { width: 100%; height: auto; object-fit: contain; }
.--item-box .product-name { font-weight: bold; color: var(--c-bk); }
.--item-box .price{ display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0 0 12px 0; }
.--item-box .price .old { color: var(--c-bu); }
.--item-box .price .new { font-weight: bold; color: var(--c-cp); }
.--item-box .price .tag { color: var(--c-wt); font-weight: bold; background: var(--c-cp);}
.--item-box .trial-container { background-color: var(--c-yl3); color: var(--c-bu); box-sizing: border-box; list-style: none;}
.--item-box .trial-container li { display: flex; justify-content: space-between; align-items: center; font-weight: 500; }
/*.--item-box .trial-container li + li { border-top: 1px dashed rgba(26, 41, 54, 0.15); }*/
.--item-box .trial-container span::before { content: "◆ "; color: var(--c-gd2); margin-right: 2px; }
.--item-box .trial-container a { border: 1px solid transparent; color: var(--c-gd2); border-radius: 20px; background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(90deg, #D79F4F 0%, #F4DB85 50%, #D79F4F 100%); background-origin: border-box; background-clip: content-box, border-box; text-decoration: none; transition: opacity 0.2s; display: inline-block; }
.--item-box .trial-container a:hover { opacity: 0.8; }
.--item-box .options-container { display: flex; flex-wrap: wrap;}
.--item-box .option-group { border: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
.--item-box .option-label {color: var(--c-bu); margin: 0 0 4px 0; }
.--item-box .radio-buttons input, .--item-box .color-buttons input { display: none; }
.--item-box .radio-buttons { display: flex; gap: 7px; }
.--item-box .radio-buttons span { display: inline-block; background: var(--c-wt); border: 1px solid var(--c-gb); border-radius: 5px; text-align: center; cursor: pointer; user-select: none; box-sizing: border-box; padding: 0 .75em!important; }
.--item-box .radio-buttons input:checked + span { border-color: var(--c-bu); font-weight: bold; background: var(--c-yl); font-weight: 500;}
.--item-box .size-desc {color: var(--c-bu); display: block; width: 100%; order: 3;}
.--item-box .color-buttons { display: flex; gap: 4px; }
.--item-box .color-dot {border-radius: 50%; border: 1px solid var(--c-gb); display: inline-block; cursor: pointer; box-sizing: border-box;}
.--item-box .--c1 { background: var(--c-c1);}
.--item-box .--c2 { background: var(--c-c2);}
.--item-box .--c3 { background: var(--c-c3);}
.--item-box .--c4 { background: var(--c-c4);}
.--item-box .--c5 { background: var(--c-c5);}
.--item-box .--c6 { background: var(--c-c6);}
.--item-box .--c7 { background: var(--c-c7);}
.--item-box .--c8 { background: var(--c-c8);}
.--item-box .--c9 { background: var(--c-c9);}
.--item-box .color-buttons input:checked + .color-dot { border: 1px solid var(--c-bu); box-shadow: inset 0 0 0 2px var(--c-wt);}
.--item-box .button-container { display: flex; gap: 10px; }
.--item-box .button-container button, .--item-box .button-container a { flex: 1; font-weight: bold; cursor: pointer; box-sizing: border-box; text-decoration: none; display: flex; align-items: center; justify-content: center; background-repeat: no-repeat; transition: opacity 0.2s; }
.--item-box .btn-cart { background: var(--c-c1); color: var(--c-wt); border: none; background-image: url('../../../images/campaign/magic-final-sale/icon-cart.webp'); }
.--item-box .btn-detail { background: var(--c-wt); color: var(--c-c1); border: 1px solid var(--c-bu); background-image: url('../../../images/campaign/magic-final-sale/icon-more.webp');}

@media (min-width: 1177px) {
  #mfs { --cqw: 1px; }
}

@media (max-width: 1176px) and (min-width: 768px) {
  :root { --cqw: calc(100cqw / 1176); }
}

@media (min-width: 768px) {
  #mfs .--sp{display: none;}
  #mfs .--inr { max-width: calc(1176 * var(--cqw));}
  #mfs .--box { max-width: calc(1000 * var(--cqw));}
  #mfs #bar { top: 90px;/*top: 91.4px;*/ min-height: calc(30 * var(--cqw)); font-size: calc(17.5 * var(--cqw)); padding-top: calc(4 * var(--cqw)); padding-bottom: calc(4 * var(--cqw)); }

  #mfs #lead { padding-top: calc(30 * var(--cqw)); padding-bottom: calc(50 * var(--cqw)); /*padding-top: calc(60 * var(--cqw)); padding-bottom: calc(60 * var(--cqw));*/ }
  #mfs #lead p { font-size: calc(24 * var(--cqw));}

  #mfs #item { padding-top: calc(40 * var(--cqw)); /*padding-bottom: calc(50 * var(--cqw));*/}
  #mfs #item h2 .sale-title{font-size:calc(58 * var(--cqw)); line-height: 1;}
  #mfs #item h2 .grad-text {font-size:calc(87 * var(--cqw));}
  #mfs #item h2 .sale-subtitle{font-size:calc(58 * var(--cqw));}
  #mfs #item h2 .sale-period {font-size:calc(33 * var(--cqw)); padding-bottom: calc(20 * var(--cqw));}
  #mfs #item .tab-text {font-size:calc(30 * var(--cqw)); padding: calc(10 * var(--cqw)) 0;}
  #mfs #item nav{margin-bottom: calc(30 * var(--cqw));}
  #mfs #item nav div{max-width: 1000px; margin: 0 auto;}
  #mfs #item nav div a span{font-size:calc(30 * var(--cqw))!important; padding: calc(10 * var(--cqw)) 0;}

  .--item-box {border-radius: calc(20 * var(--cqw)); margin-bottom: calc(30 * var(--cqw))!important;}
  .--item-box .header-container {padding: calc(20 * var(--cqw)) calc(30 * var(--cqw))!important;}
  .--item-box h2 {font-size:calc(62 * var(--cqw)); padding-right: calc(20 * var(--cqw))!important;}
  .--item-box h2 + p{font-size:calc(29 * var(--cqw))!important;}
  /*.--item-box .arrow-icon { right: calc(30 * var(--cqw)); top: calc(30 * var(--cqw)); width: calc(30 * var(--cqw)); height: calc(30 * var(--cqw)); border-top: calc(4 * var(--cqw)) solid var(--c-wt); border-right: calc(4 * var(--cqw)) solid var(--c-wt);}*/
  .--item-box .arrow-icon { font-size:calc(33 * var(--cqw)); right: calc(20 * var(--cqw)); top: calc(10 * var(--cqw)); }
  .--item-box .toggle-accordion:checked ~ ul.list { max-height: 1200px; padding: calc(30 * var(--cqw))!important;}
  .--item-box ul.list li { border: calc(3 * var(--cqw)) solid transparent; border-radius: calc(20 * var(--cqw));}
  .--item-box ul.list li + li{margin-top: calc(25 * var(--cqw))!important;}
  .--item-box .first {padding: calc(20 * var(--cqw))!important;}
  .--item-box .second {padding: calc(20 * var(--cqw)) calc(20 * var(--cqw)) calc(20 * var(--cqw)) 0!important;}
  .--item-box .product-name { font-size:calc(26 * var(--cqw));}
  .--item-box .price .old { font-size:calc(22 * var(--cqw)); }
  .--item-box .price .new { font-size:calc(44 * var(--cqw)); }
  .--item-box .price .tag { font-size:calc(20 * var(--cqw)); padding: 0 calc(10 * var(--cqw))!important; border-radius: calc(10 * var(--cqw));}
  .--item-box .trial-container { font-size:calc(19 * var(--cqw)); border-radius: calc(10 * var(--cqw)); padding: calc(5 * var(--cqw)) 0!important; margin: calc(20 * var(--cqw)) 0!important;}
  .--item-box .trial-container li{padding: calc(5 * var(--cqw)) calc(20 * var(--cqw)) !important;}
  .--item-box .options-container { font-size:calc(19 * var(--cqw)); gap: 0 calc(30 * var(--cqw)) ;}
  .--item-box .size-desc {margin-bottom: calc(20 * var(--cqw))!important;}
  .--item-box .radio-buttons input + span { min-width: calc(64 * var(--cqw)); line-height: calc(41 * var(--cqw));}
  .--item-box .color-dot { width: calc(41 * var(--cqw)); height: calc(41 * var(--cqw));}
  .--item-box .button-container button, .--item-box .button-container a { font-size:calc(22 * var(--cqw));  height: calc(55 * var(--cqw)); border-radius: calc(27.5 * var(--cqw)); font-weight: bold; background-position: left calc(20 * var(--cqw)) center; background-size: auto calc(38 * var(--cqw)); padding-left: calc(48 * var(--cqw))!important; }
}

@media (max-width: 767px) {
  #mfs .--pc{display: none;}
  :root { --cqw: calc(100cqw / 375); }
  #mfs .--inr { padding-left: 4.5%; padding-right: 4.5%; }
  #mfs #bar { top: 56px; min-height: calc(30 * var(--cqw)); font-size: calc(14.5 * var(--cqw)); padding-top: calc(4 * var(--cqw)); padding-bottom: calc(4 * var(--cqw)); }

  #mfs #lead { padding-top: calc(30 * var(--cqw)); padding-bottom: calc(30 * var(--cqw)); /*padding-top: calc(50 * var(--cqw)); padding-bottom: calc(50 * var(--cqw));*/ }
  #mfs #lead p { font-size: calc(14 * var(--cqw)); }
  
  #mfs #item { padding-top: calc(25 * var(--cqw)); /*padding-bottom: calc(50 * var(--cqw));*/}
  #mfs #item h2 .sale-title{font-size:calc(24 * var(--cqw)); line-height: 1;}
  #mfs #item h2 .grad-text {font-size:calc(36 * var(--cqw));}
  #mfs #item h2 .sale-subtitle{font-size:calc(24 * var(--cqw));}
  #mfs #item h2 .sale-period {font-size:calc(16 * var(--cqw)); padding-bottom: calc(25 * var(--cqw));}
  #mfs #item nav{margin-bottom: calc(20 * var(--cqw)); width:110%; position: relative; left: -5%;}
  #mfs #item nav div{max-width: 90%; margin: 0 auto;}
  #mfs #item nav div a span{font-size:calc(14 * var(--cqw))!important; padding: calc(5 * var(--cqw)) 0;}

  .--item-box {border-radius: calc(10 * var(--cqw)); margin-bottom: calc(20 * var(--cqw))!important;}
  .--item-box .header-container {padding: calc(10 * var(--cqw)) calc(12 * var(--cqw))!important;}
  .--item-box h2 {font-size:calc(23 * var(--cqw)); padding-right: calc(10 * var(--cqw))!important;}
  .--item-box h2 + p{font-size:calc(12 * var(--cqw))!important; padding-right: calc(10 * var(--cqw))!important;}
  .--item-box .arrow-icon { font-size:calc(13 * var(--cqw)); right: calc(10 * var(--cqw)); top: calc(10 * var(--cqw)); }
  .--item-box .toggle-accordion:checked ~ ul.list { padding: calc(18 * var(--cqw))!important;}
  .--item-box ul.list li { border: calc(1 * var(--cqw)) solid transparent; border-radius: calc(20 * var(--cqw));}
  .--item-box ul.list li + li{margin-top: calc(25 * var(--cqw))!important;}
  .--item-box .product { flex-direction: column; }
  .--item-box .first, .--item-box .second { width: 100%; }
  .--item-box .first {padding: calc(10 * var(--cqw)) !important;}
  .--item-box .second {padding: 0 calc(10 * var(--cqw)) calc(10 * var(--cqw)) calc(10 * var(--cqw))!important;}
  .--item-box .product-name { font-size:calc(15 * var(--cqw));}
  .--item-box .price .old { font-size:calc(14 * var(--cqw)); }
  .--item-box .price .new { font-size:calc(28 * var(--cqw)); }
  .--item-box .price .tag { font-size:calc(13 * var(--cqw)); padding: 0 calc(5 * var(--cqw))!important; border-radius: calc(5 * var(--cqw));}
  .--item-box .trial-container { font-size:calc(12 * var(--cqw)); border-radius: calc(5 * var(--cqw)); padding: calc(5 * var(--cqw)) 0!important; margin: calc(10 * var(--cqw)) 0!important;}
  .--item-box .trial-container li{padding: calc(5 * var(--cqw)) calc(10 * var(--cqw)) !important;}
  .--item-box .options-container { font-size:calc(12 * var(--cqw)); gap: 0 calc(15 * var(--cqw)) ; margin-bottom: calc(10 * var(--cqw))!important;}
  .--item-box .option-group {  order: 2!important; }
  .--item-box .size-desc {margin-bottom: calc(10 * var(--cqw))!important;  order: 2!important;}
  .--item-box .radio-buttons { gap: 4px; }
  .--item-box .radio-buttons input + span { min-width: calc(40 * var(--cqw)); line-height: calc(26 * var(--cqw));}
  .--item-box .color-dot { width: calc(26 * var(--cqw)); height: calc(26 * var(--cqw));}
  .--item-box .button-container button, .--item-box .button-container a { font-size:calc(12.5 * var(--cqw));  height: calc(35 * var(--cqw)); border-radius: calc(17.5 * var(--cqw)); font-weight: bold; background-position: left calc(12 * var(--cqw)) center; background-size: auto calc(23 * var(--cqw)); padding-left: calc(33 * var(--cqw))!important; }
  .--item-box .button-container { gap: calc(8 * var(--cqw)); }
}