/* base.css — リセット＋ベーススタイル（tokens.css の変数を参照）
   ※ 余白・サイズ・色は数値直書きせず var() を使う */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* --- 比率縮小レスポンシブ ---------------------------------------------------
   rem参照の全寸法（余白・サイズ・タイポ）を html の font-size 一箇所で一括縮小する。
   → 各コンポーネントCSSは生pxを使わず rem（トークン）で書くこと。
     生pxはここで縮まらず、比率追従から取り残されて崩れる。
     例外はスケールさせない線幅（border: 1px）や背景パターン等ごく一部のみ。

   フェーズ1（PC→タブレット）: 1280px 〜 768px
     Figmaキャンバス幅は 1440px（--design-width）だが、スケール基準幅はそこではなく
     コンテンツ幅 1200px（--container-width）＋ 左右ガター 40px×2 ＝ 1280px とする。
     コンテナは max-width + margin-inline: auto の可変で、1440〜1281px は
     ガターが広がるだけで組み替え不要（キャンバス外のブリード装飾は端でクリップ）。
     → 1281px 以上では 1rem = 16px の原寸を保ち、ノートPCで文字を縮めない。
     1280px 以下は font-size = 100vw / 80（＝1280pxで16px）で比率縮小。
     下限 calc(1rem * 768 / 1280) = 9.6px はフェーズ1の下端 768px でちょうど当たるため、
     1280→768px は下限に触れず比率維持で縮小しきる。
     ※ html の font-size 内の rem は初期値16pxを指す（自己参照にならない）。

   フェーズ2（SP）: 767px 以下
     rem基準を SP基準幅 390px = 14.222px に切替える（本文 --font-size-body 1rem が
     SPで 14.222px 実寸になる基準。390 / 14.222 = 27.4222。390px超は 14.222px で頭打ち）。
     レイアウトはシングルカラム（各コンポーネントCSS末尾の 767px 以下の上書き）。
     ※ SPフレーム未提供のため基準幅390pxは暫定。SPデザイン確定後に見直すこと。

   メディアクエリの条件値は html の font-size に影響されないため px で書く。 */
@media (max-width: 1280px) {
  html { font-size: max(calc(100vw / 80), calc(1rem * 768 / 1280)); }
}
@media (max-width: 767px) {
  html { font-size: min(0.889rem, calc(100vw / 27.4222)); }
}

/* ブリード装飾（スライダーの見切れ等）をビューポート端でクリップし、横スクロールを出さない。
   html は hidden：iPad Safari はルートの clip では横パンを止められないため。
   body は clip のまま（スクロールコンテナを作らず、sticky を壊さない）。 */
html { overflow-x: hidden; }
body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-white);
}

/* 見出し・段落の既定 margin は置かない。
   Figma は全て auto-layout の gap で間隔を作っており、素の margin が乗ると
   各セクションの高さが Figma とズレる（TOPで p-recruit-cta 等に +16px の誤差が出ていた）。
   間隔は各コンポーネントの gap / padding で作ること。 */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

p { margin: 0; }

a { color: var(--color-primary); }

.text-xl {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
.text-large {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
.lead { color: var(--color-gray-dark); }

.container {
  max-width: 60rem; /* 960px — rem で持ち、比率縮小に追従させる */
  margin-inline: auto;
  padding: var(--space-48) var(--space-24);
}

/* section への一律 margin は置かない。
   各 p-* セクションが Figma 実測の padding を自前で持っており、素の margin が乗ると
   セクション間が Figma より広がる（TOPで実測: 各セクション間に 48px の余分が発生）。
   セクション同士の間隔は、束ねる側（例: pages/front-page.css の .p-section）で gap を指定する。 */

/* --------------------------------------------------------------------------
   c-corner-frame — 角を残して辺を分割する枠線（Figma実測から導いた共通ロジック）
   等間隔の破線ではなく、「辺ごとに N 等分し、角側から 線/空き を並べる」パターン。
   角のR部分は常に線。直線部を N 等分した1単位を u とすると、辺の並びは
     0.5u 線 →（1u 空き → 1u 線）×(N/2 - 1) → 1u 空き → 0.5u 線
   つまり N=2 なら「25% 線 / 50% 空き / 25% 線」＝四隅だけ、
        N=4 なら辺の中央にも線が1本入る、N=8 なら3本入る。
   Figma実測の N（辺の実寸 ÷ 約118px を偶数に丸めた値）:
     p-locations__card / c-feature-card      上下 2 ・左右 4
     p-recruit-cta__list-item                上下 2 ・左右 2
     p-recruit-cta__feature                  上下 6 ・左右 2（Figma実測は上下8＝中間3本だが、指示により中間2本）
   すべて比率で組むため、テキスト量で高さが変わっても rem比率縮小でも崩れない。
   使い方: 親要素に position:relative を与え、
     <span class="c-corner-frame" aria-hidden="true">
       <span class="c-corner-frame__corner c-corner-frame__corner--tl"></span> …tr/bl/br
     </span>
   を置き、必要なら親要素側で --corner-frame-units-x / -y を指定する（既定値はどちらも2）
   ※ 既定値は var() のフォールバックで持つ。.c-corner-frame 側で宣言すると
     親要素の指定を打ち消してしまうため、ここでは宣言しない。
   （上下辺の線は ::before、左右辺の線は ::after が描く）。
   -------------------------------------------------------------------------- */
.c-corner-frame {
  --corner-frame-radius: var(--radius-xl);

  /* 辺の分割パターン。線そのものではなく、border で引いた線を「残す/抜く」マスクとして使う。
     1タイル = 2u。タイル内は「前25%残す / 中50%抜く / 後25%残す」で、
     隣のタイルと合わさって 1u の線・1u の空きになる。
     マスクはアルファで効くため、不透明な色なら何でもよい（トークン外の値を書かないため
     --color-primary を流用している。色の指定ではない）。 */
  --corner-frame-dash-x: linear-gradient(to right, var(--color-primary) 0 25%, transparent 25% 75%, var(--color-primary) 75% 100%);
  --corner-frame-dash-y: linear-gradient(to bottom, var(--color-primary) 0 25%, transparent 25% 75%, var(--color-primary) 75% 100%);

  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 辺の線は「border で引いて、分割パターンでマスクして抜く」方式で描く。
   四隅（.c-corner-frame__corner）も border 描画なので、線幅→デバイスピクセルの
   丸め方が角と辺で完全に一致する。
   ※ 背景グラデーションで辺を描くと、border だけがデバイスピクセルに丸められる一方
     background は丸められないため、DPRが1や1.25/1.5等の端末で「角丸の部分だけ細い」
     という見え方になる（1.5px の border が1デバイスpxに丸められるのが典型）。
   マスクの切り口は直線部のみで曲線に掛からないため、抜き位置のAAは見た目に出ない。 */

/* 上下辺（角のRを除いた直線部だけを覆う） */
.c-corner-frame::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--corner-frame-radius);
  right: var(--corner-frame-radius);
  border-top: var(--border-width-medium) solid var(--color-primary);
  border-bottom: var(--border-width-medium) solid var(--color-primary);
  -webkit-mask-image: var(--corner-frame-dash-x);
  mask-image: var(--corner-frame-dash-x);
  -webkit-mask-size: calc(200% / var(--corner-frame-units-x, 2)) 100%;
  mask-size: calc(200% / var(--corner-frame-units-x, 2)) 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

/* 左右辺（角のRを除いた直線部だけを覆う） */
.c-corner-frame::after {
  content: "";
  position: absolute;
  top: var(--corner-frame-radius);
  bottom: var(--corner-frame-radius);
  left: 0;
  right: 0;
  border-left: var(--border-width-medium) solid var(--color-primary);
  border-right: var(--border-width-medium) solid var(--color-primary);
  -webkit-mask-image: var(--corner-frame-dash-y);
  mask-image: var(--corner-frame-dash-y);
  -webkit-mask-size: 100% calc(200% / var(--corner-frame-units-y, 2));
  mask-size: 100% calc(200% / var(--corner-frame-units-y, 2));
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
}

/* 四隅のR（常に線） */
.c-corner-frame__corner {
  position: absolute;
  width: var(--corner-frame-radius);
  height: var(--corner-frame-radius);
  border: 0 solid var(--color-primary);
}

.c-corner-frame__corner--tl {
  top: 0;
  left: 0;
  border-top-width: var(--border-width-medium);
  border-left-width: var(--border-width-medium);
  border-top-left-radius: var(--corner-frame-radius);
}

.c-corner-frame__corner--tr {
  top: 0;
  right: 0;
  border-top-width: var(--border-width-medium);
  border-right-width: var(--border-width-medium);
  border-top-right-radius: var(--corner-frame-radius);
}

.c-corner-frame__corner--bl {
  bottom: 0;
  left: 0;
  border-bottom-width: var(--border-width-medium);
  border-left-width: var(--border-width-medium);
  border-bottom-left-radius: var(--corner-frame-radius);
}

.c-corner-frame__corner--br {
  bottom: 0;
  right: 0;
  border-bottom-width: var(--border-width-medium);
  border-right-width: var(--border-width-medium);
  border-bottom-right-radius: var(--corner-frame-radius);
}

/* --------------------------------------------------------------------------
   u-trim-top — 行送りの上側の余白（half-leading）を打ち消すユーティリティ
   line-height が 1 を超えると、行ボックスは文字の上下に (lh - 1) / 2 em ずつの
   余白を持つ。見出しの「文字の上端」をブロック上端に揃えたいときにこれを打ち消す。
   量は要素のフォントサイズ基準なので em で持つ（トークンのremだと比率がずれる）。
   line-height が --line-height-body 以外の要素は --trim-line-height で上書きする。
   例: .p-foo__title { --trim-line-height: var(--line-height-heading); }
   ※ クラスを2回重ねて詳細度(0,2,0)にしている。base.css は components より先に読まれるため、
     各コンポーネントの `margin: 0`（0,1,0）に後勝ちで打ち消されるのを防ぐ。
   -------------------------------------------------------------------------- */
.u-trim-top.u-trim-top {
  margin-top: calc((1 - var(--trim-line-height, var(--line-height-body))) * 0.5em);
}

/* フレーズ単位の折り返し（PHP側は ic_phrases() で出力）。
   inline-block なので内部では折り返さず、フレーズの境目だけで改行される。 */
.u-phrase {
  display: inline-block;
}

/* --------------------------------------------------------------------------
   c-rail — 縦書きラベル + 縦罫線の装飾レール（p-content / p-feature 共通）
   罫線は currentColor なので濃色背景のセクションでも親の color を継承する。
   SPでは「読ませる要素」ではなく背景装飾として扱い、小さく・薄くする。
   レールの配置（絶対配置の位置決め）は使う側のCSSが持つ。
   -------------------------------------------------------------------------- */
.c-rail {
  width: var(--space-64); /* 64px（レール幅 = ラベルの行送り） */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

.c-rail__label {
  margin: 0;
  writing-mode: vertical-rl; /* 90°回転（英字が右倒し・上→下に読む） */
  font-size: var(--font-size-h1); /* 42.667px */
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading); /* Figma: 1.5 */
  white-space: nowrap; /* 縦書きなので折り返さない（回転テキストの1行維持） */
}

.c-rail__line {
  flex: 1;
  width: var(--border-width-medium); /* Figma: stroke 1.5px */
  background: currentColor;
}

@media (max-width: 767px) {
  .c-rail {
    width: auto; /* 縦書きテキストの幅（＝font-size）に合わせて詰める */
    gap: var(--space-16);
  }

  .c-rail__label {
    font-size: var(--font-size-h5);
  }

  .c-rail__label,
  .c-rail__line {
    opacity: 0.15;
  }
}

/* SPは面積が小さく24pxのRだと丸みが強く出るため、枠線とカードのRを1段弱める。
   .c-corner-frame の描画（四隅のR + 辺の分割線）は --corner-frame-radius 基準なので、
   カード側の border-radius と同じ値に揃えること。 */
@media (max-width: 767px) {
  .c-corner-frame {
    --corner-frame-radius: var(--radius-lg); /* 24px → 16px */
  }
}

/* SPだけで改行する <br>（PHP側は ic_sp_break() で出力）。PCでは無効化する。 */
.u-br-sp {
  display: none;
}

@media (max-width: 767px) {
  .u-br-sp {
    display: inline;
  }

  /* PCだけで改行する <br>。SPでは無効化し、前後の半角スペースで自然折返しに任せる。 */
  .u-br-pc {
    display: none;
  }
}

.swatches { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.swatch {
  width: var(--space-96);
  height: var(--space-64);
  border: 1px solid var(--color-gray);
  display: flex;
  align-items: flex-end;
  padding: var(--space-8);
  font-size: var(--font-size-h6);
  color: var(--color-white);
}