@charset "utf-8";
/* =========================================================================
   theme.css — ネイビー×ゴールド テーマ
   既存CSS（basic.css / 各ページ index.css）の後に読み込み、
   配色・書体・形状を上書きする。構造・文言は元サイトのまま。
   ========================================================================= */
:root {
	--navy: #1b2a4a;
	--navy-deep: #0f1b33;
	--navy-soft: #2e4270;
	--gold: #c9a24d;
	--gold-light: #e6cc85;
	--gold-deep: #a8843a;
	--sand: #f4efe4;
	--sand-deep: #e3dac4;
	--ink: #2b2b2b;
	--ink-soft: #5a5f6b;
	--paper: #fbf9f4;
	--font-sans: 'Noto Sans JP', 'ヒラギノ角ゴシック', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
	--font-serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
	--shadow-card: 0 10px 30px rgba(27, 42, 74, 0.08);
	--radius: 4px;
}

/* ------------------------------------------------------------ base ---- */
html, body {
	font-family: var(--font-sans);
	font-weight: 400;
	color: var(--ink);
	background: var(--paper);
	letter-spacing: 0.02em;
}
*::selection { background: var(--gold-light); color: var(--navy); }
a { color: inherit; }
strong { font-weight: 700; }

/* 見出しは明朝体で */
h1, h2, h3,
.cnt-ttl02,
.lcl-title,
.lcl-title02,
.loccal-top__ttl,
.lcl-toplink__title,
.lcl-box01-list__title,
.lcl-box02__title,
.lcl-question_title,
.lcl-voice__title,
.lcl-about__title,
.lcl-about-box__title,
.lcl-jishin-list__title,
.lcl-info__ttl,
.lcl-lead h2,
.lcl-point__title,
.lcl-step__title,
.footer-contact__title,
.contact__title {
	font-family: var(--font-serif);
	font-weight: 600;
	letter-spacing: 0.12em;
}
.cnt-ttl02 {
	color: var(--navy);
	position: relative;
	padding-bottom: 18px;
	line-height: 1.4;
}
.cnt-ttl02::after {
	content: '';
	display: block;
	width: 48px;
	height: 2px;
	margin: 14px auto 0;
	background: var(--gold);
}
.txt-line {
	background: var(--gold);
	color: var(--navy);
}

/* ------------------------------------------------------------ page title ---- */
.loccal-top {
	height: 140px;
	color: #fff;
	background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-soft) 100%);
	border-bottom: 3px solid var(--gold);
}
.loccal-top__ttl {
	color: #fff;
	font-size: 30px;
	position: relative;
}
.loccal-top--sub {
	color: var(--navy);
	background: var(--gold);
	font-family: var(--font-serif);
}
.lcl-title {
	background: var(--navy);
	color: #fff;
	border-bottom: 3px solid var(--gold);
}
.breadcrumb { background: transparent; }
.breadcrumb__item, .breadcrumb__item a { color: var(--ink-soft); }

/* ------------------------------------------------------------ header ---- */
.header__wrap {
	background: #fff;
	box-shadow: 0 1px 0 rgba(27, 42, 74, 0.08);
}
#header {
	border-bottom: 1px solid var(--gold);
	background: #fff;
}
.header-result {
	font-family: var(--font-serif);
	font-weight: 600;
	color: var(--navy);
}
.header-result__red { color: var(--gold-deep); font-size: 1.3em; }
.header-contact__request {
	background: var(--gold);
	color: var(--navy);
	border-radius: 0 0 var(--radius) var(--radius);
	font-weight: 700;
	letter-spacing: 0.08em;
}
@media screen and (min-width: 768px) {
	.header-contact__request:hover { background: var(--navy); color: #fff; }
}

/* ナビはネイビーの帯に */
.navi {
	background: var(--navy);
}
ul.navi-list {
	height: 44px;
	margin: 0;
}
.navi-list__item {
	height: 44px;
	padding: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.navi-list__item a {
	line-height: 44px;
	padding: 0 22px;
	color: #fff;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.1em;
	border-radius: 0;
	box-shadow: inset 0 0 0 transparent;
}
.navi-list__item--select a {
	background: transparent;
	color: var(--gold-light);
	box-shadow: inset 0 -3px 0 var(--gold);
}
@media screen and (min-width: 768px) {
	.navi-list__item a:hover {
		background: rgba(255, 255, 255, 0.06);
		color: var(--gold-light);
		box-shadow: inset 0 -3px 0 var(--gold);
	}
}
#main { margin-top: 126px; }  /* header 82px + nav 44px */

/* ------------------------------------------------------------ buttons ---- */
.lcl-toplink__btn,
.contact-btn,
.footer-contact__request,
.lcl-button-next,
.lcl-service__btn,
.lcl-estimate__btn {
	border-radius: var(--radius);
	box-shadow: 0 6px 16px rgba(27, 42, 74, 0.12);
	letter-spacing: 0.1em;
}
.lcl-toplink__btn {
	background: #fff;
	color: var(--navy);
	border: 1px solid var(--sand-deep);
	border-left: 4px solid var(--gold);
	font-weight: 500;
}
@media screen and (min-width: 768px) {
	.lcl-toplink__btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
}
.contact-btn {
	background-color: var(--gold);
	color: var(--navy);
}
.footer-contact__request {
	background-color: var(--gold);
	color: var(--navy);
	font-weight: 700;
}
.lcl-button-next { color: var(--ink-soft); }
.lcl-button-next--active {
	background-color: var(--gold) !important;
	color: var(--navy) !important;
}
.page-bnr { background: var(--navy-deep); border-top: 1px solid var(--gold); }
.pagetop { background: var(--navy-deep); }
.pagetop:hover { background: var(--gold) !important; }

/* ------------------------------------------------------------ cards ---- */
.block-shadow,
.lcl-nav__item,
.lcl-info,
.lcl-box02,
.lcl-box02__inner,
.lcl-about-box,
.lcl-boxorange,
.lcl-question-list__inner,
.lcl-voice-list__item,
.lcl-step {
	box-shadow: var(--shadow-card);
	border-radius: var(--radius);
}
.lcl-nav__item { border-radius: var(--radius); }
.contact { border-radius: var(--radius); }
.lcl-box02__title {
	background: var(--navy);
	color: #fff;
	border-radius: var(--radius) var(--radius) 0 0;
}
.lcl-box02__inner { border: 1px solid var(--sand-deep); }
.lcl-boxorange {
	background-color: #fff;
	border: 1px solid var(--gold);
	color: var(--navy);
}
.lcl-boxorange__txt-min { color: var(--ink-soft); }
.lcl-boxorange strong { background: #c0392b; color: #fff; }
/* ネイビー帯（.lcl-title）内の見出し・補足は白 */
.lcl-title .lcl-title__top,
.lcl-title .lcl-title__bottom { color: #fff; }
.lcl-point02__txt--min { color: #fff; }

/* 建物／家財カード：アイコンがネイビー線画なので白地にする */
.lcl-about-whatlist__item {
	background: #fff;
	border: 1px solid var(--sand-deep);
	border-top: 4px solid var(--navy);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}
.lcl-about-whatlist__title,
.lcl-about-whatlist__text { color: var(--navy); }

/* 選び方ページ：セクションの余白と、線画アイコンを載せるカードは白地に */
.lcl-point { padding-bottom: 48px; margin-top: 80px; }
.lcl-point__ttl { margin-bottom: 48px; }
.lcl-lead { padding-top: 48px; }
.lcl-point01__item,
.lcl-point09__item,
.lcl-flow__list > .lcl-flow__item {
	background-color: #fff;
	color: var(--navy);
	border: 1px solid var(--sand-deep);
	border-top: 4px solid var(--navy);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
}
.lcl-point01__num { background-color: var(--gold); color: var(--navy); font-weight: 700; }
.lcl-flow__step { background-color: var(--navy); color: #fff; border-radius: 0; }
.lcl-point01__txt--sub { color: var(--ink-soft); }
/* 白カード上の強調（元は緑地に黄色）は濃いゴールドで */
.lcl-flow__sbs-link,
.lcl-flow__sbs-txt--yl { color: var(--gold-deep); }
.lcl-flow__sbs-link { text-decoration: underline; }

/* ------------------------------------------------------------ footer ---- */
#footer { background: var(--navy-deep); margin-bottom: 0; }
.footer-nav { background: var(--navy); padding: 22px 0 8px; }
.footer-nav-list__item,
.footer-nav-list__item:first-child,
.footer-nav-list__item:nth-of-type(5) { border-color: rgba(255, 255, 255, 0.18); }
.footer-nav-list__item a { color: #fff; letter-spacing: 0.1em; }
.footer-contact {
	height: 280px;
	padding-top: 40px;
	position: relative;
}
.footer-contact::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15, 27, 51, 0.85), rgba(27, 42, 74, 0.55));
}
.footer-contact__inner {
	position: relative;
	height: 200px;
	background: rgba(255, 255, 255, 0.96);
	border-top: 3px solid var(--gold);
	box-shadow: var(--shadow-card);
}
.footer-contact__title { border-bottom-color: var(--sand-deep); }
.footer-contact__list { margin-top: 28px; }
.footer-copy {
	background: transparent;
	color: #cfd4df;
	padding: 32px 10px 90px;
}
.footer-copy__top-txt { color: #aeb6c7; }
.footer-copy small { color: var(--gold-light); letter-spacing: 0.2em; display: inline-block; margin-top: 16px; }

/* ------------------------------------------------------------ forms (estimate) ---- */
.lcl-input--text, .lcl-select select, textarea {
	border-radius: var(--radius) !important;
	border-color: var(--sand-deep) !important;
}
.lcl-input--text:focus, .lcl-select select:focus, textarea:focus {
	outline: none;
	border-color: var(--gold) !important;
	box-shadow: 0 0 0 3px rgba(201, 162, 77, 0.25);
}
/* 未選択は白地＋ネイビー枠、選択済みはネイビー塗り */
.lcl-radio label {
	border-radius: var(--radius) !important;
	background: #fff !important;
	color: var(--navy) !important;
	border: 1px solid var(--navy);
	box-sizing: border-box;
	font-weight: 500;
	transition: background 0.2s ease, color 0.2s ease;
}
@media screen and (min-width: 768px) {
	.lcl-radio label:hover { background: var(--sand) !important; }
}
/* スマホ：元CSSは最後のボタンの下線を消している（塗りボタン前提）ので、枠線ボタンでは戻す */
@media screen and (max-width: 767px) {
	.lcl-radio label:last-child { border-bottom: 1px solid var(--navy); }
}
.lcl-radio label.lcl-radio--current {
	background: var(--navy) !important;
	color: #fff !important;
	font-weight: 700;
}
/* 見積ページはナビ非表示なのでヘッダー高さ分だけ */
body.estimate #main { margin-top: 82px; }
.lcl-sidenav__item--current { background: var(--gold) !important; color: var(--navy) !important; }
.lcl-complete__text { text-align: center; line-height: 2; margin: 24px 0 40px; }

/* ------------------------------------------------------------ SP ---- */
@media screen and (max-width: 767px) {
	#main { margin-top: 47px; }
	.navi { background: transparent; }
	ul.navi-list {
		height: auto;
		background: var(--navy);
		border-bottom: 2px solid var(--gold);
		box-shadow: 0 12px 24px rgba(15, 27, 51, 0.25);
	}
	.navi-list__item {
		height: auto;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}
	.navi-list__item a {
		line-height: 48px;
		color: #fff;
		padding: 0;
		box-shadow: none;
	}
	.navi-list__item--select a { color: var(--gold-light); }
	.loccal-top { height: 90px; }
	.loccal-top__ttl { font-size: 20px; }
	.footer-contact { height: auto; padding: 24px 12px; }
	.footer-contact__inner { height: auto; padding-bottom: 20px; }
	.footer-copy { padding-bottom: 80px; }
}