/**
 * page-sub.css — 下層ページ共通（杉戸タクシー）
 * トップの common.min.css の語彙（色変数・st-title・st-title-c・st-round・st-watch 系）を前提にする。
 * 1rem = 10px。ブレークポイントは 1024px。
 */

:root {
  --sub-slope: 12rem;          /* ページ頭の斜面の高さ（PC） */
  --sub-navy: var(--color-main, #04225c);
  --sub-navy2: var(--color-bg6, #0b2a66);
  --sub-yellow: var(--color-bg9, #fad622);
  --sub-gray: #eef1f6;
  --sub-ink: var(--color-txt, #111);
  --sub-serif: var(--font-gothic2);
  --sub-en: Archivo, 'Noto Sans JP', sans-serif;
}
@media screen and (max-width: 1023px) {
  :root { --sub-slope: 5.2rem; }
}

/* overflow:hidden はスクロールコンテナになり sticky が効かなくなる。clip で横だけ切る */
.sub-main { position: relative; overflow-x: clip; background-color: var(--color-bg, #fff); }

/* ------------------------------------------------------------
 ページ頭（LPV-03 の杉戸版）
------------------------------------------------------------ */
.st-page-head {
  position: relative;
  /* isolation: isolate は入れない。入れると、ヒーローの下端をまたいで走る車
     （.st-kv-car, z-index:12）の重なりがヒーローの中に閉じ、次のセクションの下へ潜る。
     PC全15ページで3〜10px潜っていた（殿指摘 2026-09-15）。
     代わりに、ヒーロー内の重なり順は下の3つで明示する。 */
  background-color: #fff;
  padding-bottom: var(--sub-slope);
}
.st-page-head__visual {
  position: relative;
  /* トップページのヒーローと同じ高さ（殿指示 2026-09-12）。
     トップは .top-fv が calc(var(--wh) + 斜面)。--wh は common.min.css の実ビューポート高。 */
  height: var(--wh, 100vh);
  min-height: 52rem;
  max-height: 110rem;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sub-slope)), 0 100%);
  background-color: var(--sub-navy2);
}
/* 出現の演出は picture 側で持つ。img の transform はパララックス専用にする */
.st-page-head__visual picture {
  display: block; width: 100%; height: 100%;
  opacity: 0; transform: scale(1.04);
  transition: transform 2600ms var(--ease-level2, cubic-bezier(.19,1,.22,1)), opacity 1100ms var(--ease-level1, ease);
}
.st-page-head.is-shown .st-page-head__visual picture { opacity: 1; transform: scale(1); }
.st-page-head__visual img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; display: block;
  /* 背景写真のパララックス。JS が --head-img-y を 0 → 7% で流す。
     scale で上下に 8% ずつ余らせてあるので、はみ出して縁が出ることはない。 */
  transform: translate3d(0, var(--head-img-y, 0%), 0) scale(1.16);
  will-change: transform;
}
.st-page-head__visual::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 30%, rgba(255,255,255,.35) 52%, rgba(255,255,255,0) 68%);
}
.st-page-head__inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: 12rem 8rem 16rem;
  max-width: 150rem; margin-inline: auto;
}
.st-page-head__contents { --transition-delay: 240ms; }
.st-page-head__ja { margin-top: 0; }
.st-page-head__ja .st-title-c__main { font-family: var(--font-gothic2); font-size: 7.4rem; line-height: 1.28; letter-spacing: .02em; }
.st-page-head__ja .st-title-c__sub { margin-top: 1.8rem; }
.st-page-head__lead {
  margin-top: 4.4rem; font-size: 1.6rem; line-height: 2.3; font-weight: 500; color: var(--sub-navy); max-width: 56rem;
}
.st-page-head__crumb { margin-top: 5.2rem; font-size: 1.3rem; font-weight: 700; --gap: .9rem; --line-width: 1.4rem; }
.st-page-head__crumb ol { list-style: none; margin: 0; padding: 0; }
.st-page-head__crumb li { color: var(--sub-ink); }
.st-page-head__crumb a { color: var(--sub-navy); text-decoration: none; }
.st-page-head__crumb a:hover { text-decoration: underline; }
/* ヒーロー直下の白い楔をなくす（殿指摘 2026-09-12）。
   ヒーローは斜めに切れるのに次のセクションは横一線で始まるため、
   斜面と水平線のあいだに白い三角が残っていた（PC実測: 左114px・右228px）。
   次のセクションの色をこの楔に流し込み、色の境目そのものを斜面に一致させる。
   色は --head-next（既定 白）。ページごとに page-info.css で指定する。 */
.st-page-head::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: calc(var(--sub-slope) * 2);
  background-color: var(--head-next, #fff);
  /* 上辺を斜面と同じ角度に: 左端は斜面ぶん下、右端は要素の上端 */
  clip-path: polygon(0 var(--sub-slope), 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

/* 背景に流れる大きなアウトラインの英字。JS が data-heading-en から作って挿す。
   スクロールで横に流れる（--head-en-x）。文字は読ませるためではなく地の模様。 */
.st-page-head__bigen {
  position: absolute; z-index: 0; left: 0; right: 0; bottom: calc(var(--sub-slope) * 1.15 + 8rem);
  pointer-events: none; user-select: none; overflow: hidden; line-height: 1;
}
.st-page-head__bigen span {
  display: block; white-space: nowrap;
  font-family: var(--sub-en); font-style: italic; font-weight: 800;
  font-size: 20rem; letter-spacing: .01em;
  color: transparent; -webkit-text-stroke: .15rem rgba(4, 34, 92, .16);
  transform: translate3d(var(--head-en-x, 0px), 0, 0); will-change: transform;
}

/* 車は common.min.css の .st-kv-car をトップと共用する。 */

@media screen and (max-width: 1023px) {
  .st-page-head__visual { min-height: 44rem; max-height: 92rem; }
  .st-page-head__visual img { object-position: 70% 60%; }
  /* ヒーローが高くなったぶん、文字が乗る範囲まで白を伸ばす */
  .st-page-head__visual::after { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 46%, rgba(255,255,255,.55) 68%, rgba(255,255,255,0) 100%); }
  /* 左上のサイトロゴの下に、日本語見出しから置く。 */
  .st-page-head__inner { justify-content: flex-start; padding: 22rem 2.4rem 6rem; }
  .st-page-head__ja { margin-top: 0; }
  .st-page-head__ja .st-title-c__main { font-size: 4.2rem; line-height: 1.34; }
  .st-page-head__ja .st-title-c__sub { margin-top: 1.4rem; }
  .st-page-head__lead { margin-top: 3.2rem; font-size: 1.35rem; line-height: 2.15; max-width: 100%; }
  .st-page-head__crumb { margin-top: 3.4rem; font-size: 1.1rem; }
  .st-page-head__bigen span { font-size: 9.6rem; -webkit-text-stroke-width: .1rem; }
  .st-page-head__bigen { bottom: calc(var(--sub-slope) * 1.15 + 3.2rem); }
}

/* ------------------------------------------------------------
 共通の見出し帯・本文
------------------------------------------------------------ */
.st-sec { position: relative; }
.st-sec__inner { max-width: 130rem; margin-inline: auto; padding-inline: 6rem; }
.st-sec__title { font-family: var(--font-gothic2); font-weight: 800; letter-spacing: .01em; line-height: 1.2; }
.st-sec__title.-xl { font-size: 5.4rem; }
.st-sec__title.-lg { font-size: 4.2rem; }
.st-sec__title.-serif { font-family: var(--sub-serif); font-weight: 700; letter-spacing: .04em; }
.st-sec__txt { font-size: 1.6rem; line-height: 2.1; font-weight: 500; }
.st-sec__txt p + p { margin-top: 1.6em; }
.st-en { font-family: var(--sub-en); font-style: italic; font-weight: 800; letter-spacing: .02em; }
@media screen and (max-width: 1023px) {
  .st-sec__inner { padding-inline: 2.4rem; }
  .st-sec__title.-xl { font-size: 3.2rem; }
  .st-sec__title.-lg { font-size: 2.7rem; }
  .st-sec__txt { font-size: 1.4rem; line-height: 2; }
}

/* 白い角切りカード（トップの st-history-card__body と同じ手触り） */
.st-card {
  --corner: 4rem;
  background-color: #fff;
  clip-path: polygon(var(--corner) 0, calc(100% - var(--corner)) 0, 100% var(--corner), 100% calc(100% - var(--corner)), calc(100% - var(--corner)) 100%, var(--corner) 100%, 0 calc(100% - var(--corner)), 0 var(--corner));
}
@media screen and (max-width: 1023px) { .st-card { --corner: 2.2rem; } }

/* ------------------------------------------------------------
 会社概要テーブル（LPV-17）
------------------------------------------------------------ */
.st-outline dl { display: grid; grid-template-columns: 18rem 1fr; gap: 0; margin: 0; border-top: 2px solid var(--sub-navy); }
.st-outline dt, .st-outline dd { margin: 0; padding: 2rem 0; border-bottom: 1px solid rgba(4,34,92,.18); font-size: 1.5rem; line-height: 1.8; }
.st-outline dt { font-weight: 800; color: var(--sub-navy); }
.st-outline dd { font-weight: 500; }
.st-outline dd small { display: block; font-size: 1.2rem; color: var(--color-txt4, #8a8a8a); }
.st-outline dd a { color: inherit; }
@media screen and (max-width: 1023px) {
  .st-outline dl { grid-template-columns: 1fr; }
  .st-outline dt { padding: 1.6rem 0 .2rem; border-bottom: 0; font-size: 1.25rem; }
  .st-outline dd { padding: 0 0 1.4rem; font-size: 1.4rem; }
}

/* ------------------------------------------------------------
 数字カウント
------------------------------------------------------------ */
.js-count { font-variant-numeric: tabular-nums; }

/* reduced motion: トップと同じく、スクロール連動の演出はそのまま（OS設定が有効な環境が多いため）。常時ループだけ止める */

/* ------------------------------------------------------------
 CONTACT帯を直前のセクションから切り離す（殿指摘 2026-09-12）
 トップでは直前が濃紺なので境目が見えるが、下層は直前が白／薄グレーで、
 帯の地色 #f0f0f0 と中の白いカードが地続きに見えていた（実測: すき間 0px）。
 帯の上に余白を入れて地色を見せ、本文最後のセクションにも下の余白を足す。
------------------------------------------------------------ */
.sub-main ~ .st-inquiry.-type1,
body[class*="page-"] .st-inquiry.-type1 { padding-top: 11rem; }
.sub-main > section:last-of-type { padding-bottom: 12rem; }
@media screen and (max-width: 1023px) {
  .sub-main ~ .st-inquiry.-type1,
  body[class*="page-"] .st-inquiry.-type1 { padding-top: 6.4rem; }
  .sub-main > section:last-of-type { padding-bottom: 8rem; }
}