:root{
  --base:#faf6f1;
  --beige:#efe3d6;
  --sand:#e3d2c0;
  --ink:#3b3330;
  --sub:#6e625c;
  --accent:#7a5440;
  --sage:#8c9a80;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--base);color:var(--ink);font-family:"Zen Kaku Gothic New",sans-serif;font-size:16px;line-height:1.9;letter-spacing:.04em}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:"Zen Old Mincho",serif;font-weight:700;line-height:1.5}
h2{font-size:30px;margin-bottom:28px}
.label{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:22px;color:var(--accent);margin-bottom:6px}
.inner{max-width:1080px;margin:0 auto;padding:0 32px}
.inner.narrow{max-width:760px}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:16px 34px;font-weight:700;border-radius:2px}
.btn-line{background:#fff;color:var(--accent);border:1px solid var(--accent)}
.note{font-size:13px;color:var(--sub);margin-top:18px}

/* header */
.head{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:28px;padding:14px 40px;background:rgba(250,246,241,.95);border-bottom:1px solid var(--sand)}
.logo{font-family:"Cormorant Garamond",serif;font-size:30px;color:var(--accent)}
.logo span{font-family:"Zen Kaku Gothic New";font-size:11px;color:var(--sub);margin-left:10px;letter-spacing:.1em}
.gnav{margin-left:auto;display:flex;gap:24px;font-size:14px}
.head-btn{background:var(--accent);color:#fff;padding:10px 22px;font-size:14px;font-weight:700;border-radius:2px}

/* hero: 2分割 */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:640px;background:var(--beige)}
.hero-text{padding:90px 60px 80px max(40px,calc((100vw - 1080px)/2));display:flex;flex-direction:column;justify-content:center}
.hero-sub{font-size:14px;color:var(--sub);border-left:3px solid var(--sage);padding-left:12px;margin-bottom:26px}
.hero h1{font-size:50px;margin-bottom:26px}
.hero-lead{color:var(--sub);margin-bottom:34px}
.hero-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hero-cta p{font-size:14px;color:var(--sub)}
.hero-photo{padding:40px 40px 0 0}
.hero-photo img{border-radius:300px 300px 0 0}

/* 左右交互 */
.row{max-width:1080px;margin:0 auto;padding:110px 32px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.row.reverse .row-photo{order:2}
.row-photo{height:440px}
.row-photo.portrait{height:480px;max-width:400px}
.row-text p{margin-bottom:14px}
.row-text .name{font-size:26px}
.cert{font-size:14px;color:var(--accent)}
.map{display:flex;align-items:center;justify-content:center;background:var(--sand);color:var(--sub);font-size:14px}

/* 帯 */
.band{background:var(--beige);padding:100px 0}
.promise{list-style:none;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--sand)}
.promise li{padding:30px 30px 30px 0;border-bottom:1px solid var(--sand)}
.promise li:nth-child(odd){border-right:1px solid var(--sand)}
.promise li:nth-child(even){padding-left:30px}
.promise span{font-family:"Zen Old Mincho";font-size:28px;color:var(--sage)}
.promise h3{font-size:20px;margin:6px 0 8px}
.promise p{font-size:15px;color:var(--sub)}

.steps dt{font-weight:700;color:var(--accent);margin-top:18px}
.steps dd{border-bottom:1px dotted var(--sand);padding-bottom:12px}

/* 料金 */
.price{padding:100px 0}
.price-table{width:100%;border-collapse:collapse;background:#fff}
.price-table th{background:var(--accent);color:#fff;font-weight:500;padding:14px;font-size:14px;text-align:left}
.price-table td{padding:20px 14px;border-bottom:1px solid var(--sand)}
.price-table b{font-family:"Zen Old Mincho";font-size:28px;color:var(--accent)}

/* 声 */
.voices{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.voices figure{display:grid;grid-template-columns:120px 1fr;gap:22px}
.voices img{height:150px}
.meta{font-size:13px;color:var(--sage)}
.ttl{font-family:"Zen Old Mincho";font-weight:700;font-size:18px;margin:4px 0 8px}
.voices figcaption p:last-child{font-size:15px;color:var(--sub)}

/* 流れ */
.flow-sec{padding:100px 0}
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-left:1px solid var(--sand)}
.flow li{padding:10px 22px 10px;border-right:1px solid var(--sand);font-size:15px;color:var(--sub)}
.flow b{display:block;font-family:"Zen Old Mincho";font-size:18px;color:var(--ink);margin-bottom:8px}

.faq{background:var(--beige);padding:100px 0}
details{border-bottom:1px solid var(--sand);padding:18px 0}
summary{font-weight:700;cursor:pointer}
details p{margin-top:10px;color:var(--sub)}

.shop{display:grid;grid-template-columns:90px 1fr;row-gap:8px;font-size:15px;margin-bottom:24px}
.shop dt{color:var(--accent);font-weight:700}
.news{list-style:none;font-size:14px;border-top:1px solid var(--sand)}
.news li{padding:10px 0;border-bottom:1px solid var(--sand)}
.news time{color:var(--sage);margin-right:16px}

.cta{background:var(--accent);color:#fff;text-align:center;padding:90px 24px}
.cta p{margin-bottom:30px}
.cta .btn{background:#fff;color:var(--accent)}
.cta .btn-line{background:transparent;color:#fff;border-color:#fff}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.foot{text-align:center;padding:40px 0 100px;color:var(--sub)}
.sp-bar{display:none}

@media(max-width:820px){
  .gnav{display:none}
  .head{padding:12px 18px}
  .logo{font-size:24px}
  .logo span{display:none}
  .head-btn{margin-left:auto}
  h2{font-size:24px}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-photo{order:-1;padding:24px 24px 0;height:380px}
  .hero-text{padding:36px 24px 50px}
  .hero h1{font-size:34px}
  .row{grid-template-columns:1fr;gap:30px;padding:70px 24px}
  .row.reverse .row-photo{order:0}
  .row-photo,.row-photo.portrait{height:260px;max-width:none}
  .inner{padding:0 24px}
  .band,.price,.flow-sec,.faq{padding:70px 0}
  .promise{grid-template-columns:1fr}
  .promise li,.promise li:nth-child(even),.promise li:nth-child(odd){padding:22px 0;border-right:none}
  .price-table th:nth-child(4),.price-table td:nth-child(4){display:none}
  .price-table td{padding:14px 8px;font-size:14px}
  .price-table b{font-size:22px}
  .voices{grid-template-columns:1fr;gap:34px}
  .voices figure{grid-template-columns:90px 1fr;gap:16px}
  .voices img{height:110px}
  .flow{grid-template-columns:1fr;border-left:none}
  .flow li{border-right:none;border-bottom:1px solid var(--sand);padding:14px 0}
  .sp-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;align-items:center;justify-content:space-between;background:var(--ink);color:#fff;padding:10px 16px}
  .sp-bar b{font-size:20px;margin-left:8px}
  .sp-bar a{background:var(--accent);padding:10px 20px;font-weight:700;border-radius:2px}
}