/* * home.css — トップページ専用「ことばの工場」デザイン。 * editorial.css の後に読み込む（--pf-* 変数を再利用）。 * * 方針: * - JS 無効／prefers-reduced-motion では全要素が最終状態で静止表示される * プログレッシブ・エンハンスメント。動きの初期状態は [data-hf-motion="on"] * が に付いたときだけ適用する。 * - 見出しは明朝、余白広め、アクセントは warm/gold の一系統に抑える。 */ .hf { /* .wrap(760px) の外へ広げる工場ステージ幅 */ width: min(1180px, calc(100vw - 2.4rem)); margin-left: 50%; transform: translateX(-50%); color: var(--ink); /* 見出し色：明時は濃紺、暗時は明色に反転（--pf-navy-deep は暗い面色なので不可） */ --hf-headline: var(--pf-navy-deep); } :root[data-theme="dark"] .hf { --hf-headline: #e9eefc; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] .hf { --hf-headline: #e9eefc; } } .hf * , .hf *::before, .hf *::after { box-sizing: border-box; } .hf > * + * { margin-top: clamp(5rem, 11vw, 10rem); } .hf h1, .hf h2, .hf h3 { border: 0; padding: 0; } .hf-eyebrow { display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem; color: var(--pf-warm); font-family: var(--sans); font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; } .hf-eyebrow::before { content: ""; width: 1.8rem; height: 2px; background: currentColor; } /* ─────────────────────────────────────────────── ページを貫く一本の細い線（レール／詩の一行） .hf の外・.wrap 直下に置くので transform 祖先が無く fixed が効く ─────────────────────────────────────────────── */ .hf-rail { position: fixed; top: 0; left: max(1.15rem, calc(50vw - 588px)); width: 1px; height: 100vh; z-index: 2; pointer-events: none; } .hf-rail-track { position: absolute; inset: 0; width: 1px; background: linear-gradient( to bottom, transparent, color-mix(in srgb, var(--ink) 14%, transparent) 12%, color-mix(in srgb, var(--ink) 14%, transparent) 88%, transparent ); } .hf-rail-fill { position: absolute; top: 0; left: 0; width: 1px; height: 0; background: linear-gradient(to bottom, transparent, var(--pf-warm)); } .hf-rail-fill::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, 50%); background: var(--pf-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pf-gold) 22%, transparent); } @media (max-width: 900px) { .hf-rail { display: none; } } /* ═══════════════════════════════════════════════ 0. サイトヘッダー — アニメーション中は不要 動き有効時はヘッダーを fixed の透明オーバーレイにして伏せ、 ヒーローが 100svh を丸ごと使う。コピーが組み上がったら （html[data-hf-header="in"]）ヘッダーが静かに降りてくる。 スクロール中（html.hf-header-solid）は他ページの sticky ヘッダーと 同じ見た目に面を張り、可読性を保つ。 JS無効・動き抑制時はこのブロックが効かず、通常のヘッダーのまま。 ═══════════════════════════════════════════════ */ [data-hf-motion="on"] .site-header { /* 伏せるのは即時（transition なし）。出現側だけアニメーションさせ、 ロード直後にヘッダーがフェードアウトして見える現象を避ける。 */ position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; border-bottom-color: transparent; box-shadow: none; transform: translateY(-14px); opacity: 0; pointer-events: none; } [data-hf-motion="on"] .site-header::after { opacity: 0; } [data-hf-motion="on"] .site-header .site-nav { background: transparent; border-top-color: transparent; } [data-hf-motion="on"][data-hf-header="in"] .site-header { transform: none; opacity: 1; pointer-events: auto; transition: opacity .9s ease .15s, transform .9s ease .15s, background-color .35s ease, border-color .35s ease, box-shadow .35s ease; } [data-hf-motion="on"][data-hf-header="in"] .site-header::after { transition: opacity .35s ease; } [data-hf-motion="on"].hf-header-solid .site-header { background: var(--bg-card); border-bottom-color: var(--line); box-shadow: 0 8px 28px rgba(25, 32, 49, .06); } [data-hf-motion="on"].hf-header-solid .site-header::after { opacity: 1; } /* モバイルで開いたメニューは、背後の動く語と重ならないよう面を張る */ [data-hf-motion="on"] body.nav-open .site-header { background: var(--bg-card); } /* ═══════════════════════════════════════════════ 1. ファーストビュー（工場ステージ） ═══════════════════════════════════════════════ */ .hf-hero { /* .hf（さらにその親 .wrap）の幅制限を無視し、画面いっぱいに広げる。 .hf・.wrap のどちらもビューポート中央に揃っているため、この古典的な ブレイクアウト手法は画面幅にかかわらず正確に端まで届く。 */ position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; display: flex; align-items: center; justify-content: center; /* ページを開いた瞬間、ヘッダ分を除いた「残りの画面いっぱい」を使う。 JSがヘッダ実測高を --hf-header-h に入れる。JS無効時は 100svh（丸ごと1画面）。 */ min-height: 100svh; min-height: calc(100svh - var(--hf-header-h, 0px)); /* .site-main の固定 top padding(2.5rem)を打ち消し、ヘッダ直下にぴったり接する。 */ margin-top: -2.5rem !important; padding: clamp(2rem, 6vw, 5rem) clamp(1.2rem, 4vw, 3.5rem); overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 50% 8%, color-mix(in srgb, var(--pf-paper) 42%, var(--bg-card)), var(--bg-card) 62%); } /* 動き有効時はヘッダーがオーバーレイ（フロー外）になるため、丸ごと1画面使う。 出現後のヘッダーとヒーロー冒頭（アイブロウ）が重ならないよう上を空ける。 */ [data-hf-motion="on"] .hf-hero { min-height: 100svh; padding-top: max(clamp(2rem, 6vw, 5rem), calc(var(--hf-header-h, 0px) + .5rem)); } /* 巨大な「詩」— 工場の刻印 */ .hf-hero::before { content: "詩"; position: absolute; right: clamp(-2rem, -1vw, 1rem); bottom: -5rem; z-index: 0; color: color-mix(in srgb, var(--pf-warm) 6%, transparent); font-family: var(--serif); font-size: clamp(14rem, 30vw, 30rem); font-weight: 700; line-height: 1; pointer-events: none; user-select: none; } /* 動きのステージ（レール・機械群・漂う語） */ .hf-stage { position: absolute; inset: 0; z-index: 1; overflow: hidden; } /* 抽象的なレール・整列線の SVG（画面端まで引き伸ばす） */ .hf-rails { position: absolute; inset: 0; width: 100%; height: 100%; color: color-mix(in srgb, var(--accent) 26%, transparent); } .hf-rails .hf-guide { fill: none; stroke: currentColor; stroke-width: 1; opacity: .35; } /* 動きが許可されたときだけレールを描き込む */ [data-hf-motion="on"] .hf-rails .hf-guide { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); opacity: 0; } [data-hf-motion="on"] .hf-hero.is-run .hf-rails .hf-guide { opacity: .32; stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s ease .1s, opacity .9s ease .1s; } /* ── 機械群（歯車・搬送ベルト・ロボットアーム）────────────────── すべて細い線画。縦横比を保つ SVG(meet)なので歯車は真円のまま。 線は非スケールで常に 1px 前後を保ち、繊細さを損なわない。 */ .hf-machines { position: absolute; inset: 0; width: 100%; height: 100%; color: color-mix(in srgb, var(--pf-warm) 62%, var(--ink)); opacity: .26; /* 静的（JS無効・reduced）時のおだやかな存在感 */ } .hf-machines line, .hf-machines circle, .hf-machines path, .hf-machines rect { vector-effect: non-scaling-stroke; /* 拡大縮小でも線を細く保つ */ } /* 歯車 */ .hf-gear-ring, .hf-gear-tooth, .hf-gear-spoke, .hf-gear-hub { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; } .hf-gear-hub { opacity: .8; } .hf-gear-spoke { opacity: .6; } /* 搬送ベルト */ .hf-belt-edge { fill: none; stroke: currentColor; stroke-width: 1; opacity: .7; } .hf-belt-surface { fill: none; stroke: currentColor; stroke-width: 1; opacity: .5; stroke-dasharray: 5 11; } .hf-belt-item { fill: none; stroke: currentColor; stroke-width: 1; opacity: .85; transform: translateX(0); } /* ロボットアーム */ .hf-arm-base, .hf-arm-seg, .hf-arm-grip { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .hf-arm-joint { fill: var(--bg-card); stroke: currentColor; stroke-width: 1; } .hf-arm-type { fill: none; stroke: currentColor; stroke-width: 1; } /* 動き有効時：組み上げ開始（is-run）まで伏せ、以後に描き込み＋稼働する */ [data-hf-motion="on"] .hf-machines { opacity: 0; } [data-hf-motion="on"] .hf-hero.is-run .hf-machines { opacity: .3; transition: opacity 1.3s ease .25s; } [data-hf-motion="on"] .hf-hero.is-run .hf-gear { animation: hf-gear-spin var(--gdur, 20s) linear infinite; } [data-hf-motion="on"] .hf-hero.is-run .hf-belt-surface { animation: hf-belt-dash 1.1s linear infinite; } [data-hf-motion="on"] .hf-hero.is-run .hf-belt-item { animation: hf-belt-move 5.4s linear infinite; animation-delay: calc(var(--i, 0) * -1.8s); } [data-hf-motion="on"] .hf-hero.is-run .hf-arm-shoulder { animation: hf-arm-shoulder 6.6s ease-in-out infinite; } [data-hf-motion="on"] .hf-hero.is-run .hf-arm-fore { animation: hf-arm-fore 6.6s ease-in-out infinite; } [data-hf-motion="on"] .hf-hero.is-run .hf-arm-type { animation: hf-arm-type 6.6s ease-in-out infinite; } @keyframes hf-gear-spin { to { transform: rotate(calc(1turn * var(--gdir, 1))); } } @keyframes hf-belt-dash { to { stroke-dashoffset: -16; } } @keyframes hf-belt-move { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: .85; } 82% { opacity: .85; } 100% { transform: translateX(542px); opacity: 0; } } /* 肩と肘がゆっくり屈伸：ベルト端で活字を拾い（下）、中央のコピーへ置く（上） */ @keyframes hf-arm-shoulder { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } } @keyframes hf-arm-fore { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(17deg); } } /* 活字は「拾って運ぶ」あいだ見え、上（コピー）で置くと消える */ @keyframes hf-arm-type { 0%, 8% { opacity: 0; } 20%, 46% { opacity: .9; } 60%,100% { opacity: 0; } } /* 漂う語（JS が生成） */ .hf-word { position: absolute; top: 0; left: 0; font-family: var(--serif); font-weight: 600; color: color-mix(in srgb, var(--accent) 78%, var(--ink)); white-space: nowrap; will-change: transform, opacity; transform: translate3d(0, 0, 0); user-select: none; } .hf-word::after { /* ことばに触れたときの波紋 */ content: ""; position: absolute; inset: 50% auto auto 50%; width: 1.2em; height: 1.2em; border-radius: 50%; border: 1px solid var(--pf-warm); transform: translate(-50%, -50%) scale(.4); opacity: 0; pointer-events: none; } .hf-word.is-touched::after { animation: hf-ripple .7s ease-out; } @keyframes hf-ripple { 0% { opacity: .55; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); } } /* ヒーローの中身 */ .hf-hero-inner { position: relative; z-index: 3; width: 100%; max-width: 40rem; text-align: center; padding: 0 .5rem; } .hf-hero-eyebrow { justify-content: center; color: var(--pf-warm); } .hf-hero-eyebrow::after { content: ""; width: 1.8rem; height: 2px; background: currentColor; } .hf-hero-copy { margin: 0; font-family: var(--serif); font-weight: 700; /* 幅だけでなく画面の高さにも連動させ、コピー4行＋リード＋CTAが 1画面（ファーストビュー）に収まるようにする */ font-size: clamp(2.4rem, min(7.4vw, 8.8svh), 5.4rem); line-height: 1.28; letter-spacing: .01em; color: var(--hf-headline); } .hf-hero-copy .hf-line { display: block; } .hf-hero-copy .hf-ch { display: inline-block; will-change: transform, opacity; transform: translate3d(0, 0, 0); } /* 動き有効時のみ、組み上がる前の散らばり初期状態 */ [data-hf-motion="on"] .hf-hero-copy .hf-ch { opacity: 0; } .hf-hero-lead { max-width: 30rem; margin: 1.1rem auto 0; color: var(--ink-soft); font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.9; } .hf-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.4rem; } .hf-btn { display: inline-flex; align-items: center; min-height: 48px; padding: .7rem 1.5rem; border: 1px solid var(--pf-navy-deep); border-radius: 999px; background: var(--pf-navy-deep); color: #fff !important; font-size: .9rem; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease; } .hf-btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--pf-navy-deep) 22%, transparent); } .hf-btn--ghost { background: transparent; color: var(--ink) !important; border-color: var(--line); } .hf-scroll-hint { position: absolute; left: 50%; bottom: .9rem; z-index: 3; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--ink-soft) !important; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .hf-scroll-hint:hover { text-decoration: none; color: var(--pf-warm) !important; } .hf-scroll-hint span { width: 1px; height: 2.4rem; background: linear-gradient(to bottom, var(--pf-warm), transparent); } [data-hf-motion="on"] .hf-scroll-hint span { animation: hf-hint 2.2s ease-in-out infinite; transform-origin: top; } @keyframes hf-hint { 0%, 100% { transform: scaleY(.4); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } } /* 動き有効時、組み上がる前は補助要素を伏せておく */ [data-hf-motion="on"] [data-hf-after] { opacity: 0; transform: translateY(12px); } [data-hf-motion="on"] .hf-hero.is-assembled [data-hf-after] { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s ease; } [data-hf-motion="on"] .hf-hero.is-assembled .hf-scroll-hint[data-hf-after] { transition-delay: .3s; } /* ═══════════════════════════════════════════════ スクロールで現れる要素（reveal） ═══════════════════════════════════════════════ */ [data-hf-motion="on"] [data-reveal] { opacity: 0; transform: translateY(30px); } [data-hf-motion="on"] [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); } [data-hf-motion="on"] [data-reveal][data-reveal-delay="1"].is-in { transition-delay: .12s; } [data-hf-motion="on"] [data-reveal][data-reveal-delay="2"].is-in { transition-delay: .24s; } [data-hf-motion="on"] [data-reveal][data-reveal-delay="3"].is-in { transition-delay: .36s; } /* ═══════════════════════════════════════════════ 2. 三つの大セクション（読む・語る / つくる・届ける / 調べる・ひらく） ═══════════════════════════════════════════════ */ .hf-features { display: grid; gap: clamp(4rem, 8vw, 7rem); } .hf-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .hf-feature--flip .hf-feature-visual { order: -1; } .hf-feature-num { display: block; font-family: var(--serif); font-size: clamp(3.4rem, 8vw, 6rem); font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--pf-warm) 90%, var(--ink)); letter-spacing: -.02em; } .hf-feature-body { margin-top: 1.4rem; } .hf-feature h2 { margin: 0 0 1rem; font-family: var(--serif); font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.28; color: var(--hf-headline); } .hf-feature-lead { max-width: 30rem; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.95; } .hf-feature-links { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.5rem; } .hf-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 700; color: var(--accent); } .hf-link::after { content: "→"; transition: transform .2s ease; } .hf-link:hover { text-decoration: none; } .hf-link:hover::after { transform: translateX(4px); } /* 各セクションの抽象ビジュアル */ .hf-visual { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: linear-gradient(150deg, color-mix(in srgb, var(--pf-paper) 40%, var(--bg-card)), var(--bg-card)); box-shadow: var(--pf-shadow-small); } .hf-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* 01: 読む・語る — 重なる本文の行と、読む人の点 */ .hf-visual--read .hf-textline { stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 2; stroke-linecap: round; } .hf-visual--read .hf-reader { fill: var(--pf-warm); } [data-hf-motion="on"] .hf-visual--read.is-in .hf-textline { stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200); animation: hf-line-in 1.1s ease forwards; } [data-hf-motion="on"] .hf-visual--read.is-in .hf-reader { animation: hf-breathe 4s ease-in-out infinite; transform-origin: center; } @keyframes hf-line-in { to { stroke-dashoffset: 0; } } @keyframes hf-breathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } } /* 02: つくる・届ける — 紙片が舞う */ .hf-chip { position: absolute; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-card); font-family: var(--serif); font-size: clamp(.85rem, 1.6vw, 1.05rem); color: var(--hf-headline); box-shadow: var(--pf-shadow-small); } [data-hf-motion="on"] .hf-visual--make.is-in .hf-chip { animation: hf-float 7s ease-in-out infinite; } [data-hf-motion="on"] .hf-visual--make.is-in .hf-chip:nth-child(2) { animation-duration: 8.5s; animation-delay: -1.5s; } [data-hf-motion="on"] .hf-visual--make.is-in .hf-chip:nth-child(3) { animation-duration: 9.5s; animation-delay: -3s; } [data-hf-motion="on"] .hf-visual--make.is-in .hf-chip:nth-child(4) { animation-duration: 8s; animation-delay: -4.2s; } @keyframes hf-float { 0%,100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-14px) rotate(calc(var(--rot, 0deg) + 3deg)); } } /* 03: 調べる・ひらく — 作者/作品/詩集/年代 のネットワーク */ .hf-visual--data .hf-edge { stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1.2; } .hf-visual--data .hf-node { fill: var(--bg-card); stroke: var(--accent); stroke-width: 1.5; } .hf-visual--data .hf-node-label { fill: var(--hf-headline); font-family: var(--serif); font-size: 13px; } [data-hf-motion="on"] .hf-visual--data.is-in .hf-edge { stroke-dasharray: var(--len, 160); stroke-dashoffset: var(--len, 160); animation: hf-line-in 1.3s ease forwards; } [data-hf-motion="on"] .hf-visual--data.is-in .hf-node { animation: hf-pulse 3.6s ease-in-out infinite; transform-origin: center; } @keyframes hf-pulse { 0%,100% { opacity: .8; } 50% { opacity: 1; } } /* データ小要約（詩人チップ） */ .hf-data-note { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; } .hf-data-chip { padding: .25rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-card); font-size: .8rem; color: var(--ink-soft); } .hf-data-chip:hover { color: var(--accent); border-color: var(--accent-soft); text-decoration: none; } /* ═══════════════════════════════════════════════ 3. VISION（静かで強いポスター） ═══════════════════════════════════════════════ */ .hf-vision { position: relative; overflow: hidden; padding: clamp(3.5rem, 9vw, 7rem) clamp(1.6rem, 6vw, 5rem); border-radius: 30px; background: var(--pf-navy-deep); color: #fff; text-align: center; box-shadow: var(--pf-shadow); } .hf-vision::before { content: "言"; position: absolute; left: -2rem; top: -4rem; color: rgba(255,255,255,.05); font-family: var(--serif); font-size: clamp(12rem, 26vw, 26rem); line-height: 1; pointer-events: none; user-select: none; } .hf-vision .hf-eyebrow { color: var(--pf-gold); } .hf-vision h2 { position: relative; max-width: 22em; margin: 0 auto; font-family: var(--serif); font-size: clamp(1.7rem, 4.4vw, 3.1rem); font-weight: 700; line-height: 1.7; color: #fff; } .hf-vision-sub { position: relative; max-width: 34rem; margin: 1.8rem auto 0; color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.9; } .hf-vision-link { position: relative; display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.8rem; color: var(--pf-gold) !important; font-weight: 700; } .hf-vision-link::after { content: "→"; transition: transform .2s ease; } .hf-vision-link:hover { text-decoration: none; } .hf-vision-link:hover::after { transform: translateX(4px); } /* ═══════════════════════════════════════════════ 4. 主要導線カード ═══════════════════════════════════════════════ */ .hf-gateways-head { max-width: 40rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; } .hf-gateways-head .hf-eyebrow { justify-content: center; } .hf-gateways-head h2 { margin: 0; font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--hf-headline); } .hf-gateways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } .hf-gateway { display: flex; flex-direction: column; min-height: 220px; padding: clamp(1.5rem, 3vw, 2.2rem); border: 1px solid var(--line); border-radius: 20px; background: var(--bg-card); color: var(--ink) !important; box-shadow: var(--pf-shadow-small); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .hf-gateway:hover { text-decoration: none; transform: translateY(-4px); border-color: var(--accent-soft); box-shadow: var(--pf-shadow); } .hf-gateway-kicker { color: var(--pf-warm); font-size: .78rem; font-weight: 800; letter-spacing: .12em; } .hf-gateway-title { margin-top: .6rem; font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; color: var(--hf-headline); } .hf-gateway-desc { margin-top: .5rem; color: var(--ink-soft); font-size: .9rem; line-height: 1.8; } .hf-gateway-arrow { margin-top: auto; padding-top: 1.2rem; color: var(--accent); font-weight: 700; font-size: .88rem; } .hf-gateway-arrow::after { content: " →"; display: inline-block; transition: transform .25s ease; } .hf-gateway:hover .hf-gateway-arrow::after { transform: translateX(5px); } /* ═══════════════════════════════════════════════ 5. ページ下部（実用情報・アニメーション控えめ） ═══════════════════════════════════════════════ */ .hf-footer-sections { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .hf-panel-head { margin-bottom: 1.4rem; } .hf-panel-head h2 { margin: 0; font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--hf-headline); } .hf-panel-head p { margin-top: .5rem; color: var(--ink-soft); font-size: .92rem; line-height: 1.8; } .hf-calendar-frame { position: relative; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bg-card); box-shadow: var(--pf-shadow-small); } .hf-calendar-frame iframe { display: block; width: 100%; min-height: 460px; border: 0; } .hf-news .post-list { margin: 0; padding: 0; list-style: none; } .hf-news .post-list li { border-top: 1px solid var(--line); } .hf-news .post-list li:last-child { border-bottom: 1px solid var(--line); } .hf-news .post-list a { display: flex; flex-direction: column; gap: .2rem; padding: .85rem .2rem; color: var(--ink); } .hf-news .post-list a:hover { text-decoration: none; color: var(--accent); } .hf-news .pl-date { font-size: .75rem; color: var(--ink-soft); letter-spacing: .04em; } .hf-news .pl-title { font-size: .96rem; line-height: 1.6; } .hf-news-more { margin-top: 1.2rem; } .hf-news-more a { font-weight: 700; } /* ═══════════════════════════════════════════════ レスポンシブ ═══════════════════════════════════════════════ */ @media (max-width: 820px) { /* 狭幅では .wrap 外へのブレイクアウトをやめ、右あふれを防ぐ */ .hf { width: 100%; margin-left: 0; transform: none; } .hf-feature, .hf-footer-sections { grid-template-columns: 1fr; } .hf-feature--flip .hf-feature-visual { order: 0; } .hf-visual { aspect-ratio: 16 / 10; max-width: 460px; } .hf-gateways { grid-template-columns: 1fr; } } @media (max-width: 720px) { /* 狭い画面では機械群を伏せ、漂う語と整列線だけの静かな画面にする */ .hf-machines { display: none; } } @media (max-width: 520px) { .hf-hero-inner { width: 100%; } .hf-hero-copy .hf-line { display: block; } /* 長いアイブロウは折り返し、装飾線は省いて横あふれを防ぐ */ .hf-hero-eyebrow { flex-wrap: wrap; font-size: .66rem; letter-spacing: .12em; } .hf-hero-eyebrow::before, .hf-hero-eyebrow::after { display: none; } } /* ═══════════════════════════════════════════════ 動きを減らす設定：すべて静止・最終状態 ═══════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { /* 漂う語は JS 生成なので出ない。機械群は動かさず、線画として静かに見せる。 */ .hf-word { display: none; } .hf-scroll-hint span { animation: none; } * { scroll-behavior: auto; } }