/* ==========================================================================
   components.css — 通常HTMLの再利用UI（c-）
   ========================================================================== */

/* --- c-sec-title（各セクションのENラベル: ABOUT US / SERVICE / NEWS ...）--- */
.c-sec-title {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: var(--fs-40);
  line-height: 1.5;
  letter-spacing: 0.07em;
  color: var(--color-brand);
  font-feature-settings: "palt" 1;
}

/* --- c-view-more -------------------------------------------------------- */
.c-view-more {
  display: inline-flex;
  align-items: flex-start;   /* Figma: items-start（矢印を文字の上端基準に） */
  /* 縦並びの flex コンテナ内に置くと align-items:stretch で横いっぱいに
     伸び、クリック範囲が文字より広くなる。中身の幅に固定して防ぐ */
  width: fit-content;
  gap: var(--space-y-12) var(--space-x-12);
  font-family: var(--font-en);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: 1.5;
  letter-spacing: 0.13em;
  color: var(--color-brand);
  font-feature-settings: "palt" 1;
}
/* 文字と一体の図形なので em。倍率は全箇所共通（24/18）で、置かれた場所の
   文字サイズに比例する。個別に上書きしない */
.c-view-more__arrow {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 1.3333em;
  height: 1.3333em;
}
.c-view-more__arrow::before,
.c-view-more__arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: url("../img/icon-arrow-right.svg") center / contain no-repeat;
  mask: url("../img/icon-arrow-right.svg") center / contain no-repeat;
}
.c-view-more__arrow::after {
  opacity: 0;
  transform: translateX(-50%);
}
/* 文字の入れ替え用。上へ抜ける文字と、下に控える複製をこの箱で隠す。
   flex アイテムなので高さは中身の行ボックス（1.5em）そのままで、
   ラップ前とレイアウトは変わらない */
.c-view-more__text {
  position: relative;     /* 複製（::after）の位置の基準 */
  overflow: hidden;
  /* 複製（::after）が nowrap の1行なので、実テキストも1行に揃える。
     折り返すと2つの文字の行数が食い違い、差し替えの位置がずれる */
  white-space: nowrap;
}
/* 現在の文字（実テキスト）。上へ抜けながら薄くなる */
.c-view-more__text-in {
  display: block;
}
/* 下に控える複製。data-text に同じ文字を持たせ、DOM 上の文字は増やさない。
   実テキストと兄弟（親の ::after）にしてあるので、opacity のグループに
   巻き込まれず、2 つの文字の透明度を別々に動かせる */
.c-view-more__text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(100%);   /* ちょうど 1 行下 */
  white-space: nowrap;
}
.c-view-more--white { color: #fff; gap: var(--space-y-16) var(--space-x-16); }

/* --- c-back-to-list ---------------------------------------------------- */
/* 一覧へ戻る導線。c-view-more 一式の上にアイコンだけを差し替えて使うので、
   箱・寸法・再生規則は .c-view-more__arrow をそのまま継承する。
   ここで指定するのは mask の絵柄と、進行方向（戻るので左向き）だけ */
.c-back-to-list__icon::before,
.c-back-to-list__icon::after {
  -webkit-mask-image: url("../img/icon-back-to-list.svg");
  mask-image: url("../img/icon-back-to-list.svg");
}
/* 下に控える複製。c-view-more は右から左へ抜けるが、こちらは逆向き */
.c-back-to-list__icon::after {
  transform: translateX(50%);
}

/* --- c-external-link --------------------------------------------------- */
/* 外部サイトへ出る導線。c-view-more 一式の上にアイコンだけを差し替えて使うので、
   箱・寸法・再生規則は .c-view-more__arrow をそのまま継承する（c-back-to-list と
   同じ作り）。ここで指定するのは mask の絵柄と、進行方向（右斜め上）だけ。
   絵柄はナビの矢印（.c-nav-external__icon）と同じファイルを見る */
.c-external-link__icon::before,
.c-external-link__icon::after {
  -webkit-mask-image: url("../img/icon-external.svg");
  mask-image: url("../img/icon-external.svg");
}
/* 下に控える複製。矢印が右斜め上を向くので、抜ける先も控える位置も斜めにする */
.c-external-link__icon::after {
  transform: translate(-50%, 50%);
}

/* --- c-load-more ------------------------------------------------------- */
/* 一覧の続きをその場で展開する。遷移しないので a ではなく button だが、
   c-view-more 一式の上にアイコンだけを差し替えて使うので、箱・寸法・
   再生規則は .c-view-more__arrow をそのまま継承する（c-back-to-list と同じ
   作り）。text-swap-hover.js は .c-view-more を決め打ちで拾うため、
   このクラスを単独で使わず必ず c-view-more と併記すること。
   ここで指定するのは mask の絵柄と、進行方向（下向き）だけ */
.c-load-more__icon::before,
.c-load-more__icon::after {
  -webkit-mask-image: url("../img/icon-load-more.svg");
  mask-image: url("../img/icon-load-more.svg");
}
/* 下に控える複製。c-view-more は横へ抜けるが、矢印が下向きなので縦にする */
.c-load-more__icon::after {
  transform: translateY(-50%);
}

/* 押し切ったら消す。c-view-more の display が UA の [hidden] より強く、
   属性を付けただけでは残ってしまう（flex アイテムなので display: flex に
   なる）。hidden は lower-page.css の :has() でも見ているので外せない */
.c-load-more[hidden] {
  display: none;
}

/* LOAD MORE を置く箱。NEWS一覧とWORKS一覧で同じ位置・同じ上余白に置くので
   ページ固有CSSへ複製しない。上余白は一覧の行間ではなく、BACK to LIST など
   ページ末尾の導線と同じ 120 で揃える（一覧ごとに変えると同じ部品の間隔が
   ページで食い違う）。列指定のような配置の差分だけをページ側に持たせる。
   SPでは PC 160 の落とし先である --space-y-96 へ落とす（下のSPブロック）*/
.c-load-more-box {
  display: flex;
  justify-content: center;
  margin-top: var(--space-y-120);
}

/* 押し切ってボタンが消えた後は、空になった箱の上余白まで残さない。
   ボタンだけが hidden になり箱は残るので、これが無いと最終行の下に
   使われない余白が積まれる（本文下の間隔は c-lower-layout が受け持つ） */
.c-load-more-box:has(.c-load-more[hidden]) {
  margin-top: 0;
}

/* 表示件数を超えていて、まだ展開されていない行／カード。
   絞り込みの is-hidden とは別の軸なのでクラスを分ける
   （絞り込みで外れ、かつ未展開、という状態が同時に成立する） */
.c-works-item.is-beyond,
.c-news-item.is-beyond {
  display: none;
}

/* 入場の動き（is-entering）は各コンポーネント側に置く。works-card.css と
   news-item.css。いま値は同じだが、カードと行で別々に変える前提のため
   共有しない。付けるのは works-slider.js と load-more.js の 2 つで、
   どちらも「表示になった要素に is-entering を付ける」までしか関与しない */

/* ==========================================================================
   c-swap — ホバーで文字が上へ抜け、下から同じ文字が出て入れ替わる

   c-view-more の文字と同じ動き。あちらは矢印を併せ持つので専用のラッパーで
   隠す箱を作るが、こちらは中身が文字だけなので a 自身を箱として使う。

   使い方:
     <a class="c-swap" href="..." data-text="TEXT"><span class="c-swap__in">TEXT</span></a>
   ========================================================================== */
.c-swap {
  /* inline のままでは overflow が効かないので block にする。縦並びの flex
     コンテナ内では横いっぱいに伸びてクリック範囲が文字より広くなるため、
     中身の幅に固定して防ぐ（c-view-more と同じ理由） */
  display: block;
  width: fit-content;
  position: relative;   /* 複製（::after）の位置の基準 */
  overflow: hidden;     /* 上へ抜ける文字と、下に控える複製を隠す */
  /* 複製（::after）が nowrap の1行なので、実テキストも1行に揃える。
     折り返すと2つの文字の行数が食い違い、差し替えの位置がずれる */
  white-space: nowrap;
}
/* 現在の文字（実テキスト）。上へ抜けながら薄くなる */
.c-swap__in {
  display: block;
}
/* 下に控える複製。data-text に同じ文字を持たせ、DOM 上の文字は増やさない。
   実テキストと兄弟（親の ::after）にしてあるので、opacity のグループに
   巻き込まれず、2 つの文字の透明度を別々に動かせる */
.c-swap::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(100%);   /* ちょうど 1 行下 */
  white-space: nowrap;
}

/* ==========================================================================
   c-nav-external — ナビの外部リンクに付く右上向き矢印

   c-swap の modifier。矢印は a の中の実要素として置く。c-swap::after は
   入れ替え用の複製テキストが使っているので、そちらへは足せない。

   絵柄は Material Symbols の arrow_outward（assets/img/icon-external.svg）。
   寸法と色を a 基準の em / currentColor で取るため、フッター（24px・ブランド色）と
   GNAV（56px・白）のどちらも指定を足さずに追随する。
   ========================================================================== */
.c-nav-external {
  /* c-swap の display: block を上書きする。矢印を文字と同じ行へ載せないと、
     ブロックのまま次の行へ落ちて a の overflow: hidden に切られる */
  display: flex;
  align-items: baseline;
  /* 可変トークンにしない。矢印と文字が離れない最小値としての 4px */
  gap: 4px;
}
/* 文字の入れ替えには乗せない。矢印はその場に留まる */
.c-nav-external__icon {
  flex-shrink: 0;
  /* 基本は文字サイズと同じ大きさ。GNAV（--fs-56）では文字に対して過大になるので
     頭打ちを入れる。上限も可変トークンなので、幅による縮小はそのまま効く */
  width: min(1em, var(--fs-32));
  height: min(1em, var(--fs-32));
  /* 矢印の上端を、文字のキャップ上端へ揃える。

     箱の上端で揃えると、絵柄が箱の中に持つ余白（Material の 960 グリッドで
     上 200）のぶんだけ文字より下がる。ずれは箱の大きさに比例するので、
     文字が大きいほど実寸で開いていく。

     親の align-items: baseline で箱の下端がベースラインに載るため、そこから
     矢印上端までは 760/960 × 箱（icon-external.svg の最上点 y=-760）。
     文字のキャップ上端はベースラインから 1cap なので、差を top で詰める。
     フォントのメトリクスは cap 単位へ委ね、値を書き写さない。

     margin ではなく top を使う。flex の baseline は空の箱ではボーダーボックスから
     合成されるため、margin-bottom では動かない（Chrome で実測）*/
  position: relative;
  top: calc(760 / 960 * min(1em, var(--fs-32)) - 1cap);
  background-color: currentColor;
  -webkit-mask: url("../img/icon-external.svg") center / contain no-repeat;
  mask: url("../img/icon-external.svg") center / contain no-repeat;
}

/* ==========================================================================
   text swap motion

   hover 自体ではなく、text-swap-hover.js が再生中だけ付ける状態classで
   一方向に再生する。終了時は同じ文字が重なった状態でclassを外すため、
   見た目を変えずに初期位置へ戻せる。hover out には動きを割り当てない。
   ========================================================================== */
@keyframes c-text-swap-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-100%); }
}

@keyframes c-text-swap-in {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes c-view-more-arrow-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(50%); }
}

@keyframes c-view-more-arrow-in {
  from { opacity: 0; transform: translateX(-50%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* c-back-to-list は左向きなので、抜ける先と控える位置を左右反転させる。
   時間・イージング・移動量は c-view-more と同じ */
@keyframes c-back-to-list-arrow-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-50%); }
}

@keyframes c-back-to-list-arrow-in {
  from { opacity: 0; transform: translateX(50%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* c-load-more は下向きなので、抜ける先と控える位置を縦にする。
   時間・イージング・移動量は c-view-more と同じ */
@keyframes c-load-more-arrow-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(50%); }
}

@keyframes c-load-more-arrow-in {
  from { opacity: 0; transform: translateY(-50%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* c-external-link は右斜め上向きなので、抜ける先と控える位置を斜めにする。
   時間・イージング・移動量は c-view-more と同じ */
@keyframes c-external-link-arrow-out {
  from { opacity: 1; transform: translate(0, 0); }
  to   { opacity: 0; transform: translate(50%, -50%); }
}

@keyframes c-external-link-arrow-in {
  from { opacity: 0; transform: translate(-50%, 50%); }
  to   { opacity: 1; transform: translate(0, 0); }
}

.is-text-swap-playing .c-view-more__text-in,
.c-swap.is-text-swap-playing .c-swap__in {
  animation: c-text-swap-out var(--dur) var(--ease) both;
}

.is-text-swap-playing .c-view-more__text::after,
.c-swap.is-text-swap-playing::after {
  animation: c-text-swap-in var(--dur) var(--ease) both;
}

.is-text-swap-playing .c-view-more__arrow::before {
  animation: c-view-more-arrow-out var(--dur) var(--ease) both;
}

.is-text-swap-playing .c-view-more__arrow::after {
  animation: c-view-more-arrow-in var(--dur) var(--ease) both;
}

.is-text-swap-playing .c-back-to-list__icon::before {
  animation-name: c-back-to-list-arrow-out;
}

.is-text-swap-playing .c-back-to-list__icon::after {
  animation-name: c-back-to-list-arrow-in;
}

.is-text-swap-playing .c-load-more__icon::before {
  animation-name: c-load-more-arrow-out;
}

.is-text-swap-playing .c-load-more__icon::after {
  animation-name: c-load-more-arrow-in;
}

.is-text-swap-playing .c-external-link__icon::before {
  animation-name: c-external-link-arrow-out;
}

.is-text-swap-playing .c-external-link__icon::after {
  animation-name: c-external-link-arrow-in;
}

/* ==========================================================================
   c-chip — カテゴリのピル（works のフィルタ / カード内タグ）
   Figma: 角丸32px・地 rgba(0, 0, 0, 0.06)・先頭に 6px の丸
   ========================================================================== */
.c-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-y-8) var(--space-x-8);
  border-radius: 32px;
  background-color: rgba(0, 0, 0, 0.06);
  font-family: var(--font-jp);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
  font-feature-settings: "palt" 1;
}
/* 丸は文字と一体の図形なので em（Figma 6px）。文字サイズが違う modifier では
   6px 相当になる倍率を個別に指定する（filter 6/16 / tag 6/12）。
   サイト内の丸は全て「calc(6em / 親のpx) + border-radius: 50% + --color-brand」で
   書く（footer の Google Maps、about の地図・詳細リンクも同じ）。SVGは使わない */
.c-chip::before {
  content: "";
  flex-shrink: 0;
  width: calc(6em / 16);
  height: calc(6em / 16);
  border-radius: 50%;
  background-color: var(--color-brand);
}

/* フィルタ（未選択は地なし＋40%） */
.c-chip--filter {
  /* チップ単位ではつぶさず、親幅を超える文言だけ内部で折り返させる */
  flex-shrink: 0;
  max-width: 100%;
  padding: 0.5em 1.25em 0.5em 1em;   /* Figma 8/20/8/16 を 16px 基準で em 化 */
  font-size: var(--fs-16);
  letter-spacing: 0.1em;
  background-color: transparent;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.c-chip--filter::before {
  background-color: rgba(0, 0, 0, 0.3);
}
.c-chip--filter.is-active {
  background-color: rgba(0, 0, 0, 0.06);
  opacity: 1;
}
.c-chip--filter.is-active::before {
  background-color: var(--color-brand);
}
@media (hover: hover) {
  .c-chip--filter:hover {
    opacity: 1;
  }
}

/* カード内タグ */
.c-chip--tag {
  padding: 0.5em calc(16em / 12) 0.5em 1em; /* Figma 6/16/6/12 を 12px 基準で em 化 */
  font-size: var(--fs-12);
  letter-spacing: 0.1em;
}
.c-chip--tag::before { width: calc(6em / 12); height: calc(6em / 12); }

/* ==========================================================================
   c-band-next / c-band-contact（index・下層で繰り返す帯。高さは可変）
   ========================================================================== */
.c-band {
  position: relative;
  height: var(--space-y-600);
  overflow: hidden;
  color: #fff;
}
.c-band__texture {
  position: absolute;
  inset: 0;
  background-image: url("../img/texture.jpg");
  background-repeat: repeat;
  background-size: var(--texture-size);
  mix-blend-mode: overlay;
  opacity: var(--texture-opacity);
  pointer-events: none;
}
/* 放射シンボル（Figma contact: w1289.5×h1490.98 / 帯の中央）。
   高さを帯の高さ基準で持つことで、帯が縮んでも「見えている範囲」の比率が
   変わらない（1490.98 / 600 = 248.4967%）。幅は縦横比に任せる */
/* 位置決めはこの箱が持ち、中身の img は演出用に空けておく
   （transform を JS で動かすと、ここの translate(-50%,-50%) が壊れるため。
   現在この星に演出は付いていないが、付けるときは img 側へ載せる） */
.c-band__star {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 248.4967%;
  width: fit-content;   /* 中身の img の幅に合わせる */
  max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
/* 濃さは img 側。星の SVG は不透明で、使う側ごとに決める */
.c-band__star img {
  display: block; height: 100%; width: auto; max-width: none; opacity: 0.05;
  transition: opacity var(--dur) var(--ease);
}

/* --- next ---------------------------------------------------------------
   Figma（1920 時）: 帯 1920×600、コンテンツ域は 1800×440（上下 80）。
   高さ・余白とも可変トークンなので、狭い画面ではこの比率のまま縮む。
   ブロックはセル全体を占める <a> にして、領域すべてをクリック可能にする */
.c-band-next {
  background-color: #4d637d;
  --band-dash: rgba(255, 255, 255, 0.2);   /* 仕切り線の色（Figma: 白 20%） */
}

/* セルは帯を左右半分ずつ・上下半分ずつに割り、余白は各リンクの内側に持たせる
   （＝帯のどの位置をクリックしてもいずれかのリンクに当たる） */
.c-band-next__grid {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.c-band-next__block {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
}
/* セル内での位置合わせ（Figma のコンテンツ域: 左右 60 / 上下は下記のとおり）。
   modifier はセルの位置を指す。リンク先はページごとに入れ替わるので、
   ページ名では名付けない（--main が左の2行ぶち抜き、--upper / --lower が
   右カラムの上下）。上下の余白が鏡像なのは「帯の外側の辺は80、右カラムが
   接する内側の辺は60」という位置の規則だから */
.c-band-next__block--main  { grid-row: 1 / span 2; gap: var(--space-y-32) var(--space-x-32); padding: var(--space-y-80) var(--space-side); }
.c-band-next__block--upper { padding: var(--space-y-80) var(--space-side) var(--space-y-60); justify-content: space-between; }
.c-band-next__block--lower { padding: var(--space-y-60) var(--space-side) var(--space-y-80); justify-content: space-between; }

.c-band-next__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.c-band-next__label {
  font-family: var(--font-en); font-weight: 600; font-size: var(--fs-28);
  letter-spacing: 0.07em; line-height: 1; color: rgba(255, 255, 255, 0.3);
}
.c-band-next__en { font-family: var(--font-en); font-weight: 600; letter-spacing: 0.03em; line-height: 1; color: #fff; }
.c-band-next__en--lg { font-size: var(--fs-60); }
.c-band-next__en--md { font-size: var(--fs-48); }
.c-band-next__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-y-24) var(--space-x-24); }
.c-band-next__jp {
  font-family: var(--font-mincho-m); font-weight: normal; font-size: var(--fs-24);
  line-height: 1.5; letter-spacing: 0.15em; color: #fff;
}

/* 仕切り線（Figma: 1px / 白 20% / 破線 4-4）
   帯の座標ではなく「そのブロックの縁」として描く。ブロックに追従するので、
   レスポンシブで積み方が変わっても出す辺を変えるだけで済む。
   CSS の border: dashed は破線比率がブラウザ依存のため gradient で 4-4 を再現 */
.c-band-next__block--main::after,
.c-band-next__block--upper::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
/* 左ブロックの右辺 = カラム間の縦線 */
.c-band-next__block--main::after {
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background-image: repeating-linear-gradient(
    to bottom, var(--band-dash) 0 4px, transparent 4px 8px
  );
}
/* 右カラム上セルの下辺 = 右カラム内の横線 */
.c-band-next__block--upper::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right, var(--band-dash) 0 4px, transparent 4px 8px
  );
}

/* --- contact ---
   帯そのものがリンク。左右の余白（--space-side）はリンク内側に持たせ、
   帯のどこを押してもリンクに当たるようにする */
.c-band-contact { background-color: var(--color-brand); }
.c-band-contact__link {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding-inline: var(--space-side);
  color: inherit;
}
/* 横並びのとき、タイトルの箱は常に帯の半分（flex: 1 1 0 が2つ）。
   1280pxで箱598pxに対して文字471pxとなり、リードとの間隔は128px。
   これ以上狭いとタイトルがリードへぶつかるので、1279px以下は縦積みへ切り替える */
.c-band-contact__title {
  flex: 1 1 0; min-width: 0;
  font-family: var(--font-en); font-weight: 600; letter-spacing: 0.03em; font-size: var(--fs-120); line-height: 1; color: #fff;
}
.c-band-contact__right {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-y-24) var(--space-x-24);
}
.c-band-contact__lead {
  font-family: var(--font-mincho-m); font-weight: normal; font-size: var(--fs-24);
  line-height: 2; letter-spacing: 0.15em; color: #fff;
}
/* c-view-more（--white 付き）が本体。この帯だけの差分をここで上書きする。
   帯の右カラムの flex アイテムなので、縮まないよう flex-shrink: 0 を保つ */
.c-band-contact__view {
  flex-shrink: 0;
  font-size: var(--fs-28);
}
/* 帯そのものがリンクなので、ホバーの起点は帯で取る。星は pointer-events: none
   で当たり判定を持たず、DOM 上もリンクより前にあるため、リンク側からは指せない。
   ホバーだけ (hover: hover) で包む（docs/sp-strategy.md 決定8） */
@media (hover: hover) {
  .c-band-contact:hover .c-band__star img {
    opacity: 0.075;
  }
}

/* --- 中間層 + SP 共通（max-width: 1279px）---------------------------------
   contact帯だけ、中間層の境目を1280pxに取る（決定2の「1024 or 1280」）。
   PCの横並びは、タイトルとリードが帯の半分ずつを分け合う持ち方なので、
   1280pxを下回るとタイトルがリードへぶつかる。1279px以下は
   Figma SP（431:3007）の縦積み・左揃えへ切り替える。
   リードとVIEW MOREの横並び（__right）は中間層では維持し、SPだけ縦へ落とす。
   帯の高さは --space-y-600 のまま。内容を上下中央に置いて余白を分ける。
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .c-band-contact__link {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-y-60) var(--space-x-60);
    padding-block: var(--space-y-48);
  }

  .c-band-contact__right {
    flex: 0 0 auto;
    width: 100%;
  }

  /* flex: 1 1 0 のままだと縦方向に伸びて箱が3行分の高さになるので、内容高さに戻す */
  .c-band-contact__title {
    flex: 0 0 auto;
  }
}

/* --- SP（Figma 431:2967 next / 431:3007 contact）--------------------------
   帯の高さは固定（--space-y-600）をやめ、内容で伸ばす。SPは1カラムになり
   行数が増えるため、PCの「高さを決めて中で配り直す」持ち方が成立しない。
   仕切り線はブロックの縁として描いてあるので、出す辺を変えるだけで済む。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .c-load-more-box {
    margin-top: var(--space-y-96);
  }

  .c-band {
    height: auto;
  }

  /* 3セルを縦1列にする。--main の grid-row: 1 / span 2 も解除する */
  .c-band-next__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .c-band-next__block--main {
    grid-row: auto;
    gap: var(--space-y-16) var(--space-x-16);
    padding: var(--space-y-36) var(--space-side);
  }

  /* 高さが内容で決まるので、PCの justify-content: space-between では
     英字タイトルと日本語＋VIEW MORE の行が詰まる */
  .c-band-next__block--upper,
  .c-band-next__block--lower {
    gap: var(--space-y-60) var(--space-x-60);
    padding: var(--space-y-36) var(--space-side);
  }

  /* 高さが内容で決まるので space-between だけでは間隔が出ない */
  .c-band-next__body {
    gap: var(--space-y-60) var(--space-x-60);
  }

  .c-band-next__jp {
    font-size: var(--fs-20);
  }

  /* 縦1列では、カラム間の縦線ではなくブロックの下辺が仕切りになる */
  .c-band-next__block--main::after {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 1px;
    background-image: repeating-linear-gradient(
      to right, var(--band-dash) 0 4px, transparent 4px 8px
    );
  }

  /* --- contact ---
     縦積みと左揃えは中間層と共通（下の max-width: 1023px）。
     ここはSP固有の差分だけを持つ。
     Figma 48px。--fs-120 はSP実寸61.56pxで内幅に対して大きすぎる
     （docs/sp-strategy.md 決定1の★4種） */
  .c-band-contact__link {
    gap: var(--space-y-32) var(--space-x-32);
    padding-block: var(--space-y-96);
  }

  .c-band-contact__title {
    font-size: var(--fs-100);
  }

  .c-band-contact__lead {
    font-size: var(--fs-20);
  }

  /* SPだけリードとVIEW MOREを縦へ落とす。中間層は横並びのまま */
  .c-band-contact__right {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-y-36) var(--space-x-36);
  }
}