@charset "UTF-8";



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

	#school .layout55 .c-tx {
	    width: calc(50% - 50px);
	    padding: 50px 0;
	}
	#school .layout55 .c-ph .copy{
		left: -20px;
	}
	#school .layout55 .c-ph .bt-normal{
		left: -20px;
	}
	#lesson .layout-col3 {
    margin-top: 120px;
	}

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

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



	.mono .header-btn{
		position: fixed;
		top: auto;
		bottom: 0;
		right: auto;
		left: 0;
		z-index: 10;
	}
	p.bt-normal img {
	    display: flex;
	    padding: 12px 15px 8px;
	    background: #101111;
	    max-width: 362px;
	    width: 100%;
	    height: auto;
	}

	button.i-arrow-l a{
	border-radius: 0 16px 0 0px;
	padding: 12px ;
	background: #101111;
	}
	header .header-inner{
		padding-bottom: 150px;
		padding-top: 65%;
	}
	header .tx-content {
	    margin-top: 0;
	    margin-bottom: 0%;
	}
	header .categry {
	    max-width: calc(100% - 40px);
	    width: 100%;
	    margin-bottom: 5px;
	    top: 120px;
	    left: 20px;
	    right: auto;
	    bottom: auto;
	}
	.categry ul{
			flex-wrap: wrap;
			justify-content: flex-start;
	}
	.categry ul li{
		margin-bottom: 10px;
	}

	.tx-content .copy p.bt-normal{
		position: relative;
		margin: 50px 0 0;
	}
	.tx-content .copy p.bt-normal img {
	    height: auto;
	    max-width:calc(392px - 30px) ;
	    width: calc(100% - 30px);
	}


	#profile .layout55 .c-ph{
		max-width: 240px;
		margin-right: auto;
		margin-left: auto;
	}

    .mono .swiper-slide {
    	width: 240px;
    }

    /*スライダードット*/
	.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
		margin: 0 4px 4px;
	}
	#school .layout55 .c-ph{
		padding: 150px 0;
		background: url(../img/ph-02-2.jpg)no-repeat;
		background-size: cover;
		background-position: center;
	}
	#school .bg-ph-02{
		background: none;
	}
	#school .layout55 .c-tx{
	    width: calc(100% - 0px);
	    padding: 30px 0 0px;
	}
	#school .layout55 .c-ph .copy{
		top: -150%;
		left: 0;
	}
	#school .layout55 .c-ph .bt-normal{
		width: calc(100% - 40px);
		left: 0;
	}

	table.corse .frequency{
		margin-bottom: 10px;
	}
	table.corse .tx-main td{
	    padding: 16px 16px 16px;
	}
	table.corse td.ph{
		padding: 70px 0;	
	}
	
  .mono #lesson .layout-col3 table + table ,
  .mono .layout-col3 table{
    width: calc((100% - 10px) / 2);
    margin:120px auto 0;
  }
  .mono #lesson .layout-col3 table:nth-child(2){
  	margin-left: 10px;
  }
	#lesson .layout-col3 {
    margin-top: 0px;
    justify-content: space-between;
	}

	table.plan-frame{
		max-width: 100%;
		width: 100%;
	}
	.other-plan .layout55 table + table{
		margin-left: 0px;
		margin-top: 30px;
	}
	table.sonota th, 
	table.sonota td{
		padding: 12px;
	}
	#school #voice{
		padding: 70px 0 20px;
	}
	#access .c-tx dt,
	#access .c-tx dd,
	#access .c-tx h3,
	#access .c-tx p,
	#access .c-tx li{
		text-align: center;
	}

	.footer .c-tx{
		display: block;
	}

	.footer .c-tx p{
		text-align: center;
	}
	.footer .c-tx .info ul{
		justify-content: center;
		margin-top: 20px;
	}

	.c-head p{
		text-align: left;
	}
	.c-head p.t-large{
		text-align: center;
	}


	#vistter .c-head .title-img{
		margin-bottom: 30px;
	}
	#vistter .image ul{
		display: none;
	}
	#vistter .image{
		background: url(../img/bg-image.png)no-repeat;
		background-size: contain;
		background-position: center;
		padding: 25% 0;
		margin-top: 30px;
	}
	#vistter .bt-large {
	    margin-top: 10px;
	}

	button.bt-middle.bg-bl img{
	 max-width: 310px;
	 width: 100%;
	 height: auto;
	}

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


	header .tx-content {
        margin-top: 10%;
    }

	.copy li, .tx-content .copy p{
		font-size: 12px;
	}
	.mono p.detail{
		font-size: 12px;
	}
	.layout-maru-tx .ph{
		max-width: 80px;
	}
	.layout-maru-tx .tx{
	        width: calc(100% - 100px);
	    }
	.layout-maru-tx dl{
		align-items: flex-start;
	}
	.mono .title-tx{
		font-size: 14px;
	}
	table.corse .detail th, table.corse .detail td {
	    font-size: 10px;
	}
	.mono .title-tx.middle small{
		font-size: 10px;
	}
  .footer .copy{
        font-size: 7px;
    }
	#vistter .c-head .t-kakomi small{
		font-size: 9px;
	}
	#vistter .t-large{
		font-size: 14px;
	}

	.mono .accordion-header::before{
		width: 20px;
        height: 20px;
        left: 5px;
        top: 40%;
	}
	.mono .accordion-header{
		padding-left: 40px;
	}


}