@charset "utf-8";

/* メインイメージ
******************************************************************************************** */

#main_image {
	width:100%;
	min-height:200px;
	background-image: url(../faq/images/main_image_back.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size:cover;
	clear:both;
}

#main_image h1 {
	color:#FFFFFF;
	font-size:3.6rem;
	line-height:200px;
	text-align:center;
	font-family:"游ゴシック",YuGothic,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","メイリオ","Meiryo",sans-serif;
}

/* IE11用 */
_:-ms-fullscreen, :root #main_image h1 {
	font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","メイリオ","Meiryo",sans-serif;
}


/* 新規モニター登録
******************************************************************************************** */

main #flow {
	width:100%;
	background-color:#FFFFFF;
	overflow:hidden;
}

main #flow h2 {	
	font-size:3.0rem;
	color:#333333;
	text-align:center;
	font-family:"游ゴシック",YuGothic,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","メイリオ","Meiryo",sans-serif;
	margin: 50px 0px;
}

/* IE11用 */
_:-ms-fullscreen, :root main #flow h2 {
	font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","メイリオ","Meiryo",sans-serif;
}

main #flow .inner {
	width:1100px;
	padding:0px 40px 0px 40px;
	background-color:#FFFFFF;
	margin:0px auto 0px auto;
	overflow:hidden;
	box-sizing: border-box;
}

main #flow p {
	color:#333333;
	font-size:1.8rem;
	line-height:180%;
}

main #flow .flow {
	width:234px;
	min-height:275px;
	margin:40px 28px 0px 0px;
	float:left;
	border:solid 1px #CCCCCC;
	box-sizing: border-box;
	text-align:center;
}

main #flow .flow:last-child {
	margin:40px 0px 0px 0px;
}

main #flow .flow img.step {
	margin-top:-40px;
}

main #flow .flow img.sub {
	margin-bottom:15px;
}

main #flow .flow h3 {
	font-size:1.6rem;
	margin:15px 0px;
	min-height:50px;
}

main #flow .flow p {
	text-align:left;
	font-size:1.4rem;
	margin:15px;
}

main #flow .entry a {
	font-family:"游ゴシック",YuGothic,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","メイリオ","Meiryo",sans-serif;
	font-weight:bold;
	font-size:2.2rem;
	text-align:center;
	display:block;
	width:400px;
	line-height:70px;
	margin:50px auto 50px auto;
	background-color:#c42966;
	color:#FFFFFF;
	border:solid 2px #c42966;
	box-sizing: border-box;
	cursor: pointer;
	transition:all .3s;
	position:relative;
	box-sizing: border-box;
	text-decoration:none;
}

/* IE11用 */
_:-ms-fullscreen, :root main #flow .entry a {
	font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","メイリオ","Meiryo",sans-serif;
}

main #flow .entry a:hover,
main #flow .entry a:focus {
	background-color:#FFFFFF;
	color:#c42966;
	border:solid 2px #c42966;
	text-decoration:none;
}


/* モニター登録後の流れ
******************************************************************************************** */

main #flow2 {
	width:100%;
	background-color:#cbecfb;
	overflow:hidden;
}

main #flow2 h2 {	
	font-size:3.0rem;
	color:#333333;
	text-align:center;
	font-family:"游ゴシック",YuGothic,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","メイリオ","Meiryo",sans-serif;
	margin: 50px 0px;
}

/* IE11用 */
_:-ms-fullscreen, :root main #flow2 h2 {
	font-family:"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","メイリオ","Meiryo",sans-serif;
}

main #flow2 .inner {
	width:1100px;
	padding:0px 40px 0px 40px;
	margin:0px auto 0px auto;
	box-sizing: border-box;
	overflow:hidden;
}

main #flow2 p {
	color:#333333;
	font-size:1.8rem;
	line-height:180%;
}

main #flow2 .flow {
	width:234px;
	min-height:470px;
	margin:40px 28px 40px 0px;
	float:left;
	box-sizing: border-box;
	text-align:center;
	background-color:#FFFFFF;
}

main #flow2 .flow:last-child {
	margin:40px 0px 0px 0px;
}

main #flow2 .flow img.step {
	margin-top:-40px;
}

main #flow2 .flow img.sub {
	margin-bottom:15px;
}

main #flow2 .flow h3 {
	font-size:1.6rem;
	margin:15px 0px;
}

main #flow2 .flow_reward h3 {
	font-size:2.0rem;
	margin:15px 0px;
	text-align:left;
}

main #flow2 .flow p {
	text-align:left;
	font-size:1.4rem;
	margin:15px;
}

main #flow2 .flow_reward p {
	text-align:left;
	font-size:1.4rem;
	margin:15px 0px;
}

main #flow2 .flow .large {
	font-size:1.8rem;
	font-weight:bold;
}

main #flow2 .flow .small {
	font-size:1.2rem;
}

main #flow2 .flow .inquiry {
	background-color:#E9E9E9;
	padding:10px 20px;
}

main #flow2 .flow_reward {
	clear:both;
	width:500px;
	margin:40px auto 40px auto;
	box-sizing: border-box;
	text-align:center;
	position:relative;
}

main #flow2 .flow_reward:before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  margin-left: -80px;
  border: 80px solid transparent;
  border-top: 40px solid #1d7cc1;
}

main #flow2 .flow_reward img {
	padding:30px 0px 0px 0px;
	float:left;
	width:35%;
	height:auto;
}

main #flow2 .flow_reward .explain {
	overflow:auto;
	padding:10px;
}


/* 新規モニター登録・登録から参加までの流れ
******************************************************************************************** */

main .entry_area {
	width:100%;
	text-align:center;
	overflow:hidden;
}

main .entry_area .inner {
	width:1100px;
	padding:0px 40px 40px 40px;
	margin:0px auto 0px auto;
	overflow:hidden;
	box-sizing: border-box;
}

main .entry_area p {
	color:#333333;
	font-size:2.0rem;
	line-height:180%;
	margin:40px 0px;
}

main .entry_area  li {
	display:inline-block;
	margin:0px 40px;
}

main .entry_area .entry_button a {
	text-align:center;
	font-size:2.2rem;
	font-weight:bold;
	display:block;
	min-width:320px;
	line-height:70px;
	margin:0px auto 0px auto;
	background-color:#c42966;
	color:#FFFFFF;
	border:solid 2px #c42966;
	box-sizing: border-box;
	cursor: pointer;
	transition:all .3s;
	box-sizing: border-box;
	clear:both;
	text-decoration:none;
}

main .entry_area .entry_button a:hover {
	background-color:#FFFFFF;
	color:#c42966;
	border:solid 2px #c42966;
	text-decoration:none;
}

main .entry_area .reward_button a {
	text-align:center;
	font-size:2.2rem;
	font-weight:bold;
	display:block;
	min-width:320px;
	line-height:70px;
	margin:0px auto 0px auto;
	background-color:#004d85;
	color:#FFFFFF;
	border:solid 2px #004d85;
	box-sizing: border-box;
	cursor: pointer;
	transition:all .3s;
	box-sizing: border-box;
	clear:both;
	text-decoration:none;
}

main .entry_area .reward_button a:hover {
	background-color:#FFFFFF;
	color:#004d85;
	border:solid 2px #004d85;
	text-decoration:none;
}


/* スマホ用 */
@media screen and (max-width: 480px) {

	/* メインイメージ
	******************************************************************************************** */
	
	#main_image {
		min-height:80px;
	}
	
	#main_image h1 {
		font-size:2.4rem;
		padding:30px 0px;
		line-height:130%;
	}


	/* 新規モニター登録
	******************************************************************************************** */
	
	main #flow {
		margin-bottom:30px;
	}
	
	main #flow h2 {
		font-size:2.2rem;
		margin: 30px 0px 0px 0px;
	}
	
	main #flow .flow h3 {
		font-size:2.0rem;
	}
	
	main #flow .inner {
		width:96%;
		padding:20px;
		margin:0px auto 30px auto;
	}
	
	main #flow p {
		font-size:1.6rem;
	}
	
	main #flow .flow {
		width:100%;
		min-height:inherit;
		margin:40px 0px 60px 0px;
		float:none;
	}
	
	main #flow .flow:last-child {
		margin:40px 0px 0px 0px;
	}
	
	main #flow .entry a {
		width:346px;
		margin:20px auto 20px auto;
	}
	
	
	/* モニター登録後の流れ
	******************************************************************************************** */

	main #flow2 h2 {	
		font-size:2.2rem;
		margin: 30px 0px 0px 0px;
	}

	main #flow2 .inner {
		width:96%;
		padding:20px;
		margin:0px auto 30px auto;
	}
	
	main #flow2 .flow_reward h3 {
		text-align:center;
	}

	main #flow2 p {
		font-size:1.6rem;
	}

	main #flow2 .flow {
		width:100%;
		min-height:inherit;
		margin:40px 0px 60px 0px;
		padding-bottom:1px;
		float:none;
	}
	
	main #flow2 .flow h3 {
		font-size:2.0rem;
	}

	main #flow2 .flow_reward {
		width:100%;
		margin:20px auto 20px auto;
	}

	main #flow2 .flow_reward:before {
		top: -20px;
		margin-left: -40px;
		border: 40px solid transparent;
		border-top: 20px solid #1d7cc1;
	}

	main #flow2 .flow_reward img {
		float:none;
		width:auto;
	}

	main #flow2 .flow_reward .explain {
		padding:10px 30px 10px 30px;
	}
	

	/* 新規モニター登録・登録から参加までの流れ
	******************************************************************************************** */
	
	main .entry_area .inner {
		width:96%;
		padding:20px;
		margin:0px auto 30px auto;
	}
	
	main .entry_area p {
		color:#333333;
		font-size:2.0rem;
		line-height:180%;
		margin:40px 0px 0px 0px;
	}
	
	main .entry_area  li {
		display:block;
		margin:20px 0px;
	}

}