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

    /* ================== COMMON ================== */
    .sm{
        display: block;
    }
    
    .md{
        display: none;
    }
    
    #headerSP{
        display:block;
        height:36px;
        background:#000;
        position:relative;
    }

    #headerSP.fixed{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        z-index:99999;
    }
    
    #ghost-headerSP.shown{
        display: block;
        height: 36px;
    }
    
    h2 {
        font-size: 20px;
    }
    
    #mainvisual .wrap .rightcol{
        display: none !important;
    }
    
    #share .leftcol{
        float: left !important;
        width: auto !important;
    }
    #share .rightcol{
        float: right !important;
        width: auto !important;
        padding: 0;
    }
    
    #admission{
        width:150px;
        position:absolute;
        top:50px;
        right:14px;
    }
    
    #globalnavi{
        display:none;
    }
    
    .SNS-SP{
        display:block;
        background:##d597bf;
        text-align:center;
    }
    .SNS-SP a {
        display: inline-block;
        margin: 10px 8px;
    }
    .SNS-SP img{
        height: 50px;
    }

    .logoSP{
        float:left;
    }

    .btnMenu{
        float:right;
        margin-right:7px;
        cursor:pointer;
    }
    .logoSP img,
    .btnMenu img{
        height:36px;
    }
    
    .navbar-collapse{
        display:block;
        background-color: rgba(0,0,0,0.8);
        position:absolute;
        top:36px;
        width:100%;
        z-index:999;
        display:none;
    }
    .navbar-collapse li{
        padding-bottom:2px;
    }
    .navbar-collapse li:last-child{
        padding-bottom:0;
        background:none;
    }
    .navbar-collapse a{
        color: #fff;
        text-decoration: none;
        font-size: 14px;
        display: block;
        padding: 6px 0 7px 30px;
        font-family: 'Varela', sans-serif;
        letter-spacing: 2px;
    }
    
    #share {
        width: 150px;
        position: absolute;
        top: 50px;
        left: 14px;
    }
    
    #mainvisual{
        width:100% !important;
        /* padding:170px 0 0 !important; */
        padding: 140px 0 0 !important;
    }
    
    h1{
        padding: 0 30px 0 20px;
    }
    h1 img,
    #secondclass h1 img{
        display:block;
        margin:20px auto;
        height:auto;
    }
    
    #firstclass h1 img{
        margin: 0px auto;
    }
    h1 span{
        display:block;
        padding: 0 40px;
        margin-left: 0;
    }
    h1 span img{
        height:auto;
    }
    
    #mainvisual .wrap {
        width:100%;
        margin: 20px 0 0 0;
        padding:0;
    }
    #mainvisual .wrap .leftcol {
        margin:0 0 25px 0;
        width:100% !important;
        float:none !important;
        padding:0 35px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    #mainvisual .wrap .rightcol {
        display:none;
    }
    
    .banner_streaming{
        width: 90%;
        margin: auto;
        height: auto;
    }
    
    .wrap{
        width: 90%;
        margin: 0;
        padding: 6% 5% 3%;
    }

    .rightcol, .leftcol, .centercol{
        display: block !important;
        float: none !important;
        width: 100% !important;
    }
    .rightcol {
        /* border-bottom: 1px solid #808080; */
        padding: 0 5%;
        width: 90% !important;
    }
    #artists .rightcol {
        width: 100% !important;
        padding: 0;
    }
    table{
        width: 90% !important;
        margin: 0 auto !important;
    }
    
    #footersns .facebook,
    #footersns .twitter,
    #footersns .instagram
     {
        margin: 0;
        float: none;
        display: inline-block;
        width: 50px;
        height: 50px;
    }
    #footersns {
        width: 100%;
    }
    #footersns .facebook,
    #footersns .twitter {
        margin-right: 15px;
    }
    
    #footer p{
        /* font-size: 3.5vmin; */
        line-height: 1.5;
    }
    
    #footer p .copyright{
        display: block;
        /* font-size: 2.2vmin; */
        margin-top: 15px;
    }

    /* ================== HOME ================== */
    #home .facebook{
        display: none;
    }
    
    #home .box{
        /* padding: 10px; */
        padding: 9px 19px;
    }
    
    #home table,
    #home .tit_style01,
    #waterras_list01,
    #waterras_list01 li,
    #waterras_list01 li a{
        width: 100%;
    }
    #home .ul_style01 {
        width: 95%;
    }
    #home table {
        width: 100% !important;
    }
    
    #waterras_list01 img{
        width: 90%;
        margin-top: 20px;
    }
    
    #news .box{
        /*margin: 0px 0px 40px 0px;*/
        padding: 6%;
    }
    
    #home table th, #home table td{
        display: block;
    }
    #home td img {
        margin-right:1%;
    }

    .video-container {
    position: inherit;
    padding-bottom: inherit;
    padding-top: inherit;
    height: 245px;
    }
    .video-container iframe {
    position: inherit;
    top: inherit;
    left: inherit;
    }

    /* ================== ABOUT ================== */
    #about .leftcol, #about .rightcol,
    #about .leftcol img, #about .rightcol img,
    #about #pointgreen .rightcol{
        width: 100% !important;
    }
    #about .rightcol {
        margin-top:15%;
        padding: 0;
    }
    #about .leftcol img{
		width: 118px !important;
        /*margin-top: 10px;*/
    }
		
	#waterasusp img{
		width: 100% !important;
	}
	
	#about .leftcol{
		display: none;
	}
    
    #about #pointgreen img{
        width: auto !important;
        display: block;
        margin: auto;
    }
	
    /* ================== PROGRAM ================== */

    #program .wrap {
        width: 100% !important;
        margin: 6% 0 0;
    }
    #program .tit_style01 {
        width: 90% !important;
        margin: 6% auto 0;
    }
    #program .tit_style01 span {
        display: block;
    }

    #program table font{
        display: block;
    }
    
    #program .ul_style01{
        padding: 20px 20px 0;
    }
    
    #program .ul_style01 li{
        margin-bottom: 10px;
    }
    
    #program .dl_style01 dt{
        line-height: 1;
        width: 100%;
        text-align: center;
        margin: 0;
        float: none;
        margin-bottom: 10px;
    }
    
    #program h3{
        margin: 10px 0 5px;
        text-align: left;
    }
    
    #program table{
        width: 90% !important;
        margin: auto;
        margin-bottom: 10px !important;
    }
    
    #program p{
        padding-left: 0;
        margin: 0 0 8%;
    }
    
    /* ================== ARTISTS ================== */
    #artists .topleftcol,
    #artists .secondcol, #artists .thirdcol, #artists .fourthcol{
        float: none;
        width: 90%;
        margin: 0 5%;
        padding: 0 !important;
    }
    #artists .wrap {
        width: 100%;
        margin: 0;
        padding: 0 !important;
    }
    #artists .centercol{
        margin: 0;
        padding: 0;
    }
    
    #partner .wrap {
        width: 100%;
        margin: 0;
    }
    #partner .rightcol {
        padding: 0;
        width: 100% !important;
        border-bottom: 1px solid #808080; */
    }
    #artists .topleftcol,
    #artists .toprightcol {
        width: 100%;
        margin: 0;
    }
    #artists .firstcol {
        width: 100%;
        margin: 0;
        float: none;
        padding: 0 !important;
    }
    
    #artists .wrap img{
        margin: auto;
        display: block;
        margin-top: 6%;
        width: 90%;
    }
    
    #artists h3.mc,
    #artists .secondcol{
        width: 100%;
        padding: 0 !important;
        margin: 0;
    }
    #artists .secondcol {
        margin-bottom: 10%;
    }
    #artists .secondcol p {
        margin-bottom: 5%;
    }
    #artists .secondcol h4 {
        padding: 0 0 2% !important;        
        margin: -4% auto 2%;
    }
    
    #artists p,
    #artists h3{
        padding: 0 5% !important;
        margin: 0;
    }
    
    #artists .tit_style01{
        margin: 0 auto;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        /* padding-left: 10px; */
        text-align: left;
        width: 90%;
    }
    
    #artists .date{
        padding-top: 5% !important;
        font-size: 1.3em;
    }
    
    #artists h3{
        font-size: 1.2em !important;
        padding: 3% 5% 8% !important;
        height: inherit !important;
        min-height: inherit !important;
        line-height: normal;
    }
    #artists .secondcol h3 {
        font-size: 1em !important;
        padding: 3% 5% 0 !important;
    }
    
    #artists h4{
        /* text-align: center; */
        font-size: 1em;
        margin: 0 auto;
        padding: 8% 0 2%;
        /* padding-bottom: 10px; */
        width: 90%;
    }
    
    #artists h3.mc{
        margin-top: 0 !important;
        /* padding-top: 30px !important; */
        /* padding-bottom: 30px !important; */
        font-size: 1.5em !important;
        padding: 3% 0 !important;
    }
    #artists h3.mc strong {
        width: 90%;
        display: block;
        margin: 0 auto;
    }
    
    #artists p.member {
        width: 90%;
        margin: 0 auto;
        /* border-bottom: 1px solid grey; */
        padding: 10px 0 !important;
    }
    #artists p.officialweb {
        width: 100%;
        border-bottom: 1px solid grey;
        padding-bottom: 10% !important;
        padding-top: 12px !important;
    }
    #artists p.officialweb.last {
        border-bottom: none;
    }
    /*one people*/
    #artists .onecols .toponecol img{
        margin: 8% auto 0;
    }
    #artists .onecols strong{
        font-size: 20px;
        height: inherit !important;
        min-height: inherit !important;
        line-height: normal;
    }
    #artists .onecols p,
    #artists .onecols .tit_style01,
    #artists .onecols h4{
        margin: 0 auto;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        /* padding-left: 10px; */
        text-align: left;
        width: 90%;
        font-size: 12px;
        line-height: 20px;
    }
    #artists .onecols p.member,
    #artists .onecols p.officialweb{
        font-size: 12px;
        line-height: 20px;
    }
    #artists .onecols .date{
        padding-top: 5% !important;
        font-size: 1.3em;
    }
    /*four people*/
    #artists .fourcols .leftcol,
    #artists .fourcols .centercol,
    #artists .fourcols .rightcol{
        width: 180px;
    }
    /*add 0330*/
    
    /* ================== PARTNER ================== */
    #partner #subnavi p{
        color: transparent;
        line-height: 0;
    }
    
    #partner #subnavi a{
	display: block;
	height: 50px;
	line-height: 50px;
	background-color:#8a7db9;
	border-top: 1px solid grey;
	text-decoration: none;
    }
    
    #partner #subnavi a:last-child{
        border-bottom: 1px solid grey;
    }
    
    #partner .pa_list{
        /*padding-left: 5px;*/
        /* text-align: center; */
        /* width: 100%; */
    }
    
    #partner .pa_list li{
        /* width: 32.2%; */
        width: 30%;
        display: inline-block;
        float: none;
    }
    
    #partner .pa_list li a{
        width: 100%;
        height: auto;
    }
    
    #partner .centercol {
        margin-left: 0px;
    }
    
    #partner td{
        padding: 10px;
    }
    #partner .centercol tr:last-child td,
    #partner .rightcol tr:last-child td {
        border-bottom: none;
    }
    
    #partner .logoindex{
        text-align: center;
        margin: 0 auto;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 90%;
    }
    
    #partner .logoindex a{
        width: 30%;
        display: inline-block;
        float: none;
        margin: 0px 2px;
    }
    
    #partner .logoindex img{
        width: 100% !important;
        margin: 2px;
    }
    
    #partner .logoindex div.empty{
        width: 30%;
        display: inline-block;
        margin: 2px;
    }
    
    #partner #instruments .centercol table tr:first-child td,
    #partner #instruments .centercol table{
        border-top: none;
    }
    
    #partner #instruments .centercol table tr:last-child td,
    #partner #instruments .rightcol table tr:last-child td {
        border-bottom: none;
    }
    
    #partner .rightcol table{
        border-top: none;
    }
    
    #partner #jazzclubs td{
        display: block;
        padding: 0 10px;
    }
    
    #partner #jazzclubs td:first-child{
        border-bottom: none;
        padding: 10px 10px 0;
    }
    #partner #jazzclubs td:last-child {
        padding: 0 10px 10px;
    }
        
    #partner #jazzclubs td:nth-child(2){
        border: none;
    }
    
    /* ================== FAQ ================== */
    #faq .box:first-child{
        /* margin-top: 30px; */
    }
    #faq .box {
        
padding: 6%;
    }
    
    /* ================== ACCESS ================== */
    #program iframe{
        width: 90%;
        margin: auto;
        margin-top: 20px;
        display: block;
        height: 250px;
    }
    
    #program .box{
        padding: 0;
        width: 90%;
        margin: auto;
        border-width: 1px;
    }
    
    #program .first-floor,
    #program .other-floors{
        padding: 0;
        width: 90%;
        margin: auto;
        margin-top: 10px;
    }
    
    #program .first-floor{
        display: block;
    }
    #program .show-other-floors {
        font-family:"Helvetica Neue",Helvetica,Arial,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ", Meiryo,"MS ゴシック","MS Gothic",sans-serif;
        /* text-align: left; */
        /* margin-left: 5%; */
        font-weight: bold;
        text-decoration: underline;
    }

    #ghost-header.shown {
        display: none;
    }
    #contents {
        overflow-x: hidden;
    }
    #program th {
        width: 20%;
    }

    #program .cont {
        padding: 0;
        margin-top: 10%;
    }
    #program .cont .cont_ttl {
        margin: 0;
        padding: 6% 0;
        font-family: "Helvetica Neue",Helvetica,Arial,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ", Meiryo,"MS ゴシック","MS Gothic",sans-serif;
    }
    #program .cont .cont_detail .single,
    #program .cont .cont_detail .double {
        width: 80%;
        height: inherit;
        margin: 0 5% 1.5%;
        padding: 5%;
    }
    #program .cont .cont_detail .cont_left {
        width: initial;
        margin-right: 0;
    }
    #program .cont .cont_detail .link a {
        margin-left: 0;
        display: block;
    }
    #program .cont .cont_detail .cont_right {
        width: 100%;
        margin-top: 5%;
    }
    #program .cont .cont_detail .cont_right img {
        width: 100%;
    }

    #program .cont .cont_detail .cont_box01 .ttl02,
    #program .cont .cont_detail .cont_box01 .date {
        height: inherit;
    }

    #program .cont .cont_detail .cont_box01 img {
        position: inherit;
        width: 100%;
        margin-top: 5%;
    }
    #program .cont .cont_bnr .single,
    #program .cont .cont_bnr li {
        width: 90%;
        margin: 0 5% 1.5%;
    }
    #program .cont .cont_bnr {
        padding: 10% 0 5%;
    }

    #header {
        z-index: 10000 !important;
    }

    .SNS-SP.top {
        margin-top: 10px;
    }
    #artists #footer p {
        padding: 20px 0 20px 0 !important;
    }
    #program .other-floors img{
        display: block!important;
    }
	
	#waterasupc{
		display: none;
	}
	
	#waterasusp{
		display:block;
	}
	
	
#home table img{
	margin:-bottom:5px;
}
	
}

@media screen and (max-width: 479px) {
    #admission{
        width: 80px;
        position:absolute;
        top:50px;
        right:14px;
    }
    #share{
        position:absolute;
        top:50px;
        left:14px;
    }
    #mainvisual {
        margin: 0 auto !important;
        padding: 80px 0 0 !important;
    }

    #artists p {
        line-height:24px;
        font-weight:bold;
    }
	
	#waterasupc{
		display: none;
	}
	
	#waterasusp{
		display:block;
	}
	
	
#home table img{
	margin:-bottom:5px;
}
	
}