@charset "utf-8";

/*================================================================================
  1. ユーティリティ・アニメーション
================================================================================*/

/* @keyframes 定義 */
@keyframes text-fade {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
  }
}

@keyframes scale-slide {
  0% {
    transform: scale(1.1);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
  }
}

@keyframes dot-run {
  0% {
    top: 0;
  }
  100% {
    top: calc(100% - 2px);
  }
}

/* 共通ユーティリティクラス */
.text-fade {
  /* opacity: 0; */
  /* visibility: hidden; */
  /* animation: text-fade 0.1s ease forwards; */
}

/* Swiper / Slick の共通調整 */
.swiper-wrapper {
  padding-bottom: 60px;
  background-color: black;
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 10px;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  background-color: #132850 !important;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/*================================================================================
  2. トップページ（index）
================================================================================*/

/*--------------------------------------------------
  2.1. ヒーローエリア (.hero)
--------------------------------------------------*/
.hero {
  position: relative;
  overflow: hidden;
}

.hero-slide {
  height: 720px;
  background-color: #eee;
}

.hero-slide.hero-option02 {
  max-height: 1000px;
}

.hero-option01 {
  height: 680px;
  background-color: #eee;
  transition: 0.2s;
}

/* ヒーロースライドアイテム */
.hero-slide__item {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 一枚画像のスライド */
.hero-slide .swiper-slide.--one-img img {
  height: 100%;
  width: 100%;
  opacity: 0.65;
  object-fit: cover;
}

/* イントロテキスト */
.hero__intro-text {
  position: absolute;
  width: 100%;
  top: 40%;
  left: 0;
  padding: 0 100px;
  z-index: 10;
  /* background-color:rgba(0,0,0,0.5); */
}

.hero__intro-text .__text {
  color: #fff;
  font-size: 56px;
  font-weight: bolder;
  /* text-shadow: ... */
  animation-delay: 2s;
  letter-spacing: 0.02em;
}

.hero__intro-text .__text.--delay1 {
  animation-delay: 1s;
}

/* 左右分割アニメーションコンテナ */
.hero__left,
.hero__right {
  position: absolute;
  width: 65%;
  height: 100%;
  overflow: hidden;
  transition: all 1s cubic-bezier(.19, 1, .22, 1);
  transition-timing-function: cubic-bezier(.19, 1, .22, 1);
  transform: skew(-15deg);
}

.hero__left {
  right: calc(50% - 1px);
}

.hero__right {
  left: calc(50% - 1px);
}

/* 左右分割アニメーション画像 */
.hero--image {
  height: 100%;
  transform-origin: center center;
  transition: all 1s cubic-bezier(.19, 1, .22, 1);
  transition-timing-function: cubic-bezier(.19, 1, .22, 1);
  opacity: 0;
  visibility: hidden;
}

.hero-slide__item .hero--image {
  animation: scale-slide 2.4s ease forwards;
  animation-delay: 0.4s;
}

.hero-slide__item .hero--image.image--left {
  animation-delay: 0.6s;
}

.hero-slide__item .hero--image.image--right {
  animation-delay: 1.4s;
}

/* 疑似要素（背景画像） */
.hero--image::before {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 1s cubic-bezier(.19, 1, .22, 1);
  transition-timing-function: cubic-bezier(.19, 1, .22, 1);
  transition-property: opacity, transform;
  transform: skew(15deg);
}

.swiper-slide.swiper-slide-active .hero--image::before {
  opacity: 1;
}

.hero--image.image--left::before {
  background-image: url(../image/slide-01.png);
  background-position: 60% center;
  right: -20%;
}

.hero--image.image--right::before {
  background-image: url(../image/slide-02.png);
  background-position: 0 center;
  left: -20%;
}

/* スクロールダウンインジケーター */
.scroll-down {
  position: absolute;
  bottom: 0;
  right: 10px;
  transform: translateX(-50%);
  padding-bottom: 110px;
  z-index: 10;
}

.scroll-down > div.line {
  position: absolute;
  content: "";
  width: 2px;
  height: calc(158px / 2);
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #00ABF0;
}

.scroll-down > div.line::before {
  position: absolute;
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #fff;
  top: 0;
  left: -1px;
  animation: dot-run 2s linear infinite;
  -webkit-animation: dot-run 2s linear infinite;
}

.scroll-down span {
  transform: rotate(90deg);
  display: block;
  font-size: 13px;
  font-weight: bold;
  color: #00ABF0;
  letter-spacing: 1px;
}

/*--------------------------------------------------
  2.2. ニュースセクション (.indexNews)
--------------------------------------------------*/
.indexNews {
  position: relative;
  padding: 60px 0 0;
}

/* 疑似要素（装飾） */
.indexNews:before {
  position: absolute;
  bottom: 50px;
  left: 0;
  width: 100%;
  height: 200px;
  background-color: #DDF4FF;
  content: "";
  z-index: -1;
}

.indexNews:after {
  position: absolute;
  top: -110px;
  left: 0;
  width: 100%;
  height: 180px;
  background: url(../image/back.png) no-repeat;
  background-size: 100%;
  content: "";
  z-index: 2;
}

/* コンテナと見出し */
.indexNews .cont {
  width: 1100px;
  margin: 0 auto;
}

.indexNews h2 {
  margin: 0 0 40px;
  font-size: 40px;
  font-weight: bold;
  color: #00ABF0;
  text-align: center;
}

/* ヘッダーと「もっと見る」リンク */
.indexNewsHead {
  display: flex;
  justify-content: space-between;
}

.indexNewsHead a {
  display: block;
  position: relative;
  margin: 16px 0 0;
  padding: 4px 30px 4px 0;
  text-decoration: none;
  font-weight: bold;
}

.indexNewsHead a:before {
  position: absolute;
  top: calc(50% - 4px);
  right: 0;
  width: 20px;
  height: 6px;
  content: "";
  border-bottom: 2px solid #00ABF0;
  border-right: 2px solid #00ABF0;
  transform: skew(45deg);
  transition: all .3s;
}

.indexNewsHead a:hover:before {
  position: absolute;
  top: calc(50% - 4px);
  right: -6px;
  width: 20px;
  height: 6px;
  content: "";
  border-bottom: 2px solid #00ABF0;
  border-right: 2px solid #00ABF0;
  transform: skew(45deg);
  transition: all .3s;
}

/* ニュースリスト */
ul.newsList {
  display: flex;
  margin: 0;
  padding: 0 0 80px;
  list-style: none;
  justify-content: space-between;
}

ul.newsList li {
  margin: 0;
  padding: 0;
  width: 22%;
}

ul.newsList li img {
  max-width: 100%;
  height: auto;
  border: 1px solid #FFF;
}

ul.newsList li a {
  text-decoration: none;
  color: #000;
}

ul.newsList li a:hover {
  opacity: 0.8;
}

ul.newsList li dl {
  margin: 16px 0;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 1.4;
}

ul.newsList li dl dt {
  margin: 2px 0 0;
  color: #9f9f9f !important;
}

ul.newsList li dl dd {
  display: inline-block;
  text-align: center;
  color: #9f9f9f;
  border: 1px solid #9f9f9f;
  line-height: 1;
  padding: 3px 8px 2px;
  background-color: #FFF;
}

ul.newsList li h3 {
  line-height: 1.3;
}

/*--------------------------------------------------
  2.3. リンクセクション (.indexLink)
--------------------------------------------------*/
.indexLink {
  width: 1100px;
  margin: 0 auto;
  padding: 80px 0 60px;
}

.indexLink ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.indexLink ul li {
  position: relative;
  margin: 0 0 60px;
  padding: 0;
}

.indexLink ul li a {
  text-decoration: none;
  color: #000;
}

.indexLink ul li a:hover {
  opacity: 0.8;
}

.indexLink ul li h2 {
  position: absolute;
  margin: -28px 0 0;
  padding: 4px 50px 4px 16px;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 0.08em;
  background-color: #FFF;
  z-index: 10;
}

.indexLink ul li h2:before {
  position: absolute;
  top: calc(50% - 4px);
  right: 16px;
  width: 20px;
  height: 6px;
  content: "";
  border-bottom: 2px solid #00ABF0;
  border-right: 2px solid #00ABF0;
  transform: skew(45deg);
  transition: all .3s;
}

.indexLink ul li h2::after {
  position: absolute;
  content: "";
  top: 0;
  right: -34px;
  border-top: 51px solid transparent;
  border-left: 34px solid #FFF;
}

/*--------------------------------------------------
  2.4. 動画セクション (.video__yt)
--------------------------------------------------*/
.video__yt {
  margin: 30px 0 0;
}

.yt__item {
  width: 100%;
  display: flex;
  column-gap: 0;
  align-items: stretch;
}

.yt__item iframe {
  /*height: 196px !important;*/
  object-fit: cover;
  width: 100% !important;
}

/* スライドボタン */
.yt-slide__bt {
  position: absolute;
  width: 1100px;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
}

.yt-slide__bt .swiper-button-prev::after,
.yt-slide__bt .swiper-button-next::after {
  content: none !important;
}

.yt-slide__bt .swiper-button-prev,
.yt-slide__bt .swiper-button-next {
  width: 50px;
  height: 50px;
  margin-top: -30px;
  transition: 0.2s;
}

.yt-slide__bt .swiper-button-prev:hover,
.yt-slide__bt .swiper-button-next:hover {
  opacity: 0.7;
}

/* スライド表示状態 */
.yt-slide .swiper-slide .yt__item {
  opacity: 0.5;
}

.yt-slide .swiper-slide.swiper-slide-active .yt__item,
.yt-slide .swiper-slide.swiper-slide-prev .yt__item,
.yt-slide .swiper-slide.swiper-slide-next .yt__item {
  opacity: 1;
}

/* ページネーション */
.yt-slide .swiper-pagination .swiper-pagination-bullet {
  background-color: #00ABF0;
  opacity: 1;
  width: 16px;
  height: 16px;
}

.yt-slide .swiper-pagination .swiper-pagination-bullet-active {
  background-color: transparent;
  border: 1px solid #00ABF0;
}

/*================================================================================
  3. 導入ページ（intro）
================================================================================*/

/*--------------------------------------------------
  3.1. イントロリード (.introLead)
--------------------------------------------------*/
.introLead {
  position: relative;
}

.introLead:before {
  position: absolute;
  content: "";
  width: 100vw;
  height: 60px;
  background-color: #DAE3F1;
  border-radius: 0 20px 20px 0;
  top: -8px;
  right: 0;
  z-index: -1
}

#second .introLead h2 {
  margin: 0 0 40px;
  padding: 0;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.04em;
  background-color: transparent;
  position: static;
}

#second .introLead h2:before {
  display: none;
}

#second .introLead h2:after {
  display: none;
}


.introLead .introBody {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
}

.introLead .introBody p {
  flex-basis: 50%;
  flex-grow: 1;
  flex-shrink: 1;
  margin-top: 0;
}

.introLead .introBody figure {
  flex-basis: 40%;
  flex-grow: 0;
  flex-shrink: 0;
  margin: 0;
  max-width: 40%;
  min-width: 250px;
}

.introLead .introBody figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  max-width: 100%;
}

/*--------------------------------------------------
  3.2. 特徴セクション (.features)
--------------------------------------------------*/
.features {
  position: relative;
}

/* 疑似要素（サイドテキスト） */
.features:before {
  position: absolute;
  top: calc(50% - 50px);
  left: -90px;
  color: #FFF;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 60px;
  content: "Features";
  transform: rotate(90deg);
  text-shadow: 1px 1px 0 #CCC, -1px -1px 0 #CCC,
  -1px 1px 0 #CCC, 1px -1px 0 #CCC,
  1px 0 0 #CCC, -1px 0 0 #CCC,
  0 1px 0 #CCC, 0 -1px 0 #CCC;
}

.features ul {
  position: relative;
  margin: 0 80px;
  padding: 0;
  list-style: none;
}

/* 疑似要素（中央の縦線） */
.features ul:before {
  position: absolute;
  content: "";
  top: 0;
  left: 56px;
  background-color: #F0BC00;
  width: 8px;
  height: 100%;
  z-index: -1;
}

.features ul li {
  margin: 0 0 60px;
  padding: 0;
  display: flex;
}

.features ul li div.icon {
  width: 160px;
}

.features ul li div.text {
  width: calc(100% - 160px);
}

#second .features ul li div.text h3 {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  color: #00ABF0;
  line-height: 1.4;
  margin: 0 0 10px;
  border: none;
}

#second .features ul li div.text p {
  margin: 0;
}

/*================================================================================
  4. トピックス（topics）
================================================================================*/

/*--------------------------------------------------
  4.1. トピックスリスト (.topicsList)
--------------------------------------------------*/
.topicsList {
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.topicsList li {
  margin: 0;
  padding: 0;
}

.topicsList li a {
  display: block;
  padding: 14px 10px 10px;
  text-decoration: none;
  color: #000;
  border-bottom: 1px dotted #CCC;
}

.topicsList li a:hover {
  background-color: #eef9ff;
}

.topicsList li a span.timecat {
  display: block;
}

.topicsList li a span.catname,
.topicsDay span.catname {
  display: inline-block;
  text-align: center;
  color: #9f9f9f;
  border: 1px solid #9f9f9f;
  line-height: 1;
  padding: 3px 8px 2px;
  background-color: #FFF;
  margin-left: 8px;
  font-size: 14px;
}

/* 詳細ページの日付 */
.topicsDay {
  margin: 0 0 10px;
}

/* 詳細ページの内容 */
.topicsDetail img {
  margin-bottom: 10px;
}

/*--------------------------------------------------
  4.2. ページャー (.pager_wrap)
--------------------------------------------------*/
.pager_wrap {
  position: relative;
  overflow: hidden;
  margin: 20px 0 10px;
}

.pager_wrap ul.pager {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  left: 50%;
  float: left;
}

.pager_wrap ul.pager li {
  display: inline;
  margin: 2px;
  padding: 0;
  text-align: center;
  position: relative;
  left: -50%;
  float: left;
}

.pager_wrap ul.pager li a {
  display: block;
  padding: 8px 16px;
  color: #00ABF0;
  border-bottom: none;
  background-image: none;
  text-decoration: none;
}

.pager_wrap ul.pager li a:hover {
  background-color: #eef9ff;
}

.pager_wrap ul.pager li.active {
  display: block;
  color: #FFFFFF;
  background-color: #00ABF0;
  padding: 8px 16px;
}

.pager_wrap ul.pager li.active a:link, .pager_wrap ul.pager li.active a:visited,
.pager_wrap ul.pager li.active a:hover, .pager_wrap ul.pager li.active a:active {
  color: #FFFFFF !important;
}

/*================================================================================
  5. 教員・研究室関連（faculty）
================================================================================*/

/*--------------------------------------------------
  5.1. 研究室詳細 (.lab)
--------------------------------------------------*/
/* 研究テーマと画像セクションのコンテナ */
.lab {
  display: flex;
  gap: 40px;
  padding: 30px 0;
  border-bottom: 1px solid #e0e0e0;
}

/* 画像コンテナ (figure) */
.lab figure {
  flex-basis: 35%;
  flex-shrink: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 8px;
}

/* 画像の自動調整 */
.lab figure img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* テキストコンテンツ (`.main`) */
.lab .main {
  flex: 1;
}

/* 研究テーマ (`h3`) */
.lab h3 {
  font-size: 1.5em;
  color: #333;
  border-left: 5px solid #0056b3;
  padding-left: 10px;
  margin-top: 0;
  margin-bottom: 15px;
}

/* 研究概要 (`p`) */
.lab .main p {
  line-height: 1.8;
  color: #555;
}

/*--------------------------------------------------
  5.2. 教員情報カード (.staff-card)
--------------------------------------------------*/
/* 教員情報のコンテナ */
.staff-card {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 20px 30px;
  background-color: #f7f7f7;
  border-radius: 8px;
  margin-top: 40px;
  max-width: 600px;
}

/* 顔写真のスタイル */
.staff-photo {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #ccc;
  flex-shrink: 0;
}

/* テキスト情報コンテナ */
.staff-details {
  /* スタイルなし */
}

/* 氏名 (.name) */
.name {
  margin: 0;
  font-size: 1.8em;
  font-weight: 700;
  color: #333;
}

/* 職位のスタイル */
.pos {
  font-size: 0.9em;
  font-weight: 500;
  color: #0056b3;
  margin: 0 0 0 !important;
  padding-bottom: 0px;
}

/* ローマ字 (.en) */
.name .en {
  display: block;
  font-size: 0.6em;
  font-weight: normal;
  color: #666;
  margin-top: 5px;
}

/* リンクボタンのコンテナ */
.staff-link-area {
  margin-top: 15px;
  margin-bottom: 0;
}

/* フラットなボタン */
.flat-button {
  display: inline-block;
  padding: 8px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  font-size: 0.85em;
  color: #555;
  text-decoration: none;
  transition: all 0.2s ease;
}

.flat-button:hover {
  background-color: #e0e0e0;
  border-color: #999;
  color: #333;
}

/*--------------------------------------------------
  5.3. 研究室一覧 (.faculty-directory)
--------------------------------------------------*/
/* 全体コンテナ */
.faculty-directory {
  font-family: 'Inter', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  color: #333;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* セクションタイトル */
.faculty-directory h2 {
  font-size: 1.8em;
  font-weight: 700;
  color: #1a4a8b;
  border-bottom: 3px solid #e0e0e0;
  padding-bottom: 10px;
  margin-top: 40px;
  margin-bottom: 25px;
}

/* Flexコンテナ */
.faculty-section {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 20px;
}

/* 教員カード全体 */
.faculty-card {
  flex-basis: calc(50% - 15px);
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  background-color: #fff;
}

.faculty-card a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 20px;
}

/* ホバーエフェクト */
.faculty-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: #007bff;
}

/* 画像スタイル */
.card-photo {
  width: 160px;
  height: 160px;
  object-fit: cover;
  margin-right: 30px;
  flex-shrink: 0;
}

/* 詳細テキストエリア */
.card-details {
  flex-grow: 1;
}

.card-details h3 {
  font-size: 1.3em;
  font-weight: 700;
  margin: 0;
  color: #333;
  line-height: 1.3;
}

.card-details .position {
  font-size: 0.9em;
  font-weight: 500;
  color: #1a4a8b;
  margin-left: 8px;
}

.card-details .en-name {
  font-size: 0.85em;
  color: #777;
  margin: 0 0 10px 0;
}

.card-details .lab-name {
  font-size: 1.1em;
  font-weight: 600;
  color: #1a4a8b;
  margin: 0;
}

/* 役割バッジ */
.faculty-card .card-details .catname {
  margin: 0 0 0 0;
  padding: 2px;
  font-size: 0.7em;
  font-weight: bold;
  position: center;
}

.faculty-card .card-details .catname.director {
  background-color: #dc3545;
  color: #ffffff;
  border-color: #dc3545;
}

.faculty-card .card-details .catname.job-support {
  background-color: #28a745;
  color: #ffffff;
  border-color: #28a745;
}

/*--------------------------------------------------
  5.4. セクションナビゲーション (.section-nav)
--------------------------------------------------*/
.section-nav {
  display: flex;
  margin-bottom: 30px;
  border-bottom: 3px solid #ddd;
}

.nav-item {
  flex: 1;
  text-align: center;
  padding: 15px 0;
  text-decoration: none;
  color: #555;
  background-color: #f0f0f0;
  border-right: 1px solid #ddd;
  font-weight: 600;
  transition: all 0.2s ease;
  font-size: 0.9em;
}

.section-nav .nav-item:last-child {
  border-right: none;
}

.nav-title {
  font-size: 1.1em;
}

/* 個別色の設定 */
.section-nav a[href="#staff01"] {
  border-top: 3px solid #388e3c;
}

.section-nav a[href="#staff01"]:hover {
  background-color: #e8f5e9;
  color: #388e3c;
}

.section-nav a[href="#staff02"] {
  border-top: 3px solid #1976d2;
}

.section-nav a[href="#staff02"]:hover {
  background-color: #e3f2fd;
  color: #1976d2;
}

.section-nav a[href="#staff03"] {
  border-top: 3px solid #7b1fa2;
}

.section-nav a[href="#staff03"]:hover {
  background-color: #f3e5f5;
  color: #7b1fa2;
}

/*================================================================================
  6. 実績・研究関連（achivement）
================================================================================*/

/*--------------------------------------------------
  6.1. ３本柱 (.tech-fields-section)
--------------------------------------------------*/
.tech-fields-section {
  padding: 60px 0;
  background-color: #ffffff;
}

.tech-fields-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 15px;
}

.tech-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: calc(33.333% - 20px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.tech-card-image-placeholder {
  width: 150px;
  height: 150px;
  background-color: #f5f5f5;
  border: 2px dotted #ccc;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  font-size: 48px;
  color: #ccc;
}

.tech-card h2 {
  color: #00ABF0;
  font-size: 24px;
  margin-bottom: 15px;
  font-weight: bold;
}

.tech-card p {
  color: #555;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
}

.tech-card img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  /* object-fit: contain; */
}

/* 関連するカードのテーマカラー */
.hardware-card { border-color: #81c784; }
.hardware-card h3 { background-color: #C8E6C9 !important; }
.hardware-card ul { background-color: #E8F5E9; }

.software-card { border-color: #64b5f6; }
.software-card h3 { background-color: #B2EBF2 !important; }
.software-card ul { background-color: #E3F2FD; }

.network-card { border-color: #ce93d8; }
.network-card h3 { background-color: #E1BEE7 !important; }
.network-card ul { background-color: #F3E5F5; }

.general-card { border-color: #00bcd4; }
.general-card h3 { background-color: #B2EBF2 !important; }
.general-card ul { background-color: #E0F7FA; }

.final-project-card { border-color: #1976d2; }
.final-project-card h3 { background-color: #1976d2; }
.final-project-card ul { background-color: #fff; }

/* 進路比較テーブル */
.course-comparison {
  display: flex;
  gap: 30px;
}

.course-column {
  flex: 1;
}

/* 就職実績リスト */
.grid-list {
  display: grid;
  list-style: none;
  padding: 1px;
  margin: 0;
  background-color: #fcfcfc;
  gap: 3px;
  grid-template-columns: auto;
}

details {
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

details > .grid-list {
  padding: 5px;
}

#job_main h4 {
  margin: 0 0 0 0;
  background-color: #f5f5f5;
}

#job_main img {
  height: auto;
  max-width: 100%;
  display: block;
  margin-left: 10px;
  margin-right: auto;
}

summary {
  font-weight: bold;
  font-size: 1em;
  padding: 8px 12px;
  background-color: #f5f5f5;
  color: #333;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
}

details[open] summary {
  background-color: #e9e9e9;
}

/*--------------------------------------------------
  6.2. 受賞一覧 (.award-container)
--------------------------------------------------*/
/* 全体コンテナ */
.award-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* セクションタイトル */
.recognition-section h2 {
  font-size: 2em;
  font-weight: bold;
  color: #1a4a8b;
  border-bottom: 3px solid #e0e0e0;
  padding-bottom: 10px;
  margin-top: 40px;
  margin-bottom: 25px;
}

/* 受賞名（h4） */
.recognition-section h4 {
  font-size: 1.3em;
  font-weight: 700;
  color: #333;
  background-color: #f7f7f7;
  padding: 10px 15px;
  border-left: 5px solid #00a0e9;
  margin-top: 25px;
  margin-bottom: 5px;
}

/* 学生受賞リスト（dl/dt/dd）*/
.award-list {
  margin: 0 0 20px 0;
  padding: 0;
  list-style: none;
}

.award-list > * {
  display: flex;
  align-items: flex-start;
  padding: 8px 15px;
  border-bottom: 1px dotted #ccc;
}

.award-list dt {
  font-weight: 600;
  color: #555;
  flex-basis: 250px;
  flex-shrink: 0;
  padding-right: 20px;
  background-color: #fcfcfc;
}

.award-list dd {
  flex-grow: 1;
  color: #333;
  padding-left: 20px;
  border-left: 1px solid #eee;
}

/* 活動功労賞リスト（ul/li） */
.activity-list {
  margin: 10px 0 30px 20px;
  padding: 0;
  list-style-type: none;
}

.activity-list li {
  padding: 5px 0;
  border-bottom: 1px dotted #ccc;
  text-indent: -1.5em;
  margin-left: 1.5em;
}

.activity-list li::before {
  content: "・";
  color: #00a0e9;
  font-weight: bold;
  margin-right: 0.5em;
}

/* 教員の表彰・受賞セクション */
.faculty-recognition {
  margin-top: 50px;
}

.faculty-info-with-image {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-bottom: 20px;
}

.faculty-award-photo {
  width: 250px;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  margin-left: 0;
}

.faculty-info-with-image p {
  flex-grow: 1;
  line-height: 1.7;
  margin: 0;
}

.faculty-award-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.faculty-award-list li {
  padding: 8px 10px;
  border-bottom: 1px dotted #ddd;
  line-height: 1.6;
  font-size: 0.95em;
}

.faculty-award-list li:nth-child(even) {
  background-color: #fafafa;
}

/*--------------------------------------------------
  6.3. 研究等プロジェクト (.item-content)
--------------------------------------------------*/
.item-content {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.item-photo {
  flex-shrink: 0;
  width: 300px;
}

.item-photo img {
  max-width: 100%;
  height: auto;
  display: block;
}

.item-text {
  /* スタイルなし */
}

/*================================================================================
  7. レスポンシブ対応（メディアクエリ）
================================================================================*/

/*--------------------------------------------------
  7.1. PC/タブレット横 (max-width: 1200px)
--------------------------------------------------*/
@media only screen and (max-width: 1200px) {
  .yt-slide__bt {
    max-width: 94%;
    width: 100%;
  }
}

/*--------------------------------------------------
  7.2. タブレット縦 (max-width: 1100px)
--------------------------------------------------*/
@media only screen and (max-width: 1100px) {

  /* index */
  .hero-option01 {
    height: 320px;
  }

  .hero__intro-text .__text {
    font-size: 20px;
  }

  .hero__intro-text {
    padding: 0px 5%;
    top: 50%;
  }

  .scroll-down {
    right: 0;
    transform: none;
  }

  .indexNews {
    padding: 0;
  }

  .indexNews:before {
    position: absolute;
    top: 80px;
    bottom: unset;
    left: unset;
    right: 0;
    width: 24%;
    height: calc(100% - 80px);
    background-color: #DDF4FF;
    content: "";
    z-index: -1;
  }

  .indexNews .cont {
    width: 94%;
    margin: 0 auto;
  }

  .indexNews h2 {
    font-size: 22px;
  }

  .indexNewsHead a {
    margin: 0;
  }

  ul.newsList {
    flex-wrap: wrap;
    padding: 0;
  }

  ul.newsList li {
    width: 48%;
    margin: 0 1% 40px;
  }

  .indexLink {
    width: 90%;
    margin: 60px auto 0;
    padding: 0;
  }

  .indexLink ul li h2 {
    font-size: 20px;
  }

  .indexNews:after {
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: 80px;
    background: url(../image/back.png) no-repeat;
    background-size: cover;
    content: "";
    z-index: 1;
  }

  .video__yt {
    margin: 60px 0 0;
  }

  .indexNewsHead {
    padding: 30px 0 0;
  }

  

  .features:before {
    top: -50px;
    left: 0;
    font-size: 36px;
    transform: rotate(0);
  }

  .features ul {
    margin: 0;
  }

  .features ul li div.icon {
    width: 100px;
  }

  .features ul li div.icon img {
    width: 80px;
    height: 80px;
  }

  .features ul li div.text {
    width: calc(100% - 100px);
  }

  #second .features ul li div.text h3 {
    font-size: 20px;
  }

  /* 3本柱 */
  .tech-card {
    width: calc(50% - 15px);
    margin-bottom: 20px;
  }

  .tech-fields-container {
    padding: 0 5%;
  }
}

/*--------------------------------------------------
  7.3. スマートフォン (max-width: 768px)
--------------------------------------------------*/
@media (max-width: 768px) {

  /* intro */
  #second .introLead h2 {
    font-size: 22px;
    line-height: 1.4;
  }

  .introLead:before {
    height: 74px;
  }

  .introLead .introBody {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
  }

  .introLead .introBody p {
    flex-basis: 100%;
    flex-grow: 1;
    flex-shrink: 1;
    margin-top: 0;
  }

  .introLead .introBody figure {
    flex-basis: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0;
    max-width: 100%;
    min-width: 250px;
  }

  .introLead .introBody figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    max-width: 100%;
  }
  
  /* 研究室詳細 */
  .lab {
    flex-direction: column;
    gap: 20px;
  }

  .lab figure {
    flex-basis: auto;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .lab .main {
    width: 100%;
  }

  /* 教員カード */
  .staff-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    max-width: 100%;
  }

  .staff-photo {
    width: 80px;
    height: 80px;
  }

  .staff-details {
    width: 100%;
  }

  .staff-link-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .staff-link-area .flat-button {
    width: 100%;
    text-align: center;
  }

  /* 研究室一覧 */
  .faculty-section {
    gap: 20px;
  }

  .faculty-card {
    flex-basis: 100%;
  }

  .faculty-card a {
    padding: 15px;
    flex-direction: column;
    align-items: flex-start;
  }

  .card-photo {
    width: 100px;
    height: 100px;
    margin-right: 0;
    margin-bottom: 15px;
  }

  /* 3本柱 */
  .tech-card {
    width: 90%;
    margin: 0 auto 20px;
  }

  /* 進路実績リスト */
  .grid-list {
    grid-template-columns: 1fr;
  }

  .course-comparison {
    flex-direction: column;
  }

  /* 受賞リスト */
  .award-list dt {
    flex-basis: 100%;
    padding-bottom: 0;
    border-bottom: none;
    background-color: transparent;
  }
  .award-list dd {
    padding-top: 0;
    padding-left: 15px;
    border-left: none;
  }
  .award-list > * {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 教員受賞情報 */
  .faculty-info-with-image {
    flex-direction: column;
    gap: 15px;
  }

  .faculty-award-photo {
    width: 100%;
  }
}

/*--------------------------------------------------
  9. 専門分野別レイアウト調整 (Flexboxベース)
--------------------------------------------------*/

/* 汎用クラス: subject-area-flex */
.subject-area-flex {
  display: flex; /* 直下の要素 (画像とカードラッパー) を横並びにする */
  flex-wrap: wrap; /* 幅が狭くなったら折り返す */
  gap: 30px; /* 要素間の隙間 */
  align-items: flex-start; /* 縦方向の起点を合わせる */
  margin-top: 20px;
  margin-bottom: 40px;
}

/* 画像コンテナのスタイル (50%幅) */
.subject-area-flex .subject-image {
  flex-basis: calc(50% - 15px); /* 50%幅 - (gapの半分) */
  flex-grow: 1;
  flex-shrink: 0;
}

.subject-area-flex .subject-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  object-fit: cover;
}

/* 科目カードラッパーのスタイル (50%幅) */
.subject-area-flex .subject-cards-wrapper {
  flex-basis: calc(50% - 15px); /* 50%幅 - (gapの半分) */
  flex-grow: 1;
  flex-shrink: 0;
}

/* 既に存在するカードのスタイル調整 (必要に応じて) */
.subject-area-flex .subject-cards-wrapper .subject-card {
  margin-bottom: 15px; /* カード間に隙間を設ける */
  /* 1年次の min-width: 100% を上書きする場合はここに追加 */
}

/*--------------------------------------------------
  7. レスポンシブ対応の拡張
--------------------------------------------------*/


@media only screen and (max-width: 768px) {

  /* subject-area-container の直下要素を縦並び（100%幅）に戻す */
  .subject-area-flex .subject-image,
  .subject-area-flex .subject-cards-wrapper {
    flex-basis: 100%;
    max-width: 100%;
  }
}