/* ========================================================== 土台のスタイル。ここには「デザイン」を書かない。 入っているのは、次の3つだけ。 1. 色・フォント・角丸の変数(:root)。brief.md の「デザイン方針」から setup-site が書く 2. 最小限の下地(box-sizing・body・画像のはみ出し防止・読み上げ専用の文字) 3. 部品(ギャラリー・キービジュアル・プロフィール(立ち絵とカード)・拡大表示・メニュー・スクロール演出)が 動くために必要な指定。script.js と assets/js/key-visual.js が、この形を前提に計算する 依頼者ごとの見た目は、すべて custom.css に書く(このファイルは、テンプレートの修正で上書きされる)。 ========================================================== */ :root { --bg: #fdf7f0; --surface: #ffffff; --ink: #3b2a1f; --muted: #76604f; --line: #d0d7de; /* 文字色としても使うので、--bg / --surface の上で WCAG AA (4.5:1) を満たす濃さにしてある。 明るい色に変えるときは、setup-site の palette.mjs で検査する */ --accent: #a75312; --accent-soft: #f6eee7; --accent-hover: #8e470f; /* 主色ボタンのホバー。--accent-soft と共に、主色から palette.mjs が計算した値(テストで一致を検査する) */ --on-accent: #ffffff; --font-jp: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif; --radius: 16px; --shadow: 0 1px 2px rgba(31,35,40,.06), 0 4px 14px rgba(31,35,40,.06); --maxw: 1080px; } /* ---------- 下地 ---------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-jp); line-height: 1.8; } img { max-width: 100%; } /* 日本語の折り返し: 見出しや箇条書きで、最後の1文字だけ次の行に落ちるのを防ぐ。 word-break: auto-phrase は文節の切れ目で折り返す(lang="ja" が前提)。対応していないブラウザでは無視され、今までどおり折り返す。 :where で詳細度を 0 にしてあるので、custom.css で同じ要素に指定すれば、そちらが勝つ。 ただし要素に直接当てているので、親に書いた word-break(keep-all など)は、ここに挙げた要素には継承されない。変えたいときは、要素に直接書く。 Why not: text-wrap: pretty(まとめて書く形)は、折り返すかどうか(text-wrap-mode)まで wrap に戻し、親の white-space: nowrap を打ち消す。 折り返し方だけを変える text-wrap-style を使う。長い段落(p)に auto-phrase を当てると、行末の凹凸が大きくなるので、短い文の要素だけにする */ :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption) { text-wrap-style: pretty; } :where(h1, h2, h3, h4, h5, h6, li, dt, dd, figcaption, .tachie-credit, .design-credit) { word-break: auto-phrase; } /* 読み上げだけに使う文字(画面には出さない) */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- 部品: キービジュアル(assets/js/key-visual.js) ---------- */ /* 横に並べて、1枚ずつ止める。aspect-ratio は、1枚目の画像の実寸に setup-site が合わせる */ .kv { position: relative; aspect-ratio: 900 / 1200; overflow: hidden; } .kv-track { position: absolute; inset: 0; display: flex; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; } .kv-track::-webkit-scrollbar { display: none; } .kv-slide { position: relative; flex: 0 0 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; } /* 縦横比が違う画像は、切り抜かず全体を見せる。余白は、下に敷いたぼかし画像(.kv-bg)が埋める */ .kv-slide img { position: relative; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; } .kv-slide .kv-bg { position: absolute; inset: 0; object-fit: cover; filter: blur(22px); transform: scale(1.2); /* ぼかしで縁が薄くなる分を、枠の外へ追い出す */ } /* 2枚以上のときだけ JS が付ける。touch-action は指定しない(pan-y にすると、横スワイプがブラウザに取られる) */ .kv-track.is-carousel { cursor: grab; } .kv-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } .kv-controls[hidden] { display: none; } /* 操作の置き場所(data-kv-slot)は、1枚だけのとき・JS が動かないときは空のまま残る。枠や背景を付けても見えないよう隠す */ [data-kv-slot]:empty { display: none; } /* 押せる範囲: 見た目の大きさは変えずに、指で押せる範囲を縦 44px まで広げる(見えない ::after を当たり判定にする)。 形を描くのに ::after を使わない(使うと、この当たり判定と取り合う。::before は自由に使ってよい)。 ドットの横は、間隔の半分(--kv-hit-x、既定 4px)までしか広げない。広げすぎると隣のドットと範囲が重なり、 押したのと違うドットが反応する。ドットの間隔を広げたら、custom.css で --kv-hit-x を間隔の半分にしてよい */ .kv-dot, .kv-nav { position: relative; } .kv-dot::after, .kv-nav::after { content: ""; position: absolute; top: 50%; translate: 0 -50%; height: max(100%, 44px); } .kv-dot::after { left: calc(var(--kv-hit-x, 4px) * -1); right: calc(var(--kv-hit-x, 4px) * -1); } .kv-nav::after { left: 50%; width: max(100%, 44px); translate: -50% -50%; } /* ---------- 部品: ギャラリー(script.js) ---------- */ /* columns(段組み)だと中身が縦に流れ、新しい順に並べても読み順が変わる。 grid で左から右へ並べ、段の高さの差は script.js が grid-row-end: span で詰める (1行 = 1px として数えるので、grid-auto-rows: 1px は変えない) */ .gallery, .works { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: 1px; column-gap: 22px; row-gap: 0; align-items: start; /* 高さを測る前に、行の高さへ引き伸ばされないように */ } /* 区分けしたギャラリー: 掲載0件の区分は、script.js が hidden にする。custom.css で display を付けても隠れるように */ .gallery-section[hidden] { display: none; } .art { position: relative; margin: 0; } .art button { display: block; width: 100%; padding: 0; cursor: zoom-in; border: 0; background: none; } .art img { width: 100%; height: auto; } /* ---------- 部品: 作品一覧(本人の作品。script.js) ---------- */ /* 並べ方はギャラリーと同じ(上の .works)。作品名と一言は、縦に積む。 規則は部品の目印(#works-grid・#voice-list・.commission-*)の下に限る。依頼者の index.html が同じ名前のクラス (.status・.contact など)を別の用途で使っていても、テンプレートの修正を取り込んだだけで配置が変わらないように */ .works .work-caption { display: grid; gap: 2px; margin-top: 8px; } .works .work-note { font-size: .85em; } /* ---------- 部品: ボイスの見本(script.js) ---------- */ /* 1本 = 1行。再生の部品(