:root{
  --bg:#0f251c;
  --panel:#102a22;
  --card:#142f26;
  --ink:#e7e3d9;
  --gold:#c3a35b;
  --muted:#c8c3b8;
  --accent:#e4c78a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family: "Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;line-height:1.7}
a{color:var(--gold);text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
/* header */
.header{position:sticky;top:0;z-index:50;background:rgba(16,42,34,.9);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid rgba(195,163,91,.2)}
.header-inner{display:flex;align-items:center;gap:14px;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:36px;height:36px;border-radius:6px;background:#111;object-fit:contain}
.brand .title{font-size:22px;font-weight:600;color:#efe8d6;letter-spacing:.06em}
.brand .subtitle{font-size:12px;color:var(--muted)}
/* hero */
.hero{position:relative;min-height:44vh;display:grid;place-items:center;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:url("../img/hero.jpg") center/cover no-repeat;filter:brightness(.55)}
.hero .overlay{position:relative;padding:64px 20px;text-align:left}
.hero h1{font-size:40px;margin:0 0 14px;color:var(--gold);letter-spacing:.12em}
.hero p{font-size:16px;color:#efe8d6;margin:0 0 18px}
.btn{display:inline-block;border:1px solid var(--gold);color:var(--gold);padding:10px 16px;border-radius:10px}
.section{padding:48px 0;border-top:1px solid rgba(255,255,255,.06)}
.section h2{font-size:26px;letter-spacing:.12em;margin:0 0 14px;color:#f0e7cf}
.badge{display:inline-block;border:1px solid var(--gold);color:var(--gold);padding:4px 10px;border-radius:999px;font-size:12px;margin-left:8px}
.grid{display:grid;gap:16px}
.grid.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card img{width:100%;height:180px;object-fit:cover}
.card .cap{padding:10px 12px;border-top:1px solid rgba(255,255,255,.06);color:#f1eadb}
/* flow */
.flow{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
.flow .step{background:#f7f3ea0f;border:1px solid rgba(228,199,138,.35);border-radius:14px;padding:16px 14px}
.flow .num{color:var(--gold);font-weight:700;margin-bottom:6px}
/* philosophy */
.flex{display:flex;gap:28px;flex-wrap:wrap}
.col{flex:1 1 320px}
.note{color:#d7d2c6}
ul.clean{padding-left:18px;margin:8px 0}
/* form */
.form{max-width:860px}
label{font-size:14px;color:#ddd8cc}
input[type="text"],input[type="email"],textarea{width:100%;padding:12px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#0f211a;color:#f0eadb}
input::placeholder,textarea::placeholder{color:#877}
input[type="file"]{display:block}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.privacy{display:flex;align-items:flex-start;gap:8px;color:#cfc9bc;font-size:13px}
footer{padding:36px 0;color:#bcb7ab;text-align:center;border-top:1px solid rgba(255,255,255,.06)}
@media (max-width:920px){
  .grid.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero h1{font-size:32px}
}