/* サイト本体（デザインキャンバスから書き出し） */
html{scroll-behavior:smooth;font-size:clamp(15px, calc(0.42vw + 10.5px), 28px);-webkit-text-size-adjust:100%}
body{margin:0;background:#FBF6EC}
a{color:#1E3A52}a:hover{color:#2C5F82}
.hero{height:100vh;height:100svh;min-height:400px}
.scene{display:block}
.scene-p{display:none}
.htitle{top:16%}
@media (max-aspect-ratio: 1/1){.scene-l{display:none}.scene-p{display:block}.htitle{top:12%}}
@keyframes crossL{from{transform:translateX(0)}to{transform:translateX(256px)}}
@keyframes crossP{from{transform:translateX(0)}to{transform:translateX(160px)}}
@keyframes sailL{0%{transform:translateX(-14px)}100%{transform:translateX(20px)}}
@keyframes sailP{0%{transform:translateX(0)}100%{transform:translateX(6px)}}
@keyframes tw{0%,49%{opacity:1}50%,100%{opacity:.15}}
@keyframes flip{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes flop{0%,49%{opacity:0}50%,100%{opacity:1}}
@keyframes bob{0%,49%{transform:translateY(0)}50%,100%{transform:translateY(1px)}}
@keyframes ripple{0%,49%{transform:translateX(0)}50%,100%{transform:translateX(2px)}}
@keyframes fly{0%{transform:translate(-10px,2px)}100%{transform:translate(24px,-6px)}}
@keyframes glow{0%,49%{opacity:1}50%,100%{opacity:.35}}
@keyframes jump{0%,80%{opacity:0;transform:translate(0,0)}81%{opacity:1;transform:translate(0,0)}85%{opacity:1;transform:translate(3px,-4px)}89%{opacity:1;transform:translate(6px,-6px)}93%{opacity:1;transform:translate(9px,-4px)}97%{opacity:1;transform:translate(12px,0)}98%,100%{opacity:0;transform:translate(12px,0)}}
@keyframes spA{0%,80%{opacity:0}81%,84%{opacity:1}85%,100%{opacity:0}}
@keyframes spB{0%,96%{opacity:0}97%,99%{opacity:1}100%{opacity:0}}
@keyframes pop{from{transform:rotate(-6deg) scale(1)}to{transform:rotate(-6deg) scale(1.09)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.gull2,.wake2,.fish,.splashA,.splashB{opacity:0}
.anim .sl .cloudA{animation:crossL 80s steps(256) infinite -26s}
.anim .sl .cloudB{animation:crossL 56s steps(256) infinite -40s}
.anim .sl .cloudC{animation:crossL 110s steps(256) infinite -80s}
.anim .sp .cloudA{animation:crossP 52s steps(160) infinite -14s}
.anim .sp .cloudB{animation:crossP 38s steps(160) infinite -26s}
.anim .sp .cloudC{animation:crossP 70s steps(160) infinite -40s}
.anim .sl .sail{animation:sailL 36s steps(34) infinite alternate}
.anim .sp .sail{animation:sailP 14s steps(6) infinite alternate}
.anim .spark1{animation:tw 1.6s steps(1) infinite}
.anim .spark2{animation:tw 1.6s steps(1) infinite .8s}
.anim .waves1{animation:ripple 2.4s steps(1) infinite}
.anim .waves2{animation:ripple 2.4s steps(1) infinite 1.2s}
.anim .foam1{animation:flip 1.2s steps(1) infinite}
.anim .foam2{animation:flop 1.2s steps(1) infinite}
.anim .halo{animation:glow 3s steps(1) infinite}
.anim .boat{animation:bob 1.2s steps(1) infinite}
.anim .wake1{animation:flip .8s steps(1) infinite}
.anim .wake2{animation:flop .8s steps(1) infinite}
.anim .gulls{animation:fly 16s steps(34) infinite alternate}
.anim .gull1{animation:flip .5s steps(1) infinite}
.anim .gull2{animation:flop .5s steps(1) infinite}
.anim .fish{animation:jump 9s steps(1) infinite 2s}
.anim .splashA{animation:spA 9s steps(1) infinite 2s}
.anim .splashB{animation:spB 9s steps(1) infinite 2s}
.anim .blink{animation:blink 1s steps(1) infinite}
.anim .splash{animation:pop .5s ease-in-out infinite alternate}
.splash:focus-visible{outline:3px solid #1E3A52;outline-offset:2px}
.mi .cur{visibility:hidden}
.mi:hover .cur,.mi:focus-visible .cur{visibility:visible}
.mi:hover{background:#E4F2F7}
.fc:hover{transform:translate(-2px,-4px)}
.fc:hover img{filter:saturate(1.15)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.anim *{animation:none !important}.anim .fish,.anim .splashA,.anim .splashB{opacity:0}}

/* ===== ミニゲーム FISH FLAP ===== */
.g-lock{overflow:hidden}
.game{position:fixed;inset:0;z-index:100;background:#1E4F75;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:'DotGothic16',monospace;color:#1E3A52;outline:none}
.game[hidden]{display:none}
#game-canvas{display:block;width:100vw;height:100vh;height:100dvh;object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges}
.g-score{position:absolute;top:calc(env(safe-area-inset-top) + 4vh);left:0;right:0;text-align:center;font-size:clamp(40px,9vh,120px);line-height:1;color:#FFFFFF;text-shadow:0.08em 0.08em 0 #1E3A52;pointer-events:none}
.g-score.pop{animation:gpop .18s steps(2)}
@keyframes gpop{50%{transform:scale(1.15)}}
.g-close{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:calc(env(safe-area-inset-right) + 12px);width:48px;height:48px;border:0;padding:12px;background:#FFFFFF;box-shadow:0 -4px 0 0 #1E3A52,0 4px 0 0 #1E3A52,-4px 0 0 0 #1E3A52,4px 0 0 0 #1E3A52;cursor:pointer;color:#1E3A52}
.g-close svg{display:block;width:100%;height:100%;fill:currentColor}
.g-close:focus-visible,.g-btn:focus-visible{outline:3px solid #FFE14D;outline-offset:6px}
.g-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(88vw,26rem);box-sizing:border-box;padding:1.75rem 1.5rem;background:#FFFFFF;box-shadow:0 -0.25rem 0 0 #1E3A52,0 0.25rem 0 0 #1E3A52,-0.25rem 0 0 0 #1E3A52,0.25rem 0 0 0 #1E3A52,0.6rem 0.9rem 0 0 rgba(10,30,50,0.35);text-align:center;display:flex;flex-direction:column;align-items:center;gap:0.75rem}
.g-panel[hidden]{display:none}
#g-start{pointer-events:none}
.g-panel p{margin:0}
.g-title{font-size:clamp(1.8rem,5vw,2.6rem);letter-spacing:0.12em;color:#2C5F82;line-height:1.2}
.g-sub{font-size:0.95rem;letter-spacing:0.1em;color:#4A5A66}
.g-hint{font-size:0.9rem;letter-spacing:0.08em}
.g-key{display:inline-block;padding:0 0.4em;background:#E4F2F7;box-shadow:0 0 0 2px #1E3A52}
.g-go{margin-top:0.5rem !important;letter-spacing:0.2em;color:#2C5F82}
.g-blink{animation:gblink 1s steps(1) infinite}
@keyframes gblink{50%{opacity:0}}
.g-result{display:grid;grid-template-columns:auto auto;column-gap:1.5rem;row-gap:0.25rem;margin:0.25rem 0 0;font-size:1.1rem}
.g-result dt{letter-spacing:0.2em;color:#4A5A66;text-align:right}
.g-result dd{margin:0;text-align:left}
.g-new{color:#9E4F2C;letter-spacing:0.16em;animation:gblink .6s steps(1) infinite}
.g-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:0.5rem}
.g-btn{min-width:7.5rem;min-height:48px;padding:0 1.25rem;border:0;background:#FFFFFF;color:#1E3A52;font-family:inherit;font-size:1rem;letter-spacing:0.16em;cursor:pointer;box-shadow:0 -4px 0 0 #1E3A52,0 4px 0 0 #1E3A52,-4px 0 0 0 #1E3A52,4px 0 0 0 #1E3A52}
.g-btn-main{background:#2C5F82;color:#FFFFFF}
.g-btn:hover{filter:brightness(1.08)}
@media (prefers-reduced-motion: reduce){.g-blink,.g-new{animation:none}}
.g-score[hidden]{display:none}