@charset "utf-8";
/* CSS Document */
/* # =================================================================
   # Layout
   # ================================================================= */
   .l-rd-head{
      border-top-right-radius: 100px;
      border-top-left-radius: 100px;
      padding-top: 7rem;
      padding-bottom: 7rem;
      padding-inline: 2.5rem;
      width: 100%;
      height: fit-content;
   }
   @media (max-width: 767.98px) {
      .l-rd-head{
         border-top-right-radius: 50px;
         border-top-left-radius: 50px;
         padding-top: 6.5rem;
         padding-bottom: 8.2rem;
         padding-inline: 2.5rem;
      }
   }

/* # =================================================================
   # Project
   # ================================================================= */
.p-campuses.--pt40 {
   padding-top: 4rem;
}

.p-campuses-mv {
   display: flex;
   align-items: center;
   gap: 30px;
   margin-bottom: 4.5rem;
}
.p-campuses-mv__img {
   flex: 1;
   overflow: hidden;
   border-radius: 20px;
}
.p-campuses-mv__img>img {
   width: 100%;
   min-height: 258px;
   object-fit: cover;
}
.p-campuses-mv__text {
   flex: 0 0 462px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   font-weight: var(--fontweight-bold);
}
.p-campuses-mv__lead {
   font-size: 26px;
   line-height: 1.15;
}
.p-campuses-mv__title {
   margin-top: .357em;
   font-size: 42px;
   line-height: 1.33;
}
.p-campuses-managerBg::before,
.p-campuses-managerBg::after {
   position: absolute;
   z-index: 1000;
   content: '';
}
.p-campuses-managerBg::before {
   bottom: -22rem;
   right: 0;
   width: 18.6rem;
   height: 26.3rem;
   background: url('../images/campuses/bg-manager-fluid-green.webp') no-repeat left center / auto 100%;
}
.p-campuses-managerBg::after {
   top: -20rem;
   left: 0;
   width: 22.2rem;
   height: 45.6rem;
   background: url('../images/campuses/bg-manager-fluid-yellow.webp') no-repeat right center / auto 100%;  
}
.p-campuses-userBg::before {
   position: absolute;
   top: -15rem;
   left: 0;
   z-index: 1000;
   width: 27.4rem;
   height: 45.6rem;
   background: url('../images/campuses/bg-user-fluid-green.webp') no-repeat right center / auto 100%;
   content: '';
}
.p-user-info {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0 1rem;
}
.p-user-info__img {
   flex: 0 0 7rem;
}
.p-user-info__img>img {
   width: 100%;
}
.p-user-info__name {
   font-weight: var(--fontweight-bold);
   font-size: 1.8rem;
   line-height: 1.33;
}
.p-user-info__checks {
   margin-top: 1.4rem;
}
.p-user-info__checks .c-check {
   gap: 0 5px;
}
.p-timeline {
   position: relative;
   margin-top: 2.2rem;
   margin-right: auto;
   margin-left: auto;
   padding-top: 4.8rem;
   padding-right: 4.8rem;
   padding-bottom: 4.8rem;
   padding-left: 4.8rem;
   border-radius: 20px;
   background-color: #FFF;
}
.p-timeline__inner {
   display: table;
   position: relative;
   margin-right: auto;
   margin-left: auto;
}
.p-timeline__inner::before {
   position: absolute;
   left: 2.7rem;
   translate: -50% 0;
   width: 4px;
   height: 100%;
   background-color: var(--color-light-green);
   content: '';
}
.p-timeline__item {
   display: flex;
   gap: 0 2.4rem;
}
.p-timeline__item+.p-timeline__item {
   margin-top: 2.6rem;
}
.p-timeline__img {
   flex: 0 0 5.4rem;
   position: relative; 
}
.p-timeline__img>img {
   width: 100%;
}
.p-timeline__txt {
   flex: 1;
   display: flex;
   margin-top: 1em;
   font-weight: var(--fontweight-bold);
   line-height: 1.5;
}
.p-timeline__time {
   flex: 0 0 4em;
}
.p-campuses-img {
   padding-top: .375em;
}
.p-campuses-img>img {
   width: 100%;
   border-radius: 10px;
}
.p-campuses-item {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: 25px;
}
.p-campuses-item__list {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 1rem 0;
   width: calc((100% - 100px)/5);
   text-align: center;
   line-height: 1.5;
}
.p-campuses-item__img {
   width: 7rem;
}
.p-campuses-view {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: 32px;
}
.p-campuses-viewBg:before {
   position: absolute;
   top: -24rem;
   right: 0;
   z-index: 1000;
   width: 20.3rem;
   height: 39.6rem;
   background: url('../images/campuses/bg-view-fluid-green.webp') no-repeat left center / auto 100%;
   content: '';
}
.p-campuses-view__img {
   display: block;
   position: relative;
   overflow: hidden;
   border-radius: 10px;
}
.p-campuses-view__img>img {
   aspect-ratio: 233 / 138;
   width: 100%;
   object-fit: cover;
}
.p-campuses-view__list {
   width: calc((100% - 32px)/2);
}
.p-campuses-view__txt {
   margin-top: .625em;
   font-weight: var(--fontweight-bold);
   line-height: 1.5;
}
.p-campuses-view__icon {
   position: absolute;
   right: 6px;
   bottom: 6px;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background-color: #FFF;
}
.p-campuses-view__glasses {
   width: 19px;
   height: 19px;
   background-color: var(--color-green);
   mask-image: url('../images/common/icon-glasses.svg');
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: contain;
}
.p-campuses-carousel {
   position: relative;
}
.p-campuses-carousel__img {
   width: 100%;
   border-radius: 10px;
}
.p-campuses-carousel__txt {
   margin-top: .625em;
   font-weight: var(--fontweight-bold);
   line-height: 1.5;
}
.p-campuses-carousel .c-slider-arrow {
   top: calc(50% - 2.5rem);
}
.p-campuses-carousel .c-slider-arrow.--prev {
   left: -30px;
}
.p-campuses-carousel .c-slider-arrow.--next {
   right: -30px;
}
.p-campuses-carousel .c-slider-pagination {
   margin-top: 1rem;
}
.p-acccess {
   display: flex;
   align-items: flex-start;
   gap: 20px 30px;
}
.p-access__map {
   flex:  0 0 485px;
}
.p-access__txt {
   flex: 1;
}
.p-access__head {
   line-height: 25px;
   margin-bottom: 1rem;
}
.p-access__body {
   line-height: 25px;
   margin-bottom: 1rem;
   padding-bottom: .75rem;
   border-bottom: 1px dashed var(--color-beige);
}

.p-access__txt.--card {
   flex: 1;
   padding-bottom: 50px;
}
.p-access__head.--card {
   height: 2.3rem;
   font-size: 1.8rem;
}

.p-access__head.--card .c-label{
   min-height: 2.3rem;
}
.p-access__body.--card {
   font-size: 1.8rem;
   margin-bottom: 0;
   padding-bottom: 1rem;
   border: none;
}
.p-access__btn.--card {
   margin: 0;
   position: absolute;
   bottom: 0px;
   left: 50%;
   transform: translateX(-50%) 
}

.p-access__body:last-child {
   margin-bottom: 0;
   border-bottom: 0;
}
.p-access__btn {
   margin-top: 1rem;
   margin-bottom: 1rem;
}
.p-campuses-sns {
   max-width: 340px;
   margin-right: auto;
   margin-left: auto;
   filter: drop-shadow(0 3px 6px rgba(0,0,0,.16));
   transition: opacity var(--animation-sec);
}
.p-campuses-sns__inner {
   display: flex;
   align-items: center;
   padding-top: 1rem;
   padding-right: 20px;
   padding-bottom: 1rem;
   padding-left: 20px;
   border-radius: 10px;
   border: 1px solid var(--color-green);
   background-color: #FFF;
   text-decoration: none;
}
.p-campuses-sns__logo {
   flex: 0 0 40px;
}
.p-campuses-sns__txt {
   margin-right: 20px;
   margin-left: 20px;
   font-weight: var(--fontweight-bold);
   color: var(--color-black);
   font-size: 1.6rem;
   line-height: 1.5;
}
.p-campuses-sns__txt>span {
   display: block;
   font-size: 1.4rem;
}
.p-campuses-sns__arrow {
   flex: 0 0 20px;
   margin-left: auto;
}
@media (hover: hover) {
   .p-campuses-sns:hover {
      opacity: var(--hover-opacity);
   }
}
@media (max-width: 991.98px) {
   .p-campuses-mv {
      flex-direction: column;
   }
   .p-campuses-mv__text {
      flex: 1;
   }
   .p-acccess {
      flex-direction: column;
      align-items: normal;
   }
   .p-access__map {
      flex: 1;
      aspect-ratio: 340 / 200;
   }
   .p-access__body {
      font-size: 1.4rem;
   }
}
@media (max-width: 767.98px) {
   .p-campuses-mv {
      row-gap: 2.2rem;
      margin-bottom: 3rem;
   }
   .p-campuses-mv__img>img {
      min-height: 170px;
   }
   .p-campuses-mv__lead {
      font-size: 2rem;
   }
   .p-campuses-mv__title {
      margin-top: .307em;
      font-size: 2.6rem;
   }
   .p-campuses-managerBg::before {
      bottom: -29.743vw;
      width: 8.7rem;
      height: 18.8rem;
   }
   .p-campuses-managerBg::after {
      top: -38.461vw;    
      width: 12.2rem;
      height: 26.2rem;
   }
   .p-campuses-userBg::before {
      top: -29.23vw;
      width: 12.2rem;
      height: 25.3rem;
   }
   .p-user-info {
      justify-content: flex-start;
   }
   .p-user-info__name {
      font-size: 1.6rem;
   }
   .p-user-info__checks {
      margin-top: 1rem;
   }
   .p-timeline {
      margin-top: 3rem;
      padding-top: 3rem;
      padding-right: 25px;
      padding-bottom: 3rem;
      padding-left: 25px;
   }
   .p-timeline__inner {
      margin-right: 0;
      margin-left: 0;
   }
   .p-timeline__inner::before {
      left: 2rem;
   }
   .p-timeline__item {
      gap: 0 1.8rem;
   }
   .p-timeline__txt {
      margin-top: .75em;
      font-size: 1.4rem;
   }
   .p-timeline__img {
      flex: 0 0 4rem;
   }
   .p-timeline__time {
      flex: 0 0 3.5em;
   }
   .p-campuses-item__list {
      gap: .5rem 0;
      font-size: 1.2rem;
   }
   .p-campuses-item__img {
      width: 4.5rem;
   }
   .p-campuses-view {
      gap: 20px;
   }
   .p-campuses-viewBg:before {
      top: -51.282vw;
      width: 11.8rem;
      height: 18.8rem;
   }
   .p-campuses-view__list {
      width: calc((100% - 20px)/2);
   }
   .p-campuses-view__txt {
      margin-top: .714em;
      font-size: 1.4rem;
   }
   .p-campuses-view__icon {
      width: 24px;
      height: 24px;
   }
   .p-campuses-view__glasses {
      width: 13px;
      height: 13px;
   }
   .p-campuses-carousel__txt {
      margin-top: .714em;
      font-size: 1.4rem;
   }
   .p-campuses-carousel .c-slider-arrow.--prev {
      left: -2.5rem;
   }
   .p-campuses-carousel .c-slider-arrow.--next {
      right: -2.5rem;
   }
   .p-access__body.--card{
      font-size: 1.4rem;
   }
}

.p-campuses-card {
   position: relative;
   display: flex;
   flex-direction: column;
   border-radius: 20px;  
   margin-inline: auto;
   margin-bottom: 4rem;
   padding-top: 3.5rem; 
   padding-inline: 4rem;
   padding-bottom: 4rem;
   background-color: #fff;
   max-width: 768px;
   width: 100%;
   height: auto;
   color: var(--color-black);
   text-decoration: none;
   transition: background-color var(--animation-sec);
}
.p-campuses-card__body {
   display: flex;
   flex-direction: row;
}
.p-campuses-card__title {
   margin-bottom: 20px; 
   color: var(--color-green);
   font-weight: var(--fontweight-bold);
   font-size: 3.2rem;
   text-align: center; 
   color: #000;
   line-height: 37px;
}
.p-campuses-card__left {
   width: 312px;
   height: auto;
   margin-right: 3.2rem;
}

.p-campuses-card__right {
   position: relative;
   height: auto;
   flex: 1;
}

.p-campuses-card__personImg {
   flex-shrink: 0;
   height: 60px;
   width: 60px;
   object-fit: cover;
   border-radius: 0.5rem;
}

.p-campuses-card__tag {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   top: -1.7rem;
   left: 50%;
   transform: translateX(-50%);
   border-radius: 5px;
   width: 263px;
   height: 34px;
   font-size: 2.6rem;
   color: #fff;
   background-color: var(--color-light-green);
}

@media (max-width: 767.98px) {
   .p-campuses-card__body {
      flex-direction: column;
      margin-inline: auto;
   }
   .p-campuses-card__left {
      width: auto;
      margin-right: 0;
      margin-bottom: 10px;
   }
   .p-campuses-card__right {
      max-width: 100%;
   }
   .p-campuses-card__title {
      font-size: 2.6rem;
   }
   .p-campuses-card__tag{
      font-size: 2rem;
   }
}
@media (max-width: 479.98px) {
      .p-campuses-card {
      padding-top: 4.2rem; 
      padding-inline: 1.5rem;
      padding-bottom: 2rem;
      margin-bottom: 30px;
   }
}

.p-campuses-card__img {
   width: 31.2rem;     
   height: 20rem;      
   display: block;   
   object-fit: cover;
   border-radius: 10px;
   margin-bottom: 10px;
}
@media (max-width: 767.98px) {
   .p-campuses-card__img {     
      height: 20rem;      
      object-fit: contain;
      margin-inline: auto;
      margin-bottom: 2rem;
   }
}


.p-campuses-card__person {
   display: flex;
   flex-direction: row;
}
.p-campuses-card__personBody {
   padding-left: 10px;
}

.p-campuses-card__personName {
   font-size: 1.8rem;
   line-height: 2.1rem;
   margin-bottom: 0.5rem;
}

.p-campuses-card__personComment {
   font-size: 1.6rem;
   line-height: 2.4rem;
   font-weight: normal;
}

@media screen and (max-width:767.98px) {
   .p-campuses-card__personName {
      font-size: 1.6rem;
   }

   .p-campuses-card__personComment {
      font-size: 1.4rem;
   }
   
}
.p-box.--staffcard {
   margin-top: 4rem;
   background-image: url('../images/common/bg-toc-left.webp'), url('../images/common/bg-toc-right.webp');
   background-repeat: no-repeat;
   background-position: left top -9.2rem, right -8.8rem bottom -8rem;
   background-size: 20.1rem auto, 21rem auto;
   border: 1px solid #008753;

}
.p-title-staffbtmLine {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 2rem;
   margin-bottom: 0.5rem;
   padding-bottom: 0.5rem;
   border-bottom: 1px dashed #E1E1E1; 
   font-weight: var(--fontweight-bold);
   font-size: 1.8rem;
   line-height: 1.5;
}

.p-campuses-aboutBtns {
    display: flex;
    gap: 0 20px;
    margin-top: 2em;
}

.u-campuses-banner {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.u-campuses-banner.u-hover-img {
  display: block;
}