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

/* ------------------------------
フォント指定
------------------------------ */

body {
font-family: 'M PLUS 1p','Helvetica','Hiragino Kaku Gothic Pro','Meiryo',sans-serif;
}
input {
font-family: 'M PLUS 1p','Helvetica','Hiragino Kaku Gothic Pro','Meiryo',sans-serif;
}
textarea {
font-family: 'M PLUS 1p','Helvetica','Hiragino Kaku Gothic Pro','Meiryo',sans-serif;
}

/* ------------------------------
Clearfix
------------------------------ */

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/* ------------------------------
Loading
------------------------------ */

#loader-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 300;
}
 
#loader-bg #loader {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 500px;
  margin-left: -250px;
  text-align: center;
  color: #fff;
  z-index: 300;
  opacity: 0;
}

#loader-bg #loader img{
	width: 160px;
	height: 20px;
}

/* ------------------------------
OP
------------------------------ */
#op {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(256, 256, 256, 0.8);
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity .2s ease-out;
  pointer-events: none;
	z-index: 200;
}

#op p.op_text{
	text-indent:-10000px;
	overflow:hidden;
	width: 425px;
	height: 492px;
	margin: 0 auto;
	position: relative;
	opacity: 0;
	top: -20px;
}

#op p#ch1_catch{
    background: url(../images/character/op_ch1.png);
}

#op p#ch2_catch{
    background: url(../images/character/op_ch2.png);
}

#op p#ch3_catch{
    background: url(../images/character/op_ch3.png);
}

div.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}


/* ------------------------------
サイト共通
------------------------------ */

html,body{
    width: 100%;
-webkit-text-size-adjust: 100%;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
scrollbar-width: none;
}

body::-webkit-scrollbar {
display: none;
}

#wrapper{
	position: relative;
    width: 100%;
    min-width: 1148px;
    max-width: 1920px;
    margin: 0 auto;

}

html{
}
    
body{
	background:#f5ebe0;
}

canvas{
	position:absolute;
	width:100%;
	height:100%;
	z-index:10;
}

h1,h2,h3{
	text-indent:-10000px;
	overflow:hidden;
}

h3.contents{
	position: relative;
	margin: 0 auto 45px;
}


a{
color:#a18f8b;
}

a:hover{
color:#ec6d7b;
}

a:hover{
}

strong{
	font-weight:700;
    color:#f84872;
}

div#contents{
    background: url(../images/common/contents_bg.jpg);
}

div.inside{
	width:1060px;
	margin:0 auto;
	position:relative;	
}

p{
	color: #561814;
	line-height: 180%;
	margin: 0 0 30px;
}

.small{
    font-size: 26px;
    margin-left: 6px;
}

@keyframes vertical {
    0% { transform:translateY(-15px); }
  100% { transform:translateY(  0px); }
}

@keyframes vertical2 {
    0% { transform:translateY(-8px); }
  100% { transform:translateY(  0px); }
}

.dots {
  position: relative;
  text-align: center;
  margin: 24px 0;
}


/* ------------------------------
CS版追記
------------------------------ */

#banner_item{
      position: fixed;
      right: 0px;
      bottom: 20px;
      width: 262px;
      height: 64px;
      line-height: 64px;
      z-index: 9999;
	display: block;
}

#banner_item li.banner_item1{
      width: 262px;
      height: 64px;
	display: block;
    background: url("../images/common/banner1.png");
}

#banner_item li a{
      width: 262px;
      height: 64px;
	display: block;
	text-indent:-10000px;
	overflow:hidden;
}

/* ------------------------------
HEADER
------------------------------ */

#header{
	width: 100%;
	height: 108px;
    background: url(../images/common/menu_bg.png) repeat-x;
	position: fixed;
	z-index: 100;
	transition: .5s;
}

#index #header{
	opacity: 0;
}

#header.hide{
    transform: translateY(-100%);
}

#header ul#menu{
	margin: 0 auto;
	width: 1060px;
	list-style: none;
    display:flex;
	justify-content: center;
	height: 57px;
	align-items: center;
	position: relative;
	top:12px;
}

#header ul#menu li{
    background-image: url(../images/common/menu.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	height: 57px;
	margin: 0 22px;
}

#header ul#menu li a{
	height: 57px;
	display: block;
	text-indent:-10000px;
	overflow:hidden;
}

#header ul#menu li#m_top{
width:113px;
background-position: 0 0;
}

#header ul#menu li#m_story{
width:97px;
background-position: -164px 0;
}

#header ul#menu li#m_character{
width:78px;
background-position: -309px 0;
}

#header ul#menu li#m_point{
width:79px;
background-position: -436px 0;
}

#header ul#menu li#m_stage{
width:61px;
background-position: -565px 0;
}

#header ul#menu li#m_movie{
width:79px;
background-position: -677px 0;
}

#header ul#menu li#m_special{
width:94px;
background-position: -793px 0;
}

#header ul#menu li#m_product{
width:80px;
background-position: -922px 0;
}




/* ------------------------------
TOP
------------------------------ */

div#top{
    background-image: url(../images/top/header_visual.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	max-height: 1356px;
	padding: 0 0 20px;
	opacity: 0;
}

div#top .ns{
    position: absolute;
    width: 82px;
    height: 82px;
    top: 0;
    left: 0;
    background-image: url(../images/common/jumbo_ns.png);
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    font-size: 0;
    z-index: 5;
}

div#top p.catch{
	text-indent:-10000px;
	overflow:hidden;
    background: url(../images/top/header_catch.png) no-repeat;
	width: 482px;
	height: 121px;
	position: relative;
	margin: 0 auto;
	top: 450px;
    left: 250px;
	opacity: 0;
}

div#top h1{
    background: url(../images/top/header_title.png) no-repeat;
	width: 841px;
	height: 228px;
	position: relative;
	margin: 530px auto 20px;
	opacity: 0;
	top: -20px;
}

div#top h2{
    background: url(../images/top/header_date.png) no-repeat;
	width: 796px;
	height: 81px;
	position: relative;
	margin: 0 auto 20px;
	opacity: 0;
	top: -20px;
}

div#top p.staff{
	text-indent:-10000px;
	overflow:hidden;
    background: url(../images/top/header_staff.png) no-repeat;
	width: 546px;
	height: 60px;
	position: relative;
	margin: 0 auto 30px;
	opacity: 0;
	top: -20px;
}


/* ------------------------------
TICKER
------------------------------ */

div#news{
    background: url(../images/top/news_bg.png) no-repeat;
	width: 1007px;
	height: 94px;
	position: relative;
	margin: 0 auto 0;
}

.ticker {
  margin: 0 auto 0;
  width: 882px;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 16px 0 14px;
  top: 19px;
}


.ticker ul {
  width: 100%;
  position: relative;
}


.ticker ul li {
  width: 100%;
  display: none;
  color: #423d37;
}

.ticker li span.news_date{
	margin-right: 15px;
	font-weight: bold;
	color: #561814;
}

/* ------------------------------
BANNER
------------------------------ */

#banner ul{
	display: flex;
	height:auto;
}

#banner ul li.banner_contents{
	width: 100%;
	height: auto;
	
}

#banner ul li.banner_contents a{
	display: block;
	text-indent:-10000px;
	overflow:hidden;
	height: auto;
}

#banner ul li.banner_contents img{
	width: 100%;
	display: block;
}

/* ------------------------------
STORY
------------------------------ */

#story{
	padding: 85px 0 65px;
	background: url(../images/top/story_bg.jpg) no-repeat;
}

#story h3{
    background: url(../images/top/story_title.png) no-repeat;
	width: 127px;
	height: 89px;
}

#story p.story_catch{
    background: url(../images/top/story_catch.png) no-repeat;
	width: 238px;
	height: 675px;
	text-indent:-10000px;
	overflow:hidden;
	float: left;
	margin-left: 50px;
	opacity: 0;
	position: relative;
	top: -20px;
}

#story p.story_text{
    background: url(../images/top/story_text.png) no-repeat;
	width: 691px;
	height: 664px;
	text-indent:-10000px;
	overflow:hidden;
	float: right;
	margin-right: 20px;
	opacity: 0;
	position: relative;
	left: -20px;
}

/* ------------------------------
CHARACTER
------------------------------ */

div #character{
	padding: 85px 0 55px;
	background: url(../images/top/character_bg.jpg) no-repeat;
}

#character h3{
    background: url(../images/top/character_title.png) no-repeat;
	width: 153px;
	height: 90px;
}

#character div.ch_links{
	display: flex;
	justify-content: center;
}

#character div.ch_links div{
	height: 886px;
	margin: 0 30px;
	position: relative;
}

#character div.ch_links div a.all{
	display: block;
	position: absolute;
	height: 886px;
}

#character div.ch_links div.ch01 a.all{
	width: 295px;
}

#character div.ch_links div.ch02 a.all{
	width: 322px;
}

#character div.ch_links div.ch03 a.all{
	width: 289px;
}

#character div.ch_links div a.ch_bt{
	width: 289px;
	height: 63px;
	display: block;
	text-indent:-10000px;
	overflow:hidden;
	top: 680px;
	position: relative;
	margin: 0 auto;
}

#character div.ch01{
    background: url(../images/top/character_ch01.png) no-repeat bottom;
	width: 295px;
	opacity: 0;
	top: -20px;
}

#character div.ch01 a.ch_bt{
	background: url(../images/top/character_bt02.png) no-repeat;
}

#character div.ch02{
    background: url(../images/top/character_ch02.png) no-repeat bottom;
	width: 322px;
	opacity: 0;
	top: -20px;
}

#character div.ch02 a.ch_bt{
	background: url(../images/top/character_bt01.png) no-repeat;
}

#character div.ch03{
    background: url(../images/top/character_ch03.png) no-repeat bottom;
	width: 268px;
	opacity: 0;
	top: -20px;
}

#character div.ch03 a.ch_bt{
	background: url(../images/top/character_bt03.png) no-repeat;
}

/* ------------------------------
POINT
------------------------------ */

#point{
	padding: 85px 0 25px;
	background: url(../images/top/point_bg.jpg) repeat-y;
}

#point h3{
    background: url(../images/top/point_title.png) no-repeat;
	width: 101px;
	height: 82px;
}

#point div.point1{
    background: url(../images/top/point_contents01.png) no-repeat;
	width: 970px;
	height: 373px;
	margin: 0 auto 30px;
	position: relative;
	top: -20px;
	opacity: 0;
}

#point div.point2{
    background: url(../images/top/point_contents02.png) no-repeat;
	width: 970px;
	height: 410px;
	margin: 0 auto 30px;
	position: relative;
	top: -20px;
	opacity: 0;
}

#point div.point3{
    background: url(../images/top/point_contents03.png) no-repeat;
	width: 970px;
	height: 434px;
	margin: 0 auto 30px;
	position: relative;
	top: -20px;
	opacity: 0;
}

/* ------------------------------
SYSTEM
------------------------------ */

#system{
	padding: 85px 0 105px;
	background: url(../images/top/point_bg.jpg) repeat-y;
}

#system h3{
    background: url(../images/top/system_title.png) no-repeat;
	width: 101px;
	height: 81px;
}

#system div.system1{
    background: url(../images/top/system_contents01.png) no-repeat;
	width: 970px;
	height: 572px;
	margin: 0 auto 30px;
	position: relative;
	top: -20px;
	opacity: 0;
}

#system div.system2{
    background: url(../images/top/system_contents02.png) no-repeat;
	width: 970px;
	height: 850px;
	margin: 0 auto 30px;
	position: relative;
	top: -20px;
	opacity: 0;
}

#system div.system3{
    background: url(../images/top/system_contents03.png) no-repeat;
	width: 970px;
	height: 1130px;
	margin: 0 auto 30px;
	position: relative;
	top: -20px;
	opacity: 0;
}


/* ------------------------------
STAGE
------------------------------ */

#stage{

}

#stage h3{
	position: relative;
    background: url(../images/top/stage_title.png) no-repeat;
	width: 407px;
	height: 39px;
	margin: 0 auto;
	z-index: 10;
	top: 414px;
}

#stage ul.stage_list{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	margin: -40px 0 0;
	position: relative;
}

#stage ul.stage_list li{
	width:50%;
	list-style: none;
	max-height: 432px;
	height: auto;
	display: block;
	height: 432px;
}

#stage ul.stage_list li a{
	width: 100%;
	max-height: 432px;
	display: block;
	height: 432px;
	text-indent:-10000px;
	overflow:hidden;
}

#stage ul.stage_list li.stage01{
    background-image: url(../images/top/stage_item01.png) ;
	background-position: center 0;
	background-repeat: no-repeat;
}

#stage ul.stage_list li.stage02{
    background-image: url(../images/top/stage_item02.png) ;
	background-position: center 0;
	background-repeat: no-repeat;
}

#stage ul.stage_list li.stage03{
    background-image: url(../images/top/stage_item03.png) ;
	background-position: center 0;
	background-repeat: no-repeat;
}

#stage ul.stage_list li.stage04{
    background-image: url(../images/top/stage_item04.png) ;
	background-position: center 0;
	background-repeat: no-repeat;
}

#stage ul.stage_list li.stage01 a{
    background-image: url(../images/top/stage_item01.png) ;
	background-position: center -432px;
	background-repeat: no-repeat;
}

#stage ul.stage_list li.stage02 a{
    background-image: url(../images/top/stage_item02.png) ;
	background-position: center -432px;
	background-repeat: no-repeat;
}

#stage ul.stage_list li.stage03 a{
    background-image: url(../images/top/stage_item03.png) ;
	background-position: center -432px;
	background-repeat: no-repeat;
}

#stage ul.stage_list li.stage04 a{
    background-image: url(../images/top/stage_item04.png) ;
	background-position: center -432px;
	background-repeat: no-repeat;
}

/* ------------------------------
MOVIE
------------------------------ */

#movie{
	padding: 65px 0 50px;

}

#movie h3{
    background: url(../images/top/movie_title.png) no-repeat;
	width: 101px;
	height: 82px;
}

#movie ul{
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
}

#movie ul li{
	width: 342px;
	margin: 0 5px 24px;
}

#movie div.movie_item{
	width: 640px;
	height: 360px;
	margin: 0 auto 10px;
}

div.movie_text{
	border-left: 2px solid #eb6e8e;
	margin-left: 2px;
	padding-left: 12px;
}

div.movie_text p{
	margin: 0 0 0px;
}

div.movie_text p.movie_en{
	color: #a45b47;	
	font-family: 'Tangerine', cursive;
	font-size: 120%;
}

/* ------------------------------
SPECIAL
------------------------------ */

#special{
	padding: 45px 0 50px;
}

#special h3{
    background: url(../images/top/special_title.png) no-repeat;
	width: 141px;
	height: 81px;
}

#special ul{
	display: flex;
	flex-wrap:wrap;
}

#special ul li{
	width: 342px;
	height: 406px;
	border-radius: 8px;
	margin: 0 5px 12px;
	background: #fff;
	border: 0px solid;
}

#special ul li p{
	margin: 0;
}

#special div.sp_inside{
	padding: 20px 15px 10px 30px;
}

#special div.sp_inside p.sp_text{
	color: #473535;
}

#special ul li.special_contents_not{
	background:none;
}

/* ------------------------------
PRODUCT
------------------------------ */

#product{
	padding: 45px 0 50px;
}

#product h3{
    background: url(../images/top/product_title.png) no-repeat;
	width: 126px;
	height: 83px;
}

#product h4{
	color: #561814;
	border-bottom: 1px solid #d4c2b8;
	padding-bottom: 5px;
	margin: 0 0 20px;
	padding-left: 5px;
	width: 90%;
}

#product div#product_catalog{
	display:flex;
	flex-wrap:wrap;
	width:100%;
}

#product ul{
	margin: 0 0 60px;
}

#product li{
	margin: 0 0 30px 5px;
}

#product div#product_catalog p.list_title{
	font-size: 83%;
	margin: 0 0 0;
	line-height: 180%;
}

#product div#product_catalog p.list_name{
	font-size: 142%;
	margin: 0 0 0;
	line-height: 140%;
}

#product div#product_catalog p.notice{
	color: #f93e6d;
	margin: 10px 0 0;
	font-size: 90%;
}

#product div#product_catalog div.staff_list{
	width: 50%;
}

#product div#product_catalog div.product_list{
	width: 50%;
}

#product div#product_catalog div.spec_list{
	width: 100%;
}

/* ------------------------------
CHARACTER_INSIDE
------------------------------ */

#character_inside #contents{
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;
	background-color: #f5ebe0;
}

#character_inside div.ch1_bg{
	background-image: url(../images/character/ch01_bg.jpg);
}

#character_inside div.ch2_bg{
	background-image: url(../images/character/ch02_bg.jpg);
}

#character_inside div.ch3_bg{
	background-image: url(../images/character/ch03_bg.jpg);
}


#character_inside div.ch1{
}

#character_inside div.ch1 div.chitem{
	min-height: 1742px;
	position: absolute;
	width: 615px;
	left: 38px;
}

#character_inside div.chitem img{
	position: absolute;
}

#character_inside div.ch2{
}

#character_inside div.ch2 div.chitem{
	min-height: 1631px;
	position: absolute;
	width: 600px;
	left: 50px;
}

#character_inside div.ch3{
}

#character_inside div.ch3 div.chitem{
	min-height: 1723px;
	position: absolute;
	width: 515px;
	left: 152px;
}


#character_inside div.character_contents{
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	padding: 126px 0 20px;
	margin: 0 0 220px;
	opacity: 0;
	top: -20px;
	position: relative;	
}

#character_inside div.serif_text{
	width: 130px;
	opacity: 0;
	top: -20px;
	position: relative;	
}

#character_inside div.ch_info{
	width: 420px;
	opacity: 0;
	top: -20px;
	position: relative;	
}

#character_inside div.ch_line{
	width: 417px;
	position: relative;
	height: 7px;
	margin: 0 auto 30px;
}

#character_inside p.serif{
	text-indent:-10000px;
	overflow:hidden;
}

#character_inside p.story{
	text-indent:-10000px;
	overflow:hidden;
	margin: 0 auto 30px;
	position: relative;
}

#character_inside p.cg_scene{
	text-indent:-10000px;
	overflow:hidden;
	width: 232px;
	height: 96px;
	position: relative;
	margin: 0 auto 30px;
}

#character_inside h3.name{
	margin: 140px 0 30px;
}


#character_inside h4.prof{
	text-indent:-10000px;
	overflow:hidden;
	position: relative;
	margin: 0 auto 30px;
}

#character_inside ul.sound_list{
	display:flex;
	width:350px;
	margin: 0 auto 35px;
}

#character_inside ul.sound_list li{
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0px 12px;
	position: relative;
	display: block
}

#character_inside ul.sound_list li.voice_bt a{
	width: 64px;
	height: 64px;
	position: relative;
	display: block;
    background: url(../images/character/ch_sound_bt.png) no-repeat;
}

#character_inside ul.sound_list li.h_voice_bt a{
	width: 64px;
	height: 64px;
	position: relative;
	display: block;
    background: url(../images/character/ch_hvoice_bt.png) no-repeat;
}

#character_inside ul.cg_list{
	display:flex;
	width:404px;
	margin: 0 auto 35px;
	flex-wrap:wrap;
}

#character_inside ul.cg_list li.cg_item{
	width: 184px;
	height: 106px;
	position: relative;
	display: block;
	justify-content: center;
	margin: 0 8px 15px;
	border: 1px solid #563618;
}

#character_inside div.ch1 div.ch_line{
    background: url(../images/character/ch01_line.png) no-repeat;
}

#character_inside div.ch1 p.serif{
    background: url(../images/character/ch01_catch.png) no-repeat;
	width: 125px;
	height: 503px;
	position: relative;
	margin: 126px 0 0;
}

#character_inside div.ch1 h3.name{
    background: url(../images/character/ch01_name.png) no-repeat;
	width: 404px;
	height: 171px;
}

#character_inside div.ch1 h4.prof{
    background: url(../images/character/ch01_prof.png) no-repeat;
	width: 384px;
	height: 268px;
}

#character_inside div.ch1 p.cg_scene{
    background: url(../images/character/ch01_scene.png) no-repeat;
}

#character_inside div.ch1 p.story{
    background: url(../images/character/ch01_text.png) no-repeat;
	width: 382px;
	height: 315px;
}

#character_inside div.ch2 div.ch_line{
    background: url(../images/character/ch02_line.png) no-repeat;
}

#character_inside div.ch2 p.serif{
    background: url(../images/character/ch02_catch.png) no-repeat;
	width: 128px;
	height: 749px;
	position: relative;
	margin: 126px 0 0;
}

#character_inside div.ch2 h3.name{
    background: url(../images/character/ch02_name.png) no-repeat;
	width: 417px;
	height: 163px;
}

#character_inside div.ch2 h4.prof{
    background: url(../images/character/ch02_prof.png) no-repeat;
	width: 384px;
	height: 269px;
}

#character_inside div.ch2 p.cg_scene{
    background: url(../images/character/ch02_scene.png) no-repeat;
}

#character_inside div.ch2 p.story{
    background: url(../images/character/ch02_text.png) no-repeat;
	width: 360px;
	height: 314px;
}

#character_inside div.ch3 div.ch_line{
    background: url(../images/character/ch03_line.png) no-repeat;
}

#character_inside div.ch3 p.serif{
    background: url(../images/character/ch03_catch.png) no-repeat;
	width: 129px;
	height: 922px;
	position: relative;
	margin: 126px 0 0;
}

#character_inside div.ch3 h3.name{
    background: url(../images/character/ch03_name.png) no-repeat;
	width: 399px;
	height: 175px;
}

#character_inside div.ch3 h4.prof{
    background: url(../images/character/ch03_prof.png) no-repeat;
	width: 400px;
	height: 269px;
}

#character_inside div.ch3 p.cg_scene{
    background: url(../images/character/ch03_scene.png) no-repeat;
}

#character_inside div.ch3 p.story{
    background: url(../images/character/ch03_text.png) no-repeat;
	width: 393px;
	height: 346px;
}

/* ------------------------------
FOOTER
------------------------------ */

#footer{
	padding: 0 0 80px;
}

#footer a.page_top{
    background: url(../images/common/pagetop_bt.png) no-repeat;
	width: 90px;
	height: 78px;
	margin: 0 auto 60px;
	display: block;
	text-indent:-10000px;
	overflow:hidden;
}

#footer a.back_top{
    background: url(../images/common/back_bt.png) no-repeat;
	width: 49px;
	height: 127px;
	margin: 0 auto 80px;
	display: block;
	text-indent:-10000px;
	overflow:hidden;
}

#footer a.twitter{
    background: url(../images/common/twitter_bt.png) no-repeat;
	width: 96px;
	height: 96px;
	margin: 0 auto 80px;
	display: block;
	text-indent:-10000px;
	overflow:hidden;
}

div.footer_list{
    display: flex;
    justify-content: center; 
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

p.footer_logo a{
    background: url(../images/common/footer_logo.png) no-repeat;
	width:154px;
	height:80px;
	position: relative;
	display: block;
	text-indent:-10000px;
	overflow:hidden;
}

p.footer_logo2 a{
    background: url(../images/common/footer_logo2.png) no-repeat;
	width:140px;
	height:44px;
	position: relative;
	display: block;
	text-indent:-10000px;
	overflow:hidden;
}

#footer_text{
	width:420px;
	float: left;
}

p.copy{
	color: #785957;
	font-size:80%;
	position: relative;
	letter-spacing: 0.1em;
	text-align: center;
}

/* ------------------------------
RESERVED
------------------------------ */

#reserved div.inside{
}

#reserved h1{
	position: relative;
    background: url(../images/reserved/reserved_title.png) no-repeat;
	width: 808px;
	height: 373px;
	margin: 0 auto;
	top: 520px;
}

#reserved div.top_item{
	position: relative;
	background: url(../images/reserved/reserved_bg.png) no-repeat center;
	min-height: 1001px;
	margin: 0 auto 0px;
}

#reserved div.reserved_list{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	position: relative;
	align-items: center;
	margin: 0 auto 80px;
	justify-content:space-between;
}

#reserved div.reserved_list div{
	width:50%;
	height: auto;
}

#reserved a.shop_link{
	text-indent:-10000px;
	overflow:hidden;
    background: url(../images/reserved/reseved_bt.png) no-repeat;
	width: 330px;
	height: 32px;
	position: relative;
	margin: 0 0 30px;
	display: block;
}

#reserved p.notice{
	font-size: 80%;
	color: #f93e6d;
}

/* ------------------------------
SHOP
------------------------------ */

#shop h3{
    background: url(../images/shop/shop_title.png) no-repeat;
	width: 232px;
	height: 89px;
	margin: 0 auto 50px;
}

#shop h3.contents2{
    background: url(../images/shop/original_title.png) no-repeat;
	width: 256px;
	height: 89px;
	margin: 0 auto 50px;
}

#shop div#contents{
	padding: 200px 0 0;
}

#shop div.inside{
}

#shop p.notice{
	font-size: 80%;
	color: #f93e6d;
}

#shop div.shop_text{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	position: relative;
	margin: 0 auto 80px;
	justify-content: center;
}

#shop div.shop_text div.text{
	width:45%;
	height: auto;
	margin: 0 2% 0 0 ;
}

#shop div.shop_text div.price{
	width:45%;
	height: auto;
	margin: 0 0 0 2% ;
}

#shop ul.shop_list{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	position: relative;
	margin: 0 auto 80px;
	justify-content: center;
}

#shop ul.shop_list li{
	width:500px;
	height: auto;
	margin: 0 10px 80px;
}

#shop ul.shop_list li p{
	text-align: center;
	color: #664320;
	margin: 0 0 20px;
}

#shop ul.shop_list li p span.shop_name{
	font-size: 160%;
	color: #f84872;
	margin-right: 5px;
}

#shop ul.shop_list li div.shop_link{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	position: relative;
	justify-content:center;
	margin: 0 auto;
}

#shop ul.shop_list li a{
	width: 240px;
	height: 32px;
	display: block;
	text-indent:-10000px;
	overflow:hidden;
	margin: 0 4px 0;
}

#shop ul.shop_list li img{
	display: block;
	width: 500px;
	height: 795px;
	margin: 0 auto 20px;
}

#shop ul.shop_list li a.limit_bt{
    background: url(../images/shop/limit_bt.png) no-repeat;
}

#shop ul.shop_list li a.limit2_bt{
    background: url(../images/shop/limit2_bt.png) no-repeat;
}

#shop ul.shop_list li a.normal_bt{
    background: url(../images/shop/normal_bt.png) no-repeat;
}


#shop ul.original_list{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	position: relative;
	margin: 0 auto 80px;
	justify-content: center;
}

#shop ul.original_list li{
	width:335px;
	height: auto;
	margin: 0 5px 40px;
}

#shop ul.original_list li a.shop_bt{
    background: url(../images/shop/shop_bt.png) no-repeat;
	width: 240px;
	height: 32px;
	display: block;
	text-indent:-10000px;
	overflow:hidden;
	margin: 12px auto 0;
}

#shop ul.original_list li a.shop2_bt{
    background: url(../images/shop/shop2_bt.png) no-repeat;
	width: 240px;
	height: 32px;
	display: block;
	text-indent:-10000px;
	overflow:hidden;
	margin: 12px auto 0;
}

#shop ul.original_list li p{
	text-align: center;
	color: #664320;
	margin: 0 0 10px;
}

#shop ul.original_list li p span.shop_name{
	font-size: 132%;
	color: #f84872;
	margin-right: 5px;
}


/* ------------------------------
SP_INSIDE
------------------------------ */

#sp_inside div#contents{
	padding: 200px 0 0;
}

#sp_inside div.inside{
}

#sp_inside p.notice{
	font-size: 80%;
	color: #f93e6d;
}

/* ------------------------------
SP_INSIDE_GOGO
------------------------------ */

#sp_inside div.gogo_item h1{
	position: relative;
    background: url("../images/special/gogo/gogo_image.png") no-repeat;
	width: 1004px;
	height: 413px;
	margin: 0 auto 80px;
}

#sp_inside div.gogo_info{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	position: relative;
	align-items: center;
	margin: 0 auto 80px;
	justify-content:center;
}

#sp_inside div.gogo_info div.gogo_text{
	width:480px;
	height: auto;
}

#sp_inside div.gogo_info div.gogo_img{
	width:510px;
	height: auto;
}

/* ------------------------------
SP_INSIDE_TWITTER
------------------------------ */

#sp_inside div.twitter_item h1{
	position: relative;
    background: url("../images/special/twitter/twitter_image.png") no-repeat;
	width: 867px;
	height: 493px;
	margin: 0 auto 80px;
}

#sp_inside div.twitter_info{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	position: relative;
	align-items: center;
	margin: 0 auto 80px;
	justify-content:center;
}

#sp_inside div.twitter_info div.twitter_text{
	width:720px;
	height: auto;
}

#sp_inside div.twitter_info div.twitter_img{
	width:252px;
	height: auto;
}

#sp_inside h3.tw_icn_topics{
    background: url(../images/special/twitter/twitter_icon_topics.png) no-repeat;
	width: 230px;
	height: 90px;
	margin: 0 auto 30px;
	position: relative;
}

#sp_inside h3.tw_header_topics{
    background: url(../images/special/twitter/twitter_header_topics.png) no-repeat;
	width: 230px;
	height: 90px;
	margin: 0 auto 30px;
	position: relative;
}

#sp_inside ul.tw_icn_list{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	position: relative;
	margin: 0 auto 80px;
	justify-content:center;
}

#sp_inside ul.tw_icn_list li{
	margin: 0 20px 20px;
}

#sp_inside ul.tw_header_list{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	position: relative;
	margin: 0 auto 80px;
	justify-content:center;
}

#sp_inside ul.tw_header_list li{
	margin: 0 10px 20px;
}

/* ------------------------------
SP_TRIAL_PLAY
------------------------------ */

#sp_inside div.trial_play_img{
	position: relative;
    background:#212020;
	width: 100%;
	height: 834px;
	margin: -200px auto 0;
}

#sp_inside div.trial_play_img h1{
    background: url("../images/special/trial_play/trial_image.png") no-repeat;
	width: 1131px;
	height: 677px;
	margin: 0 auto;
	position: relative;
	top: 112px;
}

#sp_inside div.trial_play_item h2{
	position: relative;
    background: url("../images/special/trial_play/trial_title.png") no-repeat;
	width: 840px;
	height: 186px;
	margin: -53px auto 60px;
}

#sp_inside p.trial_play_text{
	text-align: center;
	font-size: 118%;
	margin: 0 auto 70px;
}

#sp_inside ul#trial_movie_list{
	position: relative;
	margin: 0 auto 120px;
	display: flex;
	flex-wrap:wrap;
}

#sp_inside ul#trial_movie_list li{
	display: block;
	margin: 0 10px 30px;
	position: relative;
	width: 480px;
	height: auto;
}

#sp_inside ul#trial_movie_list li p.movie_title{
  padding: 0.1em 0.5em;
  font-size: 14px;
  color: #fff;
  background: #f84872;
  border-radius: 12px;
	text-align: center;
	margin: 0 0 10px;
}

/* ------------------------------
SP_EARLY
------------------------------ */

#sp_inside div.early_img{
}

#sp_inside div.early_img h1{
	position: relative;
    background: url("../images/special/early/early_title.png") no-repeat;
	width: 808px;
	height: 318px;
	margin: 0 auto;
	top: 640px;
}

#sp_inside div.early_img{
	position: relative;
	background: url("../images/special/early/early_img.png") no-repeat center;
	min-height: 940px;
	margin: -200px auto 100px;
}

#sp_inside div.sp_early_list{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	position: relative;
	align-items: center;
	margin: 0 auto 80px;
	justify-content:space-between;
}

#sp_inside div.sp_early_list div{
	width:50%;
	height: auto;
}

#sp_inside div.sp_early_list a.early_link{
	text-indent:-10000px;
	overflow:hidden;
    background: url("../images/special/early/early_link.png") no-repeat;
	width: 330px;
	height: 32px;
	position: relative;
	margin: 0 0 30px;
	display: block;
}

/* ------------------------------
SP_PICK
------------------------------ */

#sp_inside div.pick_img{
}

#sp_inside div.pick_img h1{
	position: relative;
    background: url("../images/special/pick/pick_title.png") no-repeat;
	width: 1004px;
	height: 318px;
	margin: 0 auto;
	top: 640px;
}

#sp_inside div.pick_img{
	position: relative;
	background: url("../images/special/pick/pick_img.png") no-repeat center;
	min-height: 940px;
	margin: -200px auto 100px;
}

#sp_inside div.sp_pick_list{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	position: relative;
	margin: 0 auto 80px;
	justify-content:space-between;
}

#sp_inside div.sp_pick_list div{
	width:50%;
	height: auto;
}

#sp_inside div.sp_pick_list a.shop_link{
	text-indent:-10000px;
	overflow:hidden;
    background: url("../images/special/pick/pick_link.png") no-repeat;
	width: 330px;
	height: 32px;
	position: relative;
	margin: 0 0 30px;
	display: block;
}


/* ------------------------------
POP UP
------------------------------ */

#character_inside .fancybox__backdrop {
  background: rgba(88, 24, 20, 0.8);
}