@charset "UTF-8";

/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {
  /* Brand color */
  --c-brown:          #692c1a; /* MyLiv Brown（基本文字色） */
  --c-white:          #ffffff;

  /* Floral color */
  --c-floral-red:     #ea635a;
  --c-floral-green:   #3fa07c;
  --c-floral-orange:  #ee8e40;
  --c-floral-blue:    #45bdea;

  /* Service color */
  --c-peace:          #004b90; /* ピースダイアログ */
  --c-kankojin:       #006a71; /* 観光人クエスト */
  --c-program:        #0ca490; /* MY LIV PROGRAM */

  /* Service card background */
  --c-floral-yellow:  #f3ba41; /* 吹き出し等（Figma Union 2001:7961/7715）。下線 Line72 のみ #f3ba42（Figma原本が1違い） */
  --c-bg-cream:       #fef3e3; /* b-area の箱など。--c-bg-peace と同値だが意味が異なるため別トークン */
  --c-bg-peace:       #fef3e3;
  --c-bg-kankojin:    #fef8dc;
  --c-bg-program:     #e7f6f4;

  /* Layout */
  --w-content:        980px;  /* PC コンテンツ幅 */
  --pad-sp:           20px;   /* SP 左右余白 */
  --header-h-sp:      96px;
  --header-h-pc:      134px;

  /* Typography */
  --ff-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --ff-en:   "Inter", var(--ff-base);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ff-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-brown);
  background: var(--c-white);
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg { max-width: 100%; height: auto; vertical-align: bottom; }

a { color: inherit; text-decoration: none; transition: opacity .3s; }
a:hover { opacity: .7; }

button {
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
}

/* ==========================================================================
   Layout base
   ========================================================================== */

/* MV は position:fixed（カーテン演出）。本文はその分だけ下から始める */
/* ==========================================================================
   ページ表示時のフェードイン（2026-09-01）
   白い画面から本文がふわっと現れる。初回表示・ページ遷移のたびに動く。

   ▼ なぜ .l-page や body ではなく html::before の白い幕なのか
   要素に animation を当てるとその要素が「固定配置の基準」になるため、
   .l-page / body を対象にすると中の position:fixed（.l-header z300 /
   .l-globalMenu z200 / .p-mv）がアニメ中だけ基準を変え、終了時に飛ぶ。
   幕を独立させれば本文の重ね合わせには一切触れない。

   ▼ なぜ JS を使わないのか
   ページ編集画面は JavaScript OFF で動作する（A-20）。JS でクラスを付ける
   方式だと JS 無効時に本文が opacity:0 のまま残る危険がある。

   ▼ 🔴 既定を opacity:0 にしてある理由（フェイルセーフ）
   幕は「既定は透明。アニメーションの間だけ白くなる」という向きで書く。
   animation-fill-mode は付けない。
   こうしておくと、アニメーションが走らない状況——タブが非表示のまま
   （ブラウザは非表示タブのアニメを停止する）／印刷／動作を減らす設定／
   アニメ非対応——でも幕は透明のままで、本文が白く覆われる事故が起きない。
   逆向き（既定 opacity:1 ＋ forwards）で書くと、これらの状況で
   画面が真っ白のまま固まる。
   ========================================================================== */
@keyframes pageVeilOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;                 /* .l-header(300) / .l-globalMenu(200) より上 */
  background: var(--c-white);
  pointer-events: none;          /* 再生中でもクリックを妨げない */
  opacity: 0;                    /* 既定は透明（上記フェイルセーフ） */
  animation: pageVeilOut .45s ease-out;
}

/* 動きを減らす設定の環境ではフェードしない（既定が透明なので止めるだけで安全） */
@media (prefers-reduced-motion: reduce) {
  html::before { animation: none; }
}

/* CMS のページ編集画面では出さない（管理画面ごと覆ってしまうため）。
   #vcbody-wrapper は編集画面にしか存在しない（本番公開ページには無い） */
html:has(#vcbody-wrapper)::before { animation: none; }

/* 印刷時も不要 */
@media print {
  html::before { display: none; }
}

.l-page {
  position: relative;
  overflow: hidden;
  background-color: #eef4fa;
  padding-top: 100vh;
  padding-top: 100svh;
}

/* vibit CMS のページ編集画面限定の上書き。
   編集画面は本体HTMLをそのまま #vcbody-wrapper の中に描画する
   （_html.cgi 実測。本番公開ページに #vcbody-wrapper は存在しないため
   このセレクタは編集画面にしか効かない）。
   MV が position:fixed のまま確保していたこの余白を編集画面でも残すと、
   MV を通常フローに戻した後（sections.css 側）に巨大な空欄ができるため
   ここで 0 にする。 */
#vcbody-wrapper .l-page {
  padding-top: 0;
}

main { position: relative; }

/* MV 以降の本文を包むラッパー。
   背景タイルをここへ敷くことで、スクロール時に固定 MV の上へ
   「幕」のようにかぶさる。bg-tile.jpg は Figma の haikei タイルを
   上下反転で連結した継ぎ目のない画像（縦 4 枚分）。repeat-y で
   ページがどれだけ長くても境目の線なく続く。 */
/* 上端のカーテン（MV との境目）
   2026-08-19 クライアント指示によりアーチ状の弧から直線カーテンに変更。
   上端を削り取って表現するので、削れた部分からは背面の MV が見える。

   形は単純な矩形（上端が水平線）。
   マスクは 2 枚重ね（既定の add 合成）:
     1 枚目 = 上端 --arc-h ぶんだけの弧の形（SVG／縦横とも引き伸ばす）
     2 枚目 = その下すべてを塗りつぶす単色
   --arc-h（弧の深さ）は parallax.js がスクロールに合わせて
   最大値 → 0 へ減らすので、幕がせり上がるほど直線に戻る。
   JS 無効時は最大値のまま＝ファーストビューの見た目で固定。 */
.l-mainBg {
  --arc-max: 40px;          /* カーテンの最大の掛かり（スクロール 0 のとき） */
  --arc-h: var(--arc-max);  /* 現在の掛かり。parallax.js がインラインで上書き */
  /* 2026-08-19 クライアント指示：アーチ状の弧ではなく直線カーテンに変更。
     形状は単純な矩形（上端が水平線）にし、--arc-h の増減で高さが変わる
     「幕」の動き自体は維持する（parallax.js は変更不要） */
  --arc-shape: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0 0H100V100H0Z'/></svg>");
  position: relative;
  z-index: 1;
  background-color: #eef4fa;
  background-image: url("../img/bg-tile.jpg");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 1440px auto;

  -webkit-mask-image: var(--arc-shape), linear-gradient(#000, #000);
          mask-image: var(--arc-shape), linear-gradient(#000, #000);
  -webkit-mask-size: 100% var(--arc-h), 100% calc(100% - var(--arc-h) + 1px);
          mask-size: 100% var(--arc-h), 100% calc(100% - var(--arc-h) + 1px);
  -webkit-mask-position: top center, bottom center;
          mask-position: top center, bottom center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

@media (max-width: 767px) {
  .l-mainBg { --arc-max: 20px; }
}

/* vibit CMS のページ編集画面限定の上書き（#vcbody-wrapper の注記は本ファイル
   .l-page の項、および sections.css の .p-mv の項を参照）。
   上端の弧は mask で .l-mainBg の上端を最大 40px（SP 20px）削り取り、
   背面の MV を覗かせる表現。編集画面では MV が固定でなくなり通常のフローに
   入るため、この「覗き穴」がブロック挿入用のオレンジ色のバーと重なって
   邪魔になる。.l-mainBg.is-flat と同じ方法（mask-image: none）で編集画面
   限定に無効化し、上端がまっすぐな矩形に戻るようにする。
   本番公開ページの弧の見た目は一切変更しない。 */
#vcbody-wrapper .l-mainBg {
  -webkit-mask-image: none;
          mask-image: none;
}

/* 下層ページは固定 MV を持たないので上端の弧は使わない。
   弧は「背面の MV を覗かせる」ための表現で、MV が無いと
   .l-page の地色が覗くだけになるため。
   body に class を付けられない（ガイドライン 1）ので
   .l-mainBg 自身の修飾子で切り替える。 */
.l-mainBg.is-flat {
  -webkit-mask-image: none;
          mask-image: none;
}

/* 下層ページ用のページ土台（MV ぶんの padding-top を持たない） */
.l-page.is-sub { padding-top: 0; }

/* ページごとの背景色
   サービス 3 ページだけ地色が違う（Figma comp 実測）。
   背景は同じテクスチャの色違いなので、タイル画像を差し替える。
   body に class を付けられない（ガイドライン 1）ため、
   .l-page / .l-mainBg 自身の修飾子で切り替える。

   geo 値は comp の左右端から地色ピクセルだけを抜き出して実測:
     既定（青）  薄 #e2f1f9 → 濃 #a5d2e7
     peace       薄 #f9f6f0 → 濃 #eac9b6   05 ピースダイアログ
     kankojin    薄 #fbf8de → 濃 #e6e9bd   06 観光人クエスト
     program     薄 #e7f2e7 → 濃 #a1d2ac   07 MY LIV PROGRAM */
.l-page.is-peace,
.l-mainBg.is-peace    { background-color: #f7f3ed; }
.l-page.is-kankojin,
.l-mainBg.is-kankojin { background-color: #fbf7d7; }
.l-page.is-program,
.l-mainBg.is-program  { background-color: #e3f0e4; }

.l-mainBg.is-peace    { background-image: url("../img/bg-tile-peace.jpg"); }
.l-mainBg.is-kankojin { background-image: url("../img/bg-tile-kankojin.jpg"); }
.l-mainBg.is-program  { background-image: url("../img/bg-tile-program.jpg"); }

@media (min-width: 1440px) {
  .l-mainBg { background-size: 100% auto; }
}

/* コンテンツ幅ラッパ（各セクションで使用） */
.l-inner {
  width: 100%;
  max-width: calc(var(--w-content) + var(--pad-sp) * 2);
  margin-inline: auto;
  padding-inline: var(--pad-sp);
}

/* ==========================================================================
   Utility
   ========================================================================== */
.u-visuallyHidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* SP/PC 出し分け（JS 非依存） */
.is-pcOnly { display: none; }
.is-spOnly { display: block; }

/* 画像の PC/SP 出し分け。
   vibit CMS は <img> しか走査しない（pageCompile.cgi:410-413）ため <picture> を使えず、
   img 2 本をこのクラスで出し分ける。
   ⚠️ `.b-img__f img { display:block }`（blocks.css:653）や `.b-imgText__img img`
   `.b-cols__img img` `.b-area__head img` `.b-themeGrid__map img` は詳細度 (0,1,1) で、
   上の `.is-pcOnly` (0,1,0) に勝ってしまう（しかも blocks.css は global.css より後に読まれる）。
   img に限定した !important で確実に出し分ける。img 以外の .is-pcOnly/.is-spOnly
   （.c-newsCard / .b-circleText__lead / .c-petals__i など）には影響しない。 */
img.is-pcOnly { display: none  !important; }
img.is-spOnly { display: block !important; }

/* SP だけで改行する。Figma のテキストノード名に入っている空白が
   デザイン上の改行位置なので、そこに <br class="br-sp"> を置く。
   PC は display:none で改行しない */
.br-sp { display: inline; }

/* 語中で折り返させない（既定では "Well-being" がハイフンの後で割れる）*/
.u-nobr { white-space: nowrap; }

@media (min-width: 768px) {
  body { font-size: 16px; }
  .is-pcOnly { display: block; }
  .is-spOnly { display: none; }
  .br-sp     { display: none; }
  img.is-pcOnly { display: block !important; }
  img.is-spOnly { display: none  !important; }
}