@charset "utf-8";

@font-face {
font-family: 'Effra Heavy';
font-style: normal;
font-weight: 900;
  src: url('../fonts/Effra Heavy.woff') format('woff'),
       url('../fonts/Effra Heavy.ttf') format('truetype');}
@font-face {
font-family: 'Noto Serif CJK JP Regular';
font-style: normal;
font-weight: 200;
  src: url('../fonts/NotoSansCJKjp-Regular.woff') format('woff'),
       url('../fonts/NotoSansCJKjp-Regular.ttf') format('truetype');}
@font-face {
font-family: 'Noto Sans CJK JP Black';
font-style: normal;
font-weight: 900;
src: url('../fonts/NotoSansJP-Black.woff') format('woff'),
    url('../fonts/NotoSansJP-Black.ttf')  format('truetype');}

@font-face {
font-family: dnp-shuei-shogomincho-std, sans-serif;
font-style: normal;
font-weight: 700;}
@font-face {
font-family: adobe-garamond-pro, serif;
font-style: normal;
font-weight: 600;}
::selection {
  color: #000000;
  background: #e2041b;} 

/*********** responsive **********/
@media screen and (min-width: 768px){
html{
  font-size: 62.5%;}
body{
	margin:0 auto;
	background: #000000;
	font-family: 'Noto Serif CJK JP Regular';
	font-weight: 200;
  font-size:1.6rem;/* 16px*/
  line-height: 1.5;
	color:#fff;}
a, a:visited{
	text-decoration:none;
	color:#fff;
	-webkit-transition:color .4s ease;
    transition:color .4s ease;}
a:hover{
	opacity: 0.8;}

.sp{ display: none;}

.loading {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
	position: relative;}
.loading .loading_loader {
	font-family: 'Effra Heavy';
	font-weight: 900;
	font-size: 3rem;
	color: #e2041b;
	text-align: center;}
.loading .loading_loader p {
	line-height: 43px;
	text-align: center;
	margin-top: 13px;}
.loading .loading_loader p span {
	position: relative;
	padding-top: 10px;}
.loading .loading_loader p span::before {
	content:"";
	width: 32px;
	height: 43px;
	position: absolute;
	top: 8px;
	left: -42px;
	background: url(../img/icon_loading.png) no-repeat left center;
	background-size: 40%;
	padding-left: 50px;}
.video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
		background: #000000;
		z-index: 100;}
.video.none-video {
	background: transparent!important;
	pointer-events: none;}
.bg a {
	background: url(../img/btn_skip.png) no-repeat 0 0;
	position: absolute;
	bottom: 60px;
	right: 60px;
	width: 190px;
	height: 52px;
	overflow: hidden;
 	text-indent: 100%;
	white-space: nowrap;
	z-index: 9999;}
.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
		background: #000000;
		z-index: 100;}
.bg #player {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;}

#wrapper{
	width: 100%;
	min-width: 1280px;
	overflow: hidden;}
}
@media screen and (min-width: 768px){

/****** header ******/
header.header {
	background: #e2041b;
  position: relative;
	overflow:hidden;
	height: 800px;}
.hed_chara { /*character*/
	position: absolute;
	top:72px;
	left:50%;
	margin-left: -466px;
	background: url(../img/main-img.png) no-repeat 0 0;
	background-size: 100vw auto;
	width: 100%;
	height: 100%;
	z-index: 1;}
.hed_star { /*star*/
	position: absolute;
	top:23px;
	left:50%;
	margin-left: 382px;
	background: url(../img/star.png) no-repeat 0 0;
	width: 431px;
	height: 431px;}
.hed_tit1,.hed_tit2 { /*BAKUMATSU FONT*/
	position: absolute;
	top:34px;
	margin-left: 0;
	left: 0;
	font-family: 'Effra Heavy';
	font-weight: 900;
	font-size: 12.5rem;
	color: #000000;
	letter-spacing: -0.05em;
	line-height: 0.65;}
.hed_tit2 {
	top: 130px;}
.hed_subtit1,.hed_subtit2 { /*HOLLOW SOUL FONT*/
	position: absolute;
	top: 250px;
	margin-left: 0;
	left: 0;
	font-family: adobe-garamond-pro, serif;
	font-weight: 600;
	font-size: 7.2rem;
	color: #ffffff;
	letter-spacing: -0.05em;
	line-height: 0.65;}
.hed_subtit2 {
	top: 315px;}
header h1{
	position: absolute;
	top:490px;
	margin-left: 0;
	left: 0;
	z-index:10;}
header h1 img{
	width: 374px;
	height: auto;}
/****** nav ******/

nav{ 
	position: fixed;
	top: 0;
	right: 0;
	background:#000000;
	width: 60px;
	z-index: 10000;
	padding: 0 0 18px 0;
	font-family: 'Effra Heavy';
	font-weight: 900;}
nav .menu{ 
	text-align: center;
	position: relative;
	line-height: 0.7;
	padding: 18px 0 0 0;
	width: 60px;
	height: 39px;
	font-size: 1.2rem;
	cursor: pointer;}
nav .menu:hover{ 
	opacity: 0.8;}
nav .menu::after{ 
	content:"";
	position: absolute;
	top: 35px;
	left: 26px;
	width: 10px;
	height: 3px;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;}
nav section#share ul{
	display:block;
	width: 26px;
	margin: 0 17px;}
nav section#share ul li{
	position: relative;}
nav section#share ul li + li{
	margin-top: 18px;}
nav section#share ul li a{
	display: block;
	width: 26px;
	height: 26px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	-webkit-transition:color .4s ease;
  transition:color .4s ease;}
	nav section#share ul li.sns_tw a::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 26px;
				height: 26px;
				background-color: transparent;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244px%22%20height%3D%2237px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20d%3D%22M13.828%2C36.253%20C30.432%2C36.253%2039.512%2C22.618%2039.512%2C10.796%20C39.512%2C10.407%2039.504%2C10.022%2039.486%2C9.638%20C41.249%2C8.376%2042.781%2C6.799%2043.990%2C5.005%20C42.372%2C5.718%2040.632%2C6.198%2038.805%2C6.414%20C40.669%2C5.306%2042.100%2C3.553%2042.775%2C1.465%20C41.031%2C2.489%2039.099%2C3.235%2037.043%2C3.637%20C35.396%2C1.897%2033.050%2C0.810%2030.454%2C0.810%20C25.469%2C0.810%2021.426%2C4.816%2021.426%2C9.756%20C21.426%2C10.459%2021.505%2C11.141%2021.660%2C11.796%20C14.158%2C11.422%207.505%2C7.862%203.054%2C2.448%20C2.278%2C3.770%201.831%2C5.306%201.831%2C6.946%20C1.831%2C10.050%203.425%2C12.790%205.848%2C14.393%20C4.367%2C14.348%202.976%2C13.945%201.760%2C13.274%20C1.758%2C13.312%201.758%2C13.349%201.758%2C13.388%20C1.758%2C17.721%204.870%2C21.339%209.000%2C22.160%20C8.242%2C22.364%207.444%2C22.475%206.620%2C22.475%20C6.039%2C22.475%205.473%2C22.417%204.923%2C22.313%20C6.073%2C25.868%209.405%2C28.455%2013.356%2C28.528%20C10.266%2C30.928%206.374%2C32.358%202.145%2C32.358%20C1.416%2C32.358%200.698%2C32.317%20-0.009%2C32.234%20C3.987%2C34.772%208.730%2C36.253%2013.828%2C36.253%20%22%2F%3E%3C%2Fsvg%3E');
				background-size: 24px auto;
				background-repeat: no-repeat;
				background-position: center center;
				z-index: 2;
		-webkit-transition:color .4s ease;
    transition:color .4s ease;}
	nav section#share ul li.sns_fb a::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 26px;
				height: 26px;
				background-color: transparent;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246px%22%20height%3D%2246px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20d%3D%22M46.014%2C23.129%20C46.014%2C10.348%2035.716%2C-0.016%2023.013%2C-0.016%20C10.310%2C-0.016%200.012%2C10.348%200.012%2C23.129%20C0.012%2C34.682%208.423%2C44.257%2019.419%2C45.993%20L19.419%2C29.819%20L13.579%2C29.819%20L13.579%2C23.129%20L19.419%2C23.129%20L19.419%2C18.030%20C19.419%2C12.230%2022.853%2C9.025%2028.107%2C9.025%20C30.623%2C9.025%2033.256%2C9.478%2033.256%2C9.478%20L33.256%2C15.174%20L30.355%2C15.174%20C27.498%2C15.174%2026.607%2C16.958%2026.607%2C18.788%20L26.607%2C23.129%20L32.986%2C23.129%20L31.966%2C29.819%20L26.607%2C29.819%20L26.607%2C45.993%20C37.603%2C44.257%2046.014%2C34.682%2046.014%2C23.129%20Z%22%2F%3E%3C%2Fsvg%3E');
				background-size: 26px auto;
				background-repeat: no-repeat;
				z-index: 2;
		-webkit-transition:color .4s ease;
    transition:color .4s ease;}
	nav section#share ul li.sns_tw a:hover::after {
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244px%22%20height%3D%2237px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(226%2C%204%2C%2027)%22%20d%3D%22M13.828%2C36.253%20C30.432%2C36.253%2039.512%2C22.618%2039.512%2C10.796%20C39.512%2C10.407%2039.504%2C10.022%2039.486%2C9.638%20C41.249%2C8.376%2042.781%2C6.799%2043.990%2C5.005%20C42.372%2C5.718%2040.632%2C6.198%2038.805%2C6.414%20C40.669%2C5.306%2042.100%2C3.553%2042.775%2C1.465%20C41.031%2C2.489%2039.099%2C3.235%2037.043%2C3.637%20C35.396%2C1.897%2033.050%2C0.810%2030.454%2C0.810%20C25.469%2C0.810%2021.426%2C4.816%2021.426%2C9.756%20C21.426%2C10.459%2021.505%2C11.141%2021.660%2C11.796%20C14.158%2C11.422%207.505%2C7.862%203.054%2C2.448%20C2.278%2C3.770%201.831%2C5.306%201.831%2C6.946%20C1.831%2C10.050%203.425%2C12.790%205.848%2C14.393%20C4.367%2C14.348%202.976%2C13.945%201.760%2C13.274%20C1.758%2C13.312%201.758%2C13.349%201.758%2C13.388%20C1.758%2C17.721%204.870%2C21.339%209.000%2C22.160%20C8.242%2C22.364%207.444%2C22.475%206.620%2C22.475%20C6.039%2C22.475%205.473%2C22.417%204.923%2C22.313%20C6.073%2C25.868%209.405%2C28.455%2013.356%2C28.528%20C10.266%2C30.928%206.374%2C32.358%202.145%2C32.358%20C1.416%2C32.358%200.698%2C32.317%20-0.009%2C32.234%20C3.987%2C34.772%208.730%2C36.253%2013.828%2C36.253%20%22%2F%3E%3C%2Fsvg%3E');
			}
	nav section#share ul li.sns_fb a:hover::after {
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246px%22%20height%3D%2246px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(226%2C%204%2C%2027)%22%20d%3D%22M46.014%2C23.129%20C46.014%2C10.348%2035.716%2C-0.016%2023.013%2C-0.016%20C10.310%2C-0.016%200.012%2C10.348%200.012%2C23.129%20C0.012%2C34.682%208.423%2C44.257%2019.419%2C45.993%20L19.419%2C29.819%20L13.579%2C29.819%20L13.579%2C23.129%20L19.419%2C23.129%20L19.419%2C18.030%20C19.419%2C12.230%2022.853%2C9.025%2028.107%2C9.025%20C30.623%2C9.025%2033.256%2C9.478%2033.256%2C9.478%20L33.256%2C15.174%20L30.355%2C15.174%20C27.498%2C15.174%2026.607%2C16.958%2026.607%2C18.788%20L26.607%2C23.129%20L32.986%2C23.129%20L31.966%2C29.819%20L26.607%2C29.819%20L26.607%2C45.993%20C37.603%2C44.257%2046.014%2C34.682%2046.014%2C23.129%20Z%22%2F%3E%3C%2Fsvg%3E');
			}


 nav.nav-in{ 
	width: 387px;
	height: calc( 100vh - 110px);
	padding: 100px 70px 10px;
	overflow-y:auto;}
 nav.nav-in section#menu, nav.nav-in section#links, nav.nav-in section#share h2{ display:block;}
 nav.nav-in .nav{ width: 387px;/*height: calc( 100vh - 160px);overflow-y:auto;*/ }
 nav.nav-in .menu{
	position: fixed;
	right: 0;
	top: 15px;
	width: 60px;
	height: 42px;
	  overflow: hidden;
	  text-indent: 100%;
	  white-space: nowrap;}
 nav.nav-in .menu::after{ 
  content: '';
  position: absolute;
  top: 15px;
	left: 15px;
  width: 30px;
  height: 1px;
  background-color: #ffffff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
	border: none;}
 nav.nav-in .menu:before {
  content: '';
  position: absolute;
  top: 15px;
	left: 15px;
  width: 30px;
  height: 1px;
  background-color: #ffffff;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);}

 nav.nav-in section#menu {
	float: left;
	width: 193px;
	min-width: 193px;
	border-right: 1px solid #ffffff;
	font-size: 2rem;}
 nav.nav-in section h2 {
	color: #e2041b;
	font-size: 1.2rem;
	transform: rotate(0);
	position: relative;
	top: auto;
	left: auto;
	margin: 4px 0 24px 0;}
 nav.nav-in section#menu ul li {
	margin-bottom: 42px;}
 nav.nav-in section#menu ul li,
 nav.nav-in section#links ul li {
	position: relative;}
nav.nav-in section#menu ul li a,
 nav.nav-in section#links ul li a {
	display: block;
	padding-left: 20px;}
 nav.nav-in section#menu ul li:before,
 nav.nav-in section#links ul li:before,
.btn_blog span::before,
footer a:before { /* 赤の矢印 */
  content: '';
  position: absolute;
  left: 0px;
  top: 50%;
	margin-top: -2px;
  width: 4px;
  height: 4px;
  border-top: solid 2px #e2041b;
  border-right: solid 2px #e2041b;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);}
 nav.nav-in section#links {
	float: left;
	width: 100px;
	min-width: 80px;
	margin-left: 42px;
	font-size: 1.6rem;}
 nav.nav-in section#menu a:hover,
 nav.nav-in section#links a:hover {
	opacity: 0.8;
}
 nav.nav-in section#links ul li + li {
	margin-top: 16px;}
 nav.nav-in section#share {
	width: 100%;
	padding: 50px 0;
	min-width: 100%;}
 nav.nav-in section#share h2,
 nav.nav-in section#share ul,
 nav.nav-in section#share ul li {
	float: left;}
 nav.nav-in section#share h2 {
	margin: 5px 4px 0 0;}

 nav.nav-in section#share ul{
	display:block;
	width: auto;
	margin: 0 17px;}
 nav.nav-in section#share ul li + li {
    margin-top: 0;
    margin-left: 18px;}



/****** contents ******/
section {
	width: 100%;
	min-width: 1280px;
	overflow: hidden;
	position: relative;}


h2 {
	font-family: 'Effra Heavy';
	font-weight: 900;
	font-size: 2.2rem;
	color: #FFFFFF;
	transform: rotate(-90deg);
	position: absolute;
	top: 66px;
	left: 50%;
	margin-left: -668px;
	z-index: 100;}

/** BANNER AREA **/
.banner {
	text-align: center;
	width: 1280px;
	margin: 33px auto;}
.banner li {
        display: inline-block;}
.banner li img {
	width: 414px;
	height: auto;
	margin: 0 auto;}
.banner li a:hover img { opacity: 0.8;}

/** MOVIE **/
#movieArea {
	width: 100%;
	height: 480px;}
#movieArea video {
	position: relative;
	width: 100%;
	height: auto;
	z-index: -1;}
#movieArea::before{ /* BLACK BOX */
	content:"";
	width: 2000px;
	height: 2000px;
	position: absolute;
	top: -1000px;
	left: 50%;
	margin-left: -2975px;
	background: #000000;
	transform: rotate(45deg);
	z-index: 1;}
#movieArea::after { /* BLACK BOX */
	content:"";
	width: 2000px;
	height: 2000px;
	position: absolute;
	bottom: -1000px;
	left: 50%;
	margin-left: 1000px;
	background: #000000;
	transform: rotate(135deg);
	z-index: 1;}

.movieImg {
	position: relative;
	background: url(../img/img_movie.png) center center no-repeat;
	width: 100%;
	height: 480px;
	}
.movieImg:hover{ 
	opacity: 0.8;}
.movieImg::before {
	content: "";
	position: absolute;
	top: 50%;
	left:50%;
	margin: -65px 0 0 -50px;
	background: url(../img/btn_play_movie.png) 0 0 no-repeat;
	background-size: 100px auto;
	width: 100px;
	height: 131px;
	}


/** NEWS **/
section.news {
	padding: 60px 0 100px 0;}
section.news::after { /* RED BOX */
	content:"";
	width: 2000px;
	height: 2000px;
	position: absolute;
	bottom: 0px;
	left: 50%;
	margin-left: 75px;
	background: #e2041b;
	transform: rotate(45deg);
	z-index: -1;}

.inner{
	width: 1280px;
	margin: 0 auto;}
.inner #newsArea,.inner #twitterArea {
	width: 50%;
	float: left;
	position: relative;}
.inner #newsArea h2 {
    top: 20px;
    left: 0;
    margin-left: -20px;}
.inner #twitterArea h2 {
    top: 72px;
    left: 0;
    margin-left: -68px;}
.btn_blog {
	display: block;
	width: 230px;
	height: 36px;
	line-height: 36px;
	border: 2px solid #ffffff;
	margin: 12px auto 0;
	text-align: center;
	z-index: 1;}
.btn_blog:hover { opacity: 0.8;}
.btn_blog span {
	position: relative;
	color: #ffffff;
	font-size: 1.4rem;
		display: inline-block;
		padding-left: 20px;}
ul.news-list {
	overflow: hidden;
	margin-left: 40px;}
ul.news-list li {
	margin-bottom: 32px;
		position: relative;
		overflow: hidden;}
ul.news-list li a {
		color: #FFFFFF;}

.news-item__image {
	background-color: #65489e;
	position: relative;
	overflow: hidden;
	z-index: 0;
	width: 198px;
	float: left;
	margin-right: 32px;}
.news-item__image:before{
  content:'';
  display:block;
  width:100%;
  height:0;
  padding-bottom:62.62%;}
.news-item__image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
	width: 198px;
	height: auto;}
.news-item__image img[src$="thumbnail.png"] {
	max-width: 70px;
	max-height: 70px;}
.news-item__body {
	float: left;
	padding: 0;
	width: 343px;}
ul.news-list li .news-item__date {
	font-family: 'Effra Heavy';
	font-weight: 900;
	font-size: 1.8rem;
	color: #d10505;}
ul.news-list li a:hover,
a:hover .news-item__image { opacity: 0.8;}

/** TWITTER **/
.twitter {
	background: #292f34;
	color: #fff;
	width: 574px;
	height: 520px;
	margin-left: 66px;
	border-radius: 5px;		/* CSS3草案 */
	-webkit-border-radius: 5px;	/* Safari,Google Chrome用 */}

/* STORY */
#storyArea {
	height: 840px;
	background: url(../img/bg_story.jpg) center 0;
	background-size: cover;}
#storyArea h2 {
	top: 77px;}
#storyArea:before {
	content: "";
	position: absolute;
	top: 113px;
	left: 50%;
	margin-left: -347px;
	background: url(../img/story_txt.png) 0 0;
	background-size: 693px auto;
	width: 693px;
	height: 614px;}
#storyArea p {
	display: none;
	font-family: dnp-shuei-shogomincho-std, sans-serif;
	font-weight: 700;
	text-align: center;
	font-size: 2.3rem;}
#storyArea p strong {
	font-size: 4rem;}

/* CHARACTER */
#characterArea {
	height: 960px;	}
#characterArea h2 {
	top: 90px;
	margin-left: -698px;}
.chara {
	position: relative;
	height: 960px;
	overflow: hidden;}
.chara::after,
.multiple::after,
.chara_young::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -140px;
	width: 1099px;
	height: 960px;
	background: no-repeat;}
.multiple {position: relative;}
.chara_rs { background: #e2041b;}
.chara_rs.chara::after { background-image: url(../img/chara_bg_rs.png);}
.chara_st { background: #3dba98	}
.chara_st.chara .multiple::after { background-image: url(../img/chara_bg_st.png);}
.chara_kk { background: #ffde2f	}
.chara_kk.chara .multiple::after { background-image: url(../img/chara_bg_kk.png);}
.chara_th { background: #2d94f0	}
.chara_th.chara::after { background-image: url(../img/chara_bg_th.png);}
.chara_so { background: #675aa9	}
.chara_so.chara::after { background-image: url(../img/chara_bg_so.png);}
.chara_img {
	position: absolute;
	top: 30px;
	left: 50%;
	margin-left: -610px;
	width: 322px;
	height: 715px;
	background-image: url(../img/chara_img_rs.png);
	background-size: 322px auto;
	background-repeat: no-repeat;}
.chara_st .chara_img { top: 32px;margin-left: -554px;width: 232px;height: 711px;background-image: url(../img/chara_img_st.png);background-size: 232px auto;}
.chara_kk .chara_img { top: 73px;margin-left: -597px;width: 305px;height: 670px;background-image: url(../img/chara_img_kk.png);background-size: 305px auto;}
.chara_th .chara_img { top: 15px;margin-left: -658px;width: 391px;height: 732px;background-image: url(../img/chara_img_th.png);background-size: 391px auto;}
.chara_so .chara_img { top: 40px;margin-left: -592px;width: 288px;height: 702px;background-image: url(../img/chara_img_so.png);background-size: 288px auto;}
.chara_catch {
	position: absolute;
	top: 78px;
	left: 50%;
	margin-left: 203px;
	z-index: 1;
		width: 169px;
		height: 488px;
	background-image: url(../img/chara_catch_rs.png);
	background-size: 169px auto;
	background-repeat: no-repeat;}
.chara_st .chara_catch { width: 169px;height: 646px;top: 80px;margin-left: 191px;background-image: url(../img/chara_catch_st.png);	background-size: 169px auto;}
.chara_kk .chara_catch { width: 241px;height: 629px;top: 85px;margin-left: 180px;background-image: url(../img/chara_catch_kk.png);	background-size: 241px auto;}
.chara_th .chara_catch { width: 242px;height: 603px;top: 83px;margin-left: 177px;background-image: url(../img/chara_catch_th.png);	background-size: 242px auto;}
.chara_so .chara_catch { width: 252px;height: 644px;top: 81px;margin-left: 170px;background-image: url(../img/chara_catch_so.png);	background-size: 252px auto;}

.chara_data {
	position: relative;
	width: 520px;
	height: 864px;
	margin: 0 auto;
	padding: 90px 0 0 0;
	z-index: 1;}
.chara_data h3{
	font-family: dnp-shuei-shogomincho-std, sans-serif;
	font-weight: 700;
	font-size: 9rem;
	color: #000000;
	margin: 0 0 20px -6px;
	line-height: 1;}
.chara_data h3 span{
	display: block;
	font-family: 'Effra Heavy';
	font-weight: 900;
	font-size: 2.8rem;
	margin: 8px 0 0 0;}
.chara_data .cv {
	font-family: 'Noto Sans CJK JP Black';
	font-weight: 900;
	font-size: 3.2rem;
	color: #000000;}
.chara_data .cv::before {
	content: "CV. ";
	font-family: 'Effra Heavy';
	font-weight: 900;
	font-size: 2.6rem;}
.chara_data .txt {
	width: 420px;
	font-size: 1.5rem;
	line-height: 2;
	letter-spacing: -0.5px;}
rt {
		-webkit-transform: translateY(.5em) scale(0.8);
		transform: translateY(.5em) scale(0.8);}
.chara_st .chara_data .txt {
	margin-top: 10px;}
.chara_th .chara_data .txt {
	margin-top: 10px;}
.chara_so .chara_data .txt {
	width: 410px;
	margin-top: 10px;}

.chara_data dl {
	margin-top: 20px;}
.chara_data dl dt {
	background: #000000;
	color: #FFFFFF;
	font-size: 1.2rem;
	width: 97px;
	text-align: center;
	display: inline-block;
	margin: 0 8px 0 0;}
.chara_data dl dd {
	font-size: 1.2rem;
	display: inline-block;
	width: 400px;	}
.chara_data dl dd:nth-child(2),
.chara_data dl dd:nth-child(6) {
	width: 80px;}
.chara_data dl dd:nth-child(4),
.chara_data dl dd:nth-child(8) {
	width: 213px;}

.chara_st .chara_data .txt,.chara_st .chara_data dl dd,
.chara_kk .chara_data .txt,.chara_kk .chara_data dl dd { color: #000000;}


/* slick */
.slider-nav {display: none !important;}
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 50px;
    height: 1313px;
    padding: 0;
    -webkit-transform:;
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
		z-index: 1000;}
.slick-prev::after, .slick-next::after {
				content: "";
				position: absolute;
				 top: 550px;
				left: 0;
				width: 18px;
				height: 53px;
				background-color: transparent;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218px%22%20height%3D%2253px%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%20d%3D%22M1297.993%2C51.989%20L1297.993%2C42.238%20L1309.252%2C25.999%20L1297.993%2C9.759%20L1297.993%2C0.008%20L1316.013%2C25.999%20L1297.993%2C51.989%20ZM17.975%2C0.511%20L17.975%2C10.250%20L6.736%2C26.470%20L17.975%2C42.690%20L17.975%2C52.430%20L-0.014%2C26.470%20L17.975%2C0.511%20Z%22%2F%3E%3C%2Fsvg%3E');
				background-repeat: no-repeat;
			}

/*section#characterArea .slick-prev, section#characterArea .slick-next { top: 0;}*/
.slick-prev {margin-left: -658px;}
.slick-next {margin-left: 640px;transform: scale(-1, 1) translate(0, -50%);-webkit-transform: scale(-1, 1) translate(0, -50%);}
.slick-dots {
    position: absolute;
		top: 754px;
    bottom: auto;
		left: 50%;
    display: block;
    width: 1280px;
    padding: 0;
    margin: 0 0 0 -640px;
    list-style: none;}
.slick-dots li {
    position: relative;
    display: inline-block;
    width: 248px;
    height: 50px;
    margin: 0;
    padding: 0;
    cursor: pointer;}
.slick-dots li + li {
		margin-left: 10px;}
.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 248px;
    height: 50px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;}
.slick-dots li button:hover{
	opacity: 0.8;}
.slick-dots li button:before {
	background-image: url(../img/chara_nav_rs.png);
	background-size: auto 50px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 248px;
    height: 50px;
    content: '';
    text-align: center;
    opacity: 1;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}
.slick-dots li:nth-child(2) button:before {	background-image: url(../img/chara_nav_st.png);}
.slick-dots li:nth-child(3) button:before {	background-image: url(../img/chara_nav_kk.png);}
.slick-dots li:nth-child(4) button:before {	background-image: url(../img/chara_nav_th.png);}
.slick-dots li:nth-child(5) button:before {	background-image: url(../img/chara_nav_so.png);}
.slick-dots li.slick-active button:before {
    opacity: 1;
		background-image: url(../img/chara_nav_rs_on.png);}
.slick-dots li:nth-child(2).slick-active button:before {	background-image: url(../img/chara_nav_st_on.png);}
.slick-dots li:nth-child(3).slick-active button:before {	background-image: url(../img/chara_nav_kk_on.png);}
.slick-dots li:nth-child(4).slick-active button:before {	background-image: url(../img/chara_nav_th_on.png);}
.slick-dots li:nth-child(5).slick-active button:before {	background-image: url(../img/chara_nav_so_on.png);}

/* chara add */
.slick-dots li:nth-child(n+6) {
		margin-top: 10px;
}
.slick-dots li:nth-child(5) + li,
.slick-dots li:nth-child(10) + li {
		margin-left: 0;}

/* 徳川慶喜 */
.chara_yt { background: #ebebe3;}
.chara_yt.chara::after { background-image: url(../img/chara_bg_yt.png);}
.chara_yt .chara_img { top: 17px;margin-left: -635px;width: 359px;height: 729px;background-image: url(../img/chara_img_yt.png);background-size: 359px auto;}
.chara_yt .chara_catch { width: 222px;height: 558px;top: 84px;margin-left: 183px;background-image: url(../img/chara_catch_yt.png);	background-size: 222px auto;}
.chara_yt .chara_data .txt { margin-top: 10px;}
.slick-dots li:nth-child(6) button:before {	background-image: url(../img/chara_nav_yt.png);}
.slick-dots li:nth-child(6).slick-active button:before { background-image: url(../img/chara_nav_yt_on.png);}
.chara_yt .chara_data .txt,.chara_yt .chara_data dl dd { color: #000000;}
.chara_yt .chara_data dl dd:nth-child(12) { margin-top: -16px;}


/* 久坂玄機 */
.chara_gk { background: #17184b;}
.chara_gk.chara::after { background-image: url(../img/chara_bg_gk.png);}
.chara_gk .chara_img { top: 25px;margin-left: -653px;width: 436px;height: 723px;background-image: url(../img/chara_img_gk.png);background-size: 436px auto;}
.chara_gk .chara_catch { width: 221px;height: 647px;top: 82px;margin-left: 186px;background-image: url(../img/chara_catch_gk.png);	background-size: 221px auto;}
.chara_gk .chara_data h3,.chara_gk .chara_data .cv { color: #ffffff;}
.chara_gk .chara_data .txt { margin-top: 10px;}
.slick-dots li:nth-child(7) button:before {	background-image: url(../img/chara_nav_gk.png);}
.slick-dots li:nth-child(7).slick-active button:before { background-image: url(../img/chara_nav_gk_on.png);}

/* 柿本人麻呂 */
.chara_m { background: #abced8;}
.chara_m.chara .chara_young::after { background-image: url(../img/chara_bg_m.png);}
.chara_m .chara_young .chara_img { top: 128px;margin-left: -610px;width: 286px;height: 604px;background-image: url(../img/chara_img_m.png);background-size: 286px auto;}
.chara_m .chara_young .chara_catch { width: 142px;height: 453px;top: 84px;margin-left: 223px;background-image: url(../img/chara_catch_m.png);	background-size: 142px auto;}
.chara_m .chara_data .txt,.chara_m .chara_data dl dd { color: #000000;}
.slick-dots li:nth-child(8) button:before {	background-image: url(../img/chara_nav_m.png?20200813);}
.slick-dots li:nth-child(8).slick-active button:before { background-image: url(../img/chara_nav_m_on.png?20200813);}



/* 在原業平 */
.chara_an { background: #f6bfbc;}
.chara_an.chara::after { background-image: url(../img/chara_bg_an.png);}
.chara_an .chara_img { top: 21px;margin-left: -666px;width: 378px;height: 736px;background-image: url(../img/chara_img_an.png);background-size: 378px auto;}
.chara_an .chara_catch { width: 223px;height: 663px;top: 84px;margin-left: 180px;background-image: url(../img/chara_catch_an.png);	background-size: 223px auto;}
.chara_an .chara_data .txt,.chara_an .chara_data dl dd { color: #000000;}
.slick-dots li:nth-child(9) button:before {	background-image: url(../img/chara_nav_an.png?20200813);}
.slick-dots li:nth-child(9).slick-active button:before { background-image: url(../img/chara_nav_an_on.png?20200813);}

/* 和泉式部 */
.chara_is { background: #b94047;}
.chara_is.chara::after { background-image: url(../img/chara_bg_is.png);}
.chara_is .chara_img { top: 37px;margin-left: -639px;width: 311px;height: 709px;background-image: url(../img/chara_img_is.png);background-size: 311px auto;}
.chara_is .chara_catch { width: 231px;height: 662px;top: 84px;margin-left: 172px;background-image: url(../img/chara_catch_is.png);	background-size: 231px auto;}
.chara_is .chara_data .txt { margin-top: 10px;}
.slick-dots li:nth-child(10) button:before {	background-image: url(../img/chara_nav_is.png?20200813);}
.slick-dots li:nth-child(10).slick-active button:before { background-image: url(../img/chara_nav_is_on.png?20200813);}

/* 藤原定家 */
.chara_ft { background: #9d5b89;}
.chara_ft.chara::after { background-image: url(../img/chara_bg_ft.png);}
.chara_ft .chara_img { top: 57px;margin-left: -689px;width: 409px;height: 690px;background-image: url(../img/chara_img_ft.png);background-size: 409px auto;}
.chara_ft .chara_catch { width: 252px;height: 651px;top: 84px;margin-left: 166px;background-image: url(../img/chara_catch_ft.png);	background-size: 252px auto;}
.slick-dots li:nth-child(11) button:before {	background-image: url(../img/chara_nav_ft.png?20200813);}
.slick-dots li:nth-child(11).slick-active button:before { background-image: url(../img/chara_nav_ft_on.png?20200813);}


/* 勝海舟 */
.chara_kk2 { background: #674343;}
.chara_kk2.chara .multiple::after { background-image: url(../img/chara_bg_kk2.png);}
.chara_kk2 .multiple .chara_img { top: 20px;margin-left: -593px;width: 258px;height: 726px;background-image: url(../img/chara_img_kk2.png);background-size: 258px auto;}
.chara_kk2 .multiple .chara_catch { width: 179px;height: 544px;top: 84px;margin-left: 195px;background-image: url(../img/chara_catch_kk2.png);	background-size: 179px auto;}
.slick-dots li:nth-child(12) button:before {	background-image: url(../img/chara_nav_kk2.png);}
.slick-dots li:nth-child(12).slick-active button:before { background-image: url(../img/chara_nav_kk2_on.png);}

/* 吉田松陰 */
.chara_sy { background: #4a582b;}
.chara_sy.chara::after { background-image: url(../img/chara_bg_sy.png);}
.chara_sy .chara_img { top: 81px;margin-left: -585px;width: 259px;height: 608px;background-image: url(../img/chara_img_sy.png);background-size: 258.5px auto;}
.chara_sy .chara_img::before { content:"";position:absolute;top: 545px;margin-left: -30px;width: 75px;height: 20px;background-image: url(../img/past.png);background-size: 75px auto;z-index: 10;}

.chara_sy .chara_catch { width: 208px;height: 370px;top: 84px;margin-left: 195px;background-image: url(../img/chara_catch_sy.png);	background-size: 208px auto;}
.chara_sy .chara_data .txt { margin-top: 10px;}
.slick-dots li:nth-child(13) button:before {	background-image: url(../img/chara_nav_sy.png);}
.slick-dots li:nth-child(13).slick-active button:before { background-image: url(../img/chara_nav_sy_on.png);}

/* 井伊直弼 */
.chara_ni { background: #16160e;}
.chara_ni.chara::after { background-image: url(../img/chara_bg_ni.png);}
.chara_ni .chara_img { top: 24px;margin-left: -600px;width: 291px;height: 720px;background-image: url(../img/chara_img_ni.png);background-size: 291px auto;}
.chara_ni .chara_img::before { content:"";position:absolute;top: 602px;margin-left: -15px;width: 75px;height: 20px;background-image: url(../img/past.png);background-size: 75px auto;z-index: 10;}

.chara_ni .chara_catch { width: 220px;height: 596px;top: 84px;margin-left: 183px;background-image: url(../img/chara_catch_ni.png);	background-size: 220px auto;}
.chara_ni .chara_data h3,.chara_ni .chara_data .cv { color: #ffffff;}
.chara_ni .chara_data .txt { margin-top: 10px;}
.slick-dots li:nth-child(14) button:before {	background-image: url(../img/chara_nav_ni.png);}
.slick-dots li:nth-child(14).slick-active button:before { background-image: url(../img/chara_nav_ni_on.png);}

/* 久坂玄瑞 */
.chara_gk2 { background: #028760;}
.chara_gk2.chara::after { background-image: url(../img/chara_bg_gk2.png);}
.chara_gk2 .chara_img { top: 122px;margin-left: -550px;width: 251px;height: 559px;background-image: url(../img/chara_img_gk2.png);background-size: 251px auto;}
.chara_gk2 .chara_catch { width: 73px;height:470px;top: 84px;margin-left: 201px;background-image: url(../img/chara_catch_gk2.png);	background-size: 73px auto;}
.chara_gk2 .chara_data .txt { margin-top: 10px; line-height: 1.9;}
.chara_gk2 .chara_data dl { margin-top: 10px;}
.slick-dots li:nth-child(15) button:before {	background-image: url(../img/chara_nav_gk2.png?20200703);}
.slick-dots li:nth-child(15).slick-active button:before { background-image: url(../img/chara_nav_gk2_on.png?20200703);}



.chara_change {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
		position: absolute;
		top: 540px;
		left:50%;
		margin-left: -600px;
		width: 124px;
		height: 123px;
		z-index:10000;
		cursor: pointer;
		background: url(../img/btn_change_03.png) no-repeat;
		background-size: 124px auto;
	-webkit-transition:all .4s ease;
    transition:all .4s ease;}
.young .chara_change {
		background-image: url(../img/btn_change_01.png) !important;}

.young .multiple {display:none;}.chara_young {display:none;position:relative;}
.young .chara_young {display:block;}

/* 高杉晋作 young */
.chara_st.chara .chara_young::after { background-image: url(../img/chara_bg_st2.png);}
.chara_st .chara_young .chara_img { top: 119px;margin-left: -517px;width: 198px;height: 577px;background-image: url(../img/chara_img_st2.png);background-size: 198px auto;}
.chara_st .chara_young .chara_catch { width: 159px;height: 517px;top: 80px;margin-left: 201px;background-image: url(../img/chara_catch_st2.png);	background-size: 159px auto;}

/* 桂小五郎 young */
.chara_kk.chara .chara_young::after { background-image: url(../img/chara_bg_kk_2.png);}
.chara_kk .chara_young .chara_img { top: 134px;margin-left: -554px;width: 223px;height: 558px;background-image: url(../img/chara_img_kk_2.png);background-size: 223px auto;}
.chara_kk .chara_young .chara_catch { width: 163px;height: 509px;top: 85px;margin-left: 204px;background-image: url(../img/chara_catch_kk_2.png);	background-size: 163px auto;}
.chara_kk .chara_young .chara_data .txt { margin-top: 10px;}

/* マロン young */
.chara_m.chara .multiple::after { background-image: url(../img/chara_bg_m2.png);}
.chara_m .multiple .chara_img { top: 128px;margin-left: -590px;width: 241px;height: 604px;background-image: url(../img/chara_img_m2.png);background-size: 241px auto;}
.chara_m .multiple .chara_catch { width: 159px;height: 544px;top: 84px;margin-left: 213px;background-image: url(../img/chara_catch_m2.png);	background-size: 159px auto;}
.chara_m .chara_change {		background-image: url(../img/btn_change_05.png);}
.chara_m.young .chara_change {		background-image: url(../img/btn_change_04.png) !important;}
.chara_m .chara_young .chara_data .txt { margin-top: 10px;}

/* 勝海舟 young */
.chara_kk2.chara .chara_young::after { background-image: url(../img/chara_bg_kk2_2.png);}
.chara_kk2 .chara_young .chara_img { top: 20px;margin-left: -593px;width: 288px;height: 724px;background-image: url(../img/chara_img_kk2_2.png);background-size: 288px auto;}
.chara_kk2 .chara_young .chara_catch { width: 237px;height: 540px;top: 84px;margin-left: 195px;background-image: url(../img/chara_catch_kk2_2.png);	background-size: 237px auto;}
.chara_kk2 .chara_change {		background-image: url(../img/btn_change_02.png);}
.chara_kk2 .chara_young .chara_data .txt { margin-top: 10px;}

/* GALLERY */
#galleryArea h2 {
	top: 90px;
	margin-left: -679px;}
#galleryArea ul {
	width: 1280px;
	margin: 52px auto;}
#galleryArea ul li {
	display: inline-block;
	width: 604px;
	margin-left: 41px;}
#galleryArea ul li + li {
	margin-left: 26px;}
#galleryArea ul li dl dt{
	position: relative;
	width: 604px;
	height: 340px;
	overflow: hidden;
	z-index: 0;
	position: relative;}
#galleryArea ul li dl dt:after{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -40px 0 0 -40px;
	content: "";
	width: 80px;
	height: 80px;
	background: url(../img/btn_play_mini.png) no-repeat 0 0;
	background-size: 80px auto;}
#galleryArea ul li dl dt:before{
  content:'';
  display:block;
  width:100%;
  height:0;
  padding-bottom:56.29%;}
#galleryArea ul li dl dt img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
	width: auto;
	height: 340px;}
#galleryArea ul li:hover dt:after,
#galleryArea ul li a:hover img{
	opacity: 0.8;}

#galleryArea ul li dt {
	margin-bottom: 36px;}
#galleryArea ul li dd h3 {
	margin-bottom: 5px;}
#galleryArea ul li dd p {
	font-size: 1.2rem;}

/****** footer ******/
/* copyright */
footer {
	padding: 60px 0 40px;
	color: #f8f8f8;
  text-align: center;}
footer a {
	position: relative;
	padding-left: 20px;
	margin-right: 50px;}
footer .copyright {
	display: inline-block;}

}
@media screen and (min-width: 1250px){
.hed_chara { /*character*/
	position: absolute;
	top:72px;
	left:50%;
	right: auto;
	margin-left: -466px;
	background-size: 1310px auto;
	width: 100%;
	height: 100%;
	z-index: 1;}
.hed_tit1,.hed_tit2 { /*BAKUMATSU FONT*/
	position: absolute;
	top:34px;
	margin-left: 0;
	left: 0;
	font-family: 'Effra Heavy';
	font-weight: 900;
	font-size: 10vw;
	color: #000000;
	letter-spacing: -0.05em;
	line-height: 0.65;}
.hed_tit2 {
	top: 10.5vw;}
.hed_subtit1,.hed_subtit2 { /*HOLLOW SOUL FONT*/
	position: absolute;
	top: 20.3vw;
	margin-left: 0;
	left: 0;
	font-family: adobe-garamond-pro, serif;
	font-weight: 600;
	font-size: 6vw;
	color: #ffffff;
	letter-spacing: -0.05em;
	line-height: 0.65;}
.hed_subtit2 {
	top: 25.6vw;}
}
@media screen and (min-width: 1600px){

/****** header ******/
header.header {
	background: #e2041b;
  position: relative;
	overflow:hidden;
	height: 800px;}
.hed_chara { /*character*/
	position: absolute;
	top:72px;
	left:50%;
	right: auto;
	margin-left: -466px;
	background-size: 1310px auto;
	width: 100%;
	height: 100%;
	z-index: 1;}
.hed_star { /*star*/
	position: absolute;
	top:23px;
	left:50%;
	margin-left: 382px;
	background: url(../img/star.png) no-repeat 0 0;
	width: 431px;
	height: 431px;}
.hed_tit1,.hed_tit2 { /*BAKUMATSU FONT*/
	position: absolute;
	top:34px;
	margin-left: -801px;
	left:50%;
	font-family: 'Effra Heavy';
	font-weight: 900;
	font-size: 17.6rem;
	color: #000000;
	letter-spacing: -0.05em;
	line-height: 0.65;}
.hed_tit2 {
	top:171px;}
.hed_subtit1,.hed_subtit2 { /*HOLLOW SOUL FONT*/
	position: absolute;
	top:331px;
	margin-left: -793px;
	left:50%;
	font-family: adobe-garamond-pro, serif;
	font-weight: 600;
	font-size: 10rem;
	color: #ffffff;
	letter-spacing: -0.05em;
	line-height: 0.65;}
.hed_subtit2 {
	top:414px;}
header h1{
	position: absolute;
	top:490px;
	margin-left: -800px;
	left:50%;	z-index:10;}
header h1 img{
	width: 374px;
	height: auto;}
}


/****** common ******/
.flL{float:left;}
.flR{float:right;}
.clB{clear:both;}
.alC{text-align:center;}
.alR{text-align:right;}
strong, b{font-weight:bold;}

/* margin */
.marB0{margin-bottom:0 !important;}
.marB24{margin-bottom:24px !important;}
.marB30{margin-bottom:30px !important;}
.marR0{margin-right:0 !important;}
.marR30{margin-right:30px !important;}
.marT0{margin-top:0 !important;}
.marT30{margin-top:30px;}


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