@charset "UTF-8";
/* CSS Document */
/* ---------------------------------------------------------
 #メインフレーム初期設定
--------------------------------------------------------- */
.pcView div#PagetitlePane { padding: 0; margin: 0; }
.pcView div#PagetitlePane { height: calc(100svh - 168px); position:relative;}
.pcView div#mainBody { width: 100%;}
.pcView div.ContentPane { width: 100%; margin: 0; padding: 0;  background: linear-gradient(180deg, #f9f8f6, #fff);　-webkit-font-smoothing: antialiased;}
.pcView div.ContentPane .contents { width: 1000px; box-sizing: content-box; margin: 0 auto; padding: 0px 0 0;　-webkit-font-smoothing: antialiased;}

/* ---------------------------------------------------------
 #視差スクロール用ロック
--------------------------------------------------------- */
.pcView div#PagetitlePane.lock  {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: -1;
}

/* ---------------------------------------------------------
 #パンくずリストの処理
--------------------------------------------------------- */
.pcView .breadcrumbs {
  display: none;
}

/* ---------------------------------------------------------
 #タイトルイメージモーション
--------------------------------------------------------- */
.pcView div#PagetitlePane {
  background: url('/Portals/0/tsukuba/pr/koukai/2024/img/cover.jpg') no-repeat center 20% / cover !important;
  animation: fadein 1s ease-out forwards;
}

@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}

/* ---------------------------------------------------------
 #h1
--------------------------------------------------------- */
.pcView div.h1-wrapper {
  width: 1000px;
  max-height: 100%;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
}

div#PagetitlePane h1 {
  background: none !important;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  padding: 0;
  margin: 0;
  line-height: 100%;
  min-height: 100%;
}

.pcView .sp_title {
  display: none;
}

/* ---------------------------------------------------------
 #リード文
--------------------------------------------------------- */
section.leadsentence {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pcView section.leadsentence {
  margin: 0;
  padding: 0;
  width: 1000px;
}

.pcView section.leadsentence img {
  max-width: 998px;
  height: auto;
}

/* ---------------------------------------------------------
 #研究者カード
--------------------------------------------------------- */
.pcView section.photoarea {
  margin-bottom: 40px;
}

.researcher li img {
  object-fit: cover;
}

.researcher {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pcView .researcher {
  max-width: 1000px;
}

.researcher li {
  list-style: none;
  position: relative;
  padding: 0;
}

.pcView .researcher li {
  background-color: #fff;
  width: calc((100% - 2px / 4));
  border-bottom: 1px solid #f2f1f0;
  border-radius: 2px;
  transition: .4s;
  margin: 0;
}

.pcView .researcher li:hover {
  transition: .4s;
}

.pcView .researcher li:first-of-type {
  border-left: 1px solid #f2f1f0;
  border-radius: 2px;
}

.pcView .researcher li:last-of-type {
  border-right: 1px solid #f2f1f0;
  border-radius: 2px;
}

.researcher li a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.researcher li a:hover {
  cursor: pointer;
}

.researcher li h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-feature-settings: "palt";
  background: none !important;
  text-align: center;
  margin: 0;
  padding: 10px 5px 20px;
}

.pcView .researcher li h3 {
  font-size: 1.64rem;
  line-height: 1.575;
  padding: 10px 5px 20px;
  color: #e9538e;
}

.researcher li:hover h3 {
  opacity: 0.75;
  transition: .4s;
}

.researcher li:hover p {
  opacity: 0.75;
  transition: .4s;
}

.researcher li section {
  margin: 0;
  padding: 15px 0 20px;
}

.researcher li figure {
  margin-inline: auto;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
}

.pcView .researcher li figure {
  width: min(100%, 250px);
  background-color: #e9538e;
}

.researcher li figure img.number,
.researcher li figure img.number_bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 23%;
  height: auto;
  z-index: 1;
}

.pcView .researcher li figure img.number,
.pcView .researcher li figure img.number_bg {
  max-width: 55px;
}

.researcher li figure img.number_bg {
  mix-blend-mode: multiply;
}

.researcher li:hover figure img:last-of-type {
  transition: .4s;
  transform: scale(1.08);
}

.pcView .researcher li figure img:last-of-type {
  width: 100%;
  height: auto;
  transition: transform .4s ease;
}

.researcher li figure::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #eb6d9a, #e9538e); 
  bottom: 0px;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .4s;
}

.researcher li:hover figure::after {
  transform: scale(1, 1);
}

.pcView .researcher section p {
  padding: 0 20px;
}

.pcView .researcher li .sp_h3 {
  display: none;
}

/* ---------------------------------------------------------
 #研究者詳細コンテンツ
--------------------------------------------------------- */
.pcView .profile {
  margin:0 0 40px;
}

.pcView .profile img.profile_title {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

.pcView .profile {
  background-color: #fff;
  border: 1px solid #f2f1f0;
  border-radius: 2px;
}

.profile a img {
  transition: opacity 0.4s ease-in-out;
}

.profile a img:hover {
  opacity: 0.7;
  filter: alpha(opacity = 70);
}

.pcView .profile article {
  position: relative;
  background-color: #fff;
  padding: 0 45px 10px;
  z-index: 1!important;
}

.profile article::after {
  content:'';
  display: block; 
  clear:both;
}

.profile h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-feature-settings: "palt";
  background: none !important;
  margin: 0;
  color: #e9538e;
}

.pcView .profile h3 {
  font-size: 2rem;
  line-height: 1.625;
  padding: 45px 0 15px;
}

.profile h3:not(:first-of-type) {
  display: inline-block;
  padding: 15px 0 15px;
}

.pcView .profile p {
  font-size: 1.6rem;
  line-height: 1.625;
  text-indent: 1em;
}

.inline_photo {
  float: right;
  clear: both;
  margin: .4em 0 1em 2em;
}

.inline_photo img {
  max-width: 250px;
  height: auto;
}

.profile figure {
  display: table;
  text-align: center;
}

.pcView .profile figure {
  margin: 35px auto;
}

.pcView .profile figure {
  max-width: 500px;
  height: auto;
  margin: 35px auto;
}

.profile figure img, figure iframe, figure video {
  margin-bottom: 10px;
}

.pcView .profile figure img {
  max-width: 500px;
  height: auto;
}

.pcView .profile figure.wide img {
  max-width: 800px;
  height: auto;
}

.pcView .profile figure.narrow img {
  max-width: 400px;
  height: auto;
}

.pcView .profile figure.recruit {
  margin: 35px auto 50px;
}

.pcView .profile figure.recruit img {
  max-width: 300px;
  margin: 0;
}

.profile figcaption {
  display: table-caption;
  caption-side: bottom;
  width: fit-content;
  margin: 0 auto;
  font-size: 1.2rem;
  padding: 0 .1rem;
  text-align: left;
  max-width: 500px;
}

.pcView .profile figure.wide figcaption {
  max-width: 800px;
}

.pcView .profile figure.narrow figcaption {
  max-width: 400px;
}

.profile .join {
  text-indent: 2em;
  display: inline-block;
}

/* ---------------------------------------------------------
 #研究者プロフィール
--------------------------------------------------------- */
.profile_area {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: #eee solid 1px;
}

.pcView .profile_area {
  margin: 40px 0 30px;
  padding: 30px 0 0;
}

.profile_area .photo img {
	height: auto;
  border-radius: 100%;
}

.pcView .profile_area .photo img {
	max-width: 160px;
  margin-right: 25px;
}

.profile_area .profile_group {
  padding: 0;
  margin: 10px 0;
  max-width: 600px;
}

.profile_group p {
  text-indent: 0 !important;
  font-size: 1.5rem;
  line-height: 1.625;
  padding: 0;
}

.profile_group p.name {
  font-size: 1.4rem;
}

.profile_group p.name span {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-feature-settings: "palt";
  padding-right: 5px;
  font-size: 2.7rem;
}

.pcView .profile_group p.name span {
  font-size: 2.7rem;
}

.profile_group ul { 
  padding: 10px 0 0;
}

.profile_group li { 
  font-size: 1.4rem;
  padding: 0;
}

.profile_group li { 
  text-indent: -5em;
  padding-left: 5em;
}

/* ---------------------------------------------------------
 #ニコニコ生放送
--------------------------------------------------------- */
.nico {
  box-sizing: content-box;
  margin: 50px 0 35px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.nico a img {
  transition: opacity 0.4s ease-in-out;
}

.nico a img:hover {
  opacity: 0.7;
  filter: alpha(opacity = 70);
}

.nico .banner {
  margin: 0 auto;
  padding: 0;
}

.nico h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-feature-settings: "palt";
  background: none !important;
  margin: 0;
  color: #e9538e;
}

.nico figure {
  display: table;
  text-align: center;
}

.nico figure img, figure iframe, figure video {
  margin-bottom: 10px;
}

.nico figcaption {
  display: table-caption;
  caption-side: bottom;
  width: fit-content;
  margin: 0 auto;
  font-size: 1.2rem;
  padding: 0 0.6rem;
  text-align: left;
}

.pcView .nico {
    margin: 40px 0 0;
}

.pcView .nico figcaption {
  padding: 0 0.6rem;
}

.pcView .nico .banner {
  max-width: 1000px;
  height: auto;
}

.pcView .nico .specifics {
  padding: 10px .1em 0;
}

.pcView .nico p {
  font-size: 1.6rem;
  line-height: 1.625;
}

.pcView .nico h3 {
  font-size: 2rem;
  line-height: 1.625;
  padding: 0 0 15px; 
}

/* ---------------------------------------------------------
 #モバイル表示
--------------------------------------------------------- */
/* ---------------------------------------------------------
 #メインフレーム初期設定
--------------------------------------------------------- */
.spView div#PagetitlePane + .ContentPane {
    padding-top: 0!important;
}

.spView div#PagetitlePane h1 {
    margin: -8px 0 0!important;
}

.spView div#mainBody {
    width: 100%!important;
}

.spView .breadcrumbs {
    width: 87%;
}

/* ---------------------------------------------------------
 #h1
--------------------------------------------------------- */
.spView .sp_title {
  display: block;
  margin: -20px 0 0;
  text-align: center;
}

/* ---------------------------------------------------------
 #リード文
--------------------------------------------------------- */
.spView section.leadsentence {
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------
 #研究者カード
--------------------------------------------------------- */
.spView .researcher {
  max-width: 100%;
  flex-direction: column;
}

.spView .researcher li {
  width: 100%;
  margin: 0 0 15px;
}

.spView .researcher li h3 {
  display: none;
}

.spView .researcher li figure {
  width: 100%;
  max-height: 100svh;
}

.spView section.photoarea {
  margin-bottom: 0;
}

.spView .researcher li figure img.number,
.spView .researcher li figure img.number_bg {
  max-width: 68px;
}

.spView .researcher section p {
  font-size: 1.5rem;
  padding: 0 25px;
}

.spView .researcher li .sp_h3 {
  position: absolute;
  display: block;
  font-size: 2.2rem;
  line-height: 1.475;
  color: #fff;
  padding: 10px 0 20px;
  bottom: 0;
  width: 100%;
  padding: 80px 10px 25px;
  background: linear-gradient(0deg, rgba(35, 20, 35, 0.8), rgba(35, 20, 35, 0));
}

@media screen and (orientation: landscape) {
	.spView .researcher li .sp_h3 {
    display: none;
  }
  
  .spView .researcher li h3 {
    font-size: 2rem;
    line-height: 1.628;
    display: block;
    color: #e9538e;
  }

  .spView .researcher li h3 br {
    display: none;
  }
}

/* ---------------------------------------------------------
 #研究者詳細コンテンツ
--------------------------------------------------------- */
.spView .profile {
  margin:0 0 50px;
}

.spView .profile:before {
  content: "";
  display: block;
  height: 100px;
  margin-top: -100px;
  visibility: hidden;
}

.spView .profile p {
  font-size: 1.5rem;
}

.spView .profile article {
  padding: 0 25px;
}

.spView .profile h3:first-of-type {
  padding: 30px 0 15px;
}

.spView .profile h3 {
  font-size: 1.7rem;
  line-height: 1.3em;
  padding: 15px 0 15px;
}

.spView .profile figure {
  margin: 25px auto;
}

.spView .profile figure.recruit {
  margin: 15px auto 30px;
}

.spView .profile figure.recruit img {
  max-width: 250px;
  margin: 0;
}

.spView .profile figcaption br {
  display: none;
}

/* ---------------------------------------------------------
 #研究者プロフィール
--------------------------------------------------------- */
.spView .profile_area {
  flex-direction: column;
  margin: 15px 0;
  padding: 30px 0 0;
}

.spView .profile_area .photo img {
	max-width: 120px;
}

.spView .profile_area .profile_group p {
  font-size: 1.4rem;
}

.spView .profile_group p.name {
  text-align: center;
  text-indent: calc(1em + 5px) !important;
}

.spView .profile_group p.name span {
  font-size: 2.4rem;
}

.spView .profile_group p.affiliation {
  text-align: center;
}

.spView .profile_group li {
  font-size: 1.3rem;
}

.spView .profile_area li br {
  display: none;
}

/* ---------------------------------------------------------
 #ニコニコ生放送
--------------------------------------------------------- */
.spView .nico {
    margin: 40px 0 0;
}

.spView .nico article {
  padding: 10px 25px 0;
}

.spView .nico h3 {
  font-size: 1.7rem;
  line-height: 1.3em;
  padding: 15px 0 15px;
}

.spView .nico p {
  font-size: 1.5rem;
}

.spView .nico figcaption {
  padding: 0 25px;
}