@media screen and (max-width: 640px) {
    #header-description{
        display: none;
    }
    
    .pc-only{
		display: none;
	}
	
	.sp-only{
		display: inline-block;
	}

    #wrap{
        position: relative;
        padding-bottom: 40px;
    }

    /*--開閉メニュー--*/
    #btn_s{
        display: block;
        position: fixed;
        right:15px;
        top:-13px;
        z-index: 15;
    }

    #panel-btn{
        display: inline-block;
        position: relative;
        width: 30px;
        height: 30px;
        margin: 20px 0 10px;
        background: transparent;
        z-index: 20;
    }
    #panel-btn-icon{
        display: block;
        position: absolute;
        top: 50%;
        left: 25%;
        width: 25px;
        height: 3px;
        margin: -1px 0 0 -7px;
        background: #e4007f;
        transition: .2s;
    }
    #panel-btn-icon:before, #panel-btn-icon:after{
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 25px;
        height: 3px;
        background: #e4007f;
        transition: .3s;
    }
    #panel-btn-icon:before{
        margin-top: -10px;
    }
    #panel-btn-icon:after{
        margin-top: 7px;
    }
    #panel-btn .close{
        background: transparent;
    }
    #panel-btn .close:before, #panel-btn .close:after{
        margin-top: 0;
    }
    #panel-btn .close:before{
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
    #panel-btn .close:after{
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
    }

    #header{
        background-image: none;
        padding-top: 45px;
    }

    #header_navi{
        position: fixed;
        background-color: rgba(255,255,255,0.9);
        height: 45px;
        width: 100%;
        z-index: 9;
    }

    #header_navi nav {
        position: relative;
        left: auto;
        width: 100%;
        top: auto;
        z-index: 12;
    }

    #header_navi nav ul li {
        display: block;
        margin-right: 0;
        vertical-align: top;
    }
    #header_navi nav ul li:first-child{
        padding-top: 45px;
    }

    #header_navi nav ul li a {
        display: block;
        width: 100%;
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        text-decoration: none;
        color: #e4007f;
        font-size: 22px;
        font-weight: bold;
        overflow: hidden;
        background: none;
        background-size: auto;
        -webkit-background-size: auto;
        letter-spacing: 0;
        text-align: left;
        padding-left: 15px;
    }

    #header_navi nav ul li.on a {
        height: auto;
    }

    #header_navi nav ul li a:hover {
        color: #ffb7de;
    }

    #header-inner{
        padding: 0;
    }
    #header_navi .line-height-adjust{
    	line-height: 1.7;
	}
	
	#header_navi nav ul li a{
		line-height: 1.7;
	}


    #header-content #header-name {
        position: fixed;
        width: 100%;
        font-size: 24px;
        line-height: 120%;
        float: none;
        margin-bottom: 0;
        text-align: center;
        padding-top: 15px;
        padding-left: 15px;
        z-index: 15;
        top:0;
    }

    #header-content .right_box{
        display: none;
    }

    #header_navi .header_sns{
        display:none;
    }

    #header_navi nav{
        height: 40px;
        overflow: hidden;
    }

    #header-name a{
        display: block;
        background: url("./img/mobile/logo_mob.png") left center no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        width: 215px;
        height: 18px;
    }

    #header-name img{
        display: none;

    }

    #latest_schedule {
        display: none;
    }

    #latest_schedule_mob {
        display: block;
    }

    #latest_schedule_mob .wrap {
        background-image:none;
        background-color: transparent;
        box-shadow: none;
        position: relative;
        z-index: 8;
        padding: 15px 15px 0px;
    }

    #latest_schedule_mob h2{
        font-size: 20px;
        font-weight: bold;
        color: #e4007f;
        text-align: center;
        margin-bottom: 0;
        padding-bottom: 0;
        line-height: 1.0;
    }

    #latest_schedule_mob .wrap .inner{
        background-color: #fff;
        padding: 15px 20px 7px;
        text-align: center;
    }

    #latest_schedule_mob .inner .arrow{
        left: 3px;
        width: 7px;
        height: 7px;
        border-top: 2px solid #e4007f;
        border-right: 2px solid #e4007f;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
        display: inline-block;
        font-size: 1px;
        position: relative;
        top:-4px;
    }

    #latest_schedule_mob .inner .arrow.active{
        left: 3px;
        width: 7px;
        height: 7px;
        border-bottom: 2px solid #e4007f;
        border-left: 2px solid #e4007f;
        border-top: none;
        border-right: none;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
        display: inline-block;
        position: relative;
        top:-4px;
    }

    #latest_schedule_mob .toggle{
        display: none;
        padding: 15px 0;
    }

    #latest_schedule_mob li {
        padding-bottom: 5px;
        list-style-type: none;
        text-align: left;
    }

    #latest_schedule_mob div.date {
        font-size: 12px;
        margin-bottom: 8px;
        line-height: 1.6;
    }

    #latest_schedule_mob p.title a {
        font-size: 14px;
        font-weight: bold;
        color: #e4007f;
        text-decoration: none;
    }

    #latest_schedule_mob p.title a:hover {
        text-decoration: underline;
    }

    #container {
        width: 100%;
        float: none;
        background-image:none;
    }

    #container-inner {
        width: 100%;
    }

    #content-inner{
        padding-top: 15px;
        padding-bottom: 0;
    }

    #content-inner #alpha {
        width: 100%;
        min-height: 0;
        float: none;
        left: 0;
        font-size: 14px;
        line-height: 1.6;
        background: none;
    }

    #content-inner #alpha-inner{
        background-color: #fff;
        background-image: url("img/mobile/content_head_mob.jpg");
        background-repeat: repeat-x;
        padding-top: 30px;
        padding-right: 15px;
        padding-left: 15px;
        padding-bottom: 25px;
    }

    #content-inner #beta {
        width: 100%;
        left: 0;
        float: none;
        font-size: 13px;
        margin-top: 30px;
        display: block;
    }

    #content-inner #beta-inner{
        background-color: #fff;
        background-image: url("img/mobile/content_head_mob.jpg");
        background-repeat: repeat-x;
        padding-top: 30px;
        padding-right: 15px;
        padding-left: 15px;
        padding-bottom:30px;
    }


    #ex_column {
        width: 100%;
        padding: 0;
        float: none;
    }

    #ex_column:after{
        content: "";
        display: table;
        clear: both;
    }

    #ex_column section{
        width: auto;
        float: none;
        margin-right: 0;
    }

    #ex_column #insta,
    #ex_column #youtube{
        margin-top: 0;
        padding: 15px;
    }

    #ex_column #youtube{
        padding-top: 0;
    }

    #ex_column #youtube iframe{
        max-height: 135px;
    }

    #container {
        float: none;
    }

    #insta .wrap,
    #youtube .wrap{
        z-index: 5;
        box-shadow: none;
    }

    #insta:before,
    #youtube:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        background: none;
        z-index: 0;
        left: 0;
        top: 0;
    }

    #insta:after,
    #youtube:after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        background: none;
        z-index: 0;
        left: 0;
        top: 0;
    }

    article img.size-large{
        height: auto !important;
    }

    h2.mob{
        line-height: 1.3;
    }

    h2.mob span strong span{
        color: #cccccc !important;
        font-size: 21px !important;
    }

    p.mob{
        line-height: 1.4;
    }

    p.mob span{
        font-size: 13px !important;
    }

    section.in_link{
        padding-bottom: 0px;
        margin-bottom: 25px;
        border-bottom: 1px dashed #ccc;
    }

    section.in_link ul li {
        float: none;
        margin-right: 0;
        width: 100%;
        border: none;
        list-style-type: none;
    }

    section.in_link ul li:last-child {
        margin-right: 0;
    }

    section.in_link ul li h3 {
        color: #e4007f;
        font-size: 18px;
        line-height: 1.2;
        padding: 0 0 10px;
        margin-bottom: 15px;
        font-weight: bold;
        border-bottom: 1px solid #cccccc;
    }

    section.in_link ul li img{
        float: left;
        width: 30%;
        margin-right:0;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    section.in_link ul li p.description {
        padding: 0;
        font-size: 13px;
        margin-top: -5px;
        float: right;
        width: 65%;
    }

    section.in_link ul li p.description br{
        display: none;
    }

    section.in_link ul li p.link {
        padding: 10px 0 25px;
        font-size: 13px;
        clear: both;
    }

    section.in_link ul li p.link a {
        display: block;
        background-color: #e4007f;
        text-align: center;
        font-size: 15px;
        font-weight: normal;
        padding: 4px 0;
        line-height: 1.5;
        color: #fff !important;
    }

    section.in_link ul li p.link a:hover {
        background-color: #999999;
        text-decoration: none !important;
    }

    h1#page-title,
    h1.entry-title {
        font-size: 20px;
    }

    .sns .share {
        margin-right: 15px;
    }

    article iframe{
        width: 100% !important;
        height:auto !important;
    }

    .widget-about-this-page div>img{
        width: 30%;
    }

    #beta .widget-about-this-page p.clear{
        clear: none;
        margin-left: 35%;
        line-height: 1.4;
    }

    #beta .widget-about-this-page dl{
        margin-left: 35%;
    }

    #beta .widget-about-this-page dl dt{
        font-size: 16px;
    }

    #text-2 div.tripadviser{
        text-align: center;
        margin-top: 25px;
    }
    #CDSWIDCOE{
        margin: 0 auto !important;
    }

    .sidebar-widget h3{
        font-size: 22px;
        color: #cccccc;
        font-weight: bold;
    }

    #beta #categories-2 ul.children{
        margin-top: 10px;
    }

    #beta #categories-2 ul li{
        margin-bottom: 10px;
    }

    #beta #categories-2 ul li a{
        font-size: 14px;
    }

    #archives-dropdown-2{
        width: 99.5%;
        border: 1px solid #ccc;
        padding: 4px 0;
    }

    #beta #archives-2,
    #beta #search-2{
        padding-bottom: 20px;
    }

    #search-2 input{
        padding: 4px 7px;
        width: 95%;
        border: 1px solid #ccc;
    }

    #text-3{
        text-align:center;
        margin-top: 25px;
    }

    .search-submit{
        width: 100%;
        padding: 5px 0;
        text-align: center;
    }

    #footer{
        position: absolute;
        bottom:0;
        background: none;
        width: 100%;
    }

    #footer #footer-inner{
        padding: 0;
    }

    #footer-content{
        padding: 0 0 15px;
        text-align: center;
        color: #000000;
        font-size: 11px;
    }

    a.btn_link{
        font-size: 15px;
        padding: 4px 0;
        line-height: 1.5;
        font-weight: normal;
    }

    .footer_sns{
        text-align: center;
        padding-top: 15px;
        padding-bottom: 10px;
        display: block;
    }

    .footer_sns a{
        margin: 0 3px;
    }

    .display_mode{
        display: block;
        padding: 0 15px 15px;
    }

    .display_mode div.wrap{
        background-color: #fff;
        padding:10px 20px;
    }

    .display_mode span{
        display: inline-block;
        font-size:14px;
        color: #cccccc;
        font-weight: bold;
        margin-right: 15px;
    }

    .display_mode .btn{
        display: inline-block;
        text-align: right;
    }

    .display_mode .btn a{
        font-size: 13px;
        color: #e4007f;
        letter-spacing: 0;
        text-decoration: none;
        margin: 0 5px;
    }

    #how_to_booking ul li{
        list-style-type: none;
    }

    #classes_cal {
        float: none;
        width: 100%;
        border-right: none;
        padding: 15px 0 10px;
    }

    #latest_schedule_main {
        float: none;
        width: 100%;
        padding: 15px 0 10px;
    }

    #latest_schedule_main ul li>div.classes{
        width: 75%;
    }

    #latest_schedule_main ul li>div.btn a{
        width: auto;
        font-weight: normal;
        padding: 4px 0;
    }

    .classes_list ul li{
        width: 48%;
        margin-right: 4%;
    }

    .classes_list ul li:nth-child(3n){
        margin-right: 4%;
    }

    .classes_list ul li:nth-child(3n+1){
        clear: none;
    }

    .classes_list ul li:nth-child(2n){
        margin-right: 0;
    }

    .classes_list ul li:nth-child(2n+1){
        clear: left;
    }

    .classes_list ul li p.link a{
        font-size: 15px;
        padding: 4px 0;
        font-weight: normal;
    }

    .pagination a,.pagination span{
        margin: 0 10px;
        font-size: 15px;
    }

    h2.heading{
        font-size: 30px;
    }

    #classes_cal .available.mob.on::before{
        position: fixed;
        width: 100%;
        height: 100%;
        left:0;
        top:0;
        background: rgba(0,0,0,0.8);
        z-index: 15;
        content: "";
        display: block;
    }

    #classes_cal .space{
        position: fixed;
        bottom: auto;
        top:150px;
        left:5%;
        right:auto;
        width: 90%;
        z-index: 20;
        background-color: #fff;
    }

    #classes_cal .available ul.time{
        box-shadow: none;
    }

    .mob_date{
        display: block;
        background-color: #fff;
        padding-top: 10px;
        position: relative;
    }

    .mob_date p{
        font-weight: bold;
        color: #666;
        font-size: 20px;
        margin-bottom: 5px;
    }

    .mob_date span{
        background: url("./img/mobile/close.png") left top no-repeat;
        background-size: cover;
        width: 18px;
        height: 18px;
        display: inline-block;
        position: absolute;
        z-index: 30;
        right: 15px;
        top:15px;
    }

    #course_detail .left_box{
        float: none;
        width: auto;
    }

    #course_detail .right_box{
        width: auto;
        float: none;
        margin-top: 30px;
    }

    #booking table,
    #normal_book{
        display: block;
    }

    #booking table td,
    #booking table th,
    #normal_book td,
    #normal_book th{
        display: block;
        width: 100%;
        padding: 10px 0;
    }

    #booking table th,
    #normal_book th{
        padding-bottom: 0;
    }

    #booking table td input,
    #booking table td textarea,
    #normal_book td input,
    #normal_book td textarea{
        width: 95%;
    }

    #booking table select,
    #normal_book select{
        width: 95%;
    }

    #normal_book .wpcf7-exclusive-checkbox input{
        width: auto;
    }

    .footer-description{
        display: block;
        padding: 10px 0;
        font-size: 15px;
        color: #000;
        line-height: 1.4;
        text-align: center;
    }

    .type-page ul li{
        list-style-type: none;
    }

    .type-page img{
        max-width: 100% !important;
        height: auto !important;
    }

    .see_all_classes p.link{
        padding-bottom: 20px;
        width: 100%;
        margin: 0 auto;
        position: relative;
        top:-20px;
    }

    .see_all_classes p.link{
        padding-bottom: 20px;
        width: auto;
        margin: 0 auto;
        position: relative;
        top:-20px;
        text-align: center;
    }

    .see_all_classes p.link a{
        background-color: transparent;
        color: #e4007f;
        padding: 0;
        text-align: center;
        display: inline;
        font-size: 16px;
        font-weight: normal;
    }

    .td.no_br br{
        display: inline;
    }

    #normal_book td .checkbox-704 input{
        width: auto;
    }

    table#normal_book .check>span:nth-last-child(5){
        margin-right: 0;
    }

    table#normal_book .wpcf7-form-control-wrap.other input{
        width: 100px;
    }
    
    .product_list{
		margin-bottom: 30px;
		padding-bottom: 30px;
		border-bottom: 1px dashed #ccc;
	}
	
	.product_list .product_photo{
		float: none;
		width: 100%;
		text-align: center;
	}
	
	.product_list .product_detail{
		float: none;
		width: 100%;
	}
	
	.product_list .product_detail h3{
		font-size: 20px;
	    line-height: 1.5;
	    color: #666666;
	    font-weight: bold;
	    margin-top: 20px;
	    margin-bottom: 15px;
	}
	
	.product_list .product_detail select{
			width: 50px;
	}
	
	.product_list .product_detail .order_box{
		background-color: #f2f2f2;
		padding: 20px;
		border: 1px solid #ccc;
		margin-top: 20px;
	}
	
	.product_list .product_detail .order_box .price{
		margin-bottom: 5px;
	}
	
	.product_list .product_detail .order_box div{
		font-size: 15px;	
	}
	h3.order_title{
		font-size: 20px;
	    line-height: 1.5;
	    color: #666666;
	    font-weight: bold;
	    float: none; 
	}

	.order_list{
		padding-bottom: 30px;
		border-bottom: 1px dashed #ccc;
		margin-bottom: 30px;
	}
	
	.order_table {
		border-top:1px solid #ccc;
		border-right:1px solid #ccc;
		float: none;
		width: 100%;
	}
	
	.order_table td,
	.order_table th{
		padding: 10px;
		border-bottom: 1px solid #ccc;
		border-left:1px solid #ccc;
	}
	
	.order_table th{
		background-color: #f2f2f2;
		padding: 5px 10px;
		text-align: center;
	}
	
	.order_table td{
	padding: 7px 10px !important;
}

}

@media screen and (max-device-width: 640px){
    .display_mode{
        display: block;
    }

    .display_mode{
        display: block;
        padding: 0 15px 15px;
    }

    .display_mode div.wrap{
        background-color: #fff;
        padding:10px 20px;
    }

    .display_mode span{
        display: inline-block;
        font-size:14px;
        color: #cccccc;
        font-weight: bold;
        margin-right: 15px;
    }

    .display_mode .btn{
        display: inline-block;
        text-align: right;
    }

    .display_mode .btn a{
        font-size: 13px;
        color: #e4007f;
        letter-spacing: 0;
        text-decoration: none;
        margin: 0 5px;
    }

}