@charset "UTF-8";
/*!
 * tokens.css
 */

:root {

  /* ==========================================================================
     5.1 Brand Colors
     ========================================================================== */
  --color-brand-primary: #A85F72;            /* Observed — Moodboard: Primary */
  --color-brand-primary-hover: #8F5161;      /* Inferred — primaryを約15%暗く */
  --color-brand-primary-soft: #F5ECEE;       /* Inferred — primaryを白に約88%混色 */

  --color-brand-secondary: #526F79;          /* Observed — Moodboard: Secondary */
  --color-brand-secondary-hover: #465E67;    /* Inferred — secondaryを約15%暗く */
  --color-brand-secondary-soft: #EAEEEF;     /* Inferred — secondaryを白に約88%混色 */

  /* Inferred — 現パレットは3色構成を維持するため未割当。third categoryが
     必要になった場合のみ独自色相を検討し、それまでは secondary-soft を代用する。 */
  --color-brand-tertiary: var(--color-brand-secondary-soft);
  --color-brand-tertiary-soft: var(--color-brand-secondary-soft);

  --color-brand-accent: #C8AD87;             /* Observed — Moodboard: Accent（使用は5%未満に限定） */
  --color-brand-accent-hover: #AA9373;       /* Inferred — accentを約15%暗く */
  --color-brand-accent-soft: #F7F3ED;        /* Inferred — accentを白に約85%混色 */

  /* ==========================================================================
     5.2 Background Colors
     ========================================================================== */
  --color-bg-page: #FCFAF7;                  /* Observed — Moodboard: Base */
  --color-bg-section: #FFFFFF;                /* Inferred — moodboard「淡ローズを連続させず白/アイボリーを挟む」の白面 */
  --color-bg-section-alt: #F4ECE9;            /* Observed — Moodboard: Surface（紹介帯・カード背景・FAQ面） */
  --color-bg-strong: #EFE6E0;                  /* Inferred — pre/codeや強調パネル用のやや濃い暖色面 */
  --color-bg-cta: #914B60;                     /* Observed — Moodboard: CTA。Final CTA / 反復するWEB予約CTAボタン専用 */

  /* Recommended addition — moodboard「医療情報へ薄いブルーグレー帯を差す」への対応。
     通常セクションの強調背景が必要な場合はこちらを使い、--color-bg-cta を流用しない。 */
  --color-bg-emphasis: #E3EAEC;

  /* ==========================================================================
     5.3 Surface Colors
     ========================================================================== */
  --color-surface-base: #FFFFFF;              /* Inferred — カード白面 */
  --color-surface-card: #FFFFFF;              /* Inferred — カード白面（Observed: 直角〜4px・白面・薄影） */
  --color-surface-soft: #F4ECE9;              /* Observed — Moodboard: Surface */
  --color-surface-accent: #EFE1DC;            /* Inferred — Surfaceよりやや濃い、表ヘッダーやチップ面向け */

  /* ==========================================================================
     5.4 Text Colors
     ========================================================================== */
  --color-text-primary: #3E4547;              /* Observed — Moodboard: Text */
  --color-text-secondary: #6E6461;            /* Inferred — Textを暖色寄りに明度アップ */
  --color-text-muted: #948B87;                /* Inferred — 日付・キャプション・英字ラベル用にさらに明度アップ */
  --color-text-inverse: #FFFFFF;              /* Inferred */
  --color-text-on-primary: #FFFFFF;           /* Inferred — primary/CTAボタン上の文字色 */
  --color-text-on-secondary: #FFFFFF;         /* Inferred — secondaryボタン塗りつぶし時の文字色 */

  /* ==========================================================================
     5.5 Border Colors
     ========================================================================== */
  --color-border-default: #E6DCD7;            /* Inferred — Observed方向「細い暖色グレー罫線」の近似値 */
  --color-border-strong: #CDBDB6;             /* Inferred — defaultより濃いめの区切り線 */
  --color-border-accent: #C8AD87;             /* Observed — Moodboard: Accent（区切り線・小ポイントは5%未満） */

  /* ==========================================================================
     5.6 Semantic Colors — Recommended addition（moodboard/Direction Boardに明記なし）
     ========================================================================== */
  --color-success: #3F8556;                   /* Recommended */
  --color-warning: #B8862E;                   /* Recommended — 注意ボックス（warning-circleアイコン）向け */
  --color-error: #B3454A;                     /* Recommended — フォームバリデーション向け */

  /* ==========================================================================
     5.7 Typography Tokens
     ========================================================================== */
  --font-family-heading: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "HGS明朝E", "MS PMincho", serif; /* Observed — Moodboard「見出しは明朝Medium」 */
  --font-family-body: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, "Yu Gothic", YuGothic, "MS PGothic", Osaka, arial, sans-serif; /* 固定値 */

  --font-size-xs: 0.75rem;    /* 12px, Inferred */
  --font-size-sm: 0.875rem;   /* 14px, Inferred */
  --font-size-base: 1rem;     /* 16px, 固定値 */
  --font-size-md: 1.125rem;   /* 18px, Inferred */
  --font-size-lg: 1.25rem;    /* 20px, Inferred */
  --font-size-xl: 1.5rem;     /* 24px, Inferred */
  --font-size-2xl: 2rem;      /* 32px, Inferred */
  --font-size-3xl: 2.5rem;    /* 40px, Inferred — PC hero見出し想定 */
  /* 見出しの可変サイズは assets/css/fluid-type.css（--font-size-fluid-*）が正本。
     上記は固定サイズが必要なUIラベル・チップ・ボタン等で使用する。 */

  --line-height-tight: 1.3;    /* Inferred */
  --line-height-normal: 1.6;   /* Inferred */
  --line-height-relaxed: 1.9;  /* Inferred — Observed方向「本文は行間を広く」 */

  --letter-spacing-normal: normal;  /* Inferred */
  --letter-spacing-wide: 0.04em;    /* Inferred — Observed方向「字間広め」 */
  --letter-spacing-wider: 0.08em;   /* Inferred */

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

  /* ==========================================================================
     5.8 Spacing Scale
     ========================================================================== */
  --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 */

  /* ==========================================================================
     5.9 Layout Tokens
     ブレークポイント設計方針: PC / TAB&SP（SP・TABは共通ベース、PCのみ min-width:1024px）
     ========================================================================== */
  --layout-container-max: 1200px;                 /* 固定値 */
  --layout-container-padding: var(--space-5);     /* 固定値（20px） */
  --layout-section-padding-y-sm: 3rem;   /* 48px, Inferred — SP&TABの通常セクション上下 */
  --layout-section-padding-y-md: 4rem;   /* 64px, Inferred — SP&TABの強調セクション上下 */
  --layout-section-padding-y-lg: 7rem;   /* 112px, Observed範囲 96–144px（board.png）の中央値、PC用 */
  --layout-header-height-sp: 72px;       /* SP時 .p-header の実高さ */

  /* ==========================================================================
     5.10 Component Spacing Tokens
     ========================================================================== */
  --component-card-padding: var(--space-5);   /* Inferred */
  --component-card-gap: var(--space-6);       /* Inferred — Observed「列間16〜24px・段間20〜32px」の中間値 */

  --component-button-padding-x: 2rem;         /* 32px, Inferred — カプセルCTA */
  --component-button-padding-y: 0.5rem;     /* 8px, Inferred */
  --component-button-gap: var(--space-2);     /* Inferred — ラベルと右端矢印アイコンの間隔 */

  --component-section-heading-gap: var(--space-1); /* Inferred — 花アイコン→英字副題→和文見出しの縦間隔 */

  /* ==========================================================================
     5.11 Radius Tokens
     ========================================================================== */
  --radius-sm: 2px;    /* Inferred */
  --radius-md: 4px;    /* Observed — カード角「直角〜4px」 */
  --radius-lg: 8px;    /* Inferred */
  --radius-xl: 16px;   /* Inferred */
  --radius-pill: 999px;   /* Observed — CTAは完全なカプセル形 */
  --radius-circle: 50%;   /* Observed — CTA右端の小さな円形矢印 */

  --component-radius-button: var(--radius-pill);  /* Observed */
  --component-radius-card: var(--radius-md);      /* Observed */
  --component-radius-chip: var(--radius-pill);    /* Inferred */
  --component-radius-image: var(--radius-md);     /* Inferred — カードと同一トーンの角丸 */

  /* ==========================================================================
     5.12 Shadow Tokens
     ========================================================================== */
  --shadow-sm: 0 2px 8px rgba(62, 69, 71, 0.06);    /* Inferred — Observed「薄い影」 */
  --shadow-md: 0 4px 16px rgba(62, 69, 71, 0.08);   /* Inferred */
  --shadow-lg: 0 8px 32px rgba(62, 69, 71, 0.12);   /* Inferred */

  --shadow-card: var(--shadow-sm);           /* Observed — 薄い影 or 1pxの淡い罫線 */
  --shadow-card-hover: var(--shadow-md);     /* Inferred */
  --shadow-button: 0 4px 12px rgba(145, 75, 96, 0.25); /* Inferred — CTA capsule用のローズ影 */
  --shadow-floating: 0 8px 24px rgba(62, 69, 71, 0.16); /* Inferred — SP下部固定CTAバー用 */

  /* ==========================================================================
     5.13 Transition and Z-index Tokens
     ========================================================================== */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-color: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
  --transition-shadow: box-shadow var(--transition-fast);

  --z-base: 0;
  --z-above: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-header: 500;

  /* ==========================================================================
     Chip Token Policy（産科=primary系 / 婦人科=secondary系で識別する想定）
     ========================================================================== */
  --color-chip-primary-bg: var(--color-brand-primary);
  --color-chip-primary-text: var(--color-text-on-primary);

  --color-chip-secondary-bg: var(--color-brand-secondary-soft);
  --color-chip-secondary-text: var(--color-text-primary);

  --color-chip-accent-bg: var(--color-surface-accent);
  --color-chip-accent-text: var(--color-text-primary);
}

/*!
 * base.css
 * Project-level document and WordPress content foundations.
 * Mobile/tablet is the default; desktop enhancements begin at 1024px.
 */

:root {
  color-scheme: light;
}

html {
  background: var(--color-bg-page);
}

body {
  min-width: 0;
  min-height: 100vh;
  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-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: var(--transition-color), opacity var(--transition-fast);
}

a:hover {
  opacity: 0.78;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-brand-secondary);
  outline-offset: var(--space-1);
}

img {
  max-width: 100%;
  height: auto;
}

figure,
picture {
  max-width: 100%;
}

input,
select,
textarea {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-base);
  color: var(--color-text-primary);
}

::placeholder {
  color: var(--color-text-muted);
}

/* WordPress Classic Theme content area. */
.entry-content {
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  line-height: var(--line-height-relaxed);
  overflow-wrap: anywhere;
}

   .entry-content > * {
    margin-block: 0;
  }

.entry-content > *:not(.alignfull) {
  max-width: 100%;
}

.entry-content > * + *:not(.p-breakout) {
  margin-block-start: var(--space-6);
}

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

.entry-content :where(h2, h3, h4),.c-schedule-monthly__heading,.c-schedule-anytime__heading {
  scroll-margin-top: var(--space-20);
}

.entry-content h2,
  .entry-content h3,
  .entry-content h4,
  .c-schedule-monthly__heading,
  .c-schedule-anytime__heading {
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
  font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
  }

  .entry-content h2:not(.is-style-plain),.c-class-archive__section-heading,.c-schedule-monthly__heading,
  .c-schedule-anytime__heading {
    position: relative;
    margin-top: var(--space-8);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-xl);
background-color:var(--color-surface-accent);
    color:var(--color-brand-primary);
        line-height: 1.6;
        border-radius:var(--radius-md);
  }


  .entry-content h3:not(.is-style-plain):not(.p-flow__step-title):not(.wp-block-accordion-heading) {
font-size: var(--font-size-lg);
  color:var(--color-brand-primary);
border-bottom: 1px solid var(--color-brand-primary);
padding-bottom:var(--space-2);
margin-top: var(--space-8);
margin-bottom: var(--space-8);
  }

  .entry-content h2.is-style-plain,
  .entry-content h3.is-style-plain {
    margin-top: var(--space-6);
    padding: 0;
    border: 0;
  }

  .entry-content > h2:first-child,.c-schedule-monthly__heading {
    margin-top: 0;
  }

  .entry-content p {
    margin-block: 0;
  }

   .entry-content h4:not(.is-style-plain):not(.p-flow__step-title):not(.wp-block-accordion-heading){
font-size: var(--font-size-md);
color:var(--color-text-secondary);
border-left: 8px solid var(--color-text-secondary);
padding-left:var(--space-3);
  }

.entry-content a:not([class]) {
  color: var(--color-brand-primary);
  text-decoration: underline;
}

.entry-content a:not([class]):hover {
  color: var(--color-brand-primary-hover);
}

.entry-content :where(ul, ol):not([class]) {
  padding-inline-start: var(--space-6);
}

.entry-content ul:not([class]) {
  list-style: disc;
}

.entry-content ol:not([class]) {
  list-style: decimal;
}

.entry-content :where(li + li) {
  margin-block-start: var(--space-2);
}

.entry-content :where(blockquote, .wp-block-quote) {
  padding: var(--space-5) var(--space-6);
  border-inline-start: 2px solid var(--color-border-accent);
  background: var(--color-surface-soft);
  color: var(--color-text-secondary);
}

.entry-content :where(hr, .wp-block-separator) {
  margin-block: var(--space-10);
  border-color: var(--color-border-default);
}

.entry-content :where(table, .wp-block-table table) {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface-base);
}

.entry-content :where(th, td) {
  padding: var(--space-3);
  border: 1px solid var(--color-border-default);
  text-align: start;
  vertical-align: middle;
}

.entry-content th {
  background: var(--color-bg-emphasis);
  font-weight: var(--font-weight-medium);
}

.entry-content :where(.wp-block-table, .wp-block-flexible-table-block-table) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

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

.entry-content :where(.aligncenter, .wp-block-image.aligncenter) {
  margin-inline: auto;
}

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

@media (min-width: 1024px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
    .entry-content h2:not(.is-style-plain) {
      font-size: var(--font-size-fluid-lg);
      margin-top: var(--space-12);
    }
  .entry-content :where(.alignleft) {
    float: left;
    margin-inline: 0 var(--space-8);
    margin-block-end: var(--space-5);
  }

  .entry-content :where(.alignright) {
    float: right;
    margin-inline: var(--space-8) 0;
    margin-block-end: var(--space-5);
  }
}


/*!
 * components.css
 * Reusable project components (.c-*). Uses role tokens from tokens.css.
 */

/* Buttons */
.c-button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--component-button-gap);
  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-base);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-normal);
  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--primary {
  border-color: var(--color-bg-cta);
  background: var(--color-bg-cta);
  box-shadow: var(--shadow-button);
  color: var(--color-text-inverse);
}

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

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

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

.c-button__icon {
  width: var(--space-5);
  height: var(--space-5);
  flex: 0 0 auto;
  object-fit: contain;
}

.c-button--icon,
.c-button[data-icon="arrow"] {
  position: relative;
  /*
  padding-inline-end: calc(var(--component-button-padding-x) + var(--space-5));
  */
}

.c-button--icon::after,
.c-button[data-icon="arrow"]::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 1.2em;
  width: 6px;
  height: 11px;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask-image: url("/wp-content/themes/kasumizawa/assets/icons/icon-arrow.svg");
  mask-image: url("/wp-content/themes/kasumizawa/assets/icons/icon-arrow.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.c-button[aria-disabled="true"],
.c-button:disabled {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

/* Role chips: obstetrics / gynecology / neutral accent. */
.c-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: var(--space-8);
  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);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-normal);
}

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

.c-chip--secondary {
  background: var(--color-chip-secondary-bg);
  color: var(--color-chip-secondary-text);
}

.c-chip--accent {
  background: var(--color-chip-accent-bg);
  color: var(--color-chip-accent-text);
}

/* Section lead */
.c-section-heading {
  display: grid;
  gap: var(--component-section-heading-gap);
  justify-items: center;
  text-align: center;
}

.c-section-heading--start {
  justify-items: start;
  text-align: start;
}

.c-section-heading__decor {
  width: var(--space-10);
  height: var(--space-10);
  object-fit: contain;
}

.c-section-heading__eyebrow {
  color: var(--color-brand-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-normal);
  text-transform: uppercase;
}

.c-section-heading__title {
  color: var(--color-brand-primary);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-fluid-lg);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-tight);
}



/* Cards */
.c-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--component-card-gap);
}

.c-feature-card,
.c-media-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: var(--component-radius-card);
  background: var(--color-surface-card);
  transition: var(--transition-shadow), transform var(--transition-normal);
}

.c-feature-card:hover,
.c-media-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.c-feature-card--primary {
  border-block-start-color: var(--color-brand-primary);
}

.c-feature-card--secondary {
  border-block-start-color: var(--color-brand-secondary);
}

.c-feature-card__image,
.c-media-card__image {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}

.c-feature-card__body,
.c-media-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--component-card-padding);
}

.c-feature-card__number {
  color: var(--color-brand-accent);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  line-height: 1;
}

.c-feature-card__title,
.c-media-card__title {
  color: var(--color-text-primary);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

.c-feature-card__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.c-feature-card__action {
  margin-block-start: auto;
  padding-block-start: var(--space-2);
}

.c-media-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* News */
.c-news-list {
  border-block-start: 1px solid var(--color-border-default);
}

.c-news-list__item {
  border-block-end: 1px solid var(--color-border-default);
}

.c-news-list__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-4);
  text-decoration: none;
}

.c-news-list__content {
  display: grid;
  gap: var(--space-1);
}

.c-news-list__date {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.c-news-list__title {
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}

.c-news-list__link::after {
  content: "→";
  color: var(--color-brand-primary);
}

/* Notices */
.c-message-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-base);
}

.c-message-box__icon {
  display: grid;
  width: var(--space-8);
  height: var(--space-8);
  place-items: center;
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-circle);
  color: var(--color-warning);
  font-weight: var(--font-weight-bold);
}

.c-message-box__title {
  margin-block-end: var(--space-2);
  font-weight: var(--font-weight-bold);
}

.c-message-box__body {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* Compact linked image banners */
.c-link-banner {
  position: relative;
  display: grid;
  min-height: 120px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-text-primary);
  text-decoration: none;
}

.c-link-banner__image,
.c-link-banner__overlay {
  grid-area: 1 / 1;
}

.c-link-banner__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-link-banner__overlay {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: linear-gradient(transparent, var(--color-surface-soft));
}

.c-link-banner__title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-medium);
}

/* Gallery */
.c-gallery-strip {
  display: grid;
  grid-auto-columns: 82%;
  grid-auto-flow: column;
  gap: var(--space-1);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
}

.c-gallery-strip__item {
  min-width: 0;
  scroll-snap-align: start;
}

.c-gallery-strip__image {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: 100%;
  border-radius: var(--component-radius-image);
  object-fit: cover;
}

/* Accordion: works with details/summary or JS-managed button/panel markup. */
.c-accordion {
  border-block-start: 1px solid var(--color-border-default);
}

.c-accordion__item {
  border-block-end: 1px solid var(--color-border-default);
}

.c-accordion__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  width: 100%;
  padding-block: var(--space-5);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  list-style: none;
}

.c-accordion__summary::-webkit-details-marker {
  display: none;
}

.c-accordion__summary::after {
  content: "+";
  display: grid;
  width: var(--space-8);
  height: var(--space-8);
  place-items: center;
  border: 1px solid var(--color-brand-secondary);
  border-radius: var(--radius-circle);
  color: var(--color-brand-secondary);
  transition: transform var(--transition-fast);
}

.c-accordion__item[open] > .c-accordion__summary::after,
.c-accordion__item.is-open > .c-accordion__summary::after,
.c-accordion__summary[aria-expanded="true"]::after {
  content: "−";
  transform: rotate(180deg);
}

.c-accordion__panel {
  padding: 0 var(--space-10) var(--space-5) 0;
  color: var(--color-text-secondary);
}

/* Breadcrumb project refinement */
.c-breadcrumb {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.c-breadcrumb__list {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  overflow: hidden;
}

.c-breadcrumb__item:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fixed conversion route */
.c-fixed-cta {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-header);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2) var(--layout-container-padding) calc(var(--space-2) + env(safe-area-inset-bottom));
  background: var(--color-surface-base);
  box-shadow: var(--shadow-floating);
}

.c-fixed-cta .c-button {
  width: 100%;
  padding-inline: var(--space-3);
}

@media (min-width: 1024px) {
  .c-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .c-gallery-strip {
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .c-fixed-cta {
    inset: 50% 0 auto auto;
    width: auto;
    grid-template-columns: 1fr;
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    transform: translateY(-50%);
  }

  .c-fixed-cta .c-button {
    width: var(--space-16);
    min-height: 160px;
    padding: var(--space-4) var(--space-2);
    writing-mode: vertical-rl;
  }

  .c-fixed-cta .c-button--secondary {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-button,
  .c-feature-card,
  .c-media-card,
  .c-accordion__summary::after {
    transition: none;
  }
}

/* ============================================================
 * class-schedule: 開催スケジュール（/schedule/）
 * ============================================================ */

/* Monthly list (missing base styles restored; grid columns for tablet+ remain in ui.css) */
.c-schedule-monthly {
  margin-bottom: var(--space-12);
}

.c-schedule-monthly__heading {
  margin-bottom: var(--space-6);

}

.c-schedule-monthly__empty {
  color: var(--color-text-muted);
}

.c-schedule-monthly__list {
  display: grid;
  gap: var(--space-4);
}

.c-schedule-monthly__group {
  padding: var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--component-radius-card);
  background: var(--color-surface-card);
}

.c-schedule-monthly__class-name {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-brand-secondary);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-medium);
  border-bottom: 1px dotted var(--color-border-default);
}

.c-schedule-monthly__dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.c-schedule-monthly__date.is-past {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* Class dates list (used on single class_event pages) */
.c-class-dates {
  margin-bottom: var(--space-8);
}

.c-class-dates__heading {
  margin-bottom: var(--component-section-heading-gap);
  color: var(--color-text-primary);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.c-class-dates__anytime,
.c-class-dates__empty {
  color: var(--color-text-muted);
}

.c-class-dates__list {
  display: grid;
  gap: var(--space-1);
  border-block-start: 1px solid var(--color-border-default);
}

.c-class-dates__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-border-default);
}

.c-class-dates__item.is-past {
  color: var(--color-text-muted);
}

.c-class-dates__date {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}

.c-class-dates__item.is-past .c-class-dates__date {
  text-decoration: line-through;
}

.c-class-dates__time {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.c-class-dates__status {
  margin-inline-start: auto;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.c-class-dates__note {
  color: var(--color-brand-secondary);
  font-size: var(--font-size-sm);
}

/* Calendar */
.c-schedule-calendar {
  margin-bottom: var(--space-12);
}

.c-schedule-calendar__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.c-schedule-calendar__nav-link {
  color: var(--color-brand-secondary);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.c-schedule-calendar__heading {
  color: var(--color-text-primary);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.c-schedule-calendar__today-link {
  display: inline-flex;
  margin-bottom: var(--space-4);
  color: var(--color-brand-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}

.c-schedule-calendar__scroll {
  overflow-x: auto;
}

.c-schedule-calendar__table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  table-layout: fixed;
}

.c-schedule-calendar__table th,
.c-schedule-calendar__table td {
  border: 1px solid var(--color-border-strong);
}

.c-schedule-calendar__table th {
  padding-block: var(--space-2);
  background: var(--color-surface-soft);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.c-schedule-calendar__cell {
  vertical-align: top;
  padding: var(--space-2);
  background-color: var(--color-surface-base);
}

.c-schedule-calendar__cell--empty {
  background: #f2f2f2;
}

.c-schedule-calendar__cell--today {
  background: var(--color-brand-primary-soft);
}

.c-schedule-calendar__cell--past {
  background: #f2f2f2;
  color: var(--color-text-muted);
}

.c-schedule-calendar__day {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: var(--font-weight-bold);
}

.c-schedule-calendar__events {
  display: grid;
  gap: var(--space-1);
}

.c-schedule-calendar__event {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
}

.c-schedule-calendar__event a {
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-bold);
}

.c-schedule-calendar__event-time {
  display: block;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .c-schedule-calendar__table {
    min-width: 0;
  }
}

/* Menu dialog footer actions (header CTA) */
.p-menuDialog__actions {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border-default);
}

.p-menuDialog__actions .p-header__phone {
  justify-self: center;
}

/* Class archive anchor nav (category jump links at the top of /class/)
   SP: <details>/<summary> pulldown (.c-class-archive__anchor-list--sp, no JS).
   PC: a separate, always-visible horizontal list (.c-class-archive__anchor-list--pc).
   Two markup variants (not one <details> forced open) because modern browsers hide
   closed <details> content via an internal ::details-content box with
   content-visibility:hidden, which author CSS on the child cannot override. */
.c-class-archive__anchor-nav {
  position: relative;
  margin-bottom: var(--space-8);
}

.c-class-archive__anchor-summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--component-radius-button);
  background: var(--color-surface-card);
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-medium);
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.c-class-archive__anchor-summary::-webkit-details-marker {
  display: none;
}

.c-class-archive__anchor-summary::after {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
  content: "";
}

.c-class-archive__anchor-dropdown[open] .c-class-archive__anchor-summary::after {
  transform: rotate(-135deg);
}

.c-class-archive__anchor-list--sp {
  position: absolute;
  z-index: 10;
  inset-inline: 0;
  top: calc(100% + var(--space-2));
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--component-radius-card);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-card);
  list-style: none;
}

.c-class-archive__anchor-list--pc {
  display: none;
}

.c-class-archive__anchor-link {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--component-radius-button);
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: var(--transition-color);
}

.c-class-archive__anchor-link:hover {
  background: var(--color-brand-primary-soft);
  color: var(--color-brand-primary-hover);
}
 .c-class-archive__section-heading {
  margin-block-end: var(--space-6);
 }
.c-class-archive__section .c-card__image a picture img{
  border-radius:var(--radius-md);
  margin-bottom:var(--space-6);
}

.c-class-archive__section .c-card__title,
.c-card--class-event .c-card__title{
font-family: var(--font-family-heading);
font-size:var(--font-size-fluid-md);
      border-bottom: 1px dotted var(--color-border-default);
    display: block;
    margin-bottom: 16px;
    padding-bottom: 4px;
    margin-top: 0;
}

.class_event-template-default .l-page__inner h1.l-page__title{
font-size:var(--font-size-fluid-top-head-title);
}

@media (min-width: 768px) {
  .c-class-archive__anchor-dropdown {
    display: none;
  }

  .c-class-archive__anchor-list--pc {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
.c-class-archive__anchor-link{
  border:1px solid var(--color-brand-primary);
  font-size:var(--font-size-sm);
}
}

.c-card__schedule-link {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}

.c-card__schedule-link::after {
  content: "";
  width: 6px;
  height: 11px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: url("/wp-content/themes/kasumizawa/assets/icons/icon-arrow.svg");
  mask-image: url("/wp-content/themes/kasumizawa/assets/icons/icon-arrow.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}


/* ------------------------------------------------------------------
   class_event 詳細ページ: アイキャッチ + 概要メタを横並び表示
------------------------------------------------------------------ */
.c-event-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.c-event-summary__image {
  flex: 1 1 320px;
}

@media (min-width: 768px) {
  .c-event-summary__image {
    flex: 0 0 500px;
    width: 500px;
  }
}

.c-event-summary__image img {
  border-radius: var(--radius-md);
  width: 100%;
}

.c-event-summary__meta {
  flex: 1 1 320px;
  display: grid;
  gap: var(--space-2);
  margin: 0;
  align-content: start;
}

.c-event-summary__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.c-event-summary__label {
  flex-shrink: 0;
  width: 25%;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-brand-primary-soft);
  border-bottom: 0px solid var(--color-border-default);
}

.c-event-summary__value {
  flex: 1 1 auto;
  width: 75%;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-bottom: 0px solid var(--color-border-default);
}

.class_event-template-default .c-event-summary__value{
  background-color: #fff;
}

@media (max-width: 767px) {
  .c-event-summary__label,
  .c-event-summary__value {
    width: 100%;
  }
  .c-event-summary__value {
    padding: var(--space-2) var(--space-3) var(--space-1) var(--space-3);
  }
  .tax-class_category .c-card:has(.c-card__image){
    grid-template-columns: 1fr;
  }
}

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

.p-section--alt {
  background: var(--color-bg-section-alt);
}

.p-section--emphasis {
  background: var(--color-bg-emphasis);
}

.p-section__inner,
.p-header__inner,
.p-footer__inner {
  width: min(100% - (var(--layout-container-padding) * 2), var(--layout-container-max));
  margin-inline: auto;
}

/* Header */
.p-header {
  /* position: fixed だとモバイルのレイアウトビューポート再計算と干渉し、
     幅が実ビューポートより広く計算されて右端のボタン等がはみ出す事例があったため、
     常時フローに留まったまま先頭に貼り付く sticky を採用する。 */
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: var(--color-bg-page);
}

.p-header__inner {
  display: flex;
  min-height: var(--layout-header-height-sp);
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: calc(100% - 40px);
}

.p-header__main {
  display: flex;
  align-items: center;
justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
}

.p-header__brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
}

.p-header__logo {
  width: auto;
  max-width: 220px;
  max-height: 52px;
}

.p-header__utility,
.p-header__nav {
  display: none;
}

.p-header__menuButton,
.p-header__menu-button {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  padding:0;
background-color:transparent;
}

.p-header__description {
  width: min(100% - (var(--layout-container-padding) * 2), var(--layout-container-max));
  margin-inline: auto;
  padding-block-start: var(--space-2);
  font-size: 10px;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.p-header__contact {
  display: grid;
  justify-items: end;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.3;
  font-weight: var(--font-weight-bold);
  gap: var(--space-1);
}
.p-header__contact__hour{
  font-weight: var(--font-weight-normal);
}

.p-header__utility .c-button__label{
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
}
.p-header__utility .c-button{
    padding: var(--space-4) var(--space-8);
    width: 200px;
}

.p-header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-brand-primary);
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-heading);
  letter-spacing: 3.36px;
}

.p-header__phone img {
  width: var(--space-5);
  height: var(--space-5);
}

.p-header__menuLine {
  display: none;
}

.p-header__menu-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin-inline: auto;
}

.menu-item-description {
  display:none;
}

/* Header scroll behavior (PC専用)
   PCでは .p-header を通常フロー（position: relative）に戻したうえで、
   html.scrolled 付与時に .p-header を上へスライドアウトし、
   代わりに .p-stickyNav（ナビゲーションのみの追従バー）を上からスライドインする。
   SPでは .p-header は常時 position: fixed のままとし、スライド演出は行わない。
   html.scrolled の付与は assets/js/scroll-trigger.js が担う。 */
.p-stickyNav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  background: var(--color-bg-page);
  visibility: hidden;
  transform: translateY(-100%);
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
  box-shadow: var(--shadow-floating);
}

.p-stickyNav__inner {
  width: min(100% - (var(--layout-container-padding) * 2), var(--layout-container-max));
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .p-header {
    position: relative;
    transition: transform 0.3s ease, visibility 0s linear 0s;
  }

  html.scrolled .p-header {
    visibility: hidden;
    transform: translateY(-100%);
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }

  html.scrolled .p-stickyNav {
    visibility: visible;
    transform: translateY(0);
    transition: transform 0.3s ease, visibility 0s linear 0s;
  }
  .menu-item-description {
  display: block;
  margin-top: 0.25em;
  font-size: 10px;
  line-height: 1.4;
  color:var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}
}



/* Hero */
.p-hero {
  position: relative;
  display: grid;
  min-height: min(78vh, 760px);
  overflow: hidden;
  background: var(--color-bg-strong);
  color: var(--color-text-inverse);
  isolation: isolate;
}

.p-hero__media,
.p-hero__overlay,
.p-hero__inner {
  grid-area: 1 / 1;
}

.p-hero__media,
.p-hero__media img,
.p-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-hero__overlay {
  z-index: var(--z-base);
  background: linear-gradient(to top, var(--color-text-primary), transparent 72%);
  opacity: 0.7;
}

.p-hero__inner {
  z-index: var(--z-above);
  display: flex;
  width: min(100% - (var(--layout-container-padding) * 2), var(--layout-container-max));
  margin-inline: auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-5);
  padding-block: var(--layout-section-padding-y-md);
}

.p-hero__eyebrow {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wider);
}

.p-hero__title {
  max-width: 18em;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-fluid-xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-tight);
}

.p-hero__text {
  max-width: 38em;
  line-height: var(--line-height-relaxed);
}

.p-hero__actions {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-3);
}

/* Intro with image/text split */
.p-intro-split {
  padding-block: var(--layout-section-padding-y-md);
  background: var(--color-bg-section-alt);
}

.p-intro-split__inner {
  display: grid;
  width: min(100% - (var(--layout-container-padding) * 2), var(--layout-container-max));
  margin-inline: auto;
  gap: var(--space-8);
}

.p-intro-split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
}

.p-intro-split__media {
  min-height: 280px;
}

.p-intro-split__media img {
  width: 100%;
  height: 100%;
  border-radius: var(--component-radius-image);
  object-fit: cover;
}

/* Schedule */
.p-schedule-table {
  padding-block: var(--layout-section-padding-y-sm);
  background: var(--color-bg-emphasis);
}

.p-schedule-table__inner {
  width: min(100% - (var(--layout-container-padding) * 2), var(--layout-container-max));
  margin-inline: auto;
}

.p-schedule-table__scroll {
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-base);
}

.p-schedule-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.p-schedule-table :where(th, td) {
  padding: var(--space-2) var(--space-1);
  border-block-end: 1px solid var(--color-border-default);
  font-size: var(--font-size-xs);
  text-align: center;
  vertical-align: middle;
}

.p-schedule-table :where(th, td):first-child {
  width: 36%;
  padding-inline: var(--space-2);
  text-align: start;
}

.p-schedule-table th {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.p-schedule-table__mark--primary {
  color: var(--color-brand-primary);
}

.p-schedule-table__mark--secondary {
  color: var(--color-brand-secondary);
}

.p-schedule-table__actions {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-6);
}

/* Photo-backed evidence/video band */
.p-video-banner {
  position: relative;
  padding-block: var(--layout-section-padding-y-md);
  overflow: hidden;
  background: var(--color-bg-strong);
  isolation: isolate;
}

.p-video-banner__background {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
}

.p-video-banner__inner {
  position: relative;
  z-index: var(--z-above);
  display: grid;
  width: min(100% - (var(--layout-container-padding) * 2), var(--layout-container-max));
  margin-inline: auto;
  gap: var(--space-6);
}

.p-video-banner__items {
  display: grid;
  gap: var(--space-4);
}

.p-video-banner__item {
  overflow: hidden;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-base);
}

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

.p-access__inner {
  display: grid;
  width: min(100% - (var(--layout-container-padding) * 2), var(--layout-container-max));
  margin-inline: auto;
  gap: var(--space-6);
}

.p-access__content,
.p-access__map {
  min-width: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface-base);
}

.p-access__content {
  padding: var(--space-6);
}

.p-access__map {
  min-height: 320px;
  overflow: hidden;
}

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

/* Editorial image/text splits */
.p-profile,
.p-facility {
  background: var(--color-bg-section-alt);
}

.p-profile__inner,
.p-facility__inner {
  display: grid;
}

.p-profile__content,
.p-facility__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--layout-section-padding-y-sm) var(--layout-container-padding);
}

.p-profile__media,
.p-facility__media {
  min-height: 360px;
  background: var(--color-surface-base);
}

.p-profile__media img,
.p-facility__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Final CTA: the only section allowed to consume --color-bg-cta. */
.p-final-cta {
  padding-block: var(--layout-section-padding-y-md);
  background: var(--color-bg-cta);
  color: var(--color-text-inverse);
}

.p-final-cta__inner {
  display: grid;
  width: min(100% - (var(--layout-container-padding) * 2), var(--layout-container-max));
  margin-inline: auto;
  gap: var(--space-6);
  text-align: center;
}

.p-final-cta__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-fluid-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.p-final-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
}

.p-final-cta .c-button--primary {
  border-color: var(--color-text-inverse);
}

.p-final-cta .c-button--secondary {
  border-color: var(--color-text-inverse);
  background: transparent;
  color: var(--color-text-inverse);
}

/* Footer */
.p-footer {
  margin-block-start: 0;
  padding-block: var(--layout-section-padding-y-sm) var(--space-8);
  border-block-start: 1px solid var(--color-border-default);
  background: var(--color-brand-primary-soft);
  color: var(--color-text-primary);
}

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

.p-footer__nav {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--color-border-default);
}

.p-footer__nav a {
  display: block;
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
}

.p-footer__bottom {
  margin-block-start: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
}

@media (min-width: 1024px) {
  .p-section {
    padding-block: var(--layout-section-padding-y-lg);
  }

  .p-header__inner {
    min-height: 0;
    flex-wrap: wrap;
  }

  .p-header__main {
   width: min(100% - (var(--layout-container-padding) * 2), var(--layout-container-max));
    min-height: 84px;
  }

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

  .p-header__nav {
    display: block;
    width: 100%;

  }

  .p-header__nav-list {
    display: flex;
    justify-content: center;
  }

  .p-header__nav-list > li > a {
    display: grid;
    min-height: 60px;
    min-width: 60px;
    padding: var(--space-3) var(--space-6);
    align-content: center;
    border-inline-start: 1px solid var(--color-border-default);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    text-align: center;
    text-decoration: none;
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-medium);
  }

  .p-header__nav-list > li:last-child > a {
    border-inline-end: 1px solid var(--color-border-default);
  }

  .p-header__nav-list small {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-wide);
  }

  .p-header__menuButton,
  .p-header__menu-button {
    display: none;
  }

  .p-hero {
    min-height: min(82vh, 860px);
  }

  .p-hero__inner {
    justify-content: center;
    padding-block: var(--layout-section-padding-y-lg);
  }

  .p-hero__title {
    max-width: 14em;
    font-size: var(--font-size-fluid-2xl);
  }

  .p-hero__actions {
    width: auto;
    flex-direction: row;
  }

  .p-intro-split {
    padding-block: var(--layout-section-padding-y-lg);
  }

  .p-intro-split__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-12);
    align-items: center;
  }

  .p-intro-split__media {
    min-height: 520px;
  }

  .p-schedule-table,
  .p-video-banner,
  .p-access,
  .p-final-cta {
    padding-block: var(--layout-section-padding-y-lg);
  }

  .p-schedule-table :where(th, td) {
    padding: var(--space-3) var(--space-2);
    font-size: var(--font-size-sm);
  }

  .p-schedule-table :where(th, td):first-child {
    width: 28%;
    padding-inline: var(--space-4);
  }

  .p-video-banner__items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .p-access__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .p-profile__inner,
  .p-facility__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .p-profile__content,
  .p-facility__content {
    padding: var(--layout-section-padding-y-lg) max(var(--layout-container-padding), calc((100vw - var(--layout-container-max)) / 2));
  }

  .p-profile__media,
  .p-facility__media {
    min-height: 620px;
  }

  .p-facility__media {
    order: -1;
  }

  .p-final-cta__actions {
    flex-direction: row;
    justify-content: center;
  }

  .p-footer__nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4) var(--space-8);
    border-block-start: 0;
  }

  .p-footer__nav a {
    border-block-end: 0;
  }
  .p-header__logo {
  width: auto;
  max-width: 281px;
  max-height: 60px;
}
}

  @media (min-width: 1280px) {
.p-header__nav-list > li > a {
min-width: 120px;
}
}

.p-menuDialog__nav a{
font-family: var(--font-family-heading);
font-size: var(--font-size-md);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
}
.p-menuDialog__nav .sub-menu a{
font-size: var(--font-size-sm);
}

.entry-content * + p {
    margin-top: var(--space-5);
}

.head_block {
    gap:clamp(24px, calc(-9.803px + 9.014vw), 120px);
    margin-block-end:var(--space-8);
}
@media (max-width: 767px) {
body .is-layout-flex.head_block{
  flex-direction: column-reverse;
}
}
/*!
 * utilities.css
 * Project-only helpers that do not duplicate Tailwind layout utilities.
 */

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

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

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

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

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

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