/* ヘッダー
------------------------------------------------------------*/
html, body {
	margin: 0;
	overflow: hidden;
	background-color: #ffffff;
}

/* ローディング全体の背景 */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* お箸共通のスタイル */
.hashi {
  width: 120px;
  height: auto;
  transition: transform 1s ease, opacity 1s ease;
}

/* 初期位置（中央に上下並ぶ） */
.hashi.top {
  transform: translateY(0);
}
.hashi.bottom {
  transform: translateY(0);
}

/* アニメーション：上下に開く */
#loader.split .hashi.top {
  transform: translateY(-50px) rotate(-10deg);
  opacity: 0;
}

#loader.split .hashi.bottom {
  transform: translateY(50px) rotate(10deg);
  opacity: 0;
}

#loader {
  transition: opacity 0.8s ease;
  opacity: 1;
  pointer-events: none;
}


.back {
	width: 100%;
	height: 100vh;
	background-image: url(image/haikei.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
    position: relative;
    }



@media screen and (min-width: 1025px) {
  .left {
		width: 1px;
		height: 0 ;
		margin-left: 0;
		left: 0;
	}
	
	img.aigeisai {
		position: fixed;
        right: 0;
        bottom: 0;
        width: 110px;
        height: auto;
        margin: 10px;
    }

    img.access,img.map,img.timetable,img.store,img.stage,img.concert,img.exhibition,img.sns,img.inquiry {
            height: 5vh;
	    margin-left: 10px;
	    margin-top: 1.5vh;
            left: 0;
    }

    img.access:hover,img.map:hover,img.timetable:hover,img.store:hover,img.stage:hover,img.concert:hover,img.exhibition:hover,img.sns:hover,img.inquiry:hover {
		opacity: 0.3;
        transition: opacity 0.2s ease;
	  }

   .right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

	.right a {
		display: block;
		margin-left: 0%;
	}

  img.ume {
    width: 32vw;
    height: auto;
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2; 
  }

  img.ohashi-omote {
    position: absolute;
    bottom: 45%;
    left: 57%;
    width: 40%;
    z-index: 3; 
  }

  img.ohashi-ura {
    position: absolute;
    bottom: 45%;
    left: 57%;
    width: 40%;
    z-index: 1; 
  }
}

 /*1024px以下*/
@media screen and (max-width: 1024px) {
	/* 1024px以下で表示させたいcssを記述していく */

	.left {
		width: 1px;
		height: 0 ;
		margin-left: 0;
		left: 0;
	}
	
	img.aigeisai {
		position: fixed;   /* ← これが必須！ */
        right: 0;
        bottom: 0;
        width: 110px;
        height: auto;
        margin: 10px; /* 余白（お好みで） */
        z-index: 10; /* 必要なら他の要素より前面に表示 */
	}
	

  img.access,img.map,img.timetable,img.store,img.stage,img.concert,img.exhibition,img.sns,img.sponsorship,img.inquiry {
	    height: 4vh;
	    margin-left: 10px;
	    margin-top: 1.5vh;
            left: 0;
	}

	img.access:hover,img.map:hover,img.timetable:hover,img.store:hover,img.stage:hover,img.concert:hover,img.exhibition:hover,img.sns:hover,img.sponsorship:hover,img.inquiry:hover {
	    opacity: 0.3;
            transition: opacity 0.2s ease;
	}

    .right {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

  .right a {
		 display: block;
		 margin-left: 0%;
	}


	img.ume {
  width: 325px;
  height: auto;
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; 
  }

  img.ohashi-omote {
    position: absolute;
    bottom: 45%;
    left: 57%;
    width: 410px;
    z-index: 3; 
  }

  img.ohashi-ura {
    position: absolute;
    bottom: 45%;
    left: 57%;
    width: 410px;
    z-index: 1; 
  }
 }


  /*タテ600px以下(nest hub用)*/
@media screen and (max-width: 600px) {
	/* タテ600px以下で表示させたいcssを記述していく */

	.left {
		width: 1px;
		height: 0 ;
		margin-left: 0;
		left: 0;
	}
	
	img.aigeisai {
	position: fixed;   /* ← これが必須！ */
        right: 0;
        bottom: 0;
        width: 20vw;
        height: auto;
        margin: 20px; /* 余白（お好みで） */
        z-index: 10; /* 必要なら他の要素より前面に表示 */
	}
	
	

  img.access,img.map,img.timetable,img.store,img.stage,img.concert,img.exhibition,img.sns,img.sponsorship,img.inquiry {
	    height: 3.5vh;
            width: auto;
	    margin-left: 10px;
	    margin-top: 1.5vh;
            left: 0;
	}

	img.access:hover,img.map:hover,img.timetable:hover,img.store:hover,img.stage:hover,img.concert:hover,img.exhibition:hover,img.sns:hover,img.sponsorship:hover,img.inquiry:hover {
		opacity: 0.3;
        transition: opacity 0.2s ease;
	}

    .right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }


  img.ume {
    width: 55vw;
    bottom: 13%;
    right: 10px;
    z-index: 2; 
  }

  img.ohashi-omote {
    position: absolute;
    bottom: 33%;
    left: 57%;
    width: 350px;
    z-index: 3; 
  }

  img.ohashi-ura {
    position: absolute;
    bottom: 33%;
    left: 57%;
    width: 350px;
    z-index: 1; 
  }
}

  .right img {
    max-width: 100%;
    object-fit: contain; /* or cover */
    display: block;
    margin-bottom: 5px;
  }