@charset "utf-8";
/* しがき先生クリニック トップ 自作セクション（Figma忠実）*/

#fh-main{ font-family:var(--sc-mincho); color:var(--sc-text); }
#fh-main img{ max-width:100%; height:auto; display:block; }
.fh-center{ text-align:center; }
.fh-lead{ text-align:center; color:var(--sc-text); font-size:15px; line-height:2; margin:0 auto 40px; max-width:760px; }

/* ---- 共通セクション見出し ---- */
.fh-sechead{ text-align:center; margin:0 0 34px; }
.fh-sechead__en{ text-transform:uppercase; letter-spacing:.28em; font-size:12px; color:var(--sc-gold-dark); margin:0 0 10px; font-family:Arial,sans-serif; }
.fh-sechead__ja{ font-family:var(--sc-mincho); font-size:30px; font-weight:600; color:var(--sc-text-deep); position:relative; padding-bottom:20px; margin:0; letter-spacing:.06em; }
.fh-sechead__ja:after{ content:""; position:absolute; left:50%; bottom:0; width:46px; height:2px; margin-left:-23px; background:var(--sc-gold); }

/* ---- 共通ボタン（Figma準拠：通常CTAは濃茶／WEB予約のみ金／サブは白枠）---- */
.fh-btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; background:#6b5620; color:#fff!important; text-decoration:none; font-size:15px; padding:17px 54px; letter-spacing:.08em; transition:.25s; }
.fh-btn:hover{ background:#54441a; }
.fh-btn:after{ content:"›"; font-size:18px; line-height:1; opacity:.9; }
.fh-btn--lg{ background:var(--sc-gold); flex-direction:column; gap:2px; padding:22px 70px; font-size:18px; }
.fh-btn--lg:hover{ background:var(--sc-gold-dark); }
.fh-btn--lg:after{ content:none; }
.fh-btn--lg small{ display:block; font-size:11px; opacity:.9; margin-top:4px; }
.fh-btn--ghost{ background:#fff; color:var(--sc-text-deep)!important; border:1px solid var(--sc-border); }
.fh-btn--ghost:hover{ background:var(--sc-beige); }
.fh-btn--ghost:after{ content:none; }

/* ============ HERO ============ */
.fh-hero{ position:relative; background:#f3e9d8; background-size:cover!important; background-position:center right!important; background-repeat:no-repeat; overflow:hidden; }
.fh-hero:before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(255,251,244,.92) 0%, rgba(255,251,244,.55) 42%, rgba(255,251,244,0) 66%); }
.fh-hero__inner{ max-width:1180px; margin:0 auto; min-height:700px; padding:80px 40px 50px; position:relative; display:flex; align-items:center; }
.fh-hero__copy{ position:relative; z-index:3; }
.fh-hero__catch{ font-family:var(--sc-mincho); font-size:44px; font-weight:600; color:var(--sc-text-deep); line-height:1.7; letter-spacing:.04em; margin:0 0 52px; }
.fh-hero__pills{ list-style:none; margin:0; padding:0; display:flex; gap:24px; }
.fh-hero__pills li a{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:154px; height:154px; border-radius:50%; background:rgba(255,255,255,.9); border:1px solid var(--sc-gold); color:var(--sc-text-deep); text-decoration:none; font-size:16px; line-height:1.4; text-align:center; transition:.25s; }
.fh-hero__pills li a:hover{ background:#fff; box-shadow:0 6px 20px rgba(150,120,50,.18); }
.fh-pill__ic{ height:52px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:4px; }
.fh-pill__ic img{ width:52px; height:52px; object-fit:contain; }
.fh-hero__pills small{ font-size:11px; color:var(--sc-gold-dark); }
/* ヒーロー右側：廊下背景の上に院長の切り抜き（実写・透過PNG）を重ねて立たせる */
.fh-hero__photo{ align-self:flex-end; margin-left:auto; position:relative; z-index:2; line-height:0; }
.fh-hero__photo img{ display:block; width:auto; height:auto; max-height:640px; margin:0 0 -50px; }

/* ---- ヒーロー下部のお知らせバー（Figma準拠） ---- */
.fh-hero__news{ background:var(--sc-yellow); padding:16px 44px; display:flex; align-items:center; gap:26px; font-size:14px; position:relative; z-index:5; }
.fh-hero__news-label{ font-family:var(--sc-mincho); color:var(--sc-text-deep); white-space:nowrap; align-self:center; }
.fh-hero__news-list{ list-style:none; margin:0; padding:0; flex:1; min-width:0; }
.fh-hero__news-list li + li{ margin-top:8px; border-top:1px solid rgba(91,79,63,.18); padding-top:8px; }
.fh-hero__news a{ display:flex; align-items:center; gap:20px; color:var(--sc-text-deep); text-decoration:none; overflow:hidden; }
.fh-hero__news time{ white-space:nowrap; }
.fh-hero__news span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============ 主な診療内容 ============ */
.fh-services{ background:var(--sc-cream); padding:94px 20px; }
.fh-svc-grid{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.fh-svc{ background:#fff; border:1px solid var(--sc-border); }
.fh-svc a{ display:block; position:relative; padding:46px 32px 66px; text-decoration:none; color:var(--sc-text); min-height:300px; box-sizing:border-box; }
.fh-svc__icon{ display:flex; align-items:center; justify-content:center; width:88px; height:88px; border-radius:50%; background:var(--sc-beige); border:1px solid var(--sc-border); margin:0 auto 20px; }
.fh-svc__icon img{ width:54px; height:54px; object-fit:contain; }
/* ③ 自費診療バッジは丸アイコンの直下・中央（Figma準拠。旧＝カード左上absolute） */
.fh-svc__badge{ display:block; width:-moz-fit-content; width:fit-content; margin:-2px auto 12px; background:transparent; border:1px solid var(--sc-gold); color:var(--sc-gold-dark); font-size:12px; padding:3px 14px; letter-spacing:.04em; }
.fh-svc__title{ font-family:var(--sc-mincho); font-size:19px; font-weight:600; color:var(--sc-text-deep); text-align:center; margin:0 0 16px; padding-bottom:14px; border-bottom:1px solid var(--sc-border); }
.fh-svc__list{ font-size:14px; line-height:2; color:var(--sc-text); }
/* ④ 「詳しく見る →」はカード下部中央（旧＝右寄せ） */
.fh-svc__more{ position:absolute; left:0; right:0; bottom:22px; text-align:center; color:var(--sc-gold-dark); font-size:13px; }

/* ============ お知らせ ============ */
.fh-news{ background:#fff; padding:84px 20px; }
.fh-news__list{ list-style:none; max-width:920px; margin:0 auto 40px; padding:0; }
.fh-news__list li{ border-bottom:1px solid var(--sc-border); }
.fh-news__list a{ display:flex; align-items:center; gap:22px; padding:22px 6px; text-decoration:none; color:var(--sc-text); }
.fh-news__list time{ color:var(--sc-gold-dark); font-size:14px; }
.fh-news__cat{ background:var(--sc-gold); color:#fff; font-size:11px; padding:3px 14px; }
.fh-news__ttl{ font-size:15px; }

/* ============ 3リンク（Figma準拠：全幅の写真カードに白文字を重ねる）============ */
.fh-links{ background:none; padding:0; }
.fh-links__grid{ max-width:none; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.fh-lcard{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:310px; padding:30px 26px; text-align:center; text-decoration:none;
  background:#8c7f6a center/cover no-repeat; overflow:hidden; }
.fh-lcard:before{ content:""; position:absolute; inset:0; background:rgba(58,48,32,.48); transition:.3s; }
.fh-lcard:hover:before{ background:rgba(58,48,32,.34); }
.fh-lcard > span{ position:relative; z-index:2; }
.fh-lcard__ph{ display:none; }
.fh-lcard__ttl{ display:block; font-family:var(--sc-mincho); font-size:23px; color:#fff; margin:0 0 14px; letter-spacing:.06em; }
.fh-lcard__txt{ display:block; font-size:13px; line-height:1.9; color:#fff; max-width:280px; }
.fh-lcard__more{ display:inline-block; margin-top:20px; background:#fff; color:var(--sc-text-deep); font-size:13px; padding:11px 34px; letter-spacing:.06em; }

/* ============ 診察時間 ============ */
.fh-hours{ background:var(--sc-cream); padding:84px 20px; }
.fh-hours__table{ border-collapse:collapse; margin:0 auto 28px; max-width:920px; width:100%; background:#fff; }
.fh-hours__table th,.fh-hours__table td{ border:1px solid var(--sc-border); text-align:center; padding:18px 6px; font-size:16px; }
.fh-hours__table thead th{ background:var(--sc-gold); color:#fff; font-weight:normal; }
.fh-hours__table tbody th{ background:var(--sc-beige); color:var(--sc-text-deep); white-space:nowrap; }
.fh-hours__table small{ font-size:11px; color:var(--sc-gold-dark); }
.fh-hours__table td{ color:var(--sc-gold-dark); font-size:16px; }
.fh-hours__note{ text-align:center; font-size:13px; color:#c0392b; line-height:1.9; margin:14px 0; }
.fh-hours .fh-center{ margin:30px 0 6px; }

/* ============ 院長メッセージ ============ */
.fh-message{ background:var(--sc-cream); padding:84px 20px; }
.fh-message__inner{ max-width:1000px; margin:0 auto; display:flex; gap:56px; align-items:center; }
.fh-message__photo{ flex:0 0 40%; }
.fh-message__catch{ font-family:var(--sc-mincho); font-size:22px; color:var(--sc-text-deep); line-height:1.7; margin:0 0 22px; }
.fh-message__txt{ font-size:14px; line-height:2.1; color:var(--sc-text); margin:0 0 24px; }
.fh-message__sign{ margin:0 0 26px; line-height:1.8; }
.fh-message__sign small{ color:var(--sc-text); font-size:13px; }
.fh-message__sign strong{ font-family:var(--sc-mincho); font-size:22px; color:var(--sc-text-deep); font-weight:600; letter-spacing:.1em; }
/* 「医師紹介を見る」ボタンを中央寄せ */
.fh-message__body .fh-btn{ display:flex; width:-moz-fit-content; width:fit-content; margin-left:auto; margin-right:auto; }

/* ============ SNS（旧YouTube）============ */
.fh-youtube{ background:var(--sc-cream); padding:84px 20px; }
.fh-youtube__embed{ max-width:760px; aspect-ratio:16/9; margin:0 auto 34px; background:#e9e2d5; display:flex; align-items:center; justify-content:center; color:#a99; font-size:14px; overflow:hidden; }
/* YouTubeサムネイル（チャンネルへリンク・再生ボタン重ね）*/
.fh-youtube__thumb{ display:block; position:relative; width:100%; height:100%; line-height:0; }
.fh-youtube__thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.fh-youtube__thumb:hover img{ transform:scale(1.03); }
.fh-youtube__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:82px; height:58px; border-radius:14px; background:rgba(200,30,30,.92); transition:.25s; }
.fh-youtube__play:before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-42%,-50%); border-style:solid; border-width:13px 0 13px 22px; border-color:transparent transparent transparent #fff; }
.fh-youtube__thumb:hover .fh-youtube__play{ background:#c81e1e; }
/* Figma準拠：YouTube(茶ボタン)とInstagram(白枠・IGアイコン)を縦積み中央 */
.fh-youtube__btns{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.fh-btn--ig{ min-width:360px; gap:10px; background:#fff; color:var(--sc-text-deep)!important; border:1px solid var(--sc-border); }
.fh-btn--ig:hover{ background:var(--sc-beige); }
.fh-btn--ig:after{ content:none; }
.fh-btn--line{ min-width:360px; gap:10px; background:#06c755; color:#fff!important; border:1px solid #06c755; }
.fh-btn--line:hover{ background:#05b34c; }
.fh-btn--line:after{ content:none; }
.fh-line-ic{ color:#fff; flex:0 0 auto; }
.fh-ig-ic{ color:#c9448a; flex:0 0 auto; }
.fh-ext{ font-size:13px; opacity:.65; margin-left:2px; }

/* ============ アクセス（Figma準拠：左アイコンリスト＋右マップ）============ */
.fh-access{ background:#fff; padding:84px 20px; }
.fh-access__inner{ max-width:1040px; margin:0 auto; display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:stretch; }
.fh-access__info{ padding-top:2px; }
.fh-access__row{ display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--sc-border); }
.fh-access__row:first-child{ padding-top:0; }
.fh-access__ic{ flex:0 0 auto; color:var(--sc-gold); line-height:0; padding-top:2px; }
.fh-access__label{ color:var(--sc-gold-dark); font-size:14px; margin:0 0 8px; letter-spacing:.04em; }
.fh-access__val{ font-size:15px; line-height:1.9; color:var(--sc-text); margin:0; }
.fh-access__btn{ margin-top:30px; }
.fh-access__map{ min-height:440px; background:#e9e6df; overflow:hidden; }
.fh-access__map iframe{ width:100%; height:100%; min-height:440px; border:0; display:block; }

/* ============ タブレット ============ */
@media screen and (min-width:768px) and (max-width:1024px){
  .fh-hero__catch{ font-size:32px; }
  .fh-svc-grid{ grid-template-columns:1fr 1fr; }
  .fh-links__grid{ grid-template-columns:1fr 1fr; }
  .fh-message__inner{ gap:32px; }
  .fh-sechead__ja{ font-size:26px; }
}

/* ============ SP（Figma SP版 390px 準拠）============ */
@media screen and (max-width:767px){
  /* --- ヒーロー：縦書きキャッチ＋先生＋下部の丸ボタン --- */
  .fh-hero{ background-position:72% center!important; }
  .fh-hero:before{ background:linear-gradient(90deg, rgba(255,251,244,.86) 0%, rgba(255,251,244,.35) 45%, rgba(255,251,244,0) 70%); }
  .fh-hero{ overflow:hidden!important; }
  #header_message:empty{ display:none!important; }
  .fh-hero__inner{ display:block!important; position:relative!important; height:560px!important; min-height:0!important; padding:0!important; max-width:none!important; overflow:hidden!important; }
  /* copyは静的に戻し、キャッチ／丸ボタンを個別にヒーロー基準で配置 */
  .fh-hero__copy{ position:static!important; }
  .fh-hero__catch{
    position:absolute!important; top:18px!important; left:12px!important; bottom:132px!important; z-index:3;
    writing-mode:vertical-rl; -webkit-writing-mode:vertical-rl;
    font-size:23px; line-height:1.5; letter-spacing:.08em;
    margin:0!important; height:auto!important; width:auto;
  }
  /* 先生画像：右のサイド固定ボタン（幅64px）と重ならないよう左へ寄せる */
  .fh-hero__photo{ position:absolute!important; right:74px!important; bottom:0!important; top:auto!important;
    width:auto!important; height:auto!important; max-width:284px!important; z-index:2; }
  .fh-hero__photo img{ width:auto!important; height:auto!important; max-height:470px!important; max-width:284px!important; margin:0!important; display:block; }
  /* 丸ボタン3つ：ヒーロー下部に重ねる */
  .fh-hero__pills{ position:absolute; left:0; right:0; bottom:14px; z-index:4; justify-content:center; gap:7px; padding:0 6px; pointer-events:auto; }
  .fh-hero__pills li a{ width:96px; height:96px; font-size:11.5px; line-height:1.3; border-width:1px; background:rgba(255,255,255,.94); }
  .fh-pill__ic{ height:36px; margin-bottom:2px; }
  .fh-pill__ic img{ width:34px; height:34px; }
  .fh-hero__pills small{ font-size:9px; }

  /* --- セクション共通 --- */
  .fh-sechead__ja{ font-size:22px; padding-bottom:16px; }
  .fh-sechead__en{ font-size:11px; }
  .fh-lead{ font-size:14px; line-height:1.9; padding:0 6px; margin-bottom:26px; }
  .fh-services,.fh-news,.fh-links,.fh-hours,.fh-message,.fh-youtube,.fh-access{ padding:52px 16px; }

  /* --- 診療カード：1カラム・見切れ防止 --- */
  .fh-svc-grid{ grid-template-columns:1fr; gap:18px; }
  .fh-svc a{ padding:30px 22px 48px; min-height:0; }
  .fh-svc__more{ right:20px; bottom:16px; }

  /* --- お知らせ --- */
  .fh-news__list a{ flex-wrap:wrap; gap:8px 12px; padding:16px 4px; }
  .fh-news__ttl{ flex:1 1 100%; font-size:14px; }

  /* --- 3リンク：1カラム・写真の上に文字 --- */
  .fh-links__grid{ grid-template-columns:1fr; gap:16px; }
  .fh-lcard__ph{ height:150px; }

  /* --- 診察時間：表を収める --- */
  .fh-hours__table th,.fh-hours__table td{ padding:9px 2px; font-size:12px; }
  .fh-hours__table small{ font-size:9px; }
  .fh-btn{ padding:14px 30px; font-size:14px; }
  .fh-btn--lg{ padding:18px 44px; font-size:16px; }

  /* --- 院長メッセージ：縦積み・写真フル幅 --- */
  .fh-message__inner{ flex-direction:column; gap:24px; }
  .fh-message__photo{ flex:none; width:100%; }
  .fh-message__catch{ font-size:18px; }
  .fh-message__txt{ font-size:13.5px; }

  /* --- SNS / アクセス --- */
  .fh-youtube__btns{ gap:14px; }
  .fh-btn--ig, .fh-btn--line{ min-width:0; width:100%; max-width:300px; }
  .fh-access__inner{ grid-template-columns:1fr; gap:26px; }
  .fh-access__map{ min-height:230px; }
  .fh-access__map iframe{ min-height:230px; }
  .fh-access__val{ font-size:14px; }
  .fh-access__btn{ width:100%; max-width:340px; margin:22px auto 0; }
}