.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- ページ上の進み具合（紙ひこうき） ---- */
#prog{position:fixed;left:0;right:0;top:0;height:4px;z-index:40;pointer-events:none;--p:0}
#prog i{display:block;height:100%;background:var(--sun);transform-origin:left;transform:scaleX(var(--p))}
#prog svg{position:absolute;top:-2px;left:calc(var(--p) * (100% - 34px));width:34px;height:20px;filter:drop-shadow(0 2px 2px rgba(22,50,92,.25));transition:opacity .3s;opacity:var(--o,0)}

/* ---- ヒーローの空 ---- */
.hero .btn{position:relative;overflow:hidden}
.hero .btn::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:30%;background:rgba(255,255,255,.6);transform:skewX(-20deg);animation:shine 3.4s ease-in-out infinite}
@keyframes shine{0%,62%{left:-40%}100%{left:130%}}
.sky{position:relative;border-radius:32px;overflow:hidden;aspect-ratio:520/420;box-shadow:0 18px 40px rgba(16,40,90,.28);cursor:crosshair;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.sky-art,#skycv{position:absolute;inset:0;width:100%;height:100%;display:block}
.cloud{animation:drift 14s ease-in-out infinite alternate}
.cloud.c2{animation-duration:18s;animation-delay:-6s}
.cloud.c3{animation-duration:11s;animation-delay:-3s}
@keyframes drift{to{transform:translateX(46px)}}
.sky-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);margin:0!important;white-space:nowrap;background:rgba(22,50,92,.86);color:#fff;font-size:13px;font-weight:700;padding:4px 16px;border-radius:99px;pointer-events:none;transition:opacity .5s;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.sky-count{position:absolute;right:14px;top:12px;margin:0!important;background:rgba(255,255,255,.9);color:var(--navy);font-size:12.5px;font-weight:800;padding:2px 12px;border-radius:99px;pointer-events:none}
.sky-count b{font-size:16px;color:var(--sky2);font-variant-numeric:tabular-nums;display:inline-block}
.sky-count b.bump{animation:bump .35s ease}

/* ---- 月謝シミュレーター ---- */
.sim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 14px 36px rgba(22,50,92,.12)}
.sim-ctrl{padding:26px 24px}
.sim-title{font-weight:800;font-size:20px;color:var(--navy);margin-bottom:6px}
fieldset{border:0;padding:0;margin:14px 0 0;min-width:0}
legend{font-weight:700;padding:0;margin-bottom:6px;font-size:15px}
.seg{display:grid;gap:6px}
.seg4{grid-template-columns:repeat(4,minmax(0,1fr))}
.seg3{grid-template-columns:repeat(3,minmax(0,1fr))}
.seg label{margin:0;cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0}
.seg span{display:block;text-align:center;padding:10px 2px;border:2px solid var(--line);border-radius:12px;font-size:14.5px;font-weight:700;transition:background .15s,color .15s,transform .15s;white-space:nowrap}
.seg label:hover span{transform:translateY(-2px)}
.seg input:checked+span{background:var(--sky);color:#fff;border-color:var(--sky)}
.seg input:focus-visible+span{outline:3px solid #e8820c;outline-offset:2px}
.stepper{display:flex;align-items:center;gap:8px}
.stepper button{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--sky);background:#fff;color:var(--sky);font:inherit;font-size:22px;font-weight:800;cursor:pointer;line-height:1;transition:transform .1s,background .15s}
.stepper button:active{transform:scale(.9)}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.chips{flex:1;display:flex;justify-content:center;gap:5px;min-width:0}
.chip{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:16px;background:var(--paper);color:#b6bfcc;border:2px dashed var(--line);transition:background .2s,color .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.chip.on{background:var(--c);color:#fff;border:2px solid var(--c);transform:translateY(-3px)}

.sim-out{background:var(--navy);color:#fff;padding:26px 24px;display:flex;flex-direction:column;gap:12px}
.week{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.day{background:rgba(255,255,255,.08);border-radius:12px;padding:6px 3px 4px;text-align:center;transition:background .25s}
.day b{display:block;font-size:13px;opacity:.6}
.day.on{background:rgba(255,255,255,.18)}
.day.on b{opacity:1;color:var(--sun)}
.stack{display:flex;flex-direction:column-reverse;align-items:center;gap:3px;height:68px;justify-content:flex-start;padding-top:4px}
.stack span{width:100%;max-width:40px;height:18px;border-radius:6px;background:var(--c);font-size:11px;font-weight:800;line-height:18px;color:#fff}
.stack span.new{animation:drop .45s cubic-bezier(.3,1.5,.5,1) both}
@keyframes drop{from{transform:translateY(-34px) scale(.6);opacity:0}}
.fee{line-height:1.3}
.fee-label{display:block;font-size:13px;font-weight:700;opacity:.8}
.fee strong{font-size:clamp(40px,5vw,56px);font-weight:800;color:var(--sun);display:inline-block}
.fee strong b{font-variant-numeric:tabular-nums}
.fee strong.bump{animation:bump .4s ease}
@keyframes bump{40%{transform:scale(1.12) rotate(-2deg)}}
.fee-tag{display:inline-block;margin-left:8px;vertical-align:middle;background:var(--sakura);color:#fff;font-size:12.5px;font-weight:800;border-radius:99px;padding:2px 10px;opacity:0;transform:scale(.6);transition:opacity .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.fee-tag.on{opacity:1;transform:none}
.fee-calc{font-size:13.5px;opacity:.85;line-height:1.7;min-height:3.4em}
.sim-out .btn{align-self:flex-start}
.sim-note{font-size:12px;opacity:.7}

/* ---- 時間割 ---- */
.filter{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filter button{font:inherit;font-weight:700;font-size:14.5px;border:2px solid var(--line);background:#fff;color:var(--ink);border-radius:99px;padding:6px 18px;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.filter button:hover{transform:translateY(-2px)}
.filter button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.tt td{transition:opacity .25s,transform .25s,background .25s}
.tt td.dim{opacity:.22}
.tt td.hit{background:#fff3d6;transform:scale(1.04)}

/* ---- 合格までの流れ ---- */
.flow-hint{text-align:center;font-size:14px;color:var(--sub);margin:-22px 0 28px}
.flow{position:relative;max-width:880px;margin:auto}
.flow-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.flow-path .base{fill:none;stroke:#9cb6dc;stroke-width:3;stroke-dasharray:3 10;stroke-linecap:round}
.flow-path .done-line{fill:none;stroke:var(--sky);stroke-width:4;stroke-linecap:round}
.flow-path .plane{filter:drop-shadow(0 3px 3px rgba(22,50,92,.3))}
.flow-list{list-style:none;padding:0;position:relative;z-index:1}
.flow-list li{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:center;margin-bottom:26px}
.flow-list li:last-child{margin-bottom:0}
.fdot{grid-column:2;grid-row:1;justify-self:center;width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid #9cb6dc;transition:background .3s,border-color .3s,transform .4s cubic-bezier(.3,1.8,.5,1)}
.fcard{grid-row:1;grid-column:1;background:#fff;border-radius:22px;padding:18px 20px;border:2px solid transparent;transition:border-color .4s,transform .5s cubic-bezier(.2,.9,.3,1.3),opacity .5s,box-shadow .4s;opacity:.55;transform:translateY(10px)}
.flow-list li:nth-child(even) .fcard{grid-column:3}
.fno{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--sky)}
.fcard h3{font-size:18px;font-weight:800;color:var(--navy);line-height:1.5}
.fcard p{font-size:14.5px;color:var(--sub)}
.flow-list li.lit .fdot{background:var(--sun);border-color:var(--sun2);transform:scale(1.25)}
.flow-list li.lit .fcard{opacity:1;transform:none;border-color:var(--sky);box-shadow:0 10px 26px rgba(22,50,92,.12)}
.fcard.goal{background:linear-gradient(135deg,#fff,#fff3d6)}
.flow-list li.lit .fcard.goal{border-color:var(--sun)}
.petal{position:absolute;z-index:3;width:12px;height:12px;border-radius:12px 0;background:var(--sakura);pointer-events:none;animation:petal 1.6s ease-out forwards}
@keyframes petal{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}

/* ---- その他 ---- */
.pin{animation:pin 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom}
@keyframes pin{0%,100%{transform:none}50%{transform:translateY(-8px)}}
.walk{animation:walk 1.2s linear infinite}
@keyframes walk{to{stroke-dashoffset:-14}}
.feat{transition:transform .25s}

.pop{opacity:0;transform:translateY(18px) scale(.97);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.9,.3,1.3);transition-delay:var(--d,0s)}
.pop.in{opacity:1;transform:none}
.feat:hover,.feat.pop.in:hover{transform:translateY(-4px) rotate(-.6deg);transition-delay:0s}
h1,h2,.fcard h3{word-break:auto-phrase;text-wrap:balance}

@media (max-width:860px){
  .sim{grid-template-columns:1fr}
}
@media (max-width:760px){
  .sky{max-width:440px;width:100%;margin:auto}
  .flow-list li{grid-template-columns:44px minmax(0,1fr);margin-bottom:18px}
  .fdot{grid-column:1}
  .fcard,.flow-list li:nth-child(even) .fcard{grid-column:2}
  .fcard{padding:14px 16px}
}
@media (max-width:420px){
  .sim-ctrl,.sim-out{padding:22px 16px}
  .seg span{font-size:13px}
  .chip{width:32px;height:32px;font-size:14px}
  .stepper button{width:40px;height:40px}
  .sim-out .btn{align-self:stretch}
}
@media (prefers-reduced-motion:reduce){
  .hero .btn::after,.cloud,.pin,.walk{animation:none}
  .pop{opacity:1;transform:none;transition:none}
  .fcard{opacity:1;transform:none}
  .stack span{animation:none}
}