@charset "UTF-8";
/*
Theme Name:  リーチング
Theme URL: https://reaching.jp/lp/
Description: LP全体のCSS
Author: リーチング
Author URI: https://reaching.jp/
Version: 1.0.0
*/

/* ===================================================================
 1. 設計思想
 ===================================================================*/
/*
設計原則：
- BEMによるコンポーネント設計
- ユーティリティクラスによる柔軟性確保
- LP/メディアサイト共通の基盤設計
- Figma命名規則との一貫性維持
- 14px=1rem基準の統一フォントシステム
- LINE Seed JP優先のフォントスタック

命名規則：
- Block: .c-{component-name}
- Element: .c-{component-name}__{element-name}
- Modifier: .c-{component-name}--{modifier-name}
- Utility: .u-{property}-{value}
- Layout: .l-{layout-name}
*/

/* ===================================================================
 2. サイト全体の変数(LPは別設定)
 ===================================================================*/

:root {
  /* === カラー変数 === */


  /* === トランジション変数 === */
  --transition-base: 0.3s ease;
  --transition-fast: 0.2s ease;
  --transition-slow: 0.5s ease;
}

/* デフォルトはPNG画像なし */
:root {
  --color-noise: none;
  --gradient-multi: none;
  --gradient-multi-light: none;
  --gradient-pink: none;
  --gradient-yellow: none;
}

/* ===================================================================
3. サイト全体のコンポーネント
 ===================================================================*/
body {}

header,
footer {
  position: relative;
}

main {
  background: var(--color-white);
  max-width: var(--mobile-base-width);
  margin: 0 auto;
}

@media (min-width: 768px) {
  main {
    max-width: var(--container-md);
  }
}

@media (min-width: 1024px) {
  main {
    max-width: var(--container-lg);
  }
}

@media (min-width: 1440px) {
  main {
    max-width: var(--container-xl);
  }
}

section {
  position: relative;
  max-width: var(--mobile-base-width);
  margin: 0 auto;
}

@media (min-width: 768px) {
  section {
    max-width: var(--container-md);
  }
}

@media (min-width: 1024px) {
  section {
    max-width: var(--container-lg);
  }
}

@media (min-width: 1440px) {
  section {
    max-width: var(--container-xl);
  }
}


/* ===================================================================
 16. アロー共通ボタン（構造・見た目共通）
 ===================================================================*/
.arrow,
.slider--arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-black);
  border-radius: var(--border-radius-full);
  position: relative;
  z-index: 99;
  user-select: none;
}

.arrow {
  background: rgba(255, 255, 255, 0.4);
}


.arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  border-top: 1px solid var(--color-black);
  transform: translate(-50%, -50%);
}

.arrow::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 1px;
  border-top: 1px solid var(--color-black);
}