@charset "UTF-8";
/* CSS Document */
.kv{
	position: relative;
	background-color: #dceaf4;
	width: 100%;
	overflow: hidden;
}
.kv-left{
	position: absolute;
	z-index: 1;
}
.kv-right{
	position: absolute;
	z-index: 1;
}
.kv-copy {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.kv-copy img {
	height: auto;
}
.frp,.water{
	position: relative;
}
.frp h2,
.water h2{
	color:#0068b7;
	font-weight: 700;
}
.frp-jigyo{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	position: relative;
}
.item-list{
	display: flex;
	flex-wrap: wrap;
}
.item-list li figure{
	overflow: hidden;
	border-radius: 20px;
}
.item-list li p{
	color:#0068b7;
	font-weight: 500;
}
.item-list li h3{
	font-weight: 700;
	position: relative;
}
.item-list li h3::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border:2px solid #0068b7;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transiton:0.3s all ease;
	background: #fff;
}
.item-list li h3::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 8px; /* 丸の中に収まるように調整 */
	transform: translateY(-50%) rotate(-45deg);
	width: 7px;
	height: 7px;
	border-right: 2px solid #0068b7;
	border-bottom: 2px solid #0068b7;
	transiton:0.3s all ease;
}
.item-list li a:hover figure img{
	transform: scale(1.1);
}
.item-list li a:hover h3::before{
	background: #0068b7;
}
.item-list li a:hover h3::after{
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}
.water{
	background: #e6f3f4;
}
.water-jigyo{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
}
.water-v figure{
	overflow: hidden;
	aspect-ratio: 98/ 67;
}
.water-block ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.topics{
	background: #f5f5f5;
}
.topics h2{
	text-align: center;
	font-weight: 700;
	color:#0068b7;
}
.topicbox{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.topicbox a{
	background: #fff;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border-radius: 20px;
	overflow: hidden;
	position: relative;
}
.topicbox h3{
	font-weight: 700;
	transition: 0.3s all ease;
}
.topicbox a:before{
	content:"";
	position: absolute;
	display: block;
	border-right:2px solid #0068b7;
	border-top:2px solid #0068b7;
	transform: rotate(45deg);
	width:10px;
	height: 10px;
}
.topicbox a:after{
	content:"READ MORE";
	line-height: 1;
	color: #0068b7;
	font-weight: 500;
	position: absolute;
	display: block;
	transition: 0.3s all ease;
}
.strength{
	background: #0068b7;
}
.strength h2{
	color:#fff;
	text-align: center;
	font-weight: 700;
}
.strength h2 span{
	display: block;
}
.strength ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}
.strength ul li{
	background: #fff;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
}
.strength ul li h3{
	text-align: center;
	line-height: 1.5;
	color: #0068b7;
	font-weight: 700;
}
.strength ul li p{
	flex-grow:1;
}
.news h2{
	font-weight: 700;
	line-height: 1.2;
}
.news h2 span{
	display: block;
	color:#0068b7;
	font-size: 100%;
}
.newsbox{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.newsbox ul{
	border-top:1px solid #666;
	border-bottom: 1px solid #666;
	overflow-y: scroll;
}
.newsbox ul li{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	transition: 0.3s all ease;
}
.newsbox ul li h3{
	font-weight: 700;
}
.newsbox ul li a{
	font-weight: 700;
	text-decoration: underline;
	color:#0068b7;
}
.newsbox ul li:not(:last-child){
	border-bottom: 1px solid #ccc;
}
.under{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.under a{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.under a>div{
	background: rgba(255,255,255,0.8);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	transition: 0.3s all ease;
}
.under a>div h2{
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}
.under a>div h2 span{
	color:#0068b7;
	display: block;
}
.under a .more{
	text-align: center;
	color:#fff;
	background: rgba(0,104,183,0.7);
	border-radius: 25px;
	position: relative;
	border: 2px solid rgba(0,104,183,0.7);
	transition: 0.3s all ease
}
.under a:hover .more{
	color:#0068b7;
	background: #fff;
	position: relative;
}
.under a .more:after{
	content:"";
	position: absolute;
	display: block;
	border-right:2px solid #fff;
	border-top:2px solid #fff;
	transform: rotate(45deg);
	width:10px;
	height: 10px;
	transition: 0.3s all ease
}
.under a:hover .more:after{
	border-right:2px solid rgba(0,104,183,0.7);
	border-top:2px solid rgba(0,104,183,0.7);
}
.under .faq{
	background: url("../img/top/under-faq.jpg");
	background-size: cover;
}
.under .about{
	background: url("../img/top/under-about.jpg");
	background-size: cover;
}
.under .recruit{
	background: url("../img/top/under-recruit.jpg");
	background-size: cover;
}
@media only screen and (min-width: 767.99px),print {
	.kv{
		aspect-ratio: 144 / 55;
	}
	.kv-left{
		width:45%;
		top:-10%;
		left:-15%;
	}
	.kv-right{
		width:38%;
		bottom:-10%;
		right:-8%;
	}
	.kv-copy img {
		max-width: 625px;
		margin-bottom: 20px;
	}
	.frp,.water{
		margin: 140px auto;
	}
	.frp h2,
	.water h2{
		font-size: 250%;
	}
	.frp-jigyo{
		margin-top: -15%;
	}
	.frp-jigyo figure{
		width:48%;
	}
	.frp-jigyo div{
		width:48%;
	}
	.item-list{
		gap:3%;
	}
	.item-list li{
		width:22.75%;
		margin-top: 60px;
	}
	.item-list li p{
		font-size: 87.5%;
		margin-top: 20px;
	}
	.item-list li h3{
		padding-right: 40px;
	}
	.water-v{
		width:52%;
		margin-top: -50px;
		margin-right: -4%;
	}
	.water-v figure{
		border-radius: 50px;
	}
	.water-block{
		width:48%;
		padding: 50px 0;
	}
	.water-block ul{
		margin-bottom: -150px;
	}
	.water-block ul li{
		width:46%;
	}
	.topics{
		padding:60px 0;
	}
	.topics h2{
		font-size: 140%;
	}
	.topicbox{
		margin-top: 30px;
	}
	.topicbox a{
		width:48%;
	}
	.topicbox h3{
		font-size:115%;
		padding-left: 20px;
	}
	.topicbox a:before{
		bottom:22px;
		right:35%;
	}
	.topicbox a:after{
		bottom:20px;
		right:38%;
	}
	.topicbox a:hover h3{
		padding-left: 40px;
	}
	.topicbox a:hover:after{
		right:37%;
	}
	.topicbox figure{
		width:30%;
	}
	.strength{
		padding: 60px 0;
	}
	.strength h2{
		font-size:120%;
	}
	.strength ul li{
		width:31%;
		padding:30px;
		margin: 20px 0;
	}
	.strength ul li h3{
		font-size: 120%;
	}
	.strength ul li p{
		margin: 20px auto;
	}
	.news{
		padding: 100px 0;
	}
	.news h2{
		font-size: 120%;
		width: 20%;
	}
	.newsbox ul{
		width: 80%;
		height:300px;
	}
	.newsbox ul li{
		padding: 20px;
	}
	.newsbox ul li span{
		width:15%;
	}
	.newsbox ul li div{
		width:85%;
	}
	.under a{
		width: 33.3333%;
		aspect-ratio: 8 / 5;
	}
	.under a>div{
		width:80%;
		height: 80%;
	}
	.under a:hover>div{
		width:85%;
		height: 85%;
	}
	.under a>div h2{
		font-size: 140%;
		line-height: 1.4;
		text-align: center;
	}
	.under a .more{
		margin-top: 10px;
		padding: 10px 50px;
		border-radius: 25px;
	}
	.under a .more:after{
		bottom:39%;
		right:20px;
	}
	.under a:hover .more:after{
		right:15px;
	}
}
@media only screen and (max-width: 767.98px) {
	.kv{
		aspect-ratio: 1 / 1.2;
	}
	.kv-left{
		width:60%;
		top:-5%;
		left:-10%;
	}
	.kv-right{
		width:60%;
		bottom:-5%;
		right:-10%;
	}
	.kv-copy img {
		max-width: 80%;
		margin-bottom: 20px;
	}
	.kv-copy p{
		max-width: 80%;
		text-align: justify;
	}
	.kv-copy p br{
		display: none;
	}
	.frp{
		margin: 40px auto;
	}
	.frp,.water{
		margin: 40px auto 0;
	}
	.frp h2,
	.water h2{
		font-size: 150%;
	}
	.frp-jigyo figure{
		display: none;
	}
	.frp-jigyo div{
		width:100%;
	}
	.item-list{
		gap:4%;
	}
	.item-list li{
		width:48%;
		margin-top: 60px;
	}
	.item-list li p{
		font-size: 87.5%;
		margin-top: 20px;
	}
	.item-list li h3{
		padding-right: 40px;
		font-size: 85%;
	}
	.water-v figure{
		display: none;
	}
	.water-block{
		width:100%;
		padding: 50px 0;
	}
	.water-block ul li{
		width:48%;
	}
	.topics{
		padding:60px 0;
	}
	.topics h2{
		font-size: 140%;
	}
	.topicbox{
		margin-top: 30px;
		gap:40px;
	}
	.topicbox a{
		width:100%;
	}
	.topicbox h3{
		padding-left: 20px;
	}
	.topicbox a:before{
		bottom:25px;
		right:30%;
	}
	.topicbox a:after{
		font-size: 70%;
		bottom:20px;
		right:33%;
	}
	.topicbox a:hover h3{
		padding-left: 40px;
	}
	.topicbox a:hover:after{
		right:32%;
	}
	.topicbox figure{
		width:25%;
	}
	.strength{
		padding: 60px 0;
	}
	.strength h2{
		font-size:120%;
		line-height: 1.5;
	}
	.strength h2 span{
		font-size:80%;
	}
	.strength ul li{
		width:100%;
		padding:40px;
		margin: 20px 0;
	}
	.strength ul li h3{
		font-size: 120%;
	}
	.strength ul li p{
		margin: 20px auto;
	}
	.news{
		padding: 60px 0;
	}
	.news h2{
		font-size: 120%;
		width: 100%;
		text-align: center;
		margin-bottom: 20px;
	}
	.newsbox ul{
		width: 100%;
		height: 400px;
	}
	.newsbox ul li{
		padding: 20px;
	}
	.newsbox ul li div{
		width:100%;
	}
	.newsbox ul li div h3{
		margin-bottom: 15px;
		line-height: 1.5;
	}
	.newsbox ul li a p{
		width:100%;
	}
	.under a{
		width: 100%;
		aspect-ratio: 8 / 5;
	}
	.under a>div{
		width:80%;
		height: 80%;
	}
	.under a:hover>div{
		width:85%;
		height: 85%;
	}
	.under a>div h2{
		font-size: 140%;
		line-height: 1.4;
		text-align: center;
	}
	.under a .more{
		margin-top: 10px;
		padding: 10px 50px;
		border-radius: 50px;
	}
	.under a .more:after{
		bottom:39%;
		right:20px;
	}
	.under a:hover .more:after{
		right:15px;
	}
}