/* 土台。見た目の値は tokens.css の変数を使う */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-navy);
  background: var(--color-white);
  /* Macのブラウザは文字をFigmaより太めに描くので、Figmaと同じ細さの描き方にそろえる（本人 10/26「全体的に書体が太い」） */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* はみ出す飾り（背景の筆など）は、はみ出したまま組んで画面の外は切る。横スクロールは出さない */
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* 画面幅ごとのレイアウトは、実装しながら見え方を探って決める（2026-10-15 本人決定）。
   決めた幅はここに追記する */
section { position: relative; }
/* ページ内リンクで飛んだとき、固定ヘッダーの下に隠れないようにする */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 画面には出さず、読み上げ・検索にだけ渡す文字（画像にした文章の中身など） */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* すりガラスのまるボタンは、押したときもすりガラスのまま（スマホのタップの灰色を出さない・本人 10/20） */
.hamburger, .btn-close, .modal__close, .carousel__arrow, .work__play { -webkit-tap-highlight-color: transparent; }
/* 押せるものは全部：タップの灰色を出さない。長押しのプレビュー（白い縁）はiPhoneの標準のまま＝新しいタブで開く・リンクのコピーを残す（本人 10/22） */
a, button { -webkit-tap-highlight-color: transparent; }

/* 矢印「→」のホバー：右へ抜けて、左から戻ってくる（1回・0.6秒。本人 10/20 tools/arrow.html の2案）
   対象＝03のカードの「もっと見る」・モーダルの「詳細を見る」などの丸いボタン */
@keyframes arrow-through {
  0% { transform: none; opacity: 1; }
  45% { transform: translateX(10px); opacity: 0; }
  46% { transform: translateX(-10px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@media (hover: hover) {
  .svc-card:hover .svc-card__arrow svg, .pill-btn:hover svg { animation: arrow-through .6s ease; }
}