@charset "UTF-8";
/* ============================================================
   lower.css — 下層ページ共通
   ------------------------------------------------------------
   TOPのヘッダーはメインビジュアルに重ねる前提（白文字・背景透過）で、
   1画面ぶんスクロールして初めて .is-scrolled が付く設計になっている。
   下層ページにはメインビジュアルが無いため、そのままだと
   「白文字のヘッダーが明るい背景に重なって読めない」状態になる。

   コーディング指示書の「headerは2パターン（②TOPのheroを抜けた後と下層）」に沿って、
   下層では最初から追従ヘッダーの見た目を適用する。

   TOP（body.home）には一切影響しない。
============================================================ */

/* ------------------------------------------------------------
   改行位置：単語・文節の途中で折り返さない（総合FB No.7）
   対応ブラウザ（Chrome系）のみ有効。非対応ブラウザでは無視され従来どおり。
------------------------------------------------------------ */
body:not(.home) { word-break: auto-phrase; }

/* ------------------------------------------------------------
   ヘッダー：下層は最初から追従状態の見た目にする
------------------------------------------------------------ */
body:not(.home) .header {
  position: fixed;
  background: var(--c-gold-light);
  color: var(--c-white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
/* 固定ヘッダーのぶん、本文を下げる */
body:not(.home) .main {
  padding-top: var(--header-h);
}

/* ヒーロー無し下層は最初から追従状態＝SEOテキストは出さない（追従デザイン準拠）。
   ヒーロー付き（has-hero）の透過状態では表示され、is-scrolled になれば
   top.css 側の指定で消える */
body:not(.home):not(.has-hero) .header .header__seo-text {
  display: none;
}

/* ------------------------------------------------------------
   ヒーロー付き下層ページ（body.has-hero）
   ------------------------------------------------------------
   ドクター紹介・FAQ など、PSDでヘッダーがヒーロー画像の上に
   透過で重なっているページ。inc/page-scope.php の
   wingclinic_hero_pages() に載せたページに has-hero が付く。

   挙動はTOPと同じ：最初は透過・白文字、ヒーローを抜けたら
   JS（main.js initScrollUI）が .is-scrolled を付けて白背景に。
   上の「下層は最初から追従状態」の指定を、このクラスで打ち消す。
------------------------------------------------------------ */
body.has-hero .header:not(.is-scrolled) {
  position: absolute;
  background: transparent;
  color: var(--c-white);
  box-shadow: none;
}
body.has-hero .header:not(.is-scrolled) .header__logo img {
  filter: none;
}
body.has-hero .main {
  padding-top: 0;
}
/* パンくずはヒーロー内（h1直下）にテンプレート側で出す（wingclinic_breadcrumb('hero')）。
   header.php の自動出力はPHP側で止めている（構造化データの重複防止）が、
   万一出ても崩れないよう保険で隠しておく。 */
body.has-hero .main > .l-breadcrumb {
  display: none;
}

/* --- ヒーロー本体 --- */
.p-hero {
  position: relative;
  height: 669px;                 /* PSD: hero/7aced2 の下端 */
  /* 運用：元画像が支給されたら assets/images/hero/{slug}.jpg を置き、
     テンプレートの --hero-img で指定するだけ。
     写真は右側に配置し、左端は ::after のマスクでティールに溶かす
     （先方イメージ：左はベタ＋h1、右に写真の左右グラデ合成）ので
     画像側の加工は不要。濃さはページ側で --hero-tint を上書き。
     画像が無い間はティールのグラデーションのみ。
     推奨支給サイズ：横1920×縦700目安（被写体は右側2/3） */
  background-image:
    linear-gradient(180deg, #3fa6b6 0%, #51b8c8 169px, #7aced2 100%);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--c-white);
}
/* 写真レイヤー：右配置・左端をフェードしてティールに馴染ませる */
.p-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hero-tint, rgba(122, 206, 210, .55)), var(--hero-tint, rgba(122, 206, 210, .55))),
    var(--hero-img, none);
  background-position: center, right center;
  background-size: cover, cover;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 55%);
          mask-image: linear-gradient(90deg, transparent 18%, #000 55%);
  pointer-events: none;
  z-index: 0; /* タイトル・CV・上部グラデより背面（::afterは描画順が最後のため明示） */
}
/* 画像未支給ページはフェードレイヤー自体を出さない */
.p-hero:not([style*="--hero-img"])::after { display: none; }

/* ヘッダー文字の可読性用グラデーション（PSD「レイヤー 1172」0〜395px） */
.p-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 395px;
  background: linear-gradient(180deg, rgba(33, 95, 104, .55) 0%, rgba(33, 95, 104, 0) 100%);
  pointer-events: none;
  z-index: 1; /* 写真フェードレイヤーより手前 */
}
/* 加工済み（グラデ等込み）の支給画像をそのまま全面に敷くタイプ。
   画像を assets/images/hero/{slug}_plain.jpg の名前で置くと自動でこのモードになる
   （inc/page-scope.php の wingclinic_hero_attrs() が p-hero--plain を付与）。
   ティント・右寄せ・左フェードを外す（上部の可読性グラデは残す） */
.p-hero--plain::after {
  background-image: var(--hero-img, none); /* ティントなし1枚だけ */
  background-position: center;
  background-size: cover;
  -webkit-mask-image: none;
          mask-image: none;
}

.p-hero__title {
  position: absolute;
  z-index: 2;
  left: 86px;                    /* PSD: (86, 377) */
  top: 377px;
  line-height: 1;
}
.p-hero__en {
  display: block;
  font-family: var(--ff-en);
  font-size: 16px;
  line-height: 24px;
  opacity: .8;
}
.p-hero__ja {
  margin: 10px 0 0;              /* PSD: 英字 377 → 日本語 411 */
  font-size: 36px;
  font-weight: 400;
  letter-spacing: .3em;
  line-height: 1;
}
/* h1直下のパンくず（inc/breadcrumb.php の hero 変種）。
   文字組みは下の .c-breadcrumb 共通を使い、ここでは白抜きと余白だけ */
.p-hero__breadcrumb {
  margin: 24px 0 0;
  opacity: .8;
}
.p-hero__breadcrumb .c-breadcrumb {
  /* absolute配置の .p-hero__title 内なので、省略用の幅上限を自前で持つ */
  max-width: calc(100vw - 102px);   /* 左86px＋右16px */
  color: var(--c-white);
}
.p-hero__breadcrumb .c-breadcrumb a,
.p-hero__breadcrumb .c-breadcrumb span {
  color: var(--c-white);
}

/* ヒーロー下端にまたがるCV（PSD: HT_CVボタン 970x120 / y608〜728） */
.p-hero__cv {
  position: absolute;
  left: 50%;
  bottom: -59px;
  z-index: 3;
  transform: translateX(-50%);
  width: 970px;
  max-width: 92%;
}
.p-hero__cv .header-cv {
  width: 100%;
  margin: 0;
}
.p-hero__cv .header-cv__name {
  width: 170px;                  /* PSD: 長方形 588 */
  background: var(--c-gold-light);
}

/* ------------------------------------------------------------
   ヘッダー追従CV（電話 / WEB予約 / LINE）
   ------------------------------------------------------------
   TOPでは .header.is-scrolled が付いたときだけ出る作りだが、
   下層は最初から追従状態なのでそのままでは出ない。
   SPで下層を見ている人に予約導線が出ないのは機会損失が大きいため、
   下層ではSP時に常時表示する。

   PCでは出さない。PC版のCVは情報量が多く、
   下層の全ページに置くとヘッダーが重くなりすぎるため。
   （PCはヘッダー右端の電話アイコンが導線になる）

   表示に問題が出たら functions.php の WINGCLINIC_LOWER_CV を
   false にすれば出力ごと止まる。
------------------------------------------------------------ */
body:not(.home) .header .header-cv {
  display: none;
}

/* ------------------------------------------------------------
   パンくず
   header.php が下層ページで自動出力する。
   旧テーマのCSSは .l-legacy スコープに閉じ込めてあるため、
   ここでグローバルのスタイルを当てる。
------------------------------------------------------------ */
.l-breadcrumb {
  padding: 18px 0 6px;
}
.l-breadcrumb .l-container,
.l-breadcrumb > .l-container {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: 20px;
}
.c-breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--ff-serif);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--c-text);
  /* 長くなったら折り返さず省略する */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* olのまま1行で並べる（inlineなら親のellipsisが効く） */
.c-breadcrumb li {
  display: inline;
}
.c-breadcrumb li + li::before {
  content: ">";
  margin: 0 8px;
}
.c-breadcrumb a {
  color: var(--c-text);
  text-decoration: none;
  transition: opacity .2s var(--ease-out);
}
.c-breadcrumb a:hover {
  opacity: .7;
}
.c-breadcrumb span {
  color: var(--c-text-dark);
}

/* ------------------------------------------------------------
   SP
------------------------------------------------------------ */
@media (max-width: 768px) {
  /* 追従CVを常時表示し、そのぶん本文を下げる */
  body:not(.home) .header .header-cv {
    display: flex;
  }
  body:not(.home) .main {
    /* 追従CVバーはSPでは画面下部固定（top.css）になったため、
       上に必要なのは固定ヘッダーぶんだけ。旧：124px（ヘッダー+バー時代の名残） */
    padding-top: var(--header-h);
  }
  .l-breadcrumb {
    padding: 12px 0 4px;
  }
  /* SPの左右余白統一：16px */
  .l-breadcrumb .l-container,
  .l-breadcrumb > .l-container { padding-inline: 16px; }
  /* ヒーロー付きページ：SPはヘッダー内のCVを使うのでヒーロー側は出さない */
  body.has-hero .main { padding-top: 0; }
  .p-hero { height: 360px; }
  .p-hero::before { height: 160px; }
  .p-hero__title { left: 16px; top: 190px; } /* SP余白統一 */
  .p-hero__ja { font-size: 26px; letter-spacing: .2em; }
  .p-hero__breadcrumb { margin-top: 16px; }
  .p-hero__breadcrumb .c-breadcrumb { max-width: calc(100vw - 32px); }
  .p-hero__cv { display: none; }
  .c-breadcrumb {
    font-size: 11px;
  }
}

/* ------------------------------------------------------------
   移植ページのトンマナ合わせ（層3の補助）
   ------------------------------------------------------------
   層3は「旧CSSから font-family を除去して游明朝を継承させる」方式。
   ここではそれに加えて、旧CSSが指定していない挙動だけを足す。

   旧CSSが値を持っている箇所（色・サイズ・余白）には触らない。
   触ると特異度の勝負になり、ページごとに崩れ方が変わるため。
------------------------------------------------------------ */

/* リンクのホバー：指示書の「オンマウス時は opacity: 0.7」に統一。
   旧CSSはホバー未指定の箇所が多く、足しても既存指定を壊さない。 */
.l-legacy a,
.l-legacy button {
  transition: opacity .2s var(--ease-out, ease);
}
.l-legacy a:hover,
.l-legacy button:hover {
  opacity: .7;
}

/* 選択範囲を新デザインのアクセントカラーに */
.l-legacy ::selection {
  background: var(--c-teal-light);
  color: var(--c-text-dark);
}

/* フォーカスリング（キーボード操作時のみ）。旧CSSには無い */
.l-legacy a:focus-visible,
.l-legacy button:focus-visible,
.l-legacy input:focus-visible,
.l-legacy textarea:focus-visible,
.l-legacy select:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 2px;
}

/* 画像がコンテナを越えないようにする保険 */
.l-legacy img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------
   お知らせ（カスタム投稿 news）：一覧・詳細
   ------------------------------------------------------------
   部品（.news__date / .news__category / .news__link 等）は
   top.css のTOPニュースセクションのものを流用する。
------------------------------------------------------------ */
.news--archive {
  padding: 60px 0 80px;
}
.news--archive .news__inner {
  max-width: 960px;
  margin-inline: auto;
  padding-inline: 20px;
}
/* 一覧のタブはリンク（TOPはbutton）。見た目はbutton版と同じに */
.news--archive .news__tab a {
  position: relative;
  display: inline-block;
  padding: 6px 2px;
  color: var(--c-text);
  text-decoration: none;
}
.news--archive .news__tab.is-active a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--c-gold-light);
}
.news--archive .news__empty {
  padding: 40px 0;
  color: #6f6f6f;
  text-align: center;
}
/* ページャ（the_posts_pagination） */
.news--archive .navigation.pagination {
  margin-top: 50px;
}
.news--archive .nav-links {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.news--archive .page-numbers {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  font-family: var(--ff-en);
  color: var(--c-text);
  border: 1px solid #c5b8a5;
  text-decoration: none;
  transition: opacity .2s var(--ease-out);
}
.news--archive .page-numbers:hover { opacity: .7; }
.news--archive .page-numbers.current {
  background: var(--c-gold-light);
  border-color: var(--c-gold-light);
  color: var(--c-white);
}
.news--archive .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* --- 詳細 --- */
.news-single {
  padding: 70px 0 110px;
}
.news-single__inner {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 20px;
}
.news-single__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.news-single__title {
  margin: 18px 0 0;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(184, 148, 84, .4);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.6;
}
.news-single__body {
  margin-top: 36px;
  font-size: 15px;
  letter-spacing: .06em;
  line-height: 2;
}
.news-single__body p { margin: 0 0 1.5em; }
.news-single__body img { max-width: 100%; height: auto; }
.news-single__body a { color: var(--c-teal); }
.news-single__back {
  display: block;
  width: fit-content;
  margin: 60px auto 0;
}

@media (max-width: 768px) {
  .news--archive { padding: 40px 0 70px; }
  .news--archive .news__inner,
  .news-single__inner { padding-inline: 16px; }
  .news--archive .news__tabs { gap: 20px; margin-top: 32px; font-size: 13px; flex-wrap: wrap; }
  .news-single { padding: 30px 0 70px; }
  .news-single__title { font-size: 21px; }
  .news-single__body { font-size: 14px; }
}

/* ============================================================
   下層共通コンポーネント（料金表ベースで共通化）
   ------------------------------------------------------------
   ・帯（.p-band）           … ティール背景のページ上部帯。--hero-img で写真レイヤー
   ・見出し                  … TOP共通の .section-title をそのまま使う
                               （帯の中では透かしを .15 に落とす）
   ・タブ（.p-tabs / .p-tab）… 白地×金枠のリンクボタン列。見た目のみ共通、
                               レイアウト（幅・折返し・flex）はページ側で指定
   数値は4の倍数（最低でも偶数）に正規化してある。
============================================================ */
.p-band {
  position: relative;
  padding: 100px 16px 60px;
  background: var(--c-teal);
  color: var(--c-white);
}
/* 任意のヒーロー画像レイヤー（--hero-img 指定時のみ）：
   下層共通ヒーロー（.p-hero::after）と同じ「右に写真・左はティールに溶ける」 */
.p-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(var(--hero-tint, rgba(122, 206, 210, .55)), var(--hero-tint, rgba(122, 206, 210, .55))),
    var(--hero-img, none);
  background-position: center, right center;
  background-size: cover, cover;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 55%);
          mask-image: linear-gradient(90deg, transparent 18%, #000 55%);
  pointer-events: none;
}
.p-band:not([style*="--hero-img"])::before { display: none; }
.p-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1000px;
  margin-inline: auto;
}
.p-band .section-title__en { opacity: .15; }
/* 見出し下の羽アイコン（TOPと同一アセット） */
.p-band__icon {
  display: block;
  width: 24px;
  height: 32px;
  margin: 16px auto 0;
  background: url("../images/common/icon_feather.png") no-repeat center / contain;
}
.p-band__lead {
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 36px;
  text-align: center;
}

/* --- タブ（白地×金枠。レイアウトはページ側） --- */
.p-tabs {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
}
.p-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  background: var(--c-white);
  border: 1px solid #927957;
  color: #927957;
  font-size: 16px;
  line-height: 36px;
  text-decoration: none;
  transition: opacity .2s var(--ease-out, ease);
}
.p-tab:hover { opacity: .7; }
.p-tab span { text-align: center; }
/* 下向きの小三角（料金表デザイン準拠）。
   ラベルを真の中央に置くため絶対配置にする */
.p-tab::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 6px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* 帯内のページ内遷移タブ（料金表・FAQ）だけデザイン準拠に：
   縁は2pxの金グラデ、矢印は塗り三角ではなく線のシェブロン。
   ※LP側のボタン（.p-qr__btn等）は .p-band 外なので影響しない */
.p-band .p-tab {
  border: 2px solid transparent;
  border-image: linear-gradient(90deg, #a8824f 0%, #d3b273 30%, #f0e2b4 50%, #d3b273 70%, #a8824f 100%) 1; /* 横グラデ：中央ハイライトの金 */
}
.p-band .p-tab::after {
  width: 9px;
  height: 9px;
  background: none;
  clip-path: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
}

@media (max-width: 768px) {
  .p-band { padding: 40px 16px 40px; }
  .p-band__lead { font-size: 16px; line-height: 32px; }
  .p-tabs { flex-direction: column; gap: 12px; }
  .p-tab { padding: 8px 40px; line-height: 28px; }
  .p-tab::after { right: 16px; }
}