@charset "utf-8";
*{box-sizing:border-box}
a.btn_03 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
  background: #228bc8;
  border: 1px solid #228bc8;
  border-radius: 30px;
  box-sizing: border-box;
  padding: 0 45px 0 25px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
  width:12em;
}
a.btn_03:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -6px;
}
a.btn_03:hover {
  background: #fff;
  color: #228bc8;
}
a.btn_03:hover:before {
  border-top: 2px solid #228bc8;
  border-right: 2px solid #228bc8;
}

.hover-link {
  color: #333;
  font-size: 18px;
  text-decoration: none;
  transition: color 0.3s;
  padding:0.5em 1.0em;
}
.hover-link a{border-radius: 20px;}

/* リンクにマウスが乗った時は文字色を変える（お好みで） */
.hover-link:hover {
  color: #fff;
  background: #b4d1f0;
  border-radius;8px;
}

/* 画像を表示するエリアのサイズ */
.image-preview {
  position: relative;
  width: 37%;
  height: 675px;
  overflow: hidden;
  max-width: 550px;
  max-height: 743px;
}
  
.fixed-top-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

/* 画像自体のサイズ調整（必要に応じて） */
.fixed-top-image img {
  width: 100%;
  height: auto;
  display: block;
}


/* 画像の共通設定 */
.preview-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 最初はすべて透明にして隠しておく */
  opacity: 0;
  /* 0.4秒かけてふわっと切り替える */
  transition: opacity 0.4s ease;
  border:1px solid #ccc;
  border-radius:6px;
}

/* 「active」というクラスがついた画像だけを表示する */
.preview-img.active {opacity: 1;}  
.professor_img_wrapper{justify-content: space-between;}
.gakka_btn_wrapper{display:flex; margin:2em auto; gap:2em;justify-content: center;}

.name_wrapper{width: 60%;}
dl.professor_name dt{color:#039; font-weight:500; }
dl.professor_name {display: flex; flex-wrap:wrap; width:100%; box-sizing: border-box; gap:0em; padding:1em 2em 0 2em;}
dl.professor_name dt{font-size: 110%; width:30%; border-bottom:1px solid #ccc; padding:0.5em 0;}
dl.professor_name dd{font-size: 110%; width:70%; border-bottom:1px solid #ccc; padding:0.5em 0;}
dl.professor_name dd a{border-radius:8px; padding:0.5em 1.0em;}
.professor_name2_wrapper{display:flex; flex-wrap:wrap;}
ul.professor_name2 li{font-size:105%; padding:0.5em 0 ; white-space: pre-wrap; word-break: keep-all;}
ul.professor_name2 li a{border-radius:8px;}
ul.professor_name2{margin:0 auto; width:13em;}
ul.professor_name2 li.title{padding-left:0.5em; margin:0.3em 0 0.5em; font-size:110%; display:block; font-weight:500; background:#84a8cf; color: #fff; border-radius:4px; }

a.btn_research {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  position: relative;
  background: #228bc8;
  border: 1px solid #228bc8;
  border-radius: 30px;
  box-sizing: border-box;
  padding: 0 45px 0 25px;
  color: #fff;
  font-size: 110%;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
  width:25em;
}
#btn_research{margin:3em 0 1em;}
a.btn_research:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -6px;
}
a.btn_research:hover {
  background: #fff;
  color: #228bc8;
}
a.btn_research:hover:before {
  border-top: 2px solid #228bc8;
  border-right: 2px solid #228bc8;
}

h2{margin:1em 0;}

  
.main-image img {
  width: 500px;
  height: 675px;
  object-fit: cover;
  /* 画像が変わったときにふわっとさせる */
  transition: opacity 0.3s ease;
}

/* 一瞬だけ透明にするためのクラス（JSで使います） */
.fade-out {
  opacity: 0;
}

h3{margin:0em 0 2em;}
.professor_data{display:flex; justify-content: space-between;}
.prefessor_data_yomi{display:flex; gap:1em;}
.main_img{ width:37%;}
.main_img img{border:1px solid #ccc; border-radius:6px;}
.prefessor_data_txt{width: 58%;}
dl.kojin_title{display:flex; flex-wrap:wrap; border-top:1px dotted #ccc; margin:0 0 1em;}
dl.kojin_title dt{width:10%; border-bottom:1px dotted #ccc; padding:0.5em;}
dl.kojin_title dd{width:90%; border-bottom:1px dotted #ccc; padding:0.5em;}

.text_just{text-align: justify; text-justify:inter-ideograph;}

ol.professor_ol_list li{margin: 0 0 1em;}

ul.professor_list{list-style: disc; margin:1em 0 1em 1.5em;}
ul.professor_list li{margin-bottom:0.5em;}

@media screen and (max-width: 959px) {
  .professor_img_wrapper{justify-content: center; flex-direction: column;}
  .image-preview { width: 100%;overflow: hidden;}
  .hover-link {font-size:100%; transition: color 0.3s; padding:0.5em 0;}
  .name_wrapper{width: 100%;}
  dl.professor_name {display: block; flex-wrap:wrap; width:100%; box-sizing: border-box; gap:0em; padding:1em 2em 0 2em;}
  dl.professor_name dt{width:100%;}
  dl.professor_name dd{width:100%;}
  dl.professor_name dd a{border-radius:8px;}
  .professor_name2_wrapper{flex-direction: column;}
  ul.professor_name2 li a{padding:0.5em 1.0em ;}
  .gakka_btn_wrapper{flex-direction: column; gap:1em;}
  a.btn_03{width:100%;}
  .professor_data{display:flex; justify-content: center; flex-direction: column;}
  .main_img{ width:75%; margin:0 auto;}
  .prefessor_data_txt{width: 100%;}
  dl.kojin_title{display:flex; flex-wrap:wrap; border-top:1px dotted #ccc; flex-direction: column;}
  dl.kojin_title dt{width:100%; font-weight: bold;}
  dl.kojin_title dd{width:100%;}
  #btn_research{margin:2em auto;}
  a.btn_research {font-size: 90%; width:90%;}
}