@charset "utf-8";

/*********** responsive **********/
@media screen and (max-width: 767px){
html{
  font-size: 62.5%;
  -webkit-overflow-scrolling: touch;
}
body{
	margin:0 auto 0;
	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;
	-moz-transition:color .4s ease;
    -o-transition:color .4s ease;
    transition:color .4s ease;}
.sp{ display: block;}
.pc{ 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: 767px;
    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: 767px;
    height: 100%;
    overflow: hidden;
		background: #000000;
		z-index: 100;}
.bg #player {
    position:relative;
    width: 767px;
    height: auto;
    pointer-events: none;}

/****** header ******/
header.header {
	background: #e2041b;
  position: relative;
	overflow:hidden;
	height: 954px;}
.hed_chara { /*character*/
	position: absolute;
	top: 0;
	left:0;
	background: url(../img/sp/main-img.png) no-repeat 0 0;
	background-size: 767px auto;
	width: 100%;
	height: 100%;
	z-index: 1;}
.hed_star { /*star*/
	position: absolute;
	top: 24px;
	right: 0;
	background: url(../img/sp/star.png) no-repeat 0 0;
	width: 347px;
	height: 410px;}
.hed_tit1,.hed_tit2,.hed_subtit1,.hed_subtit2 {	display:none }
header h1{
	position: absolute;
	top: 15px;
	left: 47px;}
header h1 img{
	width: auto;
	height: 287px;}
/****** nav ******/

nav{ 
	position: fixed;
	top: 0;
	right: 0;
	background:#000000;
	width: 106px;
	z-index: 10000;
	padding: 0 0 35px 0;
	font-family: 'Effra Heavy';
	font-weight: 900;}
nav .menu{ 
	text-align: center;
	position: relative;
	line-height: 0.7;
	padding: 28px 0 0 0;
	width: 106px;
	height: 75px;
	font-size: 2.2rem;
	cursor: pointer;}
nav .menu::after{ 
	content:"";
	position: absolute;
	top: 58px;
	left: 45px;
	width: 18px;
	height: 6px;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;}
nav section#share ul{
	display:block;
	width: 46px;
	margin: 0 32px;}
nav section#share ul li{
	position: relative;}
nav section#share ul li + li{
	margin-top: 28px;}
nav section#share ul li a{
	display: block;
	width: 46px;
	height: 46px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;}
	nav section#share ul li.sns_tw a::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 46px;
				height: 46px;
				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: 44px auto;
				background-repeat: no-repeat;
				background-position: center center;
				z-index: 2;
			}
	nav section#share ul li.sns_fb a::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 46px;
				height: 46px;
				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: 46px auto;
				background-repeat: no-repeat;
				z-index: 2;
			}



 nav.nav-in{ 
	width: 587px;
	min-height: calc( 100% - 200px);
	padding: 100px 90px;}
 nav.nav-in section#menu, nav.nav-in section#links, nav.nav-in section#share h2{ display:block;}
 nav.nav-in .nav{ 	position: absolute;width: 587px;height: calc( 100% - 200px);overflow-y:auto; }
 nav.nav-in .menu{
	position: fixed; 
	right: 0;
	top: 30px;
	width: 106px;
	height: 42px;
	  overflow: hidden;
	  text-indent: 100%;
	  white-space: nowrap;}
 nav.nav-in .menu::after{ 
  content: '';
  position: absolute;
  top: 23px;
	left: 23px;
  width: 46px;
  height: 1px;
  background-color: #ffffff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
	border: none;}
 nav.nav-in .menu:before {
  content: '';
  position: absolute;
  top: 23px;
	left: 23px;
  width: 46px;
  height: 1px;
  background-color: #ffffff;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);}

 nav.nav-in section#menu {
	float: left;
	width: 291px;
	min-width: 291px;
	padding: 0 0 80px;
	border-right: 2px solid #ffffff;
	font-size: 3.2rem;}
 nav.nav-in section h2 {
	color: #e2041b;
	font-size: 2.2rem;
	transform: rotate(0);
	position: relative;
	top: auto;
	left: auto;
	margin: 4px 0 43px 0;}
nav.nav-in section#menu ul {
    margin-top: -45px;
}
 nav.nav-in section#menu ul li,
 nav.nav-in section#links ul li {
	position: relative;
	padding: 43px 0 43px 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: 160px;
	min-width: 160px;
	margin-left: 74px;
	font-size: 2.8rem;}

 nav.nav-in section#share {
	position: absolute;
	width: 100%;
	min-width: 100%;
	bottom: 40px;}
 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: 767px;
	overflow: hidden;
	position: relative;}


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

/** BANNER AREA **/

.banner {
	text-align: center;
	width: 767px;
	margin: 30px auto;}
.banner li img {
	width: 680px;
	height: auto;
	margin: 0 auto;}
/** MOVIE **/
#movieArea {
	width: 100%;
	height: 400px;}
#movieArea video {
	position: relative;
	width: 100%;
	height: auto;
	z-index: -1;}
#movieArea::before{ /* BLACK BOX */
	content:"";
	width: 300px;
	height: 300px;
	position: absolute;
	top: -150px;
	left: 50%;
	margin-left: -603px;
	background: #000000;
	transform: rotate(45deg);
	z-index: 1;}
#movieArea::after { /* BLACK BOX */
	content:"";
	width: 300px;
	height: 300px;
	position: absolute;
	bottom: -150px;
	left: 50%;
	margin-left: 298px;
	background: #000000;
	transform: rotate(135deg);
	z-index: 1;}
.movieImg {
	position: relative;
	background: url(../img/sp/img_movie.png) center center no-repeat;
	width: 100%;
	height: 400px;
	}
.movieImg::before {
	content: "";
	position: absolute;
	top: 50%;
	left:50%;
	margin: -94px 0 0 -76px;
	background: url(../img/btn_play_movie.png) 0 0 no-repeat;
	background-size: 158px auto;
	width: 158px;
	height: 189px;
	}


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

.inner{
	width: 767px;
	margin: 0 auto;}
.inner #newsArea,.inner #twitterArea {
	width: 100%;
	position: relative;}
.inner #newsArea h2 {
    top: 20px;}
.inner #twitterArea h2 {
    top: 72px;
		margin-left: -450px;}
.btn_blog {
	display: block;
	width: 376px;
	height: 60px;
	line-height: 60px;
	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: 2.2rem;
		display: inline-block;
		padding-left: 20px;}
ul.news-list {
	overflow: hidden;
	width: 660px;
	margin: 0 44px 0 63px;}
ul.news-list li {
	margin-bottom: 38px;
		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: 340px;
	float: left;
	margin-right: 20px;}
.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: 340px;
	height: auto;}
.news-item__image img[src$="thumbnail.png"] {
	max-width: 116px;
	max-height: 116px;}
.news-item__body {
	float: left;
	padding: 0;
	width: 300px;
	font-size: 2.6rem;}
ul.news-list li .news-item__date {
	font-family: 'Effra Heavy';
	font-weight: 900;
	font-size: 2.8rem;
	color: #d10505;}
ul.news-list li a:hover,
a:hover .news-item__image { opacity: 0.8;}

/** TWITTER **/
.twitter {
	background: #292f34;
	color: #fff;
	width: 660px;
	height: 562px;
	margin: 70px 44px 0 63px;
	border-radius: 5px;		/* CSS3草案 */
	-webkit-border-radius: 5px;	/* Safari,Google Chrome用 */}

/* STORY */
#storyArea {
	height: 906px;
	background: url(../img/sp/bg_story.jpg) 0 0;}
#storyArea h2 {
	top: 77px;	}
#storyArea:before {
	content: "";
	position: absolute;
	top: 156px;
	left: 50%;
	margin-left: -305px;
	background: url(../img/sp/story_txt.png) 0 0;
	background-size: 610px auto;
	width: 610px;
	height: 648px;	}
#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: 1677px;}
#characterArea h2 {
	top: 190px;
	margin-left: -420px;}
.chara,
.chara_young {
	position: relative;
	height: 1677px;
	overflow: hidden;
	z-index: -1;}
.chara::after,
.multiple::after,
.chara_young::after {
	content: "";
	position: absolute;
	top: 103px;
	left: 0;
	width: 767px;
	height: 622px;
	background: url(../img/sp/chara_bg_rs.png) no-repeat;}
.chara_rs { background: #e2041b;}
.chara_st { background: #3dba98	}
.chara_st.chara .multiple::after { background-image: url(../img/sp/chara_bg_st.png);}
.chara_kk { background: #ffde2f	}
.chara_kk.chara .multiple::after { background-image: url(../img/sp/chara_bg_kk.png);}
.chara_th { background: #2d94f0	}
.chara_th.chara::after { background-image: url(../img/sp/chara_bg_th.png);}
.chara_so { background: #675aa9	}
.chara_so.chara::after { background-image: url(../img/sp/chara_bg_so.png);}
.chara_img {
	position: absolute;
	top: 126px;
	left: 36px;
	z-index: 1;
	width: 335px;height: 744px;
	background-image: url(../img/sp/chara_img_rs.png);
	background-repeat: no-repeat;}
.chara_st .multiple .chara_img { top: 129px;left: 108px;width: 240px;height: 739px;background-image: url(../img/sp/chara_img_st.png);}
.chara_kk .multiple .chara_img { top: 166px;left: 44px;width: 318px;height: 696px;background-image: url(../img/sp/chara_img_kk.png);}
.chara_th .chara_img { top: 116px;left: 8px;width: 407px;height: 761px;background-image: url(../img/sp/chara_img_th.png);}
.chara_so .chara_img { top: 132px;left: 64px;width: 298px;height: 730px;background-image: url(../img/sp/chara_img_so.png);}
.chara_catch {
	position: absolute;
	top: 151px;
	right: 49px;
	z-index: 1;
	width: 135px;
	height: 390px;
	background-image: url(../img/sp/chara_catch_rs.png);
	background-repeat: no-repeat;}
.chara_st .multiple .chara_catch { width: 127px;height: 507px;right: 72px;background-image: url(../img/sp/chara_catch_st.png);}
.chara_kk .multiple .chara_catch { width: 192px;height: 500px;right: 29px;background-image: url(../img/sp/chara_catch_kk.png);}
.chara_th .chara_catch { width: 178px;height: 481px;right: 35px;background-image: url(../img/sp/chara_catch_th.png);}
.chara_so .chara_catch { width: 200px;height: 510px;right: 44px;background-image: url(../img/sp/chara_catch_so.png);}
.chara_data {
	position: relative;
	width: 660px;
	height: 973px;
	margin: 690px 44px 0 63px;
	z-index: 1;}
.chara_data h3{
	font-family: dnp-shuei-shogomincho-std, sans-serif;
	font-weight: 700;
	font-size: 7.5rem;
	color: #000000;
	line-height: 1;
	margin: 0 0 7px 328px;}
.chara_data h3 span{
	display: block;
	font-family: 'Effra Heavy';
	font-weight: 900;
	font-size: 2.6rem;
	margin: 6px 0 0 9px;}
.chara_data .cv {
	font-family: 'Noto Sans CJK JP Black';
	font-weight: 900;
	font-size: 4rem;
	color: #000000;
	margin-left: 333px;}
.chara_data .cv::before {
	content: "CV. ";
	font-family: 'Effra Heavy';
	font-weight: 900;
	font-size: 2.6rem;}
.chara_data .txt {
	font-size: 2.4rem;
	margin-top:4px;
	line-height: 2;
	letter-spacing: -1px;}
.chara_st .chara_data .txt,
.chara_th .chara_data .txt,
.chara_so .chara_data .txt {
	margin-top: 15px;}
rt {
	transform: translateY(.5em);}
.chara_data dl {
	margin-top: 30px;}
.chara_data dl dt {
	background: #000000;
	color: #FFFFFF;
	font-size: 1.8rem;
	width: 168px;
	text-align: center;
	display: inline-block;
	margin: 0 10px 6px 0;}
.chara_data dl dd {
	font-size: 2rem;
	display: inline-block;
	width: 475px;
	margin-bottom: 6px;}
.chara_data dl dd span {
	font-size: 1.9rem;}
.chara_data dl dd:nth-child(2),
.chara_data dl dd:nth-child(6),
.chara_data dl dd:nth-child(4),
.chara_data dl dd:nth-child(8) {
	width: 140px;}
.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 */
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 108px;
    height: 193px;
    padding: 0;
    -webkit-transform:;
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
		background-color: transparent;
		z-index: 1000;}
			.slick-prev::after, .slick-next::after {
				content: "";
				position: absolute;
				top: 70px;
				left: 20px;
				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;
			}
.banner .slick-prev,.banner .slick-next {
    width: 44px;
    height: 190px;}
.banner .slick-prev::after,.banner .slick-next::after {
				top: 75px;
				left: 10px;
    width: 13px;
    height: 40px;
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-size: auto 40px;}
section#characterArea .single-item .slick-prev, section#characterArea .single-item .slick-next { top: 560px;}
.slick-prev {margin-left: -383px;}
.slick-next {margin-left: 275px;transform: scale(-1, 1) translate(0, -50%);-webkit-transform: scale(-1, 1) translate(0, -50%);}
.banner .slick-prev {margin-left: -380px;}
.banner .slick-next {margin-left: 336px;}
.slider-nav {
	width: 960px;
	position: absolute !important;
    top: 18px;
		z-index: 100;}
.slider-nav div div[class^="nav"] {background-size: 220px auto;background-repeat: no-repeat;background-position: right 0;webkit-overflow-scrolling: touch;}
.slider-nav div.slick-slide {	width: 220px;height: 92px;}
.slider-nav div.slick-slide img {	opacity:0;width: 220px;height:auto;float:right;}
.slider-nav div.slick-current img {	opacity:1;}
.slider-nav div.nav01 {	background-image: url(../img/sp/chara_nav_rs.png);}
.slider-nav div.nav02 {	background-image: url(../img/sp/chara_nav_st.png);}
.slider-nav div.nav03 {	background-image: url(../img/sp/chara_nav_kk.png);}
.slider-nav div.nav04 {	background-image: url(../img/sp/chara_nav_th.png);}
.slider-nav div.nav05 {	background-image: url(../img/sp/chara_nav_so.png);}

.slick-dots,.slick-dots li { display:none; width:0;height:0;}

/* 徳川慶喜 */
.chara_yt { background: #ebebe3;}
.chara_yt.chara::after { background-image: url(../img/sp/chara_bg_yt.png);}
.chara_yt .chara_img { top: 65px;left: 0;width: 380px;height: 786px;background-image: url(../img/sp/chara_img_yt.png);}
.chara_yt .chara_catch { width: 178px;height: 446px;background-image: url(../img/sp/chara_catch_yt.png);}
.chara_yt .chara_data .txt { margin-top: 10px;}
.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;}
.slider-nav div.nav06 {	background-image: url(../img/sp/chara_nav_yt.png);}


/* 久坂玄機 */
.chara_gk { background: #17184b;}
.chara_gk.chara::after { background-image: url(../img/sp/chara_bg_gk.png);}
.chara_gk .chara_img { top: 125px;left: 0;width: 450px;height: 752px;background-image: url(../img/sp/chara_img_gk.png);}
.chara_gk .chara_catch { width: 166px;height: 485px;background-image: url(../img/sp/chara_catch_gk.png);}
.chara_gk .chara_data h3,.chara_gk .chara_data .cv { color: #ffffff;}
.chara_gk .chara_data .txt { margin-top: 10px;}
.chara_gk .chara_data dl dd span { font-size: 1.8rem;}
.slider-nav div.nav07 {	background-image: url(../img/sp/chara_nav_gk.png);}

/* 柿本人麻呂 */
.chara_m { background: #abced8;}
.chara_m.chara .chara_young::after { background-image: url(../img/sp/chara_bg_m.png);}
.chara_m .chara_young .chara_img { top: 220px;left: 66px;width: 304px;height: 642px;background-image: url(../img/sp/chara_img_m.png);}
.chara_m .chara_young .chara_catch { width: 127px;height: 404px;background-image: url(../img/sp/chara_catch_m.png);}
.chara_m .chara_data .txt,.chara_m .chara_data dl dd { color: #000000;}
.slider-nav div.nav08 {	background-image: url(../img/sp/chara_nav_m.png?20200813);}

/* 在原業平 */
.chara_an { background: #f6bfbc;}
.chara_an.chara::after { background-image: url(../img/sp/chara_bg_an.png);}
.chara_an .chara_img { top: 118px;left: 0;width: 369px;height: 766px;background-image: url(../img/sp/chara_img_an.png);}
.chara_an .chara_catch { width: 178px;height: 530px;background-image: url(../img/sp/chara_catch_an.png);}
.chara_an .chara_data .txt,.chara_an .chara_data dl dd { color: #000000;}
.slider-nav div.nav09 {	background-image: url(../img/sp/chara_nav_an.png?20200813);}

/* 和泉式部 */
.chara_is { background: #b94047;}
.chara_is.chara::after { background-image: url(../img/sp/chara_bg_is.png);}
.chara_is .chara_img { top: 129px;left: 43px;width: 322px;height: 737px;background-image: url(../img/sp/chara_img_is.png);}
.chara_is .chara_catch { width: 184px;height: 528px;background-image: url(../img/sp/chara_catch_is.png);}
.chara_is .chara_data .txt { margin-top: 10px;}
.slider-nav div.nav10 {	background-image: url(../img/sp/chara_nav_is.png?20200813);}


/* 藤原定家 */
.chara_ft { background: #9d5b89;}
.chara_ft.chara::after { background-image: url(../img/sp/chara_bg_ft.png);}
.chara_ft .chara_img { top: 148px;left: 0;width: 400px;height: 718px;background-image: url(../img/sp/chara_img_ft.png);}
.chara_ft .chara_catch { width: 202px;height: 520px;background-image: url(../img/sp/chara_catch_ft.png);}
.slider-nav div.nav11 {	background-image: url(../img/sp/chara_nav_ft.png?20200813);}

/* 勝海舟 */
.chara_kk2 { background: #674343;}
.chara_kk2.chara .multiple::after { background-image: url(../img/sp/chara_bg_kk2.png);}
.chara_kk2 .multiple .chara_img { top: 122px;left: 56px;width: 269px;height: 756px;background-image: url(../img/sp/chara_img_kk2.png);}
.chara_kk2 .multiple .chara_catch { right: 76px;width: 143px;height: 435px;background-image: url(../img/sp/chara_catch_kk2.png);	}
.slider-nav div.nav12 {	background-image: url(../img/sp/chara_nav_kk2.png);}

/* 吉田松陰 */
.chara_sy { background: #4a582b;}
.chara_sy.chara::after { background-image: url(../img/sp/chara_bg_sy.png);}
.chara_sy .chara_img { top: 208px;left: 62px;width: 279px;height: 654px;background-image: url(../img/sp/chara_img_sy.png);}
.chara_sy .chara_img::before { content:"";position:absolute;top: 601px;left:2px;width: 90px;height: 24px;background-image: url(../img/sp/past.png);background-size: 90px auto;z-index: 10;}
.chara_sy .chara_catch { right: 64px;width: 106px;height: 464px;background-image: url(../img/sp/chara_catch_sy.png);}
.chara_sy .chara_data .txt { margin-top: 10px;}
.slider-nav div.nav13 {	background-image: url(../img/sp/chara_nav_sy.png);}

/* 井伊直弼 */
.chara_ni { background: #16160e;}
.chara_ni.chara::after { background-image: url(../img/sp/chara_bg_ni.png);}
.chara_ni .chara_img { top: 123px;left: 47px;width: 303px;height: 753px;background-image: url(../img/sp/chara_img_ni.png);}
.chara_ni .chara_img::before { content:"";position:absolute;top: 661px;left:17px;width: 90px;height: 24px;background-image: url(../img/sp/past.png);background-size: 90px auto;z-index: 10;}
.chara_ni .chara_catch { right: 75px;width: 176px;height: 477px;background-image: url(../img/sp/chara_catch_ni.png);}
.chara_ni .chara_data h3,.chara_ni .chara_data .cv { color: #ffffff;}
.chara_ni .chara_data .txt { margin-top: 10px;}
.slider-nav div.nav14 {	background-image: url(../img/sp/chara_nav_ni.png);}

/* 久坂玄瑞 */
.chara_gk2 { background: #028760;}
.chara_gk2.chara::after { background-image: url(../img/sp/chara_bg_gk2.png);}
.chara_gk2 .chara_img { top: 266px;left: 94px;width: 264px;height: 588px;background-image: url(../img/sp/chara_img_gk2.png);}
.chara_gk2 .chara_catch { right: 98px;width: 58px;height: 375px;background-image: url(../img/sp/chara_catch_gk2.png);}
.chara_gk2 .chara_data .txt, .chara_gk2 .chara_data dl { margin-top: 10px;}
.slider-nav div.nav15 {	background-image: url(../img/sp/chara_nav_gk2.png?20200703);}


.chara_change {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
		position: absolute;
		top: 663px;
		left:57px;
		width: 143px;
		height: 143px;
		z-index:10000;
		cursor: pointer;
		background: url(../img/sp/btn_change_03.png) no-repeat;}
.young .chara_change {
		background-image: url(../img/sp/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/sp/chara_bg_st2.png);}
.chara_st .chara_young .chara_img { top: 268px;left: 104px;width: 200px;height: 587px;background-image: url(../img/sp/chara_img_st2.png);}
.chara_st .chara_young .chara_catch { right: 76px;width: 127px;height: 413px;background-image: url(../img/sp/chara_catch_st2.png);}

/* 桂小五郎 young */
.chara_kk.chara .chara_young::after { background-image: url(../img/sp/chara_bg_kk_2.png);}
.chara_kk .chara_young .chara_img { top: 265px;left: 84px;width: 235px;height: 588px;background-image: url(../img/sp/chara_img_kk_2.png);}
.chara_kk .chara_young .chara_catch { right: 76px;width: 130px;height: 408px;background-image: url(../img/sp/chara_catch_kk_2.png);}
.chara_kk .chara_young .chara_data .txt { margin-top: 10px;}

/* マロン young */
.chara_m.chara .multiple::after { background-image: url(../img/sp/chara_bg_m2.png);}
.chara_m .multiple .chara_img { top: 215px;left: 62px;width: 257px;height: 642px;background-image: url(../img/sp/chara_img_m2.png);}
.chara_m .multiple .chara_catch { width: 127px;height: 436px;background-image: url(../img/sp/chara_catch_m2.png);	}
.chara_m .chara_change {		background-image: url(../img/sp/btn_change_05.png);}
.chara_m .multiple .chara_data h3 {white-space: nowrap; letter-spacing: -0.02em;}
.chara_m.young .chara_change {		background-image: url(../img/sp/btn_change_04.png) !important;}
.chara_m .multiple .chara_data .txt { margin-top: 10px;}

/* 勝海舟 young */
.chara_kk2.chara .chara_young::after { background-image: url(../img/sp/chara_bg_kk2_2.png);}
.chara_kk2 .chara_young .chara_img { top: 126px;left: 50px;width: 299px;height: 752px;background-image: url(../img/sp/chara_img_kk2_2.png);}
.chara_kk2 .chara_young .chara_catch { right: 82px;width: 191px;height: 432px;background-image: url(../img/sp/chara_catch_kk2_2.png);	}
.chara_kk2 .chara_change {		background-image: url(../img/sp/btn_change_02.png);}




/* GALLERY */
#galleryArea h2 {
	top: 90px;
	margin-left: -400px;}
#galleryArea ul {
	width: 660px;
	margin: 48px 44px 0 63px;}
#galleryArea ul li {
	width: 660px;}
#galleryArea ul li + li {
	margin-top: 40px;}
#galleryArea ul li a,
#galleryArea ul li a:visited,
#galleryArea ul li a:active {
	outline: none;
	border: none;}
#galleryArea ul li dl dt{
	position: relative;
	width: 660px;
	overflow: hidden;
	z-index: 0;
	margin-bottom: 36px;}
#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:50%;}
#galleryArea ul li dl dt img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
	width: 660px;
	height: auto;
	outline: none;
	border: none;}
#galleryArea ul li dd h3 {
	font-size: 2.6rem;
	margin-bottom: 5px;}
#galleryArea ul li dd p {
	font-size: 1.8rem;}

/****** footer ******/
/* copyright */
footer {
	padding: 60px 0 40px;
	color: #f8f8f8;
  text-align: center;}
footer a {
	position: relative;
	padding-left: 20px;}
footer .copyright p {
	margin-top: 20px;
  text-align: center;}

}