@charset "UTF-8";

/* ----------------------------------------------------
作成日: 2017.01.13
最終更新日: 

common.css： 共通設定
---------------------------------------------------- */

body {
	position:relative;
	min-width: 320px;
	font-size:41.6875% sans-serif;
	/*font-size:62.5%;10px*/
	font-family:"メイリオ", "ＭＳ Ｐゴシック", Helvetica , sans-serif;
	-webkit-text-size-adjust: 100%;
	line-height:1.6;
	height:100%;
	
}

body.top, body.update {background-image: url("../image/bg.jpg");}
body.cafe {background-image: url("../image/cafe_bg.jpg");}

img {
	max-width: 100%; 
	height:auto;
}
a:link, a:hover, a:active {
	color:#ff0000;
}
a:visited  {
	color: #ff0000;        
}
a:focus {outline: none;}

/*clearfix*/
.cf:before,
.cf:after {
	content:"";
	display:table;
}
.cf:after,.clear{clear:both;}

#wrapper{
	position:relative;
	height:100%;
}

.box980 {
	position:relative;
	width:100%;
	max-width:980px;
	min-width:320px;
	margin:0 auto;
	}

.tc {text-align:center !important;}
.tr {text-align:right !important;}
.tl {text-align:left !important;}

.mt13 {margin-top:13% !important;}
.mt10 {margin-top:10% !important;}
.mt8 {margin-top:8% !important;}
.mt5 {margin-top:5% !important;}
.mt3 {margin-top:3% !important;}
.mt1 {margin-top:1% !important;}
.mt0 {margin-top:0% !important;}
.mb13 {margin-bottom:13% !important;}
.mb10 {margin-bottom:10% !important;}
.mb8 {margin-bottom:8% !important;}
.mb5 {margin-bottom:5% !important;}
.mb3 {margin-bottom:3% !important;}
.mb1 {margin-bottom:1% !important;}
.mb0 {margin-bottom:0% !important;}

.po-re{position: relative;}
.po-ab{position: absolute;}

.pt14 {padding-top:14% !important;}
.pb5 {padding-bottom:5% !important;}
.sd {
	filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .5));
	-webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .5));
	}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

/*hover*/

.hov:hover {
	position:relative;
	top:2px;
	}

	
/*anime*/
	
.topanime { animation: show 1s both; }

.d0 { animation-delay: 0.3s; }

.d1 { animation-delay: 0.7s; }

.d2 { animation-delay: 1.4s; }

.d3 { animation-delay: 2.1s; }

.d4 { animation-delay: 2.8s; }

.d4 { animation-delay: 3.0s; }
@keyframes show {
 0% {
 opacity:0;
}
 100% {
 opacity:1;
}
}

/*==================================
header
===================================*/

header {
	width:100%;
	min-width:320px;
	margin:0 auto;
	text-align:center;
	background:url(../image/h_bg.jpg) no-repeat top center;
	background-size:cover;
	}
	

	
.header {
	position:relative;
	width:100%;
	max-width:980px;
	min-width:320px;
	margin:0 auto;
	text-align:center;
	}
	
h1 {
	position:absolute;
	width:22.55%;
	left:1%;
	}
	
h2 {
	width:98.97%;
	}

nav {
	display:block !important;
	width:100%;
	background-image:url(../image/nav_bg.jpg);
	background-size: auto 100% !important;
	background-repeat:repeat-x;
	}
	
nav .menu {
	width:88.16%;
	text-align:center;
	margin:0 auto 3% auto;
	padding-top:1%;
	line-height:0;
	}
	
@media screen and (max-width:640px) {
nav .menu {
	width:100%;
	text-align:center;
	margin:0 auto 3% auto;
	padding-top:1%;
	line-height:0;
	}
	}
	
	nav .menu li {
		display:inline-block;
		width:15.43%;
		margin-top:0%;
		}
		
		nav .menu li a {
			display:block;
			}
		
		nav .menu li a:hover {
			background:url(../image/nav_bg.png) no-repeat;
			background-size:contain;
			background-position: bottom;
			}
			
		nav .menu li.active {
			background:url(../image/nav_bg.png) no-repeat;
			background-size:contain;
			background-position: bottom;
			}
	
	


/*==================================
slider
===================================*/
.slider {
	width:100%;
	height:auto !important;
	max-height:871px !important;
	margin-top:1%;
}

.slider p {
	width: 100%;
	height: auto;
	max-height:871px;
}

.slider img {
	position:relative;
	width:100%;
	max-width:871px;
	max-height:871px;
	left:0;
	right:0;
	margin:0 auto;
}

.slider p {
	position:relative;
	width:100%;
	max-width:871px;
	max-height:871px;
	margin:0 auto;
	}
	
	.slider p .new{
		position:absolute; z-index:1000;
		width:10.79%;
	}
	
	@media screen and (max-width:640px) {
	.slider p .new{
		width:23.79%;
		}
		}

.slider-nav {
	width:61.49%;/*5つの場合100%*/
	max-width:535px;/*5つの場合870*/
	margin:2% auto;
	text-align:center;
	}
	
.slider-nav	.slick-track {
    -webkit-transform: translate3d(0, 0, 0) !important;
       -moz-transform: translate3d(0, 0, 0) !important;
        -ms-transform: translate3d(0, 0, 0) !important;
         -o-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
}
	
.slider-nav .slick-slide {
    height: auto;
    margin: 0 7px;
	padding-top:2.4%;
	}
	
	.slider-nav li {
		position:relative;
		display:inline-block;
		width:18.39%;
		max-width:160px;
		height:auto;
		box-sizing: border-box;
		border:10px solid rgba(255,255,255,0.00);
		}
		
	@media screen and (max-width:640px) {
		.slider-nav {width:90%;}
		.slider-nav li {
			border:5px solid rgba(255,255,255,0.00);
		}
		
	}
		
		.slider-nav li p{
			position: absolute;
			width:98%;
			bottom:0;
			padding:1%;
			
			background:#ffa200;
			text-align:center;
			font-size:2.4rem;
			color:#fff;
			font-weight:bold;
			}
			
		/*@media screen and (max-width:640px) {*/
		@media screen and (max-width:840px) {
		.slider-nav li p{
			font-size:1.8rem;
			}
			
			}
			
		.slider-nav .slick-current {
			background:url(../image/slider-nav_bg.png) no-repeat center top;
			background-size:33.75% auto;
			}
			
		.slider-nav .slick-current li {
			box-sizing: border-box;
			border:10px solid #57b2de;
			filter: drop-shadow(2px 3px 2px  rgba(0, 0, 0, .3));
	-webkit-filter: drop-shadow(2px 3px 2px  rgba(0, 0, 0, .3));
			}
			
		@media screen and (max-width:640px) {
		.slider-nav .slick-current li {
			box-sizing: border-box;
			border:5px solid #57b2de !important;
			filter: drop-shadow(1px 1px 1px  rgba(0, 0, 0, .3));
	-webkit-filter: drop-shadow(1px 1px 1px  rgba(0, 0, 0, .3));
			}
			
			}
			
		.slider-nav .slick-current li::after {
			content:"";
			position:absolute;
			top:0; right:0; bottom:0; left:0;
			box-shadow:inset 2px -1px 10px rgba(0,0,0,0.3);
			}
			
		@media screen and (max-width:640px) {
		.slider-nav .slick-current li::after {
			box-shadow:inset 1px -1px 5px rgba(0,0,0,0.3) !important;
			}
			}
			
/*==================================
common
===================================*/
#main {
	width:100%;
	max-width:980px;
	min-width:320px;
	margin:0 auto;
	}
	
#main .contents {
	position:relative;
	width:100%;
	max-width:917px;
	margin:0 auto;
	}
	
#main .mainImg {
	width:88.77%;
	margin:0 auto;
	text-align:center;
	}
	
#main .contents .box {
	position:relative;
	width:99%;
	max-width:870px;
	margin:0 auto;
	background:rgba(255,255,255,1.00);
	}
	
	
	
/*cafe2018*/

.cafeTitle {
	width: 100%;
	max-width:882px;
    margin: 0 auto;
	}
	
.store {
	width:81.63%;
	margin:0 auto;
	text-align:center;
	}
	
@media screen and (max-width:640px) {
.store {
	width: 90.63%;
	}
	}
	
	.store li {
		float:left;
		width:47.5%;
		margin-right:5%;
		margin-bottom:5%;
		}
		
		.store li:nth-child(2), .store li:nth-child(4) {
			margin-right:0;
			}

.PhotoconlArea .left{
	max-width: 220px;
	margin-left: 3%;
	width: 24%;
	float: left;
}
.PhotoconlArea .right{
	max-width: 638px;
	margin-left: 2%;
	width: 64%;
	float: left;
}
.PhotoconlArea button{
	background-color: #f3f8ff;
}
.btn-hashimg{
	max-width: 638px;
    margin: 2% 0 0 30%;
    width: 31.49%;
    float: left;
} 
.bg-blue{
	background-color: #f3f8ff  !important; 
}


/*cafemenu*/

.box.cafeIdea {
	padding-top:18%;
	}

.cafeIdeaTitle {
	position:absolute; z-index:5;
	width: 100%;
	max-width:882px;
    top: 1%;
    left: 0;
    right: 0;
    margin: 0 auto;
	}
	
	
.requirements {
		padding-bottom: 1%;
		}
		
	.requirements_text {
		width:80%;
		font-size:2.8rem;
		margin:3% auto;
		text-align:center;}
	
	.requirements .txt {
		width:80%;
		font-size:2.4rem;
		margin:3% auto 0 auto;
		}
		
	.requirements .btn {
		margin:5% 0;
		padding-right:1%;
		text-align:right;
		}
		
	.requirements .btn span {
		display:block;
		width:481px;
		height:66px;
		margin:0 auto;
		background:url(../image/cafemenu_method_requirements_btn_open.jpg) no-repeat;
		background-size:contain;
		
		overflow: hidden;
		text-indent: 100%;
		white-space: nowrap;
		}
	
		.requirements .btn span.close {
			display:block;
			width:481px;
			height:66px;
			margin:0 auto;
			background:url(../image/cafemenu_method_requirements_btn_close.jpg) no-repeat;
			background-size:contain;
			}
			
	@media screen and (max-width:640px) {
		.requirements .btn span {
			display:block;
			width:350px;
			height:48px;
			margin:0 auto;
			background:url(../image/cafemenu_method_requirements_btn_open.jpg) no-repeat;
			background-size:contain;
			}
	
		.requirements .btn span.close {
				display:block;
				width:350px;
				height:48px;
				margin:0 auto;
				background:url(../image/cafemenu_method_requirements_btn_close.jpg) no-repeat;
				background-size:contain;
				}
		}
		
		
	@media screen and (max-width:380px) {
		.requirements .btn span {
			display:block;
			width:241px;
			height:33px;
			margin:0 auto;
			background:url(../image/cafemenu_method_requirements_btn_open.jpg) no-repeat;
			background-size:contain;
			}
	
		.requirements .btn span.close {
				display:block;
				width:241px;
				height:33px;
				margin:0 auto;
				background:url(../image/cafemenu_method_requirements_btn_close.jpg) no-repeat;
				background-size:contain;
				}
		}
			
	.tw_btn {
		width:50%;
		float:left;
		text-align:center;
		}
		
	.insta_btn {
		width:50%;
		float:right;
		text-align:center;
		}
		
		.tw_btn h6, .insta_btn h6 {
			width:70.65%;
			margin:8% auto 3% auto;
			}
			
		.tw_btn ul li, .insta_btn ul li {
			width:87.35%;
			margin:5% auto 0 auto;
			}


/* アップデートについて */
.updateBannerDate{
	display: block;
	max-width: 185px;
	width: 22.8%;
}
.linkmask{
	position: absolute;
    left: 49%;
    width: 10%;
}

.voteTweet{
	width: 66%;
	margin: 0 auto;
}

.updateContents{
  width: 88.77%;
  margin: 0 auto;
  text-align: center;
}


.update-1028-puyo{
width:10.10459%;
padding-top: 10.10459%;
top:-2%;
left: -2%;
background: url(../image/update-1028-img01-puyo.png) no-repeat ;
background-size: 100%;
}

/* cafemenu result*/
.resultArea , .summaryArea{
	margin: 0 2%;
	padding: 0 .5% .5%;
	background-color: #7ecef4;
}
.resultTitle , .summaryTitle{
	position: relative;
	margin:5% auto 0;
}
.resultInner , .summaryInner{
	padding: 1% 1% 4% 1%;
	background-color: #fff;
}
.resultInner .txt{
	font-size: 4.8rem;
    font-weight: bold;
	color: #86221c;
}
.resultInner a{
	text-decoration:none;
	color:#0099ff;
}

.leftTitlebar{
	position: relative;
    right: 2.5%;
	width: 82%;
}

.subtitle{
	width: 55%;
    margin: 2% auto;
}
.subtitle:first-child{
	font-size: 4rem;
	text-decoration:none;
}

.menuArea{
	padding: 0 5%;
    margin-bottom: 6%;
	}

.menuResult{
	float: left;
	margin-right: 4%;
}

.awardComment{
    display: inline-block;
    text-align: left;
    font-size: 2.4rem;
    line-height: 1.8;
    color: #86221c;
    width: 42.8%;
    letter-spacing: 0.1rem;
    margin-left: -0.3rem;
    padding: 0 1% 3%;
	border-radius: 5px;
   　-webkit-border-radius: 5px;
    　-moz-border-radius: 5px;
}
.awardComment img{
	margin: 4% 0;
}
.awardComment p{
	font-weight: bold;
}
.sammaryComment{
	display: inline-block;
    text-align: left;
    font-size: 3.3rem;
    line-height: 1.7;
    color: #86221c;
	letter-spacing: 0.1rem;
	margin-right: -0.1rem;
	margin: 4%;
}
.sammaryComment p{
	font-weight: bold;
}


@media screen and (max-width:995px) {
	.menuArea{
		margin: 2% 0 10%;
	}
	.menuResult{
		float:none;
		margin: 0 auto;
	}
	.awardComment{
		width:100%;
		text-align: center;
		margin-top: 3%;
	}
	.awardComment p{
		text-align: left;
	}
}

.ap:hover img{
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}


.btn-menu-detail{
    width:64%;
    margin: 3% auto;
    padding-bottom: 5%;
}

.btn-detail{
    width:38%;
    margin: 3% auto;
}

/* cafe goods*/

#main .contents .box.goods {
    width: 100%;
    max-width: 870px !important;
    margin: 0 auto;
    background: url(../image/cafe_bg.jpg) !important;
    padding: 2% 0;
}

.goods_title {
    padding: 5% 0;
}

.itemBox {
    width: 96%;
    margin: 0 auto;
    padding: 1% 0;
    background: #fdf6e6;
    text-align:center;
}
.itemBox .item {
    position:relative;
    width: 97.91%;
    margin: 1% auto;
}

.itemBox .item .soldout {
    width: 29.88%;
    position: absolute;
    top:0;
    left: 0; 
}

.itemBox .item .limited {
    width: 10%;
    position: absolute;
    bottom:4%;
    left: 1.5%; 
}



/*==================================
ゲーム紹介
===================================*/

.game_intro {
	width:100%;
	max-width:970px;
	margin:5% auto 3% auto;
	
	border:5px solid #7ecef4;
	box-sizing: border-box;
	background:rgba(255,255,255,1.00);
	text-align:center;
	}
	
.game_intro h3 {
	width:39.58%;
	margin:1% auto 2% auto;
	}
	
.game_intro .ss {
	width:90.10%;
	margin:0 auto;
	text-align:center;
	}
	
@media screen and (max-width:640px) {
.game_intro .ss {
	width:95%;
	}}
	
	
	.game_intro .ss li {
		display:inline-block;
		width:31.23%;
		margin-right:2%;
		}
		
		.game_intro .ss li:last-child {
			margin-right:0;
			}
	
.game_intro .btn {
	width:57.83%;
	margin:5% auto 4% auto;
	}
	
@media screen and (max-width:640px) {
.game_intro .btn {
	width:88.83%;
	margin:5% auto 4% auto;
	}	
	}
	
	
/*==================================
SNSボタン
===================================*/
	
.snsBtn {
	width:29.69%;
	margin:5% auto 0 auto;
	}
	
@media screen and (max-width:640px) {
.snsBtn {
	width:77.69%;
	}	
	}

.snsBtn li {
	width: 21.30%;
    float: right;
    margin: 2%;
	}
	
.snsBtn li:last-child {
	margin-right:0;
	}	


/*==================================
banner
===================================*/

.siteBtn {
	display:block;
	width:57.24%;
	margin:5% auto;
	}
	
@media screen and (max-width:640px) {
	.siteBtn {
	display:block;
	width:87.24%;
	margin:0 auto;
	}
	}


.banner {
	width:100%;
	max-width:970px;
	min-width:310px;
	margin:0 auto;
	text-align:center;
	}
	
.banner li {
	display:inline-block;
	margin-right:1%;
	margin-bottom:1%;
	
	}
			

#app_start_btn {
	position: fixed;
	z-index: 9999;
	width: 20.93%;
	height: auto;
	bottom: 10px;
	right: 10px;
}

/*==================================
appDl
===================================*/

.appDl {
	width:100%;
	padding:2% 0 0 0;
	color:#FFFFFF;
	font-size: 2rem;
	background:#0d1049;
	}

	
.appDl .box {
	width:100%;
	max-width:980px;
	min-width:320px;
	margin:0 auto;
	}

.appDl .box h3 {
	width:79.68%;
	margin:0 auto;
	}
	
.appDl .dl {
	text-align:center;
	}
	
.appDl .dl li {
	display:inline-block;
	width: 24.37%;
	background:url(../image/appDL-bg.png) no-repeat center top;
	background-size: 79%;
	}
	
@media screen and (max-width:640px) {
	.appDl .dl li {
	width:39.37%;
	}
	
	}
	
.appDl .dl li a img {
	width:90%;
	margin:3% 0 25% 0;
	}
	
.appDl .box .txt {
	width:50.31%;
	margin:0 auto;
	}
	
.appDl .box p {
	margin:0 auto;
	font-size:3.0rem;
	padding-bottom:1%;
	}





/*==================================
footer
===================================*/

footer {
	position:relative;
	width: 100%;
	background: #ffffff;
	font-size: 3.0rem;
	color:#111111;
}

@media screen and (max-width:960px) {
	
	footer {
	min-width: 320px !important;

}
	}
	
@media screen and (max-width:640px) {
	
	footer {
	font-size: 3.0rem;

}
	}

.footer {
	width:90%;
	max-width:970px;
	min-width:310px;
	margin:0 auto;
	padding-bottom: 11%;
	}
	
@media screen and (max-width:640px) {
.footer {
	padding-bottom:18%;
	}	
	}
	
#footerContents,#footer_text {
	padding: 10px;
}
#footer_text {
	padding-top: 0;
}
#footerContents li{
	float:left;
	margin-right:10px;
}
#footerContents li p {
		margin-top: 13px;
}


.sega-logo {
	display: inline-block;
    width: 104px;
    height: 36px;
    padding-top: 38px;
}

.sega-logo.sp {
	display: inline-block;
    width: 104px;
	padding-top: 0;
}

@media all and (-ms-high-contrast:none) {
.cero {
	display: inline-block;
    width: 60px;
    height: 74px;
}}

.copyFooter {
	display: table-cell;
	vertical-align:bottom;
	height:74px;
	line-height: 100px;
	}
	
.copyFooter.sp {
	display: table-cell;
	vertical-align:bottom;
	height:auto;
	line-height: 24px;
	}


#footer_text a {
	display:inline-block;
	margin-right:10px;
}

.badgeEnd{
	position: absolute;
	z-index: 10;
	max-width: 216px;
	width: 24.5%;
	right: 6%;
	top: 56%;
}
.badgeEndUpdate{
    position: absolute;
    z-index: 10;
    max-width: 216px;
    width: 24.5%;
    right: 4%;
    top: 45%;
}