@charset "UTF-8";
/*
 * renewal_pc.css — 2026 Web改修の新規ページ用（PC）
 * style.css は cmn/scss のビルド物なので触らず、このファイルを後から読み込む。
 * ルールは IKEHOUSE/改修_デザインルール.md（既存ページから抽出）に従う。
 *   紺 #0e3d5d / オレンジ #dd6807 / 緑 #6f9c37 / 本文 #363636 / サブ #868686 / 罫線 #ddd・#aeaeae
 *   見出し＝明朝・太字なし、英字＝Barlow、ボタン＝紺1px枠＋矢印
 */

/* ---------- ページタイトル（写真待ちのページは紺地） ---------- */
.rnPageTitle {
  background-color: #0e3d5d;
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
}
.rnPageTitle .container { width: 1150px; }
.rnPageTitle_title.commonPageTitle_title { line-height: 1.4; margin-bottom: 18px; }
.rnPageTitle_lead {
  text-align: center;
  color: #fff;
  font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif;
  font-size: 16px;
  letter-spacing: 2px;
}

/* ---------- セクション ---------- */
.rnSec { margin: 0 auto 80px; width: 1150px; font-size: 14px; }
.rnSec-narrow { width: 1000px; }
.rnSec_inner { width: 1000px; margin: 0 auto; }

.rnLead {
  text-align: center;
  font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif;
  font-size: 24px;
  font-weight: normal;
  color: #363636;
  margin-bottom: 40px;
  letter-spacing: 1px;
}

/* 英＋和の見出し（.worksListMain_title と同じ型） */
.rnTitle { text-align: center; line-height: 1.4; margin-bottom: 50px; }
.rnTitle_en {
  font-family: "Barlow", sans-serif;
  font-size: 17px;
  letter-spacing: 2px;
  margin-bottom: 10px;
  color: #363636;
}
.rnTitle_ja {
  font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif;
  font-size: 25px;
  font-weight: normal;
  color: #363636;
}

.rnSubTitle {
  font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif;
  font-size: 22px;
  font-weight: normal;
  color: #494848;
  text-align: center;
  margin: 50px 0 25px;
  line-height: 1.5;
}
.rnSubTitle-left { text-align: left; margin: 35px 0 12px; }
.rnSplit_text > .rnSubTitle-left:first-child,
.rnCols_item > .rnSubTitle-left:first-child,
.rnMedia_text > .rnSubTitle-left:first-child { margin-top: 0; }

.rnText { font-size: 14px; line-height: 28px; color: #363636; }
.rnText + .rnText { margin-top: 1em; }
.rnText-center { text-align: center; line-height: 32px; }
.rnText strong { color: #dd6807; font-weight: normal; }

.rnNote { font-size: 12px; line-height: 20px; color: #868686; margin-top: 10px; }

/* ---------- 導入の3つの理由 ---------- */
.wbPoint { display: flex; justify-content: space-between; margin-bottom: 50px; }
.wbPoint_item { width: 31.5%; }
.wbPoint_link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #aeaeae;
  padding: 25px 25px 20px;
  color: #363636;
  box-sizing: border-box;
  transition: opacity .3s;
}
.wbPoint_link:hover { text-decoration: none; opacity: .7; }
.wbPoint_en { font-family: "Barlow", sans-serif; font-size: 26px; color: #0e3d5d; line-height: 1; }
.wbPoint_title {
  font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif;
  font-size: 24px;
  margin: 10px 0 12px;
}
.wbPoint_text { flex: 1; font-size: 14px; line-height: 24px; margin-bottom: 18px; }
.wbPoint_more {
  position: relative;
  border-top: 1px solid #ddd;
  padding-top: 12px;
  font-size: 13px;
  color: #123456;
}
.wbPoint_more:after {
  content: "";
  position: absolute;
  right: 4px;
  top: 17px;
  width: 7px;
  height: 7px;
  border: solid #123456;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- 画像 ---------- */
.rnFigure { margin: 0; }
.rnFigure img { display: block; width: 100%; height: auto; }
.rnFigure-wide { width: 1000px; margin: 0 auto 80px; }
.rnFigure-wide img { height: 420px; object-fit: cover; object-position: center 60%; }
.rnFigure_caption { font-size: 12px; color: #868686; margin-top: 8px; line-height: 1.6; }

.rnPlaceholder {
  width: 1000px;
  height: 280px;
  margin: 0 auto 80px;
  background: #f1f1f0;
  color: #aeaeae;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- 表 ---------- */
.rnTable_wrap { width: 100%; }
.rnTable { width: 100%; border-collapse: collapse; font-size: 14px; }
.rnTable th, .rnTable td { border: 1px solid #ddd; padding: 14px 18px; line-height: 1.5; }
.rnTable thead th {
  background: #0e3d5d;
  color: #fff;
  font-weight: normal;
  text-align: center;
  border-color: #0e3d5d;
}
.rnTable tbody th { text-align: left; font-weight: normal; background: #f4f4f4; width: 25%; }
.rnTable tbody td { text-align: right; }
.rnTable tbody td.rnTable_em { color: #dd6807; }

/* ---------- 2カラム・横並び ---------- */
.rnSplit { display: flex; justify-content: space-between; align-items: flex-start; }
.rnSplit_text { width: 52%; }
.rnSplit_fig { width: 44%; margin: 0; }

.wbTruss { border: none; padding: 0; background: none; }
.wbTruss img { display: block; width: 100%; height: 300px; object-fit: cover; }

.rnBox { border: 1px solid #0e3d5d; padding: 25px 30px; margin-top: 50px; }
.rnBox_title {
  font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif;
  font-size: 22px;
  color: #0e3d5d;
  margin-bottom: 10px;
}

.rnCols { display: flex; justify-content: space-between; margin-top: 50px; }
.rnCols_item { width: 47%; }

.rnMedia { display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px; }
.rnMedia:last-child { margin-bottom: 0; }
.rnMedia_text { width: 52%; }
.rnMedia_fig { width: 42%; margin: 0; }
.rnMedia_fig img { display: block; width: 100%; height: auto; }

/* ---------- コラム ---------- */
.rnColumn { display: flex; justify-content: space-between; }
.rnColumn_item { width: 31.5%; }
.rnColumn_pic { padding-top: 56.25%; background-size: cover; background-position: center; margin-bottom: 12px; }
.rnColumn_pic-empty { background: #f1f1f0; }
.rnColumn_title { font-size: 15px; line-height: 1.6; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 8px; }
.rnColumn_soon { font-size: 12px; color: #868686; }

/* ---------- よくある質問 ---------- */
.rnFaq { border-top: 1px solid #ddd; }
.rnFaq_item { border-bottom: 1px solid #ddd; }
.rnFaq_q {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 22px 50px 22px 45px;
  font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif;
  font-size: 17px;
  line-height: 1.6;
  color: #363636;
}
.rnFaq_q::-webkit-details-marker { display: none; }
.rnFaq_q:before, .rnFaq_q:after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: #0e3d5d;
  transition: transform .3s;
}
.rnFaq_q:after { transform: rotate(90deg); }
.rnFaq_item[open] .rnFaq_q:after { transform: rotate(0deg); }
.rnFaq_q:hover { opacity: .7; }
.rnFaq_mark {
  position: absolute;
  left: 5px;
  top: 20px;
  font-family: "Barlow", sans-serif;
  font-size: 22px;
  line-height: 1.2;
  color: #0e3d5d;
}
.rnFaq_a { position: relative; padding: 0 50px 24px 45px; }
.rnFaq_a p { font-size: 14px; line-height: 28px; color: #484848; }
.rnFaq_mark-a { top: -2px; color: #dd6807; }

/* ---------- 相談の帯 ---------- */
.rnCta { background: #f1f1f0; padding: 60px 0; margin-bottom: -80px; }
.rnCta_inner { width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.rnCta_text { width: 62%; }
.rnCta_title {
  font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif;
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 20px;
  line-height: 1.5;
}
.rnCta_btn { width: 34%; text-align: center; }

/* ボタン（.staticSection_more a と同じ型） */
.rnBtn {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  min-width: 250px;
  padding: 12px 45px 12px 25px;
  border: 1px solid #123456;
  color: #123456;
  font-size: 14px;
  text-align: center;
  background: #fff;
  transition: all .8s;
}
.rnBtn:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  margin: auto;
  width: 8px;
  height: 8px;
  border: solid #123456;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
.rnBtn:hover { text-decoration: none; background: #123456; color: #fff; }
.rnBtn:hover:after { border-color: #fff; }

.spBr { display: none; }

/* =========================================================
 * 2026-09-18 追加：注文住宅・リフォーム・補助金
 * ========================================================= */

/* 見出し直下の段落の余白 */
.rnTitle + .rnSec_inner > .rnText-center:first-child { margin-top: -20px; margin-bottom: 40px; }

/* ボタン：白抜き（色帯の上）・補足文字 */
.rnBtn-white { background: transparent; border-color: #fff; color: #fff; }
.rnBtn-white:after { border-color: #fff; }
.rnBtn-white:hover { background: #fff; color: #0e3d5d; }
.rnBtn-white:hover:after { border-color: #0e3d5d; }
.rnBtn_sub { display: block; font-family: "Barlow", sans-serif; font-size: 16px; letter-spacing: 1px; margin-top: 2px; }
.rnMore { text-align: center; margin-top: 10px; }

/* 注文住宅の色帯（.newhouseItemSec を流用） */
.rnBand .newhouseItemSecData_02 { font-weight: normal; line-height: 1.3; }
.rnBand_btn { margin-top: 30px; }
/* 2026-09-24 天地が詰まっていたので、高さ固定520pxをやめて上下に余白を入れた */
.rnBand .newhouseItemSec_inner { height: auto; min-height: 520px; }
.rnBand .newhouseItemSec_right { display: flex; }
.rnBand .newhouseItemSec_pic { height: auto; min-height: 520px; flex: 1; }
.rnBand .newhouseItemSecData { padding-top: 60px; padding-bottom: 60px; }
.rnBand-reverse .newhouseItemSec_inner { flex-direction: row-reverse; }
.rnBand-reverse .newhouseItemSec_left:before { left: auto; right: calc((1150px - 100vw) / 2); }
.rnBand-reverse .newhouseItemSec_pic { margin-right: 0; margin-left: calc((1150px - 100vw) / 2); }
.rnBand-reverse .newhouseItemSecData { padding-right: 0; padding-left: 80px; }
.rnDetail { padding-top: 0; }
.rnBand-top { margin-bottom: 80px; }

/* 施工事例カード（.topSectionWorksMain_item を3列に） */
.rnWorks { display: flex; justify-content: center; gap: 0 48px; width: 1150px; margin: 0 auto 20px; }
.rnWorks .topSectionWorksMain_item { float: none; margin: 0 0 30px; color: #363636; }
.rnWorks .topSectionWorksMain_item:hover { text-decoration: none; opacity: .7; }
.rnWorks .topSectionWorksMain_comment { font-size: 14px; line-height: 1.6; }

/* 兄弟ページへのナビ */
.rnSibling { display: flex; justify-content: center; gap: 0 20px; width: 1000px; margin: 0 auto 20px; }
.rnSibling_item {
  flex: 1;
  display: block;
  border: 1px solid #aeaeae;
  padding: 18px 20px;
  text-align: center;
  color: #363636;
  font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif;
  font-size: 18px;
  transition: opacity .3s;
}
.rnSibling_item:hover { text-decoration: none; opacity: .7; }
.rnSibling_en { display: block; font-family: "Barlow", sans-serif; font-size: 12px; letter-spacing: 2px; color: #868686; margin-bottom: 4px; }

/* 2カラムの縦中央 */
.rnSplit-center { align-items: center; }
.rnSplit_fig img { display: block; width: 100%; height: auto; }

/* こんなお悩み */
.rnWorry { border-top: 1px solid #ddd; }
.rnWorry li { position: relative; border-bottom: 1px solid #ddd; padding: 14px 0 14px 22px; font-size: 15px; line-height: 1.6; }
.rnWorry li:before { content: ""; position: absolute; left: 4px; top: 22px; width: 7px; height: 7px; background: #dd6807; }

/* 社長メッセージ */
.rnMessage { display: flex; justify-content: space-between; align-items: center; }
.rnMessage_pic { width: 36%; margin: 0; }
.rnMessage_pic img { display: block; width: 100%; height: auto; }
.rnMessage_body { width: 58%; }
.rnMessage_catch {
  font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif;
  font-size: 22px;
  line-height: 1.7;
  color: #0e3d5d;
  margin-bottom: 15px;
}
.rnMessage_name { font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif; font-size: 15px; margin-top: 15px; text-align: right; }
.rnMessage_btn { margin-top: 30px; }

/* 対応できるリフォーム（.renovationSec02Main_item の枠線カードを2×2に） */
.rnService { display: flex; flex-wrap: wrap; justify-content: space-between; }
.rnService_item { width: 48.5%; border: 1px solid #aeaeae; margin-bottom: 25px; box-sizing: border-box; }
.rnService_pic { height: 260px; background-size: cover; background-position: center; }
.rnService_body { padding: 22px 25px 25px; }
.rnService_lead { font-size: 13px; color: #868686; margin-bottom: 4px; }
.rnService_title {
  font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif;
  font-size: 24px;
  font-weight: normal;
  color: #093b5b;
  margin-bottom: 10px;
}
.rnService_text { font-size: 14px; line-height: 24px; margin-bottom: 12px; }
.rnService_list { display: flex; flex-wrap: wrap; }
.rnService_list li { width: 50%; font-size: 13px; line-height: 24px; color: #484848; position: relative; padding-left: 14px; box-sizing: border-box; }
.rnService_list li:before { content: ""; position: absolute; left: 2px; top: 10px; width: 5px; height: 5px; background: #093b5b; }

/* 工務店だからできる（3つの強み） */
.rnFeature { display: flex; justify-content: space-between; }
.rnFeature_item { width: 31.5%; border: 1px solid #aeaeae; padding: 25px; box-sizing: border-box; }
.rnFeature_num { display: block; font-family: "Barlow", sans-serif; font-size: 28px; color: #dd6807; line-height: 1; margin-bottom: 12px; }
.rnFeature_title {
  font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif;
  font-size: 19px;
  font-weight: normal;
  line-height: 1.6;
  margin-bottom: 12px;
}
.rnFeature_text { font-size: 14px; line-height: 24px; }

/* 相談の流れ */
.rnFlow { display: flex; justify-content: space-between; counter-reset: none; }
.rnFlow_item { width: 18.5%; border-top: 2px solid #0e3d5d; padding-top: 15px; position: relative; }
.rnFlow_num { display: block; font-family: "Barlow", sans-serif; font-size: 28px; color: #0e3d5d; line-height: 1; margin-bottom: 10px; }
.rnFlow_title {
  font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif;
  font-size: 17px;
  font-weight: normal;
  line-height: 1.5;
  min-height: 51px;
  margin-bottom: 8px;
}
.rnFlow_text { font-size: 13px; line-height: 22px; color: #484848; }

/* 関連コラム＋案内ボックス */
.rnColumnWrap { display: flex; justify-content: space-between; align-items: stretch; }
.rnColumnWrap .rnColumn { width: 66%; }
.rnColumnWrap .rnColumn_item { width: 48%; }
.rnInfoBox { width: 31%; border: 1px solid #aeaeae; padding: 25px; box-sizing: border-box; display: flex; flex-direction: column; }
.rnInfoBox_title { font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif; font-size: 19px; color: #0e3d5d; margin-bottom: 10px; }
.rnInfoBox_btn { margin-top: auto; padding-top: 20px; }
.rnInfoBox .rnBtn { min-width: 0; width: 100%; }
.rnColumn_link { display: block; color: #363636; transition: opacity .3s; }
.rnColumn_link:hover { text-decoration: none; opacity: .7; }

/* 相談の帯：ボタン縦積み */
.rnCta_btn-stack { display: flex; flex-direction: column; gap: 12px 0; }
.rnCta_btn-stack .rnBtn { width: 100%; }

/* ---------- 補助金 ---------- */
.rnSubsidy_meta { text-align: right; font-size: 13px; color: #868686; margin-bottom: 10px; }
.rnTable-subsidy tbody th { width: 16%; }
.rnTable-subsidy tbody td { text-align: left; vertical-align: top; width: 42%; }
.rnTable-subsidy .rnSub_amount { display: block; font-size: 16px; color: #363636; }
.rnTable-subsidy .rnSub_none { color: #aeaeae; }
.rnTable-subsidy .rnSub_prog { display: block; font-size: 12px; line-height: 1.6; color: #868686; margin-top: 4px; }
.rnTable-subsidy .rnSub_prog a { color: #123456; text-decoration: underline; }
.rnTable-subsidy .rnSub_prog a:hover { text-decoration: none; }
.rnSub_badge { display: inline-block; font-size: 11px; line-height: 1; padding: 4px 6px; margin-left: 6px; vertical-align: 2px; border: 1px solid #dd6807; color: #dd6807; }
.rnTable-subsidy tbody tr.rnSub_group th { background: #eef2f5; }
.rnNoteBox { background: #f1f1f0; padding: 30px 35px; margin-top: 50px; }
.rnNoteBox .rnCta_title { margin-bottom: 12px; }
.rnNoteBox_inner { display: flex; justify-content: space-between; align-items: center; }
.rnNoteBox_text { width: 68%; }
.rnNoteBox_notes { margin-top: 20px; border-top: 1px solid #ddd; padding-top: 12px; }
.rnNoteBox_notes .rnNote { margin-top: 2px; }

.rnServiceLinks { display: flex; justify-content: space-between; }
.rnServiceLinks_item { width: 31.5%; border: 1px solid #aeaeae; padding: 25px; box-sizing: border-box; }
.rnServiceLinks_title { font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif; font-size: 22px; font-weight: normal; margin-bottom: 8px; }
.rnServiceLinks_item .rnText { margin-bottom: 18px; }
.rnServiceLinks_item .rnBtn { min-width: 0; width: 100%; }

.rnSub_badge-stg { border-color: #b3261e; color: #b3261e; border-style: dashed; margin-left: 0; margin-top: 4px; }

/* 2026-09-24 帯の本文が詰まって見えるので字間・行間を広げた */
.rnBand .newhouseItemSecData_03 { letter-spacing: .06em; line-height: 32px; }
.rnBand .newhouseItemSecData_01 { letter-spacing: .12em; }
.rnBand .newhouseItemSecData_02 { letter-spacing: .08em; }

/* 2026-09-24 兄弟ページへのナビを紺地・白文字に */
.rnSibling_item { background: #0e3d5d; border-color: #0e3d5d; color: #fff; }
.rnSibling_item:hover { background: #123456; opacity: 1; }
.rnSibling_en { color: rgba(255, 255, 255, .7); }
.rnSibling_item { line-height: 1.6; padding: 22px 20px; }
.rnSibling_en { margin-bottom: 10px; line-height: 1.4; }

/* 2026-09-24 サイト全体の字間を統一して広げる（既存ページも含む） */
body {
  letter-spacing: .06em;
}
.rnTitle_ja, .rnLead, .rnSubTitle, .rnCta_title, .rnBox_title,
.rnService_title, .rnFeature_title, .rnFlow_title, .rnMessage_catch,
.rnServiceLinks_title, .rnFaq_q { letter-spacing: .08em; }

/* 2026-09-24 「対応できるリフォーム」の箇条書きをタグ表示に */
.rnService_list { display: flex; flex-wrap: wrap; gap: 8px 6px; }
.rnService_list li {
  width: auto;
  padding: 5px 10px;
  border: 1px solid #093b5b;
  background: #fff;
  color: #093b5b;
  font-size: 13px;
  line-height: 1.4;
}
.rnService_list li:before { display: none; }

/* 2026-09-24 サービスカードのリード文とタイトルの字間を広げる */
.rnService_lead { letter-spacing: .12em; }
.rnService_title { letter-spacing: .14em; }
.rnService_text { line-height: 30px; }
.rnService_title { line-height: 1.5; }
.rnService_lead { line-height: 1.8; }

/* 2026-09-24 「こんなお悩み」：写真の高さを左のテキストに合わせる */
.rnSplit-center { align-items: stretch; }
.rnSplit-center .rnSplit_fig { display: flex; }
.rnSplit-center .rnSplit_fig img { height: 100%; object-fit: cover; object-position: center; }

/* 2026-09-24 社長メッセージ：写真の高さを右のテキストに合わせる */
.rnMessage { align-items: stretch; }
.rnMessage_pic { display: flex; }
.rnMessage_pic img { height: 100%; object-fit: cover; object-position: center top; }

/* 2026-09-24 社長メッセージをグレーの帯に（TOPのイベント欄と同じ #f1f1f0） */
.rnGray { background: #f1f1f0; padding: 70px 0 60px; margin-bottom: 80px; }
.rnGray .rnSec { margin-bottom: 0; }

/* 2026-09-24 関連コラムと案内ボックスの高さをそろえる／見出しの折り返しを調整 */
.rnColumnWrap .rnColumn { align-items: stretch; }
.rnColumnWrap .rnColumn_item { display: flex; flex-direction: column; }
.rnColumnWrap .rnColumn_pic { flex: 1 1 auto; padding-top: 0; min-height: 170px; }
.rnInfoBox_title { font-size: 18px; line-height: 1.7; letter-spacing: .06em; }

/* 2026-09-24 「工務店だからできる」をオレンジの帯に */
.rnOrange { background: #dd6807; padding: 70px 0 60px; margin-bottom: 80px; color: #fff; }
.rnOrange .rnSec { margin-bottom: 0; }
.rnOrange .rnTitle_en, .rnOrange .rnTitle_ja, .rnOrange .rnText { color: #fff; }
.rnOrange .rnFeature_item { border-color: rgba(255, 255, 255, .6); }
.rnOrange .rnFeature_num { color: #fff; }
.rnOrange .rnFeature_title, .rnOrange .rnFeature_text { color: #fff; }
.rnFeature_title { font-size: 18px; line-height: 1.8; }

/* 2026-09-24 「ご相談の流れ」を紺の帯に */
.rnNavy { background: #0e3d5d; padding: 70px 0 60px; margin-bottom: 80px; color: #fff; }
.rnNavy .rnSec { margin-bottom: 0; }
.rnNavy .rnTitle_en, .rnNavy .rnTitle_ja, .rnNavy .rnText { color: #fff; }
.rnNavy .rnFlow_item { border-top-color: #fff; }
.rnNavy .rnFlow_num, .rnNavy .rnFlow_title, .rnNavy .rnFlow_text { color: #fff; }

/* 2026-09-24 FLOWに写真を追加（番号ラベル→写真→見出し→本文） */
.rnFlow_item { border-top: none; padding-top: 0; }
.rnFlow_num { font-size: 15px; letter-spacing: .14em; margin-bottom: 10px; }
.rnFlow_pic { margin-bottom: 14px; }
.rnFlow_pic img { display: block; width: 100%; height: 120px; object-fit: cover; }
.rnFlow_title { border-top: 1px solid rgba(255, 255, 255, .4); padding-top: 12px; }
.rnNavy .rnFlow_title { border-top-color: rgba(255, 255, 255, .4); }

/* 2026-09-24 FLOWを横スクロールに（参考: 裕美工業）／写真を1.5倍に */
.rnFlow {
  display: flex;
  justify-content: flex-start;
  gap: 0 26px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding-bottom: 18px;
}
.rnFlow_item { flex: 0 0 300px; width: 300px; scroll-snap-align: start; }
.rnFlow_pic img { height: 180px; }
.rnFlow_title { min-height: 0; }
.rnFlow_hint {
  text-align: right;
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 8px;
}
.rnFlow_hint:after { content: " →"; }
.rnFlow::-webkit-scrollbar { height: 6px; }
.rnFlow::-webkit-scrollbar-track { background: rgba(255, 255, 255, .15); }
.rnFlow::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .6); }
.rnWorry strong { color: #d06e2b; font-weight: bold; font-size: inherit; }

/* 2026-09-24 補助金一覧へのボタンをオレンジに */
.rnInfoBox .rnBtn { background: #dd6807; border-color: #dd6807; color: #fff; }
.rnInfoBox .rnBtn:after { border-color: #fff; }
.rnInfoBox .rnBtn:hover { background: #c25c06; border-color: #c25c06; color: #fff; }
.rnInfoBox .rnBtn:hover:after { border-color: #fff; }

/* 2026-09-24 FLOWのスクロールバーを細く */
.rnFlow { padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.6) rgba(255,255,255,.15); }
.rnFlow::-webkit-scrollbar { height: 3px; }

/* 2026-09-24 案内ボックス：ボタン下の余白を左右と同じ25pxに（pの下マージンと行送り分を解消） */
.rnInfoBox_btn { display: block; margin: auto 0 0; padding-top: 20px; line-height: normal; }
.rnInfoBox_btn .rnBtn { display: block; }
.rnMessage_pic img { object-position: center top; }

/* 2026-09-25 ページ内リンクをなめらかにスクロール */
html { scroll-behavior: smooth; }
.rnSec[id], [id^="performance"] { scroll-margin-top: 30px; }

/* 2026-09-25 3つの理由に英字の飾りを追加 */
.wbPoint_en { display: flex; align-items: baseline; }
.wbPoint_label {
  font-family: "Barlow", sans-serif;
  font-size: 13px;
  letter-spacing: .22em;
  color: #aeaeae;
  margin-left: 12px;
}

/* 2026-09-25 店舗ページの3つの理由を写真つきレイアウトに（煉瓦ページと同じ型） */
.wbReason { margin-bottom: 10px; }
.wbReason .newhouseItemSecList02_item { margin-bottom: 50px; }
.wbReason .newhouseItemSecList02_pic img { display: block; width: 100%; height: 200px; object-fit: cover; }
.wbReason .newhouseItemSecList02_head dt { color: #0e3d5d; }
.wbReason .newhouseItemSecList02_head dd { display: flex; align-items: baseline; }
.wbReason_en { font-family: "Barlow", sans-serif; font-size: 13px; letter-spacing: .22em; color: #aeaeae; margin-left: 14px; }
.wbReason_more { margin-top: 18px; }
.wbReason_more a {
  display: inline-block; position: relative; box-sizing: border-box;
  min-width: 230px; padding: 11px 40px 11px 20px;
  border: 1px solid #123456; color: #123456; background: #fff;
  font-size: 14px; text-align: center; transition: all .8s;
}
.wbReason_more a:after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 16px; margin: auto;
  width: 8px; height: 8px; border: solid #123456; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.wbReason_more a:hover { text-decoration: none; background: #123456; color: #fff; }
.wbReason_more a:hover:after { border-color: #fff; }

/* 2026-09-25 トップ：3つのサービスを横並びバナーに（カーソルで写真がゆっくりズーム） */
.topBanner { padding: 140px 0 80px; }
.topBanner_inner { width: 1150px; margin: 0 auto; display: flex; justify-content: space-between; }
.topBanner_item { display: block; width: 31.5%; color: #363636; }
.topBanner_item:hover { text-decoration: none; }
.topBanner_picWrap { position: relative; height: 240px; overflow: hidden; }
.topBanner_pic {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-size: cover; background-position: center center;
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.topBanner_item:hover .topBanner_pic { transform: scale(1.08); }
.topBanner_picWrap:after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 100%);
}
.topBanner_en {
  position: absolute; left: 18px; bottom: 14px; z-index: 2;
  font-family: "Barlow", sans-serif; font-size: 15px; letter-spacing: .22em; color: #fff;
}
.topBanner_body { padding: 18px 2px 0; }
.topBanner_title {
  font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif;
  font-size: 24px; font-weight: normal; letter-spacing: .12em; margin-bottom: 10px;
}
.topBanner_text { font-size: 14px; line-height: 28px; color: #484848; margin-bottom: 18px; }
/* サイト共通の more ボタン（.topSectionWorks_more と同じ形） */
.topBanner_more {
  display: inline-block; position: relative;
  width: 150px; padding: 7px 0 8px; box-sizing: border-box;
  border: 1px solid #123456; color: #123456; text-align: center;
  font-family: "Barlow", sans-serif; font-size: 14px; letter-spacing: .1em;
  transition: all .8s;
}
.topBanner_more:after {
  content: ""; position: absolute; top: 14px; right: 15px; width: 8px; height: 8px;
  border: solid #123456; border-width: 2px 2px 0 0; transform: rotate(45deg);
}
.topBanner_item:hover .topBanner_more { background: #123456; color: #fff; }
.topBanner_item:hover .topBanner_more:after { border-color: #fff; }
/* 2026-09-25 番号と見出しのベースラインをそろえる */
.wbReason .newhouseItemSecList02_head { align-items: baseline; }
.wbReason .newhouseItemSecList02_head dt { line-height: 1; }
.wbReason .newhouseItemSecList02_head dd { line-height: 1; align-items: baseline; }

/* 2026-09-25 坪単価の数字を大きく */
.rnTable_num { font-family: "Barlow", sans-serif; font-size: 28px; letter-spacing: .02em; line-height: 1; margin: 0 2px; }
.rnTable tbody td { white-space: nowrap; }
/* 2026-09-25 TECHNOLOGY：導入文を見出し直下に置いたぶんの余白 */
#technology .rnText-center { margin-bottom: 45px; }

/* 2026-09-25 パララックス帯（スクロールしても背景が固定される） */
.rnParallax {
  height: 460px;
  margin: 0 0 80px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 2026-09-25 TRUST：丸い写真＋右にテキスト（初めての方ページと同じ型） */
.wbTrust_item { display: flex; align-items: flex-start; border-top: 1px solid #bbb; padding-top: 45px; margin-bottom: 45px; }
.wbTrust_item:last-child { margin-bottom: 0; }
.wbTrust_pic { flex: 0 0 252px; width: 252px; }
.wbTrust_pic img { display: block; width: 252px; height: 252px; border-radius: 50%; object-fit: cover; }
.wbTrust_data { margin-left: 48px; flex: 1; }
.wbTrust_title {
  font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif;
  font-size: 24px; font-weight: normal; letter-spacing: .08em;
  margin-bottom: 14px; line-height: 1.5;
}
.wbTrust_text { font-size: 14px; line-height: 32px; letter-spacing: .04em; color: #363636; }

/* 2026-09-25 店舗・施設木造建築のヒーロー写真（保育園のホール）。白文字を読ませるため紺の膜を重ねる */
.rnPageTitle-wood {
  background-image: url("../img/wood-building/pic_title.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* 2026-09-25 補助金ページのSERVICEカード：文章量が違ってもボタンの高さ・位置をそろえる */
.rnServiceLinks_item { display: flex; flex-direction: column; }
.rnServiceLinks_item .rnBtn { margin-top: auto; }

/* 2026-09-25 会社概要ページ：マップの下に移設したスタッフ紹介の上余白 */
.cpStaff { margin-top: 90px; }

/* 2026-09-25 スタッフ一覧：float だと背の高いカードに引っかかって大きな隙間ができるので flex に変更 */
.staffSection04_inner { display: flex; flex-wrap: wrap; align-items: flex-start; overflow: visible; }
.staffSection04Item { float: none; }
.staffSection04Hl { width: calc(100% - 40px); box-sizing: border-box; }

/* =========================================================
 * 2026-09-25 トップページ：コンテンツごとにふわっと表示
 * front-page.php の SELECTORS と同じ並び。JSが動くときだけ .js-reveal が付く
 * ========================================================= */
.js-reveal .topBanner_item,
.js-reveal .topSectionWorks_title,
.js-reveal .topSectionWorksMain,
.js-reveal .topSectionWorks_more,
.js-reveal .topSectionEvent_title,
.js-reveal .topSectionEventMain_item,
.js-reveal .topSectionEvent_more,
.js-reveal .topSectionTopics_title,
.js-reveal .topSectionTopicsImg_item,
.js-reveal .topSectionTopicsMain,
.js-reveal .topSectionTopics_more,
.js-reveal .topSectionSns_inner > div,
.js-reveal .topSnsPic,
.js-reveal .topMapBox > .container,
.js-reveal .subPageContainer > div,
.js-reveal .subPageContainer > section,
.js-reveal .subPageContainer > nav {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
/* 対象に .topSectionSns_inner > div のような詳細度の高いセレクタが混じるため、
   表示状態のほうを確実に勝たせる（クラスを重ねて詳細度を上げている） */
.js-reveal .is-in.is-in.is-in { opacity: 1; transform: none; will-change: auto; }

/* 横並びのものは少しずつ遅らせる */
.js-reveal .topBanner_item:nth-child(2),
.js-reveal .topSectionEventMain_item:nth-child(2),
.js-reveal .topSectionTopicsImg_item:nth-child(2) { transition-delay: .14s; }
.js-reveal .topBanner_item:nth-child(3),
.js-reveal .topSectionEventMain_item:nth-child(3),
.js-reveal .topSectionTopicsImg_item:nth-child(3) { transition-delay: .28s; }
.js-reveal .topSectionEventMain_item:nth-child(4),
.js-reveal .topSectionTopicsImg_item:nth-child(4) { transition-delay: .42s; }
.js-reveal .topSectionSns_inner > div:nth-child(2) { transition-delay: .14s; }

/* 動きを減らす設定の人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .topBanner_item,
  .js-reveal .topSectionWorks_title,
  .js-reveal .topSectionWorksMain,
  .js-reveal .topSectionWorks_more,
  .js-reveal .topSectionEvent_title,
  .js-reveal .topSectionEventMain_item,
  .js-reveal .topSectionEvent_more,
  .js-reveal .topSectionTopics_title,
  .js-reveal .topSectionTopicsImg_item,
  .js-reveal .topSectionTopicsMain,
  .js-reveal .topSectionTopics_more,
  .js-reveal .topSectionSns_inner > div,
  .js-reveal .topSnsPic,
  .js-reveal .topMapBox > .container,
.js-reveal .subPageContainer > div,
.js-reveal .subPageContainer > section,
.js-reveal .subPageContainer > nav {
    opacity: 1; transform: none; transition: none;
  }
}

/* 2026-09-25 補助金ページのSERVICEカード：ボタンをネイビー帯＋白文字に */
.rnServiceLinks_item .rnBtn { background: #123456; border-color: #123456; color: #fff; }
.rnServiceLinks_item .rnBtn:after { border-color: #fff; }
.rnServiceLinks_item .rnBtn:hover { background: #fff; color: #123456; }
.rnServiceLinks_item .rnBtn:hover:after { border-color: #123456; }

/* 2026-09-25 補助金ページのヒーロー写真（住宅街）。見出し2行＋リード文があるので膜は少し濃いめ */
.rnPageTitle-subsidy {
  background-image: url("../img/subsidy/pic_title.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* =========================================================
 * 2026-09-25 ヒーローの可読性：全ページ共通で紺の膜を重ねる
 * 白い明朝文字を写真に直接のせていたため、明るい写真のページで
 * コントラストが1.0〜1.6しかなかった（WCAG AAは24px以上で3.0）。
 * style.css は触らず ::before で重ねる。写真の指定はそのまま。
 * ========================================================= */
.commonPageTitle { position: relative; }
.commonPageTitle:before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(9, 43, 66, 0.5);
  pointer-events: none;
}
.commonPageTitle > .container { position: relative; z-index: 1; }
.commonPageTitle_title { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }

/* リード文つきのヒーロー（店舗・補助金）は16pxの本文サイズなので、膜をもう少し濃く */
.rnPageTitle:before { background: rgba(9, 43, 66, 0.62); }
.rnPageTitle_lead { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); }

/* パララックス帯は transform をかけると background-attachment:fixed が効かなくなるため、ふわっと表示の対象外にする */
.js-reveal .subPageContainer > .rnParallax {
  opacity: 1; transform: none; transition: none; will-change: auto;
}

/* 2026-09-26 店舗ページ COST：表の前に費用差のひとこと */
.wbCostLead { text-align: center; font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif; font-size: 22px; letter-spacing: .08em; color: #093b5b; margin: -10px 0 30px; }
.wbCostLead strong { font-weight: normal; color: #dd6807; font-size: 30px; padding: 0 .1em; }

/* 2026-09-26 注文住宅の性能：等級・基準のバッジ（UA値・C値の画像の上） */
.nhSpec { margin: 10px auto 40px; text-align: center; }
.nhSpec_badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.nhSpec_badges li { border: 1px solid #093b5b; background: #fff; color: #093b5b; padding: 14px 28px; font-family: "Hannari", "Hiragino Mincho Pro", "HGP明朝B", serif; font-size: 18px; letter-spacing: .1em; }
.nhSpec_notes { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; color: #363636; }
.nhSpec_notes b { color: #093b5b; font-weight: bold; }

/* 2026-09-26 トップのバナーを4つ（2×2）に */
.topBanner_inner { flex-wrap: wrap; row-gap: 60px; }
.topBanner_item { width: 48.5%; }
.topBanner_picWrap { height: 300px; }
.js-reveal .topBanner_item:nth-child(3) { transition-delay: 0s; }
.js-reveal .topBanner_item:nth-child(4) { transition-delay: .14s; }

/* 2026-09-26 コラム非表示の間：リフォームの補助金案内だけを中央に */
.rnColumnWrap-solo { justify-content: center; }
.rnColumnWrap-solo .rnInfoBox { width: 640px; text-align: center; }
.rnColumnWrap-solo .rnInfoBox_btn .rnBtn { display: inline-block; width: 280px; }

/* 2026-09-26 PCメニュー：画面が低いと一番下のLINEバナーまで届かなかった（高さ100vh固定・スクロール不可）。
   パネルの中だけスクロールできるようにする。padding-top 30px ぶんを引いて画面内に収める */
.header_inner {
  height: calc(100vh - 30px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.35) transparent;
}
.rnColumnWrap-solo .pcBr { display: none; }

/* =========================================================
 * 2026-09-26 リフォーム施工事例：ビフォー→アフターを横一列で左へゆっくり流す
 * トラックに同じ並びを2周入れて -50% 動かすと継ぎ目なくループする
 * ========================================================= */
.rnMarquee { position: relative; overflow: hidden; }
.rnMarquee:before, .rnMarquee:after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; }
.rnMarquee:before { left: 0; background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.rnMarquee:after { right: 0; background: linear-gradient(to left, #fff, rgba(255,255,255,0)); }
.rnMarquee_track { display: flex; width: max-content; animation: rnMarquee 70s linear infinite; }
.rnMarquee:hover .rnMarquee_track { animation-play-state: paused; }
@keyframes rnMarquee { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@media (prefers-reduced-motion: reduce) {
  .rnMarquee { overflow-x: auto; }
  .rnMarquee_track { animation: none; }
}

/* 2026-09-26 施工事例の帯：アセット画像（BEFORE/AFTER入り）を高さそろえで並べる */
.rnBA { display: flex; gap: 8px; margin-right: 40px; flex: 0 0 auto; }
.rnBA_img { display: block; height: 300px; width: auto; }

/* 2026-09-26 トップのキャッチ：新素材（縦横比 2.96）に合わせて枠の高さを変更。幅660px・上下中央は従来どおり */
.topSection_text { height: 223px; }
.topSection_text img { display: block; width: 660px; height: auto; }

/* 2026-09-26 リフォーム施工事例の帯：横幅いっぱい・左右の余白とぼかしなし */
.rnSec.rnReno { width: auto; }
.rnMarquee:before, .rnMarquee:after { display: none; }
/* 2026-09-26 帯の写真の間隔はすべて20px（組の中も組の間も） */
.rnBA { gap: 20px; margin-right: 20px; }
