@charset "UTF-8";

/* ==========================================================================
   Base & Reset
   ========================================================================== */
:root {
  /* カラーパレット */
  --color-main: #2C3E50;
  --color-bg: #F0F6F5;
  --color-accent: #00A693; 
  
  /* コースカラー */
  --color-course-1: #2E8B57; 
  --bg-course-1: #F1FFF4;
  --color-course-2: #0075C2; 
  --bg-course-2: #F4FAFF;
  --color-course-3: #F0566E; 
  --bg-course-3: #FFF5F7;

  /* グラデーション */
  --grad-course-1: linear-gradient(135deg, #9ACD32 0%, #228B22 100%);
  --grad-course-2: linear-gradient(135deg, #00BFFF 0%, #0075C2 100%);
  --grad-course-3: linear-gradient(135deg, #FF9999 0%, #F0566E 100%);
  
  --grad-message: linear-gradient(135deg, #00A693 0%, #008B8B 50%, #4682B4 100%);
  --grad-green: linear-gradient(135deg, #00E0FF 0%, #00D4AA 50%, #F4E04D 100%);

  --font-base: "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --font-en: "Cormorant Garamond", serif;
  --font-en-sans: "Inter", sans-serif;
}

html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--color-main);
  background-color: var(--color-bg);
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

a:hover { opacity: 0.7; }

ul, ol { list-style: none; padding: 0; margin: 0; }

.inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.u-onlySp { display: none; }
@media (max-width: 767px) {
  .u-onlySp { display: block; }
  .u-onlyPc { display: none; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 1000;
  display: flex;
  align-items: center;
  background: transparent;
  transition: all 0.5s ease;
  opacity: 0;
  visibility: hidden;
}

.header__inner {
  width: 100%;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo-link {
  display: block;
  width: 240px;
}

@media (max-width: 768px) {
  .header {
    height: 60px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  }
  
  .header.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
  }

  .header__inner {
    padding: 0 15px;
    justify-content: flex-start;
    height: 100%;
  }

  .header__logo-link {
    width: 130px;
    display: flex;
    align-items: center;
    height: 100%;
  }
  
  .header__logo-link img { margin-top: 2px; }
}

/* ==========================================================================
   Opening Animation
   ========================================================================== */
.opening {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #fff;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.opening__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #00A693 0%, #008B8B 50%, #4682B4 100%);
  z-index: -1;
  overflow: hidden;
}

.opening__bg::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(500px) rotateX(60deg);
  animation: gridMove 20s linear infinite;
  opacity: 0.4;
}
.opening__first-wrap { text-align: center; color: #fff; opacity: 0; z-index: 1; }
.opening__title-first { width: 80%; max-width: 600px; margin: 0 auto 40px; }

/* ==========================================================================
   Main Visual (MV)
   ========================================================================== */
.mv {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 0;
}

.mv::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0, 166, 147, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 166, 147, 0.05) 1px, transparent 1px);
  background-size: 50px 50px; z-index: 0;
}

.mv-line-anim {
  position: absolute; top: 0; width: 2px; height: 150px;
  background: linear-gradient(to bottom, transparent, rgba(0, 166, 147, 0.8), #fff);
  opacity: 0; z-index: 0; filter: drop-shadow(0 0 5px rgba(0, 166, 147, 0.8));
}

.mv-line-anim:nth-child(1) { left: 10%; animation: cosmicRay 4s infinite 0s; }
.mv-line-anim:nth-child(2) { left: 25%; animation: cosmicRay 5.5s infinite 2s; }
.mv-line-anim:nth-child(3) { left: 40%; animation: cosmicRay 3.5s infinite 1.5s; }
.mv-line-anim:nth-child(4) { left: 55%; animation: cosmicRay 6s infinite 0.5s; }
.mv-line-anim:nth-child(5) { left: 70%; animation: cosmicRay 4.5s infinite 3s; }
.mv-line-anim:nth-child(6) { left: 85%; animation: cosmicRay 5s infinite 1s; }
.mv-line-anim:nth-child(7) { left: 95%; animation: cosmicRay 3s infinite 2.5s; }

@keyframes cosmicRay {
  0% { transform: translateY(-200px) scaleY(0.5); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(120vh) scaleY(1.5); opacity: 0; }
}

.mv__icon-items { 
  position: relative; 
  width: 100%; 
  height: 100%; 
  z-index: 1; 
}

.mv__icon-item { 
  position: absolute; 
  top: 35%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  width: 400px; 
  aspect-ratio: 1 / 1;
  max-width: 400px; 
}

.mv__icon-item img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
}

.mv__icon-item:nth-child(1) { margin-left: -230px; margin-top: 160px; opacity: 0.8; }
.mv__icon-item:nth-child(2) { margin-left: -215px; margin-top: 170px; opacity: 0.8; }
.mv__icon-item:nth-child(3) { margin-left: 220px; margin-top: 175px; opacity: 0.8; }
.mv__icon-item:nth-child(4) { margin-left: 235px; margin-top: 185px; opacity: 0.8; }
.mv__icon-item:nth-child(5) { }
.mv__icon-item:nth-child(6) { margin-left: 10px; margin-top: 10px; opacity: 0.8; }

[class^="mv__treat"] { position: absolute; z-index: 0; opacity: 0.6; }
.mv__treat1 { top: 30%; left: 7%; width: 200px; }
.mv__treat2 { bottom: 20%; right: 15%; width: 200px; }
.mv__treat3 { top: 15%; right: 10%; width: 200px; }

.mv-content { position: absolute; bottom: 60px; left: 0; width: 100%; z-index: 10; text-align: center; }
.mv-content__title-second { width: 80%; max-width: 900px; margin: 0 auto; }

.mv-content__scroll {
  margin-top: 30px; font-family: var(--font-en-sans); font-size: 1.1rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-main); position: relative; display: inline-block; padding-bottom: 60px; font-weight: 700;
}

.mv-content__scroll::after {
  content: ""; position: absolute; bottom: 0; left: 50%; width: 2px; height: 50px;
  background-color: var(--color-main); transform-origin: top; animation: scrollFlow 2s infinite;
}

@keyframes scrollFlow {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@media screen and (max-width: 1180px) {
  .mv__icon-item { 
    width: 35vw; 
  }
  .mv__icon-item:nth-child(1) { margin-left: -20vw; margin-top: 170px; }
  .mv__icon-item:nth-child(2) { margin-left: -18vw; margin-top: 180px; }
  .mv__icon-item:nth-child(3) { margin-left: 18vw; margin-top: 170px; }
  .mv__icon-item:nth-child(4) { margin-left: 20vw; margin-top: 180px; }
  .mv__icon-item:nth-child(6) { margin-left: 1vw; margin-top: 5px; }
}

@media screen and (max-width: 768px) {
  .mv { min-height: 100vh; }
  .mv__icon-item { width: 45vw; max-width: 280px; }
  
  .mv__icon-item:nth-child(1) { margin-left: -22vw; margin-top: 110px; }
  .mv__icon-item:nth-child(2) { margin-left: -20vw; margin-top: 115px; }
  .mv__icon-item:nth-child(3) { margin-left: 20vw; margin-top: 105px; }
  .mv__icon-item:nth-child(4) { margin-left: 22vw; margin-top: 110px; }
  .mv__icon-item:nth-child(5) { }
  .mv__icon-item:nth-child(6) { margin-left: 1vw; margin-top: 5px; }
  
  [class^="mv__treat"] { width: 100px; }
}

/* ==========================================================================
   Message
   ========================================================================== */
.message {
  margin-top: -120px; padding-top: 250px; padding-bottom: 350px;
  background: var(--grad-message); position: relative; width: 100%; max-width: 100vw; z-index: 2; overflow: hidden; 
  
  --wave-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,261.3C960,256,1056,224,1152,197.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L0,320Z' fill='black'/%3E%3C/svg%3E");
  --wave-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0,0L1440,0L1440,200L1392,213.3C1344,226.7,1248,253.3,1152,240C1056,226.7,960,173.3,864,165.3C768,157.3,672,194.7,576,213.3C480,232,384,232,288,213.3C192,194.7,96,157.3,48,138.7L0,120Z' fill='black'/%3E%3C/svg%3E");

  mask-image: var(--wave-top), linear-gradient(black, black), var(--wave-bottom);
  mask-repeat: no-repeat;
  mask-position: top center, center, bottom center;
  
  mask-size: 102% 150px, 102% calc(100% - 296px), 102% 150px;
  mask-composite: add;
  
  -webkit-mask-image: var(--wave-top), linear-gradient(black, black), var(--wave-bottom);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: top center, center, bottom center;
  
  -webkit-mask-size: 102% 150px, 102% calc(100% - 296px), 102% 150px;
  -webkit-mask-composite: source-over;
  
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.message::before {
  content: ""; position: absolute; top: 0; left: 0; width: 200%; height: 200%;
  background-image: linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 40px 40px; animation: gridMove 30s linear infinite; z-index: -1; opacity: 0.3;
}
@keyframes gridMove { 0% { transform: translate(0, 0); } 100% { transform: translate(-40px, -40px); } }

.message__main-title {
  font-size: 4.6rem; font-family: var(--font-serif); margin-bottom: 20px; line-height: 1.4; letter-spacing: 0.1em;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.4); color: #fff;
}
.message__main-title-small {
  font-size: 0.5em; display: block; margin-bottom: 5px; font-family: var(--font-base); letter-spacing: 0.2em; color: #E0FFFF; font-weight: 700;
}
.message__title-note { font-size: 1.2rem; opacity: 0.9; margin-bottom: 80px; font-weight: 500; color: #fff; }

.message__bubbles {
  display: flex; flex-direction: column; align-items: center; position: relative; max-width: 1000px; margin: 0 auto;
}

.message__bubble {
  background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%; width: 400px; height: 400px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 40px; box-sizing: border-box; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s; position: relative;
}

.message__bubble--1 { margin-right: auto; transform: translateX(30px); z-index: 1; }
.message__bubble--2 { 
  margin-left: auto; margin-right: auto; margin-top: -165px; z-index: 2;
  background: rgba(255, 255, 255, 0.2); border-color: #fff;
  box-shadow: 0 0 0 5px rgba(255,255,255,0.1), 0 20px 50px rgba(0, 0, 0, 0.2); 
}
.message__bubble--3 { margin-left: auto; margin-top: -170px; transform: translateX(-30px); z-index: 1; }

.message__bubble:hover { transform: scale(1.05); z-index: 10; background: rgba(255, 255, 255, 0.25); }
.message__bubble--1:hover { transform: translateX(30px) scale(1.05); }
.message__bubble--3:hover { transform: translateX(-30px) scale(1.05); }

.message__bubble-text {
  font-size: 1.7rem; line-height: 2; font-weight: 700; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.message__highlight {
  font-weight: 900;
  color: #FCEE21; 
  font-size: 1.1em;
  padding-bottom: 2px;
  border-bottom: 2px solid #FCEE21;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
}

.message__course-big {
  display: inline-block;
  font-size: 4.6rem;
  font-weight: 900;
  font-family: var(--font-serif); 
  color: #ffffff;
  margin: 10px 0;
  padding: 5px 20px;
  border-top: 2px solid rgba(255, 255, 255, 0.6); 
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.message__bold--1,
.message__bold--2,
.message__bold--3 {
  display: inline-block;
  font-size: 1.1em;
  font-weight: 900;
  line-height: 1.6em;
  background-color: #ffffff;
  padding: 0px 10px;
  margin: 0 4px; 
  border-radius: 30px; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0);
}

.message__bold--1 { color: #2E8B57; } /* 経済経営（緑） */
.message__bold--2 { color: #0075C2; } /* 公共政策（青） */
.message__bold--3 { color: #F0566E; } /* 国際キャリア（赤/ピンク） */

.message__ce-text { margin-top: 100px; }

@media (max-width: 768px) {
  .message { 
    margin-top: -50px; 
    padding-top: 100px; 
    padding-bottom: 120px; 
    
    -webkit-mask-size: 101% 50px, 101% calc(100% - 98px), 101% 50px; 
    mask-size: 101% 50px, 101% calc(100% - 98px), 101% 50px; 
  }
  .message__main-title { font-size: 2.8rem; margin-bottom: 40px; }
  .message__bubble { width: clamp(280px, 85vw, 350px); height: clamp(280px, 85vw, 350px); padding: 20px; }
  .message__bubble-text { font-size: 1.4rem; line-height: 1.8; }
  .message__course-big {
    font-size: 3.6rem;
    padding: 5px 10px;
  }
  .message__bold--1, 
  .message__bold--2, 
  .message__bold--3 {
    font-size: 1.05em;
    padding: 3px 10px;
    margin: 2px;
	}
  .message__bubble--1, .message__bubble--2, .message__bubble--3 { margin: 0 auto; transform: none; }
  .message__bubble--2 { margin-top: -40px; }
  .message__bubble--3 { margin-top: -40px; }
  .message__bubble--1:hover, .message__bubble--3:hover { transform: scale(1.02); }
}


/* ==========================================================================
   News
   ========================================================================== */
.news {
  padding: 100px 0;
  background-color: var(--color-bg);
  position: relative;
  padding-bottom: 150px;
}

.news::after {
  content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,165.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L0,320Z' fill='white'/%3E%3C/svg%3E");
  background-size: 100% 100%; background-repeat: no-repeat; z-index: 10;
}

.news__title { text-align: center; font-family: var(--font-en-sans); font-size: 6rem; margin-bottom: 60px; line-height: 1; color: var(--color-main); font-weight: 800; letter-spacing: 0.05em; }
.news__title-small { display: block; font-size: 1.4rem; font-family: var(--font-base); margin-top: 15px; color: var(--color-accent); font-weight: 700; letter-spacing: 0.2em; }
.news__content { display: flex; gap: 40px; flex-wrap: wrap; }
.news__pickup { flex: 1; min-width: 300px; }
.news__pickup-link { display: block; background: #fff; border: 1px solid #ddd; box-shadow: 0 5px 15px rgba(0,0,0,0.03); transition: all 0.3s; }
.news__pickup-link:hover { transform: translateY(-5px); box-shadow: 0 20px 30px rgba(0,0,0,0.08); border-color: var(--color-accent); }
.news__pickup-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.news__pickup-item { padding: 25px; }
.news__pickup-head { color: #fff; background: var(--color-accent); font-weight: 700; font-size: 1.2rem; padding: 4px 12px; display: inline-block; margin-bottom: 15px; letter-spacing: 0.1em; }
.news__date { font-size: 1.3rem; color: #999; font-family: var(--font-en-sans); margin-bottom: 5px; }
.news__item-title { font-weight: 700; font-size: 1.8rem; line-height: 1.6; }
.news__items-wrap { flex: 1; min-width: 300px; }
.news__item { border-bottom: 1px solid #ddd; padding: 20px 0; transition: background 0.3s; }
.news__item:hover { background: rgba(0, 166, 147, 0.05); }
.news__item-link { display: block; }
.news__more { text-align: center; margin-top: 40px; }
.news__more-btn { background: transparent; color: var(--color-main); padding: 12px 60px; border: 1px solid var(--color-main); cursor: pointer; transition: 0.3s; font-family: var(--font-en-sans); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.news__more-btn:hover { background: var(--color-main); color: #fff; }

/* ==========================================================================
   Point
   ========================================================================== */
.point {
  padding: 80px 0 120px;
  background-color: #fff;
  z-index: 0; position: relative;
}

.point::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px;
  background: linear-gradient(to bottom right, #fff 50%, var(--bg-course-1) 50%);
  pointer-events: none;
}

.point__title { text-align: center; width: 30%; margin-bottom: 50px; position: relative; z-index: 1; }
.point__content-items { display: flex; flex-direction: column; gap: 100px; }
.point__content-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 60px; padding: 50px; background: #fff; border: 1px solid #eee; box-shadow: 20px 20px 0px rgba(0, 0, 0, 0.02); position: relative; transition: transform 0.3s; }
.point__content-item:hover { transform: translate(-3px, -3px); box-shadow: 23px 23px 0px rgba(0, 166, 147, 0.1); }
.point__content-item::after { content: ""; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--color-accent); }
.point__content-head { flex: 0 0 350px; max-width: 100%; }
.point__content-title-block { position: relative; padding-top: 30px; border-bottom: 2px solid var(--color-main); padding-bottom: 20px; margin-bottom: 20px; }
.point__number { font-family: var(--font-serif); font-size: 8rem; line-height: 0.8; font-weight: 900; color: #E0E0E0; position: absolute; top: -55px; left: -15px; z-index: 0; }
.point__content-title { position: relative; z-index: 1; width: 70%;}
.point__content-text { font-size: 2.2rem; font-weight: 700; line-height: 1.4; color: var(--color-main); }
.point__content-body { flex: 1; }
.point__text { margin-bottom: 30px; font-size: 1.6rem; line-height: 2; color: #555; }
.point__text:last-child { margin-bottom: 0; }
.point__example { background: #F7F9FB; padding: 30px; border-left: 4px solid var(--color-main); }
.point__example-text { font-weight: 700; margin-bottom: 15px; color: var(--color-main); font-family: var(--font-en-sans); letter-spacing: 0.1em; }

.point__figure {
  margin-top: 30px;
  width: 100%;
  max-width: 400px; 
  margin-left: auto; 
}

.point__img-wrap {
  position: relative;
  background: #fff;
  padding: 8px; 
  border: 1px solid #eee;
  box-shadow: 10px 10px 0px rgba(0, 166, 147, 0.05); 
  line-height: 0;
  transition: transform 0.3s;
}

.point__content-item:hover .point__img-wrap {
  transform: rotate(1deg) scale(1.02);
}

.point__img-wrap img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2; 
  object-fit: cover;
}

.point__caption {
  margin-top: 15px;
  font-size: 1.3rem;
  color: #666;
  padding-left: 10px;
  border-left: 2px solid var(--color-accent); 
  line-height: 1.5;
}


@media (max-width: 768px) {
  .point__title { text-align: center; width: 70%; margin-bottom: 30px; position: relative; z-index: 1; }
  .point__content-item { flex-direction: column; gap: 30px; padding: 30px; }
  .point__content-head { flex: auto; width: 100%; }
  .point__content-title { position: relative; z-index: 1; width: 60%;}
  .point__number { font-size: 5rem; top: -15px; left: 0; }
  .point__figure {
    max-width: 100%; 
    margin-top: 25px;
  }
  
  .point__img-wrap {
    box-shadow: 5px 5px 0px rgba(0, 166, 147, 0.1); 
  }
}

/* ==========================================================================
   Department (Courses)
   ========================================================================== */
.department {
  padding: 100px 0 140px; position: relative; overflow: hidden; z-index: 1; max-width: 100vw; 
}

.department--first { background-color: var(--bg-course-1); }
.department--second { background-color: var(--bg-course-2); }
.department--third { background-color: var(--bg-course-3); }

/* 背景装飾 */
.department--first::before { content: ""; position: absolute; top: -10%; right: -10%; width: 90%; height: 120%; background: linear-gradient(135deg, rgba(46,139,87,0.1), transparent); clip-path: polygon(100% 0, 0 0, 100% 100%); z-index: -1; }
.department--first::after { content: ""; position: absolute; bottom: 0; left: 0; width: 60%; height: 60%; background: rgba(154,205,50,0.15); clip-path: polygon(0 100%, 0 0, 100% 100%); z-index: -1; }

.department--second::before { content: ""; position: absolute; top: -10%; left: -10%; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0,117,194,0.1), transparent); clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); z-index: -1; }
.department--second::after { content: ""; position: absolute; bottom: 0; right: 0; width: 50%; height: 80%; background: rgba(0,191,255,0.1); clip-path: polygon(100% 0, 100% 100%, 0 100%); z-index: -1; }

.department--third::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(200deg, rgba(255,100,100,0.1), transparent); clip-path: polygon(100% 0, 0 50%, 100% 100%); z-index: -1; }
.department--third::after { content: ""; position: absolute; bottom: 0; left: 0; width: 70%; height: 70%; background: rgba(255,127,80,0.15); clip-path: polygon(0 100%, 0 0, 100% 100%); z-index: -1; }

.department__content { display: flex; align-items: center; gap: 50px; position: relative; z-index: 1; }
.department__content-reverse { flex-direction: row-reverse; }
.department__content-item { flex: 1.5; }
.department__content-icon { flex: 1; }

.department__name--first img { height: auto; width: auto; max-width: 70%; margin-bottom: 15px; opacity: 0.9; } 
.department__name--second img { height: auto; width: auto; max-width: 40%; margin-bottom: 0px; opacity: 0.9; }
.department__name--third img { height: auto; width: auto; max-width: 65%; margin-bottom: 15px; opacity: 0.9; }

.department__title-wrap { display: block; margin-bottom: 20px; }
.department__title-ruby { display: block; font-size: 1.6rem; font-weight: 700; color: var(--font-base); margin-bottom: 5px; font-family: var(--font-base); letter-spacing: 0.05em; opacity: 0.8; }
.department__title { font-size: 4.8rem; line-height: 1.1; margin-bottom: 50px; font-family: var(--font-base); font-weight: 900; }
.department__title-img--first img, .department__title-img--second img, .department__title-img--third img { height: 70px; width: auto; margin-bottom: 0px; opacity: 1; }


.department__title-bottom {
  display: inline-block; padding-right: 20px; position: relative; font-style: italic;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.department__title-bottom::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; opacity: 0.5;
}

/* 各コースの色設定 */
.department--first .department__title-bottom { background-image: var(--grad-course-1); }
.department--first .department__title-bottom::after { background: var(--grad-course-1); }
.department--first .department__course-name { background: var(--grad-course-1); }
.department--first .department__recommend-items li::before { background: var(--color-course-1); }
.department--first .department__recommend-title { background: var(--color-course-1); color: #fff; }
.department--first .department__recommend-tag { border: 1px solid var(--color-course-1); color: var(--color-course-1); background: #fff; }

.department--second .department__title-bottom { background-image: var(--grad-course-2); }
.department--second .department__title-bottom::after { background: var(--grad-course-2); }
.department--second .department__course-name { background: var(--grad-course-2); }
.department--second .department__recommend-items li::before { background: var(--color-course-2); }
.department--second .department__recommend-title { background: var(--color-course-2); color: #fff; }
.department--second .department__recommend-tag { border: 1px solid var(--color-course-2); color: var(--color-course-2); background: #fff; }

.department--third .department__title-bottom { background-image: var(--grad-course-3); }
.department--third .department__title-bottom::after { background: var(--grad-course-3); }
.department--third .department__course-name { background: var(--grad-course-3); }
.department--third .department__recommend-items li::before { background: var(--color-course-3); }
.department--third .department__recommend-title { background: var(--color-course-3); color: #fff; }
.department--third .department__recommend-tag { border: 1px solid var(--color-course-3); color: var(--color-course-3); background: #fff; }

.department__content-text { margin-bottom: 30px; font-size: 1.6rem; font-weight: 700; line-height: 2; color: #555; }
.department__course { display: flex; flex-direction: column; gap: 20px; }
.department__course-item { background: #fff; border: 1px solid rgba(0,0,0,0.05); padding: 25px; box-shadow: 5px 5px 10px rgba(0,0,0,0.03); }
.department__course-name { color: #fff; font-size: 1.3rem; font-weight: 700; padding: 4px 15px; display: inline-block; margin-bottom: 10px; border-radius: 50px; }
.department__recommend-items li { position: relative; padding-left: 1.5em; margin-bottom: 5px; font-weight: 700; }
.department__recommend-items li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; }

/* 就職先デザイン */
.department__recommend { margin-top: 30px; }
.department__recommend-title {
  font-weight: 700; font-size: 1.3rem; margin-bottom: 15px; 
  display: inline-block; padding: 6px 20px; border-radius: 50px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.department__recommend-list { display: flex; flex-wrap: wrap; gap: 10px; }
.department__recommend-tag {
  font-size: 1.3rem; font-weight: 700; padding: 8px 16px; border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.department__content-icon img {
  width: 100%; max-width: 400px; margin: 0 auto; display: block;
  box-shadow: 20px 20px 0 rgba(0,0,0,0.1); border: 10px solid rgba(255,255,255,0.8);
}

.department__mobile-img { display: none; margin-bottom: 20px; }
.department__mobile-img img { 
  width: 90%; margin: 0 auto; display: block;
  border: 5px solid rgba(255,255,255,0.8); box-shadow: 10px 10px 0 rgba(0,0,0,0.1); 
}

@media (max-width: 768px) {
  .department__content-icon { display: none; }
  .department__mobile-img { display: block; }
  .department__content { flex-direction: column; gap: 30px; }
  .department__title { font-size: 3.2rem; margin-bottom: 20px; }
  .department__title-img--third img { height: auto; width: 85%; margin-bottom: 0px; opacity: 1; }
  .department__recommend-tag { font-size: 1.2rem; padding: 6px 12px; }
}

/* ==========================================================================
   Session (Slider)
   ========================================================================== */
.session {
  padding: 80px 0 150px;
  background-color: var(--color-bg);
  position: relative;
  overflow: hidden;
}

.session__title {
  text-align: center;
  margin-bottom: 60px;
  line-height: 1;
}

.session__logo {
  display: block;
  margin: 0 auto;
  width: 27%;
  object-fit: contain;
}

.session__title-small {
  display: block;
  font-size: 1.4rem;
  font-family: var(--font-base);
  margin-top: 15px;
  color: var(--color-accent);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.2em;
}

.session__swiper-container {
  position: relative;
  width: 100%;
  padding: 0; 
  margin-top: 40px;
}

.session__swiper-container::before,
.session__swiper-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  min-width: 100px;
  z-index: 5;
  pointer-events: none;
}

.session__swiper-container::before {
  left: -1px;
  background: linear-gradient(to right, 
    var(--color-bg) 40%, 
    rgba(240, 246, 245, 0) 100%
  );
}

.session__swiper-container::after {
  right: -1px;
  background: linear-gradient(to left, 
    var(--color-bg) 40%, 
    rgba(240, 246, 245, 0) 100%
  );
}

.session__swiper {
  width: 100%;
  padding: 20px 0 60px; 
}

.session__slide {
  height: auto;
  display: flex;
}

.session__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
  color: var(--color-main);
  text-decoration: none;
}

.session__slide:hover .session__link {
  transform: translateY(-5px);
}

.session__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.session__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.session__info {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.session__date {
  font-size: 1.2rem;
  color: #999;
  margin-bottom: 0px;
}

.session__card-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 7.6rem;
}

.session__prev, .session__next {
  --swiper-navigation-color: var(--color-accent) !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10 !important; 
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none !important;
  margin: 0;
}

.session__prev { 
  left: 7% !important; 
}
.session__next { 
  right: 7% !important; 
}

.session__prev::after, .session__next::after {
  font-size: 5.5rem !important;
  font-weight: bold;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}

.session__prev:hover, .session__next:hover {
  transform: translateY(-50%) scale(1.1);
  transition: transform 0.2s ease;
}

@media (max-width: 768px) {
  .session { padding: 60px 0 100px; }
  .session__logo {
    width: 60%;
  }
  .session__title-small {
    font-size: 1.5rem;
    padding: 0 15px;
  }
  .session__swiper-container::before,
  .session__swiper-container::after {
    width: 50px;
  }
  
.session__swiper-container::before {
  left: -1px;
  background: linear-gradient(to right, 
    var(--color-bg) 5%, 
    rgba(240, 246, 245, 0) 100%
  );
}

.session__swiper-container::after {
  right: -1px;
  background: linear-gradient(to left, 
    var(--color-bg) 5%, 
    rgba(240, 246, 245, 0) 100%
  );
}	
	
  .session__prev {
    width: 30px;
    height: 40px;
  }

  .session__next {
    width: 30px;
    height: 40px;
  }

  .session__prev { 
    left: 10px !important; 
  }
  .session__next { 
    right: 10px !important; 
  }
  .session__prev::after, .session__next::after {
    font-size: 4rem !important;
  }
}

/* ==========================================================================
   Session More Button
   ========================================================================== */
.session__more {
  text-align: center;
  margin-top: 70px;
  position: relative;
  z-index: 10;
}

.session__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  padding: 16px 50px;
  font-weight: 700;
  font-size: 1.6rem;
  min-width: 320px;
  transition: all 0.3s;
  text-decoration: none;
}

.session__more-btn::after {
  content: '\f054';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.2rem;
  margin-left: 15px;
  transition: transform 0.3s;
}

.session__more-btn:hover {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 5px 15px rgba(0, 166, 147, 0.2);
  transform: translateY(-3px);
}

.session__more-btn:hover::after {
  transform: translateX(5px);
}

@media (max-width: 768px) {
  .session__more {
    margin-top: 50px;
    padding: 0 20px;
  }
  .session__more-btn {
    width: 100%;
    min-width: auto;
    padding: 15px 20px;
    font-size: 1.5rem;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   Closing
   ========================================================================== */
.closing {
  padding: 120px 0;
  background: var(--grad-message);
  text-align: center; color: #fff; position: relative; overflow: hidden;
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
  margin-top: -80px; padding-top: 200px;
}

.closing::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 40px 40px; opacity: 0.3;
}

.closing__inner { position: relative; z-index: 1; }

.closing__title {
  font-size: 4.2rem; font-weight: 800; font-family: var(--font-serif);
  margin-bottom: 40px; line-height: 1.6;
  text-shadow: 0 0 5px rgba(255,255,255,0.5);
}

.closing__text { font-size: 1.8rem; line-height: 2.2; font-weight: 500; opacity: 1; }

@media (max-width: 768px) {
  .closing { clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%); margin-top: -50px; padding-top: 150px; }
  .closing__title { font-size: 2.8rem; }
  .closing__text { font-size: 1.5rem; }
}

/* ==========================================================================
   Links
   ========================================================================== */
.links {
  padding: 120px 0px ;
  background-color: ##F0F6F5;
  position: relative;
  z-index: 1;
}

.links__items {
  display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;
}

.links__item {
  width: 320px;
}

.links__item-link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.links__item-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.links__item-link img {
  width: 100%;
  display: block;
  transition: transform 0.5s;
}

.links__item-link:hover img {
  transform: scale(1.05);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background-color: #fff; border-top: 3px solid #00897c; }
.footer__top { padding: 60px 0; }

.footer__information { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 40px; }
.footer__text-block { flex: 1; min-width: 280px; }
.footer__title { font-size: 2.2rem; font-weight: 700; margin-bottom: 15px; color: #00897c; }
.footer__text { font-size: 1.4rem; margin-top:3px; margin-bottom: 3px; }

.footer__cta { display: flex; gap: 20px; flex-wrap: wrap; }

.button {
  display: inline-block;
  background: #fff;
  color: #00897c;
  border: 2px solid #00897c;
  padding: 15px 6px;
  font-weight: 700;
  text-align: center;
  min-width: 220px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.button:hover {
  background: #00897c;
  color: #fff;
  box-shadow: 0 5px 15px rgba(44, 62, 80, 0.3);
  transform: translateY(-2px);
}

.footer__bottom { 
  background: var(--grad-message); 
  color: #fff; text-align: center; 
  padding: 20px 0 90px;
  font-size: 1.1rem; letter-spacing: 0.05em; font-family: var(--font-en-sans); 
}

.pagetop { 
  position: fixed; 
  bottom: 90px;
  right: 20px; width: 60px; height: 60px; 
  background: #00897c; border: 2px solid #fff; cursor: pointer; display: none; z-index: 999; transition: 0.3s; 
}
.pagetop:hover { background: var(--color-accent); }
.pagetop__arrow { display: block; width: 12px; height: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-45deg) translate(-2px, 2px); margin: 24px auto 0; }

@media (max-width: 768px) {
  .footer__information { flex-direction: column; align-items: flex-start; } 
  .footer__cta { flex-direction: column; width: 100%; } 
  .button { width: 100%; box-sizing: border-box; }
}

/* ==================== Sticky Nav ==================== */
.sticky-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 9999;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  border-top: 3px solid var(--color-accent);
}

.sticky-nav.is-visible {
  transform: translateY(0);
}

.sticky-nav__inner {
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 800px;
  padding: 0 10px;
}

.sticky-nav__item {
  flex: 1;
  text-align: center;
  padding: 0 5px;
}

.sticky-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-main);
  transition: opacity 0.3s;
  padding: 5px;
  border-radius: 4px;
}

.sticky-nav__link:hover {
  background-color: #f5f5f5;
  color: var(--color-accent);
}

.sticky-nav__icon {
  font-size: 2.4rem;
  margin-bottom: 4px;
  color: var(--color-accent);
}

.sticky-nav__text {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .sticky-nav {
    padding: 8px 0;
  }
  .sticky-nav__text {
    font-size: 1rem;
  }
  .sticky-nav__icon {
    font-size: 2rem;
  }
}