/* トップページ（home.html）の見た目。2026-11-14 に home.html から切り出し（ページを軽くし、本文を先頭近くに置くため） */
:root{
--honey:#f0a830; --honey-deep:#d6851a; --amber:#f7bd57;
--cream:#fff9f0; --cream-2:#fdeecf;
--terrace:#6f4f30; --terrace-soft:#a8855f;
--twilight-1:#6a5891; --twilight-2:#3c2f59;
--ink:#3a2f25; --line:#efdcbb;
--shadow:0 10px 34px rgba(124,90,58,.16);
--shadow-sm:0 3px 12px rgba(124,90,58,.14);
--radius:20px;
--font-round:"Zen Maru Gothic","Hiragino Maru Gothic ProN","HGMaruGothicMPRO","Yu Gothic UI",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
margin:0;color:var(--ink);
font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
background:var(--cream);line-height:1.8;
/* 日本語を文節単位で折り返す（対応ブラウザのみ／非対応は既定動作にフォールバック） */
word-break:auto-phrase;
line-break:strict;
}
/* 途中で切りたくない語句を囲むユーティリティ */
.nb{white-space:nowrap;}
/* 見出しの語の途中で改行させない（.nb と違い、狭い画面でも解除しない。短い語句にだけ使う） */
.nobr{white-space:nowrap;}
/* 翻訳文は日本語より長くなることがあるため、極端に狭い画面では折り返し禁止を解除して横はみ出しを防ぐ */
@media (max-width:360px){ .nb{white-space:normal;} }
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px;}
section{scroll-margin-top:76px;}
/* セクション内の見出しへ直接飛ぶリンク（例: 会員特典）もヘッダーに隠れないようにする */
#towarun-perks{scroll-margin-top:86px;}
h2.h2{font-family:var(--font-round);font-size:clamp(22px,4vw,30px);font-weight:900;color:var(--terrace);text-align:center;margin:0 0 8px;letter-spacing:.02em;text-wrap:balance;}
.lead{text-align:center;color:var(--terrace-soft);font-size:14.5px;margin:0 0 40px;}
/* 見出しの上の小さな英字ラベルと、下の肉球あしらい */
.h2-eyebrow{display:block;text-align:center;font-family:var(--font-round);font-size:11.5px;font-weight:700;letter-spacing:.32em;color:var(--honey-deep);margin:0 0 6px;text-indent:.32em;}
.h2-paw{display:block;text-align:center;font-size:13px;letter-spacing:.5em;text-indent:.5em;margin:6px 0 10px;opacity:.75;user-select:none;}
.about .h2-eyebrow,.about .h2-paw,.h2-eyebrow.left,.h2-paw.left{text-align:left;text-indent:0;}
h3{font-family:var(--font-round);}
.philosophy,.ptag,.fab-cap,#mitsuFab .fab-label,.cta-eyebrow,.mem-h3,.notice .badge,.logo .lt{font-family:var(--font-round);}
.skip{position:absolute;left:-999px;top:0;background:var(--honey-deep);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:100;}
/* 見出しの階層はSEO/読み上げのために残しつつ、視覚的には表示しない */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip:focus{left:0;}
/* ===== First visit: reuse the existing reviews, prices, FAQ and consultation routes ===== */
.visit-guide{padding:28px 0;background:var(--cream);border-bottom:1px solid var(--line);}
.visit-guide h2{font-size:21px;margin:0 0 16px;color:var(--terrace);}
.visit-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;list-style:none;padding:0;margin:0;counter-reset:visit;}
.visit-steps>li{counter-increment:visit;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;min-width:0;}
.visit-steps h3{font-size:16px;margin:0 0 6px;color:var(--terrace);}
.visit-steps h3::before{content:counter(visit,decimal-leading-zero) " / ";font-size:12px;}
.visit-steps p{font-size:13px;line-height:1.7;margin:0 0 6px;color:var(--terrace);}
.visit-links{display:flex;flex-wrap:wrap;gap:0 16px;}
.visit-guide a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:700;color:var(--terrace);text-underline-offset:4px;}
.visit-guide a:focus-visible{outline:3px solid var(--terrace);outline-offset:3px;border-radius:3px;}
#first-visit,#price{scroll-margin-top:120px;}
@media(max-width:700px){.visit-steps{grid-template-columns:1fr;gap:10px;}.visit-steps>li{padding:12px 16px;}}
/* ===== Header ===== */
header.site{
position:sticky;top:0;z-index:40;
background:linear-gradient(180deg,rgba(255,250,242,.96),rgba(255,250,242,.86));
backdrop-filter:saturate(1.3) blur(10px);
border-bottom:1px solid var(--line);
}
.hbar{max-width:1220px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:12px;}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0;}
.logo .brand-mark{width:42px;height:42px;flex:0 0 42px;object-fit:contain;}
.logo .lt{font-size:17px;font-weight:800;color:var(--terrace);letter-spacing:.03em;line-height:1.1;}
.logo .lt span{display:block;font-size:10px;font-weight:700;color:var(--terrace-soft);letter-spacing:.08em;}
nav.gnav{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap;}
nav.gnav a{font-family:var(--font-round);font-size:13px;font-weight:700;color:var(--terrace);text-decoration:none;padding:8px 6px;border-radius:999px;white-space:nowrap;transition:.15s;}
nav.gnav a:hover{background:var(--cream-2);}
.cta-btn{
display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
background:linear-gradient(180deg,var(--amber),var(--honey-deep));color:#fff!important;
font-family:var(--font-round);font-size:13.5px;font-weight:700;border-radius:999px;padding:10px 18px;text-decoration:none;
box-shadow:0 4px 14px rgba(217,138,31,.42);transition:.15s;border:none;cursor:pointer;
}
.cta-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(217,138,31,.5);}
.cta-btn.ghost{background:#fff;color:var(--honey-deep)!important;border:1.5px solid var(--honey);box-shadow:var(--shadow-sm);}
.ig-mini{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--cream-2);border:1px solid var(--line);text-decoration:none;font-size:16px;transition:.15s;}
.ig-mini:hover{background:#ffe1a9;border-color:var(--honey);transform:translateY(-1px);}
/* 言語切替 */
.lang-sel{
flex:0 0 auto;appearance:none;-webkit-appearance:none;cursor:pointer;
font-family:var(--font-round);font-size:12.5px;font-weight:700;color:var(--terrace);
background:var(--cream-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236f4f30'/%3E%3C/svg%3E") no-repeat right 10px center;
border:1px solid var(--line);border-radius:999px;padding:8px 26px 8px 12px;
}
.lang-sel:hover{background-color:#ffe1a9;border-color:var(--honey);}
@media (max-width:1150px){ nav.gnav a{display:none;} }
/* 1行に収めるため、右隣の📷アイコンと重複する「Instagram」の文字リンクはPCでは省く（スマホの横スクロールのメニューには残す） */
nav.gnav a[href="#instagram"]{display:none;}
/* スマホ用ミニナビ：横にすっと流せるピル型 */
.mnav{display:none;}
@media (max-width:1150px){
.mnav{display:flex;gap:8px;overflow-x:auto;padding:2px 14px 9px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.mnav::-webkit-scrollbar{display:none;}
.mnav a{flex:0 0 auto;font-family:var(--font-round);font-size:12px;font-weight:700;color:var(--terrace);
background:var(--cream-2);border:1px solid var(--line);border-radius:999px;padding:6px 13px;text-decoration:none;}
.mnav a:active{background:#ffe1a9;}
}
/* 狭い画面ではヘッダーが詰まって重なるため、要素を段階的に削る */
@media (max-width:700px){
.hbar{gap:10px;padding:9px 14px;}
.logo{flex:0 1 auto;overflow:hidden;}
.logo .lt{font-size:16px;white-space:nowrap;}
.logo .lt span{display:none;}
}
@media (max-width:560px){
.ig-mini{display:none;}
.logo .brand-mark{width:36px;height:36px;flex:0 0 36px;}
.hbar .cta-btn{font-size:13px;padding:9px 14px;white-space:nowrap;}
}
@media (max-width:380px){ .logo .lt{font-size:15px;} }
/* ===== Hero ===== */
.hero{
position:relative;min-height:min(640px,92vh);display:flex;align-items:flex-end;
background:linear-gradient(180deg,rgba(30,20,10,.22) 0,rgba(30,20,10,.06) 30%,rgba(28,18,9,.20) 66%,rgba(24,15,7,.52) 100%),
url('/assets/photo-front.jpg') center/cover no-repeat;
color:#fff;
}
/* 写真の明るさは残したいので、全体を暗くせず文字が乗る側だけを局所的に落とす */
.hero::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(102deg,rgba(22,13,6,.70) 0,rgba(22,13,6,.56) 28%,rgba(22,13,6,.32) 44%,rgba(22,13,6,.10) 58%,transparent 72%);
}
.hero-in{position:relative;width:100%;padding:64px 20px 40px;max-width:1080px;margin:0 auto;}
/* 建物の看板と重なる位置に出ることがあるため、透け過ぎない不透明な帯にして
背後が何であっても文字が確実に読めるようにする */
.hero-eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgba(28,18,9,.72);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);color:#fff;font-size:12px;font-weight:700;letter-spacing:.1em;padding:6px 14px;border-radius:999px;margin-bottom:18px;box-shadow:0 2px 10px rgba(0,0,0,.25);}
.hero h1{font-size:clamp(34px,7vw,58px);font-weight:800;margin:0 0 10px;letter-spacing:.01em;text-shadow:0 4px 20px rgba(0,0,0,.35);}
.hero h1 small{display:block;font-size:clamp(13px,2vw,16px);font-weight:700;letter-spacing:.18em;color:#ffe6b0;margin-bottom:8px;}
.hero-tagline{font-family:var(--font-round);font-size:clamp(14px,2vw,17px);font-weight:700;letter-spacing:.14em;color:#ffe6b0;margin:0 0 10px;text-shadow:0 1px 3px rgba(0,0,0,.6),0 3px 14px rgba(0,0,0,.45);}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(26px,4vw,52px);display:block;}
/* ページを開いたとき、ヒーローの要素がふわっと順に現れる */
@keyframes heroIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.hero-in>*{animation:heroIn .7s ease both;}
.hero-in>*:nth-child(2){animation-delay:.12s;}
.hero-in>*:nth-child(3){animation-delay:.22s;}
.hero-in>*:nth-child(4){animation-delay:.32s;}
.hero-in>*:nth-child(5){animation-delay:.42s;}
.hero-in>*:nth-child(6){animation-delay:.52s;}
@media (prefers-reduced-motion:reduce){ .hero-in>*{animation:none;} }
.hero p.sub{font-size:clamp(15px,2.2vw,18px);max-width:560px;margin:0 0 26px;color:#fff5e6;text-shadow:0 1px 3px rgba(0,0,0,.65),0 3px 16px rgba(0,0,0,.5);}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:26px;}
.hero-ctas .cta-btn{font-size:15px;padding:13px 24px;}
.cta-stack{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.cta-eyebrow{padding-left:6px;font-size:11.5px;font-weight:800;letter-spacing:.09em;color:#ffe6b0;text-shadow:0 2px 10px rgba(0,0,0,.5);}
.hero-info{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:#fff2dc;}
.hero-info span{display:inline-flex;align-items:center;gap:6px;}
/* ===== Notice ===== */
.notice{background:linear-gradient(90deg,#fff3da,#ffe7bd);border-bottom:1px solid var(--line);}
.notice .wrap{padding:11px 20px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center;}
.notice strong{color:var(--honey-deep);}
.notice .badge{background:var(--honey-deep);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:3px 10px;letter-spacing:.04em;}
.notice p{margin:0;font-size:13.5px;color:var(--terrace);}
details.notice-more{max-width:1080px;margin:0 auto;padding:0 20px 10px;}
details.notice-more summary{cursor:pointer;font-size:12.5px;color:var(--terrace-soft);text-align:center;list-style:none;}
details.notice-more[open] summary{margin-bottom:6px;}
details.notice-more ul{margin:0;padding:0 0 4px;list-style:none;font-size:12.5px;color:var(--terrace-soft);text-align:center;}
details.notice-more li{margin:2px 0;}
/* ===== About ===== */
.about{padding:64px 0 20px;}
.about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center;}
.about-photo{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.about-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;}
.about h2.h2{text-align:left;margin-bottom:14px;}
.philosophy{font-size:20px;font-weight:800;color:var(--honey-deep);line-height:1.6;margin:0 0 16px;}
.about p{font-size:14.5px;color:var(--ink);margin:0 0 12px;}
.about-story{background:#fffdf9;border:1px solid var(--line);border-left:4px solid var(--honey);border-radius:14px;padding:16px 18px;font-size:13.5px;color:var(--terrace-soft);margin-top:16px;}
.about-story b{color:var(--terrace);}
/* 経営理念（事業理念・ミッション・ビジョン）。名前の由来と同じカード調にして、
ブランドストーリーの一部として自然に読める並びにする。 */
.about-purpose{margin-top:16px;}
.about-purpose > .ap-h{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--honey-deep);margin-bottom:8px;}
.ap-grid{display:grid;gap:12px;}
.ap-item{background:#fffdf9;border:1px solid var(--line);border-left:4px solid var(--twilight-2);border-radius:14px;padding:14px 18px;}
.ap-item b{display:block;font-size:13.5px;color:var(--terrace);margin-bottom:4px;}
.ap-item p{font-size:13.5px;color:var(--terrace-soft);margin:0;}
@media (max-width:760px){ .about-grid{grid-template-columns:1fr;} .about h2.h2{text-align:center;} }
/* ===== Services ===== */
.services{padding:64px 0;}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;}
.svc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease;}
.svc-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.svc-media img{transition:transform .45s ease;}
.svc-card:hover .svc-media img{transform:scale(1.05);}
.svc-card:hover .svc-media.logo img{transform:none;}
.svc-media{aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--cream-2),#ffe3b3);}
.svc-media img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;}
/* 縦長の写真は16/10に切り抜くと中央寄せでは人物の頭が切れてしまうので、
上寄りで切り抜く（動物病院の受付写真など）。拡大表示では元の全体が見える。 */
.svc-media img.crop-upper{object-position:center 28%;}
.svc-media.icon{display:flex;align-items:center;justify-content:center;font-size:52px;}
.svc-media.logo{display:flex;align-items:center;justify-content:center;}
.svc-media.logo img{width:auto;height:82%;object-fit:contain;cursor:default;}
.svc-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1;}
.svc-body h3{margin:0;font-size:17px;font-weight:800;color:var(--terrace);display:flex;align-items:center;gap:8px;}
.svc-tags{display:flex;gap:6px;flex-wrap:wrap;}
/* プールの今シーズンの案内。目に留まるが、警告のようには見せない */
.pool-notice{margin:.7rem 0 0;padding:.55rem .8rem;border-radius:9px;
background:#fff6e3;border:1px solid #f0d9ae;color:#7a5a2e;
font-size:.85rem;line-height:1.6;}
.pool-notice[hidden]{display:none;}
.svc-tags span{font-size:11px;font-weight:700;color:var(--terrace-soft);background:var(--cream-2);border:1px solid var(--line);border-radius:999px;padding:3px 9px;}
.svc-body p{margin:0;font-size:13.5px;color:var(--ink);flex:1;}
.svc-links{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px;}
.ptag{
display:inline-flex;align-items:center;gap:5px;cursor:pointer;
background:linear-gradient(180deg,#fff6e3,#ffe6bd);border:1px solid #f1cf8d;color:var(--honey-deep);
font-size:12.5px;font-weight:800;border-radius:999px;padding:7px 13px;text-decoration:none;box-shadow:var(--shadow-sm);transition:.14s;
}
.ptag:hover{background:#ffe1a9;border-color:var(--honey);transform:translateY(-1px);}
.ptag.alt{background:#eef6ff;border-color:#bcd9f5;color:#2f6fb0;}
.ptag.alt:hover{background:#dcedff;}
/* 公式LINEへの導線。料金表・写真のボタンと役割が違うので色で分ける */
.ptag.line{background:#eaf9ee;border-color:#a9e2ba;color:#127a35;}
.ptag.line:hover{background:#d8f4e1;border-color:#06c755;}
details.more-price{margin-top:2px;}
details.more-price summary{font-size:12px;font-weight:700;color:var(--terrace-soft);cursor:pointer;}
details.more-price .ptag{margin:6px 6px 0 0;}
/* 一時預かりの料金パネル。開閉のつまみは他の料金ボタンと同じ見た目にする */
details.dropoff{margin-top:7px;}
details.dropoff > summary{list-style:none;}
details.dropoff > summary::-webkit-details-marker{display:none;}
details.dropoff[open] > summary{background:#ffe1a9;border-color:var(--honey);}
.pricebox{
margin-top:10px;background:var(--cream);border:1px solid var(--line);
border-radius:14px;padding:14px 15px;
}
.pricebox dl{margin:0 0 10px;display:flex;flex-direction:column;gap:0;}
.pricebox dl > div{
display:flex;justify-content:space-between;align-items:baseline;gap:12px;
padding:7px 0;border-bottom:1px dashed var(--line);
}
.pricebox dl > div:last-child{border-bottom:0;}
.pricebox dt{font-size:12.5px;font-weight:700;color:var(--terrace);}
.pricebox dd{
margin:0;font-size:14px;font-weight:800;color:var(--honey-deep);
white-space:nowrap;font-variant-numeric:tabular-nums;
}
.pricebox ul{margin:0 0 12px;padding-left:1.1em;}
.pricebox li{font-size:12px;line-height:1.85;color:var(--terrace-soft);margin-bottom:3px;}
.pricebox li:last-child{margin-bottom:0;}
/* ===== Facility ===== */
/* ===== Gallery ===== */
.gallery{padding:64px 0;}
/* ギャラリーは白フチのスナップ写真風。少し傾けて、触れるとまっすぐに */
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.g-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;cursor:zoom-in;
border:5px solid #fff;box-shadow:0 4px 14px rgba(124,90,58,.22);transition:transform .3s ease,box-shadow .3s ease;}
.g-grid img:nth-child(3n+1){transform:rotate(-1.6deg);}
.g-grid img:nth-child(3n+2){transform:rotate(1.3deg);}
.g-grid img:nth-child(4n+3){transform:rotate(-.8deg);}
.g-grid img:hover{transform:rotate(0) scale(1.05);box-shadow:0 10px 26px rgba(124,90,58,.3);z-index:2;position:relative;}
@media (prefers-reduced-motion:reduce){ .g-grid img{transform:none;} }
/* 一覧に出すのは6枚まで（スマホでの縦スクロールを短く）。残りは拡大ビューアで見る */
.g-grid img:nth-child(n+7){display:none;}
.g-more{
display:flex;width:fit-content;align-items:center;gap:6px;margin:22px auto 0;cursor:pointer;
font-family:var(--font-round);font-size:13.5px;font-weight:700;color:var(--terrace);
background:#fff;border:1.5px solid var(--honey);border-radius:999px;padding:11px 22px;
box-shadow:var(--shadow-sm);transition:.15s;
}
.g-more:hover{background:#ffe1a9;transform:translateY(-1px);box-shadow:var(--shadow);}
.g-count{color:var(--honey-deep);}
.v-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:26px;align-items:start;}
.v-card{border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);background:#000;}
/* 動画は縦向き（9:16）が既定。全部を16/9に収めると縦動画が左右の黒帯
だらけになってしまうため、カードごとに実際の比率を持たせ、高さが
そろわなくてもよいよう上寄せ（align-items:start）で並べる。
横向きの動画を追加するときは .v-card に wide を付ける。 */
.v-card video{width:100%;height:auto;display:block;background:#000;aspect-ratio:9/16;}
.v-card.wide video{aspect-ratio:16/9;}
.v-cap{background:#fff;padding:8px 12px;font-size:12.5px;font-weight:700;color:var(--terrace);}
/* ===== Instagram ===== */
.instagram{padding:64px 0;text-align:center;background:linear-gradient(180deg,#fff9f0,#fff6e8);}
.ig-embed{max-width:760px;min-height:220px;margin:0 auto 26px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);}
.ig-embed .lightwidget-widget{min-height:220px;}
/* ===== Membership ===== */
/* トワるん：会員資料の配色に合わせる（クリーム地／オレンジ・ティール差し色） */
.membership{
--tw-cream:#faf6da; --tw-blush:#fdf1e1; --tw-ink:#363344;
--tw-orange:#e27400; --tw-amber:#f1a633; --tw-teal:#0097b1; --tw-line:rgba(54,51,68,.16);
padding:70px 0;color:var(--tw-ink);
background:linear-gradient(180deg,var(--tw-blush) 0,var(--tw-cream) 200px,var(--tw-cream) 100%);
border-top:1px solid rgba(226,116,0,.22);border-bottom:1px solid rgba(226,116,0,.22);
}
.membership .ptag.alt{background:#fffdf0;border-color:rgba(54,51,68,.28);color:var(--tw-ink);}
.membership .ptag.alt:hover{background:#f6eec8;}
.membership h2.h2{color:var(--tw-ink);}
.membership .lead{color:#8a7550;font-weight:700;}
.towarun-badge{display:block;width:150px;height:auto;margin:0 auto 12px;filter:drop-shadow(0 6px 16px rgba(180,120,40,.22));}
.mem-grid{display:grid;grid-template-columns:minmax(600px,1.4fr) 1fr;gap:32px;align-items:start;}
.mem-grid>*{min-width:0;}
.mem-h3{margin:0 0 12px;font-size:15px;font-weight:800;color:var(--tw-orange);letter-spacing:.04em;}
.rank-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;}
.scroll-hint{display:none;margin:8px 0 0;font-size:11px;color:#8a7550;text-align:center;}
.rank-table{width:100%;min-width:600px;border-collapse:collapse;background:#fffdf0;border:1px solid var(--tw-line);border-radius:14px;overflow:hidden;font-size:12.5px;}
.rank-table th,.rank-table td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--tw-line);vertical-align:middle;}
.rank-table td+td{border-left:1px solid var(--tw-line);}
.rank-table th{background:#f6eec8;color:var(--tw-ink);font-weight:800;font-size:12px;white-space:nowrap;}
.rank-table td{color:#4a4436;}
.rank-table td b{color:var(--tw-ink);}
.rank-table .rk,.rank-table .fee,.rank-table .yr{white-space:nowrap;}
.opt-row span{white-space:nowrap;}
.rank-table small{color:#7d745e;font-size:11.5px;}
.rank-table sup{color:var(--tw-orange);font-size:9.5px;}
.rank-table tr:last-child td{border-bottom:none;}
.perk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.perk-list li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--tw-ink);background:#fffdf0;border:1px solid var(--tw-line);border-radius:10px;padding:9px 12px;}
.perk-list .pn{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,var(--tw-amber),var(--tw-orange));color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.mem-option{margin-top:16px;background:#fffdf0;border:1.5px solid rgba(54,51,68,.32);border-radius:12px;padding:14px;}
.mem-option>b{display:block;font-size:13.5px;margin-bottom:9px;color:var(--tw-ink);}
.mem-option sup{color:var(--tw-orange);font-size:9.5px;}
.opt-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font-size:13px;padding:5px 0;border-bottom:1px dashed var(--tw-line);}
.opt-row:last-of-type{border-bottom:none;}
.opt-note{margin:9px 0 0;font-size:11.5px;line-height:1.7;color:#7d745e;}
.mem-notes{list-style:none;margin:14px 0 0;padding:0;font-size:11.5px;line-height:1.9;color:var(--tw-orange);}
.mem-terms{margin-top:28px;background:#fffdf0;border:1px solid var(--tw-line);border-left:4px solid var(--tw-teal);border-radius:12px;padding:18px 20px;}
.mem-terms>b{display:block;font-size:14px;color:var(--tw-teal);margin-bottom:10px;}
.mem-terms ul{margin:0;padding-left:18px;font-size:12.5px;line-height:1.95;color:#4a4436;}
.mem-terms strong{color:var(--tw-orange);}
.mem-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;}
/* ===== 料金シミュレーション =====
入会を迷っている方に「自分の場合いくらお得か」がひと目で伝わるよう、
店頭でお配りしている資料をスライドのまま並べる。クリックで拡大ビューアが開き、
そのまま前後に送れる（data-lbgroup でひとまとまりとして扱う）。 */
.sim{margin-top:32px;}
.sim-lead{margin:0 0 14px;font-size:12.5px;line-height:1.85;color:#7d745e;}
.sim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px;}
.sim-card{margin:0;background:#fffdf0;border:1px solid var(--tw-line);border-radius:12px;overflow:hidden;box-shadow:0 3px 12px rgba(124,90,58,.12);}
.sim-card img{display:block;width:100%;aspect-ratio:842/596;object-fit:cover;background:#f6eec8;cursor:zoom-in;}
.sim-card figcaption{padding:8px 11px 10px;font-size:12px;font-weight:700;line-height:1.55;color:var(--tw-ink);}
@media (hover:hover){
.sim-card{transition:transform .2s ease,box-shadow .2s ease;}
.sim-card:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(124,90,58,.24);}
}
@media (prefers-reduced-motion:reduce){ .sim-card{transition:none;} .sim-card:hover{transform:none;} }
/* 既存のトワるん会員様向けの資料は会費が異なるため、たたんで別枠にする */
.sim-old{margin-top:18px;background:#fffdf0;border:1px solid var(--tw-line);border-left:4px solid var(--tw-teal);border-radius:12px;padding:0 16px;}
.sim-old>summary{cursor:pointer;list-style:none;padding:13px 0;font-size:13px;font-weight:800;color:var(--tw-teal);}
.sim-old>summary::-webkit-details-marker{display:none;}
.sim-old>summary::before{content:"▸ ";}
.sim-old[open]>summary::before{content:"▾ ";}
.sim-old>summary:focus-visible{outline:3px solid var(--tw-orange);outline-offset:3px;border-radius:6px;}
.sim-old .sim-lead{margin-top:2px;}
.sim-old .sim-grid{margin-bottom:16px;}
/* スマホでは9枚を縦に並べると延々とスクロールすることになるので、
2枚ずつの一覧にして「自分はどれか」を選んでもらう */
@media (max-width:640px){
.sim-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;}
.sim-card figcaption{padding:7px 8px 9px;font-size:11px;}
}
/* 表が窮屈になる幅では2カラムをやめて縦積みにする */
@media (max-width:1000px){ .mem-grid{grid-template-columns:1fr;} }
@media (max-width:760px){
.rank-table{font-size:11.5px;min-width:560px;}
.rank-table th,.rank-table td{padding:7px 8px;}
.scroll-hint{display:block;}
}
/* ===== サービス紹介動画カード（縦型ショート） =====
他のカードは16/10の横長サムネイルだが、この動画は縦型のため、
黒帯だらけにならないよう縦のプレーヤーを中央に置く。
カードが極端に高くならないよう幅で高さを抑えている。 */
.svc-media.movie{aspect-ratio:auto;display:flex;align-items:center;justify-content:center;background:#0d0b08;padding:14px 0;}
/* 動画の枠。ポスターを敷き、その上に再生が確認できたときだけ動画を重ねる */
.yt-slot{position:relative;width:min(200px,60%);aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#0d0b08;}
/* プレーヤーには触れられないようにする。触るとYouTubeが操作ボタンを出すため。
クリックは下のポスター（YouTubeへのリンク）が受け取る。 */
.yt-slot iframe{
position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
pointer-events:none;opacity:0;transition:opacity .45s ease;
}
.yt-slot.is-live iframe{opacity:1;} /* 再生が始まったと確認できたときだけ見せる */
.yt-poster{
position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
text-decoration:none;background:linear-gradient(160deg,#3a2a18,#0d0b08);color:#f3d59a;
font-size:12.5px;font-weight:700;line-height:1.7;text-align:center;padding:14px;
}
/* .svc-media img（100%表示）に負けないよう、クラスを2つ重ねて指定する */
.yt-poster .yt-mark{width:56px;height:56px;object-fit:contain;opacity:.92;cursor:inherit;}
.yt-play{
display:flex;align-items:center;justify-content:center;
width:46px;height:46px;border-radius:50%;font-size:16px;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;
padding-left:3px;
}
.yt-poster:hover .yt-play{background:rgba(255,255,255,.24);}
.yt-poster:focus-visible{outline:3px solid var(--honey);outline-offset:3px;}
.yt-cap{font-family:var(--font-round);}
@media (prefers-reduced-motion: reduce){ .yt-slot iframe{transition:none;} }
/* ===== Access ===== */
.access{padding:64px 0;}
.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.acc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px;box-shadow:var(--shadow-sm);}
.acc-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px;}
.acc-row:last-child{border-bottom:none;}
.acc-row b{flex:0 0 88px;color:var(--terrace);}
.acc-row a{color:var(--honey-deep);font-weight:700;text-decoration:none;}
.acc-row a:hover{text-decoration:underline;}
.map-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;background:linear-gradient(160deg,#fff6e3,#ffe7bd);border:1px solid var(--line);border-radius:var(--radius);padding:36px 22px;text-decoration:none;box-shadow:var(--shadow-sm);transition:.15s;}
.map-link:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.map-link .pin{font-size:38px;}
.map-link b{color:var(--terrace);font-size:15px;}
.map-link span{font-size:12.5px;color:var(--terrace-soft);}
@media (max-width:760px){ .acc-grid{grid-template-columns:1fr;} }
/* ===== Final CTA ===== */
/* 締めのCTAは「夕暮れのはちみつ色」のグラデーションで、フッターへ波で沈む */
/* ===== よくある質問 =====
検索エンジンとAI検索が「質問と答えの対」を拾いやすいよう、
ページに見える形で置く（構造化データだけ置くのはガイドライン違反）。 */
.faq{padding:70px 0;background:var(--cream-2);border-top:1px solid var(--line);}
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;}
.faq-item summary{
cursor:pointer;list-style:none;display:flex;align-items:flex-start;gap:12px;
padding:16px 18px;font-family:var(--font-round);font-weight:700;font-size:15px;color:var(--terrace);line-height:1.6;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{content:"Q";flex:0 0 26px;width:26px;height:26px;border-radius:50%;
background:linear-gradient(135deg,var(--honey),var(--honey-deep));color:#fff;font-size:14px;font-weight:800;
display:flex;align-items:center;justify-content:center;margin-top:1px;}
.faq-item summary:focus-visible{outline:3px solid var(--honey-deep);outline-offset:-3px;}
.faq-item[open] summary{border-bottom:1px dashed var(--line);}
.faq-item .a{display:flex;gap:12px;padding:14px 18px 16px;font-size:14px;line-height:1.9;color:#5b4c39;}
.faq-item .a::before{content:"A";flex:0 0 26px;width:26px;height:26px;border-radius:50%;
background:#fff;border:2px solid var(--honey);color:var(--honey-deep);font-size:14px;font-weight:800;
display:flex;align-items:center;justify-content:center;margin-top:2px;}
/* ===== お預かり中の一日（タイムライン） =====
朝→夜の時間の流れを、縦のレール1本の色で表す。
上は朝の光、下はトワテラの名前の由来でもある夕暮れ〜夜の色へ。 */
/* コラム：主張しすぎない小さな案内。背景は白、カードは横並び（スマホは縦） */
.colnote{padding:48px 0 52px;background:#fff;border-top:1px solid var(--line);text-align:center;}
.colnote .lead{margin-bottom:22px;}
.colnote-list{list-style:none;margin:0 auto 18px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:960px;text-align:left;}
.colnote-list a{display:flex;align-items:center;gap:12px;height:100%;padding:10px 12px;background:var(--cream);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:700;line-height:1.55;transition:background .15s;}
.colnote-list a:hover{background:var(--cream-2);}
.colnote-list img{width:56px;height:56px;flex:none;border-radius:10px;object-fit:cover;}
.colnote-more{font-family:var(--font-round);font-size:13.5px;font-weight:700;color:var(--honey-deep);text-decoration:none;border-bottom:1px solid currentColor;}
@media (max-width:760px){ .colnote-list{grid-template-columns:1fr;} }
.hday{padding:70px 0;background:linear-gradient(180deg,var(--cream) 0%,#fff3dd 100%);border-top:1px solid var(--line);}
.hd-line{max-width:700px;margin:34px auto 0;padding:0;list-style:none;position:relative;}
.hd-line::before{
content:"";position:absolute;left:83px;top:20px;bottom:20px;width:3px;border-radius:3px;
background:linear-gradient(180deg,#ffe0a1 0%,var(--amber) 26%,var(--honey) 52%,#c98a5a 76%,var(--twilight-1) 100%);
}
.hd-step{position:relative;display:flex;align-items:flex-start;gap:16px;padding-bottom:20px;}
.hd-step:last-child{padding-bottom:0;}
.hd-time{
/* 時刻の文字幅で列幅が変わるとドットとレールがずれるため、幅を固定する */
flex:0 0 54px;width:54px;text-align:right;padding-top:13px;
font-family:var(--font-round);font-weight:800;font-size:15px;color:var(--honey-deep);
font-variant-numeric:tabular-nums;
}
.hd-dot{
position:relative;z-index:1;flex:0 0 30px;width:30px;height:30px;margin-top:8px;
border-radius:50%;background:#fff;border:2px solid var(--honey);
display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;
box-shadow:0 2px 9px rgba(217,138,31,.28);
}
.hd-step:last-child .hd-dot{border-color:var(--twilight-1);box-shadow:0 2px 9px rgba(106,88,145,.3);}
.hd-body{
flex:1 1 auto;background:#fff;border:1px solid var(--line);border-radius:16px;
box-shadow:var(--shadow-sm);padding:14px 18px;
}
.hd-body h3{margin:0 0 5px;font-family:var(--font-round);font-size:15px;font-weight:800;color:var(--terrace);}
.hd-body p{margin:0;font-size:13.5px;line-height:1.95;color:#5b4c39;}
/* ホテルの動画（現時点は Instagram へのリンク。mp4 が用意できたら .v-card と同じ自前配信へ差し替える） */
.hd-movies{max-width:700px;margin:22px auto 0;text-align:center;}
.hd-movies-t{margin:0 0 10px;font-family:var(--font-round);font-size:13.5px;font-weight:800;color:var(--terrace);}
.hd-movies-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.hd-mv{
font-family:var(--font-round);font-size:13px;font-weight:700;color:var(--terrace);
text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:999px;
padding:9px 16px;box-shadow:var(--shadow-sm);transition:.15s;
}
.hd-mv:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.hd-mv:focus-visible{outline:3px solid var(--honey-deep);outline-offset:2px;}
.hd-movies-note{margin:9px 0 0;font-size:11.5px;color:var(--terrace-soft);}
/* ホテルの持ち物 */
.hd-bring{max-width:700px;margin:26px auto 0;background:#fff;border:1px solid var(--line);
border-radius:18px;box-shadow:var(--shadow-sm);padding:22px 22px 20px;}
.hd-bring h3{margin:0 0 14px;font-family:var(--font-round);font-size:15px;font-weight:800;color:var(--terrace);}
.hd-bring ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.hd-bring li{padding-left:26px;position:relative;}
.hd-bring li::before{content:"🐾";position:absolute;left:0;top:1px;font-size:13px;}
.hd-bring b{display:block;font-size:14px;font-weight:700;color:var(--terrace);line-height:1.7;}
.hd-bring span{display:block;margin-top:2px;font-size:12.5px;line-height:1.9;color:var(--terrace-soft);}
@media (max-width:520px){ .hd-bring{padding:18px 15px 16px;} }
.hd-note{max-width:700px;margin:22px auto 0;font-size:12.5px;line-height:2;color:var(--terrace-soft);}
.hd-ctas{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:26px;}
.hd-sub{
font-family:var(--font-round);font-size:13px;font-weight:700;color:var(--honey-deep);
text-decoration:none;border:1px solid var(--honey);border-radius:999px;padding:9px 16px;
background:#fff;transition:.15s;
}
.hd-sub:hover{background:var(--cream-2);}
.hd-step:nth-child(2).in{transition-delay:.08s;}
.hd-step:nth-child(3).in{transition-delay:.16s;}
.hd-step:nth-child(4).in{transition-delay:.24s;}
.hd-step:nth-child(5).in{transition-delay:.32s;}
@media (max-width:520px){
.hd-line::before{left:70px;}
.hd-step{gap:12px;}
.hd-time{flex:0 0 46px;width:46px;font-size:14px;padding-top:12px;}
.hd-dot{flex:0 0 28px;width:28px;height:28px;font-size:14px;}
.hd-body{padding:12px 14px;}
}
/* TOWATERAとは：事実の一覧（開業日・運営） */
.about-facts{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px;}
.about-facts > div{display:flex;align-items:baseline;gap:10px;}
.about-facts dt{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--honey-deep);
border:1px solid var(--honey);border-radius:999px;padding:2px 10px;white-space:nowrap;}
.about-facts dd{margin:0;font-size:13.5px;color:var(--terrace-soft);}
/* サービスカードの補足（別経営のカフェなど） */
.svc-note{margin:10px 0 0;font-size:12px;line-height:1.9;color:var(--terrace-soft);}
/* ===== 料金一覧 =====
料金表は画像でも掲載しているが、AI検索は画像内の文字を読めない。
同じ内容を文字でも置き、犬種ごとの金額に答えられるようにする。 */
.price{padding:70px 0;background:var(--cream);border-top:1px solid var(--line);}
.pr-blocks{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:22px;}
.pr-block{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);padding:22px 20px;}
.pr-block > h3{margin:0 0 12px;font-family:var(--font-round);font-size:16px;font-weight:800;color:var(--terrace);}
.pr-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.pr-tbl{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums;}
.pr-tbl caption{caption-side:top;text-align:left;font-size:12px;color:var(--terrace-soft);padding-bottom:8px;}
.pr-tbl th,.pr-tbl td{padding:9px 10px;border-bottom:1px solid var(--line);color:#5b4c39;line-height:1.6;}
.pr-tbl th[scope="row"]{text-align:left;font-weight:600;white-space:nowrap;}
.pr-tbl td{text-align:right;white-space:nowrap;}
.pr-tbl thead th{font-size:12px;font-weight:700;color:var(--terrace-soft);letter-spacing:.04em;
text-align:right;white-space:nowrap;border-bottom:2px solid var(--line);}
.pr-tbl thead th:first-child{text-align:left;}
.pr-tbl tbody tr:nth-child(even){background:#fffaf1;}
.pr-tbl td.hl{font-weight:700;color:var(--honey-deep);}
.pr-note{margin:12px 0 0;font-size:12.5px;line-height:1.95;color:var(--terrace-soft);}
.pr-note-lead{margin:0 0 14px;}
.pr-fold{border:1px solid var(--line);border-radius:14px;background:#fffdf8;overflow:hidden;}
.pr-fold + .pr-fold{margin-top:10px;}
.pr-fold > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;
padding:13px 16px;font-family:var(--font-round);font-weight:700;font-size:14.5px;color:var(--terrace);}
.pr-fold > summary::-webkit-details-marker{display:none;}
.pr-fold > summary::before{content:"▶";font-size:10px;color:var(--honey-deep);transition:transform .15s;}
.pr-fold[open] > summary::before{transform:rotate(90deg);}
.pr-fold > summary:focus-visible{outline:3px solid var(--honey-deep);outline-offset:-3px;}
.pr-fold-body{padding:2px 16px 16px;}
.pr-subh{margin:16px 0 8px;font-size:13.5px;font-weight:700;color:var(--honey-deep);}
.pr-fold-body > .pr-subh:first-child{margin-top:4px;}
.pr-foot{max-width:860px;margin:20px auto 0;text-align:center;font-size:13px;}
.pr-foot a{color:var(--honey-deep);font-weight:700;}
@media (prefers-reduced-motion:reduce){ .pr-fold > summary::before{transition:none;} }
@media (max-width:520px){
.pr-block{padding:18px 14px;}
.pr-tbl{font-size:13px;}
.pr-tbl th,.pr-tbl td{padding:8px 8px;}
.pr-fold-body{padding:2px 12px 14px;}
}
.cta-final{position:relative;padding:64px 0 128px;text-align:center;
background:linear-gradient(180deg,var(--cream) 0,#ffedd0 30%,#ffdfae 62%,#f6c88e 100%);}
.cta-final .dusk-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(28px,4.5vw,56px);display:block;}
.cta-final .card{max-width:640px;margin:0 auto;background:linear-gradient(160deg,#fff6e3,#ffe3b3);border:1px solid var(--line);border-radius:26px;padding:40px 30px;box-shadow:var(--shadow);}
.cta-final .pup{width:78px;height:78px;margin:0 auto 14px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#fff3da,#ffe3b3);box-shadow:0 8px 20px rgba(217,138,31,.3);display:flex;align-items:center;justify-content:center;}
.cta-final .pup img{width:70px;height:70px;object-fit:contain;}
.cta-final h2{margin:0 0 8px;font-size:21px;font-weight:800;color:var(--terrace);}
.cta-final p{margin:0 0 22px;font-size:14px;color:var(--terrace-soft);}
.cta-final-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
/* ===== Footer ===== */
footer.site{background:#3a2a18;color:#e9d9bd;padding:40px 0 26px;}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;}
footer.site .f-brand{font-size:16px;font-weight:800;color:#fff;}
footer.site .f-logo{display:block;width:150px;height:auto;margin-bottom:8px;}
footer.site .f-col{font-size:12.5px;line-height:2;color:#d8c6a4;}
footer.site .f-col a{color:#f3d59a;text-decoration:none;}
footer.site .f-col a:hover{text-decoration:underline;}
footer.site .f-social{display:flex;flex-direction:column;gap:4px;}
footer.site .f-social-label{font-size:11px;font-weight:800;letter-spacing:.06em;color:#c8b28c;margin-bottom:2px;}
footer.site .copyright{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);text-align:center;font-size:11.5px;color:#a88c60;}
/* ===== Lightbox =====
送迎チラシや料金表など、極端に縦長な画像は「画面の高さに収める」と
豆粒サイズになって読めなくなる。横幅基準で表示し、画面より長い分は
内側だけスクロールさせることで、実寸に近い大きさのまま読めるようにする。 */
#lightbox{display:none;position:fixed;inset:0;z-index:999;background:rgba(20,12,4,.9);cursor:zoom-out;}
#lightbox.open{display:block;}
.lb-scroll{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;align-items:center;justify-content:center;padding:64px 20px;box-sizing:border-box;}
/* 画像が画面より大きいときは中央寄せをやめる。中央寄せのままだと
はみ出した左端・上端までスクロールで戻れなくなるため（safe つきの中央寄せ）。 */
.lb-scroll{align-items:safe center;justify-content:safe center;}
#lightbox img{display:block;max-width:min(92vw,900px);width:auto;height:auto;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5);cursor:zoom-out;margin:auto;}
/* 文字の細かい資料（料金シミュレーションなど）は、画面が狭くても読める幅まで広げる。
はみ出したぶんは .lb-scroll を指でなぞって見てもらう。
（flex中央寄せのままだと左端まで戻せなくなるが、画像の margin:auto がそれを防いでいる） */
#lightbox.is-wide img{max-width:none;width:min(1400px,max(92vw,720px));cursor:default;}
/* 動画表示。写真と違って高さも画面内に収める（コントロールが画面外に出ると操作できない）。
背景クリックで閉じられるよう、動画自体はカーソルを既定に戻す。 */
#lightboxVideo{display:none;max-width:min(92vw,520px);max-height:80vh;width:auto;height:auto;
border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5);margin:auto;background:#000;cursor:default;}
#lightbox.is-video img{display:none;}
#lightbox.is-video #lightboxVideo{display:block;}
/* 拡大表示の前後送り（#lightbox基準で固定、中の画像がスクロールしても位置は動かない） */
.lb-nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:2;cursor:pointer;
width:46px;height:46px;border-radius:50%;border:none;
background:rgba(255,255,255,.16);color:#fff;font-size:30px;line-height:1;
display:flex;align-items:center;justify-content:center;padding-bottom:4px;
backdrop-filter:blur(3px);transition:background .15s;
}
.lb-nav:hover{background:rgba(255,255,255,.32);}
#lbPrev{left:14px;} #lbNext{right:14px;}
#lbCount{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.08em;background:rgba(0,0,0,.4);border-radius:999px;padding:4px 14px;}
#lbCount:empty{display:none;}
@media (max-width:600px){ .lb-nav{width:40px;height:40px;font-size:26px;} #lbPrev{left:8px;} #lbNext{right:8px;} .lb-scroll{padding:56px 8px;} }
/* ===== 画面右の現在地インジケーター =====
縦に長いページなので、いま全体のどのあたりを見ているかが分かり、
そこから各セクションへ直接跳べるようにする。
蜜の起動ボタン（右下・z-index:70）と重ならないよう、上下中央に固定する。 */
.srail{
position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:60;
display:flex;flex-direction:column;align-items:flex-end;gap:14px;
padding:12px 0;
transition:opacity .25s ease,transform .25s ease;
}
.srail.hide{opacity:0;pointer-events:none;transform:translateY(-50%) translateX(12px);}
/* 進み具合を示す縦線。ドットの列の中央に沿わせる */
.srail-track{
position:absolute;right:7px;top:12px;bottom:12px;width:2px;
background:rgba(180,150,110,.28);border-radius:2px;
box-shadow:0 0 0 2px rgba(255,255,255,.55);
}
.srail-fill{
position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;
background:linear-gradient(180deg,var(--amber),var(--honey-deep));
}
.srail a{
position:relative;display:flex;align-items:center;gap:8px;
text-decoration:none;color:var(--terrace-soft);
}
.srail .lbl{
font-family:var(--font-round);font-size:11.5px;font-weight:800;white-space:nowrap;
background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 10px;
box-shadow:var(--shadow-sm);
opacity:0;transform:translateX(6px);pointer-events:none;
transition:opacity .18s ease,transform .18s ease;
}
.srail .dot{
width:10px;height:10px;border-radius:50%;flex:0 0 10px;
background:#fff;border:2px solid rgba(180,150,110,.55);
/* 写真の上に重なっても見えるよう、白い縁を回す */
box-shadow:0 0 0 2px rgba(255,255,255,.8);
transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
}
/* ホバーはマウスがある端末だけ。タッチ端末では指を離してもホバー状態が
残り、関係のないラベルが出っぱなしになってしまう */
@media (hover: hover){
.srail a:hover .lbl{opacity:1;transform:translateX(0);}
.srail a:hover .dot{border-color:var(--honey-deep);}
}
.srail a:focus-visible .lbl{opacity:1;transform:translateX(0);}
.srail a:focus-visible{outline:2px solid var(--honey-deep);outline-offset:4px;border-radius:999px;}
.srail a[aria-current="true"] .dot{
background:var(--honey-deep);border-color:var(--honey-deep);transform:scale(1.35);
}
.srail a[aria-current="true"] .lbl{opacity:1;transform:translateX(0);color:var(--honey-deep);}
/* 画面が狭い・低いときはラベルを出さずドットだけにする（本文の邪魔をしない） */
@media (max-width:900px){
.srail a[aria-current="true"] .lbl{opacity:0;transform:translateX(6px);}
}
@media (max-width:600px){
.srail{right:9px;gap:11px;}
.srail-track{right:5px;}
.srail .dot{width:8px;height:8px;flex:0 0 8px;border-width:2px;}
/* ラベルは画面には出さないが、読み上げには残す（display:none だと読まれなくなる） */
.srail .lbl{
position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;box-shadow:none;
}
}
@media (max-height:520px){ .srail{display:none;} }
@media (prefers-reduced-motion: reduce){
.srail,.srail .lbl,.srail .dot{transition:none;}
}
/* ===== 蜜 チャットウィジェット ===== */
/* 起動ボタンは「AIコンシェルジュ」の見出しをボタンの上に置く */
#mitsuFabWrap{
position:fixed;right:20px;bottom:20px;z-index:70;
display:flex;flex-direction:column;align-items:flex-end;gap:6px;
transition:opacity .2s,transform .2s;
}
#mitsuFabWrap.hide{opacity:0;pointer-events:none;transform:translateY(10px) scale(.92);}
.fab-cap{
background:#fff;color:var(--honey-deep);border:1px solid var(--honey);border-radius:999px;
padding:3px 11px;font-size:11px;font-weight:800;letter-spacing:.04em;box-shadow:var(--shadow-sm);
}
#mitsuFab{
display:flex;align-items:center;gap:9px;
border:none;cursor:pointer;padding:9px 18px 9px 9px;border-radius:999px;
background:linear-gradient(180deg,var(--amber),var(--honey-deep));color:#fff;
box-shadow:0 8px 24px rgba(217,138,31,.48);transition:transform .2s;
}
#mitsuFab:hover{transform:translateY(-2px);}
#mitsuFab .fab-pup{width:38px;height:38px;border-radius:50%;background:#fff5e0;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 38px;animation:fabFloat 3.2s ease-in-out infinite;}
#mitsuFab .fab-pup img{width:32px;height:32px;object-fit:contain;}
#mitsuFab .fab-label{font-size:14px;font-weight:800;}
@keyframes fabFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
@media (max-width:480px){ #mitsuFab .fab-label{display:none;} #mitsuFab{padding:8px;} }
#mitsuOverlay{position:fixed;inset:0;z-index:65;background:rgba(30,18,8,.32);opacity:0;pointer-events:none;transition:opacity .25s;}
#mitsuOverlay.open{opacity:1;pointer-events:auto;}
#mitsuPanel{
position:fixed;top:0;right:0;height:100%;width:420px;max-width:100vw;z-index:71;
background:#fff9f0;box-shadow:-10px 0 34px rgba(60,40,20,.28);
display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease;
}
#mitsuPanel.open{transform:translateX(0);}
.mitsu-panel-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(180deg,#fffdf8,#fff3da);border-bottom:1px solid var(--line);font-weight:800;color:var(--terrace);}
.mitsu-panel-head-actions{display:flex;align-items:center;gap:6px;}
.mitsu-panel-head-actions a,.mitsu-panel-head-actions button{
border:none;background:rgba(255,255,255,.7);color:var(--terrace);width:30px;height:30px;border-radius:50%;
display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;font-size:14px;transition:.15s;
}
.mitsu-panel-head-actions a:hover,.mitsu-panel-head-actions button:hover{background:#ffe1a9;}
#mitsuFrame{flex:1;border:none;width:100%;height:100%;}
/* ===== Reveal on scroll ===== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
.svc-card:nth-child(2).in,.perk-list li:nth-child(2).in{transition-delay:.08s;}
.svc-card:nth-child(3).in,.perk-list li:nth-child(3).in{transition-delay:.16s;}
.svc-card:nth-child(4).in,.perk-list li:nth-child(4).in{transition-delay:.24s;}
.svc-card:nth-child(5).in,.perk-list li:nth-child(5).in{transition-delay:.32s;}
.svc-card:nth-child(6).in,.perk-list li:nth-child(6).in{transition-delay:.4s;}
.svc-card:nth-child(7).in,.perk-list li:nth-child(7).in{transition-delay:.48s;}
.perk-list li:nth-child(8).in{transition-delay:.56s;}
.perk-list li:nth-child(9).in{transition-delay:.64s;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} }
@media (max-width:600px){
/* 下寄せ（align-items:flex-end）のままだと、下の文章が何行に折り返るかで
バッジの位置が変わってしまい（狭い幅ほど行数が増えて下端が固定のぶん上に
押し上げられる）、幅によって看板に重なったり重ならなかったりして安定しない。
スマホでは上寄せに切り替え、paddingだけでバッジの位置を固定して看板の下の
壁面に確実に収める。 */
.hero{min-height:82vh;align-items:flex-start;}
.hero-in{padding:370px 16px 40px;}
/* スマホは文字が全幅に広がるので、空と建物上部は明るいまま下側だけを落とす */
.hero::before{background:linear-gradient(180deg,transparent 0,rgba(22,13,6,.10) 22%,rgba(22,13,6,.48) 44%,rgba(20,12,5,.68) 72%,rgba(18,11,5,.74) 100%);}
.hero p.sub{max-width:none;}
.about,.services,.gallery,.membership,.access{padding:44px 0;}
}