/* reset.css */
/* CSS Reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 140%;
  line-height: var(--line-height-normal);
  overflow-wrap: break-word;
}

/* stylelint-disable selector-id-pattern */
#root,
#__next {
  isolation: isolate;
}
/* stylelint-enable selector-id-pattern */

/* Remove default button styles */
button {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* Remove default list styles */
ul,
ol {
  list-style: none;
}

/* Remove default link styles */
a {
  color: inherit;
  text-decoration: none;
}

summary {
  -webkit-user-select: none;
  user-select: none;
}

/* global.css */
/* Global Styles */

:root {
  /* ========================================
     Font Families
     ======================================== */

  --font-family-en: "Figtree", system-ui, -apple-system, "Segoe UI", roboto, arial, sans-serif;
  --font-family-ja: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;

  /* ========================================
     Colors
     ======================================== */

  /* Base Colors */
  --color-white: #fff;
  --color-black: #262522;

  /* Brand Colors */
  --color-primary: #00c4bf;
  --color-secondary: #f28500;
  --color-secondary-hover: #e35300;
  --color-blue: #3189a7;
  --color-primary-hover: #00a8a8;

  /* Accent Colors */
  --color-accent-yellow: #ffe55f;
  --color-accent-yellow-light: #ffd115;
  --color-orange-light: #ffb921;

  /* Background Colors */
  --color-cream: #fffbd2;
  --color-cream-light: #fff5c4;

  /* Text Colors */
  --color-text-gray: #6b6b68;
  --color-text-brown: #695b32;
  --color-text-light: #91918d;

  /* Border Colors */
  --color-border-light: #ecede6;
  --color-border-gray: #d6d6d0;
  --color-border-medium: #dbdbdb;
  --color-border-neutral: #c0c1bb;

  /* Gray Scale */
  --color-gray-dark: #1b1b1b;
  --color-gray: #838383;
  --color-gray-light: #e3e3e3;
  --color-gray-lighter: #d9d9d9;
  --color-gray-darker: #595757;
  --color-gray-lightest: #cfcfcf;

  /* Amber */
  --color-amber: #ffae00;
  --color-amber-dark: #b07705;

  /* ========================================
     Spacing (for margin and padding)
     ======================================== */
  --spacing-0: 0;
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-7: 1.75rem; /* 28px */
  --spacing-8: 2rem; /* 32px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-12: 3rem; /* 48px */
  --spacing-14: 3.5rem; /* 56px */
  --spacing-18: 4.5rem; /* 72px */

  /* ========================================
     Size (for width and height)
     ======================================== */
  --size-4: 0.25rem; /* 4px */
  --size-6: 0.375rem; /* 6px */
  --size-10: 0.625rem; /* 10px */
  --size-12: 0.75rem; /* 12px */
  --size-14: 0.875rem; /* 14px */
  --size-16: 1rem; /* 16px */
  --size-17: 1.0625rem; /* 17px */
  --size-18: 1.125rem; /* 18px */
  --size-20: 1.25rem; /* 20px */
  --size-22: 1.375rem; /* 22px */
  --size-24: 1.5rem; /* 24px */
  --size-25: 1.5625rem; /* 25px */
  --size-26: 1.625rem; /* 26px */
  --size-30: 1.875rem; /* 30px */
  --size-32: 2rem; /* 32px */
  --size-36: 2.25rem; /* 36px */
  --size-40: 2.5rem; /* 40px */
  --size-46: 2.875rem; /* 46px */
  --size-48: 3rem; /* 48px */
  --size-60: 3.75rem; /* 60px */
  --size-70: 4.375rem; /* 70px */
  --size-72: 4.5rem; /* 72px */
  --size-80: 5rem; /* 80px */
  --size-104: 6.5rem; /* 104px */
  --size-168: 10.5rem; /* 168px */
  --size-200: 12.5rem; /* 200px */
  --size-300: 18.75rem; /* 300px */
  --size-320: 20rem; /* 320px */
  --size-480: 30rem; /* 480px */

  /* ========================================
     Max Widths (for containers)
     ======================================== */
  --max-width-sm: 492px;
  --max-width-md: 640px;
  --max-width-lg: 854px;
  --max-width-xl: 960px;
  --max-width-2xl: 1008px;
  --max-width-3xl: 1066px;
  --max-width-4xl: 1360px;

  /* ========================================
     Border Radius
     ======================================== */
  --radius-none: 0;
  --radius-sm: 0.375rem; /* 6px */
  --radius-md: 0.75rem; /* 12px */
  --radius-lg: 3rem; /* 48px */
  --radius-full: 50vh;

  /* ========================================
     Font Weights
     ======================================== */
  --font-weight-normal: 500;
  --font-weight-bold: 700;

  /* ========================================
     Line Heights
     ======================================== */
  --line-height-none: 100%;
  --line-height-tight: 125%;
  --line-height-normal: 140%;
  --line-height-relaxed: 175%;

  /* ========================================
     Shadows
     ======================================== */
  --shadow-sm: 0 0.3125rem 1rem rgb(74 31 6 / 5%); /* 0px 5px 16px */
  --shadow-lg: 0 5px 20px rgb(0 0 0 / 15%); /* 0px 10px 40px */

  /* ========================================
     Focus Styles
     ======================================== */
  --focus-ring-width: 0.125rem; /* 2px */
  --focus-ring-offset: 0.125rem; /* 2px */
  --focus-ring-color: var(--color-primary);

  /* ========================================
     Transitions
     ======================================== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}

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

body {
  display: flex;
  flex-direction: column;
  color: #262522;
  color: var(--color-black);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-family: var(--font-family-ja);
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
  font-weight: var(--font-weight-normal);
  line-height: 140%;
  line-height: var(--line-height-normal);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Skip to main content link for keyboard navigation */
.skip-link {
  position: absolute;
  z-index: 1000;
  top: -100px;
  left: 0;
  padding: 0.5rem;
  padding: var(--spacing-2);
  border-radius: 0 0 0.375rem 0;
  border-radius: 0 0 var(--radius-sm) 0;
  background: #00c4bf;
  background: var(--color-primary);
  color: #fff;
  color: var(--color-white);
  font-size: 0.875rem;
  font-size: var(--size-14);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.skip-link:focus {
  top: 70px;
}
@media (max-width: 1174px) {
  .skip-link:focus {
    top: 56px;
  }
}

.main {
  width: 100%;
  flex: 1;
  padding-top: 70px;
}

@media (max-width: 1174px) {
  .main {
    padding-top: 56px;
  }
}

.container {
  max-width: 85rem; /* 1360px */
  padding: 2.5rem;
  padding: var(--spacing-10);
  margin: 0 auto;
}

.container h1 {
  margin-bottom: 1.5rem;
  margin-bottom: var(--spacing-6);
  color: #262522;
  color: var(--color-black);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-family: var(--font-family-ja);
  font-size: 2.25rem; /* 36px */
  font-weight: 700;
}

.container p {
  color: #6b6b68;
  color: var(--color-text-gray);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-family: var(--font-family-ja);
  font-size: 1rem; /* 16px */
  line-height: 1.75;
}

button,
a,
[role="button"] {
  touch-action: manipulation;
}

/* Layout-transparent wrapper for grouping anchor children */
.anchor-content {
  display: contents;
}

/* button.css */
/**
 * Button Component Styles with CSS Nesting
 * 共通のボタンスタイル - headerとfooterで使用されているボタンをコンポーネント化
 */

/* ========================================
   Base Button Styles
   ======================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  padding: var(--spacing-2) var(--spacing-3);
  border: none;
  border-radius: 50vh;
  border-radius: var(--radius-full);
  color: #fff;
  color: var(--color-white);
  cursor: pointer;
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-family: var(--font-family-ja);
  font-size: 14px;
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  gap: 0.5rem;
  gap: var(--spacing-2);
  line-height: 125%;
  line-height: var(--line-height-tight);
  text-align: center;
  text-decoration: none;
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
}

.btn__content {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--spacing-2);
}

/* ========================================
   Primary Button (塗りつぶしボタン)
   headerのログインボタンスタイル
   ======================================== */

.btn--primary {
  min-width: 144px;
  height: 2.5rem;
  height: var(--size-40);
  padding: 0 1rem;
  padding: 0 var(--spacing-4);
  background: #00c4bf;
  background: var(--color-primary);
  color: #fff;
  color: var(--color-white);
}

@media (max-width: 960px) {
  .btn--primary {
    min-width: 120px;
    height: 36px;
    font-size: 13px;
  }
}

.btn--primary:hover {
  background-color: #00a8a8;
  background-color: var(--color-primary-hover);
}

.btn--primary:active {
  opacity: 0.8;
}

/* ========================================
   Outline Button (枠線ボタン)
   footerのお問い合わせボタンスタイル
   ======================================== */

.btn--outline {
  min-width: 200px;
  height: 2.875rem;
  height: var(--size-46);
  padding: 0 1.5rem;
  padding: 0 var(--spacing-6);
  border: 2px solid #f28500;
  border: 2px solid var(--color-secondary);
  background: #fff;
  background: var(--color-white);
  color: #f28500;
  color: var(--color-secondary);
}

@media (max-width: 374.98px) {
  .btn--outline {
    min-width: 100% !important;
    min-height: fit-content !important;
    padding: 0.25rem 2.5rem !important;
    padding: var(--spacing-1) var(--spacing-10) !important;
  }
}

.btn--outline:hover {
  border-color: #e35300;
  border-color: var(--color-secondary-hover);
  background: #fffbd2;
  background: var(--color-cream);
  color: #e35300;
  color: var(--color-secondary-hover);
  transition: all 0.2s ease;
}

.btn--outline:hover .btn__icon {
  color: #e35300;
  color: var(--color-secondary-hover);
  transition: color 0.2s ease;
}

/* ========================================
   Text Button (テキストボタン)
   枠線なし、テキストのみ
   ======================================== */

.btn--text {
  height: 2.875rem;
  height: var(--size-46);
  padding: 0 1rem;
  padding: 0 var(--spacing-4);
  border: none;
  background: transparent;
  color: #f28500;
  color: var(--color-secondary);
}

.btn--text .btn__icon {
  position: static;
  flex-shrink: 0;
}

.btn--text:hover {
  color: #e35300;
  color: var(--color-secondary-hover);
}

.btn--text:hover .btn__icon {
  color: #e35300;
  color: var(--color-secondary-hover);
}

/* ========================================
   Button Icon
   ======================================== */

.btn__icon {
  position: absolute;
  right: 0.75rem;
  right: var(--spacing-3);
  width: 1rem;
  width: var(--size-16);
  height: 1rem;
  height: var(--size-16);
  flex-shrink: 0;
  transition: filter 150ms ease-in-out;
  transition: filter var(--transition-fast);
}

/* header.css */
/* Header Styles with CSS Nesting */

.header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid #ecede6;
  border-bottom: 1px solid var(--color-border-light);
  background: #fff;
  background: var(--color-white);
  transition:
    transform 350ms ease-in-out,
    box-shadow 350ms ease-in-out,
    background-color 350ms ease-in-out;
  transition:
    transform var(--transition-slow),
    box-shadow var(--transition-slow),
    background-color var(--transition-slow);
}

@media (prefers-reduced-motion: reduce) {
  .header {
    transition: none;
  }
}

.header.header--hidden {
  pointer-events: none;
  transform: translateY(-100%);
}

@media (max-width: 1174px) {
  .header {
    z-index: 1500;
    border-bottom: none;
    isolation: isolate;
    will-change: auto;
  }

  .is-menu-open .header {
    transition: none;
  }

  .is-menu-open .header.header--fixed,
  .is-menu-open .header.header--hidden {
    box-shadow: none;
    transform: none;
  }
}

.header__body-pc {
  display: flex;
  width: 100%;
  max-width: 1360px;
  height: 4.375rem;
  height: var(--size-70);
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  padding: 0 var(--spacing-10);
  margin: 0 auto;
}

@media (max-width: 1310px) {
  .header__body-pc {
  }
  .header__body-pc .btn--primary {
    min-width: 112px;
  }
}

@media (max-width: 1174px) {
  .header__body-pc {
    display: none;
  }
}

/* Logo */
.header__logo {
  display: block;
  width: 148px;
  height: 26px;
  padding: 0;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.header__logo a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.header__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Wrapper */
.header__wrapper {
  display: flex;
  height: 4.375rem;
  height: var(--size-70);
  align-items: center;
  gap: 0.75rem;
  gap: var(--spacing-3);
}

/* Navigation */
.header__nav {
  display: flex;
  align-items: center;
}

.header__arrange {
  display: flex;
  height: 4.375rem;
  height: var(--size-70);
  align-items: center;
  padding: 0;
  margin: 0;
  gap: 1px;
  list-style: none;
}

/* Navigation Item */
.header__nav-item {
  position: relative;
  display: flex;
  height: 4.375rem;
  height: var(--size-70);
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  padding: 0 var(--spacing-5);
}
.header__nav-item.active {
  background-color: #00c4bf;
  background-color: var(--color-primary);
}
.header__nav-item.active .header__arrow,
.header__nav-item.active .header__open-new {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7495%) hue-rotate(140deg)
    brightness(102%) contrast(101%);
}
.header__nav-item a,
.header__nav-item button {
  display: flex;
  height: 100%;
  align-items: center;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  color: #262522;
  color: var(--color-black);
  cursor: pointer;
  gap: 0.25rem;
  gap: var(--spacing-1);
  text-decoration: none;
}
.header__nav-item a svg,
.header__nav-item button svg {
  width: 0.75rem;
  width: var(--size-12);
}
.header__nav-item .header__open-new {
  width: 10px;
  height: 10px;
}
.header__nav-item:hover:not(.active) .header__nav-text {
  color: #00a8a8;
  color: var(--color-primary-hover);
}
.header__nav-item:hover:not(.active) .header__arrow {
  color: #00a8a8;
  color: var(--color-primary-hover);
}
.header__nav-item:hover:not(.active) .header__open-new {
  color: #00a8a8;
  color: var(--color-primary-hover);
}

/* Japanese Text variant */
.header__nav-item--ja .header__nav-text {
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-family: var(--font-family-ja);
}

/* Dropdown variant */
.header__nav-item--dropdown.is-open .header__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

/* Navigation Text */
.header__nav-text {
  color: #262522;
  color: var(--color-black);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", roboto, arial, sans-serif;
  font-family: var(--font-family-en);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 125%;
  transition: color 150ms ease-in-out;
  transition: color var(--transition-fast);
}
/* text-wrap: nowrap; */
.header__nav-item.active .header__nav-text {
  color: #fff;
  color: var(--color-white);
  font-weight: 700;
}

/* Dropdown Menu */
.header__dropdown {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 0.75rem);
  top: calc(100% + var(--spacing-3));
  left: 0;
  width: 230px;
  padding: 0.75rem 0;
  padding: var(--spacing-3) 0;
  border-radius: 0.75rem;
  border-radius: var(--radius-md);
  margin: 0;
  background: #fff;
  background: var(--color-white);
  box-shadow: 0 5px 16px rgb(74 31 6 / 5%);
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
  visibility: hidden;
}

a.header__dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-3);
  color: #262522;
  color: var(--color-black);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-family: var(--font-family-ja);
  font-size: 14px;
  font-weight: 500;
  gap: 0.5rem;
  gap: var(--spacing-2);
  line-height: 140%;
  text-decoration: none;
  transition: background-color 150ms ease-in-out;
  transition: background-color var(--transition-fast);
}

a.header__dropdown-item:hover {
  color: #00a8a8;
  color: var(--color-primary-hover);
}

a.header__dropdown-item.active {
  font-weight: 700;
}

a.header__dropdown-item svg {
  width: 0.75rem;
  width: var(--size-12);
}

/* header-mobile.css */
/* Mobile Header Styles with CSS Nesting */

.header__body-mobile {
  width: 100%;
  border-bottom: 1px solid #ecede6;
  border-bottom: 1px solid var(--color-border-light);
  background: #fff;
  background: var(--color-white);
}

/* Hide on desktop */

@media (min-width: 1174.02px) {
  .header__body-mobile {
    display: none;
  }
}

.header-mobile__body {
  display: flex;
  height: 56px;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  padding: var(--spacing-4);
}

/* Logo */
.header-mobile__logo {
  display: block;
  width: 112px;
  height: 20px;
  padding: 0;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.header-mobile__logo a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.header-mobile__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Actions */
.header-mobile__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  gap: var(--spacing-4);
}
.header-mobile__actions [data-menu-close] {
  display: none;
}
.is-menu-open .header-mobile__actions [data-menu-open] {
  display: none;
}
.is-menu-open .header-mobile__actions [data-menu-close] {
  display: flex;
}

/* Login Button */
.header-mobile__login-btn {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  padding: 0 var(--spacing-4);
  border: none;
  border-radius: 50vh;
  border-radius: var(--radius-full);
  -webkit-appearance: none;
  appearance: none;
  background: #00c4bf;
  background: var(--color-primary);
  color: #fff;
  color: var(--color-white);
  cursor: pointer;
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-family: var(--font-family-ja);
  font-size: 14px;
  font-weight: 700;
  line-height: 125%;
  transition: background-color 150ms ease-in-out;
  transition: background-color var(--transition-fast);
}
.header-mobile__login-btn:active {
  transform: scale(0.98);
}

/* Menu Toggle Button */
.header-mobile__menu-toggle {
  position: relative;
  display: flex;
  width: 26px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1174px) {
  body::after {
    position: fixed;
    z-index: 1000;
    display: block;
    background: rgb(0 0 0 / 50%);
    content: "";
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-medium);
  }

  body.is-menu-open::after {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Mobile Drawer */
.header-mobile__drawer {
  position: absolute;
  z-index: 1400;
  top: 3.5rem;
  top: var(--spacing-14);
  right: 0;
  left: 0;
  display: none;
  width: 100%;
  max-height: calc(100vh - 3.5rem);
  max-height: calc(100vh - var(--spacing-14));
  background: #fff;
  background: var(--color-white);
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  transform: translateY(-100%);
}
.header-mobile__drawer--enter {
  transition: transform var(--transition-medium);
}
.header-mobile__drawer--enter-start {
  transform: translateY(-100%);
}
.header-mobile__drawer--enter-end {
  transform: translateY(0);
}
.header-mobile__drawer--leave {
  transition: transform var(--transition-medium);
}
.header-mobile__drawer--leave-start {
  transform: translateY(0);
}
.header-mobile__drawer--leave-end {
  transform: translateY(-100%);
}
.header-mobile__drawer.is-open {
  display: block;
  transform: translateY(0);
}

/* Navigation */
.header-mobile__nav {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style: none;
}

.header-mobile__nav-item {
  border-bottom: 1px solid #ecede6;
  border-bottom: 1px solid var(--color-border-light);
}

.header-mobile__nav-item.active > .header-mobile__nav-link {
  color: #00c4bf;
  color: var(--color-primary);
  font-weight: 700;
}

/* Japanese text variant */

.header-mobile__nav-item--ja .header-mobile__nav-link {
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-family: var(--font-family-ja);
}

.header-mobile__nav-item:hover:not(.active) .header-mobile__nav-link {
  color: #00a8a8;
  color: var(--color-primary-hover);
}

.header-mobile__nav-item:hover:not(.active) .header-mobile__toggle-icon {
  color: #00a8a8;
  color: var(--color-primary-hover);
}

.header-mobile__nav-link {
  display: flex;
  width: 100%;
  height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  padding: var(--spacing-4);
  border: none;
  background: none;
  color: #262522;
  color: var(--color-black);
  cursor: pointer;
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", roboto, arial, sans-serif;
  font-family: var(--font-family-en);
  font-size: 14px;
  font-weight: 500;
  line-height: 125%;
  text-align: left;
  text-decoration: none;
  transition: background-color 150ms ease-in-out;
  transition: background-color var(--transition-fast);
}

.header-mobile__nav-link:active {
  background-color: var(--color-bg-light);
}

.header-mobile__nav-link .header-mobile__nav-icon {
  width: 10px;
  flex-shrink: 0;
}

.header-mobile__nav-arrow {
  width: 0.75rem;
  width: var(--size-12);
  height: 0.75rem;
  height: var(--size-12);
  flex-shrink: 0;
  margin-right: 0.25rem;
  margin-right: var(--spacing-1);
  filter: brightness(0);
  transition: filter 150ms ease-in-out;
  transition: filter var(--transition-fast);
}

/* Submenu toggle */
.header-mobile__nav-toggle {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  -webkit-appearance: none;
  appearance: none;
}

/* Submenu */
.header-mobile__submenu {
  display: none;
  flex-direction: column;
  padding: 0;
  margin: 0;
  background: var(--color-bg-light);
  list-style: none;
}
.header-mobile__submenu.is-open {
  display: flex;
}

.header-mobile__submenu-item:first-child {
  padding-top: 0.75rem;
  padding-top: var(--spacing-3);
  border-top: 1px solid #ecede6;
  border-top: 1px solid var(--color-border-light);
}

.header-mobile__submenu-item:last-child {
  padding-bottom: 0.75rem;
  padding-bottom: var(--spacing-3);
}

.header-mobile__submenu-item.active .header-mobile__submenu-link {
  color: #262522;
  color: var(--color-black);
  font-weight: 700;
}

.header-mobile__submenu-link {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem 0.75rem 2rem;
  padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-8);
  color: #6b6b68;
  color: var(--color-text-gray);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-family: var(--font-family-ja);
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  text-decoration: none;
  transition:
    background-color 150ms ease-in-out,
    color 150ms ease-in-out;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.header-mobile__submenu-link:active {
  background-color: rgb(0 0 0 / 5%);
}

.header-mobile__submenu-link:hover {
  color: #00a8a8;
  color: var(--color-primary-hover);
}

/* Hide line breaks in mobile header */

.header-mobile__submenu-link .header__line-break {
  display: none;
}

/* footer.css */
/* Footer Styles with CSS Nesting */

.footer {
  width: 100%;
  background: #f28500;
  background: var(--color-secondary);
}

.footer__container {
  display: flex;
  width: 100%;
  max-width: 1360px;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem;
  padding: var(--spacing-10);
  padding-bottom: 1rem;
  padding-bottom: var(--spacing-4);
  margin: 0 auto;
  gap: 0.5rem;
  gap: var(--spacing-2);
}

@media (max-width: 960px) {
  .footer__container {
    padding-right: 1rem;
    padding-right: var(--spacing-4);
    padding-left: 1rem;
    padding-left: var(--spacing-4);
  }
}

/* Frame */
.footer__frame {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  flex: none;
  flex-grow: 0;
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
  order: 0;
  padding: 1.5rem 2.5rem;
  padding: var(--spacing-6) var(--spacing-10);
  border-radius: 0.75rem;
  border-radius: var(--radius-md);
  background: #fff;
  background: var(--color-white);
  box-shadow: 0 0.3125rem 1rem rgb(74 31 6 / 5%);
  box-shadow: var(--shadow-sm);
  gap: 2.5rem;
  gap: var(--spacing-10);
}
@media (max-width: 960px) {
  .footer__frame {
    padding: 1.25rem 2rem;
    padding: var(--spacing-5) var(--spacing-8);
    gap: 2.5rem;
    gap: var(--spacing-10);
  }
}
@media (max-width: 767px) {
  .footer__frame {
    flex-direction: column;
    padding: 1.5rem;
    padding: var(--spacing-6);
    gap: 1.5rem;
    gap: var(--spacing-6);
  }
}
.footer__frame .footer__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--spacing-2);
}
@media (max-width: 767px) {
  .footer__frame .footer__actions {
    width: 100%;
    flex-direction: column;
    justify-content: center;
  }

  .footer__frame .footer__actions .btn {
    width: 100%;
    max-width: 280px;
  }
}

/* Logos */
.footer__logos {
  display: flex;
  height: 3.75rem;
  height: var(--size-60);
  align-items: center;
  gap: 2rem;
  gap: var(--spacing-8);
}
@media (max-width: 960px) {
  .footer__logos {
    gap: 1.5rem;
    gap: var(--spacing-6);
  }
  .footer__logos img:first-child {
    width: 150px;
  }

  .footer__logos img:last-child {
    width: 90px;
  }
}
@media (max-width: 767px) {
  .footer__logos {
    height: auto;
    flex-direction: column;
    gap: 1rem;
    gap: var(--spacing-4);
  }
}
.footer__logos img {
  height: 3.75rem;
  height: var(--size-60);
  object-fit: contain;
}
@media (max-width: 767px) {
  .footer__logos img {
    height: 50px;
  }

  .footer__logos img:first-child {
    width: 140px;
  }

  .footer__logos img:last-child {
    width: 80px;
  }
}
.footer__logos img:first-child {
  width: 179px;
}
.footer__logos img:last-child {
  width: 109px;
}

/* Copyright */
.footer__copyright small {
  width: 100%;
  padding: 0;
  margin: 0;
  color: #fff;
  color: var(--color-white);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-family: var(--font-family-ja);
  font-size: 12px;
  font-weight: 500;
  line-height: 140%;
  text-align: center;
}
@media (max-width: 767px) {
  .footer__copyright small {
    font-size: 11px;
  }
}

/* tooltip.css */
/* Tooltip component */

.tooltip {
  --tooltip-gap: 12px;
  --tooltip-shift-x: 0px;
  --tooltip-shift-y: 0px;
  position: relative;
  display: inline-flex;
  vertical-align: baseline;
}

.tooltip__trigger {
  padding: 0;
  border: 0;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: inherit;
}

.tooltip__trigger--link {
  display: inline-flex;
  align-items: baseline;
  color: #91918d;
  color: var(--color-link, #91918d);
  gap: 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tooltip__trigger-text {
  display: inline;
  padding-right: 18px;
}

.tooltip__trigger-icon {
  position: absolute;
  top: 30%;
  right: 0;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #91918d;
  color: #838383;
  color: var(--color-gray, #91918d);
}

@media (max-width: 960px) {
  .tooltip__trigger-icon {
    top: 27%;
  }
}

.tooltip__bubble {
  position: absolute;
  z-index: 1000;
  bottom: calc(100% + var(--tooltip-gap));
  left: 50%;
  display: block;
  min-width: 272px;
  max-width: min(88vw, 560px);
  padding: 16px;
  border-radius: 0.375rem;
  border-radius: var(--radius-sm);
  background: #262522;
  background: var(--tooltip-bg, #262522);
  box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
  color: #fff;
  color: var(--tooltip-fg, #fff);
  line-height: 1.8;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(-50% + var(--tooltip-shift-x)));
  transition:
    opacity 160ms ease,
    visibility 160ms ease,
    transform 160ms ease;
  visibility: hidden;
}

.tooltip__bubble::after {
  position: absolute;
  top: 100%;
  left: calc(50% - var(--tooltip-shift-x));
  width: 0;
  height: 0;
  border-top: 10px solid #262522;
  border-top: 10px solid var(--tooltip-bg, #262522);
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  content: "";
  transform: translateX(-50%);
}

.tooltip.is-open .tooltip__bubble,
.tooltip:where(:hover, :focus-within) .tooltip__bubble {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.tooltip__title {
  display: block;
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

.tooltip__content {
  display: block;
  color: #d6d6d0;
  color: var(--color-border-gray);
  font-size: 14px;
  line-height: 140%;
  line-height: var(--line-height-normal);
}

.tooltip[data-tooltip-placement="bottom"] .tooltip__bubble {
  top: calc(100% + var(--tooltip-gap));
  bottom: auto;
}

.tooltip[data-tooltip-placement="bottom"] .tooltip__bubble::after {
  top: auto;
  bottom: 100%;
  border-top: none;
  border-bottom: 10px solid #262522;
  border-bottom: 10px solid var(--tooltip-bg, #262522);
}

.tooltip[data-tooltip-placement="left"] .tooltip__bubble {
  top: 50%;
  right: calc(100% + var(--tooltip-gap));
  bottom: auto;
  left: auto;
  transform: translateY(calc(-50% + var(--tooltip-shift-y)));
}

.tooltip[data-tooltip-placement="left"] .tooltip__bubble::after {
  top: calc(50% - var(--tooltip-shift-y));
  right: auto;
  bottom: auto;
  left: 100%;
  border-top: 10px solid transparent;
  border-right: none;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #262522;
  border-left: 10px solid var(--tooltip-bg, #262522);
  transform: translateY(-50%);
}

.tooltip[data-tooltip-placement="right"] .tooltip__bubble {
  top: 50%;
  bottom: auto;
  left: calc(100% + var(--tooltip-gap));
  transform: translateY(calc(-50% + var(--tooltip-shift-y)));
}

.tooltip[data-tooltip-placement="right"] .tooltip__bubble::after {
  top: calc(50% - var(--tooltip-shift-y));
  right: 100%;
  bottom: auto;
  left: auto;
  border-top: 6px solid transparent;
  border-right: 7px solid #262522;
  border-right: 7px solid var(--tooltip-bg, #262522);
  border-bottom: 6px solid transparent;
  border-left: none;
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  .tooltip__bubble {
    min-width: 240px;
    max-width: min(88vw, 560px);
    padding: 16px 18px;
  }

  .tooltip__title {
    font-size: 14px;
  }

  .tooltip__content {
    font-size: 14px;
  }
}

/* faq.css */
/* FAQ */
.faq {
  position: relative;
  padding: 4.5rem 0;
  padding: var(--spacing-18) 0;
  background: #f28500;
  background: var(--color-secondary);
}
@media (max-width: 960px) {
  .faq {
    padding: 3.5rem 1rem;
    padding: var(--spacing-14) var(--spacing-4);
  }
}
.faq__decoration {
  position: absolute;
  width: 260px;
  height: 460px;
  pointer-events: none;
}
@media (max-width: 960px) {
  .faq__decoration {
    width: 200px;
    height: 500px;
  }
}
.faq__decoration--top-left {
  top: 0;
  left: 0;
  border-radius: 0 0 50% 50% / 0 0 100px 100px;
  background: linear-gradient(173.64deg, rgb(255 251 210 / 10%) 31.38%, #fffbd221 88.05%);
}
.faq__decoration--bottom-right {
  right: 0;
  bottom: 0;
  border-radius: 50% 50% 0 0 / 100px 100px 0 0;
  background: linear-gradient(173.64deg, #fffbd221 31.38%, rgb(255 251 210 / 10%) 88.05%);
}
/* Simple variant - no decorations */
.faq--simple .faq__decoration {
  display: none;
}
.faq--simple .faq__title {
  font-size: 1.625rem;
  font-size: var(--size-26);
}
@media (max-width: 960px) {
  .faq--simple .faq__title {
    font-size: 1.375rem;
    font-size: var(--size-22);
  }
}
.faq__container {
  position: relative;
  z-index: 10;
  max-width: 960px;
  max-width: var(--max-width-xl);
  margin: 0 auto;
}
.faq__card {
  padding: 4.5rem 0 2.5rem;
  padding: var(--spacing-18) 0 var(--spacing-10);
  border-radius: 0.75rem;
  border-radius: var(--radius-md);
  background: #fff;
  background: var(--color-white);
  box-shadow: 0 5px 16px rgb(74 31 6 / 5%);
}
@media (max-width: 960px) {
  .faq__card {
    padding: 2.5rem 0 2rem;
    padding: var(--spacing-10) 0 var(--spacing-8);
  }
}
.faq__title {
  padding: 0 2.5rem;
  padding: 0 var(--spacing-10);
  margin-bottom: 1.5rem;
  margin-bottom: var(--spacing-6);
  color: #262522;
  color: var(--color-black);
  font-size: 1.625rem;
  font-size: var(--size-26);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
}
@media (max-width: 960px) {
  .faq__title {
    padding: 0 1rem;
    padding: 0 var(--spacing-4);
  }
}
.faq__list {
  display: flex;
  flex-direction: column;
  padding: 0 2.5rem;
  padding: 0 var(--spacing-10);
  margin-bottom: 1.5rem;
  margin-bottom: var(--spacing-6);
  gap: 0.75rem;
  gap: var(--spacing-3);
}
@media (max-width: 960px) {
  .faq__list {
    padding: 0 1rem;
    padding: 0 var(--spacing-4);
  }
}
.faq__item {
  border: 1px solid #d6d6d0;
  border: 1px solid var(--color-border-gray);
  border-radius: 0.375rem;
  border-radius: var(--radius-sm);
  background: #fff;
  background: var(--color-white);
}
.faq__item:not([open]):hover {
  border-color: #e35300;
  border-color: var(--color-secondary-hover);
}
.faq__item:not([open]):hover .faq__question-text,
.faq__item:not([open]):hover .faq__question-icon,
.faq__item:not([open]):hover .faq__toggle {
  color: #e35300;
  color: var(--color-secondary-hover);
}
.faq__item[open]:has(> .faq__question:hover) {
  border-color: #e35300;
  border-color: var(--color-secondary-hover);
}
.faq__item[open]:has(> .faq__question:hover) .faq__question-text,
.faq__item[open]:has(> .faq__question:hover) .faq__question-icon,
.faq__item[open]:has(> .faq__question:hover) .faq__toggle {
  color: #e35300;
  color: var(--color-secondary-hover);
}
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1rem;
  padding: var(--spacing-5) var(--spacing-4);
  cursor: pointer;
}
.faq__question::-webkit-details-marker {
  display: none;
}
.faq__question-text {
  flex: 1;
  padding-right: 1rem;
  padding-right: var(--spacing-4);
  color: #262522;
  color: var(--color-black);
  font-size: 1rem;
  font-size: var(--size-16);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  line-height: 140%;
  line-height: var(--line-height-normal);
}
.faq__question-icon {
  display: flex;
  width: 2.25rem;
  width: var(--size-36);
  height: 2.25rem;
  height: var(--size-36);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 1rem;
  margin-right: var(--spacing-4);
  background: #ffe55f;
  background: var(--color-accent-yellow);
  color: #262522;
  color: var(--color-black);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", roboto, arial, sans-serif;
  font-family: var(--font-family-en);
  font-size: 1.125rem;
  font-size: var(--size-18);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
}
.faq__toggle {
  display: flex;
  width: 1.5rem;
  width: var(--size-24);
  height: 1.5rem;
  height: var(--size-24);
  align-items: center;
  justify-content: center;
  color: #262522;
  color: var(--color-black);
  font-size: 1.5rem;
  font-size: var(--size-24);
  line-height: 1;
}
.faq__toggle::before {
  content: "+";
  font-size: 1.125rem;
  font-size: var(--size-18);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
}
details[open] .faq__toggle::before {
  content: "−";
  font-size: 1.125rem;
  font-size: var(--size-18);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
}
.faq__answer {
  display: flex;
  padding: 0 1rem 1.25rem 1rem;
  padding: 0 var(--spacing-4) var(--spacing-5) var(--spacing-4);
  gap: 1rem;
  gap: var(--spacing-4);
}
.faq__answer-icon {
  display: flex;
  min-width: 2.25rem;
  min-width: var(--size-36);
  height: 2.25rem;
  height: var(--size-36);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f28500;
  background: var(--color-secondary);
  color: #fff;
  color: var(--color-white);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", roboto, arial, sans-serif;
  font-family: var(--font-family-en);
  font-size: 1.125rem;
  font-size: var(--size-18);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
}
.faq__answer-content {
  display: grid;
  padding-top: 0.375rem;
  padding-top: var(--size-6);
  padding-right: 1.5rem;
  padding-right: var(--spacing-6);
  font-size: 0.875rem;
  font-size: var(--size-14);
}
.faq__answer-content .note {
  color: #6b6b68;
  color: var(--color-text-gray);
  font-size: 0.75rem;
  font-size: var(--size-12);
  line-height: 175%;
  line-height: var(--line-height-relaxed);
}
.faq__answer-content p {
  color: #262522;
  color: var(--color-black);
}
.faq__details {
  display: block;
}
.faq__details--stacked {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
  margin-top: var(--spacing-2);
  gap: 0.5rem;
  gap: var(--spacing-2);
}
.faq__item--hidden {
  display: none;
}
.faq__answer-note {
  margin-top: 0.5rem;
  margin-top: var(--spacing-2);
  color: #6b6b68 !important;
  color: var(--color-text-gray) !important;
  font-size: 0.75rem !important;
  font-size: var(--size-12) !important;
  line-height: 140%;
  line-height: var(--line-height-normal);
}
.faq__cta {
  display: flex;
  flex-direction: column;
  padding: 0 2.5rem;
  padding: 0 var(--spacing-10);
  gap: 0.5rem;
  gap: var(--spacing-2);
}
@media (max-width: 960px) {
  .faq__cta {
    padding: 0 1rem;
    padding: 0 var(--spacing-4);
  }
}
.faq__cta[hidden],
.faq__more-button[hidden] {
  display: none;
}
.faq__more-button {
  max-width: 200px;
  padding: 0 0 1.5rem;
  padding: 0 0 var(--spacing-6);
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 960px) {
  .faq__more-button {
    padding: 0 0 1.5rem;
    padding: 0 0 var(--spacing-6);
  }
}
.faq__more-button .btn__icon {
  width: 0.75rem;
  width: var(--size-12);
  height: 0.75rem;
  height: var(--size-12);
}
.faq__cta--divider {
  width: 100%;
  border-bottom: 1px solid #d6d6d0;
  margin-bottom: 2.5rem;
  margin-bottom: var(--spacing-10);
}
.faq__button {
  display: inline-flex;
  align-items: center;
  background: #fff;
  background: var(--color-white);
  color: #262522;
  color: var(--color-black);
  font-size: 0.875rem;
  font-size: var(--size-14);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  gap: 0.75rem;
  gap: var(--spacing-3);
  text-decoration: none;
}
@media (max-width: 960px) {
  .faq__button svg,
  .faq__button img {
    min-width: 13px;
  }
}
@media (max-width: 480px) {
  .faq__button br {
    display: block !important;
  }
}
.faq__button svg,
.faq__button img {
  width: 13px;
}
.faq__button br {
  display: none;
}
.faq__button:hover {
  color: #e35300;
  color: var(--color-secondary-hover);
  transition: color 0.2s ease;
}
.faq__note {
  padding-bottom: 1rem;
  padding-bottom: var(--spacing-4);
  color: #6b6b68;
  color: var(--color-text-gray);
  font-size: 0.75rem;
  font-size: var(--size-12);
  font-weight: 500;
}