@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; }
#soc2026-2 { container-type: inline-size; font-family: "Noto Sans JP", "Inter", sans-serif; background: var(--c-wt); --c-wt: #fff; --c-cp: #c90436; --c-cp2: #aa0a33; --c-bu: #1d2b4b; --c-lbu: #889bc5; --c-gn: #0e7986; --c-yl: #f2f2f2; --c-yl2: #d3d3d3; --c-yl3: #e8e8e8; --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-gb: #555; --c-gb2: #333; --c-gd: #c9a960; --c-yl2: #d3d3d3; --c-ly: #f6f5f3; --c-lg: #d0d0d0; --c-lg2:#b8b8b8;  --c-gl: #727271; --c-gy: #9c9c9c; width: 100%; }
#soc2026-2 *, #soc2026-2 *::before, #soc2026-2 *::after { box-sizing: border-box; margin: 0; padding: 0; }

.--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; background: var(--c-gn);}
.--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 { 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; background-color: var(--c-yl); }
/*.--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  var(--c-bu);/*border: 1px solid transparent;*/ color: var(--c-gd2); padding-right: 2.25em!important; border-radius: 20px; background: url('../../../images/campaign/aogaku-sleep-cp2026/icon_link_b.webp') var(--c-wt) no-repeat calc(100% - .75em) .25em  / auto 75%; /*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/aogaku-sleep-cp2026/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/aogaku-sleep-cp2026/icon-more.webp');}

#video-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: none; justify-content: center; align-items: center; z-index: 9999; padding: 15px; opacity: 0; transition: opacity 0.3s ease; }
#video-modal div { position: relative; width: 100%; max-width: 800px; aspect-ratio: 16 / 9; transform: scale(0.9); transition: transform 0.3s ease; }
#video-modal iframe { width: 100%; height: 100%; border: none; }
#video-modal button { position: absolute; top: -45px; right: 0; background: none; border: none; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; }


#soc2026-2 .item-box > h2 { background: var(--c-bu); box-sizing: border-box; width: 100%; text-align: left; margin: 0; /*font-size: clamp(17px, calc(17px + (100vw - 375px) * (25 - 17) / (1280 - 375)), 25px);*/ color:var(--c-wt); padding: .5em 0;}
#soc2026-2 .item-box > h2 span{display: block; color:var(--c-wt);}

#soc2026-2 .--inr { width: 100%; margin: 0 auto; display: block; }
#soc2026-2 section{max-width: 1280px; margin: 0 auto; width: 100%; box-sizing: border-box;}
#soc2026-2 section#bar{max-width: none;}

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

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

#soc2026-2 h2{/*font-size: clamp(21px, calc(21px + (100vw - 375px) * (28 - 21) / (1280 - 375)), 28px); margin-bottom: 1em;*/ color:var(--c-bu); font-weight: 700; letter-spacing: 0.02em; margin-bottom: 1em;}
#soc2026-2 .sub-ttl{/*font-size: clamp(14px, calc(14px + (100vw - 375px) * (22 - 14) / (1280 - 375)), 22px);*/ color:var(--c-gn); font-weight: 700; font-family: "Inter", sans-serif;}

#soc2026-2 .camp-link{ background: var(--c-wt); width: 100%; padding: 1em 0; }
#soc2026-2 .camp-link p { text-align: center; }
#soc2026-2 .camp-link p a{/*font-size: clamp(15px, calc(15px + (100vw - 375px) * (21 - 15) / (1280 - 375)), 21px);*/ padding: 0.8em 1.2em; display: inline-block; text-align: center; text-decoration: none; box-sizing: border-box; width: 100%; max-width: 640px; background: var(--c-cp); color: var(--c-wt); font-weight: bold; letter-spacing: 0.05em; border-radius: 1.2em; box-shadow: 2px 3px 0px var(--c-cp2); transition: all 0.3s ease; margin: 0 auto;}
#soc2026-2 .camp-link p a:hover{opacity: 0.8;}
/*#soc2026-2 .camp-link p a:active {transform: translate(2px, 3px); box-shadow: 0px 0px 0px #94001f;}*/

#soc2026-2 .btn-link {/*font-size: clamp(14px, calc(14px + (100vw - 375px) * (22 - 14) / (1280 - 375)), 22px);*/ display: flex; justify-content: center; align-items: center; gap: 0.5em; text-decoration: none; box-sizing: border-box; width: 100%; padding: 0.7em; background: var(--c-bu); color: var(--c-wt); font-weight: 500; letter-spacing: 0.05em; transition: opacity 0.3s ease; margin: 1em 0;}
#soc2026-2 .btn-link span {display: inline-block;}
#soc2026-2 .btn-link::after {content:''; width: 1.14em; height: 1.14em; background: url('../../../images/campaign/aogaku-sleep-cp2026/icon_link.webp') no-repeat center top / 100% auto; vertical-align: middle; }
#soc2026-2 .btn-link:hover { opacity: 0.8; }

#soc2026-2 .btn-ancer { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; margin: 0 auto; font-weight: bold; color: #222; text-decoration: none; border: 1px solid var(--c-bu); }
#soc2026-2 .btn-ancer::after { content: "▼";; display: inline-block; margin-left: 1em; }

#soc2026-2 #categories .label {display: block; text-align: center; font-weight: bold; margin-bottom: .5em;  /*font-size: clamp(16px, calc(16px + (100vw - 375px) * (22 - 16) / (1280 - 375)), 22px);*/}
#soc2026-2 #categories ul {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row; flex-wrap: nowrap;}
#soc2026-2 #categories li {flex: 1; min-width: 0;}
#soc2026-2 #categories li a {/*font-size: clamp(15px, calc(15px + (100vw - 375px) * (21 - 15) / (1280 - 375)), 21px);*/ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 4.8em; padding: 0.6em 0; box-sizing: border-box; background: var(--c-wt); color: var(--c-gb2); border: 1px solid var(--c-gb2); text-decoration: none; font-weight: bold; line-height: 1.3; word-break: break-all; transition: background-color 0.2s ease, opacity 0.2s ease;}
#soc2026-2 #categories li a::after { content: "▼"; display: block; margin-top: 0.3em; /*font-size: 0.65em;*/ color: var(--c-gb2);}
#soc2026-2 #categories li a:hover {opacity: 0.8;}

#soc2026-2 #message ul { list-style: none; display: flex; flex-direction: row;}
#soc2026-2 #message ul li { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--c-lg2);}
#soc2026-2 #message ul li figure { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--c-c3); cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#soc2026-2 #message ul li figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity 0.3s; }
#soc2026-2 #message ul li figure:hover img { opacity: 0.8; }
#soc2026-2 #message ul li figure i { position: relative; width: 40px; height: 40px; background: var(--c-cp); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1; }
#soc2026-2 #message ul li figure i::after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent var(--c-wt); margin-left: 4px; }
#soc2026-2 #message ul li div { width: 100%; }
#soc2026-2 #message ul li div blockquote { font-weight: bold; color: var(--c-bu); line-height: 1.3; margin-bottom: 8px; }
#soc2026-2 #message ul li div cite { display: block; color: var(--c-bu); font-style: normal; line-height: 1.4; }

#soc2026-2 .osusume { background: var(--c-gn); padding: 1em 0;}
#soc2026-2 .osusume .wapper { background: var(--c-wt); width: 100%; }
#soc2026-2 .osusume h3 { display: block; font-weight: bold; color: var(--c-wt); margin-bottom: .5em; }
#soc2026-2 .osusume h4 { font-weight: bold; color:var(--c-gb2); line-height: 1.4; margin-bottom: .5em; }
#soc2026-2 .osusume article { display: flex; align-items: center; }
#soc2026-2 .osusume figure { display: block; flex-shrink: 0; }
#soc2026-2 .osusume figure img { width: 100%; height: auto; display: block; }
#soc2026-2 .osusume aside { display: flex; flex-direction: column; }
#soc2026-2 .osusume aside > div { display: flex; flex-direction: column; }
#soc2026-2 .osusume aside del { display: block; color: var(--c-bu); text-decoration: line-through; line-height: 1.2; }
#soc2026-2 .osusume aside p { display: flex; align-items: center; }
#soc2026-2 .osusume aside strong { font-weight: bold; color: var(--c-cp); line-height: 1; }
#soc2026-2 .osusume aside em { font-style: normal; font-weight: bold; color: var(--c-wt); background-color: var(--c-cp); display: inline-flex; align-items: center; justify-content: center; text-align: center; }
#soc2026-2 .osusume a { display: inline-flex; align-items: center; justify-content: center; color: var(--c-wt); font-weight: bold; text-decoration: none; background-color: var(--c-gb2); transition: opacity 0.3s; text-align: center; }
#soc2026-2 .osusume a:hover { opacity: 0.8; }

#soc2026-2 #message2 img{width: 100%;}

#soc2026-2 #reason .reason-header { text-align: center; }
#soc2026-2 #reason .reason-header h2 { font-weight: bold; color: var(--c-bu); line-height: 1.4; display: block; }
#soc2026-2 #reason .reason-header h2 span { display: block; font-weight: bold; color: var(--c-bu); }
#soc2026-2 #reason .reason-header h2 img { display: block; height: auto; margin: 0 auto; }
#soc2026-2 #reason .reason-header p { line-height: 1.6; color: var(--c-bu); }
#soc2026-2 #reason ul { list-style: none; display: flex; flex-direction: column; }
#soc2026-2 #reason ul li { background: #f4f7ff; border: 1px solid var(--c-lg2); border-radius: 6px; display: flex; flex-direction: column; }
#soc2026-2 #reason ul li > div:nth-of-type(1) { display: flex; align-items: center; }
#soc2026-2 #reason ul li figure img { width: 100%; height: auto; display: block; }
#soc2026-2 #reason ul li h3 { font-weight: bold; color: var(--c-bu); line-height: 1.3; }
#soc2026-2 #reason ul li > div:nth-of-type(1) p { color: var(--c-bu); line-height: 1.4; }
#soc2026-2 #reason ul li > div:nth-of-type(2) { display: flex; flex-direction: column; }
#soc2026-2 #reason ul li h4 { font-weight: bold; line-height: 1.2; color: var(--c-lbu); }
#soc2026-2 #reason ul li > div:nth-of-type(2) p { line-height: 1.6; color: var(--c-bu); }

#soc2026-2 #coupon-s { background-color: var(--c-bu); }
#soc2026-2 #coupon-s .sub-ttl { color:var(--c-wt); }
#soc2026-2 #coupon-s .--inr > div { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
#soc2026-2 #coupon-s .--inr > div p { color: var(--c-wt);}
#soc2026-2 #coupon-s h3 { font-weight: bold; color: var(--c-wt); line-height: 1.4; }
#soc2026-2 #coupon-s h3 span { color: var(--c-cp); font-weight: bold; }
#soc2026-2 #coupon-s a { display: inline-flex; align-items: center; justify-content: center; background-color: #fff; color: var(--c-bu); text-decoration: none; font-weight: bold; text-align: center; transition: opacity 0.3s; }
#soc2026-2 #coupon-s a:hover { opacity: 0.8; }

#soc2026-2 #athlete-voices p{color: var(--c-bu);}
#soc2026-2 #athlete-voices ul { list-style: none; display: flex; flex-direction: column; }
#soc2026-2 #athlete-voices ul li { border: 1px solid var(--c-lg2); display: flex; }
#soc2026-2 #athlete-voices ul li figure { position: relative; width: 100%; aspect-ratio: 16 / 9; background-color: #000; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#soc2026-2 #athlete-voices ul li figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity 0.3s; }
#soc2026-2 #athlete-voices ul li figure:hover img { opacity: 0.7; }
#soc2026-2 #athlete-voices ul li figure i { position: relative; width: 40px; height: 40px; background: var(--c-cp); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1; }
#soc2026-2 #athlete-voices ul li figure i::after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent var(--c-wt); margin-left: 4px; }
#soc2026-2 #athlete-voices ul li div { display: flex; flex-direction: column; }
#soc2026-2 #athlete-voices ul li div span { display: block; font-weight: bold; color: #1a1a1a; }
#soc2026-2 #athlete-voices ul li div blockquote { font-weight: bold; color: #3d3d3d; line-height: 1.4; }
#soc2026-2 #athlete-voices ul li div p { color: #383838; line-height: 1.6; text-align: justify; }

#soc2026-2 #coupon-detail {background: var(--c-bu); margin-bottom: 2em; padding: 1em 0; }
#soc2026-2 #coupon-detail .--inr {display: flex; flex-direction: column;}
#soc2026-2 #coupon-detail .sub-ttl { color: var(--c-wt);}
#soc2026-2 #coupon-detail .btn-copy {margin-bottom: 1em; width: 100%; display: flex; justify-content: center; }
#soc2026-2 #coupon-detail .js-copy-btn {/*font-size: clamp(18px, calc(18px + (100vw - 375px) * (22 - 18) / (1280 - 375)), 22px);*/  background: var(--c-cp); color: var(--c-wt); font-weight: 700; width:100%; max-width: 440px; padding: 0.7em; border-radius: 1.2em; display: flex; align-items: center; justify-content: center; box-sizing: border-box; cursor: pointer; border:none; outline: none; transition: opacity 0.3s; }
#soc2026-2 #coupon-detail .js-copy-btn:hover { opacity: 0.8; }
#soc2026-2 #coupon-detail .ticket-area { margin-bottom: 1.5em; width: 100%; box-sizing: border-box; display: flex; justify-content: center; }
#soc2026-2 #coupon-detail .ticket-area img { width: 100%; max-width: 500px; }
#soc2026-2 #coupon-detail .note{/*font-size: clamp(16px, calc(16px + (100vw - 375px) * (24 - 16) / (1280 - 375)), 24px);*/ color: var(--c-wt); line-height: 2; padding-bottom: 1em;}
#soc2026-2 #coupon-detail .note span{/*font-size: clamp(12px, calc(12px + (100vw - 375px) * (20 - 12) / (1280 - 375)), 20px);*/ display:block; line-height: 1.5;}

#soc2026-2 #trial { padding: 0 0 1em; }
#soc2026-2 #trial .flow .num {/*font-size: clamp(30px, calc(30px + (100vw - 375px) * (30 - 30) / (1280 - 375)), 30px);*/ color:var(--c-gn); font-weight: 700; font-family: "Inter", sans-serif; background: var(--c-bu); color: var(--c-wt); border-radius: 50%; width:1.25em; height:1.25em; display: flex; align-items: center; justify-content: center; box-sizing: border-box; flex-shrink: 0;}
#soc2026-2 #trial .flow .txt {/*font-size: clamp(17px, calc(17px + (100vw - 375px) * (20 - 17) / (1280 - 375)), 20px);*/ color: var(--c-bu); line-height: 1.3; font-weight: 700; margin: 0; text-align: center; }
#soc2026-2 #trial .flow .txt span {/* font-size: clamp(14px, calc(14px + (100vw - 375px) * (18 - 14) / (1280 - 375)), 18px);*/  font-weight: 400; display: block; margin: 0.25em 0;}

#soc2026-2 #trial .flow { list-style: none; display: flex; align-items: center; width: 100%; box-sizing: border-box; }
#soc2026-2 #trial .flow li { background: var(--c-yl); display: flex; align-items: center; box-sizing: border-box; padding: .5em;}

#soc2026-2 #faq { padding: 0 0 2em; }
#soc2026-2 #faq .qa-lst { width: 100%; box-sizing: border-box; }
#soc2026-2 #faq dt {/*font-size: clamp(17px, calc(17px + (100vw - 375px) * (20 - 17) / (1280 - 375)), 20px);*/ line-height: 1.4; letter-spacing: 0.01em; margin: 1.2em 0 .5em 0; color: var(--c-bu); font-weight: 700; width: 100%; box-sizing: border-box; }
#soc2026-2 #faq dd {/*font-size: clamp(15px, calc(15px + (100vw - 375px) * (18 - 15) / (1280 - 375)), 18px);*/ line-height: 1.6; padding: 0 0 1.2em 1.75em; color: var(--c-bu); font-weight: 400; margin: 0; width: 100%; box-sizing: border-box; border-bottom: 1px solid var(--c-gl); }
#soc2026-2 #faq dt:first-of-type { margin-top: 0.5em; }

#bottom-link{position: fixed; bottom: -1px; left: -1px; width: calc(100% + 2px)!important; z-index: 9999; background: var(--c-wt); /*box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);*/ text-align: center; padding: 10px; max-width: initial!important;}

@media (min-width: 768px) {
.--sp{display: none;}
.--item-box {/*border-radius: calc(20 * var(--cqw)); margin-bottom: calc(30 * var(--cqw))!important; padding: 30px 0!important;*/  padding: 2em 0!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(0 * var(--cqw)) solid transparent; border-radius: calc(10 * var(--cqw));}
.--item-box ul.list li + li{margin-top: calc(10 * var(--cqw))!important;/*margin-top: calc(25 * var(--cqw))!important;*/}
.--item-box .first {padding: calc(20 * var(--cqw)) calc(20 * var(--cqw)) 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(21 * var(--cqw));/*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(10 * var(--cqw)) calc(20 * var(--cqw)) !important;/*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(20 * var(--cqw)); /*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; }
.--item-box .--cut{opacity: 0; pointer-events: none;}

#soc2026-2 h2{font-size:calc(28 * var(--cqw));}
#soc2026-2 .sub-ttl{font-size:calc(22 * var(--cqw));}
#soc2026-2 .--item-box h2{font-size:calc(25 * var(--cqw));}
#soc2026-2 .--item-box .sub-ttl{font-size:calc(22 * var(--cqw));}

#soc2026-2 .camp-link p a{font-size:calc(21 * var(--cqw));}
#soc2026-2 .btn-link {font-size:calc(22 * var(--cqw));}
#soc2026-2 .btn-ancer { font-size:calc(22 * var(--cqw));  padding: calc(12 * var(--cqw)) 0 ;}

#soc2026-2 #message { padding: 2em 0; }
#soc2026-2 #message p{font-size:calc(22 * var(--cqw));}
#soc2026-2 #message ul { margin: 1em 0; gap: 14px;}
#soc2026-2 #message ul li { flex-direction: row; gap: 20px; align-items: flex-start; padding: calc(15 * var(--cqw)) ; }
#soc2026-2 #message ul li figure { width: 45%; flex-shrink: 0; }
#soc2026-2 #message ul li div { width: 55%; padding-top: 0; }
#soc2026-2 #message ul li div blockquote { font-size:calc(19 * var(--cqw)); margin-bottom: 10px; }
#soc2026-2 #message ul li div cite { font-size:calc(16 * var(--cqw)); }

#soc2026-2 .osusume { padding: 1em 0; }
#soc2026-2 .osusume .wapper { padding: 1em 3em; }
#soc2026-2 .osusume h3 { font-size:calc(22 * var(--cqw)); }
#soc2026-2 .osusume h4 { font-size:calc(24 * var(--cqw));}
#soc2026-2 .osusume h4 br { display: none; }
#soc2026-2 .osusume article { flex-direction: row; justify-content: flex-start; }
#soc2026-2 .osusume figure { width: 30%; margin-right: calc(30 * var(--cqw)); }
#soc2026-2 .osusume aside { flex-direction: row; align-items: center; margin-left: auto; gap: 3em; }
#soc2026-2 .osusume aside > div { gap: 2px; }
#soc2026-2 .osusume aside del { font-size:calc(21 * var(--cqw)); padding-left: 2px; }
#soc2026-2 .osusume aside p { gap: 8px; }
#soc2026-2 .osusume aside strong { font-size:calc(43 * var(--cqw)) }
#soc2026-2 .osusume aside em { font-size:calc(25 * var(--cqw)); padding: 0 10px; border-radius: 4px; }
#soc2026-2 .osusume a { padding: calc(8 * var(--cqw)) calc(50 * var(--cqw)); font-size:calc(25 * var(--cqw)); border-radius: calc(27 * var(--cqw)); flex-shrink: 0; }

#soc2026-2 #message2 { padding: 2em 0 1em 0; }
#soc2026-2 #message2 p{font-size:calc(22 * var(--cqw)); margin-bottom: 1em;}

#soc2026-2 #reason { padding: 2em 0; }
#soc2026-2 #reason .reason-header h2 { font-size: calc(30 * var(--cqw)); }
#soc2026-2 #reason .reason-header h2 span { font-size: calc(24 * var(--cqw)); margin-bottom: calc(0 * var(--cqw)); }
#soc2026-2 #reason .reason-header h2 img { width: 70%; margin-bottom: .5em; }
#soc2026-2 #reason .reason-header p { font-size: calc(22 * var(--cqw)); text-align: left; margin-bottom: 1em;}
#soc2026-2 #reason ul { gap: 1em; }
#soc2026-2 #reason ul li { padding: 1em 2em; }
#soc2026-2 #reason ul li > div:nth-of-type(1) { gap: 20px; margin-bottom: 20px; padding-bottom: 16px; }
#soc2026-2 #reason ul li figure { width: 33%; flex-shrink: 0; }
#soc2026-2 #reason ul li h3 { font-size: calc(27 * var(--cqw)); margin-bottom: 1em; }
#soc2026-2 #reason ul li > div:nth-of-type(1) p { font-size: calc(26 * var(--cqw)); }
#soc2026-2 #reason ul li > div:nth-of-type(2) { gap: 16px; }
#soc2026-2 #reason ul li h4 { font-size: calc(20 * var(--cqw)); margin-bottom: .5em; }
#soc2026-2 #reason ul li > div:nth-of-type(2) p { font-size: calc(21 * var(--cqw)); }

#soc2026-2 #coupon-s { padding: 1em; }
#soc2026-2 #coupon-s .--inr > div p { font-size: calc(18 * var(--cqw)); margin-bottom:.25em; }
#soc2026-2 #coupon-s h3 { font-size: calc(27 * var(--cqw)); margin-bottom: .5em; }
#soc2026-2 #coupon-s a { padding: .5em 3em; font-size: calc(21 * var(--cqw)); border-radius: 3em; }

#soc2026-2 #categories{padding: 2em 0;}
#soc2026-2 #categories .label {font-size:calc(24 * var(--cqw));}
#soc2026-2 #categories ul {gap: 8px;}
#soc2026-2 #categories li a {font-size:calc(17 * var(--cqw));}
#soc2026-2 #categories li a::after {font-size:calc(14 * var(--cqw));}

#soc2026-2 #athlete-voices { padding: 2em 0; }
#soc2026-2 #athlete-voices p{font-size:calc(22 * var(--cqw)); margin-bottom: 1em;}
#soc2026-2 #athlete-voices ul { gap: 1em; }
#soc2026-2 #athlete-voices ul li { padding: 1em; flex-direction: row; gap: 1em; /*align-items: flex-start;*/ align-items: center;}
#soc2026-2 #athlete-voices ul li figure { width: 45%; flex-shrink: 0; }
#soc2026-2 #athlete-voices ul li div { width: 55%; }
#soc2026-2 #athlete-voices ul li div span { font-size:calc(21 * var(--cqw)); margin-bottom: .25em; }
#soc2026-2 #athlete-voices ul li div blockquote { font-size:calc(24 * var(--cqw)); margin-bottom: .5em; }
#soc2026-2 #athlete-voices ul + h2{margin-top: 1em;}

#soc2026-2 #coupon-detail .js-copy-btn {font-size:calc(22 * var(--cqw));}
#soc2026-2 #coupon-detail .note{font-size:calc(24 * var(--cqw));}
#soc2026-2 #coupon-detail .note span{font-size:calc(20 * var(--cqw));}

#soc2026-2 #trial .flow .num {font-size:calc(30 * var(--cqw));}
#soc2026-2 #trial .flow .txt {font-size:calc(20 * var(--cqw));}
#soc2026-2 #trial .flow .txt span {font-size:calc(18 * var(--cqw));}

#soc2026-2 #trial .flow { gap: 20px; justify-content: space-between; }
#soc2026-2 #trial .flow li { width: 320px; height: 100px; padding: 0; gap: 15px; border-radius: 4px; justify-content: center; }

#soc2026-2 #faq dt {font-size:calc(20 * var(--cqw));}
#soc2026-2 #faq dd {font-size:calc(18 * var(--cqw));}

}

@media (min-width: 1024px) {
  #soc2026-2 .--inr { max-width: 1024px; padding-left: 12px; padding-right: 12px; }
  #soc2026-2 #bar { min-height: 30px; font-size: 17.5px; padding-top: 4px; padding-bottom: 4px; }
}

@media (max-width: 1023px) and (min-width: 768px) {
  :root { --cqw: calc(100cqw / 1024); }
  #soc2026-2 .--inr { max-width: calc(1024 * var(--cqw)); padding-left: 1.5%; padding-right: 1.5%; }
  #soc2026-2 #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)); }
}

@media (max-width: 767px) {
:root { --cqw: calc(100cqw / 375); }

.--pc{display: none;}
.--item-box {/*border-radius: calc(10 * var(--cqw)); margin-bottom: calc(20 * var(--cqw))!important;*/ padding: 20px 0!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(0 * var(--cqw)) solid transparent; border-radius: calc(10 * var(--cqw));}
.--item-box ul.list li + li{margin-top: calc(5 * var(--cqw))!important;/*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(10 * var(--cqw)) calc(10 * var(--cqw)) !important;/*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)); }
.--item-box .--cut{ height: 0; opacity: 0; pointer-events: none; padding-bottom: 1em;;}

#soc2026-2 h2{font-size:calc(21 * var(--cqw));}
#soc2026-2 .sub-ttl{font-size:calc(14 * var(--cqw));}
#soc2026-2 .--item-box h2{font-size:calc(17 * var(--cqw));}

#soc2026-2 .--inr { padding-left: 4.5%; padding-right: 4.5%; }
#soc2026-2 #coupon-detail .js-copy-btn {/*max-width: 280px;*/ padding: .5em;}

#soc2026-2 .camp-link p a{font-size:calc(15 * var(--cqw));}
#soc2026-2 .btn-link {font-size:calc(14 * var(--cqw));}
#soc2026-2 .btn-ancer { font-size:calc(14 * var(--cqw));  padding: calc(6 * var(--cqw)) 0 ;}

#soc2026-2 #message { padding: 1em 0; }
#soc2026-2 #message p{font-size:calc(14 * var(--cqw));}

#soc2026-2 #message ul { gap: calc(10 * var(--cqw)); margin: 1em 0; }
#soc2026-2 #message ul li { padding: calc(10 * var(--cqw)); }
#soc2026-2 #message ul li figure:hover img { opacity: 0.7; }
#soc2026-2 #message ul li div { width: 100%; padding-top: 1em; }
#soc2026-2 #message ul li div blockquote { font-size:calc(13 * var(--cqw)); }
#soc2026-2 #message ul li div cite { font-size:calc(11 * var(--cqw)); }

#soc2026-2 .osusume { padding: 1em 0; }
#soc2026-2 .osusume h3 {font-size:calc(14 * var(--cqw));}
#soc2026-2 .osusume .wapper { padding: calc(10 * var(--cqw)); }
#soc2026-2 .osusume h4 { font-size: calc(16 * var(--cqw));}
#soc2026-2 .osusume article { flex-direction: row; justify-content: space-between; gap: 12px; }
#soc2026-2 .osusume figure { width: 47%; } /* スマホ画面の40%を画像領域に */
#soc2026-2 .osusume aside { width: 53%; gap: 10px; } /* 残り56%を価格とボタン（縦並び）に */
#soc2026-2 .osusume aside del { font-size: calc(12 * var(--cqw)); }
#soc2026-2 .osusume aside p { gap: 4px; }
#soc2026-2 .osusume aside strong { font-size: calc(22 * var(--cqw)); }
#soc2026-2 .osusume aside em { font-size: calc(13 * var(--cqw)); padding: 0 calc(7 * var(--cqw)); border-radius: 3px; }
#soc2026-2 .osusume a { padding: calc(4 * var(--cqw)); font-size: calc(13 * var(--cqw)); border-radius: calc(14 * var(--cqw)); width:75%; margin: 0 auto;}

#soc2026-2 #message2 { padding: 1em 0 .5em 0; }
#soc2026-2 #message2 p{font-size:calc(14 * var(--cqw)); margin-bottom: 1em;}

#soc2026-2 #reason { padding: 1em 0; }
#soc2026-2 #reason .reason-header h2 { font-size: calc(18 * var(--cqw)); }
#soc2026-2 #reason .reason-header h2 span { font-size: calc(16 * var(--cqw)); margin-bottom: 0.25em; }
#soc2026-2 #reason .reason-header h2 img { width: 70%; margin-bottom: 12px; }
#soc2026-2 #reason .reason-header p { font-size: calc(14 * var(--cqw)); text-align: left; margin-bottom: 1em;}
#soc2026-2 #reason ul { gap: 16px; }
#soc2026-2 #reason ul li { padding: 15px; }
#soc2026-2 #reason ul li > div:nth-of-type(1) { gap: 12px; margin-bottom: 15px; padding-bottom: 12px; }
#soc2026-2 #reason ul li figure { width: 35%; flex-shrink: 0; }
#soc2026-2 #reason ul li h3 { font-size: calc(18 * var(--cqw)); margin-bottom: .25em; }
#soc2026-2 #reason ul li > div:nth-of-type(1) p { font-size: calc(13 * var(--cqw)); }
#soc2026-2 #reason ul li > div:nth-of-type(2) { gap: 12px; }
#soc2026-2 #reason ul li h4 { font-size: calc(11 * var(--cqw)); margin-bottom: 2px; }
#soc2026-2 #reason ul li > div:nth-of-type(2) p { font-size: calc(12 * var(--cqw)); }

#soc2026-2 #coupon-s { padding: 1em 0; }
#soc2026-2 #coupon-s .--inr > div p { font-size:calc(11 * var(--cqw)); margin-bottom: .25em; }
#soc2026-2 #coupon-s h3 { font-size:calc(16 * var(--cqw)); margin-bottom: 1em; }
#soc2026-2 #coupon-s a { padding: .5em 3em; font-size: calc(13 * var(--cqw)); border-radius: 3em; }

#soc2026-2 #categories{padding: 1em 0;}
#soc2026-2 #categories .--inr{padding: 0 3%;}
#soc2026-2 #categories .label {font-size:calc(17 * var(--cqw));}
#soc2026-2 #categories ul {gap: 4px;}
#soc2026-2 #categories li a {font-size:calc(12 * var(--cqw));}
#soc2026-2 #categories li a::after {font-size:calc(10 * var(--cqw));}

#soc2026-2 #athlete-voices { padding: 1em 0; }
#soc2026-2 #athlete-voices p{font-size:calc(14 * var(--cqw)); margin-bottom: 1em;}
#soc2026-2 #athlete-voices ul { gap: 1em; }
#soc2026-2 #athlete-voices ul li { padding: 12px; flex-direction: column; }
#soc2026-2 #athlete-voices ul li figure { margin-bottom: 12px; }
#soc2026-2 #athlete-voices ul li div { width: 100%; }
#soc2026-2 #athlete-voices ul li div span { font-size:calc(13 * var(--cqw)); margin-bottom: .25em; }
#soc2026-2 #athlete-voices ul li div blockquote { font-size:calc(17 * var(--cqw)); margin-bottom: .5em; }
#soc2026-2 #athlete-voices ul + h2{margin-top: 1em;}

#soc2026-2 #coupon-detail .js-copy-btn {font-size:calc(18 * var(--cqw));}
#soc2026-2 #coupon-detail .note{font-size:calc(15.5 * var(--cqw));}
#soc2026-2 #coupon-detail .note span{font-size:calc(12 * var(--cqw));}

#soc2026-2 #trial .flow .num {font-size:calc(30 * var(--cqw));}
#soc2026-2 #trial .flow .txt {font-size:calc(17 * var(--cqw));}
#soc2026-2 #trial .flow .txt span {font-size:calc(14 * var(--cqw));}

#soc2026-2 #trial .flow { flex-direction: column; gap: 1em; }
#soc2026-2 #trial .flow li { /*width: 300px; height: 80px; padding: 0.5em;*/ padding: 0.7em 2.3em; gap: 15px; border-radius: 4px; justify-content: flex-start; }
#soc2026-2 #trial .flow .txt {width:calc(154 * var(--cqw));}
#soc2026-2 #trial .flow .num{/*margin-left: 1em;*/}

#soc2026-2 #faq dt {font-size:calc(17 * var(--cqw));}
#soc2026-2 #faq dd {font-size:calc(15 * var(--cqw));}

}