@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

body {
    background-color: #FFFFFF;
    /*font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;*/
    font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

* {
    color: #333333;
}

/*.box_news {
    background-color: #996633;
    color: #F8EDDC;
}*/

/* margin追加クラス */
/*== margin-top ==*/
.margin-t-0 { margin-top:0 }
.margin-t-5 { margin-top:5px }
.margin-t-10 { margin-top:10px }
.margin-t-15 { margin-top:15px }
.margin-t-20 { margin-top:20px }
.margin-t-25 { margin-top:25px }
.margin-t-30 { margin-top:30px }

/*== margin-left ==*/
.margin-l-0 { margin-left:0 }
.margin-l-5 { margin-left:5px }
.margin-l-10 { margin-left:10px }
.margin-l-15 { margin-left:15px }
.margin-l-20 { margin-left:20px }
.margin-l-25 { margin-left:25px }
.margin-l-30 { margin-left:30px }

/*== margin-right ==*/
.margin-r-0 { margin-right:0 }
.margin-r-5 { margin-right:5px }
.margin-r-10 { margin-right:10px }
.margin-r-15 { margin-right:15px }
.margin-r-20 { margin-right:20px }
.margin-r-25 { margin-right:25px }
.margin-r-30 { margin-right:30px }

/*== margin-bottom ==*/
.margin-b-0 { margin-bottom:0 }
.margin-b-5 { margin-bottom:5px }
.margin-b-10 { margin-bottom:10px }
.margin-b-15 { margin-bottom:15px }
.margin-b-20 { margin-bottom:20px }
.margin-b-25 { margin-bottom:25px }
.margin-b-30 { margin-bottom:30px }

/* padding追加クラス */
/*== padding-top ==*/
.padding-t-0 { padding-top:0 }
.padding-t-5 { padding-top:5px }
.padding-t-10 { padding-top:10px }
.padding-t-15 { padding-top:15px }
.padding-t-20 { padding-top:20px }
.padding-t-25 { padding-top:25px }
.padding-t-30 { padding-top:30px }

/*== padding-left ==*/
.padding-l-0 { padding-left:0 }
.padding-l-5 { padding-left:5px }
.padding-l-10 { padding-left:10px }
.padding-l-15 { padding-left:15px }
.padding-l-20 { padding-left:20px }
.padding-l-25 { padding-left:25px }
.padding-l-30 { padding-left:30px }

/*== margin-right ==*/
.padding-r-0 { padding-right:0 }
.padding-r-5 { padding-right:5px }
.padding-r-10 { padding-right:10px }
.padding-r-15 { padding-right:15px }
.padding-r-20 { padding-right:20px }
.padding-r-25 { padding-right:25px }
.padding-r-30 { padding-right:30px }

/*== padding-bottom ==*/
.padding-b-0 { padding-bottom:0 }
.padding-b-5 { padding-bottom:5px }
.padding-b-10 { padding-bottom:10px }
.padding-b-15 { padding-bottom:15px }
.padding-b-20 { padding-bottom:20px }
.padding-b-25 { padding-bottom:25px }
.padding-b-30 { padding-bottom:30px }

/* line-height */
.lh15 { line-height:1.5em }
.lh20 { line-height:2.0em }
.lh25 { line-height:2.5em }
.lh30 { line-height:3.0em }

.width-100 { width: 100%; margin: 0 auto; }
.width-90 { width: 90%; margin: 0 auto; }
.width-80 { width: 80%; margin: 0 auto; }
.width-70 { width: 70%; margin: 0 auto; }
.width-60 { width: 60%; margin: 0 auto; }


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

/*-------------------------------------------------
                  ヘッダー設定
--------------------------------------------------*/

.site_name h1 {
    /*margin: 0 0 0 40px;*/
    margin: 0;
}

.site_name h1 a {
    text-decoration: none;
}

.site_name p {
    /*margin-top: -5px;
    margin-left: 40px;*/
    margin-top: 0px;
}

.site_name p a {
    text-decoration: none;
}

h2 {
    text-align: center;
    font-size: 30px;
    margin-top: 50px;
    margin-bottom: 30px;

    display: inline-block;

    position: relative;
    padding: 0.25em 0;
}

h2:after {
    content: "";
    display: block;
    height: 3px;
    margin-top: 6px;
    /* background: -moz-linear-gradient(to right, #996633, #C2AF9B);
    background: -webkit-linear-gradient(to right, #996633, #C2AF9B);
    background: linear-gradient(to right, #996633, #C2AF9B); */
    background: #333333;
}

.sec_title {
    text-align: center;
}

/*-------------------------------------------------
                  トップ画像設定
--------------------------------------------------*/
.topimg {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}


/*-------------------------------------------------
                     新着情報設定
--------------------------------------------------*/
.box_news {
    width: 80%;
    margin: 0 auto;
}

.news dt {
    border-bottom: dashed 1px;
    padding: 0px 0px 4px 0px;
    font-weight: bold;
    font-size: 17px;
}

.news dd {
    /*border: solid 1px Silver;*/
    margin: 0px 0px 20px 0px;
    padding: 10px;
    font-size: 14px;
}

.news a {
    text-decoration: none;
}

/* read moreの設定 */
.hidden_box {
    margin: 2em 0;
    padding: 0;
}

.hidden_box label {
    padding: 15px;
    font-weight: bold;
    border: solid 1px #996633;
    cursor: pointer;
    transition: all .3s;
}

/* ボタンホバー時 */
.hidden_box label:hover {
    color: #F8EDDC;
    background-color: #996633;
}

/* チェックは見えなくする */
.hidden_box input {
    display: none;
}

/* 中身を非表示にしておく */
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/* クリックで中身表示 */
.hidden_box input:checked ~ .hidden_show {
    padding: 30px 0 0 0;
    height: auto;
    opacity: 1;
}



/*-------------------------------------------------
                  ライブスケジュール設定
--------------------------------------------------*/
.box_live {
    width: 80%;
    margin: 0 auto;
}

.new_live {
    color: #FF0000;
}

.live dt {
      border-bottom: dashed 1px;
      padding: 0px 0px 4px 0px;
      font-weight: bold;
      font-size: 17px;
}

.live dd {
      /*border: solid 1px Silver;*/
      margin: 0px 0px 60px 0px;
      padding: 10px;
      font-size: 14px;
      line-height: 22px;
}

.live dd a {
    font-weight: bold;
    text-decoration: none;
}


/*-------------------------------------------------
                     自己紹介設定
--------------------------------------------------*/
.box_bio {
    width: 80%;
    margin: 0 auto;
}

.biography {
    margin-bottom: 80px;
}

.biography p {
    margin-bottom: 25px;
}

/*.member_01 p {
    margin-bottom: -10px;
}*/

.member dt {
    border-bottom: dashed 1px;
    padding: 0px 0px 4px 0px;
    font-weight: bold;
    font-size: 17px;
}

.member dd {
    /*border: solid 1px Silver;*/
    margin: 0px 0px 30px 0px;
    padding: 10px;
    font-size: 14px;
    line-height: 22px;
}

/*-------------------------------------------------
                       音源設定
--------------------------------------------------*/
.box_disco {
    width: 80%;
    margin: 0 auto;
}

.disco_contents_01 dt {
      border-bottom: dashed 1px;
      padding: 0px 0px 4px 0px;
      font-weight: bold;
      font-size: 17px;
}

.disco_contents_01 dd {
        /*border: solid 1px Silver;*/
        margin: 0px 0px 30px 0px;
        padding: 10px;
        font-size: 14px;
        line-height: 20px;
}

.disco_contents_01 p {
        position: relative;
        line-height: 1.0;
        padding: 0.5em 0.5em 0.5em 1.8em;
        text-decoration: none;
        color: #FFFFFF;
        background: #996633;
        transition: .4s;
        text-decoration: none;
}

.disco_contents_01 a {
    text-decoration: none;
}

.disco_contents_01 p:before {   /*疑似要素*/
      font-family: FontAwesome;
      content: "\f0a9";
      position: absolute;
      left : 0.5em;     /*左端からのアイコンまでの距離*/
}

.disco_contents_01 p:hover {
        background: #00bcd4;
        color: white;
}

/*-------------------------------------------------
                        動画設定
--------------------------------------------------*/
.box_movie {
    width: 70%;
    margin: 0 auto;
}

.box_movie h4 {
    /* display: block; */
  /* z-index: 999;
  padding: auto auto auto auto; */
    margin-bottom: 15px;
    border-radius: 15px;
    width: 100%;
    height: 25px;
    background-color: #9FD6D2;
    color: #FFFFFF;
    padding-left: 10px;

}

.movie_01, .movie_02 {
    margin-bottom: 30px;
}

/*-------------------------------------------------
                      SNS設定
--------------------------------------------------*/
.box_sns {
    width: 70%;
    margin: 0 auto;
    /* border: dashed 1px #333333; */
    padding: 30px;
    border: dashed 1px #333333;Z
}

/* .sns_01, .sns_02, .sns_03, .sns_04 {
    padding: 30px;
    margin-bottom: 30px;
    border: dashed 1px #333333;Z
} */

/*-------------------------------------------------
                      連絡先設定
--------------------------------------------------*/
.box_contact {
    width: 80%;
    margin: 0 auto;
}

.contact dt {
      border-bottom: dashed 1px;
      padding: 0px 0px 4px 0px;
      font-weight: bold;
      font-size: 17px;
}

.contact dd {
      /*border: solid 1px Silver;*/
      margin: 0px 0px 30px 0px;
      padding: 10px;
      font-size: 14px;
}

.square_btn {
        position: relative;
        display: inline-block;
        font-weight: bold;
        padding: 1.0em 1.0em;
        text-decoration: none;
        color: #FFFFFF;
        background: #996633;
        transition: .4s;
}

.square_btn:hover {
        background: #00bcd4;
        color: white;
}


.box_footer {
        text-align: center;
        margin-top: 20px;
        padding-top: 15px;
        padding-bottom: 20px;
        border-top: 1pt dotted #838383;
}

/*-------------------------------------------------
                    上に戻るボタン設定
--------------------------------------------------*/

#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

#pageTop a {
  display: block;
  z-index: 999;
  padding: auto auto auto auto;
  border-radius: 15px;
  width: 85px;
  height: 25px;
  background-color: #9FD6D2;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

/*-------------------------------------------------
                    レスポンシブ設定
--------------------------------------------------*/

/* ############ 767px以下 ############ */
@media (max-width: 767px) {

    /* トグルボタン */
    #menubtn {
        padding: 6px 12px;
        border: solid 1.5px #996633;
        border-radius: 5px;
        background-color: #F8EDDC;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }

    #menubtn:hover {
        background: #efefef;
    }

    #menubtn:focus {
        outline: none;
    }

    #menubtn i {
        color: #996633;
        font-size: 20px;
    }

    #menubtn span {
        display: inline-block;
        text-indent: -9999px;
    }

    .logoimg {
        max-width: 45%;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    /* ナビゲーションの設定(縦並び) */
    .nav {
        display: none;
    }

    .nav ul {
        margin: 0;
        padding: 0 0 50px 0;
        list-style: none;
    }

    .nav li a {
        display: block;
        padding: 5px;
        color: #333333;
        font-size: 16px;
        text-decoration: none;
    }

    .nav li:first-child {
        border-top: dotted 1pt #996633;
    }

    .nav li {
        text-align: center;
        line-height: 40px;
        border-bottom: dotted 1pt #996633;
    }

    /*.nav li:nth-child(2n+1)
    {
        color: #F8EDDC !important;
        background-color: #996633;
    }*/

    /* マウスオーバ時 */
    .nav li a:hover {
        /* color: #F8EDDC; */
        color: #FFFFFF;
        background-color: #996633;
    }

    .box_bio {
        width: 100%;
        text-align: center;
    }

    .member {
        display: block;
        width: 30%;
        /* text-align: center; */
        margin: 0 auto;
    }

    .member dt {
        border-bottom: dashed 1px;
        padding: 0px 0px 4px 0px;
        font-weight: bold;
        font-size: 17px;
    }
    
    .member dd {
        /*border: solid 1px Silver;*/
        margin: 0px 0px 20px 0px;
        padding: 10px;
        font-size: 14px;
        line-height: 22px;
    }

    .box_movie {
        width: 80%;
    }

    .box_sns {
		width: 70%;
        overflow: hidden;
    }
    .box_sns iframe{
        /* 20pxの部分は埋め込んだタイムラインの左右に必要な余白の総計を記載 */
        width: calc(100vw - 20px)!important;
    }
}

/* ############ 768px以上 ############ */
@media (min-width: 768px) {

    .topimg {
        max-width: 80%;
        height: auto;
        vertical-align: bottom;
    }

    .logoimg {
        max-width: 60%;
        height: auto;
        vertical-align: bottom;
        margin-bottom: 20px;
    }

    h2 {
        text-align: center;
        font-size: 30px;
    }

    /* 幅設定 */
    .box_news {
        width: 70%;
        margin: 0 auto;
    }
    .box_live {
        width: 70%;
        margin: 0 auto;
    }
    .box_bio {
        width: 80%;
        margin: 0 auto;
    }
    .box_disco {
        width: 75%;
        margin: 0 auto;
    }
    .box_movie {
        width: 60%;
        margin: 0 auto;
    }
    .box_sns {
        width: 50%;
        margin: 0 auto;
    }
    .box_contact {
        width: 70%;
        margin: 0 auto;
    }

    /* ヘッダーの設定 */
    /*.header:after {
        content: "";
        display: block;
        clear: both;
    }
    .site_name {
        float: left;
        width: auto;
        margin-top: -5px;
        margin-left: 60px;
    }
    .nav {
        margin-right: 80px;
        float: right;
        width: auto;
    }*/
    .nav {
        text-align: center;
    }
    .nav ul {
        display: inline-block;
    }
    .nav li {
        float: left;
    }
    .nav li + li {
        /*margin-left: 25px;*/
        /*border-left: 1px dotted #333;*/
        padding: 0 5px 0 5px;
    }

    .site_name h1{
        font-size: 50px;
    }

    /* ナビゲーションの設定(横並び) */
    /* トグルボタンを非表示に */
    #menubtn {
        display: none;
    }

    #nav {
        display: block !important
    }

    .nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nav li a {
        display: block;
        padding: 20px 15px;
        margin-bottom: 20px;
        color: #333333;
        font-size: 15px;
        font-weight: bold;
        text-decoration: none;
        transition: all .5s;
    }
    /* マウスオーバ時 */
    .nav li a:hover {
        /* color: #FFFFFF;
        background-color: #996633; */
        color: #996633;
    }

    .nav ul:after {
        content: "";
        display: block;
        clear: both;
    }
    /* ナビゲーション横並び */
    .nav li {
        float: left;
        width: auto;
    }


    /* 動画を横に並べる設定 */
    /*.box_movie:after {
        content: "";
        display: block;
        clear: both;
    }*/

    .movie_01, .movie_02 {
        /*float: left;
        width: 50%;*/
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        overflow: hidden;
        margin-bottom: 50px;
    }

    .movie_01 iframe, .movie_02 iframe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .box_member_photo {
        display: inline-block;
        vertical-align: top;
        width: 75%;
    }

    .box_member {
        display: inline-block;
        vertical-align: top;
        width: 20%;
    }

    /* メンバーを横に並べる設定 */
    /* .box_member:after {
        content: "";
        display: block;
        clear: both;
    } */

    /* .member_01, .member_02, .member_03, .member_04 {
        float: left;
        width: 25%;
    } */

    /* .sns_01, .sns_02, .sns_03, .sns_04 {
        display: inline-block;
        width; 50%;
    } */

    /* CD情報を横に並べる設定 */
    .box_disco:after {
        content: "";
        display: block;
        clear: both;
    }

    .disco_img_01 {
        float: left;
        width: 35%;
        margin: 20px 0 0 80px;
    }

    .disco_contents_01 {
        float: right;
        width: 35%;
        padding-right: 80px;
    }

    .disco_contents_01 dd {
        line-height: 30px;
    }
}