:root{
  --bg:#f6fbff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --line:#cfe8ff;
  --accent:#1ea7ff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Noto Sans JP,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:960px;margin:28px auto;padding:0 20px}
.site-header {
  position:sticky;
  top:0;
  background:linear-gradient(90deg,#0ea5e9,#38bdf8);
  color:#00324e;
  border-bottom:1px solid #7dd3fc;
}  /* ←この } を追加！ */

.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:960px;margin:0 auto;padding:12px 20px}
.brand{display:flex;align-items:center;gap:10px}
.brand .name{font-weight:800;letter-spacing:.3px}
.nav a{padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5);margin-left:6px}
.banner{background:#e0f2fe;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;padding:12px;margin:12px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin:14px 0;box-shadow:0 8px 18px rgba(30,167,255,.08)}
h1{font-size:28px;margin:18px 0 10px}
h2{font-size:20px;margin:18px 0 10px}
.list{list-style:none;padding:0;margin:0}
.list li{margin:10px 0}
.btn{display:inline-block;background:var(--accent);color:#00283d;font-weight:700;border:none;border-radius:12px;padding:10px 14px}
.btn.secondary{background:#e0f2fe;color:#004566;border:1px solid var(--line)}
.form{max-width:560px}
.input, textarea, select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#f8fcff;color:var(--text)}
.small{font-size:13px;color:var(--muted)}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.footer{color:#64748b;font-size:13px;margin:30px 0 60px;text-align:center}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.tab{padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:#e0f2fe;color:#004566;text-decoration:none}
.tab:hover{text-decoration:none;filter:brightness(0.98)}
.tab.active{background:var(--accent);color:#00283d;border-color:transparent}
/* === Header: アイコン高さ＆縦中央揃え ====================== */
.nav{                           /* ナビ全体を横並び */
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.nav a{                         /* リンク/ボタンの高さを統一 */
  display:inline-flex;
  align-items:center;
  height:36px;                 /* ←必要なら 32/40 に微調整 */
  line-height:36px;
  padding:0 10px;              /* 元のpaddingに合わせる */
}
.nav a img,
.nav img,                      /* ナビ内の画像/アイコンを統一サイズに */
.brand .logo,
.header .icon{
  height:24px;                 /* ←必要なら 20/28 に微調整 */
  width:auto;
  display:block;
  vertical-align:middle;
}
.nav a > img{                  /* 画像と文字の間隔 */
  margin-right:8px;
}

/* === Footer: 規約リンクを中央に ============================ */
.footer{
  text-align:center;           /* 既存の中央寄せを維持 */
}
.footer ul{                    /* UL が使われている前提でも中央に */
  list-style:none;
  margin:0 auto;
  padding:0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.footer ul li{
  display:inline;              /* 余白の暴れを抑える */
}
.footer a{
  display:inline-flex;         /* ベースラインずれ防止 */
  align-items:center;
}
/* 白丸のロゴ入れ物 */
/* まず、ヘッダーに誤って背景画像が当たっていたら無効化 */
/* ←この3ブロックを今の<style>の末尾に追記 */


.logo-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.10);
  overflow:hidden;
}

.logo-badge img{
  display:block;
  width:auto;
  height:auto;
  max-width:72%;
  max-height:72%;
}

@media (max-width:640px){
  .logo-badge{ width:48px; height:48px; }
}
.site-header {
  background:linear-gradient(90deg,#0ea5e9,#38bdf8) !important;
}
.footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  width:100%;
  max-width:960px;   /* サイト幅に合わせる */
  margin:20px auto;  /* 画面中央に配置 */
  text-align:center; /* 念のため */
}

.footer-links a{
  text-decoration:none;
  color:inherit;
  font-size:14px;
}

.line-add-link img{ vertical-align:middle; height:36px; }

/* フィールド共通 */
/* ========= Contact overrides (force) ========= */
main .contact-form,
.container .contact-form,
.contact-form{
  max-width:720px; margin:0 auto; background:#fff; padding:24px;
  border-radius:16px; box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.contact-form .field{ margin-bottom:18px; }
.contact-form label{ display:block; font-weight:600; margin-bottom:6px; }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea{
  width:100%; padding:10px 12px; border:1px solid #cbd5e1;
  border-radius:10px; font-size:15px; background:#f9fafb;
}

.contact-form textarea{ min-height:120px; resize:vertical; }

.contact-form .help{ margin-top:6px; font-size:13px; color:var(--muted); }
.contact-form .count{ margin-top:4px; font-size:12px; color:var(--muted); }
.required-badge{ margin-left:6px; padding:2px 6px; font-size:11px;
  background:#fee2e2; color:#991b1b; border-radius:999px; }
.error-text{ margin-top:8px; font-size:13px; color:#b91c1c; }
.contact-form .invalid{ border-color:#f87171 !important; background:#fff7f7 !important; }

/* 送信ボタン */
.contact-form .actions{ text-align:center; margin-top:24px; }
.contact-form .btn-primary{
  display:inline-block; padding:12px 28px; font-weight:700; font-size:16px;
  border:none; border-radius:999px; cursor:pointer;
  background: linear-gradient(90deg,#38bdf8,#0ea5e9);
  color:#fff; box-shadow:0 6px 16px rgba(14,165,233,.25);
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
  -webkit-appearance: none; appearance: none;
}
.contact-form .btn-primary:hover{ box-shadow:0 8px 20px rgba(14,165,233,.35); }
.contact-form .btn-primary:active{ transform: translateY(1px); opacity:.95; }

/* モバイル崩れ対策 */
@media (max-width:640px){
  .contact-form{ padding:18px; border-radius:12px; }
}
/* 店名＋丸数字を横並びに */
.flex-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* 丸数字バッジ（濃い青で目立つ） */
.badge-round {
  display: inline-block;
  min-width: 22px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #1e90ff;       /* 濃いめの青 */
  color: #ffffff;             /* 白文字でコントラストを強調 */
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  border: 1px solid #1a7bd9;  /* わずかに暗い線で引き締める */
  box-shadow: 0 1px 2px rgba(0,0,0,0.15); /* 立体感を追加 */
}