@charset "utf-8";
/* CSS Document */
@import url("destyle_new.css");
@import url("layout_new.css");
/* ----------------------------------------------- wrapper */
#wrapper {}
/* ----------------------------------------------- main */
main {}
#main {}
/* ----------------------------------------------- */
h2 {
  font-size: 6.5rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 38px;
}
/* ----------------------------------------------- main-slide */
#main-slide {}
#main-slide .inner {
  position: relative;
  margin: 0 0 30px;
}
#main-slide .inner::before {
  /*position: absolute;
  content: "";
  width: 343px;
  height: 514px;
  right: 0;
  bottom: -280px;
  background: url("../img/backimage_slide.png") no-repeat center bottom/ contain;*/  
  /*background: #fff;*/ 
  /*mix-blend-mode: screen;*/
  /*background: url("../img/backimage_slide_02.png") no-repeat center bottom / contain, #fff;*/
  /*z-index: -1;*/
}
#main-slide .inner::after {
  /*position: absolute;
  content: "";*/
  /*width: 431px;
  height: 747px;*/
  /*width: 385px;
  height: 576px;
  right: 0;
  bottom: -280px;
  background: url("../img/backimage_footer_dust.png") no-repeat center bottom/ contain;*/
  /**/
  /*background: #fff;*/
  /*background: url("../img/backimage_slide_02.png") no-repeat center bottom / contain;*/
  /*mix-blend-mode: screen;*/ /* 上に重なる画像 ＋ スクリーン効果 */
  /**/
  position: absolute;
  content: "";
  width: 385px;
  height: 577px;
  right: 0;
  bottom: -280px;
  background: url("../img/backimage_slide.png") no-repeat center bottom/ contain;
  z-index: -1;
}
.slider_wrap {
  position: relative;
  display: flex;
  width: 100%;
}
.slider {
  margin-left: 50%;
}
.slider li {
  display: block;
  margin-left: -620px;
  margin-right: 620px;
  padding: 0 20px;
  max-width: 1240px;
  max-height: 450px;
  width: 100%;
  /*border-radius: 30px;
  overflow: hidden;*/
}
.slider li a {
  display: inline-block;
  max-width: 1200px;
  max-height: 450px;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 0.375;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
}
.slider li img {
  width: 100%;
}
@media (max-width: 1439px) {
  .slider li {
    margin-left: -512px;
    margin-right: 512px;
    max-width: 1024px;
  }
  .slider li a {
    max-width: 1000px;
  }  
}

/*test pager*/
/* --- 全体のコンテナ調整 --- */
.custom-controls-wrap {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}

/* --- 1. 矢印ナビゲーション（#js-controls）の表示修正 --- */
#js-controls {}
#js-controls .bx-controls-direction a {}

/* --- 2. 再生停止とページャーの横並び（#js-pager-controls-wrap） --- */
#js-pager-controls-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center; /* 中央寄せ */
  gap: 14px;               /* ボタンとページャーの間の隙間 */
  /*margin-top: 15px;*/
  margin: 0 auto;
  padding: 16px 26px 4px;
  width: min-content;
  background: #fff;
  border-radius: 38px 38px 0 0;
}
#js-pager-controls-wrap::before,
#js-pager-controls-wrap::after {
  position: absolute;
  content: "";
  bottom: 0;
  width: 20px;
  height: 20px;
  background: #fff;
}
#js-pager-controls-wrap::before {
  left: -18px;
  /*border-top-left-radius: 100%;
  corner-top-left-shape: scoop;*/
  background: radial-gradient(circle at 0 0, transparent 20px, #fff 21px);
}
#js-pager-controls-wrap::after {
  right: -18px;
  /*border-top-right-radius: 100%;
  corner-top-right-shape: scoop;*/
  background: radial-gradient(circle at 100% 0, transparent 20px, #fff 21px);
}

@media (max-width: 1439px) {
  #js-pager-controls-wrap {
    bottom: 10px;
  }
}

.bx-auto-btn.bx-start {}

/* --- 3. 再生・停止ボタン（#js-auto-controls）の表示修正 --- */
#js-auto-controls,
#js-auto-controls .bx-controls-auto {
  /*display: block !important;
  position: static !important;
  width: auto!important;
  height: auto !important;*/
  /*display: block;
  position: static;
  width: auto;
  height: auto;*/
}

#js-auto-controls {
  display: block;
  position: relative;
  margin: auto 0;
  width: auto;
  height: auto;
}

#js-auto-controls a {
  position: relative;
  display: block;
  margin: auto 0;
  width: 21px;
  height: 21px;
  background: #fff;
  border: 2px solid var(--green-main);
  border-radius: 100px;
  transition: .2s;
}



#js-auto-controls .bx-auto-btn.bx-start {
  background: #fff;
}

/* icon */
#js-auto-controls a::before {
  position: absolute;
  margin: auto;
  content: "";
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: url("../img/icon_pause.png") no-repeat center/ contain;
}
#js-auto-controls .bx-auto-btn.bx-start::before {
  background: url("../img/icon_play.png") no-repeat left 1px center/ contain;
}

/* マウスホバー時の設定 */
#js-auto-controls a:hover,
#js-auto-controls .bx-auto-btn.bx-start:hover {
  background: #c6e7e0;
}




/* --- 4. カスタムページャー（#js-pager）の表示修正 --- */
#js-pager {
  display: flex;
  gap: 14px;
}

#js-pager a {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--green-grayish);
  border-radius: 50px;
  position: relative;
  transition: .2s;
}

#js-pager a:hover {
  background: var(--green-main);
}

#js-pager a.active {
  /*background: #666;*/ /* アクティブ時の丸の色 */
  width: 50px;
  height: 10px;
  background: none;
  overflow: hidden;
}

/*.active before*/
#js-pager a::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--green-grayish);
  transform: scaleX(0);
  transform-origin: left;
  transition: .3s;
  opacity: 0;
}
#js-pager a.active::before {
  transform: scaleX(1);
  opacity: 1;
}
  
/* --- 以前作成したプログレスバーのCSS（参考） --- */
#js-pager a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*border-radius: 50px;*/
  background: var(--green-main); /* 進捗バーの色 */
  transform: scaleX(0);
 /* transform-origin: center;*/
  transform-origin: left;
  transition: .4s;
  opacity: 0;
}
#js-pager a.active::after {
  transform: scaleX(1);
  opacity: 1;
  animation: 4s linear slide_meter;
}
#js-pager a.active:not(.is-paused)::after {
  /*animation: 4s linear slide_meter;*/
  /*animation-fill-mode: forwards;*/ /* アニメーション終了時の100%の状態を維持 */
  width: 100%;
}
@keyframes slide_meter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

#js-pager a.active.is-paused::after {
  animation-play-state: paused;
  /*width: auto;*/
}

/*手動停止中に他のページャーが押された時、アニメーションを消して100%に固定する*/
#js-pager a.active.is-paused.is-full::after {
  animation: none !important;
  width: 100% !important;
}


/* ----------------------------------------------- faculty */
#faculty {}
#faculty .inner {
  margin: 0 auto 108px;
  max-width: 1220px;
  width: calc(100% - 300px);
}
#faculty .inner ul {
  display: flex;
  justify-content: center;
}
#faculty .inner ul li {
  margin: 10px;
  display: flex;
  width: 100%;
}
#faculty .inner ul li.med {}
#faculty .inner ul li.nurse {}
#faculty .inner ul li.grad {}
#faculty .inner ul li a {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 28px 68px;
  width: 100%;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--green-main);
  border-radius: 10px;
  align-items: center;
  transition: .3s;
}
#faculty .inner ul li.med a {
  background: var(--green-med);
}
#faculty .inner ul li.nurse a {
  background: var(--green-nurse);
}
#faculty .inner ul li.grad a {
  background: var(--green-grad);
}
#faculty .inner ul li a:hover {
  background: var(--green-main);
  box-shadow: 0 6px 30px -20px rgb(0 0 0 / 1);
}
#faculty .inner ul li a::before {
  position: absolute;
  margin: auto 0;
  content: "";
  top: 0;
  bottom: 0;
  right: 16px;
  width: 37px;
  height: 37px;
  background: #fff;
  border-radius: 100px;
  transition: .3s;
}
#faculty .inner ul li a:hover::before {
  background: rgb(255 255 255 / 0.12);
  border: 1px solid #fff;
  transform: scale(1.2);
}
#faculty .inner ul li a::after {
  position: absolute;
  margin: auto 0;
  content: "";
  top: 0;
  bottom: 0;
  right: 27px;
  width: 16px;
  height: 12px;
  background: url("../img/arrow_med.png") no-repeat center / contain;
}
#faculty .inner ul li.med a::after {}
#faculty .inner ul li.nurse a::after  {
  background: url("../img/arrow_nurse.png") no-repeat center / contain;
}
#faculty .inner ul li.grad a::after  {
  background: url("../img/arrow_grad.png") no-repeat center / contain;
}
#faculty .inner ul li a:hover::after {
  background: url("../img/arrow_white.png") no-repeat center / contain;
}
@media (max-width: 1439px) {
  #faculty .inner {
    width: calc(100% - 120px);
  }
  #faculty .inner ul li a {
    font-size: 1.9rem;
  }
  #faculty .inner ul li a .sp {
    display: block;
  }
}
/* ----------------------------------------------- news-topics */
#news-topics {
  position: relative;
}
#news-topics::before {
  /*position: absolute;
  content: "";
  width: 321px;
  height: 528px;
  left: 0;
  bottom: -174px;
  background: url("../img/backimage_news.png") no-repeat center left/ contain, #fff;  
  z-index: -1;*/
}
#news-topics::after {
  position: absolute;
  content: "";
  width: 322px;
  height: 570px;
  left: 0;
  bottom: -174px;
  background: url("../img/backimage_news.png") no-repeat center left/ contain;  
  z-index: -1;
}
#news-topics .inner {
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
  width: calc(100% - 300px);
  text-align: left;
}
#news-topics h2 {}
#news-topics .tab {
  display: flex;
  flex-wrap: wrap;
  /*gap: 10px;*/
  gap: 8px;
  margin: 0 auto;
  padding: 32px 0;
}
#news-topics .tab .tab-btn {
  display: inline-block;
  /*margin: 4px 8px 4px 0;*/
  padding: 8px 20px;
  color: #939393;
  background: #e6e6e6;
  border: 2px solid #e6e6e6;
  border-radius: 100px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: .3s;
}
#news-topics .tab .tab-btn:hover {
  color: var(--green-main);
  background: #fff;
  border-color: var(--green-main);
}
#news-topics .tab .active {
  color: #fff !important;
  background: var(--green-main) !important;
  border-color: var(--green-main) !important;
}
#news-topics .topics-list {}
#news-topics .panel-area {
  display: none;
}
#news-topics .panel-area.active {
  display: block;
}


#news-topics .panel-area a {
  position: relative;
  display: block;
  width: 100%;
}
#news-topics .panel-area a::before {
  position: absolute;
  margin: auto 0;
  content: "";
  top: 0;
  bottom: 0;
  right: 20px;
  width: 10px;
  height: 10px;
  /*background: #666;*/
  border-top: 2px solid #e6e6e6;
  border-right: 2px solid #e6e6e6;
  transform: rotate(45deg);
  transition: .3s;
}
#news-topics .panel-area a:hover::before {
  border-color: var(--green-main);
  right: 10px;
}
#news-topics .panel-area a::after {
  position: absolute;
  margin: auto 0;
  content: "";
  top: 0;
  bottom: 0;
  right: 50px;
}
#news-topics .panel-area a dl {
  display: flex;
  margin: 10px 0;
  padding: 30px 40px;
  width: 100%;
  background: #f7f7f7;
  border-radius: .5px;
  transition: .4s;
}
#news-topics .panel-area a:hover dl {
  background: var(--green-pastel);
}
#news-topics .panel-area a dl dt {
  min-width: 242px;
  padding: 0 20px 0 0;
  font-size: 1.7rem;
  font-family: 'OpenSans';
  font-weight: 600;
  white-space: nowrap;
}
#news-topics .panel-area a dl dt span {
  display: inline-flex;
  justify-content: center;
  margin: 0 0 0 20px;
  padding: 4px 16px;
  max-width: 110px;
  width: 100%;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  background: var(--green-main);
  border-radius: 100px;
  white-space: nowrap;
}
#news-topics .panel-area a dl dd {
  width: 75%;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.8;
}



#news-topics .btn {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  padding: 16px 88px;
  font-size: 2.0rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #fff;
  text-align: center;
  background: var(--green-main);
  border-radius: 4px;
}
#news-topics .btn::after {
  position: absolute;
  margin: auto 0;
  content: "";
  top: 0;
  bottom: 0;
  right: 20px;
  width: 20px;
  height: 20px;
  background: url("../img/arrow_white.png") no-repeat center / contain;
  transition: .3s;
}
#news-topics .btn:hover::after {
  right: 10px;
}
@media (max-width: 1439px) {
  #news-topics .inner {
    width: calc(100% - 120px);
  }
}
/* ----------------------------------------------- index-banner */
#index-banner {}
#index-banner .inner {
  margin: 0 auto;
  padding: 60px 0;
  max-width: 1220px;
  width: calc(100% - 300px);
}
#index-banner ul {
  display: flex;
  flex-wrap: wrap;
}
#index-banner ul li {
  display: flex;
  margin: 10px;
  width: calc(100% / 3 - 20px);
  background: #fff;
  border: solid 1px #d3dbd7;
  border-radius: 4px;
  transition: .4s;
}
#index-banner ul li:hover {
  border-color: var(--green-main);
}
#index-banner ul li a {
  position: relative;
  padding: 20px 30px;
  min-height: 84px;
  width: 100%;
  font-weight: 500;
  line-height: 1.2;
  align-content: center;
}
/*icon link */
#index-banner ul li a::before {
  position: absolute;
  margin: auto 0;
  content: "";
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 25px;
  background: url("../img/arrow_white.png") no-repeat center / 12px 8px, var(--green-main);
  border-radius: 50px;
  transition: .3s;
}
#index-banner ul li a:hover::before {
  right: 15px;
}

/*icon file*/
#index-banner a[href$=".pdf"]::after,
#index-banner a[href$=".doc"]::after,
#index-banner a[href$=".docx"]::after,
#index-banner a[href$=".xls"]::after,
#index-banner a[href$=".xlsx"]::after,
#index-banner a[href$=".ppt"]::after,
#index-banner a[href$=".pptx"]::after{
  position: absolute;
  margin: auto 0;
  content: "";
  width: 20px;
  height: 20px;
  top: 0;
  bottom: 0;
  left: 25px;
  background-size: contain;
  /*background: #ccc;*/
}


@media (max-width: 1439px) {
  #index-banner .inner {
    width: calc(100% - 100px);
  }
  #index-banner ul li a {
    font-size: 1.7rem;
  }
}
/* ----------------------------------------------- gallery */
#gallery {
  position: relative;
}
#gallery::before {}
#gallery::after {
  position: absolute;
  content: "";
  width: 287px;
  height: 426px;
  right: 0;
  bottom: 54px;
  background: url("../img/backimage_gallery.png") no-repeat center right / contain;  
  z-index: -1;
}
#gallery .inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 1;
}
#gallery .inner::before {}
#gallery .inner::after {
  position: absolute;
  display: inline-block;
  content: "";
  width: 100%;
  height: 50%;
  left: 0;
  bottom: -2px;
  background: var(--green-deep);
  z-index: -1;
}
#gallery ul {
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
  width: 100%;
  /*overflow: hidden;*/
}
#gallery ul li {
  display: flex;
  flex-shrink: 0; 
  margin: 0;
  padding: 0;
  max-width: 364px;
  width: 100%;
  height: auto;
  border-radius: 30px;
  overflow: hidden;
  aspect-ratio: 1 / 0.769;
}
#gallery ul li img {
  display: block;
  /*margin: auto;*/
  width: 120%;
}
/* ----------------------------------------------- faculty-nav */
#faculty-nav {
  position: relative;
  background: url("../img/backimage_faculty-nav.webp") no-repeat bottom center/ 100% auto ,var(--green-deep);
}
#faculty-nav::before {
  /*position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/backimage_faculty-nav_dust.png") no-repeat bottom center/ 100% auto;
  mix-blend-mode: screen;*/
}
#faculty-nav .inner {
  position: relative;
  max-width: 1200px;
  width: calc(100% - 300px);
  margin: 0 auto;
  padding: 120px 0;
  z-index: 10;
}
#faculty-nav h2 {
  color: #fff;
}
/*検索窓*/
#faculty-nav .faculty-search {
  position: relative;
  display: block;
  margin: 0 auto 28px;
  padding: 0 40px;
  max-width: 640px;
  max-height: 54px;
  width: 100%;
  background: #fff;
  border-radius: 100px;
}
#faculty-nav input:focus {
  outline: none;
  border: none;
}
#faculty-nav #search02 {
  position: relative;
  display: block;
  margin: auto;
  padding: 8px 0;
  width: 100%;
  font-size: 1.5rem;
  z-index: 10;
}
#faculty-nav #btn02 {
  position: absolute;
  display: inline-block;
  margin: auto 0;
  top: 0;
  bottom: 0;
  right: 7px;
  width: 38px;
  height: 38px;
  background: url("../img/icon_search_l.png") no-repeat center/ 19px 19px, var(--green-deep);
  border-radius: 100px;
  z-index: 100;
}
/**/
#faculty-nav .faculty-list-box {
  position: relative;
  padding: 48px 68px 72px;
  background: #fff;
  border-radius: 4px;
  z-index: 50;
}
#faculty-nav .tab {
  position: relative;
  display: flex;
  /*align-items: center;*/
  margin: 0 auto 24px;
  padding: 0;
  width: 100%;
  /*border-bottom: 2px solid #ccc;*/
}
#faculty-nav .tab::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #ccc;
  border-radius: 10px;
  z-index: 10;
}
#faculty-nav .tab .tab-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 16px;
  width: 100%;
  height: stretch;
  cursor: pointer;
  font-weight: 500;
  line-height: 1.4;
  color: #808080;
}
#faculty-nav .tab .tab-btn.active {
  position: relative;
  /*border-bottom: 5px solid #333;*/
  color: var(--green-main);
}
#faculty-nav .tab .tab-btn.active::after {
  position: absolute;
  content: "";
  bottom: -1.5px;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--green-main);
  border-radius: 10px;
  z-index: 20;
}
/* faculty-list */
#faculty-nav .faculty-list {}
#faculty-nav .panel-area {
  display: none;
  /*display: flex;*/
  /*flex-wrap: wrap;*/
}
#faculty-nav .panel-area.active {
  display: flex;
  flex-wrap: wrap;
}
/* faculty-list-wrap */
.faculty-list-wrap {
  display: inline-block;
  padding: 0 20px 20px 0;
  width: calc(100% / 5);
  text-align: left;
}
.faculty-list-wrap h3 {
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.35;
}
.faculty-list-wrap ul {
  margin: 8px 0;
}
.faculty-list-wrap ul li {
  position: relative;
  padding: 0 0 0 20px;
  line-height: 1.8;
}
.faculty-list-wrap ul li::before {
  position: absolute;
  content: "";
  margin: 0 auto;
  top: 15px;
  left: 6px;
  width: 6px;
  height: 6px;
  /*background: var(--green-main);*/
  background: #a2d8bc;
  border-radius: 10px;
}
.faculty-list-wrap ul li a {
  font-size: 1.6rem;
}
.faculty-list-wrap ul li a:hover {
  color: var(--green-main);
}
@media (max-width: 1439px) {
  #faculty-nav .inner {
    width: calc(100% - 120px);
  }
  #faculty-nav .faculty-list-box {
    padding: 48px 48px 72px;
  }
  #faculty-nav .tab {}
  #faculty-nav .tab .tab-btn {
    padding: 20px 8px;
    font-size: 1.5rem;
  }
  .faculty-list-wrap {
    width: calc(100% / 4);
  }
  .faculty-list-wrap h3 {
    font-size: 1.6rem;
  }
  .faculty-list-wrap ul {}
  .faculty-list-wrap ul li {}
  .faculty-list-wrap ul li a {
    font-size: 1.5rem;
  }
}