@charset "utf-8";
/**
 * loading
 */
.loading {
	background-color: #fff;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 20000;
}

.loading__inner {
	background: url(../img/common/logo/logo_4th.png) no-repeat center / contain;
	width: 300px;
	height: 110px;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* load animation */
.loading {
	transition: opacity .6s ease-in-out;
}
.loading.is-ani {
	transition-delay: .4s;
	opacity: 0;
}
.loading__inner {
	transition: transform .6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.loading.is-ani .loading__inner {
	transform: scale(1.5);
}


/**
 * topMain
 */
.topMain {
	margin-left: var(--common-header-width);
	position: relative;
	z-index: 1;
}
@media screen and (max-width:768px){
	.topMain {
		margin-left: 0;
	}
}

/* visualArea */
.visualArea {
	position: relative;
	z-index: 1;
}

/**
 * visualWrap
 */
 .visualWrap {
	width: 100%;
	overflow: hidden;
	padding-top: 140%;
	position: relative;
	z-index: 1;
}
@media screen and (max-width:768px){
	.visualWrap {
		padding-top: 141.8%;
	}
}
.visualWrap img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/**
 * topContarea
 */
.topContarea {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.topContarea__sticky {
	width: 100%;
	height: 100vh;
	position: sticky;
	top: 0;
}
@media screen and (max-width:768px){
	.topContarea {
		height: auto;
		position: relative;
		top: auto;
		left: auto;
	}
	.topContarea__sticky {
		height: auto;
		position: relative;
		top: auto;
	}
}

/* bottom */
.topContarea__sticky__bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	position: absolute;
	right: 20px;
	bottom: 20px;
}
@media screen and (max-width:768px){
	.topContarea__sticky__bottom {
		display: block;
		position: relative;
		right: auto;
		bottom: auto;
	}
}

/* onair, copyright */
.topOnair {
	color: rgb(var(--color-orange));
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	margin-right: -0.35em;
}
.topOnair__min {
	font-size: 80%;
}
.topCoypright {
	color: #fff;
	display: block;
	font-size: 10px;
	letter-spacing: 0.01em;
	margin-top: 1em;
}
@media screen and (max-width:768px){
	.topOnair {
		font-size: 54px;
		margin-right: 0;
		text-align: center;
	}
	.topCoypright {
		display: none;
	}
}

/**
 * topCommentLists
 */
.topCommentLists {
	width: 26%;
	max-width: 300px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 3;
}
/*.topCommentLists > li {
	width: 300px;
}*/
.topCommentLists > li img {
	width: 100%;
}
@media screen and (max-width:768px){
	.topCommentLists {
		display: block;
		position: relative;
		width: 80%;
		max-width: 100%;
		margin: 60px auto 0;
	}
	.topCommentLists > li {
		width: 100%;
	}
}