@charset "UTF-8";
/* ==========================================================================
   AIR-BOOST 2026 mesh LP — new-section styles + FV overrides
   Loaded AFTER base/animation/module/layout/sp. Mirrors the reference site's
   design language: black ground, single orange (#ed6f00) accent, Reim 明朝 for
   emotional headings, Universltstd for English display, clamp() sizing.
   ========================================================================== */

:root{
  --accent:#ed6f00;
  --ink:#111;
  --gray:#e6e6e6;
  --gray2:#f2f2f7;
}

/* allow vertical scroll (reference body has overflow:hidden + #wrapper; we use <main>) */
body{overflow-x:hidden;overflow-y:visible}
main{display:block;overflow:hidden}
img{vertical-align:bottom}
.anchor_link{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.sp_el{display:none !important}
.pc_el{display:inline}

/* ---------------------------------------------------------------- FV ----- */
.mv_area{padding:16vw 0 8vw;min-height:84vh;display:flex;flex-direction:column;justify-content:center}
/* annotation: 「FV背景は広げて、良いバランスで」→ full-bleed cover (reference uses contain) */
.mv_area::before{background-size:cover !important;background-position:center top !important}
.mv_area .mv_tl_box{position:relative;z-index:2}
.mv_area .mv_logo{margin-bottom:3vw}
.mv_area .mv_logo img{width:34%;max-width:360px}
.mv_area .mv_headline{
  color:#fff;font-family:"Universltstd";font-weight:bold;
  font-size:clamp(40px,7vw,86px);letter-spacing:.06em;line-height:1;margin-bottom:1.2vw}
.mv_area .mv_subtl{
  color:var(--accent);font-size:clamp(16px,3vw,26px);letter-spacing:.25em;
  font-style:normal;margin-bottom:6vw}
.mv_area .mv_arrow{display:block;width:30px;height:54px;margin:2vw auto 0;position:relative}
.mv_area .mv_arrow span{
  position:absolute;left:50%;width:18px;height:18px;border-right:2px solid rgba(255,255,255,.8);
  border-bottom:2px solid rgba(255,255,255,.8);transform:translateX(-50%) rotate(45deg);
  animation:mvArrow 1.8s ease-in-out infinite}
.mv_area .mv_arrow span:nth-child(1){top:0;animation-delay:0s}
.mv_area .mv_arrow span:nth-child(2){top:14px;animation-delay:.15s}
.mv_area .mv_arrow span:nth-child(3){top:28px;animation-delay:.3s}
@keyframes mvArrow{0%,100%{opacity:.2}50%{opacity:1}}

/* ----------------------------------------------------- S02 statement ----- */
.statement_area{background:#000;color:#fff;text-align:center;padding:14vw 0}
.statement_area .statement_tl{
  font-size:clamp(30px,5vw,52px);line-height:1.5;margin-bottom:6vw;letter-spacing:.04em}
.statement_area .statement_txt p{
  font-size:clamp(16px,5vw,21px);line-height:2.4;letter-spacing:.04em;color:#dcdcdc}
.statement_area .statement_brand{
  font-family:"Universltstd";font-weight:bold;color:#fff;letter-spacing:.04em;
  font-size:clamp(22px,4vw,34px);margin:4vw 0 1.5vw}
.statement_area .statement_close{color:#fff;font-size:clamp(17px,5vw,23px);margin-top:1vw}

/* ------------------------------------------------------- S03 video ------- */
.video_area{background:#fff;padding:7vw 0}
.video_area .video{max-width:1000px;margin:auto}
.video_area .video_box{position:relative;aspect-ratio:16/9;background:#fff;overflow:hidden}
.video_area .video_box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video_area .video_poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#fff;cursor:pointer;display:block}
.video_area .video_poster img{width:100%;height:100%;object-fit:contain;display:block}
.video_area .play_btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:rgba(0,0,0,.55);transition:.3s;pointer-events:none}
.video_area .play_btn::before{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:15px 0 15px 26px;border-color:transparent transparent transparent #fff}
.video_area .video_poster:hover .play_btn{background:var(--accent);transform:translate(-50%,-50%) scale(1.08)}

/* -------------------------------------------------------- S04 hero ------- */
.hero2_area{position:relative;overflow:hidden;min-height:78vh;display:flex;align-items:center;
  background:url(../img/hero2-bg.webp) center 22% / cover no-repeat #000}
.hero2_area::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.15) 100%)}
.hero2_inner{position:relative;z-index:1;width:1100px;max-width:84vw;margin:auto;padding:8vw 0}
.hero2_logo{margin-bottom:2.4vw}
.hero2_logo img{width:200px;max-width:46%}
.hero2_tl{color:#fff;font-size:clamp(38px,7vw,88px);line-height:1.28;letter-spacing:.04em;
  text-shadow:0 6px 30px rgba(0,0,0,.6);margin-bottom:2.6vw}
.hero2_tag span{display:inline-block;background:var(--accent);color:#fff;font-weight:bold;
  font-size:clamp(15px,3vw,22px);padding:.55em 1.4em;letter-spacing:.06em}

/* --------------------------------------------------- chapters 00-09 ------ */
.chapters_area{background:#000}
.chapter_block{padding:9vw 0;position:relative;background:#000;color:#fff}
.chapter_block.gray{background:var(--gray);color:var(--ink)}
.chapter_block.white{background:#fff;color:var(--ink)}
.chapter_block.photo_bg{background-size:cover;background-position:center;background-repeat:no-repeat}
.chapter_block.photo_bg::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:0}
.chapter_block.photo_bg .inner_wrap_s{position:relative;z-index:1}
.chapter_head{margin-bottom:3vw}
.chapter_no{
  font-family:"Universltstd";font-weight:bold;letter-spacing:.02em;
  font-size:clamp(26px,4vw,40px);display:flex;align-items:baseline;flex-wrap:wrap;line-height:1.2}
.chapter_no .bar{color:var(--accent);margin:0 .1em}
.chapter_no .jp{font-family:"Reim";font-size:clamp(18px,3vw,26px);letter-spacing:.04em}
.chapter_no .big_stat_label{display:inline-flex;align-items:baseline;gap:.2em}
.chapter_no .big_stat{font-family:"Reim";font-size:clamp(56px,11vw,128px);color:var(--accent);line-height:.9;letter-spacing:0}
.chapter_no .big_stat small{font-size:.32em;color:inherit}
.chapter_tag{margin-top:1.4vw}
.chapter_tag span{
  display:inline-block;background:#fff;color:#000;font-weight:bold;
  font-size:clamp(15px,3vw,21px);padding:.5em 1.1em;letter-spacing:.04em;line-height:1.4}
.chapter_block.white .chapter_tag span,.chapter_block.gray .chapter_tag.dark span,
.chapter_tag.dark span{background:#000;color:#fff}
.chapter_lead{
  font-size:clamp(18px,4vw,27px);line-height:1.9;letter-spacing:.04em;margin-bottom:2.5vw}
.chapter_block .txt{font-size:clamp(15px,5vw,18px);line-height:2.2;letter-spacing:.02em}
.chapter_block .sub_txt{font-size:clamp(12px,5vw,13px);line-height:1.9;margin-top:1.5vw;opacity:.7}
.chapter_cols{display:flex;gap:4%;align-items:flex-start}
.chapter_cols .chapter_main{flex:1;min-width:0}
.chapter_cols .chapter_photo{flex:0 0 28%;max-width:300px}
.chapter_cols .chapter_photo.pair{display:flex;gap:8px;align-items:flex-end}
.chapter_cols .chapter_photo img{width:100%;height:auto}
.chapter_cols .chapter_photo.pair img:last-child{width:42%}
/* epilogue (dark scenic photo background) */
.chapter_block.epilogue{padding:11vw 0}

/* --------------------------------------------------- S15 survey ---------- */
.survey_area{background:#fff;color:var(--ink);padding:9vw 0}
.survey_area .survey_tl{font-size:clamp(24px,5vw,40px);font-weight:bold;text-align:center;line-height:1.4;margin-bottom:3vw}
.survey_area .survey_txt{font-size:clamp(14px,5vw,18px);line-height:2;text-align:center;margin-bottom:4vw}
.survey_area .survey_headline{
  font-size:clamp(20px,5vw,34px);font-weight:bold;text-align:center;line-height:1.5;
  color:#0a3d5c;margin-bottom:4vw;letter-spacing:.02em}
.survey_area .survey_headline::after{content:"";display:block;width:80px;height:4px;background:var(--accent);margin:1.5vw auto 0}
.survey_area .survey_outline{
  font-size:clamp(11px,5vw,13px);line-height:1.9;background:var(--gray2);
  padding:2.2em;margin:0 auto 6vw;max-width:760px;color:#555}
.survey_box{border-top:1px solid #ddd;padding:4vw 0}
.survey_box .question{
  font-size:clamp(16px,5vw,20px);font-weight:bold;line-height:1.6;margin-bottom:2.5vw;
  padding-left:1.4em;position:relative}
.survey_box .question::before{content:"Q";position:absolute;left:0;top:0;color:var(--accent);font-family:"Universltstd"}
.survey_box.summary .question{color:#0a3d5c}
.survey_box.summary .question::before{content:""}
/* chart: donut */
.chart{margin:2.5vw 0}
.chart.donut{display:flex;gap:5%;align-items:center;flex-wrap:wrap}
.chart.donut .ring{
  flex:0 0 auto;width:200px;height:200px;border-radius:50%;
  -webkit-mask:radial-gradient(circle,transparent 46%,#000 47%);
  mask:radial-gradient(circle,transparent 46%,#000 47%)}
.chart.donut .legend{flex:1;min-width:240px}
.chart.donut .legend li{display:flex;align-items:center;font-size:clamp(13px,5vw,16px);padding:.5em 0;border-bottom:1px dotted #ddd}
.chart.donut .legend .sw{width:16px;height:16px;border-radius:3px;margin-right:.7em;flex:0 0 auto}
.chart.donut .legend .lg{flex:1}
.chart.donut .legend b{font-family:"Universltstd";color:#0a3d5c;font-size:1.05em}
/* chart: bars */
.chart.bars li{display:flex;align-items:center;gap:1em;margin-bottom:1em}
.chart.bars .lbl{flex:0 0 38%;font-size:clamp(12px,5vw,15px);line-height:1.4}
.chart.bars .track{flex:1;height:22px;background:#eef3f6;border-radius:2px;overflow:hidden}
.chart.bars .bar{display:block;height:100%;width:var(--v);background:linear-gradient(90deg,#0a3d5c,#1f7ba8);border-radius:2px;transition:width 1s ease}
.chart.bars b{flex:0 0 auto;font-family:"Universltstd";color:#0a3d5c;font-size:clamp(13px,5vw,16px);min-width:3.2em;text-align:right}

/* --------------------------------------------------- mood heroes --------- */
.mood_area{position:relative;text-align:center;padding:9vw 0 6vw;overflow:hidden}
.mood_area.mesh{background:radial-gradient(circle at 50% 35%,#d2d4d7,#a9adb2)}
.mood_area.mesh,.mood_area.mesh .mood_note{color:#1a1a1a}
.mood_area.d3o{background:#000;color:#fff}
.mood_area.regular{background:radial-gradient(circle at 50% 30%,#f4f4f6,#dfe0e3);color:#1a1a1a}
.mood_area .mood_tl{font-size:clamp(22px,5vw,38px);line-height:1.6;letter-spacing:.04em;margin-bottom:1.5vw}
.mood_area .mood_note{font-size:clamp(11px,5vw,13px);opacity:.7;margin-bottom:1vw}
.mood_area .mood_vest{margin:1vw auto 0;max-width:440px}
.mood_area .mood_vest img{width:100%;height:auto;animation:floatVest 5s ease-in-out infinite;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
@keyframes floatVest{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}

/* --------------------------------------------------- products ------------ */
.product_area{background:#000;color:#fff;padding:7vw 0}
.product_area .product_action{margin-bottom:4vw}
.product_area .product_action img{width:100%;display:block}
.product_area .product_photo{text-align:center;margin:0 auto 2vw;max-width:360px}
.product_area .product_photo img{width:auto;max-width:60%;height:auto}
.product_area .product_colors{text-align:center;margin-bottom:3vw}
.product_area .product_colors img{max-width:55%;height:auto;margin:0 auto 1vw}
.product_area .color_txt{font-size:clamp(13px,3vw,16px);letter-spacing:.08em;color:#cfcfcf}
.product_area .product_chips{text-align:center;margin:3vw auto}
.product_area .product_chips img{max-width:48%;height:auto;margin-bottom:1.5vw}
.product_area .chip_list{display:flex;flex-wrap:wrap;justify-content:center;gap:.8em 1.4em}
.product_area .chip_list li{
  font-size:clamp(12px,3vw,14px);border:1px solid rgba(255,255,255,.5);
  padding:.5em 1.1em;border-radius:2em;color:#ddd}
.product_area .txt{font-size:clamp(15px,5vw,18px);line-height:2.1}
.product_area .sub_txt{font-size:clamp(12px,5vw,13px);line-height:1.9;margin-top:1.5vw;opacity:.7}
.product_area .txt_box{text-align:center;margin:4vw 0 3vw}
.product_area .txt_box .tl{font-size:clamp(22px,5vw,32px);letter-spacing:-.01em;line-height:1.3;margin-bottom:1.5vw}
.product_area .txt_box .size_txt{font-size:clamp(13px,3vw,16px);letter-spacing:.06em;margin-bottom:1.5vw;color:#cfcfcf}
.product_area .txt_box .txt small{font-size:clamp(11px,3vw,12px);display:inline-block;margin-top:.6em;color:#aaa;line-height:1.7}
.product_area .product_last_btn{margin:3vw auto 0}
/* D3O standard-equip + What is D3O cards */
.d3o_std_box{border:1px solid rgba(255,255,255,.3);padding:2em;margin:4vw 0 3vw}
.d3o_std_box .tl_box{border-bottom:2px solid #fff;margin-bottom:1.2em}
.d3o_std_box .tl{font-size:clamp(17px,3vw,22px);font-weight:bold;display:flex;align-items:baseline;flex-wrap:wrap;gap:.6em;padding-bottom:.5em}
.d3o_std_box .tl .sub_tl{font-size:.7em;color:var(--accent)}
.d3o_std_box .txt{font-size:clamp(14px,5vw,16px);line-height:2}
.whatisd3o_box{background:#0d0d0d;border-top:3px solid var(--accent);padding:2.4em 2em;margin:0 0 3vw;text-align:center}
.whatisd3o_box .whatis_tl{color:var(--accent);font-family:"Universltstd";font-weight:bold;font-size:clamp(24px,4vw,40px);margin-bottom:1.2em}
.whatisd3o_box .photo{max-width:300px;margin:0 auto 1.4em}
.whatisd3o_box .photo img{width:100%}
.whatisd3o_box .txt{font-size:clamp(14px,5vw,16px);line-height:2;text-align:left}

/* --------------------------------------------------- Specifications ------ */
.spec_area{background:#000;color:#fff;padding:8vw 0}
.spec_area .spec_tl{text-align:center;font-size:clamp(22px,4vw,32px);font-family:"Universltstd";font-weight:bold;letter-spacing:.04em;margin-bottom:6vw}
.spec_area .spec_tl span{display:block;font-size:.7em;color:var(--accent);letter-spacing:.12em;margin-top:.3em}
.spec_grid{display:grid;grid-template-columns:1fr 1fr;gap:5% 6%}
.spec_box{margin-bottom:3vw}
.spec_box .photo{height:170px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5vw}
.spec_box .photo img{max-width:100%;max-height:170px;width:auto;height:auto}
.spec_box .tl_box{border-bottom:2px solid #fff;margin-bottom:1.2vw;padding-bottom:.6em}
.spec_box .tl{font-size:clamp(16px,3vw,20px);font-weight:bold;line-height:1.4;display:flex;align-items:baseline;flex-wrap:wrap;gap:.4em}
.spec_box .tl .sub_tl{font-size:.7em;color:#bbb}
.spec_box .txt{font-size:clamp(13px,5vw,15px);line-height:1.95}
.spec_box .sub_txt{font-size:clamp(11px,5vw,12px);opacity:.6;margin-top:.8em}
.spec_box .mode_name_list{display:flex;flex-wrap:wrap;gap:.5em;margin-top:1em}
.spec_box .mode_name_list li{font-size:clamp(11px,3vw,13px);border:1px solid var(--accent);color:var(--accent);padding:.3em .8em;letter-spacing:.04em}

/* --------------------------------------------------- attachment ---------- */
.attachment_area{background:#000;color:#fff;padding:0 0 7vw}
.attachment_box{margin-bottom:5vw}
.attachment_box .tl_box{border-bottom:2px solid #fff;margin-bottom:1.6vw;padding-bottom:.6em}
.attachment_box .tl{font-size:clamp(17px,3vw,23px);font-weight:bold;line-height:1.4}
.attachment_box .photo{max-width:600px;margin:0 auto 2vw}
.attachment_box .photo img{width:100%}
.attachment_box .txt{font-size:clamp(14px,5vw,17px);line-height:2.1}
.attachment_box .sub_txt{font-size:clamp(12px,5vw,13px);opacity:.7;margin-top:1.2vw;line-height:1.8}
/* inflator full text box (no icon) */
.inflator_area .inflator_list .box .txt_box.full{width:100%;margin-left:0}

/* --------------------------------------------------- options ------------- */
.option_area{background:#0a0a0a;color:#fff;padding:8vw 0}
.option_area .option_tl{text-align:center;margin:0 0 4vw}
.option_area .option_tl span{display:inline-block;border:1px solid #fff;padding:.5em 1.6em;font-size:clamp(16px,3vw,22px);letter-spacing:.06em}
.option_grid{display:grid;grid-template-columns:1fr 1fr;gap:4% 5%;margin-bottom:4vw}
.option_box{border:1px solid rgba(255,255,255,.22);padding:2em 1.8em;display:flex;flex-direction:column}
.option_box .photo{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5em}
.option_box .photo img{max-width:80%;max-height:150px;width:auto;height:auto}
.option_box .tl{font-family:"Universltstd";font-weight:bold;font-size:clamp(18px,3vw,24px);color:var(--accent);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:.5em;margin-bottom:.9em}
.option_box .tl .jp{display:block;font-family:"Reim";color:#fff;font-size:.62em;margin-top:.4em;letter-spacing:.02em;line-height:1.4}
.option_box .color_txt{font-size:clamp(12px,3vw,14px);color:var(--accent);letter-spacing:.04em;margin-bottom:.8em}
.option_box .txt{font-size:clamp(13px,5vw,15px);line-height:1.9;flex:1}
.option_box .price_txt{font-size:clamp(13px,3vw,15px);font-weight:bold;margin-top:1em;letter-spacing:.02em}
.option_box .sub_txt{font-size:clamp(11px,5vw,12px);opacity:.6;margin-top:.6em;line-height:1.7}
.option_area .option_warning{font-size:clamp(12px,5vw,13px);border:1px solid rgba(255,255,255,.3);padding:1.2em 1.5em;line-height:1.8;margin-bottom:6vw}

/* --------------------------------------------------- for RACING ---------- */
.racing_area{background:#000;color:#fff;padding:0 0 8vw;position:relative}
.racing_area .racing_photo img{width:100%;display:block}
.racing_area .racing_tl{font-family:"Universltstd";font-style:italic;font-weight:bold;font-size:clamp(40px,8vw,90px);text-align:center;letter-spacing:.02em;margin:5vw 0 1.5vw;color:#fff}
.racing_area .racing_sub{text-align:center;font-size:clamp(16px,4vw,24px);margin-bottom:5vw;letter-spacing:.06em}
.racing_area .racing_pads{max-width:760px;margin:0 auto 5vw}
.racing_area .racing_pads img{width:100%}
.racing_area .racing_grid{position:relative;max-width:1100px;margin:auto}
.racing_area .racing_grid img{width:100%}
.racing_area .racing_copy{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;font-size:clamp(22px,5vw,40px);line-height:1.6;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.8)}

/* --------------------------------------------------- how to wear --------- */
.howtowear_area .step_list{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4vw 2%;margin:4vw 0;padding:0}
.howtowear_area .step_list li{margin:0;display:flex;flex-direction:column}
.howtowear_area .step_list .photo{margin-bottom:1.2em;aspect-ratio:4/3;overflow:hidden;background:#111;border-radius:2px}
.howtowear_area .step_list .photo img{width:100%;height:100%;object-fit:cover;display:block}
.howtowear_area .step_txt{font-size:clamp(12px,1.4vw,14px);line-height:1.85;position:relative;padding-left:2.4em}
.howtowear_area .step_txt .num{
  position:absolute;left:0;top:0;width:1.7em;height:1.7em;border-radius:50%;
  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:"Universltstd";font-size:1em;line-height:1}

/* --------------------------------------------------- deflation ring ------ */
.deflation_area{background:#000;color:#fff;padding:7vw 0}
.deflation_area .deflation_lead{font-size:clamp(18px,4vw,26px);line-height:1.8;text-align:center;margin-bottom:4vw;letter-spacing:.03em}
.deflation_card{border:1px solid rgba(255,255,255,.25);padding:2.4em}
.deflation_card .tl_box{border-bottom:2px solid #fff;margin-bottom:1.6em;padding-bottom:.5em}
.deflation_card .tl{font-size:clamp(18px,3vw,24px);font-weight:bold;display:flex;align-items:baseline;flex-wrap:wrap;gap:.8em}
.deflation_card .tl .sub_tl{font-size:.6em;color:var(--accent)}
.deflation_card .deflation_photos{display:flex;gap:4%;justify-content:center;align-items:flex-end;margin-bottom:2em;flex-wrap:wrap}
.deflation_card .deflation_photos img{height:auto}
.deflation_card .txt{font-size:clamp(14px,5vw,16px);line-height:2}
.deflation_card .step_tl{color:var(--accent);font-weight:bold;font-size:clamp(15px,3vw,18px);margin:1.4em 0 .5em}
.deflation_card .sub_txt{font-size:clamp(12px,5vw,13px);opacity:.7;line-height:1.8;margin-top:1.4em;border-top:1px solid rgba(255,255,255,.2);padding-top:1.2em}

/* --------------------------------------------------- compatibility ------- */
.compatibility_area{background:#000;color:#fff;padding:0 0 8vw;position:relative}
.compatibility_area .compatibility_photo img{width:100%;display:block;opacity:.85}
.compatibility_area .compatibility_tl{font-family:"Reim";font-size:clamp(24px,5vw,42px);line-height:1.5;text-align:center;margin:5vw 0 3vw;letter-spacing:.04em}
.compatibility_area .txt{font-size:clamp(14px,5vw,17px);line-height:2.1}
.compatibility_area .condition_box{display:flex;gap:4%;align-items:center;margin:3vw 0;flex-wrap:wrap}
.compatibility_area .condition_box .photo{flex:0 0 30%;max-width:240px}
.compatibility_area .condition_box .photo img{width:100%}
.compatibility_area .condition_box .txt{flex:1;min-width:260px}
.compatibility_area .measure_tl{font-size:clamp(18px,4vw,26px);font-weight:bold;text-align:center;border-top:2px solid var(--accent);padding-top:1em;margin:2vw 0}
.compatibility_area .measure_figs{display:flex;gap:3%;justify-content:center;flex-wrap:wrap;margin:2vw 0}
.compatibility_area .measure_figs img{max-width:48%;height:auto;background:#fff;padding:1em;border-radius:4px}
.compatibility_area .step_tl{font-size:clamp(15px,3vw,19px);font-weight:bold;margin:1.6em 0 .6em;display:flex;align-items:baseline;gap:.8em;flex-wrap:wrap}
.compatibility_area .step_tl .step_label{background:var(--accent);color:#fff;font-size:.7em;padding:.3em .9em}
.compatibility_area .formula_txt{font-family:"Universltstd";font-weight:bold;font-size:clamp(22px,4vw,34px);color:var(--accent);letter-spacing:.04em;margin:.5em 0}
.compatibility_area .judge_txt{font-size:clamp(14px,5vw,17px);font-weight:bold;line-height:1.7;margin:.6em 0;padding-left:1.4em;position:relative}
.compatibility_area .judge_txt::before{position:absolute;left:0}
.compatibility_area .judge_txt.ok{color:var(--accent)}
.compatibility_area .judge_txt.ok::before{content:"○"}
.compatibility_area .judge_txt.ng{color:#9aa0a6}
.compatibility_area .judge_txt.ng::before{content:"×"}
.compatibility_area .sub_txt{font-size:clamp(11px,5vw,13px);opacity:.7;line-height:1.9;margin-top:1.6em;border-top:1px solid rgba(255,255,255,.2);padding-top:1.2em}

/* --------------------------------------------------- user guide ---------- */
.userguide_area{background:#fff;color:var(--ink);padding:0 0 8vw}
.userguide_area .guide_band{background:#888;color:#fff;padding:1em 0}
.userguide_area .guide_band span{display:block;width:1100px;max-width:84vw;margin:auto;font-size:clamp(15px,3vw,18px);font-weight:bold;letter-spacing:.06em}
.userguide_area .guide_tl{font-size:clamp(20px,4vw,28px);font-weight:bold;margin:5vw 0 2vw;border-left:5px solid var(--accent);padding-left:.6em}
.userguide_area .txt{font-size:clamp(14px,5vw,16px);line-height:2}
.userguide_area .sub_txt{font-size:clamp(12px,5vw,13px);line-height:1.9;color:#666;margin-top:1.5vw}
.size_table_wrap{overflow-x:auto;margin:3vw 0}
.size_table{width:100%;border-collapse:collapse;font-size:clamp(12px,2.4vw,15px);min-width:560px}
.size_table th,.size_table td{border:1px solid #ccc;padding:.9em .6em;text-align:center}
.size_table thead th{background:#222;color:#fff}
.size_table tbody th{background:var(--gray2);text-align:left;font-weight:normal;white-space:nowrap}
.size_table tbody tr:nth-child(even) td{background:#fafafa}
.guide_box{border-top:1px solid #ddd;margin-top:3vw;position:relative;padding-bottom:4vw}
.guide_box .guide_toggle_head .tl{font-size:clamp(17px,3vw,22px);font-weight:bold;padding:1.2em 0 .6em;display:flex;align-items:center}
.guide_box .guide_toggle_head .tl::before{content:"+";color:var(--accent);font-family:"Universltstd";margin-right:.5em;font-size:1.2em}
.guide_box .hide_container_faq{display:none}
.guide_toggle_body{padding:1em 0 2em}
.guide_toggle_body .step_tl{font-size:clamp(15px,3vw,18px);font-weight:bold;margin:1.4em 0 .5em;color:#333}
.guide_toggle_body .formula_txt{font-family:"Universltstd";font-weight:bold;font-size:clamp(22px,4vw,32px);color:var(--accent);margin:.4em 0}
.guide_toggle_body .judge_txt{font-size:clamp(14px,5vw,16px);font-weight:bold;margin:.5em 0;padding-left:1.4em;position:relative}
.guide_toggle_body .judge_txt::before{position:absolute;left:0}
.guide_toggle_body .judge_txt.ok{color:var(--accent)}
.guide_toggle_body .judge_txt.ok::before{content:"○"}
.guide_toggle_body .judge_txt.ng{color:#9aa0a6}
.guide_toggle_body .judge_txt.ng::before{content:"×"}
.guide_toggle_body .qr{max-width:92px;margin:1em 0}
.guide_toggle_body .qr img{width:100%}
.guide_toggle_body .measure_figs{display:flex;gap:3%;margin:1.5em 0}
.guide_toggle_body .measure_figs img{max-width:38%;height:auto;border:1px solid #eee}
.guide_box .moreButtonFaq{position:absolute;right:0;top:1.4em;font-size:clamp(12px,3vw,14px);color:var(--accent)}

/* --------------------------------------------------- modes (4th text logo) */
.mode_area .mode_box .logo.txt_logo{display:flex;align-items:center;justify-content:center}
.mode_area .mode_box .logo.txt_logo .en{font-family:"Universltstd";font-weight:bold;font-size:clamp(26px,4vw,40px);color:#000;letter-spacing:.02em;line-height:1.1;text-align:center}

/* --------------------------------------------------- popups -------------- */
.popup-a{display:none}
.popup-a .scroll{width:100%;height:100%;overflow:auto;display:block;-webkit-overflow-scrolling:touch}
.popup-a .popup_doc{max-width:1000px;margin:5vh auto 12vh;background:#fff;color:var(--ink);border-radius:4px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.popup-a .popup_doc .chart{width:100%;max-width:100%;margin:0}
.popup-a .popup_doc .chart img{width:100%;height:auto;display:block}
.popup-a .popup_doc .chart figcaption{font-size:12px;color:#888;text-align:right;padding:8px 16px;background:#f4f4f6;border-bottom:1px solid #e3e3e6}
.popup-a .popup_text{padding:clamp(22px,4vw,46px)}
.popup-a .popup_text .doc_lead{font-size:clamp(18px,3vw,26px);font-weight:bold;line-height:1.5;margin-bottom:.8em}
.popup-a .popup_text .doc_lead strong{color:var(--accent)}
.popup-a .popup_text .doc_tl{font-size:clamp(20px,3vw,28px);font-weight:bold;border-left:5px solid var(--accent);padding-left:.5em;margin:1.6em 0 .8em}
.popup-a .popup_text .doc_tl:first-child{margin-top:0}
.popup-a .popup_text .doc_sub{font-size:clamp(16px,2.4vw,20px);font-weight:bold;margin:1.6em 0 .6em;border-bottom:2px solid #222;padding-bottom:.3em}
.popup-a .popup_text p{font-size:clamp(13px,1.7vw,15px);line-height:1.9;margin-bottom:1em}
.popup-a .popup_text .doc_small{font-size:clamp(11px,1.5vw,12.5px);line-height:1.8;color:#555}
.popup-a .doc_table_wrap{overflow-x:auto;margin:1em 0 1.4em}
.popup-a .doc_table{width:100%;border-collapse:collapse;font-size:clamp(11px,1.5vw,14px);min-width:560px}
.popup-a .doc_table th,.popup-a .doc_table td{border:1px solid #ccc;padding:.7em .7em;vertical-align:middle;line-height:1.6}
.popup-a .doc_table thead th{background:#222;color:#fff;text-align:center}
.popup-a .doc_table thead th span{display:block;font-size:.78em;color:var(--accent);margin-top:.3em}
.popup-a .doc_table tbody th{background:var(--gray2);text-align:left;font-weight:normal}
.popup-a .doc_table .grp{background:#222;color:#fff;text-align:center;font-weight:bold;writing-mode:vertical-rl;white-space:nowrap}
.popup-a .doc_table.plan td{text-align:center;font-weight:bold}
.popup-a .doc_table.plan td small{display:block;font-weight:normal;color:#666;font-size:.78em;margin-top:.4em;line-height:1.5}
.popup-a .doc_table.spec td{text-align:left}
.popup-a .doc_notes{margin:0 0 1.4em;padding-left:0;list-style:none}
.popup-a .doc_notes li{font-size:clamp(10.5px,1.4vw,12px);line-height:1.8;color:#555;margin-bottom:.4em}
.popup-a .doc_ul{margin:.4em 0 1.2em;padding-left:1.4em}
.popup-a .doc_ul li{font-size:clamp(12px,1.6vw,14px);line-height:1.8;list-style:disc}
.popup-a .warn_box{border:1px solid #ddd;border-left-width:5px;padding:1.1em 1.3em;margin:0 0 1em;border-radius:2px}
.popup-a .warn_box h3{font-size:clamp(14px,2vw,17px);font-weight:bold;margin-bottom:.5em}
.popup-a .warn_box.danger{border-left-color:#c81e1e;background:#fdf3f3}
.popup-a .warn_box.danger h3{color:#c81e1e}
.popup-a .warn_box.warning{border-left-color:var(--accent);background:#fff7ef}
.popup-a .warn_box.warning h3{color:#b85600}
.popup-a .warn_box.caution{border-left-color:#888;background:#f6f6f6}
.popup-a .warn_box.caution h3{color:#555}
.popup-a .warn_box .warn_lbl{font-weight:bold;font-size:clamp(12px,1.5vw,13px);margin:.6em 0 .2em;color:#333}
.popup-a .warn_box p{font-size:clamp(11.5px,1.5vw,13px);line-height:1.85;margin-bottom:.4em}
.popup-a .hide-popup{position:fixed;right:4vw;top:3vh;cursor:pointer;width:40px;height:40px;z-index:3}
.popup-a .hide-popup::after{content:"閉じる";position:absolute;top:44px;left:50%;transform:translateX(-50%);font-size:11px;color:#fff;white-space:nowrap}
.popup-a .hide-popup span{display:block;position:absolute;width:40px;height:2px;left:0;top:20px;background:#fff}
.popup-a .hide-popup span:nth-child(1){transform:rotate(45deg)}
.popup-a .hide-popup span:nth-child(2){transform:rotate(-45deg)}

/* --------------------------------------------------- footer extras ------- */
footer .ft_bottom .company_txt{color:#9a9a9a;font-size:clamp(11px,3vw,13px);line-height:1.9;margin:2vw auto 0;max-width:760px}
footer .ft_bottom .copyright{color:#cfcfcf;font-family:"Universltstd";font-size:clamp(11px,3vw,13px);letter-spacing:.04em;margin-top:1.5vw}
footer .ft_bottom .base_btn{margin-bottom:2vw}

/* --------------------------------------------------- inflator title ------ */
/* drop top margin so the collapsed margin doesn't expose the white page bg
   between two black sections; give the section its own top padding instead */
.inflator_area{padding-top:5vw}
.inflator_area .inflator_tl{margin-top:0}

/* ===== Always-expanded sections (no accordion) =====================
   Per request: chapters / inflator / compatibility / faq show the full
   detail text inline — remove the moreButton/moreButtonFaq + collapse. */
.chapters_area .hide_container,
.inflator_area .hide_container,
.compatibility_area .hide_container{height:auto !important;overflow:visible}
.chapters_area .hide_container::before,
.inflator_area .hide_container::before,
.compatibility_area .hide_container::before{display:none !important}
.chapters_area .moreButton,
.inflator_area .moreButton,
.compatibility_area .moreButton{display:none !important}
/* FAQ: reveal the whole list and every answer, hide all toggles */
.faq_area .hide_container_faq{display:block !important}
.faq_area .moreButtonFaq{display:none !important}
.faq_area .faq_box{padding-bottom:3vw}

/* ==========================================================================
   Responsive (≤768px). Reference uses a viewport-scale trick on PC; here we
   collapse multi-column blocks and resize for small screens.
   ========================================================================== */
@media screen and (max-width:768px){
  .pc_el{display:none !important}
  .sp_el{display:inline !important}
  .mv_area .mv_logo img{width:60%}
  .mv_area .mv_headline{font-size:clamp(34px,11vw,56px)}
  .chapter_cols{display:block}
  .chapter_cols .chapter_photo{max-width:60%;margin:5vw auto 0}
  .chapter_cols .chapter_photo.pair{max-width:80%}
  .chapter_no .big_stat{font-size:clamp(46px,18vw,90px)}
  .chart.donut{justify-content:center}
  .chart.donut .ring{width:160px;height:160px}
  .chart.bars .lbl{flex-basis:46%}
  .spec_grid{grid-template-columns:1fr;gap:0}
  .spec_box{margin-bottom:10vw}
  .option_grid{grid-template-columns:1fr;gap:0}
  .option_box{margin-bottom:8vw}
  .howtowear_area .step_list{grid-template-columns:1fr 1fr;gap:6vw 4%}
  .howtowear_area .step_txt{font-size:clamp(12px,3vw,15px)}
  .hero2_area{min-height:68vh}
  .hero2_logo img{width:140px}
  .mood_area .mood_vest{max-width:78%}
  .product_area .product_photo img{max-width:55%}
  .compatibility_area .condition_box .photo{flex-basis:60%;margin:0 auto 4vw}
  .compatibility_area .measure_figs img{max-width:90%;margin-bottom:3vw}
  .deflation_card .deflation_photos img{max-width:40%}
  .popup-a .chart{max-width:96vw}
  .popup-a .hide-popup{right:5vw;top:5vw}
}