:root{--abyss:#031a26;--deep:#06303f;--teal:#0d5c6b;--foam:#e6f3f1;--aqua:#7fe3d6;--mute:#8fb3b8;
 --disp:'Big Shoulders Display','Arial Narrow',sans-serif;--body:'Noto Sans JP',system-ui,sans-serif;
 box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
*{box-sizing:border-box;margin:0}
body{background:var(--abyss);color:var(--foam);font-family:var(--body);line-height:1.9;min-height:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--aqua);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
section{padding:112px 0}
h2{font-family:var(--disp);font-weight:900;font-size:clamp(48px,9vw,96px);line-height:1;letter-spacing:.02em;color:var(--aqua);margin-bottom:40px}
.lead{font-size:clamp(20px,3.2vw,32px);font-weight:700;line-height:1.7;max-width:20em}
p.t{color:var(--mute);max-width:36em}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:calc(14px + env(safe-area-inset-top,0px)) 24px 14px;background:linear-gradient(#031a26cc,transparent)}
header b{font-family:var(--disp);font-size:24px;letter-spacing:.08em}
.btn{display:inline-block;background:var(--aqua);color:var(--abyss);font-family:var(--disp);font-weight:900;font-size:22px;letter-spacing:.1em;padding:14px 40px;border-radius:999px;text-decoration:none;transition:transform .2s,background .2s}
.btn:hover{background:#fff;transform:translateY(-2px)}
header .btn{font-size:16px;padding:8px 24px}

/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:0;
 background:linear-gradient(#2fa4b0 0%,#0d6a7c 22%,#06404f 55%,#031a26 100%)}
.rays{position:absolute;inset:-20% -10% 30%;background:repeating-linear-gradient(105deg,transparent 0 60px,#ffffff14 60px 110px,transparent 110px 200px);transform-origin:top;animation:sway 14s ease-in-out infinite alternate;mask-image:linear-gradient(#000,transparent)}
@keyframes sway{to{transform:skewX(-8deg) translateX(40px)}}
.bub{position:absolute;bottom:-20px;border-radius:50%;border:1.5px solid #ffffff66;animation:rise linear infinite}
@keyframes rise{to{transform:translateY(-110vh)}}
.hero .wrap{position:relative;width:100%}
.hero h1{font-family:var(--disp);font-weight:900;font-size:clamp(72px,19vw,220px);line-height:.88;letter-spacing:.01em;color:#fff;text-shadow:0 8px 60px #031a2688}
.hero .tag{font-family:var(--disp);font-weight:700;font-size:clamp(22px,4.5vw,44px);letter-spacing:.14em;color:var(--aqua);margin:20px 0 8px}
.hero .sub{font-weight:500;letter-spacing:.2em;margin-bottom:36px}
.scroll{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));font-family:var(--disp);letter-spacing:.3em;font-size:14px;writing-mode:vertical-rl;transform:translateX(-50%);color:var(--foam)}
.scroll::after{content:"";display:block;width:1px;height:48px;margin-top:10px;background:var(--aqua);animation:drip 2s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* feature */
.feat{background:radial-gradient(ellipse at 85% 0%,#1a8a9a55,transparent 55%),radial-gradient(ellipse at 0% 100%,#0d5c6b66,transparent 50%),var(--deep)}

/* gym */
.gym{padding:0}
.shot{position:relative;min-height:80vh;display:flex;align-items:flex-end;background:linear-gradient(#06303f,#0d5c6b 60%,#031a26);overflow:hidden}
.shot svg{position:absolute;inset:0;width:100%;height:100%}
.shot .wrap{position:relative;padding-bottom:56px;width:100%}
.shot h2{margin:0;color:#fff}
.ph{font-size:12px;color:#ffffffaa;margin-top:8px}

/* machine */
.mlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-top:1px solid #7fe3d633;border-left:1px solid #7fe3d633}
.mlist>div{display:flex;flex-direction:column;padding:32px 24px;border-right:1px solid #7fe3d633;border-bottom:1px solid #7fe3d633}
.mlist h3{font-size:22px;font-weight:700;letter-spacing:.02em;color:#fff;line-height:1.4}
.mlist p{color:var(--mute);font-size:14px;margin-top:8px}

/* price */
.price{background:var(--aqua);color:var(--abyss);text-align:center}
.price h2{color:var(--teal)}
.big{font-family:var(--disp);font-weight:900;font-size:clamp(72px,18vw,200px);line-height:1}
.big small{font-size:.3em;letter-spacing:.05em}
.price p{font-weight:500;margin-top:12px}

/* how */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:28px 24px 0 0;border-top:2px solid var(--aqua)}
.steps li::before{content:counter(s);position:absolute;top:-17px;left:0;width:32px;height:32px;border-radius:50%;background:var(--aqua);color:var(--abyss);font:900 18px/32px var(--disp);text-align:center}
.steps b{font-size:22px;display:block;margin:8px 0 4px}
.steps span{color:var(--mute);font-size:14px}

/* access */
.acc{background:var(--deep)}
.map{width:100%;height:auto;border-radius:12px;background:#0a4a5a;margin:24px 0}
dl{display:grid;grid-template-columns:7em 1fr;gap:8px 16px;margin-bottom:24px}
dt{color:var(--aqua);font-weight:700}

/* book */
.book{text-align:center;padding:140px 0 100px}
.book h2{font-size:clamp(56px,14vw,160px);color:#fff}
footer{text-align:center;color:var(--mute);font-size:12px;padding:0 24px 40px}

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

/* 予約フォーム(ASP.NET用) */
.book input[type=text],.book input[type=date],.book select{font:inherit;font-size:18px;padding:10px 14px;border-radius:8px;border:1px solid var(--aqua);background:var(--deep);color:var(--foam);margin:6px 0 14px;min-width:240px}
.book label{display:block;color:var(--aqua);font-weight:700}
.book input.btn{border:0;cursor:pointer;margin-top:8px}
.result{margin-top:20px;font-weight:700;color:var(--aqua)}

/* マシン写真 */
.photo{position:relative;aspect-ratio:4/3;margin-top:20px;border-radius:8px;overflow:hidden;background:linear-gradient(160deg,var(--deep),var(--teal));display:flex;align-items:center;justify-content:center}
.photo::after{content:"PHOTO";font:900 22px var(--disp);letter-spacing:.2em;color:#ffffff55}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}

/* ヒーロー背景動画 */
.hero .bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(#031a2655,#031a2699 70%,#031a26)}
.hero .wrap,.hero .scroll{z-index:2}

/* FEATURE */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.fgrid div{position:relative;padding:36px 28px 32px;border-radius:18px;border:1px solid #7fe3d630;background:linear-gradient(165deg,#ffffff12,#ffffff03 60%);box-shadow:inset 0 1px 0 #ffffff1f,0 24px 48px -28px #000}
.fgrid div::before{content:"";position:absolute;top:0;left:28px;right:28px;height:1px;background:linear-gradient(90deg,transparent,var(--aqua),transparent)}
.fgrid .ico{display:block;width:44px;height:44px;margin-bottom:28px;color:var(--aqua)}
.fgrid strong{display:block;font-family:var(--disp);font-weight:900;font-size:clamp(30px,3.2vw,38px);line-height:1.15;color:#fff;letter-spacing:.04em;white-space:nowrap;margin-bottom:12px}
.fgrid span{display:block;color:var(--mute);font-size:14px;line-height:1.8}

iframe.map{display:block;height:420px;border:0}
@media(max-width:600px){iframe.map{height:340px}}

/* 駐車場 */
.parking{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin-top:56px;padding:32px;border-radius:18px;border:1px solid #7fe3d630;background:linear-gradient(165deg,#ffffff12,#ffffff03 60%);box-shadow:inset 0 1px 0 #ffffff1f}
.parking h3{font-size:24px;color:#fff;margin-bottom:16px}
.parking dl{margin-bottom:16px}
.parking p{color:var(--mute);margin-bottom:24px}
.parking .photo{margin-top:0}
@media(max-width:720px){.parking{grid-template-columns:1fr;padding:24px}}

/* マシン写真の位置をそろえる */
.mlist p{margin-bottom:24px}
.mlist .photo{margin-top:auto;width:100%}

/* スマホ:ページを短く(2列でコンパクトに) */
@media(max-width:720px){
 section{padding:64px 0}
 .wrap{padding:0 18px}
 h2{margin-bottom:24px}
 .shot{min-height:56vh}
 .shot .wrap{padding-bottom:32px}
 .book{padding:72px 0 56px}
 .acc dl{grid-template-columns:5.5em 1fr;margin-bottom:16px}
 iframe.map{height:260px}

 .fgrid{grid-template-columns:repeat(2,1fr);gap:12px}
 .fgrid div{padding:20px 14px 18px;border-radius:14px}
 .fgrid div::before{left:14px;right:14px}
 .fgrid .ico{width:30px;height:30px;margin-bottom:14px}
 .fgrid strong{font-size:21px;margin-bottom:6px;letter-spacing:.02em}
 .fgrid span{font-size:12px;line-height:1.6}

 .mlist{grid-template-columns:repeat(2,1fr)}
 .mlist>div{padding:16px 12px 14px}
 .mlist h3{font-size:14px;line-height:1.45}
 .mlist p{font-size:11.5px;line-height:1.6;margin:6px 0 12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
 .mlist .photo{aspect-ratio:1/1;border-radius:6px}

 .steps{grid-template-columns:repeat(2,1fr);gap:32px 16px}
 .steps b{font-size:18px}
 .parking{padding:20px;gap:20px;margin-top:36px}
 .big{font-size:clamp(56px,16vw,120px)}
}

.pbtns{display:flex;flex-wrap:wrap;gap:12px}
.pbtns .btn{font-size:16px;padding:12px 24px;letter-spacing:.06em}

/* 駐車場の案内ステップ */
.psteps{list-style:none;padding:0;margin:0;counter-reset:p}
.psteps li{counter-increment:p;position:relative;padding:0 0 28px 48px}
.psteps li:last-child{padding-bottom:0}
.psteps li::before{content:counter(p);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--aqua);color:var(--abyss);font:900 18px/32px var(--disp);text-align:center}
.psteps li:not(:last-child)::after{content:"";position:absolute;left:15px;top:38px;bottom:6px;width:2px;background:#7fe3d655}
.psteps b{display:block;color:#fff;font-size:18px;line-height:1.5;margin-bottom:4px}
.psteps span{display:block;color:var(--mute);font-size:14px;line-height:1.7;margin-bottom:12px}
.psteps .btn{font-size:16px;padding:12px 24px;letter-spacing:.06em}
.psteps .plink{display:inline-block;margin:10px 0 0 4px;font-size:14px;color:var(--aqua)}

/* 駐車場の写真と案内文 */
.pphotos{display:grid;gap:20px}
.pphotos figure{margin:0}
.pphotos .photo{margin-top:0}
.pphotos figcaption{font-size:13px;color:var(--mute);margin-top:8px;line-height:1.6}
.parking .pguide{color:var(--foam);font-size:16px;line-height:1.9;margin-bottom:28px}
.parking .pguide b{color:var(--aqua)}
@media(max-width:720px){.pphotos{gap:16px}.parking .pguide{font-size:15px;margin-bottom:24px}}

/* 言語切り替え */
header .lang{margin-left:auto;margin-right:16px;display:flex;gap:2px;font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.1em}
header .lang a{text-decoration:none;color:var(--mute);padding:6px 12px;border-radius:999px}
header .lang a.on{background:#ffffff26;color:#fff}
@media(max-width:480px){header{padding-left:16px;padding-right:16px}header .lang{margin-right:8px}header .lang a{padding:6px 9px}}

/* ご利用の注意 */
.notice{display:flex;gap:16px;align-items:flex-start;margin-top:48px;padding:22px 26px;border-radius:14px;border:1px solid #7fe3d655;background:linear-gradient(165deg,#7fe3d61f,#7fe3d608)}
.notice .ico{flex:none;width:28px;height:28px;color:var(--aqua);margin-top:3px}
.notice b{display:block;color:#fff;font-size:18px;line-height:1.6}
.notice p{color:var(--mute);font-size:14px;line-height:1.8;margin-top:4px}
@media(max-width:720px){.notice{margin-top:32px;padding:18px}.notice b{font-size:16px}}