@charset "utf-8";
.link-hide .link-btn {
	display: none;
}
.hide {
	display: none;
}

/* 簡体字　→　繁体字 */
body.lang-cn {
	font-family: "source-han-sans-simplified-c", sans-serif;
}
.lang-cn .header-ttl-box .header-ttl {
	font-family: "source-han-serif-tc", serif;
}


.sec#dlc {
	color: #000;
	padding-bottom: 8vw;
}
@media only screen and (min-width: 769px) {
	.sec#dlc {
		padding-bottom: 4vw;
	}
}

.sec#dlc .conts-box + .conts-box {
	margin-top: 10vw;
}
@media only screen and (min-width: 769px) {
	.sec#dlc .conts-box + .conts-box {
		margin-top: 6vw;
	}
}

@media only screen and (max-width: 768px) {
	.sec#dlc .header-ttl-box .header-ttl {
		font-size: 4.9vw;
	}
}

.sec#dlc .lead {
}
@media only screen and (min-width: 769px) {
	.sec#dlc .lead {
		font-size: 1.8vw;
	}
}

.sec#dlc .text {
	font-size: 3.8vw;
}
@media only screen and (min-width: 769px) {
	.sec#dlc .text {
		font-size: 1.40625vw;
	}
}

.sec#dlc img {
	vertical-align: bottom;
}

.sec#dlc .menu-list {
	text-align: center;
	margin-bottom: 8vw;
}
@media only screen and (min-width: 769px) {
	.sec#dlc .menu-list {
		margin-bottom: 4vw;
	}
}

.sec#dlc .menu-list li {
	display: inline-block;
	margin: 0.25em;
	position: relative;
}
@media only screen and (min-width: 769px) {
	.sec#dlc .menu-list li {
	}
}

.sec#dlc .menu-list li a {
	color: #1f76bd;
	text-decoration: underline;
}
@media only screen and (min-width: 769px) {
	.sec#dlc .menu-list li a {
		font-size: 1.35vw;
	}
	.sec#dlc .menu-list li a:hover {
		text-decoration: none;
	}
}

.sec#dlc .conts-inner {
	position: relative;
	letter-spacing: -.4em;
}
.sec#dlc .conts-inner > * {
	letter-spacing: normal;
}

.sec#dlc dl {
	position: relative;
	display: inline-block;
	vertical-align: top;
	box-sizing: content-box;
	width: 48%;
	margin-right: 4%;
	margin-bottom: 6vw;
}
@media only screen and (max-width: 768px) {
	.sec#dlc dl:nth-of-type(2n) {
		margin-right: 0;
	}
}
.sec#dlc dl.large {
	width: 100%;
	margin-bottom: 0;
	margin-right: 0;
}
.sec#dlc dl.large + dl.large {
	margin-top: 6vw;
}
.sec#dlc #deluxe dl.large {
	margin-bottom: 0;
}
@media only screen and (min-width: 769px) {
	.sec#dlc dl {
		width: 31%;
		margin-right: 3.5%;
		margin-bottom: 2vw;
	}
	.sec#dlc dl:nth-of-type(3n) {
		margin-right: 0;
	}
	.sec#dlc dl.large {
		width: 100%;
		margin-bottom: 0;
	}
	.sec#dlc dl.large + dl.large {
		margin-top: 4vw;
	}
}

.sec#dlc dl dt {
	position: relative;
	margin-bottom: 2vw;
}
.sec#dlc dl.large dt {
}
@media only screen and (min-width: 769px) {
	.sec#dlc dl dt {
		margin-bottom: 0.7vw;
	}
	.sec#dlc dl.large dt {
		float: left;
		width: 48%;
		margin-bottom: 0;
	}
}

.sec#dlc dl dt a {
	display: block;
	position: relative;
}

.sec#dlc dl dt a::after {
	background-image: url(../../../assets/images/common/play_ic.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 10vw;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background-image .2s ease-in;
  width: 10vw;
}
@media only screen and (min-width: 769px) {
  .sec#dlc dl dt a::after {
    height: 5vw;
    width: 5vw;
  }
}
@media only screen and (min-width: 769px) {
  .sec#dlc dl dt a:hover::after {
    background-image: url(../../../assets/images/common/play_ic-y.svg);
  }
}

.sec#dlc dl.is-disable dt a {
	pointer-events: none;
}
.sec#dlc dl.is-disable dt a::after {
	content: none;
}

.sec#dlc dl dd {
	position: relative;
}
.sec#dlc dl.large dd {
}
@media only screen and (min-width: 769px) {
	.sec#dlc dl dd {
	}
	.sec#dlc dl.large dd {
		float: right;
		width: 48%;
	}
}

.sec#dlc dl dd.ttl {
	color: #1f76bd;
	line-height: 1.2;
	font-size: 3.2vw;
	margin-bottom: 2vw;
}
.sec#dlc dl.large dd.ttl {
	font-size: 100%;
}
@media only screen and (min-width: 769px) {
	.sec#dlc dl dd.ttl {
		font-size: 1.1vw;
		margin-bottom: 0.5vw;
	}
	.sec#dlc dl.large dd.ttl {
		font-size: 1.3vw;
		margin-bottom: 1vw;
	}
}

.sec#dlc dl dd.price {
	color: #1f76bd;
	font-size: 3.2vw;
	margin-bottom: 2vw;
}
.sec#dlc dl.large dd.price {
}
@media only screen and (min-width: 769px) {
	.sec#dlc dl dd.price {
		font-size: 1.1vw;
		margin-bottom: 0;
	}
	.sec#dlc dl.large dd.price {
		margin-bottom: 1vw;
	}
}

.sec#dlc dl dd.free::before,
.sec#dlc dl dd.fee::before {
	position: relative;
	top: 0;
	left: 0;
	text-indent: 0;
	display: inline-block;
	line-height: 1;
	text-align: center;
	color: #fff;
	width: 3.6em;
	font-size: 0.9em;
	margin-right: 1em;
	padding: 0.5em 0;
}
.sec#dlc dl dd.free::before {
	background: #001c58;
}
.sec#dlc dl dd.fee::before {
	background: #9e005d;
}

.lang-us .sec#dlc dl dd.free::before,
.lang-uk .sec#dlc dl dd.free::before {
	content: "free";
}
.lang-us .sec#dlc dl dd.fee::before,
.lang-uk .sec#dlc dl dd.fee::before {
	content: "PAID DLC";
	width: 6em;
}

.lang-cn .sec#dlc dl dd.free::before {
	content: "免費" ;
}
.lang-cn .sec#dlc dl dd.fee::before {
	content: "付費" ;
}

.lang-de .sec#dlc dl dd.free::before {
	content: "Kostenlos";
	width: 9em;
}
.lang-de .sec#dlc dl dd.fee::before {
	content: "Kostenpflichtig";
	width: 9em;
}

.lang-es .sec#dlc dl dd.free::before {
	content: "Gratuito";
	width: 6em;
}
.lang-es .sec#dlc dl dd.fee::before {
	content: "De pago";
	width: 6em;
}

.lang-fr .sec#dlc dl dd.free::before {
	content: "Gratuit";
	width: 6em;
}
.lang-fr .sec#dlc dl dd.fee::before {
	content: "Payant";
	width: 6em;
}

.lang-hk .sec#dlc dl dd.free::before {
	content: "免費" ;
}
.lang-hk .sec#dlc dl dd.fee::before {
	content: "付費" ;
}

.lang-it .sec#dlc dl dd.free::before {
	content: "Gratuito";
	width: 8em;
}
.lang-it .sec#dlc dl dd.fee::before {
	content: "A pagamento";
	width: 8em;
}

.lang-kr .sec#dlc dl dd.free::before {
	content: "무료" ;
}
.lang-kr .sec#dlc dl dd.fee::before {
	content: "유료" ;
}

.lang-pt-br .sec#dlc dl dd.free::before {
	content: "有料" ;
}
.lang-pt-br .sec#dlc dl dd.fee::before {
	content: "無料" ;
}

.sec#dlc dl dd.link-btn {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
.sec#dlc dl.large dd.link-btn {
	width: 50%;
	margin-left: initial;
}
@media only screen and (min-width: 769px) {
	.sec#dlc dl dd.link-btn {
		position: absolute;
		width: 45%;
		right: 0;
		bottom: 0;
	}
	.sec#dlc dl.large dd.link-btn {
		float: none;
		width: 14%;
		right: 10vw;
		bottom: initial;
		top: 2.8vw;
	}
}

.sec#dlc dl dd.link-btn a {
	display: block;
	background: #123057;
	color: #fff;
	text-align: center;
	line-height: 1;
	border-radius: 2em;
	padding: 1.5vw 0;
	font-size: 3vw;
}
@media only screen and (min-width: 769px) {
	.sec#dlc dl dd.link-btn a {
		padding: 0.4vw 0;
		font-size: 100%;
		background: #999;
		transition: background .3s ease;
	}
	.sec#dlc dl dd.link-btn a:hover {
		background: #123057;
	}
}

.sec#dlc dl dd.lists {
	margin-top: 3vw;
}
@media only screen and (min-width: 769px) {
	.sec#dlc dl dd.lists {
		margin-top: 0;
	}
}

.toggle {
	display: none;
}
@media only screen and (max-width: 768px) {
	.toggle-label {
		font-size: 3.2vw;
		display: block;
		position: relative;
		padding: 0.5em 1em;
		margin-bottom: 0.5em;
		color: #fff;
		background: #1f76bd;
	}
	.toggle-label::after {
		content:"+";
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0.5em;
		font-size: 5vw;
	}

	.toggle:checked  + .toggle-label::after{
		content:"-";
		transform: translateY(-55%);
		font-size: 5vw;
	}
	.toggle-lists {
		height: 0;
		opacity: 0;
		padding: 0;
		visibility: hidden;
	}
	.toggle:checked  + .toggle-label + .toggle-lists {
		height: auto;
		opacity: 1;
		visibility: visible;
		font-size: 80%;
	}
	.sec#dlc dl.item.is-hidden {
		visibility: hidden;
		position: absolute;
		animation: show 1s linear 0s;
	}
}

@media only screen and (min-width: 769px) {
	.toggle-lists {
		margin-top: 0.5vw;
		height: 12em;
		overflow-y: auto;
	}
}

.more-btn {
	display: none;
}
@media only screen and (max-width: 768px) {
	.more-btn.is-show {
		display: block;
	}
	.more-btn {
		text-align: center;
	}
	.more-btn button {
		font-size: 3vw;
		font-family: inherit;
		background: #1f76bd;
		color: #fff;
		border: none;
		cursor: pointer;
		outline: none;
		padding: 1.5vw;
		width: 50%;
	}
}


/************************************
  重要なお知らせ
************************************/
.sec#dlc .important {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 8vw;
}
@media only screen and (max-width: 768px) {
	.sec#dlc .important {
		-webkit-box-ordinal-group: 5;
		-ms-flex-order: 4;
		order: 4;
	}
}
@media only screen and (min-width: 769px) {
	.sec#dlc .important {
		width: 52%;
		margin-bottom: 4vw;
	}
}

.sec#dlc .important .enclose-box {
  border: 4px solid rgba(0, 15, 44, 0.9);
  overflow: hidden;
  position: relative;
  z-index: 1;
	text-align: left;
}

.sec#dlc .important .enclose-box-inner {
  background: rgba(0, 15, 44, 0.9);
  margin: 2px;
  padding: 4vw;
}
@media only screen and (min-width: 769px) {
  .sec#dlc .important .enclose-box-inner {
    padding: 1.5vw 2vw;
  }
}

.sec#dlc .important .enclose-box-inner .ttl {
	color: #f9eb93;
	font-weight: 500;
	margin-bottom: 1.5vw;
}
@media only screen and (min-width: 769px) {
	.sec#dlc .important .enclose-box-inner .ttl {
		font-size: 1.1vw;
		margin-bottom: 0.5vw;
	}
}

.sec#dlc .important .enclose-box-inner .text {
	text-indent: -4vw;
	margin-left: 4vw;
	font-size: 3.2vw;
}
.sec#dlc .important .enclose-box-inner .text + .text {
	margin-top: 1vw;
}
@media only screen and (min-width: 769px) {
	.sec#dlc .important .enclose-box-inner .text {
		font-size: 1.16vw;
		text-indent: -1.4em;
		margin-left: 1.4em;
	}
	.sec#dlc .important .enclose-box-inner .text + .text {
		margin-top: 0.5vw;
	}
}

.sec#dlc .important .enclose-box-inner .text a {
	position: relative;
	color: #fff;
	transition: color .5s ease;
}
.sec#dlc .important .enclose-box-inner .text a::before {
  background: url(../../../assets/images/common/arrow_ic-r-w.png) center no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 3.2vw;
  width: 4vw;
}
@media only screen and (min-width: 769px) {
	.sec#dlc .important .enclose-box-inner .text a::before {
    height: 1em;
    width: 1.4em;
		transition: background .5s ease;
  }
}

@media only screen and (min-width: 769px) {
	.sec#dlc .important .enclose-box-inner .text a:hover {
		color: #eed998;
	}
	.sec#dlc .important .enclose-box-inner .text a:hover::before {
		background: url(../../../assets/images/common/arrow_ic-r-y.png) center no-repeat;
    background-size: contain;
	}
}

.sec#dlc .important .enclose-box-inner .date {
	display: inline-block;
	color: #999;
	font-size: 80%;
	margin-left: 2.5em;
}


.sec#dlc .store-btn-area{
  width: 100%;
  margin: 10vw auto 6vw;
}
@media only screen and (min-width: 769px) {
  .sec#dlc .store-btn-area{
    width: 50%;
    margin: 5vw auto 2vw;
  }
}
.ja .sec#dlc .store-btn-area .new{
  margin-left: 4vw;
  font-size: 2.5vw;
  margin-bottom: 0.5em;
}
@media only screen and (min-width: 769px) {
  .ja .sec#dlc .store-btn-area .new{
    margin-left: 1vw;
    font-size: 1vw;
    margin-bottom: 0.5em;
  }
}
.sec#dlc .store-btn{
  display: block;
  position: relative;
  background: #122f55;
  padding: 0.2vw;
  width: 100%;
  transition: 0.2s background ease;
}

@media only screen and (min-width: 769px) {
  .sec#dlc .store-btn:hover{
    background: #194175;
  }
}

.sec#dlc .store-btn a{
  font-family: "Source Serif 4", serif;
  display: block;
  color: #fff;
  border: 1px solid #fff;
  position: relative;
  min-height: 2.8em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.9vw;
  font-weight: bold;
	text-decoration: none;
}
@media only screen and (min-width: 769px) {
  .sec#dlc .store-btn a{
    font-size: 1.2vw;
  }
}

.sec#dlc .store-btn a::before {
    background: url(../../images/arrow_ic-r-w.png) center no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 3.2vw;
    position: absolute;
    right: 1vw;
    top: 50%;
    transform: translateY(-50%);
    width: 4vw;
}

@media only screen and (min-width: 769px) {
    .sec#dlc .store-btn a::before {
        height: 1.2em;
        right: 1vw;
        width: 1em;
    }
}