@charset "UTF-8";
/* 施工事例一覧（case_newly/index.twig・listing.twig・T104）と、詳細ページ（case_newly/entry.twig）の特徴タグ・「同じ特徴の住まい」（T109）用。
   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 で帯をやめたので、パンくずが隠れないようにヘッダーの高さぶん下げる（PC 110px・767px 以下 92px） */
.cn-page { padding-top: 110px; }
/* 最初の画面にカードが入るよう、この 2 ページだけパンくずの下の余白（page-system.css の 48px）を詰める */
.cn-page .seo_bread_list { margin-bottom: 12px; }

/* ---------- ヒーロー ---------- */
.cn-hero { position: relative; margin: 0 0 16px; border-radius: 4px; overflow: hidden; background: #FAF8F5; }
/* 高さは表示領域の高さに合わせて 200〜360px（1366×768 のノート PC でもカードの写真が 150px 以上見える） */
.cn-hero-media { display: block; position: relative; height: clamp(200px, 30vh, 360px); }
.cn-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 12, 6, 0.62) 0%, rgba(20, 12, 6, 0.18) 55%, rgba(20, 12, 6, 0) 100%); pointer-events: none; }
.cn-hero-media picture { display: block; width: 100%; height: 100%; }
.cn-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.cn-hero:hover .cn-hero-img { transform: scale(1.03); }
/* 文字部分の行の高さは本文（1.8）より詰める。ヒーローが最小の 200px でも上が切れないように */
.cn-hero-body { position: absolute; left: 48px; right: 48px; bottom: 24px; color: #fff; line-height: 1.4; text-shadow: 0 1px 8px rgba(20, 12, 6, 0.55); pointer-events: none; }
.cn-hero-body a { pointer-events: auto; }
.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; }
/* 分類名は 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 0 10px; 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; }
/* PICK UP の題名は 1 行に収め、長いときは末尾を省略する（2 行になるとヒーローの上が切れるため） */
.cn-hero-link { display: inline-flex; align-items: center; max-width: 100%; color: #fff; font-size: 14px; letter-spacing: 0.06em; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.6); padding-bottom: 3px; }
.cn-hero-link-ttl { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 矢印は題名の外に置き、題名が省略されても消えないようにする */
.cn-hero-link::after { content: "→"; flex: none; margin-left: 0.4em; }
.cn-hero-link:hover { text-decoration: none; opacity: 0.85; }
.cn-hero-pick { display: inline-block; flex: none; margin-right: 10px; text-shadow: none; padding: 2px 8px; background: #c9a063; color: #fff; font-family: "Barlow", sans-serif; font-size: 11px; letter-spacing: 0.12em; vertical-align: 1px; }

/* 写真が無いとき（候補が無い分類・記事 0 件の分類）は文字だけのヒーロー */
.cn-hero--text { padding: 24px 48px 22px; }
.cn-hero--text .cn-hero-body { position: static; color: #3b2f26; text-shadow: none; }
.cn-hero--text .cn-hero-num { color: #602600; }
.cn-hero--text .cn-hero-count { margin-bottom: 0; }

/* 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-body { left: calc(min(50vw, 960px) - 550px + 48px); right: calc(min(50vw, 960px) - 550px + 48px); }
  .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; }
  .cn-page { padding-top: 92px; }
  .cn-hero, .cn-filter, .cn-grid, .cn-empty { margin-left: 15px; margin-right: 15px; }
  .cn-hero { margin-top: 4px; margin-bottom: 16px; }
  /* 3:2。ただし横長の画面（481〜767px の横向き等）でカードが最初の画面に入るよう、高さは表示領域の 42% まで。
     ただし 200px より低くはしない（文字部分は分類別一覧で約 149px + 下余白 22px。低くすると見出しの上が切れる。
     180px では上の余白が 9px しかなく、Web フォントの有無で切れうるため 200px にして約 29px 残す） */
  .cn-hero-media { height: auto; aspect-ratio: 3 / 2; max-height: max(42vh, 200px); }
  .cn-hero-body { left: 20px; right: 20px; bottom: 22px; }
  .cn-hero-ttl { margin-bottom: 10px; font-size: 22px; }
  .cn-hero-cat { font-size: 17px; }
  .cn-hero-count { margin-bottom: 12px; font-size: 14px; }
  .cn-hero-num { margin: 0 4px 0 8px; font-size: 44px; vertical-align: -6px; }
  .cn-hero-link { font-size: 12px; }
  .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 以下は 1 列（カード幅は最大 450px） */
@media screen and (max-width: 480px) {
  .cn-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}