/* ==========================================================================
   buttons.css — ボタン / リンク（Figma: 01_コンポーネント・ルール > Button）
   --------------------------------------------------------------------------
   .ic-btn                 共通
   .ic-btn--primary        グラデ塗り 240×64（"Button"）          icon: arrow-white 12px
   .ic-btn--outline        白地・青2px線 240×68（"Link"）          icon: arrow-blue 12px
   .ic-btn--pill           ヘッダー用グラデ（白1px線）             icon: arrow-circle-white 20px
   .ic-btn--white          白地・青2px線（MV/Approach/Service/Company 等） icon: arrow-circle-blue 20px
   .ic-btn--accent         白地・オレンジ2px線（MV/Contact/ML Hero）       icon: arrow-circle-orange 20px
   .ic-btn--shadow         影を付ける修飾子。Figma で影があるのは TOP MV の2ボタン（白・オレンジ）と
                           TOP Company の白ボタン（他は同コンポーネントでも影エフェクト非表示）
   ※ 上下paddingは Figma の 20px/16px をトークン化せず、min-height + 中央揃えで再現
   ========================================================================== */
.ic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body);
  line-height: var(--line-height-heading); /* 24px */
  white-space: nowrap;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: transform 0.2s ease;
}
/* hover は透過ではなく「少し浮く」。影付きボタンは影が一緒に動くので浮きが強調される */
.ic-btn:hover,
.ic-btn:focus-visible { transform: translateY(calc(-1 * var(--space-2))); }
@media (prefers-reduced-motion: reduce) {
  .ic-btn { transition: none; }
  .ic-btn:hover,
  .ic-btn:focus-visible { transform: none; }
}

.ic-btn__icon {
  flex: none;
  display: block;
  width: 1.25rem;  /* 20px 丸矢印 */
  height: 1.25rem;
}
.ic-btn__icon img { width: 100%; height: 100%; }

/* --- Button（グラデ）/ Link（アウトライン）：幅240・最小180・両端揃え ------ */
.ic-btn--primary,
.ic-btn--outline {
  justify-content: space-between;
  width: 15rem;        /* 240px */
  min-width: 11.25rem; /* 180px */
  min-height: 4rem;    /* 64px（24 + 20×2）*/
  padding-inline: var(--space-40);
  text-align: center;
}
.ic-btn--primary,
.ic-btn--outline { gap: var(--space-16); }
.ic-btn--primary .ic-btn__icon,
.ic-btn--outline .ic-btn__icon {
  width: 0.75rem;  /* 12px（Figma: 10px枠 + 10%はみ出し = 12px で描画）*/
  height: 0.75rem;
}
.ic-btn--primary {
  background: var(--gradient-button);
  color: var(--color-white);
}
.ic-btn--outline {
  min-height: 4.25rem; /* 68px（64 + 線2×2）*/
  background: var(--color-white);
  border: var(--border-width-2) solid rgba(0, 111, 255, 0.92);
  color: var(--color-blue-deep);
}
.ic-btn--auto { width: auto; } /* 幅を内容に合わせたい場合 */

/* --- ヘッダー用（グラデ・白線・丸矢印）-------------------------------------- */
.ic-btn--pill {
  padding: var(--space-16) var(--space-40);
  background: var(--gradient-button-header);
  border: var(--border-width) solid var(--color-white);
  color: var(--color-white);
}

/* --- 白ボタン（MV / Contact）----------------------------------------------- */
.ic-btn--white,
.ic-btn--accent {
  min-height: 4rem; /* 64px（24 + 20×2）。Figma の線は内側描画なので線分は足さない */
  padding-inline: var(--space-40);
  background: var(--color-white);
  border: var(--border-width-2) solid var(--color-primary);
  color: var(--color-primary);
}
.ic-btn--shadow { box-shadow: var(--shadow-button); }
.ic-btn--accent {
  padding-inline: var(--space-48);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.ic-btn--accent-narrow { padding-inline: var(--space-40); } /* Money Lab Hero（Figma px40）*/
.ic-btn--deep { color: var(--color-blue-deep); } /* TOP Approach「5 WHYs」ボタン（Figma 文字色 #004ea2）*/

/* --- タグ（Figma: Money Lab > Tag 12.8px Bold・px12 py4・角丸16）------------ */
.ic-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-12);
  background: var(--color-white);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h6);
  line-height: var(--line-height-heading);
  color: var(--color-primary);
  white-space: nowrap;
  align-self: flex-start; /* 縦積みの親（card-media__body）で伸びないよう、Figma同様に内容幅で収める */
}
/* Money Lab Curriculum カードの対象学年タグ（Figma 2270:2188：背景 水色15%・文字 #333）*/
.ic-tag--tint {
  background: var(--color-tag-blue);
  color: var(--color-text-dark);
}