@charset "UTF-8";

/* ---------------------------------------
  contact
-----------------------------------------*/
@media screen and (min-width: 768px) {
	#pagettl {
		background-image: url(../img/contact/pagettl_pc.jpg);
	}

	.contents_wrap .main {
		width: 792px;
	}

	.contents_wrap .side {
		width: 210px;
	}
}

@media screen and (max-width: 767px) {
	#pagettl {
		background-image: url(../img/contact/pagettl_sp.jpg);
	}

	.contents_wrap .main {
		padding-bottom: 15rem;
	}
}


/* contact
--------------------------------*/

/* lead
----------------*/
#sec_contact .lead {
	padding: 90px 0 50px;
}

#sec_contact .lead .txt {
	text-align: center;
	font-weight: 500;
	font-size: 1.8rem;
}

#sec_contact .lead .note {
	text-align: center;
	font-size: 1.5rem;
	margin-top: 1em;
}


/* contact_tel
----------------*/
.contact_tel {
	position: relative;
	margin-bottom: -100px;
}

.contact_tel * {
	color: #fff;
}

.contact_tel .wrap {
	padding: 50px;
	background-color: #0066cc;
}

.contact_tel .ttl {
	text-align: center;
	font-weight: 700;
	font-size: 2.6rem;
	line-height: 1.5;
	margin-bottom: 1em;
}

.contact_tel .ttl .ico {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: .5em;
	vertical-align: -.2em;
}

.contact_tel .ttl .ico img {
	width: 100%;
}

.contact_tel .flex {
	justify-content: center;
}

.contact_tel .item {
	text-align: center;
	width: 460px;
	padding: 0 40px;
}

.contact_tel .item + .item {
	border-left: 1px solid #fff;
}

.contact_tel .item .num {
	font-weight: 700;
	font-size: 3.2rem;
	line-height: 1.2;
}

.contact_tel .item .time {
	font-size: 1.4rem;
	line-height: 1.5;
	margin-top: .3em;
}


/* contact_form
----------------*/
.contact_form {
	padding: 160px 0 100px;
	background-color: #f2f7fc;
}

.contact_form .wrap {
	padding: 60px 154px 70px;
	background-color: #fff;
	border-radius: 30px;
}

.contact_form .ttl {
	text-align: center;
	color: #0066cc;
	font-weight: 700;
	font-size: 2.6rem;
	line-height: 1.5;
	margin-bottom: 1em;
}

.contact_form .ttl .ico {
	width: 24px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: .5em;
}

.contact_form .ttl .ico img {
	width: 100%;
}

.contact_form .ttl + .txt {
	font-size: 1.5rem;
	line-height: 1.733;
	letter-spacing: 0.05em;
	text-align: justify;
}

.contact_form .form_wrap {
	margin: 20px auto 0;
}

.contact_form .form .box {
	position: relative;
	border-bottom: 1px solid #e5e5e5;
	padding: 30px 0;
}

.contact_form .form .box dl {
	display: flex;
	justify-content: space-between;
}

.contact_form .form .box dl.phone dd {
	display: flex;
}

.contact_form .form .box dl + dl {
	margin-top: 40px;
}

.contact_form .form .box dl dt,
.contact_form .form .box dl dd,
.contact_form .form .box dl dd p,
.contact_form .form label {
	font-size: 1.6rem;
	line-height: 1.5;
	letter-spacing: 0.05em;
}


.contact_form .form .box dl dt {
	width: 245px;
	margin-top: 10px;
}

.contact_form .form .box dl dt .must {
	display: inline-block;
	color: #fff;
	font-size: 1.2rem;
	letter-spacing: 0.1em;
	padding: 0 .275em;
	height: 17px;
	line-height: 17px;
	margin-left: 1em;
	background-color: #0066cc;
}

.contact_form .form .box dl dd {
	width: 547px;
}

.contact_form .form .box dl.name dd p {
	line-height: 1;
	width: calc(2.8em + 214px);
}

.contact_form .form .box dl dd.flex {
	justify-content: space-between;
}

.contact_form .form .box dl dd span.txt {
	display: inline-block;
	min-width: 2.8em;
}

.contact_form .form input[type="text"],
.contact_form .form input[type="email"],
.contact_form .form input[type="tel"],
.contact_form .form select,
.contact_form .form textarea {
	height: 48px;
	padding: .5em 1em;
	border: 1px solid #e5e5e5;
	background-color: #f7f7f7;
	width: 100%;
	font-size: 1.6rem;
	line-height: 1.875;
}

.contact_form .form input.short {
	width: 214px;
}

.contact_form .form input.short2 {
	width: 129px;
}

::placeholder {
	color: #c1c1c1;
}

:-ms-input-placeholder {
	color: #c1c1c1;
}

::-ms-input-placeholder {
	color: #c1c1c1;
}


/*textarea*/

.contact_form .form .message textarea {
	height: 220px;
	resize: vertical;
	overflow: auto;
}


/*check*/
.contact_form .form .checkwrap {
	display: flex;
	flex-wrap: wrap;
	margin-top: 10px;
}

.contact_form .form .checkwrap li,
.contact_form .form .checkwrap .wpcf7-list-item {
	min-width: 50%;
	margin: 0;
}

.contact_form .form .checkwrap .wpcf7-list-item-label {
	font-size: 1.6rem;
	line-height: 2;
	letter-spacing: 0.1em;
}

.contact_form .form .checkwrap li:nth-child(n + 3),
.contact_form .form .checkwrap .wpcf7-list-item:nth-child(n + 3) {
	margin-top: 5px;
}

.contact_form .form .checkwrap label {
	position: relative;
}

.contact_form .form .checkwrap li label,
.contact_form .form .checkwrap .wpcf7-list-item label {
	letter-spacing: 0;
}

.contact_form .form input[type=checkbox] {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	visibility: hidden;
}

.contact_form .form input[type=checkbox] + span {
	display: inline-block;
	position: relative;
	padding-left: 30px;
	cursor: pointer;
}

.contact_form .form input[type=checkbox] + span::before {
	content: "";
	width: 18px;
	height: 18px;
	border: 1px solid #e5e5e5;
	background-color: #f7f7f7;
	position: absolute;
	top: 5px;
	left: 0;
}

.contact_form .form input[type=checkbox]:checked + span::before {
	border: 1px solid #0066cc;
	background-color: #0066cc;
}

.contact_form .form input[type=checkbox]:checked + span::after {
	content: "";
	width: 11px;
	height: 7px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
	position: absolute;
	top: 9px;
	left: 4px;
}

/*phone*/
.contact_form .form .box .phone span.txt {
	font-weight: 700;
	min-width: inherit;
	display: inline-block !important;
	font-weight: bold;
	margin: 0 .5em;
	padding-top: 11px;
}

/*privacy*/
.contact_form .form .privacy {
	border: none;
	padding: 30px 0 0;
}

.contact_form .form .privacy .txt {
	letter-spacing: 0.05em;
}

.contact_form .form .privacy .txt a {
	color: #0066cc;
	text-decoration: underline;
}

.contact_form .form .privacy .checkwrap {
	display: block;
	margin: 20px 0 0;
}

/*submitbtn*/
.contact_form .form .submitbtn {
	position: relative;
	width: 356px;
	height: 60px;
	background-color: #0066cc;
	margin: 30px auto 0;
	z-index: 2;
	overflow: hidden;
	transition: .4s ease;
}

.contact_form .form .submitbtn::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: #00a0e9;
	position: absolute;
	top: 0;
	left: -100%;
	z-index: -1;
	transition: .4s ease;
}

.contact_form .form .submitbtn .arw {
	width: 4px;
	height: 4px;
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
	right: 22px;
	top: 50%;
	margin-top: -2px;
	transition: .4s ease;
	will-change: background-color;
	z-index: 1;
}

.contact_form .form .submitbtn .arw::before,
.contact_form .form .submitbtn .arw::after {
	content: "";
	position: absolute;
	transition: .4s ease;
	will-change: transform;
}

.contact_form .form .submitbtn .arw::before {
	width: 11px;
	height: 2px;
	background-color: #fff;
	border-radius: 1px;
	left: -18px;
	top: 1px;
}

.contact_form .form .submitbtn .arw::after {
	width: 8px;
	height: 8px;
	border-right: 2px solid #fff;
	border-top: 2px solid #fff;
	border-radius: 1px;
	right: 0;
	top: 2px;
	transform: rotate(45deg) scale(0);
	transform-origin: right top;
}

.contact_form .form .submitbtn input {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 1.5;
	letter-spacing: 0.1em;
	padding: 10px 64px 10px 60px;
	background-color: transparent;
	position: relative;
	cursor: pointer;
}


@media screen and (min-width: 769px) {
	.contact_form .form .submitbtn:hover::before {
		left: 0;
	}

	.contact_form .form .submitbtn:hover .arw {
		background-color: transparent !important;
	}

	.contact_form .form .submitbtn:hover .arw::before {
		transform: translateX(8px);
	}

	.contact_form .form .submitbtn:hover .arw::after {
		transform: rotate(45deg) scale(1);
	}

}

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

	/* lead
----------------*/
	#sec_contact .lead {
		padding: 14rem 0 8rem;
	}

	#sec_contact .lead .txt {
		font-size: 2.6rem;
		letter-spacing: 0.05em;
	}

	#sec_contact .lead .note {
		font-size: 2.25rem;
		letter-spacing: 0;
	}


	/* contact_tel
----------------*/
	.contact_tel {
		margin-bottom: -27rem;
	}


	.contact_tel .wrap {
		padding: 5rem 6rem 6rem;
	}

	.contact_tel .ttl {
		font-size: 3.9rem;
		margin-bottom: .75em;
	}

	.contact_tel .ttl .ico {
		width: 3.7rem;
		height: 3.7rem;
	}

	.contact_tel .item {
		width: 100%;
		padding: 3rem 0 0;
	}

	.contact_tel .item + .item {
		border-left: none;
		border-top: .2rem solid #fff;
		margin-top: 3rem;
	}

	.contact_tel .item .num {
		font-size: 4.6rem;
	}

	.contact_tel .item .time {
		font-size: 2.1rem;
	}


	/* contact_form
----------------*/
	.contact_form {
		padding: 36rem 0 15rem;
	}

	.contact_form .wrap {
		width: 100%;
		padding: 8rem;
		border-radius: 4.5rem;
	}

	.contact_form .ttl {
		font-size: 3.9rem;
	}

	.contact_form .ttl .ico {
		width: 3.6rem;
		height: 2.7rem;
	}

	.contact_form .ttl .ico img {
		width: 100%;
	}

	.contact_form .ttl + .txt {
		font-size: 2.25rem;
		letter-spacing: 0;
	}

	.contact_form .form_wrap {
		margin: 5rem auto 0;
	}

	.contact_form .form .box {
		border-bottom: .2rem solid #e5e5e5;
		padding: 4rem 0;
	}

	.contact_form .form .box dl {
		display: block;
	}

	.contact_form .form .box dl + dl {
		margin-top: 5rem;
	}

	.contact_form .form .box dl dt,
	.contact_form .form .box dl dd,
	.contact_form .form .box dl dd p,
	.contact_form .form label,
	.contact_form .form .checkwrap .wpcf7-list-item-label {
		font-size: 2.4rem;
	}

	.contact_form .form .box dl dt {
		width: 100%;
		margin-top: 0;
    margin-bottom: 1em;
	}

	.contact_form .form .box dl dt .must {
		font-size: 1.8rem;
		height: 2.6rem;
		line-height: 2.6rem;
	}

	.contact_form .form .box dl dd {
		width: 100%;
	}

	.contact_form .form .box dl.name dd p {
		line-height: 1;
		width: calc(2.5em + 22rem);
	}

	.contact_form .form .box dl dd.flex {
		justify-content: space-between;
	}

	.contact_form .form .box dl dd span.txt {
		display: inline-block;
		min-width: 2.5em;
	}

	.contact_form .form input[type="text"],
	.contact_form .form input[type="email"],
	.contact_form .form input[type="tel"],
	.contact_form .form select,
	.contact_form .form textarea {
		height: 7.2rem;
		font-size: 2.4rem;
	}

	.contact_form .form input.short {
		width: 22rem;
	}

	.contact_form .form input.short2 {
		width: 16.2rem;
	}

	/*textarea*/

	.contact_form .form .message textarea {
		height: 33rem;
	}


	/*check*/
	.contact_form .form .checkwrap {
		margin-top: 0;
	}

	.contact_form .form .checkwrap li,
	.contact_form .form .checkwrap .wpcf7-list-item {
		min-width: inherit;
		width: 100%;
	}

	.contact_form .form .checkwrap li+li,
	.contact_form .form .checkwrap .wpcf7-list-item + .wpcf7-list-item {
		margin-top: 1rem;
	}


	.contact_form .form input[type=checkbox] + span {
		padding-left: 4.5rem;
	}

	.contact_form .form input[type=checkbox] + span::before {
		width: 3.2rem;
		height: 3.2rem;
		top: .3rem;
	}


	.contact_form .form input[type=checkbox]:checked + span::after {
		width: 2rem;
		height: 1.1rem;
		border-left: .2rem solid #fff;
		border-bottom: .2rem solid #fff;
		top: 1rem;
		left: .5rem;
	}

	/*privacy*/
	.contact_form .form .privacy {
		padding: 4.5rem 0 0;
	}


	.contact_form .form .privacy .checkwrap {
		margin: 3rem 0 0;
	}

	/*submitbtn*/
	.contact_form .form .submitbtn {
		width: 53rem;
		height: 9rem;
		margin: 6rem auto 0;
	}

	.contact_form .form .submitbtn .arw {
		width: .5rem;
		height: .5rem;
		right: 3.4rem;
		margin-top: -.25rem;
	}

	.contact_form .form .submitbtn .arw::before {
		width: 1.8rem;
		height: .3rem;
		border-radius: .15rem;
		left: -2.6rem;
		top: .1rem;
	}

	.contact_form .form .submitbtn .arw::after {
		content: none;
	}

	.contact_form .form .submitbtn input {
		font-size: 2.4rem;
		padding: 2rem 9rem 2rem 8.6rem;
	}
}


/*エラー用*/

.wpcf7-not-valid-tip {
	display: block;
}

.wpcf7-list-item {
	display: block;
}

.wpcf7-list-item + .wpcf7-list-item {
	margin-top: 4px;
}

@media screen and (max-width: 768px) {
	.wpcf7-list-item + .wpcf7-list-item {
		margin-top: 1vw;
	}
}