﻿/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

@charset   "UTF-8";
#procedure h2 {
	margin:				50px auto;
	font-size:			27px;
	font-weight:		bold;
}
#procedure h3 {
	width:				100%;
	margin:				30px auto;
	text-align:			left;
	font-size:			20px;
	font-weight:		bold;
}
#procedure p.subject {
	width:				70%;
	margin:				50px auto;
	text-align:			left;
	font-size:			16px;
	line-height:		23px;
}
#procedure section {
	width:				80%;
	max-width:			1440px;
	margin:				0 auto;
	padding:			50px 0 20px 0;
}
@media screen and ( max-width:768px ) {
	#procedure h2 {
		font-size:			20px;
	}
	#procedure h3 {
		font-size:			17px;
	}
	#procedure p.subject {
		width:				95%;
	}
	#procedure section {
		width:				95%;
		padding-top:		40px;
		padding-bottom:		0;
	}
}
@media screen and ( max-width:428px ) {
}

/****************************************************/
/* 手続きの流れエリア									*/
/****************************************************/
#procedure section#flow {
	width:				100%;
	max-width:			unset;
	background-color:	#e0e0e0;
}
#procedure section#flow h3 {
	width:				80%;
}
#flow .cont {
	width:				80%;
	max-width:			1440px;
	margin:				0 auto;
	display:			-webkit-box;
	display:			-ms-flexbox;
	display:			flex;
	-webkit-box-orient:			horizontal;
	-webkit-box-direction:			normal;
	    -ms-flex-flow:			row nowrap;
	        flex-flow:			row nowrap;
	-ms-flex-pack:	distribute;
	    justify-content:	space-around;
	padding:			0px 0 50px;
}
#flow .cont img.arr {
	width:				12px;
}
#flow .cont a {
	width:				100px;
	display:			-webkit-box;
	display:			-ms-flexbox;
	display:			flex;
	-webkit-box-orient:			vertical;
	-webkit-box-direction:			normal;
	    -ms-flex-flow:			column nowrap;
	        flex-flow:			column nowrap;
	-webkit-box-align:		center;
	    -ms-flex-align:		center;
	        align-items:		center;
	-webkit-box-pack:	center;
	    -ms-flex-pack:	center;
	        justify-content:	center;
}
#flow .cont a div.min {
	display:			none;
	width:				calc( 100% - 100px );
}
#flow .cont a div.min p:nth-child(1) {
	width:				100%;
	margin:				0;
	padding:			5px 0;
	border-bottom:		1px #555555 solid;
	text-align:			left;
	font-weight:		bold;
}
#flow .cont a div.min p:nth-child(2) {
	width:				100%;
	margin:				0;
	padding:			5px 10px;
	-webkit-box-sizing: 		border-box;
	        box-sizing: 		border-box;
	text-align:			left;
	font-size:			14px;
	line-height:		16px;
}
#flow .cont a span:nth-child(1) {
	width:				90px;
	height:				90px;
	display:			-webkit-box;
	display:			-ms-flexbox;
	display:			flex;
	-webkit-box-align:		center;
	    -ms-flex-align:		center;
	        align-items:		center;
	-webkit-box-pack:	center;
	    -ms-flex-pack:	center;
	        justify-content:	center;
	background-color:	white;
	border-radius:		50%;
	-webkit-transition:			.5s all ease 0s;
	-o-transition:			.5s all ease 0s;
	transition:			.5s all ease 0s;
}
#flow .cont a span:nth-child(2) {
	padding:			10px 0;
}
#flow .cont a.app:hover span:nth-child(1),
#flow .cont a.sur:hover span:nth-child(1),
#flow .cont a.res:hover span:nth-child(1),
#flow .cont a.sel:hover span:nth-child(1),
#flow .cont a.pln:hover span:nth-child(1),
#flow .cont a.sta:hover span:nth-child(1) {
	background-color:	#aaaaaa;
	-webkit-transform:			scale(1.1,1.1);
	    -ms-transform:			scale(1.1,1.1);
	        transform:			scale(1.1,1.1);
}
#flow .cont a img.ic01 {
	height:				50px;
}
#flow .cont a img.ic02 {
	height:				50px;
}
#flow .cont a img.ic03 {
	height:				50px;
}
#flow .cont a img.ic04 {
	height:				40px;
}
#flow .cont a img.ic05 {
	height:				50px;
}
#flow .cont a img.ic06 {
	height:				50px;
}
#flow .cont a img.ic07 {
	height:				50px;
}
@media screen and ( max-width:1023px ) {
	#flow .cont {
		width:				95%;
	}
}
@media screen and ( max-width:768px ) {
	#flow .cont {
		width:				80%;
		-webkit-box-orient:			vertical;
		-webkit-box-direction:			normal;
		    -ms-flex-flow:			column nowrap;
		        flex-flow:			column nowrap;
		-ms-flex-pack:	distribute;
		    justify-content:	space-around;
	}
	#flow .cont img.arr {
		-webkit-transform:	rotate(90deg);
		-ms-transform:			rotate(90deg);
		    transform:			rotate(90deg);
		margin:				10px 0 10px 38px;
	}
	#flow .cont a {
		width:				auto;
		-webkit-box-orient:			horizontal;
		-webkit-box-direction:			normal;
		    -ms-flex-flow:			row nowrap;
		        flex-flow:			row nowrap;
		-webkit-box-align:		center;
		    -ms-flex-align:		center;
		        align-items:		center;
		-webkit-box-pack:	justify;
		    -ms-flex-pack:	justify;
		        justify-content:	space-between;
	}
	#flow .cont a div.min {
		display:			block;
	}
	#flow .cont a span:nth-child(2) {
		display:			none;
	}
	#flow .cont a span:nth-child(2) br {
		display:			none;
	}
}
@media screen and ( max-width:428px ) {
	#flow .cont {
		width:				95%;
	}
}

/****************************************************/
/* 内容エリア											*/
/****************************************************/
#appli .cont,
#survey .cont,
#result .cont,
#select .cont,
#plan .cont,
#start .cont {
	width:				100%;
/*border:1px red solid;*/
}
#appli .cont p,
#survey .cont p,
#result .cont p,
#select .cont p,
#plan .cont p,
#start .cont p {
	width:				95%;
	margin:				0 auto;
	text-align:			left;
}
#appli .cont p:nth-child(1),
#survey .cont p:nth-child(1),
#result .cont p:nth-child(1),
#select .cont p:nth-child(1),
#plan .cont p:nth-child(1),
#start .cont p:nth-child(1) {
	padding:			0 0 20px 0;
	-webkit-box-sizing:			border-box;
	        box-sizing:			border-box;
	font-size:			18px;
}
#appli .cont p:nth-child(n+2),
#survey .cont p:nth-child(n+2),
#result .cont p:nth-child(n+2),
#select .cont p:nth-child(n+2),
#plan .cont p:nth-child(n+2),
#start .cont p:nth-child(n+2) {
	padding:			5px 0;
	-webkit-box-sizing:			border-box;
	        box-sizing:			border-box;
	text-indent:		-1em;
	padding-left:		1em;
}
@media screen and ( max-width:768px ) {
	#appli .cont p:nth-child(1),
	#survey .cont p:nth-child(1),
	#result .cont p:nth-child(1),
	#select .cont p:nth-child(1),
	#plan .cont p:nth-child(1),
	#start .cont p:nth-child(1) {
		font-size:			17px;
	}
}
