/*---------------------------
tablet PCを表示
----------------------------*/
@media (min-width: 768px) {
    body {
        min-width: 1200px;
    }
}

/*---------------------------
/*container
----------------------------*/
#container{
    width:100%;
    background:url(../img/common/back_img_common.jpg) repeat-x;
    margin:0px;
    padding:0px;
    overflow: hidden;
}

/*---------------------------
header
----------------------------*/
header{
    width:100%;
    max-width:1200px;
    margin: 0px auto;
    background:url(../img/line.gif) repeat-x;
    background-position:bottom;
    font-size:10px;
    text-align:left;
}
header:after{
    content:"";
    display: block;
    clear: both;
}
header .logo{
    width:20%;
    float:left;
    padding-top:20px;
}
header .rbox{
    width:75%;
    float:right;
    padding-top:20px;
}
header .rbox .contact{
    width:100%;
    text-align: right;
    font-size:1.3em;
    font-weight: 700;
    color: #999;
}
header .rbox .nav{
    width:100%;
    padding-top:20px;
    text-align: right;
}

/*---------------------------
footer
---------------------------*/
footer{
    width:100%;
    margin:0px;
    text-align:center;
    clear:both;
    background:#000;
}
footer .footer_img{
    width:100%;
}
footer .footer_img img{
    width:100%;
    max-width:100%;
    height:auto;
}
footer .footer_training_icon{
    width:100%;
    text-align:center;
    padding:40px 0px;
    background: #fff;
}
footer .footer_training_icon img{
    margin:0 10px;
}
footer .footer_bottom{
    width:100%;
    background:#333;
    padding:50px 0px;
}
footer .footer_bottom .footer_studio_box{
    width:70%;
    float:left;
}

footer .footer_bottom .footer_logo{
    width:30%;
    float:right;
    color: #fff;
    font-family: serif;
}

@media screen and (max-width: 640px) {/*sp*/
    footer .footer_bottom .footer_logo{
        width:100%;
        padding-top: 2.0rem;
    }
    footer .footer_bottom .footer_logo img{
        width:30%;
        height: auto;
    }
}
footer .footer_bottom .footer_studio_box >span{
    font-size: 2.0rem;
    font-weight: bold;
    font-family: serif;
    color: #fff;
    margin-right: 10px;
    vertical-align: middle;
}
@media screen and (max-width: 640px) {/*sp*/
    footer .footer_bottom .footer_studio_box >span{
        margin-right: 0;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }
}
footer .footer_bottom .footer_studio_box >a{
    display: inline-block;
    font-family: serif;
    text-decoration: none;
    color: #fff;
    vertical-align: middle;
}
footer .footer_bottom .footer_studio_box >a:nth-of-type(1){
    font-size: 1.8rem;
    margin-right: 10px;
}
@media screen and (max-width: 640px) {/*sp*/
    footer .footer_bottom .footer_studio_box >a:nth-of-type(1){
        font-size: 1.6rem;
        margin-right: 0px;
    }
}
footer .footer_bottom .footer_studio_box >a:nth-of-type(2){
    font-size: 1.2rem;
    padding:5px 10px;
    border-radius: 100px;
    border:1px solid #fff;
}

@media screen and (min-width: 641px) {/*sp*/
    footer .footer_bottom .footer_studio_box a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}
.pagetop{
    width:40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background:url(../img/common/pagetop_bg.png) no-repeat #000 center;
    background-size:40%;
    position: fixed;
    bottom:40px;
    right:30px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border:1px solid #fff;
    color:#fff;
}

/*----------------------
main
------------------------*/
main{
    width:100%;
    margin:0px 0px 20px 0px;
    text-align:center;
    clear:both;
	padding-top: 3.0rem;
}

main .content_inner{
    width:1000px;
    margin:0px auto;
    padding-top:60px;
    text-align:left;
}
main .content_inner_box{
    width:798px;
    margin:0px auto;
    padding:50px 100px;
    text-align:left;
    border:1px solid #ccc;
}
main .content_inner .sub_inner{
    width:800px;
    margin:0px auto;
}

/*----------------------
aside
------------------------*/
aside{
    width:100%;
    padding:50px 0px;
    text-align:center;
}

/*---------------------------
nav
-----------------------------*/
nav{
    clear:both;
}
nav ul{
    display:block;  
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px;
}
nav ul:after{
    content:'';
    clear:both;
    display:block;
}
nav li{
    width:150px;
    height:30px;
    line-height:30px;
    text-align:center;
    list-style:none;
    display:inline-block; 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px;
    border-right:1px dotted #ccc;
    color:#333333;
    font-size:12px;
}
@media screen and (max-width: 768px) {/*sp*/
    nav li{
        width:100% !important;
    }
}

nav li.sp{
    display: none;
}
nav li a,
nav li a:link,
nav li a:visited{
    color:#333333;
    width:100%;
    height:30px;
    line-height:30px;
    display:block; 
    background:url(../img/navi/nav_home.jpg) no-repeat;
    text-align:center;
    text-decoration:none;
}
nav li a:hover,
nav li a:active{
    background:#ccc;
}

/*------------------------
content common
-------------------------*/
.content_title{
    width:100%;
    margin-bottom:40px;
    padding: 0px;
    background:#ECD8B1;
}
.content_title .inner{
    width:1000px;
    margin:0px auto;
    padding:75px 0px;
    }
.content_title .inner.bg_training{
    background:url(../img/common/title_bg_training.png) no-repeat top right;
}
.content_title .inner h1{
    font-size:20px;
    font-weight:bold;
    color:#fff;
    text-align:left;
}

/*bar*/
h2.content_bar,
h3.content_bar{
    font-size:20px;
    font-weight:bold;
    margin-bottom:30px;
    padding-bottom:30px;
    border-bottom:1px solid #ccc;
}

.nav_select{
    width:100%;
    margin-bottom:60px;
}

.select_box{
    width:100%;
    margin-bottom:40px;
    padding-bottom:40px;
    border-bottom:1px solid #ccc;
}
.select_box:after{
    content:"";
    display:block;
    clear:both;
}
.select_box .ibox{
    width:230px;
    float:left;
}
.select_box .tbox{
    width:740px;
    float:right;
}

/*===============================================
tablet 641~768
===============================================*/
@media screen and (min-width: 641px) and (max-width: 768px) {

	* img{
		max-width:100%;
		height:auto;
	}

	/*---------------------------
	/*container
	----------------------------*/
	#container{
		width:100%;
		background:url(../img/common/back_img_common.jpg) repeat-x;
		margin:0px;
		padding:0px;
		overflow:hidden;
	}

	/*---------------------------
	header
	----------------------------*/
	header{
		width:100%;
		margin: 0px auto;
		background:url(../img/line.gif) repeat-x;
		background-position:bottom;
		font-size:10px;
		text-align:left;
	}
	header .logo{
		width:100%;
        padding-top:10px;
        text-align: center;
	}
    header .rbox{
		width:100%;
		padding-top:10px;
	}
    header .rbox .contact{
		display: none;
	}
	header .rbox .nav{
		width:100%;
		padding-top:20px;
        text-align: right;
	}

	/*---------------------------
	footer
	---------------------------*/
	footer{
		width:100%;
		margin:0px;
		text-align:center;
		clear:both;
		background:#000;
	}
	footer .footer_img{
		width:100%;
	}
	footer .footer_img img{
		width:100%;
		max-width:100%;
		height:auto;
	}
	footer .footer_training_icon{
		width:100%;
		text-align:center;
		padding:40px 0px;
	}
	footer .footer_bottom{
		width:100%;
		background:#333;
		padding:50px 0px;
	}
	footer .footer_bottom .footer_studio_box{
		width:70%;
		float:left;
	}
	footer .footer_bottom .footer_studio_box a:nth-of-type(2){
		display:none;
	}
	footer .footer_bottom .footer_logo{
		width:30%;
		float:right;
	}

	.pagetop{
	    width:40px;
	    height: 40px;
	    line-height: 40px;
	    text-align: center;
	    background:url(../img/common/pagetop_bg.png) no-repeat #000 center;
	    background-size:40%;
	    position: fixed;
	    bottom:40px;
	    right:30px;
	    -moz-border-radius: 50px;
	    -webkit-border-radius: 50px;
	    border-radius: 50px;
	    border:1px solid #fff;
	    color:#fff;
	}

	/*----------------------
	main
	------------------------*/
	main{
		width:100%;
		margin:0px 0px 20px 0px;
		text-align:center;
		clear:both;
	}

	main .content_inner{
		width:96%;
		margin:0px auto;
		padding-top:60px;
		text-align:left;
	}
	main .content_inner_box{
		width:96%;
		margin:0px auto;
		padding:50px 100px;
		text-align:left;
		border:1px solid #ccc;
	}
	main .content_inner .sub_inner{
		width:96%;
		margin:0px auto;
	}
    main .content_inner img,
    main .content_inner_box img,
    main .content_inner .sub_inner img{
        max-width: 100%;
        height: auto;
    }

	/*----------------------
	aside
	------------------------*/
	aside{
		width:100%;
		padding:50px 0px;
		text-align:center;
	}

	/*---------------------------
	nav
	-----------------------------*/
	nav{
		clear:both;
	}
	nav ul{
		display:block;  
		padding: 0px 0px 0px 0px; 
		margin: 0px 0px 0px 0px;
	}
	nav ul:after{
		content:'';
		clear:both;
		display:block;
	}
	nav li{
		width:150px;
		height:30px;
		line-height:30px;
		text-align:center;
		list-style:none;
		display:block; 
		padding: 0px 0px 0px 0px; 
		margin: 0px 0px 0px 0px;
		display: block;
		border-right:1px dotted #ccc;
		float:left;
		color:#333333;
		font-size:12px;
	}

	nav li a,
	nav li a:link,
	nav li a:visited{
		color:#333333;
		width:100%;
		height:30px;
		line-height:30px;
		display:block; 
		background:url(../img/navi/nav_home.jpg) no-repeat;
		text-align:center;
		text-decoration:none;
	}
	nav li a:hover,
	nav li a:active{
		background:#ccc;
	}

	/*------------------------
	content common
	-------------------------*/
	.content_title{
		width:100%;
		margin-bottom:40px;
		padding: 0px;
		background:#ECD8B1;
	}
	.content_title .inner{
		width:96%;
		margin:0px auto;
		padding:55px 0px;
		}
	.content_title .inner.bg_training{
		background:url(../img/common/title_bg_training.png) no-repeat top right;
	}
	.content_title .inner h1{
		font-size:20px;
		font-weight:bold;
		color:#fff;
		text-align:left;
	}

	/*bar*/
	h2.content_bar,
	h3.content_bar{
		font-size:20px;
		font-weight:bold;
		margin-bottom:30px;
		padding-bottom:30px;
		border-bottom:1px solid #ccc;
	}

	.nav_select{
		width:100%;
		margin-bottom:60px;
	}

	.select_box{
		width:100%;
		margin-bottom:40px;
		padding-bottom:40px;
		border-bottom:1px solid #ccc;
	}
	.select_box:after{
		content:"";
		display:block;
		clear:both;
	}
	.select_box .ibox{
		width:230px;
		float:left;
	}
	.select_box .tbox{
		width:740px;
		float:right;
	}

}
/*===============================================
smart  ~640px
===============================================*/
@media screen and (max-width:640px){

	* img{
		max-width:100%;
		height:auto;
	}

	/*---------------------------
	/*container
	----------------------------*/
	#container{
		width:100%;
		background:url(../img/common/back_img_common.jpg) repeat-x;
		margin:0px;
		padding:0px;
        overflow: hidden;
	}
    #container img{
        max-width: 100%;
        height: auto;
    }

	/*---------------------------
	header
	----------------------------*/
	header{
		width:100%;
		margin: 0px auto;
		padding:25px 0px 0px 0px;
		background:url(../img/line.gif) repeat-x;
		background-position:bottom;
		font-size:10px;
		text-align:left;
	}
	header:&:after{
		content: "";
		display: block;
		clear: both;
	}
	header .logo{
		width:100%;
		margin-bottom:20px;
        text-align: center;
	}
    header .logo img{
        width:50%;
    }
	header .nav{
		width:100%;
	}
	header .rbox{
		text-align: center;
		font-size: 1.2em;
        width:100%;
        float: none;
	}
	header .rbox .contact{
		margin-bottom: 15px;
        display: none;
	}
    header .rbox .contact span{
        display: block;
        margin-bottom: 0.3rem;
    }
	header .rbox .contact a{
		color: #000;
		text-decoration: none;
	}

	/*---------------------------
	footer
	---------------------------*/
	footer{
		width:100%;
		margin:0px;
		text-align:center;
		clear:both;
		background:#000;
	}
	footer .footer_img{
		width:100%;
	}
	footer .footer_img img{
		width:100%;
		max-width:100%;
		height:auto;
	}
	footer .footer_training_icon{
		width:100%;
		text-align:center;
		padding:40px 0px;
	}
    footer .footer_training_icon img{
        width:15%;
    }
	footer .footer_bottom{
		width:100%;
		background:#333;
		padding:50px 0px;
	}
	footer .footer_bottom .footer_studio_box{
		width:100%;
		float:none
	}
	footer .footer_bottom .footer_studio_box a:nth-of-type(2){
		display:none;
	}
	footer .footer_bottom .footer_logo{
		width:100%;
		float:none;
	}

	.pagetop{
	    width:40px;
	    height: 40px;
	    line-height: 40px;
	    text-align: center;
	    background:url(../img/common/pagetop_bg.png) no-repeat #000 center;
	    background-size:40%;
	    position: fixed;
	    bottom:40px;
	    right:30px;
	    -moz-border-radius: 50px;
	    -webkit-border-radius: 50px;
	    border-radius: 50px;
	    border:1px solid #fff;
	    color:#fff;
	}

	/*----------------------
	main
	------------------------*/
	main{
		width:100%;
		margin:0px 0px 20px 0px;
		text-align:center;
		clear:both;
        padding-top: 1.5rem;
	}

	main .content_inner{
		width:90%;
		margin:0px auto;
		padding-top:20px;
		text-align:left;
	}
	main .content_inner_box{
		width:90%;
		margin:0px auto;
		padding:50px 100px;
		text-align:left;
		border:1px solid #ccc;
	}
	main .content_inner .sub_inner{
		width:90%;
		margin:0px auto;
	}

	/*----------------------
	aside
	------------------------*/
	aside{
		width:100%;
		padding:50px 0px;
		text-align:center;
	}

	/*---------------------------
	nav
	-----------------------------*/
	nav{
		clear:both;
		background: #999;
		position: fixed;
        z-index: 100;
        width:100%;
        height: 100%;
        top: 0;
        left: 0;
	}
	nav:after{
		content:'';
		clear:both;
		display:block;
	}
	nav ul{
		padding: 0px; 
		margin: 0px;
		background: #999;
	}
	nav li{
		width:100%;
        height: auto !important;
		list-style:none;
		display: block;
		box-sizing: border-box;
        float: none;
	}
    nav li.sp{
        display: block;
    }
	nav li a,
	nav li a:link,
	nav li a:visited{
		color:#fff;
		width:100%;
        height: auto !important;
		display:block; 
		text-align:center;
		text-decoration:none;
		padding: 20px 15px;
		border-right:none;
		border-bottom:1px dotted #ccc;
		box-sizing: border-box;
        font-size: 1.0rem;
        box-sizing: border-box;
	}
	
	/*------------------------
	content common
	-------------------------*/
	.content_title{
		width:100%;
		margin-bottom:20px;
		padding: 0px;
		background:#ECD8B1;
	}
	.content_title .inner{
		width:90%;
		margin:0px auto;
		padding:20px 0px;
		}
	.content_title .inner h1{
		font-size:1.0em;
		font-weight:bold;
		color:#fff;
		text-align:left;
        text-align: center;
	}

	/*bar*/
	h2.content_bar,
	h3.content_bar{
		font-size:20px;
		font-weight:bold;
		margin-bottom:30px;
		padding-bottom:30px;
		border-bottom:1px solid #ccc;
	}

	.nav_select{
		width:100%;
		margin-bottom:60px;
	}

	.select_box{
		width:100%;
		margin-bottom:40px;
		padding-bottom:40px;
		border-bottom:1px solid #ccc;
	}
	.select_box:after{
		content:"";
		display:block;
		clear:both;
	}
	.select_box .ibox{
		width:230px;
		float:left;
	}
	.select_box .tbox{
		width:740px;
		float:right;
	}

}


/*===============================================
その他調整
===============================================*/

/*レスポンシブ*/
.sp_nav{
    position: fixed;
    top: 15px;
    right:15px;
    color: #fff;
    background-image: url(../img/common/sp_nav.svg);
    background-size: 100%;
    background-position: center;
    display: none;
    z-index: 10000;
    width:50px;
    height:50px;
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
}
@media screen and (max-width: 640px) {/*sp*/
    .sp_nav{
        display: block;
        font-size:0.6rem;
    }
}

@media screen and (max-width: 640px) {/*sp*/
    header{
        padding: 10px 0 0 0;
    }
    header .rbox .nav nav{
        display:none;
    }
    header .rbox .contact span{
        display:block;
    }
}