@charset "utf-8";

.main{max-width: 1500px; width: 90%; margin: 30px auto 0;}
.main img{width: 100%;}
main p{text-align: center; margin-top: 20px;}

@media only screen and (max-width:640px){
	.main{max-width: 600px; width: 100%; margin: 30px auto 0;}
	main p{
		max-width: 600px; 
		text-align: center; 
		margin: 20px auto 0; 
		line-height: 1.4;
	}
}


/* hole */
.hole .side{margin-top: 20px; margin-bottom: 150px;}
.hole h2{margin-top: 100px;}
.hole .side li{
	width: 49%;
	background: #f3eff4;
	border: dashed 1px #a0857c;
	padding: 50px;
}
.hole .side li img,.hole .side li p{margin-top: 10px;}
.hole .side li img{width: 100%;}
.hole .side li p::before{
	content: url("../img/hole.png");
	display: inline-block;
	height: 20px;
	width: 20px;
	margin-right: 5px;
}
.hole .side li .btn{margin: 15px auto 0; max-width: 100%;}

@media only screen and (max-width:640px){
	.hole .side{margin-top: 20px; margin-bottom: 120px;}
	.hole h2{margin-top: 100px;}
	.hole .side li{width: 100%; padding: 30px;}
	.hole .side li:last-of-type{margin-top: 20px;}
}


/* yoyaku */
.yoyaku{margin: 80px 0 0; text-align: center;}
.yoyaku p{font-weight: 700; font-size: 1.3rem;}
.yoyaku h3{
	font-size: 2.5rem; 
	background: #97bbc6; 
	color: #fff; 
	font-weight: 700;
	max-width: 700px;
	margin: 20px auto;
	padding: 10px 0 20px 0;
}
.yoyaku h3 span{border-bottom: double 10px #b81a35;}

@media only screen and (max-width:640px){
	.yoyaku{margin: 50px 0 0; text-align: center;}
	.yoyaku h3{
		font-size: 3rem; 
		background: #97bbc6; 
		color: #fff; 
		margin: 20px auto;
		padding: 20px 5px 35px;
		line-height: 1.3;
	}
	.yoyaku p{line-height: 1.3; margin: 10px auto; font-size: 1.5rem;}
}


/* teian */
.teian{background: #f6f4f1; width: 100%; padding:50px 0; margin-top: 150px;}
.teian .side{align-items: center;}
.teian h3{
	text-align: center;
	margin-bottom: 40px; 
	line-height: 1.3; 
	font-family: "Noto Sans", sans-serif;
}
.teian .text-waku{width: 50%;}
.teian .text-waku h3{margin-bottom: 0;}
.teian .text-waku ul{
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center; 
	margin: 0 auto;
	padding:10px 0;
	width: 100%;
}
.teian .text-waku ul li{
    font-family: "Noto Sans", sans-serif;
	background: #3d62ac;
	color: #fff;
	padding:10px 0; 
	margin: 5px 0; 
	width: 81.25%;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
}
.teian .text-waku ul li:first-of-type,.teian .text-waku ul li:nth-child(2){}
.teian .img-waku{width: 50%; border-left: dashed 1px #a0857c;}
.teian img{margin: 0 auto; display: block; max-width: 600px; width: 100%;}

@media only screen and (min-width:1301px){
	.teian .text-waku ul {padding: 0 calc((100% - 61.458% - 10px) / 2);}
	.teian .text-waku ul li{width: 48.333%;}
	.teian .text-waku ul li:first-of-type,
	.teian .text-waku ul li:nth-child(2){
		width: 98.333%;
		margin: 5px calc((100% - 98.333%) / 2);}
	.teian .text-waku ul li:nth-of-type(2n+3) {margin: 5px 1.666% 5px 0;}
	
}

@media only screen and (max-width:1000px){
	.teian{padding:50px 20px; margin-top: 120px;}
	.teian h3{margin-bottom: 30px; line-height: 1.3;}
	.teian .text-waku{width: 100%; border-top:dashed 1px #a0857c; padding:40px 0;}
	.teian .text-waku h3{margin-bottom: 10px; font-size: 1.5rem;}
	.teian .text-waku ul{
		display: flex; 
		flex-wrap: wrap; 
		justify-content: center; 
		margin: 0 auto;
	}
	.teian .text-waku ul li{
		margin: 5px;  padding:10px 0;  width: 84.375%; font-size:1.5rem; font-weight: bold;
		max-width: 640px;}
	.teian .img-waku{
		width: 100%; 
		border-top:dashed 1px #a0857c;
		border-left: none; 
		padding-top:40px;
	}
	.teian img{margin: 0 auto; display: block; max-width: 600px; width: 100%;}
}


/* faq */
.faq{max-width: 1200px; width: 90%; margin:0 auto;}
.faq h2{margin: 80px 0 20px;}
.faq details {border-bottom: dashed 1px #231815;}
.faq details summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    font-weight: 700;
    cursor: pointer;
}
.faq details summary span::before{
	content: "Q";
	font-size: 1.7rem; 
	color: #97bbc6; 
	margin-right: 10px;
}
.faq details summary::-webkit-details-marker {display: none;}
.faq details summary::before,
.faq details summary::after {
    width: 3px;
    height: .9em;
    border-radius: 5px;
    background-color: #97bbc6;
    content: '';
}
.faq details summary::before {position: absolute; right: 2em; rotate: 90deg;}
.faq details summary::after {transition: rotate .5s;}
.faq details[open] summary::after {rotate: 90deg;}
.faq details p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 2em 1.5em;
    transition: transform .7s, opacity .7s;
}
.faq details[open] p{transform: none; opacity: 1;}
.faq details p span::before{
	content: "A";
	font-size: 1.7rem; 
	color: #ce7e7e;
	margin-right: 10px;
}
.faq details p strong{color: #b81a35; font-weight: 700; }

@media only screen and (max-width:640px){
	.faq details summary{font-size: 1.5rem;}
}