/* ========================================================================== konst - Main Stylesheet Inspired by bookluck.jp — visual rhythm, generous space, poetic tone ========================================================================== */ :root { /* ブランド緑 #009868 (white 背景に対し 3.13:1)。 WCAG A 運用 (テキストコントラスト基準なし) でブランド色を保ち、 AA 以上を必要とする低視力ユーザーは画面右下の Color トグルから 黒モード (#000, 21:1 AAA) に切替可能。 */ --color-text: #009868; --color-text-light: #009868; --color-text-muted: #009868; --color-bg: #fff; --color-bg-warm: #fff; --color-bg-accent: #f0f0ee; --color-green: #009868; --color-green-light: #e5f5ef; --color-border: #c0e0d2; } /* ========================================================================== COLOR MODE TOGGLE — 色覚配慮: 緑 (#009868) → 黒 (#000) の切替 に .color-mode-mono が付いている間、緑系変数を黒系に上書きする。 状態は localStorage('konst-color-mode') に保存。 ========================================================================== */ html.color-mode-mono { --color-text: #000; --color-text-light: #1a1a1a; --color-text-muted: #444; --color-green: #000; --color-green-light: #f1f1f1; --color-border: #d0d0d0; /* 無彩色のごく薄いグレー (純白との差は最小限に) */ --color-bg: #fafafa; --color-bg-warm: #fafafa; --color-bg-accent: #f0f0f0; } /* .site-header は rgba(255,255,255,0.92) がハードコードされているため mono 時だけ薄グレーに差し替え (backdrop-filter も維持) */ html.color-mode-mono .site-header::before { background: rgba(250, 250, 250, 0.92); } /* logo-green.svg は fill="#009868" がハードコードされているため、 filter: brightness(0) で黒に転換。ヘッダ nav とフロントページ hero の両方を対象 */ html.color-mode-mono .site-logo-img, html.color-mode-mono .opening-logo { filter: brightness(0); } /* 切替トグル: 緑/黒 の 2 色スウォッチを横並びに並べた segmented control。 navbar の中央線と垂直中心を揃えつつ、Contact の外側 (nav の右パディング内) に置く。 Contact 右端まで 48px の gutter しかないため、ボタン幅を抑えて可能な限り余白を確保する */ .color-toggle { position: fixed; /* 親指が届きやすい位置。iPhone/iPad のホームインジケーターと被らないよう safe-area を加算。 footer 出現時は JS が更に上へ追従する。 */ bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); right: var(--px); /* navbar 右パディングと揃える */ z-index: 1100; transition: bottom 0.25s ease, opacity 0.3s ease; display: flex; align-items: center; /* 選択中 swatch を上下にはみ出させるため stretch を解除 */ padding: 0; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--color-text); /* overflow: hidden を外し、選択中 swatch を枠の上下に突き出させる */ } /* "Color" キャプション (button): 何のためのコントロールか初見でも分かるように。 左に目アイコンを添える。 クリックで折り畳み <-> 展開をトグルする (.is-expanded class)。 WCAG 2.5.5 AAA: hit area を 44x44 以上確保する。 */ .color-toggle-label { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0 0.6rem 0 0.55rem; min-height: 44px; font-family: var(--font-en); font-weight: var(--en-weight); font-size: 0.875rem; letter-spacing: var(--en-spacing); color: var(--color-text); background: transparent; border: 0; cursor: pointer; user-select: none; -webkit-appearance: none; appearance: none; } .color-toggle-label:hover { opacity: 0.7; } .color-toggle-icon { flex-shrink: 0; display: block; } /* 折り畳み (デフォルト): スウォッチと "Color" テキストを隠し、 目アイコンだけ表示してコンテンツ閲覧を妨げない */ .color-toggle:not(.is-expanded) .color-toggle-option, .color-toggle:not(.is-expanded) .color-toggle-label-text { display: none; } .color-toggle:not(.is-expanded) .color-toggle-label { /* 折り畳み状態でも 44x44 の hit area を確保するため min-width を追加 */ padding: 0.5rem 0.6rem; min-width: 44px; justify-content: center; } @media (max-width: 600px) { .color-toggle-label { font-size: 0.875rem; padding: 0 0.75rem 0 0.65rem; } /* モバイル時は CSS 側で右下固定 (JS は footer 追従計算を無効化する)。 iOS のホームインジケーター領域に被らないよう safe-area を加算。 */ .color-toggle { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); } } /* WCAG 2.5.5 AAA 準拠: 各ボタンの hit area を 44x44 確保。 見た目の色ブロックは内側 .color-toggle-swatch に分離し小さく保つ */ .color-toggle-option { position: relative; width: 44px; height: 44px; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; box-sizing: border-box; transition: opacity 0.2s ease; -webkit-appearance: none; appearance: none; } .color-toggle-option:not(.is-selected) { opacity: 0.3; } .color-toggle-option.is-selected { opacity: 1; } .color-toggle-option:hover { opacity: 0.65; } .color-toggle-option.is-selected:hover { opacity: 1; } .color-toggle-option:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; z-index: 1; } /* 内側 swatch: 視覚的な色ブロック (8x18) */ .color-toggle-swatch { display: block; width: 8px; height: 18px; transition: height 0.2s ease; } .color-toggle-option[data-mode="green"] .color-toggle-swatch { background: #009868; } .color-toggle-option[data-mode="mono"] .color-toggle-swatch { background: #000; } /* 選択中 swatch をすこし大きくしてタブ感を出す */ .color-toggle-option.is-selected .color-toggle-swatch { height: 32px; } @media (max-width: 600px) { /* スマホ: コンテンツ表示エリアを侵食しないよう "Color" 文字を非表示にして 横幅を圧縮。アイコン + 2 swatches だけ残す。 hit area は WCAG 2.5.5 AAA の 44x44 を維持し、見た目の swatch だけ小さく保つ。 位置は右下角に固定 (footer 追従の JS は desktop のみ動作) */ .color-toggle { right: 1rem; bottom: 1rem; } .color-toggle-swatch { width: 10px; height: 18px; } .color-toggle-label-text { display: none; } .color-toggle-label { padding: 0 0.5rem; min-width: 44px; justify-content: center; } } /* 初回訪問時のワンショット吹き出し。色切替に気付いてもらうための導線。 表示は localStorage で 1 回のみ。タップで即消し、5 秒で自動フェードアウト。 親 .color-toggle が 44px 幅なので width:max-content で内容分だけ広げる。 */ .color-toggle-tip { position: absolute; bottom: calc(100% + 10px); right: 0; width: max-content; max-width: min(calc(100vw - 2rem), 260px); padding: 0.5rem 0.75rem; background: rgba(30, 30, 30, 0.92); color: #fff; font-family: var(--font-body); font-size: 0.75rem; line-height: 1.5; border-radius: 3px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); white-space: normal; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s ease; z-index: 1101; user-select: none; } .color-toggle-tip.is-visible { opacity: 1; transform: translateY(0); } .color-toggle-tip::after { content: ''; position: absolute; bottom: -5px; right: 20px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid rgba(30, 30, 30, 0.92); } @media (prefers-reduced-motion: reduce) { .color-toggle-tip { transition: opacity 0.2s linear; transform: none; } .color-toggle-tip.is-visible { transform: none; } } :root { /* ===== システムフォント版 (Google Fonts 撤去テスト) ===== macOS/iOS: Hiragino Sans / Hiragino Mincho ProN (日本語最高品質) Windows: Yu Gothic / Yu Mincho (Meiryo は古い Windows 用 fallback) Android: Noto Sans JP / Noto Serif CJK JP (OS 同梱) これで Google Fonts 依存を撤去でき、LCP も大きく改善するはず。 */ --font-body: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', YuGothic, Meiryo, 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-heading: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', YuGothic, Meiryo, Helvetica, Arial, sans-serif; --font-serif: 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'YuMincho', 'Yu Mincho', 'Noto Serif JP', 'MS Mincho', serif; /* --font-en は英字主体のラベル / メタ / ボタン類に使う。 Helvetica 系は日本語を持たないので、混在したときの日本語 fallback として Hiragino Sans / Yu Gothic 等の日本語ゴシックを明示。これがないと OS 任せ で Hiragino Mincho に落ちるケースがある。 */ --font-en: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', YuGothic, Meiryo, sans-serif; --en-weight: 500; --en-spacing: 0.12em; --ease: 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); --space-section: clamp(5rem, 12vw, 10rem); --space-block: clamp(3rem, 8vw, 6rem); --px: clamp(1.25rem, 5vw, 3rem); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { /* サイト全体の日本語デフォルト = 明朝体 (Noto Serif JP)。 ボタン / 記事リスト / 画像キャプション / name-host チップ等は 個別の selector で var(--font-en) または var(--font-heading) で ゴシックに上書きする */ font-family: var(--font-serif); font-weight: 400; font-size: clamp(15px, 1.1vw + 10px, 17px); line-height: 2.1; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* グローバル figcaption は常にゴシック (画像キャプション = ユーザー要件) */ figcaption { font-family: var(--font-en); } a { color: inherit; text-decoration: none; transition: opacity var(--ease); } a:hover { opacity: 0.55; color: inherit; } img { max-width: 100%; height: auto; display: block; } /* ---------- Typography ---------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; line-height: 1.4; } .section-label { font-family: var(--font-en); font-size: clamp(0.9rem, 1.2vw, 1.1rem); font-weight: var(--en-weight); letter-spacing: var(--en-spacing); color: var(--color-text-muted); margin-bottom: var(--space-block); } .link-arrow { font-family: var(--font-en); font-size: 0.9rem; font-weight: var(--en-weight); letter-spacing: var(--en-spacing); display: inline-block; padding-bottom: 2px; border-bottom: 1px solid var(--color-border); transition: border-color var(--ease); } .link-arrow:hover { border-bottom-color: var(--color-text); opacity: 1; } /* ---------- Header ---------- */ /* backdrop-filter は ::before に分離。.site-header 本体に掛けると position:fixed 子孫 (モバイルの .navbar-collapse.show) の containing block がヘッダに縮退し、 フルスクリーンメニューが上端ストリップに潰れる (CSS 仕様)。 */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } .site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* On front page, hide header initially, show on scroll */ /* ヘッダーは PC / iPad / iPhone いずれでも常時表示する。 以前ホーム時のみ initial-hidden → スクロール後フェードインする挙動があったが、 モバイル/タブレットで最初に「メニューが見えない」という混乱を招くため撤廃。 */ /* ホームページだけヘッダロゴとヒーロー中央のロゴが重複して見えるため、 ヒーローが画面内にある間はヘッダ側のロゴ (.navbar-brand) をフェードアウトさせる。 ハンバーガー / nav リンクは常時表示のまま (JS で body.home.opening-scrolled を切替)。 */ body.home .site-header .navbar-brand { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } body.home.opening-scrolled .site-header .navbar-brand { opacity: 1; pointer-events: auto; } .site-header .navbar { padding: 1.1rem 0; } .site-logo-img { height: 22px; width: auto; } .navbar-brand:hover { opacity: 1; } .nav-link { font-family: var(--font-en) !important; font-size: 0.9rem !important; font-weight: var(--en-weight); letter-spacing: var(--en-spacing); color: var(--color-text) !important; /* WCAG 2.5.5 準拠: 24×24 CSS px 以上の hit area。 font-size 0.9rem (14.4px) + vertical padding 0.6rem × 2 = 33.6px 確保。 */ padding: 0.6rem 0 !important; } .nav-link:hover { opacity: 0.45; } /* disclosure 親項目 (href="#" / aria-haspopup) はリンクではなくカテゴリラベルなので、 "クリックで遷移できそう" と誤解させる hover フィードバックを無効化。 カーソルもデフォルトに戻し「ここは押しても行き先なし」と視覚で示す。 */ .nav-link[aria-haspopup="true"][href="#"] { cursor: default; } .nav-link[aria-haspopup="true"][href="#"]:hover, .nav-link[aria-haspopup="true"][href="#"]:focus { opacity: 1; } /* 現在ページの nav リンク: 認知障害・スクリーンリーダー両対応で aria-current + 視覚的下線で「今ここ」を明示 */ .nav-link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; } /* Contact (緑塗り) は下線が背景に埋もれるので白の inset shadow で代替 */ .navbar-nav .nav-item a.nav-link[href*="/contact"][aria-current="page"] { text-decoration: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); } .navbar-toggler:focus { box-shadow: none; } /* ---------- Contact CTA button in header nav ---------- */ .navbar-nav { align-items: center; } .navbar-nav .nav-item a.nav-link[href*="/contact"] { background: var(--color-green); color: #fff !important; padding: 0.4rem 1.1rem !important; border-radius: 2px; line-height: 1; transition: opacity var(--ease); } .navbar-nav .nav-item a.nav-link[href*="/contact"]:hover { opacity: 0.8; } /* ========================================================================== OPENING — type-driven, no hero image ========================================================================== */ .opening { background: var(--color-bg); padding: clamp(8rem, 22vh, 16rem) var(--px) clamp(5rem, 14vh, 12rem); padding-left: clamp(3rem, 10vw, 12rem); min-height: 85svh; display: flex; flex-direction: column; justify-content: center; } .opening-logo { width: clamp(200px, 40vw, 400px); height: auto; margin-bottom: clamp(2rem, 6vw, 5rem); } .opening-headline { font-family: var(--font-serif); font-size: clamp(1.8rem, 4.5vw + 4px, 3.4rem); font-weight: 400; line-height: 2; letter-spacing: 0.04em; margin-bottom: clamp(2rem, 6vw, 4.5rem); /* 日本語見出しの禁則処理: 句読点が行頭に来ないように (CJK ブラウザ標準挙動を明示) */ line-break: strict; /* 横スクロールを絶対に起こさないため、幅を超える単語 (英字のブランド名等) は強制改行可。 */ overflow-wrap: anywhere; /* iPhone のアクセシビリティで「さらに大きな文字」を有効にしたユーザー向けに、 水平オーバーフローの保険を噛ませる。 */ max-width: 100%; } .opening-sub { font-family: var(--font-en); font-size: clamp(1.2rem, 2.5vw + 4px, 1.8rem); font-weight: var(--en-weight); letter-spacing: var(--en-spacing); line-height: 1.8; color: var(--color-text); max-width: 600px; margin-top: clamp(1.5rem, 4vw, 3rem); } /* ========================================================================== NARRATIVE (bookluck-style flowing text blocks) ========================================================================== */ .narrative { padding: var(--space-section) var(--px); } .narrative--closing { padding-top: clamp(5rem, 12vw, 10rem); padding-bottom: clamp(5rem, 12vw, 10rem); } .narrative-text { max-width: 560px; } /* 404 / 検索結果 0 件など、本文を中央寄せにしたい場面で使う modifier */ .narrative-text--center { text-align: center; } /* 404 内の「Home / Works / News」など補助リンク行に使う上余白 */ .narrative-text-actions { margin-top: 1.5rem; } .narrative-text p { font-family: var(--font-serif); font-size: clamp(1.2rem, 2vw + 4px, 1.6rem); line-height: 2.6; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); letter-spacing: 0.03em; } .narrative-en { font-family: var(--font-en) !important; font-weight: var(--en-weight) !important; letter-spacing: var(--en-spacing) !important; font-size: clamp(1.2rem, 2vw + 4px, 1.6rem) !important; line-height: 2 !important; } .narrative-large { font-size: clamp(1.6rem, 3.5vw + 4px, 2.6rem) !important; line-height: 2 !important; font-weight: 400; } /* Random offset positions — like a hand-placed collage */ .narrative:nth-child(odd) { padding-left: clamp(2rem, 8vw, 10rem); } .narrative:nth-child(even) { padding-left: clamp(2rem, 25vw, 30rem); } .narrative--closing { padding-left: clamp(2rem, 15vw, 20rem); } .video-break { overflow: hidden; max-width: 70vw; margin-left: 5vw; } .video-break video { width: 100%; /* iOS Safari は