@charset "UTF-8";

/*****************************
  pagehead
*****************************/
.head-campus-life .phcmn{
  background-image: url(../../images/head/head_campus_life.webp) ;
}

/*****************************
  pagesec-reason
*****************************/
.pagesec-reason{
  background: url(../../images/page/campus-life/reason_bg.webp) no-repeat center / cover;
  padding-bottom: 10rem;
}
.pagesec-reason .innerbox{
  background: #fff;
  padding: 8rem 4rem;
}
.pagesec-reason .innerob{
  position: absolute;
}
.pagesec-reason .innerob1{
  aspect-ratio: 523/334;
  background: url(../../images/page/campus-life/reason_inner1.svg) no-repeat center / contain;
  top: 0;
  left: 0;
  width: 43.9%;
}
.pagesec-reason .innerob2{
  aspect-ratio: 251/163;
  background: url(../../images/page/campus-life/reason_inner2.svg) no-repeat center / contain;
  bottom: 0;
  left: 0;
  width: 42.1%;
}
.pagesec-reason .innerob3{
  aspect-ratio: 226/255;
  background: url(../../images/page/campus-life/reason_inner3.svg) no-repeat center / contain;
  right: 0;
  bottom: 0;
  width: 37.9%;
}
.pagesec-reason .ttlbox{
  margin-bottom: 3rem;
  text-align: center;
}
.pagesec-reason .ttlbox .ttl{
  display: inline-block;
  font-size: 3rem;
  font-weight: bold;
  padding: 0 6rem;
  position: relative;
}
.pagesec-reason .ttlbox .ttl::before,
.pagesec-reason .ttlbox .ttl::after{
  content: "";
  aspect-ratio: 70 / 61;
  background: url(../../images/ob/ttl_ob2.svg) no-repeat center / contain;
  position: absolute;
  bottom: 0;
  width: 50px;
}
.pagesec-reason .ttlbox .ttl::before{
  left: 0;
}
.pagesec-reason .ttlbox .ttl::after{
  right: 0;
  transform: scale(-1, 1);
}
.pagesec-reason .fbox{
  width: 50%;
}
.page_sl_area {
  position: relative;
  padding: 5% 0 5%;
  animation-name:GradietionAnimation;
  animation-iteration-count:infinite;
  animation-duration:50s;
  animation-timing-function:linear;
  height: 300px;
  max-width: 100%;
  background-image: url(../../images/page/campus-life/page_sl.webp);
  background-position: center;
  background-size: cover;
  background-repeat: repeat-x;
}
@keyframes GradietionAnimation {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1950px 0;
  }
}

@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
  .page_sl_area {
    padding: 3% 0 3%;
  }
}
@media only screen and (max-width: 820px) {
  .pagesec-reason .innerbox {
    padding: 6rem 0rem;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .pagesec-reason .ttlbox .ttl {
    font-size: 2rem;
    padding: 0 2rem;
  }
  .pagesec-reason .ttlbox .ttl::before,
  .pagesec-reason .ttlbox .ttl::after {
    width: 30px;
  }
  .pagesec-reason .ttlbox .ttl::before {
    left: -10px;
  }
  .pagesec-reason .ttlbox .ttl::after {
    right: -10px;
  }
  .pagesec-reason .fbox {
    width: 100%;
  }
}

/*****************************
  pagesec-blog
*****************************/
.pagesec-blog {
  padding-bottom: 10rem;
}
.pagesec-blog .bloglist{
  margin-top: 3rem;
}

/*****************************
  pagesec-calendar
*****************************/
.pagesec-calendar{
  padding-bottom: 10rem;
}
.pagesec-calendar .imgbox{
  background: #fff;
  padding: 2rem;
  max-width: 1000px;
  min-width: 800px;
  margin: 2rem auto 0;
}
.pagesec-calendar .scroll-hint-icon {
  top: 10rem;
}

/*****************************
  pagesec-oneday
*****************************/
.pagesec-oneday .imgbox{
  padding: 2rem;
  max-width: 1000px;
  min-width: 800px;
  margin: 2rem auto 0;
}
.pagesec-oneday .scroll-hint-icon {
  top: 10rem;
}


/*****************************
  pagesec-insta
*****************************/
.pagesec-insta .insta{
  margin: 2rem 0;
}
@media only screen and (max-width: 1180px) {
  
}
@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 820px) {
  
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 767px) {
  .pagesec-insta .insta{
    margin: 2rem ;
  }
}

/*****************************
pagesec-place
*****************************/
.pagesec-place .place > div{
  margin-top: 4rem;
}
.pagesec-place .place > div > dt{
  background: #86c681;
  border-radius: 6px;
  color: #fff;
  font-size: 2.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
  padding: .5rem 2rem;
}
.subttl{
  margin-left: 10px;
  font-size: 16px;
}
.pagesec-place .place > div > dd{
  background: #ecf8ec;
  padding: 2rem;
}
.pagesec-place .place > div:nth-of-type(even) > dt{
  background: #E37EB7;
}
.pagesec-place .place > div:nth-of-type(even) > dd{
  background: #fff4fa;
}
.pagesec-place .place > div > dd li{
  padding-left: 1.6rem;
  position: relative;
}
.pagesec-place .place > div > dd li:not(:last-of-type)::before{
  content: "・";
  position: absolute;
  bottom: 0;
  left: 0;
}
.pagesec-place .companylogo{
  gap: 1rem;
  margin-top: 4rem;
}
.pagesec-place .companylogo li{
  aspect-ratio: 3/2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  width: calc(100% / 6 - 1rem);
}
.pagesec-place .companylogo li a{
  aspect-ratio: 3/2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  width: 100%;
}
.pagesec-place .companylogo li a img{
  object-fit: contain;
  width: 100%;
}

@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
  .pagesec-place .companylogo li {
    width: calc(100% / 4 - 1rem);
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .pagesec-place .place > div > dt {
    font-size: 1.8rem;
    padding: .5rem 1.5rem;
  }
  .pagesec-place .place > div > dd {
    padding: 1.5rem;
  }
  .pagesec-place .companylogo li {
    padding: 0 .5rem;
    width: calc(100% / 3 - 1rem);
  }
}