@charset "utf-8";

/* --------------------------------------------


contact


---------------------------------------------- */
#main {
	min-height: 90vh;
	padding-top: 8em;
	padding-bottom: 5em;
}
h1.title {
    text-align: center;
	letter-spacing: .3rem;
}
@media only screen and (max-width:1023px) {
	#main {
		padding-top: 6em;
		padding-bottom: 10em;
	}
}
@media only screen and (max-width:640px) {
	h1.title {
		letter-spacing: .2rem;
	}
}
/* --------------------------------------------
formWrap
---------------------------------------------- */
.formWrap {
	width: 90%;
	max-width: 1024px;
	margin: 3em auto 0;
    padding: 2em 1em 0;
	border-top: 2px solid var(--c-blue);
}

.formWrap .form_group {
	width: 90%;
	margin: 0 auto;
	/* display: grid;
	grid-template-columns: 22rem 1fr;
	padding: 6rem 0 0.8rem; */
}

.formWrap dl {
	/* margin: 0 auto 3rem; */
	font-size: 1.6rem;
}

.formWrap dt {
	display: block;
	/* margin-bottom: 2.4rem; */
    /* padding-top: .5rem; */
	font-weight: bold;
    line-height: 2.5;
	letter-spacing: .1rem;
}

.formWrap dt span {
    margin-left: .5em;
    padding: 0 .5em .1em;
	color: var(--c-white);
	font-size: 0.8em;
    background-color: var(--c-red);
}

.formWrap dd {
	margin-bottom: 3rem;
	letter-spacing: .1rem;
	/* padding: .5em .8em; */
}

@media screen and (max-width: 640px) {

	.formWrap .form_group {
		width: 100%;
		padding: 3rem 0 0.8rem;
		grid-template-columns: 1fr;
	}

	.formWrap dl {
		margin: 0 auto 1rem;
	}

	.formWrap dt {
		margin-bottom: 0.4em;
		padding-top: 0;
	}

	.formWrap dd {
		margin-bottom: 2rem;
		padding: 0;
	}

}

/* --------------------------------------------
項目レイアウト調整
---------------------------------------------- */
.formWrap dd span.yubin {
	display: inline-block;
	width: 1.8em;
}

.formWrap .yubin + input {
	width: 10em;
}


input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
	padding: 8px;
    border: 2px solid var(--c-gray);
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin: 0 5px 0 0;
    box-sizing: border-box;
}

input[type="radio"]::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: var(--c-green);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 0.2s ease;
}

input[type="radio"]:checked::before {
    transform: translate(-50%, -50%) scale(1);
}

.radio {
	display: inline-block;
	padding: .3rem 0 .5rem;
}


select.select {
	width: 8em;
}

input,
select,
option,
textarea {
	width: 100%;
	padding: 0.5em 0.8em;
	border: 1px solid var(--c-gray-deep);
	/* background-color: var(--c-yellow-pale); */
	cursor: pointer;
	transition: 0.5s;
}

select {
	appearance: auto;
}

textarea {
	height: 10em;
}

::placeholder {
	color: var(--c-gray-deep);
}

select:hover {
	cursor: pointer;
}

input:focus,
select:focus,
option:focus,
textarea:focus {
	outline: none;
	border: 1px solid var(--c-gray);
	background-color: var(--c-gray-pale);
}

input[type="text"]:not(:first-child) {
	margin-top: .8em;
}

@media screen and (max-width: 640px) {

	.formWrap {
		width: 87%;
		max-width: none;
		padding: 0;
	}

	.formWrap dl {
		font-size: 1.4rem;
	}

	.formWrap dd {
		font-size: 1.6rem;
	}

	input,
	select,
	option,
	textarea {
		font-size: 1.5rem;
	}

	input[type="radio"] {
		width: 30px;
		height: 30px;
		padding: 8px;
		margin: 0 10px 0 0;
	}

	input[type="radio"]::before {
		width: 20px;
		height: 20px;
	}
}

/* --------------------------------------------
フォームボタン
---------------------------------------------- */
.form_btn {
	margin-top: 4em;
	text-align: center;
}
.click,
.clickBack {
	display: inline-block;
	width: 15em;
	padding: 1em;
	border: none;
	border-radius: 50px;
	letter-spacing: .2rem;
	transition: .3s;
}
.click:hover,
.clickBack:hover {
    transform: scale(1.02);
}
.click {
	color: var(--c-white);
	background-color: var(--c-blue);
	font-weight: var(--fw-bold);
}
.clickBack {
	margin-right: 1em;
	color: var(--c-blue);
	background-color: var(--c-white);
	border: 2px solid var(--c-blue);
}

/*--- Responsive ---*/
@media screen and (max-width: 640px) {
	.clickBack {
		margin-right: 0;
		margin-bottom: 1em;
	}
}

/* --------------------

送信完了画面

-------------------- */
.formMessage p {
	text-align: center;
	padding-bottom: 1rem;
}

.formMessage__note {
	text-align: center;
}

.formMessage__note h2 {
	display: inline-block;
	padding: 2em 1em .5em;
	font-size: var(--fz-l);
	font-weight: var(--fw-medium);
}
.formMessage__note p {
	text-align: center;
}
.formMessage__contact {
	width: 100%;
	max-width: 28em;
	margin: 1.5em auto 0;
	padding: 1.5em;
	border-radius: 25px;
	border: 4px solid var(--c-blue);
}
.formMessage__contact b {
	display: block;
	padding-bottom: .5em;
}

#form a.click {
	display: block;
	margin: 3em auto 0;
	text-align: center;
}

@media screen and (max-width: 640px) {
	.formMessage {
		margin: 3em auto 1em;
	}
	.formMessage p {
		text-align: left;
	}
	.formMessage__note h2 {
		padding: 1em 1em .5em;
	}
	.formMessage__contact {
		padding: 1.5em 1.2em;
		text-align: left !important;
	}
	.formMessage__contact b {
		text-align: center;
	}
}
/* --------------------

privacy-policy

-------------------- */
.privacy-policy {
	width: 90%;
	height: 300px;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0 auto 4em;
	padding: 2em;
    border: 1px solid var(--c-gray-deep);
}
.privacy-policy .subTitle {
	font-size: var(--fz-m);
}
.privacy-policy .title {
	margin-bottom: 1rem;
	text-align: center;
	font-size: var(--fz-xl);
	font-weight: var(--fw-bold);
	letter-spacing: .3rem;
}
.privacy-policy .text {
	margin-bottom: 1rem;
}
.privacy-policy dl {
	margin: 0 auto;
}
.privacy-policy dt {
	margin-bottom: 0;
	line-height: 1.5;
}
.privacy-policy dd {
	padding: 0;
}
.privacy-policy ol {
	margin-left: 1rem;
}
.privacy-policy .sign {
	text-align: right;
}
@media screen and (max-width: 640px) {
.privacy-policy {
	width: 100%;
}
}
/* .privacy-policy::-webkit-scrollbar {
  width: 8px;
}
.privacy-policy::-webkit-scrollbar-button {
  display: none;
}
.privacy-policy::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 4px;
}
.privacy-policy::-webkit-scrollbar-track {
  background: #eee;
} */