@charset "utf-8";


/* ---------------------------------------------------------
		  -961px: PC
     960px-769px: tablet-wide,smartphone-wide,tablet		 
	 768px-320px: smartphone
----------------------------------------------------------*/


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

basic

----------------------------------------------------------*/
html {
	overflow-y: scroll;
	width: 100%;
	min-width: 1200px;
	margin:0 auto;
	background: #000;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
		    box-sizing: border-box;
	z-index: -2;
	}

body {
	width: 100%;
	font-size:14px;
	font-family: "FOT-セザンヌ Pro B", "FOT-UD角ゴ_スモール Pr6 DB", "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ",  sans-serif;
	color: #323232;
	overflow: hidden;	
	/*background-size: cover !important;
	background-position: center center;
	background-attachment: fixed;*/
/*	position: relative;
	overflow: hidden;*/
	}

.wrapper{
}


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

movie

----------------------------------------------------------*/
.bg-video-wrap {
	position: fixed;
	z-index: -1!important;
	width: 100%;
	min-width: 1920px;	
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.bg-video-wrap video {
	width: 100%;

	z-index: 1;
}

/*IE8では動画非表示*/
html>/**/body .bg-video-wrap{
	display/*\**/: none\9;
}

/*IE9では動画表示*/
body:not(:target) .bg-video-wrap{
	display: block;
}



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

main

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

#main{
	padding-top:78px;
	background-color   : rgba(255, 255, 255, 0.10);
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHklEQVQYV2NUUFBoYICCBw8egNmMxAvCtCLTjNgEAWNRDAaQQReWAAAAAElFTkSuQmCC) repeat;
	/*background-image   : radial-gradient(#000000 12%, transparent 32%),
					   radial-gradient(#000000 12%, transparent 32%);*/
	background-position: 0 0, 2px 2px;
	background-size    : 4px 4px;
}

#main .main-wrap{
	position: relative;
	width: 100%;
}

#main .topimage{
  margin: 0 auto;
}

#main .topimage img{
	width: 100%;
	z-index: 1px;	
}

#main .ico-swtich{
	position: absolute;
	background:  url(../img/top/main/switch_logo.png) center no-repeat;
	background-size:contain;	
	width: 5.2%;
	height:10%;
	top:4%;
	right:15%;
}
#main .ico-steam{
	position: absolute;
	background:  url(../img/top/main/steam_logo.png) center no-repeat;
	background-size:contain;	
	width: 5.2%;
	height:10%;
	top:4%;
	right:9%;
}
#main .ico-epic{
	position: absolute;
	background:  url(../img/top/main/epic_logo.png) center no-repeat;
	background-size:contain;	
	width: 5.2%;
	height:10%;
	top:4%;
	right:3%;
}

/*#main .ico-swtich:hover{
	opacity: 0.5;
	cursor: pointer;
	transition-duration: 0.3s;		
}*/

#main .title{
	position: absolute;
	width: 35.7%;
	height: 30.9%;	
	top:8%;
	left: 32%;
}

#main .title img{
	width:100%;
	height:auto;
}

#main .reserve{
	position: absolute;
	background:  url(../img/top/main/btn_main_switch_off2.png?20201109_2) center no-repeat;
	background-size:contain;	
	width: 29.9%;
	height:13.7%;
	top:64.5%;
	left:0;
}

#main .reserve:hover{
	background:  url(../img/top/main/btn_main_switch_on2.png?20201109_2) center no-repeat;
	background-size:contain;	
	cursor: pointer;
	transition-duration: 0.3s;	/*変化に掛かる時間*/	
}

#main .present{
	position: absolute;
	background:  url(../img/top/main/twitter_cp_banner.png) center no-repeat;
	background-size:contain;	
	width:23.6%;
	height: 28.3%;
	top:48%;
	right: 6%;
}

#main .present:hover{
	opacity: 0.5;
	cursor: pointer;
	transition-duration: 0.3s;	/*変化に掛かる時間*/	
}

/* bnrAreaL */
.bnrPV1{
    position: absolute;
	width: 20%;
    top: 44%;
    left: 3%;
}
.bnrPV1 a{
	display: block;
}
.bnrPV1 a:hover{
	opacity: 0.8;
}
.bnrPV1 a img{
	width: 100%;
}
.bnrSwitch{
    position: absolute;
    width: 21.7%;
    top: 67%;
    left: 3%;
}
.bnrSwitch a{
	display: block;
}
.bnrSwitch a:hover{
	opacity: 0.8;
}
.bnrSwitch a img{
	width: 100%;
}

/* bnrAreaR */
.bnrPV2 {
	position: absolute;
    width: 20%;
    top: 44%;
    right: 3%;
    text-align: right;
}
.bnrPV2 a{
	display: block;
}
.bnrPV2 a:hover{
	opacity: 0.8;
}
.bnrPV2 a img{
	width: 100%;
}
.bnrPC{
	position: absolute;
    width: 20.6%;
    top: 67%;
    right: 3%;
}
.bnrPC img{
	display: block;
	width: 100%;
}
.bnrPC .platformBtnArea{
	margin-left: -5%;
    margin-top: 1.6%;
}
.bnrPC .platformBtnArea a{
	float: left;
	width: 50%;
}
.bnrPC .platformBtnArea a:last-child{
	margin-left: -3%;
}
.bnrPC .platformBtnArea a:hover{
	opacity: 0.8;
}
#main .main_note{
	position: absolute;
	background:  url(../img/top/main/main_01_patch_banner.png) center no-repeat;
	background-size:contain;	
	width:22.81%;
	height: 13%;
	top:41%;
	right: 7%;
}

#main .main_note:hover{
	opacity: 0.5;
	cursor: pointer;
	transition-duration: 0.3s;	/*変化に掛かる時間*/	
}

#main .main_insta{
	position: absolute;
	background:  url(../img/top/main/main_02_insta_banner.png) center no-repeat;
	background-size:contain;	
	width:22.82%;
	height: 21.8%;
	top:55.4%;
	right: 7%;
}

#main .main_insta:hover{
	opacity: 0.5;
	cursor: pointer;
	transition-duration: 0.3s;	/*変化に掛かる時間*/	
}

#main .main_expo{
	position: absolute;
	background:  url(../img/top/main/main_02_package-release_banner.png) center no-repeat;
	background-size:contain;	
	width:22.82%;
	height: 21.8%;
	top:55.4%;
	right: 7%;
}

#main .main_expo:hover{
	opacity: 0.5;
	cursor: pointer;
	transition-duration: 0.3s;	/*変化に掛かる時間*/	
}

#main .justdanBnr{
	position: absolute;
	background:  url(../img/top/main/main_02_package-release_banner.png) center no-repeat;
	background-size:contain;	
	width:22.82%;
	height: 21.8%;
	top:55.4%;
	right: 7%;
}

#main .justdanBnr:hover{
	opacity: 0.5;
	cursor: pointer;
	transition-duration: 0.3s;	/*変化に掛かる時間*/	
}

#main .main_sale{
	position: absolute;
	background:  url(../img/top/main/main_02_springsale_banner.png) center no-repeat;
	background-size:contain;	
	width:22.82%;
	height: 21.8%;
	top:55.4%;
	right: 7%;
}

#main .main_sale:hover{
	opacity: 0.5;
	cursor: pointer;
	transition-duration: 0.3s;	/*変化に掛かる時間*/	
}

#main .main_meat{
	position: absolute;
	background:  url(../img/top/main/main_meat_banner.png) center no-repeat;
	background-size:contain;	
	width:22.82%;
	height: 21.8%;
	top:55.4%;
	right: 7%;
}

#main .main_meat:hover{
	opacity: 0.5;
	cursor: pointer;
	transition-duration: 0.3s;	/*変化に掛かる時間*/	
}

#main .main_report01{
	position: absolute;
	background:  url(../img/top/main/main_01_taipei03_banner.png) center no-repeat;
	background-size:contain;	
	width:22.81%;
	height: 13%;
	top:41%;
	right: 7%;
}

#main .main_report01:hover{
	opacity: 0.5;
	cursor: pointer;
	transition-duration: 0.3s;	/*変化に掛かる時間*/	
}

#main .main_report02{
	position: absolute;
	background:  url(../img/top/main/main_02_taipei_banner.png) center no-repeat;
	background-size:contain;	
	width:22.82%;
	height: 21.8%;
	top:55.4%;
	right: 7%;
}

#main .main_report02:hover{
	opacity: 0.5;
	cursor: pointer;
	transition-duration: 0.3s;	/*変化に掛かる時間*/	
}

#main .news-title{
	position: absolute;
	background:  url(../img/top/main/news.png) center no-repeat;
	background-size:contain;	
	width:12.5%;
	height: 4.7%;
	top:80%;
	left: 43.5%;
	z-index: 500!important;
}

#main .news-block{
	position: absolute;
	background:  url(../img/top/main/news_bg.png) top repeat-x;
	background-size:contain;	
	width:100%;
	height: 5.4%;
	top:82.5%;
	left: 0px;
	z-index: 100;
}

#main .news-list{
	/*
	position: absolute;
	width:80%;
	height: 5%;
	top:84.3%;
	left:10%;
	z-index: 100;
	font-size: 14px;
	color: #fff;
	text-align: center;	
	font-family: -apple-system,blinkMacSystemFont,'Helvetica Neue','Segoe UI','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
	*/
	display: none;
}

#main div.tick{
	position: absolute;
	width:54%;
	height: 5%;
	top:84.8%;
	left:23%;
	z-index: 100;
	font-size: 14px;
	color: #fff;
	text-align: center;	
	overflow: hidden;
	font-family: -apple-system,blinkMacSystemFont,'Helvetica Neue','Segoe UI','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
}

#main div.tick span.num{
	position: absolute;
	left: 0;
	width:100%;
	text-align: center;
}

#main div.tick span.num a{
	color: #fff;
	text-decoration: underline;
}

#main div.tick span.num a:hover{
	color: #aaa;
}

#main div.tick span.num{
	font-size: 14px;
	padding-right: 5px;
}

#main div.tick span.num .new{
	color: #D80003;
	font-weight: bold;
	padding-left: 5px;
	font-size: 14px;		
}

@media screen and (min-width: 320px) and (max-width: 1267px) { 
	
#main .news-list{
	position: absolute;	
	top:84.3%;	
	font-size: 12px;
}
	
#main .news-list span{
	font-size: 12px;
	padding-right: 5px;
}

#main .news-list span.new{
	padding-left: 5px;
	font-size: 12px;		
}	
	
}

#main .news-list_prev{
	position: absolute;
	background:  url(../img/top/main/news_left.png) no-repeat;
	background-size:contain;	
	width:5%;
	height: 3%;
	top:84.5%;
	left: 22%;
	z-index: 100;
	cursor: pointer;
}

#main .news-list_next{
	position: absolute;
	background:  url(../img/top/main/news_right.png) no-repeat;
	background-size:contain;	
	width:5%;
	height: 3%;
	top:84.5%;
	right: 18%;
	z-index: 100;
	cursor: pointer;
}

#main .news-list_prev:hover,
#main .news-list_next:hover{
	opacity: 0.5;
	cursor: pointer;
	transition-duration: 0.3s;	/*変化に掛かる時間*/		
}


#main .sns{
	position: absolute;
	background:  url(../img/top/main/banner_area_bg.png) top repeat-x;
	background-size:contain;
	width:100%;
	height: 10.5%;
	bottom:2.2%;
	left: 0%;
	z-index: 500;
}

#main .sns .twitter{
	position: absolute;
	width:13.54%;
	height: 60%;
	top:15%;
	left: 15%;
}

#main .sns .instagram{
	position: absolute;
	width:13.54%;
	height: 60%;
	top:15%;
	left: 29.25%;
}

#main .sns .youtube{
	position: absolute;
	width:13.54%;
	height: 60%;
	top:15%;
	right: 43%;
}

#main .sns .info{
	position: absolute;
	width:13.54%;
	height: 60%;
	top:15%;
	right: 28.85%;
}
#main .sns .nicalis{
	position: absolute;
	width:13.54%;
	height: 60%;
	top:15%;
	right: 14.75%;
}

#main .sns .twitter img,
#main .sns .instagram img,
#main .sns .youtube img,
#main .sns .info img,
#main .sns .nicalis img{
	width: 100%;
	height: auto;
}

#main .sns .twitter img:hover,
#main .sns .instagram img:hover,
#main .sns .youtube img:hover,
#main .sns .info img:hover,
#main .sns .nicalis img:hover{
	width: 100%;
	height: auto;
	opacity: 0.5;
	cursor: pointer;
	transition-duration: 0.3s;	/*変化に掛かる時間*/		
}


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

section01

----------------------------------------------------------*/
#section01{
	margin-top: -100px;
}

#section01 .sec01-wrap{
	position: relative;
	width: 100%;
}

#section01 .bg img{
	width: 100%;
}

#section01 .sec01-copy{
	position: absolute;
	background:  url(../img/top/section01/01_copy.png) no-repeat;
	background-size:contain;
	width: 63.2%;
	height: 42.8%;	
	top:6%;
	left:18%;
}

#section01 .sec01-title{
	position: absolute;
	background:  url(../img/top/section01/01_title.png) no-repeat;
	background-size:contain;
	width: 59%;
	height: 36.35%;
	top:23%;
	left:0;
}

#section01 .sec01-txtbase{
	position: absolute;
	background:  url(../img/top/section01/01_text_base.png) no-repeat;
	background-size:contain;
	width: 49.1%;
	height: 41.9%;
	top:31%;
	left:5%;

}

#section01 .sec01-txt{
	position: absolute;
	background:  url(../img/top/section01/01_text.png) no-repeat;
	background-size:contain;
	width: 49.1%;
	height: 41.9%;
	top:31%;
	left:5%;
}

#section01 .sec01-chara{
	position: absolute;
	background:  url(../img/top/section01/01_chara.png) no-repeat;
	background-size:contain;
	width: 53.4%;
	height: 57.7%;
	top:36.9%;
	left:0;
}

#section01 .sec01-movie{
	position: absolute;
	background:  url(../img/top/section01/01_pv_bg.png) no-repeat;
	background-size:contain;
	width: 47.86%;
	height: 56.46%;
	top:31.2%;
	right:0;
}

#section01 .sec01-movie video{
	width: 100%;
	padding: 2.5%;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
		    box-sizing: border-box;	
}

#section01 .sec02-title{
	position: absolute;
	background:  url(../img/top/section02/02_title.png) no-repeat;
	background-size:contain;
	width: 59%;
	height: 36.35%;
	top:55%;
	right:0;
}

#section01 .sec02-txtbase{
	position: absolute;
	background:  url(../img/top/section02/02_text_base.png) no-repeat;
	background-size:contain;
	width: 49.1%;
	height: 41.9%;
	top:65.5%;
	right:2.5%;
}

#section01 .sec02-img01{
	position: absolute;
	background:  url(../img/top/section02/02_img01.png) no-repeat;
	background-size:contain;
	width: 25.6%;
	height:20.9%;
	top:63.5%;
	right:28.5%;
}

#section01 .sec02-img02{
	position: absolute;
	background:  url(../img/top/section02/02_img02.png) no-repeat;
	background-size:contain;
	width: 25.6%;
	height:20.9%;
	top:68.5%;
	right:2%;
}

#section01 .sec02-txt{
	position: absolute;
	background:  url(../img/top/section02/02_text.png) no-repeat;
	background-size:contain;
	width: 49.1%;
	height: 41.9%;
	top:63.0%;
	right:2.5%;
}

#section01 .sec02-tmb01{
	position: absolute;
	width: 32.9%;
	height: 16.9%;
	top:57.3%;
	left:4%;
}

#section01 .sec02-tmb01 img{
	width: 100%;
}

#section01 .sec02-tmb01 img:hover{
	cursor: pointer;
	opacity: 0.5;	
	transition-duration: 0.3s;	/*変化に掛かる時間*/		
}

#section01 .sec02-tmb02{
	position: absolute;
	width: 29.3%;
	height: 15%;
	top:72%;
	left:23%;
}

#section01 .sec02-tmb02 img{
	width: 100%;
}

#section01 .sec02-tmb02 img:hover{
	cursor: pointer;
	opacity: 0.5;	
	transition-duration: 0.3s;	/*変化に掛かる時間*/		
}


#section01 .sec02-more{
	position: absolute;
	background:  url(../img/common/btn_more_off.png) no-repeat;
	background-size:contain;
	width: 17.55%;
	height: 4.5%;
	top:89%;
	left:41.3%;
}

#section01 .sec02-more:hover{
	background:  url(../img/common/btn_more_on.png) no-repeat;
	background-size:contain;	
	cursor: pointer;
	transition-duration: 0.3s;	/*変化に掛かる時間*/	
}



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

section03

----------------------------------------------------------*/
#section03{

}

#section03 .sec03-wrap{
	position: relative;
	width: 100%;
}

#section03 .bg{
	margin-top: -6%;
}

#section03 .bg img{
	width: 100%;
}

#section03 .sec03-movie{
	position: absolute;
	width: 100%;
	height: 125%;
	top:15%;
	right:0;
	z-index: 0;
}

#section03 .sec03-movie video{
	width: 100%;
}

#section03 .sec03-title01{
	position: absolute;
	background:  url(../img/top/section03/03_title01.png) no-repeat;
	background-size:contain;
	width: 71.3%;
	height: 59.3%;
	top:1%;
	right:0;
}

#section03 .sec03-title02{
	position: absolute;
	background:  url(../img/top/section03/03_title02.png) no-repeat;
	background-size:contain;
	width: 75.4%;
	height: 42.1%;
	top:50%;
	left:0;
}

#section03 .sec03-chara01{
	position: absolute;
	background:  url(../img/top/section03/03_chara_masaru.png) no-repeat;
	background-size:contain;
	width: 56.5%;
	height: 100.5%;
	top:0;
	left:0;
}

#section03 .sec03-chara02{
	position: absolute;
	background:  url(../img/top/section03/03_chara_hanako.png) no-repeat;
	background-size:contain;
	width: 36%;
	height: 100.5%;
	top:30%;
	right:0;
}

#section03 .sec03-txt{
	position: absolute;
	background:  url(../img/top/section03/03_text.png) no-repeat;
	background-size:contain;
	width: 38%;
	height: 33.1%;
	top:70%;
	left:43%;
}

#section03 .sec03-capture{
	position: absolute;
	width: 25%;
	height: 16.2%;
	top:70%;
	left:18%;
}

#section03 .sec03-capture img{
	width: 100%;
}

#section03 .sec03-capture img:hover{
	cursor: pointer;
	opacity: 0.5;	
	transition-duration: 0.3s;	/*変化に掛かる時間*/		
}

#section03 .sec03-more{
	position: absolute;
	background:  url(../img/common/btn_more_off.png) no-repeat;
	background-size:contain;
	width: 17.55%;
	height: 4.5%;
	top:87.5%;
	left:41.3%;
}

#section03 .sec03-more:hover{
	background:  url(../img/common/btn_more_on.png) no-repeat;
	background-size:contain;	
	cursor: pointer;
	transition-duration: 0.3s;	/*変化に掛かる時間*/	
}


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

section04

----------------------------------------------------------*/
#section04{

}

#section04 .sec04-wrap{
	position: relative;
	width: 100%;
}

#section04 .bg img{
	width: 100%;
	z-index: 1px;
}

#section04 .sec04-title01{
	position: absolute;
	background:  url(../img/top/section04/04_movie_title.png) no-repeat;
	background-size:contain;
	width: 19.7%;
	height: 10.5%;
	top:0;
	left:40%;
	z-index: 100;	
}

#section04 .sec04-movie_tmb{
	position: absolute;
	width:100%;
	height:27.3%;
	top:10%;
	left: 0%;
	z-index: 100;	
}

#section04 .sec04-movie_tmb .sec04-movie_tmb01{
	position: absolute;
	width:21.6%;
	height:27.3%;
	top:0;
	left: 16%;
}

#section04 .sec04-movie_tmb .sec04-movie_tmb02{
	position: absolute;
	width:21.6%;
	height:27.3%;
	top:0;
	left: 39.2%;
}

#section04 .sec04-movie_tmb .sec04-movie_tmb03{
	position: absolute;
	width:21.6%;
	height:27.3%;
	top:0;
	right: 16%;
}

#section04 .sec04-list_movie{
	position: absolute;
	background:  url(../img/top/section04/04_movie_btn_off.png) no-repeat;
	background-size:contain;
	width: 13.85%;
	height: 7.3%;
	top:36%;
	left:43%;
	z-index: 100;	
}

#section04 .sec04-list_movie:hover{
	background:  url(../img/top/section04/04_movie_btn_on.png) no-repeat;
	background-size:contain;	
	cursor: pointer;
	transition-duration: 0.3s;	/*変化に掛かる時間*/	
}

#section04 .sec04-movie_tmb .sec04-movie_tmb01 img,
#section04 .sec04-movie_tmb .sec04-movie_tmb02 img,
#section04 .sec04-movie_tmb .sec04-movie_tmb03 img{
	width: 100%;
	border: 2px solid #fff;		
	height: auto;
}

#section04 .sec04-movie_tmb .sec04-movie_tmb01 img:hover,
#section04 .sec04-movie_tmb .sec04-movie_tmb02 img:hover,
#section04 .sec04-movie_tmb .sec04-movie_tmb03 img:hover{
	width: 100%;
	height: auto;
	opacity: 0.5;
	cursor: pointer;
	transition-duration: 0.3s;	/*変化に掛かる時間*/		
}

#section04 .sec04-title02{
	position: absolute;
	background:  url(../img/top/section04/04_ss_title.png) no-repeat;
	background-size:contain;
	width: 19.7%;
	height: 10.5%;
	top:49%;
	left:40%;
	z-index: 100;	
}

#section04 .sec04-ss_tmb{
	position: absolute;
	width:100%;
	height:43.3%;
	top:59%;
	left: 0%;
	z-index: 100;
}

#section04 .sec04-ss_tmb .sec04-ss_tmb01{
	position: absolute;
	width:16.6%;
	height:21.1%;
	top:0;
	left: 15.5%;
}

#section04 .sec04-ss_tmb .sec04-ss_tmb02{
	position: absolute;
	width:16.6%;
	height:21.1%;
	top:0;
	left: 33%;
}

#section04 .sec04-ss_tmb .sec04-ss_tmb03{
	position: absolute;
	width:16.6%;
	height:21.1%;
	top:0;
	left: 50.5%;
}

#section04 .sec04-ss_tmb .sec04-ss_tmb04{
	position: absolute;
	width:16.6%;
	height:21.1%;
	top:0%;
	right: 15.5%;
}

#section04 .sec04-ss_tmb .sec04-ss_tmb05{
	position: absolute;
	width:16.6%;
	height:21.1%;
	top:42%;
	left: 15.5%;
}

#section04 .sec04-ss_tmb .sec04-ss_tmb06{
	position: absolute;
	width:16.6%;
	height:21.1%;
	top:42%;
	left: 33%;
}

#section04 .sec04-ss_tmb .sec04-ss_tmb07{
	position: absolute;
	width:16.6%;
	height:21.1%;
	top:42%;
	left: 50.5%;
}

#section04 .sec04-ss_tmb .sec04-ss_tmb08{
	position: absolute;
	width:16.6%;
	height:21.1%;
	top:42%;
	right: 15.5%;
}

#section04 .sec04-ss_tmb .sec04-ss_tmb01 img,
#section04 .sec04-ss_tmb .sec04-ss_tmb02 img,
#section04 .sec04-ss_tmb .sec04-ss_tmb03 img,
#section04 .sec04-ss_tmb .sec04-ss_tmb04 img,
#section04 .sec04-ss_tmb .sec04-ss_tmb05 img,
#section04 .sec04-ss_tmb .sec04-ss_tmb06 img,
#section04 .sec04-ss_tmb .sec04-ss_tmb07 img,
#section04 .sec04-ss_tmb .sec04-ss_tmb08 img{
	width: 100%;
	border: 2px solid #fff;		
	height: auto;
}

#section04 .sec04-ss_tmb .sec04-ss_tmb01 img:hover,
#section04 .sec04-ss_tmb .sec04-ss_tmb02 img:hover,
#section04 .sec04-ss_tmb .sec04-ss_tmb03 img:hover,
#section04 .sec04-ss_tmb .sec04-ss_tmb04 img:hover,
#section04 .sec04-ss_tmb .sec04-ss_tmb05 img:hover,
#section04 .sec04-ss_tmb .sec04-ss_tmb06 img:hover,
#section04 .sec04-ss_tmb .sec04-ss_tmb07 img:hover,
#section04 .sec04-ss_tmb .sec04-ss_tmb08 img:hover{
	width: 100%;
	height: auto;
	opacity: 0.5;
	cursor: pointer;
	transition-duration: 0.3s;	/*変化に掛かる時間*/		
}

#section04 .blackbase{
	position: absolute;
	filter:alpha(opacity=30); 
	background: rgba(0,0,0,0.3);
	background-size:contain;	
	width:100%;
	height: 110%;
	bottom:-5%;
	left: 0px;
	z-index:0;
}

#section04 .blackbase_dot{
	position: absolute;	
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHklEQVQYV2NUUFBoYICCBw8egNmMxAvCtCLTjNgEAWNRDAaQQReWAAAAAElFTkSuQmCC) repeat;
	background-position: 0 0, 2px 2px;
	background-size : 4px 4px;
	margin-top: -3%;
	width:100%;
	height: 110%;
	bottom:-5%;
	left: 0px;
	z-index:0;
}

/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 9999; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
}

.closeModal {
	color: #fff;
	position: absolute;
	top: -3rem;
	right: -3rem;
	cursor: pointer;
	font-size: 30px;
}