@charset "UTF-8";

.is-active#aarea {
	display:none;
}

@keyframes scroll {
	0%{
		height: 0;
		opacity: 0.6;
	}
	50%{
		height: 36px;
		opacity: 1;
	}
	100%{
		height: 36px;
		opacity: 0.6;
	}
}
@keyframes deco01 {
	0%{transform: translateX(0%);}
	10%{transform: translateX(-45.1vw);}
	22%{transform: translateX(-45.1vw);}
	30%{transform: translateX(-128vw);}
	100%{transform: translateX(-128vw);}
}
@keyframes deco02 {
	0%{transform: translateX(0%);}
	10%{transform: translateX(-31vw);}
	25%{transform: translateX(-31vw);}
	35%{transform: translateX(-130vw);}
	100%{transform: translateX(-130vw);}
}
@keyframes deco03 {
	0%{transform: translateX(0%);}
	1%{transform: translateX(10vw);}
	16%{transform: translateX(10vw);}
	32%{transform: translateX(130vw);}
	100%{transform: translateX(130vw);}
}
@keyframes deco04 {
	0%{transform: translateX(0%);}
	1%{transform: translateX(7vw);}
	16%{transform: translateX(7vw);}
	25%{transform: translateX(114vw);}
	100%{transform: translateX(114vw);}
}
@keyframes deco05 {
	0%{transform: translateX(0%);}
	1%{transform: translateX(-10vw);}
	16%{transform: translateX(-10vw);}
	28%{transform: translateX(-120vw);}
	100%{transform: translateX(-120vw);}
}
@keyframes deco06 {
	0%{transform: translateX(0%);}
	3%{transform: translateX(-21vw);}
	18%{transform: translateX(-21vw);}
	25%{transform: translateX(-142vw);}
	100%{transform: translateX(-142vw);}
}
@keyframes deco07 {
	0%{transform: translateX(0%);}
	5%{transform: translateX(7vw);}
	25%{transform: translateX(7vw);}
	32%{transform: translateX(114vw);}
	100%{transform: translateX(114vw);}
}
@keyframes deco08 {
	0%{transform: translateX(0%);}
	5%{transform: translateX(35vw);}
	20%{transform: translateX(35vw);}
	25%{transform: translateX(114vw);}
	100%{transform: translateX(114vw);}
}


#main{
	font-weight: 500;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {

	body {
		overflow-y: scroll;
		-ms-overflow-style: none;/* IE, Edge 対応 */
		scrollbar-width: none;/* Firefox 対応 */		
	 }
	body::-webkit-scrollbar {
		display:none;/* Chrome, Safari 対応 */
	 }

	#main {
		position: relative;
		overflow: hidden;
		height: calc(100vh - 64px);
		padding-bottom: 1px;
		top: 64px;
	}
	.active#main {
/*		padding-bottom: 0;*/
	}
	#main #aarea {
		position: fixed;
		top: 64px;
		left: 0;
		width: 100%;
		height: calc(100vh - 64px);
		background-color: #dfdfdf;
		transition: 0.8s;
		z-index: 2;
	}
	.active#main #aarea {
		opacity: 0;
	}
	#main #barea {
		transition: 0.8s;
	}
	.back#main #barea {
		opacity: 0;
	}
		#main h1 {
		}
			#main h1 span {
				display: block;
				position: absolute;
				z-index: 2;
			}
			#main h1 span.maintit01 {
				top: 33.5%;
				left: 34.5vw;
				width: 30vw;
				max-width: 379px;
				min-width: 320px;
			}
				#main h1 span.maintit01 img {
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
					transform: translateX(-50%);
					transition: 0.7s 0.7s;
				}
				.on#main h1 span.maintit01 img {
					opacity: 1;
					transform: translateX(0);
				}
			#main h1 span.maintit02 {
				top: 57.8%;
				right: 4vw;
				width: 60vw;
				max-width: 873px;
				min-width: 630px;
			}
				#main h1 span.maintit02 img {
					position: absolute;
					top: 0;
					right: 0;
					opacity: 0;
					transition: 0.7s 0.85s;
					transform: translateX(20%);
				}
				.on#main h1 span.maintit02 img {
					opacity: 1;
					transform: translateX(0);
				}
		#main .main_tit {
			height: 100%;
		}
			#main .main_tit span {
				position: absolute;
				z-index: 1;
				left: 0;
			}
			#main .main_tit .maintit03 {
				bottom: 65.45%;
			}
			#main .main_tit .maintit04 {
				top: 0;
				bottom: 0;
				margin: auto;
			}
			#main .main_tit .maintit05 {
				top: 65.4%;
			}
			#main .arrow {
				position: absolute;
				top: 47.5%;
				right: 2%;
				width: 258px;
				z-index: 2;
				opacity: 0;
				transition: 0.5s 2s;
			}
			.on#main .arrow {
				opacity: 1;
			}

		.bar {
			position: absolute;
			z-index: 1;
			width: 66.67vw;
			height: 10.5%;
		}
		.bar01 {
			top: 34.54%;
			left: 0;
		}
		.bar02 {
			top: 54.95%;
			right: 0;
		}
			.bar span {
				position: absolute;
				content: "";
				top: 0;
				width: 0;
				height: 100%;
			}
			.bar01 span {
				top: 0;
				left: 0;
				background-color: #0a9bcd;
				transition: 0.7s 0.3s;
			}
			.bar02 span {
				top: 0;
				right: 0;
				background-color: #6e3cbe;
				transition: 0.7s 0.5s;
			}
			.on .bar01 span ,
			.on .bar02 span {
				width: 100%;
			}

		.aimg_area {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
			.aimg_area .aimg {
				position: absolute;
			}
			.aimg_area .aimg:nth-child(1) {
				top: 0;
				left: 0;
				width: 50vw;
				height: 34.54%;
				min-width: 520px;
			}
			.aimg_area .aimg:nth-child(2) {
				top: 0;
				right: 0;
				width: 50vw;
				height: 34.54%;
				min-width: 520px;
			}
			.aimg_area .aimg:nth-child(3) {
				top: 34.54%;
				left: 0;
				width: 33.33vw;
				height: 30.91%;
				min-width: 346.66px;
			}
			.aimg_area .aimg:nth-child(4) {
				top: 34.54%;
				left: 0;
				right: 0;
				margin: auto;
				width: 33.34vw;
				height: 30.91%;
				min-width: 346.68px;
			}
			.aimg_area .aimg:nth-child(5) {
				top: 34.54%;
				right: 0;
				width: 33.33vw;
				height: 30.91%;
				min-width: 346.66px;
			}
			.aimg_area .aimg:nth-child(6) {
				top: 65.45%;
				left: 0;
				width: 30vw;
				height: 24.09%;
				min-width: 312px;
			}
			.aimg_area .aimg:nth-child(7) {
				top: 65.45%;
				left: 0;
				right: 20%;
				margin: auto;
				width: 20vw;
				height: 24.09%;
				min-width: 208px;
			}
			.aimg_area .aimg:nth-child(8) {
				top: 65.45%;
				right: 0;
				width: 50vw;
				height: 34.55%;
				min-width: 520px;
			}
			.aimg_area .aimg:nth-child(9) {
				top: 89.54%;
				left: 0;
				width: 50vw;
				height: 10.46%;
				min-width: 520px;
			}
				.aimg_area .aimg span {
					background-size: cover;
					width: 100%;
					height: 100%;
					display: block;
					background-position: 50% 50%;
					opacity: 0;
					transition-duration: 1s;
				}
				.on .aimg_area .aimg span {
					opacity: 1;
				}
				.aimg_area .aimg:nth-child(1) span {
					background-image: url("../img/aimg01.jpg");
					transition-delay: 1.5s;
				}
				.aimg_area .aimg:nth-child(2) span {
					background-image: url("../img/aimg02.jpg");
					transition-delay: 2.3s;
				}
				.aimg_area .aimg:nth-child(3) span {
					background-image: url("../img/aimg03.jpg");
					transition-delay: 2.1s;
				}
				.aimg_area .aimg:nth-child(4) span {
					background-image: url("../img/aimg04.jpg");
					transition-delay: 1.8s;
				}
				.aimg_area .aimg:nth-child(5) span {
					background-image: url("../img/aimg05.jpg");
					transition-delay: 1.6s;
				}
				.aimg_area .aimg:nth-child(6) span {
					background-image: url("../img/aimg06.jpg");
					transition-delay: 1.7s;
				}
				.aimg_area .aimg:nth-child(7) span {
					background-image: url("../img/aimg07.jpg");
					transition-delay: 1.9s;
				}
				.aimg_area .aimg:nth-child(8) span {
					background-image: url("../img/aimg08.jpg");
					transition-delay: 2.0s;
				}
				.aimg_area .aimg:nth-child(9) span {
					background-image: url("../img/aimg09.jpg");
					transition-delay: 2.2s;
				}
	
		#main .scroll {
			position: absolute;			
			bottom: 40px;
			left: 0;
			right: 0;
			margin: auto;
			text-align: center;
			color: #fff;
			line-height: 1;
			font-size: 12px;
		}	
		#main .scroll span{
			display: inline-block;
			padding: 5px 10px;
			border: 1px solid #fff;
			border-radius: 24px;
		}
		#main .scroll::before {
			position: absolute;
			content: "";
			top: 30px;
			left: 0;
			right: 0;
			margin: auto;
			width: 6px;
			height: 0;
			background-color: #fff;
			animation-name:scroll;
			animation-duration:1s;
			animation-timing-function:ease-in;
			animation-delay:1s;
			animation-iteration-count: infinite;
			animation-fill-mode: forwards;
		}	
	
	.deco_area {
	}
		.deco {
			position: absolute;
			z-index: 1;
		}
		#barea .deco {
			width: 4vw;
		}
		#aarea .deco01 {
			top: 0;
			right: -14vw;
			width: 14vw;
		}
		#aarea .deco02 {
			top: 32px;
			right: -10vw;
			width: 10vw;
		}
		#aarea .deco03 {
			top: 9%;
			left: -10vw;
			width: 10vw;
		}
		#aarea .deco04 {
			top: 21%;
			left: -7vw;
			width: 7vw;
		}
		#aarea .deco05 {
			top: 32.7%;
			right: -10vw;
			width: 10vw;
		}
		#aarea .deco06 {
			bottom: 34.54%;
			right: -7vw;
			width: 7vw;
		}
		#aarea .deco07 {
			bottom: 13.9%;
			left: -7vw;
			width: 7vw;
		}
		#aarea .deco08 {
			bottom: 32px;
			left: -7vw;
			width: 7vw;
		}
		#aarea .deco09 {
			bottom: 10%;
			right: -14vw;
			width: 14vw;
		}
		#aarea .deco10 {
			bottom: 13.5%;
			right: -10vw;
			width: 10vw;
		}
		#aarea .deco11 {
			bottom: 9%;
			left: -10vw;
			width: 10vw;
		}
		#aarea .deco12 {
			bottom: 21%;
			left: -7vw;
			width: 7vw;
		}
		#aarea .deco13 {
			bottom: 32.7%;
			right: -10vw;
			width: 10vw;
		}
		#aarea .deco14 {
			top: 34.54%;
			right: -7vw;
			width: 7vw;
		}
		#aarea .deco15 {
			top: 13.9%;
			left: -7vw;
			width: 7vw;
		}
		#aarea .deco16 {
			top: 32px;
			left: -7vw;
			width: 7vw;
		}
		#barea .deco01 {
			top: 9%;
			left: 22%;
		}
		#barea .deco02 {
			top: 10.3%;
			left: 18%;
		}
		#barea .deco03 {
			top: 9%;
			right: 0%;
		}
		#barea .deco04 {
			top: 14%;
			right: 40%;
		}
		#barea .deco05 {
			top: 15.3%;
			right: 36%;
		}
		#barea .deco06 {
			top: 21%;
			left: 0%;
		}
		#barea .deco07 {
			bottom: 30%;
			right: 31%;
		}
		#barea .deco08 {
			bottom: 16%;
			right: 0;
		}
		#barea .deco09 {
			bottom: 8%;
			right: 15.5%;
		}
			#aarea .deco span {
				position: absolute;
				height: 32px;
				top: 0;
				width: 100%;
				animation-timing-function: ease;
				animation-iteration-count: infinite;
				animation-fill-mode: forwards;
				animation-duration: 14s;
			}
			#barea .deco span {
				position: absolute;
				height: 12px;
				top: 0;
				width: 0;
			}
			.on #barea .deco span {
				width: 0 !important;
			}
			#aarea .deco01 span {
				left: 0;
				background-color: #f5b400;
				animation-name: deco01;
				animation-delay: 2.1s;
			}
			#aarea .deco02 span {
				right: 0;
				background-color: #00b176;
				animation-name: deco02;
				animation-delay: 1.7s;
			}
			#aarea .deco03 span {
				left: 0;
				background-color: #0a9bcd;
				animation-name: deco03;
				animation-delay: 2.5s;
			}
			#aarea .deco04 span {
				right: 0;
				background-color: #f06400;
				animation-name: deco04;
				animation-delay: 2.7s;
			}
			#aarea .deco05 span {
				left: 0;
				background-color: #6e3cbe;
				animation-name: deco05;
				animation-delay: 2.3s;
			}
			#aarea .deco06 span {
				right: 0;
				background-color: #f06400;
				animation-name: deco06;
				animation-delay: 2.4s;
			}
			#aarea .deco07 span {
				left: 0;
				background-color: #f5b400;
				animation-name: deco07;
				animation-delay: 1.5s;
			}
			#aarea .deco08 span {
				left: 0;
				background-color: #0a9bcd;
				animation-name: deco08;
				animation-delay: 1.9s;
			}
			#aarea .deco09 span {
				left: 0;
				background-color: #f5b400;
				animation-name: deco01;
				animation-delay: 7.4s;
			}
			#aarea .deco10 span {
				right: 0;
				background-color: #00b176;
				animation-name: deco02;
				animation-delay: 7.8s;
			}
			#aarea .deco11 span {
				left: 0;
				background-color: #0a9bcd;
				animation-name: deco03;
				animation-delay: 8.0s;
			}
			#aarea .deco12 span {
				right: 0;
				background-color: #f06400;
				animation-name: deco04;
				animation-delay: 8.2s;
			}
			#aarea .deco13 span {
				left: 0;
				background-color: #6e3cbe;
				animation-name: deco05;
				animation-delay: 8.6s;
			}
			#aarea .deco14 span {
				right: 0;
				background-color: #f06400;
				animation-name: deco06;
				animation-delay: 8.2s;
			}
			#aarea .deco15 span {
				left: 0;
				background-color: #f5b400;
				animation-name: deco07;
				animation-delay: 7.4s;
			}
			#aarea .deco16 span {
				left: 0;
				background-color: #0a9bcd;
				animation-name: deco08;
				animation-delay: 8.1s;
			}
			#barea .deco01 span {
				left: 0;
				background-color: #f06400;
				transition: 0.3s 0.9s;
			}
			#barea .deco02 span {
				right: 0;
				background-color: #f5b400;
				transition: 0.3s 1.5s;
			}
			#barea .deco03 span {
				left: 0;
				background-color: #f5b400;
				transition: 0.3s 0.7s;
			}
			#barea .deco04 span {
				right: 0;
				background-color: #0a9bcd;
				transition: 0.3s 2.1s;
			}
			#barea .deco05 span {
				left: 0;
				background-color: #fff;
				transition: 0.3s 1.3s;
			}
			#barea .deco06 span {
				right: 0;
				background-color: #6e3cbe;
				transition: 0.3s 1.9s;
			}
			#barea .deco07 span {
				left: 0;
				background-color: #0a9bcd;
				transition: 0.3s 0.5s;
			}
			#barea .deco08 span {
				right: 0;
				background-color: #0a9bcd;
				transition: 0.3s 1.1s;
			}
			#barea .deco09 span {
				right: 0;
				background-color: #f5b400;
				transition: 0.3s 1.7s;
			}
/*
			.on .deco span {
				width: 100% !important;
			}
*/
			.active #barea .deco.on span {
				width: 100% !important;
			}
	#main #barea {
		position: fixed;
		top: 64px;
		left: 0;
		width: 100%;
		height: calc(100vh - 64px);
	}
		.bimg_area {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
			.bimg_area .bimg {
				position: absolute;
				box-sizing: border-box;
			}
			.bimg_area .bimg:nth-child(1) {
				top: 0;
				left: 0;
				width: 50vw;
				height: 34.54%;
				min-width: 520px;
				border-right: #fff solid 2.5px;
				border-bottom: #fff solid 2.5px;
			}
			.bimg_area .bimg:nth-child(2) {
				top: 0;
				right: 0;
				width: 50vw;
				height: 34.54%;
				min-width: 520px;
				border-left: #fff solid 2.5px;
				border-bottom: #fff solid 2.5px;
			}
			.bimg_area .bimg:nth-child(3) {
				top: 34.54%;
				left: 0;
				width: 50vw;
				height: 30.91%;
				min-width: 346.68px;
				border-right: #fff solid 2.5px;
				border-top: #fff solid 2.5px;
				border-bottom: #fff solid 2.5px;
			}
			.bimg_area .bimg:nth-child(4) {
				top: 34.54%;
				right: 0;
				width: 50vw;
				height: 30.91%;
				min-width: 346.68px;
				border-left: #fff solid 2.5px;
				border-top: #fff solid 2.5px;
				border-bottom: #fff solid 2.5px;
			}
			.bimg_area .bimg:nth-child(5) {
				top: 65.45%;
				left: 0;
				width: 30vw;
				height: 24.09%;
				min-width: 312px;
				border-right: #fff solid 2.5px;
				border-top: #fff solid 2.5px;
			}
			.bimg_area .bimg:nth-child(6) {
				top: 65.45%;
				left: 0;
				right: 20%;
				margin: auto;
				width: 20vw;
				height: 24.09%;
				min-width: 208px;
				border-left: #fff solid 2.5px;
				border-right: #fff solid 2.5px;
				border-top: #fff solid 2.5px;
			}
			.bimg_area .bimg:nth-child(7) {
				top: 65.45%;
				right: 0;
				width: 50vw;
				height: 34.55%;
				min-width: 520px;
				border-left: #fff solid 2.5px;
				border-top: #fff solid 2.5px;
			}
			.bimg_area .bimg:nth-child(8) {
				top: 89.54%;
				left: 0;
				width: 50vw;
				height: 10.46%;
				min-width: 520px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
				.bimg_area .bimg a {
					display: block;
					height: 100%;
					overflow: hidden;
					cursor: pointer;
				}
				.bimg_area .bimg span {
					background-size: cover;
					width: 100%;
					height: 100%;
					display: block;
					background-position: 50% 50%;
					opacity: 0;
					transition-duration: 1s;
				}
				.on .bimg_area .bimg span {
					opacity: 1;
				}
				.bimg_area .bimg a:hover span {
					transform: scale(1.1);
					opacity: 0.7;
				}
				.bimg_area .bimg:nth-child(1) span {
					background-image: url("../img/bimg01.jpg");
				}
				.bimg_area .bimg:nth-child(2) span {
					background-image: url("../img/bimg02.jpg");
				}
				.bimg_area .bimg:nth-child(3) span {
					background-image: url("../img/bimg03.jpg");
				}
				.bimg_area .bimg:nth-child(4) span {
					background-image: url("../img/bimg04.jpg");
				}
				.bimg_area .bimg:nth-child(5) span {
					background-image: url("../img/bimg06.jpg");
				}
				.bimg_area .bimg:nth-child(6) span {
					background-image: url("../img/bimg07.jpg");
				}
				.bimg_area .bimg:nth-child(7) span {
					background-image: url("../img/bimg08.jpg");
				}
				.bimg_area .bimg:nth-child(8) dl {
					padding: 0 0 0 20px;
					box-sizing: border-box;
					display: -webkit-flex;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-pack: justify;
					-ms-flex-pack: justify;
					justify-content: space-between;
					width: 100%;
					line-height: 1.5;
				}
					.bimg_area .bimg:nth-child(8) dl dt {
						letter-spacing: 2px;
					}
					.bimg_area .bimg:nth-child(8) dl dd {
						width: calc(100% - 80px);
						font-size: 13px;
					}
						.bimg_area .bimg:nth-child(8) dl dd .news_inn {
							position: relative;
							display: block;
						}
						.bimg_area .bimg:nth-child(8) dl dd a.news_inn::before {
							position: absolute;
							content: "";
							top: 0;
							bottom: 0;
							right: 23px;
							margin: auto;
							width: 35px;
							height: 4px;
							border-right: solid 1px #000;
							border-bottom: solid 1px #000;
							transform: skew(45deg);
							transition: 0.4s;
						}
						.bimg_area .bimg:nth-child(8) dl dd a:hover::before{
							right: 16px;
						}
						.bimg_area .bimg:nth-child(8) dl dd p {
							float: left;
						}
						.bimg_area .bimg:nth-child(8) dl dd .news_inn div {
							margin-left: 3%;
							float: left;
							width: calc(100% - 120px);							
							/*overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;*/
						}
						.bimg_area .bimg:nth-child(8) dl dd a.news_inn div {
							width: calc(100% - 160px);			
						}
				.bimg_area .bimg:not(:last-child) a div {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 18px;
					color: #fff;
					line-height: 1;
					width: 100%;
					height: 100%;
					display: -webkit-flex;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-pack:center;
					-ms-flex-pack: center;
					justify-content: center;
					-webkit-box-align: center;
					-ms-flex-align: center;
					align-items: center;
					-webkit-box-orient: vertical;
					-webkit-box-direction: normal;
					-ms-flex-direction: column;
					flex-direction: column;
					background-color: rgba(0,0,0,0.8);
					opacity: 0;
					transition: 0.4s;
				}
					.bimg_area .bimg:nth-of-type(1) a div,
					.bimg_area .bimg:nth-of-type(4) a div,
					.bimg_area .bimg:nth-of-type(5) a div{
						background-color: rgba(10, 155, 205, 0.9);
					}
					.bimg_area .bimg:nth-of-type(2) a div,
					.bimg_area .bimg:nth-of-type(6) a div{
						background-color: rgba(240, 100, 0, 0.9);
					}
					.bimg_area .bimg:nth-of-type(3) a div,
					.bimg_area .bimg:nth-of-type(7) a div{
						background-color: rgba(110, 60, 190, 0.9);
					}
						.bimg_area .bimg:not(:last-child) a:hover div{
							opacity: 1.0;
						}
							.bimg_area .bimg div p{
								display: inline-block;
								line-height: 1.5;
								text-align: center;
							}
					/*.bimg_area .bimg div p {
						padding: 3px 8px;
						display: inline-block;
						line-height: 1;
					}
					.bimg_area .bimg:nth-child(1) div p {
						background-color: #00b176;
					}
					.bimg_area .bimg:nth-child(2) div p {
						background-color: #6e3cbe;
					}
					.bimg_area .bimg:nth-child(3) div p {
						background-color: #6e3cbe;
					}
					.bimg_area .bimg:nth-child(4) div p {
						background-color: #f06400;
					}
					.bimg_area .bimg:nth-child(5) div p {
						background-color: #00b176;
					}
					.bimg_area .bimg:nth-child(6) div p {
						background-color: #f06400;
					}
					.bimg_area .bimg:nth-child(7) div p {
						background-color: #6e3cbe;
					}
					.bimg_area .bimg:nth-child(8) div p {
						background-color: #00b176;
					}*/
					.bimg_area .bimg div p.stxt {
						font-size: 13.3px;
					}

	
	
	
}


/* ++++++++++++++++++++++++++++++++++++++++++++++    800〜1040    ++++++++++++++++++++++++++++++++++++++++++++++  */
@media (max-width: 1040px) and (min-width: 800px) {
	#main {
		height: 100%;
		top: 0;
	}
	.active#main {
		top: 64px;
	}
	#aarea {
		position: relative !important;
		top: 0 !important;
	}
	#barea {
		position: absolute !important;
		top: 0 !important;
	}
		.bar {
			min-width: 693px;
		}
}


/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {

	body {
		overflow-y: scroll;
		-ms-overflow-style: none;/* IE, Edge 対応 */
		scrollbar-width: none;/* Firefox 対応 */
	 }
	body::-webkit-scrollbar {
		display:none;/* Chrome, Safari 対応 */
	 }

	#main {
		position: relative;
		overflow: hidden;
		padding-bottom: 1px;
	}
	.active#main {
		padding-bottom: 0;
		overflow: initial;
		height: 100%;
	}
	#main #aarea {
		position: fixed;
		top: 50px;
		left: 0;
		width: 100%;
		height: calc(100% - 50px);
		background-color: #dfdfdf;
		transition: 0.8s;
		z-index: 2;
	}
	.active#main #aarea {
		opacity: 0;
	}
	#main #barea {
		transition: 0.8s;
	}
	.back#main #barea {
		opacity: 0;
	}
		#main h1 {
		}
			#main h1 span {
				display: block;
				position: absolute;
				z-index: 2;
			}
			#main h1 span.maintit01 {
				top: 34%;
				left: 3.5vw;
				width: 58vw;
				max-width: 379px;
			}
				#main h1 span.maintit01 img {
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
					transform: translateX(-50%);
					transition: 0.7s 0.7s;
				}
				.on#main h1 span.maintit01 img {
					opacity: 1;
					transform: translateX(0);
				}
			#main h1 span.maintit02 {
				top: 57.8%;
				right: 4vw;
				width: 59vw;
				max-width: 873px;
			}
				#main h1 span.maintit02 img {
					position: absolute;
					top: 0;
					right: 0;
					opacity: 0;
					transition: 0.7s 0.85s;
					transform: translateX(20%);
				}
				.on#main h1 span.maintit02 img {
					opacity: 1;
					transform: translateX(0);
				}
		#main .main_tit {
			height: 100%;
		}
			#main .main_tit span {
				position: absolute;
				z-index: 1;
				left: 0;
			}
			#main .main_tit .maintit03 {
				bottom: 65.45%;
			}
			#main .main_tit .maintit04 {
				top: 0;
				bottom: 0;
				margin: auto;
			}
			#main .main_tit .maintit05 {
				top: 65.4%;
			}
			#main .arrow {
				position: absolute;
				top: 50%;
				right: 2%;
				width: 100px;
				z-index: 2;
				opacity: 0;
				transition: 0.5s 2s;
			}
			.on#main .arrow {
				opacity: 1;
			}

		.bar {
			position: absolute;
			z-index: 1;
			width: 66.67vw;
			height: 10.5%;
		}
		.bar01 {
			top: 34.54%;
			left: 0;
		}
		.bar02 {
			top: 54.95%;
			right: 0;
		}
			.bar span {
				position: absolute;
				content: "";
				top: 0;
				width: 0;
				height: 100%;
			}
			.bar01 span {
				top: 0;
				left: 0;
				background-color: #0a9bcd;
				transition: 0.7s 0.3s;
			}
			.bar02 span {
				top: 0;
				right: 0;
				background-color: #6e3cbe;
				transition: 0.7s 0.5s;
			}
			.on .bar01 span ,
			.on .bar02 span {
				width: 100%;
			}

		.aimg_area {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
			.aimg_area .aimg {
				position: absolute;
			}
			.aimg_area .aimg:nth-child(1) {
				top: 0;
				left: 0;
				width: 50vw;
				height: 34.54%;
			}
			.aimg_area .aimg:nth-child(2) {
				top: 0;
				right: 0;
				width: 50vw;
				height: 34.54%;
			}
			.aimg_area .aimg:nth-child(3) {
				top: 34.54%;
				left: 0;
				width: 33.33vw;
				height: 30.91%;
			}
			.aimg_area .aimg:nth-child(4) {
				top: 34.54%;
				left: 0;
				right: 0;
				margin: auto;
				width: 33.34vw;
				height: 30.91%;
			}
			.aimg_area .aimg:nth-child(5) {
				top: 34.54%;
				right: 0;
				width: 33.33vw;
				height: 30.91%;
			}
			.aimg_area .aimg:nth-child(6) {
				top: 65.45%;
				left: 0;
				width: 30vw;
				height: 24.09%;
			}
			.aimg_area .aimg:nth-child(7) {
				top: 65.45%;
				left: 0;
				right: 20%;
				margin: auto;
				width: 20vw;
				height: 24.09%;
			}
			.aimg_area .aimg:nth-child(8) {
				top: 65.45%;
				right: 0;
				width: 50vw;
				height: 34.55%;
			}
			.aimg_area .aimg:nth-child(9) {
				top: 89.54%;
				left: 0;
				width: 50vw;
				height: 10.46%;
			}
				.aimg_area .aimg span {
					background-size: cover;
					width: 100%;
					height: 100%;
					display: block;
					background-position: 50% 50%;
					opacity: 0;
					transition-duration: 1s;
				}
				.on .aimg_area .aimg span {
					opacity: 1;
				}
				.aimg_area .aimg:nth-child(1) span {
					background-image: url("../img/aimg01.jpg");
					transition-delay: 1.5s;
					background-position: 20% 50%;
				}
				.aimg_area .aimg:nth-child(2) span {
					background-image: url("../img/aimg02.jpg");
					transition-delay: 2.3s;
				}
				.aimg_area .aimg:nth-child(3) span {
					background-image: url("../img/aimg03.jpg");
					transition-delay: 2.1s;
					background-position: 30% 50%;
				}
				.aimg_area .aimg:nth-child(4) span {
					background-image: url("../img/aimg04.jpg");
					transition-delay: 1.8s;
				}
				.aimg_area .aimg:nth-child(5) span {
					background-image: url("../img/aimg05.jpg");
					transition-delay: 1.6s;
					background-position: 90% 50%;
				}
				.aimg_area .aimg:nth-child(6) span {
					background-image: url("../img/aimg06.jpg");
					transition-delay: 1.7s;
					background-position: 70% 50%;
				}
				.aimg_area .aimg:nth-child(7) span {
					background-image: url("../img/aimg07.jpg");
					transition-delay: 1.9s;
				}
				.aimg_area .aimg:nth-child(8) span {
					background-image: url("../img/aimg08.jpg");
					transition-delay: 2.0s;
				}
				.aimg_area .aimg:nth-child(9) span {
					background-image: url("../img/aimg09.jpg");
					transition-delay: 2.2s;
				}
	
		#main .scroll {
			position: absolute;
			bottom: 40px;
			left: 0;
			right: 0;
			margin: auto;
			text-align: center;
			color: #fff;
			line-height: 1;
			font-size: 12px;
		}
		#main .scroll span{
			display: inline-block;
			padding: 5px 10px;
			border: 1px solid #fff;
			border-radius: 24px;
		}
		#main .scroll::before {
			position: absolute;
			content: "";
			top: 30px;
			left: 0;
			right: 0;
			margin: auto;
			width: 6px;
			height: 0;
			background-color: #fff;
			animation-name:scroll;
			animation-duration:1s;
			animation-timing-function:ease-in;
			animation-delay:1s;
			animation-iteration-count: infinite;
			animation-fill-mode: forwards;
		}	
	
	.deco_area {
	}
		.deco {
			position: absolute;
			z-index: 1;
		}
		#barea .deco {
			width: 4vw;
		}
		#aarea .deco01 {
			top: 0;
			right: -14vw;
			width: 14vw;
		}
		#aarea .deco02 {
			top: 8px;
			right: -10vw;
			width: 10vw;
		}
		#aarea .deco03 {
			top: 9%;
			left: -10vw;
			width: 10vw;
		}
		#aarea .deco04 {
			top: 21%;
			left: -7vw;
			width: 7vw;
		}
		#aarea .deco05 {
			top: 32.7%;
			right: -10vw;
			width: 10vw;
		}
		#aarea .deco06 {
			bottom: 34.54%;
			right: -7vw;
			width: 7vw;
		}
		#aarea .deco07 {
			bottom: 13.9%;
			left: -7vw;
			width: 7vw;
		}
		#aarea .deco08 {
			bottom: 8px;
			left: -7vw;
			width: 7vw;
		}
		#aarea .deco09 {
			bottom: 10%;
			right: -14vw;
			width: 14vw;
		}
		#aarea .deco10 {
			bottom: 13.5%;
			right: -10vw;
			width: 10vw;
		}
		#aarea .deco11 {
			bottom: 9%;
			left: -10vw;
			width: 10vw;
		}
		#aarea .deco12 {
			bottom: 21%;
			left: -7vw;
			width: 7vw;
		}
		#aarea .deco13 {
			bottom: 32.7%;
			right: -10vw;
			width: 10vw;
		}
		#aarea .deco14 {
			top: 34.54%;
			right: -7vw;
			width: 7vw;
		}
		#aarea .deco15 {
			top: 13.9%;
			left: -7vw;
			width: 7vw;
		}
		#aarea .deco16 {
			top: 8px;
			left: -7vw;
			width: 7vw;
		}
		#barea .deco01 {
			top: 4%;
			left: 22%;
		}
		#barea .deco02 {
			top: 5.3%;
			left: 18%;
		}
		#barea .deco03 {
			top: 9%;
			right: 0%;
		}
		#barea .deco04 {
			top: 14%;
			right: 40%;
		}
		#barea .deco05 {
			top: 13.3%;
			right: 36%;
		}
		#barea .deco06 {
			top: 15%;
			left: 0%;
		}
		#barea .deco07 {
			bottom: 30%;
			right: 31%;
		}
		#barea .deco08 {
			bottom: 16%;
			right: 0;
		}
		#barea .deco09 {
			bottom: 8%;
			right: 15.5%;
		}
			#aarea .deco span {
				position: absolute;
				height: 8px;
				top: 0;
				width: 100%;
				animation-timing-function: ease;
				animation-iteration-count: infinite;
				animation-fill-mode: forwards;
				animation-duration: 14s;
			}
			#barea .deco span {
				position: absolute;
				height: 12px;
				top: 0;
				width: 0;
			}
			.on #barea .deco span {
				width: 0 !important;
			}
			#aarea .deco01 span {
				left: 0;
				background-color: #f5b400;
				animation-name: deco01;
				animation-delay: 2.1s;
			}
			#aarea .deco02 span {
				right: 0;
				background-color: #00b176;
				animation-name: deco02;
				animation-delay: 1.7s;
			}
			#aarea .deco03 span {
				left: 0;
				background-color: #0a9bcd;
				animation-name: deco03;
				animation-delay: 2.5s;
			}
			#aarea .deco04 span {
				right: 0;
				background-color: #f06400;
				animation-name: deco04;
				animation-delay: 2.7s;
			}
			#aarea .deco05 span {
				left: 0;
				background-color: #6e3cbe;
				animation-name: deco05;
				animation-delay: 2.3s;
			}
			#aarea .deco06 span {
				right: 0;
				background-color: #f06400;
				animation-name: deco06;
				animation-delay: 2.4s;
			}
			#aarea .deco07 span {
				left: 0;
				background-color: #f5b400;
				animation-name: deco07;
				animation-delay: 1.5s;
			}
			#aarea .deco08 span {
				left: 0;
				background-color: #0a9bcd;
				animation-name: deco08;
				animation-delay: 1.9s;
			}
			#aarea .deco09 span {
				left: 0;
				background-color: #f5b400;
				animation-name: deco01;
				animation-delay: 7.4s;
			}
			#aarea .deco10 span {
				right: 0;
				background-color: #00b176;
				animation-name: deco02;
				animation-delay: 7.8s;
			}
			#aarea .deco11 span {
				left: 0;
				background-color: #0a9bcd;
				animation-name: deco03;
				animation-delay: 8.0s;
			}
			#aarea .deco12 span {
				right: 0;
				background-color: #f06400;
				animation-name: deco04;
				animation-delay: 8.2s;
			}
			#aarea .deco13 span {
				left: 0;
				background-color: #6e3cbe;
				animation-name: deco05;
				animation-delay: 8.6s;
			}
			#aarea .deco14 span {
				right: 0;
				background-color: #f06400;
				animation-name: deco06;
				animation-delay: 8.2s;
			}
			#aarea .deco15 span {
				left: 0;
				background-color: #f5b400;
				animation-name: deco07;
				animation-delay: 7.4s;
			}
			#aarea .deco16 span {
				left: 0;
				background-color: #0a9bcd;
				animation-name: deco08;
				animation-delay: 8.1s;
			}
			#barea .deco01 span {
				left: 0;
				background-color: #f06400;
				transition: 0.3s 0.9s;
			}
			#barea .deco02 span {
				right: 0;
				background-color: #f5b400;
				transition: 0.3s 1.5s;
			}
			#barea .deco03 span {
				left: 0;
				background-color: #f5b400;
				transition: 0.3s 0.7s;
			}
			#barea .deco04 span {
				right: 0;
				background-color: #0a9bcd;
				transition: 0.3s 2.1s;
			}
			#barea .deco05 span {
				left: 0;
				background-color: #fff;
				transition: 0.3s 1.3s;
			}
			#barea .deco06 span {
				right: 0;
				background-color: #6e3cbe;
				transition: 0.3s 1.9s;
			}
			#barea .deco07 span {
				left: 0;
				background-color: #0a9bcd;
				transition: 0.3s 0.5s;
			}
			#barea .deco08 span {
				right: 0;
				background-color: #0a9bcd;
				transition: 0.3s 1.1s;
			}
			#barea .deco09 span {
				right: 0;
				background-color: #f5b400;
				transition: 0.3s 1.7s;
			}
/*
			.on .deco span {
				width: 100% !important;
			}
*/
			.active #barea .deco.on span {
				width: 100% !important;
			}
	#main #barea {
		position: relative;
		width: 100%;
		height: 100%;
	}
		.bimg_area {
			width: 100%;
			height: 100%;
		}
			.bimg_area .bimg {
				box-sizing: border-box;
				position: relative;
			}
			.bimg_area .bimg:not(:last-child) {
				height: 55vw;
			}
			.bimg_area .bimg + .bimg {
				border-top: #fff solid 5px;
			}
			.bimg_area .bimg:nth-child(8) {
				display: flex;
				align-items: center;
				justify-content: center;
			}
				.bimg_area .bimg a {
					display: block;
					height: 100%;
					overflow: hidden;
					cursor: pointer;
				}
				.bimg_area .bimg span {
					background-size: cover;
					width: 100%;
					height: 100%;
					display: block;
					background-position: 50% 50%;
					opacity: 0;
					transition-duration: 1s;
				}
				.on .bimg_area .bimg span {
					opacity: 1;
				}
				.bimg_area .bimg a:hover span {
					transform: scale(1.1);
					opacity: 0.7;
				}
				.bimg_area .bimg:nth-child(1) span {
					background-image: url("../img/bimg01.jpg");
				}
				.bimg_area .bimg:nth-child(2) span {
					background-image: url("../img/bimg02.jpg");
				}
				.bimg_area .bimg:nth-child(3) span {
					background-image: url("../img/bimg03.jpg");
				}
				.bimg_area .bimg:nth-child(4) span {
					background-image: url("../img/bimg04.jpg");
				}
				.bimg_area .bimg:nth-child(5) span {
					background-image: url("../img/bimg06.jpg");
				}
				.bimg_area .bimg:nth-child(6) span {
					background-image: url("../img/bimg07.jpg");
				}
				.bimg_area .bimg:nth-child(7) span {
					background-image: url("../img/bimg08.jpg");
				}
				.bimg_area .bimg:nth-child(8) dl {
					padding: 10px 10px 15px;
					box-sizing: border-box;
					width: 100%;
					display: -webkit-flex;
					display: -ms-flexbox;
					display: flex;
				}
					.bimg_area .bimg:nth-child(8) dl dt {
						letter-spacing: 2px;
					}
					.bimg_area .bimg:nth-child(8) dl dd {
						width: calc(100% - 60px);
						font-size: 13px;
					}
						.bimg_area .bimg:nth-child(8) dl dd .news_inn {
							position: relative;
							display: block;
						}
						.bimg_area .bimg:nth-child(8) dl dd a.news_inn::before {
							position: absolute;
							content: "";
							top: 0;
							bottom: 0;
							right: 3px;
							margin: auto;
							width: 25px;
							height: 4px;
							border-right: solid 1px #000;
							border-bottom: solid 1px #000;
							transform: skew(45deg);
						}
						.bimg_area .bimg:nth-child(8) dl dd p {
							float: left;
						}
						.bimg_area .bimg:nth-child(8) dl dd .news_inn div {
							margin-left: 3%;
							float: left;
							width: calc(100% - 100px);
						}
							.bimg_area .bimg:nth-child(8) dl dd a.news_inn div{
								width: calc(100% - 120px);
							}
				.bimg_area .bimg:not(:last-child) a div {
					position: absolute;
					bottom: 0;
					left: 0;
					font-size: 15px;
					color: #fff;
					line-height: 1;
				}
					.bimg_area .bimg div p {
						padding: 8px 8px;
						display: inline-block;
						line-height: 1;
						background-color: #000;
					}
					/*.bimg_area .bimg:nth-child(1) div p {
						background-color: #00b176;
					}
					.bimg_area .bimg:nth-child(2) div p {
						background-color: #6e3cbe;
					}
					.bimg_area .bimg:nth-child(3) div p {
						background-color: #6e3cbe;
					}
					.bimg_area .bimg:nth-child(4) div p {
						background-color: #f06400;
					}
					.bimg_area .bimg:nth-child(5) div p {
						background-color: #00b176;
					}
					.bimg_area .bimg:nth-child(6) div p {
						background-color: #f06400;
					}
					.bimg_area .bimg:nth-child(7) div p {
						background-color: #6e3cbe;
					}
					.bimg_area .bimg:nth-child(8) div p {
						background-color: #00b176;
					}*/
					.bimg_area .bimg div p.stxt {
						font-size: 13px;
					}

	
	
	
	
	
	
	
}