@charset "utf-8";

/* =========================================================================
   設立理念 — 読ませる前に、見せる

   お預かりしたアニメーションを、このサイトの枠に収めたもの。
   6つの場面が順に流れ、最後に理念の全文が下から上へ流れて読める。
   画面のどこかを押すと次へ、← → でも送れる。空白キーで止まる。

   ヘッダーとタブバーはこの舞台の外側にあり、触っていない。
   ========================================================================= */

/* ───────── tokens ─────────
   炭 #0A1410 / 深緑 #10301F / 山藍 #1C4B33 / 若葉 #6FBF73
   灯 #F0932B / 生成り #F6F1E4 / 墨 #22302A                */
:root{
  --sumi:#0A1410; --yamaai:#1C4B33; --wakaba:#6FBF73;
  --tomoshibi:#F0932B; --kinari:#F6F1E4; --boku:#22302A;
  /* サイトがすでに取り寄せている書体に合わせる。もとの指定のままだと、
     この1ページのためにもう2書体を取りにいくことになる。 */
  --mincho:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
}

/* ───────── 舞台 ─────────
   ヘッダー（上）とタブバー（下）の間を、そのまま舞台にする。
   高さを 100dvh から引き算する書き方だと、iOS でアドレスバーが伸び縮み
   するたびに数字がずれる。top / bottom で留めればブラウザが合わせてくれる。 */
.frame{
  position:fixed;overflow:hidden;
  left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--column);
  top:var(--header-h);bottom:var(--nav-h);
  z-index:40;
  /* --fw はフレームの実寸(px)。JSが更新する。--u = 幅の1% */
  --fw:400px; --u:calc(var(--fw) / 100);
  /* ヘッダー・フッターのための余白 */
  /* 外側に本物のヘッダーとタブバーがあるので、ここは息継ぎのぶんだけ。
     --foot は稜線を座らせる高さも兼ねている */
  --head:clamp(14px,5%,40px);
  --foot:clamp(30px,10%,88px);
  --side:6%;
  color:var(--ink,#F3EEE0);
  font-family:var(--mincho);
  --ink:#F3EEE0; --ridge-far:rgba(111,191,115,.13); --ridge-near:#071009;
  --ridge-line:rgba(246,241,228,.30);
  transition:color .9s ease;
}


/* ───────── sky ───────── */
.sky{position:absolute;inset:0;z-index:0}
.sky-layer{position:absolute;inset:0;opacity:0;transition:opacity 1.3s ease}
.sky-layer.on{opacity:1}
.sky-layer[data-s="0"]{background:radial-gradient(120% 80% at 50% 72%,#123021 0%,#0A1410 62%,#050B08 100%)}
.sky-layer[data-s="1"]{background:radial-gradient(120% 80% at 20% 68%,#163A26 0%,#0B1A12 60%,#05100A 100%)}
.sky-layer[data-s="2"]{background:radial-gradient(120% 85% at 50% 92%,#1C4B33 0%,#0D2418 58%,#060F0A 100%)}
.sky-layer[data-s="3"]{background:radial-gradient(90% 65% at 50% 56%,#2C5B3A 0%,#132B1C 55%,#070F0B 100%)}
.sky-layer[data-s="4"]{background:radial-gradient(110% 70% at 50% 78%,#8A5A22 0%,#2E4A2A 40%,#0D1F14 76%,#070E0A 100%)}
.sky-layer[data-s="5"]{background:linear-gradient(#FDF9EF 0%,#F6F1E4 55%,#EFE7D3 100%)}
.glow{position:absolute;left:50%;top:74%;width:220%;height:124%;z-index:0;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(240,147,43,.17) 0%,rgba(240,147,43,0) 55%);
  opacity:.5;transition:opacity 1.3s ease,top 1.5s ease;animation:breathe 11s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.12)}}
.frame.stage-4 .glow{opacity:1;top:64%}
.frame.stage-5 .glow{opacity:.55;top:58%}

/* ───────── signature: 稜線と灯 ───────── */
.ridge{position:absolute;left:0;right:0;bottom:var(--foot);width:100%;height:34%;z-index:1;
  pointer-events:none;opacity:1;transition:opacity 1s ease}
.ridge .far{fill:var(--ridge-far);transition:fill 1s ease}
.ridge .near{fill:var(--ridge-near);transition:fill 1s ease}
.ridge .edge{fill:none;stroke:var(--ridge-line);stroke-width:1.6;transition:stroke 1s ease}
.frame.stage-5{--ink:#22302A;--ridge-far:rgba(28,75,51,.08);--ridge-near:#E4EBDB;--ridge-line:rgba(34,48,42,.28)}
.frame.stage-5 .ridge{opacity:.28}
.lantern{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,1.5,.4,1);
  filter:drop-shadow(0 0 7px rgba(240,147,43,.9))}
.lantern.lit{opacity:1;transform:scale(1);animation:flicker 4.6s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:1}44%{opacity:.62}70%{opacity:.95}}

/* ───────── stage（ヘッダーとフッターの内側） ───────── */
/* 6枚を同じ升目に重ね、その升目の真ん中に置く。
   升目の高さは minmax(0,1fr) で舞台そのものに釘付けにしておく。
   これを書かないと、升目の高さが「いちばん背の高い中身」に合わせて伸びる。
   6枚目には理念の全文が入っていて、狭い画面では700px を超える。すると升目が
   舞台からはみ出し、その真ん中に揃えられる1枚目は画面のずっと下へ落ちる
   （手元の 402x700 では 128px 下がった）。全文は .panel 側で隠すので、
   升目まで伸ばす必要はない。 */
#stage{position:absolute;top:var(--head);bottom:var(--foot);left:0;right:0;z-index:2;
  display:grid;grid-template-rows:minmax(0,1fr);place-items:center;padding:3% var(--side)}
.slide{grid-area:1/1;width:100%;max-height:100%;text-align:center;opacity:0;visibility:hidden;
  pointer-events:none;transition:opacity .55s ease,visibility 0s linear .55s}
.slide.active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .55s ease,visibility 0s}
.ch{display:inline-block;white-space:pre}

/* 1 ── 中央で保持しながら、どんどん大きく */
.sl-title .eyebrow{font-family:var(--gothic);font-weight:300;
  font-size:clamp(8px,calc(var(--u)*2.3),12px);letter-spacing:.5em;text-indent:.5em;
  opacity:0;color:var(--wakaba)}
.sl-title h1{font-weight:600;font-size:clamp(24px,calc(var(--u)*10),58px);
  letter-spacing:.14em;text-indent:.14em;line-height:1.3}
.sl-title .sub{margin-top:.8em;font-size:clamp(12px,calc(var(--u)*4.2),26px);
  letter-spacing:.46em;text-indent:.46em;opacity:.92}
.slide.active .sl-title-grow{animation:swell 2.25s cubic-bezier(.16,.68,.2,1) both}
@keyframes swell{
  0%{opacity:0;transform:scale(.68);filter:blur(8px)}
  30%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:scale(1.14);filter:blur(0)}
}
.slide.active .eyebrow{animation:fadeup .9s ease .12s both}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:.85;transform:none}}

/* 2〜4 ── 二行組みの理念 */
.sl-flow p,.sl-rise p,.sl-burst p{font-weight:600;line-height:1.66;letter-spacing:.08em;
  font-size:clamp(18px,calc(var(--u)*7.2),42px)}

/* 2 ── 左から右へ流れる */
.sl-flow.active .ch{animation:flow .8s cubic-bezier(.16,.84,.3,1) both;animation-delay:calc(var(--i)*.05s)}
@keyframes flow{
  0%{opacity:0;transform:translateX(-1.1em) skewX(-12deg);color:transparent}
  40%{opacity:1;color:var(--tomoshibi)}
  100%{opacity:1;transform:none;color:var(--ink)}
}

/* 3 ── 下から上へ */
.sl-rise.active .ch{animation:rise .85s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--i)*.048s)}
@keyframes rise{
  0%{opacity:0;transform:translateY(1.1em);filter:blur(8px)}
  50%{opacity:1;filter:blur(0);color:var(--wakaba)}
  100%{opacity:1;transform:none;color:var(--ink)}
}

/* 4 ── 中央の一点から、どんどん大きく */
.sl-burst .wrap{position:relative;display:inline-block}
.sl-burst.active .wrap{animation:burst 2.2s cubic-bezier(.13,.72,.16,1) both}
@keyframes burst{
  0%{opacity:0;transform:scale(.05);filter:blur(3px)}
  16%{opacity:1;filter:blur(0)}
  62%{transform:scale(1)}
  100%{transform:scale(1.1)}
}
.halo{position:absolute;left:50%;top:50%;
  width:calc(var(--u)*44);height:calc(var(--u)*44);margin:calc(var(--u)*-22) 0 0 calc(var(--u)*-22);
  border:1px solid rgba(240,147,43,.55);border-radius:50%;opacity:0}
.slide.active .halo{animation:halo 1.5s ease-out both}
.slide.active .halo.b{animation-delay:.45s}
@keyframes halo{0%{opacity:.9;transform:scale(.05)}100%{opacity:0;transform:scale(3.2)}}

/* 5 ── 物語を描く（縦構図：足もと→まち→社会） */
.sl-story{display:flex;flex-direction:column;justify-content:center;height:100%}
.sl-story .art{width:100%;height:auto;max-height:66%;display:block;flex:0 1 auto;min-height:0}
.sl-story .cap{margin-top:5%}
.sl-story .cap b{display:block;font-weight:600;font-size:clamp(15px,calc(var(--u)*5.2),30px);
  letter-spacing:.26em;text-indent:.26em;opacity:0}
.sl-story .cap span{display:block;margin-top:.75em;font-size:clamp(11px,calc(var(--u)*3.4),19px);
  letter-spacing:.1em;opacity:0}
.slide.active .cap b{animation:fadeup .9s ease .35s both}
.slide.active .cap span{animation:fadeup .9s ease .75s both}
.ink{fill:none;stroke:#F6F1E4;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ink.warm{stroke:var(--tomoshibi)}
.ink.leaf{stroke:var(--wakaba)}
.draw{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400)}
.slide.active .draw{animation:draw .7s ease forwards;animation-delay:var(--d,0s)}
@keyframes draw{to{stroke-dashoffset:0}}
.pop{opacity:0;transform-box:fill-box;transform-origin:center}
.slide.active .pop{animation:pop .55s cubic-bezier(.2,1.6,.4,1) forwards;animation-delay:var(--d,0s)}
@keyframes pop{0%{opacity:0;transform:translateY(8px) scale(.7)}100%{opacity:1;transform:none}}
.sun{opacity:0;transform:translateY(60px)}
.slide.active .sun{animation:sunrise 1.2s cubic-bezier(.25,.6,.2,1) .12s forwards}
@keyframes sunrise{to{opacity:1;transform:translateY(0)}}
.ring{opacity:0;transform-box:fill-box;transform-origin:center}
.slide.active .ring{animation:ripple 1.5s ease-out infinite;animation-delay:var(--d,0s)}
@keyframes ripple{0%{opacity:.75;transform:scale(.15)}100%{opacity:0;transform:scale(2.6)}}

/* 6 ── スクロールして読む */
.sl-read{width:100%;height:100%}
.sl-read .panel{position:relative;height:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(transparent 0,#000 16%,#000 84%,transparent 100%)}
.sl-read .roll{font-family:var(--gothic);font-weight:400;font-size:14pt;line-height:2.05;
  letter-spacing:.03em;text-align:left;color:var(--boku)}
.sl-read .roll p+p{margin-top:1.5em}
.sl-read .roll p:last-child{padding-bottom:1em}
.slide.active .roll{animation:roll var(--dur,5s) linear forwards}
@keyframes roll{from{transform:translateY(var(--from,100%))}to{transform:translateY(var(--to,-100%))}}
.leafmark{width:26px;height:1px;background:var(--tomoshibi);margin:0 auto 1.4rem}

/* ───────── ending ───────── */
#ending{position:absolute;inset:0;z-index:4;display:grid;place-items:center;text-align:center;
  padding:var(--head) var(--side) var(--foot);
  background:radial-gradient(80% 60% at 50% 40%,#FDFAF2,#EFE7D3);color:var(--boku);
  opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 1s}
.frame.ending #ending{opacity:1;visibility:visible}
#ending .slogan{font-size:clamp(16px,calc(var(--u)*5.4),32px);font-weight:600;letter-spacing:.12em;line-height:1.8}
#ending .org{margin-top:2rem;font-size:clamp(12px,calc(var(--u)*3.6),21px);letter-spacing:.4em;text-indent:.4em}
#ending .en{margin-top:.6rem;font-family:var(--gothic);font-weight:300;font-size:9px;
  letter-spacing:.3em;text-indent:.3em;color:#5C6B60}
#ending .again{margin-top:2.4rem;font-family:var(--gothic);font-size:11px;letter-spacing:.16em;
  padding:.85em 2.2em;border:1px solid rgba(34,48,42,.4);border-radius:999px;background:none;
  color:var(--boku);cursor:pointer;transition:background .3s,color .3s}
#ending .again:hover{background:var(--yamaai);color:var(--kinari);border-color:var(--yamaai)}

/* ───────── 操作UIは非表示（クリック／←→／スペースのみ） ───────── */
:focus-visible{outline:2px solid var(--tomoshibi);outline-offset:3px}

.frame.paused .slide.active *,.frame.paused .slide.active{animation-play-state:paused!important}
.frame.paused .lantern.lit{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .glow{animation:none}
  .slide.active *{animation-duration:.5s!important;animation-delay:0s!important}
  .slide.active .roll{animation-duration:var(--dur,5s)!important}
  @keyframes swell{from{opacity:0}to{opacity:1;transform:scale(1)}}
  @keyframes burst{from{opacity:0}to{opacity:1;transform:scale(1)}}
}

/* 終わりの画面から、ほかのページへ。
   ここで行き止まりにすると、タブバーを押すしか先が無い。
   「はじめから見る」は輪郭だけの控えめな見た目なので、こちらは面で塗って
   区別する。押せる高さは 48px を割らない。 */
.endGo { display: grid; gap: 8px; margin-top: 1.1rem; width: 100%; }
.endGo__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; padding: 11px 20px;
  border-radius: 999px;
  background: var(--yamaai);
  color: var(--kinari);
  font-family: var(--gothic); font-size: 16px; font-weight: 700;
  letter-spacing: .04em; text-decoration: none;
  box-shadow: 0 3px 10px rgba(34, 48, 42, .22);
  transition: transform .18s ease, background .25s ease;
}
.endGo__btn span { opacity: .7; font-weight: 700; }
.endGo__btn:active { transform: translateY(2px); background: #143726; }

/* 終わりの画面は、中身が入りきらないときだけ動かせるようにしておく */
#ending > div { max-height: 100%; overflow-y: auto; width: 100%; max-width: 22rem; }
#ending .again { margin-top: 1.6rem; }

/* 画面が低い端末では、行き先まで一目で見えるように余白を詰める。
   文字は 12pt（16px）のまま。詰めるのは余白と、二の次の英字表記だけ。 */
@media (max-height: 660px) {
  #ending .en { display: none; }
  #ending .org { margin-top: 1.1rem; }
  #ending .again { margin-top: 1rem; }
  .endGo { gap: 6px; margin-top: .8rem; }
  .endGo__btn { min-height: 44px; padding: 9px 18px; }
}

/* この1ページだけ、ページ自体は動かさない。動くのは舞台の中だけ */
body[data-page="rinen"] { overflow: hidden; }
body[data-page="rinen"] .column { min-height: 100vh; min-height: 100dvh; }

/* 本文が流れる場面の字。もとは 14pt（18.7px）。会員は70代が中心なので、
   このサイトの下限（12pt = 16px）を割らないようにしてある。 */
.sl-read .roll { font-size: clamp(16px, calc(var(--u) * 4.6), 19px); }