@charset "utf-8";
/* トップ */

/* ------ メインビジュアル ------ */
.main{
	position: relative;
	background-color: #000000;
}

.main_img img{
	display: block;
	width: 100%;
	height: 700px;
	object-fit: cover;
	opacity: 0.85;
}

/* キャッチコピーの箱（上下の真ん中より少し下） */
.main_copy{
	position: absolute;
	top: 55%;
	right: 0;
	left: 0;
	max-width: 1260px;
	margin: 0 auto;
	padding: 0 30px;
	transform: translateY(-50%);
}

/* キャッチコピー（白い文字。1行ごとに下に白い線） */
.catchcopy{
	font-size: 48px;
	font-weight: 700;
	line-height: 2.05;
	letter-spacing: 0.08em;
	color: #ffffff;
	/* 明るい写真でも白い文字が沈まないように、ぼかした影と、文字のすぐ外の濃い影を重ねる */
	text-shadow: 0 0 16px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.45);
}

.catchcopy{
	display: inline;
	padding-bottom: 6px;
	background-image: linear-gradient(#f3f8fa, #f3f8fa);
	background-repeat: no-repeat;
	background-size: 100% 4px;
	background-position: 0 100%;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* 最新のお知らせ（右下の青い帯。1件だけ） */
.main_news{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 722px;
	max-width: 100%;
	background-color: #0b5ab4;
}

.main_news:not(:has(li)){
	display: none;
}

.main_news_item + .main_news_item{
	display: none;
}

.main_news_item a{
	display: flex;
	align-items: center;
	gap: 0 22px;
	min-height: 59px;
	padding: 10px 24px 10px 18px;
	font-size: 12px;
	line-height: 1.5;
	color: #f3f8fa;
}

.main_news_date{
	flex-shrink: 0;
	font-weight: 700;
}

.main_news_category{
	flex-shrink: 0;
	min-width: 83px;
	padding: 2px 10px;
	font-weight: 700;
	text-align: center;
	color: #0b5ab4;
	background-color: #f3f8fa;
}

.main_news_category:empty{
	display: none;
}

.main_news_title{
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.main_news_item a:hover{
	opacity: 0.8;
}



/* ------ 当社について（左に文章、右に写真） ------ */
.about{
	padding: 86px 0 110px;
}

.about_inner{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 70px;
}

.about_body{
	flex: 1;
	max-width: 600px;
}

.about_catch{
	margin-top: 54px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	color: #0b5ab4;
}

.about_text{
	margin-top: 28px;
	font-size: 15px;
	line-height: 1.85;
}

.about_img{
	flex-shrink: 0;
	width: 535px;
	max-width: 45%;
}

.about_img img{
	display: block;
	width: 100%;
	aspect-ratio: 535 / 558;
	object-fit: cover;
	border-radius: 0 30px 0 30px;
}



/* ------ お知らせ（薄い青の帯） ------ */
.news{
	padding: 64px 0 60px;
	background-color: #f3f8fa;
}

.news_inner{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 60px;
}

.news_head{
	flex-shrink: 0;
}

.news_head .btn_left{
	margin-top: 46px;
}

.news_list{
	flex: 1;
	max-width: 841px;
}

.news_item + .news_item{
	border-top: 4px solid #abbed2;
}

.news_item a{
	display: flex;
	align-items: center;
	gap: 0 20px;
	padding: 24px 0;
	font-size: 16px;
	line-height: 1.6;
}

.news_date{
	flex-shrink: 0;
	font-weight: 700;
	color: #0b5ab4;
}

/* 種類の札（並びの順に 水色・青・紺） */
.news_category{
	flex-shrink: 0;
	min-width: 103px;
	padding: 2px 10px;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	color: #f1f1f1;
	background-color: #15b9d2;
}

.news_item:nth-child(3n+2) .news_category{
	background-color: #1591d2;
}

.news_item:nth-child(3n+3) .news_category{
	background-color: #0b5ab4;
}

.news_category:empty{
	display: none;
}

.news_title{
	min-width: 0;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.news_item a:hover{
	opacity: 0.7;
}



/* ------ 事業内容（カードが3つ） ------ */
.service{
	padding: 110px 0 120px;
}

.service_lead{
	margin-top: 40px;
	font-size: 16px;
	text-align: center;
}

.service_list{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 50px 57px;
	margin-top: 46px;
}

.service_img img{
	display: block;
	width: 100%;
	aspect-ratio: 363 / 253;
	object-fit: cover;
	border-radius: 14px;
}

.service_name{
	margin-top: 22px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	color: #28211f;
}

.service_text{
	margin-top: 12px;
	padding-bottom: 18px;
	font-size: 15px;
	line-height: 1.8;
	border-bottom: 4px solid #adb5be;
}

.service_btn{
	margin-top: 16px;
}

.service_more{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 700;
	color: #0b5ab4;
}

.service_more::after{
	content: "";
	width: 24px;
	height: 24px;
	background: #0b5ab4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9'%3E%3Cpath d='M0 0l8 4.5L0 9z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 9px center / 7px 8px;
	border-radius: 50%;
}

.service_more:hover{
	opacity: 0.7;
}



/* ------ 会社概要（青の帯） ------ */
.company{
	padding: 80px 0;
	color: #f3f8fa;
	background: linear-gradient(90deg, #0b5ab4 0%, #1f74c8 60%, #4590d4 100%);
}

.company_inner{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 50px;
}

.company_body{
	flex: 1;
	max-width: 602px;
}

.company .title_en{
	color: rgba(215, 225, 236, 0.55);
}

.company_table{
	margin-top: 40px;
}

.company_row{
	display: flex;
	gap: 20px;
	padding: 14px 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
}

.company_row + .company_row{
	border-top: 2px solid #abbed2;
}

.company_row dt{
	flex-shrink: 0;
	width: 100px;
}

.company_row dd{
	flex: 1;
	min-width: 0;
}

.company_address{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.company_map{
	flex-shrink: 0;
	padding: 2px 18px;
	font-size: 13px;
	line-height: 1.6;
	color: #0b5ab4;
	background-color: #f3f8fa;
	border-radius: 15px;
}

.company_map:hover{
	opacity: 0.8;
}

.company .btn1{
	border-color: #ffffff;
}

.company_img{
	flex-shrink: 0;
	width: 569px;
	max-width: 46%;
}

.company_img img{
	display: block;
	width: 100%;
	aspect-ratio: 569 / 450;
	object-fit: cover;
	border-radius: 0 30px 0 30px;
}





@media screen and (max-width: 1100px){

	.main_img img{
		height: 560px;
	}

	.catchcopy{
		font-size: 38px;
	}

	.service_list{
		gap: 40px 30px;
	}
}





/* ------ スマホ・タブレット ------ */
@media screen and (max-width: 900px){

	.main_img img{
		height: 64vw;
		min-height: 250px;
		max-height: 520px;
	}

	/* 写真とキャッチコピーを同じ枠に重ね、お知らせの帯は写真の下に出す */
	.main{
		display: grid;
	}

	.main_img,
	.main_copy{
		grid-area: 1 / 1;
	}

	/* スマホでは文字が写真の下の方に重なる。明るい写真（白い壁・空など）でも読めるように、下に向かって暗くなる影を敷く */
	.main_copy{
		position: relative;
		top: auto;
		align-self: end;
		width: 100%;
		padding: 48px 16px 24px;
		transform: none;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
	}

	.catchcopy{
		font-size: 20px;
		line-height: 2;
	}

	.catchcopy{
		background-size: 100% 2px;
		padding-bottom: 3px;
	}

	.main_news{
		position: static;
		width: 100%;
	}

	.main_news_item a{
		flex-wrap: wrap;
		gap: 4px 12px;
		padding: 10px 16px 12px;
		font-size: 11px;
	}

	.main_news_category{
		min-width: 64px;
		padding: 0 8px;
	}

	.main_news_title{
		flex-basis: 100%;
		white-space: normal;
	}

	.about{
		padding: 50px 0 60px;
	}

	.about_inner{
		flex-direction: column;
		gap: 0;
	}

	.about_body{
		display: contents;
	}

	.about .title{
		order: 1;
		width: 100%;
		text-align: center;
	}

	.about_img{
		order: 2;
		width: 100%;
		max-width: none;
		margin-top: 30px;
	}

	.about_catch{
		order: 3;
		margin-top: 30px;
		font-size: 17px;
	}

	.about_text{
		order: 4;
		margin-top: 20px;
		font-size: 14px;
	}

	.about .btn_left{
		order: 5;
		width: 100%;
	}

	.news{
		padding: 46px 0 50px;
	}

	.news_inner{
		flex-direction: column;
		gap: 0;
	}

	.news_head{
		display: contents;
	}

	.news .title{
		width: 100%;
		text-align: center;
	}

	.news_list{
		order: 1;
		width: 100%;
		margin-top: 24px;
	}

	.news_head .btn_left{
		order: 2;
		width: 100%;
		margin-top: 30px;
	}

	.news_item + .news_item{
		border-top-width: 2px;
	}

	.news_item a{
		flex-wrap: wrap;
		gap: 4px 14px;
		padding: 18px 0;
		font-size: 14px;
	}

	.news_category{
		min-width: 80px;
		font-size: 12px;
	}

	.news_title{
		flex-basis: 100%;
	}

	.service{
		padding: 50px 0 60px;
	}

	.service_lead{
		margin-top: 24px;
		font-size: 14px;
		text-align: left;
	}

	.service_list{
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		margin-top: 30px;
	}

	.service_name{
		margin-top: 16px;
		font-size: 17px;
	}

	.service_text{
		font-size: 14px;
		border-bottom-width: 2px;
	}

	.company{
		padding: 46px 0 50px;
	}

	.company_inner{
		flex-direction: column;
		gap: 0;
	}

	.company_body{
		display: contents;
	}

	.company .title{
		order: 1;
		width: 100%;
		text-align: center;
	}

	.company_img{
		order: 2;
		width: 100%;
		max-width: none;
		margin-top: 30px;
	}

	.company_table{
		order: 3;
		width: 100%;
		margin-top: 26px;
	}

	.company .btn_left{
		order: 4;
		width: 100%;
	}

	.company_row{
		flex-direction: column;
		gap: 2px;
		padding: 12px 0;
		font-size: 13px;
	}

	.company_row dt{
		width: auto;
	}

	.company_row dd{
		font-weight: 500;
	}

	.company_row + .company_row{
		border-top-width: 1px;
	}
}