/* ═══ お客様が足す記事（施工事例・お知らせ・日記）の見た目 ═══
   13-hp-cms（Xserver の PHP）が作るページと、トップページに差し込む欄で使う。
   site.json に cms があるときだけ build-site.js が読み込む。
   色と書体はテーマの変数を借りるので、全テーマ共通のこの1枚で足りる（テーマごとの CSS は書かない）。
   クラスはすべて cms- で始める（テーマの .ph／.t／.wrap などとぶつけない）。
   数字（日付・件数）は和文書体で並べる。欧文書体（--en）は Cormorant など旧式数字のものがあるため、英字の小ラベルにだけ使う。 */

:root{
  --cms-ink:var(--ink,#26292e);
  --cms-soft:var(--soft,var(--muted,#6f7378));
  --cms-line:var(--hair,var(--line,rgba(38,41,46,.16)));
  --cms-bg:var(--paper,#fff);
  --cms-tint:var(--tint,#f4f3f0);
  --cms-accent:var(--accent,#26292e);
  --cms-accent-d:var(--accent-d,var(--accent,#26292e));
  --cms-en:var(--en,inherit);
  --cms-jp:var(--gothic,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif);
}

/* ── 共通 ── */
.cms-wrap{width:min(1080px,calc(100% - 40px));margin:0 auto}
.cms-narrow{max-width:760px;margin-left:auto;margin-right:auto}
.cms-en{font-family:var(--cms-en);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--cms-soft);margin:0 0 8px;line-height:1.4}
.cms-num{font-family:var(--cms-jp);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.06em}
.cms-more{margin:26px 0 0;text-align:right}
.cms-more a{display:inline-flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.14em;color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:5px}
.cms-more a::after{content:"";width:18px;height:1px;background:currentColor}
.cms-more a:hover{opacity:.7}

/* ── トップページの欄（お知らせ・日記） ── */
.cms-top{padding:clamp(56px,8vw,104px) 0;background:var(--cms-bg);color:var(--cms-ink)}
.cms-top.cms-tint{background:var(--cms-tint)}
.cms-top-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;border-bottom:1px solid var(--cms-ink);padding-bottom:16px;margin-bottom:6px}
.cms-top-head h2{font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:.1em;line-height:1.5;margin:0}
.cms-top .cms-cards{margin-top:34px}

/* お知らせの一覧（トップ・一覧ページ共通） */
.cms-news{list-style:none;margin:0;padding:0}
.cms-news li{border-bottom:1px solid var(--cms-line)}
.cms-news a{display:grid;grid-template-columns:8.5em 1fr;align-items:baseline;gap:4px 24px;padding:20px 4px;color:inherit;text-decoration:none}
.cms-news time{font-size:13px;color:var(--cms-soft)}
.cms-news .cms-ttl{font-size:15px;line-height:1.85;letter-spacing:.03em}
.cms-news a:hover .cms-ttl{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@media(max-width:600px){.cms-news a{grid-template-columns:1fr;padding:16px 2px}}

/* 写真つきの一覧（施工事例・日記） */
.cms-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 28px;list-style:none;margin:0;padding:0}
@media(max-width:900px){.cms-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 18px}}
@media(max-width:560px){.cms-cards{grid-template-columns:1fr;gap:34px}}
.cms-card a{display:block;color:inherit;text-decoration:none}
/* 写真の比率は業種ごと（hp-cms が <main> などに cms-r-43／32／11／34 を付ける。美容室のスタイルは縦長、飲食・小売は正方形） */
.cms-r-43{--cms-ratio:4/3}.cms-r-32{--cms-ratio:3/2}.cms-r-11{--cms-ratio:1/1}.cms-r-34{--cms-ratio:3/4}
.cms-card .cms-ph{display:block;aspect-ratio:var(--cms-ratio,4/3);overflow:hidden;background:var(--cms-tint)}
.cms-card .cms-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.cms-card a:hover .cms-ph img{transform:scale(1.035)}
.cms-card .cms-ph.cms-noimg{display:flex;align-items:center;justify-content:center;font-family:var(--cms-en);font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--cms-soft)}
.cms-card .cms-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:16px 0 0;font-size:12px;color:var(--cms-soft)}
.cms-card .cms-meta span+span::before{content:"";display:inline-block;width:1px;height:10px;background:var(--cms-line);margin-right:14px;vertical-align:-1px}
.cms-card .cms-card-t,.cms-card h3{all:unset;display:block;font-size:16px;font-weight:700;line-height:1.75;letter-spacing:.04em;margin:6px 0 0}
.cms-card a:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* トップの施工事例の欄に重ねるリンク（テーマの1枚の形はそのまま） */
.cms-item{position:relative}
.cms-cover{position:absolute;inset:0;z-index:3}
.cms-cover:focus-visible{outline:2px solid var(--cms-accent);outline-offset:3px}

/* ── 記事のページ（一覧・1件） ── */
[data-cms-page]:not([data-cms-ext]){background:var(--cms-bg)}
.cms{display:block;padding:calc(var(--cms-head,0px) + clamp(32px,5vw,60px)) 0 clamp(72px,10vw,128px);background:var(--cms-bg);color:var(--cms-ink);font-family:var(--cms-jp)}
.cms-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12px;color:var(--cms-soft);letter-spacing:.06em;margin:0 0 clamp(28px,4vw,48px);line-height:1.6}
.cms-crumb a{color:inherit;text-decoration:none;border-bottom:1px solid var(--cms-line)}
.cms-crumb a:hover{color:var(--cms-ink)}
.cms-crumb i{font-style:normal;opacity:.6}
.cms-head{border-bottom:1px solid var(--cms-ink);padding-bottom:22px;margin-bottom:clamp(30px,4vw,44px)}
.cms-head h1{font-size:clamp(23px,3vw,34px);font-weight:700;line-height:1.55;letter-spacing:.06em;margin:0;font-family:var(--cms-jp)}
.cms-head .cms-sub{display:flex;flex-wrap:wrap;gap:4px 16px;margin:14px 0 0;font-size:13px;color:var(--cms-soft)}
.cms-count{font-size:13px;color:var(--cms-soft);margin:14px 0 0}
.cms-empty{padding:40px 0;color:var(--cms-soft);font-size:14px}

/* 1件のページ */
.cms-hero{margin:0 0 clamp(30px,4vw,44px)}
/* 上の写真が2枚以上：大きな1枚＋下に小さく並べる（押すと替わる。ラジオボタンと label で、JavaScript なし） */
.cms-viewer{margin:0 0 clamp(30px,4vw,44px)}
.cms-v-r{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.cms-v-s{display:none;position:relative;margin:0}
.cms-v-s img{width:100%;height:auto;aspect-ratio:var(--cms-ratio,4/3);max-height:78vh;object-fit:contain;background:var(--cms-tint);display:block}
.cms-v-s figcaption{font-size:12.5px;letter-spacing:.06em;color:var(--cms-soft);margin:9px 0 0;line-height:1.6}
.cms-v-prev,.cms-v-next{position:absolute;top:calc(50% - 22px);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.42);color:#fff;font-size:28px;line-height:1;cursor:pointer;user-select:none}
.cms-v-prev{left:10px}.cms-v-next{right:10px}
.cms-v-prev:hover,.cms-v-next:hover{background:rgba(0,0,0,.62)}
.cms-v-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.cms-v-t{width:76px;aspect-ratio:1;flex:none;cursor:pointer;opacity:.55;transition:opacity .2s}
.cms-v-t:hover{opacity:.85}
.cms-v-t img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:560px){.cms-v-thumbs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.cms-v-t{width:60px}.cms-v-prev,.cms-v-next{width:38px;height:38px;font-size:24px}}
.cms-v-r:nth-of-type(1):checked~.cms-v-main>.cms-v-s:nth-child(1){display:block}.cms-v-r:nth-of-type(1):checked~.cms-v-thumbs>.cms-v-t:nth-child(1){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(1):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(1){outline-style:dashed}
.cms-v-r:nth-of-type(2):checked~.cms-v-main>.cms-v-s:nth-child(2){display:block}.cms-v-r:nth-of-type(2):checked~.cms-v-thumbs>.cms-v-t:nth-child(2){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(2):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(2){outline-style:dashed}
.cms-v-r:nth-of-type(3):checked~.cms-v-main>.cms-v-s:nth-child(3){display:block}.cms-v-r:nth-of-type(3):checked~.cms-v-thumbs>.cms-v-t:nth-child(3){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(3):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(3){outline-style:dashed}
.cms-v-r:nth-of-type(4):checked~.cms-v-main>.cms-v-s:nth-child(4){display:block}.cms-v-r:nth-of-type(4):checked~.cms-v-thumbs>.cms-v-t:nth-child(4){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(4):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(4){outline-style:dashed}
.cms-v-r:nth-of-type(5):checked~.cms-v-main>.cms-v-s:nth-child(5){display:block}.cms-v-r:nth-of-type(5):checked~.cms-v-thumbs>.cms-v-t:nth-child(5){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(5):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(5){outline-style:dashed}
.cms-v-r:nth-of-type(6):checked~.cms-v-main>.cms-v-s:nth-child(6){display:block}.cms-v-r:nth-of-type(6):checked~.cms-v-thumbs>.cms-v-t:nth-child(6){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(6):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(6){outline-style:dashed}
.cms-v-r:nth-of-type(7):checked~.cms-v-main>.cms-v-s:nth-child(7){display:block}.cms-v-r:nth-of-type(7):checked~.cms-v-thumbs>.cms-v-t:nth-child(7){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(7):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(7){outline-style:dashed}
.cms-v-r:nth-of-type(8):checked~.cms-v-main>.cms-v-s:nth-child(8){display:block}.cms-v-r:nth-of-type(8):checked~.cms-v-thumbs>.cms-v-t:nth-child(8){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(8):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(8){outline-style:dashed}
.cms-v-r:nth-of-type(9):checked~.cms-v-main>.cms-v-s:nth-child(9){display:block}.cms-v-r:nth-of-type(9):checked~.cms-v-thumbs>.cms-v-t:nth-child(9){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(9):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(9){outline-style:dashed}
.cms-v-r:nth-of-type(10):checked~.cms-v-main>.cms-v-s:nth-child(10){display:block}.cms-v-r:nth-of-type(10):checked~.cms-v-thumbs>.cms-v-t:nth-child(10){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(10):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(10){outline-style:dashed}
.cms-v-r:nth-of-type(11):checked~.cms-v-main>.cms-v-s:nth-child(11){display:block}.cms-v-r:nth-of-type(11):checked~.cms-v-thumbs>.cms-v-t:nth-child(11){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(11):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(11){outline-style:dashed}
.cms-v-r:nth-of-type(12):checked~.cms-v-main>.cms-v-s:nth-child(12){display:block}.cms-v-r:nth-of-type(12):checked~.cms-v-thumbs>.cms-v-t:nth-child(12){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(12):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(12){outline-style:dashed}
.cms-v-r:nth-of-type(13):checked~.cms-v-main>.cms-v-s:nth-child(13){display:block}.cms-v-r:nth-of-type(13):checked~.cms-v-thumbs>.cms-v-t:nth-child(13){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(13):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(13){outline-style:dashed}
.cms-v-r:nth-of-type(14):checked~.cms-v-main>.cms-v-s:nth-child(14){display:block}.cms-v-r:nth-of-type(14):checked~.cms-v-thumbs>.cms-v-t:nth-child(14){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(14):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(14){outline-style:dashed}
.cms-v-r:nth-of-type(15):checked~.cms-v-main>.cms-v-s:nth-child(15){display:block}.cms-v-r:nth-of-type(15):checked~.cms-v-thumbs>.cms-v-t:nth-child(15){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(15):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(15){outline-style:dashed}
.cms-v-r:nth-of-type(16):checked~.cms-v-main>.cms-v-s:nth-child(16){display:block}.cms-v-r:nth-of-type(16):checked~.cms-v-thumbs>.cms-v-t:nth-child(16){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(16):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(16){outline-style:dashed}
.cms-v-r:nth-of-type(17):checked~.cms-v-main>.cms-v-s:nth-child(17){display:block}.cms-v-r:nth-of-type(17):checked~.cms-v-thumbs>.cms-v-t:nth-child(17){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(17):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(17){outline-style:dashed}
.cms-v-r:nth-of-type(18):checked~.cms-v-main>.cms-v-s:nth-child(18){display:block}.cms-v-r:nth-of-type(18):checked~.cms-v-thumbs>.cms-v-t:nth-child(18){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(18):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(18){outline-style:dashed}
.cms-v-r:nth-of-type(19):checked~.cms-v-main>.cms-v-s:nth-child(19){display:block}.cms-v-r:nth-of-type(19):checked~.cms-v-thumbs>.cms-v-t:nth-child(19){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(19):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(19){outline-style:dashed}
.cms-v-r:nth-of-type(20):checked~.cms-v-main>.cms-v-s:nth-child(20){display:block}.cms-v-r:nth-of-type(20):checked~.cms-v-thumbs>.cms-v-t:nth-child(20){opacity:1;outline:2px solid var(--cms-ink);outline-offset:2px}.cms-v-r:nth-of-type(20):focus-visible~.cms-v-thumbs>.cms-v-t:nth-child(20){outline-style:dashed}

.cms-hero img{width:100%;height:auto;display:block;max-height:78vh;object-fit:cover}
.cms-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:1px solid var(--cms-line);margin:0 0 clamp(30px,4vw,44px)}
.cms-spec div{border-bottom:1px solid var(--cms-line);padding:15px 6px 14px}
.cms-spec dt{font-size:11.5px;letter-spacing:.16em;color:var(--cms-soft);margin:0 0 4px}
.cms-spec dd{margin:0;font-size:15px;font-weight:600;line-height:1.7}
.cms-body p{font-size:15.5px;line-height:2.1;letter-spacing:.03em;margin:0 0 1.5em}
.cms-body p:last-child{margin-bottom:0}
.cms-body h2{font-size:clamp(17px,2vw,19px);font-weight:700;letter-spacing:.06em;line-height:1.6;margin:2.4em 0 .9em;padding:0 0 .55em;border-bottom:1px solid var(--cms-line);font-family:var(--cms-jp)}
.cms-body h2:first-child{margin-top:0}
.cms-body a{color:inherit;text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.cms-video{position:relative;aspect-ratio:16/9;margin:0 0 1.5em;background:var(--cms-tint)}
.cms-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* 写真の説明（施工前・施工後など） */
.cms-hero figcaption,.cms-gallery figcaption{font-size:12.5px;letter-spacing:.06em;color:var(--cms-soft);margin:9px 0 0;line-height:1.6}
.cms-gallery figure{margin:0}
/* 本文の中の写真（書く画面で場所を選んだもの） */
.cms-inline{margin:2em 0}
.cms-inline img{width:100%;height:auto;display:block}
.cms-inline figcaption{font-size:12.5px;letter-spacing:.06em;color:var(--cms-soft);margin:9px 0 0;line-height:1.6}
/* 分類（一覧の上の切り替え・記事の日付の横） */
.cms-cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(28px,4vw,40px)}
.cms-cats a{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;border:1px solid var(--cms-line);color:inherit;text-decoration:none;font-size:13px;letter-spacing:.06em}
.cms-cats a span{font-size:11.5px;color:var(--cms-soft)}
.cms-cats a:hover{border-color:var(--cms-ink)}
.cms-cats a[aria-current]{background:var(--cms-ink);border-color:var(--cms-ink);color:var(--cms-bg)}
.cms-cats a[aria-current] span{color:inherit;opacity:.75}
/* 施工前と施工後（左右に動かして比べる。JavaScript が動かなければ2枚を並べる） */
.cms-ba{margin:clamp(24px,4vw,36px) 0 0}
.cms-ba-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 10px;font-size:14px;font-weight:700;letter-spacing:.04em}
.cms-ba-h small{font-size:12px;font-weight:400;color:var(--cms-soft)}
.cms-ba:not(.on) .cms-ba-h small{display:none}
.cms-ba-box{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cms-ba-before{order:-1}
.cms-ba-box>div{position:relative;aspect-ratio:var(--r,4/3);overflow:hidden;background:var(--cms-line)}
.cms-ba-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cms-ba-l{position:absolute;top:10px;padding:3px 10px;background:rgba(0,0,0,.62);color:#fff;font-size:12px;letter-spacing:.06em}
.cms-ba-before .cms-ba-l{left:10px}
.cms-ba-after .cms-ba-l{right:10px}
.cms-ba-r{display:none}
.cms-ba.on .cms-ba-box{display:block;position:relative;aspect-ratio:var(--r,4/3);overflow:hidden}
.cms-ba.on .cms-ba-box>div{position:absolute;inset:0;aspect-ratio:auto}
.cms-ba.on .cms-ba-before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.cms-ba.on .cms-ba-box::after{content:"";position:absolute;z-index:1;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);pointer-events:none}
.cms-ba.on .cms-ba-box::before{content:"‹ ›";position:absolute;z-index:2;top:50%;left:var(--pos,50%);width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:#fff;color:#222;display:grid;place-items:center;font-size:17px;line-height:1;box-shadow:0 1px 6px rgba(0,0,0,.3);pointer-events:none}
.cms-ba.on .cms-ba-box:has(.cms-ba-r:focus-visible){outline:3px solid var(--cms-accent);outline-offset:3px}
.cms-ba.on .cms-ba-r{display:block;position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none}
/* 場所から探す（/works/area/<場所>/）と、記事のページの「上田市の施工事例をもっと見る」 */
.cms-cats:has(+ .cms-areas){margin-bottom:12px}
.cms-areas{align-items:center}
.cms-areas-l{margin-right:4px;font-size:12px;letter-spacing:.08em;color:var(--cms-soft)}
.cms-areas a{min-height:34px;padding:0 14px;font-size:12.5px}
.cms-area-more{margin:clamp(28px,4vw,40px) 0 0}
.cms-area-more a{display:inline-flex;align-items:center;gap:6px;padding:12px 18px;border:1px solid var(--cms-ink);color:inherit;text-decoration:none;font-size:14px;letter-spacing:.04em}
.cms-area-more a::after{content:"→";margin-left:6px}
.cms-area-more a:hover{background:var(--cms-ink);color:var(--cms-bg)}
.cms-area-more .cms-num{margin-left:4px;font-size:12px}
.cms-sub .cms-cat{color:inherit;text-decoration:none;border:1px solid var(--cms-line);padding:1px 10px;font-size:12px;letter-spacing:.06em}
.cms-sub .cms-cat:hover{border-color:var(--cms-ink)}
/* ほかの記事（同じ場所・同じ工事のものを先に） */
.cms-related{margin:clamp(56px,7vw,88px) 0 0}
/* 関連する記事の下の「◯◯の一覧へ」（2026-10-23〜。施工事例などは前後の記事の代わりにこれ） */
.cms-related-more{margin:clamp(28px,4vw,40px) 0 0;text-align:center}
.cms-related-more .cms-list{display:inline-flex;align-items:center;min-height:46px;padding:0 26px;border:1px solid var(--cms-ink);color:inherit;text-decoration:none;font-size:13px;letter-spacing:.14em}
.cms-related-more .cms-list:hover{background:var(--cms-ink);color:var(--cms-bg)}
.cms-narrow>.cms-related-more:first-child{margin-top:clamp(48px,6vw,72px)}
.cms-related>h2{font-size:clamp(18px,2.2vw,22px);font-weight:700;letter-spacing:.06em;margin:0 0 clamp(22px,3vw,32px);font-family:var(--cms-jp)}
.cms-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:clamp(36px,5vw,56px) 0 0;padding:0;list-style:none}
.cms-gallery li{margin:0}
.cms-gallery img{width:100%;aspect-ratio:var(--cms-ratio,4/3);object-fit:cover;display:block}
/* 写真を押すと、元の大きさの写真を開く */
.cms-zoom{display:block;cursor:zoom-in}
.cms-gallery li:only-child{grid-column:1/-1}
.cms-gallery li:only-child img{aspect-ratio:auto;width:auto;max-width:100%;max-height:80vh;margin:0 auto}
@media(max-width:560px){.cms-gallery{grid-template-columns:1fr}}

/* 前後の記事・ページ送り */
.cms-pager{display:grid;grid-template-columns:1fr auto 1fr;gap:12px 20px;align-items:center;border-top:1px solid var(--cms-line);border-bottom:1px solid var(--cms-line);margin:clamp(48px,6vw,72px) 0 0;padding:18px 2px;font-size:13px;line-height:1.7}
.cms-pager a{color:inherit;text-decoration:none}
.cms-pager a:hover{text-decoration:underline;text-underline-offset:4px}
.cms-pager .cms-next{text-align:right}
.cms-pager .cms-list{letter-spacing:.16em;font-size:12px;border:1px solid var(--cms-ink);padding:9px 18px}
.cms-pager .cms-list:hover{background:var(--cms-ink);color:var(--cms-bg);text-decoration:none}
.cms-pager small{display:block;font-size:11px;color:var(--cms-soft);letter-spacing:.12em}
@media(max-width:600px){.cms-pager{grid-template-columns:1fr 1fr}.cms-pager .cms-list{grid-column:1/-1;grid-row:2;justify-self:center}}
.cms-pages{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:clamp(44px,6vw,64px) 0 0;padding:0;list-style:none}
.cms-pages a,.cms-pages span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 10px;border:1px solid var(--cms-line);color:inherit;text-decoration:none;font-size:13px}
.cms-pages [aria-current]{background:var(--cms-ink);border-color:var(--cms-ink);color:var(--cms-bg)}
.cms-pages a:hover{border-color:var(--cms-ink)}

/* 問い合わせへの導線 */
.cms-cta{margin:clamp(48px,6vw,72px) 0 0;padding:clamp(26px,4vw,40px) clamp(22px,4vw,44px);background:var(--cms-tint);display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between}
.cms-cta p{margin:0;font-size:15px;font-weight:700;letter-spacing:.05em;line-height:1.8}
.cms-cta p small{display:block;font-size:12.5px;font-weight:400;color:var(--cms-soft);letter-spacing:.04em}
.cms-cta .cms-btns{display:flex;flex-wrap:wrap;gap:10px}
.cms-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:50px;background:var(--cms-accent);color:#fff;text-decoration:none;padding:0 30px;font-size:14px;font-weight:700;letter-spacing:.12em;border:1px solid var(--cms-accent)}
.cms-btn:hover{background:var(--cms-accent-d);border-color:var(--cms-accent-d)}
.cms-btn.cms-line{background:transparent;color:var(--cms-ink);border-color:var(--cms-ink)}
.cms-btn.cms-line:hover{background:var(--cms-ink);color:var(--cms-bg)}

/* ── 外付け（テンプレート以外のサイト。お客様のページから作った器・13-hp-cms の attach） ──
   背景・文字色・書体はお客様のサイトのまま。線や強調の色は文字色に合わせる（会社ごとの色は hp-cms が後ろに足す） */
[data-cms-ext] .cms{--cms-ink:currentColor;--cms-tint:rgba(127,127,127,.09);background:transparent;color:inherit;font-family:inherit;padding-top:clamp(32px,5vw,60px)}
[data-cms-ext] .cms-head h1,[data-cms-ext] .cms-num{font-family:inherit}
/* 外付け：お客様のサイトが header 全体に付けた見た目（上に固定・左右に振り分け・白抜きなど）を、記事の見出しの枠に持ち込まない（2026-10-27 カミツレ） */
[data-cms-ext] .cms .cms-head{position:static;inset:auto;width:auto;height:auto;display:block;float:none;z-index:auto;transform:none;mix-blend-mode:normal;color:inherit;background:none;box-shadow:none;padding:0 0 22px;margin:0 0 clamp(30px,4vw,44px)}
/* 外付け：お客様のサイトの変数（--accent・--line など、別の意味のことがある）は読まず、文字色から作る。会社の色は hp-cms が後ろに足す */
[data-cms-ext] .cms{--cms-soft:color-mix(in srgb,currentColor 62%,transparent);--cms-line:rgba(127,127,127,.32);--cms-bg:transparent;--cms-accent:currentColor;--cms-accent-d:currentColor;--cms-en:inherit;--cms-jp:inherit}
/* 今の分類・ページ・押したときは、塗りつぶさず枠と太字で（文字色＝背景色になって見えなくならないように） */
[data-cms-ext] .cms-cats a[aria-current],[data-cms-ext] .cms-pages [aria-current]{background:transparent;color:inherit;border-color:currentColor;font-weight:700;box-shadow:inset 0 0 0 1px currentColor}
[data-cms-ext] .cms-area-more a:hover,[data-cms-ext] .cms-pager .cms-list:hover,[data-cms-ext] .cms-related-more .cms-list:hover,[data-cms-ext] .cms-btn.cms-line:hover{background:var(--cms-tint);color:inherit}
/* お客様のテーマの見出し・箇条の飾り（帯・線・点）を受けない */
[data-cms-ext] .cms :is(h1,h2,h3,h4){background:none;border:0;box-shadow:none;padding-left:0;padding-right:0}
[data-cms-ext] .cms :is(h1,h2,h3,h4,li)::before,[data-cms-ext] .cms :is(h1,h2,h3,h4,li)::after{content:none}
[data-cms-ext] .cms ul{list-style:none;padding-left:0}
.cms-root-sec+.cms-root-sec{margin-top:clamp(56px,8vw,96px)}
.cms-root-sec .cms-cards{margin-top:34px}

/* 写真の並び：キーボードで選んでいるときは、小さい写真の並びに枠 */
.cms-v-r:focus-visible~.cms-v-thumbs{outline:2px solid var(--cms-accent);outline-offset:4px}

/* 添付の PDF（お知らせのチラシ・求人票など。2026-10-23） */
.cms-files{margin:clamp(28px,4vw,40px) 0}
.cms-files h2{font-size:1rem;margin:0 0 12px}
.cms-files ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cms-files a{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--cms-line);border-radius:6px;color:inherit;text-decoration:none;transition:border-color .15s}
.cms-files a:hover{border-color:var(--cms-accent)}
.cms-file-ic{flex:none;font-size:.72rem;font-weight:700;letter-spacing:.06em;padding:4px 8px;border-radius:4px;background:#c7372f;color:#fff}
.cms-file-name{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}
.cms-files small{flex:none;opacity:.7;font-size:.82rem}

[data-cms-ext] .cms{--cms-accent:#333333;--cms-accent-d:#333333;}

/* 会社ごと（attach --css） */
[data-cms-ext] main.cms{padding-top:150px}[data-cms-ext] .cms .cms-head{text-align:center;border:0;padding:0;margin:0 0 56px}[data-cms-ext] .cms .cms-head .cms-en{font-family:var(--font-en);font-size:.8rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:rgba(0,0,0,.25);margin:0 0 16px}[data-cms-ext] .cms .cms-head h1{font-family:var(--font-jp);font-size:1.5rem;font-weight:500;letter-spacing:.1em;color:var(--text-color)}[data-cms-ext] .cms-post .cms-head .cms-en{font-size:3rem;font-weight:300;letter-spacing:.1em;color:var(--text-color);margin-bottom:10px;line-height:1.3}[data-cms-ext] .cms-post .cms-head h1{font-size:.9rem;font-weight:400;color:#999;letter-spacing:.2em}[data-cms-ext] .cms .cms-head .cms-sub{justify-content:center;font-family:var(--font-en);color:#999}[data-cms-ext] .cms .cms-count{font-family:var(--font-en);color:#999}[data-cms-ext] .cms-crumb{font-family:var(--font-en);font-size:.8rem;color:#999}[data-cms-ext] .cms-body h2{font-family:var(--font-jp);font-size:1.3rem;font-weight:500;letter-spacing:.08em;line-height:1.6;margin:60px 0 24px;padding:0 0 0 16px;border:0;border-left:3px solid #b5a898;color:var(--text-color)}[data-cms-ext] .cms-body p{font-size:.98rem;line-height:2.2;color:#555}[data-cms-ext] .cms-card .cms-card-t{font-size:1.05rem;font-weight:500;letter-spacing:.06em}[data-cms-ext] .cms-root .cms-head .cms-en{font-size:0}[data-cms-ext] .cms-root .cms-head .cms-en::after{content:"COLUMN";font-size:.8rem}[data-cms-ext] .cms-root-sec .cms-top-head{display:none}@media (max-width:768px){[data-cms-ext] main.cms{padding-top:96px}[data-cms-ext] .cms-post .cms-head .cms-en{font-size:2.2rem}[data-cms-ext] .cms-body h2{font-size:1.15rem}}