/*------------------------------------------------------------------------------
								HEAD
------------------------------------------------------------------------------*/
.uijin-head {
	width: 100%;
	height: 280px;
	background: url("../../img/uijin/head-bg.jpg") no-repeat center center / cover;
	position: relative;
}
.uijin-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;
}
.uijin-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;
}
.uijin-head h3 {
	line-height: 0px;
	height: 0px;
	text-indent: -99999px;
}
.uijin-head h2 {
	position: absolute;
	width: 900px;
	height: 200px;
	left: 50%;
	top: 50%;
	margin-left: -450px;
	margin-top: -100px;
	background: url("../../img/uijin/tit.png") no-repeat center center / contain;
	text-indent: -99999px;
}
/*------------------------------------------------------------------------------
								SUB TIT
------------------------------------------------------------------------------*/
.uijin-box {
	width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: border-box;
}
#uijin-area h4 {
	text-indent: -99999px;
	line-height: 0px;
	height: 0px;
	padding-top: 80px;
}
.history-pv h4 {
	background: url("../../img/uijin/sub1.jpg") no-repeat center top / auto 80px;
}
.keyword h4 {
	background: url("../../img/uijin/sub2.jpg") no-repeat center top / auto 80px;
}
.character h4 {
	background: url("../../img/uijin/sub3.jpg") no-repeat center top / auto 80px;
}
.series h4 {
	background: url("../../img/uijin/sub4.jpg") no-repeat center top / auto 80px;
}
/*------------------------------------------------------------------------------
								PV
------------------------------------------------------------------------------*/
#movie-area {
	background: #1b1b1b;
}
#trailer-area {
	width:100%;
	margin:0px auto 0px;
}
#trailer-area .prArea {  
	margin: 0 auto 0 auto;
	color: #000;
	font-size: 16px;
	line-height: 1.6em;
	width:100%;
	box-sizing: border-box;
	max-width: 1200px;
	padding:0;
}

#trailer-area .video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin:0;
	background:#000000;
}
#trailer-area .video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#trailer-area ul {
	margin: 1.5% auto 0 auto;
	position:relative;
	width: 100%;
	overflow: hidden;
}
#trailer-area ul li {
	width: 24.625%;
	margin:0 0.5% 0.5% 0;
	float:left;
	height:70px;
	padding:0;
	position: relative;
}
#trailer-area ul li:nth-child(4) {
	margin:0 0 0.5% 0;
}
#trailer-area  ul li div {
	width: 100%;
	height: 100%;
}
#trailer-area ul li a {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0px;
	left:0px;
	line-height: 70px;
	text-indent: -99999px;
}
#trailer-area ul li#history-pv1 a {
	background: url("../../img/uijin/mov-btn1.jpg") no-repeat center center / cover;
}
#trailer-area ul li#history-pv2 a {
	background: url("../../img/uijin/mov-btn2.jpg") no-repeat center center / cover;
}
#trailer-area ul li#history-pv3 a {
	background: url("../../img/uijin/mov-btn3.jpg") no-repeat center center / cover;
}
#trailer-area ul li#history-pv4 a {
	background: url("../../img/uijin/mov-btn4.jpg") no-repeat center center / cover;
}
/*------------------------------------------------------------------------------
								KEYWORD
------------------------------------------------------------------------------*/
.keyword .box {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.keyword .box li {
	width: 32%;
	float: left;
	margin-right: 2%;
	background: #000000;
	padding: 3% 0 4.5%;
	margin-bottom: 2%;
	position: relative;
	border: 1px solid #303030;
	box-sizing: border-box;
}
.keyword .box li {
	-webkit-transition: all 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
	background: #000000;
}
.keyword .box li:hover {
	-webkit-transition: all 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
	background: #303030;
}
.keyword .box li:nth-child(3n) {
	margin-right: 0px;
}
.keyword .box li h6 {
	font-size: 22px;
	font-family: 'Noto Serif JP', sans-serif;
	text-align: center;
}
.keyword .box li h6 strong {
	color: #ffeb8a;
	font-size: 26px;
	font-weight: 500;
}
.keyword .box li h5 {
	font-size: 42px;
	font-family: 'Noto Serif JP', sans-serif;
	letter-spacing: 0.1em;
	text-align: center;
	font-weight: 700;
	padding-top: 0.8em;
}
.keyword .box li h5 ruby[data-ruby] {
  position:relative;
}
.keyword .box li h5 ruby[data-ruby]::before {
  content: attr(data-ruby);
  position:absolute;
  left:-2em;
  top:-1.8em;
  right:-2em;
  text-align:center;
  font-size:.3em;
  letter-spacing: 0.1em;
}
.keyword .box li h5 rt {
  display:none;
}
.keyword .box li a {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	text-indent: -99999px;
}
/*------------------------------------------------------------------------------
								KEYWORD detail 
------------------------------------------------------------------------------*/
.keyword-detail-bg {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background: #000000;
	opacity: 0.75;
	z-index: 1;
	display: none;
}
.keyword-detail {
	width: 1000px;
	position: fixed;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	background: #202020;
	border: 1px solid #303030;
	transform: translate(-50%, -50%);
	padding: 30px 40px 40px;
	z-index: 1;
	height: auto;
	max-height: 85vh;
	display: none;
}
.keyword-detail li .txt-box {
	position: relative;
	width: 100%;
	height: auto;
}
.keyword-detail li .scroll-box {
	position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロール */
	width: 100%;
	height: 100%;
	max-height: calc(85vh - 140px);
}
.keyword-detail li {
	position: relative;
	max-height: 85vh;
}
.keyword-detail li.close-btn {
	display: block;
	transform: none;
}
.keyword-detail li p {
	font-size: 22px;
	color: #ffFFFF;
	line-height: 1.8em;
	text-align: justify;
	font-weight: 600;
}
.keyword-detail h5 {
	font-size: 40px;
	color: #FFFFFF;
	font-family: 'Noto Serif JP', sans-serif;
	text-align: center;
	margin-bottom: 30px;
}
.keyword-detail h5 span {
	font-size: 36px;
	font-family: 'Noto Serif JP', sans-serif;
	text-align: center;
	margin-right: 1em;
}
.keyword-detail h5 span strong {
	color: #ffeb8a;
	font-size: 40px;
	font-weight: 500;
}

.keyword-detail li .photo {
	height: 0px;
	line-height: 0px;
	padding-top: 50%;
	margin-bottom: 30px;
}
.keyword-detail .keyword1 .photo {
	background: url("../../img/uijin/photo1.jpg") no-repeat center center / cover;
}
.keyword-detail .keyword2 .photo {
	background: url("../../img/uijin/photo2.jpg") no-repeat center center / cover;
}
.keyword-detail .keyword3 .photo {
	background: url("../../img/uijin/photo3.jpg") no-repeat center center / cover;
}
.keyword-detail .keyword4 .photo {
	background: url("../../img/uijin/photo4.jpg") no-repeat center center / cover;
}
.keyword-detail .keyword5 .photo {
	background: url("../../img/uijin/photo5.jpg") no-repeat center center / cover;
}
.keyword-detail .keyword6 .photo {
	background: url("../../img/uijin/photo7.jpg") no-repeat center center / cover;
}
.keyword-detail .keyword7 .photo {
	background: url("../../img/uijin/photo6.jpg?ver1.0") no-repeat center center / cover;
}
.keyword-detail .keyword8 .photo {
	background: url("../../img/uijin/photo8.jpg?ver1.0") no-repeat center center / cover;
}
.keyword-detail .keyword9 .photo {
	background: url("../../img/uijin/photo9.jpg") no-repeat center center / cover;
}

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

/*------------------------------------------------------------------------------
								PLATFORM
------------------------------------------------------------------------------*/

.platform-main {
	width: 100%;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}
.platform-main .list {
	width: 49%;
	float: left;
	margin-right: 2%;
	margin-bottom: 4%;
}
.platform-main .list:nth-child(2n) {
	margin-right: 0px;
}
.platform-main .list .img {
	width: 100%;
	padding-top:71%;
	margin-bottom: 3%;
	font-size: 12px;
	text-align: center;
	line-height: 1em;
}
.platform-main .list1 .img {
	background: url("../../img/platform/img1.jpg") no-repeat center top / contain;
}
.platform-main .list2 .img {
	background: url("../../img/platform/img2.jpg") no-repeat center top / contain;
}
.platform-main .list3 .img {
	background: url("../../img/platform/img3.jpg") no-repeat center top / contain;
}
.platform-main .list4 .img {
	background: url("../../img/platform/img4.jpg") no-repeat center top / contain;
}
.platform-main .list ul {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	font-size:0;
	line-height: 0px;
}
.platform-main .list ul li {
	display: inline-block;
	padding-top: 9%;
	width: 32.333%;
	margin: 0% 0.5% 1%;
	text-align: center;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	position: relative;
}
.platform-main .list ul li.icon1 {background: #FFFFFF url("../../img/platform/platform1.gif") no-repeat center center / contain;}
.platform-main .list ul li.icon2 {background: #FFFFFF url("../../img/platform/platform2.gif") no-repeat center center / contain;}
.platform-main .list ul li.icon3 {background: #FFFFFF url("../../img/platform/platform3.gif") no-repeat center center / contain;}
.platform-main .list ul li.icon4 {background: #FFFFFF url("../../img/platform/platform4.gif") no-repeat center center / contain;}
.platform-main .list ul li.icon5 {background: #FFFFFF url("../../img/platform/platform5.gif") no-repeat center center / contain;}
.platform-main .list ul li.icon6 {background: #FFFFFF url("../../img/platform/platform6.gif") no-repeat center center / contain;}
.platform-main .list ul li.icon7 {background: #FFFFFF url("../../img/platform/platform7.gif") no-repeat center center / contain;}
.platform-main .list ul li.icon8 {background: #FFFFFF url("../../img/platform/platform8.gif") no-repeat center center / contain;}
.platform-main .list ul li.icon9 {background: #FFFFFF url("../../img/platform/platform9.gif") no-repeat center center / contain;}
.platform-main .list ul li a {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	text-indent: -99999px;
}
/*------------------------------------------------------------------------------
								SP
------------------------------------------------------------------------------*/
@media screen and (max-width: 1000px) {
/*------------------------------------------------------------------------------
								HEAD
------------------------------------------------------------------------------*/
.uijin-head {
	height: 36vw;
	background: url("../../img/uijin/head-bg.jpg") no-repeat center center / cover;
}
.uijin-head::before {
	height: 1vw;
}
.uijin-head::after {
	height: 1vw;
}
.uijin-head h2 {
	width: 92vw;
	height: 24vw;
	margin-left: -46vw;
	margin-top: -12vw;
	background: url("../../img/uijin/tit.png") no-repeat center center / 92vw 24vw;
}
/*------------------------------------------------------------------------------
								SUB TIT
------------------------------------------------------------------------------*/
.uijin-box {
	width: 100%;
	padding: 0 4vw;
}
#uijin-area h4 {
	padding-top: 10.5vw;
}
.history-pv h4 {
	background: url("../../img/uijin/sub1.jpg") no-repeat center top / auto 10.5vw;
}
.keyword h4 {
	background: url("../../img/uijin/sub2.jpg") no-repeat center top / auto 10.5vw;
}
.character h4 {
	background: url("../../img/uijin/sub3.jpg") no-repeat center top / auto 10.5vw;
}
.series h4 {
	background: url("../../img/uijin/sub4.jpg") no-repeat center top / auto 10.5vw;
}
/*------------------------------------------------------------------------------
								PV
------------------------------------------------------------------------------*/
#trailer-area ul {
	margin: 2vw auto 0 auto;
}
#trailer-area ul li {
	width: 49.5%;
	margin:0 1% 1% 0;
	height:10vw;
}
#trailer-area ul li:nth-child(2n) {
	margin:0 0 1% 0;
}
#trailer-area ul li a {
	line-height: 10vw;
}
/*------------------------------------------------------------------------------
								KEYWORD
------------------------------------------------------------------------------*/
.keyword .box li {
	width: 49%;
	margin-right: 2%;
}
.keyword .box li {
	-webkit-transition: none;
	transition:         none;
	background: #000000;
	padding: 5% 0 6.5%;
}
.keyword .box li:hover {
	-webkit-transition: none;
	transition:         none;
	background: #000000;
}
.keyword .box li:nth-child(3n) {
	margin-right: 2%;
}
.keyword .box li:nth-child(2n) {
	margin-right: 0px;
}
.keyword .box li h6 {
	font-size: 3.6vw;
}
.keyword .box li h6 strong {
	font-size: 4.2vw;
}
.keyword .box li h5 {
	font-size: 6vw;
	padding-top: 1em;
}
/*------------------------------------------------------------------------------
								KEYWORD detail 
------------------------------------------------------------------------------*/
.keyword-detail {
	width: 92vw;
	border: 2px solid #303030;
	padding: 4vw 5vw 5vw;
	max-height: 100vh;
}
.keyword-detail li .scroll-box {
	max-height: calc(100vh - 140px);
}
.keyword-detail li {
	max-height: 100vh;
}
.keyword-detail li p {
	font-size: 3.2vw;
}
.keyword-detail h5 {
	font-size: 6.2vw;
	margin-bottom: 4vw;
	text-align: left;
}
.keyword-detail h5 span {
	font-size: 5.2vw;
}
.keyword-detail h5 span strong {
	font-size: 6.2vw;
}

.keyword-detail li .photo {
	padding-top: 80%;
	margin-bottom: 4vw;
}
.keyword-detail .keyword1 .photo {
	background: url("../../img/uijin/photo1sp.jpg") no-repeat center center / cover;
}
.keyword-detail .keyword2 .photo {
	background: url("../../img/uijin/photo2sp.jpg") no-repeat center center / cover;
}
.keyword-detail .keyword3 .photo {
	background: url("../../img/uijin/photo3sp.jpg") no-repeat center center / cover;
}
.keyword-detail .keyword4 .photo {
	background: url("../../img/uijin/photo4sp.jpg?ver1.0") no-repeat center center / cover;
}
.keyword-detail .keyword5 .photo {
	background: url("../../img/uijin/photo5sp.jpg") no-repeat center center / cover;
}
.keyword-detail .keyword6 .photo {
	background: url("../../img/uijin/photo7sp.jpg") no-repeat center center / cover;
}
.keyword-detail .keyword7 .photo {
	background: url("../../img/uijin/photo6sp.jpg?ver1.0") no-repeat center center / cover;
}
.keyword-detail .keyword8 .photo {
	background: url("../../img/uijin/photo8sp.jpg?ver1.0") no-repeat center center / cover;
}
.keyword-detail .keyword9 .photo {
	background: url("../../img/uijin/photo9sp.jpg") no-repeat center center / cover;
}

.keyword-detail .close-btn {
	position:absolute;
	width:8vw;
	height:8vw;
	right:4vw;
	top:4vw;
}
.keyword-detail .close-btn span {
  height: 0.5vw;
}
.keyword-detail .close-btn span:nth-of-type(1) {
  -webkit-transform: translateY(4vw) rotate(-45deg);
  transform: translateY(4vw) rotate(-45deg);
}
.keyword-detail .close-btn span:nth-of-type(2) {
  -webkit-transform: translateY(4vw) rotate(45deg);
  transform: translateY(4vw) rotate(45deg);
}

/*------------------------------------------------------------------------------
								PLATFORM
------------------------------------------------------------------------------*/
.platform-main {
	max-width: 100%;
	min-width: 100%;
	padding: 0 0 6vw;
}
.platform-main .list {
	width: 100%;
	float: none;
	margin-right: 2%;
	margin-bottom: 10%;
}
.platform-main .list:last-child {
	margin-bottom: 0%;
}
/*------------------------------------------------------------------------------
								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{
}