@charset "utf-8";

:root {
	/* トップ固有表示 */
	--main-visual: #8aa3a7;

	--top-offcanvas: #ffffff;
}

nav {
	height: 65px;
}

.offcanvas {
	background: var(--top-offcanvas);
}

/* Subvisual Area*/

#qnorq {
	background: var(--main-visual);
	margin-bottom: 10%;
}

#qnorq .mainvisual {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	position: relative;
}

#qnorq .mainvisual img {
	display: block;
}

#qnorq .logo {
	left: 5%;
	bottom: 1%;
	position: absolute;
}

#qnorq .logo img {
	max-width: 360px;
	margin-bottom: 20px;
}

#qnorq p.catch {
	color: #ffffff;
}

.subvisual {
	position: relative;
	height: 100%;
	max-width: 1300px;
	margin: 0 auto 50px;
}

.subvisual img {}

.subvisual .dispricrtion {
	position: absolute;
	top: 2%;
	left: 2%;
	color: var(--basic-color);
}

.subvisual .dispricrtion p {
	line-height: 1.7em;
}

/* bootstrap xl*/
@media screen and (min-width: 1200px) {
	#qnorq p.catch {
		font-size: 2.4rem;
	}
}

@media screen and (max-width: 991px) {
	.subvisual .dispricrtion {
		position: relative;
		color: var(--basic-color);
		margin: 20px 0 30px;
	}

	.subvisual .dispricrtion p {
		line-height: 2em;
		margin-bottom: 10px;
	}
}

/* bootstrap xxl*/
@media screen and (min-width: 1400px) {
	#qnorq p.catch {
		font-size: 2.8rem;
	}
}

@media screen and (min-width: 992px) {}


@media screen and (max-width: 600px) {
	#lineup section {
		margin: 30px auto 50px;
	}
}

@media screen and (min-width: 992px) {
	#lineup section {
		margin: 0 auto 50px;
	}
}


@media screen and (max-width: 600px) {
	#lineup h3 {
		margin-top: 10px;
	}
}

@media screen and (min-width: 992px) {
	#lineup h3 {
		margin-top: 75px;
	}
}

#lineup .visual,
#lineup section {
	position: relative;
	z-index: 0;
}

#lineup section::before {
	content: " ";
	position: absolute;
	width: 30%;
	height: 60%;
	top: 0;
	left: 0;
	/*background: #fbaeff;*/
	z-index: -10;
}

#lineup .visual::after {
	content: " ";
	position: absolute;
	width: 20%;
	height: -20%;
	bottom: -10%;
	right: 10%;
	/*background: #fbaeff;*/
	z-index: -10;
}

#lineup h3 {
	height: 40px;
}

#lineup h3 img {
	display: block;
	margin: 10px auto;
	width: 100%;
	max-width: 200px;
	max-height: 40px;
	object-fit: contain;
}




/*#lineup h3.bw-logo {
	margin: 0 20%;
}

#lineup div.prd-img {
	margin: 50px 0 30px;
}*/


#lineup .seriesname {
	text-align: center;
	position: relative;
}

/*
#lineup .seriesname::before,
#lineup .seriesname::after {
	content: "";
	position: absolute;
	display: block;
	background: #000000;
	width: 10px;
	height: 3px;

}*/




a.pro-link {
	display: block;
	color: var(--basic-color);
	text-decoration: none;
}

a.pro-link div {
	text-align: center;
	margin: 20px auto;
	padding: 10px 30px;
	border: 1px dashed var(--basic-color);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	position: relative;
}

a.pro-link div:hover {
	background: var(--basic-color);
	color: #ffffff;
}

.pro-link div::after {
	content: url(/img/c/theme/rando2026/common/arrow.png);
	position: absolute;
	top: 35%;
	right: 5%;
}


/* bootstrap xxl*/
@media screen and (min-width: 1400px) {}

/* bootstrap xl*/
@media screen and (min-width: 1200px) and (max-width: 1399px) {}

/* bootstrap lg*/
@media screen and (min-width: 992px) and (max-width: 1199px) {}

/* bootstrap md*/
@media screen and (min-width: 768px) and (max-width: 991px) {}

/* bootstrap sm*/
@media screen and (min-width: 576px) and (max-width: 767px) {}

/* bootstrap sm以下 */
@media screen and (max-width: 575px) {}