/* =========================================================
   人生再設計・お金・仕事の下部ワイドCTA
========================================================= */

/* =========================================================
   START FROM 39
   CATEGORY WIDE CTA
   LIFE / MONEY / WORK

   通常時：アイボリー
   操作時：カテゴリーごとのブランドカラー
========================================================= */

/* =========================================================
   01. CTA BASE
========================================================= */

:where(
  .sf-life-wide-link,
  .sf-money-wide-link,
  .sf-work-wide-link
) > a,
:where(
  .sf-life-wide-link,
  .sf-money-wide-link,
  .sf-work-wide-link
) > a:visited {
  color: #173f38 !important;
  background: #fffaf2 !important;
  border-color: #d8cfc0 !important;
  box-shadow: 6px 6px 0 rgba(35, 62, 57, 0.2) !important;

  -webkit-tap-highlight-color: rgba(197, 109, 86, 0.18);

  transition: color 0.28s ease,
    background-color 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease !important;
}

/* =========================================================
   02. INNER DECORATION
========================================================= */

:where(
  .sf-life-wide-link,
  .sf-money-wide-link,
  .sf-work-wide-link
) > a::before {
  border-color: rgba(86, 75, 66, 0.16) !important;

  transition: border-color 0.28s ease;
}

/* =========================================================
   03. KEYBOARD FOCUS
========================================================= */

:where(
  .sf-life-wide-link,
  .sf-money-wide-link,
  .sf-work-wide-link
) > a:focus-visible {
  color: #fffaf2 !important;

  outline: 2px solid #c56d56;
  outline-offset: 4px;

  box-shadow: 5px 6px 0 rgba(197, 109, 86, 0.42) !important;

  transform: translateY(-3px) !important;
}

:where(
  .sf-life-wide-link,
  .sf-money-wide-link,
  .sf-work-wide-link
) > a:focus-visible::before {
  border-color: rgba(255, 250, 242, 0.34) !important;
}

/* =========================================================
   LIFE — Deep Plum
========================================================= */

.sf-life-wide-link > a:focus-visible {
  background: #5b3e4a !important;
  border-color: #5b3e4a !important;
}

/* =========================================================
   MONEY — Deep Blue Green
========================================================= */

.sf-money-wide-link > a:focus-visible {
  background: #194f4a !important;
  border-color: #194f4a !important;
}

/* =========================================================
   WORK — Quiet Forest
========================================================= */

.sf-work-hub
  > .sf-work-wide-link
  > a:focus-visible {
  background: #365f57 !important;
  border-color: #365f57 !important;
}

/* =========================================================
   04. POINTER HOVER
   マウス操作ができる端末だけに適用
========================================================= */

@media (hover: hover) {
  /* =========================================================
     LIFE — Deep Plum
  ========================================================= */

  .sf-life-wide-link > a:hover {
    color: #fffaf2 !important;
    background: #5b3e4a !important;
    border-color: #5b3e4a !important;
    box-shadow: 5px 6px 0 rgba(197, 109, 86, 0.42) !important;

    transform: translateY(-3px) !important;
  }

  /* =========================================================
     MONEY — Deep Blue Green
  ========================================================= */

  .sf-money-wide-link > a:hover {
    color: #fffaf2 !important;
    background: #194f4a !important;
    border-color: #194f4a !important;
    box-shadow: 5px 6px 0 rgba(197, 109, 86, 0.42) !important;

    transform: translateY(-3px) !important;
  }

  /* =========================================================
     WORK — Quiet Forest
  ========================================================= */

  .sf-work-hub
    > .sf-work-wide-link
    > a:hover {
    color: #fffaf2 !important;
    background: #365f57 !important;
    border-color: #365f57 !important;
    box-shadow: 5px 6px 0 rgba(197, 109, 86, 0.42) !important;

    transform: translateY(-3px) !important;
  }

  /* =========================================================
     Hover decoration
  ========================================================= */

  :where(
    .sf-life-wide-link,
    .sf-money-wide-link,
    .sf-work-wide-link
  ) > a:hover::before {
    border-color: rgba(255, 250, 242, 0.34) !important;
  }
}

/* =========================================================
   05. TAP / ACTIVE
========================================================= */

:where(
  .sf-life-wide-link,
  .sf-money-wide-link,
  .sf-work-wide-link
) > a:active {
  color: #fffaf2 !important;
  box-shadow: 2px 3px 0 rgba(197, 109, 86, 0.3) !important;

  transform: translateY(-1px) !important;
}

:where(
  .sf-life-wide-link,
  .sf-money-wide-link,
  .sf-work-wide-link
) > a:active::before {
  border-color: rgba(255, 250, 242, 0.34) !important;
}

/* =========================================================
   LIFE
========================================================= */

.sf-life-wide-link > a:active {
  background: #5b3e4a !important;
  border-color: #5b3e4a !important;
}

/* =========================================================
   MONEY
========================================================= */

.sf-money-wide-link > a:active {
  background: #194f4a !important;
  border-color: #194f4a !important;
}

/* =========================================================
   WORK
========================================================= */

.sf-work-hub
  > .sf-work-wide-link
  > a:active {
  background: #365f57 !important;
  border-color: #365f57 !important;
}

/* =========================================================
   06. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  :where(
    .sf-life-wide-link,
    .sf-money-wide-link,
    .sf-work-wide-link
  ) > a,
  :where(
    .sf-life-wide-link,
    .sf-money-wide-link,
    .sf-work-wide-link
  ) > a::before {
    transition: none !important;
  }
}