@charset "utf-8";
/* CSS Document */

:root{
  --bg:#F7F5F1;
  --bg-warm:#F1ECE3;
  --bg-tint:#EAE4D8;
  --line:#DDD6C8;
  --line-soft:#E8E3D8;
  --ink:#2A2724;
  --ink-2:#4A4540;
  --ink-3:#6B6660;
  --ink-4:#8F8A82;
  --bronze:#8B6B3D;
  --bronze-deep:#6E4E24;
  --bronze-tint:#F0E7D5;
  --white:#FEFDFA;
  --accent-serif:'Noto Serif JP', 'Yu Mincho', serif;
  --sans:'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --western:'Cormorant Garamond', 'Noto Serif JP', serif;
  --shadow-soft: 0 4px 24px rgba(60, 50, 40, 0.06);
  --shadow-card: 0 2px 20px rgba(60, 50, 40, 0.05);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.75;
  font-weight:400;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  padding-bottom:96px;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}

/* ============ Layout ============ */
.wrap{max-width:640px; margin:0 auto; padding:0 24px;}
.section{padding:80px 0;}
.section-sm{padding:56px 0;}

/* ============ Header ============ */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(247,245,241,0.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{
  max-width:640px; margin:0 auto;
  padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-family:var(--accent-serif);
  font-size:13px; font-weight:500;
  letter-spacing:0.08em;
  color:var(--ink);
  line-height:1.4;
}
.brand img{
margin-bottom: 5px;	
}
.brand small{
  display:block;
  font-family:var(--western);
  font-size:10px;
  color:var(--ink-3);
  letter-spacing:0.15em;
  margin-top:2px;
}
.header-cta{
  font-size:11px;
  color:var(--bronze-deep);
  border:1px solid var(--bronze);
  padding:8px 14px;
  border-radius:2px;
  letter-spacing:0.08em;
  transition:all .3s;
}
.header-cta:hover{background:var(--bronze); color:#fff;}

/* ============ Hero ============ */
.hero{
  position:relative;
  padding:32px 0 72px;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 100%);
  overflow:hidden;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--western);
  font-size:11px;
  letter-spacing:0.25em;
  color:var(--bronze-deep);
  text-transform:uppercase;
  margin-bottom:24px;
}
.hero-eyebrow::before{
  content:""; width:24px; height:1px; background:var(--bronze);
}
.hero-location{
  font-size:12px;
  color:var(--ink-3);
  letter-spacing:0.15em;
  margin-bottom:14px;
}
.hero-title{
  font-family:var(--accent-serif);
  font-size:30px;
  line-height:1.55;
  font-weight:500;
  letter-spacing:0.02em;
  color:var(--ink);
  margin-bottom:24px;
  text-wrap:pretty;
}
.hero-title .em{
  background:linear-gradient(transparent 70%, var(--bronze-tint) 70%);
  padding:0 2px;
}
.hero-sub{
  font-size:14px;
  line-height:1.9;
  color:var(--ink-2);
  margin-bottom:20px;
  text-wrap:pretty;
}
.hero-note{
  font-size:12.5px;
  line-height:1.85;
  color:var(--ink-3);
  padding:14px 16px;
  border-left:2px solid var(--bronze);
  background:rgba(255,255,255,0.5);
  margin-bottom:32px;
}
.hero-visual{
  position:relative;
  aspect-ratio: 4/3;
  margin:32px -24px 32px;
  overflow:hidden;
}
.hero-visual .ph{border-radius:0;}
.hero-facts{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:0 0 32px;
}
.hero-facts .item{
  padding:16px 8px;
  text-align:center;
  border-right:1px solid var(--line-soft);
}
.hero-facts .item:last-child{border-right:none;}
.hero-facts .lbl{
  font-family:var(--western);
  font-size:10px;
  letter-spacing:0.15em;
  color:var(--ink-4);
  text-transform:uppercase;
  margin-bottom:6px;
  display:block;
}
.hero-facts .val{
  font-family:var(--accent-serif);
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  line-height:1.3;
}
.hero-facts .val small{
  font-size:10px;
  color:var(--ink-3);
  font-weight:400;
  display:block;
  margin-top:2px;
}
.hero-price-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:12px 4px 24px;
  margin-bottom:16px;
}
.hero-price-row .price-lbl{
  font-size:11px;
  color:var(--ink-3);
  letter-spacing:0.1em;
}
.hero-price-row .price-val{
  font-family:var(--accent-serif);
  font-size:26px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:0.02em;
}
.hero-price-row .price-val small{
  font-size:11px;
  color:var(--ink-3);
  font-weight:400;
  margin-left:4px;
}

/* ============ CTA Buttons ============ */
.cta-group{
  display:flex; flex-direction:column; gap:12px;
}
.btn{
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  padding:20px 24px;
  font-size:15px;
  font-weight:500;
  letter-spacing:0.08em;
  border-radius:2px;
  transition:all .3s ease;
  border:1px solid transparent;
  font-family:var(--sans);
  line-height:1.4;
}
.btn-primary{
  background:linear-gradient(135deg, var(--bronze) 0%, var(--bronze-deep) 100%);
  color:#fff;
  box-shadow: 0 6px 20px rgba(110,78,36,0.25);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow: 0 10px 28px rgba(110,78,36,0.35);
}
.btn-secondary{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--ink-3);
}
.btn-secondary:hover{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.btn .arrow{
  width:16px; height:1px; background:currentColor; position:relative;
}
.btn .arrow::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.btn-note{
  text-align:center;
  font-size:11px;
  color:var(--ink-3);
  letter-spacing:0.05em;
  margin-top:12px;
}
.btn-note::before{
  content:"◆";
  color:var(--bronze);
  margin-right:6px;
  font-size:8px;
  vertical-align:middle;
}

/* ============ Placeholders (image mocks) ============ */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(
      135deg,
      #E5DFD1 0px, #E5DFD1 2px,
      #DDD6C4 2px, #DDD6C4 4px
    ),
    linear-gradient(180deg, #E8E2D3, #D5CCB8);
  background-blend-mode:multiply;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-3);
}
.photo{
  position:relative;
  width:100%; height:100%;
  overflow:hidden;
  background:#EAE4D8;
}
.photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.ph-inner{
  position:relative; z-index:2;
  text-align:center;
  padding:16px;
  background:rgba(247,245,241,0.85);
  border:1px solid var(--line);
  max-width:70%;
}
.ph-inner .ph-cat{
  font-family:var(--western);
  font-size:10px;
  letter-spacing:0.2em;
  color:var(--bronze-deep);
  text-transform:uppercase;
  margin-bottom:6px;
}
.ph-inner .ph-desc{
  font-family:var(--accent-serif);
  font-size:12px;
  color:var(--ink-2);
  line-height:1.55;
  font-weight:400;
}
.ph-corner{
  position:absolute;
  top:12px; left:12px;
  font-family:var(--western);
  font-size:9px;
  letter-spacing:0.2em;
  color:var(--ink-3);
  background:rgba(247,245,241,0.85);
  padding:4px 8px;
  z-index:2;
}
.ph-corner-r{
  position:absolute;
  bottom:12px; right:12px;
  font-family:var(--western);
  font-size:9px;
  letter-spacing:0.2em;
  color:var(--ink-4);
  z-index:2;
}

/* ============ Section title ============ */
.sec-head{
  margin-bottom:40px;
  text-align:left;
}
.sec-eyebrow{
  font-family:var(--western);
  font-size:11px;
  letter-spacing:0.3em;
  color:var(--bronze-deep);
  text-transform:uppercase;
  margin-bottom:12px;
  display:flex; align-items:center; gap:10px;
}
.sec-eyebrow::before{
  content:""; width:20px; height:1px; background:var(--bronze);
}
.sec-title{
  font-family:var(--accent-serif);
  font-size:22px;
  line-height:1.6;
  font-weight:500;
  color:var(--ink);
  letter-spacing:0.02em;
  margin-bottom:16px;
  text-wrap:pretty;
}
.sec-lead{
  font-size:14px;
  line-height:1.95;
  color:var(--ink-2);
  text-wrap:pretty;
}

/* ============ Section: Intro (駅距離だけでは決めきれない方へ) ============ */
.intro{
  background:var(--white);
  padding:88px 0;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.intro-quote{
  font-family:var(--accent-serif);
  font-size:20px;
  line-height:2;
  font-weight:400;
  color:var(--ink);
  letter-spacing:0.02em;
  padding:24px 0 24px 20px;
  border-left:2px solid var(--bronze);
  margin:24px 0;
  text-wrap:pretty;
}
.intro-body{
  font-size:14px;
  line-height:1.95;
  color:var(--ink-2);
}
.intro-body + .intro-body{margin-top:16px;}

/* ============ Empathy ============ */
.empathy{
  background:var(--bg-warm);
}
.empathy-list{
  display:flex; flex-direction:column; gap:20px;
  margin-top:32px;
}
.empathy-card{
  background:var(--white);
  padding:28px 24px;
  border:1px solid var(--line-soft);
  position:relative;
}
.empathy-num{
  font-family:var(--western);
  font-size:11px;
  letter-spacing:0.2em;
  color:var(--bronze-deep);
  margin-bottom:10px;
}
.empathy-heading{
  font-family:var(--accent-serif);
  font-size:16px;
  font-weight:500;
  line-height:1.7;
  color:var(--ink);
  margin-bottom:12px;
  text-wrap:pretty;
}
.empathy-text{
  font-size:13.5px;
  line-height:1.9;
  color:var(--ink-2);
}

/* ============ Learn (この見学で分かること) ============ */
.learn-grid{
  display:flex; flex-direction:column; gap:32px;
  margin-top:16px;
}
.learn-item{
  display:flex; flex-direction:column; gap:16px;
}
.learn-img{
  aspect-ratio:4/3;
  margin:0 -24px;
}
.learn-body{
  padding:0 4px;
}
.learn-tag{
  display:inline-block;
  font-family:var(--western);
  font-size:10px;
  letter-spacing:0.25em;
  color:var(--bronze-deep);
  border:1px solid var(--bronze);
  padding:4px 10px;
  margin-bottom:14px;
}
.learn-h{
  font-family:var(--accent-serif);
  font-size:17px;
  font-weight:500;
  line-height:1.7;
  color:var(--ink);
  margin-bottom:10px;
  text-wrap:pretty;
}
.learn-p{
  font-size:13.5px;
  line-height:1.9;
  color:var(--ink-2);
}

/* ============ Features (家事効率×間取り) ============ */
.features{
  background:var(--white);
}

/* Tab row — reused from old floor plan */
.feat-tab-row{
  display:flex;
  gap:0;
  margin:36px 0 20px;
  border-bottom:1px solid var(--line);
}
.feat-tab{
  flex:1;
  padding:14px 8px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.15em;
  color:var(--ink-4);
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  cursor:pointer;
  transition:all .3s;
  text-align:center;
  position:relative;
  top:1px;
}
.feat-tab .feat-tab-sub{
  display:block;
  font-family:var(--western);
  font-size:9px;
  letter-spacing:0.2em;
  color:var(--ink-4);
  text-transform:uppercase;
  margin-top:4px;
  font-weight:400;
}
.feat-tab.active{
  color:var(--ink);
  border-bottom-color:var(--bronze);
}
.feat-tab.active .feat-tab-sub{color:var(--bronze-deep);}
.feat-tab:hover:not(.active){color:var(--ink-2);}

.feat-panel{
  display:none;
}
.feat-panel.active{display:block;}

/* Floor image with number pins */
.feat-plan{
  position:relative;
  background:var(--bg);
  border:1px solid var(--line-soft);
  padding:16px;
  margin:0 -8px 24px;
  overflow:hidden;
}
.feat-plan img{
  width:100%;
  height:auto;
  display:block;
}
.feat-pin{
  position:absolute;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--white);
  border:1.5px solid var(--bronze);
  color:var(--bronze-deep);
  font-family:var(--western);
  font-size:13px;
  font-weight:600;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transform:translate(-50%, -50%);
  transition:transform .25s, background .25s, color .25s, box-shadow .25s;
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
  z-index:2;
  padding:0;
  line-height:1;
}
.feat-pin:hover,
.feat-pin.active{
  background:var(--bronze);
  color:var(--white);
  transform:translate(-50%, -50%) scale(1.15);
  box-shadow:0 4px 14px rgba(0,0,0,0.2);
  z-index:3;
}
.feat-pin::after{
  content:"";
  position:absolute;
  inset:-6px;
  border:1px solid var(--bronze);
  border-radius:50%;
  opacity:0;
  transition:opacity .25s;
}
.feat-pin.active::after{opacity:0.5;}

/* Caption under plan */
.feat-plan-caption{
  font-size:12px;
  color:var(--ink-3);
  line-height:1.75;
  padding:0 4px;
  margin-bottom:24px;
  text-wrap:pretty;
}
.feat-plan-caption strong{
  font-family:var(--accent-serif);
  color:var(--ink);
  font-weight:500;
  font-size:13px;
  display:block;
  margin-bottom:4px;
}

/* Feature items list (1-4, mapped to pins) */
.feat-items{
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
}
.feat-item{
  display:grid;
  grid-template-columns: 44px 1fr;
  gap:14px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
  align-items:flex-start;
  cursor:pointer;
  transition:background .2s;
}
.feat-item:hover,
.feat-item.active{
  background:var(--bg);
}
.feat-item-num{
  width:34px; height:34px;
  border-radius:50%;
  border:1.5px solid var(--bronze);
  color:var(--bronze-deep);
  font-family:var(--western);
  font-size:13px;
  font-weight:600;
  display:flex; align-items:center; justify-content:center;
  background:var(--white);
  transition:background .25s, color .25s;
  margin-top:2px;
}
.feat-item.active .feat-item-num,
.feat-item:hover .feat-item-num{
  background:var(--bronze);
  color:var(--white);
}
.feat-item-cat{
  font-family:var(--western);
  font-size:10px;
  letter-spacing:0.2em;
  color:var(--bronze-deep);
  text-transform:uppercase;
  margin-bottom:5px;
}
.feat-item-h{
  font-family:var(--accent-serif);
  font-size:15px;
  font-weight:500;
  line-height:1.6;
  color:var(--ink);
  margin-bottom:6px;
  text-wrap:pretty;
}
.feat-item-p{
  font-size:12.5px;
  line-height:1.85;
  color:var(--ink-2);
}

/* Divider between "on-plan" and "spec" groups */
.feat-group-title{
  font-family:var(--accent-serif);
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:0.05em;
  margin:44px 0 4px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between;
}
.feat-group-title small{
  font-family:var(--western);
  font-size:10px;
  color:var(--ink-4);
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:400;
}
.feat-group-note{
  font-size:11.5px;
  color:var(--ink-3);
  line-height:1.7;
  margin-bottom:8px;
}

/* Spec cards (5-8, no pin) */
.feat-spec-list{
  display:flex; flex-direction:column;
}
.feat-spec-item{
  display:grid;
  grid-template-columns: 44px 1fr;
  gap:14px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
  align-items:flex-start;
}
.feat-spec-num{
  width:34px; height:34px;
  border-radius:50%;
  border:1px dashed var(--ink-4);
  color:var(--ink-3);
  font-family:var(--western);
  font-size:13px;
  font-weight:500;
  display:flex; align-items:center; justify-content:center;
  background:var(--white);
  margin-top:2px;
}

@media (min-width:720px){
  .feat-plan{margin-left:-24px; margin-right:-24px;}
  .feat-pin{width:38px; height:38px; font-size:14px;}
  .feat-item{grid-template-columns: 52px 1fr; gap:18px;}
  .feat-spec-item{grid-template-columns: 52px 1fr; gap:18px;}
}

@media (min-width:900px){
  .feat-plan-wrap{
    display:grid;
    grid-template-columns: 1.15fr 1fr;
    gap:32px;
    align-items:start;
  }
  .feat-plan-wrap .feat-plan{margin:0;}
  .feat-plan-wrap .feat-items{border-top:none; margin-top:-4px;}
  .feat-plan-wrap .feat-item:first-child{border-top:1px solid var(--line);}
}

/* ============ Location ============ */
.location{
  background:var(--bg-warm);
}
.loc-fact-row{
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}
.loc-fact-row:first-child{border-top:1px solid var(--line);}
.loc-fact-lbl{
  min-width:88px;
  font-family:var(--western);
  font-size:10px;
  letter-spacing:0.2em;
  color:var(--ink-4);
  text-transform:uppercase;
  padding-top:4px;
}
.loc-fact-body{
  flex:1;
}
.loc-fact-h{
  font-family:var(--accent-serif);
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  line-height:1.6;
  margin-bottom:6px;
}
.loc-fact-p{
  font-size:13px;
  line-height:1.85;
  color:var(--ink-2);
}
.loc-honest-note{
  margin-top:32px;
  padding:20px;
  background:var(--white);
  border:1px solid var(--line-soft);
  font-size:12.5px;
  line-height:1.9;
  color:var(--ink-2);
}

/* Location Map */
.loc-map-wrap{
  margin:36px 0 8px;
}
.loc-map-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  margin-bottom:16px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.loc-map-title{
  font-family:var(--accent-serif);
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:0.03em;
}
.loc-map-title small{
  font-family:var(--western);
  font-size:10px;
  color:var(--ink-4);
  letter-spacing:0.2em;
  text-transform:uppercase;
  margin-left:8px;
  font-weight:400;
}
.loc-map-addr{
  font-size:11.5px;
  color:var(--ink-3);
  letter-spacing:0.03em;
}
.loc-map-frame{
  position:relative;
  aspect-ratio: 4/3;
  overflow:hidden;
  background:var(--bg-warm);
  border:1px solid var(--line);
}
.loc-map-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.loc-map-actions{
  display:flex;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
}
.loc-map-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  font-size:11.5px;
  letter-spacing:0.08em;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:2px;
  transition:all .3s;
  font-family:var(--sans);
}
.loc-map-btn:hover{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.loc-map-btn .arrow{
  width:12px; height:1px; background:currentColor; position:relative;
}
.loc-map-btn .arrow::after{
  content:""; position:absolute; right:0; top:-2px;
  width:5px; height:5px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg);
}
@media (min-width:720px){
  .loc-map-frame{aspect-ratio: 16/9;}
}
.loc-honest-note strong{
  display:block;
  font-family:var(--accent-serif);
  color:var(--ink);
  font-weight:500;
  margin-bottom:8px;
  font-size:13.5px;
}

/* ============ Exterior ============ */
.exterior-frame{
  position:relative;
  aspect-ratio: 4/3;
  margin:32px -24px 8px;
  overflow:hidden;
}
.exterior-caption{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:14px 4px 24px;
  border-bottom:1px solid var(--line);
  margin:0 0 8px;
}
.exterior-caption .cap-l{
  font-family:var(--western);
  font-size:10px;
  letter-spacing:0.25em;
  color:var(--ink-4);
  text-transform:uppercase;
}
.exterior-caption .cap-r{
  font-family:var(--accent-serif);
  font-size:12px;
  color:var(--ink-3);
  letter-spacing:0.05em;
}

/* Location exterior */
.loc-exterior{
  position:relative;
  aspect-ratio: 16/10;
  margin:24px -24px 32px;
  overflow:hidden;
}
@media (min-width:720px){
  .exterior-frame, .loc-exterior{margin-left:-40px; margin-right:-40px;}
}

/* ============ Spec Table ============ */
.spec-table{
  width:100%;
  border-collapse:collapse;
  margin-top:32px;
  font-size:13px;
}
.spec-table th, .spec-table td{
  padding:16px 8px;
  text-align:left;
  border-bottom:1px solid var(--line-soft);
  line-height:1.7;
  vertical-align:top;
}
.spec-table th{
  font-weight:500;
  color:var(--ink-3);
  font-size:11px;
  letter-spacing:0.1em;
  width:34%;
  font-family:var(--sans);
}
.spec-table td{
  color:var(--ink);
}
.spec-table tr:first-child th, .spec-table tr:first-child td{
  border-top:1px solid var(--line);
}
.spec-price{
  font-family:var(--accent-serif);
  font-size:20px;
  font-weight:500;
  color:var(--ink);
}
.spec-price small{font-size:11px; color:var(--ink-3); font-weight:400; margin-left:4px;}

/* ============ Benefit (来場予約特典) ============ */
.benefit{
  background:linear-gradient(180deg, #F1ECE3 0%, #EAE3D3 100%);
  padding:80px 0;
  position:relative;
  overflow:hidden;
}
.benefit-headline{
  display:flex; align-items:baseline; gap:14px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.benefit-amount{
  font-family:var(--western);
  font-size:56px;
  line-height:1;
  color:var(--bronze-deep);
  font-weight:500;
  letter-spacing:-0.01em;
}
.benefit-amount .unit{
  font-family:var(--accent-serif);
  font-size:16px;
  color:var(--ink);
  font-weight:500;
  margin-left:4px;
  letter-spacing:0.05em;
}
.benefit-max{
  font-size:11px;
  color:var(--ink-3);
  letter-spacing:0.15em;
  font-family:var(--western);
  text-transform:uppercase;
  border:1px solid var(--ink-4);
  padding:4px 10px;
  align-self:center;
}
.benefit-lead{
  font-family:var(--accent-serif);
  font-size:17px;
  line-height:1.85;
  color:var(--ink);
  font-weight:500;
  margin-bottom:32px;
  text-wrap:pretty;
}
.benefit-cards{
  display:flex; flex-direction:column;
  gap:14px;
  margin-bottom:24px;
}
.benefit-card{
  background:var(--white);
  border:1px solid var(--line);
  padding:22px 20px;
  display:flex; gap:18px; align-items:flex-start;
  position:relative;
}
.benefit-card-num{
  flex-shrink:0;
  font-family:var(--western);
  font-size:22px;
  font-weight:500;
  color:var(--bronze-deep);
  line-height:1;
  border-right:1px solid var(--line);
  padding-right:18px;
  min-width:44px;
  text-align:center;
}
.benefit-card-body{flex:1;}
.benefit-card-title{
  font-family:var(--accent-serif);
  font-size:14.5px;
  font-weight:500;
  color:var(--ink);
  line-height:1.65;
  margin-bottom:6px;
}
.benefit-card-gift{
  display:inline-block;
  font-family:var(--western);
  font-size:13px;
  color:var(--bronze-deep);
  font-weight:500;
  letter-spacing:0.05em;
  margin-top:4px;
}
.benefit-card-gift .yen{
  font-family:var(--accent-serif);
  font-size:18px;
  margin-right:2px;
}
.benefit-plus{
  text-align:center;
  font-family:var(--western);
  font-size:14px;
  color:var(--bronze);
  letter-spacing:0.2em;
  margin:-4px 0;
  position:relative;
}
.benefit-plus::before, .benefit-plus::after{
  content:""; display:inline-block;
  width:24px; height:1px;
  background:var(--line);
  vertical-align:middle;
  margin:0 10px;
}
.benefit-note-btn{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  padding:14px 16px;
  background:transparent;
  border:1px solid var(--ink-4);
  border-radius:2px;
  font-family:var(--sans);
  font-size:12px;
  color:var(--ink-2);
  letter-spacing:0.05em;
  text-align:left;
  transition:all .3s;
  cursor:pointer;
}
.benefit-note-btn:hover{background:var(--white); border-color:var(--ink);}
.benefit-note-btn-icon{
  display:inline-flex; flex-direction:column; gap:4px;
  margin-right:12px;
}
.benefit-note-btn-icon span{
  width:14px; height:1px; background:var(--ink-2);
}
.benefit-note-btn-label{flex:1;}
.benefit-note-btn-arrow{
  font-family:var(--western); font-size:14px;
  color:var(--ink-3);
}
.benefit-period{
  margin-top:18px;
  padding:14px 16px;
  background:rgba(255,255,255,0.6);
  border:1px solid var(--line-soft);
  font-size:12px;
  color:var(--ink-2);
  line-height:1.75;
  text-align:center;
}
.benefit-period strong{
  font-family:var(--accent-serif);
  font-weight:500;
  color:var(--ink);
}

/* Modal for benefit note */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(30,25,20,0.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:100;
  opacity:0; pointer-events:none;
  transition:opacity .3s;
  display:flex; align-items:flex-end; justify-content:center;
}
.modal-backdrop.open{opacity:1; pointer-events:auto;}
.modal-panel{
  background:var(--white);
  width:100%; max-width:640px;
  max-height:85vh;
  overflow-y:auto;
  padding:28px 24px 40px;
  border-radius:8px 8px 0 0;
  transform:translateY(30px);
  transition:transform .35s ease;
  position:relative;
}
.modal-backdrop.open .modal-panel{transform:translateY(0);}
.modal-close{
  position:absolute;
  top:16px; right:16px;
  width:32px; height:32px;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-3);
  cursor:pointer;
  transition:all .2s;
}
.modal-close:hover{background:var(--ink); color:#fff; border-color:var(--ink);}
.modal-close::before, .modal-close::after{
  content:""; position:absolute;
  width:12px; height:1px;
  background:currentColor;
}
.modal-close::before{transform:rotate(45deg);}
.modal-close::after{transform:rotate(-45deg);}
.modal-eyebrow{
  font-family:var(--western);
  font-size:10px;
  letter-spacing:0.25em;
  color:var(--bronze-deep);
  text-transform:uppercase;
  margin-bottom:10px;
}
.modal-title{
  font-family:var(--accent-serif);
  font-size:17px;
  font-weight:500;
  color:var(--ink);
  line-height:1.7;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.modal-list{
  list-style:none;
  padding:0; margin:0;
}
.modal-list li{
  position:relative;
  padding:10px 0 10px 20px;
  font-size:12.5px;
  line-height:1.85;
  color:var(--ink-2);
  border-bottom:1px dotted var(--line-soft);
}
.modal-list li:last-child{border-bottom:none;}
.modal-list li::before{
  content:"※";
  position:absolute;
  left:0; top:11px;
  color:var(--bronze);
  font-size:11px;
}

/* ============ Event ============ */
.event{
  background:linear-gradient(180deg, var(--ink) 0%, #1E1B18 100%);
  color:#EDE7DA;
  padding:80px 0;
}
.event .sec-eyebrow{color:#C9A879;}
.event .sec-eyebrow::before{background:#C9A879;}
.event .sec-title{color:#F5F0E4;}
.event .sec-lead{color:#C9C2B4;}
.event-body{
  margin-top:32px;
  padding:28px;
  border:1px solid rgba(201,168,121,0.3);
  background:rgba(255,255,255,0.03);
}
.event-h{
  font-family:var(--accent-serif);
  font-size:16px;
  font-weight:500;
  color:#F5F0E4;
  margin-bottom:14px;
  line-height:1.7;
}
.event-p{
  font-size:13.5px;
  line-height:1.95;
  color:#C9C2B4;
}
.event .btn-secondary{
  color:#F5F0E4;
  border-color:#C9A879;
}
.event .btn-secondary:hover{
  background:#F5F0E4;
  color:var(--ink);
}
.event-cta-wrap{margin-top:28px;}

/* ============ Steps ============ */
.steps{
  background:var(--white);
}
.step-list{
  margin-top:32px;
  display:flex; flex-direction:column;
}
.step{
  display:flex; gap:20px;
  padding:24px 0;
  border-bottom:1px solid var(--line-soft);
  position:relative;
}
.step:last-child{border-bottom:none;}
.step-num{
  flex-shrink:0;
  width:36px; height:36px;
  border:1px solid var(--bronze);
  color:var(--bronze-deep);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--western);
  font-size:14px;
  font-weight:500;
  border-radius:50%;
}
.step-body{flex:1; padding-top:4px;}
.step-h{
  font-family:var(--accent-serif);
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  margin-bottom:6px;
  line-height:1.55;
}
.step-p{
  font-size:12.5px;
  line-height:1.85;
  color:var(--ink-3);
}

/* ============ Closing ============ */
.closing{
  background:var(--white);
  padding:96px 0 88px;
  text-align:center;
}
.closing-mark{
  font-family:var(--western);
  font-size:12px;
  letter-spacing:0.3em;
  color:var(--bronze-deep);
  text-transform:uppercase;
  margin-bottom:20px;
}
.closing-title{
  font-family:var(--accent-serif);
  font-size:22px;
  line-height:1.85;
  font-weight:500;
  color:var(--ink);
  letter-spacing:0.02em;
  margin-bottom:24px;
  text-wrap:pretty;
}
.closing-body{
  font-size:14px;
  line-height:2;
  color:var(--ink-2);
  margin-bottom:12px;
  text-wrap:pretty;
}
.closing .cta-group{margin-top:36px;}
.closing-hr{
  width:40px; height:1px;
  background:var(--bronze);
  margin:32px auto;
  border:none;
}

/* ============ Final CTA ============ */
.final-cta{
  background:linear-gradient(180deg, var(--bg-warm) 0%, var(--bg-tint) 100%);
  padding:72px 0 80px;
  text-align:center;
}
.final-h{
  font-family:var(--accent-serif);
  font-size:18px;
  font-weight:500;
  line-height:1.75;
  color:var(--ink);
  margin-bottom:12px;
}
.final-p{
  font-size:13px;
  color:var(--ink-3);
  line-height:1.85;
  margin-bottom:28px;
}
.final-cta .cta-group{margin-top:20px;}

/* ============ Footer ============ */
.site-footer{
  background:var(--ink);
  color:#B8B0A2;
  padding:48px 0 40px;
  font-size:11.5px;
  line-height:1.85;
}
.footer-brand{
  font-family:var(--accent-serif);
  color:#EDE7DA;
  font-size:14px;
  margin-bottom:16px;
  font-weight:500;
}
.footer-body{margin-bottom:20px;}
.footer-tel{
  color:#EDE7DA;
  font-family:var(--accent-serif);
  font-size:14px;
  letter-spacing:0.04em;
  border-bottom:1px solid rgba(201,168,121,0.5);
  padding-bottom:1px;
}
.footer-small{
  color:#8F8A82;
  font-size:10.5px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.08);
}

/* ============ Shop Info ============ */
.shopinfo{
  background:var(--white);
  padding:80px 0 88px;
  border-top:1px solid var(--line-soft);
}
.shop-card{
  margin-top:36px;
  border:1px solid var(--line);
  background:var(--bg);
  padding:32px 24px 24px;
}
.shop-name-row{
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
  margin-bottom:8px;
}
.shop-brand-mark{
  font-family:var(--western);
  font-size:11px;
  letter-spacing:0.3em;
  color:var(--bronze-deep);
  text-transform:uppercase;
  margin-bottom:8px;
}
.shop-name{
  font-family:var(--accent-serif);
  font-size:18px;
  font-weight:500;
  color:var(--ink);
  line-height:1.55;
  letter-spacing:0.02em;
}
.shop-table{
  margin:0; padding:0;
}
.shop-row{
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--line-soft);
}
.shop-row:last-child{border-bottom:none;}
.shop-row dt{
  flex-shrink:0;
  min-width:80px;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.2em;
  color:var(--ink-3);
  font-family:var(--sans);
  padding-top:4px;
}
.shop-row dd{
  flex:1;
  margin:0;
  font-size:14px;
  color:var(--ink);
  line-height:1.7;
  font-family:var(--sans);
}
.shop-tel{
  font-family:var(--accent-serif);
  font-size:22px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:0.04em;
  display:inline-block;
  border-bottom:1px solid var(--bronze);
  padding-bottom:2px;
}
.shop-note{
  display:inline-block;
  margin-left:10px;
  font-size:11.5px;
  color:var(--ink-3);
}

/* ============ Sticky Bottom CTA ============ */
.sticky-cta{
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:50;
  background:rgba(255,253,250,0.96);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:8px 12px 12px;
  box-shadow: 0 -4px 20px rgba(60,50,40,0.08);
}
.sticky-note{
  text-align:center;
  font-size:10.5px;
  color:var(--bronze-deep);
  letter-spacing:0.05em;
  margin-bottom:8px;
  font-weight:500;
}
.sticky-note::before{
  content:"●";
  color:var(--bronze);
  font-size:7px;
  margin-right:5px;
  vertical-align:middle;
}
.sticky-buttons{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap:8px;
}
.sticky-buttons-single{
  grid-template-columns: 1fr;
}
.sticky-btn{
  padding:16px 12px;
  font-size:14px;
  font-weight:500;
  border-radius:2px;
  letter-spacing:0.08em;
  text-align:center;
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  line-height:1.3;
}
.sticky-btn-primary{
  background:linear-gradient(135deg, var(--bronze) 0%, var(--bronze-deep) 100%);
  color:#fff;
  box-shadow: 0 4px 14px rgba(110,78,36,0.3);
}
.sticky-btn-primary:hover{filter:brightness(1.05);}
.sticky-arrow{
  font-size:14px;
  display:inline-block;
  transition:transform .3s;
}
.sticky-btn:hover .sticky-arrow{transform:translateX(3px);}

/* ============ Responsive (larger screens) ============ */
@media (min-width:720px){
  .wrap{padding:0 40px; max-width:720px;}
  .header-inner{padding:16px 40px; max-width:720px;}
  .hero-title{font-size:36px;}
  .sec-title{font-size:26px;}
  .hero-visual, .learn-img, .features-lead-img{margin-left:-40px; margin-right:-40px;}
  .cta-group{flex-direction:row;}
  .cta-group .btn{flex:1;}
  .closing .cta-group, .final-cta .cta-group{max-width:520px; margin-left:auto; margin-right:auto;}
  body{padding-bottom:0;}
  .sticky-cta{display:none;}
}

/* Very small screens */
@media (max-width:360px){
  .hero-title{font-size:26px;}
  .sec-title{font-size:20px;}
  .wrap{padding:0 20px;}
}

/* Reveal (subtle) */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .8s ease, transform .8s ease;}
.reveal.on{opacity:1; transform:none;}

/* Equipment badge grid */
.eq-title{
  font-family:var(--accent-serif);
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  letter-spacing:0.05em;
  margin:40px 0 16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between;
}
.eq-title small{
  font-family:var(--western);
  font-size:10px;
  color:var(--ink-4);
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:400;
}
.eq-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.eq-item{
  background:var(--white);
  padding:14px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  line-height:1.5;
  color:var(--ink-2);
}
.eq-item::before{
  content:"";
  flex-shrink:0;
  width:6px; height:6px;
  background:var(--bronze);
  border-radius:50%;
}
.eq-item strong{
  font-family:var(--accent-serif);
  color:var(--ink);
  font-weight:500;
  font-size:12.5px;
}

@media (min-width:720px){
  .eq-grid{grid-template-columns: repeat(3, 1fr);}
}