@charset "UTF-8";

/*
  Theme Name: sensing
  Version: 1.0
  Author: K.Oota
  Description:センシング情報学研究室HP
*/

body {
 font-family: "Noto Sans JP", sans-serif;
}

:root {
 --primary-blue: #13448d;
 --dark-blue: #003366;
 --light-blue: #e6f2ff;
 --text-dark: #333333;
 --text-gray: #666666;
 --white: #ffffff;
 --header-height: 60px;
}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: "Noto Sans JP", sans-serif;
 color: var(--text-dark);
 line-height: 1.6;
 background: var(--white);
}

.pc-only {
 display: block;
}

@media (max-width: 768px) {
 .pc-only {
  display: none !important;
 }
}

.sp-only {
 display: none;
}

@media (max-width: 768px) {
 .sp-only {
  display: block;
 }
}

a {
 text-decoration: none;
 color: inherit;
}

.fontsize-L {
 font-size: large;
 font-weight: 500;
}

.fontsize-S {
 font-size: small;
 font-weight: 200;
}

.cr ol li {
 list-style: decimal;
}

.topic-list-dot {
 margin: 1rem 0 3rem 2rem;
}

.topic-list-dot li {
 list-style: disc;
 margin-bottom: 1rem;
}

.papers-list li {
 list-style: disc;
}

/* Header */
header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: var(--header-height);
 background: rgba(255, 255, 255, 0.95);
 backdrop-filter: blur(5px);
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 5%;
 z-index: 1000;
 font-size: 16px;
 box-shadow: 0 0 10px -2px gray;
}

.logo {
 font-size: 20px;
 font-weight: 700;
 color: #384067;
}

@media (max-width: 768px) {
 .logo {
  font-size: 17px;
 }
}

nav {
 display: flex;
 align-items: center;
}

.nav-links {
 display: flex;
 list-style: none;
 gap: 32px;
 margin-right: 32px;
}

.nav-links li a {
 font-weight: 500;
 color: var(--text-gray);
 position: relative;
}

.nav-links li a.active::after {
 content: "";
 position: absolute;
 bottom: -4px;
 left: 0;
 width: 100%;
 height: 2px;
 background: var(--primary-blue);
}

.lang-btn {
 background: var(--primary-blue);
 color: var(--white);
 padding: 4px 12px;
 border-radius: 4px;
 font-size: 14px;
 font-weight: 500;
}

.hamburger {
 display: none;
 flex-direction: column;
 gap: 5px;
 cursor: pointer;
}

.hamburger span {
 width: 25px;
 height: 3px;
 background: var(--primary-blue);
 transition: all 0.3s;
}

/*  Hero + Our Mission 統合版  */
.hero-mission {
 background-image: url("img/top-bg.jpg");
 background-size: contain;
 background-position: top;
 background-repeat: no-repeat;
 color: #13448d;
 position: relative;
 background-color: #f3ffff;
}

/* Hero部分（max-width: 1200px） */
.hero-section {
 position: relative;
 min-height: 30vh;
}

.hero-inner {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 5%;
 height: 550px;
 display: flex;
 align-items: flex-start;
 padding-top: 150px;
}

.hero-content {
 max-width: 800px;
}

.hero-content h1 {
 font-size: 35px;
 font-weight: 700;
 line-height: 1.15;
 margin-bottom: 20px;
}

.hero-content .sub {
 font-size: 21px;
 font-weight: 500;
 margin-bottom: 8px;
 color: #0b1759;
}

.hero-content .eng {
 font-size: 18px;
 opacity: 0.95;
 color: #384067;
}

/* Our Mission部分（max-width: 1100px） */
.mission-inner {
 color: #333;
 padding: 100px 5% 120px;
}

.mission-content {
 max-width: 1100px;
 margin: 0 auto;
}

/* タイトル＋下線 */
.mission-header {
 margin-bottom: 15px;
 text-align: right;
}

.mission-header h2 {
 font-size: 32px;
 font-weight: 700;
 color: #0055aa;
 position: relative;
 display: inline-block;
 padding-bottom: 3px; /* 下線との間隔 */
 width: 100%;
}

/* 青い太い線（右側50px・4px） */
.mission-header h2::after {
 content: "";
 position: absolute;
 bottom: 0;
 right: 0;
 width: 120px;
 height: 4px;
 background: #0055aa;
}

/* ベースの下線（黒・1px・100%） */
.mission-header h2::before {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 2px;
 background: #adadad; /* 黒線 */
}

/* 画像と文章のカラム部分 */
.mission-body {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 50px;
 align-items: flex-start;
}

.mission-image {
 margin-top: -8px;
}

.mission-image img {
 width: 100%;
 display: block;
}

.mission-text h3 {
 font-size: 21px;
 font-weight: 700;
 line-height: 1.3;
 margin-bottom: 15px;
}

.mission-text p {
 font-size: 16px;
 line-height: 1.8;
 margin-bottom: 16px;
}

.mission-text-blue {
 color: #008cff;
}

/* スマホ対応 */
@media (max-width: 768px) {
 .hero-mission {
  background-position: 0% 15%;
 }

 .hero-inner {
  padding-top: 120px; /* スマホでは少し小さめに調整 */
  height: 320px;
 }

 .hero-content h1 {
  font-size: 1.8rem;
 }

 .hero-content .sub {
  font-size: 16px;
  margin-bottom: 0;
 }

 .hero-content .eng {
  font-size: 12px;
 }

 .mission-content {
  grid-template-columns: 1fr;
  gap: 40px;
 }

 .mission-inner {
  padding: 70px 5% 90px;
 }

 .mission-header {
  margin-bottom: 40px;
 }

 .mission-header h2 {
  font-size: 28px;
 }

 .mission-image {
  margin-top: -20px;
 }

 .mission-body {
  grid-template-columns: 1fr;
  gap: 40px;
 }

 .mission-text h3 {
  font-size: 22px;
 }

 .mission-text h3 {
  font-size: 22px;
  margin-top: -15px;
  padding-top: 0;
 }
}

/* TOP予備
.hero {
 height: calc(40vh - var(--header-height));
 min-height: 750px;
 background-image: url("img/top-bg.jpg");
 background-size: cover;
 background-position: top;
 display: flex;
 flex-direction: column;
 justify-content: start;
 align-items: flex-start;
 padding: 150px 50px;
 color: var(--primary-blue);
 position: relative;
 overflow: hidden;
}

.hero::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
}

.hero-content {
 position: relative;
 z-index: 2;
 max-width: 800px;
}

.hero h1 {
 font-size: 36px;
 font-weight: 700;
 line-height: 1.1;
 margin-bottom: 16px;
}

.hero p.sub {
 font-size: 21px;
 font-weight: 500;
 line-height: 1.3;
 margin-bottom: 8px;
 color: var(--dark-blue);
 padding-top: 15px;
}

.hero p.eng {
 font-size: 16px;
 font-weight: 400;
 color: var(--dark-blue);
}

 */

/* ミッション予備 
.mission {
 padding: 30px 5% 120px;
 background-color: #f3ffff;
}

.mission-content {
 display: flex;
 gap: 48px;
 max-width: 1000px;
 margin: 0 auto;
 align-items: flex-start;
}

.mission-image {
 width: 45%;
 height: auto;
 border-radius: 8px;
 object-fit: cover;
}

.mission-text {
 width: 55%;
}

.mission h2 {
 font-size: 32px;
 font-weight: 700;
 color: var(--primary-blue);
 margin-bottom: 16px;
 position: relative;
 text-align: right;
}

.mission h2::after {
 content: "";
 position: absolute;
 bottom: -8px;
 left: 0;
 width: 100%;
 height: 1px;
 background: var(--primary-blue);
}

.mission h3 {
 font-size: 21px;
 font-weight: 700;
 line-height: 1.3;
 margin-bottom: 24px;
 color: var(--primary-blue);
}

.mission p {
 font-size: 16px;
 line-height: 1.8;
 margin-bottom: 16px;
}

.mission-text-blue {
 color: #008cff;
}
*/

/* Responsive: Smartphone */
@media (max-width: 960px) {
 header {
  padding: 0 4%;
 }

 .nav-links {
  display: none;
  position: absolute;
  top: var(--header-height);
  left: 0;
  width: 100%;
  background: var(--white);
  flex-direction: column;
  gap: 0;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }

 .nav-links li {
  padding: 16px 0;
  border-bottom: 1px solid #eee;
 }

 .nav-links li:last-child {
  border-bottom: none;
 }

 .nav-links.show {
  display: flex;
 }

 .hamburger {
  display: flex;
 }

 .hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
 }

 .hamburger.active span:nth-child(2) {
  opacity: 0;
 }

 .hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
 }

 .lang-btn {
  margin-left: 16px;
 }

 .hero h1 {
  font-size: 40px;
 }

 .hero p.sub {
  font-size: 20px;
 }

 .hero p.eng {
  font-size: 16px;
 }

 .mission {
  padding: 60px 4% 80px;
 }

 .mission-content {
  flex-direction: column;
  gap: 32px;
 }

 .mission-image {
  width: 100%;
 }

 .mission-text {
  width: 100%;
 }

 .mission h2 {
  font-size: 24px;
 }

 .mission h3 {
  font-size: 22px;
 }

 .mission p {
  font-size: 14px;
 }
}

/* Technology Platform */
.tech-platform {
 padding: 0 5% 50px;
 background-color: #f3ffff;
 text-align: center;
}

.tech-platform h2 {
 font-size: 32px;
 font-weight: 700;
 color: var(--primary-blue);
 margin-bottom: 16px;
 position: relative;
 display: inline-block;
}

/*
.tech-platform h2::after {
 content: "";
 position: absolute;
 bottom: -8px;
 left: 50%;
 transform: translateX(-50%);
 width: 80px;
 height: 3px;
 background: var(--primary-blue);
}
*/

.tech-platform .lead {
 font-size: 18px;
 color: var(--text-gray);
 margin-bottom: 15px;
 max-width: 800px;
 margin-left: auto;
 margin-right: auto;
}

.cards {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 32px;
 max-width: 1200px;
 margin: 0 auto;
}

.card {
 background: var(--white);
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 transition: transform 0.3s;
}

.card:hover {
 transform: translateY(-8px);
}

.card img {
 width: 100%;
 height: 240px;
 object-fit: cover;
}

.card-body {
 padding: 24px;
 text-align: center;
}

.card h3 {
 font-size: 20px;
 font-weight: 700;
 color: var(--primary-blue);
 margin-bottom: 8px;
}

.card p {
 font-size: 14px;
 color: var(--text-gray);
}

/* Applications */
.applications {
 padding: 50px 5% 80px;
 background-color: #f3ffff;
 text-align: center;
}

.applications h2 {
 font-size: 32px;
 font-weight: 700;
 color: var(--primary-blue);
 margin-bottom: 16px;
 position: relative;
 display: inline-block;
}

/*
.applications h2::after {
 content: "";
 position: absolute;
 bottom: -8px;
 left: 50%;
 transform: translateX(-50%);
 width: 80px;
 height: 3px;
 background: var(--primary-blue);
}
*/

.applications .lead {
 font-size: 18px;
 color: var(--text-gray);
 margin-bottom: 25px;
}

.app-grid {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 24px;
 max-width: 1100px;
 margin: 0 auto 15px;
}

.app-img {
 max-width: 1000px;
 margin: 0 auto;
}

.app-img img {
 width: 100%;
}

.app-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 font-size: 16px;
 font-weight: 500;
 line-height: 1.2em;
 color: var(--dark-blue);
 border: solid 1px;
 border-radius: 10px;
 padding: 15px;
}

.app-item img {
 width: 90px;
 height: 90px;
 padding: 12px;
 box-sizing: border-box;
}

.cta .btn {
 display: inline-block;
 background: var(--primary-blue);
 color: var(--white);
 padding: 10px 32px;
 margin: 0 auto;
 border-radius: 10px;
 font-weight: 700;
 font-size: 16px;
 transition: background 0.3s;
}

.cta .btn:hover {
 background: var(--dark-blue);
}

/* Responsive */
@media (max-width: 768px) {
 .tech-platform,
 .applications {
  padding: 30px 4% 50px;
 }

 .tech-platform h2,
 .applications h2 {
  font-size: 24px;
 }

 .cards {
  grid-template-columns: 1fr;
  gap: 24px;
 }

 .app-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 16px;
 }

 .app-item img {
  width: 64px;
  height: 64px;
  padding: 10px;
 }

 .cta .btn {
  padding: 10px 24px;
  font-size: 14px;
 }
}

/* What's New */
.news {
 background: #f2f6f9;
 padding: 80px 5% 90px;
}

.news-inner {
 max-width: 1100px;
 margin: 0 auto;
 display: flex;
 gap: 80px;
 align-items: flex-start;
}

.news-left {
 min-width: 180px;
}

.news-left h2 {
 font-size: 32px;
 font-weight: 700;
 color: #0055aa;
 line-height: 1.1;
 margin-bottom: 8px;
}

.news-left .sub-label {
 font-size: 20px;
 color: #555;
 margin: 0;
}

.news-right {
 flex: 1;
}

.news-list {
 list-style: none;
 margin-bottom: 32px;
}

.news-list li {
 display: flex;
 margin-bottom: 10px;
 font-size: 16px;
 line-height: 1.5;
 color: #333;
}

.news-list time {
 min-width: 110px;
 color: #666;
 font-weight: 500;
 margin-right: 24px;
 flex-shrink: 0;
}

.more-link {
 text-align: right;
}

.more-link a {
 color: #0055aa;
 font-size: 16px;
 font-weight: 500;
 text-decoration: none;
 position: relative;
}

.more-link a::after {
 content: "";
 position: absolute;
 bottom: -2px;
 left: 0;
 width: 100%;
 height: 1px;
 background: #0055aa;
}

/* Responsive */
@media (max-width: 768px) {
 .news-inner {
  flex-direction: column;
  gap: 32px;
 }

 .news-left h2 {
  font-size: 32px;
 }

 .news-list time {
  min-width: 100px;
  margin-right: 16px;
 }
}

.news-list span {
 flex: 1;
}

.more {
 font-size: 16px;
 color: var(--primary-blue);
}

.more a {
 color: var(--primary-blue);
 font-weight: 500;
}

/* footer */
footer {
 background: #ffffff; /* 白背景全体 */
 color: #333333; /* 黒文字 */
 margin: 0;
 font-size: 14px;
}

.footer-info {
 max-width: 1200px;
 margin: 0 auto;
 padding: 15px;
}

.footer-main {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 gap: 40px;
 padding-bottom: 40px;
 border-bottom: 1px solid #eee;
}

.footer-address p {
 margin-bottom: 8px;
 line-height: 1.6;
}

.footer-address p strong {
 font-weight: 700;
}

.footer-links {
 display: flex;
 flex-direction: column;
 gap: 12px;
 min-width: 265px;
}

/* リンクボックス（265pxの黒枠） */
.link-box {
 width: 265px;
 border: 1px solid #222222; /* 黒の実線 */
 border-radius: 4px;
 padding: 12px 16px;
 background: #ffffff;
}

.link-box a {
 display: flex;
 justify-content: space-between;
 align-items: center;
 color: #0055aa;
 font-weight: 500;
 text-decoration: none;
 width: 100%;
}

.external-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 18px;
 height: 18px;
 flex-shrink: 0;
 margin-left: 8px;
}

.external-icon img {
 width: 18px !important;
 height: 18px !important;
 filter: none; /* 一旦外す */
}

.link-box a:hover .external-icon img {
 transform: translate(1px, -1px);
}

/* JKAボックス */
.jka-box {
 width: 265px;
}

.jka-image {
 width: 265px;
 height: auto;
 margin-bottom: 12px;
 border-radius: 4px;
}

.copyright {
 background: #13448d;
 color: #ffffff;
 text-align: center;
 padding: 48px 5%;
 font-size: 12px;
 line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
 .footer-main {
  flex-direction: column;
  text-align: left;
 }

 .footer-links {
  min-width: 100%;
  align-items: center;
 }

 .link-box,
 .jka-box {
  width: 100%;
  max-width: 265px;
 }

 .jka-image {
  width: 100%;
  max-width: 265px;
 }
}

/* Research */
.research-page {
 padding-top: 60px;
 width: 100%;
 background-image: url("img/page-bg-base.jpg"), url("img/page-bg-re.jpg");
 background-position:
  top center,
  bottom center;
 background-repeat: no-repeat, repeat-y;
 background-size: 100%, 100%;
 padding-bottom: 30px;
}

.research-hero {
 position: relative;
 max-width: 1200px;
 margin: 0 auto;
 height: 255px;
 margin-bottom: 25px;
 overflow: hidden;
 text-align: center;
}

.research-hero h1 {
 font-size: 48px;
 font-weight: 700;
 color: #0055aa;
 padding-top: 90px;
 z-index: 2;
}

.research-hero .sub-title {
 font-size: 24px;
 color: #091028;
 line-height: 1;
 z-index: 2;
}

.hero-bg {
 position: absolute;
 inset: 0;
}

.hero-image {
 width: 100%;
 height: 100%;
 object-fit: cover;
 filter: brightness(0.7);
}

.gm {
 position: absolute;
 overflow: hidden;
 top: 0;
 right: 0;
}

.gm img {
 height: 250px;
 mix-blend-mode: multiply;
}

@media (max-width: 768px) {
 .research-page {
  padding-top: 0;
  margin-top: 50px;
 }
 .research-hero {
  height: 145px;
  margin-bottom: 0;
 }
 .research-hero h1 {
  font-size: 24px;
  padding-top: 50px;
 }
 .research-hero .sub-title {
  font-size: 16px;
  bottom: 10px;
 }
 .gm {
  height: 100%x;
  overflow: hidden;
  margin-top: 0;
  top: 0;
  right: -15%;
 }
 .gm img {
  height: 125px;
  object-fit: cover;
 }
}

/* その他ページ */
.other-page {
 padding-top: 80px;
 width: 100%;
 background-image: url("img/page-bg-base.jpg"), url("img/page-bg-re.jpg");
 background-position:
  top center,
  bottom center;
 background-repeat: no-repeat, repeat-y;
 background-size: 100%, 100%;
 padding-bottom: 30px;
}

.other-hero {
 position: relative;
 max-width: 1200px;
 margin: 0 auto;
 height: 255px;
 margin-bottom: 45px;
 overflow: hidden;
 text-align: center;
}

.other-hero h1 {
 font-size: 48px;
 font-weight: 700;
 color: #0055aa;
 padding-top: 90px;
 z-index: 2;
}

.other-hero .sub-title {
 font-size: 24px;
 color: #091028;
 line-height: 1;
 z-index: 2;
}

@media (max-width: 768px) {
 .other-page {
  margin-top: 30px;
 }
 .other-hero {
  height: 80px;
  margin-bottom: 10px;
 }
 .other-hero h1 {
  font-size: 24px;
  padding-top: 0;
  top: 10%;
 }
 .other-hero .sub-title {
  font-size: 16px;
  bottom: 30px;
 }
}

/* Professor Intro */
.professor-intro {
 padding: 0;
 width: 90%;
 margin: 0 auto;
}

.professor-card {
 max-width: 1200px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 55% 45%;
 gap: 0;
 border-top: 1px solid #333;
}

.professor-left {
 display: grid;
 grid-template-columns: 300px 1fr;
 gap: 0;
 padding-top: 0; /* 常に0 */
}

.professor-image {
 margin-top: 0;
}

.professor-image img {
 object-fit: cover;
}

.professor-info {
 display: flex;
 flex-direction: column;
 padding-top: 30px;
 padding-left: 15px;
}

.affiliation {
 font-size: 14px;
 color: #555;
 margin-bottom: 12px;
}

.professor-info h2 {
 font-size: 32px;
 font-weight: 700;
 color: #0055aa;
 line-height: 1.2;
}

.roman-name {
 font-size: 21px;
}

/* 研究テーマのみ */
.theme-only {
 width: 600px;
 max-width: 90%;
 margin: 0 auto;
}

/* Professor Intro小さい版 */
.professor-intro-c {
 padding: 0;
 max-width: 90%;
 margin: 0 auto;
}

.professor-card-c {
 max-width: 1200px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 180px 1fr;
 gap: 0;
 border-top: 1px solid #333;
}

.professor-image-c {
 width: 180px;
}

.professor-image-c img {
 object-fit: cover;
}

.professor-info-c {
 display: flex;
 flex-direction: column;
 padding-top: 15px;
 padding-left: 15px;
}

.position {
 font-size: 13px;
 line-height: 1.4;
 color: #555;
 margin-bottom: 12px;
}

.professor-info-c h2 {
 font-size: 24px;
 font-weight: 700;
 color: #0055aa;
 line-height: 1.2;
}

.sub-title-c {
 width: 1200px;
 max-width: 90%;
 margin: 0 auto;
 font-size: 21px;
 font-weight: 700;
 color: #0055aa;
 text-align: left;
 padding-bottom: 15px;
}

.cv-btn {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background: #0055aa;
 color: white;
 padding: 8px 28px;
 font-size: 15px;
 font-weight: 600;
 text-decoration: none;
 margin-top: auto; /* ボタンを下に寄せる */
 align-self: flex-start;
}

.research-theme h3 {
 font-size: 21px;
 font-weight: 700;
 color: #0055aa;
 position: relative;
 display: inline-block;
 padding-bottom: 3px; /* 下線との間隔 */
 width: 100%;
}
/* 青い太い線（右側50px・4px） */
.research-theme h3::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 width: 105px;
 height: 3px;
 background: #0055aa;
}

.research-theme p {
 padding-top: 15px;
}

.professor-right {
 padding-top: 30px;
}

/* プロフェッサーカード横並びは1200以上のみ  */
@media (max-width: 1200px) {
 .professor-card {
  grid-template-columns: 1fr;
  border-top: none;
 }

 .professor-left {
  grid-template-columns: 1fr 2fr;
  gap: 0;
  padding-top: 0; /* スマホでも必ず0 */
  border-top: 1px solid #333;
 }

 .professor-image {
  padding: 0;
  margin: 0;
 }

 .professor-image img {
  height: 100%;
  object-fit: cover;
 }

 .affiliation {
  line-height: 1.2;
 }

 .professor-info h2 {
  font-size: 24px;
  line-height: 1.3;
  margin-top: -10px;
 }

 .professor-info,
 .professor-right {
  padding-top: 15px;
 }
}

/* Research Topics */
.research-topics {
 padding-top: 30px;
 margin-bottom: 80px;
 max-width: 90%;
 margin: 0 auto;
}

.research-topics h2 {
 font-size: 36px;
 font-weight: 700;
 color: #13448d;
 text-align: center;
 margin-bottom: 5px;
}

.research-topics .sub-title {
 font-size: 20px;
 text-align: center;
 color: #13448d;
 max-width: 980px;
 margin: 0 auto;
 margin-bottom: 48px;
}

.accordion {
 width: 1200px;
 max-width: 95%;
 margin: 0 auto;
}

.accordion-item {
 margin-bottom: 16px;
 border: 1px solid #13448d;
 border-radius: 8px;
 overflow: hidden;
 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.inner {
 max-width: 1000px;
 margin: 0 auto;
}

h2#page_category {
 color: #0055aa;
 padding-left: 10px;
 font-size: 1.2em;
}

.vision_inner3 {
 margin-bottom: 16px;
 border: 1px solid #13448d;
 border-radius: 8px;
 overflow: hidden;
 background: #fff;
}

.content_body {
 padding: 30px;
}

.researches-movie_blk {
 padding: 0 30px;
}

.references {
 padding: 15px 30px;
}
.references li {
 list-style: none;
}
.references a {
 color: #0055aa;
}

#researches_title {
 width: 100%;
 padding: 10px 15px;
 background: #13448d;
 color: white;
 font-size: 20px;
 font-weight: 700;
 text-align: left;
 border: none;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 16px;
 transition: background 0.3s;
}

.blueline a {
 color: #0055aa;
 text-decoration: underline;
}

.accordion-header {
 width: 100%;
 padding: 8px 20px;
 background: #13448d;
 color: white;
 font-size: 20px;
 font-weight: 700;
 text-align: left;
 border: none;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 16px;
 transition: background 0.3s;
 z-index: 2;
}
/*
.accordion-header:hover {
 background: #00355b;
}
*/
.arrow {
 font-size: 24px;
 transition: transform 0.3s;
}

/* 
.accordion-item.open .arrow {
 transform: rotate(180deg);
}
*/

.accordion-content {
 display: none;
 padding: 15px 30px;
 background-color: #fff;
 box-shadow: inset 0 5px 5px rgb(19 68 141 / 50%);
}

.accordion-content p {
 margin: 15px 0 15px;
}

.accordion-item.open .accordion-content {
 display: block;
}

.topic-list {
 list-style: none;
}

.topic-list li {
 margin-top: 17px;
 margin-bottom: 16px;
 font-size: 16px;
 line-height: 1.6;
 margin-left: 53px;
}

.topic-list a {
 color: #0055aa;
 text-decoration: underline;
}

.topic-list a:hover {
 text-decoration: underline;
}

.new {
 background: #9e0900;
 color: white;
 font-size: 12px;
 font-weight: bold;
 padding: 4px 8px;
 border-radius: 4px;
 margin-right: 8px;
 margin-left: -53px;
 vertical-align: middle;
}

/* 
@media (max-width: 768px) {
 .professor-card {
  flex-direction: column;
  padding: 32px 16px;
  max-width: 90%;
 }

 .professor-image img {
  width: 60%;
  height: auto;
 }

 .research-hero h1 {
  font-size: 32px;
 }

 .accordion-header {
  font-size: 18px;
  padding: 16px 24px;
 }
}
 */

/* Member */
.members-page {
 padding-top: 50px;
 background-image: url("img/page-bg-base.jpg"), url("img/page-bg-re.jpg");
 background-position:
  top center,
  bottom center;
 background-repeat: no-repeat, repeat-y;
 background-size: 100%, 100%;
 padding-bottom: 75px;
}

.members-hero {
 position: relative;
 max-width: 1200px;
 margin: 0 auto;
 height: 235px;
 margin-bottom: 45px;
 overflow: hidden;
 text-align: center;
}

.members-hero h1 {
 font-size: 48px;
 font-weight: 700;
 color: #0055aa;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 z-index: 2;
}

.members-hero .sub-title {
 font-size: 24px;
 color: #091028;
 position: absolute;
 bottom: 40px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 2;
}

.hero-bg {
 position: absolute;
 inset: 0;
}

.hero-image {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

/* Members List */
.members-list {
 width: 1000px;
 max-width: 90%;
 margin: 0 auto;
}

.members-list h2 {
 position: relative;
 width: 100%;
 font-size: 32px;
 font-weight: 700;
 color: #0055aa;
 padding: 0 15px;
 padding-bottom: 8px;
 margin: 60px 0 25px;
 text-align: left;
 border-bottom: solid 1px #555;
}

/* 青い太い線 */
.members-list h2::after {
 content: "";
 position: absolute;
 width: 30%;
 bottom: 0;
 left: 0;
 height: 4px;
 background: #0055aa;
}

.member-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 32px;
 margin-bottom: 40px;
}

.member-card {
 overflow: hidden;
 transition: transform 0.3s;
}

.member-info {
 font-size: 24px;
 padding: 5px 0;
 text-align: left;
}

.member-info h3 {
 font-size: 22px;
 font-weight: 700;
 color: #0055aa;
 margin-bottom: 12px;
}

.detail-btn {
 display: inline-flex;
 width: 200px;
 align-items: center;
 gap: 8px; /* ▶とテキストの間隔 */
 background: #13448d;
 color: white;
 padding: 8px 20px;
 font-size: 21px; /* テキストサイズ */
 font-weight: 500;
 text-decoration: none;
 transition: background 0.3s;
 justify-content: flex-start;
 margin-top: 12px;
}

.detail-btn:hover {
 background: #003366;
}

.arrow-icon {
 font-size: 12px;
 line-height: 1;
 font-weight: bold;
 margin-right: 4px;
}

.arrow-icon {
 font-size: 16px;
 line-height: 1;
 margin-right: 4px;
}

/* Simple List (for other categories) */
.simple-list {
 list-style: none;
 padding-left: 0;
 font-size: 16px;
 line-height: 2;
}

.simple-list li {
 margin-bottom: 8px;
 padding-left: 20px;
 position: relative;
}

.simple-list li::before {
 content: "・";
 position: absolute;
 left: 0;
 color: #0055aa;
}

/* Responsive */
@media (max-width: 768px) {
 .members-page {
  margin-top: 40px;
 }

 .members-hero {
  height: 160px;
  margin-bottom: -20px;
 }

 .members-hero h1 {
  font-size: 24px;
  top: 45px;
 }

 .members-hero .sub-title {
  font-size: 16px;
  bottom: 75px;
 }

 .members-list {
  margin-top: -90px;
 }

 .members-list h2 {
  font-size: 24px;
 }

 .members-list h2::after {
  width: 50%;
 }

 .member-grid {
  grid-template-columns: 1fr;
 }

 .member-photo img {
  height: 280px;
 }
}

/* 教授・准教授の写真サイズ固定 */
.member-photo img {
 width: 200px;
 height: auto; /* 縦横比維持 */
 max-height: 400px;
 object-fit: cover;
}

/* スマホ対応 */
@media (max-width: 768px) {
 .member-photo img {
  width: 200px;
  max-height: 350px;
 }
}

/* 箇条書きを6人ごとの複数列グリッドに */
.grid-list {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 gap: 16px 32px; /* 縦16px、横32px */
 list-style: none;
 padding-left: 0;
}

.grid-list li {
 font-size: 15px;
 line-height: 1.6;
 position: relative;
 padding-left: 20px;
}

.grid-list li::before {
 content: "・";
 position: absolute;
 left: 0;
 color: #0055aa;
 font-weight: bold;
}

/* スマホでは2列に調整 */
@media (max-width: 768px) {
 .grid-list {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
 }
}

/* Contact */
.contact-page {
 padding-top: 80px;
 width: 100%;
 background-image: url("img/page-bg-base.jpg"), url("img/page-bg-re.jpg");
 background-position:
  top center,
  bottom center;
 background-repeat: no-repeat, repeat-y;
 background-size: 100%, 100%;
 padding-bottom: 30px;
}

.contact-hero {
 position: relative;
 max-width: 1200px;
 margin: 0 auto;
 height: 235px;
 margin-bottom: 45px;
 overflow: hidden;
 text-align: center;
}

.contact-hero h1 {
 font-size: 48px;
 font-weight: 700;
 color: #0055aa;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 z-index: 2;
}

.contact-hero .sub-title {
 font-size: 24px;
 color: #091028;
 position: absolute;
 bottom: 40px;
 left: 50%;
 transform: translateX(-50%);
 z-index: 2;
}

.hero-bg img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 filter: brightness(0.85) contrast(1.05);
}

/* Info Blocks - 青ヘッダー + 白枠 + 青背景 */
.info-block {
 width: 1200px;
 max-width: 90%;
 margin: 0 auto;
 margin-bottom: 48px;
 border: 2px solid #13448d;
 border-radius: 12px;
 overflow: hidden;
 background: white;
}

.block-header {
 background: #13448d;
 color: white;
 font-size: 20px;
 font-weight: 700;
 padding: 8px 20px;
 display: flex;
 align-items: center;
 gap: 12px;
}

.arrow {
 font-size: 24px;
 font-weight: bold;
 line-height: 1;
}

.block-content {
 padding: 32px 24px;
 font-size: 16px;
 line-height: 1.8;
 color: #333;
 box-shadow: inset 0 5px 5px rgb(19 68 141 / 50%);
}

.block-content a {
 color: #091028;
}

.block-content ul {
 list-style: none;
 padding-left: 0;
}

.block-content li {
 margin-bottom: 12px;
 padding-left: 20px;
 position: relative;
}

.block-content li::before {
 content: "・";
 position: absolute;
 left: 0;
 color: #0055aa;
 font-weight: bold;
}

.block-content h3 {
 position: relative;
 font-size: 18px;
 font-weight: 700;
 color: #13448d;
 margin: 32px 0 16px;
 border-bottom: 1px solid #ddd;
 padding-bottom: 8px;
}
.block-content h3::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 width: 125px;
 height: 3px;
 background: #13448d;
}

.block-content h3:first-child {
 margin-top: 0;
}

/* Responsive */
@media (max-width: 768px) {
 .contact-page {
  margin-top: 50px;
 }

 .contact-hero {
  height: 80px;
  margin-bottom: 10px;
 }

 .contact-hero h1 {
  font-size: 24px;
  top: 10%;
 }

 .contact-hero .sub-title {
  font-size: 16px;
  bottom: 30px;
 }

 .block-header {
  font-size: 18px;
  padding: 14px 20px;
 }

 .block-content {
  padding: 24px 20px;
 }
}

/* ニュース一覧用 */
.news-list-page {
 background-image: url("img/page-bg0.jpg");
 background-size: 100%;
 background-repeat: repeat-y;
}

.news-page {
 max-width: 960px;
 margin: 0 auto;
 padding: 40px 20px 80px;
}

/* ページタイトルバー */
.page-header {
 background: var(--dark-blue);
 color: white;
 padding: 10px 15px;
 margin-top: 80px;
 margin-bottom: 50px;
 border-radius: 8px;
}

.page-header h1 {
 font-size: 28px;
 font-weight: 700;
}

.page-header .sub {
 font-size: 16px;
 margin-top: 6px;
}

/* ニュース一覧 */
.news-list {
 display: flex;
 flex-direction: column;
 gap: 5px;
}

.news-item {
 background: white;
 border-radius: 8px;
 padding: 28px 32px;
 box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
 display: flex;
 align-items: flex-start;
 gap: 32px;
}

.news-item .date {
 min-width: 110px;
 color: var(--gray);
 font-size: 15.5px;
 font-weight: 500;
 padding-top: 2px;
}

.news-item .title {
 font-size: 18px;
 font-weight: 500;
 line-height: 1.65;
 color: var(--text);
}

/* スマホ版 */
@media (max-width: 768px) {
 .news-page {
  padding: 30px 15px 80px;
 }

 .page-header {
  padding: 10px 12px;
 }

 .page-header h1 {
  font-size: 24px;
 }

 .news-item {
  flex-direction: column;
  gap: 12px;
  padding: 24px 20px;
 }

 .news-item .date {
  min-width: auto;
  font-size: 15px;
 }

 .news-item .title {
  font-size: 16.5px;
 }
}

/* ニュース本文ページ */
.news-detail {
 max-width: 960px;
 margin: 0 auto;
 padding: 40px 20px 100px;
 background: white;
 min-height: 100vh;
}

/* 縦ライン付きの日付＋タイトルエリア */
.news-header {
 display: flex;
 gap: 28px;
 margin-bottom: 50px;
 border-left: 5px solid var(--dark-blue);
 padding-left: 24px;
}

.news-header .date {
 font-size: 17px;
 color: var(--dark-blue);
 font-weight: 600;
 white-space: nowrap;
 padding-top: 4px;
}

.news-header .title {
 font-size: 26px;
 font-weight: 700;
 line-height: 1.4;
 color: #222;
}

/* 本文エリア */
.news-content {
 font-size: 17px;
 line-height: 1.85;
 color: #333;
 max-width: 760px;
}

.news-content li {
 list-style: none;
}

.news-content p {
 margin-bottom: 28px;
}

/* レスポンシブ */
@media (max-width: 768px) {
 .news-detail {
  padding: 30px 15px 80px;
 }

 .news-header {
  flex-direction: column;
  gap: 12px;
  padding-left: 18px;
 }

 .news-header .title {
  font-size: 22px;
 }

 .news-content {
  font-size: 16px;
 }
}

/* メンバー各ページ */
.member-detail {
 max-width: 1280px;
 margin: 0 auto;
 margin-top: 15px;
}

.member-card2 {
 display: flex;
 gap: 60px;
}

.member-photo2 img {
 width: 320px;
 height: auto;
 border-radius: 8px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.member-info2 {
 flex: 1;
}

.member-info2 h1 {
 font-size: 38px;
 font-weight: 700;
 color: #0055aa;
 margin-bottom: 8px;
}

.roman {
 font-size: 24px;
 font-weight: 400;
 color: #666;
 margin-left: 12px;
}

/* 研究テーマ */
.research-section2 h2 {
 font-size: 19px;
 font-weight: 700;
 color: #0055aa;
 margin: 32px 0 14px;
 position: relative;
}

.research-section2 h2::after {
 content: "";
 position: absolute;
 bottom: -2px;
 left: 0;
 width: 95px;
 height: 3px;
 background: #0055aa;
}

.research-section2 p {
 font-size: 16px;
 line-height: 1.85;
 color: #333;
}

/* ボタン */
.buttons-mem {
 margin-top: 40px;
 display: flex;
 gap: 16px;
 text-align: center;
 width: 100%;
}

.btn-mem {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background: #0055aa;
 color: white;
 padding: 12px 28px;
 font-size: 18px;
 font-weight: 600;
 text-decoration: none;
 transition: all 0.3s;
 width: 50%;
}

.btn-mem:hover {
 background: #091028;
 transform: translateY(-2px);
}

/* 連絡先 */
.contact-section {
 margin-top: 80px;
 max-width: 90%;
 margin: 50px auto 25px;
}

.contact-section h2 {
 font-size: 28px;
 font-weight: 700;
 color: #0055aa;
 margin-bottom: 24px;
 position: relative;
 padding-bottom: 12px;
 border-bottom: solid 1px #555;
}

.contact-section h2::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 width: 125px;
 height: 3px;
 background: #0055aa;
}

.contact-grid {
 display: grid;
 gap: 40px;
 font-size: 15px;
 line-height: 1.7;
}

.contact-item strong {
 color: #0055aa;
}

/* スマホ対応 */
@media (max-width: 768px) {
 .member-card2 {
  flex-direction: column;
  padding: 30px 20px;
  gap: 30px;
 }

 .member-photo2 img {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
 }

 .member-info2 h1 {
  font-size: 28px;
 }

 .roman {
  font-size: 20px;
  margin-left: 0;
  display: block;
 }

 .buttons-mem {
  flex-direction: column;
 }
}

/* リスト横並び */

.cr {
 position: relative;
 border-left: solid 3px #13448d;
 padding-left: 15px;
 margin-top: -20px;
 padding-top: 20px;
 margin-bottom: 30px;
}

.cr::after {
 content: ""; /* 擬似要素には content が必須 */
 display: block;
 width: 8px; /* 丸の幅 */
 height: 8px; /* 丸の高さ */
 background-color: #13448d; /* 丸の色 */
 border-radius: 50%; /* 丸にする */
 position: absolute;
 left: -5px; /* 線の右端に配置 */
 bottom: -4px; /* 線の位置に合わせて調整 */
}

.cr dl {
 display: flex;
 flex-wrap: nowrap;
 text-align: left;
}

.cr dt {
 min-width: 95px;
 width: 100px;
 margin: 4px 0;
}

.cr dd {
 text-align: left;
 margin: 4px 0;
}

.cr ul,
.cr ol {
 padding-left: 15px;
}

.cr ol {
 padding-left: 25px;
}

.cr ul li {
 list-style: disc;
 margin: 5px 0;
}