@charset"utf-8";

.contact_area {
	padding: 0;
	position: relative;
}
.contact_area .page-title {
	padding: 10vw 0;
	margin-bottom: 10vw;
	background: #FFDA00 url(../img/contact/contact_ttl_bg.webp) 95% center no-repeat;
	background-size: 32.5%;
	position: relative;
}
.contact_area .page-title:after {
	display: block;
	content: "";
	width: 100%;
	height: 2.5vw;
	border-radius:0 0 50% 50% /0 0 100% 100%;
	background: #FFDA00;
	position: absolute; z-index: -1;
bottom: -2.5vw; left: 0; right: 0; margin: auto;

}
.contact_area .hurry {
	margin-bottom: 5vw;
	border: 1px solid #333;
	padding: 0.5rem
}
.contact_area .hurry {
	background: #FFDA00;
	font-weight: bold;
}
.contact_area .hurry a {
	display: block;
	color: #333;
}
.contact_area .hurry a strong {
	font-size: 1.5rem;
}
.contact_area .hurry a span { color: #333; }
.contact_area .hurry span {
	display: block; font-size: 0.9rem;
}



.form_step {
	display: flex;
	align-content: center;
	align-items: center;
}
.form_step li {
	flex-basis: 33%;
	padding: 0.5rem;
	background: #F0F0F0;
	position: relative;
	text-align: center;
	font-weight: bold;
	margin-bottom: 5vw;
	font-size: 0.9rem;
}
.form_step li:nth-child(1):after,
.form_step li:nth-child(2):after {
display: inline-block;
z-index: 1; color: #F0F0F0;
font-weight: 700;
content: "\f0da";
font-family: "Font Awesome 5 Pro";
font-size: 1.5rem;
position: absolute;
right: -0.5rem;
top: 0; bottom: 0;
margin: auto;
width: 1.5rem;
height: 1.5rem; line-height: 1;
text-align: right;
}
.form_step li:nth-child(1) {
	z-index: 3;
}
.form_step li:nth-child(2) {
	z-index: 2;
	width: 34%;
}
.form_step li:nth-child(3) {
	z-index: 1;
}
.form_step .current {
	color: #fff;
	background: #005DAB;
}
.form_step li.current:after {
	color: #005DAB;
}

.form_step ~ .notes.complete {
	margin: 5vw auto;
}
.complete ~ .address-box {
	margin: 5vw auto;
	padding: 1rem;
	border: 1px solid #ccc;
}
.complete ~ .address-box dt {
	font-weight: bold;
	font-size: 1.1rem;
}
.complete ~ .address-box span {
	display: block;
}


@media screen and (min-width: 900px) {
.contact_area .page-title:before {
	display: block;
	content: "";
	width: 100%;
	height: 1rem;
	border-radius:0 0 50% 50% /0 0 100% 100%;
	background: #FA4A12;
	position: absolute;
top: -0.5rem; left: 0; right: 0; margin: auto;
}
.contact_area .page-title {
	padding: 50px 0;
	margin-bottom: 10%;
	background: #FFDA00 url(../img/contact/contact_ttl_bg.webp) 90% center no-repeat;
	background-size: contain;
	font-size: 2rem;
}
.contact_area .page-title:after {
	height: 2rem; bottom: -2rem; 

}
.contact_area .hurry {
	margin-bottom: 5%;
}
.contact_area .hurry {
	background: #FFDA00;
	font-weight: bold;
}
.contact_area .hurry a {
	display: block;
	color: #333;
}
.contact_area .hurry a strong {
	font-size: 2rem;
	vertical-align: middle;
	padding: 0 2rem;
	letter-spacing: 0.1rem;
}
.contact_area .hurry span {
	display: inline;
}
.form_step li span {
	display: inline;
}
.form_step li {
	padding: 1rem;
	margin-bottom: 5%;
	font-size: 1.1rem;
}
.form_step li:nth-child(1):after,
.form_step li:nth-child(2):after {
font-size: 2rem;
right: -0.5rem;
width: 2rem;
height: 2rem;
}
.form_step ~ .notes {
	margin: auto;
	text-align: center;
}
.form_step ~ .notes.complete {
	margin: 0 auto 5% ;
}
.complete ~ .address-box {
	width: 60%;
	margin: auto;
	text-align: center;
}

}

/*[ form_area ] ------------------------------------------*/
.form_area {
	margin: 10vw auto;
}
.form_area .attention {
	margin: 0 auto 10vw;
	padding: 1rem;
	border: 1px solid #707070;
}

.form_area dl:not(:.address) {
	margin: 5vw auto 10vw;
}
.form_area dl.address {
	background: #f7f7f7;
	padding: 0 1rem;
}
.form_area dt {
	border-top: 1px solid #f0f0f0;
	padding-top: 1rem;
}
.form_area dd {
	padding-bottom: 1rem;
}
.form_area dt span {
	font-size: 0.9rem;
}
.form_area.confirm dd span {
	display: block;
	font-size: 0.9rem;
	background: #fff;
	padding: 0.5rem;
	border: 1px solid #ced2d3;
	border-radius: 1.3333333vw;
}

.form_area dt.requied:after {
	display: inline-block;
	content: "必須";
	color: #fff;
	background: #FA4A12;
	border-radius: 10px;
	padding: 2px 8px;
	font-size: 0.68rem;
	font-weight: bold;
}
.form_area dd input,
.form_area dd select,
.form_area dd textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	font-family: inherit;
	border-radius: 0;
	box-sizing: border-box;
	font-size: 1rem;
	color: inherit;
	margin-bottom: 1vw;
}
.form_area label {
	cursor: pointer;
}
.form_area dd input {
	background: #fff;
	padding: 0.5rem;
	width: 100%;
	border: 1px solid #ced2d3;
	border-radius: 1.3333333vw;
}
.form_area dd input.half-txt,
.form_area dd input.third-txt {
	display: inline-block;
}
.form_area dd input:focus,
.form_area dd textarea:focus {
  border: 1px solid #a8b4b6;
}
.form_area dd select {
	background: #fff url('data:image/svg+xml;utf8,<svg id="glyphicons-basic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="%23010000" id="chevron-down" d="M26.91425,13.12115,16.70709,23.32849a.99988.99988,0,0,1-1.41418,0L5.08575,13.12115a.50007.50007,0,0,1,0-.70715l2.8285-2.82806a.5.5,0,0,1,.70709,0L16,16.96436l7.37866-7.37842a.5.5,0,0,1,.70709,0l2.8285,2.82806A.50007.50007,0,0,1,26.91425,13.12115Z"/></svg>') center right 10px/16px 16px no-repeat;
	background-size: 1rem;
	padding: 0.5rem 2rem 0.5rem 0.5rem;
	width: 100%;
	border: 1px solid #ced2d3;
	/* border-color: #ddd; */
	border-radius: 1.3333333vw;
}
.form_area dd select::-ms-expand {
  display: none;
}


.form_area dd select:focus {
	border: 1px solid #a8b4b6;
	outline: none;
}
.form_area dd textarea {
	background: #fff;
	padding: 0.5rem;
	width: 100%;
	min-height: 6rem;
	border: 1px solid #ced2d3;
	margin-bottom: -1vw;
	border-radius: 1.3333333vw;
}

.form_area .agree {
	text-align: center;
	margin: 5vw auto 10vw;
}
.form_area .btn-list button,
.form_area .btn-list input[type="submit"] {
	display: block;
	padding: 1rem 0;
	background: #FA4A12;
	color: #fff;
	width: 100%;
	font-weight: bold;
font-size: 1.5rem;
cursor: pointer;
position: relative;
}
.confirm .btn-list {
	display: flex;
	flex-wrap: wrap;
	margin: 10vw auto;
}
.confirm .btn-list li {
	flex-basis: 100%;
	margin-bottom: 2.5vw;
}
.btn-list .back {
	margin: 5vw auto;
}
.btn-list a {
	display: block;
	margin: auto;
	padding: 1rem 0;
	background: #005DAB;
	color: #fff;
	width: 100%;
	font-weight: bold;
font-size: 1.5rem;
position: relative;
border-radius: 4px;
}
.form_area .btn-list button.btn_back {
	background: #005DAB;
}

.form_area .btn-list button:after,
.form_area .btn-list input[type="submit"]:after {
display: inline-block;
font-weight: 700;
content: "\f054";
font-family: "Font Awesome 5 Pro";
font-size: 1rem;
position: absolute;
right: 1rem;
top: 0; bottom: 0;
margin: auto;
width: 1rem;
height: 1rem; line-height: 1;
text-align: right;
}
.btn-list a:after,
.form_area .btn-list button.btn_back:after {
display: inline-block;
font-weight: 700;
content: "\f053";
font-family: "Font Awesome 5 Pro";
font-size: 1rem;
position: absolute;
left: 1rem; right: auto;
top: 0; bottom: 0;
margin: auto;
width: 1rem;
height: 1rem; line-height: 1;
}
.form_area .btn-list button:disabled,
.form_area .btn-list input[type="submit"]:disabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: default;
}


/*Checkboxes styles*/
.form_area input[type="checkbox"] { display: none; }

.form_area input[type="checkbox"] + label {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  vertical-align: middle;
	font-size: 1.5rem;
	font-weight: bold;
}

.form_area input[type="checkbox"] + label:last-child { margin-bottom: 0; } 

.form_area .agree input[type="checkbox"] + label:before,
.form_area .detail-list input[type="checkbox"] + label:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 2rem;  background: #fff;
  height: 2rem;
  border: 1px solid #ced2d3;
  margin-right: 10px;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

.form_area .agree input[type="checkbox"]:checked + label:before,
.form_area .detail-list input[type="checkbox"]:checked + label:before {
  width: 15px;
  margin: -10px 15px 0 0;
  border-radius: 0;
  border: 3px solid #333;
  opacity: 1;  background: transparent;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media screen and (min-width: 900px) {
.form_area {
	margin: 5% auto 10%;
}
.form_area .attention {
	margin: 5% auto;
	text-align: left;
}

.form_area dl {
	margin: 5% auto 0;
	position: relative;
}
.form_area dl.address {
	margin: auto;
	background: none;
	padding: 0;
	border-top: 1px solid #707070;
}
.form_area dl.address dd.address-box {
	padding: 0;
	width: 75%;
}
.form_area dl.address dd.address-box dl {
	margin: auto;
}
.form_area dl.address ~ dl {
	margin: auto;
}
.form_area dt {
	border-top: 1px solid #707070;
	padding: 1rem 0;
	position: absolute;
	left: 0;
	width: 22.5%;
}
.form_area dd {
	border-top: 1px solid #707070;
	padding: 1rem 0;
	margin-left: 22.5%;
}
.form_area dl.address dt,
.form_area dl.address dd {
	border: none;
}

.form_area dt span {
	font-size: 0.9rem;
}
.form_area.confirm dd span {
	border-radius: 4px;
}


.form_area dt.requied:after {
	right: 1rem;
	position: absolute;
}
.form_area dd input,
.form_area dd select,
.form_area dd textarea {
	margin-bottom: 0;
}
.form_area dd input {
	border-radius: 4px;
}
.form_area dd select {
	border-radius: 4px;
}
.form_area dd textarea {
	margin-bottom: 0;
	border-radius: 4px;
}

.form_area .agree {
	margin: 5% auto 10%;
}
.form_area .btn-list button,
.form_area .btn-list input[type="submit"] {
	padding: 1.5rem 4rem;
	margin: 0 auto;
	width: 60%;
}
.btn-list .back {
	margin: 5% auto;
}
.btn-list a {
	margin: 5% auto;
	width: 60%;
}
.confirm .btn-list {
	flex-wrap: nowrap;
	flex-direction: row-reverse;
	justify-content: space-between;
	margin: 5% auto;
}
.confirm .btn-list li {
	flex-basis: 49.5%;
	width: 100%;
	margin-bottom: 2.5%;
}
.confirm .btn-list button {
	width: 100%;
}

}


/*[ map ] ------------------------------------------*/

.map-area:after {
	background: #fff;
}


@media screen and (min-width: 900px) {
.map-area:after {
	width: 100%;
	height: 2rem;
	background: #fff;
}
}






