@charset "UTF-8";
/* CSS Document */
/* 基本情報 */
@keyframes bodyFadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
 @-webkit-keyframes bodyFadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
img {
	max-width: 100%;
	height: auto;
}
body {
	animation: bodyFadeIn 2s ease 0s 1 normal;
	-webkit-animation: bodyFadeIn 2s ease 0s 1 normal;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
    overflow-x: hidden;
}

body#top {
	display: block;
	z-index: -1;
	width: 100%;
    background:#FFF;
    font-size:14px;
    background: url("../../_img/bg_pc.jpg") center top no-repeat;
}


body#lower {
	display: block;
	z-index: -1;
	width: 100%;
    font-size:14px;
    background: #f6f6f6;
}



ol, ul {
	list-style: none;
	list-style-type: none;
}
a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: “alpha( opacity=80 )”;
}

#wrapper{width:100%; overflow: hidden;}
.imgPC {
	display: block;
}
.imgSP {
	display: none;
}
.fadein {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 300ms;
}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

/* ヘッダーロゴ部分 */
#top header{
	width:1000px; height:845px;position:relative;margin:0 auto; z-index:0;
}

header h1 {font-size: 0;}
#top header #chara1 {
    width:30%; position: absolute; left:0; right:-45%; margin:0 auto;top:30%; z-index:5;}
#top header #chara2 {
    width:38%; position: absolute; left:-24%; right:0%; margin:0 auto;top:38%; z-index:5;}
#top header #chara3 {
    width:23%; position: absolute; left:-60%; right:0%; margin:0 auto;top:44%; z-index:3;}
#top header #chara4 {
    width:61%; position: absolute; left:0%; right:-2%; margin:0 auto;top:2%; z-index:2;}
#top header #chara5 {
    width:29%; position: absolute; left:-56%; right:0%; margin:0 auto;top:28%; z-index:2;}
#top header #chara6 {
    width:21%; position: absolute; left:-47%; right:0%; margin:0 auto;top:10%; z-index:1;}
#top header #chara7 {
    width:27%; position: absolute; left:0%; right:-53%; margin:0 auto;top:18%; z-index:1;}
#top header #chara8 {
    width:33%; position: absolute; left:0%; right:-23%; margin:0 auto;top:0%; z-index:0;}

#top header #text1 {
    width:18%; position: absolute; left:-37%; right:0%; margin:0 auto;top:2%; z-index:2;}
#top header #text2 {
    width:25%; position: absolute; left:0%; right:-38%; margin:0 auto;top:12%; z-index:5;}
#top header #scope {
    width:110%; position: absolute; left:-10%; right:0%; margin:0 auto;top:0%; z-index:3;}

#top header #logo{
    width:49%; position: absolute; left:-20%; right:0; margin:0 auto;top:72%; z-index:6;}
#top header #logo10{
    width:24%; position: absolute; left:0%; right:-48%; margin:0 auto;top:66%; z-index:6;}
#top header #nav_text{
    width:30%; position: absolute; left:0%; right:-52%; margin:0 auto;top:88%; z-index:5;}

#top header #sakura0{
    width:95%; position: absolute; left:0%; right:0; margin:0 auto;top:66%; z-index:4;}

#top header #sakura2{
    width:120%; position: absolute; left:-10%; right:0; margin:0 auto;top:0%; z-index:0;}



/* NAV部分 */
#top nav#gNaviSPTOP{display:none;}

#top nav#gNavi ul{width:880px;height:400px; margin:0 auto;position:relative;}
#top nav#gNavi ul li{position:absolute;}
#top nav#gNavi ul li:nth-child(1){top:0;left:0;}
#top nav#gNavi ul li:nth-child(2){top:0;left:200px;}
#top nav#gNavi ul li:nth-child(3){top:0;left:400px;}
#top nav#gNavi ul li:nth-child(4){top:0;left:600px;}
#top nav#gNavi ul li:nth-child(5){top:195px;left:0;}
#top nav#gNavi ul li:nth-child(6){top:195px;left:200px;}
#top nav#gNavi ul li:nth-child(7){top:195px;left:400px;}
#top nav#gNavi ul li:nth-child(8){top:195px;left:600px;}

#lower nav#gNavi{width:100%; margin:0px auto;background:#FFF;padding-top:40px;}
#lower nav#gNavi dl{width:1100px; margin:0px auto 0;}
#lower nav#gNavi ul{width:900px;display:flex; flex-wrap: nowrap; margin:0 auto;}
#lower nav#gNavi ul li{margin-right:-15px}
#lower nav#gNavi ul li:last-child{margin:0;}

#lower nav#gNavi dl dt{width:152px;float:left;}
#lower nav#gNavi dl dt img{margin-top:20px;}
#lower nav#gNavi dl dd{width:948px;margin-left:152px;}


section#mission{width:880px;margin:0 auto;}
section#mission ul#missions li{margin:20px 0;position:relative;}

section#mission ul#missions li#mission10 ul{width:66%;position:absolute;top:66%;left:3%;display: flex;flex-wrap: nowrap;}
section#mission ul#missions li#mission10 ul li{width:32%;margin:0.5%;}

.btn3{display:block;width:100%;color:#FFF;text-align:center;padding:10px;margin:20px auto;font-size:18px;line-height:24px;border:4px solid #FFF;font-weight:bold;position:absolute;top:66%;left:3%;box-sizing: border-box;}
.btn3:hover{display:block;width:100%;color:#333;background:#FFF;text-align:center;padding:10px;margin:20px auto;font-size:18px;line-height:24px;border:4px solid #FFF;font-weight:bold;position:absolute;top:66%;left:3%;box-sizing: border-box;}

.btnL{display:block;width:40%;color:#FFF;text-align:left;padding:10px;margin:20px auto;font-size:21px;line-height:24px;border:4px solid #FFF;font-weight:bold;position:absolute;top:66%;left:3%;box-sizing: border-box;}
.btnL:hover{display:block;width:40%;color:#333;background:#FFF; text-align:left;padding:10px;margin:20px auto;font-size:21px;line-height:24px;border:4px solid #FFF;font-weight:bold;position:absolute;top:66%;left:3%;box-sizing: border-box;}

.btnR{display:block;width:40%;color:#FFF;text-align:right;padding:10px;margin:20px auto;font-size:21px;line-height:24px;border:4px solid #FFF;font-weight:bold;position:absolute;top:66%;right:3%;box-sizing: border-box;}
.btnR:hover{display:block;width:40%;color:#333;background:#FFF; text-align:right;padding:10px;margin:20px auto;font-size:21px;line-height:24px;border:4px solid #FFF;font-weight:bold;position:absolute;top:66%;right:3%;box-sizing: border-box;}


/* Twitter */
#twitter{width:900px;margin:0 auto; }
#twitter h2{width:639px;margin:20px auto; }

#twitter .inner{width:470px;margin: 0 auto;}


/* comics */
#comics{width:900px;margin:0 auto 50px; }
#comics h2{width:639px;margin:20px auto; }
#comics ul{width:100%;display: flex;flex-wrap: wrap;}
#comics ul li{width:19%;margin:0.5%;}


/* フッター */
footer {
	width: 100%;
    background:#000;
    margin-top:0;
    font-size:14px;text-align:center;color:#FFF;padding:10px 0;
}


/* clearfix */
.clearfix {
	zoom: 1;
}
.clearfix:after, ul:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}