@charset "UTF-8";

/* Twenty Twenty-One は body に直接背景色を塗るため、
   最強の詳細度 (!important) で上書きします。
*/


/* 2. デバッグ用：CSSが読み込まれているか確認するために
   ページの最上部に赤い線を出す（反映されたら消してOK） */
   :root {
       --main-pink: #d88190;
       --dark-pink: #a64d5d;
       --light-pink: #fff1f3;
       --accent-gold: #eeb178;
       --text-main: #4a4a4a;
   }

   .akahane-lp {
       font-family: 'Noto Sans JP', sans-serif;
       color: var(--text-main);
       line-height: 1.8;
   }

   body {
       /* 単語の途中での不自然な改行を防ぎ、日本語の句読点などのルールを守る */
       line-break: strict;
       overflow-wrap: break-word;
       word-break: break-all; /* 基本はこれ */
       background-color: #ffffff !important;
   }

   /* --- 改行・表示の切り替え（ベース設定） --- */
   /* デフォルト（PC）の状態 */
   .pc-only {
       display: inline; /* PCでは表示（改行が有効になる） */
   }
   .sp-only {
       display: none;   /* PCでは隠す */
   }

   /* スマホ（画面幅768px以下）での状態切り替え */
   @media screen and (max-width: 768px) {
       .pc-only {
           display: none;   /* スマホではPC用の改行を無効にする */
       }
       .sp-only {
           display: inline; /* スマホではスマホ用の改行を有効にする */
       }
   }


   /* =========================================
      共通セクションタイトルデザイン
      ========================================= */

      /* --- 【重要】セクション自体の上下の余白も広げる --- */
      /* .features や .doctor-section などの共通クラスに適用 */
      section {
          /* セクション同士がくっつきすぎないよう、上下に120px以上の余白を確保 */
          padding: 120px 0;
      }

   /* --- 共通のパキッと目立つH2デザイン --- */
   .section-title-wrap {
       text-align: center;
       padding: 0 15px;
       /* PC版：110pxから130pxへさらに広げ、強制適用します */
    margin-bottom: 130px !important;
   }

   .common-h2 {
       position: relative;
       display: inline-block;
       font-family: "Yu Mincho", "MS PMincho", serif;
       font-size: 2.2rem;
       font-weight: 700;
       color: #d48a94;
       line-height: 1.4;
       letter-spacing: 0.05em;
       word-break: auto-phrase;
   }

   /* 文字の下のライン */
   .common-h2::after {
       content: "";
       position: absolute;
       /* ラインを文字から少し離して（-15px → -20px）、よりスッキリさせます */
       bottom: -20px;
       left: 50%;
       transform: translateX(-50%);
       width: 60px;
       height: 4px;
       background-color: #bfa47e;
       border-radius: 2px;
   }

   /* タイトルの両サイドに小さなドットを添える（より目立たせる場合） */
   .common-h2::before {
       content: "✦"; /* キラッとしたアイコン */
       position: absolute;
       top: -20px;
       left: 50%;
       transform: translateX(-50%);
       font-size: 1.2rem;
       color: #f2d5d9;
   }

   /* spanを塊として扱う（スマホ改行対策） */
   .common-h2 span {
       display: inline-block;
   }

   /* 特定の見出しの上にさらに余白を追加 */
   .section-title-wrap.mt-extra {
       margin-top: 100px; /* PCでの上の余白：お好みで 80px〜120px 程度で調整してください */
   }

   /* 各セクションのコンテンツ（グリッドや写真エリア）の上の余白も直接広げる */
   .feature-grid,         /* 特長セクションのカード部分 */
  /* .doctor-photo-area,    /* 院長紹介の写真部分 */
   .info-grid,            /* 診療案内・所在地の部分 */
   .doctor-history-box {  /* 経歴ボックス部分 */
       margin-top: 50px !important; /* 見出しのmarginにさらに上乗せして押し下げます */
   }

   .doctor-section .section-title-wrap {
       /* 130pxから80px（お好みで70px〜90px）に縮小 */
       margin-bottom: 60px !important;
   }

   /* --- スマートフォン用調整 --- */
   @media screen and (max-width: 768px) {
     section {
             /* スマホでのセクション間隔 */
             padding: 80px 0;
         }

       .section-title-wrap {
         /* スマホ版：80pxから90pxへ広げ、強制適用します */
      margin-bottom: 90px !important;
       }

       .common-h2 {
           font-size: 1.6rem; /* スマホで適切なサイズに */
       }

       .common-h2::after {
              width: 40px;
              height: 3px;
              /* スマホでのラインの距離も微調整 */
              bottom: -15px;
          }

       .common-h2::before {
           font-size: 1rem;
           top: -15px;
       }

       .section-title-wrap.mt-extra {
           margin-top: 60px; /* スマホでは少し控えめに */
       }
       .feature-grid,
    /* .doctor-photo-area, */
    .info-grid,
    .doctor-history-box {
        margin-top: 30px !important;
    }

    .doctor-section .section-title-wrap {
        /* スマホではさらに詰めて50px〜60px程度に */
        margin-bottom: 40px !important;
    }
   }


   /* =========================================
      CTAセクション全体
      ========================================= */
   /* --- CTAセクション全体 --- */
   /* 1. 共通設定：spanを塊として扱う */
   .cta-area span {
       display: inline-block;
   }

   /* --- CTAセクション全体の調整 --- */
   .cta-area {
       padding: 60px 0 100px;
       background-color: #fff;
       text-align: center;
   }

   .cta-box-premium {
       /* 1. 背景：ただの白ではなく、非常に薄いピンクのグラデーションとドットで高級感を */
       background: radial-gradient(#fffcfd 0%, #fff5f6 100%);
       background-image: radial-gradient(#f2d5d9 0.7px, transparent 0.7px);
       background-size: 14px 14px; /* 繊細なドットパターン */

       /* 2. 枠線：ピンクの太線に、ゴールドの細い内線を重ねたような豪華な装飾 */
       border: 3px solid #f2d5d9;
       outline: 2px solid #bfa47e; /* ゴールドの細線 */
       outline-offset: -10px;      /* 内側に食い込ませる */

       /* 3. 影：ドクター紹介より深く、柔らかく広がる影で「浮いている」感じを出す */
       box-shadow: 0 20px 60px rgba(212, 138, 148, 0.25);

       padding: 60px 20px;
       border-radius: 40px; /* 角をさらに丸くして優しさを */
       max-width: 700px;
       margin: 0 auto;
       position: relative;
       overflow: hidden;
   }

   /* 準備中状態のボタン（グレーダウンさせつつ、存在感は維持） */
   .cta-btn-waiting {
       /* 背景を外枠のピンクに設定 */
       background: #f2d5d9 !important;

       /* 枠線も同系色でなじませる */
       border: 1px solid #e8c6c9 !important;

       box-shadow: none !important;
       cursor: default;
       opacity: 1; /* 沈んで見えないよう不透明度を100%に */
   }

   .cta-btn-waiting .cta-btn-text {
       /* グレーから、可読性の高い濃いめのピンクブラウンへ変更 */
       color: #a86d70 !important;
       font-weight: bold;
   }

   /* 準備中の電話番号テキストも合わせて色調整 */
   .tel-number.is-waiting {
       font-size: 1.5rem !important;
       color: #d48a94 !important; /* 少し明るいピンクにして見やすく */
       letter-spacing: 0.2em;
       font-weight: bold;
       margin: 10px 0 !important;
   }

   /* 上部に小さなリボンのようなアクセント（任意） */
   .cta-box-premium::before {
       /*content: "RESERVATION";*/
       position: absolute;
       top: 20px;
       left: 50%;
       transform: translateX(-50%);
       font-size: 0.7rem;
       letter-spacing: 0.3em;
       color: #bfa47e;
       font-weight: bold;
   }

   /* 「まずはWEB予約から」を控えめに */
   .cta-lead {
       color: #d48a94;
       font-size: 2rem; /* 1.1remから少し縮小 */
       margin-bottom: 20px;
       font-family: "Yu Mincho", serif;
   }

   /* --- WEB予約ボタン --- */
   /*.cta-btn {
       position: relative;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       width: 100%;
       max-width: 400px;
       margin: 0 auto;
       padding: 20px 40px;
       background: linear-gradient(135deg, #d48a94 0%, 100%);
       color: #fff !important;
       text-decoration: none;
       border-radius: 60px;
       box-shadow: 0 10px 20px rgba(212, 138, 148, 0.2);
       overflow: hidden;
       transition: transform 0.3s ease;
   }*/

   .cta-btn:hover {
       transform: translateY(-3px);
   }

   .cta-btn-text {
       font-size: 1.4rem;
       font-weight: bold;
       letter-spacing: 0.05em;
   }

   /* --- お電話セクション（PC版：さらに控えめに修正） --- */
   .cta-tel-wrap {
       margin-top: 40px;
       padding-top: 30px;
       border-top: 1px dashed #f2d5d9;
   }

   .tel-lead {
       font-size: 2rem; /* さらに小さく */
       color: #bfa47e;
       font-weight: bold;
       margin-bottom: 2px;
   }

   .tel-number {
       /* サイズを1.1remまで落とし、ボタン（1.4rem）との主従関係を明確にします */
       font-size: 1.8rem !important;
       font-weight: bold;

       /* 色をピンクから落ち着いたグレー（#666）に変更して目立ちすぎを抑えます */
       color: #cc338c !important;

       text-decoration: none;
       display: block;
       letter-spacing: 0.1em;
       white-space: nowrap;
       margin: 5px 0 !important;
       transition: all 0.3s ease;
   }

   /* マウスを乗せた時だけ、リンクとわかるように色を変える */
   .tel-number:hover {
       color: #d48a94 !important; /* ホバー時のみピンクに */
       opacity: 0.8;
   }

   .tel-time {
       font-size: 0.8rem; /* 時間の案内も一回り小さく */
       color: #999;
   }

   .cta-note {
       margin-top: 30px;
       font-size: 0.8rem;
       color: #999;
   }

   /* spanを塊にする共通設定 */
   .cta-area span {
       display: inline-block;
   }


   /* --- スマホ表示の最終調整 --- */
   @media screen and (max-width: 768px) {
   .cta-box-premium {
           padding: 50px 15px;
           outline-offset: -8px; /* スマホでは内枠を少し外へ */
       }

   .cta-lead {
   font-size: 1.2rem;
   margin-bottom: 15px;
   }

   /* --- WEB予約ボタンの調整 --- */
   .cta-btn {
   width: 100%;
   max-width: none; /* 横幅の制限を解除 */
   padding: 15px 5px; /* 上下を詰め、左右の余白を最小限に */
   }

   .cta-btn-text {
   font-size: 1.15rem; /* 1.2remから微調整 */
   letter-spacing: 0; /* 字間を詰めて1行に収めやすくする */
   white-space: nowrap; /* ボタン内で勝手に改行させない */
   }

   .cta-btn-sub {
   font-size: 0.7rem; /* サブテキストを小さくして余裕を持たせる */
   margin-top: 2px;
   }

   /* 電話番号セクション */
       .cta-tel-wrap {
           margin-top: 30px;
           padding-top: 25px;
           width: 100%; /* 親要素いっぱいに広げる */
       }

      .tel-number {
           /* 1. clampを使わず、確実に小さくなる数値を固定で指定 */
           font-size: 1.5rem !important;

           /* 2. 数字とハイフンの間隔をマイナスにして、物理的な横幅をさらに圧縮 */
           letter-spacing: -0.05em !important;

           /* 3. 絶対に1行で表示し、はみ出させない */
           display: block !important;
           white-space: nowrap !important;
           width: 100% !important;
           text-align: center !important;

           /* 4. 文字の太さを少しだけ細くして、圧迫感を減らす（必要に応じて） */
           font-weight: 700;

           /* 5. 前後の余白 */
           margin: 8px 0 !important;
           line-height: 1 !important;

           /* 見切れ防止：隠さない設定に戻す */
           overflow: visible !important;
       }

   .tel-lead {
   font-size: 1.2rem;
   }

   /* 受付時間も1行に収まるようさらに小さく */
       .tel-time {
           font-size: 0.7rem !important;
           letter-spacing: -0.02em;
           display: block;
           width: 100%;
       }

   /* --- 注釈の調整 --- */
   .cta-note {
   font-size: 0.7rem;
   margin-top: 20px;
   line-height: 1.5;
   }
   }


   /* =========================================
      ヒーローエリア（メインビジュアル）
      ========================================= */

   .hero-section {
       /* PC画像の比率（16:9）を維持。これで画像が絶対に切れません */
       aspect-ratio: 16 / 9;

       /* 背景画像の設定（パスに ../ を追加して確実に読み込む） */
       background-image: url('images/header.jpg');
       background-size: 100% auto;
       background-repeat: no-repeat;

       /* ★ 修正ポイント：無限に大きくならないように最大幅を設定 */
       width: 100%;
       max-width: 1600px; /* お好みの最大幅（例: 1400pxや1600px）で固定 */
       margin-left: auto;
       margin-right: auto;
   }

   /* --- スマートフォン用調整 (767px以下) --- */
   @media (max-width: 767px) {
       .hero-section {
           /* スマホ用画像の比率（9:16など）に変更 */
           aspect-ratio: 9 / 16;

           /* スマホ専用の縦長画像に差し替え（../を追加） */
           background-image: url('images/sp-header.jpg');
           background-size: cover; /* スマホ画面を隙間なく埋める */
           background-position: center center;

           /* スマホでは最大幅の制限を解除して全幅表示にする */
           max-width: 100%;
       }
   }

   /* =========================================
      導入セクション
      ========================================= */
   /* --- 共通設定 --- */
   .container {
       max-width: 1000px;
       margin: 0 auto;
       padding: 0 20px;
   }

   /* --- 新院開院セクション --- */
   .new-open-section {
       padding: 100px 0 60px;
       background: linear-gradient(135deg, #fff5f6 0%, #fff 100%);
       text-align: center;
   }

   .new-open-badge {
       display: inline-block;
       border: 2px solid #bfa47e;
       padding: 10px 30px;
       margin-bottom: 30px;
       position: relative;
   }

   .badge-text {
       display: block;
       font-size: 1.1rem;
       color: #bfa47e;
       letter-spacing: 0.1em;
   }

   .badge-main {
       display: block;
       font-size: 1.8rem;
       font-weight: bold;
       color: #bfa47e;
       letter-spacing: 0.2em;
   }

   .new-open-title {
       font-family: "Yu Mincho", serif;
       font-size: 2.2rem;
       color: #d48a94;
       line-height: 1.6;
       margin-bottom: 30px;
   }

   .feature-tags {
       margin-top: 30px;
   }

   .feature-tags span {
       display: inline-block;
       background: #d48a94;
       color: #fff;
       padding: 5px 20px;
       border-radius: 50px;
       margin: 5px;
       font-size: 0.9rem;
   }


   /* =========================================
      ドクター紹介セクション
      ========================================= */
   /* --- ドクターセクション --- */
   .doctor-section {
       padding-bottom: 100px;
       background-color: #fff;
   }

   .doctor-card {
       background: #fff;
       border-radius: 30px;
       padding: 60px 40px;
       box-shadow: 0 20px 60px rgba(212, 138, 148, 0.1);
       display: flex;
       flex-direction: column;
       align-items: center;
       position: relative;
   }

   .doctor-section .doctor-card {
    padding-top: 40px; /* 60pxから40pxへ。写真がさらに見出しに近づきます */
}

   .doctor-photo-area {
     margin-top: 0 !important;
       margin-bottom: 30px;    /* 下のお名前との間の余白 */
       display: flex;
       justify-content: center;
       width: 100%;
   }

   .photo-circle {
       width: 280px;           /* 写真のサイズ（適宜調整してください） */
       height: 280px;
       border-radius: 50%;
       overflow: hidden;
       border: 8px solid #fff; /* 白い縁取りで清潔感を */
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
       /* margin: 0 auto; は flex-items の場合は不要ですが、念のため */
   }

   .photo-circle img {
       width: 100%;
       height: 100%;
       object-fit: cover;      /* 写真を歪ませずに枠に収める */
   }

   .doctor-info-area {
       display: flex;
       flex-direction: column; /* 上から下に並べる */
       align-items: center;    /* 横方向の中央揃え */
       text-align: center;     /* テキストも中央揃え */
       width: 100%;
   }

   .section-title-wrap {
       margin-bottom: 30px;    /* 写真との間の余白 */
   }

   .section-subtitle {
       color: #bfa47e;
       letter-spacing: 0.2em;
       font-size: 0.9rem;
       margin-bottom: 5px;
   }

   .section-title {
       font-family: "Yu Mincho", serif;
       font-size: 2rem;
       color: #d48a94;
       margin-bottom: 30px;
   }

   .doctor-post {
       color: #bfa47e;
       font-weight: bold;
       margin-bottom: 5px;
   }

   .doctor-name {
       font-family: "Yu Mincho", serif;
       font-size: 2.4rem;
       margin-bottom: 30px;
   }

   .doctor-name small {
       font-size: 1rem;
       color: #999;
   }

   .doctor-intro-text {
       text-align: left;
       line-height: 2;
       color: #555;
       margin-bottom: 40px;
   }

   .doctor-history-box {
       background: #fffcfd;
       border: 1px solid #f2d5d9;
       padding: 40px 50px;    /* 内部の余白を少し広めに設定 */
       border-radius: 20px;

       /* 横幅を広げて固定（PCでは600px、スマホでは100%になるよう設定） */
       max-width: 600px;
       width: 95%;           /* 画面端に密着しないよう少し余裕を持たせる */
       margin: 40px auto 0;  /* 左右オートでボックス自体を中央に配置 */

       text-align: left;     /* リストの内容は読みやすさのため左寄せを維持 */
   }

   .history-title {
       color: #d48a94;
       font-size: 1.3rem;    /* 少し大きくして視認性をアップ */
       margin-bottom: 25px;
       text-align: center;   /* ★ご要望通り中央寄せに修正 */
       border-bottom: 1px solid #f2d5d9;
       padding-bottom: 15px;
       font-family: "Yu Mincho", serif;
       font-weight: bold;
   }

   /* リスト自体の配置調整 */
   .history-list {
       list-style: none;
       padding: 0;
       max-width: 500px;     /* リストが左に寄りすぎないよう幅を制限 */
       margin: 0 auto;       /* 制限したリスト自体をボックス内で中央に置く */
   }

   .history-list li {
       font-size: 0.95rem;
       margin-bottom: 8px;
       position: relative;
       padding-left: 1.5em;
   }

   .history-list li::before {
       content: "✦";
       color: #bfa47e;
       position: absolute;
       left: 0;
   }

   /* レスポンシブ */
   /* --- スマホ表示の最終調整 --- */
   @media screen and (max-width: 768px) {
       .new-open-title { font-size: 1.6rem; }
       .doctor-name { font-size: 1.8rem; }
       .pc-only { display: none; }
       .doctor-card { padding: 40px 15px; } /* 横の余白を少し調整 */

       /* 経歴・資格ボックスの修正 */
       .doctor-history-box {
           padding: 30px 20px;

           /* 幅の再設定：!importantで強制的に画面幅に合わせます */
           width: 100% !important;
           max-width: 100% !important;

           /* 左右の余白をリセットして中央に固定 */
           margin: 30px 0 0 !important;

           /* はみ出し防止の基本設定 */
           box-sizing: border-box;
           left: 0;
       }

       .history-title {
           font-size: 1.15rem;
           margin-bottom: 20px;
       }

       /* 内部リストの幅もスマホ用にリセット（重要！） */
       .history-list {
           max-width: 100% !important; /* PC版の500px制限を解除 */
           margin: 0 !important;       /* 左寄せにして読みやすく */
           text-align: left;
       }

       .doctor-section .doctor-card {
        padding-top: 30px;
    }
   }



   /* =========================================
      futureセクションの設定
      ========================================= */

   /* --- 特長セクション全体のスタイル --- */
   .features {
       padding: 100px 0;
       background-color: #fffafb;
   }

   .container {
       max-width: 1100px;
       margin: 0 auto;
       padding: 0 20px;
   }

   /* --- グリッドレイアウト --- */
   .feature-grid {
       display: grid;
       gap: 40px 30px;
       grid-template-columns: 1fr;
   }

   @media (min-width: 768px) {
       .feature-grid {
           grid-template-columns: repeat(3, 1fr);
           gap: 50px 40px;
       }
   }

   /* --- アイコン画像（大きく表示するための最優先設定） --- */
   .feature-item .icon {
       display: flex;
       justify-content: center;
       align-items: center;
       margin-bottom: 15px;
       width: 100%;
       min-height: 120px; /* アイコンの高さを確保 */
   }

   .feature-item .icon img {
       /* 320x200の画像を最大限活かすため、横幅を大きく指定 */
       width: 100% !important;
       max-width: 240px !important; /* PCでは280pxまで拡大 */
       height: auto !important;
       object-fit: contain;
       image-rendering: -webkit-optimize-contrast;
   }

   /* --- タイトル（H3） --- */
   .feature-item h3 {
       font-size: 1.4rem;
       color: #333;
       margin-bottom: 20px;
       font-weight: 800;
       line-height: 1.5;
       text-align: center;
       word-break: keep-all;
       overflow-wrap: anywhere;
   }

   .feature-item h3 span {
       background: linear-gradient(transparent 60%, #fff3cd 60%);
       box-decoration-break: clone;
       -webkit-box-decoration-break: clone;
       padding: 0 3px;
   }

   .feature-item h3 span span {
       background: none;
       display: inline-block;
   }

   /* --- 説明文（P） --- */
   .feature-item p {
       font-size: 0.95rem;
       line-height: 1.8;
       color: #555;
       text-align: center; /* 中央寄せ */
       max-width: 260px;
       margin: 0 auto;
       word-break: auto-phrase;
       overflow-wrap: break-word;
   }

   /* --- 各ボックスの装飾 --- */
   .feature-item {
       padding: 40px 25px;
       border-radius: 20px;
       text-align: center;
       background-color: #ffffff;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       border: 3px solid transparent;
       position: relative;
   }

   .feature-item:hover {
       transform: translateY(-8px);
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
   }

   /* ラベル共通 */
   .feature-item::before {
       position: absolute;
       top: -14px;
       left: 50%;
       transform: translateX(-50%);
       color: #fff;
       font-size: 14px; /* 少し調整 */
       font-weight: bold;
       padding: 2px 15px;
       border-radius: 10px;
       white-space: nowrap;
       z-index: 10;
   }

   /* 各ボックスの色分け */
   .feature-item:nth-child(1) { border-color: #f8d7da; background-color: #fff9fa; }
   .feature-item:nth-child(1)::before { content: "専門医"; background: #ff8989; }

   .feature-item:nth-child(2) { border-color: #d1ecf1; background-color: #f4faff; }
   .feature-item:nth-child(2)::before { content: "女性技師"; background: #d1ecf1; color: #4a4a4a; }

   .feature-item:nth-child(3), .feature-item.highlight { border-color: #f190a6; background-color: #fff; }
   .feature-item:nth-child(3)::before { content: "当日結果説明"; background: #f190a6; }

   .feature-item:nth-child(4) { border-color: #d4edda; background-color: #f8fff9; }
   .feature-item:nth-child(4)::before { content: "ワンコイン検診"; background: #d4edda; color: #4a4a4a; }

   .feature-item:nth-child(5) { border-color: #fff3cd; background-color: #fffdf5; }
   .feature-item:nth-child(5)::before { content: "便利な立地"; background: #fff3cd; color: #4a4a4a; }

   .feature-item:nth-child(6) { border-color: #e2d9f3; background-color: #f9f7ff; }
   .feature-item:nth-child(6)::before { content: "安心連携"; background: #e2d9f3; color: #4a4a4a; }

   /* --- スマホ表示の最終調整 --- */
   @media (max-width: 767px) {
       .feature-item {
           padding: 45px 15px 30px;
       }

       .feature-item h3 {
           font-size: 1.2rem;
           margin-bottom: 15px;
       }

       .feature-item .icon img {
           max-width: 220px !important; /* スマホでは220px（画像サイズに対して適切） */
       }

       .feature-item p {
           font-size: 0.85rem;
           max-width: 100%;
           padding: 0 5px;
           line-height: 1.6;
       }
   }



   /* =========================================
      健診の流れ：矢印整理
      ========================================= */

   .flow-section {
       background-color: #fdf6f7; /* 非常に淡いピンクグレー */
       padding: 100px 0;
   }

   .flow-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr); /* PC3列 */
       gap: 120px 40px; /* 縦(120px) 横(40px) */
       max-width: 1200px;
       margin: 0 auto;
       padding: 40px 20px;
   }

   .flow-item {
       position: relative;
       overflow: visible;
   }

   /* カードデザイン */
   .flow-card {
       background: #ffffff;
       border-radius: 30px;
       padding: 40px 30px 25px; /* 下部余白をスッキリ */
       /* 影に少しピンクを混ぜると、背景色と馴染んでプロっぽくなります */
       box-shadow: 0 15px 35px rgba(209, 33, 118, 0.08);
       border: none; /* 背景色があるなら枠線はない方がスッキリします */
       height: 100%;
       display: flex;
       flex-direction: column;
       position: relative;
       z-index: 1;
   }

   /* タイトルバッジ：中央寄せ */
   .flow-title-badge {
       position: absolute;
       /* ★ここを変更！数値を小さく（マイナスを大きく）するほど上に行きます */
       top: -34px;
       left: 50%;
       transform: translateX(-50%);
       background: #d12176;
       color: #ffffff;
       font-family: "Noto Serif JP", serif;
       font-weight: 900;
       font-size: 1.1rem;
       padding: 10px 25px;
       border-radius: 12px;
       white-space: nowrap;
       box-shadow: 0 4px 15px rgba(209, 33, 118, 0.2);
       z-index: 10;
       margin: 0;
   }

   .flow-image {
       width: 100%;
       height: 180px;
       border-radius: 20px;
       overflow: hidden;
       margin-top: 15px;
       margin-bottom: 20px;
   }

   .flow-image img { width: 100%; height: 100%; object-fit: cover; }

   .flow-desc {
       font-family: "Noto Serif JP", serif;
       font-size: 0.95rem;
       line-height: 1.8;
       color: #555;
   }

   .time-tag {
       display: inline-block;
       background-color: #fce4ec;
       color: #d12176;
       padding: 2px 12px;
       border-radius: 20px;
       font-size: 0.8rem;
       font-weight: 700;
   }

   /* -----------------------------------------
      PC版：矢印設定（3カラム用）
      ----------------------------------------- */
   @media (min-width: 768px) {
       /* 1, 2, 4, 5番目のアイテムの「右」にだけ表示（不要な場所には出さない） */
       .flow-item:nth-child(1)::after,
       .flow-item:nth-child(2)::after,
       .flow-item:nth-child(4)::after,
       .flow-item:nth-child(5)::after {
           content: "";
           position: absolute;
           top: 50%;
           right: -32px; /* カードの中間に配置 */
           width: 24px;
           height: 24px;
           border-top: 4px solid #d12176;
           border-right: 4px solid #d12176;
           transform: translateY(-50%) rotate(45deg);
           opacity: 0.3;
           z-index: 5;
       }
   }

   /* -----------------------------------------
      スマホ版：矢印設定（1カラム用）
      ----------------------------------------- */
   @media (max-width: 767px) {
       .flow-container {
           grid-template-columns: 1fr;
           /* 次のカードの「バッジ」とぶつからないよう縦余白を160pxに拡大 */
           gap: 160px 0;
           padding-top: 60px;
       }

       /* 6番目（最後）以外のアイテムの「下」に表示 */
       .flow-item:not(:last-child)::after {
           content: "";
           position: absolute;
           /* カードの底から85px下に配置（これで接触を解消） */
           bottom: -95px;
           left: 50%;
           width: 24px;
           height: 24px;
           border-right: 4px solid #d12176;
           border-bottom: 4px solid #d12176;
           transform: translateX(-50%) rotate(45deg);
           opacity: 0.3;
           z-index: 5;
       }

       .flow-card {
           padding: 45px 25px 20px;
       }
   }


   /* =========================================
      FAQセクション
      ========================================= */

      .faq-section {
          padding: 100px 0;
          background-color: #fff;
      }

   .faq-item {
       background: #fff;
       border-radius: 30px;
       padding: 40px;
       margin-bottom: 30px;
       display: flex;
       flex-direction: column; /* デフォルト(スマホ)は縦 */
       align-items: center;
       gap: 20px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
   }

   @media (min-width: 768px) {
       .faq-item {
           flex-direction: row; /* PCは横並び */
           align-items: flex-start;
           padding: 50px;
           gap: 50px;
       }
       /* PCのイラストサイズを少し小さく */
       .faq-image {
           flex: 0 0 140px;
       }
   }

   .faq-image img {
       width: 100%;
       height: auto;
       border-radius: 10px;
   }

   /* QとAの行設定 */
   .faq-row {
       display: flex !important; /* 強制的に表示 */
       align-items: flex-start;
       gap: 15px;
       margin-bottom: 20px;
   }

   /* アイコンが消えないための設定 */
   .icon-q, .icon-a {
       display: flex !important; /* 強制表示 */
       flex-shrink: 0;
       width: 32px;
       height: 32px;
       border-radius: 50%;
       align-items: center;
       justify-content: center;
       font-weight: bold;
       color: #fff;
       font-size: 1rem;
       margin-top: 2px;
   }
   .icon-q { background-color: #d12176; }
   .icon-a { background-color: #e0a36a; }

   /* テキストの整列 */
   .faq-row h3, .answer-text p {
       margin: 0;
       line-height: 1.7;
       text-align: left;
   }

   /* --- Recommend 見出し改行修正 --- */
   .recommend h2 {
       color: #d12176;
       font-size: 1.8rem;
       font-weight: 800;
   }

   .recommend h2 span {
       display: inline-block; /* 単語の途中で改行させない */
   }

   /* --- スマホ専用調整 --- */
   @media (max-width: 767px) {
       /* スマホのイラストをさらに小さく */
       .faq-image {
           width: 70px;
           margin-bottom: 10px;
       }

       .faq-row {
           gap: 10px;
       }

       /* アイコンを少し小さく */
       .icon-q, .icon-a {
           width: 28px;
           height: 28px;
           font-size: 0.9rem;
       }

       .recommend h2 {
           font-size: 1.4rem;
       }
   }

   /* --- セクション間の余白調整（Q&Aからレコメンドへ） --- */
   .faq-section {
       /* PC版：次のセクションとの間に80pxの余白を追加 */
       margin-bottom: 80px;
   }

   /* スマホ表示での調整（767px以下） */
   @media (max-width: 767px) {
       .faq-section {
           /* スマホ版：余白を50pxに調整 */
           margin-bottom: 50px;
       }
   }


   /* =========================================
      Recommendセクション：ドキッとするデザイン
      ========================================= */

   .recommend {
       padding: 80px 0;
       background-color: #fffafb;
       margin-bottom: 80px;
   }

   .recommend-box {
       background: #fff;
       border: 3px dashed #d12176; /* 警告をイメージさせる点線 */
       padding: 60px 40px;
       border-radius: 40px;
       text-align: center;
       position: relative;
   }

   .alert-badge {
       position: absolute;
       top: -20px;
       left: 50%;
       transform: translateX(-50%);
       background: #d12176;
       color: #fff;
       padding: 5px 30px;
       border-radius: 50px;
       font-weight: bold;
   }

   .recommend h2 {
       color: #d12176;
       font-size: 2rem;
       font-weight: 800;
       margin-bottom: 30px;
   }

   .check-list {
       display: inline-block;
       text-align: left;
       margin-bottom: 30px;
       list-style: none;
       padding: 0;
   }

   .check-list li {
       font-size: 1.1rem;
       margin-bottom: 15px;
       padding-left: 30px;
       position: relative;
   }

   .check-list li::before {
       content: "□";
       position: absolute;
       left: 0;
       color: #d12176;
       font-weight: bold;
   }

   /* --- Recommend 見出しのスマホ改行修正 --- */
   @media (max-width: 767px) {
       .recommend {
           /* スマホ版：余白を50pxに調整 */
           margin-bottom: 50px;
       }
   }

   @media (max-width: 767px) {
       .recommend h2 {
           font-size: 1.3rem;    /* スマホで1行に収まりやすいサイズに調整 */
           line-height: 1.6;     /* 行間を少し広げて読みやすく */
           padding: 0 10px;      /* 左右に少しゆとりを持たせる */
       }

       .recommend h2 span {
           display: block;       /* スパンごとに強制改行（1つ目のスパンで1行、2つ目で1行） */
           width: 100%;          /* 横幅いっぱい使う */
       }
   }


   /* --- Google Fontsの読み込み（HTMLのheadに入れるのがベストですが、CSSでも可能） --- */
   @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&display=swap');


   /* =========================================
      Final CTA セクション
      ========================================= */

      /* --- セクション全体の背景設定 --- */
      .final-cta {
          background-image: url('images/final-cta.jpg');
          background-size: cover;
          background-position: center center;

          /* PCではパララックス（固定）を有効にする */
          background-attachment: fixed;

          position: relative;
          width: 100%;
          margin-bottom: 80px;
          padding: 0;
          overflow: hidden;
      }

/* --- 白透過のオーバーレイ（画像全体を覆う） --- */
.cta-overlay {
    /* 背景色を広げる */
    background-color: rgba(255, 255, 255, 0.75);

    /* 100%の幅と高さを確保 */
    width: 100%;
    height: 100%;

    /* コンテンツの上下余白（ここでセクションの高さを出します） */
    padding: 120px 20px;

    color: #333333;
    text-align: center;

    /* 念のためブロック要素として認識させる */
    display: block;
}

   /* --- メインタイトル --- */
   .cta-title {
       font-family: "Noto Serif JP", serif;
       font-size: 2.8rem;
       font-weight: 700;
       color: #333333; /* 黒 */
       letter-spacing: 0.15em;
       margin-bottom: 20px;
   }

   /* --- サブメッセージ --- */
   .cta-message {
       font-size: 1.2rem;
       color: #333333; /* 少し柔らかい黒 */
       margin-bottom: 40px;
   }

   /* --- 電話番号：最優先の目立ち要素 --- */
   .cta-tel {
       display: flex;
       align-items: center;
       justify-content: center;
       text-decoration: none;
       color: #d12176; /* 明るいピンク */
       margin-bottom: 25px !important;
   }

   .tel-label {
       font-size: 1.2rem;
       font-weight: bold;
       border: 2px solid #d12176;
       color: #d12176; /* 明るいピンク */
       padding: 2px 12px;
       border-radius: 4px;
       margin-right: 15px;
   }

   .tel-number {
       font-size: 5.5rem;
       font-weight: 900;
       line-height: 1;
          color: #d12176; /* 電話番号もピンクに */
       font-family: 'Inter', sans-serif;
   }

   /* --- 予約案内テキスト（カプセルデザイン） --- */
   .cta-sub {
       display: inline-block;
       font-size: 1.1rem;
       font-weight: bold;
       color: #333333; /* 黒 */
       /* 背景はごく薄いピンクかグレーにして読みやすく */
       background: rgba(209, 33, 118, 0.05);
       padding: 15px 40px;
       border-radius: 50px;
       /* 枠線をうっすらピンクに */
       border: 1px solid rgba(209, 33, 118, 0.2);
   }

   /* --- スマホ用調整 --- */
   @media (max-width: 767px) {
       .tel-number {
           font-size: 3.5rem;
       }
       .cta-title {
           font-size: 1.8rem;
       }
   }

   /* --- Final CTA セクション全体のレイアウト（PC・スマホ共通） --- */
   .final-cta .container {
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
   }

   /* --- CTAボタンのデザイン --- */
   .cta-btn {
       display: inline-block;
       background-color: #d12176; /* 明るいピンク（チェックリスト等と統一） */
       color: #ffffff !important; /* 文字は白 */
       font-size: 1.2rem;
       font-weight: bold;
       text-decoration: none;
       padding: 20px 60px;        /* ボタンの大きさを確保 */
       border-radius: 50px;       /* 角丸のカプセル型 */
       box-shadow: 0 10px 25px rgba(209, 33, 118, 0.3); /* ピンク系の柔らかい影 */
       transition: all 0.3s ease;
       line-height: 1.6;
       margin-top: 20px;
       border: 2px solid #d12176;
   }

   /* ボタンにマウスを乗せた時の反応 */
   .cta-btn:hover {
       background-color: #ffffff; /* 白背景に反転 */
       color: #d12176 !important; /* 文字をピンクに */
       transform: translateY(-3px); /* 少し浮き上がる */
       box-shadow: 0 15px 30px rgba(209, 33, 118, 0.4);
   }

   /* --- スマートフォン用調整 (iPhone SE等) --- */
   @media (max-width: 767px) {
       .cta-btn {
           font-size: 1rem;      /* スマホでは文字を少し小さく */
           padding: 15px 25px;   /* ボタンを画面幅に合わせる */
           width: 90%;           /* 横幅いっぱい */
           box-sizing: border-box;
       }

       .tel-number {
           font-size: 3.2rem;    /* スマホでの番号サイズ調整 */
       }

       .sp-only-br {
           display: block;       /* スマホ専用改行を有効に */
       }
   }

   /* --- メインタイトル（上品な明朝体） --- */
   .cta-title {
       font-family: "Noto Serif JP", serif; /* Google Fontsの明朝体 */
       font-size: 2.8rem;
       font-weight: 700;
       letter-spacing: 0.15em; /* ゆったりとした間隔 */
       margin-bottom: 20px;
       line-height: 1.4;
   }

   /* タイトル内の改行用span（PCでは横並び） */
   .cta-title span {
       display: inline-block;
   }

   /* サブメッセージ */
   .cta-message {
       font-size: 1.2rem;
       font-weight: 500;
       margin-bottom: 40px;
       letter-spacing: 0.05em;
       opacity: 0.95;
   }

   .cta-tel:hover {
       transform: scale(1.02); /* ホバー時に少しだけ大きくなる */
   }

   /* TELラベル */
   .tel-label {
       font-size: 1.4rem;
       font-weight: bold;
       border: 2px solid #d12176; /* 白い枠線 */
       padding: 4px 15px;
       border-radius: 4px;
       margin-right: 20px;
       letter-spacing: 0.05em;
   }

   /* 電話番号（特大・ゴシック体） */
   .tel-number {
       font-size: 5.5rem;
       font-weight: 900;
       font-family: 'Inter', Helvetica, Arial, sans-serif; /* 数字は力強いゴシックで */
       line-height: 1;
       letter-spacing: 0.02em;
   }

   /* --- 予約案内テキスト（カプセル型デザイン） --- */
   .cta-sub {
       display: inline-block;
       font-size: 1.1rem;
       font-weight: bold;
       letter-spacing: 0.1em;
       line-height: 1.8;
       /* 背景を少しだけ白く光らせて目立たせる */
       background: rgba(255, 255, 255, 0.2);
       padding: 15px 40px;
       border-radius: 50px;
       border: 1px solid rgba(255, 255, 255, 0.4);
   }

   /* --- 案内テキスト（pタグ） --- */
   .cta-guidance {
       font-size: 1.15rem;
       font-weight: bold;
       color: #444444;
       line-height: 1.7;
       margin-bottom: 25px; /* ボタンとの隙間 */
   }

   /* --- WEB予約ボタン --- */
   .cta-btn {
       display: inline-block;
       background-color: #d12176; /* ピンク */
       color: #ffffff !important;
       font-size: 1.4rem;
       font-weight: bold;
       text-decoration: none;
       padding: 18px 80px;        /* 横幅をしっかり取って目立たせる */
       border-radius: 50px;
       box-shadow: 0 10px 25px rgba(209, 33, 118, 0.2);
       transition: all 0.3s ease;
       border: 2px solid #d12176;
   }

   /* ボタンホバー時：反転アニメーション */
   .cta-btn:hover {
       background-color: #ffffff;
       color: #d12176 !important;
       transform: translateY(-3px);
       box-shadow: 0 15px 30px rgba(209, 33, 118, 0.3);
   }

   /* =========================================
      スマートフォン表示調整 (max-width: 767px)
      ========================================= */
   @media (max-width: 767px) {
     .final-cta {
         margin-bottom: 50px;

         /* 【重要】スマホでは「固定」を解除して「通常スクロール」に戻す */
         /* これにより拡大バグが直り、画像が正しく表示されます */
         background-attachment: scroll !important;

         /* スマホの画面比率に合わせて、画像の中央が見えるように固定 */
         background-position: center center;

         /* 背景が拡大されすぎる場合は、ここを調節します */
         background-size: cover;
     }

     .cta-overlay {
         padding: 60px 15px; /* スマホでは上下の余白を少し詰めると収まりが良いです */
     }

       /* タイトル */
       .cta-title {
           font-size: 1.8rem;
           letter-spacing: 0.1em;
       }

       /* スマホでは強制的に改行させる */
       .cta-title span {
           display: block;
       }

       /* メッセージのスマホ用改行を有効化 */
       .sp-only-br {
           display: block;
       }

       /* 電話番号エリア */
       .cta-tel {
           flex-direction: column; /* 縦並び */
           gap: 10px;
           margin-bottom: 30px;
       }

       .tel-label {
           margin-right: 0;
           font-size: 1.2rem;
           padding: 4px 20px;
       }

       .tel-number {
           font-size: 3.2rem; /* スマホに収まるサイズ */
       }

       /* 予約案内テキスト */
       .cta-sub {
           font-size: 1rem;
           padding: 12px 20px;
           width: 90%; /* 横幅を広げて安定させる */
           box-sizing: border-box;
       }

       .cta-guidance {
           font-size: 1rem;
       }

       .cta-btn {
           font-size: 1.1rem;
           padding: 15px 30px;
           width: 90%; /* スマホでは横幅いっぱいに */
           box-sizing: border-box;
       }

       .sp-only-br {
           display: block;
       }

   /* PCではスマホ用改行を隠す */
   .sp-only-br {
       display: none;
   }
   }



   /* =========================================
      アクセス & 診療案内（3カラムグリッド）
      ========================================= */

      .access-and-info {
          padding: 100px 0;
          background-color: #fff;
      }

   /* --- アクセス情報のグリッド全体 --- */
   .info-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 30px;
       margin-bottom: 80px;
   }

   /* --- カード自体の装飾（華やかVer.） --- */
   .info-card {
       background: #fff;
       padding: 50px 30px 40px;
       border-radius: 30px; /* 角をさらに丸く */
       text-align: center;
       box-shadow: 0 20px 40px rgba(168, 109, 112, 0.1); /* ピンクブラウン系の柔らかな影 */
       transition: transform 0.3s ease;
       border: 1px solid #f1d7d9;
       position: relative;
   }

   .info-card:hover {
       transform: translateY(-10px); /* ホバーで少し浮き上がる */
   }

   /* 上部にアクセントラインを追加 */
   .schedule-box { border-top: 6px solid #a86d70; }
   .preparation-box { border-top: 6px solid #eeb178; } /* ゴールド系 */
   .clinic-detail-box { border-top: 6px solid #d6979a; }

   /* --- 画像サイズ（アイコンより大きく） --- */
   .card-image {
       width: 100px;
       height: 100px;
       margin: 0 auto 25px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .card-image img {
       max-width: 100%;
       height: auto;
       object-fit: contain;
   }

   /* --- 見出しの装飾（より見出しっぽく） --- */
   .card-title {
       font-size: 1.4rem;
       font-weight: 800;
       color: #a86d70;
       margin-bottom: 25px;
       padding: 8px 15px;
       background-color: #fdf0f1; /* 薄いピンクの背景 */
       border-radius: 10px;
       display: inline-block; /* 文字幅に合わせる */
   }

   /* テキストの調整 */
   .info-card p {
       font-size: 0.95rem;
       line-height: 1.8;
       color: #555;
       text-align: left; /* 内容は左寄せで見やすく */
   }

   .access-text {
       margin-top: 15px;
       padding-top: 15px;
       border-top: 1px dotted #f1d7d9;
      /*  font-weight: bold; */
   }

   .schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    /* テーブル自体の外枠を完全に消す */
    border: none;
}

.schedule-table th,
.schedule-table td {
 /* 上下左右の線を一度リセットし、下の線（横線）だけを引く */
 border: none;
 border-bottom: 1px solid #eee; /* 線の色はお好みで（#eee は薄いグレー） */
 padding: 12px 5px; /* 余白を少し広げると、より見やすくなります */
 text-align: center;
}

/* 一番上の見出し行（th）の線だけ少し色を濃くすると、より「パキッと」します（任意） */
.schedule-table th {
 border-bottom: 2px solid #f1d7d9; /* 医院のテーマカラーに合わせる */
 color: #a86d70;
 font-weight: bold;
}

   /* --- スマホ表示調整 --- */
   @media (max-width: 991px) {
       .info-grid {
           grid-template-columns: 1fr !important; /* 1列に固定 */
           gap: 40px;

           /* --- 中央寄せのための重要な修正 --- */
           max-width: 500px;
           width: 92%;           /* 左右に少し余裕を持たせるサイズ */
           margin-left: auto !important;  /* 左右オートで中央へ */
           margin-right: auto !important; /* 左右オートで中央へ */

           margin-bottom: 60px;
       }
   }

   .info-card p {
           /* もし「やっぱり左寄せがいい」という場合は、ここを text-align: left; に戻してください */
           text-align: center;
           max-width: 100%;
           margin: 0 auto;
       }

       /* 表（診療時間）は横幅いっぱいに */
       .schedule-table {
           margin: 0 auto 15px;
       }

       .card-image {
           width: 80px;
           height: 80px;
       }

   /* --- アクセスセクションの余白調整 --- */
   .access-and-info {
       padding-top: 20px;
       /* フッターとの間にしっかりとした余白を確保 */
       padding-bottom: 80px;
   }

   /* info-gridとマップの間の余白 */
   .info-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 30px;
       margin-bottom: 80px; /* ★マップとの間のちょうど良い余白 */
   }

   /* マップエリア */
   .map-area {
       width: 100%;
       margin-bottom: 0;
   }

   /* --- スマホ表示調整 (991px以下) --- */
   @media (max-width: 991px) {
       .info-grid {
           grid-template-columns: 1fr !important; /* スマホで1列 */
           gap: 40px; /* スマホでは間隔を少し広めに */

           /* スマホでの最大幅設定 */
           max-width: 500px;
           width: 90%;
           margin-bottom: 60px; /* スマホでのマップとの間隔 */
       }

       .info-card {
           padding: 40px 25px;
       }

       /* スマホでも画像サイズはそのまま維持（80px） */
   }


   /* =========================================
         フッター：中央ロゴ ＋ 2院横並び（高精細対応）
      ========================================= */

   .footer {
       background-color: #fdf6f7;
       border-top: 2px solid #f1d7d9;
       padding: 80px 0 40px;
       color: #a86d70;
   }

   /* フッターのメインエリア（垂直に並べる） */
   .footer-main {
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       margin-bottom: 50px; /* コピーライトとの間隔 */
   }

   /* --- ロゴ画像の設定（ここが重要！） --- */
   .footer-logo-img {
       margin-bottom: 50px; /* 下の院情報との間隔 */
       width: 100%;
       display: flex;
       justify-content: center;
   }

   .footer-logo-img img {
       /* 1200pxあっても、ここで表示サイズを「パキッと」固定します */
       max-width: 300px !important;
       width: 100% !important;
       height: auto !important; /* WPの縦幅自動指定を強制解除 */
       display: block;
   }

   /* --- 医院情報の横並び設定（PC） --- */
   .footer-clinic-flex {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* ボックス間のマージン：50pxから120pxへ大幅にアップ */
    gap: 120px;
    /* 間隔を広げた分、全体の最大幅も1200px程度に広げてゆとりを持たせます */
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
}

.footer-address {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.8;
    /* 念のため、1行強制の設定を「解除」します */
    white-space: normal !important;
}

   .footer-address h2 {
       font-size: 1.25rem;
       font-weight: bold;
       margin-bottom: 15px;
       color: #d48a94; /* 院名を少し明るく */
       display: block;
   }

   .footer-tel {
       font-size: 1.4rem;
       font-weight: bold;
       margin-top: 15px;
       color: #a86d70;
   }

   /* 【重要】PCで住所を1行に強制する設定 */
   .footer-address p {
       /* PCでは自動改行をさせず、1行に突き通します */
       white-space: nowrap;
   }

   /* スマホ用改行タグはPCでは隠す（既存のまま） */
   .sp-br {
       display: none;
   }

   /* --- コピーライト --- */
   .copyright {
       border-top: 1px solid rgba(168, 109, 112, 0.1);
       padding-top: 30px;
       width: 100%;
       text-align: center;
       font-size: 0.85rem;
       color: #bfa47e;
   }

   /* =========================================
         スマートフォン用調整 (991px以下)
      ========================================= */
   @media (max-width: 991px) {
       .footer {
           padding: 60px 0 30px;
       }

       .footer-logo-img {
           margin-bottom: 40px;
       }

       .footer-logo-img img {
           max-width: 240px !important; /* スマホでは少し小さめに */
       }

       /* スマホでは2つの院を縦並びに切り替える */
       .footer-clinic-flex {
         flex-direction: column;
         align-items: center;
         gap: 50px;
     }

     .footer-address p {
         white-space: normal; /* スマホでは自動改行を許可 */
         text-align: center;
     }

     /* 【ここがポイント】スマホの時だけ、ビル名の前で改行させる */
     .sp-br {
         display: block;
     }

       .footer-tel {
           font-size: 1.25rem;
       }
   }