/*-------------------------------
PCデバイス向けCSS(基礎)
-------------------------------*/
	body {
		background-color: #ffffff;
	}
	
	header {
		border-top: 5px solid #FF6666;
		width: 100%;
		padding: 20px 0px;
		color: #FF6666;
		font-weight: bold;
		background-color: #fbe9db;
		text-align: center;
	}
	
	div#wrapper {
		background-color: #ffffff;
		padding: 20px;
		width: 900px;
		margin: 30px auto;
	}
	
	div.progress_bar {
		text-align: right;
	}
	
	div.title {
		text-align: center;
	}
	
	div.shindan_text {
		text-align: center;
		margin: 0px auto;
		padding: 40px 0px 60px;
		width: 100%;
		font-size: 18px;
	}
	
	ul.button_area {
		text-align: center;
		margin-top: 20px;
	}
	
	li {
		margin: 0 20px;
		display:inline-block
	}
	
	li a.start_btn {
		background-color: #FFA500;
		font-size: 18px;
		padding: 12px 80px;
		position: relative;
		text-decoration: none;
		color: #FFF;
		box-shadow: 0px 6px 0px #FF8C00;
		border-radius: 10px 10px 6px 6px;
	}
	
	/*
	li a.start_btn:active {
		color:#FF8c00;
		text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
		background-color:#FFA500;
		box-shadow:inset 0px -1px 0px #FF8C00;
		top:7px;
	}
	*/
	
	li a.yes_btn {
		background-color: #F70841;
		padding: 12px 80px;
		position: relative;
		text-decoration: none;
		color: #FFF;
		box-shadow: 0px 6px 0px #C30B37;
		border-radius: 10px 10px 6px 6px;
	}
	
	/*
	li a.yes_btn:active {
		color:#c30b37;
		text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
		background-color:#f70841;
		box-shadow:inset 0px -1px 0px #c30b37;
		top:7px;
	}
	*/
	
	li a.no_btn {
		background-color: #00A0E6;
		padding: 12px 72px;
		position: relative;
		text-decoration: none;
		color: #FFF;
		box-shadow: 0px 6px 0px #36C;
		border-radius: 10px 10px 6px 6px;
	}
	
	/*
	li a.no_btn:active {
		color:#3366CC;
		text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
		background-color:#00a0e6;
		box-shadow:inset 0px -1px 0px #3366CC;
		top:7px;
	}
	*/
	
	div.answer_text {
		text-align: center;
		margin: 10px auto;
		padding: 10px;
		width: 80%;
	}
	
	div.answer_text span.text{
		background: transparent linear-gradient(transparent 0%, #FF6 0%) repeat scroll 0% 0%;
	}
	
	div.recommend {
		margin: 10px auto 40px;
	}
	
	div.service_title {
		text-align: left;
		margin: 0px 0px 10px;
		padding: 5px;
		border-left: 7px solid #FF6666;
		border-bottom: 1px dashed #FF6666;
		font-size: 1.143em;
		font-weight: bold;
	}
	
	div.service_image {
		width: 40%;
		float: left;
		margin: 10px auto 40px;
	}
	
	div.service_text {
		width: 60%;
		float: right;
		margin: 10px auto 40px;
	}
	
	footer {
		width: 100%;
		margin-top: 30px;
		padding: 8px 0px;
		text-align: center;
		font-size: 8px;
		background-color: #F0F0F0;
		font-size: 8px;
	}



/*-------------------------------
タブレットデバイス向けCSS(PCのCSSを変換)
-------------------------------*/
@media screen and (max-width: 959px) and (min-width: 641px) {
	header {
		font-size: 14px;
	}
	
	div#wrapper {
		width: 100%;
		padding: 5px;
	}
	
	div.shindan_text {
		padding: 20px 0px 40px;
		font-size: 14px;
	}
	
	li a.start_btn {
		padding: 12px 90px;
	}
	
	li a.yes_btn {
		padding: 12px 38px;
	}
	
	li a.no_btn {
		padding: 12px 30px;
	}

	div.answer_text {
		margin: 10px auto;
		width: 95%;
	}
	
	div.service_image {
		width: 60%;
		margin:10px auto;
		text-align: center;
		float: none;
	}
	
	div.service_image img {
		width: 100%;
		max-width: 500px;
	}
	
	div.service_text {
		float: none;
		width: 90%;
	}
}

/*-------------------------------
スマートフォンデバイス向けCSS(PCのCSSを変換)
-------------------------------*/
@media screen and (max-width: 640px) {
	header {
		font-size: 14px;
	}
	
	div#wrapper {
		width: 100%;
		padding: 5px;
	}
	
	div.shindan_text {
		padding: 20px 0px 40px;
		font-size: 14px;
	}
	
	li a.start_btn {
		padding: 12px 60px;
	}
	
	li a.yes_btn {
		padding: 12px 38px;
	}
	
	li a.no_btn {
		padding: 12px 30px;
	}

	div.answer_text {
		margin: 10px auto;
		width: 95%;
	}
	
	div.service_image {
		width: 90%;
		margin:10px auto;
		text-align: center;
		float: none;
	}
	
	div.service_image img {
		width: 100%;
		max-width: 500px;
	}
	
	div.service_text {
		float: none;
		width: 90%;
	}
}