@charset "utf-8";

:root {
	/* base */
	--cts-gutter: 30px;
	--cts-width: 900px;

	/* font */
	--dp-font-jp: "Noto Sans JP", sans-serif;
	/* Noto Sans JP
	Noto Sans JP Thin 100
	Noto Sans JP Light 300
	Noto Sans JP Regular 400
	Noto Sans JP Medium 500
	Noto Sans JP Bold 600
	*/
	--cts-font: "zen-antique", sans-serif;
	/* Zen Antique
	Zen Antique Regular normal 400
	*/

	--dp-h1-size: clamp(24px,calc(1.159rem + 1.45vw),36px);
	--dp-h2-size: clamp(20px,calc(1.023rem + .97vw),28px);
	--dp-h3-size: clamp(18px,calc(.955rem + .73vw),24px);
	--dp-h4-size: clamp(16px,calc(.886rem + .48vw),20px);
	--dp-p-l-size: clamp(14px, 0.806rem + 0.3vw, 16px);/* 本文 Large */
	--dp-p-note-size: clamp(10px,calc(.597rem + .12vw),11px);/* 本文 Notes */
	--dp-price-s-size: clamp(16px,calc(.886rem + .48vw),20px);/* 価格 Small */
	--dp-price-tax-s-size: clamp(12px,calc(.693rem + .24vw),14px);/* 円・税 Small */

	--cts-font-size: clamp(12px,calc(.693rem + .24vw),14px);/* DP-Medium */
	--cts-font-ls: .02em;/*letter-spacing*/
	--cts-font-ls-02: .025em;

	/* color */
	--dp-color: #004da1;
	--dp-color-price: #e43344;
	--cts-color: #191919;
	--cts-color-02: #ABCC8B;
	--cts-color-03: #0052A5;

	/*　コンテンツ用変数 */
	--cts-about-bg-height: clamp(20px, -1.023rem + 9.7vw, 100px);

}


/* LP共通汎用
____________________*/
#container a, #container a span {
    color: inherit;
    text-decoration: none;
}
@media screen and (min-width: 480px){
.breadCrumb {
    max-width: 1140px;
}
#container .breadCrumb li a {
    text-decoration: underline;
    color: #0062b0;
}
#container .breadCrumb li a:hover {
    text-decoration: none;
}
}
#container {
	width: 100%;
	margin: auto;
}
.column2R #main {
	float: none;
	width: auto;
}
.breadCrumb {
	margin: 10px auto 0 !important;
}
.pagetop {
	display: none;
}
#pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 55px;
}
#pagetop a {
	color: #fff;
	background-color: #333;
	border-radius: 5px;
	display: block;
	font-size: 12px;
	line-height: 1.5em;
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
}
figure {
	margin: 0;
}
img {
	image-rendering: -webkit-optimize-contrast;
}
#s_container {
	font-family: var(--dp-font-jp);
	width: 100%;
	margin: 0 auto;
}
.contentsWrap {
	width: 100%;
	color: var(--cts-color);
	font-size: var(--cts-font-size);
	overflow: hidden;
}
.contentsWrap img {
	max-width: 100%;
}
.clearfix:after, #nav1:after, #nav2:after, #nav3:after, #container:after, #contents:after, #footerNav:after {
	content: none !important;
}

@media (max-width: 479px) {
	#container {
		margin-bottom: 0 !important;
	}
	.leadSection.clearfix {
		display: none;
	}
}
.sp {
	display: none;
}


/* コンテンツ
____________________*/
.contentsWrap {
	/*background: url(../../gamepc/img/wolong/bg.jpg) repeat-y center;
	background-size: contain;*/
	background: url("../img/wolong/bg.jpg") no-repeat center top fixed;
	background-size: cover;
}
.contents {
	padding-block: clamp(60px, 2.614rem + 4.85vw, 100px);
}
.contents__inner {
	width: clamp(310px,100%,calc(var(--cts-width) +  var(--cts-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--cts-gutter);
	box-sizing: border-box;
}
#container .link__inner {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-block: clamp(5px,0.236rem + 0.38vw,8px);
	padding-inline: clamp(25px,0.737rem + 2vw,40px);
	background: var(--dp-color);
	font-size: clamp(11px, 0.545rem + 0.61vw, 16px);
	color: #fff;
	text-decoration: none;
	letter-spacing: var(--cts-font-ls);
	box-sizing: border-box;
	overflow: hidden;
	z-index: 1;
}
.link__inner::before {
	position: absolute;
	content: "";
	width: 150%;
	height: 100%;
	top: 0;
	left: -168%;
	background: #fff;
	transform: skewX(-18deg);
	opacity: .3;
	z-index: -1;
}
.link__inner::after {
	content: "";
	position: absolute;
	top: calc(50% - 3px);
	right: 17px;
	width: 6px;
	height: 6px;
	border-right: 1px solid;
	border-bottom: 1px solid;
	border-color: #fff;
	transform: rotate(-45deg);
}
.link--over::before {
	animation: link-over ease-out .4s both;
}
.link--out::before {
	animation: link-out ease-in .4s both;
}
@keyframes link-over {
	0% {
		left: -168%;
	}
	100% {
		left: -18%;
	}
}
@keyframes link-out {
	0% {
		left: -18%;
	}
	100% {
		left: 168%;
	}
}


/* mv
____________________*/
.contents--mv {
	position: relative;
	width: 100%;
	padding: 0;
}
.contents--mv img {
	width: 100%;
	padding: 0;
}


/* intro
____________________*/
.contents--intro {
	padding-block: clamp(50px, 2.273rem + 3.64vw, 80px);
	background: #411405;
	background: linear-gradient(90deg, #1a1a1a 0%, #411405 50%, #1a1a1a 100%);
}
.intro__txt {
	font-size: 24px;
	font-family: var(--cts-font);
	color: #fff;
	text-align: center;
	letter-spacing: .04em;
	line-height: 2;
}


/* lineup
____________________*/
.contents--lineup {

}
.contents__ttl {
	text-align: center;
}
.contents__ttl img {
	width: clamp(210px, 4.688rem + 20vw, 315px);
}
.lineup__list {
	margin-block-start: clamp(40px, 2.045rem + 2.27vw, 60px);
}
.lineup__item {
	position: relative;
}
.lineup__item + .lineup__item {
	margin-block-start: clamp(65px, 3.352rem + 3.03vw, 90px);
}
.lineup__box {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(2px, 0.04rem + 0.36vw, 5px);
	z-index: 100;
}
.lineup__detail {
	max-width: 600px;
	padding: clamp(1px, -0.534rem + 2.55vw, 22px) 23px clamp(17px, 0.608rem + 1.94vw, 33px);
}
.linup__name {
	max-width: 565px;
	font-size: clamp(18px, 0.955rem + 0.73vw, 24px);
	font-family: var(--cts-font);
	font-weight: 400;
	color: #7ABAF1;
	line-height: 1.375;
	letter-spacing: .015em;
	text-indent: -0.6em;
}
.lineup__amd .linup__name {
	color: #EE7C6F;
}
.lineup__detail-inner {
	display: flex;
	align-items: flex-end;
	/*gap: clamp(20px, 0.795rem + 2.27vw, 40px);*/
	margin-block-start: clamp(15px, 0.795rem + 0.61vw, 20px);
	color: #fff;
	font-family: var(--cts-font);
	justify-content: space-between;
	gap: 20px;
}
.lineup__spec-list {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.7;
	letter-spacing: .03em;
}
.lineup__spec-item {
	display: flex;
	align-items: center;
}
.lineup__spec-head {
	display: inline-block;
	width: 7.5em;
}
.lineup__spec {
	/*max-width: 160px;*/
}
.lineup__price-box {
	text-align: center;
}
.lineup__price {
	font-size: 28px;
	letter-spacing: .05em;
}
.lineup__tax {
	font-size: clamp(14px, 0.642rem + 0.73vw, 19px);
	letter-spacing: .05em;
}
.lineup__link-box {
	margin-block-start: clamp(11px, 0.261rem + 1.82vw, 26px);
}
#container .lineup__link-box .link__inner {
	background: #BC502F;
	font-size: clamp(16px, 0.943rem + 0.24vw, 18px);
	color: #fff;
	box-shadow: 3px 4px 0px #0000002e;
}
.lineup__link-box .link__inner::before {
	background: #fff;
}
.lineup__link-box .link__inner::after {
	border-color: #fff;
}
.lineup__subttl {
	max-width: 506px;
	margin: clamp(40px, 2.045rem + 2.27vw, 60px) auto;
	/*padding: clamp(8px, 0.455rem + 0.23vw, 10px) .5em;
	background: #1C2948;
	border: 1px solid #707070;*/
	font-size: clamp(18px, 0.989rem + 0.68vw, 24px);
	font-family: var(--cts-font);
	font-weight: 400;
	color: #fff;
	text-align: center;
	letter-spacing: .04em;
	box-sizing: border-box;
}
.lineup__subttl img {
	width: clamp(250px, 4.688rem + 20vw, 315px);
}
.lineup__bg {
	position: relative;
	margin-block: clamp(100px, 3.977rem + 11.36vw, 200px) clamp(65px, 3.267rem + 3.98vw, 100px);
}
.lineup__bg::before {
	content: "";
	position: absolute;
	width: calc(100% + clamp(26px, -0.511rem + 10.68vw, 120px));
	height: calc(100% + clamp(100px, 3.977rem + 11.36vw, 200px));
	top: calc(clamp(65px, 3.267rem + 3.98vw, 100px) * -1);
	left: calc(clamp(13px, -0.256rem + 5.34vw, 60px) * -1);
	background: rgba(43,43,43,.78);
	z-index: 10;
}
.lineup__bg > * {
	position: relative;
	z-index: 20;
}
.lineup__amd {
	margin-top: clamp(130px, 6.534rem + 18vw, 300px);
}
.lineup__amd-camp {
	text-align: center;
}
.lineup__amd-camp-txt {
	margin-block-start: clamp(30px, 1.193rem + 3.41vw, 60px);
	font-size: clamp(18px, 0.989rem + 0.68vw, 24px);
	font-family: var(--cts-font);
	font-weight: 400;
	color: #fff;
	letter-spacing: .04em;
}
.lineup__amd-camp-link {
	display: inline-block;
	margin-block-start: 15px;
	/*transition: opacity .3s;*/
}
.lineup__amd-camp-link:hover {
	/*opacity: .7;*/
	animation-name: hover-flash;
    animation-duration: 1s;
    opacity: 1;
}


/* outline
____________________*/
.contents--outline {
	color: #fff;
}
.contents--outline .contents__inner {
	width: 100%;
	padding: 0;
}
.outline__box {
	display: flex;
	align-items: center;
	margin-top: 90px;
}
.outline__box:nth-of-type(2n) {
	flex-direction: row-reverse;
}
.outline__imgbox {
	width: 50%;
}
.outline__inr {
	width: 40%;
	max-width: 600px;
	margin: 0 60px;
}
.outline__box:nth-of-type(2n) .outline__inr {
	text-align: right;
}
.outline__ttl {
	font-size: clamp(16px, 0.682rem + 1.59vw, 30px);
	font-family: var(--cts-font);
	font-weight: 400;
}
.outline__ttl:nth-of-type(2n) {
	margin-block-start: clamp(20px, 0.963rem + 1.02vw, 35px);
}
.outline__txt {
	margin-block-start: clamp(10px, 0.338rem + 1.02vw, 25px);
	font-size: clamp(14px, 0.798rem + 0.27vw, 18px);
	font-weight: 300;
	line-height: 1.75;
	font-family: var(--cts-font);
}

/* logo
____________________*/
.contents--logo {
	padding-block: clamp(20px, 0.341rem + 4.55vw, 60px);
}
.logo__imgbox {
	text-align: center;
}
.logo__imgbox img {
	width: clamp(300px, 8.807rem + 42.42vw, 650px);
}
.about__link-box {
	width: min(80%, 500px);
	margin-block-start: clamp(40px, 1.818rem + 3.41vw, 70px);
	margin-inline: auto;
}
#container .about__link {
	padding-block: clamp(17px, 0.693rem + 1.58vw, 25px);
	padding-inline: 15px;
	background: #BC502F;
	font-size: clamp(12px, 0.58rem + 0.73vw, 18px);
	font-weight: 300;
	font-family: var(--cts-font);
}
.about__link.link__inner::after {
	content: none;
}
.about__link img {
	width: clamp(14px, 0.648rem + 0.97vw, 22px);
	margin-inline-start: clamp(13px, 0.472rem + 1.45vw, 25px);
}
.contents__copy {
	margin-block-start: clamp(15px, 0.369rem + 2.42vw, 35px);
	font-size: clamp(10px, 0.455rem + 0.73vw, 16px);
	text-align: center;
	color: #fff;
	font-family: var(--cts-font);
}
.bg_glay {
	background: #1A1A1A;
}
.contents--logo.bg_glay {
	background: linear-gradient(180deg, transparent 0%, transparent 50%, #1A1A1A 50%, #1A1A1A 100%);
}

@media screen and (max-width: 767px) {
.contents--outline {
	padding-top: 10px;
}
.outline__box {
	flex-direction: column;
	align-items: flex-start;
	margin-top: 60px;
}
.outline__box:nth-of-type(2n) {
	flex-direction: column;
	align-items: flex-end;
}
.outline__imgbox {
	width: 90%;
}
.outline__inr {
	width: 90%;
	margin: 0;
	padding: 20px 0 0 20px;
	max-width: 100%;
}
.outline__box:nth-of-type(2n) .outline__inr {
	padding: 20px 20px 0 0;
	text-align: left;
}
}

/* モバイル
____________________*/
@media (max-width: 550px) {
.intro__txt {
	font-size: 3.4vw;
}
	.lineup__detail-inner {
		flex-direction: column;
		align-items: stretch;
	}
	.lineup__spec {
		max-width: none;
	}
}
@media (max-width: 479px) {
	#s_container {
		margin: auto;
	}
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}

}

/*ss_gallery*/
.contents--ss_gallery {
	padding-top: 0;
}
.contents--ss_gallery .contents__inner {
	width: 100%;
	margin: 0;
	padding: 0;
}
.ss_gallery .galleryInner {
  position: relative;
  display: flex;
  width: 100vw;
  overflow: hidden;
  box-sizing: border-box;
}
.ss_gallery .galleryInner ul:first-child {
  animation: galleryloop 100s -50s linear infinite;
  backface-visibility: hidden;
  will-change: transform;
}
.ss_gallery .galleryInner ul + ul {
  animation: galleryloop2 100s linear infinite;
}
.ss_gallery .galleryInner:hover ul, .ss_gallery .galleryInner ul.modal {
  animation-play-state: paused;
}
@keyframes galleryloop {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes galleryloop2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
  }
}
.ss_gallery ul {
  display: flex;
  box-sizing: border-box;
}
.ss_gallery ul li {
  margin-right: 20px;
  min-width: 380px;
}
.lightbox {
	transform: translateY(12vh);
}
.lightbox .lb-container {
	background: #111;
}
@media (max-width: 767px) {
  .ss_gallery ul li {
    margin-right: 10px;
    min-width: 50vw;
  }
}