/* ========================================
   CSS カスタムプロパティ（変数）
======================================== */
:root {
  /* カラーパレット */
  --color-navy-dark: #0c1928;
  --color-navy: #19325a;
  --color-red-accent: #a40000;
  --color-gray-bg: #ebebeb;
  --color-white: #ffffff;
  --color-white-alt: #fafafa;

  /* テキストカラー */
  --color-text-primary: #19325a;
  --color-text-on-navy: #fafafa;
  --color-text-nav: #f8fafc;

  /* フォントサイズ（1440px基準） */
  --font-size-annotation: 1.072rem;
  --font-size-nav: 1.072rem;
  --font-size-small: 1.072rem;
  --font-size-base: 1.143rem;
  --font-size-footer-en: 1.143rem;
  --font-size-button: 1.286rem;
  --font-size-footer-heading: 1.286rem;
  --font-size-heading: 1.857rem;
  --font-size-heading-en: 2.071rem;

  /* モバイル用フォントサイズ */
  --font-size-mobile-annotation: 0.8rem;
  --font-size-mobile-small: 0.714rem;
  --font-size-mobile-base: 0.964rem;
  --font-size-mobile-heading: 1.286rem;
  --font-size-button: 1.286rem;


  /* フォントファミリー */
  --font-family-sans-jp: 'Noto Sans JP', sans-serif;
  --font-family-sans: 'Noto Sans', sans-serif;
  --font-family-serif-jp: 'Noto Serif JP', serif;
  --font-family-heading-en: 'Public Sans', sans-serif;

  /* スペーシング */
  --spacing-1: clamp(0.5rem, 0.4rem + 0.3vw, 0.571rem);
  --spacing-2: clamp(1rem, 0.9rem + 0.4vw, 1.143rem);
  --spacing-3: clamp(1.5rem, 1.3rem + 0.6vw, 1.714rem);
  --spacing-4: clamp(2rem, 1.8rem + 0.8vw, 2.286rem);
  --spacing-5: clamp(2.5rem, 2.2rem + 1vw, 2.857rem);
  --spacing-6: clamp(3rem, 2.7rem + 1.2vw, 3.429rem);
  --spacing-7: clamp(3.5rem, 3.1rem + 1.4vw, 4rem);
  --spacing-8: clamp(4rem, 3.6rem + 1.6vw, 4.571rem);
  --spacing-9: clamp(4.5rem, 4rem + 1.8vw, 5.143rem);
  --spacing-10: clamp(5rem, 4.5rem + 2vw, 5.714rem);
  --spacing-12: clamp(6rem, 5.4rem + 2.4vw, 6.857rem);
  --spacing-16: clamp(8rem, 7.2rem + 3.2vw, 9.143rem);
  --spacing-17: clamp(8.5rem, 7.6rem + 3.4vw, 9.714rem);
  --spacing-18: clamp(9rem, 8rem + 3.6vw, 10.286rem);
  --spacing-20: clamp(10rem, 9rem + 4vw, 11.429rem);


  /* letter-spacing */
  --letter-spacing-wide: 0.225em;
  --letter-spacing-normal: 0.05em;

  /* line-height */
  --line-height-body: 2.286;
  --line-height-annotation: 2.2;
}

/* ========================================
   ベーススタイル
======================================== */
html {
  font-size: 14px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-serif-jp);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-primary);
  background-color: var(--color-white);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

.sr-only-inline {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

.sr-text-pair {
  position: relative;
}

.sr-text-pair p.sr-only {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: transparent !important;
  background-color: transparent;
  pointer-events: auto;
  z-index: 1;
}

.italic {
  font-style: italic;
}

/* ========================================
   フォーカス表示
======================================== */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 3px solid var(--color-navy);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--color-white);
}

header *:focus-visible,
.about-content *:focus-visible,
.video-section *:focus-visible,
.sdgs-contribution *:focus-visible,
footer *:focus-visible,
.mobile-drawer *:focus-visible {
  outline: 3px solid var(--color-white);
  box-shadow: 0 0 0 5px var(--color-navy);
}

/* ========================================
   スキップリンク（アクセシビリティ）
======================================== */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  background-color: var(--color-navy-dark);
  color: var(--color-white);
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  font-family: var(--font-family-sans-jp);
  font-size: var(--font-size-base);
  font-weight: 500;
  z-index: 9999;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 12px;
  outline: 3px solid var(--color-red-accent);
  outline-offset: 2px;
}

.splide__sr-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   ヘッダー
======================================== */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: var(--color-white);
  transform: translateY(0);
  transition: transform 0.3s ease;
}

section {
  scroll-margin-top: 0;
}

.sdgs-contribution .sdgs-mobile-only {
  display: none;
}

.mobile-br-430 {
  display: none;
}

@media (max-width: 768px) {
  section {
    scroll-margin-top: 0;
  }
}

.header-logo {
  background-color: var(--color-navy-dark);
  padding: var(--spacing-2) var(--spacing-17);
  text-align: left;
}

header nav {
  background-color: var(--color-navy);
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--spacing-4);
}

header nav .desktop-nta-logo {
  height: 68.57px;
  width: auto;
  object-fit: contain;
}

header nav a:has(.desktop-nta-logo) {
  display: inline-block;
  line-height: 0;
  margin-left: var(--spacing-8);
  transform: none;
  align-self: center;
  transition: opacity 0.3s ease;
}

header nav a:has(.desktop-nta-logo)::after {
  display: none;
}

header nav a:has(.desktop-nta-logo):hover {
  opacity: 0.7;
}

header nav a:has(.desktop-nta-logo):focus-visible {
  outline: 3px solid var(--color-white);
  box-shadow: 0 0 0 3px var(--color-navy);
  outline-offset: 3px;
  border-radius: 2px;
}

header nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) 0;
}

header nav li {
  position: relative;
}

header nav a,
header nav button {
  font-family: var(--font-family-sans-jp);
  font-size: var(--font-size-nav);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-text-nav);
  transition: opacity 0.3s ease;
}

header nav a {
  display: inline-block;
  transform: translateY(-3px);
  position: relative;
}

header nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-text-nav);
  transition: width 0.3s ease;
  transform-origin: left;
}

header nav a:hover::after {
  width: 100%;
  left: 0;
  right: auto;
}

header nav a:not(:hover)::after {
  width: 0;
  left: auto;
  right: 0;
  transition: width 0.3s ease, left 0s 0.3s, right 0s 0s;
}

.language-switcher {
  position: relative;
}

.language-switcher button {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-sans-jp);
  position: relative;
}

.language-switcher button::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-text-nav);
  transition: width 0.3s ease;
  transform-origin: left;
}

.language-switcher button:hover::after {
  width: 100%;
  left: 0;
  right: auto;
}

.language-switcher button:not(:hover)::after {
  width: 0;
  left: auto;
  right: 0;
  transition: width 0.3s ease, left 0s 0.3s, right 0s 0s;
}

.language-switcher button abbr {
  text-decoration: none;
  display: inline-block;
  transform: translateY(-1px)
}

.mobile-header {
  display: none;
}

.mobile-drawer {
  display: none;
}

.language-switcher button img[src*="language"] {
  width: 1.072rem;
  height: 1.072rem;
}

.language-switcher button span[aria-hidden] {
  display: inline-flex;
  align-items: center;
}

.language-switcher button span[aria-hidden] img {
  width: 0.8rem;
  height: auto;
}

.language-switcher ul {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--spacing-1);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-bg);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-width: 120px;
  padding: var(--spacing-1) 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.language-switcher ul[hidden] {
  display: none;
}

.language-switcher ul li {
  display: block;
}

.language-switcher ul a {
  display: block;
  padding: var(--spacing-1) var(--spacing-2);
  color: var(--color-navy);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.language-switcher ul a:hover {
  background-color: var(--color-gray-bg);
  opacity: 1;
}

/* ========================================
   ヒーローセクション
======================================== */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: linear-gradient(rgba(12, 25, 40, 0.5), rgba(12, 25, 40, 0.5)), url('../images/FV-image.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

#hero>* {
  position: relative;
  z-index: 2;
}

#hero h1 {
  margin-bottom: var(--spacing-4);
}

#hero h1 img {
  width: 45.139vw;
  height: auto;
}

#hero .hero-subtitle {
  margin-bottom: var(--spacing-4);
}

#hero .hero-subtitle img {
  width: 45.139vw;
  height: auto;
}

/* ========================================
   ヒーローアニメーション
======================================== */
@keyframes fadeInBlur {
  from {
    filter: blur(10px);
    opacity: 0;
  }

  to {
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  #hero {
    animation: fadeInBlur 1.5s ease-out;
  }

  #hero h1 {
    opacity: 0;
    animation: fadeIn 1s ease-out 0.5s forwards;
  }

  #hero .hero-subtitle {
    opacity: 0;
    animation: fadeIn 1s ease-out 0.7s forwards;
  }
}

@media (prefers-reduced-motion: reduce) {

  #hero,
  #hero h1,
  #hero .hero-subtitle {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* ========================================
   スクロールアニメーション
======================================== */

@media (prefers-reduced-motion: no-preference) {
  .scroll-fade-text {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px);
    transition: opacity 0.5s ease-out, filter 0.5s ease-out, transform 0.5s ease-out;
  }

  .scroll-fade-text.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }

  .line-wrapper {
    display: inline;
    position: relative;
    top: 10px;
    opacity: 0;
    filter: blur(4px);
    transition: opacity 0.5s ease-out, filter 0.5s ease-out, top 0.5s ease-out;
    transition-delay: calc(var(--line-index) * 0.1s);
  }

  .line-wrapper.is-visible {
    top: 0;
    opacity: 1;
    filter: blur(0);
  }

  .scroll-fade-visual {
    opacity: 0;
    filter: blur(6px);
    transition: opacity 0.5s ease-out, filter 0.6s ease-out;
  }

  .scroll-fade-visual.is-visible {
    opacity: 1;
    filter: blur(0);
  }

  .button.scroll-fade-text,
  .video-thumbnail.scroll-fade-visual {
    transition: opacity 0.5s ease-out, filter 0.6s ease-out !important;
  }

  .splide__slide--clone .video-thumbnail.scroll-fade-visual {
    opacity: 1 !important;
    filter: blur(0) !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  .scroll-fade-text,
  .scroll-fade-visual,
  .line-wrapper {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    top: 0 !important;
    transition: none !important;
  }
}

/* ========================================
   アバウトセクション
======================================== */
.about-container {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.about-image {
  flex: 1;
  background-image: url('../images/about.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--spacing-7) var(--spacing-18) var(--spacing-7) var(--spacing-7);
  box-sizing: border-box;
}

.about-content {
  flex: 1;
  background-color: var(--color-navy);
  padding: var(--spacing-7) var(--spacing-18) var(--spacing-7) var(--spacing-7);
  color: var(--color-text-on-navy);
  box-sizing: border-box;
}

.about-content h2 {
  font-size: var(--font-size-heading);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-4);
}

.about-content p {
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-4);
}

.about-content>p:last-of-type {
  margin-bottom: 3.643rem;
}

.about-buttons {
  display: flex;
  gap: var(--spacing-3);
}

.about-buttons .button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 15.714rem;
  height: 3.143rem;
  padding: 0 0.86rem 0 0.86rem;
  background-color: var(--color-white-alt);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans-jp);
  font-size: var(--font-size-button);
  font-weight: 700;
  text-decoration: none;
  border-radius: 100px;
  border: 1px solid var(--color-navy);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  justify-content: flex-end;
  letter-spacing: var(--letter-spacing-normal);
}

@media (hover: hover) {
  .about-buttons .button:hover {
    background-color: var(--color-navy);
    color: var(--color-white-alt);
    border-color: var(--color-white-alt);
  }
}

.about-buttons .button:last-child {
  gap: var(--spacing-3);
}

.about-buttons .button .button-arrow-wrapper {
  position: relative;
  display: inline-block;
  width: 0.857rem;
  height: 0.857rem;
  padding: 0.643rem;
}

.about-buttons .button img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.857rem;
  height: 0.857rem;
  border-radius: 50%;
  padding: 0.643rem;
  box-sizing: content-box;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.about-buttons .button:first-child img {
  background-color: var(--color-red-accent);
}

html[lang="en"] .about-buttons .button img {
  background-color: var(--color-red-accent);
}

.about-buttons .button:last-child img {
  background-color: var(--color-navy);
}

.about-buttons .button .arrow-default {
  opacity: 1;
}

.about-buttons .button .arrow-hover {
  opacity: 0;
}

@media (hover: hover) {
  .about-buttons .button:hover .arrow-default {
    opacity: 0;
  }

  .about-buttons .button:hover .arrow-hover {
    opacity: 1;
  }

  .about-buttons .button:hover img {
    background-color: var(--color-white-alt);
  }

  html[lang="en"] .about-buttons .button:hover img {
    background-color: var(--color-white-alt);
  }
}

.about-buttons .button span {
  display: inline-block;
  transform: translateY(-1px);
}

html[lang="en"] .about-buttons .button {
  width: auto;
  padding: 0 0.86rem 0 var(--spacing-3);
}

html[lang="en"] .about-buttons .button span {
  transform: translateY(-2px);
}

html[lang="ja"] .about-buttons .button .button-arrow-wrapper,
html[lang="en"] .about-buttons .button .button-arrow-wrapper {
  transform: translateY(0px);
}

html[lang="en"] .about-content h2 {
  letter-spacing: 0.05em;
}

html[lang="en"] .about-content p {
  letter-spacing: 0.03em;
}

/* ========================================
   ユネスコセクション
======================================== */
.unesco-heritage {
  background-color: var(--color-gray-bg);
  text-align: center;
  padding: var(--spacing-9) 0 var(--spacing-7);
}

.unesco-heritage h3 {
  font-size: var(--font-size-heading);
  letter-spacing: 0.05em;
  line-height: var(--line-height-body);
  margin-bottom: 3.143rem;
  /* 44px ÷ 14px = 3.143rem */
  max-width: 80.694vw;
  margin-left: auto;
  margin-right: auto;
}

.unesco-heritage p {
  font-size: var(--font-size-base);
  letter-spacing: 0.03em;
  line-height: var(--line-height-body);
  margin-bottom: 3.143rem;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

html[lang="ja"] .unesco-heritage p {
  max-width: none;
}


/* ========================================
   SDGs貢献セクション
======================================== */
.sdgs-contribution {
  background-color: var(--color-navy);
  color: var(--color-text-on-navy);
  text-align: center;
  padding: 7.5rem 0 8.333rem 0;
}

.sdgs-contribution h3 {
  font-size: var(--font-size-heading);
  letter-spacing: 0.05em;
  line-height: var(--line-height-body);
  margin-bottom: 3.143rem;
  max-width: 80.694vw;
  margin-left: auto;
  margin-right: auto;
}

.sdgs-contribution p {
  font-size: var(--font-size-base);
  letter-spacing: 0.03em;
  line-height: var(--line-height-body);
  margin-bottom: 3.143rem;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

html[lang="ja"] .sdgs-contribution p {
  max-width: none;
}

.sdgs-contribution .footnotes {
  margin-top: 5.143rem;
  max-width: 37.5rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.sdgs-contribution .footnotes p {
  margin-bottom: 1.429rem;
}

.unesco-heritage .line-wrapper,
.sdgs-contribution .line-wrapper {
  display: block;
}

.sdgs-contribution .footnotes p:last-child {
  margin-bottom: 0;
}

.sdgs-contribution .footnotes small {
  display: inline;
  font-size: var(--font-size-annotation);
  letter-spacing: 0.03em;
  line-height: var(--line-height-annotation);
}

.sdgs-contribution .footnotes em {
  display: inline;
  font-size: var(--font-size-annotation);
  letter-spacing: 0.03em;
  line-height: var(--line-height-annotation);
}

html[lang="en"] .sdgs-contribution .footnotes small,
html[lang="en"] .sdgs-contribution .footnotes em {
  font-size: var(--font-size-annotation);
}

html[lang="en"] .sdgs-contribution .footnotes small {
  letter-spacing: 0.03em;
}

/* ========================================
   学ぶセクション
======================================== */
#learn {
  background-color: var(--color-gray-bg);
  text-align: center;
  padding: var(--spacing-9) 0 var(--spacing-7);
}

#learn>img {
  width: 3.571rem;
  height: auto;
  margin: var(--spacing-4) auto;
}

#learn h2 {
  font-size: var(--font-size-heading);
  color: var(--color-navy);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--spacing-6);
}

html[lang="en"] #learn h2 {
  max-width: 80.694vw;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.05em;
}

html[lang="en"] .event-content h2 {
  letter-spacing: 0.05em;
}

html[lang="en"] .event-content p {
  letter-spacing: 0.03em;
}

html[lang="en"] #info h2 {
  letter-spacing: 0.05em;
}

html[lang="en"] .sake-map .info-content h3,
html[lang="en"] .geographical-indication .info-content h3 {
  letter-spacing: 0.05em;
}

html[lang="en"] .sake-map .info-content p,
html[lang="en"] .geographical-indication .info-content p {
  letter-spacing: 0.03em;
}

.video-section {
  background-color: var(--color-navy);
  color: var(--color-text-on-navy);
  padding: var(--spacing-8) 0;
}

.section-header h3 {
  font-family: var(--font-family-serif-jp);
  font-size: 1.57rem;
  margin-bottom: var(--spacing-6);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1;
}

html[lang="en"] .section-header h3 {
  letter-spacing: 0.05em;
}

.splide {
  width: 100vw;
  margin: 0 auto;
  position: relative;
}

.splide__track {
  width: 80.694vw;
  margin: 0 auto;
}

.splide__slide {
  display: flex;
  justify-content: center;
}

.splide__arrow {
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 10;
  opacity: 0.8;
  transition: all 0.3s ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.splide__arrow--prev {
  left: calc((100vw - 80.694vw) / 2 - 60px);
}

.splide__arrow--next {
  right: calc((100vw - 80.694vw) / 2 - 60px);
}

.splide__arrow:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

.splide__arrow svg {
  display: none;
}

.splide__arrow::after {
  content: '';
  width: 20px;
  height: 20px;
  border-right: 2.5px solid var(--color-white);
  border-bottom: 2.5px solid var(--color-white);
  display: block;
}

.splide__arrow--prev::after {
  transform: rotate(135deg);
  margin-left: 2px;
}

.splide__arrow--next::after {
  transform: rotate(-45deg);
  margin-right: 2px;
}

.video-thumbnail {
  position: relative;
  width: 26vw;
  height: 14.7vw;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .splide__slide a:hover .video-thumbnail {
    opacity: 0.6;
  }

  .splide__slide--clone a:hover .video-thumbnail {
    opacity: 0.6 !important;
  }
}

.video-thumbnail img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
}

.video-info {
  margin-top: var(--spacing-2);
  text-align: left;
}

.video-info .video-title {
  font-family: var(--font-family-serif-jp);
  font-size: 1.072rem;
  color: var(--color-white);
  margin-bottom: 1rem;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-normal);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 3.5rem;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  transition: opacity 0.3s ease;
}

.video-info .video-channel {
  font-family: var(--font-family-serif-jp);
  font-size: 1.072rem;
  color: var(--color-white);
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-normal);
  transition: opacity 0.3s ease;
}

@media (hover: hover) {

  .splide__slide a:hover .video-info .video-title,
  .splide__slide a:hover .video-info .video-channel {
    opacity: 0.7;
  }
}

.video-section .splide__arrow:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 6px #000000 !important;
}

.splide__arrow:focus,
.splide__slide:focus {
  outline: none;
}

.splide__slide a {
  display: block;
  position: relative;
  width: 100%;
}

.video-thumbnail {
  overflow: visible;
  position: relative;
  width: 100%;
}

.video-section .splide__slide a:focus-visible {
  outline: none !important;
}

.video-section .splide__slide a:focus-visible::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 0 4px #ffffff;
  pointer-events: none;
  z-index: 10;
}

.brochure-section {
  background-color: var(--color-gray-bg);
  color: var(--color-navy);
  padding: var(--spacing-8) 0;
}

.brochure-section .section-header h3 {
  color: var(--color-navy);
}

.brochure-section .section-header .subtitle {
  color: var(--color-navy);
}

.brochure-container {
  display: flex;
  gap: var(--spacing-4);
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}

.brochure-thumbnail {
  position: relative;
  width: clamp(8.714rem, 2rem + 12.3vw, 25.429rem);
  margin: auto;
}

.brochure-thumbnail img:first-child {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.brochure-thumbnail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(25, 50, 90, 0);
  pointer-events: none;
  z-index: 1;
  transition: background-color 0.3s ease;
}

@media (hover: hover) {
  .brochure-section a:hover .brochure-thumbnail::before {
    background-color: rgba(25, 50, 90, 0.4);
  }
}

.brochure-info {
  margin-top: var(--spacing-2);
  text-align: center;
}

.brochure-info .brochure-title {
  font-family: var(--font-family-serif-jp);
  font-size: 1.072rem;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-normal);
  transition: opacity 0.3s ease;
}

.brochure-info .brochure-description {
  font-family: var(--font-family-serif-jp);
  font-size: 1.072rem;
  color: var(--color-navy);
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-normal);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  transition: opacity 0.3s ease;
}

html[lang="en"] .brochure-info .brochure-description {
  line-height: 1.7;
}


@media (hover: hover) {

  .brochure-section a:hover .brochure-info .brochure-title,
  .brochure-section a:hover .brochure-info .brochure-description,
  .koji-brochure a:hover .brochure-info .brochure-title,
  .koji-brochure a:hover .brochure-info .brochure-description {
    opacity: 0.7;
  }
}

/* ========================================
   イベントセクション
======================================== */
#event {
  background-color: var(--color-white);
  padding: var(--spacing-10) 0;
}

.event-container {
  display: flex;
  align-items: stretch;
  width: 80.694vw;
  margin: 0 auto;
}

.event-image {
  flex: 1;
  background-image: url('../images/encounter.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0 0 0 var(--spacing-8);
  box-sizing: border-box;
  aspect-ratio: 3 / 2;
}

.event-content {
  flex: 1;
  padding: 0 0 0 var(--spacing-8);
  box-sizing: border-box;
}

.event-content h2 {
  font-size: var(--font-size-heading);
  color: var(--color-navy);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-5);
}

.event-content p {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-body);
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-5);
}

.event-content .button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  height: 3.143rem;
  padding: 0 0.55rem 0 var(--spacing-3);
  background-color: var(--color-navy);
  color: var(--color-white-alt);
  font-family: var(--font-family-sans-jp);
  font-size: var(--font-size-button);
  font-weight: 700;
  text-decoration: none;
  border-radius: 100px;
  border: 1px solid var(--color-navy);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  justify-content: flex-end;
  letter-spacing: var(--letter-spacing-normal);
}

@media (hover: hover) {
  .event-content .button:hover {
    background-color: var(--color-white-alt);
    color: var(--color-text-primary);
    border-color: var(--color-navy);
  }
}

.event-content .button .button-arrow-wrapper {
  position: relative;
  display: inline-block;
  width: 0.857rem;
  height: 0.857rem;
  padding: 0.643rem;
  box-sizing: content-box;
}

.event-content .button img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.857rem;
  height: 0.857rem;
  border-radius: 50%;
  padding: 0.643rem;
  box-sizing: content-box;
  background-color: var(--color-white-alt);
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.event-content .button .arrow-default {
  opacity: 1;
}

.event-content .button .arrow-hover {
  opacity: 0;
}

@media (hover: hover) {
  .event-content .button:hover .arrow-default {
    opacity: 0;
  }

  .event-content .button:hover .arrow-hover {
    opacity: 1;
  }

  .event-content .button:hover img {
    background-color: var(--color-navy);
  }
}

.event-content .button span {
  display: inline-block;
  transform: translateY(-1px);
}

html[lang="en"] .event-content .button span {
  transform: translateY(-2px);
}

html[lang="ja"] .event-content .button .button-arrow-wrapper,
html[lang="en"] .event-content .button .button-arrow-wrapper {
  transform: translateY(0px);
}

/* ========================================
   情報セクション
======================================== */
#info {
  background-color: var(--color-gray-bg);
  text-align: center;
  padding: 0;
}

#info .info-heading {
  width: 80.694vw;
  margin: 0 auto;
  border-right: var(--color-white) solid 1.5px;
  border-left: var(--color-white) solid 1.5px;
  padding-top: var(--spacing-7);
}

#info .info-heading>img {
  width: 3.571rem;
  height: auto;
  margin: 0 auto var(--spacing-4);
}

#info h2 {
  font-size: var(--font-size-heading);
  color: var(--color-navy);
  letter-spacing: var(--letter-spacing-wide);
  padding-bottom: var(--spacing-7);
}

#info .white-line {
  height: 1.5px;
  background-color: var(--color-white);
}

.sake-map {
  display: flex;
  align-items: stretch;
  width: 80.694vw;
  margin: 0 auto;
  border-right: var(--color-white) solid 1.5px;
  border-left: var(--color-white) solid 1.5px;
}

.sake-map .info-image {
  flex: 1;
  background-image: url('../images/sakagura.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--spacing-8);
  box-sizing: border-box;
  position: relative;
  aspect-ratio: 16 / 9;
}


.sake-map .info-content {
  flex: 1;
  padding: var(--spacing-4) var(--spacing-8);
  box-sizing: border-box;
  text-align: left;
}

.sake-map .info-content h3 {
  font-size: var(--font-size-heading);
  color: var(--color-navy);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--spacing-4);
}

.sake-map .info-content p {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-5);
}

.sake-map .info-content .note {
  margin-bottom: var(--spacing-5);
  font-size: var(--font-size-annotation);
  letter-spacing: var(--letter-spacing-normal);
}

.sake-map .info-content .note small {
  font-size: var(--font-size-annotation);
  color: var(--color-text-primary);
}

.sake-map .info-content .button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  height: 3.143rem;
  padding: 0 0.55rem 0 var(--spacing-3);
  background-color: var(--color-navy);
  color: var(--color-white-alt);
  font-family: var(--font-family-sans-jp);
  font-size: var(--font-size-button);
  font-weight: 700;
  text-decoration: none;
  border-radius: 100px;
  border: 1px solid var(--color-navy);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  justify-content: flex-end;
  letter-spacing: var(--letter-spacing-normal);
}

@media (hover: hover) {
  .sake-map .info-content .button:hover {
    background-color: var(--color-white-alt);
    color: var(--color-text-primary);
    border-color: var(--color-navy);
  }
}

.sake-map .info-content .button .button-arrow-wrapper {
  position: relative;
  display: inline-block;
  width: 0.857rem;
  height: 0.857rem;
  padding: 0.643rem;
  box-sizing: content-box;
}

.sake-map .info-content .button img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.857rem;
  height: 0.857rem;
  border-radius: 50%;
  padding: 0.643rem;
  box-sizing: content-box;
  background-color: var(--color-white-alt);
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.sake-map .info-content .button .arrow-default {
  opacity: 1;
}

.sake-map .info-content .button .arrow-hover {
  opacity: 0;
}

@media (hover: hover) {
  .sake-map .info-content .button:hover .arrow-default {
    opacity: 0;
  }

  .sake-map .info-content .button:hover .arrow-hover {
    opacity: 1;
  }

  .sake-map .info-content .button:hover img {
    background-color: var(--color-navy);
  }
}

.sake-map .info-content .button span {
  display: inline-block;
  transform: translateY(-1px);
}

html[lang="en"] .sake-map .info-content .button span {
  transform: translateY(-2px);
}

html[lang="ja"] .sake-map .info-content .button .button-arrow-wrapper,
html[lang="en"] .sake-map .info-content .button .button-arrow-wrapper {
  transform: translateY(0px);
}

.geographical-indication {
  display: flex;
  align-items: stretch;
  width: 80.694vw;
  margin: 0 auto;
  flex-direction: row-reverse;
  border-right: var(--color-white) solid 1.5px;
  border-left: var(--color-white) solid 1.5px;
}

.geographical-indication .info-image {
  flex: 1;
  background-image: url('../images/geographical.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--spacing-8);
  box-sizing: border-box;
  position: relative;
  aspect-ratio: 16 / 9;
}

.geographical-indication .info-content {
  flex: 1;
  padding: var(--spacing-4) var(--spacing-8);
  box-sizing: border-box;
  text-align: left;
}

.geographical-indication .info-content h3 {
  font-size: var(--font-size-heading);
  color: var(--color-navy);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--spacing-4);
}

.geographical-indication .info-content p {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-5);
}

.geographical-indication .info-content .button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  height: 3.143rem;
  padding: 0 0.55rem 0 var(--spacing-3);
  background-color: var(--color-navy);
  color: var(--color-white-alt);
  font-family: var(--font-family-sans-jp);
  font-size: var(--font-size-button);
  font-weight: 700;
  text-decoration: none;
  border-radius: 100px;
  border: 1px solid var(--color-navy);
  transition: background-color 0.3s ease, color 0.3s ease;
  justify-content: flex-end;
  letter-spacing: var(--letter-spacing-normal);
}

@media (hover: hover) {
  .geographical-indication .info-content .button:hover {
    background-color: var(--color-white-alt);
    color: var(--color-text-primary);
  }
}

.geographical-indication .info-content .button .button-arrow-wrapper {
  position: relative;
  display: inline-block;
  width: 0.857rem;
  height: 0.857rem;
  padding: 0.643rem;
  box-sizing: content-box;
}

.geographical-indication .info-content .button img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.857rem;
  height: 0.857rem;
  border-radius: 50%;
  padding: 0.643rem;
  box-sizing: content-box;
  background-color: var(--color-white-alt);
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.geographical-indication .info-content .button .arrow-default {
  opacity: 1;
}

.geographical-indication .info-content .button .arrow-hover {
  opacity: 0;
}

@media (hover: hover) {
  .geographical-indication .info-content .button:hover .arrow-default {
    opacity: 0;
  }

  .geographical-indication .info-content .button:hover .arrow-hover {
    opacity: 1;
  }

  .geographical-indication .info-content .button:hover img {
    background-color: var(--color-navy);
  }
}

.geographical-indication .info-content .button span {
  display: inline-block;
  transform: translateY(-1px);
}

html[lang="en"] .geographical-indication .info-content .button span {
  transform: translateY(-2px);
}

html[lang="ja"] .geographical-indication .info-content .button .button-arrow-wrapper,
html[lang="en"] .geographical-indication .info-content .button .button-arrow-wrapper {
  transform: translateY(0px);
}

.koji-brochure {
  text-align: center;
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-5);
  width: 80.694vw;
  margin: 0 auto;
  border-right: var(--color-white) solid 1.5px;
  border-left: var(--color-white) solid 1.5px;
}

.koji-brochure .section-header h3 {
  font-family: var(--font-family-serif-jp);
  font-size: var(--font-size-heading);
  font-weight: 400;
  color: var(--color-navy);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--spacing-4);
}

.koji-brochure .koji-description {
  max-width: 725px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--spacing-5);
  text-align: center;
  font-size: var(--font-size-base);
}

html[lang="en"] .koji-brochure .koji-description {
  letter-spacing: 0.03em;
  max-width: 1040px;
}

.koji-brochure .brochure-container {
  display: flex;
  justify-content: center;
}

.koji-brochure .brochure-thumbnail {
  position: relative;
  width: clamp(8.714rem, 2rem + 12.3vw, 25.429rem);
}

.koji-brochure .brochure-thumbnail img:first-child {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.koji-brochure .brochure-thumbnail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(25, 50, 90, 0);
  pointer-events: none;
  z-index: 1;
  transition: background-color 0.3s ease;
}

@media (hover: hover) {
  .koji-brochure a:hover .brochure-thumbnail::before {
    background-color: rgba(25, 50, 90, 0.4);
  }
}

.white-line-side {
  height: var(--spacing-17);
  margin: 0 auto;
  width: 80.694vw;
  border-right: var(--color-white) solid 1.5px;
  border-left: var(--color-white) solid 1.5px;
}

/* ========================================
   フッター
======================================== */
footer {
  background-color: var(--color-navy);
  color: var(--color-text-on-navy);
  padding: var(--spacing-7) 10vw var(--spacing-10);
  border-bottom: var(--color-navy-dark) solid 10px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--spacing-5) * 1.14);
  width: 80.694vw;
  margin: 0 auto;
}

.footer-column {
  flex: 0 1 auto;
}

.footer-column:nth-child(1) {
  flex: 0 0 20%;
}

.footer-column:nth-child(2) {
  flex: 0 0 20%;
}

.footer-column:nth-child(3) {
  flex: 0 0 20%;
}

.footer-column:nth-child(4) {
  flex: 0 0 20%;
}

.footer-column>div {
  margin-bottom: var(--spacing-4);
}

.footer-column>div:last-child {
  margin-bottom: 0;
}

.footer-content h3 {
  font-family: var(--font-family-sans-jp);
  font-size: var(--font-size-footer-heading);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-normal);
  margin-bottom: var(--spacing-2);
  color: var(--color-text-on-navy);
}

.footer-content #hozonkai {
  line-height: 1.4;
}


html[lang="en"] .footer-content h3 {
  line-height: 1.4;
}

.footer-content ul {
  list-style: none;
  padding-left: 1.2em;
}

.footer-content li {
  margin-bottom: 0.858rem;
  list-style: disc;
}

.footer-content li a {
  font-family: var(--font-family-sans-jp);
  font-size: var(--font-size-small);
  font-weight: 400;
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-text-on-navy);
  text-decoration: none;
  transition: opacity 0.3s ease, font-weight 0.2s ease;
  display: block;
  line-height: 1.6;
}

.footer-content a:hover {
  opacity: 0.6;
  font-weight: 600;
}

.footer-content .bracket-link {
  text-indent: -0.4em;
}

.footer-column:nth-child(3) {
  flex: 0 0 25%;
}

.footer-logo {
  text-align: center;
  margin-top: var(--spacing-5);
}

.footer-logo .nta-logo {
  width: clamp(10rem, 5rem + 10vw, 17.143rem);
  height: auto;
  margin: auto;
}

.footer-logo a {
  display: inline-block;
  line-height: 0;
  transition: opacity 0.3s ease;
}

.footer-logo a:hover {
  opacity: 0.7;
}

.footer-logo a:focus-visible {
  outline: 3px solid var(--color-white);
  box-shadow: 0 0 0 3px var(--color-navy);
  outline-offset: 3px;
  border-radius: 2px;
}

.mobile-drawer-footer {
  text-align: center;
  margin: var(--spacing-7) auto 0;
}

.mobile-drawer-footer .nta-logo {
  width: clamp(8rem, 4rem + 8vw, 12rem);
  height: auto;
}

.mobile-drawer-footer a {
  display: inline-block;
  line-height: 0;
}

.mobile-drawer-footer a:focus-visible {
  outline: 3px solid var(--color-white);
  box-shadow: 0 0 0 3px var(--color-navy);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ========================================
   レスポンシブデザイン（大画面）
======================================== */
@media (min-width: 1920px) {
  :root {
    --font-size-annotation: 0.875rem;
    --font-size-nav: 1rem;
    --font-size-small: 1rem;
    --font-size-base: 1.143rem;
    --font-size-footer-en: 1.357rem;
    --font-size-footer-heading: 1.429rem;
    --font-size-heading: 1.857rem;
    --font-size-heading-en: 2.357rem;
  }

  .sdgs-contribution .footnotes {
    max-width: 46rem;
  }
}


/* ========================================
   レスポンシブデザイン（デスクトップ小）
======================================== */
@media (max-width: 1200px) {
  :root {
    --font-size-nav: 0.9rem;
    --font-size-button: 1rem;
  }

  header nav a:has(.desktop-nta-logo) {
    margin-left: var(--spacing-3);
  }


  html[lang="en"] header nav a,
  html[lang="en"] header nav button {
    font-size: 1.072rem;
  }

  .language-switcher button img[src*="language"] {
    width: 0.841rem;
    height: 0.841rem;
  }

  .language-switcher button span[aria-hidden] img {
    width: 0.6rem;
    height: auto;
  }

  .about-content {
    padding-right: var(--spacing-7);
  }

  .footer-column:nth-child(3) {
    flex: 0 0 25%;
  }

  .unesco-heritage p,
  .sdgs-contribution p {
    max-width: 63vw;
  }

  html[lang="en"] .koji-brochure .koji-description {
    max-width: 63vw;
  }
}

/* ========================================
   レスポンシブデザイン（タブレット）
======================================== */
@media (max-width: 1024px) {
  :root {
    --font-size-annotation: 1.072rem;
    --font-size-nav: 0.9rem;
    --font-size-small: 1rem;
    --font-size-footer-en: 1.071rem;
    --font-size-button: 1.071rem;
    --font-size-footer-heading: 1.143rem;
    --font-size-heading: 1.429rem;
    --font-size-heading-en: 1.857rem;

    --spacing-1: 0.5rem;
    --spacing-2: 1rem;
    --spacing-3: 1.5rem;
    --spacing-4: 2rem;
    --spacing-5: 2.5rem;
    --spacing-6: 3rem;
    --spacing-7: 3.5rem;
    --spacing-8: 4rem;
    --spacing-9: 4.5rem;
    --spacing-10: 5rem;
    --spacing-12: 6rem;
    --spacing-16: 8rem;
    --spacing-17: 8.5rem;
    --spacing-18: 9rem;
    --spacing-20: 10rem;
  }

  .about-buttons .button,
  .about-buttons .button:last-child {
    gap: var(--spacing-3);
  }

  .koji-brochure .koji-description {
    max-width: 548px;
  }
}



@media (max-width: 1000px) {
  :root {
    --font-size-nav: 0.69rem;
    --font-size-button: 0.9rem;
  }

  html[lang="ja"] header nav ul {
    gap: var(--spacing-2);
  }

  html[lang="ja"] header nav a:has(.desktop-nta-logo) {
    margin-left: 0;
  }

  .language-switcher button img[src*="language"] {
    width: 0.741rem;
    height: 0.741rem;
  }

  .language-switcher button span[aria-hidden] img {
    width: 0.5rem;
    height: auto;
  }
}

@media (max-width: 970px) {
  header nav a:has(.desktop-nta-logo) {
    margin-left: var(--spacing-2);
  }
}


/* ========================================
   レスポンシブデザイン（イベント・インフォ調整）
======================================== */
@media (max-width: 900px) {

  :root {
    --font-size-base: 1rem;
    --font-size-annotation: 0.9rem;
  }

  #event {
    padding: var(--spacing-7) 0 0;
  }

  .event-container {
    flex-direction: column;
    padding: 0 var(--spacing-2);
    width: 100%;
  }

  .event-image {
    width: 100%;
    height: 13.571rem;
    flex: none;
  }

  .event-content {
    padding: 0;
    text-align: center;
  }

  .event-content h2 {
    font-size: var(--font-size-mobile-heading);
    margin: var(--spacing-3) auto 1.429rem;
    width: 84vw;
    text-align: left;
  }

  .event-content p {
    font-size: var(--font-size-mobile-base);
    line-height: var(--line-height-body);
    margin: var(--spacing-3) auto 5.143rem;
    width: 84vw;
    text-align: left;
  }

  .event-content .button {
    display: inline-flex;
    margin: 0 auto;
  }

  .event-content .button:last-of-type {
    margin-bottom: 0;
  }

  #info h2 {
    font-size: var(--font-size-mobile-heading);
  }

  #info .info-heading {
    width: 91.467vw;
  }

  .sake-map {
    width: 91.467vw;
    flex-direction: column;
  }

  .sake-map .info-content {
    padding: var(--spacing-3) var(--spacing-2) 3.143rem;
    text-align: center;
  }

  .sake-map .info-content h3 {
    font-size: var(--font-size-mobile-heading);
    margin-bottom: var(--spacing-3);
    text-align: left;
  }

  .sake-map .info-content p {
    font-size: var(--font-size-mobile-base);
    line-height: var(--line-height-body);
    margin-bottom: var(--spacing-2);
    text-align: left;
  }

  .sake-map .info-content .note small {
    font-size: var(--font-size-annotation);
  }

  .sake-map .info-content .button {
    display: inline-flex;
  }

  .geographical-indication {
    width: 91.467vw;
    flex-direction: column;
  }

  .geographical-indication .info-content {
    padding: var(--spacing-3) var(--spacing-2) 3.143rem;
    text-align: center;
  }

  .geographical-indication .info-content h3 {
    font-size: var(--font-size-mobile-heading);
    margin-bottom: var(--spacing-3);
    text-align: left;
  }

  .geographical-indication .info-content p {
    font-size: var(--font-size-mobile-base);
    line-height: var(--line-height-body);
    text-align: left;
  }

  .geographical-indication .info-content .button {
    display: inline-flex;
  }

  .koji-brochure {
    width: 91.467vw;
    padding: var(--spacing-5) var(--spacing-2) var(--spacing-9);
  }

  .koji-brochure .section-header h3 {
    font-size: var(--font-size-mobile-heading);
  }

  .koji-brochure .koji-description {
    max-width: 63vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-5);
    text-align: left;
    font-size: var(--font-size-base);
  }

  .white-line-side {
    width: 91.467vw;
    height: 4.286rem;
  }

  .koji-brochure .brochure-thumbnail {
    width: 8.714rem;
    height: 11.571rem;
  }

  footer {
    padding: var(--spacing-5) 5vw var(--spacing-7);
  }

  .footer-content {
    width: 91.467vw;
  }
}

/* ========================================
   レスポンシブデザイン（タブレット・モバイル）
======================================== */
@media (max-width: 768px) {
  :root {
    --font-size-button: 1.071rem;
  }

  .sdgs-contribution .sdgs-mobile-only {
    display: inline;
  }

  .header-logo {
    display: none;
  }

  #header-nav {
    display: none;
  }

  .mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    background-color: var(--color-navy);
    padding: 0 var(--spacing-3) 0 0;
  }

  .mobile-header .mobile-nta-logo {
    height: 56px;
    width: auto;
    object-fit: contain;
  }

  .mobile-header a:has(.mobile-nta-logo) {
    display: inline-block;
    line-height: 0;
    margin-left: var(--spacing-3);
    transition: opacity 0.3s ease;
  }

  .mobile-header a:has(.mobile-nta-logo):hover {
    opacity: 0.7;
  }

  .mobile-header a:has(.mobile-nta-logo):focus-visible {
    outline: 3px solid var(--color-white);
    box-shadow: 0 0 0 3px var(--color-navy);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .mobile-header-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
  }

  .mobile-header> :last-child {
    margin-left: auto;
  }

  .mobile-language-wrapper {
    display: flex;
    align-items: center;
  }

  .mobile-drawer {
    display: block;
  }

  .mobile-language-wrapper {
    position: relative;
  }

  .language-switcher-mobile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: var(--color-text-nav);
    font-family: var(--font-family-sans-jp);
    font-size: var(--font-size-base);
    cursor: pointer;
  }

  .language-switcher-mobile img[src*="language"] {
    width: 1.071rem;
    height: 1.071rem;
  }

  .language-switcher-mobile .arrow {
    width: 0.6rem;
    transition: transform 0.3s ease;
  }

  .language-switcher-mobile[aria-expanded="true"] .arrow {
    transform: rotate(180deg);
  }

  .language-switcher-mobile span {
    font-weight: 500;
  }

  .mobile-language-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background-color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 90px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    padding: 4px 0;
  }

  .mobile-language-menu:not([hidden]) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .mobile-language-menu li {
    list-style: none;
    margin: 0;
  }

  .mobile-language-menu a {
    display: block;
    padding: 10px 16px;
    color: var(--color-navy);
    text-decoration: none;
    font-family: var(--font-family-sans-jp);
    font-size: var(--font-size-mobile-base);
    letter-spacing: var(--letter-spacing-normal);
    transition: background-color 0.2s ease;
  }

  .mobile-language-menu a:hover {
    background-color: var(--color-gray-bg);
  }

  .hamburger-menu {
    position: relative;
    width: var(--spacing-3);
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
  }

  .hamburger-menu span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--color-text-nav);
    transition: all 0.3s ease;
    border-radius: 1px;
  }

  .hamburger-menu span:nth-child(1) {
    top: 0;
  }

  .hamburger-menu span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
  }

  .hamburger-menu span:nth-child(3) {
    bottom: 0;
  }

  .hamburger-menu[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }

  .hamburger-menu[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .hamburger-menu[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }

  .mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow: hidden;
  }

  .mobile-drawer[aria-hidden="false"] {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
  }

  .mobile-drawer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(12, 25, 40, 0);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease;
  }

  .mobile-drawer[aria-hidden="false"] .mobile-drawer-overlay {
    background-color: rgba(12, 25, 40, 0.8);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .mobile-drawer-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100%;
    background-color: var(--color-navy);
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-bottom: 10px solid var(--color-navy-dark);
  }

  .mobile-drawer[aria-hidden="false"] .mobile-drawer-content {
    transform: translateX(0);
    opacity: 1;
  }

  .mobile-drawer-header {
    background-color: var(--color-navy-dark);
    height: 57.73px;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  .mobile-menu-title {
    font-family: var(--font-family-sans);
    font-size: 2rem;
    font-weight: 300;
    color: var(--color-text-on-navy);
    letter-spacing: 0.2em;
    margin: 0 0 40px 0;
    text-align: center;
  }

  .mobile-drawer-main {
    flex: 1;
    padding: 0 var(--spacing-4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  html[lang="ja"] header nav ul.mobile-nav-list,
  html[lang="en"] header nav ul.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 38px;
  }

  .mobile-nav-list li {
    margin: 0;
  }

  .mobile-nav-list li:nth-child(4) {
    margin-bottom: 35px;
  }

  .mobile-nav-list a {
    display: block;
    font-family: var(--font-family-serif-jp);
    font-size: 1.143rem;
    color: var(--color-text-on-navy);
    text-decoration: none;
    letter-spacing: var(--letter-spacing-wide);
    line-height: 1.5;
    padding: 0;
    transition: opacity 0.3s ease;
  }

  html[lang="en"] header nav a, header nav button {
    font-size: 1.143rem;
  }

  .mobile-nav-list li:last-child a {
    font-size: 0.929rem;
    border-bottom: var(--color-white) solid 0.5px;
    padding: 4px 3px 4px 6px;
  }

  .mobile-nav-list a:hover,
  .mobile-nav-list a:focus {
    opacity: 0.7;
  }

  .hamburger-menu:focus {
    outline: none;
  }

  .hamburger-menu:focus-visible,
  .mobile-nav-list a:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
  }

  /* ヒーローセクション */
  #hero {
    background-image: url('../images/FV-image-sp.webp');
    background-size: cover;
    background-position: center top;
    padding: 0 var(--spacing-4);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    margin-top: 56px;
  }

  #hero h1 {
    margin-bottom: var(--spacing-2);
  }

  #hero h1 img {
    width: 100%;
    height: auto;
  }

  #hero .hero-subtitle {
    margin-bottom: 0;
  }

  #hero .hero-subtitle img {
    width: 100%;
    height: auto;
  }

  /* Aboutセクション */
  .about-container {
    flex-direction: column;
  }

  .about-image,
  .about-content {
    width: 100%;
    flex: none;
  }

  .about-image {
    display: none;
  }

  .about-content {
    background-color: var(--color-navy);
    padding: var(--spacing-7) var(--spacing-4);
  }

  .about-content h2 {
    font-size: var(--font-size-mobile-heading);
    color: var(--color-white);
    margin-bottom: var(--spacing-4);
  }

  .about-content p {
    font-size: var(--font-size-mobile-base);
    color: var(--color-white);
    margin-bottom: var(--spacing-6);
  }

  .about-buttons {
    flex-direction: column;
    gap: var(--spacing-2);
    align-items: center;
  }

  .about-buttons .button {
    gap: var(--spacing-3);
  }

  .about-buttons .button:last-child {
    gap: var(--spacing-4);
  }

  .about-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  /* UNESCOセクション */
  .unesco-heritage {
    padding: var(--spacing-7) var(--spacing-4);
  }

  .unesco-heritage h3 {
    font-size: var(--font-size-mobile-heading);
    margin-bottom: var(--spacing-4);
    text-align: center;
  }

  .unesco-heritage p {
    font-size: var(--font-size-mobile-base);
    line-height: var(--line-height-body);
    text-align: center;
    margin-bottom: var(--spacing-4);
    max-width: none;
  }

  .unesco-heritage p:last-child {
    margin-bottom: 0;
  }

  /* SDGsセクション */
  .sdgs-contribution {
    padding: var(--spacing-7) var(--spacing-4);
  }

  .sdgs-contribution h3 {
    font-size: var(--font-size-mobile-heading);
    margin-bottom: var(--spacing-4);
    text-align: center;
  }

  .sdgs-contribution p {
    font-size: var(--font-size-mobile-base);
    line-height: var(--line-height-body);
    margin-bottom: var(--spacing-4);
    max-width: none;
  }

  .sdgs-contribution .footnotes p:last-child {
    margin-bottom: 1.429rem;
    ;
  }

  .sdgs-contribution .footnotes small {
    font-size: var(--font-size-mobile-annotation);
  }

  html[lang="en"] .sdgs-contribution .footnotes small,
  html[lang="en"] .sdgs-contribution .footnotes em {
    letter-spacing: 0.0175em;
  }

  .unesco-heritage br,
  .sdgs-contribution br {
    display: none;
  }

  /* Learnセクション */
  #learn {
    padding: var(--spacing-7) 0 0;
  }

  #learn>img {
    margin: 0 auto var(--spacing-2);
  }

  #learn h2 {
    margin-bottom: 2.5695rem;
    font-size: var(--font-size-mobile-heading);
  }

  /* Videoセクション */
  .video-section {
    padding: 2.5695rem 0 var(--spacing-4);
    margin-left: var(--spacing-2);
    margin-right: var(--spacing-2);
  }

  .section-header h3 {
    margin-bottom: 2.5695rem;
    font-size: var(--font-size-mobile-heading);
  }

  .splide {
    width: 100%;
    margin-left: 0;
    padding: 0;
    height: auto !important;
  }

  .splide__track {
    height: auto !important;
  }

  .splide__list {
    height: auto !important;
  }

  .splide__arrow {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    width: 40px;
    height: 48px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }

  .splide__arrow--prev {
    left: 0;
  }

  .splide__arrow--next {
    right: 0;
  }

  .splide__arrow svg {
    display: none;
  }

  .splide__arrow::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 1.5px solid var(--color-white);
    border-bottom: 1.5px solid var(--color-white);
    display: block;
  }

  .splide__arrow--prev::after {
    transform: rotate(135deg);
    margin-left: 1px;
  }

  .splide__arrow--next::after {
    transform: rotate(-45deg);
    margin-right: 1px;
  }

  .splide__slide {
    height: auto !important;
    width: 100%;
  }

  .splide__slide a {
    display: block;
    width: 100%;
    height: auto;
  }

  .video-thumbnail {
    position: relative;
    width: 90%;
    height: auto;
    aspect-ratio: 16/9;
    margin: 0 auto;
    overflow: hidden;
  }

  .video-thumbnail img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.571rem;
    height: 3.571rem;
  }

  .video-info {
    margin-top: var(--spacing-1);
    padding: 0 5%;
    height: 80px;
  }

  .video-info .video-title {
    margin-bottom: 0.7rem;
    margin-top: 0.3rem;
    line-height: 1.6;
    letter-spacing: var(--letter-spacing-normal);
    transition: opacity 0.3s ease;
    height: auto;
    font-size: var(--font-size-mobile-base);
  }

  .video-info .video-channel {
    line-height: 1.5;
    letter-spacing: var(--letter-spacing-normal);
    transition: opacity 0.3s ease;
    font-size: var(--font-size-mobile-base);
  }

  /* Brochureセクション */
  .brochure-section {
    padding-bottom: var(--spacing-7);
  }

  .brochure-thumbnail {
    width: 8.714rem;
    height: 11.571rem;
  }

  html[lang="en"] .koji-brochure .koji-description {
    max-width: 100%;
    text-align: left;
  }

  .brochure-info {
    margin-top: var(--spacing-4);
    text-align: center;
    width: 80vw;
  }

  .brochure-info .brochure-title {
    font-family: var(--font-family-serif-jp);
    font-size: var(--font-size-mobile-base);
    color: var(--color-navy);
    margin-bottom: 0.5rem;
    line-height: 1.4;
    letter-spacing: var(--letter-spacing-normal);
    transition: opacity 0.3s ease;
  }

  .brochure-info .brochure-description {
    font-family: var(--font-family-serif-jp);
    font-size: var(--font-size-mobile-base);
    color: var(--color-navy);
    line-height: 1.5;
    letter-spacing: var(--letter-spacing-normal);
    text-decoration: underline;
    text-underline-offset: 0.3em;
    transition: opacity 0.3s ease;
  }

  .brochure-info .brochure-description {
    line-height: 1.7;
  }


  /* フッター */
  footer {
    padding: var(--spacing-7) var(--spacing-4) 60px;
  }

  footer .footer-tagline {
    line-height: 1.5;
    margin-bottom: var(--spacing-7);
  }

  .footer-content {
    flex-direction: column;
    gap: var(--spacing-2);
    width: 100%
  }

  .footer-column {
    width: 100%;
    border-bottom: 0.5px solid var(--color-white);
    padding-bottom: 1.429rem;
  }

  .footer-column:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .footer-column h3 {
    margin-bottom: 0;
  }

  .footer-column>div {
    padding-bottom: 1.429rem;
    border-bottom: 0.5px solid var(--color-white);
    margin-bottom: var(--spacing-2);
  }

  .footer-column>div:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  .footer-column ul {
    margin-bottom: 0;
    margin-top: var(--spacing-1);
  }

  .footer-column li a {
    font-size: 0.9rem;
    line-height: 30px;
  }
}

/* ========================================
   レスポンシブデザイン（モバイル）
======================================== */
@media (max-width: 430px) {
  .mobile-br-430 {
    display: inline;
  }

  .koji-brochure .koji-description {
    max-width: 100%;
  }
}