@charset "utf-8";

/* -------------------------------------------------- */
/* loader */
/* -------------------------------------------------- */
#wrapper{transition: .3s}
#loader-bg {display: block; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background-color: #fff; z-index: 10000;}
#loader {display: none; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); text-align: center; z-index: 100;}
#loader .loader_logo {animation: rotate-anime 1.5s linear infinite;}
@keyframes rotate-anime {
  0%  {transform: rotateY(0);}
  60%  {transform: rotateY(0);}
  100%  {transform: rotateY(360deg);}
}

/* -------------------------------------------------- */
/* common */
/* -------------------------------------------------- */
header #gnav .gnav_inner>ul .home a{color:#f52920}
.sec + .sec{margin-top:6rem}
.sec .inner {overflow: hidden}
header .logo .img_logo{display: none}
header .logo .img_logo_w{display: inline-block}
.common-btn{max-width:220px;}
@media screen and (min-width:1px) and (max-width:1059px){
	.common-ttl {text-align: center;}
}

/* -------------------------------------------------- */
/* mv */
/* -------------------------------------------------- */
#mv .mv_slider li a {display: block;}
#mv .mv_slider li div {width: 100%; height: 0; background-size: cover; background-position: center center;}
#mv .mv_pc {padding: 44.6111% 0 0;/* padding: 48.6111% 0 0;*/}
#mv .mv_sp {display: none;}

@media screen and (min-width:1px) and (max-width:800px){
	#mv .mv_pc {display: none}
	#mv .mv_sp {display: block;padding: 112% 0 0;}
}

/* -------------------------------------------------- */
/* about */
/* -------------------------------------------------- */
#about{margin-top:10rem;background:linear-gradient(90deg, #fdf8d5, #ddf7ef);}
#about:after{content:"";position:absolute;bottom:-99px;left:0;width:100%;height:100px;clip-path:polygon(0 0,100% 0%,100% 100%);background:linear-gradient(90deg, #fdf8d5, #ddf7ef);}
#about .inner{padding:12rem 0 0}

#about .img .logo{position:absolute;z-index:1;animation: 3s linear infinite flow;}
#about .img figure{height:0;padding-bottom:43.982%;background:linear-gradient(90deg, #fcb69f, #ffecd2);transform:skewX(-30deg);box-shadow: 20px 20px 30px 0px rgba(0,0,0,0.05);}

#about .txt{padding:5rem 0;width:64%;z-index:1;position:relative}
#about .txt p{font-size:2rem;letter-spacing:.05em;line-height:3}
#about .txt p span{display: inline-block;}
#about .txt .common-btn{margin:5rem 0 0}

@keyframes flow{
	0%{-webkit-transform:translateY(0);transform:translateY(0)}
	50%{-webkit-transform:translateY(20px);transform:translateY(20px);}
	100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes zoom{
	0%{transform:skewX(30deg) translate(-15%,-55%) scale(0.7);}
	100%{transform:skewX(30deg) translate(-15%,-55%) scale(1);}
}

@media screen and (min-width:1060px){
	#about .img .logo{top:-30px;left:35rem;}
	#about .img figure{position:absolute;top:0;right:-50px;width:52.223%;}
	#about .img figure img{position:absolute;top:50%;left:50%;transform:skewX(30deg) translate(-15%,-55%) scale(0.7);}
	#about .animated .img figure img{animation: .3s linear zoom;transform:skewX(30deg) translate(-15%,-55%) scale(1);}
}
@media screen and (min-width:1px) and (max-width:1059px){
	#about{margin-top:3rem;padding: 0;}
	#about .inner{padding:6rem 0 0}
	#about .img{position:relative}
	#about .img .logo{top:-50px;left:-10px}
	#about .img .logo img{display:block;height:60px;width:auto}
	#about .img figure{margin-top:60px;width:100%}
	#about .img figure img {position: relative;width: 35%;transform: skewX(30deg) translate(50%,0) scale(0.7);margin-left: 15%;}
	#about .txt{padding:3rem 20px 4rem;width:100%;z-index:1;position:relative}
	#about .txt p{font-size:1.8rem;line-height:2}
	#about .txt .common-btn{margin:2rem auto 0}
	#about:after{bottom:-49px;height:50px}
}
@media screen and (min-width:1px) and (max-width:600px){
	#about .img .logo img {height: 50px;}
}

/* -------------------------------------------------- */
/* news */
/* -------------------------------------------------- */
#news{margin:12rem auto 0;background:linear-gradient(90deg, #e3ffdd, #feb2bd);padding:4rem 0 10rem}
#news:before{content:"";position:absolute;top:-99px;left:0;width:100%;height:100px;clip-path:polygon(0 0,0% 100%,100% 100%);background:linear-gradient(90deg, #e3ffdd, #feb2bd);}
#news:after{content:"";position:absolute;bottom:-99px;left:0;width:100%;height:100px;clip-path:polygon(0 0,0% 100%,100% 0%);background:linear-gradient(90deg, #e3ffdd, #feb2bd);}
#news .news_list li{border-bottom:solid 1px #000}
#news .news_list a{display:flex;align-items:center;padding:3rem 0}
#news .news_list a>*+*{margin-left:5rem}
#news .news_list a p+p{margin-top:0}
#news .news_list .category span{display:block;font-size: 1.4rem;width:140px;color:#fff;background:#000;text-align:center;line-height:1.2;font-weight:700;padding:4px 10px;transition: .3s}
#news .news_list a:hover .category span {background: #555;}
#news .news_list a .date {min-width: 5em;}
#news .news_list .no_category {width: 140px;}
#news .news_list .desc{line-height:1.6;margin-left: 4rem;word-break: break-all;}

@media screen and (min-width:1060px){
	#news .common-btn{position:absolute;top:10px;right:40px}
}
@media screen and (min-width:1px) and (max-width:1059px){
	#news{margin:6rem auto 0;padding:4rem 20px 5rem}
	#news:before{top:-49px;height:50px}
	#news:after{bottom:-49px;height:50px}
	#news .news_list a{flex-wrap:wrap;padding:1.5rem 0}
	#news .news_list .category span{line-height:1.2;font-size:1.3rem;padding:4px 20px}
	#news .news_list .no_category {width: auto;}
	#news .news_list .no_category + .date {margin-left: 0;}
	#news .news_list a .date{margin-left:1.5rem}
	#news .news_list .desc{width:100%;margin:5px 0 0}
	#news .common-btn{margin-top:3rem}
}

/* -------------------------------------------------- */
/* artist */
/* -------------------------------------------------- */
/* バナーなし */#artist{margin-bottom: 4rem;}

#artist{background:linear-gradient(90deg, #fad0c4, #ffd1ff);margin-top:12rem;padding:5rem 0 1rem}
#artist:before{content:"";position:absolute;top:-99px;left:0;width:100%;height:100px;clip-path:polygon(100% 100%,100% 0%,0% 100%);background:linear-gradient(90deg, #fad0c4, #ffd1ff);}
#artist:after{content:"";position:absolute;bottom:-99px;left:0;width:100%;height:100px;clip-path:polygon(0 0,100% 0%,100% 100%);background:linear-gradient(90deg, #fad0c4, #ffd1ff);}
#artist .artist_slider{margin-top:5rem}
#artist .slick-list{padding:0 15% 0 0!important;width:100%;margin-left:-500px;transform:translateX(50%);position:relative}
#artist .artist_slider li{text-align:center;position:relative;padding-right:80px;padding-top:10px;padding-bottom:20px;overflow:visible;transition: .4s}
#artist .artist_slider li a{position:relative;display:block;}

#artist .artist_slider li .img{position:relative;width:100%;height:0;padding-bottom:66%;box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.2);transition: .3s}
#artist .artist_slider li .img .figure{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}
#artist .artist_slider li a:hover .img{box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.1);opacity: .7}
#artist .artist_slider li img{margin:0 auto}
#artist .artist_slider li .name{position:absolute;z-index:1;bottom:-20px;left:6px;background:#000;color:#fff;line-height:1.5;transform:skewX(-15deg);padding:1rem 2rem;text-align:left}
#artist .artist_slider li .name span{transform:skewX(15deg);display:inline-block;font-weight:700}
#artist .slick-dots{margin-top:40px}
#artist .slick-dots li{padding:0}

@media screen and (min-width:1060px){
	#artist .common-btn{position:absolute;top:60px;right:120px}
}
@media screen and (min-width:1px) and (max-width:1059px){
	#artist{padding:5rem 0 4rem;margin-top:6rem}
	#artist .artist_slider{margin-top:2rem;padding:0 10px}
	#artist .slick-list{padding:0!important;width:100%;margin-left:0;transform:translateX(0);position:relative}
	#artist .artist_slider li{padding:0 10px 20px}
	#artist:before{top:-49px;height:50px}
	#artist:after{bottom:-49px;height:50px}
	#artist .slick-dots{margin-top:10px}
}

/* -------------------------------------------------- */
/* banner */
/* -------------------------------------------------- */
#banner{padding:14rem 0 0}
#banner .banner_list{display:flex;flex-wrap:wrap}
#banner .banner_list li img{width: 100%;height: auto}

@media screen and (min-width:1060px){
#banner .banner_list li{margin-left:3.73333%;width:22.2%}
#banner .banner_list li:nth-of-type(4n+1){margin-left:0}
#banner .banner_list li:nth-of-type(n+5){margin-top:4rem}
}
@media screen and (min-width:1px) and (max-width:1079px){
	#banner {padding: 4rem 2rem 0;}
	#banner .banner_list{max-width: 500px;margin: auto;}
	#banner .banner_list li{margin-left:2%;width:49%}
	#banner .banner_list li:nth-of-type(2n-1){margin-left:0}
	#banner .banner_list li:nth-of-type(n+3){margin-top:1rem}
}