@charset "utf-8";
/* CSS Document */
::selection {
    background:#73c9dc;
}
p,th,td{  font-family: "Noto Serif JP", serif;
}
h2 {
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    letter-spacing: 10px;
    padding-left: 10px;    margin-bottom: 60px;
}
h2 span {
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
    display: block;
    color: #666;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 6px;margin-top: 6px;
}
h3,h4{    font-family: "source-han-sans-japanese", sans-serif;font-weight: 700;
}
.w1080{max-width:894px;}

.lineup_box{background:none;    padding-bottom: 70px;}

.youtube_iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube_iframe iframe {
  width: 100%;
  height: 100%;
}

.comin_img,.comin_img img {
	width: 100%;
}
.inline-con{    max-width: 800px;
    margin: 0 auto;width:100%;}
.inline-con_in h4{
    padding-bottom: 10px;
    border-bottom: 2px solid #000;
    margin-bottom: 20px;
}
.img_hanen {
    max-width: 934px;
    position: relative;
    margin: 0 auto;
    padding: 0 20px;
    padding-bottom: 70px;
}
.img_hanen:before{content:'';position:absolute;bottom:0;left:0;right:0;margin:0 auto;height:20px;width:80%;background:#260D0B;}

.box_artists_1{background: #6593A6;    padding: 70px 20px;}
.box_artists_2{background: #012840;    padding: 70px 20px;}
.map_box{background:#fff;}
.map_box.sponser_box{background: #73c9dc;}
.outline_box{background:#8cacb9;}
.copy_box{background:#012840;}


.ttbox{background: #6593A6;    padding: 20px 20px;}
.ttbox2{background: #012840;    padding: 20px 20px;}

/*========= 背景動画設定のCSS ===============*/

/*header設定*/
#header_img-area{
	position: relative;/*ローディング画像などを表示す際の基点とするため指定*/
    height: 100vh;/*高さを全画面にあわせる*/
    text-align: center;
    color: #fff;
    /*ローディング画面時＆動画が表示されないときに表示する背景画像のレスポンシブ化*/
    background: url("../img/movie.jpg") no-repeat;
    background-size: cover;
}

/* ローディングアイコン設定 */

#loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    font-weight: bold;background:url("../img/bfj2024/spin-gray.svg") no-repeat 50% 50%;
    background-size:60px;  width: 60px;
    height: 60px;
}

/*jQueryで付与されたdisappearクラスがついたらロゴエリアを非表示*/

#loading.disappear{
     display: none;   
}


/* youtube設定 */

#youtube-area{
    position: fixed;
    z-index: 1;/*最背面に設定*/
    top: 100px;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
 	opacity: 0;    
}

/*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: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*縦横幅指定*/
  width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
}

/*youtubeがクリックされないためのマスク*/
#youtube-mask{
    position: absolute;
    z-index: 2;/*下から2番目に表示*/
    top:0;
    width:100%;
    height: 100%; 
}


/*youtube 上のロゴ */
/*h1{
  position:absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  color:#fff;
  text-shadow: 0 0 15px #666;
}*/

/*下のコンテンツ*/
#container{
    position: relative;/*relativeを指定してfixed指定をした#youtube-areaの上に表示*/
    z-index: 3;/*一番上に表示*/
    /*見た目の調整*/
    padding-top:1px;
    background:#fff;
	/*background:#333;
	color: #fff;
	padding:300px 0;*/
	text-align: center;
}

.design_bfj_2024{background:#73c9dc;    margin: 3.5%;}
.artbox_sns{margin-bottom: 10px;}
.artbox h4{padding:10px 0;font-size:170%}
.lineup_box h3 {
   /* font-family: 'Bebas Neue', sans-serif;*/
    font-family: "source-han-sans-japanese", sans-serif;
    color: #fff;
    font-size: 70px;
    line-height: 90%;
    margin-bottom: 20px;
}
#top-head a{    font-family: "source-han-sans-japanese", sans-serif;font-weight:700;
}
.lineup_box h3 span{display: block;
    font-size: 34px;
    line-height: 100%;margin-top: 14px;}
.lineup_box h3:before{content:none;}
.lineup_box h3:after{content:none;}
.lineup_box .more{max-width: 140px;font-size: 15px;line-height: 50px}
.lineup_box .more:after{right:15px}

.artbox{
	display: flex;
	align-items: center;
}
.artbox_imgbox{width:50%;padding-bottom:0;}
.artbox_txt {
    width: 50%;
    padding: 20px;
    padding-top: 3%;
	text-align: justify;
	word-break: break-all;
}

.artbox_txt p {
	font-size: 88%;
	font-feature-settings: "palt";
    letter-spacing: normal;
}

.bay_backimg {
    background: url(../img/bfj2024/bfj_backimg.jpg) no-repeat;
    min-height: 340px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}.bay_backimg2 {
    background: url(../img/bfj2024/bfj_backimg2.jpg) no-repeat;
    min-height: 340px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.outline_box td{    text-align: left;}
.outline_box{padding: 70px 20px;}

#header_img-area2{
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 100vh;
}

#video {
    background: #ccc;
    width: 100%;
    z-index: 1;
    margin: auto;
/*    object-fit: contain;*/
    object-fit: cover;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
#top-head{padding-top:0!important;}
#top-head .logo{width:200px!important;}

#global-nav{    padding-top: 35px!important;}

@media screen and ( max-width:900px) 
{
    #container img{max-width:100%;}
    
#header_img-area2 {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 50vh;
}
   .fes-item img{height:auto;}
    
    
    .movie_box{padding-bottom:60px;}
    
}
@media screen and ( max-width:896px) 
{
    #global-nav{    padding: 10px 0!important;}
    body{padding-top:56px;}
    #top-head .logo{
    width: 130px!important;
    padding: 0px 0 0 15px!important;}
    
}@media screen and ( max-width:769px) 
{
    .outline_box th{    padding: 5px 10px;}
    h2{    margin-bottom: 20px;}
    
    #header_img-area2 {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 40vh;
}
  
    
    #header_img-area{height:50vh;}
#youtube-area {
    position: relative;
    overflow: hidden;
    padding-top: calc(100vh* 9 / 16);
    height: 0;
    width: 100vw;
    margin: auto;    top: 0;
}

    
    #fixedTop {
    right: 20px;
        bottom: 40px;}
    .copy_box p{font-size:11px;}
    h2{font-size: 30px;}
    h2 span{font-size: 14px;}
    .bay_backimg{min-height:200px;background-attachment:inherit;}
    .bay_backimg2{min-height:200px;background-attachment:inherit;}
    .artbox{flex-direction: column;}
    .artbox h4{font-size:140%;}
    .artbox_imgbox{width:100%;padding-bottom:0;}
.artbox_txt {
    width: 100%;
        padding-left: 3%;padding-right: 3%;}
    .artbox_txt2 h4 span{    font-size: 70%;}
        .artbox h4.sp_adjustment{
    font-size: 123%;}
    
}
@media screen and ( max-width:600px) 
{
    #header_img-area2 {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 30vh;
}.artbox_txt {
    padding-left: 0%;
    padding-right: 0%;
}
    
}

@media screen and ( min-width:769px) 
	{
		.box_artists_1 {
			margin-bottom: 30px;
		}
	}