/* ==========================================================================
   Shared hover / focus interactions.
   Loaded LAST (see index.html) so it wins over the component stylesheets
   without needing !important. The matching :hover rules those stylesheets
   used to carry have been removed at the source (see the comments left
   behind in chrome.css, fluid.css, shared.css and pages/*.css).

   Rules:
   - Every hover effect also fires on :focus-visible for keyboard users.
   - Motion (transform / box-shadow) is skipped on touch input via
     @media (hover:hover); plain color/underline changes are not gated
     since they carry no layout or motion cost on touch.
   - prefers-reduced-motion disables the movement but keeps color/background
     changes.
   ========================================================================== */

/* ---------------------------------------------------------------------
   1. Buttons — every filled and outline button on the site:
      .hm-button (incl. the 40px header button), .f-button, .f-button-outline,
      .pg-button-primary/.pg-button-outline/.pg-button-cta, .lc-pill,
      and the .ct-submit form button (which is also an .f-button).
      Hover/focus-visible: lift + shadow + arrow-right 5px.
      Filled buttons also lighten; outline buttons invert to a navy fill.
--------------------------------------------------------------------- */
:is(.hm-button, .f-button, .f-button-outline, .pg-button, .lc-pill) {
  transition:
    transform .25s cubic-bezier(.2, .7, .2, 1),
    box-shadow .25s cubic-bezier(.2, .7, .2, 1),
    background .25s cubic-bezier(.2, .7, .2, 1),
    color .25s cubic-bezier(.2, .7, .2, 1),
    border-color .25s cubic-bezier(.2, .7, .2, 1);
}
:is(.hm-button, .f-button, .f-button-outline, .pg-button, .lc-pill) > span {
  display: inline-block;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) {
  :is(.hm-button, .f-button, .f-button-outline, .pg-button, .lc-pill):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(3, 40, 76, .22);
  }
  :is(.hm-button, .f-button, .f-button-outline, .pg-button, .lc-pill):hover > span {
    transform: translateX(5px);
  }
}
:is(.hm-button, .f-button, .f-button-outline, .pg-button, .lc-pill):focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(3, 40, 76, .22);
}
:is(.hm-button, .f-button, .f-button-outline, .pg-button, .lc-pill):focus-visible > span {
  transform: translateX(5px);
}
/* Filled buttons (navy #03284c at rest) lighten on hover/focus. */
/* 塗りのボタンは白抜きに反転する。枠は内側の影で描くので、乗せても大きさが動かない。 */
:is(.hm-button, .f-button, .pg-button-primary, .pg-button-cta, .ct-submit):is(:hover, :focus-visible) {
  background: #fff;
  color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy), 0 10px 22px rgba(3, 40, 76, .18);
}
/* 主要CTAはホバーでもテラコッタの枠にそろえる（型は f-button と同じ lift + 反転）。 */
.f-button-cta:is(:hover, :focus-visible){color:var(--terracotta);box-shadow:inset 0 0 0 1px var(--terracotta),0 10px 22px rgba(3,40,76,.18)}
/* Outline / pill buttons (white at rest) invert to a navy fill, white text. */
:is(.f-button-outline, .pg-button-outline, .lc-pill):is(:hover, :focus-visible) {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* ---------------------------------------------------------------------
   2. Text links with an arrow — arrow moves right 5px on hover/focus.
      No color change. Covers the shared .hm-link/.f-link/.pg-link plus the
      page-specific "→"/"←" links that share the same "label + trailing
      <span>" shape: the case-detail back link and inline aside links,
      and the news sidebar related-links.
--------------------------------------------------------------------- */
:is(.hm-link, .f-link, .pg-link, .cd-back, .cd-service a, .cd-related a, .nw-links a) > span {
  display: inline-block;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) {
  :is(.hm-link, .f-link, .pg-link, .cd-back, .cd-service a, .cd-related a, .nw-links a):hover > span {
    transform: translateX(5px);
  }
}
/* 文字の色をテラコッタに替えて反応を示す（矢印の移動と合わせる）。 */
:is(.hm-link, .f-link, .pg-link, .cd-back, .cd-service a, .cd-related a, .nw-links a,
    .nw-back a, .csd-back, .csd-related-link, .cs-related-link, .tk-flow-link,
    /* 矢印のない、文章のなかのリンクも同じ反応にする。
       パンくず（全ページ）、お知らせ本文、地図、同意欄、プライバシーポリシー本文。 */
    .pg-breadcrumb a, .nw-text a, .ab-map-link, .ct-consent a, .pv-text a,
    .pv-toc a):is(:hover, :focus-visible) {
  color: var(--terracotta);
}
:is(.hm-link, .f-link, .pg-link, .cd-back, .cd-service a, .cd-related a, .nw-links a):focus-visible > span {
  transform: translateX(5px);
}

/* ---------------------------------------------------------------------
   3. Header navigation (.hm-nav a) — a 2px navy underline grows from the
      left on hover/focus (replaces the old terracotta color change).
      The current-section item (aria-current="page", set by app.js) shows
      the same underline permanently; the mobile dropdown (≤959px, same
      markup) also renders it bold.
      Footer navigation (.hm-footer a) keeps a plain underline on hover.
--------------------------------------------------------------------- */
.hm-nav a {
  position: relative;
}
.hm-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) {
  .hm-nav a:hover::after {
    transform: scaleX(1);
  }
}
.hm-nav a:focus-visible::after {
  transform: scaleX(1);
}
.hm-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}
@media (max-width: 959px) {
  .hm-nav a[aria-current="page"] {
    font-weight: 700;
  }
}
.hm-footer a:is(:hover, :focus-visible) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------
   4. Cards that are links and contain a photo — the photo slowly zooms to
      1.05 within its (already-clipped) frame on hover/focus; the card
      itself never moves.
      - .hm-service-card (TOP services grid): plain photo, zoom the <img>.
        The card gets overflow:hidden so the zoom can't spill past it.
      - .cl-card-link (columns list): plain photos zoom; sprite-cropped
        photos (.cl-photo-crop) are explicitly excluded, matching the
        existing .cl-photo wrapper clip.
      - .hm-case-card (TOP cases grid) uses a real photo (.hm-case-photo)
        but is intentionally NOT zoomed: the wrapper also carries an
        absolutely-positioned "→" badge that a wrapper-level zoom would
        clip or misplace, so this card gets no hover motion at all
        (allowed by spec as "apply no zoom").
      Non-link cards (.cs-card, .sv-card, .sc-case, .bz-use, .ny-card,
      .pf-exp-card, .lc-record, .tk-lesson, .hm-journal-card, etc.) are
      plain <li>/<div> elements with no <a>, so they get no rule here.
--------------------------------------------------------------------- */
.hm-service-card {
  overflow: hidden;
}
.hm-service-photo {
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) {
  .hm-service-card:hover .hm-service-photo {
    transform: scale(1.05);
  }
}
.hm-service-card:focus-visible .hm-service-photo {
  transform: scale(1.05);
}

.cl-photo:not(.cl-photo-crop) > img {
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) {
  a.cl-card-link:hover .cl-photo:not(.cl-photo-crop) > img {
    transform: scale(1.05);
  }
}
a.cl-card-link:focus-visible .cl-photo:not(.cl-photo-crop) > img {
  transform: scale(1.05);
}

/* 「他のサービス」と事例詳細の「関連する事例」も、他の写真カードと同じく拡大する。 */
:is(.pg-other-photo, .csd-related-photo) > img {
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) {
  :is(.pg-other-card, .csd-related-card):hover :is(.pg-other-photo, .csd-related-photo) > img {
    transform: scale(1.05);
  }
}
:is(.pg-other-card, .csd-related-card):focus-visible :is(.pg-other-photo, .csd-related-photo) > img {
  transform: scale(1.05);
}

/* ---------------------------------------------------------------------
   5. Reduced motion: drop the movement, keep color/background changes.
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :is(.hm-button, .f-button, .f-button-outline, .pg-button, .lc-pill),
  :is(.hm-button, .f-button, .f-button-outline, .pg-button, .lc-pill) > span,
  :is(.hm-link, .f-link, .pg-link, .cd-back, .cd-service a, .cd-related a, .nw-links a) > span,
  .hm-nav a::after,
  .hm-service-photo,
  .cl-photo:not(.cl-photo-crop) > img,
  :is(.pg-other-photo, .csd-related-photo) > img {
    transition-duration: .01ms !important;
  }
  :is(.hm-button, .f-button, .f-button-outline, .pg-button, .lc-pill):is(:hover, :focus-visible) {
    transform: none;
  }
  .hm-service-card:is(:hover, :focus-visible) .hm-service-photo,
  a.cl-card-link:is(:hover, :focus-visible) .cl-photo:not(.cl-photo-crop) > img,
  :is(.pg-other-card, .csd-related-card):is(:hover, :focus-visible) :is(.pg-other-photo, .csd-related-photo) > img {
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   6. カード（写真つきのリンク）— 乗せると面が淡い青に染まり、枠線が紺になる。
      文字色は変えない。写真はゆっくり拡大する（4. の規則）。
      文字だけの行（お知らせ一覧など）は下線で扱う。
--------------------------------------------------------------------- */
:is(.hm-service-card, .hm-case-card, .cs-card-link, .lc-record-link,
    a.cl-card-link, .csd-pagenav-link:not(.csd-pagenav-empty), .hm-journal-card > a,
    .pg-other-card, .csd-related-card) {
  transition:
    background .25s cubic-bezier(.2, .7, .2, 1),
    border-color .25s cubic-bezier(.2, .7, .2, 1);
}
:is(.hm-service-card, .hm-case-card, .cs-card-link, .lc-record-link,
    a.cl-card-link, .csd-pagenav-link:not(.csd-pagenav-empty), .hm-journal-card > a,
    .pg-other-card, .csd-related-card):is(:hover, :focus-visible) {
  background: var(--pale);
  border-color: var(--navy);
}

/* お知らせ一覧の行・目次など、文字だけのリンクは見出しに下線を出す。 */
.nw-list-item > a:is(:hover, :focus-visible) .nw-list-title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}