/* ==========================================================================
   style.css
   トップ / About / Research / Environment / Member / Gallery入口 ページ用
   ※ ヘッダー・フッター・ページ見出し帯などの共通部分は common.css にあります
   ※ 同じ強さのセレクタは「後に書いた方が勝つ」ため、ルールの順番は変えないでください
   ========================================================================== */

/* ==========================================================================
   共通パーツ（このファイルを使うページ内で共通）
   ========================================================================== */

/* 両側に横線が付く見出し */
.title {
  font-size: 40px;
  font-weight: 300;
  display: flex;            /* 文字と横線を横並び */
  align-items: center;      /* 横線を上下中央 */
  justify-content: center;
  margin-bottom: 10px;
  text-align: center;
}
.title::before,
.title::after {
  background-color: #7a8999;
  content: "";
  height: 3px;
  width: 10%;
}
.title::before {
  margin-right: 15px;
}
.title::after {
  margin-left: 15px;
}

.text {
  font-size: 20px;
  line-height: 2;
}

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

/* ---- ヒーロー（メイン画像） ---- */
#hero {
  background-image: url(../images/main/hero.avif);
  background-position: center;
  background-size: cover;
  height: 78vh;
  display: flex;
  align-items: center;
  margin-bottom: 90px;
  overflow: hidden;
  top: 0;
  left: 0;
}

.hero_inner {
  z-index: 2;
  color: white;
  background-color: rgba(0, 0, 0, 0.322);
  width: 100%;
  margin-left: 20px;
}
.hero_inner p {
  margin-top: 30px;
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 16px;
}
.hero_inner h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 30px;
}

/* ---- About Us ---- */
#about {
  margin-bottom: 80px;
}
#about h1 {
  font-size: 100px;
  font-weight: 500;
  color: #000000;
  margin-bottom: 40px;
}
#about h3 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 60px;
}

/* 角に括弧が付くリンク（Learn More） */
.heading-36 {
  position: relative;
  padding: .7em 1.3em;
  color: #333333;
}
.heading-36::before,
.heading-36::after {
  display: inline-block;
  position: absolute;
  width: 1em;
  height: 1em;
  content: '';
}
.heading-36::before {
  top: 0;
  left: 0;
  border-top: 3px solid #2589d0;
  border-left: 3px solid #2589d0;
}
.heading-36::after {
  bottom: 0;
  right: 0;
  border-bottom: 3px solid #2589d0;
  border-right: 3px solid #2589d0;
}

.column-2 {
  width: 48%;
}

.about-img {
  background-position: center;
  background-size: cover;
  height: 450px;
}

@media only screen and (max-width: 1400px) {
  #about h1 {
    font-size: 70px;
  }
  #about h3 {
    font-size: 25px;
    line-height: 1.5;
  }
  .column-2 {
    width: 100%;
  }
  #about p {
    font-size: 20px;
    line-height: 1.2;
  }
  .about-img {
    margin-top: 30px;
    width: 100%;
    height: auto;
  }
}

#about h2 {
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
  transform: translateY(150px);
}

/* ---- リンク・リストの基本 ---- */
a {
  text-decoration: none;
  color: #333;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ---- Learn More ---- */
#learn {
  font-size: 20px;
  margin-bottom: 100px;
}

/* ---- Research / Environment / Publication カード ---- */
#research {
  margin-bottom: 120px;
  justify-content: center;
}

.card {
  position: relative;
  display: block;
  width: 30%;
  height: 35vw;
  overflow: hidden;
  text-decoration: none;
  color: white;
  border-radius: 12px;
  margin-left: 20px;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}
/* 黒いオーバーレイ */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  transition: .4s;
}
/* カード内の文字 */
.content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  z-index: 2;
}
.content h2 {
  margin: 0;
  font-size: 2.5vw;
  transition: .45s;
}
@media only screen and (max-width: 768px) {
  .content h2 {
    font-size: 5.5vw;
  }
}
.content p {
  margin-top: 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: .45s;
  text-align: center;
  line-height: 1.7;
}
/* Read More */
.more {
  position: absolute;
  bottom: 25px;
  opacity: 0;
  transform: translateY(15px);
  transition: .45s;
  font-weight: bold;
  letter-spacing: 1px;
}
/* ホバー時 */
.card:hover img {
  transform: scale(1.05);
}
.card:hover .overlay {
  background: rgba(0, 0, 0, .65);
}
.card:hover h2 {
  transform: translateY(-30px);
}
.card:hover p,
.card:hover .more {
  opacity: 1;
  transform: translateY(0);
}

@media only screen and (max-width: 768px) {
  .card {
    width: 100%;
    height: 50vw;
    margin-top: 10px;
    margin-left: 0;
  }
  .card:hover h2 {
    transform: translateY(5px);
  }
}

/* ---- 学生募集（Join us） ---- */
#recruite {
  margin-bottom: 120px;
}
#recruite iframe {
  width: 100%;
  height: 50vh;
}

/* ---- パートナー企業のロゴ ---- */
.partner {
  columns: 3 280px;
  column-gap: 16px;
  max-width: 1200px;
  margin: auto;
}
.partner img {
  width: 100%;
  margin-bottom: 16px;
  display: block;
  break-inside: avoid;
  transition: .3s;
}
@media only screen and (max-width: 768px) {
  .partner {
    columns: 3 150px;
  }
}

/* ---- お問い合わせ（CONTACT） ---- */
.address {
  position: relative;
  display: block;
  width: 50%;
  height: auto;
  overflow: hidden;
  background-color: #007edf;
  margin-top: 60px;
}
@media only screen and (max-width: 768px) {
  .address {
    width: 100%;
  }
}

/* ==========================================================================
   メンバー（member.html：カードは js/members.js が自動生成）
   ========================================================================== */
.member-category {
  margin: 80px auto;
  width: min(1100px, 90%);
}
.category-title {
  font-size: 1.5rem;
  margin-bottom: 30px;
  border-bottom: 2px solid #565b63;
  padding-left: 15px;
}
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 30px;
}
@media only screen and (max-width: 768px) {
  .member-category {
    margin: 40px auto;
  }
  .member-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0px;
  }
}
.member-card {
  border-radius: 15px;
  padding: 25px;
  text-align: center;
  transition: .3s;
}
.member-card img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  margin-bottom: 20px;
}
.member-card h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}
.position {
  color: #3d6cb9;
  font-weight: bold;
  margin-bottom: 15px;
}

/* ---- トップページ：コンタクト ---- */
#contact {
  margin-bottom: 120px;
}
/* 丸型ボタン（index.html でコメントアウト中の「お問い合わせはこちら」用） */
.button-08 a {
  font-family: 'Noto Sans JP', serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #fff;
  background: #333;
  font-weight: 700;
  border: solid 3px #333;
  border-radius: 999px;
  display: block;
  box-sizing: border-box;
  max-width: 300px;
  text-align: center;
  padding: 16px 64px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}
.button-08 a:hover {
  color: #333;
  background: initial;
  transition: all 0.3s;
}

/* ==========================================================================
   スクロールで表示するアニメーション（js/script.js が .is-active を付与）
   ========================================================================== */
.fade-down {
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
  transform: translateY(150px);
}
.fade-left {
  opacity: 0;
  visibility: hidden;
  transition: all 0.7s;
  transform: translateX(-150px);
}
.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ==========================================================================
   メンバー：写真クリック時のモーダル（js/modal.js）
   ========================================================================== */
.members {
  display: inline-block;
  cursor: pointer;
}
.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .75);
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.modal.show {
  display: flex;
}
.modal-content {
  width: min(90%, 700px);
  border-bottom: 2px solid rgb(240, 240, 240);
  border-top: 2px solid rgb(240, 240, 240);
  padding: 30px;
  text-align: center;
  position: relative;
  animation: fade .25s;
}
@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.modal-content img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 20px;
}
.close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 35px;
  cursor: pointer;
}
#modalName {
  color: white;
  margin: 10px 0 5px;
}
#modalRole {
  color: #ffffff;
  margin-bottom: 15px;
}
#modalProfile {
  color: white;
  line-height: 1.8;
}

/* ==========================================================================
   Research / Environment 共通（画像＋説明文の行）
   ========================================================================== */
#research3 {
  margin-top: -4em;
}

.ri2 {
  background-image: url(../images/about.avif);
  background-position: center;
  background-size: cover;
  height: 300px;
}
.title3 {
  font-weight: 400;
}
.research-title {
  font-size: 30px;
  margin-bottom: 10px;
}
.column-3 {
  width: 35%;
}
.column-4 {
  width: 60%;
}
.text-r {
  font-size: 14px;
  line-height: 25px;
}
.text-e {
  font-size: 14px;
  line-height: 30px;
}
@media only screen and (max-width: 768px) {
  .title3 {
    font-size: 40px;
  }
  .column-3,
  .column-4 {
    width: 100%;
  }
}

.res-margin {
  margin-top: -70px;
  margin-bottom: 30px;
}
.env-margin {
  margin-top: 20px;
}
#env_analysis,
#env_living {
  margin-top: 40px;
}
.column-5 {
  width: 100%;
}

/* ---- トップページ：連絡先ボックス ---- */
.address_box {
  float: right;
  padding: 15px 20px 13px;
  border-radius: 10px;
  background: #fff;
}
.address_box h2 {
  margin-bottom: 10px;
  text-align: center;
  color: #333;
}
address {
  line-height: 1.6em;
  font-style: normal;
  font-size: 86%;
}
#footer address a {
  color: #007edf;
}

/* ==========================================================================
   リサーチ（research.html）
   ========================================================================== */
.main-research-title {
  margin: 0 0 40px;
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: black;
}
@media only screen and (max-width: 1150px) {
  .main-research-title {
    font-size: 2rem;
  }
}

/* ---- 「有機化学 ⇔ 電気化学」の矢印 ---- */
.research-field {
  position: relative;
  width: 50vw;
  margin: auto;
}
.research-arrow {
  width: 80%;
  height: 100px;
  margin: 80px auto;
  background: linear-gradient(90deg, #2f5fb8 0%, #dfe5ee 50%, #ffbe1f 100%);
  clip-path: polygon(0% 50%, 5% 20%, 5% 36%, 95% 36%, 95% 20%, 100% 50%, 95% 80%, 95% 64%, 5% 64%, 5% 80%);
  transform-origin: center;
  transform: scaleX(0);
  animation: grow 1.2s ease forwards;
}
@keyframes grow {
  to {
    transform: scaleX(1);
  }
}
@media only screen and (max-width: 1150px) {
  .research-arrow {
    height: 60px;
    clip-path: polygon(0% 50%, 10% 20%, 10% 36%, 90% 36%, 90% 20%, 100% 50%, 90% 80%, 90% 64%, 10% 64%, 10% 80%);
  }
}

/* ---- 矢印の左右のラベル ---- */
.field-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.05em;
}
.field-label.left {
  right: calc(50% + 22vw);
  color: #173a7a;
}
.field-label.right {
  left: calc(50% + 22vw);
  color: #d5a000;
}
@media only screen and (max-width: 1150px) {
  .field-label {
    font-size: 25px;
  }
}

/* ---- ラベルから伸びる線と丸（左：青 / 右：黄） ---- */
.connector_left {
  position: absolute;
  width: 120px;
  top: 45px;
  left: 25vw;
}
.connector-dot_left {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #69d1ff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .18), inset 0 2px 2px rgba(255, 255, 255, .6);
  z-index: 2;
}
.connector-line_left {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 5px;
  height: 110px;
  background: #69d1ff;
  border-radius: 999px;
  transform-origin: top;
  transform: scaleY(0) rotate(22deg);
  animation: growConnector_left .6s ease forwards;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
}
@keyframes growConnector_left {
  to {
    transform: scaleY(1) rotate(22deg);
  }
}

.connector_right {
  position: absolute;
  width: 120px;
  top: 45px;
  right: 25vw;
}
.connector-dot_right {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFC000;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .18), inset 0 2px 2px rgba(255, 255, 255, .6);
  z-index: 2;
}
.connector-line_right {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 5px;
  height: 110px;
  background: #FFC000;
  border-radius: 999px;
  transform-origin: top;
  transform: scaleY(0) rotate(-22deg);
  animation: growConnector_right .6s ease forwards;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
}
@keyframes growConnector_right {
  to {
    transform: scaleY(1) rotate(-22deg);
  }
}

@media only screen and (max-width: 1150px) {
  .connector-dot_left,
  .connector-dot_right {
    width: 15px;
    height: 15px;
    top: -20px;
  }
  .connector-line_left {
    top: -18px;
    left: 9px;
    width: 5px;
    height: 90px;
  }
  .connector-line_right {
    top: -18px;
    right: 9px;
    width: 5px;
    height: 90px;
  }
}

/* ---- 左右の研究領域の図 ---- */
.main-research {
  anchor-name: --tooltip-anchor;
  padding: 20px 20px 0px;
  width: 100%;
  max-width: 95%;
  margin: 0 auto;
  position: relative;
  top: -50px;
}
.main-research img {
  width: 42vw;
}

/* ---- 歯車 ---- */
.connection {
  margin-top: 10px;
  width: 100%;
  height: 6vh;
  position: relative;
  justify-content: center;
  align-items: center;
}
.gear-area {
  position: absolute;
  width: 13.2vw;
  height: 20px;
  right: 0;
  left: 0;
  margin: auto;
}
.gear {
  position: absolute;
  width: 7.1vw;
  height: auto;
  animation: rotateGear 10s linear infinite;
  margin-top: -220%;
}
.gear-left {
  left: 0;
  top: 40px;
  animation: rotateCW 10s linear infinite;
}
.gear-right {
  right: 0;
  top: 0;
  animation: rotateCCW 10s linear infinite;
}
@keyframes rotateCW {
  from {
    transform: rotate(18deg);
  }
  to {
    transform: rotate(378deg);
  }
}
@keyframes rotateCCW {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
@media only screen and (max-width: 1150px) {
  .gear-left {
    top: 20px;
  }
  .gear {
    margin-top: -250%;
  }
}

/* ---- 研究のゴール（緑の文字） ---- */
.research-box {
  width: 60%;
  height: 6vh;
  font-size: 40px;
  font-weight: 700;
  color: #70AD47;
  margin: auto;
}
.research-goal {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  width: auto;
  margin-top: -3em;
}

#research4 {
  padding: 0px;
}
.text-res {
  font-size: 20px;
}
@media only screen and (max-width: 1150px) {
  .research-box {
    font-size: 20px;
    height: 10vh;
  }
  #research4 {
    margin-top: 0px;
  }
  .text-res {
    font-size: 14px;
    line-height: 18px;
  }
  .research-goal {
    margin-top: -6em;
    font-size: 15px;
  }
}

/* ==========================================================================
   アバウト（about.html）
   ========================================================================== */
.text-a-2 {
  font-size: 25px;
  line-height: 30px;
  width: 100%;
  text-align: center;
  margin-top: 50px;
}
#about_purpose {
  margin-top: 50px;
}
.column-about-2 {
  width: 40%;
}
.column-about-3 {
  margin-top: 20px;
}
.column-about-3 img {
  width: 100%;
}
#greeting .column-4 {
  width: 60%;
}
#greeting .text {
  line-height: 25px;
}
#greeting .about-img {
  width: 40%;
  height: auto;
  margin-left: 30%;
}
.about-title {
  font-size: 50px;
  text-align: center;
  margin-top: 60px;
}
@media only screen and (max-width: 768px) {
  .about-title {
    font-size: 25px;
    margin-top: 30px;
  }
  .text-a-2 {
    font-size: 18px;
    line-height: 22px;
    margin-top: 20px;
  }
  #greeting .about-img {
    width: 50%;
    margin-left: 25%;
  }
}

/* ==========================================================================
   ギャラリー入口（gallery-pre.html）
   ========================================================================== */
button,
.btn {
  display: inline-block;
  background-color: rgb(41, 109, 41);
  color: #ffffff;
  border: none;
  padding: 12px 22px;
  font-size: 15px;
  font-family: var(--sans);
  cursor: pointer;
  text-decoration: none;
  margin-top: 2em;
}

/* ---- アクセス案内 ---- */
.gallery-access {
  max-width: 640px;
  margin: 0 auto 60px;
  padding: 0 24px;
  text-align: center;
}
.gallery-access__btn {
  display: inline-block;
  padding: 14px 40px;
  font-size: 16px;
}
.gallery-access__note {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ---- 集合写真 ---- */
.group-photo {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}
.group-photo__img {
  width: 100%;
  display: block;
}
.group-photo__caption {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}