@charset "utf-8";

body {
	width:100%;
	text-align:center;
	margin:	0;
	padding: 0;
	color: #333333;
	background: #FFFFFF;
	font-size: 14px;
	line-height: 200%;
	font-family: "Sawarabi Gothic", sans-serif;
}

.h5 { height: 5px; }
.h10 { height: 10px; }
.h15 { height: 15px; }
.h20 { height: 20px; }
.h30 { height: 30px; }
.h40 { height: 40px; }
.h50 { height: 50px; }
.h80 { height: 80px; }
.h480 { height: 480px; }

#Top {
	width:100%;
	text-align:center;
	margin:0 auto;
}
p {
	color: #555555;
	font-size: 14px;
	line-height: 200%;
	margin-right: 0px;
}
img {
	margin: 0px;
	padding: 0px;
	border-style:none;
}
a img {
	border-style:none;
	vertical-align: middle;
}
a {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
.cb{
  /* floatを解除 */
  clear: both;
}

/* 共通スタイル
-----------------------------------------------------*/
a:hover img {
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);	/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}
 
a img {
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}

a {
	font-decoration: none;
	font-family: "Sawarabi Gothic", sans-serif;
	color:#151d88;
}

a:visited {
	font-decoration: none;
	font-family: "Sawarabi Gothic", sans-serif;
	color:#151d88;
}

a:hover {
	font-decoration: none;
	font-family: "Sawarabi Gothic", sans-serif;
	color:#151d88;
}

.clear { 
	clear: both;
	visibility: hidden;
	height: 0;
}

/* コンテンツ
----------------------------------------------------------*/
#wrapper {
	width:100%;
	text-align:center;
	margin:	0 auto;
	margin-bottom:	50px;
	font-family: "Sawarabi Gothic", sans-serif;
	font-size: 14px;
	line-height: 200%;
}
.cb {
  /* floatを解除 */
	clear: both;
}


/* ===================================================== */
/* モバイル                                              */
/* ===================================================== */
@media screen and (max-width: 768px){

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    word-wrap:break-all;
}
#for_PC	{display: none;}
#for_Phone {display: inherit;}

body {
	width100%;
	text-align:center;
	margin:	0 auto;
	color: #333333;
	background: #FFFFFF;
	font-size: 15px;
	line-height: 230%;
	font-family: "Sawarabi Gothic", sans-serif;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align:top;
}
.small {
	font-size: 15px;
}
#wrapper_sp {
	width: 100%;
}
#wrapper_sp_inner {
	width: 90%;
	margin:	0 auto;
}
.lead {
	width: 100%;
	background: #eec08f;
}
.lead_inner {
	width: 90%;
	font-size: 17px;
	line-height: 180%;
	text-align: left;
	margin: 0 auto;
	padding-bottom: 20px;
}
.school {
	padding-top: 30px;
	padding-bottom: 30px;
	background-position: center center;
	background-size: auto;
	background-repeat: no-repeat;
	background: #eaeaea;
}
.school_inner {
	width: 100%;
	margin: 0 auto;
	margin-top: 0px;
}
.school_inner a:hover {
	color: #59bded;
}

.school_list {
	padding-top: 0px;
	width: 90%;
	margin: 0 auto;
}

.school_list:after {
	content: "";
	display: block;
	clear: both
}

.school_left {
	float: left;
	width: 100%;
	text-align: left;
	margin-right: 40px;
	font-size: 0.9em;
	line-height: 150%;
	padding-bottom: 0px;
}
.school_right {
	float: left;
	width: 100%;
	text-align: left;
	font-size: 0.9em;
	line-height: 150%;
	margin-bottom: 50px;
}
.school_green, .school_blue, .school_red {
	font-size: 18px;
	line-height: 250%;
}
.school_blue:before {
	font-size: 18px;
	position: relative;
	top: 3px;
	margin: 0 5px 0 0;
	content: url('../images/icon_blue.gif');
}
.school_green:before {
	font-size: 18px;
	position: relative;
	top: 3px;
	margin: 0 5px 0 0;
	content: url('../images/icon_green.gif');
}
.school_red:before {
	font-size: 18px;
	position: relative;
	top: 3px;
	margin: 0 5px 0 0;
	content: url('../images/icon_red.gif');
}

.topic {
	width: 100%;
	margin: 0 auto;
	font-size: 18px;
	line-height: 180%;
	text-align: left;
}
.topic_title {
	font-size: 22px;
	font-weight: bold;
	line-height: 180%;
	color: #0054a7;
	text-align: left;
	background: url('../images/topic_line.gif');
	padding-top: 30px;
}
.topic_mid {
	font-size: 19px;
	color: #e74291;
	line-height: 200%;
	text-align: left;
	padding-bottom: 7px;
	border-bottom: dotted 1px #e74291;
}
.wb {
	width: 100%;
	margin: 0 auto;
	margin-top: 0px;
}

.wb:after {
	content: "";
	display: block;
	clear: both
}

.wb_left {
	float: left;
	width: 100%;
	text-align: left;
	margin-right: 40px;
	font-size: 18px;
	line-height: 180%;
}
.wb_right {
	float: left;
	width: 100%;
	text-align: left;
}

.wb_left60 {
	float: left;
	width: 100%;
	text-align: left;
	margin-right: 40px;
	font-size: 18px;
	line-height: 180%;
}
.wb_right40 {
	float: left;
	width: 100%;
	text-align: left;
}



#footer {
	width:100%;
	height:	200px;
	margin-top: 80px;
	text-align:center;
	background: #0054a7;
}
#footer_inner {
	width:90%;
	margin: 0 auto;
	padding-top: 30px;
	font-size: 20px;
	color: #FFF;
}
#footer_inner a {
	color: #FFF;
	font-size: 15px;
}
#footer_inner a:hover {
	color: #59bded;
	font-size: 15px;
}

#pagetop{
	display: none;
        }

#pagetop:hover {
	opacity: 0.8; }

/*=====================
ガイド（モバイル）
=======================*/

#back_guide_menu_inner {
	background: #e73674;
	width: 100%;
	padding: 30px 0px;
	margin: 0 auto;
}
.menu {
	margin-bottom: 15px;
}
.guide_title {
	margin-top: 15px;
	font-size: 25px;
	font-weight: bold;
	line-height: 170%;
	color: #003786;
	text-align: center;
	width: 100%;
}
.guide_mid {
	font-size: 25px;
	color: #e74291;
	line-height: 250%;
	text-align: center;
	padding-bottom: 7px;
	border-bottom: dotted 1px #e74291;
}

}

/* ===================================================== */
/* PC                                                    */
/* ===================================================== */
@media screen and (min-width:769px) and (max-width:2046px){

#for_PC	{display: inherit;}
#for_Phone {display: none;}

#wrapper {
	width:100%;
	text-align:center;
	margin:	0 auto;
	font-size: 100%;
	line-height: 200%;
	font-family: "Sawarabi Gothic", sans-serif;
}

#back_title {
	height: 1126px;
	background: url('../images/back_title.gif');
	background-position: center center;
	background-size: auto;
	background-repeat: no-repeat;
}

#back_title_demo {
	height: 1260px;
	background: url('../images/back_title_demo.gif');
	background-position: center center;
	background-size: auto;
	background-repeat: no-repeat;
}

#back_title_inner {
	padding-top: 35px;
	width: 1000px;
	margin: 0 auto;
}
#back_title_inner:after {
	content: "";
	display: block;
	clear: both;
}

.lead {
	padding-top: 230px;
	font-size: 26px;
	line-height: 220%;
	text-align: left;
}
.book {
	height: 533px;
	background: url('../images/back_book.gif') no-repeat;
	margin-top: 50px;
}

.bookbt {
	height: 533px;
	background: url('../images/back_book.gif') no-repeat;
	margin-top: 50px;
	margin-left: 10%;
	margin-right: 10%;
}

.book_btn {
	padding-top: 350px;
	padding-left: 300px;
}

.book_btn2 {
	padding-top: 350px;
	padding-left: 280px;
}

.school {
	margin-top: 30px;
	height: 1100px;
	background: url('../images/back_school2.gif') no-repeat;
	background-position: center center;
	background-size: auto;
	background-repeat: no-repeat;
}
.school_inner {
	width: 1000px;
	margin: 0 auto;
	margin-top: 0px;
}
.school_inner a:hover {
	color: #59bded;
}

.school_list {
	padding-top: 200px;
	width: 930px;
	margin: 0 auto;
	margin-top: 0px;
}

.school_list:after {
	content: "";
	display: block;
	clear: both
}

.school_left {
	float: left;
	width: 31%;
	height: 700px;
	text-align: left;
	margin-right: 35px;
	font-size: 19px;
	line-height: 250%;
}
.school_right {
	float: left;
	width: 30%;
	height: 700px;
	text-align: left;
	font-size: 19px;
	line-height: 250%;
}
.school_green, .school_blue, .school_red {
	font-size: 0.9em;
	line-height: 250%;
}
.school_blue:before {
	font-size: 18px;
	position: relative;
	top: 3px;
	margin: 0 5px 0 0;
	content: url('../images/icon_blue.gif');
}
.school_green:before {
	font-size: 18px;
	position: relative;
	top: 3px;
	margin: 0 5px 0 0;
	content: url('../images/icon_green.gif');
}
.school_red:before {
	font-size: 18px;
	position: relative;
	top: 3px;
	margin: 0 5px 0 0;
	content: url('../images/icon_red.gif');
}

.topic {
	width: 1000px;
	margin: 0 auto;
	font-size: 20px;
	line-height: 180%;
	text-align: left;
}
.topic_title {
	font-size: 30px;
	font-weight: bold;
	line-height: 250%;
	color: #0054a7;
	text-align: left;
}
.topic_title:before {
	position: relative;
	top: 3px;
	margin: -10px 5px 0 0;
	content: url('../images/mid_icon.gif');
}
.topic_mid {
	font-size: 27px;
	color: #e74291;
	line-height: 250%;
	text-align: left;
	padding-bottom: 7px;
	border-bottom: dotted 1px #e74291;
}

.wb {
	width: 1000px;
	margin: 0 auto;
	margin-top: 0px;
}

.wb:after {
	content: "";
	display: block;
	clear: both
}

.wb_left {
	float: left;
	width: 45%;
	text-align: left;
	margin-right: 40px;
	font-size: 20px;
	line-height: 180%;
}
.wb_right {
	float: left;
	width: 45%;
	text-align: left;
	font-size: 20px;
	line-height: 180%;
}

.wb_left60 {
	float: left;
	width: 55%;
	text-align: left;
	margin-left: 0px;
	margin-right: 50px;
	font-size: 20px;
	line-height: 180%;
}
.wb_right40 {
	float: left;
	width: 39%;
	font-size: 20px;
	text-align: left;
}

.mr {
	font-size:0.8em;
	margin-top:2em;
}

#footer {
	width:100%;
	height:	150px;
	margin-top: 80px;
	text-align:center;
	background: #0054a7;
}
#footer_inner {
	width:1000px;
	margin: 0 auto;
	padding-top: 30px;
	font-size: 26px;
	color: #FFF;
}
#footer_inner a {
	color: #FFF;
	font-size: 20px;
}
#footer_inner a:hover {
	color: #59bded;
	font-size: 20px;
}
#pagetop{
	position:fixed;
	right: 20px;
	bottom: 20px;
	cursor:pointer;
        }
#pagetop:hover {
	opacity: 0.8; }

/*=====================
ガイド（PC）
=======================*/

#back_title_guide {
	height: 576px;
	background: #0054a7;
	background-position: center center;
	background-size: auto;
	background-repeat: no-repeat;
}
#back_title_guide_inner {
	padding-top: 0px;
	width: 1000px;
	margin: 0 auto;
}
#back_title_guide_inner:after {
	content: "";
	display: block;
	clear: both;
}

#back_guide_menu1 {
	background: #e73674;
	width: 100%;
}
#back_guide_menu2 {
	height: 655px;
	background: url('../images/back_menu.gif') no-repeat;
	background-position: center center;
	background-size: auto;
	background-repeat: no-repeat;
}
#back_guide_menu_inner {
	padding-top: 120px;
	padding-left: 230px;
	margin: 0 auto;
}
.menu {
	margin-bottom: 15px;
}
.guide_title {
	margin-top: 60px;
	font-size: 40px;
	font-weight: bold;
	line-height: 250%;
	color: #003786;
	text-align: left;
}
.guide_title:before {
	position: relative;
	top: 3px;
	margin: 0;
	vertical-align: middle;
	content: url('../images/icon_guide.gif');
}
.guide_mid {
	font-size: 35px;
	color: #e74291;
	line-height: 250%;
	text-align: left;
	padding-bottom: 7px;
	border-bottom: dotted 1px #e74291;
}

}

/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}