@charset "utf-8";
/*------------------------------------------------------

	common

------------------------------------------------------*/
#page-title { }
@media (min-width: 768px) { #page-title { background: url(/campusview/special/images/st_pagetitle.jpg) no-repeat center / cover; } }
@media (max-width: 767px) { #page-title { background: url(/campusview/special/images/st_pagetitle_sp.jpg) no-repeat center / cover; } }



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

	report

------------------------------------------------------*/
#index.special main .contents { padding-top: 70px; }

#index.special .l_col-special > * {  }
#index.special .l_col-special > *:nth-child( n+5 ) {  }

#index.special .l_col-special  a { border: 1px solid #D0D9E3 ; display: block; text-decoration: none; transition: all 0.2s;  }
#index.special .l_col-special  a:hover {  }
#index.special .l_col-special  a:hover figcaption { background: #665EC0; color: #fff; }

#index.special .l_col-special li figcaption { min-height: 50px; border-top: 1px solid #D0D9E3; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center;font-size: 1.4rem; color: #665EC0; font-weight: bold; background: #fff; margin: 0px; padding: 0px;}

#index.special .l_col-special li figcaption { transition: all 0.2s; }


#index.special .bg-gray-full > div  { position: relative;  }

#index.special .bg-gray-full { position: relative; }
#index.special .bg-gray-full:before { position: absolute; content: ''; display: block; width: 100vw; margin-left: calc(50% - 50vw); z-index: -1; background: #F7F6FC; height: 100%; }


#index.special .l_col-special::before{ }
#index.special .l_col-special::after{ }

@media (min-width: 768px) {
  #index.special .l_col-special > * { width: calc( 25% - 10px ); max-width: 260px;  }
  #index.special .l_col-special > *:nth-child( n+5 ) { margin-top: 40px; }

  #index.special .bg-gray-full > div  { padding: 30px 0px 70px 0px; }

  #index.special .l_col-special::before{
    content:''; display: block; width:23%; order:1;
  }
#index.special .l_col-special::after{
    content:''; display: block; width:23%;
  }


}

@media (max-width: 767px) {
  #index.special .l_col-special > * { width:  calc(50% - 10px ); max-width: 100%;  }
  #index.special .l_col-special > *:nth-child( n+3 ) { margin-top: 20px; }

  #index.special .bg-gray-full > div  { padding: 15px 0px 35px 0px; }


}