@charset "utf-8";

html {
     font-family: Arial, Helvetica, sans-serif;
}


body {
    margin: 0 auto;
    color: #fff;
    background-color: #0D0D0D;
}

a {
    text-decoration: none;
    color: #0D0D0D;
    transition: all 0.2s ease; 
  }

a:hover {
    opacity: 80%;
    }

 h1 img,a img {
     width: 100%;
 }

 h2 {
    font-size: 1.4rem;
    text-align: center;
    font-weight: 300;
    padding-bottom: 35px;
    line-height: 1;
}

h2 span,p span {
    display: inline-block
  }

 h2 span {
    font-size: 4.2rem;
    display: block;
    font-weight: 600;
    text-transform: uppercase;
}

 section {
    padding: 56px 27px;
    margin: 0 auto;
}

section h2 {
    font-size: 1.4rem;
    font-weight: 500;
}

.fs_big {
    font-size: 3.5rem;
    font-weight: 700;
}

.fs_middle {
    font-size: 2.1rem;
    font-weight: 600;
}

.fs_small {
    font-size: 1.4rem;
    font-weight: 500;
}

small {
    font-size: 1.0rem;
    font-weight: 100;
}

a.more {
    display: block;
    text-transform: uppercase;
    width: 200px;
    text-align: center;
    line-height: 50px;
    background-color: #CE1919;
    margin: 0 auto;
    border-radius: 30px;
    margin-top: 35px;
    font-size: 2.1rem;
    font-weight: 700;
    color: #fff;
    transition: all 0.2s ease; 
}

a.more:hover {
    background-color: #A6775B;
   opacity: 100%;
}

/* フェードイン(初期値) */
.js-fadeUp {
    opacity: 0; /* 最初は非表示 */
    transform: translateY(30px); /* 下に30pxの位置から */
    transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
  }
  /* フェードイン(スクロールした後) */
  .js-fadeUp.is-inview {
    opacity: 1; /* 表示領域に入ったら表示 */
    transform: translateY(0); /* 30px上に移動する */
    transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
  }

/* 基本設定以上====================================================================== */
/* ↓ヘッダー設定ここから↓====================================================================== */

header {
    height: 75px;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 7px;
    position: fixed;
    z-index: 999;
    top: 0;
}

main {
    margin-top: 75px;
}

header h1 {
    width: 130px;
}

header h1 img{
    min-width: 120px;
}

nav {
    color: #0D0D0D;
}

nav#nav_pc ul {
    display: flex;
    gap: 27px;
}

nav#nav_pc ul li a {
    display: block;
    height: 70px;
    line-height: 70px;
    font-weight: 700;
    font-size: 1.8rem;
    box-sizing: border-box;
}

#nav_pc ul li a:hover {
   padding-top: 3px;
}

.top_link {
    display: flex;
    gap: 7px;
    align-items: center;
}

.top_link .sns_link {
    width: 50px;
    height: 50px;
    background-color: #0D0D0D;
    border-radius: 50%;
    display: block;
    padding: 12px;
}

.top_link a img {
    width: 100%;
}

.top_link nav#nav_sp {
    display: none;
}
/* ヘッダー設定以上====================================================================== */
/* ↓top_visual設定ここから↓====================================================================== */

.top_visual {
    background-image: url(../images/bgi_top_right.jpg);
    background-size: cover;
    background-color: rgb(13, 13, 13, 0.8);
    padding: 56px 0;
}

.top_visual h1 {
    max-width: 700px;
    margin: 0 auto;
    margin-bottom: 27px;
    padding: 0 14px;
}

.top_visual p {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.top_info {
    padding: 0 14px ;
    /* background-color: rgb(13, 13, 13, 0.8); */
    max-width: 500px;
    margin: 0 auto;
}

.top_info img {
    width: 100%;
}



.message {
    max-width: 800px;
    text-align: center;
}

h2.message  {
    margin: 35px auto;
    color: #FFD138;
    line-height: 1.5;
    padding-bottom: 0;
    margin-bottom: 14px;
}

h2.message span {
    font-size: 3.5rem;
    letter-spacing: 0.04em;
    line-height: 2;
}

p.message {
    letter-spacing: 0.04em;
    line-height: 2.5;
    font-size: 1.8rem;
    margin: 0 auto;
    margin-bottom: 35px;
}
/* top_visual設定以上====================================================================== */

.tick {
    font-size:1rem;
    white-space:nowrap; 
    font-family:arial,sans-serif;
  }
  
.tick_outside {
    background-color: hsl(0, 0%, 100%,0.8);
    padding: 14px;
    margin: 0 auto;
    max-width: 600px;
    margin-top: 27px;
}

.tick_outside p {
    text-align: center;
    color: #0D0D0D;
    margin-bottom: 7px;
}
  .tick-flip,.tick-text-inline {
    font-size:2.5em;
  }
  
  .tick-label {
    margin-top:1em;font-size:1em;
  }
  
  .tick-char {
    width:1.5em;
  }
  
  .tick-text-inline {
    display:inline-block;text-align:center;min-width:1em;
  }
  
  .tick-text-inline+.tick-text-inline {
    margin-left:-.325em;
  }
  
  .tick-group {
    margin:0 .5em;text-align:center;
  }
  
  
  .tick-text-inline {
     color: rgb(90, 93, 99) !important; 
  }
  
  .tick-label {
     color: #0D0D0D !important;
     font-weight: 700; 
  }
  
  .tick-flip-panel {
     color: #fff !important;
     font-weight: 700; 
  }
  
 
  .tick-flip-panel-text-wrapper {
     line-height: 1.45 !important; 
  }
  
  .tick-flip-panel {
     background-color: #FFD138 !important; 
  }
  
  .tick-flip {
     border-radius:0.12em !important; 
  }

/* ↓slide01設定ここから↓====================================================================== */


figure img {
    width: 100%;
    height: auto;
}

.artistname {
    padding: 7px;
    text-transform:capitalize;
    font-weight: 700;
    background-color: #fff;
}


/* artist_slider設定以上====================================================================== */
/* ↓NEWS設定ここから↓====================================================================== */

#news {
    max-width: 600px;
}

#news li {
    border-bottom: 2px dotted #fff;
    padding: 14px;
    display: flex;
}
#news li p:last-child{
    width: 80%;
    position: relative;
}

#news li a {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#news li p:last-child:after {
    content: '▶';
    color: #CE1919;
    position: absolute;
    right: 0;
}

#news li a {
    color: #fff;
}

#news li a time {
    color: #FFD138;
}

/* NEWS設定以上====================================================================== */
/* ABOUT設定ここから↓====================================================================== */

#about {
    background-color: #fff;
}

#about p,#about h2 {
    color: #0D0D0D;
}

#about ul {
    max-width: 600px;
    margin: 0 auto;
}

#about ul li {
    display: flex;
    padding: 14px;
    border-bottom: 3px dotted #c1c1c1;
}

#about .title {
    width: 15%;
}

#about .text {
    width: 80%;
}
/* NEWS設定以上====================================================================== */
/* TICKET設定ここから↓====================================================================== */


#ticket ul,h3 {
    max-width: 600px;
}

ul.ticket_type {
    display: flex;
    flex-wrap: wrap;
    gap: 27px;
    justify-content: center;
    margin: 0 auto;
} 


ul.ticket_type li {
    width: calc(50% - 27px);
}

h3.ticket_type {
    background-color: #A6775B;
    text-align: center;
    padding: 7px;
}
p.price {
    background-color: #fff;
    color: #0D0D0D;
    padding: 14px;
    text-align: center;
}

.attention {
    margin:27px auto;
    letter-spacing: 0.1rem;
    padding: 0 14px;
}

#playguide li p {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 0.3rem;
}
#playguide li p a {
    font-size: 2.8rem;
    font-weight: 700;
    color: #fff;
}

#playguide li p a:hover {
    border-bottom: 2px solid #fff;
}

#playguide li h3 {
    padding: 0;
    margin: 7px 0;
}

h3.attention {
    margin-bottom: 14px;
    color: #FFD138;
}

#attention_text {
    margin-top: 14px;
    list-style-type: disclosure-closed;
}

#attention_text li {
    margin-left: 14px;
}

/* TICKET設定以上====================================================================== */
/* SPONSOR設定ここから↓====================================================================== */
#sponsor {
    background-color: #fff;
}

#sponsor h2 {
    color: #0D0D0D;
}

.sponsor_logo {
    display: flex;
    flex-wrap: wrap;
    gap: 27px;
    justify-content: center;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.sponsor_logo li img {
    width: 200px;
    height: 50px;
    display: block;
}

.sponsor_logo li img.square {
    height: 80px;
    width: 80px;
}

.sponsor_logo li:first-child img {
    padding: 5px;
}

/* SPONSOR設定以上====================================================================== */
/* ↓footer設定ここから↓====================================================================== */


footer {
    width: 100%;
    background-color: #FFD138;
    color: #0D0D0D;
    padding: 7px 0;
    text-align: center;
}


/* footer設定以上====================================================================== */
/* ↓about.html設定ここから↓====================================================================== */

#about_title {
    background-image: url(../images/bgi_jigoku2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    padding:100px 0 ;
    color: #0D0D0D;
    font-size: 2.1rem;
    font-weight: 700;
}

#about_title img {
    max-width: 300px;
    display: block;
    margin: 0 auto;
    margin-bottom: 14px;
}

.shashica {
    margin: 28px auto;
    padding-bottom: 250px;
    background-image: url(../images/bgi_about.svg);
    max-width: 800px;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
}

.shashica .fs_middle {
    color: #FFD138;
    margin-bottom: 7px;
}
/* about.html設定以上====================================================================== */
/* ↓artist.html設定ここから↓====================================================================== */
h2#artist_title {
    background-image: url(../images/bgi_jigoku1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    padding:100px 0 ;
    color: #0D0D0D;
    font-size: 2.1rem;
    font-weight: 700;
    width: 100%;
}

#artist_list{
    margin: 35px auto;
    max-width: 1000px;
}

h2#artist_title img {
    margin: 0 auto;
    max-width: 300px;
    font-size: 2.1rem;
    display: block;
    margin: 0 auto;
    margin-bottom: 14px;
}


.two_days_artist {
    max-width: 1000px;
    display: flex;
    gap: 27px;
}

.two_days_artist h3 {
    text-align: center;
    padding-bottom: 14px;
    font-weight: 700;
    line-height: 1;
}

#sat_menber,#sun_menber {
    width: calc(50% - 14px);
    padding: 27px 7px;
}

ul.artist_list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

ul.artist_list li {
    width: calc(50% - 14px);
}

#sat_menber {
    background-color: #060066;
}

#sun_menber {
    background-color: #CE1919;
}

a.ticket_link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    margin: 35px auto;
    background-color: #fff;
}

.ticket_link p {
    color: #0D0D0D;
    font-size: 3.5rem;
    font-weight: 800;
    border-bottom: 5px solid #CE1919;
    margin: 0 auto;
}



a.ticket_link img {
    display: block;
    width: 30%;
}

/* artist.html設定以上====================================================================== */
/* ↓timetable.html設定ここから↓====================================================================== */

h2#timetable_title {
    background-image: url(../images/bgi_jigoku3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    padding:100px 0 ;
    color: #0D0D0D;
    font-size: 2.1rem;
    font-weight: 700;
    width: 100%;
}

#artist_list{
    margin: 35px auto;
    max-width: 1000px;
}

h2#timetable_title img {
    margin: 0 auto;
    max-width: 300px;
    font-size: 2.1rem;
    display: block;
    margin: 0 auto;
    margin-bottom: 14px;
}

.timetable_sat,.timetable_sun {
    max-width: 500px;
    padding: 0;
    margin: 0;
}


.timetable_sat img,.timetable_sun img{
    width: 100%;
}

.timetable {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 56px 27px;
    padding-bottom: 0;
    gap: 27px;
}
@media screen and (max-width: 1030px){
    
    #header nav {
        width: 100%;
      }
    nav#nav_pc {
        display: none;
    }
    nav#nav_sp {
        display: none;
        background: #0D0D0D;
        position: absolute;
        top: 75px;
        left: 0;
        width: 100%;
        z-index: 9999;
    }

    
    #nav_sp ul {
        display: block;
        text-align: center;
        width: 100%;
           }


           .navigation__list {
            text-align: center;
            list-style: none;
            padding: 0;
            margin: 0;
          }
          .navigation__list-item {
            border-bottom: dashed 1px #fff;
          }
          .navigation__list-item:first-child {
            border-top: dashed 1px #fff;
          }
          .navigation__link {
            color: #fff;
            font-weight: 700;
            text-decoration: none;
            display: block;
            padding: 24px 0;
            transition: .5s;
          }
          @media (hover: hover) and (pointer: fine) {
            .navigation__link:hover {
              background: #CE1919;
            }
          }


    .hamburger-menu {
        width: 50px;
        height: 50px;
        position: relative;
        border: none;
        background: #0D0D0D;
        appearance: none;
        padding: 0;
        cursor: pointer;
        border-radius: 50%;
      }
      .hamburger-menu__bar {
        display: inline-block;
        width: 44%;
        height: 2px;
        background: #fff;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        transition: .5s;
      }
      .hamburger-menu__bar:first-child {
        top: 16px;
      }
      .hamburger-menu__bar:nth-child(2) {
        top: 24px;
      }
      .hamburger-menu__bar:last-child {
        top: 32px;
      }
      .hamburger-menu--open .hamburger-menu__bar {
        top: 50%;
      }
      .hamburger-menu--open .hamburger-menu__bar:first-child {
        transform: translateX(-50%) translateY(-50%) rotate(45deg);
      }
      .hamburger-menu--open .hamburger-menu__bar:last-child {
        transform: translateX(-50%) translateY(-50%) rotate(-45deg);
      }
      .hamburger-menu--open .hamburger-menu__bar:nth-child(2) {
        display: none;
      }
}

@media screen and (max-width: 768px){
    .fs_big {
        font-size: 3.0rem;
    }
    
    .fs_middle {
        font-size: 1.8rem;
    }
    
    .fs_small {
        font-size: 1.0rem;
        padding: 0;
    }

    section {
        padding: 48px 6px;
    }

    .top_visual h1 {
        max-width: 400px;
    }

    .top_info {
        max-width: 350px;
    }

    .tick_outside p {
        font-size: 2.4rem;
    }

      #datecounter span {
        font-size: 4.2rem;
        padding: 7px;
      }

    h2.message span {
        font-size: 2.4rem;
    }

    p.price {
        padding: 7px;
    }

    ul#playguide li {
        font-size: 1.4rem;
    }

    #about .title {
        width: 20%;
    }

    .sponsor_logo {
        gap: 14px;
    }

    .sponsor_logo li img {
        width: 100px;
        height: 25px;
    }
    
    h2#about_title img,h2#artist_title img{
        max-width: 200px;
    }


    p.message {
        font-size: 1.6rem;
        letter-spacing: 0.01em;
    }

    .shashica {
        padding-bottom: 100px;
    }

   #gakuwari_price {
    height: 68px;
    }

    .slider_text img {
        width: 500px;
        height: auto;
    }

    .two_days_artist {
        display: block;
    }

    #sat_menber,#sun_menber {
        width: 100%;
    }
    #sat_menber{
        margin-bottom: 27px;
    }

    .ticket_link p {
        font-size: 2.0rem;
    }

    .artist p.artistname {
        font-size: 1.2rem;
        line-height: 2;
    }

    .timetable {
        padding: 56px 7px;
        padding-bottom: 0;
    }
}