/*! * このファイルは自動生成です。編集しないでください。 * 編集する場合は src/ を編集し、node tools/build-theme.js を実行してください。 * * 生成元: src/css/lp.css */ /*! * gifu-lp-theme / LP本体CSS * * 移行元: Gifu LP C224 flow-fixed-header-visibility-fix.dc.html * * 連結順（原本の読み込み順と同じ） * 1. クリティカルCSS（ファーストビューのモーション初期状態）原本 L629-L646 * 2. スタイルブロック1（全体ベース・各セクション個別CSS）原本 L658-L781 * 3. スタイルブロック2（レスポンシブ・セクション詳細CSS）原本 L782-L2332 * 4. style-hover / style-focus 属性から生成された擬似クラスCSS（.scp0〜.scpc） * * このファイルは自動生成物です。直接編集せず、原本を更新してから再生成してください。 */ /* ===== 1. クリティカルCSS（原本 L629-L646） ===== */ html.fv-motion-ready:not(.fv-motion-visible) .fv-copy-reveal{opacity:0;transform:translate3d(0,12px,0);} html.fv-motion-ready:not(.fv-motion-visible) .fv-photo{opacity:0;transform:translate3d(14px,0,0);} @media (max-width:899.98px){ html.fv-motion-ready:not(.fv-motion-visible) .fv-copy-reveal, html.fv-motion-ready:not(.fv-motion-visible) .fv-photo{transform:translate3d(0,8px,0);} } @media (prefers-reduced-motion:reduce){ html.fv-motion-ready .fv-copy-reveal, html.fv-motion-ready .fv-photo{ opacity:1 !important; transform:none !important; transition:none !important; transition-delay:0s !important; will-change:auto !important; } } /* ===== 2. スタイルブロック1（原本 L658-L781） ===== */ html,body{margin:0;padding:0;background:var(--surface-base);} body{font-family:'Noto Sans JP',sans-serif;color:var(--ink-strong);-webkit-font-smoothing:antialiased;} a{color:var(--ink-strong);text-decoration:none;} a:hover{color:var(--brand-primary);} :root{--heading-gradient-primary:var(--brand-gradient);} /* CTAの hover。C228 の #1554BD→#2A74CF / #3560A4 / #092242 を主色から導出する */ :root{ --cta-hover-grad: linear-gradient(95deg, color-mix(in srgb, var(--brand-primary) 88%, black), color-mix(in srgb, var(--brand-primary) 92%, white)); --cta-hover-flat: color-mix(in srgb, var(--brand-primary-deep) 55%, var(--ink-subtle)); --shadow-ink: color-mix(in srgb, var(--ink-strong) 80%, black); } /* C228の3色は design-tokens.css の --brand-gradient と同一。二重定義をやめた */ .heading-gradient-primary{background:var(--heading-gradient-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--brand-primary);} #about .about-heading-gradient{width:fit-content;max-width:100%;background-image:var(--brand-gradient);background-repeat:no-repeat;background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;} #voice button{outline:none;} #voice button:focus-visible{outline:3px solid var(--brand-primary);outline-offset:3px;} /* #news の旧レスポンシブ（1024 / 767 / 390px）はファイル末尾のトークン化ブロックへ移動 */ /* #faq の 768px ルールは末尾のトークン化ブロックへ移動 */ @media (prefers-reduced-motion: reduce){#faq *{transition-duration:0.01ms !important;}} @media (prefers-reduced-motion: reduce){#voice .voice-acc *{transition-duration:0.01ms !important;}} /* ============================================================= LOCKED CSS: FACILITY GALLERY A Do not change layout, scale, position, opacity, spacing, typography, caption, controls, animation, or responsive rules without explicit user approval. ============================================================= */ #facility-gallery [data-fg-btn]:not(:disabled):hover{background:var(--surface-base);border-color:color-mix(in srgb, var(--ink-strong) 34%, transparent);transform:translateY(-1px);} #facility-gallery [data-fg-btn]:focus-visible{outline:2px solid var(--brand-primary);outline-offset:3px;} #facility-gallery .fg-viewport:focus-visible{outline:2px solid var(--brand-primary);outline-offset:4px;border-radius:var(--r-sm);} @media (max-width:1200px){#facility-gallery .fg-head{grid-template-columns:1fr !important;row-gap:14px !important;}#facility-gallery .fg-head p{white-space:normal !important;max-width:34em !important;}} @media (max-width:767px){/* SP余白は末尾のトークン化ブロックへ */#facility-gallery .fg-inner{width:calc(100% - 40px) !important;}#facility-gallery .fg-head{grid-template-columns:1fr !important;row-gap:14px !important;}#facility-gallery .fg-head h2{font-size:34px !important;}} /* END LOCKED CSS: FACILITY GALLERY A */ /* PROTOTYPE B2 — reference dual-direction marquee */ @keyframes fgb2-img{from{transform:translate3d(-50%,0,0);}to{transform:translate3d(0,0,0);}} @keyframes fgb2-txt{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}} #facility-gallery .fgb2-stage{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:410px;overflow:hidden;margin-top:0;} #facility-gallery .fgb2-imgtrack{position:absolute;top:0;left:0;display:flex;flex-wrap:nowrap;width:max-content;height:320px;z-index:1;animation:fgb2-img 115.99s linear infinite;will-change:transform;} #facility-gallery .fgb2-txttrack{position:absolute;top:272px;left:0;display:flex;flex-wrap:nowrap;width:max-content;z-index:2;pointer-events:none;animation:fgb2-txt 78s linear infinite;will-change:transform;} #facility-gallery .fgb2-imggroup{display:contents;} #facility-gallery .fgb2-txtseg{flex:none;font-family:var(--font-display);font-size:clamp(78px,7.2vw,134px);font-weight:var(--fw-bold);line-height:0.88;letter-spacing:-0.045em;white-space:nowrap;padding-right:0;} #facility-gallery.fgb2-off .fgb2-imgtrack,#facility-gallery.fgb2-off .fgb2-txttrack{animation-play-state:paused !important;} #facility-gallery .fgb2-pause:hover{border-color:color-mix(in srgb, var(--ink-strong) 42%, transparent);} #facility-gallery .fgb2-pause:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px;} @media (prefers-reduced-motion: reduce){#facility-gallery .fgb2-stage{height:auto !important;overflow-x:auto !important;}#facility-gallery .fgb2-imgtrack{position:relative !important;animation:none !important;transform:none !important;}#facility-gallery .fgb2-txttrack{position:relative !important;animation:none !important;transform:none !important;top:auto !important;margin-top:-96px;}#facility-gallery .fgb2-dup{display:none !important;}#facility-gallery .fgb2-pause{display:none !important;}} @media (max-width:767px){/* SP余白は末尾のトークン化ブロックへ */#facility-gallery .fgb2-head{grid-template-columns:1fr !important;row-gap:14px !important;}#facility-gallery .fgb2-head p{white-space:normal !important;}#facility-gallery .fgb2-stage{height:auto !important;overflow-x:auto !important;}#facility-gallery .fgb2-imgtrack{position:relative !important;animation:none !important;transform:none !important;height:225px;}#facility-gallery .fgb2-txttrack{display:none !important;}#facility-gallery .fgb2-dup{display:none !important;}#facility-gallery .fgb2-pause{display:none !important;}#facility-gallery .fgb2-img{width:300px;height:225px;border-radius:32px;margin-right:20px;}} /* LOCKED-ADJACENT: #site-footer dedicated CSS (footer only) */ #site-footer a{color:var(--ink-base);text-decoration:none;} #site-footer a:hover{color:var(--ink-strong);text-decoration:underline;} #site-footer .gsf-legal{font-size:var(--fs-body-s);font-weight:var(--fw-normal);} /* C218: these SNS accounts are not open yet. Markup and SVGs are kept intact and only hidden — remove the gsf-sns-soon class and the hidden attribute to bring one back. */ #site-footer .gsf-sns-soon{display:none !important;} #site-footer .gsf-meta{justify-self:center;} /* C219-1: the 44px circular button makes the SNS group read 5px low against the text block beside it. Lift the WHOLE group (label + button) — not the button alone. */ #site-footer .gsf-sns{margin-top:-5px;} /* C219-2: PC bottom bar reads 左=コピーライト / 右=プライバシーポリシー, so each side sits under the block it belongs to. HTML order is unchanged, so <=900px still reads プライバシーポリシー → コピーライト. */ #site-footer .gsf-lower .gsf-legal-wrap{order:2;} #site-footer .gsf-lower .gsf-copy{order:1;} /* Edges line up with the upper row; the only inset is the floating page-top button's footprint, and it self-cancels once the container margin already clears it. */ #site-footer .gsf-lower .gsf-legal-wrap{padding-right:max(0px, min(34px, calc(74px - (100vw - 1180px) / 2)));} /* C219-3: privacy policy reads as supporting information, a hair stronger than the copyright */ #site-footer .gsf-legal{color:color-mix(in srgb, var(--ink-strong) 66%, transparent);} #site-footer a.gsf-legal{text-decoration:none;} #site-footer a.gsf-legal:hover{color:var(--brand-primary);text-decoration:underline;} #site-footer a.gsf-legal:focus-visible{outline:2px solid var(--brand-primary);outline-offset:3px;border-radius:3px;} /* C217: footer business info + SNS button polish */ #site-footer .gsf-tel:hover{color:var(--brand-primary);text-decoration:none;} #site-footer .gsf-tel:focus-visible{outline:2px solid var(--brand-primary);outline-offset:3px;border-radius:3px;} #site-footer a.gsf-sns-btn:hover{background:var(--brand-primary);border-color:var(--brand-primary);transform:translateY(-2px);} #site-footer a.gsf-sns-btn:hover svg{fill:var(--ink-invert);stroke:var(--ink-invert);} #site-footer a.gsf-sns-btn:hover .gsf-sns-dot{fill:var(--ink-invert);} #site-footer a.gsf-sns-btn:focus-visible{outline:2px solid var(--brand-primary);outline-offset:3px;} @media (prefers-reduced-motion: reduce){#site-footer a.gsf-sns-btn{transition:none !important;}#site-footer a.gsf-sns-btn:hover{transform:none !important;}} /* C217: header first-paint intro — runs once on load, never on scroll. Header height is set inline, so only opacity/transform move (no layout shift). The final keyframe resolves to transform:none, so no stacking context is left behind. */ @keyframes gsh-intro{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}} .gsh-header{animation:gsh-intro 500ms cubic-bezier(0.22,0.8,0.32,1) backwards;} @media (prefers-reduced-motion: reduce){.gsh-header{animation:none !important;}} /* C147 LOCK START: #numbers */ /* 明示的な解除指示がない限り変更禁止 */ /* #numbers dedicated CSS (provisional SP safety only) */ @media (max-width:900px){ #numbers .num-top,#numbers .num-bottom{grid-template-columns:1fr !important;} #numbers .num-top > div,#numbers .num-bottom > div{grid-column:auto !important;} #numbers .num-card{padding:24px !important;} #numbers .num-big{font-size:60px !important;} } /* C147 LOCK END: #numbers */ /* C204 START: #final-contact — 低く横長なCTA（見出しは白ボックスの外／明るいブルーのオーバーレイ） */ /* #final-contact の該当ルールは末尾のトークン化ブロックへ移動 */ /* #final-contact の該当ルールは末尾のトークン化ブロックへ移動 */ /* C204 END: #final-contact */ /* #voice heading band (C149 comparison) */ @media (max-width:900px){ #voice .voice-heading-band{padding:var(--sp-7) 0 var(--sp-9);} #voice .voice-carousel-wrap{margin-top:-50px !important;} } #gsf-pagetop.is-visible{opacity:1 !important;visibility:visible !important;pointer-events:auto !important;transform:translateY(0) !important;} #gsf-pagetop:hover{transform:translateY(-2px) !important;box-shadow:0 12px 30px color-mix(in srgb, black 22%, transparent) !important;} @media (max-width:900px){#gsf-pagetop{right:16px !important;bottom:16px !important;width:46px !important;height:46px !important;}} @media (max-width:900px){ /* #site-footer の 900px 一式は末尾のトークン化ブロックへ移動 */ #site-footer .gsf-sns{grid-column:1 !important;grid-row:auto !important;justify-self:center !important;align-self:auto !important;justify-content:center !important;text-align:center !important;} #site-footer .gsf-lower{flex-direction:column !important;align-items:center !important;gap:9px !important;text-align:center !important;margin-top:18px !important;padding-top:13px !important;} #site-footer .gsf-photo{opacity:0.4 !important;} #site-footer .gsf-dots{opacity:0.02 !important;} } /* ===== 3. スタイルブロック2（原本 L782-L2332） ===== */ /* C171: header + first-view responsive (this block only; other sections untouched) */ @media (max-width:1219px){ /* .page-root の最小幅は末尾のトークン化ブロックへ */ /* C218: footer falls back to 2 blocks — org+meta stacked on the left, SNS on the right */ /* #site-footer の 1219px 一式は末尾のトークン化ブロックへ移動 */ } /* C172: kill remaining fixed widths that pushed page scrollWidth to 1180px */ #access, #final-contact, #site-footer{width:100%;min-width:0;box-sizing:border-box;} /* C172/C208/C209/C210 の #access 一式（1219 / 1023 / 899.98 / 420px の4段＋ !important 32個）はインラインstyleを打ち消すためのものだった。インラインが消えたのでファイル末尾へ再構成。 */ /* C172: NEWS list — インラインstyleを打ち消すための !important 一式だった。インラインstyleが無くなったのでブロックごと削除。ファイル末尾へ再構成。 */ /* C173: mobile header + drawer nav (>=980px untouched) */ .gsh-burger{display:none;} .gsh-cta-m{display:none;} /* 出すのは末尾ブロックの900px未満 */ .mnav-overlay{position:fixed;inset:0;background:color-mix(in srgb, var(--ink-strong) 62%, black);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease-out,visibility 0s linear .2s;z-index:98;} .mnav-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease-out;} .mnav-panel{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(88vw,360px);box-sizing:border-box;background:var(--surface-base);box-shadow:-14px 0 44px color-mix(in srgb, var(--ink-strong) 20%, transparent);transform:translateX(103%);visibility:hidden;transition:transform .26s cubic-bezier(0.22,0.8,0.32,1),visibility 0s linear .26s;z-index:99;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;} .mnav-panel.is-open{transform:translateX(0);visibility:visible;transition:transform .26s cubic-bezier(0.22,0.8,0.32,1);} .mnav-close:focus-visible,.gsh-burger:focus-visible,.mnav-link:focus-visible,.mnav-cta:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px;} .gsh-burger:hover{background:var(--surface-raised);} @media (prefers-reduced-motion: reduce){.mnav-overlay,.mnav-panel{transition:none !important;}} /* C177: FV typewriter (visual-only; sr-only static text carries the meaning) */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} .fv-tw-caret{display:inline-block;width:2px;height:0.82em;background:var(--brand-primary);margin:0 3px 0 2px;vertical-align:-0.06em;border-radius:1px;opacity:0;transition:opacity .3s ease;} .fv-tw-caret.is-blinking{animation:fv-caret-blink 700ms step-end infinite;} @keyframes fv-caret-blink{50%{opacity:0;}} @media (prefers-reduced-motion: reduce){.fv-tw-caret{display:none !important;animation:none !important;}} /* C199: FV first-load entrance. The typewriter remains outside the fixed-copy group. */ html.fv-motion-ready .fv-copy-reveal, html.fv-motion-ready .fv-photo{ transition-property:opacity,transform; transition-timing-function:cubic-bezier(0.25,0.46,0.45,0.94); will-change:opacity,transform; } html.fv-motion-ready .fv-copy-reveal{transition-duration:980ms;transition-delay:80ms;} html.fv-motion-ready .fv-photo{transition-duration:1080ms;transition-delay:180ms;} html.fv-motion-ready.fv-motion-visible .fv-copy-reveal, html.fv-motion-ready.fv-motion-visible .fv-photo{opacity:1;transform:translate3d(0,0,0);} @media (max-width:899.98px){ html.fv-motion-ready .fv-copy-reveal{transition-duration:800ms;transition-delay:60ms;} html.fv-motion-ready .fv-photo{transition-duration:880ms;transition-delay:140ms;} } @media (max-width:1199px) and (min-width:979px){ /* ヘッダーの 1199-979 調整は末尾のトークン化ブロックへ */ } @media (max-width:979px){ /* ヘッダーの 979 調整は末尾のトークン化ブロックへ（900へ寄せた） */ } /* FV の 1099px ブロックは末尾のトークン化ブロックへ（900へ寄せた） */ /* FV の縦長大画面ブロックは末尾のトークン化ブロックへ */ @media (max-width:767px){ /* ヘッダーの 767 調整は末尾のトークン化ブロックへ */ /* FV の 767px ブロックは末尾のトークン化ブロックへ（599.98へ寄せた） */ } @media (max-width:599px){ /* ヘッダーの 599 調整は末尾のトークン化ブロックへ */ } /* C177: <600px the typewriter heading is always exactly 2 lines (word / fixed). 599.98px guards against fractional viewport widths right at the boundary. */ /* ============================================================ #use-flow RESPONSIVE FIX — C183 PC (>=900px): explicit grid-column restores the visual STEP / image / text order even though the HTML was reordered to STEP / text / image for a natural reading + stacking order. ============================================================ */ /* #use-flow のグリッド配置は末尾のトークン化ブロックへ移動 */ @media (max-width:899.98px){ /* #use-flow の該当ルールはファイル末尾のトークン化ブロックへ移動 */ } @media (max-width:430px){ /* #use-flow の該当ルールはファイル末尾のトークン化ブロックへ移動 */ } /* ============================================================ RESPONSIVE FIRST PASS — C182 Scope: #reasons, #work, #voice (carousel body only — heading band was already responsive), #recruit, #visit-cta, #faq (general Q/A list — fee table was already responsive). Locked sections (#flow, #numbers, #use-flow, #access, #final-contact, #news, #facility-gallery, #site-footer, header/nav/FV/typewriter) are untouched; see completion report for individual candidates. ============================================================ */ @media (max-width:1023px){ } @media (max-width:899.98px){ /* #reasons の SP 一式はファイル末尾のトークン化ブロックへ移動 */ /* #work の SP 一式はファイル末尾のトークン化ブロックへ移動 */ #voice .v-body{grid-template-columns:1fr !important;row-gap:20px !important;} #voice .v-card{padding:28px 24px 26px !important;height:auto !important;} #voice .v-profile{grid-template-columns:minmax(180px,220px) minmax(0,1fr) !important;column-gap:28px !important;} #voice .v-profile-photo{width:100% !important;height:auto !important;max-width:220px;aspect-ratio:170/183;} #voice .v-profile-info{padding-top:0 !important;} #voice .voice-carousel-wrap{min-height:420px;} #voice button[aria-label*="の利用者の声へ"]{width:44px !important;height:44px !important;} /* #recruit の SP 一式はファイル末尾のトークン化ブロックへ移動 */ } /* C197: #flow — scroll-scrubbed three-scene stage on PC. The existing mobile timeline below 900px remains unchanged. */ @media (min-width:900px){ #flow{padding-bottom:96px !important;} #flow-track.flow-stage-prototype{height:auto;margin-top:42px !important;} #flow .flow-stage-shell{ --flow-band-width:96px; --flow-copy-tag-size:11px; --flow-copy-time-size:76px; --flow-copy-title-size:30px; --flow-copy-body-size:16px; --flow-copy-body-leading:1.65; --flow-copy-fact-size:15.5px; --flow-copy-fact-leading:1.65; --flow-gap-label-time:14px; --flow-gap-time-meta:12px; --flow-gap-meta-heading:22px; --flow-gap-heading-body:15px; --flow-gap-paragraph:12px; --flow-gap-body-list:17px; --flow-list-padding-top:15px; --flow-gap-list-item:8px; position:sticky;top:clamp(0px,8vh,84px); width:min(94vw,1760px);height:clamp(760px,82vh,860px);min-height:760px; margin:0 auto;display:flex;flex-direction:column;overflow:hidden; background:transparent !important; border-top:1px solid color-mix(in srgb, var(--brand-primary) 22%, transparent); border-bottom:1px solid color-mix(in srgb, var(--brand-primary) 22%, transparent); } #flow .flow-stage-shell.flow-review{ position:relative;top:auto; } #flow .flow-scene-viewport{ position:relative;z-index:1;min-height:0;flex:1;overflow:hidden; } #flow .flow-preview-stack{ position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none; } #flow .flow-scene-track{ height:100%;display:flex;align-items:stretch; transform:translate3d(calc(min(94vw,1760px) - var(--flow-band-width)),0,0); will-change:transform; } #flow .flow-scene{ flex:0 0 calc(100% - var(--flow-band-width));min-width:0;height:100%; display:grid;grid-template-columns:var(--flow-band-width) minmax(0,1fr); gap:10px;padding-right:10px;box-sizing:border-box;will-change:opacity; } #flow .flow-scene-panel{ position:relative;min-width:0;height:100%;box-sizing:border-box; padding:0 62px;overflow:hidden; } #flow .flow-stage-watermark{ position:absolute;right:12px;top:76px;z-index:0; font-family:'Manrope',sans-serif;font-weight:800;font-size:148px;line-height:1; letter-spacing:0.01em;color:color-mix(in srgb, var(--ink-strong) 4%, transparent); pointer-events:none;user-select:none;white-space:nowrap; } #flow .flow-scene-band, #flow .flow-preview-band{ position:relative;height:100%;box-sizing:border-box;overflow:hidden; border-top:1px solid color-mix(in srgb, var(--brand-primary) 20%, transparent); border-bottom:1px solid color-mix(in srgb, var(--brand-primary) 20%, transparent); color:var(--flow-band-ink); background:var(--flow-band-base); will-change:opacity; } #flow .flow-scene-band{z-index:2;border-radius:18px 0 0 18px;} #flow .flow-preview-band{ position:absolute;top:0;right:0;bottom:0;width:var(--flow-band-width);height:auto; border-radius:0 18px 18px 0;opacity:0; will-change:transform,opacity; } #flow .flow-preview-band.is-initial-first{border-radius:18px 0 0 18px;} #flow .flow-preview-band.is-initial-second{border-radius:0 18px 18px 0;} #flow .flow-band-content{ position:absolute;inset:0; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px; color:inherit; } #flow .flow-band-fill{ position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:hidden; color:var(--ink-invert);background:var(--flow-band-strong); clip-path:inset(0 0 calc(100% - var(--flow-band-fill)) 0); will-change:clip-path; } #flow .flow-band-kicker{ font-family:'Manrope',sans-serif;font-size:10px;font-weight:800; letter-spacing:0.18em;writing-mode:vertical-rl;text-orientation:mixed;opacity:0.85; } #flow .flow-band-time{ font-family:'Manrope','Noto Sans JP',sans-serif;font-size:25px;font-weight:800; line-height:1;letter-spacing:0.01em;writing-mode:vertical-rl;text-orientation:mixed; } #flow .flow-band-label{ font-size:14px;font-weight:800;letter-spacing:0.12em; writing-mode:vertical-rl;text-orientation:upright; } #flow .flow-stage-meta{ position:relative;z-index:2;flex:0 0 90px;min-height:90px;box-sizing:border-box; margin:0 calc(var(--flow-band-width) + 10px);padding:0 62px; display:flex;align-items:center;justify-content:center;gap:34px; border-bottom:1px solid color-mix(in srgb, var(--ink-strong) 10%, transparent); background:transparent; } #flow .flow-stage-hours{ font-family:'Manrope','Noto Sans JP',sans-serif;font-weight:800; font-size:29px;line-height:1;letter-spacing:0.01em;color:var(--ink-strong);white-space:nowrap; } #flow .flow-stage-meta-divider{width:1px;height:24px;background:color-mix(in srgb, var(--ink-strong) 16%, transparent);} #flow .flow-stage-meta-item{ display:flex;align-items:baseline;gap:10px;font-size:15px;font-weight:700; letter-spacing:0.03em;white-space:nowrap; } #flow .flow-stage-meta-item strong{font-size:17px;font-weight:800;} #flow .flow-stage-meta-work{color:var(--brand-accent-warm);} #flow .flow-stage-meta-rest{color:var(--brand-accent-cool-ink);} #flow .flow-stage-content{ position:relative;z-index:1;height:100%;min-height:0;box-sizing:border-box; display:grid;grid-template-columns:minmax(0,11fr) minmax(0,14fr); gap:68px;align-items:stretch;padding:7px 0; } #flow .flow-stage-copy{ min-width:0;height:100%;box-sizing:border-box;display:flex;flex-direction:column; align-items:stretch;justify-content:center;padding:16px 0 22px 8px;overflow:visible; } #flow .flow-scene-copy-inner{ flex:0 0 auto;width:100%;min-height:0;box-sizing:border-box; display:flex;flex-direction:column;align-items:stretch; } #flow .flow-stage-copy .flow-kind-tag{ align-self:flex-start;font-family:'Manrope',sans-serif;font-size:var(--flow-copy-tag-size) !important; font-weight:800;line-height:normal !important;letter-spacing:0.2em;border-radius:999px; padding:4px 14px !important; } #flow .flow-stage-time{ margin-top:var(--flow-gap-label-time);font-family:'Manrope','Noto Sans JP',sans-serif; font-weight:800;font-size:var(--flow-copy-time-size);line-height:0.95;letter-spacing:0; white-space:nowrap; } #flow .flow-stage-range{ margin-top:var(--flow-gap-time-meta);font-size:14px;font-weight:700;line-height:normal;letter-spacing:0.08em;color:var(--ink-subtle); } #flow .flow-stage-title{ margin:var(--flow-gap-meta-heading) 0 0;font-size:var(--flow-copy-title-size);font-weight:800;line-height:1.5; letter-spacing:0.035em;color:var(--ink-strong); } #flow .flow-stage-paras{ margin-top:var(--flow-gap-heading-body);max-width:560px;display:flex;flex-direction:column; gap:var(--flow-gap-paragraph); } #flow .flow-stage-paras p{ margin:0;font-size:var(--flow-copy-body-size) !important;font-weight:500;line-height:var(--flow-copy-body-leading) !important; letter-spacing:0.025em;color:var(--ink-muted); } #flow .flow-stage-facts{ margin-top:var(--flow-gap-body-list);display:flex;flex-direction:column; gap:var(--flow-gap-list-item);max-width:570px; padding-top:var(--flow-list-padding-top);border-top:1px solid color-mix(in srgb, var(--fl-acc) 20%, transparent); } #flow .flow-stage-fact{display:flex;align-items:flex-start;gap:11px;} #flow .flow-stage-fact-dot{ flex:0 0 auto;margin-top:11px;width:6px;height:6px;border-radius:50%; } #flow .flow-stage-fact-text{ font-size:var(--flow-copy-fact-size);font-weight:700;line-height:var(--flow-copy-fact-leading);letter-spacing:0.02em;color:var(--ink-muted); } #flow .flow-stage-photo{ position:relative;align-self:center;min-width:0;height:560px !important;min-height:0; border-radius:18px;overflow:hidden;background:var(--surface-sunken); box-shadow:0 18px 46px -34px color-mix(in srgb, var(--ink-strong) 42%, transparent) !important; } #flow .flow-stage-photo-caption{ position:absolute;left:0;right:0;bottom:0;padding:82px 30px 42px; background:linear-gradient(180deg, color-mix(in srgb, var(--flow-veil) 0%, transparent) 0%, color-mix(in srgb, var(--flow-veil) 72%, transparent) 100%); pointer-events:none;display:flex;flex-direction:column;align-items:flex-start;gap:10px; } #flow .flow-stage-photo-tags{ display:flex;align-items:center;gap:10px; } #flow .flow-stage-photo-duration{ font-family:'Manrope',sans-serif;font-weight:700;font-size:12px;line-height:1; letter-spacing:0.14em;color:color-mix(in srgb, var(--ink-invert) 98%, transparent); border:1px solid color-mix(in srgb, var(--ink-invert) 68%, transparent);border-radius:999px;padding:6px 14px; } #flow .flow-stage-photo-time{ font-family:'Manrope','Noto Sans JP',sans-serif;font-weight:800; font-size:52px;line-height:1;letter-spacing:0.02em;color:var(--ink-invert); } #flow .flow-stage-photo-sub{ font-size:14px;font-weight:700;line-height:1.4; letter-spacing:0.08em;color:color-mix(in srgb, var(--ink-invert) 96%, transparent); } #flow .flow-timeline{ position:relative;z-index:2;box-sizing:border-box;flex:0 0 96px;min-height:96px; margin:0 calc(var(--flow-band-width) + 10px);padding:16px 62px 21px; overflow:visible;border-top:1px solid color-mix(in srgb, var(--ink-strong) 10%, transparent); background:transparent; } #flow .flow-timeline-track{position:relative;min-height:48px;} #flow .flow-timeline-line{ position:absolute;left:5.555%;right:5.555%;top:7px;height:3px; border-radius:99px;background:color-mix(in srgb, var(--ink-subtle) 30%, white); } #flow .flow-timeline-progress{ display:block;width:12.5%;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--flow-progress-from) 0%,var(--brand-accent-warm) 100%); } #flow .flow-timeline-grid{ position:relative;z-index:1;display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); } #flow .flow-timeline-step{ min-width:0;display:grid;grid-template-rows:16px 22px; row-gap:10px;justify-items:center;align-items:start; } #flow .flow-timeline-dot{ grid-row:1;display:block;align-self:center;box-sizing:border-box;border-radius:50%; } #flow .flow-timeline-time{ grid-row:2;position:static;z-index:2;display:block !important;min-height:22px; font-family:'Manrope',sans-serif;line-height:1.25;text-align:center; white-space:nowrap;visibility:visible !important;opacity:1 !important; transform:none !important; transition:none !important; } } @media (min-width:900px) and (max-width:1279.98px){ #flow .flow-scene.is-compact{ --flow-gap-label-time:13px; --flow-gap-time-meta:11px; --flow-gap-meta-heading:20px; --flow-gap-heading-body:14px; --flow-gap-paragraph:11px; --flow-gap-body-list:16px; --flow-list-padding-top:14px; --flow-gap-list-item:7.5px; } #flow .flow-scene.is-compact .flow-stage-copy{padding-top:8px;padding-bottom:16px;} } @media (min-width:900px) and (max-width:1199.98px){ #flow .flow-stage-shell{ --flow-band-width:72px; width:calc(100% - 40px);height:clamp(760px,86vh,820px);min-height:760px; } #flow .flow-scene-track{ transform:translate3d(calc(100vw - 40px - var(--flow-band-width)),0,0); } #flow .flow-scene-panel{padding:0 30px;} #flow .flow-stage-meta{gap:17px;margin:0 calc(var(--flow-band-width) + 8px);padding:0 30px;} #flow .flow-stage-hours{font-size:23px;} #flow .flow-stage-meta-item{font-size:13px;gap:6px;} #flow .flow-stage-meta-item strong{font-size:14px;} #flow .flow-stage-content{grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);gap:30px;} #flow .flow-stage-time{font-size:62px;} #flow .flow-stage-title{font-size:25px;} #flow .flow-stage-paras p{font-size:15px !important;} #flow .flow-stage-fact-text{font-size:14px;} #flow .flow-stage-photo{height:auto !important;min-height:430px;} #flow .flow-timeline{margin:0 calc(var(--flow-band-width) + 8px);padding-left:30px;padding-right:30px;} #flow .flow-timeline-time{font-size:12px !important;} #flow .flow-band-time{font-size:21px;} #flow .flow-band-label{font-size:12px;} } /* C201-g: 1000px前後ノートPC（幅900-1200px かつ画面高<=900px）で「利用者の1日」を画面内に収める。 900px境界・SPカルーセル・場面切替ロジック・掲載内容は対象外。既存の900-1199.98px幅クエリと重ねて併用。 */ @media (min-width:900px) and (max-width:1200px) and (max-height:900px){ /* シェルの高さ/top/min-heightは既存のC201-c calc(100vh - 102px)!important系に委ね、ここでは触らない（幅900-1199.98pxの非!important値は既にC201-cのcalc !important に上書きされ既に効いていない）。このクエリでは、幅900-1199.98pxブロックが font-size を var 経由でなく直接ハードコードしている箇所（flow-stage-time / flow-stage-title）を確実に上書きするため、同プロパティへ直接 !important を当てる。 */ #flow{padding:56px 0 48px !important;} #flow-track.flow-stage-prototype{margin-top:16px !important;} #flow .flow-stage-meta{flex:0 0 50px !important;min-height:50px !important;gap:14px !important;} #flow .flow-stage-hours{font-size:19px !important;} #flow .flow-stage-meta-item{font-size:12px !important;gap:5px !important;} #flow .flow-stage-meta-item strong{font-size:13px !important;} #flow .flow-scene{ --flow-gap-label-time:4px !important; --flow-gap-time-meta:4px !important; --flow-gap-meta-heading:7px !important; --flow-gap-heading-body:6px !important; --flow-gap-paragraph:5px !important; --flow-gap-body-list:7px !important; --flow-list-padding-top:6px !important; --flow-gap-list-item:4px !important; } #flow .flow-stage-time{font-size:32px !important;} #flow .flow-stage-title{font-size:17px !important;} #flow .flow-stage-copy{padding:2px 0 3px 8px !important;} #flow .flow-stage-paras p{font-size:16px !important;line-height:1.4 !important;} #flow .flow-stage-fact{gap:8px !important;} #flow .flow-stage-fact-text{font-size:12.5px !important;line-height:1.4 !important;} #flow .flow-stage-fact-dot{margin-top:7px !important;} #flow .flow-stage-photo{height:auto !important;min-height:200px !important;} #flow .flow-stage-photo-caption{padding:30px 20px 14px !important;gap:5px !important;} #flow .flow-stage-photo-time{font-size:28px !important;} #flow .flow-stage-photo-duration{padding:3px 9px !important;font-size:10px !important;} #flow .flow-stage-photo-sub{font-size:12px !important;} /* C221: the dot + 12px time label need 48px + 10px padding; the 42px band clipped every label by 11px. The scene box is flex:1 1 0, so it absorbs the extra 16px automatically. */ #flow .flow-timeline{flex:0 0 58px !important;min-height:58px !important;padding:4px 24px 6px !important;} #flow .flow-timeline-time{font-size:12px !important;} } /* C222: >1200px with a short viewport (<=760px, the point where the shell's calc(100vh - 102px) clamp forces it under its 760px design height). C221 reused the <=1200px compact scale here, which shrank the photo to 200px and the time/title to 32/17px — far below the desktop design. This block starts from the DESKTOP scale instead and compacts only the vertical axis, in this order: inner spacing first (meta band, copy padding, paragraph/list gaps, line-height), then a light reduction of the time/title, and the photo now stretches to the full content row (height:100%), so it stays large and top/bottom-aligned with the copy at every height <= 760px. 1220x800 / 1440x800 keep the untouched C220 desktop rendering (>760px viewport height). */ @media (min-width:1200.01px) and (max-width:1279.98px) and (max-height:760px){ #flow .flow-stage-meta{flex:0 0 52px !important;min-height:52px !important;gap:16px !important;} #flow .flow-stage-hours{font-size:21px !important;} #flow .flow-stage-meta-item{font-size:13px !important;gap:6px !important;} #flow .flow-stage-meta-item strong{font-size:14px !important;} #flow .flow-scene{ --flow-gap-label-time:5px !important; --flow-gap-time-meta:4px !important; --flow-gap-meta-heading:7px !important; --flow-gap-heading-body:6px !important; --flow-gap-paragraph:4px !important; --flow-gap-body-list:7px !important; --flow-list-padding-top:6px !important; --flow-gap-list-item:4px !important; } #flow .flow-stage-time{font-size:42px !important;} #flow .flow-stage-title{font-size:21px !important;} #flow .flow-stage-copy{padding:5px 0 8px 8px !important;} #flow .flow-stage-paras p{font-size:15px !important;line-height:1.45 !important;} #flow .flow-stage-fact-text{font-size:13px !important;line-height:1.4 !important;} #flow .flow-stage-fact{gap:8px !important;} #flow .flow-stage-fact-dot{margin-top:6px !important;} #flow .flow-stage-photo{height:100% !important;align-self:stretch !important;min-height:0 !important;max-height:100% !important;} #flow .flow-stage-photo-time{font-size:36px !important;} #flow .flow-timeline{flex:0 0 58px !important;min-height:58px !important;padding:5px 24px 7px !important;} } /* C190: #flow — plain vertical timeline below 900px. Exactly one of the two is ever rendered (display:none removes the other from layout AND from the accessibility tree, so nothing is read twice). */ @media (max-width:899.98px){ #flow{padding:76px 0 0 !important;} #flow > div:first-child{padding:0 20px !important;} #flow > div:first-child h2{font-size:clamp(27px,7.6vw,34px) !important;line-height:1.4 !important;margin-top:18px !important;} #flow > div:first-child p{font-size:16px !important;line-height:1.8 !important;margin-top:18px !important;} #flow-track{display:none !important;} #flow .flow-mobile{display:block !important;} } @media (max-width:430px){ #flow .flow-mobile{padding-left:18px !important;padding-right:18px !important;} } @media (max-width:360px){ #flow .flow-mobile{padding-left:16px !important;padding-right:16px !important;} } /* C189: voice profile stacks fully + arrows hidden below 600px (individual fix, C188 card width/step/height-sync/PC untouched) */ @media (max-width:599.98px){ #voice .v-profile{grid-template-columns:1fr !important;row-gap:20px !important;} #voice .v-profile-img{max-width:220px;margin-inline:auto;} #voice .v-profile-photo{max-width:220px !important;margin-inline:auto;} #voice .v-profile-info{padding-top:0 !important;} #voice button[aria-label*="の利用者の声へ"]{display:none !important;} } @media (max-width:767px){ #voice .voice-carousel-wrap{margin-top:-30px !important;} #voice .v-card h3{font-size:21px !important;} #voice .v-card p{font-size:16px !important;} /* #visit-cta の該当ルールは末尾のトークン化ブロックへ移動 */ /* #faq の該当ルールはファイル末尾のトークン化ブロックへ移動 */ } @media (max-width:430px){ /* #faq の該当ルールはファイル末尾のトークン化ブロックへ移動 */ } @media (max-width:360px){ /* #faq の該当ルールはファイル末尾のトークン化ブロックへ移動 */ } /* .rq-card の 430px 用 padding も末尾のトークン化ブロックへ（599.98px に統合） */ /* ============================================================ #reasons / #work — mobile reading-order & spacing fix — C184 Rows 01 & 03 (originally image-first in HTML) were physically reordered to number→heading→body→tags→image so DOM order matches the mobile visual order (no CSS `order` hack). .rs-imgleft on those two rows restores the image-left PC layout via grid-column (rows 02/04 already had text-first HTML, so no override needed). ============================================================ */ .rs-row .rs-text,.rs-row .rs-img{grid-row:1;} .rs-row:not(.rs-imgleft) .rs-text{grid-column:1;} .rs-row:not(.rs-imgleft) .rs-img{grid-column:2;} .rs-imgleft .rs-text{grid-column:2;} .rs-imgleft .rs-img{grid-column:1;} @media (max-width:599.98px){ /* FV の SP ブロックは末尾のトークン化ブロックへ */ } /* #about の 900px 用ルールは末尾のトークン化ブロックへ移動 */ /* ============================================================ NEW ABOUT — C196 整理版（秩序80／重なり20）構成：中央1カラム導入 → WORK × SUPPORT（共通角丸パネル・緩い斜め1本） → こんな思いを持つ方（円＋共通角丸項目＋細線）接頭辞 nro-。巨大WORK／01-03情報帯／ABOUTラベル／不定形装飾は削除。形状は「共通角丸パネル・共通写真角丸・境界の緩い斜め1本」のみ。C199で登場演出のみ追加。 ============================================================ */ /* C199: restrained one-shot reveals for standard section introductions and grouped content. Content stays visible unless JS successfully adds .sr-motion-ready. */ #about [data-sr-reveal], #reasons [data-sr-reveal], #work [data-sr-reveal], #numbers [data-sr-reveal], #flow [data-sr-reveal], #voice [data-sr-reveal], #recruit [data-sr-reveal], #visit-cta [data-sr-reveal], #use-flow [data-sr-reveal], #news [data-sr-reveal], #faq [data-sr-reveal], #access [data-sr-reveal], #final-contact [data-sr-reveal]{ --sr-from:translate3d(0,16px,0); --sr-duration:1050ms; --sr-delay:0ms; } #about .sr-photo, #reasons .sr-photo{ --sr-duration:1150ms; } #about .sr-photo{--sr-from:translate3d(-18px,0,0);} #reasons .rs-imgleft .sr-photo{--sr-from:translate3d(18px,0,0);} #reasons .rs-row:not(.rs-imgleft) .sr-photo{--sr-from:translate3d(-18px,0,0);} #about .sr-delay-140{--sr-delay:140ms;} #about .sr-delay-280{--sr-delay:280ms;} #about .sr-delay-420{--sr-delay:420ms;} #about .sr-delay-560{--sr-delay:560ms;} #about .sr-delay-720{--sr-delay:720ms;} #about .nro-hopes4 > [data-sr-reveal]{--sr-from:translate3d(0,12px,0);--sr-duration:1150ms;} #about .nro-hopes4 > [data-sr-reveal]:nth-child(2){--sr-delay:170ms;} #about .nro-hopes4 > [data-sr-reveal]:nth-child(3){--sr-delay:340ms;} #about .nro-hopes4 > [data-sr-reveal]:nth-child(4){--sr-delay:510ms;} #reasons .rs-row .sr-photo{--sr-delay:200ms;} #work .wk-grid > [data-sr-reveal]{--sr-from:translate3d(0,12px,0);--sr-duration:1000ms;} #work .wk-grid > [data-sr-reveal]:nth-child(2){--sr-delay:120ms;} #work .wk-grid > [data-sr-reveal]:nth-child(3){--sr-delay:240ms;} #work .wk-grid > [data-sr-reveal]:nth-child(4){--sr-delay:500ms;} #work .wk-grid > [data-sr-reveal]:nth-child(5){--sr-delay:640ms;} #work .wk-grid > [data-sr-reveal]:nth-child(6){--sr-delay:780ms;} #visit-cta .vc-reveal-copy[data-sr-reveal], #final-contact .fc-left[data-sr-reveal]{--sr-from:translate3d(0,14px,0);} #recruit .rq-content[data-sr-reveal]{--sr-from:translate3d(0,16px,0);--sr-duration:1100ms;--sr-delay:280ms;} #use-flow .uf-row[data-sr-reveal]{--sr-from:translate3d(0,12px,0);--sr-duration:1050ms;--sr-delay:0ms;} #news .news-content[data-sr-reveal], #news .news-more[data-sr-reveal]{--sr-from:translate3d(0,10px,0);--sr-duration:1000ms;--sr-delay:120ms;} #faq .fq-list[data-sr-reveal]{--sr-from:translate3d(0,14px,0);--sr-duration:1050ms;--sr-delay:260ms;} #access .ac-info[data-sr-reveal]{--sr-from:translate3d(0,12px,0);--sr-duration:1050ms;} #access .ac-map[data-sr-reveal]{--sr-from:translate3d(-18px,0,0);--sr-duration:1150ms;--sr-delay:200ms;} #final-contact .fc-media[data-sr-reveal]{--sr-from:translate3d(18px,0,0);--sr-duration:1150ms;--sr-delay:200ms;} html.sr-motion-ready #about [data-sr-reveal], html.sr-motion-ready #reasons [data-sr-reveal], html.sr-motion-ready #work [data-sr-reveal], html.sr-motion-ready #numbers [data-sr-reveal], html.sr-motion-ready #flow [data-sr-reveal], html.sr-motion-ready #voice [data-sr-reveal], html.sr-motion-ready #recruit [data-sr-reveal], html.sr-motion-ready #visit-cta [data-sr-reveal], html.sr-motion-ready #use-flow [data-sr-reveal], html.sr-motion-ready #news [data-sr-reveal], html.sr-motion-ready #faq [data-sr-reveal], html.sr-motion-ready #access [data-sr-reveal], html.sr-motion-ready #final-contact [data-sr-reveal]{ transition-property:opacity,transform; transition-duration:var(--sr-duration); transition-timing-function:cubic-bezier(0.25,0.46,0.45,0.94); transition-delay:var(--sr-delay); will-change:opacity,transform; } html.sr-motion-ready #about [data-sr-group]:not(.is-revealed) [data-sr-reveal], html.sr-motion-ready #reasons [data-sr-group]:not(.is-revealed) [data-sr-reveal], html.sr-motion-ready #work [data-sr-group]:not(.is-revealed) [data-sr-reveal], html.sr-motion-ready #numbers [data-sr-group]:not(.is-revealed) [data-sr-reveal], html.sr-motion-ready #flow [data-sr-group]:not(.is-revealed) [data-sr-reveal], html.sr-motion-ready #voice [data-sr-group]:not(.is-revealed) [data-sr-reveal], html.sr-motion-ready #recruit [data-sr-group]:not(.is-revealed) [data-sr-reveal], html.sr-motion-ready #visit-cta [data-sr-group]:not(.is-revealed) [data-sr-reveal], html.sr-motion-ready #use-flow [data-sr-group]:not(.is-revealed) [data-sr-reveal], html.sr-motion-ready #news [data-sr-group]:not(.is-revealed) [data-sr-reveal], html.sr-motion-ready #faq [data-sr-group]:not(.is-revealed) [data-sr-reveal], html.sr-motion-ready #access [data-sr-group]:not(.is-revealed) [data-sr-reveal], html.sr-motion-ready #final-contact [data-sr-group]:not(.is-revealed) [data-sr-reveal], html.sr-motion-ready #about [data-sr-group][data-sr-reveal]:not(.is-revealed), html.sr-motion-ready #reasons [data-sr-group][data-sr-reveal]:not(.is-revealed), html.sr-motion-ready #work [data-sr-group][data-sr-reveal]:not(.is-revealed), html.sr-motion-ready #numbers [data-sr-group][data-sr-reveal]:not(.is-revealed), html.sr-motion-ready #flow [data-sr-group][data-sr-reveal]:not(.is-revealed), html.sr-motion-ready #voice [data-sr-group][data-sr-reveal]:not(.is-revealed), html.sr-motion-ready #recruit [data-sr-group][data-sr-reveal]:not(.is-revealed), html.sr-motion-ready #visit-cta [data-sr-group][data-sr-reveal]:not(.is-revealed), html.sr-motion-ready #use-flow [data-sr-group][data-sr-reveal]:not(.is-revealed), html.sr-motion-ready #news [data-sr-group][data-sr-reveal]:not(.is-revealed), html.sr-motion-ready #faq [data-sr-group][data-sr-reveal]:not(.is-revealed), html.sr-motion-ready #access [data-sr-group][data-sr-reveal]:not(.is-revealed), html.sr-motion-ready #final-contact [data-sr-group][data-sr-reveal]:not(.is-revealed){ opacity:0; transform:var(--sr-from); } html.sr-motion-ready #recruit [data-sr-group]:not(.is-revealed) .rq-content[data-sr-reveal]{opacity:0.15;} html.sr-motion-ready #faq [data-sr-group]:not(.is-revealed) .fq-list[data-sr-reveal]{opacity:0.15;} html.sr-motion-ready #about [data-sr-group].is-revealed [data-sr-reveal], html.sr-motion-ready #reasons [data-sr-group].is-revealed [data-sr-reveal], html.sr-motion-ready #work [data-sr-group].is-revealed [data-sr-reveal], html.sr-motion-ready #numbers [data-sr-group].is-revealed [data-sr-reveal], html.sr-motion-ready #flow [data-sr-group].is-revealed [data-sr-reveal], html.sr-motion-ready #voice [data-sr-group].is-revealed [data-sr-reveal], html.sr-motion-ready #recruit [data-sr-group].is-revealed [data-sr-reveal], html.sr-motion-ready #visit-cta [data-sr-group].is-revealed [data-sr-reveal], html.sr-motion-ready #use-flow [data-sr-group].is-revealed [data-sr-reveal], html.sr-motion-ready #news [data-sr-group].is-revealed [data-sr-reveal], html.sr-motion-ready #faq [data-sr-group].is-revealed [data-sr-reveal], html.sr-motion-ready #access [data-sr-group].is-revealed [data-sr-reveal], html.sr-motion-ready #final-contact [data-sr-group].is-revealed [data-sr-reveal], html.sr-motion-ready #about [data-sr-group][data-sr-reveal].is-revealed, html.sr-motion-ready #reasons [data-sr-group][data-sr-reveal].is-revealed, html.sr-motion-ready #work [data-sr-group][data-sr-reveal].is-revealed, html.sr-motion-ready #numbers [data-sr-group][data-sr-reveal].is-revealed, html.sr-motion-ready #flow [data-sr-group][data-sr-reveal].is-revealed, html.sr-motion-ready #voice [data-sr-group][data-sr-reveal].is-revealed, html.sr-motion-ready #recruit [data-sr-group][data-sr-reveal].is-revealed, html.sr-motion-ready #visit-cta [data-sr-group][data-sr-reveal].is-revealed, html.sr-motion-ready #use-flow [data-sr-group][data-sr-reveal].is-revealed, html.sr-motion-ready #news [data-sr-group][data-sr-reveal].is-revealed, html.sr-motion-ready #faq [data-sr-group][data-sr-reveal].is-revealed, html.sr-motion-ready #access [data-sr-group][data-sr-reveal].is-revealed, html.sr-motion-ready #final-contact [data-sr-group][data-sr-reveal].is-revealed{ opacity:1; transform:translate3d(0,0,0); } @media (min-width:900px) and (max-height:820px){ #flow .flow-stage-shell{ top:0; height:100vh; min-height:680px; max-height:760px; } #flow .flow-stage-meta{ flex-basis:66px; min-height:66px; } #flow .flow-timeline{ flex-basis:80px; min-height:80px; padding-top:11px; padding-bottom:13px; } } @media (max-width:899.98px){ #about [data-sr-reveal], #reasons [data-sr-reveal], #work [data-sr-reveal], #numbers [data-sr-reveal], #flow [data-sr-reveal], #voice [data-sr-reveal], #recruit [data-sr-reveal], #visit-cta [data-sr-reveal], #use-flow [data-sr-reveal], #news [data-sr-reveal], #faq [data-sr-reveal], #access [data-sr-reveal], #final-contact [data-sr-reveal]{--sr-from:translate3d(0,10px,0);--sr-duration:850ms;} #about .sr-photo, #reasons .sr-photo{--sr-from:translate3d(0,10px,0);--sr-duration:900ms;} #reasons .rs-row.rs-imgleft .sr-photo, #reasons .rs-row:not(.rs-imgleft) .sr-photo{--sr-from:translate3d(0,10px,0);} #reasons .rs-row .sr-photo{--sr-delay:140ms;} #about .nro-hopes4 > [data-sr-reveal]{--sr-from:translate3d(0,10px,0);--sr-duration:950ms;} #about .nro-hopes4 > [data-sr-reveal]:nth-child(2){--sr-delay:110ms;} #about .nro-hopes4 > [data-sr-reveal]:nth-child(3){--sr-delay:220ms;} #about .nro-hopes4 > [data-sr-reveal]:nth-child(4){--sr-delay:330ms;} #work .wk-grid > [data-sr-reveal]{--sr-from:translate3d(0,8px,0);--sr-duration:850ms;} #work .wk-grid > [data-sr-reveal]:nth-child(2){--sr-delay:90ms;} #work .wk-grid > [data-sr-reveal]:nth-child(3){--sr-delay:180ms;} #work .wk-grid > [data-sr-reveal]:nth-child(4){--sr-delay:270ms;} #work .wk-grid > [data-sr-reveal]:nth-child(5), #work .wk-grid > [data-sr-reveal]:nth-child(6){--sr-delay:360ms;} #visit-cta .vc-reveal-copy[data-sr-reveal], #final-contact .fc-left[data-sr-reveal]{--sr-from:translate3d(0,8px,0);--sr-duration:850ms;} #recruit .rq-content[data-sr-reveal]{--sr-from:translate3d(0,10px,0);--sr-duration:900ms;--sr-delay:180ms;} #faq .fq-list[data-sr-reveal]{--sr-from:translate3d(0,10px,0);--sr-duration:900ms;--sr-delay:180ms;} #use-flow .uf-row[data-sr-reveal]{--sr-from:translate3d(0,8px,0);--sr-duration:900ms;--sr-delay:0ms;} #news .news-content[data-sr-reveal], #news .news-more[data-sr-reveal]{--sr-from:translate3d(0,8px,0);--sr-duration:850ms;--sr-delay:90ms;} #access .ac-info[data-sr-reveal]{--sr-from:translate3d(0,8px,0);--sr-duration:850ms;} #access .ac-map[data-sr-reveal], #final-contact .fc-media[data-sr-reveal]{--sr-from:translate3d(0,8px,0);--sr-duration:900ms;--sr-delay:140ms;} html.sr-motion-ready #recruit [data-sr-group]:not(.is-revealed) .rq-content[data-sr-reveal]{opacity:0.2;} html.sr-motion-ready #faq [data-sr-group]:not(.is-revealed) .fq-list[data-sr-reveal]{opacity:0.2;} } @media (prefers-reduced-motion:reduce){ html.sr-motion-ready #about [data-sr-reveal], html.sr-motion-ready #reasons [data-sr-reveal], html.sr-motion-ready #work [data-sr-reveal], html.sr-motion-ready #numbers [data-sr-reveal], html.sr-motion-ready #flow [data-sr-reveal], html.sr-motion-ready #voice [data-sr-reveal], html.sr-motion-ready #recruit [data-sr-reveal], html.sr-motion-ready #visit-cta [data-sr-reveal], html.sr-motion-ready #use-flow [data-sr-reveal], html.sr-motion-ready #news [data-sr-reveal], html.sr-motion-ready #faq [data-sr-reveal], html.sr-motion-ready #access [data-sr-reveal], html.sr-motion-ready #final-contact [data-sr-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; transition-delay:0s !important; will-change:auto !important; } } /* #about の該当ブロックは末尾のトークン化ブロックへ移動 */ /* #about の該当ブロックは末尾のトークン化ブロックへ移動 */ /* #about の該当ブロックは末尾のトークン化ブロックへ移動 */ /* #about の該当ブロックは末尾のトークン化ブロックへ移動 */ /* C199 stage1（#about の 600-1199.98px）は末尾のトークン化ブロックへ移動 */ /* #about の 599.98px ブロックは末尾のトークン化ブロックへ移動 */ /* C199 stage2 の #reasons 一式はファイル末尾のトークン化ブロックへ移動 */ /* C201-c: the sticky PC header must not cover the pinned #flow stage meta row. Only the stage's sticky offset/height cap change — scenes, timing and JS are untouched. */ @media (min-width:900px){ #flow .flow-stage-shell{ top:max(86px, clamp(0px,8vh,84px)) !important; height:min(clamp(760px,82vh,860px), calc(100vh - 102px)) !important; min-height:0 !important; } } @media (min-width:900px) and (max-height:820px){ #flow .flow-stage-shell{ top:86px !important; height:calc(100vh - 102px) !important; max-height:760px !important; } } /* C201-d: header height + fixed CTA geometry are driven by two custom properties. */ /* --cta-orange 系は .fx-cta-pc と #final-contact のタグで使っていたが、どちらも --brand-accent-warm からの導出に置き換えたので変数ごと削除した。 */ :root{--gsh-h:78px;--fxsp-h:60px;} /* ヘッダーの高さ。C228は 979 / 767 / 599 の3段（78/70/66/64px）だったが、実効値を測ると 66px の段はロゴ以外に影響していなかったので2段に畳んだ。 */ @media (max-width:979.98px){:root{--gsh-h:70px;}} @media (max-width:599.98px){:root{--gsh-h:64px;}} /* C201-f: .gsh-header was position:sticky, whose containing block is .page-root — sticky stops at that box's bottom, so the header scrolled away over the final CTA / footer. Fixed positioning keeps it to the very bottom of the page; .page-root reserves the header height so nothing shifts. Height, colours, logo, nav, shadow and breakpoints are unchanged. */ .gsh-header{position:fixed;top:0;left:0;right:0;height:var(--gsh-h);z-index:90;will-change:auto;} .page-root{padding-top:var(--gsh-h);} /* C224: on a wide but SHORT laptop the fixed header eats the vertical room the #flow stage needs, which is what C221-C223 were compensating for by shrinking the stage. Here the header instead retreats upward while #flow owns the viewport, and the two header-reserve values inside #flow (the sticky top offset and the calc(100vh - 102px) height budget, both = --gsh-h + gap) are released for that time only. Nothing is resized. Scope: >=1280px wide AND <=760px tall. Narrower widths keep the C223 compact block; taller viewports keep the header on screen at all times. */ .gsh-header{transition:transform 260ms cubic-bezier(0.22,0.8,0.32,1);} @media (prefers-reduced-motion: reduce){.gsh-header{transition:none !important;}} @media (min-width:1280px) and (max-height:760px){ html.flow-header-away .gsh-header{transform:translateY(-100%);pointer-events:none;} html.flow-header-away #flow .flow-stage-shell{ top:8px !important; height:calc(100vh - 24px) !important; max-height:none !important; } } /* C201-f: ページ内アンカーはブラウザ標準のスムーズスクロール（体感約500〜700ms）。横スクロール系（ギャラリー／利用者の1日カルーセル）は従来どおり瞬時スクロールを維持。 */ html{scroll-behavior:smooth;} #facility-gallery .fgb2-stage,#flow .flow-car-viewport{scroll-behavior:auto;} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}} /* #access はヘッダー直下の見出し位置が他と違うため、末尾のトークン化ブロックで個別に指定する。このリストから外したことで、あちら側は !important 無しで効く。 */ #about,#reasons,#work,#flow,#numbers,#voice,#recruit,#use-flow,#faq,#news,#facility-gallery,#final-contact{scroll-margin-top:calc(var(--gsh-h) + 14px) !important;} @media (min-width:900px){ .fx-cta-pc{display:flex !important;} .fx-cta-sp{display:none !important;} } /* PC side CTA stays visible to the footer; only the SP bar hides near the end. */ .fx-cta-sp.is-near-end{opacity:0 !important;pointer-events:none !important;transform:translateY(12px) !important;} .fx-cta-sp.is-menu{opacity:0 !important;pointer-events:none !important;} @media (max-height:430px){.fx-cta-pc{display:none !important;}} @media (prefers-reduced-motion: reduce){.fx-cta-pc,.fx-cta-sp{transition:none !important;}} /* C201-e: オレンジは PC サイド固定CTA だけにスコープ。色は最終CTA「見学・相談フォームへ」で既存使用中の #F5A037→#EC7F25（写真のオレンジの椅子と同系）。他のCTAはインラインの元の青（#1a5fd0→#2f80e0 / 白地＋#1a5fd0）がそのまま効く。 */ .fx-cta-pc{ background:linear-gradient(180deg, color-mix(in srgb, var(--brand-accent-warm) 78%, white) 0%, var(--brand-accent-warm) 100%) !important; color:var(--ink-invert) !important; box-shadow:-6px 0 20px color-mix(in srgb, var(--brand-accent-warm) 26%, transparent) !important; } .fx-cta-pc:hover{ background:linear-gradient(180deg, var(--brand-accent-warm) 0%, color-mix(in srgb, var(--brand-accent-warm) 80%, black) 100%) !important; color:var(--ink-invert) !important; } .fx-cta-pc:focus-visible{outline:3px solid var(--ink-strong);outline-offset:3px;} /* C201-e: 最終CTA主ボタンも「オレンジはPCサイドCTAだけ」の方針に合わせ、サイト既存のCTA青（#1a5fd0→#2f80e0 / hover #1554bd→#2a74cf）へ統一。形・文字・矢印・サイズは不変。 */ /* #final-contact の該当ルールは末尾のトークン化ブロックへ移動 */ /* ============================================================ C201 — SMARTPHONE REFINEMENT (mobile only) Every rule below lives inside a max-width media query and is scoped to a single section id/class, so PC (>=900px) layout, the #flow scroll stage and all existing animations are untouched. ============================================================ */ @media (max-width:899.98px){ /* FV の C201-i（SPの上下構成）は末尾のトークン化ブロックへ */ } /* FV の C201-j（600-899の写真高さ）は末尾のトークン化ブロックへ */ @media (max-width:899.98px){ /* 2. FAQ — lighter question rows (600–899px: 17px) */ /* #faq の該当ルールはファイル末尾のトークン化ブロックへ移動 */ /* #reasons の C220 調整もファイル末尾のトークン化ブロックへ統合 */ /* 5. 利用者の1日 — compact vertical timeline (PC stage is min-width:900px only) */ #flow{padding:72px 0 8px !important;} #flow .flow-car-viewport{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;} #flow .flow-car-viewport::-webkit-scrollbar{display:none;} #flow .flow-mobile button:disabled{opacity:0.32;cursor:default;box-shadow:none !important;} #flow .flow-car-viewport:focus-visible{outline:2px solid var(--brand-primary);} /* 6+7. 数字で見る — heading + card density */ /* #numbers の SP 一式はファイル末尾のトークン化ブロックへ移動（C147 LOCK は不変） */ /* C201-c. SP: 下部固定CTAのみ表示（PCサイドCTAは非表示）／ヘッダー追従とアンカー位置 */ .fx-cta-pc{display:none !important;} .fx-cta-sp{display:block !important;} #site-footer{padding-bottom:calc(var(--fxsp-h) + 26px + env(safe-area-inset-bottom)) !important;} #gsf-pagetop{bottom:calc(var(--fxsp-h) + 12px + env(safe-area-inset-bottom)) !important;} /* C201-b1. お知らせ → 画像ギャラリーの重複余白を整理（ギャラリー内部は不変） #news 側の padding-bottom:38px は .lp-section（--sp-section-y）へ移行したため削除。 #facility-gallery をトークン化するときに、この42pxと合わせて再調整すること。 */ #facility-gallery{padding-top:var(--sp-7);} /* #numbers の SP 一式はファイル末尾のトークン化ブロックへ移動（C147 LOCK は不変） */ /* C201-b3. ご利用までの流れ：導入文 → STEP 01 の区切りを確保 */ /* #use-flow の該当ルールはファイル末尾のトークン化ブロックへ移動 */ /* C201-b5. 中間CV：SP専用見出し＋人物を少し左へ＋青のかぶりを弱める */ /* #visit-cta の該当ルールは末尾のトークン化ブロックへ移動 */ /* 11. 画像ギャラリー — SP は等速連続スクロール（CSSマーキーは停止、JSのscrollLeftのみ・スナップなし） */ #facility-gallery .fgb2-stage{height:auto !important;overflow-x:auto !important;overflow-y:hidden !important;scroll-snap-type:none !important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none !important;-ms-overflow-style:none !important;} #facility-gallery .fgb2-stage::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important;} #facility-gallery .fgb2-imgtrack{position:relative !important;animation:none !important;transform:none !important;height:auto !important;padding-inline:calc((100vw - 300px) / 2) !important;} #facility-gallery .fgb2-txttrack{display:none !important;} #facility-gallery .fgb2-dup{display:contents !important;} #facility-gallery .fgb2-pause{display:none !important;} #facility-gallery .fgb2-img{scroll-snap-align:none;} /* 8. 利用者の声 — SP は縦アコーディオン（PCカルーセルは非表示） */ #voice .voice-carousel-wrap{display:none !important;} #voice .voice-acc{display:block !important;} #voice .voice-acc > div:last-child{margin-bottom:0 !important;} #voice .vacc-panel[data-open="1"]{grid-template-rows:1fr !important;opacity:1 !important;} #voice .vacc-card:has(button[aria-expanded="true"]){border-color:color-mix(in srgb, var(--vacc) 34%, transparent);} #voice .voice-acc button[aria-expanded="true"] .vacc-icon{background:var(--vacc);color:var(--ink-invert);} #voice .voice-acc button[aria-expanded="true"] .vacc-icon svg{transform:rotate(180deg);} /* 8. 利用者の声 — heading + no leftover fixed height */ #voice .voice-heading-band{min-height:0;padding:var(--sp-7) 0 var(--sp-8);} #voice .vh-h2{margin-top:var(--sp-3);} #voice .vh-lead{margin-top:var(--sp-3);} #voice .voice-carousel-wrap{min-height:0 !important;} #voice .v-group{margin-top:22px !important;} #voice .v-card{padding:26px 22px 24px !important;} /* 10. ご利用までの流れ — heading, step rhythm, 16:9 photos */ /* #use-flow の該当ルールはファイル末尾のトークン化ブロックへ移動 */ /* 12. 最終CTA(C204) — 見出しは写真上に維持し、白いパネルを低く保つ */ /* #final-contact の該当ルールは末尾のトークン化ブロックへ移動 */ } @media (min-width:600px) and (max-width:899.98px){ /* 最終CTA(C204) — タブレット幅: ボタンは横並び */ /* #final-contact の該当ルールは末尾のトークン化ブロックへ移動 */ } @media (max-width:430px){ /* 最終CTA(C204) — 390px基準 */ /* #final-contact の該当ルールは末尾のトークン化ブロックへ移動 */ } @media (max-width:599.98px){ /* #about の SP 読み順（display:contents で本文と写真を交互に）は末尾のトークン化ブロックへ統合 */ } @media (max-width:599.98px){ /* #reasons の C220 調整もファイル末尾のトークン化ブロックへ統合 */ /* 2b. FAQ question rows at phone width */ /* #faq の該当ルールはファイル末尾のトークン化ブロックへ移動 */ /* 1. About SUPPORT photo = same content width as the WORK photo */ /* #reasons の C220 調整もファイル末尾のトークン化ブロックへ統合 */ } /* ===== 4. 擬似クラスCSS（原本の style-hover / style-focus 属性から生成） ===== C228の hover 色（#1554BD→#2A74CF、#3560A4 ほか）はすべて主色から導出する。 --brand-primary を差し替えると hover / focus も一緒に変わる。 */ .scp0:hover { color: var(--ink-invert) !important; background: var(--cta-hover-grad) !important; } .scp1:hover { background: color-mix(in srgb, var(--brand-primary) 7%, white) !important; } .scp2:hover { background: color-mix(in srgb, var(--brand-primary) 5%, white) !important; color: var(--brand-primary) !important; } .scp3:hover { color: var(--ink-invert) !important; background: var(--cta-hover-grad) !important; box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-primary) 36%, transparent) !important; } .scp4:hover { background: var(--cta-hover-flat) !important; } .scp5:hover { background: var(--cta-hover-flat) !important; } .scp6:hover { transform: translateY(-2px) !important; background: var(--cta-hover-grad) !important; box-shadow: 0 14px 28px color-mix(in srgb, var(--shadow-ink) 36%, transparent) !important; } .scp7:focus { outline: color-mix(in srgb, var(--surface-base) 85%, transparent) solid 3px !important; outline-offset: 3px !important; } .scp8:hover { background: color-mix(in srgb, var(--brand-primary) 2%, white) !important; } .scp9:focus-visible { outline: var(--brand-primary) solid 2px !important; outline-offset: 2px !important; } .scpa:hover { color: var(--ink-invert) !important; background: var(--cta-hover-grad) !important; transform: translateY(-2px) !important; box-shadow: 0 14px 28px color-mix(in srgb, var(--shadow-ink) 28%, transparent) !important; } .scpb:hover { background: var(--surface-base) !important; border-color: color-mix(in srgb, color-mix(in srgb, var(--brand-primary) 30%, var(--ink-strong)) 50%, transparent) !important; transform: translateY(-1px) !important; } .scpc:hover { color: var(--ink-invert) !important; background: linear-gradient(color-mix(in srgb, var(--brand-primary) 88%, black), color-mix(in srgb, var(--brand-primary) 92%, white)) !important; } /* ============================================================ C227 — 利用者の声（スマートフォンのみ） 1) 開閉の表示状態は data-open 属性だけで決める。JS が属性を同期するので、閉状態も明示して inline の grid-template-rows / opacity と競合させない。 2) SPは縦アコーディオンのため、PCスライダー用の装飾（青いページネーションバー・下端の青い丸／斜線カプセル）を非表示にする。 3) 装飾を外した分の下端余白を詰め、次セクションへ自然につなぐ。 PC・タブレット（>=900px）のスライダー表示・動作・装飾は対象外。 ============================================================ */ @media (max-width:899.98px){ #voice .vacc-panel{grid-template-rows:0fr !important;opacity:0 !important;} #voice .vacc-panel[data-open="1"]{grid-template-rows:1fr !important;opacity:1 !important;} #voice .vacc-icon{transform:none !important;} #voice .voice-acc button[aria-controls^="voice-acc-panel-"]{min-height:92px;touch-action:manipulation;} #voice > span[data-voice-deco]{display:none !important;} #voice > div[data-voice-dots]{display:none !important;} #voice{padding-bottom:32px !important;} #voice .voice-acc{margin-bottom:0 !important;} } /* ============================================================ #news — お知らせ（トークン化済み / TOKENIZE.md 手順2の1件目） ------------------------------------------------------------ ・index.html 側に style="" は残っていない・!important は0 ・生の色コード・生の font-size なし・ブレークポイントは design-tokens.css の3点のみ PC : 900px～（メディアクエリを持たない基準） TB+SP : ～899.98px SP : ～599.98px セクション上下余白・面・見出しは .lp-section / .lp-inner / .lp-head / .lp-eyebrow / .lp-h2 が持つ。ここに書くのは「型で表現できない #news 固有の見た目」だけ。 ============================================================ */ /* --- 見出し列 + 一覧列（PC） --- */ #news .news-inner{ display:grid; grid-template-columns:240px minmax(0,1fr); /* 240px = 見出し列。構造値なのでトークン化しない */ column-gap:var(--sp-8); align-items:start; } /* .lp-head の下余白は使わない。見出しと「一覧を見る」の間は news-more が持つ */ #news .news-heading-copy{margin-bottom:0;} #news .lp-eyebrow{margin-bottom:var(--sp-3);} #news .lp-h2{margin-top:0;} #news .news-more{margin-top:var(--sp-6);} #news .news-more-link{ display:inline-flex; align-items:center; gap:var(--sp-2); padding-bottom:var(--sp-2); border-bottom:1px solid var(--brand-primary-a24); font-size:var(--fs-body-s); font-weight:var(--fw-normal); line-height:var(--lh-snug); letter-spacing:var(--ls-normal); color:var(--brand-primary); white-space:nowrap; } /* リンク先が未定のプレースホルダー。押せる見た目にしない */ #news .news-more-link--placeholder{cursor:default;} #news .news-more-link svg{ width:1em; height:1em; stroke:currentcolor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } /* --- 一覧 --- */ #news .news-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--border-line); } #news .news-item{ box-sizing:border-box; display:grid; /* C228は 1024px のブレークポイントで 150px→108px/100px に切り替えていた。 fr比（150:150:476 = 1280px時の実寸）＋ min-content の下限にすると、 1280pxの見た目そのままで中間幅も折り返さずに詰まるため、ブレークポイントを1つ減らせる。 */ grid-template-columns: var(--sp-2) minmax(min-content,150fr) minmax(min-content,150fr) minmax(0,476fr); column-gap:var(--sp-5); align-items:center; min-height:76px; padding-block:var(--sp-5); border-bottom:1px solid var(--border-line); } #news .news-dot{ width:var(--sp-2); height:var(--sp-2); border-radius:50%; background:var(--brand-primary); } #news .news-date{ font-size:var(--fs-body-s); font-weight:var(--fw-normal); line-height:var(--lh-snug); letter-spacing:var(--ls-normal); color:var(--ink-base); white-space:nowrap; } #news .news-cat{ display:inline-flex; align-items:center; justify-content:center; width:fit-content; height:var(--sp-5); padding-inline:var(--sp-3); border-radius:var(--r-sm); border:1px solid color-mix(in srgb, var(--brand-primary) 18%, transparent); background:var(--brand-primary-a04); font-size:var(--fs-label); font-weight:var(--fw-normal); line-height:var(--lh-flat); color:var(--brand-primary); white-space:nowrap; } #news .news-title-text{ margin:0; font-size:var(--fs-body); font-weight:var(--fw-normal); line-height:var(--lh-snug); letter-spacing:var(--ls-normal); color:var(--ink-strong); } /* --- TB + SP : 見出しを一覧の上に積む --- */ @media (max-width:899.98px){ #news .news-inner{ grid-template-columns:minmax(0,1fr); row-gap:var(--sp-6); } /* 一覧の横幅が本文1行分しかないので、日付とカテゴリは内容幅まで詰めて余りを見出しに回す。fr比のままだと600px前後で見出しが2行に折り返す。 */ #news .news-item{ grid-template-columns:var(--sp-2) auto auto minmax(0,1fr); column-gap:var(--sp-4); } } /* --- SP : 1件を「日付＋カテゴリ / 見出し」の2行に畳む --- */ @media (max-width:599.98px){ #news .news-dot{display:none;} #news .news-item{ grid-template-columns:auto minmax(0,1fr); column-gap:var(--sp-3); row-gap:var(--sp-2); min-height:0; } #news .news-title-text{grid-column:1 / -1;} } /* ============================================================ #access — アクセス（トークン化済み） ------------------------------------------------------------ ・style="" 0 / !important 0 / 生の色・font-size 0 ・ブレークポイント: 基準（900px～） / 899.98 / 599.98 C228の 1219 / 1023 / 899.98 / 420 の4段を2段に畳んだ。 1219と1023は TOKENIZE.md の指示どおり900px側へ吸収し、情報カラムに minmax(360px,1fr) の下限を与えて成立させている。 ============================================================ */ #access{ overflow:hidden; /* ヘッダー直下に見出しが来るセクションなので、共有のアンカー位置とは別値。共有ルールのセレクタから #access を外したので !important は不要。 */ scroll-margin-top:calc(var(--gsh-h) - 28px); } /* 「徒歩1分。」はPCでは同じ行、SPでは改行させる */ #access .ac-h2-l2{display:inline;} /* --- 地図＋情報のカード --- */ #access .ac-card{ box-sizing:border-box; display:grid; /* 1.72fr : 1fr は原本の比率。情報側に360pxの下限を置くことで、 900〜1219pxでも1カラムへ落とさずに読める幅を確保する。 */ grid-template-columns:minmax(0,1.72fr) minmax(360px,1fr); align-items:stretch; border:1px solid var(--border-line); border-radius:var(--r-lg); box-shadow:var(--shadow-lift); background:var(--surface-base); overflow:hidden; } #access .ac-map{ min-width:0; height:100%; background:var(--surface-sunken); } #access .ac-map iframe{ display:block; width:100%; height:100%; border:0; } #access .ac-side{ display:flex; flex-direction:column; min-width:0; background:var(--surface-base); } #access .ac-photo{ display:block; width:100%; height:230px; /* 写真の見せ幅。構造値 */ object-fit:cover; object-position:center 45%; } #access .ac-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:var(--sp-6); background:var(--surface-base); color:var(--ink-strong); } #access .ac-name{ font-size:var(--fs-h5); font-weight:var(--fw-bold); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); color:var(--ink-strong); } #access .ac-addr-row{ display:flex; align-items:flex-start; gap:var(--sp-3); margin-top:var(--sp-3); } #access .ac-icon{ display:flex; padding-top:var(--sp-1); } #access .ac-addr-text{ display:block; font-size:var(--fs-body-s); font-weight:var(--fw-normal); line-height:var(--lh-normal); color:var(--ink-muted); } #access .ac-addr{display:block;white-space:nowrap;} #access .ac-routes{ display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--border-line); } #access .ac-route{ display:flex; align-items:flex-start; gap:var(--sp-3); } #access .ac-route > svg{margin-top:2px;} /* アイコンの光学的な位置合わせ */ #access .ac-route-body{min-width:0;} #access .ac-route-label{ font-size:var(--fs-label); font-weight:var(--fw-bold); letter-spacing:var(--ls-heading); color:var(--brand-primary); } #access .ac-route-val{ margin-top:2px; font-size:var(--fs-body-s); font-weight:var(--fw-bold); line-height:var(--lh-snug); color:var(--ink-strong); white-space:nowrap; } /* 情報パネルのアイコンは共通の見た目 */ #access .ac-info svg{ width:19px; height:19px; flex:0 0 auto; stroke:var(--brand-primary); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* --- TB + SP : カードを縦積みにする --- */ @media (max-width:899.98px){ #access .ac-h2-l2{display:block;} #access .ac-card{ grid-template-columns:minmax(0,1fr); height:auto; } #access .ac-map{height:300px;} #access .ac-photo{height:220px;} #access .ac-info{padding:var(--sp-5);} /* 幅が狭いので住所と経路は折り返す。単語の途中では割らない。 */ #access .ac-nowrap{ white-space:normal; word-break:keep-all; overflow-wrap:anywhere; } } /* --- SP --- */ @media (max-width:599.98px){ #access .ac-photo{height:196px;} } /* ============================================================ #recruit — 募集要項（トークン化済み） ------------------------------------------------------------ ・style="" 0 / !important 0 / 生の色 0 ・ブレークポイント: 基準 / 899.98 / 599.98（C228は 899.98 と 430 の2段）・font-size で唯一トークンでないのは背景の飾り文字。 TOKENIZE.md が「背景の飾り文字。個別指定のまま可」としている箇所。 ============================================================ */ #recruit{overflow:hidden;} /* 背景の飾り文字 WORKING / CONDITIONS */ #recruit .rq-deco{ position:absolute; z-index:0; bottom:72px; left:clamp(150px, 11vw, 220px); font-family:var(--font-display); font-weight:var(--fw-black); font-size:clamp(140px, 9vw, 180px); /* 飾り。タイポスケールの外側 */ line-height:0.85; letter-spacing:0.01em; color:var(--brand-primary-a04); white-space:nowrap; pointer-events:none; user-select:none; } #recruit .rq-outer{ display:grid; grid-template-columns:minmax(260px,29%) minmax(0,1fr); column-gap:var(--sp-8); align-items:start; } #recruit .rq-head{ position:relative; z-index:2; padding-top:var(--sp-2); } /* 見出し下の短い罫。高さ3pxなので --r-pill で両端を丸める */ #recruit .rq-rule{ display:block; width:44px; height:3px; border-radius:var(--r-pill); background:var(--brand-primary); margin-top:var(--sp-5); } #recruit .rq-content{ position:relative; z-index:2; } /* .lp-card の上に、この表だけの枠線の濃さと余白を足す */ #recruit .rq-card{ border-color:var(--border-line); padding:var(--sp-4) var(--sp-7); } #recruit .rq-row{ display:grid; grid-template-columns:150px minmax(0,1fr); /* 150px = 見出し語の列。構造値 */ column-gap:var(--sp-6); align-items:baseline; padding-block:var(--sp-5); border-bottom:1px solid var(--border-hairline); } #recruit .rq-row:last-child{border-bottom:0;} #recruit .rq-label{ display:flex; align-items:center; gap:var(--sp-3); } #recruit .rq-dash{ display:block; width:14px; height:2px; flex:0 0 auto; background:var(--brand-primary); } #recruit .rq-label-text{ font-size:var(--fs-body-s); font-weight:var(--fw-bold); letter-spacing:var(--ls-heading); color:var(--ink-strong); } #recruit .rq-value{ font-size:var(--fs-body); font-weight:var(--fw-normal); line-height:var(--lh-relaxed); letter-spacing:var(--ls-normal); color:var(--ink-base); } /* --- TB + SP : 見出しを上に積み、1行を2段にする --- */ @media (max-width:899.98px){ #recruit .rq-outer{ grid-template-columns:minmax(0,1fr); row-gap:var(--sp-6); } #recruit .rq-card{padding:var(--sp-2) var(--sp-5);} #recruit .rq-row{ grid-template-columns:minmax(0,1fr); row-gap:var(--sp-2); } /* PCでの整形用の改行はSPでは邪魔になる */ #recruit .rq-pc-br{display:none;} } /* --- SP --- */ @media (max-width:599.98px){ #recruit .rq-card{padding:var(--sp-1) var(--sp-4);} } /* ============================================================ #faq — よくあるご質問（トークン化済み） ------------------------------------------------------------ ・style="" 0 / 生の色 0 / 生の font-size 0 ・ブレークポイント: 基準 / 899.98 / 599.98 C228は 768 / 767 / 599.98 / 430 / 360 / 899.98 の6点あった。【lp.js との結合について】 lp.js の renderFaq() が、開閉のたびに次の7プロパティをインラインstyleで直接書き込む。カード : border / box-shadow 質問テキスト: color / font-weight ＋−アイコン : background / color パネル : grid-template-rows ここでのCSSはJSが走る前の初期表示のぶんで、初期化時の renderFaq() が同じ「閉じた状態」の値で上書きする。値はC228のままなので見た目は変わらない。これらを完全にトークン化するには lp.js を書き換える必要があるため、今回の作業範囲外。progress.md に持ち越しとして記録。 ============================================================ */ #faq{overflow:hidden;} #faq .faq-reveal-group{z-index:1;} #faq .fq-list{ display:flex; flex-direction:column; gap:var(--sp-3); max-width:1000px; /* 読み幅の上限。--w-narrow(880) より広い固有値 */ margin:var(--sp-heading-gap) auto 0; } /* --- カード --- */ #faq .fq-card{ background:var(--surface-base); border:1px solid var(--border-hairline); border-radius:var(--r-md); box-shadow:var(--shadow-card); transition:border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } /* #faq-type-a はページ内アンカーの着地点 */ #faq .fq-card--anchor{ position:relative; overflow:visible; margin-top:var(--sp-3); scroll-margin-top:120px; } /* --- 質問行 --- */ #faq .fq-q{ width:100%; display:flex; align-items:center; gap:var(--sp-5); padding:var(--sp-5) var(--sp-6); border:0; background:none; cursor:pointer; text-align:left; font-family:var(--font-body); border-radius:var(--r-md); } #faq .fq-q-icon, #faq .fq-q-toggle{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:34px; height:34px; font-family:var(--font-display); font-size:var(--fs-h5); line-height:var(--lh-flat); background:var(--brand-primary-light); color:var(--brand-primary); } #faq .fq-q-icon{ border-radius:var(--r-sm); font-weight:var(--fw-black); } #faq .fq-q-toggle{ border-radius:var(--r-pill); font-weight:var(--fw-bold); transition:background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } #faq .fq-q-text{ flex:1 1 0%; font-size:var(--fs-h5); /* --fs-h5 は900px未満で18pxへ切り替わる */ font-weight:var(--fw-bold); line-height:var(--lh-snug); color:var(--ink-base); transition:color var(--dur-fast) var(--ease); } /* --- 回答パネル --- */ #faq .fq-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 0.34s; /* 開閉のトリガーはJS。時間はC228のまま */ } /* --- 開いた状態 --- lp.js は .fq-card に is-open を付け外しするだけ。色・太さ・影はここが持つので、--brand-primary の差し替えに追従する。 */ #faq .fq-card.is-open{ border-color:color-mix(in srgb, var(--brand-primary) 18%, transparent); box-shadow:0 8px 24px color-mix(in srgb, var(--ink-strong) 6%, transparent); } #faq .fq-card.is-open .fq-q-text{ color:var(--ink-strong); font-weight:var(--fw-black); } #faq .fq-card.is-open .fq-q-toggle{ background:var(--brand-primary); color:var(--ink-invert); } #faq .fq-card.is-open .fq-panel{grid-template-rows:1fr;} #faq .fq-panel-clip{overflow:hidden;min-height:0;} #faq .fq-a{ background:var(--surface-raised); border-top:1px solid var(--border-hairline); border-radius:0 0 var(--r-md) var(--r-md); } #faq .fq-a-row{ display:flex; gap:var(--sp-5); padding:var(--sp-5) var(--sp-6) var(--sp-6); } #faq .fq-a-icon{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--r-sm); background:var(--brand-accent-warm-bg); font-family:var(--font-display); font-weight:var(--fw-black); font-size:var(--fs-h5); line-height:var(--lh-flat); color:var(--brand-accent-warm); } #faq .fq-a-body{flex:1 1 0%;min-width:0;} #faq .fq-col{max-width:800px;} /* 回答本文の読み幅 */ #faq .fq-col--mt{margin-top:var(--sp-5);} #faq .fq-stack{display:flex;flex-direction:column;gap:var(--sp-3);} /* C228の 14px / 12px は同じ段（--sp-3）に畳まれたので --tight は実質同値 */ #faq .fq-p{ margin:0; font-size:var(--fs-body); font-weight:var(--fw-normal); line-height:var(--lh-normal); color:var(--ink-subtle); } #faq .fq-p--gap{margin-top:var(--sp-3);} /* --- 3つ並びのポイントカード --- */ #faq .fq-points{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:var(--sp-3); margin-top:var(--sp-5); } #faq .fq-point{ border-radius:var(--r-sm); padding:var(--sp-4) var(--sp-4) var(--sp-5); border:1px solid transparent; } #faq .fq-point-title{ font-size:var(--fs-body-s); font-weight:var(--fw-bold); line-height:var(--lh-snug); } #faq .fq-point-p{ margin:var(--sp-2) 0 0; font-size:var(--fs-caption); font-weight:var(--fw-normal); line-height:var(--lh-normal); color:var(--ink-subtle); } /* アクセント3色。見出しの文字色は、アクセント色そのままだと淡い面の上でコントラストが足りない（--brand-accent-warm を warm-bg に載せると約2.6:1）。黒側へ寄せて作る。トークンに「アクセントの文字用の濃さ」が無いため。 */ #faq .fq-point--brand{ background:var(--brand-primary-light); border-color:var(--brand-primary-a14); } #faq .fq-point--brand .fq-point-title{color:var(--brand-primary);} #faq .fq-point--warm{ background:var(--brand-accent-warm-bg); border-color:var(--brand-accent-warm-a16); } #faq .fq-point--warm .fq-point-title{color:var(--brand-accent-warm-ink);} #faq .fq-point--cool{ background:var(--brand-accent-cool-bg); border-color:var(--brand-accent-cool-a18); } #faq .fq-point--cool .fq-point-title{color:var(--brand-accent-cool-ink);} /* --- 注記ボックス --- */ #faq .fee-note-box{ margin-top:var(--sp-4); background:var(--surface-raised); border:1px solid var(--border-hairline); border-radius:var(--r-sm); padding:var(--sp-4); } #faq .fq-note-stack{display:flex;flex-direction:column;gap:var(--sp-3);} #faq .fq-note-p{ margin:0; font-size:var(--fs-label); font-weight:var(--fw-normal); line-height:var(--lh-normal); color:var(--ink-subtle); } /* --- 外部リンク --- */ #faq .fq-link{ display:inline-flex; align-items:center; gap:var(--sp-1); width:fit-content; margin-top:var(--sp-4); font-size:var(--fs-body-s); font-weight:var(--fw-bold); color:var(--brand-primary); text-decoration:underline; text-underline-offset:2px; } #faq .fq-link-ext{font-size:var(--fs-caption);} /* --- 利用料の表 --- */ #faq .fq-table-wrap{ margin-top:var(--sp-5); border:1px solid var(--border-line); border-radius:var(--r-sm); overflow:hidden; } #faq .fee-cap-table{ width:100%; border-collapse:collapse; } #faq .fq-caption{ caption-side:top; text-align:left; padding:var(--sp-3) var(--sp-4); background:var(--surface-base); font-size:var(--fs-caption); font-weight:var(--fw-bold); color:var(--ink-subtle); border-bottom:1px solid var(--border-hairline); } /* 見出し行の地。C228は #EEF4FB で、回答パネルの #F8FAFD と差が付いていた。 TOKENIZE.md はどちらも --surface-raised へ送るが、それだと見出し行がパネルと同色になって表として読めなくなる。1段下の --surface-sunken を使う。 */ #faq .fq-th{ text-align:left; padding:var(--sp-4); background:var(--surface-sunken); font-size:var(--fs-body-s); font-weight:var(--fw-bold); color:var(--ink-strong); border-bottom:1px solid var(--border-line); } #faq .fq-th--num{text-align:right;white-space:nowrap;} #faq .fq-rowhead, #faq .fq-num{ padding:var(--sp-4); font-size:var(--fs-body-s); color:var(--ink-base); border-bottom:1px solid var(--border-hairline); } #faq .fq-rowhead{ text-align:left; font-weight:var(--fw-normal); line-height:var(--lh-snug); } #faq .fq-num{ text-align:right; font-weight:var(--fw-bold); white-space:nowrap; } #faq .fee-cap-table tbody tr:last-child > *{border-bottom:0;} /* --- TB + SP --- */ @media (max-width:899.98px){ #faq .fq-q{ padding:var(--sp-5) var(--sp-4); gap:var(--sp-3); } #faq .fq-a-row{ gap:var(--sp-3); padding:var(--sp-5); } #faq .fq-a-icon{width:38px;height:38px;font-size:var(--fs-body);} #faq .fq-col{max-width:100%;} /* 表は列幅を固定し、金額の列だけ折り返さない。文字は1段落とす（C228も900px未満では13.5pxにしていた）。 --fs-body-s のままだと見出し「月額の負担上限」が枠から切れる。 */ #faq .fee-cap-table{table-layout:fixed;} #faq .fq-th, #faq .fq-rowhead, #faq .fq-num{font-size:var(--fs-caption);} #faq .fq-rowhead, #faq .fq-th{ white-space:normal; overflow-wrap:break-word; word-break:normal; padding:var(--sp-4) var(--sp-3); } #faq .fq-num, #faq .fq-th--num{ width:82px; white-space:nowrap; padding:var(--sp-4) var(--sp-3); } } /* --- SP --- */ @media (max-width:599.98px){ #faq .fq-q{padding:var(--sp-4);} #faq .fq-q-icon{width:32px;height:32px;font-size:var(--fs-h4);} #faq .fq-q-toggle{width:30px;height:30px;font-size:var(--fs-body);} #faq .fq-a-row{padding:var(--sp-4);} } /* ============================================================ #numbers — 数字で見る（トークン化済み） ------------------------------------------------------------ ・style="" 0 / 生の色 0 ・ブレークポイント: 基準 / 899.98 / 599.98 ＋ C147 LOCK の 900px（後述。触っていない）【C147 LOCK について】 lp.css 冒頭の「C147 LOCK START: #numbers」ブロックは変更禁止指定なので一切触っていない。あのブロックは max-width:900px で、こちらの SP 段は 899.98px。**900px ちょうどの1pxだけ**ロック側だけが効く状態がC228からそのまま残る。境界値を動かすと見た目が変わるため、あえて揃えていない。ロック側の padding / font-size は !important 付きなので、 SP段の .num-card の padding と .num-big の font-size だけはこちらも !important で上書きする（C228でも同じ理由で !important だった）。【lp.js との結合】 initNumbers() が初期化時に次をインラインで書く。 [data-num-card] : opacity / transform / transition [data-bar-w] : transform(scaleX) / transform-origin / transition 比率トラック : clip-path / transition [data-seg-len] : stroke-dasharray / transition HTMLに書いてあった同じ内容の初期値は削除した。JSが同じ値を入れ直すので通常時の見た目は変わらない。加えて、prefers-reduced-motion では initNumbers() が早期 return するため、C228ではカードが opacity:0 のまま **見えなくなっていた**。初期値をHTMLから外したことでこれが解消する。 ============================================================ */ #numbers{ overflow:hidden; /* データ表示用の青のランプ。C228は --numbers-blue/cyan/muted/soft/pale/mint を生の色で持っていた。--brand-primary からの導出に置き換えてあるので、主色を変えるとグラフの配色ごと追従する。 */ --nm-1: var(--brand-primary); --nm-2: var(--brand-primary-bright); --nm-3: color-mix(in srgb, var(--brand-primary) 50%, white); --nm-4: color-mix(in srgb, var(--brand-primary) 38%, white); --nm-5: color-mix(in srgb, var(--brand-primary) 25%, white); --nm-track: color-mix(in srgb, var(--brand-primary) 15%, white); --nm-label: color-mix(in srgb, var(--brand-primary) 75%, white); --nm-grad: linear-gradient(135deg, var(--nm-2) 0%, var(--nm-1) 100%); } /* 背景の飾り文字。TOKENIZE.md が個別指定のまま可としている箇所 */ #numbers .nm-deco{ position:absolute; top:36px; right:3%; font-family:var(--font-display); font-weight:var(--fw-black); font-size:150px; line-height:var(--lh-flat); letter-spacing:0.02em; color:var(--ink-strong); opacity:0.035; pointer-events:none; white-space:nowrap; } /* 「2026年7月時点」のピル */ #numbers .nm-asof{ display:inline-block; margin-left:var(--sp-3); font-size:var(--fs-label); font-weight:var(--fw-bold); letter-spacing:var(--ls-heading); color:var(--ink-subtle); border:1px solid color-mix(in srgb, var(--ink-subtle) 35%, transparent); border-radius:var(--r-pill); padding:var(--sp-1) var(--sp-3); vertical-align:2px; } /* --- カードのグリッド --- */ #numbers .num-top{ display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--sp-5); margin-top:var(--sp-7); } #numbers .num-bottom{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-5); margin-top:var(--sp-5); } #numbers .num-card{ position:relative; overflow:hidden; background:var(--surface-base); border:1px solid var(--border-hairline); border-radius:var(--r-lg); padding:var(--sp-6); } #numbers .nm-card--wide{grid-column:span 6;} #numbers .nm-card--narrow{grid-column:span 3;} #numbers .nm-card--narrow, #numbers .nm-card--col{display:flex;flex-direction:column;} #numbers .nm-title{ font-size:var(--fs-h5); font-weight:var(--fw-bold); line-height:var(--lh-tight); letter-spacing:var(--ls-heading); color:var(--ink-strong); } #numbers .nm-title--tall{ flex:0 0 auto; min-height:64px; letter-spacing:normal; white-space:nowrap; } /* カード内の飾り文字（BEGINNER / USERS） */ #numbers .nm-card-deco{ position:absolute; bottom:var(--sp-3); right:var(--sp-3); font-family:var(--font-display); font-weight:var(--fw-black); font-size:var(--fs-h1); line-height:var(--lh-flat); color:var(--ink-strong); opacity:0.03; pointer-events:none; } /* --- ドーナツ --- */ #numbers .nm-donut-row{ display:flex; align-items:center; gap:var(--sp-6); margin-top:var(--sp-5); flex-wrap:wrap; } #numbers .nm-donut{position:relative;width:210px;height:210px;flex:0 0 auto;} #numbers .nm-donut-svg{width:100%;height:100%;display:block;} /* 描画の遅延はセグメントごとに 0.2 / 0.25 / 0.3 / 0.35s。JSが上書きする */ #numbers .nm-seg{transition:stroke-dasharray 1.1s cubic-bezier(0.22,0.61,0.36,1) 0.2s;} #numbers .nm-seg:nth-of-type(3){transition-delay:0.25s;} #numbers .nm-seg:nth-of-type(4){transition-delay:0.3s;} #numbers .nm-seg:nth-of-type(5){transition-delay:0.35s;} #numbers .nm-donut-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } #numbers .nm-donut-stack{ transform:translateY(-2px); display:flex; flex-direction:column; align-items:center; } #numbers .nm-donut-label{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:0.12em; padding-left:0.12em; color:var(--nm-label); } #numbers .nm-donut-val{ display:flex; align-items:baseline; margin-top:var(--sp-1); background-image:var(--nm-grad); background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } #numbers .nm-donut-u1{font-size:var(--fs-lead);font-weight:var(--fw-bold);} #numbers .nm-donut-n{ font-family:var(--font-display); font-size:var(--fs-h2); font-weight:var(--fw-bold); line-height:0.95; letter-spacing:var(--ls-tight); } #numbers .nm-donut-u2{font-size:var(--fs-h5);font-weight:var(--fw-bold);} /* --- 凡例 --- */ #numbers .nm-legend{ display:flex; flex-direction:column; gap:var(--sp-4); min-width:200px; flex:1 1 0%; } #numbers .nm-legend-row{display:flex;align-items:center;gap:var(--sp-3);} #numbers .nm-dot{ flex:0 0 auto; width:var(--sp-2); height:var(--sp-2); border-radius:50%; } #numbers .nm-dot--1{background:var(--nm-1);} #numbers .nm-dot--2{background:var(--nm-2);} #numbers .nm-dot--3{background:var(--nm-3);} #numbers .nm-dot--4{background:var(--nm-5);} #numbers .nm-legend-name{ font-size:var(--fs-caption); font-weight:var(--fw-normal); color:var(--ink-base); } #numbers .nm-legend-name--lead{ font-size:var(--fs-body-s); font-weight:var(--fw-bold); color:var(--ink-strong); } #numbers .nm-legend-pct{ margin-left:auto; font-family:var(--font-display); font-size:var(--fs-body-s); font-weight:var(--fw-bold); color:var(--ink-strong); } #numbers .nm-legend-count{ font-size:var(--fs-label); font-weight:var(--fw-normal); color:color-mix(in srgb, var(--ink-strong) 60%, transparent); } /* --- 大きい数字 --- */ #numbers .nm-big-wrap{margin-top:var(--sp-6);} #numbers .num-big{ display:flex; align-items:baseline; font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-display); line-height:0.92; letter-spacing:var(--ls-tight); background-image:var(--nm-grad); background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } #numbers .nm-big-unit{font-size:0.4em;font-weight:var(--fw-bold);letter-spacing:normal;} #numbers .nm-big-unit--jp{font-family:var(--font-body);margin-left:1px;} /* --- 年代構成 --- */ #numbers .nm-agelist{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-5);} #numbers .nm-agerow{ display:grid; grid-template-columns:64px minmax(0,1fr) 46px; align-items:center; gap:var(--sp-3); } #numbers .nm-agelabel{ font-size:var(--fs-caption); font-weight:var(--fw-bold); color:var(--ink-base); } #numbers .nm-track{ display:block; height:12px; border-radius:var(--r-pill); background:var(--nm-track); overflow:hidden; } #numbers .nm-bar{display:block;height:100%;border-radius:var(--r-pill);} #numbers .nm-bar--soft{background:var(--nm-4);} #numbers .nm-bar--brand{background:var(--nm-1);} #numbers .nm-bar--w50{width:50%;} #numbers .nm-bar--w100{width:100%;} #numbers .nm-agecount{ font-size:var(--fs-caption); font-weight:var(--fw-normal); color:color-mix(in srgb, var(--ink-strong) 60%, transparent); text-align:right; } /* --- 男女比 / 通所・在宅 --- */ #numbers .nm-ratio{margin-top:auto;padding-top:var(--sp-5);} #numbers .nm-ratio-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-3); } #numbers .nm-ratio-col{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);} #numbers .nm-ratio-col--end{align-items:flex-end;} #numbers .nm-ratio-label{ font-size:var(--fs-body-s); font-weight:var(--fw-bold); letter-spacing:var(--ls-heading); color:var(--nm-3); } #numbers .nm-ratio-label--brand{color:var(--brand-primary);} #numbers .nm-ratio-val{ display:flex; align-items:baseline; font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-h1); line-height:var(--lh-flat); letter-spacing:var(--ls-tight); color:var(--nm-3); } #numbers .nm-ratio-val--brand{color:var(--nm-1);} #numbers .nm-ratio-unit{font-size:var(--fs-h4);font-weight:var(--fw-bold);letter-spacing:normal;} #numbers .nm-ratio-track{ display:flex; height:19px; border-radius:var(--r-pill); overflow:hidden; background:var(--nm-track); margin-top:var(--sp-5); } #numbers .nm-seg-bar{display:block;height:100%;} #numbers .nm-seg-bar--soft{background:var(--nm-4);} #numbers .nm-seg-bar--brand{background:var(--nm-1);} #numbers .nm-seg-bar--w20{width:20%;} #numbers .nm-seg-bar--w40{width:40%;} #numbers .nm-seg-bar--w60{width:60%;} #numbers .nm-seg-bar--w80{width:80%;} #numbers .nm-ratio-foot{ display:flex; justify-content:space-between; margin-top:var(--sp-3); font-size:var(--fs-caption); font-weight:var(--fw-normal); color:color-mix(in srgb, var(--ink-strong) 62%, transparent); } #numbers .nm-note{ margin:var(--sp-6) 0 0; text-align:center; font-size:var(--fs-caption); font-weight:var(--fw-normal); line-height:var(--lh-snug); letter-spacing:var(--ls-normal); color:color-mix(in srgb, var(--ink-strong) 66%, transparent); } /* --- TB + SP --- */ @media (max-width:899.98px){ #numbers .num-top{margin-top:var(--sp-6);gap:var(--sp-4);} #numbers .num-bottom{margin-top:var(--sp-4);gap:var(--sp-4);} #numbers .nm-deco{font-size:86px;top:var(--sp-5);} /* C147 LOCK が同じプロパティを !important で持っているため、ここも !important でないと C228 の値に戻せない。ロックを触らずに見た目を保つための2つ。 */ #numbers .num-card{padding:var(--sp-5) 22px !important;} #numbers .num-big{font-size:58px !important;} /* C201-b2 / C201-e: 主要な数値と図だけ中央寄せ（見出しと注釈は左のまま） */ #numbers .nm-donut-row{justify-content:center;} #numbers .num-big{justify-content:center;} #numbers .nm-agelist{max-width:330px;margin-inline:auto;} #numbers .nm-ratio-head, #numbers .nm-ratio-foot{justify-content:center;gap:44px;} } @media (max-width:899.98px){ #numbers .lp-h2{margin-top:var(--sp-4);} #numbers .lp-lead{margin-top:var(--sp-4);} } /* ドーナツの色。C228は stroke="var(--numbers-blue)" のようにプレゼンテーション属性で色を指定していた。属性はHTML側に生の参照を残すので、クラス＋CSSへ移した（CSSの stroke はプレゼンテーション属性より優先される）。 */ #numbers .nm-seg-track{stroke:color-mix(in srgb, var(--nm-3) 16%, transparent);} #numbers .nm-seg--1{stroke:var(--nm-1);} #numbers .nm-seg--2{stroke:var(--nm-2);} #numbers .nm-seg--3{stroke:var(--nm-3);} #numbers .nm-seg--4{stroke:var(--nm-5);} /* リード文と「2026年7月時点」のピルを1行に収める。 .lp-lead の max-width:34em だとピルが2行目へ落ちる。 */ #numbers .lp-lead{max-width:none;} /* リビールの初期状態。 C228はこれをHTMLのインラインstyleで持っていたが、 lp.js の initNumbers() は prefers-reduced-motion のとき早期 return するため、 **カードが opacity:0 のまま見えなくなっていた**（実測で確認）。 CSSへ移し、reduced-motion では初期状態そのものを解除する。通常時は lp.js が同じ値をインラインで入れ直すので挙動は変わらない。 */ #numbers .num-card{opacity:0;transform:translateY(24px);} #numbers .nm-bar{transform:scaleX(0);transform-origin:left center;} #numbers .nm-ratio-track{clip-path:inset(0 100% 0 0);} @media (prefers-reduced-motion: reduce){ #numbers .num-card{opacity:1;transform:none;} #numbers .nm-bar{transform:none;} #numbers .nm-ratio-track{clip-path:none;} } /* ============================================================ #reasons — 選ばれる4つの理由（トークン化済み） ------------------------------------------------------------ ・style="" 0 / 生の色 0 / 生の font-size 0 ・ブレークポイント: 基準 / 899.98 / 599.98 C228は 999.98 / 899.98 / 599.98 の3段。999.98 を900へ吸収した（TOKENIZE.md の「1023/1024/1199.98 などは900px側へ吸収を検討」に従う）。 900〜999pxが縦積み → 2カラムに変わる。・行の入れ替え（.rs-imgleft）と grid-template-areas は C184/C199 の読み順対応。構造なのでそのまま維持している。 ============================================================ */ /* 見出し下の金色の罫。C228は #F3D33A を3箇所（FV / #reasons / #work）で同じ装飾に使っていた。定義は1つにして共有する。 design-tokens.css に --brand-accent-gold として色を追加済み。 */ .lp-rule{ display:block; width:260px; height:3px; margin-top:var(--sp-6); background:linear-gradient(90deg, transparent, var(--brand-accent-gold), transparent); } /* --- 1つの理由 --- */ #reasons .rs-row{ margin-top:var(--sp-10); display:grid; grid-template-columns:1.05fr 1fr; gap:var(--sp-9); align-items:center; grid-template-areas: "reason-head reason-image" "reason-body reason-image"; grid-template-rows:auto auto; row-gap:0; align-items:stretch; align-content:center; } #reasons .rs-row.rs-imgleft{ grid-template-columns:1fr 1.05fr; grid-template-areas: "reason-image reason-head" "reason-image reason-body"; } #reasons .rs-text{grid-area:reason-head;align-self:end;min-width:0;} #reasons .rs-img{grid-area:reason-image;align-self:stretch;position:relative;min-height:440px;} #reasons .rs-body{grid-area:reason-body;align-self:start;min-width:0;} #reasons .rs-numrow{display:flex;align-items:baseline;gap:var(--sp-5);} #reasons .rs-num{ font-family:var(--font-display); font-weight:var(--fw-black); font-size:var(--fs-display); line-height:var(--lh-flat); /* C228は濃淡2種類のグラデーションを交互に使っていた。ブランドの1本へ統一。 */ background:var(--brand-gradient) text; -webkit-text-fill-color:transparent; color:var(--brand-primary); } #reasons .rs-h3{ margin:var(--sp-5) 0 0; font-size:var(--fs-h3); font-weight:var(--fw-black); line-height:var(--lh-snug); letter-spacing:var(--ls-heading); color:var(--ink-strong); } #reasons .rs-img-fill{position:absolute;inset:0;} #reasons .rs-img-fill--clip{overflow:hidden;border-radius:var(--r-md);} #reasons .rs-photo{ width:100%; height:100%; object-fit:cover; object-position:center center; border-radius:var(--r-md); display:block; } #reasons .rs-photo--fill{position:absolute;inset:0;border-radius:0;} #reasons .rs-photo--p28{object-position:center 28%;} #reasons .rs-photo--p35{object-position:center 35%;} #reasons .rs-photo--p46{object-position:50% 46%;} #reasons .rs-p{ margin:var(--sp-5) 0 0; font-size:var(--fs-body); font-weight:var(--fw-normal); line-height:var(--lh-relaxed); letter-spacing:var(--ls-heading); color:var(--ink-muted); } #reasons .rs-tags{ margin-top:var(--sp-5); display:flex; flex-wrap:wrap; gap:var(--sp-3); } #reasons .rs-tag{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:var(--ls-heading); color:var(--brand-primary); background:var(--surface-raised); border-radius:var(--r-pill); padding:var(--sp-2) var(--sp-4); } #reasons .rs-note{ margin:var(--sp-5) 0 0; font-size:var(--fs-caption); font-weight:var(--fw-normal); letter-spacing:var(--ls-heading); line-height:var(--lh-normal); color:var(--ink-subtle); } /* --- TB + SP : 見出し → 画像 → 本文の縦積み --- C199 stage2 と C220 の調整が別ブロックに分かれていたので、後勝ちで実際に効いていた値（C220側）に合わせて1つにまとめた。 */ @media (max-width:899.98px){ #reasons .lp-lead{max-width:19em;margin-inline:auto;text-wrap:pretty;} #reasons .lp-lead br{display:none;} #reasons .rs-row, #reasons .rs-row.rs-imgleft{ width:100%; max-width:760px; margin-inline:auto; margin-top:var(--sp-7); grid-template-columns:minmax(0,1fr); grid-template-areas: "reason-head" "reason-image" "reason-body"; grid-template-rows:auto auto auto; row-gap:0; gap:var(--sp-4); } /* 番号は --fs-display がSPで48pxへ切り替わるので個別指定は要らない */ #reasons .rs-h3{margin-top:var(--sp-3);} #reasons .rs-img{ width:min(88%,680px); min-height:0; aspect-ratio:8/5; margin:var(--sp-5) auto 0; } #reasons .rs-body{margin-top:var(--sp-5);} #reasons .rs-body > p:first-child{margin-top:0;} #reasons .rs-p{margin-top:var(--sp-4);} #reasons .rs-tags{margin-top:var(--sp-3);} /* リビールの間隔（C199）。見出し → 画像 → 本文の順に出す */ #reasons .rs-text{--sr-delay:0ms;} #reasons .rs-img{--sr-delay:150ms;} #reasons .rs-body{--sr-delay:300ms;} } /* --- SP --- */ @media (max-width:599.98px){ #reasons .rs-row{margin-top:var(--sp-7);} #reasons .rs-row:first-of-type{margin-top:var(--sp-6);} #reasons .rs-h3{ margin-top:var(--sp-3); letter-spacing:0.025em; text-wrap:normal; } /* 見出しは意図した位置で折る。単語の途中では折らない */ #reasons .rs-h3 br{display:none;} #reasons .rs-h3 .rs-h3-line{display:block;white-space:nowrap;} #reasons .rs-img{ width:92%; max-width:440px; aspect-ratio:4/3; max-height:260px; margin-top:var(--sp-5); } #reasons .rs-body{margin-top:var(--sp-5);} #reasons .rs-body > p:first-child{letter-spacing:0.025em;} #reasons .rs-tags{margin-top:var(--sp-4);} } /* ============================================================ #work — 仕事内容（トークン化済み）・style="" 0 / 生の色 0 / 生の font-size 0 ・ブレークポイント: 基準 / 899.98（C228と同じ1段） ============================================================ */ #work{overflow:hidden;} #work .wk-grid{ margin-top:var(--sp-9); display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-6) var(--sp-6); } #work .wk-card{ background:var(--surface-base); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column; } #work .wk-card-img{position:relative;height:210px;} /* 写真の見せ高さ。構造値 */ #work .wk-img-fill{position:absolute;inset:0;} #work .wk-photo{ width:100%; height:100%; object-fit:cover; object-position:center center; display:block; } #work .wk-photo--p35{object-position:center 35%;} #work .wk-photo--p40{object-position:center 40%;} #work .wk-card-body{ padding:var(--sp-6) var(--sp-6) var(--sp-6); display:flex; flex-direction:column; flex:1 1 0%; } #work .wk-titlerow{display:flex;align-items:baseline;gap:var(--sp-3);} #work .wk-num{ font-family:var(--font-display); font-weight:var(--fw-black); font-size:var(--fs-body-s); letter-spacing:var(--ls-heading); /* C228の #4A79AD。主色の白混ぜで作る */ color:color-mix(in srgb, var(--brand-primary) 65%, white); } #work .wk-h3{ margin:0; font-size:var(--fs-h5); font-weight:var(--fw-black); letter-spacing:var(--ls-heading); color:var(--ink-strong); } #work .wk-p{ margin:var(--sp-3) 0 0; font-size:var(--fs-body); font-weight:var(--fw-normal); line-height:var(--lh-normal); letter-spacing:var(--ls-normal); color:var(--ink-muted); flex:1 1 0%; } /* --- 使うツールの並び --- */ #work .wk-tools{ margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--border-hairline); display:flex; align-items:center; gap:var(--sp-3); height:22px; white-space:nowrap; } #work .wk-tool{ display:inline-flex; align-items:center; gap:var(--sp-2); min-width:0; height:24px; font-size:var(--fs-label); font-weight:var(--fw-bold); letter-spacing:var(--ls-normal); line-height:1.05; color:var(--ink-subtle); } #work .wk-tool-icon{ width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 24px; } #work .wk-tool-img{width:24px;height:24px;object-fit:contain;display:block;} #work .wk-tool-img--22{width:22px;height:22px;} #work .wk-tool-img--21{width:20.8px;height:20.8px;} #work .wk-tool-label{display:inline-block;line-height:1.05;} /* --- TB + SP --- */ @media (max-width:899.98px){ #work .wk-grid{ grid-template-columns:minmax(0,1fr); margin-top:var(--sp-7); gap:var(--sp-5); } #work .wk-p{line-height:var(--lh-normal);} } /* ============================================================ lp.js が色を書いていた箇所の受け皿 ------------------------------------------------------------ lp.js の renderVoice() / ufTick() / renderFaq() は、状態に応じて色コードを直接インラインで書き込んでいた。そのため design-tokens.css の --brand-primary を差し替えても追従しなかった。 JS側は状態クラスの付け外しだけにして、色はここが持つ。（#faq の .is-open は #faq のブロック内に置いてある） ============================================================ */ /* --- #voice のページャードット（lp.js は is-active を付け外しするだけ） --- */ #voice [data-voice-dots] .v-dot{ display:block; width:22px; height:4px; border-radius:var(--r-pill); background:color-mix(in srgb, var(--brand-primary) 25%, white); transition:width var(--dur-base) var(--ease), background var(--dur-base) var(--ease); } #voice [data-voice-dots] .v-dot.is-active{width:46px;} /* 3枚それぞれのアクセント。C228の #3F6FBF / #6F9A52 / #C98243 に対応する */ #voice [data-voice-dots] .v-dot:nth-child(1).is-active{background:var(--brand-primary);} #voice [data-voice-dots] .v-dot:nth-child(2).is-active{background:var(--brand-accent-cool);} #voice [data-voice-dots] .v-dot:nth-child(3).is-active{background:var(--brand-accent-warm);} /* --- #use-flow の現在地表示（lp.js は is-current / is-past を付け外しするだけ） --- */ #use-flow{ /* 未到達 → 通過済み → 現在の3段。現在だけが主色そのもの。 */ --uf-step-idle: var(--ink-subtle); --uf-step-past: color-mix(in srgb, var(--brand-primary) 55%, var(--ink-subtle)); --uf-step-current: var(--brand-primary); } #use-flow [data-uf-num]{ color:var(--uf-step-idle); transition:color var(--dur-base) var(--ease); } #use-flow .is-past [data-uf-num]{color:var(--uf-step-past);} #use-flow .is-current [data-uf-num]{color:var(--uf-step-current);} #use-flow [data-uf-title]{ color:var(--ink-strong); transition:color var(--dur-base) var(--ease); } #use-flow .is-current [data-uf-title]{ color:color-mix(in srgb, var(--ink-strong) 85%, black); } #use-flow [data-uf-imgbox]{ border:1px solid var(--border-line); box-shadow:none; transition:border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } #use-flow .is-current [data-uf-imgbox]{ border-color:color-mix(in srgb, var(--brand-primary) 35%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-primary) 7%, transparent); } /* ============================================================ #about — 紹介＋こんな思い（トークン化済み） ------------------------------------------------------------ ・style="" 0 / 生の色 0 ・ブレークポイント: 基準（1280px～） / 1279.98 / 599.98 【畳み方】 C228は 1279.98 / 1199.98 / 1023.98 / 899.98 / 599.98 ＋ (min-width:600px) and (max-width:1199.98px) の6ブロックが同じプロパティを後勝ちで上書きし合っていた。各幅での**実効値**をブラウザに計算させて確定させたところ、実際には次の4段しか存在しなかった。～599.98 : 縦積み。「こんな思い」は横長カード＋番号 600～1199 : リード1カラム＋写真2枚を横並びグリッド。4つは2列 1200～1279 : リード2カラム＋写真の重ね。4つは4列（やや詰め） 1280～ : 同上（余白が広い） 1200と1280の差は余白と装飾サイズだけなので、 TOKENIZE.md が WIDE として認めている 1279.98/1280 に寄せて「重ねの構図は1280pxから」に統一した。1200〜1279pxだけ見え方が変わる。 ============================================================ */ #about{overflow:hidden;} #about .nro-inner{ max-width:var(--w-content); margin-inline:auto; padding-inline:var(--w-gutter); } /* --- 導入の一行 --- */ #about .nro-lead-hail{ margin:-18px 0 var(--sp-7); /* -18px は見出しへの食い込み。構造値 */ font-size:var(--fs-h4); font-weight:var(--fw-bold); line-height:var(--lh-snug); letter-spacing:var(--ls-normal); color:var(--ink-base); text-wrap:pretty; } /* --- リード（本文＋写真2枚） --- */ #about .nro-lead{ display:grid; grid-template-columns:51fr 49fr; gap:var(--sp-8); align-items:start; } #about .nro-lead-text{ min-width:0; margin:-18px 0 var(--sp-4); } #about .nro-h2{ margin:0; font-size:var(--fs-h2); font-weight:var(--fw-black); line-height:var(--lh-tight); color:var(--ink-strong); text-wrap:pretty; } #about .nro-h2-line{display:block;width:fit-content;max-width:100%;} #about .nro-lead-body{ display:flex; flex-direction:column; gap:var(--sp-5); margin-top:var(--sp-7); width:100%; max-width:700px; } #about .nro-p{ margin:0; font-size:var(--fs-lead); font-weight:var(--fw-normal); line-height:var(--lh-normal); letter-spacing:var(--ls-normal); color:var(--ink-muted); text-wrap:pretty; } #about .nro-em{color:var(--brand-primary);font-weight:var(--fw-bold);} #about .nro-lead-photos{ position:relative; margin-top:-18px; padding-bottom:var(--sp-9); } #about .nro-a-ph1{ position:relative; width:100%; max-width:580px; margin-left:auto; } /* 小さい方は大きい写真へ重ねる（1280px以上のみ） */ #about .nro-a-ph2{ position:absolute; left:-40px; bottom:-16px; width:236px; max-width:42%; } #about .nro-photo{ display:block; width:100%; object-fit:cover; border-radius:var(--r-md); box-shadow:var(--shadow-lift); } #about .nro-photo--main{aspect-ratio:5 / 4;object-position:50% 64%;} #about .nro-photo--sub{aspect-ratio:4 / 3;object-position:50% 42%;} /* 写真の隅の小さなラベル（WORK / SUPPORT） */ #about .nro-tag{ position:absolute; padding:var(--sp-1) var(--sp-3); border-radius:var(--r-sm); color:var(--ink-invert); font-family:var(--font-display); font-size:var(--fs-fine); font-weight:var(--fw-bold); letter-spacing:var(--ls-label); line-height:var(--lh-tight); } /* WORK は大きい写真の右下（オレンジ）、SUPPORT は小さい写真の左上（グリーン）。 C228のアクセントの使い分け（オレンジ=仕事、グリーン=支援）に対応する。 */ #about .nro-tag--work{ right:12px; bottom:12px; background:color-mix(in srgb, var(--brand-accent-warm) 92%, transparent); } #about .nro-tag--support{ left:10px; top:10px; background:color-mix(in srgb, var(--brand-accent-cool) 88%, transparent); } /* --- こんな思いを持つ方の、次の一歩 --- */ #about .nro-hopes{ max-width:var(--w-content); margin:var(--sp-10) auto 0; padding-inline:var(--w-gutter); } #about .nro-hopes-h2{ margin:0; text-align:center; font-size:var(--fs-h2); font-weight:var(--fw-black); line-height:var(--lh-snug); letter-spacing:var(--ls-normal); color:var(--ink-strong); text-wrap:pretty; } #about .nro-hopes4{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--sp-4); margin-top:var(--sp-8); align-items:stretch; } #about .nro-item{ position:relative; display:flex; flex-direction:column; padding-top:118px; /* イラストが上へはみ出すぶんの逃げ。構造値 */ } #about .nro-item-bg{ position:relative; z-index:0; flex:1 1 0%; background:var(--surface-sunken); border-radius:var(--r-sm); padding:162px var(--sp-2) var(--sp-6); /* 上162px = イラストの居場所 */ } #about .nro-item-bg p{ position:relative; z-index:2; margin:0; text-align:center; font-size:var(--fs-lead); font-weight:var(--fw-bold); line-height:var(--lh-normal); color:var(--ink-base); text-wrap:pretty; } #about .nro-item-img{ position:absolute; z-index:1; left:50%; top:-10px; transform:translateX(-50%); height:257px; /* イラストの見せ高さ。3枚だけ個別に上へずらす */ width:auto; } #about .nro-item-img--t25{top:-25px;height:272px;} #about .nro-item-img--t30{top:-30px;height:277px;} /* ============================================================ ～1279.98px : リードを1カラムにし、写真2枚を横並びグリッドにする ============================================================ */ @media (max-width:1279.98px){ #about .nro-lead-hail{margin:0 0 var(--sp-6);} #about .nro-lead{ grid-template-columns:minmax(0,1fr); gap:var(--sp-7); } #about .nro-lead-text{ max-width:780px; margin:0; } #about .nro-lead-body{ margin-top:var(--sp-6); max-width:none; } #about .nro-lead-photos{ display:grid; grid-template-columns:minmax(0,1.65fr) minmax(190px,1fr); gap:var(--sp-5); align-items:end; width:100%; max-width:760px; margin:0 auto; padding-bottom:0; } #about .nro-a-ph1, #about .nro-a-ph2{ position:relative; inset:auto; width:100%; max-width:none; margin:0; } #about .nro-photo{height:auto;} #about .nro-photo--main{aspect-ratio:4 / 3;} #about .nro-hopes{ max-width:1080px; margin-top:var(--sp-9); padding-inline:var(--sp-6); } #about .nro-hopes4{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:1fr; gap:var(--sp-5); margin-top:var(--sp-7); } #about .nro-item{ min-width:0; padding-top:clamp(76px, 8vw, 96px); } #about .nro-item-bg{ display:flex; align-items:flex-end; justify-content:center; min-height:0; padding:clamp(154px, 16vw, 180px) var(--sp-6) var(--sp-6); } #about .nro-item-bg p{ width:100%; max-width:22em; margin-inline:auto; font-size:var(--fs-h5); /* 900px未満で18pxへ切り替わる。C228の実効値と一致 */ line-height:var(--lh-normal); } #about .nro-item-bg p br{display:none;} #about .nro-item-img, #about .nro-item-img--t25, #about .nro-item-img--t30{ top:-8px; height:clamp(210px, 28vw, 260px); max-width:92%; object-fit:contain; } } /* ============================================================ ～599.98px : 「こんな思い」は横長カード（イラスト左＋番号つき） ============================================================ */ @media (max-width:599.98px){ #about .nro-inner{padding-inline:var(--w-gutter);} #about .nro-lead-hail{ max-width:28em; margin:0 0 var(--sp-5); font-size:var(--fs-body-s); line-height:var(--lh-normal); text-wrap:pretty; } #about .nro-lead{gap:var(--sp-6);} #about .nro-lead-body{ gap:var(--sp-5); margin-top:var(--sp-6); } #about .nro-p{font-size:var(--fs-body);} /* C220: SPでは「見出し → 本文2つ → 大きい写真 → 本文3つめ → 小さい写真」の順に読ませる。DOMの順は変えず、display:contents で階層を潰して order で並べる。 */ #about .nro-lead{ display:flex; flex-direction:column; gap:0; } #about .nro-lead-text, #about .nro-lead-body, #about .nro-lead-photos{display:contents;} #about .nro-h2{order:1;margin:0 0 var(--sp-5);} #about .nro-p{margin:0 0 var(--sp-5);} #about .nro-lead-body > p:nth-child(1){order:2;} #about .nro-lead-body > p:nth-child(2){order:3;margin-bottom:0;} #about .nro-a-ph1{order:4;width:100%;margin:var(--sp-5) 0 0;} #about .nro-lead-body > p:nth-child(3){order:5;margin:var(--sp-5) 0 0;} #about .nro-a-ph2{order:6;width:72%;margin:var(--sp-4) 0 0 auto;} #about .nro-photo--main{aspect-ratio:16 / 10;} #about .nro-photo--sub{aspect-ratio:4 / 3;} #about .nro-hopes{ margin-top:var(--sp-9); padding-inline:var(--w-gutter); } #about .nro-hopes-h2{ line-height:var(--lh-snug); letter-spacing:normal; text-wrap:balance; } #about .nro-hopes-h2 br{display:none;} #about .nro-hopes4{ counter-reset:nro-hope; grid-template-columns:minmax(0,1fr); grid-auto-rows:1fr; gap:var(--sp-4); margin-top:var(--sp-6); } /* SPだけカードの形が変わる。イラストを左に置いた横長 */ #about .nro-item{ display:grid; grid-template-columns:minmax(104px,38%) minmax(0,62%); grid-template-rows:1fr; gap:var(--sp-2); min-height:148px; overflow:hidden; padding:var(--sp-4); background:var(--surface-sunken); border-radius:var(--r-sm); } #about .nro-item-bg{ grid-column:2; grid-row:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; min-height:0; padding:var(--sp-1) 0 var(--sp-1) var(--sp-1); background:transparent; } /* 01〜04 の連番。SPのカードにだけ出る */ #about .nro-item-bg::before{ counter-increment:nro-hope; content:"0" counter(nro-hope); display:block; margin-bottom:var(--sp-2); color:var(--brand-primary); font-family:var(--font-display); font-size:var(--fs-lead); font-weight:var(--fw-black); line-height:var(--lh-flat); letter-spacing:var(--ls-heading); } #about .nro-item-bg p{ width:100%; text-align:left; font-size:var(--fs-h5); font-weight:var(--fw-bold); line-height:var(--lh-snug); letter-spacing:normal; text-wrap:pretty; } #about .nro-item-bg p br{display:none;} #about .nro-item-img, #about .nro-item-img--t25, #about .nro-item-img--t30{ position:relative; inset:auto; grid-column:1; grid-row:1; align-self:center; justify-self:center; width:100%; max-width:128px; height:132px; transform:none; object-fit:contain; } } /* ============================================================ #use-flow — ご利用までの流れ（トークン化済み） ------------------------------------------------------------ ・style="" 0 / 生の色 0 / 生の font-size 0 ・ブレークポイント: 基準 / 899.98 / 599.98 C228は 899.98 / 430 の2段＋ 599.98 の追加ブロック。430 を 599.98 へ寄せた。【lp.js との結合】進行ライン（.uf-line）の top / height と、進んだぶんの scaleY は ufTick() が実測から計算してインラインで書く。ここでは位置・太さ・色だけを持つ。現在地の色分けは「lp.js が色を書いていた箇所の受け皿」ブロックにある。 ============================================================ */ #use-flow{overflow:hidden;} #use-flow .uf-body{margin-top:var(--sp-2);} /* 見出し下の短い罫 */ #use-flow .uf-rule{ display:block; width:44px; height:3px; border-radius:var(--r-pill); background:var(--brand-primary); margin-top:var(--sp-5); } /* --- 縦の進行ライン --- */ #use-flow .uf-line{ position:absolute; border-radius:var(--r-pill); } #use-flow .uf-line--base{ left:50px; width:1px; background:color-mix(in srgb, var(--brand-primary) 22%, var(--ink-subtle)); } #use-flow .uf-line--prog{ left:49.5px; width:2px; background:var(--brand-primary); transform-origin:center top; transform:scaleY(0); } /* --- 1ステップ --- */ #use-flow .uf-row{ position:relative; z-index:1; display:grid; grid-template-columns:100px 240px minmax(0,1fr); /* 番号 / 画像 / 本文。構造値 */ column-gap:var(--sp-7); align-items:start; padding-block:var(--sp-7); } /* DOMの並びは番号 → 本文 → 画像。列は番号 → 画像 → 本文なので明示的に割り当てる。（C183 の指定。読み上げ順を変えずに見た目の順を作るためのもの） */ #use-flow .uf-step{grid-column:1;grid-row:1;} #use-flow .uf-img{grid-column:2;grid-row:1;} #use-flow .uf-text{grid-column:3;grid-row:1;} #use-flow .uf-divider{ position:absolute; left:140px; right:0; bottom:0; height:1px; background:var(--border-line); } #use-flow .uf-step{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-1); background:var(--surface-raised); /* ラインを跨ぐので地の色で塗りつぶす */ padding-block:var(--sp-2); transform:translateY(-10px); } #use-flow .uf-steplabel{ font-family:var(--font-display); font-size:var(--fs-fine); font-weight:var(--fw-bold); letter-spacing:var(--ls-label); color:var(--ink-subtle); } #use-flow .uf-num{ font-family:var(--font-display); font-size:var(--fs-h2); font-weight:var(--fw-black); line-height:var(--lh-flat); } #use-flow .uf-text{padding-top:2px;} #use-flow .uf-text h3{ margin:0; font-size:var(--fs-h5); font-weight:var(--fw-bold); letter-spacing:var(--ls-heading); line-height:var(--lh-snug); } #use-flow .uf-p{ margin:var(--sp-3) 0 0; font-size:var(--fs-body); font-weight:var(--fw-normal); line-height:var(--lh-relaxed); letter-spacing:var(--ls-normal); color:var(--ink-muted); } /* 補足の枠 */ #use-flow .uf-note{ margin-top:var(--sp-4); border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-5); background:color-mix(in srgb, var(--brand-primary) 6%, transparent); display:flex; flex-direction:column; gap:var(--sp-2); } #use-flow .uf-note-p{ margin:0; font-size:var(--fs-caption); font-weight:var(--fw-normal); line-height:var(--lh-normal); letter-spacing:var(--ls-normal); color:var(--ink-muted); } /* --- 画像 --- */ #use-flow .uf-img{ position:relative; aspect-ratio:4 / 3; border-radius:var(--r-md); overflow:hidden; background:var(--surface-sunken); } #use-flow .uf-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; } #use-flow .uf-photo--p30{object-position:center 30%;} #use-flow .uf-photo--p40{object-position:center 40%;} #use-flow .uf-photo--p45{object-position:center 45%;} #use-flow .uf-photo--p55{object-position:center 55%;} /* --- STEP 01 のタグ行 --- */ #use-flow .uf-tagrow{display:flex;align-items:center;gap:var(--sp-3);} #use-flow .uf-dash{ display:block; width:12px; height:2px; background:var(--brand-primary); flex:0 0 auto; } #use-flow .uf-tagrow-label{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:var(--ls-heading); color:var(--ink-base); } #use-flow .uf-tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:2px;} #use-flow .uf-tag{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:var(--ls-normal); color:var(--ink-base); background:var(--surface-base); border:1px solid var(--border-line); border-radius:var(--r-pill); padding:var(--sp-1) var(--sp-3); } #use-flow .uf-tagnote{ margin:var(--sp-1) 0 0; font-size:var(--fs-label); font-weight:var(--fw-normal); letter-spacing:var(--ls-normal); color:var(--ink-subtle); } /* --- TB + SP : 1カラムに積み、番号は横並びに --- C228は 899.98 / 430 の2ブロック＋別の 899.98 ブロックに分かれていて、後勝ちで効いていたのは後者（.uf-row の余白44px、画像 16/9、番号38px…）。実効値に合わせて1ブロックへまとめたので、430pxの段は不要になった。なおC228はこのセクションだけ SP のほうが文字が大きい（番号 36→38px、見出し 21→24〜28px）。トークンのSP段は逆に小さくなるため、 SP側は1段上のトークンを明示的に指定して近づけている。 */ @media (max-width:899.98px){ #use-flow .uf-body{margin-top:var(--sp-7);} #use-flow .uf-line{display:none;} /* 縦ラインはSPでは出さない */ #use-flow .uf-row{ grid-template-columns:minmax(0,1fr); column-gap:0; row-gap:var(--sp-3); padding:0 0 var(--sp-7); } #use-flow .uf-row:last-of-type{padding-bottom:var(--sp-1);} #use-flow .uf-step, #use-flow .uf-img, #use-flow .uf-text{grid-column:auto;grid-row:auto;} /* 番号は左に短い縦棒を添えた横並びにする */ #use-flow .uf-step{ position:relative; flex-direction:row; align-items:baseline; gap:var(--sp-3); background:none; padding:0 0 0 var(--sp-3); transform:none; } #use-flow .uf-step::before{ content:""; position:absolute; left:0; top:2px; bottom:4px; width:3px; border-radius:var(--r-pill); background:var(--brand-primary); } #use-flow .uf-steplabel{font-size:var(--fs-label);} #use-flow .uf-num{font-size:var(--fs-h1);} #use-flow .uf-divider{left:0;} #use-flow .uf-text{padding-top:0;} #use-flow .uf-text h3{ margin-top:var(--sp-3); font-size:var(--fs-h3); line-height:var(--lh-tight); } #use-flow .uf-p{line-height:var(--lh-normal);} #use-flow .uf-img{ margin-top:var(--sp-4); width:100%; aspect-ratio:16 / 9; } } /* ============================================================ #final-contact — 最終CTA（トークン化済み）・style="" 0 / 生の色 0 / 生の font-size 0 ・ブレークポイント: 基準（1280px～） / 1279.98 / 899.98 / 599.98 C228は (900-1279.98) / 899.98 / (600-899.98) / 430 の4つ。 430 を 599.98 へ寄せ、min-width の挟み撃ちを max-width の重ねへ直した。 ============================================================ */ #final-contact{ overflow:hidden; background-color:color-mix(in srgb, var(--brand-primary) 30%, var(--ink-strong)); } /* 背景写真とその上の青いベール */ #final-contact .fc-bg{ position:absolute; inset:0; background-image:url("../images/optimized-c215/gallery-workspace-main.webp"); background-repeat:no-repeat; background-size:cover; background-position:50% 46%; } #final-contact .fc-veil{ position:absolute; inset:0; display:block; background:linear-gradient( color-mix(in srgb, var(--brand-primary) 44%, transparent) 0%, color-mix(in srgb, var(--brand-primary) 53%, transparent) 100%); } #final-contact .fc-head{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; } #final-contact .fc-eyebrow{ font-family:var(--font-display); font-size:var(--fs-body-s); font-weight:var(--fw-black); letter-spacing:var(--ls-label); color:var(--ink-invert); text-shadow:0 1px 2px color-mix(in srgb, var(--ink-strong) 22%, transparent); } #final-contact .fc-title{ margin:var(--sp-2) 0 0; font-size:var(--fs-h2); font-weight:var(--fw-black); line-height:var(--lh-snug); letter-spacing:var(--ls-heading); color:var(--ink-invert); text-shadow:0 1px 3px color-mix(in srgb, var(--ink-strong) 26%, transparent); } /* 白いボックス */ #final-contact .fc-box{ position:relative; z-index:2; box-sizing:border-box; width:100%; max-width:980px; margin:var(--sp-5) auto 0; padding:var(--sp-6) var(--sp-7) var(--sp-6); background:var(--surface-base); border-radius:var(--r-sm); box-shadow:var(--shadow-lift); display:flex; flex-direction:column; align-items:center; text-align:center; } #final-contact .fc-tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-3); } /* タグのオレンジは lp.css 上部の --cta-orange 系（PCサイドCTAと共通の演出）。アクセントのウォームから作り直して、主色と一緒に差し替えられるようにする。 */ #final-contact .fc-tag{ box-sizing:border-box; display:inline-flex; align-items:center; height:31px; padding:0 var(--sp-4); border-radius:var(--r-pill); background:linear-gradient(180deg, color-mix(in srgb, var(--brand-accent-warm) 78%, white) 0%, var(--brand-accent-warm) 100%); color:var(--ink-invert); font-size:var(--fs-body-s); font-weight:var(--fw-bold); letter-spacing:var(--ls-normal); white-space:nowrap; } #final-contact .fc-lead{ margin:var(--sp-3) 0 0; max-width:760px; font-size:var(--fs-lead); font-weight:var(--fw-normal); line-height:var(--lh-normal); letter-spacing:var(--ls-normal); color:color-mix(in srgb, var(--ink-strong) 78%, transparent); text-wrap:pretty; line-break:strict; word-break:normal; overflow-wrap:break-word; } #final-contact .fc-btns{ display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:var(--sp-4); margin-top:var(--sp-4); } #final-contact .fc-btn{ box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-3); min-height:56px; border-radius:var(--r-pill); font-size:var(--fs-body); font-weight:var(--fw-black); text-decoration:none; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } #final-contact .fc-btn--primary{ padding:0 var(--sp-6); background:linear-gradient(95deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 80%, white)); color:var(--ink-invert); letter-spacing:var(--ls-heading); box-shadow:0 10px 24px color-mix(in srgb, var(--ink-strong) 22%, transparent); } #final-contact .fc-btn--ghost{ padding:0 var(--sp-5); gap:var(--sp-3); background:var(--surface-raised); border:1px solid color-mix(in srgb, var(--brand-primary-deep) 26%, transparent); color:var(--brand-primary-deep); letter-spacing:var(--ls-normal); white-space:nowrap; } #final-contact .fc-btn-icon{flex:0 0 auto;} #final-contact .fc-tel-num{font-variant-numeric:tabular-nums;} /* --- 1279.98px以下 : 少し詰める --- */ @media (max-width:1279.98px){ #final-contact .fc-box{max-width:940px;padding:var(--sp-6) var(--sp-7) var(--sp-6);} } /* --- TB + SP --- */ @media (max-width:899.98px){ #final-contact .fc-eyebrow{font-size:var(--fs-fine);letter-spacing:var(--ls-label);} #final-contact .fc-box{ width:100%; max-width:760px; margin:var(--sp-5) auto 0; padding:var(--sp-5) var(--sp-6); } #final-contact .fc-tags{gap:var(--sp-2);} #final-contact .fc-lead{font-size:var(--fs-body);text-align:center;} #final-contact .fc-lead-br-pc{display:none;} #final-contact .fc-btns{ flex-direction:row; flex-wrap:wrap; justify-content:center; max-width:none; gap:var(--sp-4); margin:var(--sp-5) 0 0; } #final-contact .fc-btn{width:auto;flex:0 1 288px;min-height:56px;} } /* --- SP : ボタンを縦に並べる --- */ @media (max-width:599.98px){ #final-contact .fc-box{max-width:640px;padding:var(--sp-5) var(--sp-5) var(--sp-5);} #final-contact .fc-btns{ flex-direction:column; width:100%; max-width:420px; gap:var(--sp-3); margin:var(--sp-4) auto 0; } #final-contact .fc-btn{ width:100%; flex:0 0 auto; min-width:0; min-height:54px; font-size:var(--fs-body-s); } #final-contact .fc-tag{font-size:var(--fs-caption);height:30px;padding:0 var(--sp-3);} } /* ボタン内アイコンの色。C228はSVGの stroke 属性に直接書いていた。矢印は文字色に追従、電話アイコンはアクセントのウォーム。 */ #final-contact .fc-btn-arrow path{stroke:currentColor;} #final-contact .fc-btn-icon{stroke:var(--brand-accent-warm);} /* ============================================================ #visit-cta — 中間CTA（トークン化済み）・style="" 0 / 生の色 0 / 生の font-size 0 ・ブレークポイント: 基準 / 899.98 / 599.98 C228は 899.98 / 767 の2つ。767 を 599.98 へ寄せた。・背景写真の transform は lp.js のパララックス計算が書く（触っていない） ============================================================ */ #visit-cta{ position:relative; width:100%; height:400px; overflow:hidden; } #visit-cta .vc-photo{ position:absolute; left:0; top:-140px; width:100%; height:calc(100% + 280px); /* 上下にはみ出させてパララックスの余地を作る */ object-fit:cover; object-position:center 18%; will-change:transform; } /* 左から右へ抜ける濃紺のベール。写真の上でコピーを読ませるためのもの */ #visit-cta .vc-veil{ position:absolute; inset:0; background:linear-gradient(90deg, color-mix(in srgb, var(--ink-strong) 95%, transparent) 0%, color-mix(in srgb, var(--ink-strong) 88%, transparent) 32%, color-mix(in srgb, var(--ink-strong) 58%, transparent) 47%, color-mix(in srgb, var(--ink-strong) 22%, transparent) 57%, color-mix(in srgb, var(--ink-strong) 6%, transparent) 63%, transparent 68%, transparent 100%); } #visit-cta .vc-inner{ position:relative; height:100%; max-width:var(--w-content); margin-inline:auto; padding-inline:var(--w-gutter); display:flex; align-items:center; } #visit-cta .vc-reveal-copy{ width:100%; max-width:565px; display:flex; flex-direction:column; align-items:flex-start; } #visit-cta .vc-eyebrow{ font-family:var(--font-display); font-weight:var(--fw-black); font-size:var(--fs-body-s); letter-spacing:var(--ls-label); color:color-mix(in srgb, var(--ink-invert) 82%, transparent); } #visit-cta .vc-title{ margin:var(--sp-4) 0 0; font-weight:var(--fw-black); font-size:var(--fs-h2); line-height:var(--lh-snug); letter-spacing:var(--ls-heading); color:var(--ink-invert); } #visit-cta .vc-t-sp{display:none;} #visit-cta .vc-t-sp-line{display:block;} #visit-cta .vc-desc{ margin:var(--sp-5) 0 0; font-weight:var(--fw-normal); font-size:var(--fs-body); line-height:var(--lh-relaxed); color:color-mix(in srgb, var(--ink-invert) 90%, transparent); } #visit-cta .vc-cta{ margin-top:var(--sp-6); display:inline-flex; align-items:center; gap:var(--sp-3); background:linear-gradient(95deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 80%, white)); color:var(--ink-invert); font-weight:var(--fw-black); font-size:var(--fs-body); letter-spacing:var(--ls-heading); text-decoration:none; padding:var(--sp-4) var(--sp-6); border-radius:var(--r-pill); box-shadow:0 10px 24px color-mix(in srgb, var(--ink-strong) 28%, transparent); transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } #visit-cta .vc-cta-arrow path{stroke:currentColor;} /* --- TB + SP : SP用の見出しに差し替え、ベールを弱める --- */ @media (max-width:899.98px){ #visit-cta .vc-t-pc{display:none;} #visit-cta .vc-t-sp{display:block;} /* 写真を少し左へ寄せて人物を画面内に収める */ #visit-cta .vc-photo{object-position:calc(50% - 26px) 18%;} #visit-cta .vc-veil{ background:linear-gradient(90deg, color-mix(in srgb, var(--ink-strong) 84%, transparent) 0%, color-mix(in srgb, var(--ink-strong) 76%, transparent) 30%, color-mix(in srgb, var(--ink-strong) 48%, transparent) 46%, color-mix(in srgb, var(--ink-strong) 18%, transparent) 58%, color-mix(in srgb, var(--ink-strong) 4%, transparent) 66%, transparent 72%, transparent 100%); } } /* --- SP : 高さを内容なりにして、CTAを中央の横長ボタンに --- */ @media (max-width:599.98px){ #visit-cta{height:auto;min-height:0;padding-block:var(--sp-7);} #visit-cta .vc-photo{ position:absolute; inset:0; top:0; height:100%; transform:none; } #visit-cta .vc-inner{height:auto;padding-inline:var(--sp-5);} #visit-cta .vc-title{font-size:var(--fs-h2);} #visit-cta .vc-desc{font-size:var(--fs-body-s);} #visit-cta .vc-cta{ box-sizing:border-box; width:auto; max-width:340px; margin-inline:auto; justify-content:center; padding:0 var(--sp-6); min-height:58px; font-size:var(--fs-body); } } /* スクリーンリーダー用の見出し。 C228はこれをインラインstyleで書いていた。WordPressテーマ側の .gifu-screen-reader-text（theme-base/style.css）と同じ内容だが、単体HTMLでは style.css を読み込まないのでこちらに持つ。 */ .lp-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; } /* ============================================================ #facility-gallery — 事業所ギャラリー（トークン化済み）・style="" 0 / 生の色 0 / 生の font-size 0 ・写真の流れる動き（CSSアニメーション）と、SPでの横スクロールへの切り替えは既存の .fgb2-* ルールが持つ。ここは見た目の値だけ。・lp.js は一時停止ボタンで animation-play-state を書くだけ（色は書かない） ============================================================ */ #facility-gallery{ position:relative; overflow:hidden; background:transparent; padding:var(--sp-6) 0 var(--sp-7); } #facility-gallery .fgb2-img{ width:430px; height:320px; object-fit:cover; object-position:50% 50%; flex:0 0 auto; display:block; margin-right:var(--sp-6); border-radius:40px; /* 大きく丸めた見せ方。--r-lg より大きい固有値 */ border:1px solid var(--border-hairline); } #facility-gallery .fgb2-img--p42{object-position:50% 42%;} #facility-gallery .fgb2-img--p52{object-position:52% 50%;} #facility-gallery .fgb2-img--p55{object-position:55% 50%;} /* 一時停止ボタン */ #facility-gallery .fgb2-pause{ position:absolute; top:var(--sp-4); right:var(--sp-5); z-index:5; display:inline-flex; align-items:center; gap:var(--sp-2); background:color-mix(in srgb, var(--surface-base) 82%, transparent); border:1px solid color-mix(in srgb, var(--ink-strong) 22%, transparent); border-radius:var(--r-pill); padding:var(--sp-2) var(--sp-3); color:var(--ink-strong); font-family:var(--font-body); font-size:var(--fs-label); font-weight:var(--fw-bold); cursor:pointer; transition:border-color var(--dur-fast) var(--ease); } #facility-gallery .fgb2-pause-icon{display:inline-flex;gap:3px;align-items:center;} #facility-gallery .fgb2-pause-bar{ display:block; width:3px; height:11px; background:currentcolor; border-radius:1px; } /* 流れる英字。C228は #0878F9 の固定色だった */ #facility-gallery .fgb2-txtseg{ color:color-mix(in srgb, var(--brand-primary) 88%, white); } /* --- TB + SP : 横スクロールへ切り替え（動きは既存ルール側） --- */ @media (max-width:899.98px){ #facility-gallery .fgb2-img{ width:300px; height:225px; border-radius:28px; margin-right:var(--sp-4); } } /* ============================================================ ヘッダー（.gsh-header）＋モバイルドロワー（.mnav-*） ------------------------------------------------------------ ・style="" 0 / 生の色 0 / 生の font-size 0 ・ブレークポイント: 基準 / 1279.98 / 899.98 / 599.98 C228は 1219 / (1199-979) / 979 / 767 / 599 の5段。実効値を測ったところ --gsh-h は 78 / 70 / 66 / 64 の4段しか無く、ナビ→ハンバーガーの切り替えは 979px の1点だけだった。 979 を 900 へ、767 と 599 を 599.98 へ寄せている。 → 900〜979px はナビが出たまま（C228はハンバーガー）。【lp.js との関係】ハンバーガーは .is-open の付け外しとのスクロールロック（position/top/left/right/width）だけ。色は書いていない。 ============================================================ */ .page-root{ min-width:1180px; /* PCの最小幅。C228の指定をそのまま */ background:var(--surface-base); } .gsh-header{ background:var(--surface-base); display:flex; align-items:center; box-shadow:0 1px 0 var(--border-hairline); top:0; z-index:90; } .gsh-inner{ width:100%; max-width:1320px; /* ヘッダーだけ本文より広い。C228の値 */ margin-inline:auto; padding-inline:var(--w-gutter); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); } .gsh-logo{ display:flex; align-items:center; gap:var(--sp-3); text-decoration:none; color:inherit; } .gsh-logo-icon{width:44px;height:44px;flex:0 0 auto;object-fit:contain;} .gsh-logo-text{display:flex;flex-direction:column;gap:2px;} .gsh-logo-sub{ font-size:var(--fs-label); font-weight:var(--fw-normal); letter-spacing:var(--ls-heading); color:var(--ink-muted); white-space:nowrap; } .gsh-logo-name{ font-size:var(--fs-h5); font-weight:var(--fw-black); letter-spacing:var(--ls-heading); color:var(--ink-strong); line-height:var(--lh-tight); white-space:nowrap; } .gsh-nav{ display:flex; align-items:center; flex-wrap:nowrap; gap:clamp(18px, 2.3vw, 34px); /* 幅に応じて詰める。C228の指定 */ min-width:0; } .gsh-nav-link{ font-size:var(--fs-body-s); font-weight:var(--fw-bold); letter-spacing:var(--ls-heading); white-space:nowrap; } /* ナビ内のCTA（980px未満で出る）とハンバーガー */ .gsh-cta-m{ align-items:center; justify-content:center; background:linear-gradient(95deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 80%, white)); color:var(--ink-invert); font-size:var(--fs-body-s); font-weight:var(--fw-bold); letter-spacing:var(--ls-heading); min-height:44px; padding-inline:var(--sp-5); border-radius:var(--r-sm); box-shadow:0 3px 10px color-mix(in srgb, var(--brand-primary) 20%, transparent); white-space:nowrap; } .gsh-burger{ align-items:center; justify-content:center; width:46px; height:46px; border:0; background:transparent; cursor:pointer; padding:0; border-radius:var(--r-sm); flex:0 0 auto; } .gsh-burger-bars{display:flex;flex-direction:column;gap:5px;width:22px;} .gsh-burger-bar{ display:block; height:2px; background:var(--ink-strong); border-radius:var(--r-pill); } /* --- モバイルドロワー --- */ .mnav-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5); border-bottom:1px solid var(--border-hairline); } .mnav-logo{ display:flex; align-items:center; gap:var(--sp-3); min-width:0; text-decoration:none; color:inherit; } .mnav-logo-icon{width:32px;height:32px;flex:0 0 auto;object-fit:contain;} .mnav-logo-name{ font-size:var(--fs-body-s); font-weight:var(--fw-black); letter-spacing:var(--ls-normal); color:var(--ink-strong); white-space:nowrap; } .mnav-close{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; background:transparent; border-radius:var(--r-sm); cursor:pointer; font-size:var(--fs-h5); line-height:var(--lh-flat); color:var(--ink-strong); flex:0 0 auto; } .mnav-list{display:flex;flex-direction:column;padding:var(--sp-2) 0 var(--sp-3);} .mnav-link{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); min-height:54px; padding-inline:var(--sp-5); font-size:var(--fs-lead); font-weight:var(--fw-bold); letter-spacing:var(--ls-heading); color:var(--ink-strong); border-bottom:1px solid var(--border-hairline); } .mnav-arrow{ font-family:var(--font-display); font-size:var(--fs-body-s); color:color-mix(in srgb, var(--brand-primary) 50%, white); } .mnav-foot{ margin-top:auto; padding:var(--sp-4) var(--sp-5) var(--sp-5); border-top:1px solid var(--border-hairline); background:var(--surface-raised); } .mnav-cta{ display:flex; align-items:center; justify-content:center; gap:var(--sp-3); width:100%; box-sizing:border-box; min-height:58px; border-radius:var(--r-pill); background:linear-gradient(95deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 80%, white)); color:var(--ink-invert); font-size:var(--fs-lead); font-weight:var(--fw-black); letter-spacing:var(--ls-heading); box-shadow:0 10px 24px color-mix(in srgb, var(--brand-primary) 28%, transparent); } .mnav-cta-arrow{ font-family:var(--font-display); font-size:var(--fs-h5); font-weight:var(--fw-black); } .mnav-note{ margin:var(--sp-3) 0 0; font-size:var(--fs-caption); font-weight:var(--fw-normal); letter-spacing:var(--ls-normal); color:var(--ink-muted); text-align:center; } /* --- 1280px未満 : 最小幅の縛りを外す --- */ @media (max-width:1279.98px){ .page-root{min-width:0;} } /* --- 1200px未満 : ナビと左右余白を詰める --- 【ブレークポイントの例外 1/2】ここを900pxまで下ろすと、980〜1199pxでナビ（7項目＋CTA）とロゴ（どちらも nowrap）が入りきらない。実測で 980px のときナビ601px＋ロゴ296px＝897px に対して使える幅は892px。 TOKENIZE.md の3点に寄せられないので 1199.98px を残す。 */ @media (max-width:1199.98px){ .gsh-inner{padding-inline:var(--sp-4);gap:var(--sp-3);} .gsh-nav{gap:var(--sp-3);} } /* --- 980px未満 : ナビをハンバーガーへ --- 【ブレークポイントの例外 2/2】最初 899.98px へ寄せたが、900〜979pxで .gsh-inner がビューポート（900px）に対して952pxに膨らんだ（ロゴとナビがどちらも nowrap で min-content を割れないため）。上の詰めを入れても900〜919pxは4px足りない。ナビが破綻するより1点残すほうがよいと判断して 979.98px にした。 */ @media (max-width:979.98px){ .gsh-nav-link{display:none;} .gsh-burger{display:inline-flex;} .gsh-logo{gap:var(--sp-3);} .gsh-logo-icon{width:40px;height:40px;} .gsh-logo-sub{font-size:var(--fs-fine);} .gsh-logo-name{font-size:var(--fs-lead);} } /* --- SP --- */ @media (max-width:599.98px){ .gsh-logo-icon{width:38px;height:38px;} .gsh-logo-name{font-size:var(--fs-body);} } /* ============================================================ #site-footer ＋固定チップ（ページトップ / サイドCTA / 下部CTA） ------------------------------------------------------------ ・style="" 0 / 生の色 0 / 生の font-size 0 ・ブレークポイント: 基準 / 1279.98 / 899.98 C228は 1219 / 900 の2段。1219 を 1279.98 へ、900 を 899.98 へ。・lp.js は固定チップの表示切り替えでクラスを付けるだけ（色は書かない） ============================================================ */ #site-footer{ position:relative; width:100%; min-width:0; box-sizing:border-box; overflow:hidden; background-color:var(--surface-base); border-top:1px solid var(--border-line); padding:var(--sp-7) 0 var(--sp-5); } #site-footer .gsf-inner{ width:calc(100% - 80px); max-width:1180px; /* フッターだけ本文より広い。C228の値 */ margin-inline:auto; position:relative; z-index:3; } #site-footer .gsf-upper{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:var(--sp-7); } #site-footer .gsf-org-head{display:flex;align-items:center;gap:var(--sp-3);} #site-footer .gsf-logo{ display:block; width:50px; height:50px; overflow:hidden; flex:0 0 50px; text-decoration:none; } #site-footer .gsf-logo-img{ height:50px; width:50px; max-width:none; object-fit:contain; display:block; } #site-footer .gsf-org-name{ font-size:var(--fs-lead); font-weight:var(--fw-normal); line-height:var(--lh-tight); letter-spacing:var(--ls-normal); color:var(--ink-strong); } #site-footer .gsf-org-sub{ margin-top:2px; font-size:var(--fs-caption); font-weight:var(--fw-normal); line-height:var(--lh-snug); color:color-mix(in srgb, var(--ink-strong) 68%, transparent); } #site-footer .gsf-meta-list{display:flex;flex-direction:column;gap:var(--sp-2);} #site-footer .gsf-meta-row{display:flex;align-items:flex-start;gap:var(--sp-2);} #site-footer .gsf-meta-icon{display:flex;padding-top:3px;} #site-footer .gsf-meta-svg{ width:15px; height:15px; flex:0 0 auto; stroke:color-mix(in srgb, var(--ink-strong) 55%, transparent); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } #site-footer .gsf-addr{ font-size:var(--fs-caption); font-weight:var(--fw-normal); line-height:var(--lh-normal); letter-spacing:var(--ls-normal); color:color-mix(in srgb, var(--ink-strong) 80%, transparent); } #site-footer .gsf-nowrap{display:inline-block;white-space:nowrap;} #site-footer .gsf-tel{ font-size:var(--fs-body-s); font-weight:var(--fw-bold); line-height:var(--lh-snug); letter-spacing:var(--ls-normal); color:var(--ink-base); font-variant-numeric:tabular-nums; text-decoration:none; white-space:nowrap; } #site-footer .gsf-sns{display:flex;align-items:center;gap:var(--sp-4);} #site-footer .gsf-sns-label{ font-family:var(--font-display); font-size:var(--fs-fine); font-weight:var(--fw-bold); letter-spacing:var(--ls-label); line-height:var(--lh-flat); color:color-mix(in srgb, var(--ink-strong) 62%, transparent); white-space:nowrap; } #site-footer .gsf-sns-btns{display:flex;gap:var(--sp-3);} #site-footer .gsf-sns-btn{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; box-sizing:border-box; flex:0 0 44px; border-radius:50%; border:1px solid var(--border-line); background:var(--surface-raised); text-decoration:none; transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } /* 未開設のアカウントは押せない見た目にする（C218） */ #site-footer .gsf-sns-btn[aria-disabled], #site-footer span.gsf-sns-btn{opacity:1;cursor:default;pointer-events:none;} #site-footer .gsf-sns-svg{width:18px;height:18px;fill:var(--brand-primary);} #site-footer .gsf-sns-svg--stroke{ width:19px; height:19px; stroke:var(--brand-primary); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } #site-footer .gsf-sns-dot{fill:var(--brand-primary);stroke:none;} #site-footer .gsf-lower{ border-top:1px solid var(--border-hairline); margin-top:var(--sp-5); padding-top:var(--sp-3); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); } #site-footer .gsf-legal-wrap{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;} #site-footer .gsf-legal--placeholder{cursor:default;pointer-events:none;} #site-footer .gsf-copy{ font-size:var(--fs-label); font-weight:var(--fw-normal); color:color-mix(in srgb, var(--ink-strong) 60%, transparent); white-space:nowrap; } /* --- 固定チップ --- */ #gsf-pagetop{ position:fixed; right:var(--sp-5); bottom:var(--sp-5); width:50px; height:50px; border-radius:50%; background:color-mix(in srgb, var(--surface-base) 96%, transparent); color:color-mix(in srgb, var(--ink-strong) 60%, black); border:1px solid color-mix(in srgb, var(--ink-strong) 10%, transparent); box-shadow:var(--shadow-float); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:100; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease); } #gsf-pagetop .gsf-pagetop-svg{ width:20px; height:20px; stroke:currentcolor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .fx-cta-pc{ position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:80; align-items:center; gap:var(--sp-3); max-height:80vh; padding:var(--sp-5) var(--sp-3); border-radius:var(--r-sm) 0 0 var(--r-sm); color:var(--ink-invert); font-family:var(--font-body); font-size:var(--fs-body-s); font-weight:var(--fw-bold); letter-spacing:0.12em; writing-mode:vertical-rl; text-orientation:mixed; box-shadow:-6px 0 20px color-mix(in srgb, var(--ink-strong) 22%, transparent); transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); } .fx-cta-sp{ position:fixed; left:0; right:0; bottom:0; z-index:80; box-sizing:border-box; padding:var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--surface-base) 94%, transparent); backdrop-filter:blur(8px); box-shadow:0 -6px 20px color-mix(in srgb, var(--ink-strong) 12%, transparent); transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); } .fx-cta-sp-btn{ display:flex; align-items:center; justify-content:center; gap:var(--sp-3); width:100%; box-sizing:border-box; min-height:46px; border-radius:var(--r-pill); background:linear-gradient(95deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 80%, white)); box-shadow:0 6px 16px color-mix(in srgb, var(--brand-primary) 26%, transparent); color:var(--ink-invert); font-family:var(--font-body); font-size:var(--fs-body-s); font-weight:var(--fw-black); letter-spacing:var(--ls-heading); text-decoration:none; } .fx-cta-sp-arrow{ font-family:var(--font-display); font-size:var(--fs-body); font-weight:var(--fw-black); } /* --- 1280px未満 : SNSを右列に寄せて2段組みにする --- */ @media (max-width:1279.98px){ #site-footer{padding:var(--sp-6) 0 var(--sp-4);} #site-footer .gsf-upper{ grid-template-columns:minmax(0,1fr) auto; column-gap:var(--sp-6); row-gap:var(--sp-3); align-items:center; } #site-footer .gsf-org{grid-column:1;grid-row:1;} #site-footer .gsf-meta{grid-column:1;grid-row:2;justify-self:start;} #site-footer .gsf-sns{grid-column:2;grid-row:1 / span 2;align-self:center;} } /* --- TB + SP : 1カラムで中央揃え --- */ @media (max-width:899.98px){ #site-footer .gsf-upper{ grid-template-columns:minmax(0,1fr); row-gap:var(--sp-4); justify-items:center; } #site-footer .gsf-org, #site-footer .gsf-meta, #site-footer .gsf-sns{ grid-column:1; grid-row:auto; justify-self:center; } #site-footer .gsf-org{text-align:center;} #site-footer .gsf-meta{align-items:center;gap:var(--sp-2);} #site-footer .gsf-sns{align-self:auto;justify-content:center;text-align:center;margin-top:0;} #site-footer .gsf-org-head{justify-content:center;} #site-footer .gsf-addr{font-size:var(--fs-body-s);word-break:keep-all;overflow-wrap:anywhere;} #site-footer .gsf-tel{font-size:var(--fs-body);} #site-footer .gsf-lower{ flex-direction:column; align-items:center; gap:var(--sp-2); text-align:center; margin-top:var(--sp-4); padding-top:var(--sp-3); } #site-footer .gsf-lower > div{justify-content:center;} #site-footer .gsf-lower .gsf-legal-wrap{order:0;padding-right:0;} #site-footer .gsf-lower .gsf-copy{order:0;} } /* ============================================================ #voice — 利用者の声（1/3 見出し帯）・PCはカルーセル、SPはアコーディオン。DOMはアコーディオン → カルーセルの順。・lp.js は is-active / gridTemplateRows などを書く。色は前段で対応済み。 ============================================================ */ /* TOKENIZE.md の余白表で #voice は「上下が隣接セクションと連続する演出。個別に判断」。見出し帯が前のセクションと接するので上余白は0のまま。 */ #voice{ overflow:hidden; padding:0 0 var(--sp-7); } /* 写真の上に濃紺のグラデーションを重ねた帯 */ #voice .voice-heading-band{ position:relative; box-sizing:border-box; min-height:284px; background-color:var(--ink-strong); background-image: linear-gradient(90deg, color-mix(in srgb, var(--ink-strong) 88%, transparent) 0%, color-mix(in srgb, var(--ink-strong) 82%, transparent) 42%, color-mix(in srgb, var(--ink-strong) 66%, transparent) 62%, color-mix(in srgb, var(--ink-strong) 50%, transparent) 100%), url("../images/optimized-c215/voice-heading-office-bg.webp"); background-size:cover, cover; background-position:center center, 60% 58%; background-repeat:no-repeat, no-repeat; padding:var(--sp-7) 0 var(--sp-9); } /* 帯の上に散らした飾り */ #voice .vh-deco{position:absolute;pointer-events:none;} #voice .vh-deco--stripe{top:34px;left:4%;opacity:1;} #voice .vh-deco--bar1{ top:70px;right:6%;width:64px;height:14px; border-radius:var(--r-sm); background:color-mix(in srgb, var(--ink-invert) 18%, transparent); transform:rotate(-35deg); } #voice .vh-deco--dot{ top:132px;right:9.5%;width:11px;height:11px; border-radius:50%; background:color-mix(in srgb, var(--ink-invert) 20%, transparent); } #voice .vh-deco--ring{ bottom:56px;left:5%;width:40px;height:40px; border-radius:50%; border:2px solid color-mix(in srgb, var(--brand-primary) 45%, transparent); } #voice .vh-deco--bar2{ bottom:50px;right:5%;width:50px;height:12px; border-radius:var(--r-sm); background:color-mix(in srgb, var(--brand-primary) 40%, transparent); transform:rotate(28deg); } #voice .vh-inner{ position:relative; max-width:1100px; /* この帯だけ本文より狭い。C228の値 */ margin-inline:auto; padding-inline:var(--sp-7); text-align:center; } #voice .vh-eyebrow{ font-family:var(--font-display); font-weight:var(--fw-black); font-size:var(--fs-body-s); letter-spacing:var(--ls-label); color:color-mix(in srgb, var(--ink-invert) 84%, transparent); } #voice .vh-h2{ margin:var(--sp-3) 0 0; font-size:var(--fs-h2); font-weight:var(--fw-black); letter-spacing:var(--ls-heading); line-height:var(--lh-tight); color:var(--ink-invert); } #voice .vh-lead{ margin:var(--sp-3) 0 0; font-size:var(--fs-body); font-weight:var(--fw-normal); line-height:var(--lh-normal); letter-spacing:var(--ls-heading); color:color-mix(in srgb, var(--ink-invert) 84%, transparent); } /* ============================================================ #voice — 利用者の声（2/3 SPアコーディオン） ------------------------------------------------------------ 3人分のアクセント（青 #3F6FBF / 緑 #6F9A52 / 橙 #C98243）は C228でも --vacc というカスタムプロパティに持たせていたが、子要素の色はすべて生の rgba を直書きしていた。 --vacc と --vacc-ink の2つに集約し、子は全部そこから作る。 → 3人ぶんの色違いが1組のルールで済むようになった。 ============================================================ */ #voice .vacc-card{ --vacc: var(--brand-primary); --vacc-ink: color-mix(in srgb, var(--brand-primary) 75%, black); background:var(--surface-base); border:1px solid var(--border-line); border-radius:var(--r-md); box-shadow:var(--shadow-card); overflow:hidden; margin-bottom:var(--sp-3); } #voice .vacc-card--cool{--vacc:var(--brand-accent-cool);--vacc-ink:var(--brand-accent-cool-ink);} #voice .vacc-card--warm{--vacc:var(--brand-accent-warm);--vacc-ink:var(--brand-accent-warm-ink);} #voice .vacc-btn{ width:100%; box-sizing:border-box; min-height:92px; display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3); background:none; border:0; text-align:left; cursor:pointer; font-family:var(--font-body); } #voice .vacc-bar{ display:block; width:3px; height:14px; border-radius:var(--r-pill); background:var(--vacc); transform:rotate(28deg); } #voice .vacc-btn-body{flex:1 1 0%;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2);} #voice .vacc-btn-head{display:flex;gap:var(--sp-3);align-items:baseline;} #voice .vacc-label{ font-family:var(--font-display); font-weight:var(--fw-black); font-size:var(--fs-label); letter-spacing:var(--ls-label); color:var(--vacc-ink); } #voice .vacc-age{ font-size:var(--fs-body-s); font-weight:var(--fw-black); letter-spacing:var(--ls-heading); color:var(--ink-base); } #voice .vacc-title{ flex:1 1 0%; font-size:var(--fs-body-s); font-weight:var(--fw-bold); color:var(--ink-base); line-height:var(--lh-snug); } #voice .vacc-icon{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:color-mix(in srgb, var(--vacc) 10%, transparent); color:var(--brand-primary-deep); transition:background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } #voice .vacc-icon-svg{transition:transform var(--dur-base) var(--ease);} #voice .vacc-panel{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); } #voice .vacc-clip{overflow:hidden;min-height:0;} #voice .vacc-body{padding:2px var(--sp-4) var(--sp-5);border-top:1px solid var(--border-hairline);} #voice .vacc-photo-wrap{display:none;position:relative;z-index:1;margin:-34px var(--sp-4) 0;} #voice .vacc-photo{ flex:0 0 64px; width:64px; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--border-line); background:color-mix(in srgb, var(--vacc) 8%, transparent); } #voice .vacc-photo-img{ display:block; width:100%; aspect-ratio:170 / 183; object-fit:cover; object-position:center center; } #voice .vacc-chips{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;} #voice .vacc-chips--tight{gap:var(--sp-2);margin-top:var(--sp-4);} #voice .vacc-chip{ font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink-muted); background:color-mix(in srgb, var(--vacc) 7%, transparent); border:1px solid color-mix(in srgb, var(--vacc) 30%, transparent); border-radius:var(--r-sm); padding:var(--sp-1) var(--sp-2); letter-spacing:var(--ls-normal); line-height:var(--lh-tight); } #voice .vacc-tag{ font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--vacc-ink); background:color-mix(in srgb, var(--vacc) 9%, transparent); border:1px solid color-mix(in srgb, var(--vacc) 50%, transparent); border-radius:var(--r-pill); padding:var(--sp-1) var(--sp-3); letter-spacing:var(--ls-heading); white-space:nowrap; } #voice .vacc-rule{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5);} #voice .vacc-rule-label{ font-size:var(--fs-caption); font-weight:var(--fw-bold); color:var(--ink-muted); letter-spacing:var(--ls-heading); } #voice .vacc-rule-line{flex:1 1 0%;height:1px;background:color-mix(in srgb, var(--vacc) 22%, transparent);} #voice .vacc-paras{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-3);} #voice .vacc-p{ margin:0; font-size:var(--fs-body); font-weight:var(--fw-normal); line-height:var(--lh-normal); letter-spacing:var(--ls-normal); color:var(--ink-muted); } #voice .vacc-h3{ font-size:var(--fs-lead); font-weight:var(--fw-black); line-height:var(--lh-tight); letter-spacing:var(--ls-normal); color:var(--ink-strong); text-wrap:pretty; } #voice .vacc-badges{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-3);} #voice .vacc-badge{ flex:0 0 96px; font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--brand-primary-deep); border:1px solid color-mix(in srgb, var(--vacc) 42%, transparent); border-radius:var(--r-sm); padding:var(--sp-1) 0; text-align:center; letter-spacing:var(--ls-normal); background:color-mix(in srgb, var(--vacc) 5%, transparent); } #voice .vacc-note{ margin-top:var(--sp-3); font-size:var(--fs-label); color:var(--ink-subtle); letter-spacing:var(--ls-normal); } /* ============================================================ #voice — 利用者の声（3/3 PCカルーセル） ------------------------------------------------------------ カードの width / transform / opacity / z-index / transition と前後ボタンの margin-left、ラッパーの height は lp.js の renderVoice() が実測から計算して書く。ここには持たせない。 3人分のアクセントはアコーディオンと同じ --vacc / --vacc-ink。 ============================================================ */ #voice .voice-carousel-wrap{position:relative;z-index:1;margin-top:-54px;overflow:hidden;} #voice .v-group{ position:relative; height:524px; /* カードの高さ。JSはこの値を読まない */ margin-top:var(--sp-6); touch-action:pan-y; cursor:grab; user-select:none; } #voice .v-card{ --vacc: var(--brand-primary); --vacc-ink: color-mix(in srgb, var(--brand-primary) 75%, black); position:absolute; top:0; left:50%; height:524px; background:var(--surface-base); border:1.5px solid color-mix(in srgb, var(--brand-primary) 30%, white); border-radius:var(--r-lg); box-shadow:0 18px 40px -40px color-mix(in srgb, var(--ink-strong) 24%, transparent); padding:var(--sp-6) var(--sp-7) var(--sp-6); box-sizing:border-box; overflow:hidden; } #voice .v-card:nth-of-type(2){--vacc:var(--brand-accent-cool);--vacc-ink:var(--brand-accent-cool-ink);} #voice .v-card:nth-of-type(3){--vacc:var(--brand-accent-warm);--vacc-ink:var(--brand-accent-warm-ink);} #voice .v-inner{max-width:1030px;width:100%;margin-inline:auto;transition:opacity 0.5s ease-out;} #voice .v-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);} #voice .v-head-left{display:flex;align-items:center;gap:var(--sp-3);} #voice .v-bar{ display:block;width:3px;height:14px; border-radius:var(--r-pill); background:var(--vacc); transform:rotate(28deg); } #voice .v-label{ font-family:var(--font-display); font-weight:var(--fw-black); font-size:var(--fs-body); letter-spacing:var(--ls-label); color:var(--vacc-ink); } #voice .v-rule{ display:block;width:52px;height:1px;flex:0 0 auto;margin-left:var(--sp-4); background:color-mix(in srgb, var(--vacc) 25%, transparent); } #voice .v-tag{ font-size:var(--fs-caption); font-weight:var(--fw-bold); color:var(--vacc-ink); background:color-mix(in srgb, var(--vacc) 9%, transparent); border:1px solid color-mix(in srgb, var(--vacc) 55%, transparent); border-radius:var(--r-pill); padding:var(--sp-1) var(--sp-4); letter-spacing:var(--ls-heading); white-space:nowrap; } #voice .v-h3{ margin:var(--sp-3) 0 0; font-size:var(--fs-h3); font-weight:var(--fw-black); line-height:var(--lh-tight); letter-spacing:var(--ls-normal); color:var(--ink-strong); } #voice .v-hr{ height:1px; margin:var(--sp-4) 0 var(--sp-5); background:linear-gradient(90deg, color-mix(in srgb, var(--ink-strong) 18%, transparent), color-mix(in srgb, var(--ink-strong) 4%, transparent)); } #voice .v-body{display:grid;grid-template-columns:minmax(390px,42%) minmax(0,58%);column-gap:var(--sp-7);align-items:start;} #voice .v-profile{display:grid;grid-template-columns:170px minmax(0,1fr);gap:var(--sp-5);align-items:start;} #voice .v-profile-photo{ position:relative; width:170px; height:183px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border-line); background:color-mix(in srgb, var(--vacc) 8%, transparent); } #voice .v-photo-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; } #voice .v-photo-corner{position:absolute;top:0;right:0;pointer-events:none;} #voice .v-profile-info{padding-top:var(--sp-3);} #voice .v-profile-head{display:flex;gap:var(--sp-3);align-items:baseline;} #voice .v-age{ font-size:var(--fs-h5); font-weight:var(--fw-black); color:var(--ink-strong); letter-spacing:var(--ls-heading); } #voice .v-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2);} #voice .v-chip{ font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink-muted); background:color-mix(in srgb, var(--vacc) 7%, transparent); border:1px solid color-mix(in srgb, var(--vacc) 32%, transparent); border-radius:var(--r-sm); padding:var(--sp-1) var(--sp-3); letter-spacing:var(--ls-normal); line-height:var(--lh-tight); } #voice .v-badges{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-5);} #voice .v-badge-row{display:flex;align-items:center;height:22px;} #voice .v-badge{ flex:0 0 118px; font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--brand-primary-deep); border:1px solid color-mix(in srgb, var(--vacc) 42%, transparent); border-radius:var(--r-sm); padding:var(--sp-1) 0; text-align:center; letter-spacing:var(--ls-normal); background:color-mix(in srgb, var(--vacc) 5%, transparent); } #voice .v-badge-text{ flex:1 1 0%; font-size:var(--fs-body-s); font-weight:var(--fw-bold); color:var(--ink-base); line-height:var(--lh-snug); } #voice .v-note{ margin:var(--sp-2) 0 0; font-size:var(--fs-label); color:var(--ink-subtle); letter-spacing:var(--ls-normal); text-align:center; } #voice .v-body-mark{display:flex;align-items:center;gap:var(--sp-1);flex:0 0 auto;margin-right:var(--sp-3);} #voice .v-dash{display:block;width:26px;height:3px;border-radius:var(--r-pill);background:var(--vacc);} #voice .v-body-title{ font-size:var(--fs-body); font-weight:var(--fw-black); letter-spacing:var(--ls-heading); color:var(--ink-base); white-space:nowrap; } #voice .v-paras{max-width:540px;margin-top:var(--sp-4);} #voice .v-p{ margin:0; font-size:var(--fs-body); font-weight:var(--fw-normal); line-height:var(--lh-normal); letter-spacing:var(--ls-normal); color:var(--ink-muted); } #voice .v-p--gap{margin-top:var(--sp-3);} /* 前後ボタン。margin-left は lp.js が幅から計算して書く */ #voice .v-arrow{ position:absolute; top:50%; left:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; background:color-mix(in srgb, var(--brand-primary) 70%, white); border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 5px 12px -8px color-mix(in srgb, var(--ink-strong) 38%, transparent); z-index:5; transition:background var(--dur-fast) var(--ease), margin-left var(--dur-fast) var(--ease); } #voice .v-arrow-svg{display:block;} #voice .v-arrow-svg--flip{transform:scaleX(-1);} #voice [data-voice-dots]{ position:relative; display:flex; align-items:center; justify-content:center; gap:var(--sp-2); margin-top:var(--sp-5); } /* SVGの stroke 属性に直接書かれていた色をクラスへ。（見出し帯のストライプ、写真の角の斜線、前後ボタンの矢印） */ #voice .vh-stripe-line{stroke:color-mix(in srgb, var(--ink-invert) 18%, transparent);} #voice .v-corner-line{stroke:color-mix(in srgb, var(--vacc) 38%, transparent);} #voice .v-arrow-path{stroke:var(--ink-invert);} /* ============================================================ FV（ファーストビュー .fv-sec） ------------------------------------------------------------ ・style="" 0 / 生の色 0 / !important 0 ・ブレークポイント: 基準(>=900) / 899.98 / 599.98 ＋縦長の大画面だけの 1点（幅ではなく高さの条件なので残す） C228は 1099 / 899.98 / (600-899.98) / 767 / 599.98 の5ブロックだった。【生きている指定と死んでいる指定の切り分け】 13幅で実効値を測った結果、完全に死んでいたのは .fv-sec{min-height:auto} と ≤899.98 の {min-height:0} だけだった。これは C201-h の「背景写真一体型（.fv-photo を inset:0 で全面に敷き、 .fv-sec に固定 min-height を持たせる）」を C201-i が撤去したときの打ち消し用の残骸で、既定値と同じなので削除した。 .fv-photo の absolute/inset:0 も全面オーバーレイもHTMLには残っておらず、 PCは right/56% の右寄せ写真、SPは通常フローの画像ブロックで生きている。【1099 を 900 へ畳んだ根拠】 900〜1099px は従来「コピー→写真」の縦積みだった。ここをPCの2カラムへ寄せてよいかを実測した（コピー右端と写真左端の重なりは .fv-fade が受ける）。 900px : コピー幅435px / 見出しのはみ出し0 / 重なり71px / 横スクロール0 1023px : コピー幅499px / はみ出し0 / 重なり81px / 横スクロール0 1199px : コピー幅590px / はみ出し0 / 重なり95px（従来からPC） 900px のほうが従来PCの下限(1200px)より重なりが小さく、見出しも折れない。よって 900〜1099 もPC2カラムで成立する。【767 を 599.98 へ畳んだ根拠】 600〜767px の見出しは white-space:normal + clamp(28px,8.6vw,38px) だったが、 700px で 8.6vw=60.2 → 上限38px。畳んだ先の clamp(36px,5.4vw,48px) は 700px で 37.8px と実質同値で、nowrap でも 9文字×37.8px≒359px とコンテンツ幅(700-40=660px)に収まる。 ============================================================ */ .fv-sec{ position:relative; overflow:hidden; background:linear-gradient(108deg, color-mix(in srgb, var(--brand-primary) 5%, white) 0%, color-mix(in srgb, var(--brand-primary) 9%, white) 46%, color-mix(in srgb, var(--brand-primary) 15%, white) 100%); } .fv-photo{ position:absolute; top:0; right:0; height:100%; width:56%; object-fit:cover; object-position:center top; } /* 写真の左端を背景へ溶かす帯 */ .fv-fade{ position:absolute; top:0; right:0; height:100%; width:56%; background:linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 7%, white) 0%, color-mix(in srgb, color-mix(in srgb, var(--brand-primary) 7%, white) 55%, transparent) 16%, transparent 38%); } /* 斜めに走る光の装飾3本 */ .fv-diag{ position:absolute; transform:rotate(24deg); pointer-events:none; } .fv-diag--a{ top:-12%;left:41%;width:120px;height:130%; background:linear-gradient( color-mix(in srgb, color-mix(in srgb, var(--brand-primary) 55%, white) 20%, transparent), color-mix(in srgb, color-mix(in srgb, var(--brand-primary) 35%, white) 6%, transparent)); } .fv-diag--b{ top:-12%;left:52%;width:48px;height:130%; background:linear-gradient( color-mix(in srgb, var(--ink-invert) 40%, transparent), color-mix(in srgb, color-mix(in srgb, var(--brand-primary) 21%, white) 10%, transparent)); } .fv-diag--c{ bottom:-30%;left:30%;width:72px;height:90%; background:linear-gradient( transparent, color-mix(in srgb, color-mix(in srgb, var(--brand-primary) 47%, white) 15%, transparent)); } .fv-inner{ position:relative; max-width:1320px; /* ヘッダーと同じ広めの器（C228の値） */ margin-inline:auto; padding:clamp(68px, 9.5vh, 92px) var(--w-gutter) clamp(44px, 6.5vh, 64px); display:flex; } .fv-left{ width:52%; min-width:0; display:flex; flex-direction:column; align-items:flex-start; } /* タイプライターで書き換わる上段コピー（lp.js が .fv-tw-word の文字を差し替える） */ .fv-upper{ margin:0; font-size:clamp(24px, 2.3vw, var(--fs-h3)); font-weight:var(--fw-black); line-height:var(--lh-tight); letter-spacing:var(--ls-normal); color:var(--ink-strong); white-space:nowrap; min-height:1.4em; } .fv-tw-word{ display:inline-block; background:var(--brand-gradient) text; -webkit-text-fill-color:transparent; color:var(--brand-primary); } /* lp.js が opacity を書く前の初期表示用（HTMLのインライン opacity:1 の置き換え） */ .fv-tw-caret-on{opacity:1;} .fv-copy-reveal{display:flex;flex-direction:column;align-items:flex-start;width:100%;} /* 見出し上の金色の罫 */ .fv-rule1{ display:block; width:560px; max-width:100%; height:3px; margin:var(--sp-5) 0 0; background:linear-gradient(90deg, var(--brand-accent-gold), color-mix(in srgb, var(--brand-accent-gold) 0%, transparent)); } .fv-h1{ margin:var(--sp-5) 0 0; font-weight:var(--fw-black); line-height:var(--lh-tight); letter-spacing:var(--ls-normal); } .fv-line{ display:block; white-space:nowrap; font-size:clamp(40px, 4.5vw, var(--fs-h1)); } /* 2行目は .heading-gradient-primary が色を持つので上書きしない */ .fv-line:not(.heading-gradient-primary){color:var(--ink-strong);} /* 「IT」だけ和文より少し大きく見せる */ .fv-it{font-size:1.07em;vertical-align:-0.02em;} .fv-desc{ margin:var(--sp-6) 0 0; font-size:var(--fs-lead); font-weight:var(--fw-bold); letter-spacing:var(--ls-heading); color:var(--ink-base); line-height:var(--lh-relaxed); } /* 文節ごとに折り返させる（途中で切れないように） */ .fv-desc-line{display:inline-block;} .fv-cta{ margin-top:var(--sp-7); display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-6); min-width:330px; padding:var(--sp-4) var(--sp-6); border-radius:var(--r-pill); background:linear-gradient(95deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 55%, var(--brand-primary-bright))); color:var(--ink-invert); font-size:var(--fs-h5); font-weight:var(--fw-black); letter-spacing:var(--ls-heading); box-shadow:0 10px 24px color-mix(in srgb, var(--brand-primary) 28%, transparent); } .fv-cta-arrow{ font-family:var(--font-display); font-size:var(--fs-h4); font-weight:var(--fw-black); } /* 縦に余裕のある大画面だけFVの高さを確保する（幅ではなく高さの条件なので畳まない） */ @media (min-width:1440px) and (min-height:900px){ .fv-sec{min-height:clamp(720px, calc(66.667vh + 120px), 840px);} } /* --- TB・SP: 「写真 → コピー」の上下構成（C201-i） --- */ @media (max-width:899.98px){ .fv-sec{display:flex;flex-direction:column;} .fv-photo{ position:static; order:1; display:block; width:100%; height:clamp(360px, 42vw, 440px); object-position:60% 16%; z-index:auto; } .fv-fade{display:none;} .fv-diag{opacity:0.5;} .fv-inner{ order:2; z-index:auto; width:100%; max-width:none; box-sizing:border-box; margin:0; padding:var(--sp-6) var(--w-gutter) var(--sp-7); background:linear-gradient(180deg, color-mix(in srgb, var(--brand-primary) 5%, white) 0%, color-mix(in srgb, var(--brand-primary) 9%, white) 100%); } .fv-left{width:100%;max-width:none;} .fv-line{font-size:clamp(36px, 5.4vw, 48px);} /* リード文はSPトークン(15px)まで落とさず本文サイズで止める（C228は16〜17px） */ .fv-desc{font-size:var(--fs-body);} /* SPは画面下のCTAバーがあるのでFV内のボタンは出さない */ .fv-cta{display:none;} } /* --- SP --- */ @media (max-width:599.98px){ .fv-photo{height:auto;aspect-ratio:9 / 8;object-position:60% 12%;} .fv-diag{display:none;} .fv-upper{font-size:clamp(22px, 7vw, 26px);min-height:2.8em;} /* C179: 「を仕事に。」とキャレットが2行目に並ぶよう、語のあとで折る */ .fv-tw-word{display:block;} .fv-tw-fixed{display:inline;} .fv-h1{line-height:var(--lh-snug);} .fv-line{white-space:normal;font-size:clamp(28px, 8.6vw, 38px);} } /* ============================================================ #flow — 1/2: スクロール連動ステージの色トークン ------------------------------------------------------------ `#flow` の色は lp.js が「スクロール量に応じて2色を補間」して作るため、クラスで状態を表す方式（#faq / #voice / #use-flow）が使えない。代わりに、**起動時に一度だけ** getComputedStyle でここの変数を読み、パレット定数として使う（lp.js の flowPalette()）。 flowMixHex() の計算式・スクロール位置の計算・カード幅の実測・ 9場面の切り替え判定・sticky の高さ計算には一切触れていない。 ============================================================ */ #flow{ /* 9場面のアクセント。C228は [青,橙,緑,橙,緑,橙,緑,橙,青] の並び */ --flow-accent-brand: var(--brand-primary); /* C228: #2D66EA → 主色へ寄せた */ --flow-accent-warm: var(--brand-accent-warm); /* C228: #D98745 と一致 */ --flow-accent-cool: var(--brand-accent-cool); /* C228: #6E9B55 と一致 */ /* 帯の待機文字色（濃いアクセント） C228: #153c75 / #6b3c1b / #315125 */ --flow-ink-brand: color-mix(in srgb, var(--brand-primary) 58%, black); --flow-ink-warm: color-mix(in srgb, var(--brand-accent-warm) 49%, black); --flow-ink-cool: color-mix(in srgb, var(--brand-accent-cool) 47%, black); --flow-surface: var(--surface-base); /* タイムラインの未到達ドット C228: #ffffff / #afbdcc / #5B6E8A */ --flow-dot-bg: var(--surface-base); --flow-dot-border: color-mix(in srgb, var(--ink-subtle) 48%, white); --flow-dot-text: var(--ink-subtle); /* 通過済みドット C228: #79aedd / #6fa7da / #4f84b7 */ --flow-past-src: color-mix(in srgb, var(--brand-primary) 45%, var(--brand-primary-bright)); --flow-past-bg: color-mix(in srgb, var(--flow-past-src) 60%, white); --flow-past-border: color-mix(in srgb, var(--flow-past-src) 64%, white); --flow-past-text: color-mix(in srgb, color-mix(in srgb, var(--flow-past-src) 72%, white) 70%, var(--ink-muted)); /* 進行バーの左端 C228: #5f9fd4 */ --flow-progress-from: color-mix(in srgb, var(--flow-past-src) 78%, white); } /* ============================================================ #flow — 2/2 (A): セクション枠・導入・ステージの骨格・9場面と帯 ------------------------------------------------------------ ここのルールは**メディアクエリの外**に置く。元がインラインだったので全幅で効いていたものを、そのまま再現するため。 lp.js が毎フレーム上書きする値（場面の opacity、帯の --flow-band-*、トラックの transform、トラックの height）は、「JSが動く前の初期状態」としてここに持たせている。スクロール位置の計算・カード幅の実測・9場面の判定・sticky の高さには触れていない。 ============================================================ */ #flow{ --flow-veil: color-mix(in srgb, var(--ink-strong) 75%, black); position:relative; padding:var(--sp-section-y) 0 0; background:linear-gradient(170deg, var(--surface-paper) 0%, var(--surface-paper-deep) 100%); } .flow-intro{ max-width:var(--w-content); margin-inline:auto; padding:0 var(--w-gutter); display:flex; flex-direction:column; align-items:center; text-align:center; } /* 上下の余白は既存の !important 指定（PC 42px / SP 16px）が勝つ。ここは保険 */ #flow-track{margin-top:var(--sp-7);} /* 場面は絶対配置で重ね、その場でクロスフェードする（C201） */ #flow .flow-scene-track{position:relative;} #flow .flow-scene{ position:absolute;left:0;top:0;width:100%;height:100%; opacity:0;pointer-events:none;z-index:1; transition:opacity 140ms linear; } /* 場面1だけ、JSが動く前から完成した状態で見えている（C202） */ #flow .flow-scene--lead{opacity:1;pointer-events:auto;z-index:2;} /* 9場面のアクセント。C228の並びは [青,橙,緑,橙,緑,橙,緑,橙,青] */ #flow .flow-scene--brand, #flow .flow-preview-band--brand{--fl-acc:var(--flow-accent-brand);--fl-acc-ink:var(--flow-ink-brand);} #flow .flow-scene--warm, #flow .flow-preview-band--warm{--fl-acc:var(--flow-accent-warm);--fl-acc-ink:var(--flow-ink-warm);} #flow .flow-scene--cool, #flow .flow-preview-band--cool{--fl-acc:var(--flow-accent-cool);--fl-acc-ink:var(--flow-ink-cool);} /* 帯の色。lp.js が同名の変数をインラインで毎フレーム上書きする。淡色は flowMixHex('白', アクセント, 0.70) と同じ配合 */ #flow .flow-scene-band, #flow .flow-preview-band{ --flow-band-strong:var(--fl-acc); --flow-band-ink:var(--fl-acc-ink); --flow-band-base:color-mix(in srgb, var(--fl-acc) 70%, var(--surface-base)); --flow-band-fill:0%; opacity:0; } #flow .flow-scene--lead .flow-scene-band{--flow-band-fill:100%;opacity:1;} #flow .flow-preview-band{transform:translate3d(0,0,0);} /* ============================================================ #flow — 2/2 (B): PCステージの中身場面ごとのアクセントは (A) で付けた --fl-acc を参照するだけにする。 ============================================================ */ #flow .flow-scene-panel{background:color-mix(in srgb, var(--fl-acc) 12%, white);} #flow .flow-stage-copy .flow-kind-tag{ color:var(--fl-acc); border:1px solid color-mix(in srgb, var(--fl-acc) 33%, transparent); } #flow .flow-stage-time{color:var(--fl-acc);} /* 青の場面だけ、時刻をグラデーションで抜く */ #flow .flow-scene--brand .flow-stage-time{ background-image:linear-gradient(135deg, var(--brand-primary-bright) 0%, var(--fl-acc) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } #flow .flow-stage-fact-dot{background:var(--fl-acc);} #flow .flow-photo-tag{ font-family:var(--font-display); font-weight:var(--fw-black); font-size:var(--fs-label); line-height:var(--lh-flat); letter-spacing:0.18em; color:var(--ink-invert); background:var(--fl-acc); border-radius:var(--r-pill); padding:7px 15px; } #flow .flow-stage-photo-img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block; } /* --- タイムライン --------------------------------------------- ドットの径・色・文字サイズは lp.js が毎フレーム書く。ここに置くのは「JSが動く前 / SPで動かないとき」の初期状態。 ------------------------------------------------------------ */ #flow .flow-timeline-track{cursor:pointer;touch-action:none;} #flow .flow-timeline-progress{ width:0%; opacity:1; background:linear-gradient(90deg, var(--flow-progress-from) 0%, var(--flow-accent-brand) 100%); } #flow .flow-timeline-dot{ width:9px;height:9px; background:var(--flow-dot-bg); border:2px solid var(--flow-dot-border); box-shadow:0 0 0 3px color-mix(in srgb, var(--surface-base) 82%, transparent); } #flow .flow-timeline-time{ font-weight:var(--fw-bold); font-size:var(--fs-label); letter-spacing:var(--ls-normal); color:var(--flow-dot-text); } /* 場面1に対応する先頭だけ、到達済みの見た目で始まる */ #flow .flow-timeline-step:first-child .flow-timeline-dot{ width:16px;height:16px; background:var(--flow-accent-brand); border-color:var(--flow-accent-brand); box-shadow:0 0 0 5px color-mix(in srgb, var(--flow-accent-brand) 15%, transparent); } #flow .flow-timeline-step:first-child .flow-timeline-time{ font-weight:var(--fw-black); font-size:var(--fs-lead); color:var(--flow-accent-brand); } /* 写真の切り出し位置（内容ごとの指定。PC・SPカルーセルで共用） */ #flow .flow-crop-1{object-position:center 46%;} #flow .flow-crop-2{object-position:center center;} #flow .flow-crop-3{object-position:38% 42%;} #flow .flow-crop-4{object-position:center 40%;} #flow .flow-crop-5{object-position:center 30%;} #flow .flow-crop-6{object-position:32% 28%;} #flow .flow-crop-7{object-position:center 45%;} #flow .flow-crop-8{object-position:center 34%;} /* ============================================================ #flow — 2/2 (C): SPカルーセル（.flow-mobile 一式）表示切替（display）は lp.js と既存のメディアクエリが持つ。ここではカード1枚ぶんの見た目だけをトークンで組み直す。 ============================================================ */ #flow .flow-mobile{ display:none; /* 899.98px以下で !important により block になる */ margin-top:var(--sp-5); padding:0 var(--w-gutter-sp) var(--sp-2); } #flow .fc-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);} #flow .fc-head-left{display:flex;align-items:baseline;gap:var(--sp-3);} #flow .fc-label{ font-family:var(--font-display);font-weight:var(--fw-black); font-size:var(--fs-label);letter-spacing:0.16em;color:var(--ink-subtle); } #flow .fc-num{ font-family:var(--font-display);font-weight:var(--fw-black); font-size:var(--fs-body);letter-spacing:var(--ls-heading);color:var(--ink-strong); } #flow .fc-cur{ font-family:var(--font-display);font-weight:var(--fw-black); font-size:var(--fs-lead);line-height:var(--lh-flat);color:var(--flow-accent-brand); } #flow .fc-bartrack{ margin-top:var(--sp-3);height:3px;border-radius:2px;overflow:hidden; background:color-mix(in srgb, var(--ink-strong) 10%, transparent); } /* 幅は lp.js が書く */ #flow .fc-bar{ display:block;height:100%;width:11%;border-radius:2px; background:linear-gradient(90deg, var(--flow-accent-brand), var(--brand-accent-warm)); transition:width .3s; } #flow .flow-car-viewport{ display:flex;align-items:flex-start; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory; margin-top:var(--sp-4); border-radius:var(--r-md); outline-offset:3px; } #flow .flow-car-slide{ flex:0 0 100%;min-width:100%;box-sizing:border-box; scroll-snap-align:start;scroll-snap-stop:always; } /* 9枚のアクセント。並びはPCの9場面と同じ */ #flow .flow-car-slide--brand{--fl-acc:var(--flow-accent-brand);} #flow .flow-car-slide--warm{--fl-acc:var(--brand-accent-warm);} #flow .flow-car-slide--cool{--fl-acc:var(--brand-accent-cool);} #flow .fc-card{ background:var(--surface-base); border:1px solid color-mix(in srgb, var(--ink-strong) 10%, transparent); border-radius:var(--r-md); box-shadow:0 10px 26px -22px color-mix(in srgb, var(--ink-strong) 40%, transparent); overflow:hidden; } #flow .fc-media{position:relative;aspect-ratio:16 / 9;background:var(--surface-sunken);} #flow .fc-img{width:100%;height:100%;object-fit:cover;display:block;} #flow .fc-kind{ position:absolute;left:12px;top:12px; display:inline-flex;align-items:center; font-family:var(--font-display);font-weight:var(--fw-black); font-size:var(--fs-fine);letter-spacing:0.14em; color:var(--fl-acc); background:color-mix(in srgb, var(--surface-base) 94%, transparent); border-radius:var(--r-pill); padding:var(--sp-1) var(--sp-3); } #flow .fc-timelabel{ position:absolute;right:14px;bottom:12px; font-family:var(--font-display);font-weight:var(--fw-black); font-size:var(--fs-h3);line-height:var(--lh-flat);letter-spacing:var(--ls-normal); color:var(--ink-invert); text-shadow:0 1px 10px color-mix(in srgb, black 50%, transparent); } #flow .fc-body{padding:var(--sp-4);} #flow .fc-range{ font-size:var(--fs-caption);font-weight:var(--fw-bold); letter-spacing:0.06em;color:var(--ink-subtle); } #flow .fc-title{ margin:var(--sp-2) 0 0; font-size:var(--fs-h3); /* SPトークンで22px。C228と同値 */ font-weight:var(--fw-black); line-height:var(--lh-snug); letter-spacing:var(--ls-normal); color:var(--ink-strong); } #flow .fc-paras{margin:var(--sp-3) 0 0;display:flex;flex-direction:column;gap:var(--sp-3);} #flow .fc-p{ margin:0;font-size:var(--fs-body);font-weight:var(--fw-normal); line-height:var(--lh-normal);letter-spacing:0.02em;color:var(--ink-muted); } #flow .fc-facts{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);} #flow .fc-fact{display:flex;align-items:flex-start;gap:var(--sp-3);} #flow .fc-dot{ flex:0 0 auto;margin-top:9px;width:5px;height:5px;border-radius:50%; background:var(--fl-acc); } #flow .fc-text{ font-size:var(--fs-body-s);font-weight:var(--fw-bold); line-height:1.7;letter-spacing:0.02em;color:var(--ink-subtle); } #flow .fc-nav{display:flex;align-items:center;justify-content:center;gap:var(--sp-5);margin-top:var(--sp-4);} #flow .fc-btn{ width:46px;height:46px;border-radius:50%; border:1px solid color-mix(in srgb, var(--ink-strong) 20%, transparent); background:var(--surface-base); color:var(--ink-strong); display:flex;align-items:center;justify-content:center; cursor:pointer;padding:0; box-shadow:0 4px 12px -8px color-mix(in srgb, var(--ink-strong) 40%, transparent); } #flow .fc-count{ min-width:56px;text-align:center; font-family:var(--font-display);font-weight:var(--fw-black); font-size:var(--fs-caption);letter-spacing:0.06em;color:var(--ink-muted); }