@charset "UTF-8";
/*!
 * tokens.css
 *
 * Do not add hue-based tokens (--color-bg-blue 等) or color-number tokens
 * (--navy-900 等). component.css / sections.css must reference role tokens
 * only. See docs/CSS_ARCHITECTURE.md for the token policy.
 */

:root {
  /* ==========================================================================
     Brand Colors
     ========================================================================== */

  --color-brand-primary: #43AAE8;        /* Observed: Moodboard Primary / board Clinical cyan */
  --color-brand-primary-hover: #2E8FC9;  /* Inferred: ~15% darker for hover/active */
  --color-brand-primary-soft: #D9F0FA;   /* Inferred: light tint for soft fills, active nav marker */

  --color-brand-secondary: #F6E8ED;        /* Observed: Moodboard Secondary / board Soft blush */
  --color-brand-secondary-hover: #EDD3DC;  /* Inferred: deeper blush for hover on secondary controls */
  --color-brand-secondary-soft: #FBF4F6;   /* Inferred: lighter blush for subtle panels */

  --color-brand-tertiary: #A66D67;       /* Inferred: board.png "Muted coral-brown", heading accent only, minimal use */
  --color-brand-tertiary-soft: #E8D9D6;  /* Inferred: light tint of tertiary */

  --color-brand-accent: #D66F9C;        /* Observed: Moodboard Accent / board Accent pink */
  --color-brand-accent-hover: #BD5683;  /* Inferred: deeper pink for hover/active */
  --color-brand-accent-soft: #F8E3EC;   /* Inferred: light pink for badges, soft chips */

  /* ==========================================================================
     Background Colors
     ========================================================================== */

  --color-bg-page: #FFFFFF;         /* Observed: Moodboard Base */
  --color-bg-section: #FFFFFF;      /* Observed: white section band (news, access) */
  --color-bg-section-alt: #F2F6F7;  /* Observed: Moodboard Surface / board Air blue */
  --color-bg-strong: #188DD2;       /* Observed: board "濃い青の診療案内" full-width dense service field */
  --color-bg-cta: #188DD2;          /* Observed: Moodboard CTA — Final CTA / conversion CTA ONLY. See CTA policy in CSS_ARCHITECTURE.md */

  /* Recommended additions if a normal (non-final-CTA) section needs a strong
     highlight background — do NOT reuse --color-bg-cta for these. */
  --color-bg-emphasis: #EAF8FC;  /* Recommended */
  --color-bg-highlight: #FBF4F6; /* Recommended */

  /* ==========================================================================
     Surface Colors
     ========================================================================== */

  --color-surface-base: #FFFFFF;   /* Observed */
  --color-surface-card: #FFFFFF;   /* Observed: white card surface */
  --color-surface-soft: #F2F6F7;   /* Observed: Air blue soft inset surface */
  --color-surface-accent: #EAF8FC; /* Observed: table th / chip accent surface */

  /* ==========================================================================
     Text Colors
     ========================================================================== */

  --color-text-primary: #4A4E52;    /* Observed: Moodboard Text / board Warm text gray */
  --color-text-secondary: #82878C;  /* Inferred: lighter gray for captions/meta */
  --color-text-muted: #A8ADB1;      /* Inferred: muted labels, placeholders */
  --color-text-inverse: #FFFFFF;    /* Inferred: white text on dark/photo backgrounds */
  --color-text-on-primary: #FFFFFF; /* Inferred: text on brand-primary / bg-cta / bg-strong */
  --color-text-on-secondary: #4A4E52; /* Inferred: dark text on light blush background */

  /* ==========================================================================
     Border Colors
     ========================================================================== */

  --color-border-default: #DCEAF1;  /* Inferred: board "淡い青・グレー" thin line */
  --color-border-strong: #B7CEDA;   /* Inferred: deeper divider (tables, stronger separators) */
  --color-border-accent: #E1A0BC;   /* Observed: accent pink underline/border */

  /* ==========================================================================
     Semantic Colors
     ========================================================================== */

  --color-success: #3FA772; /* Recommended: not present in board, standard form-state green */
  --color-warning: #E0A030; /* Recommended */
  --color-error: #D0475C;   /* Recommended: harmonized with accent pink hue family */

  /* ==========================================================================
     Typography
     ========================================================================== */

  --font-family-heading: "Zen Old Mincho", serif;
  --font-family-body: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, "Yu Gothic", YuGothic, "MS PGothic", Osaka, arial, sans-serif; /* Fixed */
--font-family-en:"Cormorant Garamond", serif;

  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* Fixed: 16px */
  --font-size-md: 1.125rem;  /* 18px */
  --font-size-lg: 1.25rem;   /* 20px */
  --font-size-xl: 1.5rem;    /* 24px */
  --font-size-2xl: 1.875rem; /* 30px */
  --font-size-3xl: 2.25rem;  /* 36px */

  --line-height-tight: 1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.9; /* Inferred: board "本文は行間を広く" */

  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.03em;
  --letter-spacing-wider: 0.08em;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* ==========================================================================
     Spacing Scale
     ========================================================================== */

  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */

  /* ==========================================================================
     Layout Tokens
     ========================================================================== */

  --layout-container-max: 1200px;               /* Fixed */
  --layout-container-padding: var(--space-5);   /* Fixed: 1.25rem / 20px */
  --layout-section-padding-y-sm: var(--space-12); /* SP&TAB */
  --layout-section-padding-y-md: var(--space-16);
  --layout-section-padding-y-lg: var(--space-20); /* PC (min-width: 1024px) */

  /* ==========================================================================
     Component Spacing Tokens
     ========================================================================== */

  --component-card-padding: var(--space-6);
  --component-card-gap: var(--space-4);

  --component-button-padding-x: var(--space-6);
  --component-button-padding-y: var(--space-3);
  --component-button-gap: var(--space-2);

  --component-section-heading-gap: var(--space-2); /* JP見出しと極小英語ラベルの間隔 */

  /* ==========================================================================
     Radius Tokens
     ========================================================================== */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;  /* Observed: hero外枠の大きめ角丸 */
  --radius-xl: 28px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  --component-radius-button: var(--radius-pill); /* Observed: header/相談導線の丸ボタン */
  --component-radius-card: var(--radius-sm);      /* Observed: カードはほぼ直角〜ごく小さい角丸 */
  --component-radius-chip: var(--radius-pill);    /* Observed: newsリストの小型ラベル */
  --component-radius-image: var(--radius-sm);     /* 横長カード写真の浅い角丸。正円写真は個別に --radius-circle を適用（COMPONENT_MAP参照） */

  /* ==========================================================================
     Shadow Tokens
     ========================================================================== */

  --shadow-sm: 0 2px 8px rgba(93, 98, 104, 0.06);
  --shadow-md: 0 4px 16px rgba(93, 98, 104, 0.08);
  --shadow-lg: 0 8px 28px rgba(93, 98, 104, 0.12);

  --shadow-card: var(--shadow-sm);        /* Observed: 影は弱く */
  --shadow-card-hover: var(--shadow-md);
  --shadow-button: 0 2px 6px rgba(24, 141, 210, 0.25); /* Inferred */
  --shadow-floating: var(--shadow-lg);    /* 円形相談ボタン・フローティングCTA */

  /* ==========================================================================
     Transition and Z-index Tokens
     ========================================================================== */

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-color: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
  --transition-shadow: box-shadow 200ms ease;

  --z-base: 1;
  --z-above: 10;
  --z-overlay: 150;
  --z-header: 100;  /* ui.css --z-page-top 既定値(100)と揃えた値 */
  --z-modal: 500;   /* ui.css --z-dialog 既定値(500)と揃えた値。ui.css が fallback なしで参照するため必須 */

  /* ==========================================================================
     Legacy Compatibility (fixed共通CSS: reset.css / typography.css / ui.css /
     tailwind.css との互換用。これらのファイルは変更不可のため、既存の
     var(--token) 参照をここでrole tokenへ再マッピングする。新規coding時は
     このセクションのtokenを直接使わず、上記のrole tokenを使うこと)
     ========================================================================== */

  --color-bg-primary: var(--color-bg-cta); /* ui.css .c-floating-cta（電話予約フローティングCTA）の背景に使用、fallbackなし */
  --color-border: var(--color-border-default); /* ui.css .c-floating-cta の border-top に使用、fallbackなし */

  /* ==========================================================================
     Scroll Tokens
     ui.css の html { scroll-padding-top } が参照。固定ヘッダー実測値に合わせる。
     ========================================================================== */

  --scroll-padding-top: 92px; /* Observed: SP固定ヘッダー高さ */
}

@media (min-width: 1024px) {
  :root {
    --scroll-padding-top: 56px; /* Observed: PC固定ヘッダー高さ */
  }
}

/*!
 * base.css
 * Project foundation overrides for 高村医院.
 * WordPress content must remain readable without utility classes.
 */

html {
  color-scheme: light;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-normal);
}

a {
  color: inherit;
  text-decoration-color: var(--color-border-strong);
  text-decoration-thickness: 1px;
  transition: var(--transition-color), opacity var(--transition-normal);
}

a:hover {
  color: var(--color-brand-primary-hover);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

main,
[id] {
  scroll-margin-top: var(--space-20);
}

.entry-content {
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.entry-content::after {
  display: block;
  clear: both;
  content: "";
}

.entry-content > :first-child {
  margin-top: 0;
}

.entry-content > :last-child {
  margin-bottom: 0;
}

.entry-content :where(h1, h2, h3, h4, h5, h6) {
  color: var(--color-text-primary);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
  text-wrap: pretty;
}

.entry-content :where(h2, h3, h4, h5, h6) {
  scroll-margin-top: var(--space-20);
}

.entry-content h2 {
  margin-block: var(--space-16) var(--space-10);
  font-size: var(--font-size-xl);
  display: flex;
  align-items: center;
  gap: 16px;
}

.entry-content h2::after {
  content: "";
  flex: 1;
  min-width: 40px;
  height: 6px;

  background:
    radial-gradient(
      circle at calc(100% - 3px) center,
      #e980a3 0 3px,
      transparent 3.5px
    ),
    linear-gradient(
      #009fe8,
      #009fe8
    ) left center / calc(100% - 3px) 1px no-repeat;
}

.entry-content h3 {
  margin-block: var(--space-12) var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-brand-primary);
  font-size: var(--font-size-lg);
}

.entry-content h4 {
  margin-block: var(--space-8) var(--space-4);
  color: var(--color-brand-tertiary);
  font-size: var(--font-size-md);
  position: relative;
  padding-left:var(--space-4);
}
.entry-content h4:before{
  content:"";
  position: absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-brand-tertiary);
}

.entry-content :where(p, ul, ol, dl, table, blockquote, pre, figure) {
  margin-block: 0 var(--space-6);
}

.entry-content a {
  color: var(--color-brand-primary-hover);
  text-decoration-line: underline;
  text-decoration-color: var(--color-brand-primary-soft);
}

.entry-content a:hover {
  color: var(--color-brand-primary);
  text-decoration-color: currentColor;
}

.entry-content blockquote,
.entry-content .wp-block-quote {
  margin-inline: 0;
  padding: var(--space-5) var(--space-6);
  border-left: 2px solid var(--color-brand-primary);
  background: var(--color-surface-soft);
  color: var(--color-text-secondary);
}

.entry-content :where(.wp-block-image, .wp-block-gallery, .wp-block-media-text) {
  margin-block: var(--space-8);
}

.entry-content :where(.wp-caption-text, figcaption) {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.entry-content .wp-block-button__link {
  border-radius: var(--component-radius-button);
  background: var(--color-bg-cta);
  color: var(--color-text-on-primary);
  font-weight: var(--font-weight-medium);
      text-decoration: none;
}

.entry-content .wp-block-button__link:hover {
  background: var(--color-brand-primary-hover);
  color: var(--color-text-on-primary);
  opacity: 1;
}

.entry-content :where(.alignwide, .alignfull) {
  max-width: 100%;
}

.entry-content .wp-block-group.has-background {
  padding: var(--space-6);
}

@media (min-width: 1024px) {
  .entry-content h2 {
    font-size: var(--font-size-2xl);
  }

  .entry-content .wp-block-group.has-background {
    padding: var(--space-8);
  }
}

/*!
 * components.css
 * Reusable project components. All visual values reference tokens.css.
 */

.c-section-heading {
  display: grid;
  gap: var(--component-section-heading-gap);
  margin: 0 0 var(--space-8);
  color: var(--color-text-primary);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
  text-wrap: balance;
}

.c-section-heading__label {
  order: -1;
  color: var(--color-brand-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}

.c-section-heading--inverse,
.c-section-heading--inverse .c-section-heading__label {
  color: var(--color-text-inverse);
}

.c-panel--translucent {
  padding: var(--component-card-padding);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  background: color-mix(in srgb, var(--color-surface-card) 88%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(var(--space-2));
}

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--component-button-gap);
  min-height: 44px;
  padding: var(--component-button-padding-y) var(--component-button-padding-x);
  border: 1px solid transparent;
  border-radius: var(--component-radius-button);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
  text-align: center;
  text-decoration: none;
  transition: var(--transition-color), var(--transition-shadow), transform var(--transition-fast);
}

.c-button:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.c-button:active {
  transform: translateY(0);
}

.c-button--primary {
  border-color: var(--color-bg-cta);
  background: var(--color-bg-cta);
  color: var(--color-text-on-primary);
  box-shadow: var(--shadow-button);
}

.c-button--primary:hover {
  border-color: var(--color-brand-primary-hover);
  background: var(--color-brand-primary-hover);
  color: var(--color-text-on-primary);
}

.c-button--secondary {
  border-color: var(--color-border-default);
  background: var(--color-brand-secondary);
  color: var(--color-text-on-secondary);
}

.c-button--secondary:hover {
  border-color: var(--color-brand-secondary-hover);
  background: var(--color-brand-secondary-hover);
  color: var(--color-text-primary);
}

.c-button--icon {
  width: 44px;
  min-width: 44px;
  padding-inline: var(--space-2);
}

.c-button--circle {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 9rem);
  aspect-ratio: 1;
  margin-inline: auto;
  padding: var(--space-5);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-circle);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-floating);
  line-height: var(--line-height-normal);
  text-align: center;
}

.c-button--circle:hover {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary-hover);
  opacity: 1;
}

.c-button--circle::after {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  width: var(--space-5);
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: var(--color-brand-accent);
  content: "";
}

.c-card {
  position: relative;
  min-width: 0;
  padding: var(--component-card-padding);
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: var(--component-radius-card);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-card);
  transition: var(--transition-shadow), transform var(--transition-normal);
}

a.c-card:hover {
  color: var(--color-text-primary);
  box-shadow: var(--shadow-card-hover);
  opacity: 1;
  transform: translateY(-2px);
}

.c-card--photo {
  display: grid;
  gap: var(--component-card-gap);
}

.c-card--photo .c-card__image {
  margin: calc(-1 * var(--component-card-padding));
  margin-bottom: 0;
  overflow: hidden;
  border-radius: var(--component-radius-image) var(--component-radius-image) 0 0;
}

.c-card--photo .c-card__image img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.c-card--icon {
  display: grid;
  place-items: center;
  gap: var(--space-3);
  min-height: 9rem;
  text-align: center;
}

.c-card--icon .c-card__icon {
  display: grid;
  place-items: center;
  width: var(--space-12);
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: var(--color-brand-primary-soft);
  color: var(--color-brand-primary-hover);
}

.c-card--contact {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  border-color: var(--color-brand-primary-soft);
  border-radius: var(--radius-md);
}

.c-card__title {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.c-card__text {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.c-card__corner::after,
.c-card--icon::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: var(--space-5) solid transparent;
  border-right: var(--space-5) solid var(--color-brand-accent);
  content: "";
  pointer-events: none;
}

.c-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--component-radius-chip);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
}

.c-chip--primary {
  background: var(--color-brand-primary);
  color: var(--color-text-on-primary);
}

.c-chip--secondary {
  background: var(--color-brand-secondary-soft);
  color: var(--color-text-primary);
}

.c-chip--accent {
  background: var(--color-brand-accent-soft);
  color: var(--color-text-primary);
}

.c-photo--circle {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-sm);
}

.c-photo--circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--color-surface-base);
  font-size: var(--font-size-sm);
}

.c-table :where(th, td) {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  text-align: left;
  vertical-align: top;
}

.c-table th {
  background: var(--color-surface-accent);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.c-form-field {
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-primary);
}

.c-form-field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.c-form-field :where(input, textarea, select) {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-base);
  color: var(--color-text-primary);
  transition: var(--transition-color), var(--transition-shadow);
}

.c-form-field :where(input, textarea, select):focus {
  border-color: var(--color-brand-primary);
  outline: none;
  box-shadow: 0 0 0 var(--space-1) var(--color-brand-primary-soft);
}

.c-form-field.is-error :where(input, textarea, select) {
  border-color: var(--color-error);
}

.c-form-field__error {
  color: var(--color-error);
  font-size: var(--font-size-xs);
}

.c-entry__more {
  display: inline-block;
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-medium);
}

@media (min-width: 1024px) {
  .c-section-heading {
    margin-bottom: var(--space-10);
    font-size: var(--font-size-3xl);
  }

  .c-card--contact {
    grid-template-columns: 1fr auto;
  }

  .c-table {
    font-size: var(--font-size-base);
  }
}

/* form.css .contact-item-wrap: flex-shrink固定でthの幅崩れを防ぐ */
.contact-item-th {
  flex-shrink: 0;
}

.contact-item-td {
  flex: 1;
  min-width: 0;
}

/* ui.css .l-page__header の上書き: 背景画像の可読性確保のため
   左(不透明)→右(透明)のグラデーションレイヤーを重ねる */
.l-page__header {
  position: relative;
}

.l-page__header::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to right, var(--color-bg-emphasis) 0%, var(--color-bg-emphasis) 25%, transparent 100%);
  content: "";
  pointer-events: none;
}

.l-page__header .l-page__title,
.l-page__header .l-page__label,
.l-page__header .l-page__eyecatch {
  position: relative;
  z-index: 1;
}

/*!
 * sections.css
 * Project section styles. Base layout is SP/TAB; PC begins at 1024px.
 */

.p-header {
  position: relative;
  z-index: var(--z-header);
  background: var(--color-bg-page);
}

.p-header.p-home-header {
  position: sticky;
  top: 0;
}

.p-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: min(100%, var(--layout-container-max));
  min-height: var(--space-16);
  margin-inline: auto;
  padding-inline: var(--layout-container-padding);
}

.p-header__logo {
  display: block;
  max-width: 10rem;
}

.p-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.p-header__drawer {
  z-index: var(--z-modal);
}

.p-hero {
  padding: var(--space-5) var(--layout-container-padding) var(--layout-section-padding-y-sm);
  background: var(--color-bg-page);
}

.p-hero__inner {
  position: relative;
  display: grid;
  width: min(100%, var(--layout-container-max));
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface-soft);
}

.p-hero__media {
  min-height: 18rem;
}

.p-hero__media img {
  width: 100%;
  height: 100%;
  min-height: 18rem;
  object-fit: cover;
  object-position: center;
}

.p-hero__copy {
  position: relative;
  z-index: var(--z-base);
  margin: calc(-1 * var(--space-8)) var(--space-4) var(--space-4);
}

.p-hero__title {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-family-heading);
  font-size: clamp(var(--font-size-2xl), 7vw, var(--font-size-3xl));
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wide);
  text-wrap: balance;
}

.p-hero__lead {
  margin: var(--space-4) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.p-news,
.p-access {
  padding-block: var(--layout-section-padding-y-sm);
  background: var(--color-bg-section);
}

.p-news__inner,
.p-clinic-intro__inner,
.p-service-guide__inner,
.p-consultation__inner,
.p-features__inner,
.p-access__inner,
.p-footer__inner,
.p-final-cta__inner {
  position: relative;
  z-index: var(--z-base);
  width: min(100%, var(--layout-container-max));
  margin-inline: auto;
  padding-inline: var(--layout-container-padding);
}

.p-news__grid {
  display: grid;
  gap: var(--space-8);
}

.p-news__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border-default);
}

.p-news__item {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
}

.p-news__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.p-news__link {
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}

.p-clinic-intro {
  padding-block: var(--layout-section-padding-y-md);
  background: var(--color-brand-secondary);
}

.p-clinic-intro__layout {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.p-clinic-intro__photo {
  width: min(100%, 24rem);
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.p-clinic-intro__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.p-service-guide {
  position: relative;
  isolation: isolate;
  padding-block: var(--layout-section-padding-y-md);
  overflow: hidden;
  background: var(--color-bg-strong);
  color: var(--color-text-inverse);
}

.p-service-guide__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.2;
  background-image: radial-gradient(var(--color-text-inverse) 1px, transparent 1px);
  background-size: var(--space-5) var(--space-5);
  pointer-events: none;
}

.p-service-guide__featured {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.p-service-guide__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.p-consultation {
  padding-block: var(--layout-section-padding-y-md);
  background: var(--color-bg-section-alt);
}

.p-consultation__contacts {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.p-consultation__pathways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.p-features {
  padding-block: var(--layout-section-padding-y-md);
  background: var(--color-bg-section);
}

.p-features__grid {
  display: grid;
  gap: var(--space-10);
}

.p-features__item {
  position: relative;
  width: min(100%, 20rem);
  margin-inline: auto;
  text-align: center;
}

.p-features__number {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-above);
  display: grid;
  place-items: center;
  width: var(--space-10);
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: var(--color-brand-accent);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
}

.p-features__title {
  margin: var(--space-5) 0 var(--space-3);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

.p-access__layout {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

.p-access__media {
  overflow: hidden;
  border-radius: var(--component-radius-image);
}

.p-access__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.p-access__map {
  margin-top: var(--space-8);
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: var(--component-radius-card);
  background: var(--color-surface-soft);
}

.p-access__map :where(iframe, img) {
  display: block;
  width: 100%;
  min-height: 18rem;
  border: 0;
  object-fit: cover;
}

.p-final-cta {
  padding-block: var(--layout-section-padding-y-md);
  background: var(--color-bg-cta);
  color: var(--color-text-on-primary);
  text-align: center;
}

.p-final-cta__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
}

.p-final-cta .c-button--primary {
  border-color: var(--color-surface-card);
  background: var(--color-surface-card);
  color: var(--color-bg-cta);
}

.p-final-cta .c-button--primary:hover {
  border-color: var(--color-brand-primary-soft);
  background: var(--color-brand-primary-soft);
  color: var(--color-brand-primary-hover);
}

.p-footer {
  margin-top: var(--space-8);
  padding-block: var(--layout-section-padding-y-sm) var(--space-4);
  padding-block: var(--space-8) var(--space-16); background: var(--color-bg-emphasis);
  color: var(--color-text-secondary);
}

.p-footer__grid {
  display: grid;
  gap: var(--space-8);
}

.p-footer__nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-footer__nav a {
  display: inline-block;
  padding-block: var(--space-1);
  color: var(--color-text-secondary);
}

.p-footer__bottom {
  margin-top: var(--space-10);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-default);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
}

@media (min-width: 1024px) {
  .p-header__inner {
    min-height: var(--space-20);
  }

  .p-header__logo {
    max-width: 13rem;
  }

  .p-header__actions {
    gap: var(--space-4);
  }

  /* .p-home-header の高さがscrolled切り替えで変化すると、ブラウザのスクロールアンカリングが
     見た目のジャンプを打ち消そうとしてwindow.scrollYを自動調整してしまう。その調整幅は
     __top の折りたたみ量(約100px前後)とヒステリシス(24px)より大きいため閾値を再び跨ぎ、
     scrolled判定→高さ変化→自動補正→再度閾値超え…と無限ループしてちらつく。
     このアンカリング補正自体を止めるため、ページ全体で無効化する。 */
  body {
    overflow-anchor: none;
  }

  /* grid-template-rows: 1fr → 0fr でコンテンツの実高さに正確に追従して0まで収縮させる。
     max-height + 固定の上限値だと「上限値が実高さを上回っている間は動かない」区間ができ、
     実高さに追いついた瞬間から急に縮み始めるため、動きに段差ができる（実測不要でこの問題が起きない）。 */
  .p-home-header__top {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--transition-normal), opacity var(--transition-normal), visibility 0s linear;
  }

  .p-home-header__topInner {
    overflow: hidden;
    min-height: 0;
    transition: padding-block var(--transition-normal);
  }

  html.scrolled .p-home-header__top {
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows var(--transition-normal), opacity var(--transition-normal), visibility 0s linear var(--transition-normal);
  }

  /* padding-blockはgrid行のサイズに含まれず独立して残るため、
     行と同時に0にしないとpadding分(28px)のスキマが残ってしまう。 */
  html.scrolled .p-home-header__topInner {
    padding-block: 0;
  }

  .p-home-header__nav {
    transition: var(--transition-shadow);
  }

  html.scrolled .p-home-header__nav {
    box-shadow: var(--shadow-floating);
  }

  .p-hero {
    padding-block: var(--space-8) var(--layout-section-padding-y-lg);
  }

  .p-hero__inner {
    grid-template-columns: minmax(22rem, 0.85fr) minmax(0, 1.35fr);
    min-height: 34rem;
  }

  .p-hero__media {
    grid-column: 2;
    min-height: 34rem;
  }

  .p-hero__media img {
    min-height: 34rem;
  }

  .p-hero__copy {
    grid-row: 1;
    grid-column: 1 / 2;
    align-self: center;
    margin: var(--space-10) calc(-1 * var(--space-16)) var(--space-10) var(--space-10);
  }

  .p-hero__title {
    font-size: var(--font-size-3xl);
  }

  .p-news,
  .p-access,
  .p-clinic-intro,
  .p-service-guide,
  .p-consultation,
  .p-features,
  .p-final-cta {
    padding-block: var(--layout-section-padding-y-lg);
  }

  .p-news__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
  }

  .p-news__item {
    grid-template-columns: 9rem minmax(0, 1fr);
    align-items: start;
  }

  .p-clinic-intro__layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
    gap: var(--space-12);
  }

  .p-clinic-intro__photo {
    width: 100%;
  }

  .p-service-guide__featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-6);
  }

  .p-service-guide__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .p-consultation__contacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-12);
  }

  .p-consultation__pathways {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .p-features__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-12);
  }

  .p-features__item {
    width: 100%;
  }

  .p-access__layout {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.85fr);
    gap: var(--space-12);
  }

  .p-access__map :where(iframe, img) {
    min-height: 24rem;
  }

  .p-footer {
    padding-top: var(--layout-section-padding-y-lg);
    margin-top: var(--space-20);
  }

  .p-footer__grid {
    grid-template-columns: 1.2fr repeat(2, minmax(10rem, 0.7fr)) 1fr;
    gap: var(--space-10);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-service-guide__texture {
    background-attachment: initial;
  }

  .p-home-header__top,
  .p-home-header__topInner,
  .p-home-header__nav {
    transition-duration: 0s;
  }
}

/*!
 * utilities.css
 * Small project utilities only. Layout utilities belong to tailwind.css.
 */

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

.u-safe-area {
  padding-right: max(var(--layout-container-padding), env(safe-area-inset-right));
  padding-left: max(var(--layout-container-padding), env(safe-area-inset-left));
}

.show-pc {
  display: none !important;
}

@media (min-width: 1024px) {
  .show-sp {
    display: none !important;
  }

  .show-pc {
    display: revert !important;
  }
}