/*
==========================================================================
【ファイル名】style.css
【役割】ウェブサイト全体の「見た目（デザイン）」を定義するファイルです。
  文字の大きさ、色、配置、余白、背景色など全てのデザインをここで指定します。
【修正方法】テキストエディタで開いて値を変更し、保存後ブラウザで確認します。
  ブラウザのF12 → Elements → Styles で、リアルタイムで値を試すこともできます。
==========================================================================
*/

/* ★1行目：文字コードの指定 */
/* このCSSファイルがUTF-8（日本語対応の文字コード）で書かれていることを宣言します */
/* CSSファイルの一番最初に書く必要があります */
/* 【修正】この行は変更不要です */
@charset "utf-8";


/* =====================================================
   ★ RESET CSS（リセットCSS）
   =====================================================
   【目的】ブラウザごとに異なるデフォルトのデザインを「ゼロ」に戻す部分です。

   ブラウザ（Chrome, Safari, Firefox等）はそれぞれ独自のデフォルトスタイルを持っています。
   例えば、<h1>のフォントサイズ、<ul>の点（●）、<p>の余白などが異なります。
   これをリセットすることで、どのブラウザでも同じ見た目からスタートできます。

   【修正】基本的にこの部分は変更しません。
*/

/* ★ HTML5の新しい要素をブロック要素として表示する指定 */
/* 古いブラウザ（IE8以前）はHTML5の<section>や<header>等を認識しないため、 */
/* 明示的に display:block（ブロック要素として表示）と指定しています */
/* ブロック要素 ＝ 横幅いっぱいに広がり、前後に改行が入る要素のことです */
article,aside,details,figcaption,figure,footer,header,hgroup,img,menu,nav,section{
  display:block;
}

/* ★ ほぼ全ての HTML要素のmargin, padding, border, fontをリセット */
/* margin:0   → 外側の余白をゼロに（要素の外側のスペースを消す） */
/* padding:0  → 内側の余白をゼロに（要素の内側のスペースを消す） */
/* border:0   → 枠線をなしに */
/* font:inherit → フォント設定を親要素から引き継ぐ（ブラウザ独自の設定を無効化） */
/* vertical-align:baseline → 文字の位置を基準線（ベースライン）に揃える */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,
canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,
fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,
html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,
p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,
table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{
  margin:0;       /* 外側の余白を0に */
  padding:0;      /* 内側の余白を0に */
  border:0;       /* 枠線をなしに */
  font:inherit;   /* フォントを親要素から継承 */
  vertical-align:baseline; /* 文字の縦位置をベースラインに */
}

/* ★ bodyの行間リセット */
/* line-height:1 → 行の高さを文字サイズと同じに（余分な行間をなくす） */
/* 後で改めて適切な行間を設定します */
body{
  line-height:1;
}

/* ★ リストのスタイルをリセット */
/* <ol>（順序付きリスト）と<ul>（箇条書きリスト）の先頭の記号（●や1.2.3.）を消します */
/* デザインで独自のリストスタイルを作りたいときに邪魔にならないようにするためです */
ol,ul{
  list-style:none;
}

/* ★ 引用符のリセット */
/* <blockquote>と<q>（引用タグ）のデフォルトの引用符（「」や""）を消します */
blockquote,q{
  quotes:none;
}
blockquote:after,blockquote:before,q:after,q:before{
  content:'';
  content:none;
}

/* ★ テーブル（表）のリセット */
/* border-collapse:collapse → セル間の隙間をなくし、枠線を1本に結合する */
/* border-spacing:0 → セル間のスペースをゼロにする */
table{
  border-collapse:collapse;
  border-spacing:0;
}

/* ★ 画像の基本設定（リセット部分） */
/* margin:0 auto → 左右の余白を自動にして中央寄せにする */
/* padding:0 → 内側の余白をゼロに */
/* max-width:100% → 画像が親要素の幅を超えないようにする（はみ出し防止） */
img{
  margin:0 auto;
  padding:0;
  max-width:100%;
}

/* ============================================================
   ■ リセットCSS（ブラウザごとの表示差をなくす基本設定）
============================================================ */
*, *::before, *::after {
  margin: 0;               /* すべての要素の外側余白をゼロに */
  padding: 0;              /* すべての要素の内側余白をゼロに */
  box-sizing: border-box;  /* width に padding と border を含める */
}

/* ★ 全要素のbox-sizing設定 */
/* * は「全ての要素」を意味するセレクタ（ユニバーサルセレクタ）です */
/* box-sizing: border-box → 要素の幅（width）に余白(padding)と枠線(border)を含める */
/*   通常：width:100px + padding:10px = 実際の幅120px（はみ出る！） */
/*   border-box：width:100px に padding:10px を含む = 実際の幅100px（はみ出ない！） */
/* -webkit- と -moz- は古いブラウザ用のプレフィックス（接頭辞）です */
/* 【修正】この設定は非常に便利なので、変更しないのが推奨です */
*{
  -webkit-box-sizing: border-box; /* Chrome/Safari古いバージョン用 */
  -moz-box-sizing: border-box;    /* Firefox古いバージョン用 */
  box-sizing: border-box;          /* 標準の書き方 */
}

/* ============================================================
   ■ カラー設定（ここを変えるとサイト全体の色が変わります）
   - 参考画像のピンク系カラーに合わせています
   - 色を変えたい場合は、この :root 内の値だけを変更してください
============================================================ */
:root {
  --pink-main: #E85B81;       /* メインのピンク色（見出し、ボタンなど） */
  --pink-light: #F297AE;      /* 薄いピンク（ホバー時、アクセント） */
  --pink-pale: #FFF0F3;       /* 極薄ピンク（セクション背景） */
  --pink-circle: #F2A0B3;     /* 診療表の●マークの色 */
  --pink-bg: #FCF4F6;         /* セクション背景のうすいピンク */
  --white: #FFFFFF;           /* 白色 */
  --text-dark: #333333;       /* 濃いグレー（本文テキスト） */
  --text-mid: #555555;        /* 中間グレー（補足テキスト） */
  --text-light: #888888;      /* 薄いグレー（注釈テキスト） */
  --border-light: #F0E0E4;    /* うすいピンクのボーダー線 */
  --shadow-soft: rgba(232, 91, 129, 0.08); /* やわらかいピンクの影 */
}

/* =====================================================
   ★ Basic（基本スタイル）
   =====================================================
   ページ全体に適用される基本的なデザイン設定です。
   文字の大きさ、フォント、色、行間などをここで決めます。
*/

/* ★ html要素のフォントサイズ設定 */
/* font-size:62.5% は「rem単位を使いやすくする」テクニックです */
/*   ブラウザのデフォルトフォントサイズは16px */
/*   16px × 62.5% = 10px → これで 1rem = 10px になります */
/*   例: 1.6rem = 16px、2.0rem = 20px と計算しやすい！ */
/* background: #fff → 背景色を白に（#fff は白色のカラーコード） */
/* 【修正】背景色を変更したい場合は #fff の値を変更してください */
/*   例: #f5f5f5（薄いグレー）、#000（黒） */
html{
  font-size:62.5%;    /* remの基準値を10pxにする */
  background: #fff;   /* 背景色を白に */
  scroll-behavior: smooth;   /* ページ内リンクでスムーズにスクロール */
}

/* ★ body（ページ全体）の基本スタイル */
/* width: 100%           → 幅を画面いっぱいに */
/* font-size: 2.2rem     → 文字サイズ 22px（2.2 × 10px）*/
/* color: #222           → 文字色を濃いグレーに（真っ黒より目に優しい） */
/* line-height: 1.7      → 行間を文字サイズの1.7倍に（読みやすい行間） */
/* font-feature-settings: 'palt' 1 → 文字間の詰め（プロポーショナル）を有効にする */
/*   日本語フォントで文字間が均等になり、美しく見えます */
/* font-family           → 使用するフォントの優先順位リスト */
/*   左から順に、そのフォントがユーザーのPCにあれば使う、なければ次を試す */
/*   最後の sans-serif は「ゴシック系のなんでもいいフォント」という意味 */
/* font-weight: 500      → 文字の太さ（400=普通、500=少し太め、700=太字） */
/* 【修正】文字サイズを変えたい → font-size の値を変更（例: 1.6rem = 16px） */
/* 【修正】文字色を変えたい → color の値を変更（例: #333, #000） */
/* 【修正】行間を変えたい → line-height の値を変更（例: 1.5, 2.0） */
body {
  width: 100%;
  font-size: 2.2rem;
  color: #222;
  line-height: 1.7;
  -webkit-font-feature-settings: 'palt' 1; /* Chrome/Safari古いバージョン用 */
  font-feature-settings: 'palt' 1;          /* 文字間の詰めを有効化 */
  font-family:
    -apple-system,                  /* macOS/iOS のシステムフォント */
    BlinkMacSystemFont,             /* macOS Chrome のシステムフォント */
    "Helvetica Neue",               /* macOS の標準英語フォント */
    "Yu Gothic",                    /* Windows の游ゴシック（英語名） */
    YuGothic,                       /* macOS の游ゴシック */
    "ヒラギノ角ゴ ProN",              /* macOS のヒラギノフォント */
    Hiragino Kaku Gothic ProN,      /* macOS のヒラギノフォント（英語名） */
    Arial,                          /* Windows/Mac 共通の英語フォント */
    "メイリオ",                      /* Windows のメイリオフォント */
    Meiryo,                         /* メイリオ（英語名） */
    sans-serif,                     /* 上記が全てない場合のゴシック系フォント */
    'Zen Maru Gothic',              /* 丸ゴシックフォント */
    'Noto Sans JP', sans-serif;     /* 丸ゴシックフォント */
  font-weight: 500;
}

/* ★ メインコンテナの中央寄せ */
/* .main クラスが付いた要素を中央寄せにします */
/* margin: 0 auto → 上下の余白0、左右の余白を自動（=中央寄せ） */
.main {
  margin: 0 auto;
}


/* =====================================================
   ★ 電話番号のリンク無効化（PC用）
   =====================================================
   スマートフォンでは電話番号をタップして電話できるのは便利ですが、
   PCでは電話できないのでリンクを無効にします。
*/

/* ★ a[href^="tel:"] → href属性が "tel:" で始まるリンク（電話番号リンク）を選択 */
/* pointer-events: none → クリックできないようにする */
/* text-decoration: none → 下線を消す */
/* color: #666 → 文字色をグレーに（リンクっぽく見せない） */
/* 【修正】スマホでは後のメディアクエリでこれを上書きしてリンクを有効にします */
a[href^="tel:"] {
  pointer-events: none;     /* クリック無効 */
  text-decoration: none;    /* 下線なし */
  color: inherit;           /* 親要素の色を継承（ボタン内では白色になる） */
}


/* =====================================================
   ★ Clearfix（クリアフィックス）
   =====================================================
   float（浮動配置）を使った要素の親要素が、高さを失わないようにする
   テクニックです。floatを使う場合に必要です。

   【問題】float した子要素は親の高さに含まれなくなる
   【解決】clearfix を親に付けると、親が子の高さを認識する

   使い方：<div class="clearfix">floatした要素</div>
*/
.clearfix::before,
.clearfix::after{
  content:"";       /* 空のコンテンツを生成 */
  display:table;    /* テーブル表示にする（floatをクリアするために必要） */
}
.clearfix::after{
  clear:both;       /* 左右両方のfloatをクリア（解除）する */
}
.clearfix{
  *zoom:1;          /* IE6/7用のハック（古いIE対策。現在はほぼ不要） */
}


/* =====================================================
   ★ Float（フロート）- 画像の配置
   =====================================================
   画像を左や右に寄せて、テキストを回り込ませるための設定です。

   例: .img_left → 画像を左に置いて、文章が右側に回り込む
       .img_right → 画像を右に置いて、文章が左側に回り込む
*/

/* ★ 画像の余白リセット */
img {
  margin: 0;
}

/* ★ 画像を右に配置するクラス */
/* float:right → 要素を右に浮かせる */
/* padding:0 0 0 2rem → 左側に2remの余白（テキストとの間隔） */
/*   padding の4つの値: 上 右 下 左（時計回り） */
/* 【修正】余白を変えたい場合は 2rem の値を変更 */
.img_right{
  float:right;          /* 右寄せ */
  padding:0 0 0 2rem;   /* 左側に余白 */
}

/* ★ 画像を左に配置するクラス */
/* float:left → 要素を左に浮かせる */
/* padding: 0 2rem 2rem 0 → 右と下に余白 */
/* 【修正】余白を変えたい場合は各値を変更 */
.img_left{
  float: left;              /* 左寄せ */
  padding: 0 2rem 2rem 0;   /* 右に2rem、下に2remの余白 */
}


/* =====================================================
   ★ PC・SP（スマホ）表示の切り替え
   =====================================================
   PCでだけ見せたい要素には class="pc" を、
   スマホでだけ見せたい要素には class="sp" を付けます。

   PCでは .pc を表示、.sp を非表示にし、
   スマホでは逆にします（後述の @media で切り替えます）。
*/

/* ★ PC表示用：表示する */
.pc{
  display:block;   /* 表示する */
}

/* ★ スマホ表示用：非表示にする（PC閲覧時は隠す） */
.sp{
  display:none;    /* 非表示にする */
}


/* =====================================================
   ★ Font（フォント関連のユーティリティクラス）
   =====================================================
   HTMLの中で <span class="u"> のように使うことで、
   文字の一部分だけにスタイルを適用できます。
   「ユーティリティクラス」＝よく使う小さなスタイルをクラスにしたもの
*/

/* ★ 下線を引くクラス */
/* text-decoration:underline → テキストに下線を引く */
/* 使い方: <span class="u">この部分に下線</span> */
.u{
  text-decoration:underline;
}

/* ★ 太字にするクラス */
/* font-weight:bold → テキストを太字にする */
/* 使い方: <span class="b">この部分を太字</span> */
.b{
  font-weight:bold;
}

/* ★ 文字色を変えるクラス群 */
/* color の値でテキストの色を変更します */
/* 使い方: <span class="blue">青い文字</span> */

.blue {
  color: #3652f7;   /* 青色 */
}
.black{
  color: #222;      /* 黒（濃いグレー） */
}
.r{
  color:#940000;    /* 赤色（暗めの赤） */
}
.y{
  color: #e9f86d;   /* 黄色（黄緑っぽい） */
}
.w{
  color:#fff;       /* 白色 */
}

/* ★ テキストの配置を変えるクラス群 */
/* text-align でテキストの横方向の位置を指定します */
/* 使い方: <p class="txt_c">中央寄せの文章</p> */

.txt_c{
  text-align:center;   /* 中央寄せ */
}
.txt_r{
  text-align:right;    /* 右寄せ */
}
.txt_l{
  text-align:left;     /* 左寄せ */
}

/* ★ 文字サイズを変えるクラス群 */
/* font-size に % を使うと、親要素のフォントサイズに対する割合になります */
/* 例: 親が 20px、80% → 16px */
/* 使い方: <span class="small">少し小さい文字</span> */
/* 【修正】サイズ感を変えたい場合は % の値を変更してください */

.xxxsmall{
  font-size: 40%;    /* かなり小さい */
}
.xxsmall{
  font-size: 50%;    /* とても小さい */
}
.xsmall{
  font-size: 60%;    /* 小さい */
}
.small{
  font-size:80%;     /* やや小さい */
}
.large{
  font-size:120%;    /* やや大きい */
}
.xlarge{
  font-size:140%;    /* 大きい */
}
.xxlarge {
  font-size: 150%;   /* とても大きい */
}
.xxxxlarge {
  font-size: 160%;   /* かなり大きい */
}

/* ★ キャプション（画像下の説明文）スタイル */
/* 画像の下に黒背景＋白文字のキャプションを表示するためのクラスです */
/* 使い方: <p class="caption">写真の説明文</p> */
/* 【修正】背景色を変えたい → background の値を変更 */
/*         文字サイズを変えたい → font-size の値を変更 */
.caption {
  background: #222;        /* 背景色：濃いグレー（ほぼ黒） */
  font-size: 1.8rem;       /* 文字サイズ：18px */
  font-weight: bold;       /* 太字 */
  line-height: 1.3;        /* 行間 */
  padding: .5rem 0;        /* 上下の内側余白 (.5rem = 5px) */
  color: #fff;             /* 文字色：白 */
  text-align: center;      /* 中央寄せ */
}

/* ★ 余白（マージン）調整クラス */
/* 要素の上下に余白を追加するためのクラスです */
/* 使い方: <div class="middle">上下に余白のある要素</div> */

.middle {
  margin: 2rem 0;         /* 上下に 2rem(20px) の余白 */
}
.bottom {
  margin:0 0 2rem;        /* 下に 2rem(20px) の余白 */
}
.top {
  margin: 2rem 0 0;       /* 上に 2rem(20px) の余白 */
}

/* ★ マーカー（蛍光ペン）風の装飾 */
/* テキストに蛍光ペンで線を引いたようなデザインを適用します */
/* 使い方: <span class="mark_y">重要なテキスト</span> */

/* .mark_y → 黄色マーカー */
/* background: linear-gradient(transparent 50%, #ffff61 50%) */
/*   上半分が透明、下半分が黄色のグラデーション → 蛍光ペンのように見える */
.mark_y {
  background: linear-gradient(transparent 50%, #ffff61 50%);  /* 下半分に黄色マーカー */
  font-weight: bold;    /* 太字 */
}

/* .mark_b → 黒背景マーカー（反転テキスト用） */
/* 使い方: <span class="mark_b w">白文字の黒背景テキスト</span> */
.mark_b {
  background: #000;               /* 背景色：黒 */
  display: inline-block;          /* インラインブロック（幅・高さを持てるインライン要素） */
  padding: 0 1rem;                /* 左右に内側余白 */
  margin: 0 0.5rem;               /* 左右に外側余白 */
  line-height: 1.4;               /* 行間 */
}


/* =====================================================
   ★ Flex（フレックスボックス）
   =====================================================
   CSS Flexbox は要素を横並びに配置するための仕組みです。
   float より簡単で柔軟なレイアウトが可能です。

   使い方: <div class="flex">
             <div>要素1</div>
             <div>要素2</div>
           </div>
*/

/* ★ フレックスコンテナの設定 */
/* display: flex → 子要素を横並びにする（Flexboxを有効化） */
/* flex-wrap: wrap → 子要素が親の幅を超えたら折り返す */
/* justify-content: space-between → 子要素を左右に均等配置（両端揃え） */
/* -webkit- と -moz- は古いブラウザ用の接頭辞です */
.flex {
  display: -webkit-flex;             /* Safari古いバージョン用 */
  display: -moz-flex;                /* Firefox古いバージョン用 */
  display: flex;                     /* Flexboxを有効化 */
  flex-wrap: wrap;                   /* 折り返しを許可 */
  justify-content: space-between;    /* 両端揃え */
}

/* ★ 連続する .flex 間に上余白を追加 */
/* .flex + .flex → 「.flexの直後にある.flex」を選択するセレクタ */
/* 連続して並ぶFlex要素の間にスペースを確保します */
.flex + .flex {
  margin-top: 2rem;    /* 上に 2rem(20px) の余白 */
}


/* =====================================================
   ★ 注釈（notice）
   =====================================================
   ページ下部の注意書きや但し書きに使うスタイルです。
   小さめの文字で右寄せに表示します。
   使い方: <p class="notice">※注意書きテキスト</p>
*/
.notice {
  padding-top:1.5rem;       /* 上の内側余白 */
  font-size: 1.5rem;        /* 文字サイズ：15px（小さめ） */
  text-align: right;         /* 右寄せ */
  font-weight: 400;          /* 通常の太さ */
  font-family: sans-serif;   /* ゴシック系フォント */
  letter-spacing: 1px;       /* 文字間隔を1px広げる */
}


/* =====================================================
   ★ prihead（カウントダウンタイマーの固定ヘッダー）
   =====================================================
   ページ上部に固定表示されるカウントダウンタイマーなどの
   プロモーション用のバーです。
   スクロールしても画面上部に固定されます。
*/

/* ★ 固定ヘッダー全体 */
/* z-index: 20 → 他の要素より前面に表示する（数値が大きいほど前面） */
/* position: fixed → 画面に固定（スクロールしても動かない） */
/* 【修正】background の色を変えてバーの背景色を変更できます */
#prihead {
  z-index: 20;             /* 最前面に表示 */
  position: fixed;         /* 画面上部に固定 */
  width: 100%;             /* 幅いっぱい */
  font-size: 2rem;         /* 文字サイズ：20px */
  font-weight: bold;       /* 太字 */
  text-align: center;      /* 中央寄せ */
  background: #000;        /* 背景色：黒 */
}

/* ★ カウントダウンタイマーの数字エリア */
/* width:960px → 内容幅を960pxに固定 */
/* color:#fcfbb2 → 薄い黄色の文字 */
#prihead #CDT{
  width:960px;
  padding:1rem 0;           /* 上下に内側余白 */
  margin:0 auto;            /* 中央寄せ */
  color:#fcfbb2;            /* 文字色：薄い黄色 */
  line-height:1.2;
  font-family:Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ",
    Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
    "ＭＳ Ｐゴシック", sans-serif,monospace;
}

/* ★ カウントダウンの数字部分のスタイル */
/* 白背景に黒文字の数字ボックスを表示します */
/* border-radius:3px → 角を3px丸くする */
#prihead #CDT .count_num{
  display:inline-block;     /* 横並びに表示 */
  padding:0 .4rem;          /* 左右に内側余白 */
  margin:0 .4rem;           /* 左右に外側余白 */
  border-radius:3px;        /* 角を丸く */
  color:#333;               /* 文字色：濃いグレー */
  font-size:150%;           /* 文字サイズ：親の150% */
  background:#fff;          /* 背景色：白 */
}


/* ============================================================
   ■ ヘッダー（ページ上部に固定表示されるナビゲーション）
   - position: fixed で画面上部にくっつく
   - z-index: 1000 で他の要素より手前に表示
============================================================ */
header {
  background: var(--white);
  box-shadow: 0 1px 12px rgba(0,0,0,0.05); /* うっすら影 */
  position: fixed;          /* スクロールしても上部に固定 */
  top: 0; left: 0; right: 0;
  z-index: 1000;
}

/* ヘッダー内のレイアウト（ロゴとメニューを横並び） */
.header-inner {
  max-width: 1000px;
  margin: 0 auto;                     /* 中央揃え */
  display: flex;                       /* 横並びレイアウト */
  align-items: center;                 /* 縦方向：中央 */
  justify-content: space-between;      /* 左右に分散配置 */
  padding: 10px 24px;
}

/* ロゴ（スマイルアイコン＋クリニック名） */

/* ヘッダーロゴ: SVG画像ファイル対応 */
.header-logo img.logo-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}
.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;                /* アイコンと文字の間隔 */
  text-decoration: none;    /* 下線なし */
  color: var(--pink-main);
  font-weight: 700;
  font-size: 1.6rem;
}
.header-logo .logo-icon {
  width: 32px; height: 32px;
}

/* ナビゲーションメニュー */
.header-nav {
  display: flex;
  gap: 20px;
  align-items: center;
}
.header-nav a {
  text-decoration: none;
  color: var(--text-mid);
  font-size: 1.4rem;
  font-weight: 500;
  transition: color 0.2s;
}
.header-nav a:hover {
  color: var(--pink-main);  /* ホバーでピンクに */
}

/* （WEB予約ボタンは廃止済み） */

/* ハンバーガーメニュー（スマホ用） */
.hamburger {
  display: none;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--text-dark); margin: 5px 0; border-radius: 2px;
}

/* スマホ表示（768px以下） */
@media (max-width: 768px) {
  .header-nav { display: none; }
  .hamburger { display: block; }
  .header-nav.active {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); padding: 20px; gap: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
}


/* ============================================================
   ■ セクション1: ヒーロー（メインビジュアル）
   - ピンクのグラデーション背景
   - テキストを中央配置、画像は背景として同化させる
============================================================ */
.hero {
  padding: 120px 24px 100px; /* 上120px（ヘッダー分確保）、下100px */
  background: linear-gradient(180deg, var(--pink-pale) 0%, #FDDFE6 100%);
  position: relative;
  overflow: hidden;
  min-height: 800px;          /* 最低限の高さを確保 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* セクション下部の白い波形（次セクションへの自然な繋がり） */
.hero::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 20px;
  background: var(--white);
  clip-path: ellipse(55% 100% at 50% 100%);
  z-index: 2;
}

/* ヒーロー内のレイアウト（テキスト中央配置） */
.hero-inner {
  max-width: 960px;
  margin: 0 auto;
  position: relative;          /* 背景画像の基準 */
  z-index: 1;                  /* テキストを手前に */
  text-align: center;          /* 全テキスト中央 */
}

/* テキスト部分（中央配置） */
.hero-text {
  position: relative;
  z-index: 2;                  /* 画像より手前に表示 */
}

/* 「医療法人社団なつめ会は」のテキスト */
.hero-org {
  font-size: 1.6rem;
  color: var(--text-mid);
  font-weight: 500;
  margin-bottom: 12px;
}

/* 「うたづ小児クリニック」（大きく強調） */
.hero-clinic-name {
  font-size: 3.8rem;
  font-weight: 900;
  color: var(--pink-main);
  line-height: 1.4;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
  text-shadow: 0 0 30px rgba(255,255,255,0.8); /* 白い光彩で文字を際立たせる */
}

/* 「リニューアルオープン」 */
.hero-renewal {
  font-size: 1.8rem;
  color: var(--text-dark);
  font-weight: 600;
  margin-bottom: 24px;
}
.hero-renewal .highlight {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--pink-main);
}

/* 開業日の表示 */
.hero-date-box {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;          /* PCでは1行 */
  gap: 4px;
  background: rgba(255,255,255,0.85); /* 半透明白で背景画像と馴染む */
  backdrop-filter: blur(6px);          /* すりガラス風 */
  border: 2px solid var(--pink-main);
  border-radius: 14px;
  padding: 14px 24px;
  margin-bottom: 20px;
}
/* date-part: 日付「2月1日より」をひとまとまりとして扱う */
.hero-date-box .date-part {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}
.hero-date-box .year { font-size: 1.5rem; font-weight: 500; color: var(--text-dark); }
.hero-date-box .big { font-size: 3.8rem; font-weight: 900; color: var(--pink-main); line-height: 1; }
.hero-date-box .unit { font-size: 1.6rem; font-weight: 600; color: var(--text-dark); }
.hero-date-box .from { font-size: 1.4rem; font-weight: 600; color: var(--text-mid); margin-left: 4px; }
.hero-date-box .open-label {
  font-size: 2.4rem; font-weight: 700; color: var(--pink-main);
  font-style: italic; margin-left: 8px;
}

/* ご挨拶テキスト */
.hero-message {
  font-size: 1.5rem;
  line-height: 2.1;
  color: var(--text-mid);
  margin-top: 8px;
  text-shadow: 0 0 20px rgba(255,255,255,0.9); /* 読みやすさのため白い光彩 */
}


/* ============================================================
   ■ ヒーロー内ランダム装飾画像（おもちゃイラスト等）
   - 枠・背景なし、画像のみ
   - 各画像を異なる位置・サイズ・回転でランダム風に配置
   ★ 位置調整は .hero-deco-1 〜 .hero-deco-8 の top/left/right/bottom を変更
   ★ サイズ調整は width を変更
   ★ 回転調整は transform: rotate(○deg) を変更
============================================================ */
.hero-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  object-fit: contain;
  opacity: 0.8;
}
.hero-deco-1 {
  width: 70px; top: 12%; left: 5%;
  transform: rotate(-12deg);
}
.hero-deco-2 {
  width: 55px; top: 75%; left: 8%;
  transform: rotate(18deg);
}
.hero-deco-3 {
  width: 48px; top: 20%; left: 20%;
  transform: rotate(8deg);
}
.hero-deco-4 {
  width: 62px; bottom: 40%; left: 3%;
  transform: rotate(-22deg);
}
.hero-deco-5 {
  width: 65px; top: 15%; right: 6%;
  transform: rotate(15deg);
}
.hero-deco-6 {
  width: 50px; top: 55%; right: 10%;
  transform: rotate(-10deg);
}
.hero-deco-7 {
  width: 45px; top: 25%; right: 20%;
  transform: rotate(25deg);
}
.hero-deco-8 {
  width: 58px; bottom: 15%; right: 4%;
  transform: rotate(-18deg);
}

/* スマホ対応 */
@media (max-width: 768px) {
  .hero-deco { opacity: 0.8; }
  .hero-deco-1 { width: 60px; top: 8%;  left: 2%; }
  .hero-deco-2 { width: 45px; top: 60%; left: 3%; }
  .hero-deco-3 { width: 30px; top: 15%; left: 12%; }
  .hero-deco-4 { width: 40px; bottom: 12%; left: 1%; }
  .hero-deco-5 { width: 50px; top: 10%; right: 3%; }
  .hero-deco-6 { width: 40px; top: 50%; right: 5%; }
  .hero-deco-7 { width: 35px; top: 22%; right: 12%; }
  .hero-deco-8 { width: 40px; bottom: 10%; right: 2%; }
}


/* ============================================================
   背景イラスト画像（テキストの後ろに透過で配置）
   - position: absolute で背景に固定
   - opacity で半透明にして馴染ませる
   - mix-blend-mode: multiply でピンク背景と自然に合成
============================================================ */
.hero-bg-image {
  position: absolute;
  bottom: 60px;               /* 下部に配置 */
  right: -40px;               /* 右寄りに配置 */
  width: 480px;
  height: auto;
  opacity: 0.18;              /* 薄く表示して背景に溶け込ませる */
  mix-blend-mode: multiply;   /* 背景色と自然にブレンド */
  pointer-events: none;       /* クリック不可（背景なので） */
  z-index: 0;
  filter: saturate(0.6);      /* 彩度を少し落として馴染ませる */
}

/*
  ★★★ メインビジュアル画像の差し替え方法 ★★★
  .hero-bg-image の src="" に画像ファイルパスを入れてください。
  画像は背景として薄く表示されます。
  opacity の値（0.18）を変えると透明度が変わります。
  - 0.1 = とても薄い  / 0.3 = やや見える  / 0.5 = はっきり

  例: src="images/consultation.png"
*/

/* プレースホルダー（画像がまだない場合の表示） */
.hero-bg-placeholder {
  position: absolute;
  bottom: 60px; right: -20px;
  width: 420px; height: 340px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   ■ 円形幾何学フレーム＋イラスト画像（ヒーロー内）
   - 左右に1つずつ配置
   - 文字の邪魔にならないよう半透明＋背面に
   - 画像は円形にクリッピング
============================================================ */

/* 共通：円形フレームのコンテナ */
.hero-circle {
  position: absolute;
  width: 220px;
  height: 220px;
  z-index: 0;               /* テキストの背面 */
  pointer-events: none;      /* クリック不可 */
  opacity: 0.55;             /* 文字の邪魔にならないよう半透明 */
}

/* 幾何学装飾SVG（フレーム） */
.hero-circle-deco {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* イラスト画像（円形クリッピング） */
.hero-circle-img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 76%;                /* フレーム内側に収まるサイズ */
  height: 76%;
  object-fit: contain;       /* 画像全体を表示（トリミングしない） */
  border-radius: 50%;        /* 円形にクリッピング */
}

/* 左側の配置 */
.hero-circle-left {
  left: 3%;
  top: 50%;
  transform: translateY(-50%);
}

/* 右側の配置 */
.hero-circle-right {
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
}

/* ゆっくり浮遊するアニメーション */
@keyframes float-gentle {
  0%, 100% { transform: translateY(-50%); }
  50%      { transform: translateY(calc(-50% - 8px)); }
}
.hero-circle-left  { animation: float-gentle 6s ease-in-out infinite; }
.hero-circle-right { animation: float-gentle 6s ease-in-out infinite 3s; /* 3秒ずらす */ }


/* スマホ対応 */
@media (max-width: 768px) {
  .hero { padding: 100px 20px 80px; min-height: 500px; }
  .hero-clinic-name { font-size: 2.8rem; }
  .hero-date-box .big { font-size: 2.8rem; }
  .hero-date-box {
    padding: 10px 16px;
    flex-wrap: wrap;          /* SPでは折り返し */
    justify-content: center;
    align-items: baseline;
    gap: 0 4px;
  }
  .hero-date-box .date-part {
    width: 100%;              /* 1行目：日付部分を全幅で表示 */
    justify-content: center;
  }
  .hero-date-box .open-label {
    width: 100%;              /* 2行目：Renewal Openを全幅で表示 */
    text-align: center;
    margin-left: 0;
  }
  .hero-bg-image {
    width: 320px;
    bottom: 40px; right: -20px;
    opacity: 0.18;            /* PC版と同じ透明度に統一 */
    mix-blend-mode: multiply;
    filter: saturate(0.6);
  }
  .hero-bg-placeholder {
    width: 240px; height: 200px;
    bottom: 30px; right: -10px;
  }

  /* スマホ：円形イラストを小さくして上下に配置 */
  .hero-circle {
    width: 120px;
    height: 120px;
    opacity: 0.4;
  }
  .hero-circle-left {
    left: -10px;
    top: 80px;
    transform: none;
    animation: float-gentle-sp 5s ease-in-out infinite;
  }
  .hero-circle-right {
    right: -10px;
    top: auto;
    bottom: 80px;
    transform: none;
    animation: float-gentle-sp 5s ease-in-out infinite 2.5s;
  }
  @keyframes float-gentle-sp {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }
}


/* ============================================================
   ■ セクション共通スタイル（タイトルなど）
============================================================ */
section {
  padding: 80px 24px;
  position: relative;
}
.section-inner {
  max-width: 880px;
  margin: 0 auto;
}
.section-title-area {
  text-align: center;
  margin-bottom: 44px;
}
.section-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--pink-main);
  display: inline-block;
  position: relative;
  padding-bottom: 14px;
}
/* タイトル下のアクセント線 */
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 3px;
  background: var(--pink-light);
  border-radius: 3px;
}
.section-subtitle {
  font-size: 1.3rem;
  color: var(--text-light);
  margin-top: 10px;
  letter-spacing: 0.15em;
}


/* ============================================================
   ■ セクション2: 私たちの想い
============================================================ */
.omoi {
  background: var(--white);
}
.omoi-content {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.omoi-lead {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--pink-main);
  margin-bottom: 24px;
}
.omoi-text {
  font-size: 1.5rem;
  line-height: 2.2;
  color: var(--text-mid);
}
.omoi-text p { margin-bottom: 12px; }
.omoi-text p:last-child { margin-bottom: 0; }


/* ============================================================
   ■ セクション3: 医院の外観写真（1枚のみ）
============================================================ */
/* ============================================================
   ■ 横スクロール写真ギャラリー（3枚）
============================================================ */
.photo-gallery-wrap {
  position: relative;
  margin: 0 auto;
  max-width: 900px;
}
.photo-gallery {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--pink-light) transparent;
}
.photo-gallery::-webkit-scrollbar {
  height: 6px;
}
.photo-gallery::-webkit-scrollbar-track {
  background: transparent;
}
.photo-gallery::-webkit-scrollbar-thumb {
  background: var(--pink-light);
  border-radius: 3px;
}

/* ギャラリー写真差し替え対応スタイル */
.gallery-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 12px;
}
.gallery-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.gallery-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  border-radius: 12px;
}
.gallery-fallback small {
  font-size: 1.1rem;
  color: var(--pink-main);
  opacity: 0.8;
}

.gallery-item {
  flex: 0 0 480px;        /* PC: 1枚の幅 */
  scroll-snap-align: start;
}
.gallery-item .photo-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  min-height: auto;
  height: auto;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.gallery-caption {
  text-align: center;
  font-size: 1.3rem;
  color: var(--text-light);
  margin-top: 10px;
}
.gallery-hint {
  text-align: center;
  font-size: 1.2rem;
  color: var(--text-light);
  margin-top: 12px;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  

.gallery-item {
    flex: 0 0 80vw;       /* SP: 画面幅の80%で1枚表示 */
  }
}

.photo-section {
  background: var(--pink-bg);
}
.photo-frame {
  max-width: 640px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 28px var(--shadow-soft);
}

/*
  ★★★ 外観写真の差し替え方法 ★★★
  <div class="photo-placeholder"> 全体を削除して、
  代わりに以下を入れてください：

  <img src="images/clinic-exterior.jpg"
       alt="うたづ小児クリニック外観"
       class="photo-img">
*/
.photo-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* 横長の比率 */
  object-fit: cover;       /* 枠に合わせてトリミング */
  display: block;
}
.photo-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #FFF5F7 0%, #FCE4EC 50%, #F8D7E0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--pink-light);
  font-size: 1.4rem;
}
.photo-placeholder svg { width: 44px; height: 44px; opacity: 0.4; }
.photo-caption {
  text-align: center;
  padding: 14px;
  font-size: 1.3rem;
  color: var(--text-mid);
  background: var(--white);
  font-weight: 500;
}


/* ============================================================
   ■ セクション4: 医師紹介
============================================================ */
.doctors { background: var(--white); }
.doctors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.doctor-card {
  background: var(--white);
  border: 2px solid var(--border-light);
  border-radius: 20px;
  padding: 36px 28px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}
.doctor-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px var(--shadow-soft);
}
.doctor-avatar {
  width: 120px; height: 120px;
  border-radius: 50%;
  margin: 0 auto 18px;
  background: var(--pink-pale);
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--border-light);
  overflow: hidden;
}
.doctor-avatar svg { width: 80px; height: 80px; }
.doctor-role {
  display: inline-block;
  background: var(--pink-main);
  color: var(--white);
  font-size: 1.2rem; font-weight: 700;
  padding: 4px 18px; border-radius: 20px;
  margin-bottom: 12px;
}
.doctor-name { font-size: 2rem; font-weight: 800; color: var(--text-dark); margin-bottom: 2px; }
.doctor-reading { font-size: 1.25rem; color: var(--text-light); margin-bottom: 14px; }
.doctor-spec {
  display: inline-block;
  background: var(--pink-pale); color: var(--pink-main);
  font-size: 1.25rem; font-weight: 600;
  padding: 4px 14px; border-radius: 8px;
  margin-bottom: 14px;
}
.doctor-bio { font-size: 1.3rem; line-height: 1.9; color: var(--text-mid); text-align: left; }

@media (max-width: 768px) {
  .doctors-grid { grid-template-columns: 1fr; gap: 20px; }
}


/* ============================================================
   ■ セクション5: 診療時間（見やすくリニューアル）
   - カード型のデザインに変更
   - 午前・午後を分けて大きく表示
   - ●マークはそのまま活用
============================================================ */
.schedule { background: var(--pink-bg); }

/* 診療時間ラベル */
.schedule-badge {
  display: inline-block;
  background: var(--pink-main);
  color: var(--white);
  font-size: 1.25rem; font-weight: 700;
  padding: 4px 16px; border-radius: 20px;
  margin-bottom: 24px;
}

/* 診療時間のカード全体 */
.schedule-card {
  background: var(--white);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 4px 20px var(--shadow-soft);
}

/* 午前・午後のブロック */
.time-block {
  margin-bottom: 24px;
}
.time-block:last-child { margin-bottom: 0; }

/* 「午前」「午後」のラベル（中央揃え） */
.time-label {
  display: flex;
  align-items: center;
  justify-content: center;   /* ★ 時間表示を中央に配置 */
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--pink-pale);
}
.time-label-tag {
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--pink-main);
  color: var(--white);
  font-size: 1.3rem; font-weight: 700;
  padding: 6px 16px;
  border-radius: 8px;
  min-width: 52px;
}
.time-label-hours {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-dark);
}

/* 曜日の横並びグリッド */
.day-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 7列（月〜日） */
  gap: 6px;
  text-align: center;
}

/* 各曜日のセル */
.day-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  border-radius: 12px;
  transition: background 0.2s;
}
.day-cell:hover { background: var(--pink-pale); }

/* 曜日の文字（月、火、水…） */
.day-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-dark);
}
/* 土曜は青、日曜は赤 */
.day-cell.sat .day-name { color: #5B8EC9; }
.day-cell.sun .day-name { color: #E05555; }

/* 診療あり：ピンクの丸（●） */
.dot-open {
  width: 30px; height: 30px;
  background: var(--pink-circle);
  border-radius: 50%;
}

/* 休診：グレーの × マーク */
.dot-closed {
  width: 30px; height: 30px;
  position: relative;
}
.dot-closed::before, .dot-closed::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 2px;
  background: #CCC;
  border-radius: 1px;
}
.dot-closed::before { transform: translate(-50%, -50%) rotate(45deg); }
.dot-closed::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* 補足テキスト（15:00〜 など） */
.dot-note {
  font-size: 1.1rem;
  color: var(--pink-main);
  font-weight: 700;
  margin-top: -4px;
}

/* 担当医師名（丸の下に表示） */
.doctor-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--pink-main);
  margin-top: -2px;
  letter-spacing: 0.05em;
}
/* 池内先生の色（区別しやすくするため少し変更） */
.doctor-label-alt {
  color: #5B8EC9;
}

/* 曜日ヘッダー行 */
.day-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  text-align: center;
  margin-bottom: 0;
  padding: 0 4px;
}

/* 仕切り線 */
.schedule-divider {
  border: none;
  border-top: 1px dashed var(--border-light);
  margin: 16px 0;
}

/* 注釈エリア */
.schedule-notes {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--text-mid);
}
.note-item { display: flex; align-items: center; gap: 6px; }
.note-badge {
  display: inline-block;
  background: var(--pink-main); color: var(--white);
  font-size: 1.1rem; font-weight: 700;
  padding: 2px 10px; border-radius: 10px;
}

@media (max-width: 768px) {
  .schedule-card { padding: 20px 14px; }
  .time-label-hours { font-size: 1.5rem; }
  .day-cell { padding: 8px 2px; }
  .dot-open { width: 24px; height: 24px; }
  .dot-closed { width: 24px; height: 24px; }
  .day-name { font-size: 1.2rem; }
  .schedule-notes { flex-direction: column; align-items: center; gap: 8px; }
}


/* ============================================================
   ■ セクション6: クリニック情報
============================================================ */
.info {
  background: var(--white);
  position: relative;        /* 装飾画像の基準 */
  overflow: hidden;          /* はみ出し防止 */
}

/* ============================================================
   ■ クリニック情報：ランダム装飾画像
   - position: absolute で自由配置
   - 小さめ＆半透明で文字の邪魔にならない
   - 各画像ごとに位置・サイズ・回転を個別指定
   ★★★ 位置の調整方法 ★★★
   top/bottom/left/right の % を変えると位置が変わります
   width を変えるとサイズが変わります
   transform: rotate(○deg) で回転角度を変えられます
============================================================ */
.info-deco {
  position: absolute;
  pointer-events: none;      /* クリック不可 */
  opacity: 0.2;              /* 薄く表示 */
  z-index: 0;                /* テキストの背面 */
  object-fit: contain;
}
/* テキスト部分は前面に */
.info .section-inner { position: relative; z-index: 1; }

/* 個別の位置指定（ランダム風に散らす） */
.info-deco-1 {
  width: 65px;
  top: 10%;   left: 5%;
  transform: rotate(-15deg);
  opacity: 0.18;
}
.info-deco-2 {
  width: 50px;
  top: 60%;   left: 8%;
  transform: rotate(10deg);
  opacity: 0.15;
}
.info-deco-3 {
  width: 45px;
  top: 25%;   right: 6%;
  transform: rotate(20deg);
  opacity: 0.2;
}
.info-deco-4 {
  width: 55px;
  bottom: 12%; right: 10%;
  transform: rotate(-8deg);
  opacity: 0.16;
}
.info-deco-5 {
  width: 40px;
  top: 8%;    right: 22%;
  transform: rotate(30deg);
  opacity: 0.13;
}
.info-deco-6 {
  width: 48px;
  bottom: 15%; left: 18%;
  transform: rotate(-25deg);
  opacity: 0.17;
}

/* スマホ：装飾を少し小さく */
@media (max-width: 768px) {
  .info-deco { opacity: 0.12; }
  .info-deco-1 { width: 40px; top: 5%;  left: 2%; }
  .info-deco-2 { width: 35px; top: 55%; left: 3%; }
  .info-deco-3 { width: 30px; top: 20%; right: 3%; }
  .info-deco-4 { width: 38px; bottom: 8%; right: 5%; }
  .info-deco-5 { width: 28px; top: 5%;  right: 15%; }
  .info-deco-6 { width: 32px; bottom: 10%; left: 10%; }
}
/* ============================================================
   ■ Google マップ埋め込み
============================================================ */
.gmap-wrap {
  margin-bottom: 40px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  border: 2px solid var(--pink-light);
}
.gmap-wrap iframe {
  display: block;
  width: 100%;
  height: 380px;
}
@media (max-width: 768px) {
  .gmap-wrap iframe { height: 260px; }
}

.info-card {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.info-logo { margin-bottom: 20px; display: flex; justify-content: center; }
.info-logo svg { width: 80px; height: 80px; }

/* クリニック情報ロゴ: logo.svg を使い回し */
.info-logo-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}


.info-corp-name { font-size: 1.4rem; color: var(--text-light); margin-bottom: 4px; }
.info-clinic-name { font-size: 2.2rem; font-weight: 800; color: var(--text-dark); margin-bottom: 20px; }
.info-detail { font-size: 1.5rem; color: var(--text-mid); line-height: 2; margin-bottom: 6px; }
.info-detail .sub-note { font-size: 1.3rem; color: var(--text-light); }
/* ============================================================
   ■ 電話番号（目立つボタン型デザイン）
============================================================ */
.info-tel-box {
  margin-top: 28px;
  text-align: center;
}
.info-tel-label {
  font-size: 1.3rem;
  color: var(--text-mid);
  font-weight: 500;
  margin-bottom: 10px;
}
.info-tel-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 3rem;
  font-weight: 900;
  color: #ffffff !important;  /* 電話番号テキストを白字に */
  background: var(--pink-main);
  text-decoration: none;
  padding: 14px 36px;
  border-radius: 50px;
  box-shadow: 0 4px 16px rgba(232, 91, 129, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.info-tel-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(232, 91, 129, 0.45);
}
.info-tel-btn .tel-icon {
  width: 28px; height: 28px;
}
.info-tel-note {
  font-size: 1.2rem;
  color: var(--text-light);
  margin-top: 10px;
}
@media (max-width: 768px) {
  .info-tel-btn {
    font-size: 2.4rem;
    padding: 12px 24px;
  }
}


/* ============================================================
   ■ セクション7: Instagram投稿セクション
============================================================ */
.instagram-section {
  background: var(--pink-bg);
}

/* 投稿カード 3列グリッド */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

/* 各投稿カード */
.ig-card {
  display: block;
  text-decoration: none;
  color: var(--text-dark);
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 3px 14px var(--shadow-soft);
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
}
.ig-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(232, 91, 129, 0.18);
}

/* NEWバッジ（最新投稿） */
.ig-card-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--pink-main);
  color: var(--white);
  font-size: 1rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 8px;
  z-index: 2;
  letter-spacing: 0.08em;
}

/* PICK UP バッジ（固定投稿用） */
.ig-card-badge-pinned {
  background: #5B8EC9;
}

/* サムネイル画像エリア */
.ig-card-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, #FFF5F7, #FCE4EC);
}
.ig-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.ig-card:hover .ig-card-img {
  transform: scale(1.05);
}

/* キャプション */
.ig-caption {
  padding: 12px 14px;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text-mid);
}

/* 「もっと見る」ボタン */
.ig-follow-area {
  text-align: center;
  margin-top: 28px;
}
.ig-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #E1306C, #F77737, #FCAF45);
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(225, 48, 108, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.ig-follow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(225, 48, 108, 0.4);
}
.ig-follow-btn .ig-icon {
  width: 20px; height: 20px;
}

@media (max-width: 768px) {
  .ig-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    gap: 16px;
  }
}


/* ============================================================
   ■ ヒーロー内 Instagramリンクボタン
============================================================ */
/* ★ Instagramボタン上の告知テキスト */
.ig-info-label {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--pink-main);
  margin-top: 24px;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
  text-shadow: 0 0 16px rgba(255,255,255,0.95);
  animation: pulse-text 1.8s ease-in-out infinite;
}
@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

.hero-instagram-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  background: linear-gradient(135deg, #E1306C, #F77737, #FCAF45);
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(225, 48, 108, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}
.hero-instagram-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(225, 48, 108, 0.35);
}
.hero-instagram-btn .ig-icon {
  width: 18px; height: 18px;
}


/* ============================================================
   ■ 医師紹介：アバター画像スタイル
============================================================ */

/* 医師アバター：写真なし時のプレースホルダー */
.doctor-avatar-placeholder {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: var(--pink-pale);
  border-radius: 50%;
}
.doctor-avatar-placeholder svg {
  width: 70%;
  height: 70%;
}

.doctor-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}


/* ============================================================
   ■ フッター
============================================================ */
footer {
  background: var(--text-dark);
  color: #999;
  text-align: center;
  padding: 28px 24px;
  font-size: 1.2rem;
}


/* ============================================================
   ■ フェードインアニメーション
   - スクロールして要素が見えたときにふわっと表示
   - JavaScript（js/main.js）で制御
============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/*
/////////////////////////////////////////////////////////////////////////////////////////////
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
  【 SP（スマートフォン）用のスタイル 】
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
/////////////////////////////////////////////////////////////////////////////////////////////

  ★ @media（メディアクエリ）とは？
  「画面の幅が○○px以下のとき、このCSSを適用する」という条件分岐です。
  これにより1つのCSSファイルで、PCとスマホ両方のデザインを管理できます。
  これを「レスポンシブデザイン」と呼びます。

  ★ max-width:768px とは？
  「画面の幅が768px以下（＝タブレット縦向き以下＝スマートフォン）のとき」
  という条件です。768pxはiPadの縦向きの幅に相当します。

  ★ vw単位とは？
  「ビューポート幅（画面の幅）の○%」を意味する単位です。
  例: 4.5vw → 画面幅の4.5%のサイズ
  スマホの画面幅に応じて自動的にサイズが変わります。

  【修正】スマホ用デザインを変えたい場合は、このブロックの中の値を変更してください。
         ここの変更はPC表示には影響しません（768px以下の時だけ適用されます）。
*/
@media screen and (max-width:768px){

  /* ★ SP用の基本スタイル上書き */
  /* PC用の設定を、スマホ向けに上書きします */
  /* font-size:4.5vw → 画面幅の4.5%の文字サイズ（画面幅に応じて変化） */
  /* font-weight: 400 → 通常の太さ（PCの500より少し細く） */
  body{
    width:100%;
    font-size:4.5vw;       /* 画面幅に連動する文字サイズ */
    font-weight: 400;      /* 通常の太さ */
  }

  /* ★ メインコンテナのSP用設定 */
  /* box-shadow: none → 影を消す */
  /* height: auto → 高さを内容に合わせて自動調整 */
  .main{
    width: 100%;
    box-shadow: none;
    height: auto;
  }

  /* ★ 画像のSP用設定 */
  /* スマホでは画像を横幅いっぱいに表示します */
  img{
    max-width:100%;
    width:100%;
  }

  /* ★ SP用の文字サイズクラス（上書き） */
  /* PCとスマホで文字サイズのバランスが異なるため、再定義しています */
  /* 【修正】スマホでの文字サイズを変えたい場合はここの値を変更 */
  .xsmall{font-size: 70%;}
  .xxsmall{font-size: 40%;}
  .small{ font-size:80%; }
  .large{ font-size:111%; }
  .xlarge{ font-size:125%; }
  .xxlarge{font-size: 150%;}
  .xxxxlarge{font-size: 130%;}

  /* ★ SP専用の文字サイズクラス */
  /* HTMLで <span class="sp_small"> のように使います */
  /* PCでは効果がなく、スマホでのみ適用されます */
  .sp_small{font-size: 90%;}
  .sp_xsmall{font-size: 90%;}
  .sp_xxsmall{font-size: 85%;}
  .sp_large{font-size: 110%;}
  .sp_xlarge{font-size: 120%;}
  .sp_xxlarge{font-size: 150%;}
  .sp_xxxlarge{font-size: 160%;}
  .sp_large_300 {font-size: 300%;}  /* 特大（3倍） */

  /* ★ SP用の余白調整 */
  /* vw単位で画面幅に応じた余白にします */
  /* !important → 他のスタイルより優先的に適用する（強制） */
  /* 【注意】!important の多用は避けるべきですが、上書きのために使用されています */
  .middle {margin: 4vw 0!important;}
  .bottom {margin-bottom: 2vw;}

  /* ★ SP用のFloat解除 */
  /* スマホでは画像の左右配置をやめて、縦に並べます */
  /* float:none → 浮動配置を解除 */
  /* width:90% → 画面幅の90%で表示 */
  /* margin:4vw auto → 上下に余白＋中央寄せ */
  .img_right{
    float:none;            /* 右寄せ解除 */
    width:90%;             /* 幅90% */
    padding: 0;            /* 余白をリセット */
    margin: 4vw auto;      /* 上下余白＋中央寄せ */
  }
  .img_left{
    float:none;            /* 左寄せ解除 */
    width:90%;
    padding:2vw 0;
    margin:4vw auto;
  }
  .img_center{
    margin-bottom: 4vw;
    margin: 4vw auto;
  }

  /* ★ SP用のFlex解除 */
  /* スマホでは横並びをやめて、縦に1列で表示します */
  .flex{
    display: block;         /* Flexboxを解除して縦並びに */
    align-items: center;
    margin: 0 auto;
  }
  .flex + .flex{
    margin-top: 5vw;
  }

  /* ★ SP用のPC/SPクラス切り替え */
  /* PCと逆にします：.pc を非表示、.sp を表示 */
  .pc{
    display:none;    /* PCの要素を隠す */
  }
  .sp{
    display:block;   /* SPの要素を表示する */
  }

  /* ★ SP用の注釈スタイル */
  .notice{
    text-align: right;
    line-height: 1.2;
    font-size: 2vw;       /* 画面幅の2%の小さな文字 */
  }

  /* ★ SP用の画像設定 */
  img{
    width: 100%;
    height: auto;          /* 高さを自動で縦横比を維持 */
  }

  /* ★ SP用のtopクラス */
  div .top{
    margin-top: 4vw;
  }

  /* ★ SP用の固定ヘッダー（prihead） */
  /* スマホではフォントサイズをvwに変更し、画面幅に合わせます */
  #prihead {
    font-size: 4.2vw;
    z-index: 20;
    padding: 2vw 0;
  }
  #prihead #CDT {
    width: 100%;           /* 幅を100%に（PCは960px固定だった） */
    padding: .4rem 0;
    font-size: 3.2vw;
  }
  #prihead #CDT .count_num {
    display: inline-block;
    padding: 0 1vw;
    margin: 0 1vw;
    border-radius: 3px;
    color: #333;
    font-size: 140%;
    background: #fff;
  }

  /* ★ SP用のセクション設定 */
  /* padding と width をスマホ向けに調整 */
  section{
    padding: 8vw 4vw;      /* 上下に8vw、左右に4vwの余白 */
  }
  .sec_inner {
    width: 95%;             /* 幅を95%に（PCは960px固定だった） */
    margin: 0 auto;
  }
  .sub_head{
    margin-bottom: 2vw;
    font-size: 5vw;         /* 画面幅の5%の文字サイズ */
  }
  .sub_head img{
    width: 95%;
  }
  .sec_top{
    padding-top: 10vw;
  }
  .sec_wrap {
    max-width: 100%;
    padding: 6vw 0;
  }

  /* ★ SP用の画像スタイル */
  /* 連続する画像の余白をリセットし、幅を100%に */
  img + img {
    margin-top: 0;
  }
  img {
    max-width: 100%;
    vertical-align: bottom;   /* 画像下の隙間を消す（img特有の問題を修正） */
    width: 100%;
  }

  /* ★ SP用の左右配置画像 */
  /* スマホでは左右配置を解除して中央寄せ・幅75%に */
  .img_right, .img_left {
    margin: 0 auto 1em;    /* 中央寄せ＋下に余白 */
    width: 75%;             /* 幅75%に */
    float: none;            /* 浮動配置を解除 */
  }

  /* ★ SP用のprihead追加スタイル */
  /* 下にボーダー線を追加して区切りを明確にします */
  #prihead{
    border-bottom: 1px solid #eef8ff;   /* 薄い青の下線 */
  }
  #prihead #CDT{
    width:100%;
    font-size:3.2vw;
    padding:1.5vw 0;
  }
  #prihead #CDT .count_num{
    margin: 0;
    font-size: 4vw;
  }

  /* ★ SP用のヘッダーh1 */
  /* スマホではグラデーション背景を無しにします */
  header h1{
    background: none;
  }

/* ★ メディアクエリの閉じカッコ */
/* ここでスマートフォン用のスタイル定義が終わりです */
}