.pc-main {
    font-family: "vdl-logona", sans-serif;
}

video{
	width: 100%;
}

.first-view-back {
	position: relative;
	z-index: -2;
}

.first-view--anime {
	position: absolute;
	width: 99%;
	padding-bottom: 100%;
	margin: auto;
	top: 27px;
	left: -4px;
}

.first-view--anime img {
	display: block;
	position: absolute;
	width: inherit;
	height: inherit;
	opacity: 0;
	animation: slideAnime 2s ease infinite;
}

/*=== スライドのアニメーションを段差で開始する ========= */
.first-view--anime img:nth-of-type(1) {
	animation-delay: 0s
}

.first-view--anime img:nth-of-type(2) {
	animation-delay: 1s
}

/*=== スライドのアニメーション ========================= */
@keyframes slideAnime {
	0% {
		opacity: 1
	}

	5% {
		opacity: 1
	}

	50% {
		opacity: 1
	}

	55% {
		opacity: 0
	}

	100% {
		opacity: 0
	}
}

/* 共通 */

.pc-main-inner{
	background-image: url(../images/main-back.png);
	background-repeat: repeat;
	background-size: contain;
}

.logo-switch-img {
    margin: 0 auto 8.61%;
    width: 86%;
}

.human-img {
    width: 64%;
    margin: 0px auto;
}

.yonkoma-img {
    position: relative;
	padding-bottom: 64%;
    margin-bottom: 13.89%;
    width: 85%;
	max-width: 100%;
    margin: 0 auto 6.11%;
}

.midashi-img {
    width: 88%;
    margin: -4% auto 5%;
    padding-right: 11px;
    box-sizing: content-box;
}

.yonkoma-corner {
    margin-bottom: 7.5%;
}

.yonkoma-img img {
    display: block;
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    animation: yonkoma-anime 2s ease infinite;
    width: 100%;
}

.yonkoma-img img:nth-of-type(1) {
	animation-delay: 0s
}

.yonkoma-img img:nth-of-type(2) {
	animation-delay: 1s
}

@keyframes yonkoma-anime {
	0% {
		opacity: 1
	}

	5% {
		opacity: 1
	}

	50% {
		opacity: 1
	}

	55% {
		opacity: 0
	}

	100% {
		opacity: 0
	}
} 

.text-card {
    width: 91%;
    margin: 0 auto;
}

/* ナイスイベント */

.nice-event {
    margin-bottom: 19.17%;
}

/* ナイスクラブ */
.nice-club .logo-switch-img {
    width: 68%;
	margin-bottom: 6.11%;
}

.nice-club .human-img {
    width: 83%;
    box-sizing: content-box;
    padding-left: 27px;
}

.nice-club {
    margin-bottom: 20.56%;
}

.nice-location--img > img {
	display: block;
	position: absolute;
	opacity: 0;
	right: 0;
	animation: nice-location--img 4s linear infinite;
}

.nice-location--img img:nth-of-type(1) {
	animation-delay: 0s;
}

.nice-location--img img:nth-of-type(2) {
	animation-delay: 1s;
}

.nice-location--img img:nth-of-type(3) {
	animation-delay: 2s;
}

.nice-location--img img:nth-of-type(4) {
	animation-delay: 3s;
}

@keyframes nice-location--img {
	0% { opacity: 1 }
	1% { opacity: 1 }
   25% { opacity: 1 }
   26% { opacity: 0 }
  100% { opacity: 0 }
}

.nice-location--logo img {
	display: block;
	position: absolute;
	opacity: 0;
	right: 0;
	animation: nice-location-logo-img 3s linear infinite;
}

.nice-location--logo img:nth-of-type(1) {
	animation-delay: 0s
}

.nice-location--logo img:nth-of-type(2) {
	animation-delay: 1s
}

.nice-location--logo img:nth-of-type(3) {
	animation-delay: 2s
}

@keyframes nice-location-logo-img {
   0% { opacity: 1 }
   3% { opacity: 1 }
  33% { opacity: 1 }
  36% { opacity: 0 }
 100% { opacity: 0 }
}

.nice-location--text {
    padding: 77px 0px 23px 33px;
    margin-top: 0.56%;
    width: 93%;
    margin-left: auto;
    margin-right: 9px;
    margin-top: -7.78%;
}


/* ナイスグローバル */


/* ナイスガイズ */

/* ナイスガイズ 男子 */


/* ナイスガイズ 女子 */


/* ナイスガイズ ポーズ */


/* レッスン */


/* ３年後に向けて */


/*ティーチャー */

.to-be-continued {
	text-align: center;
	font-size: .24rem;
	font-weight: 500;
	margin-bottom: 15.56%;
	opacity: 0;
}

.to-be-continued.typing-animation {
	width: 4.1ch;
	/*文字の長さ*/
	border-right: 1px solid #000;
	/*点滅バー*/
	overflow: hidden;
	/*必須*/
	white-space: nowrap;
	/*必須*/
	line-height: 1.4;
	font-weight: 700;
	animation: typing 3s steps(3), blink .4s step-end infinite alternate;
	/*アニメーション関連*/
	opacity: 1;
	margin: 0 auto 19.44%;
}

@keyframes typing {
	from {
		width: 0;
	}
}

@keyframes blink {
	50% {
		border-color: transparent;
		/*点滅風に見せる*/
	}
}

/* pcの時 */
.pc-view-left,
.pc-view-right {
	display: none;
}

.pc_only{
	display: none;
}

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

	.sp_only{
		display: none;
	}
	
	.pc_only{
		display: block;
	}
	

	.pc-view-left,
	.pc-view-right {
		display: block;
	}

	.page-main {
		display: flex;
		height: 100vh;
	}

	.pc-main {
		overflow-y: scroll;
		overflow-x: hidden;
		width: 0;
		margin: 0 auto;
		z-index: 1;
		position: relative;
		transition: all;
	}

	.pc-main {
		animation-name: anime-width;
		animation-duration: 0.7s;
		animation-timing-function: cubic-bezier(0.28, -0.55, 0.265, 1);
		animation-fill-mode: forwards;
		animation-delay: 1s;
		will-change: filter;
		/* width: 375px !important; */
	}

	@keyframes anime-width {
		0% {}

		100% {
			width: 500px;
		}
	}

	.pc-view-left {
		width: calc((100% - 500px) / 2);
		position: relative;
		flex-grow: 1;
		background-size: cover;
	}

	.pc-view-right {
		width: calc((100% - 500px) / 2);
		position: relative;
		flex-grow: 1;
	}

    .pc-view-left--img {
        position: absolute;
        bottom: 94px;
        left: 0;
        right: 0;
        width: 97%;
        max-width: 700px;
        margin: auto;
        transition-delay: 2s !important;
    }

    .pc-view-right--img {
        position: absolute;
        bottom: 107px;
        width: 77%;
        max-width: 500px;
        left: 0;
        right: 0;
        margin: auto;
        transition-delay: 2s !important;
    }

	.pc-slide--text-box {
		overflow: hidden;
	}

	.pc-view-left .pc-text--white {
		animation-name: slideInRight;
		animation-duration: 0.8s;
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
	}

	@keyframes slideInRight {
		0% { transform: translateX(100%); }
		100% { transform: translateX(0); }
	}

	.pc-view-right .pc-text--white {
		animation-name: slideInleft;
		animation-duration: 0.8s;
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
	}

	@keyframes slideInleft {
		0% { transform: translateX(-100%); }
		100% { transform: translateX(0); }
	}

	.pc-view-right .pc-text--white {
		margin-bottom: 22.22%;
	}
    .pc-right-text {
        width: 72%;
        max-width: 500px;
        display: block;
        margin: 19vh auto 17.5%;
        font-family: "vdl-logona", sans-serif;
        z-index: 1;
        position: relative;
    }

	.pc-logo-img {
        width: 59%;
        max-width: 370px;
        margin: 8vh auto 35.28%;
        display: block;
        transition-delay: 2s !important;
    }

	.main-back-left,
	.main-back-right {
		position: absolute;
		height: 100vh;
		width: 100vw;
		z-index: -1;
		top: 0;
	}

	.main-back-right { right: 0; }

	.scroll-container img { width: 52%; }

	.pc-logo-img,
	.pc-right-text,
	.pc-view-right--img,
	.pc-view-left--img {
		animation-name: anime-opacity;
		animation-duration: 1s;
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
		animation-delay: 0.3s;
		opacity: 0;
	}

	@keyframes anime-opacity {
		0% { opacity: 0; }
		100% { opacity: 1; }
	}

	.first-view--anime { width: 100%; top: 35px; left: -11px; }

	footer { padding-bottom: 20px; }

	.pc-main-inner { background-color: #fff; }


	

	/* Safari */
	_::-webkit-full-page-media, _:future, :root .nice-guys-justice--text.inview{
		transform: translateY(-2px);
	}

	.nice-guys-back01 { top: 448px; }
	.nice-guys-back02 { bottom: 16px; }

	.nice-guys-justice--img {
		width: 98%;
		margin-bottom: 3.61%;
	}

	/* Safari */
	_::-webkit-full-page-media, _:future, :root .nice-guys-justice--img {
		width: 97%;
		margin-bottom: 5.28%;
	}

	.nice-guys-g { margin-bottom: -7.92%; }

	/* Safari */
	_::-webkit-full-page-media, _:future, :root .nice-guys-g {
		margin-bottom: -8.61%;
	}

	.teacher-top--text.white-card p { letter-spacing: 0em; padding-left: 27px; }

	.lesson-back02 { bottom: 70px; }
	.lesson-white-card { padding: 40px 0 13px; }

	.yellow-card p:nth-of-type(1) {
		margin-bottom: 6.39%;
		white-space: nowrap;
	}

	.teacher-bottom--text { padding: 42px 0px 30px 34px; }
	.teacher-bottom--text.black-card p { padding: 0; }

	.to-be-continued.typing-animation {
		margin: 26.11% auto 28.33%;
	}

	.to-be-continued { font-size: .33rem; }



} /* --- /@media (min-width:768px) --- */

@media screen and (max-width:767px) {
	.scroll-container { top: -28px; }
}

@media screen and (min-width:668px) and (max-width:1080px) {
	.pc-view-left .pc-text--white,
	.pc-view-right .pc-text--white,
	.pc-logo-img,
	.pc-right-text,
	.pc-view-right--img,
	.pc-view-left--img { display: none; }

	.pc-view-right,
	.pc-view-left { width: 20%; }

	.pc-main,
	.back-rainbow { width: 100% !important; }

	.pc-main-inner {
		animation-name: anime-main-opacity;
		animation-duration: 5.3s;
		animation-timing-function: cubic-bezier(0.28, -0.55, 0.265, 1.75);
		animation-fill-mode: forwards;
		animation-delay: 2s;
		opacity: 1;
		transform: translateY(0);
	}

	@keyframes anime-main-opacity {
		0% { opacity: 1; transform: translateY(0%); }
		100% { transform: translateY(0%); }
	}
}

@media screen and (max-width:767px) {
	.event-explain { margin-top: -0.28%; }

	.event-slider .slide-one { width: 88vw; }

	.event-explain p {
		font-size: 4.8vw;
		line-height: 1.94;
	}

	.event--heading1 { padding-bottom: 9.2%; }

	.event-explain1 { padding: 23px 0px 18px 30px; }
	.event-explain2 { padding: 27px 0px 14px 31px; }
}

@media screen and (min-width:768px) {
	.event-explain {
		background-color: #138748;
		background-position-y: -19px;
		background-position-x: -30px;
	}

	.nice-global-mottom > img { top: 55px; }

	.nice-guys { margin-top: 16.11%; }

	.nice-event,
	.nice-club,
	footer {
		opacity: 0;
		animation: first-next 0.5s 2s forwards;
	}

	@keyframes first-next {
		0% { opacity: 0; }
		100% { opacity: 1; }
	}
}