@charset "UTF-8";

html{
	overflow-y:scroll;
	font-size:62.5%;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}


/*===============================================*/
/* SP */
/*===============================================*/
body{
	background:#d3e6f0 url(/7anniversary/common/img/bg01.png) repeat-y center top;
	background-size:100% auto;
	background-attachment:fixed;
}

@media screen and (-webkit-min-device-pixel-ratio: 0){
	.wrapper::before{
		content:"";
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background:#d3e6f0 url(/7anniversary/common/img/bg01.png) repeat-y center top;
		background-size:100% auto;
		z-index:-1;
	}
}


/* area01 */
.area01{
	color:#5a5a5a;
}
.area01 .inner{
	padding-bottom:calc(3290 / 750 * 100%);
}
.area01 a{
	display:block;
}
.area01 .bg01{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.area01 .cat01{
	position:absolute;
	top:0;
	left:0;
	margin:calc(990 / 750 * 100%) 0 0 calc(138 / 750 * 100%);
	width:calc(218 / 750 * 100%);
}
.area01 .cat02{
	position:absolute;
	top:0;
	left:0;
	margin:calc(1036 / 750 * 100%) 0 0 calc(437 / 750 * 100%);
	width:calc(165 / 750 * 100%);
}
.area01 .title01{
	position:absolute;
	top:0;
	left:0;
	margin:calc(80 / 750 * 100%) 0 0 calc(45 / 750 * 100%);
	width:calc(660 / 750 * 100%);
}
.area01 .title02{
	position:absolute;
	top:0;
	left:0;
	margin:calc(697 / 750 * 100%) 0 0 calc(58 / 750 * 100%);
	width:calc(632 / 750 * 100%);
}
.area01 .timer01{
	position:absolute;
	top:0;
	left:0;
	margin:calc(1338 / 750 * 100%) 0 0 calc(40 / 750 * 100%);
	width:calc(679 / 750 * 100%);
}
.area01 .timer01 .num01,
.area01 .timer01 .num02,
.area01 .timer01 .num03,
.area01 .timer01 .num04,
.area01 .timer01 .num05,
.area01 .timer01 .num06,
.area01 .timer01 .num07,
.area01 .timer01 .num08{
	position:absolute;
	top:0;
	left:0;
	margin:calc(80 / 670 * 100%) 0 0 calc(41 / 670 * 100%);
	padding:calc(93 / 670 * 100%) 0 0;
	width:calc(44 / 670 * 100%);
}
.area01 .timer01 .num02{
	margin-left:calc(96 / 670 * 100%);
}
.area01 .timer01 .num03{
	margin-left:calc(204 / 670 * 100%);
}
.area01 .timer01 .num04{
	margin-left:calc(258 / 670 * 100%);
}
.area01 .timer01 .num05{
	margin-left:calc(368 / 670 * 100%);
}
.area01 .timer01 .num06{
	margin-left:calc(421 / 670 * 100%);
}
.area01 .timer01 .num07{
	margin-left:calc(530 / 670 * 100%);
}
.area01 .timer01 .num08{
	margin-left:calc(584 / 670 * 100%);
}
.area01 .timer01 .num01 img,
.area01 .timer01 .num02 img,
.area01 .timer01 .num03 img,
.area01 .timer01 .num04 img,
.area01 .timer01 .num05 img,
.area01 .timer01 .num06 img,
.area01 .timer01 .num07 img,
.area01 .timer01 .num08 img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	opacity:0;
}
.area01 .btn01{
	position:absolute;
	top:0;
	left:0;
	margin:calc(1640 / 750 * 100%) 0 0 calc(40 / 750 * 100%);
	width:calc(678 / 750 * 100%);
}
.area01 .movie01{
	position:absolute;
	top:0;
	left:0;
	margin:calc(1890 / 750 * 100%) 0 0 calc(40 / 750 * 100%);
	padding-bottom:calc(376 / 750 * 100%);
	width:calc(670 / 750 * 100%);
}
.area01 .movie01>iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.area01 .game01{
	position:absolute;
	top:0;
	left:0;
	margin:calc(2326 / 750 * 100%) 0 0 calc(40 / 750 * 100%);
	width:calc(679 / 750 * 100%);
}
.area01 .game01 .text01{
	position:absolute;
	top:0;
	left:0;
	margin:calc(40 / 676 * 100%) 0 0 calc(70 / 676 * 100%);
	width:calc(528 / 676 * 100%);
}
.area01 .game01 .icon01{
	position:absolute;
	top:0;
	left:0;
	margin:calc(204 / 676 * 100%) 0 0 calc(248 / 676 * 100%);
	width:calc(176 / 676 * 100%);
}
.area01 .game01 ul{
	position:absolute;
	top:0;
	left:0;
	margin:calc(422 / 676 * 100%) 0 0 calc(98 / 676 * 100%);
	width:calc(520 / 676 * 100%);
	display:-webkit-flex;
	display:flex;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
}
.area01 .game01 ul li{
	margin:0 0 calc(58 / 676 * 100%);
	line-height:1.4;
	font-size:calc(23 / 750 * 100vw);
	width:50%;
}
.area01 .game01 ul li h5{
}
.area01 .game01 ul li p{
}
.area01 .game01 .btn02{
	position:absolute;
	top:0;
	left:0;
	margin:calc(792 / 676 * 100%) 0 0 calc(87 / 676 * 100%);
	width:calc(211 / 676 * 100%);
}
.area01 .game01 .btn03{
	position:absolute;
	top:0;
	left:0;
	margin:calc(792 / 676 * 100%) 0 0 calc(322 / 676 * 100%);
	width:calc(262 / 676 * 100%);
}


/*** modal ***/
.modal-shade{
	display:none;
	position:fixed;
	top:-10px;
	left:0;
	right:0;
	bottom:-10px;
	background-color:rgba(0,0,0,0.8);
	overflow:hidden;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.modal-shade .modal-container{
	display:table;
	padding:10px 0;
	width:100%;
	height:100%;
}
.modal-shade .modal-container .modal-inner{
	display:table-cell;
	padding:15px;
	vertical-align:middle;
}
.modal{
	margin:0 auto;
	padding:calc(120 / 750 * 100vw) 0 0;
	position:relative;
}
.modal::after{
	display:table;
	content:'';
	clear:both;
}
.modal .close{
	cursor:pointer;
	position:absolute;
	top:0;
	right:0;
	width:calc(80 / 750 * 100vw);
	height:calc(80 / 750 * 100vw);
	background:url(/7anniversary/common/img/btn_close.png) no-repeat left top;
	background-size:calc(80 / 750 * 100vw) auto;
}

/*** modal01 ***/
.modal01{
	display:none;
	width:100%;
	max-width:896px;
}
.modal01 .panel{
	padding:0;
	width:100%;
	max-width:896px;
	background-color:#000;
	position:relative;
}
.modal01 .panel>img{
	width:100%;
}
.modal01 .panel>iframe{
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


/*===============================================*/
/* PC */
/*===============================================*/
@media screen and (min-width:769px){

	body{
		background-image:url(/7anniversary/common/img/bg01_pc.png);
		background-size:calc(2000 / 1160 * 100%) auto;
	}

	@media screen and (-webkit-min-device-pixel-ratio:0){
		.wrapper::before{
			background-image:url(/7anniversary/common/img/bg01_pc.png);
			background-size:calc(2000 / 1160 * 100%) auto;
		}
	}


	/* area01 */
	.area01 .inner{
		padding-bottom:calc(2330 / 1160 * 100%);
	}
	.area01 .cat01{
		margin:calc(754 / 1160 * 100%) 0 0 calc(29 / 1160 * 100%);
		width:calc(209 / 1160 * 100%);
	}
	.area01 .cat02{
		margin:calc(877 / 1160 * 100%) 0 0 calc(932 / 1160 * 100%);
		width:calc(159 / 1160 * 100%);
	}
	.area01 .title01{
		margin:calc(88 / 1160 * 100%) 0 0 calc(32 / 1160 * 100%);
		width:calc(556 / 1160 * 100%);
	}
	.area01 .title02{
		margin:calc(102 / 1160 * 100%) 0 0 calc(583 / 1160 * 100%);
		width:calc(550 / 1160 * 100%);
	}
	.area01 .timer01{
		margin:calc(682 / 1160 * 100%) 0 0 calc(280 / 1160 * 100%);
		width:calc(608 / 1160 * 100%);
	}
	.area01 .timer01 .num01,
	.area01 .timer01 .num02,
	.area01 .timer01 .num03,
	.area01 .timer01 .num04,
	.area01 .timer01 .num05,
	.area01 .timer01 .num06,
	.area01 .timer01 .num07,
	.area01 .timer01 .num08{
		margin:calc(74 / 608 * 100%) 0 0 calc(41 / 608 * 100%);
		padding:calc(78 / 608 * 100%) 0 0;
		width:calc(37 / 608 * 100%);
	}
	.area01 .timer01 .num02{
		margin-left:calc(85 / 608 * 100%);
	}
	.area01 .timer01 .num03{
		margin-left:calc(183 / 608 * 100%);
	}
	.area01 .timer01 .num04{
		margin-left:calc(231 / 608 * 100%);
	}
	.area01 .timer01 .num05{
		margin-left:calc(328 / 608 * 100%);
	}
	.area01 .timer01 .num06{
		margin-left:calc(376 / 608 * 100%);
	}
	.area01 .timer01 .num07{
		margin-left:calc(474 / 608 * 100%);
	}
	.area01 .timer01 .num08{
		margin-left:calc(523 / 608 * 100%);
	}
	.area01 .btn01{
		margin:calc(939 / 1160 * 100%) 0 0 calc(280 / 1160 * 100%);
		width:calc(608 / 1160 * 100%);
	}
	.area01 .movie01{
		margin:calc(1160 / 1160 * 100%) 0 0 calc(132 / 1160 * 100%);
		padding-bottom:calc(504 / 1160 * 100%);
		width:calc(896 / 1160 * 100%);
	}
	.area01 .game01{
		margin:calc(1722 / 1160 * 100%) 0 0 calc(40 / 1160 * 100%);
		width:calc(1109 / 1160 * 100%);
	}
	.area01 .game01 .text01{
		margin:calc(39 / 1109 * 100%) 0 0 calc(144 / 1109 * 100%);
		width:calc(812 / 1109 * 100%);
	}
	.area01 .game01 .icon01{
		margin:calc(149 / 1109 * 100%) 0 0 calc(90 / 1109 * 100%);
		width:calc(170 / 1109 * 100%);
	}
	.area01 .game01 ul{
		margin:calc(150 / 1109 * 100%) 0 0 calc(340 / 1109 * 100%);
		width:calc(702 / 1109 * 100%);
	}
	.area01 .game01 ul li{
		margin:0 0 calc(58 / 1109 * 100%);
		line-height:1.6;
		font-size:calc(20 / 1160 * 100vw);
		width:31%;
	}
	.area01 .game01 ul li:nth-child(3n+2){
		width:33%;
	}
	.area01 .game01 ul li:nth-child(3n){
		width:36%;
	}

	.area01 .game01 ul li h5{
	}
	.area01 .game01 ul li p{
	}
	.area01 .game01 .btn02{
		margin:calc(395 / 1109 * 100%) 0 0 calc(179 / 1109 * 100%);
		width:calc(325 / 1109 * 100%);
	}
	.area01 .game01 .btn03{
		margin:calc(395 / 1109 * 100%) 0 0 calc(530 / 1109 * 100%);
		width:calc(403 / 1109 * 100%);
	}


	/*** modal ***/
	.modal{
		padding:110px 0 0;
	}
	.modal .close{
		width:80px;
		height:80px;
		background-size:80px;
	}
}


/*===============================================*/
/* PC(1160px以上) */
/*===============================================*/
@media screen and (min-width:1160px){

	body{
		background-size:2000px auto;
	}

	@media screen and (-webkit-min-device-pixel-ratio:0){
		.wrapper::before{
			background-size:2000px auto;
		}
	}

	/* area01 */
	.area01 .inner{
		padding-bottom:2330px;
	}
	.area01 .game01 ul li{
		font-size:2.0rem;
	}

}