@charset "UTF-8";
/* CSS Document */

#header_page {
	height: 450px;
	position: relative;
	top: 0;
	background-image: url("../../common/img/bg_header3.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	width:100%;
}
@media screen and (max-width: 450px) {
	#header_page {
		height: 200px;
	}
}

.form-menu {
	display: flex;
	border-bottom: 1px solid #999;
	margin-bottom: 2em;
}
.form-menu li {
	text-align: center;
	box-sizing: border-box;
	width: 50%;
}
.form-menu li:first-child {
	border-right: 1px solid #999;
}
.form-menu li:first-child a:after {
	content: "フォーム";
}
.form-menu li a {
	display: block;
	background: #eee;
	color: #999;
	font-weight: 700;
	padding: 1em;
	cursor: pointer;
}
.form-menu li .off:hover {
	background: #162A41;
	color: #fff;
}
.form-menu li .on {
	background: #F5EFE9;
	color: #162A41;
	cursor: default !important;
}

.need:before {
	content: "必須";
	background: #C7D882;
	color: #162A41;
	padding: 1px 0.7em 1px 1em;
	font-size: 75%;
	font-weight: 700;
	margin-right: 0.75em;
	letter-spacing: 0.3em;
}

.check-list {
	display: flex;
	flex-wrap: wrap;
}
.check-list li {
	margin-right: 5px;
	margin-bottom: 5px;
}

.check-list.col-2 li {
	width: calc((100% - 5px) / 2);
}
.check-list.col-2 li:nth-child(2n) {
	margin-right: 0;
}

.checked {
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	border-radius: 2px;
	display: block;
	padding: 5px 1em;
	border: 1px solid #ddd;
	background: #fff;
	line-height: 1.4em;
}

.schedule {
	font-weight: 700;
	padding: 5px;
	/*border-bottom: 2px solid #506787;*/
	color: #506787;
}

input[type="text"],
textarea {
	width: 100%;
	max-width: 100%;
	font: inherit;
	border: none;
	padding: 0.2em;
	background: #f5f5f5;
	border-radius: 4px;
}

input[type="radio"],
input[type="checkbox"] {
	vertical-align: middle;
	margin: 0 5px 5px 0;
}

input[type="submit"] {
	background: #C7D882;
	color: #162A41;
}

input[type="reset"],
input[type="button"]{
	background: #90A7B0;
	color: #fff;
}

input[type="submit"],
input[type="reset"],
input[type="button"]{
	border: none;
	display: inline-block;
	width: 300px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	border-radius: 4px;
	font-size: 125%;
	font-weight: 700;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	text-shadow: none;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover{
	background: #162A41;
	color: #FFF;
	cursor: pointer;
}


.selectbox {
    width:100%;
  position:relative;
}
select{
  -webkit-appearance:none;
    appearance:none;
  width:100%;
  padding:1em 1em;
  box-sizing:border-box;
  font-size:1em;
  border:#ccc 1px solid;
  border-radius:0;
  background:#fff;
}
.selectbox::after{
  content:"";
  display:block;
  width:12px;
  height:12px;
  position:absolute;
  right:6%;
  top:40%;
  border-bottom:#333 2px solid;
  border-right:#333 2px solid;
  transform:rotate(45deg)translateY(-30%);
}
.color.selectbox select{
  background:#f0f0f0;
  color:#162A41;
}
.color.selectbox::after{
  border-bottom:#162A41 3px solid;
  border-right:#162A41 3px solid;
}

.tel-box {
	margin: 2em 0;
	background: #F5EFE9;
	text-align: center;
	padding: 1.5em;
}
.tel-box h4 {
	font-size: 135%;
	letter-spacing: 0.1em;
	border-bottom: 2px solid #162A41;
	margin-bottom: 0.75em;
	padding: 0 0.5em 0.5em;
}
.tel-box .tel-number{
	font-size: 120%;
}
.tel-box .tel-number span {
	font-size: 175%;
	font-weight: 700;
	margin-right: 0.5em;
}
.tel-box .tel-number span:before {
	content: "TEL";
	font-size: 80%;
	margin-right: 0.3em;
}

.h4_error {
	color: #F00;
	margin-bottom: 1em;
	font-size: 125%;
}
.error_messe {
	font-size: 110%;
	margin-bottom: 7px;
}

@media screen and (max-width:450px) {
	input[type="text"],
	textarea {
		width:100%;
		padding:5px;
		font-size:110%;
		display:block;
	}
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		display:block;
		width:100%;
		height:40px;
		line-height: 40px;
		margin-bottom: 10px;
	}
}