body {
  font-family: "Noto Sans JP", sans-serif;
}

.text-shadow {
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}

.text-stroke-white {
  -webkit-text-stroke: 4px white;
  paint-order: stroke fill;
}

.text-stroke-black {
  -webkit-text-stroke: 1px black;
}

/* Custom Colors based on the image */
.bg-brand-yellow {
  background-color: #fcde55;
}

.bg-brand-red {
  background-color: #e31c24;
}

.bg-brand-black {
  background-color: #1a1a1a;
}

.bg-brand-beige {
  background-color: #f2f2eb;
}

.bg-brand-blue {
  background-color: #d6f6fa;
}

.text-brand-red {
  color: #e31c24;
}

.triangle-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #e31c24;
  margin: 0 auto;
}

/* Tab Animation */
.store-card {
  transition: all 0.3s ease-in-out;
}

.store-card.hidden-card {
  display: none;
}

.store-card2 {
  transition: all 0.3s ease-in-out;
}

.store-card2.hidden-card {
  display: none;
}

.fade-in {
  animation: fadeIn 0.5s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- フォント設定と基本リセット --- */

/* <h1>は既に装飾済みと仮定し、h2以下を設定 */

#no-tailwind {
  /* Preflightによるリセットを打ち消し、ブラウザのデフォルトスタイルに戻す */
  all: initial;
  /* ただし、`all: initial;`はすべてのプロパティを初期値に戻すため、
     この要素がブロック要素として機能するように、displayとbox-sizingを設定し直す */
  display: block;
  box-sizing: content-box;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5; /* 通常の行の高さ */
  color: #1f2937; /* text-gray-800 or text-gray-900に近い色 */
  padding: 0rem 0.5rem;

  & h2 {
    font-size: 1.5rem; /* text-2xl相当 */
    font-weight: 700; /* font-bold相当 */
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
  }

  & h3 {
    font-size: 1.25rem; /* text-xl相当 */
    font-weight: 700;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
  }

  & h4 {
    font-size: 1.125rem; /* text-lg相当 */
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  & h5 {
    font-size: 1rem; /* text-base相当 */
    font-weight: 600; /* font-semibold相当 */
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
  }

  & h6 {
    font-size: 0.875rem; /* text-sm相当 */
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
  }

  /* --- 段落要素 (p) --- */
  /* 段落の下部にマージンを設定し、読みやすくします (mb-4相当) */
  & p {
    margin-bottom: 1rem;
  }

  /* --- リスト要素 (ul, li) --- */
  /* 標準的な箇条書きのスタイルを設定 */
  & ul {
    list-style-type: disc;
    margin-left: 1.5rem; /* 標準的なインデント */
    margin-bottom: 1rem;
    padding-left: 0;
  }

  & li {
    margin-bottom: 0.5rem;
  }

  /* --- インライン要素 (span) --- */
  /* spanはデフォルトでマージンやパディングを持たないため、装飾は不要ですが、念のためリセット */
  & span {
    /* 何も設定しない (必要に応じて装飾クラスを適用) */
  }

  /* --- テーブル要素 (table) --- */
  /* Tailwindのテーブルは通常、 border-collapse: collapse; が適用されます */
  & table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
  }

  & th,
  & td {
    padding: 0.5rem 0.75rem; /* p-2/p-3 相当 */
    border: 1px solid #e5e7eb; /* border-gray-200 相当 */
    text-align: left;
  }

  & th {
    background-color: #f9fafb; /* bg-gray-50 相当 */
    font-weight: 600;
  }
  & div{
    padding:0.5rem 0rem;
  }
}


/*
 * pageing
*/

/* --- ベース設定 --- */
.navigation.pagination {
    /* ナビゲーション全体を中央揃えにし、下部にマージンを設ける */
    display: flex;
    justify-content: center;
    margin-top: 2rem; /* mt-8 相当 */
    margin-bottom: 2rem; /* mb-8 相当 */
    font-size: 1rem; /* text-base 相当 */
}

.screen-reader-text {
    /* Tailwindのscreen-readerクラスのように、見えないが読み取り可能にする */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.nav-links {
    /* リンクコンテナ内の要素を並べる */
    display: flex;
    gap: 0.5rem; /* space-x-2 相当 */
    align-items: center;
}

/* --- リンクと現在のページ --- */
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem; /* w-10 相当 */
    height: 2.5rem; /* h-10 相当 */
    padding: 0 0.5rem; /* px-2 相当 */
    border-radius: 0.375rem; /* rounded-md 相当 */
    font-weight: 500; /* font-medium 相当 */
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* 通常のリンク (hover/focus時のスタイル) */
a.page-numbers {
    color: #4b5563; /* text-gray-600 相当 */
    background-color: #f3f4f6; /* bg-gray-100 相当 */
    text-decoration: none;
}

a.page-numbers:hover,
a.page-numbers:focus {
    color: #1f2937; /* text-gray-800 相当 */
    background-color: #e5e7eb; /* bg-gray-200 相当 */
}

/* 現在のページ (current) */
.page-numbers.current {
    color: #ffffff; /* text-white 相当 */
    background-color: #1d4ed8; /* bg-blue-700 相当 */
    font-weight: 700; /* font-bold 相当 */
    cursor: default;
}

/* 次へ (next) リンクの装飾 */
a.page-numbers.next {
    /* 「次へ>>」ボタンは少し幅を広くとる */
    min-width: auto;
    padding: 0 1rem; /* px-4 相当 */
    font-weight: 600; /* font-semibold 相当 */
}