@charset "UTF-8";

/*
========================================
  home.css
  トップページ専用スタイル
========================================
*/


/* ============================================
   main上部余白（ヘッダー固定分）
============================================ */
.page-top main {
	margin-top: 85px;
}


/* ============================================
   sec_mv：メインビジュアル
============================================ */
.sec_mv {
	position: relative;
	background: url(../img/home_mv_bg.jpg) no-repeat center center;
	background-size: cover;
	height: 754px;
}

/* MV下端から50px食い込む縦線 */
.sec_mv::after {
	content: '';
	position: absolute;
	bottom: -50px;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 100px;
	background: #fff;
	z-index: 1;
}

.mv_inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mv_text_area {
	text-align: center;
}

.mv_title {
	font-size: 4rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.5;
	letter-spacing: 0.05em;
	margin-bottom: 32px;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.5);
}

.mv_lead {
	font-size: 1.25rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.9;
	letter-spacing: 0.03em;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}


/* ============================================
   sec_lead：リード文エリア
============================================ */
.sec_lead {
	background: #0d2b4f;
	padding: 120px 20px;
}

.sec_lead_inner {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

.lead_text {
	font-size: 1.25rem;
	color: #fff;
	line-height: 2.4;
	letter-spacing: 0.05em;
}


/* ============================================
   SP
============================================ */
@media screen and (max-width: 768px) {

	.page-top main {
		margin-top: 60px;
	}

	/* MV */
	.sec_mv {
		height: 70vw;
	}

	.sec_mv::after {
		bottom: -30px;
		height: 60px;
	}

	.mv_title {
		font-size: 8.5vw;
		margin-bottom: 16px;
	}

	.mv_lead {
		font-size: 3.8vw;
	}

	/* リード文 */
	.sec_lead {
		padding: 60px 5%;
	}

	.lead_text {
		font-size: 3.8vw;
		text-align: left;
		line-height: 2.2;
	}
}


/* ============================================
   sec_business：事業内容
============================================ */
.sec_business {
	position: relative;
	background: url(../img/home_services_bg.png) repeat;
	overflow: hidden;
	padding: 140px 20px 160px;
}

/* 左上装飾 */
.business_deco_tl {
	position: absolute;
	top: 0;
	left: 0;
	line-height: 0;
	pointer-events: none;
}

.business_deco_tl img {
	display: block;
	width: auto;
}

/* 右下装飾 */
.business_deco_br {
	position: absolute;
	bottom: 0;
	right: 0;
	line-height: 0;
	pointer-events: none;
}

.business_deco_br img {
	display: block;
	width: auto;
}

/* 内側コンテンツ */
.business_inner {
	position: relative;
	z-index: 1;
	max-width: 770px;
	margin: 0 auto;
}

/* セクションタイトル */
.business_title {
	font-size: 2.5rem;
	font-weight: 700;
	color: #000;
	text-align: center;
	letter-spacing: 0.1em;
	margin-bottom: 32px;
}

/* カテゴリ帯 */
.business_category {
	background: #005baa;
	padding: 12px 24px;
	margin-bottom: 48px;
}

.business_category_text {
	font-size: 1.5rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.1em;
	line-height: 1;
	text-align: center;
}

/* 各項目 */
.business_list {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.business_item {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

/* 左：テキスト */
.business_item_body {
	flex: 1;
}

.business_item_title {
	font-size: 1.875rem;
	font-weight: 700;
	color: #000;
	letter-spacing: 0.05em;
	margin-bottom: 16px;
}

.business_item_text {
	font-size: 1.125rem;
	font-weight: 500;
	color: #000;
	line-height: 1.9;
}

/* 右：写真 */
.business_item_img {
	flex: 0 0 340px;
}

.business_item_img img {
	width: 100%;
	height: auto;
	display: block;
}


/* ============================================
   sec_business SP
============================================ */
@media screen and (max-width: 768px) {

	.sec_business {
		padding: 60px 10% 80px;
	}

	.business_deco_tl img {
		width: 40vw;
	}

	.business_deco_br img {
		width: 40vw;
	}

	.business_title {
		font-size: 1.5rem;
		margin-bottom: 24px;
	}

	.business_category {
		padding: 10px 16px;
		margin-bottom: 36px;
	}

	.business_category_text {
		font-size: 0.9375rem;
	}

	.business_list {
		gap: 40px;
	}

	.business_item {
		flex-direction: column;
		gap: 20px;
	}

	.business_item_title {
		font-size: 1.25rem;
	}

	.business_item_text {
		font-size: 3.8vw;
	}

	.business_item_img {
		flex: none;
		width: 100%;
	}
}


/* ============================================
   sec_history：沿革
============================================ */
.sec_history {
	position: relative;
	background: #0f2d53;
	overflow: hidden;
	padding: 140px 20px 160px;
}

/* 左下装飾 */
.history_deco_bl {
	position: absolute;
	bottom: 0;
	left: 0;
	line-height: 0;
	pointer-events: none;
}

.history_deco_bl img {
	display: block;
	width: auto;
}

/* 1200px外枠（写真のabsolute基準） */
.history_outer {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

/* 見出し＋年表：1000pxセンタリング */
.history_inner {
	max-width: 1000px;
	margin: 0 auto;
}

/* 見出し */
.history_title {
	font-size: 2.5rem;
	font-weight: 700;
	color: #fff;
	text-align: center;
	letter-spacing: 0.15em;
	padding-bottom: 20px;
	border-bottom: 2px solid #005baa;
	margin-bottom: 56px;
}

/* 年表リスト：縦線を::beforeで配置 */
/* 縦線のX位置 = 年号幅(140px) + margin(24px) + 青丸半径(5px) = 169px */
.history_list {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
}

.history_list::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 169px;
	width: 1px;
	background: #fff;
}

/* 各行 */
.history_item {
	display: flex;
	align-items: center;
	padding: 24px 0;
}

/* 年号 */
.history_year {
	font-size: 1.375rem;
	color: #fff;
	letter-spacing: 0.05em;
	flex: 0 0 140px;
	line-height: 1;
}

/* 中央装飾：青丸＋横線 */
.history_deco {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	width: 40px;
	margin: 0 24px;
	position: relative;
	z-index: 1;
}

/* 青丸 */
.history_deco::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #005baa;
	flex-shrink: 0;
}

/* 横線 */
.history_deco::after {
	content: '';
	height: 1px;
	background: #fff;
	flex: 1;

}

/* 内容テキスト */
.history_text {
	font-size: 1.375rem;
	color: #fff;
	letter-spacing: 0.05em;
	line-height: 1;
}

/* 写真：history_outer内でabsolute右寄せ */
.history_photos {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	pointer-events: none;
}

.history_photos img {
	display: block;
	width: 396px;
	height: auto;
}


/* ============================================
   sec_history SP
============================================ */
@media screen and (max-width: 768px) {

	.sec_history {
		padding: 60px 10% 80px;
	}

	.history_deco_bl img {
		width: 20vw;
	}

	.history_inner {
		max-width: 100%;
	}

	.history_title {
		font-size: 1.5rem;
		margin-bottom: 36px;
	}

	/* SP縦線位置：年号幅を固定値で持てないためlistの::beforeを上書き */
	.history_list::before {
		left: calc(24vw + 17px); /* 24vw + margin12px + 青丸半径5px */
	}

	.history_year {
		font-size: 4vw;
		flex: 0 0 24vw;
	}

	.history_deco {
		margin: 0 12px;
		width: 32px;
	}

	.history_text {
		font-size: 4vw;
	}

	.history_photos {
		position: static;
		margin-top: 48px;
		text-align: center;
	}

	.history_photos img {
		width: 80%;
		margin: 0 auto;
	}
}


/* ============================================
   sec_about：会社概要
============================================ */
.sec_about {
	position: relative;
	background: url(../img/home_about_bg.png) repeat;
	overflow: hidden;
	padding: 140px 20px 160px;
}

/* 左上装飾 */
.about_deco_tl {
	position: absolute;
	top: 0;
	left: 0;
	line-height: 0;
	pointer-events: none;
}

.about_deco_tl img {
	display: block;
	width: auto;
}

/* 右下装飾 */
.about_deco_br {
	position: absolute;
	bottom: 0;
	right: 0;
	line-height: 0;
	pointer-events: none;
}

.about_deco_br img {
	display: block;
	width: auto;
}

/* 内側：1000pxセンタリング */
.about_inner {
	position: relative;
	z-index: 1;
	max-width: 1000px;
	margin: 0 auto;
}

/* 見出し（history_titleと同スタイル） */
.about_title {
	font-size: 2.5rem;
	font-weight: 700;
	color: #000;
	text-align: center;
	letter-spacing: 0.15em;
	padding-bottom: 20px;
	border-bottom: 2px solid #005baa;
	margin-bottom: 56px;
}

/* 表 */
.about_table {
	display: flex;
	flex-direction: column;
}

/* 各行 */
.about_row {
	display: flex;
	align-items: baseline;
	gap: 0;
	padding: 28px 0;
	border-bottom: 1px solid #ccc;
}

.about_row:first-child {
	border-top: none;
}

/* ラベル（左列） */
.about_label {
	font-size: 1.375rem;
	font-weight: 700;
	color: #000;
	letter-spacing: 0.05em;
	flex: 0 0 180px;
	line-height: 1.6;
}

/* 値（右列） */
.about_value {
	font-size: 1.375rem;
	font-weight: 400;
	color: #000;
	letter-spacing: 0.03em;
	line-height: 1.6;
	flex: 1;
}


/* ============================================
   sec_about SP
============================================ */
@media screen and (max-width: 768px) {

	.sec_about {
		padding: 60px 10% 80px;
	}

	.about_deco_tl img {
		width: 20vw;
	}

	.about_deco_br img {
		width: 20vw;
	}

	.about_title {
		font-size: 1.5rem;
		margin-bottom: 36px;
	}

	.about_row {
		flex-direction: column;
		gap: 8px;
		padding: 20px 0;
	}

	.about_label {
		font-size: 4vw;
		flex: none;
	}

	.about_value {
		font-size: 4vw;
	}
}


/* ============================================
   sec_contact：お問い合わせ
============================================ */

/* Adobe Fontsを使う場合は以下を有効化（din-2014） */
/* @import url("https://use.typekit.net/XXXXXXX.css"); */
/* Google Fonts代替：Barlow Condensed Bold */
.sec_contact {
	background: #fff;
	padding: 140px 20px 160px;
}

.contact_inner {
	max-width: 1000px;
	margin: 0 auto;
}

/* 見出し */
.contact_title {
	font-size: 2.5rem;
	font-weight: 700;
	color: #000;
	text-align: center;
	letter-spacing: 0.15em;
	padding-bottom: 20px;
	border-bottom: 2px solid #005baa;
	margin-bottom: 56px;
}

/* 必須マーク */
.required {
	color: #ef1c23;
	font-size: 0.7em;
	vertical-align: super;
	margin-left: 2px;
}

/* ============================================
   電話エリア
============================================ */
.contact_tel_area {
	text-align: center;
	margin-bottom: 72px;
}

.contact_tel_label {
	font-size: 1.875rem;
	color: #000;
	letter-spacing: 0.05em;
	margin-bottom: 16px;
}

/* 電話番号（アイコン付き） */
.contact_tel_num {
	margin-bottom: 12px;
}

.contact_tel_link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: 'Barlow Condensed', 'din-2014', sans-serif;
	font-size: 4.375rem;
	font-weight: 700;
	color: #015aaa;
	letter-spacing: 0.03em;
	text-decoration: none;
}

/* 電話アイコン（::before） */
.contact_tel_link::before {
	content: '';
	display: inline-block;
	width: 60px;
	height: 60px;
	background: url(../img/common_icon_tel.png) no-repeat center center;
	background-size: contain;
	flex-shrink: 0;
}

.contact_tel_hours {
	font-size: 1.375rem;
	color: #000;
	letter-spacing: 0.05em;
}


/* ============================================
   フォームエリア
============================================ */
.contact_form_area {
	text-align: center;
}

.contact_form_title {
	font-size: 1.875rem;
	font-weight: 500;
	color: #000;
	letter-spacing: 0.05em;
	margin-bottom: 24px;
}

.contact_form_lead {
	font-size: 1.25rem;
	color: #000;
	line-height: 2;
	margin-bottom: 48px;
}

.contact_required_note {
	color: #ef1c23;
}

.contact_required_note .required {
	vertical-align: baseline;
	font-size: 1em;
}

/* フォーム本体 */
.contact_form {
	text-align: left;
	max-width: 700px;
	margin: 0 auto 48px;
}

/* 各行 */
.contact_form_row {
	display: flex;
	align-items: flex-start;
	gap: 0;
	padding: 10px 0;
}

/* ラベル */
.contact_form_label {
	font-size: 1.25rem;
	font-weight: 400;
	color: #000;
	letter-spacing: 0.03em;
	flex: 0 0 200px;
	padding-top: 10px;
	line-height: 1.5;
}

/* 入力欄 */
.contact_form_input {
	flex: 1;
}

.contact_form_input input {
	width: 100%;
	height: 44px;
	border: 2px solid #ccc;
	border-radius: 6px;
	padding: 0 12px;
	font-size: 1rem;
	font-family: "Noto Sans JP", sans-serif;
	color: #000;
	background: #fff;
	outline: none;
	transition: border-color 0.3s;
}

.contact_form_input input:focus {
	border-color: #0171bb;
}

.contact_form_input textarea {
	width: 100%;
	height: 140px;
	border: 2px solid #ccc;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 1rem;
	font-family: "Noto Sans JP", sans-serif;
	color: #000;
	background: #fff;
	outline: none;
	resize: vertical;
	transition: border-color 0.3s;
}

.contact_form_input textarea:focus {
	border-color: #0171bb;
}

/* 個人情報同意 */
.contact_privacy {
	text-align: center;
	margin-bottom: 56px;
}

.contact_privacy_label {
	font-size: 1.25rem;
	color: #000;
	margin-bottom: 8px;
}

.contact_privacy_link {
	display: block;
	font-size: 1.25rem;
	color: #0171bb;
	text-decoration: underline;
	margin-bottom: 20px;
}

.contact_privacy_link:hover {
	color: #0171bb;
	opacity: 0.75;
}

.contact_agree {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 1.25rem;
	color: #000;
	cursor: pointer;
}

.contact_agree input[type="checkbox"] {
	width: 16px;
	height: 16px;
	cursor: pointer;
}

/* 送信ボタン */
.contact_submit {
	text-align: center;
}

.contact_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 260px;
	padding: 22px 36px;
	background: linear-gradient(to bottom, #102e54, #005aa9);
	border: none;
	border-radius: 10px;
	color: #fff;
	font-size: 1.625rem;
	font-family: inherit;
	font-weight: 500;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: opacity 0.3s;
}

.contact_btn:hover {
	opacity: 0.85;
}

/* ＞アイコン */
.contact_btn::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(45deg);
	flex-shrink: 0;
}


/* ============================================
   sec_contact SP
============================================ */
@media screen and (max-width: 768px) {

	.sec_contact {
		padding: 60px 10% 80px;
	}

	.contact_title {
		font-size: 1.5rem;
		margin-bottom: 36px;
	}

	.contact_tel_label {
		font-size: 4.5vw;
	}

	.contact_tel_link {
		font-size: 8vw;
	}

	.contact_tel_link::before {
		width: 7vw;
		height: 7vw;
	}

	.contact_tel_hours {
		font-size: 3.8vw;
	}

	.contact_form_title {
		font-size: 4.5vw;
	}

	.contact_form_lead {
		font-size: 3.5vw;
		text-align: left;
	}

	.contact_form {
		max-width: 100%;
	}

	.contact_form_row {
		flex-direction: column;
		gap: 8px;
		padding: 16px 0;
	}

	.contact_form_label {
		flex: none;
		padding-top: 0;
		font-size: 3.8vw;
	}

	.contact_form_input input {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		font-size: 16px; /* iOS自動ズーム防止（16px未満で発生） */
	}

	.contact_form_input textarea {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		font-size: 16px; /* iOS自動ズーム防止 */
	}

	.contact_privacy_label {
		font-size: 3.8vw;
	}

	.contact_privacy_link {
		font-size: 3.8vw;
	}

	.contact_agree {
		font-size: 3.8vw;
	}

	.contact_btn {
		font-size: 4.5vw;
		width: 60vw;
	}
}


/* ============================================
   個人情報モーダル
============================================ */
.privacy_modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
}

.privacy_modal.is-open {
	display: block;
}

/* オーバーレイ */
.privacy_modal_overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	cursor: pointer;
}

/* コンテンツ */
.privacy_modal_content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 700px;
	max-height: 80vh;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* 閉じるボタン */
.privacy_modal_close {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 36px;
	height: 36px;
	background: none;
	border: none;
	font-size: 2rem;
	color: #000;
	cursor: pointer;
	line-height: 1;
	padding: 0;
	transition: opacity 0.3s;
}

.privacy_modal_close:hover {
	opacity: 0.6;
}

/* スクロールエリア */
.privacy_modal_body {
	padding: 48px 40px 40px;
	overflow-y: auto;
}

/* タイトル */
.privacy_modal_title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #000;
	letter-spacing: 0.08em;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 2px solid #005baa;
}

/* リード */
.privacy_modal_lead {
	font-size: 1rem;
	color: #000;
	line-height: 1.9;
	margin-bottom: 32px;
}

/* 各セクション */
.privacy_modal_section {
	margin-bottom: 28px;
}

.privacy_modal_heading {
	font-size: 1.0625rem;
	font-weight: 700;
	color: #000;
	margin-bottom: 10px;
}

.privacy_modal_section p {
	font-size: 1rem;
	color: #000;
	line-height: 1.9;
}

/* リスト */
.privacy_modal_list {
	margin-top: 8px;
	padding-left: 1.5em;
}

.privacy_modal_list li {
	font-size: 1rem;
	color: #000;
	line-height: 1.9;
	list-style: disc;
}

/* 会社情報 */
.privacy_modal_company {
	margin-top: 12px;
	font-size: 1rem;
	color: #000;
	line-height: 2;
}


/* ============================================
   個人情報モーダル SP
============================================ */
@media screen and (max-width: 768px) {

	.privacy_modal_content {
		max-height: 85vh;
	}

	.privacy_modal_body {
		padding: 40px 24px 32px;
	}

	.privacy_modal_title {
		font-size: 1.25rem;
	}

	.privacy_modal_lead {
		font-size: 3.5vw;
	}

	.privacy_modal_heading {
		font-size: 3.8vw;
	}

	.privacy_modal_section p,
	.privacy_modal_list li {
		font-size: 3.5vw;
	}

	.privacy_modal_company {
		font-size: 3.5vw;
	}
}


/* ============================================
   ハニーポット（人間には見えない隠しフィールド）
============================================ */
.honeypot_field {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
	tabindex: -1;
}