@charset "UTF-8";

/*--------------------------------------------------------
解像度1200px以下
--------------------------------------------------------*/
@media
only screen and (max-width : 1200px){
	
	body{
		background:url(images/custom/bg.jpg) repeat;
	}

	.site-header-in,
	.global-nav-in,
	.main-body-in
	{
		width: 96%;
		margin: auto;
	}
	
	.main-image-in,
	.main-image-in-text,
	.main-image-in-text .main-image-in-text-cont,
	.main-image-in-text.wide .main-image-in-text-cont,.site-footer-in{
		width: 100%;
	}
	
	.col1 .section-wrap,
	.col1 .breadcrumbs,
	.col1 .section-wrap.wide .section-in,
	.col1 .section-wrap.wide,
	.col1 .float-area, .col1 .article-in{
		width: auto;
	}
	
	.col1 .section-wrap{
		padding:20px 0;
	}

	.col1 .breadcrumbs-in,
	.col1 .float-area{
		width: 96%;
		margin-right: auto;
		margin-left: auto;
	}
	
	.section-wrap{
		margin-bottom: 0;
	}
		
	.main-body{
		padding:40px 0 0;
	}
	
	.col1 .main-conts{
		margin-bottom:0;
	}
	
	/*吹き出し*/
	.bubble{
		width: 70%;
	}
	
	.talker{
		width: 25%;
	}
	
	.bubble .bubble-in:after,
	.bubble .bubble-in:before{
		top: 30px;
	}
	
	.together .bubble,
	.together .talker{
		width: 100%;
	}
	
	.together .talker b{
		max-width: 25%;
	}

	.ranking-list04 .rank-box,
	.ranking-list05 .rank-box,
	.post-list01 .post-box,
	.post-list02 .post-box{
		width: 100%;
	}
	
	.col1 .ranking-list05 .rank-box,
	.col1 .post-list02 .post-box{
		width: 320px;
	}
	
	.site-header-conts{
		position:relative;
	}
	
	.site-header-conts .h-left{
		width:45%;
	}
	
	.site-header-conts .h-right{
		position:static;
		width:40%;
		padding:100px 0 0;
	}
	.site-header-conts ul.slideGuide{
		background:none;
		background-size:cover;
		width:100%;
		height:auto;
		margin:0;
		padding:11px 0 0 10px ;
		float:right;
	}
	
	.site-header-conts ul.slideGuide li img{
		border-radius: 50%;
		border:6px solid #FFF;
	}
	
	.main-slide-thumbnail {
    position: absolute;
		left:50%;
    bottom: 25px;
		width:200px;
	}
	
	.site-header-conts .h-left-subpage{
		width:42%;
	}
	
	.site-header-conts .h-right-subpage{
		width:45%;
		padding:10px 10px 0 0;
	}
	
	.article-header h2.img-title img{
		max-width:80%;
		height:auto;
		display:block;
		text-align:right;
		margin-left:20%;
}

	.lbox{
		width:45%;
		background-size:100% auto;
		padding:150px 2% 0;
	}
	
	.lbox .bgimg{
		background-size:100% auto;
		padding: 0 15px 250px 130px;
	}
	
	.rbox{
		width:46%;
		padding:150px 2% 0;
	}
	
	#section02 h2{
		padding:2.5em 0 0.5em ;
	}
	
	#section02 .beginners-box .text, #section02 .popular-box .text{
		height:auto;
	}
	
	#section03 .section03-ui,.section07 .section07-in,.googlemap .iframe-in,#section-page .conts-in{
		background-size:100% auto;
	}
	
	#section06{
		margin:0 20px;
	}
	
	#section06 .thumbnail{
		width:18%;
	}
	
	.section07 .section07-in,#section-page .conts-in{
		padding:10px 50px 30px;
	}
	
	.btn_block{
		padding:0;
	}
	
	.btn_style01,.btn_style02,.btn_style03,.btn_style04{
		width:90%;
		margin:1em auto!important;
		text-align:center!important;
		border-radius:5px;
	}
	
	.btn_style01 a,.btn_style02 a,.btn_style03 a,.btn_style04 a{
		background-size:cover;
		width:100%;
		height:auto;
		border-radius:5px;
	}
	
	.section07 .section07-in h3{
		background:url(images/custom/title02_sp.png) no-repeat left top;
		padding:40px 10px 10px 135px;
		line-height:1.5;
	}
	
}/*解像度1200px以下*/

/*--------------------------------------------------------
解像度737px以上950px以下
--------------------------------------------------------*/
@media (min-width: 737px) and (max-width: 950px){

	/*ランキング*/
	.col2 .sub-conts .ranking-list03 .rank-thumb,
	.col2r .sub-conts .ranking-list03 .rank-thumb,
	.col2 .comparative-list01 .rank-thumb,
	.col2 .comparative-list02 .rank-thumb,
	.col2r .comparative-list01 .rank-thumb,
	.col2r .comparative-list02 .rank-thumb{
		float: none;
	}
	
	.col2 .comparative-list01 .rank-thumb,
	.col2 .comparative-list02 .rank-thumb,
	.col2r .comparative-list01 .rank-thumb,
	.col2r .comparative-list02 .rank-thumb{
		display: inline-block;
	}

	.col1 .ranking-list04 li,
	.col1 .ranking-list05 li,
	.col1 .post-list01 li,
	.col1 .post-list02 li{
		display: block;
		margin-right: auto;
		margin-left: auto;
	}

	.col1 .ranking-list04 .rank-box,
	.col1 .ranking-list05 .rank-box,
	.col1 .post-list01 .post-box,
	.col1 .post-list02 .post-box{
		width: 320px;
	}

	.col1 .banner-list li{
		display: list-item;
		margin-left: 0;
	}
	
	/*個別設定*/
	
	.site-header-conts ul.slideGuide{
		padding: 11px 10px 0 10px;
	}
	
	.site-header-conts .welcome-text{
		width:50%;
	}
	
	.main-slide-thumbnail{
		position: absolute;
    left: 50%;
    bottom: 25px;
    width: 150px;
	}
	
	.site-header-conts .h-right{
		padding:180px 0 0;
	}
	
	ul.ul-navi{
		width:96%;
		margin:0 auto 1em;
	}
	
	ul.ul-navi li{
		width:18%;
		padding:0 1%;
	}
	
	.lbox .bgimg{
		padding:0 15px 200px 50px;
	}

}/*解像度737px以上950px以下*/

/*--------------------------------------------------------
解像度736px以下
--------------------------------------------------------*/
@media
only screen and (max-width : 736px){

	html,
	body,
	.containr{
		min-width: 0;
	}

	html{
		overflow-x: hidden;
		overflow-y: scroll;
	}

	html,body{
		width: 100%;
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
	
	
	
	.container{
		background:none;
	}

	textarea,input{
		max-width: 95%;
	}
	
	input[type="submit"],input[type="image"],
	input[type="reset"],input[type="button"],
	input[type="file"]{
		max-width: none;
	}
	
	blockquote{
		position: relative;
		margin: 2em 0;
		padding: 115px 20px 80px;
		background: #eee;
	}

	.site-header-in,
	.global-nav-in,
	.main-body-in,
	.site-footer-in{
		width: 100%;
	}
	
	.col2 .main-conts,
	.col2 .sub-conts,
	.col2r .main-conts,
	.col2r .sub-conts{
		float: none;
		width: auto;
	}
	
	/*ヘッダー*/
	
	.page-template-front .site-title{
		padding:30px 10px 0;
	}
	
	.site-header-conts,
	.site-title,
	.header-box{
		display: block;
	}
	
	.header-box{
		margin-top: 15px;
	}
	
	.site-header-conts{
		padding-top: 30px;
	}
	
	.no-gn .site-header-conts{
		padding-top: 0;
	}
	
	.site-header-conts{
	}
	
	.site-title{
		padding: 15px 15px 0;
		font-size: 1.4em;
	}

	.normal-screen .site-title{
		font-size: 2em;
	}

	.normal-screen .lp-catch{
		padding: 15px 15px 0;
		font-size: 1em;
	}

	.header-box{
		margin-left: 0;
		text-align: center;
	}
	
	.site-header-in{
		position: relative;
		padding-bottom: 1em;
	}
	
	.site-header-conts .welcome-text{
		width:50%;
	}
	
	.site-header-conts ul.slideGuide{
		padding:11px 10px 0 10px;
	}
	
	/*グローバルナビ*/
	.global-nav{
		position: absolute;
		top: 0;
		width: 100%;
		margin: 0;
		border: 0;
	}
	
	.global-nav ul{
		display: none;
		position: absolute;
		top: 40px;
		left: 10px;
		z-index: 50;
		width: 88%;
		padding:0 0 0 2%;
		border: 0;
		background:#c30d23;

	}
	
	.global-nav-panel{
		display: block;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 10px;
		background: #c30d23;
		color: #fff;
		cursor: pointer;
	}

	.global-nav-in li{
		display: inline;
		width: auto;
		text-align: left;
	}
	
	.global-nav-in li.navi-01{
		margin:0 0 0 -7px;
	}
	
	.global-nav-in li ul{
		position: static;
		width: auto;
		margin-left: 1em;
	}
	
	.global-nav-in li ul li{
		width: auto;
		border-bottom: 0;
	}
	
	.global-nav-in li a,
	.global-nav li ul li a{
		padding: 0;
	}

		/*Retina（高解像度）ディスプレイ用*/
		@media screen and (-webkit-min-device-pixel-ratio:2),
		(min-resolution: 2dppx){

			.global-nav-in li a,
			.global-nav li ul li a{
			}

		}

	/*--------------------------------------------------------
	メインビジュアル
	--------------------------------------------------------*/

	.main-image-in-text-cont{
		padding: 1em;
	}
	
	.main-body{
		padding:0;
		background:none;
	}
	
	.main-copy{
		margin-bottom: 10px;
		font-size: 2em;
		text-align: center;
	}

	.sub-copy{
		font-size: 1em;
	}

	.section-wrap,
	.col1 .section-wrap.wide{
		padding: 0;
		border: 0;
	}
	
	.col1 .section-wrap{
		padding: 0;
	}
	
	.col1 .section-wrap.wide .section-in,
	.float-area,
	.col1 .float-area{
		padding: 15px;
	}

	.col1 .sub-conts .section-wrap .section-in{
		padding: 0 20px 30px;
	}

	.section-wrap .section-in .section-title,
	.section-wrap .article-header .section-title{
		margin: 0;
		padding: 15px 25px;
		font-size: 1.75em;
	}

	.sub-conts .section-wrap .section-in .section-title,
	.sub-conts .section-wrap .article-header .section-title,
	.col1 .sub-conts .section-wrap .section-in .section-title,
	.col1 .sub-conts .section-wrap .article-header .section-title{
		margin: 0 -20px 30px;
		padding: 10px 18px;
	}

	.main-body h1,
	.main-body h2,
	.main-body h3,
	.main-body h4,
	.main-body h5,
	.main-body h6{
		margin: 35px 0 20px;
	}
	

	.main-body h1,
	.main-body h2{
		font-size: 1.5em;
	}
	
	/*パンくずリスト*/
	.breadcrumbs-in{
		margin-bottom: 1em;
		padding: 0 1em;
	}

	.breadcrumbs-in li:last-child{
		display: none;
	}

	.col1 .breadcrumbs-in{
		width: auto;
	}

	/*フッターナビ*/
	.site-footer-nav{
		display: block;
		text-align: left;
	}

	.site-footer-nav li,
	.site-footer-nav li:first-child{
		display: list-item;
		margin-left: 20px;
	}

	/*コピーライト*/
	.copyright{
		padding: 15px;
		text-align: left;
	}

	.page-top img{
		width: 40px;
	}

	/*最新情報*/
	.news .news-thumb{
		float: none;
		text-align: center;
	}

	.main-body .news-title{
		font-size: 1.25em;
	}

	/*テーブル（左端がth、右側がtdの場合にスマホ表示で立て並びに変化）*/
	.table-block,
	.table-block thead,
	.table-block tbody,
	.table-block tfoot,
	.table-block tr,
	.table-block th,
	.table-block td{
		display: block;
	}
	
	.table-block{
		border-bottom: 1px solid #959595;
	}
	
	.table-block th,
	.table-block td{
		float: left;
		width: 100%!important;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.table-block:after{
		content : '';
		display : block;
		clear : both;
		height:0;
	}
	
	.table-scroll:before{
		content: "※はみ出ている場合、横にスクロールできます。"
	}

	/*バナーエリア*/
	.banner-list li{
		text-align: center;
	}
	
	.banner-list li,
	.col1 .banner-list li,
	.main-conts .banner-list li{
		display: list-item;
		margin-left: 0;
	}

	/*ボタン*/
	.btn-area{
		text-align: center;
	}

	.btn{
		float: none;
		margin-right: 0;
		margin-left: 0;
	}

	.btn-green,
	.btn-blue,
	.btn-orange,
	.btn-red{
		padding: 25px;
	}

	.btn-form01{
		padding: 25px 40px;
	}

	.btn-form02{
		padding: 25px 20px;
	}

	/*ソーシャルボタン*/
	.sns-list li{
		margin-right: 1em;
		margin-left: 0;
	}

	/*登場人物紹介２*/
	.col1 .cast-box02 .cast{
		min-height: 0;
		padding-top: 210px;
	}

	.col1 .cast-box02 .cast-name,
	.col1 .cast-box02 .cast-profile{
		padding-left: 0;
	}

	.col1 .cast-box02 .cast .cast-headshot{
		width: 100%;
	}

	/*ランキング*/
	.rank-thumb{
		float: none;
	}
	
	.sub-conts .ranking-list03 .rank-thumb,
	.col2 .sub-conts .ranking-list03 .rank-thumb,
	.col2r .sub-conts .ranking-list03 .rank-thumb{
		float: left;
	}

	.col1 .ranking-list04 li,
	.col1 .ranking-list05 li,
	.col1 .post-list01 li,
	.col1 .post-list02 li{
		display: block;
		margin-right: auto;
		margin-left: auto;
	}

	.col2 .link-menu-image-thumb,
	.col2r .link-menu-image-thumb{
		float: left;
	}

	.comparative-list01 .rank-thumb,
	.comparative-list02 .rank-thumb{
		display: inline-block;
		float: none;
	}

	.ranking-list04 .rank-box,
	.ranking-list05 .rank-box,
	.post-list01 .post-box,
	.post-list02 .post-box{
		width: 320px;
	}
	
	/*関連記事*/
	.related-articles-thumbs02 li{
		float: none;
		width: auto;
		margin-left: 0;
	}
	
	.eye-catch{
		float: none;
		margin: 0 0 1em;
		text-align: center;
	}
	
	/*個別設定*/
	
	ul.ul-navi{
		width:96%;
		margin:1.5em auto 1em;
	}
	
ul.ul-navi li{
float:left;
display:inline;
width:33%;
padding:0 0.5em;
box-sizing:border-box;
}
	
	.rbox,.lbox{
		float:none;
		display:block;
		width:90%;
		margin:0 auto;
	}
	
	.article-header h2.img-title img{
		max-width: 100%;
		margin:0;
	}
	
	#section02 .beginners-box,#section02 .popular-box{
		float:none;
		display:block;
		margin:0 0 1em;
		width:96%;
	}
	
	#section02{
		margin:20px 10px 40px;
		padding:2em 0;
	}
	
	#section02 .section-in{
		width:96%;
		margin:0 auto;
	}
	
	#section02 .box-icon {
    top: 0;
    left: 10px;
	}
	
	#section02 .box-icon img{
		max-width:60px;
		height:auto;
	}
	
	#section02 .tour-box .thumbnail,#section02 .tour-box .detail{
		float:none;
		display:block;
		width:96%;
		margin:0 auto 1em;
		text-align:center;
	}
	
	#section02 .tour-box .detail .detail-in .detail-left,#section02 .tour-box .detail .detail-in .detail-right{
		float:none;
		width:100%;
		margin:0 0 1em;
	}
	p.box-bottom{
		position:relative;
	}
	
	p.box-bottom img{
		position:absolute;
		top:0;
	}
	
	#section03{
		margin:20px 10px 40px;
	}
	
	#section03 .section03-ui{
		padding:20px 30px 20px;
	}
	
	#section03 .section03-ui-left,#section03 .section03-ui-right{
		width:100%;
		float:none;
		display:block;
		margin:0 0 1em;
	}
	
	.btn_block{
		margin:20px 10px 40px;
	}
	
	.btn_block .btn_block-left,.btn_block .btn_block-right{
		float:none;
		display:block;
		width:100%;
		margin:0 0 1em;
	}
	
	#section04{
		margin:20px 10px 40px;
	}
	
	#section04 .section04-left,#section04 .section04-right{
		float:none;
		display:block;
		width:90%;
		margin:0 auto 1em;
	}
	
	#section04 .section04-right{
		text-align:center;
	}
	
	#section05{
		margin:20px 10px 40px;
	}
	
	#section05 .block01,#section05 .block02{
		float:none;
		display:block;
		width:96%;
		margin:0 auto 2em;
	}
	
	#section05 .block01:before,#section05 .block02:before{
		width:100%;
	}
	
	#section06{
		margin:20px 10px 40px;
	}
	
	#section06 .thumbnail,#section06 .place,#section06 .place02{
		float:none;
		display:block;
		width:90%;
		margin:0 auto 1em;
	}
	
	#section06 .thumbnail{
		text-align:center;
	}
	
	.contact{
		margin:20px 10px 40px;
	}
	
	.contact .left,.contact .right{
		float:none;
		display:block;
		width:90%;
		margin:0 auto 1em;
	}
	
	.contact .left{
		text-align:left;
	}
	
	.contact .right{
		text-align:center;
		margin:0 auto 1em!important;
	}
	
	.section07{
		margin:20px 10px 40px;
	}
	
	.section07 .section07-in, #section-page .conts-in{
		padding:10px 20px 30px;
	}
	
	.site-footer-conts .contact{
		margin:0 5px;
	}
	
	#section-page .course .course_info,#section-page .course .ph{
		float:none;
		display:block;
		width:96%;
		margin:0 auto 1em;
	}
	
	#section-page .course .ph{
		text-align:center;
	}
	
	#section-page h3.bg_title02{
		background:url(images/custom/title02_sp.png) no-repeat left top;
		padding:40px 10px 10px 135px;
		line-height:1.5;
	}
	
	.box-rt{
		width:105px;
		right:30px;
		top:-38px;
	}
	
	#section-page .course .price{
		max-width:100%;
	}

.btn_sp{
display:block;
width:90%;
margin:1em auto 0;
}

.btn_sp img{
display:block;
margin:0 auto;
}
	

}/*解像度736px以下*/

/*--------------------------------------------------------
解像度480px以下
--------------------------------------------------------*/
@media
only screen and (max-width : 480px){

	/*段組*/
	.col4-wrap,
	.col3-wrap,
	.col2-wrap{
		margin: 0 0 1em;
	}

	.col4-wrap .col,
	.col4-wrap .col_2of4,
	.col4-wrap .col_3of4,
	.col3-wrap .col,
	.col3-wrap .col_2of3,
	.col2-wrap .col{
		float: none;
		margin-left: 0;
	}

	.col4-wrap .col,
	.col4-wrap .col_2of4,
	.col4-wrap .col_3of4,
	.col3-wrap .col,
	.col3-wrap .col_2of3,
	.col2-wrap .col{
		width: auto;
	}

	.left,
	.right{
		float: none;
		margin-right: 0;
		margin-left: 0;
		text-align: center;
	}

	.alignleft,
	.alignright{
		float: none;
		margin-right: 0;
		margin-left: 0;
		text-align: center;
	}

	.ranking-list04 .rank-box,
	.ranking-list05 .rank-box,
	.post-list01 .post-box,
	.post-list02 .post-box,
	.col1 .ranking-list05 .rank-box,
	.col1 .post-list02 .post-box{
		width: 100%;
	}
	
}/*解像度480px以下*/


@media
only screen and (max-width : 736px){
	
	.lbox{
		padding:180px 2% 0;
	}

	.lbox .bgimg{
		padding:0 5% 350px 35%;
	}
	
	.site-header-conts .h-right{
		width:50%;
		padding:200px 0 0;
	}
	
	.main-slide-thumbnail{
		width:100px;
	}
	
}

@media
only screen and (max-width : 640px){
	
	.lbox{
		padding:160px 2% 0;
	}

	.lbox .bgimg{
		padding:0 5% 280px 35%;
	}
	
	.site-header-conts .h-right{
		width:50%;
		padding:170px 0 0;
	}
	
}

@media
only screen and (max-width : 560px){
	
	.lbox{
		padding:140px 2% 0;
	}

	.lbox .bgimg{
		padding:0 5% 250px 35%;
	}
	
	.site-header-conts .h-right{
		width:50%;
		padding:140px 0 0;
	}
	
}


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

	.lbox{
		padding:120px 2% 0;
	}

	.lbox .bgimg{
		padding:0 5% 200px 35%;
	}
	
	.site-header-conts .h-right{
		width:50%;
		padding:110px 0 0;
	}
	
	.main-slide-thumbnail{
		width:75px;
	}
	
@media
only screen and (max-width : 400px){

	.lbox{
		padding:100px 2% 0;
	}

	.lbox .bgimg{
		padding:0 5% 170px 35%;
	}
	
	.site-header-conts .h-right{
		width:50%;
		padding:80px 0 0;
	}
	
@media
only screen and (max-width : 320px){

	.lbox{
		padding:80px 2% 0;
	}

	.lbox .bgimg{
		padding:0 5% 140px 35%;
	}
	
	.site-header-conts .h-right{
		width:50%;
		padding:50px 0 0;
	}
	
}


/*---------------------------------------------------------------------
	generated by Keni Template Maker Ver.7.0 on 2015-12-16 09:57:36
----------------------------------------------------------------------*/