/*
Theme Name: Candy Kobe
Theme URI: https://candy-kobe.com/
Author: Candy Kobe
Description: CANDY KOBE 公式テーマ
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: candy-kobe
*/

/* ============================================================
   Reset & Base
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden; /* スケール時の横スクロール抑制 */
}

body {
  background-image: url('https://candy-kobe.com/wp-content/uploads/2026/04/top_background.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
  font-family: 'Noto Sans JP', sans-serif;
  color: #02040a;
}

a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }
img { display: block; }

/* ============================================================
   デザイン忠実スケーリング (CLAUDE.md 2.1 準拠) ★最優先ルール
   - デバイス幅 >= 402px: --scale = 1、402px 固定で中央配置
   - デバイス幅 < 402px:  --scale = 100vw/402px、全体を等倍縮小
============================================================ */
html {
  --scale: min(1, calc(100vw / 402px));
}

/* page-wrapper にも marble bg を重ねる:
   transform: scale が新しいスタッキングコンテキストを生成するため、
   内部の mix-blend-mode (schedule-card) が body の marble を backdrop
   として参照できなくなる。wrapper にも敷くことで blend が機能する */
.page-wrapper {
  width: 402px;
  margin: 0 auto;
  position: relative;
  background-image: url('https://candy-kobe.com/wp-content/uploads/2026/04/top_background.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
  transform: scale(var(--scale));
  transform-origin: top center;
  padding-bottom: 121px;
}

/* ============================================================
   共通: 赤平行四辺形アクセント文字 (CLAUDE.md 3.1)
   上下拡張は em 単位 (font-size 比率で proportional スケール)
============================================================ */
.accent-char {
  position: relative;
  display: inline-block;
  color: #ffffff;
  z-index: 1;
}
.accent-char::before {
  content: '';
  position: absolute;
  top: -0.191em; left: 0;
  width: 100%;
  height: calc(100% + 0.382em);
  background: #E50113;
  transform: skewX(-10deg);
  z-index: -1;
}

/* ============================================================
   共通: セクション大見出し (CLAUDE.md 3.2.1)
   英語 + (nbsp/日本語) + 金色線
============================================================ */
.section-heading {
  display: flex;
  align-items: center;
  padding-left: 15px;
}
.section-heading__text-group {
  display: flex;
  align-items: baseline;
  flex-shrink: 0;
  padding-right: 9px;
}
.section-heading__en {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 24.1px;
  color: #4d4b4b;
  line-height: 1;
}
/* 英語→日本語の間は nbsp で末尾空白の欠落を回避 (CLAUDE.md 3.2) */
.section-heading__en::after {
  content: '\00a0';
}
.section-heading__ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 13.2px;
  color: #4d4b4b;
  white-space: nowrap;
}
.section-heading__line {
  flex: 1;
  height: 2px;
  margin-right: 9px;
  object-fit: fill;
  min-width: 0;
}

/* ============================================================
   共通: 見出しスクロールインアニメーション (CLAUDE.md 3.2.2)
   IntersectionObserver で .is-revealed を付与して発火 (1 度のみ)
============================================================ */
.section-heading .section-heading__line {
  transform: scaleX(0);
  transform-origin: right center;
}
.section-heading .section-heading__text-group {
  opacity: 0;
  transform: translateY(8px);
}
.section-heading.is-revealed .section-heading__line {
  animation: section-heading-line-draw 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.section-heading.is-revealed .section-heading__text-group {
  animation: section-heading-text-rise 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.06s forwards;
}
@keyframes section-heading-line-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes section-heading-text-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 高速スクロール時は animation を短縮して空白期間を解消 */
body.is-fast-scrolling .section-heading .section-heading__line,
body.is-fast-scrolling .section-heading .section-heading__text-group,
body.is-fast-scrolling .on-standby .card-scroll-track {
  opacity: 1 !important;
  transform: none !important;
  animation-duration: 0.05s !important;
  animation-delay: 0s !important;
}
/* Pick up のカード枠だけは transform を一切書かない (none でも書かない)。
   下の注記のとおり、この要素に transform が付くと EWWW の遅延読み込みが
   画像を差し替えなくなる事故が過去に起きている。none は仕様上は無害だが、
   「この要素の transform には触れない」を守るほうが事故を呼ばない
   (2026-09-18: 検査で指摘されて分離した) */
body.is-fast-scrolling .pickup .pickup__grid {
  opacity: 1 !important;
  animation-duration: 0.05s !important;
  animation-delay: 0s !important;
}

/* ============================================================
   LP 見出し共通規格 (CLAUDE.md 3.2.3)
   cast 一覧ページ (archive-therapist.php) 等の LP 系ページで使用。
   通常見出し (3.2.1 / .section-heading) と別系統、両者は独立。
   使用法: <div class="section-heading section-heading--lp"> と
            両クラス併記 (BEM 修飾子パターン)
   通常見出しとの差分:
   - 中央揃え (padding-left: 0)
   - font-size 31.4px / color #2a2a2a (通常は 24.1px / #4d4b4b)
   - accent-char 文字色 #fcfbff (通常は #ffffff)
   - 日本語サブ・gold_line なし (HTML 側で要素を省略)
   - アニメーションはページロード直後の即時フェードイン
     (通常見出しの IntersectionObserver スクロールインとは独立)
============================================================ */
.section-heading--lp {
  justify-content: center;
  padding-left: 0;
}
.section-heading--lp .section-heading__en {
  font-size: 31.4px;
  color: #2a2a2a;
}
/* 通常見出しの英語→日本語間 nbsp は LP には日本語が続かないため無効化 */
.section-heading--lp .section-heading__en::after {
  content: '';
}
.section-heading--lp .accent-char {
  color: #fcfbff;
}

/* LP 見出しアニメーション:
   通常見出しのスクロールイン初期状態 (text-group opacity: 0) を無効化し、
   コンテナ自体にページロード直後の即時フェードインを適用 */
.section-heading--lp .section-heading__text-group {
  opacity: 1;
  transform: none;
  animation: none;
}
.section-heading--lp {
  opacity: 0;
  transform: translateY(10px);
  animation: section-heading-lp-fade-in 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}
@keyframes section-heading-lp-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 高速スクロール時の短縮 (通常見出しと同系統の処理) */
body.is-fast-scrolling .section-heading--lp {
  opacity: 1 !important;
  transform: none !important;
  animation-duration: 0.05s !important;
  animation-delay: 0s !important;
}

/* ============================================================
   共通: LP 日本語サブ見出し (CLAUDE.md 3.2.3)
   LP 英語見出し (.section-heading--lp) の兄弟要素として独立配置。
   cast 一覧ページの .overview__mid-heading 先行実装パターンを共通規格化。
============================================================ */
.section-heading-sub {
  font-family: 'Yu Gothic', YuGothic, '游ゴシック', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 600;  /* SemiBold (Bold 700 から一段細く) */
  font-size: 16.6px;
  color: #2a2a2a;
  text-align: center;
  margin-top: 11px;
  line-height: 1;
  opacity: 0;
  transform: translateY(10px);
  animation: section-heading-lp-fade-in 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}
body.is-fast-scrolling .section-heading-sub {
  opacity: 1 !important;
  transform: none !important;
  animation-duration: 0.05s !important;
  animation-delay: 0s !important;
}

/* ============================================================
   共通: カードコンポーネント (CLAUDE.md 3.3)
   cast_index.html の .cast-card が共通規格の新基準 (--card-scale: 1.0)
   全ての距離・サイズ値は calc(X * var(--card-scale)) 形式 (固定値禁止)
============================================================ */
.cast-card {
  --card-scale: 1.0;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background: #333;
  width: 186px;
  aspect-ratio: 2 / 3;
  display: block;
  text-decoration: none;
  color: inherit;
}
.cast-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 三角オーバーレイ: cast 基準 77 × 149.87 (native 146×75 を縦 +2px 補正) */
.cast-card__triangle {
  position: absolute;
  bottom: 0; right: 0;
  width: calc(149.87px * var(--card-scale));
  height: calc(77px * var(--card-scale));
  object-fit: fill;
  opacity: 0.58; /* 42% 透過 */
  pointer-events: none;
  z-index: 2;
}
.cast-card__info {
  position: absolute;
  bottom: calc(8px * var(--card-scale));
  left: calc(9.6px * var(--card-scale));
  right: calc(7px * var(--card-scale));
  z-index: 3;
}
.cast-card__info-left {
  display: flex;
  flex-direction: column;
}
/* info-right (最短ご案内 + 日付 + 時刻 の一グループ) を元位置から下へ視覚調整。
   値 -6.63px の由来:
     Phase 1a FB #6 対応で hero カード (--card-scale: 2.161) に
     「-2px * 2.161 - 10px = -14.322px」を適用したのを scale-1 換算した値
     (-14.322 / 2.161 ≈ -6.63)。
   これにより全カードサイズで hero と同じ比率の下方シフトが得られ、
   CLAUDE.md 3.3.7「固定値禁止」原則にも準拠する */
.cast-card__info-right {
  position: absolute;
  right: 0;
  bottom: calc(-6.63px * var(--card-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.cast-card__name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: calc(15.24px * var(--card-scale));
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: -0.03em;
  /* 白かぶりの写真でも白文字が消えないよう、輪郭の柔らかい黒の影を敷く
     (2026-09-06 本人指示: 不透明度は40%→60%に変更)。ぼかし・ずらし量も --card-scale に連動
     させる (CLAUDE.md 3.3.7「固定値禁止」原則。font-size と同じ書き方) */
  text-shadow: 0 calc(1px * var(--card-scale)) calc(4px * var(--card-scale)) rgba(0, 0, 0, 0.6);
}
.cast-card__age {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: calc(15.24px * var(--card-scale));
  color: #ffffff;
  line-height: 1.3;
  /* 名前と同じ影 (上のコメントを参照) */
  text-shadow: 0 calc(1px * var(--card-scale)) calc(4px * var(--card-scale)) rgba(0, 0, 0, 0.6);
}
.cast-card__guide {
  font-family: 'BIZ UDPGothic', 'BIZ UDPゴシック', sans-serif;
  font-weight: 400;
  font-size: calc(10.2px * var(--card-scale));
  color: #ffffff;
  line-height: 1.4;
}
.cast-card__guide .small-no {
  font-size: calc(8.64px * var(--card-scale));
}
.cast-card__date-row {
  display: flex;
  align-items: center;
  gap: calc(3.6px * var(--card-scale));
}
/* 緑の点: 本日出勤時のみ表示。「本日」ラベルの視覚中央に揃える */
.cast-card__dot {
  width: calc(6px * var(--card-scale));
  height: calc(6px * var(--card-scale));
  border-radius: 50%;
  background: #7ac952;
  flex-shrink: 0;
  position: relative;
  top: calc(1.5px * var(--card-scale));
}
.cast-card__date-row--non-today .cast-card__dot {
  display: none;
}
.cast-card__date,
.cast-card__time {
  color: #ffffff;
  white-space: nowrap;
}
.cast-card__date {
  position: relative;
  top: calc(0.5px * var(--card-scale));
}
.cast-card__date-row--today .cast-card__date {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: calc(15.06px * var(--card-scale));
}
.cast-card__date-row--non-today .cast-card__date {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: calc(15.06px * var(--card-scale));
}
.cast-card__time {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: calc(18.18px * var(--card-scale));
}

/* ============================================================
   共通: CTA ボタン群 (CLAUDE.md 3.5)
   3 種類のボタン (WEB予約 / LINE / 電話) を縦並びで提示するパターン。
   全ページで同じ視覚規格を共有するため、CSS は style.css に集約。
   実 URL / tel: の値はページ側 PHP で出し分け、HTML 構造とクラスは共通。
   PNG は引き延ばさない (CLAUDE.md 3.4 準拠) — width/height を native 論理 px (301×53) で固定し、
   テキスト長が変わってもフォントサイズや内部余白で調整する */
.cta-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 301px;
  height: 53px;
  background-size: 301px 53px;
  background-repeat: no-repeat;
  background-position: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 17.5px;
  color: #fcfbff;
  line-height: 1;
  letter-spacing: 0.02em;
}
.cta-button--online {
  background-image: url('https://candy-kobe.com/wp-content/uploads/2026/04/button_online_booking.png');
}
.cta-button--line {
  background-image: url('https://candy-kobe.com/wp-content/uploads/2026/04/button_Line_booking.png');
}
.cta-button--call {
  background-image: url('https://candy-kobe.com/wp-content/uploads/2026/04/button_call.png');
}

/* ============================================================
   共通: ドットインジケーター (カルーセル用)
============================================================ */
.dot-indicator {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.dot-indicator__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #C7C6C6;
  transition: background 0.2s;
}
.dot-indicator__dot.active { background: #515050; }

/* ============================================================
   共通: ヘッダー (CLAUDE.md 2.1 / 4.1)
   - .fixed-header-layer: .page-wrapper の外に配置、viewport 固定 + スケール
     (transform を持つ wrapper 内に fixed を置くと containing block が wrapper
      になってしまうため、独立レイヤに分離)
   - .site-header: .page-wrapper 内に残し、70px の空間確保用
   - トップページ (/top/) のみ .site-header 背景を透過にする (ページ側で上書き)
============================================================ */
.site-header {
  position: relative;
  width: 100%;
  height: 70px;
  background: #FEFEFF;
  z-index: 10;
}
.fixed-header-layer {
  position: fixed;
  top: 0;
  left: 50%;
  width: 402px;
  height: 70px;
  transform: translateX(-50%) scale(var(--scale));
  transform-origin: top center;
  z-index: 100;
  pointer-events: none; /* 子要素だけが pointer events を受ける */
}
.fixed-header-layer > * {
  pointer-events: auto;
}
.site-header__logo {
  position: absolute;
  top: 16px;
  left: 15px;
  height: 40px;
  opacity: 0.8;
  display: block;
}
.site-header__logo img {
  height: 100%;
  width: auto;
  display: block;
}
.site-header__hamburger {
  position: absolute;
  top: 22px;
  right: 16px;
  padding: 4px;
}
.hamburger-bar {
  display: block;
  width: 24px; height: 2px;
  background: #1b1b1b;
  margin: 5px 0;
}

/* ============================================================
   共通: フッター (CANDY KOBE 全ページ共通)
   - .page-wrapper の内側に配置 (CLAUDE.md 2.1 自動スケーリング継承)
   - 全体高さ 520px 固定
   - 構造: gold_line(2px) → main(ロゴ + 8項目ナビ) → bottom(区切り線 + 営業案内)
   - 上端 gold_line は「ここからフッター」境界宣言
============================================================ */
.footer-nav {
  background: #ffffff;
  height: 520px;
  display: flex;
  flex-direction: column;
}

/* 1. 上端: 金色ライン (フッター境界) */
.footer-nav__gold-line {
  display: block;
  width: 100%;
  height: 2px;
  flex: 0 0 auto;
}

/* 2. メイン領域: ロゴ + ナビ */
.footer-nav__main {
  padding: 47px 20px 0; /* gold_line ↔ ロゴの視認的余白 47px */
  text-align: center;
  flex: 1 1 auto;
}
.footer-nav__logo {
  height: 52px;       /* 画像高さ固定 (cropped 版なのでロゴ本体がほぼ全域) */
  width: auto;
  margin: 0 auto 47px; /* ロゴ ↔ 1段目テキストの視認的余白 47px、img の display:block 規定で中央揃え */
}

/* 3. ナビ (8項目, 1段構成 ENG/JP) */
.footer-nav__links { list-style: none; line-height: 1.1; }
.footer-nav__item { margin-bottom: 17px; }
.footer-nav__item:last-child { margin-bottom: 0; }
.footer-nav__link {
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.1; /* 行間 = font-size * 1.1 (line box の余分な leading を抑制) */
}
.footer-nav__link-en {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500; /* Medium (SemiBold から一段細く) */
  font-size: 17.28px;
  color: #4d4b4b;
}
.footer-nav__link-ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500; /* Medium */
  font-size: 10.7px;
  color: #4d4b4b;
}

/* 4. 下部領域: 区切り線 + 営業案内 */
.footer-nav__bottom { flex: 0 0 auto; }
.footer-nav__divider-bottom-new {
  width: 100%;
  height: 1px;
  background: #D9D9D9;
}
.footer-nav__hours {
  display: flex;
  justify-content: space-between;
  padding: 14px 20px;  /* 左右テキストはスクリーン端から 20px の視認的余白 */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;    /* Regular (DemiLight が Google Fonts に無いため Regular で代替) */
  font-size: 9.7px;
  color: #000000;
}

/* ============================================================
   共通: opened ヘッダーメニュー (ハンバーガー押下で右からスライドイン)
   - .page-wrapper の外、.fixed-header-layer の兄弟位置に HTML 配置
     (CLAUDE.md 2.1 fixed要素例外規定準拠、二重スケール回避のため)
   - パネル自身に scale(var(--scale)) + height: calc(100vh / var(--scale)) で
     全デバイス等倍縮小を実現
   - z-index 100001 (シミュレータシート 100000 の上、最前面)
============================================================ */
.fixed-menu-overlay {
  position: fixed;
  inset: 0;                 /* viewport 全面 (backdrop 用、scale なし) */
  z-index: 100001;
  pointer-events: none;     /* 閉時はクリック透過 */
  visibility: hidden;        /* 完全非表示 (支援技術にも見せない) */
}
.fixed-menu-overlay.is-open {
  pointer-events: auto;
  visibility: visible;
}

/* 背景の暗転膜 (chance.land 風) */
.menu-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fixed-menu-overlay.is-open .menu-overlay__backdrop {
  opacity: 1;
}

/* パネル本体: 右端固定 214px、スライドイン + scale 補正 */
.menu-overlay__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 214px;
  /* 高さは scale 縮小後にちょうど 100vh になるよう逆数で補正 */
  height: calc(100vh / var(--scale, 1));
  background: #FEFEFF;
  transform: translateX(100%) scale(var(--scale, 1));   /* 初期: 画面外右 + デバイス幅スケール */
  transform-origin: top right;
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.fixed-menu-overlay.is-open .menu-overlay__panel {
  transform: translateX(0) scale(var(--scale, 1));      /* 開時: 定位置 + デバイス幅スケール */
}

/* MENU 見出し */
.menu-overlay__header {
  position: relative;
  padding: 24px 0 0 24px;   /* パネル上端 24px / 左端 24px */
  flex: 0 0 auto;
}
.menu-overlay__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 17.5px;
  color: #4d4b4b;
  line-height: 1;
  margin: 0;
}
/* 「E」の赤平行四辺形 (CLAUDE.md 3.1 共通規格) */
.menu-overlay__title .accent-char {
  position: relative;
  color: #ffffff;
}
.menu-overlay__title .accent-char::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.191em;
  width: 100%;
  height: calc(100% + 0.382em);
  background: #E50113;
  transform: skewX(-10deg);
  z-index: -1;
}

/* 閉じる X ボタン: パネル右上 */
.menu-overlay__close {
  position: absolute;
  top: 29px;
  right: 35px;
  width: 38px;              /* 横幅指定、高さはアスペクト比維持 */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1;
}
.menu-overlay__close img {
  width: 100%;
  height: auto;
  display: block;
}

/* メニュー項目リスト (10項目) */
.menu-overlay__links {
  list-style: none;
  margin: 20px 0 0;          /* MENU 見出しから 20px */
  padding: 0;
  flex: 0 0 auto;
}
.menu-overlay__item {
  margin: 0 24px;            /* 区切り線が両サイド 24px インデント */
  border-bottom: 1px solid #DCDCE5;
}
.menu-overlay__item a {
  display: block;
  height: 46px;
  padding: 10px 0 10px 6px;  /* テキストはパネル左から 24+6=30px */
  text-decoration: none;
  line-height: 1;
  box-sizing: border-box;
}
.menu-overlay__en {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 14.2px;
  color: #000000;
  margin-bottom: 3px;        /* 英↔日 縦余白 */
}
.menu-overlay__ja {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;          /* DemiLight 代替 (Google Fonts 上の最寄ウェイト) */
  font-size: 8.7px;
  color: #000000;
}

/* メニュー最下部: CANDY KOBE ロゴ */
.menu-overlay__footer-logo {
  margin-top: 35px;          /* 最終項目区切り線から 35px */
  text-align: center;
  padding-bottom: 30px;       /* 視覚的余白 */
  flex: 0 0 auto;
}
.menu-overlay__footer-logo img {
  width: 131px;
  height: auto;
  display: inline-block;
}

/* ============================================================
   ============================================================
   トップページ固有 CSS (page-top.php)
   以下は body.page-top スコープ、または .hero / .about / .on-standby
   等のトップ専用セクションクラスで限定し、既存共通 CSS の値は変更しない
   ============================================================
   ============================================================ */

/* トップページ: ヘッダースペーサー非表示 + ロゴ非表示 + バー白化
   (CLAUDE.md 4.1: トップページのみ透過、ヒーロー画像が最上部まで伸びる) */
body.page-top .site-header {
  display: none;
}
body.page-top .site-header__logo {
  display: none;
}
body.page-top .hamburger-bar {
  background: #ffffff;
}

/* ============================================================
   セクション1: ヒーロー
============================================================ */
.hero { position: relative; width: 100%; }

.hero__img-wrap {
  position: relative;
  width: calc(100% - 10px);
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: 56px;
  overflow: hidden;
}

.hero__slideshow {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hero__slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1.06);
  transform-origin: center center;
}
.hero__slide.is-visible { opacity: 1; }
.hero__slide.is-zooming {
  animation: hero-slide-zoom 5.5s linear forwards;
}
@keyframes hero-slide-zoom {
  0% {
    transform: scale(1);
    animation-timing-function: linear;
  }
  72.73% {
    transform: scale(1.055);
    animation-timing-function: ease-out;
  }
  100% {
    transform: scale(1.06);
  }
}

.hero__dot-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.hero__logo {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 74px;
  width: auto;
  opacity: 0.85;
  z-index: 3;
}

.hero__copy {
  position: absolute;
  top: calc(50% + 88px);
  left: 74px;
  z-index: 3;
  opacity: 0;
  animation: hero-copy-fade-in 3s cubic-bezier(0.55, 0, 0.2, 1) 1s forwards,
             hero-copy-slide-left 10s ease-out 1s forwards;
}
@keyframes hero-copy-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hero-copy-slide-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50px); }
}
.hero__copy-line {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 17.3px;
  color: #ffffff;
  line-height: 1.7;
  text-align: left;
  white-space: nowrap;
}
.hero__copy-line .small-char { font-size: 15px; }
.hero__copy-line--thin { font-weight: 100; }

.hero__scroll {
  position: absolute;
  bottom: 10px;
  left: 0; right: 0;
  text-align: center;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.hero__scroll-arrow {
  width: 13px;
  height: auto;
  display: block;
  opacity: 0;
  animation: hero-scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-bounce {
  0%   { transform: translateY(-3px); opacity: 0; }
  30%  { transform: translateY(0);    opacity: 0.85; }
  70%  { transform: translateY(3px);  opacity: 0.85; }
  100% { transform: translateY(6px);  opacity: 0; }
}
.hero__scroll-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 9px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.18em;
}

.hero__media-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  z-index: 4;
  text-decoration: none;
  color: inherit;
}
.hero__media-thumb {
  width: 75px; height: 50px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.hero__media-meta { flex: 1; min-width: 0; position: relative; }
.hero__media-date-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  position: relative;
  z-index: 2;
}
.hero__media-date {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12.6px;
  color: #f5f4f4;
}
.hero__media-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 13.5px;
  background: #E1B03F;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px;
  color: #27241C;
  line-height: 1;
}
.hero__media-title {
  position: relative;
  overflow: hidden;
  line-height: 1.2;
  height: 1.2em;
}
.hero__media-title-inner {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14.3px;
  color: #f5f4f4;
  animation: hero-media-marquee 12s linear infinite;
  will-change: transform;
}
@keyframes hero-media-marquee {
  from { transform: translate(0, 0); }
  to { transform: translate(-100%, 0); }
}
.hero__media-bar:hover .hero__media-title-inner {
  animation-play-state: paused;
}

/* ============================================================
   セクション2: About
============================================================ */
.about {
  padding: 60px 20px 0;
  text-align: center;
}
.about__heading-en {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 26.4px;
  line-height: 1.3;
  margin-bottom: 8px;
  position: relative;
  isolation: isolate;
}
.about__heading-en::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 15px;
  background: linear-gradient(to right, #E4E4EA, #E5E5E5);
  z-index: -1;
}
.about-text-dark { color: #4d4b4b; } /* 見出し「On Standby」と同色に統一 (旧 #1b1b1b) */
.about-text-gold { color: #89816f; }
.about__sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #4d4b4b;
  margin-bottom: 12px;
}
.about__line {
  width: 142px; height: 1px;
  background: #A3A299;
  margin: 0 auto 40px;
}
.about__mid-heading {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #9c947f;
  line-height: 1.8;
  margin-bottom: 30px;
}
.about__body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #4d4b4b; /* 見出し「On Standby」と同色に統一 (旧 #626262) */
  line-height: 2;
}
.about__body p + p { margin-top: 1em; }
/* トップページの h1 (新設。区切り線と中見出しの間に 1 行で置く。既存クラスの値は変えていない) */
.about__site-name {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #4d4b4b;
  line-height: 1.8;
  margin-bottom: 10px;
}

/* ============================================================
   セクション3: On Standby
============================================================ */
.on-standby { margin-top: 100px; }
.on-standby__heading { margin-bottom: 27.5px; }

.card-scroll-track {
  display: flex;
  gap: 10px;
  padding-left: 10px;
  padding-right: 10px;
  overflow-x: auto;
  /* 吸着はブラウザのネイティブ scroll-snap に任せる (JS で後追いスナップすると
     慣性が止まった後にもう一段アニメが走り、カクついて見える) */
  scroll-snap-type: x mandatory;
  scroll-padding-left: 10px;
  /* 横スワイプがページ側やブラウザの「戻る」ジェスチャに伝播しないようにする */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.card-scroll-track::-webkit-scrollbar { display: none; }
.card-scroll-track > * { scroll-snap-align: start; }
/* PC ドラッグ中だけスナップを切る (効いたままだと指の動きに逆らって吸着する) */
.card-scroll-track.is-snap-off { scroll-snap-type: none; }
.card-scroll-track.is-dragging { cursor: grabbing; }
.card-scroll-track.is-dragging * {
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.on-standby .cast-card {
  --card-scale: 0.866;
  width: 161px;
  aspect-ratio: 2 / 3;
}
.on-standby__dots { margin-top: 20px; }
/* ドットで該当カードへ移動できる (縦ホイールの横変換を廃止した分の PC 操作手段) */
.on-standby__dots .dot-indicator__dot { cursor: pointer; }
/* 0 件時の文言 (page-schedule.php の .standby-sec__empty と同じ見た目)。新規クラスの追加のみ */
.on-standby__empty {
  width: 100%;
  padding: 30px 15px;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  color: #666;
}

/* On Standby / Pick up カードコンテンツ追従アニメーション:
   0.18s 待って 0.8s かけて出す (出そろうまで 0.98s)。
   2026-09-18 (1回目): 旧値は 1.3s 待ち + 1.4s (出そろうまで 2.7s)。普通の速さで
   スクロールすると通り過ぎるまでに出そろわず、セクションが真っ白のまま流れていた。
   2026-09-18 (2回目・本人指摘): 1回目の修正で待ち 0.25s + 0.6s まで詰めたうえ、
   高速スクロール時の短縮 (0.05s) が普通のスクロールでも毎回発動する設定に
   なっていたため、「速くなった」ではなく「板付き (最初から出ている)」に見えていた。
   考え方を「動きの長さは元に近く保ち、削るのは待ち時間だけ」に変更。
   待ち時間は 1.3s → 0.18s (1.12s 短縮)、動きは 1.4s → 0.8s。
   0.05s の短縮は、画面が流れて動きが見えない本当の高速フリック時のみ */
.on-standby .card-scroll-track {
  opacity: 0;
  transform: translateY(8px);
}
/* Pick up 側は初期状態に transform を持たせない。
   transform があると .pickup__grid がカード画像の offsetParent になり、
   EWWW の遅延読み込み (lazysizes) が offsetParent 連鎖の opacity: 0 を
   「見えていない」と判定して画像の差し替えを拒否する。結果、reveal 前に
   判定された画像が透明プレースホルダのまま残る (Pick up の 3・4 枚目が
   リロードするまで出ない不具合の原因)。
   初期の浮上位置は下の keyframes の from { transform: translateY(8px) } が
   与えるため、見た目は変わらない。
   .pickup__grid に position / filter / will-change / contain を足すと
   再び offsetParent になり同じ不具合が再発する。 */
.pickup .pickup__grid {
  opacity: 0;
}
.on-standby.is-revealed .card-scroll-track,
.pickup.is-revealed .pickup__grid {
  animation: section-heading-text-rise 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.08s forwards;
}

/* ============================================================
   セクション4: Pick up Casts
============================================================ */
.pickup { margin-top: 100px; }
.pickup__heading { margin-bottom: 27.5px; }
.pickup__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 3px;
  padding: 0 10px;
}
.pickup .cast-card {
  width: 100%;
  aspect-ratio: 2 / 3;
  --card-scale: 1.019;
}
.pickup__btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* ============================================================
   共通: セクションボタン (view cast / メディアトップ / Process)
============================================================ */
.section-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 44px;
  background-image: url('https://candy-kobe.com/wp-content/uploads/2026/04/button_view_cast_non_hover.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  transition: background-image 0.15s ease;
}
.section-btn:hover {
  background-image: url('https://candy-kobe.com/wp-content/uploads/2026/04/button_view_casts_hover.png');
}
.section-btn__text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 10.1px;
  color: #ffffff;
  pointer-events: none;
  position: relative;
  transform: translateX(-14px);
}

/* ============================================================
   セクション5: メディア
============================================================ */
.media-sec { margin-top: 60px; }
.media-sec__heading { margin-bottom: 27.5px; }
.media-scroll-track {
  display: flex;
  gap: 10px;
  padding-left: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.media-scroll-track::-webkit-scrollbar { display: none; }
.media-thumb {
  width: 315px; height: 210px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  scroll-snap-align: start;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.media-sec__dots { margin-top: 30px; margin-bottom: 25px; }
.media-sec__btn-wrap { display: flex; justify-content: center; }

/* ============================================================
   セクション6: ご利用の流れ
============================================================ */
.process { margin-top: 70px; }
.process__heading { margin-bottom: 27.5px; }
.process__video-wrap {
  width: 100%;
  background: #111;
  position: relative;
}
.process__video-wrap video { width: 100%; display: block; }
.process__video-placeholder {
  color: #666;
  font-size: 13px;
  font-family: 'Noto Sans JP', sans-serif;
  padding: 48px 20px;
  text-align: center;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.process__btn-wrap { display: flex; justify-content: center; margin-top: 25px; }

/* ============================================================
   セクション7: 口コミ
============================================================ */
.reviews { margin-top: 70px; }
.reviews__heading { margin-bottom: 27.5px; }
.reviews__iframe-wrap {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

/* ============================================================
   セクション8: ショップリスト
============================================================ */
.shoplist { margin-top: 85px; }
.shoplist__heading { margin-bottom: 27.5px; }
.shoplist__bg {
  background: #2D2C2B;
  padding: 37.5px 65px;
}
.shoplist__store {
  display: flex;
  align-items: center;
  gap: 0;
}
.shoplist__store + .shoplist__store { margin-top: 27.5px; }
.shoplist__logo {
  width: auto;
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
}
.shoplist__info {
  flex: 1;
  font-family: 'BIZ UDPGothic', 'BIZ UDPゴシック', sans-serif;
  font-size: 13.3px;
  color: #fae9af;
  line-height: 1.8;
}
.shoplist__info a { color: #fae9af; text-decoration: underline; }
.shoplist__divider-wrap { padding-top: 30px; }
.shoplist__divider { width: 100%; height: 1px; background: #D8D0BE; }

/* ============================================================
   ============================================================
   howto ページ固有 CSS (page-howto.php)
   以下は .howto-content スコープで限定し、
   既存共通 CSS の値は変更しない
   ============================================================
   ============================================================ */

/* §3.2.4 ページ最上部配置時のデフォルト上余白 (75px)
   共通 .section-heading--lp への直接追加は archive-therapist.php に
   影響するため、.howto-content スコープで適用 */
.howto-content > .section-heading--lp {
  margin-top: 75px;
}

/* 動画 */
.howto-video {
  display: block;
  width: 100%;
  margin-top: 80px;
  background: #000;
  aspect-ratio: 16 / 9;
}

/* 手引き文章セクション (10 セクション) */
.howto-guide {
  margin-top: 45px;
}
.howto-guide__section {
  position: relative;
  margin: 0 25px;
  border-top: 1px dashed #2a2a2a;
  padding: 15px 8px 15px 66px;
}
.howto-guide__section:last-child {
  border-bottom: 1px dashed #2a2a2a;
}
.howto-guide__number {
  position: absolute;
  left: 3px;
  top: 48px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 37.3px;
  color: #536497;
  line-height: 1;
}
.howto-guide__heading {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 19.4px;
  color: #2a2a2a;
  line-height: 1.3;
}
.howto-guide__body {
  margin: 12px 0 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 12.2px;
  color: #2a2a2a;
  line-height: 1.7;
  text-wrap: balance;
}

/* 末尾の数文字を結合して孤立行を防ぐ (text-wrap: balance 非対応 or <br> で効かない箇所用) */
.nowrap-tail {
  white-space: nowrap;
}

/* 「ご利用の前に」 */
.howto-before {
  padding-top: 63px;
}
.howto-before__heading {
  margin: 0 0 0 40px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 17.3px;
  color: #2a2a2a;
  line-height: 1;
}
.howto-before__body {
  margin: 21px 30px 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #2a2a2a;
  line-height: 1.7;
  text-wrap: balance;
}
.howto-before__paragraph {
  margin: 0;
}
.howto-before__paragraph + .howto-before__paragraph {
  margin-top: 25px;
}

/* CTA ボタン群のページ固有余白 (CLAUDE.md 3.5.4: .cta-buttons 自体はマージン持たず) */
.howto-content > .cta-buttons {
  margin-top: 75px;
  margin-bottom: 91px;
}

/* ============================================================
   ============================================================
   求人ページ固有 CSS (page-recruit.php)
   以下は body.page-recruit スコープ、または .recruit-* クラスで限定し、
   既存共通 CSS の値は変更しない
   ============================================================
   ============================================================ */

/* 求人ページ: body 背景をグレーに (大理石ではない) */
body.page-recruit {
  background-image: none;
  background-color: #f0f0f0;
}

/* 求人ページ: ヘッダースペーサー非表示 + ロゴ非表示 + バー白化
   (top/ と同じ透過仕様: ヒーロー画像が最上部まで伸びる) */
body.page-recruit .site-header {
  display: none;
}
body.page-recruit .site-header__logo {
  display: none;
}
body.page-recruit .hamburger-bar {
  background: #ffffff;
}

/* 求人ページ: .page-wrapper 背景を白に (大理石不要) */
body.page-recruit .page-wrapper {
  background-image: none;
  background-color: #ffffff;
}

/* ヒーローオーバーレイ: テキスト + ロゴ */
.recruit-hero__overlay {
  position: absolute;
  top: 496px;
  left: 20px;
  z-index: 3;
}
.recruit-hero__line1 {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 25.2px;
  color: #ffffff;
  line-height: 1;
}
.recruit-hero__line2 {
  display: block;
  margin-top: 19px;
  line-height: 1;
}
.recruit-hero__line2-large {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 29.7px;
  color: #ffffff;
}
.recruit-hero__line2-small {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 21.9px;
  color: #ffffff;
}
.recruit-hero__logo {
  display: block;
  width: 210px;
  height: 59px;
  margin-top: 29px;
}

/* 本文セクション */
.recruit-body {
  margin-top: 36px;
  padding: 0 24px;
  text-align: center;
}
.recruit-body p {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14.1px;
  color: #1b1b1b;
  line-height: 1.8;
  margin-bottom: 25px;
}
.recruit-body p:last-child {
  margin-bottom: 0;
}

/* 募集要項 */
.recruit-req {
  margin-top: 124px;
  padding: 0 24px;
}
.recruit-req__heading {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 22.7px;
  color: #39415a;
  line-height: 1;
}
.recruit-req__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.recruit-req__row:first-of-type {
  margin-top: 35px;
}
.recruit-req__label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 13.3px;
  color: #5268b8;
  line-height: 1.8;
  flex-shrink: 0;
  min-width: 75px;
}
.recruit-req__detail {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14.1px;
  color: #1b1b1b;
  line-height: 1.8;
  flex: 1;
}
.recruit-req__separator {
  width: 354px;
  height: 2px;
  background: #adaeb5;
  margin: 15px 0;
}

/* LINE ボタン配置ラッパー */
.recruit-cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.recruit-cta--bottom {
  margin-top: 48px;
}

/* よくある質問集 Q&A */
.recruit-faq {
  margin-top: 107px;
  padding: 0 16px;
}
.recruit-faq__heading {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: #1b1b1b;
  line-height: 1;
}
.recruit-faq__item {
  margin-top: 35px;
}
.recruit-faq__item:first-of-type {
  margin-top: 58px;
}
.recruit-faq__question {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 19px;
  color: #1b1b1b;
  line-height: 1.5;
}
.recruit-faq__answer {
  margin-top: 35px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14.1px;
  color: #1b1b1b;
  line-height: 1.8;
}

/* よくある質問集を FAQ ページと同じ開閉式にした (2026-09-24)。部品は .faq-* をそのまま使い、
   求人ページの中だけ位置を合わせる: .recruit-faq の左右余白 16px を打ち消して FAQ ページと同じ幅 (左18px・箱366px) に置く */
.recruit-faq .faq-list {
  margin: 58px -16px 0;
}

/* フッターまでの余白 */
.recruit-footer-spacer {
  height: 91px;
}

/* ============================================================
   ============================================================
   FAQ ページ固有 CSS (page-faq.php)
   以下は .faq-content スコープまたは .faq-* プレフィックスで限定し、
   既存共通 CSS の値は変更しない
   ============================================================
   ============================================================ */

/* ヘッダー下端→大見出し (DECISION.md §1: cast と同条件 40px) */
.faq-content > .section-heading--lp {
  margin-top: 40px;
}

/* 導入文 a / b */
.faq-intro {
  font-family: 'Yu Gothic', YuGothic, '游ゴシック', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 13.8px;
  color: #2a2a2a;
  text-align: center;
  line-height: 1.7;
  padding: 0 30px;
}
.faq-intro--a {
  margin-top: 58px;
}
.faq-intro--b {
  margin-top: 30px;
}

/* FAQ リスト */
.faq-list {
  margin-top: 55px;
  margin-bottom: 99px;
}

/* 質問アイテム */
.faq-item {
  margin-top: 4px;
}
.faq-item:first-child {
  margin-top: 0;
}

/* 質問ボックス (白容器) */
.faq-question {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 366px;
  margin-left: 18px;
  min-height: 40px;
  background: #ffffff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  overflow: hidden;
}

/* Q ボックス */
.faq-question__q-box {
  flex: 0 0 45px;
  background: #37415C;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 質問テキスト領域 */
.faq-question__text {
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: 9.5px;
  padding-bottom: 9.5px;
  padding-left: 16px;
  font-family: 'Yu Gothic', YuGothic, '游ゴシック', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14.1px;
  color: #2a2a2a;
  line-height: 1.5;
}
.faq-item--1line .faq-question__text {
  padding-right: 28px;
}
.faq-item--2line .faq-question__text {
  padding-right: 20px;
}

/* +/− トグルアイコン (CSS 疑似要素 2 本棒) */
.faq-question__toggle {
  position: absolute;
  width: 13px;
  height: 13px;
  pointer-events: none;
}
.faq-item--1line .faq-question__toggle {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
.faq-item--2line .faq-question__toggle {
  bottom: 8px;
  right: 8px;
}
.faq-question__toggle::before,
.faq-question__toggle::after {
  content: '';
  position: absolute;
  background: #999;
}
.faq-question__toggle::before {
  top: 50%;
  left: 0;
  width: 13px;
  height: 1.5px;
  transform: translateY(-50%);
}
.faq-question__toggle::after {
  top: 0;
  left: 50%;
  width: 1.5px;
  height: 13px;
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
}
.faq-item--open .faq-question__toggle::after {
  opacity: 0;
}

/* 回答エリア (grid-template-rows アニメーション) */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.faq-item--open .faq-answer {
  grid-template-rows: 1fr;
}
.faq-answer__inner {
  overflow: hidden;
}
.faq-answer__text {
  margin-top: 15px;
  margin-left: 80px;
  margin-right: 29px;
  margin-bottom: 19px;
  font-family: 'Yu Gothic', YuGothic, '游ゴシック', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 13.3px;
  color: #39486F;
  line-height: 1.7;
}

/* ============================================================
   ============================================================
   page-contactandreservation.php 固有スタイル
   URL: /top/contactandreservation/
   セクション 1: ご予約とお問合せ (CTA + 求人 LINE)
   セクション 2: お問合せフォーム (CF7)
   ============================================================
   ============================================================ */

/* §3.2.4 ページ最上部配置時のデフォルト上余白 (75px) */
.contact-content > .section-heading--lp {
  margin-top: 75px;
}

/* 受付時間テキスト */
.contact-info {
  margin-top: 40px;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #2a2a2a;
  line-height: 1;
}

/* CTA ボタン群: ページ固有上余白 (CLAUDE.md 3.5.4) */
.contact-content > .cta-buttons {
  margin-top: 50px;
}

/* CTA ボタン: フォールバック背景色 + 角丸 */
.page-contactandreservation .cta-button {
  border-radius: 6px;
  overflow: hidden;
}
.page-contactandreservation .cta-button--online {
  background-color: #4a6fa5;
}
.page-contactandreservation .cta-button--line {
  background-color: #06c755;
}
.page-contactandreservation .cta-button--call {
  background-color: #2a2a2a;
}

/* CTA 4 番目: お問合せはこちら (contact ページ専用) */
.cta-button--inquiry {
  background-color: #8a8a8a;
  border-radius: 6px;
  overflow: hidden;
}

/* 求人応募専用 LINE セクション */
.recruit-line-section {
  margin-top: 60px;
  text-align: center;
}
.recruit-line-section__label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #2a2a2a;
  line-height: 1;
  margin-bottom: 20px;
}
.recruit-cta {
  display: flex;
  justify-content: center;
}
.cta-button--line-recruit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 301px;
  height: 53px;
  background-image: url('https://candy-kobe.com/wp-content/uploads/2026/04/button_Line_booking.png');
  background-size: 301px 53px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #06c755;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 17.5px;
  color: #fcfbff;
  line-height: 1;
  letter-spacing: 0.02em;
  border-radius: 6px;
  overflow: hidden;
}

/* ============================================================
   セクション 2: お問合せフォーム (CF7)
============================================================ */
.form-section {
  margin-top: 80px;
}

/* フォームセクション見出し: ページロード即時アニメを無効化し、スクロールイン待ち */
.form-section .section-heading--lp,
.form-section .section-heading-sub {
  opacity: 0;
  transform: translateY(10px);
  animation: none;
}
.form-section .section-heading--lp {
  margin-top: 0;
}
.form-section.is-visible .section-heading--lp,
.form-section.is-visible .section-heading-sub {
  animation: section-heading-lp-fade-in 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

/* フォーム説明文 */
.form-description {
  margin: 30px 30px 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #2a2a2a;
  line-height: 1.8;
}

/* フォームカード */
.form-card {
  margin: 30px 24px 0;
  padding: 30px 24px 40px;
  background: #fafafa;
  border-radius: 16px;
}

/* CF7 テンプレート内のラベル行 + フィールドグループ */
.form-group {
  margin-bottom: 28px;
}
.form-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.form-required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #E50113;
  color: #ffffff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 3px;
  line-height: 1;
}
.form-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #2a2a2a;
  line-height: 1;
}

/* CF7 フォームフィールド */
.form-card .wpcf7-form p {
  margin: 0 0 28px;
}
.form-card .wpcf7-form p:last-of-type {
  margin-bottom: 0;
}
.form-card .wpcf7-text,
.form-card .wpcf7-tel,
.form-card .wpcf7-email,
.form-card .wpcf7-textarea {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid #c0c0c0;
  background: transparent;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #2a2a2a;
  outline: none;
  box-sizing: border-box;
}
.form-card .wpcf7-text::placeholder,
.form-card .wpcf7-tel::placeholder,
.form-card .wpcf7-email::placeholder,
.form-card .wpcf7-textarea::placeholder {
  color: #b0b0b0;
  font-size: 13px;
}
.form-card .wpcf7-text:focus,
.form-card .wpcf7-tel:focus,
.form-card .wpcf7-email:focus,
.form-card .wpcf7-textarea:focus {
  border-bottom-color: #4a6fa5;
}
.form-card .wpcf7-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.7;
}

/* CF7 バリデーションエラー */
.form-card .wpcf7-not-valid {
  border-bottom-color: #E50113;
}
.form-card .wpcf7-not-valid-tip {
  font-size: 11px;
  color: #E50113;
  margin-top: 4px;
}

/* CF7 プライバシーポリシー同意 */
.form-card .wpcf7-acceptance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}
.form-card .wpcf7-acceptance input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #2a2a2a;
  cursor: pointer;
  flex-shrink: 0;
}
.form-card .wpcf7-acceptance .wpcf7-list-item-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #2a2a2a;
  cursor: pointer;
  line-height: 1;
}

/* CF7 送信ボタン */
.form-card .wpcf7-submit {
  display: block;
  width: 200px;
  height: 50px;
  margin: 32px auto 0;
  background: #2a2a2a;
  color: #ffffff;
  border: none;
  border-radius: 25px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: opacity 0.2s;
}
.form-card .wpcf7-submit:hover {
  opacity: 0.8;
}
.form-card .wpcf7-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* CF7 送信結果メッセージ */
.form-card .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 12px;
  font-size: 13px;
  text-align: center;
  border-radius: 6px;
}

/* フッター手前の余白 (フッターバー 121px 帯域を考慮) */
.contact-footer-spacer {
  height: 91px;
}

/* ============================================================
   料金ページ固有 CSS (page-fee.php)
   以下は body.page-fee スコープ、または .fee-* クラスで限定し、
   共通コンポーネントの既存値を変更しないこと (CLAUDE.md 運用ルール)
============================================================ */
body.page-fee .page-wrapper {
  overflow: hidden;
  padding-bottom: 150px;
}

/* ② LP見出し上余白 (CLAUDE.md 3.2.4 デフォルト 75px) */
body.page-fee .section-heading--lp { margin-top: 75px; }

/* ③ ご利用料金について */
.fee-intro {
  margin-top: 56px;
  padding-right: 128px;
  text-align: right;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 16.4px;
  color: #38393d;
  line-height: 1;
}

/* ④ 料金内訳の図 */
.fee-payment-details-img {
  display: block;
  width: 330px;
  margin: 27px auto 0;
}

/* ⑤ 料金テキスト (混合フォントサイズ) */
.fee-breakdown {
  margin-top: 46px;
  padding-left: 99px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  color: #38393d;
  line-height: 1.8;
}
.fee-breakdown .fee-text-large { font-size: 15.5px; }
.fee-breakdown .fee-text-small { font-size: 13.6px; }

/* ⑥ 料金シミュレータリンク */
.fee-simulator-text {
  margin-top: 32px;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 13.6px;
  color: #38393d;
  line-height: 1.9;
}
.fee-simulator-link {
  color: #3b60ca;
  text-decoration: underline;
  cursor: pointer;
}

/* ⑦ 区切り金ライン */
.fee-gold-divider {
  display: block;
  width: 356px;
  height: 2px;
  margin: 32px auto 0;
  object-fit: fill;
}

/* ⑧ 注意書き */
.fee-notes {
  margin-top: 12px;
  padding: 0 24px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 11px;
  color: #38393d;
  line-height: 1.7;
}
.fee-notes p { margin-bottom: 6px; }
.fee-notes a {
  color: #3b60ca;
  text-decoration: underline;
}

/* ⑨ 取り扱い決済方法 */
.fee-payment-methods-img {
  display: block;
  width: 300px;
  margin: 81px auto 0;
}

/* ⑩ Course Menu 見出し (共通 .section-heading を継承、padding-left のみ差分) */
.fee-course-heading {
  margin-top: 158px;
  padding-left: 12px;
}

/* ⑪-⑯ プランヘッダー */
.fee-plan-section { margin-top: 122px; }
.fee-plan-section:first-of-type { margin-top: 72px; }

.fee-plan-header { text-align: center; }
.fee-plan-header__en-line {
  display: inline-block;
  text-align: center;
  position: relative;
}
.fee-plan-header__en {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 19.3px;
  color: #38393d;
  line-height: 1;
}
.fee-plan-header__number {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 19.3px;
  color: #38393d;
}
.fee-plan-header__name { display: inline-block; }
.fee-plan-header__gold-line {
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 10px;
  margin-bottom: 10px;
  object-fit: fill;
}
.fee-plan-header__ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 11.8px;
  color: #38393d;
  line-height: 1;
}

/* ⑪-⑯ コースカード */
.fee-course-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 18px;
}
.fee-course-card {
  position: relative;
  width: 374px;
  min-height: 82px;
  background: #ffffff;
  border-radius: 4px;
  padding: 16px 20px;
}
.fee-course-card__name {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14.6px;
  color: #38393d;
  line-height: 1.3;
}
.fee-course-card__duration {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 21px;
  color: #38393d;
  line-height: 1.3;
  margin-left: 6px;
}
.fee-course-card__desc {
  margin-top: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 11.2px;
  color: #38393d;
  line-height: 1.6;
}
.fee-course-card__price {
  position: absolute;
  top: 30px;
  right: 18px;
  width: 106px;
  text-align: center;
  font-family: 'BIZ UDPGothic', sans-serif;
  font-weight: 400;
  color: #38393d;
}
.fee-course-card__amount { font-size: 18.1px; }
.fee-course-card__yen { font-size: 11.2px; }
/* 桁数が多い金額 (5,000,000円 など): 右端は固定のまま左に伸ばして 1 行に収める */
.fee-course-card__price--wide {
  width: auto;
  white-space: nowrap;
}

.fee-course-card__reserve {
  position: absolute;
  top: 56px;
  right: 18px;
  text-decoration: none;
}
.fee-course-card__reserve img {
  width: 106px;
  height: 28px;
  display: block;
}
.fee-course-card__reserve:hover { opacity: 0.7; }

.fee-course-card__reserve--text {
  width: 106px;
  height: 28px;
  background: #37415c;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #ffffff;
  letter-spacing: 0.05em;
}

.fee-course-card__arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 9px;
  color: #ffffff;
  animation: fee-arrow-move 1.5s ease-in-out infinite;
}
@keyframes fee-arrow-move {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(5px); }
}

/* プラン注釈 */
.fee-plan-notes {
  padding-left: 31px;
  padding-right: 18px;
  margin-top: 14px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 11px;
  color: #38393d;
  line-height: 1.7;
}
.fee-plan-notes-divider {
  width: 340px;
  height: 2px;
  background: #ccc;
  margin: 6px auto;
}

/* ⑯ bottom grey line */
.fee-section-grey-line {
  width: 374px;
  height: 2px;
  background: #ccc;
  margin: 36px auto 0;
}

/* ⑰ 指名料 */
.fee-nomination-section { margin-top: 104px; }
.fee-section-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 21.1px;
  color: #38393d;
  text-align: center;
  line-height: 1;
}
.fee-containers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
}
.fee-container {
  width: 374px;
  height: 53px;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px 0 47px;
}
.fee-container__label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 16.2px;
  color: #38393d;
}
.fee-container__price {
  font-family: 'BIZ UDPGothic', sans-serif;
  font-weight: 400;
  font-size: 18.1px;
  color: #38393d;
}
.fee-container__yen {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11.2px;
}
.fee-nomination-note {
  text-align: center;
  margin-top: 14px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 11px;
  color: #38393d;
  line-height: 1.7;
}
.fee-nomination-note .fee-text-medium { font-weight: 500; }

/* ⑱ 交通費・深夜料金 */
.fee-transport-section { margin-top: 118px; }
.fee-transport-containers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
}
.fee-transport-container {
  width: 374px;
  height: 54px;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px 0 47px;
}
.fee-transport-container__label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 16.1px;
  color: #38393d;
}
.fee-transport-container__price {
  font-family: 'BIZ UDPGothic', sans-serif;
  font-weight: 400;
  font-size: 18.1px;
  color: #38393d;
}
.fee-transport-note-box {
  width: 374px;
  min-height: 45px;
  background: #ffffff;
  border-radius: 4px;
  margin: 7px auto 0;
  display: flex;
  align-items: center;
  padding: 8px 20px 8px 25px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 11.3px;
  color: #38393d;
  line-height: 1.6;
}
/* 料金行と注記を 1 枚のカードにまとめる形 (神戸市内/神戸市外/兵庫県外) */
.fee-transport-container--with-note {
  height: auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0 0 12px;
}
.fee-transport-container__row {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px 0 47px;
}
.fee-transport-container__note {
  padding: 0 20px 0 25px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 11.3px;
  color: #38393d;
  line-height: 1.6;
}

/* ⑲ 関西以外テキスト */
.fee-non-kansai-section {
  padding: 0 26px;
  margin-top: 26px;
}
.fee-non-kansai-section__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 16.1px;
  color: #38393d;
  line-height: 1.6;
}
.fee-non-kansai-section__body {
  margin-top: 12px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 11px;
  color: #38393d;
  line-height: 1.7;
}

/* ⑳ 深夜料金 */
.fee-late-night-section {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fee-late-night-note {
  width: 374px;
  margin-top: 10px;
  padding: 0 25px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 11px;
  color: #38393d;
  line-height: 1.7;
}

/* ㉑㉒ キャンセル・規約事項 */
.fee-terms-section {
  padding: 0 26px;
  margin-top: 60px;
}
.fee-terms-section__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 18.3px;
  color: #38393d;
  line-height: 1;
  margin-bottom: 20px;
}
.fee-terms-section__body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: #38393d;
  line-height: 1.8;
}
.fee-terms-section + .fee-terms-section {
  margin-bottom: 79px;
}

/* ============================================================
   ============================================================
   Voice (口コミ) ページ固有 CSS (page-voice.php)
   以下は .voice-content スコープまたは .voice-* プレフィックスで限定し、
   既存共通 CSS の値は変更しない
   ============================================================
   ============================================================ */

.voice-content > .section-heading--lp {
  margin-top: 40px;
}

.voice-intro {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 12.7px;
  color: #2a2a2a;
  text-align: center;
  line-height: 1.8;
}
.voice-intro--a {
  margin-top: 59px;
}
.voice-intro--b {
  margin-top: 1.8em;
}

.voice-widget {
  margin-top: 40px;
  margin-bottom: 40px;
}
.voice-widget iframe {
  display: block;
  border: none;
}

/* ============================================================
   404.php / search.php (テンプレート無しページのフォールバック)
   voice-content の余白規格に合わせた新規クラスのみ。既存値は変更しない
============================================================ */
.fallback-content > .section-heading--lp {
  margin-top: 40px;
}
.fallback-intro {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 12.7px;
  color: #2a2a2a;
  text-align: center;
  line-height: 2;
  margin-top: 40px;
}
.fallback-cta {
  margin-top: 40px;
}
.fallback-links {
  list-style: none;
  margin: 40px auto 60px;
  padding: 0;
  text-align: center;
}
.fallback-links li {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  line-height: 2.4;
}
.fallback-links a {
  color: #2a2a2a;
  text-decoration: underline;
}