@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


/* common 
----------------------------------------------------------- */
body{
	font-size:100%;
}
div#wrapper{
	overflow:hidden;
}
div#wrapper div#contents{
	width:calc(100% - 120px);
	position:relative;
	z-index:99999999;
}

h2.ttl{
	width:100%;
	font-family: "Playfair Display", serif;
	color:#016342;
	font-size:60px;
	text-align:center;
}

h2.ttl:before,
h2.ttl:after{
	width:135px;
	height:30px;
	content:"";
	display:inline-block;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
	background-image:url(../img/top/feather_l.webp);
}
h2.ttl:after{
	left:auto;
	right:0;
	background-image:url(../img/top/feather_r.webp);
}
p.link_btn a{
	width:calc(100% - 30px);
	display:block;
	max-width:500px;
	margin:0 auto;
	padding:15px;
	color:#fff;
	text-align:center;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	background-color:#016342;
	transition:all 0.3s linear;
}
p.link_btn a:hover{
	background-color:orange;
}
div#gnavi{
	font-size:75%;
}
@media screen and (max-width:980px){
	div#header{
    	margin:0 auto;
    }
	div#wrapper{
		width:100%;
		margin-top:110px;
		padding:0;
	}
	div#wrapper div#contents{
		width:calc(100% - 60px);
	}
	h2.ttl{
		font-size:48px;
	}
}
@media screen and (max-width:680px){
	h2.ttl:before,
	h2.ttl:after{
		width:90px;
		height:20px;
	}
}
@media screen and (max-width:540px){
	div#wrapper div#contents{
		width:calc(100% - 45px);
	}
	h2.ttl{
		font-size:42px;
	}
	h2.ttl:before,
	h2.ttl:after{
		width:67.5px;
		height:15px;
	}
}
@media screen and (max-width: 480px) {
	div#header {
		height: 90px;
	}
	div#header h1{
		display:block;
		margin-top:10px;
		font-size:10px;
	}
}
@media screen and (max-width: 420px) {
	div#wrapper div#contents{
		width:calc(100% - 30px);
	}
	h2.ttl{
		position:relative;
		margin-bottom:15px;
		padding-bottom:5px;
	}
	h2.ttl:before,
	h2.ttl:after{
		position:absolute;
		bottom:0;
	}
	h2.ttl:before{right:calc(50% - 75px);}
	h2.ttl:after {left :calc(50% - 75px);}
}
@media screen and (max-width: 360px) {
	div#header {
		height: 42px;
	}
	div#header h1{
		display:none;
	}
	div#wrapper {
		margin-top: 70px;
	}
}
@media screen and (max-width: 320px) {
	h2.ttl{
		font-size:34px;
	}
}


/* header 
----------------------------------------------------------- */

@media screen and (max-width: 980px) {
	div#gnavi{
		margin:107px auto -112px;
	}
}
@media screen and (max-width: 360px) {
	div#gnavi{
		margin:68px auto -72px;
	}
}


/* movie 
----------------------------------------------------------- */
#player {
    width: 100%;
    aspect-ratio: 16 / 9;
}
div#movie,
div#movie video{
	width:100%;
}



/* bomb menu
----------------------------------------------------------- */
div#bakudan_menu {
	width:100%;
	position:relative;
	margin:-1em auto 90px;
	padding:15px 0;
	border-top:3px #ffe600 solid;
	outline-top:3px #ffe600 solid;
	background: linear-gradient(to bottom, #016342, #01321e);
}
div#bakudan_menu:before {
	width:100%;
	height:1px;
	content:"";
	position:absolute;
	top:-3px;
	display:block;
	background-color:red;
}
div#bakudan_menu:after {
	width:100%;
	max-width:412px;
	content:"";
	position:absolute;
	top:calc(-412px * 0.1366);
	left:calc(50% - 206px);
	display:block;
	padding-top:13.66%;
	padding-top:calc(412px * 0.1366);
	background:url(../img/top/bomb_header.webp) no-repeat center center / 100% auto;
}
div#bakudan_menu h2.ttl{
	position:absolute;
	top:-40px;
	color:#fff;
	font-size:46px;
	letter-spacing:-0.06em;
	text-shadow: #00321e 2px 0 5px,#00321e 2px 2px 5px,#00321e 0 2px 5px,#00321e 0 0 5px;
	z-index:10;
}
div#bakudan_menu h2.ttl:before,
div#bakudan_menu h2.ttl:after{
	display:none;
}
div#bakudan_menu ul{
	width:100%;
}
div#bakudan_menu ul li{
	width:200px;
	position:relative;
	margin:0 15px;
	text-align:center;
	transition:all 0.3s linear;
}
div#bakudan_menu ul li:hover{
	width:240px;
}
div#bakudan_menu ul li a{
	position:relative;
	color:#fff;
	text-align:center;
	text-decoration:none;
	z-index:999991;
}
div#bakudan_menu ul li a:before{
	width:100%;
	content:"";
	display:block;
	padding-top:100%;
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-ms-border-radius:50%;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:110% auto;
	transition:all 0.3s linear;
}
div#bakudan_menu ul li.bomb1 a:before{background-image:url(../img/top/bomb1.webp);}
div#bakudan_menu ul li.bomb2 a:before{background-image:url(../img/top/bomb2.webp);}
div#bakudan_menu ul li.bomb3 a:before{background-image:url(../img/top/bomb3.webp);}
div#bakudan_menu ul li.bomb4 a:before{background-image:url(../img/top/bomb4.webp);}
div#bakudan_menu ul li.bomb5 a:before{background-image:url(../img/top/bomb5.webp);}
div#bakudan_menu ul li.bomb6 a:before{background-image:url(../img/top/bomb6.webp);}
div#bakudan_menu ul li.bomb7 a:before{background-image:url(../img/top/bomb7.webp);}

div#bakudan_menu ul li:hover a:before{
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	-ms-border-radius:30px;
	transition:all 0.3s linear;
}
.slick-prev,
.slick-next{
	width:70px;
	height:70px;
	position:absolute;
	bottom:-15px;
	left:0;
	color:#fff;
	padding-top:50px;
	border:none;
	background-color:#00321e;
	z-index:10;
	cursor:pointer;
	transition:all 0.3s linear;
}
.slick-prev:hover,
.slick-next:hover{
	background-color:orange;
}
.slick-next{
	left:auto;
	right:0;
}
.slick-prev:after,
.slick-next:after{
	width:20px;
	height:20px;
	content:"";
	position:absolute;
	top:12px;
	left:27px;
	display:block;
	border-top:10px #fff solid;
	border-right:10px #fff solid;
	transform:rotate(-135deg);
	background-color:transparent;
}
.slick-next:after{
	left:auto;
	right:27px;
	transform:rotate(45deg);
}
@media screen and (max-width:980px){
	div#bakudan_menu ul li a{
		font-size:14px;
	}
}
@media screen and (max-width:680px){
	div#bakudan_menu::after {
		max-width: 287px;
		top: calc(-287px * 0.1366);
		left: calc(50% - 143.5px);
		padding-top: calc(267px * 0.1366 + 3px);
	}
	div#bakudan_menu h2.ttl {
		top: -20px;
		font-size: 36px;
	}
	div#bakudan_menu ul li a{
		display:block;
		line-height:1.4;
	}
    div#bakudan_menu:after {
        background:none;
    }
}
@media screen and (max-width:540px){
	div#bakudan_menu{
		margin-bottom:30px;
	}
	div#bakudan_menu ul li a{
		font-size:12px;
	}
}


/* steam 
----------------------------------------------------------- */
.slick-list{
	overflow:visible;
}
div#bakudan_menu ul li{
	cursor:pointer;
}
div#bakudan_menu ul li:before,
div#bakudan_menu ul li:after {
	width:320px;
	height:600px;
	content:"";
    position: absolute;
    left: calc(50% - 180px);
    display:block;
    background:url(../img/top/steam.svg) no-repeat center center / 100% auto;
    transition: all 0.3s ease-out;
    opacity: 0;
    z-index:-1;
}
div#bakudan_menu ul li:after {
    transform: rotate(180deg);
}
div#bakudan_menu ul li:hover:before{
    animation: steam_Move 12s infinite linear;
    z-index:1;
}
div#bakudan_menu ul li:hover:after{
    animation: steam2_Move 12s infinite linear;
    animation-delay:6s;
    transform: rotate(180deg);
    z-index:1;
}
@keyframes steam_Move {
    0% {
        filter: blur(10px);
        transform: rotateY(0deg);
        transform: scale(1, 1);
        top: -340px;
    }
    33% {
        transform: rotateY(36deg);
        transform: scale(0.9, 1.1);
        opacity: 0.8;
    }
    50% {
        transform: rotateY(42deg);
        transform: scale(1, 1.2);
    }
    66% {
        transform: rotateY(56deg);
        transform: scaleY(1.1, 1.3);
    }
    100% {
        filter: blur(30px);
        transform: rotateY(60deg);
        transform: scaleY(1.2, 1.2);
        top: -860px;
    }
}
@keyframes steam2_Move {
    0% {
        filter: blur(10px);
        transform: rotateY(0deg);
        transform: scale(1, 1);
        top: -340px;
    }
    33% {
        transform: rotateY(36deg);
        transform: scale(0.9, 1.1);
        opacity: 0.8;
    }
    50% {
        transform: rotateY(42deg);
        transform: scale(1, 1.2);
    }
    66% {
        transform: rotateY(56deg);
        transform: scaleY(1.1, 1.3);
    }
    100% {
        filter: blur(30px);
        transform: rotateY(60deg);
        transform: scaleY(1.2, 1.2);
        top: -860px;
    }
}



/* topics 
----------------------------------------------------------- */
div#topics{
	margin:0 auto 90px;
}
div#topics{}
div#topics ul li{
	width:calc(50% - 15px);
	margin:0 30px 30px 0;
}
div#topics ul li:nth-child(2n){
	margin-right:0;
}
@media screen and (max-width:540px){
	div#topics{
		margin-bottom:30px;
	}
}
@media screen and (max-width:420px){
	div#topics ul li{
		width:auto;
		margin-right:0;
	}
}




/* news 
----------------------------------------------------------- */
div#news{
	margin:0 auto 90px;
}
div#news ul{
	margin:0 auto 45px;
	text-align:center;
}
div#news ul li {
	width:calc(20% - 16px);
	max-width:240px;
	margin-right:20px;
	transition:all 0.3s linear;
}
div#news ul li:hover {
	margin-top:-15px;
}
div#news ul li:last-child {
	margin-right:0;
}
div#news ul li a{
	display:block;
	position:relative;
	padding-top:185px;
	color:#016342;
	background-repeat:no-repeat;
	background-position:center top;
	background-size:auto 170px;
	overflow:hidden;
	transition:all 0.3s linear;
}
div#news ul li a:hover{
	color:orange;
}
div#news ul li a span.icon{
	width:12em;
	position:absolute;
	top: 2em;
	right: calc(-2em * 1.414);
	display:block;
	padding:4px 0 2px;
	color:#fff;
	font-size:14px;
	text-align:center;
	transition:all 0.3s linear;
	transform:rotate(45deg);
}
div#news ul li a span.icon.cat1{background-color:#ff6467;}
div#news ul li a span.icon.cat2{background-color:#ff9600;}
div#news ul li a span.icon.cat3{background-color:#45a7ff;}
div#news ul li a:hover span.icon{
	background-color:#fff;
}
div#news ul li a:hover span.icon.cat1{color:#ff6467;}
div#news ul li a:hover span.icon.cat2{color:#ff9600;}
div#news ul li a:hover span.icon.cat3{color:#45a7ff;}
div#news ul li span.date{
	display:block;
	float:left;
}
div#news ul li span.new{
	display:block;
	float:right;
}
@media screen and (max-width:1024px){
	div#news ul li {
		width:calc(33.33% - 13.33px);
		max-width:none;
		margin-bottom:30px;
	}
	div#news ul li:nth-child(3n) {
		margin-right:0;
	}
}
@media screen and (max-width:640px){
	div#news ul li {
		width:100%;
	}
	div#news ul li:hover {
		margin-top:0;
	}
	div#news ul li a{
		min-height:90px;
		display:block;
		position:relative;
		padding-top: calc(1.4em + 11px);
		padding-left:210px;
		background-position:left top;
		background-size:180px auto;
	}
	div#news ul li a span.icon{
		width:calc(100% - 210px);
		top:0;
		right:0;
		transform:rotate(0);
	}
	div#news ul li a:hover span.icon.cat1{background-color:#ff6467;}
	div#news ul li a:hover span.icon.cat2{background-color:#ff9600;}
	div#news ul li a:hover span.icon.cat3{background-color:#45a7ff;}
	div#news ul li a:hover span.icon{color:#fff!important;}
}
@media screen and (max-width:540px){
	div#news{
		margin-bottom:45px;
	}
	div#news ul{
		margin-bottom:15px;
	}
	div#news ul li {
		margin-bottom:15px;
	}
	div#news ul li span.date{
		font-size:14px;
	}
}
@media screen and (max-width:420px){
	div#news ul li a{
		min-height:calc(35vw - 53px);
		padding-left:50%;
		font-size:14px;
		background-size:calc(50% - 10px) auto;
	}
	div#news ul li a span.icon{
		width:50%;
	}
}



/* sns bnr
----------------------------------------------------------- */
div#sns,
div#bnr{}
div#bnr{
	margin:0 auto 90px;
}
div#sns ul,
div#bnr ul{
	margin:0 auto 30px;
	text-align:center;
}
div#sns ul li,
div#bnr ul li{
	margin:0 15px 15px;
}
@media screen and (max-width:540px){
	div#bnr{
		margin-bottom:30px;
	}
	div#sns ul li,
	div#bnr ul li{
		margin:0 7.5px 15px;
	}
}

/* map
----------------------------------------------------------- */
div#map{
	margin:0 auto 90px;
}
div#map iframe{
	width:100%;
	height:450px;
	margin:0 auto 30px;
}