/**
 * news/article.css
 *
 * 旧サイト(dentsuprc.co.jp)のニュース記事本文スタイルを再現。
 * single-news.php の .news-detail-body.editor 内にのみ適用。
 *
 * ---------------------------------------------------------------
 * 詳細度メモ
 *   競合元: css/single-news/index.css に
 *          `.news-detail-contents .news-detail-body p` (0,3,1) 等がある。
 *   全セレクタを `.news-detail-contents .news-detail-body.editor ...` (0,3,X) で統一し、
 *   読み込み順（後勝ち）で当てる。
 *
 * ---------------------------------------------------------------
 * タグマッピング（重要）
 *   旧サイト HTML → 新サイト（WordPressインポート後）
 *     <h4 class="secTitle_type1">  → <h2>       （クラスは失われている）
 *     <h5 class="secTitle_type2">  → <h3>       （クラスは失われている）
 *
 *   そのため h2 / h3 に対して旧サイトの secTitle_type1 / secTitle_type2 相当の
 *   装飾を直接適用する。
 *
 * ---------------------------------------------------------------
 * 元サイト実 CSS から取得した確定値（PC, 基準 font-size 15px / body）
 *   .post-content p             : font-family W4, text-align justify, line-height 1.643, margin-bottom 2em
 *   .post-content a             : color #ff005d, transition opacity .3s
 *   .post-content a:hover       : opacity .6
 *   .post-content img           : margin-bottom 3.7em
 *   .post-content .secTitle_type1 (h4): font W6, font-size 26px, border-left 4px solid #6f8a97,
 *                                       padding 5px 15px 3px, margin-bottom 40px,
 *                                       letter-spacing .05em, line-height 1.2776
 *   .post-content .secTitle_type2 (h5): font W5, font-size 21px, background #e2e8ea,
 *                                       padding 7px 7px 5px, margin-bottom 25px, line-height 1.4
 */

/* =============================================================
   ベース
   ---------------------------------------------------------------
   記事全体の幅は既存レイアウト（.news-detail-container）に従う。
   巨大画像の抑制は .editor img 側で個別に max-width を設定して対応。
   ============================================================= */
.news-detail-contents .news-detail-body.editor {
  font-size: 15px;
  line-height: 1.643;
  color: #000;
  letter-spacing: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* =============================================================
   段落 p  （旧 .post-content p）
   ============================================================= */
.news-detail-contents .news-detail-body.editor p {
  margin: 0 0 2em;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: justify;
}

/* =============================================================
   h2  ← 旧 h4.secTitle_type1  （左ボーダー付き大見出し）
   ============================================================= */
.news-detail-contents .news-detail-body.editor h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2776;
  letter-spacing: 0.05em;
  color: #000;
  margin: 0 0 40px;
  padding: 5px 15px 3px;
  border: none;
  border-left: 4px solid #6f8a97;
  background: transparent;
}

/* =============================================================
   h3  ← 旧 h5.secTitle_type2  （背景色付き中見出し）
   ============================================================= */
.news-detail-contents .news-detail-body.editor h3 {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: normal;
  color: #000;
  margin: 0 0 25px;
  padding: 7px 7px 5px;
  border: none;
  background: #e2e8ea;
}

/* =============================================================
   h4 h5 h6  （旧 h4/h5/h6 と同サイズ・基本装飾なし）
   ============================================================= */
.news-detail-contents .news-detail-body.editor h4,
.news-detail-contents .news-detail-body.editor h5,
.news-detail-contents .news-detail-body.editor h6 {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
  margin: 0 0 1.5em;
  padding: 0;
  border: none;
  background: transparent;
}

/* =============================================================
   リンク  （旧 .post-content a : #ff005d / hover opacity .6）
   ============================================================= */
.news-detail-contents .news-detail-body.editor a {
  color: #ff005d;
  text-decoration: none;
  transition: opacity 0.3s;
}

.news-detail-contents .news-detail-body.editor a:hover {
  color: #ff005d;
  text-decoration: none;
  opacity: 0.6;
}

/* =============================================================
   画像  （旧 .post-content img : margin-bottom 3.7em）
   ---------------------------------------------------------------
   注意: 移行後の画像は wpautop により <p> の中に配置され、
         width="1270" height="437" 属性と sizes="auto, ..." を持つ。
         ブラウザが intrinsic size で大きく描画してしまうため、
         display:block + max-width:100% + height:auto を !important で強制し、
         width 属性由来のサイズ指定を確実に上書きする。
   ============================================================= */
.news-detail-contents .news-detail-body.editor img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  /* aspect-ratio を打ち消し、object-fit も無効化。
     これで画像要素の box は intrinsic (width/height 属性) のまま、
     レイアウトは width:auto + max-width + height:auto で自然に決まる。
     object-fit を指定すると aspect-ratio 由来の余白が残るため指定しない。 */
  aspect-ratio: auto !important;
  -o-object-fit: fill !important;
     object-fit: fill !important;
  margin: 0 auto 3.7em !important;
}

/* <p> / <figure> にネストされた場合も同じ制約を適用 */
.news-detail-contents .news-detail-body.editor p img,
.news-detail-contents .news-detail-body.editor figure img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  -o-object-fit: fill !important;
     object-fit: fill !important;
}

.news-detail-contents .news-detail-body.editor .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.news-detail-contents .news-detail-body.editor .alignleft {
  float: left;
  margin: 0 10px 10px 0;
}

.news-detail-contents .news-detail-body.editor .alignright {
  float: right;
  margin: 0 0 10px 10px;
}

/* =============================================================
   強調
   ============================================================= */
.news-detail-contents .news-detail-body.editor strong,
.news-detail-contents .news-detail-body.editor b {
  font-weight: 700;
}

.news-detail-contents .news-detail-body.editor em {
  font-style: italic;
}

/* =============================================================
   色付きテキスト (旧サイトの青色見出し等、インラインスタイル保持)
   ============================================================= */
.news-detail-contents .news-detail-body.editor span[style*="color: #0000ff"],
.news-detail-contents .news-detail-body.editor span[style*="color:#0000ff"] {
  color: #0000ff;
}

/* =============================================================
   テーブル
   ============================================================= */
.news-detail-contents .news-detail-body.editor table {
  width: auto;
  border-width: 1px;
  border-collapse: collapse;
  margin: 0 0 2em;
}

.news-detail-contents .news-detail-body.editor table th,
.news-detail-contents .news-detail-body.editor table td {
  border: 1px solid #000;
  padding: 5px;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
  vertical-align: top;
}

.news-detail-contents .news-detail-body.editor table th {
  font-weight: 700;
}

/* =============================================================
   リスト
   ============================================================= */
.news-detail-contents .news-detail-body.editor ul,
.news-detail-contents .news-detail-body.editor ol {
  margin: 0 0 1.5em 20px;
  padding: 0 0 0 20px;
}

.news-detail-contents .news-detail-body.editor ol {
  list-style: decimal;
}

.news-detail-contents .news-detail-body.editor ul {
  list-style: disc;
}

.news-detail-contents .news-detail-body.editor li {
  margin: 4px 0;
  line-height: inherit;
}

/* =============================================================
   レスポンシブ  （旧サイト SP: line-height 1.464, p margin-bottom 1.35em）
   ============================================================= */
@media screen and (max-width: 767.98px) {
  .news-detail-contents .news-detail-body.editor {
    font-size: 14px;
    line-height: 1.464;
  }

  .news-detail-contents .news-detail-body.editor p {
    margin: 0 0 1.35em;
    font-feature-settings: "palt";
  }

  .news-detail-contents .news-detail-body.editor h2 {
    font-size: 22px;
    padding-left: 10px;
    margin-bottom: 24px;
  }

  .news-detail-contents .news-detail-body.editor h3 {
    font-size: 16px;
    padding: 6px 6px 4px;
    margin-bottom: 16px;
  }

  .news-detail-contents .news-detail-body.editor img {
    width: 100%;
    margin-bottom: 2.7em;
  }
}