/* 同じ種類のUIの反応はここで管理。タップ中はactive、マウスはhover。 */
:root {
  --interaction-duration: 180ms;
}
:is(
  .button,
  .menu-toggle,
  .menu-dismiss,
  .hero-motion-toggle,
  .service-card,
  .case-card > a,
  .related-services a,
  .text-link,
  .site-navigation > a,
  .footer-navigation a,
  .company-links a,
  .news-list a,
  .breadcrumbs a,
  .inline-link,
  .faq-item summary
) {
  transition:
    color var(--interaction-duration) ease,
    background-color var(--interaction-duration) ease;
}
.text-link {
  --arrow-direction: 1;
  --arrow-rotation: 0deg;
  --arrow-offset: 0px;
}
.text-link:is(.back-link, .news-back) {
  --arrow-direction: -1;
  --arrow-rotation: 180deg;
}
.text-link img {
  transform: translateX(calc(var(--arrow-offset) * var(--arrow-direction)))
    rotate(var(--arrow-rotation));
  transition: transform var(--interaction-duration) ease;
}
.button-primary:is(:focus-visible, :active) {
  background-color: var(--green-dark);
}
.button-outline:is(:focus-visible, :active) {
  background-color: var(--green);
  color: white;
}
/* ページ追加ボタンの矢印も、反転した文字色に合わせる。 */
[data-pagination-more]:is(:focus-visible, :active) img {
  filter: brightness(0) invert(1);
}
.button-white:is(:focus-visible, :active) {
  background-color: var(--tag-bg);
}
:is(.menu-toggle, .menu-dismiss, .hero-motion-toggle):is(:focus-visible, :active) {
  background-color: var(--tag-bg);
}
:is(
    .footer-navigation a,
    .company-links a,
    .news-list a,
    .breadcrumbs a,
    .inline-link
  ):is(:focus-visible, :active) {
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.text-link:is(:focus-visible, :active) {
  color: var(--green-dark);
  --arrow-offset: 3px;
}
.faq-item summary:is(:focus-visible, :active) {
  background-color: var(--tag-bg);
}
@media (hover: hover) {
  .button-primary:hover {
    background-color: var(--green-dark);
  }
  .button-outline:hover {
    background-color: var(--green);
    color: white;
  }
  [data-pagination-more]:hover img {
    filter: brightness(0) invert(1);
  }
  .button-white:hover {
    background-color: var(--tag-bg);
  }
  :is(.menu-toggle, .menu-dismiss, .hero-motion-toggle):hover {
    background-color: var(--tag-bg);
  }
  :is(
      .footer-navigation a,
      .company-links a,
      .news-list a,
      .breadcrumbs a,
      .inline-link
    ):hover {
    color: var(--green-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .text-link:hover {
    color: var(--green-dark);
    --arrow-offset: 3px;
  }
  .faq-item summary:hover {
    background-color: var(--tag-bg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .text-link {
    --arrow-offset: 0px !important;
  }
}

/* クリックできるカードは、元の背景色を保ち、影・高さで反応を揃える。 */
:is(.service-card, .case-card:has(> a), .related-services a) {
  transition:
    transform 240ms ease,
    box-shadow 240ms ease;
}
.case-media {
  overflow: hidden;
}
.case-media .case-image {
  transition: transform 360ms ease;
}
:is(.service-card, .related-services a):is(:focus-visible, :active),
.case-card:has(> a:is(:focus-visible, :active)) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(35 65 22 / 8%);
}
.case-card > a:is(:focus-visible, :active) .case-image {
  transform: scale(1.04);
}
@media (hover: hover) and (pointer: fine) {
  :is(.service-card, .related-services a):hover,
  .case-card:has(> a:hover) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgb(35 65 22 / 8%);
  }
  .case-card > a:hover .case-image {
    transform: scale(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.service-card, .case-card:has(> a), .related-services a),
  .case-media .case-image {
    transform: none !important;
  }
}

/* ナビは一時的な反応を薄く、現在位置を明確な背景色で表示。 */
.site-navigation > a:not(.button) {
  border-radius: 8px;
  background-color: var(--nav-background, transparent);
  color: var(--nav-color, var(--text));
  text-decoration: none;
}
.site-navigation > .header-contact {
  background-color: var(--nav-button-bg, var(--green));
  text-decoration: none;
}
/* 未選択の項目だけに薄い反応を付け、現在位置の色を上書きしない。 */
.site-navigation > a:not([aria-current]):is(:focus-visible, :active) {
  --nav-background: rgb(42 101 13 / 6%);
  --nav-button-bg: #2d7b0e;
}
@media (hover: hover) {
  .site-navigation > a:not([aria-current]):hover {
    --nav-background: rgb(42 101 13 / 6%);
    --nav-button-bg: #2d7b0e;
  }
}
.site-navigation > a[aria-current] {
  --nav-color: var(--green-dark);
  --nav-background: var(--panel-bg);
  --nav-button-bg: var(--green-dark);
}
@media (max-width: 1199px) {
  .site-navigation > a:not(.button) {
    padding-inline: 16px;
    border-top-color: transparent;
  }
  .js .site-navigation {
    gap: 4px;
  }
  .js .site-navigation > a:not(.button) {
    padding-inline: 16px;
    border-top-color: transparent;
  }
}

/* 短いタップでも反応が見えるよう、押した瞬間に状態を切り替える。 */
:is(.button, .menu-toggle, .menu-dismiss, .hero-motion-toggle,
    .service-card, .related-services a, .text-link, .site-navigation > a,
    .footer-navigation a, .company-links a, .news-list a, .breadcrumbs a,
    .inline-link, .faq-item summary):active,
.case-card:has(> a:active),
.case-card > a:active .case-image,
.text-link:active img {
  transition-duration: 0s;
}

/* 固定UIは位置を保ってフェード。キーボード移動先も維持する。 */
.site-header,
.mobile-contact.button {
  transition:
    opacity 180ms ease,
    background-color var(--interaction-duration) ease,
    color var(--interaction-duration) ease;
}
.scroll-ui-hidden .site-header,
.scroll-ui-hidden .mobile-contact {
  opacity: 0;
  pointer-events: none;
}
.keyboard-navigation .site-header:focus-within,
.keyboard-navigation .mobile-contact:focus {
  transition: none;
}


.mobile-contact.button:active { transition-duration: 0s; }


/* お知らせ一覧はタイトルだけに下線を付け、日付には付けない。 */
.news-list a:is(:focus-visible, :active) { text-decoration: none; }
.news-list a:is(:focus-visible, :active) :is(h2, h3) {
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (hover: hover) {
  .news-list a:hover { text-decoration: none; }
  .news-list a:hover :is(h2, h3) {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}