@charset "UTF-8";
/* ==========================================================================
   JOMONÖW — Common Styles
   ファイル: common.css
   役割: フォント読み込み / 共通タイポグラフィ / 共通パーツ
   ========================================================================== */

/* --------------------------------------------------------------------------
   初期描画チラつき防止 (FOUC: Flash of Unstyled Content) 対策
   ---
   HTML→CSS適用までの極短時間、デフォルトの白背景が見えてしまう問題を防ぐ。
   <body>に最初からワイン色を設定し、オープニング完了後にHomeカラー(明色)へ。
   オープニング中: body自体がワイン色（OP-1, OP-2の背景と一致）
   OP-3シーンへ: body も明色 (--color-bg-light) へ
   オープニング完了後: body は明色のまま (Home 表示)
   -------------------------------------------------------------------------- */
body {
  background-color: var(--color-wine);   /* v46.1: html は除外(html背景は reset.css=薄グレー / home.css=Homeのみ小豆 で制御)。ここは演出のチラつき防止で body のみ */
}
/* v46.9: 演出スキップ時(ブラウザ戻り・内部遷移復帰 = html.intro-skip)は最初から明色。
   intro-gate.js が <head> 内で即時にクラス付与するため、wine が描画される前に効く
   → 「Homeに戻ると一瞬小豆色になる」チラつきを解消 */
html.intro-skip body {
  background-color: var(--color-bg-light);
}
body {
  transition: background-color 0.6s var(--ease-out);
}
/* OP-3 シーン以降は body も明色 */
body[data-scene="3"],
body:not([data-opening="active"]) {
  background-color: var(--color-bg-light);
}

/* --------------------------------------------------------------------------
   Adobe Fonts (Web Project: nqd8dsn) は <head> 内で <script> 読み込み
   Google Fonts も同様に <head> 側で読み込む
   ※CSS の @import は描画ブロックになりやすいため HTML 側に集約
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   FOUT (Flash of Unstyled Text) 対策
   ---
   Adobe Fontsのスクリプトローダーは <html> タグに以下のクラスを付与:
     - wf-loading  : 読み込み中
     - wf-active   : 読み込み完了
     - wf-inactive : 読み込み失敗 (3秒タイムアウト)
   ---
   方針: 「ブランド体験の質を最優先」
     - 読み込み中 → テキスト不可視（フォントが当たる瞬間の切り替わりを隠す）
     - 読み込み完了 → フェードインで自然に出現
     - 読み込み失敗 → フォールバックで表示（読めないより良い）
   ---
   .fout-guard クラスを付けた要素にだけ適用するため、
   システムフォントで OK な要素（ボタン・小さい注釈等）は影響を受けない
   -------------------------------------------------------------------------- */

/* 読み込み中: フォント依存のテキストを透明に */
html.wf-loading .fout-guard {
  opacity: 0;
}

/* 読み込み完了: フェードインで出現 */
html.wf-active .fout-guard {
  opacity: 1;
  transition: opacity 0.4s var(--ease-out);
}

/* 読み込み失敗 (タイムアウト) でも見えるように */
html.wf-inactive .fout-guard {
  opacity: 1;
}

/* オープニングは特に「気持ち悪さ」を出したくないのでより厳格に
   → .fout-strict は wf-active になるまで完全に display:none に近い扱い
   ※ レイアウト崩れを避けるため visibility を使う */
html.wf-loading .fout-strict {
  visibility: hidden;
}
html.wf-active .fout-strict {
  visibility: visible;
  animation: foutFadeIn 0.5s var(--ease-out) both;
}
html.wf-inactive .fout-strict {
  visibility: visible;
}

@keyframes foutFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* reduced motion 対応 */
@media (prefers-reduced-motion: reduce) {
  html.wf-active .fout-guard,
  html.wf-active .fout-strict {
    transition: none;
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   タイポグラフィ基底
   -------------------------------------------------------------------------- */

body {
  font-size: var(--fs-body);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-normal);
}

/* セクション見出し（共通ヘッダーパート） */
.section-header {
  font-family: var(--font-display);
  font-size: var(--fs-header);
  letter-spacing: var(--ls-display);
  color: var(--color-wine-typo);
  text-align: center;
  line-height: 1;
}

/* 日本語縦書きユーティリティ（op-1 等で使用予定） */
.is-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* --------------------------------------------------------------------------
   共通コンテナ
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: var(--pad-section-x);
}

/* セクション共通の縦余白 */
.section {
  padding-block: var(--pad-section-y);
}

/* --------------------------------------------------------------------------
   セクション間の余白 (全セクション共通: 上下24px → 隣接で24px)
   ---
   Home / Statement / Design / Manifest / About が連続して並ぶ際、
   セクション同士の間に 24px の余白をあける (サイト背景 #f7f6f6 が見える)。
   フッターは除外 (フッター直前にも 24px は入れる = CDガイド準拠)。
   -------------------------------------------------------------------------- */
.site-section {
  margin-top: var(--section-gap);
}

/* 最初のセクションには上余白不要 (Home に続く最初のセクション以外) */
.site-section:first-of-type {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   ヘッダーパート（Statement / Design / Manifest / About 共通）
   仕様: 背景パターン (pttn-big-2.svg) を天地 400px にトリミング
   -------------------------------------------------------------------------- */

.section-banner {
  position: relative;
  width: 100%;
  height: var(--header-pattern-h);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.section-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: var(--z-base);
}

.section-banner__title {
  position: relative;
  z-index: var(--z-content);
}

/* ==========================================================================
   Reveal — スクロールイン演出 (共通基盤)
   ---
   要素が画面内に入ったら、ふわっと登場する演出。
   reveal.js が IntersectionObserver で .is-visible を付与。
   一度登場したら状態維持 (1回限り、戻ってきても再アニメしない)。
   ---
   使い方:
   <div class="reveal">...</div>              フェードアップ (下20px→0)
   <div class="reveal reveal--fade">...</div>  フェードのみ (移動なし)
   <div class="reveal reveal--delay-1">..</div> 0.12s 遅延 (連続登場用)
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  /* will-change で描画最適化 */
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* フェードのみ (写真・背景など、移動させたくない要素) */
.reveal--fade {
  transform: none;
}
.reveal--fade.is-visible {
  transform: none;
}

/* 左スライドイン (横方向)。
   親に overflow:hidden の窓を用意し、その中で左外→定位置へ。
   Design バナーの写真スライド用。 */
.reveal--slide-left {
  opacity: 0;
  transform: translateX(-100%);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}
.reveal--slide-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* 下から上にスライドイン (縦方向、控えめ60px)。
   Design バナーの台紙スライドアップ用 (v19.4)。
   ease-out-quint で「すっと止まる」感じに。 */
.reveal--slide-up {
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal--slide-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 登場ディレイ (連なって出る演出、0.12s刻み) */
.reveal--delay-1 { transition-delay: 0.12s; }
.reveal--delay-2 { transition-delay: 0.24s; }
.reveal--delay-3 { transition-delay: 0.36s; }
.reveal--delay-4 { transition-delay: 0.48s; }
.reveal--delay-5 { transition-delay: 0.60s; }

/* --------------------------------------------------------------------------
   Reduced Motion: 動きを無効化、即表示
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--slide-left {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   .tsuku-bold — 筑紫Aオールド明朝 オプティカル太らせ (共通ユーティリティ)
   ---
   FOT-筑紫Aオールド明朝 Pr6N はやや細いため、text-stroke で少し太らせる。
   ---
   セオリー (CD確定):
     stroke幅 = フォントサイズ × (0.5 / 24) ≒ フォントサイズの 2.083%
     → 24pt:0.5pt / 48pt:1pt / 12pt:0.25pt
   1em はその要素自身の font-size なので、calc(1em * 0.02083) で
   サイズに比例した stroke 幅が自動で決まる (サイズ指定だけでOK)。
   ---
   色は currentColor (文字色と同じ)。
   paint-order: stroke fill で、stroke が文字の内側を侵食しすぎないようにする。
   ---
   使い方: 筑紫オールド明朝のテキスト要素に .tsuku-bold を付与。
   ルビ (rt) に付ければ、rt 自身の font-size 基準で自動計算される。
   ※ Manifest 縦書きコピーには使わない (あちらは「細く見せる」別意図)。
   ========================================================================== */
.tsuku-bold {
  /* shuei-light と同様、個別プロパティで指定 (ショートハンド回避で確実に) */
  -webkit-text-stroke-width: calc(1em * 0.02083);
  -webkit-text-stroke-color: currentColor;
  paint-order: stroke fill;
  font-feature-settings: "palt" 1;   /* v25.6: 文字詰め(約物半角含む)を標準装備
                                        v25.8: 横組み標準は palt のみ。-0.05em は強すぎのため撤廃 (CD見本準拠) */
}

/* ==========================================================================
   .tsuku-mid — 巨大サイズ(タイトル)用。tsuku-bold の stroke を半分に
   ---
   文字詰め(palt)・paint-order・stroke色は tsuku-bold を踏襲。stroke幅のみ半分。
   tsuku-bold: 48pt → 1.0px (係数 0.02083) / tsuku-mid: 48pt → 0.5px (係数 0.01042)
   大サイズ(96/148px等)で線が重くなりすぎないようにする (CD指示 v28.2)。
   ========================================================================== */
.tsuku-mid {
  -webkit-text-stroke-width: calc(1em * 0.01042);
  -webkit-text-stroke-color: currentColor;
  paint-order: stroke fill;
  font-feature-settings: "palt" 1;
}

/* ルビ・英数サブ等、字詰め不要箇所は各CSSで letter-spacing を上書き。
   縦書きupright箇所 (Statementコピー等) は palt/halt/字詰めを各CSSで無効化すること */

/* ==========================================================================
   .shuei-light — DNP秀英アンチック Std オプティカル細らせ (共通ユーティリティ)
   ---
   秀英アンチックを、背景色の text-stroke で少し細く見せる。
   .tsuku-bold の逆方向 (太らせるのでなく細く見せる)。
   ---
   セオリー (CD確定):
     stroke幅 = フォントサイズ × (0.5 / 36) ≒ フォントサイズの 1.389%
     → 36pt:0.5pt / 44pt:0.611pt
   1em はその要素自身の font-size なので、calc(1em * 0.01389) で
   サイズに比例した stroke 幅が自動で決まる。
   ---
   色は「背景色」を当てることで文字を細く見せる手法。
   背景色は箇所ごとに違う (OP-1:#5c0b2e / Manifest:#fdd700) ため、
   --shuei-light-color 変数で使用箇所ごとに指定する。
   ---
   使い方:
     .shuei-light を付与し、その要素 (または親) で
     --shuei-light-color に背景色を指定する。
   ========================================================================== */
.shuei-light {
  /* ショートハンド (-webkit-text-stroke) に calc() と var() を同時指定すると
     ブラウザによってパースに失敗するため、個別プロパティに分割する。 */
  -webkit-text-stroke-width: calc(1em * 0.01389);
  -webkit-text-stroke-color: var(--shuei-light-color, #ffffff);
  /* paint-order は指定しない (デフォルト = fill stroke)。
     ---
     「細く見せる」には、fill (文字本体) を先に描き、その上から
     背景色の stroke を描く必要がある。stroke が文字の輪郭を
     背景色で侵食し、文字が細く見える。
     paint-order: stroke fill にすると fill が stroke を覆い、
     細く見せる効果が打ち消されてしまう (← v6.5/6.6 が効かなかった原因)。 */
}

/* ==========================================================================
   SP (≤481px) — 共通: セクションヘッダー（パターン+見出し）
   ========================================================================== */
@media (max-width: 481px) {
  /* セクション見出しサイズ: PC 56px → SP 38px */
  :root {
    --fs-header: 38px;
    --header-pattern-h: 200px;
    --section-gap: 12px;  /* PC 24px → SP 12px */
  }
}

/* ==========================================================================
   site-main の上アキ (v19.6)
   ---
   .site-home (Statement動画含む) と .site-main 内 最初のセクション (Design)
   の間のアキ。.design { margin-top } では margin collapse によって
   親 <main> の外に漏れて効かなかったため、<main> の padding-top で確実に。
   PC: 24px / TAB,SP: 12px
   ========================================================================== */
.site-main {
  padding-top: 24px;
}

@media (max-width: 1024px) {
  .site-main {
    padding-top: 12px;
  }
}

/* ===== 画像・SVG ダウンロード抑止 (Lv.A) ===== */
/* ドラッグ保存 / SP長押し保存メニューの抑止。メディア要素のみ対象＝本文選択に影響なし */
img,
picture,
svg,
video,
canvas {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
