/*
Theme Name: 【公式】脳梗塞リハビリステーション神戸須磨
Description: 脳梗塞リハビリステーション神戸須磨の公式サイトテーマ
Version: 1.0.0
Author: Noureha Kobesuma
Text Domain: noureha-kobesuma2025
*/

/* ========================================
   CSSカスタムプロパティ（変数）
   ======================================== */
:root {
  /* ブランドカラー */
  --brand-primary: #14C1B6;
  --brand-primary-hover: #F18F39;
  --brand-secondary: #78C025;
  --brand-secondary-hover: #6ba820;
  --brand-accent: #F18F39;
  --brand-text: #000000;
  --brand-black: #000000;
  --brand-white: #FFFFFF;
  
  /* 背景色 */
  --brand-bg-gray: #D9D9D9;
  --brand-bg-green: #6BC2BD;
  --brand-bg-blue: #99BCB9;
  
  /* デザイン規則の余白設定 */
  --section-spacing-pc: 50px;
  --section-spacing-sp: 30px;
  --content-spacing-pc: 30px;
  --content-spacing-sp: 30px;
  --page-title-margin-pc: 60px;
  --page-title-margin-sp: 30px;
  --section-title-margin-pc: 30px;
  --section-title-margin-sp: 30px;
  
  /* レイアウト */
  --container-max-width: 1000px;
  --container-padding: 1rem;
  --container-padding-pc: 2rem;
  
  /* タイポグラフィ */
  --font-family-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 28px;
  --font-size-3xl: 32px;
  
  /* ボーダー */
  --border-radius: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-radius-xl: 1rem;
  
  /* シャドウ */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* トランジション */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-header: 9999;
}

/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* アンカーリンク用のオフセット調整 */
[id] {
  scroll-margin-top: 120px;
}

/* Viewport height for mobile browsers */

/* Set viewport height on mobile */
@media (max-width: 767px) {
  :root {
    --vh: 1vh;
  }
  
  /* SP版のデザイン規則 */
  .section {
    padding: var(--section-spacing-sp) 0;
  }
  
  .section-content > * + * {
    margin-top: var(--content-spacing-sp);
  }
  
  .page-title {
    margin-bottom: var(--page-title-margin-sp);
  }
  
  .section-title,
  .page-section-title {
    margin-bottom: var(--section-title-margin-sp);
  }
  
  .section-subtitle {
    margin-bottom: var(--content-spacing-sp);
  }
  
  .section-text {
    margin-bottom: var(--content-spacing-sp);
  }
}

body {
  font-family: var(--font-family-base);
  line-height: 2rem;
  color: var(--brand-text);
  padding-top: 100px; /* ヘッダーの高さ分のpadding */
}

/* ========================================
   ユーティリティクラス
   ======================================== */

/* コンテナ */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

/* ヘッダー内のコンテナは100%幅を維持 */
.site-header .container {
  max-width: 100%;
  padding: 0 var(--container-padding);
}

/* フッター専用コンテナ */
.site-footer .container {
  max-width: calc(1000px + 40px);
  margin: 0 auto;
  padding: 0 20px;
}

/* ========================================
   ボタンシステム
   ======================================== */

/* 基本ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 21px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold !important;
  font-size: 16px !important;
  transition: all var(--transition-normal);
  border: none;
  cursor: pointer;
  line-height: 1.5;
  height: 60px;
  min-width: 120px;
}

/* ボタンバリエーション */
.btn--primary {
  background-color: var(--brand-primary);
  color: var(--brand-white);
}

.btn--primary:hover {
  background-color: var(--brand-primary-hover);
  color: var(--brand-white);
}

.btn--secondary {
  background-color: var(--brand-secondary);
  color: var(--brand-white);
}

.btn--secondary:hover {
  background-color: var(--brand-secondary-hover);
}

.btn--outline {
  background-color: transparent;
  color: var(--brand-primary);
  border: 2px solid var(--brand-primary);
}

--outline:hover {
  background-color: var(--brand-primary-hover);
  color: var(--brand-white);
}

/* アイコン付きボタン */
.btn__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  fill: currentColor;
}

/* お問い合わせボタン */
.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: var(--brand-white);
}

/* ヘッダーお問い合わせボタン */
.btn--sm {
  padding: 0;
  font-size: var(--font-size-base);
  color: var(--brand-white) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 250px;
  height: 60px;
  position: relative;
  text-align: center;
}

.btn--sm .btn__icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-white) !important;
  fill: var(--brand-white) !important;
  flex-shrink: 0;
}



/* スキップリンク */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;

  color: var(--brand-white);
  padding: 8px;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  z-index: 1000;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 6px;
}

/* ヘッダー */
.site-header {
  background-color: var(--brand-white);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* メニューが開かれた際のヘッダー */
.site-header.menu-open {
  z-index: 10000;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  min-height: 100px;
}

.site-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--brand-primary);
  text-decoration: none;
}

.site-title:hover {
  color: #0fa89e;
}

/* ヘッダーロゴ */
.header-logo {
  width: 310px;
  height: 30px;
  display: block;
}

/* PC時のヘッダーロゴ */
@media (min-width: 1000px) {
  .header-logo {
    width: 413px;
    height: 40px;
  }
  
  .services-title {
    white-space: nowrap;
  }
  
  /* PC時ナビゲーションの改行を非表示（改行しない） */
  .nav-desktop br {
    display: none;
  }
  
  /* PC時ヘッダーお問い合わせボタンの文字色を白に */
  .btn--sm {
    color: var(--brand-white);
  }
  
  .btn--sm .btn__icon {
    color: var(--brand-white);
    fill: var(--brand-white);
  }
}

/* SP時のヘッダーロゴ */
@media (max-width: 999px) {
  body {
    padding-top: 50px; /* SP版ヘッダーの高さ分のpadding */
  }
  
  .header-content {
    min-height: 50px;
  }
  
  .header-logo {
    width: 250px;
    height: 24px;
  }
  
  /* SP時ナビゲーションの改行を非表示 */
  .nav-desktop br {
    display: none;
  }
}

/* ナビゲーション */
.nav-desktop {
  display: none;
  flex-wrap: nowrap;
}

.nav-desktop ul {
  display: flex;
  list-style: none;
  gap: 1px;
  align-items: center;
  flex-wrap: nowrap;
}

.nav-desktop a {
  text-decoration: none;
  color: var(--brand-text);
  transition: color 0.3s;
  font-size: 14px;
  text-align: center;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
}

.nav-desktop a:hover {
  color: var(--brand-primary);
}

.hamburger {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  width: 30px;
  height: 22px;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

.hamburger:focus {
  outline: none;
}

.line {
  background-color: var(--brand-text);
  height: 3px;
  width: 100%;
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}

.line:nth-of-type(1) {
  top: 0;
}

.line:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
}

.line:nth-of-type(3) {
  bottom: 0;
}

/* ハンバーガーアイコンのアニメーション */
.hamburger.active .line:nth-of-type(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.hamburger.active .line:nth-of-type(2) {
  display: none;
}

.hamburger.active .line:nth-of-type(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* モバイルメニュー */
.mobile-menu {
  position: fixed;
  top: 50px;
  left: 0;
  width: 100%;
  height: calc(100vh - 50px);
  background-color: #000000;
  z-index: 9998;
  transform: translateY(-100%);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  padding: 2rem 1rem 160px 1rem; /* 下部にSP固定CTAボタン分のスペース（60px + 20px余白）を2倍に追加 */
  box-sizing: border-box;
  overflow-y: auto;
}

.mobile-menu.active {
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
}



/* ハンバーガーメニューのボタンスタイル（フッターSP版と同じ） */
.mobile-menu-btn {
  display: flex !important;
  position: relative !important;
  width: 100% !important;
  height: 60px !important;
  margin: 0 !important;
  margin-bottom: 20px !important;
  background: #000000 !important;
  border: 1px solid #FFFFFF !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 22px !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 20px !important;
}

.mobile-menu-btn::after {
  content: '' !important;
  position: absolute !important;
  width: 24px !important;
  height: 24px !important;
  right: 20px !important;
  top: calc(50% - 12px) !important;
  background: #FFFFFF !important;
  mask-size: contain !important;
  pointer-events: none !important;
}

/* HOMEボタンは左向き矢印 */
.mobile-menu-btn--home::after {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0_5_149)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.61005 5.43C2.84005 4.87 3.39005 4.5 4.00005 4.5H14C18.14 4.5 21.5 7.86 21.5 12C21.5 16.14 18.14 19.5 14 19.5H5.00005C4.17005 19.5 3.50005 18.83 3.50005 18C3.50005 17.17 4.17005 16.5 5.00005 16.5H14C16.49 16.5 18.5 14.49 18.5 12C18.5 9.51 16.49 7.5 14 7.5H7.62005L8.56005 8.44C9.14005 9.04 9.12005 9.99 8.52005 10.56C7.94005 11.12 7.02005 11.12 6.44005 10.56L2.94005 7.06C2.51005 6.63 2.38005 5.99 2.61005 5.43Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5_149'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center !important;
}

/* メインカテゴリは右向き矢印 */
.mobile-menu-btn:not(.mobile-menu-btn--home)::after {
  content: '' !important;
  position: absolute !important;
  width: 24px !important;
  height: 24px !important;
  right: 20px !important;
  top: calc(50% - 12px) !important;
  background: #FFFFFF !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.06 5.2799L20.72 10.9399C21.3 11.5299 21.3 12.4699 20.72 13.0599L15.06 18.7199C14.47 19.3099 13.52 19.3099 12.94 18.7199C12.36 18.1299 12.35 17.1799 12.94 16.5999L16.04 13.4999H4.5C3.67 13.4999 3 12.8299 3 11.9999C3 11.1699 3.67 10.4999 4.5 10.4999H16.03L12.93 7.3999C12.34 6.8099 12.34 5.8599 12.93 5.2799C13.52 4.6899 14.47 4.6899 15.05 5.2799H15.06Z' fill='white'/%3E%3C/svg%3E") no-repeat center !important;
  mask-size: contain !important;
  pointer-events: none !important;
}

/* サブメニューのスタイル */
.mobile-submenu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* 私たちのことのサブメニューを2列に */
.mobile-menu-item:nth-child(2) .mobile-submenu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
}

/* サービスメニューのサブメニューを2列に均等配置 */
.mobile-menu-item:nth-child(3) .mobile-submenu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
}

.mobile-submenu a {
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0px !important;
  color: var(--brand-white) !important;
  text-decoration: none !important;
  transition: color 0.3s !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0.5rem 0 !important;
}

.mobile-submenu a:hover {
  color: var(--brand-accent) !important;
}

/* SNSアイコンのスタイル */
.mobile-menu-social {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: auto;
  margin-bottom: 2rem;
}

.mobile-menu-social a {
  display: inline-block;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}


.mobile-menu-social svg,
.mobile-menu-social img {
  width: 50px;
  height: 50px;
  fill: var(--brand-black);
}

/* プライバシーポリシーのスタイル */
.mobile-menu-footer {
  text-align: center;
}

.mobile-menu-divider {
  display: none;
}

.mobile-menu-privacy {
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--brand-white) !important;
  text-decoration: none !important;
  transition: color 0.3s !important;
  display: block;
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.mobile-menu-privacy:hover {
  color: var(--brand-accent) !important;
}




/* フッターメニューの基本設定 */
.footer-menu {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.footer-menu-item {
  margin-bottom: 0;
}

.footer-menu-item > a {
  display: block;
  font-weight: bold;
}

.footer-submenu {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 20px;
}

/* SPではサブメニューを非表示 */
@media (max-width: 767px) {
  .footer-submenu,
  .footer-section .footer-submenu,
  .footer-section--right .footer-submenu {
    display: none !important;
  }
  
  /* SP時でサブメニューがあるメニュー項目の余白を完全に削除 */
  .footer-menu-item:nth-child(1),
  .footer-menu-item:nth-child(2),
  .footer-section .footer-menu-item:nth-child(1),
  .footer-section .footer-menu-item:nth-child(2) {
    margin-bottom: 0 !important;
  }
  
  /* SP時でメニュー項目のリンクの余白も削除 */
  .footer-menu-item > a,
  .footer-section .footer-menu-item > a {
    margin-bottom: 0 !important;
  }
}

.footer-submenu-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  justify-content: center;
  min-height: 100%;
}

.footer-submenu-column a {
  font-weight: 500 !important;
  font-style: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: var(--brand-white);
  text-decoration: none;
  transition: color 0.3s;
  text-align: left;
  display: flex;
  align-items: center;
  min-height: 24px;
}

.footer-submenu-column a:hover {
  color: var(--brand-accent);
}

/* PC時のフッターメニュー背景色を復活 */
@media (min-width: 768px) {
  .footer-section--right .footer-menu-item {
    margin-bottom: 20px !important;
  }
  
    .footer-section--right .footer-menu-item > a {
    background: #000000 !important;
    border: 1px solid #FFFFFF !important;
    color: #FFFFFF !important;
    transition: all 0.3s ease !important;
  }
  
  /* HOMEボタンのホバー効果（--brand-accent） */
  .footer-section--right .footer-menu-item:first-child > a:hover {
    border-color: var(--brand-accent) !important;
    color: var(--brand-accent) !important;
    background: #FFFFFF !important;
  }
  
  .footer-section--right .footer-menu-item:first-child > a:hover::after {
    background: var(--brand-accent) !important;
  }
  
  /* 「私たちのこと」「サービスメニュー・料金」ボタンのホバー効果（--brand-accent） */
  .footer-section--right .footer-menu-item:nth-child(2) > a:hover,
  .footer-section--right .footer-menu-item:nth-child(3) > a:hover {
    border-color: var(--brand-accent) !important;
    color: var(--brand-accent) !important;
    background: #FFFFFF !important;
  }
  
  .footer-section--right .footer-menu-item:nth-child(2) > a:hover::after,
  .footer-section--right .footer-menu-item:nth-child(3) > a:hover::after {
    background: var(--brand-accent) !important;
  }
  
  /* PC時サブメニューの行ごと高さ揃えと上下中央配置 */
  .footer-section--right .footer-menu-item:nth-child(3) .footer-submenu {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  .footer-section--right .footer-menu-item:nth-child(3) .footer-submenu-row {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    min-height: 60px !important;
    width: 100% !important;
  }
  
  .footer-section--right .footer-menu-item:nth-child(3) .footer-submenu-row:first-child {
    min-height: 60px !important;
    height: 60px !important;
  }
  
  .footer-section--right .footer-menu-item:nth-child(3) .footer-submenu-row:last-child {
    min-height: auto !important;
    height: auto !important;
  }
  
  .footer-section--right .footer-menu-item:nth-child(3) .footer-submenu-row:first-child a {
    min-height: 60px !important;
    height: 60px !important;
  }
  
  .footer-section--right .footer-menu-item:nth-child(3) .footer-submenu-row:last-child a {
    min-height: auto !important;
    height: auto !important;
  }
  
  .footer-section--right .footer-menu-item:nth-child(3) .footer-submenu-row a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    font-weight: bold !important;
    font-style: normal !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: 0px !important;
    color: var(--brand-white) !important;
    text-decoration: none !important;
    transition: color 0.3s !important;
    text-align: left !important;
  }
  
  .footer-section--right .footer-menu-item:nth-child(3) .footer-submenu-row a:hover {
    color: var(--brand-accent) !important;
  }
  

  
  
  /* PC時用SNSアイコンを表示、SP用を非表示 */
  .footer-bottom-row .footer-social {
    display: flex !important;
  }
  
  .footer-social--sp {
    display: none !important;
  }
}

/* メインコンテンツ */
.site-main {
  min-height: 60vh;
}

/* セクション */
.section {
  padding: var(--section-spacing-pc) 0;
}

/* セクション間の余白設定 */
.section + .section {
  margin-top: 0;
}

/* セクション内コンテンツ間の余白 */
.section-content > * + * {
  margin-top: var(--content-spacing-pc);
}

/* ページタイトル下の余白 */
.page-title {
  margin-bottom: var(--page-title-margin-pc);
}

/* PC版ではページタイトルの上下余白を削除 */
@media (min-width: 1024px) {
  .page-title {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .page-about .page-title {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ページ内タイトル下の余白 */
.section-title,
.page-section-title {
  margin-bottom: var(--section-title-margin-pc);
}

.section--hero {
  background-color: var(--brand-bg-green);
  color: var(--brand-white);
  text-align: center;
  padding: 6rem 0;
}

.section--white {
  background-color: var(--brand-white);
}

.section--gray {
  background-color: var(--brand-bg-gray);
}

.section--blue {
  background-color: var(--brand-bg-blue);
  color: var(--brand-white);
}

.section--primary {
  background-color: var(--brand-primary);
  color: var(--brand-white);
}

.section-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.section-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: var(--section-title-margin-pc);
}

.services-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: var(--section-title-margin-pc);
}

.section-subtitle {
  font-size: 1.25rem;
  margin-bottom: var(--content-spacing-pc);
  opacity: 0.9;
}

.section-text {
  font-size: 1.125rem;
  margin-bottom: var(--content-spacing-pc);
  line-height: 1.8;
}

.section-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ヒーロー */
.hero {
  text-align: center;
  padding: 4rem 0;
}

.hero-title {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.hero-image {
  width: 100%;
  max-width: 600px;
  height: 300px;
  background-color: var(--brand-bg-gray);
  margin: 2rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: #000;
}

/* ページタイトル */
.page-title {
  text-align: center;
  padding: 3rem 0;
  background-color: var(--brand-bg-green);
  color: var(--brand-white);
}

/* SP時のページタイトル */
@media (max-width: 767px) {
  .page-title {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
}

.page-title h1 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.page-title p {
  font-size: 1.125rem;
  opacity: 0.9;
}

/* パンくず */
.breadcrumb {
  height: 32px;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}

.breadcrumb ol {
  display: flex;
  list-style: none;
  gap: 0;
  align-items: center;
}

.breadcrumb a {
  color: #000;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb .current {
  color: var(--brand-text);
  font-weight: bold;
}

.breadcrumb-link:hover { 
  color: #000 !important; 
}

.grecaptcha-badge { 
  visibility: hidden; 
}

/* フッター */
.site-footer {
  background-color: rgba(0, 0, 0, 1
  );
  color: var(--brand-white);
  padding: 100px 0;
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2rem;
  width: 100%;
  flex-wrap: nowrap;
}

.footer-section h3 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.footer-section p,
.footer-section a {
  color: var(--brand-white);
  text-decoration: none;
}

/* 電話番号 */
.phone-number {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}

/* PC時の電話番号左揃え */
@media (min-width: 768px) {
  .footer-section--left .phone-number {
    justify-content: flex-start;
  }
  
  .footer-section--left .footer-contact-info p {
    font-size: 14px !important;
  }
  
  .footer-section--left .footer-bottom-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: start;
  }
  
  .footer-section--left .footer-contact-info {
    text-align: left;
  }
  
  .footer-section--left .footer-social {
    justify-content: flex-end;
    gap: 40px;
  }
}

.phone-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.footer-section a:hover {
  color: var(--brand-accent);
}

/* フッターロゴ */
.footer-logo {
  margin-bottom: 1rem;
}

.footer-logo-pc {
  width: 415px;
  height: 130px;
  display: block;
}

.footer-logo-sp {
  max-width: 400px;
  width: 100%;
  height: auto;
  display: none;
}

.footer-menu ul {
  list-style: none;
}

.footer-menu li {
  margin-bottom: 0.5rem;
}

/* PC時のフッターレイアウト */
@media (min-width: 768px) {
  .site-footer .container .footer-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 3.25rem !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }
  
  .footer-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 3.25rem !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }
  
  .site-footer .container .footer-content .footer-section--left {
    width: 500px !important;
    flex-shrink: 1 !important;
    align-self: center !important;
  }
  
  .site-footer .container .footer-content .footer-section--right {
    width: 400px !important;
    flex-shrink: 1 !important;
    align-self: flex-start !important;
  }
  
  .footer-section--left {
    width: 500px !important;
    flex-shrink: 1 !important;
    align-self: center !important;
  }
  
  .footer-section--right {
    width: 400px !important;
    flex-shrink: 1 !important;
    align-self: flex-start !important;
  }
  
  .footer-section--right .footer-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
  }
  
  .footer-section--right .footer-menu-item {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .footer-section--right .footer-menu-item > a {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    height: 60px !important;
    margin: 0 !important;
    background: #000000 !important;
    border: 1px solid #FFFFFF !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 0 20px !important;
    transition: all 0.3s ease !important;
  }
  
  /* SP用 HOMEボタンのホバー効果（--brand-accent） */
  .footer-section--right .footer-menu-item:first-child > a:hover {
    border-color: var(--brand-accent) !important;
    color: var(--brand-accent) !important;
    background: #FFFFFF !important;
  }
  
  .footer-section--right .footer-menu-item:first-child > a:hover::after {
    background: var(--brand-accent) !important;
  }
  
  /* SP用 「私たちのこと」「サービスメニュー・料金」ボタンのホバー効果（--brand-accent） */
  .footer-section--right .footer-menu-item:nth-child(2) > a:hover,
  .footer-section--right .footer-menu-item:nth-child(3) > a:hover {
    border-color: var(--brand-accent) !important;
    color: var(--brand-accent) !important;
    background: #FFFFFF !important;
  }
  
  .footer-section--right .footer-menu-item:nth-child(2) > a:hover::after,
  .footer-section--right .footer-menu-item:nth-child(3) > a:hover::after {
    background: var(--brand-accent) !important;
  }
  
  /* Icon for HOME (first child) */
  .footer-section--right .footer-menu-item:first-child > a::after {
    content: '' !important;
    position: absolute !important;
    width: 24px !important;
    height: 24px !important;
    right: 20px !important;
    top: calc(50% - 12px) !important;
    background: #FFFFFF !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0_5_149)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.61005 5.43C2.84005 4.87 3.39005 4.5 4.00005 4.5H14C18.14 4.5 21.5 7.86 21.5 12C21.5 16.14 18.14 19.5 14 19.5H5.00005C4.17005 19.5 3.50005 18.83 3.50005 18C3.50005 17.17 4.17005 16.5 5.00005 16.5H14C16.49 16.5 18.5 14.49 18.5 12C18.5 9.51 16.49 7.5 14 7.5H7.62005L8.56005 8.44C9.14005 9.04 9.12005 9.99 8.52005 10.56C7.94005 11.12 7.02005 11.12 6.44005 10.56L2.94005 7.06C2.51005 6.63 2.38005 5.99 2.61005 5.43Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_5_149'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center !important;
    mask-size: contain !important;
    pointer-events: none !important;
  }
  
  /* Icons for 2nd and 3rd menu items */
  .footer-section--right .footer-menu-item:nth-child(2) > a::after,
  .footer-section--right .footer-menu-item:nth-child(3) > a::after {
    content: '' !important;
    position: absolute !important;
    width: 24px !important;
    height: 24px !important;
    right: 20px !important;
    top: calc(50% - 12px) !important;
    background: #FFFFFF !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.06 5.2799L20.72 10.9399C21.3 11.5299 21.3 12.4699 20.72 13.0599L15.06 18.7199C14.47 19.3099 13.52 19.3099 12.94 18.7199C12.36 18.1299 12.35 17.1799 12.94 16.5999L16.04 13.4999H4.5C3.67 13.4999 3 12.8299 3 11.9999C3 11.1699 3.67 10.4999 4.5 10.4999H16.03L12.93 7.3999C12.34 6.8099 12.34 5.8599 12.93 5.2799C13.52 4.6899 14.47 4.6899 15.05 5.2799H15.06Z' fill='white'/%3E%3C/svg%3E") no-repeat center !important;
    mask-size: contain !important;
    pointer-events: none !important;
  }
}

/* SP時のフッターメニューボタン */
@media (max-width: 767px) {
  .footer-section .footer-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  /* 縦並びの場合 */
  .footer-section .footer-menu.footer-menu--vertical {
    flex-direction: column !important;
  }
  
  /* SP時でサブメニューを完全に非表示 */
  .footer-section .footer-submenu {
    display: none !important;
  }
  
  /* SP時で改行タグを非表示 */
  .footer-section .footer-submenu-row a br {
    display: none !important;
  }
  
  /* SP時でSNSアイコンをfooter-section--rightの下に配置 */
  .footer-section--right {
    position: relative !important;
  }
  
  .footer-section--right::after {
    content: '' !important;
    display: block !important;
    clear: both !important;
  }
  
  /* SP時用SNSアイコンの表示 */
  .footer-social--sp {
    display: flex !important;
    gap: 2rem !important;
    justify-content: center !important;
    margin-top: 20px !important;
    width: 100% !important;
  }
  
  /* PC時用SNSアイコンを非表示 */
  .footer-bottom-row .footer-social {
    display: none !important;
  }
  
  .footer-section .footer-submenu-column {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  
  .footer-section .footer-menu-item {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  .footer-section .footer-menu-item > a {
    display: flex !important;
    position: relative !important;
    width: 100% !important;
    height: 60px !important;
    margin: 0 !important;
    background: #000000 !important;
    border: 1px solid #FFFFFF !important;
    color: #FFFFFF !important;
    text-decoration: none !important;

    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 0 20px !important;
  }
  
  .footer-section .footer-menu-item > a::after {
    content: '' !important;
    position: absolute !important;
    width: 24px !important;
    height: 24px !important;
    right: 20px !important;
    top: calc(50% - 12px) !important;
    background: #FFFFFF !important;
    mask-size: contain !important;
    pointer-events: none !important;
  }
  
  /* 2番目と3番目のメニュー項目は右向き矢印 */
  .footer-section .footer-menu-item:nth-child(2) > a::after,
  .footer-section .footer-menu-item:nth-child(3) > a::after {
    content: '' !important;
    position: absolute !important;
    width: 24px !important;
    height: 24px !important;
    right: 20px !important;
    top: calc(50% - 12px) !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.06 5.2799L20.72 10.9399C21.3 11.5299 21.3 12.4699 20.72 13.0599L15.06 18.7199C14.47 19.3099 13.52 19.3099 12.94 18.7199C12.36 18.1299 12.35 17.1799 12.94 16.5999L16.04 13.4999H4.5C3.67 13.4999 3 12.8299 3 11.9999C3 11.1699 3.67 10.4999 4.5 10.4999H16.03L12.93 7.3999C12.34 6.8099 12.34 5.8599 12.93 5.2799C13.52 4.6899 14.47 4.6899 15.05 5.2799H15.06Z' fill='white'/%3E%3C/svg%3E") no-repeat center !important;
    mask-size: contain !important;
    pointer-events: none !important;
  }
  
  /* 1番目のメニュー項目（HOME）のみundoアイコン */
  .footer-section .footer-menu-item:first-child > a::after {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M280-200v-80h284q63 0 109.5-40T720-420q0-60-46.5-100T564-560H312l104 104-56 56-200-200 200-200 56 56-104 104h252q97 0 166.5 63T800-420q0 94-69.5 157T564-200H280Z'/%3E%3C/svg%3E") no-repeat center !important;
  }
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.footer-social a {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}


.footer-social svg {
  width: 50px;
  height: 50px;
  fill: var(--brand-black);
}

.footer-social img {
  width: 50px;
  height: 50px;
}

.footer-bottom {
  padding-top: 1rem;
  text-align: center;
  font-size: 0.875rem;
  opacity: 0.8;
  width: 100% !important;
  clear: both !important;
  flex-basis: 100% !important;
  order: 999 !important;
}

.footer-bottom p {
  font-size: 10px;
}

/* SP固定CTA */
.mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--brand-primary);
  padding: 0;
  height: 60px;
  z-index: 10000;
}

/* SP時のフッターボトム調整 */
@media (max-width: 767px) {
  .site-footer {
    padding-bottom: 7rem;
  }
  
  .footer-bottom p {
    font-size: 10px;
  }
  
  .privacy-policy-link {
    display: block;
    width: 100%;
    padding: 10px 0;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    color: #FFFFFF;
    text-decoration: none;
    position: relative;
    margin-bottom: 1rem;
  }
  
  .privacy-policy-link::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 1px;
    background: #FFFFFF;
  }
  
  .privacy-policy-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1px;
    background: #FFFFFF;
  }
  
  .privacy-policy-link:hover {
    color: var(--brand-accent);
  }
}

/* 個人情報保護方針リンク */
.privacy-policy-link {
  display: block;
  width: 100%;
  padding: 10px 0;
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  color: #FFFFFF;
  text-decoration: none;
  position: relative;
  margin-bottom: 1rem;
}

.privacy-policy-link::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: #FFFFFF;
}

.privacy-policy-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: #FFFFFF;
}

.privacy-policy-link:hover {
  color: var(--brand-accent);
}

.mobile-cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  text-decoration: none;
  color: white;
  background-color: #14C1B6;
  padding: 0 20px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.mobile-cta-button:hover {
  background-color: var(--brand-primary-hover);
  color: white;
  text-decoration: none;
}

.mobile-cta-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.mobile-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-cta-text {
  font-size: 16px;
  font-weight: bold;
}

/* ページトップボタン */
.page-top-btn {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 48px;
  height: 48px;
  background-image: url('img/img_btn-cta.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  border-radius:100px;
  cursor: pointer;
  display: none;
  z-index: 10001;
  transition: all 0.3s;
  box-shadow: 0px 4px 10px 0px #00000080;
}

.page-top-btn.visible {
  display: block;
}

.page-top-btn:hover {
  transform: translateY(-2px);
  opacity: 1;
}

/* レスポンシブ */
@media (min-width: 1000px) {
  
  .nav-desktop {
    display: block;
  }
  
  .hamburger {
    display: none;
  }
  
  .footer-content {
    display: flex !important;
    flex-direction: row !important;
  }
  
  .section-title {
    font-size: 3rem;
  }
  
  .hero-title {
    font-size: 4rem;
  }
  
  .footer-logo-pc {
    display: block;
  }
  
  .footer-logo-sp {
    display: none;
  }
}

@media (max-width: 767px) {
  /* ページトップボタン調整 */
  .page-top-btn {
    bottom: 5rem;
    right: 1rem;
  }
  
  /* ヘッダー調整 */
  .header-content {
    padding: 0.5rem 0;
  }
  
  .mobile-cta {
    display: block;
  }
  
  .hamburger {
    display: block;
  }
  
  .section-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .section-buttons .btn {
    width: auto;
    min-width: 300px;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  /* フッター調整 */
  .footer-logo-pc {
    display: none;
  }
  
  .footer-logo-sp {
    display: block;
  }
  
  .footer-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem;
  }
  
  .footer-section {
    text-align: center;
  }
  
  .footer-logo {
    display: flex;
    justify-content: center;
  }
  
  .footer-social {
    justify-content: center;
  }
  
  /* フッターメニューボタンの幅調整 */
  .footer-section .footer-menu-item > a {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* アクセシビリティ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* フォーカス可視化 */
*:focus {
  outline-offset: 2px;
}

/* キーボードナビゲーション */
.keyboard-navigation *:focus {
  
  outline-offset: 2px;
}

/* トップページ専用スタイル */
.home .mv {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.home .mv__background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
}

.home .mv__background-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
}

.home .mv__background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.home .mv__media {
  position: fixed;
  inset: 0;
  z-index: -1;
}

.home .mv__stack {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + var(--mv-offset, 0px)));
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 30px;
  transition: none;
}

.home .mv__stack.scroll-mode {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + var(--mv-offset, 0px)));
  z-index: 1000;
  transition: none;
}

.home .mv__img {
  width: 40px;
  height: 350px;
  object-fit: cover;
  opacity: 1;
  transform: translateY(0);
  transition: none;
  /* アニメーション復元用: opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; */
}

/* SP対応 */
@media (max-width: 767px) {
  .home .mv {
    height: 100vh;
  }
  
  .home .mv__background {
    top: 0;
    height: 100vh;
  }
  
  .home .mv__img {
    width: 32px;
    height: 280px;
  }
  
  .home .mv__stack {
    gap: 20px;
  }
}

/* アニメーション削除済み - 復元用コメント
.home .mv__img--4 {
  animation: mv-fade-in 0.6s ease 0s forwards;
}

.home .mv__img--3 {
  animation: mv-fade-in 0.6s ease 0.3s forwards;
}

.home .mv__img--2 {
  animation: mv-fade-in 0.6s ease 0.6s forwards;
}

.home .mv__img--1 {
  animation: mv-fade-in 0.6s ease 0.9s forwards;
}
*/

/* キーフレームアニメーション削除済み - 復元用コメント
@keyframes mv-fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
*/

/* セクション共通スタイル */
.home .section {
  padding: 40px 0;
}

.home .section-inner {
  max-width: 1000px;
  padding: 0;
  margin-inline: auto;
}

/* リード文セクション */
.home .section--lead {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
  color: var(--brand-white);
  padding: 0 0 100px 0;
  position: relative;
  overflow: hidden;
}

.home .section--lead::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  mix-blend-mode: multiply;
  z-index: -1;
}

/* リード文セクション */
.home .lead-content {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.home .lead-text {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
}

.home .lead-text p {
  font-size: 16px;
  line-height: 48px;
  margin-bottom: 0;
  color: var(--brand-white);
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
}

/* リード文セクション用アニメーション */
.home .lead-text.animate-fade-in-up,
.home .lead-cta.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.home .lead-text.animate-fade-in-up {
  animation-delay: 0s;
}

.home .lead-cta.animate-fade-in-up.animate-delay-2 {
  animation-delay: 0.2s;
}

/* 私たちのことセクション */
.home .section--about-us {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
  color: var(--brand-white);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.home .section--about-us::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  mix-blend-mode: multiply;
  z-index: -1;
}

.home .about-us-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.home .about-us-header {
  background: var(--brand-white);
  color: var(--brand-black);
  padding: 15px 20px;
  border-radius: 50px;
  font-weight: bold;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(20px);
}

.home .about-us-text {
  text-align: center;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
}

.home .about-us-text p {
  font-size: 16px;
  line-height: 2.5;
  margin-bottom: 1rem;
  color: var(--brand-white);
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
}

.home .about-us-cta {
  text-align: center;
  margin-top: 2rem;
  
  opacity: 0;
  transform: translateY(20px);
}

.home .about-us-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 2rem;
  background-color: var(--brand-white);
  color: var(--brand-black);
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 1.125rem;
  transition: all 0.3s ease;
  min-width: 300px;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
  position: relative;
}

.home .about-us-button::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--brand-black);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.06 5.2799L20.72 10.9399C21.3 11.5299 21.3 12.4699 20.72 13.0599L15.06 18.7199C14.47 19.3099 13.52 19.3099 12.94 18.7199C12.36 18.1299 12.35 17.1799 12.94 16.5999L16.04 13.4999H4.5C3.67 13.4999 3 12.8299 3 11.9999C3 11.1699 3.67 10.4999 4.5 10.4999H16.03L12.93 7.3999C12.34 6.8099 12.34 5.8599 12.93 5.2799C13.52 4.6899 14.47 4.6899 15.05 5.2799H15.06Z' fill='white'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  pointer-events: none;
}

.home .about-us-button:hover {
  background-color: var(--brand-accent);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 255, 255, 0.3);
}

.home .about-us-button:hover .about-us-button-text {
  color: white;
}

.home .about-us-button:hover::after {
  background: white;
}

/* 私たちのことセクション用アニメーション */
.home .about-us-header.animate-fade-in-up,
.home .about-us-text.animate-fade-in-up,
.home .about-us-cta.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.home .about-us-header.animate-fade-in-up {
  animation-delay: 0s;
}

.home .about-us-text.animate-fade-in-up.animate-delay-1 {
  animation-delay: 0.1s;
}

.home .about-us-cta.animate-fade-in-up.animate-delay-2 {
  animation-delay: 0.2s;
}

.home .about-us-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.home .about-us-button-text {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--brand-black);
  white-space: nowrap;
}



.home .about-us-text {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
}

/* PC版とSP版の表示切り替え */
.home .lead-text-pc {
  display: block;
}

.home .lead-text-sp {
  display: none;
}

.home .lead-cta {
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
}

.home .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 21px;
  background-color: var(--brand-primary);
  color: var(--brand-white);
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 16px;
  transition: all 0.3s ease;
  width: 300px;
  height: 60px;
  box-shadow: 0 4px 12px rgba(20, 193, 182, 0.3);
}

.home .cta-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.home .cta-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.home .cta-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.home .cta-text {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--brand-white);
  white-space: nowrap;
  flex: 1;
  text-align: center;
}

.home .cta-button:hover {
  background-color: var(--brand-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(20, 193, 182, 0.4);
}

.home .cta-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(20, 193, 182, 0.3);
}

.home .cta-button:focus {
  outline: 2px solid var(--brand-white);
  outline-offset: 2px;
}

/* リードセクションのアニメーション */
.home .lead-text p {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}

.home .lead-text p:nth-child(1) { animation-delay: 0.1s; }
.home .lead-text p:nth-child(2) { animation-delay: 0.2s; }
.home .lead-text p:nth-child(3) { animation-delay: 0.3s; }
.home .lead-text p:nth-child(4) { animation-delay: 0.4s; }
.home .lead-text p:nth-child(5) { animation-delay: 0.5s; }
.home .lead-text p:nth-child(6) { animation-delay: 0.6s; }
.home .lead-text p:nth-child(7) { animation-delay: 0.7s; }

.home .lead-cta {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease 0.8s forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ポイント3つセクション */
.home .section--points {
  background-color: var(--brand-white);
  padding: 100px 0 0 0;
  margin-bottom: 0;
}

.home .section--points .section-title {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: var(--brand-text);
  margin-bottom: 3rem;
  line-height: 1.3;
}

.home .points-container {
  max-width: 1000px;
  margin: 0 auto;
}

.home .point-section {
  width: 1000px;
  height: 335px;
  background: #E2EDD4;
  border-radius: 5px;
  margin: 0 auto 40px auto;
  padding: 2rem;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
}

.home .point-section:last-child {
  margin-bottom: 0;
}

.home .points-container {
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 4rem;
}

.home .point-section--1 {
  background-color: #E2EDD4;
  background-image: url('./img/img_rehabilitation-point1.png');
  background-repeat: no-repeat;
  background-position: calc(100% - 30px) bottom;
  background-size: 300px auto;
}

.home .point-section--2 {
  background-color: #E2EDD4;
  background-image: url('./img/img_rehabilitation-point2.png');
  background-repeat: no-repeat;
  background-position: calc(100% - 30px) bottom;
  background-size: 300px auto;
}

.home .point-section--3 {
  background-color: #E2EDD4;
  background-image: url('./img/img_rehabilitation-point3.png');
  background-repeat: no-repeat;
  background-position: calc(100% - 30px) bottom;
  background-size: 300px auto;
}

.home .point-content {
  display: flex;
  align-items: flex-start;
  max-width: 600px;
  margin: 0;
  height: 100%;
}

.home .point-text {
  width: 100%;
}

.home .point-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  min-height: 45px;
}

.home .point-label-number {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.home .point-label {
  font-size: 16px;
  color: var(--brand-text);
  font-weight: 600;
  margin: 0;
  width: 100%;
  text-align: center;
}

.home .point-number-box {
  background-color: #5BC0BE;
  color: var(--brand-white);
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 30px;
  border-radius: 5px;
}

.home .point-title {
  font-size: 24px;
  font-weight: bold;
  color: var(--brand-text);
  margin: 0;
  line-height: 1.4;
}

.home .point-description {
  font-size: 16px;
  color: var(--brand-text);
  line-height: 2em;
  margin: 0;
}

/* ポイントセクション用アニメーション */
.home .point-section.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.home .point-section.animate-fade-in-up.animate-delay-1,
.home .point-section.animate-fade-in-up.animate-delay-2,
.home .point-section.animate-fade-in-up.animate-delay-3 {
  animation-fill-mode: both;
}

.home .point-section.animate-delay-1 {
  animation-delay: 0.1s;
}

.home .point-section.animate-delay-2 {
  animation-delay: 0.2s;
}

.home .point-section.animate-delay-3 {
  animation-delay: 0.3s;
}



/* レスポンシブ対応 */
@media (max-width: 768px) {
  .home .section--points {
    padding: 3rem 0 0 0;
  }
  
  .home .section--points .section-title {
    font-size: 20px;
    margin-bottom: 2rem;
  }
  
  
  .home .point-section {
    width: 100%;
    height: auto;
    min-height: 335px;
    padding: 2.5rem 1.5rem 195px 1.5rem;
    margin-bottom: 20px;
    background-size: auto 180px;
    background-position: center bottom;
  }
  
  .home .point-section:last-child {
    margin-bottom: 0;
  }
  
  .home .points-container {
    padding: 20px;
  }
  
  .home .point-content {
    max-width: 100%;
    text-align: left;
  }
  
  .home .point-text {
    width: 100%;
  }
  
  .home .point-header {
    margin-bottom: 1rem;
    gap: 1rem;
  }
  
  .home .point-label-number {
    gap: 0.25rem;
  }
  
  .home .point-number-box {
    width: 45px;
    height: 45px;
    font-size: 30px;
  }
  
  .home .point-title {
    font-size: 18px;
    margin-bottom: 0;
    line-height: 1.5;
  }
  
  .home .point-title .sp-break {
    display: block;
  }
  
  .home .point-description {
    font-size: 16px;
    line-height: 1.7;
  }
  
  .home .point-illustration img {
    border-radius: 5px;
  }
}

/* さらに小さい画面サイズ対応 */
@media (max-width: 480px) {
  .home .point-section {
    padding: 2rem 1rem;
  }
  
  .home .point-content {
    gap: 1.5rem;
  }
  
  .home .point-title {
    font-size: 18px;
  }
  
  .home .point-title .sp-break {
    display: block;
  }
  
  
  .home .point-illustration {
    max-width: 280px;
  }
}

/* Instagramセクション（ポイントセクション後） */
.home .section--instagram-points {
  background-color: var(--brand-white);
  padding: 0;
  margin-top: 0;
}

.home .section--instagram-points .section-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

.home .instagram-link {
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease;
  position: relative;
}


.home .instagram-image {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.4s ease;
}

/* Instagram hover効果 */
.home .instagram-image--pc-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}


.home .instagram-link:hover .instagram-image--pc {
  opacity: 0;
}

.home .instagram-link:hover .instagram-image--pc-hover {
  opacity: 1;
}

/* 文字詰め設定 */
body {
  font-feature-settings: "pwie", "pnum";
}

.home .instagram-image--sp {
  display: none;
}



/* レスポンシブ対応 */
@media (max-width: 768px) {
  .home .section--instagram-points {
    padding: 0;
    /* margin-top: 1rem; */
  }
  
  .home .instagram-image--pc {
    display: none;
  }
  
  .home .instagram-image--pc-hover {
    display: none;
  }
  
  .home .instagram-image--sp {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

/* Instagramセクション */
.home .section--instagram {
  background-color: var(--brand-white);
}

.home .instagram-feed {
  margin-bottom: 2rem;
}

.home .instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.home .instagram-item {
  aspect-ratio: 1;
  background-color: #f0f0f0;
  border-radius: 0.25rem;
}

.home .instagram-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}

.home .instagram-username {
  font-weight: bold;
  color: var(--brand-text);
}

.home .instagram-content {
  text-align: center;
}

/* メディア掲載実績セクション */
.home .section--media {
  padding: 100px 0;
  color: var(--brand-black);
  position: relative;
  overflow: hidden;
  background-color: rgba(107, 194, 189, 0.6);
}

/* メディア掲載実績の動画背景 */
.media-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.media-background-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
}

/* PC用動画 */
.media-background-video--pc {
  display: block;
}

/* SP用動画 */
.media-background-video--sp {
  display: none;
}

.media-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #6BC2BD;
  z-index: -1;
}



.media-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.media-header {
  background-color: #000;
  color: white;
  padding: 15px 20px;
  border-radius: 50px;
  display: inline-block;
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
}

.media-description {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 50px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: var(--brand-black);
  font-weight: 500;
}

.media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
}

/* PC用の明示的な設定 */
.home .media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
}

.media-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.media-item-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 1.4;
  min-height: 50px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--brand-black);
}



.media-video-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 2rem;
  background-color: var(--brand-white);
  color: var(--brand-black);
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 16px;
  transition: all 0.3s ease;
  min-width: 300px;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
  position: relative;
  margin-bottom: 15px;
}

.media-video-button::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 18.155px;
  height: 14.325px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='16' viewBox='0 0 19 16' fill='none'%3E%3Cpath d='M12.06 1.28039L17.72 6.94039C18.3 7.53039 18.3 8.47039 17.72 9.06039L12.06 14.7204C11.47 15.3104 10.52 15.3104 9.94 14.7204C9.36 14.1304 9.35 13.1804 9.94 12.6004L13.04 9.50039H1.5C0.67 9.50039 0 8.83039 0 8.00039C0 7.17039 0.67 6.50039 1.5 6.50039H13.03L9.93 3.40039C9.34 2.81039 9.34 1.86039 9.93 1.28039C10.52 0.690391 11.47 0.690391 12.05 1.28039H12.06Z' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.media-video-button:hover {
  background-color: var(--brand-accent);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 255, 255, 0.3);
}

.media-video-button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='16' viewBox='0 0 19 16' fill='none'%3E%3Cpath d='M12.06 1.28039L17.72 6.94039C18.3 7.53039 18.3 8.47039 17.72 9.06039L12.06 14.7204C11.47 15.3104 10.52 15.3104 9.94 14.7204C9.36 14.1304 9.35 13.1804 9.94 12.6004L13.04 9.50039H1.5C0.67 9.50039 0 8.83039 0 8.00039C0 7.17039 0.67 6.50039 1.5 6.50039H13.03L9.93 3.40039C9.34 2.81039 9.34 1.86039 9.93 1.28039C10.52 0.690391 11.47 0.690391 12.05 1.28039H12.06Z' fill='white'/%3E%3C/svg%3E");
}

.media-info {
  font-size: 16px;
  line-height: 1.6;
  color: var(--brand-black);
}

.media-program {
  font-weight: 600;
  margin-bottom: 5px;
}

.media-date {
  color: var(--brand-black);
}

/* メディア掲載実績セクション - レスポンシブ */
@media (max-width: 768px) {
  .section--media {
    padding: 60px 0;
  }
  
  /* SP用動画表示制御 */
  .media-background-video--pc {
    display: none;
  }
  
  .media-background-video--sp {
    display: block;
  }
  
  .media-content {
    padding: 0 15px;
    text-align: left;
  }
  
  .media-header {
    padding: 10px 1.5rem;
    font-size: 1rem;
    margin-bottom: 20px;
    align-self: flex-start;
  }
  
  .media-description {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 40px;
    text-align: left;
    font-weight: 400;
  }
  
  .media-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .home .media-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .media-item-title {
    font-size: 16px;
    margin-bottom: 15px;
    min-height: 40px;
  }
  
  .media-video-button {
    font-size: 1rem;
    padding: 0.875rem 1.5rem;
    margin-bottom: 12px;
    min-width: 300px;
  }
  
  .media-info {
    font-size: 13px;
  }
}

/* サービスメニューセクション */
.home .section--services {
  background-color: var(--brand-white);
  padding: 100px 0;
}

.home .services-header {
  text-align: center;
  margin-bottom: 40px;
}

.home .services-title {
  display: inline-block;
  background-color: #333;
  color: white;
  padding: 15px 20px;
  border-radius: 50px;
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
}

.home .services-intro {
  text-align: center;
  margin-bottom: 60px;
}

.home .services-intro-pc {
  display: block;
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

.home .services-intro-sp {
  display: none;
}

.home .services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 80px;
  max-width: 880px;
  margin: 0 auto 80px auto;
}

.home .service-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--brand-white);
  height: 100px;
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.home .service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* 各カードのhover時の背景色を暗くする */
.home .service-card--trial:hover {
  background-color: color-mix(in srgb, var(--brand-accent) 80%, black);
}

.home .service-card--physical:hover,
.home .service-card--language:hover,
.home .service-card--yoga:hover {
  background-color: color-mix(in srgb, var(--brand-secondary) 80%, black);
}

.home .service-card-content {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 30px;
  max-width: 400px;
}

.home .service-card-text {
  flex: 1;
}

.home .service-card-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  line-height: 1.4;
}

/* 特別体験プログラムの改行設定 */
.home .service-card--trial .service-card-title br {
  display: block !important;
  content: "";
  margin: 0.3em 0;
}

/* 他のカードでは改行を非表示 */
.home .service-card:not(.service-card--trial) .service-card-title br {
  display: none !important;
}

.home .service-card-arrow {
  flex-shrink: 0;
  margin-left: 20px;
}

/* 背景色をservice-card要素に設定 */
.home .service-card--trial {
  background-color: var(--brand-accent);
  max-width: 400px;
}

.home .service-card--physical {
  background-color: var(--brand-secondary);
  max-width: 400px;
}

.home .service-card--language {
  background-color: var(--brand-secondary);
  max-width: 400px;
}

.home .service-card--yoga {
  background-color: var(--brand-secondary);
  max-width: 400px;
}

/* 背景画像をservice-card-background要素に設定 */
.home .service-card-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  max-width: 400px;
  transition: opacity 0.3s ease;
}

/* hover用の背景要素は初期状態で非表示 */
.home .service-card-background--hover {
  opacity: 0;
  z-index: 2;
}

/* hover時にhover用背景を表示、通常背景を非表示 */
.home .service-card:hover .service-card-background:not(.service-card-background--hover) {
  opacity: 0;
}

.home .service-card:hover .service-card-background--hover {
  opacity: 1;
}

.home .service-card--trial .service-card-background:not(.service-card-background--hover) {
  background: url('./img/service-card-trial.png');
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: right center;
}

.home .service-card--trial .service-card-background--hover {
  background: url('./img/service-card-trial-hover.png');
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: right center;
}

.home .service-card--physical .service-card-background:not(.service-card-background--hover) {
  background: url('./img/service-card-physical.png');
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: right center;
}

.home .service-card--physical .service-card-background--hover {
  background: url('./img/service-card-physical-hover.png');
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: right center;
}

.home .service-card--language .service-card-background:not(.service-card-background--hover) {
  background: url('./img/service-card-language.png');
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: right center;
}

.home .service-card--language .service-card-background--hover {
  background: url('./img/service-card-language-hover.png');
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: right center;
}

.home .service-card--yoga .service-card-background:not(.service-card-background--hover) {
  background: url('./img/service-card-yoga.png');
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: right center;
}

.home .service-card--yoga .service-card-background--hover {
  background: url('./img/service-card-yoga-hover.png');
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: right center;
}

.home .services-cta {
  text-align: center;
}

.home .services-contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary);
  color: var(--brand-white);
  text-decoration: none;
  padding: 21px;
  border-radius: 5px;
  font-weight: bold;
  font-size: var(--font-size-base);
  transition: all var(--transition-normal);
  width: 300px;
  height: 60px;
}

.home .services-contact-button:hover {
  background: var(--brand-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(20, 193, 182, 0.3);
}

.home .services-contact-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 20px;
}

.home .contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.home .contact-text {
  font-size: 16px;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

/* prefers-reduced-motion対応 */
.reduced-motion .home .mv__img {
  animation: none !important;
  opacity: 1;
  transform: translateY(0);
}

.reduced-motion .home .lead-text p,
.reduced-motion .home .lead-cta {
  animation: none !important;
  opacity: 1;
  transform: translateY(0);
}

/* レスポンシブ対応 */
@media (max-width: 1023px) {
  /* コンテナのパディング調整 */
  .container {
    padding: 0 20px;
  }
}

@media (max-width: 767px) {
  /* コンテナのパディング調整 */
  .container {
    padding: 0 15px;
  }
  
  .section-inner {
    padding: 0 15px;
  }
  
  /* リード文セクション */
  .home .section--lead {
    padding: 40px 0;
  }
  
  .home .lead-content {
    gap: 0;
  }
  
  .home .lead-text {
    padding: 20px;
  }
  
  .home .lead-text-pc {
    display: none;
  }
  
  .home .lead-text {
    text-align: left;
  }
  
  .home .lead-text-sp {
    display: block;
    font-size: 16px;
    line-height: 32px !important;
    margin-bottom: 0;
  }
  
  .home .lead-cta {
    margin-bottom: 60px;
  }
  
  .home .cta-button {
    width: auto;
    min-width: 300px;
    padding: 0.875rem 1.5rem;
  }
  
  .home .cta-text {
    font-size: 1rem;
  }
  
  /* ポイントセクション */
  .home .point-section {
    margin: 0 0 20px 0;
    padding: 2rem 1rem 195px 1rem;
  }
  
  /* 私たちのことセクション */
  .home .section--about-us {
    padding: 40px 0;
  }
  
  .home .about-us-content {
    gap: 20px;
    padding: 20px;
  }
  
  
  .home .about-us-header {
    padding: 10px 1.5rem;
    font-size: 1rem;
    margin-bottom: 20px;
    align-self: flex-start;
  }
  
  .home .about-us-text {
    text-align: center;
    padding: 0;
    margin: 0;
  }
  
  .home .about-us-text p {
    text-align: left;
    font-size: 14px;
    line-height: 2.2;
    margin-bottom: 0.75rem;
  }
  
  .home .about-us-button {
    width: auto;
    min-width: 300px;
    height: 60px;
    padding: 1rem 2rem;
    border-radius: 5px;
    font-size: 16px;
    justify-content: center;
  }
  
  .home .about-us-button-text {
    font-size: 16px;
  }
  
  .home .about-us-button::after {
    right: 15px;
    font-size: 20px;
  }
  
  /* サービスメニューセクション */
  .home .section--services {
    padding: 40px 20px;
  }
  
  .home .services-header {
    margin-bottom: 30px;
    text-align: left;
  }
  
  .home .services-title {
    padding: 10px 1.5rem;
    font-size: 1rem;
    align-self: flex-start;
  }
  
  .home .services-intro {
    margin-bottom: 40px;
  }
  
  .home .services-intro-pc {
    display: none;
  }
  
  .home .services-intro-sp {
    display: block;
    text-align: left;
    font-size: 14px;
    line-height: 2.2;
    margin: 0;
  }
  
  .home .services-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 400px;
    margin: 0 auto 60px auto;
  }
  
  .home .service-card {
    height: 100px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
  
  .home .service-card-content {
    padding: 12px;
  }
  
  .home .service-card-title {
    font-size: 13px;
    line-height: 1.2;
  }
  
  .home .service-card-arrow {
    margin-left: 8px;
  }
  
  .home .service-card-arrow svg {
    width: 20px;
    height: 20px;
  }
  
  .home .service-card-title {
    font-size: 16px;
  }
  
  .home .services-contact-button {
    width: auto;
    min-width: 300px;
    padding: 14px 24px;
  }
  
  .home .contact-text {
    font-size: 14px;
  }
  
  .home .points-grid {
    grid-template-columns: 1fr;
  }
  
  .home .service-plans {
    grid-template-columns: 1fr;
  }
}

/* 私たちのことページ スタイル */
.page-about .breadcrumb {
  height: 32px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #000;
  font-weight: 500 !important;
}

.page-about .breadcrumb a {
  color: #000;
  text-decoration: none;
  font-weight: 400 !important;
}

.page-about .breadcrumb a:hover {
  text-decoration: underline;
}

.page-about .breadcrumb .separator {
  margin: 0 10px;
}

.page-about .page-title {
  text-align: center;
  line-height: 159px;
  margin-bottom: 0;
  background-color: white;
}

.page-about .page-title h1 {
  font-size: 26px;
  font-weight: bold;
  color: #14C1B6;
  margin: 0;
}

/* ヒーロービジュアル（単一背景画像） */
.hero-visual {
  position: relative;
  height: 500px;
  overflow: hidden;
  margin-bottom: 50px;
}

.hero-visual__background {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-visual__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-visual__image--pc {
  display: block;
  width: 1920px;
  height: 500px;
  left: 50%;
  transform: translateX(-50%);
  object-fit: cover;
}

.hero-visual__image--sp {
  display: none;
}

/* メインコンテンツエリア（2カラムレイアウト） */
.main-content {
  background: #fff;
}

.main-content__inner {
  display: grid !important;
  grid-template-columns: 250px 1fr !important;
  gap: 60px !important;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* PC表示での2カラムレイアウトを確実に適用 */
@media (min-width: 1024px) {
  .main-content__inner {
    display: grid !important;
    grid-template-columns: 250px 1fr !important;
    gap: 60px !important;
  }
  
  .sidebar-nav {
    display: block !important;
  }
  
  .corporate-info {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
  }
  
  .corporate-info__box--full {
    grid-column: 1 / -1 !important;
  }
}

/* サイドバーナビゲーション */
.sidebar-nav {
  position: relative;
}

/* 旧のsidebar-nav--sticky定義を削除 - 新しいsticky実装に置き換え */

.sidebar-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav__item {
  margin-bottom: 15px;
}

.sidebar-nav__item:last-child {
  margin-bottom: 0;
}

.sidebar-nav__link {
  display: block;
  padding: 12px 0;
  color: #999;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.3s ease;
  border-bottom: 1px solid #FFF;
}

.sidebar-nav__link:hover {
  background: transparent;
  color: #14C1B6;
}

.sidebar-nav__link--active {
  color: #14C1B6;
  border-bottom: 1px solid #000;
}

/* サイドメニューのフォーカス時のアウトラインを無効化 */
.sidebar-nav__link:focus {
  outline: none;
}

/* コンテンツメインエリア */
.content-main {
  padding: 40px 0;
}

/* セクションヘッダー */
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.section-header__decoration {
  width: 20px;
  height: 20px;
  margin-right: 0;
  border-radius: 4px;
}

.section-header__title {
  font-size: 28px;
  font-weight: bold;
  color: #000;
  margin: 0;
}

/* センター長セクション */

.director-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: start;
}

.director-content__image {
  text-align: center;
}

/* PC表示時のdirector-content__imageサイズ */
@media (min-width: 1024px) {
  .director-content__image {
    width: 650px;
    height: 320px;
  }
}

.director-portrait {
  width: 100%;
  height: auto;
  object-fit: cover;
  background: linear-gradient(135deg, #E8F5F5, #B2DFDB);
  display: block;
  margin: 0 auto;
  vertical-align: top;
}

/* PC表示時のdirector-portraitサイズ */
@media (min-width: 1024px) {
  .director-portrait {
    width: 650px;
    height: 320px;
  }
}

.director-content__text {
  padding-top: 20px;
}

.director-message {
  font-size: 16px;
  line-height: 2.2;
  color: #333;
  margin-bottom: 30px;
  font-weight: 500;
}

.director-info {
  padding:0 0 20px 0;
  border-bottom: 1px solid #000;
  margin-bottom: 30px;
  text-align: center;
}

.director-info__title {
  font-size: 14px;
  color: #000;
  margin-bottom: 8px;
  font-weight: 500;
}

.director-info__name {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  margin-bottom: 4px;
  display: inline-block;
  margin-right: 10px;
}

.director-info__name-en {
  font-size: 12px;
  font-weight: bold;
  color: #000;
  display: inline-block;
}

/* SP表示時はdirector-infoを左揃えに */
@media (max-width: 1023px) {
  .page-about .director-info {
    text-align: left !important;
  }
}

.director-career {
  background: #D0F3F0;
  padding: 20px;
  border-radius: 0 0 5px;
  margin-bottom: 30px;
}

.director-career h3 {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin-bottom: 15px;
  text-align: center;
}

.director-career p {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

/* 経歴の箇条書き項目のインデント */
.director-career p:first-of-type,
.director-career p:nth-of-type(2) {
  text-indent: -1em;
  padding-left: 1em;
}

.director-button {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  font-size: 16px;
  transition: all 0.3s ease;
}

.btn--small {
  background: #000;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  width: 300px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  position: relative;
}

.btn--small span {
  text-align: center;
}

.btn--small svg {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.btn--small:hover {
  background: #333;
}

.btn--black {
  background: #000;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

.btn--black:hover {
  background: #333;
}

/* スタッフセクション */

.staff-intro {
  font-size: 16px;
  line-height: 32px;
  color: #333;
  margin-bottom: 30px;
  font-weight: 500;
}

.staff-content {
  display: grid;
  gap: 60px;
  align-items: start;
}


.staff-message {
  font-size: 16px;
  line-height: 32px;
  color: #333;
  font-weight: 500;
}

.staff-info {
  background: #D0F3F0;
  padding: 20px;
  border-radius: 5px;
}

.staff-info__title {
  font-size: 12px;
  color: #000;
  margin-bottom: 4px;
  text-align: center;
  font-weight: 500;
  padding-top: 10px
}

.staff-info__subtitle {
  font-size: 12px;
  color: #000;
  margin-bottom: 12px;
  text-align: center;
  font-weight: 500;
}

.staff-info__name-container {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #000;
}

.staff-info__name {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  display: inline-block;
  margin-right: 10px;
}

.staff-info__name-en {
  font-size: 12px;
  color: #000;
  display: inline-block;
  font-weight: bold;
}

.staff-button {
  margin-top: 30px;
  text-align: center;
}

.staff-content__image {
  text-align: center;
}

.staff-portrait {
  width: 100%;
  height: 300px;
  object-fit: cover;
  background: linear-gradient(135deg, #E8F5F5, #B2DFDB);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 「私たちのこと」ページ専用のスタッフ画像 */
.about-staff-portrait {
  width: 100%;
  height: 300px;
  object-fit: cover;
  background: linear-gradient(135deg, #E8F5F5, #B2DFDB);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 「サービスメニュー」ページ専用のスタッフ画像 */
.service-staff-portrait {
  height: 120px;
  object-fit: cover;
}

/* PC時のスタッフ画像を確実に300pxにする */
@media (min-width: 769px) {
  .staff-portrait {
    height: 300px !important;
  }
  
  .about-staff-portrait {
    height: auto !important;
  }
  
  .service-staff-portrait {
    width: 120px !important;
    height: 120px !important;
  }
}

/* データセクション */

.data-charts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.data-chart {
  text-align: center;
  margin-bottom: 20px;
}

.data-chart__title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 10px 15px;
  gap: 10px;
  background: #14C1B6;
  color: white;
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: bold;
}

.data-chart__image {
  position: relative;
  margin: 30px 0;
}

.chart-image {
  width: 400px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.chart-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.data-chart__description {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  text-align: left;
  font-weight: 500;
}

/* アクセスセクション */

.access-content {
  display: flex;
  justify-content: center;
  align-items: start;
}

/* センター情報のスタイル（運営法人と同じ） */

/* 既存のスタイル（後方互換性のため保持） */
.access-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.access-info__item {
  display: flex;
  align-items: stretch;
  padding: 15px 0;
}

.access-info__item:last-child {
  border-bottom: none;
}


.access-station h3 {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin-bottom: 15px;
}

.access-station__item {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}

.access-map {
  text-align: center;
}

.google-map {
  margin-top: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  overflow: hidden;
}

.access-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  justify-content: center;
}

.access-sns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
  min-height: 50px;
}

.sns-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-decoration: none;
  position: relative;
}



.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 運営法人セクション */
.section--corporate {
  margin-bottom: 80px;
}

.corporate-intro {
  font-size: 16px;
  line-height: 32px;
  color: #333;
  margin-bottom: 40px;
}

.corporate-info {
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important;
  gap: 30px !important;
}

.corporate-info__box {
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}

.corporate-info__box--full {
  grid-column: 1 / -1;
}

.corporate-info__title {
  background: #E8F5F5;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.corporate-info__content {
  padding: 20px;
  background: #fff;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}

.corporate-info__content ul {
  margin: 0;
  padding-left: 20px;
}

.corporate-info__content li {
  margin-bottom: 8px;
}

.corporate-location {
  margin-bottom: 15px;
}

.corporate-location:last-child {
  margin-bottom: 0;
}

.corporate-location strong {
  color: #000;
}

/* レスポンシブ対応 */
@media (max-width: 1023px) {
  .main-content__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .sidebar-nav {
    display: none;
  }
  
  .content-main {
    padding: 20px 0;
  }
  
  /* SP用ヒーロービジュアル */
  .hero-visual {
    height: auto;
  }
  
  .hero-visual__image--pc {
    display: none;
  }
  
  .hero-visual__image--sp {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
  }
  
  .hero-visual__squares {
    background-size: 90% auto;
    background-position: 50% 55%;
  }
}

/* PC表示での2カラムレイアウトを確実に適用 */
@media (min-width: 1024px) {
  .main-content__inner {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 60px;
  }
  
  .sidebar-nav {
    display: block;
  }
}

@media (max-width: 768px) {
  .page-about .page-title h1 {
    font-size: 24px;
  }
  
  .page-contact .page-title h1 {
    font-size: 24px;
  }
  
  .hero-visual {
    height: auto;
  }
  
  .hero-visual__image--pc {
    display: none;
  }
  
  .hero-visual__image--sp {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
  }
  
  .hero-visual__squares {
    background-size: 90% auto;
    background-position: 50% 55%;
  }
  
  .section-header__title {
    font-size: 24px;
  }
  
  .section--director,
  .section--staff,
  .section--data,
  .section--access,
  .section--corporate {
    margin-bottom: 80px;
  }
  
  .staff-intro {
    padding-top: 0 !important;
  }
  
  .director-content,
  .staff-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .director-portrait,
  .staff-portrait {
    width: 100%;
    height: 270px;
    display: block;
    vertical-align: top;
    object-fit: cover;
  }
  
  .about-staff-portrait {
    width: 100%;
    height: 300px;
    display: block;
    vertical-align: top;
    object-fit: cover;
  }
  
  .staff-info {
    padding: 20px;
  }
  
  .staff-info__title {
    text-align: left;
  }
  
  .staff-info__name-container {
    text-align: left;
  }
  
  .staff-content__image {
    margin: -20px -20px 20px -20px;
    height: 270px;
    overflow: hidden;
  }
  
  .staff-content__image .staff-portrait {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover !important;
  }
  
  .staff-content__image .about-staff-portrait {
    width: 100% !important;
    height: 270px !important;
    object-fit: cover !important;
  }
  
  .data-charts {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .data-chart:not(:first-child) {
    margin-top: 20px;
  }
  
  .chart-image {
    width: 400px;
    max-width: 100%;
    height: auto;
  }
  
  .access-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .access-info__item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  /* 新しいテーブル形式のレスポンシブ対応 */
  .access-info-table {
    gap: 20px;
  }
  
  .access-info__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .access-info__label {
    min-width: auto;
    width: 100%;
    justify-content: flex-start;
    padding: 10px 15px;
  }
  
  .access-info__row--station .access-info__label {
    min-width: auto;
    width: 100%;
  }
  
  .access-map-section {
    gap: 15px;
  }
  
  .google-map {
    max-width: 100%;
    height: 250px;
  }
  
  .access-buttons .btn {
    width: 100%;
    max-width: 300px;
    height: 50px;
    font-size: 16px;
    font-weight: bold;
  }
  
  .access-sns {
    gap: 15px;
  }
  
  .sns-icon img {
    width: 35px;
    height: 35px;
  }
  
  .access-info__label {
    min-width: auto;
    margin-right: 0;
    margin-bottom: 5px;
  }
  
  .corporate-info {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .corporate-info__box--full {
    grid-column: 1;
  }
  
  .access-buttons {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .btn {
    text-align: center;
  }
}

/* 最重要：PCレイアウト強制適用 */
@media screen and (min-width: 1024px) {
  .main-content__inner {
    display: grid !important;
    grid-template-columns: 250px 1fr !important;
    gap: 60px !important;
  }
  
  .sidebar-nav {
    display: block !important;
  }
  
  .corporate-info {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
  }
  
  .corporate-info__box--full {
    grid-column: 1 / -1 !important;
  }
  
  .hero-visual {
    background-image: url("/wp-content/themes/noureha-kobesuma2025/assets/hero_visual.jpg") !important;
  }
  
  .hero-visual__squares {
    display: block !important;
  }
  
  /* アクセス情報のPC表示を強制 - Gridレイアウトで高さ揃え */
  .page-about .access-info__item {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    column-gap: 10px !important;
    align-items: stretch !important;
    padding: 15px 0 !important;
  }
  
  .page-about .access-info__label {
    font-weight: bold !important;
    color: #000 !important;
    border-radius: 5px !important;
    border: 1px solid #000 !important;
    background: #E5E5E5 !important;
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    min-width: 200px !important;
  }
  
  .page-about .access-info__value {
    color: #000 !important;
    min-width: 0 !important;
  }
  
  /* 運営法人セクション - センター情報と同じレイアウト */
  .page-about .corporate-info__item {
    display: grid !important;
    grid-template-columns: 200px 1fr !important;
    column-gap: 10px !important;
    align-items: stretch !important;
  }
  
  .page-about .corporate-info__label {
    font-weight: bold !important;
    color: #000 !important;
    border-radius: 5px !important;
    border: 1px solid #000 !important;
    background: #E5E5E5 !important;
    padding: 10px 15px !important;
    display: flex !important;
    align-items: center !important;
    min-width: 200px !important;
  }
  
  .page-about .corporate-info__value {
    color: #000 !important;
    min-width: 0 !important;
    padding: 10px 15px !important;
  }
  
  .page-about .corporate-info__value ul {
    margin: 0 !important;
    padding-left: 20px !important;
  }
  
  .page-about .corporate-info__value li {
    margin-bottom: 20px !important;
  }
  
  .page-about .corporate-info__value li:last-child {
    margin-bottom: 0 !important;
  }
  
  .page-about .corporate-location__link {
    color: var(--14C1B6, #14C1B6) !important;
    font-size: 16px !important;
    font-weight: bold !important;
    line-height: 24px !important;
    text-decoration: underline !important;
  }
  
  .page-about .corporate-location__link:hover {
    text-decoration: underline !important;
  }

  /* 再利用可能なテキストリンクスタイル */
  .text-link {
    color: var(--14C1B6, #14C1B6) !important;
    font-size: 16px !important;
    font-weight: bold !important;
    line-height: 24px !important;
    text-decoration: underline !important;
  }
  
  .text-link:hover {
    text-decoration: underline !important;
  }

  
  /* 運営法人セクションのコンテナを強制1カラム */
  .page-about .corporate-info {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 30px !important;
  }
  
  /* 旧のsidebar-nav--sticky定義を削除 - 新しいsticky実装に置き換え */
}

/* 旧の競合するCSSを削除 - 新しいsticky実装に置き換え */

/* =================================================================== */
/* フロー評価セクションのスタイル */
/* =================================================================== */

/* フロー評価セクションの基本スタイル */
.flow__evaluation-section {
  background: #FFF;
  display: flex;
  padding: 20px 0;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  width: calc(100% - 40px);
  margin: 0 20px;
}

/* フロー評価セクション内の矢印を中央寄せ */
.flow__evaluation-section .flow__arrow {
  align-self: center;
  margin-top: 0;
}

/* フロー評価セクションのタイトルスタイル（SP版） */
.flow h2.flow__evaluation-section__title {
  margin: 0 0 15px 0 !important;
  color: #000 !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 24px !important; /* 150% */
}

/* フロー評価セクションのタイトルスタイル（PC版） */
@media screen and (min-width: 1024px) {
  .flow h2.flow__evaluation-section__title {
    margin: 0 0 20px 0 !important;
    font-size: 18px !important;
    line-height: 27px !important; /* 150% */
  }
}

/* =================================================================== */
/* 「私たちのこと」ページ(.page-about) サイドバースティッキー 最終確定版 */
/* =================================================================== */

/* --- Step 1: ページ全体のoverflowを最優先でリセット --- */
/* このページの主要なラッパー要素のoverflowをすべて無効化する */
.page-about #page,
.page-about #content,
.page-about #primary,
.page-about .main-content,
.page-about .container,
.page-about .main-content__inner {
  overflow: visible !important;
}

/* --- Step 2: PC表示(1024px以上)のレイアウトとsticky設定 --- */
@media screen and (min-width: 1024px) {

  /* 2カラムの親コンテナを設定 */
  .page-about .main-content__inner {
    display: grid !important;
    grid-template-columns: 250px 1fr !important;
    gap: 60px !important;
    align-items: start !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
  }

  /* サイドバー自体の高さを確保する（最重要） */
  .page-about .sidebar-nav {
    align-self: stretch !important;
    height: auto !important;
    width: 250px !important;
    margin-top: 50px;
  }

  /* 追従させたい要素にstickyを適用 */
  .page-about .sidebar-stick {
    position: sticky !important;
    top: var(--sticky-top, 120px) !important;
    margin-bottom: 140px;
  }
  
  /* メインコンテンツエリアのスタイル */
  .page-about .content-main {
    padding: 0 !important;
  }

  /* セクション見出しのスタイル */
  .page-about .section-header__title {
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    margin: 0;
  }

  .page-about .section-header__decoration {
    color: #14C1B6;
  }

  /* データチャートタイトルのスタイル */

  /* センター長あいさつセクションの1カラムレイアウト */
  .page-about .director-content {
    display: block !important;
  }


  .page-about .data-charts {
    display: block !important;
  }

  .page-about .data-chart {
    margin-bottom: 50px;
  }
  
  .page-about .data-chart__image {
    margin: 20px 0;
  }

  .page-about .data-chart:last-child {
    margin-bottom: 0;
  }
  
  /* センター情報セクションの1カラムレイアウト */
  .page-about .access-content {
    display: block !important;
  }

  /* センター情報テーブルのスタイル */
  .page-about .access-info__item {
    display: flex;
    align-items: stretch;
    padding: 15px 0;
  }

  .page-about .access-info__label {
    width: 120px;
    background: #F5F5F5;
    padding: 10px 15px;
    font-weight: bold;
    color: #000;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    height: 100%;
  }

  .page-about .access-info__value {
    flex: 1;
    padding: 10px 15px;
    color: #000;
  }

  /* 最寄り駅のスタイル */
  .page-about .access-station {
    margin-bottom: 20px;
  }

  .page-about .access-station__main {
    margin-bottom: 10px;
  }

  .page-about .access-station__item {
    margin-bottom: 5px;
  }

  /* 地図のスタイル */
  .page-about .google-map {
    margin-bottom: 15px;
  }

  /* アクセスボタンのスタイル */
  .page-about .access-buttons {
    margin-bottom: 20px;
  }

  .page-about .btn--black {
    background: #000;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    display: inline-block;
  }
  
  .page-about .access-buttons {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }

  /* SNSアイコンのスタイル（フッターと同じ） */
  .page-about .access-sns .sns-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    transition: background-color 0.3s;
  }


}

/* --- Step 3: SP表示(1023px以下)のレイアウト調整 --- */
@media screen and (max-width: 1023px) {
  /* サイドバーを完全に非表示 */
  .page-about .sidebar-nav {
    display: none !important;
  }
  
  /* メインコンテンツを1カラムに変更 */
  .page-about .main-content__inner {
    display: block !important;
    grid-template-columns: none !important;
    gap: 40px !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* メインコンテンツエリアのスタイル */
  .page-about .content-main {
    padding: 0 !important;
  }
  
  /* 運営法人セクションを1カラムに変更 */
  .page-about .corporate-info {
    display: block !important;
    grid-template-columns: none !important;
    gap: 20px !important;
  }
  
  /* 運営法人セクションのアイテムスタイル */
  .page-about .corporate-info__item {
    display: block !important;
    margin-bottom: 20px !important;
  }
  
  .page-about .corporate-info__label {
    font-weight: bold !important;
    color: #000 !important;
    border-radius: 5px !important;
    border: 1px solid #000 !important;
    background: #E5E5E5 !important;
    padding: 10px 15px !important;
    display: block !important;
    margin-bottom: 10px !important;
    width: 100% !important;
  }
  
  .page-about .corporate-info__value {
    color: #000 !important;
  }
  
  .page-about .corporate-info__value ul {
    margin: 0 !important;
    padding-left: 20px !important;
  }
  
  .page-about .corporate-info__value li {
    margin-bottom: 10px !important;
  }
  
  .page-about .corporate-info__value li:last-child {
    margin-bottom: 0 !important;
  }
  
  .page-about .corporate-location__link {
    color: var(--14C1B6, #14C1B6) !important;
    font-size: 16px !important;
    font-weight: bold !important;
    line-height: 24px !important;
    text-decoration: none !important;
  }
  
  .page-about .corporate-location__link:hover {
    text-decoration: underline !important;
  }

  /* 再利用可能なテキストリンクスタイル（SP版） */
  .text-link {
    color: var(--14C1B6, #14C1B6) !important;
    font-size: 16px !important;
    font-weight: bold !important;
    line-height: 24px !important;
    text-decoration: none !important;
  }
  
  .text-link:hover {
    text-decoration: underline !important;
  }
  
  /* センター情報セクションを1カラムに変更 */
  .page-about .access-content {
    display: block !important;
    grid-template-columns: none !important;
    gap: 30px !important;
  }
  
  /* センター情報セクションのアイテムスタイル */
  .page-about .access-info__item {
    display: block !important;
    margin-bottom: 20px !important;
  }
  
  .page-about .access-info__label {
    font-weight: bold !important;
    color: #000 !important;
    border-radius: 5px !important;
    border: 1px solid #000 !important;
    background: #E5E5E5 !important;
    padding: 10px 15px !important;
    display: block !important;
    margin-bottom: 10px !important;
    width: 100% !important;
  }
  
  .page-about .access-info__value {
    color: #000 !important;
  }
  
  /* セクション見出しのスタイル */
  .page-about .section-header {
    margin-bottom: 20px !important;
  }
  
  .page-about .section-header__title {
    font-weight: bold !important;
    font-size: 20px !important;
    line-height: 30px !important;
    margin: 0 !important;
    color: #000 !important;
  }
  
  .page-about .section-header__decoration {
    color: #14C1B6 !important;
  }
  
  /* サービスメニュー・料金案内ページのセクションヘッダー装飾 */
  .page-service .section-header__decoration {
    color: #F18F39 !important;
  }
  
  /* 体リハビリプラン以下は緑バージョン */
  .page-service #physical-rehab .section-header__decoration,
  .page-service #physical-rehab ~ * .section-header__decoration {
    color: #73BB20 !important;
  }
  
  /* セクションのpaddingを30pxに */
  .page-about .section {
    padding: 0 !important;
  }
  
  /* リードテキストのpadding設定 */
  .page-about .lead-text.animate-fade-in-up {
    padding: 20px !important;
    margin: 0 !important;
  }
  
  /* リードコンテンツのpadding設定 */
  .page-about .lead-content {
    padding: 20px !important;
    margin: 0 !important;
  }
  
  /* センター長セクションを縦積みに変更 */
  .page-about .director-content {
    display: block !important;
    grid-template-columns: none !important;
    gap: 30px !important;
  }
  
  /* スタッフセクションを縦積みに変更 */
  .page-about .staff-content {
    display: block !important;
    grid-template-columns: none !important;
    gap: 30px !important;
  }
  
  /* スタッフコンテンツテキストのpadding-topを削除 */
  .page-about .staff-content__text {
    padding-top: 0 !important;
  }



  /* データセクションを縦積みに変更 */
  .page-about .data-charts {
    display: block !important;
    grid-template-columns: none !important;
    gap: 30px !important;
  }


  

}

/* --- Step 4: アンカーリンクのスクロール位置調整（JavaScriptで制御） --- */

/* =================================================================== */
/* サービスメニュー・料金案内ページ(.page-service) サイドバースティッキー */
/* =================================================================== */

/* --- Step 1: ページ全体のoverflowを最優先でリセット --- */
.page-service #page,
.page-service #content,
.page-service #primary,
.page-service .main-content,
.page-service .container,
.page-service .main-content__inner {
  overflow: visible !important;
}

/* --- Step 2: PC表示(1024px以上)のレイアウトとsticky設定 --- */
@media screen and (min-width: 1024px) {

  /* 2カラムの親コンテナを設定 */
  .page-service .main-content__inner {
    display: grid !important;
    grid-template-columns: 250px 1fr !important;
    gap: 60px !important;
    align-items: start !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
  }

  /* サイドバー自体の高さを確保する（最重要） */
  .page-service .sidebar-nav {
    align-self: stretch !important;
    height: auto !important;
    width: 250px !important;
    margin-top: 50px;
  }

  /* 追従させたい要素にstickyを適用 */
  .page-service .sidebar-stick {
    position: sticky !important;
    top: var(--sticky-top, 120px) !important;
    margin-bottom: 140px;
  }
  
  /* メインコンテンツエリアのスタイル */
  .page-service .content-main {
    padding: 0 !important;
  }

  /* セクション見出しのスタイル */
  .page-service .section-header__title {
    font-weight: bold;
    font-size: 20px;
    line-height: 30px;
    margin: 0;
  }

  .page-service .section-header__decoration {
    color: #F18F39 !important;
  }
  
  /* 体リハビリプラン以下は緑バージョン */
  .page-service #physical-rehab .section-header__decoration,
  .page-service #physical-rehab ~ * .section-header__decoration {
    color: #73BB20 !important;
  }

  /* 各セクションの1カラムレイアウト */
  .page-service .trial-program-content,
  .page-service .physical-rehab-content,
  .page-service .language-rehab-content,
  .page-service .stroke-yoga-content {
    display: block !important;
  }
}

/* =================================================================== */
/* リハビリプランカードのスタイル */
/* =================================================================== */

/* リハビリプランカード全体 */
.rehab-plan-card {
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 30px 0;
}

/* ヘッダー部分（緑色背景） */
.rehab-plan-header {
  background: #73BB20;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.rehab-plan-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5em;
  margin: 0 !important;
  color: #fff;
}

.rehab-plan-divider {
  width: 100%;
  margin: 20px 0 !important;
  border: 1px dashed #fff;
}

@media (max-width: 768px) {
  .rehab-plan-divider {
    margin: 0 !important;
  }
}

.rehab-plan-subtitle {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5em;
  margin: 0;
  color: #fff;
}

/* 詳細部分（グレー背景） */
.rehab-plan-details {
  background: #D9D9D9;
  padding: 20px;
}

/* 料金表示エリア */
.rehab-plan-pricing {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.pricing-item {
  background: #fff;
  border: 2px solid #000;
  border-radius: 5px;
  padding: 15px;
  width: 190px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.pricing-label {
  font-weight: 700;
  font-size: 16px;
  line-height: 2.2;
  color: #000;
}

.pricing-value {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5em;
  color: #000;
}

/* サービス詳細エリア */
.rehab-plan-services {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.service-item {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.service-badge {
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: #000;
}

.service-description {
  font-size: 16px;
  line-height: 2em;
  color: #000;
  margin: 0;
  padding: 0;
}

/* 注釈エリア */
.rehab-plan-notes {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
}

.notes-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notes-asterisks {
  display: none;
}

.notes-asterisks span {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5em;
  color: #000;
}

.notes-text {
  flex: 1;
}

.notes-content p {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: #000;
  margin: 0;
  text-indent: -1.2em;
  padding-left: 1.2em;
}

.notes-content p:last-child {
  margin-bottom: 0;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .rehab-plan-pricing {
    flex-direction: column;
    align-items: center;
  }
  
  .pricing-item {
    width: 100%;
    max-width: 300px;
  }
  
  .rehab-plan-header,
  .rehab-plan-details {
    padding: 15px;
  }
  
  .rehab-plan-title {
    font-size: 16px;
  }
  
  .rehab-plan-subtitle {
    font-size: 14px;
  }
  
  .pricing-label,
  .pricing-value,
  .service-badge,
  .service-description {
    font-size: 15px;
  }
  
  .notes-content {
    flex-direction: column;
    gap: 10px;
  }
  
  .notes-asterisks {
    flex-direction: row;
    gap: 10px;
    justify-content: center;
  }
}

/* PC表示用：page-service .lead-text スタイル */
.page-service .lead-text {
  font-size: 16px;
  line-height: 2.2;
  color: #333;
  margin-bottom: 30px;
  font-weight: 500;
}

/* --- Step 3: SP表示(1023px以下)のレイアウト調整 --- */
@media screen and (max-width: 1023px) {
  /* サイドバーを完全に非表示 */
  .page-service .sidebar-nav {
    display: none !important;
  }
  
  /* メインコンテンツを1カラムに変更 */
  .page-service .main-content__inner {
    display: block !important;
    grid-template-columns: none !important;
    gap: 40px !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* メインコンテンツエリアのスタイル */
  .page-service .content-main {
    padding: 0 !important;
  }
  
  /* セクション見出しのスタイル */
  .page-service .section-header {
    margin-bottom: 20px !important;
  }
  
  .page-service .section-header__title {
    font-weight: bold !important;
    font-size: 20px !important;
    line-height: 30px !important;
    margin: 0 !important;
    color: #000 !important;
  }
  
  .page-service .section-header__decoration {
    color: #F18F39 !important;
  }
  
  /* 体リハビリプラン以下は緑バージョン */
  .page-service #physical-rehab .section-header__decoration,
  .page-service #physical-rehab ~ * .section-header__decoration {
    color: #73BB20 !important;
  }
  
  /* セクションのpaddingを30pxに */
  .page-service .section {
    padding: 30px 0 !important;
  }
  
  /* リードテキストのpadding設定 */
  .page-service .lead-text {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 15px !important;
  }
}

/* --- Step 4: アンカーリンクのスクロール位置調整（JavaScriptで制御） --- */

/* サイドメニューのアクティブ状態スタイル（既存スタイルを拡張） */
.sidebar-nav__link.active {
  color: #14C1B6;
  border-bottom: 1px solid #000;
  background: rgba(20, 193, 182, 0.1);
}

/* =================================================================== */
/* サービスページのスタイル（aboutページと同じ） */
/* =================================================================== */

/* パンくずリスト */
.page-service .breadcrumb {
  height: 32px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #000;
}

.page-service .breadcrumb a {
  color: #000;
  text-decoration: none;
}

.page-service .breadcrumb a:hover {
  text-decoration: underline;
}

.page-service .breadcrumb .separator {
  margin: 0 10px;
}

/* ページタイトル */
.page-service .page-title {
  text-align: center;
  line-height: 159px;
  margin-bottom: 0;
  background-color: white;
}

.page-service .page-title h1 {
  font-size: 26px;
  font-weight: bold;
  color: #14C1B6;
  margin: 0;
}

.page-contact .page-title {
  text-align: center;
  line-height: 159px;
  margin-bottom: 0;
  background-color: white;
}

.page-contact .page-title h1 {
  font-size: 26px;
  font-weight: bold;
  color: #14C1B6;
  margin: 0;
}

/* お問い合わせ説明テキスト */
.contact-description {
  padding: 20px 0 40px;
  background-color: white;
}

.contact-description__text {
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  text-align: center;
  color: #000000;
  margin: 0;
}

/* お電話でのお問い合わせセクション - Figmaデザイン完全再現 */
.contact-phone-frame {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  width: 1000px;
  margin: 0 auto;
}

/* 左側コンテンツエリア */
.contact-phone-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  padding: 50px;
  background-color: #E5E5E5;
  width: 740px;
}

/* お問い合わせページのセクションヘッダータイトル */
.page-contact .section-header__title {
  font-weight: bold !important;
  font-size: 20px !important;
  line-height: 30px !important;
  margin: 0 !important;
  color: #000 !important;
  width: 247px;
  text-align: left;
}

/* 右側画像エリア */
.contact-phone-image {
  width: 240px;
  height: 175px;
  flex-shrink: 0;
}

.contact-phone-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.contact-phone-number-frame {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 360px;
  height: 75px;
  background-color: #F18F39;
  border-radius: 5px;
  padding: 20px;
}

.contact-phone-number-inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  min-height: 35px;
}

.phone-icon-group {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.phone-number-text {
  font-weight: 700;
  font-size: 35px;
  line-height: 1;
  color: #FFFFFF;
  text-align: center;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.phone-number-text:hover {
  text-decoration: none;
  color: #FFFFFF;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .contact-phone-frame {
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 100%;
  }
  
  .contact-phone-content {
    flex-direction: column;
    gap: 20px;
    padding: 30px 20px;
    width: 100%;
  }
  
  .page-contact .section-header__title {
    width: auto;
    text-align: center;
    font-size: 18px !important;
  }
  
  .contact-phone-number-frame {
    width: 100%;
    max-width: 300px;
    height: 60px;
  }
  
  .phone-number-text {
    font-size: 28px;
  }
  
  .contact-phone-image {
    display: none;
  }
  
  .contact-mail-image {
    display: none;
  }
  
  /* メールフォームのSP対応 */
  .contact-mail-frame {
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 100%;
  }
  
  .contact-mail-content {
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding: 20px !important;
  }
  
  .contact-mail-description {
    font-size: 14px;
    line-height: 1.8;
  }
  
  .form-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .field-label {
    width: 100% !important;
    min-width: auto !important;
    height: auto !important;
    justify-content: flex-start !important;
    display: flex !important;
  }
  
  .field-label-wrapper {
    width: 100% !important;
    min-width: auto !important;
    max-width: 100% !important;
  }
  
  .form-field input,
  .form-field select {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .submit-button,
  .wpcf7-submit,
  .wpcf7-form-control.wpcf7-submit {
    width: 100%;
    max-width: 300px;
    background-color: #F18F39 !important;
  }
  
  .submit-button:hover,
  .wpcf7-submit:hover,
  .wpcf7-form-control.wpcf7-submit:hover {
    background-color: #e07d2a !important;
  }
  
  .textarea-wrapper {
    margin-bottom: 30px;
  }
}

/* メールでのお問い合わせセクション */
.contact-mail-section {
  padding: 50px 0 100px 0;
}

.contact-mail-frame {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 1000px;
  margin: 0 auto;
  position: sticky;
  top: 20px;
  z-index: 100;
}

.contact-mail-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #E5E5E5;
  padding: 50px;
  border-radius: 5px;
}

.contact-mail-description {
  font-size: 16px;
  line-height: 2;
  color: #000;
  margin-bottom: 10px;
}

/* フォームスタイル */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* コンタクトフォーム7の余分なpタグをリセット */
.wpcf7-form p {
  margin: 0 !important;
  padding: 0 !important;
}

.wpcf7-form .form-field p {
  line-height: 1.8;
}

.wpcf7-form .field-label p {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  justify-content: flex-start !important;
}

.wpcf7-form .form-submit p {
  display: flex !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* コンタクトフォーム7のラッパー要素を調整 */
.wpcf7-form-control-wrap {
  display: block !important;
  width: 100% !important;
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 50px;
}

.form-field {
  display: flex;
  align-items: left;
  gap: 20px;
}

.form-field-textarea {
  align-items: flex-start;
}

.field-label-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 230px;
  min-width: 230px;
}

.field-description {
  font-size: 16px;
  line-height: 2.2;
  color: #000;
  margin: 0;
}

.phone-note {
  font-weight: 700;
  color: #F18F39;
  display: inline !important;
}

.field-label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 210px;
  min-width: 230px;
  height: 48px;
}

.field-label label {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #000;
}

.required-badge {
  display: flex;
  padding: 5px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  background: var(--14C1B6, #14C1B6);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  line-height: 1;
}

.optional-badge {
  background-color: #000;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 5px;
  border-radius: 5px;
  white-space: nowrap;
  line-height: 1;
}

.form-field input,
.form-field select,
.wpcf7-form-control {
  flex: 1 !important;
  height: 48px !important;
  padding: 10px 15px !important;
  border: none !important;
  border-radius: 5px !important;
  background-color: #fff !important;
  font-size: 16px !important;
  line-height: 1.625 !important;
  color: #000 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.form-field input:focus,
.form-field select:focus,
.wpcf7-form-control:focus {
  outline: none !important;
  color: #000 !important;
}

.form-field input::placeholder,
.wpcf7-form-control::placeholder {
  color: rgba(203, 203, 203, 0.8) !important;
}

.form-field select {
  color: rgba(203, 203, 203, 0.8);
  cursor: pointer;
}

.form-field select option {
  color: #000;
}

.textarea-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-field textarea,
.wpcf7-textarea {
  width: 100% !important;
  min-height: 200px !important;
  padding: 10px 15px !important;
  border: none !important;
  border-radius: 5px !important;
  background-color: #fff !important;
  font-size: 16px !important;
  line-height: 1.625 !important;
  color: #000 !important;
  resize: vertical !important;
  box-sizing: border-box !important;
}

.form-field textarea:focus,
.wpcf7-textarea:focus {
  outline: none !important;
  color: #000 !important;
}

.form-field textarea::placeholder,
.wpcf7-textarea::placeholder {
  color: rgba(203, 203, 203, 0.8) !important;
}

.textarea-note {
  font-size: 16px;
  line-height: 2.2;
  color: #000;
  margin: 0;
}

.form-submit {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

.submit-button,
.wpcf7-submit {
  width: 300px !important;
  height: 60px !important;
  background-color: #14C1B6 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.375 !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.submit-button:hover,
.wpcf7-submit:hover {
  background-color: #0fa89d !important;
}

.submit-button:disabled,
.wpcf7-submit:disabled {
  background-color: #14C1B6 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* スピナーを非表示にする */
.wpcf7-spinner {
  display: none !important;
}

.privacy-policy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.privacy-line {
  width: 100%;
  height: 1px;
  background-color: #000;
}

.privacy-text {
  font-size: 14px;
  line-height: 1.57;
  color: #000;
  margin: 0;
  text-align: center;
}

.privacy-text a:hover {
  color: #F18F39;
}

/* 右側画像エリア */
.contact-mail-image {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 80px;
  align-self: flex-start;
}

.contact-mail-image img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

/* SP時のフォームフィールド左揃え */
@media (max-width: 767px) {
  .form-fields {
    text-align: left;
  }
  
  .form-fields * {
    text-align: left;
  }
  
  .form-field {
    align-items: left;
  }
  
  .field-label-wrapper,
  .field-label,
  .field-description,
  .textarea-note {
    text-align: left;
  }
}

/* お問い合わせページのセクションヘッダー装飾 */
.page-contact .section-header__decoration {
  color: #14C1B6 !important;
}

/* お問い合わせページでmobile-ctaを非表示 */
.page-contact .mobile-cta {
  display: none !important;
}

/* お問い合わせページでpage-top-btnの位置を調整 */
.page-contact .page-top-btn {
  bottom: 20px !important;
  z-index: 10001 !important;
}

/* =================================================================== */
/* ご利用の流れコンポーネント
/* =================================================================== */

/* コンテナ全体のスタイル */
.flow-container {
  background-color: #f2f2f2;
  padding: 40px 20px;
}

/* 特別体験プログラム内でのflow-containerの上書き */
.trial-program-flow .flow-container {
  background-color: transparent !important;
  padding: 0 0 20px 0 !important;
  margin-top: 40px !important;
}

/* 特別体験プログラム内でのご利用の流れ */
.trial-program-flow .flow-container {
  background-color: transparent !important;
  padding: 0 0 20px 0 !important;
  margin-top: 40px !important;
}

/* より具体的なセレクタで確実に適用 */
.section--trial-program .trial-program-flow .flow-container {
  background-color: transparent !important;
  padding: 0 0 20px 0 !important;
  margin-top: 40px !important;
}

/* 最優先で適用されるセレクタ */
body .section--trial-program .trial-program-flow .flow-container {
  background-color: transparent !important;
  padding: 0 0 20px 0 !important;
  margin-top: 40px !important;
  margin-bottom: 40px;
}

/* SP時のmargin-bottom設定 */
@media (max-width: 768px) {
  body .section--trial-program .trial-program-flow .flow-container {
    margin-bottom: 10px !important;
  }
}

.trial-program-flow .flow {
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  align-self: stretch;
  background: #D9D9D9;
}

.flow {
  max-width: 800px;
  margin: 0 auto;
}

/* タイトル */
.flow__title {
  text-align: center;

  font-size: var(--font-size-2xl);
  font-weight: bold;
  color: var(--brand-text);
  font-family: var(--font-family-base);
}



/* 特別体験プログラム内でのタイトル調整 */
.trial-program-flow .flow__title {
  font-size: var(--font-size-xl);

  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  background-color: #000;
  color: #FFF;
  color: #FFF;
  font-size: 16px;
  font-weight: 700;
  line-height: 27px; /* 168.75% */
}

/* ステップ全体のコンテナ */
.flow__steps {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 各ステップアイテム */
.flow__item {
  width: calc(100% - 40px);
  margin: 0 20px;
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}

/* 背景色のバリエーション */
.flow__item--white {
  background-color: var(--brand-white);
  border: 1px solid #e0e0e0;
}

.flow__item--gray {
  background-color: #f8f8f8;
  border: 1px solid #e0e0e0;
}

.flow__item--yellow {
  background-color: #f5EDD3;
}

.flow__item--orange {
  background-color: var(--brand-accent);
  border: 1px solid var(--brand-accent);
  margin-bottom: 20px;
}

.flow__item--bordered {
  border: 2px solid var(--brand-accent);
}

/* ステップタイトル */
.flow__item-title {
  font-size: var(--font-size-lg);
  font-weight: bold;
  color: var(--brand-text);
  font-family: var(--font-family-base);
  line-height: 2;
  text-align: center;
  width: 100%;
  border-bottom: 1px solid #000;
  padding-bottom: 5px;
}

.flow__item--orange .flow__item-title {
  border: none;
  padding-bottom: 0;
}

.flow__item-title--orange {
  color: var(--brand-accent);
}

.flow__item-title--white {
  color: var(--brand-white);
}

/* ステップ説明文 */
.flow__item-description {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--brand-text);
  font-family: var(--font-family-base);
  margin-bottom: 8px;
}

.flow__item-description:last-child {
  margin-bottom: 0;
}

.flow__item-description--white {
  color: var(--brand-white);
}

/* 矢印 */
.flow__arrow {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.flow__arrow-icon {
  width: 30px;
  height: 30px;
}

/* SVGの色をクラスで制御 */
.flow__arrow.is-orange .flow__arrow-icon path {
  fill: var(--brand-accent);
}

.flow__arrow.is-white .flow__arrow-icon path {
  fill: var(--brand-white);
}

/* =================================================================== */
/* レスポンシブ対応（768px以下） */
/* =================================================================== */

@media (max-width: 768px) {
  /* コンテナの余白調整 */
  .flow-container {
    padding: 30px 15px;
  }
  
  /* タイトルサイズ調整 */
  .flow__title {
    font-size: var(--font-size-xl);
  }
  
  /* ステップアイテムの余白調整 */
  .flow__item {
    padding: 20px;
  }
  
  /* ステップタイトルサイズ調整 */
  .flow__item-title {
    font-size: var(--font-size-base);
    margin-bottom: 10px;
  }
  
  /* ステップ説明文サイズ調整 */
  .flow__item-description {
    font-size: var(--font-size-sm);
    line-height: 1.5;
  }
  
  
  /* 矢印の余白調整 */
  .flow__arrow {
    margin-bottom: 20px;
  }
  
  .flow__arrow-icon {
    width: 25px;
    height: 25px;
  }
}

/* =================================================================== */
/* 料金コンポーネント */
/* =================================================================== */

/* 料金セクション */
.pricing {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* 特別体験プログラム内での料金コンテナの上書き */
.trial-program-flow .pricing {
  padding: 0 0 20px 0 !important;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  align-self: stretch;
  background: #D9D9D9;
  padding: 0;
}

/* 料金タイトル */
.pricing__title {
  text-align: center;
  font-size: var(--font-size-2xl);
  font-weight: bold;
  color: var(--brand-text);
  font-family: var(--font-family-base);
  margin-bottom: 20px;
}

/* 特別体験プログラム内での料金タイトル */
.trial-program-flow .pricing__title {
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  background-color: #000;
  color: #FFF;
  font-size: 16px;
  font-weight: 700;
  line-height: 27px;
  margin: 0;
  width: 100%;
  text-align: center;
}

/* 料金サブタイトル */
.pricing h2 {
  text-align: center;
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: var(--brand-text);
  margin: 20px 0;
  font-family: var(--font-family-base);
}

/* 特別体験プログラム内での料金サブタイトル */
.trial-program-flow .pricing h2 {
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  background-color: var(--brand-accent);
  color: #FFF;
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  margin: 0;
  width: 100%;
  text-align: center;
}

/* 料金エリア（横並び） */
.pricing__area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 30px 0;
  flex-wrap: wrap;
}

/* 特別体験プログラム内での料金エリア */
.trial-program-flow .pricing__area {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
  margin: 15px;
  width: calc(100% - 30px);
  flex-wrap: wrap;
}

/* 料金アイテム */
.pricing__item {
  border-radius: 5px;
  border: 2px solid #000;
  background: #FFF;
  padding: 15px 0;
  text-align: center;
  min-width: 150px;
  flex: 1;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pricing__info {
  font-weight: 500;
    font-size: 16px;
    line-height: 1em;
    color: #000;
}


/* 料金ラベル */
.pricing__label {
  font-size: var(--font-size-lg);
  font-weight: bold;
  color: var(--brand-text);
  display: block;
  margin-bottom: 5px;
}

/* 料金時間 */
.pricing__duration {
  font-size: var(--font-size-base);
  color: var(--brand-text);
  display: block;
}

/* 料金価格 */
.pricing__price {
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: var(--brand-text);
  display: block;
}

/* 料金注釈リスト */
.pricing__notes {
  list-style: none !important;
  padding: 0 !important;
  margin: 20px 0;
  text-align: left;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* 特別体験プログラム内での料金注釈 */
.trial-program-flow .pricing__notes {
  margin: 0 20px 0 20px;
  text-align: left;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 40px);
  list-style: none !important;
  padding: 0 !important;
}

.pricing__notes li {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--brand-text);
  margin-bottom: 10px;
  padding-left: 20px !important;
  position: relative;
  list-style: none !important;
}

/* 特別体験プログラム内での料金注釈リストアイテム */
.trial-program-flow .pricing__notes li {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--brand-text);
  margin-bottom: 10px;
  padding-left: 2rem !important;
  position: relative;
  font-family: var(--font-family-base);
  list-style: none !important;
  text-indent: -1.8em;
}

/* 特別体験プログラム内での料金注釈リストアイテムのbulletを非表示 */
.trial-program-flow .pricing__notes li:before {
  display: none !important;
}

.pricing__notes li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background-color: var(--brand-accent);
  border-radius: 5px;
}

/* レスポンシブ対応（768px以下） */
@media (max-width: 768px) {
  /* 料金セクションの余白調整 */
  .pricing {
    padding: 30px 15px;
  }
  
  /* 特別体験プログラム内での料金セクション */
  .trial-program-flow .pricing {
    gap: 0;
    padding: 0;
  }
  
  /* 料金タイトルサイズ調整 */
  .pricing__title {
    font-size: var(--font-size-xl);
  }
  
  /* 特別体験プログラム内での料金タイトル */
  .trial-program-flow .pricing__title {
    font-size: 16px;
    padding: 15px;
  }
  
  /* 料金サブタイトルサイズ調整 */
  .pricing h2 {
    font-size: var(--font-size-lg);
    margin: 15px 0;
  }
  
  /* 特別体験プログラム内での料金サブタイトル */
  .trial-program-flow .pricing h2 {
    font-size: 18px;
    padding: 15px;
  }
  
  /* 料金エリアの調整 */
  .pricing__area {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  
  /* 特別体験プログラム内での料金エリア */
  .trial-program-flow .pricing__area {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: calc(100% - 30px) !important;
    max-width: none !important;
    margin: 15px !important;
  }
  
  /* 料金アイテムの調整 */
  .pricing__item {
    width: calc(50% - 5px);
    min-width: auto;
    max-width: none;
  }
  
  /* 特別体験プログラム内での料金アイテム（2カラムレイアウト） */
  .trial-program-flow .pricing__area .pricing__item {
    width: calc(50% - 5px) !important;
    min-width: auto !important;
    max-width: none !important;
    flex: none !important;
  }
  
  /* 特別体験プログラム内での料金アイテム（エリア外） */
  .trial-program-flow .pricing__item:not(.pricing__area .pricing__item) {
    min-width: auto;
    max-width: 100%;
    width: 100%;
    padding: 15px;
  }
  
  /* 料金ラベルの調整 */
  .pricing__label {
    font-size: var(--font-size-base);
  }
  
  /* 料金時間の調整 */
  .pricing__duration {
    font-size: var(--font-size-sm);
  }
  
  /* 料金価格の調整 */
  .pricing__price {
    font-size: var(--font-size-lg);
  }
  
  /* 料金注釈の調整 */
  .pricing__notes li {
    font-size: var(--font-size-sm);
    padding-left: 15px;
  }
  
  /* 特別体験プログラム内での料金注釈 */
  .trial-program-flow .pricing__notes {
    margin: 0 15px;
    width: calc(100% - 30px);
  }
  
  .trial-program-flow .pricing__notes li {
    font-size: var(--font-size-sm);
    padding-left: 15px;
  }
}

/* 特別体験プログラム内でのflow-containerの上書き */
.section--trial-program {
  margin: 0;
}

/* 料金セクションの下にお問い合わせボタンを配置 */
.trial-program-flow .pricing {
  margin-bottom: 30px;
}

.trial-program-flow .pricing + .contact-section {
  text-align: center;
  margin-top: 30px;
}

/* services-contact-buttonと同じスタイルを適用 */
.trial-program-flow .contact-section .services-contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary);
  color: var(--brand-white);
  text-decoration: none;
  padding: 21px;
  border-radius: 5px;
  font-weight: bold;
  font-size: var(--font-size-base);
  transition: all var(--transition-normal);
  width: 300px;
  height: 60px;
}

.trial-program-flow .contact-section .services-contact-button:hover {
  background: var(--brand-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(20, 193, 182, 0.3);
}

.trial-program-flow .contact-section .services-contact-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 20px;
}

.trial-program-flow .contact-section .contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.trial-program-flow .contact-section .contact-text {
  font-size: 16px;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

.trial-program-flow .flow-container {
  background-color: transparent !important;
  padding: 0 0 20px 0 !important;
  margin-top: 40px !important;
}

/* 身体リハビリプランセクション内のお問い合わせボタン */
.section--physical-rehab .contact-section {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.section--physical-rehab .contact-section .services-contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary);
  color: var(--brand-white);
  text-decoration: none;
  padding: 21px;
  border-radius: 5px;
  font-weight: bold;
  font-size: var(--font-size-base);
  transition: all var(--transition-normal);
  width: 300px;
  height: 60px;
}

.section--physical-rehab .contact-section .services-contact-button:hover {
  background: var(--brand-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(20, 193, 182, 0.3);
}

.section--physical-rehab .contact-section .services-contact-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 20px;
}

.section--physical-rehab .contact-section .contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.section--physical-rehab .contact-section .contact-text {
  font-size: 16px;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

/* つなぎのコピー */
.trial-program-description {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 30px 0px 0px;
}

.trial-program-description__text {
  font-size: 16px;
  line-height: 2.2;
  color: #333;
  margin: 0;
  font-weight: 500;
}

/* 言語リハビリプラン画像 */
.language-rehab-image {
  margin-top: 20px;
  text-align: center;
}

.rehab-course-image {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 言語聴覚士プロフィール */
.language-rehab-content__profile {
  margin: 30px 0;
}

.staff-profile {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 !important;
  border-radius: 5px;
  max-width: 380px;
  margin: 0 auto;
}

/* PC時のスタッフプロフィール設定を保護 */
@media (min-width: 769px) {
  .staff-profile {
    padding: 0;
    max-width: 42
    0px !important;
    margin: 0 auto !important;
  }
  
  .staff-portrait {
    width: 120px !important;
    height: 120px !important;
  }
}

.staff-profile__image {
  flex-shrink: 0;
  height: 120px
}

.staff-portrait {
  height: 120px;
  object-fit: cover;
}

.staff-profile__info {
  flex: 1;
}

.staff-title {
  margin-bottom: 5px;
}

.staff-qualification {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2em;
  color: #000;
  margin: 0;
}

.staff-name {
  display: flex;
  align-items: center;
  gap: 18px;
}

.staff-name__japanese {
  font-weight: 600;
  font-size: 24px;
  line-height: 1.5em;
  color: #000;
  margin: 0;
}

.staff-name__english {
  font-weight: 600;
  font-size: 12px;
  line-height: 3em;
  color: #000;
  margin: 0;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .language-rehab-image {
    margin-top: 15px;
    height: auto;
    display: inline-block;
  }
  
  .rehab-course-image {
    border-radius: 3px;
    display: block;
  }
  
  /* SP版の料金表示レイアウト */
  .rehab-plan-pricing {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
  }
  
  .pricing-item {
    width: calc(50% - 5px) !important;
    margin: 0 !important;
    font-size: 15px;
    padding-left: 0;
    padding-right: 0;
  }
  
  .pricing__info {
    font-size: 15px;
  }
  
  /* 料金項目（3番目）を2行目に配置 */
  
  /* SP版のサービス項目レイアウト */
  .rehab-plan-services {
    gap: 15px !important;
  }
  
  
  .service-description {
    font-size: 14px !important;
    line-height: 2em !important;
    padding: 0 !important;
  }
  
  /* SP版のスタッフプロフィールレイアウト */
  .staff-profile {
    text-align: center !important;
    gap: 15px !important;
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
  
  .staff-profile__info {
    text-align: left !important;
  }
  
  
  .staff-name {
    gap: 5px !important;
    text-align: left !important;
  }
  
  .service-staff-portrait {
    width: 100px !important;
    height: 100px !important;
  }
  
  .staff-profile__image {
    height: 100px;
  }
  
  .staff-portrait {
    height: 100px !important;
  }
  
  .staff-name__japanese {
    font-size: 20px !important;
  }
  
  .staff-name__english {
    font-size: 11px !important;
    line-height: 2em !important;
  }
}

/* 身体リハビリプランセクション内のお問い合わせボタン */
.section--physical-rehab .contact-section {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.section--physical-rehab .contact-section .services-contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary);
  color: var(--brand-white);
  text-decoration: none;
  padding: 21px;
  border-radius: 5px;
  font-weight: bold;
  font-size: var(--font-size-base);
  transition: all var(--transition-normal);
  width: 300px;
  height: 60px;
}

.section--physical-rehab .contact-section .services-contact-button:hover {
  background: var(--brand-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(20, 193, 182, 0.3);
}

.section--physical-rehab .contact-section .services-contact-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 20px;
}

.section--physical-rehab .contact-section .contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.section--physical-rehab .contact-section .contact-text {
  font-size: 16px;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

/* 言語リハビリプランセクション内のお問い合わせボタン */
.section--language-rehab .contact-section,
#language-rehab .contact-section {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.section--language-rehab .contact-section .services-contact-button,
#language-rehab .contact-section .services-contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary);
  color: var(--brand-white);
  text-decoration: none;
  padding: 21px;
  border-radius: 5px;
  font-weight: bold;
  font-size: var(--font-size-base);
  transition: all var(--transition-normal);
  width: 300px;
  height: 60px;
}

.section--language-rehab .contact-section .services-contact-button:hover,
#language-rehab .contact-section .services-contact-button:hover {
  background: var(--brand-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(20, 193, 182, 0.3);
}

.section--language-rehab .contact-section .services-contact-button-content,
#language-rehab .contact-section .services-contact-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 20px;
}

.section--language-rehab .contact-section .contact-icon,
#language-rehab .contact-section .contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.section--language-rehab .contact-section .contact-text,
#language-rehab .contact-section .contact-text {
  font-size: 16px;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

/* =================================================================== */
/* 身体リハビリプランセクションのスタイル */
/* =================================================================== */

/* 身体リハビリプランセクション全体 */
.section--physical-rehab {
  padding-top: 40px !important;
}

/* =================================================================== */
/* 脳卒中ヨガセクションのスタイル */
/* =================================================================== */

/* 脳卒中ヨガセクション全体 */
.section--stroke-yoga {
  padding: var(--section-spacing-pc) 0;
  padding-bottom: 110px !important;
}

/* 脳卒中ヨガセクション内のスタッフプロフィール */
.section--stroke-yoga .staff-profile {
  max-width: 420px;
}

/* 脳卒中ヨガセクション内のテキストリンク */
.section--stroke-yoga .staff-qualification a {
  color: var(--14C1B6, #14C1B6) !important;
  font-size: 12px !important;
  font-weight: bold !important;
  line-height: 1.5em !important;
  text-decoration: underline !important;
}

.section--stroke-yoga .staff-qualification a:hover {
  text-decoration: underline !important;
}

.section--stroke-yoga .section-header {
  margin-bottom: var(--section-title-margin-pc);
}

.section--stroke-yoga .section-header__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--brand-text);
  text-align: center;
}

.section--stroke-yoga .section-header__decoration {
  color: var(--brand-primary);
}

/* 脳卒中ヨガコンテンツ */

.stroke-yoga-content__text {
  margin-bottom: 30px;
}

.stroke-yoga-content .lead-text {
  font-size: var(--font-size-lg);
  line-height: 2em;
  color: var(--brand-text);
  text-align: left;
  margin: 0;
  padding: 20px 0;
}

/* インストラクタープロフィール */
.instructor-profile {
  display: flex;
  align-items: center;
  gap: 30px;
  background: #f8f9fa;
  padding: 40px;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow);
  max-width: 800px;
  margin: 0 auto;
}

.instructor-photo {
  flex-shrink: 0;
}

.instructor-image {
  width: 120px;
  height: 120px;
  border-radius: 5px;
  object-fit: cover;
  border: 4px solid var(--brand-white);
  box-shadow: var(--shadow);
}

.instructor-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.instructor-credentials {
  margin-bottom: 15px;
}

.instructor-credentials p {
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.8em;
  color: var(--brand-text);
  margin: 0;
}

.instructor-credentials a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.instructor-credentials a:hover {
  color: var(--brand-primary-hover);
  text-decoration: underline;
}

.instructor-name {
  display: flex;
  align-items: center;
  gap: 20px;
}

.instructor-name-jp {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--brand-text);
  margin: 0;
}

.instructor-name-en {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--brand-text);
  margin: 0;
  opacity: 0.7;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
  .section--stroke-yoga {
    padding: var(--section-spacing-sp) 0;
  }
  
  .section--stroke-yoga .section-header {
    margin-bottom: var(--section-title-margin-sp);
  }
  
  .stroke-yoga-content {
    padding: 0;
    gap: 20px;
  }
  
  .stroke-yoga-content .lead-text {
    font-size: var(--font-size-base);
    line-height: 1.8em;
  }
  
  .instructor-profile {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 30px 20px;
  }
  
  .instructor-image {
    width: 100px;
    height: 100px;
  }
  
  .instructor-name {
    flex-direction: column;
    gap: 10px;
  }
  
  .instructor-name-jp {
    font-size: var(--font-size-lg);
  }
}

/* 脳卒中ヨガセクション */
.stroke-yoga-section {
  margin-top: 40px;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

.stroke-yoga-header {
  max-width: var(--container-max-width);
  margin: 0 auto;
  background-color: #73BB20;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.stroke-yoga-title {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5em;
  margin: 0;
}

.stroke-yoga-line {
  width: 100%;
  border: none;
  border: 1px dashed #fff;
}

.stroke-yoga-schedule {
  color: #FFFFFF;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5em;
  margin: 0;
  max-width: 360px;
}

.stroke-yoga-details {
  max-width: var(--container-max-width);
  margin: 0 auto;
  background-color: #D9D9D9;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stroke-yoga-pricing {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pricing-details {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.time-info,
.price-info {
  background-color: #FFFFFF;
  border: 2px solid #000000;
  border-radius: 5px;
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.time-text,
.price-text {
  color: #000000;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5em;
  margin: 0;
  text-align: center;
}

.pricing-note {
  display: flex;
  gap: 5px;
  align-items: flex-start;
}

.note-asterisk {
  color: #000000;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5em;
  width: 14px;
  flex-shrink: 0;
}

.note-text {
  color: #000000;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5em;
  margin: 0;
}

.stroke-yoga-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.items-section {
  background-color: #FFFFFF;
  border-radius: 5px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.items-title {
  color: #000000;
  font-weight: 700;
  font-size: 16px;
  line-height: 2.2;
  margin: 0;
  text-align: center;
}

.items-text {
  color: #000000;
  font-size: 16px;
  line-height: 2.2;
  margin: 0;
}

.stroke-yoga-image-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.yoga-image-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: 5px;
  background-color: #C1C0C0;
}

.yoga-practice-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.yoga-equipment-note {
  color: #000000;
  font-size: 14px;
  line-height: 1.5em;
  margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .stroke-yoga-section {
    margin-top: 30px;
    max-width: 100%;
  }
  
  .stroke-yoga-header {
    padding: 15px;
    gap: 15px;
  }
  
  .stroke-yoga-title {
    font-size: 16px;
  }
  
  .stroke-yoga-schedule {
    font-size: 14px;
    max-width: 100%;
  }
  
  .stroke-yoga-details {
    padding: 15px;
    gap: 15px;
  }
  
  .pricing-details {
    flex-direction: row;
    gap: 15px;
  }
  
  .time-info,
  .price-info {
    min-width: auto;
    width: auto;
    flex: 1;
  }
  
  .yoga-image-container {
    height: 200px;
  }
}

/* 脳卒中ヨガセクション内のお問い合わせボタン */
.section--stroke-yoga .contact-section {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.section--stroke-yoga .contact-section .services-contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary);
  color: var(--brand-white);
  text-decoration: none;
  padding: 21px;
  border-radius: 5px;
  font-weight: bold;
  font-size: var(--font-size-base);
  transition: all var(--transition-normal);
  width: 300px;
  height: 60px;
}

.section--stroke-yoga .contact-section .services-contact-button:hover {
  background: var(--brand-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(20, 193, 182, 0.3);
}

.section--stroke-yoga .contact-section .services-contact-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 20px;
}

.section--stroke-yoga .contact-section .contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section--stroke-yoga .contact-section .contact-text {
  font-size: var(--font-size-base);
  font-weight: bold;
}

/* ========================================
   お問い合わせページスタイル
======================================== */

/* お問い合わせメインコンテンツ */
.contact-main-content {
  padding: 60px 0;
  background-color: #f8f9fa;
}

.contact-content-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

/* お問い合わせ説明セクション */
.contact-intro {
  margin-bottom: 50px;
  text-align: center;
}

.contact-intro__content {
  background: white;
  padding: 40px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.contact-intro__title {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 20px;
  position: relative;
}

.contact-intro__title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background-color: #3498db;
  margin: 15px auto 0;
}

.contact-intro__text {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  margin: 0;
}

/* お問い合わせフォームセクション */
.contact-form-section {
  margin-bottom: 50px;
}

.contact-form-wrapper {
  background: white;
  padding: 40px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.contact-form-title {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 30px;
  text-align: center;
  position: relative;
}

.contact-form-title::after {
  content: '';
  display: block;
  width: 50px;
  height: 2px;
  background-color: #3498db;
  margin: 10px auto 0;
}

.contact-form-content {
  max-width: 600px;
  margin: 0 auto;
}

/* Contact Form 7 スタイル調整 */
.contact-form-content .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form-content .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 15px;
}

.contact-form-content .wpcf7-form-control {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #e1e8ed;
  border-radius: 5px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.contact-form-content .wpcf7-form-control:focus {
  outline: none;
  border-color: #3498db;
}

/* ContactForm7のセレクトボックスの矢印アイコンを削除 */
.wpcf7-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  padding-right: 15px !important;
}

.contact-form-content .wpcf7-textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form-content .wpcf7-submit {
  background-color: #3498db;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
  align-self: center;
  min-width: 300px;
}

.contact-form-content .wpcf7-submit:hover {
  background-color: #2980b9;
}

/* 連絡先情報セクション */
.contact-info-section {
  margin-bottom: 50px;
}

.contact-info-wrapper {
  background: white;
  padding: 40px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.contact-info-title {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 30px;
  text-align: center;
  position: relative;
}

.contact-info-title::after {
  content: '';
  display: block;
  width: 50px;
  height: 2px;
  background-color: #3498db;
  margin: 10px auto 0;
}

.contact-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 30px;
  background: linear-gradient(135deg, #3498db, #2980b9);
  border-radius: 5px;
  color: white;
}

.contact-phone__icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-phone__icon svg {
  width: 30px;
  height: 30px;
}

.contact-phone__info {
  text-align: center;
}

.contact-phone__label {
  font-size: 16px;
  margin-bottom: 8px;
  opacity: 0.9;
}

.contact-phone__number {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.contact-phone__hours {
  font-size: 14px;
  opacity: 0.8;
  margin: 0;
}

/* アクセス情報セクション */
.contact-access-section {
  margin-bottom: 30px;
}

.contact-access-wrapper {
  background: white;
  padding: 40px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.contact-access-title {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 30px;
  text-align: center;
  position: relative;
}

.contact-access-title::after {
  content: '';
  display: block;
  width: 50px;
  height: 2px;
  background-color: #3498db;
  margin: 10px auto 0;
}

.access-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.access-info__item {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 5px;
  border-left: 4px solid #3498db;
}

.access-info__label {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 10px;
}

.access-info__text {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .contact-main-content {
    padding: 40px 0;
  }
  
  .contact-intro__content,
  .contact-form-wrapper,
  .contact-info-wrapper,
  .contact-access-wrapper {
    padding: 30px 20px;
  }
  
  .contact-intro__title {
    font-size: 24px;
  }
  
  .contact-form-title,
  .contact-info-title,
  .contact-access-title {
    font-size: 20px;
  }
  
  .contact-phone {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .contact-phone__number {
    font-size: 24px;
  }
  
  .access-info {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .access-info__item {
    padding: 15px;
  }
}

/* 強制的にお問い合わせボタンのアイコン間隔を20pxに設定 */
.section--physical-rehab .contact-section .services-contact-button-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  gap: 20px !important;
}

/* 強制的にフロントページCTAボタンのアイコン間隔を20pxに設定 */
.home .cta-button-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  gap: 20px !important;
}

/* テキストの幅を固定してアイコン間隔を調整 */
.home .cta-text,
.contact-text,
.btn__text {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  flex: none !important;
}

/* ポイント3つの数字と単位のスタイル */
.point-number {
  color: var(--14C1B6, #14C1B6);
  font-size: 40px;
  font-weight: 700;
}

.point-unit {
  color: var(--14C1B6, #14C1B6);
  font-size: 30px;
  font-weight: 700;
}

/* SP用のスタイル */
@media (max-width: 768px) {
  .point-number {
    font-size: 30px;
  }
  
  .point-unit {
    font-size: 20px;
  }
}

/* お問い合わせページの個人情報保護方針リンク */
.contact-privacy-policy {
  margin-top: 20px;
  text-align: center;
}

.contact-privacy-policy__text {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.contact-privacy-policy__link {
  color: var(--brand-primary);
  text-decoration: underline;
  transition: color 0.3s ease;
}

.contact-privacy-policy__link:hover {
  color: var(--brand-primary-hover);
  text-decoration: none;
}

/* SP用の個人情報保護方針リンクスタイル */
@media (max-width: 768px) {
  .contact-privacy-policy {
    margin-top: 15px;
  }
  
  .contact-privacy-policy__text {
    font-size: 13px;
  }
}

/* SP時のみ改行を表示するクラス */
.sp-only {
  display: none;
}

@media (max-width: 768px) {
  .sp-only {
    display: inline;
  }
}

/* プライバシーポリシーリンク */
.privacy-link {
  color: #000;
  font-size: 14px;
  text-decoration: none;
}

.privacy-link:hover {
  color: #F18F39;
}

/* ========================================
   ドロップダウンメニュー
   ======================================== */

/* ナビゲーションアイテム */
.nav-item {
  position: relative;
}

/* ヘッダー全体を基準にしたドロップダウンメニューの位置調整 */


.nav-item--has-dropdown .nav-link {
  display: block;
  white-space: normal !important;
  line-height: 1.2 !important;
}

/* ナビゲーションリンクの改行を強制 */
.nav-desktop .nav-link {
  white-space: normal !important;
  line-height: 1.2 !important;
}

/* サービスメニューの改行をCSSで実現 */
.nav-item--has-dropdown .nav-link[href*="/service/"]::after {
  content: "料金案内";
  display: block;
  white-space: normal;
}

/* ドロップダウンメニュー */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 20px);
  left: 0;
  right: 0;
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: var(--z-dropdown);
  padding: 15px 15px 0 15px;
}

/* flex items-center gap-8の下から表示 */
.flex.items-center.gap-8 {
  position: relative;
  gap: 2rem !important;
}

.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
}

/* デバッグ用：ドロップダウンメニューを常時表示 - 削除済み */

.nav-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.nav-dropdown-item {
  border-bottom: 1px solid #000000;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

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

.nav-dropdown-link {
  display: block !important;
  padding: 10px 10px 15px 10px !important;
  color: #000000;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  transition: background-color 0.3s ease;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
  box-sizing: border-box;
  position: relative;
  margin: 0 !important;
}

.nav-dropdown-link:hover {
  background-color: transparent;
  color: var(--brand-primary);
}

/* SP用のドロップダウンメニュー（非表示） */
@media (max-width: 768px) {
  .nav-dropdown {
    display: none;
  }
}


.wpcf7 form.sent .wpcf7-response-output {
  border-color: #14C1B6;
  text-align: center;
}

@media (max-width: 767px) {
  /* --- SP版デザイン修正（2025/09/08追加分）ここから --- */

  body {
    font-size: 16px !important;
  }

  .section {
    padding: 60px 0 !important;
  }

  .header-logo {
    width: 280px !important;
    height: 27px !important;
  }

  /* 1. トップエリア：キャッチコピーと「お問い合わせ」ボタンの間の余白 */
  .home .lead-cta {
    margin-top: 20px !important;
    margin-bottom: 0 !important;
  }

  /* 2. トップエリア：写真（ヒーローエリア）と次のセクション間の余白 */
  .home .section--lead {
    padding-bottom: 60px !important;
  }

  /* 「ポイント3つ」セクションの見出しの余白調整 */
  .home .section--points .section-title {
    margin-bottom: 20px !important;
  }

  .pc-only {
    display: none !important;
  }

  /* 「メディア掲載実績」セクションの余白調整 */

  /* 1. 見出しと説明文の間の余白 */
  .home .media-header {
    margin-bottom: 0 !important;
  }

  /* 2. 説明文と最初の動画ブロックの間の余白 */
  .home .media-description {
    margin-bottom: 10px !important;
  }

  /* 3. 各動画ブロック間の余白 */
  .home .media-grid {
    gap: 30px !important;
  }

  /* 4. メディアコンテンツ内のgap統一 */
  .media-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* 「サービスメニュー」セクションの余白調整 */

  /* 1. 見出しと説明文の間の余白 */
  .home .services-header {
    margin-bottom: 20px !important;
  }

  /* 2. 説明文とプラン一覧の間の余白 */
  .home .services-intro {
    margin-bottom: 30px !important;
  }

  /* 3. プラン一覧と「お問い合わせ」ボタンの間の余白 */
  .home .services-grid {
    margin-bottom: 40px !important;
  }

  /* --- フッター全体の調整 --- */

  /* 1. コンテンツエリアとフッターの間の余白 */
  .site-footer {
    padding-top: 60px !important;
  }

  /* 2. 住所と電話番号のフォントサイズ */
  .footer-section--left .footer-contact-info p {
    font-size: 14px !important;
  }

  /* 3. フッター内メニューとSNSアイコンの間の余白 */
  .footer-social--sp {
    margin-top: 40px !important;
  }

  /* 4. コピーライトの行間を詰める */
  .footer-bottom p {
    line-height: 1.6 !important;
  }

  /* サービスセクションの左右padding設定 */
  .section--services .section-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* メディアセクションの上下padding統一 */
  .home .section--media {
    padding: 60px 0 !important;
  }

  /* アバウトセクションのpadding調整（上下のみ0、左右は維持） */
  .home .about-us-content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 「私たちのこと」セクションの詳細な余白調整 */
  .home .about-us-header {
    margin-bottom: 0 !important;
  }

  .home .about-us-text p {
    margin-bottom: 20px !important;
  }

  .home .about-us-cta {
    margin-top: 0 !important;
  }

  /* Instagramセクションのpadding調整（上下とも0） */
  .section--instagram-points {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ポイントセクションのpadding-bottom調整 */
  .section--points {
    padding-bottom: 20px !important;
  }

  /* --- SP版デザイン修正 ここまで --- */

  /* SP時の文字サイズ修正 */
  /* 注釈（14px） */
  .pricing__notes li {
    font-size: 14px;
  }
  
  .notes-content p {
    font-size: 14px;
  }
  
  /* 肩書（12px） */
  .staff-info__title {
    font-size: 12px;
    line-height: 2;
  }
  
  /* センター長の肩書（12px） */
  .director-info__title {
    font-size: 12px;
  }
  
  /* 本文の文字サイズ修正（14px → 16px） */
  /* 私たちのことセクション */
  .home .about-us-text p {
    font-size: 16px;
  }
  
  /* メディア掲載実績セクション */
  .home .media-description {
    font-size: 16px;
  }
  
  /* サービスメニュー・料金案内セクション */
  .home .services-intro-sp {
    font-size: 16px;
  }
  
  /* 「私たちのこと」ページ：セクション見出しの余白調整 */
  .page-about .section-header {
    margin-bottom: 30px !important;
  }
  
  /* 「私たちのこと」ページ：センター長プロフィールの文字スタイル */
  
  /* 1. 肩書きのフォントサイズを12pxに & 2. 肩書きと名前の間の行間を詰める */
  .page-about .director-info__title {
    font-size: 12px !important;
    margin-bottom: 4px !important; /* 元の8pxから詰める */
  }
  
  /* 3. 本文フォントサイズを16pxに統一 */
  .page-about .director-message {
    font-size: 16px !important;
  }
  
  /* 「私たちのこと」ページ：在籍スタッフプロフィールのスタイル調整 */
  .page-about .staff-info__title {
    padding-top: 0 !important;      /* 3. 肩書き上部の余白を削除 */
    font-size: 12px !important;    /* 1. フォントサイズを12pxに */
    margin-bottom: 2px !important; /* 2. 名前との行間を詰める */
  }
  
  /* 「私たちのこと」ページ：データグラフ部分の余白調整 */
  
  /* 1. 円グラフ自体の上下余白 */
  .page-about .data-chart__image {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  
  /* 2 & 3. グラフ下の説明文の上下余白 */
  .page-about .data-chart__description {
    margin-top: 20px !important;
    margin-bottom: 30px !important;
  }
  
  /* 「私たちのこと」ページ：アクセス案内ポップアップのサイズ調整 */
  .access-modal__content {
    max-width: 85vw !important;      /* 横幅を画面横幅の9割に */
    max-height: 70vh !important;     /* 高さを画面縦幅の8割に制限 */
    overflow-y: auto !important;     /* 高さを超えた場合はスクロールさせる */
    box-sizing: border-box !important; /* paddingを含めてサイズ計算する */
  }
  
  .director-content__text {
    padding-top: 0 !important;
  }
  
  .section--director {
    margin-bottom: 60px !important;
  }
  
  .home .point-section {
    padding-top: 1.5rem !important;
  }
  
  .director-content {
    margin-bottom: 90px !important;
  }
  
  /* 「サービス・料金」ページ：ページタイトルのフォントサイズ調整 */
  .page-service .page-title h1 {
    font-size: 24px !important;
  }
  
  /* 「サービス・料金」ページ：特別体験プログラムセクションの余白 */
  
  /* 1. 見出しと説明文の間の余白 */
  .page-service .section--trial-program .section-header {
    margin-bottom: 30px !important;
  }
  
  /* 2. 説明文と「ご利用の流れ」ボタンの間の余白 */
  .page-service .trial-program-description {
    margin-bottom: 30px !important;
  }
  
  /* 「サービス・料金」ページ：「ご利用の流れ」の本文フォントサイズ */
  .page-service .flow__item-description {
    font-size: 15px !important;
  }
  
  /* 「サービス・料金」ページ：「料金」セクションの見出しフォントサイズ */
  .page-service .trial-program-flow .pricing h2 {
    font-size: 16px !important;
  }
  
  /* 「サービス・料金」ページ：料金プラン内の価格表の余白 */
  .page-service .rehab-plan-pricing {
    gap: 10px !important;
  }
  
  /* 「サービス・料金」ページ：言語リハビリプラン本文の行間調整 */
  .page-service #language-rehab .lead-text {
    line-height: 1.8 !important;
  }
  
  /* 「サービス・料金」ページ：プラン詳細レイアウトの統一 */
  
  /* 1. オレンジ色のメッセージブロックのテキストを中央揃えに */
  .page-service .trial-program-flow .flow__item--orange {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .page-service .trial-program-flow .flow__item--orange p {
    margin: 0 !important;
  }
  
  /* 2. 各リハビリプランのヘッダーブロックのテキストを中央揃えに */
  .page-service .rehab-plan-header {
    max-width: var(--container-max-width) !important;
    margin: 0 auto !important;
    background-color: #73BB20 !important;
    padding: 20px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }
  
  .page-service .section {
    padding-top: 0 !important;
  }
  
  .section-header {
    padding-bottom: 30px !important;
  }
  
  body .section--trial-program .trial-program-flow .flow-container {
    margin-top: 30px !important;
  }
  
  .flow__item-description {
    font-size: 15px !important;
  }
  
  .flow__item-title {
    margin-bottom: 0 !important;
  }
  
  .trial-program-flow .pricing h2 {
    font-size: 16px !important;
  }
  
  .rehab-plan-pricing {
    margin-bottom: 15px !important;
  }
  
  .staff-qualification {
    line-height: 1.5 !important;
  }
  
  .section-header {
    padding-bottom: 0 !important;
  }
  
  /* 「お問い合わせ」ページ：タイトルと見出しの調整 */
  
  /* 1. ページタイトルのフォントサイズ */
  .page-contact .page-title h1 {
    font-size: 24px !important;
  }
  
  /* 2. 説明文下の余白 */
  .page-contact .contact-description {
    padding-bottom: 20px !important;
  }
  
  /* 3. 各ブロック見出しを左寄せに */
  .page-contact .section-header__title {
    text-align: left !important;
    width: 100% !important;
  }
  
  /* 「お問い合わせ」ページ：フォームのラベルと入力欄の間隔を詰める */
  .page-contact .form-field {
    gap: 10px !important;
  }

  .form-field.form-field-textarea {
    gap: 15px !important;
  }
  
  /* 「お問い合わせ」ページ：送信ボタン周りの余白調整 */
  
  /* 1. 送信ボタンの上の余白 */
  .page-contact .form-submit {
    margin-top: 30px !important;
  }
  
  /* 2. 個人情報保護方針リンクの下の余白 */
  .page-contact .privacy-policy {
    margin-bottom: 50px !important;
  }
  
  .form-fields {
    margin-bottom: 30px !important;
  }
  
  .textarea-wrapper {
    margin-bottom: 0 !important;
  }
  
  .contact-mail-section {
    padding-bottom: 20px !important;
  }
}