@charset "UTF-8";
/* --- 全体の基本設定 --- */
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  background-color: #fff;
}

/* --- 価格.com グローバルヘッダー --- */
.gbHeader {
  position: relative;
  height: 45px;
  margin-top: 2px;
  padding: 3px 5px 5px 5px;
  border-bottom: 4px solid #405086;
  background-color: #fff;
  z-index: 1;
}
.gbHeader .kakakuHdrWrp {
  position: relative;
  height: 100%;
}
.gbHeader .logo {
  position: absolute;
  top: 5px;
  left: 0px;
}
.gbHeader .logo > a {
  display: block;
  width: 121px;
}
.gbHeader .logo img {
  display: block;
}

/* --- メインビジュアル --- */
.main-visual {
  max-width: 900px;
  margin: 0 auto;
  border-left: 1px solid #5C5C5C;
  border-right: 1px solid #5C5C5C;
  background: #fff;
  line-height: 0;
  font-size: 0;
  position: relative;
}
.main-anim-container {
  position: relative;
  width: 100%;
  aspect-ratio: 400 / 200;
  overflow: visible;
}
.main-anim-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* layer1: 最初から表示 → 4秒後にフェイドアウト */
.main-anim-layer1 {
  opacity: 1;
  animation: fadeOut 0.6s 4s forwards;
}
/* layer2: 2秒後にフェイドイン → 4秒後にフェイドアウト */
.main-anim-layer2 {
  opacity: 0;
  animation: fadeIn 0.6s 2s forwards, fadeOut 0.6s 4s forwards;
}
/* layer3: 3秒後にフェイドイン（以降表示し続ける） */
.main-anim-layer3 {
  opacity: 0;
  animation: fadeIn 0.6s 3s forwards;
}
/* layer4: 7秒後にフェイドイン */
.main-anim-layer4 {
  opacity: 0;
  animation: fadeIn 0.6s 7s forwards;
}
/* layer5: 8秒後にフェイドイン */
.main-anim-layer5 {
  opacity: 0;
  animation: fadeIn 0.6s 8s forwards;
}

/* --- kakagoodとは？トグル --- */
.about-kakagood-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 4px;
  margin-top: -2px;
}
.about-kakagood-toggle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 22px 0 18px;
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
  color: #0066cc;
  cursor: pointer;
  text-decoration: underline;
  background: transparent;
}
.about-kakagood-toggle:hover {
  color: #004499;
}
.about-kakagood-toggle.open {
  color: #004499;
}
.about-kakagood-content {
  max-width: 900px;
  margin: 0 auto;
  border-left: 1px solid #5C5C5C;
  border-right: 1px solid #5C5C5C;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
@media (min-width: 768px) {
  .about-kakagood-content {
    border-left: 10px solid #ededed;
    border-right: 10px solid #ededed;
  }
}
.about-kakagood-content.open {
  max-height: 5000px;
  transition: max-height 0.6s ease;
}
.about-kakagood-content p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}
.about-section {
  padding: 16px 20px 6px;
}
.about-heading-star {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #333;
}
.about-good-copy {
  font-size: 16px !important;
  font-weight: bold;
  color: #333 !important;
  line-height: 1.8;
}
.about-note {
  font-size: 13px !important;
  color: #333 !important;
  margin-bottom: 14px !important;
}
.about-category {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #f8f8f8;
  border-radius: 6px;
}
.about-category > p {
  margin: 0;
}
.about-heading-cat {
  font-size: 17px;
  font-weight: bold;
  color: #333;
  margin: 0 0 8px;
  padding-left: 10px;
  border-left: 4px solid #333;
}
.about-sub {
  margin-bottom: 8px;
  padding-left: 14px;
}
.about-sub:last-child {
  margin-bottom: 0;
}
.about-heading-sub {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin: 0 0 4px;
}
.about-heading-sub::before {
  content: "●";
  font-size: 8px;
  color: #333;
  margin-right: 4px;
  vertical-align: middle;
}

/* =========================================
   ナビメニュー（ページ内リンク）
   ========================================= */
.nav-menu {
  background-color: #fff;
  padding: 0 10px 12px;
  overflow: hidden;
}
.nav-menu .section-h2 {
  margin: 0 -10px 10px;
}
.nav-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
@media (min-width: 768px) {
  .main-visual {
    border-left: 10px solid #ededed;
    border-right: 10px solid #ededed;
  }
  .nav-menu-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .nav-menu-label {
    font-size: 24px;
  }
}
.nav-menu-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 12px 8px 40px;
  min-width: 0;
  min-height: 80px;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  transition: background-color 0.2s;
  border: 1px solid #bbb;
  overflow: hidden;
  position: relative;
}
.nav-menu-item::before {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  left: -47px;
  top: 0;
  background-image: url(https://img1.kakaku.k-img.com/images/kakagood/orange_circle.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 0;
}
.nav-menu-item:nth-child(even)::before {
  background-image: url(https://img1.kakaku.k-img.com/images/kakagood/blue_circle.svg);
}
.nav-menu-item:hover {
  background-color: #f5f5f5;
}
.nav-menu-label {
  font-size: clamp(15px, 5vw, 20px);
  font-weight: normal;
  line-height: 1.3;
  word-break: break-all;
  position: relative;
  z-index: 1;
  margin-left: -10px;
  margin-top: -6px;
  min-height: 57px;
}
.nav-menu-count {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px;
  position: relative;
  z-index: 1;
  margin-top: -30px;
}
.nav-menu-count-label {
  font-size: 18px;
  line-height: 1;
  color: #666;
  margin-right: 2px;
}
.nav-menu-num {
  font-size: 3em;
  font-weight: bold;
  color: #e60012;
  line-height: 1;
}
.nav-menu-count-unit {
  font-size: 12px;
  color: #666;
}
* {
  box-sizing: border-box;
}

/* =========================================
   全体レイアウト制御（PCの間延び防止）
   ========================================= */
.main-container {
  max-width: 900px;
  margin: 0 auto;    
  background-color: #fff;
  border-left: 1px solid #5C5C5C;
  border-right: 1px solid #5C5C5C;
  padding-bottom: 100px;
}

/* h3セクションの横並びグループ（PCのみ） */
.h3-group {
  display: flex;
  flex-direction: column;
}
.h3-section {
  flex: 1;
  min-width: 0;
}
@media (min-width: 768px) {
  .main-container {
    border-left: 10px solid #ededed;
    border-right: 10px solid #ededed;
  }
  .h3-group {
    flex-direction: row;
    gap: 10px;
  }
  .h3-section {
    display: flex;
    flex-direction: column;
  }
  .h3-section .carousel-container {
    flex: 1;
  }
}

/* =========================================
   上部コンテンツのデザイン
   ========================================= */
.section-h2 {
  background-color: #ededed; 
  border-top: 0;
  border-bottom: 0;
  border-left: none;
  border-right: none;
  font-size: 20px;
  font-weight: bold;
  padding: 12px 10px;
  margin: 25px 0 20px; 
  color: #000;
}

.section-h3 {
  font-size: 24px;
  font-weight: bold;
  margin: 0 10px 15px;
  color: #000;
  border-bottom: 1px solid #5C5C5C;
  padding: 8px 10px;
}

.recommend-point {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 10px 10px; 
}

.recommend-icon {
  width: 75px;
  height: 75px;
  border: 20px solid #FF5B00; 
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 26px;
  color: #051D93;
  flex-shrink: 0;
  box-sizing: border-box;
  padding-bottom: 3px;
  text-shadow: 
    1px 1px 0 #ffffff,
    -1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px -1px 0 #ffffff,
    0px 0px 5px #ffffff;
}

.recommend-text {
  font-size: 20px;
  line-height: 1.4;
  color: #000;
  font-weight: normal;
}

.highlight {
  /* 下から40%の高さだけに黄色を敷いて、太めの下線を表現 */
  background: linear-gradient(to bottom, transparent 40%, #fffd33 60%);
}

/* --- カルーセルの設定 --- */
.carousel-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory; 
  -webkit-overflow-scrolling: touch; 
  scrollbar-width: none; 
  padding: 10px 10px 15px; 
  gap: 5px; 
  scroll-padding: 0 10px; 
}

/* 1枚のみの時：左右の余白を揃えて中央表示、スライド幅を広げて余白を抑える */
.carousel-container:has(.carousel-slide:only-child) {
  justify-content: center;
}
.carousel-container:has(.carousel-slide:only-child) .carousel-slide {
  max-width: 500px;
  flex: 0 0 min(calc(100vw - 20px), 500px);
}
@media (min-width: 768px) {
  .carousel-container:has(.carousel-slide:only-child) .carousel-slide {
    max-width: 400px;
    flex: 0 0 400px;
  }
}

/* h3-group 内のカルーセル1枚時はセクション幅いっぱいに */
.h3-section .carousel-container:has(.carousel-slide:only-child) .carousel-slide {
  max-width: 100%;
  flex: 0 0 100%;
}

.carousel-container::-webkit-scrollbar {
  display: none; 
}

.carousel-slide {
  flex: 0 0 calc(100vw - 60px);
  max-width: 440px;
  scroll-snap-align: start; 
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .carousel-slide {
    max-width: calc(50% - 5px);
  }
}

/* カード高さをスライドに揃え、レビューを底に配置 */
.carousel-slide > .product-card,
.carousel-slide > .provider-card {
  flex: 1;
}
.product-card .review-section,
.provider-card .review-section {
  margin-top: auto;
}

/* --- 商品カードのデザイン全体 --- */
.product-card {
  background: #ffffff;
  border: 1px solid #ccc; 
  border-radius: 12px; 
  padding: 8px;
  text-align: left; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  width: 100%; 
  position: relative; 
  overflow: hidden; 
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card-link-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 100px;  /* レビューエリアは除外してクリックで全文表示可能に */
  z-index: 5; 
  border-radius: 12px;
}

/* --- PCホバーエフェクト --- */
@media (hover: hover) and (pointer: fine) {
  .product-card:hover {
    transform: translateY(-4px); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); 
  }
  .product-card:hover .product-image {
    transform: scale(1.05); 
  }
  .product-card:hover .product-title-text {
    text-decoration: underline; 
  }
}

/* =========================================
   リボンのデザイン
   ========================================= */
.ribbon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
}

.ribbon-content {
  background: #007bd9; 
  color: #fff;
  font-weight: bold;
  font-size: 22px; 
  padding: 6px 18px 6px 12px; 
  position: relative;
  -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}

.ribbon-red .ribbon-content {
  background: #ff0000; 
}

/* --- 上段：画像とスペック --- */
.card-top-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  margin-top: 32px; 
}

.product-image-area {
  flex: 0 0 48%; 
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; 
  border-radius: 4px; 
}

.product-image {
  width: 100%;
  aspect-ratio: 160 / 120;
  object-fit: contain; 
  background: transparent; 
  transition: transform 0.4s ease; 
}

.product-specs {
  flex: 1; 
  display: flex;
  flex-direction: column;
  font-size: 11px;
  border-radius: 6px;
  overflow: hidden;
  min-width: 0; 
}
.bg-blue { background-color: #a3d1f0; }
.bg-pink { background-color: #f2a0c0; }
.bg-orange { background-color: #f5c483; }
.bg-green { background-color: #b8e09e; }
.bg-purple { background-color: #c4b3da; }

.spec-row {
  display: flex;
  border-bottom: none;
  color: #000;
  align-items: baseline;
}
.spec-row:first-child {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.spec-row:last-child {
  border-bottom: none;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.spec-label {
  padding: 5px 4px 5px 6px; 
  width: 74px; 
  flex-shrink: 0; 
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: normal;
  font-size: 11px;
  white-space: nowrap;
}
.spec-value {
  padding: 5px 6px 5px 4px;
  flex-grow: 1; 
  display: block; 
  text-align: right; 
  font-weight: normal;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}
.spec-value-num {
  font-size: 2.0em; 
  margin-right: 1px; 
}

/* デスクトップセクション：スペック値を小さめにして自然改行 */
.section-desktop .spec-value {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}
.section-desktop .spec-value-num {
  font-size: 1.3em;
}

/* --- 下段：価格、タグ、タイトル --- */
.card-bottom-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 4px; 
}

.price-info {
  display: flex;
  flex-direction: column; 
  gap: 2px; 
}
.price-label {
  font-size: 14px; 
  color: #e60012;
}
.price-value-wrapper {
  display: flex;
  align-items: baseline; 
}
.price-value {
  font-size: 60px; 
  font-weight: bold;
  color: #e60012;
  line-height: 1;
  letter-spacing: -4px; 
}
.price-yen {
  font-size: 20px; 
  color: #e60012;
  font-weight: bold;
  margin-left: 6px; 
}

.tags-area {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tag {
  font-size: 13px; 
  color: #d44242;
  padding: 4px 8px; 
  border-radius: 4px;
  font-weight: normal;
  background-color: #fff;
  border: 1px solid #d54545;
}

.product-title-text {
  font-size: 18px;
  font-weight: bold;
  color: #003399;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0; 
}

/* =========================================
   バリエーション一括管理レビュー（右→左ティッカー用）
   ========================================= */
.review-section {
  margin-top: 12px; 
  margin-bottom: 6px; 
  position: relative; 
  z-index: 10;
}

.review-section::before {
  display: block;
  font-size: 13px;
  font-weight: bold;
  color: #000;
  margin-bottom: 8px; 
  padding-left: 2px;
}

.review-spacer {
  height: 40px; 
  width: 100%;
}

.review-overlay {
  position: absolute;
  bottom: 0; 
  left: 0;
  right: 0;
  z-index: 20; 
  display: flex;
  flex-direction: column;
  cursor: pointer;
  pointer-events: auto;  /* クリックで全文表示を確実に受け取る */
}

.review-overlay.is-expanded {
  z-index: 30; 
}

.review-body {
  display: flex;
  border: 1px solid #ccc;
  background: #ffffff; 
  align-items: stretch; 
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
  width: 100%;
}

.review-overlay.is-expanded .review-body {
  box-shadow: 0 -4px 15px rgba(0,0,0,0.15), 0 4px 15px rgba(0,0,0,0.15);
}

.review-icon-wrap {
  width: 40px;
  height: 40px; 
  flex-shrink: 0;
  border: none; 
  padding: 0; 
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; 
}

/* 右→左流れティッカー用スタイル */
.ticker-wrapper {
  flex: 1;
  overflow: hidden; 
  height: 40px; 
  position: relative; 
  background: #fff;
  min-width: 0; 
  display: flex;
  align-items: center;
}
.ticker-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  will-change: transform;
}
.ticker-text {
  flex-shrink: 0;
  line-height: 40px; 
  padding: 0 1.5em;
  font-size: 14px; 
  color: #333;
  white-space: nowrap;
}

.review-expand-btn {
  width: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: none; 
  background: #fff;
}
.expand-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.review-overlay.is-expanded .review-body {
  align-items: flex-start; 
}
.review-overlay.is-expanded .ticker-wrapper {
  height: auto; 
  max-height: 160px;
  padding: 0 4px; 
  align-items: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
}
.review-overlay.is-expanded .ticker-track {
  flex-wrap: wrap;
  padding: 5px 0;
  width: 100%;           /* 幅を制限して折り返し可能に */
  height: auto;          /* 固定40pxを解除して折り返しテキスト分だけ高さを確保 */
  min-height: auto;
  transform: none !important;
}
.review-overlay.is-expanded .ticker-text {
  line-height: 1.5; 
  padding-top: 7px;
  padding-bottom: 7px;
  white-space: normal;
  overflow-wrap: break-word;
  flex: 1 1 100%;       /* 1行で幅いっぱいに */
  min-width: 0;         /* 折り返しのため縮小を許可 */
  max-width: 100%;
}
.review-overlay.is-expanded .ticker-text:last-child {
  display: none !important; 
}
.review-overlay.is-expanded .review-expand-btn {
  height: 40px; 
}

/* --- バリエーション定義 --- */
.review-section[data-review-type="user-female1"]::before { content: "ユーザーレビュー コメントまとめ"; }
.review-section[data-review-type="user-female1"] .review-icon-wrap { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/sister2.gif'); }

.review-section[data-review-type="user-female2"]::before { content: "ユーザーレビュー コメントまとめ"; }
.review-section[data-review-type="user-female2"] .review-icon-wrap { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/mam32.gif'); }

.review-section[data-review-type="user-female3"]::before { content: "ユーザーレビュー コメントまとめ"; }
.review-section[data-review-type="user-female3"] .review-icon-wrap { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/mam41.gif'); }

.review-section[data-review-type="user-female4"]::before { content: "ユーザーレビュー コメントまとめ"; }
.review-section[data-review-type="user-female4"] .review-icon-wrap { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/mam55.gif'); }

.review-section[data-review-type="user-male1"]::before { content: "ユーザーレビュー コメントまとめ"; }
.review-section[data-review-type="user-male1"] .review-icon-wrap { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/boy1.gif'); }

.review-section[data-review-type="user-male2"]::before { content: "ユーザーレビュー コメントまとめ"; }
.review-section[data-review-type="user-male2"] .review-icon-wrap { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/brother2.gif'); }

.review-section[data-review-type="user-male3"]::before { content: "ユーザーレビュー コメントまとめ"; }
.review-section[data-review-type="user-male3"] .review-icon-wrap { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/dad11.gif'); }

.review-section[data-review-type="user-male4"]::before { content: "ユーザーレビュー コメントまとめ"; }
.review-section[data-review-type="user-male4"] .review-icon-wrap { background-image: url('https://img1.kakaku.k-img.com/jpeg_gif/bbs/granpapa51.gif'); }

.review-section[data-review-type="editor1"]::before { content: "価格.com編集長 コメント"; }
.review-section[data-review-type="editor1"] .review-icon-wrap { background-image: url('https://img1.kakaku.k-img.com/images/kakagood/icon_editor.png'); }

.review-section[data-review-type="editor2"]::before { content: "価格.comマガジン編集部 コメント"; }
.review-section[data-review-type="editor2"] .review-icon-wrap { background-image: url('https://img1.kakaku.k-img.com/images/maga/writer/icon_52.jpg'); }

.review-section[data-review-type="editor3"]::before { content: "クレカ専門家菊地崇仁さん コメント"; }
.review-section[data-review-type="editor3"] .review-icon-wrap { background-image: url('https://img1.kakaku.k-img.com/images/card/ranking/photo_kikuchitakahito.png'); }

.review-section[data-review-type="insurance-consultant1"]::before { content: "価格.com保険 CFP／1級FP技能士 山田 卓弥さん コメント"; }
.review-section[data-review-type="insurance-consultant1"] .review-icon-wrap { background-image: url('https://img1.kakaku.k-img.com/images/insurance/award/consul/award_consul_21.jpg'); }

/* =========================================
   下部コンテンツエリア（ボタン等）
   ========================================= */
.bottom-section {
  padding: 0 10px 20px;
}

/* カルーセル1つのとき：bottom-sectionをカルーセル開始位置に合わせて中央寄せ */
.carousel-container:has(.carousel-slide:only-child) + .bottom-section {
  max-width: min(calc(100vw - 20px), 500px);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .carousel-container:has(.carousel-slide:only-child) + .bottom-section {
    max-width: 420px;
  }
}
/* h3-group 内では幅制限・中央寄せを解除 */
.h3-section .carousel-container:has(.carousel-slide:only-child) + .bottom-section {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.update-time {
  font-size: 14px;
  color: #333;
  margin-bottom: 18px;
}

.attention-catch {
  font-size: 16px;
  font-weight: bold;
  color: #e60012;
  text-align: center;
  margin-bottom: 8px;
}

.bottom-tags {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.bottom-tag {
  font-size: 13px;
  color: #d44242;
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: normal;
  background-color: #fff;
  border: 1px solid #d54545;
}

/* 価格.com c-benefit_ttl 参考：https://kakaku.com/bb/ranking/?bb_houseType=1 */
.c-benefit_ttl {
  box-sizing: border-box;
  background-color: #f17764;
  color: #fff;
  display: inline-block; /* bottom-tags内ではtable-cellの代わりにinline-block */
  font-size: 13px;
  font-weight: bold;
  line-height: 1;
  position: relative;
  padding: 6px 10px 5px 9px;
  text-align: center;
  vertical-align: middle;
  width: fit-content;  /* テキスト幅に連動 */
  white-space: nowrap;
  transform: rotate(0.01deg);
  clip-path: polygon(0% 0%, 100% 0%, calc(100% - 4px) 50%, 100% 100%, 0 100%);
  box-shadow: none;  /* bottom-tagのシャドウを上書き */
  border-radius: 0;  /* clip-path使用のため不要 */
}

.bottom-banner {
  text-align: center;
  margin-bottom: 10px;
}
.bottom-banner-img {
  max-width: 200px;
  height: auto;
}

.bottom-desc {
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  color: #000;
  margin-bottom: 10px;
}

.bottom-note {
  font-size: 10px;
  color: #999;
  line-height: 1.5;
  margin-top: 10px;
  text-align: center;
}

.more-btn {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  background-color: #dbeff3;
  border: 1px solid #77969f;
  color: #000;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
  transition: background-color 0.2s;
}

.more-btn:hover {
  background-color: #c9e4ea;
}