@charset "utf-8";

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;}
img { border: 0; vertical-align: bottom; border-style: none;}
.img{width:100%;}
a img { border-style:none;}
a { outline: none; }
a:link,a:visited,a:active {outline: none;} 
a img:hover{ opacity: 0.6; filter: alpha(opacity=60); -moz-opacity: 0.6;}
html{height:100%; background: #FFF;  }

.clear{ clear:both;}
.clearfix3{ clear:both; height:70px;}
.center{ margin:0 auto; text-align:center;}

body{ background-image:url(../img/top/body_back_2.jpg); background-size:auto; background-position:center top; background-repeat:repeat; background-attachment:fixed; background-color:#FFF;}
#wrapper{ width:100%; height:auto; background:none; margin:0; padding:0;}
#loading { width: 96px; height: 96px; margin: -68px 0 0 -68px; padding: 20px; background: #BABABA; opacity: 0.5; border-radius: 15px; position: fixed; left: 50%; top: 50%; }
#menu img{display:none;}
a#right-menu{ display:block;}
.officialTwitter{ display:none}

#header{ height: 40px; background-color:#000;}
#header img{ margin:2px;}
#header #logo{float:left;}
#header #logo img{ height:30px;}
#header #sp-menu{ display:block; float:right}
#header #sp-menu a img{height:26px; margin:5px 2px;}

#sp_main{display:block; width:100%;}
#sp_main img{ width:100%; margin:0; padding:0; display:block;}

#update{ background-color: rgba(254,250,226,0.8); border-top: 2px solid #c3ab00; border-bottom: 2px solid #c3ab00; width: 100%; padding: 10px 0; text-indent: 11em; background-image: url(../img/top/bar.jpg); background-repeat: no-repeat; font-size: 13px; }
#update a{ font-size: 13px;}

#footer{ width:100%; background-color:#FFF; }
#footer img{ margin: auto;}

.subcopy1{width:62%;}
.subcopy2{width:100%;}

/* ーーーーーーーーーーーーーーーーーーー各コンテンツページーーーーーーーーーーーーーーーーーーー*/
 
#tbox{background-image:url(../img/bg_paper.jpg); width:100%; margin:0 auto;  } 
#tbox .title{ width:100%; margin:2% auto 1% auto; }
#tbox ul.tboxLineup{ width:90%; margin-left:5%;color:#330; text-shadow:1px -1px 0px rgba(255,255,255,0.5);}
#tbox ul.tboxLineup li:nth-child(even){ margin-left:6%; margin-bottom:3%; color:#6C2B55;}
#tbox ul.tboxLineup li:nth-child(odd){background:url(../img/marker.png) left no-repeat; margin-bottom:1%;background-size:6%; text-indent:6%; font-size:120%;line-height:120%; font-weight:500;}

.heading{ margin:0 auto; width:40%; height:auto;}
.yoyakuLineup img{float:left; width:48%; margin-left:1%; margin-bottom:1%; }
.gallery .bnnUpdate{display:block; width:26px; height:26px; position:relative; margin:0 0 -28px 0; padding:0; z-index:999;}
#ss{display:none;}
.charadeza img{ display:block;width:22%;}

#leftSide,#rightSide{margin-top:2%; margin-bottom:2%; }
#leftSide {float:left; width:15%; margin-right:1%;}
#leftSide.chara {float:left; width:16.5%; margin-right:0.5%;}
#leftSide .chara, .story, .keyword ,.gallery ,interview{width:100%; height:auto; margin:0; padding:0;}
#leftSide.chara img{ display:block;width:100%; height:auto; margin:0; padding:0;}
#leftSide.gallery img.half{ display:block;width:50%;height:auto; float:left; margin:0; padding:0; cursor: pointer;}
#leftSide.chara .bnnUpdate{display:block; width:26px; height:26px; position:relative; margin:0 0 -28px 0; padding:0; z-index:999;}
#leftSide.story img{ display:block;width:100%; height:auto; margin:0; padding:0;}
#leftSide.chara a{ display:block;}
#leftSide.keyword img{ display:block;width:100%; height:auto; margin:0; padding:0;}
#leftSide.gallery img{ display:block;width:100%; height:auto; margin-bottom:5%; padding:0; cursor: pointer;}
#leftSide.gallery img.bnnUpdate,#rightSide.gallery img.bnnUpdate,#leftSide.story img.bnnUpdate,#leftSide.keyword img.bnnUpdate, #bnn .bnnUpdate{width:12%; height:auto; margin:0 0 -12% 0; padding:0}
#leftSide.gallery img:nth-last-child(n+2):hover{  opacity: 0.6;   filter: alpha(opacity=60);   -moz-opacity: 0.6;}

ul.ss { margin: 0 5%; width: 100%;}
ul.ss li { margin:0.5%; width:45%; color:#fff; text-align: left; float: left; overflow: hidden;}
ul.ss li img{width:100%;}
ul.ss:after { content: "."; height: 0; clear: both; display: block; visibility: hidden;}
ul.ss{ display: inline-block; overflow: hidden;}

#rightSide{ float: right; width: 76%; padding-right: 2%;}
#rightSide .chara{  }
#rightSide.chara .text{ /*margin:2%;*/ padding: 5%; text-align: left; line-height: 170%; color: #000; /*text-shadow:1px 1px #ccc;*/}
#rightSide.chara .text_r{ margin:2%; padding:1%; text-align:right; margin-left: 200px; line-height:150%; color:#000; /*text-shadow:1px 1px #ccc;*/}
#rightSide.chara .chara_btn{ height:2.2em; margin:2% 2% 2% 0; display:block; float:left;}
#rightSide.chara .text h3{ font-size:32px;}
#rightSide.chara .text h4{ font-size: 18px; color: #CC9900; padding-bottom:5px; border-bottom:dotted 1px #CC9900; margin-bottom:10px; padding-top:30px;}

.jp_container_1{ width:0;}
.jp-jplayer{display:block; float:left;width:30%; }

ul.bnn { margin: 0 auto; width: auto; text-align: left;}
ul.bnn li { margin:0.5%; color:#fff; text-align: left; float: left; display: none; overflow: hidden;}
ul.bnn:after { content: "."; height: 0; clear: both; display: block; visibility: hidden;}
ul.bnn{ display: inline-block; overflow: hidden;}

#production{ border: 1px solid; background-color: rgba(255, 255, 255, 0.6); border: 2px solid #c3ab00; width:80%; margin:auto; padding:3%; }
 
.section01{ padding: 30px; background-color: rgba(255, 255, 255, 0.5); text-align: left; border: solid 2px #cc6600; position: relative;} 
.section01 h2{ font-size:24px; padding-bottom:5px;}
.section01 h3{ font-size:18px; padding-bottom:15px;}
.section01 h4{ font-size: 15px; padding-bottom: 10px; color: #9F4328;}
.section01 h6{ font-size: 15px; padding-bottom: 5px; color: #9F4328;}
.section01 p{ font-size: 13px; padding-bottom: 25px; font-weight: normal; line-height: 1.5; }
.section01 .goods{ font-size: 13px; padding-bottom: 15px; font-weight: normal; line-height: 1.5; border-bottom: dotted 1px #555555; margin-bottom: 15px;}

.txt_s{ font-size:12px;}
.img_left{ padding: 0 30px; float: left; }
.date{ float:left }
.production{ text-align:center;}

/* ーーーーーーーーーーーーーーーーーーー#リストーーーーーーーーーーーーーーーーーーー */

.table { width: 100%; border-collapse: collapse; margin: 10px auto 0; padding: 10px;} 
.table th { text-align: left; padding: 5px; padding-right:10px;} 
.table td { padding: 5px; } 
tr.color1 { background-color: rgba(255, 255, 255, 0.8); border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px;} 
tr.color2 { background-color: rgba(255, 255, 255, 0.3);  border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px;}   

/* ーーーーーーーーーーーーーーーーーーーClearFixElementsーーーーーーーーーーーーーーーーーーー */

.bnn a{ cursor:default;}
.bnn a img:hover{ opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1;}

ul.playmov { margin: 0 5%; width: 100%;}
ul.playmov li { margin:0.5%; width:45%; color:#fff; text-align: left; float: left; overflow: hidden;}
ul.playmov li img.movbtn{width:100%;}
ul.playmov li img.movbtn2 { width:35.7%;}

.story{ width:100%; max-width:1000px; text-align:center; background-color: rgba(255, 255, 255, 0.5); border:solid 1px #DFAF19; margin-bottom: 40px;}
.story h2{ padding: 50px 0 30px 0;}
.story .visual img{ width:50%;}

.event ul{ list-style:none;}
.event li{ width:32%; float:left; padding:0.5%; position:relative;}
.event li img{ width:100%; border:solid 1px #600;}
.event li span{ position:absolute; top:5px; left:10px;}
.event li span img{ border:none;}

.event2 ul{ list-style:none;}
.event2 li{ width:49%; float:left; padding:0.5%; position:relative; }
.event2 li img{ width:100%; }
.event2 li span{ text-align:center; display:block; margin-top:10px;}

.system{ width: 100%; max-width: 1000px; text-align: center; background-color: rgba(255, 255, 255, 0.5); margin-bottom: 40px; border:solid 1px #DFAF19;}
.system h2{ padding: 50px 0 20px 0;}
.system h3{ padding: 0px 0 30px 0;}
.system .visual{}
.system .select{ border-bottom: solid 1px #630; padding-top: 2%; padding-bottom: 2%; position:relative;}
.feature a{ color:#FC0;}
.feature a:hover{ color:#F00;}

.system .music{ width: 92%; max-width: 750px; margin: 0 auto 20px; text-align: left; line-height: 1.5;}
.system .music a{ color: #F60; text-decoration: none;}
.system .music a:hover{ text-decoration:underline;}
.song .notice{ color:#eee; font-size:13px;}

.midokoro{ width: 100%; max-width: 948px; margin: 30px auto 0;}
.midokoro .midokoro_middle{ background-image:url(../img/story/frame2.png); background-repeat:repeat-y; background-size:contain;}
.midokoro .midokoro_middle h2{ padding:10px 0 40px 0;}




/* ーーーーーーーーーーーーーーーーーーーPC用ーーーーーーーーーーーーーーーーーーー*/
 
 
@media screen and (min-width: 640px) {
 
.img{width:auto;}
.pc{display:none;}
.sp{display:block;} 

#headerPC{width:100%; background-color:#FFF; display:none;}
#header{width:1000px; margin:0 auto; background-color:#FFF;}
#header #logo{width:910px; margin:0 auto;}
#header #sns{ margin:0 auto; float:right;}
#header #logo img{margin:3px;}
#header #sp-menu{ display:none;}

#wrapper{ width: 100%;height: auto; margin: 0 auto; /*background-image:url(../img/top/bg.jpg);*/ background-position: center; background-size: contain; background-repeat: no-repeat; max-width: 1000px;}
#contents{ width: 1000px; margin: 0 auto; padding: 0; /*background-color: blue;*/ }
#main{ height:auto;}

.topics{ position:relative; width:100%; border-bottom:2px solid #c3ab00; border-top:2px solid #c3ab00; background-color:rgba(254,250,226,0.8); background-image:url(../img/top/bar.jpg); line-height:2.5;}
.topics dt{ position: absolute; right: 10px; top: -7px;}
.topics dt ,.topics dd{}
.topics dt:hover{ cursor: pointer ; color: #777 ;}
.topics dt{}
.topics dd{ display: none; margin-left: 140px; font-weight:normal; font-size:13px;}
.topics a{ text-decoration:none; font-size:13px; }
.topics a:hover{ text-decoration:underline;}
.topics span{ margin-left: 140px; font-size:13px; }


#pc_main{ display: block; width: 1000px; height: 700px; overflow: hidden; position: relative;} 
#pc_main .anime1,
#pc_main .anime2,
#pc_main .anime3{ display:block; position:absolute; top:0; left:0; margin:0; opacity:1;}
#pc_main ul li.anime3{ width:1000px; opacity:1; margin-left:10px; margin-top:50px}
#pc_main ul li img:not(".bnnUpdate"){width:100%;}
#pc_main .visual{ display: block; top: 0; left: 0; margin: 0; opacity: 1;}
#pc_main .copy{ display:block; position:absolute;top:32px; left:754px; z-index:3000;}
#pc_main .logo{ display: block; position: absolute; top: 30px; left: 20px; z-index: 9;}
#pc_main .date{ display:block; position:absolute; top:492px; left:556px; z-index:3100;}
#pc_main .ps{ display:block; position:absolute; top:615px; left:712px; z-index:3100;}
#pc_main .tgs{ display:block; position:absolute; top:310px; left:30px; z-index:3200;}
#pc_main .niconama{ display: block; position: absolute; top: 520px; left: 30px; z-index: 10; width: 300px; height: 146px; background-image: url(../img/top/movie_smn.jpg);}
#pc_main .niconama img{ margin:3px 0 0 26px;}
#pc_main .niconama_up{ display: block; position: absolute; top: 500px; left: 260px; z-index: 11;}
#pc_main .box{ display: block; position: absolute; z-index: 10; left: 792px; top: 508px;}

.topics .change{
	display: block;
	position: absolute;
	z-index: 1;
	left: 30px;
	top: -263px;
}
.topics .change img{ width:180px; right:20px;}

.movie_s{ position:absolute; top:80%; left:3vw; width: 300px; z-index:20;}
#sp_main{display:none;}

.pc{display:block;}
.sp{display:none;}

#info{ width: 100%; padding-bottom: 0px;}
#info ul { list-style:none;}
#info li{width:33%; float:left; padding-right:5px; padding-top:10px;}
#info li.end{ padding-right:0;}
#info li img{margin:0%; width:100%; }

#info2{ width: 100%; padding-bottom: 40px;}
#info2 ul { list-style:none;}
#info2 li{width:33%; float:left; padding-right:5px; padding-top:10px;}
#info2 li.end{ padding-right:0;}
#info2 li img{margin:0%; width:100%; }

#movie_btn{display:block; background-image:url(../img/top_mov_sub.jpg); width:1000px; height:82px;}
ul#movie_btn li{margin:0; width:80px; height:59px;}
#movie_btn .mov1{ display:block; float:left; position:relative; left:358px; top:12px; z-index:3100;}
#movie_btn .mov2{ display:block; float:left; position:relative; left:358px; top:12px; z-index:3100;}
#movie_btn .mov3{ display:block; float:left; position:relative; left:358px; top:12px; z-index:3100;}
#movie_btn .mov4{ display:block; float:left; position:relative; left:358px; top:12px; z-index:3100;}
#movie_btn .mov5{ display:block; float:left; position:relative; left:358px; top:12px; z-index:3100;}
#movie_btn .mov6{ display:block; float:left; position:relative; left:358px; top:12px; z-index:3100;}
#movie_btn .mov7{ display:block; float:left; position:relative; left:358px; top:12px; z-index:3100;}
#movie_btn .mov8{ display:block; float:left; position:relative; left:358px; top:12px; z-index:3100;}

#menu{width:1000px; height:40px; background-image:url(../img/nav.png); background-position:bottom;}
#menu img{display:block}
#menu ul li img{display:none;}/*updateマーク隠す*/

#update a:hover{ text-decoration:none;}
#update ul li:nth-child(2),#update ul li:nth-child(2) a{font-size:13px; padding-top:0.3em; color:#663709; }
#update ul li:nth-child(2){padding-top:1.4em; margin-left:1em; }
#update-list{ max-width:100%; margin:0 auto; height:auto; color:#fff; z-index:9999; padding-left:1%; padding-right:0;}

#bnn{width:500px; margin-right:20px; /*float:left;*/ }
#bnn img{margin:0; padding:0;}
#timeline{ border: 1px solid; margin-bottom:20px; padding:30px; float:right; z-index: 9999; background-color: rgba(255, 255, 255, 0.8); border: 2px solid #c3ab00;}

#platform{ display:block; width:30%; margin:1em auto 1em 1em; float:left; }

#footer{ width: 100%; position: relative; padding-top: 20px; background-color: #FFF; border-top: solid 1px #ccc;}
#footer img{ margin: 0 auto; position: relative;}
#footer #sns{ text-align: center; padding: 30px 0 0; }
#footer #sns img{ margin:0 10px;}
#footer a{ font-size:12px; text-decoration:none;}
#footer a:hover{ text-decoration:underline;}

.flameLeft{ background:none; display:none;}
#pc_copy{ display:block; position:relative; width:55%; margin-top:3%; float:left; margin-left:2%;}
.movie { top:0; background-color:#FFF;width:40%; margin:0;}
.movie img { display:block; float:right;  width:100%; position:relative; z-index:10; margin-right:2%;}
.production #get{ width:100%; text-align:right; padding-top:20px;}

.section01 .goods .shopname a, .section01 .goods .shopname { font-size: 25px; padding-bottom: 10px; color: #9F4328; font-weight:bold; display:block;}
.section01 .goods .products{ float: right; right: 30px; margin-top: -50px;}
.section01 .notice{ font-size:12px; color:#666; float:right;}

#pagetop{ position: fixed;bottom: 0;right: 0; z-index:9999; margin:0; padding:0;}

.subcopy1{width:auto;}
.subcopy2{width:auto;}


/* ーーーーーーーーーーーーーーーーーーーPC　各コンテンツページーーーーーーーーーーーーーーーーーーー*/
 
#tbox{width:83%; margin:0 auto; } 
#tbox ul.tboxLineup{ width:80%; margin-left:10%;color:#330;}
#tbox ul.tboxLineup li:nth-child(even){ margin-left:6%; margin-bottom:3%;}
#tbox ul.tboxLineup li:nth-child(odd){background:url(../img/marker.png) left no-repeat; margin-bottom:1%;background-size:contain; text-indent:6%; font-size:140%; line-height:150%;}

rb{ font-size:140%;}
rp { display: none; }
rt { top: -1em; left: 0; font-size: 50%; line-height: 1em white-space: nowrap; text-indent: 0; }

#leftSide,#rightSide{margin-top:15px; margin-bottom:15px; }
#leftSide.chara { float:left; width:15%; margin-right:2%;   padding:20px; border: 1px solid; background-color: rgba(255, 255, 255, 0.8); border: 2px solid #c3ab00;}
#leftSide.chara a{  display:block; padding:0; background-image:none; margin-bottom:10px; }

.jp-jplayer{display:block; height:auto; float:left;width:30%;display:block; float:left; }

#rightSide.chara .text{ background-color: rgba(255,255,255,1); padding-bottom: 95px;}
#rightSide.chara .text_r{ min-width:520px; background-color:rgba(255,255,255,0.6); position:absolute; top:430px;}
#rightSide.chara .chara_btn{ width:auto; margin:5% 1px 0 1px; height:auto; float:left; }
#rightSide.chara .text2{ background-color: rgba(255,255,255,1); padding: 3%;}
#rightSide.chara .text .btns{ text-align:center; padding-top:20px;}

.story .past{ text-align: center; font-size: 18px; padding: 50px 0; line-height: 170%; font-weight: normal; width: 100%; background-image: url(../img/story/body_back_3.jpg); color: #FFF;}
.story .feature{ width:750px; margin:0 auto; text-align:left; line-height:1.5;}
.story .feature dt{ float:left; font-weight:bold; font-size:23px; color:#FFF;}
.story .feature dd{ margin-left:2.5em; font-weight:normal; padding-bottom:25px; color:#FFF;}

.system .feature{ width:750px; margin:0 auto 30px; text-align:left; line-height:1.5;}
.system ul{ list-style: none; margin-bottom: 40px;}
.system li{ width:32.5%; float:left; border:solid 1px #660033; background-color:#F9D25B; margin:0.3%; background-image:url(../system/bg.jpg); background-repeat:repeat-x;}
.system li .catch{ margin:20px auto; width:91%; text-align:left; line-height:1.5; font-weight:bold;}
.system li .spec{ margin:20px auto; width:91%; text-align:left; line-height:1.5}
.system .select img{ padding: 3px 6px;}
.system .visual .box{ float: left; width: 50%;}
.system .visual .box img{ width:90%;}
.system .visual span{ line-height:1.6;}
.system .visual img{ width: 46%; padding: 1%;}

.list{ float: left; width: 600px; margin-top: 50px;}
.card{ position: absolute; left: 588px; top: 76px;}
.clock{ position: absolute; left: 757px; top: -37px;}
.letter{position: absolute;left: 626px; top: 367px; z-index: 1000;}
.charm{ position: absolute; left: 645px; top: 52px;}

#rightSide.chara #charaMain img{ width:100%;}
#rightSide.chara #charaMain ul{ list-style:none;}
#rightSide.chara #charaMain li{ float: left; width: 25%; padding-bottom: 5px; position: relative;}
#rightSide.chara #charaMain li span{ position:absolute; right:2px; top:0px;}
#rightSide.chara #charaMain li span img{ width:30px;}
#rightSide.chara #charaMain li img{ width:98%;}

.charanavi{ position:relative;}
.charanavi span{ position:absolute; right:0; top:0;}

#chara_navi{ display:none;}
#chara_select{ display:none;}

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

.campaign { padding:0; text-align:center;}
.campaign h2{ font-size:36px; color:#68260E; letter-spacing: -1px; position:relative; top:-30px;}
.campaign h3{ background-color: #be0000; border-radius: 30px; text-align:center; font-size:25px; padding:10px; display:block; margin:0px auto 20px; text-shadow: 1px 1px 5px #000000; line-height:135%; color:#FFF; width:500px;}
.campaign p{ font-size: 16px; line-height: 1.6; font-weight: normal; padding-bottom: 25px;}
.campaign ul{ list-style:none; margin-top:15px;}
.campaign li{ float:left; width:16.6%;}
.campaign li img{ width:96%; padding:2%;}
.campaign .notice{ padding-top:10px; font-size:12px; color:#000; text-align:left; padding-bottom:30px;}
.campaign .btn{ width: 94%; display: block; border: solid 1px #A24F16; margin: 0 auto; margin-bottom: 60px; padding: 3%; text-align: left; background-image: url(../img/campaign/bg.png); line-height:1.6;}
.campaign .btn h4{ color: #771306; margin-bottom: 10px; font-size: 27px;}
.campaign .obi{ text-align:right; width:100%;}
.campaign .charaget{ font-size:24px; font-weight:bold; color:#68260E; padding-top:30px;}
.campaign .charaget span{ font-size:14px; font-weight:bold; color:#68260E; padding-top:15px; }

.fin{position:absolute; width:80%; max-width:440px; top:120px; left:30%; z-index:100;}

.song{ margin: 0px auto; width: 100%; background-image: url(../img/story/frame2.png); text-align: left;}
.song h3{ width: 100%; text-align: center; color: #FFF7BA; font-size: 34px; font-weight: bold; padding: 20px 0 20px; text-shadow:0px 0px 5px #600, 0px 0px 10px #600, 0px 0px 5px #600, 0px 0px 5px #600, 0px 0px 5px #600, 0px 0px 5px #600;}
.song .leftbox{ width: 45%; float: left; color: #FC0; line-height: 1.7; padding-left: 5%;}
.song .leftbox2{ width: 45%; float: left; color: #FC0; line-height: 1.7; border-right: dotted 1px #fc2; padding-left: 5%;}
.song .rightbox{ width:47%; float:right; color:#FC0; line-height:1.7; padding-right:2%;}
.song span{ color:#FFF}

.people{ margin: 0px auto 20px; width: 90%; padding: 1%; text-align: left;}
.people h3{ font-size:36px;}
.people .peopleleft{ float:left; width: 45%;}
.people .peopleright{ float:right; width: 50%; line-height:1.7;}

.system .select .s4{ position: absolute; left: 780px; top: 57px;}

.hall{ width:94%; margin:20px auto 0;}
.hall ul{ list-style:none;}
.hall li{ float:left; width:32.5%; text-align:center; background-image:none; border:none; background-color:transparent;}
.hall li img{ width:100%;}
.hall li span{ padding:10px 0; display:block;}

.event li .cap{ display:block; padding-top:5px; font-size:14px; line-height:1.3; font-weight:normal;}

.songlist{ color:#FC0; position:relative; width:95%; border-bottom: dotted 1px #fc2; margin-bottom:5px; padding-bottom:3px;}
}

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

body{ background-image:url(../img/top/body_back_2sp.jpg); background-size:auto; background-position:center top; background-repeat:repeat; background-attachment:fixed; background-color:#FFF;}

#story, #character{ width:100%;}
 
.pc{display:none;}
.sp{display:block;}
.smart{display:block;}
#pc_main{ display:none;}
#sp_main{ background-color:#FFF; position:relative;}
#sp_main #spbox{
position: absolute;
width: 35%;
right: 10px;
bottom: 26%;
}

#main{width:100%; height:auto;}

.topics{ position:relative; width:100%; border-bottom:2px solid #c3ab00; border-top:2px solid #c3ab00; background-color:rgba(254,250,226,0.8); background-image:url(../img/top/bar.jpg); line-height:1.3; background-position:right; padding:3px 0;}
.topics dt{ position: absolute; right: 10px; top: -7px; display:none;}
.topics dt ,.topics dd{}
.topics dt:hover{ cursor: pointer ; color: #777 ;}
.topics dt{}
.topics dd{ display: none; margin-left: 140px; font-weight:normal; font-size:13px;}
.topics a{ text-decoration:none; font-size:13px; margin-left: 5px; }
.topics a:hover{ text-decoration:underline;}
.topics span{ margin-left: 5px; font-size:13px; }
.topics .change{ display:none;}

#update {width:96%; margin:0 auto; margin-bottom:10px; background-position:right; text-indent: 0; background-image:none; padding-left:2%; padding-right:2%;}
#update ul li{ float:left; height:100%;}
#update ul li:nth-child(2),#update ul li:nth-child(2) a{ font-size:13px; padding-top:0.3em; color:#663709; }
#update a{ text-decoration:none;}
#update a:hover{ text-decoration:underline;}
#update ul li:nth-child(2){padding-top:1.4em; margin-left:1em; }

#info { width:100%; margin:0 auto; }
#info ul{ list-style:none; padding-bottom:20px;}
#info li{ float: left; width: 48%; padding: 1%;}
#info li img{ width:100%;}

#info2 { width:100%; margin:0 auto; }
#info2 ul{ list-style:none; padding-bottom:30px;}
#info2 li{ width: 98%; margin:0 auto 5px;}
#info2 li img{ width:100%;}

#bnn img{margin-top:5px; margin-bottom:5px;}

.text{ background-color:rgba(255,255,255,1); padding:3%; margin:0 auto; margin-top:0;}
.text2{ background-color:rgba(255,255,255,0.6); padding:3%;}

#rightSide{ float:right;  width:94%;  margin-right:1%;}
#rightSide.chara {}
#rightSide.chara .text .btns{ text-align:center; padding:10px 0;}

#leftSide.chara { float:left; width:20%; margin-right:1%; padding:1%; border: 1px solid; background-color: rgba(255, 255, 255, 0.8); border: 2px solid #c3ab00; display:none;}
#leftSide.chara a{ display:block; padding:0; margin-bottom:10px; }
#leftSide,#rightSide{margin-left:1%;}

#production{ border: 1px solid; background-color: rgba(255, 255, 255, 0.6); border: 2px solid #c3ab00; width:70%;  margin:auto; padding:5%;  }
.section01{ margin: 3%; padding: 15px; background-color: rgba(255, 255, 255, 0.5);  }
.txt_s{  font-size:12px;}
.img_left{ padding:10px; float:none; margin: auto; } 
.date{ float:none;  margin: auto;}
.btn{ width:100%; margin:0 auto; float:none;}
.spcopy{ width:100%;}

.section01 .goods .shopname, .section01 .goods .shopname a{ font-size: 19px; padding-bottom: 10px; color: #9F4328; font-weight:bold; display:block;}
.section01 .goods .products{ text-align:center;}
.section01 .goods .products img{ text-align:center; padding-bottom:10px;}
.section01 .notice{ font-size:12px; color:#666; padding:10px 0 20px;}

/* --------------------------------------------------------
#リスト
-------------------------------------------------------- */

.list{ float:none; margin:0 auto; width: 92%;}
.table { width: 100%; border-collapse: collapse; margin:0 auto; padding:10px;} 
.table th { text-align: left; padding: 5px; padding-right:10px;} 
.table td {  padding: 5px; } 

tr.color1 {  background-color: rgba(255, 255, 255, 0.8); border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px;} 
tr.color2 {  background-color: rgba(255, 255, 255, 0.3); border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px;}  

.story .past{ text-align: left; font-size: 16px; padding: 50px 3%; line-height: 170%; font-weight: normal; width: 94%; margin: 0 auto; background-image: url(../img/story/body_back_3.jpg); color: #FFF;}
.story .feature{ width:92%; margin:0 auto; text-align:left; line-height:1.5;}
.story .feature dt{ float:left; font-weight:bold; font-size:23px; color:#FFF;}
.story .feature dd{ margin-left:2.5em; font-weight:normal; padding-bottom:25px; color:#FFF; }

.system .feature{ width:92%; margin:0 auto 30px; text-align:left; line-height:1.5;}
.system .visual img{ width: 94%;}
.system ul{ list-style:none; margin-bottom:80px;}
.system li{ width:92%; border:solid 1px #660033; background-color:#F9D25B; margin:0 auto 20px; background-image:url(../system/bg.jpg); background-repeat:repeat-x;}
.system li img{ }
.system li .catch{ margin:20px auto; width:91%; text-align:left; line-height:1.5; font-weight:bold;}
.system li .spec{ margin:20px auto; width:91%; text-align:left; line-height:1.5}
.system .select img{ width: 46%; padding: 1% 2%;}
.system .select span img{ width:36px; display:block;}
.system .select span.s4{ bottom:14%; right:21%; position:absolute;}
.system .visual .box{ }
.system .visual .box img{ width:90%;}
.system .visual span{ line-height:1.6;}
.system .visual img{ width: 98%; padding: 1%;}

.clock{ display:none;}
.letter{ display:none;}
.charm{ display:none;}
.card{ display:none;}

#rightSide.chara #charaMain img{ width:100%;}
#rightSide.chara #charaMain ul{ list-style:none;}
#rightSide.chara #charaMain li{ float: left; width: 50%; padding-bottom: 5px; position: relative;}
#rightSide.chara #charaMain li span{ position:absolute; right:3px; top:0px;}
#rightSide.chara #charaMain li span img{ width:30px;}
#rightSide.chara #charaMain li img{ width:98%;}

#chara_navi{ padding-bottom:10px;}
#chara_navi img{ width:25%;}

#chara_select{ text-align:center;}
#chara_select img{ padding:10px;}
#chara_select img.btn_back{ padding:10px 0;}

#footer{ border-top: solid 1px #ccc;}
#footer a{ font-size:12px;}
#footer #sns{ text-align: center; padding-top:10px;}
#footer #sns img{ margin:10px 3px;}

.production #get{ display:none;}

.event li span{ position:absolute; top:2px; left:7px;}

#pagetop { bottom: 10px; right: 10px; position: fixed; z-index: 500;}
.hidesp{ display:none;} 

.campaign { padding:0; text-align:center;}
.campaign h2{ font-size:28px; color:#68260E; letter-spacing: -1px; position:relative; top:-15px;}
.campaign h3{ background-color: #be0000; border-radius: 30px; text-align:center; font-size:18px; padding:10px; display:block; margin:0px auto 20px; text-shadow: 1px 1px 5px #000000; line-height:135%; color:#FFF; width:92%;}
.campaign p{ font-size:16px; line-height:1.6; font-weight:normal; padding-bottom:15px; width:92%; margin:0 auto; text-align:left;}
.campaign ul{ list-style:none; margin-top:15px;}
.campaign li{ float:left; width:25%;}
.campaign li img{ width:96%; padding:2%;}
.campaign .notice{ padding-top:10px; font-size:12px; color:#000; text-align:left; padding-bottom:30px;}
.campaign .btn{ padding:30px 0 60px;}
.campaign .packs{ width:92%;}
.campaign .obi{ text-align:right; width:100%;}
.campaign .obi img{ width:60%;}
.campaign .btn{ width: 90%; display: block; border: solid 1px #A24F16; margin: 0 auto; margin-bottom: 60px; padding: 3%; text-align: left; background-image: url(../img/campaign/bg.png); line-height:1.5;}
.campaign .btn h4{ color: #771306; margin-bottom: 10px; font-size: 18px;}
.campaign .charaget{ font-size:21px; font-weight:bold; color:#68260E; padding-top:30px;}
.campaign .charaget span{ font-size:12px; font-weight:bold; color:#68260E; padding-top:15px; }

.fin{position:absolute; width:80%; max-width:440px; top:120px; left:10%;}

.song{ margin: 0px auto; width: 100%; background-image: url(../img/story/frame2.png); text-align: left; background-size:contain;}
.song h3{ width:100%; text-align:center; color:#FFF7BA; font-size:34px; font-weight:bold; padding:20px 0 10px; text-shadow:0px 0px 5px #600, 0px 0px 10px #600, 0px 0px 5px #600, 0px 0px 5px #600, 0px 0px 5px #600, 0px 0px 5px #600;}
.song .leftbox{ width: 85%; color: #FC0; line-height: 1.7; margin:0 auto;}
.song .leftbox2{ width: 85%; color: #FC0; line-height: 1.7; margin:0 auto;}
.song .rightbox{ width:85%; color:#FC0; line-height:1.7; margin:0 auto;}
.song span{ color:#FFF}

.people{ margin: 0px auto 20px; width: 92%; padding: 1%; text-align: left;}
.people h3{ font-size:36px; padding:20px 0 10px;}
.people .peopleleft{ width: 100%;}
.people .peopleleft img{ width:100%;}
.people .peopleright{ width: 100%; line-height:1.5;}

.hall{ width:98%; margin:20px auto 0;}
.hall ul{ list-style:none; margin-bottom:0;}
.hall li{ float:left; width:49%; text-align:center; background-image:none; border:none; background-color:transparent; padding:0.5%; margin:0;}
.hall li img{ width:100%;}
.hall li span{ padding:10px 0; display:block; font-size:13px;}

.event li .cap{ display:block; padding-top:5px; line-height:1.3; font-weight:normal; font-size:12px; line-height:1.1;}

.songlist{ color:#FC0; position:relative; width:100%; border-bottom: dotted 1px #fc2; margin-bottom:3px; padding-bottom:3px;}
}