@charset "utf-8";
/* ************************************************** 
Name: top.css
Description: Top Page only CSS
Create: 2017.12.25
Update: -
Copyright 2017 Hitachi ICT business Services, Ltd.
***************************************************** */ 

/* [F] お問い合わせモジュール
=========================================================================================== */ 
/* --- [F1-1] お問い合わせフォーム　ステップガイド--- */
.form-guideset{
	list-style-type: none;
}
@media screen and (max-width: 600px){
	.form-guideset{
		background-image: url("image/form-guideset-sp.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 80%;
	}
}

/* --- [F1-2] （現在位置表示なし） --- */
.form-guide{
	background-image: url("image/form-guide.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
	float: left;
	line-height: 1.5;
	min-height: 100px;
	padding: 12px 10px 12px 18px;
	text-align: left;
	width: 25%;
}
@media screen and (max-width: 600px){
	.form-guide{
		background-image: url("image/form-guide-sp.png");
		background-size: contain;
		background-position: center;
		margin-right: 4%;
		padding: 37px 0 0 0;
		text-align: center;
		width: 22%;
	}
	.form-guide:last-child{
		margin-right: 0;
	}
}

/* --- [F1-3] （現在位置表示あり） --- */
.form-guide-current{
	background-image: url("image/form-guide-carrent.png");
	color: #fff;
}
@media screen and (max-width: 600px){
	.form-guide-current{
		background-image: url("image/form-guide-carrent-sp.png");
	}
}

/* --- [F2] お問い合わせフォーム　 入力フォーム --- */

/* --- [F2-1] 必須マーク表示 --- */
.input-must{
	background-color: #ff0025;
	border-radius: 7px;
	color: #fff;
	font-size: 1.2rem;
	padding: 2px 7px;
}

@media screen and (max-width: 600px){
	.input-must{
		margin-left: 8px;
	}
}

/* --- [F2-2] thエリア --- */
.table-th-form{
	border-bottom: solid 1px #cccccc;
	border-right: solid 1px #cccccc;
	line-height: 1.5;
	text-align: left;
	vertical-align: top;
	box-sizing: border-box;
	background-color: #E6E6E6;
	font-weight: normal;
	padding: 12px 18px;
}
@media screen and (max-width: 600px){
	.table-th-form{
		display: block;
		text-align: center;
		width: 100%;
	}
}
	
/* --- [F2-3] tdエリア --- */

/* --- [F2-3-2] 入力例 --- */
.input-example{
	display: block;
	padding: 0 0 12px;
}

/* --- [F2-3-3] 1カラム --- */
.table-td-1column{
	width: 100%;
}

/* --- [F2-3-4] 2カラム --- */
.table-td-2column{
	float: left;
	margin-right: 6%;
	width: 47%;
}
.table-td-2column:last-child{
	margin-right: 0;
}
@media screen and (max-width: 600px){
	.table-td-2column{
		float: none;
		width: 100%;
	}
}

/* --- [F2-3-5] 郵便番号 --- */
.table-td-column{
	float: left;
	margin-right: 10%;
	width: 60%;
}

/* --- [F2-3-6] 検索用ボタン --- */
.btn-search{
	color: #fff;
	display: inline-block;
	padding: 4.7px 24px;
}

/* --- [F2-3-7] 入力エリア --- */
.input-width100{
	width: 100%;
}

.input-width50{
	width: 50%;
}

/* --- [F2-3-9] ラジオボタン --- */
.legend-level1{
	font-size: 3.2rem;
    font-weight: bold;
}

/* --- [F2-3-9] ラジオボタン --- */
.input-radio{
	box-sizing: border-box;
	padding: 8px;
}

@media screen and (max-width: 600px){
/* --- ラジオボタンを非表示にする ---*/
	.input-radio input[type=radio] {
		display: none;
	}
}

/* --- [F2-3-10] テキストエリア --- */
.textarea-height-130px{
	min-height: 130px;	
}
	
/* --- [F3] お問い合わせフォーム　エラー表示 --- */

/* --- [F3-1-1] 枠囲みエラー --- */
.error-area{
	background-color: #FFE8E8;
	border: 2px solid #FF3B3B;
	padding: 2%;
}

/* --- [F3-1-2] ボタンの色指定 --- */
.error-area-btn{
	background-color: #ff0025;
	border: 2px solid #ff0025;
	margin-top: 12px;
}

/* --- [F3-1-3] エラー画像の余白 --- */
.error-area-image{
	padding: 0 3px 1px 0;
	width: 20px;
}

/* --- [F3-2] エラーマーク表示 --- */
.error-th{
	position: relative;
}

.error-mark{
	position: absolute;
	right: 18px;
	bottom: 0;
	width: 40px;
}
@media screen and (max-width: 600px){
	.error-mark{
		top: 12px;
		width: 20px;
	}
}

/* --------------------------------------------------------------------------------------- 

States

------------------------------------------------------------------------------------------ */

/* --- エラー時背景 赤 --- */
.is-error{
	background-color: #FFE8E8;
}
/* --- エラー時背景 濃い赤 --- */
.is-error-deep{
	background-color: #FF9191;
}

@media screen and (max-width: 600px){
	.is-input-radio-nonecheck{
		background-color: #e6e6e6;
		color: #000;
	}
	.is-input-radio-checked{
		background-color: #01418F;
		color: #fff;
	}
}