@charset "UTF-8";

#contents{
	background:transparent;
	background:rgba(255,255,255,0.9);
	padding-bottom:120px;
}

/* main-visual */
#section01{
	text-align:center;
	width:100%;
	margin:auto;
	box-sizing:border-box;
	overflow:hidden;
}
#catch-copy{
	margin:auto;
}
h1#slogan{
	font-size:13px;
	color:#fff;
	width:75%;
	margin:auto;
	animation:OPACITY 0.2s ease-in-out alternate forwards;
	-webkit-animation:OPACITY 0.2s ease-in-out 0s forwards;
	animation:OPACITY 0.2s ease-in-out 0s forwards;
	animation-delay:1.4s;
	-webkit-animation-delay:1.4s;
	-moz-animation-delay:1.4s;
	opacity:0;
}
@keyframes OPACITY{
	0%{ opacity:0; }
	100%{ opacity:1; }
}
@-moz-keyframes OPACITY{
	0%{ opacity:0; }
	100%{ opacity:1; }
}
@-webkit-keyframes OPACITY{
	0%{ opacity:0; }
	100%{ opacity:1; }
}

#scroll-icon{
	width:100%;
	height:119px;
	margin:auto;
	position:absolute;
	left:0; 
	bottom:0;
}
#scroll-icon .inner{
	height:119px;
	text-align:center;
	margin:auto;
}
#scroll-icon .inner p{
	width:60px;
	height:119px;
	margin:auto;
	background:url(../../images/scroll-icon-bg02.png) no-repeat;
}
#scroll-icon a{
	position:relative;
	display:block;
	width:40px;
	height:auto;
}
#scroll-icon img{
	position:absolute;
	top:42px;
	left:7px;
	display:block;
	width:47px;
	height:35px;
}

#contents-wrap{
	background:rgba(255,255,255,0.7);
}

/* top logo svg style animation */
svg{
	box-sizing:border-box;
}
#logo-box{
	width:85%;
	max-width:480px;
	margin:auto;
}
 
#back{
	display:block;
	fill-opacity:0;
	fill:#f00;
	animation:FILL 0.2s ease-in-out alternate forwards;
	-webkit-animation:FILL 0.2s ease-in-out 0s forwards;
	animation:FILL 0.2s ease-in-out 0s forwards;
	animation-delay: 1.4s;
	-webkit-animation-delay: 1.4s;
	-moz-animation-delay: 1.4s;
}
#fill{
	fill-opacity:0;
	fill:#f00;
	animation:FILL 0.2s ease-in-out alternate forwards;
	-webkit-animation:FILL 0.2s ease-in-out 0s forwards;
	animation:FILL 0.2s ease-in-out 0s forwards;
	animation-delay: 1.4s;
	-webkit-animation-delay: 1.4s;
	-moz-animation-delay: 1.4s;
}

.path{
	stroke:#fff;
	stroke-width:2;
	stroke-dasharray:5000;
	stroke-dashoffset:5000;
	animation:DASH 3.4s ease-in-out alternate forwards;
	-webkit-animation:DASH 3.4s ease-in-out 0s forwards;
	animation:DASH 3.4s ease-in-out 0s forwards;
}

  
.path-large{
	stroke:#fff;
	stroke-width:2.5;
	stroke-dasharray:5000;
	stroke-dashoffset:5000;
	animation:DASH 3.4s ease-in-out alternate forwards;
	-webkit-animation:DASH 3.4s ease-in-out 0s forwards;
	animation:DASH 3.4s ease-in-out 0s forwards;
}

.path-small{
	stroke:#fff;
	stroke-width:1.5;
	stroke-dasharray:5000;
	stroke-dashoffset:5000;
	animation:DASH 3.4s ease-in alternate forwards;
	-webkit-animation:DASH 3.4s ease-in 0s forwards;
	animation:DASH 3.4s ease-in 0s forwards;
}
 

@keyframes DASH{
	0%{ stroke-dashoffset:5000; }
	100%{ stroke-dashoffset:0 }
}
@-moz-keyframes DASH{
	0%{ stroke-dashoffset:5000; }
	100%{ stroke-dashoffset:0; }
}
@-webkit-keyframes DASH{
	0%{ stroke-dashoffset:5000; }
	100%{ stroke-dashoffset:0; }
}

@keyframes FILL{
	0%{ fill-opacity:0; }
	100%{ fill-opacity:1; }
}
@-moz-keyframes FILL{
	0%{ fill-opacity:0; }
	100%{ fill-opacity:1; }
}
@-webkit-keyframes FILL{
	0%{ fill-opacity:0; }
	100%{ fill-opacity:1; }
}



/* entertainment */
#section02 .inner,#section02_2 .inner{
	position:relative;
	z-index:9998;
}
#contents h2.title{
	font-size:48px;
	margin-top:40px;
	margin-bottom:40px;
	font-weight:400;
	text-align:center;
}
#section02{
	background:#f82628;
	padding-bottom:30px;
}
#section02 h3{
	font-weight:400;
	text-align:left;
	padding:10px;
	font-size:32px;
	color:#fff;
}
#section02 .txt{
	text-align:left;
	font-size:16px;
	line-height:1.7;
	color:#fff;
	padding:0 10px;
}

#section02_2{
	background:#fff;
}
#section02_2 ul{
	margin:auto;
	margin-bottom:1px;
	overflow:hidden;
}
#section02_2 ul li{
	height:200px;
	padding-top:1px;
	box-sizing:border-box;
}
#section02_2 ul li a{
	height:100%;
	display:block;	
	text-align:center;
	line-height:200px;
	font-size:24px;
	color:#fff;
	text-decoration:none;
}
#section02_2 li.list01 a{
	background:url(../../images/about-us-section02-img01.jpg) no-repeat;
	background-position:center top;
	background-size:cover;
}
#section02_2 li.list02 a{
	background:url(../../images/about-us-section02-img02.jpg) no-repeat;
	background-position:center top;
	background-size:cover;
}
#section02_2 li.list03 a{
	background:url(../../images/about-us-section02-img03.jpg) no-repeat;
	background-position:center top;
	background-size:cover;
}
#section02_2 li.list04 a{
	background:url(../../images/about-us-section02-img04.jpg) no-repeat;
	background-position:center top;
	background-size:cover;
}
#section02_2 li.list05 a{
	background:url(../../images/about-us-section02-img05.jpg) no-repeat;
	background-position:center top;
	background-size:cover;
}

/* news */
#section03{
	border-top:2px solid #fff;
	width:100%;
	margin:auto;
	overflow:hidden;
	position:relative;
	padding-bottom:60px;

}
#section03 h1.title{
	font-weight: 400;
    	padding-top: 20px;
    	padding-bottom: 10px;
    	font-size: 32px;
	text-align:center;
}

#section03 .inner{
	position:relative;
	z-index:9998;
}

#section03 ul{
	height:200px;
	overflow:hidden;
	margin-top:20px;
	margin-bottom:80px;
	padding:0 10px;
	box-sizing:border-box;
}
#section03 ul li{
	padding-bottom:10px;
	border-bottom:1px solid #dfdfdf;
}
#section03 ul *{
	font-size:16px;
	line-height:1.7;
}
#section03 ul .date{
	display:block;
	box-sizing:border-box;
}
#section03 ul .title{
	color:#f82628;
}
#section03 ul a{
	text-decoration:underline;
}

#section03 .btn a{
	display:inline-block;
	text-decoration:none;
	font-size:22px;
	padding:0px 20px;
	line-height:44px;
	width:320px;
	box-sizing:border-box;
	background:#02091b;
	color:#fff;
	border:2px solid #02091b;
	transition:all 0.2s ease;
}
#section03 .btn a:hover{
	color:#02091b;
	background:transparent;
	border:2px solid #02091b;
}
#section03 .news-cat01,#section03 .news-cat02{
	padding-bottom:5px;
}
#section03 .news-cat01 span{
	margin-right:5px;
	padding:4px 8px;
	box-sizing:border-box;
	display:inline-block;
	color:#fff;
	background:#010144;
	font-size:12px;
}
#section03 .news-cat02 span{
	margin-right:5px;
	padding:4px 8px;
	box-sizing:border-box;
	display:inline-block;
	color:#fff;
	background:#c60103;
	font-size:12px;
}

/* about */
#section04{
	margin:auto;
	text-align:center;
	padding-bottom:40px;
}
#section04 .bg{
	height:150px;
	background:url(../../images/index-section04-img01-2.jpg) no-repeat;
	background-size:cover;
	background-position:center top;
}
#section04 h1.title{
	font-weight: 400;
	background:#f82628;
	color:#fff;
    	font-size: 32px;
	text-align:center;
	padding:30px 10px;
	box-sizing:border-box;
}
#section04 .left{
	display:block;
	width:100%;
	height:auto;
	position:relative;
}
#section04 span{
	position:absolute;	
	right:5px;
	bottom:20px;
	color:#fff;
	font-size:28px;
}
#section04 .right{
	display:block;
	width:100%;
	height:auto;
	position:relative;
}



#section04 .left img,#section04 .right img{
	display:block;
	width:100%;
	height:auto;
}


#section04 .right .bar-top{
	display:block;
	width:0;
	height:6px;
	position:absolute;
	left:0; 
	top:0;
	background:#00469b;
	z-index:9998;
}
#section04 .right .bar-right{
	display:block;
	width:6px;
	height:0;
	position:absolute;
	right:0; 
	top:0;
	background:#00469b;
	z-index:9998;
}
#section04 .right .bar-bottom{
	display:block;
	width:0;
	height:6px;
	position:absolute;
	right:0; 
	bottom:0;
	background:#00469b;
	z-index:9998;
}
#section04 .right .bar-left{
	display:block;
	width:6px;
	height:0;
	position:absolute;
	left:0; 
	bottom:0;
	background:#00469b;
	z-index:9998;
}

#section04 .left .bar-top{
	display:block;
	width:0;
	height:6px;
	position:absolute;
	left:0; 
	top:0;
	background:#e50012;
	z-index:9998;
}
#section04 .left .bar-right{
	display:block;
	width:6px;
	height:0;
	position:absolute;
	right:0; 
	top:0;
	background:#e50012;
	z-index:9998;
}
#section04 .left .bar-bottom{
	display:block;
	width:0;
	height:6px;
	position:absolute;
	right:0; 
	bottom:0;
	background:#e50012;
	z-index:9998;
}
#section04 .left .bar-left{
	display:block;
	width:6px;
	height:0;
	position:absolute;
	left:0; 
	bottom:0;
	background:#e50012;
	z-index:9998;
}



/* Let's Play DREAMGAMES */
#section05{

}
#section05 h2{
	font-size:32px;
	color:#fff;
	background:#f7b400; 
	padding:15px 10px;
}
#section05 .img{		
	width:90%;	
	max-width:664px;
	margin:auto;
}
#section05 .img img{
	display:block;
	width:100%;
	height:auto;
}

#section06{
	background:#e11712;
	overflow:hidden;
}
#section07{
	background:#ffb019;
	overflow:hidden;
}
#section08{
	background:#2cb0a7;
	overflow:hidden;
}
#section06 a{
	width:50%;	
	height:auto;
	float:left;
	display:block;
	height:auto;
}
#section06 .img{
	width:50%;
	height:auto;
	float:left;
}
#section06 .img img{
	display:block;
	width:100%;
	height:auto;
}

#section07 a{
	width:50%;	
	height:auto;
	float:left;
	display:block;
	height:auto;
}
#section07 .img{
	width:50%;
	height:auto;
	float:left;
}
#section07 .img img{
	display:block;
	width:100%;
	height:auto;
}

#section08 a{
	width:50%;	
	height:auto;
	float:left;
	display:block;
	height:auto;
}
#section08 .img{
	width:50%;
	height:auto;
	float:left;
}
#section08 .img img{
	display:block;
	width:100%;
	height:auto;
}
#section06 a img,#section07 a img,#section08 a img{
	display:block;
	width:100%;
	height:auto;
}