@charset "utf-8";
/* CSS Document */
:root{
	--light-color:#C2A661;
	--light-color-rgb:194,166,97;
	--medium-color:#AB8731;
	--deep-color:#866922;
	--font-family:'Open Sans', -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Verdana, Meiryo, sans-serif;
	--sp-container-padding:5vw;
}
body{
	will-change: top;
	position: relative;
}
#lead_section h1,
main h2,
main h3{
	line-height: 1;
}
#lead_section,.main{
	font-family: var(--font-family);
	position: relative;
}
header{
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	margin-bottom: 220vh;
/*	overflow: hidden;*/
}
.bg1,.bg2,.bg3,.bg_movie{
	width: 100vw;
	height: 100vh;
	z-index: 0;
	inset: 0;
	position: fixed;
	will-change: top,opacity,transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	animation: .4s anime1;
}
.bg1,.bg2,.bg3{
	border:50vw solid transparent;
	border-top-width: 50vh;
	border-bottom-width: 50vh;
	opacity: 0;
	transition: 0.3s;
}
.bg_movie{
	position: fixed;
}
.bg_movie::before{
	content: '';
	display: block;
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	mix-blend-mode: multiply;
	-webkit-animation: fadeIn 0s ease-in-out 0.5s 1 both;
	animation: fadeIn 0s ease-in-out 0.5s 1 both;
}
.bg_movie video{
	width: 100%;
    height: 100%;
	object-fit: cover;
	-webkit-animation: fadeIn 0s ease-in-out 0.5s 1 both,video_zoom 2s ease-out 0.5s 1 both;
	animation: fadeIn 0s ease-in-out 0.5s 1 both,video_zoom 2s ease-out 0.5s 1 both;
}

@-webkit-keyframes video_zoom {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.05);
	}
}
@keyframes video_zoom {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.05);
	}
}
header::before{
	content: '';
	display: block;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: var(--deep-color);
	-webkit-animation:op_anime 1s ease-in-out 0.5s 1 both;
	animation:op_anime 1s ease-in-out 0.5s 1 both;
	transition: transform cubic-bezier(.09,1.02,.83,.67);
	pointer-events: none;
	z-index: 100;
}
header::after{
	content: '';
	display: block;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	-webkit-animation:fadeIn 0s ease-in-out 1s 1 reverse both;
	animation:fadeIn 0s ease-in-out 1s 1 reverse both;
	transition: transform cubic-bezier(.09,1.02,.83,.67);
	pointer-events: none;
	z-index: 99;
}
@-webkit-keyframes op_anime {
	0% {
		transform: translateY(100%);
	}
	50% {
		transform: translateY(0);
	}
	51% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-100%);
	}
}
@keyframes op_anime {
	0% {
		transform: translateY(100%);
	}
	50% {
		transform: translateY(0);
	}
	51% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-100%);
	}
}

.bg1{
	background-color: var(--deep-color);
	border:none;
/*	mix-blend-mode: multiply;*/
}
.bg1.brend-normal{
	mix-blend-mode: inherit;
}
.bg2{
	border-bottom-color: var(--medium-color);
/*	border-left-color: var(--medium-color);*/
}
.bg3{
	border-top-color: var(--light-color);
	border-left-color: var(--light-color);
}
#lead_section{
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 110;
}
#lead_section h1{
	color: #fff;
	font-size: 2.4rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 40px;
	padding: 0;
	position: relative;
}
main{
	overflow: hidden;
	color: #fff;
}
main picture,
main img,
main figure{
	display: block;
	position: relative;
	width: 100%;
}

.navbar img{
	width: revert;
}
main h2{
	font-size: 2.8rem;
	text-align: center;
	font-weight: 700;
	padidng-bottom: 60px;
}
#lead_section.fixed{
	position: fixed;
}
#pick-up h2{
	color: var(--medium-color);
	mix-blend-mode: multiply;
	position: relative;
	z-index: 1;
}
#lead_section p{
	line-height: 2;
/*	opacity: 0;*/
}

/*=== PICK UP slider ===*/
.slick-list{
	overflow: visible!important;
	z-index: 1;
}
.slick-slider{
	position: relative;
}
.slick-slider button{
	appearance: none;
	background-color: transparent;
	color: transparent;
	text-indent: -9999px;
	padding: 0;
	border: none;
	outline:none;
}
.slick-arrow{
	overflow: hidden;
	cursor: pointer;
	position: absolute;
	margin: auto;
	z-index: 10;
	mix-blend-mode: multiply;
/*	opacity: 0.5;*/
	transition: 0.3s;
}
.slick-next::before,
.slick-prev::before{
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--medium-color);
	border-top: 0px;
	border-right: 0px;
	mix-blend-mode: multiply;
	margin: 10px;
}
.slick-arrow:hover{
	opacity: 0.5;
}
.slick-prev::before{
	transform: rotate(45deg);
}
.slick-next::before{
	transform: rotate(-135deg);
}
.slick-dots{
	display: flex;
	width: clamp(70px,10vw,500px);
	height: 3px;
	margin: 40px auto 100px;
	justify-content: space-between;
}
.slick-dots li{
	width: 24%;
	height: 100%;
	z-index: 5;
	position: relative;
	mix-blend-mode: multiply;
}
/*
.slick-dots .slick-active{
	opacity: 1;
	mix-blend-mode: multiply;
}
*/
.slick-dots li::before,
.slick-dots li::after{
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background-color: var(--medium-color);
	position: absolute;
	transform-origin: left;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	opacity: 0;
	mix-blend-mode: multiply;
	transition: 0.3s;
}
.slick-dots li::before{
	opacity: 0.5;
}
.slick-dots .slick-active::after{
	opacity: 1;
	-webkit-animation: slider-var 3s linear 0.5s 1 both;
	animation: slider-var 3s linear 0.5s 1 both;
}
.slick-dots li:hover::before{
	opacity: 1;
}
.slick-dots li button{
	width: 100%;
	height: 100%;
	cursor: pointer;
	position: absolute;
    inset: 0;
    z-index: 5;
}
/*
.slick-dots button,
.slick-dots::after{
	font-weight: 700;
	letter-spacing: 0.1em;
	padding-top: 3px;
	mix-blend-mode: multiply;
	position: relative;
	z-index: 1;
	color: var(--medium-color);
}
.slick-dots::after{
	width: 170px;
	text-align: right;
	content: '04';
	position: absolute;
	bottom: 3px;
	margin: auto;
	right: 0;
}
.slick-dots button::before{
	content: '0';
}
*/
/*
.slick-dots .slick-active button{
	text-indent: 0;
	color: var(--medium-color);
}
*/
@-webkit-keyframes slider-var{
    0% {
		transform: scaleX(0%);
    }
    100% {
        transform: scaleX(101%);
    }
}
@keyframes slider-var{
    0% {
		transform: scaleX(0%);
    }
    100% {
        transform: scaleX(101%);
    }
}
#pick-up .video-tag{
	color: #fff;
}
.new_mark{
	fill: var(--medium-color);
    width: 90px;
    height: 90px;
    font-size: 1.57rem;
    font-weight: 700;
    letter-spacing: 0;
	position: absolute;
    z-index: 100;
    top: -45px;
    left: -45px;
	-webkit-animation: mark_rotate 13s linear 0s infinite reverse;
	animation: mark_rotate 13s linear 0s infinite reverse;
	mix-blend-mode: multiply;
	transition: 0.5s;
}
/*=== END PICK UP slider ===*/
/*=== END MORE VIDEOS ===*/
#more_videos{
	color: #fff;
	position: relative;
	margin-top: 70px;
}
#more_videos::before,
#more_videos::after{
	content: '';
	position: absolute;
	z-index: 0;
	background-color: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	display: block;
	inset: 0;
}
#more_videos::before{
	background-color: var(--medium-color);
}
#more_videos h2,
.append_nav,
.video-list_container{
	position: relative;
	z-index: 1;
}
.append_nav{
	z-index: 5;
}
.fixed_nav{
	transition: 0.5s;
}
.fixed_nav .active_category{
	cursor: pointer;
	text-transform: uppercase;
}
.fixed_nav .active_category::before{
	content: '';
}

.page-top,
.active_category{
	position: relative;
}
.fixed_nav nav{
	transition: 0.3s;
	position: relative;
}
.page-top a{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.fixed_nav li{
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	letter-spacing: 0.05em;
	font-weight: 300;
}
.fixed_nav li span{
	display: block;
	margin-top: -3px;
}
.pick-up_mark {
	width: 42px;
	height: 42px;
	position: absolute;
	top: auto;
	transition: 0.5s;
	z-index: 210;
}

.pick-up_mark::before,
.pick-up_mark::after{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.pick-up_mark::before {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 0.8px dashed #fff;
	-webkit-animation: mark_rotate 8s linear 0s infinite both;
	animation: mark_rotate 8s linear 0s infinite both;
	transition: 0.2s;
	background-color: rgba(255,255,255,0.1);
}
.pick-up_mark::after{
	width: 9px;
	height: 7px;
	border: 5px solid transparent;
	border-left: 8px solid #fff;
	margin-right: 11px;
	right: -1px;
}
.pick-up_mark svg{
	font-size: 1.6rem;
    fill: #fff;
	width: 85px;
	height: 85px;
	top: -22px;
	left: -23px;
	transform: rotate(10deg);
	position: absolute;
	font-weight: 700;
}

@-webkit-keyframes mark_rotate{
    0% {
		transform:rotate(0deg);
    }
    100% {
		transform:rotate(360deg);
    }
}
@keyframes mark_rotate{
  	0% {
		transform:rotate(0deg);
    }
    100% {
		transform:rotate(360deg);
    }
}
@-webkit-keyframes nav_opened{
    0% {
		height: 0;
    }
    100% {
		height: 100%;
    }
}
@keyframes nav_opened{
   0% {
		height: 0;
	}
    100% {
		height: 100%;
    }
}
.fixed_nav li a,
.append_nav li a,
.video-thumbnail a{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 200;
}
.video-tag a{
	display: flex;
	padding-left: 30px;
}
.video-thumbnail{
	position: relative;
}
.video-thumbnail figure{
	position: relative;
}

#more_videos .video-thumbnail figure{
	width: 100%;
	height: 0;
	padding-top: 56.1%;
}
#more_videos .video-thumbnail::before{
	content: '';
	display: block;
	width: 100%;
	padding-top: 56.1%;
	background-color: rgba(0,0,0,0.3);
	position: absolute;
	transform: scaleX(100%);
	transform-origin: left;
}
#more_videos .video-thumbnail.animation::before{
	-webkit-animation: thumbnailAnime 0.3s ease-in-out 0.5s 1 both;
	animation: thumbnailAnime 0.3s ease-in-out 0.5s 1 both;
}
#more_videos .video-thumbnail picture{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transform-origin: center;
	opacity: 0;
	overflow: hidden;
}
#more_videos .video-thumbnail.animation picture{
	-webkit-animation: fadeIn 1s ease-in-out 1s 1 both,thumbnailAnime2 0.5s ease-in-out 1s 1 both;
	animation: fadeIn 1s ease-in-out 1s 1 both,thumbnailAnime2 0.5s ease-in-out 1s 1 both;
}
@-webkit-keyframes thumbnailAnime2 {
	0% {
		transform: scale(105%);
	}
	100% {
		transform: scale(100%);
	}
}
@keyframes thumbnailAnime2 {
	0% {
		transform: scale(105%);
	}
	100% {
		transform: scale(100%);
	}
}
@-webkit-keyframes thumbnailAnime {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(100%);
	}
}
@keyframes thumbnailAnime {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(100%);
	}
}

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

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.video-thumbnail figure::before,
.video-thumbnail figure::after,
.video-thumbnail picture::before{
	content: '';
	opacity: 0;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 5;
	transition: 0.3s;
}
.video-thumbnail picture::before{
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.4);
	z-index: 1;
}
#more_videos .video-thumbnail picture::before{
	height: 101%;
}
.video-thumbnail figure::before{
	border: 1px solid #fff;
	width: 78px;
	height: 78px;
	border-radius: 50%;
}
.video-thumbnail figure::after{
	width: 24px;
	height: 26px;
	border: 15px solid transparent;
	border-left: 24px solid #fff;
	right: -20px;
}

.video-thumbnail h4,
.video-caption h4{
	font-weight: bold;
	line-height: 1.45;
	margin: 15px 0 10px;
}
.video-tag{
	color: var(--light-color);
	position: relative;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	font-size: 1.2rem;
	margin-top: 10px;
	height: 20px;
	-webkit-animation: fadeIn 0s ease-in-out 1s 1 both;
	animation: fadeIn 0s ease-in-out 1s 1 both;
}
.video-tag a::before{
	content: '';
	background-image: url("../img/icon_tag.svg");
	background-repeat: no-repeat;
	display: block;
	width: 20px;
	height: 20px;
	opacity: 0.8;
	position: absolute;
    inset: 0 auto 0 0;
}
#pick-up{
	position: relative;
}
#pick-up .video-tag a::before{
	background-image: url("../img/icon_tag_w.svg");
	opacity: 1;
}
/*=== modal ===*/
#modal-wrap{
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(60,60,60,0.98);
	opacity: 0;
	transition: 0.5s;
	z-index: -10;
	overflow-y: scroll;
}
#modal-wrap.active{
	opacity: 1;
	z-index: 1000;
}
#modal-wrap iframe{
	width: 100%;
}

.video-caption{
	display: flex;
	flex-wrap: wrap;
}
.video-caption p{
	width: 100%;
	border-bottom: 1px solid rgba(var(--light-color-rgb), 0.5);
}
#modal-wrap .video-tag{
	margin-right: 25px;
}
#close_btn{
	position: relative;
	font-weight: 300;
	text-align: right;
	margin-bottom: 10px;
}
#close_btn:hover{
	opacity: 0.5;
}
#close_btn::before,
#close_btn::after{
	content: '';
	display: block;
	height: 1px;
	background-color: #fff;
	transform: rotate(45deg);
	position: absolute;
	top: 0;;
	right: 0;
	bottom: 0;
	margin: auto;
}
#close_btn::after{
	transform: rotate(-45deg);
}
/*=== END modal ===*/
#official-channel{
	width: 100vw;
	height: max(60vh,650px);
	background-image: url();
	-webkit-background-size: cover;
	background-size: cover;
	line-height: 2;
	position: relative;
	display: flex;
    align-items: center;
	z-index: 0;
}
#official-channel::before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.5;
	mix-blend-mode: multiply;
	width: 100%;
	height: 100%;
	z-index: 0;
}
#official-channel h2{
	text-align: center;
	padding-bottom: 15px;
	border-bottom: 1px solid rgba(255,255,255,0.8);
	margin-bottom: 30px;
}
#official-channel .text-box{
	position: relative;
	z-index: 1;
}
.follow-us{
	font-weight: 500;
	text-align: center;
	position: relative;
}
.follow-us a{
	display: block;
	position: relative;
	z-index: 200;
}
.follow-us svg{
	opacity: 0.8;
	transition: 0.3s;
}
#official-channel a:hover svg{
	fill: #ff0000;
	opacity: 1;
}
#official-channel .icon-youtube{
	display: block;
	font-size: 63px;
	margin: 0 auto;
}
.footer{
	margin-top: 0px;
}


@media screen and (max-width: 959px) {/*SP*/
	.navbar-container{
		z-index: 1100000;
	}
	#lead_section{
		padding: 30px var(--sp-container-padding) 0;
	}
	#lead_section p{
		font-size: inherit;
	}
	/*=== PICK UP slider ===*/
	#pick-up{
		padding-top: 130px;
		margin-top: -130px;
	}
	.slick-dots li{
		height: 2px;
		width: 22%;
	}
	.slick-arrow{
		width: 40px;
		height: 40px;
		bottom: -20px!important;
	}
	.slick-list{
		padding: 0 max((calc(100vw - 700px) / 2),var(--sp-container-padding))!important;
	}
	.slick-slide{
		width: calc(100vw - var(--sp-container-padding)*2)!important;
		max-width: 700px;
		padding-left: calc(var(--sp-container-padding));
		padding-right: calc(var(--sp-container-padding));
	}
	/*=== END PICK UP slider ===*/
	.video-thumbnail h4{
		font-size: clamp(1.5rem, 3vw, 1.8rem);
	}
	#more_videos .video-tag a,
	#pick-up .video-tag a{
		pointer-events: none;
	}
	/*=== END MORE VIDEOS ===*/
	#append-nav{
		display: none;
	}
	#more_videos{
		padding: 110px var(--sp-container-padding) 100px;
		min-height: 500px;
	}
	
	#more_videos h2{
		margin-bottom: 60px;
	}
	.append_nav{
		display: none;
	}
	.fixed_nav{
		position: fixed;
		width: 100vw;
		top: 70px;
		left: 0;
		height: 60px;
		background-color: var(--medium-color);
		z-index: 1000000;
		display: flex;
    	flex-wrap: wrap;
		opacity: 0;
		pointer-events: none;
	}
	.fixed_nav.fixed{
		opacity: 1;
		pointer-events: inherit;
	}
	.fixed_nav a{
		pointer-events: none;
	}
	.fixed_nav.nav_opened a{
		pointer-events: inherit;
	}
	.page-top a::before,
	.page-top a::after{
		width: 100%;
		height: 100%;
		content: '';
		display: block;
		position: absolute;
		border: 36px solid transparent;
		border-width: 30px 36px;
		inset: 0;
		z-index: 0;
	}
	.page-top a::before{
		border-bottom-color: var(--medium-color);
	}
	.page-top a::after{
		border-right-color: var(--deep-color);
	}
	.page-top{
		width: 72px;
		height: 100%;
		line-height: 1.2;
		font-size: 1rem;
		background-color: var(--light-color);
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.page-top::before{
		content: 'PAGE\ATOP';
		white-space: pre;
		position: relative;
		z-index: 1;
	}
	.fixed_nav .active_category{
		width: calc(100% - 72px);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.7rem;
	}
	.fixed_nav .active_category span{
		margin: 5px 0 0 7px;
	}
	.fixed_nav .active_category::before{
		display: block;
		width: 17px;
		border: 9px solid transparent;
		border-top-color: var(--medium-color);
		position: absolute;
		left: 0;
		right: 0;
		bottom: -18px;
		margin: auto;
	}
	.fixed_nav nav{
		position: relative;
		opacity: 0;
		pointer-events: none;
		height: calc(100vh - 130px);
		background-color: var(--deep-color);
	}
	.fixed_nav.nav_opened nav{
		opacity: 1;
		pointer-events: inherit;
	}
	.fixed_nav ul{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100vw;
		height: 70vh;
		max-height: 800px;
		padding: 5% 0 10%;
	}
	.fixed_nav li{
		height: 70px;
		font-size: 1.8rem;
		align-items: center;
		font-weight: 400;
	}
	.fixed_nav li span,
	.fixed_nav .active_category span{
		font-size: 1rem;
	}
	.pick-up_mark{
		width: 50px;
		height: 50px;
		right: 10vw;
		bottom: 8vw;
		top: auto;
		left: auto;
		margin: auto;
	}
	.pick-up_mark::after{
		border: 5px solid transparent;
		border-left: 8px solid #fff;
		margin-right: 15px;
	}
	/*=== END navigation ===*/
	/*=== video-list ===*/
	
	#more_videos .video-thumbnail{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: clamp(45px, 8vw, 70px);
	}
	#more_videos .video-thumbnail:first-child,
	#more_videos .video-thumbnail:nth-child(7n){
		display: block;
	}
	#more_videos .video-thumbnail::before,
	#more_videos .video-thumbnail figure{
		width: 50%;
		padding-top: 28%;
	}
	#more_videos .video-thumbnail figcaption{
		width: 45%;
	}
	#more_videos .video-thumbnail a{
		width: 50%;
	}
	#more_videos .video-tag a{
		width: inherit;
		padding-left: 25px;
	}
	#more_videos .video-tag a::before{
		inset: 2px auto 0 0;
	}
	#more_videos .video-thumbnail:first-child a,
	#more_videos .video-thumbnail:nth-child(7n) a,
	#more_videos .video-thumbnail:first-child::before,
	#more_videos .video-thumbnail:nth-child(7n)::before,
	#more_videos .video-thumbnail:first-child figure,
	#more_videos .video-thumbnail:nth-child(7n) figure,
	#more_videos .video-thumbnail:first-child figcaption,
	#more_videos .video-thumbnail:nth-child(7n) figcaption{
		width: 100%;
	}
	#more_videos .video-thumbnail:first-child::before,
	#more_videos .video-thumbnail:nth-child(7n)::before,
	#more_videos .video-thumbnail:first-child figure,
	#more_videos .video-thumbnail:nth-child(7n) figure{
		padding-top: 56.1%;
	}
	#more_videos .video-thumbnail:first-child figcaption,
	#more_videos .video-thumbnail:nth-child(7n) figcaption{
/*		padding-top: 10px;*/
	}
	#more_videos .video-tag a::before{
		width: 18px;
		height: 15px;
	}
	/*=== END video-list ===*/
	
	/*=== modal ===*/
	#modal-wrap{
		padding: 110px var(--sp-container-padding);
	}
	#modal-wrap.active{
		z-index: 1000010;
	}
	#modal-wrap iframe{
		height: 50.5vw;
	}
	.video-caption h4{
		font-size: 1.7rem;
	}
	.video-caption p{
		padding-bottom: 25px;
		margin-bottom: 15px;
	}
	.tag-wrap::before,
	.tag-wrap::after{
		border-color: #fff;
		padding: 13px 0;
	}
	#close_btn{
		font-size: 1.8rem;
		padding-right: 30px;
	}
	#close_btn::before,
	#close_btn::after{
		width: 21px;
	}
	/*=== END modal ===*/
		
	/*=== official-channel ===*/
	#official-channel{
		padding: 110px var(--sp-container-padding);
	}
	#official-channel h2{
		font-size: 2.6rem;
		margin-bottom: 10px;
	}
	.follow-us{
		margin-top: 77px;
	}
	
	/*=== END official-channel ===*/
}

@media screen and (min-width: 960px) {/*PC*/
	#lead_section h1{
		margin-bottom: 60px;
		font-size: 5.2rem;
	}
	#lead_section p{
		text-align: center;
		font-size: 1.8rem;
	}
	.navbar-top .header__links {
		color: #000;
	}
	.navbar-container{
		height: auto;
	}
	.navbar{
		position: fixed;
		top: -70px;
		left: 0;
		width: 100%;
		z-index: 550;
		-webkit-transition: all .2s linear;
		transition: all .2s linear;
	}
	main h2{
		font-size: 4.2rem;
	}
	#pick-up{
		padding: 100px 0 170px;
	}
	/*=== PICK UP slider ===*/
	.slick-slider{
		width: 100%;
		max-width: 2000px;
		margin: 0 auto;
		overflow: hidden;
	}
	.slick-list{
		width: 100%;
		margin: 0 auto!important;
		padding: 100px 0!important;
		position: relative;
		height: clamp(465px,30vw,575px);
	}
	.slick-track{
		display: flex!important;
		height: 100%;
	}
	.slick-slide{
		transition: 0.5s;
		width: min(33.333333vw,666.66666666px)!important;
	}
	.slick-slider .video-thumbnail:not(.slick-center) {
		padding: min(4vw,60px) 100px 0;
	}
	.slick-slider .video-thumbnail figure{
		transition: 0.3s;
	}
	.slick-arrow{
		width: 50px;
		height: 50px;
		overflow: hidden;
		top: calc(100px + 24%);
		padding-bottom: clamp(50px,11vw,55px);
		margin: auto;
		box-sizing: content-box;
		z-index: 10;
	}
	.slick-next{
		right: calc(33% - 52px);
	}
	.slick-prev{
		left: calc(33% - 52px);
	}
	.slick-next::before,
	.slick-prev::before{
		content: '';
		width: 30px;
		height: 30px;
		margin: 10px;
	}
	.slick-dots{
		margin: min(4vw, 100px) auto 0;
	}
	.slick-dots .slick-active::before{
		height: 3px;
	}
	/*=== END PICK UP slider ===*/
	/*=== END MORE VIDEOS ===*/
	#more_videos{
		min-height: 920px;
	}
	#more_videos h2{
		padding: 170px 0 100px;
	}
	.append_nav{
		position: relative;
		display: block;
	}
	
	.append_nav ul{
		font-size: 2rem;
		color: #fff;
		width: 100%;
		max-width: 1200px;
		display: flex;
		margin:  0 auto;
		justify-content: space-between;
		border-bottom: 1px solid var(--light-color);
	}
	.append_nav::before,
	.append_nav::after{
		content: '';
		display: block;
		background-color: rgba(0,0,0,0.5);
		width: calc((100% - 1200px) / 2);
		height: 85px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.append_nav::after{
		left: auto;
		right: 0;
	}
	.append_nav li{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 85px;
/*		padding: 0 calc((100% - 410.2px)/10);*/
		padding: 0 calc((100% - 447px)/10);
		background-color: rgba(0,0,0,0.5);
		position: relative;
		letter-spacing: 0.05em;
	}
	.append_nav li:hover,
	.append_nav li.active{
		color: #3c3c3c;
		background-color: rgba(0,0,0,0);
	}
	.append_nav li.active::before{
		content: '';
		display: block;
		width: 37px;
		border: 19px solid transparent;
		border-top: 19px solid var(--light-color);
		position: absolute;
		left: 0;
		right: 0;
		bottom: -38px;
		margin: auto;
	}
	.append_nav li span,
	.fixed_nav li span{
		font-size: 1.2rem;
	}
	.page-top{
		display: none;
	}
	.page-top::before{
/*		content: 'MOVIE COLLECTION';*/
	}
	.fixed_nav{
		top: 0;
		left: clamp(40px,3.6vw,100px);
		z-index: 100;
		position: absolute;
	}
	.fixed_nav.fixed{
		position: fixed;
		top: 50px;
	}
	.fixed_nav.fadeOut{
		opacity: 0;
		pointer-events: none;
	}
	.fixed_nav.fixed.gloval-nav_show{
		top: 120px;
	}
	.fixed_nav .page-top{
		margin-bottom: 15px;
	}
	.fixed_nav .active_category{
		display: none;
	}
	.fixed_nav ul{
		display: block!important;
		padding: 0!important;
	}
	.fixed_nav li{
		font-size: clamp(1.6rem,2.2vh,2.3rem);
		opacity: 0.7;
		margin-bottom: clamp(18px,2.5vh,30px);
	}
	.fixed_nav li::before{
		content: '';
		display: inline-block;
		width: 8px;
		height: 14px;
		border-right: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		inset: 10px auto auto -25px;
		opacity: 0;
		position: absolute;
	}
	.fixed_nav li:hover,
	.fixed_nav li.active,
	.fixed_nav li.active::before{
		opacity: 1;
	}
	.fixed_nav li.active{
		font-weight: 700;
	}
	.pick-up_mark{
		bottom: -90px!important;
		left: 0;
	}
	.pick-up_mark svg{
		width: 90px;
		height: 90px;
		left: auto;
		top: -26px;
		right: -25px;
		transform: rotate(95deg);
		font-size: 1.5rem;
	}
	.pick-up_mark .mask{
		width: calc(50% + 1px);
		height: calc(100% + 2px);
		display: block;
		position: absolute;
		overflow: hidden;
		top: -1px;
		left: -1px;
	}
	.pick-up_mark .mask1{
		left: 50%;
	}
	.pick-up_mark .mask::before{
		content: "";
		display: block;
		position: absolute;
		background-color: rgb(96, 82, 48);
		width: 100%;
		height: 200%;
		transform-origin: 0 25%;
		opacity: 0;
	}
	.pick-up_mark .mask2::before{
		left: -10%;
		width: 110%;
		height: 120%;
		transform-origin: 100% 40%;
	}
	.pick-up_mark:hover svg{
		-webkit-animation: text_rotate 0.4s linear 0s 1 both;
		animation: text_rotate 0.4s linear 0s 1 both;
	}
	.pick-up_mark:hover::before {
		border-style: solid;
		background-color: rgba(255,255,255,0.15);
	}
	@-webkit-keyframes mask{
		0% {
			transform:rotate(0deg);
		}
		99% {
			transform:rotate(181deg);
			opacity: 1;
		}
		100% {
			transform:rotate(181deg);
			opacity: 0;
		}
	}
	@keyframes mask{
		 0% {
			transform:rotate(0deg);
		}
		99% {
			transform:rotate(181deg);
			opacity: 1;
		}
		100% {
			transform:rotate(181deg);
			opacity: 0;
		}
	}
	@-webkit-keyframes text_rotate{
		0% {
			transform:rotate(95deg);
		}
		100% {
			transform:rotate(455deg);
		}
	}
	@keyframes text_rotate{
		0% {
			transform:rotate(95deg);
		}
		100% {
			transform:rotate(455deg);
		}
	}
	.video-list_container{
		padding: 0 0 250px;
		margin-top: -1px;
	}
	.video-list_container ul{
		display: grid;
		width: 100%;
		max-width: calc(1200px + 12vw);
		justify-content: space-between;
		gap: 70px 6%;
		grid-template-columns:repeat(3,1fr);
		margin: 0 auto;
		padding: 0 6vw;
		transition: 0.5s;
	}
	.video-thumbnail h4{
		font-size: clamp(1.5rem, 1.4vw, 1.7rem);
	}
	
	.video-thumbnail:hover figure::before,
	.video-thumbnail:hover figure::after,
	.video-thumbnail:hover figure picture::before{
		opacity: 1;
	}
	/*=== END more-videos ===*/
	
	/*=== modal ===*/
	#modal-wrap{
		padding: 60px 6vw 80px;
	}
	.modal-content{
		position: relative;
		max-width: 1000px;
		margin: 0 auto;
		color: #fff;
		display: flex;
		align-items: center;
		min-height: 100%;
	}
	.modal-content iframe{
		width: 100%;
		height: 49.5vw;
		max-height: 563px;
	}
	.modal-content .view-video{
		width: 100%;
	}
	.video-caption h4{
		font-size: 2.3rem;
	}
	.video-caption p{
		padding-bottom: 25px;
		margin-bottom: 17px;
	}
	#modal-wrap .video-tag{
		font-size: 1.4rem;
	}
	#close_btn{
		font-size: 3.5rem;
		padding: 0 55px 2px 0;
		cursor: pointer;
	}
	#close_btn::before,
	#close_btn::after{
		width: 41px;
	}
	/*=== END modal ===*/
	
	/*=== official-channel ===*/
	#official-channel{
/*		padding: 200px 0;*/
	}
	#official-channel h2{
		font-size: 3.2rem;
	}
	#official-channel .text-box{
		width: min(100%, 520px);
		margin: 0 auto;
/*		padding-top: 30px;*/
	}
	.follow-us{
		margin-top: 58px;
	}
	/*=== END official-channel ===*/
	
	@media screen and (max-width: 2000px){
		.video-list_container ul{
			max-width: calc(1400px + 5vw);
			padding: 0 5vw 0 250px;
		}
	}
	@media screen and (max-width: 1500px){
		.video-list_container ul{
			padding-left: 300px;
		}
	}
}

@media screen and (max-width: 1399px) {
	@media screen and (min-width: 960px) {
		.slick-dots{
			margin: min(16vw, 60px) auto 0;
		}
		.slick-list{
			padding: 0!important;
			margin: 0 -30vw!important;
			width: 160vw;
		}
	}
	.slick-track{
		padding: 60px 0 0;
		box-sizing: content-box;
	}
	.slick-slide{
		width: calc(100vw - var(--sp-container-padding)*2)!important;
	}
	.slick-arrow{
		top: auto;
		bottom: 0;
	}
	.slick-next{
		right: var(--sp-container-padding);
	}
	.slick-prev{
		left: var(--sp-container-padding);
	}
}