/*
Theme Name:   Store Child Theme
Description:  rehub_tcd099 用店舗レビューページ専用子テーマ
Author:       Your Name
Version:      1.0.0
Template:     rehub_tcd099
Text Domain:  store-child
*/

/*-----------------------------------
  リセット／グローバル
-----------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Yu Gothic', '游ゴシック', sans-serif;
  margin: 0;
  padding: 0;
}

/*-----------------------------------
  1. ヘッダー／フッター共通
-----------------------------------*/

/* 1-1) ヘッダー全体 */
.store-header {
  width: 100%;
  background: #ffffff;
  padding-top: 12px;
  padding-bottom: 12px;
  font-family: inherit;
  overflow-x: hidden;
}

/* 1-2) ヘッダー内コンテナ */
.store-header__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 1-3) ロゴ */
.store-header__logo img {
  width: 160px;
  height: 40px;
  object-fit: contain;
  display: block;
}

/* 1-4) ハンバーガーメニュー */
.store-header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: auto;
  width: 30px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.store-header__hamburger .hamburger-bar {
  display: block;
  width: 100%;
  height: 4px;
  background: #333;
  border-radius: 2px;
}

/* 1-5) 区切り線 */
.store-header__divider {
  margin: 12px 0;
  border: none;
  border-top: 1px solid #ddd;
}

/* 1-6) パンくずリスト（ヘッダー用） */
.store-header__breadcrumbs {
  font-size: 8px;
  color: #555;
  margin: 4px 0;
  line-height: 1;
}
.store-header__breadcrumbs a {
  font-size: 8px;
  color: #0073aa;
  text-decoration: none;
}
.store-header__breadcrumbs a:hover {
  text-decoration: underline;
}

/* 1-7) フッター全体 */
.store-footer {
  background-color: #ffffff;
  padding: 20px 0;
  text-align: center;
}
.store-footer__inner {
  display: inline-block;
  text-align: center;
}
.store-footer__logo-link {
  display: inline-block;
}
.store-footer__logo {
  width: 200px;
  height: 50px;
  object-fit: contain;
  display: block;
}


/*-----------------------------------
  3. メインコンテンツ全体
-----------------------------------*/
.store-archive {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* モバイルで左右余白を詰める */
@media (max-width: 767px) {
  .store-header__inner,
  .hero-inner,
  .store-archive {
    padding: 0 12px;
  }
}

/*-----------------------------------
  4. 関連性のある店舗カード（single-store_review.php用）
-----------------------------------*/
.related-stores {
  margin: 40px 0;
}
.related-stores__title {
  font-size: 20px;
  margin-bottom: 16px;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  color: #222;
}
.related-stores__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}
.related-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  box-sizing: border-box;
  width: calc(33.333% - 16px);
  font-family: 'Noto Sans JP', sans-serif;
}
.related-card__thumb img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
  margin-bottom: 12px;
}
.related-card__name {
  font-size: 18px;
  margin: 8px 0;
  color: #222;
}
.related-card__taxo {
  font-size: 14px;
  color: #555;
  margin: 4px 0 0;
}
/* モバイルでは1列レイアウト */
@media (max-width: 767px) {
  .related-card {
    width: 90%;
    margin: 0 auto;
  }
}

/*-----------------------------------
  5. 公式バッジ
-----------------------------------*/
.badge-official {
  background-color: #ffeedc;
  color: #d35400;
  padding: 2px 6px;
  font-size: 0.75em;
  border-radius: 4px;
  display: inline-block;
  margin-left: 8px;
}

/*-----------------------------------
  6. info-section 内リンク装飾
-----------------------------------*/
.info-section ul li a {
  text-decoration: none;
  color: #007acc;
  font-weight: bold;
}
.info-section ul li a:hover {
  text-decoration: underline;
  color: #005fa3;
}

/*-----------------------------------
  7. お問い合わせフォーム誘導セクション
-----------------------------------*/
.contact-form-section {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 24px 16px;
  margin: 40px auto;
  max-width: 900px;
  box-sizing: border-box;
  text-align: center;
}
.contact-form-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.contact-icon {
  flex: 0 0 auto;
  width: 64px;
  height: 48px;
}
.contact-text {
  flex: 1 1 300px;
  text-align: left;
}
.contact-title {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 8px;
  color: #222;
}
.contact-desc {
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 16px;
  color: #555;
}
.contact-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #005BAC;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}
.contact-button:hover {
  background-color: #004a91;
}
/* モバイル調整 */
@media (max-width: 767px) {
  .contact-form-inner {
    flex-direction: column;
    align-items: center;
  }
  .contact-text {
    text-align: center;
  }
}

/*-----------------------------------
  8. SEOコラムカード全体
-----------------------------------*/
/* 8-1) seo-card */
.seo-card {
  width: 400px;
  height: 150px;
  display: flex;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  margin: 12px;
  box-sizing: border-box;
}
.seo-thumb {
  flex: 0 0 150px;
  height: 150px;
  overflow: hidden;
}
.seo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.seo-content {
  flex: 1;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.seo-content .seo-title {
  font-size: 16px;
  margin: 0 0 8px;
}
.seo-content .seo-excerpt {
  font-size: 14px;
  color: #555;
  flex: 1;
  margin: 0 0 12px;
}
.seo-content .btn-readmore {
  align-self: flex-start;
  font-size: 14px;
  color: #005bac;
  text-decoration: none;
}
.seo-see-more {
  text-align: center;
  margin-top: 8px;
}
.seo-see-more a {
  font-size: 14px;
  color: #005bac;
  text-decoration: none;
}

/* 8-2) カードを複数並べるラッパー */
.genre-seo-columns,
.area-seo-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 24px 0;
}
/* モバイルでは縦1列 */
@media (max-width: 767px) {
  .genre-seo-columns,
  .area-seo-columns {
    display: block;
  }
  .seo-card {
    width: 100%;
    margin: 8px 0;
  }
}

/*-----------------------------------
  9. 特集コラムカード
-----------------------------------*/
.featured-card {
  width: 100%;
  background: #fafafa;
  border: 1px solid #bbb;
  border-radius: 4px;
  padding: 16px;
  margin: 24px auto;
  max-width: 900px;
  box-sizing: border-box;
}
.featured-content {
  font-size: 16px;
  line-height: 1.6;
}
.featured-seo-columns {
  margin: 40px 0;
}

/* ------------------------------------------------------------
   レビューサマリー全体
------------------------------------------------------------ */
.review-summary {
  background-color: #ffefd5;
  border-radius: 8px;
  padding: 20px;
  max-width: 480px;   /* お好みで幅を調整 */
  margin: 24px auto;  /* 中央寄せ */
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   1. タイトル部分
------------------------------------------------------------ */
.review-summary .review-title {
  font-size: 1.00em;
  font-weight: bold;
  color: #ff7f50;
  text-align: center;
  margin-bottom: 12px;
}

/* ------------------------------------------------------------
   2. 点数＋口コミ数行
------------------------------------------------------------ */
.review-summary .review-info {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

/* 点数部分 */
.review-summary .review-score {
  font-size: 1.1em;
  font-weight: bold;
  color: #222;
}

/* 口コミ数部分 */
.review-summary .review-count {
  font-size: 1.1em;
  font-weight: bold;
  color: #222;
}

/* ------------------------------------------------------------
   3. 解説文部分
------------------------------------------------------------ */
.review-summary .review-description {
  font-size: 0.85em;
  color: #444;
  line-height: 1.5;
  text-align: left;
  margin-bottom: 12px;
  word-break: break-word;
}

/* ------------------------------------------------------------
   4. 注意書き部分
------------------------------------------------------------ */
.review-summary .review-note {
  font-size: 0.85em;
  color: #666;
  text-align: center;
  margin-top: 8px;
}

/* ------------------------------------------------------------
   レスポンシブ微調整（必要に応じて）
------------------------------------------------------------ */
@media (max-width: 480px) {
  .review-summary {
    padding: 16px;
    max-width: 100%;
  }
  .review-summary .review-info {
    flex-direction: column;
    gap: 6px;
  }
  .review-summary .review-score,
  .review-summary .review-count {
    font-size: 1em;
  }
  .review-summary .review-description {
    font-size: 0.9em;
  }
  .review-summary .review-note {
    font-size: 0.8em;
  }
}

.review-info {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  font-size: 0.9em;
  color: #333;
  margin-bottom: 8px;
}

.review-info .review-score,
.review-info .review-count {
  /* 必要に応じて余白や色を細かく調整 */
}

/* スマホ等、画面幅が狭い場合に縦並びにしたいなら下記を追加 */
@media (max-width: 480px) {
  .review-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 0.85em;
  }
}

    .hero {background: #ffffff;padding: 40px 20px;text-align: center;margin-bottom: 32px;width: 100%;overflow-x: hidden;}
    .hero-inner {width: 100%;max-width: 1200px;margin: 0 auto;box-sizing: border-box;}
    .hero-title {font-size: 28px;margin-bottom: 16px;color: #222;}
    .hero-desc {font-size: 16px;line-height: 1.6;color: #555;}
@media (max-width: 767px) {
    .hero {padding: 24px 12px;}.hero-title {font-size: 22px;}.hero-desc {font-size: 14px;}
    }


.ga4-visitor-box {
  background: linear-gradient(135deg, #e0f0ff, #c2e0ff);
  border-radius: 12px;
  padding: 24px 16px;
  margin: 30px auto;
  max-width: 600px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
  font-family: 'Segoe UI', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

.ga4-visitor-count {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: #004b85;
  background-color: #ffffff;
  padding: 12px 20px;
  border: 2px solid #007acc;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 102, 204, 0.1);
  margin-bottom: 16px;
}

.ga4-visitor-message {
  font-size: 14px;
  color: #333;
  margin: 0;
}


/* ===== FB Interview Card ===== */
.fbi-card{--bg:#fff;--fg:#111;--muted:#666;--bd:#e5e7eb;--gold:#d4af37;--chip:#f5f5f5;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.06); margin:24px 0;
}
.fbi__head{display:grid; grid-template-columns:140px 1fr; gap:20px; padding:20px; border-bottom:1px solid var(--bd); align-items:center}
.fbi__thumb{position:relative; width:140px; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:#fafafa; border:1px solid var(--bd)}
.fbi__thumb-img{width:100%; height:100%; object-fit:cover}
.fbi__thumb--ph{width:100%; height:100%; background:linear-gradient(135deg,#f7f7f7,#ececec)}

.fbi__meta{min-width:0}
.fbi__title{font-size:1.25rem; line-height:1.4; margin:0 0 6px}
.fbi__company{margin:0 0 8px; color:var(--muted)}
.fbi__company-name{font-weight:700}
.fbi__tags{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:6px 0 0}
.fbi__tag{font-size:.8rem; background:var(--chip); border:1px solid var(--bd); padding:4px 10px; border-radius:999px}
.fbi__tag--area{border-color:var(--gold)}
.fbi__tag--genre{background:#eef6ff; border-color:#dbeafe}

.fbi__body{padding:20px; display:grid; grid-template-columns:320px 1fr; gap:24px}
.fbi__info .fbi__row{display:flex; gap:10px; padding:8px 0; border-bottom:1px dashed var(--bd)}
.fbi__info .fbi__row:last-child{border-bottom:none}
.fbi__label{min-width:90px; font-weight:600}
.fbi__val{flex:1}
.fbi__link{color:#2563eb; text-underline-offset:2px}

.fbi__gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.fbi__gitem{margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--bd)}
.fbi__gitem img{width:100%; height:100%; object-fit:cover; display:block}

.fbi__interview{grid-column:1/-1; margin-top:4px}
.fbi__section-ttl{font-size:1.1rem; border-left:4px solid var(--gold); padding-left:10px; margin:0 0 12px}
.fbi__section-sub{font-size:1rem; color:var(--muted); margin:0 0 8px}

.fbi__qa{display:grid; gap:8px}
.fbi__qa-item{border:1px solid var(--bd); border-radius:10px; background:#fff}
.fbi__qa-item > summary{cursor:pointer; padding:10px 14px; list-style:none; font-weight:600}
.fbi__qa-item[open] > summary{background:#fafafa}
.fbi__qa-a{padding:12px 14px; line-height:1.8}

.fbi__comment{grid-column:1/-1; background:#fffcf5; border:1px solid #f1e4c7; padding:14px 16px; border-radius:12px}
.fbi__footer{padding:16px 20px; border-top:1px solid var(--bd); display:flex; justify-content:flex-end}
.fbi__btn{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; background:#111; color:#fff; text-decoration:none}
.fbi__btn:hover{opacity:.9}

/* レスポンシブ */
@media (max-width: 860px){
  .fbi__body{grid-template-columns:1fr}
  .fbi__head{grid-template-columns:100px 1fr}
  .fbi__thumb{width:100px}
}