@charset "utf-8";
 *{ margin: 0;padding: 0}
a { text-decoration : none}
ul, ol { list-style : none}
img { vertical-align : middle}
a:link { color: #4d4d4d; }
a:visited { color: #4d4d4d; }
a:hover { color: #4d4d4d;}
a:active { color: #4d4d4d; }
a img:hover { opacity: 0.7;}  img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: middle;
} hgroup img {
width: 292px;
}  html {
font-family : "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
font-size : 70%; line-height : 1.7;
color: #4D4D4D;
text-align: center;
}  h1 {
font-size : 3em; line-height : 1; margin-bottom : 0.5em } 
h2 {
font-size : 2.25em; line-height : 1.3333; margin-bottom : 0.6667em } 
h3 {
font-size : 1.5em; line-height : 1; margin-bottom : 1em } 
h4 {
font-size : 1.1em; line-height : 1; margin-bottom : 1em } 
hgroup {
font-size : 1em; }
header { 
text-align : center;
}
header h1 { margin-bottom : 0.5em}
.logo{
text-align: center;
margin-left: auto;
margin-right: auto;
}
.logo img{
width: 292px;
height: 57px;
}
.line{background-color :#E05600;
height: 4px;
width: 100%;
} nav {
margin-bottom : 1.5em;
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(230,230,230,1) 88%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(88%,rgba(230,230,230,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(230,230,230,1) 88%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,230,230,1) 88%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(230,230,230,1) 88%); }
nav ul { overflow : hidden}
nav ul li {
width : 16.666%;
float : left;
}
nav ul li a {
display : block;
color : #4d4d4d;
padding : 1.5em 0
}
nav ul li a:hover {
color : white;
background-color : #E05600} #contents {
max-width:930px;
margin : 0 auto;
text-align : center;
margin-top: 2em;
width: 95%;
}
#contents p { 
margin-bottom : 1.5em;
text-align : center}
footer{
background-color: #f2f2f2;
overflow: auto;
margin-top:50px;
padding-bottom: 20px;
padding-top: 20px;
clear: both;
}
footer nav{
background : none;
color: #E05600;
}
footer nav a:link { color: #E05600; }
footer nav a:visited { color: #E05600; }
footer nav a:hover { color: #E05600; }
footer nav a:active { color: #E05600; } .aisatu{
margin-top: 1em;
text-align: center;
line-height: 2em;
}
.floor{
width: 90%;
margin-top: 2em;
margin-left: auto;
margin-right: auto;
margin-bottom: 2em;
}
.osusume{
width: 100%;
margin-bottom: 2em;
}
.osusume1{
background-color : #E05600;
font-size: 1.2em;
color: white;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.8em;
margin-left: auto;
margin-right: auto;
width: 95%;
}
.osusume2{
text-align: left;
width: 95%;
margin: 0 auto;
}
.osusume3{
text-align: center;
margin-top: 0.5em;
margin-left: auto;
margin-right: auto;
width: 150px;
} .title-border {
width: 60%;
display: flex;
align-items: center;
margin: 0 auto;
clear: both;
}
.title-border:before,
.title-border:after {
border-top: 1px solid;
padding-top: 1.5em;
content: "";
flex-grow: 1;
}
.title-border:before {
margin-right: 1rem;
}
.title-border:after {
margin-left: 1rem;
}
.phone{
width: 80px;
margin: 0 auto;
}
.tel{
font-size: 2em;
text-align: center;
margin-bottom: 1em;
}
.mail{
width: 80px;
margin: 0 auto;
}
.maillink{
font-size: 2em;
text-align: center;
margin-bottom: 1em;
}  .annai-l{
width: 100%;
}
.annai-r{
width: 100%;
margin-bottom: 2em;
}
.annai1{
background-color : #E05600;
font-size: 1.2em;
color: white;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5em;
margin-left: auto;
margin-right: auto;
width: 95%;
}
.annai-l img{
width: 95%;
}
.annai-r img{
width: 95%;
}
.annai2{
text-align: center;
width: 95%;
margin: 0 auto;
line-height: 1.5;
}
.annai3{
text-align: left;
width: 95%;
margin: 0 auto;
font-size: 0.8em;
}
.annaltable{
width: 95%;
margin: 0 auto;
line-height: 2;
margin-bottom: 1.5em;
}
.annaltable2{
width: 95%;
margin: 0 auto;
line-height: 2;
margin-bottom: 1.5em;
font-size: 0.8em;
}
.annaig{
background-color : #808080;
font-size: 1.2em;
color: white;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
width: 95%;
margin: 0 auto;
clear: both;
}
.annaig2{
text-align: center;
width: 95%;
margin: 1em auto 1em;
line-height: 1.5;
}
.shosaitable {
width: 95%; 
margin: 0 auto 2em;
}
.shosaitable th	{
width: 16%; 
text-align: center;
font-weight: normal;
}
.shosaitable td	{
text-align: left;
padding: 0.5em 0.5em 0.5em 0.5em;
} .class1{
background-color : #E05600;
font-size: 1.2em;
color: white;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5em;
margin-left: auto;
margin-right: auto;
}
.class2{
margin-bottom: 2em;
}
.class-waku{
border:solid 1px #aaa;
margin-bottom: 1.5em;
overflow: auto;
}
.class-name{
background-color: #F4E9E7;
clear: both;
text-align: left;
padding: 1.2em 0 0.1em 1em;
font-size: 1.2em;
font-weight: 500;
padding-bottom: 1em;
line-height: 0.8em;
}
.class-waku-shita{
display: table;
}
.class-waku-shita th{
width: 90px;
text-align: center;
}
.class-waku-shita td{
padding: 5px;
text-align: left;
}
.class-icon{
width: 90px;
height: 90px;
float: left;
}
.class-icon img{
margin-bottom: 0;
}
.class-week{
width: 63px;
height: 80px;
float: left;
text-align: center;
background-color: #f2f2f2;
padding-top: 10px;
}
.class-data{
text-align: left;
padding: 0 0 0 10px;
float: left;
display: flex;
}
.kodomo{
border: solid 1px #fff;
background: #99CC33;
border-radius: 7px;
color: #ffffff;
font-size: 0.6em;
padding: 0.5em 0.5em;
margin-left: 0.1em;
margin-bottom: 0.5em;
}
.otona{
border: solid 1px #fff;
background: #0066CC;
border-radius: 7px;
color: #ffffff;
font-size: 0.6em;
padding: 0.5em 0.5em;
margin-left: 0.1em;
margin-bottom: 0.5em;
} .class-main-p{
width: 86%;
margin: 2em auto 2em auto;
}
.class-table { 
margin: 0 auto 2em;
background-color: #aaaaaa;
}
.class-table th	{
width: 20%; 
text-align: center;
font-weight: normal;
}
.class-table td	{
text-align: left;
padding: 1em;
}
.class-oder{
background-color: #F4E9E7;
clear: both;
text-align: center;
padding: 1.2em 0 0.1em 1.5em;
font-size: 1.2em;
padding-bottom: 1em;
line-height: 0.8em;
margin-bottom: 1em;
}
.class-oder-data{
text-align: center;
font-size: 1.5em;
font-weight: 500;
text-align: left;
}
.class-oder-data th{
width: 40px;
}
.class-oder-data td{
padding: 5px 0 5px 10px;
}
table{ margin-left:auto; margin-right:auto; } .timetable-1{
text-align: left;
} .googlemap {
position: relative;
padding-bottom: 50%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-bottom: 2em;
}
.googlemap iframe,
.googlegmap object,
.googlemap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.access-l{
width: 100%;
margin-bottom: 2em;
}
.access-r{
width: 100%;
text-align: left;
}
.access-komoku{
background-color: #F4E9E7;
border-left: #E05600 solid 0.6em;
text-align: left;
margin: 1em 0;
padding: 0.5em 0 0.5em 1em;
}
@media only screen and (max-width:600px){
nav ul li {
width : 33.333%;
float : left;
}
nav ul li a {
display : block;
color : #4d4d4d;
padding : 1em 0;
border-bottom: solid 1px #aaa;
}
.shosaitable { margin: 0 auto; width: 95%; margin-bottom: 1em; background-color: #FFFFFF; }
.shosaitable th,
.shosaitable td { width: 100%; display: block; }
.shosaitable td	{ padding: 0; }
.shosaitable th { margin: 5px 0; padding: 3px 0; }
.class-table{ margin: 0 auto; margin-bottom: 1em; background-color: #FFFFFF; }
.class-table th,
.class-table td { width: 100%; display: block; }
.class-table td	{ padding: 5px 0; text-align: center;}
.class-table th { margin: 3px 0; padding: 4px 0; }
.class-oder-data td{ padding: 5px 0 5px 3px;}
} @media screen and (min-width : 768px){
.logo {text-align: left;width: 930px; }	
.floor {width: 80%; }
.osusume {width: 30%; float: left; margin: 0.6em 0.6em 2em 0.6em; }
.annai-l {width: 48%; float: left; }
.annai-r {width: 48%; float: right; }
.annai1 {width: 100%; }
.annai2 {width: 100%; }
.annai3 {width: 100%; }
.annaltable {width: 100%; }
.annaltable2 {width: 100%; }
.annai-l img {width: 100%; }
.annai-r img {width: 100%; }
.annaig {width: 100%; }
.shosaitable td	{text-align: left;padding: 0.5em 1em 0.5em 1em;}
.access-l {width: 48%; float: left; }
.access-r {width: 48%; float: right; }
html{font-size : 87.5%} } @media screen and (min-width : 1024px) {
#contents {
width: 100%;
}
nav ul {
width : 930px; margin : 0 auto}
html{font-size : 100%;
}