body{
    margin: 0 auto;
    padding: 0 ;
    font-family:'ヒラギノ明朝 ProN W6','HiraMinProN-W6';
}

.spacer30{
    height:30px;
}

#bg_image{
    background-image: url("../images/background.png");
    background-size: 100vw;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -101;
}

/* ================================================================== */
.sp-menu{
    margin-left: auto;
}

.sp-menu #open{
    font-size: 55px;
    cursor: pointer;
    position: fixed;
    right: 55px;
    top: 30px;
    z-index: 100;
    color: white;
}
.sp-menu #open.hide{
    display: none;
}

.overlay{
    position: fixed;
    top: -20px;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 150;
    background: rgba(172, 172, 172, 0.8);
    text-align: center;
    padding: 64px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s;
}

.overlay.show{
    opacity: 1;
    pointer-events: auto;
}

.overlay #close{
    position:absolute;
    top: 50px;
    right: 50px;
    font-size: 45px;
    cursor: pointer;
}

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

.overlay li{
    margin-top: 24px;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity .3s, transform .3s;
}

.overlay.show li{
    opacity: 1;
    transform: none;
}

.overlay.show li:nth-child(1){
    transition-delay: 0.1s;
}
.overlay.show li:nth-child(2){
    transition-delay: 0.2s;
}
.overlay.show li:nth-child(3){
    transition-delay: 0.3s;
}
.overlay.show li:nth-child(4){
    transition-delay: 0.4s;
}
.overlay.show li:nth-child(5){
    transition-delay: 0.5s;
}
.overlay.show li:nth-child(6){
    transition-delay: 0.6s;
}
.overlay.show li:nth-child(7){
    transition-delay: 0.7s;
}

.overlay a{
    width: 60vw;
    text-decoration: none;
    color: black;
    margin-top: 20px;
}
.overlay p{
    background-image: url("../images/magatama.png");
    background-repeat: no-repeat;
    background-size: 20%;
    background-position: 0 13%;
    border-bottom: 2px solid black;
    background-color: white;
    border-radius:5px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding: 5px 0;
}
.overlay img{
    width: 20px;
    height:20px;
}

.pc-menu{
    display: none;
}

@media (min-width: 600px){
    #header_top{
        display: flex;
        z-index: 300;
        background: black;
        height: 43px;
    }
    .pc-menu{
        width: 240px;
        position:fixed;
        right: 10px;
        top: 0;
        z-index: 100;
        display: block;
        margin-left: auto;
        background: #000000;
        border-radius: 10px;
    }
    .pc-menu ul{
        list-style: none;
        width: 180px;
        margin-left: -10px;
        padding: 0;
        text-align: left;
    }
    .pc-menu li{
        /* flex: 1; */
    }
    .pc-menu a{
        display: block;
        padding: 0 5px;
        line-height: 40px;
        text-align: center;
        text-decoration: none;
        color: rgb(255, 255, 255);
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    .pc-menu a:hover{
        /* background: #f39393; */
        /* color: rgb(255, 255, 255); */
        /* border-radius: 10px; */
        background-image: url("../images/magatama.png");
        background-repeat: no-repeat;
        background-size: 15%;
        background-position: 0 30%;
        transition: all 0.4s;
    }

    .sp-menu{
        display:none;
    }
}

/* ================================================================== */

.logout, .back{
    width: 100vw;
    background-color: black;
    color: white;
    padding: 10px 0;
}
.logout{
    margin-bottom: 30px;
}
.logout a, .back a{
    text-decoration: none;
    color: white;
}

.header{
    width: 100vw;
    margin: 0 auto;
    text-align: center;
}
.header img{
    width: 200px;
}

.header_hp{
    width: 100vw;
    margin: 0 auto;
    text-align: left;
}
.header_hp img{
    width: 150px;
    position: fixed;
    z-index: 100;
}

/* ==============================TOP========================== */
#video_cover{
    position: fixed;
    z-index: -99;
    width: 100vw;
    height: 100vh;
    opacity: 0.3;
    background-image:  linear-gradient(135deg, #000000 25%, transparent 25%), linear-gradient(225deg, #000000 25%, transparent 25%), linear-gradient(45deg, #000000 25%, transparent 25%), linear-gradient(315deg, #000000 25%, rgba(255, 255, 255,0) 25%);
    background-position:  4px 0, 4px 0, 0 0, 0 0;
    background-size: 4px 4px;
    background-repeat: repeat;
}

@media (min-width: 600px){
    #op_video{
        position: fixed;
        z-index: -100;
        background-size: cover;
    }
}
@media (max-width: 599px){
    #op_video{
        position: fixed;
        left: -50%;
        z-index: -100;
        height: 100%;
    }
}

#embark_container{
    position: relative;
    top: 100px;
    z-index: 10;
    height: 300px;
}

#embark_container h2{
    padding-top: 20px;
    padding-left: 40px;
    width: 60vw;
    border-bottom: 1px solid white;
    text-shadow: 1px 1px 1px white;
}

#embark_container h1{
    padding-top: 50px;
}
#embark_container p{
    margin-bottom: 150px;
}


#top_title{
    /* margin-top:0px; */
    height: 300px;
    position: relative;
    z-index: 10;
    color: white;
}

.read_more{
    position: relative;
    color: black;
    top:26px;
    left: -45px;
    opacity: 1;
    animation-name:read_more;
    animation-duration:0.9s;
    animation-timing-function:ease-in-out;
    animation-delay:0s;
    animation-iteration-count:200;
    animation-direction:alternate;
    animation-fill-mode:none;
    animation-play-state:running;
}
@keyframes read_more{
    0%{
        transform: translateX(3px);
        /* transform: rotate(-50deg); */
    }
    100%{
        transform: translateX(-3px);
        /* transform: rotate(50deg); */
    }
}

.top_koumoku{
    margin: 80px 0;
    background-color: white;
    background-image: url("../images/太鼓背景.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 1% 37%;
    height: 233px;
    border-radius: 10px;
}
.top_koumoku h2{
    text-align: center;
    font-size:20px;
    padding: 5px 0;
    margin: 0 auto;
    /* padding-left: 63px; */
    background-image: url("../images/magatama.png");
    background-repeat: no-repeat;
    background-size: 7%;
    background-position: 10% 39%;
    /* background-color: white; */
    /* border-top: 1px solid black; */
    border-bottom: 1px solid black;
    width: 90vw;
}

.top_koumoku a{
    text-decoration: none;
    display:flex;
    width: 210px;
}
.top_koumoku a p{
    margin-top: 15px;
    margin-bottom: 30px;
    padding: 10px 0;
    padding-right: 30px;
    width: 160px;
    text-align: center;
    color: black;
    background:white;
    border-radius: 20px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

.box{
    margin: 0 auto;
    height: 180px;
    width: 90vw;
    padding-top: 10px;
    padding-bottom: 30px;
    padding-left: 120px;
    /* background-color: rgb(255, 255, 255); */
    color: rgb(0, 0, 0);
}

.about_us_box{
    background-image: url("../images/会とは.png");
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: -45% 23%;
}

.music_box{
    background-image: url("../images/kazuki3.png");
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: 5% 10%;
}

.news_box{
    background-image: url("../images/info用イメージ.png");
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: -30% 40%;
}

.nyukai_box{
    background-image: url("../images/初心者イラスト.png");
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: 5% 40%;
}

.access_box{
    background-image: url("../images/アクセスイメージ.png");
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: 5% 40%;
}

.member_box{
    background-image: url("../images/会員イメージ.png");
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: 6% 40%;
}


@media (min-width: 600px){
}
@media (max-width: 599px){

}

.feed{
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10pt;
    box-shadow: 5pt 5pt 10pt gray;
    overflow: scroll;
    overflow: hidden visible;
}

.main_container{
    margin: 0 auto;
    text-align:center;
}

.main_container h2{
    border-left: 10px solid red;
    background: white;
}

@media (min-width: 600px){
    .feed{
        font-size: 15pt;
        height: 500pt;
    }
    .container{
        display: flex;
        justify-content:center;
        margin: 0 30px;
    }
    .main_container{
        margin-right: 30px;
        /* flex:3; */
    }
    .main_container iframe{
        width: 50vw;
        height: 30vw;
    }
    .side-bar{
        /* flex: 1; */
    }
}
@media (max-width: 599px){
    .feed{
        font-size: 10pt;
        width: 90vw;
        height: 200pt;
    }
    .main_container iframe{
        /* width: 50vw; */
    }
}

.twitter{
    color: rgb(0, 183, 255);
    margin: 10px auto;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝太鼓保存会とは＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.spacer{
    height: 100px;
}

.hozonkai_toha{
    width: 90vw;
    margin: 0 auto;
    text-align: center;
    color: white;
}
.hozonkai_toha *{
    margin: 10px auto;
}
.hozonkai_toha img{
    width: 300px;
}

.daihyou{
    width: 90vw;
    margin: 0 auto;
    text-align: center;
    color: white;
}
.daihyou *{
    margin: 10px auto;

}
.daihyou img{
    width: 250px;
}

.keireki{
    width: 90vw;
    margin: 0 auto;
    text-align: center;
    color: white;
}
.keireki *{
    margin: 10px auto;
}
.keireki img{
    width: 300px;
}

.keireki ul{
    text-align: left;
}
.keireki li{
    padding: 10px 0;
}

.team{
    width: 90vw;
    margin: 0 auto;
    text-align: center;
    color: white;
}
.team img{
    width: 300px;
    margin-bottom: 25px;
}

.nova h2{
    margin-top: 20px;
    text-shadow: 1px 1px 2px rgb(179, 179, 179);
}
.nova h3{
    text-align: left;
    margin-top: 20px;
}

.yoshida_kazuki{
    display: flex;
}
.yoshida_kazuki img{
    flex: 1;
    width:100px;
    border-radius: 50%;
}
.yoshida_kazuki p{
    margin: 10px 0;
    flex: 1;
}

.katou_daisuke{
    margin-top:50px;
    display: flex;
}
.katou_daisuke img{
    flex: 1;
    width:100px;
    border-radius: 50%;
}
.katou_daisuke p{
    margin: 10px 0;
    flex: 1;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝演奏曲紹介＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.ensoukyoku_container{
    margin: 0 auto;
    width: 90vw;
    color: white;
}

.ensoukyoku_container iframe{
    width: 90vw;
    height: 50vw;
}

.ensoukyoku_container h2{
    margin-top: 20px;
}
.ensoukyoku_container p{
    margin-bottom: 20px;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝入会＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.nyukai{
    background-color: rgba(0, 0, 0,0.3);
}

.nyukai_container{
    margin: 0 auto;
    color: white;
    text-align: center;
    width: 90vw;
}
.nyukai_container img{
    width: 90vw;
}

.nyukai_container *{
    margin: 20px auto;
}
.nyukai_container p{
    margin-top: 20px;
    text-align: left;
}

.kousi_syokai{
    width: 90vw;
    color:white;
    margin: 0 auto;
    text-align: center;
}

.kousi_syokai img{
    width: 50vw;
}

.kousi_syokai *{
    margin-top: 20px;
}

.team_detail{
    text-align:center;
    color: white;
}
.team_detail *{
    margin: 20px auto;
}

.team .hiiro{
    background-color: rgb(255, 124, 146);
    color: white;
    padding: 5px 0;
    border-radius: 15px;
}
.team .hisui{
    background-color: rgb(216, 184, 0);
    color: white;
    padding: 5px 0;
    border-radius: 15px;
}
.team .hyuga{
    background-color: rgb(255, 0, 0);
    color: white;
    padding: 5px 0;
    border-radius: 15px;
}
.team .suiryu{
    background-color: rgb(132, 0, 255);
    color: white;
    padding: 5px 0;
    border-radius: 15px;
}
.team table tr{
    height: 50px;
}
.team table th{
    width: 100px;
}
.team table td{
    text-align: left;
}


.hiyou *{
    color: white;
    margin: 20px auto;
    text-align: center;
}
.hiyou table{
    border-collapse:separate;
    background-color:white;
}
.hiyou table tr{
    text-align: center;
}
.hiyou table th{
    color: black;
    width: 20vw;
}
.hiyou table td{
    color: black;
}

.rensyu_basyo{
    margin: 0 auto;
    text-align: center;
    color: white;
    width: 90vw;
}
.rensyu_basyo *{
    margin: 10px auto;
}
.rensyu_basyo iframe{
    border-style: none;
    width: 90vw;
    height: 50vw;
}

.kyoumi{
    width: 80vw;
    margin: 10px auto;
    text-align: center;
    color: white;
}
.kyoumi a{
    text-decoration: none;
    color: pink;
}
.kyoumi img{
    width:70vw;
    border-radius: 50%;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝お問い合わせ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.otoiawase{
    color:white;
    text-align: center;
    margin: 0 auto;
}
.otoiawase table{
    width: 90vw;
    text-align: center;
    margin: 0 auto;
}
.otoiawase *{
    margin: 10px auto;
}
.otoiawase td{
    text-align: center;
}
.button{
    width: 100px;
    border-radius: 10px;;
}

.name_nyuryoku{
    display:flex;
    justify-content: left;
}

.mail_send{
    width: 60vw;
    margin: 20px auto;
    text-align: center;
    color: white;
}
.mail_send *{
    margin-top: 20px;
}

.mail_send table{
    margin: 0 auto;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝会員ページ用CSS＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
.main{
    text-align: center;
}

.main table{
    width: 300px;
    margin: 0 auto;
}

.pankuzu{
    opacity: 0.4;
    background-color: white;
    font-family:'Times New Roman', Times, serif;
    line-height: 26px;
}

.pankuzu a{
    text-decoration: none;
    color:black;
}
.material-icons{
    width: 20px;
    line-height: 6px;
    position: relative;
    top:6px;
}

.koumoku_container{
    margin: 0 auto;
    text-align: center;
}

.koumoku_container a{
    text-decoration: none;
}
@media screen and (min-width: 501pt) {
    .koumoku{
        width: 30vw;
    }
}
@media screen and (max-width: 500pt) {
    .koumoku{
        width: 80vw;
    }
}
.koumoku{
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgb(255, 173, 173);
    margin: 10px auto;
    padding: 10px 0;
    background-image: url("../images/background.png");
    background-size:  100%;
    background-position: 0 15%;
    color: white;
    font-size:12px;
}

@media screen and (min-width: 501pt) {
    .gakuhu{
        width: 30vw;
    }
}
@media screen and (max-width: 500pt) {
    .gakuhu{
        width: 60vw;
    }
}
.gakuhu_container a{
    text-decoration: none;
}

.gakuhu{
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgb(255, 173, 173);
    margin: 10px auto;
    padding: 10px 0;
    background-image: url("../images/background.png");
    background-size:  100%;
    background-position: 0 15%;
    color: white;
}


@media screen and (min-width: 501pt) {
    .mohan_box{
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        margin: 0 auto;
    }
    .mohan{
        text-align: center;
        margin: 0 auto;
        width: 450px;
        height: 350px;
        font-size: 25px;
        color: white;
    }
    .mohan video{
        width: 400px;
        height: 270px;
    }
    .mohan_sinobue{
        margin: 0 auto;
        width: 450px;
        height: 200px;
        font-size: 25px;
    }
    .mohan iframe{
        width: 400px;
        height: 300px;
        border-radius: 10px;
    }
    audio{
        width: 450px;
    }
}
@media screen and (max-width: 500pt) {
    .mohan_box{
        text-align: center;
        margin: 0 auto;
    }
    .mohan{
        text-align: center;
        margin: 0 auto;
        width: 350px;
        height: 270px;
        font-size: 20px;
        color: white;
    }
    .mohan video{
        width: 300px;
        height: 190px;
    }
    .mohan_sinobue{
        margin: 0 auto;
        width: 350px;
        height: 150px;
        font-size: 20px;
        margin-bottom:20px;
    }
    .mohan iframe{
        width: 300px;
        height: 200px;
        border-radius: 10px;
    }
    audio{
        width: 350px;
    }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　Youtube演奏記録　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
@media screen and (min-width: 501pt) {
    .youtube_box{
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        margin: 0 auto;
    }
    .youtube{
        text-align: center;
        margin: 0 auto;
        width: 450px;
        height: 350px;
        font-size: 25px;
        color: white;
    }
    .youtube video{
        width: 400px;
        height: 270px;
    }
    .youtube_sinobue{
        margin: 0 auto;
        width: 450px;
        height: 200px;
        font-size: 25px;
    }
    .youtube iframe{
        width: 400px;
        height: 300px;
        border-radius: 10px;
    }
    audio{
        width: 450px;
    }
}
@media screen and (max-width: 500pt) {
    .youtube_box{
        text-align: center;
        margin: 0 auto;
    }
    .youtube{
        text-align: center;
        margin: 0 auto;
        width: 350px;
        height: 270px;
        font-size: 20px;
        color: white;
    }
    .youtube video{
        width: 300px;
        height: 190px;
    }
    .youtube_sinobue{
        margin: 0 auto;
        width: 350px;
        height: 150px;
        font-size: 20px;
        margin-bottom:20px;
    }
    .youtube iframe{
        width: 300px;
        height: 200px;
        border-radius: 10px;
    }
    audio{
        width: 350px;
    }
}

.mohan_container{
    margin: 15px auto;
}
.mohan_sinobue p{
    margin-top:5px;
    margin-bottom:5px;
    background-color:rgba(0, 0, 0,0.7);
    color: white;
    border-radius: 6px;
}
.youtube_container{
    margin: 15px auto;
}
.youtube{
    text-shadow: 2px 2px 4px gray;
}

.footer{
    position: relative;
    z-index: 100;
    background-color: black;
    color: white;
    text-align: center;
    padding: 50px;
}