@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-attachment: fixed;
 background-color: #36141F;
}
.clearfix{ clear:both;}
.clearfix2{ clear:both; height:20px;}
.clearfix3{
 clear: both;
 height: 40px;
 border-top: solid 1px #843951;
}
.opp{ filter: alpha(opacity=50)!important; -moz-opacity: 0.5!important; opacity: 0.5!important;}

#main{
 position: relative;
 width: 100%;
 text-align: center;
 margin: 0 auto;
 height: 695px;
 max-width: 1026px;
}
#main #catch{
 position: absolute;
 right: 55px;
 top: 38px; z-index:6;
}
#main #logo{
 position: absolute;
 top: 121px;
 z-index: 6;
 right: 0px;
}

#main #visual{
 position: absolute;
 top: 0px;
 left: 1px;
}
#main #day{
 position: absolute;
 top: 576px;
 right: 25px;
}

#wrapper{
 width: 100%;
 margin: 0 auto;
 position: relative;
 z-index: 7;
 background-image: url(../img/bg.jpg);
 background-position: center top;
}
#wrapper .day{ position:absolute; right:19%; margin-top:-20px;}
.frame{ width:100%; max-width:1026px;}
#content #catch{ text-align:center;}
#content #wrap{
 width: 92%;
 margin: 0 auto;
 text-align: left;
 word-wrap: break-word;
 max-width: 970px;
}
#content #wrap h2{
 color: #CE9AE1;
 font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
 text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
 font-size: 250%;
 padding: 5% 0 2%;
 line-height: 1.2;
 text-align: center;
}
#content #wrap h2 img{ width:100%; max-width:928px;}
#content #wrap h3{
 color: #CE9AE1;
 font-size: 200%;
 display: block;
 margin-bottom: 15px;
 margin-top: 70px;
 display: block;
 line-height: 1.8;
 font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
 text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
 font-weight: normal;
 background-image: url(../img/flower.png);
 background-repeat: no-repeat;
 text-indent: 2em;
 height: 50px;
 position: relative;
}
#content #wrap h4{ color: #FC0; padding:10px 0 5px;}
#content #wrap .read{
 text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
 font-size: 120%;
}
#content #wrap .notice{
 font-size: 13px;
 color: #A973A4;
 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: 80%;
 width: 90%;
 color: #999;
 padding-bottom: 40px;
}
#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: 60px 0;
 text-align: center;
}
#campaign img{
 width: 100%;
 max-width: 824px;
}

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

.strongtitle{ font-size:150%; color:#CE9ADE;}

@media screen and (min-width: 786px) {
#content{
 background-image: url(../img/bg2.jpg);
 background-position: center top;
 background-repeat: repeat-x;
}
#content #wrap .castul li{
 float: left;
 display: block;
 text-align: left;
 width: 33.3%;
 font-size: 130%;
}

#content #wrap .castul li span{
 font-size: 70%;
}
#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: 100%;
}

.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/bg2.jpg);
 background-repeat: repeat-y;
}
#content #wrap .castul li{
 float: left;
 display: block;
 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) and (max-width: 990px) {
#content #wrap .castul li img{ width:95%;}
}

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

.s1{ position: absolute; right: 0; top: -80px;}
.s2{ position: absolute; right: 30px; top: 10px;}
.s3{ position: absolute; right: 0; top: -40px;}

.Accordion { overflow: hidden;}
.AccordionPanel { margin: 20px auto 0; padding: 0; width: 99%; border: solid 2px #c66ae0; border-radius: 30px; background-color:#F5CBD4;}
.AccordionPanelTab { cursor: pointer; -moz-user-select: none; -khtml-user-select: none; padding: 5px 0 5px 0px; color: #9a5aa0; font-size: 200%; font-weight: bold; text-align:center;}
.AccordionPanelTab span{ position: absolute; width: 32px; height: 5px; background-image: url(../story/new.png); margin-left: 10px;}
.AccordionPanelContent { overflow: hidden; margin: 0 auto; height: auto; width: 90%; color: #753a4e; font-size: 14px; line-height: 140%; padding: 3% 5%;}
.AccordionPanelContent .text{ width: 100%; float: left; font-size: 15px;}
.AccordionPanelContent .text span{ font-weight: bold; padding: 10px 0; display: block; color: #b01cda; font-size: 120%; line-height: 1.4; border: solid 4px #d981f3; background-color: #f7b6f3; margin-bottom: 20px;}
.AccordionPanelContent .text .photo{ margin-top: 10px; margin-bottom:15px;}
.AccordionPanelContent .text .photo img{ margin-left: 25px; width: 100%; max-width: 400px; float: right; border: solid 6px #ffffff; box-shadow: 2px 2px 12px #555;}
.AccordionPanelContent .text .photo3 img{ margin-right:25px; width: 100%; max-width: 400px; float:left; border:solid 6px #ffffff; box-shadow:2px 2px 12px #555;}
.AccordionPanelContent .text .partytext{ display:block; line-height:1.5;}
.AccordionPanelOpen .AccordionPanelTab { background-image: url(../dlc/line.gif); padding: 5px 0 5px 0px; font-size: 200%; color: #c66ae0; font-weight: bold;}
.AccordionPanelTabHover { color: #FF0000;}
.AccordionPanelOpen .AccordionPanelTabHover { color: #FF0000;}
.AccordionFocused .AccordionPanelTab { background-color: #3399FF;}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab { background-color: #33CCFF;}
.titles{ text-align:center;}
div.AccordionPanel .AccordionPanelContent .p1{ color: #C00; font-weight: bold; font-size: 24px; padding-bottom: 15px;}
div.AccordionPanel .AccordionPanelContent .p1 span{ color: #C00; font-weight: normal; font-size: 12px; margin-left: 10px;}
div.AccordionPanel .AccordionPanelContent .p2{ color: #C00; font-weight: bold; font-size: 18px; padding-bottom: 8px;}
div.AccordionPanel .AccordionPanelContent .leftbox{ width:415px; float:left; border-right:dotted 1px #666; border-bottom:dotted 1px #666;}
div.AccordionPanel .AccordionPanelContent .rightbox{ width:412px; float:right; border-bottom:dotted 1px #666; padding-left:10px;}
div.AccordionPanel .AccordionPanelContent .photo2{ margin-top: 15px; margin-bottom:15px; text-align:center;}
div.AccordionPanel .AccordionPanelContent .leftbox .p2{ color: #F00; font-weight: bold; font-size: 14px; margin-top:7px;}
div.AccordionPanel .AccordionPanelContent .leftbox .p2 span{ color: #C00; font-weight: normal; font-size: 12px; }
div.AccordionPanel .AccordionPanelContent .rightbox .p2{ color: #F00; font-weight: bold; font-size: 14px; margin-top:7px;}
div.AccordionPanel .AccordionPanelContent .rightbox .p2 span{ color: #C00; font-weight: normal; font-size: 12px; }
div.AccordionPanel .AccordionPanelContent .leftbox2{ width:415px; float:left; }
div.AccordionPanel .AccordionPanelContent .rightbox2{ width:412px; float:right; padding-left:10px;}

}

@media screen and (max-width: 640px) {
#content #wrap h2{
 font-size: 156%;
 padding-bottom: 3%;
}
#content #wrap h3{ margin-top:40px;}
#content #wrap .read{ font-size:100%;}
#content #wrap .castul li{ float:left; display:block; width:50%; font-size:14px; padding-bottom:10px;}
#content #wrap .castul li img{ width:95%;}
#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;}
#footer{ padding-bottom:120px;}

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

.s1{ display:none;}
.s2{ display:none;}
.s3{ display:none;}

#pagetop { bottom: 20px; right: 25px; position: fixed; z-index: 500;display:none;}

.Accordion { overflow: hidden;}
.AccordionPanel { margin: 20px auto 0; padding: 0; width: 99%; border: solid 2px #c66ae0; border-radius: 30px; background-color:#F5CBD4;}
.AccordionPanelTab { cursor: pointer; -moz-user-select: none; -khtml-user-select: none; padding: 5px 0 5px 0px; color: #9a5aa0; font-size: 100%; font-weight: bold; text-align:center;}
.AccordionPanelTab span{ position: absolute; width: 32px; height: 5px; background-image: url(../story/new.png); margin-left: 10px;}
.AccordionPanelContent { overflow: hidden; margin: 0 auto; height: auto; width: 90%; color: #753a4e; font-size: 14px; line-height: 140%; padding: 3% 5%;}
.AccordionPanelContent .text{ width: 100%; float: left; font-size: 15px;}
.AccordionPanelContent .text span{ font-weight: bold; padding: 10px 0; display: block; color: #b01cda; font-size: 120%; line-height: 1.4; border: solid 4px #d981f3; background-color: #f7b6f3; margin-bottom: 20px;}
.AccordionPanelContent .text .photo{ margin-top: 10px; margin-bottom:15px;}
.AccordionPanelContent .text .photo img{ width: 100%; max-width: 400px; border: solid 3px #ffffff; box-shadow: 2px 2px 12px #555;}
.AccordionPanelContent .text .photo3{ margin-top: 10px; margin-bottom:15px;}
.AccordionPanelContent .text .photo3 img{ width: 100%; max-width: 400px; border:solid 3px #ffffff; box-shadow:2px 2px 12px #555;}
.AccordionPanelContent .text .partytext{ display:block; line-height:1.5;}
.AccordionPanelOpen .AccordionPanelTab { background-image: url(../dlc/line.gif); padding: 5px 0 5px 0px; font-size: 100%; color: #c66ae0; font-weight: bold;}
.AccordionPanelTabHover { color: #FF0000;}
.AccordionPanelOpen .AccordionPanelTabHover { color: #FF0000;}
.AccordionFocused .AccordionPanelTab { background-color: #3399FF;}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab { background-color: #33CCFF;}
.titles{ text-align:center;}
div.AccordionPanel .AccordionPanelContent .p1{ color: #C00; font-weight: bold; font-size: 24px; padding-bottom: 15px;}
div.AccordionPanel .AccordionPanelContent .p1 span{ color: #C00; font-weight: normal; font-size: 12px; margin-left: 10px;}
div.AccordionPanel .AccordionPanelContent .p2{ color: #C00; font-weight: bold; font-size: 18px; padding-bottom: 8px;}
div.AccordionPanel .AccordionPanelContent .leftbox{ width:415px; float:left; border-right:dotted 1px #666; border-bottom:dotted 1px #666;}
div.AccordionPanel .AccordionPanelContent .rightbox{ width:412px; float:right; border-bottom:dotted 1px #666; padding-left:10px;}
div.AccordionPanel .AccordionPanelContent .photo2{ margin-top: 15px; margin-bottom:15px; text-align:center;}
div.AccordionPanel .AccordionPanelContent .leftbox .p2{ color: #F00; font-weight: bold; font-size: 14px; margin-top:7px;}
div.AccordionPanel .AccordionPanelContent .leftbox .p2 span{ color: #C00; font-weight: normal; font-size: 12px; }
div.AccordionPanel .AccordionPanelContent .rightbox .p2{ color: #F00; font-weight: bold; font-size: 14px; margin-top:7px;}
div.AccordionPanel .AccordionPanelContent .rightbox .p2 span{ color: #C00; font-weight: normal; font-size: 12px; }
div.AccordionPanel .AccordionPanelContent .leftbox2{ width:415px; float:left; }
div.AccordionPanel .AccordionPanelContent .rightbox2{ width:412px; float:right; padding-left:10px;}
}