@charset "UTF-8";

/* ================================================
   カラー変数（Figmaデザインデータより）
================================================ */
:root {
  /* ブランドカラー */
  --color-01: #58a9db;
  --color-02: #7f8dd4;
  --color-03: #7cced2;
  --color-04: #f6c387;
  --color-05: #e89196;
  --color-06: #d97a6d;
  --color-07: #82bedf;

  /* 背景色 */
  --bg-color-01: #f9f9f9;
  --bg-color-02: #e4e9f0;

  /* フォントカラー */
  --font-color:    #1c336f;
  --font-color-02: #6a747c;
  --font-color-03: #1d1d1d;

  /* その他 */
  --color-white:  #ffffff;
  --color-gray:   rgba(0, 0, 0, .15);
  --color-border: #b6c1cf;

  /* 互換用エイリアス */
  --cl-text:   var(--font-color-03);
  --cl-navy:   var(--font-color);
  --cl-blue:   var(--color-01);
  --cl-gray:   var(--font-color-02);
  --cl-border: var(--color-border);
  --cl-bg01:   #f2f6fc;
  --cl-salmon: var(--cl-E09F93);
  --ff-en:     "DM Sans", sans-serif;
  --fs-11:     0.6875rem;
  --fs-13:     0.8125rem;
  --fs-15:     0.9375rem;
  --fs-17:     1.0625rem;

  /* 第二階層共通レイアウト基準値（PC）
     ・--submv-height : .c-submv の高さ。.c-submv 本体と .p-page-bg の位置計算が共有する唯一の基準。
     ・--page-content-gap : .c-breadcrumb 下端 〜 ページ最初の見出し/本文 上端までの距離。
     ・--breadcrumb-tail-gap : .c-submv 下端 〜 .c-page-hero 下端（.c-breadcrumb margin-block-start(7px)
       + .c-breadcrumb 自体の実高さ）。パンくず自体のデザイン（フォント/padding/margin）が変わらない限り
       PC・SP共通の固定値（実測 50.5px）。パンくずのデザインを変更する場合のみ、この値の再測定が必要。 */
  --submv-height: 30rem;
  --page-content-gap: 170px;
  --breadcrumb-tail-gap: 50.5px;
}

@media (max-width: 768px) {
  :root {
    --submv-height: 15rem;
    --page-content-gap: 60px;
  }
}


/* ================================================
   インナーボックス
================================================ */
.b-outer {
  width: 94%;
  max-width: 80rem;
  margin-inline: auto;
}

.b-inner {
  width: 94%;
  max-width: 68.75rem;
  margin-inline: auto;
}

@media screen and (max-width: 1200px) {
  .b-outer,
  .b-inner {
    width: 94%;
  }
}

@media screen and (max-width: 768px) {
  .b-inner {
    width: 90%;
  }
}

/* ================================================
   ページ背景帯（第二階層共通 / MV中央〜CTA直前）
================================================ */
.p-page-bg {
  width: 100%;
  background: #F9F9F9;
  /* 背景の開始位置（margin）と本文の開始位置（padding）は責務を分離しつつ、
     どちらも --submv-height / --breadcrumb-tail-gap / --page-content-gap の3変数だけから算出する。
     ① margin-block-start：.p-page-bg の上端が .c-submv の縦中央に一致するための値。
        .c-page-hero 下端(= .c-breadcrumb 下端)を基準に、MVの高さの半分とパンくず後方の余白(tail-gap)を
        引き戻すことで、常に MV 縦中央へ着地する。--page-content-gap には依存しないため、
        本文開始間隔だけを変更しても背景開始位置はズレない。
     ② padding-block-start：.c-breadcrumb 下端から本文最上部までを常に --page-content-gap に保つための値。
        margin で下がった分（submv-height/2 + tail-gap）をここで打ち消してから、
        改めて --page-content-gap を積む。--submv-height を変更しても本文開始間隔は変わらない。 */
  margin-block-start: calc(-1 * var(--submv-height) / 2 - var(--breadcrumb-tail-gap));
  padding-block-start: calc(var(--submv-height) / 2 + var(--breadcrumb-tail-gap) + var(--page-content-gap));
}

/* .p-page-bg 直下の最初のsectionは、全対象ページ（about/guidelines/guidelines-detail/environment/
   two-pillars/interview/faq/entry/entry-complete）で共通してこの構造。ページ固有CSS側の
   先頭padding/marginは撤去済みのため、本文開始間隔は上記 .p-page-bg の padding-block-start のみで決まる。
   .c-page-content は「先頭要素として使われる場合」と「ページ内部の区切りとして使われる場合」の
   両方があるため、ここでは先頭に来る場合（.p-page-bg > section:first-child > .c-page-content:first-child）
   に限定して重複するmargin-block-startのみを打ち消す。内部利用時（faq/guidelines/interview等の2番目の
   要素としての .c-page-content）の margin-block-start は一切変更しない。 */
.p-page-bg > section:first-child > .c-page-content:first-child {
  margin-block-start: 0;
}

/* ================================================
   第二階層コンテンツコンテナ
================================================ */
.c-page-content {
  width: 94%;
  max-width: 75rem;
  margin-inline: auto;
  margin-block-start: 4.5rem;
  margin-block-end: 8rem;
}

@media (max-width: 768px) {
  .c-page-content {
    width: 90%;
  margin-block-end: 3rem;
  }
}

/* ================================================
   第二階層共通イントロブロック
================================================ */
.c-page-intro {
  width: 94%;
  max-width: 75rem;
  margin-inline: auto;
  margin-block-end: clamp(2rem, 5vw, 3rem);
}

.c-page-intro__lead {
  text-align: center;
  font-size: var(--fs-16, 1rem);
  line-height: 2;
  color: var(--cl-text, var(--font-color-03));
  margin-block: 67px 0;
}

@media (max-width: 768px) {
  .c-page-intro {
    width: 90%;
  }
  .c-page-intro__lead {
    font-size: 1rem;
  }
  .c-page-intro__lead br.--pc {
    display: none;
  }
}

/* ================================================
   第二階層共通イントロブロック（横並びタイプ）
================================================ */
.c-page-intro2 {
  width: 94%;
  max-width: 75rem;
  margin-inline: auto;
  margin-block-end: clamp(2rem, 5vw, 3rem);
}

@media (max-width: 768px) {
  .c-page-intro2 {
    width: 90%;
  }
}

/* ================================================
   第二階層共通ヒーローコンテナ
================================================ */
.c-page-hero {
  width: 94%;
  max-width: 80rem;
  margin-inline: auto;
}

.c-page-hero .c-head-title__inner,
.c-page-hero .c-submv,
.c-page-hero .c-breadcrumb .b-outer {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* ① PC のみ：第二階層共通ヘッダーセクションの上paddingを +9px（セクション全体が9px下へ。
   タイトル・MV・パンくずの内部余白は不変＝相互バランス維持）。SPは対象外。 */
@media screen and (min-width: 769px) {
  .c-page-hero {
    padding-block-start: 0px;
  }

  /* 見出しブロック(.c-head-title)とサブMV(.c-submv)の間隔を16px縮小。
     DOM順は 見出し→MV のため、実際の間隔は見出しの padding-bottom（MVの margin-block-start:10px は不変）。
     既存の余白指定(clamp)をそのまま維持しpxを減算＝全PC幅で一律-16px。最小値769px時でも約24px-16px=8pxで破綻しない。
     ヘッダークリアランス(padding-top)・MV位置・パンくず/本文位置は不変。SP(≤768px)は別途定義の値のまま不変。 */
  .c-head-title {
    padding-bottom: calc(clamp(1.5rem, 3vw, 2.5rem) - 16px);
  }
}

/* ================================================
   サブMV（第二階層共通）
================================================ */
.c-submv {
  position: relative;
  overflow: hidden;
  height: var(--submv-height); /* .p-page-bg の位置計算と共有する基準値（:root で定義） */
  border-radius: 1rem;
  margin-block-start: 30px; /* MVセクションを10px下へ（パンくず・本文も連動） */
}

.c-submv__bg {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
}

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

.c-submv__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-block-end: clamp(1.5rem, 3vw, 2.5rem);
}

.c-submv__ttl {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.c-submv__en {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--font-color);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.c-submv__ja {
  font-size: 0.875rem;
  color: var(--font-color);
  letter-spacing: 0.08em;
}

/* About専用：フルワイドスライダー */
.c-submv--slider {
  width: 100%;
}

@keyframes submv-slide {
  to { transform: translateX(-50%); }
}

.c-submv__track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 200%;
  animation: submv-slide 16s linear infinite;
  will-change: transform;
}

.c-submv__slide {
  flex: 1;
  overflow: hidden;
}

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

/* パンくず */
.c-breadcrumb {
  padding-block: 0.75rem;
  margin-block-start: 7px; /* ② パンくず全体を7px下 */
}

.c-breadcrumb__item:first-child a {
  color: var(--font-color); /* ② HOMEのみ紺（--font-color = #1c336f） */
    font-weight: bold;
}

.c-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  font-size: 13px; /* ① 0.75rem(12px)→13px */
  color: var(--font-color-02);
  list-style: none;
  padding: 0;
  margin: 0;
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
  content: '/';
  margin-inline: 1em; /* ② /の前後に約1文字分の余白（0.4em→1em） */
  color: var(--color-border);
}

.c-breadcrumb__item a {
  color: inherit;
  text-decoration: none;
}

.c-breadcrumb__item a:hover {
  color: var(--color-01);
}

.c-breadcrumb__item.is-current span {
  color: var(--font-color-03);
}


/* ================================================
   ページタイトル（第二階層共通）
================================================ */
.c-head-title {
  padding-top: calc(var(--header-h, 80px) + clamp(2rem, 4vw, 3rem));
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.c-head-title__inner {
  padding-inline-end: clamp(1rem, 3vw, 2rem);
  transform: translateY(13px); /* ① ページタイトルを13px下 / layout非破壊 */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
}

.c-head-title__en {
  font-family: "Quicksand", sans-serif;
  font-size: 4.55rem;
  font-weight: 700;
  color: var(--font-color);
  line-height: 0.85;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  align-self: center;
}

/* PC のみ：第二階層共通の英語見出し(Quicksand)の字間を 1字あたり +0.6px 広げる。
   base の -0.01em は維持し px を加算＝広がり量を全PC幅で固定（Interview 約9字で合計 約+5px）。
   letter-spacing のみ変更＝フォントサイズ/太さ/色/行間/縦位置は不変。
   .c-head-title__en は第二階層専用クラス（トップページには存在しない）。SP(≤768px)は base のまま不変。 */
@media screen and (min-width: 769px) {
  .c-head-title__en {
    letter-spacing: calc(-0.01em + 0.6px);
  }
}

/* c-ttl__dots の margin をリセットして横並びに対応 */
.c-head-title__dots {
  /* デザイン(丸サイズ・間隔)は共通 .c-ttl__dots に一本化。ここは位置・整列のみ上書き */
  margin-block: 0;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  transform: translate(13px, 10px); /* 右へ13px・下へ10px */
}

/* 3つの丸の間隔調整は、全サイト共通の .c-ttl__dots 側（下部の定義）でPC限定に一本化。 */

.c-head-title__ja {
  font-size: 1rem;
  font-weight: 700;
  align-self: center;
  color: var(--font-color);
  letter-spacing: 0.05em;
  flex-shrink: 0;
  transform: translate(13px, 12px); /* 右へ13px・下へ12px（dots+10pxからさらに2px下） */
}

@media (max-width: 768px) {
  .c-head-title__en {
    font-size: 3.22rem;
    width: 100%;
    /* 320px幅では"Environment"等スペースを含まない語が拡大後の文字サイズで
       折り返せず横はみ出しの原因になったため、最後の手段としてのみ単語内改行を許可 */
    overflow-wrap: break-word;
  }
  .c-head-title {
    padding-bottom: calc(clamp(1.5rem, 3vw, 2.5rem) + 5px);
  }
  .c-head-title__inner {
    padding-inline-start: 0.625rem;
    flex-wrap: wrap;        /* 長いタイトルを折り返し許可 */
    align-items: center;    /* 折り返しパターンに関わらず、各行内で各要素を縦中央揃え（各子要素の align-self:center は既存のまま有効） */
    row-gap: 0.8rem;         /* 2行折り返し時の行間を約20%縮小（1rem→0.8rem。column-gapは1remのまま不変） */
  }
  .c-head-title__en {
    /* align-self:center は行のボックス中心に揃えるが、Quicksand Bold + line-height:0.85 では
       フォントの内部メトリクス(ascent/descent非対称)により、ボックス中心と小文字(x-height)の
       見た目上の中心が一致しない（実測+3.656px）。small文字部分の視覚的中心を行中心に
       合わせるための固定補正（フォントサイズ固定のためSP全幅で一定値）。 */
    transform: translateY(-3.656px);
  }
  .c-head-title__dots {
    order: 2;               /* dots を EN の直後に */
    /* base の transform: translate(13px, 10px) はPC(常に1行)向けの水平・垂直オフセットで、
       SPで2行目先頭になった際に右へずれ、かつ align-self:center による自然な縦中央揃えを
       崩す原因だったため、SPでは transform を無効化し align-self:center のみで揃える。 */
    transform: none;
  }
  .c-head-title__ja {
    order: 3;               /* JA を dots の後（折り返し先頭）に */
    flex-shrink: 1;
    min-width: 0;
    /* 同上。base の transform: translate(13px, 12px) をSPのみ無効化し、align-self:center に一本化。 */
    transform: none;
    font-size: 0.9rem;
  }
}

/* ================================================
   フォント定義
   日本語: Noto Sans JP / 英語・数字: DM Sans
================================================ */
body {
  font-family: "DM Sans", "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--font-color-03);
}

/* 明朝体指定クラスも Noto Sans JP に統一 */
*[class*="b-min-"] {
  font-family: "DM Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* Amiri（数値装飾用）はそのまま維持、英字は DM Sans に */
*[class*="b-en-"] {
  font-family: "DM Sans", Georgia, sans-serif;
}

.c-news__pic {
  margin: 0;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .c-news__pic {
    width: min(11.25rem, calc(180 / 768 * 100vw));
  }
}
.c-news__pic img {
  aspect-ratio: 3/2;
  border-radius: 10px;
}

/* ================================================
   ヘッダー スクロール透過アニメーション
   初期：透明  /  scrollY≥200px：白背景フェードイン
   白背景の実体は style.css の .l-hd::before（gradient pseudo-element）
================================================ */
.l-hd {
  transition: box-shadow 0.35s ease;
}

/* 初期：::before の白背景を非表示 */
.l-hd::before {
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* スクロール後：白背景フェードイン + blur + shadow */
.l-hd.is-scrolled::before {
  opacity: 0.96;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.l-hd.is-scrolled {
  box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}

.l-hd__logo img {
  width: 100%;
  height: auto;
}

/* SPヘッダーの高さを縮小 */
@media screen and (max-width: 1200px) {
  .l-hd {
    padding-block: 10px; /* SP固定ヘッダー：上下パディングを+10px（--header-h はJSが自動追従） */
    align-items: center;
  }

  /* ハンバーガーボタンをヘッダー縦中央に固定 */
  .l-hd__toggle {
    position: absolute;
    inset: 50% 1.25rem auto auto;
    transform: translateY(-50%);
  }
}

/* PC(≥1201px)のみ ヘッダーを最大幅1440pxのコンテナレイアウトへ（トップ・第二階層 共通ヘッダー）。
   ≥1201px 未満は .l-hd__group が display:none（ハンバーガー）＝スマホ表示は不変。 */
@media screen and (min-width: 1201px) {
  /* コンテナ設計：全幅の固定バー（背景/スクロール時の blur）は維持しつつ、
     内容（ロゴ〜CTA）を「max-width:1440px / margin-inline:auto / padding-inline:20px」の
     コンテナに収める。HTMLにPC用インナーが無いため .l-hd の左右paddingで等価実装。
       padding-inline = max(20px, (100% - 1440px)/2 + 20px)
       ・W≧1440px … 内容は1400px幅で中央固定（ロゴ左端=左20px / LINE右端=右20px）
       ・W<1440px … gutter20pxのまま画面幅に追従（レスポンシブ／自然縮小）
     ロゴ左端＝左gutter20px、CTAグループは justify-content:flex-end のため
     LINE右端＝右gutter20px。個別のtransform移動は廃止しコンテナ設計に一本化。
     ※上padding(+9px)・ヘッダー高さ・ロゴサイズ・ナビ/CTAは不変。 */
  .l-hd {
    padding-inline: max(20px, calc((100% - 1440px) / 2 + 20px));
    /* ① ヘッダー高さを100px固定（全幅で一定。従来の可変em padding由来の高さ変動を解消）。
          --header-h はJSが offsetHeight を実測して自動更新＝100pxに追従（MV/page-heroも自動整合）。 */
    height: 100px;
    /* ② 100px固定に準じ上下paddingを解除し、ロゴ/Gナビ/CTAを縦中央に配置。
          ロゴ180px幅=高さ77px（163:70）を100px内へ収めるため、相互整列を保ったまま中央寄せ。 */
    padding-block: 0;
    align-items: center;
  }

  /* ① ロゴ幅を180px固定（base の min(10.1875rem,…)=可変vw を上書き）。
     img は width:100%/height:auto（既存）なので高さはアスペクト比維持のauto。 */
  .l-hd__logo {
    width: 180px;
  }

  /* CTAボタン文字：PCは14px固定。
     ★重要（前回14pxが効かなかった原因）：後方の base ".l-hd__cta{font-size:var(--fs-14)}" と
       詳細度が同じ(0,1,0)で、メディアクエリは詳細度を上げないため“後勝ち”で打ち消されていた。
       → 詳細度を(0,2,0)/(0,2,1)へ引き上げて確実に勝たせる。!important不要。
     対象は .l-hd__group 内のCTAのみ（SPドロワーCTAは .l-hd__panel .l-hd__inner で別系統＝不変）。
     span はクラス無しで a から継承だが、上書き耐性のため span も明示指定。
     ボタンは幅138/170px・高さ48px固定のため寸法・中央寄せ・アイコンに影響なし。 */
  .l-hd__group .l-hd__cta,
  .l-hd__group .l-hd__cta span {
    font-size: 14px;
  }

  /* ③ Gナビ・CTAの縦位置をページトップ基準で固定（ロゴは .l-hd の align-items:center のまま）。
        position:fixed; top:0 のため「ページトップ＝ヘッダー上端＝0」。
        群だけ上端基準(align-self:start)＋子を上端揃え(flex-start)にし、個別にtranslateYで配置。 */
  .l-hd__group {
    align-self: start;        /* 群をヘッダー上端(0)基準へ（ロゴの中央寄せには非干渉） */
    align-items: flex-start;  /* nav/ctas を群の上端(0)に揃える（base の center を上書き） */
    /* ② Gナビ↔CTAの間隔（群gap）を base clamp より6px縮小。
          CTAは justify-content:flex-end で右端固定＝動かず、ナビだけがエントリー側へ6px寄る。 */
    gap: calc(clamp(1.375rem, 1.09rem + 1.41vw, 2.5rem) - 6px);
  }
  /* CTA：ボタン上端をページトップから27px（従来 .l-hd__ctas の translateY(-10px) を置換）。
     ボタン高さ48px固定＝translateYは全幅で一定＝ボタン上端は常に27px。2ボタンは同一tops。 */
  .l-hd__group .l-hd__ctas {
    transform: translateY(27px);
  }
  /* Gナビ：テキスト上端をページトップから約45px。line-height1.5のleading(≈4px)を見込み箱上端41px。
     （前回30px狙いの translateY(26px) から +15px。箱を15px下げればテキスト上端も厳密に15px下がる）
     箱上端41pxは全幅で一定（群 align-self:start＝ヘッダー上端0基準／ヘッダー高さ100px固定）。
     下向き矢印付き項目も ul の align-items:baseline＋同一font-sizeでテキスト上端は揃う。 */
  .l-hd__group .l-hd__nav {
    transform: translateY(41px);
  }

  /* Gナビ各項目間の間隔を 2em より5px狭く（前回-4px からさらに-1px）。
     em基準に関係なく一律 -5px。ナビは群内で justify-content:flex-end＝右端固定のため、
     項目同士の位置関係のみ詰まる。個別marginは追加せず共通gapのみ変更。 */
  .l-hd__nav ul {
    gap: calc(2em - 5px);
  }

  /* 各ナビ項目を必ず1行表示に。日本語は任意の文字間で改行可能＝flex項目の min-content が
     「1文字」になり、幅が詰まると1文字だけ折返す。nowrap で min-content がテキスト全幅になり
     折返し不可＝根本修正（全PC幅に適用）。矢印付き項目のテキストも同様に1行維持。 */
  .l-hd__nav a {
    white-space: nowrap;
  }
}

/* Gナビ文字：可変(1rem=1vw)を維持しつつ最大16pxで頭打ち。
   ≦1600pxは現状(1vw)のまま／>1600pxで16px上限。.l-hd__nav はPC専用要素(SPは display:none)。 */
.l-hd__nav ul {
  font-size: min(1rem, 16px);
}

.l-hd__nav ol a {
  font-size: min(1rem, 16px);
}

/* 狭いPC帯（約1201〜1300px）だけ Gナビ折返し対策：項目間gapをさらに詰めて横溢れを防止。
   上記 .l-hd__nav a{white-space:nowrap}（全PC）と併用し、この帯で全項目を1行内に収める。
   ソース順で通常帯の .l-hd__nav ul{gap:calc(2em-5px)} より後＝この帯で後勝ち。
   1301px以上は非適用＝文字サイズ・間隔とも従来どおり不変。SPは .l-hd__nav 非表示で無関係。 */
@media screen and (min-width: 1201px) and (max-width: 1300px) {
  .l-hd__nav ul {
    gap: calc(2em - 10px);   /* 通常帯の -5px から更に -5px/箇所（5箇所で計25px短縮） */
  }
}

/* プルダウン矢印を黒に */
.l-hd__nav li:has(> ol) > a::after {
  border-inline-end-color: #000;
  border-block-end-color: #000;
}

/* プルダウン各項目の前に青矢印（PC・SP共通） */
.l-hd__nav ol a::before,
.l-hd__navSp ol a::before {
  content: "";
  display: inline-block;
  width: 1.4em;
  height: 1em;
  background-image: url("../img/cmn/arrow.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  vertical-align: middle;
  margin-inline-end: .4em;
}

/* SP ドロワー：サブメニュー折り畳み（JSがl-hd__hasSubクラスを付与した要素のみ） */
.l-hd__navSp .l-hd__hasSub {
  position: relative;
}

.l-hd__navSp .l-hd__hasSub > ol {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease;
}

.l-hd__navSp .l-hd__hasSub > ol > li {
  min-height: 0;
}

.l-hd__navSp .l-hd__hasSub.is-open > ol {
  grid-template-rows: 1fr;
}

/* トグルボタン */
.l-hd__subToggle {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 3rem;
  height: 3rem;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.l-hd__subToggle::after {
  content: '';
  position: absolute;
  width: 0.5714em;
  height: 0.5714em;
  border-right: 2px solid var(--font-color);
  border-bottom: 2px solid var(--font-color);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.l-hd__navSp .l-hd__hasSub.is-open > .l-hd__subToggle::after {
  transform: rotate(-135deg);
}

/* ================================================
   View more ボタン 全体統一
================================================ */
.c-btn {
  color: var(--font-color);
  border-color: var(--font-color);
  padding-inline: 2em 1.2em;
  padding-block: .75em;
  min-width: 18rem;
  font-weight: 700;
}

.c-btn i {
  background: var(--font-color);
  width: 2.25em;
  height: 2.25em;
  border-radius: 50%;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-btn i img {
  display: none;
}

.c-btn i::after {
  content: '';
  display: block;
  width: .45em;
  height: .45em;
  border-top: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
  transform: rotate(45deg) translateX(0%);
}

/* ---- サイズ・文字位置の微調整（プレーンな View more のみ。--entry/--line/--outline は除外） ----
   :not() を3つ重ねて詳細度(0,4,0)とし、top.css の .p-about-intro .c-btn(0,2,0) にも勝つ */
.c-btn:not(.--entry):not(.--line):not(.--outline) {
  align-items: center;               /* ② テキストを縦方向 完全中央（明示） */
  min-width: calc(18rem + 12px);     /* ① 幅 +12px */
  padding-block: calc(.75em + 4px);  /* ① 高さ +8px（上下 +4px ずつ） */
  padding-inline: 2em;               /* 【基準=About】左右パディングを対称2emに統一（右端の丸位置を全ボタン共通化） */
}

.c-btn:not(.--entry):not(.--line):not(.--outline) > span {
  transform: translateX(10px);       /* ② 文字だけ 10px 右へ（縦中央・ボタン全体位置は不変） */
}

/* ---- 右端の丸アイコン調整（プレーンな View more のみ） ---- */
.c-btn:not(.--entry):not(.--line):not(.--outline) i {
  position: relative;
  left: 7px;                  /* ① 丸を右（外側）へ。18px→7px（11px左に戻し）。移動は position で行い hover の transform とは非干渉 */
  width: calc(2.25em - 6px);  /* ② 直径 -6px */
  height: calc(2.25em - 6px);
}

.c-btn:not(.--entry):not(.--line):not(.--outline) i::after {
  width: .375em;              /* ③ 丸の縮小比に合わせて矢印も縮小（線幅2px・45deg・中央配置は維持） */
  height: .375em;
}

/* ---- SPのみ：ボタン幅を最大80%・左右中央寄せ（高さ・文字位置・丸・矢印・hover・PCは不変） ---- */
@media screen and (max-width: 768px) {
  .c-btn:not(.--entry):not(.--line):not(.--outline) {
    width: 100%;
    max-width: 80%;     /* 幅は最大80% */
    min-width: 0;       /* PC用の min-width(18rem+12px) を解除し max-width を有効化 */
    margin-inline: auto; /* 画面中央（左右中央）に配置 */
  }
}

/* ================================================
   セクション見出し（c-ttl）共通
   構造例:
   <h2 class="c-ttl --center">
     <span class="c-ttl__en">About</span>
     <span class="c-ttl__ja">バスターを知る</span>
     <span class="c-ttl__dots" aria-hidden="true"><span></span><span></span><span></span></span>
   </h2>
================================================ */
.c-ttl__en {
  font-family: "Quicksand", sans-serif;
  color: var(--font-color);
  font-weight: 700;
  -webkit-text-stroke: 0.3px var(--font-color);
  /* 文字幅90%。左揃え文脈（デフォルト／.c-ttl.--inline）では左端を基準に縮小するため
     transform-origin は左端（left center）。中央揃え（.c-ttl.--center）は下記の
     個別ルールで center に上書きし、中央位置がずれないようにする。 */
  transform: scaleX(1);
  transform-origin: left center;
}

.c-ttl__ja {
  color: var(--font-color);
  /* 共通サイズ：--fs-20 のスケールを維持したまま全域で 2px 小さく。
     共有トークン --fs-20 自体は他コンポーネントでも使用のため変更しない。 */
  font-size: calc(var(--fs-20) - 2px);
}

/* --inline: ENとJAが横並び、ドットは改行して左下 */
.c-ttl.--inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5em;
}

.c-ttl.--inline .c-ttl__en {
  display: inline;
}

.c-ttl.--inline .c-ttl__ja {
  /* color / font-weight / font-size は共通 .c-ttl__ja と同値のため削除（共通CSSを正とする） */
  display: inline;
  margin-block-start: 0;
  transform: translateY(0.3em);
}

.c-ttl.--inline .c-ttl__dots {
  width: 100%;
  margin-block-start: 1.5em;
}

/* --center: ENとJAが縦積み中央揃え（デフォルト） */
.c-ttl.--center {
  text-align: center;
}

/* 中央揃え文脈では scaleX(0.9) の基準点を中央に（左端基準のままだと中央位置が右にずれるため） */
.c-ttl.--center .c-ttl__en {
  transform-origin: center;
}

.c-ttl.--center .c-ttl__dots {
  justify-content: center;
}

.c-ttl__dots {
  display: flex;
  gap: 0.7rem; /* 【標準】第二階層ヘッダーと同じ丸間隔。丸サイズは .c-ttl__dots span(.5rem)。丸サイズ・間隔はこの1か所で統一管理 */
  margin-block: 1em;
}

/* PC のみ：全サイト共通の3つの丸（.c-ttl__dots を使う全箇所）の間隔を広げる。
   丸3つ=gap2箇所、1箇所+3px×2箇所=全体+6px。px加算のため base(rem=vw可変)に関係なく
   広がり量は全PC幅で一定。丸サイズ(.c-ttl__dots span)・色・margin-blockは不変。
   SP(≤768px)は base の 0.7rem のまま不変。 */
@media screen and (min-width: 769px) {
  .c-ttl__dots {
    gap: calc(0.7rem + 3px);
  }
}

.c-ttl__dots span {
  display: block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--color-01);
}

.c-ttl__dots span:nth-child(2) {
  background: var(--color-04);
}

.c-ttl__dots span:nth-child(3) {
  background: var(--color-05);
}

/* 下層ページ共通セクション見出し（Study Program / Welfare / Support / Staff 等）のSP調整。
   body:not(#top) でトップページ（index.php、body id="top"）を除外し、下層ページのみに適用。
   :not(#top) がID相当の詳細度を持つため、environment.css の .p-env__ttl-row .c-ttl__ja 等
   ページ個別の font-size:1rem 上書きより優先され、各ページのCSSを個別に変更せず統一できる。
   フォントサイズは見出しレイアウトのタイプ（左寄せ／中央揃え）に関わらず共通。
   上マージンは中央揃えタイプの自然な余白（style.cssのbase値 margin-block-start:1.2em）を
   維持するため、ここでは指定しない（＝タイプごとの下のブロックで個別に上書きする）。 */
@media (max-width: 768px) {
  body:not(#top) .c-ttl__en {
    font-size: var(--fs-76);
    width: 100%;
  }

  body:not(#top) .c-ttl__ja {
    font-size: calc(var(--fs-20) - 2px);
  }
}

/* 左寄せ・横並びタイプ（JA＋3つの丸、またはEN＋JAが同じ行）の見出し：
   Study Program / Welfare / Daily Schedule（.p-env__ttl-row）、
   Our Method（.p-two-pillars__ttl-row）、History（.p-about-history__ttl）。
   EN-JA間の間隔は行自体のmargin-block-startが担うため、JA自身の上マージンは0のまま
   （中央揃えタイプとは異なり、JAが丸やENと同じ行にあるため上マージンを持たせると
   縦中央揃えの妨げになる）。 */
@media (max-width: 768px) {
  .p-env__ttl-row .c-ttl__ja,
  .p-two-pillars__ttl-row .c-ttl__ja,
  .p-about-history__ttl .c-ttl__ja {
    margin-block-start: 0;
  }
}

/* ================================================
   縦見出しセット（Mission 等、左カラム共通）
================================================ */
.c-side-heading__en {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(3rem, 5vw, 5.25rem);
  font-weight: 700;
  color: var(--font-color);
  -webkit-text-stroke: 0.3px var(--font-color);
  line-height: 1.1;
  margin-block: 0 1rem;
}

.c-side-heading__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.c-side-heading__ja {
  font-size: 0.875rem;
  flex-shrink: 0;
}

.c-side-heading__row .c-ttl__dots {
  /* 丸間隔は共通 .c-ttl__dots(0.7rem) を継承。ここは位置のみ */
  display: flex;
  margin-block: 0;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .c-side-heading__en {
    margin-block-end: 0.5rem;
  }
}

.l-hd__ctas {
  display: flex;
  align-items: center;
  gap: .5em;
  transform: translateY(-10px);
}

.l-hd__cta {
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: .05em;
  padding-block: .7em;
  padding-inline: 1.5em;
  border-radius: 9999px;
  text-decoration: none;
  transition: opacity .3s ease;
  white-space: nowrap;
  gap: 6px;   /* アイコン⇔テキストの間隔（base .6428em → 6px）。display:flex/中央寄せは base 継承 */
}

/* CTA先頭アイコン（エントリー/LINE 共通）。高さ18px・幅auto。
   高さ18px < テキストの行高(約27px)のためボタン高さは不変。 */
.l-hd__cta img {
  height: 18px;
  width: auto;
  flex-shrink: 0;
}

.l-hd__cta.--entry {
  background: var(--color-06);
  color: var(--color-white);
}

.l-hd__cta.--line {
  background: var(--color-03);
  color: var(--color-white);
}

/* エントリー/LINEボタンの幅（全ページ共通。トップ・第二階層で同一デザイン）。
   PC top-right のCTAが出る 1201px 以上で padding-inline を左右均等に増やす
   ＝高さ・font-size・中央テキスト位置は不変、幅のみ拡大。ドロワー(1201px未満)は非対象。
   base .l-hd__cta{padding-inline:1.5em} より後ろ＝後勝ち。 */
@media screen and (min-width: 1201px) {
  /* ②③ ボタン幅・高さを固定px化（base の width:fit-content ＋ padding計算の可変を置換）。
     幅はflexで縮まないよう flex-shrink:0 で固定。padding-inline は幅決定に不要となり
     内容(アイコン+テキスト)を圧迫しないよう 0 に（中身は base の justify-content:center で中央寄せ）。
     高さは 48px 固定（box-sizing:border-box＝総高さ48px）。内容は align-items:center で縦中央。
     フォント・アイコン(18px)・gap(6px)は不変。 */
  .l-hd__cta.--entry {
    width: 138px;         /* ② エントリー 138px固定（従来のfit-content≒137pxとほぼ同値） */
    height: 48px;         /* 高さ48px固定 */
    padding-inline: 0;
    flex-shrink: 0;
  }
  .l-hd__cta.--line {
    width: 170px;         /* ③ LINEエントリー 170px固定（従来のfit-content≒172pxとほぼ同値） */
    height: 48px;         /* 高さ48px固定 */
    padding-inline: 0;
    flex-shrink: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .l-hd__cta:hover {
    opacity: .8;
  }
}

.l-hd__inner .l-hd__ctas {
  flex-direction: row;
  gap: .75em;
  margin-block-start: 2em;
}

.l-hd__inner .l-hd__cta {
  flex: 1;
  text-align: center;
  justify-content: center;
  padding-block: 1em;
}


/* ================================================
   フッター（共通）
================================================ */
.l-ft {
  background: var(--color-white);
}

.l-ft__wrap {
  padding-block-start: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}

.l-ft__copy {
  opacity: 1;
  border-block-start: none;
  text-align: center;
}

.l-ft__copy p {
  padding-block-start: 1em;
}

.l-ft__copy small {
  font-family: "Quicksand", sans-serif;
  color: var(--font-color-02);
}

.l-ft__logo {
  width: calc(183px * 1.4) !important;
}

.l-ft__logo img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  .l-ft__logo {
    width: calc(183px * 0.8) !important;
  }
  .l-ft__addr,
  .l-ft__nav ul {
    font-size: 0.8rem;
  }
}

.l-ft__nav ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em 4.5em;
  list-style: none;
  margin-block: 0;
  padding-inline-start: 0;
  font-size: 1rem;
}

.l-ft__nav li + li {
  margin-block-start: 0;
}

@media screen and (max-width: 768px) {
  .l-ft__nav ul {
    grid-template-columns: repeat(2, auto);
    column-gap: 60px;
    row-gap: 16px;
    font-size: 14px;
    letter-spacing: -0.05em;   /* ①文字間：最優先で微調整 */
  }

  /* 「バスターを知る」「よくあるご質問」の1文字折り返しを防止 */
  .l-ft__nav a {
    gap: .2em;                 /* ②余白：矢印とテキストの間隔を縮小（.4em→.2em） */
    white-space: nowrap;       /* 折り返し禁止（1行固定）。フォントサイズは変更せず維持 */
  }
}

.l-ft__nav a {
  display: inline-flex;
  align-items: center;
  gap: .4em;
}

.l-ft__nav a::before {
  content: '\f138';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--font-color);
  font-size: .85em;
  flex-shrink: 0;
}

.l-ft__official {
  margin-block-start: 4em;
}

.l-ft__official a {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: .4em;
}

.l-ft__official a::before {
  content: '\f08e';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .9em;
}
@media screen and (max-width: 768px) {
    .l-ft__official {
      font-size: 1.2em;
      margin-block-start: 1.5em;
    }
}

/* PC のみ：フッター住所の TEL と FAX を1行に。
   コンテンツ幅は既に .b-inner=1200px、左右は space-between で配置済みのため、
   TEL/FAX が2行になる原因は HTML の <br>（TEL↔FAX 間＝2番目の <br>）。
   HTMLは変えず、その <br> のみ CSS で無効化し、密着防止に区切りスペースを付与。 */
@media screen and (min-width: 769px) {
  .l-ft__addr br:nth-of-type(2) {
    display: none;
  }
  .l-ft__addr a {
    margin-inline-end: 1em;   /* TEL番号 ⇔ FAX の間隔（改行除去で密着するため） */
  }
}
/* ================================================
   電話番号リンク：PCはテキストのみ、SPのみタップ可
================================================ */
@media screen and (min-width: 769px) {
  a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

/* ================================================
   CTA（共通）
================================================ */
.c-cta {
  padding-block: 0;
  /* 上paddingは既に0のため、上側の余白を18px詰める（負の上マージンでセクションを18px上へ） */
  margin-block-start: -18px;
  background: none;
  overflow: hidden;
}

.c-cta::before {
  display: none;
}

/* ---- CTA visual（3枚画像 + テキスト） ---- */
.c-cta__visual {
  position: relative;
}

.c-cta__imgs {
  overflow: hidden;
}

@keyframes cta-slide {
  to { transform: translateX(-50%); }
}

.c-cta__imgs-track {
  display: flex;
  width: 200%;
  animation: cta-slide 10s linear infinite;
  will-change: transform;
}

@media screen and (min-width: 769px) {
  .c-cta__imgs-track {
    animation-duration: 20s;
  }
}

.c-cta__img-item {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.c-cta__img-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 8 / 9;
}
@media screen and (max-width: 768px) {
  .c-cta__img-item img {
    aspect-ratio: 4 / 9;
  }
}

/* Contact スライドショーの表示高さを +22px（幅・アニメーション・速度・位置は不変）。
   現在の高さは可変（実測 PC=幅×0.375=37.5vw / SP=幅×0.75=75vw）。aspect-ratio では
   固定22pxを加算できないため、コンテナに「現在の可変高さ + 22px」を与え、トラック/画像を
   height:100% でフィル、img は aspect-ratio 解除＋object-fit:cover で幅そのまま歪みなくトリミング。
   実測で PC 540px→562px（=+22px）・画像幅不変を確認済み。 */
.c-cta__imgs {
  height: calc(37.5vw + 80px);
}
.c-cta__imgs-track {
  height: 100%;
}
.c-cta__img-item img {
  aspect-ratio: auto;            /* 8/9(PC)・4/9(SP) の高さ制御を解除し height:100% に委ねる */
  height: 100%;
}
@media screen and (max-width: 768px) {
  .c-cta__imgs {
    height: calc(75vw + 22px);   /* SP: 現在75vw + 22px */
  }
}

.c-cta__img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 51, 111, .3);
}

.c-cta__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-block-start: clamp(4rem, 3rem + 5vw, 8rem);
  padding-inline-start: max(1rem, calc(100vw / 6 - 9rem));
  padding-inline-end: 2rem;
  color: var(--color-white);
}

/* スマホのみ：.c-cta__textがposition:absolute;inset:0のままだと、高さが
   .c-cta__imgs（画像側の可変だが固定的な計算式）に完全依存してしまい、狭い画面幅
   では文章量に対して箱が足りず、下端が.c-cta__panels-wrap（margin-block-start:-14%
   で常に画像下部へ重なる設計の紺背景パネル）に隠れて見切れていた。
   スマホのみ、画像側とテキスト側の position を入れ替える：.c-cta__imgs を
   position:absolute;inset:0にして「背景」として敷き直し、.c-cta__text を通常の
   ドキュメントフロー（position:relative、高さはauto）に戻す。これにより
   .c-cta__visual の高さは文章の実際の内容量から自然に決まるようになり、画像は
   その高さいっぱいに追従する（height:100%はそのまま、object-fit:coverのため
   歪みなし・トリミングのみ）。後続の.c-cta__panels-wrapは通常フロー上テキストの
   直後に続くため、文章が伸びた分だけ自然に下へ押し出される。
   z-index:1は、.c-cta__imgsをabsolute化したことで通常のスタッキング順では
   画像が文章より手前に描画されてしまうのを防ぐため（画像を文章の背面に固定）。 */
@media screen and (max-width: 768px) {
  .c-cta__imgs {
    position: absolute;
    inset: 0;
    height: auto;
  }

  .c-cta__text {
    position: relative;
    z-index: 1;
    /* .c-cta__panels-wrapのmargin-block-start:-14%は画面幅に比例して重なり量が
       増える（320pxで約45px～768pxで約108px）ため、余白側もvwに比例させて
       どの幅でも一定の隙間（約30px）を確保する。 */
    padding-block-end: calc(14vw + 30px);
  }
}

.c-cta__en {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, .8rem + 1vw, 1.625rem);
  letter-spacing: .05em;
  margin-block: 0 .4em;
  line-height: 1;
}

.c-cta__sub {
  font-size: clamp(.875rem, .7rem + .875vw, 1.625rem);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.6;
  margin-block: 0 .3em;
}

.c-cta__catch {
  font-size: clamp(1.125rem, 0.8rem + 1vw, 1.75rem);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.6;
  margin-block: 0;
  margin-bottom: 24px;
}

/* Contact テキストブロック PC のみ微調整（ベース .c-cta__text/.c-cta__en より後ろ＝後勝ち） */
@media screen and (min-width: 769px) {
  /* ① 見出し・本文を含むテキストブロック全体を右へ70px（transform＝レイアウト非連動。
     .c-cta の overflow:hidden で右側の余剰はクリップされ横スクロールは出ない）。 */
  .c-cta__text {
    transform: translateX(70px);
  }
  /* ② 「Contact」⇔日本語見出しの間隔を +20px（en 下マージン .4em → +20px）。
     sub 以降が20px下がり、sub↔catch(本文)の間隔は不変。font-size/weight/line-height は据え置き。 */
  .c-cta__en {
    margin-block-end: calc(.4em + 20px);
  }
}

/* ---- CTA panels ---- */
.c-cta__panels-wrap {
  position: relative;
  z-index: 3;
  margin-block-start: -14%;
  padding-block: 0 clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  padding-inline: 2%;
}

.c-cta__panels {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: 1rem;
  overflow: hidden;
}

@media screen and (min-width: 769px) {
  .c-cta__panels {
    grid-template-columns: repeat(3, 1fr);
    border-radius: 10px;           /* ① 角丸を10pxに統一（PCのみ。ベースの1rem=16pxを上書き） */
    transform: translateY(30px);   /* ② 3ボックス全体を一括で30px下へ（transform＝レイアウト非連動） */
  }
}

.c-cta__panel {
  padding: clamp(2.5rem, 2rem + 2.5vw, 4rem) clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25em;
  text-align: center;
}

.c-cta__panel.--form,
.c-cta__panel.--tel {
  background: var(--font-color);
}

.c-cta__panel.--line {
  background: #264084;
}

.c-cta__panel.--line .c-cta__label {
  min-width: 14rem;
}

.c-cta__label {
  font-size: calc(1.125rem - 2px);   /* ② 文字サイズ -2px（18px→16px。weight/color/行間は不変） */
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-white);
  margin-block: 0;
  border: 1px solid var(--color-white);
  border-radius: 9999px;
  padding-block: calc(0.45rem - 3px); /* 上下padding -3px（元 .4em = 0.45rem = 7.2px → 4.2px）。※-4pxから上下1pxずつ戻し。font-size非依存の rem で厳密化 */
  padding-inline: 1.25em;
  min-width: 18rem;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .c-cta__label {
    min-width: 14rem;
  }
  .c-cta .c-btn {
    min-width: 14rem;
  }
}

.c-btn.--entry {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--font-color);
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  justify-content: space-between;
}

.c-btn.--entry span {
  flex: 1;
  text-align: center;
}

.c-btn.--entry i {
  background: var(--font-color);
}

@media (hover: hover) and (pointer: fine) {
  .c-btn.--entry:hover {
    opacity: .85;
  }
}

/* Entry ボタン（Contact）PC のみ微調整。ベース .c-btn / .c-btn i / i::after より後ろ＝後勝ち。
   他ページの --entry には影響させないため .c-cta にスコープ。 */
@media screen and (min-width: 769px) {
  .c-cta .c-btn.--entry {
    min-width: calc(18rem - 50px);      /* 幅 -50px（丸は space-between で右端固定＝右からの距離は不変） */
    padding-block: calc(.75em + 3px);   /* 丸-6pxで縮む高さを上下+3pxで相殺＝ボタン高さ維持。文字サイズは不変 */
  }
  .c-cta .c-btn.--entry i {
    width: calc(2.25em - 6px);          /* 右端の丸の直径 -6px */
    height: calc(2.25em - 6px);
  }
  .c-cta .c-btn.--entry i::after {
    width: .375em;                      /* 中の逆くの字を丸の縮小比に合わせて縮小（.45em→.375em。線幅2px・角度は維持） */
    height: .375em;
  }
  .c-cta .c-btn.--entry span {
    transform: translateX(10px);        /* 文字「Entry」だけを10px右へ（transform＝レイアウト非連動。ボタン・丸・矢印は不変） */
  }
}

/* SP：「Entry」文字を5px右へ */
@media screen and (max-width: 768px) {
  .c-cta .c-btn.--entry span {
    transform: translateX(5px);
  }
}

.c-cta__line {
  text-decoration: none;
  color: var(--color-white);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1em;
  transition: opacity .3s ease;
}

.c-cta__line img {
  border-radius: 0;
  flex-shrink: 0;
}

/* ① QRコード縮小（LINEボックス限定）。縦横同値＝正方形維持で歪みなし。
   ② gap:1em は据え置き＝QR⇔@id の間隔(バランス)を維持。QR縮小で中央寄せ行が再センタリングされ @id は自然に左へ寄る。 */
@media screen and (min-width: 769px) {
  .c-cta__line img { width: 67px; height: 67px; }   /* PC：80→67px（-13px） */
}
@media screen and (max-width: 768px) {
  .c-cta__line img { width: 75px; height: 75px; }   /* SP：80→75px（-5px） */
}

.c-cta__line span {
  font-size: 1.5rem;
  letter-spacing: .05em;
}

@media (hover: hover) and (pointer: fine) {
  .c-cta__line:hover {
    opacity: .8;
  }
}

/* Contact パネル PC のみ微調整（ベース定義の後ろ＝後勝ち） */
@media screen and (min-width: 769px) {
  /* ① ボックス上padding +9px（下padding -9px で相殺＝ボックス高さ不変・コンテンツが9px下がる）。
     padding-inline はベースのまま（横幅・左右余白は不変）。 */
  .c-cta__panel {
    padding-block:
      calc(clamp(2.5rem, 2rem + 2.5vw, 4rem) - 9px)   /* 上：現在(+9px)から -18px（コンテンツを18px上へ／ボックス高さは自然に18px縮む） */
      calc(clamp(2.5rem, 2rem + 2.5vw, 4rem) - 9px);  /* 下：不変（相殺なし） */
  }

  /* ② フォーム・電話のボタン(ラベル)幅を -50px（min-width 18rem → 18rem-50px=238px。中央揃え維持） */
  .c-cta__panel.--form .c-cta__label,
  .c-cta__panel.--tel .c-cta__label {
    min-width: calc(18rem - 50px);
  }

  /* ③ LINEのボタン(ラベル)幅を -20px（min-width 14rem → 14rem-20px=204px。中央揃え維持） */
  .c-cta__panel.--line .c-cta__label {
    min-width: calc(14rem - 20px);
  }
}

.c-cta__tel {
  margin-block: 0;
  color: var(--color-white);
}

.c-cta__tel a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  text-decoration: none;
  color: var(--color-white);
  font-size: var(--fs-40);
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  transition: opacity .3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .c-cta__tel a:hover {
    opacity: .8;
  }
}

.c-cta__tel img {
  width: 1.25rem;
  height: 1.25rem;
  filter: brightness(0) invert(1);
}

.c-cta__tel a::before {
  content: '\f095';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.875rem;
  color: var(--color-white);
  line-height: 1;
}

@media screen and (max-width: 768px) {
  .c-cta__tel a::before {
    font-size: 1.25rem;
  }
}

.c-cta small {
  font-size: var(--fs-14);
  letter-spacing: .05em;
  color: var(--color-white);
}

/* お電話ボックスのみ：見出し⇔電話番号の間隔を詰める（tel の負マージン＝label↔tel のみ短縮。
   tel↔時間表記の間隔・他2ボックスには非干渉）。
   PCは現在の間隔が約19.5pxしかないため -27px は不可 → 限界まで詰めて残約2.5px（-17px）。SPは -12px（16.5→4.5px）。 */
@media screen and (min-width: 769px) {
  .c-cta__panel.--tel .c-cta__tel {
    margin-block-start: -25px;   /* -17px から さらに -8px（実測: -17pxで35px残 → -8pxで約27px） */
  }
}
@media screen and (max-width: 768px) {
  .c-cta__panel.--tel .c-cta__tel {
    margin-block-start: -12px;   /* 約16.5px → 約4.5px */
  }
}

/* 電話番号⇔営業時間(small)の間隔を詰める（small の負マージン＝tel↔small のみ短縮）。
   相殺なし＝ボックス高さは自然に低くなる。PC -7px / SP -4px。 */
@media screen and (min-width: 769px) {
  .c-cta__panel.--tel small {
    margin-block-start: -7px;
  }
}
@media screen and (max-width: 768px) {
  .c-cta__panel.--tel small {
    margin-block-start: -4px;
  }
}

/* 電話アイコン⇔電話番号の間隔（.c-cta__tel a の gap:.4em）を詰める。
   justify-content:center のためアイコン・番号は中央基準のまま間隔だけ短縮。PC -8px / SP -3px。 */
@media screen and (min-width: 769px) {
  .c-cta__panel.--tel .c-cta__tel a {
    gap: calc(.4em - 8px);
  }
}
@media screen and (max-width: 768px) {
  .c-cta__panel.--tel .c-cta__tel a {
    gap: calc(.4em - 3px);
  }
}

/* ================================================
   TOP: About セクション メインコピー折り返し修正
================================================ */

/* PC: テキストが右画像エリアへ少し重なるのを許可して1行表示 */
.p-about__lead {
  white-space: nowrap;
  overflow: visible;
  position: relative;
  z-index: 2;
}

/* SP: フォントサイズ調整で1行に収める（16文字 × 5.8vw では溢れるため） */
@media screen and (max-width: 768px) {
  .p-about__lead {
    white-space: nowrap;
    font-size: 5.2vw;
  }
}

/* ================================================
   TOP: Two Pillars セクション（SP）並び順修正
   デフォルトで figure に order:-1 が付いており図が先になるため、
   SP では order:0 に戻して「見出し・本文 → 図形」の順にする
================================================ */
@media screen and (max-width: 768px) {
  .p-pillars__fig {
    order: 1 !important;
  }
}

/* ================================================
   PCのみ、SPのみのスタイル
================================================ */
@media screen and (min-width: 769px) {
.for_pc {}
.for_sp { display:none !important; }
}
@media screen and (max-width: 768px) {
.for_pc { display:none !important; }
.for_sp { }
}