/* 見本ページ：ドットの挿絵・新しいヘッダー・FVの3案・申し込みの導線 */
:root{--green:#1d4a32;}

/* ---------- ヘッダー：黒い帯をやめ、ロゴだけ黒い札にする ---------- */
.cao-head{position:fixed;left:0;right:0;top:0;z-index:50;height:60px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 clamp(16px,4.5vw,72px);background:transparent;transition:background .25s;}
html.head-solid .cao-head{background:rgba(255,255,255,.94);}
.logo-tab{display:block;background:#000;padding:6px 10px;line-height:0;}
.logo-tab img{display:block;width:150px;height:34px;object-fit:cover;}
.head-right{display:flex;align-items:center;gap:18px;font:13px/1 "Hiragino Kaku Gothic ProN",sans-serif;}
.seat{display:flex;align-items:center;gap:8px;letter-spacing:.04em;white-space:nowrap;}
.seat i{display:block;width:8px;height:8px;background:var(--red);}
.seat strong{font-size:15px;}
.head-cta{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;padding:11px 18px;font-weight:700;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .25s,visibility .25s;}
html.show-cta .head-cta{opacity:1;visibility:visible;transform:none;}
.head-cta:focus-visible,.bottom-cta a:focus-visible{outline:2px solid var(--red);outline-offset:3px;}

.bottom-cta{display:none;}
@media (max-width:700px){
  .cao-head{height:54px;}
  .logo-tab{padding:5px 8px;}
  .logo-tab img{width:118px;height:27px;}
  .head-cta{display:none;}
  .seat{font-size:12px;}
  .bottom-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--ink);color:#fff;
    transform:translateY(105%);transition:transform .3s;font:12px/1.4 "Hiragino Kaku Gothic ProN",sans-serif;}
  html.show-cta .bottom-cta{transform:none;}
  .bottom-cta a{background:var(--red);color:#fff;text-decoration:none;font-size:15px;font-weight:700;padding:13px 18px;white-space:nowrap;}
}

/* FV：見出しの文字を主役に。下を部隊が行進して入ってくる。 */
.fv2{position:relative;min-height:100svh;max-height:1080px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  padding:120px clamp(20px,4.5vw,72px) 56px;}
.fv2 .sub{font-size:14px;color:var(--muted);margin:0 0 18px;}
.fv2 h1{margin:0;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:800;line-height:1.2;}
.fv2 .l1{display:block;font-size:clamp(24px,3.6vw,46px);letter-spacing:-.04em;}
.fv2 .big{display:block;font-size:min(20vw,30svh,250px);letter-spacing:-.07em;line-height:1.08;white-space:nowrap;}
.fv2 .big small{font-size:.3em;letter-spacing:-.02em;}
.fv2 .l3{display:block;font-size:clamp(26px,4.4vw,58px);letter-spacing:-.05em;margin-top:.15em;}
.troop{display:block;width:min(100%,720px);margin:clamp(10px,2svh,22px) 0 clamp(12px,2.4svh,26px);}
.troop svg{display:block;width:100%;height:auto;overflow:visible;}
.troop .walk-a,.troop .walk-b,.troop .stand{opacity:0;}
.troop.marching svg{animation:march 2.6s steps(26) both;}
.troop.marching .walk-a{animation:stepA .32s steps(1) infinite;}
.troop.marching .walk-b{animation:stepB .32s steps(1) infinite;}
.troop.arrived .stand{opacity:1;}
@keyframes march{from{transform:translateX(-105%);}to{transform:none;}}
@keyframes stepA{0%{opacity:1;}50%{opacity:0;}}
@keyframes stepB{0%{opacity:0;}50%{opacity:1;}}

/* ---------- ドットの挿絵 ---------- */
.dots{display:block;width:100%;height:auto;overflow:visible;}
.dots .k{fill:var(--ink);}
.dots .r{fill:var(--red);}
.dots .g{fill:var(--green);}
.dots rect{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.3);
  transition:opacity .25s var(--d,0ms),transform .45s cubic-bezier(.2,.9,.25,1.25) var(--d,0ms);}
.dots.is-in rect{opacity:1;transform:none;}
.dots.wave.is-in{transform-origin:58% 96%;animation:hand-wave 4.6s ease-in-out 1.2s infinite;}

.art{margin:36px 0 12px;font-family:"Hiragino Kaku Gothic ProN",sans-serif;}
.art-cap{font-size:12px;line-height:1.8;color:var(--muted);margin:14px 0 0;}
#artAvatar{width:132px;margin:0 auto 36px;}
#art01{max-width:520px;margin-left:auto;margin-right:auto;}
.fee{display:grid;grid-template-columns:minmax(0,240px) auto;gap:22px;align-items:end;justify-content:center;}
.fee-legend{list-style:none;margin:0;padding:0;font-size:13px;line-height:2;}
.fee-legend li{display:flex;align-items:center;gap:10px;padding-left:0;margin:0;font-size:13px;}
.fee-legend li::before{display:none;}
.fee-legend i{display:block;width:12px;height:12px;background:var(--ink);}
.fee-legend li:first-child i{background:var(--red);}
.fee-axis{font-size:12px;color:var(--muted);margin-top:8px;}

.ledger{max-width:680px;margin:48px auto;padding:0 26px;display:grid;gap:26px;font-family:"Hiragino Kaku Gothic ProN",sans-serif;}
.ledger-row{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;}
.ledger-row .ic{width:44px;padding-top:4px;}
.ledger-row strong{display:block;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(18px,2.6vw,22px);line-height:1.5;}
.ledger-row small{display:block;font-size:13px;line-height:1.8;color:var(--muted);margin-top:2px;}

.art-row{display:grid;gap:18px 14px;align-items:end;}
.art-item{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-size:12px;line-height:1.6;white-space:pre-line;}
.art-item .dots{width:100%;}
#art03{grid-template-columns:repeat(6,1fr);}
#art05{grid-template-columns:repeat(5,1fr);align-items:start;}
#art05 .art-item{min-height:0;}
#art06{grid-template-columns:repeat(2,120px);justify-content:center;gap:40px;}
#art06 .art-item:last-child span{color:var(--red);font-weight:700;}
#art07{width:120px;margin:8px auto 0;}

#artPlan{max-width:680px;margin:0 auto 34px;}
#artPlan .months{display:grid;grid-template-columns:repeat(6,1fr);gap:0;}
#artPlan .month{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 4px 4px;}
#artPlan .month b{font-size:13px;font-family:"Hiragino Kaku Gothic ProN",sans-serif;}
#artPlan .mark{display:block;width:34px;}
#artPlan .legend{list-style:none;margin:22px 0 0;padding:0 4px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px;font-family:"Hiragino Kaku Gothic ProN",sans-serif;}
#artPlan .legend li{display:flex;align-items:center;gap:8px;}
#artPlan .legend .dots{width:22px;}

@media (max-width:700px){
  #art03{gap:8px;}
  #art05{grid-template-columns:1fr;gap:14px;}
  #art05 .art-item{flex-direction:row;gap:16px;text-align:left;font-size:13.5px;}
  #art05 .art-item .dots{flex:0 0 auto;}
  #artPlan .month{padding:0;}
  #artPlan .month b{font-size:11px;}
  #artPlan .mark{width:26px;}
  .fee{grid-template-columns:1fr;justify-items:center;}
  /* スマホは画面の高さに合わせず、中身の高さで組む（上下が空きすぎるため）。 */
  .fv2{padding-top:110px;}
}

@media (prefers-reduced-motion:reduce){
  .dots rect{opacity:1;transform:none;transition:none;}
  .dots.wave.is-in{animation:none;}
  .troop .stand{opacity:1;}
}