@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root { --ink:#18303d; --blue:#315a70; --paper:#f6f5f0; --white:#fff; --mist:#e9edf0; --accent:#b64634; --accent-light:#f0b3a8; --line:#d8d8d1; --muted:#5c6d73; --pad:clamp(20px,5vw,68px); --max:1120px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Noto Sans JP',sans-serif; font-size:16px; line-height:1.9; letter-spacing:.025em; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { font-weight:900; line-height:1.35; letter-spacing:-.045em; }
.wrap { width:min(100%,var(--max)); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
a:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.plan a:focus-visible,.hero a:focus-visible { outline-color:var(--accent-light); }

/* 見出しの型（全セクション共通） */
.section-heading { max-width:none; }
.kicker { color:var(--accent); font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700; letter-spacing:.2em; }
h2 { margin-top:9px; font-size:clamp(31px,4vw,58px); }
/* 見出しは箱いっぱいまで使う。760pxで止めると、窓の広い機で文字が育った時に
   最後の一字だけが次の行へ落ちる。折り返す時は行の長さを揃える */
.section-heading h2 { text-wrap:balance; }
/* 本文は下の写真・表と同じ幅まで伸ばす。文節で折り返す（対応しない器は素通し） */
.section-heading > p:not(.kicker) { margin-top:22px; word-break:auto-phrase; }

.header { height:76px; display:flex; align-items:center; gap:28px; padding:0 var(--pad); background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.logo { font-weight:900; font-size:18px; white-space:nowrap; }
.logo span { margin-right:9px; color:var(--accent); font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:.15em; }
.header nav { display:flex; gap:22px; margin-left:auto; font-size:13px; font-weight:700; }
.header nav a { padding:4px 0; border-bottom:2px solid transparent; transition:.2s; }
.header nav a:hover { border-bottom-color:var(--accent); }
.header-cta { padding:10px 15px; background:var(--accent); color:#fff; font-size:13px; font-weight:700; white-space:nowrap; transition:.2s; }
.header-cta:hover { background:#8d3529; }

.hero { min-height:680px; display:flex; align-items:center; color:#fff; background:linear-gradient(90deg,rgba(17,34,43,.89),rgba(17,34,43,.55) 52%,rgba(17,34,43,.18)),url('assets/webzen-karate-sparring-training.webp') center/cover no-repeat; }
.hero-content { padding-top:100px; padding-bottom:100px; }
.hero > .wrap > p { color:var(--accent-light); font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700; letter-spacing:.22em; }
h1 { max-width:820px; margin-top:17px; font-size:clamp(40px,5.4vw,74px); }
.hero-text { max-width:560px; margin-top:30px; }
.hero-text > p { color:#e0e8ea; }
.hero-text dl { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0; }
.hero-text dl div { padding:5px 10px; border:1px solid rgba(255,255,255,.6); font-size:12px; }
.hero-text dt,.hero-text dd { display:inline; margin:0; font-weight:700; }
.hero-text dt::after { content:'：'; }
.button { display:inline-block; margin-top:30px; padding:15px 22px; background:var(--accent); color:#fff; font-size:15px; font-weight:900; transition:.2s; }
.button:hover { background:#8d3529; transform:translateY(-2px); }
.button.dark { background:var(--ink); }
.button.dark:hover { background:#0b1b23; }

/* 数字の帯 */
.stats { background:var(--paper); border-bottom:1px solid var(--line); padding:clamp(34px,5vw,52px) 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stats-grid div { border-left:2px solid var(--accent); padding-left:16px; }
.stats-grid strong { display:block; font-family:'Barlow Condensed',sans-serif; font-size:clamp(30px,3.4vw,44px); font-weight:700; line-height:1.1; letter-spacing:.01em; }
.stats-grid small { margin-left:5px; font-family:'Noto Sans JP',sans-serif; font-size:13px; font-weight:700; }
.stats-grid span { display:block; margin-top:5px; color:var(--muted); font-size:13px; line-height:1.6; }

/* 何を稽古するか */
.about { background:var(--white); padding:clamp(80px,10vw,130px) 0; }
.practice-images { display:grid; grid-template-columns:1.35fr .82fr; grid-template-rows:1fr 1fr; gap:12px; margin-top:55px; }
.practice-images figure { margin:0; overflow:hidden; }
.practice-images img { height:100%; object-fit:cover; }
.practice-images .practice-main { grid-row:span 2; min-height:540px; }
.practice-images figure:not(.practice-main) { min-height:264px; }
.practice-notes { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:37px; }
.practice-notes article { border-top:2px solid var(--blue); padding-top:15px; }
.practice-notes h3 { font-size:21px; }
.practice-notes .note-sub { margin-top:4px; color:var(--accent); font-size:13px; font-weight:700; }
.practice-notes p:not(.note-sub) { margin-top:7px; font-size:14px; }

/* こんな人に向いています */
.audience { background:var(--paper); padding:clamp(80px,10vw,130px) 0; }
.audience-list { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:48px; }
.audience-list article { background:var(--white); padding:30px 28px; border-top:3px solid var(--blue); }
.audience-list h3 { margin-top:10px; font-size:20px; }
.audience-list p:not(.kicker) { margin-top:14px; font-size:14px; }

/* プラン */
.plan { background:var(--ink); color:#fff; padding:clamp(80px,10vw,130px) 0; }
.plan .kicker { color:var(--accent-light); }
.plan .section-heading > p:not(.kicker) { color:#d5e0e3; }
.plan-branch { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px; }
.plan-branch article { display:flex; flex-direction:column; padding:26px 24px; background:rgba(255,255,255,.06); border-top:3px solid var(--accent); }
.plan-q { color:var(--accent-light); font-size:13px; font-weight:700; line-height:1.6; }
.plan-q::before { content:'▶ '; }
.plan-branch h3 { margin-top:14px; font-size:23px; }
.plan-branch strong { margin-top:6px; color:#fff; font-family:'Barlow Condensed',sans-serif; font-size:46px; font-weight:700; line-height:1; }
.plan-branch small { margin-left:3px; font-family:'Noto Sans JP',sans-serif; font-size:12px; font-weight:500; }
.plan-branch article > p:not(.plan-q) { margin-top:16px; color:#d5e0e3; font-size:14px; }
/* 列幅を固定し、見出しと●を同じ中央線に揃える（器によってずれないように） */
.plan-table { width:100%; margin-top:48px; border-collapse:collapse; table-layout:fixed; text-align:center; }
.plan-table caption { padding-bottom:14px; color:var(--accent-light); font-size:13px; font-weight:700; text-align:left; }
.plan-table th,.plan-table td { padding:16px 12px; border-bottom:1px solid rgba(255,255,255,.4); }
.plan-table th:first-child,.plan-table tbody th { width:37%; text-align:left; }
.plan-table thead th { border-bottom:2px solid rgba(255,255,255,.7); font-size:14px; }
.plan-table thead th span { display:block; color:#d5e0e3; font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:500; letter-spacing:.04em; }
.plan-table tbody th { font-size:14px; font-weight:700; }
.plan-table .yes { color:var(--accent-light); font-size:19px; }
.plan-table .no { color:#93a5ab; font-size:19px; }
.plan-table i { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

/* 曜日別プログラム */
.schedule { background:var(--white); padding:clamp(80px,10vw,130px) 0; }
/* 一段目：曜日ごとの種目・時刻・内容 */
.daylist { margin:40px 0 0; border-top:2px solid var(--blue); }
.daylist > div { display:grid; grid-template-columns:104px 168px 116px 1fr; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line); }
.daylist dt { font-weight:700; }
.daylist dd { margin:0; }
.d-name { font-size:17px; font-weight:700; }
.d-time { color:var(--muted); font-family:'Barlow Condensed',sans-serif; font-size:18px; letter-spacing:.03em; }
.d-desc { font-size:14px; }

/* 二段目：時間割のグラフ。横軸が0:00〜24:00（30分×48コマ） */
.tt-legend { display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:40px; font-size:13px; font-weight:700; font-style:normal; }
.tt-legend b,.tt-legend i { display:flex; align-items:center; gap:9px; font-style:normal; font-weight:700; }
.tt-legend b::before,.tt-legend i::before { content:''; width:26px; height:14px; }
.tt-legend b::before { background:var(--blue); }
.tt-legend b.lend { color:var(--muted); font-weight:500; }
.tt-legend b.lend::before { background:#cfd6d9; }
.tt-legend i::before { background:#eef1f2; border:1px solid var(--line); }
.tt-axis { display:grid; grid-template-columns:44px 1fr; margin-top:18px; }
.tt-axis > div { display:grid; grid-template-columns:repeat(36,1fr); }
.tt-axis i { grid-column:var(--c); padding-left:6px; border-left:1px solid var(--line); color:var(--muted); font-family:'Barlow Condensed',sans-serif; font-size:13px; font-style:normal; letter-spacing:.04em; white-space:nowrap; }
.tt-axis i.end { grid-column:31/37; padding:0 6px 0 0; border-left:0; border-right:1px solid var(--line); text-align:right; }
.timetable { margin:6px 0 0; }
.timetable > div { display:grid; grid-template-columns:44px 1fr; align-items:center; margin-bottom:6px; }
.timetable dt { font-weight:700; font-size:15px; }
.tt-track { display:grid; grid-template-columns:repeat(36,1fr); margin:0; height:48px; background:#eef1f2 linear-gradient(to right,var(--line) 1px,transparent 1px) 0 0/calc(100%/3) 100%; }
.tt-bar { grid-column:var(--from)/var(--to); display:flex; flex-direction:column; justify-content:center; min-width:6px; padding:0 8px; background:var(--blue); color:#fff; overflow:hidden; }
.tt-bar b { font-size:12px; font-weight:700; line-height:1.4; white-space:nowrap; }
.tt-bar em { color:#cfdde4; font-family:'Barlow Condensed',sans-serif; font-size:12px; font-style:normal; letter-spacing:.03em; line-height:1.3; white-space:nowrap; }
/* 少年空手教室へ貸し出している時間（この道場は使えない） */
.tt-bar.lend { background:#cfd6d9; color:var(--ink); }
.tt-bar.lend em { color:var(--muted); }
.tt-note { margin-top:16px; padding-left:15px; border-left:2px solid var(--accent); font-size:14px; font-weight:700; }
/* 写真は二枚とも、上のグラフ・表と同じ幅まで伸ばす */
.photo-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:35px 0 0; }
.photo-pair figure { margin:0; }
.photo-pair img { aspect-ratio:4/3; object-fit:cover; }

/* トレーニング設備 */
.training-room { padding:clamp(80px,10vw,130px) 0; background:var(--mist); }
.subnote { margin-top:22px; padding-left:15px; border-left:2px solid var(--accent); color:var(--muted); font-size:14px; }

/* 体験では何をするか */
.firstday { background:var(--white); padding:clamp(80px,10vw,130px) 0; }
.firstday-list { display:grid; grid-template-columns:repeat(3,1fr); gap:30px 34px; margin:48px 0 0; padding:0; list-style:none; counter-reset:step; }
.firstday-list li { counter-increment:step; border-top:2px solid var(--blue); padding-top:16px; }
.firstday-list h3 { font-size:20px; }
.firstday-list h3::before { content:counter(step); margin-right:10px; color:var(--accent); font-family:'Barlow Condensed',sans-serif; font-size:26px; }
.firstday-list p { margin-top:8px; font-size:14px; }

/* 体験会 */
.trial { padding-top:clamp(80px,10vw,130px); padding-bottom:clamp(80px,10vw,130px); }
.trial-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; border-top:1px solid var(--line); }
.trial-flow > div { padding-top:23px; }
.trial-flow span { color:var(--accent); font-family:'Barlow Condensed',sans-serif; font-size:34px; font-weight:700; }
.trial-flow h3 { margin-top:4px; font-size:21px; }
.trial-flow p { margin-top:6px; font-size:14px; }

/* 入会の流れ */
.join { background:var(--white); padding:clamp(80px,10vw,130px) 0; }
.join-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin:48px 0 0; padding:0; list-style:none; }
.join-steps li { border-top:2px solid var(--blue); padding-top:18px; }
.join-steps span { color:var(--accent); font-family:'Barlow Condensed',sans-serif; font-size:34px; font-weight:700; }
.join-steps h3 { margin-top:4px; font-size:20px; }
.join-steps p { margin-top:8px; font-size:14px; }
.join-notes { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:44px; padding-top:34px; border-top:1px solid var(--line); }
.join-notes h3 { font-size:17px; }
.join-notes p { margin-top:8px; color:var(--muted); font-size:14px; }


/* Q&A */
.faq { background:var(--paper); padding:clamp(80px,10vw,130px) 0; }
.faq-list { margin-top:40px; border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:20px 0; font-weight:700; cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--accent); font-family:'Barlow Condensed',sans-serif; font-size:26px; line-height:1; }
.faq details[open] summary::after { content:'−'; }
.faq details p { padding:0 0 22px; color:var(--muted); font-size:14px; }
.faq details p a { font-weight:700; color:var(--ink); border-bottom:1px solid var(--ink); }

.gallery { padding:clamp(60px,8vw,100px) 0; background:var(--white); }
/* 4枚を「大きい1枚＋横長1枚＋小さい2枚」で組む。二つ目の並びは左右を入れ替える。
   縦横比は、4列＋間隔から升目が正方形になる値（2.02:1）を器に与えて決めている */
.gallery-strip { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:1fr 1fr; gap:12px; margin-top:24px; aspect-ratio:2.02/1; }
.gallery-strip figure:nth-child(1) { grid-column:1/3; grid-row:1/3; }
.gallery-strip figure:nth-child(2) { grid-column:3/5; }
.gallery-strip.flip figure:nth-child(1) { grid-column:3/5; grid-row:1/3; }
.gallery-strip.flip figure:nth-child(2) { grid-column:1/3; }
.gallery-strip figure { margin:0; overflow:hidden; }
.gallery-strip img { width:100%; height:100%; object-fit:cover; }
.gallery-heading-2 { margin-top:56px; }

.access { display:grid; grid-template-columns:.85fr 1.15fr; background:var(--paper); }
.access-copy { padding:clamp(75px,10vw,125px) var(--pad); }
.access address { margin-top:26px; font-style:normal; font-weight:700; }
.access-phone { display:block; width:max-content; margin-top:14px; color:var(--ink); font-size:16px; font-weight:900; border-bottom:1px solid var(--ink); }
.access-hours { margin-top:18px; color:var(--muted); font-size:13px; line-height:1.8; }
.access-actions { display:flex; flex-wrap:wrap; gap:0 24px; }
.access-actions a { display:inline-block; margin-top:22px; color:var(--accent); font-size:14px; font-weight:900; border-bottom:1px solid var(--accent); }
.access-note { margin-top:26px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.8; }
.access-note a { font-weight:700; color:var(--ink); border-bottom:1px solid var(--ink); }
.access iframe { width:100%; min-height:480px; border:0; }

footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:15px; padding:26px var(--pad); background:#102027; color:#d8e3e6; font-family:'Barlow Condensed',sans-serif; font-size:13px; letter-spacing:.08em; }
footer small { font-family:'Noto Sans JP',sans-serif; letter-spacing:.02em; }
.mobile-cta { display:none; }

@media (max-width:1000px) {
  .header nav { gap:16px; font-size:12px; }
  .audience-list,.firstday-list { grid-template-columns:1fr 1fr; }
}

@media (max-width:800px) {
  body { padding-bottom:57px; }
  .header { height:64px; gap:12px; }
  .logo { font-size:15px; }
  .logo span,.header nav { display:none; }
  .header-cta { margin-left:auto; padding:8px 10px; font-size:11px; }
  /* 主役（青帯）は写真の73%の位置に居る。80%指定で顔が中央右に収まる */
  .hero { min-height:620px; background-position:80% center; }
  .hero-content { padding-top:78px; padding-bottom:65px; }
  h1 { font-size:clamp(29px,7.2vw,40px); }
  h2 { font-size:clamp(26px,6.4vw,38px); }
  .stats-grid { grid-template-columns:1fr 1fr; gap:18px 14px; }
  .audience-list,.firstday-list,.join-steps,.join-notes { grid-template-columns:1fr; }
  .audience-list { gap:16px; }
  .join-steps,.join-notes { gap:0; }
  .join-steps li,.join-notes article { padding-top:18px; }
  .join-notes article { border-top:1px solid var(--line); margin-top:18px; }
  .join-notes article:first-child { margin-top:0; border-top:0; }
  .practice-images { grid-template-columns:1fr; grid-template-rows:auto; gap:10px; }
  .practice-images .practice-main,.practice-images figure:not(.practice-main) { min-height:0; }
  .practice-images .practice-main { grid-row:auto; }
  .practice-images img { aspect-ratio:4/3; }
  .practice-notes,.trial-flow { grid-template-columns:1fr; gap:0; }
  .practice-notes article { padding:16px 0; border-top:1px solid var(--line); }
  .practice-notes article:first-child { border-top:2px solid var(--blue); }
  .firstday-list { gap:0; }
  .firstday-list li { padding:16px 0; border-top:1px solid var(--line); }
  .firstday-list li:first-child { border-top:2px solid var(--blue); }
  .plan-branch { grid-template-columns:1fr; gap:14px; }
  /* 表は崩さない。縦積みにすると三段の階段が読めなくなる。文字だけ詰める */
  .plan-table { margin-top:34px; }
  .plan-table th,.plan-table td { padding:13px 4px; }
  .plan-table th:first-child,.plan-table tbody th { width:43%; }
  .plan-table thead th { font-size:11px; }
  .plan-table thead th span { font-size:13px; }
  .plan-table tbody th { font-size:12px; line-height:1.55; }
  .plan-table .yes,.plan-table .no { font-size:16px; }
  .daylist > div { grid-template-columns:auto auto 1fr; gap:2px 12px; padding:14px 0; }
  .d-time { font-size:16px; }
  .d-desc { grid-column:1/4; margin-top:4px; }
  .tt-legend { margin-top:34px; }
  .tt-axis,.timetable > div { grid-template-columns:30px 1fr; }
  .tt-axis i { padding-left:4px; font-size:11px; }
  .tt-axis i.end { padding-right:4px; }
  /* スマホは帯が細いので、中の文字は出さない（上の一覧が持っている） */
  .tt-track { height:26px; }
  .tt-bar { padding:0; }
  .tt-bar b,.tt-bar em { display:none; }
  .trial-flow > div { padding:20px 0; border-bottom:1px solid var(--line); }
  .photo-pair { gap:8px; }
  .gallery-strip { grid-template-columns:1fr 1fr; grid-template-rows:auto; gap:8px; aspect-ratio:auto; }
  .gallery-strip figure:nth-child(1),.gallery-strip figure:nth-child(2),
  .gallery-strip.flip figure:nth-child(1),.gallery-strip.flip figure:nth-child(2) { grid-column:auto; grid-row:auto; }
  .gallery-strip img { aspect-ratio:1/1; height:auto; }
  .gallery-heading-2 { margin-top:38px; }
  .access { grid-template-columns:1fr; }
  .access iframe { min-height:320px; }
  .mobile-cta { display:block; position:fixed; inset:auto 0 0; z-index:20; padding:15px; background:var(--accent); color:#fff; text-align:center; font-size:14px; font-weight:900; }
}