@charset "UTF-8";
/* CSS Document */

/* 全体 */
* {
  box-sizing: border-box;
}

/* body */
body {
  font-size: 16px;
  line-height: 1.5;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 400;
  color: #012E5A;
  background-color: #fff;
}

/* 初期スタイル */
h1,
h2,
h3 {
  margin-top: 0;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-align: center;
}

h2 {
    margin-top: 17px;
    font-size: 1.5em;
}

h3 {
  color: #85a7cc;
  font-size: 1.2em;
  margin-top: 13px;
  margin-bottom: 20px;
}

h4 {
    font-size: 1.2rem;
    color: #14B0C5;
    border-bottom: solid 3px #DBDBDB;
    position: relative;
    line-height: 1.5;
    margin-bottom: 10px;
}

h4:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #D85BAA;
  bottom: -3px;
  width: 7%;
}

h5 {
    font-size: 1rem;
    color: #85a7cc;
    position: relative;
    line-height: 2.;
    margin-bottom: 1px;
}


p {
  margin-top: 0;
  margin-bottom: 1.5em;
  text-align: justify;
}


address {
  font-style: normal;
}

a {
  color: #012E5A;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #D85BAA;
  text-decoration: none;
}

ul {
  margin: 1em 0;
  padding: 0;
  list-style: none;
}

img {
  width: 100%;
  max-width: 1200px;
  height: auto;
}

    
section {
  padding: 20px 0;
}

/* ここまで */


/* テキスト */
.txt-center {
  text-align: center;
}

.txt-lead {
  font-weight: 700;
}

/*ボタン関連*/
.btn {
  display: block;
  padding: 20px 35px;
  border-radius: 8px;
  margin: 0 auto;
  border: none;
}

.btn:hover,
.btn:focus {
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

/*ページ移動ボタン*/
.btn-page {
  color: #14B0C5;
  background: #DBDBDB;
}

.btn-page:hover {
  background: #14B0C5;
  color: white;
}


/*レイアウト*/
.inner {
  padding: 0 25px;
  margin: 0 auto;
}

@media screen and (min-width:768px) {
  .inner {
    max-width: 1200px;
  }
}

.sp-only {
  display: block;
}

.pc-only {
  display: none;
}

@media screen and (min-width:768px) {
  .sp-only {
    display: none;
  }

  .pc-only {
    display: block;
  }
}

/* ここまで */

/* ヘッダー */

.header {
  position: fixed;
  top: 0px;
  width: 100%;
  padding: 10px;
  background: rgba(255, 255, 255, 0.9);
  z-index: 200;
}

.header-logo-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/*ロゴ*/
.logo-area {
  width: 200px;
  margin: 0;
  text-align: left;
}

@media screen and (min-width:768px) {
  .logo-area {
    width: 250px;
  }
}

/*ハンバーガーメニュー*/
.gnav-toggle {
  position: relative;
  margin-top: 12px;
}


/*チェックボックス非表示*/
.gnav-hidden {
  display: none;
}

/*アイコンの範囲*/
#gnav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガー再現*/
#gnav-open span,
#gnav-open span::before,
#gnav-open span::after {
  content: '';
  position: absolute;
  height: 3px;
  /*線の太さ*/
  width: 25px;
  /*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  cursor: pointer;
}

#gnav-open span::before {
  bottom: -8px;
}

#gnav-open span::after {
  bottom: -16px;
}

/*閉じる部分*/
#gnav-close {
  display: none;
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #012E5A;
  opacity: 0;
  transition: 0.3s ease-in-out;
}

/*チェックがついたら表示させる*/
#gnav-input:checked ~ #gnav-close {
  display: block;
  opacity: 0.5;
}

#gnav-input:checked ~ #gnav-content {
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
}

/*メニューの中身*/
#gnav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 70%;
  max-width: 300px;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  transition: 0.3s ease-in-out;
  transform: translateX(-105%);
}

.gnav-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
  text-transform: uppercase;
}


.gnav-item {
  border-bottom: 2px dotted #eee;
  margin: 10px;
  padding-bottom: 20px;
}

.gnav-item a {
  color: #fff;
  font-size: 12px;
  display: block;
  width: 200px;
  text-align: center;
}

.gnav-item a::first-line {
  font-size: 16px;
  font-weight: bold;
}

@media screen and (min-width:768px) {
  .gnav-menu {
    flex-direction: row;
    padding-top: 15px;
    margin: 0;
  }

  .gnav-item {
    border-bottom: none;
    margin: 0;
    padding-bottom: 0;
  }

  .gnav-item a {
    color: #333;
    width: 120px;
  }

  .gnav-item a:hover {
    color: #D85BAA;
  }

}

/*-------------------------------------------
　メイン
-------------------------------------------*/
/* もとの .mv-area から background-image を一旦削除 */
.mv-area {
  width: 100%;
  margin:0 auto;
  height: 40vh;
  background-size: cover;
  background-position: center 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden; /* はみ出し防止 */
}

@media screen and (min-width:768px) {
  .mv-area {
    height: 600px;
  }
}

/* スライド用の共通スタイル */
.mv-area::before,
.mv-area::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  opacity: 0;
  animation: fadeSlide 24s infinite ease-in-out;
}

/* 1枚目 */
.mv-area::before {
  background-image: url("../images/top-image1.jpg");
}

/* 2枚目 */
.mv-area::after {
  background-image: url("../images/top-image2.jpg");
  animation-delay: 12s;  /* 24秒周期のうち後ろ半分に表示 */
}

/* なめらかなフェードアニメーション */
@keyframes fadeSlide {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  45%  { opacity: 1; }
  55%  { opacity: 0; }
  100% { opacity: 0; }
}

/* タイトルは前面に表示 */
.top-title,
.top-title-en {
  z-index: 10;   /* 画像より前面に */
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
}

.top-title { top: 58%; }
.top-title-en { top: 58%; }

@media screen and (min-width:768px) {
  .top-title {
    top: 54%;
    max-width: 800px;
  }
  .top-title-en {
    top: 58%;
    max-width: 1100px;
  }
}

/*もともとのコード*/
/*
.mv-area {
  width: 100%;
  margin:0 auto;
  height: 40vh;
  background-image:url("../images/top-image.jpg");
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}


@media screen and (min-width:768px) {
  .mv-area {
    width: 100%;
    height: 600px;
  }

}



.top-title {
    z-index: 100;
    position: absolute;
    top: 58%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width:80%
}


@media screen and (min-width:768px) {
.top-title {
    top: 54%;
    max-width: 800px;
}
 }

.top-title-en {
    z-index: 100;
    position: absolute;
    top: 58%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width:80%
}


@media screen and (min-width:768px) {
.top-title-en {
    top: 58%;
    max-width: 1100px;
}
}
*/

/*-------------------------------------------
　最初の文
-------------------------------------------*/
.info-area {
  background-color: white;
}

.info-txt {
  
}

/*-------------------------------------------
お知らせ
-------------------------------------------*/
.oshirase {
  -webkit-overflow-scrolling: touch;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  display: -webkit-box;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  max-width: 1500px;
  height: 13em;
  margin: 0 auto;
  overflow-y: scroll
}

@media (min-width:768px) {
  .oshirase {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap
  }
}

.oshirase dd,
.oshirase dt {
  box-sizing: border-box;
  width: 100%;
  padding-bottom: .5em;
  padding-left: .5em
}

.oshirase dt {
  font-style: normal;
  font-weight: initial
}

@media (min-width:768px) {
  .oshirase dt {
    width: 12.5em;
    margin-bottom: .5em;
    border-bottom: 1px dotted #343a40
  }
}

.oshirase dt:first-of-type {
  padding-top: .5em;
  border-top: 1px dotted #343a40
}

.oshirase dt time {
  margin-right: .13em
}

.oshirase dt span {
  box-sizing: border-box;
  display: inline-block;
  width: 7em;
  margin-right: .7em;
  padding: 0 .5em;
  color: #fff;
  font-size: .8em;
  line-height: 1.75;
  text-align: center
}

.oshirase-os {
    background-color: #14B0C5;
}

.oshirase-ha {
    background-color: #3DCB92;
}

.oshirase-zyu {
    background-color: #E9589A;
}

.oshirase time {
  color: #adb5bd
}

.oshirase dd {
  margin-left: 0;
  margin-bottom: .5em;
  border-bottom: 1px dotted #343a40
}

@media (min-width:768px) {
  .oshirase dd {
    width: calc(100% - 12.5em)
  }
  .oshirase dd:first-of-type {
    padding-top: .5em;
    border-top: 1px dotted #343a40
  }
}

.oshirase dd:nth-of-type(-n+3) {
  position: relative
}

/*-------------------------------------------
　研究紹介
-------------------------------------------*/
.research-area {
  width: 100%;
  margin:0 auto;
  height: 40vh;
  background-image:url("../images/research-image.jpg");
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


@media screen and (min-width:768px) {
  .research-area {
    width: 100%;
    height: 600px;
  }
}

/*-------------------------------------------
　研究成果
-------------------------------------------*/
.labp-area {
  width: 100%;
  margin:0 auto;
  height: 40vh;
  background-image:url("../images/paper-list-image.jpg");
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


@media screen and (min-width:768px) {
  .labp-area {
    width: 100%;
      height: 600px;
    }
      
  .info-img {
    max-width: 600px;
  }
}

.list-number-lab ol  {
   counter-reset: item;
  list-style-type: none;
    padding-left: 50px;
}
.list-number-lab  li {
    padding-left: 20px;
    padding-top: 10px;
 
}

/*-------------------------------------------
　教員紹介
-------------------------------------------*/
.staff-area {
  width: 100%;
  height: 40vh;
  background-image:url("../images/koshiji-image.jpg");
  background-size: cover;
  background-position: center 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


@media screen and (min-width:768px) {
  .staff-area {
    width: 100%;
    height: 600px;
  }
}


/* timeline */

.timeline {
  list-style: none;
}
.timeline li {
  margin-bottom: 1px;
}
.timeline-content {
  margin-top: -1rem;
}
.timeline span.midashi{
  font-weight:500;
  font-size:120%;
  color: #fdc44f;
}
ul.timeline li::before {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  transform: scale(1.0);
  font-weight: bold;
  color: #14B0C5;
  font-size:50%;
}
@media ( min-width : 640px ){
  .timeline li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .timeline-date {
    width: 200px;
    margin-top: -19px;
    margin-left: 15px;
    font-size:80%;
  }
  .timeline-content {
    width: auto;
    float: left;
    border-left: 2px #DBDBDB solid;
    padding-left: 12px;
  }
}  /* これを追加 */

/*-------------------------------------------
　研究業績リスト
-------------------------------------------*/

.staffp-area {
  width: 100%;
  height: 40vh;
  background-image:url("../images/koshiji-paper-list-image.jpg");
  background-size: cover;
  background-position: center 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/*
.staffp-area {
  width: 100%;
  margin:0 auto;
  height: 40vh;
  background-image:url("../images/koshiji-paper-list-image.jpg");
  background-size: cover;
  background-position: center 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
*/


@media screen and (min-width:768px) {
  .staffp-area {
    width: 100%;
    height: 600px;
  }
}


.zyusyou-color {
  color:#D85BAA;
}
    
    
/*-------------------------------------------
　リストNo.について
-------------------------------------------*/    
    ol.list-number li  {
        list-style-type:none;
        counter-increment: cnt;
        text-indent:0em;
      margin-left:2.2em;
        }
    
    ol.list-number li  {
        list-style-type:none;
        text-indent:0em;
        }
    
    ol.list-number li:before  {
        display: marker;
        content: "("counter(cnt) ")";
        margin-left:-1.5em;
        display:inline-block;
        } 
    
    @media screen and (min-width:768px) {
        
     ol.list-number li  {
        list-style-position: inside;
        }
       
}

/*-------------------------------------------
　メンバー紹介
-------------------------------------------*/

.mem-area {
  width: 100%;
  height: 40vh;
  background-image:url("../images/member-image.jpg");
  background-size: cover;
  background-position: center 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
/*
.mem-area {
  width: 100%;
  margin:0 auto;
  height: 40vh;
  background-image:url("../images/koshiji-image.jpg");
  background-size: cover;
  background-position: center 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}
*/
@media screen and (min-width:768px) {
  .mem-area {
    width: 100%;
    height: 600px;
  }
}

/*-------------------------------------------
　フッター
-------------------------------------------*/

.footer {
  color: white;
  font-size: 12px;
  text-align: center;
  display: inline-block;
  width: 100%;
  padding: 10px;
  background-color: #012E5A;
}

.footer p {
    text-align: center;
    font-weight: 500;
    color: white;
}