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

html,body,div,ul,ol,li,dl,dt,dd,form,fieldset,input,textarea,h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,th,td { margin:0; padding:0;}
html, body { height:100%; }
img { border: 0; vertical-align: bottom; border-style: none;}
a img { border-style:none;}
a { outline: none; }
a:link,a:visited,a:active {outline: none;} 
a:link { color: #FFCC00;}
a:visited { color: #FFCC00;}
a:hover { color: #f00;}
a:active { color: #09C;}

body,td,th { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 16px; line-height:1.7; color: #FFF;  background-repeat: no-repeat; background-position: center top; background-attachment: fixed; background-color: #5F537C; background-image: url(../img/bg.jpg);}
.clearfix{ clear:both;}
.clearfix2{ clear:both; height:20px;}
.clearfix3{ clear:both; height:40px;}
.opp{ filter: alpha(opacity=50)!important; -moz-opacity: 0.5!important; opacity: 0.5!important;}

#main{  position: relative;  width: 1026px;  text-align: center;  margin: 0 auto;}
#main #haruka15th{ position:absolute; right:0; }
#main #logo{ position:absolute; top:375px; left:170px; z-index:6;}
#main #chara01{ position:absolute; top:120px; left:470px; z-index:5;}
#main #chara02{ position:absolute; top:120px; left:120px; z-index:4;}
#main #chara03{ position:absolute; top:5px; left:375px;}
#main #chara04{ position:absolute; top:30px;}
#main #chara05{ position:absolute; top:90px; right:0;}

#wrapper{ max-width: 1026px;
width: 100%; margin: 0 auto; padding-top: 570px; position: relative; z-index: 7;}
#wrapper .day{ position:absolute; right:19%; margin-top:-20px;}
.frame{ width:100%; max-width:1026px;}
#content #catch{ text-align:center;}
#content #wrap{ width:82%; margin:0 auto; text-align:left; word-wrap: break-word;}
#content #wrap h3{ color: #FC0; font-size: 23px; display: block; margin-bottom: 15px; padding-top: 40px; display: block; border-bottom: dotted 1px #FFCC00; line-height: 1.4;}
#content #wrap h4{ color: #FC0; padding:10px 0 5px;}
#content #wrap .notice{ font-size: 13px; color: #ccc; line-height: 140%; padding-top: 10px;}
#content #wrap ul{ list-style:none;}
#content #wrap li img{ padding-bottom:6px;}

#footer{ text-align:center; margin: 0 auto; font-size:12px; width:90%; color:#ccc;}
#footer img{ padding:0 5px;}

#footer a:hover{ color:#FC0; text-decoration:underline;}
#footerbottom{ position:relative;}
#pagetop { bottom: 50px; right: 25px; position: fixed; z-index: 500;display:none;}

.gray{ color: #999999}
.gray a{ color: #999999}

.finish{ display:block; padding:5px 0 5px 20px; background-color:#fff; border-radius: 20px; margin-bottom:5px; color:#F00; border:solid 2px #FF0000; font-weight:bold;}
#campaign{ padding-top:30px;}
#campaign img{ width:100%; max-width:645px;}

.tabmenu{ width: 100%; max-width:740px; margin:0 auto;}
.tab{ overflow:hidden; margin:0 auto; padding: 0; list-style: none; text-align:center;}
.tab li{ cursor: pointer; display: inline-block; text-align:center; width:45%;}
.tab li.select{ }
.tab li img{ width:100%; max-width:310px;}
.content div{ background-image:url(../img/black.png); padding:5%; font-size:14px;}
.content div .line{ background-image:none; border-bottom:dotted 1px #666666; padding:5px 0; margin:0 0 5px 0;}
.content div span{ font-size:12px; color:#FFF;}
.hide{ display:none;}
.content div.sub{ background: white ; height: 50px; margin: 1em;}
.other{ margin-top: 1em; padding: 1em;}
.close{ width:20%; background:#d38; -webkit-border-radius:4px; border-radius: 4px; color: #fdfdfd; text-align: center; cursor: pointer;}
.daytime{ color:#FF0;}
.nighttime{ color:#F90;}
.goods{	color: #fff;}
.goods h6{	font-size: 18px; font-weight: bold;	padding-bottom: 10px; color: #F9F;}
.goods h7{ font-size:16px; font-weight:bold; color: #F9F;}

.stage{ position: relative; width: 100%; padding-top: 56.25%;}
.stage iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

@media screen and (min-width: 786px) {
#content{ background-image: url(../img/frame3.png);  background-repeat: repeat-y;  background-size: contain;}
#content #wrap .castul li{ float:left; display:block; text-align:center; width:25%; font-size:14px; }
#footerbottom #banner{ position:absolute; top:40px; left: 0; right: 0; bottom: 0; margin: auto; width:200px;}
.hidepc{ display:none;}
#footer a{ color:#FFF; text-decoration:none; font-size:14px;}

.cdspec{ font-size:13px; border:dotted 1px #FFFFFF; margin-top:10px; padding:5px;}
}

@media screen and (max-width: 785px) {
#main{ display:none;}
#content{  background-image: url(../img/frame3.png);  background-repeat: repeat-y;  background-size: contain;}
#content #wrap .castul li{ float:left; display:block; text-align:center; width:33%; font-size:14px; padding-bottom:10px;}
#footerbottom #banner{ position:absolute; top:10px; left: 0; right: 0; bottom: 0; margin: auto; width:200px;}
.hidesp{ display:none;}
#wrapper{ padding-top:0;}
#footer a{ color:#FFF; text-decoration:none; font-size:12px;}
.cdspec{ font-size:13px; border:dotted 1px #FFFFFF; margin-top:10px; padding:5px;}
}

@media screen and (min-width: 641px) {
.select{ max-width: 970px; width: 100%; margin: 0 auto 6px;}
.select .selectbox{ display:block; width:49.2%; float:left; padding:0.4%;}
.select .selectbox p{ width:98%; padding-bottom:15px;}
.select .selectbox .ss{ width:100%; padding-top:15px;}
}

@media screen and (max-width: 640px) {
#content #wrap .castul li{ float:left; display:block; text-align:center; width:50%; font-size:14px; padding-bottom:10px;}
#content #wrap .castul li img{ width:80%;}
#content #wrap .castul li span{ font-size:12px;}
#content #wrap p{ font-size:13px;}
#footerbottom #banner{ position:absolute; top:10px; left: 0; right: 0; bottom: 0; margin: auto; width:200px;}

.select{ width:100%; margin:0 auto 0px;}
.select .selectbox{ display:block; margin-bottom:5px;}
.select .selectbox .ss{ width:100%; padding-top:20px; padding-bottom:80px;}
.select .selectbox p{ width:92%; font-size:15px; margin:0 auto; padding-bottom:15px;}
.select .selectbox h3{ width:95%; margin:0 auto;}
}