@charset "UTF-8";

main{
	background: url(/images/low/main-contact.jpg);
	background-size: cover;
	background-position: center;
	/* margin: 0 auto 6%; */
}
#contents01{
	max-width: var(--width02);
	width: 100%;
	margin: 0 auto 3%;
}
#contact{
	border-bottom: 1px solid var(--colorL);
	padding: 0 0 5%;

	.inner{
		max-width: var(--width02);
		width: 100%;
		margin: 0 auto;
		padding: 0;

		p.caption{
			margin: 0 auto 20px;
		}

		dl{
			display: flex;
			flex-wrap: wrap;
			margin: 0 auto 3%;
			
			&.main{
				border-top:1px solid var(--colorL);
				padding: 20px 0 0;

				dt{
					width:21%;
					margin: 0 0 10px;
					padding: 10px 30px 10px 10px;

					&.must{
						position: relative;
						
						&:after{
							content: "必須";
							background: var(--colorR);
							color: var(--colorW);
							font-size: var(--font-mini);
							padding: 0 5px;
							position: absolute;
							top: 10px;
							right: 10px;
							/* transform: translate(0,-50%); */
						}

					}
				}
				dd{
					width: 79%;
					flex-grow: 1;
					margin: 0 0 10px;
					padding: 0 10px;

					&.inner_flex{
						align-items: center;
					}

					span{
						font-size: 0.8rem;
					}
				}
			}

			&.sub{
				dt{
					width: 25%;
				}
				dd{
					width: 75%;
				}
			}
		}

		.box_scroll{
			border: 1px solid var(--colorL);
			border-radius: 10px;
			font-size: var(--font-menu);
			width: 100%;
			height:180px;
			margin: 0 auto 2%;
			padding: 10px 20px;
			overflow-y: scroll;

			h3{
				font-weight: 400;
				border-bottom: 1px solid var(--colorL);
				margin: 0 0 10px;
				padding: 0 0 10px;
			}
			p.memo{
				margin: 0 0 10px;
			}
			dl.sub{
				dt{
					font-weight: normal;
				}
			}
		}

		p.attention{
			text-align: center;
			margin: 10px auto 20px;
		}
	}

	&.confirm{
		.inner{
			dl{
				border-top:none;
				dt{
					border-bottom:1px solid var(--colorL);
				}
				dd{
					border-bottom:1px solid var(--colorL);
					padding: 10px 0;
				}
			}
		}

		#submit{
			#backBtn{
				margin: 10px auto 0;
			}
		}
	}
	&.thanks{
		.inner{
			max-width: var(--width03);
			width: 100%;
			margin: 0 auto;

			.wrap{
				h3{
					border-bottom:1px solid var(--colorL);
					margin: 0 0 20px;
					padding: 0 0 10px;
				}
				.info{
					background: var(--clear01);
					margin: 20px auto;
					padding: 10px 20px;
				}
				.totop{
					background: var(--color06);
					border-radius: 10px;
					text-align: center;
					display: block;
					width:240px;
					margin: 10px auto;
					padding: 10px 0;
				}
			}
		}
	}
}


@media all and (max-width:768px){
	#contact{
		width: 92%;
		margin: 0 auto;

		.inner{
			dl.main{
				dt{
					width: 100%;
					margin: 0 0 10px;
				}
				dd{
					border-bottom: 1px solid var(--colorL);
					width: 100%;
					margin: 0 0 10px;
					padding: 0 0 20px;
				}
			}
		}
	}
}