/* FC明浜 共通の土台＋2つの表現（10/5 代表: 体験・入会＝A、トップ・試合結果・クラブ紹介等＝B、お問い合わせ等＝共通の実用表示）
   A と B で変えてよいのは「背景・写真の扱い・見出しの書体」だけ（第5版レビュー）。文字・色・ボタン・ヘッダー・フッター・本文幅・フォームは共通 */
:root{--red:#C8101E;--red-d:#A50E19;--navy:#0E1A2B;--navy2:#1B2B44;--ink:#1A1F27;--sub:#596270;--bg:#FFFFFF;--soft:#F4F5F7;--line:#E2E5EA;
 --gold:#B8921E;--gold-d:#6E5A12;--cream:#FBF6EE;--cream2:#F3E9DA;--card:#FFFFFF;--maroon:#7A1A24;--pale:#F6F1F1}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;line-height:1.8;font-size:16px}
a{color:var(--red-d)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.en{font-family:Oswald,"Noto Sans JP",sans-serif;letter-spacing:.04em}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* ヘッダー（全ページ共通） */
header.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.head{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 16px;max-width:1200px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);white-space:nowrap;flex-shrink:0}
.brand img{width:42px;height:42px;border-radius:50%}
.brand b{display:block;font-size:20px;font-weight:900;line-height:1.1;letter-spacing:.04em}
.brand small{display:block;font-size:11px;color:var(--sub);line-height:1.2}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
nav.main a{display:block;color:var(--ink);text-decoration:none;padding:8px 7px;font-size:14px;font-weight:500;white-space:nowrap;border-bottom:2px solid transparent}
nav.main a[aria-current]{border-bottom-color:var(--red);color:var(--red-d)}
.head .cta .btn{padding:9px 16px;font-size:14px;white-space:nowrap}
details.mnav{display:none}
@media (max-width:1320px){.brand small{display:none}}
@media (max-width:1100px){
 nav.main{display:none}
 .head .cta{margin-left:auto}
 details.mnav{display:block;position:relative}
 details.mnav summary{list-style:none;cursor:pointer;padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-weight:700;font-size:14px}
 details.mnav summary::-webkit-details-marker{display:none}
 details.mnav summary::before{content:"☰ "}
 details.mnav ul{position:absolute;right:0;top:46px;min-width:220px;list-style:none;margin:0;padding:6px 0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
 details.mnav a{display:block;color:var(--ink);text-decoration:none;padding:10px 18px}
 details.mnav a[aria-current]{color:var(--red-d);font-weight:700}
}
@media (max-width:600px){.head .cta{display:none}.brand small{display:none}}
/* ボタン（共通） */
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:8px;line-height:1.4;border:2px solid var(--red)}
.btn.sub{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn.line{background:#06C755;border-color:#06C755}
.btn.wh{background:#fff;color:var(--navy);border-color:#fff}
.btn:hover{opacity:.88}
.btns{display:flex;flex-wrap:wrap;gap:10px}
/* ページの見出し帯 */
main{padding:0 0 56px}
.ph{padding:28px 0 26px;margin-bottom:28px}
.ph .lab{display:block;font-size:13px;font-weight:700;letter-spacing:.18em}
.ph h1{margin:2px 0 0;font-size:28px;line-height:1.4}
h1{font-size:28px;line-height:1.4;margin:0 0 24px}
h2{font-size:22px;line-height:1.45;margin:40px 0 14px;color:var(--navy)}
h3{font-size:18px;margin:24px 0 8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin:16px 0}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid img{border-radius:8px;width:100%;aspect-ratio:4/3;object-fit:cover}
.news{border-left:4px solid var(--gold);padding:4px 0 4px 16px;margin:0 0 18px}
.news ul{margin:4px 0 6px;padding-left:1.2em}.news li{margin:2px 0}.news p{margin:0}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 20px}
.facts dt{font-weight:700;color:var(--navy)}
.facts dd{margin:0}
.banners{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.banners img{height:56px;width:auto}
table.links{border-collapse:collapse;width:100%}
table.links td{border-bottom:1px solid var(--line);padding:10px 8px}
.note{color:var(--sub);font-size:14px}
.todo{background:var(--pale);border:1px dashed var(--red);border-radius:8px;padding:12px 16px;color:var(--maroon)}
/* 料金カード（体験・入会・トップで共通のデータから出す） */
.fees{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0 8px}
.fee{background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:10px;padding:16px 18px}
.fee:nth-child(2){border-top-color:var(--red)}
.fee small{display:block;color:var(--sub);font-size:13px}
.fee b{font-size:30px;font-weight:900;font-variant-numeric:tabular-nums}
.fee span{font-size:14px;color:var(--sub);margin-left:2px}
@media (max-width:600px){.fees{grid-template-columns:1fr}.fee{display:flex;align-items:baseline;gap:10px}.fee small{flex:1}}
/* 試合結果 */
.res h2{border-bottom:2px solid var(--line);padding-bottom:6px}
.rday{margin:12px 0 20px}
.rhead{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;margin:0 0 4px;padding:7px 12px;background:var(--soft);border-left:4px solid var(--red);border-radius:6px}
.rdate{font-weight:700;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}
.rtitle{font-weight:700}
.rvenue{color:var(--sub);font-size:14px}
.rtab{width:100%;border-collapse:collapse}
.rtab td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.rtab .rscore{width:1%;padding-left:12px;padding-right:12px;text-align:center;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.rtab .rres{width:1%;text-align:center}
.rtab .ropp{overflow-wrap:anywhere}
.rmark{display:inline-block;min-width:2.2em;padding:1px 8px;border-radius:999px;font-size:13px;font-weight:700;color:#fff;background:var(--sub)}
.rmark.w{background:var(--red)}.rmark.l{background:#6B7280}.rmark.d{background:var(--gold-d)}
.rmemo{display:block;font-size:13px;color:var(--sub)}
.rrank{display:inline-block;margin-left:8px;padding:0 8px;border:1px solid var(--gold);border-radius:999px;font-size:13px;font-weight:700;color:var(--gold-d);background:#FFF;white-space:nowrap}
.rrank.win{background:var(--gold-d);border-color:var(--gold-d);color:#fff}
.rteam{display:inline-block;margin-right:6px;padding:0 6px;border:1px solid var(--red);border-radius:4px;font-size:12px;color:var(--red-d);vertical-align:1px;white-space:nowrap}
.rgrade{margin-top:28px}
.recent-ranks{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:12px}
.recent-ranks li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.recent-ranks li:last-child{border-bottom:0}
.recent-ranks .rk-date{color:var(--sub);font-size:14px;font-variant-numeric:tabular-nums}
.recent-ranks .rk-grade{font-size:12px;font-weight:700;color:var(--red-d);border:1px solid var(--red);border-radius:4px;padding:0 6px}
.recent-ranks .rrank{margin-left:auto}
.recent-ranks li.hl{background:#FFF8E1}
.hl-card{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0;padding:12px 14px;background:#FFF8E1;border:1px solid var(--gold);border-radius:12px}
.hl-card .rrank{margin-left:0}
.hl-card .note{width:100%;margin:0}
/* スライダー */
.slider{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:#E9E4DC}
.slider .slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.slider .slides img.on{opacity:1}
.slider .dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px}
.slider .dots button{width:12px;height:12px;padding:0;border:2px solid #fff;border-radius:50%;background:rgba(0,0,0,.25);cursor:pointer}
.slider .dots button[aria-current="true"]{background:#fff}
.slider .sl-pause{position:absolute;right:10px;bottom:6px;min-width:36px;height:30px;border:0;border-radius:6px;background:rgba(0,0,0,.45);color:#fff;font-size:13px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.slider .slides img{transition:none}}
.menu-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:10px}
.grid.photos{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.photo{display:block;text-decoration:none;color:var(--ink)}
.photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.photo span{display:block;margin-top:4px;font-size:14px;font-weight:700;text-align:center}
.photo:hover span{color:var(--red-d)}
/* フォーム（共通） */
.cform{display:grid;gap:14px;max-width:640px;margin-top:8px}
.cform label{display:grid;gap:4px;font-weight:700}
.cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform select,.cform textarea{font:inherit;font-weight:400;padding:10px 12px;border:1px solid #C9CED6;border-radius:8px;background:#fff;width:100%}
.cform [aria-invalid=true]{border-color:var(--red);outline:2px solid #F3C7CA}
.cform .agree{display:flex;align-items:center;gap:8px;font-weight:400}
.cform .lbl{display:flex;align-items:center;gap:0}
.cform .req,.cform .opt{font-size:12px;font-weight:700;color:#fff;background:var(--red);border-radius:4px;padding:0 6px;margin-left:6px}
.cform .opt{background:var(--sub)}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform button{justify-self:start;cursor:pointer;font:inherit;font-weight:700}
.form-msg{padding:12px 14px;border-radius:8px;font-weight:700}
.form-msg.ok{background:#EAF6EC;color:#1E5B2A}.form-msg.ng{background:var(--pale);color:var(--maroon)}
/* スポンサー */
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:8px}
.plan{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--red);border-radius:12px;padding:16px}
.plan.gold{border-top-color:var(--gold)}
.plan h4{margin:0 0 4px;font-size:18px}
.plan .price{margin:0 0 8px}.plan .price b{font-size:26px;color:var(--navy)}.plan .price span{color:var(--sub);font-size:14px;margin-left:4px}
.plan ul{margin:0 0 14px;padding-left:1.2em;flex:1}.plan li{margin:2px 0}
.plan .btn{align-self:flex-start}
/* フッター（共通） */
footer.site{background:var(--navy);color:#C9D1DC;padding:32px 0;font-size:14px}
footer.site a{color:#fff}
footer.site .sns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}
/* スマホの画面下の申込ボタン（出すページは page() で決める） */
.spbar{display:none}
@media (max-width:760px){
 body.has-spbar{padding-bottom:72px}
 .spbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line)}
 .spbar .btn{flex:1;text-align:center;padding:11px 6px;font-size:15px}
}

/* ===== 共通の実用表示（お問い合わせ・スケジュール・アクセス・プライバシーポリシー等） ===== */
.t-plain .ph{border-bottom:1px solid var(--line)}
.t-plain .ph h1{padding-left:12px;border-left:6px solid var(--red)}

/* ===== B（スポーティ）: 濃紺の見出し帯・英字ラベル・写真は角を小さく ===== */
.t-b .ph{background:var(--navy);color:#fff}
.t-b .ph .lab{font-family:Oswald,sans-serif;color:#FF8A92;letter-spacing:.24em}
.t-b .ph h1{font-weight:900}
.t-b h2{font-weight:900}
.t-b h2::before{content:"";display:inline-block;width:6px;height:.95em;background:var(--red);margin-right:10px;vertical-align:-2px}
.t-b .grid img,.t-b .photo img,.t-b .menu-card img{border-radius:4px}
/* トップ（B） */
.hero{position:relative;color:#fff;background:#000;min-height:560px;display:flex;align-items:flex-end}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,43,.45) 0%,rgba(14,26,43,0) 35%,rgba(14,26,43,.92) 100%)}
.hero .in{position:relative;z-index:2;padding:0 16px 56px;max-width:1080px;margin:0 auto;width:100%}
.hero .kicker{font-family:Oswald,sans-serif;font-size:14px;letter-spacing:.3em;color:#FF8A92}
.hero .catch{font-size:52px;font-weight:900;line-height:1.2;margin:8px 0 10px}
.hero h1{font-size:17px;font-weight:700;margin:0 0 6px;line-height:1.5}
.hero p{margin:0 0 18px;max-width:600px;opacity:.92}
.hero .hlnews{display:inline-block;margin:0 0 20px;padding:4px 12px;background:rgba(255,255,255,.14);border-radius:6px;font-size:14px;color:#fff;text-decoration:none}
.facts-band{background:var(--red);color:#fff}
.facts-band .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.facts-band div{padding:18px 10px;text-align:center;border-left:1px solid rgba(255,255,255,.28)}
.facts-band div:first-child{border-left:0}
.facts-band small{display:block;font-size:12px;opacity:.9}
.facts-band b{display:block;font-size:20px;font-weight:900;line-height:1.35}
.facts-band a{color:#fff;font-size:12px}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.door{display:grid;grid-template-rows:auto 1fr;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.door img{width:100%;aspect-ratio:16/9;object-fit:cover}
.door .tx{padding:18px 20px}
.door h2{margin:0 0 6px;font-size:21px}
.door h2::before{display:none}
.door ul{margin:0 0 14px;padding-left:1.2em}
.dark{background:var(--navy);color:#fff;padding:40px 0 44px;margin-top:44px}
.dark h2{color:#fff;margin-top:0}
.dark .recent-ranks{background:transparent;border-color:rgba(255,255,255,.18)}
.dark .recent-ranks li{border-color:rgba(255,255,255,.14)}
.dark .recent-ranks a{color:#fff}
.dark .recent-ranks .rk-date{color:#AEB8C6}
.dark .recent-ranks .rk-grade{color:#fff;border-color:#FF8A92}
.dark .recent-ranks li.hl{background:rgba(255,255,255,.06)}
.dark .rrank{background:transparent;color:#F2D27A;border-color:#F2D27A}
.dark .rrank.win{background:#F2D27A;color:#1A1400;border-color:#F2D27A}
.dark p a{color:#fff}
@media (max-width:760px){
 .hero{min-height:500px}
 .hero .catch{font-size:36px}
 .facts-band .wrap{grid-template-columns:1fr 1fr}
 .facts-band div:nth-child(3){border-left:0}
 .facts-band div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.28)}
 .facts-band b{font-size:17px}
 .doors{grid-template-columns:1fr}
}

/* ===== A（やさしい）: 生成りの背景・見出しは丸ゴシック・写真は角を大きく ===== */
.t-a{background:var(--cream)}
.t-a .ph{background:var(--cream2)}
.t-a .ph .lab{color:var(--red-d)}
.t-a h1,.t-a h2,.t-a h3,.t-a .catch{font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif}
.t-a h2{text-align:center;margin-top:48px}
.t-a .grid img,.t-a .photo img{border-radius:18px}
.a-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:32px;align-items:center;margin-bottom:8px}
.a-hero .eyebrow{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 14px;font-size:13px;color:var(--sub)}
.a-hero .catch{font-size:36px;font-weight:700;line-height:1.4;margin:14px 0 10px}
.a-hero .catch em{font-style:normal;color:var(--red-d)}
.a-hero img{border-radius:24px 24px 24px 72px;aspect-ratio:4/3;object-fit:cover;width:100%}
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.point{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.point h3{margin:0 0 6px;font-size:19px}
.point p{margin:0;font-size:14px;color:var(--sub)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.step::before{counter-increment:s;content:"STEP " counter(s);display:inline-block;background:var(--navy);color:#fff;border-radius:999px;font-size:12px;font-weight:700;padding:1px 12px;margin-bottom:8px}
.step h3{margin:0 0 6px}
.step p{margin:0;font-size:15px}
.t-a details.card summary{cursor:pointer}
.t-a .final{background:var(--navy);color:#fff;border-radius:12px;padding:32px 24px;text-align:center;margin-top:48px}
.t-a .final h2{color:#fff;margin:0 0 8px}
@media (max-width:760px){
 .a-hero{grid-template-columns:1fr;gap:18px}
 .a-hero .pic{order:-1}
 .a-hero .catch{font-size:27px}
 .points,.steps{grid-template-columns:1fr}
}