/**
 * Unified content rail (DADS ~1024px)
 * 見出し・カード・CTA・フッターで左右端を揃える。はみ出し防止込み。
 */

:root {
  --cl-grid-max: 64rem;
  --cl-grid-gap: 1.5rem;
  --cl-grid-pad: 1rem;
}

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

/* トップレベルブロック間の白い隙間（CTA↔フッターなど）をなくす */
.wp-site-blocks {
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  overflow-x: clip;
  max-width: 100%;
}

.wp-site-blocks > *,
.wp-site-blocks > * + * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: 100%;
}

.cl-main {
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* トップ／B型のみ上下密着（記事・固定ページの padding は残す） */
.cl-main--flush {
  padding-block: 0 !important;
  margin-block: 0 !important;
}

/* メニュー直下ヒーロー密着 */
.cl-main--flush > .cl-hero:first-child,
.cl-main--flush > section.cl-hero:first-child,
.cl-main--flush > .wp-block-group.cl-hero:first-child {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

.wp-site-blocks > header,
.wp-site-blocks > .cl-site-header,
.wp-site-blocks > .wp-block-template-part {
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}

.wp-site-blocks > header + *,
.wp-site-blocks > .cl-site-header + *,
.wp-site-blocks > .wp-block-template-part + *,
.wp-site-blocks > header + .cl-main,
.wp-site-blocks > .cl-site-header + .cl-main,
.wp-site-blocks > .wp-block-template-part + main,
.wp-site-blocks > .wp-block-template-part + .wp-block-group.cl-main {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

.wp-site-blocks > header + .cl-main--flush,
.wp-site-blocks > .cl-site-header + .cl-main--flush,
.wp-site-blocks > .wp-block-template-part + .cl-main--flush,
.wp-site-blocks > .wp-block-template-part + .wp-block-group.cl-main--flush {
  padding-block-start: 0 !important;
  padding-top: 0 !important;
}

/*
 * WP の alignwide / alignfull ブレイクアウトを無効化。
 * トップ／B型のセクション用。記事本文には当てない。
 */
.cl-main--flush .alignwide,
.cl-main--flush .alignfull,
.cl-main--flush .wp-block-group.alignwide,
.cl-main--flush .wp-block-group.alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* —— 共通レール：ヘッダー／フッター —— */
.cl-site-header,
.cl-site-footer {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.cl-site-header__rail,
.cl-site-footer__rail {
  box-sizing: border-box;
  max-width: var(--cl-grid-max);
  width: 100%;
  margin-inline: auto;
}

.cl-site-header > .alignwide,
.cl-site-footer > .alignwide,
.cl-site-footer > .cl-site-footer__copy {
  box-sizing: border-box;
  max-width: var(--cl-grid-max);
  width: 100%;
  margin-inline: auto;
}

/* ブロックパターンのセクション（alignwide）＋ PHP セクション（cl-sec--rail）＋ ヒーロー */
.cl-main > .wp-block-group.cl-section.alignwide,
.cl-main > .cl-sec.cl-sec--rail,
.cl-main > section.cl-sec--rail {
  box-sizing: border-box;
  max-width: var(--cl-grid-max) !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: var(--cl-grid-pad);
  overflow-x: clip;
}

/* フルブリード（背景色あり）：背景は全幅、中身は同じレール */
.cl-main > .wp-block-group.cl-section.alignfull,
.cl-main > .wp-block-group.cl-hero.alignfull,
.cl-main > .cl-sec.cl-sec--bleed,
.cl-main > section.cl-sec--bleed,
.cl-main > .cl-hero,
.cl-main > section.cl-hero {
  box-sizing: border-box;
  max-width: 100% !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: var(--cl-grid-pad);
  overflow-x: clip;
}

/*
 * 全幅ではない × 背景あり：コンテンツより少し広い角丸パネル＋左右余白。
 * 全幅（bleed）の背景はそのまま端まで伸ばす。
 */
.cl-main > .cl-sec.cl-sec--rail:is(.cl-sec-bg--soft, .cl-sec-bg--subtle, .cl-sec-bg--custom),
.cl-main > section.cl-sec--rail:is(.cl-sec-bg--soft, .cl-sec-bg--subtle, .cl-sec-bg--custom) {
  --cl-sec-band-gutter: clamp(0.75rem, 2.5vw, 1.5rem);
  --cl-sec-band-overhang: clamp(1rem, 3vw, 2.5rem);
  --cl-sec-band-pad-x: clamp(1.5rem, 4vw, 2.75rem);
  max-width: min(
    calc(100% - (var(--cl-sec-band-gutter) * 2)),
    calc(var(--cl-grid-max, 64rem) + var(--cl-sec-band-overhang))
  ) !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: var(--cl-sec-band-pad-x) !important;
  border-radius: clamp(1rem, 2.2vw, 1.75rem);
  overflow-x: clip;
}

/* 全面写真は端までブリード（余白は inner 側） */
.cl-main > .cl-hero.cl-hero--cover,
.cl-main > section.cl-hero.cl-hero--cover,
.cl-main > .cl-hero.cl-hero--cover-base,
.cl-main > section.cl-hero.cl-hero--cover-base {
  padding-inline: 0;
}

.cl-main .cl-section.alignfull > .alignwide,
.cl-main .cl-sec--bleed > .cl-sec__inner,
.cl-main .cl-hero .cl-hero__grid,
.cl-main .cl-hero .cl-hero__inner {
  box-sizing: border-box;
  max-width: var(--cl-grid-max);
  width: 100%;
  margin-inline: auto;
  min-width: 0;
}

/* CTA はコンテンツ幅レール（カード型パネル） */
.cl-main > .wp-block-group.cl-cta.alignwide,
.cl-main > .wp-block-group.cl-cta {
  box-sizing: border-box;
  max-width: var(--cl-grid-max) !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: var(--cl-grid-pad);
  overflow-x: clip;
  background: transparent;
}

/*
 * constrained レイアウトの contentSize(45rem) を無効化し、
 * セクション内の見出し・本文・カードを同じ幅に揃える。
 */
.cl-main .cl-section.is-layout-constrained > :where(:not(.alignfull)),
.cl-main .cl-section .alignwide.is-layout-constrained > :where(:not(.alignfull)),
.cl-main .cl-sec .alignwide.is-layout-constrained > :where(:not(.alignfull)),
.cl-main .cl-hero.is-layout-constrained > :where(:not(.alignfull)),
.cl-site-header.is-layout-constrained > :where(:not(.alignfull)),
.cl-site-footer.is-layout-constrained > :where(:not(.alignfull)) {
  max-width: 100% !important;
}

/* カード／カルーセル／グリッドは親レールいっぱいに（二重センタリングしない） */
.cl-grid,
.cl-carousel,
.cl-dads-card-list,
.cl-icon-grid {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  min-width: 0;
}

.cl-icon-grid--stack {
  max-width: 100%;
}

/* Equal-width card grid (3 → 2 → 1) */
.cl-dads-card-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  align-items: stretch;
  flex-wrap: unset;
}

.cl-dads-card-list > li {
  display: flex;
  min-width: 0;
  flex: unset;
  max-width: none;
  width: 100%;
  /* 影が隣カードに食い込まないよう余裕を確保 */
  padding: 2px;
}

.cl-dads-card-list .cl-dads-card {
  max-width: none;
  width: 100%;
  height: 100%;
}

@media (max-width: 64rem) {
  .cl-dads-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .cl-dads-card-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
   * スタッフ紹介（SP）: 1列グリッドだと次カードが分からないので
   * 横スクロール＋次カード peek にする（carousel 設定時も同様の peek）。
   */
  .cl-sec--staff .cl-dads-card-list {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 0.85rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-block: 0.35rem 0.5rem;
    padding-inline: 0.35rem;
    margin-inline: -0.35rem;
    width: auto;
    max-width: none;
  }

  .cl-sec--staff .cl-dads-card-list > li {
    flex: 0 0 calc(100% - 2.75rem);
    width: calc(100% - 2.75rem);
    max-width: calc(100% - 2.75rem);
    scroll-snap-align: start;
    padding: 0.35rem;
    box-sizing: border-box;
  }

  .cl-carousel__track > li {
    flex: 0 0 calc(100% - 2.75rem);
    max-width: calc(100% - 2.75rem);
  }

  .cl-sec--staff .cl-carousel__viewport {
    margin-inline: -0.35rem;
  }

  .cl-sec--staff .cl-carousel__track {
    gap: 0.85rem;
    padding-inline: 0.35rem;
    scroll-padding-inline: 0.35rem;
  }
}

/* Carousel slides share the same column math */
.cl-carousel__track {
  align-items: stretch;
  gap: var(--cl-grid-gap, 1.5rem);
}

.cl-carousel__track > li {
  flex: 0 0 calc((100% - (var(--cl-carousel-gap, 0.85rem) * (var(--cl-carousel-visible, 5) - 1))) / var(--cl-carousel-visible, 5));
  max-width: calc((100% - (var(--cl-carousel-gap, 0.85rem) * (var(--cl-carousel-visible, 5) - 1))) / var(--cl-carousel-visible, 5));
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: stretch;
}

.cl-carousel__track > li > * {
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

@media (max-width: 64rem) {
  .cl-carousel__track > li {
    flex: 0 0 calc((100% - (var(--cl-carousel-gap, 0.85rem) * (min(var(--cl-carousel-visible, 5), 3) - 1))) / min(var(--cl-carousel-visible, 5), 3));
    max-width: calc((100% - (var(--cl-carousel-gap, 0.85rem) * (min(var(--cl-carousel-visible, 5), 3) - 1))) / min(var(--cl-carousel-visible, 5), 3));
  }
}

@media (max-width: 40rem) {
  .cl-carousel__track > li {
    flex: 0 0 calc(100% - 2.75rem);
    max-width: calc(100% - 2.75rem);
  }
}

.cl-carousel__track > li > .cl-dads-card {
  max-width: none;
  width: 100%;
  height: 100%;
}

/* Hero / CTA grids */
.cl-hero__grid,
.cl-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  width: 100%;
  max-width: var(--cl-grid-max);
  margin-inline: auto;
  min-width: 0;
}

.cl-hero--split-reverse .cl-hero__grid,
.cl-hero--split-reverse .cl-hero__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}

.cl-hero--split-reverse .cl-hero__media {
  order: -1;
}

.cl-hero--stack .cl-hero__grid,
.cl-hero--stack .cl-hero__inner,
.cl-hero--text .cl-hero__grid,
.cl-hero--text .cl-hero__inner,
.cl-hero--cover-base .cl-hero__grid,
.cl-hero--cover-base .cl-hero__inner,
.cl-hero--cover .cl-hero__grid,
.cl-hero--cover .cl-hero__inner {
  grid-template-columns: minmax(0, 1fr);
}

.cl-hero--stack .cl-hero__media {
  order: -1;
  max-width: 36rem;
  margin-inline: auto;
}

.cl-hero--text .cl-hero__copy,
.cl-hero--cover-base .cl-hero__copy,
.cl-hero--cover .cl-hero__copy {
  max-width: 40rem;
}

.cl-hero__copy {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cl-hero__copy .wp-block-heading,
.cl-hero__copy p,
.cl-hero__title,
.cl-hero__lead {
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
}

.cl-cta__grid {
  display: contents;
}

@media (max-width: 48rem) {
  .cl-hero__grid,
  .cl-hero__inner,
  .cl-hero--split-reverse .cl-hero__grid,
  .cl-hero--split-reverse .cl-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .cl-hero--split .cl-hero__media,
  .cl-hero--split-reverse .cl-hero__media {
    order: -1;
  }
}

/* カレンダーが親レールを突き破らないように */
.cl-sec .clovers-calendar-section,
.cl-sec .clovers-hours-section,
.cl-main .clovers-calendar-section,
.cl-main .clovers-hours-section {
  max-width: 100% !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  box-sizing: border-box;
}

.cl-sec .clovers-calendar-section--week-board,
.cl-sec .ol-content-frame.clovers-calendar-section--week-board {
  max-width: 100% !important;
  width: 100% !important;
  padding-inline: 0 !important;
}

.cl-sec .clovers-wk__board,
.cl-sec .clovers-wk__strip,
.cl-sec .clovers-hours-section,
.cl-sec .clovers-hours-strip,
.cl-sec .clovers-hours-grid {
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.cl-sec .clovers-wk__strip {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cl-main > .cl-sec.cl-sec--schedule,
.cl-main > .cl-sec.cl-sec--corp_schedule {
  overflow-x: clip;
}

/* 記事・固定ページ本文：読み幅に揃え、画像もはみ出させない */
.cl-main--article .entry-content.is-layout-constrained > :where(:not(.alignwide):not(.alignfull)),
.cl-main--article > .wp-block-post-content.is-layout-constrained > :where(:not(.alignwide):not(.alignfull)),
.cl-main--article .wp-block-post-content > :where(:not(.alignwide):not(.alignfull):not(.wp-block-group)) {
  max-width: var(--wp--style--global--content-size, 45rem) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

.cl-main--article .wp-block-post-content .alignwide,
.cl-main--article .wp-block-post-content .alignfull,
.cl-main--article .wp-block-post-content .wp-block-image {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

.cl-main--article .wp-block-post-content img,
.cl-main--article .wp-block-post-content figure,
.cl-main--article .wp-block-post-content .wp-block-image img {
  max-width: 100%;
  height: auto;
}

.cl-main--wide .wp-block-post-content > * {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}