@charset "utf-8";

/*===============================================================
  株式会社千和 独自の上書き（テンプレート本体のstyle.cssは極力触らない）
  ※Template-Partyのパーツを追加した際の微調整も、なるべくここに書く。
===============================================================*/

/*ロゴ（マーク＋テキスト）
---------------------------------------------------------------------------*/
header .logo a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	line-height: 1.2;
	text-decoration: none;
	color: inherit;
}
header .logo .en {
	display: block;
	font-family: var(--accent-font);
	font-size: 1.9rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-indent: 0.28em;
}
header .logo .ja {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	opacity: 0.85;
}
footer .logo .en {
	font-family: var(--accent-font);
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	display: block;
}
footer .logo .ja {
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	display: block;
}

/*下層ページの見出し帯
---------------------------------------------------------------------------*/
.page-head {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	text-align: center;
	padding: 8rem var(--content-space-s) 4rem;
}
.page-head h1 {
	font-size: 2rem;
	margin: 0 0 0.5rem;
	letter-spacing: 0.1em;
}
.page-head p {
	font-family: var(--accent-font);
	font-size: 0.9rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	opacity: 0.8;
	margin: 0;
}
@media screen and (max-width:800px) {
	.page-head { padding: 6rem 1rem 3rem; }
	.page-head h1 { font-size: 1.5rem; }
}

/*パンくず
---------------------------------------------------------------------------*/
.breadcrumb {
	font-size: 0.8rem;
	padding: 1rem var(--content-space-l);
	margin: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}
.breadcrumb li + li::before { content: "›"; margin-right: 0.5em; opacity: 0.5; }

/*会社概要テーブル
---------------------------------------------------------------------------*/
.company-table {
	width: 100%;
	border-collapse: collapse;
}
.company-table th,
.company-table td {
	border-bottom: 1px solid var(--bg-border-color);
	padding: 1.2rem 1rem;
	text-align: left;
	vertical-align: top;
	line-height: 1.9;
}
.company-table th {
	width: 12em;
	font-weight: 600;
	white-space: nowrap;
	color: var(--primary-color);
}
@media screen and (max-width:800px) {
	.company-table th,
	.company-table td { display: block; width: auto; border-bottom: none; }
	.company-table th { padding-bottom: 0.2rem; }
	.company-table td { padding-top: 0; border-bottom: 1px solid var(--bg-border-color); }
}

/*お問い合わせフォーム
---------------------------------------------------------------------------*/
.form-table { width: 100%; border-collapse: collapse; }
.form-table th,
.form-table td { display: block; width: auto; text-align: left; padding: 0; }
.form-table th { padding-top: 1.5rem; font-weight: 600; }
.form-table td { padding-bottom: 0.5rem; }
.form-table input[type="text"],
.form-table input[type="email"],
.form-table input[type="tel"],
.form-table select,
.form-table textarea {
	width: 100%;
	padding: 0.8rem;
	border: 1px solid var(--bg-border-color);
	border-radius: 3px;
	font-family: var(--base-font);
	font-size: 1rem;
	background: #fff;
	color: inherit;
}
.form-table textarea { min-height: 12em; resize: vertical; }
.form-table .req {
	background: var(--accent-color);
	color: var(--accent-inverse-color);
	font-size: 0.7rem;
	padding: 0.15em 0.6em;
	border-radius: 3px;
	margin-left: 0.6em;
	vertical-align: middle;
	letter-spacing: 0.05em;
}
.form-note { font-size: 0.85rem; line-height: 1.9; }
.form-submit { text-align: center; margin-top: 2.5rem; }
.form-submit button {
	font-family: var(--base-font);
	font-size: 1rem;
	letter-spacing: 0.1em;
	cursor: pointer;
	border: none;
	background: var(--accent-color);
	color: var(--accent-inverse-color);
	padding: 1.1rem 4rem;
	border-radius: 3px;
	transition: opacity 0.3s;
}
.form-submit button:hover { opacity: 0.75; }
.form-submit button[disabled] { opacity: 0.5; cursor: default; }
.form-message {
	margin-top: 1.5rem;
	padding: 1rem;
	border-radius: 3px;
	display: none;
	line-height: 1.8;
}
.form-message.is-ok { display: block; background: var(--light-color); border: 1px solid var(--accent-color); }
.form-message.is-ng { display: block; background: #fdecea; border: 1px solid #c0392b; color: #922b21; }

/*「選ばれる理由」ブロックの背景写真を千和の写真に差し替え
---------------------------------------------------------------------------*/
.effects-overlay .image1 { background-image: url("../images/senwa/projects/project1.jpg"); }
.effects-overlay .image2 { background-image: url("../images/senwa/projects/project2.jpg"); }
.effects-overlay .image3 { background-image: url("../images/senwa/projects/project3.jpg"); }
.effects-overlay .image4 { background-image: url("../images/senwa/projects/project4.jpg"); }
.effects-overlay .text h4 {
	font-size: max(20px, 4vw);
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
}

/*事業内容カード：画像の高さと「詳しく見る」ボタンの位置を揃える
---------------------------------------------------------------------------*/
.list1 .image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;	/*全カードの画像を同じ比率に統一*/
	object-fit: cover;
}

/*ボタンをカード下端に固定（テキスト量が違っても高さが揃う）*/
.list1 .list .text .btn {
	margin-top: auto;
	padding-top: 0.5rem;
}

/*ヒーロー左下の対応エリア地図（インラインSVG・装飾）
---------------------------------------------------------------------------*/
.mainimg .area-map {
	display: block;
	width: 62%;			/*ヒーロー内での大きさ*/
	max-width: 260px;
	margin: 0.5rem 0 0;	/*左寄せ*/
	height: auto;
	overflow: visible;
}

/*周辺の県（文脈用・淡く）*/
.area-map .map-context path {
	fill: var(--bg-border-color);
	stroke: var(--bg-color);
	stroke-width: 2;
	opacity: 0.35;
}

/*対応エリアの県*/
.area-map .map-supported path {
	fill: var(--primary-color);
	stroke: var(--bg-color);
	stroke-width: 2;
	opacity: 0.18;
}

/*大阪から伸びる接続線*/
.area-map .map-links path {
	fill: none;
	stroke: var(--accent-color);
	stroke-width: 5;
	stroke-linecap: round;
	stroke-dasharray: 600;
	stroke-dashoffset: 600;
	animation: area-map-draw 1.2s ease-out forwards;
	animation-delay: calc(0.8s + var(--i) * 0.2s);
}
@keyframes area-map-draw {
	to { stroke-dashoffset: 0; }
}

/*マーカー*/
.area-map .pin-halo { fill: var(--accent-color); opacity: 0.18; }
.area-map .pin-dot  { fill: var(--accent-color); stroke: var(--bg-color); stroke-width: 3; }
.area-map .pin.is-base .pin-halo { fill: var(--primary-color); opacity: 0.22; }
.area-map .pin.is-base .pin-dot  { fill: var(--primary-color); }

.area-map .pin {
	opacity: 0;
	animation: area-map-pin 0.5s ease-out forwards;
	animation-delay: calc(0.65s + var(--i) * 0.2s);
}
@keyframes area-map-pin {
	from { opacity: 0; }
	to   { opacity: 1; }
}

	/*画面幅700px以下の追加指定（テキストが中央寄せになるので地図も中央へ）*/
	@media (max-width:700px) {
	.mainimg .area-map { margin: 0.5rem auto 0; width: 45%; }
	}/*追加指定ここまで*/

/*アニメーションを控えたい設定の端末*/
@media (prefers-reduced-motion: reduce) {
	.area-map .map-links path { stroke-dashoffset: 0; animation: none; }
	.area-map .pin { opacity: 1; animation: none; }
}


/*ご依頼の流れ：画像の比率を統一
---------------------------------------------------------------------------*/
.list2 .image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/*CTA（ご相談・お見積り）の背景をテンプレートの観光写真から差し替え
---------------------------------------------------------------------------*/
#contact {
	background-image: url("../images/senwa/cta-bg.webp");
	background-position: center bottom;
}

/*事業内容カードが3枚のときは3列に（4列指定のままだと右が空く）
---------------------------------------------------------------------------*/
.list1.list1-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {
	.list1.list1-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}/*追加指定ここまで*/

/*ロゴマーク
---------------------------------------------------------------------------*/
header .logo .mark {
	width: auto;
	height: 2.6rem;
	flex-shrink: 0;
}
header .logo a > span { display: block; }

footer .logo {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
footer .logo .mark {
	width: auto;
	height: 2.4rem;
	flex-shrink: 0;
}

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {
	header .logo .mark { height: 2.1rem; }
	}/*追加指定ここまで*/

/*下層ページのヒーロー（事業ごとの写真）
---------------------------------------------------------------------------*/
.page-head {
	position: relative;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
}

/*写真の上に敷く色。文字の可読性を確保する*/
.page-head.ph-construction::before,
.page-head.ph-renovation::before,
.page-head.ph-management::before,
.page-head.ph-ai::before,
.page-head.ph-business::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(18,27,46,0.72), rgba(18,27,46,0.55));
}

.page-head h1,
.page-head p {
	position: relative;
	z-index: 1;
}

.page-head.ph-business     { background-image: url("../images/senwa/hero-2.webp"); }
.page-head.ph-construction { background-image: url("../images/senwa/biz-1.webp"); }
.page-head.ph-renovation   { background-image: url("../images/senwa/biz-2.webp"); }
.page-head.ph-management   { background-image: url("../images/senwa/biz-3.webp"); }
.page-head.ph-ai           { background-image: url("../images/senwa/biz-4.webp"); }

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {
	.page-head.ph-construction,
	.page-head.ph-renovation,
	.page-head.ph-management,
	.page-head.ph-ai,
	.page-head.ph-business { background-position: center center; }
	}/*追加指定ここまで*/

/*==============================================================
  スマホでもPCと同じレイアウトを維持する（縦積みへの切り替えを打ち消す）
  ※テンプレート標準は700px以下で縦積みになるため、ここで上書きする
==============================================================*/
	@media (max-width:700px) {

	/*----- ヒーロー：写真の上にテキストを重ねたまま -----*/
	.mainimg {
		display: block;			/*column-reverseの縦積みを解除*/
	}
	.mainimg .mainimg-shape {
		display: block;			/*装飾シルエットを再表示*/
	}
	.mainimg .text {
		position: absolute;
		left: 0;
		width: 40%;				/*PCの35%より少しだけ広げて文字を入れやすく*/
		height: 100%;
		padding-left: 5vw;
		align-items: flex-start;
		text-align: left;
		justify-content: center;
		gap: 0.5rem;
	}
	.mainimg .text h1 br {
		display: block;			/*PCと同じ改行位置に戻す*/
	}

	/*画面幅に追従させて文字を縮める（最小値を外すのが要点）*/
	.mainimg .text h1 { font-size: 4.6vw; line-height: 1.4; }
	.mainimg .text p  { font-size: 2.2vw; line-height: 1.7; }
	.mainimg .mainimg-text span { font-size: 2vw; padding: 0.6rem 0.4rem; letter-spacing: 0.15em; }
	.mainimg .mainimg-text p { margin: 5px; }
	.mainimg .mainimg-text p:last-child { margin-top: 20px; }
	.mainimg .area-map { width: 72%; max-width: none; margin: 0.4rem 0 0; }

	/*----- 会社紹介：左右に画像、中央にテキストの3カラムを維持 -----*/
	.grid1 {
		grid-template-columns: 28% minmax(0, 1fr) 28%;
		grid-template-areas: none;
		gap: 2.64vw;	/* PC 2rem */
	}
	.grid1 .image1,
	.grid1 .text,
	.grid1 .image2 {
		grid-area: auto;
		width: auto;
	}
	.grid1 .text { gap: 2.64vw; }			/* PC 2rem */
	.grid1 .text p { font-size: 1.32vw; }	/* PC 1rem */
	.grid1 .column { font-size: 1.06vw; }	/* PC 0.8rem */
	.grid1 .column > div { padding-inline: 1.32vw; }	/* PC 1rem */
	.grid1 .column i { font-size: 2.64vw; }	/* PC 2rem */
	.grid1 .column h4 { font-size: 1.32vw; white-space: nowrap; }

	/*----- 事業内容のリード文：1行に収まるよう文字を下げる -----*/
	.lead { font-size: 2vw; }

	/*----- 事業内容カード：PCと同じ列数を維持 -----*/
	.list1 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.98vw; }	/* PC 1.5rem */
	.list1.list1-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.list1 .list .text { padding: 1.32vw; gap: 0.66vw; }	/* PC 1rem / 0.5rem */
	.list1 .list h4 { font-size: 1.32vw; }	/* PC 1rem */
	.list1 .list p { font-size: 0.99vw; }	/* PC 0.75em */
	.list1 .list .btn a { font-size: 1.32vw; padding: 0.33vw 1.65vw !important; }	/* PC 1rem / 0.4rem 2rem */

	/*----- 選ばれる理由：テキストは半分幅のまま -----*/
	.effects-overlay .text { width: 50%; padding: 5vw; }
	.effects-overlay .text h4 { font-size: 5vw; margin-bottom: 0.6rem; }
	.effects-overlay .text p { font-size: 2.1vw; line-height: 1.7; }

	/*----- ご依頼の流れ：4列と矢印を維持 -----*/
	.list2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
	.list2 > div:not(:last-child)::after { content: "\f554"; right: -1.1rem; font-size: 4vw; }
	.list2 .time { font-size: 1.9vw; margin-bottom: 0.5rem; }
	.list2 h4 { font-size: 2vw; }	/*「現地調査・ヒアリング」が2文字はみ出すため少し下げる*/
	.list2 .text p { font-size: 1.9vw; line-height: 1.6; }

	/*----- 対応エリア・CTA -----*/
	.list3 > div { padding-block: 0.7rem; gap: 0.6rem; }
	.list3 h4 { font-size: 2.4vw; }
	.list3 .text p { font-size: 1.9vw; }
	#contact .text { width: 50%; }
	#contact .text h2 { font-size: 3.4vw; }
	#contact .text p { font-size: 2vw; }

	}/*追加指定ここまで*/

/*ヒーローの現在表示中ボタン（丸）を非表示にする
  ※切り替え動作は js/main.js 側で動くため、表示だけ消す
---------------------------------------------------------------------------*/
.mainimg .slide-indicators {
	display: none;
}

/*ヒーローの動画（静止画の上に重ねる）
  読み込み前・再生できない環境では静止画のまま表示される
---------------------------------------------------------------------------*/
.mainimg .slide-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.8s;
	pointer-events: none;
}
.mainimg .slide-video.is-ready { opacity: 1; }
/*一度出た動画は消さない。スライド側のフェードだけで切り替える*/

@media (prefers-reduced-motion: reduce) {
	.mainimg .slide-video { display: none; }
}

/*ヒーロー各スライドの見せる位置
  数値を小さくするほど被写体が右へ寄る（写真の左寄りを映すため）
---------------------------------------------------------------------------*/
.mainimg .img1 img,
.mainimg .img1 .slide-video { object-position: 0% center; }

.mainimg .img3 img,
.mainimg .img3 .slide-video { object-position: 0% center; }