/* ==========================================================================
   shizuku media — Single Article Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Editorial Policy Notice
   -------------------------------------------------------------------------- */
.editorial-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 20px;
  padding: 10px 16px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
}

/* editorial-notice が art-header(左右padding 20px)の内側にある場合
   (店舗詳細・求人詳細など)、CSS既定の margin:0 20px が二重インセットになり
   幅が狭くなる。art-header内では左右marginを0にして整列させる。 */
.art-header .editorial-notice {
  margin-left: 0;
  margin-right: 0;
}

/* Section spacing for single page layout */
.art-header + .editorial-notice {
  margin-top: 0;
}

.editorial-notice + .summary-box {
  margin: 16px 20px 0;
}

.summary-box + .toc-box {
  margin-top: 16px;
}

.editorial-notice + .toc-box {
  margin-top: 16px;
}

.toc-box + .article-body {
  margin-top: 0;
}

.editorial-notice__text {
  font-size: 10px;
  color: var(--color-text-light);
  line-height: 1.5;
  flex: 1;
}

.editorial-notice__text strong {
  color: var(--color-text-muted);
}

.editorial-notice__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-cat-teal);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.editorial-notice__link svg {
  width: 12px;
  height: 12px;
}

/* --------------------------------------------------------------------------
   Article Header
   -------------------------------------------------------------------------- */
.art-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px 8px;
  background: var(--color-bg-white);
}

.art-header__h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.art-header__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.art-header__meta-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.art-header__cat-badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--gradient);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  flex-shrink: 0;
}

.art-header__dates {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 2px;
}

.art-header__dates span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-light);
}

.art-header__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.art-header__tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-cat-teal);
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 4px;
  background: #E4F7F9;
}

.art-header__eyecatch {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border-light);
}

.art-header__eyecatch img,
.art-header__eyecatch-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.art-header__eyecatch-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #E0E0E0;
  border-radius: 12px;
}

.art-header__lead {
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-dark);
  margin: 16px 0 0;
}

/* Breadcrumb footer variant */
.breadcrumb--footer {
  border-top: 1px solid var(--color-border-light);
  background: var(--color-bg-light);
}

/* --------------------------------------------------------------------------
   Profile Card (supervisor / collaborator)
   -------------------------------------------------------------------------- */
.profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #EEFBFC, #F5F0FC);
  border: 1px solid rgba(2, 193, 212, 0.1);
}

.profile-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF url('../images/noimage-icon.jpg') center / cover no-repeat;
  flex-shrink: 0;
}

.profile-card__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.profile-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-card__name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.profile-card__role {
  font-size: 11px;
  color: var(--color-text-muted);
}

.profile-card__label {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-cat-teal);
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   TOC Box
   -------------------------------------------------------------------------- */
.toc-box {
  margin: 20px 20px 0;
  padding: 20px;
  border-radius: 14px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
}

.toc-box__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.toc-box__icon {
  color: var(--color-cat-teal);
  flex-shrink: 0;
}

.toc-box__heading {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.toc-box__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: toc-counter;
  padding: 0;
  margin: 0;
}

.toc-box__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 13px;
  color: var(--color-text-body);
  line-height: 1.4;
  counter-increment: toc-counter;
}

/* Auto number badge via CSS counter (only when no JS-generated .toc-box__num) */
.toc-box__item::before {
  content: counter(toc-counter);
  min-width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* Hide CSS counter when JS-generated .toc-box__num exists */
.toc-box__item .toc-box__num ~ a { /* num span present = JS generated */ }
.toc-box__item:has(.toc-box__num)::before {
  display: none;
}

/* Sub-items don't get numbered */
.toc-box__item--sub::before {
  display: none;
}

.toc-box__item:last-child {
  border-bottom: none;
}

.toc-box__item a {
  color: var(--color-text-body);
  text-decoration: none;
  flex: 1;
}

.toc-box__item--sub {
  padding-left: 20px;
}

.toc-box__item--sub a {
  font-size: 12px;
  color: var(--color-text-muted);
}

.toc-box__num {
  min-width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
  padding: 0 4px;
}

.toc-box__num--sub {
  background: #E4F7F9;
  color: var(--color-cat-teal);
  font-size: 9px;
}

/* TOC collapsed: show only first 3 items */
.toc-box.is-collapsed .toc-box__item:nth-child(n+4) {
  display: none;
}

.toc-box__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 0 0;
  margin-top: 4px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --------------------------------------------------------------------------
   Article Body (the_content output)
   -------------------------------------------------------------------------- */
.article-body {
  padding: 24px 20px;
  background: var(--color-bg-white);
}

.article-body > *:first-child {
  margin-top: 0;
}

/* Reset WP auto-injected p/br inside custom components */
.alert p, .alert br,
.checklist p, .checklist br,
.emphasis p:empty, .emphasis br,
.recommendation p:empty, .recommendation br,
.cta-gradient p:empty, .cta-gradient br,
.cta-minimal p:empty, .cta-minimal br,
.star-rating-demo p, .star-rating-demo br,
.stat-callouts p, .stat-callouts br,
.product-card-article p:empty, .product-card-article br,
.comment-box p:empty, .comment-box br,
.before-after p:empty, .before-after br,
.stat-highlight p:empty, .stat-highlight br,
.scroll-table p:empty, .scroll-table br,
.two-col p:empty, .two-col br,
.faq-section > br, .faq-section > p:empty,
.footnotes p:empty, .footnotes br,
.newsletter p:empty, .newsletter br,
.anchor-links p:empty, .anchor-links br {
  display: none;
}

.article-body h2 {
  /* display:flex だと見出し内の <strong> 等が別flexアイテムになり余白・折返しが崩れるため block に。
     縦バーは ::before（絶対配置）で描画するため flex は不要。 */
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 24px 0 20px;
  padding-left: 14px;
  position: relative;
}

.article-body h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--gradient-vertical);
}

/* h2直後の画像: 見出しに密着してフル幅で表示 */
.article-body h2 + img,
.article-body h2 + figure,
.article-body h2 + .wp-block-image {
  margin-top: 0;
  margin-bottom: 16px;
  border-radius: 10px;
  overflow: hidden;
}

.article-body h2 + img,
.article-body h2 + figure img,
.article-body h2 + .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* h3直後の画像も同様 */
.article-body h3 + img,
.article-body h3 + figure,
.article-body h3 + .wp-block-image {
  margin-top: 4px;
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
}

.article-body h3 + img,
.article-body h3 + figure img,
.article-body h3 + .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.article-body h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 22px 0 12px;
  padding-bottom: 8px;
  position: relative;
  line-height: 1.4;
}

.article-body h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-teal), var(--color-purple), transparent);
}

.article-body h4 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 24px 0 10px;
  padding: 8px 12px;
  background: var(--color-bg-light);
  border-radius: 6px;
}

.article-body h5 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin: 20px 0 8px;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.article-body h6 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 16px 0 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-body p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-dark);
  line-height: 1.8;
  margin: 0 0 8px;
}

.article-body ul,
.article-body ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 20px;
  margin: 0 0 4px;
}

.article-body li {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-dark);
  line-height: 1.7;
}

.article-body ul li::marker {
  color: var(--color-cat-teal);
}

.article-body .summary-box ul,
.article-body .summary-box ul li {
  list-style: none;
  list-style-type: none;
}

.article-body .summary-box ul {
  padding: 16px;
  margin: 0;
}

.article-body .summary-box ul li {
  padding-left: 0;
}

.article-body .summary-box ul li::before {
  content: none !important;
  display: none !important;
}

.article-body .summary-box ul li::marker {
  content: none;
}

.article-body ol li::marker {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-cat-teal);
}

.article-body img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.article-body a {
  color: var(--color-cat-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-body a[class],
.article-body a.product-card-article__btn,
.article-body a.cta-gradient__btn,
.article-body a.cta-minimal__btn,
.article-body a.recommendation__btn,
.article-body a.anchor-link__text {
  text-decoration: none;
}

.article-body figure {
  margin: 20px 0;
}

.article-body figcaption {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-light);
  text-align: center;
  margin-top: 6px;
}

/* wpautop empty elements */
.article-body > br {
  display: none;
}

.article-body blockquote {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  margin: 24px 0;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #EEFBFC, #F5F0FC);
  position: relative;
  overflow: hidden;
}

.article-body blockquote::before {
  content: '\201C';
  position: absolute;
  top: 12px;
  left: 20px;
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.15;
}

.article-body blockquote::after {
  content: '\201D';
  position: absolute;
  bottom: 8px;
  right: 20px;
  font-family: var(--font-serif);
  font-size: 56px;
  line-height: 1;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.15;
}

.article-body blockquote p {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--color-text-dark);
  line-height: 1.8;
  margin: 0;
  padding: 0 8px;
  position: relative;
  z-index: 1;
}

.article-body blockquote cite {
  display: block;
  font-size: 12px;
  color: var(--color-text-light);
  font-style: normal;
  position: relative;
  z-index: 1;
  text-align: right;
}

.article-body figure.wp-block-table {
  margin: 20px 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--color-border-light) !important;
}

.article-body table,
.article-body .wp-block-table table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 13px;
  border: none !important;
}

.article-body th,
.article-body td,
.article-body .wp-block-table th,
.article-body .wp-block-table td {
  padding: 12px 14px;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid var(--color-border-light) !important;
}

.article-body th,
.article-body .wp-block-table thead th {
  background: var(--color-teal);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: #FFFFFF;
  border-bottom: none !important;
}

/* WP default border reset */
.article-body .wp-block-table,
.article-body .wp-block-table table,
.article-body .wp-block-table thead,
.article-body .wp-block-table tbody,
.article-body .wp-block-table tfoot,
.article-body .wp-block-table tr {
  border: none !important;
}

.article-body td {
  color: var(--color-text-dark);
  line-height: 1.5;
}

.article-body tbody tr:last-child td {
  border-bottom: none !important;
}

.article-body tbody tr:nth-child(even) td {
  background: #FAFBFC;
}

/* --------------------------------------------------------------------------
   Callout Boxes (info / warning / success / danger)
   -------------------------------------------------------------------------- */
/* 関連セラピスト: 名前カードグリッド（移行のプレーンリンクをカード化） */
.article-body .related-th-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.article-body .related-th-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 16px;
  border-radius: 10px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-primary);
  transition: box-shadow 0.15s ease;
}
.article-body .related-th-card::after {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--color-cat-teal);
  border-top: 2px solid var(--color-cat-teal);
  transform: rotate(45deg);
}
/* アイキャッチ付き関連カード */
.article-body .related-th-card__img {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
}
.article-body .related-th-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-body .related-th-card__name {
  flex: 1;
  min-width: 0;
}
.article-body .related-th-card:active {
  box-shadow: var(--shadow-sm);
}

.callout-box {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  margin: 18px 0;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
}
/* 移行コンテンツ: アイコン無しで<p>を直挿しするcalloutは縦積み＋余白整理 */
.callout-box:has(> p) {
  flex-direction: column;
  gap: 8px;
}
.callout-box > p {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-dark);
}
.callout-box > p a {
  color: var(--color-cat-teal);
  font-weight: 600;
}

.callout-box__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.callout-box__text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-dark);
}

.callout-box--info {
  background: var(--color-info-bg);
  border: 1px solid #B2EBF2;
}
.callout-box--info .callout-box__icon { color: var(--color-info); }

.callout-box--warning {
  background: var(--color-warning-bg);
  border: 1px solid #FFE082;
}
.callout-box--warning .callout-box__icon { color: var(--color-warning); }

.callout-box--success {
  background: var(--color-success-bg);
  border: 1px solid #A5D6A7;
}
.callout-box--success .callout-box__icon { color: var(--color-success); }

.callout-box--danger {
  background: var(--color-danger-bg);
  border: 1px solid #EF9A9A;
}
.callout-box--danger .callout-box__icon { color: var(--color-danger); }

/* callout-box がタイトル+リストの構成のとき: 縦積み */
.callout-box:has(.callout-box__title) {
  flex-direction: column;
  gap: 0;
}

/* --- callout-box with title + body (記事内リンク / CTA) --- */
.callout-box__title {
  font-family: var(--font-display, 'Noto Sans JP', sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-dark, #1F2937);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.callout-box__title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background: var(--color-teal, #0D9488);
  border-radius: 2px;
  flex-shrink: 0;
}
.callout-box__body {
  font-size: 13px;
  line-height: 1.7;
}
.callout-box--info .callout-box__title {
  color: var(--color-teal, #0D9488);
}

/* callout-box 内のリンクリスト */
.callout-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.callout-box li {
  font-size: 13px;
  line-height: 1.6;
  padding-left: 16px;
  position: relative;
}
.callout-box li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--color-teal, #0D9488);
  font-size: 12px;
}
.callout-box a {
  color: var(--color-teal, #0D9488);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.callout-box a:hover {
  color: #047857;
  text-decoration: underline;
}

/* --- CTA ボタン（記事内汎用） --- */
.article-body .cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--color-teal, #0D9488) 0%, #047857 100%);
  color: #fff;
  font-family: var(--font-display, 'Noto Sans JP', sans-serif);
  font-weight: 700;
  font-size: 14px;
  border: none;
  border-radius: 50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
}
.article-body .cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
  color: #fff;
}
.article-body .cta-btn:active {
  transform: translateY(0);
}

/* callout-box 内の CTA ボタン中央寄せ */
.callout-box .cta-btn {
  display: flex;
  width: fit-content;
  margin: 12px auto 4px;
}

/* --------------------------------------------------------------------------
   Summary Box
   -------------------------------------------------------------------------- */
.summary-box {
  border-radius: 12px;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  margin: 16px 20px;
}

.summary-box__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border-light);
}

.summary-box__icon {
  color: var(--color-cat-teal);
  flex-shrink: 0;
}

.summary-box__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.summary-box__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.summary-box__item {
  font-size: 13px;
  color: var(--color-text-dark);
  line-height: 1.7;
  padding-left: 16px;
  position: relative;
}

.summary-box__item::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-cat-teal);
  font-weight: 700;
}

/* Summary box — template variant (single.php header) */
.summary-box__header span {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.summary-box__divider {
  border: none;
  height: 1px;
  background: var(--color-border-light);
  margin: 0;
}

/* divider がある場合、header の border-bottom を消す */
.summary-box__header + .summary-box__divider {
  margin-top: -1px;
}

.summary-box__text {
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-primary);
  margin: 0;
}

.summary-box__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-cat-teal);
  flex-shrink: 0;
  margin-top: 7px;
}


.summary-box__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text-dark);
  line-height: 1.7;
}

.summary-box__list li + li {
  margin-top: 0;
}

.summary-box__conclusion {
  padding: 12px 16px;
  background: rgba(2, 193, 212, 0.06);
  border-top: 1px solid var(--color-border-light);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.summary-box__conclusion-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-cat-teal);
  white-space: nowrap;
  padding-top: 1px;
}

.summary-box__conclusion p {
  font-size: 13px;
  color: var(--color-text-dark);
  line-height: 1.7;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Stat Callout
   -------------------------------------------------------------------------- */
.stat-callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 24px;
  border-radius: 12px;
  background: var(--color-bg-light);
  text-align: center;
  margin: 16px 0;
}

.stat-callout__num {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 700;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-callout__label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
}

.stat-callout__source {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   Step Cards
   -------------------------------------------------------------------------- */
.steps-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 0;
}

.step-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.step-card__num {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: var(--gradient-vertical);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
}

.step-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-card__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.step-card__desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Steps (timeline style)
   -------------------------------------------------------------------------- */
.steps {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
}

.step {
  display: flex;
  gap: 14px;
}

.step__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.step__circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
}

.step__line {
  width: 2px;
  flex: 1;
  background: var(--color-border-light);
}

.step__body {
  padding-bottom: 20px;
  flex: 1;
}

.step:last-child .step__body {
  padding-bottom: 0;
}

.step__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 28px;
}

.step__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Balloon (conversation)
   -------------------------------------------------------------------------- */
.balloon-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0;
}

.balloon-l,
.balloon-r {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 16px;
}

/* article-body内で連続するballoonの余白調整 */
.article-body .balloon-l + .balloon-l,
.article-body .balloon-l + .balloon-r,
.article-body .balloon-r + .balloon-l,
.article-body .balloon-r + .balloon-r {
  margin-top: 0;
}

.balloon-r {
  flex-direction: row-reverse;
}

.balloon-l__avatar,
.balloon-r__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF url('../images/noimage-icon.jpg') center / cover no-repeat;
  flex-shrink: 0;
}

/* 移行コンテンツのアイコン（figure.balloon-l__icon > img）対応。__avatar と同等の丸アイコンに。 */
.balloon-l__icon,
.balloon-r__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin: 0;
}
.balloon-l__icon img,
.balloon-r__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 吹き出し内の段落の余白リセット（<p>直挿し対応） */
.balloon-l__bubble > :first-child,
.balloon-r__bubble > :first-child { margin-top: 0; }
.balloon-l__bubble > :last-child,
.balloon-r__bubble > :last-child { margin-bottom: 0; }

.balloon-l__speaker,
.balloon-r__speaker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.balloon-l__name,
.balloon-r__name {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-light);
  text-align: center;
  max-width: 48px;
  line-height: 1.3;
}

.balloon-l__bubble,
.balloon-r__bubble {
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 13px;
  color: var(--color-text-dark);
  line-height: 1.7;
  max-width: 86%;
}

.balloon-l__bubble {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  border-top-left-radius: 4px;
}

.balloon-r__bubble {
  background: linear-gradient(135deg, #EEFBFC, #F5F0FC);
  border-top-right-radius: 4px;
}

/* --------------------------------------------------------------------------
   Pros / Cons
   -------------------------------------------------------------------------- */
.pc-row {
  display: flex;
  gap: 12px;
  margin: 16px 0;
}

.pc-card {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pc-card--pros {
  background: #F0FAF0;
  border: 1px solid #C8E6C9;
}

.pc-card--cons {
  background: #FFF5F5;
  border: 1px solid #FFCDD2;
}

.pc-card__title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pc-card__title-text {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}

.pc-card__title-text--pros { color: #2E7D32; }
.pc-card__title-text--cons { color: #C62828; }

.pc-card__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pc-card__item {
  font-size: 12px;
  color: var(--color-text-body);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Definition List
   -------------------------------------------------------------------------- */
.def-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 16px 0;
  border-radius: 12px;
  border: 1px solid var(--color-border-light);
  overflow: hidden;
}

.def-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border-light);
}

.def-item:last-child {
  border-bottom: none;
}

.def-item__term {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.def-item__desc {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 16px 0;
  padding-left: 16px;
  border-left: 2px solid var(--color-border-light);
}

.timeline__item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  position: relative;
}

.timeline__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: -22px;
  margin-top: 3px;
}

.timeline__dot--teal { background: var(--color-cat-teal); }
.timeline__dot--mid { background: #8E63B8; }
.timeline__dot--purple { background: #D1A7EB; }

.timeline__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline__time {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
}

.timeline__time--teal { color: var(--color-cat-teal); }
.timeline__time--mid { color: #8E63B8; }
.timeline__time--purple { color: #D1A7EB; }

.timeline__text {
  font-size: 13px;
  color: var(--color-text-dark);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Link Card (internal link)
   -------------------------------------------------------------------------- */
.link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-white);
  text-decoration: none;
  margin: 16px 0;
  transition: box-shadow 0.15s ease;
}

.link-card:active {
  box-shadow: var(--shadow-sm);
}

.link-card__thumb {
  width: 80px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #E0E0E0;
  flex-shrink: 0;
  overflow: hidden;
}

.link-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.link-card__label {
  font-size: 10px;
  font-weight: 600;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.link-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Supervisor Comment
   -------------------------------------------------------------------------- */
.sup-comment {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #EEFBFC, #F5F0FC);
  margin: 16px 0;
}

.sup-comment__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF url('../images/noimage-icon.jpg') center / cover no-repeat;
  flex-shrink: 0;
}

.sup-comment__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sup-comment__name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.sup-comment__text {
  font-size: 13px;
  color: var(--color-text-dark);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Supervisor Detail (end of article)
   -------------------------------------------------------------------------- */
.sup-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px;
  background: var(--color-bg-light);
}

.sup-detail__label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.sup-card {
  padding: 20px;
  border-radius: 14px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sup-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sup-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #FFFFFF url('../images/noimage-icon.jpg') center / cover no-repeat;
  flex-shrink: 0;
}

.sup-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sup-card__name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.sup-card__role {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-cat-teal);
}

.sup-card__bio {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Helpful + SNS Share
   -------------------------------------------------------------------------- */
.helpful-share {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 20px;
  background: var(--color-bg-white);
}

.helpful-share__q {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.helpful-share__btns {
  display: flex;
  gap: 12px;
}

.helpful-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-white);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: border-color 0.15s ease;
}

.helpful-btn--yes:active {
  border-color: var(--color-cat-teal);
  color: var(--color-cat-teal);
}

.helpful-btn--no {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-white);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: border-color 0.15s ease;
}

.helpful-btn--no:active {
  border-color: var(--color-text-light);
  color: var(--color-text-body);
}

.sns-share__btns {
  display: flex;
  gap: 8px;
}

.sns-share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
}

.sns-share__btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: #FFFFFF;
}

.sns-share__btn--copy svg {
  fill: none;
  stroke: var(--color-text-muted);
}

.sns-share__btn--x { background: #000000; }
.sns-share__btn--instagram {
  background: linear-gradient(135deg, #833AB4, #FD1D1D, #F77737);
}
.sns-share__btn--facebook { background: #1877F2; }
.sns-share__btn--line { background: #06C755; }
.sns-share__btn--threads { background: #000000; }
.sns-share__btn--bluesky { background: #0085FF; }
.sns-share__btn--copy {
  background: var(--color-bg-light);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-light);
}

/* --------------------------------------------------------------------------
   Related Articles
   -------------------------------------------------------------------------- */
.rel-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 20px;
  background: var(--color-bg-light);
}

.rel-section__label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.rel-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rel-card {
  display: flex;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  text-decoration: none;
  transition: box-shadow 0.15s ease;
}

.rel-card:active {
  box-shadow: var(--shadow-sm);
}

.rel-card__img {
  position: relative;
  width: 146px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #E0E0E0 url('../images/noimage-rect.jpg') center / cover no-repeat;
  flex-shrink: 0;
  overflow: hidden;
}

/* --- PR関連記事カード（タイアップ枠）: 法令対応のPRバッジ --- */
.rel-card__pr {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(90deg, #02C1D4, #D1A7EB);
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* --- メディア型カード: 上部に幅いっぱいの16:9画像を配置（店舗一覧カード等） --- */
.rel-card--media {
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.rel-card--media .rel-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}
.rel-card--media .rel-card__body {
  gap: 4px;
  padding: 12px 14px 14px;
}

.rel-card__img img,
.rel-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rel-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.rel-card__cat {
  font-size: 10px;
  font-weight: 700;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rel-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.5;
}

/* --- リッチ店舗カード本文（視認性向上: 明確な情報階層） --- */
.rel-card--media .rel-card__body {
  gap: 7px;
  padding: 12px 14px 14px;
}
.rel-card--media .rel-card__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
.rel-card__concept {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rel-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.rel-card__spec {
  font-size: 10px;
  color: var(--color-text-muted);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  padding: 2px 7px;
  line-height: 1.4;
}
.rel-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 1px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-light);
}
.rel-card__price {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-cat-teal);
  letter-spacing: -0.01em;
}
.rel-card__price-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-light);
}
.rel-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.rel-card__badge {
  font-size: 10px;
  color: var(--color-cat-teal);
  background: rgba(2, 193, 212, 0.08);
  border-radius: 3px;
  padding: 1px 7px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Comp Table (comparison)
   -------------------------------------------------------------------------- */
.comp-table {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  margin: 16px 0;
}

.comp-table__row {
  display: flex;
  border-top: 1px solid var(--color-border-light);
}

.comp-table__row:first-child {
  border-top: none;
}

.comp-table__row--head {
  background: #F0F8FA;
}

.comp-table__row--even {
  background: #F8F8FA;
}

.comp-table__cell {
  flex: 1;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--color-text-dark);
}

.comp-table__cell--head {
  font-weight: 700;
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   Data Table
   -------------------------------------------------------------------------- */
.data-table {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  margin: 16px 0;
}

.data-table__row {
  display: flex;
  border-top: 1px solid var(--color-border-light);
}

.data-table__row:first-child {
  border-top: none;
}

.data-table__row--head {
  background: #F0F8FA;
}

.data-table__row--even {
  background: #F8F8FA;
}

.data-table__cell {
  flex: 1;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--color-text-dark);
}

.data-table__cell--head {
  font-weight: 700;
  color: var(--color-text-primary);
}

.table-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   FAQ Section (in-article) — dl/dt/dd inspired
   -------------------------------------------------------------------------- */
.article-body .faq-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-white);
  transition: box-shadow 0.15s ease;
}

.faq-item.is-open {
  box-shadow: var(--shadow-sm);
}

/* .faq-section ラッパが無い移行FAQ（h2直後に .faq-item 直置き）の項目間余白＆上下余白 */
.article-body .faq-item + .faq-item {
  margin-top: 10px;
}
.article-body > .faq-item:first-of-type,
.article-body .faq-item {
  margin-bottom: 0;
}

/* 移行コンテンツのレガシーFAQ（.faq-item > h3.faq-item__question + .faq-item__answer）対応。
   テーマの .faq-item__q/__a と異なるクラス名で未スタイルだったため、Q/Aバッジ付きで整形。 */
.article-body .faq-item__question,
.article-body .faq-item > h3 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 14px 16px;
  font-family: var(--font-base, inherit);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.6;
  position: static;
  border: none;
  cursor: pointer;
}
/* h3デフォルトのグラデ下線(::after)を打ち消す（faq質問はチェブロンを使う） */
.article-body h3.faq-item__question,
.article-body .faq-item > h3 {
  padding-bottom: 14px;
}
.article-body .faq-item__question::before,
.article-body .faq-item > h3::before {
  content: "Q";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--gradient);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 開閉シェブロン（右端）。.is-open で反転 */
.article-body .faq-item__question::after,
.article-body .faq-item > h3::after {
  content: "";
  /* position を static に固定。低詳細度の .article-body h3::after（position:absolute; bottom:0; left:0）
     から position を継承するとチェブロンがページ左下へ脱出するため明示リセット。 */
  position: static;
  margin-left: auto;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-right: 2px solid var(--color-text-light);
  border-bottom: 2px solid var(--color-text-light);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.article-body .faq-item.is-open .faq-item__question::after,
.article-body .faq-item.is-open > h3::after {
  transform: rotate(-135deg);
  margin-top: 9px;
}
/* アコーディオン: 回答は既定で非表示、.is-open で表示。
   レガシー移行FAQの回答ラッパ（素の <div> / 直下 <p>）も .faq-item__answer と同一に扱う。 */
.article-body .faq-item__answer,
.article-body .faq-item > h3 + div:not(.faq-item__answer),
.article-body .faq-item > h3 + p {
  display: none;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 0 16px 14px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.8;
}
.article-body .faq-item.is-open .faq-item__answer,
.article-body .faq-item.is-open > h3 + div:not(.faq-item__answer),
.article-body .faq-item.is-open > h3 + p {
  display: flex;
}
.article-body .faq-item__answer::before,
.article-body .faq-item > h3 + div:not(.faq-item__answer)::before,
.article-body .faq-item > h3 + p::before {
  content: "A";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--color-bg-light);
  color: var(--color-cat-teal);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-body .faq-item__answer > *,
.article-body .faq-item__answer p,
.article-body .faq-item > h3 + div:not(.faq-item__answer) > *,
.article-body .faq-item > h3 + div:not(.faq-item__answer) p {
  margin: 0;
}

/* 関連リンク列（| 区切りの <p> をチップ表示に）。例: MBTI各タイプのナビ */
.article-body .inline-linknav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}
.article-body .inline-linknav a {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-cat-teal, #02C1D4);
  background: #f1fbfc;
  border: 1px solid #c7eef2;
  border-radius: 999px;
  padding: 6px 13px;
  text-decoration: none;
}
.article-body .inline-linknav a:hover {
  background: var(--gradient, linear-gradient(90deg, #02C1D4, #D1A7EB));
  color: #FFFFFF;
  border-color: transparent;
}

/* 関連記事リンクリスト（「関連記事」見出し直後の ul をカード列に統一） */
.article-body ul.related-linklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 12px 0;
}
.article-body ul.related-linklist li {
  position: relative;
  padding: 0;
}
.article-body ul.related-linklist li::before {
  content: none;
}
.article-body ul.related-linklist li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 40px 13px 16px;
  position: relative;
  border: 1px solid var(--color-border-light, #e8e8e8);
  border-radius: 10px;
  background: var(--color-bg-white, #fff);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #1A1A1A);
  text-decoration: none;
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.article-body ul.related-linklist li a::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: var(--gradient, linear-gradient(135deg, #02C1D4, #D1A7EB));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat;
}
.article-body ul.related-linklist li a::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid var(--color-cat-teal, #02C1D4);
  border-bottom: 2px solid var(--color-cat-teal, #02C1D4);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.article-body ul.related-linklist li a:hover {
  border-color: var(--color-cat-teal, #02C1D4);
  box-shadow: 0 4px 14px rgba(2, 193, 212, 0.14);
  background: #fbfeff;
}
.article-body ul.related-linklist li a:hover::after {
  transform: rotate(-45deg) translate(2px, 2px);
}

.faq-item__q {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}

.faq-item__q-label {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
}

.faq-item__q-text {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.faq-item__q-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--color-text-light);
  transition: transform 0.25s ease;
}

.faq-item.is-open .faq-item__q-icon {
  transform: rotate(180deg);
}

.faq-item__a {
  display: none;
}

.faq-item.is-open .faq-item__a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 0 16px 16px;
  border-top: 1px solid var(--color-border-light);
  padding-top: 14px;
}

.faq-item__a-label {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #E4F7F9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-cat-teal);
  flex-shrink: 0;
}

.faq-item__a-text {
  font-size: 12px;
  color: var(--color-text-body);
  line-height: 1.8;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Article UL / OL enhanced
   -------------------------------------------------------------------------- */
.article-body ul {
  list-style: none;
  padding-left: 0;
}

.article-body ul li {
  position: relative;
  padding-left: 18px;
}

.article-body ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gradient);
}

.article-body ol {
  list-style: none;
  padding-left: 0;
  counter-reset: ol-counter;
}

.article-body ol li {
  position: relative;
  padding-left: 32px;
  counter-increment: ol-counter;
}

.article-body ol li::before {
  content: counter(ol-counter);
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Video Embed (YouTube / iframe)
   -------------------------------------------------------------------------- */
.article-body .wp-block-embed {
  margin: 24px 0;
}

.article-body .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.article-body .wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Progress Bar
   -------------------------------------------------------------------------- */
.progress-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 20px 0;
  padding: 20px;
  border-radius: 14px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
}

.progress-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.progress-item__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.progress-item__value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.progress-item__bar {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--color-bg-light);
  overflow: hidden;
}

.progress-item__fill {
  height: 100%;
  border-radius: 4px;
  background: var(--gradient);
  transition: width 0.8s ease;
}

/* --------------------------------------------------------------------------
   Star Rating
   -------------------------------------------------------------------------- */
.star-rating-demo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
  padding: 20px;
  border-radius: 14px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
}

.star-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.star-rating p {
  margin: 0;
  display: inline;
}

.star-rating__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 72px;
}

.star-rating__stars {
  font-size: 14px;
  color: var(--color-star-gold);
  letter-spacing: 1px;
}

.star-rating__score {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.star-rating__count {
  font-size: 11px;
  color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   Emphasis Boxes (4 variants)
   -------------------------------------------------------------------------- */
.emphasis {
  display: block;
  padding: 14px 16px;
  border-radius: 10px;
  margin: 16px 0;
}

.emphasis p { margin: 0; }

.emphasis__icon,
.emphasis > span:first-child:not(.emphasis__icon-svg) {
  display: none;
}

.emphasis__icon img.emoji {
  display: none;
}

.emphasis__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.emphasis__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}

.emphasis__text {
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}

.emphasis__icon-svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: none;
}

.emphasis--important {
  background: #EEFBFC;
  border: 1px solid rgba(2, 193, 212, 0.2);
}
.emphasis--important .emphasis__title { color: var(--color-cat-teal); }
.emphasis--important .emphasis__text { color: var(--color-text-dark); }
.emphasis--important .emphasis__icon-svg { color: var(--color-cat-teal); }

.emphasis--caution {
  background: #FFF8E1;
  border: 1px solid rgba(245, 158, 11, 0.2);
}
.emphasis--caution .emphasis__title { color: var(--color-warning); }
.emphasis--caution .emphasis__text { color: var(--color-text-dark); }
.emphasis--caution .emphasis__icon-svg { color: var(--color-warning); }

.emphasis--didyouknow {
  background: #F3EAFA;
  border: 1px solid rgba(155, 95, 191, 0.2);
}
.emphasis--didyouknow .emphasis__title { color: var(--color-cat-purple); }
.emphasis--didyouknow .emphasis__text { color: var(--color-text-dark); }
.emphasis--didyouknow .emphasis__icon-svg { color: var(--color-cat-purple); }

.emphasis--expert {
  background: linear-gradient(135deg, #EEFBFC, #F5F0FC);
  border: 1px solid rgba(2, 193, 212, 0.15);
}
.emphasis--expert .emphasis__title { color: var(--color-cat-teal); }
.emphasis--expert .emphasis__text { color: var(--color-text-dark); }
.emphasis--expert .emphasis__icon-svg { color: var(--color-cat-teal); }

/* --------------------------------------------------------------------------
   Before / After
   -------------------------------------------------------------------------- */
.before-after {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 20px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--color-border-light);
}

.before-after__item,
.before-after__box {
  padding: 16px 18px;
}

.before-after__item--before,
.before-after__box--before {
  background: #FFF5F5;
  border-bottom: 1px solid var(--color-border-light);
}

.before-after__item--after,
.before-after__box--after {
  background: #F0FAF0;
}

.before-after__label,
.before-after__tag {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

.before-after__item--before .before-after__label,
.before-after__box--before .before-after__tag {
  color: #C62828;
}

.before-after__item--after .before-after__label,
.before-after__box--after .before-after__tag {
  color: #2E7D32;
}

.before-after__text {
  font-size: 13px;
  color: var(--color-text-dark);
  line-height: 1.7;
  margin: 0;
}

.before-after__box p {
  font-size: 13px;
  color: var(--color-text-dark);
  line-height: 1.7;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Dividers
   -------------------------------------------------------------------------- */
.divider {
  margin: 24px 0;
}

.divider--gradient {
  height: 2px;
  background: linear-gradient(90deg, var(--color-teal), var(--color-purple), transparent);
  border-radius: 1px;
}

.divider--dots {
  border: none;
  text-align: center;
  height: auto;
  line-height: 1;
}

.divider--dots::before {
  content: '・・・';
  font-size: 18px;
  letter-spacing: 8px;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --------------------------------------------------------------------------
   Alert Boxes (4 variants with left bar)
   -------------------------------------------------------------------------- */
.alert {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  margin: 16px 0;
}

.alert__bar { display: none; }

.alert__body {
  display: flex;
  gap: 10px;
  flex: 1;
  align-items: flex-start;
}

.alert__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.alert__title {
  font-size: 13px;
  font-weight: 700;
}

.alert__text {
  font-size: 12px;
  color: var(--color-text-body);
  line-height: 1.6;
}

.alert--info { background: var(--color-info-bg); border: 1px solid rgba(2, 193, 212, 0.2); }
.alert--info .alert__icon { color: var(--color-info); }
.alert--info .alert__title { color: var(--color-info); }

.alert--warn { background: var(--color-warning-bg); border: 1px solid rgba(245, 158, 11, 0.2); }
.alert--warn .alert__icon { color: var(--color-warning); }
.alert--warn .alert__title { color: var(--color-warning); }

.alert--success { background: var(--color-success-bg); border: 1px solid rgba(34, 197, 94, 0.2); }
.alert--success .alert__icon { color: var(--color-success); }
.alert--success .alert__title { color: var(--color-success); }

.alert--danger { background: var(--color-danger-bg); border: 1px solid rgba(239, 68, 68, 0.2); }
.alert--danger .alert__icon { color: var(--color-danger); }
.alert--danger .alert__title { color: var(--color-danger); }

/* --------------------------------------------------------------------------
   Checklist
   -------------------------------------------------------------------------- */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0;
}

.checklist__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.checklist__box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.checklist__box--checked {
  background: var(--gradient);
}

.checklist__box--checked svg {
  width: 10px;
  height: 10px;
  color: #FFFFFF;
}

.checklist__box--unchecked {
  background: var(--color-bg-light);
  border: 1.5px solid var(--color-border);
}

.checklist__text {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.checklist__text--unchecked {
  color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   Two-Column Text
   -------------------------------------------------------------------------- */
.two-col {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}

.two-col__card {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.two-col__card p {
  margin: 0;
}

.two-col__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
  order: 0;
}

.two-col__bar {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  order: 1;
  margin: 3px 0 8px;
}

.two-col__bar--teal { background: var(--color-cat-teal); }
.two-col__bar--purple { background: var(--color-cat-purple); }

.two-col__text {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.6;
  order: 2;
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   Stat Callouts (inline row)
   -------------------------------------------------------------------------- */
.stat-callouts {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}

.stat-callouts .stat-callout {
  flex: 1;
  padding: 14px 8px;
  border-radius: 12px;
  text-align: center;
}

.stat-callouts .stat-callout p {
  margin: 0;
}

.stat-callouts .stat-callout--teal { background: #EEFBFC; }
.stat-callouts .stat-callout--purple { background: #F5F0FC; }
.stat-callouts .stat-callout--gray { background: var(--color-bg-light); }

.stat-callouts .stat-callout__num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  display: block;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-callouts .stat-callout__label {
  font-size: 11px;
  color: var(--color-text-muted);
  display: block;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Product Card (in-article)
   -------------------------------------------------------------------------- */
.product-card-article {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-white);
  margin: 20px 0;
}

.product-card-article__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-light);
}

.product-card-article__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.product-card-article__body p {
  margin: 0;
}

.product-card-article__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.product-card-article__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.product-card-article__price {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.product-card-article__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--gradient) !important;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Recommendation Box
   -------------------------------------------------------------------------- */
.recommendation {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #EEFBFC, #F5F0FC);
  border: 1px solid rgba(2, 193, 212, 0.15);
  margin: 20px 0;
  padding: 18px;
}

.recommendation__bar { display: none; }

.recommendation__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.recommendation__body p { margin: 0; }

.recommendation__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-star-gold);
}

.recommendation__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.recommendation__desc {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.recommendation__btn {
  display: inline-flex;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-cat-teal);
  text-decoration: none;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   CTA Gradient (rich)
   -------------------------------------------------------------------------- */
.cta-gradient {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, #EEFBFC 0%, #F5F0FC 50%, #EEFBFC 100%);
  border: 1px solid rgba(2, 193, 212, 0.15);
  text-align: center;
  margin: 24px 0;
}

.cta-gradient__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin: 0;
}

.cta-gradient__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

.cta-gradient__btn {
  display: inline-flex;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--gradient) !important;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-decoration: none;
  margin-top: 4px;
}

.cta-gradient p { margin: 0; }

/* --------------------------------------------------------------------------
   CTA Minimal
   -------------------------------------------------------------------------- */
.cta-minimal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: 14px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  margin: 20px 0;
}

.cta-minimal p { margin: 0; }

.cta-minimal__badge {
  font-size: 10px;
  font-weight: 700;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-minimal__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.cta-minimal__desc {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.cta-minimal__btn {
  display: inline-flex;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-cat-teal);
  text-decoration: none;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Anchor Links
   -------------------------------------------------------------------------- */
.anchor-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0;
}

.anchor-link {
  display: flex;
  align-items: center;
  gap: 4px;
}

.anchor-link__prefix {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.anchor-link__text {
  font-size: 12px;
  color: var(--color-cat-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.anchor-link__icon {
  width: 12px;
  height: 12px;
  color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   Comment Cards
   -------------------------------------------------------------------------- */
.comment-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0;
}

.comment-card {
  padding: 16px;
  border-radius: 12px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light);
}

.comment-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.comment-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-light) url('../images/noimage-icon.jpg') center / cover no-repeat;
  flex-shrink: 0;
}

.comment-card__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.comment-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.comment-card__date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-light);
}

.comment-card__body {
  font-size: 13px;
  color: var(--color-text-dark);
  line-height: 1.7;
  margin: 0;
}

.comment-card__actions {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}

.comment-card__action {
  font-size: 11px;
  color: var(--color-text-light);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Footnotes
   -------------------------------------------------------------------------- */
.footnotes {
  margin: 24px 0;
}

.footnotes__line {
  height: 1px;
  background: var(--color-border-light);
  margin-bottom: 12px;
}

.footnotes__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footnote {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.footnote__num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-cat-teal);
  min-width: 16px;
}

.footnote__text {
  font-size: 11px;
  color: var(--color-text-light);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Newsletter Signup
   -------------------------------------------------------------------------- */
.newsletter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #EEFBFC, #F5F0FC);
  text-align: center;
  margin: 24px 0;
}

.newsletter__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.newsletter__desc {
  font-size: 12px;
  color: var(--color-text-muted);
}

.newsletter__form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  margin-top: 4px;
}

.newsletter__input {
  flex: 1;
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-white);
  font-size: 13px;
  outline: none;
}

.newsletter__input:focus {
  border-color: var(--color-cat-teal);
}

.newsletter__btn {
  height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--gradient);
  border: none;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.newsletter__note {
  font-size: 10px;
  color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   Stat Highlight
   -------------------------------------------------------------------------- */
.stat-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 24px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, #EEFBFC, #F5F0FC);
  border: 1px solid rgba(2, 193, 212, 0.15);
  text-align: center;
  margin: 20px 0;
}

.stat-highlight__num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.stat-highlight__desc {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.stat-highlight__source {
  font-size: 10px;
  color: var(--color-text-light);
  margin-top: 4px;
}


/* --------------------------------------------------------------------------
   Scroll Table
   -------------------------------------------------------------------------- */
.scroll-table {
  margin: 20px 0;
}

.scroll-table__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 10px;
}

.scroll-table__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--color-border-light);
}

.scroll-table__table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

.scroll-table__table thead {
  background: var(--color-teal);
}

.scroll-table__table th {
  padding: 10px 14px;
  font-weight: 600;
  color: #FFFFFF;
  text-align: left;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

.scroll-table__table td {
  padding: 10px 14px;
  color: var(--color-text-dark);
  border: none !important;
  border-bottom: 1px solid var(--color-border-light) !important;
}

.scroll-table__table tbody tr:last-child td {
  border-bottom: none !important;
}

.scroll-table__label {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   Text Highlight — Scroll-triggered animated underline/background
   -------------------------------------------------------------------------- */
.article-body .hl {
  font-weight: 700;
  background: linear-gradient(90deg, rgba(2, 193, 212, 0.13) 0%, rgba(2, 193, 212, 0.13) 100%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left center;
  padding: 1px 5px;
  margin: 0 1px;
  border-radius: 3px;
  display: inline;
  transition: background-size 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.article-body .hl.is-active {
  background-size: 100% 100%;
}

/* Underline variant — thinner highlight bar at bottom */
.article-body .hl--line {
  background: linear-gradient(90deg, rgba(2, 193, 212, 0.35) 0%, rgba(2, 193, 212, 0.35) 100%);
  background-size: 0% 40%;
  background-repeat: no-repeat;
  background-position: left bottom;
  padding: 0 2px;
  border-radius: 0;
}
.article-body .hl--line.is-active {
  background-size: 100% 40%;
}

/* ==========================================================================
   Article components — 移行記事コンポーネント（実マークアップ準拠で補完）
   highlight / step-flow / faq / data-table / link-cards / sv-comment / balloon
   ========================================================================== */

/* --- Highlight（注記ボックス：icon + text） --- */
.article-body .highlight {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  margin: 18px 0;
  background: var(--color-bg-teal-tint); /* modifier無し時の既定 */
}
.article-body .highlight--info { background: var(--color-info-bg); }
.article-body .highlight--warning { background: var(--color-warning-bg); }
.article-body .highlight--success { background: var(--color-success-bg); }
.article-body .highlight--danger { background: var(--color-danger-bg); }
.article-body .highlight__icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--color-teal); }
.article-body .highlight--info .highlight__icon { color: var(--color-info); }
.article-body .highlight--warning .highlight__icon { color: var(--color-warning); }
.article-body .highlight--success .highlight__icon { color: var(--color-success); }
.article-body .highlight--danger .highlight__icon { color: var(--color-danger); }
.article-body .highlight__text { margin: 0; font-size: 12px; color: var(--color-text-dark); line-height: 1.7; }

/* --- Step Flow（番号付き手順/要因） --- */
.article-body .step-flow { display: flex; flex-direction: column; gap: 16px; margin: 18px 0; }
.article-body .step-flow__item { display: flex; gap: 12px; }
.article-body .step-flow__num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-teal); color: #FFFFFF;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.article-body .step-flow__body { flex: 1; }
.article-body .step-flow__title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.article-body .step-flow__text { margin: 4px 0 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.6; }

/* --- FAQ（記事内・他ページFAQと統一感のあるカード） --- */
.article-body .faq-section { display: flex; flex-direction: column; gap: 10px; }
.article-body .faq-card {
  padding: 14px 16px; border-radius: 12px;
  background: var(--color-bg-white); border: 1px solid var(--color-border-light);
  margin: 0;
}
.article-body .faq-section .faq-card { margin: 0; }
.article-body .faq-card__q { font-size: 13px; font-weight: 700; color: var(--color-text-primary); line-height: 1.5; }
.article-body .faq-card__a {
  margin: 8px 0 0; padding-top: 8px;
  border-top: 1px solid var(--color-border-light);
  font-size: 12px; color: var(--color-text-muted); line-height: 1.7;
}

/* --- Data Table（__head + __row, セルは素のspan） --- */
.article-body .data-table { width: 100%; border-radius: 10px; border: 1px solid var(--color-border-light); overflow: hidden; margin: 18px 0; }
.article-body .data-table__head { display: flex; background: linear-gradient(90deg, var(--color-teal), #5DD8E0); }
.article-body .data-table__head > span { flex: 1; padding: 10px 12px; font-size: 12px; font-weight: 700; color: #FFFFFF; }
.article-body .data-table__row { display: flex; border-top: 1px solid var(--color-border-light); }
.article-body .data-table__row:nth-child(even) { background: var(--color-bg-light); }
.article-body .data-table__row > span { flex: 1; padding: 10px 12px; font-size: 12px; color: var(--color-text-dark); line-height: 1.5; }
.article-body .data-table__row > span:first-child { font-weight: 600; color: var(--color-text-primary); }

/* --- Link Cards（icon + title + arrow の横並び） --- */
.article-body .link-cards { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.article-body .link-cards .link-card { margin: 0; }
.article-body .link-card__icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-teal); }
.article-body .link-card__title { flex: 1; font-size: 13px; font-weight: 600; color: var(--color-text-primary); line-height: 1.4; }
.article-body .link-card__arrow { width: 16px; height: 16px; flex-shrink: 0; margin-left: auto; color: var(--color-text-light); }

/* --- Supervisor Comment（監修者: avatar + bubble の横並び） --- */
.article-body .sv-comment { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; }
.article-body .sv-comment__avatar { width: 44px; height: 44px; border-radius: 999px; background: #E0E0E0; object-fit: cover; flex-shrink: 0; }
.article-body .sv-comment__bubble { flex: 1; padding: 14px 16px; border-radius: 2px 14px 14px 14px; background: var(--color-bg-light); border: 1px solid var(--color-border-light); }
.article-body .sv-comment__name { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; color: var(--color-text-dark); }
.article-body .sv-comment__text { margin: 0; font-size: 12px; line-height: 1.8; color: var(--color-text-primary); }

/* --- Chat Balloons（.balloon[.balloon--right] > __bubble + __avatar） --- */
.article-body .balloon { display: flex; align-items: flex-end; gap: 10px; margin: 18px 0; }
.article-body .balloon--right { justify-content: flex-end; }
.article-body .balloon__avatar { width: 40px; height: 40px; border-radius: 999px; background: #E0E0E0; object-fit: cover; flex-shrink: 0; }
.article-body .balloon__bubble { max-width: 75%; padding: 12px 16px; background: var(--color-bg-purple-tint); border-radius: 14px 14px 14px 2px; }
.article-body .balloon--right .balloon__bubble { background: var(--color-bg-teal-tint); border-radius: 14px 14px 2px 14px; }
.article-body .balloon__bubble p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--color-text-primary); }
.article-body .balloon__name { display: block; margin-bottom: 2px; font-size: 10px; font-weight: 700; color: var(--color-teal); }

/* --- CTA Block（診断などへの誘導） --- */
.article-body .cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 20px;
  border-radius: 14px;
  margin: 22px 0;
  background: var(--gradient-diagonal);
  text-align: center;
}
.article-body .cta-block__title { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #FFFFFF; }
.article-body .cta-block__desc { margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.85); line-height: 1.6; }
.article-body .cta-block__btn {
  padding: 12px 32px;
  border-radius: 999px;
  background: var(--color-bg-white);
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-teal);
}
.article-body .cta-block__btn span {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-teal);
}

/* ==========================================================================
   旧世代コンポーネント補完（移行記事200本側・既存デザインに統一）
   callout-box__body / --accent / --tip / c-balloon / faq_q,faq_a / cap_box
   ========================================================================== */

/* --- callout-box: __body 構造 と 追加バリアント --- */
.article-body .callout-box__body { flex: 1; font-size: 13px; line-height: 1.7; color: var(--color-text-dark); }
.article-body .callout-box__body > *:first-child { margin-top: 0; }
.article-body .callout-box__body > *:last-child { margin-bottom: 0; }
.article-body .callout-box__body p { margin: 0 0 8px; }
.article-body .callout-box__body a { color: var(--color-teal); font-weight: 600; }
.article-body .callout-box--accent { background: var(--color-bg-teal-tint); border: 1px solid #B2EBF2; }
.article-body .callout-box--accent .callout-box__icon { color: var(--color-teal); }
.article-body .callout-box--tip { background: var(--color-bg-purple-tint); border: 1px solid #E9D5F5; }
.article-body .callout-box--tip .callout-box__icon { color: var(--color-purple-dark); }

/* --- c-balloon（旧SWELL会話吹き出し: icon + body） --- */
.article-body .c-balloon { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0; }
.article-body .c-balloon.-bln-right { flex-direction: row-reverse; }
.article-body .c-balloon__icon { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 72px; flex-shrink: 0; }
.article-body .c-balloon__iconImg { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.article-body .c-balloon__icon.-circle .c-balloon__iconImg { border-radius: 999px; }
.article-body .c-balloon__iconName { font-size: 10px; font-weight: 600; color: var(--color-text-muted); text-align: center; line-height: 1.3; }
.article-body .c-balloon__body {
  flex: 1; align-self: center;
  padding: 14px 16px; border-radius: 12px;
  background: var(--color-bg-light); border: 1px solid var(--color-border-light);
  font-size: 13px; line-height: 1.7; color: var(--color-text-dark);
}
.article-body .c-balloon.-bln-left .c-balloon__body { background: var(--color-bg-purple-tint); border-color: transparent; }
.article-body .c-balloon.-bln-right .c-balloon__body { background: var(--color-bg-teal-tint); border-color: transparent; }
.article-body .c-balloon__body.-border-none { border-color: transparent; }
.article-body .c-balloon__body > *:first-child { margin-top: 0; }
.article-body .c-balloon__body > *:last-child { margin-bottom: 0; }
.article-body .c-balloon__body p { margin: 0 0 8px; }

/* --- faq_q / faq_a（旧SWELL FAQ: dt/dd） --- */
.article-body .faq_q {
  position: relative; display: block;
  margin: 14px 0 0; padding: 14px 16px 14px 46px;
  background: var(--color-bg-white); border: 1px solid var(--color-border-light);
  border-radius: 12px 12px 0 0;
  font-size: 13px; font-weight: 700; color: var(--color-text-primary); line-height: 1.5;
}
.article-body .faq_a {
  position: relative; display: block;
  margin: 0 0 14px; padding: 14px 16px 14px 46px;
  background: var(--color-bg-light); border: 1px solid var(--color-border-light); border-top: none;
  border-radius: 0 0 12px 12px;
  font-size: 12px; color: var(--color-text-muted); line-height: 1.7;
}
.article-body .faq_q::before, .article-body .faq_a::before {
  position: absolute; left: 14px; top: 14px;
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 11px; font-weight: 700; color: #FFFFFF;
}
.article-body .faq_q::before { content: "Q"; background: var(--gradient); }
.article-body .faq_a::before { content: "A"; background: var(--color-text-faint); }
.article-body .faq_a p { margin: 0; }
.article-body .faq_a > *:first-child { margin-top: 0; }
.article-body .faq_a > *:last-child { margin-bottom: 0; }

/* --- cap_box（旧キャプション付きボックス: 見出し + 本文） --- */
.article-body .cap_box_ttl {
  display: flex; align-items: center; gap: 6px;
  margin: 16px 0 0; padding: 10px 14px;
  background: var(--gradient); color: #FFFFFF;
  font-size: 13px; font-weight: 700;
  border-radius: 10px 10px 0 0;
}
.article-body .cap_box_ttl svg { width: 16px; height: 16px; flex-shrink: 0; }
.article-body .cap_box_content {
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-light); border-top: none;
  border-radius: 0 0 10px 10px;
  font-size: 13px; line-height: 1.7; color: var(--color-text-dark);
}
.article-body .cap_box_content > *:first-child { margin-top: 0; }
.article-body .cap_box_content > *:last-child { margin-bottom: 0; }
.article-body .cap_box_content ul, .article-body .cap_box_content ol { margin: 0; padding-left: 1.3em; }

/* ==========================================================================
   重要箇所の強調 — 本文の太字をマーカー下線（蛍光ペン・ティール）で目立たせる
   ========================================================================== */
.article-body strong,
.article-body b {
  font-weight: 700;
  background: linear-gradient(transparent 58%, rgba(2, 193, 212, 0.24) 58%);
  /* 文字色は黒のまま・改行をまたいでも自然に乗る */
  padding: 0 1px;
}
/* 白文字/着色背景の上に乗る箇所ではマーカーを無効化（可読性確保） */
.article-body .cta-block strong,
.article-body .cta-block b,
.article-body .data-table__head strong,
.article-body .balloon__bubble strong {
  background: none;
  padding: 0;
}