/* ============================================================
   FineCMS System CSS
   基本スタイル。上書きは /css/style.css に記述してください。
   ============================================================ */

/* ─── CMS システムデフォルト変数 ────────────────────────── */
/* color_vars.php / basic_vars.php で上書き可能 */
:root {
  --col-overlay: rgba(0,0,0,.45);
  --col-shadow:  rgba(0,0,0,.08);
}

/* ─── リセット・ベース ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }

/* タイポ（font-family/size/weight/color/見出しサイズ）は basic-style（スタイル層④）の領分へ
   移管（2026-06-30・層の責務境界）。構造層③ここは margin/レンダリングのリセットのみ残す。
   docs/style-design.md 参照。 */
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 横はみ出しの吸収：bg-blob 等の「枠外に描く装飾」（overflow:visible の疑似要素）が
   ビューポート右端/左端を超えても body に横スクロールを作らせない。
   ⚠️ overflow-x:hidden やなく clip を使う＝clip はスクロールコンテナを作らないので
   .site-header の position:sticky が生きたまま（hidden だと sticky が死ぬ）。
   clip 非対応の古いブラウザでは従来どおり（横スクロールが出るだけ・レイアウトは壊れない）
   なので、sticky を壊す hidden のフォールバックはあえて書かない。 */
html, body { overflow-x: clip; }

h1, h2, h3, h4, h5, h6 { margin: 0; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--col-a); text-decoration: none; }
a:hover { opacity: .8; }

/* ─── インナーコンテナ ──────────────────────────────────── */
.cms-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ─── ブロック ──────────────────────────────────────────── */
.cms-block {
  width: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

/* ホバー式サブメニューを含むブロックは overflow:visible（2階層目ドロップダウンが
   ブロックの下に出るため、上の overflow:hidden に切られないよう :has で上書き）。 */
.cms-block:has(.cms-menu--sub-hover) { overflow: visible; }

/* 背景動画（bg_video）。可変値（object-fit / border-radius）はインライン側で上書き */
.cms-block-bgvideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 背景動画の暗幕（overlay_opacity）。opacity はインライン指定 */
.cms-block-bgvideo-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
  z-index: 1;
}

/* 背景動画があるとき .cont を動画・暗幕より前面に出す */
.cms-block > .cont {
  position: relative;
  z-index: 2;
}

/* ─── .cont＝ブロックコンテナの基礎構造（max-width・中央寄せ・余白）──────────────
   基礎構造の padding はここ（cms.css）が正本（層の責務境界・docs/style-design.md 参照）。
   ★ basic-style（id5 等・層④）が同じセレクタで上書きしたら後読みで勝つ＝basic 優先。
     そのため cms.css 側は !important を付けない／basic と同一セレクタ・同詳細度に揃える。
   値は変数で受け、フォールバックは従来の効き値（max-width 1080px / 左右 1.5rem / 上下 5rem）。
   顧客が --cont-width / --cont-side / --block-pad を設定すればそちらが効く（basic_vars.php）。 */
.cont {
  max-width: var(--cont-width, 1080px);
  margin: 0 auto;
  padding-left:  var(--cont-side, 1.5rem);
  padding-right: var(--cont-side, 1.5rem);
  box-sizing: border-box;
}

/* ブロックの上下余白（特殊ブロック＝site-header / site-footer / full は除外） */
.cms-block:not(.cms-block--site-header):not(.cms-block--site-footer):not(.cms-block--full) > .cont {
  padding-top:    var(--block-pad, 5rem);
  padding-bottom: var(--block-pad, 5rem);
}

/* 左右ブロックは詰めた余白 */
.cms-block--left .cont,
.cms-block--right .cont {
  padding: 2rem 1.25rem;
}

/* 全幅・ヘッダー・フッター：余白なし・最大幅なし */
.cms-block--full > .cont,
.cms-block--site-header > .cont,
.cms-block--site-footer > .cont {
  max-width: none;
  padding: 0;
}

/* スマホは上下余白を詰める */
@media (max-width: 768px) {
  .cms-block:not(.cms-block--site-header):not(.cms-block--site-footer):not(.cms-block--full) > .cont {
    padding-top:    var(--block-pad-sp, 3rem);
    padding-bottom: var(--block-pad-sp, 3rem);
  }
}

/* ブロック余白 ON/OFF（管理画面のチェックを外すと no-pad-* を付与＝該当方向の padding を 0 に）。
   基礎余白ルール（上）は詳細度 (0,5,0)。同じ :not チェーンを重ねて (0,6,0) にし、
   PC/SP どちらの基礎ルールにも !important なしで確実に勝たせる（docs/block-margin-design.md §4）。
   @list には登録しない＝css_class ピッカー/AIカタログに出さない（ユーザー向けクラスを増やさない）。 */
.cms-block:not(.cms-block--site-header):not(.cms-block--site-footer):not(.cms-block--full).no-pad-top    > .cont { padding-top: 0; }
.cms-block:not(.cms-block--site-header):not(.cms-block--site-footer):not(.cms-block--full).no-pad-bottom > .cont { padding-bottom: 0; }
.cms-block:not(.cms-block--site-header):not(.cms-block--site-footer):not(.cms-block--full).no-pad-x      > .cont { padding-left: 0; padding-right: 0; }


/* ─── 投稿記事エリア ─────────────────────────────────────── */
/* 幅制約なし＝記事ブロックもページと同様、各ブロックの .cont が幅を決める（800px枠は撤去） */

/* ヘッダー/フッターはブロックの .cont と同じ概念（幅1080px・横1.5rem）に揃える。
   隣接する本文ブロックが上下5remを持つので、head下・foot上は0にして余白の二重化を防ぐ */
.cms-post-head,
.cms-post-foot {
  max-width: 1080px;
  margin: 0 auto;
}
.cms-post-head { padding: 5rem 1.5rem 0; }
/* フッターは縦並び＝カテゴリ行・タグ行が間隔(gap)を空けて並ぶ（ぴったり詰まり防止） */
.cms-post-foot {
  padding: 0 1.5rem 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

/* タイトル：幅は親(.cms-post-head)が持つので、ここは装飾と中央寄せだけ */
.cms-post-title {
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--col-d, #eee);
  text-align: center;
}

/* 日付：タイトル上の前見出し。中央寄せ・小さめグレー */
.cms-post-date {
  margin: 0 0 .5rem;
  text-align: center;
  font-size: .8rem;
  color: var(--col-f);
  opacity: .6;
}

/* カテゴリ・タグ：背景pill（文字=白 --col-w／背景はカテゴリ=-b・タグ=-c） */
.cms-post-cats,
.cms-post-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4em;
  margin: 0;
}
.cms-post-cats span,
.cms-post-tags span {
  color: var(--col-w);
  font-size: .8rem;
  line-height: 1.4;
  border-radius: 2em;
  padding: .25em .85em;
}
.cms-post-cats span { background: var(--col-b); }
.cms-post-tags span { background: var(--col-c); }

/* 一覧アイテム内で流用された時は、上に余白＋左寄せ（カード内の他要素に揃える・詰まり防止） */
.cms-post-list-item .cms-post-cats,
.cms-post-list-item .cms-post-tags {
  margin-top: 1em;
  justify-content: flex-start;
}

/* ─── サイトヘッダー ─────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--col-w, #fff);
  box-shadow: 0 1px 6px var(--col-shadow, rgba(0,0,0,.08));
}

/* ─── ロゴパーツ ────────────────────────────────────────── */
/* header 内: 左端に absolute 固定・クリック範囲をロゴサイズに限定 */
.cms-block--site-header .cms-part--logo {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: fit-content;
}
/* header 以外: 通常フロー・中央寄せ */
.cms-block:not(.cms-block--site-header) .cms-part--logo {
  padding: 1rem 1.5rem;
  text-align: center;
}
/* .cms-logo img のサイズは末尾の var 版に一本化（高さ/最大幅/SP をパーツ設定で制御） */
.cms-logo--text {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--col-a, #0066cc);
}

/* ─── メニューパーツ ─────────────────────────────────────── */
.cms-part--menu { padding: .75rem 1.5rem; }
.cms-menu ul    { gap: .25rem; }
.cms-menu a {
  padding: .75rem 1rem;
  color: var(--col-f, #444);
  font-size: .9rem;
  font-weight: 500;
  transition: color .2s;
}
.cms-menu a:hover { color: var(--col-a, #0066cc); }

/* header: 右寄せ横並び＋ul の右端に余白を足す */
.cms-block--site-header .cms-menu--row ul { justify-content: flex-end; padding-right: 2.5rem; }

/* normal / full / column: センタリング横並び */
.cms-block--normal .cms-menu--row ul,
.cms-block--full   .cms-menu--row ul,
.cms-block--column .cms-menu--row ul { justify-content: center; }

/* left / right (サイドバー幅): 縦並びに強制 */
.cms-block--left  .cms-menu ul,
.cms-block--right .cms-menu ul {
  flex-direction: column;
}
.cms-block--left  .cms-part--menu,
.cms-block--right .cms-part--menu { padding: .5rem 0; }

/* ─── フッターブロック ──────────────────────────────────── */
.cms-block--site-footer {
  /* 背景色・文字色は指定しない（他のブロックと同じくtransparent＝bodyの背景・文字色を継承）。
     bg_var が設定されていればその時だけ index.php がインラインstyleで上書きする */
  text-align: center;
}
.cms-block--site-footer .cont { padding: 2.5rem 1.5rem; }
.cms-block--site-footer p { margin: .3em 0; font-size: .85rem; opacity: .7; }

/* ─── 3カラムレイアウト ─────────────────────────────────── */
.cms-layout-3col {
  display: grid;
  grid-template-columns: minmax(14rem, 25%) 1fr minmax(14rem, 25%);
  grid-template-areas: "left center right";
}
.cms-layout-3col--left-only {
  grid-template-columns: minmax(14rem, 25%) 1fr;
  grid-template-areas: "left center";
}
.cms-layout-3col--right-only {
  grid-template-columns: 1fr minmax(14rem, 25%);
  grid-template-areas: "center right";
}
.cms-col-left   { grid-area: left; }
.cms-col-center { grid-area: center; min-width: 0; }
.cms-col-right  { grid-area: right; }

/* ─── カラムグリッド ────────────────────────────────────── */
.cms-column-grid--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
.cms-column-grid--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.cms-column-grid--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; }
.cms-column-grid--5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.8rem; }

/* ─── カードレイアウト（column ブロック + is_card） ─────── */
.cms-block--card .cms-column-grid { gap: 1.8rem; }
.cms-block--card .cms-column-grid > .cms-part {
  border: 1px solid var(--col-shadow, rgba(0,0,0,.10));
  border-radius: 6px;
  box-shadow: 0 2px 8px var(--col-shadow, rgba(0,0,0,.06));
  overflow: hidden;
  transition: box-shadow .2s;
}
.cms-block--card .cms-column-grid > .cms-part:hover {
  box-shadow: 0 4px 16px var(--col-shadow, rgba(0,0,0,.12));
}

/* ─── メニュー ──────────────────────────────────────────── */
.cms-menu ul { list-style: none; margin: 0; padding: 0; display: flex; }
.cms-menu--row ul    { flex-direction: row; flex-wrap: wrap; }
.cms-menu--column ul { flex-direction: column; }
.cms-menu a  { display: block; padding: .5rem 1rem; text-decoration: none; }

/* ─── ロゴ ──────────────────────────────────────────────── */
.cms-logo          { display: inline-block; text-decoration: none; }
.cms-logo--text    { font-weight: bold; }
/* マーク＋テキストロゴを横並びに（画像と text 両方ある場合） */
.cms-logo--with-text { display: inline-flex; align-items: center; gap: .6rem; }
.cms-logo--with-text .cms-logo__text { font-weight: bold; font-size: 1.125rem; }

/* ─── パーツ共通 ────────────────────────────────────────── */
.cms-part { width: 100%; }

/* ─── text_only ─────────────────────────────────────────── */
.cms-part--text_only .txt1 { white-space: pre-line; }

/* ─── パーツの画像フィールド（img1/img2…）は幅いっぱい ──────── */
/* パーツの「画像選択」で入れた画像はコンテナ幅いっぱいに広げる。       */
/* ※ エディタ本文（.cms-rte）内に挿入した画像は対象外＝元サイズを尊重。 */
.cms-part .wrap > [class^="img"] > img {
  width: 100%;
}

/* ─── image_only ────────────────────────────────────────── */
/* .cms-part--image_only .img1 → 画像のみ */

/* ─── text_image（テキスト上・画像下） ──────────────────── */
.cms-part--text_image .wrap {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* ─── image_text（画像上・テキスト下） ──────────────────── */
.cms-part--image_text .wrap {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* ─── 横並びパーツ：箱の幅で折り返す（コンテナクエリ）────────── */
/* image_left / text_left は「画像＋テキストの横並び」。狭ブロック       */
/* （3列以上カラム・left/right サイドバー）や狭い画面に入ると箱が縮む。  */
/* パーツ自身を計測対象（container）にして、箱幅が 400px 以下になったら   */
/* 縦積み（1fr）に折り返す。＝「狭セル」も「狭画面」も"箱が狭い"で統一。 */
/* これでスマホ用メディアクエリ（旧 @media 768px）も兼ねられる。        */
.cms-part--image_left_s,
.cms-part--image_left_m,
.cms-part--image_left_l,
.cms-part--text_left_l,
.cms-part--text_left_m,
.cms-part--text_left_s { container-type: inline-size; }

/* ─── image_left_s / m / l ─────────────────────────────── */
.cms-part--image_left_s .wrap,
.cms-part--image_left_m .wrap,
.cms-part--image_left_l .wrap {
  display: grid;
  gap: 1rem;
  align-items: start;
}
.cms-part--image_left_s .wrap { grid-template-columns: 1fr 3fr; }
.cms-part--image_left_m .wrap { grid-template-columns: 1fr 2fr; }
.cms-part--image_left_l .wrap { grid-template-columns: 1fr 1fr; }

/* ─── text_left_l / m / s ──────────────────────────────── */
.cms-part--text_left_l .wrap,
.cms-part--text_left_m .wrap,
.cms-part--text_left_s .wrap {
  display: grid;
  gap: 1rem;
  align-items: start;
}
.cms-part--text_left_l .wrap { grid-template-columns: 1fr 1fr; }
.cms-part--text_left_m .wrap { grid-template-columns: 2fr 1fr; }
.cms-part--text_left_s .wrap { grid-template-columns: 3fr 1fr; }

/* 箱の幅が 400px 以下＝横並びは窮屈なので縦積みに折り返す */
@container (max-width: 400px) {
  .cms-part--image_left_s .wrap,
  .cms-part--image_left_m .wrap,
  .cms-part--image_left_l .wrap,
  .cms-part--text_left_l .wrap,
  .cms-part--text_left_m .wrap,
  .cms-part--text_left_s .wrap { grid-template-columns: 1fr; }
}

/* ─── txt_img_txt ───────────────────────────────────────── */
.cms-part--txt_img_txt .wrap {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.cms-part--txt_img_txt .txt1,
.cms-part--txt_img_txt .txt2 { white-space: pre-line; }

/* ─── img_txt_img ───────────────────────────────────────── */
.cms-part--img_txt_img .wrap {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* ─── hero（全幅ヒーロー）────────────────────────────────── */
.cms-part--hero_a {
  position: relative;
  overflow: hidden;
}
.cms-part--hero_a .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  padding: 4rem max(4rem, 8vw);
  min-height: 60vh;
}

/* 背景画像：absolute で親要素全体を覆う */
.cms-part--hero_a .img1 {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cms-part--hero_a .img1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 暗幕オーバーレイ */
.cms-part--hero_a .img1::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--col-overlay, rgba(0,0,0,.45));
}

/* テキスト：画像より前面に（文字サイズ等はエディタの設定を尊重） */
.cms-part--hero_a .txt1,
.cms-part--hero_a .txt2,
.cms-part--hero_a .txt3 {
  position: relative;
  z-index: 1;
}


/* ─── テキスト改行 ──────────────────────────────────────── */
.txt1,
.txt2 { white-space: pre-line; }

/* ─── text_only パーツ（セクション見出し・CTA等）─────────── */
/* text-align はエディタに委ねる（CMS側で強制しない） */
/* レイアウトは .wrap に当てる（他パーツと統一・wrap_style で上書き可能にするため） */
.cms-part--text_only .wrap {
  max-width: 800px;
  margin: 0 auto;
}
.cms-part--text_only h2 { margin: 0 0 .75em; }
.cms-part--text_only h3 { margin: 0 0 .5em; }
.cms-part--text_only p  { }

/* ─── image_left_* / text_left_* パーツ（テキスト整形）───── */
.cms-part--image_left_s .txt1,
.cms-part--image_left_m .txt1,
.cms-part--image_left_l .txt1,
.cms-part--text_left_l .txt1,
.cms-part--text_left_m .txt1,
.cms-part--text_left_s .txt1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cms-part--image_left_s h3,
.cms-part--image_left_m h3,
.cms-part--image_left_l h3,
.cms-part--text_left_l h3,
.cms-part--text_left_m h3,
.cms-part--text_left_s h3 { margin: 0 0 .75em; color: var(--col-z); }
.cms-part--image_left_s p,
.cms-part--image_left_m p,
.cms-part--image_left_l p,
.cms-part--text_left_l p,
.cms-part--text_left_m p,
.cms-part--text_left_s p  { color: var(--col-f); margin: 0; line-height: 1.8; }

/* ─── リッチテキスト (.cms-rte) ─────────────────────────── */
.cms-rte p { margin: 0 0 .75em; line-height: 1.7; }
.cms-rte p:last-child { margin-bottom: 0; }

.cms-rte h1 { margin: 1.2em 0 .5em; }
.cms-rte h2 { margin: 1.1em 0 .45em; }
.cms-rte h3 { margin: 1em 0 .4em; }
.cms-rte :is(h1,h2,h3):first-child { margin-top: 0; }

.cms-rte ul,
.cms-rte ol { margin: .5em 0 .75em 1.5em; padding: 0; }
.cms-rte li { margin-bottom: .25em; line-height: 1.7; }
.cms-rte ul { list-style: disc; }
.cms-rte ol { list-style: decimal; }

.cms-rte a { text-decoration: underline; }

/* ─── CTAボタン (.cms-btn) ──────────────────────────────── */
.cms-btn {
  display: inline-block;
  padding: .6em 1.8em;
  background: var(--col-a, #0066cc);
  color: var(--col-w, #fff) !important;
  font-weight: bold;
  text-decoration: none !important;
  border-radius: .375rem;
  letter-spacing: .03em;
  line-height: 1.4;
  transition: opacity .15s;
}
.cms-btn:hover { opacity: .85; }
.cms-btn--outline {
  background: transparent;
  border: 2px solid var(--col-a, #0066cc);
  color: var(--col-a, #0066cc) !important;
}

/* ─── richtext 内 画像クラス ────────────────────────────── */
img.cms-img-block {
  display: block;
  max-width: 100%;
  height: auto;
  margin: .75em 0;
}
img.cms-img-inline {
  display: inline-block;
  height: 1.2em;
  width: auto;
  vertical-align: middle;
}

/* ─── post-list ブロック ─────────────────────────────────── */
.cms-block--post-list .cont {
  max-width: 1080px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.cms-post-list-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}
.cms-post-list-title {
  margin: 0 0 2rem;
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;   /* 一覧ページの見出し（例「トピックス一覧」）を中央寄せ（詳細タイトルに揃える） */
}

.cms-post-list-empty {
  color: var(--col-f);
  opacity: .6;
  text-align: center;
  padding: 2rem 0;
}

/* post-list ブロックの見出し（タイトル・未入力時は出力されない） */
.cms-post-list-heading {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;   /* post-list ブロックの見出し（例「新着トピックス」）を中央寄せ */
}

/* アイテム共通 */
.cms-post-list-item {
  display: flex;
  flex-direction: column;
}
.cms-post-list-item a {
  color: inherit;
  text-decoration: none;
}
.cms-post-list-item a:hover { opacity: .75; }
.cms-post-list-item h3 { margin: 0 0 .4em; font-size: 1rem; }
.cms-post-list-item p  { margin: 0; font-size: .875rem; opacity: .7; line-height: 1.6; }

/* アイテム内部構造（__thumb / __body / __date / __cats） */
.cms-post-list-item__thumb { overflow: hidden; border-radius: .25rem; }
.cms-post-list-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cms-post-list-item__body { flex: 1; min-width: 0; }
.cms-post-list-item__date { display: block; font-size: .75rem; opacity: .55; margin-bottom: .3em; }
.cms-post-list-item__title { margin: 0 0 .4em; font-size: 1rem; }
.cms-post-list-item__excerpt { margin: 0; font-size: .875rem; opacity: .7; line-height: 1.6; }
.cms-post-list-item__cats { list-style: none; margin: .5em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3em; }
.cms-post-list-item__cats li { font-size: .7rem; background: rgba(0,0,0,.06); border-radius: 2em; padding: .2em .65em; }

/* ── list レイアウト（サムネ左・テキスト右の横並び） ── */
.cms-post-list--list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cms-post-list--list .cms-post-list-item {
  flex-direction: row;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.cms-post-list--list .cms-post-list-item:last-child { border-bottom: none; }
.cms-post-list--list .cms-post-list-item__thumb {
  flex-shrink: 0;
  width: 120px;
  height: 80px;
}

/* ── grid レイアウト（縦積みグリッド） ── */
.cms-post-list--grid {
  display: grid;
  gap: 1.5rem;
}
.cms-post-list--grid.cms-post-list--col2 { grid-template-columns: repeat(2, 1fr); }
.cms-post-list--grid.cms-post-list--col3 { grid-template-columns: repeat(3, 1fr); }
.cms-post-list--grid.cms-post-list--col4 { grid-template-columns: repeat(4, 1fr); }
.cms-post-list--grid .cms-post-list-item__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: .75rem;
}

/* ── card レイアウト（枠・影付きカード、サムネが上端いっぱい） ── */
.cms-post-list--card {
  display: grid;
  gap: 1.5rem;
}
.cms-post-list--card.cms-post-list--col2 { grid-template-columns: repeat(2, 1fr); }
.cms-post-list--card.cms-post-list--col3 { grid-template-columns: repeat(3, 1fr); }
.cms-post-list--card.cms-post-list--col4 { grid-template-columns: repeat(4, 1fr); }
.cms-post-list--card .cms-post-list-item {
  background: var(--col-w, #fff);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .5rem;
  box-shadow: 0 2px 8px var(--col-shadow, rgba(0,0,0,.06));
  padding: 1.25rem;
  overflow: hidden;
  transition: box-shadow .2s;
}
.cms-post-list--card .cms-post-list-item:hover {
  box-shadow: 0 4px 16px var(--col-shadow, rgba(0,0,0,.1));
}
.cms-post-list--card .cms-post-list-item__thumb {
  width: calc(100% + 2.5rem);
  margin: -1.25rem -1.25rem .75rem;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

/* ─── スマホ対応 ────────────────────────────────────────── */
@media (max-width: 768px) {
  .cms-block--normal .cont,
  .cms-block--column .cont,
  .cms-block--form .cont { padding: 3rem 1rem; }
  .cms-post-list-wrap { padding: 3rem 1rem; }

  .cms-block--left .cont,
  .cms-block--right .cont { padding: 1.5rem 1rem; }

  .cms-block--full .cont { padding: 0; }

  .cms-part--logo {
    position: static;
    transform: none;
    padding: .5rem 1rem;
  }
  .cms-part--menu {
    padding: 0 1rem .5rem;
    width: 100%;
  }
  .cms-menu--row ul { justify-content: flex-start; }

  /* image_left / text_left の縦積みは @container（箱400px以下）に移行。
     スマホ画面ではパーツ箱も400px未満になるので自動で折り返す。 */

  .cms-layout-3col {
    grid-template-columns: 1fr;
    grid-template-areas: "left" "center" "right";
  }

  .cms-column-grid--2,
  .cms-column-grid--3,
  .cms-column-grid--4,
  .cms-column-grid--5 { grid-template-columns: 1fr; }

  .cms-post-list--grid,
  .cms-post-list--card { grid-template-columns: 1fr !important; }

  /* list レイアウト: スマホは縦積みに戻す */
  .cms-post-list--list .cms-post-list-item {
    flex-direction: column;
    gap: .75rem;
  }
  .cms-post-list--list .cms-post-list-item__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .cms-block--post-list .cont { padding: 2rem 1rem; }
}

/* ─── カテゴリ一覧ブロック ───────────────────────────────── */
.cms-block--category-list .cont {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

.cms-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.cms-category-list__item > a {
  display: inline-block;
  padding: .35rem .75rem;
  border-radius: .25rem;
  text-decoration: none;
  color: var(--col-f);
  font-weight: 600;
  transition: background .15s, color .15s;
}
.cms-category-list__item > a:hover {
  background: var(--col-a, rgba(0,0,0,.06));
}

.cms-category-list__children {
  list-style: none;
  margin: .25rem 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.cms-category-list__children .cms-category-list__item > a {
  font-weight: 400;
  font-size: .9em;
}

.cms-category-list-empty {
  color: var(--col-x, #999);
  font-size: .9em;
}

/* ─── カテゴリアーカイブページ ──────────────────────────── */
.cms-category-archive {
  max-width: 1080px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
.cms-category-archive__title {
  margin-bottom: 2rem;
  font-size: var(--fsize-b);
}

@media (max-width: 768px) {
  .cms-block--category-list .cont { padding: 2rem 1rem; }
  .cms-category-archive { padding: 2rem 1rem; }
}

/* ─── メニュー（ドロップダウン 3段階対応） ──────────────── */

li.cms-menu__item--has-children { position: relative; }

/* サブ ul はデフォルトで縦並び（.cms-menu ul の flex を上書き） */
.cms-menu ul.cms-menu__sub,
.cms-menu ul.cms-menu__subsub {
  flex-direction: column;
}

/* サブメニュー共通アイテムスタイル */
.cms-menu ul.cms-menu__sub > li,
.cms-menu ul.cms-menu__subsub > li { position: relative; }
.cms-menu ul.cms-menu__sub > li > a,
.cms-menu ul.cms-menu__subsub > li > a {
  display: block;
  padding: .45rem 1rem;
  white-space: nowrap;
  text-decoration: none;
  color: var(--col-f);
}
.cms-menu ul.cms-menu__sub > li > a:hover,
.cms-menu ul.cms-menu__subsub > li > a:hover {
  background: rgba(0,0,0,.04);
}

/* ── hover モード ───────────────────────────────────── */
.cms-menu--sub-hover ul.cms-menu__sub,
.cms-menu--sub-hover ul.cms-menu__subsub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--col-w);
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  z-index: 200;
  margin: 0;
  padding: .3rem 0;
  border-radius: .25rem;
}
/* 3段目は右側に展開 */
.cms-menu--sub-hover ul.cms-menu__subsub {
  top: 0;
  left: 100%;
  border-radius: 0 .25rem .25rem .25rem;
}
/* ホバーで表示（row） */
.cms-menu--sub-hover li.cms-menu__item--has-children:hover > ul.cms-menu__sub,
.cms-menu--sub-hover li.cms-menu__item--has-children:hover > ul.cms-menu__subsub {
  display: flex;
}

/* column + hover：インデント展開（右端溢れ防止） */
.cms-menu--column.cms-menu--sub-hover ul.cms-menu__sub,
.cms-menu--column.cms-menu--sub-hover ul.cms-menu__subsub {
  position: static;
  box-shadow: none;
  border: none;
  border-left: 2px solid rgba(0,0,0,.1);
  border-radius: 0;
  min-width: unset;
  background: transparent;
  padding: 0 0 0 .75rem;
  margin: .2rem 0;
}
.cms-menu--column.cms-menu--sub-hover ul.cms-menu__sub > li > a,
.cms-menu--column.cms-menu--sub-hover ul.cms-menu__subsub > li > a {
  padding: .25rem .5rem;
  font-size: .9em;
  white-space: normal;
}

/* ── always モード（常時表示・インデント） ──────────────── */
.cms-menu--sub-always ul.cms-menu__sub,
.cms-menu--sub-always ul.cms-menu__subsub {
  display: flex;
  position: static;
  box-shadow: none;
  border: none;
  border-left: 2px solid rgba(0,0,0,.1);
  border-radius: 0;
  min-width: unset;
  padding: 0 0 0 .75rem;
  margin: .2rem 0;
}
.cms-menu--sub-always ul.cms-menu__sub > li > a,
.cms-menu--sub-always ul.cms-menu__subsub > li > a {
  padding: .25rem .5rem;
  font-size: .9em;
  white-space: normal;
}

/* ─── スマホ：ドロップダウンをインライン表示に切り替え ─── */
@media (max-width: 768px) {
  .cms-menu__sub,
  .cms-menu__subsub {
    display: block;
    position: static;
    box-shadow: none;
    border: none;
    border-left: 2px solid rgba(0,0,0,.1);
    border-radius: 0;
    min-width: unset;
    padding: 0 0 0 .75rem;
    margin: .2rem 0;
  }
  .cms-menu__sub > li > a,
  .cms-menu__subsub > li > a {
    padding: .3rem .5rem;
    font-size: .9em;
  }
}

/* ─── スライダー（slider_basic）─────────────────────────── */
.cms-slider-container { position: relative; }

.cms-slider {
  position: relative;
  overflow: hidden;
}

/* 矢印ボタン */
.cms-slider__prev,
.cms-slider__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,.4);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .2s;
}
.cms-slider__prev:hover,
.cms-slider__next:hover { background: rgba(0,0,0,.65); }
.cms-slider__prev { left: .75rem; }
.cms-slider__next { right: .75rem; }

/* ドット（overflow:hidden の外・通常フロー） */
.cms-slider__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: .5rem 0;
}
.cms-slider__dot {
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.3);
  padding: 0;
  cursor: pointer;
  transition: background .2s, transform .2s;
  flex-shrink: 0;
}
.cms-slider__dot:hover { background: rgba(0,0,0,.5); }
.cms-slider__dot.is-active {
  background: rgba(0,0,0,.75);
  transform: scale(1.3);
}

/* ─── カルーセル（slider_carousel）──────────────────────── */
.cms-carousel-container { position: relative; }

.cms-carousel {
  position: relative;
  overflow: hidden;
}

/* 矢印ボタン */
.cms-carousel__prev,
.cms-carousel__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0,0,0,.4);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .2s;
}
.cms-carousel__prev:hover,
.cms-carousel__next:hover { background: rgba(0,0,0,.65); }
.cms-carousel__prev { left: .75rem; }
.cms-carousel__next { right: .75rem; }

/* ドット（overflow:hidden の外・通常フロー） */
.cms-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: .5rem 0;
}
.cms-carousel__dot {
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.3);
  padding: 0;
  cursor: pointer;
  transition: background .2s, transform .2s;
  flex-shrink: 0;
}
.cms-carousel__dot:hover { background: rgba(0,0,0,.5); }
.cms-carousel__dot.is-active {
  background: rgba(0,0,0,.75);
  transform: scale(1.3);
}

/* ─── フォームブロック 送信後切り替え ─── */
.cms-form-block .cms-form-complete { display: none; }
.cms-form-block.form-change .cms-form { display: none; }
.cms-form-block.form-change .cms-form-complete {
  display: block;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 1.1rem;
}

/* ─── フォームエラー表示 ─── */
.cms-form-errors {
  background: #fff0f0;
  border: 1px solid #f5c6c6;
  border-radius: 4px;
  padding: .75rem 1rem;
  margin-bottom: 1.25rem;
}
.cms-form-errors p {
  margin: .25rem 0;
  color: #c00;
  font-size: .875rem;
}


/* ════════════════════════════════════════════════════════════
   モバイルメニュー（ハンバーガー）— CSSのみ・:has() でトグル
   メニュー part の mobile_style で出力クラスが決まる：
     cms-menu--mb-wrap     : 折り返し（従来・ハンバーガー無し）
     cms-menu--mb-dropdown : ハンバーガー → 下にドロップ
     cms-menu--mb-drawer-r : ハンバーガー → 右からスライド
     cms-menu--mb-drawer-l : ハンバーガー → 左からスライド
   リンク遷移→リロードで checkbox が戻り自動で閉じる（JS不要）。
   ハンバーガー位置は原則右上（変えたい場合は common-css で上書き）。
════════════════════════════════════════════════════════════ */

/* PC：トグル類は隠す（ul は通常フロー） */
.cms-menu__chk,
.cms-menu__burger,
.cms-menu__backdrop { display: none; }

@media (max-width: 768px) {
  /* ハンバーガーを表示するのは wrap 以外。
     ナビは position:relative にしない＝dropdown(absolute)の基準を全幅の
     親ブロック(.cms-block・position:relative)にして、全幅で出すため。 */
  .cms-menu--mb-dropdown,
  .cms-menu--mb-drawer-r,
  .cms-menu--mb-drawer-l {
    display: flex;
    justify-content: flex-end; /* ハンバーガーを右上へ */
  }

  /* ハンバーガーボタン（3本線） */
  .cms-menu--mb-dropdown .cms-menu__burger,
  .cms-menu--mb-drawer-r .cms-menu__burger,
  .cms-menu--mb-drawer-l .cms-menu__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    cursor: pointer;
    /* position:relative を付けて z-index を有効化＝開いた drawer パネル(z:100)より
       前面に出し、×印が見える＆タップで閉じられるようにする */
    position: relative;
    z-index: 110;
  }
  .cms-menu__burger > span,
  .cms-menu__burger > span::before,
  .cms-menu__burger > span::after {
    content: '';
    display: block;
    width: 1.5rem;
    height: 2px;
    background: var(--col-f, #333);
    border-radius: 2px;
    transition: transform .25s ease, top .25s ease, background-color .25s ease;
  }
  .cms-menu__burger > span { position: relative; }
  .cms-menu__burger > span::before { position: absolute; top: -7px; left: 0; }
  .cms-menu__burger > span::after  { position: absolute; top:  7px; left: 0; }

  /* チェック時：3本線 → ×印（真ん中を消し、上下を中央で回転） */
  .cms-menu__chk:checked ~ .cms-menu__burger > span { background: transparent; }
  .cms-menu__chk:checked ~ .cms-menu__burger > span::before { top: 0; transform: rotate(45deg); }
  .cms-menu__chk:checked ~ .cms-menu__burger > span::after  { top: 0; transform: rotate(-45deg); }

  /* ── dropdown：ヘッダー下にドロップ ────────────── */
  /* dropdown は absolute 配置。親ブロックの overflow:hidden（背景クリップ用）に
     切られて見えなくなるため、dropdown を含むブロックだけ overflow を解除する */
  .cms-block:has(.cms-menu--mb-dropdown) { overflow: visible; }
  /* ul は常に absolute で仕込んでおく（display:none だと開閉アニメ不可）。
     閉=透明＋少し上にズラす／開=不透明＋定位置。opacity/transform でぬるっと。
     .cms-menu を先頭に付けクラス2個に＝ヘッダーの flex-end と同詳細度・後出しで
     勝ち、full で箱が高くなっても項目が上（ロゴ直下）から並ぶ。 */
  .cms-menu.cms-menu--mb-dropdown > ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: var(--col-w, #fff);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
    z-index: 100;
    padding: .5rem 0;
    /* 閉じている状態 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    pointer-events: none;
  }
  .cms-menu--mb-dropdown:has(.cms-menu__chk:checked) > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* ── drawer：横からスライドイン（共通）────────────── */
  /* .cms-menu を先頭に付けてクラス2個に＝ヘッダーの
     `.cms-block--site-header .cms-menu--row ul { justify-content:flex-end }`
     と同じ詳細度。後に書いてある分こちらが勝ち、項目が上から並ぶ。 */
  .cms-menu.cms-menu--mb-drawer-r > ul,
  .cms-menu.cms-menu--mb-drawer-l > ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 72%;
    max-width: 300px;
    background: var(--col-w, #fff);
    box-shadow: 0 0 24px rgba(0, 0, 0, .25);
    z-index: 100;
    padding: 4.5rem 1rem 1.5rem;
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .cms-menu--mb-drawer-r > ul { right: 0; transform: translateX(100%); }
  .cms-menu--mb-drawer-l > ul { left:  0; transform: translateX(-100%); }
  .cms-menu--mb-drawer-r:has(.cms-menu__chk:checked) > ul,
  .cms-menu--mb-drawer-l:has(.cms-menu__chk:checked) > ul { transform: translateX(0); }

  /* ── cover：メニューの広がり（fit=内容に合わせる/既定・full=画面いっぱい）── */
  /* drawer full：横幅を画面いっぱいに（fit の 72%/max300px を上書き） */
  .cms-menu.cms-menu--mb-cover-full.cms-menu--mb-drawer-r > ul,
  .cms-menu.cms-menu--mb-cover-full.cms-menu--mb-drawer-l > ul {
    width: 100%;
    max-width: none;
  }
  /* dropdown full：ヘッダー下〜画面下端まで縦に伸ばす（項目が少なくても下まで覆う）。
     ul は absolute で上端がヘッダー下（top:100%）。画面高からヘッダー分（100%＝
     包含ブロック＝ヘッダーの高さ）を引いて相殺し、ちょうど画面下端で揃える。 */
  .cms-menu--mb-cover-full.cms-menu--mb-dropdown:has(.cms-menu__chk:checked) > ul {
    min-height: calc(100vh - 100%);
    min-height: calc(100dvh - 100%);
  }

  /* ── drawer の暗幕（オーバーレイ）── */
  /* drawer のときだけ全画面の暗幕を出す。<label> なのでタップで checkbox が戻り閉じる。
     z-index は ul(100) の下・content の上。チェック時にフェードイン。 */
  .cms-menu--mb-drawer-r .cms-menu__backdrop,
  .cms-menu--mb-drawer-l .cms-menu__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
    z-index: 90;
    cursor: pointer;
  }
  .cms-menu--mb-drawer-r:has(.cms-menu__chk:checked) .cms-menu__backdrop,
  .cms-menu--mb-drawer-l:has(.cms-menu__chk:checked) .cms-menu__backdrop {
    opacity: 1;
    visibility: visible;
  }
}

/* ─── ユーティリティ：画像トリミング（imgfit-*）───────────────────
   docs/utility-classes.md §C。配下の <img> を object-fit:cover でトリミング。
   命名 imgfit-{横}{縦} ＝ aspect-ratio:横/縦（700番台・item＝中の画像対象）。 */
.imgfit-46 img,
.imgfit-45 img,
.imgfit-44 img,
.imgfit-43 img,
.imgfit-42 img,
.imgfit-53 img,
.imgfit-52 img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.imgfit-46 img { aspect-ratio: 4 / 6; } /* 縦長 */
.imgfit-45 img { aspect-ratio: 4 / 5; } /* 縦長 */
.imgfit-44 img { aspect-ratio: 1 / 1; } /* 正方形 */
.imgfit-43 img { aspect-ratio: 4 / 3; } /* 横長 */
.imgfit-42 img { aspect-ratio: 2 / 1; } /* 横長ワイド */
.imgfit-53 img { aspect-ratio: 5 / 3; } /* 横長 */
.imgfit-52 img { aspect-ratio: 5 / 2; } /* 横長ワイド */

/* ===== ロゴ：パーツ設定（高さ/最大幅/スマホ高さ）を CSS 変数で受ける =====
   値は logo パーツの style="--logo-h:..; --logo-mw:..; --logo-h-sp:.." から渡る（renderLogo）。
   未設定ならデフォルト 2.5rem。スマホは --logo-h-sp があればそれ、無ければ PC と同じ。 */
.cms-logo img { height: var(--logo-h, 2.5rem); width: auto; max-width: var(--logo-mw, none); }
@media (max-width: 768px) {
  .cms-logo img { height: var(--logo-h-sp, var(--logo-h, 2.5rem)); }
}

/* ===== リッチテキスト内のテーブル（.wrap 内）。罫線/ヘッダーはカラーセット連動 ===== */
.wrap table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
.wrap th, .wrap td { border: 1px solid var(--col-e, #ddd); padding: .5rem .75rem; text-align: left; vertical-align: top; }
.wrap th { background: var(--col-y, #f7f7f7); font-weight: bold; }
@media (max-width: 768px) {
  .wrap table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ===== 会員ログインパーツ（member_login）=====
   構造のみ。色はカラーセット変数に連動（フォールバックは見た目維持の保険）。
   POST 先は /members/{group}/login（member-auth.php が処理）。 */
.cms-part--member_login .wrap { padding: 2rem 1.5rem; }
.cms-member-login { max-width: 360px; }
.cms-member-login__heading { margin: 0 0 1rem; }
.cms-member-login__form { display: flex; flex-direction: column; }
.cms-member-login__label { display: block; font-size: .9rem; margin: 0 0 1rem; }
.cms-member-login__input {
  display: block; width: 100%; margin-top: .35rem; padding: .65rem .8rem;
  font-size: 1rem; font-family: inherit;
  border: 1px solid var(--col-e, #ccc); border-radius: 6px;
}
.cms-member-login__button {
  margin-top: .3rem; padding: .7rem 1rem; font-size: 1rem; font-weight: 600;
  border: 0; border-radius: 6px; cursor: pointer;
  /* Primary 背景＋On Primary 文字（無ければ白）でカラーセットに追従 */
  background: var(--col-a, #2b6cb0); color: var(--col-o, var(--col-w, #fff));
}
.cms-member-login__button:hover { opacity: .92; }
.cms-member-login__status { margin: 0 0 .8rem; }
.cms-member-login__links { display: flex; gap: 1.2rem; }
.cms-member-login__link { color: var(--col-a, #2b6cb0); text-decoration: none; }
.cms-member-login__link:hover { text-decoration: underline; }
/* Primary(-a) 背景ブロックに置いたとき：ボタン地が背景と同化するので On Primary(-o) へ反転。
   ボタン＝地 -o / 字 -a、文字・リンクは -o（-a 背景の上に乗せる色）。入力欄は白地のまま。 */
.cms-member-login--on-primary .cms-member-login__button {
  background: var(--col-o, var(--col-w, #fff)); color: var(--col-a, #2b6cb0);
}
.cms-member-login--on-primary .cms-member-login__heading,
.cms-member-login--on-primary .cms-member-login__status,
.cms-member-login--on-primary .cms-member-login__label,
.cms-member-login--on-primary .cms-member-login__link {
  color: var(--col-o, var(--col-w, #fff));
}

/* ===== マイページ会員情報（mypage_profile）=====
   構造のみ。members.data のキー（項目ラベル）/値を行で並べる読み取り表示。 */
.cms-part--mypage_profile .wrap { padding: 2rem 1.5rem; }
.cms-mypage { max-width: 480px; margin-inline: auto; }
.cms-mypage__heading { margin: 0 0 1rem; text-align: center; }
.cms-mypage__list { display: flex; flex-direction: column; }
.cms-mypage__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--col-e, #dcdcdc);
}
.cms-mypage__key { color: var(--col-f, #666); font-size: .9rem; }
.cms-mypage__val { text-align: right; word-break: break-word; }
.cms-mypage__notice { margin: 0 0 .8rem; }
.cms-mypage__link { color: var(--col-a, #2b6cb0); text-decoration: none; }
.cms-mypage__link:hover { text-decoration: underline; }
/* 自己編集：editable 項目は入力欄・保存ボタン（POST → /members/{group}/profile）。 */
.cms-mypage__row--edit { align-items: center; }
.cms-mypage__input {
  width: 60%; max-width: 260px; padding: .45rem .6rem; font-size: .95rem; font-family: inherit;
  border: 1px solid var(--col-e, #ccc); border-radius: 6px;
}
.cms-mypage__button {
  margin-top: 1.2rem; padding: .7rem 1.4rem; font-size: 1rem; font-weight: 600;
  border: 0; border-radius: 6px; cursor: pointer;
  background: var(--col-a, #2b6cb0); color: var(--col-o, var(--col-w, #fff));
}
.cms-mypage__button:hover { opacity: .92; }

/* ===== パスワード変更（password_change）=====
   構造のみ。POST 先は /members/{group}/password（member-auth.php が処理）。 */
.cms-part--password_change .wrap { padding: 2rem 1.5rem; }
.cms-pwchange { max-width: 480px; margin-inline: auto; }
.cms-pwchange__heading { margin: 0 0 1rem; text-align: center; }
.cms-pwchange__form { display: flex; flex-direction: column; }
.cms-pwchange__label { display: block; font-size: .9rem; margin: 0 0 1rem; }
.cms-pwchange__input {
  display: block; width: 100%; margin-top: .35rem; padding: .65rem .8rem;
  font-size: 1rem; font-family: inherit;
  border: 1px solid var(--col-e, #ccc); border-radius: 6px;
}
.cms-pwchange__hint { margin: 0 0 .8rem; font-size: .82rem; color: var(--col-f, #666); }
.cms-pwchange__button {
  margin-top: .3rem; padding: .7rem 1rem; font-size: 1rem; font-weight: 600;
  border: 0; border-radius: 6px; cursor: pointer;
  background: var(--col-a, #2b6cb0); color: var(--col-o, var(--col-w, #fff));
}
.cms-pwchange__button:hover { opacity: .92; }
.cms-pwchange__notice { margin: 0 0 .8rem; }
.cms-pwchange__link { color: var(--col-a, #2b6cb0); text-decoration: none; }
.cms-pwchange__link:hover { text-decoration: underline; }

/* ===== ログアウト（member_logout）=====
   ログイン中のみ表示。GET で /members/{group}/logout（member-auth.php が破棄）。 */
.cms-part--member_logout .wrap { padding: 1.5rem; }
.cms-member-logout { text-align: center; }
.cms-member-logout__button {
  display: inline-block; padding: .7rem 1.6rem; font-size: 1rem; font-weight: 600;
  text-decoration: none; border-radius: 6px; cursor: pointer;
  background: var(--col-a, #2b6cb0); color: var(--col-o, var(--col-w, #fff));
}
.cms-member-logout__button:hover { opacity: .92; }

/* ===== スクロール出現アニメ（anim-*）＝実体はここ＋cms.js。@list登録は basic-style =====
   .js-anim は cms.js が「アニメを動かせる環境」でだけ <html> に付ける
   （JS無効・ビジュアル編集iframe・prefers-reduced-motion では付かない＝普通に見える）。
   調整用変数（:root や basic-style、ブロックの自由記述スタイルで上書き可）：
     --anim-dist   縦の移動距離（既定 125px／stagger は 40px）
     --anim-dist-x 横の移動距離（既定 25px）
     --anim-dur    アニメ時間（既定 1.1s／stagger は 0.9s）
     --anim-step   stagger の時間差の刻み（既定 0.15s）
   ※ ブロックの自由記述スタイル（cont_style）は .cont に効くため、その中のパーツ
     （anim-stagger の配下・パーツ付与の anim-*）に届く。ブロック自身の anim-* を
     個別調整したい場合は basic-style にセレクタで書く。 */
.js-anim .anim-u { opacity: 0; transform: translateY(var(--anim-dist, 125px)); }
.js-anim .anim-d { opacity: 0; transform: translateY(calc(var(--anim-dist, 125px) * -1)); }
.js-anim .anim-l { opacity: 0; transform: translateX(var(--anim-dist-x, 25px)); }
.js-anim .anim-r { opacity: 0; transform: translateX(calc(var(--anim-dist-x, 25px) * -1)); }
.js-anim .anim-f { opacity: 0; }
.js-anim .anim-u.is-inview,
.js-anim .anim-d.is-inview,
.js-anim .anim-l.is-inview,
.js-anim .anim-r.is-inview,
.js-anim .anim-f.is-inview {
  opacity: 1;
  transform: none;
  transition: opacity var(--anim-dur, 1.1s) ease, transform var(--anim-dur, 1.1s) ease;
}
/* anim-stagger：ブロックに付けると配下パーツが下から順番に時間差で出る */
.js-anim .anim-stagger .cms-part { opacity: 0; transform: translateY(var(--anim-dist, 40px)); }
.js-anim .anim-stagger.is-inview .cms-part {
  opacity: 1;
  transform: none;
  transition: opacity var(--anim-dur, 0.9s) ease, transform var(--anim-dur, 0.9s) ease;
}
.js-anim .anim-stagger.is-inview .cms-part:nth-child(2) { transition-delay: var(--anim-step, 0.15s); }
.js-anim .anim-stagger.is-inview .cms-part:nth-child(3) { transition-delay: calc(var(--anim-step, 0.15s) * 2); }
.js-anim .anim-stagger.is-inview .cms-part:nth-child(4) { transition-delay: calc(var(--anim-step, 0.15s) * 3); }
.js-anim .anim-stagger.is-inview .cms-part:nth-child(5) { transition-delay: calc(var(--anim-step, 0.15s) * 4); }
.js-anim .anim-stagger.is-inview .cms-part:nth-child(6) { transition-delay: calc(var(--anim-step, 0.15s) * 5); }
.js-anim .anim-stagger.is-inview .cms-part:nth-child(7) { transition-delay: calc(var(--anim-step, 0.15s) * 6); }
.js-anim .anim-stagger.is-inview .cms-part:nth-child(8) { transition-delay: calc(var(--anim-step, 0.15s) * 7); }