@charset "utf-8";

/*基本設定
---------------------------------------------------------------------------*/

@media screen and (max-width:768px) {	/* タブレット768px以下 */
}
@media screen and (max-width: 640px) {	/* スマホ640px以下 */
}

/*フォーム（送信ボタン）
---------------------------------------------------------------------------*/

input {
	vertical-align: middle;				/*radiobutton、checkboxのテキストのズレ修正*/
	outline: none;
}
input[type*="submit"]:hover,input[type*="button"]:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);			/* ie lt 8 */
	-ms-filter: "alpha(opacity=80)";	/* ie 8 */
}
input[type="submit"],input[type="reset"] {
  	-webkit-appearance: none;			/*iPhoneでオリジナルの送信ボタン*/
}
input[type*="text"],input[type*="tel"],input[type*="number"],input[type*="email"],textarea {
	font-size: 14px;
	border: 2px solid #CFCFCF;
	padding: 0px 15px 0px 15px;
	-webkit-appearance: none;			/*iPhoneでオリジナルのinput*/
	border-radius: 8px;					/*iPhoneで角丸になるのを防ぐ*/
	background-color: #F8F8F8;
	outline: none;
}
input[type*="text"],input[type*="tel"],input[type*="number"],input[type*="email"],select {
	height: 42px;
}
textarea {
	width: 550px;
	height: 160px;
}
@media screen and (max-width: 810px) {	/* 画面810px以下 */
textarea {
	width: 100%;
}
}
input[type*="text"]:hover,input[type*="tel"]:hover,input[type*="number"]:hover,input[type*="email"]:hover,textarea:hover {
	border-color: #750000;
}
input[type*="text"]:focus,input[type*="tel"]:focus,input[type*="number"]:focus,input[type*="email"]:focus,textarea:focus {
	border-color: #750000;
}

/*フォーム（プレースホルダ）
---------------------------------------------------------------------------*/

.place_h_ie {
	display: none;
}

/*チェックボックスをオリジナルに
---------------------------------------------------------------------------*/

.check_outline {
	margin-top: -15px;
}
.check_outline li {
	position: relative;
	display: inline-block;
	margin-top: 15px;
	margin-right: 2%;
	vertical-align: top;
}
.check_outline input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.check_outline input[type="checkbox"] + label {
	background-repeat: no-repeat;
	background-position: left 5px;
	background-image: url(../image/common/bg-check_box.png);
	background-size: 28px 300px;
	padding: 5px 0px 5px 30px;
	display: block;
}

.check_outline input[type="checkbox"]:hover + label {
	background-position: 0px -135px;
}
.check_outline input[type="checkbox"]:checked + label {
	background-position: 0px -275px;
}

.column_1 .check_outline li {
	width: 100%;
	margin-right: 0%;
}
.column_2 .check_outline li {
	width: 48.5%;
}
.column_2 .check_outline li:nth-child(2n) {
	margin-right: 0%;
}
.column_3 .check_outline li {
	width: 31.3%;
}
.column_3 .check_outline li:nth-child(3n) {
	margin-right: 0%;
}

@media screen and (max-width: 820px) {	/* 画面820px以下 */
.column_2 .check_outline li,.column_3 .check_outline li {
	width: 100%;
	margin-right: 0%;
}
}

/*ラジオボタンをオリジナルに
---------------------------------------------------------------------------*/

.radio_outline {
	margin-top: -15px;
}
.radio_outline li {
	position: relative;
	display: inline-block;
	margin-right: 15px;
	margin-top: 15px;
}
.radio_outline input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.radio_outline input[type="radio"] + label {
	display: block;
	background-repeat: no-repeat;
	background-position: 10px 9px;
	background-image: url(../image/common/bg-radio_button.png);
	background-size: 20px 100px;
	border: 2px solid #CFCFCF;
	padding-left: 35px;
	border-radius: 8px;
	background-color: #F8F8F8;
	height: 42px;
	line-height: 39px;
	width: 170px;
}
.radio_outline input[type="radio"]:hover + label {
	border-color: #750000;
}
.radio_outline input[type="radio"]:checked + label {
	background-position: 10px -71px;
}
@media screen and (max-width: 815px) {	/* 画面815px以下 */

.radio_outline li:nth-child(2n) {
	margin-right: 0px;
}
}

@media screen and (max-width: 640px) {	/* スマホ640px以下 */
.check_outline li,.radio_outline li {
	margin-right: 5%;
}
.radio_outline li {
	width: 45%;
}
.radio_outline input[type="radio"] + label {
	width: auto;
}
}

/*セレクトボックスをオリジナルに
---------------------------------------------------------------------------*/

select {
	cursor: pointer;
}
.fmselect option:nth-child(2n) {
	background-color: #F3F3F2;
}
.customSelect {						/* デフォルト時のスタイルを記述します。*/
	border: 2px solid #CFCFCF;
	font-size: 100%;
	border-radius: 8px;
	background-image: url(../image/common/bg-select_box.png);
	background-position: 94% center;
	background-repeat: no-repeat;
	background-color: #F8F8F8;
	background-size: 15px 15px !important;
}
.customSelectInner {				/* セレクトボックスの中のスタイルを記述します。*/
	height: 38px;
	line-height: 38px;
	white-space: nowrap;
	padding-left: 15px;
	margin-right: 40px;				/* 矢印ボタン分の余白*/
}
.customSelect.customSelectHover {	/* マウスオーバー時のスタイルを記述します。*/
	border: 2px solid #750000;
}

/*フォーム（吹き出し）
---------------------------------------------------------------------------*/

.attention_balloon {
	background-image: url(../image/common/bg-attention_balloon.png);
	background-repeat: no-repeat;
	background-position: 20px top;
	padding-top: 14px;
	position: absolute;
	z-index: 100;
	margin-top: -8px;
	background-size: 17px 15px;
}
.attention_balloon .inner {
	border: 2px solid #800200;
	padding: 8px 15px 8px 15px;
	border-radius: 5px;
	white-space: nowrap;
	background-color: #FFFFFF;
}
@media screen and (max-width: 940px) {	/* デザイン大枠（940px）以下 */
.attention_balloon {
	position: relative;
	display: table-cell;
}
.attention_balloon .inner {
	white-space: normal;
}
}

/*残り必須項目表示
---------------------------------------------------------------------------*/

#count_rest {
	text-align: center;
	position: fixed;
	top: 250px;
	right: 10px;
	background-color: #810100;
	color: #FFFFFF;
	font-size: 24px;
	line-height: 1em;
	border-radius: 8px;
	padding: 5px 20px 10px 20px;
	z-index: 9999;
}
#count_rest span.caption {
	color: #FFFFFF;
	font-size: 14px;
}
#remain_count {
	color: #FFFFFF;
}

@media screen and (max-width: 640px) {	/* スマホ640px以下 */
#count_rest {
	top: auto;
	bottom: 0px;
	right: 0px;
	border-radius: 0px;
	padding: 10px 0px 10px 0px;
	width: 100%;
}
#count_rest span.caption {
	vertical-align: middle;
}
#remain_count {
}
}

/*フォーム最下段　注釈
---------------------------------------------------------------------------*/

#more_info {
	border: 3px dotted #D0D0D0;
	padding: 35px 30px 20px 30px;
	border-radius: 8px;
	text-align: center;
	margin: 60px auto 0px auto;
}
#more_info p {
	padding-bottom: 15px;
}
@media screen and (max-width: 940px) {	/* 画面940px以下 */
#more_info {
	width: 95%;
}
}
@media screen and (max-width: 640px) {	/* スマホ640px以下 */
#more_info {
	border: 1px solid #D0D0D0;
	padding: 20px 20px 5px 20px;
	border-radius: 5px;
	text-align: left;
	width: 90%;
	margin: 0px auto 0px auto;
}
}

/*フォームtable設定
---------------------------------------------------------------------------*/

#form table {
	border-top: 1px solid #AFAFAF;
	border-left: 1px solid #AFAFAF;
}
#form th,#form td {
	border-right: 1px solid #AFAFAF;
	border-bottom: 1px solid #AFAFAF;
}
#form td {
	padding: 15px 25px 15px 25px;
	vertical-align: middle;
}
#form th {
	padding: 25px 15px 25px 15px;
	background-color: #EDECE8;
	width: 200px;
	font-weight: bold;
}
#form th p {
	float: left;
	width: 120px;
	line-height: 1.2em;
	padding-top: 2px;
}
#form th .icon {
	float: right;
	width: 45px;
}
#form th .icon img {
	width: 45px;
	height: auto;
}

@media screen and (max-width: 640px) {	/* スマホ640px以下 */
#form {
	margin-bottom: 30px;
}
#form th,#form td {
	width: 100%;
	display: block;
	padding: 8px 15px 8px 15px;
	float: left;
}
#form td {
	padding: 20px 15px 20px 15px;
}
#form th p {
	float: none;
	display: inline;
	width: auto;
	margin-right: 5px;
	vertical-align: middle;
}
#form th .icon {
	float: none;
	display: inline;
}
}

/*table内ブロック（共通）
---------------------------------------------------------------------------*/

.common_block {
	position: relative;
}
.common_block .ttl p {
	border-left: 6px solid #364049;
	padding: 2px 0px 2px 10px;
	font-weight: bold;
	line-height: 1.2em;
}
.w_ss {
	width: 60px;
}
.w_s {
	width: 90px;
	min-width: 90px;
}
.w_m {
	width: 40%;
	min-width: 190px;
}
.w_l {
	width: 70%;
	min-width: 250px;
}
.w_ll {

}
.attention_txt {
	display: inline-block;
	font-size: 12px;
	padding-left: 15px;
}
@media screen and (max-width: 940px) {	/* 画面940px以下 */
.attention_txt {
	display: block;
	padding: 8px 0px 8px 0px;
}
}
@media screen and (max-width: 640px) {	/* スマホ640px以下 */
.w_m,.w_l {
	width: 100% !important;
}
}

/*table内ブロック（資料・来場共通-お名前ブロック）
---------------------------------------------------------------------------*/

.name_block {
	display: table;
	float: left;
	width: 40%;
}
.name_block:first-child {
	margin-right: 5%;
}
.name_block .ttl,.name_block .input {
	display: table-cell;
}
.name_block .ttl {
	width: 3em;
}
.name_block .ttl p {	/* .common_block .ttl p をオーバーライド */
	border-left: 0px;
	padding: 0px 0px 0px 0px;
	font-weight: normal;
	line-height: 1.3em;
}
.name_block input {
	width: 100%;
}
@media screen and (max-width: 640px) {	/* スマホ640px以下 */
.name_block {
	float: none;
	width: 100%;
	margin-bottom: 15px;
}
.name_block:first-child {
	margin-right: 0px;
}
.name_block:last-child {
	margin-bottom: 0px;
}
}

/*table内ブロック（資料・来場共通-アドレスブロック）
---------------------------------------------------------------------------*/

.address_block {
	display: table;
	width: 100%;
	margin-bottom: 20px;
}
.address_block:last-child {
	margin-bottom: 0px;
}
.address_block .ttl,.address_block .input {
	display: table-cell;
	vertical-align: top;
}
.address_block .ttl {
	padding-top: 10px;
	width: 130px;
}
.zip_attention {
	font-size: 12px;
	margin-bottom: 20px;
	margin-top: -10px;
	clear: both;
}
@media screen and (max-width: 640px) {	/* スマホ640px以下 */
.address_block,.address_block .ttl,.address_block .input {
	display: block !important;
	width: 100% !important;
}
.address_block .ttl {
	margin-bottom: 10px;
}
}

/*table内ブロック（資料・来場共通-アドレスブロック-zip）
---------------------------------------------------------------------------*/

.zip_01,.zip_02,.hyphen {
	float: left;
}
.hyphen {
	height: 42px;
	line-height: 42px;
}
@media screen and (max-width: 940px) {	/* スマホ940px以下 */
.zip_01,.zip_02 {
	width: 90px;
}
}

/*table内ブロック（来場-希望日時ブロック）
---------------------------------------------------------------------------*/

.yoyaku_day_block {
	margin-bottom: 15px;
}
.yoyaku_day_block:last-child {
	margin-bottom: 0px;
}
.yoyaku_day_block .ttl {
	margin-bottom: 10px;
}

/*table内ブロック（来場-電話番号ブロック）
---------------------------------------------------------------------------*/

.yoyaku_tel_block {
	display: table;
	width: 100%;
	margin-bottom: 15px;
}
.yoyaku_tel_block:last-child {
	margin-bottom: 0px;
}
.yoyaku_tel_block .ttl,yoyaku_tel_block .input {
	display: table-cell;
}
.yoyaku_tel_block .ttl {
	width: 100px;
}
.yoyaku_tel_block .ttl p {	/* .common_block .ttl p をオーバーライド */
	border-left: 0px;
	padding: 0px 0px 0px 0px;
	font-weight: normal;
	line-height: 1.3em;
}

@media screen and (max-width: 640px) {	/* スマホ640px以下 */
.yoyaku_tel_block,.yoyaku_tel_block .ttl,.yoyaku_tel_block .input {
	display: block !important;
	width: 100% !important;
}
.yoyaku_tel_block .ttl {
	margin-bottom: 10px;
}
}

/*SUBMIT（ボタン1個/ボタン2個）ブロック共通
---------------------------------------------------------------------------*/

.submit,.submit_02 {
	padding: 60px 0px 150px 0px;
	margin: 0px auto 0px auto;
}
.submit {
	max-width: 344px;
}
.submit_02 {
	max-width: 700px;
}
.submit_01 ul,.submit_02 ul {
	display: table;
	width: 100%;
}
.submit_01 li,.submit_02 li {
	display: table-cell;
}
.submit .bg_btn,.submit_02 .bg_btn {
	width: 100%;
	height: 0;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: left top;
	border: none;
	text-indent: -9999px;
	cursor: pointer;
}
.submit_02 .space {
	width: 12px;
	height: 25px;
}
@media screen and (max-width:640px) {
.submit,.submit_02 {
	padding: 30px 5% 100px 5%;
}
.submit_02 ul {
	display: block;
	max-width: 344px;
	margin: 0px auto 0px auto;
}
.submit_02 li {
	display: block;
}
}

/*SUBMIT ボタン各種
---------------------------------------------------------------------------*/

.disabled {
    opacity: 0.7;
	filter: alpha(opacity=70);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=70)";  /* ie 8 */
}
.disabled input[type*="submit"]:hover {
	opacity: 1;
	filter: alpha(opacity=100);			/* ie lt 8 */
	-ms-filter: "alpha(opacity=100)";	/* ie 8 */
	cursor: default;
}
.btn_next_enquete {
	padding-bottom: 23.546%;	/*画像サイズの縦÷高さ*/
	background-image: url(../image/common/bg-btn_next_enquete.jpg);
}
.disabled .btn_next_enquete {
	background-image: url(../image/common/bg-btn_next_enquete_disabled.jpg);
}
.btn_next_confirmation {
	padding-bottom: 23.546%;	/*画像サイズの縦÷高さ*/
	background-image: url(../image/common/bg-btn_next_confirmation.jpg);
}
.btn_next_confirmation_disabled {
	background-image: url(../image/common/bg-btn_next_confirmation_disabled.jpg);
	opacity: 0.7;
}
.btn_next_confirmation_disabled:hover {
	opacity: 0.7;
}
.btn_next {
	padding-bottom: 23.546%;	/*画像サイズの縦÷高さ*/
	background-image: url(../image/common/bg-btn_next.jpg);
}
.btn_back {
	padding-bottom: 23.546%;	/*画像サイズの縦÷高さ*/
	background-image: url(../image/common/bg-btn_back.jpg);
}
.btn_submit {
	padding-bottom: 23.546%;	/*画像サイズの縦÷高さ*/
	background-image: url(../image/common/bg-btn_submit.jpg);
}

/*送信完了画面
---------------------------------------------------------------------------*/

#thanks {
	max-width: 700px;
	margin: 0px auto 0px auto;
	padding: 20px 5% 150px 5%;
}
#thanks p {
	margin-bottom: 20px;
}
#thanks .to_site {
	padding-top: 30px;
	text-align: center;
}
#thanks .to_site p {
	margin-bottom: 10px;
}
#thanks .to_site {
	max-width: 344px;
	margin: 0px auto 0px auto;
}
#thanks .to_site img {
	width: 100%;
	height: auto;
}
@media screen and (max-width:640px) {
#thanks {
	max-width: 100%;
	padding: 20px 5% 100px 5%;
}
}

/*ロード時非表示
---------------------------------------------------------------------------*/
.attention_balloon {
	display: none;
}

/*table内ブロック（資料・来場共通-希望日時（新）ブロック）
---------------------------------------------------------------------------*/

.booking_block {
	display: table;
	float: left;
	width: 25%;
	margin-right: 2%;
    margin-bottom: 1rem;
}
.booking_block .input {
	display: table-cell;
}
.booking_block input {
	width: 100%;
}
.name_block:last-child {
	margin-right: 0px;
}
@media screen and (max-width: 640px) {	/* スマホ640px以下 */
.booking_block {
	float: none;
	width: 100%;
	margin-right: 0px;
	margin-bottom: 15px;
}
}