/**
 * page-info.css — 案内系の下層ページ共通（サービス／対応エリア／料金／ご利用の流れ／
 * まちの声／Q&A／お問い合わせ／乗務員紹介／採用ムービー／お知らせ）
 * page-sub.css の語彙（--sub-navy / .st-sec / .st-card / .st-outline）を前提にする。
 * 1rem = 10px。ブレークポイントは 1024px。
 */

/* ------------------------------------------------------------
 共通の部品
------------------------------------------------------------ */
.st-block { padding-block: 12rem; }
.st-block.-tight { padding-block: 9rem; }
.st-block.-gray { background-color: var(--sub-gray); }
.st-block.-navy { background-color: var(--sub-navy); color: #fff; }
.st-block.-navy .st-sec__title,
.st-block.-navy .st-lead { color: #fff; }

.st-head2 { margin-bottom: 5.4rem; }
.st-head2__en {
  font-family: var(--sub-en); font-style: italic; font-weight: 800;
  font-size: 1.4rem; letter-spacing: .08em; color: var(--sub-navy);
  display: flex; align-items: center; gap: 1rem;
}
.st-head2__en::before {
  content: ''; width: 2.6rem; height: 2.6rem; flex: none;
  background: url(/v3/assets/img/common/icon/mark-navy.png) center/contain no-repeat;
}
.st-block.-navy .st-head2__en { color: var(--sub-yellow); }
.st-block.-navy .st-head2__en::before { background-image: url(/v3/assets/img/common/icon/mark-white.png); }
.st-head2__ja { margin-top: 1.4rem; font-family: var(--font-gothic2); font-weight: 800; font-size: 4.2rem; line-height: 1.25; letter-spacing: .01em; color: var(--sub-navy); }
.st-block.-navy .st-head2__ja { color: #fff; }
.st-head2__note { margin-top: 1.8rem; font-size: 1.5rem; line-height: 2; font-weight: 500; max-width: 78rem; }

.st-lead { font-size: 1.6rem; line-height: 2.1; font-weight: 500; }
.st-lead p + p { margin-top: 1.4em; }

/* 斜めの黒リボン（トップと同じ語彙） */
.st-ribbon {
  display: inline-block; background-color: #111; color: #fff;
  font-family: var(--font-gothic2); font-weight: 800; font-size: 1.5rem;
  padding: .7rem 2.2rem; transform: skewX(-10deg); letter-spacing: .04em;
}
.st-ribbon > span { display: inline-block; transform: skewX(10deg); }

.st-note {
  margin-top: 2.6rem; font-size: 1.55rem; line-height: 1.95; font-weight: 500;
  color: var(--color-txt3, #555); border-left: 3px solid var(--sub-yellow); padding-left: 1.6rem;
}

@media screen and (max-width: 1023px) {
  .st-block { padding-block: 7rem; }
  .st-block.-tight { padding-block: 5.4rem; }
  .st-head2 { margin-bottom: 3.4rem; }
  .st-head2__en { font-size: 1.15rem; }
  .st-head2__en::before { width: 2rem; height: 2rem; }
  .st-head2__ja { font-size: 2.7rem; }
  .st-head2__note { margin-top: 1.4rem; font-size: 1.35rem; }
  .st-lead { font-size: 1.4rem; line-height: 2; }
  .st-ribbon { font-size: 1.25rem; padding: .6rem 1.6rem; }
  .st-note { font-size: 1.4rem; margin-top: 2rem; }
}

/* ------------------------------------------------------------
 サービス（/service/）— 左に固定インデックス、右に章
------------------------------------------------------------ */
.st-svc__grid { display: grid; grid-template-columns: 26rem 1fr; gap: 8rem; align-items: start; }
.st-svc__index { position: sticky; top: 12rem; }
.st-svc__index ol { list-style: none; margin: 1.8rem 0 0; padding: 0; counter-reset: svc; }
.st-svc__index li { counter-increment: svc; }
.st-svc__index a {
  display: flex; gap: 1rem; align-items: baseline; padding: .85rem 0;
  font-size: 1.35rem; font-weight: 700; color: var(--sub-navy); text-decoration: none;
  border-bottom: 1px solid rgba(4,34,92,.12); transition: color .2s;
}
.st-svc__index a::before {
  content: counter(svc, decimal-leading-zero);
  font-family: var(--sub-en); font-style: italic; font-size: 1.15rem; color: var(--sub-yellow);
  -webkit-text-stroke: .4px rgba(4,34,92,.5);
}
.st-svc__index a:hover { color: #0a49b8; }

.st-svc__item { scroll-margin-top: 10rem; }
.st-svc__item + .st-svc__item { margin-top: 6.4rem; padding-top: 6.4rem; border-top: 1px solid rgba(4,34,92,.14); }
.st-svc__no { font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 1.3rem; color: var(--sub-navy); opacity: .55; }
.st-svc__title { margin-top: .6rem; font-family: var(--font-gothic2); font-weight: 800; font-size: 2.8rem; color: var(--sub-navy); line-height: 1.3; }
.st-svc__txt { margin-top: 1.8rem; font-size: 1.5rem; line-height: 2.05; font-weight: 500; }
.st-svc__txt p + p { margin-top: 1.2em; }
.st-svc__tags { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; list-style: none; padding: 0; }
.st-svc__tags li {
  font-size: 1.2rem; font-weight: 700; color: var(--sub-navy);
  background-color: var(--sub-gray); border-radius: 100px; padding: .5rem 1.4rem;
}
.st-svc__fig { margin: 2.6rem 0 0; }
.st-svc__fig img { width: 100%; height: auto; display: block; border-radius: .8rem; }

@media screen and (max-width: 1023px) {
  .st-svc__grid { grid-template-columns: 1fr; gap: 3.4rem; }
  .st-svc__index { position: static; }
  .st-svc__index ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; }
  .st-svc__index a { font-size: 1.2rem; padding: .7rem 0; }
  .st-svc__item + .st-svc__item { margin-top: 4rem; padding-top: 4rem; }
  .st-svc__title { font-size: 2rem; }
  .st-svc__txt { font-size: 1.4rem; }
}

/* ------------------------------------------------------------
 対応エリア（/area/）
------------------------------------------------------------ */
.st-area__towns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
.st-area__town { --corner: 3rem; padding: 3.4rem 3.6rem; background-color: #fff; }
.st-block.-gray .st-area__town { background-color: #fff; }
.st-area__town h3 { font-family: var(--font-gothic2); font-weight: 800; font-size: 2.4rem; color: var(--sub-navy); }
.st-area__town h3 span { display: block; font-family: var(--sub-en); font-style: italic; font-size: 1.15rem; color: var(--sub-yellow); -webkit-text-stroke: .4px rgba(4,34,92,.45); }
.st-area__town p { margin-top: 1.4rem; font-size: 1.4rem; line-height: 2; font-weight: 500; }

.st-spots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; list-style: none; margin: 0; padding: 0; }
.st-spot { --corner: 2.4rem; background-color: #fff; padding: 2.6rem 2.8rem; }
.st-block.-gray .st-spot { background-color: #fff; }
.st-spot__kind { font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 1.1rem; color: var(--sub-navy); opacity: .6; }
.st-spot__name { margin-top: .5rem; font-family: var(--font-gothic2); font-weight: 800; font-size: 1.9rem; color: var(--sub-navy); }
.st-spot__txt { margin-top: 1rem; font-size: 1.3rem; line-height: 1.9; font-weight: 500; }

.st-area__list { columns: 3; column-gap: 3rem; list-style: none; margin: 0; padding: 0; }
.st-area__list li {
  break-inside: avoid; font-size: 1.4rem; font-weight: 600; padding: .9rem 0 .9rem 2.2rem;
  border-bottom: 1px solid rgba(4,34,92,.12); position: relative;
}
.st-area__list li::before {
  content: ''; position: absolute; left: 0; top: 1.55rem; width: 1rem; height: 1rem;
  background-color: var(--sub-yellow); clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media screen and (max-width: 1023px) {
  .st-area__towns { grid-template-columns: 1fr; gap: 1.6rem; }
  .st-area__town { padding: 2.4rem 2.2rem; }
  .st-area__town h3 { font-size: 1.9rem; }
  .st-spots { grid-template-columns: 1fr; gap: 1.4rem; }
  .st-spot { padding: 2rem 2.2rem; }
  .st-area__list { columns: 1; }
}

/* ------------------------------------------------------------
 料金（/fare/）
------------------------------------------------------------ */
.st-fare__big { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.st-fare__cell { --corner: 2.6rem; background-color: #fff; padding: 3rem 2.4rem; text-align: center; }
.st-fare__cell dt { font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 1.15rem; color: var(--sub-navy); opacity: .6; }
.st-fare__cell dt small { display: block; font-family: var(--font-gothic2); font-style: normal; font-size: 1.4rem; opacity: 1; color: var(--sub-navy); margin-top: .4rem; }
.st-fare__cell dd { margin: 1.2rem 0 0; }
.st-fare__num { font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 5.4rem; line-height: 1; color: var(--sub-navy); }
.st-fare__unit { font-family: var(--font-gothic2); font-weight: 800; font-size: 1.8rem; color: var(--sub-navy); margin-left: .3rem; }
.st-fare__cond { display: block; margin-top: 1rem; font-size: 1.25rem; font-weight: 600; line-height: 1.7; color: var(--color-txt3, #555); }

.st-table { width: 100%; border-collapse: collapse; font-size: 1.8rem; }
.st-table caption { text-align: left; font-weight: 800; color: var(--sub-navy); font-size: 1.9rem; padding-bottom: 1.2rem; }
.st-table th, .st-table td { padding: 1.9rem 1.6rem; border-bottom: 1px solid rgba(4,34,92,.16); text-align: left; line-height: 1.7; }
.st-table thead th { background-color: var(--sub-navy); color: #fff; font-weight: 800; border-bottom: 0; }
.st-table tbody th { font-weight: 800; color: var(--sub-navy); width: 34%; }
.st-table td { font-weight: 500; }
.st-table td b { font-family: var(--sub-en); font-style: italic; font-size: 2.3rem; color: var(--sub-navy); }
.st-table__wrap { overflow-x: auto; }

/* 割引案内：人物の占有幅を本文から独立させる。 */
.st-discount { position: relative; isolation: isolate; }
.st-discount__layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: end; }
.st-discount__person { position: relative; z-index: 1; height: 420px; margin: 0; }
.st-discount__person img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.st-discount__body { position: relative; z-index: 2; min-width: 0; }
.st-discount .st-head2 { margin-bottom: 32px; }
.st-discount .st-table__wrap,
.st-discount .st-table,
.st-discount .st-table th,
.st-discount .st-table td { background: #fff; color: var(--sub-navy); }
.st-discount .st-table thead th { border-block: 2px solid var(--sub-navy); }
.st-discount .st-table th:nth-child(2),
.st-discount .st-table td:nth-child(2) { white-space: nowrap; }
.st-discount .st-note { margin-top: 16px; }
@media (max-width: 1199px) {
  .st-discount__layout { grid-template-columns: minmax(0, 1fr); }
  .st-discount__person { display: none; }
}

.st-pay { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
.st-pay__group { --corner: 2.4rem; background-color: #fff; padding: 2.8rem 3rem; }
.st-pay__group h3 { font-family: var(--font-gothic2); font-weight: 800; font-size: 1.9rem; color: var(--sub-navy); }
.st-pay__group ul { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.st-pay__group li { font-size: 1.25rem; font-weight: 700; color: var(--sub-navy); border: 1px solid rgba(4,34,92,.25); border-radius: .5rem; padding: .5rem 1.1rem; }

@media screen and (max-width: 1023px) {
  .st-fare__big { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .st-fare__cell { padding: 2rem 1.2rem; }
  .st-fare__num { font-size: 3.6rem; }
  .st-fare__unit { font-size: 1.4rem; }
  .st-table { font-size: 1.6rem; min-width: 64rem; }
  .st-table th, .st-table td { padding: 1.4rem 1.1rem; }
  /* 中央の金額列が1文字ずつ縦に折れるのを止める（実測 2026-09-12・SP 390px） */
  .st-table tbody th { width: auto; min-width: 15rem; }
  .st-table thead th:nth-child(2), .st-table tbody td:nth-child(1) { white-space: nowrap; }
  .st-table__wrap { position: relative; }
  .st-table__wrap::after {
    content: '← 横にスクロールできます →'; display: block; text-align: right;
    font-size: 1.1rem; font-weight: 700; color: var(--color-txt4, #8a8a8a); padding-top: .8rem;
  }
  .st-pay { grid-template-columns: 1fr; gap: 1.4rem; }
  .st-pay__group { padding: 2.2rem 2rem; }
}

/* ------------------------------------------------------------
 ご利用の流れ（/flow/）
------------------------------------------------------------ */
.st-routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.st-route { --corner: 3rem; background-color: #fff; padding: 3.4rem 3rem 3.8rem; display: flex; flex-direction: column; }
.st-route__head { display: flex; align-items: center; gap: 1.4rem; margin: 0; }
/* 角丸はAppleのアイコンと同じ 22.37%。公式アプリのアイコンをそのまま置く */
.st-route__icon {
  flex: none; width: 6.8rem; height: 6.8rem; border-radius: 1.52rem; overflow: hidden;
  display: grid; place-items: center; background: #fff;
  box-shadow: 0 .4rem 1.4rem rgba(4, 34, 92, .22);
}
.st-route__icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.st-route__icon.-tel { background-color: var(--sub-navy); color: #fff; }
.st-route__icon.-tel svg { width: 3.6rem; height: 3.6rem; display: block; }
.st-route__badge {
  align-self: center; font-family: var(--sub-en); font-style: italic; font-weight: 800;
  font-size: 1.15rem; letter-spacing: .06em; color: #fff; background-color: var(--sub-navy);
  padding: .5rem 1.3rem;
}
.st-route.-main .st-route__badge { background-color: var(--sub-yellow); color: var(--sub-navy); }
.st-route__title { margin-top: 1.6rem; font-family: var(--font-gothic2); font-weight: 800; font-size: 2.4rem; color: var(--sub-navy); }
.st-route__txt { margin-top: 1.2rem; font-size: 1.4rem; line-height: 1.95; font-weight: 500; flex: 1; }
.st-route__cta { margin-top: 2.4rem; }
.st-route__tel {
  display: block; font-family: var(--sub-en); font-style: italic; font-weight: 800;
  font-size: 3rem; color: var(--sub-navy); text-decoration: none; letter-spacing: .01em;
}
.st-route__tel small { display: block; font-family: var(--font-gothic2); font-style: normal; font-weight: 700; font-size: 1.6rem; line-height: 1.65; margin-top: .8rem; color: var(--sub-navy); }
.st-route__app {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.4rem 1.6rem; border: 2px solid var(--sub-navy); border-radius: .8rem;
  color: var(--sub-navy); font-size: 1.4rem; font-weight: 700; line-height: 1.6;
  text-decoration: none; transition: background-color .2s, color .2s;
}
.st-route__app i { flex: none; font-style: normal; font-size: 1.6rem; }
.st-route__app:hover { background-color: var(--sub-navy); color: #fff; }

.st-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; position: relative; }
.st-steps::before { content: ''; position: absolute; left: 3.1rem; top: 3rem; bottom: 3rem; width: 2px; background: repeating-linear-gradient(180deg, rgba(4,34,92,.3) 0 8px, transparent 8px 16px); }
.st-step { counter-increment: step; position: relative; padding: 0 0 4rem 9rem; }
.st-step:last-child { padding-bottom: 0; }
.st-step::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 6.4rem; height: 6.4rem; border-radius: 50%;
  background-color: var(--sub-navy); color: #fff;
  font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 2.4rem;
  display: grid; place-items: center;
}
.st-step h3 { font-family: var(--font-gothic2); font-weight: 800; font-size: 2.2rem; color: var(--sub-navy); padding-top: 1.2rem; }
.st-step p { margin-top: 1rem; font-size: 1.45rem; line-height: 2; font-weight: 500; }

@media screen and (max-width: 1023px) {
  .st-routes { grid-template-columns: 1fr; gap: 1.6rem; }
  .st-route { padding: 2.4rem 2.2rem 2.8rem; }
  .st-route__title { font-size: 1.9rem; }
  .st-route__tel { font-size: 2.4rem; }
  .st-route__tel small { font-size: 1.45rem; }
  .st-route__icon { width: 5.6rem; height: 5.6rem; border-radius: 1.25rem; }
  .st-route__icon.-tel svg { width: 3rem; height: 3rem; }
  .st-route__app { font-size: 1.3rem; padding: 1.2rem 1.4rem; }
  .st-steps::before { left: 2.3rem; }
  .st-step { padding: 0 0 3rem 6.4rem; }
  .st-step::before { width: 4.8rem; height: 4.8rem; font-size: 1.8rem; }
  .st-step h3 { font-size: 1.7rem; padding-top: .8rem; }
  .st-step p { font-size: 1.35rem; }
}

/* ------------------------------------------------------------
 まちの声（/voice/）
------------------------------------------------------------ */
.st-deeds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
.st-deed { --corner: 3rem; background-color: #fff; padding: 3.4rem 3.6rem; }
.st-deed__label { display: inline-block; font-size: 1.2rem; font-weight: 800; color: #fff; background-color: var(--sub-navy); padding: .45rem 1.2rem; }
.st-deed h3 { margin-top: 1.6rem; font-family: var(--font-gothic2); font-weight: 800; font-size: 2.2rem; color: var(--sub-navy); line-height: 1.35; }
.st-deed p { margin-top: 1.4rem; font-size: 1.4rem; line-height: 2; font-weight: 500; }


@media screen and (max-width: 1023px) {
  .st-deeds { grid-template-columns: 1fr; gap: 1.6rem; }
  .st-deed { padding: 2.4rem 2.2rem; }
  .st-deed h3 { font-size: 1.8rem; }
}

/* ------------------------------------------------------------
 Q&A（/faq/）
------------------------------------------------------------ */
.st-faq__nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 5rem; }
.st-faq__nav a {
  font-size: 1.35rem; font-weight: 800; color: var(--sub-navy); text-decoration: none;
  background-color: #fff; border: 1px solid rgba(4,34,92,.25); border-radius: 100px; padding: .8rem 1.8rem;
  transition: background-color .2s, color .2s;
}
.st-faq__nav a:hover { background-color: var(--sub-navy); color: #fff; }

.st-faq__group + .st-faq__group { margin-top: 6rem; }
.st-faq__group h3 { font-family: var(--font-gothic2); font-weight: 800; font-size: 2.8rem; color: var(--sub-navy); margin-bottom: 2.4rem; scroll-margin-top: 10rem; }
.st-qa { --corner: 2rem; background-color: #fff; }
.st-qa + .st-qa { margin-top: 1.4rem; }
.st-qa summary {
  list-style: none; cursor: pointer; display: flex; gap: 1.6rem; align-items: flex-start;
  padding: 2.4rem 6rem 2.4rem 2.8rem; position: relative;
  font-size: 2.05rem; font-weight: 800; color: var(--sub-navy); line-height: 1.6;
}
.st-qa summary::-webkit-details-marker { display: none; }
.st-qa summary::before {
  content: 'Q'; flex: none; font-family: var(--sub-en); font-style: italic; font-weight: 800;
  font-size: 2.6rem; color: var(--sub-yellow); -webkit-text-stroke: .5px rgba(4,34,92,.6); line-height: 1.35;
}
.st-qa summary::after {
  content: ''; position: absolute; right: 2.6rem; top: 50%; width: 1.4rem; height: 1.4rem;
  border-right: 2px solid var(--sub-navy); border-bottom: 2px solid var(--sub-navy);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s;
}
.st-qa[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.st-qa__a { display: flex; gap: 1.6rem; padding: 0 2.8rem 3rem; font-size: 1.75rem; line-height: 2.05; font-weight: 500; }
.st-qa__a::before { content: 'A'; flex: none; font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 2.6rem; color: var(--sub-navy); line-height: 1.35; }
.st-qa__a p + p { margin-top: 1em; }

@media screen and (max-width: 1023px) {
  .st-faq__nav { gap: .7rem; margin-bottom: 3.4rem; }
  .st-faq__nav a { font-size: 1.4rem; padding: .8rem 1.5rem; }
  .st-faq__group + .st-faq__group { margin-top: 4rem; }
  .st-faq__group h3 { font-size: 2.2rem; }
  .st-qa summary { font-size: 1.68rem; padding: 1.8rem 4.4rem 1.8rem 1.8rem; gap: 1rem; }
  .st-qa__a { font-size: 1.58rem; padding: 0 1.8rem 2.2rem; gap: 1rem; line-height: 2.05; }
}

/* ------------------------------------------------------------
 お問い合わせ帯の背景（.st-ct-bg）— .st-ct を置くセクションに付ける
 配車センターの写真をうっすら敷く。電話のボタンが沈まないよう、
 写真は薄く、上から白のベールを重ねて明度を上げる（殿指示 2026-09-16）
------------------------------------------------------------ */
.st-ct-bg { position: relative; overflow: hidden; isolation: isolate; }
.st-ct-bg::before,
.st-ct-bg::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.st-ct-bg::before {
  background-image: url(/v3/assets/img/info/callcenter.webp.w2048.webp);
  background-repeat: no-repeat;
  /* カードは帯の幅をほぼ埋めるので、cover のままだと人物の顔が必ずカードの裏に入る。
     写真を寄せて拡大し、顔を左の余白へ出す（殿指摘 2026-09-16） */
  background-position: 49% 26%;
  background-size: 190% auto;
  opacity: .58;
}
@media screen and (min-width: 1600px) { .st-ct-bg::before { background-size: 165% auto; background-position: 47% 26%; } }
/* 左（写真の人物側）を少し残し、カードが載る側を白く抜く */
.st-ct-bg::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.52) 46%, rgba(255,255,255,.80) 100%),
    linear-gradient(180deg, var(--sub-gray, #eef1f6) 0%, rgba(238,241,246,0) 16%, rgba(238,241,246,0) 84%, var(--sub-gray, #eef1f6) 100%);
}
.st-block.-gray.st-ct-bg::after {
  background:
    linear-gradient(90deg, rgba(238,241,246,.10) 0%, rgba(238,241,246,.52) 46%, rgba(238,241,246,.82) 100%),
    linear-gradient(180deg, var(--sub-gray, #eef1f6) 0%, rgba(238,241,246,0) 16%, rgba(238,241,246,0) 84%, var(--sub-gray, #eef1f6) 100%);
}
@media screen and (max-width: 1023px) {
  .st-ct-bg::before { background-image: url(/v3/assets/img/info/callcenter-sm.webp);
    background-position: 32% 14%; opacity: .42; }
  .st-ct-bg::after {
    background:
      linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.86) 46%, rgba(255,255,255,.92) 100%);
  }
  .st-block.-gray.st-ct-bg::after {
    background:
      linear-gradient(180deg, rgba(238,241,246,.62) 0%, rgba(238,241,246,.86) 46%, rgba(238,241,246,.92) 100%);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .st-ct-bg::before { transition: opacity .6s ease; }
}
/* ------------------------------------------------------------
 お問い合わせ（/contact/）
------------------------------------------------------------ */
.st-ct { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
.st-ct__card { --corner: 3rem; background-color: #fff; padding: 4rem 4.2rem; display: flex; flex-direction: column; }
.st-ct__card.-accent { background-color: var(--sub-yellow); }
.st-ct__kind { font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 1.2rem; color: var(--sub-navy); opacity: .65; }
.st-ct__title { margin-top: .8rem; font-family: var(--font-gothic2); font-weight: 800; font-size: 2.6rem; color: var(--sub-navy); }
.st-ct__txt { margin-top: 1.4rem; font-size: 1.4rem; line-height: 2; font-weight: 500; flex: 1; }
.st-ct__tel { display: inline-block; margin-top: 2.4rem; font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 4.4rem; line-height: 1; color: var(--sub-navy); text-decoration: none; }
.st-ct__hours { margin-top: 1.4rem; font-size: 1.6rem; font-weight: 700; color: var(--sub-navy); line-height: 1.8; }
/* 「タクシーを呼ぶ」は押せることが見た目で分かるボタンにする（殿指示 2026-09-15） */
.st-ct__call { margin-top: 2.6rem; }
.st-ct__callbtn {
  display: flex; align-items: center; gap: 1.8rem;
  padding: 1.8rem 2.2rem; border-radius: 1.4rem;
  background-color: var(--sub-navy); color: #fff; text-decoration: none;
  box-shadow: 0 .8rem 0 rgba(4, 34, 92, .3);
  transition: background-color .2s, transform .15s, box-shadow .15s;
}
.st-ct__callbtn:hover { background-color: #06317f; }
.st-ct__callbtn:active { transform: translateY(.6rem); box-shadow: 0 .2rem 0 rgba(4, 34, 92, .3); }
.st-ct__callbtn__icon { flex: none; width: 5.2rem; height: 5.2rem; border-radius: 50%; background-color: rgba(255,255,255,.16); display: grid; place-items: center; }
.st-ct__callbtn__icon svg { width: 2.9rem; height: 2.9rem; display: block; }
.st-ct__callbtn__txt { flex: 1; min-width: 0; }
.st-ct__callbtn__label { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: .04em; opacity: .9; }
.st-ct__callbtn__no { display: block; margin-top: .2rem; font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 3.6rem; line-height: 1.1; letter-spacing: .01em; white-space: nowrap; }
.st-ct__callbtn__arrow { flex: none; font-style: normal; font-size: 2.8rem; line-height: 1; opacity: .7; }
/* 関連ページへの導線は、トップページと同じボタン（.st-btn）を使う */
.st-ct__links { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: auto; padding-top: 2.4rem; }
.st-ct__links .st-btn { margin: 0; }

/* アクセス（.st-access 一式）は page-about.css を読み込んで共有する */

@media screen and (max-width: 1023px) {
  .st-ct { grid-template-columns: 1fr; gap: 1.6rem; }
  .st-ct__card { padding: 2.6rem 2.2rem; }
  .st-ct__title { font-size: 2rem; }
  .st-ct__tel { font-size: 3.2rem; margin-top: 1.8rem; }
  .st-ct__hours { font-size: 1.45rem; }
  .st-ct__call { margin-top: 2rem; }
  .st-ct__callbtn { gap: 1.3rem; padding: 1.5rem 1.6rem; }
  .st-ct__callbtn__icon { width: 4.4rem; height: 4.4rem; }
  .st-ct__callbtn__icon svg { width: 2.4rem; height: 2.4rem; }
  .st-ct__callbtn__no { font-size: 2.5rem; }
  .st-ct__callbtn__arrow { font-size: 2.2rem; }
  .st-ct__links { gap: .8rem; padding-top: 2rem; }
}

/* ------------------------------------------------------------
 乗務員紹介（/drivers/）
------------------------------------------------------------ */
.st-drv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem; }
.st-drv__card { --corner: 2.6rem; background-color: #fff; overflow: hidden; }
.st-drv__photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--sub-gray); }
.st-drv__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-drv__body { padding: 2.4rem 2.6rem 3rem; }
.st-drv__role { font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 1.1rem; color: var(--sub-navy); opacity: .6; }
.st-drv__name { margin-top: .5rem; font-family: var(--font-gothic2); font-weight: 800; font-size: 2rem; color: var(--sub-navy); }
.st-drv__txt { margin-top: 1rem; font-size: 1.33rem; line-height: 1.95; font-weight: 500; }

@media screen and (max-width: 1023px) {
  .st-drv { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .st-drv__body { padding: 1.8rem 1.6rem 2.2rem; }
  .st-drv__name { font-size: 1.6rem; }
  .st-drv__txt { font-size: 1.25rem; }
}

/* ------------------------------------------------------------
 採用ムービー（/movie/）
------------------------------------------------------------ */
.st-mv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; }
.st-mv__card {
  --corner: 3rem; background-color: #fff; overflow: hidden; text-decoration: none;
  display: flex; flex-direction: column; transition: transform .35s var(--ease-level2, cubic-bezier(.19,1,.22,1));
}
.st-mv__card:hover { transform: translateY(-.8rem); }
.st-mv__thumb { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--sub-navy); }
.st-mv__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-level2, cubic-bezier(.19,1,.22,1)); }
.st-mv__card:hover .st-mv__thumb img { transform: scale(1.05); }
.st-mv__body { padding: 3rem 3.2rem 3.4rem; flex: 1; display: flex; flex-direction: column; }
.st-mv__en { font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 1.2rem; color: var(--sub-navy); opacity: .6; }
.st-mv__title { margin-top: .8rem; font-family: var(--font-gothic2); font-weight: 800; font-size: 2.4rem; color: var(--sub-navy); line-height: 1.35; }
.st-mv__txt { margin-top: 1.4rem; font-size: 1.4rem; line-height: 1.95; font-weight: 500; flex: 1; }
.st-mv__more { margin-top: 2rem; font-size: 1.3rem; font-weight: 800; color: var(--sub-navy); display: flex; align-items: center; gap: .8rem; }
.st-mv__more::after { content: ''; width: 2.6rem; height: 1px; background-color: var(--sub-navy); transition: width .3s; }
.st-mv__card:hover .st-mv__more::after { width: 4rem; }

@media screen and (max-width: 1023px) {
  .st-mv { grid-template-columns: 1fr; gap: 1.8rem; }
  .st-mv__body { padding: 2.2rem 2rem 2.6rem; }
  .st-mv__title { font-size: 1.9rem; }
  .st-mv__txt { font-size: 1.33rem; }
}

/* ------------------------------------------------------------
 お知らせ・ブログ（/news/）
------------------------------------------------------------ */
.st-news__filter { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 4.4rem; }
.st-news__filter button {
  font-family: inherit; cursor: pointer; font-size: 1.3rem; font-weight: 800; color: var(--sub-navy);
  background-color: #fff; border: 1px solid rgba(4,34,92,.25); border-radius: 100px; padding: .8rem 1.8rem;
  transition: background-color .2s, color .2s, border-color .2s;
}
.st-news__filter button[aria-pressed="true"] { background-color: var(--sub-navy); border-color: var(--sub-navy); color: #fff; }
.st-news__filter button span { font-family: var(--sub-en); font-style: italic; margin-left: .6rem; opacity: .7; }

.st-news__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--sub-navy); }
.st-news__item { border-bottom: 1px solid rgba(4,34,92,.16); }
.st-news__item[hidden] { display: none; }
.st-news__link { display: grid; grid-template-columns: 11rem 14rem 1fr; gap: 2rem; align-items: center; padding: 2.4rem 1rem; text-decoration: none; transition: background-color .2s; }
.st-news__link:hover { background-color: rgba(4,34,92,.04); }
.st-news__date { font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 1.5rem; color: var(--sub-navy); }
.st-news__cat { font-size: 1.15rem; font-weight: 800; color: #fff; background-color: var(--sub-navy); text-align: center; padding: .5rem .8rem; }
.st-news__cat.-topic { background-color: var(--sub-yellow); color: var(--sub-navy); }
.st-news__ttl { font-size: 1.55rem; font-weight: 700; color: var(--sub-ink); line-height: 1.6; }
.st-news__empty { padding: 4rem 1rem; font-size: 1.45rem; font-weight: 600; color: var(--color-txt3, #555); }

@media screen and (max-width: 1023px) {
  .st-news__filter { gap: .6rem; margin-bottom: 2.8rem; }
  .st-news__filter button { font-size: 1.15rem; padding: .6rem 1.2rem; }
  .st-news__link { grid-template-columns: 8.4rem 1fr; gap: .6rem 1.2rem; padding: 1.8rem .6rem; }
  .st-news__cat { justify-self: start; padding: .4rem 1rem; font-size: 1.05rem; }
  .st-news__ttl { grid-column: 1 / -1; font-size: 1.4rem; }
}

/* ------------------------------------------------------------
 ページ末の次の導線
------------------------------------------------------------ */
.st-jump { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.st-jump__card {
  --corner: 2.4rem; background-color: #fff; padding: 2.8rem 3rem 3.2rem; text-decoration: none;
  display: block;
}
/* 白い帯の上では白いカードが消える。地の色を敷き替える */
.st-block:not(.-gray):not(.-navy) .st-jump__card { background-color: var(--sub-gray); }
.st-jump__en { display: block; font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 1.15rem; color: var(--sub-navy); opacity: .6; }
.st-jump__ttl { display: block; margin-top: .7rem; font-family: var(--font-gothic2); font-weight: 800; font-size: 2rem; color: var(--sub-navy); line-height: 1.35; }
.st-jump__txt { display: block; margin-top: .9rem; font-size: 1.3rem; line-height: 1.85; font-weight: 500; color: var(--sub-ink); }

@media screen and (max-width: 1023px) {
  .st-jump { grid-template-columns: 1fr; gap: 1.2rem; }
  .st-jump__card { padding: 2rem 2rem 2.2rem; }
  .st-jump__ttl { font-size: 1.7rem; }
}

/* ============================================================
 cms.idl.jp テンプレートの再解釈パーツ
 情報構造だけを型として採り、色・書体・境界は杉戸ブランドへ全面差し替える
 （殿の方針: 登録時は原本保持、実案件へ出力する時に再解釈する）。
 ============================================================ */

/* ---- KT-13 ピル型アンカー目次 ---------------------------- */
.st-pills { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.st-pills a {
  display: flex; align-items: center; gap: .8rem;
  font-size: 1.3rem; font-weight: 800; color: var(--sub-navy); text-decoration: none;
  background-color: #fff; border: 1px solid rgba(4,34,92,.2); border-radius: 100px;
  padding: .85rem 1.8rem .85rem 1.2rem; transition: background-color .25s, border-color .25s, transform .25s;
}
.st-pills a::before { content: ''; width: 1rem; height: 1rem; border-radius: 50%; background-color: var(--sub-yellow); flex: none; }
.st-pills a:hover { background-color: #fffbe0; border-color: var(--sub-yellow); transform: translateY(-.2rem); }
.st-pills a.is-current { background-color: var(--sub-navy); border-color: var(--sub-navy); color: #fff; }
@media screen and (max-width: 1023px) {
  .st-pills { gap: .6rem; justify-content: flex-start; }
  .st-pills a { font-size: 1.15rem; padding: .65rem 1.3rem .65rem .9rem; }
  .st-pills a::before { width: .8rem; height: .8rem; }
}

/* ---- CS-07 機能カタログ大パネル -------------------------- */
.st-catalog { --corner: 5rem; background-color: #fff; padding: 6rem 6.4rem; }
.st-catalog__grid { display: flex; flex-wrap: wrap; gap: 2.4rem 3.2rem; }
.st-catalog__cell { flex: 1 1 26rem; display: flex; gap: 1.6rem; align-items: flex-start; }
.st-catalog__no {
  flex: none; width: 4.2rem; height: 4.2rem; border-radius: 50%; display: grid; place-items: center;
  background-color: var(--sub-gray); color: var(--sub-navy);
  font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 1.3rem;
}
.st-catalog__cell.-key .st-catalog__no { background-color: var(--sub-yellow); }
.st-catalog__name { font-family: var(--font-gothic2); font-weight: 800; font-size: 1.7rem; color: var(--sub-navy); line-height: 1.4; }
.st-catalog__en { display: block; font-family: var(--sub-en); font-style: italic; font-weight: 700; font-size: 1rem; opacity: .55; letter-spacing: .06em; }
.st-catalog__txt { margin-top: .6rem; font-size: 1.3rem; line-height: 1.85; font-weight: 500; }
@media screen and (max-width: 1023px) {
  .st-catalog { --corner: 2.6rem; padding: 2.8rem 2.2rem; }
  .st-catalog__grid { gap: 1.8rem; }
  .st-catalog__cell { flex: 1 1 100%; gap: 1.2rem; }
  .st-catalog__no { width: 3.4rem; height: 3.4rem; font-size: 1.1rem; }
  .st-catalog__name { font-size: 1.5rem; }
  .st-catalog__txt { font-size: 1.25rem; }
}

/* ---- FD-09 特徴章立て（左右交互） ------------------------ */
.st-chapter { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.st-chapter + .st-chapter { margin-top: 9rem; }
.st-chapter.-flip .st-chapter__fig { order: -1; }
/* 章の番号はジャンプ率を効かせて大きく。スクロールで入ってきたときに
   本文より一拍おいて立ち上がる（殿指示 2026-09-15） */
.st-chapter__point { font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 1.4rem; letter-spacing: .08em; color: var(--sub-navy); display: flex; align-items: flex-end; gap: 1.6rem; }
.st-chapter__point b {
  font-size: clamp(7.6rem, 7.6vw, 11rem); line-height: .76; letter-spacing: -.03em;
  color: var(--sub-yellow); -webkit-text-stroke: .2rem var(--sub-navy);
  opacity: 0; transform: translate3d(0, 3rem, 0) scale(.82); transform-origin: 0 100%;
  transition: opacity .65s cubic-bezier(.22,1,.36,1) .34s, transform .85s cubic-bezier(.22,1,.36,1) .34s;
}
.st-chapter.is-shown .st-chapter__point b { opacity: 1; transform: translate3d(0,0,0) scale(1); }
.st-chapter__point span { padding-bottom: 1.4rem; }
.st-chapter__title { margin-top: 1.4rem; font-family: var(--font-gothic2); font-weight: 800; font-size: 3.2rem; line-height: 1.3; color: var(--sub-navy); }
.st-chapter__txt { margin-top: 1.8rem; font-size: 1.5rem; line-height: 2.05; font-weight: 500; }
.st-chapter__txt p + p { margin-top: 1.2em; }
.st-chapter__fig { margin: 0; overflow: hidden; border-radius: 1.2rem; }
.st-chapter__fig img { width: 100%; height: auto; display: block; will-change: transform; }
@media screen and (max-width: 1023px) {
  .st-chapter { grid-template-columns: 1fr; gap: 2rem; }
  .st-chapter + .st-chapter { margin-top: 5rem; }
  .st-chapter.-flip .st-chapter__fig { order: 0; }
  .st-chapter__title { font-size: 2.2rem; }
  .st-chapter__txt { font-size: 1.4rem; }
  .st-chapter__point b { font-size: 6.4rem; -webkit-text-stroke: .16rem var(--sub-navy); }
  .st-chapter__point { font-size: 1.2rem; gap: 1.1rem; }
  .st-chapter__point span { padding-bottom: .9rem; }
}

/* ---- LPV-23 5つのサポート段違い -------------------------- */
.st-stagger { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; align-items: start; }
.st-stagger__item { --corner: 2.4rem; background-color: #fff; padding: 3rem 2.4rem 3.4rem; }
.st-stagger__item:nth-child(2n) { margin-top: 4rem; background-color: var(--sub-navy); color: #fff; }
.st-stagger__item:nth-child(2n) .st-stagger__ttl { color: #fff; }
.st-stagger__item:nth-child(2n) .st-stagger__ico { background-color: var(--sub-yellow); }
.st-stagger__ico {
  width: 5rem; height: 5rem; border-radius: 50%; background-color: var(--sub-gray);
  display: grid; place-items: center; font-family: var(--sub-en); font-style: italic; font-weight: 800;
  font-size: 1.5rem; color: var(--sub-navy);
}
.st-stagger__ttl { margin-top: 1.8rem; font-family: var(--font-gothic2); font-weight: 800; font-size: 1.8rem; line-height: 1.4; color: var(--sub-navy); }
.st-stagger__txt { margin-top: 1rem; font-size: 1.3rem; line-height: 1.9; font-weight: 500; }
@media screen and (max-width: 1023px) {
  .st-stagger { grid-template-columns: 1fr; gap: 1.2rem; }
  .st-stagger__item { padding: 2.2rem 2rem 2.4rem; }
  .st-stagger__item:nth-child(2n) { margin-top: 0; }
  .st-stagger__ttl { font-size: 1.6rem; }
}

/* ---- RL-01 スクロール連動インデックス -------------------- */
.st-index { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.st-index__stage { position: sticky; top: 12rem; aspect-ratio: 4 / 3; border-radius: 1.2rem; overflow: hidden; background-color: var(--sub-navy); }
.st-index__stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s var(--ease-level1, ease), transform 1.4s var(--ease-level2, cubic-bezier(.19,1,.22,1));
  transform: scale(1.06);
}
.st-index__stage img.is-active { opacity: 1; transform: scale(1); }
.st-index__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 6rem 3rem 2.6rem;
  background: linear-gradient(0deg, rgba(4,34,92,.92) 0%, rgba(4,34,92,0) 100%); color: #fff;
}
.st-index__cap b { display: block; font-family: var(--font-gothic2); font-weight: 800; font-size: 2.2rem; }
.st-index__cap span { display: block; margin-top: .4rem; font-size: 1.3rem; font-weight: 500; opacity: .9; }
.st-index__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(4,34,92,.2); }
.st-index__row { border-bottom: 1px solid rgba(4,34,92,.2); }
.st-index__row button {
  display: grid; grid-template-columns: 5rem 1fr auto; gap: 1.6rem; align-items: center; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit;
  padding: 2.8rem .6rem; color: var(--sub-navy); transition: padding-left .3s, background-color .3s;
}
.st-index__row button:hover { padding-left: 1.6rem; }
.st-index__row[aria-current="true"] button { padding-left: 1.6rem; background-color: rgba(250,214,34,.16); }
.st-index__no { font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 1.4rem; opacity: .5; }
.st-index__name { font-family: var(--font-gothic2); font-weight: 800; font-size: 2.2rem; line-height: 1.3; }
.st-index__name small { display: block; font-weight: 600; font-size: 1.25rem; opacity: .7; margin-top: .3rem; }
.st-index__arrow { width: 3rem; height: 1px; background-color: var(--sub-navy); transition: width .3s, background-color .3s; }
.st-index__row[aria-current="true"] .st-index__arrow { width: 4.6rem; background-color: var(--sub-yellow); }
@media screen and (max-width: 1023px) {
  .st-index { grid-template-columns: 1fr; gap: 2rem; }
  .st-index__stage { position: relative; top: 0; aspect-ratio: 16 / 10; }
  .st-index__cap { padding: 4rem 1.8rem 1.8rem; }
  .st-index__cap b { font-size: 1.7rem; }
  .st-index__row button { grid-template-columns: 3.4rem 1fr auto; gap: 1rem; padding: 1.8rem .4rem; }
  .st-index__name { font-size: 1.7rem; }
  .st-index__arrow { width: 2rem; }
}

/* ---- UH-01 拠点ディレクトリ（濃紺フルブリード） ---------- */
.st-dir { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5rem; align-items: start; }
.st-dir__concept p { font-size: 1.45rem; line-height: 2.05; font-weight: 500; }
.st-dir__photo { margin: 0; }
.st-dir__photo img {
  width: 100%; height: auto; display: block;
  clip-path: polygon(50% 0, 100% 22%, 100% 100%, 0 100%, 0 22%);
}
.st-dir__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.28); }
.st-dir__list li { padding: 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,.28); font-size: 1.4rem; font-weight: 600; display: flex; justify-content: space-between; gap: 1.4rem; }
.st-dir__list li span { font-family: var(--sub-en); font-style: italic; font-weight: 700; font-size: 1.15rem; opacity: .7; }
@media screen and (max-width: 1023px) {
  .st-dir { grid-template-columns: 1fr; gap: 2.4rem; }
  .st-dir__concept p { font-size: 1.35rem; }
  .st-dir__list li { font-size: 1.3rem; padding: 1.2rem 0; }
}

/* ---- FD-14 メンバー面切替リビール ------------------------ */
.st-drv__card { position: relative; cursor: pointer; }
.st-drv__bio {
  position: absolute; inset: 0; background-color: var(--sub-navy); color: #fff;
  padding: 3rem 2.8rem; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-level1, ease), visibility .4s;
  display: flex; flex-direction: column; justify-content: center; margin: 0;
}
.st-drv__card.is-open .st-drv__bio { opacity: 1; visibility: visible; }
.st-drv__bio dt { font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 1.1rem; color: var(--sub-yellow); }
.st-drv__bio dd { margin: .4rem 0 1.6rem; font-size: 1.35rem; line-height: 1.8; font-weight: 500; }
.st-drv__bio dd:last-child { margin-bottom: 0; }
.st-drv__more { margin-top: 1.6rem; font-size: 1.15rem; font-weight: 800; color: var(--sub-navy); opacity: .6; }
@media screen and (max-width: 1023px) { .st-drv__bio { padding: 1.8rem 1.6rem; } .st-drv__bio dd { font-size: 1.2rem; margin-bottom: 1rem; } }

/* ---- LPV-10 フルブリード映像ティザー --------------------- */
.st-teaser { position: relative; isolation: isolate; min-height: 52rem; display: grid; place-items: center; overflow: hidden; }
.st-teaser__bg { position: absolute; inset: 0; z-index: -1; }
.st-teaser__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-teaser__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,34,92,.86), rgba(4,34,92,.62)); }
.st-teaser__body { text-align: center; color: #fff; padding: 8rem 2.4rem; max-width: 76rem; }
.st-teaser__en { font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 1.3rem; color: var(--sub-yellow); letter-spacing: .08em; }
.st-teaser__ttl { margin-top: 1.6rem; font-family: var(--font-gothic2); font-weight: 800; font-size: 4.4rem; line-height: 1.3; }
.st-teaser__txt { margin-top: 2rem; font-size: 1.5rem; line-height: 2.05; font-weight: 500; }
.st-teaser__play {
  margin-top: 3.4rem; display: inline-flex; align-items: center; gap: 1.4rem; text-decoration: none;
  background-color: var(--sub-yellow); color: var(--sub-navy); font-family: var(--font-gothic2); font-weight: 800;
  font-size: 1.6rem; padding: 1.5rem 3.4rem; border-radius: 100px; transition: transform .3s;
}
.st-teaser__play:hover { transform: translateY(-.3rem); }
.st-teaser__play::before { content: ''; width: 0; height: 0; border-left: 1.3rem solid var(--sub-navy); border-top: .8rem solid transparent; border-bottom: .8rem solid transparent; }
@media screen and (max-width: 1023px) {
  .st-teaser { min-height: 36rem; }
  .st-teaser__body { padding: 5rem 2.4rem; }
  .st-teaser__ttl { font-size: 2.6rem; }
  .st-teaser__txt { font-size: 1.35rem; }
  .st-teaser__play { font-size: 1.4rem; padding: 1.2rem 2.6rem; }
}

/* ---- LPV-11 / YM-11 無限ティッカー ----------------------- */
.st-ticker { overflow: hidden; padding-block: 2.4rem; background-color: var(--sub-yellow); }
.st-ticker__track { display: flex; width: max-content; animation: st-ticker 42s linear infinite; }
.st-ticker__track > span { flex: none; }
.st-ticker span {
  font-family: var(--font-gothic2); font-weight: 800; font-size: 2.2rem; color: var(--sub-navy);
  padding-inline: 2.4rem; display: inline-flex; align-items: center; gap: 2.4rem;
}
.st-ticker span::after { content: ''; width: 1.1rem; height: 1.1rem; border-radius: 50%; background-color: var(--sub-navy); }
@keyframes st-ticker { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .st-ticker__track { animation-play-state: paused; } }
@media screen and (max-width: 1023px) { .st-ticker span { font-size: 1.5rem; padding-inline: 1.4rem; gap: 1.4rem; } }

/* ---- LPV-21 課題3問 -------------------------------------- */
.st-asks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.st-ask { --corner: 2.6rem; background-color: #fff; padding: 3.4rem 3rem; }
.st-ask__q { font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 3.2rem; color: var(--sub-yellow); -webkit-text-stroke: 1px var(--sub-navy); line-height: 1; }
.st-ask h3 { margin-top: 1.6rem; font-family: var(--font-gothic2); font-weight: 800; font-size: 1.9rem; line-height: 1.5; color: var(--sub-navy); }
.st-ask p { margin-top: 1.2rem; font-size: 1.35rem; line-height: 1.95; font-weight: 500; }
@media screen and (max-width: 1023px) {
  .st-asks { grid-template-columns: 1fr; gap: 1.4rem; }
  .st-ask { padding: 2.2rem 2rem; }
  .st-ask h3 { font-size: 1.65rem; }
}

/* ---- 画像のパララックス（ScrollTrigger が動かす） -------- */
.js-parallax { will-change: transform; }

/* ---- 人物の切り抜き（全身）を枠に収める -------------------- */
.st-portrait {
  margin: 0; background-color: var(--sub-gray); border-radius: 1.2rem;
  aspect-ratio: 4 / 5; display: grid; place-items: end center; overflow: hidden;
}
.st-portrait img { width: auto; max-width: 100%; height: 100%; object-fit: contain; object-position: bottom; display: block; }
@media screen and (max-width: 1023px) { .st-portrait { aspect-ratio: 3 / 4; max-height: 46rem; margin-inline: auto; } }

/* ---- ヒーロー直下の楔の色（page-sub.css の .st-page-head::after） ---- */
.page-fare .st-page-head,
.page-flow .st-page-head,
.page-faq .st-page-head,
.page-contact .st-page-head,
.page-drivers .st-page-head,
.page-news .st-page-head { --head-next: var(--sub-gray); }
.page-voice .st-page-head { --head-next: var(--sub-yellow); }
.page-movie .st-page-head { --head-next: var(--sub-navy); }
/* 楔（べた塗りの紺）とティザー（写真の上の紺グラデ）の継ぎ目を消す。
   ティザーの上端をべた塗りから始めて、そこから写真へ溶かす。 */
.page-movie .st-teaser__bg::after {
  background: linear-gradient(180deg, rgb(4,34,92) 0%, rgba(4,34,92,.88) 14%, rgba(4,34,92,.62) 100%);
}
/* 対応エリア・会社案内・サービスの直下は白のまま（既定値）。
   サービスは2026-09-12時点で直下が灰色だったが、その後 CS-07 の白いカタログ面に変わったので
   灰色の指定を外した（2026-09-15 実測 rgb(255,255,255)）。 */

/* ============================================================
 下層に「人・キャラクター・動き」を戻す（殿指摘 2026-09-12）
 トップ（くまWeb由来）で使っている語彙だけを移植する。
 新しい色・書体・境界の形は増やさない。
   1. st-wave    章の切れ目の波（KW other_head_wave をマスクに使い、色はブランド側で決める）
   2. st-bigen   巨大英字のウォーターマーク（KW top-worry__spot__en）
   3. st-guide   すぎぴょんの吹き出し注釈（st-menu-bubble）
   4. st-person  実写切り抜きの人（about/staff-*、footer-president）
   5. st-jump    ホバーで伸びるカード＋丸バッジ（KW top-worry__page）
 ============================================================ */

/* YM-09：静止一覧を正本にし、装飾チップは正面を保って公転する。 */
/* YM-09 port. Template rem dimensions converted at 16px; site root is 10px. */
.st-ticketproof-wrap { position: relative; --ticket-orbit-duration: 32s; --ticket-float-distance: 10px; }
.st-ticketproof { position: relative; left: 50%; transform: translateX(-50%); width: min(92vw, 1400px); display: flex; flex-direction: column; align-items: flex-start; min-height: min(745px, 70vw); padding: clamp(32px, 4vw, 64px) clamp(28px, 4vw, 80px) clamp(48px, 7vw, 120px); overflow: hidden; border-radius: 40px; background: linear-gradient(180deg, #f3f4f6 82%, #e8ecef); color: #24292f; }
.st-ticketproof__body { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(40px, 6vw, 120px); width: 100%; max-width: 1008px; }
.st-ticketproof h3 { margin: 0; font-family: "Noto Sans JP", sans-serif; color: #24292f; font-size: clamp(28.8px, 4.6vw, 56px); font-weight: 700; line-height: 1.3; letter-spacing: -.04em; }
.st-ticketproof__metrics { display: flex; align-items: flex-end; gap: clamp(20px, 3vw, 32px); }
.st-ticketproof__count { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; overflow: hidden; padding: clamp(20px, 2.5vw, 32px) clamp(28px, 3.5vw, 48px); border-radius: 24px; background: linear-gradient(45deg, #2cd6c2, #0fbbea); box-shadow: 0 24px 60px -28px rgba(15,187,234,.55); color: #fff; }
.st-ticketproof__count::before { content: ''; position: absolute; top: -48px; left: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.18); filter: blur(6px); pointer-events: none; animation: st-ticket-glow 7s ease-in-out infinite; }
.st-ticketproof__count-label { position: relative; font-family: "Noto Sans JP", sans-serif; font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; letter-spacing: -.025em; line-height: 1.3; }
.st-ticketproof__count p { position: relative; margin: 0; font-family: Geist, "Helvetica Neue", Arial, sans-serif; color: #fff; font-size: clamp(56px, 9vw, 144px); font-weight: 700; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.st-ticketproof__count strong { font: inherit; }
.st-ticketproof__suffix { font-size: .6em; margin-left: .08em; vertical-align: .06em; }
.st-ticketproof__cta { display: inline-flex; align-items: center; flex-shrink: 0; padding: clamp(16px, 1.6vw, 24px) clamp(25.6px, 2.6vw, 40px); border: 1px solid #fff; border-radius: 50px; background: #fff; color: #24292f; font-family: "Noto Sans JP", sans-serif; font-size: clamp(16px, 1.4vw, 20px); font-weight: 700; letter-spacing: -.025em; line-height: 1.5; white-space: nowrap; text-decoration: none; box-shadow: 0 14px 34px -18px rgba(36,41,47,.45); transition: transform .2s ease; }
.st-ticketproof__cta span { display: inline-block; margin-left: .6em; transform: translateY(1px); }
.st-ticketproof__cta:hover { transform: translateY(-2px); }
.st-ticketproof__cta:focus-visible, .st-ticketproof__motion:has(input:focus-visible) { outline: 3px solid #24292f; outline-offset: 5px; }
.st-ticketproof__orbit { position: absolute; z-index: 2; top: 50%; left: 78%; width: clamp(680px, 70vw, 1170px); height: clamp(680px, 70vw, 1170px); transform: translate(-12%, -50%); pointer-events: none; }
.st-ticketproof__ring { position: relative; width: 100%; height: 100%; }
.st-ticketproof__satellite { position: absolute; left: 50%; top: 50%; width: clamp(64px, 8.5vw, 130px); height: clamp(64px, 8.5vw, 130px); margin: calc(clamp(64px, 8.5vw, 130px) / -2); transform: rotate(var(--angle)) translateY(calc(-1 * clamp(310px, 32vw, 537px))) rotate(calc(-1 * var(--angle))); animation: st-ticket-orbit var(--ticket-orbit-duration) linear infinite; }
.st-ticketproof__chip { display: grid; place-items: center; width: 100%; height: 100%; padding: 8px; overflow: hidden; border-radius: 16px; background: var(--chip-bg); color: var(--chip-fg); box-shadow: 0 16px 36px -18px rgba(20,30,55,.45); font-family: Geist, "Helvetica Neue", "Noto Sans JP", Arial, sans-serif; font-size: clamp(22.4px, 3vw, 41.6px); font-weight: 700; line-height: 1.15; text-align: center; animation: st-ticket-float var(--ticket-float-duration, 5.4s) ease-in-out var(--ticket-float-delay, -.4s) infinite; }
.st-ticketproof__satellite:nth-child(3n+1) { --ticket-float-duration: 4.8s; --ticket-float-delay: -1.2s; }
.st-ticketproof__satellite:nth-child(3n+2) { --ticket-float-duration: 6.2s; --ticket-float-delay: -3.1s; }
.st-ticketproof__chip--compact { font-size: clamp(11.5px, 2vw, 26px); }
.st-ticketproof__controls { display: flex; justify-content: flex-end; margin-top: 12px; }
.st-ticketproof__motion { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 600; cursor: pointer; }
.st-ticketproof__motion input { appearance: auto; width: 18px; height: 18px; margin: 0; accent-color: #24292f; }
.st-ticketproof-wrap:has(.st-ticketproof__motion input:checked) .st-ticketproof__satellite,
.st-ticketproof-wrap:has(.st-ticketproof__motion input:checked) .st-ticketproof__chip,
.st-ticketproof-wrap:has(.st-ticketproof__motion input:checked) .st-ticketproof__count::before { animation-play-state: paused; }
/* Keep the orbit and inverse rotation in one transform so their clocks cannot drift. */
@keyframes st-ticket-orbit {
  to { transform: rotate(calc(var(--angle) + 360deg)) translateY(calc(-1 * clamp(310px, 32vw, 537px))) rotate(calc(-1 * var(--angle) - 360deg)); }
}
@keyframes st-ticket-float {
  0%, 100% { translate: 0 calc(var(--ticket-float-distance) * .4); }
  50% { translate: 0 calc(var(--ticket-float-distance) * -1); }
}
@keyframes st-ticket-glow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .55; }
  50% { transform: translate3d(160px, 70px, 0) scale(1.25); opacity: 1; }
}
.st-ticket-list { margin-top: 40px; scroll-margin-top: 160px; }
.st-ticket-list h3 { margin-bottom: 24px; font-family: var(--font-gothic2); font-size: 24px; font-weight: 800; color: var(--sub-navy); }
.st-ticketproof__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; counter-reset: tickets; list-style: none; }
.st-ticketproof__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-content: center; min-width: 0; padding: 12px 0; border-bottom: 1px solid #d2d7de; font-size: 16px; line-height: 1.7; font-weight: 600; overflow-wrap: anywhere; counter-increment: tickets; }
.st-ticketproof__list li::before { content: counter(tickets, decimal-leading-zero); font-family: var(--sub-en); font-size: 12px; line-height: 2.25; font-weight: 800; }
@media (max-width: 1023px) {
  .st-ticketproof { border-radius: 32px; min-height: 650px; }
  .st-ticketproof__metrics { flex-direction: column; align-items: flex-start; }
  .st-ticketproof__orbit { left: 88%; top: 63%; }
}
@media (max-width: 599px) {
  .st-ticketproof-wrap { --ticket-orbit-duration: 40s; --ticket-float-distance: 6px; }
  .st-ticketproof { padding: 28px 24px 36px; border-radius: 28px; min-height: 488px; }
  .st-ticketproof__body { gap: 32px; }
  .st-ticketproof h3 { font-size: 26px; }
  .st-ticketproof__count { padding: 22px; border-radius: 20px; }
  .st-ticketproof__count-label { font-size: 14px; }
  .st-ticketproof__count p { font-size: 72px; }
  .st-ticketproof__metrics { gap: 52px; }
  .st-ticketproof__cta { padding: 16px 20px; font-size: 14px; }
  .st-ticketproof__orbit { left: 94%; top: 66%; }
  .st-ticketproof__controls { justify-content: flex-start; }
  .st-ticketproof__list { grid-template-columns: minmax(0, 1fr); }
  .st-ticket-list { margin-top: 24px; scroll-margin-top: 90px; }
  .st-ticket-list h3 { font-size: 21px; }
}
/* Owner request 2026-09-14: keep this proof moving, as on the home page.
   The visible checkbox pauses every animation independently of OS settings. */

/* CS-13の淡色帯と大きな白バーをチケットの質問へ。 */
.st-ticketqa { margin: 64px -32px 0; padding: 64px 32px; background: var(--sub-gray); color: var(--sub-navy); }
.st-ticketqa h2 { display: flex; flex-wrap: wrap; column-gap: .3em; margin: 0 0 32px; font-family: var(--font-gothic2); font-weight: 800; font-size: 36px; line-height: 1.5; scroll-margin-top: 160px; }
.st-ticketqa h2 span { display: inline-block; }
.st-ticketqa__item { background: #fff; }
.st-ticketqa__item + .st-ticketqa__item { margin-top: 16px; }
.st-ticketqa__item summary { display: grid; grid-template-columns: 52px minmax(0, 1fr) 28px; align-items: start; gap: 20px; padding: 32px; cursor: pointer; list-style: none; }
.st-ticketqa__item summary::-webkit-details-marker { display: none; }
.st-ticketqa__item summary:focus-visible { outline: 3px solid var(--sub-navy); outline-offset: -5px; }
.st-ticketqa__number { padding-top: 3px; font-family: var(--sub-en); font-size: 20px; font-weight: 800; line-height: 1.8; }
.st-ticketqa__question { font-family: var(--font-gothic2); font-size: 24px; font-weight: 800; line-height: 1.65; overflow-wrap: anywhere; }
.st-ticketqa__symbol { position: relative; width: 28px; height: 28px; margin-top: 6px; background: var(--sub-yellow); border-radius: 50%; }
.st-ticketqa__symbol::before, .st-ticketqa__symbol::after { content: ''; position: absolute; inset: 13px 7px; background: var(--sub-navy); }
.st-ticketqa__symbol::after { transform: rotate(90deg); }
.st-ticketqa__item[open] .st-ticketqa__symbol::after { transform: rotate(0); }
.st-ticketqa__answer { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; padding: 0 32px 32px; }
.st-ticketqa__answer-label { font-family: var(--sub-en); font-size: 22px; line-height: 1.8; font-weight: 800; }
.st-ticketqa__answer p { margin: 0; font-size: 18px; line-height: 1.9; overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  .st-ticketqa { margin: 40px -24px 0; padding: 40px 24px; }
  .st-ticketqa h2 { font-size: 28px; margin-bottom: 24px; scroll-margin-top: 100px; }
  .st-ticketqa__item summary { padding: 20px; grid-template-columns: 36px minmax(0, 1fr) 24px; gap: 12px; }
  .st-ticketqa__number { font-size: 16px; padding-top: 2px; }
  .st-ticketqa__question { font-size: 20px; }
  .st-ticketqa__symbol { width: 24px; height: 24px; margin-top: 4px; }
  .st-ticketqa__symbol::before, .st-ticketqa__symbol::after { inset: 11px 5px; }
  .st-ticketqa__answer { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 0 20px 20px; }
}

/* ---- 1. 波の境目 ----------------------------------------- */
.st-wave {
  position: relative; height: 14rem; overflow: hidden; margin-top: -1px;
  background-color: var(--wave-to, #fff);
}
/* もとの波は 3124x618。横に潰しすぎると直線に見えるので、トップと同じく
   幅を104%に広げて左へ寄せ、うねりが残る比率で使う（実測 2026-09-12） */
.st-wave::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -2%; width: 104%;
  background-color: var(--wave-from, var(--sub-gray));
  -webkit-mask: url(/v3/assets/img/home/other_head_wave_bottom.webp) center top / 100% 100% no-repeat;
  mask: url(/v3/assets/img/home/other_head_wave_bottom.webp) center top / 100% 100% no-repeat;
}
.st-wave.-g2w { --wave-from: var(--sub-gray); --wave-to: #fff; }
.st-wave.-w2g { --wave-from: #fff; --wave-to: var(--sub-gray); }
.st-wave.-g2n { --wave-from: var(--sub-gray); --wave-to: var(--sub-navy); }
.st-wave.-n2w { --wave-from: var(--sub-navy); --wave-to: #fff; }
.st-wave.-w2n { --wave-from: #fff; --wave-to: var(--sub-navy); }
.st-wave.-y2w { --wave-from: var(--sub-yellow); --wave-to: #fff; }
.st-wave.-n2g { --wave-from: var(--sub-navy); --wave-to: var(--sub-gray); }
.st-wave.-g2y { --wave-from: var(--sub-gray); --wave-to: var(--sub-yellow); }
@media screen and (max-width: 1023px) { .st-wave { height: 6.4rem; } .st-wave::before { left: -27%; width: 154%; } }

/* ---- 2. 巨大英字ウォーターマーク -------------------------- */
.st-block { position: relative; isolation: isolate; }
.st-block > .st-sec__inner { position: relative; z-index: 1; }
.st-bigen {
  position: absolute; left: 0; right: 0; top: 3rem; z-index: 0;
  pointer-events: none; overflow: hidden; user-select: none;
}
.st-bigen span {
  display: block; text-align: center; white-space: nowrap;
  font-family: var(--sub-en); font-style: italic; font-weight: 800;
  font-size: 17.4rem; line-height: .96; letter-spacing: -.02em;
  color: rgba(4, 34, 92, .055);
}
.st-bigen span:nth-of-type(2) { margin-left: -5.1em; }
.st-block.-navy .st-bigen span { color: rgba(255, 255, 255, .07); }
@media screen and (max-width: 1023px) {
  .st-bigen { top: 1.6rem; }
  .st-bigen span { font-size: 8.4rem; }
}

/* ---- 3. すぎぴょんの吹き出し注釈 -------------------------- */
/* 吹き出しはキャラクターの口元から出す。口の位置は画像の実測で
   横 51.5% / 縦 50.4%、顔の左端は 30%（hero_illust_1_1-st.png 946x1106）。
   キャラは画面の右端に貼り付けてあるので、吹き出しも同じ「画面右端からの
   距離」で置かないと口から離れる（殿指摘 2026-09-15）。
   横は「上げた手の外側」（画像の12.4%）に尻尾の先を合わせる。顔の縁（30%）に
   合わせると本文が手に隠れる。尻尾は口の高さのまま腕の後ろから出る。 */
.st-guide { position: relative; display: block; min-height: 32rem; margin-top: 3.4rem; }
/* 形は .c-bubble.-tail-r。ここは置き方だけ */
.st-guide__bubble {
  position: absolute; margin: 0;
  right: calc((100% - 100vw) / 2 + 34.9rem); bottom: 17.9rem;
  max-width: 46rem;
}
/* キャラは3〜5倍に大きくし、右端で体が切れるくらいまで出す（殿指示 2026-09-13） */
.st-guide__chara { position: absolute; bottom: -3.5rem; width: 42rem; margin: 0;
  right: calc((100% - 100vw) / 2 - 3rem); }
.st-guide__chara img { width: 100%; height: auto; display: block; }
@media screen and (max-width: 1023px) {
  .st-guide { min-height: 23rem; margin-top: 2.4rem; }
  .st-guide__bubble { right: calc((100% - 100vw) / 2 + 17.5rem); bottom: 7.2rem; }
  .st-guide__chara { width: 21rem; bottom: -2rem; right: calc((100% - 100vw) / 2 - 2rem); }
}

/* ---- 4. 実写切り抜きの人 ---------------------------------- */
/* 右下は固定のMENUボタンがいるので、人は既定で左に置く */
.st-person { position: absolute; bottom: 3rem; z-index: 0; pointer-events: none; }
.st-person img { width: 100%; height: auto; display: block; }
.st-person.-right { right: 3%; width: 21rem; }
.st-person.-left { left: 2%; width: 19rem; }
.st-person.-tall { width: 24rem; }
/* 人の背後に薄い円を敷いて、写真の切り抜きが宙に浮かないようにする */
.st-person::before {
  content: ''; position: absolute; left: 50%; bottom: -4%; translate: -50% 0;
  width: 128%; aspect-ratio: 1 / 1; border-radius: 50%;
  background-color: rgba(4, 34, 92, .06); z-index: -1;
}
.st-block.-navy .st-person::before { background-color: rgba(255, 255, 255, .08); }
@media screen and (max-width: 1023px) {
  .st-person.-right, .st-person.-left, .st-person.-tall { width: 11rem; }
  .st-person.-hide-sp { display: none; }
}

/* 人が並ぶ帯（photo/people-row を使う） */
.st-crew { margin: 0; }
.st-crew img { width: 100%; height: auto; display: block; }

/* 写真で行き先を示す関連記事カード。フォーカスと浮上は角切りの外側。 */
.st-jump.st-jump--visual { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.st-jump__link { display: flex; min-width: 0; color: var(--sub-navy); text-decoration: none; transition: transform .25s ease; }
.st-jump__link:focus-visible { outline: 3px solid var(--sub-navy); outline-offset: 6px; transform: translateY(-6px); }
.st-jump__surface { display: flex; flex-direction: column; width: 100%; min-width: 0; background: #fff; }
.st-jump__photo { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.st-jump__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.st-jump__photo img[src*="driver-moriki"],
.st-jump__photo img[src*="driver-shimamura"] { object-position: center top; }
.st-jump__body { display: flex; flex: 1; flex-direction: column; position: relative; padding: 24px 24px 88px; }
.st-jump__body::before { content: ''; position: absolute; top: -3px; left: 24px; width: 64px; height: 6px; background: var(--sub-yellow); }
.st-jump--visual .st-jump__en { font-size: 13px; line-height: 1.6; color: #4e6182; opacity: 1; overflow-wrap: anywhere; }
.st-jump--visual .st-jump__ttl { margin-top: 8px; font-size: 28px; font-weight: 800; line-height: 1.5; overflow-wrap: anywhere; }
.st-jump--visual .st-jump__txt { margin-top: 12px; font-size: 16px; line-height: 1.85; color: var(--sub-navy); overflow-wrap: anywhere; }
.st-jump__arrow { position: absolute; right: 24px; bottom: 24px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sub-yellow); color: var(--sub-navy); font-size: 26px; line-height: 1; transition: transform .25s ease; }
.st-jump__link:focus-visible .st-jump__arrow { transform: rotate(45deg); }
@media (hover: hover) {
  .st-jump__link:hover { transform: translateY(-6px); }
  .st-jump__link:hover .st-jump__arrow { transform: rotate(45deg); }
}
@media (max-width: 1023px) {
  .st-jump.st-jump--visual { grid-template-columns: minmax(0, 1fr); }
  .st-jump--visual .st-jump__ttl { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-jump__link, .st-jump__arrow { transition: none; }
}

/* ---- 5. ホバーで伸びるカード＋丸バッジ -------------------- */
.st-jump { align-items: end; }
.st-jump__card {
  position: relative;
  transition: transform .35s var(--ease-level2, cubic-bezier(.19,1,.22,1)),
              padding-bottom .35s var(--ease-level2, cubic-bezier(.19,1,.22,1));
  padding-bottom: 9.4rem;
}
/* .st-card の clip-path に切られるので、バッジはカードの内側に置く */
.st-jump__card::before {
  content: ''; position: absolute; left: 50%; bottom: 1.6rem; translate: -50% 0;
  width: 5.6rem; aspect-ratio: 1 / 1; border-radius: 50%;
  background-color: var(--sub-yellow); z-index: 2;
  transition: transform .35s var(--ease-level2, cubic-bezier(.19,1,.22,1));
}
.st-jump__card::after {
  content: ''; position: absolute; left: 50%; bottom: 3.9rem; translate: -50% 0;
  width: 1.2rem; height: 1.2rem; z-index: 3;
  border-right: 2px solid var(--sub-navy); border-bottom: 2px solid var(--sub-navy);
  transform: rotate(-45deg);
  transition: transform .35s var(--ease-level2, cubic-bezier(.19,1,.22,1));
}
@media (hover: hover) {
  .st-jump__card:hover { transform: translateY(-.6rem); padding-bottom: 11rem; }
  .st-jump__card:hover::before { transform: scale(1.12); }
  .st-jump__card:hover::after { transform: rotate(-45deg) translate(.25rem, .25rem); }
}
@media screen and (max-width: 1023px) {
  .st-jump__card { padding-bottom: 7.4rem; }
  .st-jump__card::before { width: 4.4rem; bottom: 1.4rem; }
  .st-jump__card::after { width: 1rem; height: 1rem; bottom: 3.3rem; }
}

/* Training: six complete steps with the mascot and driver together in a dedicated column. */
.st-training__layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 5.6rem; align-items: start; }
.st-training__support { position: sticky; top: 19rem; min-width: 0; padding-top: 2rem; }
/* 形は .c-bubble.-tail-b。ここは中身の組みだけ */
.st-training__bubble { --bubble-tail: 30%; --bubble-tail-len: 1.8rem; --bubble-tail-half: 1rem; --bubble-font: 1.5rem; --bubble-weight: 500; --bubble-lh: 1.9; --bubble-pad: 2.2rem 2.4rem; }
.st-training__bubble strong { font-weight: 800; }
.st-training__figures { display: grid; grid-template-columns: 1.8fr 1fr; align-items: end; gap: .8rem; padding: 3.4rem 0 0; }
.st-training__figures img { display: block; width: 100%; height: 34rem; min-width: 0; object-fit: contain; object-position: center bottom; }
.st-training .st-step p { font-size: 1.5rem; }
.st-training .st-step h3 { font-size: 2.2rem; }
.st-training-cta { background: var(--sub-yellow); color: var(--sub-navy); padding: 3rem 4rem; }
.st-training-cta__inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3rem; align-items: center; max-width: 120rem; margin-inline: auto; }
.st-training-cta__since { font-family: var(--sub-en); font-weight: 800; font-size: 1.3rem; letter-spacing: .16em; }
.st-training-cta ul { display: flex; flex-wrap: wrap; gap: .6rem 2rem; list-style: none; margin-top: 1rem; padding: 0; }
.st-training-cta li { font-size: 1.55rem; font-weight: 800; line-height: 1.8; }
.st-training-cta li::before { content: '✓'; margin-right: .6rem; }
.st-training-cta small { font-size: 1.15rem; white-space: nowrap; }
.st-training-cta__contact { text-align: center; }
.st-training-cta__contact a { display: flex; flex-direction: column; border-radius: 1rem; background: var(--sub-navy); padding: 1.4rem 2.4rem; color: #fff; }
.st-training-cta__contact a span { font-size: 1.2rem; font-weight: 700; }
.st-training-cta__contact strong { font-family: var(--sub-en); font-size: 2.8rem; font-weight: 800; line-height: 1.5; white-space: nowrap; }
.st-training-cta__contact p { margin-top: .8rem; font-size: 1.1rem; font-weight: 500; line-height: 1.6; }
.st-training-cta__contact a:focus-visible { outline: .3rem solid var(--sub-navy); outline-offset: .5rem; }
@media screen and (max-width: 1023px) {
  .st-training__layout { grid-template-columns: 1fr; gap: 3rem; }
  .st-training__support { position: static; padding-top: 0; width: 100%; max-width: 36rem; margin-inline: auto; }
  .st-training__bubble { padding: 1.8rem 2rem; font-size: 1.4rem; }
  .st-training__figures { padding-top: 2.4rem; padding-inline: 1rem; }
  .st-training__figures img { height: 26rem; }
  .st-training .st-step h3 { font-size: 1.8rem; }
  .st-training .st-step p { font-size: 1.4rem; }
  .st-training-cta { padding: 3rem 2.4rem; }
  .st-training-cta__inner { grid-template-columns: 1fr; gap: 2rem; }
  .st-training-cta ul { display: grid; gap: .6rem; }
  .st-training-cta li { font-size: 1.4rem; }
  .st-training-cta__since { font-size: 1.15rem; }
  .st-training-cta__contact strong { font-size: 3rem; }
}