@font-face {
  font-family: 'web_craftMincho';
  src: url('../fonts/kraftmincho-subset.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* フォントセット */
  --heading-font: 'web_craftMincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --body-font: 'Kiwi Maru', -apple-system, BlinkMacSystemFont,
    'Yu Gothic', 'Hiragino Kaku Gothic ProN', system-ui, sans-serif;
  /* ベースレイアウト用変数（必要に応じて調整OK） */

}

body {
  font-family: var(--body-font);
  background-color: #184448;
  overflow-x: hidden;
}

h1,
h2,
.heading {
  font-family: var(--heading-font);
}

/* =======================================
   クリックできる要素共通のフィードバック
   （.ofuda, .omamori, .profile_sns-link, .foot_icon-link など）
   ======================================= */

.clickable {
  cursor: pointer;
  transition:
    transform 150ms ease-out,
    box-shadow 150ms ease-out,
    background-color 150ms ease-out,
    filter 150ms ease-out;
}

/* キーボード操作用のフォーカスリング */
.clickable:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.4);  /* 好きな色に変えてOK */
  outline-offset: 3px;
}

/* ─────────────────────────────
   PC向け：hoverでふわっと浮く
   ───────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
  }
}

/* ─────────────────────────────
   スマホ向け：タップ中だけ少し沈む
   ───────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .clickable:active {
    transform: translateY(1px) scale(0.97);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
  }
}

/* 動きがしんどい人向け：OS設定で「動きを減らす」の場合は
   トランジションだけオフにしておく（任意だけど一応） */
@media (prefers-reduced-motion: reduce) {
  .clickable {
    transition: none;
  }
}