@charset "UTF-8";

/*=======================================================================================================
    body
=======================================================================================================*/
html, body {
  overflow: hidden;
}



/*=======================================================================================================
    #front_bg #front_loading 
=======================================================================================================*/
#front_loading {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 40%;
  text-align: center;
}

#front_loading p {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 1em;
  font-family: "NotoSerifCJKjp";
  letter-spacing: 0.3em;
}

#front_loading .loading_logo {
  width: 300px;
  margin: 0 auto 24px auto; /* 下に少し余白を追加 */
}

/* メーター本体 */
.loading_meter {
  width: 260px;
  height: 6px;
  border-radius: 999px;
  background: #e5e5e5;
  overflow: hidden;
  margin: 0 auto;
}

/* メーターのバー */
.loading_meter__bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #008cc9, #0057b8);
  transition: width 0.2s ease-out;
}

/* % 表示 */
.loading_percent {
  margin-top: 8px;
  font-size: 12px;
  color: #555;
}

#front_bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #FFF;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  #front_loading p {
    font-size: 1.4rem;
    letter-spacing: 0.2em;
    margin-bottom: 0.5em;
  }
  #front_loading .loading_logo {
    width: 220px;
    margin-bottom: 16px;
  }
  .loading_meter {
    width: 220px;
  }
}

/*=======================================================================================================
MV (Splide + KV)
=======================================================================================================*/
@font-face {
  font-family: "AnzuMoji";
  src: url("../font/AP.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --kv-height-pc: 520px;
  --kv-height-sp: 420px;
  --kv-bg-transition: 0.6s ease;
  --slider-interval: 5s;
  --color-primary: #0058A2;
}

/* =============================
   MV 全体
   ============================= */
.l-mv {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  color: #fff;
}

/* ★ PC：ヘッダーを引いたほぼ全画面の KV 画像エリア */
.mv-main {
  position: relative;
  width: 100vw;
  height: calc(100vh - 100px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 2;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

@media (max-width: 768px) {
  /* ★ SP：コンテンツ高さに合わせる（余白対策） */
  .mv-main {
    height: auto;
  }
}

/* 画像を全面に敷く */
.mv-main__visual {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  transition: filter 0.8s ease;
}

.mv-main__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================
   メイン見出し
   ============================= */

.mv-main__headline-img {
  display: block;
  max-width: 720px;
  width: 60vw;
}

/* 一文字ずつのアニメ用 span */
.mv-main__headline-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
}

/* is-visible が付いたときだけアニメを開始 */
.mv-main__headline.is-visible .mv-main__headline-text span {
  animation: mvCharIn 0.5s ease forwards;
}

/* フェードイン＋下からスライド */
@keyframes mvCharIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========= ベース（1920px付近・デスクトップ想定） ========= */
.mv-main__headline {
  position: absolute;
  top: 18%;
  right: 11%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
  opacity: 0;
  transform: rotate(-8deg);
  transform-origin: left bottom;
  transition: opacity 0.4s ease;
}

/* テキスト（PC基準） */
.mv-main__headline-text {
  font-family: "AnzuMoji", sans-serif;
  font-size: clamp(32px, 6.4vw, 90px);
  line-height: 1.2;
  letter-spacing: 0.15em;
  color: #0058a2;
  white-space: pre-wrap;
  text-align: right;
}

/* サブキャッチ画像（PC基準：テキストより一回り小さい） */
.mv-main__headline-subimg {
  position: static;
  width: min(580px, 40vw) !important;
  height: auto !important;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

/* アニメ用 */
.mv-main__headline.is-visible {
  opacity: 1;
}

.mv-main__headline-subimg.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========= ノートPC（〜1439px） ========= */
@media (max-width: 1439px) {
  .mv-main__headline {
    top: 15%;
    right: 9%;
    transform: rotate(-7deg);
  }

  .mv-main__headline-text {
    font-size: clamp(30px, 4.4vw, 70px);
    letter-spacing: 0.15em;
  }

  .mv-main__headline-subimg {
    width: min(320px, 24vw) !important;
  }
}

/* ========= タブレット（〜1023px） ========= */
@media (max-width: 1023px) {
  .mv-main__headline {
    top: 16%;
    right: 8%;
    transform: rotate(-6deg);
  }

  .mv-main__headline-text {
    font-size: clamp(26px, 8.8vw, 66px);
    letter-spacing: 0.14em;
  }

  .mv-main__headline-subimg {
    width: min(460px, 62vw) !important;
  }
}

/* ========= スマホ（〜768px） ========= */
@media (max-width: 768px) {
  .mv-main__headline {
    top: 20%;
    right: 5%;
    transform: rotate(-5deg);
    gap: 14px;
    max-width: 90vw;
  }

  .mv-main__headline-text {
    font-size: clamp(32px, 8.0vw, 48px);
    line-height: 1.35;
    letter-spacing: 0.12em;
    max-width: 100%;
  }

  .mv-main__headline-subimg {
    width: min(420px, 70vw) !important;
  }
}

/* ========= 小さいスマホ（〜480px） ========= */
@media (max-width: 480px) {
  .mv-main__headline {
    top: 12%;
    left: 50%;
    right: auto;
    transform: translateX(-50%) rotate(-3deg);
    align-items: center;
    gap: 12px;
    width: 96vw;
    max-width: 100vw;
  }

  .mv-main__headline-text {
    font-size: 42px;
    letter-spacing: 0.10em;
    text-align: center;
    max-width: 100%;
  }

  .mv-main__headline-subimg {
    width: min(360px, 78vw) !important;
  }
}

/* =============================
   背景画像（JSで差し替え）
   ============================= */
.l-mv__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(100vh - 100px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity var(--kv-bg-transition), transform var(--kv-bg-transition);
  z-index: 1;
}

.l-mv__bg.is-active {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 768px) {
  /* ★ SP：背景もコンテンツ高さに合わせる */
  .l-mv__bg {
    height: auto;
  }
}

/* =============================
   カルーセル（Splide）
   ============================= */

/* カルーセル全体ラッパー */
.mv-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* PC では mv-main と同じ高さ */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
  z-index: 2;
  transform: none;
}

.mv-slider.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Splide ラッパー */
.mv-carousel {
  position: relative;
  height: 100%;
}

/* PC〜タブレット：左右チラ見せしたいので visible */
.mv-carousel__track {
  overflow: visible;
  height: 100%;
}

.mv-carousel__list {
  align-items: stretch;
  height: 100%;
}

.mv-carousel__slide {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* スライド本体：PC〜タブレット（PCは比率固定） */
.mv-carousel__slide-inner {
  position: relative;
  width: 60vw;
  max-width: 950px;
  height: calc(60vw * 534 / 950);
  max-height: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.splide__slide.is-active .mv-carousel__slide-inner {
  transform: scale(1);
}

.mv-carousel__slide-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform: scale(1);
  transition: transform 0.4s ease;
}

.mv-carousel__slide-inner:hover img {
  transform: scale(1.05);
}

/* ========= フッター＆ページネーション ========= */

/* ========= カルーセル本体高さのベース ========= */

.mv-carousel {
  position: relative;
  height: 100%;
}

.mv-carousel__track {
  overflow: visible;
  height: 100%;
}

.mv-carousel__list {
  align-items: stretch;
  height: 100%;
}

.mv-carousel__slide {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* スライド本体：PC〜タブレット（PCは比率固定） */
.mv-carousel__slide-inner {
  position: relative;
  width: 60vw;
  max-width: 950px;
  height: calc(60vw * 534 / 950);
  max-height: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.splide__slide.is-active .mv-carousel__slide-inner {
  transform: scale(1);
}

.mv-carousel__slide-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform: scale(1);
  transition: transform 0.4s ease;
}

.mv-carousel__slide-inner:hover img {
  transform: scale(1.05);
}

/* ========= ページネーション（下側固定） ========= */

.mv-carousel__footer {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.mv-carousel__pagination {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mv-carousel__bullet {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid #CCCED2;
  background: #CCCED2;
  cursor: pointer;
  outline: none;
  padding: 0;
  overflow: hidden;
  transition: width 0.4s ease, height 0.4s ease,
              background-color 0.3s ease, border-color 0.3s ease;
}

.mv-carousel__bullet.is-active {
  width: 55px;
  height: 12px;
  border-radius: 999px;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.9);
}

.mv-carousel__bullet-inner {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 100%;
  border-radius: 999px;
  background: #00509D;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition: transform var(--slider-interval) linear;
}

/* 小さいスマホ（〜599px）：ページネーション位置微調整 */
@media (max-width: 599px) {
  .mv-carousel__footer {
    bottom: 15%;
    gap: 16px;
  }
}

/* ========= 矢印：縦中央＆左右端 半円ボタン ========= */

/* 矢印用の共通ラッパー（スライド縦中央） */
.mv-carousel__nav-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 3;
}

/* 左右個別ラッパー */
.mv-carousel__arrows {
  position: absolute;
  top: 50%;                     /* 念のため中央揃え */
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

/* 左右位置：端ぴったり（少し内側にしたければ 8px などに変更） */
.mv-carousel__arrows--prev {
  left: 0;
}

.mv-carousel__arrows--next {
  right: 0;
}

/* 半円ボタン本体（PC 基本サイズ） */
.mv-carousel__arrow {
  width: 48px;
  height: 80px;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.9);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* 左右で角丸を変えて半円にする */
.mv-carousel__arrows--prev .mv-carousel__arrow {
  border-radius: 0 40px 40px 0;
}

.mv-carousel__arrows--next .mv-carousel__arrow {
  border-radius: 40px 0 0 40px;
}

/* SVG 調整：circle は非表示、矢印パスだけ使用 */
.mv-carousel__arrow svg {
  display: block;
  width: 60%;
  height: 60%;
}

.mv-carousel__arrow circle {
  display: none;
}

.mv-carousel__arrow path {
  fill: #333333;
}

/* hover */
.mv-carousel__arrow:hover {
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* キーボードフォーカス用 */
.mv-carousel__arrow:focus-visible {  
  outline: 2px solid #333;
  outline-offset: 2px;
}

/* Splide デフォルト非表示 */
.splide__arrows,
.splide__pagination {
  display: none !important;
}

/* ========= レスポンシブ：カルーセル ========= */

/* ノートPC（〜1439px） */
@media (max-width: 1439px) {
  .mv-carousel__slide-inner {
    width: 70vw;
    height: calc(70vw * 534 / 950);
    max-height: 100%;
  }
}

/* タブレット（〜1023px）：高さ100％に切り替え */
@media (max-width: 1023px) {
  .mv-carousel__slide-inner {
    width: 80vw;
    height: 100%;
    max-height: 100%;
  }
}

/* スマホ（〜768px） */
@media (max-width: 768px) {
  /* ★ SP：スライダーもコンテンツ高さに */
  .mv-slider {
    position: relative;
    height: auto;
  }

  .mv-carousel,
  .mv-carousel__track,
  .mv-carousel__list,
  .mv-carousel__slide,
  .mv-carousel__slide-inner {
    height: auto;
  }

  .mv-carousel__track {
    overflow: visible;
  }

  .mv-carousel__list {
    padding: 0 8px;
  }

  .splide__list {
    height: auto;
  }

  .mv-carousel__slide-inner {
    width: 85vw;
    max-width: none;
    border-radius: 8px;
    overflow: hidden;
  }

  .mv-carousel__slide-inner img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
    transition: opacity 0.3s ease;
    transform: none;
  }

  .mv-carousel__slide-inner:hover img {
    transform: none;
    opacity: 0.8;
  }

  .mv-carousel__footer {
    bottom: 5%;
    margin-top: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  .mv-carousel__arrows,
  .mv-carousel__pagination {
    pointer-events: auto;
  }

  /* SP 用に少し小さく（位置は端のまま） */
  .mv-carousel__arrow {
    width: 36px;
    height: 64px;
  }
}



/* =============================
   KV 画像ブラー用
   ============================= */

.mv-main__visual--blur {
  filter: blur(6px);
  transition: filter 0.8s ease;
}

.mv-main__visual {
  transition: filter 0.8s ease;
}

@media (max-width: 768px) {
  .mv-main__visual--no-bg img {
    display: none;
  }

  .mv-main__visual--no-bg {
    filter: none;
  }
}



/*---------------------------------------------------
    SNS---leftbar
----------------------------------------------------*/
/*=======================================================================================================
    SNS---leftbar
=======================================================================================================*/
.leftbar {
  position: fixed;
  left: 2.08%;
  top: 0;
  bottom: 0;
  z-index: 200;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-family: miller-banner, serif;
}

.leftbar .follow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.leftbar p {
  font-size: 1.3rem;
  margin-bottom: 40px;
}

.leftbar .sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 32px;
}

.leftbar .sns a {
  display: block;
  width: 32px;
  height: 32px;
  margin-bottom: 40px;
  transition: opacity 0.3s ease; 
}
.leftbar .sns a:hover {opacity: 0.7;}

@media screen and (max-width: 768px) {
  .leftbar {
    display: none;
  }
}

/*=======================================================================================================
    資料請求・アクセス---rightbar
=======================================================================================================*/
.rightbar {
  position: fixed;
  right: 2.08%;
  top: 0;
  bottom: 0;
  z-index: 200;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  /*font-family: miller-banner, serif;*/
  font-family: "NotoSerifCJKjp";
}

.rightbar .side {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.rightbar .side a {
  font-size: 1.5rem;
  display: block;
  letter-spacing: 0.6em;
  color:#00509D;
  transition: opacity 0.3s ease; 
}
.rightbar .side a:hover {opacity: 0.7;}

.rightbar .side a:not(:last-child) {
  margin-bottom: 2em;
  padding-bottom: 1em;
  border-bottom: 1px solid #222;
}


@media screen and (max-width: 768px) {
  .rightbar .side {
    display: none;
  }
}

/*=======================================================================================================
    page-top
=======================================================================================================*/
#page-top {
  display: none;
  position: fixed;
  bottom: 4rem;
  right: 3rem;
  border-radius: 6rem;
  width: 6rem;
  height: 6rem;
  overflow: hidden;
  z-index: 100;
}
#page-top a {
  position: relative;
  display: block;
  background: #fff;
  padding-top: 3.4rem;
  padding-bottom: 1.5rem;
  font-family: "YuGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1;
  color: #00509D;
}
#page-top a:before {
  content: "";
  position: absolute;
  top: 1.8rem;
  left: 50%;
  display: block;
  border-top: 2px solid #00509D;
  border-right: 2px solid #00509D;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: -0.7rem;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  z-index: 2;
}
#page-top a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 6rem;
  background: #5cb1f2;
  width: 6rem;
  height: 6rem;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  -webkit-transform: scale(0,0);
  transform: scale(0,0);
  z-index: 1;
  color:#fff;
}
#page-top a span {
  position: relative;
  z-index: 2;
}
#page-top a:hover{ color:#fff; }
#page-top a:hover:before {
  top: 1.4rem;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
#page-top a:hover:after {
  -webkit-transform: scale(1,1);
  transform: scale(1,1);
}

@media screen and (max-width: 768px) {
#page-top {
  bottom: 5.5rem;
  right: 2rem;
  z-index: 200;
}
#page-top a {
  padding-top: 3.5rem;
  padding-bottom: 1.5rem;
}
}

/*=======================================================================================================
    h2____sec-title
=======================================================================================================*/
.sec-title {
  position: relative;
  margin: 60px 0 40px;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 6rem;
  font-weight:400;
  letter-spacing: 0.08em;
  color: #00509D;
}

.sec-title::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: 16px auto;
  background-color: #008cc9;
}

.sec-title span {
  display: block;
  margin-top: 4px;
  font-size: 1.8rem;
  letter-spacing: 0.12em;
  color: #00509D;
}

.topics .sec-title{
  margin: 0 0 60px;
}

@media screen and (max-width: 768px) {
  .sec-title {
    margin: 40px 0 24px;
    font-size: 3.6rem;
    letter-spacing: 0.06em;
  }

  .sec-title::before {
    width: 32px;
    margin: 12px auto;
  }

  .sec-title span {
    font-size: 12px;
    letter-spacing: 0.10em;
  }
  .topics .sec-title{
  margin: 0 0 40px;
  }
}


/*=======================================================================================================
    req_oc_brn
=======================================================================================================*/
.req_oc_brn {
  width: 90%;
  margin: 1em auto 4em;
  max-width: 1024px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 4%;
}

.req_btn,
.oc_btn {
  width:490px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 3px 10px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  transition: opacity 0.3s ease;
}

.req_btn:hover,
.oc_btn:hover {
  opacity: 0.7;
}

.req_btn img,
.oc_btn img {
  width: 100%;
  border-radius: 8px;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .req_oc_brn {
    margin: 3em auto 2em;
    flex-direction: column;
    gap: 1.5em;
  }
  
  .req_btn,
  .oc_btn {
    width: 100%;
  }
}

/*=======================================================================================================
    animation
=======================================================================================================*/
/* ========================================
   スクロールアニメ 15種類 高速版
   class="animate [種類名]" で使用
======================================== */
/* 基本設定 */
.animate {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 全アニメ共通：表示完了状態 */
.animate.show {
  opacity: 1 !important;
  transform: translateY(0) translateX(0) scale(1) rotate(0deg) rotateX(0deg) !important;
}

/* === 基本アニメ === */
.animate.fade-up    { transform: translateY(50px); }
.animate.slide-left { transform: translateX(-50px) translateY(20px); }
.animate.slide-right{ transform: translateX(50px) translateY(20px); }
.animate.zoom       { transform: scale(0.7) translateY(30px); }
.animate.fade-in    { transform: translateY(20px); }
.animate.rotate     { transform: rotate(-180deg) translateY(40px); }
.animate.swing      { transform: rotate(-20deg) translateY(40px); }

/* === 遅延設定 === */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }
.delay-5 { transition-delay: 0.5s !important; }
.delay-6 { transition-delay: 0.6s !important; }
.delay-7 { transition-delay: 0.7s !important; }
.delay-8 { transition-delay: 0.8s !important; }
.delay-9 { transition-delay: 0.9s !important; }
.delay-10 { transition-delay:1.0s !important; }


/* === スマホ最適化 === */
@media (max-width: 768px) {
  .animate.slide-left,
  .animate.slide-right { transform: translateY(70px) !important; }
}



/*=======================================================================================================
    topics
=======================================================================================================*/
.topics {
    position: relative;
  background-color: #F9F9F9;
  padding: 80px 0 70px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .topics { padding: 40px 0 25px;}
}

/*=======================================================================================================
    topics--装飾
=======================================================================================================*/
.topics__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.topics__decor::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background-image: repeating-linear-gradient( 135deg, rgba(0, 80, 157, 0.12) 0, rgba(0, 80, 157, 0.12) 4px, transparent 4px, transparent 8px);
}

.topics__decor::after {
  content: "";
  position: absolute;
  top: 40px;
  right: 5%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 90px 120px 0 0;
  border-color: rgba(255, 255, 255, 0.9) transparent transparent transparent;
  box-shadow: -18px 18px 0 rgba(255, 182, 193, 0.5);
}

.decor {
  position: absolute;
  pointer-events: none;
}

.decor--circle-small {
  bottom: 40px;
  left: 12%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 80, 157, 0.12);
}

.decor--triangle-bottom {
  bottom: -20px;
  right: 15%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 60px 50px 60px;
  border-color: transparent transparent rgba(0, 80, 157, 0.12) transparent;
}
.decor--circle-dot {
  top: 26%;
  right: 22%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(243, 161, 193, 0.5);
}

.decor--triangle-line {
  top: 15%;
  left: 28%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 24px 40px;
  border-color: transparent transparent rgba(0, 80, 157, 0.08) transparent;
  transform: rotate(-12deg);
}

/*=======================================================================================================
    topics--inner
=======================================================================================================*/
.topics__inner {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.topics__header {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    padding-bottom: 8px;
}

.topics__header::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg, #f3a1c1, #f5c46b);
    border-radius: 999px;
}

.topics__title-en {
    font-family: 'Libre Baskerville', Lora, serif;
    font-size: 22px;
    letter-spacing: 0.16em;
    font-weight: 400;
    text-transform: uppercase;
    color: #c45f86;
}

.topics__title-ja {
    font-size: 12px;
    font-weight: 500;
    color: #c45f86;
    padding: 3px 8px 2px;
    border-radius: 999px;
    border: 1px solid rgba(196, 95, 134, 0.2);
    background: rgba(255, 255, 255, 0.9);
}

.topics__slider {
    position: relative;
}

.topics__slider-list {
    /* Slick で .slick-slider などが付与される */
}

.topics__slide {
    padding: 0 10px;
    box-sizing: border-box;
}

.topics__card {
    display: block;
    width: 285px;
    height: 273px;
    margin: 0 auto;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.topics__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.topics__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/*=======================================================================================================
    topics--slide下部ボタン
=======================================================================================================*/
.topics__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
}

.topics__dots {
    display: flex;
    align-items: center;
}

.topics__dots .slick-dots {
    position: static;
    display: flex !important;
    gap: 16px;
}

.topics__dots .slick-dots li {
    margin: 0;
    width: 14px;
    height: 14px;
}

.topics__dots .slick-dots li button {
    width: 14px;
    height: 14px;
    padding: 0;
}

.topics__dots .slick-dots li button::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #00509D;
    display: block;
    opacity: 1;
}

.topics__dots .slick-dots li.slick-active button::before {
    background-color: #00509D;
}

.topics__arrow {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    position: relative;
    cursor: pointer;
}

.topics__arrow--prev::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-left: 2px solid #00509D;
    border-bottom: 2px solid #00509D;
    transform: translateY(-50%) rotate(45deg);
}

.topics__arrow--next::before {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid #00509D;
    border-bottom: 2px solid #00509D;
    transform: translateY(-50%) rotate(-45deg);
}

/*=======================================================================================================
    topics--レスポンシブ
=======================================================================================================*/
@media (max-width: 1024px) {
    .topics__card {
        width: 230px;
        height: 180px;
    }
}

@media (max-width: 768px) {
    .topics__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .topics__title-en {
        font-size: 18px;
    }

    .topics__card {
        width: min(80vw, 320px);
        aspect-ratio: 4 / 3;
        height: auto;
    }

    .topics__controls {
        gap: 12px;
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .topics__card {
        width: min(76vw, 260px);
        aspect-ratio: 4 / 3;
        height: auto;
    }
}

@media (max-width: 768px) {
  .topics__decor::before {
    top: -100px;
    left: -120px;
    width: 220px;
    height: 220px;
  }
  .topics__decor::after {
    top: 10px;
    right: -30px;
    border-width: 70px 90px 0 0;
  }

  .decor--circle-small {
    bottom: 24px;
    left: 6%;
    width: 24px;
    height: 24px;
  }

  .decor--triangle-bottom {
    display: none;
  }

  .decor--circle-dot{
    opacity: 0.6;
  }
  .decor--triangle-line {
    opacity: 0.6;
    top: 24%;
    left: 13%;
    border-width: 0 20px 18px 20px;
    transform: rotate(-54deg);
  }
}



/*=======================================================================================================
    nyushi-events
=======================================================================================================*/

.nyushi-events {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: stretch;
  margin-block: 60px;
}

/* -----------------------------------------------------
   左側：カード（4枚グリッド）
----------------------------------------------------- */
.nyushi-events__main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
}

.nyushi-events__card {
  position: relative;
  display: block;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
}

/* 画像エリア */
.nyushi-events__card-media {
  display: block;
  height: 100%;
}

.nyushi-events__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.7);
  opacity: 0.8;
  transition:
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* テキスト */
.nyushi-events__card-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 85px;
  pointer-events: none;
}

.nyushi-events__card-title {
  font-size: 3em;
  letter-spacing: 0.15em;
  margin: 0 0 12px;
  font-family: 'Playfair Display', serif;
  font-weight: bold;
}

.nyushi-events__card-text {
  font-size: 14px;
  margin: 0 0 24px;
}

.nyushi-events__card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 220px;
  padding: 10px 24px;
  border-radius: 999px;
  color: #00509D;
  background-color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  pointer-events: auto;
  transition:
    background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* hover効果（共通） */
.nyushi-events__card:hover .nyushi-events__card-media img {
  filter: brightness(0.65);
  opacity: 0.7;
}

.nyushi-events__card:hover .nyushi-events__card-title {
  color: #fff;
}

/* 1枚目：ブルー */
.nyushi-events__card:nth-child(1):hover .nyushi-events__card-link {
  background: linear-gradient(135deg, #3A8DFF, #00509D);
  color: #fff;
}

/* 2枚目：オレンジ */
.nyushi-events__card:nth-child(2):hover .nyushi-events__card-link {
  background: linear-gradient(135deg, #FFB347, #FF7A2F);
  color: #fff;
}

/* 3枚目：人文学科系グリーン */
.nyushi-events__card:nth-child(3):hover .nyushi-events__card-link {
  background: linear-gradient(135deg, #8EC54A, #5F8C21);
  color: #fff;
}

/* 4枚目：ミントシアン */
.nyushi-events__card:nth-child(4):hover .nyushi-events__card-link {
  background: linear-gradient(135deg, #6AE3E3, #23B2C2);
  color: #fff;
}

/* -----------------------------------------------------
   右側：イベントサイドバー
   PC: 全体 620px 固定で中身スクロール
----------------------------------------------------- */
.nyushi-events__sidebar {
  background-color: #f8fafd;
  border: 1px solid #e0e7ef;
  border-radius: 8px;
  padding: 32px 28px 40px;
  margin-right: 8em;

  max-height: 620px;     /* PC時の最大高さ */
  display: flex;
  flex-direction: column;
}

/* 見出しエリア */
.nyushi-events__header {
  text-align: center;
  margin-bottom: 28px;
  flex: 0 0 auto;
}

/* SCHEDULE */
.nyushi-events__header-main {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: #00509D;
  text-transform: uppercase;
}

.nyushi-events__header-main::before,
.nyushi-events__header-main::after {
  content: "";
  flex: 0 0 60px;
  height: 2px;
  background-color: #00509D;
}

/* スケジュール（日本語） */
.nyushi-events__header-sub {
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: #333;
}

/* -----------------------------------------------------
   イベント一覧（カード群）
   PC: リストを flex:1 + overflow-y:auto
----------------------------------------------------- */
.nyushi-events__list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;

  flex: 1 1 auto;
  overflow-y: auto;
}

/* スクロールバー（任意） */
.nyushi-events__list::-webkit-scrollbar {
  width: 6px;
}
.nyushi-events__list::-webkit-scrollbar-track {
  background: transparent;
}
.nyushi-events__list::-webkit-scrollbar-thumb {
  background: rgba(0, 80, 157, 0.35);
  border-radius: 999px;
}

.nyushi-events__item + .nyushi-events__item {
  margin-top: 0;
}

/* カードリンク全体 */
.nyushi-events__item-link {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 14px 16px;
  text-decoration: none;
  color: #333;
  background-color: #fff;
  border: 1px solid #d7e3f0;
  border-radius: 8px;
  transition:
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* hover時：カードだけ強調 */
.nyushi-events__item-link:hover {
  border-color: #00509D;
  box-shadow: 0 4px 10px rgba(0, 80, 157, 0.15);
}

/* 左側：日付ブロック */
.nyushi-events__item-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;
}

/* 日付 */
.nyushi-events__date {
  text-align: center;
  min-width: 90px;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(145deg, #edf4ff, #dbe9ff);
}

.nyushi-events__year {
  display: block;
  font-size: 11px;
  color: #8392a7;
  letter-spacing: 0.08em;
}

.nyushi-events__day {
  display: inline-block;
  margin-top: 2px;
  font-size: 20px;
  font-weight: 700;
  color: #00509D;
}

.nyushi-events__weekday {
  font-size: 11px;
  margin-left: 3px;
  color: #555;
}

/* 右側：本文ブロック */
.nyushi-events__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}

/* 上段：タグ（イベント種別） */
.nyushi-events__tagline {
  display: flex;
  align-items: center;
}

/* 中段：本町学舎 ・ 11:00～15:00 */
.nyushi-events__info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  font-size: 14px;
  color: #555;
}

.nyushi-events__place-label {
  font-weight: 500;
}

.nyushi-events__dot {
  opacity: 0.6;
}

.nyushi-events__time {
  font-size: 14px;
}

/* ベースのタグスタイル */
.nyushi-events__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.08em;
}

/* 個別相談会 */
.nyushi-events__tag--consult {
  border: 1px solid #F5A21B;
  color: #fff;
  background: linear-gradient(135deg, #FFB347, #FF7A2F);
  box-shadow: 0 0 0 1px rgba(255, 138, 61, 0.85);
}

/* オープンキャンパス */
.nyushi-events__tag--oc {
  border: 1px solid #00509D;
  color: #fff;
  background: linear-gradient(135deg, #3A8DFF, #00509D);
  box-shadow:
    0 0 0 1px rgba(0, 80, 157, 0.25),
    0 4px 8px rgba(0, 80, 157, 0.35);
}

/* ハイライトの光沢 */
.nyushi-events__tag::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 60%);
  pointer-events: none;
}

/* CTA丸ボタン（右端） */
.nyushi-events__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.nyushi-events__cta span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #00509D;
  position: relative;
  transition: background-color 0.3s ease;
}

.nyushi-events__cta span::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.nyushi-events__item-link:hover .nyushi-events__cta span {
  background-color: #003970;
}

/* 一覧ボタン */
.nyushi-events__more {
  margin-top: 24px;
  text-align: center;
  flex: 0 0 auto;
}

.nyushi-events__more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 40px;
  border: 1px solid #00509D;
  border-radius: 999px;
  color: #00509D;
  background-color: #fff;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.1em;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.nyushi-events__more-button:hover {
  background-color: #00509D;
  color: #fff;
}

/* =====================================================
   Responsive (スマホ最適化)
   SP: サイドバー高さは伸ばす / リストだけ max-height 指定でスクロール
===================================================== */
@media (max-width: 768px) {
  .nyushi-events {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .nyushi-events__main {
    grid-template-columns: 1fr;
  }

  .nyushi-events__card-body {
    padding: 20px;
    text-align: center;
    justify-content: center;
  }

  .nyushi-events__card-title {
    font-size: 2em;
    letter-spacing: 0.08em;
  }

  .nyushi-events__card-text {
    font-size: 13px;
    margin-bottom: 16px;
  }

  .nyushi-events__card-link {
    font-size: 13px;
    padding: 8px 20px;
  }

  .nyushi-events__card-media img {
    height: 220px;
    object-fit: cover;
  }

  .nyushi-events__sidebar {
    padding: 24px 16px 32px;
    border-radius: 8px;
    margin-right: 0;

    max-height: none;      /* サイドバー全体は縦に伸びる */
    display: block;
  }

  /* SPではリストだけ高さ制限＋スクロール。
     4件目が出てくるころを目安に、だいたい 3件ぶん + α の高さ。 */
  .nyushi-events__list {
    max-height: 420px;     /* ここは実際の行数を見て微調整 */
    overflow-y: auto;
  }

  .nyushi-events__header-main {
    font-size: 22px;
  }

  .nyushi-events__header-main::before,
  .nyushi-events__header-main::after {
    flex-basis: 40px;
  }

  .nyushi-events__header-sub {
    font-size: 13px;
  }

  .nyushi-events__item-link {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 14px;
    gap: 10px;
  }

  .nyushi-events__date {
    min-width: 80px;
    text-align: left;
  }

  .nyushi-events__year {
    font-size: 11px;
  }

  .nyushi-events__day {
    font-size: 20px;
  }

  .nyushi-events__info {
    font-size: 13px;
  }

  .nyushi-events__time {
    font-size: 13px;
  }

  .nyushi-events__tag {
    font-size: 10px;
    padding: 4px 12px;
  }

  .nyushi-events__cta span {
    width: 32px;
    height: 32px;
  }

  .nyushi-events__more-button {
    width: 100%;
    max-width: 300px;
    padding: 10px 0;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .nyushi-events__card-title {
    font-size: 1.6em;
  }

  .nyushi-events__card-body {
    padding: 16px;
  }

  .nyushi-events__card-link {
    width: 200px;
    margin: 0 auto;
  }

  .nyushi-events__item-link {
    padding: 12px;
  }

  .nyushi-events__day {
    font-size: 18px;
  }

  .nyushi-events__cta span {
    width: 28px;
    height: 28px;
  }
}

/* COMING SOON オーバーレイ */
.item-comingsoon {
  position: relative;
}

.item-comingsoon::after {
  content: "COMING SOON";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lora", "Libre Baskerville", serif;
  font-style: italic;
  font-size: 24px;
  letter-spacing: 0.15em;
  color: #ffffff;
  font-weight: 600;
  text-transform: uppercase;
  z-index: 2;
  border-radius: 8px;
}

.item-comingsoon .nyushi-events__item-link {
  pointer-events: none;
  filter: grayscale(0.2);
}




/*=======================================================================================================
    section-voice
=======================================================================================================*/
/* =========================
   voice セクション
========================= */

.voice-section {
  position: relative;
  width: 100%;
  padding: 5rem 0;
  overflow: hidden;
}

/* circles */
.voice-section__circles {
  position: absolute;
  z-index: -1;
  top: -20px;
  left: 0;
  width: 100%;
  height: 140px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.voice-section__circles {
  right: 0;
  left: auto;
  width: 100%;
  height: 100%;
}

.voice-section__circle {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  background: linear-gradient(to right, #008cc9 1%, #0057b8 100%);
  bottom: -150px;
  animation: voice-animate2 50s linear infinite;
}

.voice-section__circle:nth-child(1) { left: 25%; width: 80px;  height: 80px;  animation-delay: 0s; }
.voice-section__circle:nth-child(2) { left: 10%; width: 20px;  height: 20px;  animation-delay: 2s; animation-duration: 12s; }
.voice-section__circle:nth-child(3) { left: 70%; width: 20px;  height: 20px;  animation-delay: 4s; }
.voice-section__circle:nth-child(4) { left: 40%; width: 60px;  height: 60px;  animation-delay: 0s; animation-duration: 18s; }
.voice-section__circle:nth-child(5) { left: 65%; width: 20px;  height: 20px;  animation-delay: 0s; }
.voice-section__circle:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; }
.voice-section__circle:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; }
.voice-section__circle:nth-child(8) { left: 50%; width: 25px;  height: 25px;  animation-delay: 15s; animation-duration: 45s; }
.voice-section__circle:nth-child(9) { left: 20%; width: 15px;  height: 15px;  animation-delay: 2s;  animation-duration: 35s; }
.voice-section__circle:nth-child(10){ left: 85%; width: 150px; height: 150px; animation-delay: 0s;  animation-duration: 11s; }

@keyframes voice-animate2 {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 50%;
  }
  100% {
    transform: translateY(-2500px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}

/* ---- コンテナ・レイアウト ---- */
/* 内側の幅を最大1600pxに */
.voice-section__inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 3カラム横並び */
.voice-section__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 2rem;
}

/* 3つでほぼ100%になるよう固定幅 */
.voice-section__col {
  flex: 0 0 32%;
  text-align: center;
}

/* SP では段差なし（縦並び） */
@media (max-width: 767px) {
  .voice-section__col {
    margin-top: 0;
  }
}

/* スマホでは縦並び */
@media (max-width: 767px) {
  .voice-section__row {
    flex-direction: column;
    align-items: center;
  }
  .voice-section__col {
    flex: 0 0 100%;
    max-width: 360px;
  }
}

/* ---- 斜めカード ---- */
.voice-rollover {
  display: inline-block;
}

/* 音楽学科カード */
.voice-section__col:nth-child(1) .voice-rollover__wrapper {
  position: relative;
  display: inline-block;
  margin: 0 15px 15px 0;
  overflow: hidden;
  transform: skew(0deg, -5deg);
  filter: drop-shadow(15px 15px rgb(32, 174, 229));
}

/* 人文学科カード */
.voice-section__col:nth-child(2) .voice-rollover__wrapper {
  position: relative;
  display: inline-block;
  margin: 0 15px 15px 0;
  overflow: hidden;
  transform: skew(0deg, -5deg);
  filter: drop-shadow(15px 15px rgb(142, 197, 74));
}

/* 管理栄養学科カード */
.voice-section__col:nth-child(3) .voice-rollover__wrapper {
  position: relative;
  display: inline-block;
  margin: 0 15px 15px 0;
  overflow: hidden;
  transform: skew(0deg, -5deg);
  filter: drop-shadow(15px 15px rgb(245, 162, 27));
}

/* 画像は逆方向に skew して水平に見せる */
.voice-rollover__img {
  max-width: 100%;
  height: auto;
  display: block;
  transform: skew(0deg, 5deg) scale(1.2);
}

.voice-rollover__img--over {
  position: absolute;
  top: 0;
  left: 0;
}

/* ラベルの配置 */
.voice-rollover__label {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
}

/* 大きめバッジ＋右側斜めカット */
.voice-rollover__label-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 22px 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #22b4f0, #0f85c1); /* 音楽学科のブルー系 */
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.20em;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0,0,0,0.28);
}

/* 左側アクセントバー（太め＆長め） */
.voice-rollover__label-text::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 6px rgba(255,255,255,0.7);
}

/* 右端を斜めカットしたように見せるパーツ */
.voice-rollover__label-text::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  width: 22px;
  height: 26px;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
  transform: translateY(-50%) skewX(-20deg);
  border-radius: 0 8px 8px 0;
  opacity: 0.9;
}

/* 下にうっすら影（浮いて見える演出） */
.voice-rollover__label::after {
  content: "";
  position: absolute;
  inset: auto 4px -6px 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.35), transparent 70%);
  opacity: 0.7;
  pointer-events: none;
}

/* 他学科の色展開例 */
.voice-rollover--human .voice-rollover__label-text {
  background: linear-gradient(135deg, #8ec54a, #5f8c21);
}
.voice-rollover--nutrition .voice-rollover__label-text {
  background: linear-gradient(135deg, #f5a21b, #d77e00);
}

/* SP 調整 */
@media (max-width: 767px) {
  .voice-rollover__label {
    top: 10px;
    left: 10px;
  }
  .voice-rollover__label-text {
    font-size: 13px;
    padding: 6px 18px 6px 12px;
    letter-spacing: 0.16em;
  }
  .voice-rollover__label-text::before {
    height: 18px;
  }
  .voice-rollover__label-text::after {
    right: -8px;
    width: 18px;
    height: 22px;
  }
}


/* ---- 右下の紹介文エリア ---- */
.voice-rollover__comment {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 2;
  max-width: 70%;
  transform: skew(0deg, 5deg);
}

/* 紹介文の背景 */
.voice-rollover__comment::before {
  content: "";
  position: absolute;
  inset: -8px -12px -8px -12px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  transform: skew(0deg, -5deg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: -1;
}

/* 紹介文テキスト */
.voice-rollover__comment-text {
  position: relative;
  margin: 0;
  padding: 10px 14px;
  color: #333;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 500;
  text-align: right;
  transform: skew(0deg, -5deg);
}

/* レスポンシブ調整 */
@media (max-width: 767px) {
  .voice-rollover__label {
    top: 8px;
    left: 8px;
  }
  .voice-rollover__label-text {
    font-size: 13px;
    padding: 4px 10px 4px 8px;
  }
  .voice-rollover__label-text::before {
    border-bottom-width: 8px;
    border-right-width: 14px;
  }

  .voice-rollover__comment {
    max-width: 80%;
  }

  .voice-rollover__comment-text {
    font-size: 12px;
    padding: 8px 12px;
  }
}





/*============================================================================
   Faculty
============================================================================*/

.faculty {
  position: relative; /* 円アニメ用に位置指定 */
  padding: 4rem 0;
  background-image: url('../images/faculty-back.jpg');
}

.faculty__inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.faculty__title {
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center; /* 必要なら調整 */
  margin-bottom: 2.5rem;
}

/* =========================
   Floating circles
   ========================= */

.faculty__circles {
  position: absolute;
  z-index: -1;
  top: -20px;
  right: 0;
  left: auto;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.faculty__circle {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  background: linear-gradient(to right, #008cc9 1%, #0057b8 100%);
  bottom: -150px;
  animation: faculty-circle-animate 50s linear infinite;
}

.faculty__circle:nth-child(1) { left: 25%; width: 80px;  height: 80px;  animation-delay: 0s; }
.faculty__circle:nth-child(2) { left: 10%; width: 20px;  height: 20px;  animation-delay: 2s; animation-duration: 12s; }
.faculty__circle:nth-child(3) { left: 70%; width: 20px;  height: 20px;  animation-delay: 4s; }
.faculty__circle:nth-child(4) { left: 40%; width: 60px;  height: 60px;  animation-delay: 0s; animation-duration: 18s; }
.faculty__circle:nth-child(5) { left: 65%; width: 20px;  height: 20px;  animation-delay: 0s; }
.faculty__circle:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; }
.faculty__circle:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; }
.faculty__circle:nth-child(8) { left: 50%; width: 25px;  height: 25px;  animation-delay: 15s; animation-duration: 45s; }
.faculty__circle:nth-child(9) { left: 20%; width: 15px;  height: 15px;  animation-delay: 2s;  animation-duration: 35s; }
.faculty__circle:nth-child(10){ left: 85%; width: 150px; height: 150px; animation-delay: 0s;  animation-duration: 11s; }

@keyframes faculty-circle-animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 50%;
  }
  100% {
    transform: translateY(-2500px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}

/* =========================
   Card list
   ========================= */

.faculty__card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3rem 3rem; /* 行・列の隙間をまとめて管理 */
  list-style: none;
  padding: 0;
  margin: 0;
}

.faculty__card {
  width: calc(33.333% - 2rem); /* 3列想定。ブレークポイントで変更 */
  position: relative;
  transition: margin-top 0.3s ease;
}

/* 学部別modifier（任意・nth-childと併用可） */
.faculty__card--music {}
.faculty__card--humanities {}
.faculty__card--development {}

/* 段差：音楽0 / 人文50 / 管理栄養100 */
.faculty__card:nth-child(1),
.faculty__card--music {
  margin-top: 0;
}

.faculty__card:nth-child(2),
.faculty__card--humanities {
  margin-top: 50px;
}

.faculty__card:nth-child(3),
.faculty__card--development {
  margin-top: 100px;
}

.faculty__card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* =========================
   Image area
   ========================= */

.faculty__card-figure {
  margin: 0 0 -2.5rem;
  border-radius: 9px;
  overflow: hidden;
  text-align: center;
}

.faculty__card-image {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 0.3s ease; /* ← ここを filter のトランジションに */
}

/* =========================
   Card body（共通）
   ========================= */

.faculty__card-body {
  position: relative;
  z-index: 1;
  margin-left: -2.2rem;
  width: calc(100% - 0.3rem);
  padding: 1rem 1rem 1.5rem 1.5rem;
  border-radius: 7px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

/* =========================
   Faculty label（共通）
   ========================= */

.faculty__card-faculty {
  position: relative;
  display: inline-block;
  padding-left: 1.4rem; /* 線幅7px＋余白 */
  font-size: 1.4rem;
  line-height: 1.4;
}

.faculty__card-faculty::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 20px;
  transform: translateY(-50%);
  border-radius: 3px;
}

/* =========================
   Major name
   ========================= */

.faculty__card-major {
  margin-top: 0.8rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.3;
}

/* =========================
   Description（追加）
   ========================= */

.faculty__card-desc {
  margin-top: 0.6rem;
  font-size: 1.2rem;      /* PCで読みやすいくらいに調整 */
  line-height: 1.7;
  color: #555;            /* 少しトーンを落として主見出しと差別化 */
}

/* =========================
   Color modifiers for faculty
   - 音楽：#20AEE5
   - 人文：#8EC54A
   - 管理栄養：#F5A21B
   ========================= */

/* 音楽学部 */
.faculty__card-faculty--music {
  color: #20AEE5;
}

.faculty__card-faculty--music::before {
  background-color: #20AEE5;
}

/* 人文学部 */
.faculty__card-faculty--humanities {
  color: #8EC54A;
}

.faculty__card-faculty--humanities::before {
  background-color: #8EC54A;
}

/* 人間発達学部（管理栄養） */
.faculty__card-faculty--development {
  color: #F5A21B;
}

.faculty__card-faculty--development::before {
  background-color: #F5A21B;
}

/* =========================
   Card body box-shadow を学科色に応じて変更
   ========================= */

.faculty__card:nth-child(1) .faculty__card-body,
.faculty__card--music .faculty__card-body {
  box-shadow: 9px 9px 0 0 #20AEE5;
}

.faculty__card:nth-child(2) .faculty__card-body,
.faculty__card--humanities .faculty__card-body {
  box-shadow: 9px 9px 0 0 #8EC54A;
}

.faculty__card:nth-child(3) .faculty__card-body,
.faculty__card--development .faculty__card-body {
  box-shadow: 9px 9px 0 0 #F5A21B;
}

/* =========================
   Responsive
   ========================= */

/* タブレット調整が必要ならここに追記（任意） */
/*
@media (max-width: 900px) {
  .faculty__card {
    width: calc(50% - 1.5rem);
  }
}
*/

/* スマホ：767px以下で1カラム＋段差リセット */
@media (max-width: 767px) {
  .faculty__card {
    width: 100%;
    margin-top: 0; /* カードごとの段差をなくす */
  }

  .faculty__card-body {
    margin-left: 0;
    box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.08); /* 共通影（好みで調整） */
  }

  .faculty__card:nth-child(2),
  .faculty__card--humanities {
    margin-top: 30px;
}

.faculty__card:nth-child(3),
.faculty__card--development {
  margin-top: 30px;
}
}

/* 画像を少しグレー＆暗くする（透けさせない） */
.faculty__card-link:hover .faculty__card-image {
  filter: saturate(0.9) brightness(0.9);
}

/* 共通：枠＆影のトランジション */
.faculty__card-body {
  border: 2px solid transparent;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ===== 学科別の通常時 box-shadow（nth-childで管理） ===== */

.faculty__card:nth-child(1) .faculty__card-body {
  box-shadow: 9px 9px 0 0 #20AEE5; /* 音楽 */
}

.faculty__card:nth-child(2) .faculty__card-body {
  box-shadow: 9px 9px 0 0 #8EC54A; /* 人文 */
}

.faculty__card:nth-child(3) .faculty__card-body {
  box-shadow: 9px 9px 0 0 #F5A21B; /* 管理栄養 */
}

/* ===== hover時：box-shadow を消して枠線だけ学科色に ===== */

.faculty__card:nth-child(1) .faculty__card-link:hover .faculty__card-body {
  box-shadow: none;
  border-color: #20AEE5;
}

.faculty__card:nth-child(2) .faculty__card-link:hover .faculty__card-body {
  box-shadow: none;
  border-color: #8EC54A;
}

.faculty__card:nth-child(3) .faculty__card-link:hover .faculty__card-body {
  box-shadow: none;
  border-color: #F5A21B;
}


/* 全体ラッパー */
.faculties {
  position: relative;
  padding: 80px 0;
  background-color: #fff;
}

.faculties__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 見出し（縦書き風はflexで右側にスライダー） */
.faculties__title {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  letter-spacing: .12em;
  margin-bottom: 24px;
}

.faculties__title-en {
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  color: #000;
}

.faculties__title-ja {
  font-size: 20px;
  color: #000;
}

/* スライダー全体 */
.faculties__slider {
  position: relative;
  overflow: hidden;
}

/* トラック領域（Swiperのwrapper相当） */
.faculties__track {
  display: flex;
  transition: transform .5s ease;
  will-change: transform;
}

/* カード */
.faculties-card {
  display: block;
  flex: 0 0 320px; /* 1枚の幅（レスポンシブで調整） */
  margin-right: 130px; /* 元サイトと同じ余白感 */
  color: #000;
  text-decoration: none;
}

.faculties-card:last-child {
  margin-right: 0;
}

.faculties-card__pic {
  overflow: hidden;
}

.faculties-card__pic img {
  width: 100%;
  display: block;
  transition: transform .4s ease;
}

.faculties-card:hover .faculties-card__pic img {
  transform: scale(1.05);
}

.faculties-card__info {
  padding-top: 16px;
}

.faculties-card__title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.faculties-card__lead {
  font-size: 14px;
  line-height: 1.7;
}

/* 学部別のカラーリング例（必要なら） */
.faculties-card--social    .faculties-card__title { color: #e4007f; }
.faculties-card--education .faculties-card__title { color: #0071bc; }
.faculties-card--sports    .faculties-card__title { color: #00a651; }
.faculties-card--health    .faculties-card__title { color: #00838f; }
.faculties-card--engineering .faculties-card__title { color: #f7941d; }
.faculties-card--economics .faculties-card__title { color: #8e44ad; }
.faculties-card--welfare   .faculties-card__title { color: #009688; }
.faculties-card--nursing   .faculties-card__title { color: #c2185b; }
.faculties-card--management .faculties-card__title { color: #555; }

/* ナビゲーション */
.faculties__nav {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 50%;
  border: 1px solid #000;
  background-color: rgba(255,255,255,.9);
  cursor: pointer;
}

.faculties__nav--prev {
  left: 0;
}

.faculties__nav--next {
  right: 0;
}

/* 矢印は疑似要素で */
.faculties__nav--prev::before,
.faculties__nav--next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: translate(-50%, -50%) rotate(135deg);
}

.faculties__nav--next::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ドット */
.faculties__pagination {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.faculties__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background-color: #ddd;
  margin: 0 4px;
  cursor: pointer;
}

.faculties__dot.is-active {
  background-color: #000;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .faculties {
    padding: 48px 0;
  }

  .faculties-card {
    flex: 0 0 80%;
    margin-right: 24px;
  }

  .faculties__nav {
    display: none; /* SPはフリック中心など */
  }
}



/* ============================================================================
   MOREKNOW FACULTIES  (NFU faculties_wrapper を BEM で移植)
============================================================================ */
.moreknow-faculties {
  padding: 80px 0;
  background-color: #fff;
}

.moreknow-faculties__wrapper {
  max-width: 1600px;
  margin: 8em 0 1em auto;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
}

/* 縦書き見出し */
.moreknow-faculties__title {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  font-weight: 700;
  letter-spacing: .12em;
  margin: 0;
  margin-right: 60px;
  writing-mode: vertical-rl;
}

.moreknow-faculties__title.js-mk-title {
  position: relative;
  opacity: 0; /* 最初は全体を薄く */
}

/* 左側に縦線を描画 */
.moreknow-faculties__title.js-mk-title::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: auto;
  right: 100%;         /* 見出しの左側（縦書きなので right を使用） */
  margin-right: 16px;  /* 見出しとの距離は好みで調整 */
  width: 2px;
  height: 0;
  background-color: #00509D;
  transform-origin: top;
}

/* テキストは最初非表示＋少し下に */
.moreknow-faculties__title.js-mk-title .moreknow-faculties__title-en,
.moreknow-faculties__title.js-mk-title .moreknow-faculties__title-ja {
  opacity: 0;
  transform: translateY(10px);
}

/* 画面内に入ったら付くクラス */
.moreknow-faculties__title.js-mk-title.is-running {
  opacity: 1;
}

/* 線のアニメーション */
.moreknow-faculties__title.js-mk-title.is-running::before {
  animation: mk-title-line-grow .5s ease-out forwards;
}

/* 線のあとにテキストが出る */
.moreknow-faculties__title.js-mk-title.is-running .moreknow-faculties__title-en {
  animation: mk-title-text-in .5s ease-out forwards;
  animation-delay: .35s;
}
.moreknow-faculties__title.js-mk-title.is-running .moreknow-faculties__title-ja {
  animation: mk-title-text-in .5s ease-out forwards;
  animation-delay: .5s;
}

@keyframes mk-title-line-grow {
  from { height: 0; }
  to   { height: 100%; }
}

@keyframes mk-title-text-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.moreknow-faculties__title-en {
  font-family: "Raleway", sans-serif;
  font-size: 3rem;
  color: #2f2f2f;
}

.moreknow-faculties__title-ja {
  font-size: 5rem;
  color: #2f2f2f;
}

/* 右側スライダーエリア */
.moreknow-faculties__intro {
  position: relative;        /* ★ ナビ配置の基準 */
  flex: 1 1 auto;
  min-width: 0;
}

/* Swiper コンテナ（スライドだけ切る） */
.moreknow-faculties__slider--swiper {
  position: relative;
  overflow: hidden;
  padding-left: 10px!important; 
}

/* トラック */
.moreknow-faculties__track {
  display: flex;
}

/* スライド 1枚の幅を制限 */
.moreknow-faculties__slide {
  width: 100%;
  max-width: 900px !important;  /* ★ スライド幅 */
  margin-right: 0;
  display: block;
  color: #000;
  text-decoration: none;
  box-sizing: border-box;
}

.moreknow-faculties__slide:last-child {
  margin-right: 0;
}

/* NEW リボン */
.moreknow-faculties__slide--is-new {
  position: relative;
  overflow: hidden;
}

/* 画像 */
.moreknow-faculties__pic {
  background-color: #fff;
  backface-visibility: hidden;
}

.moreknow-faculties__pic img {
  width: 100%;
  display: block;
  /*transition-property: opacity;*/
  transition: filter .3s ease; 
}
.moreknow-faculties__slide:hover .moreknow-faculties__pic img,
.moreknow-faculties__pic:hover img {
  filter: saturate(0.9) brightness(0.9);
}

/* テキストブロック */
.moreknow-faculties__info {
  width: 100%;
  max-width: 100%;
  margin-top: -80px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
  position: relative;
  z-index: 1;
  transition: all .3s ease;
}

.moreknow-faculties__text {
  width: 100%;
}

.moreknow-faculties__title-main {
  margin-right: calc(100% * .26);
  padding: 5px 20px;
  display: inline-block;
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
  transition: all .3s ease;
}

.moreknow-faculties__lead {
  height: 130px;
  margin-top: -25px;
  padding: 0 80px 25px 30px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: row;
  position: relative;
  line-height: 1.5;
  color: #384047;
  font-size: 1.6rem;
  background-color: #fff;
  border: 1px solid #fff;
  /*transition-property: all;*/
  transition: color .3s ease, border-color .3s ease;
}

/* カラーリング */
.moreknow-faculties__slide--01 .moreknow-faculties__title-main { background-color: #00509D; }
.moreknow-faculties__slide--02 .moreknow-faculties__title-main { background-color: #20AEE5; }
.moreknow-faculties__slide--03 .moreknow-faculties__title-main { background-color: #8EC54A; }
.moreknow-faculties__slide--04 .moreknow-faculties__title-main { background-color: #F5A21B; }

/* ホバー時の枠色変更 */
.moreknow-faculties__slide--01:hover .moreknow-faculties__lead { color: #00509D; border-color: #00509D;}
.moreknow-faculties__slide--02:hover .moreknow-faculties__lead { color: #20AEE5; border-color: #20AEE5;}
.moreknow-faculties__slide--03:hover .moreknow-faculties__lead { color: #8EC54A; border-color: #8EC54A;}
.moreknow-faculties__slide--04:hover .moreknow-faculties__lead { color: #F5A21B; border-color: #F5A21B;}

/* 中の矢印アイコン位置 */
.moreknow-faculties__icon-arrow {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

/* Prev / Next ボタン（intro 基準で絶対配置） */
.moreknow-faculties__nav {
  width: 30px;
  height: 55px;
  background-size: 30px 55px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 20;
}

/* 左：MORE KNOW の右横（＝ intro 左端） */
.moreknow-faculties__nav--prev {
  left: -4em;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23384047'%2F%3E%3C%2Fsvg%3E");
}

/* 右：1枚目と2枚目の間（スライド900px想定） */
.moreknow-faculties__nav--next {
  right: 29em;  /* 880〜900pxくらいで好みの位置に調整 */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23384047'%2F%3E%3C%2Fsvg%3E");
}

/* ドット（Swiper pagination） */
.moreknow-faculties__pagination {
  margin-top: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.moreknow-faculties__pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  opacity: 1;
  background-color: #e1e1e1;
  border-radius: 0;
  transition: background-color .3s ease;
}

.moreknow-faculties__pagination .swiper-pagination-bullet + .swiper-pagination-bullet {
  margin-left: 10px;
}

.moreknow-faculties__pagination .swiper-pagination-bullet-active {
  background-color: #384047;
}

/* SP レイアウト */
@media screen and (max-width: 768px) {
  .moreknow-faculties {
    padding: 48px 0;
  }

  .moreknow-faculties__wrapper {
    max-width: 100%;
    margin: 5em auto;
    padding: 0 16px;
    display: block;
  }

  .moreknow-faculties__title {
    writing-mode: horizontal-tb;
    margin-right: 0;
    margin-bottom: -16px;
    padding-top:20px;
    border-top: #00509D 1px solid;
  }

  .moreknow-faculties__intro {
    margin: 0;
    padding-left: 0;
  }

  .moreknow-faculties__slide {
    width: 100%;
    max-width: 100% !important;  /* SPでは制限解除 */
    margin-right: 24px;
  }

  .moreknow-faculties__pic {
    margin-right: 0;
  }

  .moreknow-faculties__nav {
    display: none;
  }

  .moreknow-faculties__pagination {
    margin-top: 40px;
  }
}