@charset "UTF-8";

.sec_ttl{
	font-size: clamp(28px, 3.6vw, 36px);
	line-height: 1.5;
	text-align: center;
	margin-bottom: 50px;
	display: flex;
	flex-direction: column;
		.ttl_jp{
			font-weight: 700;
			font-size: clamp(24px, 2.6vw,36px);
			color: #707070;
		}
		.ttl_en{
			font-weight: 700;
			font-size: clamp(14px, 1.6vw, 16px);
			color: #004D91;
		}
}

.mv{
}
.slider_wrap{
	position: relative;
		.mv_ttl {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			/* left: 50%; */
			/* transform: translate(-50%, -50%); */
			/* top: calc(50% - 9.5%); */
			padding-bottom: 8.5%;
			color: #fff;
			pointer-events: none;
			.mv_ttl_en{
				font-weight: 700;
				font-size: clamp(54px, 5.5vw, 84px);
			}
			.mv_ttl_jp{
				font-weight: 700;
				font-size: clamp(18px, 1.8vw, 24px);
				margin-top: 1.2em;
			}
		}
}
.slider{
	margin-bottom: 0 !important;
	min-height: 500px; /* slick初期化前の高さを確保 */
		.slick-list {
			min-height: 500px; /* slick初期化前の高さを確保 */
		}
		.slick-list li{
			width: 100%;
			height: auto;
			aspect-ratio: 1920 / 680;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			/* max-height: 680px; */
			min-height: 500px;
		}
		.slick-list li.slider_01{
			background-image: url(../img/front/mv01.jpg);
		}
		.slick-list li.slider_02{
			background-image: url(../img/front/mv02.jpg);
		}
		.slick-list li.slider_03{
			background-image: url(../img/front/mv03.jpg);
		}
		.slick-list li.slider_04{
			background-image: url(../img/front/mv04.jpg);
		}
		.slick-list li.slider_05{
			background-image: url(../img/front/mv05.jpg);
		}
		.slick-dots {
			bottom: 19%;
		}
		.slick-dots li button:before {
			font-size: 12px;
			color: #fff;
			opacity: 1;
			transition: .3s ease;
		}
		.slick-dots li.slick-active button:before {
			opacity: 1;
			color: #E3190F;
		}
		.slick-dots li button:focus:before, .slick-dots li button:hover:before {
			opacity: 1;
			color: #E3190F;
		}
}



.news_wrap{
	background: #e4c834;
	/* height: 320px; */
	height: auto;
		.news_left{
			display: flex;
			flex-direction: column;
				.blue_btn{
					margin-top: auto;
				}
		}
		.news_right{
			
		}

		.sec_ttl{
			text-align: left;
		}
		.inner {
			display: flex;
			background-color: #fff;
			height: calc(100% + 80px);
			margin-top: -80px;
			position: relative;
			z-index: 1;
			border-radius: 50px 50px 0 0;
			padding: 5%;
		}
		.news_list{
			display: flex;
			flex-wrap: wrap;
			/* justify-content: space-between; */
			/* gap: 20px; */
			margin-left: 4.5%;
				a:hover{
					opacity: 0.7;
				}
		}
		.news_box{
			width: 23%;
				.news_info{
					display: flex;
					align-items: center;
					font-size: 16px;
					margin-top: 7px;
				}
				.news_img{
					width: 100%;
					height: auto;
					aspect-ratio: 222 / 137;
					background-size: cover;
					background-position: center;
					background-repeat: no-repeat;
				}
				.news_date{
					width: 80px;
					color: #707070;
				}
				.news_cat{
					min-width: 100px;
					text-align: center;
					color: #fff;
					background-color: #004D91; /* デフォルト色（紺、common.cssのクラスで上書き可能） */
					display: inline-block;
					padding: 0.2em 0.7em 0.3em;
					margin-left: 15px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					max-width: 100%;
				}
				.news_ttl{
					color: #707070;
					font-size: 16px;
					line-height: 1.5;
					font-weight: 400;
					margin-top: 10px;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
		}
		.news_box + .news_box{
			margin-left: 2.5%;
		}
}


/* 4個表示可能な幅（約1000px以上） - 222px固定 */
@media all and (min-width:1000px) {
	.news_wrap {
		.news_list{
			flex-wrap: nowrap;
			overflow: scroll;
		}
		.news_box{
			min-width: 222px;
		}
	}
}

@media all and (min-width:768px) and (max-width:999px) {
	.news_wrap {
		.news_list{
			flex-wrap: nowrap;
			overflow: scroll;
		}
		.news_box{
			min-width: 222px;
		}
		.news_info {
            flex-wrap: wrap;
        }
	}
}
@media all and (max-width:1366px) and (min-width:1360px) {
	.news_wrap {
        .news_list {
            margin-left: 3%;
        }
		.news_box + .news_box {
			margin-left: auto;
		}
    }
}
@media all and (max-width:767px) {
	.slider {
		min-height: 500px; /* slick初期化前の高さを確保（SP） */
		.slick-list {
			min-height: 500px; /* slick初期化前の高さを確保（SP） */
		}
		.slick-list li{
			aspect-ratio: 393 / 680;
			max-height: calc(100vh - 140px);
		}
		.slick-list li.slider_01{
			background-image: url(../img/front/mv01_sp.jpg);
		}
		.slick-list li.slider_02{
			background-image: url(../img/front/mv02_sp.jpg);
		}
		.slick-list li.slider_03{
			background-image: url(../img/front/mv03_sp.jpg);
		}
		.slick-list li.slider_04{
			background-image: url(../img/front/mv04_sp.jpg);
		}
		.slick-list li.slider_05{
			background-image: url(../img/front/mv05_sp.jpg);
		}
	}
	.slider_wrap {
		& .mv_ttl {
			padding-bottom: 0;
        	padding-top: 10%;
			.mv_ttl_en {
				font-size: clamp(38px, 5.5vw, 54px);
				text-align: center;
				line-height: 1.2;
			}
			.mv_ttl_jp {
				font-size: clamp(16px, 1.8vw, 24px);
				text-align: center;
				line-height: 1.4;
			}
		}
	}
	.news_wrap {
		.inner {
			flex-direction: column;

				.sec_ttl {
					text-align: center;
					margin-bottom: 20px;
				}

				.news_list {
					margin-left: 0;
					gap: 20px 3%;
				}
				.news_box {
					width: 48.5%;
						.news_ttl {
							font-size: 14px;
							margin-top: 7px;
						}
						.news_date {
							width: 65px;
						}
						.news_cat {
							min-width: calc(100% - 80px);
							margin-left: 10px;
							font-size: 13px;
							padding: 0.2em 0.3em 0.3em;
						}
						.news_info {
							font-size: 13px;
							margin-top: 7px;
						}
				}
				.news_box + .news_box {
					margin-left: 0;
				}
				.blue_btn {
					margin: 30px auto 10px;
				}
		}
	}
}

/* intro_sec
***************************************************************/
.intro_sec{
	background: #CCE7FF;
	padding-top: 85px;
	padding-bottom: 75px;
	overflow-y: hidden;
		.inner{
			position: relative;
		}
}

.intro_content{
	display: flex;
	align-items: center;
	gap: 10%;
}

.intro_text{
	flex: 1;
	position: relative;
	/* padding: 40px; */
	z-index: 2;
	max-width: 56%;
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: -10%;
			right: 0;
			bottom: 0;
			background: radial-gradient(
				ellipse at center,
				rgba(255, 255, 255, 0.9) 20%,
				rgba(255, 255, 255, 0.5) 50%,
				rgba(204, 231, 255, 0.3) 70%,  /* ← #CCE7FF に近い色で馴染ませ */
				transparent 100%
			);
			border-radius: 20px;
			z-index: -1;
			pointer-events: none;
			border-radius: 50%;
			width: 100%;
			height: auto;
			aspect-ratio: 1 / 1;
			transform: scale(1.1);
		}
		.intro_ttl{
			font-size: clamp(24px, 2.6vw, 36px);
			font-weight: 700;
			color: #002C53;
			line-height: 1.6;
		}

		.intro_desc{
			margin-top: 42px;
			font-size: clamp(14px, 1.6vw, 16px);
			font-weight: 700;
			line-height: 2.5;
			color: #2F2F2F;
		}
		.intro_desc p{
			/* margin-bottom: 0.5em; */
		}
}

.intro_images{
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 49%;
	max-width: 625px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.intro_img{
	width: 100%;
	/* border-radius: 10px; */
	/* overflow: hidden; */
	/* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); */
}

.intro_img img{
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}


/*--------------------PC--------------------*/
@media all and (min-width:768px) {
	.intro_content{
		flex-direction: row;
	}
}

@media all and (max-width:999px) {
	.intro_content{
		flex-direction: column;
		width: 100%;
	}
	.intro_text {
		z-index: 1;
		max-width: 625px;
		width: 100%;
	}
	.intro_images {
		top: initial;
    	transform: initial;
		position: relative;
		right: 0;
		width: 100%;
		max-width: 625px;
		margin-top: 5%;
	}
}

/*--------------------SP--------------------*/
@media all and (max-width:767px) {
	.intro_sec{
		padding-top: 50px;
		padding-bottom: 70px;
	}
	
	.intro_content{
		flex-direction: column;
		gap: 40px;
	}
	
	.intro_text{
		width: 100%;
	}
	
	.intro_images{
		width: 100%;
		max-width: 100%;
		margin-top: 0;
	}
}


/* sec01 - サービス・事業
***************************************************************/
.sec01{
	padding-top: 85px;
	padding-bottom: 75px;
	background: #fff url(../img/front/sec01_bg.jpg) center / cover no-repeat;
		.sec_ttl{
			.ttl_jp{
				color: #004D91;
			}
		}
}

.sec01_content{
	margin-top: 50px;
}

.tab_wrap{
	/* background: #004D91; */
	/* border-radius: 50px; */
	/* padding: 30px; */
}

.tab_buttons{
	display: flex;
	gap: 0;
	/* margin-bottom: 30px; */
}

.tab_btn{
	flex: 1;
	padding: 1em 20px;
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	border-radius: 50px 50px 0 0;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
}

.tab_btn:first-child{
	/* border-radius: 10px 0 0 0; */
	background: #004D91;
}

.tab_btn:last-child{
	/* border-radius: 0 10px 0 0; */
	background: #CCE7FF;
	color: #004D91;
}

.tab_btn.active{
	color: #fff;
	border-radius: 50px 50px 0 0;
}

.tab_btn[data-tab="individual"].active{
	background: #CCE7FF;
	color: #004D91;
}

.tab_contents{
	position: relative;
}

.tab_content{
	display: none;
	/* animation: fadeIn 0.3s ease; */
	background: #004D91;
	border-radius: 0 0 50px 50px;
	padding: 50px;
}

.tab_content.active{
	display: block;
}

.tab_content#individual.active{
	background: #CCE7FF;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.service_grid {
    /* display: grid;
    grid-template-columns: repeat(3, 1fr); */
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.service_item{
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16);
	transition: opacity 0.3s ease;
	width: calc((100% - 40px) / 3);
}

.service_item:hover{
	opacity: 0.7;
}

.service_item--txt{
	flex: 1;
}

.service_item--txt .service_txt1{
	font-size: clamp(16px, 1.8vw, 18px);
	line-height: 1.3;
	font-weight: 700;
	color: #707070;
}

.service_item--txt .service_txt2{
	font-size: 16px;
	font-weight: 700;
	color: #004D91;
	margin-top: 10px;
}

.service_icon--img{
	max-width: 84px;
	width: 40%;
	margin-left: 2%;
	flex-shrink: 0;
}

.service_icon--img img{
	width: 100%;
	height: auto;
	display: block;
}
@media (max-width: 979px) and (min-width:376px)  {
	.service_item {
		width: calc((100% - 20px) / 2);
	}
}

/*--------------------PC--------------------*/
@media all and (min-width:768px) {
	.service_grid{
		grid-template-columns: repeat(3, 1fr);
	}
	
	/* 個人のお客様タブ（5つのアイテム）: 2段目の2個を中央寄せ */
	#individual .service_item:nth-child(4){
		grid-column: 2;
	}
	
	#individual .service_item:nth-child(5){
		grid-column: 3;
	}
}

/*--------------------SP--------------------*/
@media all and (max-width:767px) {
	.sec01{
		padding-top: 70px;
		padding-bottom: 50px;
	}
	.tab_content {
		padding: 30px;
	}
	.tab_wrap{
		padding: 0;
		width: clamp(270px, 100%, 540px);
		margin-left: auto;
		margin-right: auto;
	}
	
	.tab_btn{
		font-size: 14px;
		padding: 12px 15px;
	}
	
	/* .service_grid{
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	} */
	.service_grid {
		gap: 20px;
		/* display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		flex-direction: column; */
	}
	.service_item{
		padding: 15px;
		height: auto;
		min-height: 100px;
		/* width: 100%; */
	}
	
	.service_icon--img{
		width: 24%;
		max-width: 60px;
	}
}
@media all and (max-width:375px) {
	.service_grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.service_item {
		width: 100%;
	}
}

/* sec02 - 会社概要
***************************************************************/
.sec02{
	padding-top: 120px;
	padding-bottom: 245px;
	background: #fff url(../img/front/sec02_bg.svg) center bottom / 110% auto no-repeat;
		.sec_ttl{
			.ttl_jp{
				color: #004D91;
			}
		}
}

.sec02_content{
	margin-top: 50px;
}

.company_grid {
    gap: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.company_item_wrap{
	width: 31%;
}
.company_item{
	background: #fff;
	/* border-radius: 10px; */
	height: 220px;
	padding: 30px 20px 30px 5%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16);
	transition: background 0.3s ease;
	width: 100%;
	/* min-height: 120px; */
}

/* .company_item--active{
	background: #004D91;
		.company_item--txt{
			.company_txt1{
				color: #fff;
			}
			.company_txt2{
				color: #fff;
			}
		}
} */

.company_item:hover{
	background: #3059ac;
		.company_item--txt{
			.company_txt1{
				color: #fff;
			}
			.company_txt2{
				color: #fff;
			}
		}
}

.company_item--txt{
	/* text-align: center; */
	width: 100%;
}

.company_item--txt .company_txt1{
	font-size: clamp(20px, 1.8vw, 24px);
	line-height: 1.3;
	font-weight: 700;
	color: #707070;
	transition: color 0.3s ease;
}

.company_item--txt .company_txt2{
	font-size: 16px;
	font-weight: 700;
	color: #004D91;
	margin-top: 10px;
	transition: color 0.3s ease;
}

/*--------------------PC--------------------*/
@media all and (min-width:768px) {
	.company_grid{
		grid-template-columns: repeat(3, 1fr);
	}
}

/*--------------------SP--------------------*/
@media all and (max-width:767px) {
	.sec02{
		padding-top: 50px;
		padding-bottom: 50px;
	}
	
	.company_grid{
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}
	.company_item_wrap{
        width: 47.5%;
	}
	
	.company_item {
        padding: 20px 15px;
        min-height: 100px;
        width: 100%;
		height: 140px;;
    }
}



/* recruit_sec
***************************************************************/
.recruit_sec{
	padding-top: 150px;
	padding-bottom: 140px;
		.recruit_btn{
			display: block;
		}
		.recruit_btn:hover{
			opacity: 0.7;
		}
}
/*--------------------PC--------------------*/
@media all and (min-width:768px) {}

/*--------------------SP--------------------*/
@media all and (max-width:767px) {
	.recruit_sec{
		padding-top: 70px;
		padding-bottom: 70px;
			.recruit_btn:hover{
				opacity: 0.7;
			}
	}
}






/* aaa
***************************************************************/

/*--------------------PC--------------------*/
@media all and (min-width:768px) {}

/*--------------------SP--------------------*/
@media all and (max-width:767px) {}


/* aaa
***************************************************************/

/*--------------------PC--------------------*/
@media all and (min-width:768px) {}

/*--------------------SP--------------------*/
@media all and (max-width:767px) {}


/* aaa
***************************************************************/

/*--------------------PC--------------------*/
@media all and (min-width:768px) {}

/*--------------------SP--------------------*/
@media all and (max-width:767px) {}