@charset "UTF-8";

/* pages.css専用フォント（Noto Sans JP / 数字用Poppins）
   ※ functions.phpの既存enqueue処理を増やさないため、CSS内@importで読み込む */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Poppins:wght@400;500;600;700&display=swap');

/* ==================================================================
   眼瞼下垂ページ（page-ptosis.php 専用CSS）
   ※ ヘッダー・フッターは他ページと共通のためここには含めない
   ================================================================== */

/* ------------------------------------------------------------------
   01. Variables
   ※ --inner-width / --side-space-* など、style.cssと共通のレイアウト変数は
     ここで再定義せずstyle.css側の値をそのまま利用する（重複定義防止）
   ------------------------------------------------------------------ */
:root {
  /* Colors ── https://teine-keisei.com/ の style.css と揃えた確定カラー */
  --color-text: #2c2c2c;
  --color-text-soft: #4a4a4a;
  --color-navy: #06396e;
  --color-navy-deep: #06396e;
  --color-accent: #8ba4d5;
  --color-accent-soft: #9db2dc;
  --color-accent-line: #c6d3ec;
  --color-gold: #beab7a;
  --color-gold-line: #dccfbc;
  --color-light-blue: #87dbff;
  --color-light-blue-hover: #65caf4;
  --color-base: #e9faff;
  --color-base-deep: #d9f2fb;
  --color-white: #ffffff;
  --color-red: #d0353b;

  /* Fonts ── 日本語: Zen Kaku Gothic New / Noto Sans JP　英語: Manrope　数字: Poppins */
  --font-ja: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Manrope", var(--font-ja);
  --font-num: "Poppins", "Manrope", var(--font-ja);
}


/* ------------------------------------------------------------------
   02. Base (standalone only)
   ------------------------------------------------------------------ */
html {
  min-width: 320px;
  scroll-behavior: smooth;
}

/* 本文の基本サイズはここで一括管理する（PC: 18px）。
   TOPページ（style.css）のbody { font-size: 18px; } と揃えている。
   本文として読ませる段落・リストは、個別にfont-sizeを指定せず
   ここからの継承に任せることで、サイズをここ一箇所で統一管理する。
   見出し・ボタン・ラベル・注釈は各セレクタで独自にfont-sizeを
   指定済みのため、この変更の影響を受けない。 */
body.page-ptosis {
  min-width: 320px;
  color: var(--color-text);
  background-color: var(--color-white);
  font-family: var(--font-ja);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page-ptosis img { vertical-align: bottom; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 0;
}

.font-en { font-family: var(--font-en); }
.font-num { font-family: var(--font-num); }

/* 数字は Poppins */
.pp-step-circle__no,
.pp-num-heading__no,
.pp-step-badge span:nth-child(2),
.pp-table td,
.pp-mrd__table td { font-family: var(--font-num); }


/* ------------------------------------------------------------------
   03. Layout helpers
   ※ .l-inner / .l-main / .br-pc / .br-sp はstyle.cssで全ページ共通定義済みのため
     ここでは再定義しない（重複防止）
   ------------------------------------------------------------------ */
.pp-section {
  padding-block: 100px;
}


/* ------------------------------------------------------------------
   05. Page eyecatch
   ------------------------------------------------------------------ */
.page-eyecatch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  overflow: hidden;
}
.page-eyecatch__image {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
}
.eyecatch-title { text-align: center; }
.eyecatch-ja {
  font-family: var(--font-ja);
  font-size: 60px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.16em;
  color: var(--color-text);
}
.eyecatch-en {
  margin-top: 16px;
  font-family: var(--font-en);
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.34em;
  color: var(--color-navy);
}
.eyecatch-watermark {
  position: absolute;
  right: 5%;
  top: 50%;
  width: 190px;
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
}


/* ------------------------------------------------------------------
   06. Section heading
   ------------------------------------------------------------------ */
.pp-heading { margin-bottom: 44px; }
.pp-heading__ja {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
}
.pp-heading__mark {
  width: 46px;
  height: 48px;
  flex: 0 0 auto;
}
.pp-heading__en {
  margin-top: 3px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-navy);
}
.pp-heading--center { text-align: center; }
.pp-heading--center .pp-heading__ja { justify-content: center; }
.pp-heading--left .pp-heading__ja { justify-content: flex-start; }
.pp-heading--left .pp-heading__en { padding-left: 60px; }


/* ------------------------------------------------------------------
   07. About
   ------------------------------------------------------------------ */
/* header.phpの.has-page-mv .site背景（MV下の余白を埋める淡い水色の
   フォールバックcolor）が透けて見えないよう、このセクションは
   不透明な白背景で覆う */
.pp-about { background-color: var(--color-white); }
.pp-about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
}
/* タブレット・スマホ（1カラム表示）向けの既定スタイル。
   写真は縦横比(5:4)で高さが決まる、常に確実に表示される形にしておく */
.pp-about__figure img {
  width: 100%;
  border-radius: 18px;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
/* PC(2カラム表示、1025px以上)限定で、写真をテキスト側の高さに合わせて伸縮させる。
   figure自体をposition:relative/height:100%にし、imgをposition:absoluteで
   敷き詰めることでグリッド行の高さがテキスト側だけで決まるようにする。
   1024px以下はこのブロックの外（常時適用の縦横比表示）のみが効く。 */
@media screen and (min-width: 1025px) {
  .pp-about__figure {
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  .pp-about__figure img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: unset;
  }
}


/* ------------------------------------------------------------------
   08. Features
   ------------------------------------------------------------------ */
.pp-features { background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%); }
.pp-features__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.pp-feature-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 30px;
  background-color: var(--color-white);
  border: 8px solid var(--color-accent);
  border-radius: 22px;
}
.pp-feature-card__title {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-navy);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-gold-line);
  margin-bottom: 16px;
}
.pp-feature-card__text { line-height: 1.85; }

@media screen and (max-width: 767px) {
  .pp-feature-card__title {
    font-size: 20px;
  }
}

/* ------------------------------------------------------------------
   09. Common concerns
   ------------------------------------------------------------------ */
.pp-concern { background-color: var(--color-base); }
.pp-concern__content {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 40px;
  align-items: stretch;
}
.pp-concern__figure img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* カード側を写真の高さ(4:5の縦横比で決まる高さ)に合わせて伸縮させ、
   中身のチェックリストは上下中央に配置することで、
   余白を上下均等な「意図的な間隔」に見せつつ、パディング自体は増やさない */
.pp-concern__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--color-white);
  border-radius: 20px;
  padding: 32px 40px;
  box-shadow: 0 10px 30px rgba(11, 53, 107, 0.06);
}
.pp-checklist { display: flex; flex-direction: column; gap: 14px; }
.pp-checklist li {
  position: relative;
  padding-left: 42px;
  line-height: 1.6;
}
.pp-checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background-color: var(--color-light-blue);
}
.pp-checklist li::after {
  content: "";
  position: absolute;
  left: 8px; top: 50%;
  width: 9px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-70%) rotate(-45deg);
}


/* ------------------------------------------------------------------
   10. Classification & causes
   ------------------------------------------------------------------ */
.pp-causes {
  position: relative;
  overflow: hidden;
  background-color: var(--color-white);
}
.pp-causes > .l-inner {
  position: relative;
  z-index: 1;
}
.pp-causes__bg-logo {
  position: absolute;
  z-index: 0;
  top: 40px;
  right: -80px;
  width: 420px;
  height: auto;
  pointer-events: none;
}
.pp-cause-block { margin-top: 56px; }
.pp-cause-block:first-of-type { margin-top: 8px; }

.pp-num-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
  margin-bottom: 14px;
}
.pp-num-heading__no { flex: 0 0 auto; font-family: var(--font-en); font-size: 1.05em; letter-spacing: 0.02em; white-space: nowrap; }
.pp-num-heading__bar {
  width: 2px;
  height: 1.1em;
  flex: 0 0 auto;
  background-color: var(--color-light-blue);
}

.pp-lead-text { font-size: 18px; margin-bottom: 26px; }
.pp-para { margin: 16px 0 30px; }
.pp-para p + p { margin-top: 1.4em; }

.pp-pill {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 22px;
  padding: 15px 40px;
  border-radius: 999px;
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.pp-pill--wide {
  padding-inline: 44px;
}
.pp-cause-block > .pp-pill:not(.pp-pill--wide) { min-width: 520px; }
.pp-pill--label { margin: 0; min-width: 0; }
.pp-pill--muted { background-color: var(--color-accent-soft); }

.pp-cause-block--congenital {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 44px;
  align-items: start;
}
.pp-cause-block--congenital .pp-num-heading { margin-top: 0; }
.pp-cause-block__figure img {
  width: 100%;
  border-radius: 16px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pp-disease-grid,
.pp-op-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 30px 40px;
  margin-top: 30px;
}


/* ------------------------------------------------------------------
   11. Accordions (details / summary)
   ------------------------------------------------------------------ */
.pp-acc {
  border: 2px solid var(--color-accent);
  border-radius: 64px;
  overflow: hidden;
  background-color: var(--color-white);
}
.pp-acc[open] {
  border-radius: 24px;
}
.pp-acc__summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  background: linear-gradient(120deg, #9bb0da 0%, #8ba4d5 100%);
  color: var(--color-white);
  font-size: 22px;
  font-weight: 700;
  text-align: left;
  justify-content: flex-start;
  cursor: pointer;
}
.pp-acc__summary::-webkit-details-marker { display: none; }
.pp-acc__icon {
  position: relative;
  margin-left: auto;
  width: 16px; height: 16px;
  flex: 0 0 auto;
}
.pp-acc__icon::before {
  content: "";
  position: absolute;
  left: 1px; top: 1px;
  width: 11px; height: 11px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg);
}
.pp-acc:not([open]) > .pp-acc__body { display: none; }
.pp-acc__body {
  padding: 24px 26px 28px;
  background-color: var(--color-white);
}
.pp-acc__body p + p { margin-top: 1.2em; }

.pp-acc__alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-accent);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 16px;
  flex: 0 0 auto;
}


/* ------------------------------------------------------------------
   12. Diagnosis & treatment flow
   ------------------------------------------------------------------ */
.pp-flow {
  background-image: url("https://teine-keisei.com/wp-content/uploads/2026/09/ptosis-bg-scaled.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.pp-flow__lead { text-align: center; margin-bottom: 46px; }

.pp-steps { position: relative; margin-bottom: 60px; }
.pp-steps__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 90px;
}
.pp-step-circle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 210px; height: 210px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 2px solid var(--color-gold);
  text-align: center;
}
.pp-step-circle + .pp-step-circle::before {
  content: "";
  position: absolute;
  left: -92px;
  top: 50%;
  width: 92px;
  height: 2px;
  background-color: var(--color-gold);
}
.pp-step-circle__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition-base);
}
.pp-step-circle__link:hover { opacity: 0.88; }
.pp-step-circle__label { font-size: 25px; font-weight: 600; color: var(--color-accent); letter-spacing: 0.12em; line-height: 1.15; }
.pp-step-circle__no { font-size: 38px; font-weight: 700; color: var(--color-navy); line-height: 1.1; }
.pp-step-circle__name { font-size: 36px; font-weight: 700; color: var(--color-navy); margin-top: 2px; line-height: 1.15; }

.pp-steps__jump {
  display: flex;
  justify-content: center;
  gap: 210px;
  margin-top: 18px;
}
.pp-steps__jump a {
  font-size: 36px;
  font-weight: 700;
  color: var(--color-navy);
  border-bottom: 2px solid var(--color-navy);
  padding-bottom: 4px;
}

.pp-flow-card {
  background-color: var(--color-white);
  border-radius: 24px;
  padding: 46px 50px;
  margin-top: 34px;
  box-shadow: 0 12px 34px rgba(11, 53, 107, 0.07);
}

.pp-flow-card__head {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 34px;
}
.pp-step-badge {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 140px; height: 140px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gold);
  color: var(--color-navy);
  line-height: 1.15;
}
.pp-step-badge span:nth-child(1) { font-size: 17px; font-weight: 600; color: var(--color-accent); letter-spacing: 0.1em; }
.pp-step-badge span:nth-child(2) { font-size: 25px; font-weight: 700; }
.pp-step-badge span:nth-child(3) { font-size: 24px; font-weight: 700; }
.pp-flow-card__headtext { font-size: 22px; font-weight: 500; line-height: 1.6; padding-top: 8px; }
.pp-flow-card__headtext .pp-note { font-size: 15px; color: var(--color-text-soft); margin-top: 10px; }

.pp-flow-row {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 34px;
  align-items: start;
  padding-block: 8px 6px;
}
.pp-flow-row .pp-pill--label {
  align-self: start;
  width: 100%;
  padding-inline: 20px;
  font-size: 22px;
}

.pp-flow-card__divider {
  border: 0;
  border-top: 1px solid var(--color-accent-line);
  margin: 26px 0;
}

.pp-mrd { margin: 30px 0 6px; }
.pp-mrd img {
  display: block;
  width: min(880px, 100%);
  margin: 0 auto 10px;
}
.pp-mrd__table {
  width: min(880px, 100%);
  margin: 0 auto;
  border-collapse: collapse;
  text-align: center;
}
/* 行見出し（下垂の程度／MRD-1）はposition:absoluteで表の左外側に出し、
   テーブル幅の計算から除外することで、残る4列を画像の4列(880px幅)と
   ぴったり揃える。行の位置基準にするためtrをposition:relativeにする */
.pp-mrd__table tr { position: relative; }
.pp-mrd__table th[scope="row"] {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 10px;
  white-space: nowrap;
  text-align: left;
  font-weight: 700;
  color: var(--color-text);
}
.pp-mrd__table td { padding: 6px 4px; font-size: 15px; }
.pp-mrd__grades td { font-weight: 700; color: var(--color-navy); font-size: 16px; }


/* ------------------------------------------------------------------
   13. Fee & sub-headings
   ------------------------------------------------------------------ */
.pp-subhead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 34px;
}
.pp-subhead__title {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.06em;
}
.pp-subhead__bar {
  align-self: center;
  width: 2px; height: 26px;
  background-color: var(--color-light-blue);
}
.pp-subhead__lead { font-size: 24px; font-weight: 700; color: var(--color-text); }
.pp-subhead__note { font-size: 15px; font-weight: 700; color: var(--color-red); }

.pp-fee__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.pp-fee__col { text-align: center; }
.pp-fee__col + .pp-fee__col {
  border-left: 1px solid var(--color-gold-line);
  padding-left: 48px;
}
.pp-fee__col .pp-pill--label {
  display: block;
  width: fit-content;
  min-width: 260px;
  max-width: 100%;
  margin: 0 auto 16px;
  padding: 12px 34px;
  font-size: 17px;
}
.pp-fee__caption { font-size: 18px; color: var(--color-text-soft); margin-bottom: 14px; }

/* border-collapse:collapseのtableに直接border-radiusを付けると、
   ブラウザによって外枠線が描画されない・角が欠けるため、
   外枠と角丸は必ずラッパー側だけに付与し、overflow: hiddenで四隅を綺麗にクリップする
   （セル個別にborder-radiusを付けると、collapse時に下端の枠線が消えるなど
   ブラウザ間で挙動が不安定になるため付けないこと） */
.pp-table-wrap {
  overflow: hidden;
  border: 1px solid var(--color-accent-line);
  border-radius: 16px;
}
.pp-table {
  width: 100%;
  border-collapse: collapse;
}
.pp-table th, .pp-table td {
  border: 1px solid var(--color-accent-line);
  padding: 14px 6px;
  font-size: 18px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.pp-table thead th {
  color: var(--color-navy);
  font-weight: 700;
  background-color: #eef2fb;
}
.pp-table tbody th { font-weight: 500; color: var(--color-text); background-color: var(--color-white); }

.pp-fee__notes {
  margin-top: 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pp-fee__notes li { font-size: 15px; line-height: 1.7; color: var(--color-text-soft); }

.pp-table td {
  font-family: "Noto Sans JP", sans-serif;
}

/* ------------------------------------------------------------------
   14. Buttons
   ------------------------------------------------------------------ */
.pp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 66px;
  padding: 0 60px;
  border-radius: 999px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  transition: opacity var(--transition-base);
}
.pp-button:hover { opacity: 0.88; }
.pp-button--primary {
  background-color: var(--color-navy-deep);
  color: var(--color-white);
  box-shadow: inset 0 0 0 5px var(--color-navy-deep), inset 0 0 0 6px rgba(185, 166, 119, 0.9);
}


/* ------------------------------------------------------------------
   15. CTA (closing)
   ------------------------------------------------------------------ */
.pp-closing { padding-block: 20px; background-color: var(--color-white); }
.pp-closing .l-inner { text-align: center; }
.pp-closing__rule {
  border: 0;
  border-top: 1px solid var(--color-gold-line);
  margin: 46px 0;
}
.pp-closing__text { margin-bottom: 34px; font-size: 21px; font-weight: 500; }

@media screen and (max-width: 767px) {
  .pp-closing__text {
    font-size: 16px;
  }
}

/* ------------------------------------------------------------------
   16. FAQ
   ------------------------------------------------------------------ */
.pp-faq { background-color: var(--color-white); }
.pp-faq__lead { text-align: center; margin-bottom: 40px; }
.pp-faq__list { display: flex; flex-direction: column; gap: 30px; }

.pp-qa { border: 0; border-radius: 0; overflow: visible; background: transparent; }
.pp-qa:not([open]) > .pp-qa__a { display: none; }
.pp-qa__q {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px 18px 22px;
  background: linear-gradient(120deg, #9bb0da 0%, #8ba4d5 100%);
  color: var(--color-white);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 64px;
  position: relative;
}
.pp-qa__q::-webkit-details-marker { display: none; }
.pp-qa__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-navy);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 17px;
}
.pp-qa[open] .pp-qa__q { border-radius: 24px 24px 0 0; }

.pp-qa__a {
  display: flex;
  gap: 16px;
  padding: 24px 28px 26px;
  border: 1px solid var(--color-accent-line);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background-color: var(--color-white);
}
.pp-qa__mark--a { background-color: var(--color-gold); color: var(--color-white); }


/* ==================================================================
   18. Responsive — Tablet ( ~1024px )
   ================================================================== */
@media screen and (max-width: 1024px) {
  .pp-section { padding-block: 70px; }

  .pp-about__inner { grid-template-columns: 1fr; gap: 32px; }
  .pp-about__figure { max-width: 460px; margin: 0 auto; }

  .pp-features__list { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  .pp-concern__content { grid-template-columns: 1fr; gap: 28px; }
  .pp-concern__figure { max-width: 360px; margin: 0 auto; }
  .pp-concern__card { padding: 30px 28px; }

  .pp-cause-block--congenital { grid-template-columns: 1fr; }
  .pp-cause-block--congenital .pp-cause-block__figure { max-width: 360px; }
  .pp-disease-grid,
  .pp-op-grid { grid-template-columns: 1fr; gap: 22px; }
  .pp-cause-block > .pp-pill:not(.pp-pill--wide) { min-width: 0; }
  .pp-causes__bg-logo { width: 280px; top: 20px; right: -60px; }

  .pp-steps__list { gap: 40px; }
  .pp-step-circle { width: 160px; height: 160px; }
  .pp-step-circle + .pp-step-circle::before { left: -42px; width: 42px; }
  .pp-step-circle__label { font-size: 20px; }
  .pp-step-circle__no { font-size: 28px; }
  .pp-step-circle__name { font-size: 20px; }
  .pp-steps__jump { gap: 180px; }

  .pp-flow-card { padding: 34px 28px; }
  .pp-flow-row { grid-template-columns: 1fr; gap: 14px; }
  .pp-flow-row .pp-pill--label { width: fit-content; font-size: 18px; }

  .pp-fee__cols { grid-template-columns: 1fr; gap: 0; }
  .pp-fee__col + .pp-fee__col { border-left: 0; padding-left: 0; margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--color-gold-line); }
}


/* ==================================================================
   21. Responsive — Smartphone ( ~767px )
   ================================================================== */
@media screen and (max-width: 767px) {
  body.page-ptosis { font-size: 16px; }

  .pp-section { padding-block: 56px; }
  .pp-heading { margin-bottom: 32px; }
  .pp-heading__ja { font-size: 22px; gap: 10px; }
  .pp-heading__en { font-size: 16px; }
  .pp-heading__mark { width: 38px; height: 40px; }
  .pp-heading--center .pp-heading__ja { flex-wrap: wrap; }
  /* 「眼瞼下垂とは？」見出し（pp-heading--left）も、スマホでは
     他の見出しと同じ中央寄せにする */
  .pp-heading--left { text-align: center; }
  .pp-heading--left .pp-heading__ja { justify-content: center; flex-wrap: wrap; }
  .pp-heading--left .pp-heading__en { padding-left: 0; }

  .page-eyecatch { min-height: 220px; }
  .eyecatch-ja { font-size: 34px; }
  .eyecatch-en { font-size: 15px; }
  .eyecatch-watermark { width: 110px; right: 4%; }
  .pp-causes__bg-logo { display: none; }

  /* 本文（.pp-about__text / .pp-para p / .pp-checklist li / .pp-feature-card__text /
     .pp-flow-row__text p / .pp-acc__body p / .pp-bullets li / .pp-qa__abody p など）は
     個別に指定せず、body.page-ptosisの16px（このメディアクエリ内）を継承する。
     .pp-lead-text はリード文的な見出し要素のため、従来通り個別に14pxを指定する。 */
  .pp-lead-text { font-size: 14px; }
  .pp-flow-card__headtext { font-size: 16px; }

  .pp-features__list { grid-template-columns: 1fr; }
  .pp-feature-card { padding: 24px 22px 26px; }

  .pp-checklist li { padding-left: 36px; }

  .pp-num-heading { font-size: 20px; gap: 12px; }
  .pp-pill { font-size: 15px; padding: 12px 24px; }
  .pp-pill--wide { padding-inline: 24px; }
  .pp-cause-block > .pp-pill { width: 100%; font-size: 16px; }
  .pp-acc__summary, .pp-qa__q { font-size: 15px; padding-inline: 18px; }
  .pp-qa__mark { width: 28px; height: 28px; font-size: 15px; }

  .pp-steps__list { flex-direction: column; gap: 20px; }
  .pp-step-circle + .pp-step-circle::before {
    left: 50%; top: -20px;
    width: 2px; height: 20px;
    transform: translateX(-50%);
  }
  .pp-steps__jump { gap: 40px; margin-top: 28px; }
  .pp-steps__jump a { font-size: 18px; }

  .pp-flow-card { padding: 26px 18px; border-radius: 18px; }
  .pp-flow-card__head { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .pp-step-badge { width: 92px; height: 92px; }
  .pp-step-badge span:nth-child(1) { font-size: 11px; }
  .pp-step-badge span:nth-child(2) { font-size: 18px; }
  .pp-step-badge span:nth-child(3) { font-size: 14px; }
  .pp-flow-row .pp-pill--label { width: 100%; font-size: 16px; }
  .pp-subhead { gap: 6px 12px; }
  .pp-subhead__title { font-size: 22px; }
  .pp-subhead__lead { font-size: 15px; }
  .pp-subhead__bar { display: none; }

  .pp-mrd__table { font-size: 12px; }
  /* スマホ幅では行見出しをテーブル内側の通常の列に戻す。
     その分、画像側も同じ幅だけ右にずらして縮小し、4列の位置を表と揃える */
  .pp-mrd__table th[scope="row"] {
    position: static;
    transform: none;
    width: 54px;
    padding-right: 4px;
    font-size: 12px;
  }
  .pp-mrd img {
    width: calc(100% - 54px);
    margin-left: 54px;
  }
  .pp-mrd__table td { font-size: 12px; }
  .pp-mrd__grades td { font-size: 13px; }

  .pp-table th, .pp-table td { padding: 10px 6px; font-size: 13px; white-space: normal; }

  .pp-button { min-height: 58px; padding-inline: 36px; font-size: 16px; width: 100%; }
}


/* ==================================================================
   よくある質問ページ（page-faq.php 専用CSS）
   ※ 既存の pp- 接頭辞（page-ptosis.php用）とは衝突しないよう、
     本ページの新規クラスは全て faq- 接頭辞で統一する。
   ================================================================== */

/* ------------------------------------------------------------------
   30. Base (standalone only)
   ------------------------------------------------------------------ */
body.page-faq {
  min-width: 320px;
  color: var(--color-text);
  background-color: var(--color-white);
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.page-faq img { vertical-align: bottom; }


/* ------------------------------------------------------------------
   31. Section / heading
   ------------------------------------------------------------------ */
.faq-section { padding-block: 90px; }
.faq-section--alt { background-color: var(--color-base); }

.faq-heading { margin-bottom: 40px; }
.faq-heading__ja {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
}
.faq-heading__mark {
  width: 46px;
  height: 48px;
  flex: 0 0 auto;
}
.faq-heading__en {
  margin-top: 6px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-navy);
}


/* ------------------------------------------------------------------
   32. Quick navigation
   ------------------------------------------------------------------ */
.faq-quicknav-section { padding-block: 60px 0; }
.faq-quicknav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}
.faq-quicknav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 66px;
  padding: 0 30px;
  border-radius: 999px;
  background-color: var(--color-light-blue);
  color: var(--color-navy);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  transition: opacity var(--transition-base);
}
.faq-quicknav__btn:hover { opacity: 0.85; }
.faq-quicknav__arrow {
  position: relative;
  width: 9px; height: 9px;
  flex: 0 0 auto;
}
.faq-quicknav__arrow::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 9px; height: 9px;
  border-right: 2.5px solid var(--color-navy);
  border-bottom: 2.5px solid var(--color-navy);
  transform: rotate(-45deg);
}


/* ------------------------------------------------------------------
   33. Accordion (Q&A)
   ------------------------------------------------------------------ */
.faq-acc-list { display: flex; flex-direction: column; gap: 28px; }

.faq-acc {
  border: 1px solid var(--color-accent-line);
  border-radius: 28px;
  overflow: hidden;
  background-color: var(--color-white);
  box-shadow: 0 8px 22px rgba(11, 53, 107, 0.05);
}
.faq-acc[open] { border-radius: 24px; }

.faq-acc__q {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 26px;
  background: linear-gradient(120deg, #9bb0da 0%, #8ba4d5 100%);
  color: var(--color-white);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.faq-acc__q::-webkit-details-marker { display: none; }
.faq-acc__qtext { flex: 1 1 auto; }

.faq-acc__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-navy);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 16px;
}
.faq-acc__mark--a { background-color: var(--color-gold); color: var(--color-white); }

.faq-acc__chevron {
  position: relative;
  margin-left: auto;
  width: 16px; height: 16px;
  flex: 0 0 auto;
  transition: transform var(--transition-base);
}
.faq-acc__chevron::before {
  content: "";
  position: absolute;
  left: 1px; top: 1px;
  width: 11px; height: 11px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg);
}
.faq-acc[open] .faq-acc__chevron { transform: rotate(180deg); }

.faq-acc:not([open]) > .faq-acc__a { display: none; }
.faq-acc__a {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 26px 28px 28px;
  background-color: var(--color-white);
}
.faq-acc__abody p { font-size: 15px; }
.faq-acc__abody p + p { margin-top: 1.2em; }

.faq-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
}
.faq-more__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background-color: var(--color-light-blue);
  flex: 0 0 auto;
}
.faq-more__icon::before {
  content: "";
  position: absolute;
  left: 10px; top: 8px;
  width: 7px; height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}


/* ------------------------------------------------------------------
   34. Info cards
   ------------------------------------------------------------------ */
.faq-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 50px;
}
.faq-cards--single { grid-template-columns: 1fr; }
.faq-cards--single .faq-card { max-width: 700px; margin: 0 auto; }

.faq-card {
  position: relative;
  overflow: hidden;
  padding: 34px 40px;
  border-radius: 20px;
  text-align: center;
  background-color: var(--color-base);
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.4) 0 1px, transparent 1px 20px);
}
.faq-card__title {
  display: inline-block;
  margin: 0 auto 16px;
  padding: 6px 0;
  border-top: 1px solid var(--color-gold-line);
  border-bottom: 1px solid var(--color-gold-line);
  color: var(--color-navy);
  font-size: 18px;
  font-weight: 700;
}
.faq-card__text {
  font-size: 14.5px;
  color: var(--color-text-soft);
  margin-bottom: 22px;
}

.faq-card__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.faq-card__phone-time {
  text-align: left;
  font-size: 13px;
  color: var(--color-text-soft);
}
.faq-phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
}
.faq-phone-btn__icon { display: inline-flex; }


/* ------------------------------------------------------------------
   35. Buttons
   ------------------------------------------------------------------ */
.faq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 34px;
  border-radius: 999px;
  background-color: var(--color-navy-deep);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  transition: opacity var(--transition-base);
}
.faq-btn:hover { opacity: 0.88; }
.faq-btn--large {
  min-height: 66px;
  padding-inline: 60px;
  font-size: 19px;
  letter-spacing: 0.08em;
}
.faq-btn__arrow {
  position: relative;
  width: 8px; height: 8px;
  flex: 0 0 auto;
}
.faq-btn__arrow::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 8px; height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}


/* ------------------------------------------------------------------
   36. Coming soon
   ------------------------------------------------------------------ */
.faq-comingsoon {
  width: fit-content;
  margin: 0 auto 50px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-gold-line);
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
}


/* ------------------------------------------------------------------
   37. Closing CTA
   ------------------------------------------------------------------ */
.faq-cta {
  padding-block: 60px;
  background-color: var(--color-base);
  text-align: center;
}
.faq-cta__text {
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
}


/* ==================================================================
   38. Responsive — Tablet ( ~1024px )
   ================================================================== */
@media screen and (max-width: 1024px) {
  .faq-section { padding-block: 64px; }

  .faq-cards { grid-template-columns: 1fr; }
  .faq-card { padding: 30px 26px; }
}


/* ==================================================================
   39. Responsive — Smartphone ( ~767px )
   ================================================================== */
@media screen and (max-width: 767px) {
  body.page-faq { font-size: 15px; }

  .faq-section { padding-block: 50px; }
  .faq-quicknav-section { padding-block: 40px 0; }
  .faq-heading { margin-bottom: 28px; }
  .faq-heading__ja { font-size: 21px; gap: 10px; flex-wrap: wrap; }
  .faq-heading__mark { width: 36px; height: 38px; }

  .faq-quicknav { grid-template-columns: 1fr; gap: 14px; }
  .faq-quicknav__btn { min-height: 58px; font-size: 15px; padding: 0 20px; }

  .faq-acc-list { gap: 18px; }
  .faq-acc__q { padding: 16px 18px; font-size: 15px; gap: 12px; }
  .faq-acc__mark { width: 26px; height: 26px; font-size: 14px; }
  .faq-acc__a { padding: 20px 18px 22px; gap: 12px; }
  .faq-acc__abody p { font-size: 14px; }
  .faq-more { font-size: 13px; }

  .faq-card { padding: 26px 20px; }
  .faq-card__phone { flex-direction: column; gap: 14px; }
  .faq-card__phone-time { text-align: center; }

  .faq-comingsoon { font-size: 20px; margin-bottom: 36px; }

  .faq-btn { min-height: 52px; padding-inline: 28px; font-size: 14px; }
  .faq-btn--large { min-height: 58px; padding-inline: 36px; font-size: 16px; width: 100%; }
}

/* ========================================
   Privacy Policy
======================================== */
.privacy-policy {
	font-family: var(--font-ja);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.8;
	color: var(--color-text);
}
.page-privacy .privacy-policy {
  background-color: #fff;
  display: flow-root;
}
/* 各項目 */
.privacy-policy__block {
	margin-top: 50px;
}
/* タイトル */
.privacy-policy__title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.8;
	color: var(--color-navy);
}
/* 本文 */
.privacy-policy p {
	margin: 0;
}
/* 導入文 */
.privacy-policy .privacy-policy__lead {
	margin-top: 60px;
}
/* 箇条書き */
.privacy-policy__list {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}
.privacy-policy__list li {
	position: relative;
	padding-left: 1em;
}
.privacy-policy__list li::before {
	content: "・";
	position: absolute;
	left: 0;
}
/* 箇条書き後の文章 */
.privacy-policy__list + p {
	margin-top: 16px;
}
/* 注釈 */
.privacy-policy__note {
	margin-top: 16px;
}
/* リンク */
.privacy-policy a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: opacity var(--transition-base);
}
@media (hover: hover) {
	.privacy-policy a:hover {
		opacity: 0.7;
	}
}
/* お問い合わせ先 */
.privacy-policy__contact {
	margin-top: 24px;
	text-align: right;
}
.privacy-policy__date {
	margin-top: 16px !important;
	margin-bottom: 85px !important;
}

/* ========================================
   Responsive
======================================== */
@media screen and (max-width: 767px) {
	.privacy-policy {
		font-size: 16px;
	}
	.privacy-policy__lead {
		margin-top: 60px;
	}
	.privacy-policy__block {
		margin-top: 40px;
	}
	.privacy-policy__title {
		margin-bottom: 12px;
		font-size: 16px;
	}
	.privacy-policy .privacy-policy__lead {
		margin-top: 30px;
	}
	.privacy-policy__list {
		margin-top: 12px;
	}
	.privacy-policy__list + p,
	.privacy-policy__note {
		margin-top: 12px;
	}
	.privacy-policy__contact {
		margin-top: 20px;
	}
	.privacy-policy__date {
		margin-top: 12px !important;
		margin-bottom: 40px !important;
	}
}


/* ==================================================================
   アクセス・診療時間ページ（page-access.php 専用CSS）
   ※ ヘッダー・フッターは他ページと共通のためここには含めない
   ※ .l-inner / .breadcrumb / .page-eyecatch / .top-access-hours__table*
     (表セル装飾)はstyle.cssで全ページ共通定義済みのため
     ここでは再定義せずそのまま利用する（重複防止）
   ※ 診療時間セクションの外枠・当日受付カードは、見本デザインが
     HOME/眼瞼下垂ページの top-access-hours / top-access-reception と
     異なるレイアウトのため、access-hours-panel* として本ページ専用に新規作成
   ================================================================== */

/* ------------------------------------------------------------------
   01. Section heading（「アクセス」「診療時間」共通）
   ------------------------------------------------------------------ */
.access-section,
.access-hours-section {
	padding-top: 70px;
	padding-bottom: 100px;
}
.access-heading {
	margin-bottom: 44px;
	text-align: center;
}
.access-heading__ja {
	font-family: var(--font-ja);
	font-size: 42px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.03em;
	text-align: center;
}
.access-heading__en {
	margin-top: 4px;
	font-size: 20px;
	color: var(--color-navy);
}
.page-access .access-section {
  background-color: #fff;
  display: flow-root;
}
/* ------------------------------------------------------------------
   02. Access info（写真＋クリニック情報）
   ------------------------------------------------------------------ */
.access-info {
	display: flex;
	gap: 84px;
	align-items: flex-start;
}
.access-info__photo {
	flex: 0 0 505px;
	width: 505px;
	aspect-ratio: 505 / 353;
	overflow: hidden;
	border-radius: 24px;
}
.access-info__body {
	position: relative;
	flex: 1;
	min-width: 0;
	padding-top: 4px;
}
.access-info__logo img {
	width: 400px;
	max-width: 100%;
	height: auto;
}
.access-info__zip {
	margin-top: 20px;
	font-size: 20px;
	line-height: 1.8;
}
.access-info__address {
	margin-top: 4px;
	font-size: 20px;
	line-height: 1.8;
}
.access-info__contact {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 105px;
	margin-top: 16px;
}
.access-info__contact-main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.access-info__contact-text {
	min-width: 0;
}
.access-info__tel {
	font-size: 20px;
	line-height: 1.6;
}
.access-info__hours {
	margin-top: 4px;
	font-size: 18px;
	line-height: 1.8;
	color: var(--color-text-soft);
}
.access-info__note {
	position: relative;
	margin-top: 16px;
	padding-left: 20px;
	font-size: 20px;
	line-height: 1.8;
}
.access-info__note-dot {
	position: absolute;
	top: 50%;
	left: 0;
	width: 12px;
	height: 12px;
	background-color: var(--color-accent);
	border-radius: 50%;
	transform: translateY(-50%);
}
.access-info__mascot {
	flex: 0 0 auto;
	width: 64px;
	height: auto;
	pointer-events: none;
}
/* ------------------------------------------------------------------
   03. Access map
   ------------------------------------------------------------------ */
.access-map {
	margin-top: 80px;
	margin-bottom: 80px;
}
.access-map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 10 / 3;
	height: auto;
	border: 0;
	border-radius: 24px;
}
/* ------------------------------------------------------------------
   04. Access transport（電車・バス・車）
   ------------------------------------------------------------------ */
.access-transport {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.access-transport__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 70px;
	padding: 20px 28px;
	background-color: var(--color-base);
	border: 1px solid var(--color-gold-line);
	border-radius: 24px;
}
.access-transport__head {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 14px;
}
.access-transport__icon-circle {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background-color: var(--color-white);
	border-radius: 50%;
}
.access-transport__icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
}
.access-transport__label {
	position: relative;
	padding-right: 70px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
}
.access-transport__label::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 40px;
	background-color: var(--color-accent-line);
	transform: translateY(-50%);
}
.access-transport__list {
	flex: 1;
	min-width: 240px;
}
.access-transport__list li {
	position: relative;
	padding-left: 20px;
	font-size: 18px;
	line-height: 1.9;
}
.access-transport__list li + li {
	margin-top: 4px;
}
.access-transport__list li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 8px;
	height: 8px;
	background-color: var(--color-navy);
	border-radius: 50%;
	transform: translateY(-50%);
}
/* ------------------------------------------------------------------
   05. Hours panel（診療時間テーブル＋当日受付カード）
   ------------------------------------------------------------------ */
.access-hours-panel {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	align-items: start;
	gap: 28px;
	padding: 30px;
	background-color: var(--color-base);
	border-radius: 32px;
}
.access-hours-panel__table {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--color-white);
	border-radius: 16px;
}
.access-hours-panel__table .top-access-hours__table-wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-start;
}
.access-hours-panel__table .top-access-hours__table {
	margin-top: 0;
}
.access-hours-panel__table .top-access-hours__table th,
.access-hours-panel__table .top-access-hours__table td {
	padding: 21px 7px;
}
.access-hours-panel__reception {
	padding: 26px 28px;
	background-color: var(--color-white);
	border: 1px solid var(--color-gold-line);
	border-radius: 16px;
}
.access-hours-panel__reception-title {
	position: relative;
	padding-bottom: 14px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}
.access-hours-panel__reception-title::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 200px;
	max-width: 80%;
	height: 1px;
	background-color: var(--color-gold);
	content: "";
	transform: translateX(-50%);
}
.access-hours-panel__reception-body {
	margin-top: 16px;
}
.access-hours-panel__reception-body p {
	font-size: 16px;
	line-height: 1.9;
}
.access-hours-panel__reception-body strong {
	font-weight: 700;
}
/* ------------------------------------------------------------------
   06. Access CTA（WEB予約／デジスマご利用方法／受診について）
   ------------------------------------------------------------------ */
.access-cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: 15px;
}
.access-hours-panel__cta {
	grid-column: 1 / -1;
}
.access-cta__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 320px;
	height: 55px;
	padding: 0 48px 0 26px;
	border-radius: 999px;
	text-align: center;
	transition:
		background-color var(--transition-base),
		opacity var(--transition-base);
}
.access-cta__button--primary {
	color: var(--color-white);
	background-color: var(--color-navy);
}
.access-cta__button--secondary {
	color: var(--color-white);
	background-color: var(--color-light-blue);
}
.access-cta__button--tertiary {
	color: var(--color-white);
	background-color: var(--color-light-blue);
}
.access-cta__button-arrow {
	position: absolute;
	top: 50%;
	right: 25px;
	width: 13px;
	height: 13px;
	border-top: 3px solid currentColor;
	border-right: 3px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}
@media (hover: hover) and (pointer: fine) {
	.access-cta__button:hover {
		opacity: 0.85;
	}
}
/* ------------------------------------------------------------------
   07. Responsive — Tablet ( ~1024px )
   ------------------------------------------------------------------ */
@media screen and (max-width: 1024px) {
	.access-section,
	.access-hours-section {
		padding-block: 70px;
	}
	.access-info__photo {
		flex: 0 0 240px;
		width: 240px;
	}
	.access-info__logo img {
		width: 280px;
	}
	.access-hours-panel {
		grid-template-columns: 1fr;
		padding: 24px;
	}
}
/* ------------------------------------------------------------------
   08. Responsive — Smartphone ( ~767px )
   ------------------------------------------------------------------ */
@media screen and (max-width: 767px) {
	.access-section,
	.access-hours-section {
		padding-block: 50px;
	}
	.access-heading {
		margin-bottom: 28px;
	}
	.access-heading__ja {
		font-size: 22px;
	}
	.access-heading__en {
		font-size: 16px;
	}
	.access-info {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}
	.access-info__photo {
		width: 100%;
		flex: 0 0 auto;
		aspect-ratio: 505 / 353;
	}
	.access-info__logo img {
		width: 300px;
	}
	.access-info__zip,
	.access-info__address,
	.access-info__tel,
	.access-info__note {
		font-size: 16px;
	}
	.access-info__body {
		padding-left: 8px;
	}
	.access-info__hours {
		font-size: 15px;
	}
	.access-info__contact {
		gap: 32px;
	}
	.access-info__mascot {
		width: 48px;
	}
	.access-map {
		margin-top: 40px;
		margin-bottom: 40px;
	}
	.access-map iframe {
		aspect-ratio: 4 / 3;
		border-radius: 24px;
	}
	.access-transport__item {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px;
	}
	.access-transport__label {
		padding-right: 0;
		font-size: 18px;
	}
	.access-transport__label::after {
		display: none;
	}
	.access-transport__list li {
		font-size: 16px;
	}
	.access-hours-panel {
		gap: 20px;
		padding: 20px 5px;
		border-radius: 24px;
	}
	.access-hours-panel__reception {
		padding: 22px 20px;
	}
	.access-hours-panel__table .top-access-hours__table th,
	.access-hours-panel__table .top-access-hours__table td {
		padding: 14px 0px;
	}
	.access-cta {
		flex-direction: column;
		align-items: stretch;
	}
	.access-cta__button {
		width: 100%;
		min-width: 0;
	}
}


/* ==================================================================
   形成外科についてページ（page-plastic-surgery.php 専用CSS）
   ================================================================== */
.ps-section {
	padding-top: 70px;
	padding-bottom: 100px;
}
.ps-heading {
	margin-bottom: 44px;
	text-align: center;
}
.ps-heading__ja {
	font-family: var(--font-ja);
	font-size: 42px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.03em;
	text-align: center;
}
.ps-heading__en {
	margin-top: 4px;
	font-size: 20px;
	color: var(--color-navy);
}
.page-plastic-surgery .ps-section {
  background-color: #fff;
  display: flow-root;
}
.ps-intro {
	display: flex;
	align-items: center;
	gap: 40px;
	margin-top: 50px;
}
.ps-intro__figure {
	flex: 0 0 48%;
}
.ps-intro__figure img {
	width: 100%;
	height: auto;
	display: block;
}
.ps-intro__body {
	flex: 1;
	min-width: 0;
}
.ps-definition {
	margin-top: 32px;
	padding: 20px 32px;
	background-color: var(--color-base);
	border: 1px solid var(--color-gold);
	border-radius: 20px;
}
.ps-definition__title {
	margin-bottom: 8px;
	font-size: 20px;
	font-weight: 700;
	color: var(--color-navy);
	text-align: center;
}
.ps-definition__text {
	font-size: 18px;
	line-height: 1.9;
}
.ps-definition__source {
	margin-top: 12px;
	font-size: 14px;
	color: var(--color-text-soft);
	text-align: right;
}
.ps-diff {
	padding-block: 100px;
	background-color: var(--color-base);
}
.ps-diff__lead {
	width: fit-content;
	max-width: 100%;
	margin-top: 40px;
	margin-inline: auto;
	font-size: 18px;
	line-height: 2;
	text-align: left;
}
.ps-diff__lead-em {
	font-weight: 700;
	color: var(--color-navy);
}
.ps-diff__subheading {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin-top: 60px;
	margin-inline: auto;
	padding-inline: 40px;
	padding-bottom: 16px;
	font-size: 32px;
	font-weight: 600;
	color: var(--color-navy);
	text-align: center;
}
.ps-diff__subheading::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--color-gold);
}
.ps-compare {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	margin-top: 40px;
}
.ps-compare__card {
	padding: 30px;
	background-color: var(--color-white);
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(11, 53, 107, 0.06);
}
.ps-compare__title {
	width: fit-content;
	min-width: 220px;
	margin-inline: auto;
	padding: 6px 32px;
	background-color: var(--color-accent);
	color: var(--color-white);
	border-radius: 999px;
	font-size: 30px;
	font-weight: 700;
	text-align: center;
}
.ps-compare__photo {
	margin-top: 24px;
}
.ps-compare__photo img {
	width: 100%;
	height: auto;
	display: block;
}
.ps-compare__text {
	margin-top: 20px;
	font-size: 18px;
	line-height: 1.9;
}
.ps-compare__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
	padding: 24px 20px;
	background-color: var(--color-base);
	border-radius: 24px;
}
.ps-compare__list li {
	position: relative;
	padding-left: 34px;
	font-size: 18px;
	line-height: 1.6;
}
.ps-compare__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 25px;
	height: 25px;
	background-image: url("../../../uploads/2026/09/ps-check.png");
	background-size: contain;
	background-repeat: no-repeat;
	transform: translateY(-50%);
}
.ps-relation {
	display: flex;
	align-items: center;
	gap: 32px;
	margin-top: 56px;
	padding: 40px 24px;
	background-color: var(--color-white);
	border-radius: 24px;
}
.ps-relation__main {
	flex: 1;
	min-width: 0;
}
.ps-relation__title {
	width: fit-content;
	max-width: 100%;
	padding: 14px 24px;
	white-space: nowrap;
	background-color: var(--color-accent);
	border-radius: 999px;
	font-size: 26px;
	font-weight: 500;
	color: var(--color-white);
	text-align: left;
}
.ps-relation__text {
	margin-top: 28px;
	padding-inline: 26px;
	font-size: 18px;
	line-height: 1.9;
}
.ps-relation__image {
	flex: 0 0 auto;
}
.ps-relation__image img {
	width: 493px;
	max-width: 100%;
	height: auto;
	display: block;
}
.ps-care {
	display: flex;
	align-items: center;
	gap: 56px;
	margin-top: 50px;
}
.ps-care__photo {
	flex: 0 0 42%;
	overflow: hidden;
	border-radius: 20px;
}
.ps-care__photo img {
	width: 100%;
	height: auto;
	display: block;
}
.ps-care__body {
	flex: 1;
	min-width: 0;
}
.ps-care__em {
	font-weight: 700;
	color: var(--color-navy);
}
.ps-care__buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
}
.ps-care__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 320px;
	max-width: 100%;
	height: 60px;
	padding: 0 48px 0 26px;
	border-radius: 999px;
	font-size: 24px;
	font-weight: 700;
}
.ps-care__button--primary {
	color: var(--color-white);
	background-color: var(--color-navy);
}
.ps-care__button--primary::before {
	position: absolute;
	inset: 8px;
	border: 1px solid var(--color-gold);
	border-radius: inherit;
	content: "";
	pointer-events: none;
}
.ps-care__button--secondary {
	color: var(--color-white);
	background-color: var(--color-light-blue);
}
.ps-care__button-arrow {
	position: absolute;
	top: 50%;
	right: 25px;
	width: 13px;
	height: 13px;
	border-top: 3px solid currentColor;
	border-right: 3px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}
.ps-divider {
	width: 1200px;
	max-width: 100%;
	height: 1px;
	margin: 0 auto;
	border: 0;
	background-color: var(--color-gold);
}
@media (hover: hover) and (pointer: fine) {
	.ps-care__button:hover {
		opacity: 0.85;
	}
}
@media screen and (max-width: 1024px) {
	.ps-intro {
		gap: 36px;
	}
	.ps-compare {
		gap: 24px;
	}
	.ps-relation {
		gap: 24px;
	}
	.ps-relation__title {
		white-space: normal;
	}
	.ps-relation__image img {
		width: 360px;
	}
	.ps-care {
		gap: 32px;
	}
}
@media screen and (max-width: 767px) {
	.ps-section,
	.ps-diff {
		padding-block: 30px;
	}
	.ps-heading {
		margin-bottom: 28px;
	}
	.ps-heading__ja {
		font-size: 26px;
	}
	.ps-heading__en {
		font-size: 16px;
	}
	.ps-intro {
		flex-direction: column;
		gap: 24px;
		margin-top: 32px;
	}
	.ps-intro__figure {
		flex: 0 0 auto;
		width: 220px;
		margin-inline: auto;
	}
	.ps-definition {
		margin-top: 24px;
		padding: 24px 20px;
	}
	.ps-definition__title {
		font-size: 18px;
	}
	.ps-definition__text {
		font-size: 16px;
	}
	.ps-diff__lead {
		margin-top: 24px;
		font-size: 16px;
	}
	.ps-diff__subheading {
		margin-top: 36px;
		padding-inline: 16px;
		font-size: 20px;
	}
	.ps-compare {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-top: 24px;
	}
	.ps-compare__title {
		font-size: 20px;
	}
	.ps-compare__text {
		font-size: 16px;
	}
	.ps-compare__list li {
		font-size: 16px;
	}
	.ps-relation {
		flex-direction: column;
		gap: 20px;
		margin-top: 36px;
		padding: 24px 20px;
	}
	.ps-relation__title {
		width: 272px;
		max-width: 100%;
		margin-inline: auto;
		padding: 10px 20px;
		font-size: 18px;
		text-align: center;
	}
	.ps-relation__text {
		margin-top: 16px;
		padding-inline: 0;
		font-size: 16px;
	}
	.ps-relation__image img {
		width: 100%;
		max-width: 360px;
	}
	.ps-care {
		flex-direction: column;
		gap: 24px;
		margin-top: 32px;
	}
	.ps-care__photo {
		flex: 0 0 auto;
		width: 100%;
	}
	.ps-care__buttons {
		margin-top: 24px;
	}
	.ps-care__button {
		width: 100%;
		font-size: 20px;
	}
	.ps-divider {
		width: calc(100% - var(--side-space-sp) * 2);
	}
	body.page-plastic-surgery .top-access {
		padding: 40px 0px;
	}
}