:root {
  --brown: #3f332d;
  --green: #5da72f;
  --beige: #e8d8c3;
  --base: #fff6f3;
  --coral: #ed7e6e;
  --orange: #eaae6a;
  --radius: 24px;
  --shadow: 0 10px 24px rgba(63, 51, 45, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #111;
  color: var(--brown);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, h4, figure, dl, dd { margin-top: 0; }
.site-shell { width: min(100%, 430px); margin: 0 auto; overflow: hidden; background: var(--base); }
.pc-brand, .pc-navigation { display: none; }
.section { padding: 64px 26px; }
.center { text-align: center; }
.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; }

.hero { position: relative; background: var(--brown); }
.hero > img { width: 100%; }
.hero-cta { position: absolute; right: 6%; bottom: 5.5%; left: 6%; display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 12px 24px 15px; border-radius: 999px; color: #fff; background: transparent url("images/btn_green.png") center / 100% 100% no-repeat; text-align: center; text-decoration: none; font-weight: 900; line-height: 1.35; transition: filter .2s ease; }

.eyebrow { color: var(--green); font-weight: 800; }
.worries { padding-bottom: 0; }
.worries h1, .organizer h2 { font-size: 1.75rem; line-height: 1.55; letter-spacing: .02em; }
.worry-person { width: 120px; margin: 20px auto -14px; }
.worry-list { padding: 22px 17px; border-radius: 20px; background: #e2e2e2; box-shadow: 0 8px 18px rgba(63, 51, 45, .18); font-size: .88rem; font-weight: 700; }
.worry-list p { display: flex; align-items: flex-start; gap: 7px; margin: 7px 0; line-height: 1.65; }
.worry-list img { flex: 0 0 29px; width: 29px; height: 29px; object-fit: contain; margin-top: 0; }
.lead { margin: 36px 0 24px; padding-right: 14px; padding-left: 14px; font-size: .9rem; font-weight: 700; }
.lead span { color: var(--green); }
.polaroid { margin: 0; }
.polaroid img { width: 100%; filter: drop-shadow(0 7px 9px rgba(63, 51, 45, .25)); }
.mission { position: relative; margin: 26px -26px 0; padding: 28px 178px 0 26px; min-height: 190px; border-radius: 28px 28px 0 0; color: #fff; background: linear-gradient(180deg, var(--coral) 0%, var(--orange) 100%); font-size: .87rem; font-weight: 700; }
.mission-logo { position: absolute; z-index: 3; top: -66px; right: -60px; width: 288px; max-width: none; filter: drop-shadow(0 8px 7px rgba(63, 51, 45, .38)); }
.mission .section-arrow { position: absolute; z-index: 2; right: 0; bottom: -12px; left: 0; width: 100%; max-width: none; height: 26px; object-fit: cover; object-position: center bottom; pointer-events: none; }

.beginner { position: relative; padding: 70px 26px 60px; color: #fff; background: #000 url("images/beginner-bg-img.jpeg") center/cover no-repeat; }
.beginner::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .67); }
.beginner-inner { position: relative; }
.contest-logo { width: 170px; margin: 0 auto 20px; }
.beginner-kicker { text-align: center; font-size: .82rem; font-weight: 700; }
.beginner h2 { font-size: 1.65rem; line-height: 1.55; }
.beginner-title-emphasis { display: block; margin-top: 4px; font-size: 1.35em; line-height: 1.25; }
.beginner-inner > p:last-of-type { font-size: .84rem; font-weight: 700; }
.division-card { margin: 22px 0; padding: 28px 25px; color: var(--brown); background: var(--base); border-radius: 22px; }
.division-card dl { margin: 0; }
.division-card dl > div { margin-bottom: 10px; }
.division-card dt { text-align: center; background: var(--beige); font-weight: 700; line-height: 1.9; }
.division-card dd { margin: 5px 0 0; font-weight: 700; line-height: 1.65; }
.division-card .winner dt { color: #fff; background: var(--brown); }
.division-card .winner dd { position: relative; }
.division-card .winner img { position: absolute; right: 0; bottom: -14px; width: 62px; }
.cta { display: flex; justify-content: center; align-items: center; min-height: 58px; padding: 12px 28px 15px; border: 0; border-radius: 999px; color: #fff; background: transparent url("images/btn_green.png") center / 100% 100% no-repeat; text-align: center; text-decoration: none; font-weight: 900; line-height: 1.35; transition: filter .2s ease; }
.hero-cta:hover, .cta:hover { filter: brightness(1.12); }

.section-heading h2 { margin: 0; color: var(--green); font-family: "Jomhuria", serif; font-size: 8.8rem; font-weight: 400; line-height: .64; letter-spacing: .01em; }
.section-heading p { margin: -12px 0 28px; color: var(--green); font-size: .9rem; font-weight: 800; line-height: 1.5; }
.section-heading.light h2, .section-heading.light p { color: #fff; }
.reasons > h3, .history > h3 { margin-bottom: 28px; font-size: 1.65rem; line-height: 1.5; }
.reason-card { position: relative; margin: 0 0 26px; padding: 18px; border-radius: 22px; background: var(--beige); box-shadow: var(--shadow); }
.reason-card .point { position: absolute; z-index: 1; top: -4px; left: 27px; width: 60px; filter: drop-shadow(0 5px 5px rgba(63, 51, 45, .3)); }
.reason-card h4 { margin: 0 0 13px 88px; font-size: 1.35rem; line-height: 1.5; }
.reason-card .card-photo { width: 100%; height: 195px; object-fit: cover; border-radius: 14px; }
.reason-card p { margin: 12px 0 0; font-size: .86rem; line-height: 1.6; }

.benefits { background: var(--beige); }
.benefits h3 { font-size: 1.65rem; }
.benefit-row { display: grid; grid-template-columns: 86px 1fr; gap: 12px; margin: 40px 0; }
.benefit-row > b { align-self: start; border-right: 2px solid rgba(93, 167, 47, .5); color: rgba(93, 167, 47, .5); font-size: 4rem; line-height: .9; }
.benefit-row h4 { margin-bottom: 10px; font-size: 1.35rem; line-height: 1.35; }
.benefit-row p { margin: 0; font-size: .88rem; }
.benefit-message { margin: 58px 0 35px; text-align: center; font-weight: 700; }
.benefit-message strong { font-weight: 700; }
.benefit-message span, .benefit-message strong, .present-copy strong { color: var(--green); }
.present-copy { position: relative; text-align: center; font-weight: 700; }
.present-copy strong { font-weight: 700; }
.present-copy > div { position: relative; width: 160px; margin: 0 auto; }
.present-copy > div b { font-size: 1.45rem; }
.present-copy > div img { width: 140px; margin: 0 auto; }
.present-copy .gift { position: absolute; top: -8px; right: 10px; width: 88px; }
.present-copy p { margin-top: 22px; font-size: .9rem; }
.present-note { display: block; margin-top: -8px; font-size: .7rem; font-weight: 500; }
.carousel { margin: 42px -26px 0; overflow: hidden; }
.carousel-track { display: flex; align-items: center; gap: 18px; transform: translate3d(0, 0, 0); transition: none; will-change: transform; user-select: none; touch-action: pan-y; }
.carousel figure { flex: 0 0 68%; margin: 0; filter: drop-shadow(0 5px 7px rgba(63, 51, 45, .28)); }
.carousel figure:first-child { margin-left: 16%; }
.carousel img { aspect-ratio: 1005 / 693; width: 100%; object-fit: cover; }
.carousel-dots { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.carousel-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }
.carousel-dots button.active { background: var(--green); }

.voice { color: var(--brown); background: linear-gradient(180deg, var(--coral), var(--orange)); }
.voice .section-heading { text-align: center; }
.voice-card { margin: 24px 0; padding: 28px 18px 24px; border-radius: 22px; background: var(--base); }
.voice-avatar { width: 135px; height: 135px; margin: 0 auto 24px; overflow: hidden; border: 3px solid var(--green); border-radius: 50%; background: var(--base); }
.voice-avatar img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); }
.voice-card h3 { color: var(--green); font-size: .95rem; }
.voice-card p { margin-bottom: 0; font-size: .9rem; }
.voice .cta { margin-top: 28px; }

.history > p { font-size: .9rem; font-weight: 700; }
.outline-label { margin: 20px 0 14px !important; border: 1px solid var(--green); color: var(--green); text-align: center; line-height: 1.8; }
.history-photo { width: 100%; margin-top: 18px; border-radius: 18px; }
.history small { display: block; margin: 6px 0 24px; font-size: .72rem; }
.history-box { padding: 20px 18px; border-radius: 20px; background: var(--beige); }
.history-box p { margin: 0; font-size: .83rem; font-weight: 700; }
.youtube { position: relative; width: 100%; margin-top: 16px; padding-top: 56.25%; background: #000; }
.youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.judges { background: var(--beige); }
.judge-card { margin-bottom: 24px; padding: 22px 18px; border-radius: 22px; background: var(--base); }
.judge-card > img { width: 135px; height: 135px; margin: 0 auto 28px; border: 3px solid var(--green); border-radius: 50%; object-fit: cover; }
.judge-card h3 { font-size: 1rem; }
.judge-card p { font-size: .78rem; line-height: 1.65; }
.criteria-title { margin: 32px 0 22px; text-align: center; font-weight: 800; }
.criteria { display: flex; justify-content: center; gap: 24px; }
.criteria span { display: grid; place-items: center; width: 62px; height: 62px; color: #fff; background: transparent url("images/circle.png") center / contain no-repeat; font-size: .75rem; font-weight: 700; }

.organizer h2 { margin-bottom: 34px; }
.organizer > img { width: 86%; aspect-ratio: 1 / 1; margin: 0 auto 26px; border: 3px solid #ec8b77; border-radius: 30px; object-fit: cover; object-position: center 18%; }
.organizer-name { font-size: .83rem; font-weight: 700; }
.organizer-name strong { color: var(--green); font-size: 1.4rem; font-weight: 800; }
.organizer-name span { margin-left: 7px; color: var(--green); font-size: .76rem; }
.organizer > p:not(.organizer-name) { font-size: .8rem; font-weight: 700; }
.organizer-message { margin-top: 34px; font-size: .9rem !important; }

.event { background: linear-gradient(180deg, var(--coral), var(--orange)); }
.event-title-image { width: 317px; max-width: 92%; margin: 0 auto 28px; }
.event-logo { width: 300px; margin: 12px auto 46px; }
.event-card { margin: 20px 0; padding: 24px 18px; border-radius: 22px; background: var(--base); }
.event-card h3 { color: var(--green); font-size: .95rem; }
.event-card p { margin: 0; font-size: .9rem; }
.event-entry-cta { margin-top: 34px; }

.flow ol { margin: 0; padding: 0; list-style: none; }
.flow li { position: relative; margin-bottom: 54px; padding: 22px 17px; border: 1px solid #ead8c2; border-radius: 18px; box-shadow: var(--shadow); }
.flow li:not(:last-child)::after { content: ""; position: absolute; left: 50%; top: calc(100% + 15px); width: 20px; height: 15px; transform: translateX(-50%); background: var(--green); clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: path("M 1 1 Q 1 0 2 0 H 18 Q 19 0 19 1 Q 19 2 18 3 L 11.5 12.5 Q 10 14.5 8.5 12.5 L 2 3 Q 1 2 1 1 Z"); }
.flow li:last-child { background: var(--beige); }
.flow li h3 { color: var(--green); font-size: .95rem; }
.flow li p { margin-bottom: 0; font-size: .9rem; }
.flow li small { display: block; margin-top: 5px; color: #8f837c; font-size: .7rem; line-height: 1.6; }

.faq { background: var(--beige); }
.faq-list { display: grid; gap: 14px; }
.faq details { border-radius: 15px; background: var(--base); }
.faq summary { position: relative; padding: 18px 46px 18px 17px; cursor: pointer; list-style: none; font-size: .84rem; font-weight: 800; line-height: 1.5; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 17px; top: 50%; width: 20px; height: 20px; background: transparent url("images/Chevron down.svg") center / contain no-repeat; transform: translateY(-50%); transform-origin: center; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.faq details p { margin: 0; padding: 0 17px 18px; font-size: .8rem; }

.footer { padding: 66px 26px 50px; color: #fff; background: linear-gradient(180deg, var(--coral), var(--orange)); text-align: center; }
.footer > p { font-size: .8rem; font-weight: 700; }
.footer h2 { margin: 28px 0 38px; font-size: 1.65rem; line-height: 1.65; }
.footer .cta { font-size: .84rem; }
.socials { display: flex; justify-content: center; gap: 34px; margin: 42px 0 40px; }
.socials a { display: block; width: 36px; height: 36px; }
.socials img { width: 100%; height: 100%; object-fit: contain; }
.footer > small { font-size: .68rem; }

@media (min-width: 720px) {
  body { padding: 40px 0; background-color: var(--base); background-image: url("images/warmsideillustrations.png"); background-repeat: no-repeat; background-position: center bottom; background-size: max(1440px, 100vw) auto; background-attachment: fixed; }
  .site-shell { box-shadow: 0 0 80px rgba(0,0,0,.5); }
}

@media (min-width: 1024px) {
  .pc-brand { position: fixed; z-index: 10; top: 50%; left: max(28px, calc(50vw - 500px)); display: block; width: 220px; transform: translateY(-50%); }
  .pc-brand a { display: block; transition: transform .2s ease, filter .2s ease; }
  .pc-brand a:hover { transform: scale(1.035); filter: brightness(1.06); }
  .pc-brand img { width: 100%; filter: drop-shadow(0 8px 12px rgba(63, 51, 45, .18)); }
  .pc-navigation { position: fixed; z-index: 10; top: 50%; right: max(28px, calc(50vw - 500px)); display: grid; width: 174px; gap: 9px; transform: translateY(-50%); }
  .pc-navigation a { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 6px 16px 8px; border: 1px solid rgba(93, 167, 47, .55); border-radius: 999px; color: var(--brown); background: rgba(255, 246, 243, .92); box-shadow: 0 5px 12px rgba(63, 51, 45, .1); text-decoration: none; font-family: "Jomhuria", serif; font-size: 2rem; line-height: .7; transition: color .2s ease, background-color .2s ease, transform .2s ease; backdrop-filter: blur(4px); }
  .pc-navigation a:hover { color: #fff; background: var(--green); transform: translateX(-4px); }
  .pc-navigation .pc-navigation-entry { border: 0; color: #fff; background: transparent url("images/btn_green.png") center / 100% 100% no-repeat; }
}

@media (max-width: 360px) {
  body { font-size: 14px; }
  .section { padding-left: 20px; padding-right: 20px; }
  .mission { margin-left: -20px; margin-right: -20px; padding-left: 20px; }
  .carousel { margin-left: -20px; margin-right: -20px; }
  .section-heading h2 { font-size: 7.4rem; }
  .reason-card h4 { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel-track { transition: none; }
}