@charset "utf-8";

:root {
	/* base */
	--content-gutter-outside: 25px;
	--content-width: 1050px;

	/* bg */
	--content-bgcolor: #000;
	--content-bgcolor-02: #A9A07F;
	/*rgba(169,160,127,.58)*/

	/* font */
	--content-font: dnp-shuei-mincho-pr6n, sans-serif;
	/* DNP 秀英明朝 Pr6N
	DNPShueiMinPr6N L 400
	DNPShueiMinPr6N B 600
	*/
	--content-fontsize: clamp(12px,2.67vw,16px);
	--content-fontcolor: #fff;
	--content-fontcolor-02: #2B281D;
	--content-fontcolor-03: #D2CAAE;
	--content-fontls: .15em;

}


/* LP共通汎用
____________________*/
#container {
	width:100%;
}
.column2R #main {
	float: none;
	width: auto;
}
.breadCrumb {
	margin: 0 auto !important;
}
.pagetop {
	margin: 0 auto;
	width: 1050px;
}
#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: crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	backface-visibility: hidden;
}
.sp {
	display: none;
}
#s_container {
	font-family: var(--content-font);
	width: 100%;
	margin: 10px auto;
}
#contentWrap {
	width: 100%;
	color: var(--content-fontcolor);
	font-size: var(--content-fontsize);
}
#contentWrap img {
	max-width: 100%;
}
.clearfix:after, #nav1:after, #nav2:after, #nav3:after, #container:after, #contents:after, #footerNav:after {
	content: none !important;
}


/* コンテンツ汎用
____________________*/
#contentWrap {
	background: var(--content-bgcolor);
}
.content {
	padding-left: var(--content-gutter-outside);
	padding-right: var(--content-gutter-outside);
}
.content>* {
	box-sizing: border-box;
}

.fade,
.fadeUp {
	opacity: 0;
	transition: all 1s;
}
.fadeup {
	transform: translatey(50px);
}
.fade.fadeShow,
.fadeup.fadeShow {
	opacity: 1;
	transform: translate(0, 0);
}


/* .mv
____________________*/
.content.mv {
	position: relative;
	width: 100%;
	margin-bottom: 0;
	padding: 0;
	text-align: center;
}
.content.mv img {
	width: 100%;
}
.content.mv::after {
	content: "";
	position: relative;
	display: block;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg,transparent,rgba(169,160,127,.58) 33%,rgba(169,160,127,.58) 58%,transparent);
	opacity: .58;
}

/* .read
____________________*/

.read .txt_read {
    font-size: clamp(14px,3.73vw,20px);
    font-weight: 400;
    letter-spacing: var(--content-fontls);
    text-shadow: 0px 3px 6px #000;
	text-align: center;
}
.read .contentInner::after {
    content: "";
    display: block;
    width: 1050px;
    height: 3px;
    background: transparent linear-gradient(90deg, transparent, rgba(169, 160, 127, .58) 33%, rgba(169, 160, 127, .58) 58%, transparent 100%) 0% 0% no-repeat;
    margin: auto;
}
.readInner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(28px, 7.47vw, 60px);
    --aboutInnerMT: clamp(50px,13.33vw,70px);
    margin: var(--aboutInnerMT) auto;
}
.readInner::after {
    content: "";
    position: absolute;
    display: block;
    --aboutInnerIconSize: clamp(11px,2.93vw,13px);
    width: var(--aboutInnerIconSize);
    height: var(--aboutInnerIconSize);
    background: #625d4a;
    transform: rotate(45deg);
}
.readInner::after {
    bottom: calc(var(--aboutInnerMT)* -1 - var(--aboutInnerIconSize) / 2 - 1.5px);
}
/* .lineup
____________________*/
.lineup {
	background: url(/gamepc/img/elden_ring/lineup_bg.jpg) no-repeat center center;
	background-size: cover;
	padding-top: clamp(40px,10.67vw,100px);
	padding-bottom: clamp(100px,26.66vw,290px);
}
.lineup .contentInner {
	text-align: center;
}
.lineup .contentInner h2 {
	position: relative;
	top: 2px;
	color: var(--content-fontcolor-02);
	font-size: clamp(38px,10.13vw,80px);
	font-weight: 400;
	letter-spacing: .075em;
	line-height: 1;
	text-shadow: 0px 0px 6px #000;
	z-index: 100;
}
.lineup .contentInner h3 {
	width: min(calc(100vw - var(--content-gutter-outside) * 2),650px);
	background: transparent linear-gradient(90deg, transparent, rgba(169,160,127,.58) 49%, transparent 100%) 0% 0% no-repeat;
	margin: auto;
	padding: clamp(10px,2.93vw,17px);
	color: var(--content-fontcolor-03);
	font-size: clamp(18px,4.8vw,40px);
	font-weight: 400;
	letter-spacing: var(--content-fontls);
	text-shadow: 0px 3px 6px #000;
	box-sizing: border-box;
}
.lineupItem {
	margin-top: clamp(35px,9.33vw,70px);
}
.lineupItem h4 {
	color: var(--content-fontcolor-03);
	font-size: clamp(14px,3.73vw,20px);
	font-weight: 400;
	letter-spacing: var(--content-fontls);
	text-shadow: 0px 3px 6px #000;
}
.lineupItemInner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 35px;
	width: 880px;
	margin: clamp(13px,3.47vw,15px) auto 0;
	padding: 15px 30px;
	background: #000;
	border: 1px solid var(--content-bgcolor-02);
	box-sizing: border-box;
}
.lineupItemInner figure {
	flex-shrink: 0;
}
.lineupItemDetail {
	flex-grow: 1;
	text-align: left;
}
.lineupItemDetail h5 {
	width: 70%;
	font-size: clamp(16px,4.27vw,20px);
	font-weight: 400;
	letter-spacing: var(--content-fontls);
	line-height: 1.5;
}
.lineupItemSpec {
	margin-top: clamp(13px,3.47vw,20px);
}
.lineupItemSpec span {
	display: block;
	letter-spacing: var(--content-fontls);
}
.lineupItemDetailInner {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: clamp(13px,3.47vw,20px);
}
.lineupItemPrice span:first-child {
	font-size: clamp(16px,4.27vw,24px);
	letter-spacing: var(--content-fontls);
}
.lineupItemPrice span.tax {
	letter-spacing: var(--content-fontls);
}
.lineupItemLink a {
	display: block;
	width: clamp(210px,56vw,250px);
	border: 1px solid var(--content-bgcolor-02);
	padding: clamp(10px,2.67vw,13px);
	background: #0A1616;
	color: var(--content-fontcolor-03) !important;
	text-decoration: none !important;
	text-align: center;
	line-height: 1.5;
	letter-spacing: var(--content-fontls);
	transition: all .5s;
}
.lineupItemLink a:hover {
	text-shadow: 0px 3px 7px var(--content-fontcolor-03);
	animation-name: hover-flash;
	animation-duration: 1s;
	opacity: .85;
}
@keyframes hover-flash {
	0% {
		opacity: .3;
	}
	100% {
		opacity: .85;
	}
}
.lineupItemFps {
	display: none;
	position: absolute;
	width: clamp(130px,34.67vw,180px);
	top: -1px;
	right: -1px;
	padding: clamp(8px,2.13vw,12px);
	background: #888064;
	color: #000;
	line-height: 1.7;
	letter-spacing: var(--content-fontls);
	box-sizing: border-box;
}
.lineupLaptop {
	margin-top: clamp(50px,13.33vw,70px);
}
.lineupNote {
	margin:2em auto 0 ;
	font-size: var(--content-fontsize);
}
/* .trailer
____________________*/
.trailer .contentInner {
    position: relative;
}
.trailer .contentInner::before {
    content: "";
    display: block;
    width: 1050px;
    height: 3px;
    background: transparent linear-gradient(90deg, transparent, rgba(169, 160, 127, .58) 33%, rgba(169, 160, 127, .58) 58%, transparent 100%) 0% 0% no-repeat;
    margin: auto;
}
.trailer .trailerInner {
	max-width: 1050px;
    width: 100%;
	margin: clamp(50px,13.33vw,70px) auto;
	position: relative;
	--aboutInnerMT: clamp(50px,13.33vw,70px);
}

.trailer .trailerInner::before {
    content: "";
    position: absolute;
	top: calc(var(--aboutInnerMT)* -1 - var(--aboutInnerIconSize) / 2 - 1.5px);
    left: 50%;
    --aboutInnerIconSize: clamp(11px,2.93vw,13px);
    width: var(--aboutInnerIconSize);
    height: var(--aboutInnerIconSize);
    background: #625d4a;
    transform: rotate(45deg);
}
.trailer .trailerBox {
    max-width: 768px;
    width: 100%;
    aspect-ratio: 16 / 9;
	margin: 0 auto;
}
.trailer .trailerBox iframe {
    width: 100%;
    height: 100%;
}
/* .about
____________________*/
.about {
	background: #000;
	/*padding-top: clamp(50px,13.33vw,100px);*/
	padding-bottom: clamp(100px,26.67vw,200px);
}
.about .contentInner {
	position: relative;
}
.about .contentInner::before,
.about .contentInner::after {
	content: "";
	display: block;
	width: 1050px;
	height: 3px;
	background: transparent linear-gradient(90deg, transparent, rgba(169,160,127,.58) 33%, rgba(169,160,127,.58) 58%, transparent 100%) 0% 0% no-repeat;
	margin: auto;
}
.aboutInner {
	position: relative;
	margin: var(--aboutInnerMT) auto;
	--aboutInnerMT: clamp(50px,13.33vw,70px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 80px;
}
.aboutInner::before,
.aboutInner::after {
	content: "";
	position: absolute;
	display: block;
	--aboutInnerIconSize: clamp(11px,2.93vw,13px);
	width: var(--aboutInnerIconSize);
	height: var(--aboutInnerIconSize);
	background: #625d4a;
	transform: rotate(45deg);
}
.aboutInner::before {
	top: calc(var(--aboutInnerMT) * -1 - var(--aboutInnerIconSize) / 2 - 1.5px);
}
.aboutInner::after {
	bottom: calc(var(--aboutInnerMT) * -1 - var(--aboutInnerIconSize) / 2 - 1.5px);
}
.aboutInner figure {
	border: 1px solid var(--content-bgcolor-02);
}
.aboutInner .flexBox {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(28px,7.47vw,60px);
}
.aboutInner .flexBox:nth-of-type(even) figure {
	order: 2;
}
.aboutInner .flexBox:nth-of-type(even) .aboutDetail {
	order: 1;
}
.aboutDetail {
	width: 420px;
}
.aboutDetail h2 {
	width: 92%;
	margin: 0 auto;
	font-size: clamp(18px,4.8vw,40px);
    font-weight: 700;
    letter-spacing: var(--content-fontls);
}
.aboutDetail p {
	width: 92%;
	margin: clamp(25px,6.67vw,40px) auto 0;
	line-height: 2;
	letter-spacing: var(--content-fontls);
}
.aboutLink {
	width: 100%;
	max-width: 357px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}
.aboutLink a {
	display: block;
    width: clamp(210px, 56vw, 250px);
    border: 1px solid var(--content-bgcolor-02);
    margin: 0 auto;
    padding: clamp(10px, 2.67vw, 13px);
    background: #0A1616;
    color: var(--content-fontcolor-03) !important;
    text-decoration: none !important;
    text-align: center;
    line-height: 1.5;
    letter-spacing: var(--content-fontls);
    transition: all .5s;
}
.aboutLink a:hover {
	text-shadow: 0px 3px 7px var(--content-fontcolor-03);
	animation-name: hover-flash;
	animation-duration: 1s;
	opacity: .85;
}


/* .contentfooter
____________________*/
.contentfooter {
	position: relative;
	background: url(/gamepc/img/elden_ring/contentfooter_bg.jpg?$staticlink$) no-repeat center center;
	background-size: cover;
	padding-top: clamp(60px,16vw,150px);
	padding-bottom: clamp(10px,2.67vw,15px);
}
.contentfooter::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 3px;
	top: 0;
	background: linear-gradient(90deg,transparent,rgba(169,160,127,.58) 33%,rgba(169,160,127,.58) 58%,transparent);
	opacity: .58;
}
.galleryInner {
	max-width: var(--content-width);
	margin: auto;
}
.logoInner + .galleryInner {
	margin-top: clamp(100px,16vw,170px);
}
.galleryList {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(12px,3.2vw,17px);
}
.galleryItem {
	margin-top: 10px;
	border: 1px solid var(--content-bgcolor-02);
}
.galleryItem a {
	transition: all .5s;
}
.galleryItem a:hover {
	animation-name: hover-flash;
	animation-duration: 1s;
	opacity: .85;
}
.logoInner {
	margin-top: clamp(60px,16vw,100px);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}
.logoInner a {
	display: inline-block;
	max-width: 75%;
	transition: all .5s;
}
.logoInner a:hover {
	animation-name: hover-flash;
	animation-duration: 1s;
	opacity: .85;
}
.copyInner {
	color: var(--content-bgcolor-02);
	margin-top: clamp(60px,16vw,150px);
	text-align: center;
	font-size: clamp(10px,2.67vw,14px);
	letter-spacing: var(--content-fontls);
}


/* モバイル
____________________*/
@media (max-width: 479px) {
	#s_container {
		margin: auto;
	}
	.leadSection {
		display: none;
	}
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	.content.mv::after {
		height: 2px;
	}
	.read .contentInner::after {
		width: 100%;
        height: 2px;
	}
	.lineupItemInner {
		justify-content: center;
		flex-wrap: wrap;
		width: max(280px,85vw);
		padding: 38px min(9.33vw,38px) min(8vw,30vw);
	}
	.lineupItemInner figure {
		flex-shrink: inherit;
	}
	.lineupItemDetail {
		text-align: center;
	}
	.lineupItemDetail h5 {
		width: 100%;
	}
	.lineupItemDetailInner {
		justify-content: center;
		flex-wrap: wrap;
	}
	.lineupItemLink {
		margin-top: min(6.4vw,38px);
	}
	.trailer .contentInner::before {
		width: 100%;
        height: 2px;
	}
	.about .contentInner::before,
	.about .contentInner::after {
		width: 100%;
		height: 2px;
	}
	.aboutInner {
		flex-wrap: wrap;
	}
	.aboutInner::before {
		top: calc(var(--aboutInnerMT) * -1 - var(--aboutInnerIconSize) / 2 - 1px);
	}
	.aboutInner::after {
		bottom: calc(var(--aboutInnerMT) * -1 - var(--aboutInnerIconSize) / 2 - 1px);
	}
	.aboutInner .flexBox  {
		flex-direction: column;
	}
	.aboutInner {
		gap: 40px;
	}
	.aboutInner figure {
		width: 80vw;
	}
	.aboutInner .flexBox:nth-of-type(even) figure {
		order: 1;
	}
	.aboutDetail {
		width: 80vw;
	}
	.aboutInner .flexBox:nth-of-type(even) .aboutDetail {
		order: 2;
	}
	.contentfooter::before {
		height: 2px;
	}
	.galleryInner {
		width: 100%;
	}
	.galleryItem {
		width: 47%;
		margin-top: 0;
	}
}


/* lightbox */
div.lightboxOverlay {
	z-index: 25000;
}
div.lightbox {
	z-index: 30000;
}
div.lb-outerContainer {
	background-color: transparent;
}
.lightbox .lb-outerContainer .lb-image {
	border-radius: 0;
}


/* .camp add */
.content.camp {
	position: relative;
	background: transparent linear-gradient(180deg, #311003 0%, #000000 100%) 0% 0% no-repeat;
}
.content.camp::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 3px;
	top: 0;
	background: linear-gradient(90deg,transparent,rgba(169,160,127,.58) 33%,rgba(169,160,127,.58) 58%,transparent);
	opacity: .58;
}
.camp .contentInner {
	padding-top: clamp(80px,21.33vw,150px);
	padding-bottom: clamp(80px,21.33vw,150px);
}
.camp__inner {
	text-align: center;
}
.camp__ttl {
	position: relative;
	padding-bottom: clamp(20px,5.33vw,30px);
	font-size: clamp(18px,4.8vw,35px);
	font-weight: 100;
	letter-spacing: .15em;
}
.camp__ttl::after {
	content: "";
	position: absolute;
	display: block;
	width: 1050px;
	height: 3px;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	background: transparent linear-gradient(90deg, transparent, #887863 33%, #887863 58%, transparent 100%) 0% 0% no-repeat;
	margin: auto;
}
.camp__ttl::before {
	content: "";
	position: absolute;
	display: block;
	--campttlIconSize: clamp(11px,2.93vw,13px);
	width: var(--campttlIconSize);
	height: var(--campttlIconSize);
	bottom: calc(var(--campttlIconSize) / 2 * -1 + 1.5px);
	left: 50%;
	background: #887863;
	transform: translateX(-50%) rotate(45deg);
}
.camp__img {
	margin-top: clamp(25px,6.67vw,50px);
	text-align: center;
}
.camp__img img {
	border: 1px solid #A9A07F;
}
.camp__note {
	margin: .5em auto 0;
	color: #c1c1c1;
	font-size: clamp(10px,2.67vw,13px);
	letter-spacing: var(--content-fontls);
}
.camp__imglink a {
	display: block;
	width: clamp(210px,56vw,250px);
	border: 1px solid var(--content-bgcolor-02);
	margin: clamp(25px,6.67vw,35px) auto 0;
	padding: clamp(10px,2.67vw,13px);
	background: #0A1616;
	color: var(--content-fontcolor-03) !important;
	text-decoration: none !important;
	text-align: center;
	line-height: 1.5;
	letter-spacing: var(--content-fontls);
	transition: all .5s;
}
.camp__imglink a:hover {
	text-shadow: 0px 3px 7px var(--content-fontcolor-03);
	animation-name: hover-flash;
	animation-duration: 1s;
	opacity: .85;
}
.camp__lineup {
	width: min(calc(100vw - var(--content-gutter-outside) * 2),650px);
	background: transparent linear-gradient(90deg, transparent, rgba(169,160,127,.58) 49%, transparent 100%) 0% 0% no-repeat;
	margin: clamp(65px,17.33vw,120px) auto 0;
	padding: clamp(10px,2.93vw,17px);
	color: var(--content-fontcolor);
	font-size: clamp(18px,4.8vw,25px);
	font-weight: 400;
	letter-spacing: var(--content-fontls);
	text-align: center;
	text-shadow: 0px 3px 6px #000;
	box-sizing: border-box;
}


@media (max-width: 479px) {
	.content.camp::before {
		height: 2px;
	}
	.camp__ttl::after {
		width: 100%;
		height: 2px;
	}
	.camp__ttl::before {
		bottom: calc(var(--campttlIconSize) / 2 * -1 + 1px);
	}
	.camp__img img {
		margin: auto;
	}
	.camp__note {
		text-align: left;
		max-width: 300px;
		padding-left: 1em;
		text-indent: -1em;
		box-sizing: border-box;
	}
}