/*
 * UI アイコン（SVG マスク）とインタラクション
 * ※ main.css の変数・ベーススタイルの後に読み込む
 */
:root {
  /* 細いストローク（約 1.25）で統一し、塗りつぶし矢印より軽い印象に */
  --icon-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M5%2012h14M12%205l7%207-7%207%22%2F%3E%3C%2Fsvg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M9%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E");
  --icon-external: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M18%2013v6a2%202%200%2001-2%202H5a2%202%200%2001-2-2V8a2%202%200%20012-2h6%22%2F%3E%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M15%203h6v6%22%2F%3E%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M10%2014L21%203%22%2F%3E%3C%2Fsvg%3E");
  --icon-send: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22black%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M22%202L11%2013M22%202l-7%2020-4-9-9-4%2020-7z%22%2F%3E%3C%2Fsvg%3E");
  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink-strong);
}

/* ----- グローバルナビ・フッター（テキストリンク） ----- */
.nav-main a:not(.btn),
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-main a:not(.btn)::before,
.site-footer__nav a::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.45;
  mask: var(--icon-chevron) center / contain no-repeat;
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
  transition:
    opacity 0.25s var(--ease),
    transform 0.3s var(--ease-out);
}

.nav-main a:not(.btn):hover::before,
.site-footer__nav a:hover::before {
  opacity: 0.85;
  transform: translate(3px, -1px);
}

.nav-main a:not(.btn)[aria-current="page"]::before,
.site-footer__nav a[aria-current="page"]::before {
  opacity: 0.95;
}

/* ----- CTA ボタン（矢印） ----- */
.btn {
  gap: 0.5rem;
}

a.btn--primary::after,
button.btn--primary:not([type="submit"])::after {
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background: #fff;
  mask: var(--icon-arrow) center / contain no-repeat;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  transition: transform 0.3s var(--ease-out);
}

a.btn--outline::after,
button.btn--outline::after {
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background: var(--ink-strong);
  mask: var(--icon-arrow) center / contain no-repeat;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  transition: transform 0.3s var(--ease-out);
}

button.btn--primary[type="submit"]::after {
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background: #fff;
  mask: var(--icon-send) center / contain no-repeat;
  -webkit-mask: var(--icon-send) center / contain no-repeat;
  transition: transform 0.3s var(--ease-out);
}

a.btn--primary:hover::after,
button.btn--primary:hover::after {
  transform: translateX(3px);
}

a.btn--outline:hover::after,
button.btn--outline:hover::after {
  transform: translateX(3px);
}

/* ----- 本文・リストの外部リンク ----- */
.prose a[target="_blank"]:not(.btn)::after,
.list-check a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-left: 0.2em;
  vertical-align: -0.12em;
  background: currentColor;
  opacity: 0.55;
  mask: var(--icon-external) center / contain no-repeat;
  -webkit-mask: var(--icon-external) center / contain no-repeat;
  transition: opacity 0.2s var(--ease);
}

.prose a[target="_blank"]:not(.btn):hover::after,
.list-check a[target="_blank"]:hover::after {
  opacity: 0.9;
}

/* ----- モバイル：ハンバーガー → 閉じる ----- */
@media (max-width: 960px) {
  .nav-toggle {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

.nav-toggle {
  gap: 0;
}

.nav-toggle__bars {
  display: block;
  width: 1.1rem;
  height: 1.5px;
  background: var(--ink-strong);
  position: relative;
  transition: background 0.2s var(--ease);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--ink-strong);
  transition: transform 0.3s var(--ease-out), top 0.3s var(--ease-out);
}

.nav-toggle__bars::before {
  top: -5px;
}

.nav-toggle__bars::after {
  top: 5px;
}

.site-header--nav-open .nav-toggle__bars {
  background: transparent;
}

.site-header--nav-open .nav-toggle__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.site-header--nav-open .nav-toggle__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ----- フォーカス可視化（キーボード操作） ----- */
.nav-main a:focus-visible:not(.btn),
.site-footer__nav a:focus-visible,
.btn:focus-visible,
.logo:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

.btn:focus-visible {
  border-radius: 999px;
}

.logo:focus-visible {
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-main a:not(.btn)::before,
  .site-footer__nav a::before,
  a.btn::after,
  button.btn::after {
    transition: none;
  }

  .nav-main a:not(.btn):hover::before,
  .site-footer__nav a:hover::before,
  a.btn:hover::after,
  button.btn:hover::after {
    transform: none;
  }

  .nav-main .btn:hover,
  .nav-main .btn:active {
    transform: none;
    box-shadow: none;
  }
}