/* ボタン共通スタイル */
.fs-c-button,
.fs-c-button:link,
.fs-c-button:visited {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 30px;
  text-align: center;
  display: inline-block;
  transition: background-color 0.3s, transform 0.2s ease;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border: 1px solid transparent;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
}

/* ホバー時：浮き上がり */
.fs-c-button:hover {
  transform: translateY(-3px);
}

/* アクティブ時：押し込み */
.fs-c-button:active {
  transform: translateY(1px);
}

/* カートに入れるボタン - コントラストを高めたローズピンク */
.fs-c-productCartButton {
  background-color: #cb9999;
}

/* 購入手続きへ進むボタン - くすみブルーグレー */
.fs-c-checkoutButton {
  background-color: #99bbcc;
}

/* 会員登録ボタン - 柔らかなラベンダーグレー */
.fs-c-memberRegisterButton {
  background-color: #b899cc;
}

/* ログインボタン - コントラスト強めのベージュブラウン */
.fs-c-loginButton {
  background-color: #ccb999;
}

/* お気に入りに追加ボタン - やや深みのあるミントグリーン */
.fs-c-wishlistButton {
  background-color: #99ccb1;
}

/* 任意の場所で中央配置したい場合に使う親コンテナ */
.button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center; /* 縦中央も必要なとき */
  margin-bottom: 2.5em; /* 次のカテゴリと間が詰まらないように広めに調整 */
}

/* カテゴリブロック間の余白を確保するためのli調整 */
#categories li {
  margin-bottom: 4em; /* セクション間をしっかり取る */
  list-style: none;   /* 必要に応じてリストスタイルを消す */
}

ul, li {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

li::marker {
  content: none !important;
  display: none !important;
}

/* セクション自体の間隔を確保 */
section {
  margin-bottom: 5em;
}

/* 画像リンク用キャプション */
.image-link-caption {
  font-size: 0.75rem;        /* x-small 相当 */
  color: #555;               /* 控えめで視認性の良いグレー */
  margin: 12px 0 12px 0;     /* 上下のマージンを確保して浮き上がりに対応 */
  text-align: left;          /* 左寄せ */
}

/* カテゴリー説明（リンク先説明用） */
.category-description {
  font-size: 1.5rem;              /* 読みやすく強調されたサイズ */
  color: #333;                    /* 濃いめグレーで可読性強化 */
  background-color: #f7f7f7;      /* やさしいライトグレー背景 */
  padding: 1em;                   /* テキスト周囲に余白 */
  line-height: 1.6;               /* 読みやすい行間 */
  margin: 2em 0 2em 0;            /* 上下に十分な間隔を確保（次のカテゴリと距離を取る） */
}

/* 画像リンクボタン（角丸なし＋シャドウ＋ホバー浮き上がり） */
.image-link-button img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0; /* 角丸なし */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* おしゃれなシャドウ */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-link-button img:hover {
  transform: translateY(-4px); /* 浮き上がり */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25); /* ホバー時の濃いシャドウ */
}

/* セクションタイトル（h2） - ボタンに調和するローズ系カラーで強調 */
.heading-section {
  font-size: 2.5rem;              /* 約40px - 大見出しとしてしっかり見せる */
  color: #a06060;                 /* ボタンのローズと調和するやや深みのある色 */
  margin: 2em 0 1em 0;            /* 上下の章間余白を強調 */
  font-weight: bold;
  border-left: 5px solid #a06060; /* 左にアクセント線 */
  border-bottom: 2px solid #a06060; /* 下にも線を引く */
  padding-left: 0.5em;            /* 左線とテキストの余白 */
  padding-bottom: 0.3em;          /* 下線とテキストの間隔 */
}

/* 小見出し（h3） - ボタンや見出しと調和するアクセント付き */
.heading-sub {
  font-size: 1.5rem;              /* 約24px - セクションに合わせて拡大 */
  color: #666;                    /* 落ち着いた中間グレー */
  margin: 1.5em 0 0.75em 0;
  font-weight: bold;
  border-left: 4px solid #ccc;    /* 優しい印象の左線 */
  padding-left: 0.6em;            /* 左線との間隔 */
}

/* FAQセクション用スタイル */
#faq dl {
  margin-top: 2em;
  border-top: 1px solid #ccc;
}

#faq dt {
  font-weight: bold;
  margin-top: 1.5em;
  color: #444;
  font-size: 1.25rem; /* 少し大きめで視認性向上 */
}

#faq dd {
  margin: 0.5em 0 1.5em 1em;
  color: #666;
  line-height: 1.8;
  font-size: 1.125rem; /* やや大きめにして可読性向上 */
  background-color: #f9f9f9;
  padding: 0.75em 1em;
  border-left: 4px solid #ddd;
  border-radius: 4px;
}

/* レビューセクション用スタイル（吹き出し風） */
#reviews .review {
  position: relative;
  background-color: #f4f4f4;
  border-left: 4px solid #cb9999;
  padding: 1em;
  margin-bottom: 2em;
  font-size: 1.25rem;
  color: #444;
  line-height: 1.6;
  border-radius: 10px;
}

#reviews .review::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 2em;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #f4f4f4;
}

/* ブランド紹介セクション */
#about-t-fal .brand-history {
  font-size: 1.125rem;          /* 読みやすいサイズ感（18px相当） */
  color: #444;
  line-height: 1.8;
  background-color: #f7f7f7;    /* 読みやすく柔らかい背景 */
  padding: 2em;
  border-left: 6px solid #a06060; /* ローズカラーのアクセント */
  margin-top: 1.5em;
  border-radius: 6px;
}