@charset "UTF-8";
/* 施工事例一覧（case_newly/index.twig・listing.twig・T104）と、詳細ページ（case_newly/entry.twig）の特徴タグ・「同じ特徴の住まい」（T109）、ホーム（index.twig）の施工事例（T118）用。
   page-system.css の後に読み込む。既存の .system-list / .serchcategory / .system-* / .fit の規則が当たらないよう、
   新しい cn- 系のクラスだけに書く。ヒーローは「横幅いっぱい・高さ控えめ・スクロールせずにカードが見える」（依頼者の判断）。
   画面幅いっぱいに広げるのは 1201px 以上だけ（上限 1920px）。768〜1200px は overflow-x がクリップされず main が 1100px 固定なので、
   全幅化すると表示がずれる・横スクロールが出る。この範囲は main の幅に収める */

/* ---------- 固定ヘッダーの下の余白 ----------
   body の padding-top（common.css）は後から読み込まれる jquery.bxslider.css の body { padding: 0 } で 0 になっており、
   ページ先頭は固定ヘッダーの下に潜る。これまでは灰色の見出し帯（h1.main-title）が潜る分を受け止めていたが、
   T104 で帯をやめたので、パンくずが隠れないようにヘッダーの高さぶん下げる
   （上の帯は全幅で 70px 固定（T136）。余白は PC 70px・767px 以下は 6px の余裕を足した 76px） */
.cn-page { padding-top: 70px; }
/* 最初の画面にカードが入るよう、この 2 ページだけパンくずの下の余白（page-system.css の 48px）を詰める */
.cn-page .seo_bread_list { margin-bottom: 12px; }

/* ---------- ヒーロー（文字だけの見出し・T227。写真と PICK UP は廃止） ---------- */
.cn-hero { position: relative; margin: 0 0 16px; overflow: hidden; background: #fff; text-align: center; }
.cn-hero--text { padding: 36px 48px 26px; }
.cn-hero-body { color: #3b2f26; line-height: 1.4; }
.cn-hero-ttl { margin: 0 0 6px; font-family: "Noto Serif JP", "游明朝", YuMincho, serif; font-size: 24px; font-weight: 500; letter-spacing: 0.12em; line-height: 1.3; }
.cn-hero-ttl:last-child { margin-bottom: 0; }
/* 分類名は 1 行に収める（「ウォークインクローゼット、納戸」が幅 320px で 2 行になるため） */
.cn-hero-cat { margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: 0.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-hero-count { margin: 0; font-size: 16px; letter-spacing: 0.08em; line-height: 1; }
.cn-hero-num { display: inline-block; margin: 0 6px 0 10px; font-family: "Barlow", sans-serif; font-size: 44px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; vertical-align: -5px; color: #602600; }

/* 1201px 以上は画面幅いっぱい（上限 1920px で中央寄せ）。html / body の overflow-x: hidden が効く範囲。
   文字は本文（main の 1100px）の左端に揃える。幅を取るスクロールバー（幅 s）の環境では main が中央寄せのため
   ヒーローは左右に s/2 ずつ画面の外に出て切り取られる（横スクロールは出ない。文字の位置はずれない） */
@media screen and (min-width: 1201px) {
  .cn-hero { width: min(100vw, 1920px); margin-left: calc(50% - min(50vw, 960px)); margin-right: calc(50% - min(50vw, 960px)); border-radius: 0; }
  .cn-hero--text { padding-left: calc(min(50vw, 960px) - 550px + 48px); padding-right: calc(min(50vw, 960px) - 550px + 48px); }
}

/* ---------- 絞り込み ---------- */
/* 段（タイプ / 特徴・T106）ごとに、ラベルをボタンと同じ行の先頭に置く。見出し行を置かず、ボタンの上下の余白を 6px にして、
   2 段でも最初の画面にカードが入るようにする（1366×650 で写真が 150px 以上見えること・T104） */
.cn-filter { margin: 0 0 20px; }
.cn-filter-row { display: flex; align-items: center; gap: 14px; }
.cn-filter-row + .cn-filter-row { margin-top: 8px; }
.cn-filter-label { flex: none; width: 3.6em; margin: 0; color: #8a7b6e; font-size: 13px; letter-spacing: 0.12em; line-height: 1.2; }
.cn-filter-list { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.cn-filter-list li { flex: none; margin: 0; }
.cn-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; white-space: nowrap; border: 1px solid #d8d2ca; border-radius: 999px; background: #fff; color: #3b2f26; font-size: 14px; letter-spacing: 0.06em; line-height: 1.2; text-decoration: none; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.cn-chip:hover { border-color: #602600; color: #602600; text-decoration: none; }
.cn-chip-num { color: #b08a4f; font-family: "Barlow", sans-serif; font-size: 13px; }
.cn-chip.is-active { border-color: #602600; background: #602600; color: #fff; }
.cn-chip.is-active .cn-chip-num { color: #fff; opacity: 0.8; }

/* ---------- カード ---------- */
.cn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 32px; margin: 0 0 56px; padding: 0; list-style: none; }
.cn-item { margin: 0; padding: 0; }
.cn-card { display: block; height: 100%; color: #1a1a1a; text-decoration: none; }
.cn-card:hover { text-decoration: none; }
.cn-card:focus-visible { outline: 2px solid #602600; outline-offset: 4px; }
.cn-card-pic { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #ecebe7; }
.cn-card-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.cn-card:hover .cn-card-pic img { transform: scale(1.05); }
.cn-card-body { padding-top: 14px; }
.cn-rooms { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.cn-room { margin: 0; padding: 2px 8px; background: #f0ede8; color: #3b2f26; font-size: 11px; }
.cn-card-facts { margin: 0 0 6px; color: #b08a4f; font-size: 12px; letter-spacing: 0.04em; line-height: 1.5; }
.cn-card-ttl { margin: 0 0 10px; color: #1a1a1a; font-size: 16px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.6; }
/* 特徴タグ（T106）。部屋の札（.cn-room・灰色地）と区別するため、白地に細い枠と茶色の文字 */
.cn-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 12px; padding: 0; list-style: none; }
.cn-tag { margin: 0; padding: 3px 10px; border: 1px solid #d9c8b2; border-radius: 999px; background: #fff; color: #7a5232; font-size: 11px; letter-spacing: 0.04em; line-height: 1.4; }
.cn-card-more { display: inline-block; color: #602600; font-size: 13px; letter-spacing: 0.08em; }
.cn-card-more::after { content: " →"; display: inline-block; transition: transform 0.2s; }
.cn-card:hover .cn-card-more::after { transform: translateX(4px); }

.cn-empty { margin: 0 0 56px; }

/* ---------- 詳細ページ（T109）: 特徴タグと「同じ特徴の住まい」 ---------- */
/* タグは一覧の札（.cn-tag）と同じ白地・細い枠・茶色の文字。詳細ページではリンクなので、乗せると枠と文字を濃くする */
.cn-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.cn-detail-tags li { margin: 0; }
.cn-detail-tag { display: inline-block; padding: 5px 14px; border: 1px solid #d9c8b2; border-radius: 999px; background: #fff; color: #7a5232; font-size: 13px; letter-spacing: 0.04em; line-height: 1.4; text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.cn-detail-tag:hover { border-color: #602600; color: #602600; text-decoration: none; }
.cn-related { margin: 64px 0 72px; }
.cn-related .cn-grid { margin-bottom: 24px; }
.cn-related-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.cn-related-more li { margin: 0; }
.cn-related-more a { color: #602600; font-size: 14px; letter-spacing: 0.06em; text-decoration: none; }
.cn-related-more a::after { content: " →"; }
.cn-related-more a:hover { text-decoration: underline; }

/* ---------- 詳細ページ（T114）: 住まいの条件 ---------- */
/* ラベル（小さい薄茶）＋ 値を横に並べ、細い縦線で区切る。値のある項目だけが入る。
   T101 の「｜」区切り 1 行と、その下のグレーの箱（家のタイプ・建て方）を 1 か所にまとめたもの */
.cn-spec { display: flex; flex-wrap: wrap; gap: 12px 0; margin: 0 0 22px; padding: 0; }
.cn-spec-item { padding: 0 22px; border-left: 1px solid #e3d8c9; }
.cn-spec-item:first-child { padding-left: 0; border-left: 0; }
.cn-spec dt { margin: 0 0 5px; color: #a08a6c; font-size: 11px; letter-spacing: 0.12em; line-height: 1.2; }
.cn-spec dd { margin: 0; color: #4a3a2c; font-size: 16px; font-weight: bold; letter-spacing: 0.04em; line-height: 1.3; }

/* ---------- ページ番号（T113）: 絞り込みのボタン（.cn-chip）と同じ白地・細い枠・茶色 ---------- */
.cn-pager { margin: 8px 0 72px; }
.cn-pager-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cn-pager-list li { margin: 0; }
.cn-pager-num, .cn-pager-step { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 40px; border: 1px solid #d8d2ca; border-radius: 999px; background: #fff; color: #3b2f26; font-family: "Barlow", sans-serif; font-size: 15px; line-height: 1; text-decoration: none; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.cn-pager-num { width: 40px; }
/* 矢印と文字は別の要素（flex の子）なので、間は gap で空ける */
.cn-pager-step { gap: 6px; padding: 0 18px; font-family: inherit; font-size: 14px; letter-spacing: 0.06em; }
.cn-pager-num:hover, .cn-pager-step:hover { border-color: #602600; color: #602600; text-decoration: none; }
.cn-pager-num.is-current { border-color: #602600; background: #602600; color: #fff; }
.cn-pager-gap { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 40px; color: #8a7b6e; }

/* ---------- 詳細ページ（T112）: 「その他の事例はこちらから」の一覧へのリンク ---------- */
/* カードの枠（#case_newly .system-list・下余白 50px）の直後では、その余白に少し食い込ませてカードに寄せる。カードが無いときは詰めない */
.cn-common-more { margin: 0 0 56px; text-align: center; }
.system-list + .cn-common-more { margin-top: -26px; }
.cn-common-more a { color: #602600; font-size: 14px; letter-spacing: 0.06em; text-decoration: none; }
.cn-common-more a::after { content: " →"; }
.cn-common-more a:hover { text-decoration: underline; }

/* ---------- 767px 以下: 余白を付け、ヒーローは 3:2（スマホ用の縮小版 840x560 と同じ比率） ---------- */
@media screen and (max-width: 767px) {
  /* 住まいの条件（T114）。幅が足りず折り返すので 3 列に整列させる。
     flex のままだと 2 行目の先頭に区切り線が残って右にずれるため、行頭（3n+1）の線を消す */
  .cn-spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 0; margin-bottom: 18px; }
  .cn-spec-item { padding: 0 12px; }
  .cn-spec-item:nth-child(3n+1) { padding-left: 0; border-left: 0; }
  .cn-spec dt { margin-bottom: 3px; font-size: 10px; }
  .cn-spec dd { font-size: 14px; }
  /* 上の帯は全幅で 70px 固定（T136。T125 では帯が画面幅に比例していたため calc(12vw + 44px) で追従させていた）。
     76px = 帯 70px + 余裕 6px。帯を 70px より高くすると先頭が潜る */
  .cn-page { padding-top: 76px; }
  .cn-hero, .cn-filter, .cn-grid, .cn-empty { margin-left: 15px; margin-right: 15px; }
  .cn-hero { margin-top: 4px; margin-bottom: 16px; }
  .cn-hero-ttl { margin-bottom: 10px; font-size: 22px; }
  .cn-hero-cat { font-size: 17px; }
  .cn-hero-count { font-size: 14px; }
  .cn-hero-num { margin: 0 4px 0 8px; font-size: 44px; vertical-align: -6px; }
  .cn-hero--text { padding: 28px 20px 26px; }
  .cn-filter { margin-bottom: 20px; }
  /* 段は折り返さず横にスクロールする（2 段で約 70px。折り返すと 3 行以上になり最初の画面にカードが入らない・T106）。
     右端は画面の端まで広げ、途中で切れたボタンで続きがあると分かるようにする */
  .cn-filter-row { gap: 10px; margin-right: -15px; padding-right: 15px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cn-filter-row::-webkit-scrollbar { display: none; }
  .cn-filter-label { width: auto; font-size: 12px; }
  .cn-filter-list { flex-wrap: nowrap; }
  .cn-chip { padding: 7px 13px; font-size: 13px; }
  /* 481〜767px は 2 列（1 列だとカードの 480px 縮小版では幅が足りない） */
  .cn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin-bottom: 40px; }
  .cn-card-ttl { font-size: 15px; }
  /* ページ番号（T113）。最大 10 個（前へ＋1〜8＋次へ）並ぶので、320〜390px では 2 段まで折り返す。前へ/次へは矢印だけの丸にし、文字は見た目だけ隠す（読み上げ名は「前へ」「次へ」のまま） */
  .cn-pager { margin: 0 15px 48px; }
  .cn-pager-list { gap: 6px; }
  .cn-pager-num, .cn-pager-step { height: 36px; font-size: 13px; }
  .cn-pager-num { width: 36px; }
  .cn-pager-step { position: relative; width: 36px; padding: 0; }
  .cn-pager-step-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .cn-pager-gap { width: 20px; height: 36px; }
  /* 詳細ページ（T109）。カードの左右 15px は .cn-grid に付いているので、節そのものには付けない */
  .cn-related { margin: 40px 0 48px; }
  .cn-related-more { flex-direction: column; align-items: flex-start; margin: 0 15px; }
  /* 「その他の事例」の一覧へのリンク（T112）。SP の枠（#case_newly .system-list）は画面幅いっぱいなので、文言が折り返しても画面端に付かないよう左右 15px */
  .cn-common-more { margin-left: 15px; margin-right: 15px; }
}
/* 480px 以下も 2 列（T158。2026-10-09 の依頼「スマホでも 2 個ずつ並べる」。T104 で決めた 1 列を置き換えた）。
   カードは 320px の画面で約 122px まで細くなる（トップの WORKS は .hm-works の padding 16px が加わるぶん一覧より狭い）ので、
   題名・説明・特徴タグの字も一緒に小さくする。写真の 4:3 は他の画面幅と揃えたままにする */
@media screen and (max-width: 480px) {
  .cn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .cn-card-facts { font-size: 11px; }
  .cn-card-ttl { font-size: 14px; }
  /* 特徴タグ（taxonomy.yml の case_newly_features・最長は「薪・ペレットストーブ」10 文字）が札の中で折り返さない大きさ。
     最も狭い 320px のトップでも 1 行に収まることを実測した（札 119px ≤ カード 122px。余裕は約 3px・T158）。
     字はこれ以上小さくしない（10px が下限）ので、選択肢に 11 文字以上の特徴を足すと折り返す */
  .cn-tag { padding: 3px 8px; font-size: 10px; letter-spacing: 0.02em; }
}

/* ---------- 本文（T139） ----------
   T119 で写真ビューアに差し替えたときに出力ごと消えていた本文を戻す。
   管理画面の入力は <p> と <br> の HTML なので、見出し・行間・1 行の長さだけを整える。
   読み物として読みやすいよう、本文の幅は写真より少し狭くする */
.cn-story { max-width: 760px; margin: 40px auto 48px; padding: 0 4px; }
.cn-story-ttl { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid #e5ded5;
  color: #3b2f26; font-size: 19px; font-weight: bold; letter-spacing: 0.06em; }
.cn-story-body { color: #4a3a2c; font-size: 15.5px; line-height: 2.05; letter-spacing: 0.03em; }
.cn-story-body p { margin: 0 0 1.5em; }
.cn-story-body p:last-child { margin-bottom: 0; }
/* 管理画面で空の <p></p> が段落の区切りに使われている記事があるので、余白が二重にならないようにする */
.cn-story-body p:empty { display: none; }
.cn-story-body a { color: #602600; text-decoration: underline; }
.cn-story-body img { max-width: 100%; height: auto; }

@media screen and (max-width: 767px) {
  .cn-story { margin: 28px 15px 36px; padding: 0; }
  .cn-story-ttl { margin-bottom: 14px; padding-bottom: 10px; font-size: 17px; }
  .cn-story-body { font-size: 15px; line-height: 1.95; }
  .cn-story-body p { margin-bottom: 1.4em; }
}

/* ---------- スクロールで順に現れる（T260）。js/case-newly-reveal.js が画面の下のカードにだけ .cn-rv を付ける。JS が無ければ付かず、そのまま表示 ---------- */
.cn-item.cn-rv { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
.cn-item.cn-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cn-item.cn-rv { opacity: 1; transform: none; transition: none; } }

/* ---------- 詳細ページ末尾の相談会 CTA（T301）。事例に合わせた相談会（include/_case_newly_cta.twig） ---------- */
.cn-cta { max-width: 760px; margin: 48px auto; padding: 36px 32px 28px; border: 1px solid #e5ded5; border-radius: 4px; background: #faf7f2; color: #3b2f26; text-align: center; }
.cn-cta-tag { margin: 0 0 8px; color: #8a7b6e; font-size: 13px; letter-spacing: 0.12em; }
.cn-cta-ttl { margin: 0 0 12px; font-family: "Noto Serif JP", "游明朝", YuMincho, serif; font-size: 22px; font-weight: 500; letter-spacing: 0.08em; line-height: 1.5; }
.cn-cta-worry { margin: 0 0 22px; font-size: 15px; line-height: 1.9; letter-spacing: 0.03em; }
.cn-cta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; margin: 0 0 18px; }
.cn-cta-btn { display: inline-block; padding: 15px 36px; border-radius: 2px; background: #602600; color: #fff; font-size: 15px; letter-spacing: 0.08em; line-height: 1.4; text-decoration: none; transition: background 0.25s; }
.cn-cta-btn:hover { background: #3f2e21; color: #fff; text-decoration: none; }
.cn-cta-sub, .cn-cta-all a { color: #602600; font-size: 14px; letter-spacing: 0.06em; }
.cn-cta-sub::after, .cn-cta-all a::after { content: " →"; }
.cn-cta-all { margin: 0; }
@media screen and (max-width: 767px) {
  .cn-cta { margin: 36px 15px; padding: 28px 18px 22px; }
  .cn-cta-ttl { font-size: 19px; }
  .cn-cta-worry { font-size: 14px; }
  .cn-cta-btn { box-sizing: border-box; width: 100%; padding: 15px 12px; }
}