@charset "utf-8";


/*--Base------------------------------------------------------------*/

html,body {
	width: 100%;
/*	height: 100%;*/
}

html {
/*	height: 100%;*/
	overflow-y: scroll;
}

/*--Reset-----------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

a {
	text-decoration: none;
	overflow:hidden;
	outline: none;
}

img {
	border: none;
	vertical-align: middle;
	max-width: 100%;
	height: auto;
	width:auto;
}


ul,ol {
	list-style: none;
}

hr {
	visibility:hidden;
	clear:both;
}

hr.hr-middle{
	margin:3px 0;
}

hr.hr2{
	margin:2px 0;
}

div.img-right{
	float:right;
	width:40%;
	max-width:200px;
	padding:3px;
	border:1px solid #CCCCCC;
	margin:0 0 0.5em 0.5em;
}


/*--Text------------------------------------------------------------*/

body {
	font-size: 88%;
	font-weight: normal;
	line-height: 1.5;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	margin:0;
	padding:0;
    position: relative;
    left: 0;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight:normal;
}


/*--Link------------------------------------------------------------*/

a,
a:link {
	color: #333333;
}

a:visited {
	color: #333333;
}

a:hover,
a:active {
	color: #777777;
}

a:focus {
	outline: none;
}

/*--HTML5-----------------------------------------------------------*/

article,aside,details,footer,header,main,menu,nav,section,summary {
	display: block;
}


/* **************************************************** 0 to 479px ******************* */

img.pc{
	display:none;
}

img.mb{
	display:block;
}


#container{
	width:100%;
	max-width:960px;
	margin:0 auto 10px;
}

#main-box{
	width:98%;
	margin:0 auto;
}

div.main-box-inner{
	padding-top:5px;
}


div.img-box{
	width:98%;
	margin:5px auto 10px;
	max-width:700px;
}

div.page-title-gr{
	width:100%;
	color: #FFFFFF;
	background: #966731;
	background:-moz-linear-gradient(rgba(150,103,49,0.7), rgba(150,103,49,0.9) 50%);
	background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(150,103,49,0.7)), to(rgba(150,103,49,0.9)));
	font-weight: normal;
	text-shadow:0 -1px 0 rgba(106,58,13,0.9);
	box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
	border:1px solid #6A3A0D;
	text-align:center;
	padding:5px 0;
	font-size:110%;
	letter-spacing:1em;
	text-indent:1em;
}


div.to-contact-banner a:link,
div.to-contact-banner a:visited{
	display:block;
	width:100%;
	padding:3px 0;
	text-align:center;
	color: #FFFFFF;
	background: #BB2204;
	background:-moz-linear-gradient(rgba(224,40,35,0.7), rgba(224,40,35,0.9) 50%);
	background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(224,40,35,0.7)), to(rgba(224,40,35,0.9)));
	font-weight: normal;
	text-shadow:0 -1px 0 rgba(163,33,36,0.9);
	box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
	border:1px solid #BB2204;
}

div.to-contact-banner a:hover{
	background: #CC2204;
	background:-moz-linear-gradient(rgba(224,40,35,0.9), rgba(224,40,35,0.7) 50%);
	background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(224,40,35,0.9)), to(rgba(224,40,35,0.7)));
}


/*/////////////////////////////////////////////////////////////////////////////////main-menu*/
#main-menu{
	width:100%;
	margin:0 auto;
	padding-top:5px;
}


#main-menu a:link{
	display:block;
	font-size:100%;
	padding: 10px 5px;
	text-align: center;
}


#main-menu label{
	display:block;
	padding: 10px 5px;
	cursor: pointer;
	width:100%;
	color: #FFFFFF;
	background: #8F9294;
	background:-moz-linear-gradient(rgba(143, 146, 148,0.7), rgba(143, 146, 148,0.9) 50%);
	background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(143, 146, 148,0.7)), to(rgba(143, 146, 148,0.9)));
	font-weight: normal;
	text-shadow:0 -1px 0 rgba(0,0,0,0.9);
	box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
	margin-bottom:2px;
}

#main-menu label:before{
}

#main-menu ul{
	width:98%;
	margin:0 auto 5px;
    -webkit-transition:0.5s linear;
    -moz-transition: 0.5s linear;
    -ms-transition: 0.5s linear;
    -o-transition: 0.5s linear;
    transition: 0.5s linear;
}


#main-menu ul li.to-p{
	border-top:1px solid #ECA517;
	border-left:1px solid #ECA517;
}

#main-menu ul li.to-p:nth-child(2n+1){
	border-right:1px solid #ECA517;
}

#main-menu ul li.to-p:nth-child(8),
#main-menu ul li.to-p:nth-child(9){
	border-bottom:1px solid #ECA517;
}


#main-menu ul li.to-p:first-child{
	width:100%;
	float:left;
}

#main-menu ul li.to-p{
	width:50%;
	float:left;
}

#main-menu ul li.to-c{
	width:100%;
	float:left;
	margin-top:3px;
}

#main-menu ul li.to-c a:link,
#main-menu ul li.to-c a:visited{
	float:left;
	width:100%;
	color: #FFFFFF;
	background: #BB2204;
	background:-moz-linear-gradient(rgba(224,40,35,0.7), rgba(224,40,35,0.9) 50%);
	background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(224,40,35,0.7)), to(rgba(224,40,35,0.9)));
	font-weight: normal;
	text-shadow:0 -1px 0 rgba(163,33,36,0.9);
	box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
	border:1px solid #BB2204;
}

#main-menu ul li.to-c a:hover{
	background: #CC2204;
	background:-moz-linear-gradient(rgba(224,40,35,0.9), rgba(224,40,35,0.7) 50%);
	background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(224,40,35,0.9)), to(rgba(224,40,35,0.7)));
}

#main-menu ul li.to-p a:link,
#main-menu ul li.to-p a:visited{
	width:100%;
	color: #ECA517;
}

#main-menu ul li.to-p a:hover{
	background: #ECA517;
	background:-moz-linear-gradient(rgba(236,165,23,0.9), rgba(236,165,23,0.7) 50%);
	background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(236,165,23,0.9)), to(rgba(236,165,23,0.7)));
	box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
	color:#FFFFFF;
}

#main-menu input[type="checkbox"].on-off{
    display: none;
}

#main-menu input[type="checkbox"].on-off + ul{
    height: 0;
	max-height: 0;
    overflow: hidden;
}

#main-menu input[type="checkbox"].on-off:checked + ul{
    height: auto;
	max-height: 50em;
}

a.to-contact:link,
a.to-contact:visited{
	margin-top:0.5em;
	line-height:2em;
	text-align:center;
	display:block;
	float:left;
	width:100%;
	color: #FFFFFF;
	background: #BB2204;
	background:-moz-linear-gradient(rgba(224,40,35,0.7), rgba(224,40,35,0.9) 50%);
	background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(224,40,35,0.7)), to(rgba(224,40,35,0.9)));
	font-weight: normal;
	text-shadow:0 -1px 0 rgba(163,33,36,0.9);
	box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
	border:1px solid #BB2204;
}

a.to-contact:hover{
	background: #CC2204;
	background:-moz-linear-gradient(rgba(224,40,35,0.9), rgba(224,40,35,0.7) 50%);
	background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(224,40,35,0.9)), to(rgba(224,40,35,0.7)));
}

@media only screen and (min-width: 600px) { /* *************************************** */
a.to-contact{
	display:none !important;
}

/* ** */}


/*//////////////////////////////////////////////////////////////////////////////////header*/
#page-head{
	width:100%;
	background-color:#ECA517;
	font-size:88%;
	padding-left:0.5em;
	color:#FFFFFF;
	overflow:hidden;
}

#header{
	width:100%;
}

#header-logobox{
	width:95%;
	max-width:600px;
	margin:0 auto;
}

#header-add,
#header-tel{
	text-align:center;
	background-color:#ECA517;
	color:#FFFFFF;
	line-height:1.2;
	padding:3px 0;
}

#header-tel{
	font-size:150%;
}

/*//////////////////////////////////////////////////////////////////////////////////box-head*/

div.blog-head{
	border-top:3px solid #ECA517;
	border-bottom:3px solid #ECA517;
	line-height:1.5;
	color:#ECA517;
	text-align:center;
	margin-bottom:0.5em;
}

div.fb-head{
	border-top:3px solid #0000FF;
	border-bottom:3px solid #0000FF;
	line-height:1.5;
	color:#0000FF;
	text-align:center;
	margin-bottom:0.5em;
}

/*//////////////////////////////////////////////////////////////////////////////////footer*/

#footer{
	width:100%;
	background:#ECA517;
	color:#FFFFFF;
	text-align:center;
}

#footer-inner{
	width:20em;
	margin:0 auto;
}

.footer-school-box{
	width:100%;
	display: -webkit-flex; /* Safari */
	display: flex;
	-webkit-flex-direction: column; /* Safari */
	flex-direction:         column;
	-webkit-align-items: center; /* Safari */
	align-items:         center;
	-webkit-justify-content: flex-start; /* Safari */
	justify-content:         flex-start;
	-webkit-flex-wrap: nowrap; /* Safari */
	flex-wrap:         nowrap;
}

div.footer-school,
div.footer-add,
div.footer-tel{
	text-align:left;
	width:100%;
}

/*//////////////////////////////////////////////////////////////////////////////////to-com*/
#to-com{
	width:100%;
	background-color:#FFE8C0;
}

#to-com a:link,
#to-com a:visited{
	font-size:88%;
	color:#ECA517;
}

#to-com a:link,
#to-com a:visited{
	padding:0 1em;
}

#to-com a:hover{
	text-decoration:underline;
}


@media only screen and (min-width: 600px) { /* *************************************** */

#inner{
	display:table;
	table-layout:fixed;
	width:100%;
    border-collapse:separate;
    border-spacing:3px 0 5px 0;
/*	margin-top:3px;*/
}

#main-menu{
	display:table-cell;
	vertical-align:top;
	width:200px;
/*	background-color:#F9DEB2;*/
}

#main-box{
	display:table-cell;
	vertical-align:top;
	width:100%;
}

div.main-box-inner{
	width:98%;
	margin:0 auto;
	padding-top:10px;
}


img.pc{
	display:block;
}

img.mb{
	display:none;
}


div.hide-pc{
	display:none;
}

div.page-title-gr{
	margin-top:5px;
}

#main-menu label{
	display:none;
}

#main-menu ul{
/*	margin:0;*/
}

#main-menu ul li.to-p{
	width:100%;
	border:none;
	background-color:#FFFFFF;
}

#main-menu ul li.to-p{
	border-top:1px solid #ECA517;
	border-right:1px solid #ECA517;
	border-bottom:none;
	border-left:1px solid #ECA517;
}

#main-menu ul li.to-p:nth-child(9){
	border-top:none;
	border-bottom:1px solid #ECA517;
}

#main-menu input[type="checkbox"].on-off + ul{
    height: auto;
	max-height: 50em;
}

#footer-inner{
	width:35em;
}

.footer-school-box{
	-webkit-flex-direction: row; /* Safari */
	flex-direction:         row;
}

div.footer-school,
div.footer-add,
div.footer-tel{
	width:auto;
}

div.footer-school,
div.footer-add{
	padding-right:1em;
}


/* ** */}

@media only screen and (min-width: 960px) { /* *************************************** */


#header{
	position:relative;
}

#header-logobox{
	margin:0 0 0 10px;
}

#header-add{
	position:absolute;
	top:25px;
	right:10px;
	background-color:#FFFFFF;
	color:#ECA517;
	font-weight:bold;
	padding:0;
}

#header-tel{
	position:absolute;
	top:45px;
	right:10px;
	background-color:#FFFFFF;
	color:#ECA517;
	font-size:200%;
	font-weight:bold;
	padding:0;
}

#header-photo{
	border-top:8px solid #ECA517;
}


/* ** */}