/* ===== VISION 詳細ページ（このページだけで読み込む） =====
   MISSION が「暗がりから光へ」の物語なら、VISION は最初から最後まで明るく開かれた「これからの世界」。
   中心にあるのは「価値はそのまま、伝え方だけが変わる」という考え方で、演出もそれに合わせる
   （同じものが両側へ届く線・「同じ」の強調・言葉だけが入れ替わる「伝え方。」・ひとつずつ灯る魅力）。
   スクロールに合わせた演出は html に .vs-motion が付いたときだけ（js/vision.js）。
   動きを減らす設定・編集モード・JavaScript なしでは、同じ文章を上から順に読める形で表示する */

.page-vision{background:#fdfcf8}
/* 日本語を言葉の切れ目で改行する */
.vs{word-break:auto-phrase}
.vs-label{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-en);font-size:12px;letter-spacing:.2em;color:var(--kin-text)}
.vs-label::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--kin)}
.vs-label--light{color:#e9d9a8}

/* ---------- 1. ファーストビュー ---------- */
.vs-hero{
  position:relative;display:flex;align-items:center;justify-content:center;min-height:calc(100svh - 72px);
  padding:96px var(--side) 150px;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,#fdfcf8 0%,#f6f3ec 100%);
}
.vs-hero-in{position:relative;z-index:1;transform:translateY(calc(var(--hero,0) * -60px));opacity:calc(1 - var(--hero,0) * 1.3)}
.vs-hero-label{opacity:0;transition:opacity 1.4s var(--ease) .2s}
.vs-hero-title{display:grid;gap:.1em;margin-top:40px;font-family:var(--font-head);font-weight:500;font-size:clamp(32px,5.6vw,80px);line-height:1.5;letter-spacing:.06em;color:var(--ai)}
/* 2行が左右から近づき、まん中でそろう（ちがう場所から来ても、届ける価値はひとつ） */
.vs-hero-line{display:block;opacity:0;transition:opacity 1.6s var(--ease),transform 2.2s var(--ease)}
.vs-hero-line--a{transform:translateX(-6vw);transition-delay:.4s}
.vs-hero-line--b{transform:translateX(6vw);transition-delay:.7s}
.vs-hero-sub{margin-top:48px;font-size:clamp(14px,1.3vw,17px);letter-spacing:.08em;color:var(--usuzumi);opacity:0;transition:opacity 1.6s var(--ease) 1.6s}
.is-ready .vs-hero-label,.is-ready .vs-hero-sub{opacity:1}
.is-ready .vs-hero-line{opacity:1;transform:none}
/* 地平線：まん中から両側へ、同じ光が伸びていく */
.vs-hero-horizon{position:absolute;left:0;right:0;bottom:22%;height:1px}
.vs-hero-horizon i{position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--kin) 50%,transparent);transform:scaleX(0);transition:transform 2.6s var(--ease) 1.1s;opacity:.7}
.is-ready .vs-hero-horizon i{transform:scaleX(1)}

/* ---------- 2. 同じものを、同じ熱意で ---------- */
.vs-same{max-width:1180px;margin:0 auto;padding:160px var(--side) 170px;text-align:center}
/* 日本のお客様 ＝ 海外のお客様：左右に同じ言葉が並び、まん中の「＝」で同じであることを示す */
.vs-equal{max-width:880px;margin:72px auto 0;overflow-x:clip}   /* 右の言葉が横から入ってくる間も、画面の外にはみ出さない */
.vs-equal-head{display:grid;grid-template-columns:1fr 72px 1fr;align-items:end;padding:0 0 22px;border-bottom:1px solid var(--rule)}
.vs-equal-who{font-size:13.5px;letter-spacing:.1em;color:var(--usuzumi)}
.vs-equal-list{margin:0;padding:0;list-style:none}
.vs-equal-row{position:relative;padding:40px 0 34px;border-bottom:1px solid var(--rule)}
.vs-equal-no{position:absolute;left:0;top:44px;font-family:var(--font-en);font-size:11px;letter-spacing:.2em;color:var(--kin-text)}
.vs-equal-pair{display:grid;grid-template-columns:1fr 72px 1fr;align-items:center}
.vs-equal-word{font-family:var(--font-head);font-weight:500;font-size:clamp(26px,3.4vw,44px);line-height:1.4;letter-spacing:.06em;color:var(--ai)}
.vs-equal-mark{font-family:var(--font-head);font-size:clamp(22px,2.4vw,30px);color:var(--kin)}
.vs-equal-text{margin-top:18px;font-size:14.5px;line-height:1.9;letter-spacing:.05em;color:var(--usuzumi)}
/* 左の言葉 → 右の言葉がそろう → 「＝」の順に現れる */
.vs-equal-word--jp{opacity:0;transition:opacity 1.1s var(--ease) .1s}
.vs-equal-word--world{opacity:0;transform:translateX(28px);transition:opacity 1.1s var(--ease) .55s,transform 1.4s var(--ease) .55s}
.vs-equal-mark{opacity:0;transform:scale(.6);transition:opacity .9s var(--ease) 1.15s,transform 1s var(--ease) 1.15s}
.vs-equal-text{opacity:0;transition:opacity 1.2s var(--ease) 1.4s}
.vs-equal-row.is-in .vs-equal-word--jp,.vs-equal-row.is-in .vs-equal-word--world,.vs-equal-row.is-in .vs-equal-mark,.vs-equal-row.is-in .vs-equal-text{opacity:1;transform:none}
.is-editing .vs-equal-word,.is-editing .vs-equal-mark,.is-editing .vs-equal-text{opacity:1;transform:none}
.vs-same-deliver{margin-top:64px;font-size:clamp(15px,1.5vw,19px);letter-spacing:.06em;color:var(--sumi)}
.vs-same-key{margin-top:56px;font-family:var(--font-head);font-weight:500;font-size:clamp(24px,3.4vw,46px);line-height:1.7;letter-spacing:.05em;color:var(--ai)}
::highlight(vs-same){color:#8f6a10;text-decoration:underline;text-decoration-color:rgba(226,175,38,.75);text-decoration-thickness:1px;text-underline-offset:.3em}
.vs-same-end{margin-top:40px;font-size:15px;letter-spacing:.06em;color:var(--usuzumi)}

/* ---------- 3. いま起きていること ---------- */
.vs-issue{padding:150px var(--side);background:var(--washi)}
.vs-issue-in{display:grid;gap:26px;max-width:720px;margin:0 auto}
.vs-issue-lead{font-size:15px;letter-spacing:.06em;color:var(--usuzumi)}
.vs-issue-line{font-family:var(--font-head);font-weight:500;font-size:clamp(18px,2vw,25px);line-height:1.85;letter-spacing:.05em;color:var(--sumi)}
/* 伝わらない：文章の終わりが、少しずつかすんでいく（読める濃さは残す） */
.vs-fade-word.is-in{-webkit-mask-image:linear-gradient(90deg,#000 55%,rgba(0,0,0,.45) 100%);mask-image:linear-gradient(90deg,#000 55%,rgba(0,0,0,.45) 100%)}
.vs-issue-lost{padding-top:24px;font-size:15.5px;line-height:2.1;letter-spacing:.05em;color:var(--usuzumi)}
.vs-issue-stance{padding-top:28px;border-top:1px solid var(--rule);font-family:var(--font-head);font-weight:500;font-size:clamp(19px,2.2vw,27px);line-height:1.8;letter-spacing:.05em;color:var(--ai)}

/* ---------- 4. 大切なものは、変えなくていい。 ---------- */
.vs-keep{max-width:1000px;margin:0 auto;padding:190px var(--side) 170px;text-align:center}
.vs-keep-title{font-family:var(--font-head);font-weight:500;font-size:clamp(32px,5.2vw,72px);line-height:1.6;letter-spacing:.06em;color:var(--ai)}
.vs-keep-list{display:grid;gap:0;max-width:720px;margin:96px auto 0;padding:0;list-style:none;text-align:left}
.vs-keep-list li{display:grid;grid-template-columns:40px 1fr;align-items:baseline;gap:12px;padding:28px 6px;border-top:1px solid var(--rule);font-size:clamp(16px,1.7vw,20px);line-height:1.9;letter-spacing:.05em;color:var(--sumi)}
.vs-keep-list li:last-child{border-bottom:1px solid var(--rule)}
.vs-keep-list li:nth-child(2){transition-delay:.12s}
.vs-keep-list li:nth-child(3){transition-delay:.24s}
/* 「そのまま」の印：金の輪 */
.vs-keep-mark{width:14px;height:14px;border:1px solid var(--kin);border-radius:50%;transform:translateY(1px)}

/* ---------- 5. 変えるのは、伝え方。 ---------- */
.vs-tell{color:var(--kinari);background:var(--ai-deep)}
.vs-tell-stage{display:grid;justify-items:center;gap:56px;padding:170px var(--side);text-align:center}
.vs-tell-title{font-family:var(--font-head);font-weight:500;font-size:clamp(36px,6.4vw,92px);line-height:1.4;letter-spacing:.04em}
.vs-tell-a{color:rgba(251,249,244,.62)}
.vs-tell-b{color:#fff}
.vs-tell-words{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;max-width:720px;font-family:var(--font-en);font-size:15px;letter-spacing:.12em;color:#e9d9a8}
.vs-tell-words span:lang(ja),.vs-tell-words span:lang(zh-Hans),.vs-tell-words span:lang(ko){font-family:var(--font-body);letter-spacing:.06em}
.vs-tell-body{display:grid;gap:14px;max-width:640px;font-size:clamp(15px,1.5vw,18px);line-height:2;letter-spacing:.05em;color:rgba(251,249,244,.85)}
.vs-tell-body p:last-child{margin-top:14px;font-family:var(--font-head);font-weight:500;font-size:clamp(18px,2vw,24px);color:#fff}

/* ---------- 6. すべての魅力に、選ばれる機会を ---------- */
.vs-chance{position:relative;display:flex;align-items:center;justify-content:center;min-height:100svh;padding:160px var(--side);overflow:hidden;color:var(--kinari);background:#0a1a36}
.vs-lights{position:absolute;inset:0}
.vs-light{position:absolute;width:5px;height:5px;border-radius:50%;background:#e9d9a8;opacity:.75;transform:scale(1)}
.vs-chance-in{position:relative;display:grid;gap:56px;text-align:center}
.vs-chance-a{font-family:var(--font-head);font-weight:500;font-size:clamp(20px,2.6vw,32px);line-height:1.85;letter-spacing:.05em;color:rgba(251,249,244,.82)}
.vs-chance-b{font-family:var(--font-head);font-weight:500;font-size:clamp(28px,4.4vw,58px);line-height:1.6;letter-spacing:.05em;color:#fff}

/* ---------- 7. 良いものが、正しく選ばれる世界へ。 ---------- */
.vs-final{padding:190px var(--side) 160px;text-align:center;color:var(--kinari);background:var(--ai)}
.vs-final-title{margin-top:36px;font-family:var(--font-head);font-weight:500;font-size:clamp(32px,5.6vw,80px);line-height:1.55;letter-spacing:.06em}
.vs-final-end{margin-top:48px;font-size:clamp(15px,1.4vw,18px);letter-spacing:.06em;color:rgba(251,249,244,.85)}
.vs-final-links{display:flex;flex-direction:column;align-items:center;gap:28px;margin-top:24px}
.vs-back{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.06em;color:rgba(251,249,244,.75)}
.vs-back i{font-style:normal;transition:transform .4s var(--ease)}
.vs-back:hover i{transform:translateX(-3px)}

/* =====================================================================
   スクロールに合わせた演出（.vs-motion のとき。編集モードでは使わない）
   ===================================================================== */
/* 同じものを、同じ熱意で：スクロールに合わせて「同じ」が順に灯る。言葉は少しずつ大きく近づく */
.vs-motion:not(.is-editing) .vs-same-key{transform:scale(calc(.94 + var(--key,0) * .06));opacity:calc(.25 + var(--key,0) * .75)}
/* 暗くなった魅力の点：スクロールで、ひとつずつ灯っていく */
.vs-motion:not(.is-editing) .vs-light{opacity:.12;transform:scale(.6);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),box-shadow 1.2s}
.vs-motion:not(.is-editing) .vs-light.is-on{opacity:.95;transform:scale(1);box-shadow:0 0 12px 2px rgba(226,175,38,.45)}
/* 変えるのは、伝え方。：「変えるのは、」はそのまま。伝える言葉だけが、スクロールで入れ替わっていく */
.vs-motion:not(.is-editing) .vs-tell{height:420vh}
.vs-motion:not(.is-editing) .vs-tell-stage{position:sticky;top:0;align-content:center;height:100vh;height:100svh;padding:72px var(--side) 40px;gap:40px;overflow:hidden}
.vs-motion:not(.is-editing) .vs-tell-b{display:inline-block;opacity:var(--b-o,0);transform:translateY(calc((1 - var(--b-o,0)) * 18px))}
.vs-motion:not(.is-editing) .vs-tell-words{position:relative;display:block;width:100%;height:2.4em;font-size:clamp(22px,2.6vw,34px)}
.vs-motion:not(.is-editing) .vs-tell-words span{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.vs-motion:not(.is-editing) .vs-tell-words span.is-on{opacity:1;transform:none}
.vs-motion:not(.is-editing) .vs-tell-body p{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.vs-motion:not(.is-editing) .vs-tell-body p.is-on{opacity:1;transform:none}

/* ---------- スマートフォン ---------- */
@media (max-width:768px){
  .vs-hero{min-height:calc(100svh - 60px);padding:72px 24px 130px}
  .vs-hero-title{margin-top:28px;font-size:clamp(24px,7.2vw,36px);line-height:1.6}
  .vs-hero-line--a{transform:translateX(-12vw)}
  .vs-hero-line--b{transform:translateX(12vw)}
  .vs-hero-sub{margin-top:36px}
  .vs-same{padding:110px 24px 120px}
  .vs-equal{margin-top:48px}
  .vs-equal-head,.vs-equal-pair{grid-template-columns:1fr 40px 1fr}
  .vs-equal-who{font-size:12.5px;letter-spacing:.06em}
  .vs-equal-row{padding:34px 0 26px}
  .vs-equal-no{top:12px;left:50%;transform:translateX(-50%)}
  .vs-equal-word{font-size:clamp(22px,6.4vw,28px)}
  .vs-equal-text{margin-top:12px;font-size:13.5px}
  .vs-same-key{font-size:clamp(21px,6vw,28px)}
  .vs-issue{padding:110px 24px}
  .vs-issue-line{font-size:17.5px}
  .vs-keep{padding:130px 24px 120px}
  .vs-keep-title{font-size:clamp(28px,8.4vw,40px)}
  .vs-keep-list{margin-top:64px}
  .vs-keep-list li{grid-template-columns:28px 1fr;padding:22px 0;font-size:16px}
  .vs-tell-stage{padding:120px 24px}
  .vs-tell-title{font-size:clamp(32px,10vw,48px)}
  .vs-chance{padding:120px 24px}
  .vs-chance-b{font-size:clamp(25px,7.4vw,34px)}
  .vs-final{padding:130px 24px 112px}
  .vs-final-title{font-size:clamp(27px,8vw,40px)}
  .vs-motion:not(.is-editing) .vs-tell-stage{padding:72px 24px 32px;gap:32px}
}

/* 動きを減らす設定：演出を止め、すべての文章をそのまま読めるようにする */
@media (prefers-reduced-motion:reduce){
  .vs-hero-label,.vs-hero-sub,.vs-hero-line{opacity:1;transform:none}
  .vs-hero-horizon i{transform:none}
  .vs-equal-word,.vs-equal-mark,.vs-equal-text{opacity:1!important;transform:none!important}
  .vs-fade-word.is-in{-webkit-mask-image:none;mask-image:none}
}