@charset "utf-8";
/* =============================================================
   南紀黒潮パートナーズ株式会社 公式サイト｜静的HTML本制作
   pages/news-single.css ─ お知らせ個別記事ページ固有

   1. 記事ヒーロー（分類・日付・タイトル）
   2. アイキャッチ・リード
   3. 記事本文 .entry-content（WordPress の the_content() がそのまま入る領域）
      3-1 段落・強調・リンク
      3-2 見出し h2 / h3 / h4
      3-3 リスト
      3-4 引用
      3-5 区切り線
      3-6 画像・figure
      3-7 表
      3-8 ボタン（Gutenberg）
      3-9 Gutenberg の一般的な補助class
   4. 下部導線（お知らせ一覧へ戻る）
   5. レスポンシブ

   ブログにしすぎず、企業サイトの正式なお知らせとして見せる。
   SNSシェア・著者情報・タグ一覧は置かない。
   分類・日付の見た目（.news-category / .news-date）は components.css 8章と共通。
   ============================================================= */

/* -------------------------------------------------------------
   1. 記事ヒーロー
   共通の .page-hero（components.css）を、記事用に上書きする。
   内容は読みものとして 880px の幅に収める。
   ------------------------------------------------------------- */
.post-hero{
  padding:calc(var(--header-h) + clamp(44px,6vw,80px)) 0 clamp(48px,6vw,80px);
}
.post-hero .page-hero-inner{max-width:880px}
/* 分類と日付。濃紺の上に置くため色を明るくする */
.post-meta{display:flex;align-items:center;gap:14px;margin-bottom:clamp(16px,2vw,24px)}
.post-meta .news-category{border-color:rgba(255,255,255,.4);color:#fff}
.post-meta .news-date{color:var(--on-dark-soft)}
.post-title{font-size:clamp(25px,3.3vw,42px);line-height:1.65}

/* -------------------------------------------------------------
   2. アイキャッチ・リード
   アイキャッチは 16:9 の枠。投稿にアイキャッチが無い場合は
   news-placeholder.svg を同じ枠に出す（Phase 2：has_post_thumbnail() で分岐）。
   本文は 680px の幅で、明朝の行間を広めに読ませる。
   ------------------------------------------------------------- */
.post-body{background:var(--white)}
.post-inner{max-width:880px;padding-block:clamp(48px,6vw,88px) var(--section-pad)}
.post-eyecatch{
  overflow:hidden;margin:0;aspect-ratio:16 / 9;
  border:1px solid var(--line);background:var(--tint);
}
.post-eyecatch img{width:100%;height:100%;object-fit:cover}
.post-content{max-width:680px;margin:clamp(40px,5vw,64px) auto 0}
/* リード（概要・任意）。本文との間を細い罫線で区切る */
.post-lead{
  padding-bottom:clamp(22px,2.8vw,34px);margin-bottom:clamp(26px,3.2vw,40px);
  border-bottom:1px solid var(--line);
  font-size:clamp(16px,1.4vw,17.5px);font-weight:500;line-height:2;letter-spacing:.06em;color:var(--ink);
  text-wrap:pretty; /* 最終行に1〜2文字だけ残る折り返しを避ける（対応ブラウザのみ） */
}

/* -------------------------------------------------------------
   3. 記事本文 .entry-content
   Phase 2 では the_content() の出力をこの要素の中へそのまま入れる。
   WordPress 標準ブロック（段落・見出し・リスト・画像・引用・表・ボタン・区切り）の
   一般的な出力を対象にする。ギャラリー・カラム・埋め込み等の高度なブロックは
   必要になった時点で追加する（先回りして書かない）。
   すべて .entry-content を前置し、WordPress 本体のブロックCSSより優先させる。
   ------------------------------------------------------------- */
.entry-content{
  font-size:15.5px;line-height:2.15;letter-spacing:.045em;color:var(--ink-soft);
  overflow-wrap:anywhere; /* 長いURL・英単語でも本文幅からはみ出さない */
  text-wrap:pretty;       /* 最終行に1〜2文字だけ残る折り返しを避ける（対応ブラウザのみ） */
}
/* 要素間の余白は「前の要素との間」で統一する */
.entry-content > *{margin-block:0}
.entry-content > * + *{margin-top:1.75em}
.entry-content > :first-child{margin-top:0}

/* 3-1 段落・強調・リンク ------------------------------------ */
.entry-content strong{font-weight:700;color:var(--ink)}
/* 明朝の斜体は崩れやすいため、日本語の強調は圏点（金）で示す */
.entry-content em{
  font-style:normal;
  -webkit-text-emphasis:filled sesame var(--gold-text);text-emphasis:filled sesame var(--gold-text);
}
/* リンクは濃紺の文字＋金の下線。青のデフォルトにしない。フォーカスの枠は base.css の共通指定 */
.entry-content a{
  color:var(--blue);
  text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:.3em;
  transition:color .35s var(--ease),text-decoration-color .35s var(--ease);
}
.entry-content a:is(:hover,:focus-visible){color:var(--gold-text);text-decoration-color:currentColor}

/* 3-2 見出し ----------------------------------------------------
   明朝・細い罫線・金の小さなアクセントで階層を作る。見出しだけ巨大にしない。
   h2：上に短い金の線。h3：左に細い金の縦線。h4：濃紺の文字のみ。 */
.entry-content h2{
  position:relative;margin-top:3.2em;padding-top:20px;
  font-size:clamp(20px,1.9vw,23px);font-weight:500;line-height:1.75;letter-spacing:.08em;color:var(--ink);
}
.entry-content h2::before{content:"";position:absolute;left:0;top:0;width:28px;height:1px;background:var(--gold)}
.entry-content h3{
  margin-top:2.6em;padding-left:16px;border-left:1px solid var(--gold);
  font-size:clamp(17.5px,1.5vw,19px);font-weight:500;line-height:1.8;letter-spacing:.07em;color:var(--ink);
}
.entry-content h4{
  margin-top:2.2em;
  font-size:16px;font-weight:500;line-height:1.85;letter-spacing:.06em;color:var(--blue);
}
.entry-content :is(h5,h6){margin-top:2em;font-size:15.5px;font-weight:500;color:var(--ink)}
/* 見出しの直後は間を詰める */
.entry-content :is(h2,h3,h4,h5,h6) + *{margin-top:1.1em}

/* 3-3 リスト ----------------------------------------------------
   ブラウザ標準の記号を残し（base.css の list-style:none を戻す）、色と余白だけ整える。 */
.entry-content ul{list-style:disc;padding-left:1.5em}
.entry-content ol{list-style:decimal;padding-left:1.6em}
.entry-content li{padding-left:.3em}
.entry-content li + li{margin-top:.5em}
.entry-content li > :is(ul,ol){margin-top:.5em}
.entry-content li > p{margin:0}
.entry-content ul > li::marker{color:var(--gold);font-size:.85em}
.entry-content ol > li::marker{font-family:var(--font-en);font-weight:600;font-size:.88em;letter-spacing:.04em;color:var(--gold-text)}

/* 3-4 引用 ------------------------------------------------------
   左に細い金の縦線と淡い面。文字は本文より少し静かに。大きな引用符は付けない。 */
.entry-content blockquote{
  margin-block:2.2em;padding:1.2em 1.5em;
  border-left:1px solid var(--gold);background:var(--paper);
  font-size:15px;color:var(--muted);
}
.entry-content blockquote > * + *{margin-top:1.1em}
.entry-content blockquote cite{
  display:block;margin-top:1em;
  font-size:12.5px;font-style:normal;letter-spacing:.06em;color:var(--muted);
}

/* 3-5 区切り線：短い金の線を中央に。WordPress の区切りブロック（.wp-block-separator）も同じ ---- */
.entry-content hr{
  width:48px;height:1px;margin:3em auto;border:0;background:var(--gold);opacity:1;
}
.entry-content hr.is-style-wide{width:100%;background:var(--line)}

/* 3-6 画像・figure ---------------------------------------------
   本文幅を超えない。縦長は高さを抑え、横長はそのまま収める。 */
.entry-content img{display:block;width:auto;max-width:100%;height:auto;max-height:760px}
.entry-content figure{margin-block:2.4em}
.entry-content figcaption{
  margin-top:10px;
  font-size:12.5px;line-height:1.9;letter-spacing:.05em;color:var(--muted);
}

/* 3-7 表 --------------------------------------------------------
   細い罫線と見出し行の区別。列が多い表は表の中だけ横スクロールにし、ページ全体ははみ出させない。
   Gutenberg の表は <figure class="wp-block-table"> に包まれるので、そこをスクロール領域にする。
   手書きHTMLで表を置く場合も <div class="table-scroll"> で包む。 */
.entry-content :is(.wp-block-table,.table-scroll){overflow-x:auto;-webkit-overflow-scrolling:touch}
.entry-content table{
  width:100%;border-collapse:collapse;border-top:1px solid var(--line);
  font-size:14.5px;line-height:1.9;
}
.entry-content :is(th,td){
  min-width:8em;padding:.8em 1em; /* 見出しセルの短い語が途中で折れない幅。列が多ければ表の中で横スクロール */
  border:0;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top;
}
.entry-content thead th{font-weight:500;color:var(--ink);background:var(--paper);border-bottom:1px solid var(--blue)}
.entry-content tbody th{font-weight:500;color:var(--ink);background:var(--paper)}
.entry-content table caption{
  padding-bottom:10px;caption-side:top;
  font-size:12.5px;letter-spacing:.05em;text-align:left;color:var(--muted);
}

/* 3-8 ボタン（Gutenberg）---------------------------------------
   サイト全体のCTAと競合しない、本文用の控えめな枠線ボタン。触れると濃紺に反転。 */
.entry-content .wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px 14px}
.entry-content .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:10px 26px;border:1px solid var(--blue);border-radius:2px;
  background:transparent;color:var(--blue);
  font-size:14px;font-weight:500;letter-spacing:.08em;line-height:1.6;text-decoration:none;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.entry-content .wp-block-button__link:is(:hover,:focus-visible){background:var(--blue);color:#fff}

/* 3-9 Gutenberg の一般的な補助class（最小限）--------------------- */
.entry-content .has-text-align-center{text-align:center}
.entry-content .has-text-align-right{text-align:right}
.entry-content .aligncenter{margin-inline:auto;text-align:center}
.entry-content .aligncenter img{margin-inline:auto}

/* -------------------------------------------------------------
   4. 下部導線
   ------------------------------------------------------------- */
.post-footer{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  max-width:680px;margin:clamp(44px,5.6vw,72px) auto 0;padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--line);
}
/* 「一覧へ戻る」は矢印を左向きに反転させる（触れたときの動きも左へ） */
.news-back .flow-cue{transform:scaleX(-1)}

/* -------------------------------------------------------------
   5. レスポンシブ
   ------------------------------------------------------------- */
@media (max-width:600px){
  .post-hero{padding:calc(var(--header-h) + clamp(40px,7vw,56px)) 0 clamp(40px,6vw,56px)}
  /* 狭い画面では字間を少し詰め、15文字程度のタイトルが1行に収まるようにする */
  .post-title{font-size:clamp(20px,5.6vw,24px);letter-spacing:.05em}
  .post-inner{padding-top:clamp(36px,6vw,48px)}
  .post-lead{font-size:15.5px}
  /* 本文は小さくしすぎない（15px）。見出しは段階を保ったまま少し下げる */
  .entry-content{font-size:15px;line-height:2.05}
  .entry-content h2{margin-top:2.8em;font-size:19px}
  .entry-content h3{font-size:17px}
  .entry-content h4{font-size:15.5px}
  .entry-content blockquote{padding:1em 1.1em;font-size:14.5px}
  .entry-content table{font-size:13.5px}
  .entry-content :is(th,td){padding:.7em .8em}
  .entry-content .wp-block-button__link{min-height:46px;padding:9px 22px;font-size:13.5px}
}