/* Web Font Definitions */
@font-face {
  font-family: "Futura";
  src: url("../fonts/Book/Futura-Boo.woff") format("woff"),
       url("../fonts/Book/Futura-Boo.ttf") format("truetype"),
       url("../fonts/Book/Futura-Boo.svg") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Futura";
  src: url("../fonts/Book/Futura-Boo.woff") format("woff"),
       url("../fonts/Book/Futura-Boo.ttf") format("truetype"),
       url("../fonts/Book/Futura-Boo.svg") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Futura";
  src: url("../fonts/Bold/Futura-Bol.woff") format("woff"),
       url("../fonts/Bold/Futura-Bol.ttf") format("truetype"),
       url("../fonts/Bold/Futura-Bol.svg") format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Base reset and utilities */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Base Colors - Figma対応 */
  --base-100: #000000;
  --base-90: #1A1A1A;
  --base-80: #333333;
  --base-70: #4D4D4D;
  --base-60: #666666;
  --base-50: #808080;
  --base-40: #999999;
  --base-30: #B3B3B3;
  --base-20: #CCCCCC;
  --base-10: #E6E6E6;
  --base-0: #FFFFFF;

  /* Primary Colors - Figma対応 */
  --primary-90: #00160C;
  --primary-80: #003300;
  --primary-70: #004225; /* primary/70-brand */
  --primary-60: #246135;
  --primary-50: #497F49;
  --primary-40: #6E9B6D;
  --primary-30: #9BB692;
  --primary-20: #C4D0B6;
  --primary-10: #E6E8DB;

  /* Secondary Colors */
  --secondary-90: #401900;
  --secondary-80: #803500;
  --secondary-70: #BF5300;
  --secondary-60: #F17319;
  --secondary-50: #FF8830;
  --secondary-40: #FF9E55;
  --secondary-30: #FFB580;
  --secondary-20: #FFCCAA;
  --secondary-10: #FFE5D5;

  /* Lesson Colors */
  --lesson-beginner: #bfd60f; /* 初心者コース */
  --lesson-regular: #42c9ae; /* 一般コース */
  --lesson-round: #9BA2E8; /* ラウンドレッスン */

  /* Typography Variables - Font Sizes (rem) */
  --text-10: 0.625rem; /* 10px */
  --text-12: 0.75rem; /* 12px */
  --text-14: 0.875rem; /* 14px */
  --text-16: 1rem; /* 16px */
  --text-18: 1.125rem; /* 18px */
  --text-20: 1.25rem; /* 20px */
  --text-24: 1.5rem; /* 24px */
  --text-28: 1.75rem; /* 28px */
  --text-32: 2rem; /* 32px */
  --text-36: 2.25rem; /* 36px */
  --text-40: 2.5rem; /* 40px */
  --text-44: 2.75rem; /* 44px */
  --text-48: 3rem; /* 48px */
  --text-64: 4rem; /* 64px */
  --text-100: 6.25rem; /* 100px */

  /* Typography Variables - Font Weights (Figma変換ルール適用) */
  --font-regular: 400;
  --font-semibold: 600; /* Figma Bold(700) → CSS semibold(600) */
  --font-bold: 700;

  /* Typography Variables - Letter Spacing */
  --tracking-ja: 0.01em; /* 1% for Japanese text */
  --tracking-en: 0.04em; /* 4% for English text */

  /* Layout Variables */
  --max-width-content: 960px; /* Maximum width for content sections */

  /* Typography Variables - Line Heights */
  --leading-100: 1; /* 100% */
  --leading-150: 1.5; /* 150% */
  --leading-180: 1.8; /* 180% */
  --leading-200: 2; /* 200% */

  /* Layout Variables */
  --container-padding-sp: 24px;
  --container-padding-pc: 48px;
  --section-gap: 48px;
  --component-gap: 16px;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--base-0);
  color: var(--base-100);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: 64px; /* SP header height */
}

/* Text Selection Styles */
::selection {
  background-color: var(--primary-70);
  color: var(--base-0);
}

::-moz-selection {
  background-color: var(--primary-70);
  color: var(--base-0);
}

/* ========================================
   Yotsuike Design System - Typography Classes
   ======================================== */

/* Japanese Text - Head (line-height: 100%) */
.text-ja-head-44-b { font-size: var(--text-44); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-44-r { font-size: var(--text-44); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-36-b { font-size: var(--text-36); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-36-r { font-size: var(--text-36); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-40-b { font-size: var(--text-40); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-40-r { font-size: var(--text-40); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-32-b { font-size: var(--text-32); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-32-r { font-size: var(--text-32); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-28-b { font-size: var(--text-28); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-28-r { font-size: var(--text-28); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-24-b { font-size: var(--text-24); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-24-r { font-size: var(--text-24); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-20-b { font-size: var(--text-20); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-20-r { font-size: var(--text-20); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-18-b { font-size: var(--text-18); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); color: var(--base-0); }
.text-ja-head-18-r { font-size: var(--text-18); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-16-b { font-size: var(--text-16); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-16-r { font-size: var(--text-16); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); color: var(--base-0); }
.text-ja-head-14-b { font-size: var(--text-14); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-14-r { font-size: var(--text-14); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-12-b { font-size: var(--text-12); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-12-r { font-size: var(--text-12); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-10-b { font-size: var(--text-10); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); }
.text-ja-head-10-r { font-size: var(--text-10); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-100); color: var(--base-0); }

/* Japanese Text - Body 150% */
.text-ja-body150-44-b { font-size: var(--text-44); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); }
.text-ja-body150-44-r { font-size: var(--text-44); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); }
.text-ja-body150-32-b { font-size: var(--text-32); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); }
.text-ja-body150-28-b { font-size: var(--text-28); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); }
.text-ja-body150-28-r { font-size: var(--text-28); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); }
.text-ja-body150-24-b { font-size: var(--text-24); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); }
.text-ja-body150-20-b { font-size: var(--text-20); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); }
.text-ja-body150-20-r { font-size: var(--text-20); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); }
.text-ja-body150-18-b { font-size: var(--text-18); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); }
.text-ja-body150-18-r { font-size: var(--text-18); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); }
.text-ja-body150-16-b { font-size: var(--text-16); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); }
.text-ja-body150-16-r { font-size: var(--text-16); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); }
.text-ja-body150-14-b { font-size: var(--text-14); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); }
.text-ja-body150-14-r { font-size: var(--text-14); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); }
.text-ja-body150-12-b { font-size: var(--text-12); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); }
.text-ja-body150-12-r { font-size: var(--text-12); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); color: var(--base-0); }
.text-ja-body150-10-b { font-size: var(--text-10); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); color: var(--base-0); text-align: center; }
.text-ja-body150-10-r { font-size: var(--text-10); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-150); }

/* Japanese Text - Body 180% */
.text-ja-body180-16-b { font-size: var(--text-16); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-180); }
.text-ja-body180-14-r { font-size: var(--text-14); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-180); }
.text-ja-body180-12-b { font-size: var(--text-12); font-weight: var(--font-semibold); letter-spacing: var(--tracking-ja); line-height: var(--leading-180); }
.text-ja-body180-12-r { font-size: var(--text-12); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-180); color: var(--primary-30); }

/* Japanese Text - Article */
.text-ja-article { font-size: var(--text-16); font-weight: var(--font-regular); letter-spacing: var(--tracking-ja); line-height: var(--leading-200); }

/* English Text (Futura) - Display 100% */
.text-en-display-100-r { font-family: "Helvetica Neue", "Arial", sans-serif; font-size: var(--text-100); font-weight: 300; letter-spacing: var(--tracking-en); line-height: 0.9; }
.text-en-display-64-b { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-64); font-weight: var(--font-semibold); letter-spacing: var(--tracking-en); line-height: var(--leading-100); }
.text-en-display-64-r { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-64); font-weight: var(--font-regular); letter-spacing: var(--tracking-en); line-height: var(--leading-100); }
.text-en-display-48-b { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-48); font-weight: var(--font-semibold); letter-spacing: var(--tracking-en); line-height: var(--leading-100); }
.text-en-display-48-r { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-48); font-weight: var(--font-regular); letter-spacing: var(--tracking-en); line-height: var(--leading-100); }
.text-en-display-40-b { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-40); font-weight: var(--font-semibold); letter-spacing: var(--tracking-en); line-height: var(--leading-100); }
.text-en-display-40-r { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-40); font-weight: var(--font-regular); letter-spacing: var(--tracking-en); line-height: var(--leading-100); }
.text-en-display-36-b { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-36); font-weight: var(--font-semibold); letter-spacing: var(--tracking-en); line-height: var(--leading-100); }
.text-en-display-36-r { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-36); font-weight: var(--font-regular); letter-spacing: var(--tracking-en); line-height: var(--leading-100); }
.text-en-display-32-b { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-32); font-weight: var(--font-semibold); letter-spacing: var(--tracking-en); line-height: var(--leading-100); }
.text-en-display-32-r { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-32); font-weight: var(--font-regular); letter-spacing: var(--tracking-en); line-height: var(--leading-100); }
.text-en-display-20-b { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-20); font-weight: var(--font-semibold); letter-spacing: var(--tracking-en); line-height: var(--leading-100); }
.text-en-display-20-r { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-20); font-weight: var(--font-regular); letter-spacing: var(--tracking-en); line-height: var(--leading-100); color: var(--base-0); }
.text-en-display-24-b { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-24); font-weight: var(--font-semibold); letter-spacing: var(--tracking-en); line-height: var(--leading-100); }
.text-en-display-24-r { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-24); font-weight: var(--font-regular); letter-spacing: var(--tracking-en); line-height: var(--leading-100); color: var(--base-0); }
.text-en-display-28-b { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-28); font-weight: var(--font-semibold); letter-spacing: var(--tracking-en); line-height: var(--leading-100); }
.text-en-display-28-r { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-28); font-weight: var(--font-regular); letter-spacing: var(--tracking-en); line-height: var(--leading-100); color: var(--base-0); }
.text-en-display-16-b { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-16); font-weight: var(--font-semibold); letter-spacing: var(--tracking-en); line-height: var(--leading-100); }
.text-en-display-16-r { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-16); font-weight: var(--font-regular); letter-spacing: var(--tracking-en); line-height: var(--leading-100); color: var(--base-0); text-align: right; }
.text-en-display-14-b { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-14); font-weight: var(--font-semibold); letter-spacing: var(--tracking-en); line-height: var(--leading-100); }
.text-en-display-14-r { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-14); font-weight: var(--font-regular); letter-spacing: var(--tracking-en); line-height: var(--leading-100); color: var(--primary-30); }
.text-en-display-12-b { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-12); font-weight: var(--font-semibold); letter-spacing: var(--tracking-en); line-height: var(--leading-100); }
.text-en-display-12-r { font-family: "Futura", "Arial", sans-serif; font-size: var(--text-12); font-weight: var(--font-regular); letter-spacing: var(--tracking-en); line-height: var(--leading-100); color: var(--primary-60); }

/* ========================================
   Banner Components
   ======================================== */

.c-banner {
  padding: 24px;
  border-bottom: 1px solid var(--primary-10);
  background-color: var(--base-0);
  max-width: 960px;
  margin: 0 auto;
}



.c-banner__img {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ========================================
   Button Components
   ======================================== */

.c-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.c-btn--primary {
  background-color: var(--secondary-60);
  color: var(--base-0);
}

.c-btn--primary:hover {
  background-color: var(--secondary-40);
}

.c-btn--primary .c-btn__text {
  border-bottom: none;
  padding-bottom: 0;
  text-align: left;
}

.c-btn--outline {
  background-color: transparent;
  border: 1px solid var(--primary-20);
  color: var(--primary-70);
}

.c-btn--outline:hover {
  background-color: var(--primary-20);
}

.c-btn--no-border {
  border: none;
  padding: 0;
  color: var(--primary-70) !important;
}

.c-btn--no-border:hover {
  background-color: transparent;
}

.c-btn--no-border .c-btn__icon {
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.c-btn--no-border:hover .c-btn__icon {
  opacity: 1;
}

.c-btn--no-border .c-btn__text {
  color: var(--primary-70);
}

.c-btn--no-border:hover .c-btn__text {
  border-bottom-color: var(--primary-70);
}

.c-btn--voice {
  color: var(--base-0) !important;
}

.c-btn--voice .c-btn__text {
  color: var(--base-0);
  border-bottom-color: var(--primary-50);
}

.c-btn--voice:hover .c-btn__text {
  border-bottom-color: var(--base-0);
}

.c-btn--large {
  padding: 16px 24px;
  width: 240px;
  justify-content: center;
}

.c-btn__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.c-btn__icon-img {
  width: 40px;
  height: 40px;
}

.c-btn__icon-img--arrow {
  width: 24px;
  height: 24px;
}

.c-btn__text {
  flex: 1;
  border-bottom: 1px solid var(--primary-20);
  padding-bottom: 12px;
  transition: border-bottom-color 0.3s ease;
}

/* ========================================
   Instagram CTA Component
   ======================================== */

.c-instagram-cta {
  background-color: var(--secondary-60);
  border-radius: 4px;
  padding: 16px;
  margin-top: 24px;
  transition: background-color 0.3s ease;
  text-decoration: none;
  display: block;
  width: calc(100% - 24px);
  max-width: 360px;
}



.c-instagram-cta:hover {
  background-color: var(--secondary-40);
}

.c-instagram-cta__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.c-instagram-cta__icon {
  width: 24px;
  height: 24px;
}

.c-instagram-cta__text {
  color: var(--base-0);
}

/* ========================================
   Layout Components
   ======================================== */

/* Header */
.l-header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.l-header.l-header--hidden {
  transform: translateY(-100%) !important;
}

.l-header--sp {
  height: 64px;
  display: flex;
  background-color: var(--base-0);
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--container-padding-sp);
  height: 100%;
  width: 100%;
}

.l-header__logo {
  flex: 1;
  height: 40px;
}

.l-header__logo-img {
  height: 100%;
  width: auto;
  display: block;
}

/* Footer */
.l-footer {
  width: 100%;
  background: var(--primary-90);
}



.l-footer__address-section {
  background: var(--primary-80);
  padding: var(--section-gap) 0;
}



.l-footer__contact-section {
  padding: var(--section-gap) 0 120px 0;
  background: var(--primary-90);
}



.l-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  padding: 0 var(--container-padding-sp);
}

.l-footer__left-column {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.l-footer__logo {
  display: flex;
  justify-content: flex-start;
}

.l-footer__logo-img {
  width: 64px;
  height: 64px;
  display: block;
}

.l-footer__copyright {
  margin: 40px 0 0;
  padding: 0 24px;
}

.l-footer__copyright-text {
  text-align: left;
}

/* ========================================
   Component Styles
   ======================================== */

/* Menu Button */
.c-menu-button {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.c-menu-button__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}

.c-menu-button__icon-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.c-menu-button--sp {
  display: flex;
}

.c-menu-button--pc {
  display: none;
}

/* Social Link */
.c-social-link {
  display: flex;
  align-items: center;
  gap: var(--component-gap);
  margin-bottom: 0;
}

.c-social-link__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.c-social-link__icon-img {
  width: 100%;
  height: 100%;
  display: block;
}

.c-social-link__text {
  flex-shrink: 0;
}

/* Location Links */
.c-location-links {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
}

.c-location-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px var(--component-gap);
  background: var(--primary-70);
  height: 48px;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease;
}

.c-location-link:hover {
  background: var(--primary-60);
}

.c-location-link__text {
  color: var(--base-0);
}

.c-location-link__subtext {
  flex: 1;
}

.c-location-link__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-location-link__icon-img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Address Info */
.c-address-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Phone List */
.c-phone-list {
  display: flex;
  width: 100%;
  border: 1px solid var(--primary-70);
  border-radius: 8px;
  overflow: hidden;
}

.c-phone-list__label {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-70);
  width: 40px;
  min-height: 80px;
  padding: 8px;
  flex-shrink: 0;
  color: var(--base-0);
}

.c-phone-list__items {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 8px 24px;
}

.c-phone-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--primary-80);
}

.c-phone-item:last-child {
  border-bottom: none;
}

.c-phone-item__label {
  flex-shrink: 0;
}

.c-phone-item__number {
  flex: 1;
}

/* Footer Navigation */
.c-footer-nav {
  padding: 0;
  width: 100%;
}

.c-footer-nav__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.c-footer-nav__menu-group {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.c-footer-nav__menu-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--primary-90);
  border-top: 1px solid var(--primary-80);
}

.c-footer-nav__menu-group > .c-footer-nav__menu-item:last-child {
  border-bottom: 1px solid var(--primary-80);
}

.c-footer-nav__menu-item--has-submenu {
  padding-bottom: 0;
  margin-bottom: 0;
}

.c-footer-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 16px;
  box-sizing: border-box;
  text-decoration: none;
  color: var(--base-0);
  font-family: 'Noto Sans JP', sans-serif;
  white-space: nowrap;
  transition: color 0.2s ease;
  gap: 8px;
}

.c-footer-nav__link--main {
  height: 48px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.16px;
}

.c-footer-nav__link--sub {
  height: 40px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.12px;
}

.c-footer-nav__link-text {
  flex: 1;
  min-width: 0;
}

.c-footer-nav__link-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  opacity: 1;
}

.c-footer-nav__submenu {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 0;
}

.c-footer-nav__submenu .c-footer-nav__link {
  border-bottom: none;
}

.c-footer-nav__submenu .c-footer-nav__link:not(:last-child) {
  border-bottom: none;
}

/* Override text color classes inside footer nav */
.c-footer-nav .text-ja-head-16-r,
.c-footer-nav .text-ja-head-12-r,
.c-footer-nav__link .text-ja-head-16-r,
.c-footer-nav__link .text-ja-head-12-r {
  color: var(--base-0) !important;
}

.c-footer-nav__link:hover,
.c-footer-nav__link:focus {
  color: var(--primary-40);
}

.c-footer-nav__link:hover .c-footer-nav__link-text,
.c-footer-nav__link:focus .c-footer-nav__link-text {
  color: var(--primary-40);
}

.c-footer-nav__link:hover .text-ja-head-16-r,
.c-footer-nav__link:focus .text-ja-head-16-r,
.c-footer-nav__link:hover .text-ja-head-12-r,
.c-footer-nav__link:focus .text-ja-head-12-r {
  color: var(--primary-40);
}

.c-footer-nav__link:hover .c-footer-nav__link-arrow,
.c-footer-nav__link:focus .c-footer-nav__link-arrow {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(58%) sepia(8%) saturate(1200%) hue-rotate(58deg) brightness(95%) contrast(90%);
}

/* ========================================
   Mobile Menu Components
   ======================================== */

/* Mobile Menu Styles - Figma Design */
.c-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--base-0);
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  display: flex;
  flex-direction: column;
}

.c-mobile-menu.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile Menu Header */
.c-mobile-menu__header {
  height: 64px;
  background: var(--base-0);
}

.c-mobile-menu__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  height: 100%;
  width: 100%;
}

.c-mobile-menu__logo {
  height: 40px;
  flex: 1;
}

.c-mobile-menu__logo a,
.l-header__logo a {
  display: inline-block;
  height: 100%;
}

.c-mobile-menu__logo a::selection,
.l-header__logo a::selection,
.c-menu-button::selection,
.c-mobile-menu__close::selection {
  background: inherit;
  color: inherit;
}

.c-mobile-menu__logo-img {
  height: 100%;
  width: auto;
  display: block;
  max-width: 100%;
  object-fit: contain;
}

.c-mobile-menu__close {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.c-mobile-menu__close-img {
  width: 40px;
  height: 40px;
}


/* Mobile Menu Navigation */
.c-mobile-menu__nav {
  width: 100%;
  background-color: var(--primary-10);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.c-mobile-menu__nav-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 8px 120px 8px;
}

.c-mobile-menu__menu-group {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.c-mobile-menu__menu-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--base-0);
}

.c-mobile-menu__menu-item--has-submenu {
  padding-bottom: 0;
  margin-bottom: 0;
}

.c-mobile-menu__menu-item--has-submenu:not(:first-child) {
  margin-top: 1px;
}

.c-mobile-menu__menu-item:not(.c-mobile-menu__menu-item--has-submenu):not(:first-child) {
  margin-top: 1px;
}


.c-mobile-menu__menu-item--has-submenu .c-mobile-menu__link--main {
  border-bottom: none;
}

.c-mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 16px;
  box-sizing: border-box;
  text-decoration: none;
  color: var(--primary-70);
  font-family: 'Noto Sans JP', sans-serif;
  white-space: nowrap;
  transition: color 0.2s ease;
  gap: 8px;
}

.c-mobile-menu__link--main {
  height: 48px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.16px;
}

.c-mobile-menu__link--sub {
  height: 40px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.12px;
}

.c-mobile-menu__link-text {
  flex: 1;
  min-width: 0;
}

.c-mobile-menu__link-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  opacity: 1;
}

.c-mobile-menu__submenu {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 0;
}

.c-mobile-menu__submenu .c-mobile-menu__link {
  border-bottom: none;
}

.c-mobile-menu__submenu .c-mobile-menu__link:not(:last-child) {
  border-bottom: none;
}

/* Override text color classes inside mobile menu */
.c-mobile-menu__nav .text-ja-head-16-r,
.c-mobile-menu__nav .text-ja-head-12-r,
.c-mobile-menu__link .text-ja-head-16-r,
.c-mobile-menu__link .text-ja-head-12-r {
  color: var(--primary-70) !important;
}

.c-mobile-menu__link:hover,
.c-mobile-menu__link:focus {
  color: var(--primary-40);
}

.c-mobile-menu__link:hover .c-mobile-menu__link-text,
.c-mobile-menu__link:focus .c-mobile-menu__link-text {
  color: var(--primary-40);
}

.c-mobile-menu__link:hover .text-ja-head-16-r,
.c-mobile-menu__link:focus .text-ja-head-16-r,
.c-mobile-menu__link:hover .text-ja-head-12-r,
.c-mobile-menu__link:focus .text-ja-head-12-r {
  color: var(--primary-40);
}

.c-mobile-menu__link:hover .c-mobile-menu__link-arrow,
.c-mobile-menu__link:focus .c-mobile-menu__link-arrow {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(58%) sepia(8%) saturate(1200%) hue-rotate(58deg) brightness(95%) contrast(90%);
}


/* Menu Button Active State */
.c-menu-button--active {
  /* Styles for active menu button state */
}


/* ========================================
   PC Header Navigation
   ======================================== */

/* PC Header Styles */
.l-header--pc {
  height: 96px;
  display: none;
}

.l-header--pc .l-header__inner {
  padding: 0 64px;
  gap: 16px;
  justify-content: space-between;
}



.l-header--pc .l-header__logo {
  height: 60px;
  flex: 1;
}


/* ========================================
   Responsive Header Display
   ======================================== */



/* ========================================
   Utility Classes
   ======================================== */

/* Visually hidden but accessible to screen readers */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* 404 Error Page Styles */
.error-404 {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-404__inner {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.error-404__content {
  text-align: center;
}

.error-404__title {
  font-size: var(--text-24);
  font-weight: var(--font-bold);
  color: var(--base-100);
  margin-bottom: 20px;
  line-height: 1.5;
}

.error-404__message {
  font-size: var(--text-14);
  font-weight: var(--font-regular);
  color: var(--base-70);
  line-height: 1.8;
  margin: 0;
}

@media (min-width: 960px) {
  .error-404__title {
    font-size: var(--text-32);
    margin-bottom: 24px;
  }

  .error-404__message {
    font-size: var(--text-16);
  }
}

/* ========================================
   Pagination Styles
   ======================================== */

.pagination,
.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin: 40px 0;
  padding: 0 24px;
}

.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 8px 12px;
  background-color: var(--base-0);
  color: var(--primary-70);
  border: 1px solid var(--primary-20);
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--text-14);
  font-weight: var(--font-regular);
  letter-spacing: var(--tracking-ja);
  line-height: 1;
  transition: all 0.2s ease;
  cursor: pointer;
}

.page-numbers:hover {
  background-color: var(--primary-10);
  border-color: var(--primary-20);
  color: var(--primary-70);
}

.page-numbers.current {
  background-color: var(--primary-70);
  color: var(--base-0);
  border-color: var(--primary-70);
  cursor: default;
}

.page-numbers.current:hover {
  background-color: var(--primary-70);
  border-color: var(--primary-70);
  color: var(--base-0);
}

.page-numbers.dots,
.page-numbers.dots:hover {
  background-color: transparent;
  border: none;
  color: var(--primary-70);
  cursor: default;
}

.page-numbers.prev,
.page-numbers.next {
  padding: 8px 16px;
}

.page-numbers.prev:hover,
.page-numbers.next:hover {
  background-color: var(--primary-10);
  border-color: var(--primary-20);
}

@media (min-width: 960px) {
  .pagination,
  .nav-links {
    padding: 0;
    margin: 48px 0;
  }

  .page-numbers {
    min-width: 44px;
    height: 44px;
    padding: 10px 14px;
  }
}