@charset "UTF-8";

body {
  position: relative;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  color: white;
  background: black; }
  
.mt1 { margin-top: 1%; }
.mt2 { margin-top: 2%; }
.mt3 { margin-top: 3%; }
.mt4 { margin-top: 4%; }
.mt5 { margin-top: 5%; }
.mt6 { margin-top: 6%; }
.mt7 { margin-top: 7%; }
.mt8 { margin-top: 8%; }
.mt9 { margin-top: 9%; }
.mt10 { margin-top: 10%; }
.mt15 { margin-top: 15%; }
.mt20 { margin-top: 20%; }

.b { font-weight: bold; }
.center { text-align: center; }
.red { color: red; }

img { 
   width: 100%;
   vertical-align: top;
   display: block; }

a { 
   text-decoration: none;
   color: white; } 

.nc { pointer-events: none; }

/* MOBILE */
@media screen and (max-width: 768px) {

.pc { display: none; }

p {
   font-size: 3.6vw;
   line-height: 5.8vw; }

.bg-hack {
   opacity: 0.3;
    z-index                 : -1;
    background-color        : #cccccc;
    background-image        : url('img/back.jpg');
    background-repeat       : no-repeat;
    background-size         : 100% auto;
    position                : fixed;
    top                     : 0;
    left                    : 0;
    right                   : 0;
    bottom                  : 0;
}  

/** xxxxxxxxxxxxxxxxxx アコーディオン xxxxxxxxxxxxxxxxxxxxxxx **/

.accordion-container .accordion-title {
  position: relative;
  padding-top: 0%;
  margin-top: 3%;
  color: white;
  background: rgba(0,0,0,0);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  margin-left: 0%;
  font-size: 3.4vw;
  letter-spacing: 1vw;
  text-align: left;
  cursor: pointer;
}
.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-title.open { 
opacity: 1;
}

.accordion-container .accordion-title::before {
  position: absolute;
  content: "";
  top: 60%;
  right: 7%;
  width: 0%;
  height: 0%;
  background-size: cover;
  background-repeat: no-repeat;
  transform: rotate(0deg);
  transform-origin: 0% 0%;
  font-size: 4vw;
  transition: all .3s ease-in-out;
}

.accordion-container .accordion-title.open::before {
    content: "";
}

.accordion-container .accordion-title.open::after {

}

.accordion-content {
  display: none;
  width: 100%;
  background: rgba(0,0,0,0.);
  color: white; 
}

.accordion-container {
  width: 100%;
  margin: 0 auto;
}

.aco_hr {
   margin-top: 5%;
   margin-bottom: 5%; }
   
input {
-webkit-appearance: none;
}


/*　ハンバーガーメニューボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right : 0;
  top   : 0;
  width : 13vw;
  height: 13vw;
  cursor: pointer;
  text-align: center;
  background: black;
}
.hamburger span {
  display : block;
  position: absolute;
  width   :  7vw;
  height  : 0.4vw ;
  left    : 3vw;
  background : white;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 4vw;
}
.hamburger span:nth-child(2) {
  top: 6.3vw;
}
.hamburger span:nth-child(3) {
  top: 8.5vw;
}

/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 6.3vw;
  left: 3vw;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 6.3vw;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

/* メニュー背景　*/
nav.globalMenuSp {
  position: fixed;
  z-index : 2;
  top  : 0;
  left : 0;
  color: #fff;
  background: rgba( 0,0,0,0.9 );
  text-align: center;
  width: 100%;
  height: 200vw;
  transform: translateX(-100%);
  transition: all 0.6s;
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}

/*
nav.globalMenuSp ul li:hover{
  background: gray;
}
*/

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 0;
  text-decoration :none;
}

/* クリックでjQueryで追加・削除 */
nav.globalMenuSp.active {
  opacity: 100;
  display: block;
   transform: translateX(0%);
}

.m_pad {
   height: 8vw; }

.sp_menu p {
   font-size: 4.6vw; }
      
.mm_hr {
   width: 80%;
   margin-left: 10%;
   margin-top: 5%;
   padding-bottom: 5%;
   border-top: solid 1px gray; }
   



/* -------------------------------------------------------------------------- */

.youtube {
  width: 94%;
  margin-top: 3%;
  margin-left: 3%;
  aspect-ratio: 16 / 9;
}

.youtube iframe {
  width: 100%;
  height: 100%;
}

.video_title {
   margin-top: 3%;
   margin-left: 3%;
   margin-bottom: 3%; }

.top_logo {
   width: 60%;
   margin-left: 3%;
   padding-top: 3%; }
   
.top_pad {
   height: 10vw; }
   
.box {
   width: 90%;
   margin-left: 5%; 
   margin-bottom: 10%;
   border: solid 1px white; }
   
.box2 {
   width: 90%;
   margin-left: 5%; 
   margin-bottom: 5%;
   border: solid 1px white; }
   
.in_box {
   width: 94%;
   margin-left: 3%;
   margin-top: 3%;
   margin-bottom: 3%; }
   
.box_title {
   font-size: 5vw; 
   letter-spacing: 1.6vw; }
   
.box_hr {
   margin-top: 3%;
   margin-bottom: 3%; }
   
.news_hr {
   margin-top: 5%;
   margin-bottom: 5%;
   border-top: dotted 2px white; }
   
.news_box {
   margin-top: 0%; }
   
.news_box h2 {
   font-size: 3.6vw;
   line-height: 6vw;}
   
.news_box p {
    margin-top: 3%; }
   
.a_name {
   font-size: 4.6vw;
   margin-top: 5%;
   margin-bottom: 1%; }
   
.a_radio {
   font-size: 4vw;
   margin-top: 1%;
   margin-bottom: 1%; }
   
.a_mail {
   font-size: 4.6vw;
   margin-top: 5%;
   margin-bottom: 6%; }
   
.a_mail2 {
   font-size: 3vw;
   margin-top: 0%;
   margin-bottom: 0%; }

.bottom_pad {
   height: 10vw; }
   
.bottom_pad2 {
   height: 28vw; }

.footer {
   background: rgba(0,0,0,0.6); 
   text-align: center;
   font-size: 3.3vw; }  
   
.footer p {
   padding-top: 2%;
   padding-bottom: 2%; }
   
/* -------------------------------- LIVE ------------------------------------------- */

.top_logo2 {
   width: 40%;
   margin-left: 3%;
   padding-top: 3%; }

.sub_pad {
   height: 5vw; }

.l_title {
   width: 60%;
   margin-left: 20%;
   padding-top: 5%;
   margin-bottom: 3%; }

.l_h4 {
   font-size: 4.6vw; }

.flyer {
   margin-top: 5%;
   width: 50%; }
   
.my {
   font-size: 3.8vw;
   font-weight: bold;
   text-align: center;
   padding-bottom: 2%; }
   
/* -------------------------------- PROFILE ------------------------------------------- */

.prof_box {
   margin-top: 5%; }
   
.prof_box p {
   margin-top: 5%; }
   
/* -------------------------------- RADIO ------------------------------------------- */

.radio_box {
   margin-top: 5%;
   width: 100%; }
   
.radio_left {
   width: 30%;
   display: inline-block;
   vertical-align: top; }

.radio_right {
   width: 60%;
   margin-left: 5%;
   display: inline-block;
   vertical-align: top; }
   
/* -------------------------------- GOODS ------------------------------------------- */

.goods_box {
   margin-top: 0%;
   width: 100%; }
   
.goods_left {
   width: 30%;
   display: inline-block;
   vertical-align: top; }

.goods_right {
   width: 60%;
   margin-left: 5%;
   display: inline-block;
   vertical-align: top; }
   
.goods_c p {
   margin-bottom: 5%; }
 
   
.ld {
   font-weight: bold;
   font-size: 4.6vw; }  

}