html{
font-size:62.5%;
overflow-x:hidden;
width:100%;
-ms-scroll-chaining: none;
    overscroll-behavior: none;
-webkit-overflow-scrolling:touch;
}

body{
overflow-x:hidden;
text-align:center;
font-family: "Montserrat","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
line-height:1.75;
color:#444;
background-color:#fafafa;
font-size:1.4rem;
-webkit-font-feature-settings :"palt";
        font-feature-settings :"palt";
letter-spacing:0.1em;
width:100%;
}

*{
  -webkit-box-sizing:border-box;
          box-sizing:border-box;
}

img{
  display:block;
  width:100%;
  height:auto;
  -webkit-box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);
          box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);
}

ul li{
  list-style:none;
}

ul li a{
  text-decoration:none;
  color:#fff;
  display:block;
}

ul li a:link,
ul li a:visited,
ul li a:hover{
  text-decoration:none;
  color:#fff;
}

dt{
    display:inline-block;
    color: #000;
    font-size: 3rem;
    font-family: 'Open Sans', sans-serif;
    border-bottom: 1px solid #000;
    line-height: 1;
    padding-bottom:10px;
    margin-bottom:20px;
    margin-top:20px;
}

dt span{
  display:block;
  font-size:1.4rem;
  margin-top:10px;
}

dd{
  text-align:left;
  margin-bottom:30px;
}

.logo{
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  text-align:center;
  -webkit-transform:translate(-50%,-50%);
      -ms-transform:translate(-50%,-50%);
          transform:translate(-50%,-50%);
}

.logo img{
  width:166px;
  height:auto;
}

ul.ticket_info li a {
  color:#8ad2c4;
  -webkit-text-decoration:underline dotted #8ad2c4;
          text-decoration:underline dotted #8ad2c4;
}

ul.ticket_info li a:link,
ul.ticket_info li a:visited,
ul.ticket_info li a:hover{
  color:#8ad2c4;
}


div.inner_top .contents{
  width:100%;
  height:100vh;
  background: url(../img/hero.png) center center /cover no-repeat;
  position:relative;
}

.contents .logo{
  width:166px;
  height:auto;
  position:absolute;
  top:50%;
  left:50%;
  text-align:center;
  -webkit-transform:translate(-50%,-50%);
      -ms-transform:translate(-50%,-50%);
          transform:translate(-50%,-50%);
  -webkit-box-shadow:none;
  box-shadow:none;
}

div.movie{
  margin-top:100px;
}

h2{
  margin:0 auto;
  margin: 0 auto 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #000;
  font-size: 4rem;
  position: relative;
  left: 0;
  display:inline-block;
  font-family: 'Open Sans', sans-serif;
  padding-bottom:10px;
  border-bottom: 2px solid #000;
  line-height: 1;
  padding-top:60px;
  letter-spacing: 0.05em;
}

/* SNS icons */

ul.icon-section{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  position:absolute;
  bottom:10px;
  right:0;
}

ul.icon-section li{
margin-right:12px;
cursor:pointer;
}

ul.icon-section li a.twitter{
  display:block;
  width:43px;
  height:53px;
  background:url(../img/twitter.png) top left/cover no-repeat;
}

ul.icon-section li a.facebook{
  display:block;
  width:42px;
  height:52px;
  background:url(../img/facebook.png) top left/cover no-repeat;
}

ul.icon-section li a.blog{
  display:block;
  width:42px;
  height:54px;
  background:url(../img/blog.png) top left/cover no-repeat;
}

h3{
  line-height:1.4;
  font-size:2.2em;
  margin: 40px 0 30px 0;
  font-weight:normal;
  color:#000;
  font-family: 'Open Sans', sans-serif;
  border-bottom: 1px solid black;
  padding-bottom: 5px;
  display: inline-block;
}

h4{
  font-size:1.6rem;
  display:inline-block;
}

div.button{
  margin-top:30px;
  text-align:center;
}

div.button a{
  font-weight:bold;
  font-size:1.6rem;
  display:inline-block;
  color:#fff;
  background:#000000;
  text-decoration:none;
  border-radius:34px;
  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,1);
          box-shadow: 0 2px 2px rgba(0,0,0,1);
  height:48px;
  line-height:48px;
  vertical-align:middle;
  padding:0 60px;
  corsor:pointer;
}

.fas{
    padding-right:5px;
}

div.button a:link,
div.button a:hover,
div.button a:visited{
  color:#fff;
  text-decoration:none;
}

div.button a:hover{
    -webkit-box-shadow:none;
            box-shadow:none;
}

.about_hg{
  margin-top:30px;
}

.section_next_party{
 padding:0 13px;
 width:100%;
}

.section_next_party > p{
 margin-bottom:30px;
 text-align:left;
}

.section_next_party div.flyer h3{
font-size:1.8rem;
border:none;
padding-bottom:5px;
color:#000;
padding-bottom:10px;
border-bottom:1px solid #000;
line-height:1;
margin-bottom:10px;
text-align:center;
font-weight:bold;
}

.first p{
  text-align:left;
}

#second_animation{
  padding-top:40px;
}

.section_next_party div.flyer p{
color:#484848;
line-height:1.8;
padding:0 10px 10px 10px;
border-radius:0 0 2px 2px;
font-size:1.2rem;
border-bottom:1px solid #484848;
margin-bottom:30px;
}

.caution{
  text-align:left;
}

.caution li{
  margin-top:3px;
  font-size:1.1rem;
  padding:0 10px;
}

.caution li:first-of-type{
  margin-top:0px;
}

.ticket_info{
  font-size:1.4rem;
}

.ticket_info h3{
  line-height:1;
}

.font-small{
  font-size:1.1rem;
}

.font_smaller{
  font-size:1.1rem;
  display:block;
}

.number_weight{
  font-size:1.6rem;
}

.font_bold{
  font-weight:bold;
  font-size:1.8rem;
}

.section_about_hardgate{
  width:100%;
  margin:0;
  padding:0 13px
}

.section_about_hardgate div.img_area{
 -webkit-box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);
         box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);
  margin-bottom:40px;
}

.section_about_hardgate div:nth-of-type(2) img{
 display:block;
 width:80%;
 position:absolute;
}

.section_about_hardgate div:nth-of-type(2) img:first-of-type{
 top:0;
 left:0;
}

.section_about_hardgate div:nth-of-type(2) img:nth-of-type(2){
  top:40%;
  right:0;
}

.for_height{
position: relative;
height: auto;
}

.for_height:before{
  content:'';
  display:block;
  padding-top:100%;
  margin-bottom:40px;
}

.section_about_hardgate img{
  display:block;
}

.section_about_hardgate img:nth-of-type(2){
  float:left;
}

.section_about_hardgate p{
  text-align:left;
  margin-bottom:40px;
}

.conversion{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: flex-start;
-webkit-box-pack:justify;
    -ms-flex-pack:justify;
        justify-content:space-between;
}

.conversion a{
  width:calc(50% - 5px);
  display:inline-block;
  position:relative;
  -webkit-box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);
          box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);
  color:#fff;
  corsor:pointer;
  text-decoration:none;
}

.conversion a:link,
.conversion a:visited,
.conversion a:hover{
  text-decoration:none;
  color:#fff;
}


.conversion img{
  width:100%;
  height:auto;
  display:block;
  -webkit-box-shadow:none;
          box-shadow:none;
}

.conversion span{
  font-size:1.6rem;
  display:block;
  width:100%;
  height:50px;
  background-color:#000;
  line-height:50px;
  vertical-align:middle;
}

.section_anthem{
  padding:0 13px;
  width:100%;
  margin:0;
}

.section_special_guest{
  padding:0 13px;
  width:100%;
  margin:0;
}

.movie-wrap {
     -webkit-box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);
             box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}

.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

.goods{
  padding:0 13px;
  width:100%;
  margin:0;
}

.goods p{
  font-size:1.6rem;
  margin-top:40px;
}

.goods div.button{
  margin:30px 0 50px 0;
}

.guest_01{
margin-bottom:50px;
}

.section_dj_live{
  padding:0 13px;
  width:100%;
  margin:0;
}

.flex_section_01{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
      -ms-flex-pack:justify;
          justify-content:space-between;
  -webkit-box-align:start;
      -ms-flex-align:start;
          align-items:flex-start;
  margin-bottom:20px;
}

.flex_section_01 img{
    width:calc(50% - 5px);
    display:block;
    -webkit-box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);
            box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);
}

.flex_section_02{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
      -ms-flex-pack:justify;
          justify-content:space-between;
  -webkit-box-align:start;
      -ms-flex-align:start;
          align-items:flex-start;
}

.flex_section_02 img{
  width:calc(33% - 5px);
  display:block;
  -webkit-box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);
          box-shadow: 0 12px 10px -6px rgba(0,0,0,.3);
}

.section_dj_live h3{
display: inline-block;
color: #000;
font-size: 3rem;
font-family: 'Open Sans', sans-serif;
border-bottom: 1px solid #000;
line-height: 1;
padding-bottom: 10px;
margin-top:0;
margin-bottom: 30px;
}

.section_dj_live h3 + img{
 margin-bottom:20px;
}

.section_dj_live div.button{
  margin-top:40px;
}

.footer-caution {
  text-align: center;
}

.footer-copyright {
  color: #fff;
  background: #484848;
  padding: 10px 0;
}

.footer-copyright p {
  text-align: center;
  font-size: 1.1rem;
  margin: 0;
  line-height: 1.6;
}

/* scroll suggestion */

.div_forh1{
  position:relative;
  width:100%;
  height:100vh;
}

.div_forh1 a{
  display:block;
  position:absolute;
  left:50%;
  -webkit-transform:translateX(-50%);
      -ms-transform:translateX(-50%);
          transform:translateX(-50%);
  bottom:70px;
  height:48px;
  width:30px;
}

.div_forh1 a span.for_relative{
  display:block;
  position:relative;
  top:0;
}

.div_forh1 a span.for_relative span{
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  opacity: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.div_forh1 a span.for_relative span:nth-of-type(1){
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.div_forh1 a span.for_relative span:nth-of-type(2){
  top: 16px;
  -webkit-animation-delay: .15s;
  animation-delay: .15s;
}
.div_forh1 a span.for_relative span:nth-of-type(3){
  top: 32px;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}

@-webkit-keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* scroll suggestion END*/

.avoid_scroll{
  overflow:hidden;
  height:100%;
  -ms-scroll-chaining:none;
      overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

@media screen and (min-width:961px){

  body{
    font-size:1.6rem;
  }

  .contents .logo{
    width:238px;
  }

  h2{
    font-size:5.5rem;
    padding-top:80px;
    margin:0 auto 50px;
  }

  h3{
   margin: 50px 0 20px 0;
  }

  #second_animation{
    padding-top: 50px;
  }

  .font_bold{
    font-size:2.2rem;
  }

  .capital_letter{
    font-size:6rem;
  }

  dd{
    font-size:1.6rem;
    margin-bottom: 40px;
  }

  dt{
    font-size:4rem;
    margin-bottom:40px;
    margin-top:40px;
  }

  dt span{
    font-size:1.6rem;
  }


  #nav-content ul li{
   font-size:5.2rem;
  }

  .font-small{
    font-size:1.4rem;
  }

  .number_weight{
    font-size:1.8rem;
  }

  ul.icon-section li{
  margin-right:24px;
  cursor:pointer;
  }

  ul.icon-section{
    bottom:20px;
  }

  .first p {
    text-align: left;
    font-size: 1.6rem;
  }

 .section_about_hardgate p{
   font-size:1.6rem;
 }

  .caution{
    text-align:center;
  }

  div.button {
    margin-top: 50px;
  }

  .section_about_hardgate div.img_area{
    margin-bottom: 50px;
  }

  .section_about_hardgate p{
    margin-bottom: 50px;
  }

  .for_height:before{
    margin-bottom: 70px;
  }

  .section_dj_live h3{
    font-size:4rem;
    margin-bottom:40px;
  }

  .section_dj_live div.button{
    margin-top: 50px;
}

  .guest_01{
    margin-bottom: 80px;
  }

  .max_contents{
    max-width:650px;
    margin:0 auto;
  }

  .contents{
    height:601px;
    background: url(../img/hero_pc.png) center center /cover no-repeat;
  }

  .goods div.button {
    margin: 50px 0 80px 0;
  }

}

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

#nav-content ul li{
 margin: 30px 0 0 0;
 font-size: 2.5rem;
}

#nav-content ul li:first-of-type{
 margin-top: 60px;
}

div.button a{
 font-size:1.4rem;
}

.goods p{
 font-size:1.4rem;
}

}