@charset "UTF-8";
/* ==========================================================================
   base.css — lgbtqordinary.com WordPress テーマ／レスポンシブ基盤
   --------------------------------------------------------------------------
   一次資料:
     - specs/_確定事項_ブレークポイント.md（BP4段・display明示ルールの正本）
     - codex_handoff_静的24ページ.md §2-2〜§2-8（幅・フォント・Lenis・Vimeo・画像）
     - CEO決定事項_20260901.md（フォント置換＝決定2）
   読み込み順の前提:
     1) base.css      ← このファイル（リセット／トークン／BP／ユーティリティ）
     2) tokens/色     ← カラートークン（--s-color-*）は別ファイルで定義する想定
     3) components/ 配下  ← ヘッダー・フッター等の共有シンボル
     4) pages/ 配下       ← ページ個別
   後段のファイルは同一詳細度なら後勝ちで base を上書きできる。
   ========================================================================== */

/* ==========================================================================
   0. ブレークポイント運用ルール（このファイル全体および後続CSSの規約）
   --------------------------------------------------------------------------
   STUDIO 実測（specs/_確定事項_ブレークポイント.md §1）で存在するMQは以下4本のみ。
   すべて max-width 単独。min-width との範囲指定は使わない。

     @media screen and (max-width: 1140px)   ... @small
     @media screen and (max-width:  840px)   ... @tablet
     @media screen and (max-width:  540px)   ... @mobile
     @media screen and (max-width:  320px)   ... @mini

   規約:
     R1. ソース順は必ず 1140 → 840 → 540 → 320。狭い側を後に置き、確実に後勝ちさせる。
     R2. display の切替は「狭い側にも明示的に書く」。継承・ソース順に依存させない
         （STUDIO側も display:none 全160件中159件が明示済み。同§2）。
     R3. 1本のセレクタのMQブロックを分散させない。まとめて上記の順で並べる。
     R4. 375px 幅では 1140 / 840 / 540 の3本が同時適用される（320は非適用）ことを常に意識する。
   ========================================================================== */

/* ==========================================================================
   1. トークン（フォント・レイアウト・モーション）
   ========================================================================== */
:root{
  /* --- フォント（CEO決定済み・2026-09-01 決定2／handoff §2-3） -----------
     変数名は STUDIO のものをそのまま踏襲する（ページ定義JSONからの移植を機械的にするため）。
     実ファイルの読み込み（Google Fonts / preconnect / display=swap）は functions.php 側で行う。 */
  --s-font-f88553ee: Inter, "Zen Kaku Gothic New", sans-serif;  /* 基本・1,154箇所 */
  --s-font-aca0103b: "Noto Sans JP", sans-serif;                /* 旧 A1ゴシック M JIS2004・212箇所 */
  --s-font-dbab4593: "Noto Serif JP", serif;                    /* 37箇所 */
  --s-font-5297e0b2: "Lexend Deca", sans-serif;                 /* 24箇所 */
  --s-font-3d9f8c45: Inter, "Noto Sans JP", sans-serif;         /* 14箇所 */
  --s-font-2a993387: "Zen Kaku Gothic New", sans-serif;         /* 12箇所 */
  --s-font-46b244e0: Caveat, cursive;                           /* 9箇所・欧文手書き体（和文グリフなし） */

  /* 素の sans-serif へ落ちるのを潰すための既定スタック（handoff §2-3）。
     現行 /service では77要素がフォールバックしている＝ここで品質が上がる。 */
  --o-font-base: var(--s-font-f88553ee);

  /* --- レイアウト（handoff §2-2） -------------------------------------- */
  --o-container: 1080px;   /* STUDIO標準のコンテンツ幅。/o-dinary の一部のみ 1180/1260/1920 */
  --o-gutter: 100px;       /* セクション左右パディング。BPごとに 60 / 40 / 20 へ */

  /* --- ヘッダー（handoff §2-5・共有シンボル S-03） ----------------------- */
  --o-header-h: 80px;                        /* base・@small。@tablet 以下で 60px */
  --o-header-z: 999;
  --o-header-transition: 800ms ease-in-out;  /* S-03ルートの実値。全ヘッダーで共有する */
  --o-header-transition-delay: 300ms;        /* 同上 */

  /* --- 埋め込み比率（§2-7） --------------------------------------------- */
  --o-embed-ratio: 16 / 9;
}

/* R1: 1140 → 840 → 540 → 320 の順。トークンもこの順で上書きする。 */
@media screen and (max-width: 1140px){
  :root{
    --o-gutter: 60px;
    --o-header-h: 80px;   /* @small も 80px（S-03実測）。継承に頼らず明示する */
  }
}
@media screen and (max-width: 840px){
  :root{
    --o-gutter: 40px;
    /* S-03（企業向けヘッダー）は @tablet 以下で 60px。
       80px 固定のヘッダー（S-02 等）は各コンポーネント側で --o-header-h を上書きすること。 */
    --o-header-h: 60px;
  }
}
@media screen and (max-width: 540px){
  :root{
    --o-gutter: 20px;
    --o-header-h: 60px;
  }
}
@media screen and (max-width: 320px){
  :root{
    --o-gutter: 20px;
    --o-header-h: 60px;
  }
}

/* ==========================================================================
   2. リセット（最小限）
   ========================================================================== */
*,
*::before,
*::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* アンカー着地位置を固定ヘッダー分だけ下げる。Lenis経由のscrollToでも同値を使うこと。 */
  scroll-padding-top: var(--o-header-h);
}

body{
  margin: 0;
  /* 明示スタック。素の sans-serif へのフォールバックを潰す（handoff §2-3） */
  font-family: var(--o-font-base);
  font-size: 16px;
  line-height: 1.6;
  color: var(--o-text, #082b34);        /* 色トークン未読込時の保険。正値は tokens 側 */
  background-color: var(--o-body-bg, #ffffff);
  /* 3. の方針に基づきサイト既定で palt を有効化 */
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 200% 幅の重ね画像など、意図的にはみ出す要素があるため横スクロールを抑止する。
     clip は position:sticky を壊さない。非対応環境のみ hidden にフォールバック。 */
  overflow-x: clip;
}
@supports not (overflow: clip){
  body{ overflow-x: hidden; }
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd{ margin: 0; }
h1, h2, h3, h4, h5, h6{ font-size: inherit; font-weight: inherit; }

ul, ol{ margin: 0; padding: 0; list-style: none; }
/* ⚠ 記事本文（O-DINARY 54件・エディタ出力）ではマーカーが必要。
   本文ラッパ側で list-style / padding-left を戻すこと（記事テンプレ担当への申し送り）。 */

a{ color: inherit; text-decoration: none; }

/* フォーム要素にも本文フォントを継承させる（ここを外すとUAのsans-serifに落ちる） */
button, input, select, textarea{
  font: inherit;
  color: inherit;
  margin: 0;
}
button{
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

table{ border-collapse: collapse; border-spacing: 0; }

/* キーボード操作時のみフォーカスリングを出す（マウス操作時の見た目は現行を維持） */
:focus-visible{
  outline: 2px solid var(--o-focus, #1d9ec1);
  outline-offset: 2px;
}

/* ==========================================================================
   3. font-feature-settings: "palt" 1 の適用方針
   --------------------------------------------------------------------------
   STUDIO の設計ツリーでは本文の多く（すべてではない）に palt が入っている（handoff §2-3）。
   ノード単位で完全一致させるより、
     (a) body で既定ON にして継承させ、
     (b) OFF にすべき箇所だけ .u-palt-off で明示的に戻す
   ほうが、字詰めの見た目が現行に近く、かつ後続CSSが単純になる。
   → 等幅で並べたい数字・英数字ロゴ・表組みの桁揃えは .u-palt-off を当てること。
   ※ palt は和文の詰め機能。欧文には実質無影響。
   ========================================================================== */
.u-palt-off{ font-feature-settings: normal; }
.u-palt-on{ font-feature-settings: "palt" 1; }

/* 数字の桁を揃えたい箇所（価格・日付・カウンタ） */
.u-tnum{ font-feature-settings: normal; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   4. メディア（画像・動画・iframe）
   ========================================================================== */
/* STUDIO のレイアウトは flex 主体で、画像はほぼブロック配置。
   文中にインラインで置きたい画像・SVGはコンポーネント側で display:inline-block に戻す。 */
img, picture, video, canvas, svg{
  display: block;
  max-width: 100%;
}
img{
  height: auto;              /* width/height 属性からのCLS対策と両立させる */
  border-style: none;
}
/* 固定サイズ指定の画像はコンポーネント側で height を明示上書きすること
   （base より後に読み込まれるため同一詳細度で勝てる）。 */

iframe{ border: 0; max-width: 100%; }

/* ==========================================================================
   5. 埋め込みラッパ（Vimeo背景動画・14箇所／動画10本・handoff §2-7）
   --------------------------------------------------------------------------
   使い方:
     <div class="o-embed">                      … 16:9
     <div class="o-embed o-embed--vertical">    … 9:16（縦型）
     <div class="o-embed o-embed--cover">       … 親を埋めるカバー配置（背景動画）
     <div class="o-embed o-embed--bg">          … 装飾専用。クリックを透過させる
   固定 height ではなく aspect-ratio を使う（handoff §8 C5：固定高はモバイルで崩れるため）。
   ========================================================================== */
.o-embed{
  position: relative;
  width: 100%;
  aspect-ratio: var(--o-embed-ratio);
  overflow: hidden;
}
.o-embed > iframe,
.o-embed > video,
.o-embed__frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.o-embed--vertical{ --o-embed-ratio: 9 / 16; }
.o-embed--square{ --o-embed-ratio: 1 / 1; }

/* aspect-ratio 非対応環境（古いSafari）向けパディングハック */
@supports not (aspect-ratio: 16 / 9){
  .o-embed{ height: 0; padding-top: 56.25%; }
  .o-embed--vertical{ padding-top: 177.7778%; }
  .o-embed--square{ padding-top: 100%; }
}

/* 親要素をトリミングして埋める背景動画。iframe側は縦横比を保ったまま拡大する。
   親に高さが必要（height / aspect-ratio / inset:0 のいずれか）。
   拡大量はビューポート基準（vw/vh）なので、ビューポート大の器＝/（home__01）の
   固定背景動画を基準に調整してある。小さい器で使う場合は overflow:hidden で切り取られる。 */
.o-embed--cover{
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}
.o-embed--cover > iframe,
.o-embed--cover .o-embed__frame{
  /* inset は top/right/bottom/left の一括指定。必ず個別指定より前に置く */
  inset: auto;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;         /* 100vw の 16:9 */
  min-width: 177.7778vh;   /* 100vh の 16:9 */
  min-height: 100vh;
  transform: translate(-50%, -50%);
}

/* 装飾用（autoplay/loop/muted/background=1）はポインタを透過させ、下のUIを触れるようにする */
.o-embed--bg,
.o-embed--bg > iframe{ pointer-events: none; }

/* ==========================================================================
   6. レイアウト補助
   ========================================================================== */
.o-container{
  width: 100%;
  max-width: var(--o-container);
  margin-inline: auto;
}
.o-section{
  padding-left: var(--o-gutter);
  padding-right: var(--o-gutter);
}
/* ヘッダー分の上マージン。/service /characters /o-dinary は 80px、/voice は 88px（handoff §2-2） */
.o-has-fixed-header{ margin-top: var(--o-header-h); }
.o-has-fixed-header--88{ margin-top: 88px; }

/* ==========================================================================
   7. ヘッダー（fixed ＋ スクロール方向による出し入れ・handoff §2-5）
   --------------------------------------------------------------------------
   JS は「下スクロールで .is-hidden 付与／上スクロールで除去」だけを行う。
   見た目の責務はすべてここに置く。
   ========================================================================== */
.o-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--o-header-h);
  z-index: var(--o-header-z);
  transform: translateY(0);
  transition: transform var(--o-header-transition);
  transition-delay: var(--o-header-transition-delay);
  will-change: transform;
}
.o-header.is-hidden{ transform: translateY(-100%); }
/* 出す方向は待たせない（引っ込むときだけ delay を効かせる） */
.o-header:not(.is-hidden){ transition-delay: 0ms; }

/* 背景ぼかしを使うヘッダー用。Safari のため -webkit- を必ず併記する（handoff §2-5）。
   値は S-03（企業向けヘッダー）の実測。他ヘッダー（S-02 は blur(0px) 実測）は
   コンポーネント側で上書きすること。 */
.o-header--blur{
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
@media screen and (max-width: 1140px){
  /* @small は contrast(100%) blur(50px)（S-03実測） */
  .o-header--blur{
    -webkit-backdrop-filter: contrast(100%) blur(50px);
    backdrop-filter: contrast(100%) blur(50px);
  }
}

/* ページ最上部でのみ透過させたいヘッダー用フック（JSが .is-scrolled を付与） */
.o-header.is-scrolled{ /* 見た目の差分は各ヘッダーのコンポーネントCSSで定義する */ }

/* モーダルメニュー展開中に背面をロックする（studio-modal://menu の置き換え先） */
body.is-menu-open{ overflow: hidden; }

/* ==========================================================================
   8. Lenis スムーススクロール（lerp:0.12 厳守・handoff §2-5）
   --------------------------------------------------------------------------
   有効化の条件分岐（ホーム×モバイルのみ無効）はテーマJS側で行う。
   ========================================================================== */
html.lenis,
html.lenis body{ height: auto; }

/* fixed 要素のズレ防止。handoff §2-5 で必須指定 */
html.lenis{ transform: none !important; }

.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; }
.lenis.lenis-stopped{ overflow: hidden; }
/* TODO: Lenis 公式CSSには `.lenis.lenis-smooth iframe { pointer-events:none }` が含まれるが、
   操作させたい埋め込み（フォーム等）まで殺すため、ここでは採用していない。
   背景動画は .o-embed--bg 側で個別に透過させている。実機で慣性スクロールが
   iframe 上で止まる場合のみ、対象を絞って追加すること。 */

/* ==========================================================================
   9. 表示切替ユーティリティ
   --------------------------------------------------------------------------
   R2（狭い側にも display を明示）を守るための道具立て。
   接尾辞なし = base / --sm = @small(1140) / --tb = @tablet(840)
   --mb = @mobile(540) / --mn = @mini(320)
   例: PCでflex・タブレット以下で非表示 → class="u-d-flex u-d-none--tb u-d-none--mb u-d-none--mn"
       （継承に頼らず、狭い側もすべて書く）
   ========================================================================== */
.u-d-none{ display: none; }
.u-d-block{ display: block; }
.u-d-inline-block{ display: inline-block; }
.u-d-flex{ display: flex; }
.u-d-inline-flex{ display: inline-flex; }
.u-d-grid{ display: grid; }

@media screen and (max-width: 1140px){
  .u-d-none--sm{ display: none; }
  .u-d-block--sm{ display: block; }
  .u-d-inline-block--sm{ display: inline-block; }
  .u-d-flex--sm{ display: flex; }
  .u-d-inline-flex--sm{ display: inline-flex; }
  .u-d-grid--sm{ display: grid; }
}
@media screen and (max-width: 840px){
  .u-d-none--tb{ display: none; }
  .u-d-block--tb{ display: block; }
  .u-d-inline-block--tb{ display: inline-block; }
  .u-d-flex--tb{ display: flex; }
  .u-d-inline-flex--tb{ display: inline-flex; }
  .u-d-grid--tb{ display: grid; }
}
@media screen and (max-width: 540px){
  .u-d-none--mb{ display: none; }
  .u-d-block--mb{ display: block; }
  .u-d-inline-block--mb{ display: inline-block; }
  .u-d-flex--mb{ display: flex; }
  .u-d-inline-flex--mb{ display: inline-flex; }
  .u-d-grid--mb{ display: grid; }
}
@media screen and (max-width: 320px){
  .u-d-none--mn{ display: none; }
  .u-d-block--mn{ display: block; }
  .u-d-inline-block--mn{ display: inline-block; }
  .u-d-flex--mn{ display: flex; }
  .u-d-inline-flex--mn{ display: inline-flex; }
  .u-d-grid--mn{ display: grid; }
}

/* TODO（実画面確認）: /luluwedding の重ねPNG（/1/1）は @tablet で display:none、
   @mobile 以降に display キーが無い唯一の曖昧ケース（specs/_確定事項_ブレークポイント.md §2）。
   375px 幅で目視確認のうえ、u-d-none--mb / u-d-block--mb のどちらを当てるか確定させること。 */

/* ==========================================================================
   10. 汎用ユーティリティ
   ========================================================================== */
/* 視覚的には隠すがスクリーンリーダーには読ませる */
.u-visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* 完全に消す（JSトグル用の汎用フック）。
   ヘッダーの .is-hidden は「消す」ではなく「translateY(-100%) でせり上げる」なので、
   ここで display:none が当たると滑らかに戻れなくなる。明示的に除外する。 */
.is-hidden:not(.o-header){ display: none; }

.u-mw-100{ max-width: 100%; }
.u-w-100{ width: 100%; }
.u-nowrap{ white-space: nowrap; }
.u-break{ overflow-wrap: anywhere; word-break: normal; line-break: strict; }

/* 日本語の改行制御。PC/SP で改行位置を出し分ける二重出力（/company・/forthecompany/company 等）に使う。
   TODO: 切替を @tablet(840) に置くのはこの基盤の既定値。実データ側で PC/SP の
   出し分けBPが違うページがあれば、そのページのCSSで上書きすること。 */
.u-br-pc{ display: inline; }
.u-br-sp{ display: none; }
@media screen and (max-width: 1140px){
  .u-br-pc{ display: inline; }
  .u-br-sp{ display: none; }
}
@media screen and (max-width: 840px){
  .u-br-pc{ display: none; }
  .u-br-sp{ display: inline; }
}
@media screen and (max-width: 540px){
  .u-br-pc{ display: none; }
  .u-br-sp{ display: inline; }
}
@media screen and (max-width: 320px){
  .u-br-pc{ display: none; }
  .u-br-sp{ display: inline; }
}

/* ==========================================================================
   11. モーション配慮
   --------------------------------------------------------------------------
   /company・/forthecompany/company のヒーローは 4.5秒の時間差演出があり、
   アニメーションを一律停止すると要素が出ないおそれがある（handoff §2-7）。
   そのためここでは「一括停止」はせず、スクロール系の演出だけを抑える。
   TODO: 各ページのキーフレーム実装後、reduced-motion 時に確実に最終状態へ落ちるか実機確認する。
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .o-header{
    transition: none;
    transition-delay: 0ms;
  }
}

/* ------------------------------------------------------------------
 * SVGアイコン（Font Awesome スプライト）
 * <i class="fa-*"> の代わりに <svg class="o-fa"><use href="#fa-*"></svg> を使う。
 * currentColor を継承するので、親の color でそのまま着色できる。
 * ------------------------------------------------------------------ */
.o-fa {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em;
	flex: none;
}

/* ==========================================================================
   改行の出し分けユーティリティ（2026-09-14 追加）
   日本語の見出し・キャッチコピーで、スマホ幅だけ語の途中で折り返して
   「社会の当た／り前に。」のようになる箇所に使う。
     <br class="o-br-sp">  … スマホ（≤540px）でだけ改行する
     <br class="o-br-pc">  … PC（>540px）でだけ改行する
   STUDIO の設計ツリーで @mobile 専用の複製テキスト（<br> 位置違い）を持っていた箇所は、
   複製を2つ出すのではなく、このクラスで1つのテキストにまとめてよい。
   ブレークポイント 540 は STUDIO の @mobile と同じ。
   ========================================================================== */
.o-br-sp { display: none; }
@media screen and (max-width: 540px) {
  .o-br-sp { display: inline; }
  .o-br-pc { display: none; }
}