/* ============================================================
   和紙×NEO JAPANESE RITUAL レイヤー（style.cssの上に重ねる）
   index_v2.html 試作用 — 承認後に本体へ統合
   ============================================================ */

:root{
  --shu:#a63b22;            /* 朱（落款・印） */
  --kinari:rgba(236,229,210,.92);
  --hairline:rgba(214,202,178,.14);
}

/* ---------- 和紙の質感（全ページ共通オーバーレイ） ---------- */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:5;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.017' numOctaves='4' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.93  0 0 0 0 0.90  0 0 0 0 0.82  0 0 0 0.055 0'/></filter><rect width='100%25' height='100%25' filter='url(%23m)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.55 0.6' numOctaves='2' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.93  0 0 0 0 0.90  0 0 0 0 0.82  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size:420px 420px,180px 180px;
}

/* 罫線を生成りの温かいトーンに */
.stats,.stats div{border-color:var(--hairline)}
.news-list,.news-item{border-color:var(--hairline)}
.roles{border-color:var(--hairline)}

/* ---------- 記録: 「これまでの歩み」横組みの実績表示（旧: 縦書き奥付 → 2026-07-09廃止） ---------- */
/* カード・等幅グリッド・縦書きのいずれでもない、編集記事風の一行。数字に大小の序列をつける */
.kiroku{padding:76px 8vw 110px}
.kiroku .klead{
  font-family:var(--serif);font-size:14px;letter-spacing:.34em;color:var(--muted);
  display:flex;align-items:center;gap:22px;margin-bottom:40px;
}
.kiroku .klead::after{content:"";flex:0 0 72px;height:1px;background:var(--hairline)}
.kiroku .krow{display:flex;flex-wrap:wrap;align-items:baseline;gap:22px 72px}
.kiroku .k{display:flex;align-items:baseline;gap:14px}
.kiroku .n{font-family:var(--en);color:var(--gold);font-size:38px;letter-spacing:.02em;line-height:1}
.kiroku .k.main .n{font-size:58px}
.kiroku .n small{font-size:15px;color:var(--gold-dim);margin-left:3px;letter-spacing:.1em}
.kiroku .c{font-family:var(--serif);font-size:12.5px;letter-spacing:.24em;color:var(--muted)}
@media(max-width:960px){
  .kiroku{padding:56px 6vw 72px}
  .kiroku .krow{gap:20px 36px}
  .kiroku .n{font-size:30px}
  .kiroku .k.main .n{font-size:44px}
}

/* ---------- 落款（朱印） ---------- */
.rakkan{
  display:inline-block;writing-mode:vertical-rl;
  background:var(--shu);color:var(--kinari);
  font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:.32em;
  padding:16px 9px 18px;line-height:1;border-radius:3px;
  box-shadow:inset 0 0 8px rgba(0,0,0,.35),0 2px 14px rgba(0,0,0,.4);
  transform:rotate(-1.5deg);
  position:relative;
}
.rakkan::after{ /* 印のかすれ */
  content:"";position:absolute;inset:0;border-radius:3px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='120'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0.04  0 0 0 0 0.06  0 0 0 0 0.09  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23k)'/></svg>");
  mix-blend-mode:multiply;opacity:.35;pointer-events:none;
}

/* ---------- 縦書きの和ラベル（各セクション右上） ---------- */
section{overflow:visible}
.vlabel{
  position:absolute;top:120px;right:4.5vw;
  writing-mode:vertical-rl;font-family:var(--serif);
  font-size:13px;letter-spacing:.5em;color:rgba(236,229,210,.42);
  border-right:1px solid var(--hairline);padding-right:14px;
  pointer-events:none;
}
@media(max-width:960px){.vlabel{display:none}}

/* ============================================================
   オープニング（kirigumi式：ロゴ窓→写真リビール）
   ============================================================ */
.opening{position:relative;height:280vh;background:var(--bg)}
.op-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.op-photo{
  position:absolute;inset:0;
  background:url(../img/hero_night_beach.jpg) center/cover no-repeat;
  -webkit-mask-image:url(../img/logo_mark_white.png);
          mask-image:url(../img/logo_mark_white.png);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:50% 50%;mask-position:50% 50%;
  -webkit-mask-size:42vmin;mask-size:42vmin;
}
.op-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,15,22,.35),rgba(10,15,22,.15) 45%,rgba(10,15,22,.55))}
.op-photo2{
  position:absolute;inset:0;opacity:0;
  background:url(../img/hero_night_beach.jpg) center/cover no-repeat;
}
.op-photo2::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,15,22,.35),rgba(10,15,22,.15) 45%,rgba(10,15,22,.55))}
.op-intro{ /* 開始時にロゴ窓の下に出る文字（窓は画面中央） */
  position:absolute;left:50%;top:70%;transform:translateX(-50%);
  text-align:center;transition:none;white-space:nowrap;
}
@media(max-width:960px){.op-intro{white-space:normal;width:88vw}}
.op-intro .en{font-family:var(--en);color:var(--gold);font-size:13px;letter-spacing:.55em;margin-bottom:12px}
.op-intro .jp{font-family:var(--serif);color:rgba(236,229,210,.75);font-size:13px;letter-spacing:.4em}
.op-copy{ /* 全画面リビール後に出るコピー */
  position:absolute;left:8vw;bottom:16vh;opacity:0;transform:translateY(24px);
}
.op-copy h1{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.6vw,58px);line-height:1.8;letter-spacing:.14em;text-shadow:0 2px 30px rgba(0,0,0,.6);color:#ece7db}
.op-copy .sub{color:rgba(236,229,210,.85);font-size:clamp(11px,1.1vw,14px);letter-spacing:.32em;margin-top:18px}
.op-copy .rakkan{position:absolute;right:-86px;top:-6px}
@media(max-width:960px){.op-copy{left:6vw;right:6vw}.op-copy .rakkan{position:static;display:inline-block;margin-top:22px}}
.op-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:var(--en);font-size:10px;letter-spacing:.45em;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.op-cue::after{content:"";width:1px;height:56px;background:linear-gradient(180deg,var(--gold),transparent);animation:drop 2.2s infinite}

/* noanim（検証用）：オープニングを完了状態で固定 */
body.noanim .opening{height:900px!important;min-height:0}
body.noanim .op-sticky{height:900px!important}
body.noanim .op-photo{-webkit-mask-image:none;mask-image:none}
body.noanim .op-photo2{opacity:1}
body.noanim .op-intro,body.noanim .op-cue{display:none}
body.noanim .op-copy{opacity:1;transform:none}