:root {
  --navy: #07152c;
  --navy-2: #0d2348;
  --lime: #b7ff32;
  --cyan: #27d9ff;
  --coral: #ff5e65;
  --white: #f7fbff;
  --silver: #c8d2df;
  --ink: #101926;
  --muted: #586576;
  --line: rgba(7, 21, 44, 0.2);
  --sans: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --display: "Arial Narrow", "Roboto Condensed", "Yu Gothic", sans-serif;
  --content: min(1200px, calc(100vw - 64px));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: var(--sans); font-size: 16px; line-height: 1.8; text-rendering: optimizeLegibility; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-underline-offset: 0.24em; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 4px solid var(--lime); outline-offset: 4px; }

.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 16px; color: var(--navy); background: var(--lime); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 100; border-bottom: 1px solid rgba(255,255,255,0.18); color: var(--white); background: var(--navy); }
.header-inner { display: grid; width: var(--content); min-height: 88px; margin: 0 auto; grid-template-columns: minmax(260px,1fr) auto; gap: 36px; align-items: center; }
.brand { display: inline-flex; width: fit-content; align-items: center; gap: 14px; text-decoration: none; }
.brand-mark { position: relative; display: grid; width: 54px; height: 54px; color: var(--navy); background: var(--lime); font-family: var(--display); font-size: 21px; font-weight: 900; letter-spacing: -0.1em; place-items: center; clip-path: polygon(10% 0,100% 0,90% 100%,0 100%); }
.brand-mark::after { position: absolute; right: 3px; bottom: 4px; width: 7px; height: 7px; background: var(--coral); content: ""; }
.brand-copy { display: grid; line-height: 1.28; }
.brand-copy strong { font-size: 15px; font-weight: 800; letter-spacing: 0.04em; }
.brand-copy small { margin-top: 4px; color: var(--cyan); font-family: Arial,sans-serif; font-size: 9px; font-weight: 800; letter-spacing: 0.18em; }
.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a { font-size: 13px; font-weight: 800; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--lime); }
.site-nav .nav-contact { padding: 10px 18px; border: 1px solid var(--lime); color: var(--navy); background: var(--lime); clip-path: polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%); }
.site-nav .nav-contact[aria-current="page"] { color: var(--navy); }
.site-nav .nav-contact:hover { color: var(--white); background: transparent; }
.menu-toggle { display: none; width: 48px; height: 48px; padding: 0; border: 1px solid var(--lime); color: var(--lime); background: transparent; }
.menu-toggle span,.menu-toggle::before,.menu-toggle::after { display: block; width: 23px; height: 2px; margin: 5px auto; background: currentColor; content: ""; }
.menu-toggle[aria-expanded="true"] span { opacity: 0; }
.menu-toggle[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"]::after { transform: translateY(-7px) rotate(-45deg); }

.hero { position: relative; overflow: hidden; color: var(--white); background: var(--navy); }
.hero::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(39,217,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(39,217,255,.09) 1px,transparent 1px); background-size: 64px 64px; content: ""; }
.hero-inner { position: relative; z-index: 1; display: grid; width: var(--content); min-height: 745px; margin: 0 auto; grid-template-columns: minmax(0,1.12fr) minmax(390px,.88fr); }
.hero-copy { display: flex; padding: 83px 70px 68px 0; flex-direction: column; justify-content: space-between; }
.hero-code { display: flex; width: fit-content; align-items: center; gap: 11px; color: var(--cyan); font-family: monospace; font-size: 11px; letter-spacing: .15em; }
.hero-code::before { width: 42px; height: 3px; background: var(--lime); content: ""; }
.hero-title { max-width: 790px; margin: 25px 0 0; font-family: var(--display); font-size: clamp(61px,7vw,106px); font-weight: 900; letter-spacing: -.075em; line-height: .98; text-transform: uppercase; }
.hero-title .accent { color: var(--lime); }
.hero-title .outline { color: transparent; -webkit-text-stroke: 2px var(--cyan); }
.hero-bottom { display: grid; max-width: 760px; margin-top: 52px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.45); grid-template-columns: 1fr auto; gap: 38px; align-items: end; }
.hero-bottom p { max-width: 510px; margin: 0; color: var(--silver); font-size: 17px; }
.button { display: inline-flex; min-height: 52px; padding: 11px 21px; align-items: center; justify-content: center; gap: 17px; border: 1px solid var(--lime); color: var(--navy); background: var(--lime); font-size: 14px; font-weight: 900; text-decoration: none; clip-path: polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); transition: color 150ms ease,background 150ms ease,transform 150ms ease; }
.button::after { content: "↗"; }
.button:hover { color: var(--lime); background: transparent; transform: translateX(4px); }
.button.dark { color: var(--white); background: var(--navy); border-color: var(--navy); }
.button.dark:hover { color: var(--navy); background: transparent; }

.hero-field { position: relative; min-height: 745px; border-right: 1px solid rgba(255,255,255,.25); border-left: 1px solid rgba(255,255,255,.25); background: var(--navy-2); }
.field-board { position: absolute; inset: 68px 36px 62px; border: 2px solid rgba(255,255,255,.72); overflow: hidden; }
.field-board::before { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: rgba(255,255,255,.72); content: ""; }
.field-board::after { position: absolute; top: 50%; left: 50%; width: 155px; height: 155px; border: 2px solid rgba(255,255,255,.72); border-radius: 50%; content: ""; transform: translate(-50%,-50%); }
.goal-box { position: absolute; left: 50%; width: 175px; height: 80px; border: 2px solid rgba(255,255,255,.72); transform: translateX(-50%); }
.goal-box.top { top: -2px; }
.goal-box.bottom { bottom: -2px; }
.tactic-line { position: absolute; z-index: 2; inset: 80px 48px; }
.field-badge { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 180px; height: 180px; border: 2px solid var(--navy); border-radius: 50%; color: var(--navy); background: var(--lime); box-shadow: 12px 12px 0 var(--coral); font-family: var(--display); font-size: 33px; font-weight: 900; letter-spacing: -.08em; line-height: .9; text-align: center; place-items: center; transform: translate(-50%,-50%) rotate(-5deg); }
.field-badge small { display: block; margin-top: 8px; font-family: monospace; font-size: 9px; letter-spacing: .08em; }
.field-meta { position: absolute; z-index: 4; right: 17px; bottom: 13px; color: var(--cyan); font-family: monospace; font-size: 9px; letter-spacing: .12em; }

.score-strip { border-top: 1px solid rgba(255,255,255,.24); border-bottom: 1px solid rgba(255,255,255,.24); color: var(--navy); background: var(--cyan); }
.score-inner { display: flex; width: var(--content); min-height: 55px; margin: 0 auto; align-items: center; justify-content: space-between; gap: 20px; font-family: monospace; font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.score-inner span { display: flex; align-items: center; gap: 13px; }
.score-inner span::before { width: 7px; height: 7px; background: var(--coral); content: ""; transform: rotate(45deg); }

.section { padding: 115px 0; border-bottom: 1px solid var(--line); }
.section.light { background: var(--white); }
.section.dark { color: var(--white); background: var(--navy); }
.section.lime { background: var(--lime); }
.section-inner { width: var(--content); margin: 0 auto; }
.section-heading { display: grid; margin-bottom: 68px; grid-template-columns: 160px 1fr; gap: 44px; }
.section-code { padding-top: 10px; color: var(--coral); font-family: monospace; font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.dark .section-code { color: var(--cyan); }
.section-title { max-width: 900px; margin: 0; font-family: var(--display); font-size: clamp(43px,5.5vw,73px); font-weight: 900; letter-spacing: -.06em; line-height: 1.1; }

.philosophy-layout { display: grid; grid-template-columns: 1fr .9fr; gap: 88px; }
.philosophy-lead { margin: 0; color: var(--navy); font-family: var(--display); font-size: clamp(29px,3.2vw,43px); font-weight: 900; letter-spacing: -.04em; line-height: 1.5; }
.philosophy-panel { position: relative; padding: 31px 35px; border: 2px solid var(--navy); background: #edf4fa; box-shadow: 12px 12px 0 var(--cyan); }
.philosophy-panel::before { position: absolute; top: -14px; left: 30px; padding: 2px 11px; color: var(--navy); background: var(--lime); font-family: monospace; font-size: 10px; font-weight: 900; content: "CLUB PHILOSOPHY"; }
.philosophy-panel p { margin: 0 0 18px; }
.text-link { color: var(--navy); font-weight: 900; }
.dark .text-link { color: var(--lime); }

.program-grid { display: grid; border-top: 1px solid rgba(255,255,255,.45); grid-template-columns: 1fr 1fr 1fr; }
.program-item { position: relative; min-height: 390px; padding: 35px 30px; border-right: 1px solid rgba(255,255,255,.45); overflow: hidden; }
.program-item:last-child { border-right: 0; }
.program-item:nth-child(2) { color: var(--navy); background: var(--lime); }
.program-item:nth-child(3) { color: var(--navy); background: var(--cyan); }
.program-number { font-family: monospace; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.program-item h3 { margin: 95px 0 17px; font-family: var(--display); font-size: 32px; font-weight: 900; letter-spacing: -.05em; line-height: 1.15; }
.program-item p { margin: 0; font-size: 14px; }
.program-icon { position: absolute; top: 30px; right: 28px; width: 72px; height: 72px; border: 2px solid currentColor; border-radius: 50%; opacity: .55; }
.program-icon::after { position: absolute; top: 50%; left: -24px; width: 116px; height: 2px; background: currentColor; content: ""; transform: rotate(-28deg); }

.recent-intro { display: grid; margin-bottom: 50px; grid-template-columns: 1fr 1fr; gap: 65px; }
.recent-intro p { margin: 0; }
.recent-note { padding: 18px 22px; border-left: 6px solid var(--coral); background: #eef3f7; font-size: 13px; }
.recent-list { border-top: 2px solid var(--navy); }
.recent-entry { display: grid; min-height: 158px; padding: 28px 0; border-bottom: 2px solid var(--navy); grid-template-columns: 135px minmax(220px,.8fr) minmax(300px,1fr) 40px; gap: 30px; align-items: center; }
.recent-date { color: var(--coral); font-family: monospace; font-size: 12px; font-weight: 900; }
.recent-entry h3 { margin: 0; font-family: var(--display); font-size: 23px; font-weight: 900; letter-spacing: -.03em; line-height: 1.3; }
.recent-entry p { margin: 0; color: var(--muted); font-size: 14px; }
.recent-arrow { display: grid; width: 36px; height: 36px; color: var(--navy); background: var(--lime); font-weight: 900; place-items: center; clip-path: polygon(0 0,100% 15%,85% 100%,0 85%); }

.values-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }
.values-layout h2 { margin: 0; font-family: var(--display); font-size: clamp(46px,6vw,82px); font-weight: 900; letter-spacing: -.07em; line-height: .97; }
.values-layout h2 span { color: var(--coral); }
.value-list { border-top: 2px solid var(--navy); }
.value-item { display: grid; padding: 25px 0; border-bottom: 2px solid var(--navy); grid-template-columns: 95px 1fr; gap: 24px; }
.value-item strong { font-family: var(--display); font-size: 20px; font-weight: 900; }
.value-item p { margin: 0; }

.registry-grid { display: grid; border: 1px solid rgba(255,255,255,.5); grid-template-columns: 1fr 1fr; }
.registry-item { min-height: 150px; padding: 27px 30px; border-right: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5); }
.registry-item:nth-child(even) { border-right: 0; }
.registry-item dt { color: var(--cyan); font-family: monospace; font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.registry-item dd { margin: 14px 0 0; font-size: 19px; font-weight: 800; line-height: 1.6; }
.registry-note { margin-top: 23px; color: var(--silver); font-size: 13px; }

.contact-banner { display: grid; grid-template-columns: 1fr auto; gap: 70px; align-items: center; }
.contact-banner h2 { margin: 0; font-family: var(--display); font-size: clamp(48px,6.5vw,88px); font-weight: 900; letter-spacing: -.07em; line-height: .98; }
.contact-banner p { max-width: 690px; margin: 25px 0 0; }
.contact-mark { display: grid; width: 190px; height: 190px; border: 3px solid var(--navy); border-radius: 50%; color: var(--navy); background: var(--cyan); box-shadow: 11px 11px 0 var(--coral); font-family: var(--display); font-size: 19px; font-weight: 900; text-decoration: none; place-items: center; transform: rotate(-5deg); }
.contact-mark:hover { color: var(--lime); background: var(--navy); transform: rotate(4deg); }

.page-hero { position: relative; padding: 87px 0 78px; border-bottom: 1px solid rgba(255,255,255,.2); overflow: hidden; color: var(--white); background: var(--navy); }
.page-hero::before { position: absolute; inset: 0; background: repeating-linear-gradient(115deg,transparent 0 90px,rgba(39,217,255,.08) 90px 91px); content: ""; }
.page-hero::after { position: absolute; right: 8%; bottom: -105px; width: 280px; height: 280px; border: 2px solid var(--lime); border-radius: 50%; content: ""; }
.page-hero-inner { position: relative; z-index: 1; display: grid; width: var(--content); margin: 0 auto; grid-template-columns: 170px 1fr; gap: 45px; }
.page-code { padding-top: 13px; color: var(--cyan); font-family: monospace; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.page-title { max-width: 950px; margin: 0; font-family: var(--display); font-size: clamp(57px,7.5vw,100px); font-weight: 900; letter-spacing: -.07em; line-height: 1; }
.page-lead { max-width: 760px; margin: 31px 0 0; color: var(--silver); font-size: 18px; }

.content-layout { display: grid; grid-template-columns: 230px 1fr; gap: 70px; }
.content-nav { position: sticky; top: 30px; align-self: start; }
.content-nav a { display: block; padding: 13px 0; border-bottom: 1px solid var(--navy); color: var(--navy); font-size: 13px; font-weight: 900; text-decoration: none; }
.content-nav a:hover { padding-left: 7px; color: var(--coral); }
.prose-section { margin-bottom: 82px; scroll-margin-top: 30px; }
.prose-section:last-child { margin-bottom: 0; }
.prose-section h2 { margin: 0 0 28px; padding-bottom: 18px; border-bottom: 2px solid var(--navy); color: var(--navy); font-family: var(--display); font-size: 39px; font-weight: 900; letter-spacing: -.04em; line-height: 1.25; }
.prose-section h3 { margin: 38px 0 14px; color: var(--coral); font-family: var(--display); font-size: 23px; font-weight: 900; }
.prose-section p,.prose-section li { max-width: 800px; }
.prose-section blockquote { margin: 36px 0; padding: 28px 33px; border-left: 8px solid var(--lime); color: var(--white); background: var(--navy); font-size: 17px; }
.fact-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--navy); }
.fact-table th,.fact-table td { padding: 21px 17px; border-bottom: 1px solid var(--navy); vertical-align: top; text-align: left; }
.fact-table th { width: 230px; color: var(--navy); font-size: 13px; font-weight: 900; }

.contact-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 78px; }
.contact-info h2 { margin: 0 0 23px; color: var(--navy); font-family: var(--display); font-size: 40px; font-weight: 900; letter-spacing: -.04em; }
.contact-info dl { margin-top: 42px; border-top: 2px solid var(--navy); }
.contact-info dt { margin-top: 18px; color: var(--coral); font-family: monospace; font-size: 11px; font-weight: 900; }
.contact-info dd { margin: 5px 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--navy); font-weight: 700; }
.contact-form { position: relative; padding: 38px; color: var(--white); background: var(--navy); box-shadow: 13px 13px 0 var(--cyan); }
.contact-form::before { position: absolute; top: -15px; right: 32px; padding: 3px 13px; color: var(--navy); background: var(--lime); font-family: monospace; font-size: 10px; font-weight: 900; content: "CONTACT FORM"; }
.form-row { display: grid; margin-bottom: 21px; gap: 7px; }
.form-row label { font-size: 13px; font-weight: 900; }
.form-row label span { margin-left: 7px; color: var(--cyan); font-size: 10px; }
.form-row input,.form-row select,.form-row textarea { width: 100%; border: 1px solid rgba(255,255,255,.55); border-radius: 0; color: var(--white); background: rgba(255,255,255,.07); }
.form-row input,.form-row select { height: 52px; padding: 0 14px; }
.form-row textarea { min-height: 175px; padding: 12px 14px; resize: vertical; }
.form-row select option { color: var(--ink); }
.form-row input::placeholder,.form-row textarea::placeholder { color: rgba(255,255,255,.45); }
.honeypot { position: absolute; left: -9999px; }
.contact-form .button { width: 100%; cursor: pointer; }
.contact-form .button:disabled { cursor: wait; opacity: .6; }
.form-status { min-height: 27px; margin: 18px 0 0; font-size: 13px; }
.form-status.is-success { color: var(--lime); }
.form-status.is-error { color: #ff9ea2; }

.site-footer { padding: 66px 0 28px; color: var(--white); background: #030b19; }
.footer-inner { width: var(--content); margin: 0 auto; }
.footer-main { display: grid; padding-bottom: 50px; grid-template-columns: minmax(330px,1.3fr) .7fr .7fr; gap: 65px; }
.footer-brand strong { display: block; color: var(--lime); font-family: var(--display); font-size: 25px; font-weight: 900; letter-spacing: -.04em; }
.footer-brand p { margin: 16px 0 0; color: var(--silver); font-size: 13px; }
.footer-column h2 { margin: 0 0 15px; color: var(--cyan); font-family: monospace; font-size: 10px; letter-spacing: .14em; }
.footer-column a { display: block; margin: 8px 0; color: var(--silver); font-size: 13px; text-decoration: none; }
.footer-column a:hover { color: var(--lime); text-decoration: underline; }
.footer-bottom { display: flex; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2); justify-content: space-between; gap: 24px; color: #8290a2; font-family: monospace; font-size: 10px; }

@media (max-width:1040px) {
  :root { --content:min(100% - 40px,920px); }
  .menu-toggle { display:block; }
  .site-nav { position:fixed; inset:88px 0 auto; display:none; padding:27px 22px 38px; border-bottom:1px solid var(--cyan); flex-direction:column; align-items:stretch; gap:0; background:var(--navy); }
  .site-nav.is-open { display:flex; }
  .site-nav a { padding:12px 6px; border-bottom:1px solid rgba(255,255,255,.16); }
  .site-nav .nav-contact { margin-top:18px; text-align:center; }
  .hero-inner { grid-template-columns:1fr 360px; }
  .hero-copy { padding-right:42px; }
  .section-heading { grid-template-columns:120px 1fr; }
  .philosophy-layout,.values-layout { gap:50px; }
  .recent-entry { grid-template-columns:105px .8fr 1fr 35px; gap:22px; }
  .content-layout { grid-template-columns:190px 1fr; gap:45px; }
}

@media (max-width:760px) {
  :root { --content:calc(100% - 34px); }
  body { font-size:15px; }
  .header-inner { min-height:76px; }
  .site-nav { inset:76px 0 auto; }
  .brand-mark { width:44px; height:44px; font-size:17px; }
  .brand-copy strong { max-width:205px; font-size:12px; }
  .brand-copy small { display:none; }
  .hero-inner { min-height:0; grid-template-columns:1fr; }
  .hero-copy { min-height:590px; padding:54px 0 47px; }
  .hero-title { font-size:clamp(58px,18vw,78px); }
  .hero-bottom { grid-template-columns:1fr; gap:25px; }
  .hero-bottom .button { width:100%; }
  .hero-field { min-height:525px; border-top:1px solid rgba(255,255,255,.25); border-right:0; border-left:0; }
  .field-board { inset:45px 25px; }
  .field-badge { width:155px; height:155px; font-size:28px; }
  .score-inner { overflow:hidden; justify-content:flex-start; white-space:nowrap; }
  .section { padding:78px 0; }
  .section-heading,.philosophy-layout,.recent-intro,.values-layout,.contact-banner,.page-hero-inner,.content-layout,.contact-layout,.footer-main { grid-template-columns:1fr; }
  .section-heading { margin-bottom:43px; gap:14px; }
  .section-title { font-size:42px; }
  .philosophy-layout { gap:38px; }
  .philosophy-lead { font-size:25px; }
  .program-grid { grid-template-columns:1fr; }
  .program-item { min-height:280px; border-right:0; border-bottom:1px solid rgba(255,255,255,.45); }
  .program-item h3 { margin-top:72px; }
  .recent-intro { gap:25px; }
  .recent-entry { grid-template-columns:84px 1fr 34px; gap:15px; }
  .recent-entry p { grid-column:2/4; }
  .values-layout { gap:48px; }
  .value-item { grid-template-columns:78px 1fr; }
  .registry-grid { grid-template-columns:1fr; }
  .registry-item,.registry-item:nth-child(even) { border-right:0; }
  .contact-banner { gap:40px; }
  .contact-mark { width:150px; height:150px; }
  .page-hero { padding:58px 0 55px; }
  .page-hero::after { right:-80px; width:200px; height:200px; }
  .page-hero-inner { gap:14px; }
  .page-title { font-size:54px; }
  .content-nav { position:static; display:flex; overflow-x:auto; gap:18px; }
  .content-nav a { flex:0 0 auto; }
  .prose-section h2 { font-size:32px; }
  .fact-table,.fact-table tbody,.fact-table tr,.fact-table th,.fact-table td { display:block; width:100%; }
  .fact-table th { padding-bottom:3px; border-bottom:0; }
  .fact-table td { padding-top:3px; }
  .contact-layout { gap:46px; }
  .contact-form { padding:29px 20px; box-shadow:8px 8px 0 var(--cyan); }
  .footer-main { gap:30px; }
  .footer-bottom { flex-direction:column; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; } }