:root{
  --ink:#3b4e51;
  --accent:#e57d00;
  --bg:#f5f6f1;
  --beige:#c4b998;
  --mint:#6fb696;
  --deep:#162f35;
  --white:#ffffff;
  --brand:#4fbf8c;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:450px;width:100%;height:100%;display:block}
.logo-hero {
  max-width: 100px; /* PC */
}

@media (max-width: 768px) {
  .logo-hero {
    max-width: 80px; /* スマホ横向き */
  }
}

@media (max-width: 480px) {
  .logo-hero {
    max-width: 60px; /* スマホ縦向き */
  }
}
.logo-header {
  max-width: 28px; /* PC */
}

.container{width:min(1120px,92vw);margin-inline:auto}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:6px;padding:14px 32px;min-width:180px;border-radius:999px;font-weight:700;font-size:16px;border:2px solid transparent;transition:.2s ease;text-align:center}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn.accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.accent:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn.ghost:hover{background:#eaf7f2}
.btn.beige{background:#fff;color:var(--mint);border-color:var(--mint)}
.btn.beige:hover{background:var(--mint);color:#fff;transform:translateY(-1px)}
.btn.ready{background:rgb(141, 141, 141);color:#fff;transform:translateY(-1px);pointer-events: none; }
.btn.ready::after{content:'準備中';}
/* Header */
header{position:sticky;top:0;z-index:40;background:rgba(245,246,241,.85);backdrop-filter:blur(8px);border-bottom:1px solid #e6eeec;background-image:linear-gradient(180deg,#f7fbfa,#eef6f4)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:64px;color:var(--deep);padding: 10px 0 10px 0;}

@media (max-width: 768px) {
  .brand {
    font-size: 52px; /* スマホ横向き */
  }
}

@media (max-width: 480px) {
  .brand {
    font-size: 42px; /* スマホ縦向き */
  }
}
.brand-header{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px;color:var(--deep)}
.brand-header .logo{width:28px;height:28px;padding-bottom:1px;border-radius:6px;align-content:flex-end;background:linear-gradient(135deg,var(--brand),#6fb696);display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:var(--shadow)}
.brand .logo{width:54px;height:54px;padding-bottom:1px;border-radius:6px;align-content:flex-end;background:linear-gradient(135deg,var(--brand),#6fb696);display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:var(--shadow)}
.navlinks{display:flex;align-items:center;gap:20px;font-weight:700;color:#28433f}
.navlinks a{opacity:.85}
.navlinks a[aria-current="page"]{color:var(--brand);opacity:1}
.navlinks a:hover{opacity:1}
.hamburger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid #d7e4e1;background:#fff}
/* Footer */
footer{margin-top:32px;background:#162f35;color:#ffffff;padding:42px 0}
footer .grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:20px}
footer a{color:#ffffff;opacity:.9}
/* Utilities */
.ph{background:repeating-linear-gradient(135deg,#eef5f3 0 10px,#e6efec 10px 20px);border:1px dashed #cfe1dd;color:#6b7f7c;display:grid;place-items:center}
.ph span{font-size:12px}
@media (max-width:960px){
  .navlinks{display:none}
  .hamburger{display:block}
  footer .grid{grid-template-columns:1fr}
}