/* Theme Name: TOKYO カルチャーデビュー Theme URI: https://tokyo-culture-debut.rekibun.or.jp Description: TOKYO カルチャーデビュー ポータルサイトのテーマ Version: 0.1.0 Requires at least: 6.5 Tested up to: 7.0 Requires PHP: 8.1 Text Domain: tokyo-culture-debut */ /* * デザイントークン (--color-* / --space-* 等) は assets/css/tokens.css にある。 * * 波の変数だけはここに残す。 カスタムプロパティの中の相対 URL は「宣言した * スタイルシート」ではなく「その変数を使うスタイルシート」を基準に解決される * ため、tokens.css へ移すと --wave-image のパスがずれる。 波は style.css 内で * しか使わないので、宣言も使用側と同じファイルに置いておく。 */ :root { --wave-h-mobile: 20px; --wave-h-desktop: 80px; --wave-h: var(--wave-h-mobile); --wave-image: url('assets/images/wave-divider.svg'); } @media (min-width: 769px) { :root { --wave-h: var(--wave-h-desktop); } } /* * Wave divider system (see docs/wave-divider.md for the full algorithm). * * Pattern per has-wave-top section: * 1. margin-top: -wave-h → 前セクションへ食い込み * 2. linear-gradient bg → 上 wave-h は透明、以下は --section-bg * 3. ::before(mask + bg) → 波形を --section-bg で描画 * 4. padding-top: wave-h → コンテンツを波領域より下に押し出す * * Bottom overlap (次セクションの波が食い込む領域): * 後続セクションが .has-wave-top を持つ場合、自身の * padding-bottom に calc(var(--wave-h) + inner) を足し、 * コンテンツが overlap 領域に入らないようにする。 * * Custom properties (最寄りの祖先で上書き): * --section-bg セクションの塗り色 (body で default) * --wave-flip-x 1 / -1 で波の左右向き (交互指定) * --wave-h 波の高さ (デフォルトは :root、必要ならセクションで上書き) * --wave-image マスクに使う SVG (:root で単一マスターに固定) */ .has-wave-top { position: relative; margin-top: calc(-1 * var(--wave-h)); background-color: transparent; background-image: linear-gradient( to bottom, transparent 0, transparent var(--wave-h), var(--section-bg, transparent) var(--wave-h), var(--section-bg, transparent) 100% ); isolation: isolate; } main#main.has-wave-top { --wave-flip-x: 1; padding-top: var(--wave-h); } .has-wave-top::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: var(--wave-h); background-color: var(--section-bg, transparent); -webkit-mask-image: var(--wave-image); -webkit-mask-repeat: repeat-x; -webkit-mask-position: 0 bottom; -webkit-mask-size: 100vw 100%; mask-image: var(--wave-image); mask-repeat: repeat-x; mask-position: 0 bottom; mask-size: 100vw 100%; transform: scaleX(var(--wave-flip-x, 1)); pointer-events: none; z-index: 0; /* * `--wave-flip-x` はデザイン上セクションごとに +1 / -1 が交互に指定される * ため、これをそのまま odd / even 判定として流用する。 * flip=+1 (odd) → duration = --wave-anim-dur-odd, delay = 0 * flip=-1 (even) → duration = --wave-anim-dur-even, delay = --wave-anim-delay-even * `(1 - flip) / 2` で odd=0 / even=1 に落として補間する。 */ animation-name: tcd-wave-drift; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: calc( var(--wave-anim-dur-odd, 20s) + ((1 - var(--wave-flip-x, 1)) / 2) * (var(--wave-anim-dur-even, 32s) - var(--wave-anim-dur-odd, 20s)) ); animation-delay: calc(((1 - var(--wave-flip-x, 1)) / 2) * var(--wave-anim-delay-even, -5s)); } /* * ループアニメーション。 mask-position を 1 タイル (= 100vw) 進めれば * repeat-x で敷き詰められた次のタイルへシームレスに繋がる。 * --wave-flip-x=-1 のセクションは transform で左右反転しているため、 * mask-position の進行方向を反転させ視覚上の流れを右向きに揃える。 */ @keyframes tcd-wave-drift { from { -webkit-mask-position: 0 bottom; mask-position: 0 bottom; } to { -webkit-mask-position: calc(var(--wave-flip-x, 1) * 100vw) bottom; mask-position: calc(var(--wave-flip-x, 1) * 100vw) bottom; } } /* * Composite typography utilities (Figma "Body/..." styles). * Use as a single class on text elements; weight/size/line-height inherit from tokens. */ .type-body-middle { font-family: var(--font-family-jp); font-weight: var(--font-weight-regular); font-size: var(--font-size-body-middle); line-height: var(--line-height-relaxed); } .type-body-middle-bold { font-family: var(--font-family-jp); font-weight: var(--font-weight-bold); font-size: var(--font-size-body-middle); line-height: var(--line-height-relaxed); } .type-body-small { font-family: var(--font-family-jp); font-weight: var(--font-weight-regular); font-size: var(--font-size-body-small); line-height: var(--line-height-default); } .type-body-x-small { font-family: var(--font-family-jp); font-weight: var(--font-weight-regular); font-size: var(--font-size-body-x-small); line-height: var(--line-height-default); } .type-body-large-bold { font-family: var(--font-family-jp); font-weight: var(--font-weight-bold); font-size: var(--font-size-body-large); line-height: var(--line-height-relaxed); } /* * Common utility components. * セクション・アーカイブ間で重複していたパターンを集約。 */ /* セクション見出し直前の小さなラベル（例: "● EVENT", "● FEATURE"）。 * 詳細ページの eyebrow は `` のような形で * 各 CPT のアーカイブへのリンクを兼ねる。 hover / focus-visible で * 内部の `.en` テキストにアンダーラインを出してリンクであることを示す。 */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); color: var(--color-brand-primary-green); font-weight: var(--font-weight-bold); font-size: var(--font-size-body-small); } a.eyebrow:hover .en, a.eyebrow:focus-visible .en { text-decoration: underline; text-underline-offset: 4px; } /* セクション末尾の「すべての…」アウトライン CTA ボタン。 */ .more { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-full); border: var(--border-width-strong) solid var(--color-brand-primary-green); color: var(--color-brand-primary-green); font-weight: var(--font-weight-bold); } /* * Filled pill-shape CTA button. 配色は配置するセクション側で上書き。 * 例: .home-special .cta { background: var(--color-brand-primary-green); color: var(--color-text-inverted); } */ .cta { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-full); font-weight: var(--font-weight-bold); } /* * リンクボタンの矢印。ボタン直下の flex アイテムにすると、ラベルが 2 行に * 折り返したとき矢印だけが縦中央の右端に取り残される。そこでラベルを唯一の * flex アイテムにし、矢印はその内側の ::after としてテキストと同じインライン * 整形コンテキストに流す。 * * 日本語はほぼ任意の位置で改行できるため、ラベルが折り返すと矢印だけが次行に * 落ちることがある。 以前これを ::after を inline にして content に U+2060 * WORD JOINER を持たせる方式で塞いだが、iOS Safari が inline ボックスへの mask を * 適用せず、background-color の矩形がそのまま出た (実機で確認)。 矢印だけが * 稀に行落ちするほうが、常時黒い箱が出るよりましなので inline-block に戻した。 * 行落ちを塞ぐなら WebKit で検証できる手段を用意してから再挑戦すること。 * * 末尾 1 文字を nowrap の span で包む旧方式は使えない。 GTranslate はラベル * 全体を 1 文として訳したうえで訳語を元のノードへ順に割り付けるので、末尾に * あったはずの span が訳文の先頭を受け取り、矢印が文中に現れる * (docs/gtranslate-worklog.md の「9. 翻訳対象テキストを span で分割しない」)。 * * 行き先で字形を出し分ける。サイト内リンクは →、外部リンク (.is-external) は ↗。 * .is-external は PHP 側の tcd_external_class() が付与する (inc/links.php)。 * mask の URL はこの CSS ファイルからの相対パスで解決される。カスタム * プロパティに url() を入れると解決基準がブラウザ間で揺れるので使わない。 */ .cta .label::after, .pill .label::after, .more .label::after { content: ''; display: inline-block; width: 16px; height: 16px; margin-left: var(--space-3); vertical-align: -0.15em; background-color: currentColor; mask: url('assets/images/icon-arrow-right.svg') no-repeat center / contain; -webkit-mask: url('assets/images/icon-arrow-right.svg') no-repeat center / contain; } .cta.is-external .label::after, .pill.is-external .label::after, .more.is-external .label::after { mask-image: url('assets/images/icon-arrow-up-right.svg'); -webkit-mask-image: url('assets/images/icon-arrow-up-right.svg'); } /* * 記事本文・固定ページの共通レイアウト。 * .entry-wrap = 読みやすい横幅 (Figma max-width/narrow) * .entry-header = アイキャッチや見出しの縦並びヘッダ * .entry > * = Gutenberg 本文ブロック間の縦リズム */ .entry-wrap { max-width: var(--max-width-narrow); margin: 0 auto; } .entry-header { display: flex; flex-direction: column; gap: var(--space-4); } .entry > * { margin-bottom: var(--space-6); } .entry > h2 { margin-top: var(--space-12); font-family: var(--font-family-jp-title); font-size: var(--font-size-body-large); font-weight: var(--font-weight-bold); } .entry img, .entry figure { border-radius: var(--radius-default); } .entry .wp-block-gallery { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* * core/separator は WP のデフォルトが 2px の濃い線で本文中では目立ちすぎるので、 * gray-300 の細い罫線に統一する。 上下 margin は entry-body の block-family * ルール側で付与するので、ここは見た目のみ。 wide / dots バリエーションも同じ扱い。 */ .wp-block-separator { height: 0; border: none; border-top: 1px solid var(--color-neutral-gray-300); background: none; } /* * .entry-body 内ブロック間の縦方向スペーシング (owl / adjacent-sibling パターン)。 * * 「X の直後に Y が来たら margin-top を M px」を隣接ペアごとに直接宣言する。 * 以前は flex gap + 族別 margin + 補正 の三層で最終値を計算していたが、複雑さの * 割に例外リストが膨らむため、margin-top のみで距離を作る形に集約した。 flex は * 使わず flow layout に戻し、margin が普通に効く前提で書く。 * * `:where()` で specificity を 0 に落とし、後に書いたルールが必ず勝つ「順序 * cascade」にする ("後ろの方が特定" ではなく "後ろの方が後勝ち")。 これで * `:not(...)` の例外リストなしで hug / 密着ケースを最終行で上書きできる。 * * 分類: * HEADINGS = .wp-block-heading, .wp-block-lazyblock-qa-heading * MEDIA = .wp-block-separator, .wp-block-image, .wp-block-embed, * [class*="wp-block-lazyblock-"] (callout 等の完結型 lazyblock) * ただし MEDIA として拾う際は :not(.wp-block-lazyblock-qa-heading) * で qa-heading を除外する。 qa-heading は本質的に見出しなので * MEDIA の「上下 2x」性質を持たせず、通常 heading と同じ「上のみ 2x」 * にしたい (rule 3 の first slot、rule 4 の second slot から除外)。 * * 隣接ペアの結果 (--entry-body-gap = 32px 基準): * * + * 1x (32px) ベース段落間 * * + HEADING 2x (64px) 見出しの上に息 (qa-heading は HEADING に入る) * * + MEDIA 2x (64px) 媒体ブロックの上に息 * MEDIA + * 2x (64px) 媒体ブロックの下にも息 (qa-heading 除く) * HEADING + MEDIA 1x (32px) 見出し直後の媒体は意味的に一体で密着 * (second が qa-heading の場合は除外 → 2x) * * + callout 0 前ブロックに hug (最終上書き) * * margin はブロック外側 (核ブロックは h タグや hr そのもの、lazyblock は * `.wp-block-lazyblock-{slug}` ラッパー) に付く。 各ブロックの style.css は * 内部レイアウトだけを扱う。 グローバル要素リセット (h1-h6, p, ul, ol, dl, * figure, hr → margin: 0) が前提で、そこに owl ルールが加算される。 */ .entry-body { --entry-body-gap: var(--space-8); } .entry-body > :first-child { margin-top: 0; } .entry-body > :where(* + *) { margin-top: var(--entry-body-gap); } .entry-body > :where(* + :is( .wp-block-heading, .wp-block-lazyblock-qa-heading, .wp-block-separator, .wp-block-image, .wp-block-embed, [class*="wp-block-lazyblock-"] )) { margin-top: calc(var(--entry-body-gap) * 2); } .entry-body > :where(:is( .wp-block-separator, .wp-block-image, .wp-block-embed, [class*="wp-block-lazyblock-"] ):not(.wp-block-lazyblock-qa-heading) + *) { margin-top: calc(var(--entry-body-gap) * 2); } .entry-body > :where( :is(.wp-block-heading, .wp-block-lazyblock-qa-heading) + :is( .wp-block-separator, .wp-block-image, .wp-block-embed, [class*="wp-block-lazyblock-"] ):not(.wp-block-lazyblock-qa-heading) ) { margin-top: var(--entry-body-gap); } .entry-body > :where(* + .wp-block-lazyblock-callout) { margin-top: 0; } /* core/image と core/embed のキャプション。 Figma 783:6483 (figure) 参照。 */ .entry-body :is(.wp-block-image, .wp-block-embed) :is(figcaption, .wp-element-caption) { margin: var(--space-4) 0 0; font-size: var(--font-size-body-small); line-height: 1.5; color: var(--color-text-light); } /* core/embed: YouTube 等の oEmbed iframe は width/height 属性が固定値 (500x281) * で入るため、そのままだとカラム幅に対して小さく寄る。 wrapper 側で 16:9 の * aspect-ratio コンテナ化し、iframe をリキッドに広げる。 Twitter/Instagram など * 16:9 でない埋め込みは将来 wp-embed-aspect-* クラス別の上書きで対応する想定。 */ .entry-body .wp-block-embed .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-default); } .entry-body .wp-block-embed .wp-block-embed__wrapper iframe, .entry-body .wp-block-embed .wp-block-embed__wrapper > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* core/list: Figma 833:10819 準拠で bullet 記号は使わず、各行の下に 1px dotted * のグレー区切りを引くだけのシンプルな縦積みにする。 セクション固有 * (feature-single 等) の ul padding-left override とは重ならないよう * `.wp-block-list` クラスに限定してターゲットする。 */ .entry-body :is(ul, ol).wp-block-list { padding-inline-start: 0; list-style: none; } .entry-body :is(ul, ol).wp-block-list > li { padding-block: var(--space-2); border-top: 1px dotted var(--color-neutral-gray-300); } /* entry-body 内の a はすべて緑テキスト、デフォルト下線なし、hover / * focus-visible で下線を出す。 段落・リスト・見出しの中身どれでも一貫。 */ .entry-body a { color: var(--color-brand-primary-green); text-decoration: none; } .entry-body a:hover, .entry-body a:focus-visible { text-decoration: underline; text-underline-offset: 4px; } /* 見出しは entry-body 全体で継承される段落用 line-height 2 のままだと縦に * 間延びして読みづらくなるため、h1-h6 に line-height 1.5 を明示。 各セクション * (feature-single / single-event 等) の個別上書きは同じ値なので、こちらに寄せて * いけば重複を段階的に取り除ける。 */ .entry-body :is(h1, h2, h3, h4, h5, h6) { line-height: 1.5; } /* h2 は toc アンカージャンプ時に viewport top に張り付かないよう、上に * 基準の 2x ぶんの scroll offset を持たせる。 */ .entry-body h2.wp-block-heading { scroll-margin-top: calc(var(--entry-body-gap) * 8); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* * Sticky footer: body を flex-column にして main を伸ばし、コンテンツ量が少ない * ページでもフッターがビューポート下端に張り付くようにする。 * (賛同企業ページなど本文が短いページで、body 背景の余白が footer の下に * 見えてしまう問題への対処) */ body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-background-default); color: var(--color-text-default); font-family: var(--font-family-jp); font-size: var(--font-size-body-middle); line-height: 2; --section-bg: var(--color-background-default); } main#main { flex: 1 0 auto; } h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, hr { margin: 0; } /* * Heading text-wrap policy. 詳細と判断根拠は docs/design/implement-design.md * の「日本語見出しの折り返し」を参照。 * * `word-break: auto-phrase` は全見出しに当てる。 * * `text-wrap: pretty` は**中央寄せの見出しだけ**に当てる (下の :is() リスト)。 * 日本語で行頭揃えの見出しに当てると、最終行を短くしないための行送り調整が * 逆に効いて右端が不揃いに見える。 中央寄せなら左右対称に詰まるので気になら * ない。 * * `text-wrap: balance` は使わない。 日本語では語中で割れる (実測: * 「文化体験の輪をひろげ / る仲間を募集しています」)。 * * 注意: これらは Chromium 限定のヒントで、Safari / Firefox では greedy に * 折れる。 見出しの行数は Figma を正とし、まずカラム幅で収めること。 * 折り返しヒントを行数の保証手段にしない。 * * `palt` は Zen Maru Gothic (Google Fonts) では効かない (実測で字幅が変わら * ない)。 --font-family-jp 側のための保険として残しているだけなので、詰めが * 効く前提で幅を設計しないこと。 * * The `:lang(en)` branch is intentionally deferred until the translation * layer is ready. */ h1, h2, h3, h4, h5, h6 { &:lang(ja) { font-feature-settings: 'palt'; word-break: auto-phrase; } } /* * text-wrap: pretty を効かせる中央寄せの見出し。 ここは text-align: center を * 宣言しているセレクタと対で維持すること。 中央寄せのセクションを増やしたら * このリストにも足す。 足し忘れても既定 (wrap) に落ちるだけで崩れはしない。 * * balance は使わない。 日本語では語中で割れる。 auto-phrase と組み合わせると * モバイル幅で「野外スケッチ / 会（ダミー10）」のような等幅短行になる。 */ :is( .home-cover .lede, .home-community .card-supporters, .event-archive-head, .home-events .heading, .home-features .heading, .home-news .heading, .home-special .heading, .home-about .heading, .archive-feature .heading, .archive-feature-series .heading, .archive-news .heading, .search-results .heading, .not-found .heading, .page-content .heading ) :is(h1, h2, h3, h4, h5, h6):lang(ja), /* 関連セクションの見出しは .heading を見出し要素自身が持つ (news/related.php, event/related.php) か、素の h2 で置かれている (feature/related.php)。 セクションごと拾うとカード側の .title まで当たるので直接指定する。 */ :is(h1, h2, h3, h4, h5, h6).heading:lang(ja), .feature-related > .wrap > h2:lang(ja) { text-wrap: pretty; } .heading :is(h1, h2, h3, h4, h5, h6) { width: 100%; } /* * Centered `.heading` blocks live inside flex-columns with `align-items: * center`, which sizes children to their intrinsic (unbroken) content width. * The heading block and the inner h* both need `width: 100%` (see the rule * above) so `text-wrap: pretty` + `word-break: auto-phrase` can actually * take effect and wrap the heading text to the parent width. */ .heading { width: 100%; max-width: 100%; } ul, ol { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { margin: 0; padding: 0; background: none; border: none; color: inherit; font: inherit; cursor: pointer; } /* * iOS Safari のダブルタップズーム抑止。 対話要素を素直な "click" として * 扱わせる。 pinch-zoom (アクセシビリティ) は保持されるので単指ジェスチャの * ズームだけを止める形になる。 */ a, button, label, summary, [role="button"], input[type="button"], input[type="submit"], input[type="reset"] { touch-action: manipulation; } :focus-visible { outline: 2px solid var(--color-brand-primary-blue); outline-offset: 2px; } .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; } .sr-only:focus-visible { position: fixed; top: var(--space-2); left: var(--space-2); width: auto; height: auto; padding: var(--space-2) var(--space-3); margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--color-background-dark); color: var(--color-text-inverted); border-radius: var(--radius-small); z-index: 1000; } /* * `--wrap-content` = Figma の wrapper フレーム幅 (= 実際に中身が使える幅)。 * * `box-sizing: border-box` が全体に効いているので `max-width` に Figma の幅を * そのまま書くと gutter (padding) が内側に食い込み、コンテンツ幅が gutter*2 * だけ痩せる。 セクション側が Figma の値を素直に書けるよう、gutter の加算は * ここで一度だけ行う。 セクションで幅を変えるときは `max-width` ではなく * `--wrap-content` を上書きする。 * * 既定値は従来の実効値 (--max-width-wide 1440 から gutter 40*2 を引いた 1360) * をそのまま維持しているので、上書きしないセクションの見た目は変わらない。 */ .wrap { --wrap-gutter: var(--space-4); --wrap-content: calc(var(--max-width-wide) - var(--space-10) * 2); width: 100%; max-width: calc(var(--wrap-content) + var(--wrap-gutter) * 2); margin: 0 auto; padding: 0 var(--wrap-gutter); @media (min-width: 769px) { --wrap-gutter: var(--space-10); } } /* * .article-layout — /events/[slug]/, /features/[slug]/ など、記事本文 + サイド * の 2 カラム記事シェル。 モバイル〜狭デスクトップは 1 列縦積み、1024px 以上で * デフォルト 3fr : 1fr の 2 カラム。 gap もモバイル 40 / デスクトップ 64。 * ブレイクポイントは "サイドカラムに情報を詰め込んでも本文側が読める最小幅" * として 1024px を採用 (card block の横並び閾値と同じ)。 * * サイドカラムを固定幅にする / gap を変える等の派生 (feature: 1fr+320px, gap 56/128) * は section スコープで CSS カスタムプロパティを上書きする: * section.single-feature { * --article-layout-columns: minmax(0, 1fr) 320px; * --article-layout-gap-desktop: var(--space-32); * --article-layout-gap-mobile: var(--space-14); * } * `.wrap` と結合して 1 段の div (`.wrap.article-layout`) で使うのが標準。 */ .article-layout { display: grid; grid-template-columns: 1fr; gap: var(--article-layout-gap-mobile, var(--space-10)); align-items: start; } @media (min-width: 1024px) { .article-layout { grid-template-columns: var(--article-layout-columns, minmax(0, 3fr) minmax(0, 1fr)); gap: var(--article-layout-gap-desktop, var(--space-16)); } } /* * サイトロゴの言語切り替え (Figma 388:402 / 388:403)。 ヘッダー・フッターの * `.logo` は日英 2 種類の SVG を同時に持ち (template-parts/global/site-logo.php)、 * 表示するほうだけをここで選ぶ。 * * 判定は の一本。 GTranslate 無料版はクライアント JS 翻訳で URL が * 変わらないため PHP 側では表示言語が確定せず、Google の翻訳ライブラリが翻訳を * 当てるときに を対象言語へ書き換えるのが唯一の手がかりになる * (実測: lang="en" + class="translated-ltr")。 Business プランの /en/ 方式へ * 戻したときも になるので、このセレクタのまま通る。 * * span は `display: contents` で箱を消し、SVG が `.logo` の flex item のままに * なるようにしている。 * * サイズはヘッダー / ドロワー / フッターの各スコープが `--logo-width` を上書き * して決める。 英語ロゴだけはこの幅ではなく、日本語ロゴと同じ「高さ」に揃える。 * 英語は 2 行とも欧文キャップで日本語 2 行より背が低く (Figma は両方とも幅 * 400 で描かれている)、幅を合わせるとロゴが一回り小さく見えるため。 */ .logo { --logo-width: 140px; & svg { width: var(--logo-width); height: auto; } /* * 日本語 viewBox 200x46 / 英語 viewBox 400x74 から、同じ高さになる英語の幅は * 日本語の幅 x (46/200) x (400/74) = 約 1.243 倍。 */ & > .logo-en svg { width: calc(var(--logo-width) * 46 / 200 * 400 / 74); } & > .logo-ja { display: contents; } & > .logo-en { display: none; } &:lang(en) { & > .logo-ja { display: none; } & > .logo-en { display: contents; } } } .site-header { position: relative; /* overflow は visible。 background-image は element box を越えないので clip * 不要。 hidden にすると .site-lang の .gt_options ドロップダウン (top: 100% * で header 外に落ちる) が clip されて選択肢が隠れてしまう。 */ background-color: var(--color-background-ultra-light); background-image: url('assets/images/header-leaves-mobile.svg'); background-repeat: no-repeat; background-position: right -10% center; background-size: 60% auto; height: 120px; @media (min-width: 769px) { background-image: url('assets/images/header-leaves.svg'); background-position: right -20% center; background-size: 80% auto; height: 200px; } & .logo { position: absolute; top: var(--space-6); left: var(--space-6); z-index: 1; display: inline-flex; align-items: center; --logo-width: 140px; } /* * 言語切替 (.site-lang) 用の absolute ラッパー。 右端は viewport 直付けの * .drawer-trigger (56px) + gap 16px 分だけ内側に寄せて重ならないようにする。 * absolute なのでスクロール中はヘッダーと一緒に流れて視界から外れる。 */ & .header-actions { position: absolute; top: 16px; right: calc(16px + 56px + var(--space-4)); z-index: 10; display: inline-flex; align-items: center; } /* Free-plugin GTranslate widget → 56px round icon button per Figma menu-lang (813:6488). * Reshape the plugin's default float widget: .gt-selected becomes the pill (its inner * .gt-current-lang is painted as the language icon via mask-image so it inherits color), * and .gt_options anchors below as a small dropdown menu that appears on click. Rules * are !important-heavy because the plugin appends its own