@charset "UTF-8";

/*================================================
 *  CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/*================================================
 *  一般・共通設定
 ================================================*/
body {
	font-size:14px;
	font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	line-height:1.6;
}

header { width:100%; }

a { color:#043771; }
a:hover { color:#144d8d; }

h2 { margin-top:50px; margin-bottom:0.5em; font-size:24px; color:#333; text-align:center; }
h3 { margin-bottom:0.25em; font-size:18px; }
h4 { margin-bottom:0.25em; font-size:16px; }
h5 { margin-bottom:0.25em; padding-left:25px; font-size:16px; background:url('../images/bg_arrow_black.png') 0 50% no-repeat; }
h6 { margin-bottom:0.25em; padding-left:5px; font-size:16px; font-weight:bold; }

p { margin:0 0 1em 0; }
img { vertical-align:bottom; }
em { font-weight:bold; }
strong { font-weight:bold; color:#ff0000; }
pre { margin:1em 0; padding:1em; }
blockquote { margin-bottom:1em; padding:1em; border:1px dotted #ddd; border-left:5px solid #ddd; }

ul,ol,dl { margin:0 0 1em 0; }
ul li { list-style:disc; }
ol li { list-style:decimal; }
li { margin-left:2em; }

dt { margin-bottom:0.5em; border-bottom:1px dotted #ddd; }
dd { margin-bottom:1em; }

table { width:100%; margin-bottom:1em; border-collapse:collapse; border:1px solid #ddd; }
th { padding:10px; text-align:center; vertical-align:middle; border:1px solid #ddd; background:#f1f1f1; }
td { padding:10px; text-align:left; border:1px solid #ddd; }

/*================================================
 *  ヘッダー
 ================================================*/
header { position:relative; text-align:center; }
header h1 { position:absolute; top:0; left:0; right:0; bottom:0;	margin:auto; width:100%; height:200px; z-index:10; }

/*================================================
 *  メイン
 ================================================*/
main { width:100%; }
section { margin-bottom:10%; }

/*================================================
 *  フッター
 ================================================*/
footer { clear:both; margin-top:100px; padding:2% 0; font-size:11px; text-align:center; }

/*================================================
 *  ページトップへの戻り
 ================================================*/
.totop { position:fixed; bottom:15px; right:15px; }
.totop a { display:block; text-decoration:none; }
.totop img { background:#000; }
.totop img:hover { background:#333; }

/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {

div#head{ text-align:center; position:fixed; z-index:1; }
div#head p#headbtn{ display:none; }
div#head img#spheader{ width:100%; }

header img#headerbg{ display:none; }
header img#spmainimg{ width:100%; margin-top:70px; }
header h1{ display:none; }
header video{ display:none; }
header img#pcmainimg{ display:none; }

img#headerline{ display:none;}

#contents { width:100%; margin:0 auto; }

div#lead{ width:100%; background:url(../img/sp_lead_bg.gif) no-repeat; background-size:cover; }
div#lead p#maintext{ width:100%; padding-top:15px; font-size:3em; text-align:center; }
div#lead p#text01{ margin-top:0px; padding:0 10px; line-height:1.5em; font-size:1em; }

div#chara{ position:relative;  }
div#chara p#title{ display:none; }
div#chara p#leadtext{ display:none; }
div#chara div#chara_pc{ display:none; }
div#chara p#contact{ text-align:center; position:absolute; bottom:0; }
div#chara p#contact img{ width:80%; }

/*
div#chara{ background:url(../img/sp_chara.gif) no-repeat; background-size:100%, 100%, contain; position:relative; }
div#chara p#title{ display:none; }
div#chara p#leadtext{ display:none; }
div#chara div#chara_pc{ display:none; }
div#chara p#contact{ position:absolute; bottom:0; left:10%; }
*/

div#event{ width:100%; height:650px; text-align:center; background:url(../img/sp_event_bg.gif) no-repeat; background-size:cover; position:relative; }
div#event div#item{position:absolute; top:30%; text-align:left; margin:0 10px; }
div#event div#item p.title{ border-bottom:1px dotted #999999; }
div#event div#item p.text{ margin-bottom:40px; }

div#voice{ text-align:center; position:relative; }
div#voice p#photo{ display:none; }
div#voice div#text{ display:none; }
div#voice p#contact{ text-align:center; position:absolute; bottom:0; }
div#voice p#contact img{ width:80%; }

div#teacher{ text-align:center; }
div#teacher p.photo{ display:none; }
div#teacher div.text{ display:none; }

div#lesson{ text-align:center; position:relative; }
div#lesson p#title{ display:none; }
div#lesson div#first{ display:none; }
div#lesson div#second{ display:none; }
div#lesson p#contact{ text-align:center; position:absolute; bottom:0; }
div#lesson p#contact img{ width:80%; }

div#cost{ width:100%; height:800px; background:url(../img/sp_cost_bg.gif) no-repeat; background-size:cover; position:relative; }
div#cost p.text{ padding:200px 30px 10px 30px; }
div#cost table{ background-color:#ffffff; }
div#cost table tr.table1{ background-color:#666666; color:#ffffff; }
div#cost table td.tdctr{ text-align:center; }
div#cost table td.tdrgt{ text-align:right; }
div#cost table tr.table2{ background-color:#990000; color:#ffffff; }
div#cost p#contact{ text-align:center; position:absolute; bottom:0; }
div#cost p#contact img{ width:80%; }

div#map{ text-align:center; }
div#map img#map001{ width:100%; }
div#map img#item{ display:none; }
div#map div#mapright{ display:none; }

div#contactform{ width:100%; height:1140px; background:url(../img/sp_contact_bg.gif) no-repeat; background-size:cover; position:relative; }
div#contactform p#title{ display:none; }
div#contactform p#text01{ position:relative; top:200px; padding-left:30px; padding-right:30px; }
div#contactform form#mailformpro{ position:relative; top:250px; }
div#contactform form#mailformpro button#mfp_button_cancel{ display:none; }

div#thanks{ width:100%; height:700px; margin-bottom:50px; background:url(../img/sp_lead_bg.gif) no-repeat; background-size:cover; position:relative; }
div#thanks p#title{ padding:80px 30px 0 30px; font-size:2.8em; }
div#thanks div#text{ padding:50px 30px 0 30px; font-size:1.2em; }


}
/*================================================
 *  PC向けデザイン
 ================================================*/
@media screen and (min-width:768px) {

div#head{ text-align:right; }
div#head p#headbtn{ position:absolute; top:0; left:0; right:0; bottom:0; margin:0 auto; width:1280px; height:0px; z-index:10; }
div#head img#spheader{ display:none; }

header img#spmainimg{ display:none; }
h1{ margin-top:300px; margin-bottom:0px; padding-bottom:0; color:#0da775; font-size:3.5em; font-weight:bold; letter-spacing:0.1em; }
video#mainvideo{margin:0;padding:0;}

#contents { width:1280px; margin:0 auto; }

div#lead{ width:1280px; height:627px; text-align:center; background-image:url(../img/main_lead_bg.gif); }
div#lead p#maintext{ padding-top:100px; font-size:3em; }
div#lead p#text01{ line-height:2em; font-size:1.2em; }

div#chara{ width:1280px; height:1416px; color:#ffffff; text-align:center; background-image:url(../img/chara_bg.gif); }
div#chara p#title{ padding-top:130px; font-size:2.8em; }
div#chara div#pointtitle1{ width:950px; display:flex; margin-top:200px; margin-left:170px; justify-content:center; }
div#chara div#pointtitle1 p.text1{ flex: 0 1 27%; margin-left:0px; }
div#chara div#pointtitle1 p.text2{ flex: 0 1 27%; margin-left:70px; }
div#chara div#pointtitle2{ width:950px; display:flex; margin-top:180px; margin-left:170px; justify-content:center; }
div#chara div#pointtitle2 p.text1{ flex: 0 1 27%; margin-left:0px; }
div#chara div#pointtitle2 p.text2{ flex: 0 1 27%; margin-left:70px; }
div#chara div#pointtext{ width:950px; display:flex; margin-left:160px; padding-top:30px; justify-content:center; text-align:left; }
div#chara div#pointtext p.text1{ flex: 0 1 27%; margin-left:20px; }
div#chara div#pointtext p.text2{ flex: 0 1 27%; margin-left:70px; }
div#chara p#contact{ margin-top:100px; }

div#chara div#chara_sp{ display:none; }

div#event{ width:1280px; height:650px; text-align:center; background-image:url(../img/event_bg.gif); }
div#event div#item{ width:950px; margin:0 0 0 175px; padding-top:300px; text-align:left; font-size:1.1em; }
div#event div#item p.title{ border-bottom:1px dotted #999999; }
div#event div#item p.text{ margin-bottom:40px; }

div#voice{ width:1280px; height:1123px; text-align:center; background-image:url(../img/voice_bg.gif); }
div#voice p#photo{ padding-top:250px; }
div#voice div#text{ width:950px; display:flex; margin-left:160px; padding-top:100px; justify-content:center; text-align:left; }
div#voice div#text p.item1{ flex: 0 1 27%; margin-left:20px; }
div#voice div#text p.item2{ flex: 0 1 27%; margin-left:70px; }
div#voice p#contact{ margin-top:100px; }
div#voice div#voice_sp{ display:none; }

div#teacher{ width:1280px; height:1088px; background-image:url(../img/teacher_bg.gif); background-repeat:no-repeat; }
div#teacher div.item1{  }
div#teacher div.item1 p.photo{ float:left;padding:200px 0 0 170px; }
div#teacher div.item1 div.text{ float:right; padding:230px 200px 0 0; width:650px; }
div#teacher div.item2{ clear:both; width:1080px; }
div#teacher div.item2 p.photo{ float:left;padding:0 0 0 170px; }
div#teacher div.item2 div.text{ float:right; width: 650px; padding:0px 0px 0px 0px; }

div#teacher div#teacher_sp{ display:none; }

div#lesson{ width:1280px; height:1665px; background-image:url(../img/lesson_bg.jpg); }
div#lesson p#title{ padding-top:130px; font-size:2.8em; color:white; text-align: center; }
div#lesson div#first{ width:950px; display:flex; margin-left:160px; padding-top:370px; justify-content:center; text-align:left; }
div#lesson div#first p.text1{ flex: 0 1 27%; margin-left:20px; }
div#lesson div#first p.text2{ flex: 0 1 27%; margin-left:70px; }
div#lesson div#second{ width:950px; display:flex; margin-left:130px; padding-top:430px; justify-content:center; text-align:left; }
div#lesson div#second p.text1{ flex: 0 1 45%; margin-left:70px; }
div#lesson div#lesson_sp{ display:none; }
div#lesson p#contact{ margin-top:100px; text-align:center; }

div#cost{ width:1280px; height:800px; background-image:url(../img/cost_bg.gif); }
div#cost p.text{ margin-left:160px; padding-top:230px; width:940px; }
div#cost table{ margin-left:160px; width:940px; background-color:#ffffff; }
div#cost table tr.table1{ background-color:#666666; color:#ffffff; }
div#cost table td.td1{ width:640px; }
div#cost table td.tdctr{ text-align:center; }
div#cost table td.tdrgt{ text-align:right; }

div#cost table tr.table2{ background-color:#990000; color:#ffffff; }
div#cost table td.td2{ width:600px; }
div#cost table td.td3{ width:300px; }
div#cost table td.td4{ width:150px; }

div#cost p#contact{ margin-top:100px; text-align:center; }

div#map{ width:1280px; height:1000px; }
div#map p#googlemap1{ }
div#map p#mapleft{ margin-left:170px; float:left; }
div#map div#mapright{ float:right; margin-right:170px; padding-top:10px; text-align:left; }
div#map p#sp_maptext{ display:none; }

div#contactform{ width:1280px; height:800px; text-align:center; background-image:url(../img/contact_bg.gif);  }
div#contactform p#title{ padding-top:50px; font-size:2.8em; }
div#contactform p#text01{ margin-bottom:30px;margin-left:240px; width:800px; text-align:left; }
div#contactform form.format{ margin-left:270px; width:700px; }

div#thanks{ width:1280px; height:700px; text-align:center; background-image:url(../img/contact_bg.gif); }
div#thanks p#title{ padding-top:130px; font-size:2.8em; }
div#thanks div#text{ margin-bottom:70px;margin-left:240px; width:800px; font-size:1.2em; }

}