/* 明朝 */
.font-serif{
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", 'Noto Serif JP', "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
}
  
/* ゴシック */
.font-gothic{
  font-family: "メイリオ", Meiryo, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif !important;
}

.bold{ font-weight: bold;}

.inner-link ul{
  display: flex;
  justify-content: space-between;
}

.inner-link li{
  flex: 1 1 auto;
  margin-right: 1px;
}
.inner-link li:last-of-type{ margin-right: 0; }

.inner-link li a{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 20px;
  text-decoration: none;
  background-color: #E4F3EE;
  text-align: center;
}

.section-introduction {
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 50px;
}

/* flexbox（PC・スマホ両方に適用したい場合） */
.flexbox{ display: flex; }

/* 画像とテキストを横並びにするコンテンツ（PC・スマホ両方に適用したい場合） */
.image-and-text-wrapper{
  display: flex;
  justify-content: space-between;
}

/* 全パターン共通 */
.image-and-text-wrapper .image img,
.image-and-text-wrapper-pc .image img,
.image-and-text-wrapper-sp .image img { display: block; }

/* 画像左寄せ */
.image-and-text-wrapper.image-left .image{ order: 1; }
.image-and-text-wrapper.image-left .text{ order: 2; }

/* 画像右寄せ */
.image-and-text-wrapper.image-right .text{ order: 1; }
.image-and-text-wrapper.image-right .image{ order: 2; }

/* ボタンbox */
.button-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
}

.button-box .button-box-elem {
  display: flex;
  align-self: stretch;
}

/* 緑の片矢印ボタン 基本 */
.basic-button{ margin: 10px auto; }

.basic-button:hover { opacity: 0.8; }

.basic-button input{ border: none;}

.basic-button a {
  text-decoration: none;
  color: #fff;
  background-color:#008654;
}

.basic-button a:hover,
.basic-button a:link,
.basic-button a:visited { color:#fff;}

/* 緑の片矢印ボタン小 */
.basic-button.basic-button-pt1 a {
  display: inline-block;  
  color: #fff;
  background-color: #008654;
  background-image: url(../img/common/arrow-white.png);
  background-repeat: no-repeat;
  background-position: center right 20px;
}

.button-box .basic-button.basic-button-pt1 a {
  width: 100%;
}

.basic-button.basic-button-pt1 span,
.basic-button.basic-button-pt1 input {
  text-align: center;
  display: block;
  font-weight: bold;
  padding: 10px 20px;
}

/* 緑の片矢印ボタン大 タイトル ＋ キャプション */
.basic-button.basic-button-pt2 a {
  padding: 40px 80px 40px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  height: 100%;
  background-color: #008654;
  background-image: url(../img/common/arrow-white.png);
  background-repeat: no-repeat;
  background-position: center right 20px;
}

.basic-button.basic-button-pt2 a span {
  display: block;
  width: 100%;
}
.basic-button.basic-button-pt2 .title {
  font-size: 2.3rem;
  font-weight: bold;
}
.basic-button.basic-button-pt2 .caption {
  min-height: 5.44rem;
}

/* 薄緑 */
.basic-button.basic-button-pt3 a {
  border: 1px solid  #008654;
  color: #008654;
  background-color: #E4F3EE;
  background-image: url(../img/common/arrow-green.png);
  background-repeat: no-repeat;
  background-position: center right 20px;
}

.button-box .basic-button.basic-button-pt3 a {
  width: 100%;
}

.basic-button.basic-button-pt3 span,
.basic-button.basic-button-pt3 input {
  text-align: center;
  display: block;
  font-weight: bold;
  padding: 10px;
  /* padding: 10px 60px 10px 20px; */
}

/* 大学院生の生活等で使用している、画像を用いたページ内リンク */
ul.image-inner-link,
ul.image-inner-link li{
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.image-inner-link {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;margin-top: 30px;
  margin-bottom: 50px;
  width: 100%;
}

ul.image-inner-link li a{
  display: block;
  /* max-height: 120px; */
  margin-right: 1px;
  margin-bottom: 1px;
  position: relative;
}

ul.image-inner-link li a:hover { opacity: 0.9;}

ul.image-inner-link li > a > img{
  display: block;
  max-height: 100%;
  position: relative;
  z-index: 1;
}

ul.image-inner-link li a .text{
  color: #fff;
  align-items: flex-end;
  display: flex;
  position: absolute;
  font-weight: bold;
  left: 5px;
  bottom: 8px;
  z-index: 2;
}

ul.image-inner-link li a .text p{ margin: 0; }

ul.image-inner-link li a .text .number span{ display: block; }

ul.image-inner-link li a .text .number img{
  display: block;
  height: 60px;
}

ul.image-inner-link li a .text .title{
  line-height: 1.6rem;
  margin-left: 20px;
}

/* 女性研究者の活躍等で使用している角丸のフレーム */
.radius-frame {
  background-color: #ccc;
  border-radius: 12px;
  padding: 20px;
  color: #666666;
  margin-bottom: 20px;
}

.radius-frame > *:first-of-type{ margin-top: 0; }

.radius-frame > *:last-of-type{ margin-bottom: 0; }

/* pt1. 青 */
.radius-frame.radius-frame-pt1{ background: #e0efff; }

/* pt1. ピンク */
.radius-frame.radius-frame-pt2{ background: #ffeff7; }

/* 「脳研究所について」などで使用している、画像つきの下層ページリスト */
.page-image-list{
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto 10px;
}

.page-image-list li{
  background: -moz-linear-gradient(top, #80C2AA, #F2F9F6);
  background: -webkit-linear-gradient(top, #80C2AA, #F2F9F6);
  background: linear-gradient(to bottom, #80C2AA, #F2F9F6);
  list-style: none;
}

.page-image-list a{
  display: block;
  text-decoration: none;
}

.page-image-list a:hover img{ opacity: 0.8; }

.page-image-list h2{
  width: 100%;
  margin-bottom: 0;
  padding: 15px 20px 0;
  border-bottom: 1px solid #008555;
  font-size: 1.8rem;
  color: #008555;
  text-align: left;
}

.page-image-list h2::after{ content: none; }

.page-image-list .list-wrap{ padding: 20px 20px 10px; }

.page-image-list .list-wrap p{ margin-bottom: 0; }
.page-image-list .image{ margin-bottom: 20px; }
/* 英語 */
.english .page-image-list .image{ margin-bottom: 10px; }


.page-image-list .image img{ width: 100%; }

/* インタビュー系のページ用 */
.interview-wrapper > div.keyvisual {
  margin-bottom: 30px;
  position: relative;
}

.interview-wrapper .keyvisual img{
  display: block;
  position: relative;
  z-index: 1;
  margin: auto;
}

.interview-wrapper .keyvisual .text{
  position: absolute;
  display: flex;
  align-items: center;
  z-index: 2;
  left: 50px;
  top: 0;
  bottom: 0;
  /* margin-top: -30px; */
}

.interview-wrapper .keyvisual .text p{
  margin: 0;
  font-weight: bold;
}

.interview-wrapper .keyvisual .text .number span{ display: block; }


.interview-wrapper .title p{
  text-align: center;
  margin: 0;
}

.interview-wrapper .title .sub-title{ font-size: 1.8rem; }

.interview-wrapper .title .main-title{
  font-weight: bold;
  font-size: 3rem;
  line-height: 3.8rem;
}

.interview-wrapper .interview-detail h3{
  border: none;
  border-bottom: 4px solid #008654;
  color: #008654;
  font-size: 2.3rem;
  font-weight: bold;
  margin-bottom: 15px;
  line-height: 3rem;
  padding: 0;
}

.interview-wrapper .interview-detail .image-and-text-wrapper-pc .text > *:last-child{ margin-bottom: 0; }


/* 「研究分野紹介」で使用しているアコーディオン */
main .accordion .toggle-wrap{
  position: relative;
}

main .accordion .toggle-content{
  display: none;
}

main .accordion .toggle-wrap .accordion_icon,
main .accordion .toggle-wrap .accordion_icon span {
  display: inline-block;
  transition: all .3s;
  box-sizing: border-box;
}

main .accordion .toggle-wrap .accordion_icon {
  position: absolute;
}

main .accordion .toggle-wrap .accordion_icon span {
  position: absolute;
  width: 100%;
}

main .accordion .toggle-wrap .accordion_icon span:nth-of-type(1) {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
}

main .accordion .toggle-wrap .accordion_icon span:nth-of-type(2) {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

main .accordion .toggle-wrap .accordion_icon.active span:nth-of-type(1) {
  display: none;
}

main .accordion .toggle-wrap .accordion_icon.active span:nth-of-type(2) {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}

@media screen and (min-width: 769px){
  .pc-only{ display: block;}
  .sp-only{ display: none!important; }

  /* 大学院生の生活等で使用している、画像を用いたページ内リンク */
  ul.image-inner-link li a{ width: 400px; }

  ul.image-inner-link li a .text .number{
    font-size: 1.3rem;
    line-height: 3.45rem;
  }

  ul.image-inner-link li a .text .number span{ font-size: 5.5rem; }

  /* flexbox（PCのみに使用したい場合） */
  .flexbox-pc{ display: flex; }

  /* 画像とテキストを横並びにするコンテンツ（PCのみに適用したい場合） */
  .image-and-text-wrapper-pc{
    display: flex;
    justify-content: space-between;
  }
  
  /* 画像左寄せ */
  .image-and-text-wrapper-pc.image-left .image{ order: 2; }
  .image-and-text-wrapper-pc.image-left .text{ order: 1; }
    
  /* 画像右寄せ */
  .image-and-text-wrapper-pc.image-right .text{ order: 1; }
  .image-and-text-wrapper-pc.image-right .image{ order: 2; }
}

@media screen and (min-width: 1281px){
  /* 1281px以上すべて */

  /* 「脳研究所について」などで使用している、画像つきの下層ページリスト */
  .page-image-list li{
    width: 380px;
    margin: 0 30px 30px 0;
  }
  .page-image-list li:nth-of-type(3n){ margin-right: 0; }

  
  /* インタビュー系のページ用 */
  .interview-wrapper .interview-detail .image-and-text-wrapper-pc,
  .interview-wrapper .interview-detail .text-wrapper { margin-bottom: 50px;}

  .interview-wrapper .image-and-text-wrapper-pc .image,
  .interview-wrapper .image-and-text-wrapper-pc .text{ width: 46.5%; }

  .interview-wrapper .interview-detail .image-and-text-wrapper-pc .text > h3 + p{ margin-bottom: 30px; }
}

@media screen and (max-width: 1280px){
  /* 1280px以下すべて */
  /* ボタンbox */
  .button-box .button-box-elem { margin:0 auto 10px; }
  
  /* インタビュー系のページ用 */
  .interview-wrapper:not(:first-of-type) { margin-top: 80px;}
  .interview-wrapper .keyvisual > img{ width: 82%; }

  .interview-wrapper .image-and-text-wrapper-pc .image,
  .interview-wrapper .image-and-text-wrapper-pc .text{ width: 100%; }
  
  /* 画像左寄せ */
  .interview-wrapper .image-and-text-wrapper-pc.image-left .image{ order: 2; }
  .interview-wrapper .image-and-text-wrapper-pc.image-left .text{ order: 1; }
  
  /* 画像右寄せ */
  .interview-wrapper .image-and-text-wrapper-pc.image-right .text{ order: 1; }
  .interview-wrapper .image-and-text-wrapper-pc.image-right .image{ order: 2; }

}

@media screen and (min-width: 769px) and (max-width: 1280px){
  /* 769px～1280px */
  /* ボタンbox */
  .button-box { width: 80%; }
  .button-box .button-box-elem{ width: 100%;}

  /* 「脳研究所について」などで使用している、画像つきの下層ページリスト */
  .page-image-list li{
    width: 46%;
    margin: 0 1.5% 20px;
  }
  
  /* インタビュー系のページ用 */
  .interview-wrapper .image-and-text-wrapper-pc .image,
  .interview-wrapper .image-and-text-wrapper-pc .text,
  .interview-wrapper .interview-detail .image-and-text-wrapper-pc .text > p{ margin-bottom: 50px; }
  
  .interview-wrapper .image-and-text-wrapper-pc { flex-wrap: wrap;}

  .interview-wrapper .image-and-text-wrapper-pc .image { text-align: center; }
}

@media screen and (max-width: 1000px) {
  .interview-wrapper .title .main-title{
    font-size: 2.31rem;
  }
}

@media screen and (max-width: 768px) {
  /* 768px以下すべて */
  .pc-only{ display: none!important;}
  .sp-only{ display: block; }

  /* 大学院生の生活等で使用している、画像を用いたページ内リンク */
  ul.image-inner-link li a{ width: 100%; }

  ul.image-inner-link li a .text .number{
    font-size: 1.1rem;
    line-height: 3.2rem;
  }

  ul.image-inner-link li a .text .number span{ font-size: 4.5rem; }

  /* ボタンbox */
  .button-box { flex-direction: column; }
  .button-box .button-box-elem{ width: 100%;}

  /* flexbox（スマホのみに使用したい場合） */
  .flexbox-sp{ display: flex; }

  /* 1060px以下、スマホ共通 */
  .section-introduction {
    text-align: left;
  }

  /* 画像とテキストを横並びにするコンテンツ（スマホのみに適用したい場合） */
  .image-and-text-wrapper-sp{
    display: flex;
    justify-content: space-between;
  }

  /* 画像左寄せ */
  .image-and-text-wrapper-sp.image-left .image{ order: 1; }
  .image-and-text-wrapper-sp.image-left .text{ order: 2; }

  /* 画像右寄せ */
  .image-and-text-wrapper-sp.image-right .text{ order: 1; }
  .image-and-text-wrapper-sp.image-right .image{ order: 2; }

  .image-and-text-wrapper-pc .image{
    margin-bottom: 25px;
  }

  .image-and-text-wrapper-pc .image img{
    margin-left: auto;
    margin-right: auto;
   }
   
  /* 「脳研究所について」などで使用している、画像つきの下層ページリスト */
  .page-image-list{ flex-direction: column; }

  .page-image-list li{
    min-width: inherit;
    width: 100%;
    margin: 0 0 30px;
  }

  .page-image-list h2{ padding: 10px 10px 0; }

  .page-image-list .list-wrap{ padding: 20px 10px; }

  /* 英語 */  
  .english .page-image-list .image{ margin-bottom: 0; }
  
  /* インタビュー系のページ用 */
  .interview-wrapper > div { margin-bottom: 90px; }
  .interview-wrapper .schedule h2{ margin-bottom: 100px; }

  .interview-wrapper > div { margin-bottom: 30px; }

  .interview-wrapper > div.schedule { margin-bottom: 80px; }

  .interview-wrapper .keyvisual > img{ width: 100%; }

  .interview-wrapper .keyvisual .text img{ height: 50px;}

  .interview-wrapper .keyvisual .text{
    left: -10px;
    top: 0;
    bottom: 0;
    margin-top: -10px;
  }

  .interview-wrapper .keyvisual .text .number{
    font-size: 1.6rem;
    line-height: 3.2rem;
    letter-spacing: -0.2rem;
  }

  .interview-wrapper .keyvisual .text .number span{ font-size: 5rem; }
  
  .interview-wrapper .image-and-text-wrapper-pc .image,
  .interview-wrapper .image-and-text-wrapper-pc .text,
  .interview-wrapper .interview-detail .image-and-text-wrapper-pc .text > p{ margin-bottom: 30px; }

}