@charset "UTF-8";

/* 基本 */
:root {
	--v-space: clamp(35px, 9vw, 75px);
	--v-space-s: clamp(25px, 9vw, 45px);
	--v-space-m: clamp(57px, 9vw, 78px);
	--key-color: #283c64;
	--research-color: #68aed7;
	--members-color: #d3d35a;
	--achievement-color: #89c33f;
	--joining-color: #ffaac8;
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: #fff;
	color: #222222;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

h1, h2, h3, h4, h5, h6, p, figure, ul, dl, dd {
	margin: 0;
	padding: 0;
	list-style: none;
}

p {
	line-height: 1.8;
}

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

a:hover {
	filter: brightness(90%) contrast(120%);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

.b {
	font-weight: 700;
}

.ita {
	font-style: italic;
}

/* 横幅と左右の余白 */
.w-container {
	width: min(92%, 1166px);
	margin: auto;
	position: relative;
}

/* ヘッダー */
.header {
	width: 100%;
	height: 100px;
	background-color: #ffffff;
	box-shadow: 0 0 7px rgba(51, 51, 51, 1);
	position: fixed;
	z-index: 3;
}

.header-container {
	width: min(100%, 1200px);
	height: 100px;
	margin: auto;
	position: relative;
	background-image: linear-gradient(var(--key-color), var(--key-color));
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 5px 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

/* サイト名 */
.site {
    display: flex;
    flex-wrap: wrap;
	align-items: flex-end;
	column-gap: 10px;
	margin-left: 4%;
}
@media (min-width: 768px) {
	.site {
		margin-left: 2%;
	}
}

.site a {
    display: flex;
    flex-direction: column;
    color: var(--key-color);
	font-weight: 600;
    line-height: 1.2;
}

.site a .university {
	font-size: clamp(15px, 0.975609756vw + 11.34146341px, 25px);
}

.site a .faculty {
	font-size: clamp(24px, 1.56097561vw + 18.14634146px, 40px);
}

.site .eng-university-name {
	margin-bottom: 5px;
	font-size: clamp(8px, 0.585365854vw + 5.804878049px, 14px);
    font-weight: 300;
    line-height: 1.2;
}

/* ナビゲーションボタン */
.navbtn {
	outline: none;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--key-color);
	font-size: 20px;
	margin-right: 4%;
}

.open .navbtn {
	z-index: 110;
	color: #ffffff;
}

.navbtn .fa-bars {
	display: revert;
	padding: 1px 5px;
	border: 1px solid #527585;
}
.open .navbtn .fa-bars {
	display: none;
}

.navbtn .fa-times {
	display: none;
}
.open .navbtn .fa-times {
	display: revert;
	padding: 1px 5px;
	border: 1px solid transparent;
}

@media (min-width: 768px) {
	.navbtn {
		display: none;
	}
}

/* ナビゲーションメニュー：モバイル */
@media (max-width: 767px) {
	.nav {
		position: fixed;
		inset: 0 -100% 0 100%;
		z-index: 100;
		background-color: rgba(81, 117, 133, 0.85);
		transition: transform 0.3s;
	}

	.open .nav {
		transform: translate(-100%, 0);
	}

	.open body {
		position: fixed;
		overflow: hidden;
	}

	.nav ul {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		gap: 40px;
		color: #ffffff;
	}

	/* .nav-hero {
		display: none;
	} */
	.hero-nav {
		display: none;
	}

}

/* ナビゲーションメニュー：PC */
@media (min-width: 768px) {
	.nav {
		height: 100px;
		display: flex;
		align-items: flex-end;
	}
	.nav ul {
		display: flex;
		gap: 10px;
		margin-bottom: 7px;
		font-size: 14px;
		color: var(--key-color);
	}
	.nav ul li:nth-last-child(n+3) {
		display: none;
	}
	.li-info a {
		display: flex;
		align-items: center;
		gap: 3px;
		background:linear-gradient(var(--key-color), var(--key-color)) no-repeat;
		background-position:16px bottom;
		background-size:0% 1px;
		transition: background .5s, width .5s ease-in-out;
	}
	.li-info a::before {
		content: '';
		display: inline-block;
		background-image: url(../images/ico_info.svg);
		background-repeat: no-repeat;
		background-size: contain;
		width: 13px;
		height: 13px;
		vertical-align: middle;
	}
	.li-info a:hover {
		background-size:100% 1px;
		transition: background .5s, width .5s ease-in-out;
	}
	.li-cont a {
		display: flex;
		align-items: center;
		gap: 3px;
		background:linear-gradient(var(--key-color), var(--key-color)) no-repeat;
		background-position:16px bottom;
		background-size:0% 1px;
		transition: background .5s, width .5s ease-in-out;
	}
	.li-cont a:hover {
		background-size:100% 1px;
		transition: background .5s, width .5s ease-in-out;
	}
	.li-cont a::before {
		content: '';
		display: inline-block;
		background-image: url(../images/ico_contact.svg);
		background-repeat: no-repeat;
		background-size: contain;
		width: 13px;
		height: 13px;
		vertical-align: middle;
	}
}

/* ヒーロー */
.hero {
	/* height: clamp(250px, 23.41463415vw + 162.195122px, 490px);
	background-image: url(../images/bg_hero_sp.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover; */
	position: relative;
	top: 100px;
}
@media (min-width: 768px) {
	/* .hero.home {
		background-image: url(../images/bg_hero_pc.jpg);
	} */
}

.hero-nav-container {
	width: min(100%, 1200px);
	margin: auto;
	/* height: 100%; */
	position: relative;
}

@media (min-width: 768px) {
	.hero-nav {
		width: min(100%, 1200px);
		position: fixed;
		z-index: 2;
		background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 5%, rgba(255, 255, 255, 0.4) 95%, rgba(255, 255, 255, 0) 100%);
	}
	.hero-nav ul {
		/* width: calc(16.66666667% * 5); */
		width: min(100%, 980px);
		margin: auto;
		display: flex;
		justify-content: space-between;
		font-weight: bold;
	}
	.hero-nav ul li {
		width: 100%;
	}
	.hero-nav ul li a {
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(to bottom, transparent, transparent), linear-gradient(#527585, #527585), linear-gradient(transparent, transparent);
		background-position: center top, left -1px center, center center;
		background-repeat: no-repeat;
		background-size: 100% 5px, 2px 60%, 100% 100%;
		color: var(--key-color);
		transition: color .5s;
		font-size: 0.9em;
	}
	.hero-nav ul li a:hover {
		width: calc(100% + 1px);
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent), linear-gradient(transparent, transparent), linear-gradient(var(--key-color), var(--key-color));
		color: #fff;
		transition: color 1s;
	}

	.hero-nav ul li:last-child a {
		background-image: linear-gradient(to bottom, transparent, transparent), linear-gradient(#527585, #527585), linear-gradient(#527585, #527585), linear-gradient(transparent, transparent);
		background-position: center top, left center, right center, center center;
		background-repeat: no-repeat;
		background-size: 100% 5px, 1px 60%, 1px 60%, 100% 100%;
	}
	.hero-nav ul li:last-child a:hover {
		width: calc(100% + 1px);
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(var(--key-color), var(--key-color));
		color: #fff;
	}
	.hero-nav ul li:last-child.active a {
		width: calc(100% + 1px);
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), linear-gradient(var(--key-color), var(--key-color));
		color: #fff;
	}

	.hero-nav ul li.active a {
		width: calc(100% + 1px);
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent), linear-gradient(transparent, transparent), linear-gradient(var(--key-color), var(--key-color));
		color: #fff;
		filter: brightness(100%) contrast(100%);
		pointer-events: none;
	}
	.hero-nav ul li.active a:hover {
		cursor: default;
	}
	.hero-nav ul li:last-child.active a:hover {
		cursor: default;
	}
}

/* トップページスライダー */
.swiper-wrapper {
	width: 100%;
	height: 250px;
}
@media (min-width: 768px) {
	.swiper-wrapper {
		width: 100%;
		height: 490px;
	}
}

.swiper-slide {
	width: 100%;
  	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
}

.swiper-slide:nth-child(4n+1) {
	background-image: url(../images/bg_hero_sp_01.jpg);
	background-position: top center;
}
.swiper-slide:nth-child(4n+2) {
	background-image: url(../images/bg_hero_sp_02.jpg);
	background-position: top center;
}
.swiper-slide:nth-child(4n+3) {
	background-image: url(../images/bg_hero_sp_03.jpg);
	background-position: center;
}
.swiper-slide:nth-child(4n+4) {
	background-image: url(../images/bg_hero_sp_04.jpg);
	background-position: center;
}
@media (min-width: 768px) {
	.swiper-slide:nth-child(4n+1) {
		background-image: url(../images/bg_hero_pc_01.jpg);
		background-position: top center;
	}
	.swiper-slide:nth-child(4n+2) {
		background-image: url(../images/bg_hero_pc_02.jpg);
		background-position: top -150px center;
	}
	.swiper-slide:nth-child(4n+3) {
		background-image: url(../images/bg_hero_pc_03.jpg);
		background-position: center;
	}
	.swiper-slide:nth-child(4n+4) {
		background-image: url(../images/bg_hero_pc_04.jpg);
		background-position: center;
	}
}

/* 子ページバナー */
.page-navi {
	padding: var(--v-space) 0;
	background-color: rgba(40, 60, 100, 0.2);
	position: relative;
	top: 100px;
}

.page-navi-container {
	width: min(100%, 1200px);
	margin: auto;
	height: 100%;
}

.page-navi-body {
	display: grid;
	/* gap: clamp(30px, 4vw, 37px); */
	gap: 20px;
	width: min(92%, 980px);
	margin: auto;
}

@media (min-width: 768px) {
	.page-navi-body {
		grid-template-columns: repeat(4, 1fr);
	}
}

.page-navi-card {
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 11px;
}

.page-navi-card.research {
	background-image: linear-gradient(var(--research-color), var(--research-color));
}

.page-navi-card.members {
	background-image: linear-gradient(var(--members-color), var(--members-color));
}

.page-navi-card.achievement {
	background-image: linear-gradient(var(--achievement-color), var(--achievement-color));
	color: var(--achievement-color);
}

.page-navi-card.joining {
	background-image: linear-gradient(var(--joining-color), var(--joining-color));
}

.page-navi-card h2 {
	color: var(--key-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 20px;
	line-height: 1.2;
}
@media (min-width: 768px) {
	.page-navi-card h2 {
		font-size: 0.85em;
	}
}

.page-navi-card h2 span {
	font-size: 14px;
	font-weight: normal;
}
@media (min-width: 768px) {
	.page-navi-card h2 span {
		font-size: 0.65em;
	}
}

.page-navi-card .icon {
	width: 69px;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}

.page-navi-card .icon img {
	width: auto;
	height: 62px;
}

/* トップページお知らせ一覧 */
.top-news {
	padding: var(--v-space-m) 0;
	position: relative;
	top: 100px;
}

.top-news-container {
	width: min(100%, 1200px);
	margin: auto;
	height: 100%;
}

.top-news-body {
	width: min(82%, 980px);
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

@media (min-width: 768px) {
	.top-news-body {
		
	}
}

.top-news-body .heading {
	color: var(--key-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 20px;
	line-height: 1.2;
}

.top-news-body .heading span {
	font-size: 0.7em;
	font-weight: normal;
}

.top-news-body .heading::before {
	content: '';
	display: inline-block;
	background-image: url(../images/ico_info.svg);
	background-repeat: no-repeat;
	background-size: contain;
	width: 26px;
	height: 26px;
	vertical-align: middle;
	margin-bottom: 10px;
}

.top-news-body .more a {
	display: flex;
	align-items: baseline;
	gap: 5px;
	font-size: 15px;
}

.top-news-body .more a span {
	font-size: .5em;
	position: relative;
	bottom: 1px;
}

.top-news-list {
	width: min(100%, 550px);
	margin: auto;
	display: flex;
	flex-direction: column;
	gap: 15px;
	font-size: 12px;
}

.top-news-list > li {
	display: flex;
	gap: clamp(10px, 4vw, 40px);
}
@media (min-width: 768px) {
	.top-news-list > li {
		
	}
}

.top-news-list > li .up_ymd {
	/* width: 67px; */
	color: var(--key-color);
	font-weight: bold;
	width:90px;
}

.top-news-list > li .title {
	flex: 1;
}

.top-news-list > li .title a {
	/*color: #4d4d4d;*/;
	color: blue;
}

/* トップページバナー一覧 */
.top-banner {
	padding: var(--v-space-m) 0;
	position: relative;
	top: 100px;
}

.top-banner-container {
	width: min(100%, 1200px);
	margin: auto;
	height: 100%;
}

.top-banner-body {
	width: min(82%, 980px);
	margin: auto;
}

.top-banner-list {
	display: grid;
	gap: 20px;
}

@media (min-width: 768px) {
	.top-banner-list {
		grid-template-columns: repeat(4, 1fr);
		gap: calc(20px / 3);
	}
}

.top-banner-list li a {
	display: flex;
	justify-content: center;
}

/* フッター */

.footer {
	height: clamp(215px, 17.07317073vw + 150.9756098px, 390px);
	background-image: url(../images/bg_footer.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	top: 100px;
	overflow-x:hidden;
}

.footer::before {
	width: 100%;
	height: 100%;
	content: '';
	position: absolute;
	background-color: var(--key-color);
	mix-blend-mode: multiply;
}

.footer-container {
	width: 100%;
	height: 100%;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	color: #fff;
	position: relative;
	z-index: 1;
}

@media (min-width: 768px) {
	.footer-container {
		justify-content: space-between;
	}
}

.footer-menu {
	display: none;
}

@media (min-width: 768px) {
	.footer-menu {
		height: 32px;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		gap: 10px;
		font-size: 14px;
	}

	.footer-menu li {
		display: flex;
		align-items: center;
	}

	.footer-menu li:not(:last-child) {
		background-image: linear-gradient(#fff, #fff);
		background-position: right center;
		background-repeat: no-repeat;
		background-size: 1px 60%;
		padding-right: 10px;
	}

	.footer-menu li a {
		background:linear-gradient(#00ffff, #00ffff) no-repeat;
		background-position:left bottom;
		background-size:0% 1px;
		transition: background .5s, width .5s ease-in-out;
	}
	.footer-menu li a:hover {
		background-size:100% 1px;
		transition: background .5s, width .5s ease-in-out;
	}
}

.footer-site {
	margin-bottom: 17px;
}

@media (min-width: 768px) {
	.footer-site {
		margin-bottom: 0;
	}
}

.footer-site dl {
	text-align: center;
}

.footer-site dt {
	margin-bottom: 5px;
	font-size: clamp(18px, 29.09090909vw + 140.9090909px, 20px);
}

.footer-site dt span {
	padding-left: .5em;
}

.footer-site dd {
	font-size: clamp(12px, 29.09090909vw + 140.9090909px, 13px);
}

.footer-copy {
	width: 100%;
	height: 40px;
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
	background-color: var(--key-color);
	font-size: clamp(9px, 0.292682927vw + 7.902439024px, 12px);
	line-height: 1.2;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

/*PAGE TOP*/
.page-top {
	position: fixed;
	right: 10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

.page-top a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
}

.page-top a::before {
	content: '';
	display: inline-block;
	background-image: url(../images/ico_up-arrow.svg);
	background-repeat: no-repeat;
	background-size: contain;
	width: 17px;
	height: 12px;
	vertical-align: middle;
}

.page-top.UpMove {
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

.page-top.DownMove {
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

/* 子ページヒーローイメージ */
.hero-container {
	height: clamp(150px, 14.63414634vw + 95.12195122px, 300px);
	background-image: url(../images/bg_hero_sp_02.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hero-container.research {
	background-image: url(../images/bg_hero_research.jpg);
}

.hero-container.members {
	background-image: url(../images/bg_hero_members.jpg);
}

.hero-container.achievement {
	background-image: url(../images/bg_hero_achievement.jpg);
}

.hero-container.joining {
	background-image: url(../images/bg_hero_joining.jpg);
}

@media (min-width: 768px) {
	.hero-container {
		background-image: url(../images/bg_hero_pc_02.jpg);
		background-position: top -160px center;
	}

	.hero-container.research {
		background-position: top -200px center;
	}

	.hero-container.members {
		background-position: top -200px center;
	}

	.hero-container.achievement {
		background-position: center center;
	}

	.hero-container.joining {
		background-position: top -200px center;
	}
}

/* -----------------
 お知らせ一覧ページ
-------------------- */

.news-list {
	padding: var(--v-space-m) 0;
	position: relative;
	top: 100px;
}

.news-list-container {
	width: min(100%, 1200px);
	margin: auto;
	height: 100%;
}

.news-list-body {
	width: min(82%, 980px);
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

@media (min-width: 768px) {
	.news-list-body {
		
	}
}

.news-list-body .heading {
	color: var(--key-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 24px;
	line-height: 1.2;
}

.news-list-body .heading span {
	font-size: 0.7em;
	font-weight: normal;
}

.news-list-body .heading::before {
	content: '';
	display: inline-block;
	background-image: url(../images/ico_info.svg);
	background-repeat: no-repeat;
	background-size: contain;
	width: 26px;
	height: 26px;
	vertical-align: middle;
	margin-bottom: 10px;
}

.news-list-body .more a {
	display: flex;
	align-items: baseline;
	gap: 5px;
	font-size: 15px;
}

.news-list-body .more a span {
	font-size: .5em;
	position: relative;
	bottom: 1px;
}

.news-list-list {
	width: min(100%, 500px);
	margin: auto;
	display: flex;
	flex-direction: column;
	gap: 15px;
	font-size: 12px;
}

.news-list-list > li {
	display: flex;
	gap: clamp(10px, 4vw, 40px);
}

.news-list-list > li .up_ymd {
	/* width: 67px; */
	color: var(--key-color);
	font-weight: bold;
}

.news-list-list > li .title {
	flex: 1;
}

.news-list-list > li .title a {
	color: #4d4d4d;
}

/* -----------------
 お知らせ詳細ページ
-------------------- */

.new-detail {
	padding: var(--v-space-m) 0;
	position: relative;
	top: 100px;
}

.new-detail-container {
	width: min(100%, 1200px);
	margin: auto;
	height: 100%;
}

.new-detail-body {
	width: min(92%, 980px);
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

@media (min-width: 768px) {
	.new-detail-body {
		
	}
}

.new-detail-body .pNav {
	display: none;
}
/* @media (min-width: 768px) {
	.new-detail-body .pNav {
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 0.8em;
	}

	.new-detail-body .pNav a {
		color: var(--key-color);
	}
} */

.new-detail-body .heading {
	color: var(--key-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 24px;
	line-height: 1.2;
}

.new-detail-body .heading span {
	font-size: 0.7em;
	font-weight: normal;
}

.new-detail-body .heading::before {
	content: '';
	display: inline-block;
	background-image: url(../images/ico_info.svg);
	background-repeat: no-repeat;
	background-size: contain;
	width: 26px;
	height: 26px;
	vertical-align: middle;
	margin-bottom: 10px;
}

.new-detail-body .up_ymd {
	color: var(--key-color);
}

/* -----------------
 子ページ共通
-------------------- */

.child-detail {
	padding: var(--v-space-m) 0;
	position: relative;
	top: 100px;
	border-top: 5px solid;
}

.child-detail a {
    background: linear-gradient(blue, blue) no-repeat;
    background-position: left bottom;
    background-size: 0% 1px;
    transition: background .5s, width .5s ease-in-out;
	color: blue;
}

.child-detail a:hover {
	background-size:100% 1px;
	transition: background .5s, width .5s ease-in-out;
}

.child-detail.research {
	border-color: var(--research-color);
}
.child-detail.members {
	border-color: var(--members-color);
}
.child-detail.achievement {
	border-color: var(--achievement-color);
}
.child-detail.joining {
	border-color: var(--joining-color);
}

.child-detail-container {
	width: min(100%, 1200px);
	margin: auto;
	height: 100%;
}

.child-detail-body {
	width: min(92%, 980px);
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

@media (min-width: 768px) {
	.child-detail-body {
		
	}
}

.child-detail-body .heading {
	color: var(--key-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 24px;
	line-height: 1.2;
}

.child-detail-body .heading span {
	font-size: 0.7em;
	font-weight: normal;
}

.child-detail-body .heading::before {
	content: '';
	display: inline-block;
	background-image: url(../images/ico_info.svg);
	background-repeat: no-repeat;
	background-size: contain;
	width: 26px;
	height: 26px;
	vertical-align: middle;
	margin-bottom: 10px;
}

.child-detail-body .heading.research::before {
	background-image: url(../images/ico_research.svg);
	width: 30px;
	height: 35px;
}

.child-detail-body .heading.members::before {
	background-image: url(../images/ico_members.svg);
	width: 30px;
	height: 35px;
}

.child-detail-body .heading.achievement::before {
	background-image: url(../images/ico_achievement.svg);
	width: 30px;
	height: 35px;
}

.child-detail-body .heading.joining::before {
	background-image: url(../images/ico_joining.svg);
	width: 30px;
	height: 35px;
}

/* 研究内容 */
.research-container {
    /* height: 100%; */
}

.research-body {
	padding: var(--v-space-s) 0;
}

/* 業績紹介 */
.achievement mark {
	background-color: var(--achievement-color);
	padding: 3px 5px;
}

.achievement .underline {
	text-decoration: underline var(--achievement-color);
	text-underline-position: under;
	text-decoration-thickness: 2px;
}

.achievement-container {
    height: 100%;
}

.achievement-body {
	padding: var(--v-space-s) 0;
}

.achievement-body .year-link {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	/*gap: 5px;*/
    margin: auto;
}
.achievement-body .year-link li {
	border-left: 1px solid #333;
	padding: 0 12px;
	height: 16px;
	display: flex;
	align-items: center;
}
.achievement-body .year-link li:last-child {
	border-right: 1px solid #333; 
}

/*@media (min-width: 768px) {
	.achievement-body .year-link {
		gap: 10px;
		
	}
}*/
@media (max-width: 767px) {
	.achievement-body .year-link li {
		margin-top: 10px;
	}
}

.achievement-body :where(h1, h2, h3, h4, h5, h6, p, ul dl) {
	margin-top: revert;
	margin-bottom: revert;
	padding: revert;
	list-style: revert;
}

.achievement-body h2::after{
    display: block;
    content: '';
    width: 160px;
    height: 0px;
    border-top: solid 1px var(--achievement-color);
    margin-top: 0.6em;
}
.child-detail-body h2{
	color: rgba(0,0,0,0.6);
	text-shadow: 2px 4px 4px rgba(0,0,0,0.2), 0px -2px 8px rgba(255,255,255,0.3);
	text-align:center;
}
.child-detail-body h2::after{
    display: block;
    content: '';
    width: 160px;
    height: 0px;
    border-top: solid 1px var(--achievement-color);
    margin-top: 0.6em;
}


.achievement-body h3 {
	color: rgba(0,0,0,0.6);
	text-shadow: 2px 4px 4px rgba(0,0,0,0.2),
				 0px -2px 8px rgba(255,255,255,0.3);
}

.achievement-dl {
	margin-bottom: 20px;
	font-size: clamp(14px, 1.6vw, 16px);
}

.achievement-dl a {
	word-break: break-all;
}

.achievement-dl dt {
	margin-bottom: 5px;
	font-weight: 700;
}

/* メンバー紹介 */
.members-container {
    height: 100%;
}

.members-body {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 25px;
	padding: var(--v-space) 0;
}

@media (min-width: 768px) {
	.members-body {
		grid-template-columns: repeat(3, 1fr);
	}
}

.members-list {
	border-bottom: 1px solid var(--members-color);
}

.members-list:nth-of-type(3) {
	grid-column: 1;
	grid-row: 3;
}
.members-list:nth-of-type(6) {
	grid-column: 2;
	grid-row: 3;
}

@media (min-width: 768px) {
	.members-list:nth-of-type(3) {
		grid-column: 3;
		grid-row: 1;
	}
	.members-list:nth-of-type(6) {
		grid-column: 3;
		grid-row: 2;
	}
}

.members-list .name {
	height: 2.5em;
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0 .5em;
	font-size: 12px;
}

.members-list .name span {
	font-size: clamp(14px, 2vw, 16px);
	font-weight: 700;
}

.organization {
	height: 100%;
	min-height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 1px solid var(--members-color);
}

.organization-list {
	font-size: clamp(12px, 2vw, 16px);
}

.organization-list li {
	display: flex;
	justify-content: space-between;
	gap: 0.5em;
}

.organization-list li span {
	font-weight: 700;
	text-align: right;
}

.organization-list.subject dt {
	margin-bottom: 5px;
	font-size: clamp(12px, 2vw, 16px);
	font-weight: 700;
}
@media (min-width: 768px) {
	.organization-list.subject dt {
		
	}
}

.organization-list.subject dd {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5em;
	font-size: clamp(10px, 2vw, 14px);
}
@media (min-width: 768px) {
	.organization-list.subject dd {
		
	}
}

.organization-list.subject dd span {
	font-weight: 700;
	text-align: right;
}

/* 配属を希望する３年生へ */
.joining mark {
	background-color: var(--joining-color);
	padding: 3px 5px;
}

.joining .underline {
	text-decoration: underline var(--joining-color);
	text-underline-position: under;
	text-decoration-thickness: 2px;
}

.joining-container {
    height: 100%;
}

.joining-body {
	padding: var(--v-space) 0;
	font-size: clamp(16px, 2.4vw, 18px);
}

.joining-body :where(h1, h2, h3, h4, h5, h6, p, ul dl) {
	margin-top: revert;
	margin-bottom: revert;
	padding: revert;
	list-style: revert;
}

.joining-body h2::after {
    display: block;
    content: '';
    width: 160px;
    height: 0px;
    border-top: solid 1px var(--joining-color);
    margin-top: 0.6em;
}

.joining-body h3 {
	color: rgba(0,0,0,0.6);
	text-shadow: 2px 4px 4px rgba(0,0,0,0.2),
				 0px -2px 8px rgba(255,255,255,0.3);
	padding-top: 20px;
}

.joining-body p {
	margin: 1.8em 0;
}

.joining-body > :first-child {
	margin-top: 0;
}

.joining-body > :last-child {
	margin-bottom: 0;
}

.float-wrap {
	display: flow-root;
}

.float-wrap > :first-child {
	margin-top: 0;
}

.float-wrap > :last-child {
	margin-bottom: 0;
}

.float-wrap p:nth-of-type(1) {
	margin-top: 0;
}

.float-wrap > :last-child {
	margin-bottom: 0;
}

.flex-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px;
}
@media (min-width: 768px) {
	.flex-wrap {
		flex-wrap: nowrap;
	}
}

.flex-wrap p:nth-of-type(1) {
	margin-top: 0;
}

.flex-wrap > :last-child {
	margin-bottom: 0;
}

.joining-research_img01 {
	width: 250px;
	height: auto;
	margin: 0 auto 20px;
}
@media (min-width: 768px) {
	.joining-research_img01 {
		float: right;
		margin-left: 20px;
		margin-bottom: 10px;
	}
}

.joining-research_img02 {
	width: 100%;
	height: auto;
	margin: 0 auto 20px;
}
@media (min-width: 768px) {
	.joining-research_img02 {
		width: 400px;
		float: right;
		margin-left: 20px;
		margin-bottom: 10px;
	}
}

.joining-bbb {
	margin-bottom: 30px;
}

.joining-bbb p {
	flex: 1;
}

.joining-bbb figure {
	width: 100%;
	height: auto;
}
@media (min-width: 768px) {
	.joining-bbb figure {
		width: 400px;
		height: auto;
	}
}

.joining-bbb_list {
	padding: var(--v-space-s);
	border: 1px solid var(--joining-color);
	display: flex;
	flex-direction: column;
	gap: 10px;
}




.post h3 {
	margin: 1em 0 0.5em;
	font-size: clamp(12px, 2vw, 20px);
	min-height: 0vw;
}

.post p {
	max-width: 20em;
	font-size: clamp(10px, 1.6vw, 14px);
	min-height: 0vw;
}

.post img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}

@supports not (aspect-ratio: 3 / 2) {
	.post img {
		height: 180px;
	}
}

.ol_part1 li{
	list-style-type:none;
	counter-increment:cnt;
}
.ol_part1 li::before{
	content:counter(cnt)".";
	display:inline-block;
	margin-left:-1.5em;
	width:1.5em;
}    
.ol_part2 li{
	list-style-type:none;
	counter-increment:cnt;
}
.ol_part2 li::before{
	content:counter(cnt)")";
	display:inline-block;
	margin-left:-1.5em;
	width:1.5em;
}
.ol_part3 li{
	list-style-type:none;
	counter-increment:cnt;
}
.ol_part3 li::before{
	content: "(" counter(cnt) ")";
	display:inline-block;
	margin-left:-1.5em;
	width:1.5em;
}
.ul_disc{
	list-style: disc;
	margin-left:20px;
}
.ov_hidden{
	overflow:hidden;
}
.floatL{
	float:left;
}
.floatR{
	float:right;
}
.joiningL p.text{
	width:560px;
	float:left;
}
.joiningL img{
	max-width:100%;
	margin:20px 10px;
}
.img_parkinsons {
	width: 100%;
	
}
.img_parkinsons img {
	max-width: 100%;
	margin: 10px auto;
}

@media screen and (max-width: 479px) {
	.joiningL .text{
		float:none;
	}
	
	.joiningL p.text{
		width:100%;
		float:left;
	}
}

/*
.joining_wrap img {
	float: right;
	max-width: 400px;
	margin: 20px;
}
@media (max-width: 767px) {
	.joining_wrap img {
		float: none;
		margin: 20px auto;
	}
}
*/