/* ============================================================
   香川県バウンドテニス協会 サイト共通スタイル（たたき台）
   ============================================================ */
:root{
  --red:#C8102E;
  --red-deep:#960019;
  --red-soft:#FBE4E7;
  --navy:#1B3A5C;
  --navy-deep:#122842;
  --gold:#B8892B;
  --ink:#242A2E;
  --ink-soft:#5B646B;
  --cream:#FAF7F2;
  --cream-deep:#F2EAE0;
  --line:#E5DFD4;
  --white:#FFFFFF;
  --shadow:0 10px 28px rgba(36,42,46,.09);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Noto Sans JP',sans-serif;
  font-size:16px; line-height:1.9; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--red-deep)}
.en{font-family:'Baloo 2',cursive; font-weight:700; letter-spacing:.02em}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
.wrap-narrow{max-width:820px; margin:0 auto; padding:0 20px}

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(250,247,242,.96);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--line);
}
.header-inner{max-width:1080px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); min-width:0}
.brand img{width:40px; height:40px; border-radius:50%; flex:0 0 auto}
.brand .name{font-weight:900; font-size:14px; line-height:1.4; color:var(--navy-deep)}
.brand .name small{display:block; font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--red-deep)}
.sp-toggle{flex:0 0 auto}
@media (min-width:1081px){
  .brand{flex:0 0 auto}
  .brand .name, .brand .name small{white-space:nowrap}
}

nav.pc{display:flex; align-items:center; gap:0; flex-wrap:wrap; justify-content:flex-end}
nav.pc a{
  display:inline-block; padding:9px 10px; font-size:13.5px; font-weight:700;
  color:var(--ink); text-decoration:none; border-radius:999px; white-space:nowrap;
}
nav.pc a:hover, nav.pc a.active{background:var(--red-soft); color:var(--red-deep)}
nav.pc .btn{margin-left:6px}

.sp-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--navy-deep)}
.sp-toggle svg{width:26px; height:26px}

nav.sp{
  display:none; flex-direction:column; background:var(--white); border-top:1px solid var(--line);
  padding:6px 20px 16px;
}
nav.sp a{
  display:block; padding:13px 6px; font-size:15.5px; font-weight:700; color:var(--ink);
  text-decoration:none; border-bottom:1px dotted var(--line);
}
nav.sp a.active{color:var(--red-deep)}
nav.sp .btn{margin-top:12px; width:100%}

body.menu-open nav.sp{display:flex}

@media (max-width:1080px){
  nav.pc{display:none}
  .sp-toggle{display:inline-flex; align-items:center}
}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:999px; text-decoration:none; font-weight:900; font-size:15.5px;
  transition:transform .18s ease, box-shadow .18s ease; border:none; cursor:pointer;
  font-family:inherit; line-height:1.4;
}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:var(--red); color:#fff; box-shadow:0 6px 0 var(--red-deep)}
.btn-navy{background:var(--navy); color:#fff; box-shadow:0 6px 0 var(--navy-deep)}
.btn-ghost{background:#fff; color:var(--navy); border:2px solid var(--navy); box-shadow:none}
.btn-block{width:100%}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(180deg,var(--cream) 0%,var(--cream-deep) 100%);
  padding:52px 0 60px; border-bottom:1px solid var(--line);
}
.hero-inner{display:flex; align-items:center; gap:40px; flex-wrap:wrap}
.hero-text{flex:1 1 380px; min-width:280px}
.hero .kicker{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; letter-spacing:.16em; font-weight:900;
  color:var(--red-deep); background:var(--red-soft); padding:6px 16px; border-radius:999px; margin-bottom:16px;
}
.hero h1{font-size:clamp(26px,4.4vw,40px); line-height:1.5; margin:0 0 14px; color:var(--navy-deep); font-weight:900}
.hero p{font-size:16px; color:var(--ink-soft); margin:0 0 24px; max-width:34em}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-visual{
  flex:0 1 320px; min-width:220px; max-width:100%;
  aspect-ratio:4/3; border-radius:24px; background:var(--navy);
  display:flex; align-items:center; justify-content:center; color:#fff; text-align:center;
  box-shadow:var(--shadow); overflow:hidden; position:relative;
}
.hero-visual .ph{padding:20px; font-size:13.5px; line-height:1.8; opacity:.85}

/* ---------- お知らせ帯 ---------- */
.news-bar{background:var(--navy); color:#fff}
.news-bar .wrap{display:flex; align-items:center; gap:14px; padding:11px 20px; flex-wrap:wrap}
.news-bar .tag{background:var(--red); font-size:11.5px; font-weight:900; padding:4px 12px; border-radius:999px; flex:0 0 auto}
.news-bar a{color:#fff; text-decoration:none; font-size:14px; font-weight:700}
.news-bar a:hover{text-decoration:underline}

/* ---------- セクション ---------- */
section.pad{padding:56px 0}
section.pad.alt{background:var(--white)}
.sec-head{margin-bottom:32px}
.sec-head .kicker{
  display:inline-block; font-size:12px; letter-spacing:.2em; font-weight:900;
  color:var(--red-deep); background:var(--red-soft); padding:5px 15px; border-radius:999px;
}
.sec-head h2{margin:14px 0 6px; font-size:clamp(22px,3.6vw,30px); font-weight:900; color:var(--navy-deep); line-height:1.5}
.sec-head p{margin:0; font-size:15px; color:var(--ink-soft)}
.sec-head.center{text-align:center}
.sec-foot{margin-top:26px; text-align:center}

/* ---------- カード ---------- */
.grid{display:grid; gap:20px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
}
.card h3{margin:0 0 8px; font-size:17px; color:var(--navy-deep); font-weight:900}
.card p{margin:0; font-size:14.5px; color:var(--ink-soft)}
.card .icon{
  width:48px; height:48px; border-radius:14px; background:var(--red-soft); color:var(--red-deep);
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:900; margin-bottom:14px;
}

/* 大会カード */
.event-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.event-card .date{
  background:var(--navy); color:#fff; padding:14px 20px; display:flex; align-items:center; gap:12px;
}
/* 数字だけ大きく、「月」「日」は小さく添える（カレンダーの日付の組み方） */
.event-card .date .md{font-size:19px; font-weight:900; line-height:1; white-space:nowrap}
.event-card .date .md b{
  font-family:'Baloo 2','Zen Maru Gothic',sans-serif; font-size:36px; font-weight:800;
  line-height:1; margin:0 2px; position:relative; top:2px;
}
.event-card .date .md b:first-child{margin-left:0}
/* 曜日は丸の中に。日曜は赤、土曜は青（カレンダーの慣習） */
.event-card .date .wd{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.16);
  font-size:17px; font-weight:900; line-height:1;
}
.event-card .date .wd.sun{background:var(--red)}
.event-card .date .wd.sat{background:#2F6FB5}
.event-card .body{padding:18px 20px 20px; flex:1; display:flex; flex-direction:column; gap:8px}
.event-card h3{margin:0; font-size:16.5px; color:var(--navy-deep); font-weight:900; line-height:1.5}
.event-card .meta{font-size:13.5px; color:var(--ink-soft); margin:0 0 10px}
/* 本文の長さが違っても「くわしく見る」をカードの一番下にそろえる */
.event-card .body .more{margin-top:auto}
.badge{
  display:inline-flex; align-self:flex-start; font-size:12px; font-weight:900; padding:4px 12px; border-radius:999px;
}
.badge.open{background:#E9F5EC; color:#217A46}
.badge.soon{background:var(--red-soft); color:var(--red-deep)}
.badge.done{background:var(--cream-deep); color:var(--ink-soft)}

/* ---------- 表 ---------- */
.tw{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px}
th,td{border:1px solid var(--line); padding:11px 13px; text-align:left; vertical-align:top}
thead th{background:var(--navy); color:#fff; font-weight:700; font-size:13.5px; white-space:nowrap}
tbody tr:nth-child(even) td{background:#fff}
tbody tr:nth-child(odd) td{background:var(--cream)}

/* ---------- パンくず・見出し帯 ---------- */
.page-head{background:var(--navy); color:#fff; padding:40px 0 34px}
.page-head .crumb{font-size:12.5px; opacity:.75; margin:0 0 10px}
.page-head .crumb a{color:#fff}
.page-head h1{margin:0 0 8px; font-size:clamp(24px,4vw,32px); font-weight:900}
.page-head p{margin:0; font-size:14.5px; opacity:.85; max-width:40em}

/* ---------- Q&A ---------- */
.qa{border-bottom:1px dotted var(--line); padding:0 0 16px; margin:0 0 16px}
.qa:last-child{border-bottom:none}
.qa .q{font-weight:900; color:var(--navy-deep); margin:0 0 6px}
.qa .q::before{content:"Q. "; color:var(--red)}
.qa .a{margin:0; font-size:14.5px; color:var(--ink-soft)}
.qa .a::before{content:"A. "; font-weight:900; color:var(--ink)}

/* ---------- フォーム ---------- */
.field{margin:0 0 18px}
.field label{display:block; font-weight:700; font-size:14.5px; margin:0 0 7px; color:var(--navy-deep)}
.field label .req{color:var(--red); font-size:11.5px; font-weight:900; margin-left:6px; background:var(--red-soft); padding:2px 8px; border-radius:999px}
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; font-size:16.5px; border:1.5px solid var(--line); border-radius:10px;
  font-family:inherit; background:#fff; color:var(--ink);
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--red); border-color:var(--red)}
.field .hint{font-size:12.5px; color:var(--ink-soft); margin-top:6px}

/* ---------- プレースホルダー表示 ---------- */
.fill{background:#FFF3CC; border-bottom:1px dashed var(--gold); padding:0 6px; font-weight:700; color:#7A5C14; white-space:nowrap}
.draft-flag{
  background:#FFF3CC; border:1px solid #E5C877; color:#7A5C14; border-radius:10px;
  padding:8px 14px; font-size:12.5px; font-weight:700; margin:0 0 14px; display:inline-block;
}
.wip-box{
  background:#fff; border:1.5px dashed var(--line); border-radius:var(--radius); padding:40px 24px;
  text-align:center; color:var(--ink-soft); font-size:14.5px;
}
.wip-box b{display:block; color:var(--navy-deep); font-size:17px; margin-bottom:8px}

/* ---------- お知らせ帯（サイト全体トップに出すドラフト注記） ---------- */
.draft-banner{
  background:#FFF3CC; border-bottom:1px solid #E5C877; color:#7A5C14; text-align:center;
  font-size:13px; font-weight:700; padding:9px 16px; line-height:1.7;
}

/* ---------- フッター ---------- */
footer{background:var(--navy-deep); color:#cfd9e2; padding:44px 0 26px; margin-top:20px}
footer .fgrid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px; margin-bottom:30px}
footer .fbrand{display:flex; align-items:center; gap:10px; margin-bottom:12px}
footer .fbrand img{width:38px; height:38px; border-radius:50%}
footer .fbrand span{font-weight:900; color:#fff; font-size:15px}
footer p{font-size:13px; line-height:1.85; color:#a9b8c6; margin:0}
footer h4{color:#fff; font-size:13.5px; letter-spacing:.06em; margin:0 0 12px}
footer ul{list-style:none; margin:0; padding:0}
footer li{margin:0 0 8px}
footer a{color:#cfd9e2; text-decoration:none; font-size:13.5px}
footer a:hover{color:#fff; text-decoration:underline}
.fbottom{border-top:1px solid rgba(255,255,255,.12); padding-top:18px; font-size:12px; color:#8fa0b1; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px}

@media (max-width:900px){
  footer .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  section.pad{padding:40px 0}
  .hero{padding:36px 0 40px}
  footer .fgrid{grid-template-columns:1fr; gap:22px}
  .fbottom{flex-direction:column}
}