:root{
  --rose:#cf5f78;
  --rose-dark:#ad435b;
  --rose-light:#f8e3e8;
  --rose-pale:#fff5f7;
  --ink:#332b2a;
  --text:#4d4240;
  --muted:#837370;
  --line:#ecd8d5;
  --gold:#c59a61;
  --cream:#fffaf6;
  --paper:#fffdfb;
  --shadow:0 18px 46px rgba(121,67,78,.12);
  --shadow-soft:0 10px 28px rgba(121,67,78,.08);
  --serif:'Noto Serif JP',serif;
  --sans:'Noto Sans JP',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:var(--paper);
  font-size:13.5px;
  line-height:1.72;
  letter-spacing:.035em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{
  width:min(1540px,calc(100% - 48px));
  margin-inline:auto;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,253,251,.95);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(236,216,213,.75);
}
.header-inner{
  width:min(1480px,calc(100% - 56px));
  height:76px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{display:flex;flex-direction:column;line-height:1}
.brand-main{
  font-family:var(--serif);
  font-size:31px;
  letter-spacing:.07em;
  color:var(--rose);
  font-weight:700;
}
.brand-sub{
  font-size:10px;
  color:#8d7d7a;
  margin-top:7px;
  letter-spacing:.08em;
}
.global-nav{
  display:flex;
  align-items:center;
  gap:34px;
  font-size:13px;
  font-weight:900;
  color:#3f3635;
}
.global-nav a:not(.nav-cta){
  position:relative;
  padding:26px 0;
}
.global-nav a:not(.nav-cta)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:19px;
  height:2px;
  background:var(--rose);
  transform:scaleX(0);
  transform-origin:left;
  transition:.25s;
}
.global-nav a:hover::after{transform:scaleX(1)}
.nav-cta{
  padding:13px 26px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--rose),#da738a);
  color:#fff;
  box-shadow:0 10px 22px rgba(207,95,120,.25);
}
.nav-toggle{
  display:none;
  border:0;
  background:transparent;
  padding:10px;
  gap:5px;
  flex-direction:column;
}
.nav-toggle span{
  display:block;
  width:25px;
  height:2px;
  border-radius:10px;
  background:var(--rose);
}

/* Common */
section{padding:70px 0}
.section-title{
  margin:0 0 32px;
  font-family:var(--serif);
  font-size:clamp(25px,2.2vw,38px);
  line-height:1.45;
  text-align:center;
  letter-spacing:.08em;
  color:var(--ink);
}
.section-title span{
  color:var(--rose);
  font-size:1.12em;
}
.section-pink{background:linear-gradient(180deg,#fff6f8 0%,#fff 100%)}
.section-pale{background:linear-gradient(90deg,#fff8f5 0%,#fff 47%,#fff8f5 100%)}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:215px;
  padding:15px 30px;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
  line-height:1.2;
  transition:.25s;
  white-space:nowrap;
}
.btn::after{
  content:"›";
  font-size:22px;
  line-height:1;
}
.btn-primary{
  background:linear-gradient(135deg,var(--rose),#dd788e);
  color:#fff;
  box-shadow:0 14px 26px rgba(207,95,120,.28);
}
.btn-secondary{
  background:#fff;
  color:#5b4f4c;
  border:1px solid #dcc7c3;
  box-shadow:0 10px 22px rgba(88,57,55,.08);
}
.btn:hover{transform:translateY(-2px)}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  padding:0;
  background:linear-gradient(90deg,#fff9fb 0%,#fffaf7 42%,#fff 100%);
}
.hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 9% 12%,rgba(249,224,232,.95),transparent 28%),
    radial-gradient(circle at 90% 6%,rgba(255,240,226,.78),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.15));
  pointer-events:none;
}
.hero-inner{
  position:relative;
  width:min(1560px,calc(100% - 48px));
  min-height:610px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(430px,540px) minmax(800px,1fr);
  gap:56px;
  align-items:center;
}
.hero-copy{
  position:relative;
  z-index:3;
  padding:58px 0 54px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  color:var(--rose);
  font-size:13px;
  font-weight:900;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 18px;
  margin:0 0 22px;
  box-shadow:0 10px 22px rgba(207,95,120,.08);
}
.hero h1{
  margin:0 0 20px;
  font-family:var(--serif);
  font-size:clamp(52px,4.25vw,72px);
  line-height:1.18;
  font-weight:700;
  letter-spacing:.055em;
  color:#292120;
}
.hero h1 span{
  color:var(--rose);
  font-size:1.04em;
}
.hero-lead{
  max-width:500px;
  margin:0 0 24px;
  color:#4a403e;
  font-size:14px;
  font-weight:700;
  line-height:1.9;
}
.hero-badges{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:13px;
  margin:25px 0 27px;
  max-width:570px;
}
.hero-badges div{
  min-height:104px;
  aspect-ratio:1/1;
  border:1.5px solid #e9bbb8;
  background:rgba(255,255,255,.94);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  font-size:11.5px;
  line-height:1.45;
  font-weight:900;
  color:var(--rose-dark);
  box-shadow:0 10px 24px rgba(207,95,120,.08);
  padding:13px 9px 12px;
}
.hero-badge-icon{
  width:31px;
  height:31px;
  object-fit:contain;
  margin:0 0 7px;
  display:block;
}
.hero-badge-text{
  display:block;
  color:var(--rose-dark);
  font-size:11.5px;
  font-weight:900;
  line-height:1.45;
}


.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}
.hero-visual{
  position:relative;
  min-height:570px;
  padding:0;
  align-self:stretch;
  display:flex;
  align-items:center;
}
.hero-main-img{
  width:100%;
  height:548px;
  object-fit:cover;
  object-position:58% center;
  border-radius:0;
  box-shadow:none;
}
.hero-visual::before{
  content:"";
  position:absolute;
  inset:40px auto 40px -2px;
  width:46%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,#fffdfb 0%,rgba(255,253,251,.92) 34%,rgba(255,253,251,.55) 67%,rgba(255,253,251,0) 100%);
}
.hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,250,247,.25),rgba(255,250,247,0) 25%);
}
.circle-img{
  position:absolute;
  border:8px solid #fff;
  border-radius:999px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 18px 40px rgba(78,52,55,.2);
  z-index:4;
}
.circle-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.circle-shop{
  width:172px;
  height:172px;
  right:44px;
  top:82px;
}
.circle-parking{
  width:228px;
  height:228px;
  right:128px;
  bottom:82px;
}
.hero-label{
  position:absolute;
  right:38px;
  top:250px;
  width:124px;
  height:124px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--rose);
  color:#fff;
  font-size:17px;
  line-height:1.5;
  font-weight:900;
  box-shadow:0 18px 36px rgba(207,95,120,.32);
  z-index:5;
}

/* Worries */
.worries{
  background:#fff;
  padding-top:34px;
  padding-bottom:50px;
}
.worry-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:20px;
}
.worry-card{
  min-height:132px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  box-shadow:var(--shadow-soft);
  padding:14px 10px 13px;
}
.worry-icon{
  width:62px;
  height:62px;
  object-fit:contain;
  margin:0 0 9px;
  display:block;
}
.worry-card p{
  margin:0;
  font-size:12px;
  font-weight:900;
  line-height:1.55;
  color:#4e4240;
}

/* Reasons */

.reason-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:20px;
}
.reason-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:10px 10px 17px;
  box-shadow:0 13px 28px rgba(207,95,120,.1);
}
.reason-card img{
  width:100%;
  aspect-ratio:1.34/1;
  object-fit:cover;
  border-radius:13px;
  margin-bottom:11px;
}
.reason-card .num{
  position:absolute;
  left:8px;
  top:8px;
  width:33px;
  height:33px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--rose);
  color:#fff;
  font-family:var(--serif);
  font-size:13px;
  font-weight:700;
  z-index:2;
}
.reason-card h3{
  margin:0;
  text-align:center;
  font-size:12px;
  line-height:1.55;
  font-weight:900;
  color:#423635;
}

/* Compare */
.comparison{background:#fff}
.compare-layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:48px;
  align-items:center;
}
.compare-side h2,
.section-copy h2{
  margin:0 0 22px;
  font-family:var(--serif);
  font-size:clamp(27px,2.35vw,39px);
  line-height:1.55;
  letter-spacing:.08em;
  color:#302826;
}
.compare-side img{
  width:100%;
  aspect-ratio:3/3.55;
  object-fit:cover;
  border-radius:22px;
  box-shadow:var(--shadow);
}
.table-wrap{
  overflow:auto;
  border-radius:22px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.compare-table{
  width:100%;
  min-width:940px;
  border-collapse:collapse;
  background:#fff;
  font-size:12.5px;
}
.compare-table th,
.compare-table td{
  border:1px solid #eadbd8;
  padding:12px 15px;
  text-align:center;
  white-space:nowrap;
}
.compare-table thead th{
  background:#fff5f7;
  font-weight:900;
}
.compare-table thead .gflady{
  background:var(--rose);
  color:#fff;
  font-family:var(--serif);
  font-size:18px;
  letter-spacing:.06em;
}
.compare-table tbody th{
  background:#fffaf8;
  text-align:left;
  font-weight:900;
  color:#463a38;
}
.compare-table .good{
  color:var(--rose);
  font-weight:900;
}

/* Split sections */
.split-heading{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:44px;
  align-items:start;
}
.section-copy p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  line-height:1.9;
}
.lesson-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.lesson-card{
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-soft);
}
.lesson-card img{
  width:100%;
  aspect-ratio:1.62/1;
  object-fit:cover;
}
.lesson-card div{
  padding:15px 16px 18px;
  text-align:center;
}
.lesson-card h3{
  margin:0 0 4px;
  font-family:var(--serif);
  font-size:21px;
  line-height:1.2;
  color:var(--rose);
}
.lesson-card p{
  margin:0;
  color:#5d514f;
  font-size:12.5px;
  font-weight:600;
}
.facility-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
}
.facility-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:17px;
  padding:9px 9px 14px;
  text-align:center;
  box-shadow:var(--shadow-soft);
}
.facility-card img{
  width:100%;
  aspect-ratio:1.15/1;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:9px;
}
.facility-card h3{
  margin:0 0 3px;
  font-family:var(--serif);
  font-size:15px;
  line-height:1.35;
  color:#3c3331;
}
.facility-card p{
  margin:0;
  color:#625654;
  font-size:10.8px;
  line-height:1.55;
  font-weight:700;
}

/* Plan */
.note-box{
  display:inline-block;
  margin-top:4px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  padding:17px 18px;
  color:#6b5d5a;
  box-shadow:0 10px 24px rgba(207,95,120,.05);
}
.plan-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.plan-card{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1.5px solid #e9b9c3;
  border-radius:18px;
  padding:23px 17px 20px;
  text-align:center;
  box-shadow:var(--shadow-soft);
}
.plan-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,#f5c5cf,var(--rose));
  opacity:.75;
}
.plan-card h3{
  margin:0 0 8px;
  font-family:var(--serif);
  font-size:18px;
  line-height:1.35;
  color:var(--rose);
}
.plan-card p{
  min-height:42px;
  margin:0;
  color:#756864;
  font-size:11.5px;
  font-weight:700;
  line-height:1.6;
}
.plan-card strong{
  display:block;
  margin:12px 0 2px;
  font-size:20px;
  letter-spacing:.04em;
  color:#342c2a;
}
.plan-card small{
  display:block;
  color:#897a77;
  font-weight:900;
}
.plan-card span{
  display:inline-block;
  margin-top:11px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 13px;
  font-size:11px;
  font-weight:900;
  color:#514644;
  background:#fffdfb;
}
.plan-consult{
  width:min(720px,100%);
  margin:25px auto 0;
  padding:13px 24px;
  text-align:center;
  border-radius:999px;
  background:var(--rose);
  color:#fff;
  font-weight:900;
  box-shadow:0 15px 28px rgba(207,95,120,.22);
}

/* Access */
.access{background:#fff}
.access-grid{
  display:grid;
  grid-template-columns:1fr 1.12fr;
  gap:24px;
  align-items:stretch;
}
.access-copy{
  grid-row:span 2;
  background:#fff7f9;
  border:1px solid var(--line);
  border-radius:24px;
  padding:34px;
  box-shadow:0 10px 26px rgba(207,95,120,.05);
}
.access-copy h2{
  margin:0 0 17px;
  font-family:var(--serif);
  font-size:28px;
  line-height:1.55;
  letter-spacing:.06em;
  color:#312826;
}
.access-copy ul{
  display:grid;
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}
.access-copy li{
  font-weight:900;
  color:#4e4240;
}
.access-copy li::before{
  content:"✓";
  display:inline-grid;
  place-items:center;
  width:23px;
  height:23px;
  margin-right:8px;
  border-radius:50%;
  background:var(--rose);
  color:#fff;
  font-size:13px;
}
.map-card{
  position:relative;
  min-height:205px;
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  background:#f6f1eb;
  box-shadow:0 10px 26px rgba(207,95,120,.05);
}
.map-lines{
  position:absolute;
  inset:0;
  background:
    linear-gradient(35deg,transparent 44%,rgba(207,95,120,.23) 45%,rgba(207,95,120,.23) 48%,transparent 49%),
    linear-gradient(-22deg,transparent 38%,rgba(92,126,92,.16) 39%,rgba(92,126,92,.16) 42%,transparent 43%),
    linear-gradient(90deg,transparent 28%,rgba(180,158,139,.2) 29%,rgba(180,158,139,.2) 31%,transparent 32%);
}
.pin{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:14px 22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  text-align:center;
  color:var(--rose);
  font-weight:900;
  box-shadow:var(--shadow);
}
.pin::before{
  content:"📍";
  display:block;
  font-size:28px;
}
.trial-card{
  display:grid;
  grid-template-columns:1.08fr 220px;
  gap:22px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:26px;
  box-shadow:var(--shadow);
}
.trial-card h2{
  margin:0 0 8px;
  font-family:var(--serif);
  font-size:31px;
  line-height:1.4;
  color:var(--rose);
  letter-spacing:.06em;
}
.trial-card p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:14px;
  font-weight:600;
}
.trial-card .btn{
  margin:4px 8px 4px 0;
  min-width:184px;
  padding:12px 22px;
}
.trial-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:20px;
}

/* Footer */
.site-footer{
  padding:46px 0 88px;
  border-top:1px solid var(--line);
  background:#fffaf8;
}
.footer-inner{
  width:min(1480px,calc(100% - 56px));
  margin:auto;
  display:grid;
  grid-template-columns:1.15fr 1.35fr 1.35fr 1fr;
  gap:28px;
  align-items:start;
}
.footer-nav,
.footer-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  color:#6d5f5c;
  font-size:11.5px;
}
.footer-info p{
  margin:0 0 4px;
  color:#6d5f5c;
  font-size:11.5px;
}
.copyright{
  text-align:center;
  margin:28px 0 0;
  color:#9a8c89;
  font-size:11px;
}
.fixed-cta{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:990;
  padding:13px 23px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--rose),#df7c91);
  color:#fff;
  font-weight:900;
  box-shadow:0 16px 36px rgba(207,95,120,.32);
}

/* Animation */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .75s ease,transform .75s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.24s}
.default-page{padding:70px 0}
.default-page h1{
  font-family:var(--serif);
  font-size:40px;
}
.entry-content{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:30px;
}

/* Responsive */
@media (max-width:1280px){
  .hero-inner{
    grid-template-columns:minmax(380px,.92fr) minmax(620px,1.08fr);
    gap:36px;
  }
  .hero h1{
    font-size:clamp(48px,4.4vw,66px);
  }
  .hero-badges div{
  min-height:104px;
  aspect-ratio:1/1;
  border:1.5px solid #e9bbb8;
  background:rgba(255,255,255,.94);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  font-size:11.5px;
  line-height:1.45;
  font-weight:900;
  color:var(--rose-dark);
  box-shadow:0 10px 24px rgba(207,95,120,.08);
  padding:13px 9px 12px;
}
.hero-badge-icon{
  width:31px;
  height:31px;
  object-fit:contain;
  margin:0 0 7px;
  display:block;
}
.hero-badge-text{
  display:block;
  color:var(--rose-dark);
  font-size:11.5px;
  font-weight:900;
  line-height:1.45;
}

  .hero-main-img{
    height:520px;
  }
  .circle-shop{
    width:150px;
    height:150px;
    right:28px;
    top:84px;
  }
  .circle-parking{
    width:200px;
    height:200px;
    right:92px;
    bottom:94px;
  }
  .hero-label{
    width:110px;
    height:110px;
    right:22px;
    top:248px;
    font-size:15px;
  }
}
@media (max-width:1180px){
  .container{width:min(1120px,calc(100% - 44px))}
  .hero-inner,
  .compare-layout,
  .split-heading,
  .access-grid{
    grid-template-columns:1fr;
  }
  .hero-copy{
    padding-bottom:0;
  }
  .hero-visual{min-height:auto}
  .hero-main-img{
    height:500px;
    border-radius:32px;
    object-position:64% center;
  }
  .hero-visual::before{
    inset:0 auto 0 0;
    width:42%;
  }
  .reason-grid{grid-template-columns:repeat(3,1fr)}
  .facility-grid{grid-template-columns:repeat(3,1fr)}
  .worry-grid{grid-template-columns:repeat(3,1fr)}
  .footer-inner{
    width:min(1120px,calc(100% - 44px));
    grid-template-columns:1fr 1fr;
  }
  .compare-side{
    display:grid;
    grid-template-columns:1fr 230px;
    gap:22px;
    align-items:center;
  }
  .trial-card{grid-template-columns:1fr 210px}
}
@media (max-width:800px){
  body{font-size:14px}
  .header-inner{
    height:70px;
    width:min(100% - 28px,1320px);
  }
  .brand-main{font-size:26px}
  .nav-toggle{display:flex}
  .global-nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:70px;
    flex-direction:column;
    gap:8px;
    background:#fff;
    padding:18px 24px 26px;
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px rgba(63,42,44,.08);
  }
  .global-nav.is-open{display:flex}
  .global-nav a:not(.nav-cta){padding:10px}
  .hero{
    padding:28px 0 44px;
  }
  .hero-inner{
    width:calc(100% - 28px);
    min-height:auto;
    gap:24px;
  }
  .hero h1{font-size:42px}
  .hero-badges{grid-template-columns:repeat(2,1fr)}
  .hero-badges div{
  min-height:104px;
  aspect-ratio:1/1;
  border:1.5px solid #e9bbb8;
  background:rgba(255,255,255,.94);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  font-size:11.5px;
  line-height:1.45;
  font-weight:900;
  color:var(--rose-dark);
  box-shadow:0 10px 24px rgba(207,95,120,.08);
  padding:13px 9px 12px;
}
.hero-badge-icon{
  width:31px;
  height:31px;
  object-fit:contain;
  margin:0 0 7px;
  display:block;
}
.hero-badge-text{
  display:block;
  color:var(--rose-dark);
  font-size:11.5px;
  font-weight:900;
  line-height:1.45;
}

  .hero-main-img{
    height:410px;
    border-radius:28px;
  }
  .hero-visual::before{
    width:38%;
  }
  .circle-shop{
    width:126px;
    height:126px;
    right:16px;
    top:14px;
  }
  .circle-parking{
    width:170px;
    height:170px;
    right:54px;
    bottom:22px;
  }
  .hero-label{
    width:96px;
    height:96px;
    font-size:15px;
    top:176px;
    right:10px;
  }
  .worry-grid,
  .reason-grid,
  .lesson-grid,
  .facility-grid,
  .plan-grid{
    grid-template-columns:1fr 1fr;
  }
  .compare-side{grid-template-columns:1fr}
  .trial-card{grid-template-columns:1fr}
  .trial-card img{display:none}
  .footer-inner{grid-template-columns:1fr}
  .fixed-cta{
    left:16px;
    right:16px;
    text-align:center;
  }
  .btn{width:100%}
}
@media (max-width:520px){
  .container{width:calc(100% - 26px)}
  section{padding:50px 0}
  .hero h1{font-size:35px}
  .hero-lead{font-size:13.5px}
  .hero-main-img{height:330px}
  .worry-icon{
  width:62px;
  height:62px;
  object-fit:contain;
  margin:0 0 9px;
  display:block;
}
  .circle-shop,
  .circle-parking,
  .hero-label{display:none}
  .hero-visual::before{
    width:54%;
  }
  .worry-grid,
  .reason-grid,
  .lesson-grid,
  .facility-grid,
  .plan-grid{
    grid-template-columns:1fr;
  }
  .compare-table{font-size:12px}
  .compare-table th,
  .compare-table td{padding:10px}
  .access-copy,
  .trial-card{padding:22px}
  .section-copy h2,
  .compare-side h2,
  .access-copy h2,
  .trial-card h2{
    font-size:26px;
  }
  .footer-inner{width:calc(100% - 26px)}
}


/* ===== 2026-06-02 fine tune: hero badge / worry icons / price ===== */

/* 修正1：キービジュアル内 丸枠アイコンを小さくして円内へ収める */
.hero-badges{
  max-width:500px !important;
  gap:11px !important;
  margin:22px 0 22px !important;
}
.hero-badges div{
  min-height:94px !important;
  width:94px !important;
  height:94px !important;
  aspect-ratio:1/1 !important;
  padding:10px 7px 9px !important;
  overflow:hidden !important;
}
.hero-badge-icon{
  width:24px !important;
  height:24px !important;
  object-fit:contain !important;
  margin:0 0 5px !important;
  flex:0 0 auto !important;
}
.hero-badge-text{
  display:block !important;
  font-size:10px !important;
  line-height:1.35 !important;
  letter-spacing:.02em !important;
  font-weight:900 !important;
  color:var(--rose-dark) !important;
  max-width:78px !important;
}
.hero-copy .cta-row{
  margin-top:4px !important;
}

/* 修正2：こんなお悩み アイコンとテキストを見やすくする */
.worries{
  padding-top:45px !important;
}
.worry-grid{
  gap:18px !important;
}
.worry-card{
  min-height:126px !important;
  padding:13px 10px 14px !important;
}
.worry-icon{
  width:54px !important;
  height:54px !important;
  object-fit:contain !important;
  margin:0 0 8px !important;
}
.worry-card p{
  font-size:13px !important;
  line-height:1.55 !important;
  font-weight:900 !important;
}

/* 修正3：料金表を見せる */
.plan-card strong{
  font-size:20px !important;
  margin:11px 0 3px !important;
}
.plan-card small{
  font-size:12px !important;
  color:#897a77 !important;
}
.plan-card span{
  margin-top:10px !important;
  padding:7px 14px !important;
  font-size:13px !important;
  color:var(--rose-dark) !important;
  background:#fff7f9 !important;
  border-color:#e9b9c3 !important;
}
.note-box{
  font-size:12px !important;
  line-height:1.7 !important;
}

@media (max-width:1280px){
  .hero-badges div{
    width:86px !important;
    height:86px !important;
    min-height:86px !important;
  }
  .hero-badge-icon{
    width:21px !important;
    height:21px !important;
  }
  .hero-badge-text{
    font-size:9px !important;
    max-width:70px !important;
  }
}

@media (max-width:800px){
  .hero-badges{
    max-width:none !important;
    grid-template-columns:repeat(2,1fr) !important;
  }
  .hero-badges div{
    width:auto !important;
    height:auto !important;
    min-height:92px !important;
    border-radius:20px !important;
  }
  .hero-badge-icon{
    width:30px !important;
    height:30px !important;
  }
  .hero-badge-text{
    font-size:11px !important;
    max-width:none !important;
  }
  .worry-icon{
    width:58px !important;
    height:58px !important;
  }
}


/* ===== 2026-06-02 fine tune 2: enlarge hero circle icons and worry icons ===== */

/* ヘッダー・キービジュアルの横幅を広くして、丸バッジが収まりやすいよう調整 */
.header-inner{
  width:min(1560px,calc(100% - 48px)) !important;
}
.hero-inner{
  width:min(1620px,calc(100% - 48px)) !important;
  grid-template-columns:minmax(430px,540px) minmax(860px,1fr) !important;
  gap:64px !important;
}
.hero-copy{
  min-width:0 !important;
}

/* キービジュアル内 4つの丸バッジ：アイコン・文字を拡大 */
.hero-badges{
  max-width:590px !important;
  gap:14px !important;
  margin:24px 0 25px !important;
}
.hero-badges div{
  width:112px !important;
  height:112px !important;
  min-height:112px !important;
  aspect-ratio:1/1 !important;
  padding:13px 8px 12px !important;
  border-radius:50% !important;
  overflow:hidden !important;
}
.hero-badge-icon{
  width:34px !important;
  height:34px !important;
  object-fit:contain !important;
  margin:0 0 7px !important;
  flex:0 0 auto !important;
}
.hero-badge-text{
  display:block !important;
  max-width:92px !important;
  font-size:11.5px !important;
  line-height:1.36 !important;
  letter-spacing:.015em !important;
  font-weight:900 !important;
  color:var(--rose-dark) !important;
}
.hero-copy .cta-row{
  margin-top:5px !important;
}

/* こんなお悩みありませんか？：イラスト・テキストを拡大 */
.worry-grid{
  gap:20px !important;
}
.worry-card{
  min-height:145px !important;
  padding:15px 10px 16px !important;
}
.worry-icon{
  width:72px !important;
  height:72px !important;
  object-fit:contain !important;
  margin:0 0 10px !important;
  display:block !important;
}
.worry-card p{
  font-size:13.8px !important;
  line-height:1.55 !important;
  font-weight:900 !important;
  letter-spacing:.025em !important;
}

/* 画面幅が少し狭い時だけ、はみ出さないよう段階的に縮小 */
@media (max-width:1420px){
  .hero-inner{
    grid-template-columns:minmax(410px,520px) minmax(760px,1fr) !important;
    gap:42px !important;
  }
  .hero-badges{
    max-width:540px !important;
    gap:12px !important;
  }
  .hero-badges div{
    width:102px !important;
    height:102px !important;
    min-height:102px !important;
  }
  .hero-badge-icon{
    width:30px !important;
    height:30px !important;
  }
  .hero-badge-text{
    font-size:10.5px !important;
    max-width:84px !important;
  }
}

@media (max-width:1280px){
  .hero-inner{
    grid-template-columns:minmax(380px,.95fr) minmax(640px,1fr) !important;
    gap:32px !important;
  }
  .hero-badges{
    max-width:500px !important;
    gap:10px !important;
  }
  .hero-badges div{
    width:92px !important;
    height:92px !important;
    min-height:92px !important;
    padding:10px 6px 9px !important;
  }
  .hero-badge-icon{
    width:27px !important;
    height:27px !important;
    margin-bottom:5px !important;
  }
  .hero-badge-text{
    font-size:9.5px !important;
    max-width:76px !important;
  }
}

@media (max-width:1180px){
  .hero-inner{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }
  .hero-badges{
    max-width:590px !important;
  }
  .hero-badges div{
    width:112px !important;
    height:112px !important;
    min-height:112px !important;
  }
  .hero-badge-icon{
    width:34px !important;
    height:34px !important;
  }
  .hero-badge-text{
    font-size:11.5px !important;
    max-width:92px !important;
  }
}

@media (max-width:800px){
  .hero-badges{
    grid-template-columns:repeat(2,1fr) !important;
    max-width:none !important;
  }
  .hero-badges div{
    width:auto !important;
    height:auto !important;
    min-height:108px !important;
    border-radius:20px !important;
  }
  .hero-badge-icon{
    width:38px !important;
    height:38px !important;
  }
  .hero-badge-text{
    font-size:12px !important;
    max-width:none !important;
  }
  .worry-icon{
    width:74px !important;
    height:74px !important;
  }
  .worry-card p{
    font-size:14px !important;
  }
}


/* ===== 2026-06-02 safe restore: key visual balance ===== */
/* 前回の大幅変更を戻し、安定していたレイアウトをベースに微調整のみ行います */

.hero{
  padding:48px 0 50px !important;
  background:linear-gradient(90deg,#fff8fa 0%,#fffaf7 36%,#fffdfb 100%) !important;
}
.hero-inner{
  width:min(1480px,calc(100% - 56px)) !important;
  margin-inline:auto !important;
  display:grid !important;
  grid-template-columns:minmax(430px,540px) minmax(650px,1fr) !important;
  gap:54px !important;
  align-items:center !important;
  min-height:auto !important;
}
.hero-copy{
  width:auto !important;
  margin-left:0 !important;
  padding:0 !important;
}
.hero h1{
  font-size:clamp(50px,4.35vw,72px) !important;
  line-height:1.18 !important;
  margin:0 0 18px !important;
}
.hero-lead{
  max-width:500px !important;
  font-size:14px !important;
  line-height:1.9 !important;
  margin:0 0 20px !important;
}
.hero-visual{
  position:relative !important;
  height:500px !important;
  min-height:500px !important;
  padding:0 !important;
  display:block !important;
  overflow:visible !important;
}
.hero-main-img{
  width:100% !important;
  height:500px !important;
  object-fit:cover !important;
  object-position:62% center !important;
  border-radius:0 0 0 76px !important;
  box-shadow:0 28px 54px rgba(121,67,78,.14) !important;
}
.hero-visual::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:38% !important;
  z-index:3 !important;
  pointer-events:none !important;
  background:linear-gradient(90deg,#fffdfb 0%,rgba(255,253,251,.88) 32%,rgba(255,253,251,.52) 66%,rgba(255,253,251,0) 100%) !important;
}
.hero-visual::after{
  display:none !important;
}
.circle-shop{
  width:168px !important;
  height:168px !important;
  right:34px !important;
  top:24px !important;
}
.circle-parking{
  width:222px !important;
  height:222px !important;
  right:86px !important;
  bottom:38px !important;
}
.hero-label{
  width:118px !important;
  height:118px !important;
  right:16px !important;
  top:210px !important;
  font-size:16px !important;
  line-height:1.45 !important;
}

/* 丸アイコンはCTA上で収めつつ、視認性を確保 */
.hero-badges{
  max-width:560px !important;
  gap:12px !important;
  margin:23px 0 24px !important;
}
.hero-badges div{
  width:105px !important;
  height:105px !important;
  min-height:105px !important;
  border-radius:50% !important;
  padding:12px 7px 10px !important;
}
.hero-badge-icon{
  width:31px !important;
  height:31px !important;
  margin:0 0 6px !important;
}
.hero-badge-text{
  font-size:10.7px !important;
  line-height:1.35 !important;
  max-width:86px !important;
}

/* 悩みカードは現在より少し見やすく */
.worry-card{
  min-height:138px !important;
}
.worry-icon{
  width:66px !important;
  height:66px !important;
  margin-bottom:9px !important;
}
.worry-card p{
  font-size:13.4px !important;
  line-height:1.55 !important;
}

@media (max-width:1280px){
  .hero-inner{
    grid-template-columns:minmax(390px,500px) minmax(580px,1fr) !important;
    gap:36px !important;
  }
  .hero-visual,
  .hero-main-img{
    height:455px !important;
    min-height:455px !important;
  }
  .hero-badges div{
    width:92px !important;
    height:92px !important;
    min-height:92px !important;
  }
  .hero-badge-icon{
    width:27px !important;
    height:27px !important;
  }
  .hero-badge-text{
    font-size:9.5px !important;
    max-width:76px !important;
  }
}
@media (max-width:1180px){
  .hero-inner{
    grid-template-columns:1fr !important;
  }
  .hero-visual,
  .hero-main-img{
    height:460px !important;
    min-height:460px !important;
    border-radius:28px !important;
  }
}
@media (max-width:800px){
  .hero{
    padding:28px 0 44px !important;
  }
  .hero-inner{
    width:calc(100% - 28px) !important;
  }
  .hero-badges{
    grid-template-columns:repeat(2,1fr) !important;
    max-width:none !important;
  }
  .hero-badges div{
    width:auto !important;
    height:auto !important;
    min-height:104px !important;
    border-radius:20px !important;
  }
}


/* ===== 2026-06-02 hero closer to final design + larger reasons ===== */
/* 目的：添付1に近づけるため、キービジュアルを右端まで広げ、選ばれる理由カードを大きく表示 */

/* ヘッダー幅 */
.header-inner{
  width:min(1680px,calc(100% - 56px)) !important;
}

/* キービジュアル：中央寄せの箱感をやめ、右側ビジュアルを大きく */
.hero{
  padding:0 !important;
  background:linear-gradient(90deg,#fff8fa 0%,#fffaf7 38%,#fff 100%) !important;
  overflow:hidden !important;
}
.hero-bg{
  background:
    radial-gradient(circle at 9% 18%,rgba(249,224,232,.92),transparent 28%),
    radial-gradient(circle at 92% 12%,rgba(255,240,226,.74),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.18)) !important;
}

/* 左40%・右60%で、右画像を画面右端まで使う */
.hero-inner{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  min-height:520px !important;
  display:grid !important;
  grid-template-columns:42% 58% !important;
  gap:0 !important;
  align-items:stretch !important;
}

/* 左コピーは理想デザインのように左寄せ配置 */
.hero-copy{
  width:min(520px,calc(100% - 84px)) !important;
  margin-left:clamp(42px,5vw,86px) !important;
  padding:50px 0 44px !important;
  align-self:center !important;
  z-index:5 !important;
}
.eyebrow{
  font-size:13px !important;
  padding:7px 18px !important;
  margin:0 0 17px !important;
}
.hero h1{
  font-size:clamp(54px,4.55vw,76px) !important;
  line-height:1.16 !important;
  letter-spacing:.055em !important;
  margin:0 0 18px !important;
}
.hero-lead{
  max-width:450px !important;
  font-size:14px !important;
  line-height:1.9 !important;
  font-weight:700 !important;
  margin:0 0 20px !important;
}

/* キービジュアル内 丸バッジ：CTA上に横並びで収める */
.hero-badges{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  width:520px !important;
  max-width:100% !important;
  gap:12px !important;
  margin:22px 0 22px !important;
}
.hero-badges div{
  width:116px !important;
  height:116px !important;
  min-height:116px !important;
  aspect-ratio:1/1 !important;
  border-radius:50% !important;
  padding:13px 8px 12px !important;
  border:1.5px solid #e6b9b7 !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 10px 24px rgba(207,95,120,.08) !important;
  overflow:hidden !important;
}
.hero-badge-icon{
  width:36px !important;
  height:36px !important;
  object-fit:contain !important;
  margin:0 0 7px !important;
}
.hero-badge-text{
  display:block !important;
  max-width:94px !important;
  font-size:11.7px !important;
  line-height:1.36 !important;
  letter-spacing:.01em !important;
  font-weight:900 !important;
  color:var(--rose-dark) !important;
}
.hero-copy .cta-row{
  gap:16px !important;
}
.hero-copy .btn{
  min-width:220px !important;
  padding:15px 28px !important;
  font-size:14px !important;
}
.hero-copy .btn-secondary{
  min-width:210px !important;
}

/* 右ビジュアル：画面右端まで使用。左に白フェード */
.hero-visual{
  position:relative !important;
  height:520px !important;
  min-height:520px !important;
  align-self:stretch !important;
  display:block !important;
  padding:0 !important;
  overflow:visible !important;
}
.hero-main-img{
  width:100% !important;
  height:520px !important;
  object-fit:cover !important;
  object-position:50% center !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.hero-visual::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:42% !important;
  z-index:3 !important;
  pointer-events:none !important;
  background:linear-gradient(90deg,#fffdfb 0%,rgba(255,253,251,.95) 28%,rgba(255,253,251,.62) 62%,rgba(255,253,251,0) 100%) !important;
}
.hero-visual::after{
  display:none !important;
}

/* 丸写真・ピンク丸 */
.circle-img{
  border:7px solid #fff !important;
  box-shadow:0 18px 40px rgba(78,52,55,.20) !important;
  z-index:4 !important;
}
.circle-shop{
  width:178px !important;
  height:178px !important;
  right:56px !important;
  top:34px !important;
}
.circle-parking{
  width:238px !important;
  height:238px !important;
  right:142px !important;
  bottom:46px !important;
}
.hero-label{
  width:124px !important;
  height:124px !important;
  right:42px !important;
  top:205px !important;
  font-size:17px !important;
  line-height:1.48 !important;
  z-index:5 !important;
}

/* キービジュアル下の余白を理想デザイン寄りに */
.worries{
  padding-top:38px !important;
}

/* 選ばれる理由：カード内の画像を2周り大きく */
.reasons .container{
  width:min(1560px,calc(100% - 36px)) !important;
}
.reason-grid{
  gap:22px !important;
}
.reason-card{
  padding:12px 12px 18px !important;
  border-radius:20px !important;
}
.reason-card img{
  aspect-ratio:1.38/1 !important;
  border-radius:15px !important;
  margin-bottom:12px !important;
}
.reason-card .num{
  width:38px !important;
  height:38px !important;
  left:8px !important;
  top:8px !important;
  font-size:14px !important;
}
.reason-card h3{
  font-size:13.6px !important;
  line-height:1.5 !important;
}

/* こんなお悩みのアイコンも視認性を維持 */
.worry-card{
  min-height:142px !important;
}
.worry-icon{
  width:70px !important;
  height:70px !important;
  margin-bottom:10px !important;
}
.worry-card p{
  font-size:13.8px !important;
  line-height:1.55 !important;
}

/* 中間幅：はみ出し防止 */
@media (max-width:1400px){
  .hero-inner{
    grid-template-columns:43% 57% !important;
    min-height:480px !important;
  }
  .hero-visual,
  .hero-main-img{
    height:480px !important;
    min-height:480px !important;
  }
  .hero-copy{
    width:min(480px,calc(100% - 60px)) !important;
    margin-left:40px !important;
  }
  .hero h1{
    font-size:clamp(46px,4.1vw,64px) !important;
  }
  .hero-lead{
    max-width:410px !important;
    font-size:12.5px !important;
  }
  .hero-badges{
    width:450px !important;
    gap:10px !important;
  }
  .hero-badges div{
    width:102px !important;
    height:102px !important;
    min-height:102px !important;
  }
  .hero-badge-icon{
    width:30px !important;
    height:30px !important;
  }
  .hero-badge-text{
    font-size:10px !important;
    max-width:82px !important;
  }
  .hero-copy .btn{
    min-width:186px !important;
    padding:13px 22px !important;
    font-size:12.5px !important;
  }
  .circle-shop{
    width:145px !important;
    height:145px !important;
    right:34px !important;
    top:34px !important;
  }
  .circle-parking{
    width:196px !important;
    height:196px !important;
    right:96px !important;
    bottom:50px !important;
  }
  .hero-label{
    width:104px !important;
    height:104px !important;
    right:24px !important;
    top:188px !important;
    font-size:14px !important;
  }
}

@media (max-width:1180px){
  .hero{
    padding:30px 0 48px !important;
  }
  .hero-inner{
    width:min(1120px,calc(100% - 44px)) !important;
    margin-inline:auto !important;
    grid-template-columns:1fr !important;
    min-height:auto !important;
    gap:28px !important;
  }
  .hero-copy{
    width:100% !important;
    margin-left:0 !important;
    padding:0 !important;
  }
  .hero-visual,
  .hero-main-img{
    height:460px !important;
    min-height:460px !important;
    border-radius:28px !important;
    overflow:hidden !important;
  }
  .hero-badges{
    width:560px !important;
  }
  .hero-badges div{
    width:116px !important;
    height:116px !important;
    min-height:116px !important;
  }
}

@media (max-width:800px){
  .hero-inner{
    width:calc(100% - 28px) !important;
  }
  .hero-badges{
    width:100% !important;
    grid-template-columns:repeat(2,1fr) !important;
  }
  .hero-badges div{
    width:auto !important;
    height:auto !important;
    min-height:108px !important;
    border-radius:20px !important;
  }
  .reason-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

@media (max-width:520px){
  .hero h1{
    font-size:35px !important;
  }
  .hero-visual,
  .hero-main-img{
    height:330px !important;
    min-height:330px !important;
  }
  .circle-shop,
  .circle-parking,
  .hero-label{
    display:none !important;
  }
  .reason-grid{
    grid-template-columns:1fr !important;
  }
}


/* ===== 2026-06-02 v5: hero flexbox化で画像高さを確実にコピー列に追従させる ===== */
/*
  根本原因: gridのstretchは絶対配置の子要素のみのアイテムでは高さが伝わらないケースがある。
  解決策 : hero-innerをflexboxに変更。flex-itemは親の高さが確定するため
            hero-visualが確実にhero-copyと同じ高さになり、
            absolute配置のhero-main-imgがそれをfillできる。
*/

/* ① heroセクション */
.hero{
  padding:0 !important;
  overflow:hidden !important;
}

/* ② hero-inner → flexbox */
.hero-inner{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:stretch !important;   /* 両列を同じ高さに */
  gap:0 !important;
  min-height:620px !important;
}

/* ③ コピー列：幅固定、コンテンツが高さを決める */
.hero-copy{
  flex:0 0 auto !important;
  width:min(46%,650px) !important;
  margin-left:0 !important;
  /*
    padding-left = .container と同じ左端計算式
    max(24px, (100vw - 1540px) / 2)
    → 下セクションの container 左端と完全に揃う
  */
  padding:56px 8px 56px max(24px,calc((100vw - 1540px) / 2)) !important;
  z-index:3 !important;
  box-sizing:border-box !important;
}

/* ④ h1 */
.hero h1{
  font-size:clamp(40px,3.2vw,58px) !important;
  margin:0 0 16px !important;
  line-height:1.22 !important;
}

/* ⑤ 画像列：flex:1で残り幅を占有。高さはhero-copyと同じになる */
.hero-visual{
  flex:1 !important;
  position:relative !important;
  min-height:620px !important;
  overflow:visible !important;
  display:block !important;
}

/* ⑥ 画像：absolute inset:0 でhero-visualを完全フィル */
.hero-main-img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:40% center !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
  display:block !important;
}

/* ⑦ 左フェード */
.hero-visual::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:38% !important;
  z-index:3 !important;
  pointer-events:none !important;
  background:linear-gradient(
    90deg,
    #fffdfb 0%,
    rgba(255,253,251,.95) 18%,
    rgba(255,253,251,.60) 52%,
    rgba(255,253,251,0) 100%
  ) !important;
}
.hero-visual::after{
  display:none !important;
}

/* ⑧ 丸写真・ピンクラベル */
.circle-img{
  border:7px solid #fff !important;
  box-shadow:0 18px 40px rgba(78,52,55,.22) !important;
  z-index:4 !important;
}
.circle-shop{
  width:182px !important;
  height:182px !important;
  right:48px !important;
  top:32px !important;
}
.circle-parking{
  width:248px !important;
  height:248px !important;
  right:144px !important;
  bottom:40px !important;
}
.hero-label{
  width:124px !important;
  height:124px !important;
  right:44px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  font-size:17px !important;
  line-height:1.48 !important;
  z-index:5 !important;
}

/* ⑨ badges */
.hero-badges{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:11px !important;
  margin:22px 0 26px !important;
  max-width:100% !important;
}
.hero-badges div{
  min-height:96px !important;
  aspect-ratio:1/1 !important;
}

/* ---- お悩みセクション ---- */
.worry-grid{ gap:18px !important; }
.worry-card{
  min-height:168px !important;
  padding:20px 10px 18px !important;
  border-radius:18px !important;
}
.worry-icon{
  width:96px !important;
  height:96px !important;
  margin:0 auto 11px !important;
}
.worry-card p{
  font-size:13.5px !important;
  font-weight:900 !important;
  line-height:1.6 !important;
  color:#4e4240 !important;
}

/* ---- レスポンシブ ---- */

/* 1400px以下 */
@media (max-width:1400px){
  .hero-inner{
    min-height:580px !important;
  }
  .hero-copy{
    width:min(46%,580px) !important;
  }
  .hero h1{
    font-size:clamp(38px,3.0vw,52px) !important;
  }
  .circle-shop{
    width:150px !important; height:150px !important;
    right:34px !important;  top:32px !important;
  }
  .circle-parking{
    width:206px !important; height:206px !important;
    right:108px !important; bottom:44px !important;
  }
  .hero-label{
    right:26px !important;
    width:108px !important; height:108px !important;
    font-size:15px !important;
  }
  .worry-icon{ width:86px !important; height:86px !important; }
}

/* 1180px以下：縦並び */
@media (max-width:1180px){
  .hero{ padding:30px 0 44px !important; }
  .hero-inner{
    flex-direction:column !important;
    width:min(1100px,calc(100% - 44px)) !important;
    margin-inline:auto !important;
    min-height:auto !important;
    gap:28px !important;
  }
  .hero-copy{
    width:100% !important;
    margin-left:0 !important;
    padding:0 !important;
  }
  .hero h1{ font-size:clamp(36px,4vw,52px) !important; }
  /* 縦並び時は固定高さ・static画像に戻す */
  .hero-visual{
    height:460px !important;
    min-height:460px !important;
    border-radius:24px !important;
    overflow:hidden !important;
  }
  .hero-main-img{
    position:static !important;
    inset:auto !important;
    width:100% !important;
    height:460px !important;
    min-height:460px !important;
    border-radius:24px !important;
  }
  .hero-visual::before{ display:none !important; }
  .hero-badges{ max-width:560px !important; }
}

/* 800px以下 */
@media (max-width:800px){
  .hero-inner{ width:calc(100% - 28px) !important; }
  .hero-badges{
    max-width:100% !important;
    grid-template-columns:repeat(2,1fr) !important;
  }
  .hero-badges div{
    width:auto !important; height:auto !important;
    min-height:108px !important;
    border-radius:20px !important;
  }
  .worry-grid{ grid-template-columns:repeat(3,1fr) !important; }
  .worry-icon{ width:80px !important; height:80px !important; }
}

/* 520px以下 */
@media (max-width:520px){
  .hero h1{ font-size:34px !important; }
  .hero-visual{ height:310px !important; min-height:310px !important; }
  .hero-main-img{ height:310px !important; min-height:310px !important; }
  .circle-shop,.circle-parking,.hero-label{ display:none !important; }
  .worry-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .worry-icon{ width:72px !important; height:72px !important; }
}


/* ===== comparison: h2を2行に・画像上辺と表上辺を揃える ===== */
/*
  手法: compare-side に display:contents を設定して、
        h2・img をグリッドの直接アイテムとして扱う。
          行1: h2（全列スパン、左側にmax-width制限）
          行2: img (列1) | table-wrap (列2) ← 同じ行 → 上辺が揃う
*/

/* compare-side の「箱」を消してコンテンツをグリッドへ */
.comparison .compare-side{
  display:contents !important;
}

/* 2行グリッドに再構成 */
.comparison .compare-layout{
  grid-template-columns:min(380px,28%) 1fr !important;
  grid-template-rows:auto auto !important;
  row-gap:22px !important;
  column-gap:44px !important;
  align-items:start !important;
}

/* 行1: h2 → 全列スパン、max-widthで左寄せに見せる */
.comparison .compare-side h2{
  grid-column:1 / -1 !important;
  grid-row:1 !important;
  margin:0 !important;
  max-width:460px !important;         /* "女性が比較しやすい" が1行に収まる幅 */
  font-size:clamp(26px,2.35vw,38px) !important;
  line-height:1.5 !important;
  letter-spacing:.07em !important;
}

/* 行2・列1: 女性画像 */
.comparison .compare-side img{
  grid-column:1 !important;
  grid-row:2 !important;
  width:100% !important;
  align-self:start !important;
  margin:0 !important;
}

/* 行2・列2: 比較表 → 画像と同じ行なので上辺が揃う */
.comparison .table-wrap{
  grid-column:2 !important;
  grid-row:2 !important;
  align-self:start !important;
  margin:0 !important;
}

/* 1180px以下ではdisplay:contentsを解除し縦並びに */
@media (max-width:1180px){
  .comparison .compare-side{
    display:block !important;
  }
  .comparison .compare-layout{
    grid-template-columns:1fr !important;
    grid-template-rows:auto !important;
    row-gap:28px !important;
  }
  .comparison .compare-side h2{
    grid-column:auto !important;
    grid-row:auto !important;
    max-width:100% !important;
    font-size:clamp(24px,3vw,34px) !important;
  }
  .comparison .compare-side img{
    grid-column:auto !important;
    grid-row:auto !important;
    max-width:340px !important;
  }
  .comparison .table-wrap{
    grid-column:auto !important;
    grid-row:auto !important;
  }
}


/* ===== hero: badges z-index修正 & CTAボタン横並び修正 ===== */

/*
  (2) バッジが画像の下に入る問題:
      hero-copyにposition:relativeがないためz-index:3が機能せず、
      後から描画されるhero-visual(position:relative)に上書きされていた。
      → hero-copyにposition:relativeを付与し、z-indexを有効にする。
      → hero-visualにz-index:1を設定してhero-copy(z-index:3)より下にする。
*/
.hero-copy{
  position:relative !important;
  z-index:3 !important;
}
.hero-visual{
  z-index:1 !important;
}

/*
  (3) CTAボタンを横並びに:
      flex-wrap:wrapで折り返していたのを、PCではnowrapに変更。
      ボタン幅をmin-width:0にしてflexで等幅に並べる。
*/
.hero .cta-row{
  flex-wrap:nowrap !important;
  gap:16px !important;
}
.hero .cta-row .btn{
  min-width:0 !important;
  flex:1 1 auto !important;
  white-space:nowrap !important;
}

/* モバイル(600px以下)は縦並びに戻す */
@media (max-width:600px){
  .hero .cta-row{
    flex-wrap:wrap !important;
  }
  .hero .cta-row .btn{
    flex:0 0 100% !important;
    width:100% !important;
  }
}


/* ===== h1「ジム通いは、」折り返し完全修正 ===== */
/*
  原因: 古いブロックの max-width:600px !important が残存しており、
        大きめのviewportで padding-left と組み合わさってテキスト幅が圧迫されていた。
  対策:
    1. max-width を none でクリア
    2. hero-copy幅を min(46%,750px) に拡大
    3. padding-left を上限 140px でキャップ（超ワイドでの圧迫防止）
    4. .h1-nowrap スパンに white-space:nowrap で強制1行
    5. h1 フォント上限を 52px に抑制
*/

.hero-copy{
  max-width:none !important;
  width:min(46%,750px) !important;
  padding-left:clamp(24px,calc((100vw - 1540px) / 2),140px) !important;
}

.hero h1{
  font-size:clamp(38px,3.0vw,52px) !important;
  line-height:1.25 !important;
}

/* 「ジム通いは、」を絶対に折り返させない */
.hero h1 .h1-nowrap{
  display:inline !important;
  white-space:nowrap !important;
}


/* ===== hero左端をcontainerと完全一致させる構造修正 ===== */
/*
  問題: hero-innerをwidth:100%にしたことでhero-copyがviewport端から始まり
        .containerを使う下セクションと左端がズレていた。
  解決: hero-innerを.containerと同じ幅計算に戻し、
        hero-visualだけ負のmargin-rightでviewport右端まで伸ばす。
        → hero-copyは自動的に.container左端と揃う。
*/

/* ① hero-inner = containerと同じ幅・中央揃え */
.hero-inner{
  width:min(1540px,calc(100% - 48px)) !important;
  max-width:none !important;
  margin-inline:auto !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding:0 !important;
}

/* ② hero-copy = 左パディング不要（hero-innerのmarginで揃う） */
.hero-copy{
  margin-left:0 !important;
  padding-left:8px !important;   /* 最小限の左余白のみ */
}

/* ③ hero-visual = 負のmargin-rightでviewport右端まで伸ばす */
.hero-visual{
  /* container右margin分だけ右にはみ出す */
  margin-right:calc(-1 * max(24px,(100vw - 1540px) / 2)) !important;
  /* 合わせてleft fader幅も調整 */
}

/* ④ 1180px以下（縦並び）は通常に戻す */
@media (max-width:1180px){
  .hero-inner{
    width:min(1100px,calc(100% - 44px)) !important;
    margin-inline:auto !important;
  }
  .hero-visual{
    margin-right:0 !important;
  }
  .hero-copy{
    padding-left:0 !important;
  }
}


/* ===== SP表示 3点修正 ===== */

/* ------
   (1) ヒーローバッジ：アイコン・テキストを枠に対して大きく
   現状: 168×168pxの枠に36pxアイコン・12px文字で小さい
   修正: アイコン64px・文字14pxに拡大し枠内のバランスを改善
------ */
@media (max-width:600px){
  .hero-badges{
    grid-template-columns:repeat(2,1fr) !important;
    gap:14px !important;
  }
  .hero-badges div{
    aspect-ratio:1/1 !important;
    min-height:auto !important;
    padding:16px 10px !important;
    border-radius:18px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .hero-badge-icon{
    width:62px !important;
    height:62px !important;
    margin:0 auto 10px !important;
  }
  .hero-badge-text{
    font-size:14px !important;
    line-height:1.45 !important;
    max-width:none !important;
    text-align:center !important;
  }
}

/* ------
   (2) 比較セクション 女性画像：左右余白を揃えフルワイドに
   現状: max-width:340pxが残りつつdisplay:blockで左揃えになっていた
   修正: width:100% / max-width:100%でコンテナ幅いっぱいに
------ */
@media (max-width:600px){
  .comparison .compare-side{
    display:block !important;
    width:100% !important;
  }
  .comparison .compare-side img{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }
}

/* ------
   (3) 料金セクション：ノートボックスをフルワイドにしてバランス修正
   現状: note-boxがinline-blockで左寄りの小さい幅になっていた
   修正: display:blockでコンテナ幅いっぱいに、plan-gridも1列に
------ */
@media (max-width:600px){
  .price .section-copy{
    margin-bottom:20px !important;
  }
  .price .note-box{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    text-align:left !important;
  }
  .price .plan-grid{
    grid-template-columns:1fr !important;
  }
}


/* ===== モバイル hero-copy 幅修正 =====
  原因: width:min(46%,750px) が390px幅でも適用され
        hero-copyが179px(=46%×390)まで縮小していた。
  修正: ≤1180pxでwidth:100%を上書きして全幅に戻す。
===== */
@media (max-width:1180px){
  .hero-copy{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    padding-left:8px !important;
    padding-right:8px !important;
    box-sizing:border-box !important;
  }
}


/* アクセスセクション 住所・電話番号 */
.access-address{
  margin:20px 0 0;
  font-size:13.5px;
  line-height:1.8;
  color:var(--text);
}
.access-address a{
  color:var(--rose);
  font-weight:700;
  text-decoration:none;
}
.access-address a:hover{
  text-decoration:underline;
}