@charset "UTF-8";

/* ============================================================
   public/assets/css/index.css（トップページ専用）
   ============================================================
   【役割】
   - トップページの見た目（ヒーロー、各セクション、スライダー、DATA、PageTop）
   - Ken Burns（拡大）＋フェード切替の視覚表現
   - 「フェード中にズームが戻る」問題を防ぐため is-leaving を導入

   【依存】
   - index.php のDOM（.hero-slide, .fade-item 等）
   - assets/js/index.js（is-leaving 付与/解除）

   【5か条チェック】
   1) インラインCSS禁止：OK（外部CSS）
   2) セキュリティ：CSSのみ
   3) 監査ログ：不要
   4) 冒頭コメント：整備済み
   5) 全文差し替え：本ファイルは全文提供
   ============================================================ */

:root{
  --wide: min(1200px, calc(100% - 64px));
  --ink: rgba(31,43,38,1);
  --mist: rgba(245,249,246,1);

  --g1: rgba(46,107,79,1);
  --g2: rgba(58,122,91,1);

  --sectionY: clamp(84px, 10vh, 140px);
  --sectionY2: clamp(96px, 12vh, 170px);
  --blockGap: clamp(56px, 8vh, 120px);

  --heroH: min(76vh, 680px);
  --heroMinH: 480px;
  --introMinExtra: 140px;

  --sideRail: 56px;

  /* JSと合わせる（ズーム戻り防止の退場タイミング） */
  --heroFadeMs: 1200ms;
  --fadeFadeMs: 1100ms;
}

@media (max-width: 520px){
  :root{
    --wide: calc(100% - 28px);
    --sideRail: 44px;
    --heroMinH: 400px;
    --sectionY: clamp(64px, 9vh, 120px);
    --sectionY2: clamp(76px, 10vh, 140px);
    --introMinExtra: 110px;
  }
}

body{
  background:
    radial-gradient(900px 360px at 20% -10%, rgba(46,107,79,.10), rgba(255,255,255,0)),
    radial-gradient(820px 340px at 80% 0%, rgba(58,122,91,.08), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(255,255,255,1), var(--mist));
  color: var(--ink);
}

/* SVG defs は画面に出さない */
.hero-clip-defs{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

/* 既存のトラックUIは使わない */
.hero-track, .hero-ctrls, .hero-dots { display: none !important; }

/* ------------------------------------------------------------
   HERO
------------------------------------------------------------ */
.hero-landing{ position: relative; padding: 24px 0 0; margin-bottom: var(--blockGap); }
.hero-shell{ width: var(--wide); margin: 0 auto; position: relative; }

.hero-rail{
  position: relative;
  display: grid;
  grid-template-columns: var(--sideRail) 1fr var(--sideRail);
  align-items: stretch;
}

.hero-nav{
  display:flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; user-select:none; padding-top: 6px;
}

.hero-dot{
  width: 9px; height: 9px; border-radius: 999px;
  border: 1px solid rgba(31,43,38,.22);
  background: rgba(255,255,255,.55);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  cursor:pointer;
  transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
  opacity: .78;
}
.hero-dot:hover{ transform: scale(1.15); opacity: 1; }
.hero-dot.is-active{
  background: rgba(31,43,38,.78);
  border-color: rgba(31,43,38,.10);
  transform: scale(1.1);
  opacity: 1;
}

.hero-scroll{
  display:flex; align-items:center; justify-content:center;
  user-select:none; cursor: pointer;
  writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: .12em;
  color: rgba(31,43,38,.85); font-weight: 900; font-size: 12px; padding: 10px 0;
}
.hero-scroll .arrow{
  display:inline-block; margin-top: 8px; opacity: .75;
  animation: nudgeY 1200ms ease-in-out infinite;
}
@keyframes nudgeY{
  0%,100%{ transform: translateY(0); opacity:.75; }
  50%{ transform: translateY(6px); opacity:1; }
}

@media (max-width: 520px){
  .hero-rail{ grid-template-columns: 1fr; }
  .hero-frame{ width: 100%; }

  .hero-nav{
    position: absolute;
    right: 6px;
    top: 12px;
    z-index: 20;
    padding: 0;
    gap: 9px;
  }
  .hero-dot{ width: 10px; height: 10px; box-shadow: none; }

  .hero-scroll{
    position: absolute;
    right: 6px;
    bottom: 12px;
    z-index: 20;
    writing-mode: horizontal-tb !important;
    letter-spacing: .08em;
    padding: 0;
  }
  .hero-scroll .arrow{
    margin-top: 0;
    margin-left: 6px;
    animation: nudgeX 1200ms ease-in-out infinite;
  }
  @keyframes nudgeX{
    0%,100%{ transform: translateX(0); opacity:.75; }
    50%{ transform: translateX(6px); opacity:1; }
  }
}

.hero-frame{
  position: relative;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(31,43,38,.10);
  box-shadow: 0 18px 70px rgba(0,0,0,.10);
  overflow: hidden;
}

.hero-slider{
  position: relative;
  height: var(--heroH);
  min-height: var(--heroMinH);
  background: rgba(0,0,0,.04);
  -webkit-clip-path: url(#heroClip);
  clip-path: url(#heroClip);
}

/* Ken Burns（ヒーロー） */
.hero-slide{ position:absolute; inset:0; opacity:0; transition: opacity var(--heroFadeMs) ease; pointer-events:none; }
.hero-slide.is-active{ opacity:1; pointer-events:auto; }

/* ★重要：フェードアウト中もズームが戻らないようにする */
.hero-slide.is-leaving{ opacity:0; pointer-events:none; }

.hero-slide img{
  width:100%; height:100%; object-fit: cover; display:block;
  filter: saturate(1.02) contrast(1.02);
  transform: scale(1.06);
  will-change: transform;
}

/* ★is-active と is-leaving の両方で KenBurns を継続 */
.hero-slide.is-active img.is-ken,
.hero-slide.is-leaving img.is-ken{
  animation: kenBurns 18s ease-in-out forwards;
}

@keyframes kenBurns{
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  100% { transform: scale(1.18) translate3d(-2.6%, -1.4%, 0); }
}

@media (prefers-reduced-motion: reduce){
  .hero-slide.is-active img.is-ken,
  .hero-slide.is-leaving img.is-ken{
    animation: none;
    transform: scale(1.08);
  }
}

.hero-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 420px at 20% 18%, rgba(255,255,255,.16), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 55%, rgba(0,0,0,.16));
}

.hero-fixedcopy{
  position: absolute;
  left: 22px;
  bottom: 18svh;
  z-index: 6;
  color: rgba(255,255,255,.96);
  font-weight: 900;
  letter-spacing: .06em;
  text-shadow: 0 14px 32px rgba(0,0,0,.35);
  max-width: min(560px, calc(100% - 44px));
  background: none;
  border: 0;
}
.hero-fixedcopy__kicker{ margin: 0; font-size: clamp(20px, 3.2vw, 30px); line-height: 1.25; }

.hero-frame-svg{
  position:absolute; inset: 10px;
  width: calc(100% - 20px); height: calc(100% - 20px);
  pointer-events:none; z-index: 7; opacity: 1;
}
.hero-frame-svg path{
  fill: rgba(255,255,255,0.02);
  stroke: rgba(255,255,255,0.86);
  stroke-width: 1.05;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.18))
    drop-shadow(0 2px 0 rgba(255,255,255,.08));
}

@media (max-width: 820px){
  .hero-fixedcopy{ left: 14px; right: 14px; max-width: none; bottom: 18svh; }
}

/* ------------------------------------------------------------
   INTRO
------------------------------------------------------------ */
.intro{
  width: var(--wide);
  margin: 0 auto;
  padding: var(--sectionY2) 0;
  display: grid;
  gap: 180px;
  align-content: center;
  min-height: calc(var(--heroH) + var(--introMinExtra));
}

.narrow{ width: min(calc(var(--wide) * 0.60), 860px); margin: 0 auto; }

.tategaki-wrap{ display:flex; justify-content:center; align-items:flex-start; }
.tategaki-copy{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .16em;
  font-weight: 900;
  line-height: 2.05;
  color: rgba(46,107,79,.86);
  white-space: pre-line;
  font-size: clamp(16px, 2.2vw, 21px);
  background: none;
}

.sprinkle span{
  display:inline-block;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(2px);
  animation: sprinkleIn 560ms ease forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes sprinkleIn{ to{ opacity: 1; transform: translateY(0); filter: blur(0); } }

.intro-paper{
  background: none;
  border: 0;
  padding: 0;
  line-height: 2.15;
  color: rgba(31,43,38,.86);
}
.intro-paper .lead{
  margin: 0;
  white-space: pre-line;
  font-size: clamp(15px, 2.0vw, 18px);
}

.intro-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:84px;
  justify-content:center;
}

@media (min-width: 821px){
  .intro-paper{ padding-left: 50px; }
}

@media (max-width: 820px){
  .tategaki-copy{ writing-mode: horizontal-tb; letter-spacing: .06em; line-height: 2.05; }
  .narrow{ width: 100%; }
  .intro{ gap: 32px; }
}

/* ボタン（必要分だけ） */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 11px 16px;
  border-radius: 14px;
  text-decoration:none;
  border: 1px solid rgba(31,43,38,.14);
  background: rgba(255,255,255,.86);
  color: rgba(31,43,38,.90);
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.btn--accent, .btn.btn--accent{
  background: linear-gradient(135deg, rgba(46,107,79,.92), rgba(58,122,91,.72));
  color: rgba(255,255,255,.96);
  border-color: rgba(46,107,79,.20);
}

/* ------------------------------------------------------------
   SECTIONS / SLIDER共通
------------------------------------------------------------ */
.snap-screen{
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: var(--sectionY2) 0;
  background: transparent;
}
.snap-screen + .snap-screen{ margin-top: var(--blockGap); }
.intro + .snap-screen{ margin-top: var(--blockGap); }

.section-kicker{
  display:flex; align-items:center; gap: 10px;
  font-weight: 900; letter-spacing: .10em;
  color: rgba(46,107,79,.82);
  margin: 0 0 12px;
}

.stage{
  width: var(--wide);
  margin: 0 auto;
  border-radius: 24px;
  background: rgba(0,0,0,0.02);
  padding: clamp(60px, 7.2vh, 98px) 18px 32px;
  position: relative;
  overflow: hidden;
}

.stage-title{
  margin: 0 auto 22px;
  width: fit-content;
  text-align: center;
  line-height: 1.2;
  font-size: clamp(18px, 2.8vw, 30px);
  letter-spacing: 0.02em;
  padding: 16px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.stage-empty{
  text-align:center;
  opacity:.85;
  margin:16px 0 0;
}

.stage-cta{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:22px;
}

.fade-frame{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 18px 60px rgba(0,0,0,0.10);
}
.fade-stack{
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 340px;
  background: rgba(0,0,0,.03);
}
@media (max-width: 520px){ .fade-stack{ min-height: 280px; } }

.fade-item{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity var(--fadeFadeMs) ease;
  pointer-events:none;
  display:grid;
  align-content: end;
}
.fade-item.is-active{ opacity:1; pointer-events:auto; }

/* ★重要：フェードアウト中もズームが戻らないようにする */
.fade-item.is-leaving{ opacity:0; pointer-events:none; }

.fade-photo{ position:absolute; inset:0; clip-path: url(#miniWavy); }
.fade-photo img{
  width:100%; height:100%; object-fit: cover; display:block;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.02);
  will-change: transform;
}

/* Ken Burns（スライド側）
   ★is-active と is-leaving の両方で KenBurns を継続 */
.fade-item.is-active .fade-photo img.is-ken,
.fade-item.is-leaving .fade-photo img.is-ken{
  animation: kenMini 16s ease-in-out forwards;
}
@keyframes kenMini{
  0%   { transform: scale(1.04) translate3d(0,0,0); }
  100% { transform: scale(1.16) translate3d(-2.2%, -1.2%, 0); }
}
@media (prefers-reduced-motion: reduce){
  .fade-item.is-active .fade-photo img.is-ken,
  .fade-item.is-leaving .fade-photo img.is-ken{
    animation:none;
    transform: scale(1.06);
  }
}

.fade-grad{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,0) 50%, rgba(0,0,0,.22));
  pointer-events:none;
}

.fade-cap{
  position: relative;
  z-index: 2;
  padding: 14px 14px 12px;
  color: rgba(255,255,255,.96);
  text-shadow: 0 14px 30px rgba(0,0,0,.35);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.45;
}
.fade-cap .small{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 6px;
  opacity: .92;
  font-size: 12px;
}

.fade-nav{ position:absolute; inset:0; pointer-events:none; }
.fade-btn{
  pointer-events:auto;
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  border:0;
  cursor:pointer;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  display:grid;
  place-items:center;
  opacity:.92;
  font-weight: 900;
}
.fade-btn:hover{ opacity:1; }
.fade-btn.prev{ left: 10px; }
.fade-btn.next{ right: 10px; }

.dots{ display:flex; gap:8px; justify-content:center; align-items:center; padding: 14px 0 2px; }
.dot{ width: 8px; height: 8px; border-radius: 999px; background: rgba(46,107,79,.25); border: 0; cursor: pointer; }
.dot.is-active{ background: rgba(46,107,79,.75); transform: scale(1.12); }

.stage-foot{
  max-width: 1100px;
  margin: 14px auto 0;
  text-align: center;
  font-size: 13px;
  opacity: .86;
  line-height: 1.95;
}

/* ------------------------------------------------------------
   DATA
------------------------------------------------------------ */
.stats-stage{
  width: var(--wide);
  margin: 0 auto;
  border-radius: 24px;
  background: rgba(0,0,0,0.02);
  padding: clamp(60px, 7.2vh, 100px) 18px 34px;
  overflow: hidden;
}
.stats-title{
  margin: 0 auto 10px;
  width: fit-content;
  text-align: center;
  line-height: 1.2;
  font-size: clamp(18px, 2.8vw, 30px);
  letter-spacing: 0.02em;
  padding: 16px 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.stats-asof{
  margin: 0 auto 26px;
  text-align:center;
  font-size: 12px;
  opacity: .72;
  letter-spacing: .06em;
}

.stats-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1180px; margin: 0 auto; }
@media (max-width: 900px){ .stats-grid{ grid-template-columns: 1fr; } }

.stats-cards{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px){ .stats-cards{ grid-template-columns: 1fr; } }

.s-card{
  border-radius: 18px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
  padding: 14px 14px 12px;
  border: 1px solid rgba(31,43,38,.10);
}
.s-val{
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 900;
  line-height: 1.1;
  color: rgba(46,107,79,.95);
}
.s-cap{ margin-top: 6px; font-size: 13px; opacity: .82; }

.age-chart{
  border-radius: 18px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
  padding: 14px 14px 12px;
  overflow:hidden;
  border: 1px solid rgba(31,43,38,.10);
}
.age-title{ font-weight:900; margin-bottom:6px; color: rgba(31,43,38,.86); }

.age-row{ display:grid; grid-template-columns: 58px 1fr 48px; gap: 10px; align-items:center; padding: 8px 0; }
.age-label{ font-size: 13px; opacity: .85; }
.age-bar{ height: 12px; border-radius: 999px; background: rgba(0,0,0,0.06); overflow:hidden; position: relative; }
.age-bar > span{ display:block; height: 100%; width: 0%; border-radius: 999px; background: rgba(46,107,79,.85); transition: width 1200ms ease; }
.stats-stage.is-in .age-bar > span{ width: var(--w); }
.age-pct{ font-size: 12px; opacity: .78; text-align: right; }
.age-note{ margin-top:8px; font-size:12px; opacity:.75; }

/* 男女比：円グラフ（アニメ） */
.gender-pie{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-top: 10px;
}
.pie-svg{
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}
.pie-track{
  fill:none;
  stroke: rgba(0,0,0,.07);
  stroke-width: 14;
}
.pie-seg{
  fill:none;
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 0 999;
  stroke-dashoffset: 0;
  transition: stroke-dasharray 1400ms ease, stroke-dashoffset 1400ms ease;
}
.pie-f{ stroke: rgba(46,107,79,.92); }
.pie-m{ stroke: rgba(46,107,79,.25); }

.pie-center{ min-width: 96px; }
.pie-main{
  font-size: clamp(18px, 3.2vw, 22px);
  font-weight: 900;
  line-height: 1.2;
  color: rgba(31,43,38,.86);
}
.pie-sub{
  margin-top: 4px;
  font-size: 12px;
  opacity: .72;
  line-height: 1.6;
}

/* 木アイコン */
.tree{ width: 24px; height: 24px; display:inline-flex; align-items:center; justify-content:center; vertical-align: -5px; }
.tree img{
  width: 24px; height: 24px; display:block; object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.10));
}

/* ------------------------------------------------------------
   Page top（共通UI：矢印上下）
------------------------------------------------------------ */
.page-top-rail{
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;

  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .12em;

  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;

  color: rgba(31,43,38,.65);
  font-weight: 900;
  font-size: 12px;

  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  cursor: pointer;
  display:flex;
  align-items:center;
  gap: 8px;
}
.page-top-rail.is-show{
  opacity: .95;
  pointer-events: auto;
}
.page-top-rail:hover{ opacity: 1; }

.page-top-rail .pt-arrow{
  display:inline-block;
  animation: ptWiggleY 1300ms ease-in-out infinite;
  opacity:.85;
}
@keyframes ptWiggleY{
  0%,100%{ transform: translateY(0); opacity:.75; }
  50%{ transform: translateY(-6px); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .page-top-rail .pt-arrow{ animation: none; }
}
@media (max-width: 520px){
  .page-top-rail{ right: 6px; }
}

/* ------------------------------------------------------------
   RECRUIT（募集ブロック：カード化）
------------------------------------------------------------ */
.recruit-wrap{
  width: var(--wide);
  margin: 0 auto;
}

.recruit-card{
  border-radius: 24px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(31,43,38,.10);
  box-shadow: 0 18px 70px rgba(0,0,0,.10);
  overflow: hidden;
  padding: clamp(22px, 3.2vw, 34px);
}

.recruit-grid{
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: clamp(14px, 2.2vw, 22px);
  align-items: start;
}

@media (max-width: 900px){
  .recruit-grid{
    grid-template-columns: 1fr;
  }
}

.recruit-title{
  margin: 0 0 10px;
  font-size: clamp(20px, 3.0vw, 30px);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: rgba(46,107,79,.95);
  font-weight: 900;
}

.recruit-lead{
  margin: 0;
  line-height: 2.0;
  opacity: .92;
  white-space: pre-line;
}

.recruit-note{
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.9;
  opacity: .78;
}

/* 右側：条件 */
.recruit-side{
  border-radius: 18px;
  background: rgba(0,0,0,0.02);
  border: 1px dashed rgba(31,43,38,.16);
  padding: 16px;
}

.recruit-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.recruit-list li{
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(31,43,38,.08);
}

.recruit-k{
  font-size: 12px;
  opacity: .74;
  font-weight: 900;
  letter-spacing: .06em;
}

.recruit-v{
  font-size: 14px;
  line-height: 1.6;
  opacity: .92;
}

.recruit-actions{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}

@media (max-width: 520px){
  .recruit-side{ padding: 14px; }
  .recruit-list li{ grid-template-columns: 64px 1fr; }
  .recruit-actions{ justify-content: center; }
}

/* 縦書きコピー：sprinkle化されるまでは表示しない（チラつき防止） */
.tategaki-copy.sprinkle {
  visibility: hidden; /* これで「パッと見える」を消す */
}

/* JSが文字をspan化し終えたら表示 */
.tategaki-copy.sprinkle.is-ready {
  visibility: visible;
}

/* ===============================
   HERO: Scroll down（縦書き固定）
   =============================== */
.hero-scroll{
  /* 位置は既存があるならそっち優先でOK（下の3行は状況により調整） */
  position: absolute;
  right: 16px;
  bottom: 16px;

  /* 中身は縦に積む（テキスト＋矢印） */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* 縦書きの本体は「テキストspan」に当てる（←ここがポイント） */
#heroScrollText{
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl; /* iOS Safari対策 */
  text-orientation: mixed;
  -webkit-text-orientation: mixed;

  white-space: nowrap;   /* 変な折返し防止 */
  display: inline-block; /* iOSで効きが安定 */
}

/* 矢印は別扱い（縦書きに巻き込まれて崩れるのを防ぐ） */
#heroScrollArrow{
  display: inline-block;
  line-height: 1;
}

/* スマホ側で別CSSに上書きされてる場合に備えて「再宣言」 */
@media (max-width: 520px){
  #heroScrollText{
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    text-orientation: mixed;
    -webkit-text-orientation: mixed;
  }
}