/* =========================================================
   base.css — リセット / デザイントークン / 共通タイポグラフィ
   ========================================================= */

:root {
  /* 配色 */
  --c-bg:        #000;
  --c-fg:        #fff;
  --c-accent:    #ce362b;
  --c-accent-hi: #e04539;
  --c-accent-lo: #b32b21;
  --c-hairline:  rgba(255, 255, 255, 0.15);
  --c-rule:      rgba(255, 255, 255, 0.12);
  --c-border:    rgba(255, 255, 255, 0.08);

  /* カードの地色。背景映像を透かす黒で、数値を上げるほど不透明になる */
  --c-card:       rgba(0, 0, 0, 0.42);
  --c-card-alt:   rgba(0, 0, 0, 0.36);
  --c-card-hover: rgba(0, 0, 0, 0.58);

  /* SERVICE カードの地色。赤のグラデーションを黒ベースの上に重ねている。
     赤の強さは各 rgba の末尾、全体の濃さは末尾の黒で調整する */
  --c-card-service:
    linear-gradient(160deg,
      rgba(206, 54, 43, 0.62) 0%,
      rgba(206, 54, 43, 0.24) 45%,
      rgba(206, 54, 43, 0.05) 100%),
    rgba(0, 0, 0, 0.50);

  /* 余白 */
  --gutter:      clamp(20px, 5vw, 150px);
  --gutter-edge: clamp(20px, 5vw, 64px);
  --section-y:   clamp(60px, 9vw, 150px);
  --rail:        60px;

  /* パーツ */
  --header-h: 72px;

  /* 背景映像に重ねる黒い覆いの濃さ（0＝なし／1＝最も濃い）。
     文字が読みにくければ上げ、映像を強く見せたければ下げる。 */
  --scrim-strength: 0.45;

  /* イージング */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--c-bg);
  scroll-behavior: smooth;
  /* ネイティブのスクロールバーは隠し、自前のものを重ねる（Firefox） */
  scrollbar-width: none;
}

/* 自作スクロールバーをドラッグ中は補間を切って即時追従させる */
html.is-dragging-scrollbar {
  scroll-behavior: auto;
}

/* ネイティブのスクロールバーは隠す（Chrome / Edge / Safari） */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body {
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: 'DM Sans', 'Helvetica Neue', Arial,
               'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
  /* position: sticky を効かせるため overflow は指定しない */
}

/* メニュー展開中は背面スクロールを止める */
body.is-menu-open {
  overflow: hidden;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* ---------- 共通パーツ ---------- */

.link {
  color: var(--c-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.link:hover {
  color: var(--c-accent);
}

.btn {
  display: inline-block;
  white-space: nowrap;
  letter-spacing: 0.5px;
  text-align: center;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-out);
}

.btn--pill-light {
  padding: 10px 24px;
  border-radius: 24px;
  background: var(--c-fg);
  color: #000;
  font-size: 13px;
  font-weight: 700;
}

.btn--pill-light:hover {
  background: #e6e6e6;
  transform: translateY(-1px);
}

.btn--pill-accent {
  padding: 14px 36px;
  border-radius: 28px;
  background: var(--c-accent);
  color: var(--c-fg);
  font-size: 20px;
  font-weight: 700;
}

.btn--pill-accent:hover {
  background: var(--c-accent-hi);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------
   円が広がるホバー（CONTACT ボタン）

   ::after を z-index:-1 に置くと、ボタン自身の背景の上・
   文字の下に描かれる。overflow:hidden と角丸で
   ピル形に切り抜いている。
   広がる色は --btn-circle でボタンごとに指定する。
   --------------------------------------------------------- */

.btn--circle {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition-duration: 0.4s;
}

.btn--circle::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 0;
  padding-top: 100%;
  border-radius: 50%;
  background: var(--btn-circle, var(--c-accent));
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transform: translateY(-50%) scale(0.1);
  transition: opacity 0.5s, transform 0s;
  transition-delay: 0s, 0.4s;
}

.btn--circle:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
  transition: opacity 0.8s, transform 0.6s ease-in-out;
  transition-delay: 0s;
}

/* 地色と浮き上がりは円の演出に任せるので打ち消す */
.btn--pill-light.btn--circle:hover {
  background: var(--c-fg);
  transform: none;
}

.btn--pill-accent.btn--circle:hover {
  background: var(--c-accent);
  transform: none;
}

/* 白いボタン（ヘッダー右上）：赤い円が広がり、文字が白へ */
.btn--pill-light.btn--circle {
  --btn-circle: var(--c-accent);
}

.btn--pill-light.btn--circle:hover {
  color: var(--c-fg);
}

/* 赤いボタン（ページ最下部）：白い円が広がり、文字が赤へ */
.btn--pill-accent.btn--circle {
  --btn-circle: var(--c-fg);
}

.btn--pill-accent.btn--circle:hover {
  color: var(--c-accent);
}

/* セクション見出し用のバッジ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 500;
}

/* ---------- モーションを減らす設定への配慮 ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}