@charset "UTF-8";

main {
	background: url(/images/low/main-qa.jpg);
	background-size: cover;
	background-position: center;
}
.contents{
	.inner{
		.title{
			width: 100%;
			margin: 0 auto 20px;
		}
	}
}
#contents01{
	.inner{
		max-width: var(--width01);
		width: 95%;
		margin: 0 auto;

		p.caption{
			line-height: 1.6em;
			margin: 0 0 20px;
		}

		.box{
			width: 100%;
			margin: 0 auto 20px;

			h3{
				border-left: 3px solid var(--color02);
				line-height: 1.6em;
				width: 100%;
				margin: 0 auto 10px;
				padding: 10px;
			}

			details{
				width: 100%;
				margin: 0 0 2%;
				padding: 0;

				summary{
					background: var(--colorL);
					padding: 10px 10px 10px 30px;
					text-indent: -10px;
					position: relative;
					list-style: none;

					::-webkit-details-marker,
					&::marker{
						display: none;
					}
					&:before{
						content: "";
						background: var(--colorB);
						width: 10px;
						height: 1px;
						position: absolute;
						top: 50%;
						right: 15px;
						transform: translate(0,-50%);
						transition: all ease 0.5s;
					}
					&:after{
						content: "";
						background: var(--colorB);
						width: 1px;
						height: 10px;
						position: absolute;
						top: 50%;
						right: 20px;
						transform: translate(0,-50%);
						transition: all ease 0.5s;
					}
					b{
						display: inline-block;
						margin: 0 10px 0 0;
					}
				}
				&[open]{
					summary{
						&:before{
							display: none;
						}
						&:after{
							top: calc(50% - 5px);
							right: 25px;				
							transform: rotate(90deg)translate(0,-50%);
						}
					}
				}
				p{
					border-bottom: 1px solid var(--colorL);
					padding: 10px 10px 10px 30px;
					text-indent: -10px;

					b{
						display: inline-block;
						margin: 0 10px 0 0;
					}

					a{
						color: var(--color02);
						padding: 0 0 3px;
						position: relative;
						overflow: hidden;

						&:before,&:after{
							content: "";
							background: var(--color02);
							width: 100%;
							height: 1px;
							position: absolute;
							bottom: 0;
							opacity: 1;
							transition: all ease 0.5s;
						}
						&:after{
							right:0;
						}
						&:hover:after{
							right: -50px;
							opacity: 0;
						}
						&:before{
							width: 0%;
							left: 0;
							opacity: 0;
						}
						&:hover:before{
							width: 100%;
							left: 0;							
							opacity: 1;
						}
					}
				}
			}
		}
	}
}


@media screen and (min-width: 769px) {

}

@media screen and (max-width: 768px) {
	main{
		background: url(/images/low/main-qa.jpg);
		background-size: cover;
		background-repeat: no-repeat;
	}
	.contents{
		.inner{
			.title{
				margin: 0 auto 10px;
			}
		}
	}
	#contents01{
		.inner{
			#reserve{
				padding: 0 0 30px;
			}

			.box{
				details{
					summary{
						padding: 10px 40px 10px 30px;
					}
				}
			}
		}
	}
}