/* Bolarun のサイト共通スタイル。
   アプリのアイコン（ラシャ色 + ゴールドの下線 + 太い数字）に合わせている。
   トップページ（LP）と、規約・ポリシーなどの文書ページの両方をここで賄う。 */
:root{
  --felt:#17804f; --felt-d:#0c5334; --felt-lt:#2fa96c; --gold:#c9a94e;
  --ink:#101614; --muted:#5f7069; --bg:#ffffff; --surface:#f4f8f5; --line:#e4ece7;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#eef3f0; --muted:#93a59c; --bg:#0c110f; --surface:#141b18; --line:#212d28; }
}
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.9; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
a{ color:var(--felt) }
.wrap{ max-width:1120px; margin:0 auto; padding:0 24px }

/* ---- ヘッダー ----
   トップページではヒーロー写真の上に透明で重なり、スクロールで白く固まる。
   文書ページでは `solid` を最初から付けておく。 */
header.site{ position:fixed; inset:0 0 auto; z-index:30;
  border-bottom:1px solid transparent; transition:background .3s,border-color .3s }
header.site.solid{ background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(180%) blur(14px); border-bottom-color:var(--line) }
header.site .wrap{ display:flex; align-items:center; height:66px; gap:18px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff;
  font-weight:800; letter-spacing:.03em; transition:color .3s }
header.site.solid .brand{ color:var(--ink) }
.brand img{ width:29px; height:29px; border-radius:9px }
nav.site{ margin-left:auto; display:flex; gap:22px; font-size:13.5px }
nav.site a{ color:rgba(255,255,255,.74); text-decoration:none; transition:color .25s }
nav.site a:hover{ color:var(--gold) }
header.site.solid nav.site a{ color:var(--muted) }
header.site.solid nav.site a:hover{ color:var(--felt) }
@media (max-width:820px){ nav.site{ display:none } }

/* ---- ボタン ---- */
.btn{ display:inline-flex; align-items:center; padding:14px 28px; border-radius:12px;
  text-decoration:none; font-weight:700; font-size:14.5px; transition:.24s }
.btn.p{ background:var(--felt); color:#fff; box-shadow:0 12px 32px rgba(23,128,79,.36) }
.btn.p:hover{ background:var(--felt-lt); transform:translateY(-2px) }
.btn.g{ border:1px solid rgba(255,255,255,.3); color:#fff }
.btn.g:hover{ border-color:var(--gold); color:var(--gold) }

/* ---- ヒーロー（実写） ---- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; color:#fff }
.hero .bg{ position:absolute; inset:0; background:url(/img/hall.jpg) center/cover no-repeat;
  transform:scale(1.06); animation:drift 26s ease-in-out infinite alternate }
@keyframes drift{ to{ transform:scale(1.14) translate3d(-1.5%,-1%,0) } }
@media (prefers-reduced-motion: reduce){ .hero .bg{ animation:none } }
.hero .veil{ position:absolute; inset:0;
  background:linear-gradient(102deg,rgba(6,12,9,.95) 0%,rgba(6,12,9,.74) 44%,rgba(6,12,9,.32) 100%),
             linear-gradient(to top,var(--bg) 0%,rgba(6,12,9,0) 26%) }
.hero .wrap{ position:relative; z-index:2; padding-top:86px; padding-bottom:60px }
.hero h1{ font-size:clamp(33px,6vw,60px); line-height:1.26; margin:0 0 24px;
  font-weight:800; overflow-wrap:normal }
.hero h1 em{ font-style:normal; color:var(--gold) }
.hero .lead{ font-size:clamp(15px,1.6vw,17.5px); color:#d6e2dc; max-width:32em; margin:0 0 34px }
.hero .note{ margin:22px 0 0; font-size:12.5px; color:rgba(255,255,255,.72) }
.cta{ display:flex; flex-wrap:wrap; gap:14px }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:11.5px;
  letter-spacing:.22em; color:var(--gold); text-transform:uppercase; margin:0 0 22px }
.eyebrow::before{ content:""; width:32px; height:1px; background:var(--gold) }

/* ---- iPhone のモックアップ ---- */
.phone{ position:relative; width:100%; max-width:292px; margin:0 auto;
  border:9px solid #1b2320; border-radius:44px; background:#1b2320;
  box-shadow:0 34px 74px rgba(0,0,0,.26),0 0 0 1px rgba(255,255,255,.06) inset }
@media (prefers-color-scheme: dark){
  .phone{ border-color:#2b3733; box-shadow:0 34px 74px rgba(0,0,0,.6) } }
.phone img{ width:100%; display:block; border-radius:36px }
.phone::before{ content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:88px; height:22px; background:#1b2320; border-radius:0 0 14px 14px; z-index:2 }

/* ---- Apple Watch のモックアップ ---- */
.watches{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap }
.watches figure{ margin:0 }
.watch{ position:relative; width:168px;
  border:9px solid #22282b; border-radius:46px; background:#000;
  box-shadow:0 22px 48px rgba(0,0,0,.34) }
@media (prefers-color-scheme: dark){ .watch{ border-color:#333b3e } }
.watch img{ width:100%; display:block; border-radius:37px }
/* 右側のデジタルクラウン。 */
.watch::after{ content:""; position:absolute; right:-13px; top:30%;
  width:5px; height:32px; border-radius:3px; background:#3a4245 }
.watches figcaption{ margin-top:12px; font-size:12.5px; color:var(--muted); text-align:center }
@media (max-width:420px){ .watch{ width:142px } }

/* ---- 機能セクション（左右交互） ---- */
.feat{ padding:98px 0; border-bottom:1px solid var(--line) }
.feat:nth-of-type(even){ background:var(--surface) }
.feat .wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:64px; align-items:center }
.feat.rev .wrap>.txt{ order:2 }
@media (max-width:880px){
  .feat .wrap{ grid-template-columns:1fr; gap:44px }
  .feat.rev .wrap>.txt{ order:0 } }
.kicker{ font-size:11.5px; letter-spacing:.22em; color:var(--felt);
  text-transform:uppercase; margin:0 0 12px }
.txt>p{ color:var(--muted); font-size:15px; margin:0 0 20px; max-width:30em }
.bullets{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
/* li 自体が flex なので、本文は span 等で1つにまとめないと
   要素の境目でフレックスアイテムが分かれて折り返しが壊れる。 */
.bullets li{ display:flex; gap:11px; font-size:14px; color:var(--muted) }
.bullets li>span{ flex:1 }
.bullets strong{ color:var(--ink); font-weight:700 }
.bullets li::before{ content:""; flex:0 0 auto; width:18px; height:18px; margin-top:5px;
  background-color:var(--felt);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/15px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/15px no-repeat }

/* ---- ボーラード解説の帯 ---- */
.about{ position:relative; padding:104px 0; color:#fff; overflow:hidden; text-align:center }
.about .bg{ position:absolute; inset:0; background:url(/img/rack.jpg) center 42%/cover no-repeat }
.about .veil{ position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(7,32,21,.9),rgba(7,32,21,.95)) }
.about .wrap{ position:relative; z-index:2 }
.about .kicker{ color:var(--gold) }
.about h2{ margin-bottom:14px }
.about>.wrap>p{ color:#cfe0d8; max-width:34em; margin:0 auto 40px; font-size:15px }
.rules{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  list-style:none; padding:0; margin:0 }
.rules li{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  border-radius:14px; padding:20px 18px }
.rules b{ display:block; font-size:24px; font-weight:800; color:var(--gold);
  margin-bottom:4px; line-height:1.2 }
.rules span{ font-size:13px; color:#c3d5cd; line-height:1.8 }

/* ---- 画面ギャラリー ---- */
.gallery{ padding:96px 0 20px; text-align:center }
.gallery p.sub{ color:var(--muted); max-width:34em; margin:0 auto 52px; font-size:15px }
/* 収まるときは中央、はみ出すときは横スクロール。
   `justify-content:center` だと溢れたときに左端が見切れて戻せなくなるので、
   幅を内容ぴったりにして auto マージンで寄せる。 */
.rail{ display:flex; gap:24px; overflow-x:auto; padding:8px 24px 34px;
  scroll-snap-type:x mandatory;
  width:max-content; max-width:100%; margin-inline:auto }
.rail>div{ flex:0 0 auto; scroll-snap-align:center; width:214px }
.rail .phone{ max-width:214px; border-width:7px; border-radius:34px }
.rail .phone img{ border-radius:28px }
.rail .phone::before{ width:66px; height:17px }
.rail figcaption{ margin-top:14px; font-size:12.5px; color:var(--muted) }

/* ---- 締め ---- */
.close{ text-align:center; padding:96px 0; background:var(--surface);
  border-top:1px solid var(--line) }
.close img.icon{ width:76px; height:76px; border-radius:20px; margin-bottom:22px;
  box-shadow:0 14px 34px rgba(0,0,0,.18) }

/* ---- 見出し ---- */
h1{ font-weight:800 }
h2{ font-size:clamp(23px,3vw,32px); margin:0 0 16px; font-weight:800; line-height:1.44 }
h3{ font-size:16px; margin:24px 0 6px }
p,li{ font-size:15px }

/* ---- 文書ページ（規約・ポリシー・サポート） ---- */
main.doc{ padding:110px 0 76px }
main.doc .wrap{ max-width:760px }
main.doc h1{ font-size:30px; margin:0 0 8px }
main.doc h2{ font-size:21px; margin:40px 0 12px; padding-bottom:8px;
  border-bottom:1px solid var(--line) }
main.doc ul{ padding-left:1.2em }
main.doc table{ width:100%; border-collapse:collapse; margin:14px 0; font-size:14px }
main.doc th,main.doc td{ border:1px solid var(--line); padding:9px 11px;
  text-align:left; vertical-align:top }
main.doc th{ background:var(--surface); font-weight:600 }
.updated{ color:var(--muted); font-size:13px }
.callout{ background:var(--surface); border-left:3px solid var(--felt);
  padding:14px 16px; border-radius:0 8px 8px 0; margin:18px 0 }

/* ---- フッター ---- */
footer.site{ padding:34px 0 56px; color:var(--muted); font-size:13px;
  border-top:1px solid var(--line) }
footer.site .wrap{ display:flex; flex-wrap:wrap; gap:16px; align-items:center }
footer.site a{ color:var(--muted); text-decoration:none }
footer.site a:hover{ color:var(--felt) }
footer.site p{ margin:0 0 0 auto }
@media (max-width:620px){ footer.site p{ margin-left:0; width:100% } }
/* トップページのフッターはギャラリーの直後に来るので、上罫線は要らない。 */
body.lp footer.site{ border-top:0 }