@charset "UTF-8";
/* ============================================================================
   PlusOnePoint Design System — Buttons
   ----------------------------------------------------------------------------
   旧デザインではあらゆるCTAが「ピル形 + 桃/紺グラデ + fa-arrow-right」で、
   トップページだけで border-radius:50px が17箇所、矢印アイコンが10個あった。
   さらに見出しラベル(.section-label)まで同じピル形状だったため、
   ラベルとボタンが視覚的に区別できずCTAの階層が壊れていた。

   ここでは役割ごとに「形」を変える:
     primary   … 最も重い行動（無料相談・購入）。角丸14px、桃ベタ
     secondary … 併置される次点の行動。紺のアウトライン、hoverで塗り
     ghost     … 一覧・詳細への回遊。テキスト＋伸びる下線
     inverse   … 紺地セクションの上で使う
   ピル形状(.btn--pill)はヒーローの主CTAだけに予約する。

   矢印はフォント非依存のCSS描画シェブロン(.btn--arrow)。
   Font Awesome への依存を減らし、hover時に滑らかに動かせる。
   ========================================================================= */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink-strong);
  --btn-border: transparent;
  --btn-shadow: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.6em;
  border: 1.5px solid var(--btn-border);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);

  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;
  appearance: none;
  transition: background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   バリアント
   -------------------------------------------------------------------------- */
/* 主CTA。色は --cta（紺）。桃をやめた経緯は tokens.css を参照。
   汎用の --shadow-2/3（灰）ではなく紺を帯びた影を使う。
   灰の影は白地の上でぼやけて「浮いていない板」に見え、安っぽくなる。 */
.btn--primary {
  --btn-bg: var(--cta);
  --btn-fg: #ffffff;
  --btn-border: var(--cta);
  --btn-shadow: var(--cta-shadow), var(--shadow-inset-hi);
}
.btn--primary:hover {
  --btn-bg: var(--cta-hover);
  --btn-border: var(--cta-hover);
  --btn-shadow: var(--cta-shadow-hover), var(--shadow-inset-hi);
}

/* 透明地のアウトライン。navy-300 の枠は薄灰の地色（--surface-sunken）に
   置くとほとんど消えてしまうため、枠は navy-400、地はごく薄い白を敷いて
   どの地色の上でも輪郭が立つようにする。 */
.btn--secondary {
  --btn-bg: rgba(255, 255, 255, 0.9);
  --btn-fg: var(--brand);
  --btn-border: var(--navy-400);
}
.btn--secondary:hover {
  --btn-bg: var(--brand);
  --btn-fg: #ffffff;
  --btn-border: var(--brand);
  --btn-shadow: var(--shadow-2);
}

.btn--brand {
  --btn-bg: var(--brand);
  --btn-fg: #ffffff;
  --btn-border: var(--brand);
  --btn-shadow: var(--shadow-2), var(--shadow-inset-hi);
}
.btn--brand:hover {
  --btn-bg: var(--brand-hover);
  --btn-border: var(--brand-hover);
  --btn-shadow: var(--shadow-3), var(--shadow-inset-hi);
}

/* 回遊用 — 面を持たず、下線が伸びる */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--brand);
  --btn-border: transparent;
  position: relative;
  padding-inline: 0.25em;
  border-radius: var(--r-xs);
}
.btn--ghost::before {
  content: "";
  position: absolute;
  left: 0.25em;
  right: 0.25em;
  bottom: 0.55em;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn--ghost:hover {
  /* 桃に変わると「回遊リンク」より強い合図になってしまう。
     同系の空色まで持ち上げるだけにして、下線の伸びで反応を伝える。 */
  --btn-fg: var(--sky-700);
  transform: none;
}
.btn--ghost:hover::before {
  transform: scaleX(1);
}

/* 紺地の上で使う */
.btn--inverse {
  --btn-bg: rgba(255, 255, 255, 0.1);
  --btn-fg: #ffffff;
  --btn-border: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(8px);
}
.btn--inverse:hover {
  --btn-bg: rgba(255, 255, 255, 0.18);
  --btn-border: rgba(255, 255, 255, 0.55);
}
.btn--inverse:focus-visible {
  outline-color: #ffffff;
}

.btn--inverse-solid {
  --btn-bg: #ffffff;
  --btn-fg: var(--brand);
  --btn-border: #ffffff;
  --btn-shadow: var(--shadow-3);
}
/* 白→ほぼ白では反応が読み取れなかったので、
   面の色ではなく影の深さと文字の濃さで押した感じを出す。 */
.btn--inverse-solid:hover {
  --btn-bg: #ffffff;
  --btn-border: #ffffff;
  --btn-fg: var(--navy-900);
  --btn-shadow: var(--cta-shadow-hover);
}

/* ---------------------------------------------------------------------------
   サイズ・形状
   -------------------------------------------------------------------------- */
.btn--lg {
  font-size: var(--fs-body-lg);
  padding: 1.05em 2.1em;
}

.btn--sm {
  font-size: var(--fs-small);
  padding: 0.6em 1.1em;
  gap: 0.45em;
}

/* ピルはヒーロー主CTA専用 */
.btn--pill {
  border-radius: var(--r-pill);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* ---------------------------------------------------------------------------
   矢印（CSS描画のシェブロン）
   -------------------------------------------------------------------------- */
.btn--arrow::after,
.btn--arrow-down::after {
  content: "";
  flex: none;
  width: 0.44em;
  height: 0.44em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: translate var(--dur-base) var(--ease-out);
}

.btn--arrow:hover::after {
  translate: 0.28em 0;
}

/* 下向き（ページ内スクロール用） */
.btn--arrow-down::after {
  transform: rotate(135deg);
  margin-top: -0.2em;
}
.btn--arrow-down:hover::after {
  translate: 0 0.24em;
}

/* ghost は下線と矢印の位置関係を調整 */
.btn--ghost.btn--arrow::after {
  margin-bottom: 0.1em;
}

/* ---------------------------------------------------------------------------
   旧クラスの別名（移行用の安全網）
   これらは css/section-common.css 等で定義され、他ページからも使われている。
   ds を読み込むページでだけ新しい見た目に差し替わるよう、
   クラスを二重に書いて特異度で確実に勝たせる（読み込み順に依存しない）。
   -------------------------------------------------------------------------- */
.section-button-primary.section-button-primary,
.hero-cta-primary.hero-cta-primary,
.oni-button-new.oni-button-new,
.counselling-button-compact.counselling-button-compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.6em;
  border: 1.5px solid var(--cta);
  border-radius: var(--r-md);
  background: var(--cta);
  color: #ffffff !important;
  box-shadow: var(--cta-shadow), var(--shadow-inset-hi);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.35;
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.section-button-primary.section-button-primary:hover,
.hero-cta-primary.hero-cta-primary:hover,
.oni-button-new.oni-button-new:hover,
.counselling-button-compact.counselling-button-compact:hover {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
  box-shadow: var(--cta-shadow-hover), var(--shadow-inset-hi);
  transform: translateY(-2px);
}

.section-button-outline.section-button-outline,
.hero-cta-secondary.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.6em;
  border: 1.5px solid var(--navy-300);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--brand);
  box-shadow: none;
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.35;
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.section-button-outline.section-button-outline:hover,
.hero-cta-secondary.hero-cta-secondary:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
  transform: translateY(-2px);
}