@charset "UTF-8";

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, em, img, small, strong, var, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin:				0;
	padding:			0;
	border:				0;
	outline:			0;
	font-size:			100%;
	font-style:			normal;
	font-weight:		normal;
	vertical-align:		baseline;
	background:			transparent;
}
html {
	display:			-webkit-box;
    display:			-ms-flexbox;
    display:			-webkit-flex;
    display:			flex;
	flex-direction:		column;
}

/*******************************************************************************
 * フォント設定
 *******************************************************************************/
/*********************************************************************
 * カラー
 *********************************************************************/
.fo-green {
	color:				#2cba00 !important;
}
.fo-red {
	color:				#ed697c !important;
}
/*********************************************************************
 * サイズ
 *********************************************************************/
.fo-14 {
	font-size:			14px !important;
}
.fo-18 {
	font-size:			18px !important;
}
.fo-20 {
	font-size:			20px !important;
}
.fo-24 {
	font-size:			24px !important;
}
.fo-36 {
	font-size:			36px !important;
}
@media only screen and (max-width: 800px) {
	.fo-24 {
		font-size:		20px !important;
	}
	.fo-36 {
		font-size:		26px !important;
	}
}

article, aside, figcaption, figure, footer, header,  menu, nav, section {
	display:			block;
}
ul {
	list-style:			none;
}
a {
	margin:				0;
	padding:			0;
	font-size:			100%;
	vertical-align:		baseline;
	background:			transparent;
}
table {
	border-collapse:	collapse;
	border-spacing:		0;
}
input, select, textarea {
	vertical-align:		middle;
	margin:				0;
	padding:			0;
	background:			none;
	border:				none;
	border-radius:		0;
	outline:			none;
	-webkit-appearance:	none;
	-moz-appearance:	none;
	appearance:			none;
	font-size:			16px;
}
select::-ms-expand {
    display:			none;
}
/*セレクトボックス*/
.select_status select {
	-webkit-appearance:	none;
	-moz-appearance:	none;
	appearance:			none;
	position:			relative;
	width:				200px;
	border:				solid 1px #ccc;
	border-radius:		3px;
	padding:			8px 10px;
}
.select_status label {
	position:			relative;
}
.select_status label::after {
	position:			absolute;
	top:				0;
	right:				15px;
	bottom:				0;
	margin:				auto;
	display:			inline-block;
	font-family:		FontAwesome;
	content:			"\f107";
	pointer-events:		none;
}

/* セレクトボックス disable用クラス */
.status_disable {
	background:			#f8f8f8;
	color:				#ccc;
}
.status_disable select {
	color:				#ccc;
}

img {
	max-width:			100%;
	height:				auto;
	border:				none;
	vertical-align:		middle;
}
@font-face {
  font-family:			"Yu Gothic";
  src:					local("Yu Gothic Medium");
  font-weight:			100;
}
@font-face {
  font-family:			"Yu Gothic";
  src:					local("Yu Gothic Medium");
  font-weight:			200;
}
@font-face {
  font-family:			"Yu Gothic";
  src:					local("Yu Gothic Medium");
  font-weight:			300;
}
@font-face {
  font-family:			"Yu Gothic";
  src:					local("Yu Gothic Medium");
  font-weight:			400;
}
@font-face {
  font-family:			"Yu Gothic";
  src:					local("Yu Gothic Bold");
  font-weight:			bold;
}
body {
	min-height:			100vh;
	display:			-webkit-box;
    display:			-ms-flexbox;
    display:			-webkit-flex;
    display:			flex;
	flex-direction:		column;
	background:			#f3f3f3;
	font-size:			16px;
	font-family:		"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	line-height:		1.6;
	color:				#333;
}
@media all and ( -ms-high-contrast: none ){
body {
	font-family:		"メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}
}
@media only screen and ( max-width: 800px ){
body{
	min-width:			0px;
}
}
/************************************ リンク*/
a:link,a:visited {
	color:				#333;
	text-decoration:	none;
}
a:hover,a:active {
	text-decoration:	none;
}
.text-center {
	text-align:			center !important;
}
header {
    background:			#e30b20;
	text-align:			center;
}

header h1 {
    width:				auto;
/*    background:			#fff;	*/
    transform:			skewX(-20deg);
    padding:			10px 20px 10px 50px !important;
    margin:				0 10px 0 -35px;
    display:			inline-block;
    float:				left;
}

header img {
    height:				45px;
    transform:			skewX(20deg);
}
.container {
	width:				1024px;
	margin:				0 auto;
	padding:			20px 0;
}
p {
	font-size:			14px;
	margin-bottom:		10px;
}
.step-info {
	width:				100%;
	display:			flex;
	margin-bottom:		30px;
}
.step-info li {
	position:			relative;
	width:				calc(100% / 3);
	height:				40px;
	line-height:		40px;
	background:			#3498db;
	font-size:			16px;
	color:				#fff;
	text-align:			center;
	margin-left:		5px; 
	padding:			0 20px;
}
.step-info li::before {
	content:			"";  
	border-top:			20px solid transparent;
	border-bottom:		20px solid transparent;
	border-left:		20px solid #f3f3f3;
	position:			absolute;
	left:				0;
	top:				0;
}
.step-info li::after {
	content:			"";  
	border-top:			20px solid transparent;
	border-bottom:		20px solid transparent;
	position:			absolute;
	right:				-20px;
	top:				0;
	z-index:			1;
}
.step-info li:nth-of-type(1) {
	background:			#2ac278;
}
.step-info li:nth-of-type(1)::after {
	border-left:		20px solid #2ac278;
}
.step-info li:nth-of-type(2) {
	background:			#ed697c;
}
.step-info li:nth-of-type(2)::after {
	border-left:		20px solid #ed697c;
}
.step-info li:nth-of-type(3) {
	background:			#15bbde;
}
.step-info li:nth-of-type(3)::after {
	border-left:		20px solid #15bbde;
}
.step-info li:nth-of-type(1)::before,
.step-info li:nth-of-type(3)::after {
	display:			none; 
}
.area_input,
.area_result {
	background:			 #fff;
	border-radius:		10px;
	padding:			30px;
}
.area_input dl {
	padding:			20px 0;
}
.area_input dl:first-of-type {
	border-bottom:		dotted 1px #d9d9d9;
}
.area_input dl {
	display:			table;
	width:				100%;
}
.area_input dl dt,
.area_input dl dd {
	display:			table-cell;
	vertical-align:		top;
}
.area_input dl dt {
	width:				10%;
}
.area_input dl dd {
	width:				90%;
}
.area_input dl dd input {
	-webkit-appearance:	none;
	-moz-appearance:	none;
	appearance:			none;
	border:				none;
	background:			#fff;
	border:				solid 1px #ccc;
	border-radius:		3px;
	padding:			6px 10px;
}
.area_input dl dd ul li {
	margin-bottom:		20px;
}
.area_input dl dd ul {
	display:			flex;
	flex-wrap:			wrap;
	justify-content:	space-between;
	width:				100%;
}
.area_input dl dd ul li {
	width:				48%;
}
.area_input dl dd ul li input {
	width:				100%;
	box-sizing:			border-box;
}
.btn a,
.btn input {
	display:			inline-block;
	width:				120px;
	background:			#3d3d3d;
	border-radius:		30px;
	color:				#fff;
	padding:			8px 0;
	cursor:				pointer;
}
.btn a:hover,
.btn input:hover {
	opacity:			.5
}
.btn-info{
    margin-top:			10px;
}
.area_result table {
	width:				100%;
	border-collapse:	collapse;
	border-spacing:		0;
	font-size:			.85rem;
	margin-bottom:		30px;
}
.area_result table th,
.area_result table td {
	padding:			8px 10px;
	text-align:			left;
}
.area_result table thead {
	background:			#3d3d3d;
	border:				solid #3d3d3d;
	border-width:		0 1px 0 1px;
	color:				#fff;
}
.field{
	background:			#f3f3f3;
}
.area_result table th:not(:last-of-type) {
	border-right:		solid 1px #fff;
}
.area_result table tbody {
	border:				solid #d9d9d9;
	border-width:		0 1px 1px 1px;
}
.area_result table tbody tr:not(:last-of-type) {
	border-bottom:		dotted 1px #d9d9d9;
}
/*
.area_result table tbody tr:nth-of-type(even) td {
	background:			#f3f3f3;
}
*/
.area_result table td:not(:last-of-type) {
	border-right:		solid 1px #d9d9d9;
}
footer {
    background:			#3d3d3d;
	color:				#fff;
	font-size:			.8rem;
	margin-top:			auto;
	padding:			10px;
	text-align:			center;
}