/* ============================
   お札セクション
   ============================ */

/* セクション全体（お札ナビ用） */
.section-ofuda {
  padding-block: clamp(24px, 5vw, 40px);
}

/* お札リスト（PCでは中央に横並び） */
.ofuda_list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  padding-block: 16px 24px;

  list-style: none;   /* ★ 箇条書きの点を消す */
  margin: 0;          /* ★ デフォルトの余白も消しておくと安心 */
  padding-inline: 0;  /* ★ 左のインデントも消す */
}

/* li：折り返さないようにしておく（SP横スクロール用にも効く） */
.ofuda_item {
  flex: 0 0 auto;
}

/* お札ボタン本体（装飾リセット） */
.ofuda {
  display: inline-flex;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;

  /* クリック領域を画像ぴったりに */
  line-height: 0;
}

/* お札画像 */
.ofuda img {
  display: block!important;
  height: 260px;  /* 必要なら調整：お札の高さ上限 */
  width: auto;
}

/* hover / focus 時にちょい強調（画像はそのままでもOK） */
.ofuda:hover img,
.ofuda:focus-visible img {
  filter: brightness(1.05);
}

/* 選択中（）を少しだけ目立たせておく
   → 後でJSで水色お札に差し替われば、さらにわかりやすくなる */
.ofuda:hover img {
  transform: translateY(-4px);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

/* キーボードフォーカス枠（ブラウザのデフォルトが気になる場合） */
.ofuda:focus-visible {
  outline: 2px solid rgba(228, 246, 240, 0.8);
  outline-offset: 4px;
}

/* =======================================
   お札タグ専用：ホバーでカタカタ揺れる
   ======================================= */

/* PCだけ揺れる（スマホはactiveだけ） */
@media (hover: hover) and (pointer: fine) {
  .ofuda.clickable:hover {
    animation: ofuda-shake 0.35s ease-in-out;
  }
}

/* カタカタ揺れる動き */
@keyframes ofuda-shake {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-3deg); }
  40%  { transform: rotate(2.5deg); }
  60%  { transform: rotate(-2deg); }
  80%  { transform: rotate(1.5deg); }
  100% { transform: rotate(0deg); }
}


/* ============================
   お守りセクション
   ============================ */

.section-omamori .section_body {
  /* 全体の上下余白をちょっと足したい時用（お好みで） */
  padding-top: clamp(24px, 4vw, 40px);
  padding-bottom: clamp(24px, 4vw, 40px);
}

/* フィルタリング用：ふわっと出る/消える */
.section-omamori {
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.omamori-hidden {
  display: none;
  opacity: 0;
  transform: translateY(16px); /* 少し下へフェードすると可愛い */
  pointer-events: none;        /* 押せないようにする */
}


/* お守りコンポーネント */
.omamori {
  position: relative;
  display: block;
  width: 230px;            /* お守りの横幅。お好みで */
  aspect-ratio: 563 / 693; /* お守り全体の比率に合わせて調整 */

  opacity: 0;
  transform: translateY(20px);
  transition: 
    opacity 0.5s ease,
    transform 0.5s ease;
}

.omamori.animate {
  opacity: 1;
  transform: translateY(0);
}


/* 本体SVGレイヤー */
.omamori_base {
  position: relative;
  width: 100%;
}

/* 緑パネルの“窓”になるレイヤー */
.omamori_panel {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  aspect-ratio: 563 / 396;   /* 緑パネルの比率に合わせて調整 */
  overflow: hidden;
  z-index: 0;
}

/* 透かし背景＋マスク */
.omamori-with-bg .omamori_bg {
  position: absolute;
  inset: 0;

  background-image: var(--omamori-bg-image);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;

  mask-image: url("../img/ui/omamori_mask.svg");
  -webkit-mask-image: url("../img/ui/omamori_mask.svg");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center top;
  -webkit-mask-position: center top;

  opacity: 1;
  pointer-events: none;
}

.omamori_himo {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -10%);
  /* -◯◯% は微調整用。-40〜-60%くらいで試してみて！ */
  width: 30%;
  /* 結び目の横幅。大きさに合わせて調整 */
  height: auto;
  z-index: 3;
  /* テキストや本体より手前にしたいなら高めに */
  pointer-events: none;
  /* クリック邪魔しない用（任意） */
}

/* 個別背景画像 */
.omamori-goirai.omamori-with-bg {
  --omamori-bg-image: url("../img/thumb/card5_atolie.webp");
}
.omamori-tikurin.omamori-with-bg {
  --omamori-bg-image: url("../img/thumb/card11_bamboo.webp");
}
.omamori-suimon.omamori-with-bg {
  --omamori-bg-image: url("../img/thumb/card10_suimon.webp");
}
.omamori-atorie.omamori-with-bg {
  --omamori-bg-image: url("../img/thumb/card5_atolie.webp");
}
.omamori-Xfolio.omamori-with-bg {
  --omamori-bg-image: url("../img/thumb/card3_Xfolio.webp");
}
.omamori-tenrou.omamori-with-bg {
  --omamori-bg-image: url("../img/thumb/card7_tenrou.webp");
}
.omamori-umineko.omamori-with-bg {
  --omamori-bg-image: url("../img/thumb/card2_umineko.webp");
}
.omamori-charafan.omamori-with-bg {
  --omamori-bg-image: url("../img/thumb/card1_charafun.webp");
}
.omamori-note.omamori-with-bg {
  --omamori-bg-image: url("../img/thumb/card4_note.webp");
}
.omamori-funiki.omamori-with-bg {
  --omamori-bg-image: url("../img/thumb/card8_funiki.webp");
}
.omamori-kororin.omamori-with-bg {
  --omamori-bg-image: url("../img/thumb/card6_kororin.webp");
}
.omamori-giftee.omamori-with-bg {
  --omamori-bg-image: url("../img/thumb/card9_giftee.webp");
}

.omamori_icon {
  position: absolute;
  left: 50%;
  bottom: 65%;          /* 緑パネルのちょい上に乗せる想定ならここ調整 */
  transform: translate(-50%, 50%);
  width: 72px;           /* アイコンの直径に合わせて調整 */
  height: 86px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;            /* テキストよりちょい手前に出したいなら 2 */
}

.omamori_icon img {
  max-width: 100%;
  height: auto;
}

.omamori_content {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  padding: 4.5rem 0.5rem 1rem;
  box-sizing: border-box;
  text-align: center;
  z-index: 1;             /* 透かしより前、アイコンより後ろでもOK */
  overflow: hidden;
  color: #F2E9C6;       /* 文字色は白ベース */
  text-decoration: none;  /* リンク下線消し */

}

/* 4. アイコン・タイトル・本文 */
.omamori_title {
  font-size: 1.2rem;
  margin: 0rem 0 0.4rem;
}

.omamori_text {
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 0 0.5rem;
}

/* 並べる側 */
.omamori-list {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;              /* 真ん中寄せ */
  display: grid;
  gap: clamp(20px, 3vw, 28px) clamp(12px, 2vw, 20px);     /* カード同士の余白 */
  justify-items: center;
}

/* ============================
   レスポンシブ調整
   ============================ */

/* PC版：プロフィールをアイコン＋テキストの2カラムにする */
@media (min-width: 960px) {
  .omamori-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


@media (max-width: 959px) {
  .section-ofuda {
    padding-block: 16px 24px;
  }

  .ofuda_list {
    justify-content: flex-start;       /* 左寄せスタート */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* スクロールぬるっと */
    padding-inline: 12px;
    padding-bottom: 12px;
    gap: 16px;
  }

  .ofuda_item {
    flex: 0 0 auto; /* 折り返さず横並びのまま */
  }

  .ofuda img {
    height: 220px; /* スマホではすこーし小さく */
  }

  .omamori-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* お札リストの横スクロールバーをカスタマイズ */
.section-ofuda .ofuda_list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  /* Firefox 用（太さ＆色）*/
  scrollbar-width: thin; /* auto / thin / none */
  scrollbar-color: #264444 #0c353f; /* thumb / track */
}

/* ======== WebKit系（Chrome, Edge, Safari）用 ======== */

/* スクロールバー全体（横バーなので height を指定） */
.section-ofuda .ofuda_list::-webkit-scrollbar {
  height: 10px;              /* バーの太さ */
}

/* 背景のレール部分 */
.section-ofuda .ofuda_list::-webkit-scrollbar-track {
  background: #0c353f;      /* レールの色（背景よりちょい明るめ/暗めに） */
  border-radius: 999px;
}

/* つまみ（ドラッグする部分） */
.section-ofuda .ofuda_list::-webkit-scrollbar-thumb {
  background-color: #396d6d; /* つまみの色 */
  border-radius: 999px;
  border: 2px solid #0c353f; /* レールと一体っぽく見せる枠 */
}

/* つまみをホバーしたとき */
.section-ofuda .ofuda_list::-webkit-scrollbar-thumb:hover {
  background-color: #76a38e; /* ほんの少しだけ明るく */
}
}

@media (max-width: 589px) {
  .ofuda_list {
    gap: 12px;
    padding-inline: 8px;
  }

  .ofuda img {
    height: 200px;
  }
  .omamori-list {
  grid-template-columns: 1fr;
}




}