/*
 * nicobay-journal.css — ジャーナル（/journal/）の一覧・記事・本文の部品。
 *
 * 読み込むのは archive-journal.php / taxonomy-journal_category.php / single-journal.php だけ。
 * 色は DESIGN.md の --nb-color-* だけを使う（緑は #138808 の1色。薄い緑は同じ緑を透かす）。
 *
 * 本文の部品（後半）は、旧ジャーナル（SWELL）の本文に入っているクラス名を、本店の色と形で作り直したもの。
 * SWELL の CSS は写していない（ライセンスのため）。クラス名だけを手がかりに、ここで一から書いた。
 *   - .swl-marker.mark_yellow ……… 強調（全54本）
 *   - .is-style-num_circle ……………… 丸数字のリスト（52本）
 *   - .cap_box ……………………………… 見出し付きの枠（49本）
 *   - .nbj-table--scroll-* …………… 横スクロールの表（49本。inc/journal.php が SWELL の属性から付ける）
 *   - .nbj-card--embed ………………… 自サイト記事の埋め込み（104か所。inc/journal.php がカードにする）
 *   - .swell-block-button ………………… ボタン（4本）
 *   - .is-style-big_icon_good ………… アイコン付きの枠（3本）
 *   - .has-swl-main-background-color / .has-white-color / .swl-cell-bg ……… 色（2本）
 *   - .nbj-voice ……………………………… 吹き出し（1本。本店では吹き出しを使わないので読者の声の枠にする）
 *   - img[data-nb-h2band] / .nbj-line-pop-root ……… 生成側が本文に入れている部品
 *   - .nbj-product ………………………… 本店の商品カード（21か所・5本。商品ページへのリンクだけの段落を inc/journal-products.php がカードにする）
 */

.nbj {
  --nbj-text: var(--nb-color-text, #1a1a1a);
  --nbj-sub: var(--nb-color-text-sub, #5a5a5a);
  --nbj-brand: var(--nb-color-brand, #138808);
  --nbj-tint: var(--nb-color-brand-tint, rgba(19, 136, 8, 0.09));
  --nbj-brand-line: var(--nb-color-brand-line, rgba(19, 136, 8, 0.22));
  --nbj-surface: var(--nb-color-surface, #f5f5f5);
  --nbj-line: var(--nb-color-line, #e3e0db);
  --nbj-radius: 8px;
  color: var(--nbj-text);
}

/* ---------------------------------------------------------------------------
 * 一覧（/journal/・/journal/category/<slug>/）
 * ------------------------------------------------------------------------- */

.nbj-archive {
  padding-top: 2.4rem;
  padding-bottom: 5.6rem;
}

.nbj-archive__header {
  margin-bottom: 2.4rem;
}

.nbj-archive__eyebrow {
  margin: 0 0 0.4rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.nbj-archive__eyebrow a {
  color: var(--nbj-brand);
  text-decoration: none;
}

.nbj-archive__title {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.nbj-archive__desc {
  margin: 1rem 0 0;
  color: var(--nbj-sub);
  font-size: 1.4rem;
  line-height: 1.8;
}

@media screen and (min-width: 750px) {
  .nbj-archive {
    padding-top: 3.6rem;
    padding-bottom: 8rem;
  }

  .nbj-archive__title {
    font-size: 3.4rem;
  }
}

/* カテゴリーの切り替え（スマホは横にスクロール） */
.nbj-cats {
  margin: 0 0 2.8rem;
  border-bottom: 1px solid var(--nbj-line);
}

.nbj-cats__list {
  display: flex;
  gap: 0.8rem;
  margin: 0;
  padding: 0 0 1.6rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.nbj-cats__list li {
  flex: none;
}

.nbj-cats__item {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--nbj-line);
  border-radius: 999px;
  background: #fff;
  color: var(--nbj-text);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.nbj-cats__item:hover {
  border-color: var(--nbj-brand);
}

.nbj-cats__item.is-current {
  border-color: var(--nbj-brand);
  background: var(--nbj-brand);
  color: var(--nb-color-on-brand, #fff);
}

@media screen and (min-width: 750px) {
  .nbj-cats__list {
    flex-wrap: wrap;
    overflow: visible;
  }
}

.nbj-archive__list {
  display: grid;
  gap: 2rem;
}

@media screen and (min-width: 990px) {
  .nbj-archive__list {
    grid-template-columns: 1fr 1fr;
    gap: 3.2rem 4rem;
  }
}

.nbj-archive__empty {
  color: var(--nbj-sub);
}

/* ページ送り（the_posts_pagination） */
.nbj-pagination {
  margin-top: 4.8rem;
}

.nbj-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

.nbj-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  height: 4.4rem;
  padding: 0 1.2rem;
  border: 1px solid var(--nbj-line);
  border-radius: 999px;
  color: var(--nbj-text);
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
}

.nbj-pagination a.page-numbers:hover {
  border-color: var(--nbj-brand);
}

.nbj-pagination .page-numbers.current {
  border-color: var(--nbj-brand);
  background: var(--nbj-brand);
  color: var(--nb-color-on-brand, #fff);
}

.nbj-pagination .page-numbers.dots {
  border: 0;
  min-width: auto;
}

/* ---------------------------------------------------------------------------
 * 記事カード（template-parts/journal/card.php）
 * ------------------------------------------------------------------------- */

.nbj-card {
  min-width: 0;
}

.nbj-card__link {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  color: inherit;
  text-decoration: none;
}

.nbj-card__media {
  flex: none;
  width: 40%;
  max-width: 26rem;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  border-radius: var(--nbj-radius);
  background: var(--nbj-surface);
}

.nbj-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.nbj-card__link:hover .nbj-card__img {
  transform: scale(1.03);
}

.nbj-card__noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--nbj-sub);
  font-size: 1.2rem;
  font-weight: 700;
}

.nbj-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.nbj-card__cat {
  align-self: flex-start;
  padding: 0.2rem 0.9rem;
  border-radius: 999px;
  background: var(--nbj-tint);
  color: var(--nbj-text);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.6;
}

.nbj-card__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.nbj-card__link:hover .nbj-card__title {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.nbj-card__excerpt {
  display: none;
  color: var(--nbj-sub);
  font-size: 1.3rem;
  line-height: 1.7;
}

.nbj-card__meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: auto;
  color: var(--nbj-sub);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

@media screen and (min-width: 750px) {
  .nbj-card--list .nbj-card__link {
    gap: 2rem;
  }

  .nbj-card--list .nbj-card__title {
    font-size: 1.7rem;
  }

  .nbj-card--list .nbj-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* 関連記事（縦長のカード） */
.nbj-card--grid .nbj-card__link {
  flex-direction: column;
  gap: 1.2rem;
}

.nbj-card--grid .nbj-card__media {
  width: 100%;
  max-width: none;
}

.nbj-card--grid .nbj-card__title {
  font-size: 1.5rem;
}

/* ---------------------------------------------------------------------------
 * 記事（/journal/<slug>/）
 * ------------------------------------------------------------------------- */

.nbj-article {
  max-width: calc(78rem + 3rem);
  padding-top: 2.4rem;
  padding-bottom: 4rem;
}

.nbj-article__header {
  margin-bottom: 2rem;
}

.nbj-article__cat {
  display: inline-block;
  margin-bottom: 1.2rem;
  padding: 0.3rem 1.2rem;
  border-radius: 999px;
  background: var(--nbj-brand);
  color: var(--nb-color-on-brand, #fff);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
}

.nbj-article__cat:hover {
  filter: var(--nb-hover-filter, brightness(0.9));
}

.nbj-article__title {
  margin: 0;
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.nbj-article__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 1.4rem 0 0;
  color: var(--nbj-sub);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
}

.nbj-article__hero {
  margin: 0 0 3.2rem;
}

.nbj-article__hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--nbj-radius);
}

@media screen and (min-width: 750px) {
  .nbj-article {
    padding-top: 4rem;
    padding-bottom: 6.4rem;
  }

  .nbj-article__title {
    font-size: 3rem;
  }
}

/* 関連記事 */
.nbj-related {
  padding: 4.8rem 0 6.4rem;
  background: var(--nbj-surface);
}

.nbj-related__title {
  margin: 0 0 2.4rem;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.4;
}

.nbj-related__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem 1.6rem;
}

@media screen and (min-width: 990px) {
  .nbj-related__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3.2rem 2.4rem;
  }

  .nbj-related__title {
    font-size: 2.4rem;
  }
}

.nbj-related__more {
  margin: 3.2rem 0 0;
  text-align: center;
}

/* 本店のボタン（緑の地に白、ピル型） */
.nbj-button,
.nbj-content .swell-block-button__link,
.nbj-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 4.8rem;
  padding: 1.2rem 3.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--nbj-brand);
  color: var(--nb-color-on-brand, #fff);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}

.nbj-button:hover,
.nbj-content .swell-block-button__link:hover,
.nbj-content .wp-block-button__link:hover {
  color: var(--nb-color-on-brand, #fff);
  filter: var(--nb-hover-filter, brightness(0.9));
}

.nbj-button::after,
.nbj-content .swell-block-button__link::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ---------------------------------------------------------------------------
 * 本文
 * ------------------------------------------------------------------------- */

.nbj-content {
  font-size: 1.6rem;
  line-height: 1.95;
  letter-spacing: 0.04em;
  overflow-wrap: break-word;
}

.nbj-content > * {
  margin-top: 0;
  margin-bottom: 2.4rem;
}

.nbj-content > *:last-child {
  margin-bottom: 0;
}

.nbj-content p {
  margin-top: 0;
}

.nbj-content a {
  color: var(--nbj-brand);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
}

.nbj-content a:hover {
  text-decoration-thickness: 0.2rem;
}

.nbj-content strong {
  font-weight: 700;
}

.nbj-content img {
  max-width: 100%;
  height: auto;
}

/* 見出し。H2 は緑の地に白（本店の「緑の地には白い文字」）、H3 は緑の線、H4 は太字だけ */
.nbj-content h2 {
  margin: 5.6rem 0 2.4rem;
  padding: 1.2rem 1.6rem;
  border-radius: var(--nbj-radius);
  background: var(--nbj-brand);
  color: var(--nb-color-on-brand, #fff);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.nbj-content h3 {
  margin: 4rem 0 1.6rem;
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 4px solid var(--nbj-brand);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.55;
}

.nbj-content h4 {
  margin: 3.2rem 0 1.2rem;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.6;
}

@media screen and (min-width: 750px) {
  .nbj-content h2 {
    padding: 1.4rem 2rem;
    font-size: 2.2rem;
  }

  .nbj-content h3 {
    font-size: 1.9rem;
  }
}

/* 見出しの帯画像（生成側が H2 の直後に置く。本文の <style> は .post_content を前提にしていて、ここでもそのまま効く） */
.nbj-content h2 + p:has(> img[data-nb-h2band]) {
  margin-top: -1.2rem;
}

.nbj-content img[data-nb-h2band] {
  border-radius: var(--nbj-radius);
}

/* リスト（クラスの無いもの） */
.nbj-content ul,
.nbj-content ol {
  padding-left: 2.4rem;
}

.nbj-content li {
  margin-bottom: 0.6rem;
}

.nbj-content li:last-child {
  margin-bottom: 0;
}

.nbj-content li::marker {
  color: var(--nbj-brand);
}

/* 引用（生成側は「✅ 要点」の囲みに使っている） */
.nbj-content blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 1.6rem 2rem;
  border: 0;
  border-left: 4px solid var(--nbj-brand-line);
  border-radius: 0 var(--nbj-radius) var(--nbj-radius) 0;
  background: var(--nbj-surface);
  font-style: normal;
}

.nbj-content blockquote > *:last-child {
  margin-bottom: 0;
}

/* 区切り線 */
.nbj-content hr,
.nbj-content .wp-block-separator {
  margin: 4rem 0;
  border: 0;
  border-top: 1px solid var(--nbj-line);
}

/* 画像・ギャラリー・段組み（WordPress 標準のブロック） */
.nbj-content figure {
  margin-left: 0;
  margin-right: 0;
}

.nbj-content .wp-block-image img {
  border-radius: var(--nbj-radius);
}

.nbj-content figcaption {
  margin-top: 0.8rem;
  color: var(--nbj-sub);
  font-size: 1.3rem;
  text-align: center;
}

.nbj-content .has-text-align-center {
  text-align: center;
}

.nbj-content .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

/* ---- 目次（inc/journal.php が最初の H2 の前に入れる） ---- */
.nbj-toc {
  margin: 4rem 0;
  border: 1px solid var(--nbj-line);
  border-radius: var(--nbj-radius);
  background: #fff;
}

.nbj-toc details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 2rem;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 800;
  list-style: none;
}

.nbj-toc details > summary::-webkit-details-marker {
  display: none;
}

.nbj-toc details > summary::after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-right: 2px solid var(--nbj-brand);
  border-bottom: 2px solid var(--nbj-brand);
  transform: rotate(45deg) translateY(-0.3rem);
  transition: transform 0.2s ease;
}

.nbj-toc details[open] > summary::after {
  transform: rotate(-135deg) translateY(-0.3rem);
}

/* 目次は .nbj-content の中にあるので、本文のリスト（.nbj-content ol の padding-left: 2.4rem）に負けないよう .nbj-toc から書く。
   番号はリストの記号（::marker）を使わず、枠の中の決まった幅に右寄せで置く。10 以上でも枠からはみ出さず、「.」の位置がそろう。 */
.nbj-toc .nbj-toc__list {
  margin: 0;
  padding: 1.6rem 2rem 2rem;
  border-top: 1px solid var(--nbj-line);
  list-style: none;
  counter-reset: nbj-toc;
  font-size: 1.4rem;
  line-height: 1.7;
}

.nbj-toc .nbj-toc__list > li {
  position: relative;
  margin-bottom: 0.8rem;
  padding-left: 3.2rem;
  font-weight: 700;
  counter-increment: nbj-toc;
}

.nbj-toc .nbj-toc__list > li:last-child {
  margin-bottom: 0;
}

.nbj-toc .nbj-toc__list > li::before {
  content: counter(nbj-toc) ".";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.4rem;
  color: var(--nbj-brand);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.nbj-toc .nbj-toc__sub {
  margin: 0.6rem 0 0;
  padding-left: 1.8rem;
  list-style: none;
  font-weight: 500;
}

.nbj-toc__sub > li {
  position: relative;
  margin-bottom: 0.4rem;
}

.nbj-toc__sub > li::before {
  content: "";
  position: absolute;
  top: 0.85em;
  left: -1.2rem;
  width: 0.6rem;
  height: 1px;
  background: var(--nbj-sub);
}

.nbj-toc a {
  color: var(--nbj-text);
  text-decoration: none;
}

.nbj-toc a:hover {
  color: var(--nbj-brand);
  text-decoration: underline;
}

.nbj-content h2[id],
.nbj-content h3[id] {
  scroll-margin-top: 9rem;
}

/* ---- 強調（SWELL のマーカー .swl-marker.mark_yellow） ----
 * 文字の下半分にマーカー線を引く（DESIGN.md「部品」）。色は黄色ではなく、同じ緑を透かした brand-line。
 * 太さは本文のまま（生成側がほぼすべて <strong> で包んでいる）。2行にまたがっても行ごとに引く。 */
.nbj-content .swl-marker {
  padding: 0 0.1em;
  background: linear-gradient(transparent 58%, var(--nbj-brand-line) 58%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- 丸数字のリスト（.is-style-num_circle。ul でも番号を振る） ---- */
.nbj-content .is-style-num_circle {
  padding-left: 0;
  list-style: none;
  counter-reset: nbj-num;
}

.nbj-content .is-style-num_circle > li {
  position: relative;
  margin-bottom: 1.2rem;
  padding-left: 3.6rem;
  counter-increment: nbj-num;
}

.nbj-content .is-style-num_circle > li::before {
  content: counter(nbj-num);
  position: absolute;
  top: 0.15em;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--nbj-brand);
  color: var(--nb-color-on-brand, #fff);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.nbj-content .is-style-num_circle > li:last-child {
  margin-bottom: 0;
}

/* ---- 見出し付きの枠（SWELL のキャプションボックス .cap_box） ---- */
.nbj-content .cap_box {
  overflow: hidden;
  border: 1px solid var(--nbj-brand-line);
  border-radius: var(--nbj-radius);
  background: #fff;
}

.nbj-content .cap_box_ttl {
  padding: 1rem 2rem;
  background: var(--nbj-brand);
  color: var(--nb-color-on-brand, #fff);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
}

.nbj-content .cap_box_content {
  padding: 2rem;
}

.nbj-content .cap_box_content > *:last-child {
  margin-bottom: 0;
}

/* ---- 表（core/table。横スクロールは SWELL の属性から inc/journal.php がクラスを付ける） ---- */
.nbj-content .wp-block-table {
  margin-left: 0;
  margin-right: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.nbj-content .wp-block-table table {
  width: 100%;
  table-layout: auto; /* base.css の table:not([class]) は fixed（列が等幅になる） */
  border-collapse: collapse;
  border: 1px solid var(--nbj-line);
  box-shadow: none;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.nbj-content .wp-block-table th,
.nbj-content .wp-block-table td {
  padding: 1rem 1.2rem;
  border: 1px solid var(--nbj-line);
  text-align: left;
  vertical-align: top;
  word-break: normal;
  overflow-wrap: anywhere;
}

.nbj-content .wp-block-table thead {
  border-bottom: 0; /* WordPress 標準のブロック CSS の 3px の線を消す */
}

.nbj-content .wp-block-table thead th,
.nbj-content .wp-block-table thead td {
  background: var(--nbj-tint);
  font-weight: 700;
}

.nbj-content .wp-block-table tbody th {
  background: var(--nbj-surface);
  font-weight: 700;
}

.nbj-content .wp-block-table .has-text-align-center {
  text-align: center;
}

.nbj-content .wp-block-table.has-fixed-layout table,
.nbj-content .wp-block-table table.has-fixed-layout {
  table-layout: fixed;
}

/* 横スクロール: 表がはみ出す分だけ横に動かす。幅の指定（SWELL の swlTableWidth）があればその幅を最小にする */
.nbj-content .nbj-table--scroll-both table {
  min-width: var(--nbj-table-width, 0);
}

.nbj-content .nbj-table--scroll-both th,
.nbj-content .nbj-table--scroll-both td {
  min-width: 8em;
}

.nbj-content .nbj-table--scroll-both tr > :first-child {
  min-width: 6em;
}

@media screen and (max-width: 749px) {
  .nbj-content .nbj-table--scroll-sp table {
    min-width: var(--nbj-table-width, 640px);
  }
}

/* 横に動かせることを示す（スマホだけ。はみ出していないときも出るので控えめに） */
@media screen and (max-width: 749px) {
  .nbj-content .nbj-table--scroll-both::before,
  .nbj-content .nbj-table--scroll-sp::before {
    content: "← 横にスクロールできます →";
    position: sticky;
    left: 0;
    display: block;
    margin-bottom: 0.6rem;
    color: var(--nbj-sub);
    font-size: 1.1rem;
    text-align: center;
  }
}

/* ---- 色（SWELL のメインカラー → 本店の緑・白文字） ---- */
.nbj-content .has-swl-main-background-color {
  background-color: var(--nbj-brand);
}

.nbj-content .has-white-color,
.nbj-content .has-white-color a {
  color: #fff;
}

/* 表のセルの塗り（.swl-cell-bg）: SWELL はセルの中の空の span で塗る。ここではセルごと塗る */
.nbj-content td:has(.swl-cell-bg),
.nbj-content th:has(.swl-cell-bg) {
  background: var(--nbj-brand);
  color: var(--nb-color-on-brand, #fff);
}

.nbj-content .swl-cell-bg {
  display: none;
}

/* ---- アイコン付きの枠（.is-style-big_icon_good）・枠線（.has-border.-border01） ---- */
.nbj-content .is-style-big_icon_good {
  position: relative;
  padding: 2.4rem 2rem 2rem;
  border: 1px solid var(--nbj-brand-line);
  border-radius: var(--nbj-radius);
  background: var(--nbj-tint);
}

.nbj-content .is-style-big_icon_good::before {
  content: "";
  position: absolute;
  top: -1.6rem;
  left: 1.6rem;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--nbj-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 1.8rem no-repeat;
}

.nbj-content .is-style-big_icon_good > *:last-child {
  margin-bottom: 0;
}

.nbj-content .is-style-big_icon_good:not(:first-child) {
  margin-top: 4rem;
}

.nbj-content .has-border.-border01 {
  border: 1px solid var(--nbj-line);
  border-radius: var(--nbj-radius);
  padding: 2rem;
}

/* ---- ボタン（SWELL の .swell-block-button・WordPress 標準の .wp-block-buttons） ---- */
.nbj-content .swell-block-button,
.nbj-content .wp-block-buttons {
  display: flex;
  justify-content: center;
  margin: 3.2rem 0;
  text-align: center;
}

.nbj-content .wp-block-buttons > .wp-block-button {
  margin: 0;
}

.nbj-content .swell-block-button__link span {
  color: inherit;
}

/* ---- 読者の声（SWELL の吹き出し。inc/journal.php が .nbj-voice で包む） ---- */
.nbj-content .nbj-voice {
  padding: 1.6rem 2rem;
  border: 1px solid var(--nbj-line);
  border-left: 4px solid var(--nbj-brand-line);
  border-radius: var(--nbj-radius);
  background: var(--nbj-surface);
}

.nbj-content .nbj-voice > *:last-child {
  margin-bottom: 0;
}

/* ---- 自サイト記事の埋め込み（inc/journal.php が記事カードにする） ---- */
.nbj-content .nbj-card--embed {
  margin: 3.2rem 0;
}

.nbj-content .nbj-card--embed .nbj-card__link {
  align-items: center;
  padding: 1.2rem;
  border: 1px solid var(--nbj-line);
  border-radius: var(--nbj-radius);
  background: #fff;
  color: var(--nbj-text);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.nbj-content .nbj-card--embed .nbj-card__link:hover {
  border-color: var(--nbj-brand);
}

.nbj-content .nbj-card--embed .nbj-card__media {
  width: 36%;
  max-width: 22rem;
  border-radius: 6px;
}

.nbj-content .nbj-card--embed .nbj-card__title {
  font-size: 1.4rem;
  line-height: 1.6;
  -webkit-line-clamp: 3;
}

.nbj-content .nbj-card--embed .nbj-card__meta {
  margin-top: 0.4rem;
}

.nbj-content .nbj-card__more {
  margin-left: auto;
  color: var(--nbj-brand);
  font-weight: 700;
}

.nbj-content .nbj-card__more::after {
  content: " ›";
}

@media screen and (min-width: 750px) {
  .nbj-content .nbj-card--embed .nbj-card__link {
    gap: 2rem;
    padding: 1.6rem;
  }

  .nbj-content .nbj-card--embed .nbj-card__title {
    font-size: 1.6rem;
  }
}

.nbj-content .nbj-embed-missing {
  font-size: 1.4rem;
}

/* ---- 生成側の部品（nb-summary・nb-faq・mm-author-box・本店へのボタン） ----
 * 生成側が style 属性で形と色を直書きしている。色は inc/journal.php（nicobay_journal_style_colors）が
 * 表示のときに本店の色へ置き換える。ここでは本文の見出しの形が FAQ の質問（H3）に付かないようにするだけ。 */
.nbj-content .nb-faq h3 {
  padding: 0;
  border: 0;
}

/* LINE の追従バナー（.nbj-line-pop-root。生成側が CSS と閉じるボタンを本文に入れている）。
 * 本店のページトップへ戻るボタン（右下）とは反対の左下に出るので、重ならない。カートドロワーより下に置く。 */
.nbj-content .nbj-line-pop {
  z-index: 90;
}

/* ---- 本文の商品カード（inc/journal-products.php が、商品ページへのリンクだけの段落をこれにする） ----
 * 左に商品の画像、右に名前・評価・価格（ドル＋円の参考）・ボタン。ボタンは本店のボタン（緑のピル型）。
 * 生成側のボタンは中央寄せの枠（text-align:center）の中にあったので、カードの中は左寄せに戻す。 */
.nbj-content .nbj-product {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin: 2.4rem 0;
  padding: 1.2rem;
  border: 1px solid var(--nbj-line);
  border-radius: var(--nbj-radius);
  background: #fff;
  text-align: left;
}

.nbj-content .nbj-product__media {
  flex: none;
  width: 10.4rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  background: var(--nbj-surface);
}

.nbj-content .nbj-product__img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.nbj-content .nbj-product__media:hover .nbj-product__img {
  transform: scale(1.03);
}

.nbj-content .nbj-product__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
}

.nbj-content .nbj-product__name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--nbj-text);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.nbj-content .nbj-product__name:hover {
  color: var(--nbj-text);
  text-decoration: underline;
}

.nbj-content .nbj-product .nb-rating {
  margin: 0;
}

.nbj-content .nbj-product__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
}

.nbj-content .nbj-product__price .price {
  color: var(--nbj-text);
  font-size: 1.6rem;
  font-weight: 700;
}

.nbj-content .nbj-product__price del {
  color: var(--nbj-sub);
  font-size: 1.3rem;
  font-weight: 500;
}

.nbj-content .nbj-product__price ins {
  color: var(--nb-color-red, #c62828);
  text-decoration: none;
}

.nbj-content .nbj-product__price .nicobay-jpy-ref--card {
  font-size: 1.3rem;
}

.nbj-content .nbj-product__off {
  padding: 0.1rem 0.6rem;
  border-radius: 4px;
  background: var(--nb-color-red, #c62828);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}

.nbj-content .nbj-product__actions {
  margin-top: 0.2rem;
}

.nbj-content .nbj-product__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  padding: 0.8rem 2.4rem;
  border-radius: 999px;
  background: var(--nbj-brand);
  color: var(--nb-color-on-brand, #fff);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.nbj-content .nbj-product__cart:hover {
  color: var(--nb-color-on-brand, #fff);
  text-decoration: none;
  filter: var(--nb-hover-filter, brightness(0.9));
}

.nbj-content .nbj-product__cart--soldout,
.nbj-content .nbj-product__cart--soldout:hover {
  background: var(--nb-color-disabled, #e9e9e9);
  color: var(--nbj-sub);
  filter: none;
}

@media screen and (min-width: 750px) {
  .nbj-content .nbj-product {
    gap: 2rem;
    padding: 1.6rem;
  }

  .nbj-content .nbj-product__media {
    width: 14rem;
  }

  .nbj-content .nbj-product__name {
    font-size: 1.7rem;
  }
}