@charset "utf-8";

/* --------------- 横型アコーディオン --------------------------------------- */
.accordion {
	display: flex;
	width: 100%;
	height: 40vw;
	max-height: 680px;
	overflow: hidden;
	margin:30px auto 50px;
	box-shadow:1px 1px 3px #666;
}
@media screen and (max-width:768px) {
.accordion {
	margin:15px auto;
}}/* アコーディオン大枠 */

.accordion .item {
  	flex: 1;
  	transition: flex 0.4s ease-in-out, filter 0.4s ease-in-out;
  	position: relative;
  	overflow: hidden;
}/* アコーディオン写真枠 */

.accordion .item:not(:last-child) {
	border-right:1px solid #fff;
}/* アコーディオン写真枠線設定 */

.accordion .item img {
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	pointer-events: none;
}/* アコーディオン写真設定 */

.accordion:not(:hover) .item.active { flex: 10; }/* 初期状態：hoverしていない時 activeは伸長 */
.accordion:not(:hover) .item:not(.active) img { filter: grayscale(100%) blur(1px); }/* 初期状態：active 以外はグレースケール ＋ ぼかし */
.accordion:hover .item { flex: 1; }/* ホバー時：全て一旦縮む */
.accordion:hover .item img { filter: grayscale(100%) blur(1px); }/* ホバーしていない状態の画像はグレースケール ＋ ぼかし */
.accordion:hover .item:hover { flex: 10; }/* ホバー時：ホバーした画像だけ大きく */
.accordion:hover .item:hover img { filter: grayscale(0%) blur(0); }/* ホバー時：ホバーした画像だけ明るく＆ぼかし解除 */



/* ----------- 教員 ----------------------- */
.wrap_members {
	display: flex;
	flex-direction:row;
	gap:30px 20px;
	margin:15px auto 80px;
	width:98%;
}
@media screen and (max-width:768px) {
.wrap_members {
	flex-direction: column;
	margin:15px auto 50px;
}}/* スタッフ紹介2人 写真+プロフィール大枠 */

.wrap_person {
	display: flex;
	flex-direction: column;
	width:100%;
	margin:0 auto;
	box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
	background-image: conic-gradient(#EFEFEF 90deg, transparent 90deg 180deg, #EFEFEF 180deg 270deg, transparent 270deg);
	background-size: 35px 35px;
	background-color: #ffffff;
}/* スタッフ紹介個別　写真＋プロフィール枠（チェック模様）*/

.member_img {
	flex:1;
	width:100%;
	padding:8px;
}/* スタッフ紹介（写真）枠*/

.member_img img {
	width:100%;
	height:100%;
	object-fit: cover;
	background:#fff;
	border-radius: 5px;
	box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}/* スタッフ紹介（写真）*/

.profile {
	width:100%;
	padding:10px;
	background-color:rgba(0, 0, 0, 0.1);
	flex:1;
	position: relative;
	display:flex;
	flex-direction: column;
}
@media screen and (max-width:768px) {
.profile {
	margin:0;
}}/* プロフィール枠 */

.profile div.position_name {
	margin-bottom:20px;
	border-top:2px solid #1E5799;
	border-bottom:2px solid #1E5799;
	padding:15px 5px;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.7);
	}
@media screen and (max-width:768px) {
.profile div.position_name {
	margin:0 0 10px 0;
	padding:10px;
	line-height: 1.5;
	text-align: center;
}}/* スタッフ紹介（役職・名前）枠設定 */

.profile div.position_name p:first-child {
	font-size: 2.4rem;
	font-weight: 700;
	margin-bottom: 5px;
}/* 名前 */

.profile div.position_name p:first-child span {
	font-family: "Times New Roman", "Times", serif;
	font-size: 1.45rem;
	color:#5f5f5f;
	margin-left:15px;
}/* 名前・ローマ字 */

.profile details {
	width:100%;
	margin-bottom: 5px;
}/* 教育と研究 担当講義 details設定 */

.profile summary {
	height:50px;
	display: block;
	cursor: pointer;
	padding-left:10px;
	background:linear-gradient(#FEFEFE, #F3F5F5);
	border:1px solid #999;
	border-left:8px solid #999;
	font-weight: 700;
	font-size:2rem;
	line-height: 50px;
	position: relative;
}/* summaryの設定　三角印を消す */

.profile details[open] summary {
	border-left:8px solid #1E5799;
}/* details open時のsummar設定 */

.profile summary::-webkit-details-marker {
	display: none; 
}/* summaryの三角印を消す（Chrome_Safari) */
	
.profile details summary:hover {
	background:linear-gradient(#F3F5F5, #FEFEFE);
}/* summaryのホバー時設定 */

.profile details summary::after {
	font-family: "Font Awesome 7 Free";
	content: "\f0fe";
	font-weight: 700;
	color:#666;
	position: absolute;
	top:0;
	right:20px;
	transition:0.3s;
}/* summaryの開く印（+）設定 */

.profile details[open] summary::after {
	content: "\f146";
	transform: rotate(180deg);
}/* summarの閉じる印（-）設定 */

.profile details .details_text {
	border:1px solid #999;
	border-top:none;
	border-radius: 0 0 4px 4px;
	background-color: rgba(255, 255, 255, 0.7);
	padding:5px 10px;
	text-align:justify;
	text-justify:inter-character;
}
@media screen and (max-width:768px) {
.profile details .details_text {
	font-size:1.7rem;
	line-height: 1.5;
}}/* detailsコンテンツ設定 */

.profile details:not([open])::details-content {
    opacity: 0;
	block-size: 0;
}/* details開閉時のアニメーション設定（閉じているとき）*/

.profile details::details-content {
	overflow: clip;
	transition-duration: 0.5s;
    transition-property: content-visibility, opacity, block-size;
	transition-behavior: allow-discrete;
}/*details開閉時のアニメーション設定（開くとき）*/



/* ----------- 学生 ------------------------------------------------------ */
.member_student {
	width:100%;
 	border-radius: 4px;
	margin:0 auto 50px;
}/* 学生学年ごと大枠 */

.member_student:last-child {
	margin:0 auto;
}/* 学生学年ごと大枠　B4下の余白なし（就職枠が決める） */

/* ----------- 学年枠 ----------------------- */
.member_student > div:first-child {
	font-size:2rem;
	line-height: 2.8;
	font-weight:bold;
	text-align: left;
	margin-bottom: 25px;
	padding-left:95px;
	box-shadow:2px 2px 5px #999;
	position: relative;
	overflow: hidden;
	}
@media screen and (max-width:768px) {
.member_student > div:first-child {
	font-size:1.8rem;
	padding-left:85px;
	margin-bottom: 15px;
}}/* 各学年見出し枠共通 */

.member_student > div:first-child::before {
	position: absolute;
	top: -150%;
	left: -100px;
	width: 180px;
	height: 300%;
	content: "";
	transform: rotate(15deg);
	border-right:1px solid #999;
}/* M2,M1,B4表示枠（共通）*/

.member_student > div:first-child span {
	font-size: 2.4rem;
	letter-spacing: 0.05em;
	position: absolute;
	z-index: 1;
	top: -8px;
	left: 20px;
	display: block;
	color: #fff;
	text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}
@media screen and (max-width:768px) {
.member_student > div:first-child span {
	font-size: 2.2rem;
	top: -7px;
}}/* 学年共通設定 */

.M2 {
	background: #f1f8ff;
}/* M2見出し枠色 */

.M1 {
	background: #f9f4c0;
}/* M1見出し枠色 */
	
.B4 {
	background: #d5ffd3;
}/* B4見出し枠色 */

.M2::before {
	background: #5c9ee7;
}/* M2背景色 */

.M1::before {
	background: #ffa411;
}/* M1背景色 */
			
.B4::before {
	background: #249931;
}/* B4背景色 */

/*-----------学生枠-----------------------*/
.member_student > div:nth-child(2) {
	width:98%;
	margin:0 auto;
	display: flex;
	flex-wrap: wrap;
	gap:10px 0;
	justify-content: space-between;
}
@media screen and (max-width:768px) {
.member_student > div:nth-child(2) {
	flex-direction: column;
	align-items: center;
}}/* 学生紹介欄大枠 */

.member_student div div {
	border:1px solid #999;
	width:48%;
	min-width: 330px;
	display:flex;
	flex-direction: column;
	padding:0px 20px 15px;
}
@media screen and (max-width:768px) {
.member_student div div {
	width:100%;
}}/* 学生個別枠 */

.member_student div.M2 + div div {
	border-left:5px solid #2d588d;
	transition: 0.1s;
}/* 学生個別枠M2の左ボーダー */

.member_student div.M1 + div div {
	border-left:5px solid #bb7826;
	transition: 0.1s;
}/* 学生個別枠M1の左ボーダー */

.member_student div.B4 + div div {
	border-left:5px solid #215c1e;
	transition: 0.1s;
}/* 学生個別枠B4の左ボーダー */

/*-----------ホバー設定-----------------------*/
.member_student div div:hover {
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}/* 学生個別枠 ホバー時の影 */

.member_student div.M2 + div div:hover {
	border-left:8px solid #5c9ee7;
}/* 学生個別枠M2の左ボーダー ホバー時 */

.member_student div.M1 + div div:hover {
	border-left:8px solid #ffa411;
}/* 学生個別枠M1の左ボーダー ホバー時 */

.member_student div.B4 + div div:hover {
	border-left:8px solid #249931;
}/* 学生個別枠B4の左ボーダー ホバー時 */

.member_student div.M2 + div div p:first-child::after, 
.member_student div.M1 + div div p:first-child::after, 
.member_student div.B4 + div div p:first-child::after {
	position: absolute;
	left: 0;
	bottom: -2px;
	content: '';
	width: 100%;
	height: 3px;
	background: #5c9ee7;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform 0.3s;
}/* 学生個別枠M2の名前下線　初期値長さ0 */

.member_student div.M2 + div div p:first-child::after {
	background: #5c9ee7;
}/* M2の名前下線色　ホバー時 */
	
.member_student div.M1 + div div p:first-child::after {
	background: #ffa411;
}/* M1の名前下線色　ホバー時 */

.member_student div.B4 + div div p:first-child::after {
	background: #249931;
}/* B4の名前下線色　ホバー時 */

.member_student div.M2 + div div:hover p:first-child::after, 
.member_student div.M1 + div div:hover p:first-child::after, 
.member_student div.B4 + div div:hover p:first-child::after {
	transform: scale(1, 1);
	transform-origin: left top;
}/* ホバー後、x軸方向に1（相対値）伸長 */	

/* ----------- 名前と研究テーマ ----------------------- */
.member_student div div p:first-child {
	border-bottom:1px solid #036;
	font-size:2rem;
	font-weight: 700;
	padding:30px 0 20px 70px;
	margin-bottom:10px;
	position: relative;
	display: table-cell;
}/* 学生氏名設定 */

.member_student div div p:first-child::before {
	content:"\f2bd";
	font-size:5rem;
	font-family: "Font Awesome 7 Free";
	font-weight: 700;
	position: absolute;
	top:0;
	left:0;
}/* シルエット設定 */

.member_student div div p:last-child {
	margin-top:-5px;
}/* 研究テーマ位置調整 */

/* ----------- 就職先 ----------------------- */
.wrap_jobs {
	width:100%;
	margin:80px auto 50px;
	border:5px solid #dfefff;
	border-radius: 15px;
	padding-top:25px; 
	box-shadow: 0 0 2px #666;
	position: relative;
}
@media screen and (max-width:768px) {
.wrap_jobs {
	margin:80px auto 20px;
}}/* 学生就職大枠設定 */

.jobs {
	width:250px;
	padding: 5px 10px;
	font-size:1.8rem;
	font-weight: 700;
	text-align: center;
	color:#036;
	background: #dfefff;
	box-shadow: 0px 0px 0px 5px #dfefff;
	border: dashed 2px white;
	position: absolute;	
	top:-25px;
	left:50%;
	transform:translateX(-50%);
}/* 学生就職先見出し設定 */

.get_jobs {
	width:90%;
	margin:0 auto 30px;
	display:flex;
	flex-direction: column-reverse;
	gap:30px;
}/* 学生就職先大枠設定 */

.get_jobs dl {
	width:100%;
}/* 学生就職先枠(学年別)設定 */

.get_jobs dt {
	margin:10px 0 5px 5px;
	padding: 2px 5px 2px 40px;
	font-weight:700;
	font-size:1.8rem;
	line-height: 1.8;
	letter-spacing: 0.15em;
	background:linear-gradient(to right, #F1F8FF, transparent);
	position: relative;
	border-radius: 0 10px 10px 0;
}
@media screen and (max-width:768px) {
.get_jobs dt {
	font-size:1.7rem;
	line-height: 1.5;
}}/* 学年表記 */

.get_jobs dt.get_jobs_B4 {
	background:linear-gradient(to right, #dbffdf, transparent);
}/* 学年表記（B4）*/

.get_jobs dt::before {
  	font-family: "Font Awesome 7 Free";
  	content: "\f007";
  	display: inline-block;
	width: 40px;
	height: 40px;
  	color: white;
  	font-weight: 900;
  	text-align: center;
  	line-height: 35px;
	padding-left:3px;
	border-radius: 50%;
  	border: solid 2px #fff;
  	position: absolute;
	top: 20px;
  	left: -10px;
  	background: #5c9ee7;
  	transform: translateY(-50%);
}/* 学年表記（マーク）*/

.get_jobs dt.get_jobs_B4::before {
	background: #249931;
}/* 学年表記（B4）*/

.get_jobs dd {
	width:100%;
	margin-top:10px;
	padding:10px 15px;
	font-size:1.7rem;
	line-height: 1.6;
	text-align:justify;
	text-justify:inter-character;
	border:1px solid #036;
	border-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}/* 就職先 */

	


/*-----------年間行事-----------------------------------------------------------------------------------------------------------------------------年間行事----*/
.events {
	width:85%;
	margin:30px auto 50px;
}
@media screen and (max-width: 768px) {
.events {
	width:100%;
	margin:10px auto 15px;
}}/* 行事枠 */

.events table {
	border-collapse:collapse;
	margin:0 auto;
	border-spacing:0;
	width:100%;
}
@media screen and (max-width: 768px) {
.events table {
	border: 0;
	width:100%;
}}/* 行事表書式 */

.events table caption {
	width:100%;
	caption-side:top;
	font-weight: 700;
	text-align: center;
	font-size: 2rem;
	margin-bottom:10px;
}
@media screen and (max-width: 768px) {
.events table caption {
	font-size: 1.6rem;
}}/* 行事キャプション */

.events table tr {
	background: #fff;
}
@media screen and (max-width: 768px) {
.events table tr {
	display: block;
	margin-bottom: 5px;
	border: 1px solid #00305c;
}}/* 行の背景色(sp画面では月ごとの枠) */

.events table tr:nth-child(even) {
	background: #e0efff;
	}
@media screen and (max-width: 768px) {
.events table tr:nth-child(even) {
	background: #fff;
}}/* 偶数行の背景色 */

.events table th {
	padding: 5px 15px;
	border:1px solid #00305c;
}/* 見出しセルの余白 */
	
.events table td {
	padding: 5px;
	border:1px solid #00305c;
}
@media screen and (max-width: 768px) {
.events table td {
	width:100%;
	display: block;
	font-size: 1.7rem;
	line-height: 1.5;
	text-align: left;
	position: relative;
	padding: 30px 15px 10px 15px;
}}/* tdセルの余白 */
@media screen and (max-width: 768px) {
.events table td::before {
	content: attr(data-label);
	font-weight: bold;
	position: absolute;
	top:2px;
	left: 10px;
	color: #003;
}}/* sp画面での「学年歴」「研究室関連」文字 */

.events table thead {
	font-size:1.8rem;
	}
@media screen and (max-width: 768px) {
.events table thead {
	border: none;
	position: absolute;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	width: 1px;
	}}/*見出しの設定(sp画面ではtheadを見えなくする)*/

.events table thead th {
	padding: 8px 2px;
}/* 見出し(学年歴・研究室関連)フォントサイズ・余白 */

.events table thead tr {
	background:#00305c;
	color:#fff;
}/* 見出し背景色・文字色 */

.events	table tbody th {
	width:10%;
	text-align: center;
	}
@media screen and (max-width: 768px) {
.events	table tbody th {
	width:100%;
	background-color: #00305c;
	display: block;
	border-right: none;
	color: #fff;
	padding:5px;
}}/* 1列目（月）書式（sp画面では月の行）*/

.schedule_eng, .schedule_labo {
	width:45%;
	text-align: left;
	font-size: 1.75rem;
}/* 2列目（学年歴），3列目（研究室関連）書式 */





/* ----------- 沿革 ------------------------------------------------------------------------------------- */
/*------------スライダー---------------------------*/
.wrap_slider {
	overflow: hidden;
	width:calc(100vw - 430px);
	margin:30px auto;
}/* sticky設定のメニューがあるとうまく枠内に収まらないようだ */
@media screen and (max-width: 1400px) {
.wrap_slider {
	width:100%;
	margin:20px 0;
}}/* スライダー枠設定 */

.slick-slide {
	height: auto!important;
}/* ガタツキ防止 */

.slider {
	width: 100%;
	}/*スライダー枠設定*/
	  
.slider div {
	margin-right: 2px;
	margin-left: 2px;
	}/*スライダー画像間マージン設定*/
	  
.slider img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}/*スライダー画像設定*/


/* ----------- カラム設定 -------------------- */
.column {
	column-count:2;
	column-rule:1px dashed #999;
	column-gap:80px;
	padding: 10px 25px;
    margin-bottom:50px;
}
@media screen and (max-width:768px) {
.column {
	column-count:1;
	padding: 10px 15px;
}}/* カラム設定 */

.column p {
	text-align:justify;
	text-justify:inter-character;
	line-break:strict;
	text-indent:1.8rem;
}
@media screen and (max-width:768px) {
.column p {
	font-size:1.7rem;
	line-height: 1.6;
	text-indent:1.7rem;
}}/* カラム書式 */

/* ----------- 写真の設定 ---------- */
.history figure {
	width:90%;
	margin:20px auto 0;
}/* 歴史写真枠 */
	
.history figure img {
	width:100%;
	margin-bottom: 5px;
	border-radius: 5px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}/* 写真書式 */
	
.history figcaption {
	font-size:1.6rem;
	text-align:center;
}/* 写真キャプション書式（セレクタに注意）*/

/* -------- 年表の設定 ---------- */
.timeline {
	width:85%;
	margin:20px auto 80px 0;
	padding:0 10px;
}
@media screen and (max-width:768px) {
.timeline {
	width:100%;
	margin:10px auto 15px;
	border:1px solid #036;
	padding:5px;
}}/* タイムライン大枠 */

.timeline ul {
	list-style: none;
}/* タイムラインリスト枠設定 */

.timeline li {
	margin: 0;
	position: relative;
	overflow: hidden;
}/* 基点設定とfloat解除 */

.timeline ul li > p {
	width: 130px;
	text-align: center;
	font-weight: 900;
	float: left;
}
@media screen and (max-width:768px) {
.timeline ul li > p {
	width:100px;
	font-size: 1.7rem;
	font-weight: 700;
	padding:0 10px;
	margin-left:15px;
	margin-right:10px;
	float: left;
	background-color: #036;
	color:#fff;
	border-radius: 50px;
}}/* タイムライン西暦 */

.timeline ul li > div {
	width: calc(100% - 150px);
	float: left;
	border-left: 3px solid #deecff;
	padding-left: 20px;
	padding-bottom: 25px;
}
@media screen and (max-width:768px) {
.timeline ul li > div {
	width: 100%;
	float: none;
	border-left: none;
	font-size:1.7rem;
	text-align:justify;
	text-justify:inter-character;
	line-break:strict;
}}/* タイムライン事項欄 */
.timeline ul li > div p:last-child {
	line-height:1.5;
}/* タイムライン事項欄 */

.timeline ul li > div::before {
	content: "";
	width: 13px;
	height: 13px;
	background: #3992ea;
	position: absolute;
	left: 125px;
	top: 11px;
	border-radius: 100%;
}
@media screen and (max-width:768px) {
.timeline ul li > div::before {
	width: 0;
	height: 0;
}}/* タイムライン丸印 */

.timeline ul li > div.after_uh::before {
	border:1px solid #3992ea;
	background: #fff;
}/* タイムライン白丸印 */


/* ----------------- intro部分 --------------- */
.intro {
	margin:30px auto 80px auto;
	max-width: 85%;
	text-align:justify;
	text-justify:inter-character;
	line-break:strict;
	text-indent:1rem;
}
@media screen and (max-width:768px) {
.intro {
	margin:10px auto 15px auto;
	max-width: 90%;
	font-size:1.7rem;
	line-height: 1.6;
}}/* 概要枠設定 */

/*-----------引用設定----------*/
p.ref {
	text-align:right;
	font-size:1.4rem;
	margin-right:10px;
	margin-top:20px;
	font-style:italic;
}/* 引用書式 */




/* ----------- フォトギャラリー ---------------------------------------------------------------------- フォトギャラリー -----------*/
.img-frame {
   	position: relative;
  	width: 98%;
   	aspect-ratio: 1920 / 644;
   	overflow: hidden;
   	margin: 0 auto 50px;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
@media screen and (max-width: 768px) {
.img-frame {
    width: 100%;
    margin: 0 auto;
	border-radius: 0;
}}/* スライドショー大枠設定 */

.img-01, .img-02, .img-03, .img-04 {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
	background-position: center center;
	animation-duration: 20s;  /* 1周20秒の例 */
    animation-timing-function: linear;
    animation-iteration-count: infinite; 
}/* 画像設定（背景に設定） */

.img-01, .img-03 {
  animation-name: zoom-in-fade;
}/* 奇数番目（1枚目、3枚目...）はズームイン */

.img-02, .img-04 {
  animation-name: zoom-out-fade;
}/* 偶数番目（2枚目、4枚目...）はズームアウト */

.img-01 { background-image: url("../image/photos/slideshow_gallery/01.jpg"); }/* 画像1の設定 */
.img-02 { background-image: url("../image/photos/slideshow_gallery/02.jpg"); }/* 画像2の設定 */
.img-03 { background-image: url("../image/photos/slideshow_gallery/03.jpg"); }/* 画像3の設定 */
.img-04 { background-image: url("../image/photos/slideshow_gallery/04.jpg"); }/* 画像4の設定 */

@keyframes zoom-in-fade {
  0% { opacity: 0; transform: scale(1.0); }
  5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; transform: scale(1.1); } /* 拡大しながら消える */
  100% { opacity: 0; transform: scale(1.1); }
}/* ズームイン（拡大）用アニメーション */

@keyframes zoom-out-fade {
  0% { opacity: 0; transform: scale(1.1); } /* 最初は拡大しておく */
  5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; transform: scale(1.0); } /* 標準に戻りながら消える */
  100% { opacity: 0; transform: scale(1.0); }
}/* ズームアウト（縮小）用アニメーション */

.img-01 { animation-delay: 0s; }
.img-02 { animation-delay: -15s; }
.img-03 { animation-delay: -10s; }
.img-04 { animation-delay: -5s; }
/* マイナス指定で「すでに始まっている」状態にする */ /* 全体20s ÷ 4枚 = 5s ずつずらす */




/* ----------- 2段スライドショー ----------------------- */
.wrap_sliders {
	width:calc(100vw - 430px);
	margin: 30px auto 10px;
}
@media screen and (max-width: 1400px) {
.wrap_sliders {
	width:100%;
	margin: 10px auto; 
}}/* スライド画像大枠設定 */

.wrap_sliders img {
	width:100%;
}/* スライド画像大きさ */



/* ----------- 研究室の写真 ----------------------- */
.wrap_gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:30px 0;
	width:100%;
	margin: 30px auto 80px; 
}
@media screen and (max-width: 768px) {
.wrap_gallery {
	margin: 15px auto; 
}}/* 写真大枠設定 */

.wrap_gallery > figure {
	width:49%;
	background:#fff;
	border-radius: 5px 5px 0 0;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 768px) {
.wrap_gallery > figure {
	width:100%;
}}/* 個々写真枠 */

.wrap_gallery figure img {
	width:100%;
	display:block;
	object-fit: cover;
}/* 写真の大きさ */

.wrap_gallery figure:hover img {
    transform: scale(1.1);
}/* 写真ホバー時の拡大 */

figcaption.shooting_date {
	text-align: center;
	background: linear-gradient(#FFFFFF , #F5F5F5);
	font-size: 1.7rem;
	line-height: 54px;
	font-weight: 700;
	color: #474747;
	position: relative;
}/* 写真のキャプション枠 */

figcaption.shooting_date p:first-child {
	background: linear-gradient(-45deg, white 25%,#e5f0f9 25%,#e5f0f9 50%,white 50%,white 75%,#e5f0f9 75%, #e5f0f9);  /* ストライプ模様 */
	background-size: 6px 6px;        /* ストライプのサイズ */
	border:2px solid #004789;
	border-radius: 50px;
	color: #004789;
	padding: 2px 12px 3px 12px;
	line-height: 1;
	position:absolute;
	top: -13px;
	right: 5px;
}/* 写真の撮影日 */

figcaption.shooting_date p:last-child {
	margin-left:58px;
	color:#333;
}/* 写真のキャプション設定 */

figcaption.shooting_date p:last-child::before {
	font-family: "Font Awesome 7 Free";
	content: "\f0c0";
	font-weight: 700;
	font-size: 2.8rem;
	color: white;
	background: #004789;
	width: 50px;
	height: 46px;
	line-height: 45px;
	display: inline-block;
	position: absolute;
	text-align: center;
	left: 4px;
	top: 4px;
	border:1px solid #fff;
}/* 写真のアイコン書式 */



/*-----------卒業生の写真-----------------------*/
.tab-container ul {
    margin: 15px auto;
    padding: 5px;
    list-style: none;
    display: flex;
    background: #F3F5F5;
    border-radius: 6px;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}/* インジケーター枠設定 */

.tab-container ul li {
    flex: 1;
    padding: 10px 16px;
    text-align: center;
    cursor: pointer;
    color: #666;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 4px;
    font-size: 1.5rem;
    font-weight: 500;
    position: relative;
}/* インジケーター設定 */

.tab-container ul li:not(.selected):hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}/* インジケーターホバー設定 */

.tab-container ul li.selected {
    background: #fff;
    color: #000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}/* インジケーター選択時設定 */

.tab-container .tab-content {
    display: none;
    padding: 20px 20px;
    min-height: 150px;
    margin-top: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}/* タブの表示内容枠設定　非表示 */

.tab-container .tab-content.selected {
  display: block;
  animation: display_content 0.8s ease;
}/* 選択したタブの内容表示 */

@keyframes display_content {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}/* タブ表示アニメーション */

.wrap_past_member {
	overflow: hidden;
	width:100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}/* 写真表示枠 */

.wrap_past_member figure {
    width:33%;
	margin-bottom:25px;
	border-radius: 5px 5px 0 0;
	overflow: hidden;
	box-shadow: 3px 3px 5px #c5c5c5, -3px -3px 5px #ffffff;
}
@media screen and (max-width: 1000px) {
.wrap_past_member figure {
	width:49%;
}}/* 写真枠設定 */

.wrap_past_member figure img {
	width:100%;
	display:block;
	object-fit: cover;
}/* 写真の大きさ */

.wrap_past_member figure figcaption {
	position: relative;
	text-align: center;
	background: #fff;
	font-size: 1.6rem;
	line-height: 54px;
	padding-left:20px;
}
@media screen and (max-width: 768px) {
.wrap_past_member figure figcaption {
	font-size: 1.4rem;
	padding-left:0;
}}/* 写真のキャプション書式 */

.wrap_past_member figure figcaption span {
	background: linear-gradient(145deg, #ededed, #ffffff);
	padding:4px 20px;
	border:1px solid #eee;
	box-shadow: 5px 5px 5px #ededed, -5px -5px 5px #ffffff;
	border-radius: 20px;
}/* 説明文の背景色 */
@media screen and (max-width: 768px) {
.wrap_past_member figure figcaption span {
	padding:4px 5px;
	border-radius: 0;
}}/* 写真のキャプション書式 */

.wrap_past_member figure figcaption::before {
	font-family: "Font Awesome 7 Free";
	content: "\f0c0";
	font-weight: 700;
	font-size: 2.8rem;
	color: white;
	background: #004789;
	width: 50px;
	height: 46px;
	line-height: 45px;
	display: inline-block;
	position: absolute;
	text-align: center;
	left: 4px;
	top: 4px;
	box-shadow: 3px 3px 5px #c5c5c5, -3px -3px 5px #ffffff;
}
@media screen and (max-width: 768px) {
.wrap_past_member figure figcaption::before {
	display: none;
}}/* 写真のアイコン書式 */