/* --- カラー変数定義 --- */
/* :root { */
/* 背景色 (Background Colors) */
/* --bg-main: #ffffff; 基本背景（白） */
/* --bg-dark: #2e2c2d; ヘッダー・フッター・ヒーロー（濃いグレー） */
/* --bg-section-gray: #f7f7f7; メニュー・お問い合わせ（薄いグレー） */
/* --bg-hero-blue: #ebf5f7; ヒーローエリア用の薄い青（予備） */

/* 文字色 (Font Colors) */
/* --text-main: #2e2c2d; 基本の本文（濃いグレー） */
/* --text-white: #ffffff; 暗い背景上の文字（白） */
/* --text-accent: #f4d08a; アクセント文字・見出し（明るい金） */
/* --text-logo: #e2c07e; ロゴ用（画像再現の金） */

/* パーツ・装飾用 (Components) */
/* --color-accent: #f4d08a; ボタン背景・ボーダー・マーカー */
/* } */
:root {
  /* 背景色 (Background Colors) */
  --bg-main: #ffffff; /* 基本背景：清潔感のある白 */
  --bg-dark: #3a5b7d; /* ヘッダー等：知的なネイビーブルー（グレーから変更） */
  --bg-section-gray: #f2f7fa; /* セクション背景：青みのある超淡色グレー */
  --bg-hero-blue: #e6f2f8; /* ヒーロー：安心感を与える薄い水色 */

  /* 文字色 (Font Colors) */
  --text-main: #333a40; /* 本文：読みやすさを重視した濃いチャコール */
  --text-white: #ffffff; /* 暗い背景上の文字 */
  --text-accent: #2c7da0; /* 見出し等：誠実さを感じさせる落ち着いた青 */
  --text-logo: #ffffff; /* ロゴ：信頼の象徴となるディープブルー */

  /* パーツ・装飾用 (Components) */
  --color-accent: #4fa3d1; /* ボタン等：清潔感と行動を促す爽やかな青 */
  --color-sub-accent: #a5d8ff; /* マーカー・装飾用：優しい水色 */
}
/* --- ベース・共通設定 --- */
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.8;
  background: var(--bg-main);
  color: var(--text-main);
}

section {
  padding: 60px 20px;
}

h2 {
  margin-bottom: 20px;
  font-size: 24px;
  color: var(--text-main);
  border-left: 5px solid var(--color-accent);
  padding-left: 12px;
}

h3 {
  margin-top: 30px;
  color: var(--text-main);
}

strong {
  color: var(--text-main);
  background: linear-gradient(transparent 60%, var(--color-accent) 60%);
}

/* --- ヘッダー・ナビゲーション --- */
.header {
  background: var(--bg-dark);
  color: var(--text-accent);
  padding: 24px;
  text-align: center;
}

.header h1 {
  margin: 0;
  font-size: 28px;
}
.header p {
  margin: 5px 0 0;
  font-size: 14px;
}

#top-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--bg-dark);
  transform: translateY(-100%);
  transition: transform 0.35s ease;
  z-index: 1000;
}

#top-menu.show {
  transform: translateY(0);
}

.menu-inner {
  max-width: 1100px;
  margin: auto;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  color: var(--text-white);
  font-weight: bold;
  font-size: 18px;
}

#top-menu ul {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}

#top-menu a {
  color: var(--text-white);
  text-decoration: none;
  font-size: 14px;
}

#top-menu a:hover {
  color: var(--text-accent);
}

#top-menu .reserve {
  background: var(--color-accent);
  color: var(--text-main);
  padding: 8px 14px;
  border-radius: 4px;
  font-weight: bold;
}

/* --- ファーストビュー (Hero) --- */
.hero {
  background: var(--bg-dark);
  color: var(--text-white);
  text-align: center;
  padding-top: 80px;
  min-height: 100vh;
}

.hero h2 {
  color: var(--text-white);
  font-size: 26px;
  margin-top: 40px;
}

.hero-logo-box {
  text-align: center;
  padding: 40px 20px;
  margin-bottom: 30px;
}

.hero-logo-box .main-title {
  font-family: "Sawarabi Mincho", "Hiragino Mincho ProN", "MS Mincho", serif;
  color: var(--text-logo);
  font-size: 6rem;
  font-weight: normal;
  line-height: 1.2;
  letter-spacing: 0.1em;
  margin: 0 0 50px 0;
}

.hero-logo-box .main-title span {
  display: block;
}

.hero-logo-box .sub-text {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-family: "Sawarabi Mincho", serif;
  color: var(--text-logo);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
}

.hero-image {
  max-width: 900px;
  height: auto;
  margin-bottom: 30px;
  border-radius: 6px;
}

/* --- コンテンツセクション --- */
.trouble ul,
.profile ul,
.strength ul {
  padding-left: 20px;
}
.trouble li::marker,
.profile li::marker {
  color: var(--text-accent);
}

.menu,
.contact {
  background: var(--bg-section-gray);
  text-align: center;
}

/* --- 画像・レイアウト --- */
.strength-images,
.profile-images {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.strength-images-3 img {
  flex: 1;
  max-width: calc(33.333% - 14px);
  height: auto;
  border-radius: 6px;
}

.strength-images-full img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}
/* 院長紹介の画像コンテナを左寄せにする */
.profile-images.profile-images-profile {
  justify-content: flex-start;
}

/* 画像自体のサイズが大きすぎる場合は、適宜調整してください */
.profile-images-profile img {
  max-width: 300px; /* お好みのサイズに調整 */
  width: 100%;
  height: auto;
  border-radius: 6px;
}
/* アクセスセクション */
.access .flex {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 40px;
  margin-top: 30px;
}

.access .flex > div:first-child {
  flex: 1.5;
}
.access .flex > div:last-child {
  flex: 1;
}

.access-images img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- フッター・ボタン --- */
.footer {
  background: var(--bg-dark);
  color: var(--text-white);
  text-align: center;
  padding: 15px;
  font-size: 14px;
}

.btn {
  display: inline-block;
  background: var(--color-accent);
  color: var(--text-main);
  padding: 12px 28px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  margin-top: 20px;
}

.btn:hover {
  opacity: 0.85;
}

/* --- メディアクエリ (レスポンシブ) --- */
@media (max-width: 768px) {
  .access .flex {
    flex-direction: column-reverse;
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .hero-logo-box {
    height: auto;
  }
  .hero-logo-box .main-title {
    font-size: 2rem;
  }
  .hero-logo-box .sub-text {
    font-size: 0.9rem;
    gap: 10px;
  }
  .strength-images-3 img {
    max-width: 100%;
  }
}
/* お問い合わせエリア専用の横並び設定 */
.contact .flex {
  display: flex;
  align-items: center; /* 上下中央揃え */
  justify-content: center; /* 左右中央揃え */
  gap: 20px; /* ボタンと画像の間隔 */
  flex-wrap: wrap; /* スマホで入り切らない場合に折り返す */
  margin-top: 20px;
}

/* LINEボタンが入っているdivの調整 */
.contact .flex > div {
  flex: none; /* 幅をコンテンツに合わせる */
}

/* LINE画像のサイズ調整（必要であれば） */
.access-images img {
  max-width: 100%;
  height: auto;
}