/*!
 * Theme Name: 静的サイトパッケージ
 * Theme URI: https://
 * Description: 静的サイト専用のベーステーマ
 * Author: 5ive Inc.
 * Url: https://5ive.jp/
 * Version: 3.3
 *//*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */




/* IE10以降でのみ有効 */
@media all and (-ms-high-contrast: none) {
  html {
    height: 100%;
    overflow: hidden;
  }
  body {
    height: 100%;
    overflow: scroll;
  }
}
  body.top_bg {
	background:url("../img/bg.jpg") repeat center;
	background-size:130%;
  }
.load {
	display: none;
}
.hidden {
	display: none;
}
.loading {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
.loading  img{
  width:80px;
}


#loading {
	display: none;
}
/*jQueryで付与されたdisappearクラスがついたらロゴエリアを非表示*/
#loading.disappear{
     display: none;   
}
/* youtube設定 */
#youtube-area{
    overflow: hidden;
    position: relative;
    width: 100%;
	height:calc( 90vh - 120px );
	margin-top:120px;
    background: #000;
}
.main_v{
	margin-top:120px;
    width: 100%;
	height:calc( 90vh - 120px );
	display: flex;
	align-items:flex-start;
	justify-content:center;
	background:#000;
    overflow: hidden;
    position: relative;
}
.main_slide {
	max-width:calc( 100vh + 120px );
	max-height:calc( 90vh - 120px );
}
/*jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示*/
#youtube-area.appear {
	animation-name:PageAnimeAppear;
	animation-duration:.5s;
	animation-fill-mode:forwards;
}
@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}
#youtube {
	position: absolute;
	top: -50px;
	left: 50%;
	width: 177.77vh;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	/*height:calc(100% + 100px);*/
	height:100vh;
	min-height: 100%;
	min-width: 100%;
}
/*youtubeがクリックされないためのマスク*/
#youtube-mask{
    position: absolute;
    z-index: 1;/*下から2番目に表示*/
    top:0;
    width: 100%;
    height: 100%;
}


.main_v .sns_list{
	padding: 24px 10px;
	position: absolute;
	bottom: 120px;
	right: 3vw;
	z-index: 3;
    background: #ffffffcc;
    border-radius: 10px;
}
.main_v .sns_list li{
	width:34px
}
.main_v .sns_list li:not(:first-child){
	margin-top:24px;
}
.main_v li img{
	width:100%;
    height:auto
}

.loop_txt{
	overflow: hidden;
	position:absolute;
	bottom:0;
}

.loop_wrap {
    display: flex;
    width: 100vw;
    height: 48px;
    overflow: hidden;
	background:#000;
    padding: 24px 0;
    line-height: 1;
    box-sizing: content-box;
  }

.loop_wrap div {
    flex: 0 0 auto;
	flex-shrink: 0;
	white-space: nowrap;
	font-size: 48px;
    letter-spacing: .08em;
  }

.loop_wrap div:nth-child(odd) {
animation: loop 40s -20s linear infinite;
}

.loop_wrap div:nth-child(even) {
animation: loop2 40s linear infinite;
}

@keyframes loop {
    0% {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  @keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-200%);
    }
  }

.section_ttl {
	max-width: 1100px;
	margin: 0 auto;
	margin-top:110px;
}
.section_ttl p {
	font-size: 50px;
    font-weight: bold;
    line-height: 0.9;
}
.section1 {
	margin:240px auto 220px;
	text-align: center;
	position:relative;
}
.section1 p {
	width: 100%;
	text-align: left;
	margin: 0 auto 24px;
	font-size:17px;
	line-height:2.12;
}
.section1 img {
	width:75%;
	max-width:720px;
	margin-bottom:40px;
}
.section1 img.clf {
	width:300px;
	max-width:75%;
	margin:40px auto 0;
}
.outline{
	width:1080px;
	max-width:92%;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	position:relative;
}
.outline_contents{
	width:100%;
	display:flex;
	justify-content:space-between;
}
.outline .outline_contents img{
	width:50%;
}
.top_page .artist{
    max-width:1080px;
    margin:100px auto 160px;
}
.top_page .artist p.artist_head{
	padding-top: 100px;
	margin:0 auto 40px;
    line-height: 1.5;
    font-size: 140%;
    position: relative;
}
.top_page .artist p.artist_head:before{
	content:"";
	width: 82px;
	height: 82px;
	margin: auto;
	position:absolute;
	top: 0;
	left:0;
	right:0;
	background: url("../img/common/heading-c.svg")no-repeat;
}
.top_page .artist .artist_list{
	position:relative;
	overflow:auto;
	display: grid;
	grid-template-columns:1fr 1fr 1fr;
	-ms-grid-columns:1fr 1fr 1fr;
}
.top_page .artist .artist_list li{
	position: relative;
	background:#fff;
}
.top_page .artist .artist_list li .artist_ttl{
	width:100%;
	padding: 12px 12px;
	display:flex;
    align-items: center;
	position:absolute;
	z-index:2;
	top:0;
}
.top_page .artist .artist_list li .artist_ttl a.artist_txt{
	width:calc( 100% - 80px );
	padding: 0 0 0 16px;
	color:#fff;
	line-height:1.35;
	text-shadow:0 0 4px #959595;
}
.top_page .artist .artist_list li a.category_other
{
	width: 72px;
	height:30px;
	display:block;
}
.top_page .artist .artist_list li a.category_live
{
	width:88px;
	height:40px;
	display:block;
}
.top_page .artist .artist_list li a.category_dj {
	width: 72px;
	height:40px;
	display:block;
}
.top_page .artist .artist_list li a.category_workshop , .top_page .artist .artist_list li a.category_booth{
	width: 84px;
	height: 30px;
}
.top_page .artist .artist_list li a.artist_place{
	width: 120px;
	height: 80px;
	position:absolute;
	z-index:2;
	bottom:12px;
	right:12px;
}

.news{
	margin:180px auto 0;
}
.news_ttl{
	width:190px;
    margin-bottom: 40px;
}
.news_list{
	width: 92%;
	list-style: none outside;
	margin:0 auto;
}
.news_list .item a{
	width:100%;
	display: flex;
	flex-wrap: wrap;
	text-decoration: none;
	border-bottom: 2px dashed #ccc;
	padding: 2%;
}
.news_list .item:first-child a{
	border-top: 2px dashed #ccc;
}
.news_list .item .date{
	min-width: 112px;
	font-size: 14px;
}
.news_list .item .title{
	margin: 0;
	width:calc( 100% - 112px );
	font-size: 14px;
}
.news_list .item a:hover{
	color: #00D;
    opacity: 1;
}

.archive{
	margin:180px auto;
	position:relative;
}
.archive_ttl{
	width:268px;
	margin-bottom:40px;
}
.archive_year{
	display:flex;
    flex-wrap: wrap;
	align-items: center;
	justify-content:space-between;
	margin:0 auto;
}
.archive_year a{
	font-family: "Space Grotesk";
	font-weight:bold;
	font-size:44px;
	text-align:center;
	line-height:1;
	letter-spacing:.1em;
	margin:0 25px 5px;
}
.archive_year a span{
	font-size:17px;
	letter-spacing:.05em;
}
.archive_year a:hover{
    opacity:0.3;
}

.gallery{
	margin:0 auto 144px;
}
.gallery_contents{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.gallery_contents img{
	margin:0 20px;
}

.banner_area{
	width:92%;
	max-width:800px;
	margin:64px auto;
}
.banner_area a{
	margin:0 auto 4%;
	display:block;
}
.banner_area a:last-child{
	margin:0 auto;
}

footer {
	margin: 0 auto;
	height: auto;
	padding: 40px 0 40px 0;
}
.info_txt {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:center;
	width:90%;
	max-width: 814px;
	margin: 0 auto;
}
.info_txt .info_txt2 {
	width:50%;
}
.info_txt .info_ttl{
	width:168px;
	margin-bottom:24px;
}
.info_txt p {
	margin-left: 12%;
	font-size: 17px;
	line-height:2;
}
.logo img {
	width: 100%;
	margin: 0 auto;
}
.footer_sns {
	flex-direction: column;
	width: 224px;
}
.footer_sns ul {
	width: 224px;
	margin-bottom:20px;
	order: 1;
	display:flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
}
.footer_sns ul li {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
}
.footer_sns ul li a {
	color: #000;
	text-decoration: none;
	overflow: hidden;
	outline: none;
	line-height: 1;
	word-wrap: break-word;
}
.info_txt .footer_sns p{
	font-size:15px;
}
footer .footer_container .flex1 .sns_list li img {
	width: 100%;
	height: auto;
}
footer .footer_container {
    width:90%;
	max-width:800px;
	margin:96px auto 60px;
	text-align:center;
}
footer .footer_container p{
	font-size:18px;
	margin:100px auto 0;
}
footer .footer_container .logo{
    text-align: center;
    height:auto;
    margin:0 auto;
    display:flex;
	align-items:center;
    flex-wrap: wrap;
	justify-content:space-around;
}
footer .footer_container .logo img{
	width:300px;
	height:auto;
    margin: 0 0 5px 0;
}
footer .footer_container .ft_logo{
	max-width:600px;
	width:90%;
	height:auto;
    margin:6.4% auto 0;
}
.container1 {
    margin: 0;
}
@media screen and (max-width: 640px){
	h3 {
		margin-bottom: 4px;
		padding: 5px 10px;
		font-size: 4vw;
		font-weight: bold;
		line-height: 1.4;
		background: #FF2800;
		border-radius: 30px;
		display: inline-block;
		color: #fff;
		height: 32px;
	}
	.main_v{
        height: 84vw;
		margin-top:15vw;
	}
	.main_slide{
		max-width:110vw;
    	max-height:84vw;
	}
	#youtube-area{
        height:38vh;
        margin-top:9vh;
	}
	#youtube{
		width:110%;
		height:44vh;
	}
	.main_v .sns_list{
		padding: 3vw 2.4vw;
		bottom: 20vw;
		right: 3vw;
	}
	.main_v .sns_list li{
		width: 8vw;
	}
	.main_v .sns_list li:not(:first-child){
		margin-top: 4vw;
	}
	.loop_wrap {
		height:6.4vw;
		padding:4vw 0;
	}

	.loop_wrap div {
		font-size:6.4vw;
	}

	.section1{
		margin:12vh auto 10vh;
	}
	.section1 img{
		width:90%;
		margin-bottom:4vh;
	}
	.section1 p{
        margin: 0 auto;
		font-size:3.3vw;
	}
	.section1 img.clf{
        width: 45%;
    	margin:3.2vh auto 0;
	}
	.outline .outline_contents img{
		width:100%;
	}
	.top_page .artist{
		margin:8vh auto 6vh;
	}
	.top_page .artist p.artist_head{
    	margin: 0 auto 2.8vh;
		padding-top:20vw;
    	font-size: 7vw;
        line-height: .8;
	}
	.top_page .artist p.artist_head:before{
		width:16vw;
		height:16vw;
	}
	.top_page .artist p.artist_head span{
    	font-size: 3.64vw;
	}

	.top_page .artist .artist_list{
		grid-template-columns:1fr 1fr;
		-ms-grid-columns:1fr 1fr;
	}
	/*.top_page .artist .artist_list li{
		width:50%;
	}*/
	.top_page .artist .artist_list li .artist_ttl{
	    padding: 5%;
		flex-wrap:wrap;
	}
	.top_page .artist .artist_list li a.category_other{
		width:40px;
		height:20px;
	}
	.top_page .artist .artist_list li a.category_live {
    	width:68px;
    	height: 28px;
	}
	.top_page .artist .artist_list li a.category_dj {
    	width: 59px;
    	height: 33px;
	}
	.top_page .artist .artist_list li a.category_workshop , .top_page .artist .artist_list li a.category_booth{
		width:48px;
		height:20px;
	}
	.top_page .artist .artist_list li .artist_ttl a.artist_txt{
		width:100%;
    	padding:0;
		font-size:3.6vw;
	}
	.top_page .artist .artist_list li a.artist_place{
		width: 60px;
		height:40px;
		bottom:4px;
		right:4px;
	}
	.news{
		margin: 12vh auto 8vh;
	}
	.news_ttl{
        width: fit-content;
		margin-bottom:3vh;
	}
	.news_ttl img{
        height: 8vw;
	}
	.news_list{
	    width:100%;
		margin:0 auto;
	}
	.news_list .item a {
		padding:2vw;
	}
	.news_list .item .date{
		min-width: 25vw;
		font-size: 3.3vw;
	}
	.news_list .item .title{
		width: calc( 100% - 25vw );
		font-size: 3.3vw;
	}
	
	.archive{
		margin:12vh auto 8vh;
	}
	.archive_ttl{
        width: auto;
		margin:0 0 3vh;
	}
	.archive_ttl img{
        width: auto;
		height:8vw;
	}
	.archive_year a{
		width:33%;
		font-size:8vw;
    	margin: 0 auto 5px;
	}
	.archive_year a span{
		font-size:3vw;
	}
	
	.gallery{
		margin-bottom:10vh;
	}
	.gallery_contents img{
		margin:0 3vw;
	}
	
	footer {
		margin: 0 auto ;
		background-color: #fff;
		height: auto;
		padding:3vh 0px 40px 0px;
	}
	.info_txt .info_txt2{
		width:100%;
	}
	.info_txt .info_ttl{
        width: auto;
		height:8vw;
	}
	.info_txt p{
		font-size:4vw;
	}
	.footer_sns {
		margin:4vh auto 0;
    	flex-direction: column;
		width: 100%;
		max-width: 355px;
        display: flex;
        align-items: center;
	}
	.footer_sns ul {
		order: 1;
	}
	.footer_sns ul li {
		width: 9vw;
	}
	.info_txt .footer_sns p{
		font-size:3.6vw;
	}
	footer .footer_container .flex1 .sns_list li img {
		width: 100%;
		height: auto;
	}
	footer .footer_container {
		margin:8vh auto 0px;
   		padding: 0;
	}
	footer .footer_container p{
    	margin: 8vh auto 0;
		font-size:3.6vw;
	}
	footer .logo img {
		width: 100%;
		margin: 0 auto;
	}
}

@media(min-width:640px){
    .sp{
        display: none !important;
    }
}
@media(max-width:641px){
    .pc{
        display: none !important;
    }
}