@charset "UTF-8";
:root{--ink:#16394c;--blue:#257fa8;--paper:#fbfdfe;font-family:"Noto Sans JP",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}img{display:block;width:100%;height:100%;object-fit:cover}p,h1,figure{margin:0}button:focus-visible,a:focus-visible{outline:3px solid #257fa8;outline-offset:5px}::selection{background:#ccebf2}
.study{min-height:42px;padding:7px 24px;background:#eff3f5;display:flex;gap:24px;align-items:center;font-size:10px;line-height:1.6;position:relative;z-index:10}.study>a{font-weight:700}.study-name{display:none}.study-toggle{display:none}.study-panel,.study-panel[hidden]{display:flex;align-items:center;gap:16px;flex:1}.study nav{display:flex;justify-content:center;gap:6px;flex:1}.study nav a{font-family:Arial,sans-serif;padding:4px 10px;border-radius:2px}.study nav a[aria-current]{background:var(--ink);color:white}.motion-tools{display:flex;gap:8px}.motion-tools button{font-size:10px;padding:5px 10px;background:white;border:1px solid #d2dfe4;border-radius:3px}
.brand-header{height:78px;width:min(100%,1440px);margin:auto;padding:0 6%;display:flex;align-items:center;justify-content:space-between}.brand{font:800 23px/1 Arial,sans-serif;letter-spacing:-.6px}.brand>span{display:block;font:500 8px/1 Arial,sans-serif;letter-spacing:3.2px;margin-top:9px}.header-note{font-size:11px;letter-spacing:.12em}
.ripple-hero{height:calc(100svh - 120px);min-height:710px;max-height:1040px;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:20px max(6%,calc((100% - 1260px)/2)) 18px;gap:24px}
.ripple-field{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.ripple{position:absolute;overflow:visible;fill:none;stroke-width:48px;opacity:0;transform:scale(.28);transform-origin:center;will-change:transform,opacity;animation:soft-ripple 9.2s infinite ease-out}
.ripple-blue{stroke:#c9e9f6;width:920px;height:920px;left:-330px;top:-320px}
.ripple-sand{stroke:#f5e7cb;width:880px;height:880px;right:-350px;top:-110px;animation-delay:.25s}
.ripple-mint{stroke:#d0e9df;width:1000px;height:1000px;left:15%;bottom:-450px;animation-delay:3.6s;stroke-width:58px}
.photo-stage{width:100%;max-width:1200px;margin:0 auto;position:relative;height:clamp(330px,43svh,440px);flex:none}
.photo-slot{position:absolute;aspect-ratio:4/3;transform-origin:center;border-radius:12px;isolation:isolate}
.photo-left{width:26%;left:0;top:63px;rotate:-4deg;--stagger:.25s}
.photo-main{width:42%;left:29%;top:5px;rotate:3deg;z-index:2;--stagger:.47s}
.photo-right{width:25%;right:0;top:128px;rotate:-4deg;--stagger:.69s}
.photo-frame{position:absolute;inset:0;border:5px solid white;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px #16394c0d;background:#e6f0f4;opacity:0;transform:translateY(14px) scale(.975);will-change:opacity,transform;animation:photo-breathe 9.2s var(--stagger) infinite both cubic-bezier(.23,.64,.36,1)}
.photo-frame.phase-b{animation-delay:calc(var(--stagger) + 4.6s)}
.photo-main img{object-position:68% 46%}.photo-left img{object-position:50% 44%}.photo-right img{object-position:50% 44%}
.hero-copy{position:relative;width:100%;max-width:1200px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
h1{font-size:clamp(39px,4.05vw,60px);font-weight:700;letter-spacing:-.065em;line-height:1.5;white-space:nowrap}
h1 em{font-style:normal;color:var(--blue)}.mobile-break{display:none}
.hero-action{flex:none;width:320px;padding-bottom:3px}.description{font-size:14px;line-height:2.05;letter-spacing:.025em}
.cta{width:100%;min-height:54px;background:var(--blue);color:white;border:1px solid var(--blue);border-radius:8px;margin-top:22px;padding:13px 20px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:22px;transition:background .2s}
.cta>span{font:21px/1 Arial,sans-serif}.cta:hover{background:#1c6588}.link-status{font-size:10px;line-height:1.7;min-height:17px;margin-top:7px}
.hero-note{width:100%;max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;gap:20px;font-size:9px;line-height:1.7;color:#5a7380;letter-spacing:.03em;position:relative}
@keyframes soft-ripple{0%{opacity:0;transform:scale(.28)}8%{opacity:.9}35%{opacity:.75;transform:scale(1.12)}55%,100%{opacity:0;transform:scale(1.5)}}
@keyframes photo-breathe{0%{opacity:0;transform:translateY(14px) scale(.975)}10%,39%{opacity:1;transform:translateY(0) scale(1)}50%,100%{opacity:0;transform:translateY(-7px) scale(.985)}}
.motion-hold .photo-frame,.motion-hold .ripple{animation-play-state:paused!important}
.restarting .photo-frame,.restarting .ripple{animation:none!important}
.motion-reduce .photo-frame,.motion-reduce .ripple{animation:none!important;will-change:auto}
.motion-reduce .phase-a{opacity:1;transform:none}.motion-reduce .phase-b{display:none}.motion-reduce .ripple-blue,.motion-reduce .ripple-sand{opacity:.65;transform:scale(1)}.motion-reduce .ripple-mint{display:none}
.preview-mode .study,.preview-mode .brand-header{display:none}.preview-mode .ripple-hero{height:710px;min-height:710px;padding-top:22px}.preview-mode .photo-stage{height:360px}
@media(min-width:701px) and (max-width:1050px){.ripple-hero{padding-inline:5%;gap:26px;min-height:740px}.photo-stage{height:330px}.photo-left{top:70px}.photo-right{top:105px}.hero-copy{gap:25px;align-items:flex-start;flex-direction:column}h1{font-size:46px}.hero-action{width:100%;display:grid;grid-template-columns:1fr 290px;column-gap:20px;align-items:center}.cta{margin:0}.link-status{grid-column:2}.hero-note{font-size:8px}}
@media(max-width:700px){
 .study{display:flex;flex-wrap:wrap;padding:6px 16px;gap:0 10px;min-height:40px;justify-content:space-between;font-size:9px}.study-name{display:block;font-size:8px;max-width:34%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.study-toggle{display:block;background:none;border:0;font-size:9px;padding:6px 0}.study-panel,.study-panel[hidden]{display:none}.study-panel:not([hidden]){display:block;flex-basis:100%;padding-bottom:8px}.study nav{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:8px}.study nav a{min-height:36px;display:grid;place-items:center;background:#e2eaf0}.motion-tools{justify-content:flex-end;margin-top:8px}.motion-tools button{padding:8px 10px}
 .brand-header{height:64px;padding:0 23px}.brand{font-size:21px}.brand>span{font-size:7px;letter-spacing:2.8px}.header-note{display:none}
 .ripple-hero{height:auto;min-height:calc(100svh - 104px);max-height:none;padding:18px 23px 15px;gap:18px;justify-content:space-between}
 .photo-stage{height:clamp(216px,31svh,275px);width:calc(100% + 16px);max-width:520px;margin-inline:-8px}
 .photo-left{width:34%;left:0;top:57px;aspect-ratio:1/1.12;rotate:-4deg;z-index:1}
 .photo-main{width:50%;left:30%;top:15px;aspect-ratio:1.04/1;rotate:3deg}
 .photo-right{width:33%;right:0;top:116px;aspect-ratio:1.1/1;rotate:-4deg;z-index:3}
 .photo-frame{border-width:3px;border-radius:9px;box-shadow:0 5px 18px #16394c0b}
 .photo-left img{object-position:48% 42%}.photo-main img{object-position:70% 44%}.photo-right img{object-position:50% 40%}
 .hero-copy{display:flex;flex-direction:column;align-items:stretch;gap:17px}
 h1{font-size:clamp(29px,8.45vw,49px);line-height:1.45;letter-spacing:-.055em;white-space:normal}.mobile-break{display:inline}
 .hero-action{width:100%;padding:0}.description{font-size:12px;line-height:1.95;letter-spacing:.015em}.cta{min-height:51px;font-size:13px;margin-top:19px;border-radius:7px;padding:12px 18px}.link-status{font-size:9px;min-height:15px;margin-top:6px}
 .hero-note{font-size:8px;line-height:1.8;gap:3px;flex-direction:column}
 .ripple-blue{width:620px;height:620px;left:-340px;top:-220px;stroke-width:46px}.ripple-sand{width:650px;height:650px;right:-370px;top:35px;stroke-width:46px}.ripple-mint{width:750px;height:750px;left:-300px;bottom:-260px;stroke-width:50px}
}
@media(max-width:360px){.brand-header{height:60px;padding-inline:20px}.brand{font-size:20px}.ripple-hero{padding:14px 20px;min-height:calc(100svh - 100px);gap:16px}.photo-stage{height:218px}.photo-left{top:44px}.photo-main{top:10px}.photo-right{top:99px}h1{font-size:29px}.description{font-size:11px}.hero-note{font-size:7px}}
@media(min-width:501px) and (max-width:700px){h1{font-size:38px}.mobile-break{display:none}.ripple-hero{gap:20px}.hero-action{display:grid;grid-template-columns:1fr 240px;column-gap:15px;align-items:center}.description{font-size:11px}.cta{margin-top:0}.link-status{grid-column:2}.hero-note{flex-direction:row;gap:15px}}
@media(prefers-reduced-motion:reduce){.photo-frame,.ripple{animation:none!important;will-change:auto}.phase-a{opacity:1;transform:none}.phase-b{display:none}.ripple-blue,.ripple-sand{opacity:.65;transform:scale(1)}.ripple-mint{display:none}*{transition:none!important}}