@import url('main.css');
@import url('socialbuttons_sp.css');
@import url('em.css');
@import url('em_sp.css');
@import url('tokushu.css');
@import url('special.css');
@import url('index.css');

/*======================================= 共通 =======================================*/
#scholarship{
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-feature-settings: "palt";
}
#scholarship,.sliderBlock{
  max-width:960px;
  margin: 0 auto;
}
/*======================================= KVエリア・紹介文 =======================================*/
.kvArea{
  background: #FFEACF;
  display:flex;
  justify-content: space-between;
  flex-wrap:wrap;
  flex-direction:column-reverse;
}

.kvAreaInfo{
  width: 100%;
  background: rgb(255,196,0);
  background: -moz-linear-gradient(180deg, rgba(255,196,0,1) 0%, rgba(255,145,0,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(255,196,0,1) 0%, rgba(255,145,0,1) 100%);
  background: linear-gradient(180deg, rgba(255,196,0,1) 0%, rgba(255,145,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffc400",endColorstr="#ff9100",GradientType=1);
}

.kvAreaImg{
  width:100%;
  padding:1.5rem 1.5rem 1.5rem 1.5rem;
  text-align:center;
}

.kvAreaInfoWrap{
  padding: 2.4rem;
}

.kvAreaInfoWrap ul{
  display:flex;
}

.kvAreaInfoWrap ul li{
  background: #ffffff;
  padding:0.5rem 1rem;
  border-radius:50px;
  font-size:1.2rem;
}

.kvAreaInfoWrap ul li:not(:first-child){
  margin-left:8px;
}

.kvAreaInfoWrap h2{
  color:#ffffff;
  font-size:2.4rem;
  font-weight:700;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  margin: 0;
  padding: 2rem 0;
  border-bottom:1px solid #ffffff;
  line-height:1.4;
}

.kvAreaInfoWrap p{
  color:#ffffff;
  font-size:1.4rem;
  font-weight:500;
  margin: 0;
  padding: 1.4rem 0 0 0;
  line-height: 1.2;
}
.introArea{
  padding:1.5rem;
}

.introArea p{
  font-size:1.3rem;
  line-height: 1.6;
}
/*======================================= エリア別学校紹介 =======================================*/
/* タイトル */
.specialTitleArea{
  padding:5rem 0 2rem 0;
}

.specialTitle{
  background: #C3EAEB;
  color:#089195;
  font-size:1.8rem;
  font-weight:700;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  text-align: center;
  padding:1.5rem 1rem;
  text-shadow:0px 1px 0px rgba(255,255,255,1);
  box-shadow:0px 3px 6px rgba(8,145,149,0.5);
  position:relative;
}

.specialTitle:before{
  content:"";
  display: block;
  background: url("/new/_app/_webroot/img/page/special/scholarship/area_ttl_sub.png");
  background-size:contain;
  width:77px;
  height:54px;
  position:absolute;
  top: -32%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

/*地域別ボタン*/
.areaLinkList ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap: 8px 8px;
  padding:2rem 10px;
}

.areaLinkList ul li{
  width:calc(calc(100% / 3) - 6px);
}

.areaLinkList ul li a{
  border-radius:4px;
  color:#ffffff;
  display: block;
  font-weight:600;
  font-size:1.2rem;
  text-align: center;
  padding:0.75rem 0.25rem;
}

.areaBlock{
  width:100%;
  max-width:840px;
  margin:0 auto;
  padding:0 0 6rem 0;
}

.areaName h4{
  color:#ffffff;
  text-align:center;
  margin:2rem 0;
  padding:0.75rem 1rem;
  border-radius:4px;
}

.areaLinkList ul li:nth-child(1) a,#hokkaidoTohoku .areaName h4{background: #32ADE2;}
.areaLinkList ul li:nth-child(2) a,#koshinetsuHokuriku .areaName h4{background: #60B051;}
.areaLinkList ul li:nth-child(3) a,#kantou .areaName h4{background: #32A8A0;}
.areaLinkList ul li:nth-child(4) a,#tokai .areaName h4{background: #A2C639;}
.areaLinkList ul li:nth-child(5) a,#kansai .areaName h4{background: #FCB646;}
.areaLinkList ul li:nth-child(6) a,#chugoku .areaName h4{background: #E8623B;}
.areaLinkList ul li:nth-child(7) a,#shikoku .areaName h4{background: #EEA4B9;}
.areaLinkList ul li:nth-child(8) a,#kyushuOkinawa .areaName h4{background: #E08653;}

#hokkaidoTohoku .collegeAreaTag{color:#0E8CC5;}
#koshinetsuHokuriku .collegeAreaTag{color:#60B051;}
#kantou .collegeAreaTag{color:#32A8A0;}
#tokai .collegeAreaTag{color:#A2C639;}
#kansai .collegeAreaTag{color:#FF9100;}
#chugoku .collegeAreaTag{color:#E8623B;}
#shikoku .collegeAreaTag{color:#EEA4B9;}
#kyushuOkinawa .collegeAreaTag{color:#E08653;}



/* 学校リンクbox */
.collegeLinkGroup{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  width:calc(100% - 3rem);
  margin: 0 auto;
  gap: 40px 40px;
  overflow-x: scroll;
}
.collegeLinkGroup::-webkit-scrollbar{
   width: 10px;
}
.collegeLinkGroup::-webkit-scrollbar-track{
   background-color: #ccc;
}
.collegeLinkGroup::-webkit-scrollbar-thumb{
   background-color: #089195;
}

.collegeLinkGroup{
   scrollbar-width: thin;
   scrollbar-color: #089195 #ccc;
}

.collegeLinkGroup.scrollNone{
  overflow-x: visible;
}

.collegeLinkWrap{
  width:100%;
  max-width: 260px;
}

.collegeLinkWrap a{
  display: block;
  width:260px;
}

.collegeLink{
  width:260px;
  background: #ffffff;
  box-shadow:0 3px 6px rgba(0,0,0,0.3);
  margin: 0 0 2rem 0;
}

.collegeLink .collegeLinkImg img{
  object-fit: cover;
  width:260px;
  height:170px;
}

.collegeInfo{
  padding:1rem;
  display: flex;
  flex-direction: column;
}

.collegeTag{
  margin:0 1rem 1rem 0;
  display:flex;
}

.collegeTag li{
  font-size:1.2rem;
  font-weight:900;
  padding-right:8px;
}

.collegeTag li:not(:first-child){
  border-left:2px solid #c4d6d7;
  padding-left:8px;
}

.collegeName{
  font-size:1.6rem;
  font-weight:600;
  margin-bottom: 0.5rem;
  line-height: 1.2;
  min-height: 38px;
}

.collugeKeyword{
  font-size:1rem;
  font-weight:500;
  line-height: 1.6;
  min-height: 5rem;
}
span.nextLink{
  color:#006666;
}

/*地域別検索ボタン*/
.areaSearch{
  margin: 4rem 0 5rem 0;
  display:flex;
  align-items:center;
  justify-content: center;
}

@media screen and (max-width:960px){
  .areaPart{
    padding:1rem;
  }
}

.areaSearchLink{
  background:#C3EAEB;
  box-shadow:0px 4px 0px #32A8A0;
  border-radius:4px;
  color:#32A8A0;
  display: block;
  font-size:1.2rem;
  font-weight:600;
  text-align: center;
  max-width:250px;
  padding:1rem 3rem 1rem 1rem;
  position:relative;
}

.areaSearchLink:after{
  content:"";
  display: block;
  background: url("https://icongr.am/fontawesome/arrow-circle-right.svg?size=20&color=32A8A0");
  position:absolute;
  bottom: 20%;
  right: 3%;
  width:20px;
  height:20px;
}

/*特集一覧へ戻るボタン*/
.backLinkWrap{
  margin: 7rem 0 4rem 0;
}

.backLink{
  display: block;
  background: #19ACB1;
  color:#ffffff;
  text-align: center;
  border-radius:50px;
  width:260px;
  margin:0 auto;
  padding: 1rem;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight:700;
  position:relative;
}

.backLink:before{
  content:"";
  display: block;
  background: url("https://icongr.am/fontawesome/angle-left.svg?size=25&color=ffffff");
  width:20px;
  height:20px;
  position:absolute;
  top: 43%;
  left: 4%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.backLink:after{
  content:"";
  display: block;
  background: url("/new/_app/_webroot/img/page/special/scholarship/backLink_sub.png");
  width:132px;
  height:81px;
  position:absolute;
  bottom: 30px;
  right:0;
}

@media screen and (min-width:768px){
  .kvArea{
    background: #FFEACF;
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
    flex-direction:row;
  }
  .kvAreaInfo{
    width: 35%;
  }

  .kvAreaImg{
    display:flex;
    width:65%;
  }

  .kvAreaInfoWrap{
    padding: 2.4rem;
  }

  .kvAreaInfoWrap ul{
    display:flex;
  }

  .kvAreaInfoWrap ul li{
    background: #ffffff;
    padding:0.5rem 1rem;
    border-radius:50px;
    font-size:1.2rem;
  }

  .kvAreaInfoWrap ul li:not(:first-child){
    margin-left:8px;
  }

  .kvAreaInfoWrap h2{
    color:#ffffff;
    font-size:2.3rem;
    font-weight:700;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    margin: 0;
    padding: 2rem 0;
    border-bottom:1px solid #ffffff;
    line-height:1.4;
  }

  .kvAreaInfoWrap p{
    color:#ffffff;
    font-size:1.2rem;
    font-weight:500;
    margin: 0;
    padding: 1.4rem 0 0 0;
    line-height: 1.2;
  }

  .introArea{
    padding:1.5rem;
  }

  .introArea p{
    font-size:1rem;
    line-height: 1.6;
  }

  .specialTitleArea{
    padding:5rem 0 2rem 0;
  }

  .specialTitle{
    background: #C3EAEB;
    color:#089195;
    font-size:1.8rem;
    font-weight:700;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    text-align: center;
    padding:1.5rem 1rem;
    text-shadow:0px 1px 0px rgba(255,255,255,1);
    box-shadow:0px 3px 6px rgba(8,145,149,0.5);
    position:relative;
  }

  .specialTitle:before{
    content:"";
    display: block;
    background: url("/new/_app/_webroot/img/page/special/scholarship/area_ttl_sub.png");
    position:absolute;
    top: 25%;
    left: 2%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width:112px;
    height:80px;
  }

  /*学校表記タグ*/
  .schoolType{
    width: 260px;
    font-size:1.2rem;
    margin:3rem 0 1rem 1.5rem;
    padding:0.5rem;
    border:1px solid #089195;
    border-left:8px solid #089195;
    display: inline-block;
    background: #ffffff;
    color:#089195;
  }

  /* 学校リンクbox */
  .collegeLinkGroup{
    display:flex;
    flex-wrap:wrap;
    justify-content: flex-start;
    align-items:flex-start;
    width:calc(100% - 3rem);
    margin: 0 auto;
    gap: 40px 40px;
    overflow-x: inherit;
  }

  .collegeLinkWrap{
    width:100%;
    max-width: 260px;
  }

  .collegeLinkWrap a{
    display: block;
    width:260px;
  }


  .collegeLink{
    width:260px;
    background: #ffffff;
    box-shadow:0 3px 6px rgba(0,0,0,0.3);
    margin: 0 0 2rem 0;
  }

  .collegeLink .collegeLinkImg img{
    object-fit: cover;
    width:260px;
    height:170px;
  }

  .collegeInfo{
    padding:1rem;
  }

  .collegeName{
    font-size:1.6rem;
    font-weight:600;
    margin-bottom: 0.5rem;
    min-width:50px;
  }

  .collugeKeyword{
    font-size:1rem;
    font-weight:500;
    line-height: 1.6;
  }
  span.nextLink{
    color:#006666;
  }


  .areaLinkList ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap: 24px 12px;
    padding:2rem 0px;
  }

  .areaLinkList ul li{
    width:calc(calc(100% / 4) - 10px);
  }

  .areaLinkList ul li a{
    border-radius:4px;
    color:#ffffff;
    display: block;
    font-weight:600;
    font-size:1.2rem;
    text-align: center;
    padding:0.75rem 0.25rem;
  }


  .areaBlock{
    width:100%;
    max-width:900px;
    margin:0 auto;
    padding:0 0 0 0;
  }

  .areaName h4{
    color:#ffffff;
    text-align:center;
    margin:2rem 0;
    padding:0.75rem 1rem;
    border-radius:4px;
  }

  .areaSearch{
    margin: 2rem 0 5rem 0;
    display:flex;
    align-items:center;
    justify-content: center;
  }

  .areaSearchLink{
    background:#C3EAEB;
    box-shadow:0px 4px 0px #32A8A0;
    border-radius:4px;
    color:#32A8A0;
    display: block;
    font-size:1.2rem;
    font-weight:600;
    text-align: center;
    max-width:250px;
    padding:1rem 3rem 1rem 1rem;
    position:relative;
  }

  .areaSearchLink:after{
    content:"";
    display: block;
    background: url("https://icongr.am/fontawesome/arrow-circle-right.svg?size=20&color=32A8A0");
    position:absolute;
    bottom: 10px;
    right: 10px;
    width:20px;
    height:20px;
  }

  .dotBgWrap{
    padding:0 0 40px 0;
  }
}