@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; }
#cp10th { 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%; }
#cp10th *, #cp10th *::before, #cp10th *::after { box-sizing: border-box; margin: 0; padding: 0; }
#cp10th .--font-m{ font-family: 'Noto Serif JP', serif;}
#cp10th .--font-a{ font-family: 'Abril Fatface', serif;}
#cp10th .--inr { width: 100%; margin: 0 auto; display: block; }
#cp10th section{max-width: 1280px; margin: 0 auto;}
#cp10th section#bar{max-width: none;}

/*#cp10th #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; }
#cp10th #bar.is-fixed { position: fixed; left: 0; }*/

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

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

#cp10th #mes h2 {text-align: center; display: flex; flex-direction: column; align-items: center;}
#cp10th #mes .sub-title{font-weight: 700; background: linear-gradient(180deg, #F4DB85 0%, #D79F4F 23%, #F4DB85 50%, #D79F4F 78%, #D79F4F 100%);}
#cp10th #mes .main-title{position: relative;}
#cp10th #mes .main-title span{font-weight: 400; background: linear-gradient(180deg, #D79F4F 0%, #F4DB85 50%, #D79F4F 100%);}
#cp10th #mes .sub-title,
#cp10th #mes .main-title span{-webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1;}
#cp10th #mes .main-title::before,
#cp10th #mes .main-title::after {content: ""; position: absolute; top: 50%; height:auto; transform: translateY(-50%); aspect-ratio: 217/79; background: url('../../../images/campaign/10thcp/mes_h_bg.webp') no-repeat center / contain; -webkit-text-fill-color: initial;}
#cp10th #mes .main-title::before {left: 0;}
#cp10th #mes .main-title::after { right: 0; transform: translateY(-50%) scaleX(-1);}

#cp10th #mes ul {padding: 0; margin: 0; list-style: none;}
#cp10th #mes ul > li:nth-child(even) h3 {justify-content: flex-start;}
#cp10th #mes ul > li:nth-child(odd) h3 {justify-content: flex-end;}
#cp10th #mes ul h3 {display: flex; align-items: center; flex-wrap: wrap;  gap: 15px; color: var(--c-bu);}
#cp10th #mes ul h3 span {color: var(--c-bu); font-weight: 500; filter: drop-shadow(1px 1px 0px var(--c-wt)) drop-shadow(-1px -1px 0px var(--c-wt)) drop-shadow(-1px 1px 0px var(--c-wt)) drop-shadow(1px -1px 0px var(--c-wt));}
#cp10th #mes ul h3 strong {line-height: 1; position: relative; display: inline-block; z-index: 1; font-weight: 700; filter: drop-shadow(1px 1px 0px var(--c-wt)) drop-shadow(-1px -1px 0px var(--c-wt)) drop-shadow(-1px 1px 0px var(--c-wt)) drop-shadow(1px -1px 0px var(--c-wt)) drop-shadow(2px 2px 2px rgba(241, 217, 160, 1)); }
#cp10th #mes ul div{padding-left: 1em; padding-right: 1em; display: flex; align-items: center;}
#cp10th #mes ul p {margin: 0; color: var(--c-bu); line-height: 1.6; font-weight: 500;}

#cp10th #item h2 { text-align: center; flex-shrink: 0; /*min-height: 2.2em;*/}
#cp10th #item #acc5 + label h2{padding: 0.55em 0;}
#cp10th #item h2 .sale-title {justify-content: center; display: flex; align-items: center; gap: 5px; font-weight: 700; color: var(--c-bu);}
#cp10th #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));}
#cp10th #item h2 .sale-subtitle,
#cp10th #item h2 .sale-period { display: block; color: var(--c-bu); font-weight: 700;}
#cp10th #item nav{border-bottom: var(--c-bu) 1px solid;}
#cp10th #item nav div{display: flex; justify-content: center; background: var(--c-bu); padding: 0; flex-wrap: wrap; text-align: center;}
#cp10th #item nav div a{flex: 1; text-decoration: none; display: flex; align-items: center; justify-content: center; border-right:2px var(--c-gd) solid;}
#cp10th #item nav div a:last-child { border-right: none;}
#cp10th #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;}

#cp10th #zero-gravity h2 + p br,
#cp10th #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-bu); color: var(--c-wt); border: none; background-image: url('../../../images/campaign/10thcp/icon-cart.webp'); }
.--item-box .btn-detail { background: var(--c-wt); color: var(--c-bu); border: 1px solid var(--c-bu); background-image: url('../../../images/campaign/10thcp/icon-more.webp');}

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

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

@media (min-width: 768px) {
  #cp10th .--inr { max-width: calc(1176 * var(--cqw));}
  #cp10th .--box { max-width: calc(1000 * var(--cqw));}
  #cp10th #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)); }
  #cp10th #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));*/ }
  #cp10th #lead h2 { font-size: calc(43 * var(--cqw)); padding-bottom: calc(10 * var(--cqw));}
  #cp10th #lead h2 br{display: none;}
  #cp10th #lead p { font-size: calc(26 * var(--cqw));  text-align: center;}

  #cp10th #mes .sub-title{font-size: calc(38 * var(--cqw));}
  #cp10th #mes .main-title{font-size: calc(60 * var(--cqw));}
  #cp10th #mes .main-title::before,
  #cp10th #mes .main-title::after {width: calc(106 * var(--cqw));}
  #cp10th #mes .main-title::before {left: calc(-130 * var(--cqw));}
  #cp10th #mes .main-title::after { right: calc(-130 * var(--cqw)); transform: translateY(-50%) scaleX(-1);}
  #cp10th #mes .sub-title,
  #cp10th #mes .main-title span{filter: drop-shadow(calc(2 * var(--cqw)) calc(2 * var(--cqw)) 0px rgba(0, 0, 0, 0.5));}
  #cp10th #mes ul{background: url(../../../images/campaign/10thcp/mes_pc_bg.webp) 0 0/100% auto no-repeat; aspect-ratio: 2352/1989; padding-top: calc(95 * var(--cqw)); margin-top: calc(-30 * var(--cqw));}
  #cp10th #mes ul li{width:calc(712 * var(--cqw));}
  #cp10th #mes ul li div{aspect-ratio: 712/128; max-height: 128px; margin-top:calc(15* var(--cqw));}
  #cp10th #mes ul li:nth-child(1){margin-left:calc(85 * var(--cqw));}
  #cp10th #mes ul li:nth-child(2){margin-left:calc(320 * var(--cqw)); padding-top:calc(62 * var(--cqw));}
  #cp10th #mes ul li:nth-child(3){width:calc(802 * var(--cqw));}
  #cp10th #mes ul li:nth-child(3) div{aspect-ratio: 802/128;}
  #cp10th #mes ul li:nth-child(3){margin-left:calc(85 * var(--cqw)); padding-top:calc(52 * var(--cqw));}
  #cp10th #mes ul li:nth-child(3) h3{padding-right:calc(10 * var(--cqw));}
  #cp10th #mes ul li:nth-child(4){width:calc(752 * var(--cqw));}
  #cp10th #mes ul li:nth-child(4) div{aspect-ratio: 802/128;}
  #cp10th #mes ul li:nth-child(4){margin-left:calc(320 * var(--cqw)); padding-top:calc(62 * var(--cqw));}
  #cp10th #mes ul li:nth-child(4) div{margin-top:calc(22* var(--cqw));}
  #cp10th #mes ul h3 span {font-size:calc(19 * var(--cqw));}
  #cp10th #mes ul h3 strong {font-size:calc(28 * var(--cqw));}
  #cp10th #mes ul p {font-size:calc(19 * var(--cqw));}

  #cp10th #item { padding-top: calc(40 * var(--cqw)); padding-bottom: calc(50 * var(--cqw)); }
  #cp10th #item h2 .sale-title{font-size:calc(58 * var(--cqw)); line-height: 1;}
  #cp10th #item h2 .grad-text {font-size:calc(87 * var(--cqw));}
  #cp10th #item h2 .sale-subtitle{font-size:calc(58 * var(--cqw));}
  #cp10th #item h2 .sale-period {font-size:calc(33 * var(--cqw)); padding-bottom: calc(20 * var(--cqw));}
  #cp10th #item .tab-text {font-size:calc(30 * var(--cqw)); padding: calc(10 * var(--cqw)) 0;}
  #cp10th #item nav{margin-bottom: calc(30 * var(--cqw));}
  #cp10th #item nav div{max-width: 1000px; margin: 0 auto;}
  #cp10th #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)) 0 calc(20 * var(--cqw)) 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) {
  :root { --cqw: calc(100cqw / 375); }
  #cp10th .--inr { padding-left: 4.5%; padding-right: 4.5%; }
  #cp10th #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)); }
  #cp10th #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));*/ }
  #cp10th #lead h2 { font-size: calc(21 * var(--cqw)); padding-bottom: calc(10 * var(--cqw));}
  #cp10th #lead p { font-size: calc(16 * var(--cqw)); }
  #cp10th #lead p br{display: none;}
  
  #cp10th #mes.--inr{padding-left: 0; padding-right: 0;}
  #cp10th #mes .sub-title{font-size: calc(19 * var(--cqw));}
  #cp10th #mes .main-title{font-size: calc(30 * var(--cqw));}
  #cp10th #mes .main-title::before,
  #cp10th #mes .main-title::after {width: calc(53 * var(--cqw));}
  #cp10th #mes .main-title::before {left: calc(-65 * var(--cqw));}
  #cp10th #mes .main-title::after { right: calc(-65 * var(--cqw)); transform: translateY(-50%) scaleX(-1);}
  #cp10th #mes .sub-title,
  #cp10th #mes .main-title span{filter: drop-shadow(calc(1.5 * var(--cqw)) calc(1.5 * var(--cqw)) 0px rgba(0, 0, 0, 0.5));}
  #cp10th #mes ul{background: url(../../../images/campaign/10thcp/mes_sp_bg.webp) 0 0/100% auto no-repeat; aspect-ratio: 786/1206; padding-top: calc(35* var(--cqw));}

  #cp10th #mes ul li{width:calc(220 * var(--cqw));}
  #cp10th #mes ul li div{aspect-ratio: 220/75; margin-top:calc(8* var(--cqw)); padding-left: .5em; padding-right: .5em;}
  #cp10th #mes ul li:nth-child(1){margin-left:calc(20 * var(--cqw));}
  #cp10th #mes ul li:nth-child(1) h3{padding-right:calc(0 * var(--cqw)); text-align: right;}
  #cp10th #mes ul li:nth-child(2){margin-left:calc(140 * var(--cqw)); padding-top:calc(23 * var(--cqw));}
  #cp10th #mes ul li:nth-child(3){width:calc(240 * var(--cqw));}
  #cp10th #mes ul li:nth-child(3) div{aspect-ratio: 240/75;}
  #cp10th #mes ul li:nth-child(3) div br{display: none;}
  #cp10th #mes ul li:nth-child(3){margin-left:calc(20 * var(--cqw)); padding-top:calc(23 * var(--cqw));}
  #cp10th #mes ul li:nth-child(3) h3{padding-right:calc(0 * var(--cqw)); text-align: right;}
  #cp10th #mes ul li:nth-child(4){margin-left:calc(140 * var(--cqw)); padding-top:calc(23 * var(--cqw));}
  #cp10th #mes ul li:nth-child(4) div{margin-top:calc(10* var(--cqw)); margin-left:calc(5 * var(--cqw));}
  #cp10th #mes ul h3{display: block;}
  #cp10th #mes ul h3 span {font-size:calc(10 * var(--cqw)); display: block;}
  #cp10th #mes ul h3 strong {font-size:calc(15 * var(--cqw)); display: block;}
  #cp10th #mes ul p {font-size:calc(11 * var(--cqw));}

  #cp10th #item { padding-top: calc(25 * var(--cqw)); padding-bottom: calc(50 * var(--cqw)); }
  #cp10th #item h2 .sale-title{font-size:calc(24 * var(--cqw)); line-height: 1;}
  #cp10th #item h2 .grad-text {font-size:calc(36 * var(--cqw));}
  #cp10th #item h2 .sale-subtitle{font-size:calc(24 * var(--cqw));}
  #cp10th #item h2 .sale-period {font-size:calc(16 * var(--cqw)); padding-bottom: calc(25 * var(--cqw));}
  #cp10th #item nav{margin-bottom: calc(20 * var(--cqw)); width:110%; position: relative; left: -5%;}
  #cp10th #item nav div{max-width: 90%; margin: 0 auto;}
  #cp10th #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)); }
}