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

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

/* Remove list styles on ul, ol elements */
ul,
ol {
  list-style: none;
  padding: 0;
}

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

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

/* Remove default table styles */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Remove default fieldset styles */
fieldset {
  border: none;
  padding: 0;
}

/* Remove default legend styles */
legend {
  padding: 0;
}

/* Remove default details styles */
details {
  display: block;
}

summary {
  display: list-item;
  cursor: pointer;
}/* CSS Custom Properties */
:root {
  /* Colors */
  --color-primary: #000;
  --color-background: #fff;

  /* Text Stroke Styles */
  --text-stroke-outline: var(--Static-White, #FFF);
  --text-stroke-width: 2px;
  --text-stroke-color: var(--Static-Black, #000);
  --text-stroke-smoothing: antialiased;

  /* Typography */
  --font-family-base: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif;

  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --font-size-2xs: clamp(0.5rem, 0.92vw, 0.875rem); /* 8px ← 11px → 14px */
  --font-size-xs: clamp(0.625rem, 1.08vw, 1rem); /* 10px ← 13px → 16px */
  --font-size-sm: clamp(0.75rem, 1.25vw, 1.125rem); /* 12px ← 15px → 18px */
  --font-size-base: clamp(0.875rem, 1.42vw, 1.25rem); /* 14px ← 17px → 20px */
  --font-size-lg: clamp(1.125rem, 1.58vw, 1.25rem); /* 18px ← 19px → 20px - 最小値アップ、最大値ダウン */
  --font-size-xl: clamp(1.25rem, 1.92vw, 1.625rem); /* 20px ← 23px → 26px */
  --font-size-2xl: clamp(1.75rem, 2.58vw, 2.125rem); /* 28px ← 31px → 34px */
  --font-size-3xl: clamp(2.125rem, 3.08vw, 2.5rem); /* 34px ← 37px → 40px */
  --font-size-cta-title: clamp(1.25rem, 3.08vw, 2.5rem); /* CTA・サインアップタイトル専用 */
  --font-size-4xl: clamp(2.375rem, 3.42vw, 2.75rem); /* 38px ← 41px → 44px */
  --font-size-5xl: clamp(3.125rem, 4.42vw, 3.5rem); /* 50px ← 53px → 56px */


  /* Layout */
  --container-max-width: 82.5rem; /* 1320px / 16 = 82.5rem */
  --container-padding: clamp(1.5rem, 2vw, 2rem); /* ビューポート対応 - 最小値を調整 */

  /* Breakpoints */
  --breakpoint-mobile: 48rem;    /* 768px / 16 = 48rem */
  --breakpoint-desktop: 64rem;   /* 1024px / 16 = 64rem */

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Unified Section & Layout Variables */
  --section-padding: var(--spacing-2xl); /* 統一セクションパディング - vw基準 */
  --mobile-padding: var(--spacing-xl); /* モバイル統一パディング - vw基準 */
  --content-max-width: 75rem; /* コンテンツ最大幅統一 */

  /* vw基準統一スペーシング体系 */
  /* 計算式: デザインpx値 ÷ 1200 × 100 = vw値 */
  --spacing-2xs: clamp(0.25rem, 0.5vw, 0.5rem);   /* 6px@1200px */
  --spacing-xs: clamp(0.75rem, 1vw, 0.875rem);    /* 12px@1200px - 最小値アップ、最大値ダウン */
  --spacing-sm: clamp(1.25rem, 2vw, 1.75rem);     /* 24px@1200px - 最小値アップ、最大値ダウン */
  --spacing-md: clamp(2rem, 4vw, 4rem);           /* 48px@1200px */
  --spacing-lg: clamp(4rem, 8vw, 8rem);           /* 96px@1200px */
  --spacing-xl: clamp(6rem, 12vw, 12rem);         /* 144px@1200px */
  --spacing-2xl: clamp(8rem, 16vw, 16rem);        /* 192px@1200px */

  /* vw基準統一サイズ体系 */
  --size-icon: clamp(1.2rem, 2vw, 1.5rem);        /* 24px@1200px - アイコン用 */
  --size-button: clamp(2.8rem, 4.92vw, 3.6875rem); /* 59px@1200px - ボタン高さ統一 */
  --size-2xs: clamp(1.5rem, 3vw, 3rem);           /* 36px@1200px */
  --size-xs: clamp(3rem, 6vw, 6rem);              /* 72px@1200px */
  --size-sm: clamp(6rem, 12vw, 12rem);            /* 144px@1200px */
  --size-md: clamp(12rem, 20vw, 20rem);           /* 240px@1200px */
  --size-lg: clamp(18rem, 30vw, 30rem);           /* 360px@1200px */
  --size-xl: clamp(24rem, 40vw, 40rem);           /* 480px@1200px */


  /* Common Hover Effect */
  --hover-lift: translateY(-0.125rem); /* -2px lift effect */


  /* モバイル専用変数 - 固定値使用（vw基準は使用しない） */
  --mobile-image-size: 23.4375rem; /* 375px統一サイズ */
  --mobile-section-padding: 6rem; /* 96px固定 - モバイルでの最適サイズ */
  --mobile-container-padding: 1.5rem; /* 24px固定 - モバイルでの最適余白 */
  --mobile-gap: 2rem; /* 32px固定 - モバイルでの最適間隔 */
  --mobile-gap-lg: 3rem; /* 48px固定 - モバイルでの大きめ間隔 */

  /* モバイル専用フォントサイズ - 固定値で可読性確保 */
  --mobile-font-2xs: 0.6875rem; /* 11px - 最小文字 */
  --mobile-font-xs: 0.8125rem;  /* 13px - 小文字 */
  --mobile-font-sm: 0.9375rem;  /* 15px - 小標準文字 */
  --mobile-font-base: 1.0625rem; /* 17px - 本文 */
  --mobile-font-lg: 1.375rem;   /* 22px - 小見出し */
  --mobile-font-xl: 1.4375rem;  /* 23px - 中見出し */
  --mobile-font-2xl: 1.9375rem; /* 31px - 大見出し */
  --mobile-font-3xl: 2.3125rem; /* 37px - 特大見出し */
  --mobile-font-4xl: 2.5625rem; /* 41px - 超大見出し */
  --mobile-font-5xl: 3.3125rem; /* 53px - 最大見出し */

  /* Letter Spacing 統一変数 */
  --letter-spacing-tight: -0.02em;  /* 見出し用（詰める） */
  --letter-spacing-normal: 0;        /* デフォルト */
  --letter-spacing-wide: 0.02em;    /* 本文用（広げる） */

  /* Line Height 統一変数 */
  --line-height-tight: 1.2;    /* 見出し・タイトル用 */
  --line-height-normal: 1.5;   /* 標準（ボタン、短文） */

  /* Modal Z-index */
  --z-index-modal: 10001;
  --z-index-modal-backdrop: 10000;
  --line-height-relaxed: 1.7;  /* 本文用 */
  --line-height-loose: 1.8;    /* ゆったり本文 */
  --line-height-double: 2;     /* 特殊用途（FAQなど） */
}
/* Hero Responsive Design - Moved to end of file */

/* Base Styles */
/* html, body {
  overflow-x: hidden; 横スクロールバーを非表示にして、はみ出しデザインを許可
} */

/* デバッグ用: 全要素に境界線表示 */
/* * {
  outline: 1px solid red !important;
} */

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-primary);
  background-color: var(--color-background);
}

/* Container */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Hero Section */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2880 / 1470; /* 画像の縦横比に合わせる */
  overflow: hidden;
}


.hero__container {
  position: relative;
  width: 100%;
}

.hero__image {
  position: relative;
  width: 100%;
  z-index: 1;
}

.hero__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* タブレット・デスクトップ: 4000px画像の中央を表示 */
@media (min-width: 48.0625rem) and (max-width: 74.9375rem) { /* 769px〜1199px */
  .hero__image {
    height: 0;
    padding-bottom: calc(1470 / 2880 * 100%); /* アスペクト比2880:1470を維持 */
    position: relative;
  }

  .hero__image picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .hero__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

.hero__content {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-primary);
}

.hero__logo {
  position: absolute;
  top: clamp(1.5rem, 2.5vw, 2.5rem); /* 最小24px、1200pxで30px、最大40px */
  left: clamp(1rem, 2vw, 2.5rem); /* 24px@1200px - vw基準統一 */
  z-index: 10;
  display: none; /* デフォルト非表示 */
}

.hero__logo img {
  width: clamp(5rem, 9.5vw, 7.125rem); /* 最小80px、1200pxで114px、最大114px */
  height: auto;
}

/* タブレット以上で表示 */
@media (min-width: 48.0625rem) { /* 769px以上 */
  .hero__logo {
    display: block;
  }
}

.hero__badges {
  position: absolute;
  top: clamp(1.5rem, 2.5vw, 1.875rem); /* 30px@1200px - vw基準統一 */
  right: clamp(1rem, 2vw, 2.5rem); /* 24px@1200px - vw基準統一 */
  z-index: 10;
  display: flex;
  align-items: flex-start;
  gap: clamp(0.5rem, 1vw, 1rem);
}

.hero__users img {
  width: auto;
  height: clamp(4.67rem, 9.33vw, 7rem); /* Good Designの高さに合わせる */
}

.hero__award img {
  width: auto;
  height: clamp(4.67rem, 9.33vw, 7rem); /* 112px@1200px */
}

.hero__message {
  position: absolute;
  top: clamp(8rem, 12vw, 30rem); /* 144px@1200px - ヒーローレイアウト用 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  transition: transform 0.3s ease;
}

.hero__title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  color: var(--color-primary);
  text-align: center;
  margin: 0;
  position: relative;
  display: inline-block;
  letter-spacing: var(--letter-spacing-wide);
}

.hero__title::after {
  content: '';
  position: absolute;
  bottom: -0.625rem; /* -10px / 16 = -0.625rem */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 0.25rem; /* 4px / 16 = 0.25rem */
  background: url("data:image/svg+xml,%3Csvg width='200' height='10' viewBox='0 0 200 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,5 Q50,0 100,5 T200,5' stroke='%23ff6b6b' stroke-width='3' fill='none'/%3E%3C/svg%3E") repeat-x;
  background-size: 12.5rem 0.625rem; /* 200px 10px in rem */
}

.hero__title-svg {
  width: clamp(18.75rem, 40vw, 32.5rem); /* 最小300px、1200pxで480px、最大520px */
  height: auto;
}

.hero__title h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  margin-bottom: var(--size-md);
}

.hero__title--normal {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-normal);
}

/* Hero Section - 大画面用高さ制限 */
@media (min-width: 75rem) { /* 1200px以上 */
  .hero {
    max-height: 50rem !important; /* 800px固定 - story-with-textと統一 */
    aspect-ratio: unset !important; /* アスペクト比制限を解除 */
  }

  .hero .hero__image img {
    height: 50rem !important; /* 800px固定 */
    object-fit: cover !important; /* 画像の比率を保ちつつトリミング */
    object-position: center !important; /* 中央部分を表示 */
  }

  .hero .hero__message {
    top: max(6rem, min(9rem, 9rem - (100vw - 75rem) * 0.1)) !important; /* 1200pxで9rem起点、広がると上に */
  }

  /* story-with-text - 大画面用高さ制限 */
  .story-with-text {
    height: 50rem !important; /* 800px固定 - より多く表示 */
    aspect-ratio: unset !important; /* アスペクト比制限を解除 */
    overflow: visible !important; /* テキストが見えるように */
  }

  .story-with-text .story-background {
    height: 50rem !important; /* 800px固定 */
    overflow: hidden !important; /* 背景画像のみトリミング */
  }

  .story-with-text .story-background-image {
    height: 50rem !important; /* 800px固定 */
    object-fit: cover !important; /* 画像の比率を保ちつつトリミング */
    object-position: center !important; /* 中央部分を表示 */
  }

  /* story-section - 大画面用高さ制限 */
  .story-section {
    max-height: 50rem !important; /* 800px固定 - より多く表示 */
    overflow: hidden !important;
  }

  .story-section img {
    height: 50rem !important; /* 800px固定 */
    object-fit: cover !important; /* 画像の比率を保ちつつトリミング */
    object-position: center !important; /* 中央部分を表示 */
  }
}

/* CTA Section */
.cta {
  padding: var(--spacing-md) 0 var(--spacing-lg); /* 上48px 下96px@1200px - 上だけ詰める */
  background-color: var(--color-background);
}


.cta__container {
  max-width: var(--content-max-width); /* 75rem - 統一された最大幅 */
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.cta__content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.cta__text {
  flex: 1;
}

.cta__badge {
  display: flex;
  align-items: center;
  gap: 1rem; /* 固定値に戻す */
  margin-bottom: var(--spacing-xs); /* 12px@1200px - 1段階縮める */
}

/* モバイル版バッジ：768px以下のみ表示 */
.cta__badge--mobile {
  display: flex;
}

/* デスクトップ版バッジ：769px以上のみ表示 */
.cta__badge--desktop {
  display: none;
  align-items: flex-end; /* 下揃え */
  gap: 0; /* 隙間なし */
}

@media (min-width: 48.0625rem) { /* 769px以上 */
  .cta__badge--mobile {
    display: none;
  }

  .cta__badge--desktop {
    display: flex;
  }
}

.cta__logo {
  flex-shrink: 0; /* ロゴが縮まないように */
}

.cta__logo img {
  width: clamp(5.5rem, 8.43vw, 6.3125rem); /* 最小88px、1200pxで101px、最大101px */
  height: clamp(2.9rem, 4.5vw, 3.375rem); /* 最小46px、1200pxで54px、最大54px */
}

.cta__badge-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* align-items: left は無効 */
  gap: 0.25rem;
}

.cta__badge-arrow img {
  width: 1.125rem; /* 18px / 16 = 1.125rem - 固定値に戻す */
  height: 0.65rem; /* 10.392px / 16 ≈ 0.65rem - 固定値に戻す */
}

/* デスクトップ版バッジの矢印スタイル */
.cta__badge--desktop .cta__badge-arrow--left img,
.cta__badge--desktop .cta__badge-arrow--right img {
  width: clamp(0.625rem, 1vw, 0.75rem); /* 最小10px、1200pxで12px、最大12px */
  height: auto;
}

.cta__badge-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 clamp(0.5rem, 0.8vw, 0.75rem);
  background-color: var(--color-background);
}

.cta__badge-text {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  white-space: nowrap;
  line-height: var(--line-height-tight);
}

@media (max-width: 48rem) {
  .cta__badge-text {
    font-size: var(--font-size-md);
  }
}


.cta__title {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-cta-title); /* CTA専用タイトルサイズ */
  line-height: var(--line-height-normal);
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm); /* 24px@1200px - 間隔を縮める */
  transition: font-size 0.3s ease;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem; /* 子要素間の適切な余白 */
}

.cta__title--highlight {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
  color: var(--text-stroke-outline);
  -webkit-text-stroke-width: var(--text-stroke-width);
  -webkit-text-stroke-color: var(--text-stroke-color);
  -webkit-font-smoothing: var(--text-stroke-smoothing);
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  /* gapで余白が設定されているため、マージン調整不要 */
}

.cta__title--normal {
  font-weight: var(--font-weight-black);
  color: var(--color-primary);
}

.cta__buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--spacing-sm); /* 24px@1200px - 間隔を縮める */
}

.cta__app-icon {
  width: 4rem; /* 64px / 16 = 4rem - デスクトップでひと回り大きく */
  height: 4rem; /* 64px / 16 = 4rem */
  overflow: hidden;
  flex-shrink: 0;
}

.cta__app-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta__apple-button {
  height: 3rem; /* 48px / 16 = 3rem - デスクトップでひと回り大きく */
  width: 8.2rem; /* 比例拡大: 6.8 × 1.2 ≈ 8.2rem */
  transition: transform var(--transition-fast);
  cursor: pointer;
}

.cta__apple-button:hover {
  transform: var(--hover-lift); /* 統一されたホバー効果 */
}

.cta__google-button {
  height: 3rem; /* 48px / 16 = 3rem - デスクトップでひと回り大きく */
  width: 10.125rem; /* 比例拡大: 8.4375 × 1.2 ≈ 10.125rem */
  transition: transform var(--transition-fast);
  cursor: pointer;
}

.cta__google-button:hover {
  transform: var(--hover-lift); /* 統一されたホバー効果 */
}

.cta__note {
  font-family: var(--font-family-base);
  font-size: var(--font-size-2xs); /* specs__noteと同じサイズに統一 */
  line-height: var(--line-height-relaxed);
  color: var(--color-primary);
  margin: 0;
}

.cta__image {
  width: clamp(18rem, 32vw, 24rem); /* 384px@1200px - CTAセクション用 */
  aspect-ratio: 1; /* 正方形維持 */
  background-color: #f0f0f0;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  transform: translateZ(0); /* GPUアクセラレーションで黒線防止 */
  will-change: transform; /* レンダリング最適化 */
}


.cta__image img {
  width: 101%; /* 少し大きくして黒線を隠す */
  height: 101%;
  object-fit: cover;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 中央配置 */
}

/* Intro Section */
.intro {
  padding: var(--section-padding) 0; /* 192px@1200px - 統一変数使用 */
  background-color: var(--color-background);
}

.intro__container {
  max-width: var(--content-max-width); /* 75rem - 統一された最大幅 */
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.intro__content {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 8.5vw, 6.375rem); /* 102px@1200px - 特殊デザイン要求 */
}

.intro__image {
  position: relative; /* バッジ配置のため追加 */
  width: clamp(15rem, 25.5vw, 19.125rem); /* 306px@1200px - 偶数サイズで黒線防止 */
  aspect-ratio: 306 / 546; /* 偶数比率で黒線防止 */
  overflow: visible; /* バッジがはみ出すように元に戻す */
  flex-shrink: 0;
}

.intro__image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  transform: translateZ(0); /* GPUアクセラレーションで黒線防止 */
  will-change: transform; /* レンダリング最適化 */
}


.intro__badge {
  position: absolute;
  top: -2rem; /* 画像の上に少しはみ出す */
  right: -2rem; /* PC版: 右上に配置 */
  width: clamp(5rem, 10.83vw, 8.125rem); /* 130px@1200px */
  height: clamp(5rem, 10.83vw, 8.125rem); /* 130px@1200px */
  z-index: 10;
}

.intro__image .intro__video,
.intro__image > img:not(.intro__badge) {
  width: 102%; /* 少し大きくして黒線を隠す */
  height: 102%;
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(0); /* 中央配置 + GPU */
  clip-path: inset(0); /* 境界を明確にする */
}

.intro__video {
  filter: drop-shadow(0px 0px #000);
  will-change: transform; /* レンダリング最適化 */
}

.intro__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md); /* 48px@1200px - 適度なギャップ */
}

.intro__title {
  width: 28.3125rem; /* 453px / 16 = 28.3125rem */
}


.intro__subtitle {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-lg); /* サブタイトルサイズ */
  line-height: var(--line-height-loose);
  color: var(--color-primary);
  margin: 0 0 var(--spacing-2xs) 0; /* 6px@1200px */
}

.intro__main-title {
  font-size: var(--font-size-3xl); /* 標準タイトルサイズ */
  line-height: var(--line-height-loose);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem; /* 子要素間の適切な余白 */
}

.intro__title--highlight {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
  color: var(--text-stroke-outline);
  -webkit-text-stroke-width: var(--text-stroke-width);
  -webkit-text-stroke-color: var(--text-stroke-color);
  -webkit-font-smoothing: var(--text-stroke-smoothing);
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  /* gapで余白が設定されているため、マージン調整不要 */
}

.intro__title--normal {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
  color: var(--color-primary);
  white-space: nowrap;
}

.intro__steps {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.intro__step {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex: 1;
  min-width: 0;
}

.intro__step-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 14px;
  height: 26px;
  padding-top: 2px;
}

.intro__step-arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.intro__step-title {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  color: var(--color-primary);
  margin: 0;
}

.intro__step-text {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--color-primary);
  margin: 0;
}

/* Media Section */
.media {
  background-color: var(--color-background);
  contain: layout style paint;
  overflow: hidden; /* 横スクロール防止 */
}

.media__container {
  max-width: 100%;
  margin: 0 auto;
}

.media__scroll-wrapper {
  overflow: hidden;
  white-space: nowrap;
}

.media__logos {
  display: inline-flex;
  align-items: center;
  gap: 4rem; /* 64px固定 - ガタつき防止のため固定値 */
  padding-left: 4rem; /* 左端にもgapと同じ余白を追加してループを滑らかに */
  animation: scroll-horizontal 50s linear infinite; /* CSS Animationで滑らかなスクロール */
  will-change: transform;
  width: max-content; /* コンテンツ幅に自動調整 */
}

.media__logos.paused {
  animation-play-state: paused;
}

@keyframes scroll-horizontal {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0); /* ちょうど複製開始位置まで移動 */
  }
}

.media__logo {
  height: 1.875rem; /* 30px固定 - ガタつき防止 */
  width: auto;
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}

.media__logo--large {
  height: 3.5rem; /* 56px - logo7, logo8と同じサイズ */
}

.media__logo:hover {
  opacity: 1;
}

/* メディアロゴのリンク用スタイル */
.media__logos a {
  display: inline-block;
  flex-shrink: 0;
}

.media__logos a:hover .media__logo {
  opacity: 1;
}

.media__app-store,
.media__google-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem; /* 6px固定 - ガタつき防止 */
  flex-shrink: 0;
}

.media__app-store-badge,
.media__google-play-badge {
  height: 3.5rem; /* 56px - 元のサイズ */
  width: auto;
  object-fit: contain;
}


/* アクセシビリティ対応 - Moved to end of file */



.story-text__container {
  max-width: var(--content-max-width); /* 75rem - 統一された最大幅 */
  margin: 0 auto var(--section-padding) auto; /* 192px@1200px - セクションマージンと統一 */
  text-align: right; /* 右揃えに変更 */
}


.story-text__svg {
  width: clamp(20rem, 47vw, 35.3rem); /* 565px@1200px - ストーリーテキスト用 */
  height: auto; /* SVGアスペクト比維持 */
  display: inline-block; /* inline-blockに変更して右揃えを効かせる */
  margin-right: clamp(2rem, 8.5vw, 6.375rem); /* 102px@1200px - 特殊デザイン要求 */
}


/* Story With Text Section (特別な文字入りセクション) */
.story-with-text {
  position: relative;
  width: 100%;
  aspect-ratio: 2; /* 1440:720 = 2:1 の比率を維持 */
  overflow: hidden;
}

/* Story Section (画像のみセクション) */
.story-section {
  position: static;
  width: 100%;
  min-height: auto;
}

.story-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.story-background-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* 画像を全面に表示し、アスペクト比を保持 */
}

/* Images in story-section */
.story-section img {
  width: 100%;
  height: auto;
  display: block;
}

.story-calendar-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-content--right {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 19.0625rem; /* 305px / 16 = 19.0625rem */
  height: 24.375rem; /* 390px / 16 = 24.375rem */
  margin-right: clamp(2rem, 5vw, 4.0625rem); /* 60px@1200px - ビューポート対応 */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-content--bottom-right {
  position: absolute;
  bottom: clamp(0.75rem, 5.33vw, 4rem);
  right: max(8rem, calc((100vw - 100rem) / 2 + 8rem)); /* 1600px以上では1600px基準の右端から8rem */
  width: clamp(18rem, 35vw, 30rem);
  color: var(--color-background);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-normal);
  text-align: left;
  z-index: 2;
}

.story-content--bottom-right p {
  white-space: pre-line;
  line-height: var(--line-height-loose);
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

.story-content--bottom-right p:last-child {
  padding-bottom: 0;
}



.story-text-svg {
  height: clamp(6rem, 12vw, 12rem); /* 高さで統一 */
  width: auto; /* 幅は比率に応じて自動調整 */
}

.story-content--center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 50rem; /* 800px / 16 = 50rem */
  width: 100%;
  text-align: center;
  z-index: 2;
}

/* Features Section */
.features {
  padding: var(--section-padding) 0; /* 192px@1200px - 統一変数使用 */
  background-color: var(--color-background);
}

.features__container {
  max-width: var(--content-max-width); /* 75rem - 統一された最大幅 */
  margin: 0 auto;
  padding: 0 var(--container-padding);
}


.features__heading {
  text-align: left;
  margin-bottom: var(--section-padding); /* 192px@1200px - セクションマージンと統一 */
  padding-left: clamp(2rem, 8.5vw, 6.375rem); /* 102px@1200px - 特殊デザイン要求 */
}


.features__title-svg {
  width: clamp(22rem, 49.3vw, 37rem); /* 592px@1200px - 機能タイトル用 */
  height: auto; /* SVGアスペクト比維持 */
  display: block;
}

.features__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(3rem, 10.67vw, 8rem); /* 横の間隔維持 */
}


.feature {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md); /* 統一されたギャップ */
}

/* PC/タブレット: 左列（1,3）と右列（2,4）の並び順とデザイン */
@media (min-width: 48rem) {
  /* 特長1: 左列1番目 - 通常配置 */
  .feature--1 {
    order: 1;
  }

  /* 特長2: 右列1番目 - 階段方式で下げ */
  .feature--2 {
    order: 2;
    margin-top: var(--spacing-xl); /* 144px@1200px - 統一変数使用 */
  }

  /* 特長3: 左列2番目 - 自然配置 */
  .feature--3 {
    order: 3;
  }

  /* 特長4: 右列2番目 - 特長2との間隔 */
  .feature--4 {
    order: 4;
    margin-top: var(--spacing-xl); /* 144px@1200px - 統一変数使用 */
  }
}

.feature__content {
  order: 1;
}

.feature__image {
  order: 2;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.feature__image img,
.feature__video {
  width: 101%; /* 少し大きくして黒線を隠す */
  height: 101%;
  object-fit: cover;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 中央配置 */
}

.feature__video {
  filter: drop-shadow(0px 0px #000);
}

.cta__video {
  width: 101%; /* 少し大きくして黒線を隠す */
  height: 101%;
  object-fit: cover;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(0); /* 中央配置 + GPU */
  will-change: transform; /* レンダリング最適化 */
  filter: drop-shadow(0px 0px #000);
}

.feature__title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-3xl); /* 標準タイトルサイズ */
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-sm); /* 24px@1200px - 間隔を縮める */
  color: var(--color-primary);
  display: flex;
  flex-direction: column; /* 縦方向に配置して改行を確実に */
  gap: 0; /* 行間のgapは無し */
}

.feature__title > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem; /* span要素間の適切な余白 */
}

.feature__title > div:nth-child(2) {
  margin-left: 1em; /* 2行目の左側に1文字分の余白 */
}

.feature__title--primary {
  font-family: var(--font-family-base);
  font-size: var(--font-size-3xl); /* 標準タイトルサイズ */
  font-weight: var(--font-weight-black);
  color: var(--color-primary);
  display: inline;
}

.feature__title--accent {
  font-family: var(--font-family-base);
  font-size: var(--font-size-3xl); /* 標準タイトルサイズ */
  font-weight: var(--font-weight-black);
  color: var(--color-background);
  -webkit-text-stroke-width: var(--text-stroke-width);
  -webkit-text-stroke-color: var(--text-stroke-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  /* gapで余白が設定されているため、マージン調整不要 */
}

/* 2行目の要素に左マージンを追加 */
.feature__title br + * {
  margin-left: 1em; /* 1文字分のマージン - フォント連動 */
}

.feature__text {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base); /* 本文サイズ */
  line-height: var(--line-height-double);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing-normal); /* 0.25px / 16 = 0.015625rem */
}

.feature__text a {
  color: var(--color-primary);
  text-decoration: underline;
  transition: opacity var(--transition-fast);
}

.feature__text a:hover {
  opacity: 0.8;
}

.feature__text--with-links {
  margin-bottom: var(--spacing-xs); /* 12px@1200px - vw基準統一 */
}

.feature__links {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem; /* var(--small, 16px) */
}

.feature__link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem; /* 16px */
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 3px solid #000;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.feature__link:hover {
  opacity: 0.8;
  transform: translateY(-0.125rem); /* -2px / 16 = -0.125rem - 浮く感じ */
}

.feature__link span {
  display: flex;
  padding-bottom: var(--spacing-2xs); /* 6px@1200px - vw基準統一 */
  align-items: center;
  gap: 0.9375rem; /* 15px */
  color: var(--color-primary); /* #000 */
  font-family: var(--font-family-base); /* "Zen Kaku Gothic New" (Noto Sans JPの代替) */
  font-size: var(--font-size-base); /* 本文サイズ */ /* 相対サイズ化 */
  font-style: normal;
  font-weight: var(--font-weight-bold); /* 700 */
  line-height: var(--line-height-double); /* 200% = 34px */
  letter-spacing: var(--letter-spacing-normal); /* 0.25px / 16 = 0.015625rem */
}

.feature__link-icon {
  width: var(--size-icon); /* 24px@1200px - アイコンサイズ統一 */
  height: var(--size-icon); /* 正方形維持 */
  flex-shrink: 0;
}

/* Testimonials Section */
.testimonials {
  padding: var(--section-padding) 0; /* 192px@1200px - 統一変数使用 */
}

.testimonials__container {
  max-width: var(--content-max-width); /* 75rem - 統一された最大幅 */
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.testimonials__heading {
  text-align: left;
  margin-bottom: var(--spacing-lg); /* 96px@1200px */
}

.testimonials__heading h2 {
  font-size: var(--font-size-5xl); /* 大見出しサイズ */
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-normal);
  color: var(--color-primary);
  margin-bottom: 0;
}

.testimonials__title--indent {
  margin-left: var(--spacing-md); /* 48px@1200px - インデントを拡大 */
  display: inline-block;
}

.testimonials__title--accent {
  color: var(--color-background);
  font-weight: var(--font-weight-black);
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--Static-Black, #000);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  margin-right: -0.15em; /* ストローク（2px）による余白を詰める */
}

.testimonials__row {
  position: relative;
  margin-bottom: var(--spacing-xl); /* 144px@1200px - vw基準統一 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonials__row--first {
  margin-bottom: var(--spacing-lg); /* 96px@1200px - vw基準統一 */
  justify-content: flex-end;
  padding-right: 0;
}

.testimonials__row--first .testimonials__photo {
  width: clamp(20rem, 60vw, 44.5625rem); /* 720px@1200px - お客さまの声写真 */
  height: clamp(12rem, 32vw, 24.1875rem); /* 387px@1200px - アスペクト比維持 */
  object-fit: cover;
  object-position: center top; /* 画像の上部を優先して表示 */
}

.testimonials__row--first .testimonials__curve-text {
  position: absolute;
  left: clamp(-3rem, -2.5vw, -1rem); /* ビューポート幅の-2.5%、最小-3rem、最大-1rem */
  bottom: clamp(3rem, 6vw, 6rem); /* vhで相対化 */
  max-width: clamp(18rem, 42vw, 36rem); /* 504px@1200px - テキスト領域調整 */
}

.testimonials__row--second {
  margin-bottom: 0;
  justify-content: flex-start;
}

.testimonials__row--second .testimonials__photo {
  width: clamp(22rem, 65vw, 47.6875rem); /* 780px@1200px - お客さまの声写真 */
  height: clamp(13rem, 35vw, 26rem); /* 420px@1200px - アスペクト比を縦に伸ばす */
  object-fit: contain;
  object-position: center center; /* 画像の中央を表示して下部も見えるように */
}

.testimonials__row--second .testimonials__curve-text {
  position: absolute;
  right: clamp(-4rem, -3vw, -1.5rem); /* 元の位置 */
  top: clamp(1.2rem, 2.4vw, 2.4rem); /* topからの配置に変更 */
  max-width: clamp(20rem, 44vw, 38rem); /* 528px@1200px - テキスト領域調整 */
}

/* 大画面でのみ右側に移動 */
@media (min-width: 75rem) { /* 1200px以上 */
  .testimonials__row--second .testimonials__curve-text {
    right: -5vw; /* 大画面でのみより右側に移動 */
  }
}

.testimonials__photo {
  width: 100%;
  max-width: clamp(22rem, 65vw, 47.6875rem); /* 780px@1200px - お客さまの声写真 */
  height: auto;
  z-index: 1;
  transition: all 0.3s ease;
}

.testimonials__curve-text {
  position: absolute;
  max-width: clamp(25rem, 55.83vw, 41.875rem); /* 670px@1200px - テキスト領域 */
  height: auto;
  z-index: 1;
  transition: all 0.3s ease;
}



/* Image Sections */
.image-section {
  display: flex;
  width: 100%;
}

.image-section-2 {
  height: 45rem; /* 720px / 16 = 45rem */
  overflow: hidden;
}

.image-section__left,
.image-section__right {
  width: 50%;
}

.image-section__right {
  margin-top: var(--spacing-xl); /* 144px@1200px - vw基準統一 */
}

.image-section__left img,
.image-section__right img {
  width: 100%;
  height: auto;
}

.image-section-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* FAQ Section */
.faq {
  padding: var(--section-padding) 0; /* 192px@1200px - 統一変数使用 */
  background-color: var(--color-background);
}

.faq__container {
  max-width: var(--content-max-width); /* 75rem - 統一された最大幅 */
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  gap: clamp(4rem, 10.67vw, 8rem); /* 128px@1200px - 特殊デザイン要求 */
  align-items: flex-start;
}


.faq__title {
  font-size: var(--font-size-3xl); /* 標準タイトルサイズ */
  font-weight: var(--font-weight-black);
  color: var(--color-primary);
  font-family: var(--font-family-base);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-tight); /* 統一変数に変更 */
  flex-shrink: 0;
  margin-bottom: var(--spacing-lg); /* 96px@1200px */
}

.faq__content {
  flex: 1;
  max-width: none;
  margin-left: 0;
}

.faq__item {
  border-top: 0.1875rem solid var(--color-primary); /* 3px / 16 = 0.1875rem */
  background-color: var(--color-background);
}

.faq__item:last-child {
  border-bottom: 0.1875rem solid var(--color-primary); /* 最後の項目のみ下ボーダー */
}

.faq__details {
  padding: var(--spacing-md) var(--spacing-sm); /* 48px 24px@1200px - vw基準統一 */
}

.faq__question {
  font-size: var(--font-size-lg); /* サブタイトルサイズ */
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm); /* 24px@1200px - vw基準統一 */
  letter-spacing: var(--letter-spacing-normal); /* 0.25px / 16 = 0.0156rem */
  line-height: var(--line-height-normal);
  font-family: var(--font-family-base);
}

.faq__question::before {
  content: '';
  width: var(--size-icon); /* 24px@1200px - アイコンサイズ統一 */
  height: var(--size-icon); /* 正方形維持 */
  background-image: url('../images/icon-plus.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq__details[open] .faq__question::before {
  background-image: url('../images/icon-minus.svg');
}

.faq__question:hover {
  color: var(--color-primary);
}

.faq__answer {
  margin-top: var(--spacing-md); /* 48px@1200px - vw基準統一 */
}

.faq__answer p {
  color: var(--color-primary);
  line-height: var(--line-height-normal);
  font-size: var(--font-size-xl); /* FAQ回答サイズ */
  font-weight: var(--font-weight-bold);
}

/* Specs Section */
.specs {
  padding: var(--section-padding) 0; /* 192px@1200px - 統一変数使用 */
}

.specs__container {
  max-width: var(--content-max-width); /* 75rem - 統一された最大幅 */
  margin: 0 auto;
  padding: 0 var(--container-padding);
}


.specs__title {
  font-size: var(--font-size-3xl); /* 標準タイトルサイズ */
  font-weight: var(--font-weight-black);
  color: var(--color-primary);
  font-family: var(--font-family-base);
  margin-bottom: var(--spacing-lg); /* 96px@1200px */
}

.specs__content {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem); /* スペース調整 */
}

/* Letter Visual Display */
.specs__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(2.5rem, 6.67vw, 5rem); /* 1200pxで80px相当 */
  margin-bottom: clamp(3rem, 6vw, 4rem);
  padding: 0 var(--container-padding);
}

.specs__letter {
  position: relative;
  display: inline-block;
}

.specs__letter-image {
  max-width: clamp(12rem, 20vw, 15rem); /* 1200pxで240px相当 */
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  /* box-shadow:
    0px -5px 10px 0px rgba(0, 0, 0, 0.025),
    0px 28.069px 28.069px 0px rgba(0, 0, 0, 0.026),
    0px 7.244px 15.393px 0px rgba(0, 0, 0, 0.029); */
}

.specs__badge {
  width: clamp(4rem, 6.67vw, 5rem); /* 1200pxで80px相当 */
  height: auto;
  position: absolute;
  bottom: clamp(0.75rem, 1.33vw, 1rem); /* 1200pxで16px相当 */
  z-index: 0; /* バッジを後ろに */
}

.specs__letter--omote .specs__badge {
  left: 0;
  transform: translateX(-85%);
}

.specs__letter--ura .specs__badge {
  left: 0;
  transform: translateX(-85%);
}

/* Commented out - may be used later */
/*
.specs__features {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.specs__feature {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.specs__icon {
  flex-shrink: 0;
}

.specs__icon img {
  width: clamp(3.5rem, 6.67vw, 5rem);
  height: clamp(3.5rem, 6.67vw, 5rem);
  display: block;
}

.specs__feature-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
}
*/

.specs__right {
  width: 100%;
}

.specs__table {
  border: 0.1875rem solid var(--color-primary); /* 3px / 16 = 0.1875rem */
}

.specs__table-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  border-bottom: 0.0625rem solid var(--color-primary); /* 1px / 16 = 0.0625rem */
}

.specs__table-row:last-child {
  border-bottom: none;
}

.specs__table-label {
  padding: var(--spacing-xs) var(--spacing-sm); /* 上下を詰めてコンパクトに */
  background-color: var(--color-background);
  font-size: var(--font-size-sm); /* 小サイズ */
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  display: flex;
  align-items: top;
  word-wrap: break-word; /* 長い文字列の折り返し */
  overflow-wrap: break-word; /* ブラウザ互換性 */
}

.specs__table-value {
  padding: var(--spacing-xs) var(--spacing-sm); /* 上下を詰めてコンパクトに */
  background-color: var(--color-background);
  font-size: var(--font-size-sm); /* 小サイズ */
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-normal);
  word-wrap: break-word; /* 長い文字列の折り返し */
  overflow-wrap: break-word; /* ブラウザ互換性 */
}

.specs__note {
  font-size: var(--font-size-2xs);
  color: var(--color-primary);
  line-height: var(--line-height-relaxed);
  margin-top: var(--spacing-sm); /* 24px@1200px - マージンを縮める */
}

/* Specs Price Badge (Trial Offer) */
.specs__price-badge {
  display: flex;
  align-items: flex-end;
  gap: 0;
}

.specs__price-badge-arrow img {
  width: clamp(0.625rem, 1vw, 0.75rem);
  height: auto;
}

.specs__price-badge-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 clamp(0.5rem, 0.8vw, 0.75rem);
  background-color: var(--color-background);
}

.specs__price-badge-text {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  white-space: nowrap;
  line-height: var(--line-height-normal);
}

.specs__price-badge-text sup {
  font-size: 0.75em;
  font-weight: var(--font-weight-bold);
  margin-right: 0.25em;
}

.specs__price-details {
  margin-top: var(--spacing-xs);
}

/* Signup Section */
.signup {
  padding: 0 var(--container-padding); /* vw基準統一 */
}

.signup__container {
  border: 0.1875rem solid var(--color-primary); /* 3px / 16 = 0.1875rem */
  padding: clamp(2.5rem, 5.33vw, 4rem) var(--spacing-sm); /* 64px 24px@1200px - vw基準統一 */
}

.signup__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm); /* 24px@1200px - vw基準統一 */
  max-width: var(--content-max-width); /* 75rem - 統一された最大幅 */
  margin: var(--spacing-xs) auto; /* 12px@1200px - vw基準統一 */
}


.signup__text {
  flex: 1;
}

.signup__badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs); /* 12px@1200px - vw基準統一 */
  margin-bottom: var(--spacing-sm); /* 24px@1200px - vw基準統一 */
}

.signup__logo {
  flex-shrink: 0; /* ロゴが縮まないように */
}

.signup__logo img {
  width: clamp(5.5rem, 8.43vw, 6.3125rem); /* 101px@1200px - ロゴサイズ統一 */
  height: clamp(2.9rem, 4.5vw, 3.375rem); /* 54px@1200px - アスペクト比維持 */
}

.signup__badge-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: 0.25rem;
}

.signup__badge-arrow img {
  width: 1.125rem; /* 18px / 16 = 1.125rem */
  height: 0.65rem; /* 10.392px / 16 ≈ 0.65rem */
}

.signup__badge-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 clamp(0.5rem, 0.8vw, 0.75rem);
  background-color: var(--color-background);
}

.signup__badge-text {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  white-space: nowrap;
  line-height: var(--line-height-tight);
}


.signup__title {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-cta-title); /* CTA専用タイトルサイズ */
  line-height: var(--line-height-normal);
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm); /* 24px@1200px - マージンを縮める */
  transition: font-size 0.3s ease;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem; /* 子要素間の適切な余白 */
}

.signup__title--highlight {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
  color: var(--text-stroke-outline);
  -webkit-text-stroke-width: var(--text-stroke-width);
  -webkit-text-stroke-color: var(--text-stroke-color);
  -webkit-font-smoothing: var(--text-stroke-smoothing);
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  /* gapで余白が設定されているため、マージン調整不要 */
}

.signup__title--normal {
  font-weight: var(--font-weight-black);
  color: var(--color-primary);
}

.signup__buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--spacing-sm); /* 24px@1200px - マージンを縮める */
}

.signup__app-icon {
  width: 3.4375rem; /* 55px / 16 = 3.4375rem */
  height: 3.4375rem; /* 55px / 16 = 3.4375rem */
  overflow: hidden;
  flex-shrink: 0;
}

.signup__app-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.signup__apple-button {
  height: 2.5rem; /* 40px / 16 = 2.5rem */
  width: 6.8rem; /* 108.852px / 16 ≈ 6.8rem */
  transition: transform var(--transition-fast);
  cursor: pointer;
}

.signup__apple-button:hover {
  transform: var(--hover-lift); /* 統一されたホバー効果 */
}

.signup__google-button {
  height: 2.5rem; /* 40px / 16 = 2.5rem */
  width: 8.4375rem; /* 135px / 16 = 8.4375rem */
  transition: transform var(--transition-fast);
  cursor: pointer;
}

.signup__google-button:hover {
  transform: var(--hover-lift); /* 統一されたホバー効果 */
}

.signup__note {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-primary);
  margin: 0;
}

.signup__image {
  width: clamp(18rem, 32vw, 24rem); /* 384px@1200px - サインアップセクション用 */
  height: clamp(18rem, 32vw, 24rem); /* 正方形維持 */
  background-color: #f0f0f0;
  overflow: hidden;
  flex-shrink: 0;
}


.signup__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.signup__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: drop-shadow(0px 0px #000);
}

/* Footer */
.footer {
  background-color: var(--color-background);
  color: var(--color-primary);
  padding: var(--section-padding) 0 clamp(4rem, 6vw, 10rem); /* 192px@1200px + 下部固定ボタン用 */
}

.footer__container {
  max-width: var(--content-max-width); /* 75rem - 統一された最大幅 */
  margin: 0 auto;
  padding: 0 var(--container-padding);
}


.footer__content {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(3rem, 8vw, 6rem); /* 96px@1200px - 特殊デザイン要求 */
  margin-bottom: var(--spacing-md); /* 48px@1200px - vw基準統一 */
}


.footer__logo {
  flex-shrink: 0; /* ロゴが縮まないように */
}

.footer__logo img {
  width: clamp(5.5rem, 8.43vw, 6.3125rem); /* 101px@1200px - ロゴサイズ統一 */
  height: auto; /* アスペクト比維持 */
}

.footer__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg); /* 統一されたギャップ */ /* vwからvhに変更 */
}


.footer__nav,
.footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm); /* 24px@1200px - vw基準統一 */
  padding: var(--spacing-sm) 0; /* 24px@1200px - vw基準統一 */
}

.footer__nav a,
.footer__legal a {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  transition: opacity var(--transition-fast);
  font-weight: var(--font-weight-black);
}

.footer__nav a:hover,
.footer__legal a:hover {
  opacity: 0.8;
}

.footer__copyright {
  text-align: center;
  padding-top: var(--spacing-md); /* 48px@1200px - vw基準統一 */
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.1); /* 1px / 16 = 0.0625rem */
}

.footer__copyright p {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
}

/* Fixed Buttons Container (Desktop: 非表示、子要素が個別にfixed) */
.fixed-buttons {
  display: contents; /* 親要素を透過、子要素だけレンダリング */
}

/* Fixed Logo (Desktop only) */
.fixed-buttons__logo {
  display: none; /* モバイルでは非表示 */
  height: clamp(1.75rem, 4vw, 3rem); /* 最小値を下げて自然な縮小 */
  overflow: hidden;
  flex-shrink: 0;
}

.fixed-buttons__logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
}


/* Desktop: Show logo */
@media (min-width: 48rem) {
  .fixed-buttons__logo {
    display: block;
  }
}

/* Fixed CTA Buttons */
.fixed-buttons__cta {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%) translateZ(0); /* GPU加速追加 */
  background-color: var(--color-background);
  border: 0.1875rem solid var(--color-primary); /* 3px / 16 = 0.1875rem */
  border-bottom: none;
  padding: var(--spacing-xs) var(--spacing-sm); /* 12px 24px@1200px - vw基準統一 */
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs); /* 6px@1200px - vw基準統一 */
  z-index: 10000;
  transition: transform 0.3s ease-out; /* シンプルなイージング */
}


.fixed-buttons__text {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-lg); /* サブタイトルサイズ */
  color: var(--color-primary);
  white-space: nowrap;
  margin: 0 var(--spacing-xs); /* 左右に12px@1200px マージン */
  line-height: var(--line-height-normal);
}

/* デスクトップ：brタグを非表示 */
@media (min-width: 64.0625rem) { /* 1025px以上 */
  .fixed-buttons__text br {
    display: none;
  }
}

/* タブレット・デスクトップ用：位置とサイズ調整 */
@media (min-width: 48.0625rem) and (max-width: 74.9375rem) { /* 769px〜1199px */
  .hero__message {
    top: clamp(5rem, 8vw, 7rem) !important; /* より上に配置 */
  }

  .hero__title-svg {
    width: clamp(18rem, 36vw, 32rem) !important; /* サイズ調整 */
  }
}

/* タブレット用：ページトップボタン非表示 */
@media (min-width: 48.0625rem) and (max-width: 64rem) { /* 769px〜1024px */
  .fixed-buttons__text {
    font-size: var(--font-size-base); /* 少し小さめに */
    text-align: left;
  }

}

.fixed-buttons__text sup,
.cta__badge-text sup,
.signup__badge-text sup {
  font-size: 0.75em; /* 親要素の75%サイズ */
  font-weight: var(--font-weight-black);
}


.fixed-buttons__apps {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs); /* 6px@1200px - vw基準統一 */
}

.fixed-buttons__apps img {
  height: clamp(3rem, 4vw, 3.2rem); /* ロゴと同じ4vw基準、最大値を抑制 */
  width: auto;
  transition: transform var(--transition-fast);
}


.fixed-buttons__apps a:hover img {
  transform: translateY(-0.125rem); /* 他のボタンと同じ浮く効果のみ */
}

/* Fixed Support Buttons */
.fixed-buttons__support {
  position: fixed;
  bottom: clamp(0.8rem, 1.6vw, 1.6rem); /* vhで相対化 */
  right: clamp(0.8rem, 1.33vw, 1rem); /* ビューポート幅の1.33%、最小0.8rem、最大1rem */
  display: flex;
  gap: 0.625rem; /* 10px / 16 = 0.625rem */
  z-index: 10000;
  transform: translateY(150%) translateZ(0); /* GPU加速追加 */
  transition: transform 0.3s ease-out; /* シンプルなイージング */
}

/* iPhone Safe Area対応 */
@supports (bottom: env(safe-area-inset-bottom)) {
  .fixed-buttons__support {
    bottom: calc(clamp(0.8rem, 1.6vw, 1.6rem) + env(safe-area-inset-bottom));
    right: calc(clamp(0.8rem, 1.33vw, 1rem) + env(safe-area-inset-right));
  }
}


.support-button {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs); /* 6px@1200px - vw基準統一 */
  padding: var(--spacing-xs) var(--spacing-sm); /* 12px 24px@1200px - ボタン統一のため調整 */
  background-color: var(--color-background);
  border: 0.1875rem solid var(--color-primary); /* 3px / 16 = 0.1875rem */
  cursor: pointer;
  transition: transform var(--transition-fast);
  height: var(--size-button); /* 59px@1200px - ボタン高さ統一 */
  width: clamp(6rem, 10.5vw, 7.875rem); /* 126px@1200px - サポートボタン */
  justify-content: center;
  box-sizing: border-box; /* パディング込みでサイズ統一 */
  /* iPhone タッチ対応 */
  -webkit-tap-highlight-color: rgba(0, 123, 255, 0.3);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  /* iPhone実機での確実なタップ領域確保 */
  min-height: 44px;
  min-width: 44px;
}

.support-button img {
  width: var(--size-icon); /* 24px@1200px - アイコンサイズ統一 */
  height: var(--size-icon); /* 正方形維持 */
}

.support-button span {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  line-height: var(--line-height-loose);
  white-space: nowrap;
}

.support-button:hover {
  transform: var(--hover-lift); /* 統一されたホバー効果 */
}


/* ====================================
   RESPONSIVE DESIGN - MEDIA QUERIES
   ====================================

   Organization:
   1. Tablet (768px - 1024px)
   2. Mobile (< 768px)
   3. Special cases & Accessibility
*/

/* ===== TABLET STYLES ===== */
@media (max-width: 64rem) { /* 1024px */
}

/* ===== MOBILE STYLES ===== */
@media (max-width: 48rem) { /* 768px */
  :root {
    /* モバイルでは固定値の専用変数を使用（vw基準は適用しない） */
    --section-padding: var(--mobile-section-padding); /* 48px固定 - モバイル最適化 */

    /* フォントサイズもモバイルでは固定値に変更 */
    --font-size-2xs: var(--mobile-font-2xs);   /* 12px固定 */
    --font-size-xs: var(--mobile-font-xs);     /* 14px固定 */
    --font-size-sm: var(--mobile-font-sm);     /* 16px固定 */
    --font-size-base: var(--mobile-font-base); /* 18px固定 */
    --font-size-lg: var(--mobile-font-lg);     /* 20px固定 */
    --font-size-xl: var(--mobile-font-xl);     /* 24px固定 */
    --font-size-2xl: var(--mobile-font-2xl);   /* 28px固定 */
    --font-size-3xl: var(--mobile-font-3xl);   /* 32px固定 */
    --font-size-4xl: var(--mobile-font-4xl);   /* 36px固定 */
    --font-size-5xl: var(--mobile-font-5xl);   /* 40px固定 */
  }

  /* Hero Section */
  .hero {
    aspect-ratio: 1; /* Square aspect ratio for mobile */
  }

  /* Story With Text (文字入り特別セクション) */
  .story-with-text {
    aspect-ratio: 375 / 469; /* 375x469px ratio for mobile */
  }

  /* Story Content Bottom Right - モバイル版で中央配置 */
  .story-content--bottom-right {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: auto;
    right: auto;
  }

  .hero__badges {
    top: auto; /* topを無効化 */
    bottom: 1rem; /* 下から16px */
    right: 1rem; /* 右から16px */
    gap: 0.5rem;
  }

  .hero__users img {
    width: auto;
    height: 4.67rem; /* Good Designのwidth:3rem時の高さに合わせる */
  }

  .hero__award img {
    width: auto;
    height: 4.67rem; /* width:3rem時と同じ高さ */
  }

  /* Hero message mobile positioning */
  .hero__message {
    top: clamp(2.5rem, 4vw, 4rem); /* 最小40px、最大64px */
    width: calc(100% - 3.75rem); /* 左右30px（1.875rem × 2）のマージンを考慮 */
    max-width: calc(100vw - 3.75rem); /* ビューポート幅から左右30pxずつ引く */
  }

  /* Hero title SVG mobile adjustments */
  .hero__title-svg {
    width: 100%; /* 親要素の幅いっぱいに表示 */
    height: auto; /* 比率を保持 */
  }

  /* CTA Section */
  .cta {
    padding: var(--mobile-section-padding) 0; /* 48px固定 - モバイル最適化 */
  }

  .cta__container {
    padding: 0 var(--mobile-container-padding); /* 24px固定 - モバイル最適化 */
  }

  .cta__content {
    flex-direction: column;
    gap: var(--mobile-gap);
  }

  .cta__image {
    width: clamp(16rem, 60vw, 20rem); /* 256px〜320px - レスポンシブ */
    height: clamp(16rem, 60vw, 20rem); /* 正方形維持 */
    order: 1; /* 画像を下に配置 */
  }

  .cta__text {
    order: -1; /* テキストを上に配置 */
  }

  /* CTA title mobile adjustments */
  .cta__title {
    font-size: var(--mobile-font-lg); /* 22px固定 */
    letter-spacing: var(--letter-spacing-tight); /* 文字間調整 */
  }

  .cta__note {
    font-size: var(--mobile-font-2xs); /* 11px - モバイル最適化 */
  }

  .cta__note-br,
  .signup__note-br {
    display: none; /* モバイルでは改行なし */
  }

  .cta {
    padding: 2rem 0; /* 32px固定 - モバイルでは小さく */
  }

  .media {
    margin-top: 3rem; /* 48px - モバイルで上マージン追加 */
  }

  /* 2行目だけ文字間をさらに詰める */
  .cta__title--highlight,
  .cta__title--normal {
    letter-spacing: -0.04em; /* 2行目の文字間を詰める */
  }

  /* Mobile stroke adjustments */
  .cta__title--highlight {
    -webkit-text-stroke-width: 1px; /* モバイルでストロークを細く */
  }

  /* Intro Section */
  .intro__container {
    padding: 0 var(--mobile-container-padding); /* 24px固定 - モバイル最適化 */
  }

  .intro__content {
    flex-direction: column;
  }

  .intro__image {
    width: 85%; /* 左右にマージンを確保 */
    max-width: var(--mobile-image-size);
    height: auto; /* 高さを自動に */
    aspect-ratio: 19.13125 / 34.01; /* デスクトップと同じ比率 = 約0.5625 */
    margin: 0 auto; /* 中央揃え */
  }

  .intro__badge {
    top: -1.5rem; /* モバイルでは少し控えめに */
    right: -1.5rem; /* SP版: 右上に配置 */
    width: 5rem; /* 80px固定 - モバイル最適化 */
    height: 5rem; /* 80px固定 */
  }

  .intro__title {
    width: 100%;
  }

  .intro__main-title {
    font-size: var(--mobile-font-2xl); /* 31px */
  }

  .intro__subtitle {
    font-size: var(--mobile-font-sm); /* 15px */
  }

  .feature__title,
  .feature__title--primary,
  .feature__title--accent {
    font-size: var(--mobile-font-2xl); /* 31px */
  }

  .feature__text {
    font-size: var(--mobile-font-sm); /* 15px */
  }

  .feature__link span {
    font-size: var(--mobile-font-sm); /* 15px - feature__textと統一 */
  }

  .testimonials__heading {
    text-align: center; /* モバイルで中央揃え */
  }

  .testimonials__heading h2 {
    font-size: var(--mobile-font-3xl); /* 37px */
  }

  .testimonials__title--indent {
    margin-left: 0; /* モバイルでマージンレフト無効化 */
  }

  .faq__title {
    font-size: var(--mobile-font-xl); /* 23px - もっと小さく */
  }

  .faq__question {
    font-size: var(--mobile-font-sm); /* 15px */
  }

  .faq__answer {
    font-size: var(--mobile-font-lg); /* 22px */
  }

  .specs__title {
    font-size: var(--mobile-font-xl); /* 23px - もっと小さく */
  }

  .signup__badge-text {
    font-size: var(--mobile-font-xs); /* 13px */
  }

  .signup__title {
    font-size: var(--mobile-font-lg); /* 22px */
  }

  .signup__note {
    font-size: var(--mobile-font-2xs); /* 11px - モバイル最適化 */
  }

  .signup__title--highlight {
    -webkit-text-stroke-width: 1px; /* モバイルで縁取りを細く */
  }

  .signup {
    padding-left: calc(var(--mobile-container-padding) / 2); /* 12px */
    padding-right: calc(var(--mobile-container-padding) / 2); /* 12px */
  }

  /* メディアロゴ - モバイル専用設定 */
  .media__logo {
    height: 1.125rem; /* 18px - モバイルでは小さく（gap値は変更しない） */
  }

  .intro__steps {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--spacing-sm);
    column-gap: var(--spacing-sm);
    align-items: start;
  }

  .intro__step:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .intro__step-arrow:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: 24px;
    height: 26px;
    transform: rotate(45deg);
  }

  .intro__step:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
    padding-top: var(--spacing-md);
  }

  .intro__step-arrow:nth-child(4) {
    grid-column: 1 / 4;
    grid-row: 2;
    justify-self: center;
    width: 24px;
    height: 26px;
    transform: rotate(135deg);
    margin: var(--spacing-sm) 0;
  }

  .intro__step:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
  }

  .intro__step-arrow:nth-child(6) {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    width: 24px;
    height: 26px;
    transform: rotate(45deg);
  }

  .intro__step:nth-child(7) {
    grid-column: 3;
    grid-row: 3;
    padding-top: var(--spacing-md);
  }

  .intro__step {
    gap: var(--spacing-sm);
  }

  /* Story Text */
  .story-text__container {
    padding: 0 var(--mobile-container-padding); /* 24px固定 - モバイル最適化 */
    text-align: center; /* モバイルで中央揃え */
  }

  .story-text__svg {
    margin-right: 0;
  }

  /* Features Section */
  .features__container {
    padding: 0 var(--mobile-container-padding); /* 24px固定 - モバイル最適化 */
  }

  .features__heading {
    padding-left: 0;
    text-align: center; /* モバイルで中央揃え */
  }

  .features__title-svg {
    margin: 0 auto; /* モバイルで中央配置 */
    display: block; /* ブロック要素として中央配置を確実にする */
  }

  .features__content {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  /* モバイルではorderとmargin-topをリセット（HTML順に表示） */
  .feature--1,
  .feature--2,
  .feature--3,
  .feature--4 {
    order: initial;
    margin-top: 0;
    flex-direction: column; /* モバイルは全て通常配置 */
  }

  /* FAQ Section */
  .faq__container {
    flex-direction: column;
    gap: 0;
    padding: 0 var(--mobile-container-padding);
  }

  .faq__content {
    width: 100%; /* フル幅 */
    max-width: 100%;
  }

  /* Specs Section */
  .specs__container {
    padding: 0 var(--mobile-container-padding); /* 24px固定 - モバイル最適化 */
  }

  .specs__content {
    flex-direction: column;
    gap: var(--mobile-gap);
  }

  .specs__visual {
    flex-direction: row;
    gap: clamp(1rem, 3vw, 1.5rem);
  }

  .specs__letter {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .specs__letter-image {
    max-width: clamp(7rem, 35vw, 10rem);
  }

  /* SP版ではバッジを非表示 */
  .specs__badge {
    display: none;
  }

  .specs__table-value {
    padding-top: 0; /* 上パディング削除、重複解消 */
  }

  /* Signup Section */
  .signup__content {
    flex-direction: column;
    gap: var(--mobile-gap); /* 32px固定 - モバイル最適化 */
    margin: 0.5rem; /* モバイル固定値 */
  }

  .signup__image {
    width: clamp(16rem, 60vw, 20rem); /* 256px〜320px - レスポンシブ */
    height: clamp(16rem, 60vw, 20rem); /* 正方形維持 */
    aspect-ratio: 1; /* 正方形 */
    order: 1; /* 動画を下に配置 */
  }

  .signup__text {
    order: -1; /* テキストを上に配置 */
  }

  .signup__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cta__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Footer */
  .footer__container {
    padding: 0 var(--mobile-container-padding); /* 24px固定 - モバイル最適化 */
  }

  .footer__content {
    grid-template-columns: 1fr;
    gap: var(--mobile-gap);
  }

  .footer__links {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  /* Image Section Mobile Layout */
  .image-section {
    flex-direction: column; /* 縦列レイアウト */
  }

  .image-section__left,
  .image-section__right {
    width: 100%; /* フル幅 */
  }

  .image-section__right {
    margin-top: 0; /* モバイルでは上部マージンをリセット */
  }

  /* Testimonials Section Mobile Layout */
  .testimonials__row {
    flex-direction: column-reverse; /* 縦列レイアウト（逆順） */
    align-items: center; /* 中央配置 */
    justify-content: center;
    gap: var(--mobile-gap-lg); /* 64px固定 - 要素間のギャップ */
  }

  .testimonials__row--first,
  .testimonials__row--second {
    justify-content: center; /* 両方とも中央配置 */
    padding-right: 0;
    padding-left: 0;
  }

  /* Mobile testimonials photo adjustments */
  .testimonials__row--first .testimonials__photo,
  .testimonials__row--second .testimonials__photo {
    width: 100% !important; /* フル幅 */
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important; /* 左右切れを防ぐ */
  }

  /* Mobile curve text adjustments */
  .testimonials__row--first .testimonials__curve-text,
  .testimonials__row--second .testimonials__curve-text {
    position: static; /* absolute positioning を解除 */
    width: 100%; /* フル幅 */
    max-width: 100%;
    left: auto;
    right: auto;
    bottom: auto;
  }

  /* Specs Table Mobile Layout */
  .specs__table-row {
    grid-template-columns: 1fr; /* 縦1列レイアウト */
  }

  /* Mobile Fixed Buttons - Figma Style */
  .fixed-buttons {
    position: fixed;
    bottom: 0; /* 画面の下側にくっつける */
    left: 0;
    right: 0;
    transform: translateY(3.75rem) translateZ(0); /* GPU加速追加 */
    display: flex !important; /* display: contentsを上書き */
    width: 100%; /* フル幅で左右の隙間をなくす */
    max-width: 100vw; /* ビューポート幅に制限 */
    height: 3.75rem; /* 60px - 高さを明示的に指定 */
    padding: 0;
    align-items: flex-start;
    gap: 0.25rem; /* 4px - var(--x-tiny) */
    z-index: 10000;
    transition: transform 0.3s ease-out; /* シンプルなアニメーション */
  }

  /* iPhone Safe Area対応（モバイル固定ボタン） */
  @supports (bottom: env(safe-area-inset-bottom)) {
    .fixed-buttons {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }


  .fixed-buttons__cta {
    position: static;
    transform: none;
    display: flex;
    height: 3.75rem; /* 60px */
    padding: 0 1rem 0 0; /* 右16px、左0px - 左マージンなし */
    justify-content: space-between;
    align-items: center;
    flex: 1 0 0;
    background-color: var(--color-background);
    border: 0.1875rem solid var(--color-primary); /* 3px border */
    border-bottom: none; /* 下のボーダーなし */
    border-left: none; /* 左のボーダーなし */
  }

  .fixed-buttons__text {
    font-size: var(--mobile-font-xs); /* 13px */
    line-height: var(--line-height-normal); /* 1.5 - 行間を広げる */
    white-space: normal;
    text-align: left; /* 左寄せ */
  }

  .fixed-buttons__apps {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .fixed-buttons__apps img {
    height: clamp(2rem, 6vw, 2.375rem); /* モバイルでもclamp()を使用 */
  }

  .fixed-buttons__support {
    position: static;
    transform: none;
    display: flex;
    height: 3.75rem; /* 60px */
    padding: 1rem; /* 16px固定 - fixed-buttons専用 */
    justify-content: center;
    align-items: center;
    gap: 1rem; /* var(--small, 16px) */
    background-color: var(--color-background);
    border: 0.1875rem solid var(--color-primary); /* 3px border */
    border-bottom: none; /* 下のボーダーなし */
    border-right: none; /* 右のボーダーなし */
    bottom: auto;
    right: auto;
  }

  .support-button {
    display: flex;
    align-items: center;
    gap: 0.25rem; /* 4px */
    background: none;
    border: none;
    padding: 0;
    width: auto;
    height: auto;
  }

  .support-button img {
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
  }

  .support-button span {
    font-size: 0.9375rem; /* 15px */
  }


}

/* ===== SPECIAL MEDIA QUERIES ===== */

/* Accessibility - Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .media__logos {
    animation: none;
  }
}

/* ===== Modal Styles ===== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-index-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
}

.modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--z-index-modal-backdrop);
  backdrop-filter: blur(0.125rem);
}

.modal__container {
  position: relative;
  z-index: calc(var(--z-index-modal) + 1);
  max-width: 50rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(-2rem);
  transition: transform var(--transition-base);
}

.modal.is-open .modal__container {
  transform: translateY(0);
}

.modal__content {
  background: var(--color-background);
  border-radius: var(--spacing-xs);
  box-shadow: 0 var(--spacing-xs) var(--spacing-md) rgba(0, 0, 0, 0.2);
  position: relative;
  box-sizing: border-box;
}

.modal__close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  width: var(--spacing-md);
  height: var(--spacing-md);
  border: none;
  background: none;
  font-size: var(--font-size-xl);
  line-height: 1;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  z-index: calc(var(--z-index-modal) + 2);
}

.modal__close:hover {
  background-color: #f5f5f5;
  color: var(--color-primary);
}

.modal__close:focus {
  outline: 2px solid #007ACC;
  outline-offset: 2px;
}

.modal__header {
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
  border-bottom: 1px solid #eee;
}

.modal__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin: 0;
  padding-right: var(--spacing-md);
  color: var(--color-primary);
}

.modal__body {
  padding: var(--spacing-md);
}

.modal__image {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--spacing-2xs);
  margin-bottom: var(--spacing-sm);
  box-shadow: 0 var(--spacing-2xs) var(--spacing-sm) rgba(0, 0, 0, 0.1);
}

.modal__text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: #333;
  margin: 0;
}

/* モーダルトリガーボタンのスタイル調整 */
.media__modal-trigger {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.media__modal-trigger:hover {
  transform: var(--hover-lift);
}

.media__modal-trigger:focus {
  outline: 2px solid #007ACC;
  outline-offset: 2px;
  border-radius: var(--spacing-2xs);
}

/* レスポンシブ対応 */
@media (max-width: 48rem) {
  .modal {
    padding: var(--mobile-container-padding);
  }

  .modal__container {
    max-width: 100%;
    max-height: 85vh;
  }

  .modal__content {
    border-radius: var(--spacing-2xs);
  }

  .modal__close {
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    width: var(--spacing-sm);
    height: var(--spacing-sm);
    font-size: var(--mobile-font-lg);
  }

  .modal__header {
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xs);
  }

  .modal__title {
    font-size: var(--mobile-font-xl);
    padding-right: var(--spacing-sm);
  }

  .modal__body {
    padding: var(--spacing-sm);
  }

  .modal__text {
    font-size: var(--mobile-font-base);
  }
}

/* Modal - アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {
  .modal {
    transition: none;
  }

  .modal__container {
    transform: none;
    transition: none;
  }

  .modal.is-open .modal__container {
    transform: none;
  }
}

/* ===== Zendesk Chat Widget Size Control ===== */
/* Zendeskチャットウィジェットのサイズ制御 */
iframe[title*="Zendesk"],
iframe[src*="zendesk"],
div[data-testid*="widget"],
#webWidget {
  max-width: 25rem !important; /* 400px */
  max-height: 37.5rem !important; /* 600px */
  width: 90vw !important;
  height: 80vh !important;
  z-index: 10000 !important; /* 最前面に表示 */
}

/* Zendeskのデフォルトランチャーボタンを完全に非表示 */
iframe[id*="launcher"],
div[id*="launcher"],
[data-testid*="launcher"],
.zd-widget-launcher {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* モバイルでのZendeskサイズ調整 */
@media (max-width: 48rem) {
  iframe[title*="Zendesk"],
  iframe[src*="zendesk"],
  div[data-testid*="widget"],
  #webWidget {
    max-width: none !important;
    max-height: none !important;
    width: 100vw !important;
    height: 100vh !important; /* 古いブラウザ用フォールバック */
    height: 100dvh !important; /* iOS/Android等の実表示領域に追従（送信ボタン見切れ対策） */
    z-index: 10000 !important; /* 最前面に表示 */
  }
}

/* ===== Accessibility - Focus Management ===== */
/* フォーカス管理とキーボードナビゲーション */

/* スキップリンク */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  z-index: 9999;
  padding: 8px;
  background: #000000;
  color: #ffffff;
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  border-radius: 4px;
  opacity: 0;
  transform: translateY(-100%);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.skip-link:focus {
  top: 6px;
  opacity: 1;
  transform: translateY(0);
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* 統一フォーカススタイル */
:focus-visible {
  outline: 3px solid #007ACC;
  outline-offset: 2px;
  border-radius: 4px;
}

/* リンクとボタンのフォーカススタイル */
a:focus-visible,
button:focus-visible,
.media__modal-trigger:focus-visible {
  outline: 3px solid #007ACC;
  outline-offset: 2px;
  border-radius: 4px;
}

/* FAQアコーディオンのフォーカススタイル */
.faq__question:focus-visible {
  outline: 3px solid #007ACC;
  outline-offset: 2px;
  background-color: rgba(0, 122, 204, 0.1);
  border-radius: var(--spacing-2xs);
}

/* CTAボタンのフォーカススタイル */
.cta__buttons a:focus-visible,
.signup__buttons a:focus-visible {
  outline: 3px solid #007ACC;
  outline-offset: 4px;
  border-radius: 8px;
  transform: var(--hover-lift);
}

/* 固定ボタンエリアのフォーカススタイル */
.fixed-buttons__apps a:focus-visible,
.support-button:focus-visible {
  outline: 3px solid #007ACC;
  outline-offset: 3px;
  border-radius: var(--spacing-xs);
}

/* フッターリンクのフォーカススタイル */
.footer__nav a:focus-visible,
.footer__legal a:focus-visible {
  outline: 3px solid #007ACC;
  outline-offset: 2px;
  background-color: rgba(0, 122, 204, 0.1);
  border-radius: 4px;
  padding: 2px 4px;
}

/* 特長セクションのリンクのフォーカススタイル */
.feature__link:focus-visible {
  outline: 3px solid #007ACC;
  outline-offset: 3px;
  border-radius: 8px;
  background-color: rgba(0, 122, 204, 0.05);
}

/* フォーカス時のアニメーション制御（モーション配慮） */
@media (prefers-reduced-motion: reduce) {
  .skip-link,
  a:focus-visible,
  button:focus-visible,
  .faq__question:focus-visible {
    transition: none;
    transform: none;
  }

  .cta__buttons a:focus-visible,
  .signup__buttons a:focus-visible {
    transform: none;
  }
}