:root{--deep:#03283b;--blue:#006d9e;--aqua:#66d8df;--sand:#f2f1e8;--ink:#102d3a}
*{box-sizing:border-box}
body.tokashiki-page{margin:0;background:#fff;color:var(--ink);font-family:"Noto Sans JP",sans-serif}
.tokashiki-header{height:82px;padding:0 clamp(20px,5vw,76px);display:flex;align-items:center;justify-content:space-between;background:#fff}
.back-link{color:var(--deep);font-weight:700;text-decoration:none;border-bottom:1px solid #aac4cf;padding-bottom:4px}
.tokashiki-hero{min-height:calc(100vh - 82px);position:relative;display:flex;align-items:flex-end;background:url("tokashiki/hero.webp") center/cover no-repeat}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,28,43,.8),rgba(0,44,61,.3) 62%,rgba(0,0,0,.04)),linear-gradient(0deg,rgba(0,20,30,.5),transparent 58%)}
.hero-copy{position:relative;z-index:1;color:#fff;padding:clamp(80px,12vh,150px) clamp(24px,8vw,120px);max-width:1050px}
.eyebrow{font-family:Oswald,sans-serif;letter-spacing:.18em;font-size:.9rem;font-weight:600;text-transform:uppercase;color:var(--aqua)}
.eyebrow.dark{color:var(--blue)}
.hero-copy h1,h2{font-weight:900;letter-spacing:-.04em}
.hero-copy h1{font-size:clamp(3rem,7.2vw,7rem);line-height:1.08;margin:.16em 0 .25em}
.hero-copy h1 em{font-style:normal;color:#a8f1f1}
.hero-copy>p:not(.eyebrow){font-size:clamp(1rem,2vw,1.25rem);line-height:2}
.hero-copy>a{display:inline-block;margin-top:22px;padding:15px 25px;background:#fff;color:var(--deep);font-weight:800;text-decoration:none}
figure{margin:0}
img{display:block;width:100%;height:100%;object-fit:cover}
figcaption{font-size:.82rem;color:#647b85;margin-top:10px}
h2{font-size:clamp(2.2rem,4.8vw,4.8rem);line-height:1.25;margin:.2em 0 .42em}
.split,.boat{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:clamp(36px,7vw,100px);padding:clamp(75px,10vw,145px) clamp(22px,8vw,120px)}
.split figure img,.boat figure img{aspect-ratio:4/3}
.split p:not(.eyebrow),.boat p:not(.eyebrow),.section-copy>p:not(.eyebrow),.fins-copy>p,.person p{font-size:1.05rem;line-height:2}
.section-copy{max-width:900px;margin-bottom:52px}
.scenery,.underwater,.keramaso{padding:clamp(75px,10vw,140px) clamp(22px,8vw,120px)}
.scenery{background:var(--sand)}
.scenery-grid,.meal-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.scenery-grid .wide,.meal-grid .wide{grid-row:span 2}
.scenery-grid img,.meal-grid img{aspect-ratio:4/3}
.scenery-grid .wide img,.meal-grid .wide img{height:100%}
.seacome{padding:clamp(75px,10vw,140px) clamp(22px,8vw,120px);color:#fff;background:linear-gradient(135deg,#054a69,#047f98)}
.section-copy.light>p:not(.eyebrow){color:#d7edf2}
.service-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}
.service-grid figcaption{color:#d6e9ee}
.service-grid .shop img{aspect-ratio:4/3}
.person{display:grid;grid-template-columns:.92fr 1.08fr;background:#fff;color:var(--ink);min-height:280px}
.person img{min-height:280px}
.person div{padding:30px}
.person small{font:600 .8rem Oswald;letter-spacing:.16em;color:var(--blue)}
.person h3{font-size:1.55rem;margin:.35em 0}
.person p{font-size:.94rem;margin:0}
.saya-smile img{aspect-ratio:4/3}
.fins{display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;gap:clamp(35px,6vw,90px);padding:clamp(75px,10vw,140px) clamp(22px,8vw,120px);color:#fff;background:var(--deep)}
.fins figure img{aspect-ratio:4/3}
.fins figcaption,.underwater figcaption{color:#c7dfe7}
.underwater{color:#fff;background:linear-gradient(150deg,#00668f,#052d4b)}
.underwater-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px}
.underwater-grid .lead{grid-row:span 2}
.underwater-grid img{aspect-ratio:4/3}
.underwater-grid .lead img{height:100%}
.brand{display:flex;align-items:center;gap:11px;color:var(--deep);text-decoration:none}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--deep);color:#fff;font:700 1.45rem Georgia,serif}
.brand b{display:block;font-size:1.18rem}
.brand small{display:block;font:600 .6rem Oswald,sans-serif;letter-spacing:.17em;color:#64808b}
.general-guests{padding:clamp(75px,10vw,140px) clamp(22px,8vw,120px);background:#fff}
.guest-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px}
.guest-grid .guest-lead{grid-row:span 2}
.guest-grid img{aspect-ratio:4/3}
.guest-grid .guest-lead img{height:100%}
.boat{background:#fff}
.keramaso{background:var(--sand)}
.note{text-align:center;padding:24px;background:#e5f1f3;color:#49616c;font-size:.9rem}
.cta{text-align:center;padding:clamp(80px,12vw,160px) 22px;background:linear-gradient(rgba(1,35,53,.72),rgba(1,35,53,.9)),url("tokashiki/hero.webp") center/cover;color:#fff}
.cta h2{margin:.2em auto}
.cta>p:not(.eyebrow){font-size:1.05rem}
.cta>div{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.button{padding:15px 25px;text-decoration:none;font-weight:800}
.button.primary{background:#fff;color:var(--deep)}
.button.secondary{color:#fff;border:1px solid rgba(255,255,255,.65)}
footer{padding:34px clamp(22px,5vw,76px);display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff}
footer>p{font-size:.78rem;color:#70838b}
footer>a:last-child{color:var(--deep);font-weight:700;text-decoration:none}
@media(max-width:800px){.tokashiki-header{height:68px}
.tokashiki-header .brand small{display:none}
.back-link{font-size:.78rem}
.tokashiki-hero{min-height:680px;background-position:58% center}
.hero-copy{padding:90px 22px 64px}
.hero-copy h1{font-size:clamp(2.35rem,11vw,3.3rem)}
.split,.boat,.fins,.service-grid{grid-template-columns:1fr}
.intro figure,.fins figure{order:2}
.scenery-grid,.meal-grid,.underwater-grid{grid-template-columns:1fr}
.scenery-grid .wide,.meal-grid .wide,.underwater-grid .lead{grid-row:auto}
.scenery-grid img,.scenery-grid .wide img,.meal-grid img,.meal-grid .wide img,.underwater-grid img,.underwater-grid .lead img{height:auto;aspect-ratio:4/3}
.person{grid-template-columns:1fr}
.person img{min-height:0;aspect-ratio:4/3}
h2{font-size:clamp(1.9rem,9vw,2.8rem)}
footer{flex-direction:column;text-align:center}
}
@media(max-width:800px){
.guest-grid{grid-template-columns:1fr}
.guest-grid .guest-lead{grid-row:auto}
.guest-grid img,.guest-grid .guest-lead img{height:auto;aspect-ratio:4/3}
}