/* hikari — portfolio（昼の版）
   白ベース。真っ白にせず、若草をほんの少し混ぜた紙の色に、空・海・砂の淡い色を重ねて深みを出す。
   文字は墨色（真っ黒にしない）。強調は、深い海の青の1色。見出しは明朝体の縦書き。
   動きは立体（屏風・つるした飾り・机の上の紙）。動かすための数は hiru.js が入れる：
     --p  その区切りがどこまで進んだか（0〜1）
     --mx / --my  マウスの位置（-1〜1。スマホでは 0 のまま） */

:root {
  --kami: #f4f6f1;
  --sumi: #1f2d33;
  --usu: rgba(31, 45, 51, 0.76);
  --sen: rgba(31, 45, 51, 0.15);
  --umi: #1c6f8f;
  --c-sora: #d8e8f1;
  --c-umi: #cde5e2;
  --c-suna: #f1e8d6;
  --c-ha: #dde9d5;
  --c-machi: #e2e3ed;
  --c-yuu: #f3e1d8;
  --obi: 72px;
  --yoko: clamp(20px, 5vw, 80px);
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --obun: "Cormorant Garamond", "Shippori Mincho", serif;
  --yuru: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mx: 0;
  --my: 0;
}

*, *::before, *::after { box-sizing: border-box; }
/* 立体の部品が横にはみ出しても、横のスクロールは出さない */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* ページの上は少し青く静か（少しの寂しさ）、下へ行くほど温かい色になる（最後は温かく終わる） */
body {
  margin: 0;
  background: linear-gradient(180deg, #edf3f5 0%, var(--kami) 34%, #f7f3e8 72%, #faeedd 100%);
  color: var(--sumi);
  font-family: var(--gothic);
  font-weight: 300;
  font-size: clamp(15px, 1.02vw, 18px);
  line-height: 2.1;
  letter-spacing: 0.08em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* 紙の上に、空・砂・海の色をうっすら重ねる（動かさない。奥行きは色の重なりで出す） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60vmax 50vmax at 12% 8%, rgba(170, 212, 232, 0.5), rgba(170, 212, 232, 0) 70%),
    radial-gradient(55vmax 45vmax at 92% 88%, rgba(244, 222, 186, 0.6), rgba(244, 222, 186, 0) 70%),
    radial-gradient(50vmax 40vmax at 78% 28%, rgba(168, 220, 208, 0.36), rgba(168, 220, 208, 0) 70%);
}
/* 止まらずに流れ続ける、淡い光の帯（街を流れる光のつもり）。とてもゆっくり、画面を横切り続ける */
body::after {
  content: "";
  position: fixed;
  top: -20vh;
  bottom: -20vh;
  left: 0;
  width: 46vw;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 250, 236, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
  animation: hikari-obi 46s linear infinite;
}
@keyframes hikari-obi { from { transform: translateX(-60vw) skewX(-14deg); } to { transform: translateX(130vw) skewX(-14deg); } }
/* 止まらずに流れる点線（遠くを行き交う光のつもり）。トップの下と、いちばん下に引く */
.asa-shirushi::before, .ato::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background:
    repeating-linear-gradient(90deg, var(--umi) 0 22px, rgba(0, 0, 0, 0) 22px 190px),
    repeating-linear-gradient(90deg, rgba(224, 150, 90, 0.9) 0 10px, rgba(0, 0, 0, 0) 10px 310px),
    linear-gradient(var(--sen), var(--sen));
  animation: nagareru 60s linear infinite;
}
@keyframes nagareru { from { background-position: 0 0, 0 0, 0 0; } to { background-position: -1900px 0, 1860px 0, 0 0; } }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
::selection { background: var(--umi); color: #fff; }
:focus-visible { outline: 2px solid var(--umi); outline-offset: 4px; border-radius: 4px; }

.tobu { position: absolute; left: -999px; top: 8px; z-index: 30; padding: 6px 14px; background: #fff; }
.tobu:focus { left: calc(var(--obi) + 8px); }

/* 縦書き */
.tate { writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 400; letter-spacing: 0.22em; line-height: 1.9; }

/* ---------- 左の帯 ---------- */

.obi {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 20;
  width: var(--obi);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
  border-right: 1px solid var(--sen);
  background: rgba(244, 246, 241, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.obi a { text-decoration: none; writing-mode: vertical-rl; }
.obi-na { font-family: var(--obun); font-size: 22px; letter-spacing: 0.18em; }
.obi-michi { display: flex; flex-direction: column; gap: 22px; font-family: var(--obun); font-size: 14px; letter-spacing: 0.2em; color: var(--usu); }
.obi-michi a { transition: color 0.5s; }
.obi-michi a:hover, .obi-michi a:focus-visible { color: var(--umi); }

main, .ato { margin-left: var(--obi); }

/* ---------- 仮の枠：風景の色を1色ずつ、紙に薄くにじませる ---------- */

.kari {
  --iro: var(--c-sora);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 10px 14px;
  border: 1px solid var(--sen);
  background:
    radial-gradient(circle at 68% 24%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #fdfdfb 0%, var(--iro) 78%, color-mix(in srgb, var(--iro) 82%, var(--sumi)) 100%);
  overflow: hidden;
}
.kari > span { font-family: var(--obun); font-size: 11px; letter-spacing: 0.16em; color: var(--usu); text-align: center; line-height: 1.4; }
.kari--sora { --iro: var(--c-sora); }
.kari--umi { --iro: var(--c-umi); }
.kari--suna { --iro: var(--c-suna); }
.kari--ha { --iro: var(--c-ha); }
.kari--machi { --iro: var(--c-machi); }
.kari--yuu { --iro: var(--c-yuu); }
/* 枠の形：上が丸い窓・まる・角の丸い四角 */
.maru-ue { aspect-ratio: 3 / 4; border-radius: 999px 999px 10px 10px; }
.maru { aspect-ratio: 1 / 1; border-radius: 50%; align-items: center; padding: 0 10px; }
.kado { aspect-ratio: 4 / 3; border-radius: 14px; }

/* ---------- トップ：屏風 ---------- */

.asa {
  --p: 0;
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto auto;
  justify-items: center;
  gap: clamp(18px, 3vh, 40px);
  padding: clamp(48px, 9vh, 110px) var(--yoko) 26px;
  overflow: hidden;
}
/* --w は板1枚の幅、--f は折れの角度（スクロールで開いていく） */
/* --hiraku は開き具合（0＝閉じている、1＝開いた）。読み込んだときに 0 から 1 へゆっくり動かす。
   折れの角度は、閉じているとき 86 度（ほぼ畳んだ形）→ 開くと 12 度（広く開いた形）→ スクロールで 3 度まで */
@property --hiraku { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes hiraku { from { --hiraku: 0; } to { --hiraku: 1; } }
.byobu {
  --w: min(17vw, 27vh);
  --h: calc(var(--w) * 2.1);
  --f: calc(86deg - var(--hiraku) * 74deg - var(--p) * 9deg);
  animation: hiraku 5.4s cubic-bezier(0.3, 0.05, 0.15, 1) 0.5s both;
  align-self: center;
  width: 100%;
  height: var(--h);
  display: grid;
  place-items: center;
  perspective: 1500px;
  perspective-origin: 50% 38%;
}
/* 何もしなくても、見る角度がゆっくり変わる */
/* ゆっくり（片道 24 秒）。少し浮き沈みもして、ふわふわした感じを出す */
.byobu-yure { width: 0; height: var(--h); transform-style: preserve-3d; animation: byobu-yure 24s ease-in-out infinite alternate; }
@keyframes byobu-yure {
  0% { transform: translateY(8px) rotateY(-13deg) rotateX(1deg); }
  50% { transform: translateY(-10px) rotateY(0deg) rotateX(4deg); }
  100% { transform: translateY(8px) rotateY(13deg) rotateX(6deg); }
}
/* マウスで見る角度が変わり、スクロールで少し見下ろす。最後の translateX は、屏風を左右の真ん中に置くため */
.byobu-me {
  position: relative;
  width: 0;
  height: var(--h);
  transform-style: preserve-3d;
  transform:
    rotateY(calc(var(--mx) * 16deg))
    rotateX(calc(var(--my) * -7deg + var(--p) * 16deg))
    translateZ(calc(var(--p) * 160px))
    translateX(calc(var(--w) * -2.5 * cos(var(--f))));
}
/* 板：前の板の右のはしに蝶番でつながる（入れ子）。1枚ごとに逆向きに折れて、ジグザグになる */
.ori {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: rotateY(var(--f));
}
.ori > .ori { left: 100%; transform: rotateY(calc(var(--f) * -2)); }
.ori > .ori > .ori { transform: rotateY(calc(var(--f) * 2)); }
.ori > .ori > .ori > .ori { transform: rotateY(calc(var(--f) * -2)); }
.ori > .ori > .ori > .ori > .ori { transform: rotateY(calc(var(--f) * 2)); }
/* 板の面：1枚の絵を5枚にまたがって貼る。絵の横幅を板5枚ぶん（500%）にして、--mai（0〜4）の順に 1/5 ずつ見せる */
.ori-men {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background-color: var(--c-sora);
  background-image: image-set(url("img/madobe-960.jpg") 1x, url("img/madobe-1920.jpg") 2x);
  background-size: 500% auto;
  background-position: calc(var(--mai) * 25%) 46%;
  box-shadow: 0 40px 50px -40px rgba(31, 45, 51, 0.45);
}
@media (min-width: 1100px) { .ori-men { background-image: url("img/madobe-1920.jpg"); } }
/* 向こうを向いた板には、うっすら影を落とす（折れが浅くなると影も薄くなる） */
.ori-men--kage::after { content: ""; position: absolute; inset: 0; background: rgba(31, 45, 51, 0.16); opacity: calc(0.3 + (1 - var(--hiraku)) * 0.7 - var(--p) * 0.3); }
/* カーソルを合わせた板は、手前に出る */
.ori-men { translate: 0 0 0; transition: translate 0.9s var(--yuru); }
.ori-men:hover { translate: 0 0 54px; }

.asa-moji { text-align: center; }
.asa-na { font-family: var(--obun); font-weight: 400; font-size: clamp(3.4rem, 9vw, 8.5rem); line-height: 1; letter-spacing: 0.14em; margin-right: -0.14em; }
.asa-kotoba { margin-top: clamp(10px, 1.6vh, 20px); font-family: var(--mincho); font-size: clamp(1rem, 1.5vw, 1.4rem); letter-spacing: 0.24em; line-height: 2; }
.asa-shirushi {
  position: relative;
  padding-top: 16px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--obun);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--usu);
}
.asa-sita::after { content: ""; display: inline-block; width: 1px; height: 34px; margin-left: 14px; vertical-align: middle; background: var(--umi); animation: sita 2.6s ease-in-out infinite; transform-origin: top; }
@keyframes sita { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 区切りの共通 ---------- */

.ma { --p: 0.5; position: relative; padding: clamp(90px, 16vh, 200px) var(--yoko); }
/* つるし飾り（自己紹介の終わり）と、できることの4つの枠のあいだは、空きを小さくする */
#about { padding-bottom: clamp(30px, 5vh, 64px); }
#service { padding-top: clamp(50px, 8vh, 100px); }
/* 区切りの番号札：まるい印と、英語の名前 */
.fuda-ban { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(44px, 7vw, 100px); font-family: var(--obun); font-size: 18px; font-style: italic; letter-spacing: 0.16em; }
.fuda-ban span { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--umi); border-radius: 50%; color: var(--umi); font-style: normal; font-size: 15px; letter-spacing: 0.06em; }

/* 現れ方：下から、少し寝た状態から起きながら浮かぶ（hiru.js が is-in を付ける） */
.ugoku .ukabu { opacity: 0; transform: perspective(900px) translateY(34px) rotateX(14deg); transform-origin: 50% 100%; transition: opacity 1.3s var(--yuru), transform 1.5s var(--yuru); }
.ugoku .ukabu.is-in { opacity: 1; transform: none; }

/* ---------- 自己紹介 ---------- */

.jiko { display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-start; gap: clamp(36px, 7vw, 130px); }
.jiko-midashi { font-size: clamp(1.9rem, 3.6vw, 3.6rem); }
.jiko-bun { max-width: 26em; padding-top: 0.6em; color: var(--usu); display: grid; gap: 1.6em; }

.fuda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); width: min(100%, 1080px); margin: clamp(70px, 10vw, 150px) auto 0; }
.fuda-ichi { padding: clamp(20px, 2.2vw, 34px) clamp(22px, 2.6vw, 40px); border-radius: 18px; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 20px 40px -32px rgba(31, 45, 51, 0.35); }
.fuda dt { font-family: var(--mincho); font-size: 13px; letter-spacing: 0.24em; color: var(--umi); }
.fuda dd { margin-top: 6px; }
.fuda dd b { font-family: var(--obun); font-weight: 500; font-size: 1.6em; letter-spacing: 0.1em; line-height: 1; }
.fuda dd i { font-style: normal; margin: 0 0.6em; color: var(--sen); }
.fuda dd small { display: block; margin-top: 4px; font-size: 0.84em; color: var(--usu); }
.fuda dd a { color: var(--umi); text-underline-offset: 5px; }

/* 写真：糸でつるした飾り。場（tsuri-ba）ごと、見る角度が回り込む */
/* 高さは、いちばん長い糸の飾りが収まるくらいにする（下に大きな空きを作らない） */
.tsuri { position: relative; height: clamp(380px, 38vw, 640px); margin-top: clamp(70px, 10vw, 150px); perspective: 1300px; perspective-origin: 50% 30%; border-top: 1px solid var(--sen); }
.tsuri-ba { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc((var(--p) - 0.5) * -64deg + var(--mx) * 9deg)) rotateX(calc(var(--my) * -3deg)); }
.tsuri-ichi { position: absolute; top: 0; left: var(--x); width: var(--haba); transform-style: preserve-3d; transform: translateX(-50%) translateZ(var(--z)); }
/* 糸の上を支点にして、左右に揺れながら、ゆっくり向きを変える */
.tsuri-furi { transform-style: preserve-3d; transform-origin: 50% 0; animation: furi var(--d) ease-in-out var(--okure) infinite alternate; }
@keyframes furi {
  from { transform: rotateZ(-2.4deg) rotateY(-20deg); }
  to { transform: rotateZ(2.4deg) rotateY(20deg); }
}
.tsuri-ito { display: block; width: 1px; height: var(--ito); margin: 0 auto; background: rgba(31, 45, 51, 0.3); }
.tsuri .kari { box-shadow: 0 30px 40px -30px rgba(31, 45, 51, 0.4); }
.tsuri-1 { --x: 12%; --haba: 15%; --z: -260px; --ito: clamp(40px, 7vw, 110px); --d: 7.4s; --okure: -2s; }
.tsuri-2 { --x: 30%; --haba: 13%; --z: 140px; --ito: clamp(120px, 18vw, 280px); --d: 9.1s; --okure: -5s; }
.tsuri-3 { --x: 47%; --haba: 18%; --z: -420px; --ito: clamp(30px, 4vw, 70px); --d: 8.2s; --okure: -1s; }
.tsuri-4 { --x: 63%; --haba: 15%; --z: 60px; --ito: clamp(150px, 22vw, 340px); --d: 6.6s; --okure: -4s; }
.tsuri-5 { --x: 78%; --haba: 14%; --z: -180px; --ito: clamp(60px, 9vw, 140px); --d: 10.3s; --okure: -7s; }
.tsuri-6 { --x: 88%; --haba: 11%; --z: 120px; --ito: clamp(100px, 13vw, 200px); --d: 7.9s; --okure: -3s; }

/* ---------- できること：短冊 ---------- */

.dekiru { display: flex; flex-direction: row-reverse; justify-content: center; gap: clamp(28px, 5vw, 90px); }
.dekiru-midashi { font-size: clamp(1.9rem, 3.6vw, 3.6rem); }
.tanzaku { flex: 1; max-width: 1100px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 22px); perspective: 1200px; }
.tanzaku-ichi { min-height: clamp(300px, 30vw, 460px); display: flex; flex-direction: column; padding: clamp(20px, 2.2vw, 34px) clamp(16px, 1.8vw, 28px); border-radius: 999px 999px 16px 16px; background: rgba(255, 255, 255, 0.66); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 24px 44px -34px rgba(31, 45, 51, 0.4); text-align: center; }
.tanzaku-ban { display: block; margin-top: clamp(16px, 2.4vw, 40px); font-family: var(--obun); font-size: 15px; letter-spacing: 0.14em; color: var(--umi); }
.tanzaku h3 { margin-top: 10px; font-family: var(--obun); font-weight: 400; font-size: clamp(1.5rem, 2.3vw, 2.4rem); line-height: 1.2; letter-spacing: 0.04em; }
.tanzaku h3 small { display: block; margin-top: 10px; font-family: var(--mincho); font-size: 12px; letter-spacing: 0.24em; color: var(--usu); }
.tanzaku p { margin-top: auto; padding-top: 20px; font-size: 0.92em; line-height: 1.9; color: var(--usu); text-align: left; }
/* 寝た状態から、1枚ずつ順番に起き上がる */
.ugoku .tanzaku-ichi { opacity: 0; transform: rotateX(-78deg); transform-origin: 50% 100%; transition: opacity 0.9s var(--yuru), transform 1.6s var(--yuru); transition-delay: calc(var(--n) * 0.16s); }
.ugoku .tanzaku.is-in .tanzaku-ichi { opacity: 1; transform: none; }

/* ---------- サンプル作品：机の上の紙 ---------- */

.yoko-midashi { font-family: var(--obun); font-weight: 400; font-style: italic; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1.1; letter-spacing: 0.04em; text-align: center; }
/* --s は、紙がどこまで広がったか（0＝重なっている、1＝広がりきった）。区切りが画面の真ん中に来るまでに広がりきる */
.dai {
  --s: clamp(0, (var(--p) - 0.14) / 0.3, 1);
  --kw: min(15vw, 230px);
  position: relative;
  height: calc(var(--kw) * 2.5);
  margin-top: clamp(20px, 3vw, 50px);
  perspective: 1400px;
  perspective-origin: 50% 20%;
}
/* 机の面。はじめは斜め上から見下ろし（寝かせて、ひねる）、広がるにつれて正面に近づく */
.dai-ue {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc(66deg - var(--s) * 38deg + var(--my) * -4deg)) rotateZ(calc(-34deg + var(--s) * 27deg + var(--mx) * 6deg));
}
/* 机の面（紙の下にしく板。たての細い線で奥行きを見せる） */
.dai-ue::before {
  content: "";
  position: absolute;
  left: calc(var(--kw) * -3.5);
  top: calc(var(--kw) * -1.35);
  width: calc(var(--kw) * 7);
  height: calc(var(--kw) * 2.7);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background:
    repeating-linear-gradient(90deg, rgba(31, 45, 51, 0.06) 0 1px, rgba(0, 0, 0, 0) 1px calc(var(--kw) * 0.5)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3));
  box-shadow: 0 70px 80px -50px rgba(31, 45, 51, 0.4);
  transform: translateZ(-3px);
}
/* 紙：--k は真ん中からの順番（-2〜2）。重なっているときは少しずつずれて積まれ、広がると横に並ぶ */
.dai-kami {
  --k: calc(var(--i) - 2);
  --kx: var(--k);
  --ky: 0;
  position: absolute;
  left: calc(var(--kw) / -2);
  top: calc(var(--kw) * -0.68);
  width: var(--kw);
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 1.3vw, 22px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: linear-gradient(170deg, #fefefd 0%, var(--iro) 100%);
  box-shadow: 0 18px 30px -20px rgba(31, 45, 51, 0.45);
  transform:
    translate3d(calc(var(--kx) * var(--kw) * 1.1 * var(--s)), calc(var(--ky) * var(--kw) * 1.42 * var(--s) + var(--k) * var(--k) * 5px * var(--s)), calc(var(--i) * 12px * (1 - var(--s)) + 1px))
    rotateZ(calc(var(--k) * 5deg * (1 - var(--s))));
}
.dai-ban { font-family: var(--obun); font-size: clamp(1.6rem, 2.6vw, 3rem); line-height: 1; color: var(--umi); }
.dai-kami h3 { margin-top: auto; font-family: var(--obun); font-weight: 500; font-size: clamp(0.9rem, 1.15vw, 1.3rem); line-height: 1.3; letter-spacing: 0.04em; }
.dai-kami p { font-family: var(--obun); font-size: clamp(0.7rem, 0.85vw, 0.95rem); line-height: 1.6; letter-spacing: 0.14em; color: var(--usu); }
.dai-kami em { position: absolute; top: clamp(12px, 1.3vw, 22px); right: clamp(12px, 1.3vw, 22px); font-family: var(--obun); font-size: 11px; letter-spacing: 0.18em; color: var(--usu); }

/* ---------- 制作の流れ：飛び石 ---------- */

.nagare { display: flex; flex-direction: row-reverse; justify-content: center; gap: clamp(36px, 6vw, 110px); }
.nagare-kata { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: clamp(20px, 3vw, 50px); }
.nagare-midashi { font-size: clamp(1.9rem, 3.6vw, 3.6rem); }
.nagare-e { width: clamp(150px, 17vw, 280px); margin-top: clamp(40px, 8vw, 120px); }
.ishi { flex: 1; max-width: 640px; display: grid; gap: clamp(26px, 3.4vw, 54px); }
/* 石は、1つおきに右へずらして、飛び石の並びにする */
.ishi-ichi { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.ishi-ichi:nth-child(even) { margin-left: clamp(24px, 6vw, 110px); }
.ishi-ban { flex: none; display: grid; place-items: center; width: clamp(74px, 7.4vw, 118px); aspect-ratio: 1 / 0.86; border-radius: 58% 42% 55% 45% / 52% 56% 44% 48%; background: linear-gradient(160deg, #fff 0%, var(--c-umi) 100%); box-shadow: 0 22px 30px -22px rgba(31, 45, 51, 0.5); font-family: var(--obun); font-size: clamp(1.2rem, 1.8vw, 1.9rem); color: var(--umi); }
.ishi-ichi:nth-child(2) .ishi-ban { border-radius: 46% 54% 42% 58% / 58% 44% 56% 42%; background: linear-gradient(160deg, #fff 0%, var(--c-suna) 100%); }
.ishi-ichi:nth-child(3) .ishi-ban { border-radius: 54% 46% 60% 40% / 44% 52% 48% 56%; background: linear-gradient(160deg, #fff 0%, var(--c-ha) 100%); }
.ishi-ichi:nth-child(4) .ishi-ban { border-radius: 42% 58% 48% 52% / 54% 46% 54% 46%; background: linear-gradient(160deg, #fff 0%, var(--c-yuu) 100%); }
.ishi h3 { font-family: var(--obun); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.5rem); line-height: 1.2; letter-spacing: 0.04em; }
.ishi h3 small { margin-left: 1em; font-family: var(--mincho); font-size: 12px; letter-spacing: 0.24em; color: var(--usu); vertical-align: middle; }
.ishi p { margin-top: 4px; color: var(--usu); }

/* ---------- ひとこと ---------- */

.kotoba-ba { position: relative; display: grid; place-items: center; min-height: clamp(360px, 44vw, 620px); }
/* 淡い日：スクロールに合わせて、下から昇りながら大きくなる */
.hi {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(280px, 38vw, 600px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, var(--c-suna) 48%, rgba(241, 232, 214, 0) 72%);
  transform: translate(-50%, calc(-50% + (0.5 - var(--p)) * 240px)) scale(calc(0.72 + var(--p) * 0.56));
}
.kotoba-bun { position: relative; font-size: clamp(1.8rem, 3.8vw, 3.8rem); }

/* ---------- 連絡先 ---------- */

/* 最後は、温かい光に包まれて終わる */
.tayori { text-align: center; background: radial-gradient(ellipse 60% 62% at 50% 62%, rgba(252, 214, 168, 0.6), rgba(252, 214, 168, 0) 70%); }
.tayori .fuda-ban { justify-content: center; }
.tayori-midashi { font-family: var(--obun); font-weight: 400; font-style: italic; font-size: clamp(3.2rem, 9vw, 8rem); line-height: 1.1; }
.tayori-bun { margin-top: clamp(14px, 2vw, 28px); color: var(--usu); }
.tayori-osu { margin-top: clamp(34px, 5vw, 70px); }
.maru-btn {
  display: inline-grid;
  place-items: center;
  width: clamp(150px, 14vw, 200px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--umi);
  color: var(--umi);
  font-family: var(--mincho);
  letter-spacing: 0.2em;
  text-decoration: none;
  transition: background-color 0.7s var(--yuru), color 0.7s var(--yuru), transform 0.7s var(--yuru);
}
.maru-btn:hover, .maru-btn:focus-visible { background: var(--umi); color: #fff; transform: scale(1.06); }
.tayori-chu { margin-top: 18px; font-size: 12px; letter-spacing: 0.16em; color: var(--usu); }

/* ---------- いちばん下 ---------- */

.ato { position: relative; display: flex; justify-content: space-between; padding: 22px var(--yoko) 30px; font-family: var(--obun); font-size: 14px; letter-spacing: 0.18em; color: var(--usu); }
.ato a { text-underline-offset: 5px; }

/* ========== 動きと立体。動きの種類は、場所ごとに変えてある ========== */

/* ---------- 両脇 ---------- */

main, .ato { position: relative; z-index: 1; }
/* --sc はページ全体のスクロールの進み具合（0〜1。hiru.js が入れる） */
/* 端に寄せず、内側へ広げる（左右とも、画面の幅の 26% まで） */
.waki { position: fixed; top: 0; bottom: 0; z-index: 0; width: clamp(140px, 26vw, 560px); pointer-events: none; perspective: 700px; overflow: hidden; }
.waki--hidari { left: var(--obi); }
.waki--migi { right: 0; transform: translateY(calc(var(--sc, 0) * -6vh)); }
.waki .hira { width: calc(var(--s) * 0.42); }
.waki .wa { width: 62%; margin-left: -22%; }
.waki .wa-2 { width: 46%; margin: 8% 0 0 -14%; }
.waki .wa-3 { width: 28%; margin: 17% 0 0 -5%; }
.waki .suji { left: 58%; }
.waki.waki--migi .suji { left: auto; right: 58%; }
/* 流れる光の点（左は下へ、右は上へ。速さも変える） */
.suji { position: absolute; top: 0; bottom: 0; left: 24%; width: 1px; background: repeating-linear-gradient(180deg, var(--umi) 0 26px, rgba(0, 0, 0, 0) 26px 240px), linear-gradient(var(--sen), var(--sen)); animation: ochiru 34s linear infinite; }
.waki--migi .suji { left: auto; right: 22%; background: repeating-linear-gradient(180deg, rgba(224, 150, 90, 0.95) 0 14px, rgba(0, 0, 0, 0) 14px 300px), linear-gradient(var(--sen), var(--sen)); animation: ochiru 52s linear infinite reverse; }
@keyframes ochiru { from { background-position: 0 0, 0 0; } to { background-position: 0 1200px, 0 0; } }
/* 立体の輪：3つが、ばらばらの軸と速さで回る。スクロールすると、場所が上から下へ動く */
.wa { position: absolute; left: 50%; top: calc(16% + var(--sc, 0) * 58%); width: 112%; aspect-ratio: 1; margin-left: -56%; border-radius: 50%; border: 1px dashed rgba(28, 111, 143, 0.45); }
.wa-1 { animation: wa-a 30s linear infinite; }
.wa-2 { width: 84%; margin: 14% 0 0 -42%; border: 1px solid rgba(224, 150, 90, 0.5); animation: wa-b 22s linear infinite; }
.wa-3 { width: 50%; margin: 31% 0 0 -25%; border: 1px solid rgba(28, 111, 143, 0.55); animation: wa-c 15s linear infinite; }
@keyframes wa-a { from { transform: rotateX(68deg) rotateZ(0deg); } to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes wa-b { from { transform: rotateX(24deg) rotateY(0deg); } to { transform: rotateX(24deg) rotateY(360deg); } }
@keyframes wa-c { from { transform: rotateY(40deg) rotateX(0deg); } to { transform: rotateY(40deg) rotateX(-360deg); } }
/* 紙きれ：奥行き（--z）の違う所を、ひらひら回りながら昇る。大きさ・形・色・速さ・回り方は1枚ずつ違う */
.hira {
  position: absolute;
  left: var(--l);
  bottom: -16vh;
  width: var(--s);
  aspect-ratio: var(--a, 3 / 4);
  border-radius: var(--r, 6px);
  background: linear-gradient(160deg, #fff 0%, var(--c) 100%);
  box-shadow: 0 12px 20px -12px rgba(31, 45, 51, 0.4);
  opacity: var(--o, 0.85);
  animation: noboru var(--d) linear var(--dl) infinite;
}
@keyframes noboru {
  from { transform: translate3d(0, 0, var(--z)) rotateX(0deg) rotateY(0deg) rotateZ(-8deg); }
  to { transform: translate3d(var(--dx), -135vh, var(--z)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(14deg); }
}

/* ---------- 背景の飾り（画面いっぱい。真ん中にも置く）。文章の後ろにあり、線は細く、色は薄くして、文章を隠さない ---------- */

.haikei { position: fixed; top: 0; right: 0; bottom: 0; left: var(--obi); z-index: 0; pointer-events: none; overflow: hidden; perspective: 1000px; opacity: 0.72; }
/* --sy は、スクロールでずれる大きさ（物ごとに変えて、手前と奥の差を出す） */
.hk { position: absolute; translate: 0 calc(var(--sc, 0) * var(--sy, -60px)); }

/* 日の光の輪：上の真ん中で、とてもゆっくり回る */
.hane {
  --sy: 90px;
  left: 50%;
  top: -34vmin;
  width: 92vmin;
  aspect-ratio: 1;
  margin-left: -46vmin;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 232, 190, 0.5) 0 2deg, rgba(255, 255, 255, 0) 2deg 12deg);
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 22%, #000 40%, rgba(0, 0, 0, 0) 70%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 22%, #000 40%, rgba(0, 0, 0, 0) 70%);
  animation: mawaru 180s linear infinite;
}
@keyframes mawaru { to { transform: rotate(360deg); } }

/* 形を変えるかたまり：真ん中で、ゆっくり形と場所を変え続ける */
.awa {
  --sy: -220px;
  left: 34%;
  top: 30%;
  width: 46vmin;
  aspect-ratio: 1;
  background: radial-gradient(circle at 36% 32%, rgba(255, 255, 255, 0.9), rgba(205, 229, 226, 0.55) 62%, rgba(205, 229, 226, 0) 74%);
  animation: awa 34s ease-in-out infinite alternate;
}
@keyframes awa {
  0% { border-radius: 58% 42% 55% 45% / 52% 56% 44% 48%; transform: translate(-6vw, 2vh) rotate(0deg) scale(0.9); }
  50% { border-radius: 42% 58% 40% 60% / 60% 40% 60% 40%; transform: translate(8vw, -6vh) rotate(60deg) scale(1.1); }
  100% { border-radius: 52% 48% 62% 38% / 44% 58% 42% 56%; transform: translate(16vw, 6vh) rotate(130deg) scale(0.96); }
}

/* 線の球：たての輪5つと横の輪1つでできた球が、かたむいたまま回る */
.tama { --sy: -150px; left: 60%; top: 12%; width: 40vmin; aspect-ratio: 1; transform-style: preserve-3d; animation: tama 80s linear infinite; }
.tama i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(28, 111, 143, 0.3); }
.tama i:nth-child(2) { transform: rotateY(36deg); }
.tama i:nth-child(3) { transform: rotateY(72deg); }
.tama i:nth-child(4) { transform: rotateY(108deg); }
.tama i:nth-child(5) { transform: rotateY(144deg); }
.tama i:nth-child(6) { transform: rotateX(90deg); border-color: rgba(224, 150, 90, 0.5); }
@keyframes tama { from { transform: rotateZ(18deg) rotateX(-16deg) rotateY(0deg); } to { transform: rotateZ(18deg) rotateX(-16deg) rotateY(360deg); } }

/* 線の箱：6つの面でできた箱が、ゆっくり転がるように回る */
.hako { --sy: 180px; --hen: 10vmin; left: 20%; top: 58%; width: calc(var(--hen) * 2); aspect-ratio: 1; transform-style: preserve-3d; animation: hako 62s linear infinite; }
.hako i { position: absolute; inset: 0; border: 1px solid rgba(224, 150, 90, 0.5); background: rgba(255, 255, 255, 0.16); }
.hako i:nth-child(1) { transform: translateZ(var(--hen)); }
.hako i:nth-child(2) { transform: rotateY(90deg) translateZ(var(--hen)); }
.hako i:nth-child(3) { transform: rotateY(180deg) translateZ(var(--hen)); }
.hako i:nth-child(4) { transform: rotateY(270deg) translateZ(var(--hen)); }
.hako i:nth-child(5) { transform: rotateX(90deg) translateZ(var(--hen)); }
.hako i:nth-child(6) { transform: rotateX(-90deg) translateZ(var(--hen)); }
@keyframes hako { from { transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg); } to { transform: rotateX(340deg) rotateY(360deg) rotateZ(180deg); } }

/* 大きな輪2つ：画面の真ん中で、ちがう向きにかたむいて、逆向きに回る */
.oowa { --sy: -40px; left: 50%; top: 50%; width: 78vmin; aspect-ratio: 1; margin: -39vmin 0 0 -39vmin; transform-style: preserve-3d; }
.oowa i { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(28, 111, 143, 0.3); animation: oowa-a 110s linear infinite; }
.oowa i:nth-child(2) { inset: 9%; border: 1px solid rgba(224, 150, 90, 0.35); animation: oowa-b 140s linear infinite; }
@keyframes oowa-a { from { transform: rotateX(72deg) rotateZ(0deg); } to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes oowa-b { from { transform: rotateX(60deg) rotateY(24deg) rotateZ(360deg); } to { transform: rotateX(60deg) rotateY(24deg) rotateZ(0deg); } }

/* まわる点の軌道：寝かせた輪の上を、点が回る（内と外で逆向き・ちがう速さ） */
.kido { --sy: 120px; left: 9%; top: 16%; width: 26vmin; aspect-ratio: 1; transform: rotateX(64deg) rotateZ(-14deg); transform-style: preserve-3d; }
.kido i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(31, 45, 51, 0.16); animation: mawaru 26s linear infinite; }
.kido i:nth-child(2) { inset: 24%; animation: mawaru 15s linear infinite reverse; }
.kido i::after { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--umi); opacity: 0.7; }
.kido i:nth-child(2)::after { background: rgba(224, 150, 90, 0.95); }

/* ふりこ：上からつるした玉が、ゆっくり左右にふれる */
.furiko { --sy: 0px; left: 44%; top: 0; width: 1px; height: 30vh; background: var(--sen); transform-origin: 50% 0; animation: furiko 11s ease-in-out infinite alternate; }
.furiko::after { content: ""; position: absolute; left: -11px; bottom: -22px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--umi); background: rgba(255, 255, 255, 0.7); }
@keyframes furiko { from { transform: rotate(-11deg); } to { transform: rotate(11deg); } }

/* 奥へのびる床の線：下の真ん中。線が手前へ流れ続ける（道を進んでいるように見える） */
.yuka {
  --sy: 0px;
  left: -30%;
  right: -30%;
  bottom: -4vh;
  height: 58vh;
  transform: rotateX(74deg);
  transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(0deg, rgba(28, 111, 143, 0.26) 0 1px, rgba(0, 0, 0, 0) 1px 70px),
    repeating-linear-gradient(90deg, rgba(28, 111, 143, 0.18) 0 1px, rgba(0, 0, 0, 0) 1px 70px);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 92%);
  mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 92%);
  animation: yuka 10s linear infinite;
}
@keyframes yuka { from { background-position: 0 0, 0 0; } to { background-position: 0 70px, 0 0; } }

/* 流れていく街の線：手前の街は速く、奥の街はゆっくり、止まらずに横へ流れ続ける */
.machi { position: absolute; left: 0; bottom: 9vh; width: 220%; height: 20vh; fill: rgba(255, 255, 255, 0.35); stroke: rgba(31, 45, 51, 0.22); stroke-width: 1; vector-effect: non-scaling-stroke; animation: machi 130s linear infinite; }
.machi path { vector-effect: non-scaling-stroke; }
.machi--oku { bottom: 17vh; height: 15vh; fill: rgba(216, 232, 241, 0.4); stroke: rgba(28, 111, 143, 0.2); animation-duration: 230s; }
@keyframes machi { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ここから下は、hiru.js が数を足す小さな物 */
/* 流れる光のすじ：斜めに、画面を横切る（高さ・長さ・速さは1本ずつ違う） */
.nagareboshi { --sy: -30px; left: 0; top: var(--t); width: var(--w); height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--iro, rgba(28, 111, 143, 0.6)) 80%, rgba(255, 255, 255, 0)); animation: nagareboshi var(--d) linear var(--dl) infinite; }
@keyframes nagareboshi { from { transform: translateX(-40vw) translateY(0) rotate(-12deg); } to { transform: translateX(120vw) translateY(-26vh) rotate(-12deg); } }
/* 波紋：あちこちで、輪が広がって消える */
.wawa { --sy: -90px; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; border: 1px solid var(--iro, rgba(28, 111, 143, 0.5)); opacity: 0; animation: wawa var(--d) ease-out var(--dl) infinite; }
@keyframes wawa { 0% { transform: scale(0.15); opacity: 0; } 12% { opacity: 0.6; } 100% { transform: scale(1); opacity: 0; } }
/* 三角：ひらりと向きを変えながら、横へ流れる */
.sankaku { --sy: 140px; left: 0; top: var(--y); width: var(--s); aspect-ratio: 1 / 0.9; background: linear-gradient(160deg, rgba(255, 255, 255, 0.85), var(--c)); clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: 0.6; animation: sankaku var(--d) linear var(--dl) infinite; }
@keyframes sankaku { from { transform: translate3d(-12vw, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to { transform: translate3d(108vw, var(--dy), 0) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(200deg); } }
/* 窓の明かり：ななめを向いた壁の窓が、ばらばらに点いたり消えたりする */
.mado { --sy: -200px; left: var(--x); top: var(--y); display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1vmin; width: 15vmin; transform: rotateY(var(--muki)) rotateX(4deg); }
.mado i { aspect-ratio: 3 / 4; background: var(--iro, rgba(224, 150, 90, 0.6)); animation: mado var(--d) steps(1) var(--dl) infinite; }
/* 文章の後ろに来ても読めるように、いちばん明るいときでも薄くしておく */
@keyframes mado { 0%, 100% { opacity: 0.06; } 34% { opacity: 0.32; } 72% { opacity: 0.16; } }

/* ---------- 線の立体（hiru.js が、細い線の部品を組んで作る）。背景にも、区切りごとの文章や枠のまわりにも置く ----------
   大きさは font-size で決める（部品は em で組んであり、立体の1辺が 10em）。--okisa が 1em の大きさ。
   形は11種類：結晶・ドーナツ・筒・円すい・らせん・らせん階段・二重の箱・箱・こま（輪3つと軸）・とげ・波の輪。
   回り方は4種類（--mawari）。速さ（--d）と色（--iro）も1つずつ変える */
.rittai {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 10em;
  height: 10em;
  margin: -5em 0 0 -5em;
  font-size: var(--okisa, 1.6vmin);
  color: var(--iro, rgba(28, 111, 143, 0.42));
  transform-style: preserve-3d;
  pointer-events: none;
  animation: var(--mawari, mawari-a) var(--d, 60s) linear var(--dl, 0s) infinite;
}
@keyframes mawari-a { from { transform: perspective(80em) rotateX(-20deg) rotateY(0deg); } to { transform: perspective(80em) rotateX(-20deg) rotateY(360deg); } }
@keyframes mawari-b { from { transform: perspective(80em) rotateZ(24deg) rotateX(0deg); } to { transform: perspective(80em) rotateZ(24deg) rotateX(360deg); } }
@keyframes mawari-c { from { transform: perspective(80em) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to { transform: perspective(80em) rotateX(360deg) rotateY(720deg) rotateZ(360deg); } }
@keyframes mawari-d { from { transform: perspective(80em) rotateX(62deg) rotateZ(0deg); } to { transform: perspective(80em) rotateX(62deg) rotateZ(-360deg); } }
/* 部品：四角の枠・まるい輪（大きさは r2〜r10）、棒（両はしに点）、階段の板 */
.r { position: absolute; box-sizing: border-box; border: 1px solid currentColor; }
.r.maru { border-radius: 50%; }
.r2 { left: 4em; top: 4em; width: 2em; height: 2em; }
.r3 { left: 3.3em; top: 3.3em; width: 3.4em; height: 3.4em; }
.r4 { left: 3em; top: 3em; width: 4em; height: 4em; }
.r6 { left: 2em; top: 2em; width: 6em; height: 6em; }
.r7 { left: 1.5em; top: 1.5em; width: 7em; height: 7em; }
.r8 { left: 1em; top: 1em; width: 8em; height: 8em; }
.r9 { left: 0.5em; top: 0.5em; width: 9em; height: 9em; }
.r10 { left: 0; top: 0; width: 10em; height: 10em; }
.r.bo, .r.bo10 { top: 5em; height: 0; border-width: 1px 0 0; }
.r.bo { left: 2em; width: 6em; }
.r.bo10 { left: 0; width: 10em; }
.r.bo::before, .r.bo::after { content: ""; position: absolute; top: -0.22em; width: 0.44em; height: 0.44em; border-radius: 50%; background: currentColor; }
.r.bo::before { left: -0.22em; }
.r.bo::after { right: -0.22em; }
.r.dan { left: 5em; top: 4.2em; width: 4em; height: 1.6em; transform-origin: 0 50%; background: rgba(255, 255, 255, 0.2); }
/* 区切りの中に置く物：文章より奥・背景より手前。スクロールで、物ごとに違う大きさで上下にずれる */
.oki { z-index: -1; translate: 0 calc((var(--p) - 0.5) * var(--ugo, -140px)); }
/* 区切りの番号のとなりの、小さな箱 */
.rittai.mame { position: relative; left: auto; top: auto; margin: 0 0 0 4px; font-size: 2.4px; color: rgba(28, 111, 143, 0.7); flex: none; }

/* ---------- 枠のまわりの飾り ---------- */

/* 屏風のまわりを回る輪（屏風と同じ立体の中にあるので、手前を通ったり奥を通ったりする） */
.byobu-wa { position: absolute; left: 50%; top: 50%; width: calc(var(--w) * 6.6); aspect-ratio: 1; margin: calc(var(--w) * -3.3) 0 0 calc(var(--w) * -3.3); border-radius: 50%; border: 1px solid rgba(28, 111, 143, 0.5); opacity: var(--hiraku); pointer-events: none; animation: oowa-a 70s linear infinite; }
.byobu-wa--2 { width: calc(var(--w) * 5.6); margin: calc(var(--w) * -2.8) 0 0 calc(var(--w) * -2.8); border: 1px dashed rgba(224, 150, 90, 0.7); animation: byobu-wa-b 96s linear infinite; }
@keyframes byobu-wa-b { from { transform: rotateX(80deg) rotateY(14deg) rotateZ(360deg); } to { transform: rotateX(80deg) rotateY(14deg) rotateZ(0deg); } }
/* 札：角に、かぎの形の細い線。カーソルを合わせると、線がのびる */
.fuda-ichi { position: relative; }
.fuda-ichi::before, .fuda-ichi::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--umi); opacity: 0.6; pointer-events: none; transition: width 0.8s var(--yuru), height 0.8s var(--yuru); }
.fuda-ichi::before { left: -6px; top: -6px; border-right: 0; border-bottom: 0; }
.fuda-ichi::after { right: -6px; bottom: -6px; border-left: 0; border-top: 0; }
.fuda-ichi:hover::before, .fuda-ichi:hover::after { width: 44px; height: 44px; }
/* 短冊：頭の上で、輪がゆっくり回る（1枚ごとに速さと向きが違う） */
.tanzaku-ichi { position: relative; }
.tanzaku-ichi::before { content: ""; position: absolute; left: 50%; top: -30px; width: 58%; aspect-ratio: 1; margin-left: -29%; border-radius: 50%; border: 1px dashed rgba(28, 111, 143, 0.55); pointer-events: none; animation: kasa 22s linear infinite; }
.tanzaku-ichi:nth-child(2)::before { border: 1px solid rgba(224, 150, 90, 0.6); animation-duration: 31s; animation-direction: reverse; }
.tanzaku-ichi:nth-child(3)::before { width: 44%; margin-left: -22%; animation-duration: 17s; }
.tanzaku-ichi:nth-child(4)::before { border: 1px solid rgba(28, 111, 143, 0.45); animation-duration: 40s; animation-direction: reverse; }
@keyframes kasa { from { transform: rotateX(76deg) rotateZ(0deg); } to { transform: rotateX(76deg) rotateZ(360deg); } }
/* 飛び石：石のまわりを、つぶれた輪が向きを変えながら回る */
.ishi-ban::before { content: ""; position: absolute; inset: -34% -40%; border-radius: 50%; border: 1px solid rgba(28, 111, 143, 0.4); pointer-events: none; animation: ishi-wa 26s linear infinite; }
.ishi-ichi:nth-child(even) .ishi-ban::before { border: 1px dashed rgba(224, 150, 90, 0.6); animation-duration: 38s; animation-direction: reverse; }
@keyframes ishi-wa { from { transform: rotateZ(0deg) scaleY(0.36); } to { transform: rotateZ(360deg) scaleY(0.36); } }

/* ---------- トップ：屏風の奥に、淡い日と、流れる雲 ---------- */

/* 日：マウスと反対のほうへ少しずれる（屏風より奥にあるように見せる） */
.asa::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 40%;
  width: min(74vh, 60vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 244, 222, 0.8) 44%, rgba(255, 244, 222, 0) 70%);
  transform: translate(calc(-50% + var(--mx) * -46px), calc(-50% + var(--my) * -26px + var(--p) * 140px));
}
/* 雲：左から右へ、止まらずに流れ続ける */
.asa::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 16%;
  width: 46vw;
  height: 22vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 68%);
  animation: kumo 80s linear -30s infinite;
}
@keyframes kumo { from { transform: translateX(-50vw); } to { transform: translateX(110vw); } }

/* ---------- 区切りごと：奥のまるい光（ゆっくり動く）と、手前の小さな枠（速く動いて、回る） ---------- */

.ma::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--oku-x, -6vw);
  top: 12%;
  width: clamp(240px, 36vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, var(--oku, var(--c-sora)) 56%, rgba(255, 255, 255, 0) 72%);
  opacity: 0.75;
  transform: translateY(calc((var(--p) - 0.5) * -170px)) scale(calc(0.86 + var(--p) * 0.28));
}
.ma::after {
  content: "";
  position: absolute;
  left: var(--temae-x, 90%);
  top: 50%;
  width: clamp(60px, 7vw, 130px);
  aspect-ratio: 1;
  border-radius: var(--temae-r, 12px);
  border: 1px solid var(--umi);
  pointer-events: none;
  opacity: 0.55;
  transform: perspective(520px) translateY(calc((var(--p) - 0.5) * 460px)) rotateX(calc(var(--p) * var(--temae-kx, 220deg))) rotateY(calc(var(--p) * var(--temae-ky, 150deg)));
}
#about { --oku: var(--c-sora); --temae-x: 91%; }
#service { --oku: var(--c-suna); --oku-x: 58vw; --temae-x: 4%; --temae-r: 50%; --temae-kx: 90deg; --temae-ky: 400deg; }
#works { --oku: var(--c-ha); --oku-x: 6vw; --temae-x: 88%; --temae-r: 50% 50% 6px 6px; --temae-kx: -180deg; --temae-ky: 60deg; }
#flow { --oku: var(--c-umi); --oku-x: 50vw; --temae-x: 6%; --temae-kx: 300deg; --temae-ky: -120deg; }
#words { --oku: var(--c-machi); --oku-x: -10vw; --temae-x: 84%; --temae-r: 50%; --temae-kx: 40deg; --temae-ky: 320deg; }
#contact { --oku: var(--c-yuu); --oku-x: 62vw; --temae-x: 10%; --temae-kx: -240deg; --temae-ky: 200deg; }

/* 区切りの番号の丸：ときどき、コインのようにくるっと回る */
.fuda-ban span { animation: kururi 12s ease-in-out infinite; }
.ma:nth-of-type(odd) .fuda-ban span { animation-delay: -5s; }
@keyframes kururi { 0%, 78% { transform: perspective(300px) rotateY(0deg); } 100% { transform: perspective(300px) rotateY(360deg); } }

/* 縦書きの見出し：マウスの位置で、見る角度が少し回り込む。文字の影もずれて、厚みがあるように見える */
.jiko, .dekiru, .nagare-kata, .kotoba-ba { perspective: 900px; }
.tate { rotate: y calc(var(--mx) * -15deg); text-shadow: calc(var(--mx) * -7px) 5px 0 rgba(28, 111, 143, 0.13); }

/* ---------- 自己紹介 ---------- */

/* 札：スクロールに合わせて、板ごと見る角度が変わり、となり同士が手前と奥へすれ違う */
.fuda { transform-style: preserve-3d; transform: perspective(1500px) rotateX(calc((var(--p) - 0.42) * 18deg)) rotateY(calc(var(--mx) * 3deg)); }
.fuda-ichi { --zure: 240px; translate: 0 0 calc((var(--p) - 0.42) * var(--zure)); }
.fuda-ichi:nth-child(even) { --zure: -240px; }
/* カーソルを合わせた札は、左のはしを軸にして、とびらのように手前へ開く */
.ugoku .fuda-ichi.ukabu { transform-origin: 0 100%; }
.ugoku .fuda-ichi.ukabu.is-in:hover { transform: perspective(900px) rotateY(-17deg) translateZ(26px); box-shadow: 34px 30px 50px -30px rgba(31, 45, 51, 0.4); }
/* 飾りをのせている板（tsuri-ba）は透明だが、そのままだとカーソルが当たる。板より奥に置いた飾り（Photo 01・03・05）は、
   手前のこの板にカーソルを取られて反応しなかったので、板はカーソルを通し、飾りの1枚ずつにだけ当たるようにする */
.tsuri-ba { pointer-events: none; }
/* 飾り1つの箱は、糸の上のはしから枠の下までの、枠と同じ幅の長い箱。糸は細い線でも、この箱（糸のまわりの透明な部分）が
   カーソルを受けると、奥にある別の枠（Photo 01）の上にかぶさって、そちらが反応しなくなる。
   そこで、箱・糸・回る枠そのものはカーソルを通し、枠の場所に重ねた「当たり判定だけの透明な板」（下の ::after）にだけ当てる。
   この板は枠と一緒には回らないので、枠が回って細く見えるあいだも、カーソルが外れない */
.tsuri-ichi, .tsuri-ichi .kari, .tsuri-ito { pointer-events: none; }
.tsuri-furi { position: relative; }
.tsuri-furi::after { content: ""; position: absolute; left: 0; right: 0; top: var(--ito); bottom: 0; pointer-events: auto; border-radius: 14px; }
/* 当たり判定の板の形を、枠の形に合わせる（丸い枠は丸、アーチの枠はアーチ。四角のすみが、となりの枠にかぶらないように） */
.tsuri-2 .tsuri-furi::after, .tsuri-6 .tsuri-furi::after { border-radius: 50%; }
.tsuri-1 .tsuri-furi::after, .tsuri-5 .tsuri-furi::after { border-radius: 999px 999px 10px 10px; }
/* つるした飾り：カーソルを合わせると、その1枚がゆっくり1回転する */
.tsuri-ichi .kari { transition: transform 2.8s var(--yuru); }
.tsuri-ichi:hover .kari { transform: rotateY(360deg); }

/* ---------- できること：短冊を、1枚おきに向きと奥行きを変えて立てる ---------- */

.tanzaku { transform-style: preserve-3d; transform: rotateY(calc(var(--mx) * 7deg)) rotateX(calc((var(--p) - 0.5) * -10deg)); }
.tanzaku-ichi:nth-child(odd) { rotate: y 12deg; }
.tanzaku-ichi:nth-child(even) { rotate: y -12deg; translate: 0 0 -50px; }
/* カーソルを合わせると、草のようにそよぐ */
.ugoku .tanzaku.is-in .tanzaku-ichi:hover { animation: soyogu 2.6s ease-in-out; }
@keyframes soyogu { 0%, 100% { transform: rotateZ(0deg); } 20% { transform: rotateZ(2.8deg); } 45% { transform: rotateZ(-2.1deg); } 70% { transform: rotateZ(1.1deg); } }

/* ---------- サンプル作品：カーソルを合わせた紙が、机から浮き上がる ---------- */

.dai-kami { translate: 0 0 0; transition: translate 0.9s var(--yuru), box-shadow 0.9s var(--yuru); }
.dai-kami:hover { translate: 0 0 90px; box-shadow: 0 70px 50px -30px rgba(31, 45, 51, 0.38); }

/* ---------- 制作の流れ：飛び石の道を、はじめは寝かせて見せ、進むにつれて起こす ---------- */

.ishi { transform: perspective(1200px) rotateX(calc(20deg - var(--p) * 22deg)); transform-origin: 50% 0; }
/* 石に厚みを付ける。カーソルを合わせると、石が少し沈んで、波紋が広がる */
.ishi-ban { position: relative; box-shadow: 0 8px 0 rgba(31, 45, 51, 0.13), 0 26px 30px -20px rgba(31, 45, 51, 0.5); transition: transform 0.6s var(--yuru), box-shadow 0.6s var(--yuru); }
.ishi-ban::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--umi); opacity: 0; }
.ishi-ichi:hover .ishi-ban { transform: translateY(6px) scale(0.96); box-shadow: 0 2px 0 rgba(31, 45, 51, 0.13), 0 12px 16px -12px rgba(31, 45, 51, 0.5); }
.ishi-ichi:hover .ishi-ban::after { animation: hamon 1.6s ease-out; }
@keyframes hamon { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2.3); opacity: 0; } }
/* 絵の枠：マウスの位置で向きが変わる */
.nagare-e { rotate: y calc(var(--mx) * 18deg); }

/* ---------- ひとこと：日（奥）・言葉・輪（手前）の3つが、違う速さで動いて重なる ---------- */

.kotoba-ba::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(240px, 30vw, 480px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(28, 111, 143, 0.5);
  pointer-events: none;
  transform: translate(-50%, calc(-50% + (var(--p) - 0.5) * 320px)) rotateX(calc(58deg + var(--p) * 50deg)) rotateZ(calc(var(--p) * 120deg));
}
.kotoba-bun { translate: calc(var(--mx) * 14px) calc((0.5 - var(--p)) * 46px); }

/* 言葉の出方。hiru.js が、行（.gyo。--g は右から何行目か）と文字（.ji。--n は行の中で何文字目か）に分ける。
   .yomu は読み上げ用の全文（画面には出さない） */
.yomu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gyo { position: relative; display: block; transform-origin: 100% 50%; }
.ji { display: inline-block; }
/* 行の右の細い線（屏風の折り目）。上から下へ引かれ、引き終わると薄くなって残る */
.gyo::before { content: ""; position: absolute; top: -0.4em; bottom: -0.4em; right: -0.42em; width: 1px; background: var(--umi); opacity: 0.22; transform-origin: 50% 0; }
/* 現れる前の形：行は、右の線を蝶番にして奥へ折れている。文字は、大きくぼやけて、上に浮いて寝ている */
/* 速さ：画面に少し入ったらすぐ始まり、2秒ほどで全部そろう（行は 0.26 秒ずつ、文字は 0.045 秒ずつ、ずらす） */
.ugoku .kiri .gyo { opacity: 0; transform: perspective(1000px) rotateY(-82deg) translateZ(-140px); transition: opacity 0.6s ease, transform 1.2s var(--yuru); transition-delay: calc(var(--g) * 0.26s); }
.ugoku .kiri .gyo::before { opacity: 0; transform: scaleY(0); }
.ugoku .kiri .ji { opacity: 0; filter: blur(14px); transform: translate3d(0, -0.9em, 0) scale(1.7) rotateX(74deg); transition: opacity 0.6s ease, filter 0.85s ease, transform 1s var(--yuru); transition-delay: calc(var(--g) * 0.26s + var(--n) * 0.045s + 0.12s); }
/* 現れたあとの形：ふつうの文字（くっきり読める） */
.ugoku .kiri.is-in .gyo { opacity: 1; transform: none; }
.ugoku .kiri.is-in .ji { opacity: 1; filter: blur(0); transform: none; }
.ugoku .kiri.is-in .gyo::before { animation: orime 1.7s var(--yuru) calc(var(--g) * 0.26s) both; }
@keyframes orime { 0% { transform: scaleY(0); opacity: 1; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0.22; } }
/* 同じときに、後ろの日がふくらんで現れ、手前の輪が外から寄ってくる（言葉が現れる前は、どちらも見えない） */
.ugoku .kotoba-ba .hi { opacity: 0; scale: 0.45; transition: opacity 1.2s ease, scale 2.2s var(--yuru); }
.ugoku .kotoba-ba:has(.kiri.is-in) .hi { opacity: 1; scale: 1; }
.ugoku .kotoba-ba::after { opacity: 0; scale: 2.4; transition: opacity 1.2s ease 0.1s, scale 2.4s var(--yuru) 0.1s; }
.ugoku .kotoba-ba:has(.kiri.is-in)::after { opacity: 1; scale: 1; }

/* ---------- トップの文字の出方（屏風が開くのに合わせる。読み込んで約1秒後から、4秒ほどで全部そろう） ----------
   名前：1文字ずつ、下で寝ていた文字が、ぼやけから起き上がる（hiru.js が文字に分ける）。そのあと、下に細い線が左右へのびる
   言葉：左から右へ、幕が開くように現れる
   下の印：最後に、下からふわっと浮かぶ */
.asa-na { position: relative; }
.moji { display: inline-block; }
.ugoku .asa-na .moji { opacity: 0; filter: blur(12px); transform: perspective(600px) translateY(0.7em) rotateX(-84deg); transform-origin: 50% 100%; animation: na-deru 1.5s var(--yuru) calc(1s + var(--n) * 0.15s) forwards; }
@keyframes na-deru { to { opacity: 1; filter: blur(0); transform: none; } }
.ugoku .asa-na::after { content: ""; position: absolute; left: 50%; bottom: -0.04em; width: 1.6em; height: 1px; margin-left: -0.87em; background: var(--umi); transform: scaleX(0); animation: na-sen 2s var(--yuru) 2.2s forwards; }
@keyframes na-sen { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0.35; } }
.ugoku .asa-kotoba { clip-path: inset(0 100% 0 0); translate: -18px 0; animation: kotoba-deru 1.8s var(--yuru) 2.5s forwards; }
@keyframes kotoba-deru { to { clip-path: inset(0 0 0 0); translate: 0 0; } }
.ugoku .asa-shirushi { opacity: 0; translate: 0 16px; animation: shirushi-deru 1.4s var(--yuru) 3.5s forwards; }
@keyframes shirushi-deru { to { opacity: 1; translate: 0 0; } }

/* ---------- カーソルの跡：通った所に、細い線が引かれて、1秒ほどで消える（hiru.js が線を足す。マウスのときだけ） ----------
   線は 1px。色は強調と同じ海の青。新しい所ほど濃く、古い所ほど薄い（3段）。文章の上を通っても読めるように、いちばん濃い所でも薄くしてある */
.ato-sen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 15; pointer-events: none; }
.ato-sen polyline { fill: none; stroke: var(--umi); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.ato-sen polyline:nth-child(1) { opacity: 0.55; }
.ato-sen polyline:nth-child(2) { opacity: 0.3; }
.ato-sen polyline:nth-child(3) { opacity: 0.12; }

/* ---------- 連絡先：まるいボタンのまわりを、2つの輪が星の軌道のように回る ---------- */

.maru-btn { position: relative; }
.maru-btn::before, .maru-btn::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.maru-btn::before { inset: -20%; border: 1px dashed rgba(28, 111, 143, 0.55); animation: kido-a 20s linear infinite; }
.maru-btn::after { inset: -38%; border: 1px solid rgba(224, 150, 90, 0.6); animation: kido-b 31s linear infinite; }
@keyframes kido-a { from { transform: perspective(700px) rotateX(66deg) rotateZ(0deg); } to { transform: perspective(700px) rotateX(66deg) rotateZ(360deg); } }
@keyframes kido-b { from { transform: perspective(700px) rotateY(62deg) rotateZ(360deg); } to { transform: perspective(700px) rotateY(62deg) rotateZ(0deg); } }

/* ========== 幕開け（開いたときの動き。約6秒。画像は使わない。細い線・光・立体の形だけ。hiru.js が部品を作る） ==========
   「一本の線から始まり、一本の線に戻って、屏風が開く」
   1. 白い紙の上に、光の点が走って、横に一本の線を引く
   2. その線を蝶番にして、線の床が手前へ開く（床の線は、手前へ流れ続ける）
   3. 床の上に、線の球が現れて回り、そのまわりを、線の立体が4つ、ちがう軌道で回る（見せ場）
   4. 全部が、屏風のある場所の、たての一本の光の線に吸い込まれる
   5. その光の線から、TOP の屏風が開きはじめる
   Skip のボタン・クリック・キー・スクロールで、いつでも飛ばせる。動きを減らす設定の人には出さない */

/* ページ全体に付ける印は maku-chu（幕開けの入れ物の名前 maku とは分ける） */
html.maku-chu { overflow: hidden; }
html.maku-chu .asa, html.maku-chu .asa *, html.maku-chu .asa *::before, html.maku-chu .asa *::after { animation-play-state: paused !important; }

/* --bx・--by・--bh は、TOP の屏風の真ん中の場所と高さ（hiru.js が、実際の屏風を測って入れる） */
.maku {
  --T: 6s;
  --bx: 50vw;
  --by: 40vh;
  --bh: 50vh;
  --yuka-y: calc(var(--by) + var(--bh) * 0.62);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
  overflow: hidden;
  perspective: 1000px;
  perspective-origin: var(--bx) var(--by);
  background:
    radial-gradient(60vmax 50vmax at 12% 8%, rgba(170, 212, 232, 0.5), rgba(170, 212, 232, 0) 70%),
    radial-gradient(55vmax 45vmax at 92% 88%, rgba(244, 222, 186, 0.6), rgba(244, 222, 186, 0) 70%),
    #f4f6f1;
  animation: maku-zentai var(--T) linear forwards;
  transition: opacity 1s ease;
}
.maku.owari { opacity: 0; pointer-events: none; }
/* 全体の長さを計るだけの動き（これが終わったら、hiru.js が TOP に変える） */
@keyframes maku-zentai { from { outline-offset: 0px; } to { outline-offset: 0.01px; } }

/* 世界（床・球・立体をのせた入れ物）。見せ場ではゆっくり寄りながら向きを変え、最後に、たての一本の線につぶれる */
.mk-sekai { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; transform-origin: var(--bx) var(--by); animation: mk-sekai var(--T) cubic-bezier(0.5, 0, 0.3, 1) forwards; }
@keyframes mk-sekai {
  0% { transform: scale3d(1, 1, 1) rotateY(0deg); opacity: 1; }
  34% { transform: scale3d(1, 1, 1) rotateY(4deg); opacity: 1; }
  66% { transform: scale3d(1.16, 1.16, 1.16) rotateY(-9deg); opacity: 1; }
  82% { transform: scale3d(0.004, 1.3, 1) rotateY(0deg); opacity: 1; }
  87%, 100% { transform: scale3d(0.004, 1.3, 1) rotateY(0deg); opacity: 0; }
}
/* 1. 横の一本の線と、線を引いていく光の点 */
.mk-sen { position: absolute; left: 0; top: var(--by); width: 100%; height: 1px; background: linear-gradient(90deg, rgba(28, 111, 143, 0), var(--umi) 16%, var(--umi) 84%, rgba(28, 111, 143, 0)); transform-origin: 0 50%; animation: mk-sen var(--T) cubic-bezier(0.6, 0, 0.3, 1) forwards; }
@keyframes mk-sen { 0% { transform: scaleX(0); opacity: 1; } 12% { transform: scaleX(1); opacity: 1; } 24%, 100% { transform: scaleX(1); opacity: 0; } }
.mk-ten { position: absolute; left: 0; top: var(--by); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(28, 111, 143, 0.7), 0 0 34px 10px rgba(255, 232, 190, 0.9); animation: mk-ten var(--T) cubic-bezier(0.6, 0, 0.3, 1) forwards; }
@keyframes mk-ten { 0% { transform: translateX(-2vw); opacity: 1; } 12% { transform: translateX(102vw); opacity: 1; } 13%, 100% { transform: translateX(102vw); opacity: 0; } }
/* 2. 線の床。横の線（真横から見た床）が、奥へ開いて床になる。最後は、また線に戻る */
/* 床は、横の線の場所を上のはしにした大きな板 */
.mk-yuka {
  position: absolute;
  left: -70vw;
  top: var(--by);
  width: 240vw;
  height: 260vh;
  transform-origin: 50% 0;
  background:
    repeating-linear-gradient(0deg, rgba(28, 111, 143, 0.5) 0 1px, rgba(0, 0, 0, 0) 1px 10vh),
    repeating-linear-gradient(90deg, rgba(28, 111, 143, 0.36) 0 1px, rgba(0, 0, 0, 0) 1px 10vh);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 5%, #000 36%, rgba(0, 0, 0, 0) 72%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 5%, #000 36%, rgba(0, 0, 0, 0) 72%);
  animation: mk-yuka var(--T) ease-in-out forwards, mk-nagare 2.8s linear infinite;
}
/* 上のはし（横の線の場所）を蝶番にして、真横（一本の線に見える）から、手前へ開く。最後は、また線に戻る */
@keyframes mk-yuka {
  0%, 10% { transform: rotateX(-90deg); opacity: 0; }
  13% { transform: rotateX(-90deg); opacity: 1; }
  34% { transform: rotateX(-80deg); opacity: 1; }
  66% { transform: rotateX(-76deg); opacity: 1; }
  80% { transform: rotateX(-90deg); opacity: 1; }
  84%, 100% { transform: rotateX(-90deg); opacity: 0; }
}
/* 床の線は、手前へ流れ続ける */
@keyframes mk-nagare { from { background-position: 0 0, 0 0; } to { background-position: 0 10vh, 0 0; } }
/* 3. 線の球（たての輪6つと、横の輪1つ）。小さな点から広がって現れ、回り続ける */
.mk-tama { position: absolute; left: var(--bx); top: var(--by); width: 36vmin; height: 36vmin; margin: -18vmin 0 0 -18vmin; transform-style: preserve-3d; animation: mk-deru var(--T) cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes mk-deru { 0%, 22% { transform: scale(0); opacity: 0; } 24% { opacity: 1; } 42%, 100% { transform: scale(1); opacity: 1; } }
.mk-tama-in { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; animation: mk-tama-mawaru 7s linear infinite; }
@keyframes mk-tama-mawaru { from { transform: rotateZ(16deg) rotateX(-18deg) rotateY(0deg); } to { transform: rotateZ(16deg) rotateX(-18deg) rotateY(360deg); } }
.mk-tama-in i { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(28, 111, 143, 0.6); }
.mk-tama-in i:nth-child(2) { transform: rotateY(30deg); }
.mk-tama-in i:nth-child(3) { transform: rotateY(60deg); }
.mk-tama-in i:nth-child(4) { transform: rotateY(90deg); }
.mk-tama-in i:nth-child(5) { transform: rotateY(120deg); }
.mk-tama-in i:nth-child(6) { transform: rotateY(150deg); }
.mk-tama-in i:nth-child(7) { transform: rotateX(90deg); border-color: rgba(224, 150, 90, 0.9); }
/* 球の真ん中の光 */
.mk-kaku { position: absolute; left: var(--bx); top: var(--by); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px rgba(28, 111, 143, 0.55), 0 0 60px 20px rgba(255, 232, 190, 0.9); animation: mk-deru var(--T) ease-out forwards, mk-myaku 1.8s ease-in-out infinite alternate; }
@keyframes mk-myaku { from { box-shadow: 0 0 10px 3px rgba(28, 111, 143, 0.5), 0 0 40px 12px rgba(255, 232, 190, 0.7); } to { box-shadow: 0 0 16px 6px rgba(28, 111, 143, 0.6), 0 0 80px 30px rgba(255, 232, 190, 1); } }
/* 球のまわりを回る、線の立体4つ。軌道（--kz・--kx でかたむける）ごとに、大きさ・速さ・向きが違う。軌道の輪も細い点線で見せる */
.mk-kido { position: absolute; left: var(--bx); top: var(--by); width: 0; height: 0; transform-style: preserve-3d; animation: mk-kido var(--T) cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes mk-kido {
  0%, 28% { transform: rotateZ(var(--kz)) rotateX(var(--kx)) scale(0); opacity: 0; }
  30% { opacity: 1; }
  50%, 100% { transform: rotateZ(var(--kz)) rotateX(var(--kx)) scale(1); opacity: 1; }
}
.mk-mawaru { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; animation: mk-mawaru var(--md) linear var(--mdl) infinite; }
@keyframes mk-mawaru { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.mk-mawaru::before { content: ""; position: absolute; left: calc(var(--R) * -1); top: calc(var(--R) * -1); width: calc(var(--R) * 2); height: calc(var(--R) * 2); box-sizing: border-box; border-radius: 50%; border: 1px dashed rgba(28, 111, 143, 0.35); transform: rotateX(90deg); }
.mk-kido-1 { --kz: 14deg; --kx: -12deg; --R: 30vmin; --md: 9s; --mdl: -2s; }
.mk-kido-2 { --kz: -22deg; --kx: 20deg; --R: 40vmin; --md: 13s; --mdl: -7s; }
.mk-kido-3 { --kz: 38deg; --kx: -30deg; --R: 24vmin; --md: 7s; --mdl: -4s; }
.mk-kido-4 { --kz: -8deg; --kx: 8deg; --R: 52vmin; --md: 17s; --mdl: -11s; }
.mk-kido-2 .mk-mawaru, .mk-kido-4 .mk-mawaru { animation-direction: reverse; }
/* 4. たての一本の光の線。屏風の場所に、屏風の高さでのびる。ここから TOP の屏風が開く */
.mk-tate {
  position: absolute;
  left: var(--bx);
  top: var(--by);
  width: 1px;
  height: var(--bh);
  margin: calc(var(--bh) / -2) 0 0 0;
  background: linear-gradient(180deg, rgba(28, 111, 143, 0), var(--umi) 14%, #ffffff 50%, var(--umi) 86%, rgba(28, 111, 143, 0));
  box-shadow: 0 0 14px 2px rgba(28, 111, 143, 0.5), 0 0 70px 14px rgba(255, 232, 190, 0.85);
  transform: scaleY(0);
  animation: mk-tate var(--T) cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes mk-tate { 0%, 77% { transform: scaleY(0); opacity: 0; } 80% { transform: scaleY(0.16); opacity: 1; } 94% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1.04); opacity: 1; } }
.maku-tobasu { position: absolute; right: 3vw; bottom: 3vh; padding: 9px 24px; border: 1px solid var(--umi); border-radius: 999px; background: rgba(255, 255, 255, 0.6); color: var(--umi); font-family: var(--obun); font-size: 15px; letter-spacing: 0.22em; cursor: pointer; }
.maku-tobasu:hover, .maku-tobasu:focus-visible { background: var(--umi); color: #fff; }

/* 切り替えスイッチ（サイトで共通の部品）は、幕開けのあいだは隠しておき、TOP に変わったら出す */
.site-switch { transition: opacity 0.9s ease; }
html.maku-chu .site-switch { opacity: 0; pointer-events: none; }

/* ========== 仕上げ ========== */
/* 重さ：画面に出ていない区切りの中の動きは止める（hiru.js が、見えている区切りに mieru を付ける） */
.ugoku .asa:not(.mieru) *, .ugoku .asa:not(.mieru) *::before, .ugoku .asa:not(.mieru) *::after,
.ugoku .ma:not(.mieru) *, .ugoku .ma:not(.mieru) *::before, .ugoku .ma:not(.mieru) *::after { animation-play-state: paused; }
/* 読みやすさ：枠に入っていない説明の字は、まわりを紙の色でうっすら包む（後ろを飾りが通っても読める） */
.asa-kotoba, .jiko-bun, .ishi p, .ishi h3, .tayori-bun, .tayori-chu, .asa-shirushi { text-shadow: 0 0 10px rgba(246, 248, 244, 0.95), 0 0 3px rgba(246, 248, 244, 0.9); }

/* ---------- スマホ・タブレット ---------- */

@media (max-width: 820px) {
  :root { --obi: 0px; }
  /* 帯は、上の細い横の帯にする */
  .obi { right: 0; bottom: auto; width: auto; height: 52px; flex-direction: row; padding: 0 var(--yoko); border-right: 0; border-bottom: 1px solid var(--sen); }
  .obi a { writing-mode: horizontal-tb; }
  .obi-michi { flex-direction: row; gap: 14px; font-size: 12px; letter-spacing: 0.1em; }
  .asa { padding-top: 84px; }
  /* スマホは縦長の画面なので、屏風を縦に大きくする（絵は、板の高さに合わせて貼る） */
  .byobu { --w: min(18.5vw, 22vh); --h: calc(var(--w) * 3.5); perspective: 900px; }
  .ori-men { background-size: auto 100%; }
  /* 背景の飾りは、数と大きさを減らす（箱・軌道・窓は出さない） */
  .haikei { opacity: 0.8; }
  .hako, .kido, .mado { display: none; }
  .tama { left: 52%; top: 8%; width: 46vmin; }
  .awa { left: 10%; width: 60vmin; }
  /* 両脇は幅がないので、細くして薄く残す（輪は出さない） */
  .waki { width: 22vw; opacity: 0.55; }
  .waki--hidari .wa { display: none; }
  .fuda-ichi { --zure: 90px; }
  .fuda-ichi:nth-child(even) { --zure: -90px; }
  .tanzaku-ichi:nth-child(odd) { rotate: y 7deg; }
  .tanzaku-ichi:nth-child(even) { rotate: y -7deg; }
  .dai-ue::before { left: calc(var(--kw) * -1.35); top: calc(var(--kw) * -2.35); width: calc(var(--kw) * 2.7); height: calc(var(--kw) * 4.7); }
  .asa-shirushi { font-size: 11px; letter-spacing: 0.12em; }
  .asa-shirushi li:nth-child(2) { display: none; }
  .jiko, .dekiru, .nagare { flex-direction: column; align-items: center; }
  .jiko-midashi, .dekiru-midashi { max-height: 15em; }
  .fuda { grid-template-columns: 1fr; }
  .tsuri { height: 118vw; perspective: 800px; }
  .tsuri-1 { --x: 16%; --haba: 27%; }
  .tsuri-2 { --x: 50%; --haba: 24%; --ito: 62vw; }
  .tsuri-3 { --x: 82%; --haba: 30%; }
  .tsuri-4 { --x: 22%; --haba: 28%; --ito: 70vw; }
  .tsuri-5 { --x: 52%; --haba: 25%; --ito: 12vw; }
  .tsuri-6 { --x: 82%; --haba: 22%; --ito: 60vw; }
  .tanzaku { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tanzaku-ichi { min-height: 62vw; }
  /* 紙は、2枚・2枚・1枚の3段に広げる */
  .dai { --kw: 34vw; height: calc(var(--kw) * 5.2); }
  .dai-ue { top: 50%; }
  .dai-kami:nth-child(1) { --kx: -0.5; --ky: -1; }
  .dai-kami:nth-child(2) { --kx: 0.5; --ky: -1; }
  .dai-kami:nth-child(3) { --kx: -0.5; --ky: 0; }
  .dai-kami:nth-child(4) { --kx: 0.5; --ky: 0; }
  .dai-kami:nth-child(5) { --kx: 0; --ky: 1; }
  .nagare-kata { align-items: center; }
  .nagare-e { margin-top: 0; }
  .ishi { width: 100%; }
  .ishi-ichi:nth-child(even) { margin-left: 8vw; }
  .ishi h3 small { display: block; margin: 6px 0 0; }
}

/* 動きを減らす設定の人には、動かさずに全部見せる（屏風は開いた形、紙は広げた形で止める） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .asa { --p: 0.6; }
  .ma { --p: 0.5; }
  .byobu-yure, .tsuri-furi, .asa-sita::after, .asa-shirushi::before, .ato::before { animation: none; }
  body::after, .waki, .haikei, .asa::after { display: none; }
  .byobu { --hiraku: 1; animation: none; }
  .fuda-ban span, .maru-btn::before, .maru-btn::after { animation: none; }
  .byobu-wa, .tanzaku-ichi::before, .ishi-ban::before { animation: none; }
  .byobu-wa { opacity: 1; }
}