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

初期設定

***************************************************/
/*スマホスクロール対策*/
* {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
/*-------------------------------------*/
/* マージン、パディングの調整 */
/*-------------------------------------*/
.mb0{ margin-bottom:  0px; display: block;}
.mb5{ margin-bottom:  5px; display: block;}
.mb10{margin-bottom: 10px; display: block;}
.mb15{margin-bottom: 15px; display: block;}
.mb20{margin-bottom: 20px; display: block;}
.mb30{margin-bottom: 30px; display: block;}
.mb40{margin-bottom: 40px; display: block;}
.mb50{margin-bottom: 50px; display: block;}
.mb60{margin-bottom: 60px; display: block;}

.mt0{ margin-top: 0px; display: block;}
.mt5{ margin-top: 5px; display: block;}
.mt10{margin-top: 10px; display: block;}
.mt15{margin-top: 15px; display: block;}
.mt20{margin-top: 20px; display: block;}
.mt30{margin-top: 30px; display: block;}
.mt40{margin-top: 40px; display: block;}
.mt50{margin-top: 50px; display: block;}
.mt60{margin-top: 60px; display: block;}

.ml0{ margin-left: 0px; display: block;}
.ml5{ margin-left: 5px; display: block;}
.ml10{margin-left: 10px; display: block;}
.ml15{margin-left: 15px; display: block;}
.ml20{margin-left: 20px; display: block;}
.ml30{margin-left: 30px; display: block;}
.ml40{margin-left: 40px; display: block;}
.ml50{margin-left: 50px; display: block;}
.ml60{margin-left: 60px; display: block;}
.ml70{margin-left: 70px; display: block;}

.mr0{ margin-right: 0px; display: block;}
.mr5{ margin-right: 5px;  display: block;}
.mr10{margin-right: 10px; display: block;}
.mr15{margin-right: 15px; display: block;}
.mr20{margin-right: 20px; display: block;}
.mr30{margin-right: 30px; display: block;}
.mr40{margin-right: 40px; display: block;}
.mr50{margin-right: 50px; display: block;}
.mr60{margin-right: 60px; display: block;}
.mr70{margin-right: 70px; display: block;}

.pb5{ padding-bottom: 5px;  display: block;}
.pb10{padding-bottom: 10px; display: block;}
.pb15{padding-bottom: 15px; display: block;}
.pb20{padding-bottom: 20px; display: block;}
.pb30{padding-bottom: 30px; display: block;}

.pt5{padding-top: 5px; display: block;}
.pt10{padding-top: 10px; display: block;}
.pt15{padding-top: 15px; display: block;}
.pt20{padding-top: 20px; display: block;}
.pt30{padding-top: 30px; display: block;}
.pt40{padding-top: 40px; display: block;}
.pt50{padding-top: 50px; display: block;}



.pr5{padding-right: 5px; display: block;}
.pr10{padding-right: 10px; display: block;}
.pr15{padding-right: 15px; display: block;}
.pr20{padding-right: 20px; display: block;}
.pr30{padding-right: 30px; display: block;}

.pl5{padding-left: 5px; display: block;}
.pl10{padding-left: 10px; display: block;}
.pl20{padding-left: 20px; display: block;}
.pl30{padding-left: 30px; display: block;}
.pl40{padding-left: 40px; display: block;}
.pl50{padding-left: 50px; display: block;}
.pl60{padding-left: 60px; display: block;}

span.main_color {
	color: #e73660;
	font-weight: 700;
}
/*-------------------------------------*/
/* コンテンツを左に右に振り分ける */
/*-------------------------------------*/
/* float */
.l {
	float: left;
	display: block;
}
.r {
	float: right;
	display: block;
}
/*text*/
.t_l {
	text-align: left;
}
.t_r {
	text-align: right;
}
.t_c {
	text-align: center;
}
/* Micro clearfix */
.cf { zoom: 1;
overflow:hidden;}
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }

/*font-sizeのため絶対的サイズremのため 10remが10px*/
html {
  font-size: 62.5%;
  
}
body {
 width: 100%;
 margin: 0;
 padding: 0;
 color:#222;
 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
a {
  text-decoration:none;
  color: #fff;
}
a:hover {
	text-decoration: underline;
}
a:after {
  text-decoration:none;
  color: #1b7fcc;
}
article.main {
	background: #fefff4;
}

article.main a {
  text-decoration:none;
  color: #0000ff;
}
article.main a:hover {
	text-decoration: underline;
}
article.main a:after {
  text-decoration:none;
  color: #1b7fcc;
}
/* ボタンロールオーバー */
a:hover img{
	opacity:0.8;
	filter: alpha(opacity=60);
}
h1, h2, h3, h4, h5, h6 {
 margin: 0;
 line-height: 1.1;
 letter-spacing:-1px;
}
p {
 margin: 0 0 1em;
 color: #444;
 font-size: 20px;
 font-size: 2.0rem;
 line-height: 1.4;
 text-align: left;
}
ul {
 margin: 0 0 2em;
 padding: 0;
 list-style-position: inside;
}
li {
	list-style: none;
}
/************************************************** 

Responsive Image

***************************************************/
img.scale, img.responsive {
	max-width: 100%;
	height: auto;
}

/*************************************************

ベースレイアウト

**************************************************/
#wrapper {
	width: 100%;
}

nav {
	background-color: #436cb3;
}
#common-contents {
 width: 88%;
 margin: 2em auto 1em;
}
article.main {
 width: 100%;
}
section {
 margin: 0 0 2em; 
}
aside.side {
 width: 100%; 
}
footer {
 width: 100%;
 text-align: center;
 background: #436cb3;
 color: #fff;
 padding: 5px;
}
footer a {
 color: #fff;
}

/*************************************************

各要素のデザイン、レイアウト

**************************************************/
h1#logo{
	text-align: center;
	margin-bottom: 10px;
}
#top_header {
	background: url(../images/main_img_bk.png) repeat-x left top;
}
.wrapper_top {
	margin: 0 auto;
	padding: 0px;
	width: 100%;
	min-height: 500px;
	max-height: 650px;
	background: url(../images/main_img_bk_2_.png) no-repeat left top;
	border-bottom: 1px solid #fff;
}
.wrapper_top p#pc_chara {
	display: none;
}

nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
 background-color: #436cb3;
 
}

nav ul li {
 display: block;
 width: 100%;
 padding-top: 3px;
 text-align: center;
 font-size: 20px;
 font-size: 2.0rem;
 line-height: 2.5em;
 color:#ffffff;
 border-bottom: 1px solid #fff;
}
article {
 margin: 0 0 2em;

}
article.main h1 {
 font-size: 30px;
 font-size: 3.0rem;
}
article.main h2 {
 font-size: 28px;
 font-size: 2.8rem;
 margin-top: 1.5em;
}
aside.side h1 {
 margin-bottom: 0.5em;
 font-size: 24px;
 font-size: 2.4rem;
 color: #333;
 border-bottom: 1px dotted #c0c0c0;
}
aside.side ul {
 margin: 0 0 2.5em;
}
aside.side ul li {
 font-size: 20px;
 font-size: 2.0rem;
 line-height: 1.5;
 color: #555;
}
aside.side ul li ul {
 margin: 0 0 0.3em 1.0em;
}
aside.side ul li ul li {
 color: #666;
}
aside div.facebook {
	width: 220px;
	height: 420px;
	margin: 0 auto;
}




small {
 font-size: 12px;
 font-size: 1.2rem;
 text-transform: uppercase;
}
/*******************************************
box
*******************************************/
.box_left {
	width: 100%;
	text-align: center;
}
.box_right {
	width: 100;
	text-align: center;
}
/*******************************************
midashi
*******************************************/
p#chara {
	display: none;
}
p#chara_sp {
	display: block;
}

/*******************************************
p style
*******************************************/
p.ex {
	padding: 0 10px;
}

/*************************************************

profile

**************************************************/
p#profile {
	display: none;
}
p#profile_sp {
	display: block;
}
.cut3 {
	margin: 0px auto;
}
.cut3 p {
	width: 100%;
	text-align: center;
}
/*************************************************

flow

**************************************************/
h3.flow_h3 {
	padding:0.8em 0 0.3em;
	font-size: 25px;
	line-height: 1.7em;
	font-weight: bold;
    color:#436cb3;
	text-align: center;
	margin-top: 10px;
}
.yumail {
	margin: 20px auto;
	width: 90%;
}
p.yumail_pic {
	text-align: center;
}
p.yumail_ex {
	text-align: center;
}
.flow_block {
	padding-bottom: 25px;
	border-bottom: 2px dashed #436cb3;
	margin-bottom: 0px;
}
.flow_block_last {
	padding-bottom: 25px;
	border-bottom: 2px dashed #436cb3;
	margin-bottom: 50px;
}
/*************************************************

link

**************************************************/


/*バナー*/
.banner3 {
	text-align: center;
	width: 100%;
	margin: 0 auto 30px auto; 
}
/*見出しアイコン01*/
ul.icon1 {
		margin: 0;
		padding: 10px 0px 15px 10px;
		font-size: 16px;
		font-size: 1.6rem;
}
ul.icon1 li {
		padding: 0px 30px;
		background: url(../images/list_icon.png) no-repeat 10px 8px;
		line-height: 1.7;
}
ul.icon1 li p {
		margin: 0;
		padding: 5px 10px;
}
/*キャラクターサイトのpinkバナー*/
p#link_chara_h {
	display: none;
}
p#link_chara_h_sp {
	display: block;
	margin-top: 10px;
	font-weight: 700;
	color: #436cb3;
	text-align: left;
	margin-bottom: 10px;
	border-bottom: 2px dashed #436cb3;
	padding-bottom: 5px;
	padding-left: 20px;
}
/*イベント紹介のバナー*/
p#link_event_h {
	display: none;
}
p#link_event_h_sp {
	display: block;
	margin-top: 10px;
	font-weight: 700;
	color: #436cb3;
	text-align: left;
	margin-bottom: 10px;
	border-bottom: 2px dashed #436cb3;
	padding-bottom: 5px;
	padding-left: 20px;
}
/*ゆめーるバナー*/
p#link_yumail_h {
	display: none;
}
p#link_yumail_h_sp {
	display: block;
	margin-top: 10px;
	font-weight: 700;
	color: #436cb3;
	text-align: left;
	margin-bottom: 10px;
	border-bottom: 2px dashed #436cb3;
	padding-bottom: 5px;
	padding-left: 20px;
}
/*Facebookのバナー*/
p#link_facebook_h {
	display: none;
}
p#link_facebook_h_sp {
	display: block;
	margin-top: 10px;
	font-weight: 700;
	color: #3b5999;
	text-align: left;
	margin-bottom: 10px;
	border-bottom: 2px dashed #3b5999;
	padding-bottom: 5px;
	padding-left: 20px;
}

@media screen and (min-width:768px) and ( max-width:1024px) {
	 
 body {
	 min-width: 800px;
		}
	 

}

/* タブレット */
@media only screen and (min-width: 481px) {
/*************************************************

toppage

**************************************************/
h1#logo{
	position: absolute;
	top: 10px;
	left: 40px;
}
h1#logo a{
	border: none;
}
.wrapper_top p#sp_chara {
	display: none;
}
.wrapper_top p#pc_chara {
	display: block;
}
#top_header {
	background: url(../images/main_img_bk.png) repeat-x left top;
	height: 580px;
}
.wrapper_top {
	margin: 0 auto;
	width: 800px;
	background: url(../images/main_img_bk_2_.png) no-repeat left top;
	height: 580px;
	border-bottom: none;
}
.wrapper_top p#pc_chara {
	display: block;
	padding-top: 60px;
	margin-left: -159px;
}


nav {
	padding: 0 0 0 2%;
}



 nav ul li {
   float:left;
   width: 49%;
   height: 50px;
   margin: 0;
   text-align: center;
   background: #436cb3;
   border-bottom: none;
   border-right: 1px solid #fff;
   font-size: 18px;
   font-size: 1.8rem;
 }
 nav ul li.first, nav ul li.third {
	 border-left: 1px solid #fff;
}
 nav ul li.first, nav ul li.second {
	 border-bottom: 1px solid #fff;
}


 article.main blockquote p {
   margin: 0;
   font-size: 0.9em;
   background: #FEFFF4;
 }
 article {
  margin: 0 0 2em;
  border-bottom: none;
  
}
aside {
	width: 100%;
	
}
aside div.facebook {
	width: 100%;	
	margin: 0 auto;
	text-align: center;
}

 #sidebar0 {
   width: 100%;
   padding: 0 3%;
   float: left;
 }
 #sidebar1 {
   width: 47%;
   padding-right: 3%;
   float: left;
 }
 #sidebar2 {
   width: 47%;
   padding-left: 3%;
   float: right;
 }

/*******************************************
box
*******************************************/
.box_left {
	float: left;
	width: 48%;
	text-align: right;
}
.box_right {
	float: right;
	width: 48%;
	text-align: left;
}


/*******************************************
link
*******************************************/

/*キャラクターサイトのpinkバナー*/
p#link_chara_h {
	display: block;
	margin-bottom: 5px;
}
p#link_chara_h_sp {
	display: none;
}

/*イベント紹介サイトのpinkバナー*/
p#link_event_h {
	display: block;
	margin-bottom: 5px;
}
p#link_event_h_sp {
	display: none;
}

/*ゆめーるのpinkバナー*/
p#link_yumail_h {
	display: block;
	margin-bottom: 5px;
}
p#link_yumail_h_sp {
	display: none;
}
/*Facebookのpinkバナー*/
p#link_facebook_h {
	display: block;
	margin-bottom: 5px;
}
p#link_facebook_h_sp {
	display: none;
}

/*******************************************
midashi
*******************************************/
p#chara {
	display: block;
}
p#chara_sp {
	display: none;
}
/*************************************************

profile

**************************************************/
p#profile {
	display: block;
}
p#profile_sp {
	display: none;
}
.cut3 {
	margin: 0 0 0 2.5%;
	width: 97.5%;
	text-align:center;
}
.cut3 p {
	float: left;
	width: 31%;
	margin-right: 1.5%;
}


/*************************************************

movie_banner

**************************************************/


p.pc_banner{
	display:none;
}

p.sp_banner{
	display:block;
}



}

/*PCレイアウト*/
@media only screen and (min-width: 961px) {

/*************************************************

toppage

**************************************************/


h1#logo{
	position: absolute;
	top: 10px;
	left: 60px;
}
h1#logo a{
	border: none;
}

#top_header {/*グラデーション*/
	background: url(../images/main_img_bk.png) repeat-x left top;
	height: 650px;
}
.wrapper_top {/*背景*/
background: url(../images/main_img_bk_2.png) no-repeat left top;
margin: 0 auto;
width: 1100px;
height: 650px;
}
.wrapper_top_con {
	position: relative;
	width: 1100px;
	height: 650px;
	margin: 0 auto;
	padding: 0;
	border-top: none;
}

.wrapper_top p#pc_chara {
	display: block;
	padding-top: 53px;
	margin-left: 0px;
}


/*******************************/

p {
  font-size: 17px;
  font-size: 1.7rem;
  line-height: 1.4;
}
#wrapper {
  width: 1000px;
  margin: 0 auto;
  padding: 0;
  border-top: none;
}
.wrapper {
	margin: 0 auto;
	width: 1000px;
}


nav {
  padding: 0 30px;
}
nav ul {
   width: 1000px;
   padding: 1px 0;
}
 nav ul li {
   float:left;
   width: 24.7%;
   height: 50px;
   margin: 0;
   text-align: center;
   
   border-bottom: none;
   border-right: 1px solid #fff;
 }
 nav ul li.first {
	 border-left: 1px solid #fff;
}
 nav ul li.third {
	 border-left: none;
}
 nav ul li.first, nav ul li.second {
	 border-bottom: none;
}

#common-contents {
  width: auto;
  margin: 2em 0 1em;
  padding: 0 0px;
 }
article {
  border-bottom: none;
 }
article.main {
  float: right;
  width: 750px;
  padding: 0px;
  margin-left: 10px;
  background: #FEFFF4;
 
}
aside.side {
  float: left;
  width: 230px;
  margin: 0;
  padding: 0;
  
}

#sidebar1, #sidebar2 {
  width: 100%;
  padding:0;
  float: none;
}
aside.side ul li {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.8;
}
aside div.facebook {
	width: 100%;
}
/*******************************************
box
*******************************************/
.box_left {
	float: left;
	width: 48%;
	text-align: right;
}
.box_right {
	float: right;
	width: 48%;
	text-align: left;
}

/*************************************************

character

**************************************************/
table.table_form{
	margin: 0 0 70px 0;
	padding: 0;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
table.table_form th{
	padding: 10px;
	width: 25%;
	background: #e73660;/*#fafafa*/
	border: #ddd 1px solid;
	font-weight: 500;
	color: #fff;
}
table.table_form td{
	padding: 10px;
	border: #ddd 1px solid;
	background: #fff;
}

/*************************************************

flow

**************************************************/

.flow_block {
	padding-bottom: 25px;
	border-bottom: 2px dashed #436cb3;
	margin-bottom: 0px;
}
.flow_block_last {
	padding-bottom: 25px;
	border-bottom: 2px dashed #436cb3;
	margin-bottom: 50px;
}
.yumail {
	width: 740px;
	margin: 20px 0 40px 0;
}
p.yumail_ex {
	float: left;
	width: 410px;
	margin-left: 15px;
	text-align: left;
}
p.yumail_pic {
	float: left;
	margin-left: 30px;
	text-align: left;
}

/*************************************************

link

**************************************************/
/*バナー*/

ul.link_banner {
	display: inline-block;
	width: 710px;
	margin: 0 0px 15px 20px;
	
}
ul.link_banner li {
	float: left;
	margin-left: 10px;
	
}
ul.link_banner li.first {
	margin-left: 0px;
}


}


/*************************************************

movie

**************************************************/
/*見出し*/

.movie{
	font-size:16px;
	padding:10px;
	border-left:7px solid #436cb3;  
    padding:.6em .8em;
	margin-left:30px;  
}


.movie-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 90%;
}


/*************************************************

movie_banner

**************************************************/


p.pc_banner{
	display:block;
}

p.sp_banner{
	display:none;
}