@charset "utf-8";
/* CSS Document */

html,body {
  height: 100%;
}
body > iframe,
body > span {
  height: 0;
  overflow: hidden;
}
#wrapper {
  min-height: 100%;
	background:url(../img/bg.jpg);
	background-position:center top;
	background-repeat:no-repeat;
}

#introContents{
	position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
	width: 100%;
	height: 100%;
  background: url(../img/bg.jpg) center center no-repeat #fff;
}

#modal{
	position: fixed;
	top: 0;
	left: 0;
  z-index: 30;
	width: 720px;
	height: 100%;
	background: #000;
	opacity: 0;
}

#modal .btnClose{
	position: absolute;
	top: 0;
	right: 0;
}

#modal #modalContentsArea{
	position: absolute;
	width: 640px;
	height: 410px;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

#modal #modalContentsArea .modalText{
	height: 130px;
	position: relative;
}

#modal #modalContentsArea #modalTextA #coverTextA{
	content: '';
	display: block;
	height:130px;
	width: 440px;
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
}

#modal #modalContentsArea #modalTextB #coverTextB{
	content: '';
	display: block;
	height:130px;
	width: 640px;
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
}

#modal #modalContentsArea #modalTextC #coverTextC{
	content: '';
	display: block;
	height:130px;
	width: 498px;
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
}

@keyframes maskingIn{
	0%{
		width: 0;
	}
	100%{
		width: 650px;
	}
}

#modal #modalContentesArea .modalText:not('#modalTextC'){
	margin-bottom: 10px;
}

#modal #modalContentsArea .modalText img{
	opacity: 0;
}

#splash {
	position:absolute;
	top:0;
	left:0;
	width: 720px;
	height: 100%;
}

#splashTexts {
	width:640px;
	height:863px;
	margin:0px auto;
	position:relative;
}

#splashCatchA {
	position:absolute;
	left:362px;
	top:250px;

	opacity:0;
}

#splashCatchB {
	position:absolute;
	left:301px;
	top:250px;

	opacity:0;
}

#splashCatchC {
	position:absolute;
	left:242px;
	top:250px;

	opacity:0;
}


#contents {
	width:720px;
	overflow:hidden;
	position:relative;
  display: none;
}
#contents::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 1;
}
#contents.is-opening::after {
  height: 0;
  transition: height 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

#contentsWrapper {
	padding-top:1508px;

}

#mainVisual {
	position:absolute;
	left:0px;
	top:0px;

	width:720px;
	height:1372px;
}

#bannerSpecialDrink {
	width:589px;
	margin-left:22px;
}

#textAnimeInfo {
	position: absolute;
	left: 0;
	top: 750px;
}

/*#mainMenu {
	position:absolute;
	left:25px;
	top:1230px;
}

#menuNews {
	position:absolute;
	left:0px;
	top:0px;
}

#menuStory {
	position:absolute;
	left:-3px;
	top:75px;
}

#menuBook {
	position:absolute;
	left:0px;
	top:151px;
}

#menuAnima {
	position:absolute;
	left:0px;
	top:227px;
}

#menuSp {
	position:absolute;
	left:-3px;
	top:302px;
}*/

#mainMenu{
	margin: -200px 25px 80px;
	margin-left: 25px;
}

#mainMenu li{
	margin-bottom: 10px
}

#bottomArea {
	background:url(../img/bottom_bg.png);
	z-index:10;
	margin-top:64px;
	padding-bottom:60px;
}


#newsArea h3 {
	margin-left:22px;
}

#newsList {
	margin-top:20px;
	margin-left:24px;
}

#newsList p {
	background:url(../img/point_news.png);
	background-repeat:no-repeat;
	background-position:0px 12px;

	padding-left:20px;
	width:650px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;

	font-size:24px !important;

	height:36px;
	line-height:36px;
}

#newsList p a {
	color:#000;
	text-decoration:none;
}

#captionOfficialTweet {
  position: relative;
	margin-top:60px;
}
#captionOfficialTweet .captionOfficialTweet__btn {
  position: absolute;
  top: 5px;
  right: 22px;
  width: 180px;
}
#captionOfficialTweet .captionOfficialTweet__btn img {
  max-width: 100%;
}

#officialTweets {
	margin-top:30px;
	background:url(../img/point_twi1.png);
	background-repeat:no-repeat;
	background-position:0px 15px;
	padding-left:20px;
	width:650px;
	margin-left:720px;
	font-size:24px;
	line-height:1.5em;

	height:210px;
}

#dalTweets {
	margin-top:30px;
	background:url(../img/point_twi2.png);
	background-repeat:no-repeat;
	background-position:0px 15px;
	padding-left:20px;
	width:650px;
	margin-left:720px;
	font-size:24px;
	line-height:1.5em;

	height:210px;
}

#captionDalTweet {
	margin-top:60px;
}

.newTweet{
	margin:0 auto;
	width:680px;
	padding:20px 0;
	height:500px;
	overflow:hidden;
}

.newTweet iframe{
	/* zoom:1.3; */
}

#catch{
	position:absolute;
	top:250px;
	right:25px;
	z-index:10;
}

#annlogo{
	position:absolute;
	top:970px;
	left:30px;
	z-index:10;
}

/*
#cell{
	position:absolute;
	top: 970px;
	left: 50px;
	z-index:11;
}

#cell2{
	position:absolute;
	top: 970px;
	left: 260px;
	z-index:11;
}

#cell3{
	position:absolute;
	top: 970px;
	left: 470px;
	z-index:11;
}
*/

.topBannerArea {
	position: absolute;
	top: 1080px;
	width: 660px;
	padding: 0 30px;
	text-align: center;
}

.topBannerArea .topBannerItem {
	display: inline-block;
	margin: 0 1%;
}

.topBannerArea .topBannerItem img {
	width: 100%;
}