/* デザイン方針：女性らしい優しさと安心感のあるナチュラルスタイル（2015年前後のWordPress風の佇まい） */
    body {
      font-family: 'Yu Gothic', 'Hiragino Sans', 'Meiryo', sans-serif;
      background-color: #fcfbf9; /* 優しく温かみのある極薄のベージュホワイト */
      color: #4a423a; /* 硬い黒を避け、優しいダークブラウン寄りの墨色 */
      line-height: 1.95; /* 読みやすさを追求したゆったりめの行間 */
    }

    /* 上品な女性らしさを演出する明朝体（見出し用） */
    .font-serif-custom {
      font-family: 'Georgia', 'Hiragino Mincho ProN', 'Yu Mincho', 'MS Mincho', serif;
    }
    
    /* コンテンツの最大幅を1100pxに制限 */
    .container-custom {
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 20px;
      padding-right: 20px;
    }
    
    /* ボタン */
    .btn-custom {
      border-radius: 6px;
      font-weight: bold;
      height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease-in-out;
      cursor: pointer;
    }
    
    .btn-primary {
      background-color: #d97d5b; /* アプリコットコーラル */
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(217, 125, 91, 0.15);
      border: none;
    }
    .btn-primary:hover:not(:disabled) {
      background-color: #c46847;
      transform: translateY(-1px);
    }
    .btn-primary:disabled {
      background-color: #dcdad4;
      color: #8c8882;
      box-shadow: none;
      cursor: not-allowed;
      transform: none;
    }
    
    .btn-secondary {
      background-color: #354458; /* ココアネイビー */
      color: #ffffff;
      border: none;
    }
    .btn-secondary:hover:not(:disabled) {
      background-color: #273444;
      transform: translateY(-1px);
    }
    
    .btn-outline {
      border: 1.5px solid #cfab93; /* ミルクティーベージュ */
      color: #b18366;
      background-color: #ffffff;
    }
    .btn-outline:hover:not(:disabled) {
      background-color: #fcfbf9;
      border-color: #b18366;
    }
    
    /* セクション背景 */
    .section-bg-white { background-color: #ffffff; }
    .section-bg-gray { background-color: #f5f4f0; }
    .section-bg-cream { background-color: #f2ede4; }
    
    /* テーブルスタイル */
    .table-custom {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .table-custom th {
      background-color: #354458;
      color: #ffffff;
      padding: 14px 18px;
      font-weight: bold;
      text-align: left;
      border: 1px solid #e2ded8;
      font-size: 15px;
    }
    .table-custom td {
      padding: 16px 18px;
      border: 1px solid #e2ded8;
      background-color: #ffffff;
      font-size: 15px;
    }
    @media (max-width: 640px) {
      .table-custom th, .table-custom td {
        padding: 10px 12px;
        font-size: 14px;
      }
    }

    /* FAQアコーディオン */
    .faq-item {
      border: 1px solid #e2ded8;
      background-color: #ffffff;
      margin-bottom: 12px;
      border-radius: 6px;
      transition: background-color 0.2s ease;
    }
    .faq-item:hover { background-color: #fcfbf9; }
    
    /* SPAページ遷移用 */
    .page-content { display: none; }
    .page-content.active { display: block; }

    /* 見出し前飾り */
    .heading-deco::before {
      content: "◇";
      color: #d97d5b;
      margin-right: 10px;
      font-weight: bold;
    }
    
    /* フォーム要素 */
    .input-custom, .select-custom {
      width: 100%;
      height: 48px;
      padding: 0 16px;
      border: 1.5px solid #dcdad4;
      border-radius: 6px;
      background-color: #ffffff;
      transition: border-color 0.2s ease;
      color: #4a423a;
    }
    .input-custom:focus, .select-custom:focus {
      outline: none;
      border-color: #cfab93;
      box-shadow: 0 0 0 2px rgba(207, 171, 147, 0.2);
    }
    .textarea-custom {
      width: 100%;
      padding: 12px 16px;
      border: 1.5px solid #dcdad4;
      border-radius: 6px;
      background-color: #ffffff;
      transition: border-color 0.2s ease;
      color: #4a423a;
    }
    .textarea-custom:focus {
      outline: none;
      border-color: #cfab93;
      box-shadow: 0 0 0 2px rgba(207, 171, 147, 0.2);
    }

    /* フォームバリデーション用スタイル */
    .error-msg {
      color: #e11d48; /* ローズレッド */
      font-size: 0.75rem;
      font-weight: bold;
      margin-top: 0.35rem;
      display: none;
    }
    .has-error .error-msg { display: block; }
    .has-error .input-custom, .has-error .select-custom, .has-error .textarea-custom {
      border-color: #e11d48;
      background-color: #fff1f2;
    }
    .form-global-error {
      background-color: #fff1f2;
      border: 1px solid #fda4af;
      color: #e11d48;
      padding: 12px 16px;
      border-radius: 6px;
      margin-bottom: 24px;
      font-weight: bold;
      display: none;
    }

    /* お問い合わせ・予約フォーム進行インジケーター */
    .step-indicator {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: bold;
      color: #8c8882;
      margin-bottom: 30px;
    }
    .step-indicator span {
      padding: 6px 16px;
      border-radius: 20px;
      background-color: #e6e4de;
    }
    .step-indicator span.active {
      background-color: #354458;
      color: #ffffff;
    }
    .step-indicator .arrow {
      margin: 0 12px;
      color: #cfab93;
    }

    /* フォーム UI（.form-row-2col / .form-actions）は components.css に集約 */

    @media (max-width: 639px) {
      form fieldset.border.rounded-md {
        padding: 1.25rem;
      }
      .form-group {
        margin-bottom: 0.25rem;
      }
    }

    /* パンくずリスト */
    .breadcrumb-custom {
      font-size: 12px;
      color: #b18366;
      margin-bottom: 15px;
    }
    .breadcrumb-custom a { color: #b18366; text-decoration: none; }
    .breadcrumb-custom a:hover { text-decoration: underline; }
    .breadcrumb-custom span::after { content: " ＞ "; margin: 0 6px; color: #cfab93; }
    .breadcrumb-custom span:last-child::after { content: ""; }

/* PHP換装: 単一ページ表示 */
main.page-content, .page-content.flex-grow { display: block !important; }
#navbar, header { font-family: 'Yu Gothic', 'Hiragino Sans', 'Meiryo', sans-serif; }

/* ------------------------------------------------------------------
 * グローバルヘッダー（スマホ: 2行キャッチ・ハンバーガー / PC: ナビ+CTA グループ）
 * ------------------------------------------------------------------ */
.site-header-wrap {
  background-color: #ffffff;
}

.site-header__inner {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.site-header__brand {
  text-decoration: none;
  color: inherit;
}

.site-header__tagline--mobile {
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.site-header__name {
  line-height: 1.25;
  margin-top: 0.125rem;
}

.site-header__nav-list,
.site-header__mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__nav-list a {
  display: block;
  padding-block: 0.5rem;
  font-size: 15px;
  font-weight: bold;
  color: #354458;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-header__nav-list a:hover {
  color: #d97d5b;
}

.site-header__menu-btn {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  flex-shrink: 0;
  color: #354458;
}

.site-header__menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 1.25rem;
}

.site-header__menu-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #354458;
  border-radius: 1px;
}

.site-header__mobile-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-weight: bold;
  color: #354458;
}

.site-header__mobile-list a {
  display: block;
  color: #354458;
  text-decoration: none;
}

.site-header__mobile-list li:not(:last-child):not(:nth-last-child(2)) a {
  padding-block: 0.25rem;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.875rem;
}

.site-header__mobile-cta {
  padding-block: 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  text-align: center;
  color: #ffffff !important;
}

.site-header__mobile-cta--contact {
  background-color: #354458;
}

.site-header__mobile-cta--reserve {
  background-color: #d97d5b;
}

@media (max-width: 1023px) {
  .site-header {
    min-height: 4.25rem;
    padding-block: 0.5rem;
  }

  .site-header__inner {
    padding-left: 12px;
    padding-right: 12px;
  }

  .site-header__brand {
    flex: 1;
    min-width: 0;
    padding-right: 0.5rem;
  }

  .site-header__tagline--mobile {
    font-size: 0.625rem;
  }
}

@media (min-width: 1024px) {
  .site-header {
    height: 76px;
  }

  .site-header__name {
    margin-top: 0;
  }

  .site-header__desktop {
    margin-left: auto;
    align-items: center;
    gap: 2rem;
  }

  .site-header__nav-list {
    display: flex;
    gap: 1.5rem;
  }

  .site-header__cta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
  }
}