@charset "UTF-8";
.sp-title {
	display:			none;
}

@media screen and ( max-width: 768px ){
	/*********************************************************************
	 * 横幅設定
	 *********************************************************************/
	.width-120 {
		width:				100% !important;
	}
	.width-180 {
		width:				100% !important;
	}
	.width-300 {
		width:				100% !important;
	}

	/*********************************************************************
	 * 表示エリア設定
	 *********************************************************************/
	.area-input,
	.area-result {
		background:			#fff;
		border-radius:		10px;
		padding:			0px 10px;
	}

	/*********************************************************************
	 * 進捗情報表示エリア
	 *********************************************************************/
	.step-info {
		width:						100%;
		display:					flex;
		margin-bottom:				30px;
	}
	.step-info li {
		position:					relative;
		width:						calc(100% / 2.2);
		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 dl {
		display:			table;
		width:				100%;
	}
	.area-input dl dt {
		display:			block;
		width:				100% !important;
	}
	.area-input dl dd {
		display:			block;
		width:				100% !important;
	}
	.sp-nl {
		display:			block;
	}

	/*********************************************************************
	 * テーブル
	 *********************************************************************/
	/*** 標準タイプ1 ***/
	.table-type01 {
		border-collapse:	collapse;
		width:				100%;
	}
	.table-type01 th,
	.table-type01 td {
		padding:			10px;
		border:				solid 1px #ccc;
		text-align:			center;
		box-sizing:			border-box;
	}
	.table-type01 th {
		background:			var( --main-table-header-color );
		color:				#fff;
	}
	.table-type01 thead {
		display:			none;
	}
	.table-type01 td,
	.table-type01 th {
		display:			block;
		width:				100%;
		border-bottom:		none;
	}
	.table-type01 td {
		padding:			0px 12px 0 0;
		display:			block;
		width:				100%;
		line-height:		2.5;
		text-align:			left;
	}
	.table-type01 td:before {
		color:				#fff;
		content:			attr(data-label);
		font-weight:		bold;
		padding:			0px 10px;
		display:			inline;
		background-color:	var( --main-table-header-color );
		width:				40%;
		margin-right:		10px;
		float:				left;
	}
	.table-type01 tr:last-child {
		border-bottom:		solid 1px #ccc;
	}

	/*** 標準タイプ4 ***/
	.table-type04 {
		border-collapse:	collapse;
		width:				100%;
	}
	.table-type04 td,
	.table-type04 th {
		display:			block;
		padding:			10px;
		border:				solid 1px #ccc;
		text-align:			center;
		width:				100%;
		border-bottom:		none;
	}
	.table-type04 th {
		background:			var( --main-table-header-color );
		color:				#fff;
	}
	.table-type04 td {
		display:			block;
		width:				100%;
		line-height:		2.5;
		text-align:			left;
	}
	.table-type04 tr:last-child {
		border-bottom:		solid 1px #ccc;
	}

	.sp-title {
		display:			inline-block;
	}
	/*********************************************************************
	 * 入力ボックス
	 *********************************************************************/
	.input-common {
		width:				50%;
	}

	/*********************************************************************
	 * ボタン
	 *********************************************************************/
	.btn-tr a,
	.btn-tr input[type="submit"]{
		width:				100% !important;
		border-radius:		2px !important;
	}
	.btn-flex {
		display:			block;
		margin-bottom:		20px;
	}
}