body {
  background-color: #000;
  color: #fff;
  font-family: sans-serif;
}

body a {
  text-decoration: none;
  color: #fff;
}


/* -------------------------------
ヘッダー
ハンバーガーメニュー：https://zero-plus.io/media/jquery-hamburger/
---------------------------------- */

/* ヘッダー */
.header {
  background-color: #000;
  height: 50px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.header__inner {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: inherit;
  position: relative;
}

header ul a {
  line-height: 50px;
  font-weight: bold;
}

header ul a:hover {
  opacity: 0.6;
  transition: 0.3s;
}

header ul a img {
  vertical-align: middle;
}

.space {
  height: 50px;
}

/* ヘッダーのロゴ部分 */
.header__title {
  width: 120px;
}


@media screen and (min-width: 960px) {
  .header__title {
    width: 120px;
  }
}

.header__title img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ヘッダーのナビ部分 */

.header__nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  background-color: #000;
  transition: ease .4s;
}


@media screen and (min-width: 960px) {
  .header__nav {
    position: static;
    transform: initial;
    background-color: inherit;
    height: inherit;
    display: flex;
    justify-content: end;
    width: 50%;
  }
}


@media screen and (min-width: 960px) {
  .nav__items {
    width: 100%;
    display: flex;
    align-items: center;
    height: initial;
    justify-content: space-between;
  }
}

.nav-items {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0;
}



@media screen and (min-width: 960px) {
  .nav-items {
    position: inherit;
    top: 0;
    left: 0;
    transform: translate(0, 0);

  }
}

@media screen and (max-width: 959px) {
  header ul a {
    font-size: 20px;
  }
}

/* ナビのリンク */
.nav-items__item a {
  color: #fff;
  width: 100%;
  display: block;
  text-align: center;
  margin-bottom: 24px;
  color: #fff;
}

.nav-items__item:last-child a {
  margin-bottom: 0;
}

@media screen and (min-width: 960px) {
  .nav-items__item a {
    margin-bottom: 0;
  }
}


/* ハンバーガーメニュー */

.header__hamburger {
  width: 48px;
  height: 100%;

}

.hamburger {
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
}

@media screen and (min-width: 960px) {
  .hamburger {
    display: none;
  }
}

/* ハンバーガーメニューの線 */
.hamburger span {
  width: 100%;
  height: 1px;
  background-color: #fff;
  position: relative;
  transition: ease .4s;
  display: block;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  margin: 8px 0;
}

.hamburger span:nth-child(3) {
  top: 0;
}


/* ハンバーガーメニュークリック後のスタイル */
.header__nav.active {
  transform: translateX(0);
}

.hamburger.active span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;

}

.hamburger.active span:nth-child(3) {
  top: -13px;
  transform: rotate(-45deg);
}

/*---------------------------------
 ファーストビュー 
 ---------------------------------*/
.first {
  height: 500px;
  background-image: url(../img/jazzband.jpg);
  background-position: 200px 0;
  background-size: 90%;
  background-repeat: no-repeat;
}

.first_title {
  font-family: 'Racing Sans One', cursive;
  font-size: 120px;
  line-height: 120px;
  color: rgba(255, 199, 0, 0.7);
  margin-left: 60px;
  padding-top: 50px;
}

.first_title span {
  color: transparent;
-webkit-text-stroke: 2px rgba(255, 199, 0, 0.7);
font-size: 100px;
}

/* section */
section h2 {
  writing-mode: vertical-rl;
  font-size: 90px;
  padding: 0 8%;
}

section {
  display: flex;
  /* margin-bottom: 100px; */
}

/* info -------------------------*/
.info_sec {
  padding-top: 50px;
}

.place, .eng {
  font-size: 14px;
  font-weight: normal;
}

.place {
  margin-left: 16px;
}

.date, .info_text {
  font-weight: bold;
}

.info_con {
  line-height: 32px;
}

.line_info {
  width: 100%;
  padding: 16px 0;
  position: relative;
  display:inline-block;
}

.info2 {
  margin-top: 24px;
}

.info {
  width: 100%;
}

/*線の設定*/
.line_info::before,
.line_info::after{
  content:'';
    /*絶対配置で線の位置を決める*/
  position:absolute;
  z-index:1;
  bottom:0;
  /* top: 108px; */
  left: -16px;
     /*線の形状*/   
  background:#333;
  width:100%;
  height:1px;
    /*アニメーションの指定*/
  transition:all 0.3s ease-in-out;
}

 /*hover時に伸びる線の形状*/   
 .line_info::after{
  width:0;
  background:#ccc;
}

 /*hover時に100%に伸びる*/   
 .line_info:hover::after {
  width:100%;
}

/* introduction ---------------*/

.intro_sec {
  padding-top: 100px;
  padding-bottom: 100px;
}
.introduction {
  width: 728px;
}

.introduction p {
  margin: 28px 0;
  line-height: 30px;
}

/* video ----------------------*/
.video {
  display: flex;
  flex-wrap: wrap;
}

.video iframe{
  margin-bottom: 8px;
}

.video-1 {
  margin-right: 32px;
}

.video_dete {
  font-size: 12px;
}

.botton_posi {
  width: 100%;
}

.more_botton {
display: block;
width: 132px;
background-color: #fff;
color: #000;
text-align: center;
padding: 10px 0 ;
margin-top: 40px;
margin-left: 370px;
position: relative;
z-index: 1;
transition: .3s;
}

.more_botton::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: #333;
transform-origin: 100% 50%;
transform: scaleX(0);
transition: transform ease .3s;
}
.more_botton:hover {
color: #fff;
}
.more_botton:hover::before {
transform-origin: 0% 50%;
transform: scaleX(1);
}

/* footer --------------------*/
footer {
  padding: 20px 8%;
  text-align: right;
}

small {
  color: #828282;
}

/* ------------------------------
レスポンシブ
------------------------------ */
@media screen and (max-width:700px) {
  .first {
    background-position: -300px 0;
    position: relative;
    background-size: 1000px;
  }

  .first::before {
    content: '';
    /* ↓暗いオーバーレイを半透明で配置 */
    background-color: rgba(0, 0, 0, 0.2);
    /* ↓全体を覆うように配置 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  
  .first_title {
    font-size: 84px;
    line-height: 84px;
    color: rgba(255, 199, 0, 0.8);
    position: absolute;
    margin-left: 20px;
    padding-top: 10px;
  }

  .first_title span {
    font-size: 74px;
    -webkit-text-stroke: 2px rgba(255, 199, 0, 0.8);
  }

  section h2 {
    writing-mode: horizontal-tb;
    padding-left: 0;
    font-size: 56px;
  }

  section {
    display: block;
    margin: 0 auto;
    width: 90%;
  }

  .introduction {
    width: 100%;
    text-align: justify;
  }

  .introduction img {
    width: 100%;
    height: auto;
  }

  .more_botton {
    margin: 0 auto;
    margin-top: 40px;
  }
}

@media screen and (max-width:500px) {

  section h2 {
    padding: 0;
  }
  .video {
    display: block;
    width: 100%;
  }

  .video-1 {
    margin-right: 0;
  }
  
  .intro_h2 {
    font-size: 12vw;
  }

  section {
    width: 90%;
    margin: 0 auto;
  }
}

/* ------------------------
History
------------------------ */

.top_img {
  margin-top: 50px;
  width: 100%;
  height: 264px;
  background-image: url(../img/bg_trumpet.jpg);
  background-size: cover;
  position: relative;
}

.top_img h2 {
  color: #fff;
  font-family: 'Racing Sans One', cursive;
  font-size: 90px;
  position: absolute;
  top: 68px;
  left: 80px;
}

.sub_title {
  font-family: 'Island Moments', cursive;
  color: rgba(255, 199, 0, 0.8);
  font-size: 48px;
  position: absolute;
  top: 60px;
  left: 180px;
}

.top_img span {
  color: transparent;
-webkit-text-stroke: 0.5px #fff;
}
.history-live {
  padding-top: 8px;
  font-size: 18px;
}

.history-date {
  letter-spacing: 1px;
}

.accordion-container {
  margin: 40px auto 0;
  width: 60%;
}

.accordion-list:not(:first-child) {
  margin-top: 0px;
}

.accordion-list {
  border-bottom: 1px solid #ccc;
}

.accordion-title {
  cursor: pointer;
  font-size: 16px;
  padding: 16px 0;
  position: relative;
}

.accordion-title:before {
  position: absolute;
  content: '';
  top: 50%;
  right: 25px;
  height: 2px;
  width: 15px;
  background: #ccc;
  transform: rotate(90deg);
  transition: all .3s ease-in-out;
}
.accordion-title:after {
  position: absolute;
  content: '';
  top: 50%;
  right: 25px;
  height: 2px;
  width: 15px;
  background: #ccc;
  transition: all .3s ease-in-out;
}

.accordion-title.open:before {
  transform: rotate(180deg);
}
.accordion-title.open:after {
  opacity: 0;
}

.accordion-text {
  display: none;
  padding: 10px 0;
  padding-bottom: 20px;
}

.accordion-text a {
  color: #c29800;
  border-bottom: 1px solid #c29800;
}

.accordion-text a:hover {
  opacity: 0.8;
}

.accordion-title:hover {
  opacity: 0.8;
}

@media screen and (max-width:700px) {

  .top_img {
    background-position: -340px 0;
    height: 200px;
  }

  .top_img h2 {
    left: 20px;
    top: 30px;
  }

  .sub_title {
    left: 120px;
    top: 20px;
  }

  .accordion-container {
    width: 90%;
  }

  .accordion-title:before {
    right: 8px;
  }

  .accordion-title:after {
    right: 8px;
  }
}

/* ------------------------
Video
------------------------ */
.video_container {
  width: 80%;
  margin: 40px auto;
  margin-top: 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.video_sec {
  margin-bottom: 36px;
}

.history_next {
  text-align: center;
  margin-top: 40px;
}

.history_next a {
  color: #8b8b8b;
  padding: 5px;
}

.history_next span {
  color: #fff;
}

.history_next a:hover {
  background-color: #333333;
}

@media screen and (max-width:500px) {

  .video_sec {
    width: 90%;
  }
  .video_wrap {
    padding-top: 56.25%;
    width: 100%;
    position: relative;
  }

  .video_wrap iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
  }

}

/* ------------------------
Infomation　詳細ページ
------------------------ */

.info_container {
  width: 60%;
  margin: 40px auto;
}

.map iframe{
  display: block;
  height: 400px;
}

@media screen and (max-width:500px) {

  .info_container {
    width: 90%;
  }

  .map iframe{
    height: 240px;
    width: 100%;
  }
}
.info_container a {
  color: #c29800;
  border-bottom: 1px solid #c29800;
}

.info_container a:hover {
  opacity: 0.7;
}

.info_container h3 {
  margin-bottom: 32px;
  font-size: 28px;
  text-align: center;
}

.info_container p {
  margin-bottom: 32px;
}