@charset "utf-8";

/* -----------------------------------------------------------------------------
	お問合わせ内
----------------------------------------------------------------------------- */
/**----------お問い合わせ営業注意---------**/
.attention_txt {
    text-align: center;
    color: #FF0000;
}
*{
	box-sizing:border-box;
}
.scr_tbl_cgicmnt {
	width:98%;
	margin:0 auto 50px;
	max-width:800px;
	border:1px solid #ccc;
	text-align:center;
	
}
.scr_tbl_cgicmnt td {
	padding:30px 1%;
}
/**---------- 問い合わせテーブル---------**/
	.tbl_form{
		width:96%;
		max-width:800px;
		margin:0 auto 50px;
		box-sizing:border-box;
	}
	
		.tbl_form th{
			width:160px;
			border-bottom:1px solid #ccc;
			text-align:left;
			padding:10px 0 10px 10px;
		}
	
		.tbl_form td{
			text-align:left;
			padding:30px 2% 25px;
			border-bottom:1px solid #ccc;
			
			line-height:1.5em;
		}
		.tbl_form .tr_addr1 input{
			margin-bottom:5px;
		}
	.tbl_reserve {
		margin-bottom:10px;
	}
	.tbl_reserve td input {
		margin-bottom:10px;
	}
	.t_center{text-align:center;}
@media (max-width: 768px) {
	.tbl_form th {
		width:140px;
	}
}
@media (max-width: 640px) {
	.tbl_reserve th {
		width:90px;
	}
}
@media (max-width: 480px) {
	.tbl_form {
		border-top:1px solid #ccc;
	}
	.tbl_form caption {
		margin-bottom:10px;
	}
}

	/**----------フォーム要素の文字余白---------**/
		.tbl_form input{
			padding:5px 2%;
			font: 16px/1.7 "Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3",Meiryo,"メイリオ",Osaka,"MS P Gothic","ＭＳ Ｐゴシック",clean,sans-serif;
			width:100%;
		}
	/**-- 郵便番号検索 ---**/
		.tbl_form span.addrno input{
			padding:0px 5px;font-size:14px;
		}
		.tbl_form input#postcode{
			width:130px;
		}
		.tbl_form input#btn_addr{
			width:200px;
		}
	/**-- テキストボックス中 ---**/
		.tbl_form input.w_m{
			max-width:400px;
		}
	/**-- テキストボックス小 ---**/
		.tbl_form input.w_s{
			max-width:200px;
		}
	/**-- テキストボックス短 ---**/
		.tbl_form input.w_ss{
			max-width:100px;
		}
		.tbl_form input.w_s2{
			max-width:180px;
		}
		.tbl_form textarea{
			width:95%;
			padding:5px 2%;
			font: 16px/1.7 "Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3",Meiryo,"メイリオ",Osaka,"MS P Gothic","ＭＳ Ｐゴシック",clean,sans-serif;
		}
		.tbl_form select{
			padding:5px 10px;
		}
		.tbl_form select#address1{
			padding:10px 10px;
			margin-bottom:5px;
		}

	/**----------希望日時横に並べる--------**/
		select.uketuke{
			width:100px; margin:5px 1%;
			padding:10px 10px;

		}
		.tbl_reserve select.uketuke {
			margin-bottom:10px;
		}

	/**----------テーブルinチェックボックスとラジオボタンを大きく---------**/
	.tbl_form  input[type=checkbox] {
		display: none;
	}
		.tbl_form .checkbox {
			box-sizing: border-box;
			-webkit-transition: background-color 0.2s linear;
			transition: background-color 0.2s linear;
			position: relative;
			display: inline-block;
			margin: 0 8px 8px 0;
			padding: 12px 15px 12px 43px;
			border-radius: 8px;
			background-color: #F7F7F7;
			vertical-align: middle;
			cursor: pointer;
		}
		
		.tbl_form .checkbox:hover {
		  background-color: #eee;
		}
		.checkbox:hover:after {
		  border-color: #53b300;
		}
		.tbl_form .checkbox:after {
		  -webkit-transition: border-color 0.2s linear;
		  transition: border-color 0.2s linear;
		  position: absolute;
		  top: 50%;
		  left: 15px;
		  display: block;
		  margin-top: -10px;
		  width: 16px;
		  height: 16px;
		  border: 2px solid #bbb;
		  border-radius: 6px;
		  content: '';
		}

		.tbl_form .checkbox:before {
		  -webkit-transition: opacity 0.2s linear;
		  transition: opacity 0.2s linear;
		  position: absolute;
		  top: 50%;
		  left: 21px;
		  display: block;
		  margin-top: -7px;
		  width: 5px;
		  height: 9px;
		  border-right: 3px solid #00184A;
		  border-bottom: 3px solid #00184A;
		  content: '';
		  opacity: 0;
		  -webkit-transform: rotate(45deg);
		  -ms-transform: rotate(45deg);
		  transform: rotate(45deg);			
		}
		.tbl_form input[type=checkbox]:checked + .checkbox:before {
		  opacity: 1;
		}

	#radio1 input{
	    display: none;
	}
	#radio1 label{
	    display: inline-block;
	    position: relative;
	    cursor: pointer;
	    margin-left: 50px;
	    padding: 10px 20px;
	    border-radius: 2px;

	    text-align: center;
	    line-height: 1;
	}
	
	#radio1 label:before{
	    position: absolute;
	    content: "";
	    top: 50%;
	    left: -10px;
	    width: 20px;
	    height: 20px;
	    margin-top: -10px;
	    background: #bdc3c7;
	    border-radius: 50%;
		
	}

	#radio1 input[type="radio"]:checked + label:after {
	    position: absolute;
	    content: "";
	    top: 50%;
	    left: -4px;
	    width: 8px;
	    height: 8px;
	    margin-top: -4px;
	    border-radius: 50%;
	    background: #00AC97;
	}
	
@media (max-width: 768px) {	
	
}
@media (max-width: 640px) {
	
}
@media (max-width: 360px) {
	.tbl_reserve .checkbox1 .checkbox {
		padding-left:40px;
		padding-right:0;
		margin-right:5px;
	}
}

	/**----------メッセージ---------**/
	.form_msg{
		width: 740px;
		margin: 10px auto -10px auto;
		text-align: left;
	}
/**----------送信---------**/
.send{
	width: 100%;
	margin: 50px auto 80px auto;
		text-align: center;
}
/* =========================================================
■ 送信ボタン
========================================================= */

.send a {
	display: inline-block;
	text-decoration: none;
	outline: none;
	width:250px;
	margin:0 20px;
	text-align:center;
	font-size:17.5px;
	padding:10px;
	background:#333;
	color:#fff;
	transition: all .3s;
	border-top:2px solid #E3E3E3;
	border-left:2px solid #E3E3E3;
	border-bottom:2px solid #979797;
	border-right:2px solid #979797;
}
.send a:before,
.send a:after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.send a,
.send a:before,
.send a:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.send a:hover {
	opacity:0.7;
	color: #fff;
}



.send input {
	display: inline-block;
	width: 200px;
	height: 54px;
	text-align: center;
	text-decoration: none;
	outline: none;
	background-color: #333;
	color: #fff;
	font-size:110%;
	
}

@media (max-width: 480px) {
	.send a {
		font-size:15px;
		width:200px;
	}
}

/**----------必須マーク---------**/
.marker_water {
	font-size:12.5px;
	color:#ff0000;
	display:inline-block;
	padding-left:1em;
}
.d_msg .marker_water {
	float:none;
}
@media (max-width: 768px) {
	.marker_water {
		padding-left:0.5em;
	}
}
/**----------確認ボタン---------**/
.submit {
	text-align:center;
	margin-top:70px;
}

.tbl_form input,
.tbl_form textarea,
.tbl_form tr td select {
	font-size:16px;
}
@media (max-width: 768px) {
	.tbl_form input.w_ss{
		width:60px;
	}
	.tbl_form th {
		padding:15px 0;
	}
	.tbl_form td {
		padding:15px 0;
	}
	
}		
@media (max-width: 480px) {
	.tbl_form tr th {
		width:100%;
		display:block;
		box-sizing:border-box;
		padding-bottom:0;
		border-bottom:0;
	}
	.tbl_form tr td {
		width:100%;
		display:block;
		box-sizing:border-box;
		padding:3px 0 20px;
	}
	.tbl_form input,
	.tbl_form textarea {
		padding:5px 2%;
	}
	form .checkbox {
		padding:5px 0 5px 17%;
		width:50%;
	}
	.tbl_form input#postcode {
		width:50%;
	}
	.tbl_form input#btn_addr {
		width:90%;
		max-width:210px;
		margin:0 5% 5px;
	}
	select.uketuke{
		margin:5px 0.5% 0;
		padding:7px 0.5%;
		width:30%;
	}
	.radio_small #radio1 label {
		margin-left:10px;
		padding:10px 0 10px 15px;
	}
	.tbl_form tr td input,
	.tbl_form tr td textarea,
	.tbl_form tr td select {
		font-size:16px;
	}
	.send {
		margin:10px auto 50px;
	}
	.send a {
		margin:0;
	}
}
@media (max-width: 414px) {
	.tbl_form input.w_ss02{
		width:32px;
	}
	.tbl_form input.w_ss03 {
		width:52px;
	}
	.radio_small #radio1 label {
		font-size:12px;
	}
	.marker_water {
		font-size:11px;
	}
}
@media (max-width: 414px) {
	.radio_small #radio1 label {
		font-size:11px;
	}
}
/**----------　ボタン　---------**/
.btn_animate {
	display:block;
	width:320px;
	margin:60px auto 30px;
	padding:15px 0;
	text-align:center;
	background:#333;
	color:#fff!important;
	font-size:17px;
}
.btn_animate span {
	display:block;
	width:100%;
	color:#fff;
}
/**ボタンアニメーション基本**/
.btn_animate::before,
.btn_animate::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.btn_animate,
.btn_animate::before,
.btn_animate::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
/**ボタンアニメーション部分**/
.btn_animate {
  position: relative;
  z-index: 0;
}
.btn_animate:hover {
  background-color: #333;
  border-color: #333;
  color: #fff;
}
.btn_animate::before,
.btn_animate::after {
  top: 0;
  width: 50%;
  height: 100%;
}
.btn_animate::before {
  right: 0;
}
.btn_animate::after {
  left: 0;
}
.btn_animate:hover::before,
.btn_animate:hover::after {
  width: 0;
  background-color: #FFF;
}
@media (max-width: 480px) {
	.btn_animate {
		width:280px;
		font-size:16px;
	}
}