@charset "utf-8";
/* CSS Document */

/* FAQページ専用スタイル */
.faq-container {
    width: 100%;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 40px; /* 各質問ごとの余白 */
}

.faq-question {
    position: relative;
    padding-left: 2em; /* Q.のスペースを確保 */
    font-size: 11pt;
    font-weight: bold;
    color: #5b810c; /* サイトのテーマカラー */
    border-bottom: 1px dotted #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.faq-question::before {
    content: 'Q.';
    position: absolute;
    left: 0;
    top: 0;
}

.faq-answer {
    position: relative;
    padding-left: 2em; /* A.のスペースを確保 */
    line-height: 1.8;
}

.faq-answer::before {
    content: 'A.';
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
}

/* FAQページ内リンクのボタンスタイル */
.faq-index {
  display: flex; /* ボタンを横並びに */
  flex-wrap: wrap; /* スマホなどで画面幅が狭い場合に折り返す */
  justify-content: center; /* ボタンを中央揃えに */
  gap: 15px; /* ボタン同士の間隔 */
  margin-bottom: 50px; /* ボタンエリア全体の下の余白 */
}

.faq-index-button {
  display: inline-block;
  padding: 12px 25px;
  background-color: #f0f0f0; /* 背景色 */
  color: #333; /* 文字色 */
  text-decoration: none;
  border-radius: 8px; /* 角を丸くする */
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 薄い影を付ける */
  transition: all 0.2s ease; /* ホバー時のアニメーション */
}

.faq-index-button:hover {
  background-color: #e51373; /* ホバー時の背景色 */
  color: #fff; /* ホバー時の文字色 */
  transform: translateY(-2px); /* 少し浮き上がる動き */
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}


/* FAQカテゴリ見出しのデザイン */
.faq-category {
    margin-bottom: 50px; /* カテゴリごとの大きな余白 */
}

.faq-category-title {
    color: #8EC31F;
    font-size: 1.5em; /* h1より少し小さいサイズ */
    border-bottom: 1px solid #8EC31F;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

/* リンクの特定の部分だけスタイルを変更するためのCSS */

/* リンク全体（オンラインストアはこちら）のスタイル */
.custom-link {
  color: #e51373; /* 文字色をピンク系に変更（お好きな色に調整してください） */
  text-decoration: none; /* デフォルトの下線を削除 */
  font-weight: bold;     /* 少し目立たせるために太字に */
}

/* リンクの中の「こちら」の部分のスタイル */
.custom-link .underline {
  text-decoration: underline; /* こちらにだけ下線を引く */
}