@charset "UTF-8";


/* --------------------------------------------------------------------------------------
	TOP
--------------------------------------------------------------------------------------- */

.contact-wrap {
	margin-top: 80px;
	position: relative;
	z-index: 1;
}

.contact-wrap .nav-banner {
	font-size: 0;
	left: -42px;
	margin-bottom: -20px;
	max-width: calc(1100px + 44px);
	position: relative;
	text-align: center;
	top: -20px;
}

.contact-wrap .nav-banner li {
	display: inline-block;
	margin-left: 42px;
	margin-top: 20px;
	min-width: 530px;
	text-align: left;
}

.contact-wrap > .text {
	margin-bottom: 42px;
	margin-top: 88px;
}

.contact-form > h2 {
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 3.2rem;
	text-align: center;
}

@media (max-width: 768px) {

	.contact-wrap { margin-top: 11.2vw; }

	.contact-wrap .nav-banner {
		left: auto;
		margin: 0 5.333vw;
		max-width: 100%;
		top: auto;
		width: auto;
	}

	.contact-wrap .nav-banner li {
		margin-left: 0;
		margin-top: 0;
		min-width: 89.333vw;
	}

	.contact-wrap .nav-banner li:nth-of-type(n+2) { margin-top: 20px; }

	.contact-wrap > .text {
		margin-bottom: 8.267vw;
		margin-top: 17.333vw;
	}

	.contact-wrap .faq-content { padding: 17.333vw 5.333vw; }

	.contact-wrap .faq-content h2,
	.contact-form > h2 { font-size: 7.467vw; }

	.contact-wrap .faq-inner { margin-top: 8.267vw; }

	.contact-wrap .faq-inner form input[type='text'],
	.contact-wrap .faq-inner form button { font-size: 3.733vw; }

	.contact-wrap .faq-inner form input[type='text'] {
		border-radius: .8vw 0 0 .8vw;
		height: 11.733vw;
		line-height: 11.733vw;
		max-width: 100%;
		padding: 0 6.133vw;
		width: 62.8vw;
	}

	.contact-wrap .faq-inner form button {
		background-position: calc(100% - 2.4vw) center;
		background-size: 4.4vw auto;
		border-radius: 0 .8vw .8vw 0;
		height: 11.733vw;
		letter-spacing: 0;
		max-width: 100%;
		padding-left: 2.333vw;
		text-align: left;
		width: calc(26.667vw - 1px);
	}

	.contact-wrap .faq-inner ol {
		left: auto;
		margin-bottom: 0;
		margin-top: 8.533vw;
		text-align: left;
		top: auto;
		width: auto;
	}

	.contact-wrap .faq-inner li {
		border-radius: 2.667vw;
		margin-left: 0;
		margin-top: 0;
		max-width: 43.2vw;
		min-height: 49.867vw;
	}

	.contact-wrap .faq-inner li:nth-of-type(even),
	.contact-wrap .other-banner li:nth-of-type(even) { margin-left: 2.933vw; }

	.contact-wrap .faq-inner li:nth-of-type(n+3),
	.contact-wrap .other-banner li:nth-of-type(n+3)  { margin-top: 2.933vw; }

	.contact-wrap .faq-inner li a { padding: 7.467vw 0; }
	.contact-wrap .faq-inner li a div { height: 19.2vw; }
	.contact-wrap .faq-inner li a div img { max-height: 19.2vw; }

	.contact-wrap .faq-inner li a p {
		font-size: 4.267vw;
		margin-top: 3.467vw;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------------------
	フォーム
--------------------------------------------------------------------------------------- */

.contact-form { margin-top: 80px; }

.contact-form > .text {
	margin-top: 40px;
	text-align: center;
}

.contact-form form {
	margin-top: 42px;
	text-align: center;
}

.contact-form form dl {
	border-top: 1px solid var(--border-color-thin);
	font-size: 0;
	text-align: left;
}

.contact-form form dl:last-of-type { border-bottom: 1px solid var(--border-color-thin); }

.contact-form form dt,
.contact-form form dd {
	display: inline-block;
	font-size: 1.6rem;
	padding: 30px 0;
	vertical-align: top;
	width: 100%;
}

.contact-form form dt {
	font-family: var(--font-UD-ShinGo-DeBold);
	max-width: 21.7%;
}

.contact-form form .middle dt {
	padding-top: 40px;
	vertical-align: middle;
}

.contact-form form .required::after {
	color: #ca0008;
	content: '※必須';
	display: inline-block;
	font-family: var(--font-UD-ShinGo-Regular);
	font-size: 1.419999rem;
	margin-left: 10px;
}

.contact-form form dd { max-width: 78.3%; }

.contact-form form dd .radio { font-size: 0; }

.contact-form form dd .radio li {
	display: inline-block;
	font-size: 1.6rem;
}

.contact-form form dd .radio li:nth-of-type(n+2) { margin-left: 50px; }

.contact-form form dd .radio li input[type='radio'],
.contact-form form .checkbox li input[type='checkbox'],
.contact-form .privacy input[type='checkbox'] { display: none; }

.contact-form form dd .radio li label {
	cursor: pointer;
	padding-left: 32px;
	position: relative;
}

.contact-form form dd .radio li label::before {
	border: 1px solid var(--border-color);
	border-radius: 100vw;
	content: '';
	display: block;
	height: 20px;
	left: 0;
	position: absolute;
	top: calc(50% - 10px);
	width: 20px;
}

.contact-form form dd .radio li input:checked + label::after {
	background-color: var(--color-deep-blue);
	border-radius: 100vw;
	content: '';
	display: block;
	height: 12px;
	left: 4px;
	position: absolute;
	top: calc(50% - 6px);
	width: 12px;
}

.contact-form form dd .at {
	font-size: 1.419999rem;
	margin: 14px 0;
}

.contact-form form dd input[type='text'],
.contact-form form dd input[type='number'],
.contact-form form dd input[type='tel'],
.contact-form form dd input[type='email'],
.contact-form form dd textarea {
	appearance: none;
	background-color: #fff;
	border: 1px solid var(--border-color-thin);
	border-radius: 6px;
	display: inline-block;
	font-size: 1.6rem;
	height: 48px;
	line-height: 48px;
	outline: none;
	padding: 0 20px;
	width: 100%;
}

.contact-form form dd input[type='text']:placeholder-shown,
.contact-form form dd input[type='number']:placeholder-shown,
.contact-form form dd input[type='tel']:placeholder-shown,
.contact-form form dd input[type='email']:placeholder-shown,
.contact-form form dd textarea:placeholder-shown {
	background-color: var(--color-gray-white);
	color: #9d9d9d;
}

.contact-form form dd input[type='number']::-webkit-outer-spin-button,
.contact-form form dd input[type='number']::-webkit-inner-spin-button { display: none; }

.contact-form form .address input:nth-of-type(n+2) { margin-top: 24px; }

.contact-form form dd .company-name,
.contact-form form dd .industry,
.contact-form form dd .department,
.contact-form form dd .job-title { max-width: 50%; }

.contact-form form .post-code,
.contact-form form .email { font-size: 0; }

.contact-form form .post-code .button {
	background-color: #333;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: var(--font-UD-ShinGo-DeBold);
	font-size: 1.419999rem;
	margin-left: 16px;
	padding: 8px 20px;
	vertical-align: middle;
}

.contact-form form .post-code > a {
	color: var(--color-deep-blue);
	display: inline-block;
	font-size: 1.6rem;
	margin-left: 24px;
	position: relative;
	text-decoration: underline;
	vertical-align: middle;
}

.contact-form form .post-code > a::after {
	background: url(../img/common/icon_blank.svg) no-repeat;
	content: '';
	display: inline-block;
	height: 20px;
	position: absolute;
	right: -32px;
	top: 1px;
	width: 20px;
}

.contact-form form .email { margin-top: 24px; }

.contact-form form .email > span {
	display: inline-block;
	font-size: 1.6rem;
	vertical-align: middle;
	width: 6%;
}

.contact-form form .email > input[type='email'] {
	margin-left: 2.6%;
	max-width: 91.3%;
}

.contact-form form .post-code input[type='number'],
.contact-form form .address .prefectures,
.contact-form form dd .tel { max-width: 22.3%; }

.contact-form form .schedule input[type='number'] { max-width: 104px; }

.contact-form form .schedule span {
	display: inline-block;
	margin-left: 16px;
}

.contact-form form .checkbox {
	display: table;
	min-width: 78%;
}

.contact-form form .checkbox:nth-of-type(n+2) {
	border-top: 1px solid var(--border-color-thin);
	margin-top: 16px;
	padding-top: 16px;
}

.contact-form form .checkbox ol {
	display: table-row;
}

.contact-form form .checkbox ol:first-of-type li { padding-bottom: 16px; }

.contact-form form .checkbox ol:nth-of-type(n+2) li {
	border-top: 1px solid var(--border-color-thin);
	padding-top: 16px;
}

.contact-form form .checkbox li {
	display: table-cell;
	font-size: 1.6rem;
}

.contact-form form .checkbox li:nth-of-type(n+2) { margin-left: 50px; }

.contact-form form .checkbox li label,
.contact-form .privacy label {
	cursor: pointer;
	padding-left: 32px;
	position: relative;
}

.contact-form form .checkbox li label::before,
.contact-form .privacy label::before {
	border: 1px solid var(--border-color);
	border-radius: 4px;
	content: '';
	display: block;
	height: 20px;
	left: 0;
	position: absolute;
	top: calc(50% - 10px);
	width: 20px;
}

.contact-form form .checkbox li input:checked + label::after,
.contact-form .privacy input:checked + label::after {
	background: url(../img/contact/icon_check.svg) no-repeat center center;
	content: '';
	height: 20px;
	left: 0;
	position: absolute;
	top: calc(50% - 10px);
	width: 20px;
}

.contact-form form dd textarea {
	height: auto;
	line-height: 1.6;
	min-height: 257px;
	padding: 16px 30px;
}

.contact-form .privacy {
	display: inline-block;
	margin: 40px auto auto;
}

.contact-form .privacy a { color: var(--color-deep-blue); }

.contact-form .form-banner {
	font-size: 0;
	margin-top: 62px;
	text-align: center;
}

.contact-form .form-banner .banner {
	display: inline-block;
	min-width: 350px;
}

.contact-form .form-banner li:nth-of-type(n+2) { margin-left: 32px; }


@media (max-width: 768px) {

	.contact-form { margin-top: 11.2vw ; }

	.contact-form > .text {
		margin: 5.6vw 5.333vw 0;
		text-align: left;
	}

	.contact-form form { margin: 8vw 5.333vw 0; }

	.contact-form form dt,
	.contact-form form dd {
		display: block;
		max-width: 100%;
		padding: 0;
	}

	.contact-form form dt {
		font-size: 3.733vw;
		padding-top: 5.333vw;
	}

	.contact-form form .middle dt { padding-top: 5.333vw; }

	.contact-form form .required::after {
		font-size: 3.2vw;
		margin-left: 3.2vw;
	}

	.contact-form form dd {
		margin-top: 4.267vw;
		padding-bottom: 5.333vw;
	}

	.contact-form form dd .radio li { font-size: 3.733vw; }
	.contact-form form dd .radio li:nth-of-type(n+2) { margin-left: 12vw; }

	.contact-form form dd .at {
		font-size: 3.333vw;
		margin: 2.933vw 0;
	}

	.contact-form form dd input[type='text'],
	.contact-form form dd input[type='number'],
	.contact-form form dd input[type='tel'],
	.contact-form form dd input[type='email'],
	.contact-form form dd textarea {
		border-radius: 1.067vw;
		font-size: 3.733vw;
		height: 11.6vw;
		line-height: 11.6vw;
		padding: 0 4vw;
	}

	.contact-form form dd .company-name,
	.contact-form form .post-code input[type='number'],
	.contact-form form dd .industry,
	.contact-form form dd .department,
	.contact-form form dd .job-title { max-width: 100%; }

	.contact-form form .post-code .button,
	.contact-form form .post-code > a { display: none; }

	.contact-form form .address .prefectures,
	.contact-form form dd .tel { max-width: 46vw; }

	.contact-form form .address input:nth-of-type(n+2) { margin-top: 2.133vw; }

	.contact-form form .email { margin-top: 3.2vw; }

	.contact-form form .email > span {
		font-size: 3.733vw;
		width: 16.667vw;
	}

	.contact-form form .email > input[type='email'] {
		margin-left: 0;
		max-width: 72.533vw;
	}

	.contact-form form .schedule input[type='number'] { max-width: 24.533vw; }

	.contact-form form .checkbox {
		display: block;
		width: auto;
	}

	.contact-form form .checkbox ol {
		display: block;
	}

	.contact-form form .checkbox li {
		display: block;
		font-size: 3.733vw;
		padding-bottom: 0;
	}

	.contact-form form .checkbox ol:first-of-type li { padding-bottom: 0; }

	.contact-form form .checkbox li:nth-of-type(n+2),
	.contact-form form .checkbox ol:nth-of-type(n+2) {
		margin-left: 0;
		margin-top: 4.267vw;
	}

	.contact-form form .checkbox ol:nth-of-type(n+2) li {
		border-top: none;
		padding-top: 0;
	}

	.contact-form form dd textarea {
		min-height: 58.667vw;
		padding: 2.133vw 4vw;
	}

	.contact-form .privacy { margin-top: 7.333vw; }

	.contact-form form .checkbox li label::before,
	.contact-form .privacy label::before { border-radius: .533vw; }

	.contact-form .form-banner { margin-top: 7.2vw; }

	.contact-form .form-banner .banner { min-width: 62.933vw; }
	.contact-form .form-banner .banner input { text-align: left; }

	.contact-form .form-banner li:nth-of-type(n+2) {
		margin-left: 0;
		margin-top: 4.267vw;
	}
}