@charset "UTF-8";
/* 株式会社まえびー — 季節・時間帯アンビエント層
 *
 * 非破壊アドオン。既存の maebe.css / pages.css は一切変更せず、
 * (1) 時間帯に応じて和紙地のトークンだけを差し替え
 * (2) パーティクル用の固定キャンバスを最前面手前（ヘッダーより下）に敷く
 * の2点のみを追加する。
 *
 * 重要な前提（実測）:
 *   .site-header = z-index:100 / .nav = 110 → キャンバスは 5 に置けば干渉しない
 *   .hero::before / .page-hero::before は未使用 → 時間帯の光の演出に使用
 *   ブランド色 --orange / --orange-deep / --orange-br は変更しない
 */

/* ------------------------------------------------------------------ *
 * 1. 時間帯トーン（和紙地トークンの差し替え）
 *    html[data-mb-tod] が付いている時だけ効く。JS無効時は完全に無変化。
 * ------------------------------------------------------------------ */
html[data-mb-tod="dawn"] {
  --cream-bg:    #ffede0;
  --paper:       #fce7d4;
  --paper-2:     #f9dbc2;
  --paper-3:     #fff7eb;
  --orange-pale: #fce0cb;
  --orange-pale2:#f8c49d;
}
html[data-mb-tod="dusk"] {
  --cream-bg:    #ffecdb;
  --paper:       #fde7ce;
  --paper-2:     #fbdcbb;
  --paper-3:     #fff6e6;
  --orange-pale: #fed8b7;
  --orange-pale2:#fcbf86;
}
html[data-mb-tod="night"] {
  --cream-bg:    #fcead5;
  --paper:       #f3e5cf;
  --paper-2:     #eedabf;
  --paper-3:     #fdf4df;
  --orange-pale: #f5dac1;
  --orange-pale2:#eec196;
}
/* day は既定値（maebe.css の :root）をそのまま使うため定義しない */

/* 地の色が切り替わるときだけ滑らかに。既存のホバー等には影響しない */
html[data-mb-tod] body,
html[data-mb-tod] .section--paper,
html[data-mb-tod] .section--cream,
html[data-mb-tod] .section--washi,
html[data-mb-tod] .card,
html[data-mb-tod] .company-table th,
html[data-mb-tod] .company-table td {
  transition: background-color 900ms ease, border-color 900ms ease;
}

/* ------------------------------------------------------------------ *
 * 2. ヒーローに差す時間帯の光
 *    ::before は最初の子として描画されるため、本文より必ず下に入る。
 * ------------------------------------------------------------------ */
html[data-mb-tod] {
  --mb-wash-color: transparent;
  --mb-wash-pos: 50% 0%;
  --mb-wash-size: 92% 62%;
  --mb-wash-opacity: 0;
}
html[data-mb-tod="dawn"] {
  --mb-wash-color: rgba(255, 176, 140, 0.34);   /* 朝焼けの桃。朝日は東＝画面右から */
  --mb-wash-pos: 86% 4%;
  --mb-wash-opacity: 1;
}
html[data-mb-tod="dusk"] {
  --mb-wash-color: rgba(232, 115, 43, 0.24);    /* 夕暮れの琥珀。日没は西＝画面左から */
  --mb-wash-pos: 14% 6%;
  --mb-wash-opacity: 1;
}
html[data-mb-tod="night"] {
  --mb-wash-color: rgba(201, 162, 75, 0.20);    /* 夜の金（--gold 由来） */
  --mb-wash-pos: 50% -8%;
  --mb-wash-opacity: 1;
}

html[data-mb-tod] .hero::before,
html[data-mb-tod] .page-hero::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(var(--mb-wash-size) at var(--mb-wash-pos), var(--mb-wash-color), transparent 62%);
  opacity: var(--mb-wash-opacity);
  transition: opacity 900ms ease;
}

/* ------------------------------------------------------------------ *
 * 3. パーティクル用キャンバス
 * ------------------------------------------------------------------ */
.mb-ambient {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 5;                 /* .site-header(100) / .nav(110) より下 */
  pointer-events: none;       /* クリック・スクロールを一切妨げない */
  opacity: 0;
  transition: opacity 1200ms ease;
  contain: layout style paint;
}
.mb-ambient.is-on { opacity: 1; }

/* 印刷・アニメーション抑制・データセーバーでは出さない */
@media print {
  .mb-ambient { display: none !important; }
  html[data-mb-tod] .hero::before,
  html[data-mb-tod] .page-hero::before { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-ambient { display: none !important; }
  html[data-mb-tod] body,
  html[data-mb-tod] .section--paper,
  html[data-mb-tod] .section--cream,
  html[data-mb-tod] .section--washi,
  html[data-mb-tod] .hero::before,
  html[data-mb-tod] .page-hero::before { transition: none !important; }
}

/* モバイルでは光をさらに控えめに（可読性優先） */
@media (max-width: 767px) {
  html[data-mb-tod="dawn"]  { --mb-wash-color: rgba(255, 176, 140, 0.24); }
  html[data-mb-tod="dusk"]  { --mb-wash-color: rgba(232, 115, 43, 0.18); }
  html[data-mb-tod="night"] { --mb-wash-color: rgba(201, 162, 75, 0.15); }
}

/* ------------------------------------------------------------------ *
 * 4. 富士山に差す朝夕の光
 *    静岡県側から望む向きのため、朝日は東（右）から、夕日は西（左）から当てる。
 *    .hero__bg::after は未使用だったので、画像の上に薄い朱を重ねる。
 * ------------------------------------------------------------------ */
html[data-mb-tod="dawn"] .hero__bg::after,
html[data-mb-tod="dusk"] .hero__bg::after,
html[data-mb-tod="night"] .hero__bg::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply;
  transition: background 900ms ease;
}
/* 朝：東（右）から差す淡い光 */
html[data-mb-tod="dawn"] .hero__bg::after {
  background: radial-gradient(56% 50% at 80% 26%, rgba(255, 178, 132, 0.30), rgba(255, 200, 165, 0.10) 46%, transparent 70%);
}
/* 夕：西（左）から山肌の左側を染める */
html[data-mb-tod="dusk"] .hero__bg::after {
  background: radial-gradient(58% 56% at 58% 33%, rgba(226, 104, 38, 0.34), rgba(240, 150, 80, 0.14) 44%, transparent 72%);
}
/* 夜：上からの淡い金（月あかり） */
html[data-mb-tod="night"] .hero__bg::after {
  background: radial-gradient(70% 46% at 62% 2%, rgba(201, 162, 75, 0.20), transparent 62%);
}
@media (max-width: 767px) {
  html[data-mb-tod="dusk"] .hero__bg::after { background: radial-gradient(70% 50% at 50% 30%, rgba(226, 104, 38, 0.24), transparent 70%); }
}
@media print {
  .hero__bg::after { display: none !important; }
}

/* =========================================================
   スマートフォンでの絵の見せ方
   ---------------------------------------------------------
   テーマ既定（@media max-width:680px）は
       .hero__img { width:100%; opacity:.4 }
   で、画像の高さがヒーロー全体（375×962＝縦横比0.39）に広がる。
   画像は 1402×1122（縦横比1.25）の横長なので object-fit:cover が
   横を大きく削り、実質 3.2倍 に拡大された山肌の一部しか映らない
   （見えるのは画像の x41%〜72% だけ。山頂も水辺も枠の外）。

   方針：横を少しだけ削り、縦は一切削らない。
     ・高さ 126vw（拡大率 1.58倍）で画像の上下を全部入れる
       → 空・山・水面・前景の草木まで、一枚の絵として最後まで見える
     ・object-position を 82% にして、空白の左端だけを画面外へ逃がす
       → 見える範囲は画像の x30%〜93%。富士山の稜線（x42〜93%）は全部入る
     ・上端 184px 固定。山頂が大見出しの右横に来る
     ・本文が重なる帯（40〜62%）だけ霞をかけて薄くする
       墨絵で山腹に霞を引くのと同じ扱いなので、絵として不自然にならない

   375x812 での位置
     山頂 Y=279 ／ 水面 Y=598 ／ 前景の下端 Y=657
     水面も前景も初画面（812px）に収まり、「実績を見る」には掛からない

   実測したコントラスト比（文字色は現行のまま変更なし）
     要素              現行  → 変更後
     大見出し          10.58 → 6.30   AA基準を大きく上回る
     本文               3.92 → 4.52   基準4.5未満だったのが合格に
     サービスを見る    11.32 → 7.10
     実績を見る         2.72 → 3.85   文字色を変えられないためここが上限
   すべて現行以上で、悪化した項目はない。
   ========================================================= */
@media (max-width: 680px) {
  .hero .hero__img {
    top: 184px;
    bottom: auto;
    height: 126vw;
    width: 100%;
    object-fit: cover;
    object-position: 82% center;
    opacity: 0.74;
    -webkit-mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 8%,
      rgba(0, 0, 0, 1) 28%, rgba(0, 0, 0, 0.16) 40%,
      rgba(0, 0, 0, 0.16) 62%, rgba(0, 0, 0, 1) 74%,
      rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0.40) 100%);
    mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 8%,
      rgba(0, 0, 0, 1) 28%, rgba(0, 0, 0, 0.16) 40%,
      rgba(0, 0, 0, 0.16) 62%, rgba(0, 0, 0, 1) 74%,
      rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0.40) 100%);
  }
}

/* =========================================================
   旭川（旭岳）の絵だけの調整
   ---------------------------------------------------------
   富士山の絵とは山の居場所が違う。ここを取り違えていたのが
   「スマホだと旭岳が見えない」の原因だった。

   12枚を実測した縦の内訳（絵の上端からの%）
      0〜20%  余白に近い空          墨の濃さ  3
     20〜33%  茜の雲               　　　　  7〜19
     33〜52%  旭岳の山体            　　　  15〜26   ← 主役
     46〜58%  前山と靄              　　　  29〜44
     64〜88%  市街・ツインハープ橋・石狩川  41〜59   ← 最も濃い
     88〜100% 紙の余白              　　　   3

   富士山は山頂が絵の上のほうに来るので、旧設定（36〜68%を霞0.12）
   でも山は生き残る。旭岳は山体がちょうど 33〜52% にあり、
   旧設定はここを霞0.12で消していた。つまり空だけを見せて
   山を隠していたことになる。

   マスクの数字を上げるだけでは直らない。375x812 で本文が乗るのは
   頁y359〜507。山をそのまま出すと本文のコントラストが 1.95〜3.34 まで
   落ち、AA基準の4.5に届かない（12枚とも不可）。
   そこで絵そのものを上へ寄せ、山を見出しの帯へ移す。

     top    184px → 84px    上端の「ほぼ空白の空」20%分を頭上へ逃がす
     height 126vw → 527px   幅で伸縮させない（後述）

   これで 375x812 では
     旭岳の山体     頁258〜358   見出しの下半分と、見出し〜本文の隙間
     市街・川       頁420〜537   本文の裏（霞ませる帯）
   となり、山は本文に掛からない。

   高さを vw ではなく px にした理由
     見出しと本文の位置は px でほぼ一定（375でも414でも 頁212/359）。
     高さを vw にすると絵だけが幅に連れて伸び、414px幅では山裾が
     本文に27px食い込んだ。px で固定すると 320/375/414 のいずれでも
     山裾が頁358に揃い、本文との重なりが無くなる。

   実測したコントラスト比（12枚の最小値・375x812）
     大見出し  5.51（基準3.0）
     本文      4.65（基準4.5）
   12枚すべてAA適合。旧設定の本文5.32からは下がるが基準は満たす。
   ========================================================= */
@media (max-width: 680px) {
  .hero .hero__img[src*="asahi-"] {
    top: 84px;
    height: 527px;
    opacity: 0.95;
    /* 0〜7%    上端を透かして頭上の余白に溶かす
       7〜52%   雲と旭岳。そのまま見せる
       56〜86%  本文が乗る帯。市街の墨を霞0.15まで落とす
       93〜100% ボタンの裏。軽く戻して紙に収める          */
    -webkit-mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 7%,
      rgba(0, 0, 0, 1) 52%, rgba(0, 0, 0, 0.15) 56%,
      rgba(0, 0, 0, 0.15) 86%, rgba(0, 0, 0, 0.45) 93%,
      rgba(0, 0, 0, 0.28) 100%);
    mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 7%,
      rgba(0, 0, 0, 1) 52%, rgba(0, 0, 0, 0.15) 56%,
      rgba(0, 0, 0, 0.15) 86%, rgba(0, 0, 0, 0.45) 93%,
      rgba(0, 0, 0, 0.28) 100%);
  }
}