/**
 * page-about.css — 会社案内「杉戸のはなし」
 * 構成: 宣言 → 走る年表 → 代表メッセージ → 数字 → 4つの約束 → はたらく人たち → 会社概要 → アクセス
 */

/* ------------------------------------------------------------
 1. 宣言（LPV-04／14）
------------------------------------------------------------ */
.st-manifesto { padding: 12rem 0 14rem; background-color: #fff; }
.st-manifesto__grid { display: grid; grid-template-columns: 46fr 54fr; gap: 6rem; align-items: center; }
.st-manifesto__title { font-family: var(--sub-serif); font-weight: 700; font-size: 5.6rem; line-height: 1.35; letter-spacing: .04em; color: var(--sub-navy); }
.st-manifesto__since { display: inline-block; margin-top: 1.6rem; font-family: var(--sub-en); font-style: italic; font-weight: 700; font-size: 1.4rem; letter-spacing: .3em; color: var(--sub-navy); }
.st-manifesto__txt { margin-top: 3.4rem; }
.st-manifesto__buttons { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin-top: 4rem; }
.st-manifesto__photo { position: relative; aspect-ratio: 16 / 11; }
.st-manifesto__photo::before {
  content: ''; position: absolute; inset: 3rem -3rem -3rem 3rem; background-color: var(--sub-yellow); z-index: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform: translate3d(-2rem, -2rem, 0); opacity: 0;
  transition: transform 1600ms var(--ease-level2), opacity 1100ms var(--ease-level1);
}
.st-manifesto__photo img {
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block;
  clip-path: inset(0 100% 0 0); transition: clip-path 1600ms var(--ease-level2);
}
.st-manifesto__photo.is-shown::before { transform: none; opacity: 1; }
.st-manifesto__photo.is-shown img { clip-path: inset(0 0 0 0); }
.st-manifesto__caption { position: absolute; z-index: 2; left: 2rem; bottom: -1.2rem; padding: .5rem 1.4rem; background-color: var(--sub-navy); color: #fff; font-size: 1.2rem; font-weight: 700; letter-spacing: .08em; }
@media screen and (max-width: 1023px) {
  .st-manifesto { padding: 6.4rem 0 8rem; }
  .st-manifesto__grid { grid-template-columns: 1fr; gap: 4rem; }
  .st-manifesto__title { font-size: 3.2rem; }
  .st-manifesto__photo { order: -1; margin-right: 2.4rem; }
  .st-manifesto__photo::before { inset: 2rem -2.4rem -2rem 2rem; }
  .st-manifesto__buttons { margin-top: 3rem; }
}

/* ------------------------------------------------------------
 2. 走る年表（見せ場）
------------------------------------------------------------ */
.st-road { --road-progress: 0; position: relative; background-color: var(--sub-navy2); color: #fff; overflow-x: clip; }
/* 沿革は --sub-navy2（#0b2a66）。手前の斜面は既定で --sub-navy（#04225c）を塗るので、
   そのままだと斜めの帯だけ色が違い、三角の中に別の背景があるように見える（殿指摘 2026-09-16）。
   継ぎ目の色は、必ずつながる相手のセクションから取ること。 */
.st-cross:has(+ .st-road) .st-slope,
.st-cross:has(+ .st-road) .st-wave,
.st-cross:has(+ .st-road) .st-flat { --wave-to: var(--sub-navy2); }
.st-road__pin { position: relative; }
.st-road__header { position: relative; z-index: 3; box-sizing: border-box;
  /* 他のセクション（.st-sec__inner）と同じ幅・同じ左端にそろえる。
     flex の子に margin-inline:auto を効かせると内容幅で中央寄せになり、
     見出しだけ真ん中に浮いて見えていた（殿指摘 2026-09-13）。 */
  width: 100%; max-width: 130rem; margin-inline: auto; padding: 7rem 6rem 0; }
.st-road__header .st-title span { color: #fff; }
.st-road__title { margin-top: 1.6rem; font-family: var(--font-gothic2); font-weight: 800; font-size: 5rem; line-height: 1.2; }
.st-road__lead { margin-top: 1.4rem; font-size: 1.5rem; line-height: 1.9; font-weight: 500; opacity: .85; max-width: 60rem; }
.st-road__years { position: absolute; z-index: 3; right: max(6rem, calc((100% - 130rem) / 2 + 6rem)); top: 15rem; text-align: right; } /* 固定ナビ（高さ約12rem）の下に置く */
.st-road__years__num { display: block; font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 11rem; line-height: .9; letter-spacing: -.03em; color: var(--sub-yellow); }
.st-road__years__num small { font-size: 3.2rem; font-style: normal; margin-left: .3rem; color: #fff; }
.st-road__years__label { display: block; margin-top: .8rem; font-size: 1.3rem; font-weight: 700; letter-spacing: .12em; opacity: .85; }

.st-road__stage { position: relative; }
.st-road__track { position: relative; display: flex; align-items: flex-end; gap: 0; padding: 2rem 0 0 8rem; will-change: transform; }
/* stage は flex なので、track を縮ませない。縮むと道路の線（left:0/right:0）が1画面ぶんで終わる（殿指摘 2026-09-13） */
.st-road__stage > .st-road__track { flex: 0 0 auto; }
.st-road__line { position: absolute; left: 0; right: 0; bottom: 9rem; height: .8rem; background-color: #fff; border-radius: .4rem; }
.st-road__line::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: .2rem; transform: translateY(-50%); background: repeating-linear-gradient(90deg, var(--sub-yellow) 0 4rem, transparent 4rem 7rem); }
.st-road__stops { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 6rem; }
.st-road__stop { position: relative; flex: 0 0 auto; padding-bottom: 25rem; } /* 車（高さ約15rem）が文字の下を通る */
.st-road__stop::after { content: ''; position: absolute; left: 0; bottom: 8.4rem; width: 2rem; height: 2rem; border-radius: 50%; background-color: var(--sub-yellow); box-shadow: 0 0 0 .6rem var(--sub-navy2); }
.st-road__stop.-year { width: 34rem; }
.st-road__stop.-photo { width: 40rem; }
.st-road__stop.-now { width: 40rem; }
.st-road__year { display: block; font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 7.2rem; line-height: 1; letter-spacing: -.02em; color: var(--sub-yellow); }
.st-road__era { display: block; margin-top: .4rem; font-size: 1.3rem; font-weight: 700; letter-spacing: .1em; opacity: .8; }
.st-road__stop h3 { margin-top: 1.4rem; font-family: var(--font-gothic2); font-weight: 800; font-size: 2.6rem; line-height: 1.3; }
.st-road__stop p { margin-top: 1rem; font-size: 1.4rem; line-height: 1.9; font-weight: 500; opacity: .9; }
.st-road__stop figure { margin: 0; }
.st-road__stop figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border: .4rem solid #fff; box-shadow: 0 1.6rem 3rem rgba(0,0,0,.35); }
.st-road__stop figcaption { margin-top: 1.4rem; font-size: 1.6rem; font-weight: 800; }
.st-road__stop figcaption small { display: block; margin-top: .2rem; font-size: 1.2rem; font-weight: 500; opacity: .8; }
.st-road__stop.-now h3 { font-size: 3.2rem; color: var(--sub-yellow); }
.st-road__spacer { flex: 0 0 24rem; }

.st-road__car { position: absolute; z-index: 5; bottom: 8.2rem; left: 0; width: 26rem; pointer-events: none;
  transform: translate3d(calc(14vw + var(--road-progress) * 58vw), 0, 0); will-change: transform; }
.st-road__car img { width: 100%; height: auto; display: block; filter: drop-shadow(0 1.4rem 1.6rem rgba(0,0,0,.4)); animation: st-road-bob 1.1s ease-in-out infinite; }
@keyframes st-road-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-.25rem) } }

@media screen and (min-width: 1024px) {
  .st-road__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
  .st-road__stage { flex: 1; display: flex; align-items: flex-end; }
  .st-road__track { width: max-content; min-width: 100%; }
}
@media screen and (max-width: 1023px) {
  .st-road { padding: 6rem 0 7rem; }
  .st-road__header { padding: 0 2.4rem; }
  .st-road__title { font-size: 3.1rem; }
  .st-road__lead { font-size: 1.35rem; }
  .st-road__years { position: static; margin: 2.4rem 2.4rem 0; text-align: left; }
  .st-road__years__num { font-size: 7.6rem; }
  .st-road__years__num small { font-size: 2.2rem; }
  .st-road__stage { margin-top: 4rem; padding: 0; display: block; }
  .st-road__track { display: block; width: auto; padding: 0 2.4rem 0 6.4rem; }
  /* 縦の道路線。中心は左から 2.9rem */
  .st-road__line { left: 2.6rem; right: auto; top: 0; bottom: 0; width: .6rem; height: auto; border-radius: .3rem; background-color: rgba(255,255,255,.25); }
  .st-road__line::after { top: 0; bottom: auto; left: 0; right: 0; height: calc(var(--road-progress) * 100%); width: auto; transform: none; background: #fff; border-radius: .3rem; }
  .st-road__stops { display: block; }
  .st-road__stop { width: auto !important; padding: 0 0 4.4rem; }
  .st-road__stop::after { left: -4.3rem; bottom: auto; top: .6rem; width: 1.6rem; height: 1.6rem; transform: none; }
  .st-road__year { font-size: 4.8rem; }
  .st-road__stop h3 { font-size: 2.1rem; }
  .st-road__stop.-now h3 { font-size: 2.4rem; }
  .st-road__spacer { display: none; }
  /* 縦版の車: 線の上を上から下へ走る（img 側で位置を決める） */
  .st-road__car { width: 7rem; left: 2.9rem; margin-left: -3.5rem; top: 0; bottom: 0; height: auto; transform: none; }
  .st-road__car img { position: absolute; top: calc(var(--road-progress) * 100%); left: 50%; transform: translate(-50%, -100%) rotate(90deg); animation: none; }
}

/* ------------------------------------------------------------
 3. 代表メッセージ（LPV-22）
------------------------------------------------------------ */
/* 社長はカードから意図的にはみ出させて立体感を出す（殿指示 2026-09-13）。
   写真を絶対配置にすると、カードの高さは本文だけで決まる。
   以前は縦長の全身写真がカードの高さを決めていたので、
   見出しの上に大きな空白ができ、カード自体も間延びしていた。 */
.st-message { padding: 13rem 0 11rem; background-color: #fff; }
.st-message__wrap { position: relative; }
.st-message__card { background-color: var(--sub-gray); padding: 6.4rem 9rem 6.4rem 53rem; display: block; }
/* 頭はカードの上へ出し、足はカードの下端で切る（殿指示 2026-09-13）。
   枠を「カードの下端でそろえて上へ伸ばした箱」にして overflow:hidden で切る。
   影が横で切れないよう、枠は画像より左右 3rem ずつ広くとる。 */
.st-message__photo { position: absolute; z-index: 2; left: 3rem; bottom: 0;
  width: 43rem; height: calc(100% + 12rem); margin: 0; overflow: hidden; }
.st-message__photo img { position: absolute; left: 3rem; bottom: -7rem; width: 37rem; height: auto; display: block;
  filter: drop-shadow(0 2.6rem 3.2rem rgba(4, 34, 92, .24)); }
.st-message__title { font-family: var(--sub-serif); font-weight: 700; font-size: 3.8rem; line-height: 1.45; letter-spacing: .04em; color: var(--sub-navy); }
.st-message__body { margin-top: 2.8rem; }
.st-message__sign { margin-top: 3.2rem; padding-left: 2rem; border-left: .8rem solid var(--sub-yellow); font-size: 1.5rem; font-weight: 800; line-height: 1.6; }
.st-message__sign small { display: block; font-size: 1.2rem; font-weight: 500; opacity: .7; }
.st-message__draft { display: inline-block; margin-bottom: 1.6rem; padding: .3rem 1rem; border: 1px solid var(--sub-navy); font-size: 1.1rem; font-weight: 700; letter-spacing: .1em; color: var(--sub-navy); }
@media screen and (max-width: 1023px) {
  .st-message { padding: 6.4rem 0; }
  /* SPは右上にはみ出させる。左の見出しと重ならない位置に置く */
  .st-message { padding: 12rem 0 8rem; }
  .st-message__card { padding: 5rem 2.4rem 4.4rem; }
  .st-message__photo { position: absolute; right: 1.2rem; left: auto; bottom: auto; top: -11rem;
    width: 13rem; height: auto; overflow: visible; margin: 0; }
  .st-message__photo img { position: static; left: auto; bottom: auto; width: 100%; }
  .st-message__title { font-size: 2.5rem; }
}

/* ------------------------------------------------------------
 4. 数字（LPV-09 → 円バブル）
------------------------------------------------------------ */
.st-figures { padding: 11rem 0 12rem; background-color: var(--sub-gray); }
.st-figures__head { text-align: center; }
.st-figures__head .st-title { justify-content: center; }
.st-figures__list { list-style: none; margin: 5rem auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.4rem 3rem; max-width: 120rem; }
.st-figures__item { --size: 22rem; width: var(--size); height: var(--size); border-radius: 50%; background-color: #fff; color: var(--sub-navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 1.8rem 3.4rem rgba(4,34,92,.12); }
.st-figures__item.-lg { --size: 28rem; background-color: var(--sub-navy); color: #fff; }
.st-figures__item.-md { --size: 24rem; }
.st-figures__item.-yellow { background-color: var(--sub-yellow); color: var(--sub-navy); }
.st-figures__item:nth-child(2n) { transform: translateY(2.4rem); }
.st-figures__num { font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 6.4rem; line-height: 1; letter-spacing: -.03em; }
.st-figures__item.-lg .st-figures__num { font-size: 9rem; }
.st-figures__num small { font-size: .38em; font-style: normal; margin-left: .2rem; }
.st-figures__num.-txt { font-family: var(--font-gothic2); font-style: normal; font-size: 3.4rem; letter-spacing: .02em; }
.st-figures__label { margin-top: .8rem; font-size: 1.3rem; font-weight: 700; letter-spacing: .06em; }
.st-figures__note { margin-top: 4rem; text-align: center; font-size: 1.2rem; color: var(--color-txt4, #8a8a8a); }
/* st-pop-each の子要素は transform を持つので、ずらしは内側で行う */
.st-figures__list.st-pop-each > li { transform: none; }
.st-figures__list.st-pop-each > li:nth-child(2n) .st-figures__item { transform: translateY(2.4rem); }
@media screen and (max-width: 1023px) {
  .st-figures { padding: 6.4rem 0 7rem; }
  .st-figures__list { gap: 1.6rem 1.4rem; }
  .st-figures__item { --size: 15.6rem; }
  .st-figures__item.-lg { --size: 19rem; }
  .st-figures__item.-md { --size: 16.8rem; }
  .st-figures__num { font-size: 4.2rem; }
  .st-figures__item.-lg .st-figures__num { font-size: 6rem; }
  .st-figures__num.-txt { font-size: 2.2rem; }
  .st-figures__label { font-size: 1.1rem; }
  .st-figures__list.st-pop-each > li:nth-child(2n) .st-figures__item { transform: translateY(1.4rem); }
}

/* ------------------------------------------------------------
 5. 4つの約束（LPV-15）
------------------------------------------------------------ */
.st-promise { padding: 12rem 0 13rem; background-color: var(--sub-navy); color: #fff; }
.st-promise__head .st-title span { color: #fff; }
.st-promise__list { list-style: none; margin: 6rem 0 0; padding: 0; display: grid; gap: 5rem; }
.st-promise__item { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.st-promise__item:nth-child(2n) .st-promise__photo { order: 2; }
.st-promise__photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background-color: #061c4a; }
.st-promise__photo img { width: 100%; height: 100%; object-fit: cover; display: block; clip-path: inset(0 0 0 100%); transition: clip-path 1600ms var(--ease-level2); }
.st-promise__item:nth-child(2n) .st-promise__photo img { clip-path: inset(0 100% 0 0); }
.st-promise__item.is-shown .st-promise__photo img { clip-path: inset(0 0 0 0) !important; }
.st-promise__body { position: relative; padding: 4.4rem 5rem 4.4rem 6rem; border: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; justify-content: center; }
.st-promise__no { position: absolute; top: 1.6rem; right: 2.4rem; font-family: var(--sub-en); font-style: italic; font-weight: 800; font-size: 11rem; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.35); }
.st-promise__item h3 { font-family: var(--font-gothic2); font-weight: 800; font-size: 3.4rem; line-height: 1.3; }
.st-promise__item h3 span { display: block; margin-bottom: 1rem; font-family: var(--sub-en); font-style: italic; font-weight: 700; font-size: 1.3rem; letter-spacing: .24em; color: var(--sub-yellow); }
.st-promise__item p { margin-top: 1.8rem; font-size: 1.5rem; line-height: 2; font-weight: 500; opacity: .9; max-width: 44rem; }
@media screen and (max-width: 1023px) {
  .st-promise { padding: 6.4rem 0 7rem; }
  .st-promise__list { margin-top: 3.4rem; gap: 3.2rem; }
  .st-promise__item { grid-template-columns: 1fr; }
  .st-promise__item:nth-child(2n) .st-promise__photo { order: 0; }
  .st-promise__body { padding: 2.8rem 2.4rem 3.2rem; }
  .st-promise__no { font-size: 7rem; top: 1rem; right: 1.6rem; }
  .st-promise__item h3 { font-size: 2.4rem; }
  .st-promise__item p { font-size: 1.4rem; }
}

/* ------------------------------------------------------------
 6. はたらく人たち（LPV-16）
------------------------------------------------------------ */
.st-members { padding: 12rem 0 10rem; background-color: #fff; overflow: hidden; }
.st-members__grid { display: grid; grid-template-columns: 38rem 1fr; gap: 4rem; align-items: end; }
.st-members__txt { margin-top: 2.4rem; }
.st-members__buttons { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin-top: 3.2rem; }
.st-members__people { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 1rem; min-height: 46rem; padding-bottom: 0; }
.st-members__people::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.2rem; background-color: var(--sub-gray); border-radius: .6rem; }
.st-members__people img { position: relative; height: 40rem; width: auto; display: block; }
.st-members__people img:nth-child(2n) { height: 42rem; }
.st-members__chara { position: absolute; right: -1rem; bottom: 1.2rem; width: 12rem; }
.st-members__chara img { width: 100%; height: auto; display: block; }
@media screen and (max-width: 1023px) {
  .st-members { padding: 6.4rem 0 5rem; }
  .st-members__grid { grid-template-columns: 1fr; gap: 3rem; }
  .st-members__people { min-height: 26rem; gap: .4rem; justify-content: flex-start; overflow-x: auto; padding-right: 8rem; }
  .st-members__people img { height: 22rem; }
  .st-members__people img:nth-child(2n) { height: 23.6rem; }
  .st-members__chara { width: 7rem; right: .4rem; }
}

/* ------------------------------------------------------------
 7. 会社概要（LPV-17）
------------------------------------------------------------ */
.st-outline-sec { padding: 10rem 0 12rem; background-color: var(--sub-gray); }
.st-outline-sec .st-card { padding: 7rem 8rem; display: grid; grid-template-columns: 30rem 1fr; gap: 5rem; }
/* 長い表の横で、見出しが画面の中央に浮いてついてくる（殿指示 2026-09-13） */
.st-outline-sec .st-card > header { position: sticky; top: calc(50svh - 11rem); align-self: start; }
.st-outline-sec .st-sec__title { margin-top: 1.6rem; }
.st-outline__bar { display: block; width: 8rem; height: 1rem; margin-top: 2.6rem; background-color: var(--sub-yellow); }
.st-outline__note { margin-top: 2.4rem; font-size: 1.25rem; line-height: 1.8; color: var(--color-txt4, #8a8a8a); }
@media screen and (max-width: 1023px) {
  .st-outline-sec { padding: 6rem 0 6.4rem; }
  .st-outline-sec .st-card { grid-template-columns: 1fr; gap: 2.4rem; padding: 3.6rem 2.4rem 4rem; }
  .st-outline-sec .st-card > header { position: static; }
}

/* ------------------------------------------------------------
 8. アクセス（LPV-30）
------------------------------------------------------------ */
.st-access { padding: 11rem 0 12rem; background-color: #fff; }
.st-access__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.st-access__dl { margin: 3rem 0 0; }
.st-access__dl div { display: grid; grid-template-columns: 11rem 1fr; gap: 1.6rem; padding: 1.6rem 0; border-top: 1px solid rgba(4,34,92,.18); font-size: 1.5rem; line-height: 1.8; }
.st-access__dl div:last-child { border-bottom: 1px solid rgba(4,34,92,.18); }
.st-access__dl dt { font-weight: 800; color: var(--sub-navy); }
.st-access__dl dd { margin: 0; font-weight: 500; }
.st-access__dl dd a { color: var(--sub-navy); font-weight: 800; text-decoration: none; font-size: 2.2rem; font-family: var(--sub-en); }
.st-access__sns { display: flex; gap: 1.2rem; margin-top: 3rem; }
.st-access__sns a { display: inline-flex; align-items: center; gap: .8rem; padding: 1.1rem 1.8rem; border: 2px solid var(--sub-navy); color: var(--sub-navy); font-weight: 800; font-size: 1.4rem; text-decoration: none; transition: background-color var(--transition-hover), color var(--transition-hover); }
.st-access__sns a:hover { background-color: var(--sub-navy); color: #fff; }
.st-access__sns svg { width: 1.8rem; height: 1.8rem; fill: currentColor; }
.st-access__map { position: relative; aspect-ratio: 4 / 3; background-color: var(--sub-gray); overflow: hidden; }
.st-access__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.st-access__map__btn { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; width: 100%; border: 0; background: linear-gradient(160deg, #e6ebf3, #d9e2ee); color: var(--sub-navy); font-family: inherit; font-size: 1.5rem; font-weight: 800; cursor: pointer; }
.st-access__map__btn span { padding: 1.2rem 2.4rem; background-color: var(--sub-navy); color: #fff; }
.st-access__map__btn small { font-size: 1.2rem; font-weight: 500; }
.st-access__map.is-loaded .st-access__map__btn { display: none; }
@media screen and (max-width: 1023px) {
  .st-access { padding: 6.4rem 0 7rem; }
  .st-access__grid { grid-template-columns: 1fr; gap: 3.2rem; }
  .st-access__dl div { grid-template-columns: 8.4rem 1fr; font-size: 1.4rem; }
}

/* ------------------------------------------------------------
 reduced motion: 常時ループだけ止める（スクロール連動の演出はトップと同じく維持）
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .st-road__car img { animation: none; }
}