@charset "UTF-8";
/*-----------------------------------
	base
-----------------------------------*/
@media screen and (max-width: 840px) {
}
@media screen and (max-width: 640px) {
}
/*-----------------------------------

	mainvisual_block

-----------------------------------*/
#mainvisual_block{
	position: relative;
	z-index: 1;
	height: 100vh;
}
#mainvisual_block::before,
#mainvisual_block::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
#mainvisual_block::before{
	background: rgba(0, 0, 0, 0.15);
	z-index: 2;
}
#mainvisual_block::after{
	background: url("../img/index/mv_txt.svg")no-repeat center/contain;
	z-index: 3;
}
#mainvisual_block .swiper{
	height: 100%;
}
#mainvisual_block .swiper-slide img{
	object-fit: cover;
}
@media screen and (max-width: 640px) {
	#mainvisual_block{
		margin: 132px auto 0;
	}
	#mainvisual_block::after{
	    background: url("../img/index/sp/mv_txt.svg")no-repeat center/contain;
	    z-index: 3;
	}
}
@media screen and (max-width: 640px){
	#mainvisual_block{
		margin: 106px auto 0;
	}
}

/*-----------------------------------

	top_box

-----------------------------------*/
.top_box{
	padding: 140px 0 0;
	position: relative;
}
.top_box .scroll{
	position: absolute;
	top: 15px;
	right: 14%;
	color: #888888;
	font-weight: 400;
	font-size: 21px;
}
.top_box .scroll::before{
	content: "";
	position: absolute;
	top: 43px;
	left: 0;
	right: 0;
	margin: auto;
	background: #888888;
	width: 1px;
	height: 480px;
}
.top_box .scroll::after{
	content: "";
	position: absolute;
	top: 517px;
	right: 46%;
	background: #888888;
	width: 1px;
	height: 7px;
	transform: rotate(30deg);
}

.top_box .top_txt{
	font-size: min(16.4vw, 197px);
	font-weight: 700;
	line-height: 1.1;
}
@media screen and (max-width: 870px){
	.top_box .scroll::before{
		height: 380px;
	}
	.top_box .scroll::after{
		top: 417px;
	}
}
@media screen and (max-width: 640px) {
	.top_box{
		padding: 88px 0 0;
	}
	.top_box .scroll{
		top: -230px;
		z-index: 5;
		color: #fff;
		right: 17%;
		padding-bottom: 103%;
	}
	.top_box .scroll::before{
		background: #231815;
		height: 80%;
	}
	.top_box .scroll::after{
		background: #231815;
		top: 86%;
	}
	
	.top_box .scroll .line{
		content: "";
		position: absolute;
		top: 43px;
		left: 0;
		right: 0;
		margin: auto;
		width: 1px;
		height: 187px;
		background: #fff;
	}
	
	.top_box .top_txt{
		font-size: min(15.9vw, 99px);
		max-width: 505px;
		width: 100%;
        margin: auto;
	}
}
@media screen and (max-width: 560px){
	.top_box .scroll::after{
		top: 87%;
	}
}
@media screen and (max-width: 450px) {
	.top_box .scroll::before{
		height: 95%;
	}
	.top_box .scroll::after{
		top: 103%;
	}
}
@media screen and (max-width: 415px) {
	.top_box .scroll::after{
		top: 104%;
	}
}

/*-----------------------------------

	message_block

-----------------------------------*/
#message_block{
	padding: 172px 0 0;
}
.sub_ttl{
	text-align: center;
	font-size: 34px;
	font-weight: 400;
	margin: 30px auto 0;
}
#message_block .prf_box{
	gap: 20px;
	margin: 130px auto 0;
}
#message_block .prf_box .img_box{
	width: 313px;
}
#message_block .prf_box .txt_box{
	
}
#message_block .prf_box .txt_box .position{
	font-size: 27px;
}
#message_block .prf_box .txt_box .name{
	font-size: 47px;
}
#message_block .prf_box .txt_box .kana{
	font-size: 21px;
}
#message_block .txt{
	margin: 50px auto 80px;
	text-align: center;
	line-height: 2;
}
#message_block .message_list{
	gap: 40px;
	margin: 50px auto 0;
	align-items: stretch;
}
#message_block .message_list li{
	width: calc((100% - 120px) / 4);
	padding: 25px;
	box-sizing: border-box;
	text-align: center;
	font-weight: 700;
	color: #745E9E;
	border: 3px solid #745E9E;
	border-radius: 15px;
}
#message_block .message_list li .list_ttl{
	font-size: 37px;
	margin: 0 auto 10px;
}
#message_block .message_list li .list_txt{
	font-size: 24px;
	line-height: 1.5;
}

@media screen and (max-width: 1050px) {
	#message_block .message_list{
		gap: 30px;
	}
	#message_block .message_list li{
		width: calc((100% - 30px) / 2);
	}
}
@media screen and (max-width: 840px) {
}
@media screen and (max-width: 640px) {
	#message_block{
		padding: 70px 0 0;
	}
	.sub_ttl{
		font-size: 27px;
	}
	#message_block .prf_box{
		margin: 45px auto 0;
		gap: 25px;
		flex-direction: column;
	}
	#message_block .prf_box .img_box{
		max-width: 346px;
		width: 100%;
		margin: auto;
	}
	#message_block .txt{
		text-align: left;
	}
	
	#message_block .message_list li .list_ttl{
		font-size: 42px;
	}
	#message_block .message_list li .list_txt{
		font-size: 28px;
	}
}
@media screen and (max-width: 550px){
	#message_block .message_list{
		gap: 20px;
	}
	#message_block .message_list li{
		width: calc((100% - 20px) / 2);
		padding: 15px;
	}
	#message_block .message_list li .list_ttl{
		font-size: 35px;
	}
	#message_block .message_list li .list_txt{
		font-size: 22px;
	}
}
@media screen and (max-width: 450px){
	.sub_ttl{
		font-size: 20px;
		margin: 25px auto 0;
	}
	#message_block .prf_box{
		margin: 35px auto 0;
	}
	#message_block .txt{
		margin: 35px auto 0;
	}
	#message_block .message_list{
		margin: 35px auto 0;
	}
	#message_block .message_list li{
		width: 100%;
	}
}

/*-----------------------------------

	step_block

-----------------------------------*/
#step_block{
	padding: 165px 0 0;
}
#step_block .step_list_wrap{
	gap: 55px;
	align-items: flex-start;
	margin: 60px auto 0;
}
#step_block .step_list_wrap .list_box{
	width: calc((100% - 55px) / 2);
}
#step_block .step_list_wrap .list_box .list_ttl{
	font-size: 37px;
	font-weight: 700;
	text-align: center;
	margin: 0 auto 20px;
}
#step_block .step_list_wrap .list_box .list{
	border: 1px solid #B4B4B5;
	position: relative;
	align-items: stretch;
}
#step_block .step_list_wrap .list_box .list:not(:last-child){
	margin-bottom: 40px;
}
#step_block .step_list_wrap .list_box .list:not(:last-child)::before{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -30px;
	margin: auto;
	width: 16px;
	height: 14px;
	background: #000;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
}
#step_block .step_list_wrap .list_box .list .left_txt,
#step_block .step_list_wrap .list_box .list .right_txt{
	padding: 12px 0;
	text-align: center;
	font-size: 30px;
	box-sizing: border-box;
}
#step_block .step_list_wrap .list_box .list .left_txt{
	background: #B4B4B5;
	color: #fff;
	width: 32%;
}
#step_block .step_list_wrap .list_box .list .right_txt{
	color: #000;
	width: 68%;
}
#step_block .step_list_wrap .list_box .list .right_txt .wide{
	transform: scaleX(0.8);
	/*white-space: nowrap;*/
	display: inline-block;
	margin-left: -5%;
}

@media screen and (max-width: 840px) {
	#step_block .step_list_wrap{
		gap: 80px;
		flex-direction: column;
	}
	#step_block .step_list_wrap .list_box{
		width: 100%;
	}
}
@media screen and (max-width: 640px) {
	#step_block{
		padding: 80px 0 0;
	}
	#step_block .step_list_wrap .list_box .list:not(:last-child){
		margin-bottom: 45px;
	}
	#step_block .step_list_wrap .list_box .list:not(:last-child)::before{
		bottom: -30px;
	}
}
@media screen and (max-width: 450px){
	#step_block .step_list_wrap{
		margin: 35px auto 0;
		gap: 45px;
	}
	#step_block .step_list_wrap .list_box .list .left_txt,
	#step_block .step_list_wrap .list_box .list .right_txt{
		font-size: 20px;
	}
}










