@charset "UTF-8";
/* CSS Document */
.del-05 {
	transition-duration: 0.5s!important;
	transition-delay: 0.2s!important;
}
.del-10 {
	transition-duration: 0.5s!important;
	transition-delay: 0.4s!important;
}
#pageWrap {
    /*padding: 0;*/
	background-color: #fffac6;
	text-align: left;
	h3,h4,h5,h6 {
		font-weight: 400;
	}
}
.boxWidth {
	container-type: inline-size;
}
#sec01 {
	position: relative;
	container-type: inline-size;
	h2 {
		position: absolute;
		color: #c09b61;
		width: 20em;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		font-size: 3cqw;
		text-align: center;
		-webkit-text-stroke: 5px #FFF;
		text-stroke: 5px #FFF;
		paint-order: stroke;
		/*text-shadow: 0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 20px #fff,0px 0px 30px #fff;*/
		 filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 6px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 10px rgba(255, 255, 255, 1));
		span {
			display: block;
			font-size: 58%;
			padding: 0.2em 0;
			color: #000;
			border-top: #000 solid 2px;
			border-bottom: #000 solid 2px;
		}
	}
}

#sec02 {
	background-color: #fff;
	margin-top: 50px;
	.flex {
		container-type: inline-size;
		padding-top: 20px;
		.leftBox {
			width:30%;
			padding: 0;
			display: flex;
			justify-content: flex-end;
			align-content: center;
			flex-wrap: wrap;
			h3 {
				font-size: 2.8cqw;
				font-weight: normal;
				letter-spacing: 0.2em;
				i {
					display: block;
					font-size: 50%;
					font-style: normal;
					letter-spacing: 0em;
				}
				span {
					font-size: 50%;
					margin-right: 0.6em;
					letter-spacing: 0em;
					position: relative;
					top: -0.2em;
				}
				span.si {
					top: -0em;
				}
			}
			p {
				font-size: 1.2cqw;
				padding-top: 1em;
			}
		}
		.centerBox {
			width:25%;
			padding: 0 20px;
		}
		.rightBox {
			width:45%;
			text-align: center;
			align-content: center;
			h3{
				color: #c09b61;
				font-size: 1.8cqw;
				line-height: 1.4;
			}
			p{
				font-size: 1.2cqw;
				padding-top: 1em;
			}
		}
	}
}


.btns {
	margin-top: 50px;
	a {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		text-align: center;
		background-color: #9e9e9f;
		width: 32%;
		padding: 15px 10px 0;
		box-shadow: 3px 3px 6px rgba(0,0,0,0.8);
		color: #fff;
		container-type: inline-size;
		h5 {
			width: 100%;
			font-size: 6cqw;
		}
		p {
			display: flex;
		justify-content: center;
		align-items: center;
			width: 100%;
			height: 3em;
			font-size: 4cqw;
			line-height: 1.3;
		}
		.sankaku {
			height: 2em;
		}
	}
}
.btns01 a:nth-of-type(1),
.btns02 a:nth-of-type(2),
.btns03 a:nth-of-type(3)
{
		background-color: #c09b61;
	}

h3.h3Tit {
	background-color: #c09b61;
	color: #fff;
	text-align: center;
	padding: 0.1em 1em;
	font-size: 2.5cqw;
	box-shadow: 3px 3px 6px rgba(0,0,0,0.8);
	margin-bottom: 20px;
	span {
		font-size: 70%;
		margin-left: 0.5em;
	}
}
.sec {
	background-color: #fff;
	margin-top: 50px;
}
#sec03 {
	
	.imgWrap {
		max-width: 1100px;
		align-items: center;
		padding: 30px 0;
		margin: 0 auto;
		.imgL {
			width: 60%;
			max-width: 660px;
		}
		.imgR {
			width: 39.1%;
			max-width: 430px;
		}
	}
}
h4.h4Tit {
	color: #a30028;
	text-align: center;
	padding: 0.5em 0;
	font-size: 1.8cqw;
}
.point {
	container-type: inline-size;
	dl {
			padding: 20px;
			dt {
				font-size: 4.2cqw;
				text-align: center;
				color: #a30028;
			}
			dd {
				padding-top: 1em;
				font-size: 2.8cqw;
				font-size: 3.0cqw;
				text-align: justify;
			}
		}
}
.flex02 {
	width: 95%;
	max-width: 900px;
	margin: 0 auto;
	padding-bottom: 30px;
	gap:30px 0;
	.point {
		width: 48%;
		background-color: #fffded;
		box-shadow: 3px 3px 6px rgba(0,0,0,0.8);
		
		h5 {
			background-color: #a30028;
			color: #fff;
			font-size: 4.6cqw;
			text-align: center;
			line-height: 1.1;
			padding: 0.6em;
			span {
				font-size: 60%;
				display: block;
			}
		}
		
	}
}
#sec03 .chobo {
	width: 95%;
	max-width: 1100px;
	margin: 30px auto;
	
	.imgBox {
		width: 100%;
		position: relative;
			p {
			display: block;
			position: absolute;
			font-size: 1.3cqw;
			background-color: #000;
			color: #fff;
			padding: 0.2em 1em;
		}
		p.tit {
			left: 0;
			top: 0;
		}
		p.park {
			transform: translateX(-50%);
			left: 44%;
			bottom: 40%;
		}
		p.school {
			transform: translateX(-50%);
			left: 51%;
			bottom: 13%;
		}
	}
	
}

#sec04 {
	
	.imgWrap {
		padding-top: 20px;
		width: 95%;
		max-width: 1100px;
		margin: 0 auto;
		.imgL {
			width: 59.1%;
			max-width: 650px;
			position: relative;
			.fig {
				position: absolute;
				left: 100%;
				bottom: 7%;
				width: 50%;
			}
		}
		.imgR {
			width: 40%;
			position: relative;
			img {
				position: absolute;
				width: 120%;
				top: 10%;
				right: 0;
			}
		}
	}
	
}
#sec05 {
	.imgWrap {
		width: 95%;
		max-width: 900px;
		margin: 0 auto;
		padding-top: 20px;
		margin-bottom: 30px;
		.imgL {
			width: 64%;
			max-width: 570px;
			position: relative;
			.fig {
				position: absolute;
				left: 59%;
        top: 60%;
				width: 90%;
			}
			.houi {
				position: absolute;
				left: 100%;
        bottom: 6%;
				width: 30%;
			}
		}
		.imgR {
			width: 33%;
			.typeBox {
				width: 100%;
				container-type: inline-size;
				h5 {
					font-size: 14cqw;
					font-weight: 200;
					line-height: 1.2;
					span.lg{
						font-style: normal;
						font-size: 250%;
					}
					span.ld{
						width: 100%;
						display: block;
						width: 100%;
						font-size: 80%;
						border-top: #000 solid 1px;
						border-bottom: #000 solid 1px;
						i {
							font-size: 120%;
							font-style: normal;
						}
					}
				}
				p.cap{
					padding: 0.3em 0;
					line-height: 1.3;
					font-size: 6cqw;
				}
				p.msk {
					padding: 0.3em 0;
					line-height: 1.6;
					font-size: 5cqw;
					span {
						font-size: 180%;
					}
				}
				p.msk2 {
					border-top: #000 solid 1px;
					padding-top: 0;
				}
			
		}
	}
		
}
}
#sec05 {
	.imgWrap2 {
		width: 95%;
		max-width: 900px;
		margin: 0 auto;
		padding-top: 20px;
		margin-bottom: 30px;
		.imgBox {
			width: 48%;
			
		}
		.pointBox {
			margin: 0;
			width: 48%;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			padding: 0;
			.point {
				width: 100%;
			}
		}
	}
}

#sec05 {
	.img01 {
		width: 95%;
		max-width: 900px;
		margin: 30px auto;
		position: relative;
		p {
			position: absolute;
			font-size: 1.2cqw;
			left: 0;
			top: 0;
			background-color: #000;
			color: #fff;
			padding: 0.2em 1em;
		}
	}
}
	
#sec05 {
	padding-bottom: 5%;
	.flex02 {
		.pImg {
			width: 48%;
			position: relative;
			p {
				position: absolute;
				left: 0;
				top: 0;
				background-color: #000;
				color: #fff;
				padding: 0.2em 1em;
				font-size: 1.2cqw;
			}
		}
		.p04 {
			align-self: flex-start;
		}

	}
}
.uLine {
	background: linear-gradient(transparent 60%, #fed600 60%);
	background-repeat: no-repeat;
	background-size: 0%;
	transition: 1.5s 0.5s;
}
.active .uLine {
	background-size: 100%;
}

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

}

@media screen and (max-width: 599px){
	#sec01 {
    h2 {
			width: 19em;
			position: static;
        font-size: 4.8cqw;
			transform: translate(0);
			margin: 20px auto;
			-webkit-text-stroke: 0px #FFF;
			text-stroke: 0px #FFF;
		 filter: none;
			span {
            font-size: 55%;
            border-top: #000 solid 1px;
            border-bottom: #000 solid 1px;
				margin-bottom: 0.6em;
        }
    }
	}
	
#sec02 {
	margin-top: 0px;
	padding-bottom: 30px;
	.flex {
		container-type: inline-size;
		padding-top: 20px;
		.leftBox {
			width:100%;
			padding: 0;
			display: block;
			h3 {
				font-size: 7.8cqw;
				text-align: center;
				i {
					display: block;
					font-size: 50%;
					font-style: normal;
					letter-spacing: 0em;
				}
				span {
					font-size: 50%;
				}
				span.si {
					top: -0em;
				}
			}
			p {
				font-size: 4.2cqw;
				font-size: clamp(13px, 4.2cqw, 14px);
				padding-top: 1em;
				text-align: center;
			}
		}
		.centerBox {
			width:100%;
			padding: 20px 15%;
		}
		.rightBox {
			width:100%;
			text-align: center;
			align-content: center;
			h3{
				color: #c09b61;
				font-size: 5cqw;
				line-height: 1.4;
			}
			p{
				font-size: 4.2cqw;
				font-size: clamp(13px, 4.2cqw, 14px);
				padding: 1em;
				text-align: justify;
				br {
					display: none;
				}
			}
		}
	}
}
	.btns {
		margin: 10px auto 0;
		width: 80%;
		a {
			width: 100%;
			padding: 10px 10px 0;
			margin-top: 10px;
			h5 {
				width: 100%;
				font-size: 6cqw;
			}
			p {
			}
			.sankaku {
			}
		}
	}
	h3.h3Tit {
		padding: 0.5em 1em;
		font-size: 6.0cqw;
		line-height: 1.3;
		span {
			display: block;
			font-size: 60%;
			margin-left: 0m;
		}
	}
	#sec03 {
		.imgWrap {
			display: block;
			padding: 10px 0;
			margin: 0 auto;
			.imgL {
				width: 100%;
				max-width: 660px;
			}
			.imgR {
				width: 80%;
				max-width: 430px;
				margin: 0 auto;
			}
		}
	}
	h4.h4Tit {
	text-align: center;
	padding: 0.5em 1em 1em;
	font-size: 4.4cqw;
	}
	.flex02 {
		padding-bottom: 30px;
		gap:15px 0;
		.point {
			width: 100%;

			h5 {
				background-color: #a30028;
				color: #fff;
				font-size: 5.6cqw;
				text-align: center;
				line-height: 1.1;
				padding: 0.6em;
				span {
					font-size: 60%;
					display: block;
				}
			}

		}
	}
	.point {
	container-type: inline-size;
		dl {
				padding: 20px;
				dt {
					font-size: 4.8cqw;
				}
				dd {
					font-size: 4cqw;
				}
			}
	}
	#sec03 .chobo {
		width: 100%;
		margin: 15px auto;
		.imgBox {
			width: 300%;
			p {
			font-size: 3.8cqw;
			}
		}

	}
	#sec04 {
		.imgWrap {
			padding-top: 0px;
			width: 95%;
			max-width: 1100px;
			margin: 0 auto;
			.imgL {
				width: 100%;
				.fig {
					position: static;
					width: 70%;
					margin: 0 auto;
				}
			}
			.imgR {
				width: 80%;
				margin: 0 auto;
				position: relative;
				img {
					position: static;
					width: 100%;
				}
			}
		}

	}
	#sec05 {
	.imgWrap {
		.imgL {
			.fig {
				width: 98%;
			}
			.houi {
				width: 50%;
			}
		}
	}
	}
	#sec05 {
		.imgWrap2 {
			display: block;
			.imgBox {
				width: 60%;
margin: 0 auto 15px;
			}
			.pointBox {
				width: 100%;
			}
		}
	}
	#sec05 {
		.img01 {
			p {
				position: static;
				font-size: 4.2cqw;
				line-height: 1.3;
				text-align: center;
			}
		}
	}
	#sec05 {
		.flex02 {
			.pImg {
				width: 70%;
				position: relative;
				margin: 0 auto;
				p {
					font-size: 4.0cqw;
					width: 100%;
					text-align: center;
				}
			}

		}
	}
}