@charset "utf-8";

/* ↓↓↓ common ↓↓↓ */
main {
  padding-top: 194px;
  margin-bottom: 85px;
}

@media screen and (max-width: 810px) {
  main {
    padding-top: 125px;
  }
}

@media screen and (max-width: 768px) {
	main {
		margin-bottom: 60px;
	}
}

/* ↑↑↑ common ↑↑↑ */

/* ↓↓↓ main_wrap ↓↓↓ */
.main_wrap {
  padding: 0 30px;
}

@media screen and (max-width: 768px) {
  .main_wrap {
    padding: 0 25px;
  }
}

.main_wrap .container {
  max-width: 900px;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  margin: 0 auto;
}

.main_wrap .form-area h3 {
  font-size: 3.2rem;
  font-weight: 300;
  letter-spacing: 0.35em;
  text-align: center;
}

@media screen and (max-width: 768px) {
	.main_wrap .form-area h3 {
		font-size: 2.4rem;
  }
}

.main_wrap .form-area h3 .s-txt {
	font-size: 1.8rem;
}

.form-area .top-block {
	max-width: 705px;
	margin: 75px auto 0;
}

@media screen and (max-width: 768px) {
	.form-area .top-block {
		margin: 40px auto 0;
  }
}

.form-area .top-block .lead {
	font-size: 1.6rem;
	letter-spacing: 0.26em;
	line-height: 1.8;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.form-area .top-block .lead {
		font-size: 1.4rem;
  }
}

.form-area .top-block .box {
	border: 8px solid #FDEDEC;
	padding: 30px 35px;
	margin-top: 45px;
}

@media screen and (max-width: 768px) {
	.form-area .top-block .box {
		padding: 20px 15px;
		margin-top: 30px;
  }
}

.form-area .top-block .box .txt {
	font-size: 1.4rem;
	font-family: var(--hiragino-w3);
	letter-spacing: 0.08em;
	line-height: 1.7;
	text-align: justify;
}

.form-area .top-block .note {
	font-size: 1.4rem;
	font-family: var(--hiragino-w3);
	letter-spacing: 0.08em;
	line-height: 1.36;
	margin-top: 20px;
}

.form-area .form-block {
	max-width: 720px;
	margin: 90px auto 0;
}

@media screen and (max-width: 768px) {
  .form-area .form-block {
    margin: 60px auto 0;
  }
}

.confirm .form-area .form-block,
.thanks .form-area .form-block {
	margin: 40px auto 0;
}

.form-area .form-block .form .lead {
	font-size: 1.8rem;
	font-family: var(--hiragino-w6);
  font-weight: bold;
}

.thanks .form-area .form-block .form .lead {
	text-align: center;
}

.form-area .form-block .form .lead .req {
	font-size: 1.2rem;
	color: var(--main-red);
}

.form-area .form-block .form .sub-lead {
	font-size: 1.4rem;
	font-family: var(--shingo-l);
	margin-top: 20px;
}

.thanks .form-area .form-block .form .sub-lead {
	font-family: var(--shingo-m);
	line-height: 2;
	text-align: center;
}

.form-area .form-block .form .inner {
	margin-top: 50px;
}

.form-area .form-block .form .item {
	font-size: 1.4rem;
	font-family: var(--shingo-l);
	display: flex;
}

@media screen and (max-width: 768px) {
	.form-area .form-block .form .item {
		flex-direction: column;
	}
}

.form-area .form-block .form .item:not(:first-of-type) {
	margin-top: 20px;
}

@media screen and (max-width: 768px) {
	.form-area .form-block .form .item:not(:first-of-type) {
		margin-top: 24px;
	}
}

.form-area .form-block .form .ttl {
	width: 150px;
}

@media screen and (max-width: 768px) {
	.form-area .form-block .form .ttl {
		width: 100%;
	}
}

.form-area .form-block .form .ttl p{
	display: flex;
	align-items: center;
}

.form-area .form-block .form .req-mark {
	font-size: 1rem;
	color: var(--main-red);
}

.form-area .form-block .form .cont {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	column-gap: 30px;
  row-gap: 12px;
}

#staff .form-area .form-block .form .cont {
	flex-direction: column;
	gap: 5px;
}

.form-area .form-block .form .cont.schedule .wrap {
	width: 100%;
	display: flex;
	column-gap: 30px;
  row-gap: 12px;
}

@media screen and (max-width: 768px) {
	.form-area .form-block .form .cont {
		flex-wrap: unset;
		flex-direction: column;
		column-gap: 20px;
		margin-top: 12px;
	}

	.form-area .form-block .form .cont.schedule {
		flex-wrap: wrap;
		flex-direction: row;
	}
}

.form-area .form-block .form .cont.date {
	flex-direction: column;
}

.form-area .form-block .form .note {
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	color: var(--main-red);
}

.form-area .form-block .form .bt-note {
	letter-spacing: 0.15em;
	line-height: 1.5;
	margin-top: 70px;
}

@media screen and (max-width: 768px) {
	.form-area .form-block .form .bt-note {
		margin-top: 45px;
	}
}

.form-area .form-block .form .cont .indent {
	display: block;
	text-indent: -1em;
	padding-left: 1em;
}

.form-area .form-block .form .cont.date .txt {
	margin-right: 15px;
}

@media screen and (max-width: 768px) {
	.form-area .form-block .form .cont.date .txt {
		margin-right: unset;
    margin-bottom: 5px;
    display: block;
	}
}

.form-area .form-block .form .cont.date {
	flex-direction: column;
}

.form-area .form-block .form .cont.radio label {
	display: block;
	text-indent: -1.2em;
	padding-left: 1.2em;
}

.form-area .form-block .form .cont input[type="text"],
.form-area .form-block .form select {
	max-width: 285px;
	flex: 1;
	min-height: 32px;
	border-radius: 4px;
	border: 1px solid #363636;
	padding: 5px 10px 4px;
}

@media screen and (max-width: 768px) {
	.form-area .form-block .form .cont input[type="text"],
	.form-area .form-block .form select {
		max-width: unset;
	}
}

.form-area .form-block .form .cont.date input[type="text"] {
	max-width: 63px;
}

@media screen and (max-width: 768px) {
	.form-area .form-block .form .cont.date input[type="text"] {
		max-width: calc(63/375*100vw);
	}
}

.form-area .form-block .form .cont:is(.radio,.schedule,.budget) input[type="text"] {
	max-width: 161px;
}

@media screen and (max-width: 768px) {
	.form-area .form-block .form .cont:is(.radio,.schedule,.budget) input[type="text"] {
		max-width: calc(161/375*100vw);
	}

	.form-area .form-block .form .cont.schedule input[type="text"] {
		max-width: calc(100/375*100vw);
	}
}

.form-area .form-block .form .cont.consult input[type="checkbox"] {
	margin-right: 5px;
}

.form-area .form-block .form .cont.mail input[type="text"],
.form-area .form-block .form .cont.address input[type="text"] {
	max-width: unset;
}

.form-area .form-block .form .cont textarea {
	min-height: 155px;
	flex: 1;
	border-radius: 8px;
	border: 1px solid #363636;
	padding: 5px 10px 4px;
}

.form-area .form label+input {
	margin-left: 55px;
}

@media screen and (max-width: 768px) {
	.form-area .form label+input {
		margin-left: 10px;
	}
}

.form-area .form-block .form select {
  -webkit-appearance: none;
  appearance: none;
	padding-right: 24px;
}


.form-area .form .select-wrap {
	position: relative;
	max-width: 285px;
	flex: 1;
	display: flex;
}

@media screen and (max-width: 768px) {
	.form-area .form .select-wrap {
		max-width: unset;
	}
}

.form-area form .select-wrap::before {
	content: '';
	position: absolute;
	width: 4px;
	aspect-ratio: 1/1;
	border-style: solid;
	border: solid #000;
	border-width: 0 1px 1px 0;
	rotate: 45deg;
	top: 13px;
  right: 14px;
}

.form-area .form input[type="file"] {
	display: none;
}

.form-area .form .cont.file .file-wrap {
	display: flex;
	gap: 10px;
}

@media screen and (max-width: 768px) {
	.form-area .form .cont.file .file-wrap {
		flex-wrap: wrap;
		gap: 10px;
	}
}

.form-area .form .cont.file input.file-name:placeholder-shown {
	background-color: #EFEFEF;
}
.form-area .form .cont.file input.file-name {
	max-width: 300px;
	cursor: default;
}

.form-area .form .cont.file label {
	min-width: 104px;
	height: 32px;
	font-size: 1.2rem;
	text-align: center;
	color: #fff;
	background-color: #363636;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	padding: 0 5px;
	transition: opacity ease .3s;
}

@media screen and (min-width: 769px) {
	.form-area .form .cont.file label:hover {
		opacity: .7;
	}
}

.form-area .form .form-btn-block {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin: 35px auto 0;
}

@media screen and (max-width: 768px) {
	.form-area .form .form-btn-block {
		flex-direction: column;
		gap: 10px;
	}
}

.form-area .form button,
.form-area .form .backpage {
	width: 240px;
	height: 50px;
	font-size: 1.4rem;
	font-family: var(--shingo-l);
	text-align: center;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #363636;
	border: 1px solid #727272;
	cursor: pointer;
}

.form-btn-block .send button {
	background-color: var(--main-red);
	border: 1px solid #fff;
}

.form-area .form .error {
	font-size: 1.6rem;
	font-family: var(--shingo-db);
	color: var(--main-red);
	margin-top: 8px;
}

.form-area .form .error+.error {
	margin-top: 3px;
}

.form-btn-block .btn {
	position: relative;
	width: fit-content;
	margin: 0 auto;
	cursor: pointer;
	transition: border-radius ease .3s;
}

@media screen and (min-width: 769px) {
	.form-btn-block .btn:hover {
		border-radius: 30px;
	}
}

.form-btn-block .btn::before,
.form-btn-block .btn::after {
	content: '';
	position: absolute;
	width: 9px;
	height: 1px;
	background-color: #fff;
	right: 13px;
}

.form-btn-block .btn::before {
	transform: rotate(45deg);
	top: 21px;
}

.form-btn-block .btn::after {
	transform: rotate(-45deg);
	top: 27px;
}

.form-btn-block .back .btn::before {
	transform: rotate(-45deg);
	top: 21px;
	left: 13px;
}

.form-btn-block .back .btn::after {
	transform: rotate(45deg);
	top: 27px;
	left: 13px;
}

.form-area .form .form-note {
	font-size: 1.2rem;
	display: block;
	text-align: justify;
	text-indent: -1rem;
	padding-left: 1rem;
	margin: 20px auto 0;
}

.form-area .form-block .u-note {
	font-size: 1.2rem;
	font-weight: 300;
	letter-spacing: 0.08em;
	color: #707070;
	margin-top: 60px;
}

@media screen and (max-width: 768px) {
	.form-area .form-block .u-note {
		margin-top: 40px;
	}
}


/* policy */
.form-area .policy-block {
	font-size: 1.4rem;
	margin: 40px auto 0;
}

.form-area .policy-block .head {
	letter-spacing: 0.5em;
  text-align: center;
}

.form-area .policy-block .policy-lead {
	letter-spacing: 0.15;
  text-align: center;
	margin-top: 15px;
}

.form-area .policy-block .box {
  height: 180px;
  border: 1px solid #707070;
  padding: 15px 15px 8px;
  margin-top: 12px;
}

@media screen and (max-width: 768px) {
  .form-area .policy-block .box {
		padding: 10px 10px 8px;
    margin: 10px auto 0;
  }
}

.form-area .policy-block .box .scroll-wrap {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

.form-area .policy-block .box .txt {
  line-height: 1.64;
  letter-spacing: 0.1em;
  text-align: justify;
}

.form-area .policy-block .check-wrap {
	display: flex;
	padding: 0 10px;
	gap: 10px 60px;
	margin-top: 18px;
}

@media screen and (max-width: 768px) {
	.form-area .policy-block .check-wrap {
		flex-direction: column;
		align-items: center;
		margin-top: 25px;
  }
}

.form-area .policy-block .check-wrap .link {
	position: relative;
	width: fit-content;
	height: 1.4em;
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	display: block;
	padding-right: 25px;
	transition: opacity ease .3s;
}

@media screen and (min-width: 768px) {
	.form-area .policy-block .check-wrap .link:hover {
		opacity: .7;
  }
}

.form-area .policy-block .check-wrap .link::before {
	content: '';
	position: absolute;
	width: 16px;
	aspect-ratio: 16/15;
	background: url(../img/common/icon-outlink.svg) no-repeat;
	background-size: contain;
	transform: translateY(-50%);
	top: 50%;
	right: 0;
}

.form-area .policy-block .check-wrap label {
  position: relative;
  width: fit-content;
  text-align: center;
  cursor: pointer;
  display: flex;
	background-color: #E6E6E6;
  padding: 8px 12px 8px 20px;
	transition: opacity ease .3s;
}

@media screen and (min-width: 768px) {
	.form-area .policy-block .check-wrap label:hover {
		opacity: .7;
  }
}

.form-area .policy-block .check-wrap label {
	color: var(--main-red);
}

.form-area .policy-block .check-wrap label input {
	cursor: pointer;
	margin: 0 2px 0 15px;
}

.form-area .submit-btn .btn.disactive {
  pointer-events: none;
  opacity: 0.7;
}

.form-area .submit-btn .btn:not(.disactive) {
  pointer-events: visible;
  cursor: pointer;
}

/* ↑↑↑ main_wrap ↑↑↑ */