/* ==========================================================================
   共通部品 — 03_components.md
   ========================================================================== */

/* --- キッカー（セクション番号ラベル） ------------------------------------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}
.kicker__bar {
  width: 30px;
  height: 11px;
  background: var(--c-red);
  transform: var(--skew-kicker);
}
.kicker__label {
  font-family: var(--f-en);
  font-weight: 800;
  font-style: italic;
  font-size: 14px;
  letter-spacing: var(--ls-kicker);
  color: var(--c-navy);
}
/* 紺背景の上では文字色をオフホワイトに */
.kicker--on-navy .kicker__label { color: var(--c-offwhite); }

/* メンバーページの章見出しでは間隔が狭い */
.mb-chapter .kicker { margin-bottom: 20px; }

/* --- ボタン（塗り替わるホバー） ------------------------------------------
   03_components.md に「共通部品」として載っている塗りボタン。
   実際には各所で用途ごとにサイズが異なるため、個別に定義している。
     .cta-banner  … 全ページ下部の全幅CTA        （css/cta.css）
     .ct-submit   … お問い合わせの送信ボタン      （css/contact.css）
     .ct-home     … 完了画面の「TOPへ戻る」       （css/contact.css）
     .nf-back     … 404 の「TOPへ戻る」           （css/notfound.css）
   共通の考え方は次のとおり。
     background-image : linear-gradient(to right, 紺 50%, 赤 50%)
     background-size  : 200% 100%
     background-position : 通常 100% 0 → ホバー 0 0
   ※ 暗い背景の上ではこの動きだとボタンが背景に溶けるため、
     代わりに transform: scale(1.06) を使う（.tp-btn / .ct-btn-back）。 */

/* --- 斜めのアクセントライン ------------------------------------------------
   下層ページのヘッダー帯と 404 のヒーローで使う共通の意匠。
   紺の帯を斜めに切るように赤＋オフホワイトの線を2本重ねる。
   ※ セクション背景の切り替わり目には入れない（ヘッダー帯と404だけ）。 */
.accents { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.accents::before,
.accents::after {
  content: '';
  position: absolute;
  width: 2400px;
  transform: var(--rot-accent);
}
.accents::before { left: -5%; top: 38%; height: 2px; background: var(--c-red);      opacity: .55; }
.accents::after  { left: -8%; top: 58%; height: 1px; background: var(--c-offwhite); opacity: .35; }

/* --- 枠いっぱいに敷く写真 --------------------------------------------------
   親を position:relative にしたうえで使う。 */
.fill-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }