/* Suwa Kindergarten Pre-Entry Portal Theme (v1) */
:root{
  --suwa-navy: #0b2d5c;        /* 紺 */
  --suwa-enji: #8e1e2d;        /* えんじ */
  --suwa-gold: #d4a800;        /* 濃いめの黄色 */
  --suwa-pink: #e56a93;        /* ピンク */
  --suwa-ink:  #0f172a;        /* テキスト濃色 */
  --suwa-mute: #6b7280;        /* サブテキスト */
  --suwa-line: #e5e7eb;        /* 罫線 */
  --bg: #ffffff;               /* 背景白 */
  --surface: #ffffff;          /* カード背景 */
}
body{color:var(--suwa-ink);background:var(--bg);}
h1,h2,h3{letter-spacing:.02em}
.muted{color:var(--suwa-mute)}

/* Header */
.suwa-header{
  background:var(--suwa-enji); color:#fff;
  padding:10px 16px; border-bottom:4px solid var(--suwa-navy);
}
.suwa-header .inner{
  max-width: 960px; margin:0 auto; display:flex; align-items:center; gap:12px;
}
.suwa-header .brand{display:flex; align-items:center; gap:10px}

.suwa-header .title{font-weight:700; font-size:18px; line-height:1.2}
.suwa-header .sub{font-size:12px; opacity:.9}

.suwa-header .brand img{ height:40px; width:auto; display:block }

/* Footer */
.suwa-footer{
  background:var(--suwa-enji); color:#fff; margin-top:24px;
  border-top:4px solid var(--suwa-navy);
}
.suwa-footer .inner{max-width:960px; margin:0 auto; padding:12px 16px; font-size:12px}

/* Buttons */
.btn{border:1px solid var(--suwa-line); border-radius:12px; padding:10px 14px; background:#fff; cursor:pointer}
.btn.primary{background:var(--suwa-navy); color:#fff; border-color:var(--suwa-navy)}
.btn.outline{border-color:var(--suwa-enji); color:var(--suwa-enji); background:#fff}
.btn.warning{background:var(--suwa-gold); color:#111; border-color:var(--suwa-gold)}
.btn.pink{background:var(--suwa-pink); color:#fff; border-color:var(--suwa-pink)}
.btn:focus-visible{outline:3px solid var(--suwa-gold); outline-offset:2px}

/* Inputs */
input,select,button{font-size:16px}
input,select{
  border:1px solid var(--suwa-line); border-radius:12px; padding:10px 12px; background:#fff;
}
input:focus, select:focus{outline:3px solid rgba(212,168,0,.35); border-color:var(--suwa-gold)}

/* Cards */
.card{
  background:var(--surface);
  border:1px solid var(--suwa-line);
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* Accent */
.badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; background:var(--suwa-pink); color:#fff}
.kicker{color:#fff; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase}

/* Header action buttons */
#toLogin, #toMyPage{border-radius:12px}
#toLogin{background:#fff; color:#111; border-color:#fff}
#toLogin:hover{background:#f8fafc}
#toMyPage{background:var(--suwa-gold); color:#111; border-color:var(--suwa-gold)}


/* ===== 見出しベース（共通） ===== */
h2, .h2 { position: relative; margin: 18px 0 16px; line-height: 1.3; }
.h-simple, .h-wave, .h-glow { position: relative; padding-bottom: 8px; }

/* 1) 上品でシンプル（金＋えんじの直線） */
.h-simple::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:4px;
  background:
    linear-gradient(90deg,var(--suwa-gold),var(--suwa-gold)) 0 0/120px 4px no-repeat,
    linear-gradient(90deg,var(--suwa-enji),var(--suwa-enji)) 120px 0/100% 2px no-repeat;
  border-radius:2px;
}

/* 2) かわいらしい柔らか曲線（波模様） */
.h-wave::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:10px;
  background:
    radial-gradient(circle at 6px 10px, var(--suwa-gold) 5px, transparent 6px) repeat-x,
    radial-gradient(circle at 16px 10px, var(--suwa-enji) 5px, transparent 6px) repeat-x;
  background-size: 22px 10px, 22px 10px;
  background-position: 0 0, 10px 0;
  opacity:.95;
}

/* 3) 華やか見出し（金グラデ＋淡い影） */
.h-glow{
  color: var(--suwa-navy);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.h-glow::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:6px;
  background: linear-gradient(90deg,#fff6bf 0%, var(--suwa-gold) 40%, #ffd54a 100%);
  border-radius:3px;
  box-shadow: 0 6px 12px rgba(212,168,0,.25);
}

:root{
  --suwa-navy:#122c4a;
  --suwa-navy-600:#0f2440;
  --suwa-accent:#b31c2b; /* 見出し帯の赤 */
  --ring:#3b82f6;
  --bd:#d1d5db;
  --fg:#0f172a;
  --fg-weak:#475569;
  --bg:#ffffff;
  --bg-soft:#f8fafc;
}

/* ボタン共通：aでもbuttonでもOK */
.btn, .btn:link, .btn:visited {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.625rem 1rem;
  border-radius:9999px; border:1px solid transparent;
  font-weight:700; line-height:1; text-decoration:none; /* ← 下線消す */
  cursor:pointer; user-select:none;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn:focus-visible {
  outline:0; box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 35%, transparent);
}

/* サイズ */
.btn.sm { padding:.45rem .75rem; font-size:.9rem }
.btn.lg { padding:.8rem 1.25rem; font-size:1.05rem }

/* 種別 */
.btn.primary {
  background:var(--suwa-navy); color:#fff; border-color:var(--suwa-navy);
}
.btn.primary:hover { background:var(--suwa-navy-600); border-color:var(--suwa-navy-600); }

.btn.outline {
  background:#fff; color:var(--suwa-navy); border-color:var(--bd);
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.btn.outline:hover { background:var(--bg-soft); border-color:#cbd5e1; }

.btn.ghost {
  background:transparent; color:var(--suwa-navy);
}
.btn.ghost:hover { background:rgba(18,44,74,.08); }

/* 危険/注意（提出済み確認など） */
.btn.danger {
  background:#fff; color:var(--accent, #b31c2b);
  border-color:color-mix(in srgb, var(--accent, #b31c2b) 30%, #ffffff);
}
.btn.danger:hover { background:color-mix(in srgb, var(--accent, #b31c2b) 6%, #fff); }

/* 無効状態（aria-disabled に対応） */
.btn[aria-disabled="true"], .btn:disabled {
  opacity:.55; cursor:not-allowed; pointer-events:none;
}

/* カードの見出し帯（参考：画像の赤帯と揃える） */
.suwa-hero {
  background:var(--suwa-accent); color:#fff; padding:22px; border-radius:16px;
}

/* 下線を完全に消す（aでもbuttonでも） */
a.btn, a.btn:link, a.btn:visited, a.btn:hover, a.btn:active { text-decoration: none; }

/* 役割別の見た目 */
.btn.btn--create{
  background:#fff !important;
  color: var(--suwa-gold,#d4a800) !important;
  border: 2px solid var(--suwa-gold,#d4a800) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.btn--create:hover { background: #fff5f6; border-color: #d4a800; }

.btn--purchase { /* 願書を購入（Accent Outline） */
  background: #fff; color: var(--suwa-accent); border-color: color-mix(in srgb, var(--suwa-accent) 40%, #ffffff);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.btn--purchase:hover { background: #fff5f6; border-color: var(--suwa-accent); }

.btn--confirm { /* 提出済み願書確認（Neutral Outline） */
  background: #fff; color: #334155; border-color: #cbd5e1;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.btn--confirm:hover { background: #f1f5f9; border-color: #94a3b8; }

/* 無効化（既存のaria-disabled対応を強める） */
.btn[aria-disabled="true"], .btn:disabled {
  opacity:.55; pointer-events:none; cursor:not-allowed;
}

/* --- Button role overrides (place AFTER generic .btn rules) --- */

/* 役割ボタンは必ず境界線を出す＆濃くする */
.btn.btn--purchase,.btn.btn--create,
.btn.btn--confirm {
  border-width: 2px !important;     /* 1pxだと薄い環境あり → 2pxで明瞭に */
  border-style: solid !important;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

/* 願書を購入：赤のはっきりした枠に（白混色はやめる） */
.btn.btn--purchase {
  color: var(--suwa-accent);
  border-color: var(--suwa-accent) !important;
}
.btn.btn--purchase:hover {
  background: #fff5f6; /* ごく薄い赤みのホバー */
}

/* 提出済み確認：ニュートラルで視認性のある枠色に */
.btn.btn--confirm {
  color: #334155;
  border-color: #94a3b8 !important;   /* slate-400 相当 */
}
.btn.btn--confirm:hover {
  background: #f1f5f9;
}

.btn.btn--create:hover{
  background:#fffdf3; /* ごく薄いゴールドの面 */
}


/* 念のため、a.btn の下線を完全に殺す（競合対策） */
a.btn, a.btn:link, a.btn:visited, a.btn:hover, a.btn:active { text-decoration: none !important; }