/* 
 ================================================================================
   楽しい和風テイスト + コントラスト強化
   (既存のスタイル＋バナー色を派手に変更)
 ================================================================================
*/

/* =============================
 * CSS変数（統合）
 * [FIX C-2] :root 3重定義を1箇所に統合
============================= */
:root {
  /* =============================================
   * CSS変数（3箇所に分散していたものを統合）
   * [FIX C-2] :root が3重定義されていたため1つに統合
   * ============================================= */
  --color-text-main: #333;
  --color-text-sub: #666;
  --color-text-muted: #999;
  --color-border: #eee;
  --color-bg-highlight: #fafafa;
  --color-bg-card: #fff;
  --color-accent: #0073aa;
  --color-amazon: #ff9900;
  --color-rakuten: #bf0000;
  --font-family-base: "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.65;
  --transition-speed: 0.2s;
  --radius-base: 4px;
  --shadow-card: 0 2px 5px rgba(0,0,0,0.1);
  --btn-font-size: 0.9rem;
  --btn-padding-y: 0.5rem;
  --btn-padding-x: 1rem;
  --color-fun-pink: #e95d75;
  --color-fun-orange: #e6843c;
  --color-fun-green: #74b383;
  --color-fun-yellow: #f9df67;
  --anim-pop-duration: 0.4s;
  --color-primary: #0066cc;
  --color-primary-hover: #005bb5;
  --color-error: #e74c3c;
  --color-bg-gradient-start: #f8fbff;
  --color-bg-gradient-end: #dfeffc;
  --color-text: #333;
  --color-text-secondary: #555;
  --color-white: #fff;
  --color-form-border: #ccc;
  --color-shadow: rgba(0, 0, 0, 0.12);
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-xxl: 1.5rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --shadow-base: 0 4px 14px var(--color-shadow);
  --shadow-hover: 0 4px 14px rgba(0, 102, 204, 0.3);
  --shadow-form: 0 2px 10px rgba(0, 0, 0, 0.08);
  --accent-color: #3498db;
  --accent-color-2: #2ecc71;
  --text-color: #2c3e50;
  --bg-color: #fdfdfd;
}

/* =============================
 * 2) 全体のベーススタイル
============================= */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-main);
  margin: 0;
  padding: 0.8rem;
  background: var(--bg-color);
  flex: 1;
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ▼ 追加: 和風柄パターン (bodyに .fun-wafu-pattern を付ける) 
   青海波をモチーフにした背景をややコントラストUP */
body.fun-wafu-pattern {
  background-image: radial-gradient(circle at 20px 20px, rgba(0,0,0,0.08) 20%, transparent 20%),
                    radial-gradient(circle at 60px 60px, rgba(0,0,0,0.08) 20%, transparent 20%);
  background-size: 80px 80px;
  background-position: 0 0, 40px 40px;
}

/* 全体のhover/focusアニメーション */
* {
  transition: background-color var(--transition-speed),
              color var(--transition-speed),
              transform var(--transition-speed);
}

/* キーボードフォーカス向上 */
:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ベース要素 */
h1, h2, h3 {
  margin-top: 0;
  color: var(--color-text-main);
  position: relative;
  margin-bottom: 1rem;
}
p {
  margin-bottom: 1.2rem;
}
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: #005580;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* =========================================
 * メインコンテナ: .review-detail-page.modern-layout
========================================= */
.review-detail-page.modern-layout {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem  /* [FIX C-2] 重複定義を統合: 1.5rem→1rem に統一 */;
  animation: popIn var(--anim-pop-duration) ease;
}
@media (max-width: 768px) {
  

}
@keyframes popIn {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 区切り線 */
.section-divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 3rem 0;
}

/* ================
 * 追加ユーティリティ
================ */
.pop-in {
  animation: popIn 0.5s ease-in-out;
}

/* =========================
   ヘッダー(タイトル・評価等) 改善版
========================= */
.review-header-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.header-left {
  flex: 1 1 auto;
  min-width: 220px;
}
.review-title {
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  position: relative;
  transition: color 0.3s, transform 0.3s;
  cursor: default;
}
.review-title:hover {
  color: var(--color-fun-pink);
  transform: scale(1.03);
}
.my-star-rating {
  margin: 0.5rem 0;
  display: flex;
  align-items: center;
}
.my-star-rating i {
  font-size: 1.5rem;
  color: #c99928; /* 金色を強めに */
  margin-right: 2px;
  transition: transform 0.2s;
}
.my-star-rating i:hover {
  transform: scale(1.2);
}
.star-score {
  margin-left: 6px;
  font-size: 1rem;
  color: var(--color-text-sub);
}
/* 投稿日/閲覧数 */
.review-published,
.review-views {
  font-size: 0.9rem;
  color: var(--color-text-sub);
  margin: 0.2rem 0;
}
/* アフィリエイト表記 */
.affiliate-disclaimer {
  flex: 1 1 100%;
  max-width: 420px;
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  background-color: var(--color-bg-highlight);
  box-sizing: border-box;
  font-size: 0.85rem;
  line-height: 1.4;
}
.pr-info {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* =========================
   レスポンシブ対応
========================= */

/* =========================
   画像ギャラリー (Swiper)
========================= */
.preview-gallery {
  margin-bottom: 2rem;
}
.swiper-container {
  position: relative;
  width: 100%;
  border-radius: var(--radius-base);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}
.swiper-button-prev,
.swiper-button-next {
  color: #fff;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
}
.swiper-pagination-bullet {
  background: #999;
  opacity: 0.7;
}
.swiper-pagination-bullet-active {
  background: #fff;
  opacity: 1;
}
.swiper-pagination {
  bottom: 10px;
}

/* =========================
   レビュー本文 + FAQ
========================= */
/* =======================================
   ★ 本文部分のノート風 + らせん追加 + フォント指定
======================================= */

/* 
   ➀ 本文文字を 'Kiwi Maru', serif; に変更
   ➁ ノートらせんを .review-body-section::after に追加
*/

/* =======================================
   ★ 本文部分のノート風 + らせん追加 + フォント指定
======================================= */

/* 本文の大枠 */
.review-body-section {
  background: #fffefb; /* 少し白寄りの背景 */
  border-radius: 8px;
  padding: 20px 30px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  position: relative;
  margin-bottom: 40px;
  border: 1px solid #e2d8c8;
}


/* 脈動アニメ（.pulse を付けた時だけ） */
@keyframes pulseB{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.05); }
}
.rakuten-btn.pulse{ animation:pulseB 1.6s infinite; }

.rakuten-btn:hover,
.rakuten-btn:focus{
  background:#a80000;
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 6px 12px rgba(191,0,0,.45);
}



/* ==========================================================
 * ❺ モバイル微調整
 * ========================================================== */
@media(max-width:480px){
  .shop-btn {
  height: 44px;
  padding: 0.5rem 0.8rem;   /* [FIX C-2] 重複定義を統合: 旧 0 1rem を後定義の 0.5rem 0.8rem に統一 */
  font-size: 0.85rem;
}
  .shop-badge{
    top:-8px; right:-6px;
    font-size:.7rem;
  }
}



/* スマホ用の余白調整（必要に応じてフォントサイズを微調整） */
@media screen and (max-width: 600px) {
  .shop-links {
    flex-wrap: nowrap; /* スマホでも必ず横並び */
  }
  /* ボタンが収まるようにフォントサイズとパディングを調整 */
  

}

/* ノートらせん(spiral)の追加 (上部に表示) */
.review-body-section::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 40px;
  background-size: contain; 
  pointer-events: none; 
}

/* h2: 見出し */

/* p要素: 'Kiwi Maru' フォントに変更 */
.review-body-section p {
  font-size: 1.05rem;    
  line-height: 1.85;     
  margin-bottom: 1.4em;  
  color: #444;
  letter-spacing: 0.02em;
}

/* 本文とFAQの区切り線 */
.faq-divider {
  border: 0;
  border-top: 1px solid #ccc;
  margin: 2rem 0;
}

/* FAQコンテナ */
.faq-container {
  padding: 1rem;
  margin: 0 0 2rem 0;
  background: #fffef8;
  border: 1px solid #d8cfc4;
  border-radius: 6px;
}

/* FAQ見出し（H3） - 控えめなサイズ */
.faq-heading {
  font-size: 1.2rem;
  color: #3b2f2f;
  text-align: center;
  margin-bottom: 1rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px dotted #bfa96c;
}

/* 各FAQ項目（折りたたみ式） */
.faq-item {
  margin-bottom: 1rem;
}

/* <summary>部分（質問） - 小さめに設定 */
.faq-question {
  font-size: 1rem;
  font-weight: bold;
  color: #3b2f2f;
  padding: 0.6rem 0.8rem;
  background: #fefcf8;
  border: 1px solid #d8cfc4;
  border-radius: 4px;
  cursor: pointer;
}

/* <details>が開いたときの <summary> 背景 */
.faq-item[open] .faq-question {
  background: #fffdf5;
}

/* 回答部分 - 少し小さめ */
.faq-answer {
  font-size: 0.9rem;
  line-height: 1.7;
  color: #444;
  padding: 0.8rem;
  border: 1px solid #d8cfc4;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: #fff;
}

/* ネット通販リンク */
.faq-shop-links {
  margin-top: 0.5rem;
}
.faq-shop-links a.shop-btn {
  display: inline-block;
  padding: 0.5rem 0.8rem;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
  background: #f8f8f8;
  border: 1px dotted #bfa96c;
  border-radius: 4px;
  color: #3b2f2f;
  text-decoration: none;
  font-size: 0.8rem;
  transition: background 0.3s ease;
}
.faq-shop-links a.shop-btn:hover {
  background: #eee;
}

/* 編集部コメント：吹き出し風（背景は薄い色） */
.editor-comment-bubble {
  position: relative;
  margin: 2rem 0;
  padding: 0.8rem 1rem;
  background: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.8rem;
  color: #555;
  line-height: 1.5;
}
.editor-comment-header {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #3b2f2f;
  font-size: 0.85rem;
}
.editor-comment-bubble::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 20px;
  border: 6px solid transparent;
  border-bottom-color: #ccc;
}
.editor-comment-bubble::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 21px;
  border: 5px solid transparent;
  border-bottom-color: #f7f7f7;
}
.editor-comment-inner {
  font-style: italic;
}

/* モバイル対応 */

.review-body-section h2 {
  font-size: 1.3em;
  margin-bottom: 16px;
  color: #c16417;
  border-bottom: dashed 2px #f7d8a8;
  padding-bottom: 8px;
}


/* =========================
   投稿者プロフィール
========================= */
.author-card-block {
  margin-bottom: 2rem;
}
.author-card-block h2 {
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-main);
  margin-bottom: 1rem;
}
.author-card {
  display: flex;
  gap: 1rem;
  background: var(--color-bg-highlight);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  padding: 1rem;
  align-items: center;
  transition: transform 0.2s;
}
.author-card:hover {
  transform: scale(1.02);
}
.author-avatar {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 50%;
}
.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.author-details {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.author-name-and-follow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.author-name-link {
  font-weight: bold;
  color: var(--color-text-main);
}
.author-name-link:hover {
  text-decoration: underline;
}
.author-description {
  font-size: 0.9rem;
  margin: 0.2rem 0;
  color: var(--color-text-sub);
}
/* フォローボタン: 抹茶系 */
.follow-button {
  border: none;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-base);
  background: var(--color-fun-green);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--transition-speed), transform var(--transition-speed);
}
.follow-button:hover {
  background: #68a874;
  transform: scale(1.04);
}


/* =========================
   商品(店舗/価格/タグ)情報（改善版）
========================= */

/* 全体の余白・枠線調整 */
.review-info-block {
  margin-bottom: 2rem;
}
.product-info-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  padding: 1.2rem 1.5rem; /* 余白を増やし余裕を持たせる */
  box-shadow: var(--shadow-card);
  position: relative;
}

/* タイトルデザイン */
.product-info-card h2 {
  font-size: 1.1rem; /* 若干大きく */
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-main);
  font-weight: bold;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--color-border); /* 下線で区切る */
  padding-bottom: 0.5rem;
}

/* 情報行（ラベル+値）を整列 */
.info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline; /* 値を下揃えで安定感アップ */
  margin-bottom: 0.8rem; /* 行間を広げ読みやすく */
}

/* ラベル部分のデザイン */
.info-label {
  width: 80px; /* ラベル幅を揃え明瞭に */
  font-weight: bold;
  color: var(--color-text-sub);
  margin-right: 0.8rem;
}

/* 値部分のデザイン（文字強調） */
.info-value {
  flex: 1;
  color: var(--color-text-main);
  font-weight: 500;
}

/* バッジデザイン（ベース）*/
.review-badge {
  display: inline-block;
  background: #fff3cd;
  color: #6c6c6c;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-base);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  margin-right: 6px;
  margin-bottom: 4px;
  border: 1px solid #ffeeba;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* バッジホバー時の立体感 */
.review-badge:hover, .review-badge:focus {
  background: #ffecb3;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

/* 和風バッジデザイン強化 */
.fun-badge {
  background: #f8e2df; /* 薄い桜色 */
  border: 1px solid #f3cfc9;
  color: #a75d5d; /* 少し濃い目の色でコントラスト強調 */
}

.fun-badge:hover, .fun-badge:focus {
  background: #f6d4cd;
  box-shadow: 0 4px 8px rgba(233, 93, 117, 0.3);
  transform: translateY(-2px);
}

/* フォーカス（アクセシビリティ）を追加 */
.review-badge:focus {
  outline: 2px solid rgba(0, 123, 255, 0.3);
  outline-offset: 2px;
}


/* =========================
   通販サイト検索ボタン
========================= */
.shop-search-links {
  margin-bottom: 2rem;
}
.shop-search-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* =========================
   アクション (いいね / ブックマーク / 通報)
========================= */
.review-actions-block {
  margin-bottom: 2rem;
}
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.like-area {
  display: flex;
  align-items: center;
  gap: 5px;
}
.like-count {
  font-size: 0.9rem;
  color: var(--color-text-main);
}
.like-button,
.bookmark-button,
.report-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  padding: 0.5rem 0.8rem;
  border: none;
  border-radius: var(--radius-base);
  background-color: #bb6a43; /* 濃い茶色寄り(コントラストUP) */
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.like-button:hover,
.bookmark-button:hover,
.report-button:hover {
  background-color: #a65832;
  transform: scale(1.04);
}
.login-prompt {
  font-size: 0.9rem;
  margin: 0;
  color: var(--color-text-sub);
}
.login-prompt a {
  text-decoration: underline;
}

/* 通報モーダル */
#report-modal {
  position: fixed;
  z-index: 9999;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.4);
}
.report-modal-content {
  background: #fff;
  padding: 1.5rem;
  border-radius: var(--radius-base);
  max-width: 500px;
  width: 90%;
  position: relative;
}
.report-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  font-size: 1.5rem;
  color: #666;
}
.report-modal-content h2 {
  margin-top: 0;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.report-modal-content textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  padding: 0.5rem;
  font-size: 0.95rem;
  resize: vertical;
}
.report-submit-btn {
  margin-top: 0.8rem;
  padding: 0.5rem 0.8rem;
  background-color: #bf4f4f; 
  color: #fff;
  border: none;
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: 0.2s;
}
.report-submit-btn:hover {
  background-color: #a33c3c;
  transform: scale(1.02);
}

/* =========================
   SNSシェア（より洗練されたスタイルに改善）
========================= */
.review-sharing-block {
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: #fafafa;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* 誘導テキストを見やすく */
.share-note {
  font-size: 0.9rem;
  margin-bottom: 0.7rem;
  color: var(--color-text-main);
  font-weight: 600;
}

/* アイコンボタン配置 */
.fa-icon-buttons {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
}

/* 各SNSボタン基本スタイル */
.fa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ホバー時の浮遊感・影の強調 */
.fa-icon:hover {
  transform: translateY(-4px) scale(1.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* クリック時のアクション感 */
.fa-icon:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Twitter用グラデーション */
.fa-icon.twitter {
  background: linear-gradient(135deg, #1da1f2, #0d8bd8);
}

/* Facebook用グラデーション */
.fa-icon.facebook {
  background: linear-gradient(135deg, #4267b2, #385898);
}

/* LINE用グラデーション */
.fa-icon.line {
  background: linear-gradient(135deg, #00c300, #00aa00);
}

/* リンクコピー用グラデーションとアイコン変更提案 */
.fa-icon.linkcopy {
  background: linear-gradient(135deg, #aaa, #888);
}

/* 追加オプション: アニメーション（任意） */
@keyframes bounce-in {
  0% { opacity: 0; transform: scale(0.5); }
  60% { opacity: 1; transform: scale(1.2); }
  100% { transform: scale(1); }
}

.fa-icon-buttons .fa-icon {
  animation: bounce-in 0.4s ease-out;
}


/* =========================
   関連記事(同じタグ) - 同じスタイル
========================= */

/* 全体のコンテナ */
.related-posts-block {
  margin-bottom: 2rem;
}

/* カード一覧グリッド（スマホ3列、PC4列） */
.review-card-grid.related-review-grid {
  display: grid;
  gap: 1px;
}

/* レスポンシブブレイクポイント */
@media (max-width: 767px) {
  

}
@media (min-width: 768px) {
  .review-card-grid.related-review-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* カード本体 */
.review-card {
  display: flex;
  flex-direction: column;
  padding: 0.6rem;            /* 内側余白 */
  border-radius: 4px;
  background-color: #fff;
  transition: box-shadow 0.2s, transform 0.2s;
}

/* ホバーで少し浮く */
.review-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transform: scale(1.03);
}

/* カード内リンク：中央寄せ */
.card-link {
  display: block;
  text-align: center;
  color: #333;
  text-decoration: none;
  margin-bottom: 0.3rem;
}
.card-link:hover {
  color: #b54434; /* ホバー時の色 */
}

/* サムネイル：正方形トリミング */
.card-thumbnail.card-thumbnail--small {
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  margin: 0 auto 0.3rem;
}
.card-thumbnail.card-thumbnail--small img {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  object-fit: cover; 
}

/* タイトル（2行表示） */
.card-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: bold;
  line-height: 1.2;
  /* 2行分の高さ (1.2 * 2 = 2.4em) */
  height: 2.4em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  white-space: normal; 
}

/* もしサブタイトルがあるなら同じ2行省略 */
.review_subtitle {
  margin: 0;
  font-size: 0.85rem;
  font-weight: bold;
  line-height: 1.2;
  height: 2.4em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  white-space: normal;
}

/* 星評価 */
.card-rating {
  text-align: center;
  font-size: 0.75rem;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
}
.star-icons i {
  font-size: 0.8rem;
  color: #b54434; /* 通常の星 */
  margin-right: 1px;
}
/* 星5のみゴールド */
.high-rating-stars i {
  color: #FFD700 !important;
}
/* 評価無し表示用 */
.no-rating {
  color: #999;
}
.no-rating-text {
  display: block;
  color: #999;
  font-size: 0.7rem;
}

/* 店舗名表示：カラー可変 */
.card-brand {
  text-align: center;
  font-size: 0.75rem;
  margin-bottom: 0.2rem;
  line-height: 1.2;
  height: 1.2em;
  color: #666;
}
.brand-daiso-text {
  color: #f48fb1; /* ピンク(ダイソー) */
}
.brand-seria-text {
  color: #81c784; /* 緑(セリア) */
}
.brand-cando-text {
  color: #ffb74d; /* オレンジ(CanDo) */
}
.brand-other-text {
  color: #888;    /* グレー(その他) */
}

/* 著者情報 */
.card-author-small {
  text-align: center;
  line-height: 1.2;
  position: relative;
}
.card-author-avatar {
  display: inline-block;
  vertical-align: middle;
}
.card-author-avatar img {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  object-fit: cover;
}
.card-author-name a {
  font-size: 0.7rem;
  color: #666;
  text-decoration: none;
  margin-left: 4px;
}
.card-author-name a:hover {
  color: #b54434;
}

/* レビューがないとき */
.no-review-message {
  text-align: center;
  color: #999;
  font-size: 0.85rem;
  margin: 1rem 0;
}




/* =========================
   ナビゲーション(一覧・投稿)
========================= */
.navigation-links h2 {
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-main);
  margin-bottom: 0.8rem;
}
.internal-link {
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.9rem;
  transition: opacity var(--transition-speed);
}
.internal-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}
.prevnext-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
.prevpost-link,
.nextpost-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-bg-highlight);
  color: var(--color-text-main);
  padding: 0.6rem;
  border-radius: var(--radius-base);
  text-decoration: none;
  max-width: 47%;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.prevpost-link:hover,
.nextpost-link:hover {
  background-color: #fefcf9;
  box-shadow: var(--shadow-card);
  transform: scale(1.02);
}
.prevpost-thumb,
.nextpost-thumb {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-base);
}
.prevpost-thumb img,
.nextpost-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prevpost-info,
.nextpost-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.prevpost-title,
.nextpost-title {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-main);
}

/* トップへ戻る */
.back-to-top {
  margin-bottom: 2rem;
}
.back-to-top a {
  display: inline-block;
  background: #809bce; /* 和風青、濃いめ */
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-base);
  text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}
.back-to-top a:hover {
  opacity: 0.9;
  transform: scale(1.03);
}

/* =========================
   スマホ専用: 左右矢印固定表示 (PCでは非表示)
========================= */
.swipe-hint-arrows {
  display: none;
}

/* =========================
   コメントセクション全体
========================= */
.review-comments-block {
  margin-top: 2rem;
  padding: 1rem 0;
  border-top: 1px solid #ddd;
}

/* タイトル */
.comment-section-title {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

/* コメントフォーム周り */
.comment-form-wrap {
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
}
.comment-form-wrap .form-group {
  margin-bottom: 1.2rem;
}
.comment-form-wrap label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.3rem;
}
.comment-form-wrap textarea {
  width: 100%;
  resize: vertical;
  min-height: 80px;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.comment-form-wrap input[type="submit"] {
  background-color: var(--color-fun-green); /* 抹茶系カラー (変数) */
  color: #fff;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.comment-form-wrap input[type="submit"]:hover {
  background-color: #68a874;
}

/* コメントリスト全体 */
.comment-list-wrap {
  margin-bottom: 2rem;
}
.custom-comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.custom-comment-list li {
  margin-bottom: 1.5rem;
}

/* =========================
   可愛い和風の吹き出し
========================= */
.bubble-comment {
  margin-bottom: 2rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 吹き出し本体 */
.bubble-comment .bubble-comment-inner {
  position: relative;
  display: flex;
  gap: 1rem;
  background: #fff9ef;                /* 柔らかいアイボリー */
  border: 2px dashed #fbd9c5;         /* 点線枠 */
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1rem;
}

/* ホバー時に少し浮く（PC向け） */
.bubble-comment:hover .bubble-comment-inner {
  transform: scale(1.02);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 吹き出しの先端を作る(下方向三角形) */
.bubble-comment .bubble-comment-inner::before {
  content: "";
  position: absolute;
  left: 60px; /* 必要に応じて微調整 */
  top: 100%;
  border-style: solid;
  border-width: 10px 8px 0 8px;
  border-color: #fff9ef transparent transparent transparent;
  transition: top 0.2s ease;
}
.bubble-comment:hover .bubble-comment-inner::before {
  top: 102%;
}

/* アバターを確実に円形に */
.comment-avatar-wrap {
  position: relative;
  width: 50px;         /* 必要に応じて変更 */
  height: 50px;        /* 同上 */
  border-radius: 50%;  /* 丸くする */
  overflow: hidden;    /* はみ出しを隠す */
  flex-shrink: 0;      /* flexコンテナで潰れないように */
}
.comment-avatar-wrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 親要素を100%埋め、縦横比を保持 */
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  display: block;
}

/* コメント本文 */
.bubble-comment-

/* 投稿者名 */
.comment-author-name {
  font-weight: bold;
  margin-bottom: 0.3rem;
  color: #eb6d88;  /* ピンク系 */
  background: #fde4eb; /* 薄ピンク背景で可愛さUP */
  padding: 0.2em 0.5em;
  border-radius: 4px;
  display: inline-block;
  font-size: 1.1rem;
}
.comment-author-name::after {
  /* 「さん」を付与する例。不要なら削除OK */
  content: "さん";
  margin-left: 2px;
  color: #eb6d88;
  font-size: 0.9rem;
}

/* 日付表示 */
.comment-date {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

/* コメント本文 */
.comment-text {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* 返信リンク */
.reply-link {
  margin-top: 0.4rem;
}
.reply-link a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
}
.reply-link a:hover {
  text-decoration: underline;
}

/* リプライ(返信)の階層レイアウト */
.custom-comment-list li.depth-2 {
  margin-left: 2rem;
}
.custom-comment-list li.depth-3 {
  margin-left: 4rem;
}

/* =========================
   全体を和風に
========================= */
.fun-comments {
  background: #eef5f2; /* 薄い水色+若干緑み */
  border-radius: var(--radius-base);
  padding: 1rem;
}
.fun-comment-form input[type="text"]:focus,
.fun-comment-form textarea:focus {
  border-color: var(--color-fun-pink);
  box-shadow: 0 0 5px rgba(233,93,117,0.5);
  transform: scale(1.02);
}
.fun-comment-list {
  background: #fffdf9; 
  border-radius: var(--radius-base);
  padding: 1rem;
}


/* =========================
   右下固定バナー
   => 色を派手にして目立たせる
========================= */
.review-floating-banner {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
}
.floating-banner-link {
  display: inline-block;
  /* 派手なピンク～オレンジのグラデーションに変更 */
  background: linear-gradient(135deg, #ff4081, #ff9800);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-base);
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  transition: opacity 0.2s, transform 0.2s;
}
.floating-banner-link:hover {
  opacity: 0.9;
  transform: scale(1.1); /* さらに大きく拡大して目立たせる */
}
.fun-floating-btn:hover {
  /* fun-floating-btn をさらに大きくして強調 */
  background: linear-gradient(135deg, #ff9800, #ff4081);
  transform: scale(1.1);
}
/* タブメニュー */
.related-tab-menu {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.related-tab-menu .tab-button {
  padding: 0.5rem 1rem  /* [FIX C-2] 重複定義を統合: 0.6rem→0.5rem に統一 */;
  background: #eee;
  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}
.related-tab-menu .tab-button.active {
  background: #1abc9c;
  border-color: #16a085;
  color: #fff;
}

/* タブコンテンツ非表示制御 */
.related-tab-content {
  display: none;
}
.related-tab-content.active {
  display: block; /* もしくはflex/gridなどレイアウトに合わせて */
}

/* 記事一覧用のスタイル例 */
.related-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.related-grid .card {
  flex: 1 1 calc(50% - 1rem);
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.card-thumbnail--small img {
  width: 100%;
  height: auto;
  display: block;
}
.card-title {
  font-size: 1rem;
  margin: 0.5rem;
}
.card-rating, .card-author-small, .card-date {
  margin: 0.5rem;
  font-size: 0.85rem;
  color: #666;
}

.sns-follow-box {
  margin: 2rem auto;
  padding: 1.5rem;
  background: #fdfaf5;
  border: 2px solid #e3d5ca;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  max-width: 720px;
  text-align: center;
}

.sns-follow-title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #5c3e2b;
  margin-bottom: 0.5rem;
}

.sns-follow-desc {
  font-size: 0.95rem;
  color: #8f7d75;
  margin-bottom: 1.2rem;
}

.sns-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.sns-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
  text-decoration: none;
  font-weight: 600;
  color: #fff;
  transition: background 0.3s ease;
}

.sns-icon i {
  font-size: 1.2rem;
}

/* 各SNSカラー */
.sns-icon.instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.sns-icon.instagram:hover { opacity: 0.85; }

.sns-icon.twitter { background: #000; }
.sns-icon.twitter:hover { opacity: 0.85; }

.sns-icon.note {
  background: #41c9b4;
}
.sns-icon.note:hover {
  background: #35b4a1;
}

/* レスポンシブ対応 */
@media (max-width: 480px) {
  .sns-icons {
    flex-direction: column;
    gap: 0.6rem;
  }
}


/* =========================
   追加の「楽しい和風」クラス（改善版）
========================= */
/* タイトルを和風ポップに */
.fun-title {
  font-weight: bold;
  color: var(--color-fun-pink);
}

/* リンクをやや和風に */
.fun-link {
  color: var(--color-fun-orange);
  transition: color var(--transition-speed), transform var(--transition-speed);
}
.fun-link:hover {
  color: var(--color-fun-pink);
  transform: scale(1.03);
}
/* ボタン類: コントラストUP */
.fun-like-btn:hover {
  background-color: var(--color-fun-orange);
  transform: scale(1.04);
}
.fun-bookmark-btn:hover {
  background-color: var(--color-fun-pink);
  transform: scale(1.04);
}
.fun-report-btn:hover {
  background-color: #bf4f4f;
  transform: scale(1.04);
}
html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: 1.5;
  color: var(--color-text);
}

/* ログインページなどの追加スタイル */
@keyframes fadeIn {

}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

}
.user-login-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom right,
    var(--color-bg-gradient-start),
    var(--color-bg-gradient-end)
  );
  padding: var(--spacing-lg);
  box-sizing: border-box;
}
.login-container {
  background-color: var(--color-white);
  max-width: 400px;
  width: 100%;
  margin: auto;
  padding: var(--spacing-lg) var(--spacing-md);
  border-radius: 12px;
  box-shadow: var(--shadow-base);
  box-sizing: border-box;
  animation: fadeIn 0.4s ease-in-out;
}
.login-page-title {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-xl);
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
}
.login-error {
  background-color: #ffecec;
  color: var(--color-error);
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  border: 1px solid var(--color-error);
  border-radius: 6px;
  text-align: center;
  font-size: 0.95rem;
}
.login-message {
  text-align: center;
  font-size: 1.1rem;
  margin-top: var(--spacing-sm);
}
.my-login-form {
  display: flex;
  flex-direction: column;
}
.form-group {
  margin-bottom: var(--spacing-md);
}
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-secondary);
}
.form-group input[type="text"],
.form-group input[type="password"] {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-size: var(--font-size-md);
  border: 1px solid var(--color-form-border);
  border-radius: 6px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}
/* チェックボックス */
.checkbox-group {
  display: flex;
  align-items: center;
}
.checkbox-group input[type="checkbox"] {
  margin-right: 0.4rem;
  transform: scale(1.2);
}
/* ログインボタン */
.login-button {
  width: 100%;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-lg);
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-hover);
}
.login-button:hover {
  background-color: var(--color-primary-hover);
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.4);
}
/* パスワード忘れ */
.forgot-password-link {
  text-align: center;
  margin-top: var(--spacing-sm);
  font-size: 0.95rem;
}
.forgot-password-link a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
.forgot-password-link a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* 登録ページ */
.user-register-page {
  min-height: 100vh;
  background: #f0f4ff;
  padding: var(--spacing-lg);
  box-sizing: border-box;
}
.user-register-page .page-title {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-size-xl);
  font-weight: 600;
  text-align: left; 
  color: var(--color-text);
}
.register-layout {
  display: flex;
  gap: var(--spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.register-benefits-box {
  flex: 1 1 500px; 
  background-color: var(--color-white);
  border-radius: 10px;
  box-shadow: var(--shadow-form);
  padding: var(--spacing-md);
  box-sizing: border-box;
  animation: fadeInUp 0.5s ease;
}
.register-form-wrapper {
  flex: 1 1 400px;
  background-color: var(--color-white);
  border-radius: 10px;
  box-shadow: var(--shadow-form);
  padding: var(--spacing-md);
  box-sizing: border-box;
  animation: fadeInUp 0.7s ease;
}
.register-form {
  display: flex;
  flex-direction: column;
}
.register-form .form-group {
  margin-bottom: var(--spacing-md);
}
.register-form label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-secondary);
}
.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="password"] {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-size: var(--font-size-md);
  border: 1px solid var(--color-form-border);
  border-radius: 6px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.register-form input[type="text"]:focus,
.register-form input[type="email"]:focus,
.register-form input[type="password"]:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}
.register-submit-button {
  width: 100%;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-lg);
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-hover);
}
.register-submit-button:hover {
  background-color: var(--color-primary-hover);
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.4);
}
@media screen and (max-width: 768px) {
  .register-layout {
    flex-direction: column;
  }
  .register-benefits-box,
  .register-form-wrapper {
    max-width: 100%;
    margin-bottom: var(--spacing-md);
  }
}

/* ============ ヒーローヘッダー ============ */
.single-reviewtotal-hero {
  position: relative;
  width: 100%;
  height: 260px; /* PC向けサイズ (スマホで高さ変動可) */
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-reviewtotal-hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('https://picsum.photos/1200/600?blur=2') center/cover no-repeat; /* 例: ランダム画像 */
  filter: brightness(0.6);
  z-index: 1;
}
.single-reviewtotal-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  padding: 0 1rem;
}
.hero-title {
  font-size: 1.8rem;
  margin: 0 0 0.5rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
.hero-subtitle {
  font-size: 1rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* ============ コンテンツ本体 ============ */
.single-reviewtotal-content {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  background: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,0.05);
  border-radius: 8px;
  margin-top: -30px; /* ヒーローと重ねる演出 */
  position: relative;
  z-index: 10;
}

/* 全体平均表示 */
.reviewtotal-average-all {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.1rem;
  background: #fafafa;
  border: 1px solid #eee;
  padding: 1rem;
  border-radius: 6px;
}
.reviewtotal-average-label {
  font-weight: bold;
  margin-right: 0.4rem;
}
.reviewtotal-average-score {
  margin-left: 0.4rem;
  color: #555;
  font-weight: bold;
}
.star-icons i {
  color: #f39c12;
  margin-right: 2px;
}

/* レビューがない場合 */
.reviewtotal-no-reviews {
  font-size: 1.1rem;
  color: #777;
  text-align: center;
  margin: 3rem 0;
}

/* 店舗セクション */
.reviewtotal-store-section {
  margin-bottom: 2.5rem;
  border: 1px solid #eee;
  padding: 1rem;
  border-radius: 6px;
  background: #f9f9f9;
}
.store-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.reviewtotal-store-name {
  font-size: 1.3rem;
  color: var(--text-color);
  border-left: 4px solid var(--accent-color);
  padding-left: 8px;
  margin: 0;
}
.store-avg-box {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #555;
}
.store-avg-label {
  font-weight: bold;
}
.store-avg-score {
  font-weight: bold;
}
.store-review-count {
  margin-left: 0.3rem;
  font-size: 0.9rem;
  color: #888;
}

/* スライダー本体 (Slick) */
.store-review-slider {
  margin-top: 1rem;
}
.store-review-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  margin: 0 8px; /* Slickの表示を考慮 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.store-review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.store-review-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.review-card-image {
  width: 100%;
  object-fit: cover;
  display: block;
}
.review-card-

.review-card-title {
  font-size: 1rem;
  margin: 0 0 0.5rem;
}
.review-card-star {
  font-size: 0.9rem;
  color: #f39c12;
}

/* フッターエリア */
.reviewtotal-footer-area {
  margin-top: 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.btn-review-post {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-color-2) 100%);
  color: #fff !important;
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  font-weight: bold;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.btn-review-post:hover {
  opacity: 0.85;
}
.btn-back-to-top {
  background-color: #eee;
  color: #333;
  padding: 0.5rem 1.2rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}
.btn-back-to-top:hover {
  background-color: #ddd;
}

/* レスポンシブ・メディアクエリ */

/* assets/contact-form.css などで管理すると便利 */

.hrp-contact-form-wrap {
  max-width: 600px;
  margin: 30px auto;
  border: 1px solid #ccc;
  padding: 1.2rem;
  border-radius: 5px;
  background-color: #fff;
}

.hrp-contact-form-wrap h2 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  border-left: 4px solid #b54434; /* 100均Lab風カラー例 */
  padding-left: 8px;
}

.hrp-cf-field {
  margin-bottom: 1rem;
}

.hrp-cf-field label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.hrp-cf-field input[type="text"],
.hrp-cf-field input[type="email"],
.hrp-cf-field select,
.hrp-cf-field textarea {
  width: 100%;
  padding: 0.5rem;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.required {
  color: red;
}

.hrp-cf-submit {
  text-align: center;
}
.hrp-cf-submit input[type="submit"] {
  background: #333;
  color: #fff;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}
.hrp-cf-submit input[type="submit"]:hover {
  background: #555;
}

/* エラーメッセージ・成功メッセージ */
.hrp-cf-error p {
  color: red;
  margin: 0.5rem 0;
}
.hrp-cf-success {
  color: green;
  font-weight: bold;
  margin-bottom: 1rem;
}


/* ── 商品名と同じスタイルを適用するブロック ── */
.prod-info-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;           /* ブロック同士の間隔 */
  margin-top: 1rem;
}

.prod-info-block {
  background: #fafafa;    /* original-prod-name と同じ背景色 */
  border-radius: 0.5rem;  /* 角丸 */
  padding: 0.5rem 1rem;   /* 内側余白 */
  display: flex;
  align-items: center;
  gap: 0.25rem;           /* アイコンとリンクの間隔 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* アイコンの色は商品名ブロックに合わせる */
.prod-info-block i {
  color: #ff9800;         /* 例：タグアイコンと同じオレンジ系 */
  font-size: 1rem;
}

/* リンクテキストも商品名ブロックと同じ見た目 */
.prod-info-link {
  color: #333;            /* テキスト色 */
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* ホバー時の強調 */
.prod-info-link:hover {
  text-decoration: underline;
}

/* h3：カフェ風（ラテアート風アイコン＋やさしいブラウン＆クリームグラデ） */
.review-body-section h3 {
  font-size: 1.18em;
  margin-top: 1.5em;
  margin-bottom: 0.85em;
  font-weight: bold;
  border: none;
  padding-left: 2.1em;
  padding-top: 0.28em;
  padding-bottom: 0.26em;
  background: linear-gradient(90deg, #f9eee2 82%, #f8f5f1 100%);
  border-radius: 14px;
  color: #6b4c29;
  position: relative;
  box-shadow: 0 2px 8px rgba(120, 90, 50, 0.05);
  letter-spacing: 0.01em;
}

/* h3::before の ☕ 自動挿入は削除済み */



.custom-upload-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 横3列固定 */
  grid-template-rows: repeat(2, 1fr);    /* 縦2行 */
  gap: 0.6em;
  width: 100%;
  max-width: 270px;       /* 枠全体の最大幅。スマホでも3列になるサイズ感 */
  margin-bottom: 0.7em;
  background: none;
  justify-content: flex-start;
}

.review-prod-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.review-prod-info-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, #fdfaf5, #f9f4f0);
  border-radius: 8px;
  border: 1px solid #e4d7cc;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  font-size: 0.95rem;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.review-prod-info-item:hover {
  background: linear-gradient(135deg, #fef9f4, #f7f1ea);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.review-prod-info-item i {
  color: #e6843c; /* アイコン色 */
  font-size: 1rem;
}

.prod-info-link:hover {
  color: #c16417;
  text-decoration: underline;
}

/* モバイルでも崩れ防止 */
@media (max-width: 600px) {
  .review-prod-info {
    gap: 0.4rem;
  }
  .review-prod-info-item {
    flex: 1 1 calc(50% - 0.4rem); /* 2列表示になる */
  }
}
/* =======================================
   single-review テンプレート用スタイル
   （インラインから移行したCSS）
======================================= */

/* --- ヘッダー内広告枠のスタイル（PC/モバイル） --- */
.review-header-ad.adsense-fv {
  width: 100%;
  min-height: 280px;        /* PC表示時の最低高さ */
  max-width: 730px;         /* PC表示時の最大幅 */
  margin: 18px auto 0 auto;
  box-sizing: border-box;
  /* display:flex; は不要（広告要素の挿入箇所） */
}

/* --- 画像ギャラリーの透かし文字 (ウォーターマーク) スタイル --- */
.watermark-wrap {
  position: relative;
  display: inline-block;
}
.watermark-text {
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1em;
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* --- 画像キャプション注記のスタイル --- */
.image-citation-note {
  margin-top: 8px;
  font-size: 0.75rem;
  color: #777;
  text-align: center;
}

/* --- ショップリンクとボタン類のスタイル（レスポンシブ対応） --- */
.small-note {
  font-size: 0.90em !important;
  color: #8b7c63 !important;
  background: none !important;
  margin-bottom: 0.7em;
  line-height: 1.6;
}
.shop-links-caution {
  padding: 0.45em 0.8em 0.35em;
  border-radius: 10px;
  box-shadow: none;
  text-align: left;
}
.shop-caution-main {
  font-size: 0.96em;
  color: #b65300;
  font-weight: 600;
}
.shop-links-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 0.7em;
}
.shop-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0.85em 0.6em 0.6em;
  border-radius: 13px;
  font-size: 1.03em;
  font-weight: bold;
  box-shadow: 0 2px 10px #0001;
  transition: transform 0.13s, box-shadow 0.13s;
  background: #232323;
  color: #fff;
  text-decoration: none;
  position: relative;
  min-width: 110px;
  max-width: 240px;
  width: 100%;
  box-sizing: border-box;
  word-break: keep-all;
}
.shop-btn .btn-sub {
  font-size: 0.85em;
  color: #ececec;
  margin-top: 2px;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}
.shop-btn.amazon-btn {
  background: #232323;
  color: #fff;
}
.shop-btn.rakuten-btn {
  background: #cf2020;
  color: #fff;
}
.shop-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 18px #0002;
}
.shop-or {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4em;
  font-size: 0.95em;
  color: #aaa;
  font-weight: bold;
  margin: 0 1px;
  padding: 0 2px;
  opacity: 0.82;
  letter-spacing: 0.04em;
}
/* スマホ表示用調整 */

/* --- 本文中広告（ミドル広告）ブロックのスタイル --- */
.review-middle-ad.adsense-middle {
  width: 100%;
  min-height: 120px;     /* PC表示時の最低高さ (CLS対策) */
  max-width: 900px;      /* PC表示時の最大幅 */
  margin: 24px auto 18px auto;
  box-sizing: border-box;
}

/* --- 関連記事タブ切り替えのスタイル --- */

.related-tab-menu .tab-button:hover {
  background: #ddd;
}

.related-tab-content {
  display: none;
  margin-top: 1rem;
}
.related-tab-content.active {
  display: block;
}

/* --- 小項目まとめページ（goods-summary）のリンクスタイル --- */
.goods-summary-links a {
  display: inline-block;
  margin: 0.5rem;
  padding: 0.8rem 1rem;
  background: #1abc9c;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}

/* --- ランキングバナーセクションのスタイル --- */
.ranking-banners-block {
  text-align: center;
  margin-bottom: 2rem;
}
.ranking-banners-block div {
  display: inline-block;
  margin-right: 2rem;
}
.ranking-banners-block div:last-child {
  margin-right: 0;
}
.ranking-link {
  text-decoration: none;
  color: #444;
  font-size: 0.9rem;
}

/* --- ライター募集セクションのスタイル --- */
.writer-recruit-container {
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 12px;
  margin-top: 2rem;
  text-align: center;
}
.writer-recruit-container h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.writer-recruit-container p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}
.writer-recruit-button {
  display: inline-block;
  background: #1abc9c;
  color: #fff;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  border-radius: 50px;
  text-decoration: none;
}

/* --- その他: 初期非表示が必要な要素のスタイル --- */
.report-modal {
  display: none;
}
.swipe-hint-floating {
  display: none;
}