/* ============================================================
   ICHI建設 テーマ メインスタイル
   ============================================================ */
:root {
	--graphite: #22262E;
	--coal: #15181D;
	--steel: #3A414C;
	--amber: #F5A623;
	--amber-2: #FFBE3D;
	--paper: #F4F2ED;
	--line: #333A45;
	--muted: #9AA3AF;
	--ink: #1A1D22;
	--header-h: 74px;
}

*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }

body {
	font-family: "Noto Sans JP", sans-serif;
	background: var(--paper);
	color: var(--ink);
	line-height: 1.85;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: "Zen Kaku Gothic New", sans-serif; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; }
.wrap.narrow { max-width: 820px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--amber); color: var(--coal); padding: 8px 16px; font-weight: 700; }
.skip-link:focus { left: 8px; }

/* ---------- ヘッダー ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--coal); border-bottom: 3px solid var(--amber); }
.admin-bar .site-header { top: 32px; }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.logo { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; font-size: 26px; color: #fff; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; }
.logo .mark { background: var(--amber); color: var(--coal); padding: 2px 10px; transform: skewX(-8deg); }
.logo-img { max-height: 48px; width: auto; }

.menu { display: flex; gap: 26px; align-items: center; color: #E6E9EE; font-weight: 500; font-size: 15px; }
.menu-list { display: flex; gap: 26px; }
.menu-list a:hover { color: var(--amber); }

.btn-emg { background: var(--amber); color: var(--coal); font-weight: 900; padding: 11px 20px; transform: skewX(-8deg); font-family: "Zen Kaku Gothic New", sans-serif; white-space: nowrap; }
.btn-emg span { display: inline-block; transform: skewX(8deg); }
.btn-emg:hover { background: var(--amber-2); }

.burger { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; }
.burger-bar,
.burger-bar::before,
.burger-bar::after { position: absolute; left: 10px; width: 24px; height: 2px; background: #fff; transition: transform .25s, opacity .25s; }
.burger-bar { top: 21px; }
.burger-bar::before { content: ""; left: 0; top: -8px; }
.burger-bar::after { content: ""; left: 0; top: 8px; }
.burger[aria-expanded="true"] .burger-bar { background: transparent; }
.burger[aria-expanded="true"] .burger-bar::before { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-bar::after { transform: translateY(-8px) rotate(-45deg); }

/* ---------- 共通ボタン ---------- */
.cta { display: inline-block; font-weight: 900; padding: 17px 30px; font-family: "Zen Kaku Gothic New", sans-serif; transform: skewX(-8deg); font-size: 16px; transition: background .2s, border-color .2s, color .2s; }
.cta span { display: inline-block; transform: skewX(8deg); }
.cta.p { background: var(--amber); color: var(--coal); }
.cta.p:hover { background: var(--amber-2); }
.cta.g { background: transparent; border: 2px solid #55606D; color: #fff; }
.cta.g:hover { border-color: var(--amber); color: var(--amber); }
.cta.g.dark { color: var(--ink); border-color: var(--ink); }

/* ---------- ヒーロー ---------- */
.hero { background: var(--graphite); color: #fff; position: relative; overflow: hidden; padding: 90px 0 104px; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: repeating-linear-gradient(45deg, var(--amber) 0 24px, var(--coal) 24px 48px); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.hero-inner { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: 10px; background: rgba(245, 166, 35, .12); border-left: 4px solid var(--amber); color: var(--amber-2); font-weight: 700; padding: 9px 16px; font-size: 14px; letter-spacing: .04em; margin-bottom: 24px; }
.hero h1 { font-size: clamp(30px, 7.6vw, 60px); font-weight: 900; line-height: 1.22; letter-spacing: .01em; }
.hero h1 .line { display: block; white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1180px) { .hero h1 { font-size: 4.6vw; } }
.hero h1 .hl { color: var(--amber); white-space: nowrap; }
.hero p { margin-top: 26px; color: #C3CAD3; font-size: 17px; max-width: 32em; line-height: 1.9; }
.hero-cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero-panel { background: var(--coal); border: 1px solid var(--line); padding: 30px 28px; }
.hero-panel .live { display: flex; align-items: center; gap: 9px; color: var(--amber-2); font-weight: 700; font-size: 13px; margin-bottom: 14px; }
.live .d { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); animation: ichi-blink 1.4s infinite; }
@keyframes ichi-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.hero-panel small { color: var(--muted); font-weight: 700; font-size: 12px; display: block; }
.hero-panel .num { display: block; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; font-size: 40px; color: #fff; letter-spacing: .02em; line-height: 1.1; margin: 4px 0 2px; }
.hero-panel .num:hover { color: var(--amber-2); }
.hero-panel .cap { color: var(--amber); font-weight: 700; font-size: 13px; }
.hero-panel .area { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: #C3CAD3; font-size: 13px; }

/* ---------- セクション共通 ---------- */
.section { padding: 96px 0; }
.eyebrow { color: var(--amber); font-weight: 900; font-size: 14px; letter-spacing: .1em; font-family: "Zen Kaku Gothic New", sans-serif; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 32px; height: 3px; background: var(--amber); }
.sec-title { font-size: clamp(28px, 4.4vw, 42px); font-weight: 900; line-height: 1.32; }
.lead { color: #555C66; margin-top: 16px; max-width: 42em; }
.sec-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.more-link { font-weight: 700; border-bottom: 2px solid var(--amber); padding-bottom: 2px; }
.more-link:hover { color: #B9790F; }
.empty { margin-top: 32px; color: #6B7280; }

/* ---------- 24時間帯 ---------- */
.band247 { background: var(--coal); color: #fff; position: relative; overflow: hidden; padding: 80px 0; }
.band247 .ghost { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; font-size: min(30vw, 340px); color: rgba(245, 166, 35, .06); white-space: nowrap; pointer-events: none; }
.band247 .wrap { position: relative; text-align: center; }
.band247 h2 { font-size: clamp(30px, 5vw, 52px); font-weight: 900; line-height: 1.3; }
.band247 h2 .hl { color: var(--amber); }
.band247 > .wrap > p { color: #C3CAD3; max-width: 40em; margin: 18px auto 0; font-size: 17px; }
.band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 44px; background: var(--line); }
.band-cell { background: var(--graphite); padding: 30px 22px; }
.band-cell .ic { color: var(--amber); width: 40px; height: 40px; margin: 0 auto 12px; display: block; }
.band-cell h3 { font-size: 19px; color: #fff; }
.band-cell p { color: var(--muted); font-size: 14px; margin-top: 8px; }

/* ---------- 事業内容 ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; margin-top: 44px; background: #D8D3C7; }
.svc { background: var(--paper); padding: 34px 30px; display: flex; gap: 22px; align-items: flex-start; transition: background .25s; }
.svc:hover { background: #fff; }
.svc .no { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; font-size: 34px; color: var(--amber); line-height: 1; min-width: 58px; }
.svc h3 { font-size: 21px; font-weight: 900; }
.svc p { color: #5A616B; margin-top: 8px; font-size: 15px; }

/* ---------- ブログ ---------- */
.blog { background: #EAE7DE; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.card { background: #fff; border: 1px solid #DDD8CD; transition: transform .25s, box-shadow .25s; display: block; }
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .4); }
.card .ph { aspect-ratio: 16 / 10; background: var(--graphite); position: relative; overflow: hidden; }
.card .ph svg,
.card .ph .ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .ph .cat { position: absolute; left: 0; top: 14px; z-index: 1; background: var(--amber); color: var(--coal); font-weight: 900; font-size: 12px; padding: 5px 14px; transform: skewX(-8deg); }
.card .ph .cat span { display: inline-block; transform: skewX(8deg); }
.card .body { padding: 22px; }
.card .date { color: #8A8577; font-size: 13px; font-weight: 700; }
.card h3 { font-size: 17px; margin-top: 8px; line-height: 1.6; font-weight: 700; }
.card:hover h3 { color: #B9790F; }

/* ---------- お知らせ ---------- */
.news-list { margin-top: 40px; border-top: 2px solid var(--ink); }
.nrow { display: grid; grid-template-columns: 150px 120px 1fr; gap: 20px; align-items: center; padding: 20px 8px; border-bottom: 1px solid #D5D0C4; transition: background .2s, padding .2s; }
.nrow:hover { background: #EDEAE1; padding-left: 16px; }
.nrow .date { font-weight: 700; color: #5A616B; font-size: 14px; }
.pill { justify-self: start; display: inline-block; background: var(--ink); color: #fff; font-weight: 700; font-size: 12px; padding: 4px 12px; line-height: 1.6; }
.pill.imp { background: var(--amber); color: var(--coal); }
.nrow h3 { font-size: 16px; font-weight: 500; font-family: "Noto Sans JP", sans-serif; }

/* ---------- お問い合わせ ---------- */
.contact { background: var(--graphite); color: #fff; }
.contact .lead { color: #C3CAD3; }
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 52px; margin-top: 44px; }
.ci-box { border: 1px solid var(--line); padding: 24px; margin-bottom: 16px; background: var(--coal); }
.ci-box small { color: var(--amber); font-weight: 700; font-size: 13px; display: block; }
.ci-box .big { display: block; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; font-size: 28px; margin-top: 4px; }
.ci-box .ci-text { font-weight: 700; margin-top: 6px; color: #E6E9EE; }
.form-box { background: var(--coal); border: 1px solid var(--line); padding: 36px; }
.form-box .field,
.form-box .wpcf7 p { margin-bottom: 20px; }
.form-box label { display: block; font-weight: 700; font-size: 14px; color: #E6E9EE; }
.form-box .req { color: var(--amber); margin-left: 6px; font-size: 12px; }
.form-box input[type="text"],
.form-box input[type="email"],
.form-box input[type="tel"],
.form-box select,
.form-box textarea { width: 100%; margin-top: 8px; background: var(--graphite); border: 1px solid var(--line); color: #fff; padding: 13px 14px; font-family: inherit; font-size: 16px; border-radius: 0; }
.form-box input:focus,
.form-box select:focus,
.form-box textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245, 166, 35, .18); }
.form-box input:disabled,
.form-box textarea:disabled { opacity: .6; cursor: not-allowed; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-box input[type="submit"],
.form-box button[type="submit"] { width: 100%; background: var(--amber); color: var(--coal); border: 0; padding: 18px; font-weight: 900; font-size: 17px; font-family: "Zen Kaku Gothic New", sans-serif; cursor: pointer; transition: background .2s; }
.form-box input[type="submit"]:hover,
.form-box button[type="submit"]:hover { background: var(--amber-2); }
.form-box .wpcf7-not-valid-tip { color: #FF8A80; font-size: 13px; margin-top: 4px; }
.form-box .wpcf7-response-output { border-color: var(--amber) !important; color: #fff; margin: 16px 0 0 !important; padding: 12px 14px !important; }
.form-box .wpcf7-spinner { display: block; margin: 10px auto 0; }
.admin-note { background: rgba(245, 166, 35, .15); border-left: 4px solid var(--amber); padding: 12px 14px; font-size: 13px; margin-bottom: 20px; color: #FFE1A8; }
.form-off { text-align: center; color: var(--amber-2); font-weight: 700; }

/* ---------- 下層ページ ---------- */
.page-hero { background: var(--graphite); color: #fff; padding: 64px 0 56px; border-bottom: 6px solid var(--amber); }
.page-hero h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 900; line-height: 1.4; }
.entry-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-size: 14px; color: #C3CAD3; font-weight: 700; }
.entry-meta .pill { background: #fff; color: var(--ink); }
.entry-meta .pill.imp { background: var(--amber); }
.entry-thumb { margin-bottom: 36px; }
.entry { font-size: 16.5px; line-height: 2; }
.entry > * + * { margin-top: 1.4em; }
.entry > :first-child { margin-top: 0; }
.entry h2 { font-size: 26px; padding: 6px 0 6px 16px; border-left: 6px solid var(--amber); margin-top: 2.2em; line-height: 1.5; }
.entry h3 { font-size: 21px; margin-top: 1.8em; border-bottom: 2px solid #D8D3C7; padding-bottom: 6px; }
.entry a { color: #B9790F; text-decoration: underline; }
.entry ul { list-style: disc; padding-left: 1.4em; }
.entry ol { padding-left: 1.4em; }
.entry blockquote { border-left: 4px solid #D8D3C7; padding: 4px 0 4px 18px; color: #555C66; }
.entry img { margin-left: auto; margin-right: auto; }
.entry-cta { margin-top: 56px; background: var(--coal); color: #fff; padding: 32px; text-align: center; }
.entry-cta p { margin-bottom: 18px; font-weight: 700; }
.back-link { display: inline-block; margin-top: 40px; font-weight: 700; border-bottom: 2px solid var(--amber); }

.pagination { margin-top: 48px; }
.pagination .nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pagination .page-numbers { min-width: 44px; padding: 10px 14px; text-align: center; background: #fff; border: 1px solid #D5D0C4; font-weight: 700; }
.pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination a.page-numbers:hover { border-color: var(--amber); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

/* ---------- フッター ---------- */
.site-footer { background: var(--coal); color: #9AA3AF; padding: 56px 0 28px; border-top: 3px solid var(--amber); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.foot-logo { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; font-size: 24px; color: #fff; }
.foot-desc { margin-top: 14px; font-size: 14px; max-width: 26em; }
.site-footer h4 { color: #fff; font-size: 14px; margin-bottom: 14px; }
.site-footer li { margin-bottom: 10px; font-size: 14px; }
.site-footer .menu-list { display: block; }
.site-footer a:hover { color: var(--amber); }
.copy { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 22px; font-size: 13px; color: #6B7280; }

/* ---------- スマホ用 追従電話ボタン ---------- */
.call-bar { display: none; }

/* ============================================================
   タブレット・スマホ
   ============================================================ */
@media (max-width: 900px) {
	.burger { display: block; }
	.menu {
		position: fixed; left: 0; right: 0; top: var(--header-h);
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--coal); border-bottom: 3px solid var(--amber);
		padding: 8px 28px 24px;
		transform: translateY(-8px); opacity: 0; visibility: hidden;
		transition: opacity .2s, transform .2s, visibility .2s;
	}
	.admin-bar .menu { top: calc(var(--header-h) + 46px); }
	.menu.is-open { transform: none; opacity: 1; visibility: visible; }
	.menu-list { flex-direction: column; gap: 0; }
	.menu-list a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
	.menu .btn-emg { margin-top: 20px; text-align: center; padding: 14px 20px; }

	.hero { padding: 48px 0 72px; }
	.hero-inner { grid-template-columns: 1fr; gap: 36px; }
	.band-grid,
	.svc-grid,
	.blog-grid,
	.contact-grid { grid-template-columns: 1fr; }
	.row2 { grid-template-columns: 1fr; }
	.nrow { grid-template-columns: 100px 1fr; gap: 8px 14px; }
	.nrow .pill { grid-row: 1; grid-column: 2; }
	.nrow h3 { grid-column: 1 / -1; }
	.foot-grid { grid-template-columns: 1fr; }
	.section { padding: 64px 0; }
	.form-box { padding: 24px; }

	body { padding-bottom: 72px; }
	.call-bar {
		display: grid; grid-template-columns: 1fr auto;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		background: var(--coal); border-top: 3px solid var(--amber);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.call-bar a { display: flex; flex-direction: column; justify-content: center; padding: 10px 16px; min-height: 64px; }
	.call-bar-tel { background: var(--amber); color: var(--coal); text-align: center; }
	.call-bar-tel small { font-size: 11px; font-weight: 700; }
	.call-bar-tel strong { font-family: "Zen Kaku Gothic New", sans-serif; font-size: 22px; font-weight: 900; line-height: 1.2; }
	.call-bar-mail { color: #fff; font-weight: 700; font-size: 13px; text-align: center; }
}

@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
	.admin-bar .menu { top: var(--header-h); }
	.wrap { padding: 0 20px; }
	.logo { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}