@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;
	background:url("../image/bg.jpg") repeat-y;
	background-size: 100% auto;
    height:100%;
}

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%;
}

.tc {text-align:center !important;}
.tr {text-align:right !important;}
.tl {text-align:left !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;}
.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;}
.pt8 {padding-top:8% !important;}
.pt5 {padding-top:5% !important;}
.pt3 {padding-top:3% !important;}
.pt1 {padding-top:1% !important;}
.pt0 {padding-top:0% !important;}
.pb8 {padding-bottom:8% !important;}
.pb5 {padding-bottom:5% !important;}
.pb3 {padding-bottom:3% !important;}
.pb1 {padding-bottom:1% !important;}
.pb0 {padding-bottom:0% !important;}

.sd {
	filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .3));
	-webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .3));
	}

.op0 {opacity: 0;}

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

/*** chara ***/

.py-g {
	position: absolute;
	width: 16.73%;
	max-width: 164px;
	bottom: 2%;
    right: 3%;
}

.py-b {
	position: absolute;
	width: 14.18%;
	max-width: 139px;
	top:20%;
	left:4%;
}

.py-r {
	position: absolute;
	width: 15.61%;
	max-width: 153px;
	bottom: 13%;
    right: 3%;
}

.py-y {
	position: absolute;
	width: 12.14%;
	max-width: 119px;
	top: 51%;
    left: 11%;
}

.py-v {
	position: absolute;
	width: 12.85%;
	max-width: 126px;
	top: 33%;
    right: 5%;
}

@media screen and (max-width:768px) {

	.py-g {
		bottom: 11%;
	}
	
	.py-b {
		top: 18%;
    	left: 0%;
	}
	
	.py-r {
		top: 14%;
    	right: 1%;
	}
	
	.py-v {
		top: 17%;
	}
	

}

/*hover*/


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

header {
	position:relative;
	width: 100%;
	max-width:1038px;
	margin: 0 auto;
    /*background: url("../image/main-img.png") no-repeat top center;
    background-size: 100% auto;*/
	}

.chara {
	position: absolute; z-index: 1;
	width: 100%;
	max-width: 1038px;
	top: 0;
	max-width: 0 auto;


}

.header-box {
	position:relative; z-index: 2;
	width: 100%;
	max-width:980px;
	margin: 0 auto;
}

h1.logo {
	position: absolute; z-index: 3;
	width: 30.61%;
	right:0;
	top:0;

}

h2.anniv-logo {
	position: relative;
	width: 38.06%;
	margin-top: 60%;

}


.snsBtn {
	position:relative; z-index:2;
	width:100%;
	max-width:980px;
	min-width:320px;
	margin:0 auto;
	padding-top: 1%;
    list-style: none;
	text-align:center;
	}

.snsBtn li {
	width: 6.32%;
    float: left;
    margin: 1%;
	}
	
	
.topanime { animation: show 1s both; }

.d0 { animation-delay: 0.2s; }

@media screen and (max-width:768px) {

	h2.anniv-logo {
		margin-top: 54%;
	}

}

	
	
/*==================================
common
===================================*/

#main {
	width:100%;
	max-width:980px;
	min-width:320px;
	margin:0% auto 0 auto;
	}
	

.contents {
	position: relative; z-index: 2;
	width:100%;
	height:100%;
	max-width:980px;
	min-width:320px;
	margin-bottom: 7%;

	border:7px solid #f6ad21;
	box-sizing: border-box;
	border-radius: 90px;
	background: url(../image/title-bg.png) no-repeat, #fff0a1;
	background-size: 95.71% auto;
	background-position: 50% 0.5%;
	
}

	.contents h3.cam-ttl {
		width: 84.48%;
		max-width: 828px;
		margin: 3% auto;
	}

	.contents h3.cam-ttl02 {
		width: 91.83%;
		max-width: 900px;
		margin: 3% auto;
	}

	.contents .sub-ttl {
		width: 84.08%;
		max-width: 824px;
		margin: 7% auto 2% auto;
	}

    .contents .end_hanko {
        position: absolute; z-index: 100;
        width: 28.36%;
        top: 4%;
        right:1%;
    }

    .contents .box {
        position:relative;
		width:97%;
		max-width:940px;
		background: #fff;
		border-radius:70px;
		text-align:center;
		margin:1.5%;
        }

        .contents .box p.txt, .contents .box p.img {
            width: 88.08%;
            max-width: 828px;
			margin:0 auto;
            text-align: center;
			}

		.contents .box p.txt02 {
			width: 95.74%;
            max-width: 900px;
			margin:0 auto;
            text-align: center;

		}

		.contents .box p.img02 {
			width: 85.10%;
            max-width: 800px;
			margin:0 auto;
            text-align: center;

		}

        .contents .box p.con-banner {
            width: 58.97%;
            max-width: 578px;
            margin:0 auto;
            padding-bottom: 3%;
            text-align: center;
            }

.contents .box .btn img {
    width: 60.31%;
    max-width: 567px;
    margin: 0 auto;
}

@media screen and (max-width:768px) {
    
header {
    padding-bottom: 0%;
    background-size: 100% auto;
	}
    
    
.snsBtn {
	position:relative; z-index:4;
	width:100%;
	max-width:980px;
	min-width:320px;
	margin:0 auto;
	padding-top: 1%;
    
	text-align:center;
	}
    
.snsBtn li {
	width: 8.32%;
    margin: 1%;
	}
	
.snsBtn li:last-child {
	margin-right:0;
	}
    
    
/*==================================
common
===================================*/

#main {
	width:100%;
	max-width:980px;
	min-width:320px;
	margin:0 auto;
	}
    
.contents {
    width:100%;
	float:none;
	border-radius: 50px;
	}
	
	.contents .box {
		width: 97%;
		border-radius: 40px;
	}
    
.contents .box .btn img {
    width: 87.24%;
}
    
.contents .box p.txt {
    width: 100%;
	}
	
	.contents .box p.con-banner {
		width: 81.97%;
		}
   
}

/******* cheer *******/

.cheer-ttl {
	width: 62.55%;
	max-width: 558px;
	margin: 0 auto;
    padding: 5% 0;
}

.update-mark {
	position: absolute;
	z-index: 3;
	width: 16.42%;
	max-width: 161px;
	top:15%;
	right:10%;
}

/******* manzai *******/

.contents .box.manzai {

	padding: 5% 0 2% 0;

	background: url(../image/cafe-bg.jpg) no-repeat;
	background-size: cover;

	border: 7px solid #fff;
	box-sizing: border-box;
}

.manzai-movie {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 3%;
}

.manzai-link {
	width: 44%;
	margin: 3%;
}

.manzai-link a:hover {

	opacity: 0.8;
}

@media screen and (maz-width:768px) {

	.contents .box.manzai {

		border: 7px solid #fff;
	}

}

	
/**** ハッシュタグ ****/

@media screen and (max-width:640px) {
.twhasBox {
	width:95%;
	margin:0 auto;
	}}
	
	
#twitter-widget-0 {
	border-radius: 5px !important;
	border:3px solid #ff5d00 !important;
	}

.timeline-Footer {
	    padding: 10px !important;
		}


	
/*** TWキャンペーン ***/


.wrap-slider {
	width: 100%;
	min-width: 320px;
	height:auto !important;
}



.sliderNav {
	display:table;
    table-layout: fixed;
	width: 100% !important;
	max-width:708px !important;
	min-width: 300px !important;
	margin:0 auto 3% auto;
}


.sliderNav li {
	display:table-cell;
	width:29.38%;
	margin:0;
	padding:0;
	position: relative;
	}

.sliderNav li img {
        max-width: 100%;
        height: auto;
    }

.sliderNav li a {
    display: block;
    padding: 4%;
}

.sliderNav li a.active {
    background: url(../image/twcam-btn-active.png) no-repeat;
    background-size: 100% auto;
}

.sliderNav li .end_hk {
    position: absolute;
	width: 92%;
}

.sliderNav li a.active .end_hk {
    width: 92%;
}
	
.bxslider {
  display: none !important;
  overflow:hidden !important;
}
	
.bxslider li {
  display: none !important;
  overflow:hidden !important;
}
.bx-viewport .bxslider li {
  display: block !important;
}
	
.slider {
	display:table !important;
	height:100%;
	max-width:980px;
	min-width:320px;
	margin:0 auto !important;
	text-align:center !important;
	}

	
.twitter-tweet {
	margin:0 auto !important;
	}
	
.twtr-timeline { height:auto!important; }
	
.slider li {
	position:relative !important;
	float: none;
	}
	
	.slider li p.txt {
		margin:10px auto;
		font-size:2.8rem;
		color:#00246b;
		}
		
	.slider li .item_btn {
		width:65.2%;
		margin:0 auto;
		}	
	
	
	
#twitter-widget-1, #twitter-widget-2 {
	margin:0 auto !important;
	}	
.EmbeddedTweet {
	margin:0 auto !important;
	}
	
.SandboxRoot {
	text-align:center !important;
	margin:0 auto !important;
	}

.retweetBox {
    width:85.10%;
    max-width: 800px;
	display: table !important;
    table-layout: fixed;
	margin:0 auto !important;
	}

.retweetBox img {
    max-width: 100%;
    height: auto;
}

.retweetBox p {
    position: relative;    
}

.retweetBox .end_hk {
    width:22.39%;
    position: absolute;
    right:5%;
    padding-top:2%;
}

@media screen and (max-width:768px) {

	.retweetBox {
		width:95.10%;
		}
}

@media screen and (max-width:640px) {
	
	#twitter-widget-1, #twitter-widget-2 {
		width:350px !important;
		margin:0 auto !important;
		}	
	
	.twitter-tweet {
		width:350px !important;
		margin:0 auto !important;
		}
		

twitterwidget, iframe[id^="twitter-widget-"] {
  margin-left: auto;
  margin-right: auto;
}
	}
	
@media screen and (max-width:450px) {
	
		#twitter-widget-1, #twitter-widget-2 {
		width:256px !important;
		margin:0 auto !important;
		}	
	
	.twitter-tweet {
		width:256px !important;
		margin:0 auto !important;
		}
	
	}
			
		

	.caution {
		width:95%;
		margin:0 auto ;
        padding-bottom: 5%;
		color:#00246b;
		word-break: break-all;
		}
		
		.caution h5 {
			font-size: 3.5rem;
    		font-weight: bold;
			
			}

        .caution ul {
            list-style: none;
        }
		
            .caution li {
                font-size:2.8rem;
                padding-left: 1em;
                text-indent: -1em;
                word-break: break-all;
				}


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

.linkArea {
	width: 100%;
	background: #f7e9f2;
}

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

.siteBtn {
	display:block;
	width:57.24%;
	margin:5% auto;
	}
	
@media screen and (max-width:640px) {
	.siteBtn {
	display:block;
	width:87.24%;
	margin:5% 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%;
	
	}
			

#dl-btn {
	position: fixed;
	z-index: 9999;
	width: 15.93%;
	height: auto;
	bottom: 10px;
	right: 10px;
}

@media  screen and (max-width:768px) {

	#dl-btn {

		width: 24.93%;

	}

}


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

.appDl {
	width:100%;
	padding:3% 0;
	background:#0d1049;
	color:#FFFFFF;
	font-size: 2rem;
	}
	
.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;
	}
	

#top_scroll_btn img { opacity: 0.8; }

#top_scroll_btn img:hover { opacity: 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:5%
	}
	
@media screen and (max-width:640px) {
.footer {
	padding-bottom:18%
	}	
	}
	
#footerContents,#footer_text {
	padding: 10px;
    list-style: none;
}
#footer_text {
	padding-top: 0;
}
#footerContents li{
	float:left;
	margin-right:10px;
	margin-top: 5%;
}
#footerContents li p {
		margin-top: 13px;
}


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

.copyFooter {
	display: table-cell;
	vertical-align:bottom;
	height: 31px;
    line-height: 26px;
	}


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