.container { max-width: calc(var(--space-9) * 15); padding-inline: clamp(var(--space-5), calc(var(--w-view) / 16), var(--space-9)); }
body { -webkit-font-smoothing: antialiased; }
::selection { background: var(--c-accent); color: var(--c-bg); }
:where(a, button, input, select, textarea):focus-visible { outline: var(--bd-2) solid var(--c-accent-2); outline-offset: var(--space-1); }
:where(a, button) { -webkit-tap-highlight-color: color-mix(in srgb, var(--c-accent) calc(var(--op) * 100% / 4), var(--c-bg)); }
.site-header { background: color-mix(in srgb, var(--c-bg) calc(100% - var(--op) * 100% / 16), transparent); backdrop-filter: blur(var(--space-3)); }
.site-header__inner { padding-inline: clamp(var(--space-5), calc(var(--w-view) / 30), var(--space-7)); height: var(--h-header); max-width: calc(calc(var(--space-9) * 15) + var(--space-9)); margin-inline: auto; }
.gnav__link { color: var(--c-accent); font-size: var(--fs-3); }
.site-header__logo img { height: clamp(var(--h-logo-sp), calc(var(--w-view) / 25), var(--h-logo)); }
.gnav__link::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--space-3) * -1); height: var(--bd); background: var(--c-accent-2); transform: scaleX(0); transform-origin: left; transition: transform calc(var(--t-3) / 2) var(--ease); }
.gnav__link:hover::before, .gnav__link:focus-visible::before { transform: scaleX(1); }
.gnav__cta { font-size: var(--fs-3); }
.section { padding-block: clamp(var(--space-8), calc(var(--w-view) * 7 / 100), calc(var(--space-9) + var(--space-4))); }
.section--tint { background: var(--c-tint); }
.label { display: inline-flex; align-items: center; gap: var(--space-3);  font-size: var(--fs-2); font-weight: var(--fw-medium); letter-spacing: calc(var(--fs-2) / 5); color: var(--c-accent-2); }
.label::before { content: ""; width: var(--space-5); height: var(--bd); background: currentColor; }
.h2 { margin-top: var(--space-4); }
.sec-head { position: relative; }
.sec-head.center { text-align: left; }
.sec-head .lead { max-width: calc(var(--space-9) * 8); font-size: var(--fs-3); color: var(--c-ink-sub); }
.sec-head .h2 { margin-top: var(--space-4); }
.sec-head.center::after { content: ""; position: absolute; right: 0; bottom: var(--space-2); width: var(--space-8); height: var(--bd); background: var(--c-line); }
.pill-link__icon { width: var(--space-7); height: var(--space-7); transition: background var(--t-1), color var(--t-1), border-color var(--t-1); }
.pill-link__icon svg { width: var(--space-4); height: var(--space-4); transition: transform var(--t-1) var(--ease); }
.pill-link:hover .pill-link__icon { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }
.pill-link:hover .pill-link__icon svg { transform: translateX(var(--bd-2)); }
.fv { height: clamp(calc(var(--space-9) * 5 + var(--space-7) + var(--space-3)), calc(var(--w-view) * 49 / 100), calc(var(--space-9) * 7 + var(--space-8) + var(--space-1))); margin-inline: var(--space-5); border-radius: calc(var(--space-3) / 4); }
.fv__copy { top: var(--space-8); right: var(--space-9); font-size: clamp(var(--fs-9), var(--fs-10), var(--fs-10)); line-height: calc((var(--lh-1) + var(--lh-3)) / 2); letter-spacing: calc(clamp(var(--fs-9), var(--fs-10), var(--fs-10)) * 7 / 100); }

.fv__nav .mv__count { font-variant-numeric: tabular-nums; }
.fv__nav .mv__ctrl { width: var(--space-7); height: var(--space-7); display: inline-grid; place-items: center; border: var(--bd) solid var(--c-line); border-radius: var(--r-pill); padding: 0; background: transparent; color: var(--c-ink); cursor: pointer; transition: background var(--t-1); }
.fv__nav .mv__ctrl:hover { background: var(--c-tint); }
.fv__nav .mv__ctrl svg { width: var(--space-4); height: var(--space-4); }
.fv__nav .mv__ctrl[hidden] { display: none; }

#guide { padding-top: var(--space-8); }

.gtree__parent .gtree__card { width: min(100%, calc(var(--space-9) * 9)); border: var(--bd) solid var(--c-line); overflow: hidden; }
.gtree__kids .gtree__card { border-top: var(--bd) solid var(--c-line); overflow: hidden; }
.gtree__kids .gtree__img { aspect-ratio: 8 / 5; }
.gtree__img { overflow: hidden; }
.gtree__img img { transition: transform calc(var(--t-3) * 3 / 4) var(--ease); }
.gtree__body { padding: var(--space-5); }
.gtree__name { font-size: var(--fs-5); }

.gtree__kids .gtree__body { display: flex; flex-direction: column; height: calc(100% - var(--space-1)); }
.gtree__kids .gtree__card { display: flex; flex-direction: column; }
.gtree__kids .gtree__img { flex: none; }
.gtree__kids .gtree__body .gcard__data { margin-top: auto; padding-top: var(--space-4); border-top: 0; }
.gtree__kids .gtree__text { margin-bottom: var(--space-5); }
.gtree__line::before, .gtree__line::after { border-color: var(--c-line); }
.gtree__card--mannen .gtree__name { color: var(--c-badge-mannen-dark); }
.gtree__card--showa .gtree__name { color: var(--c-badge-showa); }
.gtree__card--inoyama .gtree__name { color: var(--c-badge-inoyama); }
.news-row a { padding: var(--space-5) 0; }
.news-row a::after { justify-self: end; }
.news-row__date { font-size: var(--fs-2); font-variant-numeric: tabular-nums; letter-spacing: calc(var(--fs-2) * 7 / 100); }

.news-row__t { font-size: var(--fs-3); }

.win-grid { gap: var(--space-5); }
.win { position: relative; align-items: flex-start; text-align: left; }

.win__title { line-height: var(--lh-2); }
.win__act { width: 100%; }
.win__act a { min-width: 0; }

.win__note { text-align: left; }

.page-head__lead { font-size: var(--fs-3); }
.breadcrumb { padding-block: var(--space-5); }
.media { gap: var(--space-8); }
.media__img picture { border-radius: calc(var(--space-3) / 4); }
.media__kicker { font-size: var(--fs-2); letter-spacing: calc(var(--fs-2) / 5); }
.media__title { margin-top: var(--space-3); font-size: var(--fs-7); line-height: calc((var(--lh-1) + var(--lh-3)) / 2); }
.media__text { font-size: var(--fs-3); }

.page-visual { margin-top: var(--space-6); margin-bottom: 0; }

.hist__text { flex-wrap: wrap; }
.hist__ev { flex: 1 1 calc(var(--space-9) * 2); }
.hist__range { font-family: var(--ff-serif);  font-variant-numeric: tabular-nums; }
.hist__row { column-gap: var(--space-4); }
.cta-band { padding-block: var(--space-8); }
.cta-band .h2 { letter-spacing: calc(var(--fs-8) / 5); font-size: var(--fs-8); }
.cta-band .btn { border-radius: calc(var(--space-3) / 4); }
.tbl__row { grid-template-columns: minmax(var(--space-9), 0.3fr) minmax(0, 1fr); gap: var(--space-5); }
.tbl__row dt { font-size: var(--fs-2); color: var(--c-ink-sub); }
.tbl__row dd { font-size: var(--fs-3); }
.form { margin-top: var(--space-7); }
.form__input, .form__select, .form__textarea { background: var(--c-tint); border-color: var(--c-line); border-radius: calc(var(--space-3) / 4); transition: background var(--t-1), border-color var(--t-1); }
.form__input:focus, .form__select:focus, .form__textarea:focus { background: var(--c-bg); }
.form__box { padding: var(--space-6); border-radius: calc(var(--space-3) / 4); }
.form__req { font-size: var(--fs-1); border: var(--bd) solid color-mix(in srgb, var(--c-accent) calc(var(--op) * 100% / 4), var(--c-bg)); padding: 0 var(--space-2); }
.form__check input { accent-color: var(--c-accent); }
.form__submit .btn { border-radius: calc(var(--space-3) / 4); cursor: pointer; font-family: inherit; }
.form__submit .btn:hover { background: var(--c-bg); color: var(--c-accent); }
.anchor-nav { height: var(--h-anchor-nav-on); top: var(--h-header); background: color-mix(in srgb, var(--c-bg) calc(100% - var(--op) * 100% / 16), transparent); backdrop-filter: blur(var(--space-3)); }
.anchor-nav__list a { position: relative; font-size: var(--fs-2); }
.anchor-nav__list a::after { content: ""; position: absolute; left: var(--space-5); right: var(--space-5); bottom: 0; height: var(--bd-2); background: var(--c-accent); transform: scaleX(0); transition: transform var(--t-1); }
.anchor-nav__list a:hover::after, .anchor-nav__list a[aria-current="location"]::after { transform: scaleX(1); }
.m3-legend, .m3-key, .m3-hint { color: var(--c-ink); }
.fmap__row { transition: background var(--t-1); }
.fmap__row:hover { background: color-mix(in srgb, var(--c-accent) calc(var(--op) * 100% / 16), var(--c-bg)); }
.site-footer { padding-top: var(--space-8); }
.site-footer__inner { gap: var(--space-8); }
.site-footer__inner > .fnav { flex-basis: calc(var(--space-9) * 6); }
.fnav__head { font-family: var(--ff-sans);  font-size: var(--fs-3); letter-spacing: calc(var(--fs-2) / 5); color: var(--c-accent); }
.fnav__list a { display: inline-block; padding-block: calc(var(--space-1) / 2); font-size: var(--fs-2);  line-height: var(--lh-2); }
.site-footer__group-list a { font-size: var(--fs-2); }
.site-footer__bottom { margin-top: var(--space-7); font-size: var(--fs-1); }
.site-footer__legal { gap: var(--space-3) var(--space-5); }
.site-footer__legal a:hover, .fnav__list a:hover { color: var(--c-accent-2); }
.refine-ready .refine-enter { opacity: 0; transform: translateY(var(--space-5)); transition: opacity calc(var(--t-3) * 2 / 3) var(--ease), transform calc(var(--t-3) * 2 / 3) var(--ease); }
.refine-ready .refine-enter.is-visible { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .gtree__card:has(a:hover) .gtree__img img { transform: scale(var(--scale)); } .news-row a:hover::after { translate: var(--space-1) 0; }  }
@media (max-width: 1024px) { .site-header__inner { height: var(--h-header-sp); } .anchor-nav { top: var(--h-header-sp); } .media { gap: var(--space-7); }       .tbl__row, .tbl--short .tbl__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } .hist__pin { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } .hist__side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-4); } .hist__progress { grid-column: 1 / -1; margin-top: 0; } .hist__year { margin-top: 0; font-size: var(--fs-8); } .hist.is-pinned .hist__pin { grid-template-rows: auto minmax(0, 1fr); } .form__input, .form__select, .form__textarea { font-size: var(--fs-5); } }
@media (max-width: 768px) { .container { padding-inline: var(--space-5); } .sec-head.center::after { display: none; } .sec-head .lead { font-size: var(--fs-2); margin-top: var(--space-4); } .h2 { margin-top: var(--space-3); } .fv { margin-inline: var(--space-2); } .fv__copy { top: var(--space-7); right: var(--space-5); } .fv__nav .mv__ctrl { margin-left: auto; }       .media { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }     .gtree__parent { margin-top: var(--space-6); } .gtree__parent .gtree__card { grid-template-columns: minmax(0, 1fr); } .gtree__parent .gtree__img { aspect-ratio: 8 / 5; } .gtree__kids { padding-bottom: var(--space-4); scrollbar-width: thin; scrollbar-color: var(--c-accent) var(--c-line); } .gtree__kids::-webkit-scrollbar { display: block; height: var(--bd-2); } .gtree__kids::-webkit-scrollbar-thumb { background: var(--c-accent); } .gtree__kids .gtree__body { flex: 1; } .win__note { font-size: var(--fs-1); }   .page-head__lead { font-size: var(--fs-2); } .media__text { margin-top: var(--space-4); } .hist__ev { flex-basis: auto; }  .hist__pin { gap: var(--space-5); } .form__box { padding: var(--space-5); } .site-footer { padding-top: var(--space-7); } .site-footer__inner { gap: var(--space-6); } .site-footer__inner > .fnav { flex-basis: 100%; } .site-footer__brand img { height: var(--h-logo-sp); } .fnav__head { padding-block: var(--space-4); } .site-footer__legal { gap: var(--space-2) var(--space-4); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto; } .refine-ready .refine-enter { opacity: 1; transform: none; transition: none; } .gtree__img img, .gnav__link::before, .pill-link__icon, .pill-link__icon svg, .anchor-nav__list a::after { transition: none; } .is-anim .js-rv { opacity: 1; transform: none; transition: none; } .is-anim .page-visual img { animation: none; } }
@media print { .refine-ready .refine-enter { opacity: 1; transform: none; } .site-header { position: static; } }

.news-list .news-row a { grid-template-columns: var(--space-9) minmax(0, 1fr) var(--space-5); align-items: center; }
.news-list .news-row a::after { grid-column: 3; grid-row: 1; }
.news-row__thumb { height: var(--space-8); overflow: hidden; }
.news-row__thumb picture, .news-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-row__thumb--mannen img { object-position: center bottom; }
.news-row__body { display: grid; min-width: 0; gap: var(--space-2); }
.news-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.news-row__date { white-space: nowrap; }
@media (max-width: 768px) {
 .news-list .news-row a { grid-template-columns: calc(var(--space-8) + var(--space-2)) minmax(0, 1fr) var(--space-4); gap: var(--space-3); }
 .news-row__thumb { height: var(--space-7); }
}

.news-list { border-top-color: var(--c-accent-2); }
.news-list .news-row a { position: relative; padding-inline: var(--space-3); transition: background-color var(--t-1), color var(--t-1); }
.news-list .news-row a::after { content: '→'; color: var(--c-accent-2); font-size: var(--fs-6); line-height: var(--lh-1); transition: none; }
.news-list .news-row a:hover::after { translate: none; }
.news-list .news-row a:hover, .news-list .news-row a:focus-visible { background: var(--c-tint); color: var(--c-accent-2); }
.news-list .news-row a:focus-visible { outline: var(--bd-2) solid var(--c-accent-2); outline-offset: var(--space-1); }
.news-list .news-row:first-child a { grid-template-columns: calc(var(--space-9) * 3) minmax(0, 1fr) var(--space-5); gap: var(--space-6); padding-block: var(--space-6); }
.news-list .news-row:first-child .news-row__thumb { height: calc(var(--space-9) * 2); }
.news-list .news-row:first-child .news-row__body { gap: var(--space-4); }
.news-list .news-row:first-child .news-row__t { font-size: var(--fs-7); font-family: var(--ff-serif); line-height: var(--lh-2); color: var(--c-accent); }
.news-row__summary { max-width: calc(var(--space-9) * 6); font-size: var(--fs-3); color: var(--c-ink-sub); }
@media (max-width: 768px) {
 .news-list .news-row:first-child a { grid-template-columns: minmax(0, 1fr) var(--space-5); gap: var(--space-4); padding-block: var(--space-5); }
 .news-list .news-row:first-child .news-row__thumb { grid-column: 1 / -1; height: auto; aspect-ratio: calc(var(--space-7) / var(--space-6)); }
 .news-list .news-row:first-child .news-row__body { grid-column: 1; grid-row: 2; gap: var(--space-3); }
 .news-list .news-row:first-child a::after { grid-column: 2; grid-row: 2; }
 .news-list .news-row:first-child .news-row__t { font-size: var(--fs-6); }
}
