:root{--blue:#53c6ee;--deep:#0a2439;--ink:#132a3b;--pale:#eefaff;--line:#c7e4ee;--max:1160px;--pad:clamp(20px,5vw,48px)}*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}body{font-family:"Noto Sans JP",sans-serif;color:var(--ink);font-size:16px;line-height:1.9;letter-spacing:.03em;background:#fff}a{color:inherit;text-decoration:none}.container{width:min(100%,var(--max));margin:auto;padding-inline:var(--pad)}header{height:78px;display:flex;align-items:center;gap:32px;padding-inline:var(--pad);background:#fff;position:sticky;z-index:10;top:0;border-bottom:1px solid var(--line)}.brand img{display:block;width:85px;max-height:58px;object-fit:contain}nav{display:flex;gap:25px;font-size:14px;font-weight:700;margin-left:auto}.head-cta{background:var(--deep);color:#fff;padding:10px 17px;font-size:13px;font-weight:700}.hero{min-height:calc(100svh - 78px);display:grid;align-items:center;position:relative;overflow:hidden;color:#fff;background:var(--deep)}.hero-photo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,32,49,.93),rgba(7,32,49,.72) 50%,rgba(7,32,49,.18)),url('assets/used/runfit-hero.webp') center/cover no-repeat}.hero-inner{position:relative;padding-block:clamp(82px,12vw,160px)}.hero-brand{font-family:"Barlow Condensed",sans-serif;font-size:clamp(34px,4.5vw,58px);font-weight:800;line-height:1;letter-spacing:.01em;margin-bottom:18px}.hero-brand span{color:var(--blue)}.eyebrow{font-family:"Barlow Condensed",sans-serif;letter-spacing:.2em;font-weight:700;font-size:14px;color:#c8f4ff}.blue{color:#1586ae}h1,h2{font-weight:900;line-height:1.25;letter-spacing:-.045em}h1{font-size:clamp(48px,7.6vw,94px);margin-top:16px}h1 em{font-style:normal;color:var(--blue)}.hero p:not(.eyebrow){font-size:clamp(15px,1.8vw,19px);margin-top:29px;color:#e5f5fa}.hero-points{display:flex;gap:10px;flex-wrap:wrap;margin-top:31px}.hero-points span{border:1px solid rgba(255,255,255,.6);padding:7px 13px;font-size:13px;font-weight:700}.button{display:inline-flex;flex-direction:column;text-align:center;background:var(--blue);color:var(--deep);padding:16px 28px;margin-top:31px;font-weight:900;line-height:1.4;min-width:275px;transition:.18s}.button:hover{transform:translateY(-3px);background:#a3e8fb}.button strong{font-family:"Barlow Condensed",sans-serif;font-size:23px;letter-spacing:.05em}.intro{background:var(--blue);padding-block:clamp(72px,10vw,132px)}.intro-grid,.smart-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:70px;align-items:end}h2{font-size:clamp(32px,5vw,61px);margin-top:12px}.intro-grid>p,.smart-grid>p{font-size:16px}.features{padding-block:clamp(75px,10vw,132px);background:var(--pale)}.photo-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:12px;margin-top:36px}.photo-layout img{display:block;width:100%;height:100%;object-fit:cover}.photo-main{min-height:460px}.photo-layout>div{display:grid;grid-template-rows:1fr auto;gap:12px}.photo-layout>div img{height:295px}.photo-layout p{font-size:14px;padding:18px;background:#fff}.machine-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:12px}.machine-grid article{padding:22px 15px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:133px}.machine-grid b{font-family:"Barlow Condensed",sans-serif;font-size:38px;color:#1997c2;line-height:1}.machine-grid span{display:block;font-size:13px;font-weight:700;line-height:1.5;margin-top:12px}.caption,.plan-note{font-size:12px;color:#507082;margin-top:14px}.plans{padding-block:clamp(75px,10vw,132px)}.center{text-align:center}.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--deep);margin-top:42px}.plan-grid article{background:#fff;text-align:center;padding:43px 18px}.plan-grid .plan-featured{background:var(--blue)}.plan-grid p{font-weight:700}.plan-grid strong{display:block;font-family:"Barlow Condensed",sans-serif;font-size:clamp(54px,5vw,76px);letter-spacing:-.05em;line-height:1;margin-top:18px}.plan-grid small{font-family:"Noto Sans JP",sans-serif;font-size:13px;letter-spacing:0}.plan-grid span{display:block;font-size:12px;margin-top:14px;color:#456372}.smart{background:var(--deep);color:#fff;padding-block:clamp(72px,10vw,125px)}.smart .blue{color:var(--blue)}.smart-grid>p{color:#d6edf4}.join{background:var(--blue);padding-block:clamp(75px,10vw,130px)}.join .container{max-width:890px}.join ol{list-style:none;padding:0;margin-top:39px;border-top:1px solid rgba(10,36,57,.35)}.join li{display:grid;grid-template-columns:66px 1fr;gap:20px;padding:21px 0;border-bottom:1px solid rgba(10,36,57,.35)}.join li span{font-family:"Barlow Condensed",sans-serif;font-size:32px;line-height:1}.join h3{font-size:18px}.join li p,.payment{font-size:14px;margin-top:4px}.payment{margin-top:18px}.message{padding-block:clamp(75px,10vw,130px)}.message .container{max-width:900px}.message blockquote{font-size:clamp(28px,4.4vw,50px);font-weight:900;line-height:1.42;letter-spacing:-.04em;margin-top:14px}.message p{max-width:590px;margin-top:28px}.message cite{display:block;font-style:normal;font-weight:700;margin-top:16px}.contact{background:var(--pale);padding-block:clamp(75px,11vw,140px);text-align:center}.contact .container{max-width:730px}.contact>p{margin-top:22px}.contact .button{background:var(--deep);color:#fff}footer{background:var(--deep);color:#d8eaf1;padding:30px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:12px}footer img{width:58px;max-height:53px;object-fit:contain;filter:brightness(0) invert(1)}footer small{font-size:10px}.mobile-cta{display:none}@media(max-width:760px){body{padding-bottom:61px}header{height:66px}.brand img{width:62px;max-height:49px}header nav{display:none}.head-cta{font-size:11px;margin-left:auto;padding:8px 10px}.hero{min-height:calc(100svh - 66px)}.hero-photo{background:linear-gradient(180deg,rgba(7,32,49,.68),rgba(7,32,49,.94) 72%),url('assets/used/runfit-hero.webp') center/cover no-repeat}.hero-inner{padding-block:74px 88px}.intro-grid,.smart-grid{grid-template-columns:1fr;gap:27px}.photo-layout{grid-template-columns:1fr}.photo-main{min-height:280px}.photo-layout>div{grid-template-columns:1fr 1fr;grid-template-rows:none}.photo-layout>div img{height:180px}.photo-layout p{font-size:12px}.machine-grid{grid-template-columns:repeat(2,1fr)}.plan-grid{grid-template-columns:1fr}.plan-grid article{padding:30px}.join li{grid-template-columns:50px 1fr;gap:13px}.mobile-cta{display:block;position:fixed;z-index:20;bottom:0;left:0;right:0;background:var(--blue);color:var(--deep);font-size:13px;font-weight:900;text-align:center;padding:9px}.mobile-cta strong{font-family:"Barlow Condensed",sans-serif;font-size:20px;margin-left:7px}footer{padding-bottom:25px;flex-wrap:wrap}}

.photo-subgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:295px}.photo-subgrid img{height:100%!important}.manager-grid{display:grid;grid-template-columns:minmax(220px,310px) 1fr;gap:clamp(32px,6vw,78px);align-items:center;max-width:980px!important}.manager-grid>img{display:block;width:100%;height:auto!important;aspect-ratio:4/5;object-fit:cover}.location{background:var(--pale);padding-block:clamp(75px,10vw,130px)}.location-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:34px}.location address{font-style:normal;font-weight:700;line-height:1.9}.map-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:12px}.map-grid iframe{width:100%;min-height:410px;border:0}.route-card{background:var(--deep);color:#fff;padding:clamp(27px,4vw,42px);display:flex;flex-direction:column;justify-content:space-between}.route-card p{font-size:17px;font-weight:700;line-height:1.8}.route-card a{display:block;background:var(--blue);color:var(--deep);padding:14px;font-size:14px;font-weight:900;text-align:center}.contact .contact-phone{margin-top:18px;font-size:15px;font-weight:700}.contact .contact-phone a{color:#0b7398;text-decoration:underline;text-underline-offset:4px}@media(max-width:760px){.photo-subgrid{height:180px;gap:8px}.manager-grid{grid-template-columns:1fr;gap:27px}.manager-grid>img{max-width:270px;height:auto!important;aspect-ratio:1/1}.location-head{display:block}.location address{margin-top:22px}.map-grid{grid-template-columns:1fr}.map-grid iframe{min-height:300px}.route-card{gap:28px}}

.done-hero{background:var(--deep);color:#fff;padding-block:clamp(70px,10vw,120px);text-align:center}
.check-badge{width:64px;height:64px;margin:0 auto 22px}
.check-badge svg{width:100%;height:100%}
.check-badge circle{fill:none;stroke:var(--blue);stroke-width:2.5}
.check-badge path{fill:none;stroke:var(--blue);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.done-hero h1{font-size:clamp(30px,6vw,64px);margin-top:14px}
.done-hero .lead{font-size:clamp(16px,2vw,20px);margin-top:20px;color:#e5f5fa;max-width:560px;margin-inline:auto}
.notice-box{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:4px;padding:clamp(20px,3vw,28px);margin:36px auto 0;max-width:600px;text-align:left;font-size:14px;line-height:1.9}
.notice-box strong{display:block;color:var(--blue);font-size:15px;margin-bottom:6px}
.notice-box a{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.security-note{font-size:12px;line-height:1.9;color:#9db8c6;max-width:560px;margin:22px auto 0}
.lock-icon{width:14px;height:14px;vertical-align:-2px;margin-right:5px;fill:none;stroke:#9db8c6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 決済代行の明示：主張させず、探せば見つかる別枠として置く。
   span を block にして3行に固定しているのは、総司令が指定した改行位置を保つため。
   自動折返しに任せると「三菱UFJニコス／グループ」のように語の途中で割れる。
   inline-block（画面が広ければ繋がる書き方）は使えない——行末の「・」を外した文面のため、
   繋がると「サービス三菱UFJ」と区切りが消えて読めなくなる。 */
/* 左右の余白が12pxなのは意匠ではなく寸法の要請。320px幅では枠内が244pxしか取れず、
   最長行「三菱UFJニコスグループ・株式会社ペイジェント」の実測249pxが収まらず折り返した。
   18px→12pxで枠内256pxとなり、余裕7pxで3行が保たれる。
   （2026-08-10 追記：社名から「グループ」を外し「三菱UFJニコス・株式会社ペイジェント」に変更。
     最長行は203pxとなり枠内256pxに対し余裕53px。余白12pxの根拠は緩んだが、
     18pxへ戻すと余裕は35pxまで落ちるので、実測が済むまでこのまま据え置く） */
.payment-note{max-width:560px;margin:34px auto 0;padding:13px 12px;border:1px solid rgba(255,255,255,.13);border-radius:4px;font-size:11px;line-height:1.9;color:#7e97a6}
.payment-note span{display:block}
/* 320px幅でだけ起きる2件を、360px以下に閉じて直す。375px以上は無傷。
   ここに置いているのは .security-note の font-size 定義より後ろでないと
   カスケードで負けるため（@media は詳細度を上げない）。実際に一度それで効かなかった。
   h1：clamp の下限30pxは 500px 未満の全域で効くため、2行目
       （cashless「ご登録が完了しました。」／404「見つかりませんでした。」＝ともに11文字）が
       枠280pxに収まらず3行に割れていた。26pxで2行に固定。
   security-note：アイコン込み必要幅306pxに対し使える幅280pxで、
       「3Dセキュ／ア対応」と語の途中で割れていた。11px＋字間0で1行に収まる。 */
@media(max-width:360px){.done-hero h1{font-size:26px}.security-note{font-size:11px;letter-spacing:0}}
.atmosphere{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;line-height:0}.atmosphere img{display:block;width:100%;height:auto!important;aspect-ratio:1/1;object-fit:cover}
@media(max-width:760px){.atmosphere{grid-template-columns:repeat(2,1fr)}}

/* Q&A：アコーディオン（型は姉妹サイト axis24 の .faq-list を踏襲。
   ただし Q バッジの配色は踏襲せず --deep に白文字とした＝axis24 側は
   見た目維持を優先して 2.97:1 の低コントラストを既知のまま残置しており、
   新規に焼く側でその負債まで写す理由がないため。実測 15.6:1） */
.faq{padding-block:clamp(75px,10vw,120px)}
.faq .container{max-width:890px}
.faq-list{border-top:1px solid var(--line);margin-top:36px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;gap:14px;align-items:center;padding:20px 4px;min-height:44px;font-weight:700;line-height:1.6;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before{content:"Q";flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--deep);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1}
.faq-list .a{display:flex;gap:14px;padding:0 4px 24px;font-size:14px;color:#507082}
.faq-list .a::before{content:"A";flex-shrink:0;width:26px;text-align:center;font-weight:700;color:var(--deep)}

/* 見出しの折返し：狭い画面で h2 が枠に対して過大だった。
   375px の使える幅は335px（左右 --pad 20px）。そこへ32pxの見出しが入らず、
   `<br>` で「ここで1行」と決めた文まで再折返しし、1〜3文字の尻尾が単独行になっていた。
     MEMBERSHIP「無理なく始めてみませんか？」13文字＝必要幅397px（62px不足）→4行・「んか？」が孤立
     MEMBERSHIP「生活に合う時間帯を選び」11文字＝337px（2px不足）→「び」が孤立
     HOW TO JOIN「ご予約から利用開始まで」11文字＝337px（2px不足）→「で」が孤立
   長文が自然に折り返して最終行が短い箇所（.caption・.plan-note・THE SPACE の本文）は
   破綻ではないので対象にしない——全部固定したら保守できなくなる。
   上限を32pxに置き、下限640pxで切っているのは、素の h2 が clamp(32px,5vw,61px) で
   640px以下では32pxに張り付くため。463px付近で両者が32pxで一致し、境界で段差が出ない。
   ここに置いているのは h2 の font-size 定義より後ろでないとカスケードで負けるため
   （@media は詳細度を上げない。.security-note で一度それを踏んでいる）。
   実測：375px→25.9px で MEMBERSHIP・HOW TO JOIN とも2行、THE SPACE は3行→2行。
        320px→22.1px でも同じく2行。641px以上は1pxも動かない。
   なお 404.html の .contact h2 も同じ規則の対象になるが、あちらは元から2行で
   収まっており、index の同一セクションと寸法を揃える意味で意図的に含めている。 */
@media(max-width:640px){h2{font-size:clamp(20px,6.9vw,32px)}}
/* 店長メッセージの引用文は、総司令の指定で3行に改行し直した
   （走るためだけに／大きなジムへ入るのは／少しもったいない。）。
   これに伴い .message blockquote の clamp を 4.8vw・上限56px → 4.4vw・上限50px へ下げている。
   狭い側でなく広い側で溢れるのが理由——引用文の列は .manager-grid の右カラムで、
   画面が広がっても幅497pxで頭打ちになる一方、4.8vwの字は伸び続ける。
   最長行「大きなジムへ入るのは」10文字は56pxで538px必要＝41px不足で、
   1280pxでは「は」だけが4行目に落ちていた。761px（2カラムに変わる直後で列が329pxまで痩せる）も同様。
   実測（上限50px・4.4vw）：320px→28px/最長269px・375px→28px/269px・761px→33.5px/321px・
   900px→39.6px/380px・1280px→50px/480px。全幅で3行、溢れなし。 */