/* CSS Document */


/* ------------------------------
base
------------------------------ */

html{
font-size:72.5%;
}
body{
margin: 0;
padding: 0;
font-size:1.0rem;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
color: #ffffff;
background-image: url(images/header_bar.png);
background-repeat: repeat-x;
background-position: top;
min-width: 1100px;
background-color: #333333;
}
p  { 
line-height: 1.8;
font-size:1.4rem;
}
a{
color: #F6E875;
}
a:hover{
color:#4B4B4B;
}
.img_right{
margin: 20px 0 20px 20px;
float:right;
overflow: hidden;
}
.img_center{
margin: 0 auto 20px auto;
text-align: center;
}
.small_right{
text-align: right;
font-size: 0.9em;
margin: 10px;
}
.red{
color: #FB1742;
}
.line{
background: linear-gradient(transparent 80%, #C3DE8B 30%);
font-weight: bold;
}
.sub_title{
font-size: 1.6em;
font-weight: bold;
color: #504E75;
margin: 20px 0;
text-align: center;
}
.space{
width: 100%;
height: 50px;
}
#gotop{
position:fixed;
right:5%;
bottom:2%;
}

/* ------------------------------
header
------------------------------ */
#header_contents{
width: 1000px;
height:auto;
margin: 0 auto 10px auto;
}
#header_logo{
width: 1000px;
height: auto;
z-index: 1;
text-align: center;
position: relative;
top:10px;
}
#header_contact{
width: 1000px;
height: 60px;
z-index: 10;
text-align: right;
top:10px;
position: absolute;
}
#header_contact img{
width: 350px;
height: auto;
}
h1{
clear: both;
width: 100%;
font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
font-size: 1.0em;
letter-spacing: 0.2em;
text-align: center;
margin: 10px 0;
color: #ffffff;
}
#main_nav{
clear: both;
width: 100%;
height: 53px;
margin: 20px auto;
padding: 10px 0;
}
#main_nav ul{
width: 1000px;
height: 53px;
margin: 0 auto;
}
#main_nav li{
height: 53px;
list-style: none;
float: left;
}
.fixed {
position: fixed;
top: 63px;
width: 100%;
z-index: 10000;
}
/* ------------------------------
index
--------------------------------*/
.main_img{
clear: both;
height: 450px;
width: 100%;
background-position: center;
background-repeat: no-repeat;
-webkit-background-size:100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
text-align: center;
padding: 0;
margin: 0;
}

.main_img{
background-position: center\9;
background-repeat: repeat-x\9;
}
#main_img_guide{
width: 100%;
height: 450px;
}
*+html .main_img{
background-position: center;
background-repeat: repeat-x;
}


#main_contents{
clear: both;
width: 1000px;
height: auto;
margin:0 auto;
padding:30px 0;
}
h2.contets_title{
clear: both;
width: 100%;
height: auto;
margin: 20px 0 50px 0;
}
h2.contets_title img{
width: 100%;
height: auto;
}
.contets_text{
width: 100%;
height: auto;
padding: 0 5% 20px 5%;
box-sizing: border-box;
}
#message{
width: 100%;
height: auto;
margin: 20px 0;
text-align: center;
font-size: 1.8em;
color: #F6E875;
font-family: "Sawarabi Mincho";
}

.lesson_menu{
clear: both;
width: 100%;
height: auto;
}
.lesson_menu img{
float: left;
margin: 0 50px 0 0;
vertical-align:text-top;
}
h3.lesson_point{
width: auto;
display: inline-block;
font-family: "Sawarabi Mincho";
font-size: 1.8em;
font-weight: normal;
float:left;
}
.lesson_box{
float: left;
width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
width : -webkit-calc(100% / 3) ;
width : calc(100% / 3) ;
height: 350px;
text-align: center;
margin: 0 0 40px 0;
}
.lesson_title{
width: 100%;
height: auto;
text-align: center;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
border-bottom:solid 1px #222222;
}
.lesson_title h3{
clear: both;
display: inline-block;
font-size: 2.0em;
text-align: left;
margin: 0;
color: #222222;
vertical-align: middle;
}
.lesson_level{
clear: both;
margin: 5px auto;
text-align: center;
display: table;
}
.lesson_level_text{
font-size: 1.0em;
margin: 0 20px 0 0;
display: table-cell;
vertical-align: middle;
}
.lesson_box p{
width: 90%;
height: auto;
margin: 0 auto;
font-size: 1.2em;
letter-spacing: 1;
}
.lesson_box1{
float: left;
width: 300px;
height: 350px;
background-image: url(images/lesson_box1_bg.png);
background-repeat: no-repeat;
background-position: center;
padding: 10px;
box-sizing: border-box;
text-align: left;
background-color: #ffffff;
color: #333333;
}
.lesson_box_gender1{
padding: 5px;
background-color: #CBB669;
text-align: center;
color: #ffffff;
font-size: 0.8em;
margin: 0 10px 0 0;
}
.lesson_box3{
float: left;
width: 300px;
height: 350px;
background-image: url(images/lesson_box3_bg.png);
background-repeat: no-repeat;
background-position: center;
padding: 10px;
box-sizing: border-box;
text-align: left;
background-color: #ffffff;
color: #333333;
}
.lesson_box_gender3{
padding: 5px;
background-color: #504E75;
text-align: center;
color: #ffffff;
font-size: 0.8em;
margin: 0 10px 0 0;
}
.lesson_meaning{
font-size: 0.9em;
text-align: center;
}
#main_site{
clear: both;
width: 60%;
height: auto;
padding: 30px 80px;
margin: 40px auto;
text-align: center;
font-size: 1.6em;
font-weight: bold;
background-image: url( images/main_site_bg.png);
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
#main_site a{
color: #504E75;
}
#schedule_box{
width: 100%;
height: auto;
margin: 20px 0;
float: left;
}
#schedule_title{
float: left;
margin: 0 20px 0 0;
}
#schedule_table{
width: 76%;
height: auto;
float: left;
margin: 0 0 40px 0;
font-size: 1.2em;
border-collapse: collapse;
color: #333333;
}
#schedule_table tr{
padding:5px;
}
#schedule_table td{
background-color: #f2f2f2;
padding:20px;
border-bottom: 1px solid #ffffff;
}
.lesson_name{
font-size: 1.2em;
font-weight: bold;
}
#lesson_link{
clear: both;
width: 100%;
height:auto;
font-size: 1.4em;
text-align: center;
margin: 40px auto;	
}

#instructor_list{
width: 100%;
height: auto;
margin: 20px 0;
padding: 0;
}
#instructor_list li{
float: left;
width : 20% ;
height: auto;
list-style: none;
text-align: center;
margin: 0 0 40px 0;
}
#instructor_list li div{
margin: 10px 0 0 0 ;
}
.voice_box{
float: left;
width: 80%;
height: auto;
padding: 30px;
box-sizing: border-box;
margin: 20px 10%;
background-color: #ffffff;
color: #333333;
}
.voice_box .voice_img{
float: left;
width: 30%;
height:100%;
padding: 50px 0;
text-align: center;
}
.voice_box p{
width: 70%;
height: auto;
float: left;
margin: 0 0 20px 0;
}
.voice_box .voice_toptext{
width: 70%;
height: auto;
float: left;
color:#504E75;
font-size: 1.5em;
font-weight: bold;
margin: 0 0 20px 0;
}
.voice_box p span{
color:#504E75;
font-weight: bold;
}


.access_box{
width: 20%;
height:auto;
background-image: url(images/access_01.png);
background-repeat: no-repeat;
background-position: left top;
float: left;
}
.access_box h4{
font-size: 2em;
color: #CBB669;
font-weight: bold;
margin: 10px 20px 20px 0;
}
#mapfield{
width: 80%;
height: 500px;
float: right;
margin: 0 0 40px 0;
}

/* ------------------------------
Shisei
------------------------------ */
#shisei{
width: 100%;
height: auto;
margin: 20px 0;
padding: 170px 0 0 60px;
background-image: url(images/shisei_01.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: top;
}
#shisei p{
width: auto;
margin:0 100px 20px 0;
}
#shisei strong{
font-size: 1.4em;
font-weight: normal;
color: #FB8EBB;
}
#shisei_case{
background-image: url(images/shisei_02.png);
background-repeat: no-repeat;
background-position:  left top;
padding: 0 0 0 40px;
font-size: 1.8em;
}
#shisei_list{
font-size:1.4em;
line-height: 1.8em;
margin: 20px 0 20px 50px;
padding: 0;
}
#shisei_list li{
list-style-image: url(images/list_img.png);
}

/* ------------------------------
footer
------------------------------ */
#footer{
clear: both;
width: 100%;
height: auto;
padding: 20px 0;
background-color: #CBB669;
color: #222222;
}
#footer_contents{
width: 1000px;
height: auto;
margin: 0 auto;
text-align: center;
}
#footer_nav{
width: auto;
height: auto;
margin: 40px auto
}
#footer_nav ul{
padding: 0;
}
#footer_nav ul li{
list-style: none;
display:inline;
border-left:1px solid;
width: auto;
margin: 0;
padding: 0 20px;
box-sizing: border-box;
}
#footer_nav ul li#footer_nav_right{
border-right: 1px solid;
}
#footer_nav ul li a{
color: #222222;
text-decoration: none;
}
#copyright{
clear: both;
width: 100%;
height: auto;
margin: 10px 0;
color: #ffffff;
text-align: center;
}
#sns_box{
top: 10%;
right: 0;
width: 40px;
height: auto;
position: fixed;
}

/* ------------------------------
sp site
------------------------------ */
@media screen and (max-width: 640px){

.pc_disply{
display: none;
}
/* ------------------------------
base
------------------------------ */
body{
min-width: inherit;
}
img{
max-width: 100%;

}
.img_right{
width: 100%;
clear: both;
margin: 10px auto;
}
.img_center{
width: 92%;
margin: 0 auto 20px auto;
text-align: center;
}
h2,h3,h4{
text-indent: 10px;
}
p{
width: 96%;
height: auto;
margin: 5px 2%;
}

/* ------------------------------
headr
------------------------------ */

#header_contents{
width: 100%;
height:auto;
margin: 0 0 10px 0;
padding: 0;
overflow: hidden;
}
#header_logo{
clear: both;
width: 25%;
height: auto;
margin: 0 0 0 10px;
}
#header_logo img{
width: 100%;
height:auto;
margin: 0;
}
#header_contact{
width: 100%;
height: auto;
text-align: right;
top:0;
position:fixed;
}
#header_contact img{
width: 50%;
height: auto;
margin: 0 auto;
}
h1{
clear: both;
width: 100%;
font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
font-size: 0.8em;
letter-spacing: 0.2em;
margin: 10px 0 10px 10px;
color: #ffffff;
text-align: left;
}

#main_nav{
clear: both;
float: left;
width: 100%;
height: auto;
margin: 20px auto;
padding: 10px 0;
}
#main_nav ul{ 
clear: both;
width: 96%;
height:auto;
margin: 0 2%;
padding: 0 0 20px 0;
text-align: center;
}
#main_nav li{
width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
width : -webkit-calc(100% / 3) ;
width : calc(100% / 3) ;
height: auto;
list-style: none;
float: left;
}

/* ------------------------------
index
------------------------------ */
.main_img{
clear: both;
height: 200px;
width: 100%;
background-position: right;
background-repeat: no-repeat;
-webkit-background-size:100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
text-align: center;
padding: 0;
margin: 0;
}

.main_img{
background-position: center top\9;
background-repeat: repeat-x\9;
vertical-align: middle;
}
#main_img_guide{
clear: both;
width: 100%;
height: 300px;
}
#main_contents{
clear: both;
width: 100%;
height: auto;
margin:0 auto;
padding:30px 0;
background-color: #333333;
overflow: hidden;
}

h2.contets_title{
clear: both;
width: 100%;
height: auto;
margin: 10px 0 30px 0;
text-align: center;
}
h2.contets_title img{
width: 96%;
height: 40px;
object-fit: cover;
}
.lesson_box{
clear: both;
width : 96%;
height: 350px;
text-align: center;
margin: 0 2% 20px 2%;
}
.lesson_box p{
width: 80%;
height: auto;
margin:0 10%;
line-height:1.8;
}
.lesson_menu{
clear: both;
width: 96%;
height: auto;
margin: 0 2%;
text-align: center;
}
.lesson_menu img{
width: 50%;
float:none;
margin: 0 auto;
}
.lesson_title{
width: 90%;
height: auto;
text-align: center;
margin: 0 5% 10px 5%;
padding: 0 0 5px 0;
border-bottom:solid 1px #222222;
}
.lesson_title h3{
width: 96%;
box-sizing: border-box;
height: auto;
display: inline-block;
font-size: 2.0em;
text-align: center;
margin: 0 auto;
color: #222222;
vertical-align: middle;
}
h3.lesson_point{
width: 90%;
display: inline-flex;
font-family: "Sawarabi Mincho";
font-size: 1.8em;
font-weight: normal;
float:none;
margin: 0 auto;
}
.lesson_box1{
float: left;
width: 96%;
height: 350px;
background-image: url(images/lesson_box1_bg.png);
background-repeat: no-repeat;
background-position: center;
padding: 10px;
box-sizing: border-box;
text-align: left;
margin: 0 2%;
background-color: #333333;
color: #ffffff;
}
.lesson_box_gender1{
padding: 5px;
background-color: #CBB669;
text-align: center;
color: #ffffff;
font-size: 0.8em;
margin: 0 10px 0 0;
box-sizing:border-box;
}
.lesson_box1 h3{
color: #ffffff;
}
.lesson_box3{
float: left;
width: 96%;
margin: 0 2%;
height: 350px;
background-image: url(images/lesson_box3_bg.png);
background-repeat: no-repeat;
background-position: center;
padding: 10px;
box-sizing: border-box;
text-align: left;
background-color: #333333;
color: #ffffff;
}
.lesson_box_gender3{
padding: 5px;
background-color: #504E75;
text-align: center;
color: #ffffff;
font-size: 0.8em;
margin: 0 10px 0 0;
box-sizing:border-box;
}
.lesson_box3 h3{
color: #ffffff;
}

.lesson_name{
white-space: nowrap;
display: block;
clear: both;
width: 100%;
font-size: 1.0em;
font-weight: bold;
margin: 5px 0 0 0;
}
#lesson_link{
clear: both;
width: 100%;
height:auto;
font-size: 1.4em;
text-align: center;
margin: 40px auto;	
}
#main_site{
clear: both;
width: 90%;
height: auto;
padding: 30px 0;
margin: 40px auto;
text-align: center;
font-size: 1.0em;
font-weight: bold;
background-image: url( images/main_site_bg.png);
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
#schedule_title{
float: none;
margin: 0 20px 0 0;
}
#schedule_table{
clear: both;
width: 96%;
height: auto;
float: none;
margin: 0 2% 40px 2%;
font-size: 0.95em;
border-collapse: collapse;
}
#schedule_table tr{
padding:5px 1px;
}
#schedule_table td{
background-color: #f2f2f2;
padding:5px;
border-bottom: 1px solid #ffffff;
}
#instructor_list{
width: 96%;
height: auto;
margin: 20px 2%;
padding: 0;
}
#instructor_list li{
float: left;
width : 20% ;
height: auto;
list-style: none;
text-align: center;
margin: 0 0 40px 0;
}
#instructor_list li div{
margin: 10px 0 0 0 ;
}
.voice_box{
float: left;
width: 90%;
height: auto;
padding: 20px;
box-sizing: border-box;
margin: 10px 5%;
background-color: #ffffff;
color: #333333;
}
.voice_box .voice_img{
float: left;
width: 100%;
height:auto;
padding: 0;
text-align: center;
}
.voice_box p{
width: 100%;
height: auto;
float: left;
margin: 0 0 20px 0;
}
.voice_box .voice_toptext{
width: 100%;
height: auto;
float: left;
color:#504E75;
font-size: 1.5em;
font-weight: bold;
margin: 0 0 20px 0;
}
.voice_box p span{
color:#504E75;
font-weight: bold;
}


.access_box{
width: 100%;
height:auto;
background-image: url(images/access_01.png);
background-repeat: no-repeat;
background-position: left top;
float: left;
}
.access_box h4{
font-size: 2em;
color: #CBB669;
font-weight: bold;
margin: 10px 20px 20px 0;
}
#mapfield{
clear: both;
width:96%;
height: 500px;
float: none;
margin: 0 2% 40px 2%;
}
/* ------------------------------
Shisei
------------------------------ */
#shisei{
width: 100%;
height: auto;
margin: 20px 0;
padding: 70px 0 0 0;
background-image: url(images/shisei_01.png);
background-size: 96%;
background-repeat: no-repeat;
background-position: top center;
}
#shisei p{
width: 90%;
margin:0 5% 20px 5%;
}
#shisei strong{
font-size: 1.4em;
font-weight: normal;
color: #FB8EBB;
}
#shisei_case{
background-image: url(images/shisei_02.png);
background-repeat: no-repeat;
background-position:  left top;
padding: 0 0 0 40px;
font-size: 1.8em;
}
#shisei_list{
font-size:1.4em;
line-height: 1.8em;
margin: 20px 0 20px 50px;
padding: 0;
}
#shisei_list li{
list-style-image: url(images/list_img.png);
}

/* ------------------------------
footer
------------------------------ */
#footer{
clear: both;
width: 100%;
height: auto;
padding: 20px 0;
background-color: #CBB669;
color: #222222;
}
#footer_contents{
width: 90%;
height: auto;
margin: 0 auto;
text-align: center;
}
#footer_nav{
width: auto;
height: auto;
margin: 40px auto;
}
#footer_nav ul{
padding: 0;
}
#footer_nav ul li{
list-style: none;
display:inline;
border-left:1px solid;
width: auto;
margin: 0;
padding: 0 20px;
box-sizing: border-box;
font-size: 0.8em;
}
#footer_nav ul li#footer_nav_right{
border-right: 1px solid;
}
#footer_nav ul li a{
color: #222222;
text-decoration: none;
}
#copyright{
clear: both;
width: 100%;
height: auto;
margin: 10px 0;
text-align: center;
}
#sns_box{
top:10%;
right: 0;
width: 30px;
height: auto;
position: fixed;
}

}