@charset "utf-8";

/*---------------------------------------------
	Header
---------------------------------------------*/
#header {
   width: 100%;
   margin: 0;
   background: #671519;
   position:fixed;
   left:0px;
   top:0px;
   z-index: 99;
   /* border-bottom: 1px solid #f8d1b8; */
}
#header .inner {
  width: 1024px;
  margin: 0 auto;
}
.header_block {
   width: 930px;
   height: 100%;
   margin: 0 0 0 55px;
   padding: 15px 0 0;
   box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
.header_block a {
   color: #fff;
}
.header_block h1.logo {
   line-height: 0;
   margin: 15px 25px 13px 0;
   padding: 0;
}
.header_block h1.logo img {
   width: 79px;
}




.header_block .pc_nav_wrap {
   width: 820px;
}
.header_block .sp_nav_wrap {
   display: none;
}



.header_block .nav_top {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
.header_block .login_btn {
   height: 35px;
   line-height: 35px;
   padding: 0 15px 0;
   box-sizing: border-box;
   border: 1px solid #fff;
   transition: 0.3s;
}
.header_block .login_btn:hover {
  opacity: 0.7;
}
.header_block .login_btn a {
   font-size: 12px;
}
.header_block .login_btn.visibility {
  visibility: hidden;
}

.header_block .nav_btn_list {
  display: flex;
  gap: 15px;
}
.header_block .nav_btn {
   height: 35px;
   line-height: 35px;
   padding: 0 15px 0;
   box-sizing: border-box;
   border: 1px solid #fff;
   transition: 0.3s;
}
.header_block .nav_btn:hover {
  opacity: 0.7;
}
.header_block .nav_btn a {
   font-size: 12px;
}
.header_block .nav_btn.visibility {
  visibility: hidden;
}

.header_block .sns_list {
  padding-top: 6px;
}
.header_block .sns_list ul{
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.header_block .sns_list ul li {
  margin-right: 23px;
}
.header_block .sns_list ul li:last-of-type {
  margin-right: 0;
}
.header_block .sns_list ul li.insta_head_icon {
  width: 22px;
}
.header_block .sns_list ul li.tw_head_icon {
  width: 26px;
}
.header_block .sns_list ul li.line_head_icon {
  width: 24px;
}
.header_block .sns_list ul li.youtube_head_icon {
  width: 25px;
}
.header_block .sns_list ul li.fb_ballet_head_icon {
  width: 29px;
}
.header_block .sns_list ul li.fb_gospel_head_icon {
  width: 31px;
}
.header_block .sns_list ul li.fb_opera_head_icon {
  width: 38px;
}
.header_block .sns_list ul li.ecode_head_icon {
  width: 52px;
}

.header_block .sch {
   width: 255px;
   height: 35px;
   border: 1px solid #fff;
   box-sizing: border-box;
   background: #671519;
}
.header_block .sch input[type="text"] {
   font-size: 14px;
   width: 193px;
   height: 33px;
   padding: 0 8px;
   box-sizing: border-box;
   border: none;
   border-right: 1px solid #fff;
   outline: none;
   float: left;
   background: #671519;
   color: #fff;
}
.header_block .sch #searchform input[type="submit"] {
   width: 60px;
   height: 33px;
   /* padding: 7px 10px; */
   box-sizing: border-box;
   border: none;
   outline: none;
   float: right;
   background: #000;
   color: #fff;
   font-size: 20px;
   font-weight: 300;
   line-height: 33px;
}







/* nav */
nav {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 20px;
}
nav #main-menu > li {
  float: left;
  position: relative;


}
nav #main-menu > li > a {
  font-size: 13px;
  text-align: center;
  display: block;
  padding: 0 13px;
  border-right: 1px solid #fff;
  transition: 0.3s;
}
nav #main-menu > li > a:hover {
  opacity: 0.7;
}
nav #main-menu > li:nth-child(1) > a {
  border-left: 1px solid #fff;
}

nav #main-menu > li.down_menu  > a {
  padding: 0 26px 0 12px;
  background-image : url("../img/common/menu_arrow_pc.png");
   background-repeat: no-repeat;
   background-position: 90% center;
   margin-bottom: 15px
}

nav #sub-menu {
  position: absolute;
  background: transparent;
  overflow: hidden;
  height: 0px;
  transition: height .2s;
  -webkit-transition: height .2s;
  -moz-transition: height .2s;
  -o-transition: height .2s;
  margin-top: 2px;
}
nav #main-menu > li:hover .sub-menu01 {
  height: 150px;
}
nav #main-menu > li:hover .sub-menu02 {
  height: 115px;
}

nav #sub-menu > li {
  font-size: 14px;
  border: 1px solid #671519;
  background: rgba(103, 21, 25, .8);
  margin-bottom: 1px;
}
nav .sub-menu01 > li {
  width: 185px;
}
nav .sub-menu02 > li {
  width: 205px;
}
nav #sub-menu > li a {
  display: block;
  width: 100%;
  padding: 8px 10px 7px ;
  box-sizing: border-box;
}
nav #sub-menu > li a:hover {
  color: #671519;
  background: #e9967a;
}


.line {
  width: 100%;
  height: 2px;
  background: #f8d1b8;
  /* background: linear-gradient(90deg, #b49875, #b49875, #f9d6c2, #ffffff, #473711,#d2bfad); */
}


@media only screen and (max-width: 768px) {
   #header {
      /* border-bottom: 0.533vw solid #f8d1b8; */
   }
   #header .inner {
    width: 100%;
    margin: 0;
  }
   .header_block {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 4vw 4.6667vw 2.4vw;
      position: relative;
   }

   .header_block h1.logo {
      margin: 0;
   }
   .header_block h1.logo img {
      width: 12.9334vw;
   }



   .header_block .pc_nav_wrap {
    display: none;
    }

   .header_block .sp_nav_wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 75%;
   }

   .sp_sch {
      width: 6vw;
      text-align: center;
   }
   .sp_sch img {
      width: 5.8667vw;
   }
   .sp_menu {
      width: 10.0667vw;
      padding-left: 2.7333vw;
      text-align: center;
      margin-left: auto;
   }
   .sp_menu img {
      width: 8.8vw;
   }
   .header_block p {
      color: #fff;
      font-size: 2.5334vw;
   }


  .header_block .sns_list {
    padding-top: 1vw;
    width: 43vw
  }
  .header_block .sns_list ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .header_block .sns_list ul li.insta_head_icon {
    width: 8vw;
  }
  .header_block .sns_list ul li.line_head_icon {
    width: 9vw;
  }
  .header_block .sns_list ul li.youtube_head_icon {
    width: 10vw;
  }



   #modal-mask {
      display: none;
      width: 100%;
      height: 100%;
      background: rgba(13, 7, 4, .9);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10000;
   }
   #modal_sch_mask{
    display: none;
    width: 100%;
    height: 20%;
    background: #671519;
    color: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
 }


   #modal {
      display: none;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10001;
      box-sizing: border-box;
   }
   #modal .header_block {
    background: #671519;
   }
   #modal .header_block .sp_menu img {
    width: 6.6667vw;
    margin-top: 1.3333vw;
    }


   #modal .inner {
      text-align: left;
      overflow: scroll;
   }
   #modal ul > li {
      padding: 4vw 5.3333vw;
      border-bottom: 1px solid #373737;
      background: url("../img/common/menu_arrow_sp.png") no-repeat 4.6667vw 50%;
    background-size: 2.8vw;
    position: relative;
   }
   #modal ul > li.sp_down_menu {
     background: none;
     padding: 0;
   }
   #modal ul > li a{
      display: block;
      font-size: 5.3333vw;
      padding-left: 4.6667vw;
   }
   #modal ul > li.sp_down_menu > a{
    display: block;
    padding: 4vw 10vw;
 }

   #modal ul.accordion-content li {
    padding: 4vw 10.6vw;
    border-top: 1px solid #373737;
    background: #4b4b4b url("../img/common/menu_arrow_sp.png") no-repeat 10.6vw 50%;
  background-size: 2.8vw;
   }


.sp_down_menu .more_btn {
  width: 50px;
  height: 16vw;
  position: absolute;
  top: 0;
  right: 4.6667vw;
}
.sp_down_menu .more_btn span {
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/common/menu_arrow_down_sp.png") no-repeat 50% 50%;
  background-size: 6.4vw;
  transition: .5s;
}
.sp_down_menu .active .more_btn span {
  transform: rotate(180deg);
}

.line {
  width: 100%;
  height: 0.5333vw;
  background: #f8d1b8;
  /* background: linear-gradient(90deg, #b49875, #b49875, #f9d6c2, #ffffff, #473711,#d2bfad); */
}

}

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

  .sp_sch {
    width: 8vw;
 }
 .sp_menu {
    width: 13vw;
    padding-left: 4vw;
 }

 .company_wrap .ballet_img {
    bottom: 10vw;
    right: -10px;
  }

}