/*------------------------------------------------------------------------------
								HEAD
------------------------------------------------------------------------------*/
.chara-head {
	width: 100%;
	height: 320px;
	background: url("../../img/uijin/head-bg.jpg") no-repeat center center / cover;
	position: relative;
}
.chara-head::before {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 8px;
	background: url("../../img/uijin/head-line1.jpg") no-repeat center top / cover;
}
.chara-head::after {
	content: "";
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 8px;
	background: url("../../img/uijin/head-line2.jpg") no-repeat center top / cover;
}
.chara-head h3 {
	line-height: 0px;
	height: 0px;
	text-indent: -99999px;
}
.chara-head h2 {
	position: absolute;
	width: 900px;
	height: 240px;
	left: 50%;
	top: 50%;
	margin-left: -450px;
	margin-top: -120px;
	background: url("../../img/chara-zukan/tit2.png") no-repeat center center / contain;
	text-indent: -99999px;
}
/*------------------------------------------------------------------------------
								SUB
------------------------------------------------------------------------------*/
.chara-box {
	width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: border-box;
}
.chara-box h3 {
	background: linear-gradient(to right, #bba148, #faecb9, #bba148);
	line-height: 60px;
	text-align: center;
	font-size: 36px;
	color: #000000;
	font-family: 'Noto Serif JP', sans-serif;
}
/*------------------------------------------------------------------------------
								MAP
------------------------------------------------------------------------------*/
.map {
	width: 100%;
	height: 0px;
	line-height: 0px;
	padding-top: 75%;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	border: 1px solid #303030;
}
.map-cover {
	position: absolute;
	width: 110%;
	height: 110%;
	top: -5%;
	left: -5%;
}
.map .map-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: url("../../img/chara-zukan/map-bg.jpg") no-repeat center center / cover;
}
.map .map-hover {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
.map .map-hover1 {background: url("../../img/chara-zukan/map-hover1.png") no-repeat center center / cover;}
.map .map-hover2 {background: url("../../img/chara-zukan/map-hover2.png") no-repeat center center / cover;}
.map .map-hover3 {background: url("../../img/chara-zukan/map-hover3.png") no-repeat center center / cover;}
.map .map-hover4 {background: url("../../img/chara-zukan/map-hover4.png") no-repeat center center / cover;}
.map .map-hover5 {background: url("../../img/chara-zukan/map-hover5.png") no-repeat center center / cover;}
.map .map-hover6 {background: url("../../img/chara-zukan/map-hover6.png") no-repeat center center / cover;}
.map .map-hover1 {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	opacity: 0;
}
.map .map-hover2 {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	opacity: 0;
}
.map .map-hover3 {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	opacity: 0;
}
.map .map-hover4 {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	opacity: 0;
}
.map .map-hover5 {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	opacity: 0;
}
.map .map-hover6 {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	opacity: 0;
}
.map .map-hover1.act {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	opacity: 1;
}
.map .map-hover2.act {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	opacity: 1;
}
.map .map-hover3.act {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	opacity: 1;
}
.map .map-hover4.act {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	opacity: 1;
}
.map .map-hover5.act {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	opacity: 1;
}
.map .map-hover6.act {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	opacity: 1;
}
.map .map-txt {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: url("../../img/chara-zukan/map-txt.png") no-repeat center center / cover;
}
.map .map-cate {
	position: absolute;
	width: 25%;
	height: 0px;
	padding-top: 13.666%;
	bottom: 8%;
	left: 8%;
	background: url("../../img/chara-zukan/map-cate2.jpg") no-repeat center center / cover;
}
/*------------------------------------------------------------------------------
								SVG
------------------------------------------------------------------------------*/
.st0:hover{
}
svg{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.st0 {
	fill: rgba(255,255,255,0);
}
#kan, #en, #so, #gi, #cho, #shin {
  cursor: pointer;
  pointer-events: all;
}
/*------------------------------------------------------------------------------
								MAP DETAIL
------------------------------------------------------------------------------*/
.map-detail-bg {
	position: absolute;
	background: #131313;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0.75;
	display: none;
}
.map-detail-main {
	width: 100%;
	display: none;
}
.map-detail {
	box-sizing: border-box;
	width: 100%;
	padding: 20px 0 0;
}
.map-detail1 {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	padding-right: 20px;
}
.map-detail2 {
	position: absolute;
	top: 50%;
	left: 0px;
	padding-bottom: 20px;
	height: auto;
	padding-right: 20px;
	transform: translate(0px, -50%);
}
.map-detail3 {
	position: absolute;
	top: 50%;
	left: 0px;
	padding-bottom: 20px;
	height: auto;
	padding-right: 20px;
	transform: translate(0px, -50%);
}
.map-detail4 {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	padding-right: 20px;
	padding-top: 0px;
}
.map-detail5 {
	position: absolute;
	top: 50%;
	left: 0px;
	padding-bottom: 20px;
	height: auto;
	padding-right: 20px;
	transform: translate(0px, -50%);
}
.map-detail6 {
	position: absolute;
	top: 50%;
	left: 0px;
	padding-bottom: 20px;
	height: auto;
	padding-right: 20px;
	transform: translate(0px, -50%);
}
.map-detail .scroll-box {
	width: 100%;
	height: 620px;
	box-sizing: border-box;
	padding: 0 0 40px 40px;
}
.map-detail h4 {
	width: 100%;
	padding-top: 180px;
	text-indent: -99999px;
	margin-bottom: 15px;
}
.map-detail1 h4 {
	background: url("../../img/chara-zukan/map-sub1.png") no-repeat center center / contain;
}
.map-detail2 h4 {
	background: url("../../img/chara-zukan/map-sub2.png") no-repeat center center / contain;
}
.map-detail3 h4 {
	background: url("../../img/chara-zukan/map-sub3.png") no-repeat center center / contain;
}
.map-detail4 h4 {
	background: url("../../img/chara-zukan/map-sub4.png") no-repeat center center / contain;
}
.map-detail5 h4 {
	background: url("../../img/chara-zukan/map-sub5.png") no-repeat center center / contain;
}
.map-detail6 h4 {
	background: url("../../img/chara-zukan/map-sub6.png") no-repeat center center / contain;
}
.map-detail-box {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.map-detail1 li {
	float: left;
	width: 18.4%;
	margin-right: 2%;
	margin-bottom: 2.5%;
	position: relative;
}
.map-detail1 li:nth-child(5n) {
	margin-right: 0px;
}
.map-detail1 li:nth-child(n + 11) {
	margin-bottom: 0px;
}
.map-detail2 li {
	float: left;
	width: 18.4%;
	margin-right: 2%;
	margin-bottom: 2.5%;
	position: relative;
}
.map-detail2 li:first-child {
	margin-left: 10.2%;
}
.map-detail3 li {
	float: left;
	width: 18.4%;
	margin-right: 2%;
	margin-bottom: 2.5%;
	position: relative;
}
.map-detail3 li:first-child {
	margin-left: 41%;
}
.map-detail4 li {
	float: left;
	width: 18.4%;
	margin-right: 2%;
	margin-bottom: 2.5%;
	position: relative;
}
.map-detail4 li:first-child,.map-detail4 li:nth-child(4n) {
	margin-left: 20.4%;
}
.map-detail5 li {
	float: left;
	width: 18.4%;
	margin-right: 2%;
	margin-bottom: 2.5%;
	position: relative;
}
.map-detail5 li:first-child {
	margin-left: 41%;
}
.map-detail6 li {
	float: left;
	width: 18.4%;
	margin-right: 2%;
	margin-bottom: 2.5%;
	position: relative;
}
.map-detail6 li:first-child {
	margin-left: 41%;
}
.map-detail li h5 {
	font-size: 30px;
	line-height: 1em;
	font-family: 'Noto Serif JP', sans-serif;
	text-align: center;
	margin-bottom: 10px;
}
.map-detail li .photo {
	width: 100%;
	padding-top: 116%;
	margin-bottom: 15px;
	position: relative;
	overflow: hidden;
}
.map-detail li .photo div {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.map-detail1 li#map-detail1-1 .photo div {background: url("../../img/chara-zukan/thum1-1.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-2 .photo div {background: url("../../img/chara-zukan/thum1-2.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-3 .photo div {background: url("../../img/chara-zukan/thum1-3.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-4 .photo div {background: url("../../img/chara-zukan/thum1-4.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-5 .photo div {background: url("../../img/chara-zukan/thum1-5.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-6 .photo div {background: url("../../img/chara-zukan/thum1-6.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-7 .photo div {background: url("../../img/chara-zukan/thum1-7.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-8 .photo div {background: url("../../img/chara-zukan/thum1-8.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-9 .photo div {background: url("../../img/chara-zukan/thum1-9.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-10 .photo div {background: url("../../img/chara-zukan/thum1-10.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-11 .photo div {background: url("../../img/chara-zukan/thum1-11.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-12 .photo div {background: url("../../img/chara-zukan/thum1-12.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-13 .photo div {background: url("../../img/chara-zukan/thum1-13.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-14 .photo div {background: url("../../img/chara-zukan/thum1-14.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-15 .photo div {background: url("../../img/chara-zukan/thum1-15.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-16 .photo div {background: url("../../img/chara-zukan/thum1-16.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-17 .photo div {background: url("../../img/chara-zukan/thum1-17.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-18 .photo div {background: url("../../img/chara-zukan/thum1-18.jpg") no-repeat center center / cover;}
.map-detail1 li#map-detail1-19 .photo div {background: url("../../img/chara-zukan/thum1-19.jpg") no-repeat center center / cover;}

.map-detail2 li#map-detail2-1 .photo div {background: url("../../img/chara-zukan/thum2-1.jpg") no-repeat center center / cover;}
.map-detail2 li#map-detail2-2 .photo div {background: url("../../img/chara-zukan/thum2-2.jpg") no-repeat center center / cover;}
.map-detail2 li#map-detail2-3 .photo div {background: url("../../img/chara-zukan/thum2-10.jpg") no-repeat center center / cover;}
.map-detail2 li#map-detail2-4 .photo div {background: url("../../img/chara-zukan/thum2-13.jpg") no-repeat center center / cover;}

.map-detail3 li#map-detail3-1 .photo div {background: url("../../img/chara-zukan/thum2-5.jpg") no-repeat center center / cover;}

.map-detail4 li#map-detail4-1 .photo div {background: url("../../img/chara-zukan/thum2-3.jpg") no-repeat center center / cover;}
.map-detail4 li#map-detail4-2 .photo div {background: url("../../img/chara-zukan/thum2-4.jpg") no-repeat center center / cover;}
.map-detail4 li#map-detail4-3 .photo div {background: url("../../img/chara-zukan/thum2-8.jpg") no-repeat center center / cover;}
.map-detail4 li#map-detail4-4 .photo div {background: url("../../img/chara-zukan/thum2-9.jpg") no-repeat center center / cover;}
.map-detail4 li#map-detail4-5 .photo div {background: url("../../img/chara-zukan/thum2-11.jpg") no-repeat center center / cover;}
.map-detail4 li#map-detail4-6 .photo div {background: url("../../img/chara-zukan/thum2-12.jpg") no-repeat center center / cover;}

.map-detail5 li#map-detail5-1 .photo div {background: url("../../img/chara-zukan/thum2-7.jpg") no-repeat center center / cover;}

.map-detail6 li#map-detail6-1 .photo div {background: url("../../img/chara-zukan/thum2-6.jpg") no-repeat center center / cover;}


.map-detail li .photo div {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transform: scale(1)
}
.map-detail li:hover .photo div {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transform: scale(1.1)
}
.map-detail li a {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	text-indent: -99999px;
}

.map-detail-main .close-btn {
	position:absolute;
	width:50px;
	height:50px;
	right:20px;
	top:20px;
	z-index:900;
}
.map-detail-main .close-btn,
.map-detail-main .close-btn span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.map-detail-main .close-btn span {
  position: absolute;
  right: 0;
  width: 100%;
  height: 4px;
  background-color: #FFFFFF;
}
.map-detail-main .close-btn span:nth-of-type(1) {
  -webkit-transform: translateY(25px) rotate(-45deg);
  transform: translateY(25px) rotate(-45deg);
  width: 100%;
}
.map-detail-main .close-btn span:nth-of-type(2) {
  -webkit-transform: translateY(25px) rotate(45deg);
  transform: translateY(25px) rotate(45deg);
  width: 100%;
}
.map-detail-main .close-btn a {
	position:absolute;
	width:100%;
	height:100%;
	left:0px;
	top:0px;
	text-indent:-99999px;
}

/*------------------------------------------------------------------------------
								BOX
------------------------------------------------------------------------------*/
.chara-thum {
	position: relative;
	overflow: hidden;
}
.chara-thum li {
	float: left;
	width: 18.4%;
	margin-right: 2%;
	margin-bottom: 2.5%;
	position: relative;
}
.chara-thum li:nth-child(5n) {
	margin-right: 0px;
}
.chara-thum li .photo {
	width: 100%;
	padding-top: 116%;
	line-height: 0px;
	height: 0px;
	overflow: hidden;
	position: relative;
}
.chara-thum li .photo div {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.chara-thum li#thum1-1 .photo div {background: url("../../img/chara-zukan/thum1-1.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-2 .photo div {background: url("../../img/chara-zukan/thum1-2.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-3 .photo div {background: url("../../img/chara-zukan/thum1-3.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-4 .photo div {background: url("../../img/chara-zukan/thum1-4.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-5 .photo div {background: url("../../img/chara-zukan/thum1-5.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-6 .photo div {background: url("../../img/chara-zukan/thum1-6.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-7 .photo div {background: url("../../img/chara-zukan/thum1-7.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-8 .photo div {background: url("../../img/chara-zukan/thum1-8.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-9 .photo div {background: url("../../img/chara-zukan/thum1-9.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-10 .photo div {background: url("../../img/chara-zukan/thum1-10.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-11 .photo div {background: url("../../img/chara-zukan/thum1-11.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-12 .photo div {background: url("../../img/chara-zukan/thum1-12.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-13 .photo div {background: url("../../img/chara-zukan/thum1-13.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-14 .photo div {background: url("../../img/chara-zukan/thum1-14.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-15 .photo div {background: url("../../img/chara-zukan/thum1-15.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-16 .photo div {background: url("../../img/chara-zukan/thum1-16.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-17 .photo div {background: url("../../img/chara-zukan/thum1-17.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-18 .photo div {background: url("../../img/chara-zukan/thum1-18.jpg") no-repeat center center / cover;}
.chara-thum li#thum1-19 .photo div {background: url("../../img/chara-zukan/thum1-19.jpg") no-repeat center center / cover;}

.chara-thum li#thum2-1 .photo div {background: url("../../img/chara-zukan/thum2-1.jpg") no-repeat center center / cover;}
.chara-thum li#thum2-2 .photo div {background: url("../../img/chara-zukan/thum2-2.jpg") no-repeat center center / cover;}
.chara-thum li#thum2-3 .photo div {background: url("../../img/chara-zukan/thum2-3.jpg") no-repeat center center / cover;}
.chara-thum li#thum2-4 .photo div {background: url("../../img/chara-zukan/thum2-4.jpg") no-repeat center center / cover;}
.chara-thum li#thum2-5 .photo div {background: url("../../img/chara-zukan/thum2-5.jpg") no-repeat center center / cover;}
.chara-thum li#thum2-6 .photo div {background: url("../../img/chara-zukan/thum2-6.jpg") no-repeat center center / cover;}
.chara-thum li#thum2-7 .photo div {background: url("../../img/chara-zukan/thum2-7.jpg") no-repeat center center / cover;}
.chara-thum li#thum2-8 .photo div {background: url("../../img/chara-zukan/thum2-8.jpg") no-repeat center center / cover;}
.chara-thum li#thum2-9 .photo div {background: url("../../img/chara-zukan/thum2-9.jpg") no-repeat center center / cover;}
.chara-thum li#thum2-10 .photo div {background: url("../../img/chara-zukan/thum2-10.jpg") no-repeat center center / cover;}
.chara-thum li#thum2-11 .photo div {background: url("../../img/chara-zukan/thum2-11.jpg") no-repeat center center / cover;}
.chara-thum li#thum2-12 .photo div {background: url("../../img/chara-zukan/thum2-12.jpg") no-repeat center center / cover;}
.chara-thum li#thum2-13 .photo div {background: url("../../img/chara-zukan/thum2-13.jpg") no-repeat center center / cover;}
.chara-thum li .photo div {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transform: scale(1)
}
.chara-thum li:hover .photo div {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transform: scale(1.1)
}

.chara-thum li h4 {
	color: #deca86;
	font-size: 36px;
	text-align: center;
	font-family: 'Noto Serif JP', sans-serif;
	margin-top: 0.4em;
}
.chara-thum li p {
	font-size: 24px;
	text-align: center;
	font-family: 'Noto Serif JP', sans-serif;
	font-weight: 700;
	margin-top: 0.1em;
}
.chara-thum li a {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	text-indent: -99999px;
}
/*------------------------------------------------------------------------------
								DETAIL
------------------------------------------------------------------------------*/
.chara-detail-bg {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background: #000000;
	opacity: 0.755;
	z-index: 920;
	display: none;
}
.chara-detail {
	position: fixed;
	top: 0px;
	left: 50%;
	height: 100%;
	width: 760px;
	margin-left: -390px;
	background: #000000;
	z-index: 920;
	box-sizing: border-box;
	border-left: 1px solid #303030;
	border-right: 1px solid #303030;
	display: none;
}
.tp-size {
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding-top: 80px;
}
.scroll-box {
	width: 750px;
	height: 100%;
	overflow: auto;
}
.chara-detail-box {
	width: 700px;
	padding-left: 60px;
	box-sizing: border-box;
}
.chara-detail-box .photo {
	padding-top: 134.375%;
	margin-top: 60px;
}
.chara-detail-box #chara-detail1-1 .photo {background: url("../../img/chara-zukan/photo1-1.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-2 .photo {background: url("../../img/chara-zukan/photo1-2.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-3 .photo {background: url("../../img/chara-zukan/photo1-3.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-4 .photo {background: url("../../img/chara-zukan/photo1-4.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-5 .photo {background: url("../../img/chara-zukan/photo1-5.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-6 .photo {background: url("../../img/chara-zukan/photo1-6.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-7 .photo {background: url("../../img/chara-zukan/photo1-7.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-8 .photo {background: url("../../img/chara-zukan/photo1-8.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-9 .photo {background: url("../../img/chara-zukan/photo1-9.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-10 .photo {background: url("../../img/chara-zukan/photo1-10.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-11 .photo {background: url("../../img/chara-zukan/photo1-11.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-12 .photo {background: url("../../img/chara-zukan/photo1-12.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-13 .photo {background: url("../../img/chara-zukan/photo1-13.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-14 .photo {background: url("../../img/chara-zukan/photo1-14.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-15 .photo {background: url("../../img/chara-zukan/photo1-15.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-16 .photo {background: url("../../img/chara-zukan/photo1-16.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-17 .photo {background: url("../../img/chara-zukan/photo1-17.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-18 .photo {background: url("../../img/chara-zukan/photo1-18.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-19 .photo {background: url("../../img/chara-zukan/photo1-19.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-1 .photo {background: url("../../img/chara-zukan/photo2-1.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-2 .photo {background: url("../../img/chara-zukan/photo2-2.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-3 .photo {background: url("../../img/chara-zukan/photo2-3.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-4 .photo {background: url("../../img/chara-zukan/photo2-4.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-5 .photo {background: url("../../img/chara-zukan/photo2-5.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-6 .photo {background: url("../../img/chara-zukan/photo2-6.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-7 .photo {background: url("../../img/chara-zukan/photo2-7.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-8 .photo {background: url("../../img/chara-zukan/photo2-8.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-9 .photo {background: url("../../img/chara-zukan/photo2-9.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-10 .photo {background: url("../../img/chara-zukan/photo2-10.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-11 .photo {background: url("../../img/chara-zukan/photo2-11.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-12 .photo {background: url("../../img/chara-zukan/photo2-12.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-13 .photo {background: url("../../img/chara-zukan/photo2-13.jpg") no-repeat center center / cover;}
.chara-detail-box h3 {
	line-height: 40px;
	width: 100%;
	color: #000000;
	text-align: center;
	font-size: 30px;
	font-family: 'Noto Serif JP', sans-serif;
}
.chara-detail-box h4 {
	font-size: 36px;
	color: #FFFFFF;
	text-align: center;
	font-family: 'Noto Serif JP', sans-serif;
	margin-top: 0.5em;
}
.chara-detail-box h5 {
	font-size: 20px;
	color: #deca86;
	text-align: center;
	font-family: 'Noto Serif JP', sans-serif;
	line-height: 2.4em;
	border: 1px solid #deca86;
	margin: 40px auto 0;
	width: 16em;
}
.chara-detail-box p {
	text-align: center;
	font-size: 28px;
	color: #FFFFFF;
	font-family: 'Noto Serif JP', sans-serif;
	font-weight: 600;
	line-height: 1.6em;
	margin-top: 0.8em;
}
.chara-detail-box .graph {
	width: 400px;
	padding-top: 400px;
	margin-left: 120px;
	margin-top: 20px;
	margin-bottom: 40px;
}
.chara-detail-box h4 strong {
	font-size: 50px;
	color: #deca86;
}
.chara-detail-box #chara-detail1-1 .graph {background: url("../../img/chara-zukan/graph1-1.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-2 .graph {background: url("../../img/chara-zukan/graph1-2.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-3 .graph {background: url("../../img/chara-zukan/graph1-3.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-4 .graph {background: url("../../img/chara-zukan/graph1-4.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-5 .graph {background: url("../../img/chara-zukan/graph1-5.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-6 .graph {background: url("../../img/chara-zukan/graph1-6.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-7 .graph {background: url("../../img/chara-zukan/graph1-7.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-8 .graph {background: url("../../img/chara-zukan/graph1-8.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-9 .graph {background: url("../../img/chara-zukan/graph1-9.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-10 .graph {background: url("../../img/chara-zukan/graph1-10.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-11 .graph {background: url("../../img/chara-zukan/graph1-11.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-12 .graph {background: url("../../img/chara-zukan/graph1-12.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-13 .graph {background: url("../../img/chara-zukan/graph1-13.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-14 .graph {background: url("../../img/chara-zukan/graph1-14.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-15 .graph {background: url("../../img/chara-zukan/graph1-15.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-18 .graph {background: url("../../img/chara-zukan/graph1-18.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail1-19 .graph {background: url("../../img/chara-zukan/graph1-19b.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-1 .graph {background: url("../../img/chara-zukan/graph2-1.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-2 .graph {background: url("../../img/chara-zukan/graph2-2.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-3 .graph {background: url("../../img/chara-zukan/graph2-3.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-4 .graph {background: url("../../img/chara-zukan/graph2-4.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-5 .graph {background: url("../../img/chara-zukan/graph2-5.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-6 .graph {background: url("../../img/chara-zukan/graph2-6.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-7 .graph {background: url("../../img/chara-zukan/graph2-7.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-8 .graph {background: url("../../img/chara-zukan/graph2-8.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-9 .graph {background: url("../../img/chara-zukan/graph2-9.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-10 .graph {background: url("../../img/chara-zukan/graph2-10.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-11 .graph {background: url("../../img/chara-zukan/graph2-11.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-12 .graph {background: url("../../img/chara-zukan/graph2-12.jpg") no-repeat center center / cover;}
.chara-detail-box #chara-detail2-13 .graph {background: url("../../img/chara-zukan/graph2-13.jpg") no-repeat center center / cover;}
.chara-detail-box h3.color1 {background: linear-gradient(to right, #e2994a, #f0dac3, #e2994a);}
.chara-detail-box h3.color2 {background: linear-gradient(to right, #d56d8e, #ecc1cf, #d56d8e);}
.chara-detail-box h3.color3 {background: linear-gradient(to right, #637bc9, #b0bde4, #637bc9);}
.chara-detail-box h3.color4 {background: linear-gradient(to right, #45b0a4, #addbd6, #45b0a4);}
.chara-detail-box h3.color5 {background: linear-gradient(to right, #9856ae, #d1acde, #9856ae);}
.chara-detail-box h3.color6 {background: linear-gradient(to right, #6fa955, #c2e1b5, #6fa955);}

/*------------------------------------------------------------------------------
								CLOSE BTN
------------------------------------------------------------------------------*/
.chara-detail .close-box {
	width: 100%;
	height: 80px;
	position: absolute;
	box-sizing: border-box;
	top: 0px;
	left: 0px;
	background: linear-gradient(to bottom, #101010, #303030);
}
.chara-detail .close-btn {
	position:absolute;
	width:50px;
	height:50px;
	left:50%;
	top:50%;
	margin-left: -25px;
	margin-top: -25px;
	z-index:100;
}
.chara-detail .close-btn,
.chara-detail .close-btn span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.chara-detail .close-btn span {
  position: absolute;
  right: 0;
  width: 100%;
  height: 4px;
  background-color: #FFFFFF;
}
.chara-detail .close-btn span:nth-of-type(1) {
  -webkit-transform: translateY(25px) rotate(-45deg);
  transform: translateY(25px) rotate(-45deg);
  width: 100%;
}
.chara-detail .close-btn span:nth-of-type(2) {
  -webkit-transform: translateY(25px) rotate(45deg);
  transform: translateY(25px) rotate(45deg);
  width: 100%;
}
.close-box a {
	position:absolute;
	width:100%;
	height:100%;
	left:0px;
	top:0px;
	text-indent:-99999px;
	z-index:100;
}

/*------------------------------------------------------------------------------
								TRAILER AREA
------------------------------------------------------------------------------*/
.trailer-area.short-area {
	width:450px;
	margin:50px auto 0!important;
}
.trailer-area .prArea {  
	margin: 0 auto 0 auto;
	padding:0 0 0px 0;
	color: #000;
	font-size: 16px;
	line-height: 1.6em;
	width:100%;
}
.trailer-area .video-container.short {
	position: relative;
	padding-bottom: 178.319783197831978%;
	height: 0;
	overflow: hidden;
	margin:0;
	background:#000000;
}
.trailer-area .video-container iframe {
	position: absolute;
	top: 2px;
	left: 0;
	width: 100%;
	height: 100%;
}
/*------------------------------------------------------------------------------
								SP
------------------------------------------------------------------------------*/
@media screen and (max-width: 1000px) {
/*------------------------------------------------------------------------------
								HEAD
------------------------------------------------------------------------------*/
.chara-head {
	height: 36vw;
	background: url("../../img/uijin/head-bg.jpg") no-repeat center center / cover;
}
.chara-head::before {
	height: 1vw;
}
.chara-head::after {
	height: 1vw;
}
.chara-head h2 {
	width: 92vw;
	height: 27vw;
	margin-left: -46vw;
	margin-top: -13.5vw;
	background: url("../../img/chara-zukan/tit.png") no-repeat center center / contain;
}
/*------------------------------------------------------------------------------
								SUB
------------------------------------------------------------------------------*/
.chara-box {
	width: 100%;
	padding: 0 4vw;
}
.chara-box h3 {
	line-height: 8vw;
	font-size: 5.4vw;
}
/*------------------------------------------------------------------------------
								MAP
------------------------------------------------------------------------------*/
.map {
	width: 100%;
	height: 0px;
	line-height: 0px;
	padding-top: 85%;
}
.map .map-hover1 {
	-webkit-transition: none;
	transition:         none;
	opacity: 0;
}
.map .map-hover2 {
	-webkit-transition: none;
	transition:         none;
	opacity: 0;
}
.map .map-hover3 {
	-webkit-transition: none;
	transition:         none;
	opacity: 0;
}
.map .map-hover4 {
	-webkit-transition: none;
	transition:         none;
	opacity: 0;
}
.map .map-hover5 {
	-webkit-transition: none;
	transition:         none;
	opacity: 0;
}
.map .map-hover6 {
	-webkit-transition: none;
	transition:         none;
	opacity: 0;
}
.map .map-hover1.act {
	-webkit-transition: none;
	transition:         none;
	opacity: 0;
}
.map .map-hover2.act {
	-webkit-transition: none;
	transition:         none;
	opacity: 0;
}
.map .map-hover3.act {
	-webkit-transition: none;
	transition:         none;
	opacity: 0;
}
.map .map-hover4.act {
	-webkit-transition: none;
	transition:         none;
	opacity: 0;
}
.map .map-hover5.act {
	-webkit-transition: none;
	transition:         none;
	opacity: 0;
}
.map .map-hover6.act {
	-webkit-transition: none;
	transition:         none;
	opacity: 0;
}
.map .map-cate {
	width: 34%;
	bottom: 7%;
	left: 7%;
	padding-top: 18.666%;
}
/*------------------------------------------------------------------------------
								SVG
------------------------------------------------------------------------------*/
svg{
	position: absolute;
	top: 0px;
	left: -7%;
	width: 114%;
	height: 100%;
}
/*------------------------------------------------------------------------------
								MAP DETAIL
------------------------------------------------------------------------------*/
.map-detail {
	padding: 2vw 0 0;
}
.map-detail1 {
	padding-right: 2vw;
}
.map-detail2 {
	padding-bottom: 2vw;
	padding-right: 0px;
}
.map-detail3 {
	padding-bottom: 2vw;
	padding-right: 0px;
}
.map-detail4 {
	padding-right: 0px;
	padding-top: 0px;
}
.map-detail5 {
	padding-bottom: 2vw;
	padding-right: 0px;
}
.map-detail6 {
	padding-bottom: 2vw;
	padding-right: 0px;
}
.map-detail .scroll-box {
	height: 53vw;
	margin-top: 0;
	padding: 0 0 3vw 3vw;
}
.map-detail h4 {
	padding-top: 20vw;
	margin-bottom: 2vw;
}
.map-detail4 h4 {
	margin-bottom: 1vw;
}
.map-detail li .photo div {
	-webkit-transition: none;
	transition:         none;
	transform: scale(1)
}
.map-detail li:hover .photo div {
	-webkit-transition: none;
	transition:         none;
	transform: scale(1)
}

.map-detail-main .close-btn {
	position:absolute;
	width:8vw;
	height:8vw;
	right:4vw;
	top:4vw;
}
.map-detail-main .close-btn span {
  height: 0.5vw;
}
.map-detail-main .close-btn span:nth-of-type(1) {
  -webkit-transform: translateY(4vw) rotate(-45deg);
  transform: translateY(4vw) rotate(-45deg);
}
.map-detail-main .close-btn span:nth-of-type(2) {
  -webkit-transform: translateY(4vw) rotate(45deg);
  transform: translateY(4vw) rotate(45deg);
}
.map-detail li h5 {
	font-size: 3.6vw;
	margin-bottom: 1vw;
}

/*------------------------------------------------------------------------------
								BOX
------------------------------------------------------------------------------*/
.chara-thum li {
	width: 31%;
	margin-right: 3.5%;
	margin-bottom: 4%;
}
.chara-thum li:nth-child(5n) {
	margin-right: 3.5%;
}
.chara-thum li:nth-child(3n) {
	margin-right: 0%;
}
.chara-thum li .photo div {
	-webkit-transition: none;
	transition:         none;
	transform: scale(1)
}
.chara-thum li:hover .photo div {
	-webkit-transition: none;
	transition:         none;
	transform: scale(1)
}
.chara-thum li h4 {
	font-size: 5vw;
}
.chara-thum li p {
	font-size: 3.6vw;
}
/*------------------------------------------------------------------------------
								DETAIL
------------------------------------------------------------------------------*/
.chara-detail {
	top: 0px;
	left: 0px;
	width: 100%;
	margin-left: 0px;
	border-left: none;
	border-right: none;
}
.tp-size {
	padding-top: 12vw;
}
.scroll-box {
	width: 96vw;
}
.chara-detail-box {
	width: 92vw;
	padding-left: 6vw;
}
.chara-detail-box .photo {
	margin-top: 4vw;
}
.chara-detail-box h3 {
	line-height: 8vw;
	font-size: 5vw;
}
.chara-detail-box h4 {
	font-size: 6vw;
}
.chara-detail-box h5 {
	font-size: 3.2vw;
	margin: 6vw auto 0;
}
.chara-detail-box p {
	font-size: 3.8vw;
}
.chara-detail-box .graph {
	width: 64vw;
	padding-top: 64vw;
	margin-left: 11vw;
	margin-top: 3vw;
	margin-bottom: 6vw;
}
.chara-detail-box h4 strong {
	font-size: 8vw;
}
/*------------------------------------------------------------------------------
								CLOSE BTN
------------------------------------------------------------------------------*/
.chara-detail .close-box {
	height: 12vw;
}
.chara-detail .close-btn {
	position:absolute;
	width:8vw;
	height:8vw;
	margin-left: -4vw;
	margin-top: -4vw;
}
.chara-detail .close-btn span {
  height: 0.5vw;
}
.chara-detail .close-btn span:nth-of-type(1) {
  -webkit-transform: translateY(4vw) rotate(-45deg);
  transform: translateY(4vw) rotate(-45deg);
}
.chara-detail .close-btn span:nth-of-type(2) {
  -webkit-transform: translateY(4vw) rotate(45deg);
  transform: translateY(4vw) rotate(45deg);
}

/*------------------------------------------------------------------------------
								TRAILER AREA
------------------------------------------------------------------------------*/
.trailer-area.short-area {
	width:75vw;
	margin:7vw auto 0!important;
}
/*------------------------------------------------------------------------------
								M P
------------------------------------------------------------------------------*/
.mt10 {
	margin-top: 1vw!important;
}
.mt20 {
	margin-top: 2vw!important;
}
.mt30 {
	margin-top: 3vw!important;
}
.mt40 {
	margin-top: 4vw!important;
}
.mt50 {
	margin-top: 5vw!important;
}
.mt60 {
	margin-top: 6vw!important;
}
.mt70 {
	margin-top: 7vw!important;
}
.mt80 {
	margin-top: 8vw!important;
}
.mt90 {
	margin-top: 9vw!important;
}
.mt100 {
	margin-top: 10vw!important;
}
.mt110 {
	margin-top: 11vw!important;
}
.mt120 {
	margin-top: 12vw!important;
}
.mt130 {
	margin-top: 13vw!important;
}
.mt140 {
	margin-top: 14vw!important;
}
.mt150 {
	margin-top: 15vw!important;
}
.mt160 {
	margin-top: 16vw!important;
}
.mt170 {
	margin-top: 17vw!important;
}
.mt180 {
	margin-top: 18vw!important;
}
.mt190 {
	margin-top: 19vw!important;
}
.mt200 {
	margin-top: 20vw!important;
}
.pt10 {
	padding-top: 1vw!important;
}
.pt20 {
	padding-top: 2vw!important;
}
.pt30 {
	padding-top: 3vw!important;
}
.pt40 {
	padding-top: 4vw!important;
}
.pt50 {
	padding-top: 5vw!important;
}
.pt60 {
	padding-top: 6vw!important;
}
.pt70 {
	padding-top: 7vw!important;
}
.pt80 {
	padding-top: 8vw!important;
}
.pt90 {
	padding-top: 9vw!important;
}
.pt100 {
	padding-top: 10vw!important;
}
.mb10 {
	margin-bottom: 1vw!important;
}
.mb20 {
	margin-bottom: 2vw!important;
}
.mb30 {
	margin-bottom: 3vw!important;
}
.mb40 {
	margin-bottom: 4vw!important;
}
.mb50 {
	margin-bottom: 5vw!important;
}
.mb60 {
	margin-bottom: 6vw!important;
}
.mb70 {
	margin-bottom: 7vw!important;
}
.mb80 {
	margin-bottom: 8vw!important;
}
.mb90 {
	margin-bottom: 9vw!important;
}
.mb100 {
	margin-bottom: 10vw!important;
}
.mb110 {
	margin-bottom: 11vw!important;
}
.mb120 {
	margin-bottom: 12vw!important;
}
.mb130 {
	margin-bottom: 13vw!important;
}
.mb140 {
	margin-bottom: 14vw!important;
}
.mb150 {
	margin-bottom: 15vw!important;
}
.mb160 {
	margin-bottom: 16vw!important;
}
.mb170 {
	margin-bottom: 17vw!important;
}
.mb180 {
	margin-bottom: 18vw!important;
}
.mb190 {
	margin-bottom: 19vw!important;
}
.mb200 {
	margin-bottom: 20vw!important;
}
.pb10 {
	padding-bottom: 1vw!important;
}
.pb20 {
	padding-bottom: 2vw!important;
}
.pb30 {
	padding-bottom: 3vw!important;
}
.pb40 {
	padding-bottom: 4vw!important;
}
.pb50 {
	padding-bottom: 5vw!important;
}
.pb60 {
	padding-bottom: 6vw!important;
}
.pb70 {
	padding-bottom: 7vw!important;
}
.pb80 {
	padding-bottom: 8vw!important;
}
.pb90 {
	padding-bottom: 9vw!important;
}
.pb100 {
	padding-bottom: 10vw!important;
}
}

@media print{
}