@charset "UTF-8";

/* =========================================================
   UMIHA Works — 共通スタイル（明朝・エディトリアル）

   パレット（日本の伝統色）
     濃藍 / 群青 / 青碧 / 水縹 / 山吹 / 照柿
   ========================================================= */

:root {
  --c1: #123a63;  --c2: #1f6fae;  --c3: #22a08e;
  --c4: #4fc3d4;  --c5: #eeb340;  --c6: #f26a4f;

  --ink:    #171d26;
  --ink-2:  #4a5666;
  --ink-3:  #7d8898;
  --line:   #dde3ea;
  --line-2: #ecf0f4;
  --bg:     #fbfbf9;   /* 生成りの紙 */
  --bg-2:   #f3f4f1;

  --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --sans:  "Zen Kaku Gothic New", -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;

  --wrap: 1040px;
  --ease: cubic-bezier(.22,.9,.3,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --c1: #6fa6da; --c2: #5aa8e0; --c3: #45c2ae;
    --c4: #63d2e2; --c5: #f2c463; --c6: #ff8570;
    --ink: #e9ebe8; --ink-2: #b0b9c2; --ink-3: #83909d;
    --line: #2b333d; --line-2: #212933;
    --bg: #10151c; --bg-2: #171d25;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--serif);
  font-size: 16.5px; line-height: 2.1; letter-spacing: .05em;
  font-feature-settings: "palt";
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--c2); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* ---------- 英字ラベル ---------- */
.roman {
  font-family: var(--sans);
  font-size: .68rem; letter-spacing: .34em; font-weight: 500;
  text-transform: uppercase; color: var(--ink-3);
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line-2);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 72px; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-weight: 700;
  font-size: 1rem; letter-spacing: .14em; color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand svg { display: block; flex: none; }
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.site-nav { display: flex; gap: 30px; font-family: var(--sans); font-size: .84rem; letter-spacing: .12em; }
/* ☰ は携帯のときだけ出します */
.nav-toggle { display: none; }
.site-nav a { color: var(--ink-2); position: relative; padding: 4px 0; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--ink); transition: right .35s var(--ease);
}
.site-nav a:hover { color: var(--ink); }
/* いま見ているページ。下線を引きっぱなしにして、居場所を示します。 */
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::after { right: 0; }
.site-header.clear .site-nav a[aria-current="page"] { color: #fff; }
.site-nav a:hover::after { right: 0; }

/* 水面や紺地の上に重ねる透明ヘッダー。
   上部には貼り付いたまま、暗い区画を通り過ぎたら地を敷きます
   （敷かないと、明るい紙面の上で白い字が消えます）。 */
.site-header.clear {
  /* 上に貼り付けたいので固定にします。sticky は「流れの中に居座る」ので、
     ヘッダーぶんの白い帯が紺地の上に生まれ、白い字が消えてしまいます
     （2026-08-25 に実際に起きました）。fixed は流れから外れるため、
     紺地はページの先頭から始まり、その上にヘッダーが重なります。 */
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent; border-bottom: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.site-header.clear .brand,
.site-header.clear .site-nav a,
.site-header.clear .nav-toggle { color: rgba(255,255,255,.92); }

/* 暗い区画を抜けたあと */
.site-header.clear.solid {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line-2);
}
.site-header.clear.solid .brand,
.site-header.clear.solid .nav-toggle { color: var(--ink); }
.site-header.clear.solid .site-nav a { color: var(--ink-2); }
.site-header.clear.solid .site-nav a::after { background: var(--ink); }
.site-header.clear.solid .site-nav a[aria-current="page"] { color: var(--ink); }
.site-header.clear.solid .brand svg [stroke]:not([stroke="none"]) { stroke: url(#g); }
.site-header.clear.solid .brand svg [fill]:not([fill="none"])     { fill: url(#g); }
/* 印は下地に濃い色のグラデーションを持っています。水面の上では沈むので、
   文字と同じ白に置き換えます（CSS は SVG の属性より強いので、これで効きます）。 */
.site-header.clear .brand svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.site-header.clear .brand svg [fill]:not([fill="none"])     { fill: currentColor; }
.site-header.clear .site-nav a::after { background: #fff; }
.site-header.clear .site-nav a:hover { color: #fff; }

/* ---------- 水面ヒーロー ---------- */
.hero-water {
  position: relative; height: 100svh; min-height: 560px;
  overflow: hidden; color: #fff;
  /* WebGL が使えない環境の代替背景 */
  background: linear-gradient(140deg, #081428, #0f4c66 45%, #17796f 80%, #1c8a80);
}
.water, .water canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.water.no-gl canvas { display: none; }

.hero-inner { position: relative; z-index: 2; height: 100%; pointer-events: none; }

/* 縦書きの主題 */
.tate {
  position: absolute; top: 0; bottom: 0; right: 44px;
  margin: auto 0; height: fit-content;
  writing-mode: vertical-rl;
  font-weight: 600;
  font-size: clamp(2.1rem, 5.4vh, 3.4rem);
  line-height: 1.9; letter-spacing: .2em;
  margin: auto 0;
  text-shadow: 0 2px 30px rgba(4,16,28,.55);
}
/* 「色」の一文字だけ、色をのせる。
   圏点（傍点）はやめました。点を打つより、字そのものが
   色を持っているほうが、この一行の言いたいことに合います。
   背景が水面なので、白のふちを薄く回して読めるようにしています。 */
.tate em {
  font-style: normal;
  /* ★ Safari では、この一文字が色を失って丸ごと消えていました（2026-08-25）。
     縦書き（vertical-rl）の、2行にまたがる見出しの中に、ふつうの行内要素として
     background-clip:text を置くと、WebKit は背景を描く範囲を取り違えます。
     文字を「箱」にしてやると、その箱の中で背景が描かれるので、直ります。
     箱の幅は行の高さぶん（52px→82px）に広がりますが、中心はずれないので
     見た目は変わりません。box-decoration-break: clone では直りませんでした。
     ここを display:inline に戻さないでください。 */
  display: inline-block;
  /* 万一この先で背景が字に貼りつかなかったとき、透明のままだと字が消えます。
     まず普通の色を置いておき、貼りつく環境でだけ透明にします。 */
  color: #ffb35c;
  filter: drop-shadow(0 0 10px rgba(255, 190, 120, .5))
          drop-shadow(0 1px 2px rgba(4, 16, 28, .45));
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .tate em {
    background: linear-gradient(160deg, #ffd76a 0%, #ff8a5c 34%, #f2557a 60%, #7ad3e8 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    background-size: 100% 240%;
    animation: iroshift 9s ease-in-out infinite alternate;
  }
}
@keyframes iroshift {
  from { background-position: 50% 0%; }
  to   { background-position: 50% 100%; }
}
@media (prefers-reduced-motion: reduce) { .tate em { animation: none; } }

.hero-foot {
  position: absolute; left: 34px; bottom: 56px; max-width: 30em;
}
.hero-foot .roman { color: rgba(255,255,255,.66); display: block; margin-bottom: 16px; }
.hero-foot .roman::after {
  content: ""; display: block; width: 44px; height: 1px;
  background: rgba(255,255,255,.5); margin-top: 14px;
}
.hero-foot .lead {
  margin: 0; font-size: .98rem; line-height: 2.2;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 18px rgba(4,16,28,.5);
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  z-index: 2; pointer-events: none;
  font-family: var(--sans); font-size: .6rem; letter-spacing: .4em;
  color: rgba(255,255,255,.6); text-align: center;
}
.scroll-cue i {
  display: block; width: 1px; height: 64px; margin: 10px auto 0;
  background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 46% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- セクション共通 ---------- */
section { padding: 96px 0; }
.sec-head { display: flex; align-items: baseline; gap: 22px; margin-bottom: 44px; }
.t-gold { --tone: var(--t-gold); }
.t-red  { --tone: var(--t-red); }
.t-blue { --tone: var(--t-blue); }
.sec-head { position: relative; padding-bottom: 14px; }
.sec-head::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 2px;
  background: var(--tone, var(--line));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .9s var(--ease) .15s;
}
.sec-head.in::after { transform: scaleX(1); }
.sec-no {
  color: var(--tone, var(--line));
  font-family: var(--sans); font-weight: 300;
  font-size: 2.6rem; line-height: 1;
  letter-spacing: .04em;
}
h2 {
  margin: 0; font-size: 1.5rem; font-weight: 600;
  letter-spacing: .14em; line-height: 1.6;
}
.sec-head .roman { align-self: center; margin-left: auto; }

h3 { margin: 34px 0 12px; font-size: 1.08rem; font-weight: 600; letter-spacing: .1em; }
p { margin: 0 0 1.4em; }
p:last-child { margin-bottom: 0; }
.muted { color: var(--ink-3); font-size: .86rem; line-height: 2; }
.hl { border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* ---------- パレット（鑑賞用・触らない） ---------- */
.palette { background: var(--bg); }
.palette-caption { max-width: 34em; margin-bottom: 48px; }
.daubs {
  display: flex; flex-wrap: wrap; gap: 34px 30px; align-items: flex-start;
}
.daub { text-align: center; }
.daub i {
  display: block; width: 74px; height: 74px; margin: 0 auto 14px;
  border-radius: 58% 42% 55% 45% / 52% 58% 42% 48%;
  background: var(--dc);
  box-shadow: inset -7px -9px 16px rgba(0,0,0,.22), inset 6px 7px 13px rgba(255,255,255,.24);
  animation: breathe 9s ease-in-out infinite;
}
.daub:nth-child(2n) i { border-radius: 45% 55% 48% 52% / 58% 44% 56% 42%; animation-delay: -2s; }
.daub:nth-child(3n) i { border-radius: 52% 48% 60% 40% / 45% 55% 45% 55%; animation-delay: -4s; }
.daub:nth-child(5) i  { animation-delay: -6s; }
@keyframes breathe {
  0%,100% { transform: scale(1) rotate(0deg); }
  50%     { transform: scale(1.05) rotate(-2.5deg); }
}
.daub b { display: block; font-size: .92rem; font-weight: 600; letter-spacing: .18em; }
.daub span { display: block; font-family: var(--sans); font-size: .58rem; letter-spacing: .26em; color: var(--ink-3); margin-top: 3px; }

/* ---------- 作品（プロダクト） ---------- */
.work {
  border-top: 1px solid var(--ink);
  padding-top: 44px;
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 48px;
}
.work-title h3 { margin: 0 0 10px; font-size: 2.1rem; font-weight: 600; letter-spacing: .2em; }
.work-title .roman { display: block; margin-bottom: 26px; }
.work-title .roman b { color: var(--c3); font-weight: 500; }
.work-desc p { font-size: .98rem; }
.work-more { display: inline-block; margin-top: 26px; font-family: var(--sans); font-size: .84rem; letter-spacing: .14em; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.work-more:hover { color: var(--c3); border-color: var(--c3); }


/* ---------- 目次（回遊） ---------- */
.index-list { border-top: 1px solid var(--ink); }
.index-list a {
  display: flex; align-items: baseline; gap: 26px;
  padding: 26px 4px; border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease), padding-left .3s var(--ease);
}
.index-list a:hover { background: var(--bg-2); padding-left: 14px; color: inherit; }
.index-list .no { font-family: var(--sans); font-weight: 300; font-size: .8rem; color: var(--ink-3); letter-spacing: .1em; }
.index-list b { font-size: 1.12rem; font-weight: 600; letter-spacing: .16em; flex: 0 0 11em; }
.index-list span { font-size: .84rem; color: var(--ink-3); letter-spacing: .06em; flex: 1; }
.index-list .arw { font-family: var(--sans); transition: transform .3s var(--ease); }
.index-list a:hover .arw { transform: translateX(8px); color: var(--c3); }

/* ---------- 箇条書き・手順（下層） ---------- */
ul.features { margin: 18px 0 0; padding: 0; list-style: none; font-size: .95rem; color: var(--ink-2); }
ul.features li { position: relative; padding: 10px 2px 10px 26px; border-bottom: 1px solid var(--line-2); }
ul.features li::before {
  content: ""; position: absolute; left: 4px; top: 1.35em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--c3);
}
ul.features li:nth-child(4n+1)::before { background: var(--c2); }
ul.features li:nth-child(4n+3)::before { background: var(--c4); }
ul.features li:nth-child(4n+4)::before { background: var(--c5); }

ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
ol.steps li {
  counter-increment: s; position: relative;
  padding: 18px 2px 18px 64px; border-bottom: 1px solid var(--line-2);
  color: var(--ink-2); font-size: .93rem;
}
ol.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 2px; top: 20px;
  font-family: var(--sans); font-weight: 300; font-size: 1.3rem;
  color: var(--ink-3); letter-spacing: .06em;
}
ol.steps li::after {
  content: ""; position: absolute; left: 44px; top: 32px;
  width: 8px; height: 1px; background: var(--ink-3);
}
ol.steps li strong { display: block; color: var(--ink); font-size: 1rem; letter-spacing: .1em; }

/* ---------- 表 ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.95; }
th, td { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 16px; text-align: left; vertical-align: top; }
thead th { font-weight: 600; letter-spacing: .1em; border-top: 1px solid var(--ink); white-space: nowrap; }
tbody th { font-weight: 600; letter-spacing: .08em; width: 11em; white-space: nowrap; color: var(--ink-2); }

/* ---------- 問い合わせ ---------- */
.contact-box {
  border: 1px solid var(--line);
  padding: 36px 38px; background: var(--bg-2); border-radius: 12px;
}
/* 最後の窓口も沈めます。ここで押してほしいので、明るい紙面から浮かせます。 */
.contact-box.dark {
  background: linear-gradient(165deg, var(--stage-2), var(--stage));
  background-color: var(--stage);
  border-color: rgba(238,244,250,.09); color: #eef4fa;
  position: relative; overflow: hidden;
}
.contact-box.dark::before {
  content: ""; position: absolute; left: -30%; top: -60%; width: 60%; height: 220%;
  background: radial-gradient(closest-side, rgba(111,220,240,.16), transparent 70%);
  pointer-events: none; animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(180%); } }
.contact-box.dark > * { position: relative; }
.contact-box.dark h3 { color: #fff; }
.contact-box.dark p { color: rgba(238,244,250,.76); }
.contact-box.dark .note-dark { color: rgba(238,244,250,.46); }
.contact-box.dark .btn {
  background: transparent; color: #eef4fa !important;
  border: 1px solid rgba(111,220,240,.55); border-radius: 4px;
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 22px rgba(111,220,240,.14), inset 0 0 22px rgba(111,220,240,.06);
  transition: color .3s, box-shadow .35s var(--ease), transform .3s var(--ease);
}
.contact-box.dark .btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--glow);
  transform: translateY(101%); transition: transform .4s var(--ease);
}
.contact-box.dark .btn:hover, .contact-box.dark .btn:focus-visible {
  color: var(--stage) !important; transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(111,220,240,.3);
}
.contact-box.dark .btn:hover::before, .contact-box.dark .btn:focus-visible::before { transform: none; }
.btn {
  display: inline-block; margin-top: 6px; padding: 14px 38px;
  background: var(--ink); color: var(--bg) !important;
  font-family: var(--sans); font-size: .88rem; letter-spacing: .18em;
  transition: opacity .25s;
}
.btn:hover { opacity: .78; }

/* ---------- フッター ---------- */
.site-footer {
  background: #0b1626; color: rgba(255,255,255,.66);
  padding: 56px 0 64px; font-size: .85rem;
}
.site-footer::before {
  content: ""; display: block; height: 2px; margin-top: -58px; margin-bottom: 56px;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c6));
  opacity: .8;
}
.site-footer .brand { color: #fff; margin-bottom: 20px; }
.site-footer .brand:hover { color: #fff; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-bottom: 22px; font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; }
.footer-nav a { color: rgba(255,255,255,.82); }
.footer-nav a:hover { color: #9fe4ee; }
/* 脚の並びは全ページ同じ6項目。いま見ているページだけ、
   薄くしてリンクを外します。数が変わらないので、
   ページを移っても同じ位置に同じものがあります。 */
.footer-nav .here { color: rgba(255,255,255,.34); cursor: default; }
.copyright { font-family: var(--sans); letter-spacing: .16em; color: rgba(255,255,255,.4); font-size: .72rem; }

/* ---------- 下層ページ ---------- */
.crumb { padding-top: 30px; font-family: var(--sans); font-size: .76rem; letter-spacing: .1em; color: var(--ink-3); }
.crumb a { color: var(--ink-2); }
.hero { padding: 34px 0 10px; }
.hero h1 { margin: 0 0 16px; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 600; letter-spacing: .16em; line-height: 1.7; }
.hero .lead { margin: 0; max-width: 44em; color: var(--ink-2); font-size: .97rem; }

/* 下層の h2（sec-head を使わないページ用） */
main > section .wrap > h2 { 
  font-size: 1.3rem; margin-bottom: 30px; padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
}

/* ---------- スクロール表示 ---------- */
.rise { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise { opacity: 1; transform: none; }
}

/* =========================================================
   スマートフォン
   ---------------------------------------------------------
   縦に長いページは、それだけで読まれなくなります。ここでは
   「行間・余白・見出し」を詰めることで、中身を削らずに丈を
   縮めています。指標は「1ページ＝3画面ぶん以内」。
   ========================================================= */
@media (max-width: 760px) {
  /* 行間 2.1 は紙なら美しいが、画面では丈が倍近くになる。
     日本語が詰まって見えない下限として 1.85 に置く。 */
  body { font-size: 15.5px; line-height: 1.85; letter-spacing: .03em; }
  p { margin: 0 0 1.15em; }

  .wrap { padding: 0 20px; }
  /* 節が続くと上下の余白が足し算になり、指2本ぶんの空白が生まれる。
     続いているときだけ、上の余白を削る。 */
  section { padding: 40px 0; }
  section + section { padding-top: 6px; }
  .sec-head { margin-bottom: 24px; gap: 14px; }
  .sec-no { font-size: 1.9rem; }
  /* 英字の飾りが最大102pxを取り、見出しが2行に折れていた。
     350pxしかない行では、飾りより見出しを優先する。 */
  .sec-head .roman { display: none; }

  /* ヘッダーは1行に収める。折り返すと、指1本ぶんの高さを
     何も表示しないまま使ってしまう。 */
  /* 屋号がブラウザの枠にくっついて窮屈だったので、上に間を取る。
     水面に重なる（.clear）ときは、下がりすぎないよう控えめに。 */
  .site-header .wrap { min-height: 54px; flex-wrap: nowrap; gap: 10px; padding-top: 12px; }
  .site-header.clear .wrap { padding-top: 20px; }
  .site-header:not(.clear) { position: sticky; top: 0; }
  /* 屋号が2行に折れると、ヘッダーの丈が倍になる */
  .brand { font-size: .9rem; letter-spacing: .08em; gap: 8px; white-space: nowrap; }
  .brand svg { width: 22px; height: 22px; }
  /* 携帯では、項目を横に並べきれません。
     「団体でのご利用」まで略さず出そうとすると 320px の画面で
     240px 要り、屋号を引いた残りは 164px しかありません。
     字を詰めても届かないので、☰ で引き出す形にしました。
     こうしておけば、ページが増えても頭が崩れません。 */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin-right: -12px; padding: 0;
    border: 0; background: none; color: inherit; cursor: pointer;
    position: relative; z-index: 3;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle i {
    display: block; width: 20px; height: 1.5px; background: currentColor;
    transition: background-color .2s var(--ease);
  }
  .nav-toggle i::before, .nav-toggle i::after {
    content: ""; position: absolute; left: 13px; width: 20px; height: 1.5px;
    background: currentColor;
    transition: transform .34s var(--ease), top .22s var(--ease);
  }
  .nav-toggle i::before { top: 17px; }
  .nav-toggle i::after  { top: 29px; }
  .nav-open .nav-toggle i { background: transparent; }
  .nav-open .nav-toggle i::before { top: 23px; transform: rotate(45deg); }
  .nav-open .nav-toggle i::after  { top: 23px; transform: rotate(-45deg); }
  .nav-open .site-header.clear .nav-toggle { color: var(--ink); }
  /* 引き出しを開くと屋号が板の裏に隠れてしまうので、上に出しておきます。
     隠れると、いま自分がどのサイトにいるのか分からなくなります。 */
  .nav-open .brand { position: relative; z-index: 3; }
  .nav-open .site-header.clear .brand { color: var(--ink); }

  /* 引き出し本体。上から降りてきます */
  .site-nav {
    position: fixed; top: 0; left: 0; right: 0;
    display: block; gap: 0; margin: 0;
    padding: 74px 22px 26px;
    font-size: 1rem; letter-spacing: .1em;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(8, 18, 30, .12);
    transform: translateY(-101%);
    transition: transform .42s var(--ease);
    z-index: 2;
  }
  .nav-open .site-nav { transform: translateY(0); }
  .site-nav a {
    display: block; padding: 16px 2px; color: var(--ink);
    border-bottom: 1px solid var(--line-2);
    opacity: 0; transform: translateY(-6px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav a::after { display: none; }
  .nav-open .site-nav a { opacity: 1; transform: none; }
  .nav-open .site-nav a:nth-child(1) { transition-delay: .09s; }
  .nav-open .site-nav a:nth-child(2) { transition-delay: .14s; }
  .nav-open .site-nav a:nth-child(3) { transition-delay: .19s; }
  .nav-open .site-nav a:nth-child(4) { transition-delay: .24s; }
  .nav-open .site-nav a:nth-child(5) { transition-delay: .29s; }
  /* 水面や紺地に重なる透明ヘッダーでも、開いたら紙の上の字として読めるように。
     いま見ているページの項目は、閉じている間は白（水面の上なので）だが、
     開いた引き出しの中では白い板に白い字になってしまう。ここで戻す。 */
  .site-header.clear .site-nav a,
  .site-header.clear .site-nav a[aria-current="page"] { color: var(--ink); }

  /* 引き出しの裏。触れると閉じます（app.js が置きます） */
  .nav-scrim {
    position: fixed; inset: 0; z-index: 1;
    background: rgba(8, 18, 30, .3);
    opacity: 0; pointer-events: none;
    transition: opacity .38s var(--ease);
  }
  .nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  .nav-open { overflow: hidden; }

  /* 指の腹はおよそ 40px。文字だけだと 30px 弱しかなく、押し外しが起きる。 */
  .brand { padding: 6px 0; }
  .work-more { padding: 6px 0 5px; }
  .footer-nav { gap: 2px 26px; }
  .footer-nav a { display: inline-block; padding: 7px 0; }

  h1 { letter-spacing: .08em; line-height: 1.55; }
  h2 { letter-spacing: .1em; }
  .hero { padding: 20px 0 6px; }
  .hero h1 { margin-bottom: 10px; }
  .hero .lead { font-size: .93rem; }
  .crumb { padding-top: 20px; }

  .tate { right: 18px; font-size: clamp(1.55rem, 7.6vw, 2.2rem); letter-spacing: .14em; }
  /* 横1列のままだと、説明文が数十pxまで潰されて1文字ずつ折り返す。
     flex-wrap では直らない（flex:1 の要素は折り返さず縮むだけ）。
     見出しと説明を上下に積む格子に組み替える。 */
  .index-list a {
    display: grid; gap: 3px 10px;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "no title arw" ". desc desc";
    align-items: baseline; padding: 16px 2px;
  }
  .index-list a:hover { padding-left: 2px; }
  .index-list .no { grid-area: no; }
  .index-list b { grid-area: title; flex: none; font-size: 1.02rem; letter-spacing: .1em; }
  .index-list b + span { grid-area: desc; flex: none; font-size: .8rem; line-height: 1.85; }
  .index-list .arw { grid-area: arw; }
  .hero-foot { left: 22px; bottom: 44px; right: 110px; }
  .work { grid-template-columns: 1fr; gap: 22px; }
  .daub i { width: 60px; height: 60px; }
  .scroll-cue { display: none; }

  /* 表は、横に細長い升目をやめて、見出しと中身を積む。
     390pxの幅で2列にすると、どちらも読めない幅になる。 */
  .table-scroll table, .table-scroll tbody,
  .table-scroll tr, .table-scroll th, .table-scroll td { display: block; width: auto; }
  .table-scroll tr { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
  .table-scroll tr:last-child { border-bottom: 0; }
  .table-scroll th {
    padding: 0 0 3px; border: 0; text-align: left;
    font-family: var(--sans); font-size: .74rem; letter-spacing: .1em;
    color: var(--ink-3); font-weight: 700;
  }
  .table-scroll th br { display: none; }
  .table-scroll td { padding: 0; border: 0; font-size: .93rem; }

  ul.features li { padding: 8px 2px 8px 22px; font-size: .93rem; }
  ol.steps li { padding-bottom: 16px; }
  .contact-box { padding: 16px 18px; }
}

/* ちいさい端末（iPhone SE など） */
@media (max-width: 380px) {
  .brand { font-size: .84rem; }
  .wrap { padding: 0 16px; }
  .site-nav { padding-left: 18px; padding-right: 18px; }
}

/* JavaScript が使えない環境では ☰ が働きません。
   そのときは、引き出しをやめて元の横並びに戻します。 */
@media (max-width: 760px) and (scripting: none) {
  .nav-toggle { display: none; }
  .site-nav {
    position: static; display: flex; transform: none; box-shadow: none;
    border-bottom: 0; padding: 0; background: none;
    gap: 14px; font-size: .76rem; letter-spacing: .04em; white-space: nowrap;
    overflow-x: auto; scrollbar-width: none;
  }
  .site-nav a { display: inline; padding: 9px 0; border-bottom: 0; opacity: 1; transform: none; }
}

/* =========================================================
   読み進みの目安（全ページ・上端の細い線）
   長いページでも「あとどれくらいか」が分かると、体感が変わる。
   ========================================================= */
.readbar {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--c2), var(--c3), var(--c4));
  z-index: 60; pointer-events: none;
}

/* =========================================================
   畳んで開く（プライバシーポリシーなど、条項の多いページ）
   中身はページの中に全部あります。閉じているだけです。
   ========================================================= */
.acc {
  border-bottom: 1px solid var(--line-2);
}
.acc > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 0; margin: 0;
  font-family: var(--serif); font-weight: 500;
  font-size: 1.02rem; letter-spacing: .09em; color: var(--ink);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after {
  content: ''; margin-left: auto; flex: none;
  width: 9px; height: 9px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .28s var(--ease);
}
.acc[open] > summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.acc > summary:hover { color: var(--c2); }
.acc .acc-body { padding: 0 0 22px; animation: accIn .34s var(--ease) both; }
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ひと息で言い切る一行。紺地の上でも紙の上でも読めるように、
   色は当てず、大きさと重さだけで立たせます。 */
.punch {
  margin: 1.0em 0 0;
  font-family: var(--serif, inherit);
  font-size: clamp(1.35rem, 3.4vw, 2.05rem);
  font-weight: 700; line-height: 1.55; letter-spacing: .04em;
  color: #fff;
}
.stage .punch { text-shadow: 0 0 26px rgba(111,220,240,.28); }
@media (max-width: 760px) { .punch { font-size: 1.32rem; letter-spacing: .02em; } }

/* =========================================================
   クッキーの一行
   板も、枠も、影も置きません。字とボタンだけを紙面の上に浮かせます。
   後ろが暗いか明るいかは app.js が見て .on-dark を付け外しします。
   箱は pointer-events:none。押せるのはボタンと「くわしく」だけです。
   こうしておくと、後ろの紙面をそのまま触れますし、
   箱のまん中を突いたときに後ろにあるものが分かります。
   ========================================================= */
.cc {
  position: fixed; left: 18px; bottom: 18px; z-index: 70;
  max-width: calc(100vw - 36px);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  pointer-events: none;
  /* 枠も影も置きません。地だけを薄く敷いて、後ろを透かします。
     まったくの透明も試しましたが、後ろの字と重なって読めませんでした。
     板に見せない程度に、けれど字が混ざらない程度に、という濃さです。 */
  padding: 7px 15px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 64%, transparent);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  opacity: 0; transform: translateY(8px);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.cc.on-dark { background: rgba(9, 19, 31, .48); }
.cc.on { opacity: 1; transform: none; }
.cc-tx {
  margin: 0; white-space: nowrap;
  font-family: var(--sans); font-size: .74rem; letter-spacing: .02em;
  color: var(--ink-2);
  text-shadow: 0 1px 6px color-mix(in srgb, var(--bg) 70%, transparent);
}
.cc-tx a {
  pointer-events: auto; margin-left: 8px;
  color: var(--c2); border-bottom: 1px solid color-mix(in srgb, var(--c2) 50%, transparent);
}
.cc-bt { display: flex; gap: 7px; }
.cc-bt button {
  pointer-events: auto;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .03em;
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
  min-height: 34px; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.cc-bt .cc-no {
  border: 1px solid color-mix(in srgb, var(--ink-2) 34%, transparent);
  background: transparent; color: var(--ink-2);
}
.cc-bt .cc-no:hover { border-color: var(--ink-2); color: var(--ink); }
.cc-bt .cc-ok { border: 1px solid var(--c1); background: var(--c1); color: #fff; }
.cc-bt .cc-ok:hover { background: var(--c2); border-color: var(--c2); }

/* 後ろが暗いとき。水面・紺地・脚の上では、字を白に返します。 */
.cc.on-dark .cc-tx { color: rgba(255,255,255,.94); text-shadow: 0 1px 8px rgba(6,16,26,.6); }
.cc.on-dark .cc-tx a { color: var(--glow); border-bottom-color: rgba(111,220,240,.5); }
.cc.on-dark .cc-bt .cc-no {
  border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.10); color: rgba(255,255,255,.92);
}
.cc.on-dark .cc-bt .cc-no:hover { border-color: #fff; color: #fff; }
.cc.on-dark .cc-bt .cc-ok { border-color: var(--glow); background: var(--glow); color: #06202a; }
.cc.on-dark .cc-bt .cc-ok:hover { background: #8ee6f6; border-color: #8ee6f6; }

/* プライバシーポリシーの中に置く、選び直しの口 */
.cc-open {
  margin-top: 4px; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
  font-family: var(--sans); font-size: .78rem; color: var(--ink-2); cursor: pointer;
  min-height: 40px;
}
.cc-open:hover { border-color: var(--c2); color: var(--c2); }

@media (max-width: 760px) {
  .cc {
    left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
    gap: 9px; padding: 11px 14px 12px; border-radius: 16px;
  }
  .cc-tx { font-size: .72rem; white-space: normal; flex: 1 1 100%; }
  .cc-bt { flex: 1 1 100%; }
  .cc-bt button { flex: 1; }
}

/* 迷惑メールの収集よけ。
   人には info@umihaworks.jp と読めますが、HTMLを機械で拾うと
   info.no-spam@umihaworks.invalid.jp になります。押せる形（mailto）にもしていません。
   ここを display:none 以外（visibility や透明）にすると、
   選択してコピーしたときに余計な字が付いてきます。 */
.mailmask { font-family: var(--sans); letter-spacing: .02em; }
.mailmask .x { display: none; }

/* 目次のチップ */
.jump {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0 0 26px;
}
.pitch .jump { margin: 30px 0 0; }
.jump a {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .06em;
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2); background: var(--bg);
}
.jump a:hover { border-color: var(--c2); color: var(--c2); }
.jump a { transition: color .25s, border-color .25s, box-shadow .25s, transform .25s var(--ease); }
.stage .jump a {
  color: rgba(238,244,250,.66); background: rgba(255,255,255,.03);
  border-color: rgba(238,244,250,.16);
}
.stage .jump a:hover, .stage .jump a:focus-visible {
  color: var(--glow); border-color: rgba(111,220,240,.55);
  box-shadow: 0 0 18px rgba(111,220,240,.22); transform: translateY(-2px);
}

/* 紺地の上のボタン。輪郭だけ光らせ、触れると内側が満ちます。 */
.stage .btn {
  background: transparent; color: #eef4fa !important;
  border: 1px solid rgba(111,220,240,.55); border-radius: 4px;
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 22px rgba(111,220,240,.14), inset 0 0 22px rgba(111,220,240,.06);
  transition: color .3s, box-shadow .35s var(--ease), transform .3s var(--ease);
}
.stage .btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--glow);
  transform: translateY(101%); transition: transform .4s var(--ease);
}
.stage .btn:hover, .stage .btn:focus-visible {
  color: var(--stage) !important; transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(111,220,240,.3);
}
.stage .btn:hover::before, .stage .btn:focus-visible::before { transform: none; }

/* =========================================================
   団体でのご利用 ─ 舞台（深い紺地）
   ---------------------------------------------------------
   この事業は「大会を、正確に、軽く」です。にぎやかさではなく、
   測る道具の精度を見せたい。だから地を沈め、線を細く光らせます。
   色は的の5色（金・赤・青・白）だけ。面には塗らず、線と点にだけ使います。
   ========================================================= */
:root {
  --stage:    #0a1421;
  --stage-2:  #0f1e30;
  --glow:     #6fdcf0;   /* 水縹をひとつ明るく。暗い地で沈まない濃さ */
  --t-gold:   #f4c440;
  --t-red:    #e4523c;
  --t-blue:   #57b8d8;
  --t-white:  #f2efe6;
}

.stage {
  position: relative; isolation: isolate;
  background:
    radial-gradient(120% 90% at 78% 8%, #16304c 0%, transparent 62%),
    linear-gradient(170deg, var(--stage-2) 0%, var(--stage) 68%);
  /* ↑の一括指定より必ず後ろに置くこと。前に書くと打ち消される。
     グラデーションが1つでも読めない環境で、白地に白い字が残るのを防ぐ保険。 */
  background-color: var(--stage);
  color: #eef4fa;
  padding: 108px 0 10px;
  overflow: clip;
}
/* うっすらと方眼。測る紙の上にいる感じを出します。 */
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(120% 80% at 60% 20%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 80% at 60% 20%, #000 0%, transparent 78%);
}
.stage > * { position: relative; z-index: 2; }
.stage .wrap { position: relative; z-index: 2; }

/* ── 的。塗らず、線だけ。読み込みで外から順に一周描かれます ── */
.stage-art {
  position: absolute; z-index: 1; pointer-events: none;
  right: -190px; top: 50%; transform: translateY(-50%);
  width: min(760px, 62vw); aspect-ratio: 1 / 1; height: auto;
}
.stage-art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rg {
  fill: none; stroke-width: .9;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: ringDraw 2.4s var(--ease) forwards;
}
.rg5 { stroke: rgba(238,244,250,.20); animation-delay: .10s; }
.rg4 { stroke: rgba(87,184,216,.42);  animation-delay: .26s; }
.rg3 { stroke: rgba(242,239,230,.30); animation-delay: .42s; }
.rg2 { stroke: rgba(228,82,60,.55);   animation-delay: .58s; }
.rg1 { stroke: rgba(244,196,64,.78);  animation-delay: .74s; }
.rg0 { stroke: rgba(244,196,64,.95); stroke-width: 1.4; animation-delay: .92s; }
@keyframes ringDraw { to { stroke-dashoffset: 0; } }

.cross line {
  stroke: rgba(111,220,240,.20); stroke-width: .8;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: ringDraw 1.8s var(--ease) 1.1s forwards;
}
/* 輪はごくゆっくり回ります。止まっていると図版に見えるので。 */
.rings { transform-origin: 300px 300px; animation: ringSpin 220s linear infinite; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
/* 中心だけ、ゆっくり息をします。止まった図版に見せないための最小限。 */
.rg0 { animation: ringDraw 2.4s var(--ease) .92s forwards, corePulse 4.6s ease-in-out 3.4s infinite; }
@keyframes corePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* 光の線が一度だけ横切ります */
.scanline {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--glow), transparent);
  opacity: 0; animation: scan 3.2s var(--ease) .3s 1;
}
@keyframes scan {
  0%   { transform: translateY(90px); opacity: 0; }
  18%  { opacity: .55; }
  100% { transform: translateY(560px); opacity: 0; }
}

/* ── 紺地の上の文字 ── */
.stage .crumb { color: rgba(238,244,250,.42); }
.stage .crumb a { color: rgba(238,244,250,.68); }
.stage .pitch-eye { color: var(--glow); letter-spacing: .24em; }
.stage .pitch .lead { color: rgba(238,244,250,.80); }
.stage .hl { border-bottom-color: rgba(238,244,250,.45); }
.stage .pitch-note { color: rgba(238,244,250,.46); }
.stage .why { border-left-color: var(--glow); }
.stage .why p { color: rgba(238,244,250,.74); }
.stage .why .why-last { color: #fff; }
.stage .why .hl { border-bottom-color: var(--glow); color: #fff; }
.stage .why strong { color: #fff; }
.on-stage { padding-bottom: 96px; }

/* =========================================================
   団体でのご利用 ─ 主張の置きかた
   このページは機能の一覧ではなく、「大会の設営が重い」という
   困りごとから始める。だから頭は見出しではなく、主張を置く。
   ========================================================= */
.pitch { padding: 26px 0 10px; max-width: 40em; }
.pitch-eye {
  font-family: var(--sans); font-size: .76rem; letter-spacing: .18em;
  color: var(--ink-3); margin: 0 0 20px;
}
.pitch h1 {
  margin: 0 0 26px; font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 600; letter-spacing: .06em; line-height: 1.5;
}
.stage .pitch h1 { color: #fff; text-shadow: 0 2px 34px rgba(4, 16, 28, .5); }
/* 言いたいのは「手軽」の一語。ここだけ光らせて、下に細い線を一度引きます。 */
.stage .pitch h1 em {
  font-style: normal; position: relative; white-space: nowrap;
  color: var(--glow); text-shadow: 0 0 26px rgba(111, 220, 240, .45);
}
.stage .pitch h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.14em; height: 2px;
  background: linear-gradient(90deg, transparent, var(--glow) 18%, var(--glow) 82%, transparent);
  box-shadow: 0 0 12px rgba(111, 220, 240, .6);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.2s var(--ease) .9s;
}
.pitch.in h1 em::after { transform: scaleX(1); }
.pitch .lead { margin: 0; font-size: 1.02rem; line-height: 2.15; color: var(--ink-2); }
.pitch-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; margin-top: 34px; }
.pitch-note { font-family: var(--sans); font-size: .8rem; color: var(--ink-3); letter-spacing: .04em; }

/* 作った理由。地の文より少しだけ内側に置いて、声の高さを変える */
.why {
  max-width: 34em; padding: 30px 0 30px 26px;
  border-left: 2px solid var(--c4);
  font-size: 1rem; line-height: 2.15;
}
.why p { margin: 0 0 1.15em; color: var(--ink-2); }
.why .why-last { margin-bottom: 0; color: var(--ink); }
.why strong { font-weight: 600; }

/* 当日の一日 ─ いままで／アチェリ */
.ba { border-top: 1px solid var(--ink); }
.ba-head {
  display: grid; grid-template-columns: 7em 1fr 1fr; gap: 0 26px;
  padding: 12px 0 10px; border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; color: var(--ink-3);
}
.ba-head span:first-child { grid-column: 2; }
.ba-row {
  display: grid; grid-template-columns: 7em 1fr 1fr; gap: 0 26px;
  padding: 20px 0; border-bottom: 1px solid var(--line-2); align-items: start;
}
.ba-when {
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; color: var(--ink-3); padding-top: .15em;
}
.ba-old, .ba-new { font-size: .93rem; line-height: 1.95; }
.ba-lab { display: none; }
.ba-old { color: var(--ink-3); }
/* 右の列にうすい地を敷く。目が縦に降りるので、
   どちらの話を読んでいるかを見失わない。 */
.ba-head span:last-child, .ba-new {
  background: linear-gradient(var(--bg-2), var(--bg-2));
  margin: -20px -20px -20px -10px; padding: 20px 20px 20px 26px;
}
.ba-head span:last-child { margin: -12px -20px -10px -10px; padding: 12px 20px 10px 26px; }
.ba-new { color: var(--ink); position: relative; }
.ba-new::before {
  content: ""; position: absolute; left: 10px; top: .95em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c3) 14%, transparent);
}

/* 数字 ─ 「減る」ではなく「無くなる」を見せたいので、
   左右を同じ大きさで並べない。0 だけを大きく置く。 */
.stat { margin-top: 40px; padding: 34px 36px; background: var(--bg-2); border-radius: 12px; }
/* ── 数字の板は沈めます。0 を光らせたいので、地が明るいと効きません ── */
.stat.dark {
  background: linear-gradient(165deg, var(--stage-2), var(--stage));
  background-color: var(--stage);
  color: #eef4fa; position: relative; overflow: hidden;
  border: 1px solid rgba(238,244,250,.08);
}
.stat.dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(80% 120% at 78% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 120% at 78% 50%, #000, transparent 75%);
}
.stat.dark > * { position: relative; }
.stat.dark .stat-lead { color: rgba(238,244,250,.72); }
.stat.dark .stat-cap { color: rgba(238,244,250,.42); }
.stat.dark .stat-line b { color: rgba(238,244,250,.44); }
.stat.dark .stat-line span { color: rgba(238,244,250,.42); }
.stat.dark .stat-arw { background: rgba(238,244,250,.22); }
.stat.dark .stat-arw::after { border-color: rgba(238,244,250,.4); }
.stat.dark .stat-foot { color: rgba(238,244,250,.72); }
.stat.dark .stat-foot .hl { color: #fff; border-bottom-color: var(--glow); }
.stat.dark .stat-zero-lab { color: var(--glow); letter-spacing: .16em; }
.stat-lead { font-size: .95rem; line-height: 1.95; color: var(--ink-2); margin-bottom: 26px; max-width: 34em; }
.stat-body { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 30px; align-items: center; }
.stat-cap {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .14em;
  color: var(--ink-3); margin-bottom: 14px;
}
.stat-line { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; }
.stat-line b {
  font-family: var(--sans); font-weight: 300; font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  line-height: 1.15; color: var(--ink-3); font-variant-numeric: tabular-nums;
  min-width: 3.4em; text-align: right;
}
.stat-line span { font-family: var(--sans); font-size: .8rem; letter-spacing: .05em; color: var(--ink-3); }
.stat-arw { width: 40px; height: 1px; background: var(--line); position: relative; }
.stat-arw::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px; border-top: 1px solid var(--ink-3); border-right: 1px solid var(--ink-3);
  transform: rotate(45deg);
}
.stat-after { text-align: left; }
.stat-zero {
  font-family: var(--sans); font-weight: 200;
  font-size: clamp(4.4rem, 12vw, 7.4rem); line-height: .9;
  color: var(--c3); letter-spacing: -.02em;
  position: relative; display: inline-block;
}
.stat.dark .stat-zero {
  color: #fff;
  text-shadow: 0 0 12px rgba(111,220,240,.55), 0 0 46px rgba(111,220,240,.35);
}
/* 0 が置かれた瞬間、輪がひとつだけ外へ広がります */
.stat.dark .stat-zero::after {
  content: ""; position: absolute; left: 50%; top: 52%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 1px solid var(--glow); opacity: 0; pointer-events: none;
}
.stat.dark.in .stat-zero::after { animation: zeroring 2s var(--ease) .7s 1; }
@keyframes zeroring {
  0%   { transform: scale(1);  opacity: .8; }
  100% { transform: scale(13); opacity: 0; }
}
.stat.dark.in .stat-zero { animation: zeropop .9s var(--ease) .5s both; }
@keyframes zeropop {
  from { opacity: 0; transform: translateY(12px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
.stat-zero-lab {
  font-family: var(--sans); font-size: .82rem; letter-spacing: .1em;
  color: var(--ink-2); margin-top: 6px;
}
.stat-foot { margin: 28px 0 0; font-size: .92rem; line-height: 2; color: var(--ink-2); }

/* だれが何を持つか */
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.role {
  border: 1px solid var(--line); border-radius: 11px; padding: 26px 26px 22px;
  display: flex; flex-direction: column; background: var(--bg);
}
.role { border-top: 2px solid var(--tone, var(--line)); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.roles > .role:nth-child(1) { --tone: var(--t-blue); }
.roles > .role:nth-child(2) { --tone: var(--t-gold); }
.roles > .role:nth-child(3) { --tone: var(--t-red); }
.role:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(10, 26, 42, .08); }
.role-key { border-left: 1px solid var(--line); }
.role-has { color: var(--ink-2); }
.role li::before { background: var(--tone, var(--ink-3)); }
.role-who {
  font-family: var(--sans); font-size: 1.06rem; font-weight: 700;
  letter-spacing: .1em; margin-bottom: 6px;
}
.role-has {
  font-family: var(--sans); font-size: .78rem; letter-spacing: .06em;
  color: var(--c2); padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line-2);
}
.role ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.role li {
  position: relative; padding: 6px 0 6px 17px; font-size: .9rem; line-height: 1.85; color: var(--ink-2);
}
.role li::before {
  content: ""; position: absolute; left: 0; top: .95em;
  width: 6px; height: 1px; background: var(--ink-3);
}
.role-foot {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-2);
  font-size: .84rem; line-height: 1.8; color: var(--ink-3);
}
.role-key .role-foot { color: var(--ink-2); }

/* 作るときに決めたこと */
.pri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.pri > div { border-top: 2px solid var(--tone, var(--ink)); padding-top: 18px; }
.pri > div:nth-child(1) { --tone: var(--t-red); }
.pri > div:nth-child(2) { --tone: var(--t-blue); }
.pri > div:nth-child(3) { --tone: var(--t-gold); }
.pri b { display: block; font-size: 1.02rem; font-weight: 600; letter-spacing: .07em; line-height: 1.7; margin-bottom: 10px; }
.pri p { margin: 0; font-size: .9rem; line-height: 1.95; color: var(--ink-2); }

.pc-br { display: inline; }

/* =========================================================
   団体でのご利用 ─ 機能の並び
   1つの機能を「見出し・説明・細かい点」の3段で見せる。
   左の小さな語（大会／受付／名簿…）は飾りではなく、
   その機能がどの場面のものかを示す見出しとして置いている。
   ========================================================= */
.feat { border-top: 1px solid var(--line); }
.feat:first-of-type { border-top: 1px solid var(--ink); }
.feat > summary {
  display: grid; grid-template-columns: 5.5em 1fr auto; gap: 0 28px;
  align-items: baseline; padding: 26px 0; list-style: none; cursor: default;
}
.feat > summary::-webkit-details-marker { display: none; }
.feat-no {
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .16em; color: var(--ink-3);
  transition: color .3s var(--ease);
}
/* 開いている項目だけ、印が的の色に変わります。閉じている間は静かなまま。 */
.feat-no::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--line); margin-right: 10px; vertical-align: 2px;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.feat[open] .feat-no { color: var(--ink-2); }
.feat[open] .feat-no::before {
  background: var(--tone, var(--t-blue));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone, var(--t-blue)) 16%, transparent);
}
.feat:nth-of-type(3n+1) { --tone: var(--t-blue); }
.feat:nth-of-type(3n+2) { --tone: var(--t-gold); }
.feat:nth-of-type(3n+3) { --tone: var(--t-red); }
ul.mini { border-left-color: color-mix(in srgb, var(--tone, var(--line)) 45%, var(--line)); }
.feat > summary b {
  font-size: 1.16rem; font-weight: 600; letter-spacing: .08em; line-height: 1.7;
}
.feat-arw { display: none; }
.feat-b { grid-column: 2; padding: 0 0 30px; }
@media (min-width: 761px) {
  .feat > summary { pointer-events: none; }   /* 広い画面では常に開いているので、押せなくてよい */
  .feat-b { margin-left: calc(5.5em + 28px); }
}
.feat-b p { margin: 0 0 1em; }
.feat-b p:last-child { margin-bottom: 0; }
ul.mini {
  list-style: none; margin: 16px 0 0; padding: 0;
  border-left: 1px solid var(--line); padding-left: 18px;
}
ul.mini li {
  position: relative; padding: 5px 0; font-size: .88rem; line-height: 1.9; color: var(--ink-2);
}

@media (max-width: 760px) {
  .pc-br { display: none; }
  .stage { padding-top: 84px; }
  /* 携帯では、的は右上に小さく。文字の上に来ると読めません。 */
  .stage-art { right: -46%; top: 24%; transform: none; width: 108vw; opacity: .8; }
  .on-stage { padding-bottom: 56px; }
  .pitch { padding: 18px 0 4px; }
  .pitch h1 { letter-spacing: .06em; line-height: 1.6; margin-bottom: 20px; }
  .pitch .lead { font-size: .95rem; line-height: 2.05; }
  .pitch-cta { margin-top: 26px; gap: 12px; }
  .pitch-cta .btn { width: 100%; text-align: center; }
  .why { padding: 22px 0 22px 18px; font-size: .95rem; line-height: 2.05; }

  /* 3列のままだと、1列が100pxを切って1文字ずつ折り返す。
     上下に積んで、指は縦にだけ動かせばよいようにする。 */
  .ba-head { display: none; }
  .ba.swipe {
    display: block; overflow: visible; scroll-snap-type: none;
    margin: 0; padding: 0; border-top: 1px solid var(--ink);
  }
  .ba.swipe > * { flex: none; }
  .ba-row {
    grid-template-columns: 1fr; gap: 9px; padding: 18px 2px;
    border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: none;
    align-content: start;
  }
  .ba-when {
    padding: 0 0 4px; font-size: .74rem;
    border-bottom: 1px solid var(--line-2); margin-bottom: 4px;
  }
  .ba-old, .ba-new { font-size: .88rem; line-height: 1.9; }
  .ba-new { margin: 0; padding: 0; background: none; }
  .ba-new::before { display: none; }
  .ba-lab {
    display: block; font-family: var(--sans); font-size: .74rem;
    letter-spacing: .1em; margin-bottom: 4px;
  }
  .ba-old .ba-lab { color: var(--ink-3); }
  .ba-new .ba-lab { color: var(--c3); font-weight: 700; }

  .stat { margin-top: 30px; padding: 26px 22px; }
  .stat-lead { margin-bottom: 20px; font-size: .92rem; }
  /* 横3つのままだと矢印の左右が細くなりすぎる。上下に置く。 */
  .stat-body { grid-template-columns: 1fr; gap: 14px; }
  .stat-line b { min-width: 3.1em; }
  .stat-arw { width: 1px; height: 26px; margin-left: 2.2em; }
  .stat-arw::after { right: -3px; top: auto; bottom: 0; transform: rotate(135deg); }
  .stat-zero { font-size: 4.6rem; }
  .stat-foot { font-size: .89rem; margin-top: 22px; }

  /* 3つ並べると1枚が100pxほどになる。横に送る。 */
  .roles { gap: 14px; }
  .role { padding: 22px 20px 18px; }
  .role li { font-size: .88rem; }

  .pri { grid-template-columns: 1fr; gap: 22px; }
  .pri > div { padding-top: 14px; }
}

/* 携帯では、見出しだけを並べる。
   ※ この指定は .feat の本体より必ず後ろに置くこと。
     前に置くと、あとから来る本体の指定に負けて効かない。 */
@media (max-width: 760px) {
  /* 5.5em の柱を残すと、説明が半分の幅に潰れる。見出しの上に載せる。
     機能が7つあり、全部開いたままだと8画面ぶんになる。見出しだけ並べ、
     読みたいものを開いてもらう形にする（見出しだけでも、何ができるかは伝わる）。 */
  .feat > summary {
    grid-template-columns: 1fr auto; gap: 4px 14px; padding: 18px 2px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .feat-no { grid-column: 1; font-size: .7rem; }
  .feat > summary b { grid-column: 1; font-size: 1.04rem; }
  .feat-arw {
    display: block; grid-column: 2; grid-row: 1 / span 2; align-self: center;
    width: 11px; height: 11px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
    transform: rotate(45deg); transition: transform .3s var(--ease);
  }
  .feat[open] .feat-arw { transform: rotate(-135deg); }
  .feat-b { grid-column: 1; padding: 2px 2px 22px; }
  ul.mini { padding-left: 15px; }
  ul.mini li { font-size: .85rem; }
}

/* たたんでおける塊（手順など） */
.fold > summary { list-style: none; cursor: default; }
.fold > summary::-webkit-details-marker { display: none; }
@media (min-width: 761px) { .fold > summary { display: none; } }
@media (max-width: 760px) {
  .fold > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 16px 2px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
    font-family: var(--sans); font-size: .93rem; letter-spacing: .06em; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .fold[open] > summary { border-bottom: 0; }
  .fold > summary .feat-arw { display: block; }
  .fold[open] > summary .feat-arw { transform: rotate(-135deg); }
  .fold ol.steps { padding-top: 18px; }
}

/* まだ書ききれていないことがある、と示す箱 */
.more-box {
  margin-top: 34px; padding: 26px 28px;
  background: var(--bg-2); border-radius: 10px;
  font-size: .95rem; line-height: 2;
}
.more-box strong { font-weight: 600; }

/* 見積りの前に伺うこと */
.qs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 26px; background: var(--line); border: 1px solid var(--line); }
.qs > div { background: var(--bg); padding: 20px 22px; }
.qs b { display: block; font-size: .96rem; font-weight: 600; letter-spacing: .06em; margin-bottom: 6px; }
.qs span { font-size: .86rem; line-height: 1.9; color: var(--ink-3); }

/* =========================================================
   横に流して見る（画面の並びなど）
   縦に4枚積むと、それだけで4画面ぶんになる。横に流せば1画面。
   ========================================================= */
/* 広い画面では案内を出さない。@media より前に置かないと、
   後ろにある display:none が携帯側の display:block を打ち消す。 */
.swipe-hint { display: none; }
@media (max-width: 760px) {
  .swipe {
    display: flex; gap: 14px;
    overflow-x: auto;
    /* mandatory だと、指を縦に動かしたときにも横の吸着が働いて、
       ページが下に流れてくれないことがある。proximity にすると、
       はっきり横へ動かしたときだけ吸着する。 */
    scroll-snap-type: x proximity;
    /* overflow-x を auto にすると、overflow-y は自動的に auto になる。
       中身が数十px はみ出していると、この箱が「縦にも少しだけ
       スクロールできる箱」になり、指を縦に動かしたぶんが
       そこで吸われて、ページが下りない。明示的に塞ぐ。 */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px; padding: 0 20px 26px;
    scrollbar-width: none;
  }
  /* ↑の下の余白は 26px。ここを削ると、説明が3行になった札の
     いちばん下が overflow-y:hidden で切れます（実測で確かめた値）。
     中の文章を長くしたときは、切れていないか一度見てください。 */
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { flex: 0 0 68%; scroll-snap-align: center; }
  .ba.swipe > * { flex: 0 0 78%; }
  .roles.swipe > * { flex: 0 0 80%; }
  .swipe-hint {
    display: block; margin-top: 10px;
    font-family: var(--sans); font-size: .74rem; letter-spacing: .1em; color: var(--ink-3);
  }
  .swipe-hint::after { content: ' →'; animation: nudge 1.8s ease-in-out infinite; display: inline-block; }
  @keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
}
/* 狭い端末では .wrap の余白が 16px。逃がし幅を 20px のままにすると
   4px だけ横にはみ出す。.swipe 本体より後ろに置かないと打ち消せない。 */
@media (max-width: 380px) {
  .swipe { margin: 0 -16px; padding: 0 16px 6px; }
}

/* =========================================================
   固定水面の上を紙面が滑る構造
   ========================================================= */
.hero-water { position: fixed; top: 0; left: 0; width: 100%; z-index: 0; }
.hero-spacer { height: 100svh; }
.sheet {
  position: relative; z-index: 2;
  background: var(--bg);
  border-radius: 30px 30px 0 0;
  margin-top: -30px;
  box-shadow: 0 -26px 70px rgba(6, 22, 32, .38);
}
.site-header.clear { z-index: 3; }

/* ---------- マルキー（流れる帯） ---------- */
.marquee {
  overflow: hidden; border-bottom: 1px solid var(--line-2);
  padding: 26px 0 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; white-space: nowrap; width: max-content;
  animation: mq 30s linear infinite;
  font-size: 1.05rem; letter-spacing: .34em; color: var(--ink-3);
}
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- 的 ----------
   アプリの着弾点の画面と同じ見た目にしています。帯は10本、境界の線も引きます。
   touch-action:none は、指で置くときに画面が動いてしまうのを止めるためです
   （manipulation のままだと、少し動かした時点で縦スクロールに取られます）。 */
.target-fig { margin: 0 0 30px; }
.target-wrap { position: relative; width: min(268px, 74%); margin: 0 auto 16px; }
.target-face {
  display: block; width: 100%;
  filter: drop-shadow(0 10px 24px rgba(20,30,40,.18));
  touch-action: none; cursor: crosshair; -webkit-tap-highlight-color: transparent;
}
.target-face g { transition: opacity .5s; }
.hit-pt { fill: #1c222b; stroke: #f6f4ec; stroke-width: .9; }
.hit-ring {
  fill: none; stroke: #f6f4ec; stroke-width: 1.4; opacity: .9;
  animation: hitring .7s var(--ease) forwards;
}
@keyframes hitring { to { r: 14; opacity: 0; } }

/* 指の少し上に出す拡大鏡。指の下は見えないので、真上でも下でもなく、少し上へ。 */
.loupe {
  position: absolute; left: 0; top: 0; width: 104px; height: 104px;
  border-radius: 50%; overflow: hidden; pointer-events: none;
  border: 3px solid #fff; background: var(--bg);
  box-shadow: 0 10px 26px rgba(16,26,36,.34);
  opacity: 0; transform: translate(-9999px, -9999px) scale(.85);
  transition: opacity .14s var(--ease), scale .14s var(--ease);
}
.loupe.on { opacity: 1; }
.loupe svg { display: block; width: 100%; height: 100%; }
.loupe-cross {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 26px;
  margin: -13px 0 0 -13px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 1.5px rgba(20,26,34,.55) inset;
}
.loupe-cross::before, .loupe-cross::after {
  content: ""; position: absolute; background: rgba(255,255,255,.95);
  box-shadow: 0 0 2px rgba(20,26,34,.7);
}
.loupe-cross::before { left: 50%; top: -9px; width: 1.5px; height: 40px; margin-left: -.75px; }
.loupe-cross::after  { top: 50%; left: -9px; height: 1.5px; width: 40px; margin-top: -.75px; }
.loupe-score {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  min-width: 26px; padding: 1px 7px; border-radius: 999px;
  font-family: var(--sans); font-size: .76rem; font-weight: 700; text-align: center;
  background: #1c222b; color: #fff;
}

/* 下に出る点数。アプリの点数の丸と同じ色分けです。 */
.target-score {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 0 0 14px;
}
.ts-arrows { display: flex; gap: 7px; min-height: 30px; align-items: center; flex-wrap: wrap; justify-content: center; }
.ts-empty { font-family: var(--sans); font-size: .78rem; color: var(--ink-3, #8a94a2); }
.ts-pip {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: .82rem; font-weight: 700;
  animation: pipIn .3s var(--ease) both;
}
@keyframes pipIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.t-gold  { background: #f4c440; color: #4a3a06; }
.t-red   { background: #e4523c; color: #fff; }
.t-blue  { background: #57b8d8; color: #10323d; }
.t-black { background: #2c2f38; color: #fff; }
.t-white { background: #f6f4ec; color: #2c2f38; box-shadow: 0 0 0 1px var(--line) inset; }
.t-m     { background: #b9bfc7; color: #fff; }
.loupe-score.t-white { background: #f6f4ec; color: #2c2f38; }
.loupe-score.t-gold  { background: #f4c440; color: #4a3a06; }
.loupe-score.t-blue  { background: #57b8d8; color: #10323d; }
.loupe-score.t-red   { background: #e4523c; color: #fff; }
.loupe-score.t-black { background: #2c2f38; color: #fff; }
.loupe-score.t-m     { background: #b9bfc7; color: #fff; }

.ts-sum { display: flex; align-items: baseline; gap: 9px; font-family: var(--sans); }
.ts-lab { font-size: .74rem; color: var(--ink-2); letter-spacing: .1em; }
.ts-sum b { font-size: 1.45rem; font-weight: 700; color: var(--ink); }
.ts-n { font-size: .76rem; color: var(--ink-2); }
.ts-undo {
  margin-left: 6px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
  font-family: var(--sans); font-size: .72rem; color: var(--ink-2); cursor: pointer;
}
.ts-undo:disabled { opacity: .38; cursor: default; }
.ts-undo:not(:disabled):hover { border-color: var(--c2); color: var(--c2); }

.target-fig figcaption { text-align: center; }
.target-fig b { color: var(--ink); font-size: 1rem; }
@media (max-width: 760px) {
  .target-wrap { width: min(300px, 86%); }
  .loupe { width: 116px; height: 116px; }
}

/* ---------- カスタムカーソル ---------- */
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
.cur-dot, .cur-ring {
  position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999;
  mix-blend-mode: difference;
}
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; }
.cur-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.9);
  transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease);
}
html.cur-hover .cur-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; }

@media (max-width: 760px) {
  .sheet { border-radius: 22px 22px 0 0; margin-top: -22px; }
  .marquee-track { font-size: .9rem; }
}