/* templates/sites/yuti-kaihatsu/styles.css
 *
 * playbook 規約: 全ルール [data-site="yuti-kaihatsu"] 配下 / @theme・@utility 禁止 /
 * トークンは --site-*。
 * デザイン系譜: stp-corp.com クローン (yamada-kensetsu) を複製し、メインカラーを赤 → 黄へ。
 *
 * 黄の出し方 (2026-09-04、先方要望「黄色をもっと強く・ロゴの黄で」+ ユーザー指示
 * 「黄色を強くするなら背景色調整。部分の黄色はロゴに寄せて、うっすい黄色で黄色っぽい雰囲気に」):
 *   1. 背景 (雰囲気の主役): 灰色だった地 (#f4f4f4) をロゴ黄の薄い tint に (--site-yellow-pale ≒ 13%、
 *      写真なしパネルだけ一段濃い --site-yellow-soft ≒ 24%)。白セクションとの交互で黄色っぽさを出す。
 *      CTA (共通部品) の地は薄黄。全ページの並びが 白 ↔ 薄黄 の交互になるように各ページの section を置く (09-05):
 *        TOP      : 挨拶 薄黄 → 事業内容 白 → バナー 白 → CTA 薄黄 → フッター #faf8f4
 *        /services: 事業内容 白 → CTA 薄黄
 *        /about   : 会社概要 薄黄 → 資格 白 → 実績 薄黄 → 拠点 白 → CTA 薄黄
 *        /recruit : 採用 白 (このために白) → CTA 薄黄
 *        /contact : フォーム 薄黄 (CTA なし)
 *      フッターは承認版の #faf8f4 (黄でも白でもない。上端のロゴ黄 6px で区切る)。
 *      薄黄は 1 色だけ (CTA のクリーム #fdf6e3 / フッターの soft・pale は 09-04 / 09-05 に「気に入らない」で廃止。
 *      バナー列だけ薄黄が帯で残ると「一部黄色はおかしい」→ 白)。
 *      tint は大きな地だけ。表の見出しセル・カード・タブ列など小さな面は無彩色 (#fafafa / #f0f0f0) のまま
 *      (薄くても小さな黄の面を散らすと「キモい」: 09-04 会社概要・採用で差戻し)
 *   2. 部分の黄 (罫線・バー・マーカー・下線・アイコンの丸・上端の帯・琵琶湖マーク・CTA の筆記体 Contact): ロゴ黄 --site-yellow そのもの。
 *      09-05「ロゴの黄色もうちょい活用」で 4 箇所追加 (ユーザー選択): CTA の筆記体 / 見出し英字ラベル前の琵琶湖マーク /
 *      下層タイトル帯の見出し下バー / 会社概要の表の左端 4px。いずれも線・マーク・装飾文字で、面は増やしていない。
 *      ロゴ黄のベタ帯 (CTA) は 09-04「違和感しかない」、ロゴ黄のピル (CTA ボタン) は 09-05「キモい」で不採用
 *      → ボタンは面を塗らない (白地 + 黒の細枠 .site-btn)。文中のリンクは「黒文字 + 黄下線 (.site-link)」
 *      (例外は /contact フォームの送信ボタンだけ黄ベタ)
 *   3. 文字は黒 (#222) 系。黄を白地の文字色にはしない (1.5:1)。暗い写真の上の eyebrow だけ黄文字
 *   やらない: 黄の小チップ・ピル・ラベル塗り (08-27 / 09-04 / 09-05 に不評) / 黒地の面・黒フッター /
 *             承認済みレイアウト (ヒーロー・フッター・ロゴ) を色の都合で作り替える (09-04 に「改悪」)
 */

[data-site="yuti-kaihatsu"] {
  /* font は lib/fonts の共用 instance (CSS 重複防止)。旧変数名は alias で維持 */
  --font-yt-lato: var(--font-lato);
  --font-yt-noto: var(--font-noto-sans-jp);
  --font-yt-script: var(--font-great-vibes);
  --site-yellow: #e9d920; /* ロゴ黄 (C0 M0 Y100 K10)。部分の黄はこれ 1 色。上に載せる文字は #222 (10.9:1) */
  --site-yellow-pale: #fcf9e2; /* ロゴ黄 ≒13% を白に混ぜた地。灰色 (#f4f4f4) の代わり */
  --site-yellow-soft: #f8f3c8; /* ≒24%。フッター・写真なしパネルなど一段濃い (大きな) 地 */
  --site-black: #1a1a1a; /* .site-link の hover 下線色にだけ使う (黒い面は作らない) */
  --site-ink: #333333;
  --site-body-bg: var(--site-yellow-pale);
  --site-swiper-arrow: #ffffff;
  --site-accent: #1a1a1a; /* 標準 ContactForm のボタン色 (白文字が載る) */

  font-family: var(--font-yt-lato), var(--font-yt-noto), "Hiragino Kaku Gothic ProN",
    Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--site-ink);
  background: var(--site-body-bg);
}

/* ボタン (CTA のフォーム導線): 白地 + ロゴ黄の枠 2px + 黒文字 + アイコンのアウトライン。面は塗らない
 * (黄ベタのピルは 09-05「キモい」、電話と同じ黒文字 + 黄下線は「電話番号と一緒のデザイン」で不評)。
 * 黒枠 → ロゴ黄の枠は 09-05 の比較画像 (1 黒枠 / 2 黒ベタ / 3 黄ベタ / 4 黄枠) でユーザーが 4 を選択。
 * hover は枠と文字を保ったまま地をごく薄い灰に (黒ベタに反転しない: 黒の面は作らない) */
[data-site="yuti-kaihatsu"] .site-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 32px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  background: #fff;
  border: 2px solid var(--site-yellow);
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}
[data-site="yuti-kaihatsu"] .site-btn:hover {
  background: #f4f4f4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* 英字ラベル (見出しの eyebrow): 塗りなしの小さな字間広め。白地では黒、写真の暗幕の上では黄 (-on-dark) */
[data-site="yuti-kaihatsu"] .site-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.25em;
  color: #222;
}
[data-site="yuti-kaihatsu"] .site-eyebrow-on-dark {
  color: var(--site-yellow);
}

/* 白地のリンク (電話・メール・「詳しく見る」): 黒文字 + 黄の下線。hover で下線が黒に */
[data-site="yuti-kaihatsu"] .site-link {
  color: #222;
  font-weight: 700;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 2px solid var(--site-yellow);
  transition: border-color 0.2s ease-in-out;
}
[data-site="yuti-kaihatsu"] .site-link:hover {
  border-bottom-color: var(--site-black);
}

/* 見出し下の短いバー (線の使い方の基本形) */
[data-site="yuti-kaihatsu"] .site-bar {
  display: block;
  width: 64px;
  height: 5px;
  border-radius: 9999px;
  background: var(--site-yellow);
}

/* 鉤括弧引用のマーカー強調 (代表挨拶などの本文用): 蛍光ペン風 */
[data-site="yuti-kaihatsu"] .site-marker {
  font-weight: 700;
  background: linear-gradient(transparent 58%, rgba(233, 217, 32, 0.6) 58%);
  /* 「」の語句は行末で割らない (「未来につなが／る」のようにマーカーが途切れる、2026-10-11)。
     前後では折り返せるので語句ごと次の行へ送られる。最長の社是 19 字 × 15.5px ≈ 295px は 375px 幅でも 1 行に収まる */
  white-space: nowrap;
}

/* ============================================================
 * ヒーロー動画 + イントロ (HeroVideo.tsx と対)。状態は #top[data-intro="playing" | "done"]
 * - playing: 動画の箱 (.yk-hero-box) を fixed で全画面に、ヘッダーは負 margin + 透明で上に隠す。
 *   黒地に contain = 字幕 (下端) や縦書き (右端) を切らない (cover だと 16:9 でない画面で欠ける。
 *   動画は宇宙の黒が地なので黒帯が馴染む)
 * - done:    箱を通常フローに戻し、ヘッダーの margin が 0 へ・ヒーローの高さが 16:9 (上限 100svh) へ
 *   transition → ヘッダーが降りてきて動画が押し下がりつつ縮む「スッと」。
 *   in-flow の .yk-hero は playing 中も 100svh を占め、下のセクションを画面外に置く
 *   (reveal 効果が overlay の裏で先に走らないように)
 * ============================================================ */
/* 終わり方の時間割 (HeroVideo.tsx の HOLD_* と対): ending に入る = ボタン 0.3s で消える + 幕が
 * --yk-curtain-delay (自然終了 1s = ロゴの最終フレームの余韻 / スキップ 0s) 待ってから 0.7s で下りる
 * → 黒 0.3s → done = ヘッダー 1.1s で降りる (fade は 0.3s 遅れて 0.9s) + ヒーロー 1.1s で 16:9 に
 * + 幕 0.25s 遅れて 1.2s で上がる (裏で先頭に巻き戻したループが黒からフェードイン) + ボタン 0.6s 遅れて 0.6s で戻る */
[data-site="yuti-kaihatsu"] .yk-hero {
  position: relative;
  height: 56.25vw; /* 16:9 */
  max-height: 100vh;
  max-height: 100svh;
  overflow: hidden;
  background: #000;
  transition: height 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-site="yuti-kaihatsu"] [data-intro="playing"] .yk-hero,
[data-site="yuti-kaihatsu"] [data-intro="ending"] .yk-hero {
  height: 100vh;
  height: 100svh;
  transition: none;
}
[data-site="yuti-kaihatsu"] .yk-hero-box {
  position: absolute;
  inset: 0;
  background: #000;
}
[data-site="yuti-kaihatsu"] [data-intro="playing"] .yk-hero-box,
[data-site="yuti-kaihatsu"] [data-intro="ending"] .yk-hero-box {
  position: fixed;
  z-index: 100000; /* ヘッダー 1000 / ハンバーガー 1001 / PageTop 99999 の上 */
  touch-action: none;
  overscroll-behavior: none;
}
[data-site="yuti-kaihatsu"] .yk-hero video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* ポスター (HeroVideo.tsx): src が入る前 / 自動再生が拒否された / reduced-motion の間、video の上に重ねる
 * (iOS が video に描く標準 UI ごと隠す。ボタン群 z3 と幕 z1 より下、video より上) */
[data-site="yuti-kaihatsu"] .yk-hero-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  pointer-events: none;
}
/* iOS Safari が controls 無しの video にも出す再生 (斜線) ボタン・全画面などのオーバーレイを消す (保険。
 * iOS 17+ の標準 UI はこれでは消えないので、本命は上のポスター重ね + autoplay 属性を使わないこと) */
[data-site="yuti-kaihatsu"] .yk-hero video::-webkit-media-controls,
[data-site="yuti-kaihatsu"] .yk-hero video::-webkit-media-controls-panel,
[data-site="yuti-kaihatsu"] .yk-hero video::-webkit-media-controls-start-playback-button,
[data-site="yuti-kaihatsu"] .yk-hero video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0;
  pointer-events: none;
}
/* 黒幕: 動画の上・ボタンの下 */
[data-site="yuti-kaihatsu"] .yk-hero-curtain {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease-in-out 0.25s; /* done: 上がる */
}
[data-site="yuti-kaihatsu"] [data-intro="ending"] .yk-hero-curtain {
  opacity: 1;
  transition: opacity 0.7s ease-in var(--yk-curtain-delay, 0s); /* ending: (余韻の後) 下りる */
}
/* done 後のループの継ぎ目 (HeroVideo.tsx restartLoop): 0.5s で下りて、先頭に戻ったら done 側の transition で上がる */
[data-site="yuti-kaihatsu"] .yk-hero-box[data-restart="1"] .yk-hero-curtain {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}
/* done 後: 箱のタップで一時停止 / 再生 */
[data-site="yuti-kaihatsu"] [data-intro="done"] .yk-hero-box {
  cursor: pointer;
}
/* PC の中央 (HeroVideo.tsx pcFlag) = YouTube PC のベゼル: 52px の半透明黒の丸に白アイコン、操作の瞬間に出て
 * 0.5s linear で 2 倍に広がりながら消える (unmount は同じ 0.5s 後)。idle (未再生の ▶) だけは動かさずそのまま置く */
[data-site="yuti-kaihatsu"] .yk-hero-flag {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  pointer-events: none;
}
[data-site="yuti-kaihatsu"] .yk-hero-flag[data-kind="play-flash"],
[data-site="yuti-kaihatsu"] .yk-hero-flag[data-kind="pause-flash"] {
  animation: yk-flag-out 0.5s linear both;
}
@keyframes yk-flag-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(2); }
}
/* スマホの中央ボタン (HeroVideo.tsx) = YouTube アプリの中央ボタン: 60px の半透明黒の丸 + 白いアイコン。
 * アイコンは左右 2 片 (24px 角の白い span を clip-path で切り抜く)。▶ は三角を縦に割った 2 片、⏸ は 2 本の棒で、
 * 各片の 4 頂点が対応しているので transition で「三角が 2 本の棒に割れる」変形になる (0.15s)。
 * 丸は動かさず、出入りは opacity 0.2s だけ (data-visible) */
[data-site="yuti-kaihatsu"] .yk-hero-ctrl {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
[data-site="yuti-kaihatsu"] .yk-hero-ctrl[data-visible="1"] {
  opacity: 1;
}
[data-site="yuti-kaihatsu"] .yk-hero-ctrl-l,
[data-site="yuti-kaihatsu"] .yk-hero-ctrl-r {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  background: #fff;
  transition: clip-path 0.15s ease;
}
/* ▶: 左片 = 三角の左半分 (x 5→12)、右片 = 右半分 (x 12→21、先端は頂点を 2 つ重ねて 4 頂点に)。継ぎ目は 0.3px 重ねる */
[data-site="yuti-kaihatsu"] .yk-hero-ctrl[data-icon="play"] .yk-hero-ctrl-l {
  clip-path: polygon(5px 3px, 12.3px 7.1px, 12.3px 16.9px, 5px 21px);
}
[data-site="yuti-kaihatsu"] .yk-hero-ctrl[data-icon="play"] .yk-hero-ctrl-r {
  clip-path: polygon(11.7px 6.8px, 21px 12px, 21px 12px, 11.7px 17.2px);
}
/* ⏸: 2 本の棒 (幅 5px、間 4px) */
[data-site="yuti-kaihatsu"] .yk-hero-ctrl[data-icon="pause"] .yk-hero-ctrl-l {
  clip-path: polygon(5px 4px, 10px 4px, 10px 20px, 5px 20px);
}
[data-site="yuti-kaihatsu"] .yk-hero-ctrl[data-icon="pause"] .yk-hero-ctrl-r {
  clip-path: polygon(14px 4px, 19px 4px, 19px 20px, 14px 20px);
}
/* スキップ: SSR の HTML に入っているので、inline script が描画前に done を付けた時は即隠す (hydration 後は unmount) */
[data-site="yuti-kaihatsu"] [data-intro="done"] .yk-skip {
  display: none;
}
/* 再生位置のバー (done 後)。.yk-hero-scrub = 下端 24px の当たり判定 (タップ / ドラッグで移動、touch-action none で
 * 横に引いてもページが動かない)、.yk-hero-progress = 見た目 (下端 3px、地は白 25%、進みはロゴ黄)。
 * 触っている間 (data-active) / ホバー (hover できる端末だけ) / キーボード focus は 6px に。出現はボタンと同じ遅れでフェード */
[data-site="yuti-kaihatsu"] .yk-hero-scrub {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  height: 24px;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  animation: yk-fade-in 0.6s ease-out 0.6s both;
}
[data-site="yuti-kaihatsu"] .yk-hero-progress {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  transition: height 0.15s ease-out;
}
[data-site="yuti-kaihatsu"] .yk-hero-scrub[data-active="1"] .yk-hero-progress,
[data-site="yuti-kaihatsu"] .yk-hero-scrub:focus-visible .yk-hero-progress {
  height: 6px;
}
@media (hover: hover) {
  [data-site="yuti-kaihatsu"] .yk-hero-scrub:hover .yk-hero-progress {
    height: 6px;
  }
}
[data-site="yuti-kaihatsu"] .yk-hero-progress-fill {
  height: 100%;
  background: var(--site-yellow);
  transform-origin: left center;
  transform: scaleX(0);
}
@keyframes yk-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
[data-site="yuti-kaihatsu"] .yk-hero-ui {
  transition: opacity 0.6s ease-out 0.6s; /* done: 戻る */
}
[data-site="yuti-kaihatsu"] [data-intro="ending"] .yk-hero-ui {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out; /* ending: 消える */
}
[data-site="yuti-kaihatsu"] .yk-header {
  transition:
    margin-top 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s,
    opacity 0.9s ease-out 0.3s;
}
[data-site="yuti-kaihatsu"] [data-intro="playing"] .yk-header,
[data-site="yuti-kaihatsu"] [data-intro="ending"] .yk-header {
  margin-top: -56px; /* = ヘッダー高 (SiteHeader) */
  transform: translateY(-10px); /* done で fade と一緒にわずかに降りる */
  opacity: 0;
  visibility: hidden;
  transition: none;
}
@media (min-width: 992px) {
  [data-site="yuti-kaihatsu"] [data-intro="playing"] .yk-header,
  [data-site="yuti-kaihatsu"] [data-intro="ending"] .yk-header {
    margin-top: -84px;
  }
}

/* 見出し類も文節折り返し (未対応ブラウザでは無視) */
[data-site="yuti-kaihatsu"] h1,
[data-site="yuti-kaihatsu"] h2,
[data-site="yuti-kaihatsu"] h3 {
  word-break: auto-phrase;
}

/* ============================================================
 * エフェクト (ScrollEffects.tsx と対)
 * - .fx-ready (JS mount 後に付与) 配下でのみ初期非表示 → JS 無効でも内容は見える
 * ============================================================ */

[data-site="yuti-kaihatsu"].fx-ready [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-site="yuti-kaihatsu"].fx-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-site="yuti-kaihatsu"].fx-ready [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-site="yuti-kaihatsu"] .yk-hero,
  [data-site="yuti-kaihatsu"] .yk-hero-curtain,
  [data-site="yuti-kaihatsu"] .yk-hero-ui,
  [data-site="yuti-kaihatsu"] .yk-header {
    transition: none;
  }
  [data-site="yuti-kaihatsu"] .yk-hero-scrub {
    animation: none;
  }
  [data-site="yuti-kaihatsu"] .yk-hero-ctrl,
  [data-site="yuti-kaihatsu"] .yk-hero-ctrl-l,
  [data-site="yuti-kaihatsu"] .yk-hero-ctrl-r {
    transition: none;
  }
  [data-site="yuti-kaihatsu"] .yk-hero-flag[data-kind="play-flash"],
  [data-site="yuti-kaihatsu"] .yk-hero-flag[data-kind="pause-flash"] {
    animation: none;
    opacity: 0;
  }
  [data-site="yuti-kaihatsu"] .yk-hero-progress {
    transition: none;
  }
}