:root {
  --green: #00a64f;
  --dark-green: #008d42;
  --ink: #050505;
  --line: #dfe3e8;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 600;
  letter-spacing: .02em;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3.3%;
}
.brand { display: flex; align-items: center; gap: 15px; font-size: 20px; font-weight: 800; letter-spacing: -.045em; }
.brand-mark { position: relative; display: block; width: 38px; height: 38px; transform: rotate(-4deg); }
.brand-mark i { position: absolute; display: block; width: 22px; height: 13px; border-radius: 13px 3px 13px 3px; transform: rotate(-45deg); }
.brand-mark i:nth-child(1) { top: 1px; right: 0; background: linear-gradient(90deg,#18b65b,#52d4a2); }
.brand-mark i:nth-child(2) { top: 13px; left: 9px; background: linear-gradient(90deg,#58d94f,#00aa63); transform: rotate(42deg); }
.brand-mark i:nth-child(3) { bottom: 0; left: 0; background: linear-gradient(90deg,#caea22,#72cc37); }
.nav { display: flex; align-items: center; gap: clamp(24px, 3.6vw, 54px); font-size: 12px; font-weight: 800; }
.nav a { transition: color .2s ease; }
.nav a:hover { color: var(--green); }
.nav-entry { color: #fff !important; padding: 13px 21px; border-radius: 999px; background: linear-gradient(90deg,#00a24b,#00a94f); box-shadow: 0 9px 22px rgba(0,166,79,.2); }
.menu-button { display: none; }

.hero {
  position: relative;
  min-height: 660px;
  overflow: hidden;
  padding: 108px 5.7% 24px;
  background:
    radial-gradient(circle at 56% 45%, rgba(219,228,238,.72), transparent 18%),
    radial-gradient(circle at 47% 70%, rgba(210,235,221,.55), transparent 19%),
    linear-gradient(115deg,#fff 0%,#fbfcfd 45%,#f2f5f8 100%);
}
.hero-copy { position: relative; z-index: 5; width: 57%; }
.hero h1 { margin: 0; font-size: clamp(68px, 10.5vw, 117px); line-height: .89; letter-spacing: .005em; font-weight: 900; }
.hero-subtitle { margin: 18px 0 8px; font-size: 27px; font-weight: 800; letter-spacing: .13em; }
.green-rule { display: block; width: 46px; height: 3px; margin: 14px 0 18px; background: var(--green); }
.hero-lead { margin: 0 0 39px; font-size: 16px; line-height: 1.7; letter-spacing: .08em; }
.event-meta { margin: 0; }
.event-meta > div { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.event-meta dt, .event-meta dd { margin: 0; }
.round-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: white; background: var(--green); font-size: 18px; }
.round-icon.pin { font-size: 10px; border: 7px solid var(--green); color: var(--green); background: #fff; }
.event-meta dd { font-size: 15px; }
.event-meta strong { font-size: 29px; letter-spacing: .02em; }
.event-meta small { margin-left: 11px; font-size: 13px; }
.organizers { margin-top: 17px; font-size: 10px; }
.organizers p { display: block; margin: 0 0 7px; }
.organizers b { color: #111; letter-spacing: 0; }
.organizers span { padding: 0; border: 0; }
.capacity { display: inline-flex; gap: 9px; align-items: center; margin-top: 13px; padding: 10px 20px; border: 1px solid #d5dae0; border-radius: 999px; font-size: 12px; }
.capacity > span { color: var(--green); font-size: 18px; }
.capacity i { width: 1px; height: 17px; margin: 0 12px; background: #aaa; }
.capacity small { font-size: 8px; }

.hero-art { position: absolute; inset: 0 0 0 37%; pointer-events: none; }
.orb {
  position: absolute;
  top: 128px;
  right: 15.5%;
  width: 170px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 23%,rgba(255,252,177,.9),transparent 27%),
    radial-gradient(circle at 30% 78%,#00b8b4 0 25%,transparent 45%),
    linear-gradient(145deg,#f5ef6f 5%,#a9ef4e 49%,#16b927 100%);
  box-shadow: 0 27px 25px rgba(36,127,90,.18);
}
.glass-arc {
  position: absolute;
  top: 270px;
  right: -3%;
  width: 430px;
  height: 335px;
  border: 31px solid rgba(255,255,255,.48);
  border-left-color: rgba(246,251,255,.72);
  border-bottom-color: transparent;
  border-radius: 75% 0 0 0;
  transform: rotate(-39deg);
  box-shadow: inset 1px 2px 3px rgba(104,159,213,.2), 2px 2px 4px rgba(124,159,191,.12);
}
.cube { position: absolute; top: 365px; left: 14%; width: 148px; height: 164px; filter: drop-shadow(0 29px 16px rgba(35,132,90,.17)); transform: rotate(4deg); }
.cube span { position: absolute; display: block; }
.cube-top { top: 0; left: 28px; width: 108px; height: 86px; background: linear-gradient(135deg,#d7ffba,#c7f1e4); clip-path: polygon(0 0,100% 0,80% 100%,20% 100%); transform: skewY(25deg); }
.cube-left { top: 65px; left: 0; width: 75px; height: 105px; background: linear-gradient(140deg,#d4fc3a,#e9ffd1); clip-path: polygon(0 0,100% 26%,100% 100%,20% 88%); }
.cube-right { top: 67px; left: 72px; width: 90px; height: 101px; background: linear-gradient(135deg,#b9eb75,#34c9bd); clip-path: polygon(0 25%,100% 0,83% 75%,0 100%); }
.next-local { position: absolute; right: 6.7%; bottom: 19px; color: transparent; font-size: 92px; line-height: 1.05; font-weight: 300; letter-spacing: .03em; -webkit-text-stroke: 1px #ccd4df; opacity: .8; }
.vertical-tags { position: absolute; right: 3.5%; top: 124px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 15px; font-size: 12px; }
.vertical-tags span { writing-mode: vertical-rl; }
.vertical-tags i { width: 1px; height: 27px; background: #222; }

.section-bordered { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about { min-height: 235px; display: grid; grid-template-columns: 75px 1fr 51%; align-items: stretch; padding-left: 5.7%; overflow: hidden; }
.section-number { align-self: start; padding-top: 28px; }
.section-number b, .panel-title > span { color: var(--green); font-size: 47px; line-height: 1; font-weight: 400; }
.section-number i { display: block; width: 1px; height: 102px; margin: -5px 0 0 45px; background: var(--green); transform: rotate(43deg); }
.section-copy { padding: 25px 8px 22px; }
h2 { margin: 0; font-size: 25px; letter-spacing: -.03em; }
h2 small { margin-left: 20px; font-size: 12px; letter-spacing: .03em; }
.section-copy p { margin: 20px 0 0; font-size: 14px; line-height: 1.75; letter-spacing: 0; }
.about-text { text-wrap: pretty; }
.about > img { align-self: center; justify-self: end; width: 94%; height: 190px; min-height: 0; object-fit: cover; object-position: center 58%; border-radius: 999px 0 0 999px; }

.content-grid { display: grid; grid-template-columns: 49.2% 50.8%; }
.panel { padding: 20px 4.8vw 20px; }
.program { min-height: 372px; border-right: 1px solid var(--line); }
.panel-title { display: flex; align-items: center; gap: 25px; margin-bottom: 14px; }
.panel-title > span { font-size: 43px; }
.panel-title h2 { font-size: 21px; }
.schedule { font-size: 14px; }
.schedule p { display: grid; grid-template-columns: 104px 1fr; margin: 0 0 9px; line-height: 1.55; }
.schedule time { color: var(--green); font-weight: 800; }
.party { display: grid; grid-template-columns: 104px 1fr; margin-top: 14px; font-size: 14px; line-height: 1.55; }
.party-time { color: var(--green); font-weight: 800; }
.party-icon { display: block; width: 39px; height: 36px; margin: 5px 0 0 10px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.party-content { padding-top: 1px; }
.party b { font-size: 14px; }
.right-column { display: grid; grid-template-rows: 52% 48%; }
.target { border-bottom: 1px solid var(--line); padding-left: 4.8vw; }
.target ul { margin: 0 0 0 45px; padding: 0; list-style: none; font-size: 14px; line-height: 1.9; }
.target li::before { content: "✓"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 12px; color: #fff; background: var(--green); border-radius: 50%; font-size: 11px; }
.access { display: grid; grid-template-columns: 1fr 44%; gap: 20px; padding: 18px 2.8vw 18px 2.6vw; }
.access .panel-title { gap: 22px; margin-bottom: 12px; }
.access address { font-style: normal; font-size: 14px; line-height: 1.8; }
.access img { width: 100%; height: 154px; object-fit: cover; object-position: center; border-radius: 22px; }
.map-link { display: flex; align-items: center; justify-content: center; gap: 27px; width: 170px; margin-top: 12px; padding: 11px 15px; border: 1px solid #cfd5dd; border-radius: 999px; font-size: 13px; }
.map-link span { color: var(--green); font-size: 18px; }

.sponsors { min-height: 185px; display: grid; grid-template-columns: .8fr 1.55fr 1fr 1.35fr .75fr; align-items: center; gap: clamp(20px, 4vw, 62px); padding: 28px 7%; background: #fff; }
.sponsors img { display: block; width: 100%; max-height: 86px; object-fit: contain; }
.sponsors .logo-cybozu { max-width: 105px; max-height: 92px; justify-self: center; }
.sponsors .logo-lineworks { max-width: 205px; }
.sponsors .logo-obc { max-width: 150px; }
.sponsors .logo-globalb { max-width: 180px; }
.sponsors .logo-saikai { max-width: 82px; max-height: 82px; justify-self: center; }

.entry { min-height: 76px; display: grid; grid-template-columns: 190px 1fr minmax(240px,310px); align-items: center; gap: 12px; padding: 10px max(4%, calc((100% - 700px) / 2)); color: #fff; background: linear-gradient(100deg,#128b4c,#00a64e); }
.entry-title { display: flex; gap: 14px; align-items: flex-start; }
.entry-title > span { font-size: 24px; font-weight: 400; }
.entry-title strong { font-size: 21px; }
.entry-title small { margin-left: 17px; font-size: 12px; }
.entry p { margin: 0; font-size: 9px; line-height: 1.55; }
.entry > a { display: flex; align-items: center; justify-content: center; position: relative; max-width: 310px; min-height: 42px; color: #222; background: #fff; border-radius: 999px; font-size: 15px; }
.entry > a span { position: absolute; right: 25px; color: var(--green); font-size: 22px; }
.entry > small { padding-left: 10px; font-size: 11px; }

@media (max-width: 620px) {
  .site-header { position: fixed; height: 68px; padding: 0 20px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); }
  .brand { font-size: 17px; gap: 10px; }
  .brand-mark { transform: scale(.82); }
  .menu-button { display: grid; gap: 6px; position: relative; z-index: 3; width: 38px; padding: 8px; border: 0; background: none; }
  .menu-button span { display: block; height: 2px; background: #111; transition: transform .2s; }
  .nav { position: fixed; inset: 68px 0 auto; display: none; padding: 20px; background: #fff; box-shadow: 0 10px 18px rgba(0,0,0,.08); }
  .nav.open { display: grid; }
  .hero { min-height: auto; padding: 110px 24px 55px; }
  .hero-copy { width: 100%; }
  .hero h1 { font-size: clamp(52px, 15vw, 70px); }
  .hero-subtitle { font-size: 21px; }
  .hero-lead { margin-bottom: 220px; font-size: 14px; }
  .hero-art { inset: 0; }
  .orb { top: 350px; right: 8%; width: 125px; }
  .cube { top: 440px; left: 19%; transform: scale(.72); transform-origin: top left; }
  .glass-arc { display: none; }
  .next-local { bottom: 35%; right: -4%; font-size: 54px; opacity: .42; }
  .vertical-tags { display: none; }
  .event-meta strong { font-size: 25px; }
  .organizers p { display: block; }
  .organizers b { display: block; margin-bottom: 5px; }
  .organizers span { display: block; padding: 0; border: 0; line-height: 1.5; }
  .about { grid-template-columns: 68px 1fr; padding: 0 20px; }
  .section-number b, .panel-title > span { font-size: 42px; }
  .section-number i { height: 80px; margin-left: 34px; }
  .section-copy { padding-right: 0; }
  .about > img { grid-column: 1 / -1; width: calc(100% + 20px); height: 190px; margin: 8px -20px 0 0; border-radius: 999px 0 0 999px; }
  .content-grid { display: block; }
  .panel { padding: 28px 24px; }
  .program { border-right: 0; border-bottom: 1px solid var(--line); }
  .schedule p { grid-template-columns: 92px 1fr; }
  .party { grid-template-columns: 92px 1fr; }
  .right-column { display: block; }
  .target ul { margin-left: 0; }
  .access { grid-template-columns: 1fr; }
  .access img { width: 100%; height: 220px; }
  .sponsors { min-height: 190px; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 24px 20px; }
  .sponsors img { max-height: 58px; }
  .sponsors .logo-lineworks { max-width: 150px; }
  .sponsors .logo-saikai { max-height: 64px; }
  .entry { grid-template-columns: 1fr; gap: 12px; padding: 24px; text-align: left; }
  .entry > a { width: 100%; max-width: none; }
  .entry > small { padding: 0; }
}

@media (min-width: 1200px) {
  .hero { min-height: 720px; }
  .hero-copy { width: 55%; }
  .hero h1 { font-size: 128px; }
}

@media (min-width: 621px) and (max-width: 900px) {
  .site-header { padding-inline: 2.5%; }
  .brand { gap: 8px; font-size: 16px; }
  .brand-mark { transform: scale(.8); }
  .nav { gap: 15px; font-size: 10px; }
  .nav-entry { padding: 11px 14px; }
  .hero h1 { font-size: clamp(64px, 10vw, 82px); }
  .entry { grid-template-columns: 160px 1fr 260px; padding-inline: 3.5%; }
}