main { overflow-x: hidden;}
main section { 
	color: #ffffff;
	width: 100%;
	@media screen and (min-width:768px) { 
		text-align: center;
	}
	article h2 {
		font-size: 7.5vw;
		@media screen and (min-width: 768px) {font-size: 312.5%;}
	}
	article p {
		font-size: 4.8vw;
		@media screen and (min-width:768px) { 
			font-size: 125%;
		}
	}
}
.block {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 3s, visibility 3s, transform 3s;
}
.fadeIn {
    opacity: 1;
    transform: translateX(0);
}
.float {
	opacity: 0;
	transition: 1s;
}
main section#sec01 {
	padding: 0;
	> article {
		   position: relative;
		   @media screen and (min-width: 768px) { max-width: none; }
		   &::before {
			content: "";
			display: block;
			background: url(../img/common/bg-01sp.png) no-repeat;
			background-size: contain;
			background-position: left top;
			width: 100%;
			height: 200vw;
			position: fixed;
			z-index: -1;
			top: 0;
			@media screen and (min-width:768px) { 
				background: url(../img/common/bg-01.png) no-repeat;
				background-position: center top;
				height: 100vh;
				left: 0;
			}
		   }
		   > div {
			position: absolute;
			top: 0;
			opacity: 1;
			margin: 0;
			height: 100%;
			width: 100%;
			background-color: #f8f8f8;
			transition: 3s;
		   }
		   > div.active {
			    opacity: 0;
			}
		   > article {
		   	padding: 150px 5%;
		   	background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);
		   	@media screen and (min-width:768px) { 
		   		padding: 150px 0;
		   		max-width: none;
		   	}
		   	h2 {
		   		text-shadow: 2px 2px 0 #ff0000, -2px 2px 0 #ff0000, -2px -2px 0 #ff0000, 2px -2px 0 #ff0000;
		   	}
		   	ul {
				font-size: 4vw;
				font-weight: 700;
				@media screen and (min-width:768px) { 
					 font-size: 150%;
				}
		   		li {
		   			margin-bottom: 1em;
		   		}
		   	}
		   	p.survey {
		   		text-align: right;
		   		font-size: 100%;
		   		max-width: 900px;
		   		margin: 0 auto;
		   		a {
		   			text-decoration: underline;
		   			&::after {
						content: url(../img/common/ico-pgtop.svg);
						transform: rotate(90deg);
						display: inline-block;
						width: 1.5em;
						height: 1.5em;
						vertical-align: middle;
						margin-left: 0.5em;
			   		}
		   		}
		   	}
		   	p.link {
		   		text-align: center;
		   		font-weight: 700;
		   		font-size: 125%;
		   		margin-top: 60px;
		   		text-shadow: 2px 2px 0 #ff0000, -2px 2px 0 #ff0000, -2px -2px 0 #ff0000, 2px -2px 0 #ff0000;
		   		a {
		   			border: 1px solid #ffffff;
		   			padding: 10px 30px;
		   		}
		   	}
		}
	}
}
main > section.sec01-after {
	background-color: #f7f7e4;
	font-size: 4vw;
	font-weight: 700;
	color: #333333;
	@media screen and (min-width: 768px) {
		font-size: 150%;
	}
}
main > section.sec02 {
	position: relative;
	> div {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  clip-path: inset(0); /* 切り抜き */
		  z-index: -1;
		  div.bg-fixed {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			background: url(../img/common/bg_outdoor.png) no-repeat;
			background-size: cover;
			background-position-x: center;
		  }
	}
	article {
		position: relative;
		text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
		h3 {
			font-weight: 700;
			font-size: 6vw;
			margin-bottom: 20px;
			line-height: 1.2;
			@media screen and (min-width: 768px) {  font-size: 250%; }
		}
		p {
			margin-bottom: 20px;
			font-weight: 600;
			@media screen and (min-width: 768px) { font-size: 200%; }
		}
		p.link {
			text-align: center;
			font-weight: 700;
			margin-top: 40px;
			font-size: 100%;
			a {
				border: 1px solid #ffffff;
				padding: 10px 30px;
			}
		}
	}
}
main > section.sec03 {
	background-color: #ffffff;
	article {
		border: 6px solid #f74f03;
		padding: 10px;
		width: 100%;
		@media screen and (min-width: 768px) {
			display: grid;
			gap: 20px;
			grid-template-columns: auto 1fr;
		}
		h2 {
			color: #f74f03;
			@media screen and (min-width: 768px) {
				text-align: left;
				margin-bottom: 20px;
			}
			em {
				font-style: normal;
			 	font-size: 20vw;
			 	line-height: 1;
			 	@media screen and (min-width: 768px) {
			 		font-size: 275%;
			 	}
			}
		}
		div {
			background: url(../img/common/bg-04.png) no-repeat;
			background-size: cover;
			padding: 20px;
			font-weight: 600;
			text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
			@media screen and (min-width: 768px) { 
				display: grid;
				align-content: center;
				text-align: left; 
			}
		}
	}
}
main section#sec03 {
	padding: 0;
	background-color: #f7f7e4;
	color:#333333;
	@media screen and (min-width:768px) { 
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		place-items: center stretch;
	}
	article {
		padding: 150px 5%;
		@media screen and (min-width:768px) { 
			order: -1;
		}
		h2 {
			@media screen and (min-width:768px) { 
				text-align: left;
			}
		}
		p.survey {
	   		text-align: right;
	   		font-size: 100%;
	   		font-weight: 700;
	   		a {
	   			text-decoration: underline;
	   			&::after {
					content: url(../img/common/ico-pgtop.svg);
					transform: rotate(90deg);
					display: inline-block;
					width: 1.5em;
					height: 1.5em;
					vertical-align: middle;
					margin-left: 0.5em;
		   		}
	   		}
	   	}
	}
}
/*TOP他のモーダル表示部分*/
#detail01 {
	padding: 60px 40px;
	h2 {
		font-weight: 900;
		font-size: 6vw;
		text-align: center;
		margin-bottom: 30px;
		@media screen and (min-width:768px) { 
			font-size: 300%;
			margin-bottom: 80px;
		}
	}
	section {
		margin-bottom: 40px;
		@media screen and (min-width:768px) {
		margin-bottom: 60px;
		}
		h3 {
			font-weight: 700;
			font-size: 4vw;
			margin-bottom: 15px;
			@media screen and (min-width:768px) { 
				font-size: 200%;
			}
		}
		p {
			font-weight: 600;
			@media screen and (min-width:768px) { 
				font-size: 150%;
			}
			strong {
				font-weight: 900;
				font-size: 3.5vw;
				@media screen and (min-width:768px) { 
					font-size: 125%;
				}
				color: #ea656b;
			}
		}
		div {
			display: grid;
			gap:10px;
			grid-template-columns: 1.5fr 1fr 1fr;
			margin-top: 30px;
			p:first-child {
				grid-row: 1 / 3;
				@media screen and (min-width:768px) { 
					padding: 0 60px 0 0;
				}
			}
			ul {
				grid-column: 2 / 4;
				grid-row: 1 / 2;
				margin: auto 0 auto 10px;
				font-size: 75%;
				@media screen and (min-width:768px) { font-size: 100%;}
				li::before {
					content: "";
					display: inline-block;
					width: 1em;
					height: 1em;
					background-color: #f9875f;
					margin-right: 0.5em;
				}
			}
		}
	}
}
#detail01 section:first-of-type div ul {grid-row: 2 / 3;}
#detail01 section div ul li:nth-child(2)::before,
#detail01 section.year div ul li:nth-child(3)::before { background-color: #f7bb34; }
#detail01 section div ul li:nth-child(3)::before,
#detail01 section.year div ul li:nth-child(4)::before { background-color: #7ec405; }
#detail01 section div ul li:nth-child(4)::before,
#detail01 section.year div ul li:nth-child(5)::before { background-color: #5ab512; }
#detail01 section div ul li:nth-child(5)::before ,
#detail01 section.year div ul li:nth-child(6)::before { background-color: #3fd165; }
#detail01 section div ul li:nth-child(6)::before,
#detail01 section.year div ul li:nth-child(7)::before { background-color: #44b783; }
#detail01 section div ul li:nth-child(7)::before,
#detail01 section.year div ul li:nth-child(8)::before { background-color: #46b7b7; }
#detail01 section.year div ul li::before { background-color: #ea7a7a; }
#detail01 section.year div ul li:nth-child(2)::before { background-color: #f9875f; }
/*#detail02, #detail04, */#detail03 {
	padding: 60px 20px;
	background: url(../img/common/bg_outdoor.png) no-repeat;
	background-size: cover;
	background-position-x: center;
	color: #ffffff;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
	@media screen and (min-width:768px) { padding: 60px;}
	h2 {
		font-weight: 900;
		font-size: 6vw;
		margin-bottom: 30px;
		line-height: 1.3;
		@media screen and (min-width:768px) { 
			font-size: 300%;
			margin-bottom: 80px;
		}
	}
	p {
		margin-bottom: 20px;
		font-size: 4vw;
		font-weight: 600;
		@media screen and (min-width:768px) { font-size: 200%;}
	}
	p.link {
		text-align: center;
		font-weight: 700;
		margin-top: 40px;
		font-size: 100%;
		@media screen and (min-width:768px) { font-size: 125%; }
                a {
                    border: 1px solid #ffffff;
                    padding: 10px 30px;
               }
	}
}
#detail03 {
	background: none;
	color: #333333;
	text-shadow: none;
	ul {
		margin-top: 30px;
		display: grid;
		gap: 15px;
		grid-template-columns: repeat(2, 1fr);
		@media screen and (min-width:768px) { grid-template-columns: repeat(4, 1fr); }
	}
	p.link {
		@media screen and (min-width:768px) { font-size: 125%; }
                a {
                    border: 1px solid #333333;
                    &::after {
                    	content: url(../img/common/ico-pgtop.svg);
                    	transform: rotate(90deg);
                    
                    }
               }
	}
}
/*#detail04 {
	background: url(../img/common/bg-04.png) no-repeat;
	background-size: cover;
}*/