html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { background: var(--color-white); color: var(--color-text); font-family: var(--font-family); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
::selection { background: #d3edc7; color: #163c26; }
:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 5px; border-radius: 3px; }
a, button { -webkit-tap-highlight-color: transparent; }
a:active, button:active { opacity: .78; }
.container { width: min(100% - 48px, var(--container-width)); margin-inline: auto; }
section .container { --container-width: var(--section-container-width); }
.section { padding-block: 92px; }
h1, h2, h3 { font-weight: 750; line-height: 1.2; letter-spacing: -.045em; }
h2 { font-size: clamp(30px, 3.2vw, 42px); }
h3 { font-size: 24px; letter-spacing: -.025em; }
p { color: var(--color-text-secondary); }
.text-green { color: var(--color-primary-dark); }
.text-japan { color: var(--color-japan); }
.eyebrow { color: var(--color-primary-dark); font-size: 10px; line-height: 1.6; font-weight: 750; letter-spacing: .16em; }
.text-link { display: inline-flex; align-items: center; gap: 18px; color: var(--color-primary-dark); font-size: 14px; font-weight: 650; line-height: 1.5; padding-block: 10px; }
.text-link > span:last-child { font-size: 21px; transition: transform .2s; }
.text-link:hover > span:last-child { transform: translateX(4px); }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.button-group { display: flex; flex-wrap: wrap; gap: 13px; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 28px; padding: 13px 24px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 14px; font-weight: 650; line-height: 1.5; transition: background .2s, transform .2s, box-shadow .2s; }
.button > span:last-child:not(:first-child) { font-size: 22px; line-height: 1; }
.button:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgb(0 80 30 / 10%); }
.button--primary { background: var(--color-primary-dark); color: white; }
.button--primary:hover { background: #006927; }
.button--secondary { color: var(--color-text); border-color: #ccd9ce; background: transparent; }
.button--secondary:hover { background: var(--color-green-soft); }
.button--white { color: #006327; background: white; }
.button--white:hover { background: var(--color-yellow-soft); }
.section-header { text-align: center; margin-bottom: 42px; }
.section-header .eyebrow { margin-bottom: 12px; }
.section-header h2 + p { margin-top: 14px; font-size: 15px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 12px 20px; background: white; z-index: 200; border: 2px solid var(--color-primary); }
.skip-link:focus { top: 12px; }

/* Header and official ANBI identity. */
.header { position: sticky; top: 0; z-index: 100; background: rgb(255 255 255 / 94%); backdrop-filter: blur(12px); border-bottom: 1px solid rgb(225 233 227 / 65%); transition: box-shadow .25s; }
.header.is-scrolled { box-shadow: 0 5px 24px rgb(23 49 30 / 7%); }
.header__inner { display: flex; align-items: center; min-height: 76px; gap: 45px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Preserve the proportions of the official logo. */
.brand__logo { display: block; width: 144px; height: 64px; object-fit: contain; object-position: center; }
.navigation { margin-left: auto; display: flex; align-items: center; gap: 31px; }
.navigation a { display: flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 550; }
.navigation a:hover { color: var(--color-primary-dark); }
.languages { display: flex; align-items: center; gap: 5px; color: #657366; font-size: 12px; }
.languages button { border: 0; background: transparent; min-width: 38px; min-height: 44px; padding: 5px; font-size: 12px; }
.languages button[aria-pressed="true"] { color: var(--color-primary-dark); font-weight: 750; }
.languages button:hover { color: var(--color-primary-dark); }
.menu-toggle { display: none; }

/* Hero. The original Study Abroad SVG is deliberately left unmodified. */
.hero { background: linear-gradient(115deg, #fcfdf9 20%, #f5f9ef 100%); position: relative; overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1.04fr 1fr; align-items: center; min-height: 590px; padding-block: 52px 40px; gap: 15px; }
.hero__content { position: relative; z-index: 2; }
.hero .eyebrow { display: flex; align-items: center; gap: 8px; font-size: 9px; letter-spacing: .12em; }
.eyebrow__dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--color-primary); }
.hero__title { margin-top: 20px; font-size: clamp(46px, 4.9vw, 69px); line-height: 1.12; letter-spacing: -.055em; }
.hero__period { color: var(--color-primary-dark); }
.hero__description { font-size: 16px; line-height: 1.8; max-width: 455px; margin-block: 22px 27px; }
.hero__footnote { display: flex; align-items: center; gap: 11px; margin-top: 33px; color: #657369; font-size: 11px; }
.connection-symbol { display: inline-flex; width: 31px; }
.connection-symbol i { display: block; width: 18px; height: 18px; border: 1.5px solid var(--color-primary); border-radius: 50%; }
.connection-symbol i + i { margin-left: -5px; border-color: var(--color-japan); }
.hero__visual { position: relative; isolation: isolate; width: 100%; }
.hero__illustration { width: min(100%, 560px); height: auto; position: relative; z-index: 1; }
.hero__sun { position: absolute; background: #f8edb5; width: 63%; aspect-ratio: 1; border-radius: 50%; top: 16%; left: 20%; z-index: -1; opacity: .5; }
.hero__orbit { position: absolute; width: 96%; height: 56%; border: 1px dashed #b8cfb9; border-radius: 50%; left: 2%; top: 26%; transform: rotate(-28deg); z-index: -1; }
.hero__spark { position: absolute; font-size: 26px; color: #b59b22; font-weight: 300; }
.hero__spark--one { top: 14%; right: 9%; }
.hero__spark--two { bottom: 24%; left: 4%; color: var(--color-primary); font-size: 19px; }
.hero__note { position: absolute; bottom: 10%; left: 2%; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 21px; background: rgb(255 255 255 / 95%); border: 1px solid #edf0e9; box-shadow: 0 8px 30px rgb(26 59 31 / 7%); border-radius: 12px; transform: rotate(-5deg); }
.hero__note p { font-size: 12px; line-height: 1.65; color: var(--color-text-secondary); }
.hero__note strong { color: #236341; font-weight: 650; }
.hero__note-dot { width: 22px; height: 22px; border: 6px solid #fae9e6; background: var(--color-japan); border-radius: 50%; }
.hero__japanese { position: absolute; right: 1%; bottom: 9%; font-size: 11px; letter-spacing: .13em; color: #60705f; writing-mode: vertical-rl; }
.hero__bottom { border-top: 1px solid #e3e9de; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 19px; font-size: 10px; color: #6a786b; letter-spacing: .12em; }
.hero__bottom a { display: inline-flex; align-items: center; gap: 16px; letter-spacing: 0; font-size: 11px; min-height: 24px; }
.hero__bottom a:hover { color: var(--color-primary-dark); }
.hero__bottom a span:last-child { font-size: 18px; }

/* About. */
.bridge { background: var(--color-green-soft); padding-block: 52px; }
.bridge__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.bridge__visual { position: relative; padding-inline: 20px; }
.bridge__illustration { width: 100%; max-width: 430px; }
.bridge__badge { position: absolute; right: 0; bottom: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 133px; height: 133px; padding: 18px; border-radius: 50%; background: #f8df67; text-align: center; font-size: 12px; font-weight: 650; line-height: 1.55; color: #344626; transform: rotate(9deg); }
.bridge__badge > span:first-child { font-size: 27px; line-height: 1; margin-bottom: 9px; }
.bridge__content .eyebrow { margin-bottom: 13px; }
.bridge__content h2 { max-width: 360px; }
.bridge__content > p:not(.eyebrow) { font-size: 15px; margin-block: 22px 16px; }
.bridge__values { display: flex; flex-wrap: wrap; gap: 20px; border-top: 1px solid #d4e5d8; padding-top: 23px; margin-top: 24px; }
.bridge__values > span { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: #47634e; }
.bridge__values i { color: var(--color-primary-dark); font-style: normal; }

/* Experience cards. */
.experiences__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { border: 1px solid var(--color-border); background: white; border-radius: 24px; }
.experience-card { overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.experience-card:hover, .experience-card:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.experience-card__visual { height: 228px; overflow: hidden; position: relative; background: #edf6e9; }
.experience-card__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; padding: 12px 26px 0; }
.card__number { position: absolute; z-index: 1; left: 21px; top: 17px; font-size: 11px; letter-spacing: .08em; color: #42684b; }
.experience-card__visual--culture { background: var(--color-yellow-soft); }
.experience-card__visual--culture img { padding: 15px 35px; }
.experience-card__visual--education { background: #eaf3ed; }
.experience-card__visual--education img { padding: 15px 32px 0; }
.experience-card__content { padding: 25px 27px 20px; }
.experience-card__content p { font-size: 14px; margin-top: 12px; min-height: 72px; }
.experience-card__content .text-link { display: flex; justify-content: space-between; border-top: 1px solid #edf0ed; margin-top: 20px; padding-top: 17px; font-size: 12px; }

/* CSS-only timeline. */
.how-it-works { background: #fafbf8; padding-block: 65px 61px; }
.timeline { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
.timeline__step { position: relative; text-align: center; }
.timeline__step:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 27px; left: calc(50% + 40px); width: calc(100% - 46px); height: 1px; background: #d4dfcd; }
.timeline__number { position: relative; z-index: 1; display: grid; place-items: center; width: 55px; height: 55px; border-radius: 50%; margin: 0 auto 21px; color: white; background: var(--color-primary-dark); font-weight: 700; font-size: 21px; }
.timeline__step:nth-child(even) .timeline__number { color: #454921; background: #f5df6a; }
.timeline__step h3 { font-size: 18px; letter-spacing: -.02em; }
.timeline__step h3 a:hover { text-decoration: underline; text-underline-offset: 5px; }
.timeline__step p { margin-top: 10px; font-size: 13px; padding-inline: 14px; }
.timeline__note { text-align: center; font-size: 11px; margin-top: 34px; }

/* Brazil banner. */
.brazil-banner { padding-top: 76px; }
.brazil-banner__inner { background: var(--color-yellow-soft); border-radius: var(--radius-lg); display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; position: relative; overflow: hidden; }
.brazil-banner__illustration { position: relative; overflow: hidden; height: 325px; }
.brazil-banner__illustration img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; padding: 20px 32px 0; }
.brazil-banner__content { position: relative; z-index: 1; padding: 42px 55px 42px 0; }
.brazil-banner__content .eyebrow { font-size: 9px; margin-bottom: 11px; }
.brazil-banner__content h2 { font-size: 32px; line-height: 1.3; }
.brazil-banner__content > p:not(.eyebrow) { max-width: 455px; font-size: 14px; margin-block: 16px 9px; }
.brazil-banner__decoration { position: absolute; right: -90px; bottom: -130px; width: 280px; height: 280px; border: 1px solid #dedc9c; border-radius: 50%; box-shadow: 0 0 0 30px rgb(224 222 157 / 14%), 0 0 0 60px rgb(224 222 157 / 10%); }

/* Each bento illustration has its own subject and keeps the full scene readable. */
.section-header--left { display: flex; justify-content: space-between; align-items: end; gap: 25px; text-align: left; }
.section-header--left > .text-link { flex-shrink: 0; font-size: 12px; }
.activities__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.activity-card { display: flex; min-height: 244px; position: relative; isolation: isolate; background: #edf5e9; border: 1px solid #e5edde; border-radius: 22px; overflow: hidden; transition: box-shadow .25s, transform .25s; }
.activity-card:hover, .activity-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.activity-card--workshops, .activity-card--programs { grid-column: span 3; }
.activity-card--fairs, .activity-card--events { grid-column: span 2; }
.activity-card--fairs { background: #fff8de; border-color: #f1ecd6; }
.activity-card--events { background: #fbefeb; border-color: #f0e3df; }
.activity-card--programs { background: #eef4ed; }
.activity-card__content { padding: 29px 0 26px 29px; width: 56%; display: flex; flex-direction: column; align-items: start; }
.tag { font-size: 8px; letter-spacing: .13em; color: #456346; font-weight: 650; }
.activity-card h3 { font-size: 22px; margin-top: 14px; max-width: 240px; }
.activity-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.activity-card h3 a:focus-visible { outline-offset: 2px; }
.activity-card__content p { margin-top: 12px; font-size: 12px; max-width: 230px; }
.activity-card__arrow { display: grid; place-items: center; margin-top: 18px; width: 29px; height: 29px; border-radius: 50%; background: rgb(255 255 255 / 75%); color: #35633e; line-height: 1; }
.activity-card__illustration { position: absolute; z-index: -1; width: 45%; height: 100%; right: 0; overflow: hidden; }
.activity-card__illustration img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; padding: 12px 10px 15px 0; }
.activity-card--fairs .activity-card__illustration img { object-position: center; }
.activity-card--events .activity-card__illustration img { padding-inline: 0 9px; }
.activity-card--programs .activity-card__illustration img { padding: 10px 12px; }

/* Testimonials: native scroll-snap remains usable without JavaScript. */
.testimonials { padding-top: 18px; }
.testimonials__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; border-radius: 24px; }
.testimonial-card { padding: 24px 33px 28px; background: #fdfefb; display: flex; flex-direction: column; }
.testimonial-card__quote { font-family: Georgia, serif; font-size: 66px; height: 47px; line-height: 1.1; color: var(--color-primary); }
.testimonial-card blockquote { flex: 1; }
.testimonial-card blockquote p { font-size: 14px; line-height: 1.9; color: #3d4b41; }
.testimonial-card__person { margin-top: 28px; display: flex; align-items: center; gap: 13px; }
.testimonial-card__person h3 { font-size: 13px; letter-spacing: 0; }
.testimonial-card__person p { font-size: 11px; margin-top: 4px; }
.testimonial-card__origin { margin-left: auto; font-size: 9px; letter-spacing: .08em; color: #586d5d; }
.testimonial__avatar { width: 45px; height: 45px; border-radius: 50%; overflow: hidden; background: #f5eabd; flex-shrink: 0; position: relative; }
.testimonial__avatar img { max-width: none; position: absolute; width: 178px; left: -72px; top: -22px; }
.testimonial__avatar--teacher { background: #e2ebd9; }
.testimonial__avatar--teacher img { width: 73px; left: -14px; top: -7px; }
.testimonials__controls { display: none; }
.testimonials__disclosure { text-align: center; font-size: 10px; margin-top: 19px; color: #68766c; }

/* Contact and footer. */
.cta-section { position: relative; overflow: hidden; background: var(--color-primary); text-align: center; padding-block: 65px; isolation: isolate; }
.cta-section::before, .cta-section::after { content: ""; position: absolute; border: 1px solid rgb(255 255 255 / 16%); border-radius: 50%; width: 450px; height: 450px; z-index: -1; }
.cta-section::before { left: -270px; top: -100px; box-shadow: 0 0 0 35px rgb(255 255 255 / 4%), 0 0 0 70px rgb(255 255 255 / 3%); }
.cta-section::after { right: -270px; bottom: -220px; box-shadow: 0 0 0 45px rgb(255 223 0 / 7%), 0 0 0 90px rgb(255 255 255 / 4%); }
.cta-section__inner { max-width: 780px; }
.cta-section .eyebrow { display: inline-block; color: white; background: #00772d; padding: 5px 12px; border-radius: 20px; font-size: 9px; letter-spacing: .12em; }
.cta-section h2 { color: white; margin-top: 17px; font-size: 40px; line-height: 1.25; }
.cta-section__inner > p:not(.eyebrow) { color: var(--color-text); margin-top: 17px; font-size: 14px; }
.cta-section .button { margin-top: 27px; }
.cta-section__japanese { display: block; margin-top: 23px; font-size: 11px; color: var(--color-text); letter-spacing: .2em; }
.footer { background: #fcfdfb; padding-top: 58px; }
.footer__grid { display: grid; grid-template-columns: 1.65fr 1fr 1fr 1.4fr; gap: 38px; padding-bottom: 47px; }
.footer__identity > p { font-size: 12px; line-height: 1.85; margin-top: 19px; white-space: pre-line; }
.footer__signature { display: block; font-size: 9px; color: #58725e; margin-top: 18px; }
.footer__column { display: flex; align-items: start; flex-direction: column; gap: 10px; }
.footer__column h2 { font-size: 13px; letter-spacing: 0; margin-block: 5px 8px; }
.footer__column > a, .footer__column > p { font-size: 12px; color: var(--color-text-secondary); }
.footer__column > a { padding-block: 3px; }
.footer a:hover { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 4px; }
.footer__column .footer__follow { margin-top: 13px; margin-bottom: 0; }
.footer__updates { display: inline-flex; align-items: center; gap: 8px; }
.footer__updates svg { flex-shrink: 0; color: var(--color-primary-dark); }
.footer__updates > span:last-child { color: var(--color-primary-dark); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--color-border); padding-block: 21px; font-size: 10px; color: #637468; }
.footer__bottom p { font-size: inherit; }
.footer__top { display: inline-flex; gap: 12px; align-items: center; }
.footer__top > span:last-child { font-size: 17px; }

/* Progressive enhancement: content is visible if JavaScript is unavailable. */
.reveal { opacity: 1; transform: none; }
.motion-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
.motion-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
.motion-ready .experience-card.is-visible:is(:hover, :focus-within) { transform: translateY(-6px); }
.motion-ready .activity-card.is-visible:is(:hover, :focus-within) { transform: translateY(-4px); }
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3 { line-height: 1.45; letter-spacing: 0; }
html[lang="ja"] .hero__title { font-size: clamp(40px, 4.4vw, 60px); }
html[lang="ja"] .eyebrow { letter-spacing: .06em; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motion-ready .reveal { opacity: 1; transform: none; }
  .motion-ready .reveal.is-visible:is(:hover, :focus-within) { transform: none; }
  .experience-card:hover, .experience-card:focus-within, .activity-card:hover, .activity-card:focus-within, .button:hover { transform: none; }
}