@charset "UTF-8";

/* ========================================================================== */

/* S T Y L E . C S S */

/* ========================================================================== */

#form form {
	width: 100%;
	margin: 0 auto;
}
#form .stdTable {
	max-width: 1024px;
	margin: 0 auto;
	border-top: .99px solid #888;
}

		@media (max-width: 460px) {
			.radio_select h5 span {
				font-size: 12px;
				margin: 0 0 0 10px;
			}
			.radio_select h5 {
				font-size: 14px;
				padding: 2px 0 5px 10px;
			}
		}


/* ───────────────────────────────────────────────────────────── CONTACT CSS */
.contact {
	padding: 100px 0;
}
.contact h4 {
	text-align: center;
	font-size: 16px;
	line-height: 1.4em;
	margin: 15px 0 25px;
}
.contact dl {
	padding: 30px 0;
	background-color: transparent!important;
	border: none;
	overflow: hidden;
	display: flex;
	align-items: center;
  border-bottom: .99px solid #888;
}
.contact dl dt {
	width: 30%;
	padding: 2px 0 5px 15px;
	border: none;
	background: none;
	font-size: 13px;
	font-weight: bold;
	clear: both;
  letter-spacing: 0.2em;
	display: inline-block;
  position: relative;
}
.contact dl dt span {
	color: #8cc227;
	font-size: 14px;
	font-weight: normal;
	margin: 0 0 0 20px;
}
.required {
	color: #fff!important;
	font-size: 12px!important;
	font-weight: bold!important;
	text-align: center;
	width: 48px;
	padding: 5px 12px;
	border-radius: 3px;
  background-image: linear-gradient(to right, #716144 0%, #9b855e 100%);
  position: absolute;
  right: 20px;
  top: -2px;
}
.any {
	color: #fff!important;
	font-size: 12px!important;
	font-weight: bold!important;
	text-align: center;
	width: 48px;
	padding: 5px 12px 5px;
	border-radius: 3px;
	background-color: #666;
  position: absolute;
  right: 20px;
  top: -2px;
}
.contact dl dd {
	width: 100%;
	padding: 0;
	border: none;
	background-color: transparent!important;
}
.form-two li {
	float: left;
	width: 49%;
}
.form-two li:first-child {
	margin: 0 2% 0 0;
}
.form-two input[type="text"] {
	width: 100%!important;
}
.contact input[type="text"], .ontact input[type="password"], .contact input[type="tel"], .contact input[type="email"], .contact input[type="lineid"] {
	display: block;
	padding: 15px;
  background-color: rgba(255,255,255,0.5);
	border: none;
	width: 100%;
	outline: none;
	font-size: 14px !important;
	border-radius: 5px;
	box-sizing: border-box;
}
.contact select {
	display: block;
	padding: 15px;
  background-color: rgba(255,255,255,0.5);
	border: none;
	width: 85px;
	outline: none;
	font-size: 14px !important;
	border-radius: 5px;
	box-sizing: border-box;
	-webkit-appearance: none;
}
.contact textarea {
	width: 100%;
	height: 200px;
	border: none;
	border-radius: 6px;
	padding: 15px;
	box-sizing: border-box;
  background-color: rgba(255,255,255,0.5);
}
.radio_select {
	background: #f7f7f8;
	overflow: hidden;
	padding: 0 40px 30px;
	box-sizing: border-box;
	margin: 25px 0 0;
	border-radius: 7px;
}

		@media screen and (max-width: 1024px) {
			.contact {
				padding: 80px 0;
			}
			.contact dl dt {
				width: 40%;
			}
		}
		@media screen and (max-width: 900px) {
			.contact {
				padding: 100px 0 50px;
			}
		}
		@media screen and (max-width: 768px) {
			#form form {
				width: 100%!important;
				margin: 0 auto;
				padding: 0 6%;
				box-sizing: border-box;
			}
			.contact dl dt {
				width: 50%;
			}
		}
		@media screen and (max-width: 600px) {
			.form-two li {
				float: none;
				width: 100%;
			}
			.form-two li:first-child {
				margin: 0 0 10px;
			}
			.contact dl {
				padding: 30px 0;
				ackground-color: transparent!important;
				order: none;
				verflow: hidden;
				isplay: flex;
				flex-direction: column;
				lign-items: center;
				order-bottom: 1px solid #888;
			}
			.contact dl dt {
				width: 100%;
				padding: 0 0 25px 0;
			}
		}
		@media screen and (max-width: 480px) {
			.contact h4 {
				font-size: 15px;
				box-sizing: border-box;
		    padding: 0 4%;
        margin: 15px 0 15px;
			}
		}
		@media screen and (max-width: 460px) {
			.contact dl dt span {
				font-size: 12px;
				margin: 0 0 0 10px;
			}
			.radio_select {
				padding: 0 20px 20px;
				margin: 25px 0 0;
				border-radius: 7px;
			}
			.contact select {
				width: 65px;
			}
		}
		@media screen and (max-width: 375px) {
      .required {
        right: 0;
      }
      .any {
        right: 0;
      }
		}


/* ───────────────────────────────────────────────────────────── BOTTON CSS */
.button {
	margin: 50px 0 0;
	display: flex;
	justify-content: center;
}
.contact-btn {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
	font-size: 15px;
	font-weight: 400;
	flex: 1 1 auto;
	padding: 18px 80px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transition: 0.5s;
	background-size: 200% auto;
	color: #fff;
	border: 1px solid #fff;
  border-radius: 0;
  box-sizing: border-box;
	background-color: transparent;
}
.contact-btn:hover {
  color: #fff;
  background-color: #9b855e;
  border: 1px solid #9b855e;
}
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
	position: relative;
	color: #fff;
	transition: 0.3s;
}
button::before, button::after {
	content: "";
	width: 0;
	height: 2px;
	position: absolute;
	transition: all 0.2s linear;
	background: #fff;
}
button:hover {
	opacity: 0.7;
}

		@media screen and (max-width: 1024px) {
			.contact-btn {
				padding: 18px 150px;
			}
		}
		@media screen and (max-width: 600px) {
			.contact-btn {
				padding: 10px 100px;
			}
		}


.guide-box {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 25px;
}
ul.guide {
	width: 40%;
	max-width: 500px;
	padding: 25px 0;
	display: flex;
	border-top: .99px solid #888;
	border-bottom: .99px solid #888;
	justify-content: center;
}
.guide li {
	width: 25%;
	font-weight: bold;
	text-align: center;
	position: relative;
	letter-spacing: 0.5em;
}
.guide li~li::before {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2px;
  width: 5px;
  height: 5px;
  margin: auto;
  border: solid #949494;
  border-width: 1px 1px 0 0;
  content: '';
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.guide li.current {
  color: #9b855e;
}

		@media (max-width: 768px) {
		  ul.guide {
				width: 50%;
			}
		}
		@media (max-width: 600px) {
			ul.guide {
				width: 60%;
			}
		}
		@media (max-width: 480px) {
      ul.guide {
				width: 60%;
        padding: 15px 0;
        margin-bottom: 15px;
      }
      .guide li {
        font-size: 0.7em;
        width: 32%;
      }
      .guide li~li::before {
        top: 0;
        left: -7px;
        width: 5px;
        height: 5px;
      }
		}