@charset "utf-8";
/*メイン画像エリア*/
#main_area{position:relative;height: 451px;margin-bottom:20px;}
#main_area > div{
	position: absolute;
    left: 50%;
    width: calc(100vw - 70px);
    height: 451px;
    transform: translateX(-50%);
    border-radius: 30px;
}
#main_area div figure{
	border-radius: 30px;
	width: 100%;
	height: 100%;
	background-image: url("../images/first/main.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#main_area p{
	white-space: nowrap;
	position: absolute;
	bottom:15%;
	left:5%;
	font-size: 2.5rem;
	letter-spacing: 0.3vw;
	font-weight: 500;
	color:#FFF;
}
/*パンくず*/
#pankuzu > ul{
	font-size:16px;
	width: 95%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
#pankuzu li{
	color: #666666;
	letter-spacing: 1px;
	line-height: 120%;
}
#pankuzu li:not(:last-child)::after{
	content: '>';
	width: 25px;
	height: 25px;
	padding: 0 20px;
}
/*流れ*/
.flow li{position: relative;display:flex;align-items: flex-start;justify-content: space-between; }
.flow li >img{width: 160px;}
.flow li:not(:last-child)::after{
	content: "";
    display: block;
    position: absolute;
    left: 80px;
    top: 180px;
    bottom: 30px;
    width: 1px;
    background: -webkit-linear-gradient(top, rgba(49, 62, 91, 1) 0, rgba(49, 62, 91, 1) 4px, rgba(49, 62, 91, 0) 4px);
    background: linear-gradient(to bottom, rgba(49, 62, 91, 1) 0, rgba(49, 62, 91, 1) 4px, rgba(49, 62, 91, 0) 4px);
    background-repeat: repeat-y;
    background-position: left top;
    background-size: 1px 7px;
}
.imgR{display:flex; justify-content: flex-end;align-items: flex-start;}
.imgR img{order:2; max-width:320px; width:100%; height: auto;border-radius: 15px;}
.imgR div{order:1; width:calc(100% - 380px); padding:15px;margin-bottom: 80px;}
.imgR h3{margin-bottom:15px;}
.imgR a img{padding:15px 0;}

/*よくある質問*/
.faq div{border-bottom:2px solid #04ade5; padding:20px 0;}
.faq dt::before{content:"Q";margin-right:1em;}
.faq dd::before{content:"A";font-size:22px;color:#04ade5;display: inline-block;margin-left:1.5em;}
.faq dd{ padding:15px 0 15px 2em; text-indent:-2em;}


/* レスポンシブ
------------------------------------------------------------*/

/* 1250px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1250px){
	#main_area > div{
		left: 50%;
		width: 100%;
		transform: translateX(-50%);
		padding:0 2vw;
	}
	#main_area div figure{
		background-position:top 0px left 80%;
	}
	#main_area p{
		font-size: 2.0rem;
	}
	/*流れ*/
	.flow li >img{width: 130px;}
	.flow li:not(:last-child)::after{
		left: 65px;
		top: 150px;
		bottom: 30px;
	}
	.imgR img{max-width:250px;}
	.imgR div{width:calc(100% - 280px);}
}
/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	body {min-width: 980px!important;}

}

/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
	body {min-width: 718px!important;}
	#main_area,#main_area > div{height: 300px;}
	#main_area div figure{
		border-radius: 20px;
		background-image: url("../images/first/main_tab.webp");
	}
	#main_area p{
		bottom:25%;
		left:5%;
		letter-spacing: 0.3vw;
		text-shadow: 2px 2px 5px #333;
	}

	/*流れ*/
	.flow{padding:0 !important;} 
	.flow li{position: static;display:block; border-bottom: 2px solid #04ade5;margin-bottom: 30px;}
	.flow li >img{width: 80px;}
	.flow li:not(:last-child)::after{display: none;}
	.imgR{display: block;}
	.imgR img{display: block; max-width: 320px;margin:auto;border-radius: 10px;}
	.imgR div{width:100%; padding:15px;margin-bottom: 30px;}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
    body {min-width: inherit!important;width: 100%;}
	#main_area,#main_area > div{height: 300px;}
	#main_area p{
		bottom:15%;
		left:50%;
		transform: translateX(-50%);
		font-size: 1.25rem;
		font-weight: bold;
		letter-spacing:2px;
	}
	#main_area div figure{
		border-radius: 20px;
		background-image: url("../images/first/main_sp.webp");
	}
	/*流れ*/
	.imgboxR img{order:1; max-width:360px; width:100%;margin:0 auto 15px;}
	.imgboxR div{order:2; padding:0px;}
	#pankuzu > ul{font-size:.875em;}
}