@charset "utf-8";
/*-----------------------------------------------
 * Loading
 * Top
-------------------------------------------------*/
/*-----------------------------------------------
 * Loading
-------------------------------------------------*/
.loading {
	background-color: #000;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10000;
	transition: opacity 1s ease;
}
.loading:before {
	content: "";
	background: url(../img/top/title_logo.png) no-repeat center / contain;
	width: min(calc(454 / var(--vw-min) * 100vw), 454px);
	height:  min(calc(193 / var(--vw-min) * 100vw), 193px);
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform: scale(1.8);
	opacity: 0;
	transition: transform .4s var(--easing-outquart),
				opacity .3s ease;
}
.loading.is-on:before {
	opacity: 1;
	transform: scale(1);
}
.loading.is-on.fade-out {
	opacity: 0;
	pointer-events: none;
}


/*-----------------------------------------------
 * Top
-------------------------------------------------*/
/**
 * topContWrap
 */
.topContWrap {
	min-width: var(--common-min-width);
	position: relative;
	z-index: 1;
}

/* visual */
.topCont__visual {
	background: url(../img/top/visual.jpg) no-repeat 0 0 / 100%;
	width: 100%;
	padding-top: 141.47317%;
	position: relative;
	z-index: 0;
}

/* topCont */
.topCont {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
}
.topCont__inner {
	width: 100%;
	height: 100vh;
	position: sticky;
	top: 0;
}
.topCont__inner:before {
	content: "";
	border: 30px solid #000;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 0;
}
@media screen and (max-width:960px){
	.topCont__inner {
		height: 100%;
		position: absolute;
	}
	.topCont__inner:before {
		border-width: calc(30 / var(--vw-min) * 100vw);
	}
}

/* logo,catch */
.topCont__logo {
	width: 454px;
	height: 193px;
	margin: auto;
	position: absolute;
	right: 0;
	bottom: 70px;
	left: 0;
	z-index: 1;
}
.topCont__logo img {
	width: 100%;
}
.topCont__catch {
	width: 329px;
	height: 55px;
	margin: auto;
	position: absolute;
	right: 0;
	bottom: 10px;
	left: 0;
	z-index: 1;
}
.topCont__catch img {
	width: 100%;
}
@media screen and (max-width:960px){
	.topCont__logo {
		width: calc(621 / var(--vw-min) * 100vw);
		height: calc(262 / var(--vw-min) * 100vw);
		bottom: 10vw;
	}
	.topCont__catch {
		width: calc(427 / var(--vw-min) * 100vw);
		height: calc(69 / var(--vw-min) * 100vw);
		bottom: -1vw;
	}
}

/* catch2 */
.topCont__catch2 {
	width: 7%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}
.topCont__catch2 img {
	width: 100%;
}
@media screen and (max-width:960px){
	.topCont__catch2 {
		width: calc(137 / var(--vw-min) * 100vw);
	}
}

/* copyright */
.topCont__copyright {
	color: rgb(var(--color-yellow));
	display: block;
	font-size: 10px;
	position: absolute;
	bottom: 0.5em;
	right: 30px;
	z-index: 1;
}
@media screen and (max-width:960px){
	.topCont__copyright {
		display: none;
	}
}

/* btn */
.topCont__comment {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}
@media screen and (max-width:960px){
	.topCont__comment{
		display: none;
	}
}

/**
 * topCont__bnrLists
 */
.topCont__bnrLists {
	position: absolute;
	right: 34px;
	bottom: 34px;
	z-index: 1;
}
.topCont__bnrLists > li {
	width: 144px;
}
.topCont__bnrLists > li:not(:first-child) {
	margin-top: 8px;
}
.topCont__bnrLists > li img {
	width: 100%;
}
@media screen and (max-width:960px){
	.topCont__bnrLists {
		display: none;
	}
}

/**
 * sp コンテンツ
 */
.spCommentBtn,
.spCopyright {
	display: none;
}
@media screen and (max-width:960px){
	.spCommentBtn {
		display: block;
		width: calc(698 / var(--vw-min) * 100vw);
		margin: calc(54 / var(--vw-min) * 100vw) 0;
	}
	.spCommentBtn img {
		width: 100%;
	}
}

/**
 * footer
 */
.footer {
	display: none;
}
@media screen and (max-width:960px){
	.footer {
		display: flex;
		flex-direction: column;
		margin-top: auto;
		padding-bottom: calc(50 / var(--vw-min) * 100vw);
	}
	.footer__copyright {
		display: block;
		color: rgb(var(--color-yellow));
		font-size: calc(14 / var(--vw-min) * 100vw);
		margin-bottom: calc(54 / var(--vw-min) * 100vw);
		text-align: center;
		order: 1;
	}

	/* bnrLists */
	.footer__bnrLists {
		padding: 0 calc(30 / var(--vw-min) * 100vw);
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		order: 2;
	}
	.footer__bnrLists > li {
		width: calc((100% - calc(20 / var(--vw-min) * 100vw)) / 3);
		margin-bottom: calc(10 / var(--vw-min) * 100vw);
	}
	.footer__bnrLists > li:not(:nth-child(3n + 1)) {
		margin-left: calc(10 / var(--vw-min) * 100vw);
	}
	.footer__bnrLists > li img {
		width: 100%;
	}
}