*{box-sizing:border-box}html{scrollbar-width:none}body{margin:0;background:#fdfcf8;color:#073b52;font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;-webkit-font-smoothing:antialiased}button,select,input{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #007ca0;outline-offset:5px}svg{display:block}.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.symbols{position:absolute;width:0;height:0;overflow:hidden}.page{position:relative;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse at 48% 55%,#fff 0,transparent 68%)}.header{position:relative;z-index:3;max-width:1440px;margin:auto;padding:28px 64px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:9px;font-size:34px;font-weight:750;white-space:nowrap;letter-spacing:-1.2px}.brand svg{width:48px;height:30px;stroke:#00a5cd;stroke-width:4;fill:none;stroke-linecap:round}.header-nav{margin-left:auto;display:flex;gap:28px;align-items:center;font-size:14px;font-weight:700}.header-nav a:hover{text-decoration:underline;text-underline-offset:5px}.controls{display:flex;align-items:center;gap:12px}.hand-control,.settings-button{height:46px;border:1px solid #b9deea;border-radius:28px;background:#fff;display:flex;align-items:center;gap:8px;padding:0 17px;font-size:14px;font-weight:700}.hand-control select{border:0;background:transparent;color:inherit;cursor:pointer;padding:4px 0;max-width:68px}.hand-control .icon{color:#009fc0;width:20px}.settings-button .icon{width:22px}.menu-toggle{display:none;border:0;background:none;padding:10px}.menu-toggle .icon{width:27px;height:27px}.hero{position:relative;isolation:isolate;max-width:1440px;margin:auto;min-height:690px;padding:100px 64px 170px;display:flex;align-items:flex-start}.copy{position:relative;z-index:2;width:760px}.copy h1{font-size:60px;line-height:1.46;letter-spacing:-.035em;margin:0 0 24px;font-weight:900;color:#073648}.copy h1 span{display:block}.description{font-size:24px;line-height:1.8;margin:0 0 34px;letter-spacing:.025em}.actions{display:flex;gap:18px;align-items:stretch}.mode{border:1px solid #dceef2;border-radius:18px;background:#fff;min-height:112px;padding:22px 22px;display:flex;align-items:center;gap:18px;text-align:left;box-shadow:0 3px 18px #2a73810c}.mode.primary{background:#00879a;border-color:#00879a;color:white}.mode .mode-icon{width:38px;height:38px;color:#00a3c6}.mode.primary .mode-icon{color:white}.mode .words{display:block;white-space:nowrap}.mode strong{font-size:27px;line-height:1.6;display:block;font-weight:800}.mode small{font-size:14px;line-height:1.7;display:block}.mode .arrow{margin-left:8px;width:25px}.mode:hover{border-color:#089db5;box-shadow:0 4px 20px #1b77951a}.mode.primary:hover{background:#007c90}.art{position:absolute;z-index:-1;right:-35px;top:0;width:700px;height:570px;pointer-events:none}.water-art{position:absolute;inset:0;width:100%;height:100%}.mascot{position:absolute;top:132px;left:120px;width:585px;height:auto}.waves{position:absolute;left:0;bottom:0;width:100%;height:170px;pointer-events:none;z-index:0}.footer{height:30px;text-align:center;font-size:10px;color:#597983;letter-spacing:.06em;position:relative}.drawer{position:absolute;right:22px;top:82px;width:min(350px,calc(100% - 44px));background:#fff;border:1px solid #d8e9ed;border-radius:16px;padding:16px 24px;box-shadow:0 15px 45px #0f465520;z-index:5}.drawer a{display:flex;justify-content:space-between;align-items:center;padding:19px 0;border-bottom:1px solid #e1ecef;font-size:15px}.drawer a:last-child{border:0}.drawer .icon{width:17px;height:17px}.desktop-legal{position:absolute;top:81px;right:65px;display:flex;gap:18px;font-size:10px;color:#637f89}.desktop-legal a:hover{text-decoration:underline}[hidden]{display:none!important}dialog{width:min(570px,calc(100% - 32px));max-height:calc(100svh - 40px);overflow:auto;border:1px solid #d8e9ed;border-radius:19px;padding:28px;color:#073b52;background:#fff;box-shadow:0 24px 90px #073b5226}dialog::backdrop{background:#16465740;backdrop-filter:blur(3px)}.dialog-head{display:flex;align-items:center;gap:12px;border-bottom:1px solid #dfebef;padding-bottom:17px;margin-bottom:23px}.dialog-head h2{font-size:22px;margin:0;line-height:1.5}.close{margin-left:auto;background:none;border:0;padding:8px;display:flex}.close .icon{width:20px;height:20px}.field{border:0;margin:0 0 24px;padding:0}.field legend{font-size:15px;font-weight:700;padding:0;margin-bottom:14px}.radios{display:flex;gap:24px}.radios label{display:flex;align-items:center;gap:8px;cursor:pointer}.radios input{width:20px;height:20px;accent-color:#00a1bf;margin:0}.switch-label{display:flex;gap:12px;align-items:center;cursor:pointer;font-size:15px}.switch-label input{appearance:none;width:47px;height:27px;background:#b6c8cf;border-radius:30px;position:relative;margin:0;cursor:pointer}.switch-label input:checked{background:#31b8cc}.switch-label input:after{content:"";width:21px;height:21px;border-radius:50%;background:#fff;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #073b5230;transition:transform .15s}.switch-label input:checked:after{transform:translateX(20px)}.panel-button{border:1px solid #b9deea;border-radius:11px;min-height:48px;padding:10px 19px;background:#fff;font-weight:700;display:flex;justify-content:center;align-items:center;gap:12px}.panel-button.primary{background:#00879a;color:#fff;border-color:#00879a}.wide{width:100%}.difficulty{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.difficulty label{border:1px solid #c4dfe8;border-radius:12px;text-align:center;padding:12px 3px;cursor:pointer;font-size:15px}.difficulty label:has(input:checked){background:#ecfaff;border-color:#00a3c0}.difficulty input{accent-color:#009db8;margin:0 4px 0 0}.difficulty small{display:block;font-size:11px;margin-top:7px;color:#4c7080}.panel-actions{display:flex;gap:14px}.panel-actions>*{flex:1}.notice{font-size:15px;line-height:1.9;margin:0 0 24px}.status{font-size:14px;line-height:1.8;background:#eff9f8;padding:14px;border-radius:10px;margin:18px 0 0}.info-body{max-height:50svh;overflow:auto;line-height:1.9;font-size:15px}.info-body p{margin:0 0 18px}
@media(min-width:1450px){.hero{padding-top:125px;min-height:calc(100svh - 132px)}.art{top:30px}}
@media(min-width:769px) and (max-width:1190px){.header{padding:26px 35px;gap:18px}.brand{font-size:29px}.header-nav{gap:17px;font-size:12px}.controls{gap:8px}.hand-control,.settings-button{padding:0 12px}.hero{padding:95px 40px 160px;min-height:655px}.copy h1{font-size:49px}.description{font-size:21px}.mode{padding:18px 16px;gap:12px;min-height:98px}.mode strong{font-size:22px}.mode small{font-size:12px}.mode .mode-icon{width:30px}.mode .arrow{width:20px;margin-left:0}.art{width:570px;right:-75px;top:10px;opacity:.95}.mascot{width:500px;left:92px;top:160px}}
@media(max-width:768px){.page{min-height:100svh}.header{padding:20px 20px 12px;gap:8px;justify-content:space-between}.brand{font-size:24px;letter-spacing:-.8px;gap:4px}.brand svg{width:29px;height:23px;stroke-width:4}.header-nav,.desktop-legal{display:none}.controls{gap:8px}.hand-control,.settings-button{height:42px;padding:0 11px;font-size:12px;gap:0}.hand-label,.hand-control>.icon,.settings-label{display:none}.hand-control select{max-width:53px}.settings-button{width:42px;padding:0;justify-content:center}.settings-button .icon{width:21px;height:21px}.menu-toggle{display:block;padding:6px 0 6px 6px}.hero{display:flex;flex-direction:column;padding:0 24px 92px;min-height:0}.art{position:relative;right:auto;top:auto;align-self:center;width:calc(100% + 48px);height:280px;z-index:0;margin-bottom:4px}.mascot{width:350px;max-width:96%;top:66px;left:auto;right:0}.water-art{height:320px;top:-5px}.copy{width:100%}.copy h1{font-size:32px;line-height:1.46;letter-spacing:-.04em;margin:0 0 17px}.description{font-size:18px;line-height:1.75;letter-spacing:0;margin:0 0 21px}.actions{flex-direction:column;gap:10px}.mode{width:100%;padding:14px 20px;min-height:85px;border-radius:15px;gap:17px}.mode strong{font-size:23px;line-height:1.45}.mode small{font-size:12px;line-height:1.75}.mode .mode-icon{width:29px;height:29px}.mode .arrow{width:22px;margin-left:auto}.waves{height:77px}.footer{height:26px;font-size:9px}.drawer{top:75px}.dialog-head h2{font-size:19px}dialog{padding:22px}.panel-actions{gap:10px}.panel-button{padding:10px 12px;font-size:14px}.difficulty{gap:6px}.difficulty label{font-size:14px}.difficulty small{font-size:10px}.radios{gap:26px}}
@media(min-width:500px) and (max-width:768px){.header{padding:25px 36px}.hero{max-width:610px;padding-right:35px;padding-left:35px}.art{height:330px;width:calc(100% + 70px)}.mascot{width:440px;top:48px;right:15px}.copy h1{font-size:43px}.description{font-size:21px}.mode strong{font-size:25px}.mode small{font-size:14px}.mode{min-height:94px}.water-art{height:370px}}
@media(max-width:359px){.header{padding:17px 14px 10px;gap:5px}.brand{font-size:20px;gap:2px}.brand svg{width:24px}.controls{gap:5px}.hand-control{padding:0 8px}.settings-button{width:37px;height:39px}.hand-control{height:39px}.menu-toggle .icon{width:24px}.hero{padding-left:19px;padding-right:19px}.art{height:245px;width:calc(100% + 38px)}.mascot{top:60px;width:300px}.water-art{height:280px}.copy h1{font-size:28px}.description{font-size:16px}.mode{padding:13px 13px;gap:11px;min-height:80px}.mode strong{font-size:21px}.mode small{font-size:11px}.mode .mode-icon{width:25px}.mode .arrow{width:20px}.panel-actions{flex-direction:column}}

/* Inline mode reveal: grid tracks animate to the actual content height. */
.copy{max-width:100%}.mode{transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}.mode .arrow{transition:transform .35s cubic-bezier(.2,.7,.2,1)}.mode[aria-expanded="true"] .arrow{transform:rotate(90deg)}.mode[aria-expanded="true"]{box-shadow:0 0 0 3px #52bdd72b;border-color:#159db3}.mode-panels{width:100%;max-width:708px}.mode-expansion{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transform:translateY(-10px);transition:grid-template-rows .42s cubic-bezier(.2,.7,.2,1),opacity .28s,transform .42s,visibility .42s;scroll-margin-top:22px}.mode-expansion.is-open{grid-template-rows:1fr;opacity:1;visibility:visible;transform:translateY(0)}.expansion-clip{overflow:hidden;min-height:0}.expansion-surface{margin-top:18px;padding:25px 28px 28px;border:1px solid #cfe6eb;border-radius:18px;background:#fffffff5;box-shadow:0 8px 24px #1e687909}.expansion-surface .dialog-head{margin-bottom:20px}.expansion-surface .notice{font-size:14px}.expansion-surface>.panel-button{max-width:250px;margin-left:auto}.mode-expansion .panel-actions{justify-content:flex-end}.mode-expansion .panel-actions>*{max-width:260px}.mode-expansion .status{margin-bottom:0}
@media(max-width:768px){.mode-panels{max-width:none}.expansion-surface{padding:19px 17px 21px;border-radius:15px;margin-top:14px}.expansion-surface .dialog-head{gap:8px;margin-bottom:18px}.expansion-surface .dialog-head h2{font-size:18px}.mode-expansion .panel-actions>*{max-width:none}.expansion-surface>.panel-button{max-width:none}.mode-expansion{scroll-margin-top:15px}}


/* Gentle ocean motion. Rounded water shapes stay inside their illustration canvas. */
.water-art{overflow:visible}
.mascot{animation:none;transform:none}
.water-art>g{animation:none}
.waves>path{will-change:transform}


@keyframes bubbleFloat{0%,100%{transform:translateY(3px)}50%{transform:translateY(-8px)}}
@keyframes waveDrift{from{transform:translate(-65px,4px)}to{transform:translate(65px,-7px)}}
@keyframes waveDriftBack{from{transform:translate(55px,5px)}to{transform:translate(-55px,-4px)}}
@media(min-width:769px){.art{right:26px;width:min(700px,49vw)}.mascot{left:12%;width:87%;top:132px}}
@media(min-width:769px) and (max-width:1190px){.art{right:18px;width:47vw}.mascot{top:160px}}
@media(max-width:768px){.mascot{right:12px;max-width:92%}.art{margin-bottom:12px}}


/* Desktop composition: connect the larger hero artwork with the lifted sea. */
@media(min-width:1200px){
.header{max-width:1540px;padding-top:30px;padding-bottom:24px}.brand{font-size:36px}
.hero{max-width:1540px;min-height:calc(100svh - 104px);padding-top:77px;padding-bottom:180px}
.copy{width:790px}.copy h1{font-size:66px;line-height:1.4;margin-bottom:23px}
.description{font-size:25px;margin-bottom:30px}.mode{min-height:118px;padding:23px 22px}.mode strong{font-size:28px}
.art{width:min(820px,55vw);height:635px;right:16px;top:-7px}
.mascot{width:94%;left:5%;top:116px}.water-art{height:100%}
.waves{height:clamp(220px,27vh,290px)}
}
@media(min-width:769px) and (max-width:1199px){.waves{height:210px}.hero{padding-bottom:185px}}


/* Translucent currents move behind a completely still mascot. */
.current{transform-origin:350px 285px;animation:currentDrift 24s ease-in-out infinite;will-change:transform}
.current-mint{animation-duration:31s;animation-delay:-11s;animation-direction:reverse}
.current-light{animation-duration:27s;animation-delay:-6s}
.current-front{animation-duration:34s;animation-delay:-17s;animation-direction:reverse}
.bubbles circle{animation:bubbleMeander var(--bubble-time,12s) ease-in-out var(--bubble-delay,0s) infinite}
.waves>.sea-back{animation:waveDrift 22s ease-in-out infinite alternate}
.waves>.sea-middle{animation:waveDriftBack 29s ease-in-out -9s infinite alternate}
.waves>.sea-near{animation:waveDrift 25s ease-in-out -12s infinite alternate-reverse}
.waves>.sea-front{animation:waveDriftBack 33s ease-in-out -16s infinite alternate}
@keyframes currentDrift{0%,100%{transform:translate(-4px,3px) scale(.975)}50%{transform:translate(5px,-5px) scale(.995)}}
@keyframes bubbleMeander{0%,100%{transform:translate(-2px,4px);opacity:.65}50%{transform:translate(3px,-13px);opacity:.95}}

/* UI polish (2026-09): header controls hover by color only; mobile drawer fades in when unhidden. */
.hand-control,.settings-button{transition:background-color .15s ease-out,border-color .15s ease-out}
.hand-control:hover,.settings-button:hover{background:#eff8f7;border-color:#7bc5ce}
.drawer{animation:drawerIn .15s ease-out}
@keyframes drawerIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}