@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/* scroll用のセリフ体フォントを追加 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300&display=swap');

html {
  font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
}

body {
  background-color: #ECF0F1;

}

#wrapper {
  width: 600px;
  margin: 0 auto;
  overflow-x: hidden;
}

.top_img {
  width: 600px;
}

/* =========================================
   【通常（PC・基本）のpx指定】
========================================= */

/* セクション全体 */
.feature_description_wrapper {
  background-color: #ECF0F1;
  padding: 40px 40px 160px;
  text-align: left;
  position: relative;
}

/* インナーコンテナ */
.feature_description_inner {
  max-width: 500px;
  margin: 0 auto;
}

/* 「iosname01とは」 */
.title_name {
  font-weight: 900;
  font-size: 48px;
  color: #2D3E50;
  margin-bottom: 25px;
}

/* 「最短10秒で繋がる...」 */
.subtitle_catchcopy {
  font-weight: 900;
  font-size: 32px;
  color: #2D3E50;
  line-height: 1.4;
  margin-bottom: 30px;
  display: inline-block;
}

/* 各行のアンダーライン用px指定 */
.subtitle_catchcopy span {
  display: inline-block;
  border-bottom: 2px solid #2D3E50;
  padding-bottom: 5px;
}

/* 本文テキスト */
.description_text_block {
  font-weight: 600;
  font-size: 24px;
  color: #2D3E50;
  line-height: 1.6;
}

.description_text_block p {
  margin-bottom: 10px;
}

/* スクロール要素 */
.scroll_indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.scroll_text {
  font-weight: 400;
  font-size: 22px;
  color: #2D3E50;
  margin-bottom: 5px;
}

.scroll_arrow {
  display: inline-block;
  width: 1px;
  height: 70px;
  background-color: #2D3E50;
  position: relative;
}

.scroll_arrow::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 1px solid #2D3E50;
  border-bottom: 1px solid #2D3E50;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

/* -----------------------------------------
   ▼ 追加：AI分析セクション（PC・基本）
----------------------------------------- */
.ai_analysis_wrapper {
  background-color: #FFFFFF;
  padding: 30px 15px;
  text-align: left;
}

.ai_analysis_inner {
  margin: 0 auto;
}

.ai_title {
  font-size: 32px;
  font-weight: 900;
  color: #000000;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.ai_icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.ai_lead_text {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.7;
  color: #000000;
  margin-bottom: 35px;
}

/* 薄青のマーカーハイライト */
.text_highlight {
  background-color: #D6E8FA;
  padding: 0 4px;
  display: inline;
}

.ai_subtitle {
  font-size: 32px;
  font-weight: 900;
  color: #000000;
  margin-bottom: 15px;
}

.ai_points_list {
  font-size: 24px;
  font-weight: 700;
  color: #000000;
  margin-top: 10px;
  margin-bottom: 10px;
  list-style: none;
}

.ai_points_list li {
  margin-bottom: 8px;
}

.ai_description_text {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.6;
  color: #000000;
  margin-bottom: 20px;
}

/* アコーディオンの隠しエリア設定 */
.ai_toggle_content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
}

/* JSでこのクラスがつくと滑らかに伸びる */
.ai_toggle_content.is-open {
  max-height: 800px;
  /* 十分な高さを確保 */
  margin-top: 20px;
}

/* ボタンエリア */
.ai_btn_container {
  text-align: center;
  margin-top: 40px;
}

.ai_more_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 80%;
  height: 64px;
  background-color: #FFFFFF;
  border: 1.5px solid #3498DB;
  border-radius: 32px;
  font-size: 22px;
  font-weight: 700;
  color: #000000;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ai_more_button:hover {
  background-color: #F2F8FD;
}

/* ボタン右側の矢印(∨)をCSSで再現 */
.ai_btn_arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid #3498DB;
  border-bottom: 2px solid #3498DB;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s ease;
}

/* 開いている時は矢印が上を向く(∧) */
.ai_btn_arrow.is-active {
  transform: translateY(2px) rotate(-135deg);
}

.store_app_component {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 16px;
  margin: 20px 0 10px;
  box-sizing: border-box;
}

.store_app_icon {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.store_app_icon img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  /* iOSのアイコン角丸比率を再現 */
  object-fit: cover;
}

.store_app_info {
  flex: 1;
  padding: 0 12px;
  text-align: left;
}

.store_app_name {
  font-size: 32px;
  font-weight: 700;
  color: #1C1C1E;
  /* iOS標準のダーク文字色 */
  margin-bottom: 3px;
  line-height: 1.2;
}

.store_app_sub {
  font-size: 16px;
  color: #8E8E93;
  /* iOS標準のサブシステムグレー */
  line-height: 1.2;
}

.store_btn_block {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.store_install_btn {
  display: block;
  padding: 7px 22px;
  line-height: 28px;
  background-color: #007AFF;
  /* iOS入手ボタンの薄グレー */
  color: #F0F0F7;
  /* iOSシステムブルー */
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  border-radius: 100px;
  /* 完全なカプセル型 */
  text-decoration: none;
  transition: background-color 0.2s;
}

.store_install_btn_and {
  display: block;
  padding: 7px 22px;
  line-height: 28px;
  background-color: #07815E;
  /* iOS入手ボタンの薄グレー */
  color: #F0F0F7;
  /* iOSシステムブルー */
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  border-radius: 8px;
  /* 完全なカプセル型 */
  text-decoration: none;
  transition: background-color 0.2s;
}

.store_install_btn:hover {
  background-color: #E4E4ED;
}

.store_app_billing {
  font-size: 12px;
  color: #8E8E93;
  margin-top: 4px;
  white-space: nowrap;
  transform: scale(0.9);
  /* スマホ等で崩れないよう微調整 */
}

/* -----------------------------------------
   ▼ 追加：CTA説明セクション（PC・基本）
----------------------------------------- */
.cta_description_wrapper {
  background-color: #ECF0F1;
  padding: 40px;
  text-align: left;
}

.cta_description_inner {
  max-width: 500px;
  margin: 0 auto;
}

.cta_catchcopy {
  font-weight: 900;
  font-size: 32px;
  color: #2D3E50;
  line-height: 1.4;
  margin-bottom: 30px;
  display: inline-block;
}

.cta_catchcopy span {
  display: inline-block;
  border-bottom: 2px solid #2D3E50;
  padding-bottom: 5px;
}

.cta_text_block {
  font-weight: 600;
  font-size: 24px;
  color: #2D3E50;
  line-height: 1.6;
}

.cta_text_block p {
  margin-bottom: 10px;
}

/* ▼ 追加：画像のPC用スタイル（基本幅600px） ▼ */
.sec3_img {
  width: 600px;
}

.sec3_img img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  /* 下部の隙間対策 */
}

/* -----------------------------------------
   ▼ 追加：比較フローセクション（PC・基本）
----------------------------------------- */
.comparison_section {
  background-color: #ECF0F1;
  padding: 60px 20px;
  text-align: center;
}

.comparison_inner {
  max-width: 560px;
  margin: 0 auto;
}

.comparison_main_title {
  font-size: 32px;
  font-weight: 900;
  color: #2D3E50;
  margin-bottom: 40px;
}

.comparison_main_title span {
  display: inline-block;
  border-bottom: 3px solid #2D3E50;
  padding-bottom: 8px;
}

.comparison_container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* 左右のカラム */
.comp_column {
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ヘッダー部分 */
.comp_header {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: #FFFFFF;
  margin-bottom: 25px;
  border-radius: 4px;
}

.col_normal .comp_header {
  background-color: #A6ACAF;
  /* グレー */
}

.col .comp_header {
  background-color: #2D3E50;
  /* ダークネイビー */
}

/* 通常のステップ白ボックス */
.step_box {
  width: 100%;
  height: 54px;
  background-color: #FFFFFF;
  border: 2px solid #BDC3C7;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: #000000;
  box-sizing: border-box;
}

/* 右側の大きなネイビーボックス */
.step_box.box_dark_large {
  height: 120px;
  background-color: #2D3E50;
  border: none;
  color: #FFFFFF;
  font-size: 20px;
  line-height: 1.4;
  border-radius: 16px;
}

/* 通常の細い下向き矢印 */
.flow_arrow {
  width: 16px;
  height: 24px;
  background-color: #BDC3C7;

  position: relative;
}

/* .flow_arrow::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 8px solid #BDC3C7;
} */

/* 太い下向き矢印 */
.flow_arrow_thick {
  width: 16px;
  height: 40px;
  background-color: #2D3E50;
  margin-bottom: 20px;
  position: relative;
}

.flow_arrow_thick2 {
  width: 16px;
  height: 40px;
  background-color: #2D3E50;
  /* margin-bottom: 20px; */
  position: relative;
}

.flow_arrow_thick::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 16px solid #2D3E50;
}

.col_normal .flow_arrow_thick {
  background-color: #BDC3C7;
}

.col_normal .flow_arrow_thick::after {
  border-top-color: #BDC3C7;
}

/* 右側専用の長い太矢印 */
.flow_arrow_thick.arrow_long {
  height: 191px;
}

/* 最下部の結果ボックス共通 */
.result_box {
  width: 100%;
  height: 150px;
  border-radius: 12px;
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.result_box p {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
}

/* 左側：結果（グレー） */
.box_fail {
  background-color: #BDC3C7;
  color: #FFFFFF;
}

/* 右側：結果（薄青） */
.box_success {
  background-color: #D6E8FA;
  color: #2D3E50;
}

/* アイコン用コンテナとSVGサイズ制御 */
.result_icon {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg_icon {
  width: 100%;
  height: 100%;
}

.result_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =========================================
   女の子紹介セクション（横スクロール）
========================================= */
.girls_section {
  background-color: #ECF0F1;
  padding: 50px 0;
  text-align: center;
}

.girls_title {
  font-size: 32px;
  font-weight: 900;
  color: #2D3E50;
  display: inline-block;
  margin-bottom: 30px;
  padding-bottom: 6px;
  border-bottom: 3px solid #2D3E50;
  /* タイトルの下線 */
}

.girls_scroll_container {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  /* 横スクロールを有効化 */
  padding: 10px 30px 20px;
  /* 左右に余白を作り、スクロール時に端が綺麗に見えるように */
  -webkit-overflow-scrolling: touch;
  /* iOSのスクロールを滑らかに */
}

/* 横スクロールバーをスッキリさせる（非表示） */
.girls_scroll_container::-webkit-scrollbar {
  display: none;
}

.girl_card {
  flex: 0 0 300px;
  /* カードの横幅を固定して潰れないようにする */
  height: 500px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.girl_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 画像を枠いっぱいに綺麗に収める */
}

.girl_info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30px 16px 16px;
  /* 下から上へ向かう黒グラデーション（文字を読みやすくするため） */
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85) 60%);
  color: #ffffff;
  text-align: left;
  box-sizing: border-box;
}

.girl_name {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status_icon {
  color: #2ECC71;
  /* 画像の緑色の丸を再現 */
  font-size: 24px;
}

.girl_detail {
  font-size: 18px;
  line-height: 1.5;
  opacity: 0.9;
}

.usage_section {
  background-color: #ECF0F1;
  padding: 0 0 20px;
  text-align: center;
}

.usage_title {
  font-size: 32px;
  font-weight: 900;
  color: #2D3E50;
  display: inline-block;
  margin-bottom: 35px;
}

.usage_title span {
  display: inline-block;
  border-bottom: 3px solid #2D3E50;
  /* 画像の細めのアンダーラインを再現 */
  padding-bottom: 6px;
}

.usage_container {
  padding: 0 30px;
  /* 左右にグレーの背景が見えるように余白を設定 */
}

.usage_step_box {
  background-color: #2D3E50;
  padding-top: 45px;
  text-align: center;
  box-sizing: border-box;
}

.usage_step_box+.usage_step_box {
  margin-top: 50px;
}

.step_num {
  font-size: 80px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
  margin-bottom: 15px;
  letter-spacing: 0.02em;
}

.step_text_top {
  font-size: 32px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.4;
  margin-bottom: 5px;
}

.step_text_bottom {
  font-size: 32px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.4;
  margin-bottom: 35px;
}

.step_img {
  width: 100%;
}

.step_img img {
  width: 390px;
  height: auto;
  vertical-align: bottom;
}

.cast_slider_section {
  background-color: #ECF0F1;
  padding: 40px 0;
  overflow: hidden;
  /* 600pxからはみ出た画像は見えなくする */
  width: 100%;
}

.slider_wrapper {
  display: flex;
  overflow: hidden;
  width: 100%;
}

/* スライダーインナー（12枚並んだ全体の枠） */
.slider_inner {
  display: flex;
  width: 3180px;
  /* 💡 2220px から 3180px に修正（12枚分ぴったり） */
  animation: infinite-slider-anime 25s linear infinite;
  /* 25sにすると少し滑らかになります */
}

.slider_item {
  width: 250px;
  margin-right: 15px;
  flex-shrink: 0;
}

.slider_item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

/* 💡 アニメーションの移動量を修正 */
@keyframes infinite-slider-anime {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-1590px);
    /* 💡 -1110px から -1590px に修正（6枚分ぴったり） */
  }
}

.slider_overlay_bar {
  position: relative;
  width: 500px;

  /* ▼ 修正：左右中央（auto）を確実に効かせるため、上下マージンを綺麗に整理 */
  margin: 0 auto;

  /* ▼ 追加：左右中央を維持したまま、上に30pxだけ引っ張り上げる */
  top: -30px;

  background-color: #2D3E50;
  border-radius: 28px;
  padding: 90px 24px 32px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  z-index: 10;
}

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

.overlay_app_icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 中央上部に半分飛び出させる */
  width: 160px;
  height: 160px;
  /* 画像のようなプレースホルダーの赤 */
  border-radius: 22px;
  /* アイコンの角丸 */
  overflow: hidden;
}

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

.overlay_app_text_block {
  margin-bottom: 24px;
}

.overlay_app_name {
  color: #FFFFFF;
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}

.overlay_app_sub {
  color: #A0AAB5;
  /* 画像のような少し薄いグレー */
  font-size: 24px;
  font-weight: 500;
}

.overlay_btn_block {
  width: 100%;
}

.overlay_install_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 65px;
  background-color: #007AFF;
  /* 画像の鮮やかな青 */
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 16px;
  /* ボタンの角丸 */
  transition: background-color 0.2s ease;
}

.overlay_install_btn_and {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 65px;
  background-color: #02875F;
  /* 画像の鮮やかな青 */
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 16px;
  /* ボタンの角丸 */
  transition: background-color 0.2s ease;
}

/* =========================================
   ▼ 固定ヘッダー（ネイビーすりガラス版：PC用）
========================================= */
.fixed_header {
  position: fixed;
  top: 0;
  left: 50%;
  /* 初期状態は上に隠して透明にする（JSで表示をコントロール） */
  transform: translateX(-50%) translateY(-100%);
  opacity: 0;

  width: 600px;
  height: 120px;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9999;

  /* 深みのあるネイビーを透過させ、ボケ足を強くする */
  background-color: rgba(45, 62, 80, 0.82);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  /* 境界線：ハッキリした線ではなく、闇に溶ける極薄の白ライン */
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);

  /* 表示時のアニメーション（滑らかなイージング） */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* JSでクラスがついた時の表示状態 */
.fixed_header.is-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* 左側のブロック（アイコン＋名前） */
.fixed_header_left {
  display: flex;
  align-items: center;
}

.fixed_header_icon {
  width: 95px;
  height: 95px;
  margin-right: 12px;
  flex-shrink: 0;
}

.fixed_header_icon img {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  /* iOSアプリ風の綺麗な角丸 */
  object-fit: cover;
}

.fixed_header_name {
  color: #FFFFFF;
  /* ネイビー背景に映える白文字 */
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.03em;
}

.header_subtitle {
  font-size: 18px;
  opacity: 0.7;
}

/* 入手ボタン（App Storeの下部コンポーネントとトンマナを統一） */
.fixed_header_btn {
  display: block;
  background-color: #007AFF;
  /* 下部の入手ボタンと同じ高級感のある薄グレー */
  color: #F0F0F7;
  /* iOS標準のシステムブルー */
  font-weight: 800;
  font-size: 14px;
  padding: 6px 28px;
  border-radius: 100px;
  /* 完全なカプセル型 */
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s, background-color 0.2s;
}

.fixed_header_btn_and {
  display: block;
  background-color: #07815E;
  /* 下部の入手ボタンと同じ高級感のある薄グレー */
  color: #F0F0F7;
  /* iOS標準のシステムブルー */
  font-weight: 800;
  font-size: 14px;
  padding: 6px 18px;
  border-radius: 8px;
  /* 完全なカプセル型 */
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s, background-color 0.2s;
}

.fixed_header_btn:hover {
  background-color: #E4E4ED;
}

.fixed_header_btn:active {
  opacity: 0.7;
}

/* =========================================
   【メディアクエリ】
========================================= */

@media screen and (min-width: 600px) {
  #wrapper {
    max-width: 600px;
    margin: 0 auto;
  }
}

@media screen and (max-width:600px) {
  #wrapper {
    width: 100%;
  }

  /* -----------------------------------------
     ▼ 固定ヘッダー（ネイビーすりガラス版：SP用 calc指定）
  ----------------------------------------- */
  .fixed_header {
    width: 100vw;
    /* スマホ画面の横幅いっぱいに広げる */
    height: calc(120 / 600 * 100vw);
    padding: 0 calc(24 / 600 * 100vw);
  }

  .fixed_header_icon {
    width: calc(95 / 600 * 100vw);
    height: calc(95 / 600 * 100vw);
    margin-right: calc(16 / 600 * 100vw);
  }

  .fixed_header_icon img {
    border-radius: calc(14 / 600 * 100vw);
  }

  .fixed_header_name {
    font-size: calc(26 / 600 * 100vw);
  }

  .header_subtitle {
    font-size: calc(18 / 600 * 100vw);
  }

  .fixed_header_btn {
    font-size: calc(22 / 600 * 100vw);
    padding: calc(6 / 600 * 100vw) calc(28 / 600 * 100vw);
    border-radius: calc(100 / 600 * 100vw);
  }

    .fixed_header_btn_and {
    font-size: calc(22 / 600 * 100vw);
    padding: calc(6 / 600 * 100vw) calc(18 / 600 * 100vw);
    border-radius: calc(8 / 600 * 100vw);
  }

  .top_img {
    width: calc(600 / 600 * 100vw);
  }

  .feature_description_wrapper {
    padding: calc(40 / 600 * 100vw) calc(40 / 600 * 100vw) calc(160 / 600 * 100vw);
  }

  .feature_description_inner {
    max-width: calc(500 / 600 * 100vw);
  }

  .title_name {
    font-size: calc(48 / 600 * 100vw);
    margin-bottom: calc(25 / 600 * 100vw);
  }

  .subtitle_catchcopy {
    font-size: calc(32 / 600 * 100vw);
    margin-bottom: calc(30 / 600 * 100vw);
  }

  .subtitle_catchcopy span {
    border-bottom: calc(2 / 600 * 100vw) solid #2D3E50;
    padding-bottom: calc(5 / 600 * 100vw);
  }

  .description_text_block {
    font-size: calc(24 / 600 * 100vw);
  }

  .description_text_block p {
    margin-bottom: calc(10 / 600 * 100vw);
  }

  .scroll_indicator {
    bottom: calc(40 / 600 * 100vw);
  }

  .scroll_text {
    font-size: calc(22 / 600 * 100vw);
    margin-bottom: calc(5 / 600 * 100vw);
  }

  .scroll_arrow {
    height: calc(70 / 600 * 100vw);
  }

  .scroll_arrow::after {
    width: calc(10 / 600 * 100vw);
    height: calc(10 / 600 * 100vw);
  }

  /* -----------------------------------------
     ▼ 追加：AI分析セクション（SP用 calc指定）
  ----------------------------------------- */
  .ai_analysis_wrapper {
    padding: calc(30 / 600 * 100vw) calc(15 / 600 * 100vw);
  }

  .ai_title {
    font-size: calc(32 / 600 * 100vw);
    gap: calc(12 / 600 * 100vw);
    margin-bottom: calc(15 / 600 * 100vw);
  }

  .ai_icon {
    width: calc(32 / 600 * 100vw);
    height: calc(32 / 600 * 100vw);
  }

  .ai_lead_text {
    font-size: calc(24 / 600 * 100vw);
    margin-bottom: calc(35 / 600 * 100vw);
  }

  .ai_subtitle {
    font-size: calc(32 / 600 * 100vw);
    margin-bottom: calc(15 / 600 * 100vw);
  }

  .ai_points_list {
    font-size: calc(24 / 600 * 100vw);
    margin-top: calc(10 / 600 * 100vw);
    ;
    margin-bottom: calc(10 / 600 * 100vw);
  }

  .ai_points_list li {
    margin-bottom: calc(8 / 600 * 100vw);
  }

  .ai_description_text {
    font-size: calc(22 / 600 * 100vw);
    margin-bottom: calc(20 / 600 * 100vw);
  }

  .ai_toggle_content.is-open {
    max-height: calc(800 / 600 * 100vw);
    margin-top: calc(20 / 600 * 100vw);
  }

  .ai_btn_container {
    margin-top: calc(40 / 600 * 100vw);
  }

  .ai_more_button {
    gap: calc(10 / 600 * 100vw);
    height: calc(64 / 600 * 100vw);
    border-radius: calc(32 / 600 * 100vw);
    font-size: calc(22 / 600 * 100vw);
  }

  .ai_btn_arrow {
    width: calc(10 / 600 * 100vw);
    height: calc(10 / 600 * 100vw);
  }

  /* -----------------------------------------
     App Store風コンポーネント（SP用 calc指定）
  ----------------------------------------- */
  .store_app_component {
    border-radius: calc(16 / 600 * 100vw);
    padding: calc(16 / 600 * 100vw);
    margin: calc(20 / 600 * 100vw) 0 calc(10 / 600 * 100vw);
  }

  .store_app_icon {
    width: calc(120 / 600 * 100vw);
    height: calc(120 / 600 * 100vw);
  }

  .store_app_icon img {
    border-radius: calc(14 / 600 * 100vw);
  }

  .store_app_info {
    padding: 0 calc(12 / 600 * 100vw);
  }

  .store_app_name {
    font-size: calc(32 / 600 * 100vw);
    margin-bottom: calc(3 / 600 * 100vw);
  }

  .store_app_sub {
    font-size: calc(16 / 600 * 100vw);
  }

  .store_install_btn {
    line-height: calc(28 / 600 * 100vw);
    font-size: calc(24 / 600 * 100vw);
    border-radius: calc(100 / 600 * 100vw);
    padding: calc(7 / 600 * 100vw) calc(22 / 600 * 100vw);
  }

  .store_install_btn_and {
    padding: calc(7 / 600 * 100vw) calc(22 / 600 * 100vw);
    line-height: calc(28 / 600 * 100vw);
    font-size: calc(24 / 600 * 100vw);
    border-radius: calc(8 / 600 * 100vw);
  }

  .store_app_billing {
    font-size: calc(12 / 600 * 100vw);
    margin-top: calc(4 / 600 * 100vw);
  }

  /* -----------------------------------------
     ▼ 追加：CTA説明セクション（SP用 calc指定）
  ----------------------------------------- */
  .cta_description_wrapper {
    padding: calc(40 / 600 * 100vw);
  }

  .cta_description_inner {
    max-width: calc(500 / 600 * 100vw);
  }

  .cta_catchcopy {
    font-size: calc(32 / 600 * 100vw);
    margin-bottom: calc(30 / 600 * 100vw);
  }

  .cta_catchcopy span {
    border-bottom: calc(2 / 600 * 100vw) solid #2D3E50;
    padding-bottom: calc(5 / 600 * 100vw);
  }

  .cta_text_block {
    font-size: calc(24 / 600 * 100vw);
  }

  .cta_text_block p {
    margin-bottom: calc(10 / 600 * 100vw);
  }

  /* ▼ 追加：画像のSP用スタイル（画面幅連動縮小） ▼ */
  .sec3_img {
    width: calc(600 / 600 * 100vw);
  }

  /* -----------------------------------------
     ▼ 追加：比較フローセクション（SP用 calc指定）
  ----------------------------------------- */
  .comparison_section {
    padding: calc(60 / 600 * 100vw) calc(20 / 600 * 100vw);
  }

  .comparison_inner {
    max-width: calc(560 / 600 * 100vw);
  }

  .comparison_main_title {
    font-size: calc(32 / 600 * 100vw);
    margin-bottom: calc(40 / 600 * 100vw);
  }

  .comparison_main_title span {
    border-bottom: calc(3 / 600 * 100vw) solid #2D3E50;
    padding-bottom: calc(8 / 600 * 100vw);
  }

  .comp_column {
    width: calc(260 / 600 * 100vw);
  }

  .comp_header {
    height: calc(48 / 600 * 100vw);
    font-size: calc(18 / 600 * 100vw);
    margin-bottom: calc(25 / 600 * 100vw);
    border-radius: calc(4 / 600 * 100vw);
  }

  .step_box {
    height: calc(54 / 600 * 100vw);
    font-size: calc(16 / 600 * 100vw);
    /* 文字サイズをSP用に微調整 */
    border-radius: calc(14 / 600 * 100vw);
    border-width: calc(2 / 600 * 100vw);
  }

  .step_box.box_dark_large {
    height: calc(120 / 600 * 100vw);
    font-size: calc(18 / 600 * 100vw);
    border-radius: calc(16 / 600 * 100vw);
  }

  .flow_arrow {
    width: calc(16 / 600 * 100vw);
    height: calc(24 / 600 * 100vw);

  }

  /* .flow_arrow::after {
    bottom: calc(-6 / 600 * 100vw);
    border-left-width: calc(10 / 600 * 100vw);
    border-right-width: calc(10 / 600 * 100vw);
    border-top-width: calc(8 / 600 * 100vw);
  } */

  .flow_arrow_thick {
    width: calc(16 / 600 * 100vw);
    height: calc(40 / 600 * 100vw);
    margin-bottom: calc(20 / 600 * 100vw);
  }

  .flow_arrow_thick2 {
    width: calc(16 / 600 * 100vw);
    height: calc(40 / 600 * 100vw);
  }

  .flow_arrow_thick::after {
    bottom: calc(-12 / 600 * 100vw);
    border-left-width: calc(20 / 600 * 100vw);
    border-right-width: calc(20 / 600 * 100vw);
    border-top-width: calc(16 / 600 * 100vw);
  }

  .flow_arrow_thick.arrow_long {
    height: calc(191 / 600 * 100vw);
  }

  .result_box {
    height: calc(150 / 600 * 100vw);
    border-radius: calc(12 / 600 * 100vw);
    padding: calc(15 / 600 * 100vw) calc(10 / 600 * 100vw);
  }

  .result_box p {
    font-size: calc(16 / 600 * 100vw);
  }

  .result_icon {
    width: calc(90 / 600 * 100vw);
    height: calc(90 / 600 * 100vw);
  }

  /* 女の子紹介セクション (SP) */
  .girls_section {
    padding: calc(50 / 600 * 100vw) 0;
  }

  .girls_title {
    font-size: calc(32 / 600 * 100vw);
    margin-bottom: calc(30 / 600 * 100vw);
    padding-bottom: calc(6 / 600 * 100vw);
    border-bottom-width: calc(3 / 600 * 100vw);
  }

  .girls_scroll_container {
    gap: calc(16 / 600 * 100vw);
    padding: calc(10 / 600 * 100vw) calc(30 / 600 * 100vw) calc(20 / 600 * 100vw);
  }

  .girl_card {
    flex: 0 0 calc(300 / 600 * 100vw);
    height: calc(500 / 600 * 100vw);
    border-radius: calc(16 / 600 * 100vw);
  }

  .girl_info {
    padding: calc(30 / 600 * 100vw) calc(16 / 600 * 100vw) calc(16 / 600 * 100vw);
  }

  .girl_name {
    font-size: calc(24 / 600 * 100vw);
    margin-bottom: calc(6 / 600 * 100vw);
    gap: calc(6 / 600 * 100vw);
  }

  .status_icon {
    font-size: calc(24 / 600 * 100vw);
  }

  .girl_detail {
    font-size: calc(18 / 600 * 100vw);
  }

  .usage_section {
    padding: 0 0 calc(20 / 600 * 100vw);
  }

  .usage_title {
    font-size: calc(32 / 600 * 100vw);
    margin-bottom: calc(35 / 600 * 100vw);
  }

  .usage_title span {
    border-bottom-width: calc(3 / 600 * 100vw);
    padding-bottom: calc(6 / 600 * 100vw);
  }

  .usage_container {
    padding: 0 calc(30 / 600 * 100vw);
  }

  .usage_step_box {
    padding-top: calc(45 / 600 * 100vw);
  }

  .usage_step_box+.usage_step_box {
    margin-top: calc(50 / 600 * 100vw);
  }

  .step_num {
    font-size: calc(80 / 600 * 100vw);
    margin-bottom: calc(15 / 600 * 100vw);
  }

  .step_text_top {
    font-size: calc(32 / 600 * 100vw);
    margin-bottom: calc(5 / 600 * 100vw);
  }

  .step_text_bottom {
    font-size: calc(32 / 600 * 100vw);
    margin-bottom: calc(35 / 600 * 100vw);
  }

  .step_img img {
    width: calc(390 / 600 * 100vw);
  }


  /* -----------------------------------------
     ▼ 追加：女の子自動横スライダー（SP用 calc指定）
  ----------------------------------------- */
  .cast_slider_section {
    padding: calc(40 / 600 * 100vw) 0;
  }

  .slider_inner {
    width: calc(3180 / 600 * 100vw);
    /* 💡 3180 に修正 */
  }

  .slider_item {
    width: calc(250 / 600 * 100vw);
    margin-right: calc(15 / 600 * 100vw);
  }

  .slider_item img {
    border-radius: calc(12 / 600 * 100vw);
  }

  @keyframes infinite-slider-anime {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(calc(-1590 / 600 * 100vw));
      /* 💡 -1590 に修正 */
    }
  }

  /* -----------------------------------------
     ▼ 追加：アプリインストールダイアログ（SP用 calc指定）
  ----------------------------------------- */
  .slider_overlay_bar {
    width: calc(500 / 600 * 100vw);

    /* ▼ 修正：左右中央（auto）をキープ */
    margin: 0 auto;

    /* ▼ 追加：スマホ画面でも綺麗に比率を保って上に食い込ませる */
    top: calc(-30 / 600 * 100vw);

    border-radius: calc(28 / 600 * 100vw);
    padding: calc(90 / 600 * 100vw) calc(24 / 600 * 100vw) calc(32 / 600 * 100vw);
  }

  .overlay_app_icon {
    width: calc(160 / 600 * 100vw);
    height: calc(160 / 600 * 100vw);
    border-radius: calc(22 / 600 * 100vw);
  }

  .overlay_app_text_block {
    margin-bottom: calc(24 / 600 * 100vw);
  }

  .overlay_app_name {
    font-size: calc(32 / 600 * 100vw);
    margin-bottom: calc(6 / 600 * 100vw);
  }

  .overlay_app_sub {
    font-size: calc(24 / 600 * 100vw);
  }

  .overlay_install_btn {
    height: calc(65 / 600 * 100vw);
    font-size: calc(24 / 600 * 100vw);
    border-radius: calc(16 / 600 * 100vw);
  }

    .overlay_install_btn_and {
    height: calc(65 / 600 * 100vw);
    font-size: calc(24 / 600 * 100vw);
    border-radius: calc(16 / 600 * 100vw);
  }
}