/* =========================================================
   ホームランディック 記事テンプレート（施工事例・コラム）
   - 施工事例: TECTURE MAG 型（左に固定の文章、右に大きな写真）
   - コラム: SUUMOジャーナル 型（本文 + 右サイド、執筆者・要約・FAQ）
   既存テーマ（style.css）の上に読み込む。クラスはすべて hl- で始める。
   ========================================================= */
:root {
  --hl-ink: #2a2b2b;
  --hl-sub: #6b6b6b;
  --hl-line: #dedede;
  --hl-bg: #fbfbfb;
  --hl-panel: #f0efec;
  --hl-accent: #8a6d3b;
  --hl-mincho: "Shippori Mincho B1", "Noto Serif JP", "Yu Mincho", serif;
  --hl-gothic: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* ---- 広い記事エリア（右メニューは残し、左の動画エリアを記事に使う） ---- */
@media screen and (min-width: 1061px) {
  body.hl-wide .l-layout__right { display: none; }
  body.hl-wide .l-layout__content { flex: 1 1 auto; width: auto; max-width: none; margin: 0; }
  body.hl-wide .c-contact-banner__inner,
  body.hl-wide .l-footer > .u-main-layout { max-width: 640px; margin-left: auto; margin-right: auto; }
}
body.hl-wide .l-main.hl-main { background: var(--hl-bg); color: var(--hl-ink); }
/* 左上に固定されたロゴ（マーク＋文字ロゴ 約260px）の下に本文が潜り込まないよう、左に余白をとる */
@media screen and (min-width: 1061px) {
  body.hl-wide .hl-main { padding-left: 280px; padding-right: 40px; }
}
@media screen and (min-width: 751px) and (max-width: 1060px) {
  body.hl-wide .hl-main { padding-left: 120px; padding-right: 24px; }
}
/* スマホ: 上部ヘッダーが透明だと本文と重なって見えるので、記事ページでは背景を敷く */
@media screen and (max-width: 750px) {
  body.hl-wide .l-header, body.hl-works-page .l-header, body.hl-col-page .l-header { background: rgba(251, 251, 251, .96); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
}
/* タブレット幅（751〜1023px）は本文のパネルがロゴの下に来るので、ヘッダーを横いっぱいの不透明な帯にし、ロゴは黒版にする */
@media screen and (min-width: 751px) and (max-width: 1023px) {
  body.hl-works-page .l-header, body.hl-col-page .l-header { right: 0; width: auto; background: rgba(251, 251, 251, .96); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
  body.hl-works-page .l-header__logo__anchor__img.is-white, body.hl-col-page .l-header__logo__anchor__img.is-white { opacity: 0 !important; }
  body.hl-works-page .l-header__logo__anchor__img.is-black, body.hl-col-page .l-header__logo__anchor__img.is-black { opacity: 1 !important; }
}
/* 明るい背景なので、ロゴは黒版＋文字ロゴを表示 */
@media screen and (min-width: 751px) {
  body.hl-wide .l-header__logo__anchor__img.is-white { opacity: 0 !important; }
  body.hl-wide .l-header__logo__anchor__img.is-black,
  body.hl-wide .l-header__logo__anchor__img.is-text { opacity: 1 !important; }
}
.hl-main { font-family: var(--hl-gothic); }
.hl-main img { max-width: 100%; height: auto; display: block; }
.hl-main a { color: inherit; }

.hl-sec { max-width: 1120px; margin: 0 auto; padding: 72px 48px 0; }
.hl-sec__ttl { font-family: var(--hl-mincho); font-size: 22px; font-weight: 400; letter-spacing: .08em; margin: 0 0 28px; padding-bottom: 14px; border-bottom: 1px solid var(--hl-line); }
.hl-sec__ttl small { display: block; font-family: var(--hl-gothic); font-size: 11px; letter-spacing: .2em; color: var(--hl-sub); margin-bottom: 6px; }

/* ================= 施工事例（サイト本来の枠：左に背景動画、中央の白いパネル550px、右にメニュー。ほかのページと同じ位置） =================
   - 書体はサイト本来の明朝体（Noto Serif JP）に統一 */
/* パネルの位置と幅（550px）はほかのページと同じ。テーマ既定のまま変えない */
body.hl-works-page .l-main.hl-main { background: var(--hl-bg); }
.hl-works, .hl-works *, .hl-works *::before, .hl-works *::after { font-family: "Noto Serif JP", "Yu Mincho", serif !important; }
.hl-works { padding: 120px 40px 96px; color: var(--hl-ink); }
.hl-works__head { margin: 0 0 40px; }
.hl-meta { font-size: 11px; letter-spacing: .2em; color: var(--hl-sub); margin: 0 0 18px; }
.hl-meta span + span::before { content: "／"; margin: 0 .7em; color: #bbb; }
.hl-works__title { font-weight: 500; font-size: 22px; line-height: 1.8; letter-spacing: .06em; margin: 0; }
.hl-works__size { white-space: nowrap; }
.hl-works__catch { margin: 14px 0 0; font-size: 15px; line-height: 1.9; letter-spacing: .06em; color: var(--hl-sub); }
.hl-works__name { display: block; margin-top: 12px; font-size: 15px; font-weight: 400; letter-spacing: .16em; color: var(--hl-sub); }
.hl-works__hero { margin: 0 0 48px; }
.hl-works__hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hl-works__hero figcaption { margin-top: 10px; font-size: 11px; line-height: 1.8; color: var(--hl-sub); }
.hl-works__lead { font-size: 15px; line-height: 2.2; letter-spacing: .04em; margin: 0 0 48px; }
.hl-works__lead p { margin: 0; }
.hl-quote { margin: 0 0 56px; padding: 28px 32px; background: var(--hl-panel); font-size: 15px; line-height: 2.1; letter-spacing: .04em; }
.hl-quote cite { display: block; margin-top: 12px; text-align: right; font-style: normal; font-size: 12px; letter-spacing: .1em; color: var(--hl-sub); }
.hl-works .hl-prose { font-size: 14px; line-height: 2.2; letter-spacing: .04em; }
.hl-works .hl-prose h2 { font-weight: 500; font-size: 17px; line-height: 1.8; letter-spacing: .06em; margin: 64px 0 20px; }
.hl-works .hl-prose h2:first-child { margin-top: 0; }
.hl-works .hl-prose p { margin: 0 0 1.4em; }
.hl-works .hl-prose blockquote { margin: 32px 0; padding: 24px 28px; background: var(--hl-panel); }
.hl-works .hl-prose blockquote p { margin: 0; }
.hl-works .hl-prose .hl-photo { margin: 40px 0 44px; }
.hl-works .hl-prose .hl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 40px 0 44px; }
.hl-works .hl-prose .hl-pair .hl-photo { margin: 0; }
.hl-works .hl-prose .hl-pair img { aspect-ratio: 4 / 5; object-fit: cover; }
.hl-photo { margin: 0; }
.hl-photo img { width: 100%; }
.hl-photo figcaption { margin-top: 10px; font-size: 11px; line-height: 1.8; letter-spacing: .03em; color: var(--hl-sub); }
/* この家のデータ（TECTURE MAG と同じく「項目：内容」を1行ずつ） */
.hl-data { margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--hl-line); }
.hl-data__ttl { font-size: 13px; font-weight: 500; letter-spacing: .14em; margin: 0 0 16px; }
/* データ欄: ラベルの列幅を固定し、罫線で区切る表（コロンは使わない） */
.hl-credit { margin: 0; font-size: 13px; line-height: 1.8; letter-spacing: .04em; border-top: 1px solid var(--hl-line); }
.hl-credit div { display: grid; grid-template-columns: 7.5em 1fr; column-gap: 1.5em; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--hl-line); }
.hl-credit dt { margin: 0; color: var(--hl-sub); font-size: inherit; line-height: inherit; }
.hl-credit dd { margin: 0; font-size: inherit; line-height: inherit; word-break: keep-all; overflow-wrap: anywhere; }
.hl-works .hl-sec { max-width: none; padding: 72px 0 0; }
.hl-works .hl-sec__ttl { font-size: 17px; font-weight: 500; letter-spacing: .08em; }
.hl-works .hl-chapters { grid-template-columns: 1fr; }
.hl-works .hl-chapters button { font-size: 13px; }
.hl-works .hl-faq summary { font-size: 14px; font-weight: 500; }
.hl-works .hl-faq__a { font-size: 13px; }
.hl-works .hl-cards { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hl-works .hl-card__ttl { font-size: 13px; }

/* 共通の本文（コラムで使用） */
.hl-prose { font-size: 15px; line-height: 2.15; letter-spacing: .04em; }
.hl-prose h2 { font-family: var(--hl-mincho); font-weight: 500; font-size: 20px; line-height: 1.8; margin: 64px 0 24px; }
.hl-prose h3 { font-size: 16px; font-weight: 700; margin: 32px 0 10px; }
.hl-prose p { margin: 0 0 1.5em; }
.hl-prose blockquote { margin: 40px 0; padding: 24px 28px; background: var(--hl-panel); }
.hl-prose blockquote p { margin: 0; }
.hl-prose ul { padding-left: 1.2em; margin: 0 0 1.4em; }
.hl-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.8em; font-size: 14px; line-height: 1.7; background: #fff; }
.hl-prose th, .hl-prose td { border: 1px solid var(--hl-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.hl-prose th { background: var(--hl-panel); font-weight: 700; white-space: nowrap; }

/* 執筆者（写真付き） */
.hl-author__photo { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }

/* 動画とチャプター */
.hl-video__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.hl-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* クリックするまでは高解像度のサムネイルだけを見せる（YouTube の重なる文字を出さない） */
.hl-yt-lite__btn { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.hl-yt-lite__btn img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s; }
.hl-yt-lite__play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 12px; background: rgba(20,20,20,.78); transition: background .2s; }
.hl-yt-lite__play::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -6px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; }
.hl-yt-lite__btn:hover .hl-yt-lite__play, .hl-yt-lite__btn:focus-visible .hl-yt-lite__play { background: #f00; }
.hl-yt-lite__btn:hover img { opacity: .92; }
.hl-chapters { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
.hl-chapters li { border-bottom: 1px solid var(--hl-line); }
.hl-chapters button { all: unset; cursor: pointer; display: flex; gap: 14px; width: 100%; padding: 12px 0; font-size: 14px; }
.hl-chapters button:hover { color: var(--hl-accent); }
.hl-chapters time { font-variant-numeric: tabular-nums; color: var(--hl-accent); min-width: 3.2em; }

/* よくある質問 */
.hl-faq details { border-bottom: 1px solid var(--hl-line); }
.hl-faq summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; position: relative; font-weight: 700; font-size: 15px; line-height: 1.7; }
.hl-faq summary::-webkit-details-marker { display: none; }
.hl-faq summary::before { content: "Q"; font-family: var(--hl-mincho); color: var(--hl-accent); margin-right: 12px; }
.hl-faq summary::after { content: "+"; position: absolute; right: 6px; top: 18px; font-size: 20px; font-weight: 300; }
.hl-faq details[open] summary::after { content: "−"; }
.hl-faq__a { padding: 0 0 22px 28px; font-size: 14px; line-height: 2; }

/* 執筆者 */
.hl-author { display: flex; gap: 20px; align-items: flex-start; padding: 28px; background: #fff; border: 1px solid var(--hl-line); }
.hl-author__icon { flex: 0 0 64px; height: 64px; border-radius: 50%; background: var(--hl-panel); display: grid; place-items: center; font-family: var(--hl-mincho); font-size: 22px; }
.hl-author__role { font-size: 11px; letter-spacing: .1em; color: var(--hl-sub); margin: 0 0 4px; }
.hl-author__name { font-family: var(--hl-mincho); font-size: 18px; margin: 0 0 8px; }
.hl-author__bio { font-size: 13px; line-height: 1.9; margin: 0; }

/* 関連記事カード */
.hl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hl-card { display: block; text-decoration: none; }
.hl-card__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--hl-panel); }
.hl-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.hl-card:hover .hl-card__img img { transform: scale(1.04); }
.hl-card__kind { font-size: 11px; letter-spacing: .14em; color: var(--hl-sub); margin: 12px 0 4px; }
.hl-card__ttl { font-family: var(--hl-mincho); font-size: 15px; line-height: 1.7; margin: 0; }

.hl-back { text-align: center; padding: 64px 0 0; }
.hl-back a { display: inline-block; padding: 14px 48px; border: 1px solid var(--hl-ink); font-size: 13px; letter-spacing: .14em; text-decoration: none; }

/* ================= コラム ================= */
.hl-col { padding: 130px 0 96px; }
.hl-col__wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; align-items: start; }
.hl-crumb { font-size: 11px; color: var(--hl-sub); margin: 0 0 20px; }
.hl-crumb a { text-decoration: none; }
.hl-col__cat { display: inline-block; font-size: 12px; padding: 3px 12px; background: var(--hl-ink); color: #fff; margin: 0 0 14px; }
.hl-col__title { font-family: var(--hl-gothic); font-weight: 700; font-size: 28px; line-height: 1.55; margin: 0 0 20px; }
.hl-byline { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--hl-sub); margin-bottom: 28px; flex-wrap: wrap; }
.hl-byline__icon { width: 32px; height: 32px; border-radius: 50%; background: var(--hl-panel); display: grid; place-items: center; font-family: var(--hl-mincho); color: var(--hl-ink); }
.hl-byline b { color: var(--hl-ink); font-weight: 700; }
.hl-col__hero { margin: 0 0 32px; }
.hl-summary { border: 2px solid var(--hl-ink); padding: 22px 26px; margin: 0 0 36px; background: #fff; }
.hl-summary__ttl { font-weight: 700; font-size: 15px; margin: 0 0 10px; }
.hl-summary ul { margin: 0; padding-left: 1.2em; font-size: 15px; line-height: 1.9; }
.hl-summary li + li { margin-top: 6px; }
.hl-toc { background: var(--hl-panel); padding: 20px 26px; margin: 0 0 40px; font-size: 14px; }
.hl-toc__ttl { font-weight: 700; margin: 0 0 8px; }
.hl-toc ol { margin: 0; padding-left: 1.4em; line-height: 2; }
.hl-toc a { text-decoration: none; }
.hl-col .hl-prose { font-size: 16px; line-height: 2; }
.hl-col .hl-prose h2 { font-family: var(--hl-gothic); font-weight: 700; font-size: 22px; line-height: 1.6; margin: 56px 0 20px; padding: 0 0 12px; border-bottom: 2px solid var(--hl-ink); }
.hl-col .hl-prose h3 { font-size: 18px; padding-left: 12px; border-left: 4px solid var(--hl-accent); }
.hl-col__video { margin: 40px 0; }
.hl-col__video figcaption { font-size: 12px; color: var(--hl-sub); margin-top: 8px; }
.hl-col .hl-faq, .hl-col .hl-author, .hl-col .hl-tags { margin-top: 56px; }
.hl-col .hl-sec__ttl { font-family: var(--hl-gothic); font-weight: 700; }
.hl-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-tags span { font-size: 12px; padding: 4px 12px; border: 1px solid var(--hl-line); border-radius: 999px; background: #fff; }

.hl-side { position: sticky; top: 40px; display: flex; flex-direction: column; gap: 32px; }
.hl-side__ttl { font-size: 13px; font-weight: 700; letter-spacing: .1em; padding-bottom: 10px; border-bottom: 2px solid var(--hl-ink); margin: 0 0 14px; }
.hl-side .hl-cards { grid-template-columns: 1fr; gap: 18px; }
.hl-side .hl-card { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.hl-side .hl-card__kind { margin-top: 0; }
.hl-side .hl-card__ttl { font-family: var(--hl-gothic); font-size: 13px; line-height: 1.6; }
.hl-cta { background: var(--hl-ink); color: #fff; padding: 24px; }
.hl-cta p { margin: 0 0 14px; font-size: 14px; line-height: 1.8; }
.hl-cta a { display: block; text-align: center; padding: 12px; background: #06c755; color: #fff; font-weight: 700; text-decoration: none; }

/* ================= タブレット・スマホ ================= */
@media screen and (max-width: 1060px) {
  .hl-col__wrap { grid-template-columns: 1fr; }
  .hl-side { position: static; }
}
@media screen and (max-width: 750px) {
  .hl-works { padding: 104px 20px 72px; }
  .hl-works__title { font-size: 19px; }
  .hl-works__name { font-size: 13px; }
  .hl-works__catch { font-size: 14px; }
  .hl-works__hero { margin: 0 -20px 36px; }
  .hl-works__hero figcaption { padding: 0 20px; }
  .hl-quote { padding: 22px; }
  .hl-works .hl-prose h2 { font-size: 16px; margin-top: 48px; }
  .hl-works .hl-prose .hl-photo, .hl-works .hl-prose .hl-pair { margin: 32px 0 36px; }
  .hl-works .hl-prose .hl-pair { gap: 8px; }
  .hl-works .hl-sec { padding-top: 56px; }
  .hl-works .hl-cards { grid-template-columns: 1fr; }
  .hl-sec { padding: 56px 20px 0; }
  .hl-chapters { grid-template-columns: 1fr; }
  .hl-cards { grid-template-columns: 1fr; gap: 24px; }
  .hl-col { padding: 96px 0 64px; }
  .hl-col__wrap { padding: 0 20px; gap: 40px; }
  .hl-col__title { font-size: 22px; }
  .hl-col .hl-prose { font-size: 15px; }
  .hl-col .hl-prose h2 { font-size: 19px; }
  .hl-prose table { display: block; overflow-x: auto; }
  .hl-author { padding: 20px; }
}
img.hl-byline__icon { object-fit: cover; background: none; }

/* ================= コラム：ほかのページと同じ550pxのパネルに収める版 =================
   本文 → 関連記事・相談会の案内（下に回す）の1カラム */
body.hl-col-page .l-main.hl-main { background: var(--hl-bg); color: var(--hl-ink); }
body.hl-col-page .hl-col { padding: 120px 40px 96px; }
body.hl-col-page .hl-col__wrap { display: block; max-width: none; padding: 0; }
body.hl-col-page .hl-col__title { font-size: 22px; line-height: 1.6; }
body.hl-col-page .hl-byline { font-size: 12px; gap: 10px; }
body.hl-col-page .hl-summary { padding: 18px 20px; }
body.hl-col-page .hl-summary ul { font-size: 14px; }
body.hl-col-page .hl-toc { padding: 16px 20px; font-size: 13px; }
body.hl-col-page .hl-col .hl-prose { font-size: 15px; }
body.hl-col-page .hl-col .hl-prose h2 { font-size: 19px; margin-top: 48px; }
body.hl-col-page .hl-col .hl-prose h3 { font-size: 16px; }
body.hl-col-page .hl-prose table { display: block; overflow-x: auto; font-size: 13px; }
body.hl-col-page .hl-prose th { white-space: normal; min-width: 5em; }
body.hl-col-page .hl-side { position: static; margin-top: 64px; gap: 40px; }
body.hl-col-page .hl-author { padding: 20px; }
@media screen and (max-width: 750px) {
  body.hl-col-page .hl-col { padding: 96px 20px 72px; }
  body.hl-col-page .hl-col__title { font-size: 20px; }
}

/* ================= 改行の位置（日本語） =================
   見出し・要約・カード題は文節の切れ目で折り返し、行の長さをそろえる。本文は行末の1文字だけが次行に残る形を避ける。
   html の lang="ja" が前提（Chrome / Edge の文節改行） */
.hl-main h1, .hl-main h2, .hl-main h3, .hl-summary li, .hl-faq summary, .hl-card__ttl, .hl-works__name, .hl-works__catch, .hl-toc a { word-break: auto-phrase; text-wrap: balance; }
.hl-main p, .hl-main li, .hl-main dd, .hl-main figcaption, .hl-faq__a, .hl-quote { line-break: strict; text-wrap: pretty; }
.hl-main td, .hl-main th { line-break: strict; word-break: auto-phrase; }

/* 執筆者欄：ラベル → 名前 → 肩書き → 紹介文。肩書きは言葉の切れ目で折り返す。コラムではゴシック体にそろえる */
.hl-author__label { font-size: 11px; letter-spacing: .12em; color: var(--hl-sub); margin: 0 0 4px; }
.hl-author__name { margin: 0 0 4px; }
.hl-author__role { font-size: 12px; line-height: 1.7; color: var(--hl-sub); margin: 0 0 10px; word-break: auto-phrase; }
.hl-col .hl-author__name, .hl-col .hl-author__role, .hl-col .hl-author__label { font-family: var(--hl-gothic); }
.hl-col .hl-author__name { font-weight: 700; font-size: 17px; }

/* よくある質問のまとめページ（/faq/） */
.hl-faqpage__lead { margin: 0 0 28px; font-size: 15px; line-height: 2; }
.hl-faqpage__lead p { margin: 0; }
.hl-faqpage__nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 48px; }
.hl-faqpage__nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--hl-line); background: #fff; font-size: 13px; color: var(--hl-ink); text-decoration: none; }
.hl-faqpage__nav a:hover { border-color: var(--hl-ink); }
.hl-faqpage__nav span { font-size: 11px; color: var(--hl-sub); }
.hl-faqpage__group { margin: 0 0 56px; scroll-margin-top: 90px; }
.hl-faqpage__group details { scroll-margin-top: 90px; }
.hl-faq__a p { margin: 0 0 10px; }
.hl-faqpage__more { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.hl-faqpage__more a { color: var(--hl-accent); text-decoration: underline; text-underline-offset: 3px; }
.hl-faqpage__more a::before { content: "→ "; text-decoration: none; }