/* 群青 ─ 画面の上に置くもの。説明文は1つも置かない。 */

:root{
  --washi:#F3EFE4;
  --sumi:#14161C;
  --gunjo:#2E5EAA;
  --gunjo-deep:#16294B;
  --shu:#D6482B;
  --kin:#C9A24B;
  --mincho:"Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --gothic:"Zen Kaku Gothic New", system-ui, sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:#070E1B; color:var(--washi);
  font-family:var(--gothic); overflow:hidden;
  -webkit-font-smoothing:antialiased;
  /* ★overflow-wrap:anywhere を全体に掛けてはいけない。
     「どこで改行してもよい」という指定なので、句読点を行頭に送らない
     日本語の禁則が無効になる。「、」や「。」が行頭に落ちる原因はこれ
     （2026-09-03 内田指摘）。長い英数字だけ個別に折る。 */
  /* ★word-break は normal。keep-all は「語の途中で折らない」指定で、
     日本語では連なり全体が折れなくなり、本文が箱からあふれる
     （2026-09-03 実測：会社案内のFAQが 350px の箱に 381px）。
     句読点を行頭に送らない禁則は line-break:strict が担う。
     overflow-wrap:anywhere は使わない（禁則を無効にするため）。 */
  word-break:normal; line-break:strict; overflow-wrap:normal;
}
html.is-playing, html.is-playing body{cursor:none;}
html.is-playing a, html.is-playing button{cursor:none;}

.gj{position:fixed; inset:0;}
/* ★海が組み上がるまで canvas を出さない。
   場が空のまま描くと、黒地に粒だけの1枚が一瞬映る（2026-09-03 内田指摘）。
   それまでは body の地の色だけを見せる。 */
.gj-canvas-wrap{position:absolute; inset:0; opacity:0;
  transition:opacity 1.2s var(--ease);}
/* ★クラス名は固有にすること。gj-ready は第五幕が溜めリングに使っており、
   同じ名前を借りたせいで第五幕が canvas ごと消していた（2026-09-03）。 */
html.gj-canvas-on .gj-canvas-wrap{opacity:1;}
#gj-canvas{display:block; width:100%; height:100%;}

/* ── 読み込み：線が1本だけ ───────────────────────────── */
.gj-loader{
  position:absolute; inset:0; display:grid; place-content:center; gap:1.6rem;
  background:#070E1B; z-index:60; transition:opacity 1.1s var(--ease), visibility 1.1s;
}
.gj-loader.is-done{opacity:0; visibility:hidden;}
.gj-loader__mark{
  font-family:var(--mincho); font-weight:400; font-size:clamp(1.4rem,3.2vw,2.1rem);
  letter-spacing:.62em; text-indent:.62em; color:rgba(243,239,228,.5); text-align:center;
}
.gj-loader__bar{width:min(38vw,240px); height:1px; background:rgba(243,239,228,.16); overflow:hidden;}
.gj-loader__bar i{
  display:block; height:100%; background:var(--washi);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .5s linear;
}

/* ── 入口 ────────────────────────────────────────────── */
.gj-gate{
  position:absolute; inset:0; z-index:55; border:0; background:transparent;
  color:inherit; font:inherit; display:grid; place-content:center; gap:.1rem;
  text-align:center; opacity:0; visibility:hidden;
  /* 入口から青を出す。ここは canvas がまだ何も描いていない時間帯なので、
     地が無いと真っ黒な画面から始まってしまう。 */
  /* ★塗りつぶさない。後ろで深海が動いているので、透かして見せる。
     文字の可読性はここの濃さで作る（地を敷かないと社名が沈む）。 */
  background:
    radial-gradient(120% 88% at 50% 44%, rgba(12,32,60,.16), rgba(4,10,20,.60) 62%),
    linear-gradient(180deg, rgba(5,12,23,.52) 0%, rgba(7,18,34,.30) 44%, rgba(4,10,19,.64) 100%);
  transition:opacity 1.3s var(--ease), visibility 1.3s;
}
.gj-gate.is-on{opacity:1; visibility:visible;}
/* 読み込み中のスプラッシュは出さない（2026-09-03 内田指示）。
   素材が揃うまでは地の色だけを出し、揃ったら入口が滲んで現れる。
   要素は消さずに残す：ui.loading()／ui.loaderDone() がこの節点を触っている。 */
.gj-loader{display:none !important;}
.gj-gate__ja{
  font-family:var(--mincho); font-weight:600;
  font-size:clamp(3.4rem,13vw,9rem); line-height:1; letter-spacing:.16em; text-indent:.16em;
}
.gj-gate__kana{
  font-size:clamp(.6rem,1.5vw,.74rem); letter-spacing:.7em; text-indent:.7em;
  color:rgba(243,239,228,.42); margin-top:1.1rem;
}
.gj-gate__sub{
  font-family:var(--mincho); font-size:clamp(.86rem,2vw,1.05rem);
  letter-spacing:.4em; text-indent:.4em; color:rgba(243,239,228,.7); margin-top:1.9rem;
}
/* 物語のはじまり。丸く、内側から光らせる。
   ★線を1本引くだけの表示は、静止画では整って見えても画面上では素っ気ない。
     押す場所だと分かる形にして、光でこちらへ呼ぶ。 */
.gj-gate__go{
  /* ★親が place-content:center のグリッドなので、幅を持つ要素は左へ寄る。
     justify-self で自分の列の中央に置き直す。 */
  margin-top:3.2rem; justify-self:center; position:relative; display:grid; place-items:center;
  width:clamp(108px,13vw,142px); aspect-ratio:1; border:0; border-radius:50%;
  cursor:pointer; color:var(--washi); font-family:var(--gothic);
  font-size:.98rem; letter-spacing:.24em; text-indent:.24em; font-weight:500;
  /* 海の中から見上げた太陽。芯は白く灼け、外へ向かって琥珀へ落ちる。
     いちばん外だけ青へ散らす（水の中なので、光は最後に青へほどける）。 */
  color:#12233B;
  background:
    radial-gradient(circle at 44% 38%,
      #FFF9E6 0%, #FFE9A8 18%, #FFC65E 40%, #F0972E 66%, #B45F17 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,240,205,.42),
    inset 0 -10px 24px rgba(150,80,20,.32),
    0 0 30px rgba(246,182,80,.62),
    0 0 84px rgba(238,150,50,.38),
    0 0 150px rgba(86,140,205,.28),
    0 12px 34px rgba(4,10,20,.5);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
/* まわりの淡い光。ゆっくり息をする。 */
.gj-gate__go::before{
  content:""; position:absolute; inset:-42%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(252,196,104,.40), rgba(246,168,60,.10) 46%, rgba(246,168,60,0) 70%);
  animation:gjBreath 5.4s ease-in-out infinite;
}
.gj-gate__go span{ position:relative; }
.gj-gate__go:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:
    inset 0 0 0 1px rgba(255,244,214,.55),
    inset 0 -10px 24px rgba(150,80,20,.28),
    0 0 40px rgba(252,196,104,.78),
    0 0 118px rgba(240,160,56,.46),
    0 0 190px rgba(86,140,205,.30),
    0 16px 40px rgba(4,10,20,.5);
}
.gj-gate__go:focus-visible{ outline:2px solid var(--kin); outline-offset:6px; }
@keyframes gjBreath{
  0%,100%{ opacity:.55; transform:scale(.94); }
  50%    { opacity:1;   transform:scale(1.06); }
}
@media (prefers-reduced-motion: reduce){ .gj-gate__go::before{ animation:none; } }

.gj-gate__note{margin-top:1.5rem; font-size:.6rem; letter-spacing:.3em; color:rgba(243,239,228,.3);}
@keyframes gjPulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ── 章タイトル：にじんで現れ、にじんで消える ─────────── */
.gj-chapter{
  position:absolute; inset:0; z-index:30; display:grid; place-content:center;
  gap:.7rem; text-align:center; pointer-events:none; opacity:0;
}
.gj-chapter__no{
  font-family:var(--mincho); font-size:.7rem; letter-spacing:.6em; text-indent:.6em;
  color:rgba(246,243,236,.78);
  text-shadow:0 1px 14px rgba(7,14,27,.9), 0 0 34px rgba(7,14,27,.7);
}
.gj-chapter__ja{
  font-family:var(--mincho); font-weight:600;
  font-size:clamp(2.6rem,9vw,6.4rem); line-height:1; letter-spacing:.2em; text-indent:.2em;
  text-shadow:0 2px 20px rgba(7,14,27,.92), 0 0 64px rgba(7,14,27,.8);
}
.gj-chapter__en{
  font-size:.6rem; letter-spacing:.44em; text-indent:.44em; color:rgba(246,243,236,.7);
  text-shadow:0 1px 14px rgba(7,14,27,.9), 0 0 30px rgba(7,14,27,.7);
}
.gj-chapter.is-on{animation:gjBleedIn 1.5s var(--ease) forwards;}
.gj-chapter.is-out{animation:gjBleedOut 1.5s var(--ease) forwards;}
@keyframes gjBleedIn{
  0%{opacity:0; filter:blur(22px); transform:translateY(14px) scale(1.05);}
  55%{opacity:1;}
  100%{opacity:1; filter:blur(0); transform:none;}
}
@keyframes gjBleedOut{
  0%{opacity:1; filter:blur(0);}
  100%{opacity:0; filter:blur(20px); transform:translateY(-10px) scale(.99);}
}

/* ── 語り（字幕） ────────────────────────────────────── */
.gj-subtitle{
  /* 縦書き。右から左へ、1〜3行で組む。
     ★折り返しは max-height で決まる（縦書きでは高さ＝1行の長さ）。
       いちばん長い語りが20字なので、この高さだと1〜2行に収まる。
     ★line-height は縦書きでは行間＝列の間隔になる。詰めると行がくっつく。 */
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  margin:0; z-index:32; pointer-events:none;
  writing-mode:vertical-rl; text-align:start;
  max-height:min(70vh,26em);
  font-family:var(--mincho); font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:2.0;
  letter-spacing:.16em; color:rgba(246,243,236,.98);
  /* 第五幕は水面へ出て地が明るくなるので、影だけでは足りない。
     ただし地を敷くと、どう作っても四角い板が貼り付いて見える
     （ぼかしの外周が要素の外に落ちるため、箱の中では透明に届かない）。
     地はやめ、文字そのものに暗いにじみを重ねる。版画の絵柄にはこちらが合う。 */
  text-shadow:
    0 0 2px rgba(7,14,27,.98),
    0 0 5px rgba(7,14,27,.92),
    0 0 12px rgba(7,14,27,.86),
    0 0 26px rgba(7,14,27,.72),
    0 1px 2px rgba(7,14,27,.98);
  opacity:0; filter:blur(10px);
  transition:opacity 1.25s var(--ease), filter 1.25s var(--ease);
}
.gj-subtitle.is-on{opacity:1; filter:blur(0);}

/* ── 操作カード（動詞の教え方） ──────────────────────── */
.gj-cartel{
  position:absolute; left:50%; top:clamp(56px,10vh,96px); transform:translateX(-50%) translateY(-8px);
  z-index:34; display:flex; align-items:center; gap:.85rem; pointer-events:none;
  padding:.6rem 1.15rem .6rem .8rem;
  border:1px solid rgba(243,239,228,.18); border-radius:999px;
  background:rgba(7,14,27,.34); backdrop-filter:blur(7px);
  opacity:0; transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.gj-cartel.is-on{opacity:1; transform:translateX(-50%) translateY(0);}
/* 動詞は幕によって長さが違う（ひらく／温めてあげてください）。
   字間を広く取りすぎると、長い側が横に伸びて画面からはみ出す。 */
.gj-cartel__ja{font-family:var(--mincho); font-size:.94rem; letter-spacing:.13em;}
.gj-cartel__en{font-size:.56rem; letter-spacing:.3em; color:rgba(243,239,228,.45);}
.gj-cartel__ico{
  position:relative; width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(243,239,228,.55); display:inline-block; flex:0 0 auto;
}
.gj-cartel__ico::before{
  content:""; position:absolute; left:50%; top:50%; width:6px; height:6px;
  margin:-3px 0 0 -3px; border-radius:50%; background:var(--washi);
}
.gj-cartel__ico[data-glyph="hold"]::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid rgba(243,239,228,.35); animation:gjHold 1.9s var(--ease) infinite;
}
@keyframes gjHold{0%{transform:scale(.7);opacity:0}50%{opacity:.9}100%{transform:scale(1.25);opacity:0}}
.gj-cartel__ico[data-glyph="drag"]::after,
.gj-cartel__ico[data-glyph="swipe"]::after{
  content:""; position:absolute; left:50%; top:50%; width:20px; height:1px; margin:-1px 0 0 -10px;
  background:linear-gradient(90deg,transparent,rgba(243,239,228,.9),transparent);
  animation:gjDrag 1.9s var(--ease) infinite;
}
@keyframes gjDrag{0%{transform:translateX(-5px)}50%{transform:translateX(5px)}100%{transform:translateX(-5px)}}
.gj-cartel__ico[data-glyph="tap"]::after{
  content:""; position:absolute; inset:2px; border-radius:50%;
  border:1px solid rgba(243,239,228,.7); animation:gjTap 1.5s var(--ease) infinite;
}
@keyframes gjTap{0%,70%,100%{transform:scale(1);opacity:.25}35%{transform:scale(.55);opacity:1}}
.gj-cartel__ico[data-glyph="enter"]::after{
  content:""; position:absolute; left:50%; top:50%; width:1px; height:16px; margin:-8px 0 0 0;
  background:linear-gradient(180deg,transparent,rgba(243,239,228,.95));
  animation:gjEnter 2.1s var(--ease) infinite;
}
@keyframes gjEnter{0%{transform:translateY(5px);opacity:0}45%{opacity:1}100%{transform:translateY(-6px);opacity:0}}

/* ── 進み具合（数字を出さない） ──────────────────────── */
.gj-marks{
  position:absolute; left:clamp(18px,3.4vw,42px); top:50%; transform:translateY(-50%);
  z-index:31; display:grid; gap:11px;
}
.gj-marks__i{
  display:block; width:2px; height:20px; background:rgba(7,14,27,.30);
  box-shadow:0 0 0 0 transparent;
  transition:background-color 1s var(--ease), height 1s var(--ease);
}
.gj-marks__i.is-on{background:rgba(246,243,236,.95); height:28px; box-shadow:0 0 8px rgba(7,14,27,.8);}
.gj-progress{
  position:absolute; left:0; bottom:0; height:1px; width:100%; z-index:31;
  background:linear-gradient(90deg, rgba(243,239,228,.55) 0%, rgba(243,239,228,.55) calc(var(--p,0)*100%), rgba(243,239,228,.06) calc(var(--p,0)*100%));
  transition:background .35s linear;
}

/* ── 放置のうながし ─────────────────────────────────── */
.gj-idle{
  position:absolute; inset:0; z-index:29; pointer-events:none; opacity:0;
  transition:opacity 1.6s var(--ease);
  background:radial-gradient(circle at 50% 50%, transparent 45%, rgba(7,14,27,.42) 100%);
}
.gj-idle.is-on{opacity:1;}

/* ── 音 ─────────────────────────────────────────────── */
.gj-sound{
  /* ★fixed かつ高い層。どの状態でも押せる位置に置く。 */
  position:fixed; right:clamp(16px,3vw,34px); top:clamp(16px,3vw,34px); z-index:70;
  width:38px; height:38px; border:0; padding:0; border-radius:50%;
  display:flex; align-items:flex-end; justify-content:center; gap:3px;
  padding-bottom:10px;
  background:rgba(7,14,27,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.gj-sound:focus-visible, .gj-end__again:focus-visible, .gj-gate:focus-visible{
  outline:1px solid var(--washi); outline-offset:4px;
}
.gj-sound i{
  display:block; width:2px; background:var(--washi); border-radius:1px;
  animation:gjBar 1.1s ease-in-out infinite;
}
.gj-sound i:nth-child(1){height:9px; animation-delay:0s;}
.gj-sound i:nth-child(2){height:16px; animation-delay:.18s;}
.gj-sound i:nth-child(3){height:11px; animation-delay:.36s;}
@keyframes gjBar{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
/* 消音。★小さく縮めるだけでは、38pxのボタンでは変化に気づけない
   （2026-09-03 内田指摘「音声を止めても表示が変わらない」）。
   棒を1本の線に潰し、斜線を掛け、地も落として、ひと目で分かる形にする。 */
.gj-sound.is-off i{
  animation:none; height:2px !important; opacity:.55;
  transition:height .3s var(--ease), opacity .3s var(--ease);
}
.gj-sound i{ transition:height .3s var(--ease), opacity .3s var(--ease); }
.gj-sound.is-off{
  background:rgba(7,14,27,.62);
  box-shadow:inset 0 0 0 1px rgba(243,239,228,.18);
}
/* 斜線 */
.gj-sound::after{
  content:""; position:absolute; left:50%; top:50%;
  width:0; height:1.5px; border-radius:2px;
  background:rgba(243,239,228,.85);
  transform:translate(-50%,-50%) rotate(-45deg); transform-origin:50% 50%;
  transition:width .34s var(--ease);
  box-shadow:0 0 6px rgba(7,14,27,.9);
}
.gj-sound.is-off::after{ width:22px; }
.gj-sound{ position:fixed; }   /* ::after の基準にする */

/* ── カーソル ───────────────────────────────────────── */
.gj-cursor{
  position:fixed; left:0; top:0; z-index:70; pointer-events:none;
  width:0; height:0; display:none;
}
html.is-playing .gj-cursor{display:block;}
.gj-cursor__ring{
  position:absolute; left:-19px; top:-19px; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(243,239,228,.62);
  transition:transform .45s var(--ease), border-color .45s var(--ease), opacity .45s var(--ease);
}
.gj-cursor__dot{
  position:absolute; left:-2px; top:-2px; width:4px; height:4px; border-radius:50%;
  background:var(--washi); transition:transform .3s var(--ease);
}
.gj-cursor__verb{
  position:absolute; left:0; top:29px; transform:translateX(-50%);
  font-family:var(--mincho); font-size:.68rem; letter-spacing:.14em; text-indent:.14em;
  white-space:nowrap; color:rgba(243,239,228,.86); text-shadow:0 1px 12px rgba(7,14,27,.9);
}
.gj-cursor.is-down .gj-cursor__ring{transform:scale(.62); border-color:var(--washi);}
.gj-cursor.is-down .gj-cursor__dot{transform:scale(2.1);}
.gj-cursor[data-verb="click"] .gj-cursor__ring{border-style:dashed;}
.gj-cursor[data-verb="enter"] .gj-cursor__ring{border-color:rgba(201,162,75,.85);}
/* ためが満ちていく輪。--gj-charge は第五幕が毎フレーム書き込む。 */
.gj-cursor[data-verb="enter"] .gj-cursor__ring::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  background:conic-gradient(rgba(201,162,75,.85) calc(var(--gj-charge,0) * 360deg), transparent 0);
  -webkit-mask:radial-gradient(closest-side, transparent 72%, #000 74%);
  mask:radial-gradient(closest-side, transparent 72%, #000 74%);
}
html.gj-ready .gj-cursor[data-verb="enter"] .gj-cursor__ring{
  border-color:var(--kin); box-shadow:0 0 14px rgba(201,162,75,.7);
}

/* ── 終わり ─────────────────────────────────────────── */
.gj-end{
  position:absolute; inset:0; z-index:45; display:grid; place-content:center; gap:2.2rem;
  text-align:center; opacity:0; visibility:hidden; pointer-events:none;
  /* 終幕は第五幕（いちばん明るい絵）の上に出る。地を敷かないと文字が読めない。 */
  background:radial-gradient(70% 60% at 50% 50%, rgba(7,14,27,.72), rgba(7,14,27,.42));
  transition:opacity 2.4s var(--ease), visibility 2.4s;
}
html.gj-ended, html.gj-ended body, html.gj-ended button{ cursor:auto; }
.gj-end.is-on{opacity:1; visibility:visible; pointer-events:auto;}
.gj-end__ja{
  margin:0; font-family:var(--mincho); font-size:clamp(1.25rem,3.9vw,2.05rem);
  letter-spacing:.22em; text-indent:.22em; color:rgba(246,243,236,.98);
  text-shadow:0 1px 20px rgba(7,14,27,.9);
}
/* 終わりの二択。主役（会社案内）と、控え（もういちど）の重みを、
   色ではなく「光っているかどうか」で分ける。 */
.gj-end__again{
  position:relative; font:inherit; font-family:var(--gothic);
  font-size:.7rem; letter-spacing:.24em; text-indent:.24em;
  padding:1.15em 2.5em; border-radius:999px; cursor:pointer;
  color:rgba(243,239,228,.86);
  background:rgba(9,20,38,.34);
  border:1px solid rgba(243,239,228,.26);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:border-color .5s var(--ease), background-color .5s var(--ease),
             color .5s var(--ease), transform .45s var(--ease);
}
.gj-end__again:hover{
  color:var(--washi); border-color:rgba(243,239,228,.62);
  background:rgba(12,28,52,.5); transform:translateY(-1px);
}
.gj-end__again:hover{border-color:var(--washi); background:rgba(243,239,228,.08);}

/* ── 静止版（WebGLが無い／動きを減らす設定） ─────────── */
.gj-static{
  position:absolute; inset:0; z-index:80; overflow-y:auto; background:#070E1B;
  padding:clamp(42px,9vh,110px) clamp(22px,6vw,64px);
}
html.is-static .gj-canvas-wrap,
html.is-static .gj-loader,
html.is-static .gj-gate,
html.is-static .gj-cursor,
html.is-static .gj-marks,
html.is-static .gj-progress,
html.is-static .gj-sound{display:none !important;}
.gj-static article{max-width:46em; margin:0 auto;}
.gj-static h1{
  font-family:var(--mincho); font-weight:600; font-size:clamp(2.4rem,8vw,4.4rem);
  letter-spacing:.18em; margin:0 0 .4rem; display:flex; align-items:baseline; gap:1.2rem; flex-wrap:wrap;
}
.gj-static h1 span{font-size:.62rem; letter-spacing:.5em; color:rgba(243,239,228,.42); font-family:var(--gothic);}
.gj-static .lead{font-family:var(--mincho); color:rgba(243,239,228,.72); letter-spacing:.16em; margin:0 0 3rem;}
.gj-static ol{list-style:none; padding:0; margin:0; display:grid; gap:2.2rem;}
.gj-static li{display:grid; gap:.7rem; padding-top:1.6rem; border-top:1px solid rgba(243,239,228,.14);}
.gj-static b{font-family:var(--mincho); font-weight:600; font-size:1.15rem; letter-spacing:.22em;}
.gj-static span{color:rgba(243,239,228,.66); line-height:2.1; letter-spacing:.05em;}
.gj-static .credit{margin-top:3.4rem; font-size:.72rem; letter-spacing:.16em; color:rgba(243,239,228,.36); line-height:2.2;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

@media (max-width:640px){
  /* ★スマホは幅が足りない。clamp の下限（2.6rem）が大きすぎて、
     8文字の題（名前のない魚たち）が画面から左右9pxずつはみ出していた
     （2026-09-03 実測：幅408px 対 画面390px）。下限と字間を詰める。 */
  .gj-chapter__ja{ font-size:clamp(1.5rem,8.2vw,2.5rem); letter-spacing:.09em; text-indent:.09em; }
  .gj-chapter__no{ font-size:.6rem; letter-spacing:.34em; text-indent:.34em; }
  .gj-chapter__en{ font-size:.52rem; letter-spacing:.24em; text-indent:.24em; }
  .gj-chapter{ padding-left:12px; padding-right:12px; }
  /* 入口の社名も、余白を残せる大きさに */
  .gj-gate__ja{ font-size:clamp(2.6rem,12vw,4.4rem); letter-spacing:.12em; text-indent:.12em; }
  .gj-gate__sub{ font-size:.8rem; letter-spacing:.24em; text-indent:.24em; }
  .gj-gate__go{ width:112px; font-size:.8rem; letter-spacing:.14em; text-indent:.14em; }
  .gj-end__ja{ font-size:clamp(1.05rem,5.4vw,1.6rem); letter-spacing:.1em; text-indent:.1em;
               padding-left:14px; padding-right:14px; }
  .gj-marks{left:12px; gap:8px;}
  .gj-marks__i{height:14px;}
  .gj-marks__i.is-on{height:20px;}
  .gj-subtitle{font-size:1.44rem; line-height:1.9; max-height:64vh;}
  .gj-cursor{display:none !important;}
  html.is-playing, html.is-playing body{cursor:auto;}
}

/* ── 会社案内 ─────────────────────────────────────────────
   第五幕を抜けたあとに現れて、下へ続く1枚もの。
   ★体験中はスクロールを殺したままにする（overflow:hidden）。
     終わってから html.gj-ended で解放し、.gj を固定から流れへ戻す。
     ここを解放しないと会社案内は永遠に画面外に留まる。          */

.sn-corp{ display:none; background:#070E1B; }

html.gj-ended, html.gj-ended body{ overflow-y:auto; height:auto; }
/* ★.gj は固定のまま残す。流れに戻すと海がスクロールで消えてしまう。
   z-index:0 で重なりの入れ物を作り、会社案内をその上に通す。 */
html.gj-ended .gj{ z-index:0; }
html.gj-ended .sn-corp{ display:block; }
/* 1画面ぶん下から始める。上の1画面は海と終幕の文字のまま。 */
/* 上昇のぶん、会社案内は2画面ぶん下から始める。
   1画面だと、海中から上空までが一瞬で終わってカメラワークが読めない。 */
/* 上昇が終わりきってから会社案内が来るようにする。
   上昇の距離（2.4画面）より下に置かないと、空へ上がる途中で文章が被る。 */
html.gj-ended .sn-corp{ margin-top:290vh; position:relative; z-index:50; }
/* 地は完全に塗らない。薄く透かして、奥で海が動いているのが見えるようにする。 */
html.gj-ended .sn-corp{
  /* 地を濃く塗ると海が消える。薄く敷いて、ぼかしで文字の可読性を確保する。 */
  background:linear-gradient(180deg,
    rgba(7,14,27,.22) 0, rgba(7,14,27,.70) 12vh, rgba(7,14,27,.78) 34vh, rgba(7,14,27,.82) 100%);
  backdrop-filter:blur(9px) saturate(1.15);
  -webkit-backdrop-filter:blur(9px) saturate(1.15);
}
/* スクロールしたら終幕の文字と進行の目盛りを消す。残すと会社案内に透ける。 */
html.gj-scrolled .gj-end, html.gj-scrolled .gj-marks{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
}

/* 動きを減らす設定の人にも会社情報は要る。読み物版のあとに続ける。 */
html.is-static, html.is-static body{ overflow-y:auto; height:auto; }
html.is-static .gj{ position:relative; height:auto; }
html.is-static .gj-static{ position:static; inset:auto; overflow:visible; }
html.is-static .sn-corp{ display:block; }

.sn-wrap{
  max-width:1080px; margin:0 auto; padding:clamp(72px,12vh,140px) clamp(20px,5vw,48px) 0;
}
.sn-corp section{ padding-bottom:clamp(64px,10vh,120px); }

.sn-eyebrow{
  margin:0 0 1.2rem; font-size:.68rem; letter-spacing:.34em;
  color:rgba(243,239,228,.42);
}
.sn-lead h2{
  font-family:var(--mincho); font-weight:600; margin:0 0 1.8rem;
  font-size:clamp(1.9rem,5.2vw,3.2rem); letter-spacing:.1em; line-height:1.5;
}
.sn-lead p{
  margin:0 0 1.1rem; max-width:38em; line-height:2.15;
  font-size:clamp(.92rem,1.6vw,1rem); color:rgba(243,239,228,.78);
}

.sn-h{
  font-family:var(--mincho); font-weight:600; letter-spacing:.16em;
  font-size:clamp(1.15rem,2.4vw,1.5rem); margin:0 0 2.2rem;
  padding-bottom:.9rem; border-bottom:1px solid rgba(243,239,228,.14);
  display:flex; align-items:baseline; gap:1.1rem;
}
.sn-h span{
  font-family:var(--gothic); font-size:.6rem; letter-spacing:.3em;
  color:rgba(243,239,228,.34);
}

/* ── わたしたち ── */
/* ★4列に並べると1枚が細長くなって、顔が縦に伸びて見える（2026-09-03 内田指摘）。
   2列にして、1枚あたりの幅を倍にする。 */
.sn-people__list{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(28px,4vw,52px);
  grid-template-columns:1fr; }
@media (min-width:620px){ .sn-people__list{ grid-template-columns:1fr 1fr; } }
.sn-p__photo{
  width:100%; aspect-ratio:5/4; border-radius:2px; margin-bottom:1.1rem;
  /* 写真が入るまでの仮の絵。海に沈む人影に見えるようにしてある。 */
  object-fit:cover;
  /* 読み込み前の地。写真が来るまでのあいだ、黒い穴が空かないようにする。 */
  background:linear-gradient(180deg,#245C93 0%,#17406C 55%,#0E2846 100%);
  /* 海の絵と地続きに見えるよう、わずかに寒色へ寄せる。 */
  filter:saturate(.88) contrast(1.04);
  border:1px solid rgba(243,239,228,.10);
}
.sn-p--lead .sn-p__photo{ aspect-ratio:5/4; }
.sn-p__role{ margin:0 0 .35rem; font-size:.66rem; letter-spacing:.24em; color:var(--kin); }
.sn-p__name{
  font-family:var(--mincho); font-size:1.1rem; letter-spacing:.08em; margin:0 0 .7rem;
}
.sn-p__name span{
  display:block; font-family:var(--gothic); font-size:.62rem; letter-spacing:.18em;
  color:rgba(243,239,228,.4); margin-top:.35rem;
}
.sn-p__note{ margin:0; font-size:.8rem; line-height:1.95; color:rgba(243,239,228,.62); }

/* ── 定義リスト（会社概要・アクセス・連絡先で共用） ── */
.sn-dl{ margin:0; }
.sn-dl > div{
  display:grid; grid-template-columns:11em 1fr; gap:1.4rem;
  padding:1.05rem 0; border-bottom:1px solid rgba(243,239,228,.09);
}
.sn-dl dt{ font-size:.76rem; letter-spacing:.14em; color:rgba(243,239,228,.5); }
.sn-dl dd{ margin:0; font-size:.9rem; line-height:1.9; color:rgba(243,239,228,.85); }
.sn-dl--tight > div{ grid-template-columns:7.5em 1fr; padding:.85rem 0; }
.sn-dl a{ color:var(--washi); text-underline-offset:.28em; }

/* ── アクセス ── */
.sn-access__grid{ display:grid; gap:clamp(24px,4vw,44px); grid-template-columns:1fr; }
@media (min-width:840px){ .sn-access__grid{ grid-template-columns:1.25fr 1fr; align-items:start; } }
.sn-map{ margin:0; }
.sn-map svg{ display:block; width:100%; height:auto; border:1px solid rgba(243,239,228,.10); border-radius:2px; }
.sn-map figcaption{ margin-top:.85rem; font-size:.75rem; color:rgba(243,239,228,.5); line-height:1.9; }
.sn-note{ margin:1.2rem 0 0; font-size:.78rem; line-height:1.95; color:rgba(243,239,228,.55); }

/* ── よくある質問 ── */
.sn-faq details{ border-bottom:1px solid rgba(243,239,228,.09); }
.sn-faq summary{
  cursor:pointer; padding:1.15rem 2.4rem 1.15rem 0; position:relative;
  font-size:.92rem; letter-spacing:.04em; list-style:none;
}
.sn-faq summary::-webkit-details-marker{ display:none; }
.sn-faq summary::after{
  content:""; position:absolute; right:.5rem; top:50%; width:9px; height:9px;
  border-right:1px solid rgba(243,239,228,.55); border-bottom:1px solid rgba(243,239,228,.55);
  transform:translateY(-70%) rotate(45deg); transition:transform .35s var(--ease);
}
.sn-faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.sn-faq summary:focus-visible{ outline:1px solid var(--washi); outline-offset:4px; }
.sn-faq p{
  margin:0 0 1.35rem; padding-right:2.4rem; max-width:44em;
  font-size:.85rem; line-height:2.1; color:rgba(243,239,228,.7);
}

/* ── お問い合わせ ── */
.sn-contact__grid{ display:grid; gap:clamp(28px,4vw,52px); grid-template-columns:1fr; }
@media (min-width:840px){ .sn-contact__grid{ grid-template-columns:1.35fr 1fr; align-items:start; } }
.sn-form{ display:grid; gap:1.15rem; }
.sn-form label{ display:block; font-size:.76rem; letter-spacing:.14em; color:rgba(243,239,228,.55); }
.sn-req{
  display:inline-block; margin-left:.7rem; padding:.1rem .5rem; border-radius:2px;
  font-size:.6rem; letter-spacing:.14em; color:#0A1A31; background:var(--kin);
}
.sn-form input, .sn-form select, .sn-form textarea{
  display:block; width:100%; margin-top:.55rem; padding:.8rem .9rem;
  font:inherit; font-size:.9rem; color:var(--washi);
  background:rgba(243,239,228,.05); border:1px solid rgba(243,239,228,.16); border-radius:2px;
}
.sn-form textarea{ resize:vertical; }
.sn-form input:focus, .sn-form select:focus, .sn-form textarea:focus{
  outline:none; border-color:rgba(243,239,228,.5); background:rgba(243,239,228,.08);
}
.sn-form button{
  justify-self:start; margin-top:.6rem; padding:.95rem 2.6rem;
  font:inherit; font-size:.85rem; letter-spacing:.2em; color:var(--washi); cursor:pointer;
  background:transparent; border:1px solid rgba(243,239,228,.4); border-radius:2px;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.sn-form button:hover{ background:rgba(243,239,228,.09); border-color:var(--washi); }

/* ── フッター ── */
.sn-foot{
  padding:clamp(40px,6vh,64px) 0 clamp(52px,8vh,88px);
  border-top:1px solid rgba(243,239,228,.12);
}
.sn-foot p{ margin:0 0 .5rem; font-size:.8rem; color:rgba(243,239,228,.6); }
.sn-foot__name{ font-family:var(--mincho); font-size:1.05rem !important; letter-spacing:.14em;
  color:var(--washi) !important; margin-bottom:.8rem !important; }
.sn-foot__c{ margin-top:1.6rem !important; font-size:.66rem !important; letter-spacing:.2em;
  color:rgba(243,239,228,.34) !important; }

/* ── 終わりの画面の導線 ── */
.gj-end__acts{ display:flex; gap:1.35rem; justify-content:center; align-items:center; flex-wrap:wrap; }
/* 主役。入口の STORY と同じ「海の中の太陽」で揃える。 */
.gj-end__more{
  position:relative; font:inherit; font-family:var(--gothic);
  font-size:.76rem; letter-spacing:.22em; text-indent:.22em;
  padding:1.15em 2.9em; border:0; border-radius:999px; cursor:pointer;
  color:#12233B;
  background:
    radial-gradient(120% 220% at 30% 20%,
      #FFF9E6 0%, #FFE9A8 22%, #FFC65E 48%, #F0972E 74%, #C86A1C 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,240,205,.42),
    inset 0 -8px 18px rgba(150,80,20,.26),
    0 0 24px rgba(246,182,80,.55),
    0 0 68px rgba(238,150,50,.32),
    0 0 120px rgba(86,140,205,.22),
    0 10px 26px rgba(4,10,20,.45);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.gj-end__more::before{
  content:""; position:absolute; inset:-40% -18%; border-radius:999px; z-index:-1;
  background:radial-gradient(60% 100% at 50% 50%, rgba(252,196,104,.30), rgba(246,168,60,0) 70%);
  animation:gjBreath 6.6s ease-in-out infinite;
}
.gj-end__more:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:
    inset 0 0 0 1px rgba(255,244,214,.6),
    inset 0 -8px 18px rgba(150,80,20,.22),
    0 0 34px rgba(252,196,104,.75),
    0 0 100px rgba(240,160,56,.44),
    0 0 165px rgba(86,140,205,.28),
    0 14px 32px rgba(4,10,20,.45);
}
@media (prefers-reduced-motion: reduce){ .gj-end__more::before{ animation:none; } }
.gj-end__more:focus-visible{ outline:2px solid var(--kin); outline-offset:3px; }

@media (max-width:640px){
  .sn-dl > div{ grid-template-columns:1fr; gap:.4rem; }
  .sn-dl--tight > div{ grid-template-columns:1fr; }
}

/* ── 会社概要の数字。先に大きく見せて、細かい表はそのあと。 */
.sn-stats{
  list-style:none; margin:0 0 clamp(28px,4vh,44px); padding:0;
  display:grid; gap:clamp(16px,2.4vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
}
.sn-stats li{
  padding:1.2rem 0 1.1rem; border-top:1px solid rgba(243,239,228,.18);
}
.sn-stats b{
  display:block; font-family:var(--mincho); font-weight:600;
  font-size:clamp(2rem,4.4vw,2.9rem); letter-spacing:.04em; line-height:1.1;
  color:var(--washi);
}
.sn-stats span{
  display:block; margin-top:.5rem; font-size:.68rem; letter-spacing:.2em;
  color:rgba(243,239,228,.5);
}

/* 会社概要の表は、広い画面では2列に割る */
@media (min-width:840px){
  .sn-dl--two{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(32px,4vw,64px); }
  .sn-dl--two > div{ grid-template-columns:8.5em 1fr; }
}

/* ── 問い合わせ：短い項目は横に並べて、縦の長さを詰める */
.sn-form__row{ display:grid; gap:1.15rem; grid-template-columns:1fr; }
@media (min-width:640px){ .sn-form__row{ grid-template-columns:1fr 1fr; gap:1.4rem; } }

/* ── 物語をスキップ。右下に控えめに置く。
      作品を見に来ていない人（取引先・求職者）が、会社案内まで一息で行ける道。 */
/* 入口の STORY と同じ「海の中の太陽」。小さいと押す気にならないので丸く大きく。 */
.gj-skip{
  position:absolute; right:clamp(20px,3vw,44px); bottom:clamp(20px,3vh,44px);
  z-index:44; display:grid; place-items:center; text-align:center;
  width:clamp(122px,11vw,150px); aspect-ratio:1; border:0; border-radius:50%;
  font:inherit; font-family:var(--gothic); font-size:.98rem; letter-spacing:.02em;
  line-height:1.62; font-weight:500;
  color:#12233B; cursor:pointer; opacity:0; visibility:hidden;
  background:
    radial-gradient(circle at 44% 38%,
      #FFF9E6 0%, #FFE9A8 20%, #FFC65E 44%, #F0972E 70%, #B45F17 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,240,205,.40),
    inset 0 -8px 20px rgba(150,80,20,.30),
    0 0 22px rgba(246,182,80,.52),
    0 0 62px rgba(238,150,50,.30),
    0 0 110px rgba(86,140,205,.22),
    0 10px 26px rgba(4,10,20,.45);
  transition:opacity .9s var(--ease), visibility .9s,
             transform .45s var(--ease), box-shadow .45s var(--ease);
}
/* まわりの淡い光 */
.gj-skip::before{
  content:""; position:absolute; inset:-34%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(252,196,104,.30), rgba(246,168,60,0) 68%);
  animation:gjBreath 6.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .gj-skip::before{ animation:none; } }
html.is-playing .gj-skip{ opacity:1; visibility:visible; }
.gj-skip:hover{
  transform:translateY(-2px) scale(1.05);
  box-shadow:
    inset 0 0 0 1px rgba(255,244,214,.58),
    inset 0 -8px 20px rgba(150,80,20,.26),
    0 0 32px rgba(252,196,104,.72),
    0 0 90px rgba(240,160,56,.42),
    0 0 150px rgba(86,140,205,.28),
    0 14px 32px rgba(4,10,20,.45);
}
.gj-skip:focus-visible{ outline:2px solid var(--kin); outline-offset:3px; }
/* 終幕まで来たら用済み。会社案内は目の前にある。 */
html.gj-ended .gj-skip, html.is-static .gj-skip{ display:none; }
@media (max-width:640px){ .gj-skip{ width:104px; font-size:.76rem; letter-spacing:0; right:14px; bottom:14px; } }

/* ── 空から見た漁港。3Dの箱では紙の模型に見えたので実写に差し替えた
      （2026-09-03 内田指示）。上昇が水面を抜けたところで滲んで現れる。 */
.sn-aerial{
  position:absolute; inset:0; z-index:2; opacity:0; pointer-events:none;
  background:url("../img/place/port-aerial.webp") center 38% / cover no-repeat;
  transform:scale(1.08); transform-origin:50% 42%;
  will-change:opacity, transform;
}
/* 上の帯は会社案内の地へ、下の帯は海へ、それぞれ溶かす */
.sn-aerial::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,14,27,.30) 0, rgba(7,14,27,0) 26%,
                                     rgba(7,14,27,0) 68%, rgba(7,14,27,.45) 100%);
}

/* 途中で折らないと枠から出るのは、メールアドレスなど英数字の長い塊だけ。
   そこにだけ個別に許可する。 */
.sn-dl dd a, .sn-form input, .sn-form textarea{ overflow-wrap:anywhere; }

/* ── ご用件の選択欄。
      ★色を指定しないと、開いた一覧が環境まかせ（白地に白文字など）で読めない。
        color-scheme を dark にすると、OS 側が暗い配色で描いてくれる。 */
.sn-form select{
  color-scheme:dark;
  appearance:none; -webkit-appearance:none;
  padding-right:2.6rem; cursor:pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(243,239,228,.72) 50%),
    linear-gradient(135deg, rgba(243,239,228,.72) 50%, transparent 50%);
  background-position:
    calc(100% - 1.35rem) calc(50% + 1px),
    calc(100% - 1.0rem) calc(50% + 1px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.sn-form select option{ background:#0D1D33; color:#F3EFE4; }
.sn-form select:hover{ border-color:rgba(243,239,228,.38); }

/* テロップは指定した意味のまとまりごとに一列。画面回転時も語中では折らない。 */
.gj-subtitle__line{display:block;white-space:nowrap;}