@charset "utf-8";
/* CSS Document */
body{padding-top: 0!important;}
.header{
	transform: translateY(-80%);
	opacity: 0;
	transition: ease 0.6s;
	-ms-filter: blur(15px);
	filter: blur(15px);
	pointer-events: none;
}
.pagetop,.lang_bt{
	opacity: 0;
	transition: ease 0.6s;
	-ms-filter: blur(15px);
	filter: blur(15px);
	pointer-events: none;
}
body.active .header{
	transform: translateY(0);
	opacity: 1;
	-ms-filter: blur(0px);
	filter: blur(0px);
	pointer-events: auto;
}
body.active .pagetop,body.active .lang_bt{
	opacity: 1;
	-ms-filter: blur(0px);
	filter: blur(0px);
	pointer-events: auto;
}

.header .head_nav .ul .li:nth-of-type(1){
	position: relative;
}
.header .head_nav .ul .li:nth-of-type(1)::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: calc(100% + 10px);
	height: 2px;
	background-color: #0A9450;
}
.header .head_nav .ul .li:nth-of-type(1) a{pointer-events: none;}

.fv{
	position: inherit;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #F0F4F3;
	padding: 5vh;
	padding-top: 180px;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:nowrap;
    -moz-flex-wrap:nowrap;
    -ms-flex-wrap:nowrap;
    flex-wrap:nowrap;
    justify-content: center;
    align-items: center;
	flex-direction: column;
	/*
	mix-blend-mode: difference;
	*/
}
.fv .fv_title{
	max-width: 60%;
}

body:not(.gjs-dashed) .fv.loader{
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
}
body:not(.gjs-dashed) .fv.loader .imgbox{
	position: relative;
}
body:not(.gjs-dashed) .fv.loader .imgbox img{
	position: relative;
	opacity: 0;
	animation-name: fv1;
	animation-duration: 1.4s;
	animation-delay: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
body:not(.gjs-dashed) .fv.loader .imgbox::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("https://bombg-world.jp/system_panel/uploads/images/fv_img.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	mix-blend-mode: luminosity;
	-ms-filter: blur(30px);
	filter: blur(30px);
	opacity: 0;
	animation-name: fv2;
	animation-duration: 2.0s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
body:not(.gjs-dashed) .fv.loader .fv_title{
	transform: scale(0.5);
	opacity: 0;
	-ms-filter: blur(30px);
	filter: blur(30px);
	animation-name: fvtitle;
	animation-duration: 2.0s;
	animation-delay: 1.6s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}


@keyframes fvtitle {
	0% {
		opacity: 0;
		transform: scale(0.5);
		-ms-filter: blur(30px);
		filter: blur(30px);
	}
	50% {
		opacity: 1;
		transform: scale(1.5);
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
	55% {
		opacity: 1;
		transform: scale(1.2);
	}
	60% {
		opacity: 1;
		transform: scale(1.6);
	}
	65% {
		opacity: 1;
		transform: scale(1.1);
	}
	70% {
		opacity: 1;
		transform: scale(1.3);
	}
	75% {
		opacity: 1;
		transform: scale(1.0);
	}
	100% {
		opacity: 1;
		transform: scale(1.0);
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
}
@keyframes fv1 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fv2 {
	0% {
		opacity: 0;
		-ms-filter: blur(30px);
		filter: blur(30px);
	}
	30% {
		opacity: 1;
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
	60% {
		opacity: 1;
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
	100% {
		opacity:0;
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
}
body:not(.gjs-dashed) .fv{
	padding-top: 110px;
	height: auto;
}
body:not(.gjs-dashed) .fv .fv_movie{
	border-radius: 40px;
	overflow: hidden;
	box-shadow: inset 0 0 10px rgba(0,0,0,1);
	position: relative;
}
body:not(.gjs-dashed) .fv .fv_movie::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 40px;
	box-shadow: inset 0 0 40px rgba(0,0,0,0.5);
}
body:not(.gjs-dashed) .fv .fv_movie video{
	width: 100%;
	height: 100%;
	transform: scale(1.1);
}

.section01{
	background-color: #E6EBE6;
	gap: 60px;
	text-align: center;
}
.section01 .imgbox{max-width: 80%;}

.section02 .box{
	flex-direction: row-reverse;
	align-items: stretch;
}
.section02 .box.box1{
	background-color: #16C69D;
}
.section02 .box.box2{
	background-color: #F56597;
}
.section02 .box.box3{
	background-color: #E3D311;
}
.section02 .box > div{
	width: 50%;
}
.section02 .box .rightbox .box_inner,.section02 .box1 .leftbox .box_inner{
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
.section02 .box .rightbox .box_inner{
	animation-delay: 0.6s;
}
.section02 .box .rightbox{
	position: relative;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: flex-start;
    align-items: center;
	flex-direction: column;
}
.section02 .box .rightbox .box_inner,.section03 .txtbox .box_inner{
	position: relative;
	z-index: 2;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: center;
    align-items: flex-start;
	flex-direction: column;
	gap: 80px;
	color: #fff;
}
body.gjs-dashed .section02 .box .bg_img{
	width: 50%;
}
body:not(.gjs-dashed) .section02 .box .bg_img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	mix-blend-mode: multiply;
}
.section02 .box .bg_img.sc-anime.on{
	filter: grayscale(100%);
	opacity: 0;
}
.section02 .box .bg_img.on.active{
	animation-name: bg_img1;
	animation-duration: 2.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
@keyframes bg_img1 {
	0% {
		filter: grayscale(100%);
		opacity: 0;
	}
	50% {
		filter: grayscale(0%);
		opacity: 1;
	}
	100% {
		filter: grayscale(0%);
		opacity: 0.4;
	}
}

.section02 .box1 .leftbox .itemwrap .item{
	position: relative;
	width: 80%;
}
.section02 .box1 .leftbox .itemwrap .item:not(:last-of-type){
	margin-bottom: 100px;
}
.section02 .box1 .leftbox .itemwrap .item:nth-of-type(even){
	margin-left: auto;
	margin-right: 0;
}
.section02 .box1 .leftbox .itemwrap .item .imgbox{margin-bottom: 10px;}
.section02 .box1 .leftbox .itemwrap .item .num_txt1{
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%,-50%);
}
.section02 .box1 .leftbox .itemwrap .item .title{
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(10px,-50%);
	background-color: #231816;
	color: #fff;
	padding: 5px 15px;
}

.section02 .box2 .leftbox .box_inner,.section02 .box3 .leftbox .box_inner{
	position: relative;
	justify-content: flex-start;
	align-items: flex-end;
}
.section02 .box2 .leftbox{
	padding: 5% 0;
}
.section02 .box2 .leftbox .box_inner .img1{
	width: 35%;
	margin-left: 10%;
	margin-bottom: 5%;
}
.section02 .box2 .leftbox .box_inner .img2{
	width: 30%;
	position: absolute;
	top: 0;
	right: 5%;
	z-index: 1;
}
.section02 .box2 .leftbox .box_inner .img3{
	width: 70%;
}
.section02 .box2 .leftbox .box_inner .img4{
	width: 30%;
	padding: 0 5%;
	position: relative;
	z-index: 2;
}
.section02 .box2 .leftbox .box_inner .img4 img{
	width: 80%;
	margin-left: 20%;
	margin-bottom: 20%;
}
.section02 .box2 .leftbox .box_inner .img4 p{
	font-family: "Poppins", "Noto Sans", "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;	
	font-size: clamp(10px,1.2vw,14px);
}
.section02 .box2 .leftbox .box_inner .img5{
	width: 45%;
	position: relative;
	z-index: 3;
	margin-left: 10%;
	margin-right: 30%;
	margin-bottom: -20%;
}
.section02 .box2 .leftbox .box_inner .img5 img{
	margin-top: -150px;
}
.section02 .box2 .leftbox .box_inner .img6{
	width: 35%;
	margin-left: 5%;
	position: relative;
	z-index: 2;
}
.section02 .box2 .leftbox .box_inner .img7{
	width: 50%;
	margin-top: 5%;
	margin-left: 10%;
	padding-bottom: 10%;
}
.section02 .box2 .leftbox .box_inner .img8{
	width: 15%;
	margin-left: 10%;
	transform: translateY(-25%);
	position: relative;
	z-index: 2;
}
.section02 .box2 .leftbox .box_inner .img9{
	width: 50%;
	margin: 0 3%;
	margin-top: -20%;
}
.section02 .box2 .leftbox .box_inner .img10{
	width: 15%;
	transform: translateY(-100%);
}
.section02 .box3 .leftbox .box_inner{
	align-items: flex-start;
	padding-top: 5%;
}
.section02 .box3 .leftbox .box_inner .img1{
	width: 40%;
	margin-top: 10%;
}
.section02 .box3 .leftbox .box_inner .img2{
	width: 45%;
	margin-left: 10%;
	position: relative;
	z-index: 2;
}
.section02 .box3 .leftbox .box_inner .img3{
	width: 55%;
	margin-left: 5%;
	transform: translateY(-35%);
	margin-bottom: -50%;
}
.section02 .box3 .leftbox .box_inner .img3 .imgtxt{
	position: absolute;
	width: auto;
	height: 50px;
	top: 100%;
	right: 0;
	transform: translate(20px,-20px);
}
.section02 .box3 .leftbox .box_inner .img4{
	width: 25%;
	margin-top: 5%;
	margin-left: 7.5%;
}
.section02 .box3 .leftbox .box_inner .img5{
	width: 40%;
	position: relative;
	margin-top: -20%;
	
}
.section02 .box3 .leftbox .box_inner .img6{
	width: 20%;
	position: relative;
	margin-top: 5%;
	margin-bottom: 5%;
}
.section02 .box3 .leftbox .box_inner .img7{
	width: 70%;
	position: relative;
}
.section02 .box3 .leftbox .box_inner .img7 img:not(.imgtxt){
	width: 110%;
}
.section02 .box3 .leftbox .box_inner .img7 img.imgtxt{
	position: absolute;
	bottom: 100%;
	right: 0;
	z-index: 2;
	width: auto;
	height: 50px;
	transform: translate(70%,20px);
}
.section02 .box3 .leftbox .box_inner .img8{
	width: 30%;
	margin-top: 10%;
	position: relative;
	z-index: 2;
}

.section02 .box3 .rightbox .box_inner, .section03 .txtbox .box_inner{
	color: #231816;
}

.section03{background-color: #E6EBE6;}
.section03 .imgbox{
	width: 40%;
}
.section03 .txtbox{
	width: 60%;
	padding-right: 5%;
}

.section04{
	overflow: hidden;
}
.section04 .swiper-container{
	position: relative;
}
.section04 .swiper-container .swiper-wrapper{
	transition-timing-function: linear !important;
}
.section04 .swiper-container .swiper-wrapper .swiper-slide{
	opacity: 1;
}
body.gjs-dashed .section04 .swiper-container .swiper-wrapper .swiper-slide{width: 25%;display: inline-block;}

.section04 .swiper-container .swiper-wrapper .swiper-slide a{
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
}
.section04 .swiper-container .swiper-wrapper .swiper-slide a:hover{
	opacity: 1;
}
.section04 .swiper-container .swiper-wrapper .swiper-slide a .bg_img_wrap2{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%,-50%);
	transition: ease 0.6s;
}
.section04 .swiper-container .swiper-wrapper .swiper-slide a:hover .bg_img_wrap2{
	transform: translate(-50%,-50%) scale(1.1);
}

.section04 .width-1280-max a{
	gap: 10px;
	padding-bottom: 5px;
	border-bottom: 3px solid #231816;
}
.section04 .width-1280-max a img{
	width: 12px;
	transition: ease 0.3s;
}
.section04 .width-1280-max a:hover img{
	transform: translate(2px,-2px);
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.fv{padding-top: 160px;}
	.section02 .box .rightbox .box_inner,.section03 .txtbox .box_inner{
		gap: 60px;
	}
	.section02 .box1 .leftbox .itemwrap .item{
		width: 90%;
	}
	.section02 .box3 .leftbox .box_inner .img7 img.imgtxt{
		transform: translate(50%,20px);
	}
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.fv{padding-top: 140px;}
	.section02 .box .rightbox,.section02 .box1 .leftbox{
		padding-top: 80px;
		padding-bottom: 80px;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	body{padding-top: 120px;}
	
	body:not(.gjs-dashed) .fv .fv_movie{border-radius: 30px;}
	.section02 .box .rightbox .box_inner,.section03 .txtbox .box_inner{
		gap: 40px;
	}
	.section02 .box .rightbox, .section02 .box1 .leftbox{
		padding: 50px 40px;
	}
	.section02 .box2 .leftbox,.section02 .box3 .leftbox{
		display:-webkit-box;
		display:-moz-box;
		display:-ms-box;
		display:-webkit-flexbox;
		display:-moz-flexbox;
		display:-ms-flexbox;
		display:-webkit-flex;
		display:-moz-flex;
		display:-ms-flex;
		display:flex;
		-webkit-box-lines:multiple;
		-moz-box-lines:multiple;
		-webkit-flex-wrap:wrap;
		-moz-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}
	.section02 .box3 .leftbox .box_inner .img6{
		margin-bottom: 15%;
	}
	.section02 .box3 .leftbox .box_inner .img7 img.imgtxt{
		transform: translate(30%,20px);
	}
	.section02 .box1 .leftbox .itemwrap .item:not(:last-of-type){
		margin-bottom: 80px;
	}
	
	.section03 .imgbox{
		width: 35%;
	}
	.section03 .txtbox{
		width: 65%;
		padding-right: 5%;
	}
}
/* ---------- 767px ~ ---------- */
@media screen and (max-width: 767px){
	.section02 .box > div{
		width: 100%;
	}
	.section02 .box1 .leftbox{
		padding: 50px 40px;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.fv{
		padding-top: 0!important;
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 0;
	}
	.fv .fv_title{
		max-width: 80%;
	}
	body:not(.gjs-dashed) .fv .fv_movie,body:not(.gjs-dashed) .fv .fv_movie::after{border-radius: 0px;}
	body:not(.gjs-dashed) .fv .fv_movie{
		width: 100%;
		height: 100vh;
	}
	body:not(.gjs-dashed) .fv .fv_movie video{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%) scale(1.1);
		object-fit: cover;
	}
	
	.section01 .imgbox{max-width: 100%;}
	.section02 .box .rightbox .box_inner,.section03 .txtbox .box_inner{
		align-items: center;
	}
	.section02 .box .rightbox .box_inner,.section03 .txtbox .box_inner{
		gap: 40px;
	}
	.section02 .box .rightbox, .section02 .box1 .leftbox{
		padding: 50px 20px;
	}
	.section02 .box1 .leftbox{
		padding: 50px 40px;
	}
	.section02 .box1 .leftbox .itemwrap .item{
		width: 100%;
	}
	.section02 .box1 .leftbox .itemwrap .item:not(:last-of-type){
		margin-bottom: 60px;
	}
	.section03 .imgbox{
		width: 70%;
		margin-bottom: 40px;
		text-align: center;
	}
	.section03 .txtbox{
		width: 100%;
		padding-right: 0;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}