/* ============================================================================================================================
記事用CSS
============================================================================================================================ */

/* ベース */
section.post-content { padding:0 30px; margin:auto; margin-bottom:80px; }

/* 記事データ */
ul.post-data { align-items:center; gap:8px; justify-content:flex-start; margin-bottom:16px; }
ul.post-data li:first-child::before { aspect-ratio:1/1; display:inline-block; height:30px; width:30px; }
ul.post-data li { font-weight:700; }
ul.post-data a { align-items:center; font-size:16px; justify-content:center; letter-spacing:5px; height:30px; width:140px; }

/* カテゴリ別 */
ul.post-data.affairs li:first-child::before { background-image:url('../img/single/icon-affairs.svg'); }
ul.post-data.event li:first-child::before { background-image:url('../img/single/icon-event.svg'); }
ul.post-data.affairs li a { background-color:#ffccd1; }
ul.post-data.event li a { background-color:#ff8e96; }

/* 見出し */
section.post-content h2.post-title { font-size:26px; font-weight:700; letter-spacing:5.2px; margin-bottom:30px; }

/* 戻るボタン */
p.btn-more { margin-top:40px; }

@container( min-width:960px ) {

/* ベース */
section.post-content { padding:0; margin-top:60px; margin-bottom:120px; max-width:1000px; width:100%; }
ul.post-data li { gap:16px; }


}

/* ============================================================================================================================
投稿補助用（テンプレ）
============================================================================================================================ */

/* ------------------------------
   Basic Typo / Layout
   モバイルファースト
------------------------------ */

/* ベース */
section.post-content div.post-text { word-break:break-word; }

/* 見出し */
section.post-content div.post-text h2,
section.post-content div.post-text h3,
section.post-content div.post-text h4 { line-height:1.6; margin:1em 0; }
section.post-content div.post-text h2 { font-size:1.5em; }
section.post-content div.post-text h3 { font-size:1.3em; }
section.post-content div.post-text h4 { font-size:1.15em; }

/* リスト */
section.post-content div.post-text ul,
section.post-content div.post-text ol { margin: 1.2em 0 1.2em 1.4em; }

/* ------------------------------
   Images（Classic / Block 共通）
------------------------------ */

section.post-content div.post-text img { display:block; height:auto; max-width:100%; width:100%; }

/* 中央寄せ（Classic: aligncenter / Block: is-resized + aligncenter対応） */
section.post-content div.post-text .aligncenter,
section.post-content div.post-text figure.aligncenter { display:block; text-align:center; margin:auto; }

/* 左右寄せ（モバイルでは寄せず全幅） */
section.post-content div.post-text .alignleft,
section.post-content div.post-text figure.alignleft,
section.post-content div.post-text .alignright,
section.post-content div.post-text figure.alignright { float:none; display:block; margin:auto; }

/* ------------------------------
   Caption（Classic / Block 共通）
------------------------------ */

section.post-content div.post-text figure { text-align:center; margin:10px 0; }
section.post-content div.post-text figcaption,
section.post-content div.post-text .wp-caption .wp-caption-text { line-height:1.6; margin-top:0.6em; }

/* Classic Editor の .wp-caption 特有のスタイル */
section.post-content div.post-text .wp-caption { text-align:center; margin:10px auto; max-width:100%; }
section.post-content div.post-text .wp-caption img { margin:0; }

/* ------------------------------
   Desktop（960px〜）
------------------------------ */
@container (min-width: 960px) {

/* 左右寄せをデスクトップで有効化 */
section.post-content div.post-text .alignleft,
section.post-content div.post-text figure.alignleft { float:left; margin:0.4em 1em 1em 0; }
section.post-content div.post-text .alignright,
section.post-content div.post-text figure.alignright { float:right; margin:0.4em 0 1em 1em; }

}