/**
 * blocks.css — 装飾ブロック構造CSS
 * seo-pipeのdeco-*をblock-*に変換したCMS独自ブロック
 * 7色パレット（colors.css）を参照
 */

/* ========================================
   ボックス共通（.block-box / A-default Pattern B: 左ボーダーアクセント）
   ======================================== */
.block-box {
  margin: 28px 0;
  padding: 24px 0 24px 22px;
  border: none;
  border-left: 3px solid var(--c-text);
  border-radius: 0;
  overflow: visible;
  background: transparent;
  font-size: 15px;
  line-height: 1.95;
  color: var(--c-text);
  /* 子要素が幅を持つ要素（pre/img/table 等）でも親のコンテナを越えない */
  max-width: 100%;
  min-width: 0;
}

.block-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin-bottom: 18px;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  color: var(--c-text);
  background: transparent;
}

.block-box-title::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.block-box-content {
  padding: 0;
  font-size: 15px;
  line-height: 1.95;
  color: var(--c-text);
}

.block-box-content p {
  margin: 14px 0;
}

.block-box-content p:first-of-type {
  margin-top: 0;
}

.block-box-content p:last-child {
  margin-bottom: 0;
}

.block-box-content p + p {
  margin-top: 14px;
}

.block-box-content ul {
  margin: 8px 0 0 18px;
  list-style: disc;
}

.block-box-content li {
  margin: 6px 0;
  font-size: 14.5px;
}

.block-box > ul {
  padding: 0;
  margin: 0 0 0 22px;
  list-style: disc;
}

.block-box > ul > li {
  margin: 6px 0;
  font-size: 14.5px;
}

/* --- ポイントボックス --- */
.block-point {
  border-left-color: var(--c-accent);
  background: var(--c-accent-faint);
  padding-right: 22px;
}

.block-point .block-box-title {
  background: transparent;
  color: var(--c-text);
}

.block-point .block-box-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cline x1='88' y1='232' x2='168' y2='232' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cpath d='M78.7,167A79.87,79.87,0,0,1,48,104.45C47.76,61.09,82.72,25,126.07,24a80,80,0,0,1,51.34,142.9A24.3,24.3,0,0,0,168,186v2a8,8,0,0,1-8,8H96a8,8,0,0,1-8-8v-2A24.11,24.11,0,0,0,78.7,167Z' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cpath d='M140,70a36.39,36.39,0,0,1,24,30' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cline x1='88' y1='232' x2='168' y2='232' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cpath d='M78.7,167A79.87,79.87,0,0,1,48,104.45C47.76,61.09,82.72,25,126.07,24a80,80,0,0,1,51.34,142.9A24.3,24.3,0,0,0,168,186v2a8,8,0,0,1-8,8H96a8,8,0,0,1-8-8v-2A24.11,24.11,0,0,0,78.7,167Z' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cpath d='M140,70a36.39,36.39,0,0,1,24,30' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3C/svg%3E");
}

/* --- 注意ボックス --- */
.block-warning {
  border-left-color: #C9803B;
  background: var(--c-warning-bg);
  padding-right: 22px;
}

.block-warning .block-box-title {
  background: transparent;
  color: #9A5C24;
}

.block-warning .block-box-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M142.41,40.22l87.46,151.87C236,202.79,228.08,216,215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22C119.89,29.26,136.11,29.26,142.41,40.22Z' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cline x1='128' y1='136' x2='128' y2='104' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Ccircle cx='128' cy='176' r='16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M142.41,40.22l87.46,151.87C236,202.79,228.08,216,215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22C119.89,29.26,136.11,29.26,142.41,40.22Z' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cline x1='128' y1='136' x2='128' y2='104' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Ccircle cx='128' cy='176' r='16'/%3E%3C/svg%3E");
}

/* --- メリットボックス --- */
.block-merit {
  border-left-color: var(--c-accent);
  background: var(--c-accent-faint);
  padding-right: 22px;
}

.block-merit .block-box-title {
  background: transparent;
  color: #1B7A52;
}

.block-merit .block-box-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpolyline points='88 136 112 160 168 104' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Ccircle cx='128' cy='128' r='96' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpolyline points='88 136 112 160 168 104' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Ccircle cx='128' cy='128' r='96' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3C/svg%3E");
}

/* --- デメリットボックス --- */
.block-demerit {
  border-left-color: #9A5559;
  background: var(--c-danger-bg);
  padding-right: 22px;
}

.block-demerit .block-box-title {
  background: transparent;
  color: #7C3F43;
}

.block-demerit .block-box-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cline x1='160' y1='96' x2='96' y2='160' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cline x1='96' y1='96' x2='160' y2='160' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Ccircle cx='128' cy='128' r='96' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cline x1='160' y1='96' x2='96' y2='160' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cline x1='96' y1='96' x2='160' y2='160' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Ccircle cx='128' cy='128' r='96' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3C/svg%3E");
}

/* --- まとめボックス --- */
.block-summary {
  border-left-color: var(--c-text);
  border-left-width: 4px;
  background: var(--c-border-light);
  padding-right: 22px;
}

.block-summary .block-box-title {
  background: transparent;
  color: var(--c-text);
}

.block-summary .block-box-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cline x1='96' y1='164' x2='160' y2='164' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cline x1='96' y1='124' x2='160' y2='124' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cpath d='M160,40h40a8,8,0,0,1,8,8V216a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V48a8,8,0,0,1,8-8H96' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cpath d='M88,72V64a40,40,0,0,1,80,0v8Z' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cline x1='96' y1='164' x2='160' y2='164' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cline x1='96' y1='124' x2='160' y2='124' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cpath d='M160,40h40a8,8,0,0,1,8,8V216a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V48a8,8,0,0,1,8-8H96' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cpath d='M88,72V64a40,40,0,0,1,80,0v8Z' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3C/svg%3E");
}

/* --- 具体例ボックス --- */
.block-example {
  border: none;
  border-left: 3px solid var(--c-muted);
  background: var(--c-border-light);
  background-size: auto;
  border-radius: 0;
  box-shadow: none;
  padding-right: 22px;
}

.block-example .block-box-title {
  background: transparent;
  color: var(--c-muted);
  padding-left: 0;
}

.block-example .block-box-title::before {
  background-color: #8a7e6b;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M108,144H40a8,8,0,0,1-8-8V72a8,8,0,0,1,8-8h60a8,8,0,0,1,8,8v88a40,40,0,0,1-40,40' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cpath d='M224,144H156a8,8,0,0,1-8-8V72a8,8,0,0,1,8-8h60a8,8,0,0,1,8,8v88a40,40,0,0,1-40,40' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M108,144H40a8,8,0,0,1-8-8V72a8,8,0,0,1,8-8h60a8,8,0,0,1,8,8v88a40,40,0,0,1-40,40' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cpath d='M224,144H156a8,8,0,0,1-8-8V72a8,8,0,0,1,8-8h60a8,8,0,0,1,8,8v88a40,40,0,0,1-40,40' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3C/svg%3E");
}

.block-example .block-box-content {
  padding-left: 0;
  position: relative;
}

/* --- チェックリストボックス --- */
.block-checklist {
  border-left-color: var(--c-text);
  background: var(--c-border-light);
  padding-right: 22px;
}

.block-checklist .block-box-title {
  background: transparent;
  color: var(--c-text);
}

.block-checklist .block-box-title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cline x1='128' y1='128' x2='216' y2='128' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cline x1='128' y1='64' x2='216' y2='64' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cline x1='128' y1='192' x2='216' y2='192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cpolyline points='40 64 56 80 88 48' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cpolyline points='40 128 56 144 88 112' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cpolyline points='40 192 56 208 88 176' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cline x1='128' y1='128' x2='216' y2='128' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cline x1='128' y1='64' x2='216' y2='64' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cline x1='128' y1='192' x2='216' y2='192' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cpolyline points='40 64 56 80 88 48' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cpolyline points='40 128 56 144 88 112' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3Cpolyline points='40 192 56 208 88 176' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='24'/%3E%3C/svg%3E");
}

/* ========================================
   テーブル（.block-table）
   A-default の table.simple 準拠: 罫線最小、thead 下のみ太罫
   ======================================== */
.block-table {
  margin: 24px -4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.7;
}

.block-table th,
.block-table td {
  padding: 14px 12px;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}

.block-table thead th {
  font-weight: 500;
  color: var(--c-muted);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  background: transparent;
  border-bottom: 1px solid var(--c-text);
  white-space: nowrap;
}

.block-table tbody th {
  font-weight: 500;
  color: var(--c-text);
  font-size: 13px;
  background: transparent;
}

.block-table tr:nth-child(even) {
  background: transparent;
}

.block-table tr:hover {
  background: transparent;
}

/* theadなしテーブル（基本情報テーブル等） */
.block-table table:not(:has(thead)) th {
  width: 30%;
  min-width: 100px;
  background: transparent;
  font-weight: 500;
}

/* おすすめ行 (.rec) のみハイライト */
.block-table .rec td,
.block-table .rec th {
  background: #FAFAF7;
}

/* ========================================
   ステップ（.block-steps）
   A-default の .steps 準拠: 1px 細い縦線 + 枠線円番号
   ======================================== */
.block-steps {
  margin: 24px 0;
  padding-left: 6px;
}

.block-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 16px 0;
  position: relative;
}

/* ステップ間の縦線（番号の下から次のステップへ向けて） */
.block-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 38px;
  bottom: -6px;
  width: 1px;
  background: var(--c-border);
}

/* 既存の ::before 縦線描画は完全に解除 */
.block-step::before,
.block-step:first-child::before,
.block-step:last-child::before,
.block-step:only-child::before {
  display: none;
  content: none;
}

.block-step + .block-step {
  border-top: none;
}

.block-step-number {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--c-text);
  background: #fff;
  color: var(--c-text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.block-step-content {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-text);
  padding-top: 1px;
}

/* ステップタイトル（h4 / strong）は記事内の特殊扱いをそのまま維持 */
.article-body .block-step-content h4,
.article-body .block-step-content strong {
  display: block;
  margin: 0 0 4px;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: inherit;
  background: none;
}

.block-step-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
}

/* ========================================
   FAQ（.block-faq）
   A-default の .faq 準拠: 罫線のみのアコーディオン、Q/A はテキストバッジ
   ======================================== */
.block-faq {
  margin: 24px 0;
}

.faq-item,
.block-faq-item {
  border: none;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  margin-bottom: 0;
  overflow: visible;
  background: transparent;
}

.faq-item:first-child,
.block-faq-item:first-child {
  border-top: 1px solid var(--c-border);
}

.faq-question,
.block-faq-q {
  display: block;
  position: relative;
  padding: 18px 36px 18px 32px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-text);
  background: transparent;
  user-select: none;
  transition: background 0.2s ease;
}

.faq-question:hover,
.block-faq-q:hover {
  background: transparent;
}

.faq-question::before,
.block-faq-q::before {
  content: "Q";
  position: absolute;
  left: 4px;
  top: 18px;
  width: auto;
  height: auto;
  background: transparent;
  color: var(--c-muted);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  border-radius: 0;
  display: inline;
  line-height: 1.6;
}

.faq-question::after,
.block-faq-q::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  margin-left: 0;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--c-text);
  border-bottom: 1.5px solid var(--c-text);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s ease;
}

.faq-item.is-open .faq-question::after,
.block-faq-item.is-open .block-faq-q::after {
  transform: translateY(-30%) rotate(-135deg);
}

.faq-answer,
.block-faq-a {
  display: none;
  position: relative;
  padding: 0 32px 20px;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--c-text);
}

.faq-answer::before,
.block-faq-a::before {
  content: "A";
  position: absolute;
  left: 4px;
  top: 0;
  width: auto;
  height: auto;
  background: transparent;
  color: var(--c-muted);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  border-radius: 0;
  display: inline;
}

.faq-item.is-open .faq-answer,
.block-faq-item.is-open .block-faq-a {
  display: block;
}

.faq-answer > *:first-child,
.block-faq-a > *:first-child {
  margin-top: 0;
}

.faq-answer p,
.block-faq-a p {
  margin: 0 0 8px;
}

.faq-answer > *:last-child,
.block-faq-a > *:last-child {
  margin-bottom: 0;
}

/* seo-pipeが出力するQ/Aスパンラベルを非表示 */
.faq-q, .faq-a {
  display: none;
}

/* ========================================
   吹き出し（.block-balloon）
   A-default の .speech 準拠: bubble 枠線 + 三角矢印（::before rotate 45deg）
   ======================================== */
.block-balloon {
  display: flex;
  gap: 12px;
  margin: 22px 0;
  align-items: flex-start;
}

.block-balloon-right {
  flex-direction: row-reverse;
}

.balloon-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.balloon-icon img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  margin: 0;
  border-radius: 0;
}

.balloon-content {
  flex: 1;
  max-width: 80%;
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--c-text);
  background: #fff;
}

.balloon-content::before {
  content: "";
  position: absolute;
  top: 14px;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid var(--c-border);
  transform: rotate(45deg);
}

.block-balloon:not(.block-balloon-right) .balloon-content::before {
  left: -6px;
  border-right: none;
  border-top: none;
}

.block-balloon-right .balloon-content::before {
  right: -6px;
  border-left: none;
  border-bottom: none;
}

.balloon-content p {
  margin: 0;
}

/* 右側 bubble の独自背景（accent-faint）は廃止 */
.block-balloon-right .balloon-content {
  background: #fff;
}

@media (max-width: 639px) {
  .balloon-content {
    max-width: 75%;
    padding: 10px 14px;
    font-size: 13.5px;
  }
}

/* ========================================
   画像（.block-image）
   ======================================== */
.block-image {
  margin: 24px 0;
}

.block-image img {
  width: 100%;
  border-radius: var(--radius);
  display: block;
}

/* 図解画像は幅を抑えて中央配置 */
.block-image img[src*="diagram"] {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

.block-image figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: var(--c-muted);
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* ========================================
   外部埋め込み（.block-embed）
   ======================================== */
.block-embed {
  margin: 32px 0;
  border-radius: var(--radius);
  overflow: hidden;
}

/* YouTube ファサードパターン（A-default の .video 準拠: 黒背景 + 白円 play ボタン） */
.block-youtube {
  margin: 24px 0;
  background: var(--c-text);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.youtube-facade {
  position: relative;
  cursor: pointer;
  aspect-ratio: 16 / 9;
}

.youtube-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.youtube-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.youtube-play-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-left: 4px;
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent var(--c-text);
}

.youtube-facade:hover .youtube-play-btn {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.05);
}

.youtube-caption {
  margin: 10px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--c-muted);
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* Google Map（A-default の .map 準拠: border + radius-sm） */
.block-map {
  margin: 24px 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--c-border);
}

.block-map iframe {
  width: 100%;
  height: 260px;
  border: 0;
  display: block;
}

/* ========================================
   数字ハイライト（.block-numbers）
   A-default の .numbers 準拠: 上下罫線 + 列間罫線、3列グリッド
   ======================================== */
.block-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 28px 0;
  overflow: visible;
  background: transparent;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
}

.block-numbers .number-item,
.block-numbers .block-number-item {
  text-align: center;
  padding: 24px 12px;
  background: transparent;
  border-right: 1px solid var(--c-border);
}

.block-numbers .number-item:last-child,
.block-numbers .block-number-item:last-child {
  border-right: none;
}

.block-numbers .number-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.block-numbers .number-label {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--c-muted);
  letter-spacing: 0.14em;
}

@media (max-width: 639px) {
  .block-numbers {
    grid-template-columns: 1fr;
  }
  .block-numbers .number-item,
  .block-numbers .block-number-item {
    border-right: none;
    border-bottom: 1px solid var(--c-border);
  }
  .block-numbers .number-item:last-child,
  .block-numbers .block-number-item:last-child {
    border-bottom: none;
  }
  .block-numbers .number-value {
    font-size: 24px;
  }
}

/* ========================================
   チェックリスト（.checklist）
   ======================================== */
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checklist li {
  position: relative;
  padding: 6px 0 6px 28px;
  font-size: 0.93rem;
  line-height: 1.8;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 18px;
  height: 18px;
  background-color: var(--c-accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ========================================
   店舗ビジュアル（.block-store-visual）
   ======================================== */
.block-store-visual {
  margin: 16px 0 24px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-border);
}

.block-store-visual img {
  width: 100%;
  height: auto;
  display: block;
}

/* 出典表示（A-default の .fig-source 準拠: 画像直下に薄背景の小ラベル） */
.store-visual-label {
  display: block;
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--c-muted);
  background: var(--c-highlight);
  border-radius: var(--radius-sm);
  text-align: left;
  letter-spacing: 0.02em;
}

/* ========================================
   ブロック内共通
   ======================================== */
.block-box strong {
  font-weight: 700;
}

.block-box a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.block-box a:hover {
  color: var(--c-text);
}

.block-box ul,
.block-steps ul,
.block-faq ul {
  margin: 8px 0 8px 18px;
  list-style: disc;
}

.block-box ol,
.block-steps ol,
.block-faq ol {
  margin: 8px 0 8px 18px;
  list-style: decimal;
}

.block-box li,
.block-steps li,
.block-faq li {
  margin: 4px 0;
  font-size: 0.93rem;
}

/* ========================================
   スタイルバリエーション（全装飾ボックス共通）
   --small, --tabletop, --tabletop2,
   --framed, --floating, --text-framed
   ======================================== */

/* --- small: コンパクト表示 --- */
[class*="--small"].block-box {
  margin: 20px 0;
  font-size: 0.88rem;
}

[class*="--small"] .block-box-title {
  padding: 7px 14px;
  font-size: 0.78rem;
}

[class*="--small"] .block-box-content {
  padding: 12px 14px 14px;
  font-size: 0.88rem;
  line-height: 1.75;
}

[class*="--small"] > ul {
  padding: 10px 14px 12px;
}

/* --- tabletop: タイトル上部帯 --- */
[class*="--tabletop"].block-box {
  border: none;
  background: transparent;
  overflow: visible;
}

[class*="--tabletop"] .block-box-title {
  border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid var(--c-border);
  border-bottom: none;
  font-size: 0.82rem;
}

[class*="--tabletop"] .block-box-content,
[class*="--tabletop"] > ul {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* --- tabletop2: アクセント色タイトル帯 --- */
[class*="--tabletop2"].block-box {
  border: none;
  background: transparent;
  overflow: visible;
}

[class*="--tabletop2"] .block-box-title {
  background: var(--c-accent);
  color: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 0.82rem;
}

[class*="--tabletop2"] .block-box-title::before {
  background-color: #fff;
}

[class*="--tabletop2"] .block-box-content,
[class*="--tabletop2"] > ul {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* --- framed: 太い左ボーダー + 薄い背景 --- */
[class*="--framed"].block-box {
  border: none;
  border-left: 4px solid var(--c-accent);
  border-radius: 0;
  background: var(--c-accent-faint);
  /* 親 .block-box は padding-right:0 のため、背景塗り変種では明示的に右余白を確保 */
  padding-right: 22px;
}

[class*="--framed"] .block-box-title {
  background: transparent;
  padding-left: 16px;
  padding-right: 4px;
}

[class*="--framed"] .block-box-content {
  padding-left: 20px;
  padding-right: 4px;
}

[class*="--framed"] > ul {
  padding-left: 20px;
  padding-right: 4px;
}

/* framed — 警告系は独自色 */
.block-warning[class*="--framed"] {
  border-left-color: var(--c-warning);
  background: var(--c-warning-bg);
}

.block-demerit[class*="--framed"] {
  border-left-color: var(--c-danger);
  background: var(--c-danger-bg);
}

/* --- floating: 影付き浮き出しカード --- */
[class*="--floating"].block-box {
  border: none;
  border-radius: 12px;
  background: var(--c-surface);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
}

[class*="--floating"] .block-box-title {
  padding: 14px 20px;
  border-radius: 12px 12px 0 0;
}

[class*="--floating"] .block-box-content {
  padding: 16px 22px 22px;
}

/* --- text-framed: タイトルがボーダー上に浮くシンプル囲み --- */
[class*="--text-framed"].block-box {
  border: 1px solid var(--c-border);
  background: transparent;
  overflow: visible;
  position: relative;
  margin-top: 48px;
}

[class*="--text-framed"] .block-box-title {
  position: absolute;
  top: -14px;
  left: 16px;
  background: var(--c-bg);
  padding: 2px 12px;
  font-size: 0.8rem;
  border-radius: 2px;
  z-index: 1;
}

[class*="--text-framed"] .block-box-title::before {
  display: none;
}

[class*="--text-framed"] .block-box-content {
  padding: 24px 20px 20px;
}

[class*="--text-framed"] > ul {
  padding: 24px 20px 18px;
}

/* --- モバイル: コンテナはみ出し対策 + 内側パディングの最適化 ---
 * .block-box は padding-left:22px / padding-right:0 のため、--framed など
 * 背景塗り変種ではモバイル幅で右側に余白が無く視覚的にはみ出して見える。
 * モバイル時のみ余白を圧縮し、最大幅を100%に制約する。
 */
@media (max-width: 639px) {
  .block-box {
    padding: 20px 16px 20px 18px;
    margin: 24px 0;
  }

  [class*="--framed"].block-box {
    padding: 20px 16px 20px 18px;
  }

  [class*="--framed"] .block-box-title {
    padding-left: 10px;
  }

  [class*="--framed"] .block-box-content,
  [class*="--framed"] > ul {
    padding-left: 12px;
    padding-right: 0;
  }

  [class*="--floating"] .block-box-title {
    padding: 12px 16px;
  }

  [class*="--floating"] .block-box-content {
    padding: 14px 16px 18px;
  }

  [class*="--text-framed"] .block-box-content,
  [class*="--text-framed"] > ul {
    padding: 22px 16px 16px;
  }

  /* .block-example はテキスト型: 左ボーダー＋背景の組合せでも
     モバイルで内側を詰めて読みやすく */
  .block-example,
  .block-point,
  .block-warning,
  .block-merit,
  .block-demerit,
  .block-checklist,
  .block-summary {
    padding: 20px 16px 20px 18px;
  }
}

/* ========================================
   箇条書き（.block-list）
   ======================================== */
.block-list {
  margin: 28px 0;
  padding: 0 0 0 24px;
  font-size: 0.95rem;
  line-height: 2;
}

ul.block-list {
  list-style: disc;
}

ol.block-list,
.block-list--ordered {
  list-style: decimal;
}

.block-list li {
  margin: 6px 0;
  padding-left: 4px;
}

.block-list li::marker {
  color: var(--c-accent);
}

/* ========================================
   ボタン（.block-button）— A-default の .btn 準拠
   全タイプとも ink 色ベース（緑 accent ではない）
   ======================================== */
.block-button {
  margin: 36px 0;
  text-align: center;
}

/* eyebrow（A-default の .cta-eyebrow）: 上のサブテキスト「／ 今だけ限定キャンペーン中 ／」 */
.block-button-micro {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  color: var(--c-muted);
  letter-spacing: 0.18em;
  font-weight: 400;
}

.block-button-micro::before,
.block-button-micro::after {
  content: "／";
  color: var(--c-border);
  margin: 0 6px;
}

/* normal（基底）: 黒背景 / 白文字 / height 50px / min-width 240px */
.block-button a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 32px;
  min-width: 240px;
  max-width: 100%;
  background: var(--c-text);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  border: none;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: transform 0.12s ease, background 0.15s ease;
  position: relative;
  overflow: hidden;
}

.block-button a:hover {
  background: #000;
  color: #fff;
  transform: translateY(-1px);
}

/* solid: 立体感（box-shadow 2px 黒） */
.block-button--solid a {
  box-shadow: 0 2px 0 #000;
  transform: translateY(0);
}

.block-button--solid a:active {
  box-shadow: none;
  transform: translateY(2px);
}

/* shine: キラッと光る */
@keyframes btnShine {
  0% { left: -30%; }
  60% { left: 130%; }
  100% { left: 130%; }
}

.block-button--shine a {
  position: relative;
  overflow: hidden;
}

.block-button--shine a::after {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transform: skewX(-20deg);
  animation: btnShine 2.4s infinite;
}

/* outline: 白背景 / ink 文字 / ink 枠 */
.block-button--outline a {
  background: #fff;
  color: var(--c-text);
  border: 1px solid var(--c-text);
}

.block-button--outline a:hover {
  background: var(--c-text);
  color: #fff;
}

/* more: 控えめ MORE ボタン — 白背景 + 細枠 + 小さめ */
.block-button--more a {
  min-width: 0;
  height: 40px;
  padding: 0 22px;
  background: #fff;
  color: var(--c-text);
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--c-border);
  letter-spacing: 0.08em;
  box-shadow: none;
}

.block-button--more a:hover {
  background: var(--c-highlight);
  color: var(--c-text);
  border-color: var(--c-text);
  transform: none;
}

/* ========================================
   内部リンクカード（.block-link-card）
   画像あり/なし両対応のフレックスレイアウト。
   - 画像があれば 150px のサムネイルが先頭、本文が右に伸縮
   - 画像が無ければ本文がフル幅。空白の余白なし
   - 本文上に「関連記事」ラベル、下に「続きを読む →」マイクロCTA
   - ホバー: アクセント色のボーダー + 上方向リフト + 矢印スライド
   ======================================== */
.block-link-card {
  position: relative;
  margin: 28px 0;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

.block-link-card:hover {
  border-color: var(--c-accent);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.02),
    0 10px 28px -10px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.block-link-card a {
  display: flex;
  align-items: stretch;
  gap: 0;
  text-decoration: none;
  color: inherit;
}

/* 画像が含まれるときだけカード自体に最低高さを持たせ、
   画像なしカードは本文の高さに合わせてコンパクトに収める */
.block-link-card a:has(img) {
  min-height: 120px;
}

/* サムネイル（<img> は <a> 直下でも .block-link-card-thumb 内でも吸収） */
.block-link-card-thumb {
  flex: 0 0 150px;
  width: 150px;
  align-self: stretch;
  overflow: hidden;
  background: var(--c-bg);
}

.block-link-card-thumb img,
.block-link-card a > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}

/* 旧形式: <img> が <a> の直下にあるケース（AI生成・既存記事用） */
.block-link-card a > img {
  flex: 0 0 150px;
  width: 150px;
  align-self: stretch;
}

/* 本文（ラベル → タイトル → 説明 → 続きを読む） */
.block-link-card-body {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.block-link-card-body::before {
  content: "▶ 関連記事";
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-accent);
  line-height: 1.2;
}

.block-link-card-title {
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--c-text);
  margin: 2px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition);
}

.block-link-card:hover .block-link-card-title {
  color: var(--c-accent);
}

.block-link-card-desc {
  font-size: 12.5px;
  color: var(--c-muted);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.block-link-card-body::after {
  content: "続きを読む →";
  align-self: flex-start;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-accent);
  letter-spacing: 0.04em;
  transition: transform var(--transition);
}

.block-link-card:hover .block-link-card-body::after {
  transform: translateX(4px);
}

@media (max-width: 639px) {
  .block-link-card a:has(img) {
    min-height: 96px;
  }
  .block-link-card-thumb,
  .block-link-card a > img {
    flex-basis: 104px;
    width: 104px;
  }
  .block-link-card-body {
    padding: 12px 14px;
    gap: 3px;
  }
  .block-link-card-body::before {
    font-size: 10px;
  }
  .block-link-card-title {
    font-size: 13.5px;
  }
  .block-link-card-desc {
    font-size: 12px;
    -webkit-line-clamp: 2;
  }
  .block-link-card-body::after {
    font-size: 11px;
  }
}

/* 商品比較表（.block-compare-table）— 削除済み（ranking-table + product-serviceに統合） */
/* 後方互換: 旧記事に残っている場合のフォールバック */
.block-compare-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 36px 0;
}

.block-compare-item {
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  text-align: center;
  padding: 28px 16px 20px;
  transition: box-shadow var(--transition);
}

.block-compare-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.block-compare-badge {
  position: absolute;
  top: -10px;
  left: 12px;
  background: var(--c-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 2px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.block-compare-item img {
  width: 100%;
  max-height: 160px;
  object-fit: contain;
  margin: 0 auto 16px;
  border-radius: 0;
}

.block-compare-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 16px;
  line-height: 1.4;
}

.block-compare-specs {
  text-align: left;
  border-top: 1px solid var(--c-border);
  margin-bottom: 16px;
}

.block-compare-spec {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border-light, var(--c-border));
  font-size: 0.85rem;
  line-height: 1.5;
}

.block-compare-spec-label {
  color: var(--c-muted);
  font-weight: 500;
  font-size: 0.78rem;
}

.block-compare-spec-value {
  font-weight: 600;
  color: var(--c-text);
  text-align: right;
}

.block-compare-cta {
  display: inline-block;
  width: 100%;
  padding: 12px 16px;
  background: var(--c-accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background var(--transition);
}

.block-compare-cta:hover {
  background: var(--c-text);
  color: #fff;
}

.block-compare-cta::after {
  content: " ›";
  font-size: 1.1em;
}

@media (max-width: 639px) {
  .block-compare-table {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   商品紹介EC向け（.block-product-ec）
   ======================================== */
.block-product-ec {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: stretch;
  gap: 18px;
  margin: 24px 0;
  padding: 22px;
  border: 1px solid #E5DACB;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 1px 0 #FAF6EC, 0 14px 30px -18px rgba(20, 30, 25, 0.18);
  overflow: visible;
  position: relative;
}

/* SALE タグ（A-default 風） */
.block-product-ec::before {
  content: "SALE";
  position: absolute;
  top: 14px;
  left: -6px;
  background: #D63C3C;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 10px 4px 8px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%, 6px 50%);
  box-shadow: 0 4px 10px -3px rgba(214, 60, 60, 0.4);
  z-index: 1;
}

.block-product-ec > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  margin: 0;
  background: repeating-linear-gradient(135deg, #FFF5DD 0 8px, #FFEFCC 8px 16px);
  display: block;
}

.block-product-ec-body {
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.block-product-ec-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 4px;
  color: var(--c-text);
}

.block-product-ec-maker {
  font-size: 11px;
  color: var(--c-muted);
  margin-top: 4px;
  margin-bottom: 0;
  letter-spacing: 0.02em;
}

.block-product-ec-price {
  font-family: var(--font-heading);
  font-weight: 700;
  color: #D63C3C;
  font-size: 24px;
  margin: 10px 0 4px;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.block-product-ec-buttons {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.block-product-ec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 90px;
  height: 40px;
  padding: 0;
  text-align: center;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.block-product-ec-btn:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.block-product-ec-btn--amazon {
  background: #FF9900;
}

.block-product-ec-btn--rakuten {
  background: #BF0000;
}

.block-product-ec-btn--yahoo {
  background: #FF0033;
}

@media (max-width: 639px) {
  .block-product-ec {
    grid-template-columns: 88px 1fr;
    gap: 14px;
    padding: 14px;
  }

  .block-product-ec > img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .block-product-ec-body {
    padding: 0;
  }

  .block-product-ec-name {
    font-size: 13px;
  }

  .block-product-ec-price {
    font-size: 20px;
    margin: 6px 0 4px;
  }

  .block-product-ec-buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .block-product-ec-btn {
    flex: 1;
    min-width: 80px;
    height: 38px;
    font-size: 11px;
  }
}

/* ========================================
   商品紹介サービス向け（.block-product-service）
   A-default の .pservice RICH OVERRIDES 準拠:
   - 上品な box-shadow + 内側グラデ背景 + 角丸大
   - リボンを金グラデ ♛ アイコン付きに
   ======================================== */
.block-product-service {
  margin: 24px 0;
  padding: 0;
  border: 1px solid #E5DACB;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #FFFCF4 0%, #FFFFFF 60%);
  box-shadow: 0 1px 0 #FAF6EC, 0 18px 40px -22px rgba(20, 30, 25, 0.2);
  position: relative;
  overflow: visible;
}

/* ランクバッジ: 左上 absolute リボン風（金グラデ + box-shadow + ♛アイコン） */
.block-product-svc-rank {
  position: absolute;
  top: -1px;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px 7px 14px;
  background: linear-gradient(135deg, #E2A638, #B97B12);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  z-index: 2;
  border-radius: 0 0 4px 0;
  clip-path: none;
  box-shadow: 0 4px 10px -3px rgba(185, 123, 18, 0.5);
}

.block-product-svc-rank::before {
  content: "♛  ";
  opacity: 0.9;
}

/* rank別色の上書きは A-default の RICH では1位ベースなので維持しつつ控えめに調整 */
.block-product-svc-rank[data-rank="1"] {
  background: linear-gradient(135deg, #E2A638, #B97B12);
}

.block-product-svc-rank[data-rank="2"] {
  background: linear-gradient(135deg, #B0B6BC, #707981);
}

.block-product-svc-rank[data-rank="3"] {
  background: linear-gradient(135deg, #C99573, #8C6242);
}

.block-product-svc-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 18px;
  flex-wrap: wrap;
}

/* ヘッダー余白（リボンと重ならないよう上余白多め） */
.block-product-service > .block-product-svc-header {
  padding: 18px 26px 0;
  margin-top: 14px;
}

.block-product-service > .block-product-svc-rank ~ .block-product-svc-header {
  padding-top: 50px;
  margin-top: 0;
}

.block-product-service > .block-product-svc-body {
  padding: 0 26px;
}

.block-product-service > .block-product-svc-buttons {
  padding: 0 26px 26px;
}

.block-product-svc-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: var(--c-text);
}

/* 星: ranking-tableと同じグラデーション星を使用 */
.block-product-svc-stars {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}
.block-product-svc-stars .block-ranking-stars-icons {
  display: inline-flex;
  gap: 1px;
}
.block-product-svc-stars .block-ranking-star {
  width: 16px;
  height: 16px;
}
.block-product-svc-stars::after {
  content: attr(data-stars);
  font-weight: 700;
  font-size: 14px;
  color: var(--c-text);
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

.block-product-service > img {
  width: calc(100% - 52px);
  height: auto;
  margin: 0 auto 18px;
  display: block;
  border-radius: var(--radius-md);
}

/* ロゴ画像 — 大きすぎないサイズで中央配置 */
.block-product-service > .block-product-svc-logo {
  width: 480px;
  max-width: 100%;
  height: auto;
  margin: 26px auto 0;
  display: block;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}

/* ロゴが先頭にある場合のヘッダー余白調整 */
.block-product-service > .block-product-svc-logo + .block-product-svc-header {
  padding-top: 18px;
}

/* スペック表（specs） — A-default の .pservice dl 準拠
 * 基本: font-size:13px, padding:12px 0, dt(th) は auto width + 20px gap
 * RICH OVERRIDES: 上下罫線 + 行間罫線 #F0EBE0 */
.block-product-svc-specs {
  margin: 18px 26px 22px;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.block-product-svc-specs table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.block-product-svc-specs th,
.block-product-svc-specs td {
  text-align: left;
  padding: 12px 0;
  border-bottom: 1px solid #F0EBE0;
  vertical-align: top;
  font-size: 13px;
  font-weight: 400;
}

.block-product-svc-specs tr:last-child th,
.block-product-svc-specs tr:last-child td {
  border-bottom: none;
}

/* dt 相当: muted 色、auto 幅 + 右に余白 */
.block-product-svc-specs th {
  width: auto;
  padding-right: 20px;
  white-space: nowrap;
  color: var(--c-muted);
}

/* dd 相当: ink 色 */
.block-product-svc-specs td {
  color: var(--c-text);
}

/* リード見出し（editorial-title）— A-default RICH OVERRIDES の .lead-h 準拠
 * 黄色背景 + 橙色ボーダー左 */
.article-body h3.block-product-svc-editorial-title,
.block-product-service h3.block-product-svc-editorial-title {
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
  background: #FFF7E5;
  border: none;
  border-left: 4px solid #E2A638;
  border-top: none;
  padding: 12px 14px;
  margin: 18px 26px 14px;
  border-radius: 0 4px 4px 0;
  color: var(--c-text);
  position: relative;
}

.article-body h3.block-product-svc-editorial-title::before {
  display: none;
  content: none;
}

/* 良い点 / 気になる点 grid（pros-cons） */
.block-product-svc-pros-cons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 18px 26px;
}

@media (min-width: 560px) {
  .block-product-svc-pros-cons {
    grid-template-columns: 1fr 1fr;
  }
}

.block-product-svc-pros,
.block-product-svc-cons {
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

/* 良い点 — 薄ピンクグラデ背景 + 赤系ボーダー（A-default RICH OVERRIDES .pp-box.good 準拠） */
.block-product-svc-pros {
  background: linear-gradient(180deg, #FFF5F4, #FFFFFF);
  border: 1px solid #F5C9C4;
}

/* 気になる点 — 薄グレーグラデ背景 + ベージュ系ボーダー（.pp-box.bad 準拠） */
.block-product-svc-cons {
  background: linear-gradient(180deg, #F8F6F3, #FFFFFF);
  border: 1px solid #D8D2C8;
}

/* 各タイトル */
.block-product-svc-list-title {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.block-product-svc-pros .block-product-svc-list-title {
  color: #C73D3D;
}

.block-product-svc-cons .block-product-svc-list-title {
  color: #7A6F5E;
}

/* リスト */
.block-product-svc-pros ul,
.block-product-svc-cons ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.block-product-svc-pros li,
.block-product-svc-cons li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--c-text);
}

.block-product-svc-pros li:last-child,
.block-product-svc-cons li:last-child {
  margin-bottom: 0;
}

/* 良い点アイコン: ★ 赤色（シンプルなテキスト記号） */
.block-product-svc-pros li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  font-size: 11px;
  color: #F15C5C;
  font-weight: 700;
  background: none;
  border-radius: 0;
}

/* 気になる点アイコン: ― グレー色 */
.block-product-svc-cons li::before {
  content: "―";
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  font-size: 11px;
  color: #9A8E7A;
  font-weight: 700;
  background: none;
  border-radius: 0;
}

.block-product-svc-body {
  margin-bottom: 18px;
}

.block-product-svc-body p {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--c-text);
  margin: 0 0 1.2em;
}

.block-product-svc-body p:last-child {
  margin-bottom: 0;
}

/* CTA エリア（A-default .ctas: urgency strip + primary 大ボタン + secondary 小ボタン） */
.block-product-svc-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

/* urgency strip — 「本日 23:59 までの限定キャンペーン実施中」を ::before で固定表示 */
.block-product-svc-buttons::before {
  content: "⏱  本日 23:59 までの限定キャンペーン実施中";
  display: block;
  text-align: center;
  background: #FFF1E0;
  color: #A65A1A;
  border: 1px dashed #E8B97A;
  padding: 9px 12px;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 500;
  border-radius: 3px;
  margin-bottom: 4px;
  width: 100%;
  box-sizing: border-box;
}

.block-product-svc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

/* primary: A-default の .pservice .ctas .primary 風 — 緑グラデ + glow + shine + ›矢印 */
.block-product-svc-btn--official {
  height: 56px;
  background: linear-gradient(180deg, #3FBD86 0%, #22995F 100%);
  color: #fff !important;
  border: none;
  border-radius: var(--radius-lg);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 22px -8px rgba(34, 153, 95, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.14);
  animation: none;
  top: 0;
}

.block-product-svc-btn--official::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: rank-shine 3s ease-in-out infinite;
  pointer-events: none;
}

.block-product-svc-btn--official::after {
  content: "›";
  margin-left: 10px;
  font-size: 22px;
  line-height: 1;
}

.block-product-svc-btn--official:hover {
  color: #fff;
  opacity: 1;
  transform: translateY(-1px);
}

/* secondary: outline 風 */
.block-product-svc-btn--detail {
  height: 42px;
  background: #fff;
  border: 1px solid #D8CFBE;
  border-radius: var(--radius-md);
  color: var(--c-muted) !important;
  font-size: 13px;
  font-weight: 500;
  margin-top: 8px;
}

.block-product-svc-btn--detail:hover {
  background: var(--c-highlight);
  color: var(--c-text) !important;
  border-color: var(--c-border);
  transform: translateY(-1px);
}

@media (max-width: 639px) {
  .block-product-service {
    padding: 0;
  }

  .block-product-service > img {
    width: calc(100% - 36px);
  }

  .block-product-service > .block-product-svc-logo {
    width: calc(100% - 36px);
    margin-top: 18px;
  }

  .block-product-service > .block-product-svc-header,
  .block-product-service > .block-product-svc-body,
  .block-product-service > .block-product-svc-buttons {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* editorial-title と pros-cons は header/body/buttons と同じ 18px に揃える
     （PC: 26px / スマホ: 18px の差分でズレていた問題への対応） */
  .block-product-service > h3.block-product-svc-editorial-title,
  .article-body .block-product-service > h3.block-product-svc-editorial-title,
  .block-product-service > .block-product-svc-pros-cons {
    margin-left: 18px;
    margin-right: 18px;
  }

  .block-product-svc-rank {
    font-size: 11px;
    padding: 6px 12px 6px 10px;
  }

  .block-product-svc-name {
    font-size: 17px;
  }

  .block-product-svc-buttons {
    flex-direction: column;
    gap: 8px;
  }

  .block-product-svc-btn--official {
    height: 52px;
    font-size: 14.5px;
  }

  .block-product-svc-btn--detail {
    height: 44px;
    font-size: 12.5px;
  }
}

/* ── product-service directoryモード: 順位番号のみ非表示、★評価は表示 ── */
.block-product-service[data-mode="directory"] .block-product-svc-rank {
  display: none;
}

/* 事例写真ギャラリー */
.block-product-svc-gallery {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 1.25rem;
  scroll-snap-type: x mandatory;
}

.block-product-svc-gallery img {
  flex: 0 0 auto;
  width: 180px;
  height: 130px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  scroll-snap-align: start;
}

@media (max-width: 640px) {
  .block-product-svc-gallery img {
    width: 150px;
    height: 110px;
  }
}

/* 商品紹介サービス（pros-cons / specs / editorial-title）の旧定義は
 * Phase 3-6 で A-default RICH OVERRIDES 準拠の新定義に統合済み（line 1700前後）。
 * 重複削除：旧定義は完全に取り除いた。 */

/* ========================================
   口コミ・レビュー（.block-review）
   A-default の .reviews / .review-row 準拠: 罫線のみ + アバター 34px + 引用符削除
   ======================================== */
.block-review {
  margin: 24px 0;
}

.block-review-item {
  padding: 20px 0 20px 48px;
  margin: 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--c-border);
  border-radius: 0;
  position: relative;
}

.block-review-item:last-child {
  border-bottom: 1px solid var(--c-border);
}

/* アバター: 34px 円 + 1px枠線（人物シルエット mask は維持） */
.block-review-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background-color: var(--c-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23000'%3E%3Cpath d='M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 60% 60%;
  mask-size: 60% 60%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.block-review-item .review-meta {
  font-size: 11.5px;
  color: var(--c-muted);
  margin-bottom: 6px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.block-review-item .review-meta .who {
  color: var(--c-text);
  font-weight: 500;
  font-size: 12px;
}

.block-review-item .review-text {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--c-text);
  margin: 0;
  position: relative;
}

/* 引用符装飾は A-default では使わないため削除 */
.block-review-item .review-text::before {
  display: none;
  content: none;
}

/* Google口コミ バリエーション（.block-review--google）
   A-default の .review-row.gmap 準拠: card 風 (border + radius + shadow) + Google ピンアイコン */

.block-review--google .block-review-item {
  border: 1px solid #E2E5E9;
  border-top: 1px solid #E2E5E9;
  border-radius: var(--radius-lg);
  padding: 18px 20px 18px 56px;
  margin-bottom: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
}

.block-review--google .block-review-item:last-child {
  border-bottom: 1px solid #E2E5E9;
}

/* アバター: A-default 風 — グレー円 (#F1F3F4) + 内側にダーク色のシルエット */
.block-review--google .block-review-item::before {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background-color: #F1F3F4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%235F6368'%3E%3Cpath d='M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60% 60%;
  -webkit-mask-image: none;
  mask-image: none;
  top: 18px;
  left: 12px;
}

.block-review--google .review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 12px;
  color: #5F6368;
  margin-bottom: 8px;
}

/* Google Maps ピンアイコン（review-meta の先頭に） */
.block-review--google .review-meta::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M12 2C7.6 2 4 5.6 4 10c0 5.5 7 11.5 7.3 11.7.4.3.9.3 1.3 0 .4-.2 7.4-6.2 7.4-11.7 0-4.4-3.6-8-8-8z'/%3E%3Ccircle cx='12' cy='10' r='3' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;
}

.block-review--google .review-source {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: #1A73E8;
  font-weight: 500;
  letter-spacing: 0;
}

.block-review--google .review-source::before {
  content: none;
  display: none;
}

.block-review--google .review-rating {
  font-size: 13px;
  color: #FBBC04 !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: none;
}

.block-review--google .review-count {
  font-size: 12px;
  color: #5F6368;
  font-weight: 700;
}

/* 店舗名: メタ行の右端へ */
.block-review--google .review-meta .who,
.block-review--google .review-meta .review-store {
  margin-left: auto;
  color: #5F6368;
  font-size: 12px;
  font-weight: 500;
}

/* 星 + 評価値の色を A-default 風に */
.block-review--google .review-meta .stars {
  color: #FBBC04;
  font-size: 13px;
}

.block-review--google .review-meta .v {
  font-weight: 700;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

.block-review--google .review-text {
  font-size: 13.5px;
  line-height: 1.85;
  color: #3C4043;
  position: relative;
  padding-left: 18px;
}

.block-review--google .review-text::before {
  content: "\201C";
  position: absolute;
  left: -2px;
  top: -6px;
  font-family: Georgia, serif;
  font-size: 30px;
  color: #DADCE0;
  line-height: 1;
  display: inline;
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Yahoo!知恵袋 バリエーション（.block-review--chiebukuro）
   A-default の .review-cb 準拠: 全周ボーダー + 上部ヘッダー帯 + Yahoo!赤バッジ */

.block-review--chiebukuro .block-review-item {
  padding: 0;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid #DCE7EE;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.block-review--chiebukuro .block-review-item:last-child {
  border: 1px solid #DCE7EE;
}

.block-review--chiebukuro .block-review-item::before {
  display: none;
  content: none;
}

.block-review--chiebukuro .review-meta {
  background: linear-gradient(180deg, #F3F8FB, #E9F1F6);
  border-bottom: 1px solid #DCE7EE;
  padding: 10px 14px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #5B6E7A;
  font-weight: 500;
}

/* Yahoo!知恵袋 ロゴ風バッジ（赤） */
.block-review--chiebukuro .review-meta::before {
  content: "知恵袋";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FF0033;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 3px;
  line-height: 1;
}

.block-review--chiebukuro .review-source {
  border: none;
  padding: 0;
  background: transparent;
  font-size: 12px;
  color: #5B6E7A;
  letter-spacing: 0;
  font-weight: 500;
}

.block-review--chiebukuro .review-source::before {
  content: "Yahoo!";
  color: #FF0033;
  font-weight: 900;
  font-family: var(--font-heading);
  margin-right: 4px;
  width: auto;
  height: auto;
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
  display: inline;
  flex-shrink: 0;
}

.block-review--chiebukuro .review-text {
  padding: 14px 16px 16px;
  font-size: 14px;
  line-height: 1.95;
  color: var(--c-text);
}

.block-review--chiebukuro .review-text::before {
  content: "Q.";
  color: #D63C3C;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 16px;
  margin-right: 8px;
  position: static;
  display: inline;
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* ========================================
   ステップ内ネストブロック補正
   ======================================== */
.block-step-content .block-list {
  margin: 8px 0 4px;
}

.block-step-content .block-list li {
  font-size: 0.9rem;
  margin: 3px 0;
}

.block-step-content img {
  border-radius: var(--radius);
  margin: 8px 0;
}

.block-step-content p + .block-list,
.block-step-content .block-list + p {
  margin-top: 8px;
}

/* ========================================
   ランキング比較表（.block-ranking-table）
   A-default の .ranking RICH OVERRIDES 準拠:
   - gold/silver/bronze グラデバッジ
   - 1位行に薄黄グラデ + 「イチ推し」リボン
   - CTA に accent + glow shadow + shine animation
   - リスト V 字チェック
   - スマホ 2 行 grid
   HTML 構造（block-ranking-*, data-rank）は完全保持
   ======================================== */
.block-ranking-table {
  margin: 28px 0;
  border: 1px solid #E5DACB;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 0 rgba(43, 165, 114, 0.04), 0 12px 32px -18px rgba(20, 30, 25, 0.18);
}

/* ── タブナビ ── */
.block-ranking-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #FAF8F3;
  border-bottom: 1px solid #EFE8DB;
}

.block-ranking-tab {
  padding: 14px 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #8A857C;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  letter-spacing: 0.08em;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-bottom-color 0.15s, background 0.15s;
}

.block-ranking-tab::after { content: none; }

.block-ranking-tab:hover { color: var(--c-text); }
.block-ranking-tab.is-active {
  color: var(--c-text);
  background: #fff;
  border-bottom: 3px solid var(--c-accent);
  font-weight: 700;
}
.block-ranking-tab.is-active::after { background: transparent; }

/* ── 各社行（grid 3列: logo | info | go） ── */
.block-ranking-items { padding: 0; }
.block-ranking-item {
  display: grid;
  /* logo 左固定 / name + stars はそれぞれ auto 幅で内容に密接 / 4列目 1fr が余白吸収 / 5列目 CTA
     上段: logo | name | stars |    余白    | go
     下段: logo |       info (3カラム横結合)  | go */
  grid-template-columns: 120px auto auto 1fr auto;
  grid-template-areas:
    "logo name stars .    go"
    "logo info info  info go";
  grid-template-rows: auto 1fr;
  column-gap: 18px;
  row-gap: 6px;
  align-items: center;
  padding: 28px 18px 22px;
  border-bottom: 1px solid var(--c-border);
  background: #fff;
  position: relative;
  transition: background 0.15s;
}
.block-ranking-item:last-child { border-bottom: none; }
.block-ranking-item:hover { background: #FCFBF7; }

/* ── 1位行: 薄黄グラデ + 「イチ推し」リボン ── */
.block-ranking-item[data-rank="1"] {
  background: linear-gradient(180deg, #FFF9EE 0%, #FFFFFF 70%);
}
.block-ranking-item[data-rank="1"]::before {
  content: "イチ推し";
  position: absolute;
  top: 0;
  right: 0;
  background: #D49A1A;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 8px 3px 12px;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}

/* ── header はラッパに過ぎないので display:contents で透過。
     子要素 (logo / name / stars) を直接 .block-ranking-item の grid items にする ── */
.block-ranking-item-header {
  display: contents;
}

/* バッジ: 左上 absolute 円形（gold/silver/bronze グラデ） */
.block-ranking-num {
  position: absolute;
  top: 8px;
  left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: #8A8270;
  background: #F1ECE0;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.06);
  z-index: 2;
}
/* 管理画面で --c-rank-N を指定した場合は単色化、空欄ならテーマ既定の grad（A の元設計）を維持 */
.block-ranking-item[data-rank="1"] .block-ranking-num {
  background: var(--c-rank-1, linear-gradient(135deg, #F5C544, #D49A1A));
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(212, 154, 26, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.block-ranking-item[data-rank="2"] .block-ranking-num {
  background: var(--c-rank-2, linear-gradient(135deg, #D8D8D8, #9E9E9E));
  color: #fff;
  box-shadow: 0 3px 10px -4px rgba(0, 0, 0, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}
.block-ranking-item[data-rank="3"] .block-ranking-num {
  background: var(--c-rank-3, linear-gradient(135deg, #D4956B, #A26432));
  color: #fff;
  box-shadow: 0 3px 10px -4px rgba(162, 100, 50, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.1);
}
.block-ranking-item:not([data-rank="1"]):not([data-rank="2"]):not([data-rank="3"]) .block-ranking-num {
  background: #F1ECE0;
  color: #8A8270;
}

.block-ranking-logo {
  grid-area: logo;
  width: 120px;
  height: 90px;
  object-fit: contain;
  margin: 0;
  border-radius: var(--radius-md);
  align-self: start;
  justify-self: center;
}
.block-ranking-name {
  grid-area: name;
  min-width: 0;          /* grid item を 0 まで縮められるようにし、長文を折り返し可能に */
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--c-text);
  margin: 0;
  text-align: left;
  align-self: end;
  overflow-wrap: anywhere;
}

/* ── 星（既存のグラデーション星マスクは維持、サイズと数値色のみ調整） ── */
.block-ranking-stars {
  grid-area: stars;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  margin: 0;
  margin-left: -10px;      /* PC で column-gap 18px を打ち消し、サービス名の真隣に詰める */
  align-self: end;
  white-space: nowrap;     /* 「★★★★★ 4.9」を必ず1行に。長 name で縦圧縮されるのを防止 */
  flex-wrap: nowrap;
}
.block-ranking-stars-icons {
  display: inline-flex;
  gap: 1px;
}
.block-ranking-star {
  width: 14px;
  height: 14px;
  display: inline-block;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #ea580c 100%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
}
.block-ranking-star.is-empty { background: #E2E0DA; }
.block-ranking-star.is-half { background: linear-gradient(90deg, #f59e0b 50%, #E2E0DA 50%); }
.block-ranking-stars::after {
  content: attr(data-stars);
  font-weight: 700;
  font-size: 14px;
  color: var(--c-text);
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* ── 中央パネル（name と stars の間に縦積み） ── */
.block-ranking-panel {
  grid-area: info;
  flex: unset;
  padding: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--c-text);
  border-right: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}
.block-ranking-panel[hidden] { display: none; }

.block-ranking-spec {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 1px 0;
}
.spec-label {
  font-weight: 500;
  color: var(--c-muted);
  white-space: nowrap;
  min-width: 5em;
  font-size: 12px;
}
.spec-value {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}

/* パネル内のリスト（A-default 風 V字チェック） */
.block-ranking-panel ul {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.block-ranking-panel li {
  position: relative;
  padding: 0 0 0 18px;
  margin-right: 14px;
  margin-bottom: 0;
  line-height: 1.7;
  font-size: 13px;
  display: inline-block;
}
/* V字チェック（border 角度切替） */
.block-ranking-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  border-radius: 0;
  background: none;
  transform: rotate(-45deg);
  margin: 0;
}

/* ── 右カラム: CTA ボタン（accent + glow + shine animation + ›矢印） ── */
a.block-ranking-cta,
.block-ranking-cta {
  grid-area: go;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: unset;
  min-width: 140px;
  height: auto;
  padding: 14px 22px;
  background: var(--c-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  margin: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 16px -6px rgba(43, 165, 114, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  transition: transform 0.15s, box-shadow 0.15s;
}

/* shine animation overlay */
a.block-ranking-cta::before,
.block-ranking-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: rank-shine 3.6s ease-in-out infinite;
  margin-left: 0;
  pointer-events: none;
}

/* 右矢印 › */
a.block-ranking-cta::after,
.block-ranking-cta::after {
  content: "›";
  position: static;
  inset: auto;
  margin-left: 8px;
  font-size: 18px;
  line-height: 1;
  background: none;
  height: auto;
  border-radius: 0;
  pointer-events: auto;
}

a.block-ranking-cta:hover,
.block-ranking-cta:hover {
  opacity: 1;
  background: var(--c-accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(43, 165, 114, 0.65), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

@keyframes rank-shine {
  0%, 60% { transform: translateX(-100%); }
  80%, 100% { transform: translateX(100%); }
}

/* ── directoryモード（ランキングなし版） ── */
.block-ranking-table[data-mode="directory"] .block-ranking-num {
  display: none;
}
.block-ranking-table[data-mode="directory"] .block-ranking-item-header {
  padding-top: 0;
}
.block-ranking-table[data-mode="directory"] .block-ranking-item[data-rank="1"] {
  background: #fff;
}
.block-ranking-table[data-mode="directory"] .block-ranking-item[data-rank="1"]::before {
  display: none;
}

/* ── スマホ（左にロゴ縦結合、右に name → stars 縦積み / その下に info フル幅 / 最下段 CTA フル幅） ── */
@media (max-width: 640px) {
  .block-ranking-item {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas:
      "logo name"
      "logo stars"
      "info info"
      "go   go";
    grid-template-rows: auto auto auto auto;
    column-gap: 12px;
    row-gap: 6px;
    padding: 24px 28px 14px;
  }

  /* スマホでは name と stars が縦並び。PC の margin-left 負値はリセット
     さらに stars に負 margin-top で name との縦間隔を半分に詰める（row-gap 6px → 実質3px相当） */
  .block-ranking-stars {
    margin-left: 0;
    margin-top: -3px;
  }

  .block-ranking-num {
    width: 28px;
    height: 28px;
    font-size: 13px;
    top: 6px;
    left: 8px;
  }

  /* スマホは1行目内で name と縦中央揃え（PCは align-self: start で上揃い） */
  .block-ranking-logo {
    width: 88px;
    height: 64px;
    align-self: center;
  }

  .block-ranking-name {
    font-size: 14.5px;
  }

  .block-ranking-star { width: 12px; height: 12px; }
  .block-ranking-stars::after { font-size: 12px; }

  .block-ranking-panel {
    padding: 0;
    border-right: none;
  }

  a.block-ranking-cta,
  .block-ranking-cta {
    grid-area: go;
    min-width: 0;
    width: 100%;
    margin: 6px 0 0;
    padding: 14px;
    font-size: 13.5px;
    box-shadow: 0 4px 12px -4px rgba(43, 165, 114, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  }

  .block-ranking-tab {
    padding: 12px 4px;
    font-size: 12px;
  }

  .block-ranking-item[data-rank="1"]::before {
    font-size: 9.5px;
    padding: 3px 7px 3px 10px;
  }
}

/* ========================================
   結論ボックス（.block-conclusion）
   A-default の .conclusion 準拠: 全周ボーダー + 左ボーダー強調 + シンプルなドットタイトル
   ======================================== */
.block-conclusion {
  margin: 24px 0;
  padding: 28px 26px;
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-text);
  border-radius: var(--radius-md);
  overflow: visible;
  background: var(--c-surface);
  box-shadow: none;
  position: relative;
}

/* 上端のグラデーションアクセントラインは廃止 */
.block-conclusion::before {
  content: none;
}

/* タイトル: ドット + テキスト（A-default 風） */
.block-conclusion .block-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin-bottom: 18px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--c-text);
  background: transparent;
}

/* タイトル前を 8px の円ドットに置換（既存の seal-check SVG マスクを解除） */
.block-conclusion .block-box-title::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background-color: var(--c-text);
  border-radius: 50%;
  -webkit-mask-image: none;
  mask-image: none;
}

/* コンテンツ部 */
.block-conclusion .block-box-content {
  padding: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-text);
}

.block-conclusion .block-box-content p {
  margin: 0 0 0.6em;
}

.block-conclusion .block-box-content p:last-child {
  margin-bottom: 0;
}

.block-conclusion .block-box-content p + p {
  margin-top: 0;
}

/* 結論内 strong: A-default 準拠で控えめな下線強調 */
.block-conclusion .block-box-content strong {
  color: var(--c-text);
  font-weight: 700;
  font-size: inherit;
  border-bottom: 1px solid var(--c-text);
}

/* 結論内のリスト */
.block-conclusion .block-box-content ul {
  margin: 10px 0 0 18px;
  list-style: disc;
}

.block-conclusion .block-box-content li {
  margin: 4px 0;
  font-size: 14px;
}

/* モバイル最適化 */
@media (max-width: 767px) {
  .block-conclusion {
    margin: 22px 0;
    padding: 22px 20px;
  }

  .block-conclusion .block-box-title {
    padding: 0;
    font-size: 12.5px;
  }

  .block-conclusion .block-box-content {
    padding: 0;
    font-size: 14px;
  }
}