@charset "utf-8";

.sec#update3 .conts-box + .conts-box {
	margin-top: 8vw;
}
@media only screen and (max-width: 768px) {
	.sec#update3 .conts-box.info + .conts-box.info {
		margin-top: 6vw;
	}
}
@media only screen and (min-width: 769px) {
	.sec#update3 .conts-box + .conts-box {
		margin-top: 4vw;
	}
}

.sec#update3 .detail-btn {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	margin-bottom: 24vw;
}
.sec#update3 .conts-box.roadmap .detail-btn {
	margin: 16vw auto 22vw;
}
@media only screen and (min-width: 769px) {
	.sec#update3 .detail-btn {
		width: 45%;
		margin-bottom: 12vw;
	}
	.sec#update3 .conts-box.roadmap .detail-btn {
		margin: 8vw auto 10vw;
	}
}

.sec#update3 .detail-btn .svg-box {
  left: 50%;
  padding-top: 14vw;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
@media only screen and (min-width: 769px) {
  .sec#update3 .detail-btn .svg-box {
    padding-top: 6vw;
  }
}

.sec#update3 .detail-btn .svg-box > svg {
  display: block;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.sec#update3 .detail-btn .svg-box > svg path {
  transition: fill .5s ease;
}
@media only screen and (min-width: 769px) {
  .sec#update3 .detail-btn a:hover path {
		fill: #9d8a6f;
  }
}

.sec#update3 .detail-btn .detail-btn-text {
  color: #9d8a6f;
  left: 50%;
  position: absolute;
  top: 50%;
  transition: color .5s ease;
  transform: translate(-50%, -50%);
  width: 100%;
	text-align: center;
	font-size: 3.2vw;
}
@media only screen and (min-width: 769px) {
	.sec#update3 .detail-btn .detail-btn-text {
		font-size: 1.2vw;
	}
  .sec#update3 .detail-btn a:hover .detail-btn-text {
    color: #fff;
  }
}

.sec#update3 .detail-btn .detail-btn-text::before {
  background: url(../../../assets/images/common/arrow_ic-r-brown.png) center no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  transition: background .5s ease;
  width: 1em;
  height: .8em;
	position: absolute;
	top: 50%;
	left: 1.5em;
	transform: translateY(-50%);
}
@media only screen and (min-width: 769px) {
	.sec#update3 .detail-btn a:hover .detail-btn-text::before {
		background: url(../../../assets/images/common/arrow_ic-r-w.png) center no-repeat;
		background-size: contain;
	}
}

.sec#update3 .period {
	margin: 8vw 0;
}
@media only screen and (min-width: 769px) {
	.sec#update3 .period {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		margin: 4vw 0;
	}
}

.sec#update3 .period .ttl {
	border: 1px solid #526574;
	box-sizing: border-box;
	text-align: center;
	padding: 0.2em 0.5em;
}
@media only screen and (min-width: 769px) {
	.sec#update3 .period .ttl {
		width: 15%;
		padding: 0.8vw 0;
		margin-right: 2vw;
		font-size: 1.3vw;
	}
}

.sec#update3 .period .text {
	width: 100%;
	margin-top: 1vw;
}
@media only screen and (min-width: 769px) {
	.sec#update3 .period .text {
		width: inherit;
		margin-top: 0;
	}
}

.sec#update3 .period .text .date {
	color: #e3a40e;
	font-weight: 700;
	text-align: center;
	font-size: 5.2vw;
}
@media only screen and (min-width: 769px) {
	.sec#update3 .period .text .date {
		font-size: 2.7vw;
	}
}

.sec#update3 .video .video-area {
	width: 100%;
	margin: 8vw auto 10vw;
}
@media only screen and (min-width: 769px) {
  .sec#update3 .video .video-area {
    width: 90%;
		margin: 4vw auto 5vw;
  }
}

.sec#update3 .video-area .video-ttl {
	color: #1b2740;
	font-weight: 700;
	text-align: center;
	font-size: 3.3vw;
	margin-bottom: 2vw;
}
@media only screen and (min-width: 769px) {
	.sec#update3 .video-area .video-ttl {
		font-size: 1.6vw;
		margin-bottom: 1vw;
  }
}

.sec#update3 .video .video-area .video-box {
	border: 3px solid #fff;
	box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);
}

.sec#update3 .video .video-area .video-box .player {
	background: #000;
	border: 1px solid #333;
	padding-top: 56.25%;
	position: relative;
	width: 100%;
}
.sec#update3 .video .video-area .video-box .player #player {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.sec#update3 .monster .conts-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin: 7vw 0 10vw;
}
@media only screen and (min-width: 769px) {
  .sec#update3 .monster .conts-list {
		margin: 4vw 0 5vw;
  }
}

.sec#update3 .monster .conts-list-item {
  position: relative;
	width: 45%;
}
@media only screen and (max-width: 768px) {
	.sec#update3 .monster .conts-list-item:nth-child(2) {
		margin-left: 10%;
	}
}
@media only screen and (min-width: 769px) {
  .sec#update3 .monster .conts-list-item {
		width: 32%;
		margin: 0 3.5%;
  }
}

.sec#update3 .monster .conts-list .inner {
  position: relative;
}

.sec#update3 .monster .conts-list .monster-frame {
  line-height: 0;
  position: relative;
  width: 100%;
  z-index: 3;
}

@media only screen and (min-width: 769px) {
  .sec#update3 .monster .conts-list .monster-frame {
    border-radius: 1.5em;
  }
}

.sec#update3 .monster .conts-list .inner-frame {
  border-radius: 1em;
  height: 100%;
  left: 0;
  line-height: 0;
  overflow: hidden;
  top: 0;
  position: absolute;
	width: 100%;
}
@media only screen and (min-width: 769px) {
  .sec#update3 .monster .conts-list .inner-frame {
    border-radius: 2.5em;
  }
}

.sec#update3 .monster .conts-list .monster-image {
  height: 100%;
  left: 50%;
  line-height: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(1, 1);
  transition: transform .15s ease-in-out;
  width: 100%;
	z-index: 2;
}
@media only screen and (min-width: 769px) {
  .sec#update3 .monster .conts-list .inner:hover .monster-image {
    border-radius: 1.5em;
    transform: translate(-50%, -50%) scale(1.15, 1.15);
  }
}

.sec#update3 .monster .conts-list .monster-bg {
  border-radius: 0.5em;
  content: "";
  display: block;
  height: calc(100% - 4px);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 4px);
  z-index: 1;
}
@media only screen and (min-width: 769px) {
  .sec#update3 .monster .conts-list .monster-bg {
	  background: linear-gradient(to bottom, #323232 0%, #797979 100%);
    border-radius: 1.5em;
    height: calc(100% - 6px);
    width: calc(100% - 6px);
  }
}

@media only screen and (max-width: 768px) {
  .sec#update3 .monster .conts-list .inner.crimson-glow-valstrax .monster-bg {
    background: linear-gradient(to bottom, #292a33 0%, #606177 100%);
  }
  .sec#update3 .monster .conts-list .inner.apex-zinogre .monster-bg {
    background: linear-gradient(to bottom, #413d30 0%, #978e71 100%);
  }
}
@media only screen and (min-width: 769px) {
  .sec#update3 .monster .conts-list .inner:hover.crimson-glow-valstrax .monster-bg {
    background: linear-gradient(to bottom, #292a33 0%, #606177 100%);
  }
  .sec#update3 .monster .conts-list .inner:hover.apex-zinogre .monster-bg {
    background: linear-gradient(to bottom, #413d30 0%, #978e71 100%);
  }
}

.sec#update3 .monster .conts-list .monster-name {
	color: #FFF;
  font-family: "Markazi Text", serif;
	text-shadow: 3px 3px 1px black, 3px 3px 1px black, 0 0 1px black;
  font-weight: 900;
	line-height: 0.8;
  position: absolute;
  z-index: 3;
  top: 2%;
	left: 4%;
  font-size: 6.5vw;
}
.lang-cn .sec#update3 .monster .conts-list .monster-name {
  font-family: "source-han-serif-sc", serif;
	line-height: 1;
  top: 3%;
	font-size: 4.5vw;
}
.lang-hk .sec#update3 .monster .conts-list .monster-name {
  font-family: "source-han-serif-tc", serif;
	line-height: 1.2;
	font-size: 4.5vw;
}
.lang-kr .sec#update3 .monster .conts-list .monster-name {
  font-family: "source-han-serif-korean", serif;
	line-height: 1.2;
	font-size: 4.5vw;
}
.lang-fr .sec#update3 .monster .conts-list .monster-name {
	top: 3%;
}
@media only screen and (max-width: 768px) {
	.lang-fr .sec#update3 .monster .conts-list .monster-name {
		font-size: 5.5vw;
	}
}
@media only screen and (min-width: 769px) {
  .sec#update3 .monster .conts-list .monster-name {
    font-size: 3.5vw;
  }
	.lang-hk .sec#update3 .monster .conts-list .monster-name,
	.lang-cn .sec#update3 .monster .conts-list .monster-name {
		font-size: 2.8vw;
  }
	.lang-kr .sec#update3 .monster .conts-list .monster-name {
		font-size: 2.8vw;
  }
	.lang-es .sec#update3 .monster .conts-list .monster-name {
		top: 3%;
	}
}


@media only screen and (max-width: 768px) {
	.sec#update3 .info.col-box {
		display: block;
	}
	.sec#update3 .info.col-box .info-block + .info-block {
		margin-top: 6vw;
	}
}
@media only screen and (min-width: 769px) {
	.sec#update3 .info.col-box {
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	.sec#update3 .info.col-box .info-block {
		width: 48%;
	}
}

.sec#update3 .info .info-block .sec-ttl-box {
	margin-bottom: 3vw;
}
@media only screen and (min-width: 769px) {
	.sec#update3 .info .info-block .sec-ttl-box {
		margin-bottom: 1.5vw;
	}
}

.sec#update3 .info .info-block .image img {
	vertical-align: bottom;
}

@media only screen and (max-width: 768px) {
	.sec#update3 .info .info-block ul.image li + li {
		margin-top: 2vw;
	}
}
@media only screen and (min-width: 769px) {
	.sec#update3 .info .info-block ul.image {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	.sec#update3 .info .info-block ul.image li {
		width: 48%;
	}
}

.sec#update3 .info .info-block .text {
	margin-top: 2vw;
}
@media only screen and (min-width: 769px) {
	.sec#update3 .info .info-block .text {
		margin-top: 1vw;
		font-size: 1.14vw;
	}
}

@media only screen and (min-width: 769px) {
	.sec#update3 .info .info-block .col-box-pc {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
}

.sec#update3 .info .info-block .col-box-pc .image {
}
@media only screen and (min-width: 769px) {
	.sec#update3 .info .info-block .col-box-pc .image {
		width: 48%;
	}
}

@media only screen and (min-width: 769px) {
	.sec#update3 .info .info-block .col-box-pc .text-box {
		width: 48%;
	}
}

@media only screen and (min-width: 769px) {
	.sec#update3 .info .info-block .col-box-pc .text-box .text {
		margin-top: 0;
	}
}

.sec#update3 .info .info-block .col-box-pc .text-box .detail-btn {
	margin-top: 12vw;
}
@media only screen and (min-width: 769px) {
	.sec#update3 .info .info-block .col-box-pc .text-box .detail-btn {
		width: 100%;
		margin-bottom: 0;
		margin-top: 6vw;
	}
}

@media only screen and (min-width: 769px) {
	.sec#update3 .info .info-block .col-box-pc .text-box .detail-btn .svg-box {
		padding-top: 5vw;
	}
}

@media only screen and (max-width: 768px) {
	.sec#update3 .info .info-block .col-box-pc .text-box .detail-btn .detail-btn-text {
		font-size: 2.9vw;
	}
	.lang-kr .sec#update3 .info .info-block .col-box-pc .text-box .detail-btn .detail-btn-text,
	.lang-hk .sec#update3 .info .info-block .col-box-pc .text-box .detail-btn .detail-btn-text,
	.lang-cn .sec#update3 .info .info-block .col-box-pc .text-box .detail-btn .detail-btn-text {
		font-size: 3.2vw;
	}
}

.sec#update3 .roadmap a {
	display: block;
}

.sec#update3 .roadmap .image {
	position: relative;
}
@media only screen and (min-width: 769px) {
	.sec#update3 .roadmap .image {
		width: 85%;
		margin: 0 auto;
	}
}

.sec#update3 .roadmap .image::after {
	background: url(../../../assets/images/common/zoom_ic.jpg) right no-repeat;
  background-size: contain;
  content: "";
  display: block;
  position: absolute;
	bottom: 0;
	right: 0;
	width: 2.5em;
	height: 2.5em;
}
@media only screen and (min-width: 769px) {
	.sec#update3 .roadmap .image::after {
		width: 5em;
		height: 5em;
	}
}

.sec#update3 .roadmap .image img {
	vertical-align: bottom;
}