/* ============================================
   s-layout-04 (フッター)
   ============================================ */
.s-layout-04 {
  background: var(--color-bg-dark);
  color: var(--color-border, #ccc);
  padding: var(--space-9-xl) 0 var(--space-5-xl);
}

:is(.s-layout-04 *) {
  margin: 0;
}

.s-layout-04__inner {
  max-width: var(--width-inner);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.s-layout-04__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7-xl);
  margin-bottom: var(--space-7-xl);
}

.s-layout-04__brand {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-5-xl);
  color: var(--color-white, #fff);
}

.s-layout-04__logo-mark {
  font-family: var(--font-family-en);
  font-size: var(--font-size-6-xl);
  color: var(--color-primary);
  line-height: var(--line-height-none);
}

.s-layout-04__logo-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: var(--line-height-md);
}

.s-layout-04__logo-name {
  font-size: var(--font-size-lg);
}

.s-layout-04__logo-sub {
  font-size: var(--font-size-sm);
  color: var(--wp--preset--color--gray-dark, #999);
}

.s-layout-04__info {
  font-size: var(--font-size-sm);
  color: var(--wp--preset--color--gray-dark, #aaa);
  line-height: var(--line-height-loose);
}

.s-layout-04__info dt {
  color: var(--color-border, #ccc);
  margin-top: var(--space-md);
  font-size: var(--font-size-sm);
}

.s-layout-04__info dd {
  color: var(--wp--preset--color--gray-dark, #999);
}

.s-layout-04__gallery {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-bottom: var(--space-6-xl);
}

.s-layout-04__gallery-item {
  width: var(--space-9-xl);
  height: var(--space-8-xl);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.s-layout-04__nav {
  margin-bottom: var(--space-6-xl);
}

.s-layout-04__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-3-xl);
  justify-content: center;
}

.s-layout-04__nav-link {
  font-size: var(--font-size-md);
  color: var(--wp--preset--color--gray-dark, #aaa);
  transition: color var(--transition-normal);
  text-decoration: none;
}

.s-layout-04__nav-link:hover {
  color: var(--color-white, #fff);
}

.s-layout-04__schedule {
  margin-bottom: var(--space-6-xl);
}

.s-layout-04__map {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-3-xl);
}

.s-layout-04__copy {
  font-size: var(--font-size-sm);
  color: var(--color-text-light, #777);
  padding-top: var(--space-3-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

/* --- s-layout-04Footer Info (アクセス・スケジュール) --- */
.s-layout-04__info-section {
  padding: var(--space-9-xl) 0 var(--space-6-xl);
}

.s-layout-04__info-grid.wp-block-group,
.s-layout-04__info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7-xl);
}

.s-layout-04__info-logo {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.s-layout-04__info-logo-mark {
  font-family: var(--font-family-en);
  font-size: var(--font-size-6-xl);
  color: var(--color-primary);
  line-height: var(--line-height-none);
}

.s-layout-04__info-logo-text {
  display: flex;
  flex-direction: column;
  line-height: var(--line-height-md);
}

.s-layout-04__info-logo-name {
  font-size: var(--font-size-xl);
}

.s-layout-04__info-logo-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.s-layout-04__info-corp {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}

.s-layout-04__info-address {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin-bottom: var(--space-xs);
}

.s-layout-04__info-tel {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-xs);
}

.s-layout-04__info-access {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--space-3-xl);
}

.s-layout-04__info-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-top: var(--space-xs);
}

.s-layout-04__info-calendar {
  margin-bottom: var(--space-xl);
}

.s-layout-04__info-map {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.s-layout-04__info-map iframe {
  display: block;
}

/* --- s-layout-04Legal Links --- */
.s-layout-04__legal {
  padding: var(--space-3-xl) 0;
  text-align: center;
  font-size: var(--font-size-sm);
}

.s-layout-04__legal-text {
  color: var(--color-text-light);
}

.s-layout-04__legal-link {
  color: var(--color-text-light);
  text-decoration: none;
  transition: color var(--transition-normal);
}

.s-layout-04__legal-link:hover {
  color: var(--color-primary);
}

.s-layout-04__legal-sep {
  margin: 0 var(--space-md);
}

/* --- s-layout-04Dark Footer --- */
.s-layout-04--dark {
  background: var(--color-bg-dark, #1a1a1a);
  padding: var(--space-3-xl) 0;
  text-align: center;
}

.s-layout-04--dark__copy {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* ============================================
   s-layout-04 - Footer (fallback)
   ============================================ */
.s-layout-04__footer {
  background: var(--color-bg-dark);
  color: var(--color-white, #fff);
  margin-top: 0;
  overflow-x: hidden;
}

.s-layout-04__inner {
  container-type: inline-size;
  max-width: var(--width-inner);
  margin: 0 auto;
  /* 下余白は下部固定のスティッキーCTA（s-sticky-cta-01・約65px）に
     法務リンク/コピーライトが隠れないよう広めに確保 */
  padding: var(--space-8-xl) var(--container-padding) var(--space-9-xl);
}

/* --- 上段: ブランド/連絡先（左） + サイトマップ（右） --- */
.s-layout-04__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7-xl);
  padding-bottom: var(--space-7-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@container (min-width: 900px) {
  .s-layout-04__top {
    grid-template-columns: minmax(0, 28rem) 1fr;
    gap: var(--space-9-xl);
  }
}

/* フッターのブランド列はブロック積み（旧 __brand の flex 横並びを打ち消す） */
.s-layout-04__footer .s-layout-04__brand {
  display: block;
  margin-bottom: 0;
  color: inherit;
}

/* --- サイトマップ（優先度グループ・自動折返し） --- */
.s-layout-04__sitemap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5-xl) var(--space-3-xl);
}

@container (min-width: 640px) {
  .s-layout-04__sitemap {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Column 1: Clinic Info --- */
.s-layout-04__clinic-name {
  font-family: var(--font-family-jp);
  font-size: var(--font-size-2-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-3-xs);
}

.s-layout-04__clinic-sub {
  font-size: var(--font-size-3-xs);
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-3-xl);
}

.s-layout-04__info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.8);
}

.s-layout-04__info-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.s-layout-04__info-row--top {
  align-items: flex-start;
}

.s-layout-04__info-icon {
  font-size: var(--font-size-xl);
  color: var(--color-primary);
}

.s-layout-04__info-icon--top {
  margin-top: var(--space-4-xs);
}

.s-layout-04__tel {
  color: var(--color-white);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
}

.s-layout-04__tel:hover {
  color: var(--color-primary);
}

.s-layout-04__closed {
  color: rgba(255, 255, 255, 0.5);
}

/* --- サイトマップ: グループ見出し + リンク --- */
.s-layout-04__heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
  letter-spacing: var(--letter-spacing-wide);
}

.s-layout-04__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
}

.s-layout-04__nav li {
  margin: 0;
}

.s-layout-04__nav-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: var(--font-size-xs);
  display: flex;
  align-items: center;
  gap: var(--space-3-xs);
  transition: color var(--transition-fast);
}

.s-layout-04__nav-link:hover {
  color: var(--color-primary);
}

.s-layout-04__nav-chevron {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.s-layout-04__nav-link:hover .s-layout-04__nav-chevron {
  color: var(--color-primary);
}

/* --- ブランド側: 予約ボタン & SNS --- */
.s-layout-04__booking-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-3-xl);
  margin-bottom: var(--space-3-xl);
}

.s-layout-04__booking-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-3-xl);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: opacity var(--transition-fast);
}

.s-layout-04__booking-btn:hover {
  opacity: 0.85;
}

.s-layout-04__booking-btn--primary {
  background: var(--color-primary);
}

.s-layout-04__booking-btn--dark {
  background: var(--color-primary-dark);
}

.s-layout-04__booking-btn--line {
  background: var(--color-cta-line);
}

.s-layout-04__booking-icon {
  font-size: var(--font-size-xl);
}

.s-layout-04__booking-line-icon {
  width: var(--font-size-xl);
  height: var(--font-size-xl);
  fill: currentColor;
  flex-shrink: 0;
}

.s-layout-04__social {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.s-layout-04__social-link {
  width: var(--space-6-xl);
  height: var(--space-6-xl);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.s-layout-04__social-link--line:hover {
  background: var(--color-cta-line);
}

.s-layout-04__social-link--ig:hover {
  background: var(--color-primary);
}

/* --- 下段: 法務リンク + コピーライト --- */
.s-layout-04__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding-top: var(--space-5-xl);
}

@container (min-width: 768px) {
  .s-layout-04__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.s-layout-04__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-xl);
}

.s-layout-04__legal-link {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--font-size-2-xs);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.s-layout-04__legal-link:hover {
  color: var(--color-primary);
}

.s-layout-04__copyright-text {
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--font-size-2-xs);
}

/* ============================================
   s-article-02 - Article (記事共通コンポーネント)
   single.php / page.php 用
   ============================================ */

/* --- メインコンテナ ---
   全幅レイアウト: コンテナは全幅、子要素を inner 幅に制約（constrained）。
   alignfull ブロックは真の全幅になる（-50vw ハック不要） --- */
.s-base-02 {
  max-width: none;
  margin: 0 auto;
  /* コンテンツ末尾が次セクション（CTA帯・フッター等）と密着しないよう、
     本文コンテナ自体が終端余白を持つ（コンポーネント側の margin に依存しない） */
  padding: 0 0 var(--space-9-xl);
}

/* 本文の最後が alignfull の全幅帯・全幅セクションで終わる場合は密着が正
   （帯デザイン）なので終端余白を打ち消す */
.s-base-02 > article > .entry-content:last-child > .alignfull:last-child {
  margin-block-end: calc(var(--space-9-xl) * -1);
}

/* 本文先頭が前セクション（MVのグレー帯等）と密着しないよう、
   コンテナ責務で上余白を持たせる。先頭が alignfull 帯の場合は密着が正なので除外 */
.s-base-02 .entry-content > :first-child:not(.alignfull) {
  margin-block-start: var(--space-7-xl);
}

/* article 直下の先頭要素（記事ヘッダー・施術情報テーブル等のテンプレ要素）にも
   同じ上余白。先頭が entry-content の場合は上の rule（内側の先頭）が担う */
.s-base-02 > article > :first-child:not(.entry-content):not(.alignfull) {
  margin-block-start: var(--space-7-xl);
}

/* 直下の article のみ対象（> article）。
   本文内に入れ子になる article（症例カード .s-loop-02 等）の子要素へ
   max-width＋auto margin が波及すると shrink-to-fit＋中央寄せになるため */
.s-base-02 > article > *:not(.entry-content),
.s-base-02 .entry-content > * {
  max-width: var(--width-inner);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.s-base-02 .entry-content > .alignfull {
  max-width: none;
  padding-inline: 0;
  /* 白セクションの直後に来る帯は上に余白（中身が密着しないように）。下は次要素のmarginに任せる */
  margin-block: var(--space-8-xl) 0;
}

/* 全幅セクションが連続する場合（帯↔帯・帯↔写真帯）だけ密着させる */
.s-base-02 .entry-content > .alignfull + .alignfull {
  margin-block-start: 0;
}

/* テンプレ直書きの全幅セクション（子施術一覧等）は constrained 対象外 */
.s-base-02 > article > .s-treatment-children {
  max-width: none;
  padding-inline: 0;
}

/* コラム・お知らせ等の1カラム読み物は narrow 幅（行長を読みやすく保つ） */
.single-column .s-base-02 > article > *:not(.entry-content),
.single-column .s-base-02 .entry-content > *:not(.alignfull),
.single-news .s-base-02 > article > *:not(.entry-content),
.single-news .s-base-02 .entry-content > *:not(.alignfull) {
  max-width: var(--width-narrow);
}

/* flexible-table-block はプラグインCSSの margin:0 が強いため詳細度を上げて中央寄せ */
.s-base-02 .entry-content > .wp-block-flexible-table-block-table.wp-block-flexible-table-block-table {
  margin-inline: auto;
}

/* --- 記事ヘッダー --- */
.s-article-02__header {
  margin-bottom: var(--space-4-xl);
}

/* --- 投稿メタ（日付・カテゴリ） --- */
.s-article-02__meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.s-article-02__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  gap: var(--space-4-xs);
}

.s-article-02__date-icon {
  font-size: var(--font-size-sm);
  color: var(--color-accent);
}

.s-article-02__category {
  font-size: var(--font-size-3-xs);
  padding: var(--space-4-xs) var(--space-sm);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
}

/* --- 記事タイトル --- */
.s-article-02__title {
  font-family: var(--font-family-jp);
  font-size: var(--font-size-3-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-normal);
}

/* --- 装飾線 --- */
.s-article-02__line {
  width: var(--space-5-xl);
  height: 3px;
  background: var(--color-accent);
  margin-top: var(--space-md);
}

/* --- アイキャッチ画像 --- */
.s-article-02__featured-image {
  margin-bottom: var(--space-4-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.s-article-02__featured-image-img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- ページリンク（マルチページ） --- */
.s-article-02__page-links {
  margin-top: var(--space-4-xl);
  padding: var(--space-lg);
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* --- 前後記事ナビゲーション --- */
.s-article-02__post-nav {
  margin-top: var(--space-6-xl);
  padding-top: var(--space-4-xl);
  border-top: 1px solid var(--color-border);
}

.s-article-02__post-nav-inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2-xl);
  flex-wrap: wrap;
}

.s-article-02__post-nav-link {
  flex: 1;
  min-width: 20rem;
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--transition-normal), background var(--transition-normal);
}

.s-article-02__post-nav-link:hover {
  border-color: var(--color-accent);
  background: var(--color-primary-light);
}

.s-article-02__post-nav-link--next {
  text-align: right;
}

.s-article-02__post-nav-label {
  font-size: var(--font-size-3-xs);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: var(--space-4-xs);
  margin-bottom: var(--space-4-xs);
}

.s-article-02__post-nav-label--next {
  justify-content: flex-end;
}

.s-article-02__post-nav-icon {
  font-size: var(--font-size-sm);
}

.s-article-02__post-nav-title {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

/* concern: MV（s-hero-03）直下の本文先頭セクション（alignfull ナビ等）は密着させ、
   MV とページ内ナビの間の白余白を消す */
.single-concern .s-base-02 .entry-content > :first-child {
  margin-block-start: 0 !important;
}

/* ── 電話は美容診療・保険診療の2系統。番号ごとに区分ラベルを添えて縦に並べる ── */
.s-layout-04__tel-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3-xs);
}

.s-layout-04__tel-item {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-4-xs);
}

.s-layout-04__tel-label {
  font-size: var(--font-size-xs);
  opacity: 0.85;
}