/* 一般社団法人 日中青少年野球ソフトボール協会 公式サイト（第一版・プレビュー） */
:root{
  --blue:#10408a;
  --blue-dark:#0a2d63;
  --red:#d92b26;
  --ink:#2b2f33;
  --ink-soft:#5a6068;
  --bg:#fdfcf9;
  --panel:#f4f2ec;
  --line:#e2ded2;
  --radius:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","游ゴシック",sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.9;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------- ヘッダー ---------- */
.site-header{background:var(--blue);color:#fff}
.site-header .wrap{display:flex;align-items:center;gap:18px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;color:#fff}
.brand:hover{text-decoration:none}
.brand img{height:64px;width:auto;border-radius:4px}
.brand .brand-name{font-size:15px;font-weight:700;line-height:1.5;letter-spacing:.02em}
.brand .brand-name small{display:block;font-size:11px;font-weight:400;opacity:.85;letter-spacing:.08em}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:4px;list-style:none;flex-wrap:wrap}
.main-nav a{color:#fff;font-size:14px;padding:8px 10px;border-radius:6px;display:block}
.main-nav a:hover{background:rgba(255,255,255,.14);text-decoration:none}
.header-tools{display:flex;align-items:center;gap:10px}
.lang-switch{font-size:13px;color:#fff;opacity:.92}
.lang-switch a{color:#fff}
.btn{display:inline-block;background:var(--red);color:#fff;font-weight:700;padding:10px 22px;border-radius:999px;font-size:14px;line-height:1.4;text-align:center}
.btn:hover{background:#b91f1b;text-decoration:none}
.btn.blue{background:var(--blue)}
.btn.blue:hover{background:var(--blue-dark)}
.btn.ghost{background:#fff;color:var(--blue);border:2px solid var(--blue)}
.btn.ghost:hover{background:#eef3fb}

/* ---------- ヒーロー ---------- */
.hero{position:relative;background:#0d1b2e}
.hero img{width:100%;height:520px;object-fit:cover;opacity:.92}
.hero .hero-text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(to top,rgba(6,20,44,.78) 0%,rgba(6,20,44,.25) 45%,rgba(6,20,44,0) 70%)}
.hero .hero-text .wrap{width:100%;padding-bottom:40px}
.hero h1{color:#fff;font-size:clamp(26px,4.4vw,44px);font-weight:800;line-height:1.45;letter-spacing:.03em;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.hero p{color:#eef3fb;font-size:clamp(13px,1.6vw,16px);margin-top:10px;letter-spacing:.06em}

/* ---------- アンカーボタン行 ---------- */
.anchor-row{background:#fff;border-bottom:1px solid var(--line)}
.anchor-row .wrap{display:flex;gap:10px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.anchor-row a{flex:1 1 150px;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 8px;color:var(--ink);font-weight:700;font-size:14px}
.anchor-row a:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}

/* ---------- セクション ---------- */
section{padding:64px 0}
section.alt{background:var(--panel)}
.sec-head{margin-bottom:32px}
.sec-head .en{font-size:12px;letter-spacing:.28em;color:var(--red);font-weight:700;text-transform:uppercase}
.sec-head h2{font-size:clamp(22px,3vw,30px);font-weight:800;line-height:1.5;margin-top:4px}
.sec-head p{color:var(--ink-soft);margin-top:8px;max-width:760px}
.lead{font-size:17px;max-width:820px}

/* ---------- お知らせ ---------- */
.news-list{list-style:none;border-top:1px solid var(--line)}
.news-list li{border-bottom:1px solid var(--line)}
.news-list a{display:flex;gap:18px;align-items:baseline;padding:16px 6px;color:var(--ink);flex-wrap:wrap}
.news-list a:hover{text-decoration:none;background:#fff}
.news-list .date{font-weight:700;color:var(--blue);white-space:nowrap;font-size:14px}
.news-list .tag{font-size:11px;font-weight:700;color:#fff;background:var(--blue);border-radius:4px;padding:2px 8px;letter-spacing:.06em;white-space:nowrap}
.news-list .tag.red{background:var(--red)}
.news-list .ttl{font-weight:600}
.more-link{margin-top:20px;text-align:right;font-weight:700}

/* ---------- 旗舰大卡 ---------- */
.flag-card{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.flag-card .flag-img{min-height:320px}
.flag-card .flag-img img{width:100%;height:100%;object-fit:cover}
.flag-body{padding:34px 32px}
.flag-body .kicker{color:var(--red);font-weight:700;font-size:13px;letter-spacing:.14em}
.flag-body h3{font-size:24px;font-weight:800;line-height:1.55;margin:8px 0 14px}
.flag-body dl{display:grid;grid-template-columns:86px 1fr;gap:4px 12px;font-size:14.5px;margin-bottom:18px}
.flag-body dt{font-weight:700;color:var(--blue)}
.flag-body p{color:var(--ink-soft);font-size:15px}
.flag-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* ---------- カードグリッド ---------- */
.grid{display:grid;gap:22px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card .card-img{aspect-ratio:16/10;overflow:hidden;background:var(--panel)}
.card .card-img img{width:100%;height:100%;object-fit:cover}
.card .card-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .card-date{font-size:13px;font-weight:700;color:var(--blue)}
.card h3{font-size:18px;font-weight:800;line-height:1.6}
.card p{font-size:14.5px;color:var(--ink-soft);flex:1}
.card .card-link{font-weight:700;font-size:14px}

/* 写真プレースホルダ */
.ph{background:repeating-linear-gradient(45deg,#eceae2,#eceae2 14px,#f3f1ea 14px,#f3f1ea 28px);display:flex;align-items:center;justify-content:center;color:#8a8574;font-size:13px;font-weight:700;letter-spacing:.14em;min-height:180px;text-align:center;padding:16px}
.flag-card .ph{min-height:320px;height:100%}

/* ---------- 事業 ---------- */
.biz-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:var(--radius);padding:26px 24px}
.biz-card.softball{border-top-color:var(--red)}
.biz-card .num{font-size:13px;font-weight:800;color:var(--red);letter-spacing:.2em}
.biz-card h3{font-size:19px;font-weight:800;line-height:1.6;margin:8px 0 10px}
.biz-card p{font-size:14.5px;color:var(--ink-soft)}

/* ---------- 概要表 ---------- */
table.spec{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);font-size:15px}
table.spec th,table.spec td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.spec th{width:210px;background:var(--panel);font-weight:700;color:var(--blue-dark)}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:none}

/* ---------- 沿革 ---------- */
.timeline{list-style:none;border-left:3px solid var(--blue);margin-left:6px}
.timeline li{position:relative;padding:0 0 30px 30px}
.timeline li::before{content:"";position:absolute;left:-9px;top:8px;width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--blue)}
.timeline .t-date{font-weight:800;color:var(--blue);font-size:15px}
.timeline h3{font-size:18px;font-weight:800;margin:2px 0 6px}
.timeline p{color:var(--ink-soft);font-size:15px;max-width:780px}

/* ---------- 役員・スタッフ ---------- */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.person{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.person .role{font-size:12.5px;font-weight:700;color:var(--red);letter-spacing:.1em}
.person h3{font-size:19px;font-weight:800;margin:4px 0 6px}
.person p{font-size:14px;color:var(--ink-soft)}
table.officers{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);font-size:15.5px}
table.officers th,table.officers td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left}
table.officers th{width:220px;background:var(--panel);color:var(--blue-dark)}
table.officers tr:last-child th,table.officers tr:last-child td{border-bottom:none}

/* ---------- 参加案内 ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step}
.flow .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.flow .step .n{font-size:12px;font-weight:800;color:#fff;background:var(--blue);display:inline-block;border-radius:999px;padding:2px 12px;letter-spacing:.1em}
.flow .step h3{font-size:16.5px;font-weight:800;margin:10px 0 6px}
.flow .step p{font-size:14px;color:var(--ink-soft)}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:16px 4px}
.faq summary{font-weight:700;cursor:pointer;font-size:16px}
.faq p{margin-top:8px;color:var(--ink-soft);font-size:15px;max-width:820px}

/* ---------- CTA・お問い合わせ ---------- */
.cta-band{background:var(--blue);color:#fff;text-align:center}
.cta-band h2{font-size:clamp(21px,3vw,28px);font-weight:800;line-height:1.6}
.cta-band p{opacity:.92;margin:10px auto 24px;max-width:640px}
form.contact-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px}
form.contact-form label{display:block;font-weight:700;font-size:14.5px;margin:18px 0 6px}
form.contact-form label:first-child{margin-top:0}
form.contact-form input,form.contact-form select,form.contact-form textarea{width:100%;border:1px solid #c9c4b4;border-radius:6px;padding:11px 12px;font:inherit;font-size:15px;background:#fff}
form.contact-form textarea{min-height:150px}
form.contact-form .submit{margin-top:24px}
.note{font-size:13.5px;color:var(--ink-soft)}

/* ---------- ページヘッド（子ページ） ---------- */
.page-head{background:var(--blue-dark);color:#fff;padding:52px 0 44px}
.page-head .en{font-size:12px;letter-spacing:.28em;color:#ffb3b0;font-weight:700;text-transform:uppercase}
.page-head h1{font-size:clamp(24px,3.6vw,36px);font-weight:800;margin-top:6px;line-height:1.5}
.page-head p{opacity:.92;margin-top:8px;max-width:760px}

/* ---------- フッター ---------- */
.site-footer{background:var(--blue);color:#fff;padding:52px 0 34px;margin-top:0}
.site-footer .foot-grid{display:flex;gap:36px;flex-wrap:wrap;align-items:flex-start}
.site-footer img.foot-logo{height:84px;width:auto;border-radius:4px}
.site-footer .foot-info{font-size:14px;line-height:2}
.site-footer .foot-info .fname{font-weight:800;font-size:16px}
.site-footer nav ul{list-style:none;display:grid;gap:6px}
.site-footer nav a{color:#fff;font-size:14px}
.copyright{border-top:1px solid rgba(255,255,255,.25);margin-top:36px;padding-top:18px;font-size:12.5px;opacity:.85;text-align:center}

/* ---------- レスポンシブ ---------- */
@media (max-width:860px){
  .grid.c3,.grid.c4,.flow{grid-template-columns:repeat(2,1fr)}
  .flag-card{grid-template-columns:1fr}
  .people{grid-template-columns:1fr}
  .hero img{height:400px}
  .main-nav{order:3;width:100%}
}
@media (max-width:560px){
  .grid.c3,.grid.c4,.grid.c2,.flow{grid-template-columns:1fr}
  table.spec th{width:120px}
  section{padding:44px 0}
}