@charset "utf-8";



/********************** top *******************************/
.toph2{ text-align:center; font-size:26px; line-height:1em; color:#007ea7; font-weight:bold; margin-bottom:1em;letter-spacing: 0.1em;}

@media only screen and (max-width: 768px){
.toph2{font-size:18px; line-height:1em; margin-bottom:15px;}

}

/******** mainvisual ***********/
#mainvisual {line-height:0;margin-bottom: 3vw;position:relative;}
#mainvisual h2{ position:absolute; left:0; bottom:-2vw; width:43%; line-height:0; z-index:10;}
#mainvisual h2 img{ width:100%;}
#mainvisual .slide{ position:relative;}
#mainvisual .slide img{ width:100%;}

#mainvisual .slide .txt{ position:absolute; bottom:0; right:0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); width:100%; height:18vw;}
#mainvisual .slide .txt p{ position:absolute; right:3vw; bottom:2vw; margin:0; width:50%; font-size:1.3vw;line-height:1.5em; color:#fff;}

#mainvisual .slide .yt {width:100%;height: 49.3vw; max-height: 95vh; position:relative;}
#mainvisual .slide .yt .youtube{ position:absolute;top: 50%; z-index: 10; left: 50%;transform: translate3d(-50%,-50%,0);}

#mainvisual .slide a:hover img{ opacity:1;}

@media only screen and (max-width: 768px){
#mainvisual {margin-bottom: 14vw;}
#mainvisual .slide { overflow:hidden; padding-bottom:16vw;}
#mainvisual .slide img{height: auto;width: 100%;transform: translate3d(-50%,0,0);position:relative;left:50%;}
#mainvisual h2{position:absolute;left:0;bottom: -10vw;width:100%;line-height:0;z-index:10;}

#mainvisual .slide .txt{height:50vw;}
#mainvisual .slide .txt p{ width:94%; bottom:16vw; right:3%;font-size: 3vw;}

#mainvisual .slide .youtubesp a:before{ display:block; background-image:url(../images/play_img.png); content:''; position:absolute; width:15vw; height:15vw;top: 50%; z-index: 10; left: 50%;transform: translate3d(-50%,-50%,0); background-size:contain;}

}

/******** features ***********/
#top_features{ margin-bottom:4vw;}
#top_features .content_wrap{position:relative;}

#top_features h2{ position:absolute; right:0; top:0; width:8.5%; z-index:10;}
#top_features h2 img{ width:100%;}

#top_features ul{ width:100%; padding-top:2.5%;margin-bottom: 5%;}
#top_features ul:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}
#top_features li{float:left;width: 33.33%;position:relative;}
#top_features li figure{width:calc(100% - 2px); height:calc(100% - 2px);; position: absolute; top: 0; left: 0; overflow: hidden; padding:5px;}
#top_features li figure img{ /*height: auto;*/  width: auto; max-height: 100%; margin: auto; position: absolute; top: 50%; left: 50%; text-align: center; transform: translate3d(-50%,-50%,0); vertical-align: middle; opacity:1; transition:0.3s; }
#top_features li:hover figure img{transform: translate3d(-50%,-50%,0) scale(1.15);}

#top_features li .newsblk{ display:block; position:relative;  height:0; padding:0 0 100% 0; padding-bottom:100%;}
#top_features li .newstxt{position:absolute; z-index:10;  display:table; width:100%; height:100%;}
#top_features li a{ display:table-cell; vertical-align:bottom;color:#fff; padding:3% 5%; font-size:15px;position: relative;font-weight: bold;}
#top_features li a .cv{ position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(../images/top_cv01.png);background-size: cover;display: block;mix-blend-mode: multiply;z-index: -1;}
#top_features li .newstxt h3{ font-size:1.7em; line-height:1.3em; margin-bottom:0.5em;}
#top_features li .newstxt .date{ font-size:0.9em; background-color:#fff; color:#333; display:inline-block; line-height:1em; padding:0.2em 0.5em 0.4em;}
#top_features li .newstxt .txt{ font-size:1em; line-height:1.4em;}
/*
#top_features li:first-child{ width:50%;}
#top_features li:first-child a{ font-size:20px;}
*/

@media only screen and (max-width: 768px){
#top_features{ margin-bottom:20px;}
#top_features h2{ position:inherit; right:0; top:0; width:60%; z-index:10; margin:0; line-height:0; margin-bottom:-2vw;}
#top_features ul{ width:100%; padding-top:0%;}

#top_features li{ float:left; width:100%; position:relative;}
#top_features li:not(:last-of-type){ margin-bottom: 5%;}
#top_features li a{ display:table-cell;color:#fff;  font-size:4vw;}
/*
#top_features li:first-child{ width:100%;}
#top_features li:first-child .newsblk{padding:0 0 50% 0}
#top_features li:first-child a{ font-size: 3vw;}
*/
}


/******** topics ***********/
#top_topics{ margin-bottom:3vw; position:relative;}
#top_topics ul{ background-color:#fff; border:1px solid #CCC; padding:30px 5% 50px;}
#top_topics li{ border-bottom:1px solid #ccc; padding:5px 0;}
#top_topics li a{ display:block; color:#333;font-size: 15px; line-height:1.4em; }
#top_topics li span{ float:left; width:8em; color:#007ea7; font-weight:bold;}
#top_topics li p{ margin:1em 0 1em 7em;}
#top_topics .linkbtn{ position:relative; top:-25px; right:3%; width:35%; margin-left:auto; background-color:#fff;}

@media only screen and (max-width: 768px){
#top_topics{ margin-bottom:20px; }
#top_topics ul{  border:1px solid #CCC; padding:10px 5% 10px; margin-bottom:10px;}
#top_topics li span{ float:none; width:100%; display:block; margin-bottom:5px; }
#top_topics li p{ margin-left:0;}
#top_topics li a{font-size: 14px; line-height:1.4em; }
#top_topics .linkbtn{top:0; right:0; width:100%; }

}

/******** item ***********/
#top_items{ background-image:url(../images/item_bg.jpg); background-size:cover; padding:4vw 0; margin-bottom:3vw;}

#top_items h2{ color:#f9d116;}

#top_items ul{ margin-bottom:2vw;}
#top_items ul:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}
#top_items ul li{width: 24%;float: left;margin-right: 1.33%;margin-bottom: 1.33%;}
#top_items ul li:nth-child(4n){ margin-right:0;}
#top_items ul li a{ color:#fff;font-size: 13px; font-weight: bold; }

#top_items .linkbtn{  width:35%; margin-left:auto;}
#top_items .linkbtn a{color:#f9d116; border-color:#f9d116; }
#top_items .linkbtn a:hover{ background-color:#f9d116; color:#000;}
#top_items .linkbtn a:hover:after{    border-color: transparent #000 #000 transparent}

@media only screen and (max-width: 768px){
#top_items{padding:20px 0; margin-bottom:20px;}
#top_items ul li{ width:49%; margin-right:2%;}
#top_items ul li:nth-child(2n){ margin-right:0;}
#top_items .linkbtn{  width:100%;}
}

/******** RELATED ***********/
#top_related{ margin-bottom:3vw;}

#top_related ul{}
#top_related ul:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}
#top_related ul li{ width:23.5%; float:left; margin-right:2%;}
#top_related ul li:nth-child(4){ margin-right:0;}
#top_related ul li a{ color:#646a6e;}

#top_related ul li img{ padding:0 0 5px;}
#top_related ul li h3 { margin: 0 0 10px; font-size: 13px; font-weight: bold; line-height:1em; }
#top_related ul li h3 img { width: auto; margin-bottom: 0 !important; padding: 0; line-height: 1; margin-right: 7px; vertical-align: top; }
#top_related ul li p { font-size: 13px; letter-spacing: 0.08em; line-height:1.5em; }

@media only screen and (max-width: 768px){
#top_related ul li{ width:49%; margin-right:2%;}
#top_related ul li:nth-child(2n){ margin-right:0;}
}



/******** logo ***********/
#logo{margin-bottom: 4vw;}
#logo .content_wrap{text-align: center;}
#logo figure{width: 20%;max-width: 120px;margin: 0 auto 10px;}
#logo p{font-size: 12px;}


/******** official link ***********/

#official{ margin-bottom:2vw;}
#official h2{ font-size:18px;font-variant-ligatures: none; font-style:italic; letter-spacing:0.2em; }
#official .yt { margin: 0 0 120px }
#official .icons { background-color: #000; border-top: 1px solid #d6cfc5; }
#official .icons ul { width: 450px; margin: 0 auto }
#official .icons li { float: left; line-height:0;}

@media only screen and (max-width: 768px){
#official .icons ul{ width:100%;}
#official .icons ul li { width: 20%; }
#official .icons ul li img { width: 100%; height: auto }
}

/******** foot lang ***********/
#foot_lang{ background-image:url(https://en.fujirockfestival.com/img/2023/mainvisual.png); background-size:100%; background-position:center bottom;text-align:center; padding:3.5vw 0 6vw;}
#foot_lang h2{ width:44%; margin:0 auto 3.5vw; line-height:0;}
#foot_lang h2 img{ width:100%;}

#foot_lang ul{ background-color:rgba(255,255,255,0.8); padding:2vw 4vw;}
#foot_lang ul:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}
#foot_lang li{ float:left; width:24%; margin-right:1%;}
#foot_lang li:last-child{ margin-right:0;}
#foot_lang li a{ background-color:#000; color:#fff; display:block; padding:1.5em 0;}
#foot_lang li a:hover{ background-color:#333;}

@media only screen and (max-width: 768px){
#foot_lang{ background-size:200%;}
#foot_lang h2{ width:80%; margin:0 auto 3.5vw; }
#foot_lang .content_wrap{ width:100%;}
#foot_lang ul{ padding:2vw 2%;}
#foot_lang li a{  color:#fff; display:block; padding:1em 0; font-size:3vw;}
}