/* ==========================================================================
   お知らせ詳細：本文（ブロックエディタ出力）用スタイル
   静的HTMLでは .newsdetail-article__text / __h2 などクラス付きで書かれていたが、
   エディタが出力するのは素の <p> <h2> <ul> なので、同じ見た目を当て直す。
   ※このファイルのみテーマ側で新規追加。静的/css には存在しない。
   ========================================================================== */

.newsdetail-article__content {
  width: 100%;
}
/* gapだと全要素が一律の間隔になり見出しごとの余白差が埋もれるため、
   margin-topでブロック間の基本間隔を作る（各要素の最初は不要）。 */
.newsdetail-article__content > * {
  margin-top: 26px;
}
.newsdetail-article__content > *:first-child {
  margin-top: 0;
}

/* 本文テキスト = .text-body-base 相当。
   静的HTML版では本文段落の大半が淡色（.newsdetail-article__text--gray）のため、
   段落ブロックの既定色をこちらに合わせる（li は黒のまま）。 */
.newsdetail-article__content p,
.newsdetail-article__content li {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
.newsdetail-article__content p {
  color: var(--text-black);
}
.newsdetail-article__content li {
  color: var(--text-black);
}

/* 見出し = .newsdetail-article__h2 + .text-heading-md 相当。
   見出しレベルが下がるほど、直前の要素との間隔（margin-top）も小さくする。
   margin-topは上の共通ルール（26px）を各見出しで上書きする形。 */
.newsdetail-article__content h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 54px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--text-black);
}
.newsdetail-article__content h2::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 6px;
  height: 30px;
  border-radius: 3px;
  background: var(--mme-lightblue);
}

.newsdetail-article__content h3 {
  position: relative;
  margin-top: 44px;
  padding-bottom: 14px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--text-black);
}
/* 下線装飾: 左から太い青線（200px）→ 細いグレー線（残り幅） */
.newsdetail-article__content h3::before,
.newsdetail-article__content h3::after {
  content: "";
  position: absolute;
  bottom: 0;
}
.newsdetail-article__content h3::before {
  left: 0;
  width: 200px;
  max-width: 100%;
  height: 3px;
  background: var(--mme-lightblue);
}
.newsdetail-article__content h3::after {
  left: 200px;
  right: 0;
  height: 1px;
  background: #ddd;
}

/* h4〜h6: デザインには存在しないが、記事本文でごく稀に使われた場合の保険として
   h2 > h3 の流れを崩さない範囲で段階的に用意する（この記事詳細ページのみ有効）。 */
.newsdetail-article__content h4 {
  margin-top: 36px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--text-black);
}
.newsdetail-article__content h5 {
  margin-top: 30px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--text-black);
}
.newsdetail-article__content h6 {
  margin-top: 26px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #6b6b66;
}

.newsdetail-article__content ul,
.newsdetail-article__content ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 1.4em;
}
.newsdetail-article__content ul li { list-style: disc; }
.newsdetail-article__content ol li { list-style: decimal; }

.newsdetail-article__content img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.newsdetail-article__content a {
  color: var(--mme-lightblue);
  text-decoration: underline;
}

.newsdetail-article__content blockquote {
  padding: 14px 20px;
  border-left: 4px solid var(--mme-lightblue);
  color: #6b6b66;
}

.newsdetail-article__content table {
  width: 100%;
  border-collapse: collapse;
}
.newsdetail-article__content th,
.newsdetail-article__content td {
  padding: 10px 14px;
  border: 1px solid #e0e0dc;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
}

/* 淡色テキスト（本文中に手動で class="newsdetail-article__text--gray" を付けて使う） */
.newsdetail-article__content .newsdetail-article__text--gray {
  color: #6b6b66;
}

/* ステップ番号リスト（再利用ブロックパターン「お知らせ：ステップリスト」で挿入） */
.newsdetail-article__steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding-left: 0;
  margin: 26px 0 0;
  list-style: none;
}
.newsdetail-article__content > .newsdetail-article__steps:first-child {
  margin-top: 0;
}
.newsdetail-article__steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.newsdetail-article__stepNum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mme-lightblue);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
}
.newsdetail-article__stepText {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
.newsdetail-article__stepTitle {
  font-weight: 700;
  color: var(--text-black);
}
.newsdetail-article__stepDesc {
  font-weight: 500;
  color: #6b6b66;
}

/* POINTボックス（再利用ブロックパターン「お知らせ：POINTボックス」で挿入） */
.newsdetail-article__point {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border-radius: 12px;
  background: var(--mme-bk-blue);
}
.newsdetail-article__content .newsdetail-article__pointLabel {
  color: #f05b5d;
}
.newsdetail-article__pointText {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--text-black);
}

/* 左画像＋右テキスト／左テキスト＋右画像（core/media-text、再利用パターン参照） */
.newsdetail-article__content .wp-block-media-text.newsdetail-article__mediaText {
  align-items: center;
  gap: 30px;
}
.newsdetail-article__content .wp-block-media-text.newsdetail-article__mediaText .wp-block-media-text__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}
.newsdetail-article__content .wp-block-media-text.newsdetail-article__mediaText .wp-block-media-text__content {
  padding: 0;
  word-break: break-word;
}

/* ==========================================================================
   TAB (max-width: 1023px)
   ========================================================================== */
@media (max-width: 1023px) {
  .newsdetail-article__content p,
  .newsdetail-article__content li,
  .newsdetail-article__content th,
  .newsdetail-article__content td { font-size: 15px; }
  .newsdetail-article__content h2 { font-size: 19px; }
  .newsdetail-article__content h3 { font-size: 17px; }
  .newsdetail-article__content h4 { font-size: 16px; }
  .newsdetail-article__content h5 { font-size: 15px; }
  .newsdetail-article__content h6 { font-size: 14px; }
}

/* ==========================================================================
   SP (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .newsdetail-article__content > * { margin-top: 20px; }
  .newsdetail-article__steps { margin-top: 20px; }
  .newsdetail-article__content p,
  .newsdetail-article__content li,
  .newsdetail-article__content th,
  .newsdetail-article__content td { font-size: 14px; }
  .newsdetail-article__content h2 { font-size: 18px; line-height: 1.8; letter-spacing: 0; }
  .newsdetail-article__content h3 { font-size: 16px; }
  .newsdetail-article__content h3::before { width: 120px; }
  .newsdetail-article__content h3::after { left: 120px; }
  .newsdetail-article__content h4 { font-size: 15px; }
  .newsdetail-article__content h5 { font-size: 14px; }
  .newsdetail-article__content h6 { font-size: 13px; }
  .newsdetail-article__point { padding: 16px; }
  .newsdetail-article__content .wp-block-media-text.newsdetail-article__mediaText { gap: 16px; }
}