@charset "UTF-8";


/* ================================================================================
	common
================================================================================ */

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	color: #333;
	background: #fff;
	width: 100%;
	}

.contWrap {
	width: 960px;
	height: auto;
	margin: 0 auto;
	}

.webfont {
	font-family: 'Raleway Dots', cursive;
	font-size: 16px;
	}

.blueback {background: #3498db;}

.grayback {background: #ecf0f1;}

.areaTitle {
	font-size: 250%;
	color: #fff;
	padding: 5px 5px 5px 15px;
	}

/*================================= mobile ====================================== */

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

	body {
		width: 980px;
		margin: 0 auto;
		}
	}


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

	body {
		width: 100%;
		}

	img{
		max-width: 100%;
		height: auto;
		width /***/:auto;　
		}

	.contWrap {
		width: 100%;
		margin: 0 auto;
		overflow:  hidden;
		}

	.webfont {
		font-family: 'Sintony', sans-serif;
		font-size: 16px;
		}

	.areaTitle {
		width: 97.5%;
		font-size: 200%;
		color: #fff;
		padding: 0 0 10px 2.5%;
		}

	}


/* ================================================================================
	header
================================================================================ */

header {width: 100%;}

div#headerLine {padding: 4px 0;}

div#headerLine h1 {
	font-size: 80%;
	line-height: 22px;
	color: #fff;
	float: left;	
	}

ul#socialBox {float: right;}

ul#socialBox li {float: left;}

ul#socialBox li:nth-child(2) {margin: 0 10px;}


/***********************************************************************************
			mobile
***********************************************************************************/

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

	div#headerLine {
		width: 100%;
		background: #000;
		padding: 1% 0;
		}

	div#headerLine h1 {
		font-size: 65%;
		color: #fff;
		margin-left: 1%;
		}

	ul#socialBox li:nth-child(-n+2) {display: none;}

	ul#socialBox li a {margin: 2px 2px 0 0;}

	ul#socialBox li a img {
		width: 79px;
		height: 18px;
		margin: 2px 2px 0 0;
		}

	}


/* ================================================================================
	keyVisual
================================================================================ */

section#keyVisual {
	background: url(../images/backimage.jpg) repeat-x left top;
	-webkit-animation-duration: 120s; /* fot webkit/blink */
	-webkit-animation-name: bk_move;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	animation-duration: 120s;
	animation-name: bk_move;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	}

@-webkit-keyframes bk_move {
	0%{background-position: right;}
	100%{background-position: -8000px;}
	}

@keyframes bk_move {
	0%{background-position: right;}
	100%{background-position: -8000px;}
	}

div#key_inner {
	height: 550px;
	background: url(../images/keyvisual.png) no-repeat top center;
	position: relative;
	}

h1#logo {
	position: absolute;
	top: 20px;
	left: 0px;
	}

h1#logo img {
	width: 67%;
	height: auto;
	}

/*================================= gNav ====================================== */


nav#gNav {
	position: absolute;
	top: 30px;
	right: 0px;
	}

nav#gNav ul li {float: left;}

nav#gNav ul li a {
	text-align: center;
	font-size: 100%;
	display: block;
	color: #fff;
	padding: 20px 15px 20px 15px;
	-webkit-transition: 0.3s ease-in-out;  
       -moz-transition: 0.3s ease-in-out;  
         -o-transition: 0.3s ease-in-out;  
            transition: 0.3s ease-in-out; 
	}

nav#gNav  ul li a:hover {background: #3498db;}

nav#gNav  ul li a:active {background: #34495e;}

nav#gNav ul li a span {font-size: 60%;}


/*---------------- ボタンを消す ----------------*/
nav#gNav ul li#btn_story {display: none;}
nav#gNav ul li#btn_dist {display: none;}
nav#gNav ul li#btn_top {display: none;}
/*------------------*--------------------------/

/* ---------- ラジオボタンを消す ---------------*/
#gNav input{display: none;}

/*================================= storyimg ====================================== */

h3#storyimg {
	position: absolute;
	bottom: 70px;
	left: 0px;
	-webkit-animation-duration: 5s; /* fot webkit/blink */
	-webkit-animation-name: fadeInLeft;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0;
	-webkit-animation-iteration-count: 1;

	animation-duration: 5s;
	animation-name: fadeInLeft;
	animation-timing-function: linear;
	animation-delay: 0;
	animation-iteration-count: 1;
	}

@-webkit-keyframes fadeInLeft {
	0%{opacity:0;-webkit-transform:translateX(-20px);}
	100%{opacity:1;-webkit-transform:translateX(0);}
	}

@keyframes fadeInLeft {
	0%{opacity:0;transform:translateX(-20px);}
	100%{opacity:1;transform:translateX(0);}
	}


/***********************************************************************************
			mobile
***********************************************************************************/


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

	section#keyVisual {background-size: auto 100%;}

	div#key_inner {
		width: 100%;
		background: url(../images/keyvisual_m.png) no-repeat top center;
		background-size: auto 100%;
		position: relative;
		}

	h1#logo {
		width: 100%;
		text-align: center;
		position: absolute;
		top: 200px;
		left: 0px;
		}

	h1#logo img {
		width: 80%;
		height: auto;
		}

	h3#storyimg {display: none;}

/*================================= gNav ====================================== */

	nav#gNav ul li {float: none;}

	nav#gNav ul li a {
		text-align: center;
		font-size: 90%;
		display: block;
		color: #fff;
		padding: 15px;
		}

	nav#gNav ul li a span {
		font-size: 80%;
		font-weight: bold;
		}

	nav#gNav ul li#btn_story {display: block;}

	nav#gNav ul li#btn_dist {display: block;}

	nav#gNav ul li#btn_top {display: block;}

	nav#gNav ul li#btn_gallery {display: none;}

	/* 初期値はオープンボタンはblock、クローズボタンはnone */
	#button_open {display: block;}

	#button_close {display: none;}

	/* 開閉ボタン */
	#button_open,#button_close {
		position: fixed;
		top: 50px;
		right: 10px;
		width: 50px;
		height: 50px;
		text-align: right;
		cursor: pointer;
		z-index: 9999;
		}
	/****************************************
		ボタンのスタイル ここから
	****************************************/
	#button_open span,
	#button_close span {
	    margin: 0 auto;
	    width: 50px;
	    height: 50px;
	    display: inline-block;
	    position: relative;
	    background: url(../images/menu.gif) no-repeat #3498db;
	    border-radius: 50px;
    	-webkit-border-radius: 50px;
    	-moz-border-radius: 50px;
    	-o-border-radius: 50px;
    	-ms-border-radius: 50px;

		}

	#button_close span {background: #34495e;}

	/* 擬似要素で横線を描写（border-top） */
	#button_open span:after,
	#button_close span:after {
	    content: "";
	    position: absolute;
	    top: 23px;
	    left: 13px;
	    width: 25px;
	    border-top: 4px solid #FFFFFF;
		}
	/* オープンボタンはbox-shadowを上下に描写して3本線に */
	#button_open span:after {box-shadow: 0 10px 0 #FFFFFF, 0 -10px 0 #FFFFFF;}


	/************************************************
		メニューのスタイル ここから
	*************************************************/
	#menu {
	    margin: 0;
	    padding: 0;
	    width: 0; /* 初期値は横幅が0で見えない状態 */
	    position: fixed;
	    top: 5%;
	    left: 0px;
	    color: #FFFFFF;
	    z-index: 99999;
	    overflow: hidden;
	    /* 表示するときにアニメーションさせる */
	    -webkit-transition: all ease-in-out;
	    -webkit-transition-delay: 0.5s;
	    -moz-transition: all ease-in-out 0.5s;
	    -o-transition: all ease-in-out 0.5s;
	    transition: all ease-in-out 0.5s;
		}
	#menu ul {
	    margin: 0;
	    padding: 0;
	    color: #FFFFFF;
	    border-top: #CACACA;
		}
	#menu li {
	    overflow: hidden;
	    width: 100%;
	    border-bottom: 1px solid #fff;
		}
	#menu li a {
	    margin: 0;
	    overflow: hidden;
	    display: block;
	    background: #000;
	    color: #FFFFFF;
	    opacity: 0.8;
		}
	#menu li a:hover { background: #454545;}
	#menu li a:active { background: #34495e;}

	/***************************************************
			オープンボタンにチェック時の処理 ここから
	***************************************************/
	/* オープンボタンを非表示 */
	#open:checked ~ #button_open {display: none;}
	/* クローズボタンを表示 */
	#open:checked ~ #button_close {display: inline;}
	/* メニューを表示（横幅をつける） */
	#open:checked ~ #menu {width: 50%;}

	}


/* ================================================================================
		CONTENTS
================================================================================ */


/*================================= #topicsArea ====================================== */

div#topicsArea {
	background: #3498db;
	width: 30%;
	border-left: solid 2px #fff;
	border-right: solid 2px #fff;
	float: left;
	}

div#topicsArea h2 {border-bottom: solid 1px #fff;}

div#topicsArea ul {
	width: 100%;
	height: 220px;
	padding-bottom: 10px;
	overflow: hidden;
	}

div#topicsArea ul li {width: 100%;}

div#topicsArea ul li a {
	display: block;
	width: 95%;
	padding: 20px 5%;
	font-size: 80%;
	line-height: 150%;
	color: #fff;
	border-bottom: dotted 1px #fff;
	}

div#topicsArea ul li a:hover {background: #34495e;}
div#topicsArea ul li a:active {background: #34495e;}


/*================================= #distriArea ====================================== */

div#distriArea {
	width: 69.5%;
	float: left;
	}

div#distriArea ul {width: 100%;}

div#distriArea ul li {
	width: 33.33%;
	float: left;
	}

div#distriArea ul li a {
	display: block;
	width: 100%;
	}

div#distriArea ul li#podcast a:hover {background: #b161f7;}
div#distriArea ul li#nico a:hover {background: #444444;}
div#distriArea ul li#youtube a:hover {background: #e64b42;}
div#distriArea ul li#podcast a:active {background: #b161f7;}
div#distriArea ul li#nico a:active {background: #444444;}
div#distriArea ul li#youtube a:active {background: #e64b42;}



/***********************************************************************************
			mobile
***********************************************************************************/

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

	div#topicsArea {
		float: none;
		width: 100%;
		border: none;
		padding: 20px 0;
		}

	div#topicsArea ul {height: 150px;}

	div#topicsArea ul li a {
		display: block;
		width: 95%;
		font-size: 90%;
		line-height: 150%;
		color: #fff;
		border-bottom: dotted 1px #fff;
		}

/*================================= #distriArea ====================================== */

	div#distriArea {
		width: 100%;
		float: none;
		background: #fff;
		padding: 20px 0;
		}

	div#distriArea h2 {color: #333;}

	div#distriArea ul {display: block;}

	div#distriArea ul li {width: 33%;}

	div#distriArea ul li#nico {margin: 0 0.5%;}

	div#distriArea ul li a {
		display: block;
		width: 100%;
		}

	div#distriArea ul li a img {
		width: 100%;
		height: auto;
		}

	div#distriArea ul li#podcast a {background: #b161f7;}
	div#distriArea ul li#nico a {background: #444444;}
	div#distriArea ul li#youtube a {background: #e64b42;}

	}


/*================================= #story ====================================== */

div#story {
	display: none;
	}


/***********************************************************************************
			mobile
***********************************************************************************/

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

	div#story {
		display: block;
		width: 100%;
		background: url(../images/story_bg.gif) no-repeat top center;
		padding: 20px 0;
		}

	div#story h3 img {
		width: 100%;
		height: auto;
		}

	}


/*================================= #claracters ====================================== */

div#claracters h2 {color: #333;}

div#claracters ul {padding-bottom: 20px;}

div#claracters ul li {
	width: 33%;
	float: left;
	text-align: center;
	}

div#claracters ul li a img{
	width: 65%;
	border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border: solid 10px #fff;
	}

div#claracters ul li article img {width: 100%;}

div#claracters ul li article {
	width: 100%;
	font-size: 100%;
	line-height: 1.5;
	}

div#claracters ul li a:hover img{border: solid 10px #3498db;}

div#claracters ul li a:active img{border: solid 10px #3498db;}


/***********************************************************************************
			mobile
***********************************************************************************/


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

	div#claracters {padding: 20px 0;}

	div#claracters ul {
		display: block;
		padding-bottom: 20px;
		}

	div#claracters ul li {
		width: 100%;
		text-align: center;
		margin-bottom: 30px;
		}

	div#claracters ul li a {pointer-events:none;}

	div#claracters ul li a img {width: 50%;}

	div#claracters ul li article img {width: 80%;}

	}


/*================================= #themesong ====================================== */

div#themesong {
	width: 100%;
	padding: 10px 0 30px 0;
	}

div#themesong dl dt {color: #333;}

div#themesong dl dd {width: 50%;}

div#themesong dl dd#song_one {float: left;}

div#themesong dl dd#song_two {
	float: left;
	text-align: right;
	}

dd.mobileLink {display: none;}


/***********************************************************************************
			mobile
***********************************************************************************/


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

	div#themesong {padding: 20px 0px;}

	div#themesong dl dt {color: #333;}

	div#themesong dl dd {
		margin-bottom: 30px;
		width: 100%;
		}

	div#themesong dl dd img {width: 100%;}

	div#themesong dl dd#song_one {display: none;}

	div#themesong dl dd#song_two {display: none;}

	dd.mobileLink {display: block;}

	dd.mobileLink span {
		display: block;
		background: #333;
		color: #fff;
		font-size: 90%;
		text-align: center;
		line-height: 1.2;
		padding: 3px;
		}

	}


/*================================= #staffArea ====================================== */

div#staffArea {
	padding: 30px 0px;
	font-size: 95%;
	}

div#staffArea figure {
	width: 33%;
	float: left;
	}

div#staffArea figure figcaption {
	width: 100%;
	font-size: 330%;
	color: #fff;
	padding: 10px 0;
	text-align: left;
	margin: 0 0 10px 0;
	}

div#staffArea figure ul {
	width: 78%;
	margin: 0 auto;
	}

div#staffArea figure ul li {
	width: 100%;
	text-align: left;
	color: #fff;
	line-height: 1.5;
	padding: 0;
	margin-bottom: 10px;
	}

.inspace {
	display: block;
	width: 100%;
	text-indent: 10%;
	}

div#staffArea hr {display: none;}


/***********************************************************************************
			mobile
***********************************************************************************/


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


	div#staffArea {
		width: 100%;
		padding: 20px 0;
		}

	div#staffArea figure {
		width: 100%;
		margin-bottom: 20px;
		}

	div#staffArea figure figcaption {
		font-size: 400%;
		margin-bottom: 10px;
		text-align: center;
		}

	div#staffArea figure ul {width: 100%;}

	div#staffArea figure ul li {text-align: center;}

	.inspace {
		display: block;
		width: 100%;
		text-indent: 0%;
		}

	div#staffArea hr {
		display: block;
		background: #fff;
		}

	}


/*================================= #gallery ====================================== */

div#gallery {padding: 30px 0 50px 0;}

div#gallery h2 {
	color: #333;
	margin-bottom: 30px;
	}

div#gallery ul li {
	float: left;
	margin-left: 10px;
	}

div#gallery ul li a {display: block;}

div#gallery ul li a:hover {
	-webkit-transform: scale(1.1);
	-webkit-box-shadow: 0px 0px 20px #3498db;
	}


/***********************************************************************************
			mobile
***********************************************************************************/


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

	div#gallery {display: none;}
	}


/*================================= #facebookArea ====================================== */

div#facebookArea {padding: 30px 0;}


/***********************************************************************************
			mobile
***********************************************************************************/


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

	div#facebookArea {
		width: 90%;
		height: 300px;
		z-index: 1;
		padding: 30px 0;
		}

	.fbcomments,
	.fb_iframe_widget,
	.fb_iframe_widget[style],
	.fb_iframe_widget iframe[style],
	.fbcomments iframe[style],
	.fb_iframe_widget span{
	    width: 90% !important;
	    height: 300px;
		}
	}



/* ================================================================================
		footer
================================================================================ */

footer {background: #2e2e2e;}

div#footerInner {
	padding: 40px 0;
	position: relative;
	}

div#ban_prd_Area {
	width: 63%;
	float: left; 
	}

div#ban_prd_Area dl#bannerArea {margin-bottom: 25px;}

div#ban_prd_Area dl#bannerArea dd {margin-bottom: 10px;}

div#ban_prd_Area dl#bannerArea dt {
	font-size: 85%;
	color: #fff;
	line-height: 1.5;
	}

div#ban_prd_Area h2 {
	color: #fff;
	font-size: 250%;
	margin-bottom: 10px;
	}

ul#productArea li {
	width: 25%;
	position:relative;
	float: left; 
	}

ul#productArea li a img {
	border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border: solid 3px #2e2e2e;
	}

ul#productArea li a:hover img {border: solid 3px #3498db;}

ul#productArea li a:active img {border: solid 3px #3498db;}

ul#productArea li span{
	color:#FFF;
	font-size: 85%;
	padding: 10px;
	width: 130%;
	text-align: center;
	opacity:0.9;
	background-color:#3498db;
	position:absolute;
	top:120px;
	right:-30px;	
	display:none;
	z-index:999;
	}

ul#productArea li span:after{
	position: absolute; 
	top: -10px; 
	left: 70px;
	content: ""; 
	width: 0;
	height: 0;
	border-bottom: 10px solid #3498db;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	opacity:0.9;
	}

div#twitterArea {
	width: 300px;
	height: 290px;
	padding: 50px 1% 10px 1%;
	background: url(../images/bar_tw.gif) no-repeat left top #333333;
	border: 10px solid #3498db;
	border-radius: 20px;
	-webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    -ms-border-radius: 20px;
    float: left; 
	}

footer p#copyright {
	background: #232323;
	color: #fff;
	font-size: 90%;
	padding: 10px;
	text-align: center;
	}

div#toTop {
	position: absolute;
	top: -50px;
	right: 0;
	}

div#toTop a {
	display: block;
	width: 57px;
	height: 50px;
	padding: 10px 10px 15px 10px;
	background: #333;
	text-align: center;
	border-radius: 20px;
	-webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    -ms-border-radius: 20px;
    opacity: 0.2;
	}

div#toTop a:hover {
	opacity: 1;
	background: #3498db;
	}

div#toTop a:active {
	opacity: 1;
	background: #3498db;
	}


/***********************************************************************************
			mobile
***********************************************************************************/


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

	div#footerInner {
		display: block;
		padding: 20px 0;
		}

	div#ban_prd_Area {
		width: 100%;
		margin-bottom: 40px;
		}

	div#ban_prd_Area h2 {
		font-size: 200%;
		padding: 10px 0 0 2.5%;
		margin-bottom: 20px;
		}

	div#ban_prd_Area dl#bannerArea {display: none;}

	ul#productArea {width: 100%;}

	ul#productArea li a img {border: none;}
	ul#productArea li a:hover img {border: none;}

	div#twitterArea {
		float: none;
		clear: both;
		width: 90%;
		background-size: 100%;
		padding: 60px 0 10px 0;
		margin: 0 auto;
		border: none;
		border-radius: 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		-o-border-radius: 0;
		-ms-border-radius: 0;
		}

	div#twitterArea iframe {max-width: 100%;}

	ul#productArea li {
		width: 25%;
		text-align: center;
		}

	ul#productArea li a img {
		width: 90%;
		height: auto;
		}

	ul#productArea li span{visibility: hidden;}

	div#toTop {display: none;}

	footer p#copyright {
		color: #fff;
		font-size: 70%;
		padding: 10px 3px;
		line-height: 1.5;
		}

	}