/* ============================================================ base.css リセット + サイト全体のトークン（変数） ============================================================ */ :root { /* --- タイポグラフィ --------------------------------------- Adobe Fonts の Avenir LT Pro（英数字）+ 秀英ゴシック銀 Std（日本語）。 読み込みは各 HTML の にある Typekit のスクリプト。 Avenir を先頭に置いているのは、英数字だけ Avenir にするため。 Avenir には日本語のグリフが無いので、日本語は自動的に次の 秀英ゴシック銀で描画される（要素ごとの出し分けは不要）。 どちらも読み込めなかった場合のみ sans-serif にフォールバックする。 */ --font-base: "avenir-lt-pro", "dnp-shuei-gothic-gin-std", sans-serif; /* 英数字も含めて秀英ゴシック銀で組みたい箇所（作品詳細ページの本文）用 */ --font-japanese: "avenir-lt-pro", "dnp-shuei-gothic-gin-std", sans-serif; --font-weight-base: 300; /* 通常テキスト（Light） */ /* タイトルのみ 500。Avenir LT Pro には 500 が無いため、 タイトル内の英数字は 400 で描画される（日本語は秀英ゴシック銀の 500）。 */ --font-weight-title: 700; /* タイトル・見出し（Bold） */ --line-height-base: 1.4; /* 140% */ --line-height-body: 2; /* 200%: 本文の行送り */ --letter-spacing-s: 0.02em; /* 2% : private work / 技術・担当領域 */ --letter-spacing-m: 0.05em; /* 5% : 作品タイトル */ --letter-spacing-body: 0.13em; /* 13%: 作品詳細ページの本文 */ --font-size-s: 12px; /* private work / 技術・担当領域 */ --font-size-note: 9px; /* 写真に添える注意書き */ --font-size-title: 18px; /* 一覧の作品タイトル */ --font-size-detail-title: 21px; /* 作品詳細ページ冒頭のメインタイトル */ --font-size-detail-subtitle: 21px; /* 同 サブタイトル（タイトルの下の行） */ --font-size-detail-heading: 21px; /* 本文中の見出し */ --font-size-detail-client: 12px;/* 作品詳細ページ冒頭の client / private work */ --font-size-body: 13px; /* 作品詳細ページの本文 */ --font-size-label: 16px; /* 本文中の小見出し（制作背景 など） */ --work-detail-rule-gap: 60px; /* 罫線の直前・直後 */ --work-detail-label-rule: 0.5px; /* 小見出しの上に引く線 */ --work-detail-label-rule-color: var(--color-muted); --work-detail-label-rule-gap: var(--work-detail-rule-gap); /* 線 → 小見出しの文字 */ --work-detail-label-plain-gap: 36px; /* 線なしの小見出しの上（上の要素 → 小見出し） */ /* --- Works グリッド --------------------------------------- デザイン基準値。ここを変えればレイアウト全体に反映される。 */ /* カードに固定幅・最大幅は持たせない。 幅は「ページ左右余白」と「カード間 gap」から自動的に決まる。 */ --works-page-margin: 60px; /* ページ左右余白（3列 / 2列時） */ --works-grid-column-gap: 27px; /* カード間の横 gap（3列 / 2列時） */ --works-grid-row-gap: 80px; /* カード間の縦 gap（3列 / 2列時） */ --works-grid-row-gap-sp: 48px; /* 1列時の縦 gap */ /* --- WorkCard 内部 ---------------------------------------- */ --work-card-gap: 14px; /* サムネイル → 文字 */ --work-card-text-gap: 8px; /* 文字同士 */ --work-card-thumbnail-ratio: 400 / 270; /* --- 作品詳細ページ ---------------------------------------- */ --work-detail-content-width: 1020px; /* 通常コンテンツ / 本文 / 通常画像の最大幅 */ --work-detail-element-gap: 20px; /* テキストブロック内（小見出し ↔ 本文） */ --work-detail-title-gap: 18px; /* 太字見出しの上下 */ --work-detail-label-title-gap: 18px; /* 小見出し → 見出し・本文・写真 */ --work-detail-meta-gap: 32px; /* タイトル ↔ Date / Duration ↔ タグ */ --work-detail-paragraph-gap: 0px; /* 本文の段落同士（未指定のため改行のみ） */ --work-detail-body-columns: 1; /* 本文の段組。1 = 段組みなし */ --work-detail-hero-height: 80vh; /* 冒頭の写真の高さ（画面の縦 8 割） */ --work-detail-color-swatch: 120px; /* 色見本の丸の直径（700px 以下では 90px） */ --work-detail-color-gap: 24px; /* 丸 → カラーコード */ --work-detail-color-row-gap: 36px; /* 色見本どうしの上下 */ --work-detail-body-width: min(64vw, 960px); /* 本文・写真の幅（読みやすさ重視。1 行 45〜60 字あたり。700px 以下は全幅） */ --work-detail-body-column-gap: 60px; /* 段と段の間 */ --work-detail-header-column-gap: 90px; /* 冒頭: タイトル群 ↔ 導入文 */ --work-detail-tag-gap: 4px; /* 冒頭: タグ同士の間隔 */ --work-detail-info-gap: 8px; /* 冒頭: client ↔ Date ↔ Duration ↔ タグ */ --work-detail-meta-item-gap: 8px; /* Date ↔ Duration（client・タグと同じ等間隔） */ /* セクション内の縦の間隔は 24px でそろえる（写真どうし・写真 ↔ 文字とも） */ --work-detail-block-gap: 24px; --work-detail-text-image-gap: 32px; /* 本文 → 写真（本文の下） */ --work-detail-image-bottom-gap: 24px; /* 写真 → 文字など（写真の下） */ --work-detail-hero-bottom-gap: 60px; /* 冒頭の写真 → タイトル群 */ --work-detail-image-note-gap: 8px; /* 写真 → 注意書き（未指定のため暫定値） */ --work-detail-section-gap: 120px; /* 独立したセクション同士 */ /* 薄い色。区切り線と、制作期間などのラベルで共有する。 新しい色は作らず、本文と同じ色（currentColor）の 25%。 */ --color-text: #2b2b2b; /* 文字色 */ --color-bg: #fff; /* ページの背景色 */ --color-bg-subtle: #f5f5f5; /* 背景色を変えるセクション（未指定のため暫定値） */ --color-muted: color-mix(in srgb, currentColor 25%, transparent); --work-detail-full-image-margin: 0px; /* width: "full" の写真の左右余白（画面いっぱい） */ --work-detail-images-gap: 36px; /* 横並び画像どうしの間隔。カード・手順の間隔にも使う */ --work-detail-section-padding: 90px; /* 背景色を変えるセクションの上下の余白（未指定のため暫定値） */ --work-detail-item-gap: 8px; /* カード・手順の中の行間（名前 ↔ 説明 など） */ --work-detail-item-line-height: 1.5; /* カード・手順の中の行送り */ --work-detail-client-gap: 36px; /* 冒頭: client（会社名 / private work）→ タイトル */ /* 詳細ページの開始位置。ヘッダー文字の下端から 172px 空ける。 */ --work-detail-header-offset: 57px; /* 86px の 2/3（57.3px を丸めた値） */ --work-detail-content-top: calc( var(--site-header-bottom) + var(--work-detail-header-offset) ); --work-detail-header-gap: 92px; /* タイトル群 → 最初のセクション */ --work-detail-divider-gap: var(--work-detail-rule-gap); /* 区切り線の上下の間隔 */ --work-detail-divider-width: 1px; --work-detail-divider-color: var(--color-muted); /* 1020px を確保できない画面幅での左右余白。 ヘッダーと同じ 40px（700px 以下では 20px）にしている。 */ --work-detail-padding-inline: 60px; --work-detail-label-marker-size: 0.5em;/* 「制作背景」などの前に置く●の大きさ（文字の半分） */ --work-detail-label-marker-gap: 8px; /* ●と文字の間隔 */ /* --- サイト共通ヘッダー ------------------------------------ */ --site-header-top: 27px; /* ページ上端からの距離 */ --site-header-z-index: 100; /* 常に最前面 */ /* 左右余白（700px 以下では 20px） */ --site-header-padding-inline: 60px; /* 以下 2 つは未指定のため暫定値。ここだけ変えれば一括で変わる。 */ --site-header-font-size: 15px; /* ナビ（works / about） */ --site-header-name-font-size: var(--site-header-font-size); /* サイト名。ナビと同じ 15px */ --site-header-name-lines: 1; /* サイト名の行数（SiteHeader.js と対応） */ /* ヘッダーの高さ = サイト名テキスト 2 行分（20px × 1.4 × 2 = 56px） */ --site-header-height: calc( var(--site-header-name-font-size) * var(--line-height-base) * var(--site-header-name-lines) ); /* ヘッダー文字の下端の位置（ページ上端から 100px）。 ヘッダーは fixed でフローに影響しないため、 以下のコンテンツ開始位置はこの値を基準に計算する。 */ --site-header-bottom: calc(var(--site-header-top) + var(--site-header-height)); --site-header-nav-gap: 32px; /* works ↔ about の間隔（未指定） */ /* --- ページ余白 ------------------------------------------- コンテンツ開始位置。 「画面上端 → ヘッダー文字」と「ヘッダー文字の下端 → カード」を同じ距離にする。 画面上端 → ヘッダー文字 : --site-header-top（72px） ヘッダー文字の下端 : --site-header-bottom（100px） したがって 100px + 72px = 172px。 ヘッダーはフローから外してあるので、この値がそのまま 最初のコンテンツの上端になる。 */ --page-content-top: calc(var(--site-header-bottom) + var(--site-header-top)); /* スマートフォン（700px 以下）の共通左右余白。 Works 一覧で使用。今後、作品詳細ページの「特別な指定がない通常コンテンツ」も この値を基準にする（全幅画像などは対象外）。 ヘッダーは別ルールだが、現状は同じ 20px。 */ --page-padding-inline-sp: 20px; /* ページ下端の余白。セクション同士の間隔（120px）と揃え、 最後のセクションの下にも 120px 空くようにしている。 */ --page-padding-bottom: 120px; --page-padding-inline: 0px; } /* --- PC（700px より広い画面）のタイトルサイズ ----------------- 作品詳細ページ冒頭のタイトルだけ 30px にする。 700px 以下は上の :root の値（21px）のまま。 一覧の作品タイトルは画面幅によらず 18px。 */ /* --- スマートフォン（700px 以下）の間隔 ----------------------- 縦の間隔は画面が狭いぶん詰める。 */ @media (max-width: 700px) { :root { /* 最大サイズの写真も、他のコンテンツと同じ左右余白にする */ /* ヘッダーの左右余白（この値に写真の最大幅もそろえている） */ --site-header-padding-inline: 20px; /* 作品詳細ページ本文内のタイトル */ --font-size-detail-heading: 21px; --work-detail-color-swatch: 90px; /* 色見本の丸 */ } } /* --- 最小限のリセット --------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, p, ul, li, figure { margin: 0; padding: 0; } ul { list-style: none; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* font-family / font-weight / font-style はここだけで指定し、 各コンポーネントでは繰り返さない（タイトルの weight のみ例外）。 */ /* ヘッダーの mix-blend-mode: difference は「背面の色」と混ぜる。 body に背景色が無いと背面が透明扱いになり、白い文字のままになってしまうため、 html と body の両方に背景色を置く（html にも置くのは、body の背景が ページ全体の背景に持ち上げられて body 自体が透明になるのを防ぐため）。 */ html, body { background-color: var(--color-bg); } body { color: var(--color-text); font-family: var(--font-base); font-weight: var(--font-weight-base); font-style: normal; line-height: var(--line-height-base); } /* スクリーンリーダー用（視覚的には非表示） */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }