.button { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; padding: .65rem 1.5rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: .875rem; font-weight: 700; text-decoration: none; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.button-primary { background: var(--color-brand); color: var(--color-on-brand); }
.button-primary:hover { background: var(--color-brand-dark); }
.text-link { display: inline-flex; gap: .4rem; align-items: center; color: var(--color-brand); font-size: var(--step--1); font-weight: 700; text-decoration: none; }
.text-link svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eyebrow { margin-block-end: var(--space-1); color: var(--color-brand); font-size: var(--step--1); font-weight: 700; letter-spacing: .04em; }
.section-dark .eyebrow { color: #8dc2e0; }
.lead { font-size: var(--step-1); color: var(--color-ink-soft); }
.icon-button, .submenu-toggle, .carousel-controls button { min-width: 2.75rem; min-height: 2.75rem; border: 0; background: transparent; cursor: pointer; }
.nav-toggle { display: none; width: 3.75rem; height: 3.75rem; justify-self: end; }
.nav-toggle span:not(.visually-hidden) { display: block; width: 1.5rem; height: 2px; margin: .27rem; background: currentColor; }
.nav-item > a { position: relative; display: inline-flex; min-height: var(--header-height); align-items: center; font-size: 17px; font-weight: 400; text-decoration: none; }
.nav-item > a::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 3px; transform: scaleX(0); background: var(--color-brand); transition: transform var(--transition); }
.nav-item:hover > a::after, .nav-item:focus-within > a::after { transform: scaleX(1); }
.nav-item:hover > a, .nav-item:focus-within > a { color: var(--color-brand); }
.submenu-toggle { display: none; }
.submenu-toggle::after { content: "⌄"; }
.language-links { display: flex; min-height: var(--utility-height); align-items: center; justify-content: flex-end; gap: .45rem; margin-inline-start: auto; color: rgba(255, 255, 255, .82); font-size: 14px; line-height: 1; white-space: nowrap; }
.language-label { color: var(--color-on-brand); }
.language-links a { color: inherit; text-decoration: none; }
.language-links a + a::before { content: "|"; margin-inline-end: .45rem; color: rgba(255, 255, 255, .5); }
.language-links a:hover, .language-links a.is-current { color: var(--color-on-brand); }
.language-links a.is-current { font-weight: 700; }
.card { overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-line); transition: border-color var(--transition), box-shadow var(--transition); }
.card:hover { border-color: #c6c6c6; box-shadow: var(--shadow); }
.card-media, .content-card-media { display: block; overflow: hidden; background: var(--color-surface-muted); aspect-ratio: 4 / 3; }
.card-media img, .content-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; }
.card:hover img { transform: scale(1.02); }
.card-body { padding: var(--space-2); }
.card-title-row { display: flex; align-items: start; justify-content: space-between; gap: var(--space-1); }
.card-kicker { flex: 0 0 auto; color: var(--color-brand); font-size: var(--step--1); text-decoration: none; }
.card h3, .content-card h3 { margin-block-end: var(--space-1); }
.card h3 a, .content-card h3 a { text-decoration: none; }
.card p, .content-card p { color: var(--color-ink-soft); }
.media-empty { display: block; width: 100%; height: 100%; background: var(--color-surface-muted); border: 1px solid var(--color-line); }
.content-card { display: grid; grid-template-columns: minmax(12rem, .4fr) 1fr; gap: var(--space-3); padding-block: var(--space-3); border-block-end: 1px solid var(--color-line); }
.content-card-media { aspect-ratio: 16 / 10; }
.content-card time, .article-detail time { color: var(--color-ink-soft); font-size: var(--step--1); }
.empty-state { grid-column: 1 / -1; padding: var(--space-6); text-align: center; background: var(--color-surface-muted); border: 1px solid var(--color-line); }
.breadcrumbs { margin-block: var(--space-3); color: var(--color-ink-soft); font-size: var(--step--1); }
.pagination { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-block: var(--space-6); }
.pagination a, .pagination span { display: grid; min-width: 2.75rem; min-height: 2.75rem; place-items: center; border: 1px solid var(--color-line); text-decoration: none; }
.pagination a:hover, .pagination [aria-current="page"] { background: var(--color-brand); color: var(--color-on-brand); border-color: var(--color-brand); }
.detail-neighbors { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-block: var(--space-6); border: 1px solid var(--color-line); }
.detail-neighbors a { display: grid; padding: var(--space-2); text-decoration: none; }
.detail-neighbors a + a { border-inline-start: 1px solid var(--color-line); text-align: end; }
.detail-neighbors span { color: var(--color-ink-soft); font-size: var(--step--1); }
.footer-qr-item { margin: 0; text-align: center; }
.footer-qr-item img { width: 7.5rem; height: 7.5rem; margin-inline: auto; object-fit: contain; background: var(--color-surface); }
.footer-qr-item figcaption { margin-block-start: .8rem; color: rgba(255, 255, 255, .9); font-size: 15px; line-height: 1.6; }
.footer-menu-group h2, .footer-contact-area h2 { margin-block-end: 1.1rem; color: var(--color-on-dark); font-size: 20px; font-weight: 600; }
.footer-menu-group h2 a, .footer-menu-group li a { text-decoration: none; }
.footer-menu-group ul, .footer-contact-list { list-style: none; margin: 0; padding: 0; }
.footer-menu-group li a { display: block; padding-block: .1rem; color: rgba(255, 255, 255, .68); font-size: 16px; line-height: 32px; }
.footer-menu-group a:hover, .footer-contact-area a:hover { color: var(--color-on-dark); }
.footer-contact-list { display: grid; gap: 0; }
.footer-contact-list li > a, .footer-contact-list li > span, .footer-contact-address > a, .footer-contact-address > span { display: flex; align-items: baseline; gap: .5rem; color: rgba(255, 255, 255, .58); font-size: 16px; line-height: 30px; text-decoration: none; }
.footer-contact-list strong, .footer-contact-address strong { flex: 0 0 auto; color: rgba(255, 255, 255, .62); font-weight: 500; }
.utility-contact a > span::after, .utility-contact > span > span::after, .footer-contact-list strong::after, .footer-contact-address strong::after { content: "："; }
html[lang^="en"] .utility-contact a > span::after, html[lang^="en"] .utility-contact > span > span::after, html[lang^="en"] .footer-contact-list strong::after, html[lang^="en"] .footer-contact-address strong::after { content: ":"; }
.footer-contact-address { margin: 0; }
.footer-contact-address span span { overflow-wrap: anywhere; }
.footer-bottom { color: rgba(255, 255, 255, .58); font-size: 14px; line-height: 1.6; }
.contact-channels { display: grid; gap: .45rem; }
.contact-channels li > a, .contact-channels li > span { display: flex; flex-wrap: wrap; gap: .35rem .6rem; color: rgba(255, 255, 255, .76); text-decoration: none; }
.contact-channels strong { color: var(--color-on-dark); font-size: var(--step--1); }
.contact-channels img { width: 5rem; height: 5rem; margin-block-start: .4rem; object-fit: contain; background: var(--color-surface); }
.inquiry-shell form { display: grid; gap: var(--space-2); }
.inquiry-shell label { color: var(--color-ink); font-size: var(--step--1); }
.inquiry-shell input, .inquiry-shell textarea, .inquiry-shell select { width: 100%; min-height: 3rem; padding: .7rem .85rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); }
.inquiry-shell textarea { min-height: 9rem; resize: vertical; }
.inquiry-shell button[type="submit"] { min-height: 3rem; padding-inline: var(--space-3); border: 0; background: var(--color-brand); color: var(--color-on-brand); font-weight: 700; cursor: pointer; }
.inquiry-shell button[type="submit"]:hover { background: var(--color-brand-dark); }
.specifications { margin: 0; border-block-start: 1px solid var(--color-line); border-inline-start: 1px solid var(--color-line); }
.specifications > div { display: grid; grid-template-columns: minmax(8rem, .35fr) 1fr; border-block-end: 1px solid var(--color-line); }
.specifications dt, .specifications dd { margin: 0; padding: var(--space-2); border-inline-end: 1px solid var(--color-line); }
.specifications dt { font-weight: 700; background: var(--color-surface-muted); }
.specifications dd { display: flex; align-items: baseline; gap: .35rem; }
.specifications dd small { color: var(--color-ink-soft); }
@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .nav-item > a { display: flex; min-height: 3.125rem; align-items: center; padding: 0 .9375rem; font-size: 15px; }
  .nav-item > a::after { display: none; }
  .nav-item.is-current > a, .nav-item.is-ancestor > a { color: var(--color-brand); }
  .submenu-toggle { position: absolute; inset-block-start: 0; inset-inline-end: 0; display: block; width: 3.125rem; min-width: 3.125rem; height: 3.125rem; min-height: 3.125rem; }
  .submenu-toggle::after { display: inline-block; content: "›"; transition: transform var(--transition); }
  .submenu-toggle[aria-expanded="true"]::after { transform: rotate(90deg); }
  .content-card { grid-template-columns: minmax(10rem, .4fr) 1fr; }
}
@media (max-width: 640px) {
  .content-card { grid-template-columns: 1fr; }
  .detail-neighbors, .specifications > div { grid-template-columns: 1fr; }
  .detail-neighbors a + a { border-block-start: 1px solid var(--color-line); border-inline-start: 0; text-align: start; }
  .specifications dd { padding-block-start: .6rem; }
  .footer-qr-item figcaption, .footer-menu-group li a, .footer-contact-list li > a, .footer-contact-list li > span, .footer-contact-address > a, .footer-contact-address > span { font-size: 15px; }
  .footer-menu-group h2, .footer-contact-area h2 { font-size: 18px; }
  .footer-contact-list li > a, .footer-contact-list li > span, .footer-contact-address > a, .footer-contact-address > span { flex-wrap: wrap; gap: 0 .4rem; line-height: 1.9; }
  .footer-bottom { font-size: 13px; }
}