/**
 * reserve.css - 予約・対応エリアページ用スタイル（SWELL埋め込み用）
 * 配色: サイト本体に準拠（メイン #1976d2、CTA #ff4081）
 *
 * 読み込み対象ページ: reserve, test-reserve
 * 配置先: 子テーマ /css/reserve.css
 * 読み込み: functions.php の wp_enqueue_style で条件付き読み込み
 */

/* ============================================================
   SWELLリセット（.reserve-wrap 内のみ）
   SWELLが .post_content 配下に適用するデフォルトスタイルを打ち消す
   ============================================================ */

/* h1: SWELLの .post_content h1 { font-size: 2em } を上書き
   同詳細度でもSWELLが後読みで負けるため !important 必須 */
.reserve-wrap h1 {
  margin-top: 0 !important;
  margin-bottom: 12px;
  padding: 0 !important;
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.4;
  border: none !important;
  background: none !important;
}

/* h2: SWELL .post_content h2 { font-size:1.4em; margin:4em 0 2em } を上書き */
.reserve-wrap h2 {
  margin-top: 0 !important;
  margin-bottom: 12px;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  border: none !important;
  background: none !important;
}

/* h3: SWELL .post_content h3 を上書き（保険） */
.reserve-wrap h3 {
  margin-top: 0 !important;
  margin-bottom: 12px;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.4;
  border: none !important;
  background: none !important;
}

/* h1/h2/h3: SWELLの装飾用 ::before / ::after を無効化（二重線防止） */
.reserve-wrap h1::before,
.reserve-wrap h1::after,
.reserve-wrap h2::before,
.reserve-wrap h2::after,
.reserve-wrap h3::before,
.reserve-wrap h3::after {
  display: none !important;
  content: none !important;
}

/* button: SWELLリセット不要（個別クラスの詳細度 0,1,0 で
   SWELLのタグ指定 button{} 0,0,1 に勝てるため） */

/* section/div: SWELLの .post_content > * { margin-bottom: 2em } をリセット */
.reserve-wrap > section,
.reserve-wrap > div {
  margin-bottom: 0 !important;
}


/* a: スコープ限定 */
.reserve-wrap a {
  color: #1976d2;
  text-decoration: none;
}

.reserve-wrap a:hover {
  text-decoration: underline;
}

/* a: ボタン内リンク・ヘッダー内リンクの色・装飾を維持（.reserve-wrap a の上書きを防止） */
.reserve-wrap a.reserve-book-btn,
.reserve-wrap a.reserve-btn-primary {
  color: #fff;
}

.reserve-wrap a.reserve-staff-detail__link-btn {
  color: #1976d2;
  text-decoration: none;
}

.reserve-wrap a.reserve-book-btn:hover,
.reserve-wrap a.reserve-btn-primary:hover,
.reserve-wrap a.reserve-btn-secondary:hover,
.reserve-wrap a.reserve-cases__btn:hover {
  text-decoration: none;
}

.reserve-wrap a.reserve-staff-detail__link-btn:hover {
  text-decoration: none;
}

/* ============================================================
   ヒーロー
   ============================================================ */
.reserve-hero {
  text-align: center;
  padding: 32px 0 24px;
}

/* .reserve-wrap の外（別フルワイドブロック）に置かれるため
   .post_content h1 { font-size:2em } に直接 !important で対抗 */
.reserve-hero__title {
  font-size: 20px !important;
  font-weight: 700;
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: #222;
  line-height: 1.4;
  border: none !important;
  background: none !important;
}

/* SWELLの装飾用疑似要素を無効化（ヒーローは .reserve-wrap 外） */
.reserve-hero__title::before,
.reserve-hero__title::after {
  display: none !important;
  content: none !important;
}

.reserve-hero__subtitle {
  font-size: 15px;
  color: #333;
  margin: 0 !important;
  line-height: 1.7;
}

/* ============================================================
   フロー説明（3ステップ）
   ============================================================ */
.reserve-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 20px 0 0;
  padding: 16px 12px;
  background: #f7f9fc;
  border-radius: 8px;
}

.reserve-flow__step {
  display: flex;
  align-items: center;
  gap: 6px;
}

.reserve-flow__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #1976d2;
  border-radius: 50%;
  flex-shrink: 0;
  line-height: 1;
}

.reserve-flow__text {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  line-height: 1.6;
}

.reserve-flow__optional {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: #666;
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1.6;
}

.reserve-flow__arrow {
  display: block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #bbb;
  margin: 0 10px;
  flex-shrink: 0;
}

/* モバイル: 検索ボックスのフォント縮小 */
@media (max-width: 480px) {
  .reserve-search__input {
    font-size: 14px;
    padding: 12px 12px 12px 40px;
  }

  .reserve-search__input::placeholder {
    font-size: 13px;
  }

  /* 案内テキスト: PCの14px→スマホ13px（太字は維持） */
  .reserve-prefectures__label,
  .reserve-date__desc,
  .reserve-cities__line-guide,
  .reserve-outside__lead {
    font-size: 13px;
  }
}

/* モバイル: フロー説明は横一列、可読性を維持しつつコンパクトに */
@media (max-width: 480px) {
  .reserve-flow {
    padding: 10px 6px;
  }

  .reserve-flow__num {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .reserve-flow__text {
    font-size: 11px;
  }

  .reserve-flow__optional {
    font-size: 9px;
    padding: 0 3px;
  }

  .reserve-flow__arrow {
    margin: 0 5px;
    border-left-width: 5px;
    border-top-width: 4px;
    border-bottom-width: 4px;
  }
}

/* ============================================================
   検索ボックス
   ============================================================ */
.reserve-search {
  margin: 24px 0 0;
}

.reserve-search__box {
  position: relative;
}

.reserve-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #777;
  pointer-events: none;
}

.reserve-search__input {
  width: 100%;
  padding: 14px 14px 14px 44px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}

.reserve-search__input:focus {
  border-color: #1976d2;
}

/* サジェスト */
.reserve-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  max-height: 300px;
  overflow-y: auto;
}

.suggestion-item {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background: #e3f2fd;
}

.suggestion-none {
  color: #777;
  cursor: default;
}

.suggestion-none:hover {
  background: #fff;
}

/* ============================================================
   都道府県ボタン
   ============================================================ */
.reserve-prefectures {
  margin: 20px 0 0;
}

.reserve-prefectures__label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 20px 0 12px !important;
  text-align: center;
  line-height: 1.7;
}

.reserve-prefectures__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.reserve-pref-btn {
  flex: 0 1 auto;
  min-width: 70px;
  padding: 12px 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  border: 2px solid #ddd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
  color: #333;
}

.reserve-pref-btn:hover {
  border-color: #1976d2;
  color: #1976d2;
}

.reserve-pref-btn.active {
  border-color: #1976d2;
  background: #1976d2;
  color: #fff;
}

/* ============================================================
   市区町村リスト
   ============================================================ */
.reserve-cities {
  margin: 24px 0 0;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

.reserve-cities__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}

.reserve-cities__list {
  display: block;
}

.reserve-city-btn {
  padding: 8px 16px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
  color: #333;
}

.reserve-city-btn:hover {
  border-color: #1976d2;
  color: #1976d2;
  background: #e3f2fd;
}

.reserve-city-btn.active {
  border-color: #1976d2;
  background: #1976d2;
  color: #fff;
}

/* 市区町村セレクトボックス */
.reserve-cities__select {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  font-family: inherit;
  color: #333;
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.reserve-cities__select:focus {
  border-color: #1976d2;
}

.reserve-cities__select option {
  font-size: 16px;
  padding: 8px;
}

/* 市区町村リスト末尾のLINE誘導 */
.reserve-cities__line-guide {
  width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  line-height: 1.7;
}

.reserve-cities__line-guide a {
  color: #06c755;
  font-weight: 600;
}

/* ============================================================
   対応地域外の方への案内（アコーディオン）
   showCityList（対応県選択時）と #noResultMessage（エリア外検索時）で共有
   ============================================================ */
.reserve-outside {
  width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

/* エリア外メッセージ内では区切り線を出さない（親カードが枠を持つため） */
.reserve-no-result .reserve-outside {
  margin-top: 8px;
  padding-top: 0;
  border-top: none;
}

.reserve-outside__lead {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  line-height: 1.7;
}

/* 「LINEからお問い合わせください」= リンク見た目のトグルボタン */
.reserve-outside__link {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: #06c755;
  text-decoration: underline;
  cursor: pointer;
}

.reserve-outside__link::after {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-left: 6px;
  border-right: 2px solid #06c755;
  border-bottom: 2px solid #06c755;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
}

.reserve-outside__link[aria-expanded="true"]::after {
  transform: rotate(-135deg) translateY(1px);
}

.reserve-outside__panel {
  max-width: 460px;
  margin: 12px auto 0;
  padding: 14px 16px;
  background: #f6f7f6;
  border: 1px solid #e3e6e3;
  border-radius: 8px;
  text-align: left;
}

/* hidden 属性で確実に閉じる（CSSリセットで display が上書きされても効くよう明示） */
.reserve-outside__panel[hidden] {
  display: none;
}

.reserve-outside__title {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #333;
}

.reserve-outside__desc {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.75;
  color: #555;
}

.reserve-outside__list {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.9;
  color: #444;
}

.reserve-outside__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.reserve-outside__copy,
.reserve-outside__line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.reserve-outside__copy {
  background: #fff;
  color: #333;
  border-color: #ccc;
}

.reserve-outside__copy.is-copied {
  background: #eaf8ef;
  color: #06883c;
  border-color: #9fdcb6;
}

/* テーマの a:link（青）に勝たせるため .reserve-wrap a.〜 でスコープ（既存 reserve-book-btn と同手法） */
.reserve-wrap a.reserve-outside__line,
.reserve-wrap a.reserve-outside__line:link,
.reserve-wrap a.reserve-outside__line:visited {
  background: #06c755;
  color: #fff;
}

.reserve-wrap a.reserve-outside__line:hover {
  background: #05b34c;
  color: #fff;
}

.reserve-outside__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.75;
  color: #888;
}

.reserve-outside__note strong {
  color: #555;
}

/* ============================================================
   希望日入力
   ============================================================ */
.reserve-date {
  margin: 24px 0 0;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

.reserve-date__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
}

.reserve-date__optional {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #666;
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: baseline;
  position: relative;
  top: -2px;
  line-height: 1.6;
}

.reserve-date__desc {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px;
  line-height: 1.7;
}

.reserve-date__form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.reserve-date__input {
  flex: 1;
  padding: 10px 12px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.reserve-date__input:focus {
  border-color: #1976d2;
}

/* 日付クリアボタン */
.reserve-date__clear {
  padding: 10px 16px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  display: none;
}

.reserve-date__clear:hover {
  border-color: #999;
  color: #333;
}

/* ============================================================
   結果セクション
   ============================================================ */
.reserve-result {
  margin: 24px 0 0;
}

.reserve-result-heading {
  font-size: 15px;
  font-weight: 700;
  color: #1976d2;
  margin: 0 0 12px;
}

.reserve-loading {
  text-align: center;
  padding: 24px;
  color: #666;
  font-size: 14px;
}

/* 担当者カード — コンパクトリスト形式 */
.reserve-staff-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 2px solid #eee;
  transition: border-color 0.2s;
}

.reserve-staff-card:hover {
  border-color: #1976d2;
}

.reserve-staff-photo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
}

.reserve-staff-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reserve-staff-info {
  flex: 1;
  min-width: 0;
}

.reserve-staff-name {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 1px;
  line-height: 1.4;
}

.reserve-staff-role {
  font-size: 12px;
  font-weight: 400;
  color: #666;
  margin-left: 6px;
}

.reserve-staff-area {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
  line-height: 1.5;
}

.reserve-staff-tagline {
  font-size: 12px;
  color: #444;
  margin-bottom: 2px;
  line-height: 1.5;
}

.reserve-staff-notice {
  font-size: 11px;
  color: #de2d2d;
  font-weight: 600;
  margin-bottom: 2px;
  padding: 2px 6px;
  background: #fef5f5;
  border-radius: 3px;
  display: inline-block;
  line-height: 1.5;
}

/* 個別ページ用: 担当エリア一覧 */
.reserve-staff-areas {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.reserve-staff-areas__title {
  font-size: 13px;
  font-weight: 700;
  color: #666;
  margin-bottom: 6px;
}

.reserve-staff-areas__pref {
  font-size: 13px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 4px;
}

.reserve-staff-areas__pref-name {
  font-weight: 700;
  color: #333;
  margin-right: 4px;
}

.reserve-availability {
  font-size: 12px;
  color: #237804;
  font-weight: 600;
  margin-bottom: 0;
  line-height: 1.5;
}

.reserve-avail-icon {
  color: #237804;
}

.reserve-staff-profile-link {
  font-size: 12px;
  color: #666;
  margin-left: 8px;
  text-decoration: none;
  border-bottom: 1px dotted #999;
}

.reserve-staff-profile-link:hover {
  color: #1976d2;
  border-bottom-color: #1976d2;
  text-decoration: none;
}

/* 予約ボタン（カード右側） */
.reserve-staff-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.reserve-book-btn {
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #ff4081;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.2s;
  text-align: center;
  white-space: nowrap;
}

.reserve-book-btn:hover {
  background: #f50057;
  text-decoration: none;
  color: #fff;
}

/* 全員不可時のボタン注目アニメーション */
.reserve-btn-pulse {
  animation: reservePulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(255, 64, 129, 0.5);
}

@keyframes reservePulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 64, 129, 0.5); }
  50%  { transform: scale(1.05); box-shadow: 0 4px 16px rgba(255, 64, 129, 0.4); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 64, 129, 0.5); }
}

.reserve-other-notice {
  font-size: 13px;
  color: #666;
  text-align: center;
  margin: 4px 0 0;
  line-height: 1.7;
}

/* 全員満席 */
.reserve-all-full {
  background: #fef8e8;
  border: 1px solid #f0d860;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  color: #333;
  margin-bottom: 16px;
}

.reserve-all-full p {
  margin: 4px 0;
  line-height: 1.8;
}

.reserve-all-full p:first-child {
  font-weight: 700;
  font-size: 15px;
}

/* スマホ: アラートをコンパクトに */
@media (max-width: 768px) {
  .reserve-all-full {
    padding: 16px;
  }

  .reserve-all-full p {
    font-size: 13px;
    line-height: 1.6;
    margin: 2px 0;
  }

  .reserve-all-full p:first-child {
    font-size: 13px;
  }
}

/* マーカー（SWELL非依存の自前スタイル） */
.reserve-marker {
  background: linear-gradient(transparent 60%, #fff3a8 60%);
  padding: 0 2px;
  font-weight: 600;
}

.reserve-line-link {
  margin-top: 12px !important;
}

/* 満席時の他担当者リンク */
.reserve-other-staff-links {
  margin-top: 12px;
  text-align: center;
}

.reserve-other-staff-links p {
  font-size: 13px;
  color: #666;
  margin: 0 0 8px;
}

.reserve-other-link {
  display: inline-block;
  font-size: 13px;
  color: #1976d2;
  margin: 0 8px 4px;
  border-bottom: 1px dotted #1976d2;
}

.reserve-other-link:hover {
  text-decoration: none;
  color: #0d47a1;
}

/* エリア外 */
.reserve-no-result {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  margin: 24px 0 0;
  text-align: center;
  color: #666;
}

.reserve-no-result a {
  color: #06c755;
  font-weight: 600;
}

/* ============================================================
   職人紹介（下部・常時表示）
   既存デザイン（.airtakumi-*）に合わせたカード構造
   ============================================================ */

/* セクション全体 */
.reserve-staff-list-section {
  margin-top: 32px;
}

/* イントロ（既存 .airtakumi-intro 準拠） */
.reserve-staff-intro {
  margin-bottom: 30px;
}

.reserve-wrap .reserve-staff-list__title {
  font-size: 1.5em !important;
  font-weight: 700;
  margin: 0 0 15px;
  color: #1976d2;
  line-height: 1.4;
  text-align: center;
}

.reserve-staff-list__intro {
  font-size: 17px;
  color: #444;
  margin: 0;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .reserve-staff-list__intro {
    font-size: 15px;
  }
}

/* 職人カード本体: アコーディオン形式 */
.reserve-staff-detail {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 10px;
  overflow: hidden;
}

/* ヘッダー: コンパクト、クリックで開閉 */
.reserve-staff-detail__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1976d2;
  color: #fff;
  padding: 12px 16px;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.reserve-staff-detail__profile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.reserve-staff-detail__photo {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.reserve-staff-detail__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reserve-staff-detail__info {
  flex: 1;
  min-width: 0;
}

.reserve-staff-detail__name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.reserve-staff-detail__role {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.85;
  margin-left: 6px;
}

.reserve-staff-detail__area {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  margin-top: 2px;
}

.reserve-staff-detail__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ボディ先頭のリンクボタンエリア（自己紹介等） */
.reserve-staff-detail__links {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
}

.reserve-staff-detail__link-btn {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #1976d2;
  background: #fff;
  border: 1px solid #1976d2;
  border-radius: 5px;
  padding: 6px 16px;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.reserve-staff-detail__link-btn:hover {
  background: #e3f2fd;
}

/* 開閉矢印 */
.reserve-staff-detail__toggle {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(255, 255, 255, 0.8);
  transition: transform 0.2s;
}

.reserve-staff-detail.is-open .reserve-staff-detail__toggle {
  transform: rotate(180deg);
}

/* 折りたたみ本体（.reserve-accordion 内のみ非表示 → フロントページでは常時表示） */
.reserve-accordion .reserve-staff-detail__body {
  display: none;
}

.reserve-accordion .reserve-staff-detail.is-open .reserve-staff-detail__body {
  display: block;
}


/* ボタン: 既存 .airtakumi-cta-button 準拠 */
.reserve-btn-primary {
  display: inline-block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #ff4081;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.2s;
  white-space: nowrap;
}

.reserve-btn-primary:hover {
  background: #f50057;
  text-decoration: none;
  color: #fff;
}

.reserve-btn-secondary {
  display: inline-block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #1976d2;
  background: #fff;
  border: 1px solid #1976d2;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.reserve-btn-secondary:hover {
  background: #e3f2fd;
  text-decoration: none;
}

/* お知らせ帯（期間限定対応など） */
.reserve-staff-detail__notice {
  font-size: 13px;
  color: #de2d2d;
  font-weight: 600;
  padding: 10px 20px;
  background: #fef5f5;
  border-left: 4px solid #de2d2d;
}

/* 自己紹介文 */
.reserve-staff-detail__message {
  padding: 20px;
  font-size: 15px;
  color: #444;
  line-height: 1.8;
  border-bottom: 1px solid #eee;
}

/* 対応エリア一覧 */
.reserve-staff-detail__cities {
  padding: 20px;
}

.reserve-staff-detail__pref-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #1976d2;
  padding: 4px 12px;
  border-radius: 4px;
  display: inline-block;
  margin: 8px 0 6px;
}

.reserve-staff-detail__pref-name:first-child {
  margin-top: 0;
}

/* PC: タグバブル表示 */
.reserve-staff-detail__city-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reserve-city-tag {
  display: inline-block;
  padding: 5px 12px;
  font-size: 13px;
  background: #f0f0f0;
  border-radius: 4px;
  color: #333;
  line-height: 1.5;
}

/* スマホ: タグを小さくコンパクトに */
@media (max-width: 768px) {
  .reserve-staff-detail__city-tags {
    gap: 4px;
  }

  .reserve-city-tag {
    padding: 2px 8px;
    font-size: 11px;
  }
}

/* ============================================================
   施工事例リンク
   ============================================================ */
.reserve-cases {
  text-align: center;
}

.reserve-cases__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}

.reserve-cases p {
  font-size: 13px;
  color: #555;
  margin: 0 0 12px;
  line-height: 1.7;
}

.reserve-cases__links {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.reserve-cases__btn {
  display: inline-block;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #1976d2;
  background: #fff;
  border: 1px solid #1976d2;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.2s;
}

.reserve-cases__btn:hover {
  background: #1976d2;
  color: #fff;
  text-decoration: none;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
/* モバイル: 市区町村ボタン — タップ領域確保 */
@media (max-width: 480px) {
  .reserve-cities__list {
    gap: 6px;
  }

  .reserve-city-btn {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 5px;
  }
}

/* モバイル: 検索結果の担当者カード */
@media (max-width: 768px) {
  .reserve-staff-card {
    flex-wrap: wrap;
    padding: 12px;
    gap: 10px;
  }

  .reserve-staff-photo {
    width: 44px;
    height: 44px;
  }

  .reserve-staff-name {
    font-size: 14px;
  }

  .reserve-staff-action {
    flex: 1 0 100%;
  }

  .reserve-book-btn {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* モバイル: 職人カードヘッダー — 1行コンパクト */
@media (max-width: 768px) {
  .reserve-staff-detail__header {
    padding: 10px 12px;
    gap: 6px;
  }

  .reserve-staff-detail__photo {
    width: 36px;
    height: 36px;
  }

  .reserve-staff-detail__actions {
    gap: 4px;
  }

  .reserve-staff-detail__name {
    font-size: 13px;
  }

  .reserve-staff-detail__area {
    font-size: 11px;
  }
}

@media (min-width: 600px) {
  .reserve-hero__title {
    font-size: 24px !important;
  }

  .reserve-staff-card {
    padding: 16px 20px;
  }

  .reserve-staff-photo {
    width: 56px;
    height: 56px;
  }

  .reserve-staff-name {
    font-size: 16px;
  }

  .reserve-staff-area,
  .reserve-staff-tagline {
    font-size: 13px;
  }

  .reserve-book-btn {
    font-size: 14px;
    padding: 10px 20px;
  }
}

/* ============================================================
   受付一時停止メッセージ
   ============================================================ */
.reserve-suspended {
  background: #fff;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.reserve-suspended__icon {
  font-size: 40px;
  margin-bottom: 8px;
  line-height: 1;
  display: none; /* 工事アイコンは非表示（写真で代替） */
}

.reserve-suspended__title {
  font-size: 17px;
  font-weight: 700;
  color: #333;
  margin: 0 0 16px;
  line-height: 1.5;
}

.reserve-suspended__desc {
  text-align: left;
  margin: 0 0 24px;
}

.reserve-suspended__desc p {
  font-size: 14px;
  color: #555;
  line-height: 1.8;
  margin: 0 0 10px;
}

.reserve-suspended__desc p:last-child {
  margin-bottom: 0;
}

.reserve-suspended__desc-closing {
  font-size: 14px;
  color: #555;
  margin: 16px 0 24px;
}

/* 先行予約CTAエリア */
.reserve-suspended__cta {
  background: #fdf8f0;
  border: 1px solid #e8d5b8;
  border-radius: 8px;
  padding: 24px 20px;
  margin-bottom: 0;
}

/* クーポン表示 */
.reserve-suspended__coupon {
  margin-bottom: 16px;
}

.reserve-suspended__coupon-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #b37a1a;
  background: #fff5e0;
  border: 1px solid #e0c878;
  border-radius: 4px;
  padding: 3px 10px;
  margin: 0 0 8px;
  letter-spacing: 0.05em;
}

.reserve-suspended__coupon-badge i {
  margin-right: 4px;
}

.reserve-suspended__coupon-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0 0 6px;
  line-height: 1.5;
}

.reserve-suspended__coupon-price {
  color: #d32f2f;
  font-size: 22px;
}

.reserve-suspended__coupon-note {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.6;
}

.reserve-suspended__coupon-caution {
  font-size: 11px;
  color: #999;
  margin: 10px 0 0;
}

/* 先行予約なしエリアの代替CTA */
.reserve-suspended__alt-cta {
  background: #f7f9fc;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.reserve-suspended__alt-cta p {
  font-size: 14px;
  color: #555;
  margin: 0 0 12px;
  line-height: 1.7;
}

.reserve-suspended__form-btn {
  display: inline-block;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 700;
  color: #fff !important;
  background: #ff4081;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background 0.2s;
  border-bottom: none !important;
}

.reserve-suspended__form-btn:hover {
  background: #f50057;
  text-decoration: none !important;
  color: #fff !important;
}

/* 研修写真 */
.reserve-suspended__photos {
  display: flex;
  gap: 12px;
  margin: 0 0 20px;
  justify-content: center;
}

.reserve-suspended__photos img {
  width: 48%;
  max-width: 280px;
  border-radius: 8px;
  object-fit: cover;
  aspect-ratio: 4/3;
  cursor: pointer;
  transition: opacity 0.2s;
}

.reserve-suspended__photos img:hover {
  opacity: 0.85;
}

/* 画像拡大オーバーレイ */
.reserve-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  cursor: pointer;
  padding: 20px;
}

.reserve-lightbox img {
  max-width: 90%;
  max-height: 90vh;
  border-radius: 8px;
  object-fit: contain;
}

.reserve-suspended__photos-caption {
  font-size: 12px;
  color: #888;
  margin: 6px 0 0;
  text-align: center;
}

/* アプリセクション（スマホはストアバッジ、PCはQRコードを表示） */
.reserve-suspended__app {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
  text-align: center;
}

.reserve-suspended__app-lead {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin: 0 0 4px;
}

.reserve-suspended__app-amount {
  color: #E33E3B;
}

.reserve-suspended__app-desc {
  font-size: 13px;
  color: #666;
  margin: 0 0 12px;
}

.reserve-suspended__app-badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.reserve-suspended__app-badge img {
  height: 48px;
  width: auto;
  display: block;
}

.reserve-suspended__app-qr {
  display: none;
}

.reserve-suspended__app-qr img {
  width: 160px;
  height: 160px;
  display: block;
  margin: 0 auto;
}

.reserve-suspended__app-qr-caption {
  font-size: 12px;
  color: #666;
  margin: 6px 0 0;
}

@media (min-width: 760px) {
  .reserve-suspended__app-badges { display: none; }
  .reserve-suspended__app-qr { display: block; }
}

/* スマホ: 停止メッセージをコンパクトに */
@media (max-width: 768px) {
  .reserve-suspended {
    padding: 24px 16px;
  }

  .reserve-suspended__icon {
    font-size: 32px;
  }

  .reserve-suspended__title {
    font-size: 15px;
  }

  .reserve-suspended__desc p {
    font-size: 13px;
  }

  .reserve-suspended__cta {
    padding: 16px;
  }

  .reserve-suspended__coupon-title {
    font-size: 16px;
  }

  .reserve-suspended__coupon-price {
    font-size: 20px;
  }

  .reserve-suspended__form-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 20px;
  }

  .reserve-suspended__photos {
    gap: 8px;
  }

  .reserve-suspended__photos img {
    width: 48%;
    aspect-ratio: 4/3;
  }
}