@charset "UTF-8";
.clear:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}
.clear {display: inline-block;} 
/* Hides from IE Mac */
* html .clear {height: 1%;}
.clear {display:block;}
/* End Hack */


.mb-10{
	margin-bottom: 10px !important;
}
.mb-20{
	margin-bottom: 20px !important;
}
.mb-30{
	margin-bottom: 30px !important;
}
.mb-40{
	margin-bottom: 40px !important;
}
.mb-center{
	margin-left:auto;
	margin-right: auto;
}

.text-small{
	font-size: 90%;
}
.text-big{
	font-size: 120%;
}
.text-sbig{
	font-size: 160%;
}
.text-red{
	color: #e6002d;
}
.text-red{
	color: #f31d5d;
}



/* メイン部分
--------------------------------------------------------------------------- */
#hero{
	background-image: url(/mobility/img/bg-main.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
#h1-titleimg{
	padding: 30px 30px;
	background:rgba(255,255,255,0.7);
	margin: 0 auto;
}
.hero-inner{
	position: relative;
}
#h1-model{
	position: absolute;
	bottom: 10px;
	left: 50%;
	margin-left: 190px;
}


/* エリアから探す部分
--------------------------------------------------------------------------- */
#search-area{
	margin-bottom: 40px;
}
.h2-titlesearch{
	font-size: 18px;
	color: #00a0e9;
	position: relative;
	margin: 0 auto 50px auto;
	padding: 10px 0 0 0;
}
.h2-titlesearch:after{
  position: absolute;
  top: 0px;
  left: 50%;
  z-index: -1;
  margin-left: -160px;
  border-top: 60px solid #f2f9fc;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 0;
  content: "";
}
.nav-area{
	margin: 0 auto;
}
.nav-area li{
	width: 15.66%;
	float: left;
	margin-left: 0.5%;
	margin-right:0.5%;
	margin-bottom: 10px;
}
.nav-area li:last-child{
	margin-bottom: 0px;
}
.nav-btn{
	display: block;
	padding: 15px 15px;
	background: #f08300;
	border-radius: 3px;
	color: #fff;
	text-shadow:#f08300 1px 1px 0, #f08300 -1px -1px 0,/*右下、左上*/
	#f08300 -1px 1px 0, #f08300 1px -1px 0,/*右上、左下*/
	#f08300 0px 1px 0, #f08300  0 -1px 0,/*右、左*/
	#f08300 -1px 0 0, #f08300 1px 0 0;/*上、下*/
	text-align: right;
}
li:nth-child(even) .nav-btn{
	background-color: #8fc31f;
	text-shadow:#8fc31f 1px 1px 0, #8fc31f -1px -1px 0,/*右下、左上*/
	#8fc31f -1px 1px 0, #8fc31f 1px -1px 0,/*右上、左下*/
	#8fc31f 0px 1px 0, #8fc31f  0 -1px 0,/*右、左*/
	#8fc31f -1px 0 0, #8fc31f 1px 0 0;/*上、下*/
}
.nav-btn:hover{
	text-decoration: none;
}
.nav-btn:hover{
	color: #fff;
	text-decoration: none;
	border-top-left-radius: 0px;
	border-top-right-radius: 18px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 18px;
}
.nav-btn i{
	font-size: 90%;
	position: relative;
	top: -2px;
	margin-right: 0;
}

.nav-kagawa .nav-btn{
	background-image: url(/mobility/img/icon-kagawa.png);
	background-repeat:no-repeat;
	background-position:15px 50%;
}
.nav-ishikawa .nav-btn{
	background-image: url(/mobility/img/icon-ishikawa.png);
	background-repeat:no-repeat;
	background-position:15px 50%;
}
.nav-niigata .nav-btn{
	background-image: url(/mobility/img/icon-niigata.png);
	background-repeat:no-repeat;
	background-position:15px 50%;
}
.nav-aomori .nav-btn{
	background-image: url(/mobility/img/icon-aomori.png);
	background-repeat:no-repeat;
	background-position:15px 50%;
}
.nav-nagasaki .nav-btn{
	background-image: url(/mobility/img/icon-nagasaki.png);
	background-repeat:no-repeat;
	background-position:15px 50%;
}
.nav-miyazaki .nav-btn{
	background-image: url(/mobility/img/icon-miyazaki.png);
	background-repeat:no-repeat;
	background-position:15px 50%;
}

/* 紹介部分
--------------------------------------------------------------------------- */
#about{
	margin-bottom: 40px;
}
.about-inner{
	background: #f2f9fc;
	padding: 20px 20px;
}
.h2-titleabout{
	border:solid 2px #00a0e9;
	background: #fff;
	position: relative;
	display: inline-block;
	padding: 8px 20px 7px 20px;
	margin: 0 auto 40px auto;
	font-size: 24px;
	z-index: 2;
}
.h2-titleabout:after{
  position: absolute;
  bottom: -12px;
  right: 0;
  z-index: 1;
  border-top: 10px solid #00a0e9;
  border-left: 15px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 0;
  content: "";
}
.h2-titleabout:before{
  position: absolute;
  bottom: -12px;
  left: 0;
  z-index: 1;
  border-top: 10px solid #00a0e9;
  border-left: 30px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 0;
  content: "";
}
#about p{
	font-size: 18px;
	line-height: 1.4;
	margin-bottom: 5px;
}
.list-kome li{
	margin-bottom: 5px;
}


/* コース部分
--------------------------------------------------------------------------- */
.course-01,
.course-02 {
	margin-bottom: 60px;
}

.wrap-area{
	padding: 20px 20px;
}
.course-01 .wrap-area {
	background: #fdf8f2;
}
.course-02 .wrap-area {
	background: #f7fcec;
}

.row-course{
	margin-bottom: 20px;
}
.wrap-area .row-course:last-child{
	margin-bottom: 0;
}
.h2-titlearea{
	font-size: 24px;
	background: #eee;
	display: inline-block;
	padding: 18px 90px 17px 90px;
	border-top-left-radius: 0px;
	border-top-right-radius: 18px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 18px;
	color: #fff;
	margin-top:0;
}
.h2-titlearea i{
	font-size: 98%;
}
.course-01 .h2-titlearea {
	background: #f08300;
}
.course-02 .h2-titlearea {
	background: #8fc31f;
}
.wrap-white{
	padding: 15px 15px;
	background: #fff;
}
.h3-coursecopy{
	margin-bottom: 10px;
	line-height: 1.4;
	font-size: 24px;
}
.course-01 .h3-coursecopy {
	color: #f08300;
}
.course-02 .h3-coursecopy {
	color: #8fc31f;
}
.text-price{
	text-align: right;
	margin-bottom: 20px;
}
.text-price span{
	font-weight: bold;
	font-size: 160%;
	display: block;
}


.btn-reserve{
	display: inline-block;
	background: #e6002d;
	color: #fff !important;
	text-decoration: none !important;
	padding: 10px 30px;
}
.btn-reserve i{
	font-size: 90%;
	position: relative;
	top: -2px;
	margin-right: 0;
}
.btn-reserve:hover{
	color: #fff;
	text-decoration: none;
	border-top-left-radius: 0px;
	border-top-right-radius: 18px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 18px;
}
.course-01 .btn-reserve:hover {
	background: #f08300;
}
.course-02 .btn-reserve:hover {
	background: #8fc31f;
}
.row-allcourse{
	margin-top: 40px;
}





@media(max-width:767px) { 
/* スマホ用 */


/* 紹介部分
--------------------------------------------------------------------------- */
.h2-titleabout{
	font-size: 18px;
}
#about p{
	font-size: 16px;
	line-height: 1.4;
	margin-bottom: 5px;
}


/* エリアから探す部分
--------------------------------------------------------------------------- */
.nav-area{
	margin: 0 auto;
}
.nav-area li{
	width: 49%;
	float: left;
}




/* コース部分
--------------------------------------------------------------------------- */
.h2-titlearea{
	font-size: 20px;
	padding: 16px 50px 15px 50px;
}
.h3-coursecopy{
	font-size: 18px;
}



}