:root{
  --sea-deep: #0f5c68;
  --sea-mid: #1c7a86;
  --sea-light: #8fd1d6;
  --sand: #faf5e8;
  --sand-line: #e5d8bd;
  --coral: #ee7b52;
  --coral-dark: #d4643d;
  --ink: #1c2a2c;
  --ink-soft: #4a5a5c;
  --max: 1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:auto;}  /* ページ内リンクのスムーススクロールは js/main.js で制御 */
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:'Zen Maru Gothic', sans-serif;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- Liquid glass ---------- */
.glass{
  background:rgba(255,255,255,.32);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 12px 36px -12px rgba(15,92,104,.28),
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -12px 24px -18px rgba(15,92,104,.15);
  position:relative;
}
.glass::before{
  content:'';
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 32%);
}
.glass-dark{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 20px 50px -20px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.glass-dark::before{
  content:'';
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 35%);
}
.blob{
  position:absolute; border-radius:50%;
  pointer-events:none; z-index:-1;
}
h1,h2,h3,h4,.display{
  font-family:'Outfit','Zen Maru Gothic',sans-serif;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--sea-deep);
  margin:0;
}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
section{position:relative;}

/* ---------- Header ---------- */
header.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:20px 0;
}
header.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
}
.header-shell{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:10px 12px 10px 24px; border-radius:100px;
  transition:background .4s ease, box-shadow .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
header.site-header .wrap{transition:background .4s ease, box-shadow .4s ease, border-color .4s ease, padding .3s ease;}
header.site-header.scrolled .wrap{
  width:calc(100% - 24px); max-width:1096px; padding:9px 12px 9px 24px; border-radius:100px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 8px 30px -12px rgba(15,92,104,.35), inset 0 1px 0 rgba(255,255,255,.8);
}
header.site-header.scrolled .header-shell{
  background:rgba(255,255,255,.3);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 30px -12px rgba(15,92,104,.3), inset 0 1px 0 rgba(255,255,255,.7);
}
.logo{
  font-family:'Outfit','Zen Maru Gothic',sans-serif; font-weight:600; letter-spacing:.04em;
  font-size:1.5rem;
  color:var(--sea-deep);
  display:flex; align-items:center; gap:10px;
}
.logo-mark{height:46px; width:auto; display:block; flex-shrink:0;}
.logo-text{display:flex; align-items:baseline; gap:8px;}
.logo small{
  font-family:'Zen Maru Gothic', sans-serif;
  font-family:'Outfit',sans-serif; font-size:.62rem;
  color:var(--coral-dark);
  letter-spacing:.18em;
  font-weight:700;
}
nav.main-nav{display:flex; align-items:center; gap:32px;}
nav.main-nav a{
  font-size:.88rem; font-weight:500; color:var(--ink-soft);
  position:relative; padding:4px 0;
}
nav.main-nav a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
  background:var(--coral); transition:width .25s ease;
}
nav.main-nav a:hover::after{width:100%;}
.header-cta{
  background:linear-gradient(160deg, #f18a63, var(--coral) 60%, var(--coral-dark));
  color:#fff !important; padding:9px 22px;
  border-radius:100px; font-size:.85rem; font-weight:700 !important;
  box-shadow:0 8px 18px -8px rgba(212,100,61,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
nav.main-nav a.header-cta{padding:9px 22px;}
nav.main-nav a.header-cta::after{display:none;}
.nav-toggle{display:none;}

/* ---------- Hero ---------- */
.hero{
  padding:140px 0 0;
  background:linear-gradient(180deg, #cdeef0 0%, #a9dde2 38%, #79c3cb 68%, var(--sea-mid) 100%);
  overflow:hidden;
}
.hero .sun{
  position:absolute; top:70px; right:8%; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff6df, #ffd98a 55%, #f7b95f 100%);
  box-shadow:0 0 60px 20px rgba(255,217,138,.45);
}
.hero-inner{
  position:relative; z-index:2;
  padding:60px 0 160px;
  text-align:center;
}
.eyebrow{
  display:inline-block; font-size:.78rem; letter-spacing:.28em; font-weight:700;
  color:var(--sea-deep); background:rgba(255,255,255,.4);
  backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  padding:7px 20px; border-radius:100px; margin-bottom:28px;
  box-shadow:0 6px 18px -10px rgba(15,92,104,.35), inset 0 1px 0 rgba(255,255,255,.7);
}
.hero h1{
  font-size:clamp(2.4rem, 6vw, 4.2rem);
  color:#0c3f47;
  line-height:1.35;
}
.hero p.lead{
  max-width:520px; margin:26px auto 0; color:#0c3f47; font-size:1.02rem;
}
.hero-actions{
  margin-top:40px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
}
.btn{
  display:inline-block; padding:15px 34px; border-radius:100px;
  font-weight:700; font-size:.95rem; transition:transform .2s ease, box-shadow .2s ease;
  position:relative; overflow:hidden;
}
.btn-primary{
  background:linear-gradient(160deg, #f18a63, var(--coral) 55%, var(--coral-dark));
  color:#fff; box-shadow:0 10px 24px -8px rgba(212,100,61,.55), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-primary::before{
  content:''; position:absolute; top:0; left:8%; right:8%; height:44%; border-radius:100px 100px 60% 60%/100% 100% 40% 40%;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(212,100,61,.6), inset 0 1px 0 rgba(255,255,255,.5);}
.btn-ghost{
  background:rgba(255,255,255,.28);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  color:var(--sea-deep); border:1px solid rgba(255,255,255,.6);
  box-shadow:0 8px 24px -12px rgba(15,92,104,.3), inset 0 1px 0 rgba(255,255,255,.65);
}
.btn-ghost:hover{background:rgba(255,255,255,.42);}


/* ---------- Hero: first-view tuning ---------- */
.hero{padding-top:104px;}
.hero-inner{padding:20px 0 28px;}
.eyebrow{margin-bottom:18px;}
.hero h1{font-size:clamp(2.2rem, 5.2vw, 3.8rem); line-height:1.3; font-weight:700; letter-spacing:.08em;}
.hero p.lead{max-width:720px; margin-top:16px; font-size:1rem; line-height:1.9;}
.hero p.lead span{display:inline-block;}
.hero-actions{margin-top:24px;}
.hero .sp{display:none;}
.hero-areas{position:relative; z-index:2; padding-bottom:64px;}
.hero-areas-label{
  display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:18px; color:#0c3f47;
}
.hero-areas-label::before, .hero-areas-label::after{
  content:''; height:2px; width:clamp(32px, 9vw, 120px); border-radius:2px;
  background:linear-gradient(90deg, rgba(238,123,82,0), var(--coral));
}
.hero-areas-label::after{background:linear-gradient(270deg, rgba(238,123,82,0), var(--coral));}
.hero-areas-label h2{
  margin:0; color:inherit;
  white-space:nowrap; font-family:'Outfit','Zen Maru Gothic',sans-serif; font-weight:700; font-size:clamp(1.6rem, 3.2vw, 2.1rem); letter-spacing:.1em; line-height:1.2;
}
.hero-areas-label small{
  font-family:'Outfit',sans-serif;
  font-size:.82rem; letter-spacing:.26em; font-weight:700; color:#fff;
  background:linear-gradient(160deg, #f18a63, var(--coral) 60%, var(--coral-dark));
  padding:5px 14px; border-radius:100px;
  box-shadow:0 6px 14px -6px rgba(212,100,61,.6), inset 0 1px 0 rgba(255,255,255,.45);
}
.hero-areas .areas-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.hero-areas .area-card{min-height:200px; padding:20px 22px;}
.hero-areas .area-card h3, .hero-areas .area-card p{text-shadow:0 1px 8px rgba(8,34,40,.7);}
.hero-areas .area-card h3{font-size:1.6rem; font-weight:900; letter-spacing:.18em; margin-bottom:4px; color:#fff;}
.hero-areas .area-card p{font-size:.78rem; line-height:1.6;}
.hero-areas .area-card .more{margin-top:10px; padding:5px 14px; font-size:.74rem;}
.hero-areas .area-card .tag{top:16px; left:16px;}
.hero-areas .area-card .credit{display:block; bottom:8px; right:12px; font-size:.58rem;}
.hero-areas .btn-ghost{color:#fff; background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.55); text-shadow:0 1px 6px rgba(10,40,45,.35);}
.hero-areas .btn-ghost:hover{background:rgba(255,255,255,.32);}
.area-credit-line{display:none; margin:12px 0 0; text-align:center; font-size:.62rem; color:rgba(255,255,255,.75);}
.area-credit-line a{text-decoration:underline; color:inherit;}
@media (max-width:860px){
  .hero .sp{display:inline;}
  .hero .pc{display:none;}
  .hero-areas .areas-grid{grid-template-columns:repeat(3,1fr); gap:10px;}
  .hero-areas .area-card{min-height:150px; padding:14px;}
  .hero-areas .area-card p, .hero-areas .area-card .more, .hero-areas .area-card .credit{display:none;}
  .area-credit-line{display:block;}
  .hero-areas .area-card h3{font-size:1.15rem; letter-spacing:.12em; margin:0;}
  .hero-areas-label{gap:10px;}
  .hero-areas-label::before, .hero-areas-label::after{display:none;}
  .hero-areas-label h2{font-size:1.5rem;}
  .hero-areas-label small{font-size:.7rem; padding:4px 11px;}
  .hero-areas .area-card .tag{font-size:.6rem; padding:4px 9px; top:10px; left:10px; letter-spacing:.1em;}
}
@media (max-width:520px){
  .hero{padding-top:92px;}
  .hero-actions .btn{padding:12px 24px; font-size:.88rem;}
}


.area-links{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:18px;}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:100px;
  font-size:.84rem; font-weight:700; color:#0c3f47;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 8px 20px -12px rgba(15,92,104,.45), inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .2s ease, background .2s ease;
}
.chip span{color:var(--coral-dark);}
.chip:hover{transform:translateY(-2px); background:rgba(255,255,255,.62);}
.hero-areas .hero-actions{margin-top:34px;}
@media (max-width:860px){ .chip{font-size:.78rem; padding:8px 14px;} .hero-areas .hero-actions{margin-top:26px;} }

/* wave divider (signature element) */
.tideline{width:100%; display:block; margin-top:-2px;}
.tideline path{fill:var(--sand);}

/* pine silhouette accents */
.pine{position:absolute; bottom:0; opacity:.9;}
.pine.left{left:2%; width:90px;}
.pine.right{right:3%; width:70px;}

/* ---------- Section headings ---------- */
.section-head{max-width:640px; margin:0 auto 56px; text-align:center;}
.section-head .eyebrow-line{
  display:flex; align-items:center; gap:14px; justify-content:center; margin-bottom:18px;
}
.section-head .eyebrow-line::before, .section-head .eyebrow-line::after{
  content:''; height:1px; width:36px; background:var(--sand-line);
}
.section-head .eyebrow-line span{
  font-family:'Outfit',sans-serif;
  font-size:.78rem; letter-spacing:.24em; color:var(--coral-dark); font-weight:700;
}
.section-head h2{font-size:clamp(1.7rem, 3.4vw, 2.4rem);}
.section-head p{color:var(--ink-soft); margin-top:16px; font-size:.98rem;}

/* ---------- About ---------- */
.about{padding:120px 0 100px; background:var(--sand); overflow:hidden; position:relative;}
.about .grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center;
  position:relative; z-index:1;
}
.about h2{font-size:clamp(1.5rem, 2.6vw, 2rem); margin-bottom:22px;}
.about p{color:var(--ink-soft); font-size:.98rem;}
.about-points{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px;}
.about-points li{
  display:flex; gap:12px; align-items:flex-start; font-size:.92rem; color:var(--ink);
}
.about-points li svg{flex-shrink:0; margin-top:3px;}
.about-art{
  width:100%; max-width:320px; margin:0 auto; padding:10px; border-radius:32px; position:relative;
  background:rgba(255,255,255,.35);
  backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 20px 50px -20px rgba(15,92,104,.4), inset 0 1px 0 rgba(255,255,255,.75);
}
.about-art img{width:100%; height:auto; display:block; border-radius:24px; aspect-ratio:204/300; object-fit:cover;}

/* ---------- Services (photo cards) ---------- */
.services{padding:80px 0; background:linear-gradient(180deg, #efe7d3, #e9dfc7); position:relative; overflow:hidden;}
.services .section-head{margin-bottom:36px;}
.services-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
  position:relative; z-index:1;
}
.service-card{
  position:relative; overflow:hidden; border-radius:24px; min-height:250px;
  display:flex; align-items:flex-end; background:#0c3f47;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 14px 34px -16px rgba(15,92,104,.45), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -18px rgba(15,92,104,.55);}
.service-card .card-media{position:absolute; inset:0;}
.service-card .card-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease;}
.service-card:hover .card-media img{transform:scale(1.04);}
.service-card::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(8,34,40,.9) 0%, rgba(8,34,40,.62) 42%, rgba(8,34,40,.06) 82%);
}
.service-card .icon{
  position:absolute; top:16px; left:16px; z-index:2;
  width:42px; height:42px; border-radius:14px; color:var(--coral-dark);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(12px) saturate(180%); -webkit-backdrop-filter:blur(12px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.service-card .icon svg{width:22px; height:22px;}
.service-card .card-body{width:100%; padding:20px 22px 22px;}
.service-card h3{
  position:relative; z-index:2; margin:0 0 6px; font-size:1.2rem; font-weight:700; letter-spacing:.06em;
  color:#fff; text-shadow:0 1px 8px rgba(8,34,40,.6);
}
.service-card p{
  position:relative; z-index:2; margin:0; font-size:.82rem; line-height:1.7;
  color:rgba(255,255,255,.92); text-shadow:0 1px 8px rgba(8,34,40,.6);
}
@media (max-width:520px){
  .services{padding:60px 0;}
  .services-grid{gap:10px;}
  .service-card{min-height:150px; border-radius:20px;}
  .service-card .icon{top:10px; left:10px; width:34px; height:34px; border-radius:11px;}
  .service-card .icon svg{width:18px; height:18px;}
  .service-card .card-body{padding:12px 14px 14px;}
  .service-card h3{font-size:.9rem; letter-spacing:.03em; margin:0; line-height:1.4;}
  .service-card p{display:none;}
}

/* ---------- Areas ---------- */
.areas{padding:100px 0; background:var(--sand);}
.areas-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.area-card{
  border-radius:20px; overflow:hidden; position:relative; min-height:320px;
  display:flex; align-items:flex-end; padding:28px;
  background-size:cover; background-position:center;
}
.area-card{transition:transform .3s ease, box-shadow .3s ease;}
.area-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(15,92,104,.5);}
.area-card .card-link{position:absolute; inset:0; z-index:1;}
.area-card .tag{
  font-family:'Outfit',sans-serif;z-index:2;}
.area-card .more{
  display:inline-block; margin-top:14px; font-size:.8rem; font-weight:700; color:#fff;
  padding:7px 16px; border-radius:100px;
  background:rgba(255,255,255,.22);
  backdrop-filter:blur(12px) saturate(180%); -webkit-backdrop-filter:blur(12px) saturate(180%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.area-card .credit{
  position:absolute; bottom:10px; right:14px; font-size:.62rem;
  color:rgba(255,255,255,.55); z-index:2;
}
.area-card .credit a{color:rgba(255,255,255,.55); text-decoration:underline;}
.area-card .tag{
  position:absolute; top:22px; left:22px; font-size:.72rem; letter-spacing:.18em;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(12px) saturate(180%); -webkit-backdrop-filter:blur(12px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  color:var(--sea-deep); padding:6px 14px; border-radius:100px; font-weight:700;
}
.area-card h3{color:#fff; font-size:1.4rem; margin-bottom:8px;}
.area-card p{color:rgba(255,255,255,.92); font-size:.86rem; margin:0;}

/* ---------- Contact ---------- */
.contact{padding:110px 0 100px; background:#0c3f47; color:#fff; position:relative; overflow:hidden;}
.contact::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(600px 300px at 85% 0%, rgba(238,123,82,.18), transparent 70%);
}
.contact .wrap{position:relative; z-index:2;}
.contact .section-head h2{color:#fff;}
.contact .section-head p{color:rgba(255,255,255,.75);}
.contact .section-head .eyebrow-line::before, .contact .section-head .eyebrow-line::after{background:rgba(255,255,255,.25);}
.contact-panel{
  display:grid; grid-template-columns:1fr 1fr; gap:40px;
  border-radius:28px; padding:44px; align-items:center;
}
.contact-info dl{display:grid; grid-template-columns:auto 1fr; gap:10px 20px; font-size:.92rem;}
.contact-info dt{color:rgba(255,255,255,.6); font-weight:500;}
.contact-info dd{margin:0; color:#fff;}
.contact-cta{text-align:center;}
.phone-link{
  display:block; font-family:'Outfit',sans-serif; font-weight:600; letter-spacing:.04em; font-size:2.1rem; color:#fff; margin-bottom:10px;
}
.contact-cta p.note{font-size:.8rem; color:rgba(255,255,255,.65); margin-bottom:22px;}


/* ---------- Access map ---------- */
.access{margin-top:28px; border-radius:28px; padding:14px; overflow:hidden;}
.access-head{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding:10px 14px 16px; color:#fff;
}
.access-head h3{color:#fff; font-size:1.2rem;}
.access-head p{margin:0; font-size:.85rem; color:rgba(255,255,255,.75);}
.access-head .btn{padding:10px 22px; font-size:.82rem;}
.map-frame{border-radius:20px; overflow:hidden; aspect-ratio:16/7; background:#0c3f47; position:relative;}
.map-frame iframe{width:100%; height:100%; border:0; display:block;}
@media (max-width:860px){ .map-frame{aspect-ratio:4/3;} .access-head{justify-content:center; text-align:center;} }

/* ---------- Footer ---------- */
footer{padding:40px 0; background:#092e34; color:rgba(255,255,255,.55); font-size:.8rem;}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer .foot-link{text-decoration:underline; color:rgba(255,255,255,.75);}
footer .foot-link:hover{color:#fff;}
footer .foot-logo{color:#fff; font-family:'Outfit',sans-serif; font-weight:600; letter-spacing:.04em; font-size:1.1rem;}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  nav.main-nav{display:none;}
  .about .grid{grid-template-columns:1fr;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .areas-grid{grid-template-columns:1fr;}
  .contact-panel{grid-template-columns:1fr; text-align:center;}
  .contact-info dl{grid-template-columns:1fr; text-align:center;}
  footer .wrap{flex-direction:column; text-align:center;}
}
@media (max-width:520px){
  .hero{padding-top:110px;}
}
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none; opacity:1; transform:none;}
}

/* ---------- Area card photos ---------- */
.area-card.area-zushi{background-image:linear-gradient(0deg, rgba(8,34,40,.82) 0%, rgba(8,34,40,.5) 40%, rgba(8,34,40,0) 78%), url('../images/area-zushi.jpg'); background-position:center, 50% 55%;}
.area-card.area-hayama{background-image:linear-gradient(0deg, rgba(8,34,40,.82) 0%, rgba(8,34,40,.5) 40%, rgba(8,34,40,0) 78%), url('../images/area-hayama.jpg'); background-position:center, 50% 62%;}
.area-card.area-kamakura{background-image:linear-gradient(0deg, rgba(8,34,40,.82) 0%, rgba(8,34,40,.5) 40%, rgba(8,34,40,0) 78%), url('../images/area-kamakura.jpg'); background-position:center, 50% 60%;}


@media (max-width:520px){
  .logo-mark{height:40px;}
  .logo-text{flex-direction:column; align-items:flex-start; gap:0; line-height:1.15;}
  .logo-text small{font-size:.58rem; letter-spacing:.14em; margin-top:3px;}
}

/* ---------- Floating CTA (mobile) ---------- */
.float-cta{display:none;}
@media (max-width:860px){
  .float-cta{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:60;
    width:min(86vw, 340px); padding:16px 24px; font-size:1rem;
    transform:translate(-50%, 160%); opacity:0; pointer-events:none;
    transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
    box-shadow:0 14px 30px -10px rgba(212,100,61,.7), 0 0 0 1px rgba(255,255,255,.35) inset, inset 0 1px 0 rgba(255,255,255,.5);
  }
  .float-cta.show{transform:translate(-50%, 0); opacity:1; pointer-events:auto;}
  .float-cta svg{flex-shrink:0;}
}
@media (prefers-reduced-motion: reduce){
  .float-cta{transition:none;}
}

.nb{display:inline-block;}

/* ---------- Mobile performance tuning ---------- */
@media (max-width:860px){
  .glass, .glass-dark{backdrop-filter:blur(12px) saturate(150%); -webkit-backdrop-filter:blur(12px) saturate(150%);}
  header.site-header.scrolled .wrap{backdrop-filter:blur(12px) saturate(150%); -webkit-backdrop-filter:blur(12px) saturate(150%);}
  .chip, .btn-ghost, .eyebrow{backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);}
  .hero .sun{box-shadow:0 0 36px 12px rgba(255,217,138,.45);}
  .float-cta, header.site-header{will-change:transform; -webkit-transform:translateZ(0);}
}

/* ---------- Contact panel: phone block first on mobile ---------- */
@media (max-width:860px){
  .contact-cta{order:-1; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.16);}
  .contact-cta .phone-link{font-size:1.9rem;}
}


/* スクリーンリーダー・検索エンジン向けの補足テキスト（画面には表示しない） */
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* 会社紹介：段落の間隔 */
.about p{margin:0 0 1em; text-wrap:pretty; word-break:auto-phrase;}
.about p:last-of-type{margin-bottom:0;}

/* ---------- 会社概要（スマホ）：左揃えの2列表にして読みやすく ---------- */
@media (max-width:860px){
  .contact-panel{padding:28px 20px; gap:24px;}
  .contact-cta{padding-bottom:24px;}
  .contact-info dl{
    grid-template-columns:5.6em minmax(0,1fr); gap:0; text-align:left; font-size:.9rem; line-height:1.7;
  }
  .contact-info dt, .contact-info dd{padding:12px 0; border-bottom:1px solid rgba(255,255,255,.12);}
  .contact-info dt{font-size:.8rem; color:rgba(255,255,255,.62); padding-top:13px; padding-right:12px;}
  .contact-info dt:nth-last-of-type(1), .contact-info dd:last-of-type{border-bottom:0;}
  .contact-info{min-width:0;}
  .contact-info dd{word-break:auto-phrase; overflow-wrap:anywhere; text-wrap:pretty;}
}