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

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

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

.main_copy{
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	max-width: 1460px;
	margin: 0 auto;
	padding: 0 30px;
	transform: translateY(-50%);
}

/* キャッチコピー（明朝。1行ごとに水色の帯） */
.catchcopy{
	display: inline;
	padding: 2px 12px;
	font-family: "Noto Serif JP", "Yu Mincho", YuMincho, serif;
	font-size: 36px;
	font-weight: 400;
	line-height: 2;
	letter-spacing: 0.1em;
	color: #ffffff;
	background-color: rgba(56, 181, 201, 0.82);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}



/* ------ ご挨拶 ------ */
.greeting{
	padding: 130px 0 110px;
}

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

.greeting_body{
	flex: 1;
	max-width: 560px;
}

.greeting_name{
	display: flex;
	flex-wrap: wrap;
	gap: 0 2em;
	margin-top: 60px;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
	color: #222222;
}

.greeting_role:empty{
	display: none;
}

.greeting_text{
	margin-top: 26px;
	font-size: 16px;
	line-height: 1.75;
}

.greeting_img{
	flex-shrink: 0;
	width: 523px;
	max-width: 45%;
}

.greeting_img img{
	display: block;
	width: 100%;
	aspect-ratio: 523 / 463;
	object-fit: cover;
}



/* ------ サービス案内 ------ */
.service{
	padding: 20px 0 110px;
}

.service_lead{
	max-width: 840px;
	margin: 60px auto 0;
	font-size: 16px;
	line-height: 2;
}

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

.service_item{
	padding: 44px 44px 46px;
	background-color: #e7f7ff;
}

/* 業務の名前（左に紺の線） */
.service_name{
	padding-left: 20px;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.06em;
	color: #00425d;
	border-left: 8px solid #0c4876;
}

/* アイコン（白い丸。並びの順に決まった絵が入る） */
.service_icon{
	width: 150px;
	height: 150px;
	margin: 40px auto 0;
	background: #ffffff url("../img/index/icon_01.png") no-repeat center / 64px auto;
	border-radius: 50%;
}

.service_item:nth-child(6n+2) .service_icon{
	background-image: url("../img/index/icon_02.png");
}

.service_item:nth-child(6n+3) .service_icon{
	background-image: url("../img/index/icon_03.png");
	background-size: 48px auto;
}

.service_item:nth-child(6n+4) .service_icon{
	background-image: url("../img/index/icon_04.png");
	background-size: 52px auto;
}

.service_item:nth-child(6n+5) .service_icon{
	background-image: url("../img/index/icon_05.png");
	background-size: 34px auto;
}

.service_item:nth-child(6n+6) .service_icon{
	background-image: url("../img/index/icon_06.png");
	background-size: 46px auto;
}

.service_text{
	margin-top: 36px;
	font-size: 15px;
	line-height: 1.85;
}



/* ------ お客様の声（カードの下半分に水色の帯） ------ */
.voice{
	padding-top: 20px;
}

.voice_band{
	margin-top: 70px;
	padding-bottom: 80px;
	background: linear-gradient(#ffffff 0, #ffffff 160px, #d7ebf0 160px);
}

.voice_slider{
	position: relative;
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 80px;
}

.voice_list{
	display: flex;
	gap: 27px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.voice_list::-webkit-scrollbar{
	display: none;
}

.voice_item{
	flex: 0 0 calc((100% - 54px) / 3);
	scroll-snap-align: start;
	background-color: #ffffff;
}

.voice_img img{
	display: block;
	width: 100%;
	aspect-ratio: 383 / 253;
	object-fit: cover;
}

.voice_body{
	padding: 28px 36px 34px;
}

.voice_name{
	font-size: 19px;
	font-weight: 500;
	line-height: 1.5;
	color: #0c4876;
}

.voice_text{
	margin-top: 14px;
	font-size: 15px;
	line-height: 1.8;
}

/* 左右の矢印（紺の丸） */
.voice_arrow{
	position: absolute;
	top: 210px;
	width: 40px;
	height: 40px;
	padding: 0;
	background-color: #0c4876;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.voice_arrow::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-35%, -50%);
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 11px solid #ffffff;
}

.voice_prev{
	left: 20px;
}

.voice_prev::before{
	transform: translate(-65%, -50%) scaleX(-1);
}

.voice_next{
	right: 20px;
}

.voice_arrow:hover{
	opacity: 0.8;
}

.voice_slider.is-static .voice_arrow{
	display: none;
}

/* 下の点 */
.voice_dots{
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 36px;
}

.voice_dots[hidden]{
	display: none;
}

.voice_dot{
	width: 9px;
	height: 9px;
	padding: 0;
	background-color: #ffffff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.voice_dot.active{
	background-color: #0c4876;
}

.voice_band .btn{
	margin-top: 40px;
}



/* ------ お知らせ ------ */
.info{
	padding: 110px 0 100px;
}

.info_head{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 20px 40px;
}

/* 種類で絞りこむボタン（js/news-filter.js が作る） */
.info_filter{
	display: flex;
	flex-wrap: wrap;
	gap: 12px 22px;
}

.info_filter_btn{
	min-width: 163px;
	min-height: 43px;
	padding: 6px 16px;
	font-size: 15px;
	font-weight: 500;
	color: #0c4876;
	background-color: #ffffff;
	border: 1px solid #0c4876;
	cursor: pointer;
}

.info_filter_btn.active{
	color: #ffffff;
	background-color: #0c4876;
}

.info_list{
	margin-top: 60px;
	border-top: 1px solid #b9c7d1;
}

.info_item{
	border-bottom: 1px solid #b9c7d1;
}

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

.info_date{
	flex-shrink: 0;
}

.info_category{
	flex-shrink: 0;
	min-width: 114px;
	padding: 1px 10px;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	color: #0c4876;
	background-color: #ffffff;
	border: 1px solid #0c4876;
}

.info_category:empty{
	display: none;
}

.info_title{
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.info_item a:hover{
	opacity: 0.65;
}



/* ------ よくある質問・採用情報（写真のバナー） ------ */
.banners{
	padding-bottom: 110px;
}

.banner_list{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 76px;
}

/* バナーが1つだけなら、真ん中に置く */
.banner:only-child{
	grid-column: 1 / -1;
	justify-self: center;
	width: calc((100% - 76px) / 2);
}

.banner{
	position: relative;
	overflow: hidden;
	background-color: #00425d;
}

.banner_img{
	display: block;
	width: 100%;
	aspect-ratio: 563 / 343;
	object-fit: cover;
	opacity: 0.6;
}

.banner_body{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	text-align: center;
}

.banner_en{
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
}

.banner_ja{
	margin-top: 10px;
	padding-top: 10px;
	font-size: 36px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.06em;
	border-top: 1px solid rgba(255, 255, 255, 0.7);
}

.banner .btn2{
	margin-top: 40px;
}



/* ------ お問い合わせ（水色の帯に白い箱） ------ */
.contact_band{
	padding: 86px 0;
	background-color: #d6ebf0;
}

.contact_box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	padding: 60px 110px;
	background-color: #ffffff;
}

.contact_box_address{
	margin-top: 40px;
	font-size: 15px;
	line-height: 1.7;
}

.contact_box_btns{
	display: flex;
	flex-direction: column;
	gap: 50px;
	flex-shrink: 0;
	width: 403px;
	max-width: 50%;
}

.btn_contact,
.btn_tel{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 78px;
	padding: 10px 40px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	border-radius: 40px;
}

.btn_contact{
	color: #ffffff;
	background: linear-gradient(90deg, #5bd0c8 0%, #38b5c9 100%);
}

.btn_contact::after{
	content: "";
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 14px solid #ffffff;
}

.btn_contact .icon_mail{
	width: 24px;
	height: 18px;
}

.btn_tel{
	font-size: 28px;
	letter-spacing: 0.08em;
	color: #32a0b7;
	background-color: #ffffff;
	border: 3px solid #4cc4c6;
}

.btn_tel .icon_tel{
	width: 28px;
	height: 28px;
}

.btn_contact:hover,
.btn_tel:hover{
	opacity: 0.8;
}





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

	.main_img img{
		height: 560px;
	}

	.service_item{
		padding: 36px 28px;
	}

	.service_name{
		font-size: 22px;
	}

	.contact_box{
		padding: 50px 50px;
	}
}





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

	.main_img img{
		height: 76vw;
		min-height: 280px;
		max-height: 560px;
	}

	.main_copy{
		top: auto;
		bottom: 18%;
		padding: 0 20px;
		transform: none;
	}

	.catchcopy{
		padding: 2px 8px;
		font-size: 18px;
		line-height: 1.9;
	}

	.greeting{
		padding: 60px 0 60px;
	}

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

	.greeting_body{
		display: contents;
	}

	.greeting .title{
		order: 1;
		width: 100%;
	}

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

	.greeting_name{
		order: 3;
		margin-top: 30px;
		font-size: 18px;
	}

	.greeting_text{
		order: 4;
		margin-top: 16px;
		font-size: 14px;
	}

	.greeting .btn_right{
		order: 5;
		width: 100%;
	}

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

	.service_lead{
		margin-top: 30px;
		font-size: 14px;
	}

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

	.service_item{
		padding: 22px 14px 24px;
	}

	.service_name{
		padding-left: 10px;
		font-size: 15px;
		border-left-width: 3px;
	}

	.service_icon{
		width: 84px;
		height: 84px;
		margin-top: 20px;
		background-size: 40px auto;
	}

	.service_item:nth-child(6n+3) .service_icon{
		background-size: 30px auto;
	}

	.service_item:nth-child(6n+4) .service_icon{
		background-size: 34px auto;
	}

	.service_item:nth-child(6n+5) .service_icon{
		background-size: 22px auto;
	}

	.service_item:nth-child(6n+6) .service_icon{
		background-size: 30px auto;
	}

	.service_text{
		margin-top: 18px;
		font-size: 12px;
		line-height: 1.6;
	}

	.voice_band{
		margin-top: 30px;
		padding-bottom: 50px;
		background: linear-gradient(#ffffff 0, #ffffff 120px, #d7ebf0 120px);
	}

	.voice_slider{
		padding: 0 48px;
	}

	.voice_list{
		gap: 16px;
	}

	.voice_item{
		flex-basis: 100%;
	}

	.voice_body{
		padding: 20px 22px 26px;
	}

	.voice_name{
		font-size: 16px;
	}

	.voice_text{
		font-size: 13px;
	}

	.voice_arrow{
		top: 90px;
		width: 32px;
		height: 32px;
	}

	.voice_prev{
		left: 8px;
	}

	.voice_next{
		right: 8px;
	}

	.voice_dots{
		margin-top: 24px;
	}

	.info{
		padding: 60px 0;
	}

	.info_filter{
		gap: 10px;
	}

	.info_filter_btn{
		min-width: 0;
		width: calc((100% - 20px) / 3);
		min-height: 34px;
		font-size: 12px;
	}

	.info_list{
		margin-top: 30px;
	}

	.info_item a{
		flex-wrap: wrap;
		gap: 4px 10px;
		padding: 16px 0;
		font-size: 13px;
	}

	.info_category{
		min-width: 80px;
		font-size: 11px;
	}

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

	.banners{
		padding-bottom: 60px;
	}

	.banner_list{
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.banner:only-child{
		width: 100%;
	}

	.banner_en{
		font-size: 16px;
	}

	.banner_ja{
		font-size: 24px;
	}

	.banner .btn2{
		margin-top: 24px;
	}

	.contact_band{
		padding: 40px 0;
	}

	.contact_box{
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
		padding: 36px 24px;
	}

	.contact_box_address{
		margin-top: 20px;
		font-size: 13px;
	}

	.contact_box_btns{
		gap: 20px;
		width: 100%;
		max-width: none;
	}

	.btn_contact,
	.btn_tel{
		min-height: 54px;
		font-size: 16px;
	}

	.btn_tel{
		font-size: 20px;
	}
}