@charset "UTF-8";
/* CSS Document */
footer {
	margin-top: 90px;
}
h2 {
	text-align: center;
	margin: 30px 0;
}
main {
	text-align: center;
	position: relative;
	z-index: 100;
}
h2 + .headingH3 {
	margin-top: -30px;
}
.center {
	text-align: center;
}
.marginB30{margin-bottom:30px;}

/*===============================
ストーリー
=================================*/
#story #bgR01, #story #bgR02, #story #bgL01, #story #bgL02 {
	display: none;
}
.charaStory {
	position: relative;
	padding-top: 30px;
	margin-top: -20px;
	background: url(../story/images/story_bg.png) repeat-x 0 0 scroll;
}
.sHeader {
	background: url(../story/images/header_bg.png) repeat center top scroll;
	height: 150px;
	background-size: 100% 100%;
	position: relative;
	z-index: 10;
	text-align: center;
	padding-top: 40px;
}
.sHeader img {
	margin-top: 10px;
}
.flowerLeft {
	position: absolute;
	left: -40px;
	top: 0px;
	z-index: 12;
}
.flowerRight {
	position: absolute;
	right: -40px;
	top: 280px;
	z-index: 12;
}
.sContents {
	margin-top: -100px;
	background: url(../story/images/contents_bg.jpg) repeat 0 0 scroll;
	background-size: cover;
	position: relative;
	height: 640px;
}
.bgDia {
	margin-top: -100px;
	background: url(../story/images/bg_dia.png) repeat 0 0 scroll;
	position: relative;
	height: 640px;
}
.bgDia02 {
	margin-top: -100px;
	background: url(../story/images/bg_dia02.png) repeat 0 0 scroll;
	position: relative;
	height: 640px;
}
.bgFlower {
	margin-top: -100px;
	background: url(../story/images/bg_flower.png) repeat 0 0 scroll;
	position: relative;
	height: 640px;
}
.bgFlower02 {
	position: absolute;
	top: 0px;
	background: url(../story/images/bg_flower02.png) repeat 0 0 scroll;
	width: 100%;
	height: 640px;
}
.storyText {
	position: absolute;
	left: 50%;
	margin-left: -500px;
	margin-top: 10px;
	background: url(../story/images/text_bg.png) no-repeat;
}
.charaPageBtn {
	position: absolute;
	left: 50%;
	margin-left: -92px;
	z-index: 500;
	margin-top: 460px;
}
.storyChara {
	position: absolute;
	left: 50%;
	margin-top: -70px;
	margin-left: -200px;
}
.storyCharaL {
	position: absolute;
	left: 50%;
	margin-top: -70px;
	margin-left: -700px;
}
.storyTextL {
	position: absolute;
	left: 50%;
	margin-left: -100px;
	margin-top: 10px;
	background: url(../story/images/text_bg.png) no-repeat;
}
#omake .storyCharaL {
	z-index: 10;
	margin-left: 220px;
}
#omake .storyTextL img {
	z-index: 200;
}
#omake .storyTextL {
	background: none;
	z-index: 999;
}
#omake .storyChara {
	z-index: 10;
	margin-left: -650px;
}
#omake .storyText img {
	z-index: 200;
}
#omake .storyText {
	background: none;
	margin-left: -540px;
	z-index: 999;
}
#omake .bg {
	background: url(../story/images/omake_bg.png) no-repeat;
	width: 900px;
	left: 50%;
	top: 80px;
	height: 522px;
	margin-left: -450px;
	position: absolute;
}
#story footer {
	margin-top: -50px;
}
#omake {
	overflow: hidden;
}
/*=======================================
■キャラクター
=======================================*/
#character .newMark {
	margin-left: -34px;
	top: -5px;
}
#charaBtn {
	background: url(../character/images/charabtn_bg.png) repeat-x;
	height: 88px;
	margin-bottom: 20px;
}
#charaBtn ul {
	font-size: 0;
	margin: 25px 0 5px 0px;
	text-align: center;
	position: relative;
	z-index: 1000;
}
#charaBtn ul li {
	font-size: 16px;
	padding: 0 2px;
	display: inline-block;
	position: relative;
}
#charaArea {
	height: 800px;
	position: relative;
}
#profArea {
	width: 745px;
	height: 625px;
	background: url(../character/images/prof_bg.png) no-repeat;
	float: left;
	text-align: center;
	margin-left: 50px;
	padding-top: 120px;
	position: relative;
}
#etc ul {
	font-size: 0;
	margin: 10px 0 5px 0px;
	text-align: center;
	position: relative;
	z-index: 200;
}
#etc ul li {
	font-size: 16px;
	display: inline-block;
}
#prof {
	margin-top: 20px;
}
#tachieSmall {
	position: absolute;
	top: 0px;
	left: -100px;
}
#movieArea {
	margin-top: -10px;
}
#character #movie {
	margin-left: 50px;
	width: 745px;
	margin-top: -120px;
	text-align: center;
	position: relative;
	z-index: 100;
}
#character #movie h3 {
	margin: 0;
}
#character #movie ul {
	font-size: 0;
	text-align: center;
}
#character #movie ul li {
	font-size: 16px;
	margin: 0 5px 0 5px;
	display: inline-block;
}
#tachieArea {
	position: relative;
}
#tachie {
	position: absolute;
	top: -20px;
	right: -50px;
	z-index: 1;
}
#character #word {
	position: absolute;
	z-index: 100;
	right: 10px;
	top: 50px;
}
#tachieSmallBg {
	position: absolute;
	left: -30px;
	top: 0px;
	-webkit-animation: spin 15s linear infinite;
	-moz-animation: spin 15s linear infinite;
	-ms-animation: spin 15s linear infinite;
	-o-animation: spin 15s linear infinite;
	animation: spin 15s linear infinite;
}
.chihiro #tachie {
	right: 0px;
}
.chihiro #tachieSmallBg {
	left: -0px;
}
.akari #tachieSmall {
	margin-left: -70px;
}
.maori #tachie {
	right: -150px;
}
.kotoe #tachie {
	right: -300px;
}
.yakumo #tachie {
	right: -100px;
}
.yakumo #movieArea, .maori #movieArea {
	height: 200px;
}
.sakuya #tachie {
	right: -200px;
}
.serika #tachie {
	top: -40px;
	right: -80px;
}
 @-webkit-keyframes spin {
 0% {
-webkit-transform: rotate(0deg);
}
 100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes spin {
 0% {
-moz-transform: rotate(0deg);
}
 100% {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes spin {
 0% {
-ms-transform: rotate(0deg);
}
 100% {
-ms-transform: rotate(360deg);
}
}
@-o-keyframes spin {
 0% {
-o-transform: rotate(0deg);
}
 100% {
-o-transform: rotate(360deg);
}
}
@keyframes spin {
 0% {
transform: rotate(0deg);
}
 100% {
transform: rotate(360deg);
}
}
/*=======================================
■ギャラリー
=======================================*/
#galleryList ul {
	font-size: 0;
	text-align: center;
	position: relative;
	z-index: 100;
}
#galleryList ul li {
	font-size: 16px;
	margin: 0 24px 20px 0;
	display: inline-block;
	position: relative;
}
#galleryList ul li:last-child {
	margin-right: 0;
}
/*===============================
■スペシャル
=================================*/
#special #topicsList ul {
	font-size: 0;
	margin-bottom: 30px;
	position: relative;
	z-index: 10;
}
#special #topicsList ul li {
	display: inline-block;
	width: 380px;
	height: 290px;
	margin: 0 30px 30px 0;
	position: relative;
}
#special #topicsList ul li:nth-child(3n) {
	margin-right: 0px;
}
#special #topicsList p {
	font-size: 14px;
	position: absolute;
	top: 200px;
	left: 20px;
	width: 340px;
	line-height: 1.3;
}
/*=======================================
■バナー
=======================================*/
.bannerList {
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 30px;
	border-collapse: separate;
	overflow: hidden;
}
.bannerList li {
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 30px;
	border-collapse: separate;
	overflow: hidden;
}
.bannerList img {
	border: 4px solid #FFF;
	box-shadow: rgba(254,179,194, 0.7) 0px 0px 2px 1px;
	-webkit-box-shadow: rgba(254,179,194, 0.7) 0px 0px 2px 1px;
	-moz-box-shadow: rgba(254,179,194, 0.7) 0px 0px 2px 1px;
	border-radius: 3px; /* CSS3草案 */
	-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
	-moz-border-radius: 3px; /* Firefox用 */
	vertical-align: bottom;
	margin-bottom: 5px;
}
.bannerList td {
	padding: 10px;
}
.bannerList textarea {
	border: 0;
	padding: 10px;
	font-size: 12px;
	border: 2px solid #FFF;
	box-shadow: rgba(254,179,194, 0.7) 0px 0px 2px 1px;
	-webkit-box-shadow: rgba(254,179,194, 0.7) 0px 0px 2px 1px;
	-moz-box-shadow: rgba(254,179,194, 0.7) 0px 0px 2px 1px;
	border-radius: 2px; /* CSS3草案 */
	-webkit-border-radius: 2px; /* Safari,Google Chrome用 */
	-moz-border-radius: 2px; /* Firefox用 */
	background-color: #FFF;
	color: #782B2B;
	width: 706px;
	height: 40px;
	display: block;
}
/*=======================================
■コラボ
=======================================*/
.collabo .bgBorder {
	margin-top: -100px;
	text-align: center;
}
.collabo .bgPink {
	margin-top: 90px;
	text-align: center;
	padding: 0;
}
.collabo h3 {
	margin: 0;
}
.bannerPalette {
	text-align: center;
	margin-top: 30px;
}
.collabo #sample{
	position:relative;
	z-index:100;}
.collabo #sample ul li {
	display:inline-block;
	margin:10px;
}
/*=======================================
■色紙
=======================================*/
.shikishi .main .inner{
	width:1400px;
	margin-top:-70px;}
	
.collabo .bgBorder {
	background-image:none;
	margin-top: -100px;
	text-align: center;
	border:none;
}
#shikishiList {
	position: relative;
	z-index: 30;
	margin: 0 auto;
	overflow: hidden;
	width:1050px;
	padding:40px 40px;
	
}
/*liの最後のmargin削除*/
#shikishiList  ul {
	margin-right: -10px;
}
#shikishiList  li {
	float: left;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 20px;
	position: relative;
	list-style-type:none;
}
#shikishiList  li .number{
	position:absolute;
	top:-20px;
	left:-20px;}
	
/*=======================================
■グラフィグ
=======================================*/
.graphig .mainImg{
	width:1400px;
	margin-left: -700px;
	position: relative;
	left: 50%;
	}
.graphig .howto{text-align:center;}
.graphig .howto ul{
	margin-top:30px;}
.graphig .howto li{
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 20px;
	position: relative;
	list-style-type:none;}
/*=======================================
■お礼ボイス
=======================================*/
.vote .mainImg{
	width:1400px;
	margin-left: -700px;
	position: relative;
	left: 50%;
	margin-top:-30px;
	}
.serial{margin-top:-40px;
position:relative;
top:-10px;}
.form {
	padding-top:10px;
	width: 540px;
	margin-right: auto;
	margin-left: auto;
	border-radius: 5px; /* CSS3草案 */
	-webkit-border-radius: 5px; /* Safari,Google Chrome用 */
	-moz-border-radius: 5px; /* Firefox用 */
	vertical-align: bottom;
	margin-top:-85px;
	margin-bottom:90px;
}
.text, textarea, .dropdown, .textarea {
	border: 1px solid #FF9AAB;
	padding: 8px;
	color: #000;
	background: #fff;
	border-radius: 15px;
	/* Webkit */
	-webkit-border-radius: 15px;
	-webkit-box-shadow: 1px 1px 1px #fff;
	/* Firefox */
	-moz-border-radius: 15px;
	-moz-box-shadow: 1px 1px 1px #fff;
	
}
.mailbtn {
	border: 1px solid #FF9AAB;
	color: #842C27;
	cursor: pointer;
	font-weight: bold;
	font-size: 14px;
	border-radius: 15px;
	/* Webkit */
	-webkit-border-radius: 15px;
	-webkit-box-shadow: 1px 1px 1px #fff;
	/* Firefox */
	-moz-border-radius: 5px;
	-moz-box-shadow: 1px 1px 1px #fff;
	background-color: #FFF;
	padding-top: 6px;
	padding-right: 20px;
	padding-bottom: 6px;
	padding-left: 20px;
}
.vote .tableList{margin-top:30px;}
.vote .tableList tr{
	background-color: #FFF;}
.vote .tableList td{
	padding:20px 0;}
.vote .tableList tr:not(:first-child):hover{
	background-color: #FFF;
}
.vote .votevoice{
	position:relative;
	text-align:center;
	width:1080px;
	height:300px;}
.sound{position:absolute;
	top:200px;
	left:265px;}
/*=======================================
■予約
=======================================*/
.yoyaku main {
	text-align: center;
	z-index: 1;
}
.yoyaku #main {
	position: absolute;
}
.yoyaku #title {
	margin-top: -550px;
}
.bigimg {
	width: 1920px;
	margin-left: -960px;
	position: relative;
	left: 50%;
	margin-top: -40px;
}
#diary {
	position: relative;
	width: 1080px;
	margin: -20px auto 80px auto;
}
#trackList h3 {
	margin-top: -80px;
}
#trackListBtn {
	position: absolute;
	top: 430px;
	left: 460px;
	z-index: 100;
}
#trackList {
	padding: 20px 20px 0px 0;
	text-align: center;
}
#trackList div {
	position: relative;
	left: 50%;
	margin-left: -750px;
	width: 1500px;
}
#trackList img {
	vertical-align: bottom;
}
/*=======================================
■ショップ
=======================================*/
.shopArea {
	position: relative;
	z-index: 10;
}
.shopPanel {
	position: relative;
	z-index: 10;
	margin-bottom: 30px;
}
.shopBtn {
	position: absolute;
	right: 140px;
	top: 352px;
}
.shopBtns {
	position: absolute;
	right: 140px;
	top: 364px;
}
.shopBtnSet {
	position: absolute;
	right: 140px;
	top: 383px;
}
.shop02Area{
	width:1000px;
	text-align:center;
	margin:0 auto;
	overflow:hidden;}

.shop02{float:left;
margin:0px 20px 0px 0px;}
.shop02:nth-child(2n){
margin:0px;}
.shop02 .shopBtn {
	position: absolute;
	left: 50px;
	top: 370px;
	width:160px;
}
.shop02 .shopBtnSet {
	position: absolute;
	left: 220px;
	top: 370px;
}
/*=======================================
■ムービー
=======================================*/
#movie .textList {
	width: 900px;
	margin: 0 auto;
}
#movie .textList dt {
	width: 190px;
}
#movie iframe {
	width: 1000px;
	margin: 0px auto 20px auto;
	display: block;
}
.songTitle{margin-bottom:20px;}
/*=======================================
■スペック
=======================================*/
#spec #information {
	margin-bottom: 50px;
	margin-top: -30px;
}
#spec .textList {
	width: 900px;
	margin: 0 auto;
}
#spec .textList dt {
	width: 190px;
}
#spec .textList dd {
	padding: 9px 0 7px 210px;
}
#spec h3 {
	margin-bottom: 10px;
}
#spec #product h3 {
	margin-top: -30px;
}
#spec .section {
	margin-bottom: 40px;
}