@charset "utf-8";
/* わき外科・内科クリニック — トップ上部の新デザイン（2026-09-12 / Onbit）
 *
 * 対象: ヘッダー・グローバルナビ・☰ メニュー・ヒーロー（75 年 + 街並み）。
 * クラスはすべて wg- 接頭辞。既存の layout.css / common.css とは別物として同居する。
 * 既存 CSS の要素セレクタ（header { position: fixed } など）だけは、ここで打ち消す。
 *
 * 戻し方: header.php / index.php を backup-before/ の原本に戻し、この CSS の <link> を外す。
 */

:root {
  --wg-green: #31986F;
  --wg-green-dark: #1F7A56;
  --wg-green-pale: #EAF4EE;
  --wg-hero-bg: #E8EEE1;
  --wg-ink: #4A4741;
  --wg-ink-soft: #6E6A62;
  --wg-ink-faint: #9A958C;
  --wg-line: #E7E3DA;
  --wg-white: #fff;
  --wg-sans: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic W4 JIS2004",
             "Segoe UI", sans-serif;
}

/* ── 既存 CSS の打ち消し（要素セレクタで当たってくるもの）──────────── */
header.wg-head { position: static; height: auto; width: auto; z-index: auto; background: var(--wg-white); }
header.wg-head h1 { position: static; left: auto; width: auto; }
.wg-head, .wg-nav, .wg-hero-town { font-family: var(--wg-sans); line-height: 1.7; box-sizing: border-box; }
.wg-head *, .wg-nav *, .wg-hero-town * { box-sizing: border-box; }
.wg-head ul, .wg-nav ul { list-style: none; margin: 0; padding: 0; }
.wg-head a img, .wg-nav a img { transition: none; }
.wg-head a:hover img { opacity: 1; }
/* 旧: モバイルは固定ヘッダーぶん .container に 60px の上余白 → 新ヘッダーは固定しないので不要 */
.container { padding-top: 0 !important; }
/* 旧: ハンバーガーの引き出しナビは残しておくが（footer.php の JS が探すため）表示しない */
.drawer-nav, .drawer-overlay { display: none !important; }

.wg-wrap { width: min(100% - 2.4rem, 1120px); margin-inline: auto; }

/* ══════════════════════════════════════════════
   ヘッダー: ロゴ → 電話番号 → アクセス → Q&A → 医療関係の皆さんへ
   ══════════════════════════════════════════════ */
.wg-head { border-bottom: 1px solid var(--wg-line); }
.wg-head .wg-wrap { display: flex; align-items: center; gap: 1.2rem; padding-block: .8rem; flex-wrap: wrap; }
.wg-head .wg-logo { flex: none; display: flex; align-items: center; text-decoration: none; }
.wg-head .wg-logo img { height: clamp(40px, 5vw, 54px); width: auto; }
.wg-head .wg-logo-sp { display: none; }
.wg-head .wg-sister { display: flex; align-items: center; }
.wg-head .wg-sister img { height: 38px; width: auto; }
.wg-head .wg-util { margin-left: auto; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.wg-head .wg-tel {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 700;
  color: var(--wg-green-dark); text-decoration: none; letter-spacing: .02em;
}
.wg-head .wg-tel svg { width: 1em; height: 1em; color: var(--wg-green); flex: none; }
.wg-head .wg-tel small { display: block; font-size: .58rem; font-weight: 500;
                         color: var(--wg-ink-faint); letter-spacing: .08em; }
.wg-head .wg-util a.wg-btn {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  padding: .45rem 1rem; border-radius: 999px; font-size: .84rem; font-weight: 500;
  text-decoration: none; border: 1.5px solid var(--wg-green); color: var(--wg-green-dark);
  background: var(--wg-white);
}
.wg-head .wg-util a.wg-btn svg { width: 1em; height: 1em; }
.wg-head .wg-util a.wg-btn--fill { background: var(--wg-green); border-color: var(--wg-green); color: #fff; }

/* ══════════════════════════════════════════════
   グローバルナビ（現行と同じ並び。3 サイトがタブで並ぶ）
   ══════════════════════════════════════════════ */
.wg-nav { background: var(--wg-green); }
.wg-nav > ul { display: flex; justify-content: center; flex-wrap: wrap; }
.wg-nav > ul > li + li { border-left: 1px solid rgba(255,255,255,.35); }
.wg-nav a { display: block; padding: .75rem 1.35rem; color: #fff; text-decoration: none; font-size: .92rem; }
.wg-nav a:hover { background: rgba(0,0,0,.12); }
.wg-nav a.wg-tab-fio { background: #E9C7CC; color: #7E4952; }
.wg-nav a.wg-tab-fio:hover { background: #DFB3BA; }
.wg-nav a.wg-tab-kids { background: #DAA921; color: #fff; }
.wg-nav a.wg-tab-kids:hover { background: #C9922B; }

/* ☰ メニュー（<details> なので JS なしで開く） */
.wg-nav .wg-menu { position: relative; flex: none; }
.wg-nav .wg-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .55rem;
  padding: .75rem 1.35rem; color: #fff; font-size: .92rem; background: var(--wg-green-dark); white-space: nowrap; }
.wg-nav .wg-menu summary::-webkit-details-marker { display: none; }
.wg-nav .wg-menu .wg-bars { width: 18px; height: 2px; background: #fff; position: relative; display: inline-block; }
.wg-nav .wg-menu .wg-bars::before, .wg-nav .wg-menu .wg-bars::after { content: ""; position: absolute; left: 0;
  width: 18px; height: 2px; background: #fff; }
.wg-nav .wg-menu .wg-bars::before { top: -6px; } .wg-nav .wg-menu .wg-bars::after { top: 6px; }
/* 重なり順: 75 周年のポップアップ(.modal) > 開いた ☰ メニュー > ナビ > スライダーの矢印(bxSlider 9999) */
.modal { z-index: 10010; }
.wg-nav { position: relative; z-index: 10000; }
.wg-nav .wg-menu-list { position: absolute; left: 0; top: 100%; z-index: 10001; min-width: 520px;
  margin: 0; padding: .5rem 0; background: #fff; border-radius: 0 0 14px 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18); display: grid; grid-template-columns: 1fr 1fr; }
.wg-nav .wg-menu-list li { border: 0; }
.wg-nav .wg-menu-list a { color: var(--wg-ink); font-size: .88rem; padding: .55rem 1.2rem; text-align: left; white-space: nowrap; }
.wg-nav .wg-menu-list a:hover { background: var(--wg-green-pale); color: var(--wg-green-dark); }

/* ══════════════════════════════════════════════
   ヒーロー: 75 年 + 仏生山の街並み（デザイナーの原画）
   ══════════════════════════════════════════════ */
.wg-hero-town { position: relative; overflow: hidden; background: var(--wg-hero-bg); padding-top: clamp(1rem, 3vw, 3rem); }
.wg-hero-town .wg-copy { position: relative; z-index: 1; text-align: left; padding-block: 2rem 0; }
.wg-hero-town .wg-eyebrow { margin: 0 0 1.5rem; font-size: .84rem; letter-spacing: .1em; color: var(--wg-green-dark); }
.wg-hero-town h1 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.7rem); font-weight: 700; line-height: 1.5;
                   letter-spacing: .02em; color: var(--wg-green-dark); text-wrap: balance;
                   position: static; width: auto; height: auto; }
.wg-hero-town .wg-hero-intro { font-size: .7em; }
.wg-hero-town .wg-hero-years { font-size: clamp(5rem, 11vw, 9rem); line-height: 1.05; font-weight: 500; letter-spacing: -.06em; }
.wg-hero-town .wg-depts { margin: 1.6rem 0 0; max-width: 38em; font-size: .9rem; line-height: 1.9;
                          color: var(--wg-ink-soft); letter-spacing: .04em; }
.wg-hero-town .wg-scroller { margin-top: 1.5rem; overflow: hidden; }
.wg-hero-town .wg-machinami { display: block; width: 100%; max-width: 100%; height: auto; }

/* ══════════════════════════════════════════════
   スマホ
   ══════════════════════════════════════════════ */
@media (max-width: 640px) {
  .wg-head .wg-wrap { gap: .6rem; }
  .wg-head .wg-sister { display: none; }
  .wg-head .wg-logo-pc { display: none; }
  .wg-head .wg-logo-sp { display: block; height: 52px; }
  .wg-head .wg-util { width: 100%; margin-left: 0; justify-content: flex-start; gap: .5rem; }
  .wg-head .wg-tel { flex-basis: 100%; }
  .wg-head .wg-util a.wg-btn { white-space: normal; font-size: .8rem; padding-inline: .8rem; }
  .wg-nav { position: relative; }
  .wg-nav > ul { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .wg-nav > ul::-webkit-scrollbar { display: none; }
  .wg-nav > ul > li + li { border-left: none; }
  .wg-nav a { white-space: nowrap; padding: .7rem 1rem; font-size: .86rem; }
  .wg-nav .wg-menu { position: static; }
  .wg-nav .wg-menu-list { position: absolute; top: 100%; left: 0; right: 0; min-width: 0;
    grid-template-columns: 1fr 1fr; max-height: 70vh; overflow-y: auto; border-radius: 0 0 14px 14px; }
  .wg-nav .wg-menu-list a { white-space: normal; font-size: .84rem; padding: .6rem .9rem; }
  .wg-hero-town h1 br { display: block; }
  .wg-hero-town .wg-copy { padding-top: 1rem; }
  .wg-hero-town .wg-eyebrow { font-size: .7rem; letter-spacing: .02em; }
  .wg-hero-town .wg-depts { font-size: .8rem; }
  /* 街並みはスマホでは絵を大きく保つため左右を切る */
  .wg-hero-town .wg-machinami { width: 165%; max-width: none; margin-left: -30%; }
  /* 下バー（現行の .footerNavSP）に本文が隠れないように */
  body { padding-bottom: 50px; }
}

/* ══════════════════════════════════════════════
   当院でできること — バナー 9 枚の横スクロール（2026-09-12）
   画像・行き先は現行のまま。JS が動かなくても指で送れる。
   ══════════════════════════════════════════════ */
.wg-bnrs-sec { background: #FDFBF5; padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(1.6rem, 3vw, 2.4rem);
               font-family: var(--wg-sans); }
.wg-bnrs-sec * { box-sizing: border-box; }
.wg-bnrs-sec .wg-h2 { margin: 0 0 1.8rem; text-align: center; font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 700; color: var(--wg-green-dark); letter-spacing: .04em; line-height: 1.5;
  position: static; width: auto; height: auto; background: none; padding: 0; }
.wg-bnrs-sec .wg-h2 .wg-u { display: block; width: 190px; height: auto; margin: .35rem auto 0; }
.wg-bnrs-wrap { position: relative; }
.wg-bnrs { --h: clamp(118px, 12.5vw, 160px);   /* 元画像の高さ 160px を超えて拡大しない */
  display: flex; gap: .9rem; overflow-x: auto;
  scrollbar-width: none; padding: .3rem .2rem .8rem;
  -webkit-overflow-scrolling: touch; }
.wg-bnrs::-webkit-scrollbar { display: none; }
.wg-bnrs a { flex: none; display: block; height: var(--h);
  border-radius: 12px; overflow: hidden; box-shadow: 0 2px 14px rgba(80,70,50,.10); background: #fff;
  transition: transform .15s; }
.wg-bnrs a:hover { transform: translateY(-3px); }
.wg-bnrs a:hover img { opacity: 1; }
.wg-bnrs img { height: 100%; width: auto; max-width: none; display: block; }
.wg-bnrs-arrow { position: absolute; top: calc(var(--h, 160px) / 2 + .3rem); transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: #fff; color: var(--wg-green-dark); box-shadow: 0 2px 10px rgba(0,0,0,.18);
  display: grid; place-items: center; z-index: 2; }
.wg-bnrs-arrow svg { width: 18px; height: 18px; }
.wg-bnrs-arrow:hover { background: var(--wg-green-pale); }
.wg-bnrs-arrow--prev { left: -8px; }
.wg-bnrs-arrow--next { right: -8px; }
@media (hover: none) { .wg-bnrs-arrow { display: none; } }
@media (max-width: 640px) {
  /* 次の 1 枚が少しのぞく幅にして、横に続きがあると分かるようにする */
  .wg-bnrs { gap: .6rem; --h: clamp(92px, 25vw, 112px); }
}

/* ── スライダーの帯: 青（#aedded）→ 同ページ「診療のご案内」と同じ緑のぼかし（現行素材 bg_linkarea.jpg）── */
.container .keyvisual { background: #F3F8EE url(../top/images/bg_linkarea.jpg) center / cover no-repeat; }