@charset "utf-8";

/*===========================================================================
  TOPページ リニューアル（ヘッダー / メインビジュアル / サービス案内）
  ※ index.html のみで読み込み。style.css の後に読み込んで上書きします。
===========================================================================*/

:root {
	/*既存サイトの色（style.css の --primary-color / 背景色など）に合わせています*/
	--top-navy: var(--primary-color, #174f41);		/*メインの深緑（文字・ボタン）*/
	--top-overlay: #0a2540;			/*写真に重ねる色（紺）*/
	--top-navy-deep: #061a2e;
	--top-blue: var(--primary-color, #174f41);		/*アクセント（明るい背景用）*/
	--top-accent-on-dark: #bfddf4;	/*アクセント（写真・濃い背景用）＝既存の背景色の水色*/
	--top-blue-light: #bfddf4;
	--top-bg: #bfddf4;				/*既存の背景色*/
	--top-ink: var(--primary-color, #174f41);
	--top-muted: #5b6b7a;
	--top-line: rgba(23,79,65,.15);
	--top-sans: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--top-en: "Barlow Condensed", "Noto Sans JP", sans-serif;
	--top-gutter: clamp(20px, 5vw, 72px);
}


/*ヘッダー（メインビジュアルの上に重ねる）
---------------------------------------------------------------------------*/
header.top-header {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 20;
	height: auto;
	padding: clamp(16px, 2.2vw, 32px) var(--top-gutter);
	margin: 0;
	pointer-events: none;
}
.top-header #logo.top-logo {
	position: static;
	width: auto;
	margin: 0;
	pointer-events: auto;
}
.top-logo a {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: #fff;
}
.top-logo img {
	display: block;
	width: clamp(52px, 4.6vw, 72px);
	height: auto;
	border-radius: 4px;
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.top-logo-name {
	font-family: var(--top-sans);
	font-weight: 700;
	font-size: clamp(.85rem, 1.05vw, 1rem);
	letter-spacing: .12em;
	line-height: 1.4;
	text-shadow: 0 1px 8px rgba(0,0,0,.35);
}


/*パターンD・E専用の部品（ほかのパターンでは非表示）*/
.top-nav,
.top-hero-arrows,
.top-hero-emblem {display: none;}


/*メインビジュアル
---------------------------------------------------------------------------*/
.top-hero {
	position: relative;
	flex-shrink: 0;		/*#container(flex)の中で縮まないように*/
	height: 100vh;
	height: 100svh;
	min-height: 600px;
	max-height: 980px;
	padding: 0;
	overflow: hidden;
	background: var(--top-navy-deep);
	color: #fff;
	font-family: var(--top-sans);
	isolation: isolate;
}

/*写真*/
.top-hero-slides,
.top-hero-slide {
	position: absolute;
	inset: 0;
}
.top-hero-slide {
	opacity: 0;
	transition: opacity 1.4s ease;
}
.top-hero-slide.is-active {opacity: 1;}
.top-hero-slide img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: scale(1.08);
}
.top-hero-slide.is-active img {
	animation: topHeroZoom 7s ease-out forwards;
}
@keyframes topHeroZoom {
	from {transform: scale(1.08);}
	to {transform: scale(1);}
}
.top-hero-slide:nth-child(1) img {object-position: 55% 40%;}
.top-hero-slide:nth-child(2) img {object-position: 60% 45%;}
.top-hero-slide:nth-child(3) img {object-position: 50% 60%;}

/*文字を読みやすくするグラデーション*/
.top-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(6,26,46,.88) 0%, rgba(6,26,46,.62) 38%, rgba(6,26,46,.12) 72%, rgba(6,26,46,0) 100%),
		linear-gradient(0deg, rgba(10,37,64,.55) 0%, rgba(10,37,64,0) 35%),
		linear-gradient(180deg, rgba(10,37,64,.45) 0%, rgba(10,37,64,0) 22%);
	pointer-events: none;
}

/*テキスト*/
.top-hero-inner {
	position: absolute;
	z-index: 2;
	left: var(--top-gutter);
	right: var(--top-gutter);
	top: 50%;
	transform: translateY(-46%);
	max-width: 900px;
}
.top-hero-eyebrow {
	display: flex;
	align-items: center;
	margin: 0 0 clamp(18px, 2vw, 28px);
	font-family: var(--top-en);
	font-weight: 600;
	font-size: clamp(.8rem, 1vw, 1rem);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: rgba(255,255,255,.85);
	line-height: 1;
}
.top-hero-eyebrow::before {
	content: "";
	margin-right: 16px;
	width: 48px;
	height: 2px;
	background: var(--top-accent-on-dark);
}
.top-hero-title {
	margin: 0;
	padding: 0;
	font-family: var(--top-sans);
	font-weight: 900;
	font-size: clamp(2.1rem, 5.4vw, 5.2rem);
	line-height: 1.28;
	letter-spacing: .04em;
	color: #fff;
	text-shadow: 0 2px 24px rgba(0,0,0,.25);
}
.top-hero-title .br {
	display: block;
	white-space: nowrap;
}
/*『 のぶら下げ（行頭をそろえる）*/
.top-hero-title .br:first-child {margin-left: -.5em;}
.top-hero-name {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: clamp(22px, 2.6vw, 36px) 0 0;
	font-family: var(--top-sans);
	font-weight: 700;
	font-size: clamp(1.15rem, 1.8vw, 1.6rem);
	letter-spacing: .4em;
	line-height: 1;
}
.top-hero-name::before {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--top-accent-on-dark);
	flex-shrink: 0;
}

/*アニメーション（初回表示）*/
.top-hero-eyebrow, .top-hero-title .br, .top-hero-name {
	animation: topHeroIn 1s cubic-bezier(.2,.7,.2,1) both;
}
.top-hero-eyebrow {animation-delay: .2s;}
.top-hero-title .br:nth-child(1) {animation-delay: .35s;}
.top-hero-title .br:nth-child(2) {animation-delay: .5s;}
.top-hero-name {animation-delay: .75s;}
@keyframes topHeroIn {
	from {opacity: 0; transform: translateY(24px);}
	to {opacity: 1; transform: none;}
}

/*スライド番号・切り替えボタン*/
.top-hero-bar {
	position: absolute;
	z-index: 3;
	left: var(--top-gutter);
	bottom: clamp(24px, 4vw, 48px);
	display: flex;
	align-items: center;
	gap: 28px;
}
.top-hero-count {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--top-en);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: .1em;
	line-height: 1;
}
.top-hero-count .cur {font-size: 1.5rem;}
.top-hero-count .all {opacity: .6;}
.top-hero-count .sep {width: 22px; height: 1px; background: rgba(255,255,255,.6);}
.top-hero-dots {display: flex; gap: 8px;}
.top-hero-dots button {
	appearance: none;
	border: 0;
	background: none;
	padding: 10px 0;
	cursor: pointer;
}
.top-hero-dots button span {
	display: block;
	position: relative;
	width: 44px;
	height: 3px;
	background: rgba(255,255,255,.35);
	overflow: hidden;
}
.top-hero-dots button span::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
}
.top-hero-dots button.is-active span::after {
	animation: topHeroBar var(--top-hero-interval, 6s) linear forwards;
}
@keyframes topHeroBar {
	from {transform: scaleX(0);}
	to {transform: scaleX(1);}
}

/*Scroll*/
.top-hero-scroll {
	position: absolute;
	z-index: 3;
	right: var(--top-gutter);
	bottom: 0;
	display: block;
	padding-bottom: 76px;
	writing-mode: vertical-rl;
	font-family: var(--top-en);
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
}
.top-hero-scroll::before,
.top-hero-scroll::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 1px;
	height: 64px;
	background: rgba(255,255,255,.35);
}
.top-hero-scroll::after {
	background: #fff;
	animation: topScroll 2s cubic-bezier(.6,0,.3,1) infinite;
	transform-origin: top;
}
@keyframes topScroll {
	0% {transform: scaleY(0); transform-origin: top;}
	50% {transform: scaleY(1); transform-origin: top;}
	51% {transform: scaleY(1); transform-origin: bottom;}
	100% {transform: scaleY(0); transform-origin: bottom;}
}

/*スマホ*/
@media screen and (max-width: 767px) {
	.top-hero {
		height: 76svh;
		min-height: 500px;
		max-height: 660px;
	}
	.top-hero-slide:nth-child(1) img {object-position: 40% 50%;}
	.top-hero-slide:nth-child(2) img {object-position: 70% 50%;}
	.top-hero::after {
		background:
			linear-gradient(0deg, rgba(6,26,46,.92) 0%, rgba(6,26,46,.65) 42%, rgba(6,26,46,.1) 72%),
			linear-gradient(180deg, rgba(6,26,46,.55) 0%, rgba(6,26,46,0) 22%);
	}
	.top-hero-inner {
		top: auto;
		bottom: 84px;
		transform: none;
	}
	.top-hero-title {font-size: clamp(1.9rem, 8.6vw, 2.6rem);}
	.top-hero-eyebrow {letter-spacing: .18em; font-size: .72rem; margin-bottom: 14px;}
	.top-hero-eyebrow::before {width: 28px;}
	.top-hero-name {margin-top: 16px; font-size: 1.05rem;}
	.top-hero-bar {bottom: 28px; gap: 20px;}
	.top-hero-count .cur {font-size: 1.2rem;}
	.top-hero-dots button span {width: 28px;}
	.top-hero-scroll {display: none;}
	.top-hero-eyebrow .pc-only {display: none;}
	.top-logo-name {display: none;}
}


/*サービス案内
---------------------------------------------------------------------------*/
.top-service {
	position: relative;
	background: var(--top-bg);
	padding: clamp(56px, 7vw, 112px) var(--top-gutter);
	font-family: var(--top-sans);
	color: var(--top-ink);
}
.top-service a {
	text-decoration: none;
	color: inherit;
}
.top-service a:hover {opacity: 1;}
.top-service img {max-width: none;}

/*共通：小見出し*/
.top-label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 14px;
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .06em;
	line-height: 1.6;
	color: var(--top-blue);
}
.top-label .num {
	font-family: var(--top-en);
	font-size: 1.1rem;
	letter-spacing: .08em;
	padding-right: 12px;
	border-right: 1px solid currentColor;
	line-height: 1;
}

/*共通：詳しくはこちら*/
.top-more {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .1em;
	line-height: 1;
}
.top-more::after {
	content: "";
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--top-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 18px;
	transition: transform .35s ease, background-color .35s ease;
}
a:hover .top-more::after {transform: translateX(6px);}

/*日本語の自然な改行（.ib の単位で折り返す）*/
.top-service .ib {display: inline-block;}
.top-feature .top-label {display: block;}
.top-feature-title, .top-card-title, .top-label {
	word-break: keep-all;
	word-break: auto-phrase;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

/*上段：大きいカード（仙台市指定工事店）*/
.top-feature {
	position: relative;
	display: grid !important;
	grid-template-columns: 1fr;
	min-height: clamp(380px, 38vw, 520px);
	border-radius: 6px;
	overflow: hidden;
	background: var(--top-overlay);
	color: #fff !important;
	isolation: isolate;
	max-width: 1280px;
	margin: 0 auto;
}
.top-feature-img {
	position: absolute;
	inset: 0;
	z-index: -1;
}
.top-feature-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 50%;
	transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.top-feature-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10,37,64,.94) 0%, rgba(10,37,64,.78) 40%, rgba(10,37,64,.2) 80%, rgba(10,37,64,.05) 100%);
}
.top-feature:hover .top-feature-img img {transform: scale(1.04);}
.top-feature-body {
	align-self: center;
	max-width: 820px;
	padding: clamp(36px, 5vw, 72px);
}
.top-feature .top-label {color: var(--top-accent-on-dark);}
.top-feature .top-label::before {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	margin-bottom: 14px;
	background: currentColor;
}
.top-feature-title {
	display: block;		/*style.css の main h2（flex・逆順）を打ち消す*/
	margin: 0 0 clamp(28px, 3vw, 40px);
	padding: 0;
	font-family: var(--top-sans);
	font-weight: 900;
	font-size: clamp(1.7rem, 3vw, 2.7rem);
	line-height: 1.4;
	letter-spacing: .04em;
	color: #fff;
	text-align: left;
}
.top-feature-title::before,
.top-feature-title::after {display: none;}
.top-feature .top-more::after {background-color: #f1efef; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23174f41' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");}

/*下段：2カラムのカード*/
.top-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 2.4vw, 36px);
	max-width: 1280px;
	margin: clamp(20px, 2.4vw, 36px) auto 0;
}
.top-card {
	display: flex !important;
	flex-direction: column;
	background: #fff;
	border: 1px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}
.top-card:hover {
	border-color: transparent;
	box-shadow: 0 18px 40px rgba(23,79,65,.18);
	transform: translateY(-4px);
}
.top-card-img {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--top-blue-light);
}
.top-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.top-card:nth-child(1) .top-card-img img {object-position: 50% 30%;}
.top-card:nth-child(2) .top-card-img img {object-position: 50% 45%;}
.top-card:hover .top-card-img img {transform: scale(1.05);}
.top-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(24px, 2.6vw, 40px);
}
.top-card-title {
	margin: 0 0 28px;
	padding: 0;
	font-family: var(--top-sans);
	font-weight: 700;
	font-size: clamp(1.25rem, 1.9vw, 1.7rem);
	line-height: 1.55;
	letter-spacing: .03em;
	color: var(--top-navy);
	text-align: left;
}
.top-card-title::before,
.top-card-title::after {display: none;}
.top-card .top-more {
	margin-top: auto;
	align-self: flex-end;
	color: var(--top-navy);
}

@media screen and (max-width: 767px) {
	.top-service {padding: 36px 16px 44px;}
	.top-label {font-size: .74rem; letter-spacing: 0; margin-bottom: 8px; gap: 8px;}
	.top-card .top-label {flex-wrap: nowrap; white-space: nowrap;}
	.top-label .num {font-size: .95rem; padding-right: 8px;}
	.top-more {font-size: .8rem; gap: 10px;}
	.top-more::after {width: 34px; height: 34px; background-size: 15px;}

	/*大きいカード：写真を上に見せて文字は下にまとめる*/
	.top-feature {min-height: 0;}
	.top-feature-img::after {
		background: linear-gradient(0deg, rgba(10,37,64,.95) 0%, rgba(10,37,64,.8) 50%, rgba(10,37,64,.2) 100%);
	}
	.top-feature-body {padding: 88px 20px 22px;}
	.top-feature .top-label::before {margin-bottom: 10px; width: 22px;}
	.top-feature-title {font-size: clamp(1.25rem, 5.8vw, 1.6rem); margin-bottom: 18px;}

	/*2枚のカード：写真左・文字右の横長カードにして縦の間延びを解消*/
	.top-cards {grid-template-columns: 1fr; gap: 12px; margin-top: 12px;}
	.top-card {
		flex-direction: row;
		align-items: stretch;
	}
	.top-card:hover {transform: none;}
	.top-card-img {
		flex: 0 0 34%;
		aspect-ratio: auto;
		min-height: 150px;
	}
	.top-card-body {padding: 16px 16px 14px;}
	.top-card-title {font-size: clamp(.86rem, 3.85vw, 1.1rem); letter-spacing: 0; line-height: 1.55; margin-bottom: 12px;}
	.top-card .top-more {align-self: flex-end;}
}


/*お知らせ：5件ずつのページ送り（top-hero.js が自動でボタンを追加します）
---------------------------------------------------------------------------*/
.new > .top-news-hide {display: none;}
.new {overflow: hidden;}

/*ページが切り替わるときのスライド*/
.new.is-slide-next > dt,
.new.is-slide-next > dd {animation: topNewsNext .45s cubic-bezier(.2,.7,.2,1) both;}
.new.is-slide-prev > dt,
.new.is-slide-prev > dd {animation: topNewsPrev .45s cubic-bezier(.2,.7,.2,1) both;}
@keyframes topNewsNext {
	from {opacity: 0; transform: translateX(48px);}
	to {opacity: 1; transform: none;}
}
@keyframes topNewsPrev {
	from {opacity: 0; transform: translateX(-48px);}
	to {opacity: 1; transform: none;}
}

/*ボタンとページ番号*/
.top-news-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	max-width: 700px;
	margin: 2rem auto 0;
	font-family: var(--top-sans);
	color: var(--top-navy);
}
.top-news-pager .count {
	margin: 0;
	min-width: 4.5em;
	text-align: center;
	font-family: var(--top-en);
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: .1em;
	line-height: 1;
}
.top-news-pager .count .cur {font-size: 1.6rem;}
.top-news-pager button {
	appearance: none;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: var(--top-navy) no-repeat center / 20px;
	transition: transform .25s ease, opacity .25s ease;
}
.top-news-pager .prev {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");}
.top-news-pager .next {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");}
.top-news-pager .prev:not(:disabled):hover {transform: translateX(-4px);}
.top-news-pager .next:not(:disabled):hover {transform: translateX(4px);}
.top-news-pager button:disabled {opacity: .25; cursor: default;}


/*「当社の想い」の写真：スクロールで上がりすぎて文章に重なるのを防ぐ
  （main.js が付ける transform を打ち消し、top-hero.js が計算した小さなずれだけを使う）
---------------------------------------------------------------------------*/
.speed1,
.speed2 {
	transform: translateY(var(--top-para, 0px)) !important;
}


/*動きを減らす設定の方向け*/
@media (prefers-reduced-motion: reduce) {
	.top-hero *, .top-hero *::before, .top-hero *::after,
	.top-service *, .top-service *::before, .top-service *::after {
		animation: none !important;
		transition: none !important;
	}
	.top-hero-slide img {transform: none;}
	.speed1, .speed2 {transform: none !important;}
	.new > dt, .new > dd {animation: none !important;}
}