/* ================================================
   MV
================================================ */
.p-mv {
  position: relative;
  width: 100%;
  height: 67svh;
  min-height: 0;
  overflow: hidden;
  margin-block-start: var(--header-h);
}

@media screen and (min-width: 769px) {
  .p-mv {
    margin-block-start: 0;
    height: 44.375rem;
    min-height: 0;
  }
}

/* スライドトラック：左端基準で横並び、右は自由に伸びる */
.p-mv__slides {
  position: absolute;
  inset-block: 0;
  left: 0;
  display: flex;
  align-items: stretch;
  will-change: transform;
  /* 連続マーキー用：1セット(3枚)分ちょうどの移動距離。
     SP: gapが無いため 100vw×3 = 300vw で正確に一致する。
     PC側は @media 内で gap(8px)を含めた値に上書き（下記コメント参照）。 */
  --mv-marquee-shift: -300vw;
}

/* SP: 全幅 / PC: 800px固定 */
.p-mv__slide {
  flex: 0 0 100vw;
  position: relative;
  overflow: hidden;
}

@media screen and (min-width: 769px) {
  .p-mv__slides {
    gap: 8px;
    /* PCの1セット分移動距離：(スライド幅50rem + gap8px) × 3枚。
       トラック全幅の1/3(percentage)だと、gapは枚数間(8箇所)にしか入らず
       枚数(9枚)では割り切れないため、1/3移動が実際の1セット分とわずかに
       ズレて折り返し位置で継ぎ目が出る。枚数×(幅+gap)の実距離を使うことで
       誤差なく継ぎ目なしにする。 */
    --mv-marquee-shift: calc((50rem + 8px) * -3);
  }

  .p-mv__slide {
    flex: 0 0 50rem;
    width: 50rem;
  }
}

.p-mv__slide picture {
  display: block;
  height: 100%;
}

.p-mv__slide picture,
.p-mv__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* スマホのみ：画像1枚ずつに左右余白・自然な間隔・角丸を付与（PC未実装のため今回新規追加）。
   .p-mv__slide自体の幅(flex:0 0 100vw)は変えず、内側にpadding-inlineで余白を作る方式。
   flexのgapで間隔を作ると、ループ用 --mv-marquee-shift:-300vw（100vw×3枚ちょうどの
   移動距離）の計算が崩れて折り返し位置に継ぎ目が出るため、gapではなくpaddingを使用
   （box-sizing:border-boxのためpaddingを付けてもflex-basis:100vw自体は変わらず、
   マーキーの移動距離計算に影響しない）。 */
@media screen and (max-width: 768px) {
  .p-mv__slide {
    padding-inline: 4px; /* 画像同士の間隔は左右4px+4px=計8px、外側(画面端)は4px */
  }

  .p-mv__slide picture,
  .p-mv__slide img {
    border-radius: 28px;
  }
}

.p-mv__catch {
  position: absolute;
  inset-inline-start: clamp(1.25rem, .98rem + 1.33vw, 2.3125rem);
  inset-block-end: clamp(5rem, 4rem + 5vw, 9rem);
  z-index: 10;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .p-mv__catch {
    inset-block-end: 1.5rem;
  }
}

/* PC のみ：英語テキスト下端が画面下から約50pxになる位置まで下げる */
@media screen and (min-width: 769px) {
  .p-mv__catch {
    inset-block-end: 3.125rem; /* 50px */
  }
}

.p-mv__ttl {
  margin-block: 0;
}

.p-mv__ttl-ja {
  display: block;
  font-size: var(--fs-46);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.5;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}

.p-mv__ttl-en {
  display: block;
  font-size: var(--fs-18);
  letter-spacing: .05em;
  margin-block-start: .75em;
  opacity: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}

/* PC のみ：文字サイズを拡大（SP は元のサイズを維持） */
@media screen and (min-width: 769px) {
  .p-mv__ttl-ja {
    font-size: clamp(2.5rem, 2rem + 2.25vw, 4.375rem); /* --fs-46 clamp(1.6875rem,1.39rem+1.48vw,2.875rem) を約1.5倍に拡大 */
  }

  .p-mv__ttl-en {
    font-size: clamp(1.125rem, 1.03rem + 0.4vw, 1.4375rem); /* --fs-18 clamp(0.875rem,0.81rem+0.31vw,1.125rem) を約1.3倍に拡大 */
  }
}

.p-mv__scroll {
  margin-block: 0.9375rem 0;
  width: 100%;
  overflow: hidden;
  font-family: "Quicksand", sans-serif;
  font-size: 6.25rem;
  font-weight: 600;
  line-height: 1;
  color: #E4E9F0;
  opacity: .5;
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: -.03em;
}

@media screen and (min-width: 769px) {
  .p-mv__scroll {
    font-size: 10rem;
    margin-block-start: 1.5625rem; /* 0.9375rem(15px) + 10px = 25px、MVとの間隔を10px拡大 */
    margin-block-end: -10px; /* 見出しとの間隔をその分近づける */
  }
}


/* ================================================
   About
================================================ */
.p-about {
  padding-block: clamp(5rem, 4rem + 5vw, 9rem);
  position: relative;
}

.p-about .b-inner {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
}

.p-about__body {
  flex: 1 1 0;
  min-width: 0;
}

/* 写真＋ドット円エリア */
.p-about__media {
  position: relative;
  flex: 0 0 clamp(18.75rem, 48vw, 37.5rem);
  aspect-ratio: 1;
}

/* いびつ円モーフィング */
@keyframes morph-circle {
  0%   { border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; }
  25%  { border-radius: 50% 50% 42% 58% / 58% 42% 58% 42%; }
  50%  { border-radius: 42% 58% 62% 38% / 38% 62% 48% 52%; }
  75%  { border-radius: 55% 45% 48% 52% / 52% 48% 62% 38%; }
  100% { border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%; }
}

.p-about__photo {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
  animation: morph-circle 8s ease-in-out infinite;
}

.p-about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ふわふわ浮くドット円 */
@keyframes float-a {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  50%       { transform: translateY(-12px) rotate(4deg); }
}
@keyframes float-b {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%       { transform: translateY(-8px) rotate(-3deg); }
}
@keyframes float-c {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  50%       { transform: translateY(-15px) rotate(5deg); }
}

.p-about__dot {
  position: absolute;
  display: block;
  z-index: 2;
}

.p-about__dot.--d1 {
  width: 17%;
  top: -10%;
  left: calc(50% - 8.5%);
  animation: float-a 5s ease-in-out infinite;
}

.p-about__dot.--d2 {
  width: 13%;
  bottom: 26%;
  left: -7%;
  animation: float-b 6.5s ease-in-out infinite;
}

.p-about__dot.--d3 {
  width: 26%;
  bottom: 6%;
  right: 2%;
  animation: float-c 4.5s ease-in-out infinite;
}

/* SP: 縦積み */
@media screen and (max-width: 768px) {
  .p-about .b-inner {
    flex-direction: column;
  }

  .p-about__media {
    flex: 0 0 auto;
    width: min(300px, 80vw);
    /* 文章末尾と画像の間隔が狭いため、既存gap(b-inner)に加えて上部余白を+50px */
    margin-block-start: 50px;
  }
}

.p-about__lead {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.7;
  color: #1C336F;
  margin-block: 0 1.2em;
}

.p-about__lead em {
  font-style: normal;
  color: #58A9DB;
}

.p-about__sub-lead {
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.8rem);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.8;
  margin-block: 0 1.2em;
}

/* PC のみ：コピー文字サイズを少しだけ拡大（SP は下部の専用ルールのまま） */
@media screen and (min-width: 769px) {
  .p-about__lead {
    font-size: clamp(1.6875rem, 1.4rem + 1.6vw, 2.8125rem); /* さらに1px(0.0625rem)アップ */
  }

  .p-about__sub-lead {
    font-size: clamp(1.3275rem, 1.0975rem + 0.92vw, 2.1325rem); /* 1px(0.0625rem)ダウン */
  }

  /* 文字拡大で「安心と挑戦が続く未来をつくる。」が折り返さないよう
     セクション幅を+100pxし、右側のふわふわ画像を右へ逃がす */
  .p-about .b-inner {
    max-width: calc(68.75rem + 100px);
  }

  /* 右側のふわふわ画像を約7%縮小（コンテナ自体のサイズ調整）
     周囲の点線ドットは%指定で親要素に追従するため自動でバランス調整される */
  .p-about__media {
    flex-basis: clamp(17.4375rem, 44.6vw, 34.875rem);
    transform: translateY(50px); /* 画像・点線ドットをまとめて下へ50px */
  }
}

/* SP: フォント縮小（ベースルールの後に記述） */
@media screen and (max-width: 768px) {
  .p-about__lead {
    font-size: 5.8vw;
    letter-spacing: 0;
  }

  .p-about__sub-lead {
    font-size: 4.8vw;
    letter-spacing: 0;
  }
}

.p-about__txt {
  font-size: var(--fs-16);
  letter-spacing: .05em;
  line-height: 2;
  color: var(--cl-222222);
  margin-block: 0;
  font-weight: 500;
}

.p-about__fig {
  margin: 0;
  border-radius: 1rem;
  overflow: hidden;
}

.p-about__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* c-ttl__dots は customize.css に移動 */

/* About intro（背景ズーム＋ぼかし） */
.p-about-intro {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 4rem + 5vw, 9rem);
}

/* スマホのみ：見出し上部・本文下部と背景（.p-about-intro__bg）上下端との余白を
   もう少し広げる。左右paddingは.b-inner側のため無関係・無変更。固定heightではなく
   padding-blockを底上げする形にし、背景（inset:-8%の絶対配置）はセクション自身の
   高さに追従して自然に伸びる。 */
@media screen and (max-width: 768px) {
  .p-about-intro {
    padding-block: calc(clamp(5rem, 4rem + 5vw, 9rem) + 30px);
  }
}

.p-about-intro__bg {
  position: absolute;
  inset: -8%;
  z-index: 0;
  will-change: transform;
}

.p-about-intro__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* blur はスクロール進行度に応じて customize.js(initAboutZoom) が
     インラインstyleで0px〜14px(旧固定値)を制御する。初期状態(進行度0)は0px。 */
}

/* オーバーレイ背景は「進行度1(終了時)」の見た目として維持し、
   opacity（0〜1）をスクロール進行度に連動させる（customize.js の
   initAboutZoom が背景画像のblur/scaleと同じ progress で
   インラインstyle指定。進行度0＝完全非表示、進行度1＝下記背景そのまま）。 */
.p-about-intro__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.75) 0%,
      rgba(255,255,255,.15) 25%,
      rgba(255,255,255,.15) 75%,
      rgba(255,255,255,.75) 100%);
}

.p-about-intro .b-inner {
  position: relative;
  z-index: 2;
}

.p-about-intro .p-about__head {
  text-align: center;
}

.p-about-intro .c-ttl,
.p-about-intro .c-ttl__dots {
  text-align: center;
  align-items: center;
  justify-content: center;
}

/* .p-about-intro .c-ttl__ja の color は共通 .c-ttl__ja (var(--font-color)) と同値のため削除 */

.p-about-intro .c-ttl__dots {
  margin-block-start: 1.5em;
}

/* About intro View more ボタン（センター・幅のみ） */
.p-about-intro .c-btn {
  /* デザイン(サイズ・padding・丸・矢印・hover)は共通 .c-btn に統一。ここは位置(センタリング)のみ */
  margin-inline: auto;
}

/* ================================================
   About intro — PC のみ微調整
================================================ */
@media screen and (min-width: 769px) {
  /* 【1】背景の高さ +80px ＋ 【3】見出しを一番上から +25px 下げる
     padding-top +25px, padding-bottom +55px → セクション総高は合計 +80px。
     背景（inset:-8% の絶対配置）はセクションに追従して高くなる。 */
  .p-about-intro {
    padding-block:
      calc(clamp(5rem, 4rem + 5vw, 9rem) + 25px)
      calc(clamp(5rem, 4rem + 5vw, 9rem) + 55px);
  }

  /* 【2】は削除：背景画像下部の mask-image によるフェードアウトと、
     それに合わせたオーバーレイの下部全白化が「画像下半分だけに残る
     ぼかし/フェード」として視認されていたため撤去。PC も基本の
     .p-about-intro__overlay（対称なグラデーション）にそのまま従う。 */

  /* 【4】3つの丸：10px下 ＋ 丸同士の間隔を各10px広げる（About内のみ） */
  .p-about-intro .c-ttl__dots {
    /* 丸間隔は共通 .c-ttl__dots(0.7rem) に統一。ここは位置のみ */
    transform: translateY(10px);
  }

  /* 「社会を変える、障がい福祉サービス」：32px・太字（About内のみ / 他は現状維持）
     3つの丸との間隔を29px詰める：元の margin-block-start 3.5em(=3.5×32px=112px) から -29px。
     見出しのフォントサイズ・スタイルは不変、丸↔見出しの上余白のみ調整。 */
  .p-about-intro .p-about__sub {
    font-size: 32px;
    font-weight: 700;
    margin-block-start: calc(3.5em - 29px);
  }

  /* 「バスターを知る」（c-ttl__ja）
     ① About との間隔を4px詰める：元の 1.2em(=1.2×--fs-20) から -4px。
        font-size 変更の影響を受けないよう --fs-20 を明示参照し「現在-4px」を厳密化。
     ② フォントサイズ：現在 var(--fs-20)（PC実効 約16.8〜20px＝16px超）→ 16px へ。
        weight・color・letter-spacing・line-height は変更しない。 */
  .p-about-intro .c-ttl__ja {
    margin-block-start: calc(var(--fs-20) * 1.2 - 4px);
    font-size: 16px;
  }
}

.c-sec-lead {
  font-size: clamp(1.25rem, 1rem + 1.25vw, 2rem);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.6;
  margin-block: 3.5em .75em;
  color: #1C336F;
}

/* .p-about__sub 単体のルールは削除済み：HTML側は `p-about__sub c-sec-lead` の
   2クラス付与済みで、font-size以外の全プロパティ（font-weight/letter-spacing/
   line-height/margin-block/color）が .c-sec-lead と完全に重複していた。
   このルールの font-size:var(--fs-24) だけが .c-sec-lead の font-size を
   後勝ちで上書きしており、SPでWelfare（.c-sec-lead基準）よりAboutが小さく
   表示されていた原因だったため、重複ルールごと削除して .c-sec-lead に一本化。
   PC限定の .p-about-intro .p-about__sub（32px・bold、769px〜）は
   クラス名で参照しているため、このルール削除後も引き続き有効。 */

.p-about__sub-txt {
  font-size: var(--fs-16);
  letter-spacing: .05em;
  line-height: 2;
  margin-block: 0 3.75em;
  color: #1D1D1D;
  font-weight: 500;
}


/* ================================================
   Two Pillars
================================================ */
/* c-ttl --inline は customize.css に移動 */
.p-pillars {
  padding-block: clamp(5rem, 4rem + 5vw, 9rem);
  background: var(--cl-F9FAFC);
}

.p-pillars__wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 2rem + 2.5vw, 5rem);
}

@media screen and (min-width: 769px) {
  .p-pillars__wrap {
    /* 右カラムを65px縮小 → 左カラム(1fr)が+65pxされ見出しが1行に収まる。
       右側SVG図形も width:100%/height:auto で縦横比を保ったまま約65px縮小。 */
    grid-template-columns: 1fr minmax(0, calc(37.3125rem - 65px));
    align-items: center;
  }
}

.p-pillars__body .c-ttl__dots {
  margin-block-start: 1.5em;
}

/* PC のみ：Two Pillars セクション微調整 */
@media screen and (min-width: 769px) {
  /* ① 見出しブロックの上マージン（＝セクション上パディング）を60px詰める */
  .p-pillars {
    padding-block-start: calc(clamp(5rem, 4rem + 5vw, 9rem) - 60px);
  }

  /* ② 見出し EN/JA を横並びに（guidelines の Recruitment と同じ並び）。
     左カラム幅では wrap で縦積みになるため nowrap で1行に固定。
     フォント・カラー・サイズ・ドット位置(1.5em下)は既存のまま流用。 */
  .p-pillars__body .c-ttl.--inline {
    flex-wrap: nowrap;
  }

  /* 左側コンテンツ一式（見出し・丸・本文・View more）をグループごと 左65px・下10px 移動。
     transform なのでリフローせず、グループ内の余白・レイアウトは不変。 */
  .p-pillars__body {
    transform: translate(-65px, 10px);
  }
}

/* SPのみ：View moreボタンをTwo Pillarsだけ左寄せに。
   サイト共通ルール（customize.css .c-btn:not(--entry):not(--line):not(--outline){
   margin-inline:auto}）がSPで全ページのView moreボタンを中央寄せにしているが、
   このセクションだけ左寄せへ変更するため、同じ:not()チェーンでスコープを
   Two Pillarsに絞って上書き（詳細度を合わせるため同じセレクタ構成を使用）。
   width/max-width/padding等は一切変更せずmargin-inlineのみ上書きするため、
   ボタンのサイズ・文字・アイコン・縦位置は無変更。他セクションのView moreは
   引き続き中央寄せのまま。 */
@media screen and (max-width: 768px) {
  .p-pillars__body .c-btn:not(.--entry):not(.--line):not(.--outline) {
    margin-inline: 0;
  }
}


.p-pillars__txt {
  font-size: var(--fs-16);
  letter-spacing: .05em;
  line-height: 2;
  font-weight: 500;
  margin-block: 3.5em 3.75em;
}

.p-pillars__fig {
  margin: 0;
  order: -1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media screen and (min-width: 769px) {
  .p-pillars__fig {
    order: 0;
    /* 右側コンテンツ一式（図形＋SST/音楽療育/学習支援＋説明文）をグループごと移動。
       X: 中心維持の -32px に、さらに左12px を加算して -44px
       Y: 下へ 60px */
    transform: translate(-44px, 60px);
  }
}

/* SST 上部ラベル */
.p-pillars__ext-top {
  display: flex;
  align-items: center;
  gap: .75em;
  padding-inline-start: 36%;
}

/* SPのみ：SSTアイコンの中心を、下の大きな丸3つの画像の横位置中央に揃える。
   ::before をスペーサーにした 3カラムグリッド(1fr auto 1fr) にすることで、
   バッジ幅に依存せず「バッジ中心 = コンテナ中心 = 画像中心」に厳密一致させる。
   説明文は残りの 1fr 列に入り自動的に狭くなるため、<br>による3行を維持できるようフォントを微調整。 */
@media screen and (max-width: 768px) {
  .p-pillars__ext-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    padding-inline-start: 0;
  }

  .p-pillars__ext-top::before {
    content: '';
  }

  /* SSTの説明文のみ（音楽療育・学習支援は対象外） */
  .p-pillars__ext-top .p-pillars__ext-txt {
    font-size: .58rem;
    letter-spacing: -0.02em;
  }
}

/* SVG ラッパー（内部テキスト重ね） */
.p-pillars__svg-wrap {
  position: relative;
}

.p-pillars__svg-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* 円内テキスト（絶対配置） */
.p-pillars__inner {
  position: absolute;
  text-align: center;
  color: #1C336F;
  line-height: 1.5;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.p-pillars__inner p {
  margin: 0;
  font-weight: 500;
  font-size: clamp(.6rem, .4rem + 1vw, .8125rem);
}

.p-pillars__inner.--sst   { left: 51%;  top: 34%; }
.p-pillars__inner.--music { left: 27%;  top: 79%; }
.p-pillars__inner.--ict   { left: 74%;  top: 79%; }

.p-pillars__inner.--music p {
  font-size: clamp(.65rem, .45rem + 1.1vw, .875rem);
}

.p-pillars__inner.--ict p {
  font-size: clamp(.6rem, .4rem + .95vw, .8rem);
}

.p-pillars__inner.--center {
  left: 52%;
  top: 60%;
}

.p-pillars__inner.--center p {
  font-weight: 700;
  font-size: clamp(1.125rem, .75rem + 1.8vw, 1.5rem);
}

/* SP のみ「ソーシャルスキル↵トレーニング」に折り返す */
.p-pillars__sp-br {
  display: none;
}

@media screen and (max-width: 768px) {
  .p-pillars__sp-br {
    display: block;
  }
}

/* 外部バッジ */
.p-pillars__badge {
  display: inline-flex;
  align-items: center;
  padding: .35em 1em;
  border-radius: 9999px;
  font-size: clamp(.75rem, .6rem + .6vw, .875rem);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.p-pillars__badge.--sst      { background: #82BEDF; }
.p-pillars__badge.--music    { background: #7F8DD4; }
.p-pillars__badge.--learning { background: #79CFD3; }

/* PC のみ：3つのカラーカードを一回り大きく（約12%）。
   padding が .35em 1em の em 基準なので、font-size 拡大でカード全体（幅・高さ・文字）が同比率で拡大。
   3種(--sst/--music/--learning)共通・位置関係は flex レイアウトのまま維持。 */
@media screen and (min-width: 769px) {
  .p-pillars__badge {
    font-size: clamp(.84rem, .672rem + .672vw, .98rem);
    font-weight: 400; /* ① 太字→標準（サイズ・色・配置は不変） */
  }

  /* ② SSTカード全体（バッジ＋右の説明文）を右50px・下15px移動。内部レイアウトは不変 */
  .p-pillars__ext-top {
    transform: translate(50px, 15px);
  }

  /* ①(下部) 音楽療育カード一式（バッジ＋説明文）を右10px・上26px移動 */
  .p-pillars__ext-bottom .p-pillars__ext-item:nth-child(1) {
    transform: translate(10px, -26px);
  }

  /* ②(下部) 学習支援カード一式（バッジ＋説明文）を右40px・上26px移動 */
  .p-pillars__ext-bottom .p-pillars__ext-item:nth-child(2) {
    transform: translate(40px, -26px);
  }
}

/* 外部サブテキスト */
.p-pillars__ext-txt {
  font-size: clamp(.75rem, .6rem + .6vw, .875rem);
  line-height: 1.8;
  margin: 0;
}

@media screen and (max-width: 768px) {
  .p-pillars__ext-txt {
    font-size: .65rem;
  }

  .p-pillars__pc-br {
    display: none;
  }

  /* SP のみフォントサイズ縮小 */
  .p-pillars__inner.--center p {
    font-size: .9rem;
  }

  .p-pillars__inner.--ict p {
    font-size: .5rem;
  }

  .p-pillars__ext-item:last-child .p-pillars__ext-txt {
    font-size: .57rem;
  }
}

/* 下部ラベル（音楽療育・学習支援） */
.p-pillars__ext-bottom {
  display: flex;
  gap: 1rem;
}

.p-pillars__ext-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5em;
}

@media screen and (min-width: 769px) {
  .p-pillars__ext-bottom {
    justify-content: space-between;
    margin-inline: -4rem;
  }

  .p-pillars__ext-item {
    flex: none;
  }
}

/* PC/SP共通：マーキースクロール（JS側で常に .p-pillars__set 2セットへ複製済み）。
   幅・高さのみPC/SPそれぞれの@media内で指定し、構造・アニメーションは共通化する。 */
.p-pillars__imgs {
  display: flex;
  overflow: hidden;
  gap: 0;
  margin-block: 0;
}

.p-pillars__set {
  display: flex;
  gap: 10px;
  padding-inline-end: 10px;
  flex-shrink: 0;
  animation: pillars-scroll 8s linear infinite;
}

.p-pillars__set .c-pic {
  display: block;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}

.p-pillars__set img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes pillars-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* PC：幅は従来のgrid(3等分・gap10px)と同じ計算式を維持、高さも従来通り+60px */
@media screen and (min-width: 769px) {
  .p-pillars__set .c-pic {
    width: calc((100vw - 20px) / 3);
    height: calc(clamp(10rem, 8rem + 10vw, 21.25rem) + 60px);
  }
}

/* SP：既存のマーキー用サイズ（変更なし） */
@media screen and (max-width: 768px) {
  .p-pillars__set .c-pic {
    width: 72vw;
    height: 52vw;
  }
}


/* ================================================
   Numbers
================================================ */
.p-numbers {
  padding-block: clamp(5rem, 4rem + 5vw, 9rem);
  /* 見出しブロックを25px下げる（上paddingのみ +25px。下paddingは据え置き） */
  padding-block-start: calc(clamp(5rem, 4rem + 5vw, 9rem) + 25px);
  background: #F9F9F9;
}

/* 背景固定パララックス。PC・スマホとも同一方式（background-attachment:fixed）。
   従来は<img width:100%/height:auto>で高さを画像の実寸比率任せにしていたが、
   background-attachment:fixedはbackground-image専用のプロパティで<img>には
   適用できないため、background-imageへ変更（URLはHTML側でasset()ヘルパーに
   より出力、CSSファイル自体はPHP処理されないためパスはここに書けない）。
   高さは img が担っていた「幅に対する画像の実寸比率」を aspect-ratio で
   明示指定して同一の高さ計算を再現。
   ※画像ファイルの実寸は2880×1300（旧<img>のwidth/height属性1600×900は
   実際のファイルと一致しておらず不正確だったため使用しない）。
   background-size:coverはaspect-ratioが画像と同じ比率のため実質contain相当＝
   トリミングは発生しない（比率が完全一致するため）。 */
.p-numbers__bg {
  width: 100%;
  aspect-ratio: 2880 / 1300;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* PC のみ：表示高さを30px低く（従来のimgへのnegative marginをdiv自身へ移設。
   次セクション.p-numbers（不透明背景 #F9F9F9）が重なって下端30pxを隠す、
   という視覚的な仕組みは従来のoverflow:hiddenクリップと同一の見た目になる）。 */
@media screen and (min-width: 769px) {
  .p-numbers__bg {
    margin-block-end: -30px;
  }
}

/* スマホのみ：iOS Safariはbackground-attachment:fixedを付けたまま
   background-sizeを解決すると背景画像が巨大化して見える既知の不具合があるため、
   参考実装（campingcar-rental-kyoto.com の .parallaxContainer/.kvFixedWrap、
   ローカルソース X:\株式会社ギャザーリンク\campingcar-rental-kyoto.com\
   _common_new\css\home\sp_responsive.css を直接確認）と同じ手法に切り替える。
   実際に画面へ固定表示されるのは疑似要素(::before)のposition:fixedレイヤーとし、
   div自身のbackground-attachmentはscrollへ戻す（安全なフォールバックとして
   残すが、::before側が手前に描画されるため通常は不可視）。
   ::before の background-image は div 本体のインラインstyleで設定された値を
   inheritキーワードで明示継承する（background-imageは本来非継承プロパティだが、
   inheritを指定すると親要素の計算値を強制的に継承できるため、HTML側の
   asset()記述を変更せずに同じ画像URLを疑似要素へ渡せる）。
   .p-numbers__bg に clip-path:inset(0) を指定する。参考サイトの
   .kvFixedWrap と同じ指定で、position:fixedの子要素(::before)を
   このボックスの範囲内だけに描画クリップする（overflow:hiddenだけでは
   position:fixed要素はクリップされず、ページ全体に描画されてしまうため、
   clip-pathが必須）。以前z-index:-1で重なり順を制御しようとしたが、実機iOS
   Safariでは効果がなく、ページ最上部から背景が終始表示される不具合が発生した
   ため、参考サイトと同じclip-path方式に変更した。 */
@media screen and (max-width: 768px) {
  .p-numbers__bg {
    background-attachment: scroll;
    clip-path: inset(0);
  }

  .p-numbers__bg::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
  }
}

.p-numbers .c-ttl,
.p-numbers .c-ttl__dots {
  text-align: center;
  align-items: center;
  justify-content: center;
}

/* .p-numbers の .c-ttl__en / .c-ttl__ja の color は
   共通 .c-ttl__en / .c-ttl__ja (var(--font-color)) と同値のため削除 */


.p-numbers__list {
  list-style: none;
  margin-block: clamp(3rem, 2.5rem + 2.5vw, 5rem) 0;
  padding-inline-start: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, .75rem + 1.25vw, 2rem);
}

@media screen and (min-width: 769px) {
  .p-numbers__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.p-numbers__item {
  background: #fff;
  border-radius: .75rem;
  padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem) clamp(1rem, .75rem + 1.25vw, 2rem) clamp(1.25rem, 1rem + 1.25vw, 2.25rem);
  box-shadow: 0 .25rem 1.5rem rgba(0, 128, 204, .08);
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity .6s ease, transform .6s ease;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 10rem;
}

@media screen and (min-width: 769px) {
  .p-numbers__item {
    /* PC はこの min-height がボックス高さを支配しているため、
       padding だけでは高さが変わらない。+22px して高さ増加を成立させる。 */
    min-height: calc(19rem + 22px);
    /* 上 +12px（可変clampはそのまま活かして絶対値を加算）。
       padding-inline はベースのまま＝横幅・左右余白は不変。 */
    padding-block-start: calc(clamp(2rem, 1.5rem + 2.5vw, 3.5rem) + 12px);
    /* 下：ボックス最下部の余白を +1px（-20px → -19px）。
       各ボックスの「中身＋padding」の合計は不変に保たれ、min-height / グリッド行
       ストレッチのどちらが高さを決めていてもボックス高さが厳密に維持される。 */
    padding-block-end: calc(clamp(1.25rem, 1rem + 1.25vw, 2.25rem) - 19px);
  }
}

.p-numbers__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.p-numbers__label {
  font-size: var(--fs-19);
  letter-spacing: .05em;
  color: #1D1D1D;
  font-weight: 700;
  margin-block: 0 .75em;
  position: relative;
  z-index: 1;
}

/* PC：見出し⇔数字の間隔を +9px（.val の margin-top .75em と相殺され、常に label 側が支配） */
@media screen and (min-width: 769px) {
  .p-numbers__label {
    margin-block-end: calc(.75em + 9px);
  }
}

.p-numbers__val {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: .25em;
  margin-block: 0 1.5em;
  line-height: 1;
}

@media screen and (min-width: 769px) {
  .p-numbers__val {
    /* 下マージン +14px（+21px から -7px）＝数字⇔説明文の間隔（.note は margin:0 のため .val 側が支配） */
    margin-block: .75em calc(1em + 14px);
  }

  /* 「男女比率」(--ratio) は .note を持たず行間増加の影響を受けないため、
     下padding +1px 分を下マージン -1px で相殺し、ボックス高さを厳密に維持する */
  .p-numbers__val.--ratio {
    margin-block-end: calc(1em + 20px);
  }
}

.p-numbers__val img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 1.8rem;
  width: 4.8rem;
  height: 4.8rem;
  object-fit: contain;
  opacity: 1;
  z-index: -1;
}

/* PC：アイコン画像のみ 右7px・下14px 移動。
   縦中央寄せの translateY(-50%) を保持したまま合成（絶対配置なのでレイアウトに影響なし）。 */
@media screen and (min-width: 769px) {
  .p-numbers__val img {
    transform: translate(7px, calc(-50% + 14px));
  }
}

@media screen and (max-width: 768px) {
  .p-numbers__val img {
  inset-inline-end: 0.5rem;
    width: 3rem;
    height: 3rem;
  }
}

.p-numbers__val.--ratio {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding-inline-start: 9%;
}

.p-numbers__val.--ratio > span:nth-child(2) {
  align-self: flex-end;
  padding-inline-end: 9%;
}

.p-numbers__prefix {
  font-size: calc(var(--fs-76) / 2);
  color: #1C336F;
  align-self: flex-end;
  padding-block-end: .1em;
}

/* 男性・女性は未満と同サイズ（unit の .6em 相当） */
.p-numbers__val.--ratio .p-numbers__prefix {
  font-size: calc(var(--fs-76) / 2 * 0.6);
  align-self: center;
}

.p-numbers__num {
  font-family: "Quicksand", sans-serif;
  font-size: 5rem;
  line-height: 1;
  color: #1C336F;
  font-weight: 600;
}

@media screen and (max-width: 768px) {
  .p-numbers__num {
    font-size: var(--fs-76);
  }
}

.p-numbers__unit {
  font-size: calc(var(--fs-76) / 2);
  letter-spacing: .05em;
  color: #1C336F;
  align-self: flex-end;
  padding-block-end: .1em;
}

.p-numbers__unit small {
  font-size: .6em;
}

.p-numbers__note {
  font-size: var(--fs-14);
  letter-spacing: .05em;
  line-height: 1.8;
  color: var(--cl-6A747C);
  margin-block: 0;
  position: relative;
  z-index: 1;
}

/* PC：行間を1行あたり +6px（font-size は不変。1.8em = 現在の line-height 相当） */
@media screen and (min-width: 769px) {
  .p-numbers__note {
    line-height: calc(1.8em + 6px);
  }
}


/* ================================================
   Interview
================================================ */
.p-interview {
  padding-block: clamp(5rem, 4rem + 5vw, 9rem);
}

/* PC のみ：見出しブロックを18px下げる（セクション上paddingのみ +18px。下paddingは据え置き） */
@media screen and (min-width: 769px) {
  .p-interview {
    padding-block-start: calc(clamp(5rem, 4rem + 5vw, 9rem) + 18px);
  }
}

.p-interview__head {
  margin-block-end: clamp(2.5rem, 2rem + 2.5vw, 5rem);
}

/* c-ttl --inline は customize.css に移動 */

@media screen and (min-width: 769px) {
  .p-interview__head {
    display: grid;
    grid-template-columns: 1fr auto;
    /* ① 見出しブロックの下余白を +20px＝スライダー全体だけを20px下へ（見出し・本文は不動） */
    margin-block-end: calc(clamp(2.5rem, 2rem + 2.5vw, 5rem) + 20px);
  }

  .p-interview__head .c-ttl {
    grid-column: 1;
    grid-row: 1;
  }

  .p-interview__head .c-ttl__dots {
    grid-column: 1;
    grid-row: 2;
  }

  .p-interview__txt {
    grid-column: 1;
    grid-row: 3;
  }

  .p-interview__btn {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    /* ① 既存の縦中央合わせ translateY(50%) を保持しつつ 右100px・下10px 移動（レイアウト不変） */
    transform: translate(100px, calc(50% + 10px));
  }
}

.p-interview__head .c-ttl__dots {
  margin-block-start: 1.5em;
}


.p-interview__txt {
  font-size: var(--fs-16);
  letter-spacing: .05em;
  line-height: 2;
  font-weight: 500;
  margin-block: 2.0em 2.0em;
}

@media screen and (min-width: 769px) {
  .p-interview__txt {
    /* ② 上マージン +30px（本文⇔View moreボタンの間隔を広げる。font-size/line-height は不変） */
    margin-block-start: calc(2em + 30px);
    margin-block-end: 0;
  }
}

.p-interview__slider {
  position: relative;
  overflow: hidden;
}

/* ③④ PC のみ：スライダー全体と画像サイズ */
@media screen and (min-width: 769px) {
  /* ③-a フルブリードのはみ出しをクリップし、横スクロールバーを防止。
     overflow-x:clip は overflow-y:visible を巻き込まない（scroll container を作らない）ため、
     View moreボタンの translateY(50%) など縦方向のはみ出しには一切影響しない。幅は不変。 */
  .p-interview {
    overflow-x: clip;
  }

  /* ③-b スライダーだけをビューポート幅いっぱいに（フルブリード）＋ 左padding13px。
     50% は親 .b-inner 基準、50vw はビューポート基準。両者の差で b-inner の中央寄せインセットを
     打ち消し、左端はビューポート左へ。width:100vw で右端まで伸ばし、上の clip で余剰を切る。 */
  .p-interview__slider {
    width: 100vw;
    margin-inline-start: calc(50% - 50vw);
    padding-inline-start: 13px;
  }
  /* ④ 画像サイズの上書きは、ベース定義(.p-interview__item / .p-interview__pic img)より
     後ろに置かないと後勝ちで無効化されるため、下部（ベース定義の直後）に移動した。 */
}

.p-interview__list {
  list-style: none;
  margin-block: 0;
  padding-inline-start: 0;
  display: flex;
  gap: clamp(1rem, .75rem + 1.25vw, 2rem);
}

.p-interview__item {
  flex: 0 0 clamp(14rem, 12rem + 10vw, 20rem);
}

.p-interview__item > a {
  text-decoration: none;
  color: var(--cl-222222);
  display: block;
  transition: opacity .3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .p-interview__item > a:hover {
    opacity: .8;
  }
}

.p-interview__pic {
  margin: 0;
  border-radius: .625rem;
  overflow: hidden;
  position: relative;
}

.p-interview__pic img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 650;
  object-fit: cover;
  transition: transform .4s ease;
}

/* ④ PC のみ：画像サイズを 幅+50px・高さ+17px（カード枠ごと拡大）。
   ★ ベース定義(.p-interview__item / .p-interview__pic img)の直後に置くことで、
     同一詳細度でも後勝ちさせ、確実に適用させる（以前は上に書いて無効化されていた）。
   ・幅：カード枠 .p-interview__item の flex-basis を +50px（画像は width:100% で追従）
   ・高さ：元の高さ(clamp幅×650/400) から +17px。aspect-ratio 解除＋height明示、
     object-fit:cover(既存) で歪みなくトリミング。名前・役職(.p-interview__body)は
     画像への絶対配置のため下端に追従し崩れない。 */
@media screen and (min-width: 769px) {
  .p-interview__item {
    flex: 0 0 calc(clamp(14rem, 12rem + 10vw, 20rem) + 47px); /* 幅 +50px → +47px（-3px）。画像幅は width:100% で追従 */
  }

  .p-interview__pic img {
    aspect-ratio: auto;
    height: calc(clamp(14rem, 12rem + 10vw, 20rem) * 1.625 + 17px); /* 高さは独立指定（元clamp幅基準）のため幅変更の影響なし＝不変 */
  }

  /* 画像同士の横gapを -4px（ベース .p-interview__list より後ろ＝後勝ちで確実に適用）。
     JSは getComputedStyle(list).gap を実測しスライド量を算出するため動作は自動追従。 */
  .p-interview__list {
    gap: calc(clamp(1rem, .75rem + 1.25vw, 2rem) - 4px);
  }
}

@media (hover: hover) and (pointer: fine) {
  .p-interview__item > a:hover .p-interview__pic img {
    transform: scale(1.04);
  }
}

.p-interview__body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 1.5rem 1.25rem 1.25rem;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 100%);
  color: #fff;
}

.p-interview__catch {
  font-size: var(--fs-16);
  letter-spacing: .05em;
  line-height: 1.75;
  font-weight: 500;
  margin-block: 0 .75em;
  color: #fff;
}

.p-interview__role {
  font-size: var(--fs-14);
  letter-spacing: .05em;
  color: rgba(255,255,255,.8);
  margin-block: 0 .25em;
}

.p-interview__name {
  font-size: var(--fs-20);
  letter-spacing: .05em;
  font-weight: 600;
  margin-block: 0;
  color: #fff;
}

/* PC のみ：カード内テキストのフォントサイズ（ベース定義の後ろ＝後勝ち。全カード共通クラスなので全7枚に適用）。
   ① キャッチコピー 22px ／ ② 氏名 26px。役職・色・weight・行間・位置は未変更。 */
@media screen and (min-width: 769px) {
  .p-interview__catch {
    font-size: 22px;
  }
  .p-interview__name {
    font-size: 26px;
  }
}

.p-interview__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-block-start: 2rem;
}

.p-interview__arrows {
  display: flex;
  gap: .75em;
  flex-shrink: 0;
}

.p-interview__prev,
.p-interview__next {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid #1C336F;
  background: #1C336F;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease, opacity .3s ease;
  padding: 0;
}

.p-interview__prev span,
.p-interview__next span {
  display: block;
  width: .5rem;
  height: .5rem;
  border-inline-end: 2px solid #fff;
  border-block-end: 2px solid #fff;
  transition: border-color .3s ease;
}

.p-interview__prev span {
  transform: rotate(135deg) translate(-.1rem, -.1rem);
}

.p-interview__next span {
  transform: rotate(-45deg) translate(.1rem, -.1rem);
}

/* ⑤ PC のみ：左右ナビボタンの丸を +13px、矢印を +3px（線幅2px・回転位置は維持） */
@media screen and (min-width: 769px) {
  .p-interview__prev,
  .p-interview__next {
    width: calc(3rem + 13px);
    height: calc(3rem + 13px);
  }

  .p-interview__prev span,
  .p-interview__next span {
    width: calc(.5rem + 3px);
    height: calc(.5rem + 3px);
  }
}

.p-interview__prev:disabled,
.p-interview__next:disabled {
  background: #fff;
  cursor: default;
}

.p-interview__prev:disabled span,
.p-interview__next:disabled span {
  border-inline-end-color: #1C336F;
  border-block-end-color: #1C336F;
}

@media (hover: hover) and (pointer: fine) {
  .p-interview__prev:not(:disabled):hover,
  .p-interview__next:not(:disabled):hover {
    opacity: .75;
  }
}

.p-interview__progress {
  flex: 1;
  height: 2px;
  background: #B6C1CF;
  position: relative;
}

.p-interview__bar {
  display: block;
  height: 100%;
  width: 0%;
  background: #1C336F;
  transition: width .3s ease;
}

/* ①②③④ PC のみ：コントロールエリア（左右ボタン＋進捗バー）のレイアウト。
   ★ ベース定義(.p-interview__nav 1239行 / .p-interview__progress 1319行)より後ろに置き、
     同一詳細度でも後勝ちで確実に適用させる。ボタンサイズ・矢印・バー高さ/色/アニメは未変更。 */
@media screen and (min-width: 769px) {
  .p-interview__nav {
    width: 1200px;                          /* ① コントロール全体の幅 */
    max-width: 100%;                        /* 1200px未満のPCでスライダー外へはみ出さない保険 */
    margin-inline: auto;                    /* 1200pxエリアを中央寄せ（ページの1200pxコンテンツ列に合わせる） */
    gap: 60px;                              /* ④ 左右ボタン群 ⇔ バー の間隔 */
    margin-block-start: calc(2rem + 30px);  /* ② 画像との間隔を +30px（2rem→2rem+30px） */
  }

  .p-interview__progress {
    flex: 0 0 1000px;                        /* ③ バー(トラック)幅を1000px固定（伸縮しない） */
  }
}


/* ================================================
   Welfare
================================================ */
/* 背景固定パララックス。Numbers（.p-numbers__bg）と同一方式。
   画像の実寸は2880×2218（旧<img>のwidth/height属性1600×900は実際のファイルと
   一致しておらず不正確だったため使用しない）。PC・スマホとも同一のbase定義を
   使い、スマホのみ.p-numbers__bgと同じclip-path方式へ切り替える
   （詳細はtop.css内 .p-numbers__bg のコメントを参照）。 */
.p-welfare__bg {
  width: 100%;
  aspect-ratio: 2880 / 1300;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media screen and (max-width: 768px) {
  .p-welfare__bg {
    background-attachment: scroll;
    clip-path: inset(0);
  }

  .p-welfare__bg::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
  }
}

.p-welfare {
  padding-block: clamp(5rem, 4rem + 5vw, 9rem);
  /* ② セクション下paddingを +50px（下側のみ。PC・SP共通。上paddingはPCの+27px上書きが別途有効） */
  padding-block-end: calc(clamp(5rem, 4rem + 5vw, 9rem) + 50px);
  background: #fff;
}

.p-welfare__wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 2rem + 2.5vw, 5rem);
  align-items: center;
}

@media screen and (min-width: 769px) {
  .p-welfare__wrap {
    grid-template-columns: minmax(0, 36.875rem) 1fr;
  }
}

.p-welfare__fig {
  margin: 0;
  border-radius: .625rem;
  overflow: hidden;
}

.p-welfare__fig img {
  display: block;
  width: 100%;
  height: auto;
}

/* c-ttl --inline は customize.css に移動 */

.p-welfare__body .c-ttl__dots {
  margin-block-start: 1.5em;
}

.p-welfare__txt {
  font-size: var(--fs-16);
  letter-spacing: .05em;
  line-height: 2;
  font-weight: 500;
  margin-block: 0 3.75em;
  color: #1D1D1D;
}

/* Welfare リード見出し（PC・SP 共通。共通 .c-sec-lead=451行 より後ろ＝後勝ち／他セクションの .c-sec-lead には非干渉）。
   ① 太字を PC・SP 共通に統一（font-weight のみ。font-size / line-height / color は .c-sec-lead のまま）。
   ② 最後の1文字の折り返し解消：文字間を .05em → -0.02em にごくわずかに詰める（幅拡張はグリッド/見出し位置を
      動かすため不可、フォントサイズは維持）。行間・カラー・位置は変更しない。 */
.p-welfare__lead {
  font-weight: 700;
  letter-spacing: -0.02em;
  /* ① 見出し⇔本文の間隔を +15px（lead 下マージン .75em=支配的 → +15px。PC・SP共通） */
  margin-block-end: calc(.75em + 15px);
}

/* ①②③ PC のみ：Welfare セクション微調整。
   ★ ベース定義(.p-welfare / .p-welfare__fig img)の後ろに置き、同一詳細度でも後勝ちさせる。 */
@media screen and (min-width: 769px) {
  /* ① セクション上paddingを +27px（下は据え置き＝セクション全体を下へ） */
  .p-welfare {
    padding-block-start: calc(clamp(5rem, 4rem + 5vw, 9rem) + 27px);
  }

  /* ② 左画像のみ：実測の現在表示 590×440 から 幅-40px・高さ-45px = 550×395。
     ★ 旧実装は max-width + margin-inline:auto が shrink-to-fit を誘発し、幅が固定高さ×アスペクトに
       collapse（実測 529.7px＝-60px過剰縮小）していた。→ 明示 width: calc(100% - 40px) に変更して回避。
       （iframe実測で 1280/1440px とも 550×395＝正確に -40/-45 を確認済み）
     左右グリッド(minmax(0,36.875rem) 1fr)＝親カラム幅は不変。列内で中央寄せし中心位置を維持。
     高さ 27.5rem-45px は「列幅がcapされる幅（=標準デスクトップ以上）」で常に現在高-45pxと一致。
     比率差は object-fit:cover で歪みなくトリミング（transform:scaleは不使用）。 */
  .p-welfare__fig {
    width: calc(100% - 40px);            /* 列幅590 → 550px（明示幅でcollapse回避）＝横幅は維持 */
    margin-inline: auto;                 /* 横方向は中央寄せ＝横位置維持 */
    align-self: start;                   /* 画像を上揃えにし高さは下方向へ伸ばす（行が伸びても右bodyを動かさない） */
  }
  .p-welfare__fig img {
    /* 現在の表示高さ 395px(=27.5rem-45px) から +200px = 595px。横幅(550px)は不変。
       行高(右body=518.7px)より高くなるが、fig/body を align-self:start にすることで
       右コンテンツは動かず(実測 body top=0 のまま)、画像だけ下へ伸びる。object-fit:cover でトリミング。 */
    height: calc(27.5rem + 155px);       /* 395px → 595px（+200px） */
    object-fit: cover;
  }

  /* ③ 右側コンテンツ(見出し・丸・本文・View more)だけを42px下へ。
     padding だと align-items:center の再計算でグリッド高さ・左画像位置が連動するため、
     レイアウト非連動の transform: translateY を使用（左画像・親グリッドに副作用なし）。 */
  .p-welfare__body {
    align-self: start;                   /* 行が伸びても中央再計算で下がらないよう上に固定（現位置=top:0のまま＝見た目不変） */
    transform: translateY(57px);         /* 42px + 15px（右コンテンツのみ追加で15px下げ／レイアウト非連動） */
  }

  /* Welfare のリード見出し：3つの丸⇔見出しの間隔を30px詰める（PC専用）。
     lead 上マージン 3.5em(=支配的) から -30px。太字・letter-spacing は下のベース側で共通指定。 */
  .p-welfare__lead {
    margin-block-start: calc(3.5em - 30px);
  }
}


/* ================================================
   CTA (recruit版)
================================================ */
/* ---- ベースCSSの上書きリセット ---- */

/* ================================================
   js-reveal（共通スクロールフェードイン）
================================================ */
.js-reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .7s ease, transform .7s ease;
}

.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}