/*
Theme Name: Manaby-labo Swim
Theme URI: https://manaby-labo.com/
Author: Manaby-labo
Description: 水泳パーソナル（個別）指導 Manaby-labo のテーマ（2026リニューアル）
Version: 1.0.13
Text Domain: manaby-labo-swim
*/

/* Concept: "レーン" — everyone swims in their own lane (= one-to-one lessons).
   Motifs taken from the coach's own race photos: yellow/red lane ropes, start-block number plates, pool-floor tile grid, scoreboard digits.
   Layout: smartphone-only column (max 43rem). On PC the column sits on a pool-floor background with fixed side panels (nav left, contact right).
   Type: Zen Maru Gothic (400/500/700), Outfit for English, numbers and plates. Single light theme by design (website mockup). */
:root{
  color-scheme: light;
  --navy:#0F2738; --pool:#1386AE; --pool-d:#0B6A8C; --water:#E3F2F7; --tile:#EFE8DA; --paper:#F7F2E8; --aqua:#38AFCB;
  --rope:#F4C21B; --rope-d:#D99E00; --red:#E5483A; --red-d:#B92E22;
  --white:#FFFFFF; --ink:#1A2A35; --sub:#5B6B76; --rule:#DDD4C4; --line:#06C755;
  --sans:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  --en:"Outfit","Zen Maru Gothic",sans-serif;
  --col:43rem;
}
html{font-size:62.5%}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6.4rem}
body{margin:0;color:var(--ink);font-family:var(--sans);font-size:1.5rem;line-height:2;letter-spacing:.02em;-webkit-font-smoothing:antialiased;
  background-color:var(--pool);
  background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:3.6rem 3.6rem}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--rope);outline-offset:2px}
h1,h2,h3{margin:0;line-height:1.5;word-break:auto-phrase;text-wrap:balance}
p{margin:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ===== stage (PC) ===== */
.stage{display:grid;grid-template-columns:minmax(0,1fr) var(--col) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:4.8rem clamp(2.4rem,4vw,6.4rem);color:var(--white);overflow:hidden}
.side.left{align-items:flex-end;text-align:right}
.side.right{align-items:flex-start}
.side-in{display:flex;flex-direction:column;gap:3.2rem;max-width:30rem;width:100%}
.side .floor-line{position:absolute;top:0;bottom:0;width:2.8rem;background:var(--navy);opacity:.55}
.side.left .floor-line{left:18%}
.side.left .floor-line::after{content:"";position:absolute;top:12%;left:-2.4rem;width:7.6rem;height:2.8rem;background:inherit}
.side.right .floor-line{right:18%}
.side.right .floor-line::after{content:"";position:absolute;bottom:12%;left:-2.4rem;width:7.6rem;height:2.8rem;background:inherit}
.side-logo{display:flex;flex-direction:column;align-items:flex-end;gap:0.6rem;position:relative}
.side-logo small{font-size:1.2rem;font-weight:700;letter-spacing:.16em}
.side-logo b{font-family:var(--en);font-weight:500;font-size:4rem;line-height:1;letter-spacing:.02em}
.side-nav{display:flex;flex-direction:column;gap:2px;position:relative}
.side-nav a{display:flex;align-items:center;justify-content:flex-end;gap:1.2rem;padding:0.8rem 0;font-weight:700;font-size:1.45rem}
.side-nav a span{font-family:var(--en);font-weight:600;font-size:1.2rem;letter-spacing:.14em;opacity:.7}
.side-nav a:hover{color:var(--rope)}
.side-web{font-size:1.25rem;opacity:.85;position:relative;border-top:1px solid rgba(255,255,255,.35);padding-top:1.6rem}
.side-web b{display:block;font-size:1.35rem}
.side-cta{position:relative;display:flex;flex-direction:column;gap:1.2rem}
.side-cta .en{font-family:var(--en);font-weight:700;font-size:4.4rem;line-height:1;letter-spacing:.02em}
.side-cta p{font-size:1.35rem;line-height:1.8}
.side-cta .btn{width:100%}
.side-tel{display:flex;flex-direction:column;line-height:1.4;padding-top:0.6rem}
.side-tel small{font-size:1.2rem;opacity:.85}
.side-tel b{font-family:var(--en);font-weight:600;font-size:3rem;letter-spacing:.06em;user-select:all}
.side-area{font-size:1.25rem;opacity:.85;border-top:1px solid rgba(255,255,255,.35);padding-top:1.6rem;position:relative}

/* ===== phone column ===== */
.phone{background:var(--paper);position:relative;min-width:0;box-shadow:0 0 0 1px rgba(15,39,56,.15),0 3rem 8rem rgba(15,39,56,.25)}
.mocknote{background:var(--navy);color:var(--white);font-size:1.1rem;text-align:center;padding:0.5rem 1.2rem;line-height:1.6}
.pad{padding-left:max(2.4rem,env(safe-area-inset-left,0px));padding-right:max(2.4rem,env(safe-area-inset-right,0px))}

/* header */
.hdr{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:1rem;height:6rem}
.logo{display:flex;align-items:center;gap:0.8rem;margin-right:auto}
.logo .mark{width:3rem;height:3rem}
.logo .tx small{display:block;font-size:1.05rem;font-weight:700;color:var(--pool-d);letter-spacing:.06em;line-height:1.3}
.logo .tx b i{font-style:normal;color:var(--pool)}
.logo .mark{color:var(--navy)}
.ftr .logo .mark{color:#fff}
.logo .tx b{font-family:var(--en);font-weight:500;font-size:2.1rem;line-height:1;color:var(--navy);letter-spacing:.02em}
.hdr .line-btn{display:inline-flex;align-items:center;gap:0.6rem;height:3.8rem;padding:0 1.2rem 0 0.9rem;border-radius:0;background:var(--line);color:#fff;font-weight:700;font-size:1.25rem}
.hdr .line-btn svg{width:2rem;height:2rem}
.menu-btn{width:3.4rem;height:4.4rem;margin-left:2px;border:0;background:transparent;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:0.5rem;cursor:pointer;padding:0;color:var(--navy)}
.menu-btn i{display:block;width:2.6rem;height:2px;background:currentColor;border-radius:2px}
.menu-btn i+i{width:1.6rem}
.menu-btn b{font-family:var(--en);font-weight:500;font-size:0.95rem;letter-spacing:.14em;line-height:1;margin-top:2px}
.drawer{position:absolute;inset:6rem 0 auto 0;z-index:39;background:var(--navy);color:#fff;padding:1.2rem 2.4rem 2.8rem}
.drawer a{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 0;border-bottom:1px solid rgba(255,255,255,.15);font-weight:700}
.drawer a span{font-family:var(--en);font-size:1.2rem;letter-spacing:.14em;opacity:.6}

/* hero: one large photo of the coach + catch */
.hero{position:relative;background:var(--navy);color:#fff}
.hero-ph{position:relative;aspect-ratio:8/7;overflow:hidden}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,39,56,0) 0%,rgba(15,39,56,.08) 30%,rgba(15,39,56,.55) 60%,rgba(15,39,56,.9) 80%,var(--navy) 94%)}
.hero h1{text-shadow:0 1px 8px rgba(15,39,56,.6)}
.hero-copy{position:relative;z-index:1;margin-top:-6rem;padding-bottom:3.6rem}
.hero h1{font-size:1.2rem;font-weight:700;letter-spacing:.06em;line-height:1.7;margin-bottom:1rem;opacity:.92}
.catch{font-weight:700;font-size:clamp(3.1rem,9.2vw,3.9rem);line-height:1.34;letter-spacing:.06em}
.catch{font-family:"Zen Kaku Gothic New",var(--sans);font-weight:500;letter-spacing:.1em}
.catch em{font-style:normal;color:var(--rope)}
.hero-sub{margin-top:1.4rem;font-size:1.3rem;font-weight:700;line-height:1.7;opacity:.95}

/* pick your lane (just under the hero) */
.pick{background:transparent;padding-block:4rem}
.pick-ttl{font-size:1.3rem;font-weight:500;color:var(--sub);margin-bottom:1.4rem}
.pick-ttl b{font-weight:700}
.pick ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--navy);border-bottom:1px solid var(--navy)}
.pick li+li{border-top:1px solid var(--rule)}
.pick li{display:flex;align-items:baseline;gap:1.6rem;padding:1.6rem 0;font-weight:700;font-size:1.55rem;color:var(--navy)}

/* start-block plate */
.plate{font-family:var(--en);font-weight:600;font-size:2.2rem;line-height:1;color:var(--pool-d);min-width:1.8rem}
.plate.sm{font-size:2.2rem}

/* intro */

/* section heading */
.sec{padding-block:6.4rem}

.sec.water{background:var(--tile)}
.sh{margin-bottom:3.2rem;display:flex;flex-direction:column;align-items:flex-start;gap:0.8rem}
.sh .en{order:-1;font-family:var(--en);font-weight:500;font-size:3.8rem;line-height:1;letter-spacing:.02em;color:var(--navy)}
.sh h2{font-size:1.4rem;font-weight:700;color:var(--pool-d);letter-spacing:.08em;display:flex;align-items:center;gap:1rem}
.sh h2 .ic{width:2.2rem;height:2.2rem;flex-shrink:0}
.sh p{font-size:1.4rem;color:var(--sub);margin-top:1rem;line-height:1.9}

/* about */
.about-ph{position:relative;margin:0 calc(-1 * max(2.4rem,env(safe-area-inset-left,0px))) 3.6rem 0}
.about-ph img{width:100%;aspect-ratio:4/3;object-fit:cover}

.about .msg{font-weight:700;font-size:2.1rem;color:var(--navy);line-height:1.75;margin-bottom:2rem;letter-spacing:.04em}
.about p{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:2.4rem;width:auto;border-radius:0;padding:1.6rem 2rem;font-weight:700;font-size:1.45rem;line-height:1.3}
.btn::after{content:"";width:1.6rem;height:0.7rem;flex-shrink:0;background:currentColor;clip-path:polygon(0 85%,80% 85%,62% 0,70% 0,100% 100%,0 100%)}
.btn-navy{background:var(--navy);color:#fff}
.btn-blue{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.btn-line{background:var(--line);color:#fff}
.btn-white{background:#fff;color:var(--navy)}

.more{margin-top:3.2rem}
.btn2 .btn,.contact .btns .btn{width:100%}
.btn2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.btn2 .btn{padding-inline:1.2rem;font-size:1.3rem;gap:0.6rem;letter-spacing:0;white-space:nowrap;min-width:0}


/* photo mosaic */

/* lesson features */
.lesson-ph{margin-bottom:0.8rem}
.lesson-ph img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:55% 38%}
.feats{list-style:none;margin:0;padding:0}
.feats li{padding:2.6rem 0 2.8rem;border-bottom:1px solid var(--rule)}
.feats li:first-child{border-top:2px solid var(--navy);margin-top:2.4rem}
.feats em{display:block;font-style:normal;font-family:var(--en);font-weight:600;font-size:1.25rem;letter-spacing:.18em;color:var(--pool-d);margin-bottom:0.4rem}
.feats h3{font-size:1.7rem;letter-spacing:.04em;font-weight:700;color:var(--navy);margin-bottom:0.6rem}
.feats p{font-size:1.4rem;color:var(--sub)}

/* scoreboard price */

/* coach */
.coach-ph{position:relative;margin-bottom:2.2rem}
.coach-ph .main{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 30%}
.coach-ph .sub{position:absolute;right:-0.6rem;bottom:-2.6rem;width:46%;aspect-ratio:4/3;object-fit:cover;border:0.5rem solid var(--white)}
.coach .name{display:flex;align-items:baseline;gap:1.2rem;margin:3.4rem 0 1.2rem}
.coach .name b{font-size:2.4rem;font-weight:700;color:var(--navy);letter-spacing:.14em}
.coach .name span{font-family:var(--en);font-weight:600;font-size:1.4rem;letter-spacing:.18em;color:var(--sub)}
.coach-lead{font-size:1.45rem;line-height:1.95}

/* faq */
.q{border-bottom:1px solid var(--rule)}
.q:first-child{border-top:2px solid var(--navy)}
.q summary{list-style:none;display:flex;gap:1.2rem;align-items:flex-start;padding:1.6rem 0;cursor:pointer;font-weight:700;font-size:1.5rem;line-height:1.6}
.q summary::-webkit-details-marker{display:none}
.q summary .qb{font-family:var(--en);font-weight:700;font-size:2rem;line-height:1.2;color:var(--pool-d)}
.q summary .pm{margin-left:auto;margin-top:0.7rem;position:relative;width:1.2rem;height:1.2rem;flex-shrink:0}
.q summary .pm::before,.q summary .pm::after{content:"";position:absolute;left:0;top:0.5rem;width:1.2rem;height:2px;background:var(--navy)}
.q summary .pm::after{transform:rotate(90deg);transition:transform .2s}
.q[open] summary .pm::after{transform:rotate(0)}
.q .a{padding:0 0 1.8rem 2.8rem;font-size:1.4rem;color:var(--sub)}

/* blog */
.posts{display:flex;flex-direction:column;border-top:2px solid var(--navy)}
.post{display:grid;grid-template-columns:11.2rem 1fr;gap:1.4rem;padding:1.4rem 0;border-bottom:1px solid var(--rule);align-items:center}
.post img{width:11.2rem;aspect-ratio:4/3;object-fit:cover}
.post time{font-family:var(--en);font-weight:600;font-size:1.4rem;color:var(--pool-d);letter-spacing:.06em}
.post h3{font-size:1.35rem;font-weight:700;line-height:1.65}

/* contact */
.contact{background:var(--navy);color:#fff;padding-block:6.4rem}
.contact .sh .en{color:#fff}
.contact .sh h2{color:var(--aqua)}
.contact .sh p{color:rgba(255,255,255,.85)}
.contact .btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.contact .btns .btn{padding:1.7rem 0.8rem;font-size:1.3rem;letter-spacing:0;white-space:nowrap;justify-content:center}
.contact .btns .btn::after{display:none}
.contact .tel{grid-column:1/-1;display:block;margin-top:1.4rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.25);color:#fff}
.contact .tel small{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:1.4rem;font-size:1.2rem;color:rgba(255,255,255,.7);margin-bottom:0.6rem}
.contact .tel b{display:block;font-family:var(--en);font-weight:600;font-size:3.8rem;line-height:1;letter-spacing:.04em}
.contact .tel small span{font-size:1.1rem;color:rgba(255,255,255,.55)}

/* footer */
.ftr{background:var(--navy);color:#fff;padding-block:2.8rem 2.3rem;line-height:1.6;border-top:1px solid rgba(255,255,255,.12)}
.ftr .logo .tx b{color:#fff}.ftr .logo .tx small{color:var(--rope)}
.ftr nav{display:grid;grid-template-columns:1fr 1fr;gap:0 1.6rem;margin:1.6rem 0 1.4rem;font-size:1.3rem}
.ftr nav a{padding:0.5rem 0;opacity:.9}
.ftr .addr{font-size:1.15rem;opacity:.7;line-height:1.7}
.ftr .web{display:block;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.2);font-size:1.2rem;opacity:.85}
.ftr .web p{margin:0;font-size:1.25rem;line-height:1.7}
.ftr .web a,.side-web a{display:inline-flex;align-items:center;gap:0.8rem;margin-top:0.6rem;font-weight:700;font-size:1.3rem;border-bottom:1px solid currentColor;padding-bottom:2px}
.side-web p{margin:0}
.ftr .copy{font-family:var(--en);font-size:1.15rem;letter-spacing:.12em;opacity:.5;margin-top:2.4rem}

/* fixed bottom bar (inside column) */
.spbar{position:sticky;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--white);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom,0px)}
.spbar a{padding:1.1rem 0.4rem;text-align:center;font-weight:700;font-size:1.25rem;line-height:1.35;display:flex;flex-direction:column;align-items:center;gap:1px}
.spbar a small{font-family:var(--en);font-weight:600;font-size:1.05rem;letter-spacing:.14em;opacity:.8}
.spbar a+a{border-left:1px solid var(--rule)}
.spbar .l{background:var(--line);color:#fff}.spbar .t{color:var(--navy)}.spbar .m{background:var(--navy);color:#fff}

/* responsive */
/* PC: side panels carry nav and contact, so hide the in-column duplicates */
@media (min-width:1001px){.hdr .line-btn,.menu-btn,.drawer,.spbar{display:none!important}}
@media (max-width:1000px){
  .stage{grid-template-columns:1fr}
  .side{display:none}
  .phone{max-width:var(--col);width:100%;margin-inline:auto}
}
@media (max-width:460px){
  body{background:var(--white)}
  .phone{max-width:none;box-shadow:none}
}

/* soft corners: photos 0.8rem, buttons 0.6rem (no boxed layouts) */
.about-ph img,.lesson-ph img,.coach-ph .main,.post img{border-radius:0.8rem}
.coach-ph .sub{border-radius:0.8rem}
.about-ph img{border-radius:0.8rem 0 0 0.8rem}
.btn,.hdr .line-btn{border-radius:0.6rem}
.btn-blue{border-radius:0.6rem}
.side-cta .btn{border-radius:0.6rem}

/* ===== inner pages ===== */
.page-hd{padding-block:4.8rem 3.2rem;border-bottom:1px solid var(--rule)}
.crumb{display:flex;flex-wrap:wrap;gap:0.6rem;font-size:1.2rem;color:var(--sub);margin-bottom:2.4rem}
.crumb a{color:var(--pool-d)}
.crumb span::before{content:"/";margin-right:0.6rem;color:var(--rule)}
.page-hd .en{display:block;font-family:var(--en);font-weight:500;font-size:4.2rem;line-height:1;letter-spacing:.02em;color:var(--navy);margin-bottom:1rem}
.page-hd h1{font-size:1.5rem;font-weight:700;color:var(--pool-d);letter-spacing:.08em;display:flex;align-items:center;gap:1rem}
.page-hd .ic{width:2.2rem;height:2.2rem}
.page-hd p{margin-top:1.6rem;font-size:1.4rem;color:var(--ink);line-height:2}
.lead-ph{margin:0 0 3.2rem}
.lead-ph img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0.8rem}
.prose p{font-size:1.45rem;line-height:2.05}
.prose p+p{margin-top:1.6rem}
.prose .big{font-weight:700;font-size:1.9rem;color:var(--navy);line-height:1.75;margin-bottom:2rem}
.checks{list-style:none;margin:2rem 0;padding:0;border-top:1px solid var(--rule)}
.checks li{padding:1.2rem 0 1.2rem 2.4rem;border-bottom:1px solid var(--rule);font-weight:700;font-size:1.45rem;color:var(--navy);position:relative}
.checks li::before{content:"";position:absolute;left:0.2rem;top:1.95rem;width:1.2rem;height:0.6rem;border-left:2px solid var(--pool);border-bottom:2px solid var(--pool);transform:rotate(-45deg)}
.feats.long p{font-size:1.45rem;line-height:2.05;color:var(--ink)}
.feats.long p+p{margin-top:1.2rem}
.feats.long .no{font-family:var(--en);font-weight:500;font-size:3.2rem;line-height:1;color:var(--pool);display:block;margin-bottom:1rem}
/* price table */
.ptable{width:100%;border-collapse:collapse;font-size:1.45rem;margin-top:0.8rem}
.ptable caption{text-align:left;font-weight:700;color:var(--navy);font-size:1.7rem;padding-bottom:1rem}
.ptable th,.ptable td{padding:1.4rem 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:baseline}
.ptable thead th{font-size:1.2rem;color:var(--sub);font-weight:500;border-bottom:2px solid var(--navy);padding-block:0.6rem}
.ptable td.yen{text-align:right;font-family:var(--en);font-weight:500;font-size:2.4rem;color:var(--navy);letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ptable td.yen small{font-family:var(--sans);font-size:1.2rem;font-weight:700;margin-left:0.2rem}
.ptable th{font-weight:700}
.ptable+.ptable{margin-top:4rem}
.notes{list-style:none;margin:3.2rem 0 0;padding:0;font-size:1.3rem;color:var(--sub);line-height:1.9}
.notes li{padding-left:1.4em;text-indent:-1.4em}
.notes li+li{margin-top:0.6rem}
.dl{margin:0;display:grid;grid-template-columns:9.6rem 1fr;border-top:2px solid var(--navy)}
.dl dt,.dl dd{margin:0;padding:1.4rem 0;border-bottom:1px solid var(--rule);font-size:1.4rem;line-height:1.85}
.dl dt{font-weight:700;color:var(--pool-d);font-size:1.3rem}
.h3s{font-size:1.8rem;font-weight:700;color:var(--navy);margin:4.8rem 0 1.6rem;display:flex;align-items:center;gap:1rem}
.h3s::before{content:"";width:1.8rem;height:2px;background:var(--pool)}
.profile-ph{position:relative;margin-bottom:5.2rem}
.profile-ph .main{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:0.8rem;object-position:50% 35%}
.profile-ph .sub{position:absolute;right:-0.6rem;bottom:-3.2rem;width:48%;aspect-ratio:4/3;object-fit:cover;border:0.5rem solid var(--paper);border-radius:0.8rem}
.name-l{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;margin-bottom:2rem}
.name-l b{font-size:2.6rem;color:var(--navy);letter-spacing:.14em}
.name-l span{font-family:var(--en);font-weight:500;font-size:1.4rem;letter-spacing:.18em;color:var(--sub)}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;margin-top:1.6rem}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:0.8rem}
.gallery img:first-child{grid-column:1/-1;aspect-ratio:16/10}
/* faq page */
.faq-grp+.faq-grp{margin-top:4.8rem}
.faq-grp h2{font-size:1.6rem;font-weight:700;color:var(--navy);margin-bottom:1.2rem}
/* blog list */
.cats{display:flex;flex-wrap:wrap;gap:0.6rem 1.6rem;margin-bottom:2.4rem;font-size:1.35rem;font-weight:700}
.cats a{color:var(--sub);padding-bottom:0.3rem}
.cats a.on{color:var(--navy);border-bottom:2px solid var(--pool)}
.pager{display:flex;justify-content:center;align-items:center;gap:0.4rem;margin-top:3.6rem;font-family:var(--en);font-weight:500;font-size:1.5rem}
.pager a,.pager span{min-width:3.6rem;height:3.6rem;display:grid;place-items:center;border-radius:0.6rem;color:var(--navy)}
.pager .on{background:var(--navy);color:#fff}
.pager .gap{color:var(--sub)}
.post .cat{display:inline-block;font-size:1.1rem;font-weight:700;color:var(--pool-d);margin-left:0.8rem}
/* article */
.art-meta{display:flex;gap:1.2rem;align-items:baseline;font-size:1.25rem;color:var(--sub);margin-bottom:1.2rem}
.art-meta time{font-family:var(--en);font-weight:500;font-size:1.4rem;color:var(--pool-d)}
.art-title{font-size:2.2rem;font-weight:700;line-height:1.6;color:var(--navy);margin-bottom:2.4rem}
.art img.eye{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0.8rem;margin-bottom:2.8rem}
.art h2{font-size:1.9rem;font-weight:700;color:var(--navy);margin:4rem 0 1.6rem;padding-bottom:1rem;border-bottom:2px solid var(--navy)}
.art h3{font-size:1.65rem;font-weight:700;color:var(--navy);margin:2.8rem 0 1.2rem;padding-left:1.2rem;border-left:3px solid var(--pool)}
.art p{font-size:1.5rem;line-height:2.1}
.art p+p{margin-top:1.6rem}
.toc{margin:0 0 3.2rem;padding:1.6rem 0;border-block:1px solid var(--rule)}
.toc b{display:block;font-size:1.3rem;color:var(--sub);margin-bottom:0.8rem}
.toc ol{margin:0;padding-left:2rem;font-size:1.4rem;line-height:2}
.toc a{color:var(--pool-d)}
.art-cta{margin-top:4.8rem;padding-top:2.8rem;border-top:2px solid var(--navy)}
.art-cta p{font-weight:700;color:var(--navy);margin-bottom:1.6rem}
.sample{font-size:1.2rem;color:var(--sub);background:var(--tile);padding:0.8rem 1.2rem;border-radius:0.6rem;margin-bottom:2rem}
.art .post h3{border:0;padding:0;margin:0;font-size:1.35rem}
.related{margin-top:4.8rem}
.related h2{font-size:1.6rem;font-weight:700;color:var(--navy);margin-bottom:1.2rem}
/* contact form */
.form{display:flex;flex-direction:column;gap:2.4rem;margin-top:1.6rem}
.fld label{display:flex;align-items:center;gap:0.8rem;font-weight:700;font-size:1.4rem;color:var(--navy);margin-bottom:0.8rem}
.fld .req{font-size:1.05rem;font-weight:700;color:#fff;background:var(--pool-d);padding:0.1rem 0.6rem;border-radius:0.3rem;letter-spacing:.06em}
.fld .opt{font-size:1.05rem;font-weight:700;color:var(--sub);border:1px solid var(--rule);padding:0 0.6rem;border-radius:0.3rem}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld select,.fld textarea{width:100%;font:inherit;font-size:1.6rem;color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:0.6rem;padding:1.2rem 1.4rem}
.fld textarea{min-height:16rem;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--pool);outline-offset:0;border-color:var(--pool)}
.radios{display:flex;flex-wrap:wrap;gap:0.8rem 2rem;font-size:1.45rem}
.radios label{display:flex;align-items:center;gap:0.6rem;font-weight:500;margin:0;color:var(--ink)}
.fld .hint{font-size:1.2rem;color:var(--sub);margin-top:0.6rem}
.agree{font-size:1.35rem;display:flex;gap:0.8rem;align-items:flex-start}
.form .btn{align-self:flex-start;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:1.5rem}
.sent{padding:2.4rem 0;border-block:2px solid var(--navy)}
.sent b{display:block;font-size:1.8rem;color:var(--navy);margin-bottom:0.8rem}
.ways{display:flex;flex-direction:column;gap:2.4rem}
.way{padding-bottom:2.4rem;border-bottom:1px solid var(--rule)}
.way h2{font-size:1.6rem;font-weight:700;color:var(--navy);margin-bottom:0.6rem}
.way p{font-size:1.4rem;color:var(--sub);margin-bottom:1.4rem}
.way .telnum{font-family:var(--en);font-weight:500;font-size:3.6rem;line-height:1.1;color:var(--navy);letter-spacing:.03em;display:inline-block}
.way small{display:block;font-size:1.2rem;color:var(--sub);margin-top:0.4rem}
.cta-band{background:var(--navy);color:#fff;padding-block:4.8rem}
.cta-band p{font-size:1.45rem;line-height:1.9;margin-bottom:2rem}
.cta-band .btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.cta-band .btn{width:100%;justify-content:center;padding:1.7rem 0.8rem;font-size:1.3rem;letter-spacing:0;white-space:nowrap}
.cta-band .btn::after{display:none}

/* ===== to-100 pass ===== */
.skip{position:absolute;left:-999rem;top:0;z-index:100;background:var(--navy);color:#fff;padding:1rem 1.6rem}
.skip:focus{left:1rem;top:1rem}
.side-nav a[aria-current="page"]{color:var(--rope)}
.side-nav a[aria-current="page"]::before{content:"";width:0.6rem;height:0.6rem;border-radius:50%;background:var(--rope)}
.drawer a[aria-current="page"]{color:var(--aqua)}
.ftr nav a[aria-current="page"]{opacity:1;color:var(--aqua)}
.pick a{display:flex;align-items:baseline;gap:1.6rem;padding:1.6rem 0;font-weight:700;font-size:1.55rem;color:var(--navy)}
.pick a::after{content:"";margin-left:auto;align-self:center;width:1.6rem;height:0.7rem;flex-shrink:0;background:currentColor;clip-path:polygon(0 85%,80% 85%,62% 0,70% 0,100% 100%,0 100%)}
.pick li{display:block;padding:0}
.pick a:hover{color:var(--pool-d)}
/* designed thumbnails (no reused photos) */
.thumb{display:grid;place-items:center;aspect-ratio:4/3;border-radius:0.8rem;color:#fff;position:relative;overflow:hidden;background:var(--navy)}
.thumb svg{width:38%;height:auto;opacity:.95}
.thumb b{position:absolute;left:0.8rem;bottom:0.6rem;font-family:var(--en);font-weight:500;font-size:0.9rem;letter-spacing:.14em;opacity:.85}
.thumb.c1{background:var(--navy)}.thumb.c2{background:var(--pool-d)}.thumb.c3{background:#3E7F86}.thumb.c4{background:#6A5A45}
.post .thumb{width:11.2rem}
.thumb.lg{width:100%;aspect-ratio:16/9;margin-bottom:2.8rem}
.thumb.lg svg{width:18%}.thumb.lg b{font-size:1.2rem;left:1.4rem;bottom:1.2rem}
/* lesson flow */
.flow{list-style:none;margin:0;padding:0;counter-reset:f;border-top:2px solid var(--navy)}
.flow li{display:grid;grid-template-columns:4.4rem 1fr;gap:0.4rem 1.2rem;padding:2rem 0;border-bottom:1px solid var(--rule)}
.flow li::before{counter-increment:f;content:counter(f,decimal-leading-zero);grid-row:1/3;font-family:var(--en);font-weight:500;font-size:2.6rem;line-height:1;color:var(--pool)}
.flow b{font-size:1.6rem;color:var(--navy)}
.flow p{font-size:1.4rem;color:var(--sub);line-height:1.85}
/* typography polish */
.prose .big,.sum,.page-hd p,.hero-sub,.coach-lead,.about .msg{word-break:auto-phrase}
body{font-feature-settings:"palt" 0}

/* ===== WordPress content ===== */
.art .entry img{max-width:100%;height:auto;border-radius:0.8rem}
.art .entry ul,.art .entry ol{padding-left:2rem;font-size:1.5rem;line-height:2}
.art .entry a{color:var(--pool-d);text-decoration:underline}
.art .entry figure{margin:2.4rem 0}
.pager .page-numbers{min-width:3.6rem;height:3.6rem;display:grid;place-items:center;border-radius:0.6rem;color:var(--navy)}
.pager .page-numbers.current{background:var(--navy);color:#fff}
.pager .page-numbers.dots{color:var(--sub)}
.pager .prev,.pager .next{display:none}
.side-tel b a{color:inherit}
.wpcf7 .fld{margin:0}
.wpcf7-not-valid-tip{font-size:1.2rem;margin-top:0.4rem}
.wpcf7 form .wpcf7-response-output{margin:2rem 0 0;padding:1.2rem;border-radius:0.6rem;font-size:1.35rem}
.screen-reader-text{position:absolute;left:-999rem}

/* ===== ホームページ制作・制作実績 ===== */
.feats.long .fph{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0.8rem;margin:1.2rem 0 1.4rem;display:block}
.lead-ph img{height:auto}
.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem 1.4rem}
.work{display:flex;flex-direction:column;gap:0.8rem;color:var(--ink)}
.work .wph{display:block;border-radius:0.8rem;overflow:hidden;border:1px solid var(--rule);background:var(--white)}
.work .wph img,.work .wph .thumb{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:top;display:block}
.work h3{font-size:1.45rem;font-weight:700;color:var(--navy);line-height:1.5}
.work:hover h3{color:var(--pool-d)}
.wtags{display:flex;flex-wrap:wrap;gap:0.4rem;margin:0}
.wtags span{font-size:1.05rem;font-weight:700;color:var(--pool-d);background:var(--water);padding:0.2rem 0.7rem;border-radius:0.4rem;line-height:1.6}
.art .wtags{margin-bottom:1rem}
.art img.eye{border:1px solid var(--rule)}
.dl a.ext{color:var(--pool-d);text-decoration:underline;word-break:break-all}
@media (max-width:460px){.works{grid-template-columns:1fr}}
/* お問い合わせ：プライバシーポリシー */
.form .privacy{max-height:22rem;overflow-y:auto;margin:2.4rem 0 1.6rem;padding:1.6rem;background:var(--white);border:1px solid var(--rule);border-radius:0.8rem;font-size:1.25rem;line-height:1.85;color:var(--sub)}
.form .privacy p+p,.form .privacy ul{margin-top:1rem}
.form .privacy p span:not(.quicksand){font-weight:700;color:var(--navy)}
.form .privacy ul{list-style:none;padding:0}
.agree a{color:var(--pool-d);text-decoration:underline}

/* ===== 修正 v1.0.2 ===== */
/* プロフィール写真：中央に収める（右にはみ出さない） */
.profile-ph .main{display:block;height:auto;object-position:50% 30%}
.profile-ph .sub{right:0}
/* お問い合わせ：送信ボタン（iOS の標準スタイルを打ち消す） */
.wpcf7 input.wpcf7-submit{-webkit-appearance:none;appearance:none;display:inline-flex;justify-content:center;min-width:22rem;padding:1.6rem 3.2rem;background:var(--navy);color:#fff;border:0;border-radius:0.6rem;font-family:var(--sans);font-weight:700;font-size:1.5rem;letter-spacing:.08em;line-height:1.3;cursor:pointer;transition:background .2s,opacity .2s}
.wpcf7 input.wpcf7-submit:hover{background:var(--pool-d)}
.wpcf7 input.wpcf7-submit:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}
.wpcf7 input.wpcf7-submit:disabled{background:var(--navy);opacity:.35;cursor:not-allowed}
.wpcf7 .wpcf7-spinner{vertical-align:middle}
.agree input[type=checkbox]{width:1.8rem;height:1.8rem;accent-color:var(--navy)}
/* MV：暗いグラデーションを下側だけにして顔を明るく */
.hero-ph::after{background:linear-gradient(180deg,rgba(15,39,56,0) 0%,rgba(15,39,56,0) 58%,rgba(15,39,56,.35) 72%,rgba(15,39,56,.8) 86%,var(--navy) 97%)}
.hero h1,.hero-sub{text-shadow:0 1px 10px rgba(15,39,56,.75)}
/* ===== ハンバーガーメニュー：ボタン位置から水面の波紋のように広がって開く ===== */
.drawer.js{position:fixed;top:var(--dtop,6rem);left:0;right:0;bottom:0;margin-inline:auto;max-width:var(--col);overflow-y:auto;overscroll-behavior:contain;padding:2rem 2.4rem 12rem;
  --ox:calc(100% - 2.4rem);--oy:-3rem;
  clip-path:circle(0 at var(--ox) var(--oy));visibility:hidden;
  transition:clip-path .55s cubic-bezier(.55,0,.75,.3),visibility 0s linear .55s}
.drawer.js.is-open{clip-path:circle(150% at var(--ox) var(--oy));visibility:visible;
  transition:clip-path 1.1s cubic-bezier(.22,1,.36,1),visibility 0s}
@media (max-width:1000px){.drawer.js{max-width:none}}
/* 各メニュー：コースに飛び込むように左から順番にすべり込む */
.drawer.js a{position:relative;border-bottom:0;opacity:0;transform:translateX(-3.2rem);transition:opacity .25s,transform .25s}
.drawer.js.is-open a{opacity:1;transform:none;transition:opacity .6s ease calc(.28s + var(--i,0) * .07s),transform .8s cubic-bezier(.22,1,.36,1) calc(.28s + var(--i,0) * .07s)}
/* 区切り線＝コースロープ（黄・赤）が左から伸びる */
.drawer.js a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--rope) 0 1.4rem,var(--red) 1.4rem 1.8rem,var(--rope) 1.8rem 3.2rem,rgba(255,255,255,.9) 3.2rem 3.6rem);
  opacity:.75;transform:scaleX(0);transform-origin:left;transition:transform .2s}
.drawer.js.is-open a::after{transform:scaleX(1);transition:transform 1s cubic-bezier(.22,1,.36,1) calc(.42s + var(--i,0) * .07s)}
.drawer.js a:hover,.drawer.js a:focus-visible{color:var(--aqua)}
/* 下でゆっくり揺れる水面 */
.drawer.js::after{content:"";position:fixed;left:0;right:0;bottom:0;margin-inline:auto;max-width:inherit;height:9rem;pointer-events:none;opacity:0;transition:opacity .3s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q50 10 100 30 T200 30 T300 30 T400 30 V60 H0Z' fill='%2338AFCB' fill-opacity='.18'/%3E%3Cpath d='M0 38 Q50 22 100 38 T200 38 T300 38 T400 38 V60 H0Z' fill='%2338AFCB' fill-opacity='.22'/%3E%3C/svg%3E") repeat-x 0 100%/40rem 100%;
  animation:mlabo-wave 9s linear infinite}
.drawer.js.is-open::after{opacity:1;transition:opacity 1s ease .6s}
@keyframes mlabo-wave{to{background-position:40rem 100%}}
/* MENU ボタン → × に変形 */
.menu-btn i{transition:transform .5s cubic-bezier(.22,1,.36,1),width .5s cubic-bezier(.22,1,.36,1)}
.menu-btn.is-open i{width:2.4rem}
.menu-btn.is-open i:first-of-type{transform:translateY(0.35rem) rotate(25deg)}
.menu-btn.is-open i+i{transform:translateY(-0.35rem) rotate(-25deg)}
html.menu-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.drawer.js,.drawer.js.is-open{transition:none}.drawer.js a,.drawer.js a::after{transition:none!important}.drawer.js::after{animation:none}}
/* プロフィール写真：料理が写らないよう切り抜いた横長写真 */
.profile-ph .main{aspect-ratio:1262/920;object-position:50% 0}
.drawer.js a{padding:1.2rem 0}
@media (max-width:1000px){.drawer.js::after{bottom:6.2rem}}

/* ボタン2つ横並び：長い文字は2行に折り返し、矢印との間と左右の余白を確保 */
.btn2{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.btn2 .btn{padding:1.4rem 1.4rem 1.4rem 1.6rem;font-size:1.3rem;gap:1rem;letter-spacing:.02em;white-space:normal;line-height:1.45;text-align:left;min-height:5.6rem}
/* メニューの区切り線：コースロープ柄をやめて細い線に */
.drawer.js a::after{height:1px;border-radius:0;background:rgba(255,255,255,.18);opacity:1}
/* ボタン内の改行位置をことばの切れ目にそろえる */
.btn .nw{display:inline-block}
.btn .lb{min-width:0}
@media (max-width:360px){.btn2 .btn{padding:1.3rem 1rem 1.3rem 1.2rem;gap:0.6rem}.btn2 .btn::after{width:1.3rem}}
/* WordPress が出力する画像の height 属性で縦長に伸びないように（aspect-ratio を効かせる） */
.work .wph img,.art img.eye,.feats.long .fph,.lead-ph img,.gallery img,.profile-ph img{height:auto}
.lead-ph img.top{aspect-ratio:1262/920;object-position:50% 0}
/* ボタンの文字サイズを全ページで統一 */
.btn,.btn2 .btn,.cta-band .btn,.contact .btns .btn,.side-cta .btn,.form .btn,.wpcf7 input.wpcf7-submit{font-size:1.3rem;letter-spacing:.04em;line-height:1.45}
.cta-band .btn,.contact .btns .btn{white-space:normal;text-align:center}
/* 日本語は <wbr>（文節）の位置でだけ改行する */
main{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
/* ブログ一覧のサムネイル（記事の画像） */
.post img.ph{width:11.2rem;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:0.8rem;display:block}
main :is(h1,h2,h3,h4,.prose .big,.sum,.page-hd p,.hero-sub,.coach-lead,.about .msg){word-break:keep-all}