@charset "UTF-8";

/* ===================================================================
 04_form.css
 　フォームデザイン・検索ボックス
=================================================================== */

form{
}


/*------------------------------------------------------------
 ブラウザデフォルトの装飾をリセット
------------------------------------------------------------*/
form input[type=submit],
form input[type=text],
form input[type=search],
form select,
form textarea{
	font-size:1.6rem;
	border:none;
	border-radius:0;
	box-shadow: none;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}

form input[type=submit]:focus,
form input[type=text]:focus,
form input[type=search]:focus,
form select:focus,
form textarea:focus{
	outline: none;
}

select::-ms-expand { /* IE10~ */
	display: none;
}




/*------------------------------------------------------------
 パーツ
------------------------------------------------------------*/
form table{
	width:100%;
	border-collapse:collapse;
}


/* テーブルレイアウト
----------------------------------------------- */
form tr{
	border-bottom:2px solid rgba(219,213,204,0.5);
}

form tr:nth-last-child(1){
	border-bottom:none;
}

form th,
form td{
	padding:10px 0;
}


/* 項目名
----------------------------------------------- */
form th{
	min-width:230px;
	text-align:left;
	font-size:1.5rem;
	font-weight:normal;
	padding-right:1.5rem;
	vertical-align:middle;
}


/* 必須マーク
----------------------------------------------- */
form th .require,
em.req{ 
	padding:2px 4px;	
	margin-left:5px;
	font-size:1.3rem;
	color:#ffffff;
	background-color:#cf4f16;
	border-radius: 2px;
}


/* 例文
----------------------------------------------- */
form  .submessage{
	font-size:1.3rem;
	color:#419baa;
}


/* エラーメッセージ
----------------------------------------------- */
form .error{
	display:inline-block;
	margin-top:5px;
	padding:5px 20px;
	font-size:1.4rem;
	line-height:1em;
	color:#c33;
	background:rgba(195,48,0,0.2);
	border-radius:5px;
	position:relative;
}

form .error:after{
	content:"";
	height:0; width:0;
	border:solid transparent;
	border-color:rgba(0,0,0,0);
	border-width:4px;
	border-bottom-color:rgba(195,48,0,0.2);
	position: absolute;
	bottom: 100%; left: 20px;
}




/*------------------------------------------------------------
 入力欄
------------------------------------------------------------*/

/* 共通 */
form input[type=text],
form input[type=search],
form textarea,
form select{
	margin-bottom:3px;
	padding:5px;
	background:#fdfdfd;
	border:3px solid #bababa;
	border-radius:5px;
}

form input[type=text]:focus,
form input[type=search]:focus,
form textarea:focus,
form select:focus{
	border-color:#419baa;
	background:#ffffff;
}

/* プレースホルダ */
::-webkit-input-placeholder{
  color:#bababa;
}
::-moz-placeholder{
  color:#bababa;
  opacity:1;
}
:-ms-input-placeholder{
  color:#bababa;
}


/* テキストボックス
----------------------------------------------- */
form  input[type=text]{ 
	width:300px;
}


/* テキストエリア
----------------------------------------------- */
form  textarea{ 
	width:400px;
	height:200px;
	margin-top:7px;
}


/* セレクトボックス
----------------------------------------------- */
form select{
	width:350px;
	padding-right:30px;
	background:url(../img/common/parts_select1.png),#fff;
}

form select:focus{ 
	background:url(../img/common/parts_select2.png),#fff;
}

form select,
form select:focus{ 
	background-repeat:no-repeat;
	background-position:right 0 top 50%;
	background-size:36px;
}

form select option{ 
	background:#f4f3ee;
}


/* ボックスのサイズ変更
----------------------------------------------- */
form  input.s-size{
	width:200px;
}

form  input.l-size{
	width:400px;
}



/*------------------------------------------------------------
 チェックボックス
------------------------------------------------------------*/
ul.checklist li{
	display:inline-block
}

input[type=checkbox] {
	display: none;
}

/* ラベル
----------------------------------------------- */
ul.checklist label {
	display: inline-block;
	margin: 0 20px 8px 0;
	padding: 12px 12px 12px 42px;
	vertical-align: middle;
	border-radius: 8px;
	background-color:rgba(219,213,204,0.2);
	cursor: pointer;
	-webkit-transition: background-color 0.2s linear;
	        transition: background-color 0.2s linear;
	position: relative;
}

ul.checklist label:hover {
	background-color:rgba(65,155,170,0.2);
}



/* チェックボックスデザイン
----------------------------------------------- */

/* チェックボックス */
ul.checklist .checkbox:after {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	margin-top: -10px;
	border: 3px solid #bababa;
	background:#ffffff;
	position: absolute;
	top: 50%; left: 15px;
	-webkit-transition: border-color 0.2s linear;
			transition: border-color 0.2s linear;
}

ul.checklist .checkbox:hover:after {
  border-color: #419baa;
}

/* チェックマーク */
ul.checklist .checkbox:before {
	content: '';
	display: block;
	width: 5px;
	height: 9px;
	margin-top: -7px;
	border-right: 3px solid #dd5317;
	border-bottom: 3px solid #dd5317;
	-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
	position: absolute;
	top: 50%; left: 22px;
	z-index:5;
	opacity: 0;
}

input[type=checkbox]:checked + .checkbox:before {
  opacity: 1;
}




/*------------------------------------------------------------
 ボタン
------------------------------------------------------------*/
p#confirm-button{
	padding:20px;
	text-align:center;
}

form input[type=submit],
#search_form button.search-submit{ 
	width:230px;
	margin:10px;
	padding:10px 0;
	color:#ffffff;
	font-size:1.9rem;
	background:#419baa;
	border:2px solid #419baa;
	border-radius:5px;
	box-shadow:0 0 1px 0 rgba(86,79,68,0.3);
	cursor:pointer;
	-webkit-transition: all 0.2s;
	        transition: all 0.2s;
}

form input[type=submit]:hover,
#search_form button.search-submit:hover{
	color:#419baa;
	background:rgba(255,255,255,0.8);
}

form select,
form input[type=submit]{ 
	font-family:'Montserrat','Noto Sans',YuGothic, '游ゴシック',
	            "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
	            "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* 修正ボタン */
form input[name=return-to-input]{
	background:#aaaaaa;
	border-color:#aaaaaa;
}

form input[name=return-to-input]:hover{
	color:#aaaaaa !important;
}


/*------------------------------------------------------------
 入力内容確認画面
------------------------------------------------------------*/
.contact-form-confirm form{
	margin:30px auto;
}

.contact-form-confirm th{
	min-width:100px;
}

.contact-form-confirm th .subject{
	padding:1px 10px;
	color:#ffffff;
	font-size:1.3rem;
	text-align:center;
	background:#595044;
	border-radius:10px;
}



/*------------------------------------------------------------
 注意書きなど
------------------------------------------------------------*/

/* 各ステップ説明文
----------------------------------------------- */
.form-intro{
	width:600px;
	margin:10px auto;
}

.form-intro h3{
	margin-bottom:10px;
	font-size:2.0rem;
	text-align:center;
}

.form-intro p.subtitle{
	margin-bottom:20px;
}

.form-intro img{
	margin:0 auto 20px;
}

.form-intro img.ill{
	display:block;
	width:200px;
	height:150px;
	margin:20px auto;
}


/* ページ下部お願い
----------------------------------------------- */
.contact .note{
	margin-top:50px;
	font-size:1.3rem;
}

.contact .note em{
	margin:0 3px;
	color:#cf4f16;
}

.contact .note em.req{
	color:#ffffff;
}




/*------------------------------------------------------------
 スマートフォン用
------------------------------------------------------------*/
@media screen and (max-width: 640px){
.contact {
	width:100%;
}
.contact th,
.contact td{ 
	display:block;
	width:100%;
}
.contact td{ 
	margin-bottom:10px;
}
.contact  input[type=text]{ /* テキストボックス */
	width:100%;
}
.contact  textarea{ /* テキストエリア */
	width:100%;
	height:200px;
}
}





/* ===================================================================
 検索ボックス
=================================================================== */
#search_form{
	width:250px;
	padding:15px;
	background:#f4f2ed;
	border:5px solid #595044;
}

/* タイトル */
#search_form h3{
	text-align:center;
	font-size:2.5rem;
	letter-spacing:0.5rem;
	position:relative;
}

#search_form h3:after{
  content:"";
  display:block;
  width:100px;
  height:100px;
  background-image:url(../img/page/ill_search.png); 
  background-repeat:no-repeat;
  background-size:contain;
  position:absolute;
  top:0; right:0;
  margin-top:-35px;
  margin-right:-60px;
}

#search_form h3 span{
	display:block;
	font-size:1.4rem;
	letter-spacing:0;
}


/* 各項目
----------------------------------------------- */
#search_form .condition{
	margin:20px 0;
}


/* 項目タイトル */
#search_form h4{
	display:inline-block;
	margin-bottom:5px;
	padding-left:15px;
	font-size:1.6rem;
	position:relative;
}

#search_form h4:before{
	content:"";
	width: 6px;
	height: 6px;
	border-top:3px solid #419baa;
	border-right:3px solid #419baa;
	-webkit-transform:rotate(45deg);
			transform:rotate(45deg);
	position:absolute;
	top:50%; left:0;
	margin-top:-4px;
}

#search_form small{
	margin-left:10px;
	color:#419baa;
	font-size:1.2rem;
}


/* フリーキーワード */
#search_form input[type=search]{
	min-width:200px;
	padding:7px 5px;
}


/* 検索ボタン */
#search_form button.search-submit{
	display:block;
	width:150px;
	margin:10px auto;
	padding:8px 0 8px 20px;
	border:3px solid #ffffff;
	position:relative;
}

#search_form button.search-submit:before{
	content:"";
	display:block;
	width:20px;
	height:20px;
	background-image:url(../img/common/ico_search.png); 
	background-repeat:no-repeat;
	background-size:contain;
	position:absolute;
	top:50%; left:50%;
	margin-top:-10px;
	margin-left:-35px;
}

#search_form button.search-submit:hover{
	border-color:#419baa;
}

#search_form button.search-submit:hover:before{
  background-image:url(../img/common/ico_search2.png); 
}


/* チェックボックス */
#search_form label{
	background-color:rgba(206,191,178,0.2);
}

#search_form label:hover {
	background-color:rgba(65,155,170,0.2);
}

#search_form .selectType label{
	min-width:150px;
}

#search_form .selectArea label{
	margin:3px;
	min-width:40px;
}