@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 { container-type: inline-size; font-family: "Noto Sans JP", "Inter", sans-serif; background: var(--c-wt); --c-wt: #fff; --c-bu: #1d2b4b; --c-gd: #c9a960; --c-yl: #f3f3f3; --c-yl2: #d3d3d3; --c-ly: #f6f5f3; --c-lg: #d0d0d0; -c-gb: #555; --c-gl: #727271; --c-gy: #9c9c9c; --c-cp: #c8395e;  --c-cp2: #e12953; width: 100%; }
#soc2026 *, #soc2026 *::before, #soc2026 *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

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

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

#soc2026 #lead { background: var(--c-wt); width: 100%; }
#soc2026 #lead p { color: var(--c-bu); font-weight: 500; width: 100%; line-height: 1.6; }

#soc2026 #benefits { background: var(--c-wt); width: 100%; border-top: 1px solid var(--c-lg); }
#soc2026 #benefits h2 { color: var(--c-bu); font-weight: 700; text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
#soc2026 #benefits h2 span { color: var(--c-gd); font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: 0.08em; line-height: 1.5; }
#soc2026 #benefits ul { list-style: none; display: flex; flex-direction: column; counter-reset: benefit-counter; width: 100%; margin: 0 auto; }
#soc2026 #benefits ul li { background: var(--c-yl); width: 100%; display: flex; flex-direction: column; position: relative; counter-increment: benefit-counter; }
#soc2026 #benefits ul li::before { content: counter(benefit-counter); color: var(--c-gd); font-weight: 800; font-family: "Inter", sans-serif; font-style: italic; position: absolute; line-height: 0.8; }
#soc2026 #benefits ul li h3 { color: var(--c-bu); font-weight: 700; line-height: 1.5; text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
#soc2026 #benefits ul li h3 span { color: var(--c-gd); font-weight: 700; line-height: 1.5; display: block; }
#soc2026 #benefits ul li p { color: var(--c-bu); line-height: 1.5; text-align: left; width: 100%; }
#soc2026 #benefits ul li .note { color: var(--c-bu); display: block; line-height: 1.5; }
#soc2026 #benefits ul li .note::before { display: none; }
#soc2026 #benefits .btn { background: var(--c-gd); color: var(--c-wt); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; line-height: 1.5; }

#soc2026 #about { width: 100%; }
#soc2026 #about .label { font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: 0.05em; line-height: 1.5; border: none; }
#soc2026 #about h2 { width: 100%; font-weight: 700; text-align: center; line-height: 1.17; color: var(--c-wt); display: block; box-sizing: border-box; }
#soc2026 #about h2 span { display: block; font-weight: 700; color: var(--c-gd); }
#soc2026 #about h3 { font-weight: 700; color: var(--c-wt); position: absolute; line-height: 1.4; text-align: left; }
#soc2026 #about h4 { font-weight: 700; line-height: 1.4; display: flex; flex-direction: column; color: var(--c-wt); position: absolute; text-align: left; align-items: flex-start; }
#soc2026 #about h4 span { font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: 0.05em; line-height: 1.4; margin-bottom: 2px; }
#soc2026 #about ul { list-style: none; display: grid; position: absolute; left: 0; right: 0; margin: 0 auto; }
#soc2026 #about ul li { background: var(--c-wt); display: grid; align-items: center; justify-items: center; /*border-radius: 4px;*/ box-sizing: border-box; padding: 0; gap: 0;}
#soc2026 #about ul li br { display: none; }
#soc2026 #about ul li img { height: auto; margin: 0 auto; grid-row: 1 / span 2; grid-column: 1; align-self: center; width: 80%; object-fit: contain; }
#soc2026 #about ul li h5 { color: var(--c-bu); font-weight: 700; grid-row: 1; grid-column: 2; align-self: end; text-align: center; width: 100%; }
#soc2026 #about ul li p { color: var(--c-bu); grid-row: 2; grid-column: 2; align-self: start; text-align: center; line-height: 1.4; width: 100%; }

#soc2026 #categories { width: 100%; border-top: 1px solid var(--c-lg);}
#soc2026 #categories .label { color: var(--c-gd); font-weight: 700; display: block; }
#soc2026 #categories ul { list-style: none; display: flex; justify-content: space-between; align-items: center; width: 100%; }
#soc2026 #categories ul li { width: 24%; }
#soc2026 #categories ul li a { background: var(--c-bu); color: var(--c-wt); text-decoration: none; font-weight: 700; display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; box-sizing: border-box; position: relative; border-radius: 4px; transition: opacity 0.2s ease; line-height: 1.24; }
#soc2026 #categories ul li a:hover { opacity: 0.7; }
#soc2026 #categories ul li a::after { content: ""; position: absolute; border-style: solid; border-color: var(--c-wt) transparent transparent transparent; }
#soc2026 #categories ul li:first-child a { color: var(--c-gd); outline: 2px solid var(--c-gd); outline-offset: -2px; }
#soc2026 #categories ul li:first-child a::after { border-color: var(--c-gd) transparent transparent transparent; }

#soc2026 .item-box { width: 100%; }
#soc2026 .item-box .txt > form { grid-column: 1 / span 2; display: contents; }
#soc2026 .item-box > h2 { background: var(--c-bu); box-sizing: border-box; width: 100%; text-align: left; margin: 0; }
#soc2026 .item-box > h2 > .--inr { color: var(--c-wt); font-weight: 700; display: block; }
#soc2026 .item-box > h2 span span { color: var(--c-gd); font-family: "Inter", sans-serif; font-weight: 700; display: block; }
#soc2026 .item-box .lst { list-style: none; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; }
#soc2026 .item-box .box { display: flex; background: var(--c-wt); box-sizing: border-box; width: 100%; border-bottom: 1px solid var(--c-gd); }
#soc2026 .item-box .box > picture, #soc2026 .item-box .box > picture img { display: block; width: 100%; height: auto; }
#soc2026 .item-box .txt { display: grid; box-sizing: border-box; width: 100%; }
#soc2026 .item-box .txt h3 { color: var(--c-bu); font-weight: 700; }
#soc2026 .item-box .spc { display: flex; flex-direction: column; align-items: flex-start; position: relative; }
#soc2026 .item-box .spc select { width: 100%; height: 100%; color: var(--c-bu); border: 1px solid var(--c-gd); background: var(--c-wt); font-weight: 500; cursor: pointer; appearance: none; -webkit-appearance: none; }
#soc2026 .item-box .spc select.--one{opacity: 0; pointer-events: none;}
#soc2026 .item-box .det, #soc2026 .item-box .grn { font-weight: 500; }
#soc2026 .item-box .prc { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; text-align: right; }
#soc2026 .item-box .prc .old { color: var(--c-bu); font-weight: 500; text-decoration: line-through; }
#soc2026 .item-box .prc .tag { color: var(--c-wt);font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
#soc2026 .item-box .prc .num { color: var(--c-bu); font-weight: 700; line-height: 1; }
#soc2026 .item-box .prc .num span { font-size: 0.6em; font-weight: 700; margin-right: 2px; }
#soc2026 .item-box .btn-box { list-style: none; display: flex; align-items: center; width: 100%; box-sizing: border-box; pointer-events: none; }
#soc2026 .item-box .btn-box li { box-sizing: border-box; pointer-events: none; }
#soc2026 .item-box .btn-box li .cart { background: var(--c-gd); color: var(--c-bu); font-weight: 700; display: flex; align-items: center; justify-content: center; box-sizing: border-box; position: relative; transition: opacity 0.2s; width: 100%; height: 100%; border: 1px solid var(--c-bu); box-shadow: 2px 2px 0 0 rgba(29,43,75,0.3); font-family: inherit; cursor: pointer; outline: none; pointer-events: auto; }
#soc2026 .item-box .btn-box li .cart:hover { opacity: 0.7; }
#soc2026 .item-box .cart::before { content: ""; display: block; position: absolute; top: 0; height: 100%; left: 0; background: no-repeat left center/cover; }
#soc2026 .item-box .more { background: var(--c-wt); color: var(--c-bu); font-weight: 500; text-decoration: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid var(--c-bu); border-radius: 4px; position: relative; transition: opacity 0.2s; width: 100%; height: 100%; box-shadow: 2px 2px 0 0 rgba(29,43,75,0.3); pointer-events: auto; }
#soc2026 .item-box .btn-box li .more:hover { opacity: 0.7; }
#soc2026 .item-box .more::before { content: ""; display: block; position: absolute; top: 0; height: 100%; left: 0; background: no-repeat left center/cover; }
#soc2026 .item-box .etc { width: 100%; display: flex; justify-content: center; box-sizing: border-box; margin: 0; }
#soc2026 .item-box .etc a { text-decoration: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; position: relative; transition: opacity 0.2s; }
#soc2026 .item-box .etc a:hover { opacity: 0.7; }
#soc2026 .item-box .etc a span { position: relative; display: inline-flex; align-items: center; }
#soc2026 .item-box .etc a span::after { content: "＞"; margin-left: 21px; font-size: 18px; font-weight: 900; display: inline-block; }

#soc2026 #commitment { width: 100%; background: var(--c-wt); box-sizing: border-box; }
#soc2026 #commitment picture, #soc2026 #commitment picture img { display: block; width: 100%; height: auto; }
#soc2026 #commitment picture{max-width: 1000px; margin-left: auto; margin-right: auto;}
#soc2026 #commitment > h2 { color: var(--c-bu); font-weight: 700; text-align: center; margin: 0; width: 100%; box-sizing: border-box; }
#soc2026 #commitment .--inr { list-style: none; display: flex; align-items: center; width: 100%; box-sizing: border-box; }
#soc2026 #commitment .--inr li { box-sizing: border-box; }

#soc2026 #voice { width: 100%; background: var(--c-wt); border-top: 1px solid var(--c-lg); box-sizing: border-box; }
#soc2026 #voice .--inr { width: 100%; box-sizing: border-box; }
#soc2026 #voice .sub-ttl { color: #c9a960; font-family: "Inter", sans-serif; font-weight: 700; margin: 0; }
#soc2026 #voice .box { background: var(--c-ly); border-radius: 8px; width: 100%; box-sizing: border-box; color: var(--c-gb); }
#soc2026 #voice .box > picture, #soc2026 #voice .box > picture img { display: block; height: auto; }
#soc2026 #voice .box > picture img { border-radius: 4px; }
#soc2026 #voice .txt { box-sizing: border-box; }
#soc2026 #voice .txt h3 { color: var(--c-gb); font-weight: 700; margin: 0; }
#soc2026 #voice .comment { color: var(--c-gb); font-weight: 500; margin: 0; text-align: justify; }
#soc2026 #voice .prof { color: var(--c-gb); font-weight: 500; text-align: right; margin: 0; }
#soc2026 #voice .prof span { color: var(--c-gb); font-weight: 700; display: inline-block; }

#soc2026 #coupon { width: 100%; background: #1d2b4b; border: 4px solid var(--c-gd); box-sizing: border-box; }
#soc2026 #coupon .--inr { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
#soc2026 #coupon .sub-ttl { color: var(--c-gd); font-family: "Inter", sans-serif; font-weight: 700; margin: 0; text-align: left; }
#soc2026 #coupon .main-ttl { color: var(--c-wt);font-weight: 700; margin: 0; text-align: left; }
#soc2026 #coupon .main-ttl span { color: var(--c-cp2); }
#soc2026 #coupon .ticket-area { width: 100%; box-sizing: border-box; display: flex; justify-content: center; }
#soc2026 #coupon .ticket-area picture, #soc2026 #coupon .ticket-area img { display: block; height: auto; }
#soc2026 #coupon .btn-copy { margin: 0; width: 100%; display: flex; justify-content: center; }
#soc2026 #coupon .js-copy-btn { background: var(--c-cp2); color: var(--c-wt);font-weight: 700; border: 2px solid var(--c-wt); display: flex; align-items: center; justify-content: center; box-sizing: border-box; cursor: pointer; outline: none; transition: opacity 0.2s; }
#soc2026 #coupon .js-copy-btn:hover { opacity: 0.7; }
#soc2026 #coupon .coupon-notes { margin: 0 auto; color: var(--c-wt);font-weight: 500; text-align: left; width: 100%; box-sizing: border-box; }
#soc2026 #coupon .coupon-notes span { color: var(--c-wt);font-weight: 400; text-align: left; display: inline-block; }

#soc2026 #trial { width: 100%; background: var(--c-wt); box-sizing: border-box; }
#soc2026 #trial .--inr { width: 100%; box-sizing: border-box; }
#soc2026 #trial .sub-ttl { color: var(--c-gd); font-family: "Inter", sans-serif; font-weight: 700; margin: 0; }
#soc2026 #trial h2 { color: var(--c-bu); font-weight: 700; margin: 0; }
#soc2026 #trial .flow { list-style: none; display: flex; align-items: center; width: 100%; box-sizing: border-box; }
#soc2026 #trial .flow li { background: var(--c-yl); display: flex; align-items: center; box-sizing: border-box; }
#soc2026 #trial .flow .num { background: var(--c-bu); color: var(--c-wt);font-family: "Inter", sans-serif; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; flex-shrink: 0; }
#soc2026 #trial .flow .txt { color: var(--c-bu); font-weight: 700; margin: 0; text-align: center; }
#soc2026 #trial .flow .txt span { color: var(--c-bu); font-weight: 400; display: block; }
#soc2026 #trial .flow .txt .btn{width: 100%; height: 30px; font-size: 14px; border-radius: 15px; background: var(--c-gd); color: var(--c-wt);font-weight: 700; display: flex; align-items: center; justify-content: center; box-sizing: border-box; cursor: pointer; outline: none; transition: opacity 0.2s;  margin-top: 5px;}

#soc2026 #faq { width: 100%; background: var(--c-wt); box-sizing: border-box; }
#soc2026 #faq .--inr { width: 100%; box-sizing: border-box; }
#soc2026 #faq .sub-ttl { color: var(--c-gd); font-family: "Inter", sans-serif; font-weight: 700; margin: 0; }
#soc2026 #faq .qa-lst { width: 100%; box-sizing: border-box; }
#soc2026 #faq dt { color: var(--c-bu); font-weight: 700; margin: 0; width: 100%; box-sizing: border-box; }
#soc2026 #faq dd { color: var(--c-bu); font-weight: 400; margin: 0; width: 100%; box-sizing: border-box; border-bottom: 1px solid var(--c-gl); }





@media (min-width: 1281px) {
  #soc2026 #about { background: var(--c-wt); padding-top: 15px; padding-bottom: 30px; /*padding-top: 60px; padding-bottom: 80px; */}
  #soc2026 #about .label { color: var(--c-gd); font-size: 18.5px; text-align: left; display: block; margin-bottom: 8px; max-width: 1024px; margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; }
  #soc2026 #about h2 { background: var(--c-bu); border-top: 4px solid var(--c-gd); border-bottom: 4px solid var(--c-gd); padding-top: 20px; padding-bottom: 20px; margin-bottom: 0; font-size: 25px; }
  #soc2026 #about h2 span { font-size: 37px; margin-top: 4px; }
  #soc2026 #about .body { background: var(--c-bu) url('../../../images/campaign/sleepoasis-cp2026/about_fiber_pc.webp') no-repeat center top / 100% auto; width: 100%; max-width: 1280px; margin: 0 auto; aspect-ratio: 1280 / 748; box-sizing: border-box; position: relative; }
  #soc2026 #about h3 { text-align: left; font-size: 26.5px; width: 600px; left: 142px; top: 335px; }
  #soc2026 #about h4 { font-size: 21.5px; width: 500px; left: 286px; top: 450px; right: auto; margin: 0; }
  #soc2026 #about h4 span { color: var(--c-gd); font-size: 18.5px; }
  #soc2026 #about ul { width: 708px; top: 518px; grid-template-columns: 1fr 1fr; gap: 16px; }
  #soc2026 #about ul li { grid-template-columns: 77.5px 1fr; width: 346px; height: 87.5px; padding-left: 10px; padding-right: 10px; /*border: none;*/ border: var(--c-yl2) solid 4px;}
  #soc2026 #about ul li h5 { font-size: 19.5px; line-height: 1.3; margin-bottom: 4px; }
  #soc2026 #about ul li p { font-size: 16.5px; }
}

@media (max-width: 1280px) and (min-width: 768px) {
  #soc2026 #about { background: var(--c-wt); padding-top: calc(100vw * (30 / 1280)); padding-bottom: calc(100vw * (30 / 1280)); /*padding-top: calc(100vw * (60 / 1280)); padding-bottom: calc(100vw * (80 / 1280));*/ }
  #soc2026 #about .label { color: var(--c-gd); font-size: calc(100vw * (18.5 / 1280)); text-align: left; display: block; margin-bottom: calc(100vw * (8 / 1280)); padding-left: calc(100vw * (12 / 1280)); padding-right: calc(100vw * (12 / 1280)); width: 100%; max-width: calc(1024 * (100vw / 1280)); margin-left: auto; margin-right: auto; }
  #soc2026 #about h2 { background: var(--c-bu); border-top: calc(100vw * (4 / 1280)) solid var(--c-gd); border-bottom: calc(4 * (100vw / 1280)) solid var(--c-gd); padding-top: calc(100vw * (20 / 1280)); padding-bottom: calc(100vw * (20 / 1280)); margin-bottom: 0; font-size: calc(100vw * (25 / 1280)); }
  #soc2026 #about h2 span { font-size: calc(100vw * (37 / 1280)); margin-top: calc(100vw * (4 / 1280)); }
  #soc2026 #about .body { background: var(--c-bu) url('../../../images/campaign/sleepoasis-cp2026/about_fiber_pc.webp') no-repeat center top / 100% auto; width: 100%; aspect-ratio: 1280 / 748; box-sizing: border-box; position: relative; }
  #soc2026 #about h3 { font-size: calc(100vw * (26.5 / 1280)); width: calc(100vw * (600 / 1280)); left: calc(100vw * (142 / 1280)); top: calc(100vw * (335 / 1280)); }
  #soc2026 #about h4 { font-size: calc(100vw * (21.5 / 1280)); width: calc(100vw * (500 / 1280)); left: calc(100vw * (286 / 1280)); top: calc(100vw * (450 / 1280)); right: auto; margin: 0; }
  #soc2026 #about h4 span { color: var(--c-gd); font-size: calc(100vw * (18.5 / 1280)); }
  #soc2026 #about ul { width: calc(100vw * (708 / 1280)); top: calc(100vw * (518 / 1280)); grid-template-columns: 1fr 1fr; gap: calc(100vw * (16 / 1280)); }
  #soc2026 #about ul li { grid-template-columns: calc(100vw * (77.5 / 1280)) 1fr; width: auto; height: calc(100vw * (87.5 / 1280)); padding-left: calc(100vw * (10 / 1280)); padding-right: calc(10 * (100vw / 1280)); border: none; }
  #soc2026 #about ul li h5 { font-size: calc(100vw * (19.5 / 1280)); line-height: 1.3; margin-bottom: calc(4 * (100vw / 1280)); }
  #soc2026 #about ul li p { font-size: calc(100vw * (16.5 / 1280)); }
}

@media (min-width: 1024px) {
  #soc2026 { --cqw: 1px; }
  #soc2026 .--inr { max-width: 1024px; padding-left: 12px; padding-right: 12px; }
  #soc2026 #bar { min-height: 30px; font-size: 17.5px; padding-top: 4px; padding-bottom: 4px; }
  #soc2026 #lead { padding-top: 30px; padding-bottom: 30px;/*padding-top: 60px; padding-bottom: 60px;*/ }
  #soc2026 #lead p { font-size: 21.5px; }

  #soc2026 #benefits { padding-top: 30px; padding-bottom: 0px; /*padding-top: 60px; padding-bottom: 80px;*/}
  #soc2026 #benefits h2 { font-size: 39.5px; margin-bottom: 40px; gap: 6px; }
  #soc2026 #benefits h2 span { font-size: 18.5px; }
  #soc2026 #benefits ul { max-width: 700px; gap: 20px; }
  #soc2026 #benefits ul li { padding: 18px 20px 18px 80px; min-height: 160px; }
  #soc2026 #benefits ul li:nth-child(3) { padding-bottom: 76px; }
  #soc2026 #benefits ul li::before { font-size: 83px; left: 16px; top: 22px; }
  #soc2026 #benefits ul li h3 span { font-size: 19.5px; margin-bottom: 8px; }
  #soc2026 #benefits ul li h3 { font-size: 26.5px; margin-top: 0; margin-bottom: 12px; }
  #soc2026 #benefits ul li p { font-size: 18.5px; }
  #soc2026 #benefits ul li .note { font-size: 13.5px; margin-top: 4px; }
  #soc2026 #benefits .btn { width: 369px; height: 36px; font-size: 18.5px; border-radius: 10px; position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; }

  #soc2026 #categories { padding-top: 30px; padding-bottom: 30px; /*padding-top: 40px; padding-bottom: 40px;*/}
  #soc2026 #categories #tab-link{padding-top: 120px; margin-top: -120px;}
  #soc2026 #categories .label { font-size: 18.5px; margin-bottom: 16px; max-width: 1024px; margin-left: auto; margin-right: auto;}
  #soc2026 #categories ul { max-width: 1024px; margin: 0 auto; padding-left: 12px; padding-right: 12px; gap: 11px; }
  #soc2026 #categories ul li a { height: 70px; font-size: 18px; padding: 10px; /*border: 1px solid var(--c-wt);*/ outline: 2px solid var(--c-wt); outline-offset: -2px; box-shadow: 0 0 0 1px var(--c-bu); }
  #soc2026 #categories ul li:first-child a { font-size: 23px; }
  #soc2026 #categories ul li a::after { bottom: 8px; right: 10px; border-width: 6px 5px 0 5px; }

  #soc2026 .item-box { padding-top: 120px; margin-top: -120px; /*padding-top: 120px; margin-top: -60px;*/}
  #soc2026 .item-box > h2 { padding: 10px 0 10px 12px; font-size: 24px; }
  #soc2026 .item-box > h2 span span { font-size: 14px; letter-spacing: 0.05em; }
  #soc2026 .item-box .lst { max-width: 1024px; margin: 0 auto; padding: 40px 12px; gap: 40px; }
  #soc2026 .item-box .box { padding-bottom: 40px; gap: 27px; }
  #soc2026 .item-box .box > picture { width: 270px; flex-shrink: 0; }
  #soc2026 .item-box .txt { grid-template-columns: 1fr 280px; grid-template-rows: auto 1fr; gap: 10px; }
  #soc2026 .item-box .txt h3 { grid-column: 1 / span 2; grid-row: 1; font-size: 21px; line-height: 1.4; }
  #soc2026 .item-box .spc { grid-column: 1; grid-row: 2; gap: 8px; padding-top: 10px; width: 336px; }
  #soc2026 .item-box .spc select { height: 52px; font-size: 18px; padding: 0 50px 0 15px; background: #fff url('../../../images/campaign/sleepoasis-cp2026/icon_select_pc.webp') no-repeat right 0 center/auto 100%; }
  #soc2026 .item-box .det, #soc2026 .item-box .grn { font-size: 16px; color: var(--c-gy); }
  #soc2026 .item-box .prc { grid-column: 2; grid-row: 2; gap: 4px; display: block; padding-top: 10px; }
  #soc2026 .item-box .prc .old { font-size: 18px; display: inline-block; margin-right: 12px; line-height: 31px; vertical-align: middle; }
  #soc2026 .item-box .prc .tag { background: var(--c-cp); font-size: 18px; width: 100px; height: 31px; border-radius: 2px; vertical-align: middle; }
  #soc2026 .item-box .prc .num { font-size: 46px; margin-top: 5px; }
  #soc2026 .item-box .btn-box { grid-column: 1 / span 2; gap: 16px; margin-top: 10px; }
  #soc2026 .item-box .btn-box li { height: 48px; }
  #soc2026 .item-box .btn-box li:first-child { width: calc(50% - 8px); }
  #soc2026 .item-box .btn-box li:last-child { width: calc(50% - 8px); }
  #soc2026 .item-box .cart { padding-left: 72px; font-size: 20px; border-radius: 4px; }
  #soc2026 .item-box .cart::before { width: 72px; background-image: url('../../../images/campaign/sleepoasis-cp2026/icon_cart_pc.webp'); }
  #soc2026 .item-box .more { padding-left: 72px; font-size: 20px; border-radius: 4px; }
  #soc2026 .item-box .more::before { width: 72px; background-image: url('../../../images/campaign/sleepoasis-cp2026/icon_more_pc.webp'); }
  #soc2026 .item-box .etc { padding: 0 12px 30px;/*padding: 0 12px 60px;*/ }
  #soc2026 .item-box .etc a { width: 434px; height: 62px; font-size: 21px; color: var(--c-gl); background: var(--c-yl); border: 1px solid var(--c-gl); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--c-gl); font-weight: 500; }
  #soc2026 .item-box .etc a span::after { margin-left: 21px; font-size: 18px; font-weight: 900; display: inline-block; }

  #soc2026 #commitment { padding-bottom: 30px; /*padding-bottom: 80px; */}
  #soc2026 #commitment > h2 { font-size: 28px; margin-top: 30px; margin-bottom: 30px; /*margin-top: 80px; margin-bottom: 50px;*/ letter-spacing: 0.05em; }
  #soc2026 #commitment .--inr { max-width: 1024px; margin: 0 auto; gap: 40px; padding: 0 12px; justify-content: center; }
  #soc2026 #commitment .--inr li { width: 220px; }

  #soc2026 #voice { padding: 30px 0; /*padding: 80px 0;*/ }
  #soc2026 #voice .--inr { max-width: 1024px; margin: 0 auto; padding: 0 12px; }
  #soc2026 #voice .sub-ttl { font-size: 18px; margin-bottom: 5px; letter-spacing: 0.05em; }
  #soc2026 #voice .box { display: flex; align-items: flex-start; padding: 20px 20px 0 20px; gap: 40px; }
  #soc2026 #voice .box > picture { width: 330px; flex-shrink: 0; }
  #soc2026 #voice .txt h3 { font-size: 37px; line-height: 1.4; text-align: center; margin-top: 37px; margin-bottom: 37px; letter-spacing: 0.02em; }
  #soc2026 #voice .comment { font-size: 19px; line-height: 1.5; margin-bottom: 30px; }
  #soc2026 #voice .prof { font-size: 17px; line-height: 1.5; }
  #soc2026 #voice .prof span { font-size: 25px; margin-top: 6px; letter-spacing: 0.05em; }

  #soc2026 #coupon { padding: 30px 20px; margin-bottom: 30px;/*margin-bottom: 80px;*/}
  #soc2026 #coupon .--inr { max-width: 1024px; margin: 0 auto; }
  #soc2026 #coupon .sub-ttl { font-size: 18px; margin-bottom: 0; }
  #soc2026 #coupon .main-ttl { font-size: 26px; margin-bottom: 20px; }
  #soc2026 #coupon .main-ttl span { font-size: 39px; }
  #soc2026 #coupon .ticket-area { margin-bottom: 40px; }
  #soc2026 #coupon .ticket-area img { width: 440px; }
  #soc2026 #coupon .btn-copy { margin-bottom: 40px; }
  #soc2026 #coupon .js-copy-btn { width: 380px; height: 54px; font-size: 20px; border-radius: 27px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
  #soc2026 #coupon .coupon-notes { width: 610px; font-size: 22px; line-height: 1.5; }
  #soc2026 #coupon .coupon-notes span { font-size: 19px; line-height: 1.5; }

  #soc2026 #trial { padding: 0 0 30px; /*padding: 0 0 80px;*/ }
  #soc2026 #trial .--inr { max-width: 1024px; margin: 0 auto; padding: 0 12px; }
  #soc2026 #trial .sub-ttl { font-size: 18px; margin-bottom: 0; }
  #soc2026 #trial h2 { font-size: 26px; margin-bottom: 26px; letter-spacing: 0.02em; }
  #soc2026 #trial h2 br{display: none;}
  #soc2026 #trial .flow { gap: 20px; justify-content: space-between; }
  #soc2026 #trial .flow li { width: 320px; height: 100px; padding: 0; gap: 15px; border-radius: 4px; justify-content: center; }
  #soc2026 #trial .flow .num { width: 40px; height: 40px; font-size: 20px; }
  #soc2026 #trial .flow .txt { font-size: 20px; line-height: 1.3; }
  #soc2026 #trial .flow .txt span { font-size: 18px; margin-top: 4px; margin-bottom: 4px; }

  #soc2026 #faq { padding: 0 0 80px; }
  #soc2026 #faq .--inr { max-width: 1024px; margin: 0 auto; padding: 0 12px; }
  #soc2026 #faq .sub-ttl { font-size: 18px; margin-bottom: 0; }
  #soc2026 #faq dt { font-size: 22px; line-height: 1.4; margin-top: 24px; margin-bottom: 12px; letter-spacing: 0.01em; }
  #soc2026 #faq dt:first-of-type { margin-top: 12px; }
  #soc2026 #faq dd { font-size: 18px; line-height: 1.6; padding-left: 28px; padding-bottom: 24px; }
  
}

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

  #soc2026 #benefits { padding-top: calc(30 * var(--cqw)); padding-bottom: calc(0 * var(--cqw)); /*padding-top: calc(60 * var(--cqw)); padding-bottom: calc(80 * var(--cqw));*/ }
  #soc2026 #benefits h2 { font-size: calc(31.5 * var(--cqw)); margin-bottom: calc(40 * var(--cqw)); gap: calc(6 * var(--cqw)); }
  #soc2026 #benefits h2 span { font-size: calc(18.5 * var(--cqw)); }
  #soc2026 #benefits ul { max-width: calc(700 * var(--cqw)); gap: calc(20 * var(--cqw)); }
  #soc2026 #benefits ul li { padding: calc(18 * var(--cqw)) calc(20 * var(--cqw)) calc(18 * var(--cqw)) calc(80 * var(--cqw)); min-height: calc(160 * var(--cqw)); }
  #soc2026 #benefits ul li:nth-child(3) { padding-bottom: calc(76 * var(--cqw)); }
  #soc2026 #benefits ul li::before { font-size: calc(82.5 * var(--cqw)); left: calc(16 * var(--cqw)); top: calc(22 * var(--cqw)); }
  #soc2026 #benefits ul li h3 span { font-size: calc(19.5 * var(--cqw)); margin-bottom: calc(8 * var(--cqw)); }
  #soc2026 #benefits ul li h3 { font-size: calc(27 * var(--cqw)); margin-top: 0; margin-bottom: calc(12 * var(--cqw)); }
  #soc2026 #benefits ul li p { font-size: calc(18.5 * var(--cqw)); }
  #soc2026 #benefits ul li .note { font-size: calc(13.5 * var(--cqw)); margin-top: calc(4 * var(--cqw)); }
  #soc2026 #benefits .btn { width: calc(369 * var(--cqw)); height: calc(36 * var(--cqw)); font-size: calc(18.5 * var(--cqw)); border-radius: calc(10 * var(--cqw)); position: absolute; left: 50%; bottom: calc(20 * var(--cqw)); transform: translateX(-50%); display: flex; }

  #soc2026 #categories { padding-top: calc(30 * var(--cqw)); padding-bottom: calc(0 * var(--cqw));/*padding-top: calc(40 * var(--cqw)); padding-bottom: calc(40 * var(--cqw));*/ }
  #soc2026 #categories #tab-link{padding-top: calc(160 * var(--cqw)); margin-top: calc(-160 * var(--cqw));}
  #soc2026 #categories .label { font-size: calc(18.5 * var(--cqw)); margin-bottom: calc(16 * var(--cqw)); max-width: calc(1024 * var(--cqw)); padding-left: 1.5%; }
  #soc2026 #categories ul { max-width: calc(1024 * var(--cqw)); padding-left: 1.5%; padding-right: 1.5%; gap: calc(11 * var(--cqw)); }
  #soc2026 #categories ul li a { height: calc(70 * var(--cqw)); font-size: calc(18 * var(--cqw)); padding: calc(10 * var(--cqw)); border: calc(1 * var(--cqw)) solid var(--c-wt); box-shadow: 0 0 0 calc(1 * var(--cqw)) var(--c-bu); }
  #soc2026 #categories ul li:first-child a { font-size: calc(23 * var(--cqw)); }
  #soc2026 #categories ul li a::after { bottom: calc(8 * var(--cqw)); right: calc(10 * var(--cqw)); border-width: calc(6 * var(--cqw)) calc(5 * var(--cqw)) 0 calc(5 * var(--cqw)); }

  #soc2026 .item-box { padding-top: calc(30 * var(--cqw) + 90px); margin-top: -90px; /*padding-top: calc(30 * var(--cqw) + 91.4px); margin-top: -91.4px;*/ }
  #soc2026 .item-box > h2 { padding: calc(10 * var(--cqw)) 0 calc(10 * var(--cqw)) calc(12 * var(--cqw)); font-size: calc(24 * var(--cqw)); }
  #soc2026 .item-box > h2 span span { font-size: calc(14 * var(--cqw)); letter-spacing: 0.05em; }
  #soc2026 .item-box .lst { max-width: calc(1024 * var(--cqw)); margin: 0 auto; padding: calc(30 * var(--cqw)) calc(12 * var(--cqw)); /*padding: calc(40 * var(--cqw)) calc(12 * var(--cqw));*/ gap: calc(40 * var(--cqw)); }
  #soc2026 .item-box .box { padding-bottom: calc(40 * var(--cqw)); gap: calc(27 * var(--cqw)); }
  #soc2026 .item-box .box > picture { width: calc(270 * var(--cqw)); flex-shrink: 0; }
  #soc2026 .item-box .txt { grid-template-columns: 1fr calc(280 * var(--cqw)); grid-template-rows: auto 1fr; gap: calc(10 * var(--cqw)); }
  #soc2026 .item-box .txt h3 { grid-column: 1 / span 2; grid-row: 1; font-size: calc(21 * var(--cqw)); line-height: 1.4; }
  #soc2026 .item-box .spc { grid-column: 1; grid-row: 2; gap: calc(8 * var(--cqw)); padding-top: calc(10 * var(--cqw)); width: calc(336 * var(--cqw)); }
  #soc2026 .item-box .spc select { height: calc(52 * var(--cqw)); font-size: calc(18 * var(--cqw)); padding: 0 calc(50 * var(--cqw)) 0 calc(15 * var(--cqw)); background: #fff url('../../../images/campaign/sleepoasis-cp2026/icon_select_pc.webp') no-repeat right 0 center/auto 100%; }
  #soc2026 .item-box .det, #soc2026 .item-box .grn { font-size: calc(16 * var(--cqw)); color: var(--c-gy); }
  #soc2026 .item-box .prc { grid-column: 2; grid-row: 2; gap: calc(4 * var(--cqw)); display: block; padding-top: calc(10 * var(--cqw)); }
  #soc2026 .item-box .prc .old { font-size: calc(18 * var(--cqw)); display: inline-block; margin-right: calc(12 * var(--cqw)); line-height: calc(31 * var(--cqw)); vertical-align: middle; }
  #soc2026 .item-box .prc .tag { background: var(--c-cp); font-size: calc(18 * var(--cqw)); width: calc(100 * var(--cqw)); height: calc(31 * var(--cqw)); border-radius: calc(2 * var(--cqw)); vertical-align: middle; }
  #soc2026 .item-box .prc .num { font-size: calc(46 * var(--cqw)); margin-top: calc(5 * var(--cqw)); }
  #soc2026 .item-box .btn-box { grid-column: 1 / span 2; gap: calc(16 * var(--cqw)); margin-top: calc(10 * var(--cqw)); }
  #soc2026 .item-box .btn-box li { height: calc(48 * var(--cqw)); }
  #soc2026 .item-box .btn-box li:first-child { width: calc(50% - calc(8 * var(--cqw))); }
  #soc2026 .item-box .btn-box li:last-child { width: calc(50% - calc(8 * var(--cqw))); }
  #soc2026 .item-box .cart { padding-left: calc(72 * var(--cqw)); font-size: calc(20 * var(--cqw)); border-radius: calc(4 * var(--cqw)); }
  #soc2026 .item-box .cart::before { width: calc(72 * var(--cqw)); background-image: url('../../../images/campaign/sleepoasis-cp2026/icon_cart_pc.webp'); }
  #soc2026 .item-box .more { padding-left: calc(72 * var(--cqw)); font-size: calc(20 * var(--cqw)); border-radius: calc(4 * var(--cqw)); }
  #soc2026 .item-box .more::before { width: calc(72 * var(--cqw)); background-image: url('../../../images/campaign/sleepoasis-cp2026/icon_more_pc.webp'); }
  #soc2026 .item-box .etc { padding: 0 calc(12 * var(--cqw)) calc(30 * var(--cqw)); /*padding: 0 calc(12 * var(--cqw)) calc(60 * var(--cqw));*/ }
  #soc2026 .item-box .etc a { width: calc(434 * var(--cqw)); height: calc(62 * var(--cqw)); font-size: calc(21 * var(--cqw)); color: var(--c-gl); background: var(--c-yl); border: calc(1 * var(--cqw)) solid var(--c-gl); box-shadow: inset 0 0 0 calc(2 * var(--cqw)) #fff, inset 0 0 0 calc(3 * var(--cqw)) var(--c-gl); font-weight: 500; }
  #soc2026 .item-box .etc a span::after { margin-left: calc(21 * var(--cqw)); font-size: calc(18 * var(--cqw)); font-weight: 900; display: inline-block; }

  #soc2026 #commitment { padding-bottom: calc(30 * var(--cqw)); /*padding-bottom: calc(60 * var(--cqw));*/ }
  #soc2026 #commitment > h2 { font-size: calc(28 * var(--cqw)); margin-top: calc(30 * var(--cqw)); margin-bottom: calc(30 * var(--cqw)); /*margin-top: calc(60 * var(--cqw)); margin-bottom: calc(50 * var(--cqw));*/ letter-spacing: 0.05em; }
  #soc2026 #commitment .--inr { max-width: calc(1024 * var(--cqw)); margin: 0 auto; gap: calc(40 * var(--cqw)); padding: 0 calc(12 * var(--cqw)); justify-content: center; }
  #soc2026 #commitment .--inr li { width: calc(220 * var(--cqw)); }

  #soc2026 #voice { padding: calc(30 * var(--cqw)) 0; /* padding: calc(60 * var(--cqw)) 0;*/ }
  #soc2026 #voice .--inr { max-width: calc(1024 * var(--cqw)); margin: 0 auto; padding: 0 calc(12 * var(--cqw)); }
  #soc2026 #voice .sub-ttl { font-size: calc(18 * var(--cqw)); margin-bottom: calc(5 * var(--cqw)); letter-spacing: 0.05em; }
  #soc2026 #voice .box { display: flex; align-items: flex-start; padding: calc(20 * var(--cqw)) calc(20 * var(--cqw)) 0 calc(20 * var(--cqw));/*padding: calc(20 * var(--cqw));*/ gap: calc(40 * var(--cqw)); }
  #soc2026 #voice .box > picture { width: calc(330 * var(--cqw)); flex-shrink: 0; }
  #soc2026 #voice .txt h3 { font-size: calc(37 * var(--cqw)); line-height: 1.4; text-align: center; margin-top: calc(37 * var(--cqw)); margin-bottom: calc(37 * var(--cqw)); letter-spacing: 0.02em; }
  #soc2026 #voice .comment { font-size: calc(19 * var(--cqw)); line-height: 1.5; margin-bottom: calc(30 * var(--cqw)); }
  #soc2026 #voice .prof { font-size: calc(17 * var(--cqw)); line-height: 1.5; }
  #soc2026 #voice .prof span { font-size: calc(25 * var(--cqw)); margin-top: calc(6 * var(--cqw)); letter-spacing: 0.05em; }

  #soc2026 #coupon { padding: calc(30 * var(--cqw)) calc(20 * var(--cqw)); margin-bottom: calc(30 * var(--cqw));/*margin-bottom: calc(60 * var(--cqw));*/ }
  #soc2026 #coupon .--inr { max-width: calc(1024 * var(--cqw)); margin: 0 auto; }
  #soc2026 #coupon .sub-ttl { font-size: calc(18 * var(--cqw)); margin-bottom: 0; }
  #soc2026 #coupon .main-ttl { font-size: calc(26 * var(--cqw)); margin-bottom: calc(20 * var(--cqw)); }
  #soc2026 #coupon .main-ttl span { font-size: calc(39 * var(--cqw)); }
  #soc2026 #coupon .ticket-area { margin-bottom: calc(40 * var(--cqw)); }
  #soc2026 #coupon .ticket-area img { width: calc(440 * var(--cqw)); }
  #soc2026 #coupon .btn-copy { margin-bottom: calc(40 * var(--cqw)); }
  #soc2026 #coupon .js-copy-btn { width: calc(380 * var(--cqw)); height: calc(54 * var(--cqw)); font-size: calc(20 * var(--cqw)); border-radius: calc(27 * var(--cqw)); box-shadow: 0 calc(4 * var(--cqw)) calc(10 * var(--cqw)) rgba(0,0,0,0.2); }
  #soc2026 #coupon .coupon-notes { width: calc(610 * var(--cqw)); font-size: calc(22 * var(--cqw)); line-height: 1.5; }
  #soc2026 #coupon .coupon-notes span { font-size: calc(19 * var(--cqw)); line-height: 1.5; }

  #soc2026 #trial { padding: 0 0 calc(30 * var(--cqw)); /*padding: 0 0 calc(80 * var(--cqw));*/ }
  #soc2026 #trial .--inr { max-width: calc(1024 * var(--cqw)); margin: 0 auto; padding: 0 calc(12 * var(--cqw)); }
  #soc2026 #trial .sub-ttl { font-size: calc(18 * var(--cqw)); margin-bottom: 0; }
  #soc2026 #trial h2 { font-size: calc(26 * var(--cqw)); margin-bottom: calc(26 * var(--cqw)); letter-spacing: 0.02em; }
  #soc2026 #trial .flow { gap: calc(20 * var(--cqw)); justify-content: space-between; }
  #soc2026 #trial .flow li { width: calc(320 * var(--cqw)); height: calc(80 * var(--cqw)); padding: 0; gap: calc(15 * var(--cqw)); border-radius: calc(4 * var(--cqw)); justify-content: center; }
  #soc2026 #trial .flow .num { width: calc(40 * var(--cqw)); height: calc(40 * var(--cqw)); font-size: calc(20 * var(--cqw)); }
  #soc2026 #trial .flow .txt { font-size: calc(20 * var(--cqw)); line-height: 1.3; }
  #soc2026 #trial .flow .txt span { font-size: calc(18 * var(--cqw)); margin-top: calc(4 * var(--cqw)); margin-bottom: calc(4 * var(--cqw)); }
  #soc2026 #trial .flow .txt .btn{width: 100%; height: calc(30 * var(--cqw)); font-size: calc(14 * var(--cqw)); border-radius: calc(15 * var(--cqw)); margin-top: calc(5 * var(--cqw));}

  #soc2026 #faq { padding: 0 0 calc(80 * var(--cqw)); }
  #soc2026 #faq .--inr { max-width: calc(1024 * var(--cqw)); margin: 0 auto; padding: 0 calc(12 * var(--cqw)); }
  #soc2026 #faq .sub-ttl { font-size: calc(18 * var(--cqw)); margin-bottom: 0; }
  #soc2026 #faq dt { font-size: calc(22 * var(--cqw)); line-height: 1.4; margin-top: calc(24 * var(--cqw)); margin-bottom: calc(12 * var(--cqw)); letter-spacing: 0.01em; }
  #soc2026 #faq dt:first-of-type { margin-top: calc(12 * var(--cqw)); }
  #soc2026 #faq dd { font-size: calc(18 * var(--cqw)); line-height: 1.6; padding-left: calc(28 * var(--cqw)); padding-bottom: calc(24 * var(--cqw)); }

}

@media (max-width: 767px) {
  :root { --cqw: calc(100cqw / 375); }
  #soc2026 .--inr { padding-left: 4.5%; padding-right: 4.5%; }
  #soc2026 #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)); }
  #soc2026 #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));*/ }
  #soc2026 #lead p { font-size: calc(16 * var(--cqw)); }

  #soc2026 #benefits { padding-top: calc(30 * var(--cqw)); padding-bottom: calc(0 * var(--cqw)); /*padding-top: calc(50 * var(--cqw)); padding-bottom: calc(50 * var(--cqw));*/ }
  #soc2026 #categories #tab-link{padding-top: calc(50 * var(--cqw)); margin-top: calc(-50 * var(--cqw));}
  #soc2026 #benefits h2 { font-size: calc(31.5 * var(--cqw)); margin-bottom: calc(25 * var(--cqw)); gap: calc(4 * var(--cqw)); }
  #soc2026 #benefits h2 span { font-size: calc(14.5 * var(--cqw)); }
  #soc2026 #benefits ul { gap: calc(15 * var(--cqw)); }
  #soc2026 #benefits ul li { padding: calc(15 * var(--cqw)) calc(10 * var(--cqw)); display: block; overflow: hidden; position: relative; }
  #soc2026 #benefits ul li::before { font-size: calc(60 * var(--cqw)); float: left; position: static; margin-right: calc(10 * var(--cqw)); margin-top: calc(-6 * var(--cqw)); line-height: 1.1; }
  #soc2026 #benefits ul li h3 { font-size: calc(18 * var(--cqw)); display: block; overflow: hidden; line-height: 1.4; }
  #soc2026 #benefits ul li h3 span { font-size: calc(15.5 * var(--cqw)); display: block; margin-bottom: calc(4 * var(--cqw)); }
  #soc2026 #benefits ul li p { font-size: calc(14.5 * var(--cqw)); display: block; clear: both; padding-top: calc(12 * var(--cqw)); width: 100%; }
  #soc2026 #benefits ul li .note { font-size: calc(10.5 * var(--cqw)); margin-top: calc(4 * var(--cqw)); }
  #soc2026 #benefits .btn { width: calc(246 * var(--cqw)); height: calc(29 * var(--cqw)); font-size: calc(15.5 * var(--cqw)); margin-top: calc(15 * var(--cqw)); margin-left: auto; margin-right: auto; border-radius: calc(10 * var(--cqw)); display: flex; transform: translateX(calc(2.5 * var(--cqw))); }

  #soc2026 #about { padding-top: calc(15 * var(--cqw)); padding-bottom: calc(15 * var(--cqw)); /*padding-top: calc(30 * var(--cqw)); padding-bottom: calc(50 * var(--cqw));*/ text-align: center; }
  #soc2026 #about .label { color: var(--c-gd); font-size: calc(14.5 * var(--cqw)); text-align: left; display: block; margin-bottom: calc(6 * var(--cqw)); padding-left: 4.5%; }
  #soc2026 #about h2 { background: var(--c-bu); border-top: calc(2 * var(--cqw)) solid var(--c-gd); border-bottom: calc(2 * var(--cqw)) solid var(--c-gd); padding-top: calc(15 * var(--cqw)); padding-bottom: calc(15 * var(--cqw)); margin-bottom: 0; font-size: calc(25 * var(--cqw)); }
  #soc2026 #about h2 span { font-size: calc(32 * var(--cqw)); margin-top: calc(4 * var(--cqw)); }
  #soc2026 #about .body { background: var(--c-bu) url('../../../images/campaign/sleepoasis-cp2026/about_fiber_sp.webp') no-repeat center top / 100% auto; width: 100%; aspect-ratio: 393 / 452; box-sizing: border-box; position: relative; }
  #soc2026 #about h3 { font-size: calc(17.5 * var(--cqw)); line-height: 1.4; width: 100%; left: 0; padding-left: 4.5%; padding-right: 4.5%; top: calc(34.5% - calc(9 * var(--cqw))); }
  #soc2026 #about h4 { font-size: calc(19.5 * var(--cqw)); width: 100%; left: 0; padding-left: 4.5%; padding-right: 4.5%; top: calc(49.5% - calc(10 * var(--cqw))); right: auto; margin: 0; }
  #soc2026 #about h4 span { color: var(--c-gd); font-size: calc(14.5 * var(--cqw)); }
  #soc2026 #about ul { width: 100%; left: 0; padding-left: 4.5%; padding-right: 4.5%; top: 61.5%; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--cqw)); }
  #soc2026 #about ul li { grid-template-columns: calc(52 * var(--cqw)) 1fr; width: 100%; height: calc(61 * var(--cqw)); padding: 0 0 0 calc(5 * var(--cqw)); border: none; border: var(--c-yl2) solid 4px;}
  #soc2026 #about ul li br { display: block; }
  #soc2026 #about ul li h5 { font-size: calc(11.5 * var(--cqw)); line-height: 1.3; margin-bottom: calc(4 * var(--cqw)); }
  #soc2026 #about ul li p { font-size: calc(8 * var(--cqw)); white-space: normal; word-break: break-all; width: 92%; margin: 0 auto; }

  #soc2026 #categories { padding-top: calc(15 * var(--cqw)); padding-bottom: calc(15 * var(--cqw)); /*padding-top: calc(30 * var(--cqw)); padding-bottom: calc(30 * var(--cqw));*/ }
  #soc2026 #categories #tab-link{padding-top: calc(30 * var(--cqw) + 56px);  margin-top: calc(-30 * var(--cqw) - 56px); }
  #soc2026 #categories .label { font-size: calc(14.5 * var(--cqw)); margin-bottom: calc(20 * var(--cqw));}
  #soc2026 #categories ul { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6 * var(--cqw)); padding-left: 2%; padding-right: 2%; }
  #soc2026 #categories ul li { width: 100%; }
  #soc2026 #categories ul li a { height: calc(48 * var(--cqw)); font-size: calc(14 * var(--cqw)); padding: calc(4 * var(--cqw)); border-radius: calc(6 * var(--cqw)); /*border: calc(1 * var(--cqw)) solid var(--c-wt);*/ outline: calc(2 * var(--cqw)) solid var(--c-wt); outline-offset: calc(-2 * var(--cqw)); box-shadow: 0 0 0 calc(1 * var(--cqw)) var(--c-bu); }
  #soc2026 #categories ul li:first-child a { font-size: calc(18 * var(--cqw)); }
  #soc2026 #categories ul li a:hover { opacity: 1; }
  #soc2026 #categories ul li a::after { bottom: calc(6 * var(--cqw)); right: calc(8 * var(--cqw)); border-width: calc(5 * var(--cqw)) calc(4 * var(--cqw)) 0 calc(4 * var(--cqw)); }
  #soc2026 #categories ul li:first-child a { outline: calc(2 * var(--cqw)) solid var(--c-gd); outline-offset: calc(-2 * var(--cqw)); }

  #soc2026 .item-box { padding-top: calc(30 * var(--cqw) + 56px);  margin-top: calc(-15 * var(--cqw) - 56px); /*padding-top: calc(30 * var(--cqw) + 56px);  margin-top: calc(30 * var(--cqw) - 56px);*/}
  #soc2026 .item-box > h2 { padding: calc(8 * var(--cqw)) 0 calc(8 * var(--cqw)) calc(12 * var(--cqw)); font-size: calc(20 * var(--cqw)); }
  #soc2026 .item-box > h2 span span { font-size: calc(12 * var(--cqw)); }
  #soc2026 .item-box .lst { width: 100%; padding: calc(20 * var(--cqw)) 0; gap: calc(30 * var(--cqw)); }
  #soc2026 .item-box .box { display: grid; grid-template-columns: 5fr 4fr; gap: 0 calc(12 * var(--cqw)); padding-bottom: calc(24 * var(--cqw)); }
  #soc2026 .item-box .box > picture { grid-column: 1; grid-row: 2; width: 100%; align-self: start; }
  #soc2026 .item-box .box > picture img { width: 100%; height: auto; display: block; }
  #soc2026 .item-box .txt { grid-column: 1 / span 2; grid-row: 1 / span 2; display: contents; }
  #soc2026 .item-box .txt h3 { grid-column: 1 / span 2; grid-row: 1; font-size: calc(15.4 * var(--cqw)); line-height: 1.4; margin-bottom: calc(12 * var(--cqw)); }
  #soc2026 .item-box .txt h3 br{display: none;}
  #soc2026 .item-box .txt > form { display: contents; }
  #soc2026 .item-box .txt .spc { grid-column: 2; grid-row: 2; width: 100%; display: flex; flex-direction: column; gap: calc(4 * var(--cqw)); align-self: start; }
  /*#soc2026 .item-box .txt .prc { grid-column: 2; grid-row: 2; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; margin-top: calc(77 * var(--cqw)); }*/
  #soc2026 .item-box .txt .prc { grid-column: 2; grid-row: 2; width: 100%; display: block !important; text-align: left; margin-top: calc(62 * var(--cqw));/*margin-top: calc(77 * var(--cqw));*/ }
  #soc2026 .item-box .txt .btn-box { grid-column: 2; grid-row: 2; width: 100%; display: flex; flex-direction: column; gap: calc(6 * var(--cqw)); margin-top: calc(132 * var(--cqw)); /*margin-top: calc(162 * var(--cqw));*/ }
  #soc2026 .item-box .spc select { width: calc(160 * var(--cqw)); height: calc(25 * var(--cqw)); font-size: calc(13.4 * var(--cqw)); padding: 0 calc(24 * var(--cqw)) 0 calc(3 * var(--cqw)); background: #fff url('../../../images/campaign/sleepoasis-cp2026/icon_select_sp.webp') no-repeat right 0 center/auto 100%; -webkit-appearance: none; appearance: none;}
  #soc2026 .item-box .det, #soc2026 .item-box .grn { font-size: calc(9.4 * var(--cqw)); line-height: 1.4; color: var(--c-gy); }
  /*#soc2026 .item-box .prc .old { font-size: calc(11 * var(--cqw)); line-height: 1.4; margin-right: 0; margin-bottom: calc(2 * var(--cqw)); }
  #soc2026 .item-box .prc .tag { background: var(--c-cp); font-size: calc(11 * var(--cqw)); width: calc(57 * var(--cqw)); height: calc(18 * var(--cqw)); border-radius: calc(2 * var(--cqw)); }
  #soc2026 .item-box .prc .num { font-size: calc(30 * var(--cqw)); margin-top: calc(4 * var(--cqw)); }*/
  #soc2026 .item-box .prc .old { display: inline-block !important; font-size: calc(11 * var(--cqw)); line-height: 1.4; margin-right: calc(8 * var(--cqw)) !important; margin-bottom: 0; }
  #soc2026 .item-box .prc .tag { display: inline-flex !important; align-items: center; justify-content: center; background: var(--c-cp); font-size: calc(11 * var(--cqw)); width: calc(57 * var(--cqw)); height: calc(18 * var(--cqw)); border-radius: calc(2 * var(--cqw)); }
  #soc2026 .item-box .prc .num { display: block !important; font-size: calc(30 * var(--cqw)); margin-top: calc(4 * var(--cqw)); }
  #soc2026 .item-box .btn-box li { width: calc(160 * var(--cqw)); height: calc(29 * var(--cqw)); }
  #soc2026 .item-box .cart { padding-left: calc(40 * var(--cqw)); /*width: calc(36 * var(--cqw));*/font-size: calc(15 * var(--cqw));/*font-size: calc(16 * var(--cqw));*/ border-radius: calc(4 * var(--cqw)); }
  #soc2026 .item-box .cart::before { width: calc(40 * var(--cqw)); /*width: calc(36 * var(--cqw));*/ background-image: url('../../../images/campaign/sleepoasis-cp2026/icon_cart_sp.webp'); }
  #soc2026 .item-box .more { padding-left: calc(40 * var(--cqw)); /*width: calc(36 * var(--cqw));*/font-size: calc(15 * var(--cqw)); /*font-size: calc(16 * var(--cqw));*/border-radius: calc(4 * var(--cqw)); }
  #soc2026 .item-box .more::before { width: calc(40 * var(--cqw));/*width: calc(36 * var(--cqw));*/ background-image: url('../../../images/campaign/sleepoasis-cp2026/icon_more_sp.webp'); }
  #soc2026 .item-box .etc { padding: 0 calc(12 * var(--cqw)) calc(15 * var(--cqw));/*padding: 0 calc(12 * var(--cqw)) calc(40 * var(--cqw));*/ }
  #soc2026 .item-box .etc a { width: calc(278 * var(--cqw)); height: calc(39 * var(--cqw)); font-size: calc(17 * var(--cqw)); color: var(--c-gl); background: var(--c-yl); border: calc(1 * var(--cqw)) solid var(--c-gl); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--c-gl); font-weight: 500; }
  #soc2026 .item-box .etc a span::after { margin-left: calc(12 * var(--cqw)); font-size: calc(14 * var(--cqw)); font-weight: 900; display: inline-block; }

  #soc2026 #commitment { padding-bottom: calc(30 * var(--cqw)); /*padding-bottom: calc(40 * var(--cqw));*/ }
  #soc2026 #commitment > h2 { font-size: calc(18 * var(--cqw)); margin-top: calc(30 * var(--cqw)); margin-bottom: calc(15 * var(--cqw)); /*margin-top: calc(40 * var(--cqw)); margin-bottom: calc(24 * var(--cqw));*/ letter-spacing: 0.02em; }
  #soc2026 #commitment .--inr { padding: 0 calc(12 * var(--cqw)); gap: calc(10 * var(--cqw)); justify-content: space-between; }
  #soc2026 #commitment .--inr li { width: calc(110 * var(--cqw)); }

  #soc2026 #voice { padding: calc(30 * var(--cqw)) 0 calc(40 * var(--cqw)); }
  #soc2026 #voice .--inr { padding: 0 calc(15 * var(--cqw)); }
  #soc2026 #voice .sub-ttl { font-size: calc(14 * var(--cqw)); margin-bottom: calc(5 * var(--cqw)); letter-spacing: 0.05em; }
  #soc2026 #voice .box { display: grid; grid-template-columns: calc(147 * var(--cqw)) 1fr; gap: calc(5 * var(--cqw)); padding: calc(20 * var(--cqw)) 2% 0 2%; }
  #soc2026 #voice .box > picture { grid-column: 1; grid-row: 1; width: calc(147 * var(--cqw)); }
  #soc2026 #voice .txt { grid-column: 1 / span 2; grid-row: 1 / span 2; display: contents; }
  #soc2026 #voice .txt h3 { grid-column: 2; grid-row: 1; font-size: calc(19 * var(--cqw)); line-height: 1.4; align-self: center; letter-spacing: 0.02em; }
  #soc2026 #voice .comment { grid-column: 1 / span 2; grid-row: 2; font-size: calc(16 * var(--cqw)); line-height: 1.5; margin-top: calc(10 * var(--cqw)); }
  #soc2026 #voice .prof { grid-column: 1 / span 2; grid-row: 3; font-size: calc(14 * var(--cqw)); line-height: 1.5; margin-top: calc(20 * var(--cqw)); }
  #soc2026 #voice .prof span { font-size: calc(18 * var(--cqw)); margin-top: calc(4 * var(--cqw)); letter-spacing: 0.05em; }

  #soc2026 #coupon { padding: calc(30 * var(--cqw)) 2%; margin-bottom: calc(30 * var(--cqw));}
  #soc2026 #coupon .sub-ttl { font-size: calc(14 * var(--cqw)); margin-bottom: 0; }
  #soc2026 #coupon .main-ttl { font-size: calc(19 * var(--cqw)); margin-bottom: calc(20 * var(--cqw)); }
  #soc2026 #coupon .main-ttl span { font-size: calc(28.5 * var(--cqw)); }
  #soc2026 #coupon .ticket-area { margin-bottom: calc(24 * var(--cqw)); }
  #soc2026 #coupon .ticket-area img { width: 100%; max-width: calc(340 * var(--cqw)); margin: 0 auto; }
  #soc2026 #coupon .btn-copy { margin-bottom: calc(24 * var(--cqw)); }
  #soc2026 #coupon .js-copy-btn { width: calc(260 * var(--cqw)); height: calc(44 * var(--cqw)); font-size: calc(16 * var(--cqw)); border-radius: calc(22 * var(--cqw)); border-width: calc(1.5 * var(--cqw)); box-shadow: 0 calc(3 * var(--cqw)) calc(6 * var(--cqw)) rgba(0,0,0,0.15); }
  #soc2026 #coupon .coupon-notes { width: 100%; max-width: calc(340 * var(--cqw)); font-size: calc(14 * var(--cqw)); line-height: 1.5; }
  #soc2026 #coupon .coupon-notes span { font-size: calc(12 * var(--cqw)); line-height: 1.5; }

  #soc2026 #trial { padding: 0 0 calc(30 * var(--cqw)); /* padding: 0 0 calc(40 * var(--cqw)); */}
  #soc2026 #trial .--inr { padding: 0 calc(16 * var(--cqw)); }
  #soc2026 #trial .sub-ttl { font-size: calc(14 * var(--cqw)); margin-bottom: 0; }
  #soc2026 #trial h2 { font-size: calc(21 * var(--cqw)); margin-bottom: calc(21 * var(--cqw)); letter-spacing: 0.02em; }
  #soc2026 #trial .flow { flex-direction: column; gap: calc(12 * var(--cqw)); }
  #soc2026 #trial .flow li { width: 100%; max-width: calc(340 * var(--cqw)); height: calc(90 * var(--cqw)); padding-left: calc(52 * var(--cqw)); gap: calc(16 * var(--cqw)); border-radius: calc(4 * var(--cqw)); margin: 0 auto; justify-content: flex-start; }
  #soc2026 #trial .flow .num { width: calc(36 * var(--cqw)); height: calc(36 * var(--cqw)); font-size: calc(18 * var(--cqw)); }
  #soc2026 #trial .flow .txt { font-size: calc(17 * var(--cqw)); line-height: 1.3; width:calc(154 * var(--cqw));}
  #soc2026 #trial .flow .txt span { font-size: calc(14 * var(--cqw)); margin-top: calc(2 * var(--cqw)); margin-bottom: calc(2 * var(--cqw));}
  #soc2026 #trial .flow .txt .btn{width: 100%; height: calc(26 * var(--cqw)); font-size: calc(13 * var(--cqw)); border-radius: calc(13 * var(--cqw)); border-width: calc(1.5 * var(--cqw)); margin-top: calc(5 * var(--cqw));}

  #soc2026 #faq { padding: 0 0 calc(30 * var(--cqw)); /*padding: 0 0 calc(40 * var(--cqw));*/}
  #soc2026 #faq .--inr { padding: 0 calc(16 * var(--cqw)); }
  #soc2026 #faq .sub-ttl { font-size: calc(14 * var(--cqw)); margin-bottom: 0; }
  #soc2026 #faq dt { font-size: calc(17 * var(--cqw)); line-height: 1.4; margin-top: calc(16 * var(--cqw)); margin-bottom: calc(8 * var(--cqw)); letter-spacing: 0.01em; }
  #soc2026 #faq dt:first-of-type { margin-top: calc(12 * var(--cqw)); }
  #soc2026 #faq dd { font-size: calc(15 * var(--cqw)); line-height: 1.6; padding-left: 0; padding-bottom: calc(16 * var(--cqw)); }

}