@charset "utf-8";
#contact {
	width: 100%;
	height: auto;
	padding: 0 0 190px;
}
	.contact__inner {
		width: 83%;
		max-width: 1126px;
		height: auto;
		margin: 0 auto;
	}
		.contact__top {
			width: 100%;
			height: auto;
			padding: 144px 0 0;
			margin: 0 auto 20px;
		}
			.page_top__heading {
				width: 100%;
			}
		.contact__contents {
			display: flex;
			justify-content: flex-start;
			align-self: flex-start;
			width: 100%;
			height: auto;
		}
			.contact__contents__heading {
				width: calc((340 / 1126) * 100%);
				height: auto;
			}
				.contact__contents__heading__txt {
					width: 100%;
					height: auto;
					font-size: 20px;
					font-weight: 700;
					line-height: calc(29 / 20);
					letter-spacing: 0em;
					color: var(--color--black);
					opacity: 0;
					transform: translate(-10px,0%);
					transition: .8s;
					transition-delay: .5s;
				}
				.loaded .contact__contents__heading__txt {
					opacity: 1;
					transform: translate(0px,0%);
				}
			.contact__contents__body {
				flex: 1;
				height: auto;
				opacity: 0;
				transform: translate(-10px,0%);
				transition: .8s;
				transition-delay: .62s;
			}
			.loaded .contact__contents__body {
				opacity: 1;
				transform: translate(0px,0%);
			}
				.contact__contents__body__txt {
					width: 100%;
					height: auto;
					margin: 0 auto 30px;
					font-size: 18px;
					font-weight: 400;
					line-height: calc(26 / 18);
					letter-spacing: 0em;
					color: var(--color--black);
				}
				.contact__type_list {
					width: 100%;
					max-width: 614px;
					height: auto;
				}
					.contact__type_list__item {
						width: 100%;
						height: auto;
					}
					.contact__type_list__item:not(:last-of-type) {
						margin-bottom: 18px;
					}
						.contact__type_list__item__inner {
							display: block;
							width: 100%;
							height: auto;
							padding: 24px 42px 28px calc((68 / 612) * 100%);
							border-radius: 4px;
							background-color: var(--color--white);
							border: solid 1px var(--color--gray);
							position: relative;
						}
							.contact__type_list__item__inner::before,
							.contact__type_list__item__inner::after {
								content: '';
								display: block;
								position: absolute;
								pointer-events: none;
							}
							.contact__type_list__item__inner::before {
								width: calc(100% + 2px);
								height: calc(100% + 2px);
								border-radius: 4px;
								border: solid 2px var(--color--black);
								top: -1px;
								left: -1px;
								opacity: 0;
							}
						@media (any-hover: hover) {
							.contact__type_list__item__inner::before {
								transition: .4s;
							}
							.contact__type_list__item__inner:hover::before {
								opacity: 1;
							}
						}
							.contact__type_list__item__details {
								width: 100%;
								height: auto;
							}
								.contact__type_list__item__details dt {
									width: 100%;
									height: auto;
									margin: 0 auto 8px;
									font-size: 20px;
									font-weight: 700;
									line-height: calc(29 / 20);
									letter-spacing: 0em;
									color: var(--color--black);
								}
								.contact__type_list__item__details dd {
									width: 100%;
									height: auto;
									font-size: 16px;
									font-weight: 400;
									line-height: calc(24 / 16);
									letter-spacing: 0em;
									color: var(--color--black);
								}
							.contact__type_list__item__arrow {
								width: 14px;
								height: 14px;
								position: absolute;
								top: 50%;
								right: 18px;
								transform: translate(0%,-50%);
							}
								.contact__type_list__item__arrow img {
									position: absolute;
									top: 0;
									left: 0;
								}
								.contact__type_list__item__arrow img.off {
									opacity: 1;
									z-index: 1;
								}
								.contact__type_list__item__arrow img.on {
									opacity: 0;
									z-index: 2;
								}
							@media (any-hover: hover) {
								.contact__type_list__item__arrow img {
									transition: .3s;
								}
								.contact__type_list__item__inner:hover .contact__type_list__item__arrow img.off {
									opacity: 0;
								}
								.contact__type_list__item__inner:hover .contact__type_list__item__arrow img.on {
									opacity: 1;
								}
							}

/* PC ================================================== */
@media all and (min-width: 769px){

}

/* Tablet ================================================== */
@media all and (max-width: 768px){
/* contact */
#contact {
	padding: 0 0 140px;
}
	.contact__inner {
		width: calc((358 / 390) * 100%);
	}
		.contact__top {
			display: block;
			padding: 105px 0 0;
			margin: 0 auto 8px;
		}
		.contact__contents {
			display: block;
		}
			.contact__contents__heading {
				width: 100%;
				margin: 0 auto 62px;
			}
				.contact__contents__heading__txt {
					font-size: 16px;
					line-height: calc(24 / 16);
				}
			.contact__contents__body {
				flex: initial;
				width: 100%;
			}
				.contact__contents__body__txt {
					margin: 0 auto 18px;
					font-size: 16px;
					line-height: calc(24 / 16);
				}
				.contact__type_list {
					max-width: 400px;
					margin: 0 auto;
				}
						.contact__type_list__item__inner {
							padding: 30px 42px;
						}
						.contact__type_list__item:nth-of-type(2) .contact__type_list__item__inner {
							padding: 20px 42px 18px;
						}
								.contact__type_list__item__details dt {
									margin: 0 auto 8px;
									font-size: 16px;
									line-height: calc(24 / 16);
									text-align: center;
								}
								.contact__type_list__item__details dd {
									font-size: 14px;
									line-height: calc(24 / 14);
								}
							.contact__type_list__item__arrow {
								right: 6px;
							}
}

/* SP ================================================== */
@media all and (max-width: 575px){

}