/* -------------------------------- 

margin / padding

-------------------------------- */

.mt5{margin-top: 5px !important}
.mt10{margin-top: 10px !important}
.mt15{margin-top: 15px !important}
.mt20{margin-top: 20px !important}
.mt30{margin-top: 30px !important}
.mt40{margin-top: 40px !important}
.mt50{margin-top: 50px !important}
.mt60{margin-top: 60px !important}
.mt70{margin-top: 70px !important}
.mt80{margin-top: 80px !important}
.mt90{margin-top: 90px !important}
.mt100{margin-top: 100px !important}

.mb5{margin-bottom: 5px !important}
.mb10{margin-bottom: 10px !important}
.mb15{margin-bottom: 15px !important}
.mb20{margin-bottom: 20px !important}
.mb30{margin-bottom: 30px !important}
.mb40{margin-bottom: 40px !important}
.mb50{margin-bottom: 50px !important}
.mb60{margin-bottom: 60px !important}
.mb70{margin-bottom: 70px !important}
.mb80{margin-bottom: 80px !important}
.mb90{margin-bottom: 90px !important}
.mb100{margin-bottom: 100px !important}

.ml5{margin-left: 5px !important}
.ml10{margin-left: 10px !important}
.ml15{margin-left: 15px !important}
.ml20{margin-left: 20px !important}
.ml30{margin-left: 30px !important}
.ml40{margin-left: 40px !important}
.ml50{margin-left: 50px !important}
.ml60{margin-left: 60px !important}
.ml70{margin-left: 70px !important}
.ml80{margin-left: 80px !important}
.ml90{margin-left: 90px !important}
.ml100{margin-left: 100px !important}

.mr5{margin-right: 5px !important}
.mr10{margin-right: 10px !important}
.mr15{margin-right: 15px !important}
.mr20{margin-right: 20px !important}
.mr30{margin-right: 30px !important}
.mr40{margin-right: 40px !important}
.mr50{margin-right: 50px !important}
.mr60{margin-right: 60px !important}
.mr70{margin-right: 70px !important}
.mr80{margin-right: 80px !important}
.mr90{margin-right: 90px !important}
.mr100{margin-right: 100px !important}

.pt5{padding-top: 5px !important}
.pt10{padding-top: 10px !important}
.pt15{padding-top: 15px !important}
.pt20{padding-top: 20px !important}
.pt30{padding-top: 30px !important}
.pt40{padding-top: 40px !important}
.pt50{padding-top: 50px !important}
.pt60{padding-top: 60px !important}
.pt70{padding-top: 70px !important}
.pt80{padding-top: 80px !important}
.pt90{padding-top: 90px !important}
.pt100{padding-top: 100px !important}

.pb5{padding-bottom: 5px !important}
.pb10{padding-bottom: 10px !important}
.pb15{padding-bottom: 15px !important}
.pb20{padding-bottom: 20px !important}
.pb30{padding-bottom: 30px !important}
.pb40{padding-bottom: 40px !important}
.pb50{padding-bottom: 50px !important}
.pb60{padding-bottom: 60px !important}
.pb70{padding-bottom: 70px !important}
.pb80{padding-bottom: 80px !important}
.pb90{padding-bottom: 90px !important}
.pb100{padding-bottom: 100px !important}

.pl5{padding-left: 5px !important}
.pl10{padding-left: 10px !important}
.pl15{padding-left: 15px !important}
.pl20{padding-left: 20px !important}
.pl30{padding-left: 30px !important}
.pl40{padding-left: 40px !important}
.pl50{padding-left: 50px !important}
.pl60{padding-left: 60px !important}
.pl70{padding-left: 70px !important}
.pl80{padding-left: 80px !important}
.pl90{padding-left: 90px !important}
.pl100{padding-left: 100px !important}

.pr5{padding-right: 5px !important}
.pr10{padding-right: 10px !important}
.pr15{padding-right: 15px !important}
.pr20{padding-right: 20px !important}
.pr30{padding-right: 30px !important}
.pr40{padding-right: 40px !important}
.pr50{padding-right: 50px !important}
.pr60{padding-right: 60px !important}
.pr70{padding-right: 70px !important}
.pr80{padding-right: 80px !important}
.pr90{padding-right: 90px !important}
.pr100{padding-right: 100px !important}

.pdg5{padding: 5px;}
.pdg10{padding: 10px;}
.pdg20{padding: 20px;}

.mgn5{margin:5px;}
.mgn10{margin:10px;}
.mgn20{margin:20px;}


/* -------------------------------- 

text

-------------------------------- */

/*--size--*/
.txt-12{font-size: 12px; line-height: 1.7;}
.txt-14{font-size: 14px; line-height: 1.7;}
.txt-16{font-size: 16px; line-height: 1.7;}
.txt-18{font-size: 18px; line-height: 1.7;}
.txt-20{font-size: 20px; line-height: 1.7;}
.txt-22{font-size: 22px; line-height: 1.7;}
.txt-24{font-size: 24px; line-height: 1.7;}
.txt-26{font-size: 26px; line-height: 1.7;}
.txt-28{font-size: 28px; line-height: 1.7;}
.txt-30{font-size: 30px; line-height: 1.7;}
.txt-32{font-size: 32px; line-height: 1.7;}
.txt-34{font-size: 34px; line-height: 1.7;}
.txt-36{font-size: 36px; line-height: 1.7;}

/*--color--*/
.txt-nomal {font-weight: normal;}
.txt-bold  {font-weight: bold;}
.txt-blue  {color: #4ba5c3;}
.txt-green {color: #50b442;}
.txt-red   {color: #f54d4d;}
.txt-pink  {color: #eb5e90;}
.txt-gray  {color: #ccc;}

/*--align--*/
.al-center{text-align: center;}
.al-right {text-align: right;}

/* -------------------------------- 

background-color

-------------------------------- */

.bg-white {width:100%; background-color: #FFFFFF;}
.bg-black {width:100%; background-color: #000000; color: #FFFFFF;}
.bg-green {width:100%; background-color: #90c31f; color: #FFFFFF;}
.bg-blue  {width:100%; background-color: #25b5d4; color: #FFFFFF;}
.bg-purple{width:100%; background-color: #945cbe; color: #FFFFFF;}
.bg-red   {width:100%; background-color: #f54d4d; color: #FFFFFF;}
.bg-pink  {width:100%; background-color: #f474bf; color: #FFFFFF;}
.bg-orange{width:100%; background-color: #eda11c; color: #FFFFFF;}

/* -------------------------------- 

background-shadow

-------------------------------- */

.bg-shadow_in {box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.2) inset;}
.bg-shadow_out{box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1);}

/* -------------------------------- 

form

-------------------------------- */

input[type="text"] {
  width: 50%;
  height: 40px;
  background: #FFF;
  border: 1px solid #FFF;
  font-size: 1em;
  border: 1px solid #ccc;
  padding-left: 10px;
  margin-right: 10px;
}

input[type="text"]:focus {
  background: #edf4ff;
  border: 1px solid #FFF;
}

select{
  width: 20%;
  padding: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #ccc;
  background: #ffffff;
  background-size: 20px, 100%;
  margin-right:10px;
  margin-bottom: 15px;
}

textarea {
  width: 100%;
  height: 150px;
  background: #FFF;
  border: 1px solid #FFF;
  font-size: 1em;
  border: 1px solid #ccc;
  padding: 10px;
}

textarea:focus {
  background: #edf4ff;
  border: 1px solid #FFF;
}

.btn-area{
  width: 100%;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

input[type="submit"]{
  padding: 10px 40px 10px 40px;
  background-color: #000000;
  color: #FFFFFF;
  border:0px;
  border-radius: 40px;        /* CSS3草案 */  
  -webkit-border-radius: 40px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 40px;   /* Firefox用 */  
}

input[type="submit"]:hover{
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;  
}


input[type="reset"]{
  padding: 10px 40px 10px 40px;
  background-color: #cccccc;
  color: #FFFFFF;
  border:0px;
  border-radius: 40px;        /* CSS3草案 */  
  -webkit-border-radius: 40px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 40px;   /* Firefox用 */  
}

input[type="reset"]:hover{
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;  
}

/* -------------------------------- 

PC CSS

-------------------------------- */

@media only screen and (min-width: 769px) {

/* -------------------------------- 

キティ

-------------------------------- */
#kt-area{
  position: relative;
}

#kt-area .kt-saiyo{
  position: absolute;
  left: 370px;
  top:-16px;
}

/* -------------------------------- 

地図

-------------------------------- */

#map{
  width: 100%;
  height: 400px;
}

#map .map_title{
  font-size: 16px;
  padding-bottom: 10px;
  margin:10px 0px 7px 0px;
  border-bottom:1px solid #999999;
}

#map .map_comment{
  font-size: 12px; 
  line-height: 20px;
}

.map_image img{
  width: 100%;
  height: auto;
}

/* -------------------------------- 

地図検索

-------------------------------- */
#map-search{
  width: 100%;
  //height: 400px;
  background-color: #f09946;
  color: #FFFFFF;
}

#map-search .search-box1{
  width: 49%;
  float: left;
}

#map-search .search-box2{
  width: 50%;
  float: left;
}

#map-search select{
  width: 60%;
  padding: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #ccc;
  background: #ffffff;
  background-size: 20px, 100%;
  margin-right:10px;
  margin-bottom: 15px;
}


#map-search input[type="button"]{
  padding: 7px 40px 7px 40px;
  background-color: #FFFFFF;
  color: #1aa76f;
  border:1px solid #1aa76f;
  border-radius: 6px;        /* CSS3草案 */  
  -webkit-border-radius: 6px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 6px;   /* Firefox用 */  
}

#map-search input[type="button"]:hover{
  background-color: #edf7ce;
}

/* -------------------------------- 

施設リスト

-------------------------------- */
#recruit_list{
  width: 100%;
}

#recruit_list h1{
  background-color: #1aa76f;
  color: #FFF;
  font-size: 24px;
  padding: 10px;
  margin-bottom: 20px;
}

#recruit_list .shisetsu-list-box{
  border:2px solid #1aa76f;
  padding: 10px;
  margin-bottom: 20px;
  position: relative;
}

#recruit_list .s-left-area{
  width: 250px;
  float: left;
}

#recruit_list .list-link-area{
  margin-top: 20px;
  text-align: right;
  position: absolute;
  bottom: 20px;
  right: 10px;
}

#recruit_list .s-name{
  font-size: 18px;
  color: #1aa76f;
  margin-bottom: 5px;
}

#recruit_list .btn-green{
  padding: 7px 40px 7px 40px;
  text-decoration: none;
  background-color: #FFFFFF;
  color: #1aa76f;
  border:1px solid #1aa76f;
  border-radius: 6px;        /* CSS3草案 */  
  -webkit-border-radius: 6px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 6px;   /* Firefox用 */  
}

#recruit_list .btn-green:hover{
  background-color: #edf7ce;
}

#recruit_list .btn-orange{
  padding: 7px 40px 7px 40px;
  text-decoration: none;
  background-color: #FFFFFF;
  color: #ffa800;
  border:1px solid #ffa800;
  border-radius: 6px;        /* CSS3草案 */  
  -webkit-border-radius: 6px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 6px;   /* Firefox用 */  
}

#recruit_list .btn-orange:hover{
  background-color: #fff2d9;
}

/* -------------------------------- 

キャリア

-------------------------------- */

#career-content{
  width: 720px;
  float:right;
  line-height: 1.7;
}

#career-content .bk{
  width: 100%;
  //height: 300px;
  background-image: url(images/career_bk.png);
  background-repeat: repeat-y;
  margin-bottom: 30px;
  padding-bottom: 10px;
}

#career-content .txt-area-1-title{
  background-color: #dd754e;
  color: #FFF;
  padding-top: 7px;
  padding-bottom: 7px;
  width: 120px;
  text-align: center;
  margin-left: 40px;
  margin-top: 20px;
  -webkit-border-top-left-radius: 6px;  
  -webkit-border-top-right-radius: 6px;  
}

#career-content .txt-area-0{
  width: 95%;
  margin:0px auto 10px;
}

#career-content .txt-area-0 p{
  line-height: 1.7;
  padding: 15px;
}

#career-content .txt-area-1{
  width: 95%;
  margin:0px auto 20px;
  background-color: #e39b65;
}

#career-content .txt-area-1 p{
  line-height: 1.7;
  padding: 15px;
}

#career-content .txt-area-2{
  width: 95%;
  margin:0px auto 20px;
  background-color: #fce3b1;
}

#career-content .txt-area-2 p{
  line-height: 1.7;
  padding: 15px;
}

#career-content ul{
  width: 75%;
  margin: 0 auto 0;
}

#career-content li{
  margin:0;
  padding: 0;
  display: table-cell;
}

.grad-btn {
  /*.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
  float: right;
  //background-color:#1aa76f;
  color: #333333;
  width: 120px;
  text-align: center;
  padding: 7px 0px 7px 0px;
  margin-right: 10px;
}

.grad-btn:hover {
  opacity: 0.7;
}

.grad-btn::before {
  content: "続きを読む▼"
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 10px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px; /*グラデーションで隠す高さ*/
  //background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  //background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
  content: "閉じる▲" /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}


.grad-btn2 {
  /*.grad-btn2のCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
  background-color:#1aa76f;
  color: #FFF;
  //width: 100%;
  text-align: center;
  padding: 7px 0px 7px 0px;
  display: block;
}

.grad-btn2:hover {
  opacity: 0.7;
}

.grad-btn2::before {
  content: "他の職種も見る▼"
}
.grad-item2 {
  position: relative;
  overflow: hidden;
  height: 10px; /*隠した状態の高さ*/
}
.grad-item2::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px; /*グラデーションで隠す高さ*/
  //background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  //background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger2 {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger2:checked ~ .grad-btn2::before {
  content: "閉じる▲" /*チェックされていたら、文言を変更する*/
}
.grad-trigger2:checked ~ .grad-item2 {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger2:checked ~ .grad-item2::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}


.grad-btn3 {
  /*.grad-btn3のCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
  background-color:#1aa76f;
  color: #FFF;
  //width: 100%;
  text-align: center;
  padding: 7px 0px 7px 0px;
  display: block;
}

.grad-btn3:hover {
  opacity: 0.7;
}

.grad-btn3::before {
  content: "質問をもっと見る▼"
}
.grad-item3 {
  position: relative;
  overflow: hidden;
  height: 0px; /*隠した状態の高さ*/
}
.grad-item3::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px; /*グラデーションで隠す高さ*/
  //background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  //background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger3 {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger3:checked ~ .grad-btn3::before {
  content: "閉じる▲" /*チェックされていたら、文言を変更する*/
}
.grad-trigger3:checked ~ .grad-item3 {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger3:checked ~ .grad-item3::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}


.grad-btn4 {
  /*.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
  float: right;
  //background-color:#1aa76f;
  color: #333333;
  width: 120px;
  text-align: center;
  padding: 7px 0px 7px 0px;
  margin-right: 10px;
}

.grad-btn4:hover {
  opacity: 0.7;
}

.grad-btn4::before {
  content: "回答を見る▼"
}
.grad-item4 {
  position: relative;
  overflow: hidden;
  height: 0px; /*隠した状態の高さ*/
}
.grad-item4::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px; /*グラデーションで隠す高さ*/
  //background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  //background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger4 {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger4:checked ~ .grad-btn4::before {
  content: "閉じる▲" /*チェックされていたら、文言を変更する*/
}
.grad-trigger4:checked ~ .grad-item4 {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger4:checked ~ .grad-item4::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}


/* -------------------------------- 

新卒

-------------------------------- */

#area_name{
  width: 100%;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 24px;
  line-height: 40px;
  position: absolute;
  top:230px;
  font-weight: bold;
}

#saiyo-content{
  width: 720px;
  float:right;
  line-height: 1.7;
}

#saiyo-content a:hover{
  opacity: 0.9;
}

#saiyo-content hr{
border-top:1px solid #addce3;
border-bottom:1px solid #FFF;
margin:30px 0px;

}

#saiyo-content h3{
color: #2bc6a7;
font-size: 24px;
font-weight: bold;
text-align: center;
}

#saiyo-content h4{
color: #318ac8;
font-size: 24px;
font-weight: bold;
text-align: center;
letter-spacing: 0.1em;
}

#saiyo-content h5{
background-color:#318ac8; 
color: #FFF;
font-size: 20px;
font-weight: bold;
text-align: center;
letter-spacing: 0.1em;
padding: 2px;
border-radius: 40px;        /* CSS3草案 */  
-webkit-border-radius: 40px;    /* Safari,Google Chrome用 */  
-moz-border-radius: 40px;   /* Firefox用 */  
}

#saiyo-content h6{
color: #318ac8;
font-size: 22px;
font-weight: bold;
letter-spacing: 0.1em;
}


#saiyo-content .h3-line{
  width: 50px;
  margin: 7px auto 20px;
  border-top:3px solid #2bc6a7;
}


#saiyo-content ul{
  width: 100%;
  text-align: center;
  display: table;
}

#saiyo-content li{
  margin:0;
  padding: 0;
  display: table-cell;
}

#saiyo-content .left-area{
  float: left;
}

#saiyo-content .right-area{
  float: right;
}

#saiyo-content .video-area{
  width: 640px;
  margin:0 auto 0;
  text-align: center;
}

#saiyo-content .blue-area{
  width: 700px;
  background-color: #e9f6f8;
  padding: 40px 10px 40px 10px;
}

#saiyo-content .read-area{
  width: 410px;
  float: left;
  margin-right: 10px;
}

#saiyo-content .photo-area{
  width: 275px;
  float: left;
}

#saiyo-content .support-left{
  width: 330px;
  float: left;
}

#saiyo-content .support-right{
  width: 350px;
  float: right;
}

#saiyo-content .box-title{
  background-color:#318ac8; 
  color: #FFF;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0.1em;
  padding: 2px;
}

#saiyo-content .box{
  border:1px solid #318ac8;
  padding: 10px;
  background-color: #FFF;
  margin-bottom: 20px;
}

#entry-btn-area{
  width: 100%;
  position: fixed;
  bottom:0px;
  left: 0px;
  z-index: 99999;
}

#entry-btn-area li{
  display: table-cell;
}

#entry-btn-area img{
  width: 100%;
  height: auto;
}

#entry-btn-area a img:hover{
    cursor:pointer;
    filter: alpha(opacity=100);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=100)";  /* ie 8 */
    -moz-opacity:1;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 1;              /* Safari 1.x */
    opacity:1;
    zoom:1;
}


/* -------------------------------- 

高校生

-------------------------------- */
#hschool-content{
  width: 720px;
  float:right;
  line-height: 1.7;
}

#hschool-content h4{
  color: #1aa76f;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.1em;
}

#hschool-content ul{
  width: 100%;
  text-align: center;
  display: table;
}

#hschool-content li{
  margin:0;
  padding: 0;
  display: table-cell;
}

#hschool-content .video-area{
  width: 640px;
  margin:0 auto 0;
  text-align: center;
}

#hschool-content .school-bk{
  width: 100%;
  background-image: url(images/h_school_bk.jpg);
  background-repeat: repeat-y;
  margin-bottom: 30px;
  padding-bottom: 20px;
  padding-top: 20px;
}

#hschool-content .read-area{
  padding-left: 20px;
  padding-right: 20px;
}

#hschool-content .read-title-green{
  color: #1aa76f;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

#hschool-content .read-title-black{
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

#hschool-content .end-area{
  width: 100%;
  position: relative;
}

#hschool-content .end-area a{
  text-decoration: none;
}

#hschool-content .end-area a:hover{
  opacity: 0.7;
}

#hschool-content .end-area .link-btn{
  background-color: #259668;
  color: #FFF;
  padding: 10px 20px 10px 20px;
  position: absolute;
  bottom:20px;
  right: 20px;
}

/* -------------------------------- 

モーダル

-------------------------------- */

.modal-content {
  width: 90% ;
  margin: 0 ;
  background: #fff ;
  border-radius: 6px;
  position: fixed ;
  display: none ;
  z-index: 99999 ;
  text-align: center;
}
  
#modal-overlay {
  z-index: 99998 ;
  display: none ;
  position: fixed ;
  top: 0 ;
  left: 0 ;
  width: 100% ;
  height: 120% ;
  background-color: rgba( 0,0,0, 0.5 ) ;
}

.modal-content .title {
  font-size: 24px;
  background-color: #318ac8;
  color:#FFF;
  padding: 10px;
}

.modal-content .info {
  padding: 15px;
  line-height: 1.7;
  text-align: left;
  font-size: 16px;
}

.modal-content .info-center {
  padding: 15px;
  line-height: 1.7;
  text-align: center;
  font-size: 16px;
}

.modal-content .info-center a{
  text-decoration: none;
  color: #318ac8;
}

.modal-content .photo-area {
  width: 30%;
  float: left;
}


.modal-content .txt-area {
  width: 68%;
  float: left;
  padding-top: 15px;
  padding-left: 15px;
  line-height: 1.7;
  text-align: left;
  font-size: 16px;
}

.modal-content .button-close {
  padding: 7px 20px;
  border:1px solid #ccc;
  text-decoration: none;
  color: #222;
}

.modal-content .button-close:hover {
  background-color: #ccc;
}


/* -------------------------------- 

お問い合わせ

-------------------------------- */

#contact{
  width: 90%;
  margin: 0 auto 0;
}

#contact h1{
  line-height: 2;
  text-align: center;
  background-color: #ff9600;
  font-size: 24px;
  color: #FFFFFF;
  margin-top: 20px;
  margin-bottom: 20px;
}

#contact .main-read{
  font-size: 18px;
  line-height: 1.7;
}

#contact h2{
  line-height: 2;
  text-align: center;
  margin-bottom: 10px;
}



#contact .hs{
  background-color: #ff6d6d;
  font-size: 10px;
  padding: 5px 10px 5px 10px;
  color: #FFF;
  margin-left: 10px;
}

#contact table{
  width: 100%;
}

#contact table th{
  width: 30%;
  padding:15px;
  vertical-align: middle;
}

#contact table td{
  width: 70%;
  padding: 15px;
}

#contact label{
  font-size: 14px;
  font-weight: normal;
  margin-right: 10px;
}

#contact input[type="text"] {
  width: 100%;
  height: 40px;
  background: #FFF;
  border: 1px solid #FFF;
  font-size: 1em;
  border: 1px solid #ccc;
  padding-left: 10px;
  margin-right: 10px;
}

#contact select{
  width: 15%;
  padding: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #ccc;
  background: #ffffff;
  background-size: 20px, 100%;
  margin-right:10px;
  margin-bottom: 15px;
}

#contact input[type="text"]:focus {
  background: #edf4ff;
  border: 1px solid #FFF;
}

#contact textarea {
  width: 100%;
  height: 150px;
  background: #FFF;
  border: 1px solid #FFF;
  font-size: 1em;
  border: 1px solid #ccc;
  padding: 10px;
}

#contact textarea:focus {
  background: #edf4ff;
  border: 1px solid #FFF;
}

#contact .btn-area{
  width: 100%;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

#contact input[type="submit"]{
  padding: 10px 40px 10px 40px;
  background-color: #ff9600;
  color: #FFFFFF;
  border:0px;
  border-radius: 40px;        /* CSS3草案 */  
  -webkit-border-radius: 40px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 40px;   /* Firefox用 */  
}

#contact input[type="submit"]:hover{
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;  
}


#contact input[type="reset"]{
  padding: 10px 40px 10px 40px;
  background-color: #cccccc;
  color: #FFFFFF;
  border:0px;
  border-radius: 40px;        /* CSS3草案 */  
  -webkit-border-radius: 40px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 40px;   /* Firefox用 */  
}

#contact input[type="reset"]:hover{
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;  
}

#contact .thanks{
  font-size: 24px;
  line-height: 1.7;
  text-align: center;
  margin-top: 10px;
}

#contact .read{
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
  margin-top: 10px;
}


#contact .backbtn{
  padding: 10px 40px 10px 40px;
  background-color: #ff9600;
  color: #FFFFFF;
  text-decoration: none;
  border:0px;
  border-radius: 40px;        /* CSS3草案 */  
  -webkit-border-radius: 40px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 40px;   /* Firefox用 */  
}

#contact .backbtn:hover{
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;  
}

#formWrap {
  width:900px;
  margin:40px auto 40px;
}

#formWrap input[type="submit"]{
  padding: 10px 40px 10px 40px;
  background-color: #ff9600;
  color: #FFFFFF;
  border:0px;
  border-radius: 40px;        /* CSS3草案 */  
  -webkit-border-radius: 40px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 40px;   /* Firefox用 */  
}

#formWrap input[type="submit"]:hover{
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;  
}

#formWrap input[type="button"]{
  padding: 10px 40px 10px 40px;
  background-color: #cccccc;
  color: #FFFFFF;
  border:0px;
  border-radius: 40px;        /* CSS3草案 */  
  -webkit-border-radius: 40px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 40px;   /* Firefox用 */  
}

#formWrap input[type="button"]:hover{
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;  
}

table.formTable{
  width:100%;
  margin:0 auto;
  border-collapse:collapse;
}
table.formTable td,table.formTable th{
  border:1px solid #ccc;
  padding:20px;
}
table.formTable th{
  width:30%;
  font-weight:normal;
  background:#f2f2f2;
  text-align:center;
}

table.formTable td{
  width:70%;
  font-weight:normal;
  background:#fff;
}

p.error_messe{
  margin:5px 0;
  color:red;
}

/* -------------------------------- 

アコーディオン

-------------------------------- */
#saiyo-search-area{
  width: 100%;
  margin-top: 10px;
}

#saiyo-search-area h1{
  background-color: #edf7ce;
  color: #1aa76f;
  text-align: center;
  padding: 10px;
  font-size: 18px;
}

#saiyo-search-area h2{
  background-color: #1aa76f;
  color: #FFFFFF;
  text-align: center;
  padding-top: 7px;
  padding-bottom: 4px;
}


/*ボックス全体*/
#saiyo-search-area .accbox {
    margin: 0em 0;
    padding: 0;
    max-width: 400px;/*最大幅*/
}

/*ラベル*/
#saiyo-search-area .accbox label {
    display: block;
    margin: 0 0;
    padding : 10px 9px;
    color: #ffffff;
    background: #71c6a4;
    cursor :pointer;
    transition: all 0.5s;
    border-left:1px solid #1aa76f;
    border-right:1px solid #1aa76f;
    border-bottom:1px solid #1aa76f;
}

/*アイコンを表示*/
#saiyo-search-area .accbox label:before {
    content: '▶';
    //font-family: 'FontAwesome';
    padding-right: 8px;
}

/*ラベルホバー時*/
#saiyo-search-area .accbox label:hover {
    background :#7ad5b1;
}

/*チェックは隠す*/
#saiyo-search-area .accbox input {
    display: none;
}

/*中身を非表示にしておく*/
#saiyo-search-area .accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
#saiyo-search-area .cssacc:checked + label + .accshow {
    height: auto;
    //padding: 5px;
    background: #FFFFFF;
    opacity: 1;
}

#saiyo-search-area .accbox .accshow p {
    padding: 10px 10px;
    font-size:14px;
    border-left:1px solid #1aa76f;
    border-right:1px solid #1aa76f;
    border-bottom:1px solid #1aa76f;
  }

#saiyo-search-area .accbox .accshow a {
  color: #1aa76f;
  text-decoration: none;
  transition: 0.5s;
}

#saiyo-search-area .accbox .accshow a:hover {
  color: #20ce89;
  transition: 0.5s;
}

/*アイコンを入れ替える*/
#saiyo-search-area .cssacc:checked + label:before {
    content: '▼';
}


}
/* -------------------------------- 

SP CSS

-------------------------------- */
@media only screen and (max-width: 768px) {

/* -------------------------------- 

キティ

-------------------------------- */
#kt-area{
  text-align: center;
}

#kt-area .kt-saiyo{
  margin-top: 10px;
}

/* -------------------------------- 

マップ

-------------------------------- */

#map{
  width: 100%;
  height: 400px;
}

#map .map_title{
  font-size: 16px;
  padding-bottom: 10px;
  margin:10px 0px 7px 0px;
  border-bottom:1px solid #999999;
}

#map .map_comment{
  font-size: 12px; 
  line-height: 20px;
}

.map_image img{
  width: 100%;
  height: auto;
}

/* -------------------------------- 

地図検索

-------------------------------- */
#map-search{
  width: 100%;
  //height: 400px;
  background-color: #f09946;
  color: #FFFFFF;
}

#map-search .search-box1{
  width: 100%;
  display: block;
}

#map-search .search-box1 img{
  width: 100%;
  height: auto;
}

#map-search .search-box2{
  width: 90%;
  margin: 0 auto 0;
  display: block;
}

#map-search select{
  width: 60%;
  padding: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #ccc;
  background: #ffffff;
  background-size: 20px, 100%;
  margin-right:10px;
  margin-bottom: 15px;
}


#map-search input[type="button"]{
  padding: 7px 40px 7px 40px;
  background-color: #FFFFFF;
  color: #1aa76f;
  border:1px solid #1aa76f;
  border-radius: 6px;        /* CSS3草案 */  
  -webkit-border-radius: 6px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 6px;   /* Firefox用 */  
}

#map-search input[type="button"]:hover{
  opacity: 0.7;
}

/* -------------------------------- 

施設リスト

-------------------------------- */
#recruit_list{
  width: 95%;
  margin: 0 auto 0;
}

#recruit_list h1{
  background-color: #1aa76f;
  color: #FFF;
  font-size: 18px;
  padding: 10px;
  margin-bottom: 20px;
}

#recruit_list .shisetsu-list-box{
  border:2px solid #1aa76f;
  padding: 10px;
  margin-bottom: 20px;
  position: relative;
}

#recruit_list .s-left-area{
  width: 100%;
}

#recruit_list .list-link-area{
  margin-top: 20px;
  margin-bottom: 20px;
}

#recruit_list .s-name{
  font-size: 18px;
  color: #1aa76f;
  margin-top: 10px;
  margin-bottom: 5px;
}

#recruit_list .btn-green{
  display: block;
  text-align: center;
  padding: 7px 0px 7px 0px;
  text-decoration: none;
  background-color: #FFFFFF;
  color: #1aa76f;
  border:1px solid #1aa76f;
  border-radius: 6px;        /* CSS3草案 */  
  -webkit-border-radius: 6px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 6px;   /* Firefox用 */
  margin-bottom: 20px;
}

#recruit_list .btn-green:hover{
  background-color: #edf7ce;
}

#recruit_list .btn-orange{
  display: block;
  text-align: center;
  padding: 7px 0px 7px 0px;
  text-decoration: none;
  background-color: #FFFFFF;
  color: #ffa800;
  border:1px solid #ffa800;
  border-radius: 6px;        /* CSS3草案 */  
  -webkit-border-radius: 6px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 6px;   /* Firefox用 */  
}

#recruit_list .btn-orange:hover{
  background-color: #fff2d9;
}

/* -------------------------------- 

キャリア

-------------------------------- */

#career-content{
  width: 100%;
  font-size: 14px;
  line-height: 1.7;
}

#career-content img{
  width: 100%;
  height: auto;
}


#career-content .bk{
  width: 100%;
  //height: 300px;
  background-image: url(images/career_bk.png);
  background-repeat: repeat-y;
  margin-bottom: 30px;
  padding-bottom: 10px;
}

#career-content .txt-area-0{
  width: 95%;
  margin:0px auto 10px;
}

#career-content .txt-area-0 p{
  line-height: 1.7;
  padding: 10px;
}

#career-content .txt-area-1-title{
  font-size: 14px;
  background-color: #dd754e;
  color: #FFF;
  padding-top: 7px;
  padding-bottom: 7px;
  width: 100px;
  text-align: center;
  margin-left: 20px;
  margin-top: 20px;
  -webkit-border-top-left-radius: 6px;  
  -webkit-border-top-right-radius: 6px;  
}

#career-content .txt-area-1{
  width: 95%;
  margin:0px auto 20px;
  background-color: #e39b65;
}

#career-content .txt-area-1 p{
  font-size: 14px;
  line-height: 1.7;
  padding: 10px;
}

#career-content .txt-area-2{
  width: 95%;
  margin:0px auto 20px;
  background-color: #fce3b1;
}

#career-content .txt-area-2 p{
  font-size: 14px;
  line-height: 1.7;
  padding: 10px;
}

#career-content ul{
  width: 100%;
  text-align: center;
  display: table;
}

#career-content li{
  margin:0;
  padding: 0;
  display: table-cell;
}

.grad-btn {
  /*.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
  float: right;
  //background-color:#1aa76f;
  color: #333333;
  //width: 120px;
  text-align: center;
  padding: 7px 0px 7px 0px;
  margin-right: 10px;
}

.grad-btn:hover {
  opacity: 0.7;
}

.grad-btn::before {
  content: "続きを読む▼"
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 10px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px; /*グラデーションで隠す高さ*/
  //background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  //background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
  content: "閉じる▲" /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}


.grad-btn2 {
  /*.grad-btn2のCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
  background-color:#1aa76f;
  color: #FFF;
  //width: 100%;
  text-align: center;
  padding: 7px 0px 7px 0px;
  display: block;
}

.grad-btn2:hover {
  opacity: 0.7;
}

.grad-btn2::before {
  content: "他の職種も見る▼"
}
.grad-item2 {
  position: relative;
  overflow: hidden;
  height: 10px; /*隠した状態の高さ*/
}
.grad-item2::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px; /*グラデーションで隠す高さ*/
  //background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  //background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger2 {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger2:checked ~ .grad-btn2::before {
  content: "閉じる▲" /*チェックされていたら、文言を変更する*/
}
.grad-trigger2:checked ~ .grad-item2 {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger2:checked ~ .grad-item2::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

.grad-btn3 {
  /*.grad-btn3のCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
  background-color:#1aa76f;
  color: #FFF;
  //width: 100%;
  text-align: center;
  padding: 7px 0px 7px 0px;
  display: block;
}

.grad-btn3:hover {
  opacity: 0.7;
}

.grad-btn3::before {
  content: "質問をもっと見る▼"
}
.grad-item3 {
  position: relative;
  overflow: hidden;
  height: 0px; /*隠した状態の高さ*/
}
.grad-item3::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px; /*グラデーションで隠す高さ*/
  //background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  //background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger3 {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger3:checked ~ .grad-btn3::before {
  content: "閉じる▲" /*チェックされていたら、文言を変更する*/
}
.grad-trigger3:checked ~ .grad-item3 {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger3:checked ~ .grad-item3::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

.grad-btn4 {
  /*.grad-btnのCSSは表示/非表示の動作には関係ないので、ご自由にどうぞ。*/
  float: right;
  //background-color:#1aa76f;
  color: #333333;
  //width: 120px;
  text-align: center;
  padding: 7px 0px 7px 0px;
  margin-right: 10px;
}

.grad-btn4:hover {
  opacity: 0.7;
}

.grad-btn4::before {
  content: "回答を見る▼"
}
.grad-item4 {
  position: relative;
  overflow: hidden;
  height: 0px; /*隠した状態の高さ*/
}
.grad-item4::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px; /*グラデーションで隠す高さ*/
  //background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  //background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger4 {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger4:checked ~ .grad-btn4::before {
  content: "閉じる▲" /*チェックされていたら、文言を変更する*/
}
.grad-trigger4:checked ~ .grad-item4 {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger4:checked ~ .grad-item4::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

/* -------------------------------- 

新卒

-------------------------------- */

#saiyo-content{
  width: 100%;
  line-height: 1.7;
}

#saiyo-content img{
  width: 100%;
  height: auto;
} 

#saiyo-content .harf-img{
  width: 40%;
  height: auto;
} 

#saiyo-content p{
  width: 95%;
  margin:10px auto 10px;
}

#saiyo-content a:hover{
  opacity: 0.8;
}

#saiyo-content hr{
  border-top:1px solid #addce3;
  border-bottom:1px solid #FFF;
  margin:30px 0px;

}

#saiyo-content h3{
  color: #2bc6a7;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

#saiyo-content h4{
  color: #318ac8;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.1em;
}

#saiyo-content h5{
  background-color:#318ac8; 
  color: #FFF;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.1em;
  padding: 2px;
  border-radius: 40px;        /* CSS3草案 */  
  -webkit-border-radius: 40px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 40px;   /* Firefox用 */  
}

#saiyo-content h6{
  color: #318ac8;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: center;
}


#saiyo-content .h3-line{
  width: 50px;
  margin: 7px auto 20px;
  border-top:3px solid #2bc6a7;
}


#saiyo-content ul{
  width: 100%;
  text-align: center;
  display: table;
}

#saiyo-content li{
  margin:0;
  padding: 0;
  display: table-cell;
}

#saiyo-content .left-area{
  width: 48%;
  float: left;
  margin-bottom: 20px;
}

#saiyo-content .right-area{
  width: 48%;
  float: right;
  margin-bottom: 20px;
}

#saiyo-content .video-area{
  width: 90%;
  margin:0 auto 0;
  text-align: center;
}

#saiyo-content .blue-area{
  width: 100%;
  background-color: #e9f6f8;
  padding-top: 40px;
  padding-bottom: 40px;
}

#saiyo-content .read-area{
  width: 90%;
  margin: 0 auto 0;
}

#saiyo-content .photo-area{
  width: 90%;
  margin: 0 auto 0;
}

#saiyo-content .support-left{
  width: 90%;
  margin: 0 auto 0;
}

#saiyo-content .support-right{
  width: 90%;
  margin: 0 auto 0;
}

#saiyo-content .box-title{
background-color:#318ac8; 
color: #FFF;
font-size: 16px;
text-align: center;
letter-spacing: 0.1em;
padding: 2px;
}

#saiyo-content .box{
  border:1px solid #318ac8;
  padding: 10px;
  background-color: #FFF;
  margin-bottom: 10px;
}

#entry-btn-area{
  width: 100%;
  //height: 120px;
  position: fixed;
  bottom:0px;
  left: 0px;
  z-index: 99999;
  //background-color:#FFF;
}

#entry-btn-area li{
  display: table-cell;
}

#entry-btn-area img{
  width: 100%;
  height: auto;
}

#entry-btn-area img:hover{
    cursor:pointer;
    filter: alpha(opacity=100);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=100)";  /* ie 8 */
    -moz-opacity:1;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 1;              /* Safari 1.x */
    opacity:1;
    zoom:1;
}

#image-2{
  text-align: center;
} 

.modal-content {
  width: 90% ;
  margin: 0 ;
  background: #fff ;
  border-radius: 6px;
  position: fixed ;
  display: none ;
  z-index: 99999 ;
  text-align: center;
}
  
#modal-overlay {
  z-index: 99998 ;
  display: none ;
  position: fixed ;
  top: 0 ;
  left: 0 ;
  width: 100% ;
  height: 120% ;
  background-color: rgba( 0,0,0, 0.5 ) ;
}

.modal-content .title {
  font-size: 16px;
  background-color: #318ac8;
  color:#FFF;
  padding: 10px;
}

.modal-content .info {
  padding: 15px;
  line-height: 1.7;
  text-align: left;
  font-size: 12px;
}

.modal-content .info-center {
  padding: 15px;
  line-height: 1.7;
  text-align: center;
  font-size: 16px;
}

.modal-content .info-center a{
  text-decoration: none;
  color: #318ac8;
}

.modal-content .photo-area {
  display: none;
}

.modal-content .txt-area {
  padding: 15px;
  line-height: 1.7;
  text-align: left;
  font-size: 12px;
}

.modal-content .button-close {
  padding: 7px 20px;
  border:1px solid #ccc;
  text-decoration: none;
  color: #222;
}

.modal-content .button-close:hover {
  background-color: #ccc;
}

/* -------------------------------- 

高校生

-------------------------------- */
#hschool-content{
  width: 100%;
  line-height: 1.7;
}

#hschool-content img{
  width: 100%;
  height: auto;
} 


#hschool-content h4{
  color: #1aa76f;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.1em;
}

#hschool-content ul{
  width: 100%;
  text-align: center;
  display: table;
}

#hschool-content li{
  margin:0;
  padding: 0;
  display: table-cell;
}

#hschool-content .video-area{
  width: 90%;
  margin:0 auto 0;
  text-align: center;
}

#hschool-content .school-bk{
  width: 100%;
  background-image: url(images/h_school_bk.jpg);
  background-repeat: repeat-y;
  margin-bottom: 30px;
  padding-bottom: 20px;
  padding-top: 20px;
}

#hschool-content .read-area{
  padding-left: 20px;
  padding-right: 20px;
}

#hschool-content .read-title-green{
  color: #1aa76f;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

#hschool-content .read-title-black{
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

#hschool-content .end-area{
  width: 100%;
  position: relative;
}

#hschool-content .end-area a{
  text-decoration: none;
}

#hschool-content .end-area a:hover{
  opacity: 0.7;
}

#hschool-content .end-area .link-btn{
  background-color: #259668;
  color: #FFF;
  padding: 7px 20px 7px 20px;
  position: absolute;
  bottom:10px;
  right: 10px;
}

/* -------------------------------- 

お問い合わせ

-------------------------------- */

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

#contact h1{
  line-height: 2;
  text-align: center;
  background-color: #ff9600;
  font-size: 24px;
  color: #FFFFFF;
  margin-top: 20px;
  margin-bottom: 20px;
}

#contact .main-read{
  font-size: 12px;
  line-height: 1.7;
}


#contact h2{
  line-height: 2;
  text-align: center;
  margin-bottom: 10px;
}

#contact .hs{
  background-color: #ff6d6d;
  font-size: 10px;
  padding: 5px 10px 5px 10px;
  color: #FFF;
  margin-left: 10px;
}

#contact table{
  width: 100%;
}

#contact table th{
  width: 100%;
  padding:5px;
  vertical-align: middle;
  display: block;
  font-size: 12px;
}

#contact table td{
  width: 100%;
  padding: 5px;
  display: block;
}

#contact label{
  font-size: 12px;
  font-weight: normal;
  margin-right: 10px;
}

#contact input[type="text"] {
  width: 90%;
  height: 30px;
  background: #FFF;
  border: 1px solid #FFF;
  font-size: 1em;
  border: 1px solid #ccc;
}

#contact select{
  width: 15%;
  padding: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #ccc;
  background: #ffffff;
  background-size: 20px, 100%;
  margin-right:10px;
  margin-bottom: 15px;
}

#contact input[type="text"]:focus {
  background: #edf4ff;
  border: 1px solid #FFF;
}

#contact textarea {
  width: 100%;
  height: 150px;
  background: #FFF;
  border: 1px solid #FFF;
  font-size: 1em;
  border: 1px solid #ccc;
  padding: 10px;
}

#contact textarea:focus {
  background: #edf4ff;
  border: 1px solid #FFF;
}

#contact .btn-area{
  width: 100%;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

#contact input[type="submit"]{
  padding: 10px 20px 10px 20px;
  background-color: #ff9600;
  color: #FFFFFF;
  border:0px;
  border-radius: 40px;        /* CSS3草案 */  
  -webkit-border-radius: 40px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 40px;   /* Firefox用 */  
}

#contact input[type="submit"]:hover{
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;  
}


#contact input[type="reset"]{
  padding: 10px 20px 10px 20px;
  background-color: #cccccc;
  color: #FFFFFF;
  border:0px;
  border-radius: 40px;        /* CSS3草案 */  
  -webkit-border-radius: 40px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 40px;   /* Firefox用 */  
}

#contact input[type="reset"]:hover{
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;  
}

#contact .thanks{
  font-size: 18px;
  line-height: 1.7;
  text-align: center;
  margin-top: 10px;
}

#contact .read{
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
  margin-top: 10px;
}

#contact .backbtn{
  padding: 10px 30px 10px 30px;
  background-color: #ff9600;
  color: #FFFFFF;
  text-decoration: none;
  border:0px;
  border-radius: 40px;        /* CSS3草案 */  
  -webkit-border-radius: 40px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 40px;   /* Firefox用 */  
}

#contact .backbtn:hover{
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;  
}

#formWrap {
  width:94%;
  margin:40px auto 40px;
}

#formWrap input[type="submit"]{
  padding: 10px 30px 10px 30px;
  background-color: #ff9600;
  color: #FFFFFF;
  border:0px;
  border-radius: 40px;        /* CSS3草案 */  
  -webkit-border-radius: 40px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 40px;   /* Firefox用 */  
}

#formWrap input[type="submit"]:hover{
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;  
}

#formWrap input[type="button"]{
  padding: 10px 30px 10px 30px;
  background-color: #cccccc;
  color: #FFFFFF;
  border:0px;
  border-radius: 40px;        /* CSS3草案 */  
  -webkit-border-radius: 40px;    /* Safari,Google Chrome用 */  
  -moz-border-radius: 40px;   /* Firefox用 */  
}

#formWrap input[type="button"]:hover{
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;  
}

table.formTable{
  width:100%;
  margin:0 auto;
  border-collapse:collapse;
}
table.formTable td,table.formTable th{
  padding:10px;
}
table.formTable th{
  width:100%;
  border:1px solid #ccc;
  font-weight:normal;
  background:#f2f2f2;
  text-align:center;
  display: block;
}

table.formTable td{
  width:100%;
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
  border-bottom:1px solid #ccc;
  font-weight:normal;
  background:#fff;
  display: block;
  margin-bottom: 10px;
}

p.error_messe{
  margin:5px 0;
  color:red;
}

/* -------------------------------- 

アコーディオン

-------------------------------- */
#saiyo-search-area{
  width: 100%;
  margin-top: 10px;
}

#saiyo-search-area h1{
  background-color: #edf7ce;
  color: #1aa76f;
  text-align: center;
  padding: 10px;
  font-size: 18px;
}

#saiyo-search-area h2{
  background-color: #1aa76f;
  color: #FFFFFF;
  text-align: center;
  padding-top: 7px;
  padding-bottom: 4px;
}


/*ボックス全体*/
#saiyo-search-area .accbox {
    margin: 0em 0;
    padding: 0;
    max-width: 400px;/*最大幅*/
}

/*ラベル*/
#saiyo-search-area .accbox label {
    display: block;
    margin: 0 0;
    padding : 10px 9px;
    color: #ffffff;
    background: #71c6a4;
    cursor :pointer;
    transition: all 0.5s;
    border-left:1px solid #1aa76f;
    border-right:1px solid #1aa76f;
    border-bottom:1px solid #1aa76f;
}

/*アイコンを表示*/
#saiyo-search-area .accbox label:before {
    //content: '\f054';
    //font-family: 'FontAwesome';
    //padding-right: 8px;
}

/*ラベルホバー時*/
#saiyo-search-area .accbox label:hover {
    background :#7ad5b1;
}

/*チェックは隠す*/
#saiyo-search-area .accbox input {
    display: none;
}

/*中身を非表示にしておく*/
#saiyo-search-area .accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
#saiyo-search-area .cssacc:checked + label + .accshow {
    height: auto;
    //padding: 5px;
    background: #FFFFFF;
    opacity: 1;
}

#saiyo-search-area .accbox .accshow p {
    padding: 10px 10px;
    font-size:14px;
    border-left:1px solid #1aa76f;
    border-right:1px solid #1aa76f;
    border-bottom:1px solid #1aa76f;
  }

#saiyo-search-area .accbox .accshow a {
  color: #1aa76f;
  text-decoration: none;
  transition: 0.5s;
}

#saiyo-search-area .accbox .accshow a:hover {
  color: #20ce89;
  transition: 0.5s;
}

/*アイコンを入れ替える*/
#saiyo-search-area .cssacc:checked + label:before {
    //content: '\f078';
}


}