@charset "utf-8";

html{}
body{padding:0;margin:0;}
body{font-size:0px;line-height:1;}



/*-----------------------*/
*{margin:0;padding:0;border:none;outline:none;font-size:inherit;color:inherit;vertical-align:top;text-align:inherit;}


/* #page
------------------*/
body>.page{font-size:0;line-height:1;}
body>.page{overflow:hidden;margin:0 auto;}
.page{overflow:hidden;width:auto;display:block;position:relative;z-index:1;text-align:center;}

img{max-width:100%;width:auto;}

.itemBox{max-width:1280px;margin:0 auto;}

.page main{padding:0;}

.breadLIst{font:16px / 1 'Noto sans jp';padding:1em;}
.breadLIst ul{display:flex;align-items:center;justify-content:left;}
.breadLIst ul>li{display:flex;align-items:center;justify-content:left;font-size:0.875em;}

.breadLIst ul>li::before{content:'';padding:0;display:block;height:0.5em;width:0.5em;box-shadow:1px 1px;
transform:rotate(-45deg);transform-origin:center center;margin:0 0.5em}

.breadLIst ul>li:nth-of-type(1)::before{display:none;}

.breadLIst ul>li a{text-decoration:none;}
.breadLIst ul>li span{}

/*----------------------*/
header [data-position="fixed"]{height:100px;}
header [data-position="fixed"]>section {position:fixed;top:0;text-align:center;width:100%;background-color:#fff;z-index:999;height:100px;transition:0.4s;box-shadow:0 -5px 10px;}
header [data-position="fixed"]>section .logo>a{display:block;background:url(../img/logo.png) no-repeat 50% 50%;background-size:contain;width:180px;height:45px;}
header [data-position="fixed"]>section .inner{height:100%;max-width:1280px;margin:0 auto;width:92%;box-sizing:border-box;position:relative;
}

header .inner{display:flex;justify-content:space-between;align-items:center;}

header .language {
    font-size: 18px;
}

header .language a {
    text-decoration: none;
}

header .language a:hover {
    text-decoration: none;
	color: #d73838;
}


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

header .inner{display:flex;align-items:center;}


header [data-position="fixed"]{height:60px;}
header [data-position="fixed"]>section{height:60px;}
}
@media only screen and (max-width:800px) {
}



@media only screen and (max-width:600px) {   
header [data-position="fixed"]>section[data-device="pc"]{display:none;}
header [data-position="fixed"]>section[data-device="smp"]{display:block;}
	
header [data-position="fixed"]>section .logo>a {
    width: 130px;
}	
	
	
header .logo {
    position: absolute;
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
}

header .language {
    font-size: 16px;
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translateY(-50%);
}

	
	
}



.show header [data-position="fixed"]{height:60px;}
.show header [data-position="fixed"]>section{height:60px;}



/*---------------------*/
#kv{display:flex;position:relative;justify-content:center;align-items:center;}
#kv p{
	display:flex;
	position:absolute;
	font:700 4vw / 1.25 'Noto sans jp';
	z-index:2;
	width:100%;
	justify-content:left;
	align-items:center;
	color:#fff;
	max-width:1280px;
	padding:0 1em;
	box-sizing:border-box;
	letter-spacing:0.25em;
}
#kv picture{background:no-repeat 50% 50%;background-size:cover;display:block;position:relative;z-index:1;}
#kv>picture{background-image:url(../img/ep00.jpg);}

/*---------------------*/

main{min-height:100vh;}



/*-------------*/
footer{}
#ft01{max-width:1280px;margin:0 auto;font:16px / 25px 'Noto sans jp';justify-content:left;display:flex;flex-wrap:wrap;align-items:center;padding:2em 0;}
#ftHD{order:2;width:200px;}
#ft01 .navBox{order:1;width:calc(100% - 200px);}

.navBox>ul{padding:0 1em;display:flex;justify-content:center;align-items:start;flex-wrap:wrap;}
.navBox>ul>li{display:block;width:100%;text-align:center;}
.navBox li>ul>li span::before{content:'・';}
.navBox li{background:#fff;}
.navBox ul>li div[data-id],
.navBox ul>li a{display:block;text-decoration:none;padding:0.75em;}
.navBox>ul>li>ul{display:flex;flex-wrap:wrap;font-size:0.875em;justify-content:center;align-items:center;}
.navBox>ul>li>ul>li{display:block;}

#ft01 .navBox>ul{justify-content:left;}
#ft01 .navBox>ul>li{width:unset;text-align:left;padding-right:2em;}
#ft01 .navBox>ul>li>ul{width:unset;flex-direction:column;}
#ft01 .navBox>ul>li>ul>li{width:100%;}

#ft01 .navBox ul>li div[data-id],
#ft01 .navBox ul>li a{display:block;text-decoration:none;padding:0.25em 0.5em;}

[data-device="smp"] .navBox>ul>li{box-shadow:0 0 0 1px #ccc;margin:1em 0 0}
[data-device="smp"] .navBox>ul>li{padding:0;}

[data-device="smp"] .navBox ul>li div[data-id],
[data-device="smp"] .navBox>ul>li>a{width:100%;box-sizing:border-box;padding:0.75em 0;}
[data-device="smp"] .navBox>ul>li>ul{box-shadow:0 -1px 0 0 #ccc;}
[data-device="smp"] .navBox>ul>li>ul>li{width:50%;box-shadow: -1px 0 0 0 #ccc;}

#ft02{font:15px / 1 'Noto sans jp';}

#ft02 .notice{padding:2em;line-height:1.8;}
#ft02 .copyright{background-image: linear-gradient(90deg,#f7191d 0%,#ffbd00 25%,#15b554 50%,#009fe0 75%,#940ec4 100%);}
#ft02 .copyright{color:#fff;padding:1em 0;letter-spacing:0.1em;}
/*-----------------------------------------------------*/

footer [data-id="pageTop"]{display:block !important; width:100%;transform:translate(0,80px);transition:1s;position:fixed;bottom:0;left:0;}
footer [data-id="pageTop"] span{padding:2em 0;}

.show footer [data-id="pageTop"] span{padding:1em 0;}
.show footer.on [data-id="pageTop"] span{padding:2em 0;}

footer{padding-top:80px;position:relative}
.show footer [data-id="pageTop"]{transform:translate(0,0);transition:1s;background:#eee;opacity:0.8;}
.show footer [data-id="pageTop"]:hover{opacity:1;}
footer.on [data-id="pageTop"]{position:absolute;bottom:unset;top:0;background:#fff;}


@media only screen and (min-width:1000px) {
}



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

#kv picture{height:200px;}
#kv p{font-size:5vw;justify-content:center;text-shadow:0 0 5px #000;}
}

@media only screen and (max-width:600px) {
footer #ft02,
footer #ft01{font-size:16px;}	
#ft01{flex-direction:column;padding:0.25em 0;}
#ftHD{width:100%;}
#ft01 .navBox{width:100%;padding:0 0 3em;}
#ft01 .navBox>ul{display:block;}
#ft01 .navBox>ul>li{text-align:center;padding:0;}
#ft01 .navBox>ul>li>ul{flex-direction:row;}
#ft01 .navBox>ul>li>ul>li{width:50%;}
#ft02 .notice{padding:2em;line-height:1.8;font-size:14px}
#ft02 .copyright{font-size:12px;}
    
#page nav[role="navigation"] input#menuNav:checked~section[data-device="smp"]{
animation: 2s ease 0s 1 both;animation-name:fadeIn;}
}





/**/
li[data-invew]{transform:translateY(10vw);opacity:0;transition:1s;}
li.on[data-invew]{transform:translateY(0);opacity:1;}


/**/
ul[data-invew]{transform:translateY(10vw);opacity:0;transition:1s;}
ul.on[data-invew]{transform:translateY(0);opacity:1;}

/* animation
--------------------*/

[data-invew][data-animation]{animation: 1s ease 0s 1 both;opacity:0;}

@keyframes bounceIn {
0% {opacity: 0;transform: scale(0.3);}
50% {opacity: 1;transform: scale(1.05);}
70% {transform: scale(0.9);}
100% {transform: scale(1);opacity:1;}
}



@keyframes fadeIn {
0% {opacity: 0;transform: translateY(100vh);}
80% {transform: translateY(0);}
100% {opacity: 1;}
}

@keyframes shake {
0%,100%{transform: translateX(0);opacity:1;}
20%, 60% {transform: translateX(-5px);}
40%, 80% {transform: translateX(5px);}
}


*[data-animation="shake"].on{animation-name: shake;}
*[data-animation="bounceIn"].on{animation-name:bounceIn;}
*[data-animation="slideIn"].on{animation: 2s ease 0s 1 both;animation-name:fadeIn;}
*[data-animation].on{}