/*
Theme Name: REHUB-Child
Version: 1.6
Template: rehub_tcd099
*/


/* =========================================================
   LINEログイン状態バー（ヘッダー最上部）
   ========================================================= */
.rb-loginbar {
  max-width: 375px;
  background: #fff;
  margin: 0 10px 10px auto;
  /* text-align: right; */
}

.rb-loginbar__inner {}

.rb-loginbar__left {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 8px;
}


.rb-loginbar__label {
  color: #666;
}

.rb-loginbar__name {
  font-weight: 700;
  color: #222;
}

.rb-loginbar__top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 10px 10px auto;
  gap: 10px;
  position: relative;
}

.rb-loginbar__bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 5px 10px 0 auto;
  gap: 10px;
}

.rb-loginbar__right {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.rb-loginbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .12);
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
}

.rb-loginbar__btn:hover {
  opacity: .9;
}

.rb-loginbar__btn--ghost {
  background: #fff;
  color: var(--orange);
}

@media screen and (max-width: 680px) {
  .rb-loginbar__inner {
    padding: 8px 12px;
  }

  .rb-loginbar__left {
    font-size: 13px;
  }

  .rb-loginbar__btn {
    font-size: 12px;
    padding: 7px 9px;
  }

  .rb-loginbar__sp-link,
  .rb-loginbar__sp-link--logout {
    display: block;
    text-align: right;
    margin: 10px 0 10px auto;
  }

  .rb-loginbar__sp-link--logout {
    color: orange;
  }



}

/* logged-in: 右寄せ（SPでハンバーガーと被らない） */
.rb-loginbar--loggedin .rb-loginbar__inner {
  justify-content: flex-end;
}

/* user block */
.rb-loginbar__right--user {
  display: block;
  margin: 0 0 5px auto;
  max-width: 375px;
}

.rb-loginbar__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, .12);
  display: block;
}

/* badge */
.rb-loginbar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}

.rb-loginbar__badge--regular {
  color: #1f7a1f;
}

.rb-loginbar__badge--bronze {
  color: #8a5a2b;
}

.rb-loginbar__badge--silver {
  color: #666;
}

.rb-loginbar__badge--gold {
  color: #b07a00;
}

.rb-loginbar__badge--master {
  color: var(--orange);
  border-color: rgba(255, 102, 0, .35);
}

/* 共通 */
.rb-mydb__guideBadge {
  display: inline-flex;
  align-items: center;
}

/* ランクバッジ：アイコンのみ（投稿一覧用） */
.rb-rankBadge--iconOnly {
  display: inline-block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  vertical-align: middle;
}

.rb-rankBadge--iconOnly::after {
  margin-left: 0;
}

/* ランク凡例（tatemae など掲示板上部） */
.rb-rankLegend {
  display: inline-block;
  margin-left: 8px;
}

.rb-rankLegend summary {
  cursor: pointer;
  color: #666;
  font-size: 12px;
  list-style: none;
}

.rb-rankLegend summary::-webkit-details-marker {
  display: none;
}

.rb-rankLegend__body {
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.rb-rankLegend__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #333;
  margin: 6px 0;
}


/* BRONZE */
.rb-loginbar__badge--bronze::after {
  content: "";
  width: 30px;
  height: 30px;
  margin-left: 4px;
  background: url("/wp-content/themes/rehub_tcd099-child/img/bronze.png") no-repeat center/contain;
}

/* SILVER */
.rb-loginbar__badge--silver::after {
  content: "";
  width: 30px;
  height: 30px;
  margin-left: 4px;
  background: url("/wp-content/themes/rehub_tcd099-child/img/silver.png") no-repeat center/contain;
}

/* GOLD */
.rb-loginbar__badge--gold::after {
  content: "";
  width: 30px;
  height: 30px;
  margin-left: 4px;
  background: url("/wp-content/themes/rehub_tcd099-child/img/gold.png") no-repeat center/contain;
}

/* MASTER */
.rb-loginbar__badge--master::after {
  content: "";
  width: 30px;
  height: 30px;
  margin-left: 4px;
  background: url("/wp-content/themes/rehub_tcd099-child/img/master.png") no-repeat center/contain;
}

.rb-loginbar__likes {
  font-size: 13px;
  color: #444;
}

@media screen and (max-width: 600px) {
  .rb-loginbar__right--user {
    gap: 8px;
  }

  .rb-loginbar__likes {
    font-size: 12px;
  }
}

/* ===== Loginbar dropdown ===== */
.rb-loginbar__name--link {
  text-decoration: none;
}

.rb-loginbar__name-text {
  color: #0073aa;
  text-decoration: underline;
}

.rb-loginbar__honorific {
  color: inherit;
  text-decoration: none;
}


.rb-loginbar__menu {
  position: relative;
  display: flex;
  padding-bottom: 6px;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* ホバーで表示 */
.rb-loginbar__menu:hover .rb-loginbar__dropdown {
  display: block;
}

/* 非表示 */
.rb-loginbar__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  padding: 6px 0;
  display: none;
  min-width: 140px;
  z-index: 999;
}




.rb-loginbar__dropdown-item {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  color: #333;
  text-decoration: none;
}

.rb-loginbar__dropdown-item:hover {
  background: #f5f5f5;
}

.rb-loginbar__dropdown-item--logout {
  color: #c33;
}



/**************************
 
基本設定
 
 **************************/


:root {
  --chocolate: #5C4842;
  --usuichocolate: #5D4943;
  --orange: #f2a400;
  --require: #d34233
}

body {
  background: #fff;
  color: var(--chocolate);
  font-family: zen maru gothic;
}

p,
li {
  color: var(--chocolate);
}

li {
  margin-bottom: 1em;
}


/* =========================================================
   BBSページ（/bbs/）幅：テーマ側の右サイドバー等で狭くならないようにする
   - 固定ページID: 578（body.page-id-578 が付与される）
   - 本ページは独自サイドバー(.site-sidebar)を使うため、テーマ側の.l-side等は不要
========================================================= */
body.page-id-578 .l-main {
  max-width: none !important;
  width: 100% !important;
}

body.page-id-578 .l-container__inner,
body.page-id-578 .l-container__inner.l-inner {
  max-width: none !important;
  width: 100% !important;
}

/* テーマ側のサイド（もし存在すれば）を非表示にしてレイアウトを崩さない */
body.page-id-578 .l-side,
body.page-id-578 .p-sidebar,
body.page-id-578 .l-sidebar {
  display: none !important;
}

/*==============================================================================================
全体のレイアウト
==============================================================================================*/

.site-container {
  max-width: 100%;
  display: flex;
  box-sizing: border-box;
}

.site-container__main {
  flex: 1;
  min-width: 0;
}

.site-container__main__contents {
  max-width: 1000px;
  margin: 50px auto;
}

.site-container__main--ranking-page {
  max-width: 1500px;
  margin: 50px auto;
}

@media (max-width:767px) {
  .site-container {
    display: block;
    margin: 0;
  }

  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  .site-container__main {
    flex: 1;
    min-width: 0;
  }

  .site-container__main__contents {
    max-width: none;
    margin: 0;
  }

  .site-container__main--ranking-page {
    max-width: none;
    margin: 0;
  }
}

.hr-dotted-ccc {
  border: 1px dashed #ccc;
}

.require:after {
  content: '必須';
  background: var(--require);
  color: #fff;
  font-size: 11px;
  line-height: 13px;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-flex;
  vertical-align: text-bottom;
  margin-left: 5px;
  font-weight: bold;
}


/*親テーマのheader.phpで定義されてる必要ないCSS設定の上書き*/

.u-flex-wrap {
  display: block;
}

.l-inner,
.single .l-inner {
  max-width: none;
  margin: 0;
  width: 100%;
}

#js-review-footer-bar {
  display: none;
}


.l-main,
.single .l-main,
body.single .is-sidebar--none .l-container__inner {
  max-width: none;
}

.single .l-main:only-child,
.post-type-archive-news .l-main:only-child,
.page-template-default:not(.home) .l-main:only-child {
  max-width: none;
}

/* single.php ヘッダーサムネイルを本文幅に揃える */
.p-single__header-image {
  margin: 40px 0 0;
}

@media (max-width:767px) {
  .p-single__header-image {
    margin: 30px 0 0;
  }
}

/* ついで：カテゴリラベルの左ズレも合わせる（必要なら） */
.p-single__header-category {
  margin-left: 0;
}






/*==============================================================================================
ランキングページ
==============================================================================================*/
.ranking-page h2 {
  font-family: Zen maru gothic;
  text-align: center;
  font-size: 44px;
  margin: 20px 0;
  color: var(--chocolate);
}

.ranking-page-desc {
  border-bottom: 1px solid var(--orange);
  text-align: center;
  padding-bottom: 30px;
  margin-bottom: 50px;
  color: var(--chocolate);
}

.home .ranking-page-desc {
  margin-top: 30px;
  border-bottom: none;
  margin-bottom: 10px;
}

.ranking-card__metaTsubo {
  font-weight: bold;
  color: orangered;
  font-size: 18px;
}




.ranking-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}


/* 4列 */
.ranking-card {
  width: calc((100% - 78px) / 4);
  /* gap 26px × 3 */
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .08), 0 10px 22px rgba(0, 0, 0, .06);
  position: relative;
  overflow: hidden;
  padding: 18px;
}

.home .ranking-card {
  text-align: left;
  font-family: var(--tcd-font-type1);
}

.home .ranking-card__logoImg {
  width: auto;
}

@media (max-width: 768px) {
  .ranking-card {
    padding: 10px;
  }
}



/* 3列 */
@media (max-width: 1200px) {
  .ranking-card {
    width: calc((100% - 52px) / 3);
    /* gap 26px × 2 */
  }
}

/* 2列 */
@media (max-width: 980px) {
  .ranking-card {
    width: calc((100% - 26px) / 2);
  }
}

/* 1列 */
@media (max-width: 560px) {
  .ranking-card {
    width: 100%;
  }
}


.ranking-card__rank {
  position: absolute;
  top: 0;
  left: 12px;
  width: 34px;
  height: 30px;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
}


.ranking-card__rank::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 17px solid var(--chocolate);
  border-right: 17px solid var(--chocolate);
  border-top: 10px solid var(--chocolate);
  border-bottom: 10px solid #fff;
}

/* 1位：金 */
.ranking-card:nth-child(1) .ranking-card__rank,
.ranking-card:nth-child(1) .ranking-card__rank::after {
  background: #d4af37;
  /* gold */
  border-left-color: #d4af37;
  border-right-color: #d4af37;
  border-top-color: transparent;
  border-bottom-color: #fff;
}

/* 2位：銀 */
.ranking-card:nth-child(2) .ranking-card__rank,
.ranking-card:nth-child(2) .ranking-card__rank::after {
  background: #c0c0c0;
  /* silver */
  border-left-color: #c0c0c0;
  border-right-color: #c0c0c0;
  border-top-color: transparent;
  border-bottom-color: #fff;
}

/* 3位：銅 */
.ranking-card:nth-child(3) .ranking-card__rank,
.ranking-card:nth-child(3) .ranking-card__rank::after {
  background: #cd7f32;
  /* bronze */
  border-left-color: #cd7f32;
  border-right-color: #cd7f32;
  border-top-color: transparent;
  border-bottom-color: #fff;
}

/* デフォルト（4位以下） */
.ranking-card__rank,
.ranking-card__rank::after {
  background: var(--chocolate);
  border-left-color: var(--chocolate);
  border-right-color: var(--chocolate);
  border-top-color: transparent;
  border-bottom-color: #fff;
}

.ranking-card__logo {
  width: 80%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 0 auto;
}

.ranking-card__logoImg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.ranking-card__image {
  width: 100%;
  height: 130px;
}

.ranking-card__image img {
  display: block;
  /* 余計な隙間防止 */
  width: 100%;
  height: 100%;
  object-fit: contain;
}



.ranking-card__maker {
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0;
  padding-top: 15px;
}

.ranking-card__description {
  font-size: 15px;
}

.ranking-card__meta {
  margin: 15px 0;
  font-size: 15px;
}

.ranking-card__meta__tsubo {
  color: orangered;
  font-size: 18px;
  font-weight: 900;
}


.ranking-card__star {
  margin-top: 10px;
  font-size: 18px;
}



.ranking-card__metaSep {
  margin: 0 4px;
}

.ranking-card__ratingRow {
  margin: 10px 0;
}








/*==============================================================================================
各ハウスメーカーレビューページ
==============================================================================================*/

.simple_ul {
  margin: 25px 0;
}

/*single-review.phpの部分*/


.slider-main {
  margin-bottom: 20px;
}

.slider-wrapper {
  background-color: #fff;
}


/* 未選択の画像 */
.slider-nav .thumb-item {
  cursor: pointer;
  opacity: 0.5;
  /* 半透明にする */
  filter: brightness(1.2);
  /* ★画像を少し明るく飛ばす */
  padding: 0 5px;
}

/* 選択中の画像 */
.slider-nav .thumb-item.slick-current {
  opacity: 1;
  /* 元に戻す */
  filter: none;
  border: 2px solid #000;
}

/* 画像自体の調整 */
.slider-wrapper img {
  width: 100%;
  height: auto;
}



/*comment-template.php部分*/

.review_average_h3 {
  font-size: 20px;
  margin: 10px;
  text-align: center;
}

.review_average_sogohyoka {
  margin: 15px 0px;
  font-weight: bold;
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-content: center;
}

.review_average_sogohyoka .review_average_score {
  font-size: 32px;
  font-weight: 900;
}

.p-single--review-writeBtnWrap {
  text-align: center;
  margin: 20px 0 30px;
}



.write-review-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 220px;
  height: 44px;
  background: #f39b15;
  color: #fff;
  font-weight: 800;
  border-radius: 6px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
}

.write-review-btn:hover {
  opacity: .9;
}



.review_average_sogohyoka .review_average_stars {
  display: inline-flex;
  align-items: center;
}

.review_average_sogohyoka .review_average_rankNum {
  color: var(--orange);
  font-size: 25px;
}

.review_average_table th,
.review_average_table td {
  padding: 10px;
  border: 1px solid #d3d3d3;
  text-align: center;
}

.review_average_table th:first-child {
  width: 30%;
  background-color: var(--orange);
  color: #fff;

}

.review_average_table td:first-child {
  background-color: var(--orange);
  color: #fff;
}

.review_average__comment_amount {
  margin: 10px 0;
  text-align: right;
}

body .p-single--review-rating {
  padding: 20px;
  margin-bottom: 50px;
  border-radius: 30px;
}


/* レビュー書き込みフォーム：デフォルトは閉じる */
.p-review-comments-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  /* ←閉じ */
  margin-top: -1px;
  transition: grid-template-rows 0.5s ease;
}

/* 開く */
.p-review-comments-wrapper.is-active {
  grid-template-rows: 1fr;
}

/* 中身は折りたたみ中に見えないようにする（重要） */
.p-review-comments-wrapper__inner {
  overflow: hidden;
}


.review-top {
  margin: 30px 0;
  font-size: 24px;
}


.review-comments-wrapper {}


/* レビュー順にソート */
.review-sort {
  background: #f7f1e3;
  padding: 30px;
  border-radius: 30px 30px 0 0;
}

/* タイトル（h2は使わない方針にしている） */
.review-sort-title {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 10px;
}

.review-sort-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-sort-controls--wrap {
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.review-sort-metric {
  margin-left: 0;
}

.review-sort select {
  padding: 7px 10px;
  border: 1px solid #bdbdbd;
  background: #fff;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.2;
}

.sort-btn {
  padding: 6px 10px;
  border: 1px solid #bdbdbd;
  background: #fff;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.2;
  display: inline-block;
  margin: 4px 0;
}

.sort-btn.active {
  background: #f07f00;
  color: #fff;
  border-color: #f07f00;
}

#rating-filter {
  padding: 6px;
}


/* レビューページ：レビュー順にソート ここまで*/


/*comment-loop.php部分(各個人が書いたレビュー)*/

.reviewer-profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  border-bottom: 2px dashed #ccc;
  padding-bottom: 10px;
}

.reviewer-profile__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.review-profile__items {
  font-size: 16px;
  font-weight: 700;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.p-single--review-comments__headline {
  background: transparent;
  padding: 0;
  margin: 26px 0 12px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.p-single--review-comments__item .u-flex-align-center {
  display: flex;
}

.p-single--review-comments__headline-label {
  font-weight: 800;
  font-size: 14px;
  padding-bottom: 6px;
  border-bottom: 1px dotted #bbb;
  width: 100%;
}

.p-single--review-comments__headline-count {
  font-size: 12px;
  white-space: nowrap;
  margin-left: 10px;
}

.p-single--review-comments__item {
  border: 1px solid #e1e1e1;
  background: #fff;
  padding: 40px;
  margin: 30px 30px;
  border-radius: 20px;
}

.p-single--review-comments__item-author {
  color: red;
  font-weight: bold;
}

.review_box {
  display: flex;
  gap: 20px;
  margin-top: 30px;
}

.review_box_rating {
  border: 2px solid #e5e5e5;
  width: 280px;
  margin: 0;
  max-height: 355px;
}

.sougou_hyouka {
  font-weight: bold;
}

.sougou_hyouka tr {
  background: #fbff6159;
}

.sougou_hyouka th,
.sougou_hyouka td {
  padding: 10px;
  border-bottom: 1px solid #cfcfcf;
  font-size: 1.1em;
  text-align: center;
}

.kobetsu_hyouka th,
.kobetsu_hyouka td {
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #cfcfcf;
}

.review_box_comment {
  flex: 1;
}

.u-flex-align-center {
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: flex-end;
}

.p-star-review__icon {
  color: #6b6b6b
}

/* グラデーションのかかり方も少し伸ばす（任意） */
#js-review-comment-list .p-single--review-comments__item-desc--hide {
  max-height: 25em;
}

#js-review-comment-list .p-single--review-comments__item-desc--hide:before {
  background: linear-gradient(rgba(255, 255, 255, 0) 20em, #fff 25em);
}

#js-review-comment-list .p-single--review-comments__item-desc--hide.is-active {
  max-height: initial;
}


@media screen and (max-width: 767px) {
  .review_box {
    display: block;
    gap: 0px;
  }

  .review_box_rating {
    width: 100%;
    margin: 10px 0 14px;
    height: auto;

  }

  .review_box_comment {
    width: 100%;
  }

  .p-single--review-comments__item {
    margin: 25px 5px;
    padding: 40px 10px;
  }

  .p-single--review-comments__item-title {
    font-size: 17px;
    margin: 20px 0;
  }

  .reviewer-profile__left {
    flex-wrap: wrap;
  }

}


/*comment-loop.phpここまで*/


/* ==============================================================================
  ==============================
   

/* ==============================================================================
   価格.com 風：レビュー/クチコミ/スペック タブ
============================================================================== */
.p-reviewTabs {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  border-bottom: 2px solid #f07f00;
  margin: 12px 0 10px;
}

.p-reviewTabs__tab {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid #ddd;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #f6f6f6;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  line-height: 1;
  color: #333;
}

.p-reviewTabs__tab:hover {
  background: #fff;
}

.p-reviewTabs__tab.is-active {
  background: #f07f00;
  border-color: #f07f00;
  color: #fff;
}

.p-reviewTabs__tab.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* スレ一覧の微調整（価格.com 寄せ） */
.p-review-board__th {
  font-size: 13px;
  padding: 10px 10px;
  background: #e9e9e9;
  border-bottom: 1px solid #d9d9d9;
  opacity: 1;
}

.p-review-board__td {
  padding: 10px 10px;
  font-size: 13px;
}

.p-review-board__tr:nth-child(even) .p-review-board__td {
  background: #fff7e8;
}

.p-review-board__tr:hover .p-review-board__td {
  background: #fff2d6;
}

.rb-newThread {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.rb-newThread__btn {
  display: inline-block;
  padding: 10px 14px;
  background: #f07f00;
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
}

.rb-newThread__btn:hover {
  filter: brightness(0.95);
}

/*
Review-Board.php (掲示板) 
==============================================================================
============================== */

/* 全体 */
.p-review-board {
  margin: 28px 0;
}

.p-review-board__title {
  text-align: center;
  margin: 0 0 18px;
}

/* 共通パネル（枠） */
.p-review-board__panel {
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: #fff;
  padding: 16px;
  margin: 14px 0;
}

/* パネル見出し */
.p-review-board__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.p-review-board__panel-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}

.p-review-board__panel-meta {
  font-size: 12px;
  opacity: .75;
}

/* エラー */
.p-review-board__error {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid #f1c7c7;
  background: #fff5f5;
  border-radius: 10px;
  color: #8a1f1f;
  font-size: 14px;
}

/* 空 */
.p-review-board__empty {
  padding: 10px 0;
  opacity: .75;
}

/* ==============================
   一覧テーブル
   ============================== */
.p-review-board__table-wrap {
  overflow-x: auto;
}

.p-review-board__table {
  width: 100%;
  border-collapse: collapse;
}

.p-review-board__th {
  font-size: 16px;
  letter-spacing: .02em;
  text-transform: none;
  opacity: .8;
  padding: 10px 10px;
  border-bottom: 1px solid #eee;
  background: #fafafa;
  white-space: nowrap;
}

.p-review-board__th--title {
  text-align: left;
}

.p-review-board__th--reply {
  text-align: right;
  width: 88px;
}

.p-review-board__th--last {
  text-align: right;
  width: 96px;
}

.p-review-board__tr:hover .p-review-board__td {
  background: #fcfcfc;
}

.p-review-board__td {
  padding: 12px 10px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.p-review-board__td--reply,
.p-review-board__td--last {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.p-review-board__thread-link {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.4;
}

.p-review-board__thread-link:hover {
  text-decoration: underline;
}

/* 表示切替 */
#body .sp-can-display {
  display: none;
}

@media (max-width: 680px) {
  #body .pc-can-display {
    display: none;
  }

  #body .sp-can-display {
    display: block;
  }
}

/* SP用：スレ一覧の並び替え（レビューの sort-btn を流用） */
.rb-threadSort {
  margin: 20px 0;
}

.rb-threadSort .review-sort-controls {
  justify-content: flex-start;
}

.rb-threadSort .sort-btn {
  font-size: 13px;
  padding: 6px 10px;
}

.rb-threadSort__title {
  font-size: 17px;
  font-weight: bold;
  margin: 10px 0;
}


/* SP用リストデザイン */
.rb-threadList {
  padding: 0 10px;
}

.rb-threadItem {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid #e9e9e9;
}

.rb-threadTitle {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.rb-threadTitle a {
  text-decoration: none;
}

.rb-threadMeta {
  margin: 0;
  font-size: 12px;
  color: #666;
  line-height: 1.6;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.rb-threadMeta span {
  white-space: nowrap;
}




/* ==============================
   ページャー
   ============================== */
.p-review-board__pager {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.p-review-board__pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
}

.p-review-board__pager-btn:hover {
  background: #fafafa;
}

.p-review-board__pager-btn.is-disabled {
  opacity: .45;
  pointer-events: none;
}

.p-review-board__pager-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.p-review-board__pager-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #e6e6e6;
  background: #fff;
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
}

.p-review-board__pager-num:hover {
  background: #fafafa;
}

.p-review-board__pager-num.is-current {
  font-weight: 700;
  border-color: #dcdcdc;
  background: #f3f3f3;
  pointer-events: none;
}

.post-type-archive-tatemae .c-ctaBtn {
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  width: 300px;
  margin: 0 auto;
}


/* home-tatemae 内の pager は a{display:block;} の巻き込みを解除 */
.home-tatemae__box .p-review-board__pager-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}



/* =========================
   GOOD ANSWER RIBBON (ORANGE)
   0225v8 add
   ========================= */

.rb-bestRibbon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  padding: 4px 12px 4px 10px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffb347 0%, #ff8c00 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 1px 2px rgba(0, 0, 0, .15);
  position: relative;
}

.rb-bestRibbon::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 6px solid #ff8c00;
}

.rb-bestRibbon__star {
  color: #ffe066;
  font-size: 14px;
  margin-right: 2px;
}







/* ==============================
   新規スレフォーム
   ============================== */
.p-review-board__form {
  display: block;
}

.p-review-board__field {
  margin: 0 0 12px;
}

.p-review-board__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.p-review-board__input,
.p-review-board__textarea {
  width: 100%;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  background: #fff;
}

.p-review-board__textarea {
  min-height: 140px;
  resize: vertical;
}

.p-review-board__input:focus,
.p-review-board__textarea:focus {
  outline: none;
  border-color: #cfcfcf;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .04);
}

.p-review-board__actions {
  margin-top: 6px;
}

/* c-btn がテーマ側にある前提。幅だけ調整 */
.p-review-board__submit {
  min-width: 220px;
}

/* =========================================
   口コミ掲示板：新規書き込みボタン
========================================= */
.p-review-board__submit.c-btn {
  display: block;
  justify-content: center;
  min-width: 220px;
  height: 44px;
  padding: 0 18px;
  font-weight: 800;
  border-radius: 6px;
  background: #f39b15;
  color: #fff;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  margin: 0 auto;
}

/* hover */
.p-review-board__submit.c-btn:hover {
  background-color: #e68a00;
  border-color: #e68a00;
  color: #fff;
}

/* focus / active（念のため） */
.p-review-board__submit.c-btn:focus,
.p-review-board__submit.c-btn:active {
  background-color: #e68a00;
  border-color: #e68a00;
  color: #fff;
}




/* ==============================
   スレカード（下の展開）
   ============================== */
.p-review-board__threads {
  margin: 18px auto 0 auto;
  width: 98%;
}

.p-review-board__thread {
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  margin: 16px 0;
}

/* タイトル帯 */
.p-review-board__thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: #f6f6f6;
  border-bottom: 1px solid #ededed;
}

.p-review-board__thread-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.p-review-board__thread-count {
  font-size: 12px;
  opacity: .8;
  white-space: nowrap;
}

.p-review-board__thread-body {
  padding: 14px;
}

.p-review-board__thread-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 12px;
  opacity: .8;
  margin-bottom: 10px;
}

.p-review-board__meta-item {
  white-space: nowrap;
}

.p-review-board__thread-excerpt {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.75;
}

/* 最新レス枠 */
.p-review-board__latest {
  border: 1px solid #ededed;
  border-radius: 12px;
  background: #fafafa;
  padding: 12px 12px;
}

.p-review-board__latest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.p-review-board__latest-title {
  font-weight: 800;
  font-size: 13px;
}

.p-review-board__latest-link {
  font-size: 12px;
  text-decoration: none;
  opacity: .85;
}

.p-review-board__latest-link:hover {
  text-decoration: underline;
}

.p-review-board__latest-list {
  display: block;
}

.p-review-board__latest-item {
  padding: 10px 0;
  border-top: 1px solid #ececec;
}

.p-review-board__latest-item:first-child {
  border-top: none;
  padding-top: 0;
}

.p-review-board__latest-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  opacity: .85;
  margin-bottom: 6px;
}

.p-review-board__latest-author {
  font-weight: 800;
}

.p-review-board__latest-time {
  opacity: .85;
}

.p-review-board__latest-text {
  font-size: 14px;
  line-height: 1.6;
}

.p-review-board__latest-empty {
  font-size: 12px;
  opacity: .75;
}

/* 返信ボタン */
.p-review-board__thread-actions {
  text-align: center;
  margin-top: 12px;
}

.p-review-board__reply-btn {
  display: inline-block;
  min-width: 220px;
}

/* ==============================
   レスポンシブ
   ============================== */
@media (max-width: 640px) {
  .p-review-board__panel {
    padding: 14px 12px;
  }

  .p-review-board__thread-body {
    padding: 12px;
  }

  .p-review-board__pager-num {
    width: 34px;
    height: 34px;
  }

  .p-review-board__submit,
  .p-review-board__reply-btn {
    min-width: 100%;
  }

  /* テーブルは横スクロールに任せる */
}

/* =========================================
   掲示板（review-board / thread）ワイヤー風
   ========================================= */

/* 全体 */
.p-review-board {
  width: 100%;
}

/* スレッドカード（一覧側） */
.p-review-board__thread {
  border: 1px solid #bdbdbd;
  background: #fff;
  margin: 18px 0;
  padding: 0;
}

/* タイトル帯（上のグレー） */
.p-review-board__thread>.p-review-board__thread-head,
.p-review-board__thread>div:first-child {
  background: #d9d9d9;
  border-bottom: 1px solid #bdbdbd;
  padding: 10px 14px;
  font-weight: 700;
}

/* スレッド本文エリア */
.p-review-board__thread-body {
  padding: 14px;
}

/* 返信するボタン（中央） */
.p-review-board__thread .c-btn {
  display: inline-block;
  min-width: 220px;
  text-align: center;
  background: #d9d9d9;
  border: 1px solid #bdbdbd;
  color: #111;
  padding: 12px 16px;
  border-radius: 0;
  box-shadow: none;
}

.p-review-board__thread .c-btn:hover {
  opacity: .9;
}

/* 「最新レス（最大5件）」みたいな内箱（今の実装の箱をワイヤー寄せ） */
.p-review-board__latest,
.p-review-board__thread .p-review-board__latest-replies,
.p-review-board__thread div[style*="background:#fafafa"] {
  background: #fff !important;
  border: 1px solid #bdbdbd !important;
  padding: 12px !important;
  margin-top: 14px !important;
}


/* reply form slide animation */
.rb-replyForm {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease;
  will-change: max-height, opacity, transform;
}

/* open */
.rb-replyForm.is-open {
  max-height: 1200px;
  /* 充分大きい値。内容が増えるなら上げてOK */
  opacity: 1;
  transform: translateY(0);
}

/* reduced motion 対応（一応） */
@media (prefers-reduced-motion: reduce) {
  .rb-replyForm {
    transition: none;
  }
}



/* =========================================
   “ワイヤーの箱＋名前札” を汎用クラスで作る
   （トピ主・レスの両方に使える）
   ========================================= */

.rb-post {
  position: relative;
  border: 1px solid #bdbdbd;
  background: #fff;
  padding: 20px 14px 14px;
  margin: 18px 0;
}

.rb-post__name {
  position: absolute;
  top: -12px;
  left: 14px;
  display: inline-block;
  background: #fff;
  border: 1px solid #bdbdbd;
  padding: 6px 10px;
  min-width: 110px;
  text-align: center;
  font-weight: 700;
}

.rb-post__text {
  line-height: 1.8;
  word-break: break-word;
}

/* 返信（コメント）リストを “縦に増える箱” に */
.rb-replies {
  margin-top: 18px;
}

/* =========================================
   review_thread のコメント（WP標準HTML）をワイヤー化
   ※テーマによってHTMLが違うので「だいたい効く」当て方にしてる
   ========================================= */

/* コメントの親枠 */
.p-thread .comment,
.single-review_thread .comment,
.post-type-review_thread .comment,
.p-review-thread .comment {
  position: relative;
  border: 1px solid #bdbdbd;
  background: #fff;
  padding: 20px 14px 14px;
  margin: 18px 0;
  list-style: none;
}

/* ネスト表示されても “内側に入れ子” に見えないように */
.p-thread .comment .children,
.single-review_thread .comment .children {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

/* コメント作者名を “名前札” に見せる（WP標準の .comment-author を利用） */
.p-thread .comment .comment-author,
.single-review_thread .comment .comment-author,
.post-type-review_thread .comment .comment-author {
  position: absolute;
  top: -12px;
  left: 14px;
  background: #fff;
  border: 1px solid #bdbdbd;
  padding: 6px 10px;
  min-width: 110px;
  text-align: center;
  font-weight: 700;
  margin: 0;
}

/* 日付やメタを薄く */
.p-thread .comment .comment-meta,
.single-review_thread .comment .comment-meta {
  font-size: 12px;
  opacity: .7;
  margin: 8px 0 0;
}

/* コメント本文 */
.p-thread .comment .comment-content,
.single-review_thread .comment .comment-content {
  margin-top: 10px;
  line-height: 1.8;
  word-break: break-word;
}

/* 返信リンクとかの位置 */
.p-thread .comment .reply,
.single-review_thread .comment .reply {
  margin-top: 10px;
}


/* ==============================================================================
   口コミ掲示板（添付画像の完成デザイン寄せ）
   - review-board.php（一覧＋スレ展開）
   - single-review_thread.php（スレ詳細）
============================================================================= */

/* タブ */
.rb-tabs {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 14px;
}

.rb-tabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  border: 1px solid #d6d6d6;
  background: #fff;
  color: #111;
}

.rb-tabs__tab:hover {
  opacity: .9;
}

.rb-tabs__tab.is-current {
  background: #f39b15;
  border-color: #f39b15;
  color: #fff;
}

/* 一覧パネル：画像っぽい薄オレンジ */
.p-review-board__panel--list {
  border-radius: 0;
}

.p-review-board__table .p-review-board__th {
  background: #f39b15;
  color: #fff;
  opacity: 1;
  border-bottom: 0;
}

.p-review-board__table tbody tr:nth-child(odd) .p-review-board__td {
  background: #fffdf9;
}

.p-review-board__table tbody tr:nth-child(even) .p-review-board__td {
  background: #fff1da;
}

.p-review-board__thread-link {
  font-weight: 800;
}

/* ページャー（下の「<< 1 2 3 >>」風） */
.p-review-board__pager {
  gap: 6px;
}

.p-review-board__pager-btn,
.p-review-board__pager-num {
  border-radius: 0;
  border-color: #d6d6d6;
  background: #fff;
}

.p-review-board__pager-num.is-current {
  background: #f39b15;
  border-color: #f39b15;
  color: #fff;
}

/* 「新規スレッドを立てる」ボタン */
.rb-newThread {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.rb-newThread__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  background: #f39b15;
  color: #fff;
  border-radius: 6px;
}

.rb-newThread__btn:hover {
  opacity: .9;
}

/* スレッド（展開） */
.rb-thread {
  border: 1px solid #d6d6d6;
  background: #fff;
  margin: 18px 0 26px;
}

.rb-thread .review-comment-page__entry {
  border: none;
}

.bbs-thread {
  margin: 18px 0 26px;
}

.rb-thread header {
  background-color: var(--orange);
  padding: 10px;
}


.bbs-thread header {
  padding: 10px;
}


.bbs-header-positive {
  background-color: var(--orange);
}

.bbs-header-negative {
  background-color: var(--chocolate);
}



.rb-thread__head {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 20px;
}

.rb-thread__title {
  font-size: 20px;
}

.rb-thread__meta {
  font-size: 14px;
}

.rb-thread__date {
  font-size: 16px;
}

.rb-thread__body {
  padding: 14px 12px 18px;
}

.rb-thread__body__positive {
  background-color: none;
  border: 1px solid var(--orange);
}

.rb-thread__body__negative {
  background-color: #d5cec085;
  border: 1px solid var(--chocolate);
}

/* メッセージ（アイコン＋吹き出し） */
.rb-msg {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  margin: 14px 0;
}

/* アイコンの右側は「名前行 → 吹き出し」の縦積み（カンプ通り） */


.rb-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #cfcfcf;
}

.rb-bubble {
  position: relative;
  border-radius: 10px;
  padding: 12px 12px 10px;
  border: 1px solid #d6d6d6;
}

.single-tatemae .rb-msg--owner .rb-bubble,
#body .rb-msg--owner .rb-bubble {
  background: #fff2bf;
  border-color: #ead79b;
}

.rb-msg--reply .rb-bubble {
  background: #ededed;
}

.rb-bubble:before {
  content: "";
  position: absolute;
  left: 2px;
  top: -10px;
  border-width: 10px 10px 0px 10px;
  border-style: solid;
  border-color: transparent;
}

.rb-msg--owner .rb-bubble:before {
  border-right-color: #fff2bf;
}

.rb-msg--reply .rb-bubble:before {
  border-right-color: #ededed;
}

.rb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 10px;
  background: #f39b15;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  border-radius: 4px;
}

.rb-name {
  font-weight: 800;
  color: red;
}

.rb-bubble__text {
  font-size: 14px;
  line-height: 1.8;
}

.rb-thread__actions {
  margin-top: 16px;
  text-align: center;
}

.rb-btn,
input.rb-btn,
button.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 44px;
  padding: 0 18px;
  text-decoration: none;
  font-weight: 800;
  border-radius: 6px;
  background: #f39b15;
  color: #fff;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.rb-btn:hover {
  opacity: .9;
  cursor: pointer;
}

.single-tatemae .rb-btn {
  margin-bottom: 30px;
}



/* 掲示板（kuchikomi）一覧ページ：同一ページ内返信フォーム */
.rb-replyForm {
  margin: 14px auto 0;
  max-width: 720px;
  padding: 14px;
  border: 1px solid #ededed;
  border-radius: 12px;
  background: #fff;
}

.rb-replyForm .comment-form-author label {
  display: block;
  font-weight: 800;
  margin-bottom: 6px;
}


/* is-mine（自分投稿）はミント：rb-bubble の背景を上書き */
#body .rb-msg--reply.is-mine>.rb-bubble,
#body .rb-msg--owner.is-mine>.rb-bubble,
.single-tatemae .rb-msg--reply.is-mine>.rb-bubble,
.single-tatemae .rb-msg--owner.is-mine>.rb-bubble {
  background: #EAFBF3 !important;
  border-color: #BFE9D7 !important;
}

/* is-mine の吹き出し「しっぽ」もミントに（トピ主オレンジを上書き） */
#body .rb-msg--reply.is-mine>.rb-bubble:before,
#body .rb-msg--owner.is-mine>.rb-bubble:before,
.single-tatemae .rb-msg--reply.is-mine>.rb-bubble:before,
.single-tatemae .rb-msg--owner.is-mine>.rb-bubble:before {
  border-right-color: #EAFBF3 !important;
}


/* 自分の投稿（ログイン中） */
.rb-comment.is-mine,
.comment.is-mine,
.rb-bubble.is-mine {
  background: #EAFBF3;
  border-color: #BFE9D7;
}

/* hover 少しだけ変化 */
.rb-comment.is-mine:hover,
.comment.is-mine:hover,
.rb-bubble.is-mine:hover {
  background: #E1F6ED;
}

/* スレ主オレンジより優先させる */
.rb-comment.is-mine.rb-op,
.comment.is-mine.rb-op,
.rb-bubble.is-mine.rb-op {
  background: #EAFBF3;
  border-color: #BFE9D7;
}



/* ================================
   口コミ（review）投稿フォームの見やすさ改善
   - タイトル入力の「枠」が無い問題
   - 送信ボタンをオレンジに統一
   ================================ */

/* タイトル／名前などの input が border:none なので枠を付ける */
.p-review-comments__item-text,
.p-review-comments__item-textarea {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
}

/* 送信ボタン（reviewフォーム）をオレンジに */
.p-review-comments__item__submit-button.c-button {
  background: #f39b15;
  border: none;
  color: #fff;
  font-weight: 800;
  border-radius: 6px;
  margin-top: 30px;
}

.p-review-comments__item__submit-button.c-button:hover {
  opacity: .9;
}

/* ★レビュー：価格コム風「テンプレート挿入」ボタン */
.p-review-comments__templateBtnWrap {
  margin: 10px 0 12px;
}

.p-review-comments__templateBtn.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f6f8fa;
  color: #333;
  border: 1px solid #d0d7de;
  font-weight: 700;
  text-decoration: none;
}

.p-review-comments__templateBtn.c-button:hover {
  opacity: .9;
  cursor: pointer;
}

/* 掲示板返信フォーム内の textarea を少し見やすく */
.rb-replyForm textarea#comment {
  width: 100%;
  min-height: 140px;
  padding: 12px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
}

.rb-replyForm .comment-form-author input,
.rb-replyForm textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}

.rb-replyForm textarea {
  min-height: 140px;
}

.rb-replyForm .form-submit {
  margin-top: 10px;
  text-align: center;
}

.rb-replyForm .form-submit input[type="submit"],
.rb-replyForm .form-submit button[type="submit"] {
  cursor: pointer;
}

/* スレッド詳細ページも同じ見た目 */
.p-thread {
  max-width: 820px;
  margin: 0 auto;
}

.p-thread__title {
  background: #f39b15;
  color: #fff;
  padding: 12px;
  font-weight: 800;
  margin: 0 0 14px;
}

.p-thread__back {
  display: inline-block;
  margin: 8px 0 0;
  text-decoration: none;
  font-weight: 700;
}

@media (max-width: 640px) {
  .rb-tabs {
    justify-content: space-between;
  }

  .rb-tabs__tab {
    min-width: 0;
    flex: 1;
  }

  .rb-avatar {
    width: 38px;
    height: 38px;
  }

  .rb-btn {
    min-width: 50%;
  }
}





/* ================================================================================================================
==============================================================================================================
   カスタムポスト：レビューのスペック記事のスペック表装飾CSS（single-review.php の .p-reviewSpec）
   ==============================================================================================================
================================================================================================================ */
.p-reviewSpec {
  margin: 18px 0 28px;
}

.p-reviewSpec__head {
  margin-bottom: 10px;
}

.p-reviewSpec__title {
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
}

.p-reviewSpec__empty {
  margin: 10px 0 0;
  padding: 12px 14px;
  background: #fff7f0;
  border: 1px solid #ffd7bf;
  border-radius: 10px;
}

/* グループ（価格/構造/断熱…） */
.p-reviewSpec__group {
  margin-top: 14px;
}

.p-reviewSpec__groupTitle {
  margin: 25px 0 10px 0;
  padding: 7px 0 7px 15px;
  font-size: 18px;
  font-weight: 800;
  border-left: 4px solid var(--orange);
}

/* テーブル外枠 */
.p-reviewSpec__tableWrap {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  /*
    価格.com風の「解説」吹き出し（tooltip）はテーブル外へはみ出して表示する。
    overflow:hidden のままだと吹き出しがテーブル内でクリップされてしまうため、
    UXを優先して overflow を visible にする。
  */
  overflow: visible;
}

/* 念のため：親要素で切られないように */
.p-reviewSpec__group,
.p-reviewSpec {
  overflow: visible;
}

/* テーブル本体 */
.p-reviewSpec__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  /* キツ詰め防止の土台 */
}

.p-reviewSpec__table th,
.p-reviewSpec__table td {
  padding: 12px 14px;
  border-top: 1px solid #eeeeee;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}

.p-reviewSpec__table tr:first-child th,
.p-reviewSpec__table tr:first-child td {
  border-top: none;
}

/* 左列（項目名） */
.p-reviewSpec__table th {
  width: 32%;
  background: #fafafa;
  font-weight: 800;
}

/* 右列（値） */
.p-reviewSpec__table td {
  width: 68%;
}

/* 交互背景（読みやすく） */
.p-reviewSpec__table tr:nth-child(even) th {
  background: #f6f6f6;
}

.p-specCompare__td--feature {
  white-space: normal;
  line-height: 1.6;
  word-break: break-word;
  max-width: 520px;
}




/* =========================================================
   スマホ：2列をやめて「項目→値」の縦積みにする
========================================================= */
@media (max-width: 768px) {
  .p-reviewSpec__table {
    table-layout: auto;
  }

  .p-reviewSpec__table,
  .p-reviewSpec__table tbody,
  .p-reviewSpec__table tr,
  .p-reviewSpec__table th,
  .p-reviewSpec__table td {
    display: block;
    width: 100%;
  }

  .p-reviewSpec__table th {
    background: #fafafa;
    border-top: 1px solid #eeeeee;
    padding: 12px 14px 6px;
  }

  .p-reviewSpec__table td {
    border-top: none;
    padding: 0 14px 12px;
  }

  .p-reviewSpec__table tr:first-child th {
    border-top: none;
  }

  .p-specCompare__td--feature {
    max-width: 320px;
  }
}






/*================================================================================================
================================================================================================
フロントページ
================================================================================================
================================================================================================*/
.home-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
  height: 70vh;
}

.home-hero__bg {
  background-image: url('img/Top_gray.jpg');
  background-size: cover;
  background-position: center;
}

.home-hero__content {
  inset: 0;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.home-hero__catch {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.home-hero__title {
  position: absolute;
  margin: 0;
  top: 10vh;
  left: 8vw;
}

.home-hero__title_letter {
  font-size: 40px;
  color: #fff;
  line-height: 2.5;
  font-weight: 800;
}

.home-hero__title_letter span {
  font-size: 50px;
}

@media (max-width: 1300px) {
  .home-hero__title {
    position: absolute;
    margin: 0;
    left: 2vw;
  }

  .home-hero__title_letter {
    font-size: 27px;
    color: #fff;
    line-height: 2.5;
    font-weight: 800;
  }

  .home-hero__title_letter span {
    font-size: 35px;
  }

}

.home-hero__logo {}

.home-hero__logo img {
  width: 260px;
  height: auto;
  display: block;
}

.home-search {
  display: flex;
  width: 600px;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}

.home-search__input {
  width: 80%;
  height: 44px;
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: 0 16px;
  background: #fff;
  box-sizing: border-box;
}

.home-search__btn {
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  width: 20%;
  margin-left: 20px;
}


@media (max-width: 700px) {
  .home-hero__bg {
    height: 300px;
    background-position: right;
  }

  .home-hero__title {
    margin: 0;
    top: 10vh;
    left: 5vw;
  }

  .home-hero__title_letter span {
    font-size: 25px;
  }

  .home-hero__title_letter {
    font-size: 17px;
    color: #fff;
    line-height: 1.5;
    font-weight: 800;
  }

  .home-hero__title img {
    max-width: 70%;
    min-width: 280px;
    height: auto;
    vertical-align: bottom;

  }

  .home-search {
    width: 80%;
    bottom: 5%;
  }

  .home-search__input {
    height: 30px;
  }

  .home-search__btn {
    height: inherit;
  }
}


/* Section Head */
.c-sectionHead {
  font-family: zen maru gothic;
}

.c-sectionHead img {
  width: 70px;
}

.c-sectionHead__kuchikomirank {
  margin: 20px 0 40px 0;
  font-size: 35px;
  font-weight: 800;
  text-align: center;
}

.c-sectionHead__title {
  margin: 20px 0 40px 0;
  font-size: 35px;
  font-weight: 800;
  text-align: center;
}

.c-sectionHead--center {
  text-align: center;
}

.c-sectionHead__eyebrow {
  font-size: 24px;
  font-weight: 800;
  color: var(--orange);
  margin-bottom: 6px;
  font-family: 'Zen Maru Gothic';
}



/* cta */

.p-single--review-comments__item--cta {
  padding: 0;
  border: 0;
  background: transparent;
}


.fp-head-cta {
  padding: 30px;
  margin: 30px auto;
}

/* 口コミ掲示板：5件目CTA */
.p-review-board__td--cta {
  padding: 16px 0;
}

.rb-threadCta {
  margin: 18px 0 22px;
}

/* ===== フロントCTAセクション ===== */
/* ================================
   Front Page CTA Card
================================ */

.cta-card {
  background: #FAF7F2;
  padding: 70px 20px;
  display: flex;
  justify-content: center;
}

.cta-inner {
  background: #ffffff;
  max-width: 1000px;
  width: 100%;
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  position: relative;
  font-family: 'Zen Maru Gothic';
}

.pr-cta {
  position: absolute;
  left: 5px;
  top: 5px;
}

/* タイトル */
.cta-title {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: #4b3f37;
  letter-spacing: 1px;
}

/* 2カラムレイアウト */
.cta-content {
  display: flex;
  gap: 60px;
  align-items: center;
  justify-content: center;
  margin-bottom: 35px;
}

/* 左の悩みリスト */
.cta-left ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cta-left li {
  font-size: 18px;
  margin-bottom: 14px;
  padding-left: 26px;
  position: relative;
  color: #333;
}

.cta-left li::before {
  content: "●";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-size: 14px;
  bottom: 1px;
}

/* 右の安心ボックス */
.cta-right {
  padding: 25px 30px;
  border-radius: 14px;
  border: 8px solid #FCF4E7;
  min-width: 260px;
}

.cta-check {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cta-check li {
  font-size: 18px;
  margin-bottom: 14px;
  font-weight: 600;
}

.fa-circle-check {
  color: #22c55e;
  /* 緑 */
  font-size: 20px;
  margin-right: 10px;
}


/* 説明文 */
.cta-desc {
  text-align: center;
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--chocolate);
  line-height: 1.7;
}

/* ボタンエリア */
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
}

/* ボタン共通 */
.cta-btn {
  display: inline-block;
  padding: 18px 40px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 14px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15);
}

/* 緑ボタン */
.cta-btn.primary {
  background: linear-gradient(to bottom, #34d399, #22c55e);
  color: #fff;
  flex-grow: 0.5;
  text-align: center;
  font-size: 22px;
}

.cta-btn.primary:hover {
  transform: translateY(2px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
}

/* 青ボタン */
.cta-btn.secondary {
  background: linear-gradient(to bottom, #60a5fa, #3b82f6);
  color: #fff;
}

.cta-btn.secondary:hover {
  transform: translateY(2px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
}

/* 下の小さな安心表示 */
.cta-mini {
  text-align: center;
  margin-top: 30px;
  font-size: 15px;
  color: var(--chocolate);
  display: flex;
  justify-content: center;
  gap: 20px;
}

.cta-mini span {
  font-weight: 600;
  color: #22c55e;
}

.pr {
  font-size: 16px;
}


.rank-minicta__flex {
  display: flex;
  gap: 50px;
}

/* ================================
   Responsive
================================ */

@media (max-width: 768px) {

  .cta-card {
    padding: 28px 12px;
  }

  .cta-inner {
    padding: 28px 16px 24px;
    border-radius: 16px;
  }

  .cta-content {
    flex-direction: column;
    gap: 20px;
    margin: 0 0 12px;
  }

  .cta-title {
    font-size: 24px;
    line-height: 1.35;
    margin-bottom: 18px;
  }

  .cta-left li,
  .cta-check li {
    font-size: 16px;
  }

  .cta-desc {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 10px;
  }

  .cta-buttons {
    gap: 14px;
  }

  .cta-btn {
    width: 100%;
    text-align: center;
    padding: 16px 20px;
    font-size: 16px;
    line-height: 1.4;
    border-radius: 14px;
  }

  .cta-mini {
    margin-top: 14px;
    gap: 8px 14px;
    flex-wrap: wrap;
    font-size: 14px;
  }
}



/* ===== ミニCTA：ランキング用 微調整 ===== */
.mini-cta--ranking {
  margin: 20px auto 28px;
  max-width: 1200px;
  /* ranking幅に少し合わせる */
}

.mini-cta__pr {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  margin-right: 6px;
  opacity: .75;
}

.mini-cta__meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 12px;
  opacity: .9;
}

.mini-cta__meta span {
  color: #22c55e;
  font-weight: 700;
}

@media (max-width:640px) {
  .mini-cta--ranking {
    margin: 14px 10px 20px;
  }

  .mini-cta__meta {
    justify-content: center;
  }
}

/* =====================================================
   Ranking Mini CTA (beige band + orange button)
===================================================== */
.rank-mini-cta {
  max-width: 1180px;
  margin: 22px auto 26px;
  padding: 0 16px;
  /* 画面端の余白 */
}

.rank-mini-cta__box {
  background: #FAF7F2;
  border: 1px solid rgba(120, 80, 40, .18);
  border-radius: 18px;
  padding: 35px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
  font-family: 'Zen Maru Gothic';
  position: relative;
}

.pr-edge {
  position: absolute;
  left: 3px;
  top: 3px;
}

.rank-mini-cta__body {
  flex: 1 1 auto;
  min-width: 0;
}

.rank-mini-cta__title {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--chocolate);
  margin: 0 0 6px;
  text-align: center;
}

.rank-mini-cta__lead span,
.rank-mini-cta__desc span {
  color: orangered;
  font-weight: bold;
  text-align: center;
}

.rank-mini-cta__lead {
  font-size: 18px;
  font-weight: 700;
  color: var(--chocolate);
  opacity: .92;
  margin: 20px 10px;
}

.rank-mini-cta__desc {
  font-size: 16px;
  line-height: 1.75;
  color: var(--chocolate);
  margin: 30px 0;
  text-align: center;
}

.rank-mini-cta__side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rank-mini-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 340px;
  padding: 14px 18px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  background: linear-gradient(180deg, #ffa01a, #f07f00);
  box-shadow: 0 6px 0 #c96500;
  transition: .15s ease;
  white-space: nowrap;
}

.rank-mini-cta__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 0 #c96500;
}

.rank-mini-cta__btn:active {
  transform: translateY(2px);
  box-shadow: 0 4px 0 #c96500;
}

.rank-mini-cta__arrow {
  font-size: 22px;
  line-height: 1;
  margin-top: -2px;
}

.rank-mini-cta__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  font-size: 16px;
}

.rank-mini-cta__pr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .10);
  font-weight: 900;
  color: var(--chocolate);
}

#body .rank-mini-cta__ok {
  color: #1a9b4a;
  font-weight: 800;
}

.ranking-card__guid__wrapper {
  height: 40px;
}

.ranking-card__guid__absolute {
  position: absolute;
  bottom: 0;
  right: 0;
}

.ranking-card__guid {
  background: var(--orange);
  padding: 7px;
  color: #fff;
  border-radius: 6px;
  width: 142px;
  position: relative;
  font-weight: bold;
  margin: 10px 10px 10px auto;
  text-align: center;
}

.ranking-card__guid::after {
  width: 7px;
  height: 7px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
  display: inline-block;
  position: absolute;
  right: 10px;
  top: 9px;
}


/* SP */
@media (max-width: 768px) {
  .rank-mini-cta__box {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 14px;
  }

  .rank-mini-cta__side {
    align-items: stretch;
    margin-top: 20px;
  }

  .rank-mini-cta__btn {
    min-width: 0;
    width: 100%;
  }

  .rank-mini-cta__meta {
    gap: 8px;
    font-size: 15px;
    margin: 0 auto;

  }

  .rank-mini-cta__title {
    font-size: 22px;
  }

  #body .rank-mini-cta .q_custom_button.q_custom_button1,
  #body .rank-mini-cta .q_custom_button.q_custom_button2 {
    width: 100%;
  }
}





















/* Ranking */
.home-ranking {
  background-image: url('img/mokume.jpg');
  padding: 20px;
}

.home-rankingGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.c-sectionHead {
  text-align: center;
}

.rank-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  padding: 20px;
  align-items: center;
}

.rank-card-link {
  display: block;
}

.rank-card__thumb {
  aspect-ratio: 16/10;
  width: 45%;
}

.rank-card__thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.rank-card__meta {
  padding: 10px;
  margin: 0 auto;
}

.rank-card__label {
  font-size: 26px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 10px;
  color: var(--chocolate);
}

.rank-card__sub {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
  color: var(--chocolate);
  opacity: 0.7;
}



.rank-card__btn {
  display: block;
  padding: 12px 12px;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 700;
  font-size: 16px;
  margin: 0 auto;
  text-align: center;
  width: 120px;
}


@media (max-width: 1150px) {
  .home-rankingGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .home-rankingGrid {
    grid-template-columns: 1fr;
  }
}


/* fpコンテンツ */

.fp_content_container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.fp_content_h3 {
  background: var(--usuichocolate);
  color: #fff;
  padding: 12px 14px;
  border-radius: 10px;
  font-family: Zen Maru Gothic;
  font-weight: bold;
}

.home-steps {
  margin-top: 24px;
  padding: 18px 0 30px;
}


.step-card__head {
  background: #3b2f2a;
  color: #fff;
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  border-radius: 10px;
  font-family: Zen Maru Gothic;
}

.step-card__badge {
  background: rgba(255, 255, 255, .18);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .02em;
  font-family: Zen Maru Gothic;
}

.step-card__title {
  font-weight: 900;
  font-family: Zen Maru Gothic;
}

.step-card__body {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  padding: 16px;
}

.step-card__text p {
  margin: 0 0 6px;
  line-height: 1.7;
}

.step-card__spacer {
  margin-top: 10px;
}


.text_link {
  text-decoration: underline;
  font-weight: 700;
  margin: 1em 0;
  display: block;
}


.step-card__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid #eee;
}

.step-card__cta {
  margin: 40px auto;
  text-align: center;
}

.c-ctaBtn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
}

.home-ranking .c-ctaBtn {
  margin: 20px auto;
}


/* 家づくりのコツ */

.iedukuri_kotsu {
  background-color: #E5E4E3;
  padding-top: 30px;
}

/* fp_家づくりの座学 */

.fp_zagaku {
  background-color: #EAE3D9;
  padding: 30px 0 70px 0;
}

.fp_zagaku .c-sectionHead__title img {
  width: 100px;
}

.zagaku_sub {
  margin: -20px 0 30px;
  font-size: 1.2em;
}

.fp_zagaku_list {
  display: flex;
  border-bottom: 2px dashed var(--chocolate);
  padding: 20px 5px 20px 5px;
  align-items: center;
  font-size: 24px;
  width: 100%;
}

.fp_zagaku_list_top {
  border-top: 2px dashed var(--chocolate);
}



.fp_zagaku_list dt {
  padding: 10px;
  background-color: var(--chocolate);
  color: #fff;
  border-radius: 10px;
  margin: 0 30px 0 10px;
  min-width: 85px;
}

/*リンクの矢印*/
.arrow_r_b {
  position: relative;
  display: block;
  padding-right: 32px;
  width: 100%;
}

.arrow_r_b:before {
  content: '';
  width: 20px;
  height: 20px;
  background: var(--chocolate);
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.arrow_r_b:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 7px;
  bottom: 0;
  margin: auto;
  transition: right .15s ease;
}

.arrow_r_b:hover:after {
  right: 5px;
}

@media screen and (max-width: 767px) {


  .fp_content_container {
    padding: 0;
  }

  .fp_zagaku_list {
    border-bottom: 2px dashed var(--chocolate);
    padding: 15px;
    font-size: 18px;
  }

  .fp_zagaku_list dt {
    padding: 10px;
    margin: 0 15px 0 0;
    font-size: 15px;
    min-width: 60px;
  }

}



/***********************************
fp_正解だった・やらなきゃよかった
***********************************/


.fp_after_build_contents {
  display: flex;
  gap: 20px;
}

.fp_after_build_contents_top {
  display: flex;
  align-items: center;
  border-radius: 15px 15px 0 0;
  padding: 10px;
}

.yattokyayokatta {
  background-color: #5D4943;
}

.yatteyokatta {
  background-color: var(--orange);
}

.fp_after_build_contents_top img {
  display: block;
  width: 30%;
}

.fp_after_build_contents_top p {
  color: #fff;
  font-weight: bold;
  font-size: 24px;
}

.fp_after_build_contents_body {
  padding: 15px;
}

.yattokyayokatta_body {
  background-color: #E5E4E3;
}

.yatteyokatta_body .arrow_r_b:before {
  background-color: var(--orange);
}

.yatteyokatta_body {
  background-color: #FCE5BF;
}

.fp_after_build_contents_body li {
  border-bottom: 2px dashed var(--chocolate);
  font-size: 18px;
  padding: 15px;
}

.fp_after_build_contents_foot {
  text-align: center;
  height: 40px;
  border-radius: 0 0 7px 7px;
}

.fp_after_build_contents_foot a {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  display: block;
  padding: 9px;
}

@media screen and (max-width: 767px) {
  .fp_after_build_contents {
    display: block;
    margin-top: 20px;
  }

  .fp_after_build_contents_2 {
    margin-top: 50px;
  }
}



/*fp編集部コラム*/
.fp_column {
  padding: 20px;
  margin-top: 50px;
}




/* ===== reset & layout ===== */
.fp_column_box {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin: -14px;
}

.fp_column_box__item {
  width: 33.3333%;
  padding: 14px;
  box-sizing: border-box;
}

@media (max-width:980px) {
  .fp_column_box__item {
    width: 50%;
  }
}

@media (max-width:640px) {
  .fp_column_box__item {
    width: 100%;
  }
}

/* ===== card ===== */
.fp_column_box__card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 全面クリック用リンク（背面） */
.fp_column_box__overlayLink {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 内部の実リンクは前面に */
.fp_column_box__card a:not(.fp_column_box__overlayLink) {
  position: relative;
  z-index: 2;
}

/* image */
.fp_column_box__thumb {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f2f2f2;
}

.fp_column_box__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .4s ease;
}

.fp_column_box__card:hover .fp_column_box__img {
  transform: scale(1.05);
}

/* body */
.fp_column_box__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* label */
.fp_column_box__label {
  font-size: 12px;
  background: #efefefef;
  color: var(--chocolate);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 12px;
  align-self: flex-start;
}

/* title */
.fp_column_box__title {
  font-size: 18px;
  margin: 0 0 10px;
}

.fp_column_box__title a {
  color: #111;
  text-decoration: none;
}

/* excerpt */
.fp_column_box__excerpt {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(0, 0, 0, .75);
  margin-bottom: 14px;
}

/* meta */
.fp_column_box__meta {
  font-size: 12px;
  color: rgba(0, 0, 0, .5);
  margin-bottom: 16px;
}

/* CTA */
.fp_column_box__cta {
  margin-top: auto;
  text-align: right;
}

/* CTA 横並び最適化 */
.cta-buttons-flex {
  display: flex;
  width: 100%;
  gap: 10px;
  /* ボタン間の余白 */
}

/* 共通ボタン */
.cta-buttons-flex a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 14px 8px;
  /* 高さ圧縮 */
  line-height: 1.4;
  font-size: 14px;

  border-radius: 10px;
  text-decoration: none;
}

/* 緑（主導線） */
.cta-buttons-flex .primary {
  flex: 1.2;
  /* 少し大きく */
  font-size: 18px;
}

/* 青（サブ） */
.cta-buttons-flex .secondary {
  flex: 1;
  opacity: 0.95;
  /* 少し弱める */
  font-size: 15px;
}

/* スマホ微調整 */
@media (max-width: 768px) {
  .cta-buttons-flex a {
    padding: 12px 6px;
    font-size: 13px;
  }
}










/* button */
.fp_column_box__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .15);
  text-decoration: none;
  color: #111;
  font-weight: 700;
  background: #fff;
}

.fp_column_box__btn:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
  transform: translateY(-1px);
}

.fp_column_more {
  margin-top: 32px;
  text-align: center;
}

.fp_column_more__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--chocolate);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
  transition: .2s ease;
}

.fp_column_more__btn:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .25);
}




/* ==============================
   サイドバー
   ============================== */

/* Sidebar */
.site-sidebar {
  width: 220px;
  flex: 0 0 220px;
  background: #fff;
}

.site-sidebar__inner {
  background: #fff;
  padding: 14px;
}

.site-sidebar__logo {
  display: block;
  text-align: center;
  margin-bottom: 12px;
}

.site-sidebar__logo img {
  width: 140px;
  height: auto;
}

.site-side-nav {
  display: grid;
  gap: 10px;
  margin: 10px 0 16px;
}

.site-side-nav__item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 6px 8px;
  border-radius: 6px;
}

.site-side-nav__item:hover {
  background: #f7f7f7;
}

.site-side-nav__item img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.site-sidebar__block {
  border-top: 1px solid #eee;
  padding-top: 12px;
  margin-top: 12px;
}

.site-sidebar__blockTitle {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.site-sidebar__blockTitle--big {
  font-size: 14px;
}

/* ==========================================================
   Sidebar drawer (mobile) - CSS only
   - Toggle is implemented in template-parts/site-sidebar.php
   ========================================================== */

/* Hide drawer controls on desktop */
.site-sidebarDrawer__check,
.site-sidebarDrawer__btn,
.site-sidebarDrawer__backdrop,
.site-sidebarDrawer__close {
  display: none;
}




@media (max-width: 980px) {
  .site-sidebarDrawer__check {
    display: block;
    position: absolute;
    /* keep it out of the flow / invisible but focusable by label */
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-sidebarDrawer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    left: 12px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    z-index: 10001;
    cursor: pointer;
  }

  /* Hamburger icon */
  .site-sidebarDrawer__icon {
    position: relative;
    width: 22px;
    height: 2px;
    background: #111;
    border-radius: 999px;
  }

  .site-sidebarDrawer__icon::before,
  .site-sidebarDrawer__icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: #111;
    border-radius: 999px;
  }

  .site-sidebarDrawer__icon::before {
    top: -7px;
  }

  .site-sidebarDrawer__icon::after {
    top: 7px;
  }

  /* Backdrop */
  .site-sidebarDrawer__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 10000;
  }

  /* Drawer body */
  .site-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(86vw, 320px);
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    transform: translateX(-105%);
    transition: transform 220ms ease;
    z-index: 10002;
    box-shadow: 12px 0 28px rgba(0, 0, 0, 0.18);
  }

  /* Close button inside drawer */
  .site-sidebarDrawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.06);
    cursor: pointer;
    float: right;
  }

  /* Open state */
  .site-sidebarDrawer__check:checked~.site-sidebarDrawer__backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .site-sidebarDrawer__check:checked~.site-sidebar {
    transform: translateX(0);
  }

  /* When open, turn hamburger into "X" */
  .site-sidebarDrawer__check:checked~.site-sidebarDrawer__btn .site-sidebarDrawer__icon {
    background: transparent;
  }

  .site-sidebarDrawer__check:checked~.site-sidebarDrawer__btn .site-sidebarDrawer__icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .site-sidebarDrawer__check:checked~.site-sidebarDrawer__btn .site-sidebarDrawer__icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .step-card__body {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 981px) {

  .site-sidebar {
    position: relative;
    /* 念のため */
  }

  /* 追従本体 */
  .site-sidebar__inner {
    position: sticky;
    top: 24px;
    /* 固定ヘッダーがあるなら 80px などに上げる */
  }
}


/* ============================
   フッター
============================ */

.site_footer {
  background: var(--chocolate);
  color: #fff;
  padding: 60px 20px 40px;
  position: relative;
}

.site_footer a {
  color: #fff;
  text-decoration: none;
}

.site_footer a:hover {
  text-decoration: underline;
}

.footer_cotainer {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.footer_box1 {
  display: flex;
  justify-content: space-between;
}

.footer_box1 img {
  max-width: 120px;
  height: auto;
  display: block;
}

.footer_cta {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
  justify-content: center;
  align-items: center;
}


.footer_balloon {
  background: #fff;
  color: #f39800;
  padding: 20px 30px;
  border-radius: 16px;
  font-size: 23px;
  font-weight: bold;
  position: relative;
  max-width: 420px;
  line-height: 1.6;
  font-family: Zen Maru Gothic;
}

.footer_balloon:after {
  content: "";
  position: absolute;
  right: -30px;
  top: 40%;
  border-width: 10px 0px 10px 30px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
}

.footer_cta_btn {
  width: 250px;
  height: 250px;
  background: #f39800;
  border-radius: 50%;
  border: 4px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-left: 40px;
}

.footer_cta_btn a {
  color: #fff;
  font-weight: bold;
  font-size: 28px;
  line-height: 1.4;
}

/* 4-column layout */
.footer_menu {
  display: flex;
}

.footer_menu img {
  display: block;
  width: 150px;
}

.footer_menu_col {
  flex: 1 1 220px;
  min-width: 220px;
  margin-left: 50px;
}

/* menu inside each column */
.footer_menu_row {
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.footer_menu_row li {
  list-style: none;
  position: relative;
  padding-left: 16px;
}

.footer_menu_row li:before {
  content: "|";
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.6);
}

.all_right_reserved {
  text-align: center;
  color: #fff;
  background-color: var(--chocolate);
  padding: 15px 0;
}


/* responsive */
@media (max-width: 768px) {

  .footer_cta {
    margin-bottom: 50px;
  }

  .footer_cta_btn {
    width: 150px;
    height: 150px;
    margin-left: 40px;
  }

  .footer_cta_btn a {
    font-size: 18px;
  }

}

@media (max-width: 640px) {
  .site_footer {
    padding: 60px 10px 40px;
  }

  .footer_cta_btn {
    width: 100px;
    height: 100px;
    margin-left: 20px;
  }

  .footer_cta_btn a {
    font-size: 14px;
  }


  .footer_balloon {
    padding: 20px;
    font-size: 18px;
    font-weight: bold;
    max-width: 320px;
  }

  .footer_balloon:after {
    content: "";
    position: absolute;
    right: -30px;
    top: 40%;
    border-width: 10px 0px 10px 30px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
  }
}


















/* 返信フォーム：×ボタン */
.rb-replyForm {
  position: relative;
}

.rb-replyForm__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #333;
  font-size: 20px;
  line-height: 28px;
  cursor: pointer;
}

.rb-field {
  margin-top: 12px;
}

.rb-label {
  display: block;
  font-weight: 800;
  margin-bottom: 6px;
}

.rb-input,
.rb-textarea {
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  background: #fff;
}

.rb-textarea {
  min-height: 140px;
}

.rb-actions {
  margin-top: 12px;
  text-align: center;
}

.rb-btn--orange {
  background: #f39b15;
  color: #fff;
  border: none;
}

/* トースト（送信完了メッセージ） */
.rb-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(16px);
  opacity: 0;
  pointer-events: none;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-weight: 800;
  z-index: 99999;
  transition: opacity .2s ease, transform .2s ease;
}

.rb-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 投稿注意点 */
.rb-notes {
  max-width: 820px;
  margin: 22px auto 0;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #f0d5a6;
  background: #fff7e6;
}

.rb-notes__title {
  margin: 0 0 10px;
  font-weight: 900;
  color: #c45500;
}

.rb-notes__list {
  margin: 0;
  padding-left: 1.2em;
}

.rb-notes__list li {
  margin: 6px 0;
}


/* =========================================
   掲示板：アバター選択UI
========================================= */
.rb-avatar {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background-color: #d9d9d9;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex: 0 0 auto;
}

.rb-info {
  display: flex;
  flex-wrap: wrap;
  margin-left: 12px;
  gap: 9px;
  align-items: center;
}

.rb-avatarPicker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.rb-avatarPicker__item {
  width: 44px;
  height: 44px;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid #e6e6e6;
  background: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.rb-avatarPicker__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.rb-avatarPicker__item.is-selected {
  outline: 2px solid #f39b15;
  outline-offset: 2px;
}



/* =========================================================
   アバター表（テーブルUI）
========================================================= */
.rb-avatarPanel {
  max-height: 400px;
  overflow: auto;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}

.rb-avatarSection+.rb-avatarSection {
  margin-top: 12px;
}

.rb-avatarSection__head {
  font-weight: 800;
  margin: 2px 0 8px;
}

.rb-avatarTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: #fff;
}

.rb-avatarTable__th,
.rb-avatarTable__rowhead,
.rb-avatarTable__td {
  border-top: 1px solid #f0f0f0;
  border-left: 1px solid #f0f0f0;
  padding: 1px;
  text-align: center;
  vertical-align: middle;
}

.rb-avatarTable tr>*:last-child {
  border-right: 1px solid #f0f0f0;
}

.rb-avatarTable tbody tr:last-child>* {
  border-bottom: 1px solid #f0f0f0;
}

.rb-avatarTable__th--type {
  width: 64px;
}

.rb-avatarTable__rowhead {
  font-weight: 700;
  background: #fafafa;
}

.rb-avatarTable__item {
  width: 44px;
  height: 44px;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid #e6e6e6;
  background: #fff;
  cursor: pointer;

  /* ブラウザの黒枠（focus ring）対策：見た目はオレンジで統一 */
  outline: none;
}

.rb-avatarTable__item:focus-visible {
  outline: 2px solid #f39b15;
  outline-offset: 2px;
}

.rb-avatarTable__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.rb-avatarTable__item.is-selected {
  outline: 2px solid #f39b15;
  outline-offset: 2px;
}

.rb-avatarTable__placeholder {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px dashed #e0e0e0;
  background: repeating-linear-gradient(45deg,
      rgba(0, 0, 0, 0.03),
      rgba(0, 0, 0, 0.03) 6px,
      rgba(0, 0, 0, 0.00) 6px,
      rgba(0, 0, 0, 0.00) 12px);
}

/* 返信フォーム内で横が厳しい時は縮める */
@media (max-width: 680px) {
  .rb-avatarTable {
    font-size: 12px;
  }

  .rb-avatarPanel {
    padding: 8px;
  }

  .rb-avatarTable__th--type {
    width: 56px;
  }

  .rb-avatarTable__item,
  .rb-avatarTable__placeholder {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .rb-avatarPanel {
    padding: 4px;
  }

  .rb-avatarTable__th--type {
    width: 30px;
  }

  .rb-avatarTable__item,
  .rb-avatarTable__placeholder {
    width: 40px;
    height: 40px;
  }

  .rb-avatarModal__panel {
    width: 100%;
  }

  .rb-avatarTable__item.is-selected {
    outline: 1px solid #f39b15;
    outline-offset: 0px;
  }
}



/* =========================================================
 * 掲示板：アバター選択（価格.com風）
========================================================= */
.rb-avatarSelector__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rb-avatarSelector__preview {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #e6e6e6;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.rb-avatarSelector__preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.rb-avatarSelector__previewPlaceholder {
  width: 100%;
  height: 100%;
  display: block;
  background: repeating-linear-gradient(45deg,
      rgba(0, 0, 0, 0.03),
      rgba(0, 0, 0, 0.03) 6px,
      rgba(0, 0, 0, 0.00) 6px,
      rgba(0, 0, 0, 0.00) 12px);
}

.rb-avatarSelector__open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  text-decoration: none;
  color: blue;
  text-decoration: underline;
}

.rb-avatarSelector__open:hover {
  text-decoration: underline;
}

.rb-avatarSelector__controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rb-avatarSelector__control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.rb-avatarSelector__controlLabel {
  font-weight: 700;
}

.rb-avatarSelector__select {
  height: 34px;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
}

/* モーダル */
.rb-avatarModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.rb-avatarModal.is-open {
  display: block;
}

.rb-avatarModal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  border: none;
  padding: 0;
}

.rb-avatarModal__panel {
  position: relative;
  width: min(980px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  margin: 12px auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rb-avatarModal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.rb-avatarModal__title {
  font-weight: 800;
}

.rb-avatarModal__close {
  width: 34px;
  height: 34px;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.rb-avatarModal__body {
  padding: 10px;
  overflow: auto;
}

@media (max-width: 680px) {
  .rb-avatarSelector__controls {
    gap: 8px;
  }

  .rb-avatarSelector__select {
    height: 32px;
  }

  .rb-avatarModal__head {
    padding: 10px 12px 10px 70px;
  }
}

/* ==============================================================================
   価格.com 風：性能レビューまとめ（★） + 坪単価 + 総合評価
============================================================================== */
.p-reviewSummary {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 18px 16px;
  margin: 14px 0 10px;
  background: #fff;
  justify-content: center;
}

.p-reviewSummary__left {
  margin-right: 50px;
}

.p-reviewSummary__title {
  font-weight: 700;
  margin-bottom: 10px;
}

.p-reviewSummary__title a {
  color: var(--tcd-review-star-color);
  text-decoration: underline;
}

.p-reviewSummary__row {
  display: grid;
  grid-template-columns: 100px 100px 50px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid #eee;
}

.p-reviewSummary__row:first-of-type {
  border-top: none;
}

.p-reviewSummary__label {
  font-size: 16px;
}

.p-reviewSummary__stars {
  font-size: 22px;
  letter-spacing: 1px;
}

.p-reviewSummary__score {
  font-size: 16px;
  text-align: right;
  white-space: nowrap;
}

.p-reviewSummary__right {
  width: 220px;
  flex: 0 0 230px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 50px;
}

.p-reviewSummary__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid #eee;
  background: #fafafa;
}

.p-reviewSummary__priceLabel {
  font-size: 16px;
  color: var(--chocolate);
  font-weight: 700;
}

.p-reviewSummary__priceValue {
  font-size: 24px;
  font-weight: 800;
  color: orangered;
}

.p-reviewSummary__overall {
  padding: 10px 12px;
  border: 1px solid #eee;
  background: #fafafa;
}

.p-reviewSummary__overallStar {
  font-size: 26px;
  line-height: 1.2;
  margin-bottom: 4px;
  color: var(--tcd-review-star-color);
}

.p-reviewSummary__overallValue {
  font-size: 16px;
  font-weight: 800;
}

.p-reviewSummary__overallCount {
  font-size: 16px;
  font-weight: 700;
  color: var(--chocolate);
  margin-left: 6px;
}

.p-reviewSummary__overallCount a {
  color: var(--tcd-review-star-color);
  text-decoration: underline;
}

.p-reviewSummary__overallNum {
  font-size: 26px;
}

@media (max-width: 800px) {
  .p-reviewSummary {
    flex-direction: column;
  }

  .p-reviewSummary__left {
    width: 100%;
    text-align: center;
  }

  .p-reviewSummary__right {
    width: 100%;
    flex: 0 0;
    text-align: center;
    margin: 10px 0;
  }

  .p-reviewSummary__row {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .p-reviewSummary__score {
    text-align: center;
  }

  .p-reviewSummary__stars {
    text-align: center;
  }

  .p-reviewSummary__label {
    text-align: center;
  }
}


/* =========================================================
   Spec table: 「解説」吹き出し（価格.com風）
========================================================= */
.p-specKey {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.p-specHelpBtn {
  background: var(--orange);
  border-radius: 4px;
  padding: 0px 8px;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  color: #fff;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

.p-specHelpBtn:hover {
  opacity: .85;
}

.p-specHelpBtn:focus {
  outline: none;
}

.p-specHelpBubble {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  width: min(360px, 70vw);
  /* 他のカード/テーブル装飾より前に出す */
  z-index: 9999;
  display: none;
}

.p-specHelpBubble.is-open {
  display: block;
}

.p-specHelpBubble__inner {
  position: relative;
  border: 1px solid rgba(0, 0, 0, .2);
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.p-specHelpBubble__inner:before {
  content: "";
  position: absolute;
  top: -8px;
  left: 18px;
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent rgba(0, 0, 0, .2) transparent;
}

.p-specHelpBubble__inner:after {
  content: "";
  position: absolute;
  top: -7px;
  left: 19px;
  border-width: 0 7px 7px 7px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}



/* =========================================================
   スペック比較：メーカー選択UI（specページ下）
========================================================= */
.p-specComparePicker {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 12px;
}

.p-specComparePicker__title {
  font-size: 18px;
  margin: 0 0 6px;
}

.p-specComparePicker__desc {
  margin: 0 0 12px;
  opacity: .85;
  font-size: 13px;
}

.p-specComparePicker__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.p-specComparePicker__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}

.p-specComparePicker__check {
  transform: translateY(1px);
}

.p-specComparePicker__actions {
  margin-top: 12px;
  display: block;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
  margin: 20px auto;
  text-align: center;
}

.p-specComparePicker__actions:hover {
  cursor: pointer;
}

.p-specComparePicker__btn {
  padding: 10px 14px;
  border-radius: 10px;
}

.p-specComparePicker__note {
  margin-top: 10px;
  font-size: 15px;
  opacity: .85;
}




/* =========================================================
   spec-compare.php比較ページ：横スクロール＋左列固定
========================================================= */
.p-specCompare__tableWrap {
  margin-top: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 12px;
}

.p-specCompare__makerLink,
.p-specCompare__reviewLink {
  color: var(--orange);
  text-decoration: underline;
}

/* thead 2段 sticky 用（上段/下段で top を分ける） */
.p-specCompare__table thead th {
  position: sticky;
  z-index: 3;
  background: #fff;
}

.p-specCompare__table thead tr.p-specCompare__headRow--top th {
  top: 0;
  z-index: 4;
}

.p-specCompare__table thead tr.p-specCompare__headRow--sub th {
  top: var(--specHeadRow1H, 44px);
  z-index: 4;
}


.p-specCompare__table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
}

.p-specCompare__th,
.p-specCompare__td,
.p-specCompare__keyTh,
.p-specCompare__groupTh {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .10);
  border-right: 1px solid rgba(0, 0, 0, .10);
  vertical-align: top;
  max-width: 500px;
  width: 300px;
}


/* 特徴行だけ折り返す */
.p-specCompare__td.p-specCompare__td--feature {
  white-space: normal;
  line-height: 1.6;
  word-break: break-word;
}

.p-specCompare__table thead .p-specCompare__th {
  position: sticky;
  top: 0;
  z-index: 3;
}

.p-specCompare__th--sticky {
  position: sticky;
  left: 0;
  z-index: 4;
  border-right: 1px solid rgba(0, 0, 0, .15);
  width: 130px;
  text-align: left;
}

.p-specCompare__groupRow .p-specCompare__groupTh {
  font-weight: 700;
  z-index: 2;
}

.p-specCompare__groupRow th,
.p-specCompare__groupRow td {
  background-color: var(--chocolate);
  color: #fff;
}

.p-specCompare__keyTh {
  font-weight: 600;
  background: #fff;
}

@media screen and (max-width: 530px) {

  .p-specCompare__th,
  .p-specCompare__td,
  .p-specCompare__keyTh,
  .p-specCompare__groupTh {
    width: 140px;
  }

  .p-specCompare__th--sticky {
    width: 70px;
  }
}

/* =========================================================
   review（star-review）コメントフォーム：プロフィール欄
========================================================= */
.p-review-comments__profileRow {
  margin-top: 10px;
}

.p-review-comments__profileMeta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.p-review-comments__profileField {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.p-review-comments__profileLabel {
  font-weight: 700;
  min-width: 110px;
}

.p-review-comments__profileSelect {
  width: 150px;
  min-width: 0;
}

.p-review-comments__name .comment-form-author label {
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}

.p-review-comments__name .comment-form-author #reviewer_name {
  width: 300px;
}

.p-review-comments__profileField input.rb-avatarSelector__select {
  width: 360px;
}


/* =========================================================
   v5: Star rating one-line layout (Price.com style)
   - NO !important
   - Only affects review single comment form rating area
========================================================= */


/* =========================================================
   ★レビュー記入（star-review）：価格.com風 1行レイアウト（v5-2）
   - HTMLは review-form.php 側で Required をやめ、.require:after を利用
========================================================= */
.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-list {
  margin: 0;
  padding: 0;
}

.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item {
  display: grid;
  grid-template-columns: 210px 1fr;
  /* 左：項目名 / 右：★ */
  align-items: center;
  column-gap: 18px;
  padding: 0;
  position: relative;
}



.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item:first-child::before {
  display: none;
}

.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item__headline {
  margin: 0;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  justify-content: flex-start;
}

.p-review-comments__item {
  padding: 40px 40px 0px;
}

@media screen and (max-width :767px) {
  .p-review-comments__item {
    padding: 40px 5px 0px;
  }
}

.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item__stars {
  margin: 0;
  justify-self: start;
  align-self: center;
}



.p-review-comments__rating-item__stars {
  padding: 0;
  border: none;
}





.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item__stars-label {
  display: none;
}

.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item__stars-value {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
  height: 24px;
  line-height: 24px;
}

/* ★の縦ブレ防止：radioをフロー外へ＋labelの高さ固定（Grid運用） */
.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item__stars-value input[type="radio"] {
  position: absolute;
  left: -9999px;
  top: 0;
}

.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item__stars-value label {
  display: block;
  height: 24px;
  line-height: 24px;
  margin: 0;
  padding: 0;
}

/* 2つ目以降のratingだけ radio を画面外へ */
.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item:not(:first-of-type) .p-review-comments__rating-item__stars-value input[type="radio"] {
  position: absolute;
  left: -9999px;
  top: 0;
}

/* 総合評価（1つ目）だけは left を戻す */
.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item:first-of-type .p-review-comments__rating-item__stars-value input[type="radio"] {
  left: 0;
}



/* ★ホバー：ホバーした位置までだけ色が付く（プレビュー） */

.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item__stars-value.is-hovering .p-review-comments__rating-item__stars-icon.is-hover-fill {
  color: var(--tcd-review-star-color, #ff7f00);
}

/* ★評価項目の見出し色を chocolate に統一（v7） */
.p-review-comments__rating-item__headline {
  color: var(--chocolate);
}


/* Small screens: 星がはみ出す場合は折り返しOK */
@media (max-width: 600px) {
  .single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item {
    grid-template-columns: 210px 1fr;
    column-gap: 14px;
  }
}


@media (max-width: 425px) {
  .single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item {
    display: flex;
    justify-content: space-between;
    padding-right: 20px;
  }
}



/* 総合評価だけ少し強調 */
.p-review-comments__rating-list>li:first-child .p-review-comments__rating-item__headline {
  font-weight: 700;
  font-size: 1.05em;
  /* +5% */
}


/* ============================
   ★評価：ul/li を Grid で2列揃え（v9+）
   左：項目名(+必須) / 右：★
============================ */

/* 1行（li）を2カラムにする */
.single-review .p-review-comments__rating-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  /* ← 左幅は好みで調整 */
  align-items: center;
  /* 縦位置を揃える */
  column-gap: 18px;
}

/* 左：見出し（文字+必須） */
.single-review .p-review-comments__rating-item__headline {
  margin: 0;
  line-height: 1.2;
  justify-self: start;
}

/* 右：星コンテナ（親） */
.single-review .p-review-comments__rating-item__stars {
  margin: 0;
  justify-self: start;
  /* 左寄せ */
  align-self: center;
}

/* 星の中身：揺れ対策（radioをフロー外に） */
.single-review .p-review-comments__rating-item__stars-value {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  height: 24px;
  /* 高さを固定してブレ防止 */
}

.single-review .p-review-comments__rating-item__stars-value input[type="radio"] {
  position: absolute;
  left: -9999px;
  top: 0;
}

/* 星（label）を高さ固定で縦ブレ防止 */
.single-review .p-review-comments__rating-item__stars-value label {
  display: block;
  height: 24px;
  line-height: 24px;
  margin: 0;
  padding: 0;
}

/* NOTE:
 * 「評価項目エリアにマウスを乗せると星が全部茶色っぽくなる」挙動は不要のため削除。
 * hoverプレビュー（ホバーした星数まで黄色）だけを review-star-hover.js + is-hover-fill で表現する。
 */

/* 無評価ボタン（総合評価以外で使用） */
.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item__noRate {
  appearance: none;
  border: 1px solid #ddd;
  background: #fff;
  color: #666;
  font-size: 12px;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  margin-left: 10px;
}

.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item.is-no-rate .p-review-comments__rating-item__noRate {
  background: var(--orange, #F68B1E);
  border-color: var(--orange, #F68B1E);
  color: #fff;
}

.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item__noRate:focus {
  outline: 2px solid rgba(246, 139, 30, .35);
  outline-offset: 2px;
}

.p-review-comments__item--caution-desc {
  font-size: 14px;
  line-height: 2.2;
  margin: 2.4em 0;
  text-align: left;
}

.lets-write-review {
  padding: 20px;
  border: 1px solid #ccc;
  margin: 50px auto;
  text-align: center;
  background-color: #f2a50010;
}

.lets-write-review__title {
  border-bottom: 2px solid var(--orange);
  max-width: 382px;
  margin: 10px auto 30px;
}

/* =========================================================
   review コメント：画像添付UI
   ========================================================= */
.p-review-comments__item-imageControls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 10px;
  flex-wrap: wrap;
}

.p-review-comments__item-imageBtn {
  appearance: none;
  border: 0;
  background: var(--orange);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}

.p-review-comments__item-imageBtn:hover {
  opacity: .9;
}

.p-review-comments__item-imageHint {
  margin: 0;
  font-size: 12px;
  color: var(--chocolate);
  opacity: .8;
}

.p-review-comments__item-drop {
  border: 2px dashed rgba(92, 72, 66, .35);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
  background: rgba(242, 164, 0, .06);
  margin: 0 0 12px;
}

.p-review-comments__item-drop.is-dragover {
  border-color: var(--orange);
  background: rgba(242, 164, 0, .12);
}

.p-review-comments__item-dropText {
  margin: 0 0 4px;
  font-weight: 700;
}

.p-review-comments__item-dropSub {
  margin: 0;
  font-size: 12px;
  opacity: .8;
}

/* inputは既存CSSを活かしつつ、クリック領域はボタンに寄せる */
.p-review-comments__item-image-label input[type="file"] {
  width: 1px;
  height: 1px;
  opacity: 0;
  position: absolute;
  left: -9999px;
}

/* プレビューの最低限デザイン（親テーマが無い場合の保険） */
.p-review-comments__item-image-preview {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.p-review-comments__item-image-previewItem {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: visible;
  /* ×ボタンが切れないように */
}

.p-review-comments__item-image-previewFrame {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(92, 72, 66, .25);
  background: #fff;
}

.p-review-comments__item-image-previewImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-review-comments__item-image .p-review-comments__item-image-previewRemove {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* 文字を入れると親テーマの擬似要素と二重に見えることがあるため、
     本体は無文字（font-size:0）＋擬似要素で×を描画 */
  font-size: 0;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.p-review-comments__item-image .p-review-comments__item-image-previewRemove::before {
  content: "×";
  font-size: 18px;
  line-height: 1;
  display: block;
}


.p-single--review-comments__item-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 25px;
}


/* 閉じてる時は form を消す（余白も消える） */
#respond.p-review-comments:not(.is-reviewform-open) form {
  display: none;
}

/* 開いてる時は form を表示 */
#respond.p-review-comments.is-reviewform-open form {
  display: block;
}


/* =========================================================
 * 口コミ掲示板：スレ一覧の列幅調整（ズレ防止）
 * ========================================================= */
.p-review-board__table {
  width: 100%;
  table-layout: fixed;
}

.p-review-board__th--title {
  width: auto;
}

.p-review-board__th--helpful {
  width: 110px;
}

.p-review-board__th--reply {
  width: 90px;
}

.p-review-board__th--last {
  width: 170px;
}

.p-review-board__td--helpful,
.p-review-board__td--reply,
.p-review-board__td--last {
  text-align: center;
}

/* =========================================================
 * 口コミ掲示板：イイネUI（右下寄せ＆短文化）
 * ========================================================= */
.rb-board-like {
  width: 100%;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.rb-board-like__count {
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}



.rb-board-like__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.rb-board-like__btn:hover {
  opacity: .9;
}

/* =========================================================
   Review Board: thread list sorting (clickable headers)
========================================================= */
.p-review-board__th[data-sort-key] {
  cursor: pointer;
  user-select: none;
  color: #fff;
}

.p-review-board__th[data-sort-key]:hover {
  color: #fff;
  text-decoration: underline;
}

.p-review-board__th.is-sort-active .p-review-board__sortLink {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-weight: bold;
}


.p-review-board__th.is-sort-active {
  text-decoration: underline;
}

/* Sort icons (▲▼) */
.p-review-board__th .rb-sort-icon {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  font-size: 11px;
  line-height: 1;
}

.p-review-board__th .rb-sort-icon__up,
.p-review-board__th .rb-sort-icon__down {
  opacity: .35;
}

.p-review-board__th.is-sort-active .rb-sort-icon__up,
.p-review-board__th.is-sort-active .rb-sort-icon__down {
  opacity: .35;
}

.p-review-board__th.is-sort-active[data-sort-dir="asc"] .rb-sort-icon__up {
  opacity: 1;
}

.p-review-board__th.is-sort-active[data-sort-dir="desc"] .rb-sort-icon__down {
  opacity: 1;
}

.p-review-board__th a {
  color: #fff;
  text-decoration: underline;
  font-weight: lighter;
}

/* Active sort direction highlight */
.p-review-board__th.is-sort-active.is-sort-asc .rb-sort-icon__up {
  opacity: 1;
}

.p-review-board__th.is-sort-active.is-sort-asc .rb-sort-icon__down {
  opacity: .2;
}

.p-review-board__th.is-sort-active.is-sort-desc .rb-sort-icon__down {
  opacity: 1;
}

.p-review-board__th.is-sort-active.is-sort-desc .rb-sort-icon__up {
  opacity: .2;
}


/* =========================================================
   掲示板（口コミ）専用：イイネUI（レビュー側と分離）
========================================================= */
.rb-board-like {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rb-board-like__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--orange);
  background: #fff;
  color: var(--orange);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.rb-board-like__btn.is-liked {
  background: var(--orange);
  color: #fff;
}

.rb-board-like__count {
  display: inline-flex;
  align-items: center;
}

.rb-board-like__count-number {
  font-weight: 700;
}

/* =========================================================
   掲示板（口コミ）専用：イイネボタン（状態別）
========================================================= */

/* 未イイネ（デフォルト） */
.rb-board-like .rb-board-like__btn.p-single--review-comments__item-like__button {
  background: #fff !important;
  border: 1px solid var(--chocolate);
  color: var(--chocolate);
  width: auto;
  white-space: nowrap;
  font-size: 11px;
  padding: 0px 4px;
}

/* イイネ済み */
.rb-board-like .rb-board-like__btn.is-liked.p-single--review-comments__item-like__button {
  background: var(--orange) !important;
  border-color: var(--orange);
  color: #fff;
}

.p-single--review-comments__item-like>* {
  margin: 10px 0 0 6px;
}


/* =========================================================
   Spam対策：honeypot（人間には見えないフィールド）
   - style属性禁止のためクラスで非表示
========================================================= */
.rb-hp-wrap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* 無評価ボタン（総合評価以外で使用） */
.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item__noRate {
  appearance: none;
  border: 1px solid #ddd;
  background: #fff;
  color: #666;
  font-size: 12px;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  margin-left: 10px;
}

.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item.is-no-rate .p-review-comments__rating-item__noRate {
  background: var(--orange, #F68B1E);
  border-color: var(--orange, #F68B1E);
  color: #fff;
}

.single-review .p-review-comments__item.comment-form-rating .p-review-comments__rating-item__noRate:focus {
  outline: 2px solid rgba(246, 139, 30, .35);
  outline-offset: 2px;
}

.single-review .comment-form-rating .rb-overall-error {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #c0392b;
  font-weight: 700;
}

/* 総合評価（1つ目）のradioは、ブラウザ標準バリデーションの吹き出しを出すため display:none を避ける */
.single-review .comment-form-rating .p-review-comments__rating-item:first-of-type .p-review-comments__rating-item__stars-input {
  display: block !important;
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}



/* 総合評価行：必須バッジを★ブロックの左側に配置する */
.p-review-comments__rating-item.require .p-review-comments__rating-item__stars {
  position: relative;
}

/* 既存の「ラベルの右」に出る必須は消す（総合評価行のみ） */
.p-review-comments__rating-item.require .p-review-comments__rating-item__label.require:after {
  content: none !important;
}

/* ★の左（少し右寄り）に必須を出す */
.p-review-comments__rating-item.require .p-review-comments__rating-item__stars:before {
  content: "必須";
  position: absolute;
  left: -44px;
  /* ここで位置調整（-40〜-60あたりで好み） */
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  background: #D3423B;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

/* 総合評価行：ラベル側の必須（既存）を消す */
.p-review-comments__rating-item.require .p-review-comments__rating-item__label:after {
  content: "" !important;
  display: none !important;
}


/* ★総合評価：見出しに必須を表示 */
.p-review-comments__rating-item__headline.require:after {
  content: "必須";
  display: inline-block;
  background: #D3423B;
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
}



/*テンプレートを使用して評価項目別に書く*/
.p-review-comments__templateBtn.c-button {
  display: block;
  width: auto;
  height: auto;
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--orange);
  border: 2px solid var(--orange);
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
}

.p-review-comments__templateBtn.c-button:hover {
  background-color: #fff;
  border: 2px solid #f2a400;
  color: var(--orange);
}

/* テンプレートボタンの hover 黒化対策 */
.p-review-comments__templateBtn.c-button::before,
.p-review-comments__templateBtn.c-button::after {
  display: none;
}


/* =========================================================
   /bbs/（BBS）
========================================================= */
.rb-avatar__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

.rb-bbsBadge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.rb-bbsBadge--positive {
  background: #fff;
  color: var(--orange);
  border: 1px solid var(--orange);
}

.rb-bbsBadge--negative {
  background: #FFF;
  color: var(--chocolate);
  border: 1px solid var(--chocolate);
}

.rb-thread:target {
  outline: 2px solid var(--orange);
  outline-offset: 6px;
  border-radius: 10px;
}

.rb-bbsMetaLine {
  margin-top: 6px;
  font-size: 13px;
  color: #fff;
}

.rb-bbsMeta {
  display: inline-block;
  margin-right: 10px;
}

.fp_after_build_listItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fp_after_build_helpful {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}


.rb-bbsTabs {
  margin: 10px 0;
  font-size: 16px;
}

.rb-bbsTabs__tab.is-current {
  text-decoration: underline;
}


/* =========================================================
   タテマエ掲示板（tatemae）
========================================================= */

.tatemaeHead {
  margin: 20px 0 10px;
  text-align: center;
}

.tatemaeHead__title {
  font-size: 22px;
  margin: 0;
}

.tatemaeHead__lead {
  margin: 6px 0 0;
  font-size: 12px;
  color: #666;
}

.tatemae-a__sort,
.tatemaeAnswers__sort {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 10px 0 12px;
}

.tatemae-a__sortLink,
.tatemaeAnswers__sortLink {
  font-size: 13px;
  color: inherit;
  text-decoration: none;
}

.tatemae-a__sortLink.is-current,
.tatemaeAnswers__sortLink.is-current {
  text-decoration: underline;
}

.tatemae-a__title {
  display: inline-block;
  font-weight: 700;
}

.tatemae-a__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 12px;
  color: #666;
}

.tatemae-a__empty {
  padding: 14px 10px;
  color: #666;
}

.tatemae-a__cta {
  margin: 18px 0 10px;
  text-align: center;
}

.tatemae-s__back {
  margin: 10px 0 14px;
}

.tatemae-s-q__title {
  font-size: 28px;
  margin-bottom: 10px;
}

.tatemae-s-q {
  border: 1px solid #ccc;
}

.tatemae-s-q-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tatemae-s-q-headerbg {
  background-color: #f7f1e3;
  padding: 20px;
}

.tatemae-s-q-header__profile {
  display: flex;
  align-items: center;
}

.tatemae-s-q-header__profile .rb-avatar {
  margin-right: 15px;
}

.tatemae-s-q-header-num {
  display: flex;
  justify-content: space-around;
  gap: 30px;
}

.tatemae-s-q-text {
  margin: 10px 0 10px 0;
  padding: 20px;
}

.tatemae-s-cta {
  margin: 30px 0;
}

.tatemae-s-q .rb-board-like {
  padding: 20px;
}




/* タテマエsingle：質問直下の「回答する」ボタン（口コミの返信フォーム開閉を流用） */
.single-tatemae .tatemae-s__answerActions {
  margin: 0;
  border: 1px solid #ccc;
  border-top: 0;
}

.single-tatemae .tatemae-s__answerBtn {
  width: 100%;
  min-width: 0;
  height: 56px;
  border-radius: 0;
  background: #e9e9e9;
  color: #333;
  margin-bottom: 0;
}

.single-tatemae .tatemae-s__answerBtn:hover {
  opacity: 1;
  background: #dcdcdc;
}


.tatemaeAnswers {
  margin-top: 18px;
}

.tatemaeAnswers__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.tatemaeAnswers__h3 {
  margin: 30px 0;
}

.tatemaeAnswers__title {
  margin: 0;
  font-size: 16px;
}

.tatemaeAnswers__empty {
  padding: 12px 0;
  color: #666;
  list-style: none;
}

.tatemaeOther {
  margin-top: 24px;
}

.tatemaeOther__title {
  margin: 0 0 10px;
  text-align: center;
  font-size: 20px;
}

.tatemae-s-mottomiru {
  text-align: center;
  margin: 40px 0;
}

.tatemaeOther__more {
  margin-top: 10px;
  text-align: center;
}

.tatemaePost {
  max-width: 740px;
  margin: 0 auto;
}

.tatemaePost__headline {
  text-align: center;
  margin: 16px 0 12px;
  font-size: 18px;
}

.tatemaePost__error {
  padding: 10px 12px;
  border: 1px solid #f2b8b5;
  background: #fff2f2;
  color: #9a1a1a;
  border-radius: 8px;
  margin: 10px 0 14px;
}

.home-tatemae {
  margin: 20px 0 30px;
}

.home-tatemae__box {
  background: rgb(255 245 226);
  padding: 20px;
  margin: 35px 0 0 0;
  border-radius: 13px;
  border: 1px solid rgb(231 216 188 / 92%);
  gap: 10px;
}

.home-tatemae__box a {
  display: block;
}

.home-tatemae__box ul {
  margin-top: 15px;
}

.board-card li {
  border: 1px solid #cccccc1c;
  border-radius: 10px;
  padding: 20px;
  background: #fff;
  box-shadow: 3px 3px 5px -2px #cccccc;
  position: relative;
}

.board-card li::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 23px;
  width: 10px;
  height: 10px;
  border-top: 3px solid var(--chocolate);
  border-right: 3px solid var(--chocolate);
  -webkit-transform: rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}




.home-tatemae__box__h3 {
  margin-top: 40px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .home-tatemae__box li::after {
    right: 10px;
  }
}


.p-review-board__table td {
  padding: 20px 10px 5px 10px;
  border-bottom: 1px solid #ccc;
  margin-top: 0px;
}

.home-tatemae__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.fp-tatemae-more {
  margin: 20px auto;
}

.fp-tatemae-sodan {
  width: 200px;
  margin: 10px auto 30px auto;
}

.fp-tatemae-link {
  display: flex;
  flex-direction: column;
  align-content: center;
  text-align: center;
}

.tatemae-a__sortLink {
  font-size: 16px;
}

.single-tatemae .p-single--review-comments__item-images {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 0;
  padding: 20px;
}


@media screen and (max-width: 767px) {
  .single-tatemae .p-single--review-comments__item-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 0;
    padding: 10px;
  }

  .tatemae-s-q-header {
    display: block;
  }

  .tatemae-s-q__title {
    font-size: 24px;
  }

  .tatemae-s-q-header-num {
    display: flex;
    justify-content: flex-end;
  }

  .tatemae-s-q-header__profile {
    display: flex;
    align-items: center;
  }

}

/* =========================================================
   RB Login / MyPage（子テーマ追加）
========================================================= */
.rb-loginBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--orange, #f2a400);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.rb-loginBtn:hover {
  opacity: .92
}

.rb-loginBtn--ghost {
  background: #fff;
  color: var(--orange, #f2a400);
  border: 1px solid var(--orange, #f2a400);
}

.login-p,
.rb-mypage {
  padding: 24px 0
}

.login-p__box,
.rb-mypage__box {
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 16px;
  background: #fff;
}

.login-p__title,
.rb-mypage__title {
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 14px
}

.login-p__actions,
.rb-mypage__actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.login-p__benefits {
  margin-top: 20px;
  font-size: 15px;
}

.login-p__benefits ul {
  margin: 10px 0 10px 20px;
}

.login-p__benefits li {
  margin-bottom: 6px;
}

.login-p__note {
  font-size: 13px;
  color: #777;
  margin-top: 10px;
}


.login-p__friendRow {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap
}

.login-p__qr {
  width: 160px;
  height: 160px;
  border-radius: 12px;
  border: 1px solid #eee;
  background: #fff
}

.rb-loginNotice {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #eee;
  background: #fff;
  font-size: 14px;
}

.rb-loginNotice--ok {
  border-color: #d6f0dc;
  background: #f3fbf5;
}

.rb-loginNotice--warn {
  border-color: #ffe2b8;
  background: #fff8ee;
}

.rb-loginNotice--err {
  border-color: #ffd0d0;
  background: #fff3f3;
}

.rb-reactivateForm {
  margin: 14px 0 0;
  padding: 14px;
  border: 1px solid #eee;
  border-radius: 16px;
  background: #fff;
}

.rb-reactivateForm__row {
  margin: 0 0 12px;
}

.rb-reactivateForm__label {
  display: block;
  font-weight: 800;
  margin: 0 0 6px;
}

.rb-reactivateForm__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 12px;
}

.rb-mydb__card--withdraw .rb-mydb__withdrawBtn {
  background: #fff;
  color: #d63638;
  border: 1px solid #d63638;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 800;
}

.rb-mydb__card--withdraw .rb-mydb__withdrawBtn:hover {
  opacity: .92;
}

.rb-mypage__form {
  margin-top: 12px
}

.rb-mypage__row {
  margin: 0 0 14px
}

.rb-mypage__label {
  display: block;
  font-weight: 800;
  margin: 0 0 6px
}

.rb-mypage__input {
  width: 100%;
  max-width: 520px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 12px
}

.rb-mypage__help {
  font-size: 12px;
  color: #666;
  margin-top: 6px
}

.rb-mypage__row--checks {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.rb-mypage__check {
  display: inline-flex;
  /* ←これが重要（伸びない） */
  gap: 8px;
  align-items: center;
  width: fit-content;
  /* 念のため */
}

.rb-mypage__muted {
  font-size: 12px;
  color: #666
}

.rb-mypage__notice {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 12px
}

.rb-mypage__notice--ok {
  background: #f3fff0;
  border: 1px solid #cfeccd
}

.rb-mypage__notice--ng {
  background: #fff4f4;
  border: 1px solid #f0c0c0
}

.rb-mypage__notice {
  transition: opacity .25s ease;
}

.rb-mypage__notice.is-hide {
  opacity: 0;
}


/* 未読あり：強調表示（NEWを廃止するので目立たせる） */
.rb-mydb__badge--unread {
  background: #e53935;
  /* しっかり目立つ赤 */
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
}





/*=================================================
single.php
===================================================*/

.post_content h2 {
  font-size: 140%;
  margin: 0 0 35px 0;
  border-left: 8px solid var(--orange);
  color: var(--chocolate);
  text-align: left;
  padding: 20px;
  border-top: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  border-right: 2px solid var(--orange);
  border-radius: 10px;
}

.post_content h3 {
  font-size: 130%;
  margin: 0 0 35px 0;
  border-bottom: 2px solid var(--orange);
  padding: 10px;
}

.btn-orange {
  color: #fff;
  background: var(--orange);
  padding: 10px;
  display: block;
  width: 170px;
  text-align: center;
  margin: 0 auto;
  border-radius: 10px;
  font-weight: bold;
}

.single-post .post_content .btn-orange {
  color: #fff;
}

.post_content ul {
  list-style: inside;
}


/*CVボタン CTA */

#body .q_custom_button.q_custom_button1 {
  width: auto;
  height: 60px;
  padding: 40px 28px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(180deg, #2ecc71, #27ae60);
  font-size: 20px;
  font-weight: bold;
  border: none;
  transition: all .2s ease;
  box-shadow: 0 4px 0 #1e874b, 0 6px 14px rgba(0, 0, 0, .15);
  cursor: pointer;
}

/* hover（浮く） */
#body .q_custom_button.q_custom_button1:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #1e874b, 0 10px 20px rgba(0, 0, 0, .18);
}

/* クリック時（押し込み） */
#body .q_custom_button.q_custom_button1:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #1e874b, 0 4px 10px rgba(0, 0, 0, .15);
}


#body .q_custom_button.q_custom_button1:before,
#body .q_custom_button.q_custom_button2:before {
  background: transparent;
}

#body .q_custom_button.q_custom_button2 {
  width: auto;
  height: 60px;
  padding: 40px 28px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(180deg, #3b82f6, #2d7ef7);
  font-size: 18px;
  font-weight: bold;
  border: none;
  transition: all .2s ease;
  box-shadow: 0 4px 0 #1f5fbf, 0 6px 14px rgba(0, 0, 0, .15);
  cursor: pointer;
}

#body .q_custom_button.q_custom_button2:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #1f5fbf, 0 10px 20px rgba(0, 0, 0, .18);
}

#body .q_custom_button.q_custom_button2:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #1f5fbf, 0 4px 10px rgba(0, 0, 0, .15);
}

.btn-flex {
  display: flex;
  gap: 30px;
  margin: 20px 0;
  justify-content: center;
}

#body .q_button_wrap {
  margin: 0;
}

.post_content a:not(.q_custom_button, .wp-block-button__link) {
  color: blue;
  font-weight: bold;
  text-decoration: underline;
}

@media screen and (max-width:550px) {

  .btn-flex {
    flex-direction: column;
  }
}



/*目次*/

/* 自作TOC（目次） */
/* 自作TOC（目次） */
.post-mokuji {
  border: 2px solid #f2a400;
  border-radius: 10px;
  background: #fffaf2;
  margin: 50px 0;
  overflow: hidden;
  color: var(--chocolate);
}

.post-mokuji__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border-bottom: 1px solid rgba(242, 164, 0, .35);
  font-size: 20px;
}

.post-mokuji__mark {
  width: 16px;
  height: 5px;
  background: var(--orange);
  border-radius: 2px;
  display: inline-block;
}

.post-mokuji__title {
  font-weight: 700;
}

.post-mokuji__list {
  list-style: none;
  margin: 0;
  padding: 10px 12px 14px;
}

.post-mokuji__item {
  margin: 8px 0;
}

.post-mokuji__link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 5px;
}

.post-mokuji__link:hover {
  text-decoration: underline;
}

.post-mokuji__num {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #f2a400;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  flex: 0 0 auto;
}

.post-mokuji__bullet {
  color: #f2a400;
  font-size: 10px;
  flex: 0 0 auto;
}

.post-mokuji__text {
  color: var(--chocolate);
  font-size: 18px;
  font-weight: bold;
}

/* H3は一段インデント */
.post-mokuji__item--h3 .post-mokuji__link {
  padding-left: 32px;
}

.archive_padding .l-inner {
  max-width: none;
  margin: 0;
  width: 100%;
  padding: 0;
}

/* =========================================================
   Search (review + tatemae + bbs)
========================================================= */
.rb-search-extra {
  margin-top: 28px;
}

.rb-search-extra h2 {
  margin: 0 0 18px 0;
}

.rb-search-extra ul {
  margin: 0 0 26px 0;
  padding-left: 1.2em;
}

.rb-search-extra li {
  margin: 0 0 14px 0;
}

.rb-search-extra li>div {
  margin-top: 6px;
  opacity: 0.9;
}

/* === Search highlight & hash jump support === */
.rb-hit {
  font-weight: 700;
  background: rgba(242, 164, 0, .28);
  padding: 0 .18em;
  border-radius: .22em;
}

/* ハッシュジャンプ時、固定ヘッダーで隠れないように */
[id^="comment-"] {
  scroll-margin-top: 120px;
}


/* ハッシュジャンプ先を一瞬ハイライト */
.rb-hash-hit {
  animation: rbHashHit 2.2s ease-out 0s 1;
}

@keyframes rbHashHit {
  0% {
    box-shadow: 0 0 0 0 rgba(242, 164, 0, .55);
  }

  35% {
    box-shadow: 0 0 0 10px rgba(242, 164, 0, .25);
  }

  100% {
    box-shadow: 0 0 0 18px rgba(242, 164, 0, 0);
  }
}

/* 検索結果：BBSスレのメタ表示 */
.rb-search-meta {
  font-size: 12px;
  opacity: .85;
  margin: .25em 0;
  line-height: 1.6;
}

.rb-search-meta__item {
  margin-right: .9em;
  display: inline-block;
}

/* =========================================================
   Search Results (front-page search)
   - 0217v8 redesign: card list + BBS fold replies
   ========================================================= */
.rb-search-results {
  padding: 28px 0 10px;
}

.rb-search-results__inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 18px;
}

.rb-search-results__list {
  display: grid;
  gap: 16px;
}

.rb-result-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 14px;
  overflow: hidden;
}

.rb-result-card__thumb {
  position: relative;
  display: block;
  background: #f2f2f2;
  min-height: 160px;
}

.rb-result-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rb-result-card__noimg {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 160px;
  color: rgba(0, 0, 0, .45);
  font-weight: 700;
  letter-spacing: .06em;
}

.rb-result-card__body {
  padding: 14px 16px 16px;
  display: grid;
  gap: 8px;
}

.rb-result-card__title {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
}

.rb-result-card__title a {
  text-decoration: none;
}

.rb-result-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: rgba(0, 0, 0, .6);
  font-size: 13px;
}

.rb-result-card__excerpt {
  margin: 0;
  color: rgba(0, 0, 0, .78);
  line-height: 1.8;
}

.rb-result-card__actions {
  margin-top: 2px;
}

.rb-link {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-weight: 700;
  text-decoration: none;
}

.rb-link:after {
  content: '→';
}

.rb-hit {
  background: rgba(242, 164, 0, .22);
  padding: 0 .15em;
  border-radius: 4px;
}

.rb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
}

.rb-badge--type {
  position: absolute;
  left: 10px;
  top: 10px;
  background: rgba(0, 0, 0, .66);
  color: #fff;
}

.rb-badge--tatemae {
  background: rgba(242, 164, 0, .18);
  color: #8a5b00;
}

.rb-badge--bbs {
  background: rgba(0, 0, 0, .06);
  color: rgba(0, 0, 0, .72);
}

/* stars container alignment */
.rb-stars {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rb-stars .rating-stars__icons {
  line-height: 1;
}

/* Extra sections */
.rb-search-extra {
  max-width: 980px;
  margin: 18px auto 40px;
  padding: 0 18px;
}

.rb-search-section-title {
  font-size: 18px;
  margin: 22px 0 12px;
}

.rb-search-bbs-list {
  display: grid;
  gap: 14px;
}

.rb-bbs-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 14px;
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}

.rb-bbs-card__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.rb-bbs-card__title {
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
}

.rb-bbs-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: rgba(0, 0, 0, .6);
  font-size: 13px;
}

.rb-bbs-card__excerpt {
  margin: 0;
  color: rgba(0, 0, 0, .78);
  line-height: 1.8;
}

.rb-bbs-card__hits {
  border-top: 1px solid rgba(0, 0, 0, .06);
  padding-top: 10px;
}

.rb-bbs-card__hits-summary {
  cursor: pointer;
  font-weight: 800;
}

.rb-bbs-card__hits-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.rb-bbs-card__hits-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.rb-bbs-card__hits-link {
  text-decoration: none;
  line-height: 1.7;
  flex: 1;
}

.rb-bbs-card__hits-date {
  font-size: 12px;
  color: rgba(0, 0, 0, .45);
  white-space: nowrap;
}

.rb-bbs-card__actions {
  display: flex;
  justify-content: flex-end;
}

.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  background: #f2a400;
  color: #fff;
}

.rb-btn--ghost {
  background: rgba(0, 0, 0, .06);
  color: rgba(0, 0, 0, .78);
}

@media (max-width: 820px) {
  .rb-result-card {
    grid-template-columns: 180px 1fr;
  }
}

@media (max-width: 640px) {
  .rb-result-card {
    grid-template-columns: 1fr;
  }

  .rb-result-card__thumb {
    min-height: 180px;
  }

  .rb-bbs-card__actions {
    justify-content: stretch;
  }

  .rb-btn {
    width: 100%;
  }
}



/*serch.php*/

.p-page-header {
  display: none;
}

.rb-search-extra h2 {
  margin: 35px 0 10px;
}

.rb-search-header__title {
  font-size: 22px;
  margin-bottom: 30px;
}


/* ===== RB MyPage Upgrade ===== */
.rb-mypage__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  margin-top: 16px;
}

.rb-mypage__grid--bottom {
  grid-template-columns: 1fr 1fr;
}

@media(max-width: 900px) {

  .rb-mypage__grid,
  .rb-mypage__grid--bottom {
    grid-template-columns: 1fr;
  }
}

.rb-mypage__card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
}

.rb-mypage__cardTitle {
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--chocolate);
}

.rb-mypage__profile {
  display: flex;
  gap: 14px;
  align-items: center;
}

.rb-mypage__profileAvatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: #f3f3f3;
  border: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rb-mypage__profileAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rb-mypage__profileAvatarPlaceholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: block;
  background: #eee;
}

.rb-mypage__profileName {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 6px;
}

/* Toggle UI (checkbox -> switch) */
.rb-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rb-toggle__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.rb-toggle__ui {
  width: 44px;
  height: 24px;
  background: #ddd;
  border-radius: 999px;
  position: relative;
  flex: 0 0 44px;
  transition: .2s;
}

.rb-toggle__ui:after {
  content: '';
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: .2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.rb-toggle__input:checked+.rb-toggle__ui {
  background: var(--orange);
}

.rb-toggle__input:checked+.rb-toggle__ui:after {
  left: 22px;
}

.rb-toggle__label {
  font-size: 14px;
}

/* Lists */
.rb-mypage__listHead {
  font-size: 12px;
  color: #777;
  margin: 12px 0 6px;
}

.rb-mypage__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rb-mypage__listItem {
  padding: 10px 0;
  border-top: 1px solid #f1f1f1;
}

.rb-mypage__listItem:first-child {
  border-top: none;
  padding-top: 0;
}

.rb-mypage__listMeta {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: #999;
}



/* --- タテマエ：グッドアンサー --- */
.rb-badge--best {
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  color: inherit;
  border-radius: 0;
  padding: 0;
  margin: 0 8px 0 0;
  /* イイネの左 */
  height: auto;
  line-height: 1;
}

.rb-badge--best.is-hidden {
  display: none;
}

.good-answer {
  font-size: 16px;
  color: orangered;
  font-weight: bold;
  padding-bottom: 0px;
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-decoration-color: #ff4500ab;
  text-underline-offset: 2px;

}

.good-answer::before {
  content: "";
  width: 40px;
  height: 40px;
  margin-left: 4px;
  background: url("/wp-content/themes/rehub_tcd099-child/img/good.png") no-repeat center/contain;
}


.rb-bestanswer {
  margin: 10px 0 6px 0;
  text-align: right;
}

.rb-bestanswer__btn {
  appearance: none;
  border: 1px solid var(--orange);
  background: #fff;
  color: var(--chocolate);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.rb-bestanswer__btn.is-selected {
  background: var(--orange);
  color: #fff;
}

.rb-bestanswer__btn.is-loading {
  opacity: .6;
  cursor: wait;
}


/* LINEログイン時：アバター人物(type)固定 */
.rb-avatarSelector--lockType .js-rb-avatar-type {
  display: none;
}


/* ===== LINEログイン時：ニックネーム固定表示（掲示板） ===== */
.rb-nicknameLine {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.rb-nicknameLine__label {
  font-weight: 600;
  color: #333;
}

.rb-nicknameLine__value {
  color: orangered;
  font-weight: bold;
}

/* ログイン時は「一覧から選択」を使わせない（サーバー側でも固定だがUX対策） */
.rb-avatarSelector--lockType .rb-avatarSelector__open {
  display: none;
}

/* ログイン時にタイプ選択を隠す（表情のみ変更可） */
.rb-avatarSelector--lockType .js-rb-avatar-type {
  display: none;
}


/* ===== MyPage Dashboard (rb-mydb) ===== */
.rb-mydb {
  padding: 20px 0;
}

.rb-mydb__title {
  font-size: 22px;
  margin: 0 0 16px 0;
}

.rb-mydb__muted {
  font-size: 12px;
  opacity: .75;
  line-height: 1.6;
}

.rb-mydb__notice {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
}

.rb-mydb__notice--ok {
  background: #eef8ef;
}

.rb-mydb__notice--ng {
  background: #fff0f0;
}

.rb-mydb__tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px 0;
}

.rb-mydb__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  font-size: 13px;
  text-decoration: none;
}

.rb-mydb__tab.is-active {
  border-color: rgba(0, 0, 0, .22);
  font-weight: 700;
}

.rb-mydb__hero {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0 0 14px 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .03);
}

.rb-mydb__heroAvatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, .06);
}

.rb-mydb__heroAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rb-mydb__heroName {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.rb-mydb__heroSan {
  font-size: 16px;
  font-weight: 500;
  margin-left: 4px;
}

.rb-mydb__heroBadges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.rb-mydb__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .04);
  font-size: 12px;
}

/* マイページ：ヒーロー内の設定リンク */
.rb-mydb__heroSettings {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  font-size: 12px;
  text-decoration: none;
}

.rb-mydb__heroSettings:hover {
  background: rgba(0, 0, 0, .03);
}

.rb-mydb__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 860px) {
  .rb-mydb__grid {
    grid-template-columns: 1fr;
  }
}

.rb-mydb__card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .03);
}

.rb-mydb__card--span2 {
  grid-column: 1 / -1;
}

.rb-mydb__card--tight {
  padding: 12px 14px;
}

.rb-mydb__card--center {
  text-align: center;
}

.rb-mydb__cardHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.rb-mydb__cardTitle {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.rb-mydb__more {
  font-size: 12px;
  text-decoration: underline;
  white-space: nowrap;
}

.rb-mydb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rb-mydb__item {
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .02);
}

.rb-mydb__itemTitle {
  display: inline-block;
  font-weight: 700;
  text-decoration: underline;
}

.rb-mydb__itemSub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.rb-mydb__excerpt {
  margin-top: 6px;
  font-size: 12px;
  opacity: .85;
  line-height: 1.6;
}

.rb-mydb__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
}

.rb-mydb__badge--new {
  font-weight: 800;
}

.rb-mydb__badge--board {
  background: rgba(0, 0, 0, .04);
  border: 1px solid rgba(0, 0, 0, .06);
}

.rb-mydb__badge--like {
  background: rgba(255, 140, 0, .10);
  border: 1px solid rgba(255, 140, 0, .18);
  font-weight: 700;
}

.rb-mydb__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rb-mydb__chip {
  margin: 0;
}

.rb-mydb__chipLink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .03);
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, .06);
}

.rb-mydb__chipTitle {
  font-size: 12px;
  font-weight: 700;
  max-width: 38ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-mydb__chipBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 140, 0, .20);
  font-size: 12px;
  font-weight: 800;
}

.rb-mydb__profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rb-mydb__profileAvatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .06);
  flex: 0 0 auto;
}

.rb-mydb__profileAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rb-mydb__avatarPh {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .06);
}

.rb-mydb__profileName {
  font-size: 18px;
  font-weight: 800;
}

.rb-mydb__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 520px) {
  .rb-mydb__stats {
    grid-template-columns: 1fr;
  }
}

.rb-mydb__stat {
  background: rgba(0, 0, 0, .03);
  border-radius: 12px;
  padding: 10px;
}

.rb-mydb__statLabel {
  display: block;
  font-size: 11px;
  opacity: .75;
}

.rb-mydb__statValue {
  display: block;
  font-size: 18px;
}

.rb-mydb__form {
  margin-top: 10px;
}

.rb-mydb__row {
  margin-top: 12px;
}

.rb-mydb__label {
  display: block;
  font-weight: 700;
  margin: 0 0 6px 0;
}

.rb-mydb__input {
  width: 100%;
  max-width: 520px;
}

.rb-mydb__help {
  font-size: 12px;
  opacity: .75;
  margin-top: 6px;
}

.rb-mydb__row--checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rb-mydb__saveBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 0;
  background: var(--orange);
  color: #fff;
  font-weight: 800;
}

.rb-mydb__pager {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}

.rb-mydb__pagerBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .10);
  text-decoration: none;
  font-size: 12px;
}

.rb-mydb__friend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 0;
  color: #fff;
  font-weight: 800;
  background-color: #06C755;
}


/* --- MyPage: 得点ランクガイド --- */
.rb-mydb__card--guide .rb-mydb__cardHead {
  margin-bottom: 10px;
}

.rb-mydb__guideTop {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.rb-mydb__guideNow {
  flex: 1 1 280px;
}

.rb-mydb__guideNowLabel {
  font-size: 12px;
  opacity: .75;
  margin-bottom: 6px;
}

.rb-mydb__guideNowValue {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rb-mydb__rankBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.rb-mydb__rankPoints {
  font-weight: 700;
}

.rb-mydb__guideNext {
  margin-top: 6px;
  font-size: 13px;
}

.rb-mydb__guideTableWrap {
  flex: 1 1 260px;
}

.rb-mydb__guideTable {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.rb-mydb__guideRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rb-mydb__guideBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.rb-mydb__guideNeed {
  font-size: 13px;
  opacity: .85;
}

.rb-mydb__guideDetails {
  margin-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, .06);
  padding-top: 10px;
}

.rb-mydb__guideSummary {
  cursor: pointer;
  font-weight: 700;
}

.rb-mydb__guideBody {
  margin-top: 10px;
}

.rb-mydb__guideList {
  margin: 0;
  padding-left: 18px;
}

.rb-mydb__guideList li {
  margin: 6px 0;
}

.rb-mydb__guideCalc {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .03);
}

.rb-mydb__guideCalcTitle {
  font-weight: 700;
  margin-bottom: 6px;
}

.rb-mydb__guideCalcRows {
  display: grid;
  gap: 6px;
}

.rb-mydb__guideCalcRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.rb-mydb__guideCalcRow--total {
  border-top: 1px solid rgba(0, 0, 0, .08);
  padding-top: 8px;
  font-weight: 700;
}

/* === Rank badge (icon only) & legend (tatemae) v2 === */
/* 既存の rb-mydb__guideBadge 定義（後方）に勝つため、末尾で上書き */
.rb-mydb__guideBadge.rb-rankBadge--iconOnly {
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0;
  line-height: 0;
  overflow: visible;
  text-indent: -9999px;
  white-space: nowrap;
}

.rb-mydb__guideBadge.rb-rankBadge--iconOnly::after {
  width: 30px;
  height: 30px;
  margin-left: 0;
}

.rb-rankLegend {
  display: inline-block;
  margin-left: 6px;
  position: relative;
}

.rb-rankLegend>summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
}

.rb-rankLegend>summary::-webkit-details-marker {
  display: none;
}

.rb-rankLegend__body {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 999;
  margin-top: 0;
  min-width: 170px;
}

.rb-rankLegend__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}

.rb-rankLegend__label {
  font-size: 13px;
  color: #333;
  white-space: nowrap;
}


/* REGULAR（掲示板：丸R） */
.rb-mydb__guideBadge.rb-loginbar__badge--regular {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  border-radius: 50%;
  background: #e8f7e8;
  border: 1px solid #3aa63a;
  color: #1f7a1f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* マイページ凡例：REGULAR文字（緑文字のみ） */
.rb-mydb__guideBadge--regularText {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-right: 6px;
  color: #1f7a1f;
  font-weight: 700;
}

.rb-mydb__guideBadge--regularText::after {
  content: 'R';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  border-radius: 50%;
  background: #e8f7e8;
  border: 1px solid #3aa63a;
  color: #1f7a1f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* 自分の投稿ではイイネボタンを出さず、ラベルだけ表示（プレーンテキスト） */
.rb-board-like__plain {
  display: inline-block;
  margin-right: 8px;
  font-size: inherit;
  color: inherit;
}


/* ===== LINE friendship card (mypage) ===== */
.rb-lineFriendCard {
  display: none;
  margin: 18px 0;
}

.rb-lineFriendCard.is-show {
  display: block;
}

.rb-lineFriendCard__inner {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}

.rb-lineFriendCard__title {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
}

.rb-lineFriendCard__desc {
  font-size: 12px;
  opacity: .8;
  margin-bottom: 10px;
}

.rb-lineFriendCard__body {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.rb-lineFriendCard__qr img {
  width: 96px;
  height: auto;
  display: block;
}

.rb-lineFriendCard__btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .12);
  font-weight: 700;
  text-decoration: none;
}

/* review root comment detail page */
.review-comment-page {
  margin: 24px auto 48px;
}

.review-comment-page__back {
  margin: 0 0 14px;
}

.review-comment-page__headline {
  margin-bottom: 18px;
}

.review-comment-page__rootList {
  margin-bottom: 0;
}

.review-comment-page__entry {
  margin: 18px 0 28px;
}

.review-comment-page__actions {
  margin: 0 0 12px;
}

.review-comment-page__comments {
  margin: 28px 0;
}

.review-comment-page__thread {
  margin: 0 0 18px;
}

.review-comment-page__children {
  margin: 12px 0 0 18px;
}

.review-comment-page__thread.depth-1,
.review-comment-page__thread.depth-2,
.review-comment-page__thread.depth-3 {
  border-left: 2px solid #f0f0f0;
  padding-left: 12px;
}

.review-comment-page__cta {
  margin: 22px 0;
}

.review-comment-page .rb-replyMount:empty {
  display: none;
}


.rb-review-comment-link {
  margin-left: auto;
  font-weight: 700;
  color: #d97a00;
  text-decoration: none;
}

.rb-review-comment-link:hover {
  text-decoration: underline;
}

.rb-review-comment-link__count {
  font-weight: 400;
}


/* review comment page layout parity with single-review */
.review-comment-page {
  max-width: none;
}

.review-comment-page .site-container {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.review-comment-page .site-container__main {
  min-width: 0;
  flex: 1;
}

.review-comment-page .site-container__main__contents {
  background: none;
}

.review-comment-page .rb-thread__actions .rb-btn {
  min-width: 220px;
}

/* review comment preview on single-review */
.review-comment-preview {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid #ddd;
}

.review-comment-preview__headline {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 500;
  color: #222;
}

.review-comment-preview__item {
  padding: 0 0 22px;
  margin: 0 0 22px;
  border-bottom: 1px solid #ddd;
}

.review-comment-preview__item:last-child {
  margin-bottom: 0;
}

.review-comment-preview__header.rb-msg {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.review-comment-preview__header .rb-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: #f3f3f3 center/cover no-repeat;
}

.review-comment-preview__header .rb-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  line-height: 1.5;
}

.review-comment-preview__header .rb-name {
  font-size: 14px;
  font-weight: 700;
  color: #ff1a1a;
}

.review-comment-preview__header .rb-date {
  font-size: 13px;
  color: #333;
}

.review-comment-preview__text {
  font-size: 16px;
  line-height: 1.8;
  color: #222;
  word-break: break-word;
}

.review-comment-preview__text> :first-child {
  margin-top: 0;
}

.review-comment-preview__text> :last-child {
  margin-bottom: 0;
}

.review-comment-preview .p-single--review-comments__item-like {
  justify-content: flex-end;
  margin-top: 16px;
}

.review-comment-preview__moreWrap {
  margin: 28px 0 0;
  text-align: center;
}

.review-comment-preview__more {
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  color: #222;
  text-decoration: none;
}

.review-comment-preview__more:hover {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .review-comment-preview {
    margin-top: 20px;
    padding-top: 14px;
  }

  .review-comment-preview__headline {
    margin-bottom: 14px;
    font-size: 16px;
  }

  .review-comment-preview__item {
    padding-bottom: 18px;
    margin-bottom: 18px;
  }

  .review-comment-preview__header.rb-msg {
    gap: 10px;
    margin-bottom: 10px;
  }

  .review-comment-preview__header .rb-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .review-comment-preview__header .rb-name {
    font-size: 14px;
  }

  .review-comment-preview__header .rb-date {
    font-size: 12px;
  }

  .review-comment-preview__text {
    font-size: 14px;
    line-height: 1.7;
  }

  .review-comment-preview .p-single--review-comments__item-like {
    margin-top: 12px;
  }

  .review-comment-preview__moreWrap {
    margin-top: 20px;
  }

  .review-comment-preview__more {
    font-size: 14px;
  }
}


.review-inlineReply {
  margin-top: 26px;
}

.review-inlineReply--afterMore {
  margin-top: 20px;
}

.review-inlineReply__actions {
  text-align: center;
}

.review-inlineReply__button.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 340px;
  max-width: 100%;
  padding: 14px 24px;
  font-size: 18px;
  border-radius: 10px;
  background: #ef8732;
  border-color: #ef8732;
  color: #fff;
}

.review-inlineReply__button.rb-btn:hover {
  opacity: .92;
}

.review-inlineReply .rb-replyMount {
  margin-top: 16px;
}

.review-inlineReply .rb-replyForm {
  max-width: none;
}

@media (max-width: 767px) {
  .review-inlineReply {
    margin-top: 20px;
  }

  .review-inlineReply__button.rb-btn {
    display: flex;
    width: 100%;
    min-width: 0;
    padding: 13px 16px;
    font-size: 16px;
  }
}


/*======================================================
single-review.php photo category
======================================================*/
.single-review__photo h2 {
  border-bottom: 1px solid var(--orange);
  padding: 10px;
  margin-bottom: 25px;
  font-size: 24px;
}

.single-review__photo h3 {
  border-left: 5px solid var(--orange);
  padding: 10px;
  margin: 2em 0 1em 0;
  font-size: 17px;
}

.rb-photoSubmit {
  text-align: center;
}




/*======================================================
single-review-comment.php
======================================================*/

.review-comment-page__root .p-single--review-comments__item {
  border: none;
  margin: 0;
}

/* =========================
   レビュー本体
========================= */

.review-comment-page__root {
  border-radius: 30px;
  overflow: hidden;
  /* ← 角丸の欠け対策 */
  margin-bottom: 30px;
}

/* ULの余白リセット */
.review-comment-page__rootList {
  margin: 0;
  padding: 0;
}

/* レビューカード */
.review-comment-page__rootList .p-single--review-comments__item {
  margin: 0;
  border-radius: 0;
}


/* =========================================================
   page-line-friend
   ========================================================= */
.rb-line-friend-page {
  width: 100%;
  padding: 24px 16px 48px;
  box-sizing: border-box;
}

.rb-line-friend-page__inner {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.rb-line-friend-hero {
  width: 100%;
}

.rb-line-friend-hero__title {
  margin: 0 0 20px;
  font-size: 32px;
  line-height: 1.35;
  font-weight: 700;
  text-align: center;
}

.rb-line-friend-hero__card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 32px;
  box-sizing: border-box;
}

.rb-line-friend-hero__lead {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.8;
  color: #222;
}

.rb-line-friend-hero__note {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.8;
  color: #666;
}

.rb-line-friend-hero__error {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff4f4;
  border: 1px solid #f1b7b7;
  color: #b42318;
  font-size: 14px;
  line-height: 1.7;
}

.rb-line-friend-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.rb-line-friend-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  box-sizing: border-box;
  transition: opacity 0.2s ease;
}

.rb-line-friend-hero__btn:hover {
  opacity: 0.9;
}

.rb-line-friend-hero__btn--line {
  background: #06c755;
  color: #fff;
}

.rb-line-friend-hero__btn--skip {
  background: #f3f4f6;
  color: #333;
}

/* スマホ対応 */
@media (max-width: 640px) {
  .rb-line-friend-page {
    padding: 18px 12px 36px;
  }

  .rb-line-friend-hero__title {
    margin-bottom: 16px;
    font-size: 24px;
  }

  .rb-line-friend-hero__card {
    padding: 20px 16px;
    border-radius: 14px;
  }

  .rb-line-friend-hero__lead {
    font-size: 16px;
    line-height: 1.75;
  }

  .rb-line-friend-hero__note {
    font-size: 14px;
    line-height: 1.75;
  }

  .rb-line-friend-hero__actions {
    display: block;
  }

  .rb-line-friend-hero__btn {
    display: flex;
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
  }

  .rb-line-friend-hero__btn+.rb-line-friend-hero__btn {
    margin-top: 10px;
  }
}

/* =========================================================
   Unified ranking page / compact mobile cards
========================================================= */
.ranking-card__description--sp {
  display: none;
}

.rb-ranking-tabs {
  margin-bottom: 18px;
}

.rb-ranking-more-wrap {
  text-align: center;
  margin-top: 18px;
}

@media (max-width: 768px) {
  .ranking-card__description--pc {
    display: none;
  }

  .ranking-card__description--sp {
    display: block;
  }

  .home .ranking-list,
  .ranking-page .ranking-list,
  .rb-ranking-page .ranking-list {
    gap: 14px;
  }

  .home .ranking-card,
  .ranking-page .ranking-card,
  .rb-ranking-page .ranking-card {
    width: 100%;
    padding: 12px 12px 12px 12px;
    min-height: 0;
  }

  .ranking-card__logo,
  .ranking-card__image {
    display: none;
  }

  .home .ranking-card__logo,
  .ranking-page .ranking-card__logo,
  .rb-ranking-page .ranking-card__logo {
    margin: 0 0 6px 0;
  }

  .home .ranking-card__logoImg,
  .ranking-page .ranking-card__logoImg,
  .rb-ranking-page .ranking-card__logoImg {
    max-height: 24px;
    width: auto;
  }

  .home .ranking-card__image,
  .ranking-page .ranking-card__image,
  .rb-ranking-page .ranking-card__image {
    height: 88px;
    margin-bottom: 8px;
  }

  .home .ranking-card__maker,
  .ranking-page .ranking-card__maker,
  .rb-ranking-page .ranking-card__maker {
    font-size: 16px;
    padding-top: 6px;
    text-indent: 3em;
    margin: 0 0 20px 0;
  }

  .home .ranking-card__description,
  .ranking-page .ranking-card__description,
  .rb-ranking-page .ranking-card__description {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 6px;
  }

  .home .ranking-card__meta,
  .ranking-page .ranking-card__meta,
  .rb-ranking-page .ranking-card__meta {
    margin: 8px 0;
    font-size: 13px;
  }

  .home .ranking-card__metaTsubo,
  .ranking-page .ranking-card__metaTsubo,
  .rb-ranking-page .ranking-card__metaTsubo {
    font-size: 16px;
  }

  .home .ranking-card__bottomRow,
  .ranking-page .ranking-card__bottomRow,
  .rb-ranking-page .ranking-card__bottomRow {
    font-size: 12px;
    line-height: 1.5;
  }

  .home .ranking-card__label,
  .ranking-page .ranking-card__label,
  .rb-ranking-page .ranking-card__label {
    margin-right: 4px;
  }

  .home .ranking-card__count,
  .ranking-page .ranking-card__count,
  .rb-ranking-page .ranking-card__count {
    font-size: 11px;
  }

  .home .ranking-card__guid__wrapper,
  .ranking-page .ranking-card__guid__wrapper,
  .rb-ranking-page .ranking-card__guid__wrapper {
    height: 0;
  }

  .home .ranking-card__guid,
  .ranking-page .ranking-card__guid,
  .rb-ranking-page .ranking-card__guid {
    width: 118px;
    padding: 6px 8px;
    font-size: 12px;
    margin: 0 5px 5px auto;
  }

  .home .ranking-card__guid::after,
  .ranking-page .ranking-card__guid::after,
  .rb-ranking-page .ranking-card__guid::after {
    top: 8px;
  }
}

/* top3 marker classes for appended cards */
.ranking-card.ranking-card--top1 .ranking-card__rank,
.ranking-card.ranking-card--top1 .ranking-card__rank::after {
  background: #d4af37;
  border-left-color: #d4af37;
  border-right-color: #d4af37;
  border-top-color: transparent;
  border-bottom-color: #fff;
}

.ranking-card.ranking-card--top2 .ranking-card__rank,
.ranking-card.ranking-card--top2 .ranking-card__rank::after {
  background: #c0c0c0;
  border-left-color: #c0c0c0;
  border-right-color: #c0c0c0;
  border-top-color: transparent;
  border-bottom-color: #fff;
}

.ranking-card.ranking-card--top3 .ranking-card__rank,
.ranking-card.ranking-card--top3 .ranking-card__rank::after {
  background: #b87333;
  border-left-color: #b87333;
  border-right-color: #b87333;
  border-top-color: transparent;
  border-bottom-color: #fff;
}


/* ranking card: star / score alignment fix */
.ranking-card__bottomRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 4px;
  row-gap: 2px;
}

.ranking-card__bottomRow .ranking-card__label,
.ranking-card__bottomRow .ranking-card__stars,
.ranking-card__bottomRow .ranking-card__num,
.ranking-card__bottomRow .ranking-card__count {
  line-height: 1;
  vertical-align: middle;
}

.ranking-card__bottomRow .ranking-card__stars {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.ranking-card__bottomRow .ranking-card__num,
.ranking-card__bottomRow .ranking-card__count {
  display: inline-block;
}

@media (max-width: 768px) {
  .ranking-card__bottomRow {
    column-gap: 3px;
  }
}

/* =========================================================
   メーカーハブ / 写真カード（既存テンプレ補助の最小追記）
========================================================= */
.rb-makerHeader {
  text-align: center;
  margin-bottom: 14px;
}

.rb-makerHeader__logo {
  margin-bottom: 10px;
}

.rb-makerHeader__logo img {
  max-width: 220px;
  height: auto;
}

.rb-makerHeader__desc {
  margin: 10px auto 0;
  max-width: 760px;
  color: #555;
  line-height: 1.8;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 14px 0;
}

.c-review-card {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  overflow: hidden;
}

.c-review-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.c-review-card__thumb {
  aspect-ratio: 4 / 3;
  background: #f6f6f6;
  overflow: hidden;
}

.c-review-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-review-card__content {
  padding: 10px 12px 12px;
}

.c-review-card__title {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.5;
}

.c-review-card__excerpt {
  margin: 0;
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

.review-top--sub {
  font-size: 18px;
  margin-top: 22px;
}

.rb-search-simple {
  margin-top: 18px;
}

@media (max-width: 980px) {
  .review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .rb-makerHeader__logo img {
    max-width: 180px;
  }

  .c-review-card__content {
    padding: 8px 10px 10px;
  }

  .c-review-card__title {
    font-size: 13px;
  }

  .c-review-card__excerpt {
    font-size: 12px;
  }
}


/* 規約同意チェック */
.rb-agree {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.8;
}

.rb-agree__label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.rb-agree__checkbox {
  margin-top: 0.35em;
}

.rb-agree__text a {
  text-decoration: underline;
}

.rb-agree__text {
  flex: 1 1 auto;
  display: block;
}

.home-tatemae__box .rb-agree__text a {
  display: inline;
}

/* review投稿フォームの規約チェックだけ整える */
.rb-agree--review {
  margin: 16px auto 18px;
  max-width: 520px;
}

.rb-agree--review .rb-agree__label {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}

.rb-agree--review .rb-agree__checkbox {
  flex: 0 0 auto;
  margin: 3px 0 0;
}

.rb-agree--review .rb-agree__text {
  display: block;
  line-height: 1.8;
}

.rb-agree--review .rb-agree__text a {
  display: inline;
}

/* =========================================================
 * review_tag hub summary card (0331v1-1)
 * ========================================================= */
.rb-hub-summaryHead {
  text-align: center;
}

.maker-main h2 {
  border-left: 10px solid var(--orange);
  font-size: 24px;
  margin: 30px 0px;
  padding: 15px;
  background: #f2a4002e;
}

.rb-hub-brandTop {
  margin: 0 auto 28px;
}

.rb-hub-brandTop__logoWrap {
  margin-bottom: 20px;
}

.rb-hub-brandTop__logo {
  display: inline-block;
  width: auto;
  max-width: 220px;
  max-height: 96px;
  height: auto;
}

.rb-hub-brandTop__name {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.25;
  color: #5f4a43;
}

.rb-hub-scorecard {
  max-width: 980px;
  margin: 26px auto 0;
  padding: 42px 40px 34px;
  border: 1px solid #cfc5bf;
  border-radius: 18px;
  background: #fff;
  text-align: left;
}

.rb-hub-scorecard__main {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-bottom: 26px;
}

.rb-hub-scorecard__ringCol {
  flex: 0 0 168px;
}

.rb-hub-scoreRing {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto;
}

.rb-hub-scoreRing__svg {
  display: block;
  width: 132px;
  height: 132px;
  transform: rotate(-90deg);
}

.rb-hub-scoreRing__track,
.rb-hub-scoreRing__progress {
  fill: none;
  stroke-width: 12;
}

.rb-hub-scoreRing__track {
  stroke: #f6dfb4;
}

.rb-hub-scoreRing__progress {
  stroke: #f0a000;
  stroke-linecap: round;
}

.rb-hub-scoreRing__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.rb-hub-scoreRing__score {
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  color: #5f4a43;
}

.rb-hub-scoreRing__stars,
.rb-hub-metricRow__stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #f0a000;
}

.rb-hub-scoreRing__stars {
  margin-top: 8px;
  font-size: 12px;
}

.rb-hub-scoreRing__stars .star-rating,
.rb-hub-metricRow__stars .star-rating {
  margin: 0;
}

.rb-hub-scorecard__summaryCol {
  flex: 1 1 auto;
}

.rb-hub-scorecard__headline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  color: #5f4a43;
}

.rb-hub-scorecard__headlineLabel {
  font-size: 32px;
  font-weight: 700;
}

.rb-hub-scorecard__headlineScore {
  font-size: 58px;
  font-weight: 700;
  line-height: 1;
}

.rb-hub-scorecard__headlineSlash {
  font-size: 34px;
  font-weight: 700;
}

.rb-hub-scorecard__headlineCount {
  font-size: 22px;
  font-weight: 700;
}

.rb-hub-scorecard__reviewCountLink {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 0.08em;
}

.rb-hub-scorecard__reviewCountLink:hover {
  color: var(--orange);
}

.rb-hub-scorecard__priceRow {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 12px;
  color: #5f4a43;
}

.rb-hub-scorecard__priceLabel {
  font-size: 22px;
  font-weight: 700;
}

.rb-hub-scorecard__priceValue {
  font-size: 30px;
  font-weight: 700;
  color: #e60012;
}

.rb-hub-metricsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 36px;
}

.rb-hub-metricsGrid__col {
  min-width: 0;
}

.rb-hub-metricRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0 14px;
  border-bottom: 1px dashed #ddd1cc;
}

.rb-hub-metricRow__label {
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 700;
  color: #5f4a43;
}

.rb-hub-metricRow__value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

.rb-hub-metricRow__stars {
  min-width: 92px;
  font-size: 14px;
}

.rb-hub-metricRow__num {
  flex: 0 0 auto;
  min-width: 20px;
  text-align: right;
  font-size: 18px;
  font-weight: 700;
  color: #5f4a43;
}

.rb-hub-stars--empty {
  color: #999;
}

@media screen and (max-width: 1024px) {
  .rb-hub-brandTop__name {
    font-size: 42px;
  }

  .rb-hub-scorecard {
    padding: 30px 24px 26px;
  }

  .rb-hub-scorecard__headlineLabel {
    font-size: 26px;
  }

  .rb-hub-scorecard__headlineScore {
    font-size: 46px;
  }

  .rb-hub-scorecard__headlineCount {
    font-size: 20px;
  }

  .rb-hub-metricsGrid {
    gap: 0 24px;
  }
}

@media screen and (max-width: 767px) {
  .rb-hub-brandTop__logo {
    max-width: 180px;
    max-height: 72px;
  }

  .rb-hub-brandTop__name {
    font-size: 32px;
  }

  .rb-hub-scorecard {
    margin-top: 20px;
    padding: 22px 16px 18px;
    border-radius: 14px;
  }

  .rb-hub-scorecard__main {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin-bottom: 18px;
  }

  .rb-hub-scorecard__ringCol {
    flex-basis: auto;
  }

  .rb-hub-scoreRing {
    width: 120px;
    height: 120px;
  }

  .rb-hub-scoreRing__svg {
    width: 120px;
    height: 120px;
  }

  .rb-hub-scoreRing__score {
    font-size: 30px;
  }

  .rb-hub-scorecard__headline {
    gap: 6px 10px;
  }

  .rb-hub-scorecard__headlineLabel {
    font-size: 22px;
  }

  .rb-hub-scorecard__headlineScore {
    font-size: 38px;
  }

  .rb-hub-scorecard__headlineSlash {
    font-size: 24px;
  }

  .rb-hub-scorecard__headlineCount,
  .rb-hub-scorecard__priceLabel {
    font-size: 18px;
  }

  .rb-hub-scorecard__priceValue {
    font-size: 26px;
  }

  .rb-hub-metricsGrid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .rb-hub-metricRow {
    padding: 13px 0 11px;
  }

  .rb-hub-metricRow__label,
  .rb-hub-metricRow__num {
    font-size: 16px;
  }

  .rb-hub-metricRow__value {
    gap: 10px;
  }

  .rb-hub-metricRow__stars {
    min-width: 84px;
    font-size: 13px;
  }
}

/* =========================================================
   review_tag hub: まとめ（良い点 / 気になる点）
========================================================= */
.rb-hub-points {
  margin: 28px 0;
}

.rb-hub-points__title {
  position: relative;
  margin: 0 0 18px;
  padding-left: 22px;
  font-size: 24px;
  line-height: 1.25;
  color: var(--chocolate);
  font-weight: 700;
}

.rb-hub-points__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 10px;
  height: 1.15em;
  border-radius: 2px;
  background: var(--orange);
}

.rb-hub-points__box {
  background: #fff;
  border: 1px solid #d8d1cb;
  border-radius: 18px;
  padding: 28px 30px;
}

.rb-hub-points__group+.rb-hub-points__group {
  margin-top: 34px;
}

.rb-hub-points__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.rb-hub-points__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  line-height: 1;
  font-weight: 700;
  flex: 0 0 30px;
  box-sizing: border-box;
}

.rb-hub-points__group--good .rb-hub-points__icon {
  color: var(--orange);
  border: 4px solid var(--orange);
}

.rb-hub-points__group--concern .rb-hub-points__icon {
  color: #198be2;
  border: 4px solid #198be2;
}

.rb-hub-points__label {
  margin: 0;
  font-size: 22px;
  line-height: 1.4;
  color: var(--chocolate);
  font-weight: 700;
}

.rb-hub-points__list {
  margin: 0 0 0 92px;
  padding-left: 1.2em;
}

.rb-hub-points__list li {
  margin: 0;
  padding: 0;
  color: #6b5a52;
  font-size: 16px;
  line-height: 2;
}

.rb-hub-points__list li+li {
  margin-top: 6px;
}

@media (max-width: 767px) {
  .rb-hub-points {
    margin: 22px 0;
  }

  .rb-hub-points__title {
    font-size: 24px;
    padding-left: 18px;
  }

  .rb-hub-points__box {
    padding: 20px 18px;
    border-radius: 14px;
  }

  .rb-hub-points__group+.rb-hub-points__group {
    margin-top: 24px;
  }

  .rb-hub-points__head {
    gap: 10px;
    margin-bottom: 10px;
  }


  .rb-hub-points__list {
    margin-left: 18px;
    padding-left: 1.1em;
  }

  .rb-hub-points__list li {
    font-size: 15px;
    line-height: 1.9;
  }
}

/* ========================================
   review_tag hub: compact review cards
======================================== */
.review-comments-wrapper--hubCards {
  max-width: 930px;
}

.rb-hub-reviewList {
  display: grid;
  gap: 24px;
}

.rb-hub-reviewCard {
  position: relative;
  padding: 18px 28px 22px;
  border: 1px solid #b9b1ab;
  border-radius: 10px;
  background: #fff;
}

.rb-hub-reviewCard__main {
  min-width: 0;
  padding-right: 110px;
}

.rb-hub-reviewCard__head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
  margin-bottom: 14px;
}

.rb-hub-reviewCard__avatar {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: block;
}

.rb-hub-reviewCard__avatar--placeholder {
  background: #f2f2f2;
}

.rb-hub-reviewCard__name {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  color: #ef4d2f;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.rb-hub-reviewCard__profile {
  grid-column: 2 / 4;
  grid-row: 2;
  min-width: 0;
  color: #756359;
  font-size: 14px;
  line-height: 1.5;
}

.rb-hub-reviewCard__score {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
  color: #5d4b43;
  font-weight: 700;
}

.rb-hub-reviewCard__scoreLabel {
  font-size: 18px;
}

.rb-hub-reviewCard__scoreStars .p-star-review,
.rb-hub-reviewCard__scoreStars {
  display: inline-flex;
  align-items: center;
}

.rb-hub-reviewCard__scoreNum {
  font-size: 21px;
}

.rb-hub-reviewCard__title {
  margin: 0 0 10px;
  color: #5d4b43;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
}

.rb-hub-reviewCard__excerpt {
  color: #6f655e;
  font-size: 14px;
  line-height: 1.9;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rb-hub-reviewCard__foot {
  position: absolute;
  right: 28px;
  bottom: 22px;
}

.rb-hub-reviewCard__more {
  display: inline-block;
  color: #d98c00;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

.rb-hub-reviewCard__more:hover {
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .review-comments-wrapper--hubCards {
    max-width: none;
  }

  .rb-hub-reviewList {
    gap: 16px;
  }

  .rb-hub-reviewCard {
    padding: 14px 14px 18px;
    border-radius: 8px;
  }

  .rb-hub-reviewCard__main {
    padding-right: 0;
    padding-bottom: 20px;
  }

  .rb-hub-reviewCard__head {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 2px;
    margin-bottom: 10px;
  }

  .rb-hub-reviewCard__avatar {
    width: 42px;
    height: 42px;
  }

  .rb-hub-reviewCard__name {
    font-size: 18px;
  }

  .rb-hub-reviewCard__profile {
    font-size: 11px;
    line-height: 1.45;
  }

  .rb-hub-reviewCard__score {
    gap: 6px;
    align-self: start;
  }

  .rb-hub-reviewCard__scoreLabel {
    font-size: 13px;
  }

  .rb-hub-reviewCard__scoreNum {
    font-size: 18px;
  }

  .rb-hub-reviewCard__title {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.5;
  }

  .rb-hub-reviewCard__excerpt {
    font-size: 12px;
    line-height: 1.75;
    -webkit-line-clamp: 3;
  }

  .rb-hub-reviewCard__foot {
    right: 14px;
    bottom: 14px;
  }

  .rb-hub-reviewCard__more {
    font-size: 11px;
  }
}


/* ========================================
   review_tag hub: kuchikomi cards like home tatemae
======================================== */
.review-comments-wrapper--hubKuchikomi {
  max-width: 100%;
  margin-top: 0;
  padding: 28px 28px 24px;
  background: rgb(255 245 226);
  border: 1px solid rgb(231 216 188 / 92%);
  border-radius: 13px;
}

.review-top--hubKuchikomi {
  margin: 0 0 20px;
}

.review-comments-wrapper--hubKuchikomi .home-tatemae__box {
  margin-top: 0;
  background: transparent;
  padding: 0;
  border: 0;
}

.review-comments-wrapper--hubKuchikomi .p-single--review-writeBtnWrap {
  margin-top: 20px;
}

.rb-hub-kuchikomiBox {
  max-width: 100%;
}

.rb-hub-kuchikomiList {
  margin-top: 0 !important;
}

.rb-hub-kuchikomiList li {
  padding-right: 56px;
}

.rb-hub-kuchikomiLink {
  text-decoration: none;
}

.rb-hub-kuchikomiLink:hover li {
  opacity: .96;
}

@media screen and (max-width: 767px) {
  .review-comments-wrapper--hubKuchikomi {
    padding: 18px 14px 16px;
  }

  .review-top--hubKuchikomi {
    margin-bottom: 14px;
  }

  .review-comments-wrapper--hubKuchikomi .home-tatemae__box {
    padding: 0;
  }

  .rb-hub-kuchikomiList li {
    padding: 16px 40px 16px 14px;
  }

  .rb-hub-kuchikomiList .tatemae-a__meta {
    row-gap: 4px;
  }
}


/* ========================================
   review_tag hub: photo slider
======================================== */
.review-comments-wrapper--hubPhoto {
  max-width: 100%;
  margin-top: 0;
}

.review-top--hubPhoto {
  margin: 0 0 18px;
}

.rb-hub-photoSliderWrap {
  padding: 0 18px;
}

.rb-hub-photoSlider {
  margin: 0 -8px;
}

.rb-hub-photoSlide {
  padding: 0 8px 8px;
}

.rb-hub-photoCard {
  display: block;
  background: #fff;
  border: 1px solid #ddd6cf;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
  text-decoration: none;
  color: inherit;
}

.rb-hub-photoCard__thumb {
  aspect-ratio: 4 / 4.5;
  overflow: hidden;
  background: #f7f4ef;
}

.rb-hub-photoCard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rb-hub-photoCard__body {
  padding: 10px 10px 12px;
  text-align: center;
}

.rb-hub-photoCard__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.rb-hub-photoCard__meta {
  margin-top: 4px;
  color: #4e4037;
  font-size: 14px;
  line-height: 1.5;
}

.review-comments-wrapper--hubPhoto .slick-prev,
.review-comments-wrapper--hubPhoto .slick-next {
  width: 44px;
  height: 44px;
  z-index: 5;
}

.review-comments-wrapper--hubPhoto .slick-prev {
  left: -8px;
}

.review-comments-wrapper--hubPhoto .slick-next {
  right: -8px;
}

.review-comments-wrapper--hubPhoto .slick-prev:before,
.review-comments-wrapper--hubPhoto .slick-next:before {
  color: #2e241e;
  font-size: 38px;
  opacity: .9;
}

.review-comments-wrapper--hubPhoto .slick-dots {}

.review-comments-wrapper--hubPhoto .slick-dots li button:before {
  font-size: 12px;
  color: #b9b0a6;
  opacity: 1;
}

.review-comments-wrapper--hubPhoto .slick-dots li.slick-active button:before {
  color: #e39a32;
}

.review-comments-wrapper--hubPhoto .p-single--review-writeBtnWrap {
  margin-top: 26px;
}

@media screen and (max-width: 767px) {
  .review-comments-wrapper--hubPhoto {
    padding: 18px 14px 20px;
    border-radius: 14px;
  }

  .review-top--hubPhoto {
    margin-bottom: 14px;
  }

  .rb-hub-photoSliderWrap {
    padding: 0 10px;
  }

  .rb-hub-photoSlide {
    padding: 0 6px 8px;
  }

  .rb-hub-photoCard__title {
    font-size: 16px;
  }

  .rb-hub-photoCard__meta {
    font-size: 12px;
  }

  .review-comments-wrapper--hubPhoto .slick-prev,
  .review-comments-wrapper--hubPhoto .slick-next {
    width: 34px;
    height: 34px;
  }

  .review-comments-wrapper--hubPhoto .slick-prev:before,
  .review-comments-wrapper--hubPhoto .slick-next:before {
    font-size: 28px;
  }
}


.review-comments-wrapper--hubVideo {}

.rb-hub-videoList {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rb-hub-videoEmbed {
  position: relative;
  width: 100%;
}

.rb-hub-videoEmbed iframe,
.rb-hub-videoEmbed embed,
.rb-hub-videoEmbed object {
  display: block;
  width: 100%;
  min-height: 360px;
}

.rb-hub-videoActions {
  margin: 10px 0 0;
  font-size: 13px;
}

.rb-hub-videoActions a {
  color: #8a5a2b;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .review-comments-wrapper--hubVideo {
    padding: 16px;
  }

  .rb-hub-videoEmbed iframe,
  .rb-hub-videoEmbed embed,
  .rb-hub-videoEmbed object {
    min-height: 220px;
  }
}

/*メーカーハブページの動画のところ*/

.rb-hub-videoList {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.rb-hub-videoItem {
  background: #fff;
}

.rb-hub-videoEmbed iframe {
  width: 100%;
  height: 260px;
}

@media (max-width: 768px) {
  .rb-hub-videoList {
    grid-template-columns: 1fr;
  }

  .rb-hub-videoEmbed iframe {
    height: 220px;
  }
}

/* Hub article */

.rb-hub-article p {
  margin: 18px 0;
}


.rb-hub-article h3 {
  margin: 10px 0;
  font-size: 22px;
  border-left: 5px solid var(--orange);
  padding: 10px 0 10px 14px;
}

.rb-hub-article h4 {
  border-bottom: 1px solid var(--orange);
  padding: 7px;
  font-size: 18px;
}

.rb-hub-article__body {
  margin-top: 12px;
}

.rb-hub-article__preview {
  position: relative;
}

.rb-hub-article__lead {
  position: relative;
}

.rb-hub-article__lead.has-more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 176px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .82) 60%, #fff 100%);
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 1;
}

.rb-hub-article__preview:has(.rb-hub-article__more--top[open]) .rb-hub-article__lead.has-more::after {
  opacity: 0;
  visibility: hidden;
}

.rb-hub-article__more {
  display: block;
  position: relative;
}

.rb-hub-article__more--top:not([open]) {
  margin-top: -26px;
  z-index: 3;
}

.rb-hub-article__preview:has(.rb-hub-article__more--top[open]) .rb-hub-article__more--top {
  margin-top: 0;
}

.rb-hub-article__more--top[open] {
  z-index: 3;
}

.rb-hub-article__more--nested {
  margin-top: 18px;
  z-index: 1;
}

.rb-hub-article__toggle,
.rb-hub-article__more summary {
  list-style: none;
  cursor: pointer;
  width: min(220px, calc(100% - 24px));
  min-height: 46px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--orange);
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
  border-radius: 6px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.24);
  text-decoration: none;
  box-sizing: border-box;
}

.rb-hub-article__more summary::-webkit-details-marker {
  display: none;
}

.rb-hub-article__more summary::marker {
  content: "";
  font-size: 0;
}

.rb-hub-article__toggleIcon {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #fff;
  display: inline-block;
  transform: translateY(1px);
}

.rb-hub-article__toggleText {
  display: inline-block;
}

.rb-hub-article__more[open]>summary {
  display: none;
}

.rb-hub-article__moreBody {
  margin-top: 0;
  clear: both;
}

.rb-hub-article__more--top[open]>.rb-hub-article__moreBody {
  margin-top: 8px;
}

@media (max-width: 767px) {
  .rb-hub-article__lead.has-more::after {
    height: 132px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .88) 66%, #fff 100%);
  }

  .rb-hub-article__more--top:not([open]) {
    margin-top: -20px;
  }

  .rb-hub-article__toggle,
  .rb-hub-article__more summary {
    width: calc(100% - 32px);
    min-height: 44px;
    font-size: 15px;
    border-radius: 5px;
    padding: 0 14px;
  }

  .rb-hub-article__more--nested {
    margin-top: 14px;
  }
}


/* ===== Spec preview fade / readmore ===== */
.p-reviewSpec__preview {
  position: relative;
}

.p-reviewSpec__lead {
  position: relative;
}

.p-reviewSpec__lead.has-more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 170px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .82) 60%, #fff 100%);
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 1;
}

.p-reviewSpec__preview:has(.p-reviewSpec__more--top[open]) .p-reviewSpec__lead.has-more::after {
  opacity: 0;
  visibility: hidden;
}

.p-reviewSpec__more {
  display: block;
  position: relative;
}

.p-reviewSpec__more--top:not([open]) {
  margin-top: -26px;
  z-index: 3;
}

.p-reviewSpec__preview:has(.p-reviewSpec__more--top[open]) .p-reviewSpec__more--top {
  margin-top: 0;
}

.p-reviewSpec__more--top[open] {
  z-index: 3;
}

.p-reviewSpec__toggle,
.p-reviewSpec__more summary {
  list-style: none;
  cursor: pointer;
  width: min(240px, calc(100% - 24px));
  min-height: 46px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
  border-radius: 6px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
  text-decoration: none;
}

.p-reviewSpec__more summary::-webkit-details-marker {
  display: none;
}

.p-reviewSpec__more summary::marker {
  content: "";
  font-size: 0;
}

.p-reviewSpec__more[open]>summary {
  display: none;
}

.p-reviewSpec__moreBody {
  margin-top: 0;
  clear: both;
}

@media (max-width: 767px) {
  .p-reviewSpec__lead.has-more::after {
    height: 100px;
  }

  .p-reviewSpec__more--top:not([open]) {
    margin-top: -18px;
  }

  .p-reviewSpec__toggle,
  .p-reviewSpec__more summary {
    width: calc(100% - 24px);
    max-width: 320px;
  }
}

.js-rb-heic-note p{
  text-align: left;
}