/* =====================================================================
   page.css — 下層ページ共通（design/Sun Creative_update.xd 準拠）
   PC は 1920px 基準の vw 比例（value / 19.2 = vw）、SP は 390px 基準（value / 3.9）。
   対応アートボード:
     事業内容_個人 / 事業内容_法人 / 会社概要 / 制作実績 （PC・SP）
   仕様の実測値は design/xd-spec/*.txt を参照。

   前提: body に page-top2 と page-sub を併記する。
     page-top2 … top.css のトークン（--sky/--mg/--serif-en 等）とヘッダー・
                 フッター・右端レール・Contact帯・ボタンの共通部品を継承するため。
                 top.css の TOP 固有スタイルはすべて .t2-* のセクション用クラスに
                 紐づくので、下層ページのマークアップには一致しない。
     page-sub  … 本ファイルのスコープ。
   ===================================================================== */

body.page-sub {
  --row-h:      31.25vw;   /* 行の高さ 600px */
  --row-gap:    5.208vw;   /* 行間 100px */
  --panel-pad:  2.604vw;   /* 右パネルの内側余白 50px */
  --grid-step:  1.042vw;   /* 背景グリッド 20px */
}

/* =====================================================================
   ヘッド（パンくず帯 + ヒーロー）
   XD: 背景は黒、その上に白1px・20pxピッチのグリッド（XD仕様は不透明度0.30、実装は0.2に調整）
   グリッドはヘッダー帯の下から（XD実測: PC y103 / SP y109.5、ロゴより上には掛からない）。
   ::before に分離し、SPではヘッダー高さ分だけ top をずらしてヘッダーの裏に回り込まないようにする。
   ===================================================================== */
.sub-head {
  position: relative;
  background-color: #000;
}
.sub-head::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,  rgba(255,255,255,.2) 0 1px, transparent 1px var(--grid-step)),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.2) 0 1px, transparent 1px var(--grid-step));
}

/* パンくず帯：XD y=103–153（高さ50px / 黒50%） */
.sub-breadcrumb {
  height: 2.604vw;
  display: flex;
  align-items: center;
  background: rgba(0,0,0,.5);
}
.sub-breadcrumb__inner {
  padding-inline: var(--mg);
  font-size: .729vw;              /* 14px Medium */
  font-weight: 500;
  letter-spacing: .15em;
  color: #fff;
}
.sub-breadcrumb a { color: inherit; text-decoration: none; }
.sub-breadcrumb a:hover { text-decoration: underline; }
.sub-breadcrumb__sep { margin-inline: .4em; }

/* ヒーロー：XD y=153–438 */
.sub-hero {
  padding-inline: var(--mg);
  padding-block: 4.53vw 3.8vw;
}
.sub-hero__label {                /* Midashi(EN)：Times New Roman/25/Bold/文字間700 */
  display: block;
  font-family: var(--serif-en);
  font-size: 1.302vw;
  font-weight: 700;
  letter-spacing: .7em;
  line-height: 1;
  color: #fff;
}
.sub-hero__title {                /* 見出し（大）：Noto Sans JP/50/Bold/#40A9FA */
  font-family: var(--gothic);
  font-size: 2.604vw;
  font-weight: 700;
  letter-spacing: .3em;
  line-height: 1.3;
  color: var(--sky);
  margin: .3vw 0 .35vw;
}
.sub-hero__lead {                 /* 18px Regular / 行間30 */
  font-size: .938vw;
  line-height: 1.667;
  color: #fff;
  max-width: 45.469vw;            /* XD テキストフレーム幅 873px */
}

/* =====================================================================
   事業ブロック（左右2分割・画像とパネルが交互）
   XD: 画像 960x600 / パネル 960x600、行ピッチ 700px（＝600 + 100）
   ===================================================================== */
.svc-rows { background: #000; }

.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: var(--row-h);
  margin-bottom: var(--row-gap);
}

.svc-row__media {
  position: relative;
  overflow: hidden;
  min-height: var(--row-h);
}
/* 絶対配置にして画像の縦横比が行の高さを押し広げないようにする
   （親は min-height しか持たないため height:100% が auto に解決されてしまう） */
.svc-row__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 巨大連番：Times New Roman/157/Italic/白。画像の内側の端・下寄せ */
.svc-row__num {
  position: absolute;
  bottom: 0;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 8.177vw;             /* 157px */
  line-height: 1;
  letter-spacing: .05em;
  color: #fff;
  pointer-events: none;
  user-select: none;
}

.svc-row__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--row-h);
}
.svc-row__body { max-width: 33.594vw; }   /* XD テキストフレーム幅 645px */

/* 既定（画像=左 / パネル=右）: パネル内側に 50px */
.svc-row__panel { padding-inline: var(--panel-pad) var(--panel-pad); }
.svc-row__num   { right: 1.458vw; }       /* 画像の右端から 28px */

/* 反転（パネル=左 / 画像=右）: テキストは版面マージン 260px に揃える */
.svc-row--rev .svc-row__media { order: 2; }
.svc-row--rev .svc-row__panel { order: 1; padding-inline: var(--mg) var(--panel-pad); }
.svc-row--rev .svc-row__num   { right: auto; left: 1.042vw; }   /* 画像の左端から 20px */

/* パネルの明暗 */
.svc-row__panel--light { background: #fff; color: #000; }
.svc-row__panel--dark  { background: #000; color: #fff; }

.svc-row__catch {                 /* 20px SemiBold */
  font-size: 1.042vw;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.5;
}
.svc-row__name {                  /* 40px ExtraBold */
  font-size: 2.083vw;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.2;
  margin: .5vw 0 .87vw;           /* XD: 事業名ベースライン→説明文フレーム上端 29px */
}
.svc-row__desc {                  /* 16px Regular / 行間30 */
  font-size: .833vw;
  line-height: 1.875;
}

/* 番号つきリスト：18px SemiBold / 行間30 / #40A9FA */
.svc-list {
  list-style: none;
  margin: 1.1vw 0 0;              /* XD: 説明文下端→リスト上端 21px */
  padding: 0;
  color: var(--sky);
  font-size: .938vw;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.667;
}
.svc-list li {
  display: grid;
  grid-template-columns: 2.1em 1fr;
}
.svc-list__num { font-variant-numeric: tabular-nums; }

/* ボタン列：テキストカラム内で右寄せ（XD: 右端をテキスト右端に揃える） */
.svc-row__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6.042vw;                   /* XD: 2つ並ぶ場合の間隔 116px */
  margin-top: .7vw;               /* XD: リスト下端→ボタン上端 13px */
}

/* =====================================================================
   ボタン（XD: 260x60 + 右下に9/10pxずらした枠線）
   ===================================================================== */
.xd-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 13.542vw;            /* 260px */
  min-height: 3.125vw;            /* 60px */
  padding: 0 1.2vw;
  border: 1px solid currentColor;
  border-radius: 0;
  font-size: .729vw;              /* 14px Medium */
  font-weight: 500;
  letter-spacing: .3em;
  text-indent: .3em;              /* letter-spacing の右余りを打ち消して中央に見せる */
  text-decoration: none;
  white-space: nowrap;
  --btn-ox: .469vw;               /* XD: 背面の枠を右へ 9px */
  --btn-oy: .521vw;               /*            下へ 10px */
  /* XD: 塗りの矩形(1696)に、枠線のみの矩形(1697)を右下へずらして重ねる。
     疑似要素で重ねると枠線がボタンの上を横切ってしまい、z-index:-1 で背面に送ると
     今度は親パネルの背景に隠れて消える。box-shadow は要素自身の背景より奥に
     描かれるので、これだけが「重なった部分は塗りで隠れ、右と下だけ枠が覗く」形になる。
     1枚目(パネル地色・spread -1px)で2枚目の内側を抜き、1pxの枠線に見せている。 */
  box-shadow: var(--btn-ox) var(--btn-oy) 0 -1px var(--btn-bg),
              var(--btn-ox) var(--btn-oy) 0 0 currentColor;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition);
}
/* 矢印は XD には無いが、他ページのボタン（制作実績一覧を見る/お問い合わせはこちら）と
   揃える。文字は中央のままにしたいので絶対配置で右端に置く */
.xd-btn svg {
  position: absolute;
  right: 1.042vw;                 /* 20px */
  width: 1.93vw;                  /* 37px */
  height: .451vw;
  pointer-events: none;
}
/* --btn-bg は box-shadow の“抜き”に使う。ボタンが乗るパネルの地色と同じ */
.xd-btn--light { --btn-bg: #fff; background: #fff; color: #000; }
.xd-btn--dark  { --btn-bg: #000; background: #000; color: #fff; }
/* 文字が白に反転しても背面の枠は青で残す（currentColor のままだと消える） */
.xd-btn:hover {
  background: var(--sky);
  border-color: var(--sky);
  color: #fff;
  box-shadow: var(--btn-ox) var(--btn-oy) 0 -1px var(--btn-bg),
              var(--btn-ox) var(--btn-oy) 0 0 var(--sky);
}

/* ナビのドロップダウン／ドロワーのサブ項目は TOP と共通のヘッダー部品のため
   top.css 側へ移設した（index.html は page.css を読み込まないため） */

/* 現在地：XD では英字ラベルと日本語ラベルの両方が #40A9FA。
   XDのテキストは文字範囲で色を持っており、該当ページの英字（Service / Works /
   About）だけが基準色の青、それ以外の範囲が白に上書きされている。
   （個人=7-14 "Service" / 制作実績=18-23 "Works" / 会社概要=27-32 "About"） */
.t2-nav__link.is-current .t2-nav__en,
.t2-nav__link.is-current .t2-nav__ja { color: var(--sky); }

/* =====================================================================
   SP（XD: 390px / マージン40 のアートボード準拠）
   top.css と同じく --u（= 100vw/390）で XD の 1px を表す。
   - パンくず帯は SP のアートボードに存在しないため非表示
   - ヘッダーは top.css により fixed / 高さ110u・body の padding-top は 0
   - 画像は全幅240u、その下端に白/黒カード（350u幅）が重なる
   ===================================================================== */
@media (max-width: 1023px) {
  body.page-sub {
    --row-h:     auto;
    --row-gap:   0px;
    --grid-step: calc(20 * var(--u));
  }

  .sub-breadcrumb { display: none; }

  /* body の padding-top が 0 のため .sub-head は y0 から始まり、fixed ヘッダー（高さ110u）と
     重なる。グリッドがヘッダー帯（ロゴ・ハンバーガー）の裏まで届かないよう、その分だけ下げる。 */
  .sub-head::before { top: calc(110 * var(--u)); }

  /* padding-top はヘッダー帯 110u を含む（XD: ラベル上端 y≈142） */
  .sub-hero {
    padding-inline: calc(20 * var(--u));
    padding-block: calc(142 * var(--u)) calc(45 * var(--u));
  }
  .sub-hero__label { font-size: calc(14 * var(--u)); }
  .sub-hero__title {
    font-size: calc(28 * var(--u));
    line-height: 1.3;
    margin: calc(4 * var(--u)) 0 calc(6 * var(--u));
  }
  .sub-hero__lead {
    font-size: calc(13 * var(--u));
    line-height: calc(22 / 13);
    max-width: none;
  }

  .svc-row {
    display: block;
    min-height: 0;
    margin-bottom: calc(90 * var(--u));   /* カード下端〜次の画像上端 */
  }
  .svc-row__media,
  .svc-row--rev .svc-row__media { order: 0; min-height: 0; height: calc(240 * var(--u)); }

  .svc-row__num { font-size: calc(80 * var(--u)); bottom: auto; top: calc(12 * var(--u)); }
  .svc-row__num,
  .svc-row--rev .svc-row__num { right: auto; left: calc(17 * var(--u)); }
  .svc-row:nth-child(even) .svc-row__num { left: auto; right: calc(17 * var(--u)); }

  /* カード：350u幅・画像に約78u重ねる */
  .svc-row__panel,
  .svc-row--rev .svc-row__panel {
    order: 0;
    position: relative;
    z-index: 1;
    width: calc(350 * var(--u));
    margin: calc(-78 * var(--u)) auto 0;
    min-height: 0;
    padding: calc(34 * var(--u)) calc(26 * var(--u)) calc(38 * var(--u));
  }
  .svc-row__body { max-width: none; }

  .svc-row__catch { font-size: calc(12 * var(--u)); }
  .svc-row__name  { font-size: calc(23 * var(--u)); letter-spacing: .05em; margin: calc(7 * var(--u)) 0 calc(6 * var(--u)); }
  .svc-row__desc  { font-size: calc(13 * var(--u)); line-height: calc(22 / 13); }

  .svc-list {
    font-size: calc(16 * var(--u));
    line-height: calc(28 / 16);
    letter-spacing: .02em;
    margin-top: calc(18 * var(--u));
  }
  .svc-list li { grid-template-columns: 2.2em 1fr; }

  /* SP はカード内で中央寄せ・縦積み */
  .svc-row__actions {
    flex-direction: column;
    align-items: center;
    gap: calc(30 * var(--u));
    margin-top: calc(26 * var(--u));
  }
  .xd-btn {
    min-width: calc(260 * var(--u));
    min-height: calc(60 * var(--u));
    font-size: calc(14 * var(--u));
    padding: 0 calc(10 * var(--u));
    --btn-ox: calc(9 * var(--u));
    --btn-oy: calc(10 * var(--u));
  }
  .xd-btn svg { right: calc(20 * var(--u)); width: calc(37 * var(--u)); height: calc(8.67 * var(--u)); }
}