@charset "UTF-8";
/* CSS Document */

#contents h1 { background-image: url(../img/flow_title.jpg); }

/* PC
------------------------------------------------------------------------------------*/
@media(min-width:768px) {
	
	#contentsInner > p:first-child { margin:36px 0px 16px; }
	
	#contentsInner section {
		width: 440px;
		border: #ccc solid 1px;
		margin: 20px 0px 0px 0px;
		padding: 22px 16px 24px;
	}
	
	#contentsInner section h2 {
		font-family: 'Montserrat', sans-serif;
		font-size: 24px;
		font-size: 2.4rem;
		line-height: 100%;
		text-align: center;
		margin-bottom: 24px;
	}
	
	/*#contentsInner section div h3 {
		width: 110px;
		color: #fff;
		font-size: 16px;
		font-size: 1.6rem;
		font-weight: bold;
		vertical-align: middle;
		display: table-cell;
	}*/
	
	#contentsInner section div {
		position: relative;
		margin: 28px 0px 42px;
		padding:13px 16px;
	}
	#contentsInner section div:last-of-type { margin-bottom: 0px; }
	
	#contentsInner section div:after {
		width: 100%;
		height: 10px;
		content: "";
		background: url(../../common/img/arrowD.gif) center no-repeat;
		background-size: 16px;
		display: inline-block;
		position: absolute;
		bottom: -26px;
		left: 0px;
		margin: 0px;
	}
	#contentsInner section div:last-of-type:after { display: none; }
	
	#contentsInner section div p {
		/*width: 300px;*/
		color: #fff;
		vertical-align: middle;
		/*display: table-cell;*/
		margin: 0 auto;
		text-align: center;
		font-weight: bold;
	}
	
	
	/* section1 */
	#contentsInner section:nth-of-type(1) { float: left; }
	#contentsInner section:nth-of-type(1) h2 { color: #c95244; }
	
	#contentsInner section:nth-of-type(1) div:nth-of-type(2) h3,
	#contentsInner section:nth-of-type(1) div:nth-of-type(6) h3 { color: #009f41; }
	
	#contentsInner section:nth-of-type(1) div:last-of-type h3 {
		width: 100%;
		text-align: center;
		display :block;
	}
	
	#contentsInner section:nth-of-type(1) div { background-color: #c95244; }
	
	#contentsInner section:nth-of-type(1) div:nth-of-type(2),
	#contentsInner section:nth-of-type(1) div:nth-of-type(6) {
		background: #ffffff;
		border: #009f41 solid 2px;
	}
	
	#contentsInner section:nth-of-type(1) div:nth-of-type(2),
	#contentsInner section:nth-of-type(1) div:nth-of-type(6) {
		background: #ffffff;
		border: #009f41 solid 2px;
	}
	
	#contentsInner section:nth-of-type(1) div:nth-of-type(2) p,
	#contentsInner section:nth-of-type(1) div:nth-of-type(6) p { color: #000; }
		
	/* section2 */
	#contentsInner section:nth-of-type(2) { float: right; }
	#contentsInner section:nth-of-type(2) h2 { color: #47538d; }
	
	#contentsInner section:nth-of-type(2) div:nth-of-type(2) h3,
	#contentsInner section:nth-of-type(2) div:nth-of-type(6) h3 { color: #009f41; }
	
	#contentsInner section:nth-of-type(2) div:first-of-type h3 {
		width: 100%;
		text-align: center;
		display :block;
	}
	
	#contentsInner section:nth-of-type(2) div { background-color: #47538d; }
	
	#contentsInner section:nth-of-type(2) div:nth-of-type(2),
	#contentsInner section:nth-of-type(2) div:nth-of-type(6) {
		background: #ffffff;
		border: #009f41 solid 2px;
	}
	
	#contentsInner section:nth-of-type(2) div:nth-of-type(2),
	#contentsInner section:nth-of-type(2) div:nth-of-type(6) {
		background: #ffffff;
		border: #009f41 solid 2px;
	}
	
	#contentsInner section:nth-of-type(2) div:nth-of-type(2) p,
	#contentsInner section:nth-of-type(2) div:nth-of-type(6) p { color: #000; }
}
	
	
/* スマホ
------------------------------------------------------------------------------------*/
@media(max-width:767px) {	
	
	#contentsInner > p:first-child { margin:20px 0px 6px; }
	#contentsInner > p + p { margin-bottom: -4px; }
	
	#contentsInner section {
		border: #ccc solid 1px;
		margin: 20px 0px 0px 0px;
		padding: 14px 12px 16px;
	}
	
	#contentsInner section h2 {
		font-family: 'Montserrat', sans-serif;
		font-size: 24px;
		font-size: 2.4rem;
		line-height: 100%;
		text-align: center;
		margin-bottom: 12px;
	}
	
	#contentsInner section div h3 {
		width: 70px;
		color: #fff;
		font-size: 14px;
		font-size: 1.4rem;
		font-weight: bold;
		vertical-align: middle;
		display: table-cell;
	}
	
	#contentsInner section div {
		position: relative;
		margin: 16px 0px 34px;
		padding:8px 10px;
	}
	#contentsInner section div:last-of-type { margin-bottom: 0px; }
	
	#contentsInner section div:after {
		width: 100%;
		height: 10px;
		content: "";
		background: url(../../common/img/arrowD.gif) center no-repeat;
		background-size: 16px;
		display: inline-block;
		position: absolute;
		bottom: -22px;
		left: 0px;
		margin: 0px;
	}
	#contentsInner section div:last-of-type:after { display: none; }
	
	#contentsInner section div p {
		color: #fff;
		vertical-align: middle;
		display: table-cell;
	}
	
	
	/* section1 */
	#contentsInner section:nth-of-type(1) h2 { color: #c95244; }
	
	#contentsInner section:nth-of-type(1) div:last-of-type h3 {
		width: 100%;
		text-align: center;
		display :block;
	}
		
	#contentsInner section:nth-of-type(1) div:nth-of-type(2) h3,
	#contentsInner section:nth-of-type(1) div:nth-of-type(6) h3 { color: #009f41; }
	
	#contentsInner section:nth-of-type(1) div { background-color: #c95244; }
	
	#contentsInner section:nth-of-type(1) div:nth-of-type(2),
	#contentsInner section:nth-of-type(1) div:nth-of-type(6) {
		background: #ffffff;
		border: #009f41 solid 2px;
	}
	
	#contentsInner section:nth-of-type(1) div:nth-of-type(2) p,
	#contentsInner section:nth-of-type(1) div:nth-of-type(6) p { color: #000; }
	
	
	/* section2 */
	#contentsInner section:nth-of-type(2) h2 { color: #47538d; }
	
	#contentsInner section:nth-of-type(2) div:first-of-type h3 {
		width: 100%;
		text-align: center;
		display :block;
	}
	
	#contentsInner section:nth-of-type(2) div:nth-of-type(2) h3,
	#contentsInner section:nth-of-type(2) div:nth-of-type(6) h3 { color: #009f41; }
	
	#contentsInner section:nth-of-type(2) div { background-color: #47538d; }
	
	#contentsInner section:nth-of-type(2) div:nth-of-type(2),
	#contentsInner section:nth-of-type(2) div:nth-of-type(6) {
		background: #ffffff;
		border: #009f41 solid 2px;
	}
	
	#contentsInner section:nth-of-type(2) div:nth-of-type(2) p,
	#contentsInner section:nth-of-type(2) div:nth-of-type(6) p { color: #000; }
}