/* ===== MISSION 詳細ページ（このページだけで読み込む） =====
   物語の流れ：ファーストビュー → 問い → 京都・嵐山 → 別府 → 100/60/40 → 誰がやる？ → IRIGUCHIがやろう。 → MISSION
   スクロールに合わせた演出は、html に .ms-motion が付いたときだけ（js/mission.js）。
   動きを減らす設定・編集モード・JavaScript なしでは、同じ文章を上から順に読める形で表示する */

.page-mission{background:var(--kinari)}
/* 日本語を言葉の切れ目で改行する（「やろ／う。」のような途中での改行を防ぐ） */
.ms{word-break:auto-phrase}
.ms-label{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-en);font-size:12px;letter-spacing:.2em;color:var(--kin-text)}
.ms-label::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--kin)}
.ms-label--light{color:#e9d9a8}

/* ---------- 1. ファーストビュー ---------- */
.ms-hero{
  position:relative;display:flex;align-items:center;justify-content:center;min-height:calc(100svh - 72px);
  padding:96px var(--side) 140px;text-align:center;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 46%,#fffdf8 0%,var(--kinari) 62%,#f3efe6 100%);
}
.ms-hero-in{transform:translateY(calc(var(--hero,0) * -70px));opacity:calc(1 - var(--hero,0) * 1.3)}
.ms-hero-label{opacity:0;transform:translateY(10px);transition:opacity 1.4s var(--ease) .2s,transform 1.4s var(--ease) .2s}
.ms-hero-title{
  margin-top:40px;font-family:var(--font-head);font-weight:500;font-size:clamp(32px,5.4vw,76px);
  line-height:1.62;letter-spacing:.06em;color:var(--ai);
  /* 左から右へ、筆で書くように現れる */
  -webkit-mask-image:linear-gradient(90deg,#000 0 42%,transparent 58% 100%);mask-image:linear-gradient(90deg,#000 0 42%,transparent 58% 100%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;
  transition:-webkit-mask-position 2.8s var(--ease) .5s,mask-position 2.8s var(--ease) .5s;
}
.is-ready .ms-hero-label{opacity:1;transform:none}
.is-ready .ms-hero-title{-webkit-mask-position:0 0;mask-position:0 0}
.ms-scroll{position:absolute;left:50%;bottom:36px;display:flex;flex-direction:column;align-items:center;gap:14px;transform:translateX(-50%);font-family:var(--font-en);font-size:10px;letter-spacing:.24em;color:var(--usuzumi)}
.ms-scroll i{position:relative;display:block;width:1px;height:64px;overflow:hidden;background:rgba(3,39,104,.12)}
.ms-scroll i::after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--ai);animation:ms-drop 2.6s var(--ease) infinite}
@keyframes ms-drop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- 2. 問い ---------- */
.ms-ask{position:relative;display:flex;align-items:center;justify-content:center;min-height:90svh;padding:120px var(--side);text-align:center}
.ms-ask::before{content:"";position:absolute;left:50%;top:0;width:1px;height:28%;background:linear-gradient(var(--rule),transparent)}
.ms-ask-text{font-family:var(--font-head);font-weight:500;font-size:clamp(24px,3.6vw,46px);line-height:1.8;letter-spacing:.06em;color:var(--sumi)}

/* ---------- 3・4. 京都・嵐山 / 別府 ---------- */
.ms-chapter{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"head photo" "prose photo";
  gap:56px 8vw;max-width:1280px;margin:0 auto;padding:140px var(--side) 160px;
}
.ms-beppu{grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"photo head" "photo prose" "voices voices" "end end";border-top:1px solid var(--rule)}
.ms-chapter-head{grid-area:head;align-self:end}
.ms-chapter-title{margin-top:28px;font-family:var(--font-head);font-weight:500;font-size:clamp(24px,2.9vw,38px);line-height:1.75;letter-spacing:.06em;color:var(--ai)}
/* 写真2枚：大きな写真（3:2）と、右下に重ねた小さな写真（4:5）。手持ちの写真が小さくても、引き伸ばしすぎない大きさで見せる */
.ms-photos{grid-area:photo;position:relative;align-self:start;padding-bottom:22%}
.ms-photo{width:82%;margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--washi)}
.ms-photo img,.ms-photo-sub img{width:100%;height:100%;object-fit:cover}
.ms-photo-sub{position:absolute;right:0;bottom:0;width:44%;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--washi);outline:8px solid var(--kinari)}
.ms-photos .ms-photo-sub.reveal-img{transition-delay:.25s}
/* 京都の街の広がり：章の最後に、横長の写真を大きく */
.ms-kyoto{grid-template-areas:"head photo" "prose photo" "wide wide"}
.ms-photo-wide{grid-area:wide;margin:56px 0 0;aspect-ratio:21/9;overflow:hidden;background:var(--washi)}
.ms-photo-wide img{width:100%;height:100%;object-fit:cover}
.ms-prose{grid-area:prose;display:grid;gap:22px;font-size:15.5px;line-height:2.15;letter-spacing:.04em;color:var(--sumi)}
.ms-lead{font-family:var(--font-head);font-weight:500;font-size:clamp(18px,1.7vw,22px);line-height:1.9;letter-spacing:.06em;color:var(--ai)}
.ms-goods{display:grid;gap:10px;margin:8px 0;padding:24px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);list-style:none}
.ms-goods li{display:flex;align-items:baseline;gap:14px;font-family:var(--font-head);font-weight:500;font-size:17px;letter-spacing:.06em;color:var(--ai)}
.ms-goods li::before{content:"";flex-shrink:0;width:5px;height:5px;border-radius:50%;background:var(--kin);transform:translateY(-4px)}
/* お店の方の声：少しずつずらして並べ、街のあちこちから聞こえてくるように */
.ms-voices{grid-area:voices;display:grid;gap:36px;margin:40px 0 0;padding:0;list-style:none}
.ms-voice{font-family:var(--font-head);font-weight:500;font-size:clamp(18px,2.2vw,28px);line-height:1.8;letter-spacing:.04em;color:var(--sumi)}
.ms-voice:nth-child(2){margin-left:12%}
.ms-voice:nth-child(3){margin-left:24%}
.ms-voices .reveal-text:nth-child(2){transition-delay:.15s}
.ms-voices .reveal-text:nth-child(3){transition-delay:.3s}
.ms-prose--end{grid-area:end;justify-items:center;margin-top:48px;text-align:center}
.ms-beppu .ms-prose--end .ms-lead{margin-top:20px;font-size:clamp(20px,2.2vw,28px)}

/* ---------- 5. 100 → 60 → 40 ----------
   動きのないときは、数字と文章を順番に並べて表示する */
.ms-score{color:var(--kinari);background:var(--ai-deep)}
.ms-score-stage{padding:140px var(--side)}
.ms-score-visual{display:none}
.ms-steps{display:grid;gap:120px;max-width:880px;margin:0 auto;text-align:center}
.ms-step[data-num]::before{content:attr(data-num);display:block;margin-bottom:12px;font-family:var(--font-en);font-size:clamp(88px,16vw,180px);line-height:1;letter-spacing:.02em;color:rgba(251,249,244,.9)}
.ms-step--gap[data-num]::before{color:var(--kin)}
.ms-step-title{font-family:var(--font-head);font-weight:500;font-size:clamp(24px,3.4vw,46px);line-height:1.75;letter-spacing:.06em}
.ms-step-title--gold{color:#f1d58a}
.ms-step--note{display:grid;gap:18px}
.ms-step-sub{font-size:15px;letter-spacing:.06em;color:rgba(251,249,244,.7)}
.ms-step-strong{font-family:var(--font-head);font-weight:500;font-size:clamp(20px,2.6vw,32px);line-height:1.8;letter-spacing:.06em;color:#fff}
.ms-step-strong::after{content:"";display:block;width:56px;height:1px;margin:22px auto 4px;background:var(--kin)}
.ms-step-body{font-size:15.5px;line-height:2.1;letter-spacing:.04em;color:rgba(251,249,244,.82)}

/* ---------- 6. その40点を、誰がやる？ → IRIGUCHIがやろう。 ---------- */
.ms-who{color:var(--kinari);background:#081428}
.ms-who-stage{display:grid;justify-items:center;gap:72px;padding:160px var(--side);text-align:center}
.ms-who-q{font-family:var(--font-head);font-weight:500;font-size:clamp(28px,4.4vw,60px);line-height:1.7;letter-spacing:.06em}
.ms-who-list{display:grid;gap:28px;margin:0;padding:0;list-style:none;font-size:clamp(16px,1.6vw,20px);line-height:1.9;letter-spacing:.06em;color:rgba(251,249,244,.78)}
.ms-answer{display:flex;align-items:center;justify-content:center;width:100%;padding:120px 0 40px}
.ms-answer-text{
  position:relative;font-family:var(--font-head);font-weight:500;font-size:clamp(40px,8vw,120px);line-height:1.4;letter-spacing:.04em;color:#fff;
}
.ms-answer-text::after{content:"";position:absolute;left:50%;bottom:-.35em;width:1.1em;height:2px;background:var(--kin);transform:translateX(-50%)}

/* ---------- 7. その思いから、IRIGUCHIは始まった ---------- */
.ms-begin{max-width:960px;margin:0 auto;padding:180px var(--side) 160px;text-align:center}
.ms-begin-title{font-family:var(--font-head);font-weight:500;font-size:clamp(26px,3.6vw,48px);line-height:1.7;letter-spacing:.06em;color:var(--ai)}
.ms-begin-body{margin-top:20px;font-size:clamp(15px,1.4vw,18px);line-height:2;letter-spacing:.06em;color:var(--sumi)}
.ms-acts{display:grid;gap:0;margin:96px auto 0;padding:0;max-width:760px;list-style:none;text-align:left;counter-reset:none}
.ms-acts li{display:grid;grid-template-columns:72px 1fr;align-items:baseline;gap:16px;padding:30px 4px;border-top:1px solid var(--rule);font-family:var(--font-head);font-weight:500;font-size:clamp(17px,1.8vw,22px);line-height:1.85;letter-spacing:.05em;color:var(--sumi)}
.ms-acts li:last-child{border-bottom:1px solid var(--rule)}
.ms-acts li:nth-child(2){transition-delay:.12s}
.ms-acts li:nth-child(3){transition-delay:.24s}
.ms-acts-no{font-family:var(--font-en);font-size:13px;letter-spacing:.2em;color:var(--kin-text)}

/* ---------- 8. MISSION ---------- */
.ms-final{padding:180px var(--side) 160px;text-align:center;color:var(--kinari);background:var(--ai)}
.ms-final-title{margin-top:36px;font-family:var(--font-head);font-weight:500;font-size:clamp(32px,5.4vw,76px);line-height:1.6;letter-spacing:.06em}
.ms-final-body{max-width:640px;margin:56px auto 0;font-size:clamp(15px,1.4vw,18px);line-height:2.1;letter-spacing:.05em;color:rgba(251,249,244,.85)}
/* 京都・嵐山 → 別府 → 日本各地：線が左から右へつながっていく */
.ms-route{position:relative;display:grid;grid-template-columns:repeat(3,1fr);max-width:880px;margin:88px auto 0;padding:0;list-style:none}
.ms-route::before{content:"";position:absolute;left:16.66%;right:16.66%;top:5px;height:1px;background:rgba(251,249,244,.5);transform:scaleX(0);transform-origin:left;transition:transform 2.2s var(--ease) .2s}
.ms-route li{position:relative;display:grid;justify-items:center;align-content:start;gap:14px;padding:0 8px}
.ms-route-dot{width:11px;height:11px;border-radius:50%;background:var(--ai);border:1px solid #e9d9a8;transition:background .6s,transform .6s}
.ms-route-place{font-family:var(--font-head);font-weight:500;font-size:clamp(17px,1.7vw,21px);letter-spacing:.06em}
.ms-route-text{font-size:13.5px;line-height:1.9;letter-spacing:.04em;color:rgba(251,249,244,.75)}
.ms-route li{opacity:0;transform:translateY(12px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.ms-route li:nth-child(2){transition-delay:.7s}
.ms-route li:nth-child(3){transition-delay:1.4s}
.ms-route.is-in::before{transform:scaleX(1)}
.ms-route.is-in li{opacity:1;transform:none}
.ms-route.is-in .ms-route-dot{background:var(--kin);border-color:var(--kin)}
.ms-final-strong{margin-top:104px;font-family:var(--font-head);font-weight:500;font-size:clamp(22px,2.8vw,36px);line-height:1.8;letter-spacing:.06em;color:#fff}
.ms-final-end{margin-top:18px;font-size:15px;letter-spacing:.06em;color:rgba(251,249,244,.8)}
.ms-final-links{display:flex;flex-direction:column;align-items:center;gap:28px;margin-top:40px}
.ms-back{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.06em;color:rgba(251,249,244,.75)}
.ms-back i{font-style:normal;transition:transform .4s var(--ease)}
.ms-back:hover i{transform:translateX(-3px)}

/* =====================================================================
   スクロールに合わせた演出（.ms-motion のとき。編集モードでは使わない）
   ===================================================================== */
/* 100 / 60 / 40：画面に止めた舞台の上で、スクロールに合わせて物語が進む */
.ms-motion:not(.is-editing) .ms-score{height:640vh}
.ms-motion:not(.is-editing) .ms-score-stage{
  position:sticky;top:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:6vw;
  height:100vh;height:100svh;padding:72px var(--side) 40px;overflow:hidden;
}
.ms-motion:not(.is-editing) .ms-score-visual{display:block;transition:opacity 1s var(--ease)}
.ms-motion:not(.is-editing) .ms-step::before{content:none}
.ms-num{display:flex;align-items:baseline;gap:.12em;font-family:var(--font-en);font-size:clamp(120px,19vw,300px);line-height:.9;letter-spacing:.01em;color:var(--kinari);font-variant-numeric:tabular-nums;transition:color 1s var(--ease),opacity 1s var(--ease)}
.ms-num-unit{font-family:var(--font-head);font-size:.16em;letter-spacing:0;color:rgba(251,249,244,.6)}
.ms-score.is-gap .ms-num{color:#f1d58a}
.ms-score.is-dim .ms-num{opacity:.22}
/* 点数のものさし：塗られた部分が点数、点線の部分が足りない分 */
.ms-gauge{position:relative;height:2px;margin-top:48px;background:rgba(251,249,244,.12)}
.ms-gauge-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--kinari);transform:scaleX(var(--fill,0));transform-origin:left}
.ms-gauge-gap{position:absolute;left:60%;right:0;top:-5px;height:12px;border:1px dashed rgba(241,213,138,.7);border-radius:2px;opacity:0;transition:opacity 1s var(--ease),background-color 1s var(--ease)}
.ms-score.is-short .ms-gauge-gap{opacity:1}
.ms-score.is-gap .ms-gauge-gap{background:rgba(226,175,38,.28);border-style:solid;border-color:var(--kin)}
.ms-gauge-scale{display:flex;justify-content:space-between;position:relative;margin-top:16px;font-family:var(--font-en);font-size:11px;letter-spacing:.16em;color:rgba(251,249,244,.45)}
.ms-gauge-60{position:absolute;left:60%;transform:translateX(-50%);opacity:0;transition:opacity 1s}
.ms-score.is-short .ms-gauge-60{opacity:1}
.ms-motion:not(.is-editing) .ms-steps{position:relative;display:block;height:60vh;max-width:none;margin:0;text-align:left}
.ms-motion:not(.is-editing) .ms-step{
  position:absolute;left:0;right:0;top:50%;opacity:0;transform:translateY(calc(-50% + 28px));pointer-events:none;
  transition:opacity 1s var(--ease),transform 1.2s var(--ease);
}
.ms-motion:not(.is-editing) .ms-step.is-on{opacity:1;transform:translateY(-50%);pointer-events:auto}
.ms-motion:not(.is-editing) .ms-step.is-past{opacity:0;transform:translateY(calc(-50% - 28px))}
.ms-motion:not(.is-editing) .ms-step-strong::after{margin-left:0}
.ms-motion:not(.is-editing) .ms-step-title--gold{font-size:clamp(30px,4.4vw,60px)}

/* 誰がやる？：問い → 3つの問いかけ → 静けさ → 光が差して「IRIGUCHIがやろう。」 */
.ms-motion:not(.is-editing) .ms-who{height:560vh}
.ms-motion:not(.is-editing) .ms-who-stage{position:sticky;top:0;display:block;height:100vh;height:100svh;padding:0;overflow:hidden}
.ms-motion:not(.is-editing) .ms-who-q{
  position:absolute;left:var(--side);right:var(--side);top:50%;
  opacity:var(--q-o,0);transform:translateY(calc(-50% + var(--q-y,0) * 1px)) scale(var(--q-s,1));
}
.ms-motion:not(.is-editing) .ms-who-list{position:absolute;left:var(--side);right:var(--side);top:56%;gap:22px}
.ms-motion:not(.is-editing) .ms-who-list li{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.ms-motion:not(.is-editing) .ms-who-list li.is-on{opacity:1;transform:none}
.ms-motion:not(.is-editing) .ms-who-list li.is-past{opacity:.32}
.ms-motion:not(.is-editing) .ms-who-list.is-gone li{opacity:0;transition-duration:1.4s}
/* 光：画面の中央から、生成りの光が広がる */
.ms-motion:not(.is-editing) .ms-answer{
  position:absolute;inset:0;padding:0;background:var(--kinari);
  clip-path:circle(calc(var(--light,0) * 75%) at 50% 52%);
}
.ms-motion:not(.is-editing) .ms-answer-text{color:var(--ai);opacity:var(--a-o,0);transform:translateY(calc((1 - var(--a-o,0)) * 24px))}
.ms-motion:not(.is-editing) .ms-answer-text::after{transform:translateX(-50%) scaleX(var(--a-line,0));transform-origin:center}

/* ---------- スマートフォン ---------- */
@media (max-width:768px){
  .ms-hero{min-height:calc(100svh - 60px);padding:72px 24px 120px}
  .ms-hero-title{margin-top:28px;font-size:clamp(28px,8.4vw,40px);line-height:1.7}
  .ms-ask{min-height:72svh}
  .ms-ask-text{font-size:clamp(21px,6.2vw,28px)}
  .ms-photo-wide{margin-top:16px;aspect-ratio:4/3}
  .ms-chapter,.ms-beppu{grid-template-columns:1fr;grid-template-areas:"head" "photo" "prose" "voices" "end";gap:40px;padding:96px 24px 112px}
  .ms-kyoto{grid-template-areas:"head" "photo" "prose" "wide"}
  .ms-chapter-title{font-size:clamp(22px,6.4vw,28px)}
  .ms-photos{padding-bottom:30%}
  .ms-photo{width:88%}
  .ms-photo-sub{width:46%;outline-width:6px}
  .ms-prose{font-size:15px;line-height:2.05}
  .ms-voice{font-size:clamp(17px,5vw,21px)}
  .ms-voice:nth-child(2){margin-left:6%}
  .ms-voice:nth-child(3){margin-left:12%}
  .ms-steps{gap:96px}
  .ms-step-title{font-size:clamp(20px,6vw,28px)}
  .ms-who-q{font-size:clamp(26px,7.6vw,36px)}
  .ms-answer-text{font-size:clamp(30px,8.4vw,44px)}
  .ms-begin{padding:120px 24px 112px}
  .ms-acts li{grid-template-columns:44px 1fr;gap:8px;padding:24px 0;font-size:16.5px}
  .ms-final{padding:120px 24px 112px}
  .ms-final-title{font-size:clamp(28px,8.4vw,40px)}
  /* 京都・嵐山 → 別府 → 日本各地：スマホでは縦につながる */
  .ms-route{grid-template-columns:1fr;gap:40px;max-width:320px;margin-top:64px;text-align:left}
  .ms-route::before{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto;transform:scaleY(0);transform-origin:top}
  .ms-route.is-in::before{transform:scaleY(1)}
  .ms-route li{justify-items:start;grid-template-columns:11px 1fr;column-gap:20px;padding:0}
  .ms-route-dot{grid-row:span 2;margin-top:6px}
  .ms-final-strong{margin-top:80px;font-size:clamp(20px,5.8vw,26px)}

  /* 100 / 60 / 40：数字を上、文章を下に */
  .ms-motion:not(.is-editing) .ms-score-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:center;gap:24px;padding:84px 24px 32px}
  .ms-num{font-size:clamp(96px,32vw,150px)}
  .ms-gauge{margin-top:28px}
  .ms-motion:not(.is-editing) .ms-steps{height:46svh}
  .ms-motion:not(.is-editing) .ms-who-list{top:58%}
}

/* 動きを減らす設定：演出を止め、すべての文章をそのまま読めるようにする */
@media (prefers-reduced-motion:reduce){
  .ms-hero-label{opacity:1;transform:none}
  .ms-hero-title{-webkit-mask-image:none;mask-image:none}
  .ms-hero-in{transform:none;opacity:1}
  .ms-scroll i::after{animation:none}
  .ms-route li{opacity:1;transform:none}
  .ms-route::before{transform:none}
}