@charset "UTF-8";

/*color
濃いピンク	#E7355C
中ピンク	#EB6D7A
薄いピンク	#F5BABA
薄薄ピンク	#F9D3E3
薄オレンジ	#FACC88
中オレンジ	#F39800
濃オレンジ	#EB6100
エメラルド	#00A29E
薄シアン	#C7E8FA
中シアン	#7ECEF4
薄い黄色	#FFFFCC
中黄色　	#FFF798
濃えんじ色	#56232F
薄えんじ色	#B08E93
薄ブラウン	#B89177
*/

/*フォント
"源柔ゴシック""源柔ゴシックP"
"Rounded Mgen+ 2c""Rounded Mgen+ 2cp"
"07ロゴたいぷゴシック7"
meiryo
sans-serif
*/

/*body
-------------------------------------*/
body{
	font-size: 16px;
	font-family: sans-serif;
	line-height: 1.5;
	background: #FFFFDD;
}
p{
	line-height: 1.5;
	margin-bottom: 10px;
}

.body_jukudai{
	margin: 5px 0 0 30px;
}


/*1000px
-------------------------------------*/
#container,footer{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
#container{
	background-color: #F5BABA;
	box-shadow: 0 0 10px 6px rgba(0,0,0,0.15);
}


/*960px
-------------------------------------*/
header,nav,#content{
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}


/*header
-------------------------------------*/
header{
	background: url(../images/header_back2.png);
	background-size: auto 70px;
	background-repeat: repeat-x;
	background-color: #FFFFFF;
	padding-bottom: 15px;
}

header {
	position: relative;
	height: 140px;
}
#area-left{
	font-size: 13px;
	margin:5px 0 0 10px;
	float: left;
	height: 40px;
}
#area-right{
	font-size: 13px;
	margin:5px 10px 0 0;
	float: right;
}
header #header_logo{
	position: absolute;
	top: 30px;
	left: 20px;
}

#header_Rside{
	float: right;
	width: 500px;
	margin-top: 10px;
}
#header_navi{
	float: right;
	margin-top: 5px;
	margin-right: 20px
}
#header_navi li{
	display: inline;
	padding: 0 5px;
}

#header_customer{
	float: right;
	margin-right: 20px;
	margin-bottom: 5px;
}

#header_jukudai{
	float: right;
	margin: 10px 20px 0 0;
}
#header_freedial{
	float: right;
	margin: 5px 20px 0 0;
}


/* #contentの中
-------------------------------------*/
main{
	width: 700px;
	float: left;
}
aside{
	width: 240px;
	float: right;
}
#aside_jukudai{
	margin: 5px 10px 0 0;
	float: right;
}


/*右サイドメニュー
-------------------------------------*/
#sidebanner img {
	width: 100%;
	margin-bottom: 10px;
}

#sidemenu{
	padding: 5px;
	background-color: #EB6D7A;
	border-radius: 7px;
	margin-bottom: 10px;
}
#sidemenu li a{
	display: block;
	color: #56232F;
	background-color: #FFFFCC;
	margin-bottom: 5px;
	display: block;
	border-radius: 5px;
	padding: 10px;
	font-size: 20px;
	font-weight: bold;
	font-family: "Rounded Mgen+ 2cp",meiryo,sans-serif; 
	font-weight: 400;
	text-indent: 0.5em;
	text-decoration: none;
}
#sidemenu li:last-child a{
	margin-bottom: 0;
}
#sidemenu li a:hover{
	background-color: #FACC88;
}
#sidemenu li a:visited{
	color: #B08E93;
}


/*twotop
-------------------------------------*/
#twotop_1,
#twotop_2{
	width: 300px;
	min-height: 410px;
}
#twotop_1{ float: left;}
#twotop_2{ float: right;}
div#twotop_2 h2.h_large{ font-size: 30px}	/*幅調整*/


/*ぱんくずリスト
-------------------------------------*/
#pankuzu{ margin: 5px;}
#pankuzu li{
	font-size: 14px;
	color: #56232F;
	display: inline;
}
#pankuzu li:after{
	content: " ≫ ";
}
#pankuzu li:last-child:after{
	content: "";
}


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

.box{
	border-top: solid 10px #E7355c;
	background: #fff;
	padding: 20px 20px 5px;	/*mainのwidthが700なので、残りの幅が660*/
	margin-bottom: 40px;
	text-align: justify;
	text-justify: inter-ideograph;
}
.box-2{
	border-top: solid 10px #00A29E;
	background: #fff;
	padding: 20px 20px 5px;	/*mainのwidthが700なので、残りの幅が660*/
	margin-bottom: 40px;
}
.separate_half{
	width: 310px;
	float: left;
	padding: 0 10px;	/*全幅が330pxなるように*/
}

aside .box{
	border-top: solid 10px #EB6D7A;
	background: #fff;
	padding: 20px 20px 5px;
	margin-bottom: 20px;
}

.in_box{	
	margin: auto 10px 30px;
}


/*見出し
----------------------------------*/
#pagetop{
	height: 120px;
	margin-bottom: 20px;
	border: 3px solid #56232F;
	background-image: url(../images/pagetitle.png);
}
.h_pagetop{
	display: inline-block;
	color: #56232F;
	font-size: 44px;
	font-weight: bold; /*フォント次第で消す*/
	margin: 30px 30px 0 40px;
	float: left;
}
.p_pagetop{
	font-size: 20px;
	line-height: 1.6;
	margin-top: 30px;
	float: left;
}
#pagetop .img_pagetop{
	margin-top: 10px;
	position: absolute;
	overflow: hidden;
}

.h_large{
	color: #E7355c;
	font-size: 32px;
	font-weight: bold; /*フォント次第で消す*/
	text-indent: 10px;
	background: linear-gradient(white 60%, #FACC88 60%);
	margin-bottom: 30px;
}
.h_middle{
	color: #00A29E;
	font-size: 24px;
	font-weight: bold; /*フォント次第で消す*/
	text-indent: 10px;
	background: linear-gradient(white 0%, #FFF798 0%, #FFF798 90%, white 90%);
	margin-bottom: 10px;
}
.h_small{
	font-size: 1.25em;
	line-height: 2.5;
}

.h_img{
	text-align: center;
	padding-right: 2em;
	margin-bottom: 10px;
}
.h_img:before,
.h_img:after{
	content: "◆";
	color: #00A29E;
}

.step{
	color: #EB6100;
	font-size: 32px;
	font-weight: bold; /*フォント次第で消す*/
	margin-right: 15px;
}

.caption_in_h2{
	color: #444444;
	font-size: 16.5px;
}
.caption_in_h2:before{
	content: "　※";
}


/* 手紙 index.html
-------------------------------------*/

#tegami{
	width: 700px;
	border: solid 5px #FFF798;
	margin: 0 auto 40px;
	background-color: white;
	text-align: center;
	font-family: "Rounded Mgen+ 2cp",meiryo,sans-serif; 
	font-weight: 400;
}
#tegami_body{
	width: 100%;
	padding-bottom: 40px;
	background-image: url(../images/texure_touka.jpg);
	background-size: 50% auto;
}
#tegami_body h2{
	display: inline-block;
	background: #FFFFDD;
	border: solid 5px #FFF798;
	color: #E7355C;
	font-weight: bold;
	font-size: 40px;
	padding: 5px 15px;
	margin: 30px auto;
}
#tegami_body p{
	text-align: left;
	margin: 0 30px 0 50px;
	font-size: 22px;
	line-height: 2;
}


/*トップページ　先生紹介 index.html
-------------------------------------*/
#top_teacher{
	width: 700px;
	height: 680px;
	padding-top: 20px;
	margin-bottom: 40px;
	background: url(../images/backTeacher.jpg);
	background-size: contain;
	text-align: center;
}
#top_teacher h2 img{
	width: 95%;
	margin-bottom: 10px;
}
#top_teacher ul li{
	background: #FFF798;
	width: 210px;
	margin: 0 0 20px 12px;
	border: solid 4px #FFF798; 
	float: left;
}
#top_teacher img{
	display: block;
}
#top_teacher h3{
	padding: 5px 0;
	color: #56232F;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.4;
}
#top_teacher p{
	background: #FFFFFF;
	padding: 5px;
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
	text-align: left;
}
#top_teacher a.more_teacher{
	color: #FFFF77;
	float: right;
	margin-right: 30px;
	font-family: "Rounded Mgen+ 2cp",meiryo,sans-serif; 
	font-size: 30px;
}


/*会社概要 company
-------------------------------------*/
table#company {
	width:580px;
}
table#company th {
	width:8em;
	height:3em;
	text-align:center;
	background:#ffc0cb;
	border:3px #fff solid;
	color:#9f001c;
	font-weight:bold;
}
table#company td {
	padding-top:1em;
	padding-bottom:1em;
	padding-left:1em;
	background:#ffeeee;
	border:3px #fff solid;
}


/*サイトマップ sitemap
-------------------------------------*/
#sitemapList ul{
	margin: 0 0 20px 30px;
}
#sitemapList ul.under{
	margin: 0 0 0 20px;
}
#sitemapList ul li{
	line-height: 2;
}

/*テキスト系
----------------------------*/
.indent-m5px{text-indent: -5px;}

.caution{
	margin: 5px 0;
	text-indent: -1em;
	margin-left: 1em;
}

.text-pink{ color: #E7355c; font-weight: bold;}
.text-eme{ color: #00A29E; font-weight: bold;}
.text-green{ color: #22AC38; font-weight: bold;}
.text-blue{ color: #036EB8; font-weight: bold;}
.text_enji{ color: #56232F;}
.text_gray{ color: #696969;}

.more_info{
	float: right;
	margin-top: 5px;
	margin-right: 40px;
}


/*ボタン他　コース紹介
--------------------------------*/
.squea-button {
	width: 180px;
	height: 100px;
	padding-top: 30px;
	position: relative;
	border-radius: 20px;
	color: #fff;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 #f7ba59;
    float: left;
    margin-left: 20px;
    margin-bottom: 40px;
}
.wide-button {
	display: block;
	width: 320px;
	padding: 5px;
	margin: 10px auto 40px;
	position: relative;
	border-radius: 5px;
	color: #fff;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 #f7ba59;
}
.size-free-button {
	padding: 15px 25px;
	position: relative;
	border-radius: 10px;
	color: #fff;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 #f7ba59;
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
}
.squea-button:hover,
.wide-button:hover,
.size-free-button:hover {
	top: -4px;
	box-shadow: 0 7px 0 #f7ba59;
}
.squea-button:active:active,
.wide-button:active,
.size-free-button:active {
	top: 3px;
	box-shadow: none;
}

.one_course{
	width: 610px;
	margin-left: auto;
	margin-right: auto;
	padding: 20px 15px;
}
.one_course img{
	width: 100%;
}

.bc_green{ background-color: #22AC38;}
.bc_pink{ background-color: #E7355C;}
.bc_blue{ background-color: #036EB8;}
.bc_brown{ background: #B89177;}
.border_green{ border-top: 14px solid #22AC38;}
.border_pink{ border-top: 14px solid #E7355C;}
.border_blue{ border-top: 14px solid #036EB8;}

.charge_table{
	margin-bottom: 20px;
}
.h_charge{
	font-weight: bold;
}
.h_charge:before{
	content: "◆";
	color: #F39800;
}


/*おためし授業 try
-------------------------------------*/

#try_advertising{
	display: block;
	margin: 0 auto 40px;
}

#try_application{
	display: block;
	margin: 0 0 40px 13px;
}

.try-freedial{
	font-family: "Impact標準";
	font-size: 70px;
	padding-left: 20px;
}

.try-freedial:before {
	content: url(../images/mark_freedial.png)" ";
	position: relative;
	top: 4px;
}
.call-time{
	font-size: 20px;
	padding-left: 20px;
}
.call-caption{
	font-size: 24px;
}
.otoiawase{
	padding: 5px;
	margin: 0 20px 20px;
	background-color: #DDD;	
}

.oyakusoku{
	background-color: #FFFBD0;
	border: dotted 2px #F29600;
	background-image: url(../images/kangaroo_01.png);
	background-size: 27% auto;
	background-position: right bottom;
	background-repeat: no-repeat;
	font-family: "Rounded Mgen+ 2cp",meiryo,sans-serif; 
	font-weight: 400;
	margin: 0 auto 40px;
}
.oyakusoku h2{
	font-size: 24px;
	font-weight: bold;
	color: #F29600;
	margin: 5px 12px;
}
.oyakusoku p{
	margin: 0; /*reset*/
	width: 68%;
	padding: 10px 0 10px 15px;
	border-top: solid 5px #F29600;
	text-align: justify;
	text-justify: inter-ideograph;
}

#threePoint{
	font-family: "Rounded Mgen+ 2cp",meiryo,sans-serif; 
	font-weight: 400;
	margin: 0 40px;
}
#threePoint h3{
	font-size: 28px;
	font-weight: bold;
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: solid 1px #222;
	line-height: 1.25;
}
#threePoint h3 span.no{
	display: inline-block;
	background-color: #F8D2E3;
	text-align: center;
	width: 35px;
	margin-right: 5px;
}
#threePoint p{
	font-size: 18px;
	line-height: 1.5;
	text-align: justify;
	text-justify: inter-ideograph;
}

#tryQa{
	font-family: "Rounded Mgen+ 2cp",meiryo,sans-serif; 
	font-weight: 400;
	margin: 0 25px;
}
#tryQa h3 img{

}
#tryQa p{
	font-size: 18px;
	margin: 0 30px 25px;
	line-height: 1.5;
	text-align: justify;
	text-justify: inter-ideograph;
}
span.answer{
	font-size: 20px;
	font-weight: bold;
	color: #E7355C;
	margin-left: -10px;
}



/*資料請求 pamphlet
-------------------------------------*/
#pamphlet_img{
	display: inline-block;
	margin-left: 5%;
	padding: 2%;
	background: #B89177;
}

#present img{
	display: block;
	margin: 0;
}

/*トップへ戻る
-------------------------------------*/



/*フッター
-------------------------------------*/
footer{
	width: 100%;
	margin-top: 30px;
	padding-top: 20px;
	background-color: #FFFFAA;
	font-family: meiryo;
}

div#footer{
	width: 960px;
	margin: 0 auto;
}

footer td{
	line-height: 1.4;
	width:220px;
	padding: 0 10px;
}

footer td.form{
	padding: 20px;
	text-align: center;
}

footer table#summary{
	width: 100%;
	border-top: solid 1px #B08E93;
	border-bottom: solid 1px #B08E93;
}

footer table#summary td.left{
	width: 400px;
	font-size: 16px;
}
footer table#summary td.left img{
	width: 250px;
	display: block;
	float: left;
	margin-right: 20px;
}
footer table#summary td.left p{
	float: left;
}

footer table#summary td.right{
	width: 300px;
	padding: 20px 0;
	line-height: 1.2;
}

footer table#summary span.tel{
	color: #FF4500;
	font-size: 25px;
}

footer table#summary span.tel_number{
	color: #FF4500;
	font-size: 55px;
	font-family: "Impact標準";
}

footer table#summary span.hours{
	font-size: 18px;
}

address{
	padding: 10px 0;
	text-align:center;
}

/*パーツ的に使うclass
使うとレンスポンシブ化するときめんどくさいかも。。。
-------------------------------------*/
.hidden{ text-indent:-9999px;}

img{max-width: 100%}

.center{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.float-L{
	float: left;
}
.float-R{
	float: right;
}

.ma-t5{ margin-top: 5px;}
.ma-t10{ margin-top: 10px;}
.ma-t20{ margin-top: 20px;}
.ma-t30{ margin-top: 30px;}
.ma-t40{ margin-top: 40px;}
.ma-L5{ margin-left: 5px;}
.ma-L10{ margin-left: 10px;}
.ma-L20{ margin-left: 20px;}
.ma-L30{ margin-left: 30px;}
.ma-L40{ margin-left: 40px;}
.ma-R5{ margin-right: 5px;}
.ma-R10{ margin-right: 10px;}
.ma-R20{ margin-right: 20px;}
.ma-R30{ margin-right: 30px;}
.ma-R40{ margin-right: 40px;}
.ma-b5{ margin-bottom: 5px;}
.ma-b10{ margin-bottom: 10px;}
.ma-b20{ margin-bottom: 20px;}
.ma-b30{ margin-bottom: 30px;}
.ma-b40{ margin-bottom: 40px;}

.pa-t5{ padding-top: 5px;}
.pa-t10{ padding-top: 10px;}
.pa-t20{ padding-top: 20px;}
.pa-t30{ padding-top: 30px;}
.pa-t40{ padding-top: 40px;}
.pa-t5{ padding-top: 5px;}
.pa-t10{ padding-top: 10px;}
.pa-t20{ padding-top: 20px;}
.pa-t30{ padding-top: 30px;}
.pa-t40{ padding-top: 40px;}
.pa-L5{ padding-left: 5px;}
.pa-L10{ padding-left: 10px;}
.pa-L20{ padding-left: 20px;}
.pa-L30{ padding-left: 30px;}
.pa-L40{ padding-left: 40px;}
.pa-R5{ padding-right: 5px;}
.pa-R10{ padding-right: 10px;}
.pa-R20{ padding-right: 20px;}
.pa-R30{ padding-right: 30px;}
.pa-R40{ padding-right: 40px;}
.pa-b5{ padding-bottom: 5px;}
.pa-b10{ padding-bottom: 10px;}
.pa-b20{ padding-bottom: 20px;}
.pa-b30{ padding-bottom: 30px;}
.pa-b40{ padding-bottom: 40px;}

.w10{ width: 10%;}
.w15{ width: 15%;}
.w20{ width: 20%;}
.w25{ width: 25%;}
.w30{ width: 30%;}
.w35{ width: 35%;}
.w40{ width: 40%;}
.w45{ width: 45%;}
.w50{ width: 50%;}
.w55{ width: 55%;}
.w60{ width: 60%;}
.w65{ width: 65%;}
.w70{ width: 70%;}
.w75{ width: 75%;}
.w80{ width: 80%;}
.w85{ width: 85%;}
.w90{ width: 90%;}
.w95{ width: 95%;}
.w100{ width: 100%;}



/*フォント
-------------------------------------*/
@font-face {
	font-family: "Rounded Mgen+ 2cp";
	src: url(../font/rounded-mgenplus-2cp-medium.ttf) format("truetype");
    font-weight: 400;
}
@font-face {
	font-family: "Rounded Mgen+ 2cp";
	src: url(../font/rounded-mgenplus-2cp-bold.ttf) format("truetype");
    font-weight: 700;
}
@font-face {
	font-family: "Impact標準";
	src: url(../font/impact.ttf) format("truetype");
}