@charset "UTF-8";
/*====================================================================

  リセット

====================================================================*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, 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, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    background:transparent;
}
h1, h2, h3, h4, h5, h6 {line-height: 130%;}
img {vertical-align: bottom;}
body {line-height:150%;}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
nav ul {list-style:none;}
blockquote, q {quotes:none;}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}

input, select {vertical-align:middle;}
/*====================================================================

  設定

====================================================================*/
html,body {
	color:#333333;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
	background: #FFFFFF;
}

a:link {color:#3E3834; text-decoration:none;}
a:visited {color:#3E3834; text-decoration:none;}
a:hover {color:#3E3834; text-decoration:none}

.underl {text-decoration:underline;}

a:hover img {
	opacity: 0.8 ;
	filter: alpha(opacity=80) ;	
	-ms-filter: "alpha(opacity=80)";
	}
a img {
	-webkit-transition: opacity 0.4s ease-out;
	-moz-transition: opacity 0.4s ease-out;
	-ms-transition: opacity 0.4s ease-out;
	transition: opacity 0.4s ease-out;
}
a {
	-webkit-transition: 0.4s ;
	transition: 0.4s ;
}

.fs_80 {font-size:80%;}
.fs_90 {font-size:90%;}
.fs_110 {font-size:110%;}
.fs_120 {font-size:120%;}
.fs_140 {font-size:140%;}

strong {font-weight:normal;}
caption, th, td {font-weight: normal;}
.b {font-weight:bold;}

.ta_c {text-align:center;}
.ta_r {text-align:right;}
.ta_l {text-align:left;}

.f_l {float:left;}
.f_r {float:right;}
.clear {clear:both}

.clear_fix:before, .clear_fix:after {content: " ";display: table;}
.clear_fix:after {clear: both;}
.clear_fix {*zoom: 1;}

 p {line-height:180%;}

.fuwatAnime {
 -webkit-animation-fill-mode:none;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.0s;
 -ms-animation-duration:1.0s;
 animation-duration:1.0s;
 -webkit-animation-name: fuwatAnime;
 -ms-animation-name: fuwatAnime;
 animation-name: fuwatAnime;
 visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
 0% { opacity: 0.5; -webkit-transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fuwatAnime {
 0% { opacity: 0.5; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
i {	padding: 0 1rem;}

/* ==================================================================================================================

 共通CSS

================================================================================================================== */

html {font-size: 62.5%;}
body {font-size:1.5rem;}
.container {margin: 0 auto;}
.bg_y {background: #FFF5C8;}

/*====================================================================
 header
====================================================================*/
h1 {
	background: #96DC00;
	text-align: center;
	color: #FFFFFF;
	line-height: 200%;
	font-weight: normal;
	font-size: 1.7rem;
	text-shadow: 1px 1px 1px #64C800;
	letter-spacing: 0.1rem;
}
#logo {
	float: left;
	margin: 1% 0;
	width: 25%;
}
#logo img {
	width: 100%;
}
#header_right {
	float: right;
	width: 72%;
}
#header_tel {
	float: left;
	width: 50%;
	margin: 1.5% 0;
	text-align: right;
}
#header_mail {
	float: right;
	width: 50%;
	margin: 1.5% 0;
	text-align: right;	
}
#header_tel img, #header_mail img {
	width: 100%;
	max-width: 290px;
}
#header_add {
	text-align: center;
}
nav {
	background: #64C800;
}
#menu_nav {
	width: 90%;
	margin: 0 auto;
	box-sizing: border-box;
	border-right:1px solid #A2DE66;
}
#menu_nav li {
	float: left;
	text-align: center;
	width: 20%;
	box-sizing: border-box;
	border-left:1px solid #A2DE66; 
}
#menu_nav li a {
	width: 100%;
	height: 100%;
	display: block;
	padding: 11px 0;
}
#menu_nav li a:hover img {
	opacity: 1.0 ;
}
#menu_nav li a:hover {
	background: #96DC00;
}

/*====================================================================
 main img
====================================================================*/
#main_img_wrap {
	padding: 1% 0 0 0;
}
#main_img_wrap .container {
	padding:0 !important;
}
#main_img {
	max-width: 980px;
	position: relative;
	margin: 0 auto;
}
#main_img img {
	width: 100%;
}
.pic {
	position: absolute;
}
.pic img {
	width: 100%;
	height: auto;
	opacity:0;
	-moz-animation: imgTrans 20s infinite;
	-webkit-animation: imgTrans 20s ease-in infinite;
	animation: imgTrans 20s infinite;
}
#photo1 img {
	-moz-animation-delay: 0s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
#photo2 img {
	-moz-animation-delay: 5s;
	-webkit-animation-delay: 5s;
	animation-delay: 5s;
}
#photo3 img {
	-moz-animation-delay: 10s;
	-webkit-animation-delay: 10s;
	animation-delay: 10s;
}
#photo4 img {
	-moz-animation-delay: 15s;
	-webkit-animation-delay: 15s;
	animation-delay: 15s;
}
@-webkit-keyframes imgTrans {
	0% { opacity:0; }
	6% { opacity:1; }
	34% { opacity:1; }
	40% { opacity:0; }
	100% { opacity:0; }
}
@-moz-keyframes imgTrans {
	0% { opacity:0; }
	6% { opacity:1; }
	34% { opacity:1; }
	40% { opacity:0; }
	100% { opacity:0; }
}
@keyframes imgTrans {
	0% { opacity:0; }
	6% { opacity:1; }
	34% { opacity:1; }
	40% { opacity:0; }
	100% { opacity:0; }
}
main .container {
	padding: 3% 0;
}
/*====================================================================
 sub_img
====================================================================*/
#sum_img_wrap {
	margin: 2% auto 0 auto;
	box-sizing: border-box;
	max-width: 980px;
}
#sub_img {
	float: left;
	width: 68%;
	border: 1px solid #64C800;
}
#sub_img img {
	width: 100%;
}
#tw {
	float: right;
	width: 30%;
	color: #FFFFFF;
	border: 1px solid #64C800;
}
.twitter-timeline {
	color: #FFFFFF;
}
/*====================================================================
 contents
====================================================================*/
main h2 {
	background: #64C800;
	text-align: center;
	font-size: 3.0rem;
	padding: 2.0rem 1.0rem;
	color: #FFFFFF;
	letter-spacing: 0.15rem;
}
main h2 span {
	display: block;
	font-size: 70%;
	font-weight: normal;
}
/*====================================================================
 footer
====================================================================*/
footer {
	margin-top: 1.5%;
}
footer .container {
	padding: 1% 0;
}
#about_plan a, #about_flow a {
	box-sizing: border-box;
	text-align: center;
	font-size: 2.3rem;
	padding: 2.0rem 1.0rem;
	border-radius: 10px;
} 
#about_plan {
	width: 48%;
	float: left;
	background: linear-gradient(#A5D500, #64C800);
	border: 1px solid #4B9600;
	border-bottom: 4px solid #4B9600;
	border-radius: 10px;
}
#about_flow {
	width: 48%;
	float: right;
	background: linear-gradient(#FF9800, #FF6400);
	border: 1px solid #BF4B00;
	border-bottom: 4px solid #BF4B00;
	border-radius: 10px;
}
#about_plan a:link, #about_flow a:link  {
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	width: 100%;
	height: 100%;
}
#about_plan a:hover, #about_flow a:hover  {color: #FFFFFF; text-decoration: none;}
#about_plan a:hover {background: #64C800;}
#about_flow a:hover {background: #FF6400;}
#about_plan a:visited, #about_flow a:visited  {color: #FFFFFF; text-decoration: none;}

#about_plan i, #about_flow i {font-size: 120%;}

#taiken img {width: 100%;}

#footer_contact {
	border: 4px solid #64C800;
	text-align: center;
	padding: 0;
	margin: 1.5% auto;
	box-sizing: border-box;
}
#footer_contact h2 {
	font-size: 2.2rem;
	color: #FFFFFF;
	background: #64C800;
	padding: 1rem;
	font-weight: normal;
}
#footer_left {
	width: 38%;
	float: left;
	padding: 2% 0 2% 2%;
}
#footer_left img {
	width: 100%;
	max-width: 310px;
	margin-bottom: 5%;
}
#footer_left table {
	width: 100%;
	box-sizing: border-box;
}
#footer_left table th {
	color: #FFFFFF;
	background: #64C800;
	padding: 0.5rem;
}
#footer_left table td {
	padding: 0.5rem;
}
#footer_right {
	width: 55%;
	float: right;
	padding: 2% 2% 2% 0;
}
#footer_wrap {
	width: 96%;
	margin: 0 auto 2% auto;
}
#footer_wrap a:hover img, {
	opacity: 1.0 ;
}
#footer_tel a, #footer_mail a {
	box-sizing: border-box;
	text-align: center;
	padding: 2.0% 1%;
	border-radius: 10px;
}
#footer_tel {
	width: 48%;
	float: left;
	background: linear-gradient(#64E100, #00C800);
	border: 1px solid #329600;
	border-bottom: 5px solid #329600;
	border-radius: 10px;
}
#footer_mail {
	width: 48%;
	float: right;
	background: linear-gradient(#FFFF00, #FFC800);
	border: 1px solid #C89600;
	border-bottom: 5px solid #C89600;
	border-radius: 10px;
}
#footer_tel a:link, #footer_mail a:link  { display: block; width: 100%; height: 100%;}
#footer_tel a:hover {background: #00C800;}
#footer_mail a:hover {background: #FFC800;}

#footer_tel img, #footer_mail img {
	width: 100%;
	max-width: 360px;
}

#twitter {
	text-align: center;
}
#twitter img {
	border-radius: 10px;
}
#copy {
	background: #64C800;
	text-align: center;
	color: #FFFFFF;
	font-size: 1.1rem;
	padding: 1.5%;
	margin-top: 3%;
}
#copy i {
	color: #FFFFFF;
	font-size: 2.4rem;
	margin-bottom: 1%;
}

/*====================================================================
 index
====================================================================*/
.top1 p {
	text-align: center;
	font-size: 2.4rem;
}
.top1 div {
	text-align: center;
	font-size: 2.0rem;
	margin-top: 2%;
	color: #999999;
}
.top1 span {
	font-weight: bold;
}

#tokuchou_box {}
#tokuchou_box dl {
	width: 48%;
	float: left;
	box-sizing: border-box;
	margin: 1%;
	padding: 2%;
	border: 3px solid #64C800;
	background: #FFFFFF;
	border-radius: 10px;
}
#tokuchou_box dt {
	border-bottom: 2px solid #64C800;
	padding-bottom: 1.0rem;
	font-size: 1.9rem;
	text-align: center;
	margin-bottom:  1.5rem;
	font-weight: bold;
}
#nayami img {width: 100%;}

.nayami_p {
	text-align: center;
	font-size: 110%;
	margin-bottom: 4%;
}
.nayami_p p {
	margin: 2.0rem 0;
}
.nayami_p strong {
	font-size: 120%;
	color: #FF9600;
	font-weight: bold;
}

#kobetsu table {
	box-sizing: border-box;
}
#kobetsu th {
	width: 33%;
	padding: 2%;
	vertical-align: top;
	border-bottom: 1px solid #FFFFFF;
}
#kobetsu th img {
	width: 100%;
}
#kobetsu td {
	width: 67%;
	padding: 2%;
	border-bottom: 1px solid #FFFFFF;
}

.c_1 {background: #64C800;} 
.c_2 {background: #C1E999;} 
.c_3 {background: #FF9600;} 
.c_4 {background: #FFD599;} 
.c_5 {background: #9664C8;} 
.c_6 {background: #D5C1E9;} 
.c_7 {background: #00C8FF;} 
.c_8 {background: #99E9FF;} 
.c_9 {background: #FCEE21;} 

/*====================================================================
 about
====================================================================*/
.ict_box {
	background: #FFFFFF;
	box-sizing: border-box;
	width: 100%;
	padding: 3%;
	margin: 2% 0;
}
.ict_box_bun {
	width: 65%;	
}
.ict_box_bun img {
	width: 100%;
	margin-bottom: 2%;
}

.ict_box_img {width: 33%;}
.ict_box_img img {width: 100%;}

.fc_01 {color: #FF9600;}
.fc_02 {color: #00C8FF;}
.fc_03 {color: #9664C8;}
.fc_04 {color: #64C800;}
.fc_05 {color: #FF3250;}

.seiseki {
	width: 48%;
	margin: 1%;
	float: left;
}
.seiseki img {
	width: 100%;
}	
#seito_koe {
	background: #64C800;
	color: #FFFFFF;
	margin: 3% auto;
	box-sizing: border-box;
	padding: 3% 4%;
}
#seito_koe p {
	float:left;
	width: 68%;
}
#seito_koe img {
	float: right;
	width: 30%;
}
.jishuu_img {
	width: 40%;
	float: left;
}
.jishuu_img img {
	width: 100%;
}
.jishuu_p {
	width: 58%;
	float: right;
}
.jishuu_p h3 {
	font-size: 2.4rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid #333333;
}

/*====================================================================
 system
====================================================================*/
#surara {
	box-sizing: border-box;
	border: 15px solid #96DC00;
	border-bottom: none;
	background: #FFFFFF;
	text-align: center;
	margin-top: 3%;
}
#surara2 hr {
    display:block;
    height:2px;
    border:0;   
    margin:1% 0;
    padding:0;
	border-top: 2px dotted #64C800;
}
#surara h3 {
	background: #FFFF00;
	font-size: 2.8rem;
	color: #64C800;
	padding: 1.0rem;
	margin-bottom: 1%;
}
#surara p {
	color: #64C800;
	font-size:2.0rem;
	line-height: 130%;
}
#surara2 {
	box-sizing: border-box;
	border: 15px solid #96DC00;
	border-top: none;
	background: #FFFFFF;
	padding: 3%;
	margin-bottom: 1%;
}
#gakkai {
	margin: 2% 0;
}
#gakkai h3 {
	font-size: 2.0rem;
	text-align: center;
	margin-bottom: 1%;
}
#gakkai_p {
	width: 68%;	
}
#gakkai_img {
	width: 30%;	
}
#gakkai_img img {width: 100%;}

.surara_point {
	margin: 3% 0;
}
.surara_img {
	width: 14%;
	float: left;
	text-align: center
}
.surara_img img {
	max-width: 120px;
	width: 100%;
}
.surara_p {
	width: 84%;
	float: right;
}
.surara_p h3 {
	font-size: 2.2rem;
	color: #64C800;
	border-bottom: 1px solid #64C800;
	margin-bottom: 1%;
	padding: 0 0 1% 1%;
}
#kyouzai{}

.kyouzai_box {
	box-sizing: border-box;
	background: #FFFFFF;
	padding: 3%;
	margin: 2% 0;
	border: 15px solid #3565A9;
}
.kyouzai_box_img {
	width: 45%;
	float: left;
}
.kyouzai_box_img img {
	max-width: 398px;
	width: 100%;	
}
.kyouzai_box_p {
	width: 53%;
	float: right;
}
.more {
	width: 80%;
	font-size: 1.7rem;
	text-align: center;
	border: 2px solid #09326D;
	border-bottom: 4px solid #09326D;
	border-radius: 10px;
	padding: 3% 0;
	margin: 2% auto 0 auto;
	background: linear-gradient(#074FA5, #023F94);
}
.more a {
	display: block;
	width: 100%;
	height: 100%;
	color: #FFFFFF;
}
.button img {
	border: 1px solid #BBBBBB;
	border-bottom: 4px solid #BBBBBB;
	border-radius: 10px;
	margin-bottom: 1%;
}
#douga {
	margin-top: 3%;
}
#douga div {
	width: 32.3%;
	float: left;
	box-sizing: border-box;
	padding:2% 1%;
	background: #FFF5C8;
	margin: 0.25%;
	border: 3px solid #64C800;
	text-align: center;
	border-radius: 10px;
}
#douga div h4 {
	font-size: 1.9rem;
	border-bottom: 2px solid #64C800;
	padding-bottom: 2%;
	margin-bottom: 2%;
}
#douga div p {
	font-size: 1.6rem;
}
#douga i {
	color: red;
}
#site {
	margin-top:3%; 
}
#site a {
	width: 24%;
	margin: 0.5%;
	float: left;
	box-sizing: border-box;
	border: 1px solid #CCCCCC;
}
#site img {
	width: 100%;
}
/*====================================================================
 plan
====================================================================*/
#price h3 {
	color: #FFFFFF;
	text-align: center;
	padding: 1.0rem 0.5rem;	
	font-size: 2.4rem;
	margin-bottom: 1%;
	border-radius: 10px;
}
#price h3 span {
	font-size: 1.8rem;
	font-weight: normal;
}
#price table {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}
#price th {
	width: 20%;
	font-size: 1.6rem;
	color: #FFFFFF;
	padding: 2%;
	border: 1px solid #FFFFFF;
}
#price td {
	width: 20%;
	padding: 2%;
	border: 1px solid #CCCCCC;
	font-size: 2.0rem;
	background: #FFFFFF;
}
#price td span {
	font-size: 1.3rem;
}
#chuugakusei th {background: #00C8FF;}
#chuugakusei .course {
	background: #EBFBFF;
	font-size: 1.8rem;
	color: #00C8FF;
	font-weight: bolder;	
}
#chuugakusei p {margin: 2% 0}
#koukousei th {background: #FF9600;}
#koukousei .course {
	background: #FFEED6;
	font-size: 1.8rem;
	color: #FF9600;
	font-weight: bolder;	
} 

#otona th {background: #9664C8;}
#otona .course {
	background: #EEE6F6;
	font-size: 1.8rem;
	color: #9664C8;
	font-weight: bolder;	
}
#otona p {margin: 2% 0}
#chuugakusei, #koukousei, #otona {
	margin-bottom: 4%;
}
#nyuukai th {background: #64C800;}

.flow_step {
	padding: 1.5%;
}
.flow_step_img {
	width: 14%;
	float: left;
	text-align: center
}
.flow_step_img img {
	max-width: 120px;
	width: 100%;
}
.flow_step_p {
	width: 84%;
	float: right;
	background: #FFFFFF;
}
.flow_step_p h3 {
	font-size: 2.2rem;
	color: #64C800;
	border-bottom: 1px solid #64C800;
	margin-bottom: 1%;
	padding: 0 0 1% 1%;
}
.flow_step_p {
 	position: relative;
	display: inline-block;
	padding: 3%;
	min-width: 120px;
 	max-width: 100%;
 	border: solid 3px #96DC00;
 	box-sizing: border-box;
}
.flow_step_p:before{
	content: "";
	position: absolute;
	top: 50%;
	left: -24px;
 	margin-top: -12px;
	border: 12px solid transparent;
	border-right: 12px solid #FFF;
 	z-index: 2;
}
.flow_step_p:after{
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
 	margin-top: -14px;
	border: 14px solid transparent;
	border-right: 14px solid #96DC00;
 	z-index: 1;
}
.type2 {
	background: #FFFFFF;
	color: #64C800;
	border-bottom: 1px solid #64C800;
}
/* ==================================================================================================================

768px以下 

================================================================================================================== */

@media screen and (max-width: 768px) {
.sp_none {display: none;}
.container {
	width: 96%;
}
html {
	font-size: 62.5%;
	max-width: 768px;
	min-width: 480px;
}
h1 { font-size: 1.2rem;letter-spacing: 0rem; }
#header_add { font-size: 1.2rem; }
#menu_nav {
	width: 104%;
	margin: 0 -2%;
}
#menu_nav li img {
	width: 84%;
	max-width: 96px;
}

#sub_img {
	float: none;
	width: 100%;
	border: 1px solid #CCCCCC;
	margin-bottom: 2%;
}
#tw {
	float: none;
	width: 100%;
}	
#footer_contact h2 {
	font-size: 2.0rem;
}
.top1 p { font-size: 1.8rem;}
#tokuchou_box dl {
	width: 100%;
	float: none;
}
main h2 {
	font-size: 2.4rem;
	padding: 1.2rem 0.5rem;
}
#about_plan a, #about_flow a {
	font-size: 1.8rem;
	padding: 1.2rem 0.2rem;
}
.ict_box_bun {
	width: 100%;	
}
.ict_box_img {
	width: 80%;
	margin: 2% auto 0 auto;
}
.f_r {float: none;}
.f_l {float: none;}
	
.seiseki {
	width: 90%;
	margin: 1% auto;
	float: none;
}
#seito_koe p {
	float: none;
	width: 100%;
}
#seito_koe img {
	float: none;
	width: 80%;
	display: block;
	margin: 2% auto 0 auto;
}	
.jishuu_img {
	width: 80%;
	float: none;
	margin: 0 auto;
}
.jishuu_p {
	width: 100%;
	float: none;
}
.jishuu_p h3 {
	font-size: 2.2rem;
	margin-top: 2.0rem;
}	
.kyouzai_box_img {
	width: 100%;
	float: none;
	margin: 0 auto;
	text-align: center;
}
.kyouzai_box_p {
	width: 100%;
	float: none;
}
.more {
	margin:2rem auto 0 auto;
}
#gakkai_p {
	width: 100%;	
}
#gakkai_img {
	width: 60%;
	margin: 0 auto;
}
#gakkai_img img {width: 100%;}

#douga div {
	width: 100%;
	float: none;
	text-align: left;
}
#douga h4 {
	padding-left: 3rem;
}
#douga p {
	padding-left: 3rem;
}
#site a {
	width: 49%;
}
#footer_left {
	width: 96%;
	float: none;
	padding: 2%;
}
#footer_left img {
	max-width: 200px;
	margin-bottom: 2%;
}
#footer_right {
	width: 96%;
	float: none;
	padding: 0 2% 2% 2%;
}
}

/* ==================================================================================================================

768px以上 

================================================================================================================== */
@media screen and (min-width: 768px) {
.pc_none {display: none;}
.container {
	width: 96%;
}
}
/* ==================================================================================================================

1000px以上 

================================================================================================================== */
@media screen and (min-width: 1000px) {
.container {
    width: 1000px;
}
}