/* ============================================================
   デザイン共通トークン（デザイナー指定：フォント F①〜F④・角丸・背景）
   ------------------------------------------------------------
   F①  基本      1rem   / 500 / 行高160% / 字間2%   … 本文など大半
   F②  ヘッダー   0.88rem/ 600 / 行高140% / 字間2%   … header・パンくず（SP 0.75rem）
   F③  タイトル中 1.5rem / 600 / 行高120% / 字間10%  … 見出し・大きい文字（SP 字間5%）
   F④  タイトル小 1rem   / 600 / 行高140% / 字間5%   … 小見出し・ボタン
   フォントは全て Noto Sans JP
   ============================================================ */
:root {
  --ff-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  /* F① 基本 */
  --f1-size: 1rem;    --f1-weight: 500; --f1-lh: 1.6; --f1-ls: 0.02em;
  /* F② ヘッダー・パンくず */
  --f2-size: 0.88rem; --f2-weight: 600; --f2-lh: 1.4; --f2-ls: 0.02em;
  /* F③ タイトル(中)・見出し */
  --f3-size: 1.5rem;  --f3-weight: 600; --f3-lh: 1.2; --f3-ls: 0.10em;
  /* F④ タイトル(小)・ボタン */
  --f4-size: 1rem;    --f4-weight: 600; --f4-lh: 1.4; --f4-ls: 0.05em;

  /* 角丸 */
  --radius-lg: 8px;  /* 大きいボックス */
  --radius-sm: 4px;  /* 小さいボックス・ボタン等 */

  /* 背景色（PDF指定） */
  --bg-soft:      #f5f8ff; /* 情報ボックス・テーブル交互行 */
  --bg-item:      #f6f6f6; /* 設備タグなど項目背景 */
  --bg-item-blue: #e5edff; /* 項目ラベル・カード背景 */

  /* 共通ボーダー太さ */
  --btn-border-width: 2px;         /* ボタン枠線 */
  --divider-color: rgba(51,51,51,0.10); /* 区切り線 #333333 透明度10% */
}

@media (max-width: 767px) {
  :root {
    --f2-size: 0.75rem; /* スマホ版 */
    --f3-ls: 0.05em;    /* スマホ版 */
  }
}

/* --- フォントユーティリティクラス（HTML側で個別適用する場合に使用） --- */
.f1 { font-family: var(--ff-base); font-size: var(--f1-size); font-weight: var(--f1-weight); line-height: var(--f1-lh); letter-spacing: var(--f1-ls); }
.f2 { font-family: var(--ff-base); font-size: var(--f2-size); font-weight: var(--f2-weight); line-height: var(--f2-lh); letter-spacing: var(--f2-ls); }
.f3 { font-family: var(--ff-base); font-size: var(--f3-size); font-weight: var(--f3-weight); line-height: var(--f3-lh); letter-spacing: var(--f3-ls); }
.f4 { font-family: var(--ff-base); font-size: var(--f4-size); font-weight: var(--f4-weight); line-height: var(--f4-lh); letter-spacing: var(--f4-ls); }

/* 太さ・行高・字間のみ適用したい場合（サイズは各要素のまま維持） */
.font-f1 { font-weight: var(--f1-weight); line-height: var(--f1-lh); letter-spacing: var(--f1-ls); }
.font-f2 { font-weight: var(--f2-weight); line-height: var(--f2-lh); letter-spacing: var(--f2-ls); }
.font-f3 { font-weight: var(--f3-weight); line-height: var(--f3-lh); letter-spacing: var(--f3-ls); }
.font-f4 { font-weight: var(--f4-weight); line-height: var(--f4-lh); letter-spacing: var(--f4-ls); }

/* --- 基本フォント（F①）を全体に適用 --- */
body {
  font-family: var(--ff-base);
  font-weight: var(--f1-weight);
  line-height: var(--f1-lh);
  letter-spacing: var(--f1-ls);
}

/* ============================================================
   共通パーツ：固定お問い合わせボタン（左下）
   ============================================================ */

.floating-contact-btn {
  position: fixed;
  bottom: 0;
  left: 10px;
  z-index: 100;
  display: block;
  width: 230px;
  transform: translateY(calc(50% + 4px));
  transition: transform 0.3s ease;
}

.floating-contact-btn img {
  display: block;
  width: 100%;
  height: auto;
}

.floating-contact-btn:hover {
  transform: translateY(20%);
}

/* 下部固定バー（件数バーなど）がある場合のオフセット */
.floating-contact-btn--has-bar {
  bottom: 56px;
}

/* ============================================================
   パンくずリスト（全ページ共通）
   ============================================================ */
/* ─── 共通パンくず（parts/breadcrumb.php 用） ─── */
.breadcrumb {
  padding: 14px 0;
}

/* ─── インラインパンくず（sr-breadcrumb / sa-breadcrumb 用・全ページ共通） ─── */
.sr-breadcrumb,
.sa-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  /* F② ヘッダー・パンくず */
  font-size: var(--f2-size);
  font-weight: var(--f2-weight);
  line-height: var(--f2-lh);
  letter-spacing: var(--f2-ls);
  color: var(--color-text-light);
  margin-bottom: 20px;
}
/* リンク：#333333 ＋下線（/search/area/ を正スタイルとして統一） */
.sr-breadcrumb a,
.sa-breadcrumb a {
  color: #333333;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity .15s;
}
.sr-breadcrumb a:hover,
.sa-breadcrumb a:hover {
  opacity: 0.7;
  text-decoration: underline;
}
/* 現在ページ（最終 span）はテキストカラー */
.sr-breadcrumb span:not(.sr-breadcrumb__sep),
.sa-breadcrumb span:not(.sa-breadcrumb__sep) {
  color: var(--color-text-light);
}
.sr-breadcrumb__sep,
.sa-breadcrumb__sep {
  display: inline-block;
  width: 4px;
  height: 12px;
  background-image: url('../images/common/breadcrumb.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  font-size: 0;
  margin: 0 2px;
  align-self: center;
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  /* F② ヘッダー・パンくず */
  font-size: var(--f2-size);
  font-weight: var(--f2-weight);
  line-height: var(--f2-lh);
  letter-spacing: var(--f2-ls);
  color: var(--color-text-light);
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 12px;
  background-image: url('../images/common/breadcrumb.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: 0 6px;
  vertical-align: middle;
}
.breadcrumb__item a {
  color: #333333;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity .15s;
}
.breadcrumb__item a:hover {
  opacity: 0.7;
}
.breadcrumb__item > [aria-current="page"] {
  color: var(--color-text);
  font-weight: 500;
}

@media (max-width: 767px) {
  .breadcrumb__list {
    font-size: 0.75rem;
  }

  .floating-contact-btn {
    position: fixed;
    right: 0;
    bottom: 100px;
    top: unset;
    left: unset;
    width: 42px;
    transform: none;
    background: var(--color-primary);
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.25);
    padding: 20px 11px;
    transition: opacity 0.15s;
    z-index: 300;
  }

  .floating-contact-btn--has-bar {
    bottom: 160px;
  }

  .floating-contact-btn img {
    display: none;
  }

  .floating-contact-btn::after {
    content: 'お問い合わせ';
    display: block;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: var(--color-white);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
  }

  .floating-contact-btn:hover {
    opacity: 0.85;
  }
}

/* ─── 汎用「只今準備中」ページ（parts/coming-soon.php） ───────── */
.coming-soon {
  background-color: var(--color-bg);
  min-height: 60vh;
}
.coming-soon__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 80px;
}
.coming-soon__box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 64px 32px;
  text-align: center;
  color: var(--color-text);
}
.coming-soon__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 24px;
}
.coming-soon__label {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.coming-soon__message {
  font-size: 0.875rem;
  line-height: 1.8;
  margin-bottom: 32px;
}
.coming-soon__back {
  display: inline-block;
  color: var(--color-primary);
  text-decoration: underline;
}
@media (max-width: 767px) {
  .coming-soon__box {
    padding: 40px 16px;
  }
}