@charset "utf-8";

.gallery {
	display: flex;
	justify-content: space-between;
	padding-left: 0;
}
.gallery li {
	width: 32%;
}

.layout {
	display: flex;
}

.layout-img {
	width: 250px;
	margin-right: 20px;
}

.layout-txt {
	width: calc(100% - 270px);
}

/* ---------------------------------------------
	mailform > html
---------------------------------------------- */


.mailform { max-width: 100%; margin:2rem 0;}

/*table*/
.form-table { background-color: #fff;table-layout: fixed; }
.form-table th,
.form-table td { border:1px solid #ccc; }
.form-table th { color: #000; background-color: #eee; }

.form-table { border-collapse: collapse;width: 100%;margin:1rem 0 2rem 0; }
.form-table th,
.form-table td { padding: 1rem 1.5rem; }
.form-table th { width: 15rem; text-align: left; }
.form-table td { width: calc(100% - 15rem); }
.form-table td input,
.form-table td select,
.form-table td option,
.form-table td textarea { max-width: 100%;font-size: 1rem;}
.form-table input[type=radio],
.form-table input[type=checkbox] { margin-right: 5px; }
.form-table input[type="text"] { height: 1.5rem;line-height: 1.5rem;}
.form-table td .small { font-size: 0.8rem; line-height: 1.75em;margin:0.5rem 0 0 0;}
.form-table label:hover { cursor: pointer;}
.form-table-th { display: flex;justify-content: space-between;}

/*input*/
.form-table td input.w100, 
.form-table td select.w100,
.form-table td option.w100,
.form-table td textarea.w100 { width: calc(100% - 1.5rem); }
.form-table td input.w90, 
.form-table td select.w90,
.form-table td option.w90,
.form-table td textarea.w90 { width: 90%; }
.form-table td input.w80, 
.form-table td select.w80,
.form-table td option.w80,
.form-table td textarea.w80 { width: 80%; }
.form-table td input.w70, 
.form-table td select.w70,
.form-table td option.w70,
.form-table td textarea.w70 { width: 70%; }
.form-table td input.w60, 
.form-table td select.w60,
.form-table td option.w60,
.form-table td textarea.w60 { width: 60%; }


@media screen and (max-width: 700px) {
	.form-table { border-bottom: 0px; }
	.form-table th,
	.form-table td { width: 100%; display: block;padding: 0.5rem 1rem;}
	.form-table th { border-bottom: none!important; }
}

/*label*/
.form-table-th label { margin-bottom: 0; }
.label-area { width: 9rem; }
.required-area { width: 2.8rem;text-align: right;}
.required {color:#fff;background-color:#d74f2a;} /*必須*/
.required { font-size: 0.8rem; text-align: center;border-radius:2px;margin:0.25rem 0;padding: 0.25rem 0.5rem;} /*必須*/

@media screen and (max-width: 700px) {
	.label-area { width: auto; }
	.required-area { width: auto; }
	
}
@media screen and (max-width: 500px) {
	.form-table td select,
	.form-table td option { font-size: 0.8rem;}
}
/*ボタン全般*/
.kakunin-reset-area { display: flex; }
.submit-kakunin,
.input-reset,
.submit-back { font-size: 1.125rem;font-weight: bold;padding: 1rem 2rem; }
.submit-kakunin:hover, .submit-kakunin:active,
.submit-back:hover, .submit-back:active,
.input-reset:hover, .input-reset:active { cursor: pointer; }
/*ボタン全般*/
.submit-kakunin,
.input-reset,
.submit-back { color: #fff;border: 2px solid #fff;box-shadow: 0px 0px 0px 1px #cccccc,0px 0px 0px 0px #b7b7b7; }


/*確認画面へ, 送信する*/
.submit-kakunin { margin-right: 1rem; }

/*確認画面へ, 送信する*/
.submit-kakunin:hover,
.submit-kakunin:active { box-shadow: 0px 0px 0px 1px #cccccc,0px 0px 0px 0px #b7b7b7;}
/*確認画面へ*/
.submit-kakunin[name="submitConfirm"] { background-color:#138511; }
.submit-kakunin[name="submitConfirm"]:hover,
.submit-kakunin[name="submitConfirm"]:active { background-color:#25ad23; }
/*送信する*/
.submit-kakunin[name="submit-kakunin"] { background-color:#047294; }
.submit-kakunin[name="submit-kakunin"]:hover,
.submit-kakunin[name="submit-kakunin"]:active { background-color:#1da5cf; }

/*リセット*/
.input-reset { background-color: #a0a0a0; }
.input-reset:hover, .input-reset:active { background-color: #dd0000;}

/*入力画面へ戻る*/
.submit-back { background-color: #aaa; }
.submit-back:hover, .submit-back:active { background: #bbb; }


input::placeholder, 
input:-ms-input-placeholder,/* IE */
input::-ms-input-placeholder /* Edge */{
  color: #ddd;
}

@media screen and (max-width: 500px) {
	.kakunin-reset-area { display: block; }
}