/* =============================================================================
   部品（ブロック）の基本の見た目 ── 全テンプレート共通
   約束事: cms/docs/部品とレイアウトの約束事.md
   テンプレートは theme.css で上書きし、サイトごとの調整は CSS 変数で行う。
   ============================================================================= */

:root {
  --c-primary: #b91c1c;        /* アクセント（見出しの線・リンクの強調など） */
  --c-primary-ink: #ffffff;    /* アクセント色の上の文字 */
  --c-text: #1f2937;
  --c-muted: #6b7280;
  --c-link: #1d4ed8;
  --c-line: #e5e7eb;
  --c-soft: #f5f6f8;           /* 淡い背景 */
  --c-bg: #ffffff;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-heading: var(--font-body);
  --radius: 8px;
  --block-gap: 2.5rem;         /* 部品と部品の間 */
}

.cms-content { color: var(--c-text); font-family: var(--font-body); line-height: 1.85; font-size: 1rem; overflow-wrap: anywhere; }
.cms-content > [data-block] { margin: 0 0 var(--block-gap); }
.cms-content > [data-block]:last-child { margin-bottom: 0; }
.cms-content img { max-width: 100%; height: auto; display: block; }
.cms-content a { color: var(--c-link); }
.cms-content a:hover { text-decoration: none; }
.cms-content p { margin: 0 0 1em; }
.cms-content p:last-child { margin-bottom: 0; }
.cms-content ul, .cms-content ol { margin: 0 0 1em; padding-left: 1.5em; }
.cms-content li + li { margin-top: .3em; }
.cms-content h2, .cms-content h3, .cms-content h4 { font-family: var(--font-heading); line-height: 1.4; margin: 0 0 .8em; }
.cms-content h2 { font-size: 1.45rem; padding: .35em 0 .35em .8em; border-left: 6px solid var(--c-primary); background: var(--c-soft); }
.cms-content h3 { font-size: 1.15rem; padding-bottom: .3em; border-bottom: 2px solid var(--c-line); }
.cms-content h4 { font-size: 1.05rem; }
.cms-content figure { margin: 0; }
.cms-content figcaption { font-size: .85rem; color: var(--c-muted); margin-top: .5em; line-height: 1.6; }

/* ---- 見出し heading ---- */
[data-block="heading"] h1 { font-family: var(--font-heading); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1.35; margin: 0;
  padding-bottom: .4em; border-bottom: 3px solid var(--c-primary); }
[data-block="heading"] h2 { margin: 0; }

/* ---- 画像＋文章 textpic ---- */
[data-block="textpic"] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.5rem 2rem; align-items: start; }
[data-block="textpic"][data-pos="right"] { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
[data-block="textpic"][data-pos="right"] .b-media { order: 2; }
[data-block="textpic"] .b-media img { border-radius: var(--radius); }

/* ---- 画像 image ---- */
[data-block="image"] figure { max-width: 100%; }
[data-block="image"][data-align="center"] figure { margin-inline: auto; width: fit-content; }
[data-block="image"][data-align="right"] figure { margin-left: auto; width: fit-content; }
[data-block="image"] img { border-radius: var(--radius); }

/* ---- ギャラリー gallery ---- */
[data-block="gallery"] { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px; }
[data-block="gallery"][data-cols="2"] { --cols: 2; }
[data-block="gallery"][data-cols="4"] { --cols: 4; }
[data-block="gallery"] img { width: 100%; border-radius: calc(var(--radius) / 2); }
[data-block="gallery"][data-fit="contain"] img { aspect-ratio: 4 / 3; object-fit: contain; background: var(--c-soft); }
[data-block="gallery"][data-fit="cover"] img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ---- カード一覧 cards ---- */
[data-block="cards"] { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1.25rem; }
[data-block="cards"][data-cols="2"] { --cols: 2; }
[data-block="cards"][data-cols="4"] { --cols: 4; }
[data-block="cards"] .b-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; background: var(--c-bg);
  border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s, transform .2s; }
[data-block="cards"] .b-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
[data-block="cards"] .b-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
[data-block="cards"] .b-card h3 { font-size: 1.05rem; margin: .9rem 1rem .4rem; padding: 0; border: 0; color: var(--c-primary); }
[data-block="cards"] .b-card p { font-size: .9rem; line-height: 1.7; color: var(--c-muted); margin: 0 1rem 1rem; }

/* ---- 表 table（横に長い表はスクロール） ---- */
[data-block="table"] { overflow-x: auto; }
[data-block="table"] table { width: 100%; border-collapse: collapse; font-size: .95rem; }
[data-block="table"] caption { text-align: left; font-weight: 700; margin-bottom: .5em; }
[data-block="table"] th, [data-block="table"] td { border: 1px solid var(--c-line); padding: .7em .9em; text-align: left; vertical-align: top; }
[data-block="table"] th { background: var(--c-soft); white-space: nowrap; font-weight: 700; }

/* ---- ファイル一覧 files ---- */
[data-block="files"] ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--c-line); }
[data-block="files"] li { margin: 0; border-bottom: 1px solid var(--c-line); }
[data-block="files"] a { display: flex; align-items: center; gap: .8em; padding: .8em .2em; text-decoration: none; }
[data-block="files"] a::before { content: attr(data-type); flex: none; min-width: 3.2em; text-align: center; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; color: #fff; background: #6b7280; border-radius: 4px; padding: .25em .4em; }
[data-block="files"] a[data-type="pdf"]::before { background: #dc2626; }
[data-block="files"] a[data-type="docx"]::before, [data-block="files"] a[data-type="doc"]::before { background: #2563eb; }
[data-block="files"] a[data-type="xlsx"]::before, [data-block="files"] a[data-type="xls"]::before { background: #16a34a; }
[data-block="files"] a::after { content: attr(data-size); margin-left: auto; font-size: .85rem; color: var(--c-muted); }

/* ---- ニュース一覧 news（中身はサーバーが作る） ---- */
[data-block="news"] ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--c-line); }
[data-block="news"] li { display: flex; gap: 1.2em; margin: 0; padding: .9em .2em; border-bottom: 1px solid var(--c-line); }
[data-block="news"] time { flex: none; min-width: 8.2em; color: var(--c-muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
[data-block="news"] a { text-decoration: none; }
[data-block="news"] .b-more { text-align: right; margin-top: .8em; font-size: .9rem; }

/* ---- 埋め込み embed（iframe はサーバーが作る） ---- */
[data-block="embed"] iframe { display: block; width: 100%; border: 0; }

/* ---- 手順 steps（工程の間の矢印はテンプレートが描く） ---- */
[data-block="steps"] ol { list-style: none; margin: 0; padding: 0; counter-reset: step; }
[data-block="steps"] li { position: relative; counter-increment: step; margin: 0; padding: 1.4rem 1.5rem 1.5rem; border: 1px solid var(--c-line);
  border-radius: var(--radius); background: var(--c-bg); }
[data-block="steps"] li + li { margin-top: 2.6rem; }
[data-block="steps"] li + li::before { content: ""; position: absolute; left: 50%; top: -2.6rem; translate: -50% 0; margin-top: .55rem;
  border: 14px solid transparent; border-top: 16px solid var(--c-primary); border-bottom-width: 0; }
[data-block="steps"] li > h3 { display: flex; align-items: center; gap: .7em; margin: 0 0 .7em; padding: 0; border: 0; font-size: 1.1rem; }
[data-block="steps"] li > h3::before { content: "STEP " counter(step); flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  color: var(--c-primary-ink); background: var(--c-primary); border-radius: 999px; padding: .25em .8em; }
[data-block="steps"] .b-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 1rem; }
[data-block="steps"] .b-figs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius) / 2); }

/* ---- 共通パーツ snippet（中身は1か所で管理し、表示のたびにサーバーが入れる） ---- */
[data-block="snippet"] { padding: 1.4rem 1.6rem; background: var(--c-soft); border-radius: var(--radius); }
[data-block="snippet"] h3 { border: 0; padding: 0; margin-bottom: .5em; }

/* ---- 自由HTML html ---- */
[data-block="html"] { overflow-x: auto; }

/* ---- スマホ ---- */
@media (max-width: 760px) {
  .cms-content { --block-gap: 2rem; }
  [data-block="textpic"], [data-block="textpic"][data-pos="right"] { grid-template-columns: 1fr; }
  [data-block="textpic"][data-pos="right"] .b-media { order: 0; }
  [data-block="gallery"], [data-block="cards"] { --cols: 2 !important; }
  [data-block="news"] li { flex-direction: column; gap: .2em; }
}
@media (max-width: 420px) {
  [data-block="cards"] { --cols: 1 !important; }
}

/* ---------------------------------------------------------------- メインビジュアル（hero）
   本文の先頭に置くと、テンプレートのメインビジュアル枠（横幅いっぱい）に出る。
   data-type: image / slides / video   data-height: full / large / medium
   data-text: left / center / bottom   data-shade: 0 / 20 / 40 / 60（写真を暗くする度合い） */
[data-block="hero"] { --hero-h: clamp(320px, 42vw, 560px); --shade: .4; position: relative; display: grid; overflow: hidden;
  min-height: var(--hero-h); margin: 0; background: #1f2937; color: #fff; isolation: isolate; }
[data-block="hero"][data-height="full"] { --hero-h: min(88svh, 960px); }
[data-block="hero"][data-height="medium"] { --hero-h: clamp(220px, 28vw, 360px); }
/* 帯（セクションの見出し帯として使う低いメインビジュアル） */
[data-block="hero"][data-height="band"] { --hero-h: clamp(110px, 12vw, 150px); }
[data-block="hero"][data-height="band"] .b-hero-text { padding-block: 16px; }
[data-block="hero"][data-height="band"] .b-hero-sub { font-size: .78rem; text-transform: uppercase; }
[data-block="hero"][data-height="band"] .b-hero-title { margin-top: .1em !important; font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem); }
[data-block="hero"][data-height="band"] .b-hero-lead { margin-top: .4em !important; font-size: .85rem; line-height: 1.6; }
[data-block="hero"][data-type="none"] { display: none; }
[data-block="hero"][data-shade="0"] { --shade: 0; }
[data-block="hero"][data-shade="20"] { --shade: .2; }
[data-block="hero"][data-shade="60"] { --shade: .6; }
.b-hero-slide { grid-area: 1 / 1; position: relative; display: grid; min-height: var(--hero-h); opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.b-hero-slide:first-child, .b-hero-slide.is-active { opacity: 1; visibility: visible; }
[data-block="hero"].is-ready .b-hero-slide:not(.is-active) { opacity: 0; visibility: hidden; }
.b-hero-slide picture { display: contents; }
/* 写真・動画は枠いっぱいに敷く（高さは枠の高さ。写真の縦横比では決めない） */
.b-hero-slide img, .b-hero-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.b-hero-slide::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--shade)); pointer-events: none; }
.b-hero-text { grid-area: 1 / 1; z-index: 1; align-self: center; justify-self: start; width: min(100%, 44em); padding: clamp(20px, 4vw, 56px);
  text-shadow: 0 1px 12px rgba(0,0,0,.35); }
[data-block="hero"][data-text="center"] .b-hero-text { justify-self: center; text-align: center; }
[data-block="hero"][data-text="bottom"] .b-hero-text { align-self: end; }
.b-hero-text p { margin: 0; }
.b-hero-sub { font-size: .85rem; letter-spacing: .22em; opacity: .9; }
.b-hero-title { margin-top: .3em !important; font-size: clamp(1.45rem, 1rem + 2.2vw, 2.7rem); font-weight: 700; line-height: 1.4;
  word-break: auto-phrase; text-wrap: balance; }
.b-hero-lead { margin-top: 1em !important; max-width: 34em; font-size: .95rem; line-height: 1.9; }
[data-block="hero"][data-text="center"] .b-hero-lead { margin-inline: auto; }
.b-hero-text p:empty { display: none; }
.b-hero-ctrl { position: absolute; z-index: 2; right: 12px; bottom: 12px; display: flex; gap: 6px; align-items: center; }
.b-hero-ctrl button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.75); background: rgba(0,0,0,.35);
  color: #fff; font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }
.b-hero-ctrl button.dot { width: 12px; height: 12px; background: transparent; }
.b-hero-ctrl button.dot[aria-current="true"] { background: #fff; }
.b-hero-ctrl button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) {
  [data-block="hero"] { --hero-h: clamp(260px, 70vw, 420px); }
  [data-block="hero"][data-height="full"] { --hero-h: 72svh; }
  [data-block="hero"][data-height="medium"] { --hero-h: 220px; }
  [data-block="hero"][data-height="band"] { --hero-h: 96px; }
}
@media (prefers-reduced-motion: reduce) { .b-hero-slide { transition: none; } }

/* ---------------------------------------------------------------- 上部のメニュー: ドロップダウン・メガメニュー（仕組み）
   見た目（色・余白）は各テンプレートの theme.css。中身はメニューのツリーから自動で作る。
   PC: マウスを乗せる／キーボードで移動すると開く。Esc で閉じる（/_cms/nav.js）。スマホ（ハンバーガーの中）: 下の階層を字下げして並べる */
.main-nav .has-sub > a::after { content: "▾"; font-size: .72em; margin-left: .4em; opacity: .75; }
.main-nav .sub, .main-nav .mega ul { list-style: none; margin: 0; padding: 0; }
.main-nav .sub a, .main-nav .mega a { display: block; text-decoration: none; }
@media (min-width: 761px) {
  .main-nav .sub-dropdown { position: relative; }
  .main-nav .sub-mega { position: static; }
  .main-nav .sub, .main-nav .mega { display: none; position: absolute; top: 100%; z-index: 60; }
  /* スクリプトが動かないとき: マウスを乗せると開く（CSS だけ）。動くとき（.js-nav）: 開閉は /_cms/nav.js が is-open で決める */
  .main-nav:not(.js-nav) .has-sub:hover > .sub, .main-nav:not(.js-nav) .has-sub:hover > .mega,
  .main-nav .has-sub:focus-within > .sub, .main-nav .has-sub:focus-within > .mega,
  .main-nav .has-sub.is-open > .sub, .main-nav .has-sub.is-open > .mega { display: block; }
  .main-nav .has-sub.is-closed > .sub, .main-nav .has-sub.is-closed > .mega { display: none; }
  .main-nav .sub { left: 0; min-width: 15em; padding: 6px 0; }
  .main-nav .sub a { white-space: nowrap; }
  .main-nav .mega { left: 0; right: 0; }
  /* 文字とパネルの間のすき間をふさぐ見えない面。その項目の幅だけ、文字から下へ伸ばす
     （パネルの幅いっぱいにすると、隣の項目の上にかぶさって、隣へ移れなくなる） */
  .main-nav .has-sub > a { position: relative; }
  .main-nav .has-sub > a::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; }
  /* メニューの行の下端からパネルまでのすき間（高さは各テンプレートの --mega-gap。メニューの文字にはかぶせない） */
  .main-nav .mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--mega-gap, 0px); }
  .main-nav .mega-in { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 32px; padding: 22px 30px 26px; }
  .main-nav .mega-h { font-weight: 700; }
  .main-nav .mega ul { margin-top: .35em; }
}
@media (max-width: 760px) {
  .main-nav .sub, .main-nav .mega { display: block; }
  .main-nav .has-sub > a::after { display: none; }
  .main-nav .sub a, .main-nav .mega a { padding-left: 2.2em !important; font-size: .9em; }
  .main-nav .mega ul a { padding-left: 3.4em !important; }
}

/* ---------------------------------------------------------------- ニュース: カテゴリの印・カテゴリの切り替え・ページ送り・記事の見出し */
.b-news-cat { display: inline-block; margin: 0 .5em 0 0; padding: .05em .55em; font-size: .75rem; line-height: 1.6; border-radius: 3px;
  background: var(--c-soft, #f3f4f6); color: var(--c-muted, #4b5563); border: 1px solid var(--c-line, #e5e7eb); white-space: nowrap; vertical-align: .1em; }
[data-block="news"] li .b-news-cat { flex: none; }
.b-news-cats { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1rem; padding: 0; border: 0 !important; }
.b-news-cats li { border: 0 !important; padding: 0 !important; display: block !important; }
.b-news-cats a { display: inline-block; padding: .3em .9em; border: 1px solid var(--c-line, #e5e7eb); border-radius: 999px; font-size: .85rem; text-decoration: none; color: inherit; }
.b-news-cats .is-current a { background: var(--c-primary, #b91c1c); border-color: var(--c-primary, #b91c1c); color: #fff; }
.b-pager { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin-top: 1.4rem; }
.b-pager a { min-width: 2.4em; padding: .35em .7em; text-align: center; border: 1px solid var(--c-line, #e5e7eb); border-radius: 6px; text-decoration: none; color: inherit; font-size: .9rem; }
.b-pager a[aria-current="page"] { background: var(--c-primary, #b91c1c); border-color: var(--c-primary, #b91c1c); color: #fff; font-weight: 700; }
.b-pager a:hover:not([aria-current]) { background: var(--c-soft, #f3f4f6); }
.b-news-head { margin: 0 0 var(--block-gap, 1.5rem); }
.b-news-head .b-news-meta { margin: 0 0 .4em; color: var(--c-muted, #4b5563); font-size: .9rem; display: flex; flex-wrap: wrap; gap: .3em .8em; align-items: center; }
.b-news-head h1 { margin: 0; }
.b-news-back { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--c-line, #e5e7eb); }
.b-news-tag { font-size: .8rem; color: var(--c-muted, #4b5563); }