@charset "utf-8";

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
/*google Fontの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Londrina+Outline&family=Londrina+Sketch&family=Passion+One:wght@400;700;900&display=swap');

/*--------------------------------------------------------------------------------------------------------------
home.html, publication.html, equipment.html, member.html, activity.html, carrre path.htmlの六つのhtmlファイルの共通設定
--------------------------------------------------------------------------------------------------------------*/
.londrina-outline-regular {
	font-family: "Londrina Outline", sans-serif;
	font-style: normal;
}
.passion-one-regular {
	font-family: "Passion One", sans-serif;
	font-style: normal;
}
:root {
    --base-color: #f2f1e7;
    --form-base-color: #e3e2d3;
    --green-color: #01523f;
    --green-hover-color: rgb(49, 113, 96);
	--wood-color-light:#D9C192;
	--wood-color-dark:#523801;
    --caution-color: #db4a36;
	--grey-color:rgb(119, 119, 119);
	--white-color:#ffffff;
	--box-shadow-color:rgba(0,0,0,0.2);
	--red-color:#520101;
}
body * {
	box-sizing: border-box;
}
html,body {
	font-size: 13px;
}
@media screen and (min-width:768px), print {
	html, body {
		font-size: 18px;
	}
}
h2{
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	height: 100px;
	display: flex;
	justify-content: start;
	align-items: center;
	color: var(--green-color);
}
.h2-en{
	writing-mode: horizontal-tb;
	font-size: 4.5rem;
}
.h2-jp{
	writing-mode: vertical-rl;
	font-size: 0.8em;
}
@media screen and (min-width:768px), print{
	h2{height: 200px;}
	.h2-en{font-size: 6rem;}
	.h2-jp{font-size: 1rem;}
}
h3{
	line-height: 1.5;
	width: 95%;
	max-width: 1400px;
	margin: 20px auto 20px 20px;
	height: 50px;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: start;
	color: var(--green-color);
}
.h3-en{
	font-size: 0.8rem;
}
.h3-jp{
	font-size: 1.5rem;
	position: relative;
}
.h3-jp::before{
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	top: 50%;
	left: -1rem;
	transform: translate(-50%,-50%);
	background: var(--green-color);	
}
h4{
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: 10px;
}
h5{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 1rem;
	font-weight: bolder;
	color: #01523f;
	height: 2.5rem;
	line-height: 1.2;
}
body {
	line-height: 2;
	overflow-x: hidden;
	background: var(--base-color);
	height: 100vh;
}
#container {
	width: 100%;
	display: flex;
	flex-direction: column;
}
#home #contents{
	display: flex;
	flex-direction: column;
	background-image: url(../images/home/top-background.png);
	background-repeat: no-repeat;
	background-size: 100% 500px;
}
#home-en #contents{
	display: flex;
	flex-direction: column;
	background-image: url(../images/home/top-background.png);
	background-repeat: no-repeat;
	background-size: 100% 500px;
}

/*header（ロゴやメニューが入った最上段のブロック）---------------------------------------------------------------------------*/
header {
	background: var(--base-color);
	width: 100%;
	display: flex;					
	align-items: center;
	justify-content: start;
	margin: 0 auto;
	padding: 15px 2.5%;
	z-index: 1;
	position: relative;
	background: var(--green-color);
}
.logo {
	margin:0;
	padding: 0;
	width: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
}
.logo .nu-logo{width: 40%;}
.logo .lab-logo{width: 60%;}
.logo .nu-logo a{width: 100%;}
.logo .lab-logo a{width: 100%;}
.logo .nu-logo a img{width: 100%;}
.logo .lab-logo a img{
	width: 100%;
	height: auto;
}
.logo a {
	/*display: inline-block;*/
	width: 100%;
	text-align: center;
}
/*.logo a img{max-width: 100%;}*/
header nav ul {
	display: none;
	padding: 0 100px 0 0;
}
header nav ul li {
	text-align: center;			
	font-size: 1rem;
	white-space: nowrap;
	color: var(--green-color);
}
header nav ul li a {
	width: 7rem;
	display: block;
	text-decoration: none;
	padding: 0.2rem 0.5rem;
	margin: 0.5rem 0.5rem;
	border: 1px solid black;
	background: var(--form-base-color);
	border-radius: 5px;
	box-shadow: 0px 5px black;
	position: relative;
}
header nav ul li a:hover,.current-page-item {
	box-shadow:0 1px var(--green-color);
	top: 3px;
	background: var(--white-color);
	color: var(--green-hover-color);
}
header nav ul li a:hover span{
	color: var(--green-hover-color);
}
header nav ul li span {
	display: block;
	font-size: 0.8rem;	
	font-weight: 400;

}
/*ヘッダー内<nav>内のリストメニュ-----------------------------------------------------------------------------*/

header nav ul {display: none;}/*基本的には非表示*/
@media screen and (min-width:1100px),print{
	header{
			height: 100px;
			padding: 40px 2.5%;
			display: flex;
			justify-content: space-between;
		}
		.logo {
			width: 300px;
		}
	/*メニューブロック全体の設定*/
	header > nav > ul {
		display: flex;		
		font-size: 0.8rem;	
		font-weight: bold;
		margin: 1rem auto;
	}
}


/*ハンバーガーメニュー---------------------------------------------------------------------------*/
/*メニューブロック初期設定*/
#menubar {
	display: none;
}
#menubar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#menubar a {display: block;
	text-decoration: none;
}
.large-screen #menubar {
	display: block; 
}
.small-screen #menubar.display-block {
	display: block;
}
#menubar_hdr.display-none {
	display: none;
} 
.ddmenu_parent ul {
	display: none;
}
a.ddmenu::before {
	font-family: "Font Awesome 6 Free";	
	content: "\f078";		
	font-weight: bold;		
	margin-right: 0.5em;
}
.small-screen #menubar.display-block {
	position: fixed;
	overflow: auto;
	z-index: 100;
	right: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 90px 10vw 50px; 
	background: var(--base-color);
	color: var(--green-color);	
	animation: animation1 0.2s both;	
}
@keyframes animation1 {
	0% {right: -100vw;}
	100% {right: 0px;}
}
.small-screen #menubar ul ul {
	margin: 2rem;
}
.small-screen #menubar nav ul li {
	margin: 1rem 0;	
}
.small-screen #menubar a {
	color: inherit;
	padding: 1rem 2rem;
	border: 1px solid black;
	font-size: 1.2rem;
	font-weight: bold;
	background: var(--form-base-color);
	border-radius: 10px;
	box-shadow: 0px 4px black;
	position: relative;
}
.small-screen #menubar a:hover{
	box-shadow:0 1px var(--green-color);
	top: 3px;
	background: var(--white-color);
	color: var(--green-hover-color);
}
.small-screen #menubar .current-page-item-2{
	box-shadow:0 1px var(--green-color);
	top: 3px;
	background: var(--white-color);
	color: var(--green-hover-color);
}
.small-screen #menubar a span{
	margin-left: 1rem;
	font-size: 1rem;
	font-weight: normal;
}
#menubar .logo {
	width: 150px;
}
#menubar_hdr {
	animation: opa1 0.3s 0.5s both;
	position: fixed;
	z-index: 101;
	cursor: pointer;
	top: 20px;	
	right: 30px;
	width: 50px;
	height: 50px;	
	padding: 15px;	
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.5s;
	background: var(--green-color);
	border-radius: 50%;
	border: 2px solid var(--white-color);
}
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/*PC対応*/
@media screen and (min-width:1100px) {
    #menubar_hdr {
	display: none;
	}
}
#menubar_hdr:hover {
	transform: scale(1.2);
}
#menubar_hdr.ham {
	width: 80px;
	height: 80px;
}
/*ここは変更不要*/
#menubar_hdr div {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/*バーの設定*/
#menubar_hdr div span {
	display: block;
	width: 100%;
	height: 2px;
	background-color:var(--white-color);
	border-radius: 2px;	
	transition: all 0.5s ease-in-out;
	position: absolute;
}
/*以下変更不要*/
#menubar_hdr div span:nth-child(1) {top: 0;}
#menubar_hdr div span:nth-child(2) {top: 50%;transform: translateY(-50%);}
#menubar_hdr div span:nth-child(3) {bottom: 0;}
#menubar_hdr.ham div span:nth-child(1) {top: 50%;transform: translateY(-50%) rotate(45deg);}
#menubar_hdr.ham div span:nth-child(2) {opacity: 0;}
#menubar_hdr.ham div span:nth-child(3) {top: 50%;transform: translateY(-50%) rotate(-45deg);}


/*右上の言語の変更ボタン---------------------------------------------------------------------------*/
#en-jp {
    background: var(--white-color);
	box-shadow: 0px 0px 8px var(--box-shadow-color);	
	border-radius: 5px;
	display: flex;			
	align-items: center;	
	padding: 5px 5px;		
	position: absolute;		
	right: 10px;				
	top:15px;				
	z-index: 1000;
}
#en-jp a{
	display: block;
	background: var(--white-color);
	text-align: center;
	text-decoration: none;
	margin: 0;
	font-size: 0.8rem;
	color: black;
	font-weight:400;
}
@media screen and (max-width:1100px),print{
	#en-jp {
		display: none;	/*スマホ画面は非表示に*/
	}
}

/*ここからhome.htmlページ専用の設定
---------------------------------------------------------------------------------------------------------------*/
.scroll-block{
	animation: scroll-block linear;
	animation-timeline: view();
	animation-range: entry 0% cover 20%;
}
@keyframes scroll-block{
	from{
		opacity: 0.5;
		scale: 0;
	}
	to{
		opacity: 1;
		scale: 1;
	}
}
/*scroll-blockアニメーション効果のPC対応*/
@media screen and (min-width:768px),print{
	.scroll-block{
		animation: scroll-block linear;
		animation-timeline: view();
		animation-range: entry 0% cover 30%;
	}
	@keyframes scroll-block{
		from{
			/*opacity: 0.5;*/
			scale: 0.1;
		}
		to{
			/*opacity: 1;*/
			scale: 1;
		}
	}
}

/*hero部分（タイトルやスライドショー画像が入った上段のブロック）の設定
---------------------------------------------------------------------------------------------------------------*/
#hero{
	width: 95%;
	max-width: 1400px;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: var(--base-color);
	background: url(../images/home/hero-blackboard-tate.svg) no-repeat right center /cover;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin: 0px auto;
	padding: 30px 10px 0px 10px;
	overflow: hidden;
}
#hero .hero-left{
	display: flex;
	flex-direction: column;
	align-items: start;
}

.header-kazari{
	width: 100%;
}
.header-kazari img{
	width: 100%;
	height: auto;
}
.background-img{
	position: relative;
	margin-top: 0px;
	width: 100%;
	overflow: hidden;
	z-index: 1;
}
/*PC対応*/
@media screen and (min-width:768px),print{
	#hero {
		margin-top: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-image: url(../images/home/hero-blackboard-yoko.svg) ;
		background-size:100% 100%;
	    background-repeat: no-repeat;
	}
	.hero-left{
		width: 45%;
		margin-left: 20px;
	}
}
/*PC対応*/
@media screen and (min-width:768px),print{
	.background-img::before{
		width: 100%;
		animation: backgroundin 45s linear infinite;
	}
}
#hero .title-en{
	color:var(--green-color);
	width: 100%;
	text-align: center;
	font-size: 1.5rem;	
	font-weight: 700;
	letter-spacing: 0.2rem;
	display: inline-block;
	position: relative;
	white-space: nowrap;
	margin-top: 10px;
}
#hero .title-jp{
	width: 100%;
	margin-top: -20px;
	text-align: center;
	font-size: 2.5rem;
	font-weight: bold;
	display: inline-block;
	white-space: nowrap;
	color:var(--green-color);
}
#home-en #hero .title-jp{
	letter-spacing: 0.3rem;
	margin-top: 20px;
}
#hero .affiliation{
	color: #01523f;
	margin: 0 auto;
	font-size: 0.8rem;
	text-align: center;
	display: block;
	white-space: nowrap;
}
#hero-en .affiliation{
	white-space: pre-wrap;
	text-align: center;
}
#hero .hero-left .intro{
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 20px auto;
	text-align:left;
}
#hero .hero-left .intro p{
	display: block;
	white-space: nowrap;
	text-align: left;
	margin: 5px auto;
	font-weight: bold;
	font-size: 1.3rem;
	line-height: 1.5;
	letter-spacing: 0.05em;
}
#home-en #hero .hero-left .intro p{
	white-space:pre-wrap;
	letter-spacing:normal;
	font-size: 1.5rem;
	text-align: center;
	font-weight: 600;
}
.header-kazari{
	display: flex;
	gap: 3vw;
	margin-right: 10vw;
	margin-top: 0px;
	margin-bottom: 10px;
}
.header-kazari-1 img{
	position: relative;
	top: 0;
	left: 0;
	animation: header-kazari-1 10s linear infinite;
}
.header-kazari-2 img{
	position: relative;
	top: 20px;
	left: 0;
	animation: header-kazari-2 10s linear infinite;
}
@keyframes header-kazari-1 {
	0%{
		position: relative;
		top: 0;
		left: 0px;
	}
	50%{
		position: relative;
		top: 0;
		left: 50px;
	}
	100%{
		position: relative;
		top: 0;
		left: 0px;
	}
}
@keyframes header-kazari-2 {
	0%{
		position: relative;
		top: 20px;
		left: -50px;
	}
	50%{
		position: relative;
		top: 0px;
		left: 0px;
	}
	100%{
		position: relative;
		top: 20px;
		left: -50px;
	}
}
.intro p span{
	background: linear-gradient(transparent 75%, #01523f 75%);
}

/*PC対応*/
@media screen and (min-width:768px),print{
	#hero .title-en{
		font-size: 1.2rem;	
	}
	#hero .title-jp{
		font-size: 3.5rem;
		margin: -30px auto -10px auto;
	}
	#hero .affiliation{
		font-size: 1rem;
	}
	#hero .affiliation br{
		display: none;
	}
	#hero div .intro{
		margin: 50px auto;
	}
	.hero-list-free{
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 20px;
		padding: 0 50px;
	}
	.hero-left{
		flex: 1;
	}
	.hero-right{
		flex: 1;
	}
	.header-kazari{
		margin-top: 30px;
	}
	#hero .hero-left .intro{
		margin: 30px auto;
	}
	
}
@media (min-width:760px) and (max-width:1000px),print{
	#hero .hero-left .intro p{
		font-size: 1rem;
	}
	#hero .title-jp{
		font-size: 2.5rem;
	}
	#hero .affiliation{
		font-size: 0.7rem;
	}
}
@media screen and (min-width:1000px),print{
	#home-en #hero .hero-left .intro p{
		font-size: 2rem;
	}
}

/*スライドショーの設定---------------------------------------------------------------------------*/
.hero-right{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.slideshow-container {
	position: relative;
	width: 90%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	margin: 10px auto;
	border: 1px solid var(--green-color);
	outline: 2px solid var(--green-color);
    outline-offset: 8px;
}

.dots-container{margin: 10px auto 30px auto;}
.slide {
	position: absolute;
	top: 0;
	left: 100%; 
	width: 100%;
	height: 100%;
	opacity: 0; 
	transition: opacity 0.5s ease-in-out; 
}
.slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.slide.slip {
	left: 0; 
	opacity: 1;
	animation: slideIn 0.5s ease-in-out forwards;
}
.slide.previous {animation: slideOut 0.5s ease-in-out forwards;}

@keyframes slideIn {
	from {left: 100%;}
	to {left: 0;}
}
@keyframes slideOut {
	from {left: 0;}
	to {left: -100%;}
}
.dots-container {
	text-align: center;
	margin-top: 10px;
}
.dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	background-color:var(--green-hover-color);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.3s;
}
.dot.slip {
	background-color:var(--green-color);
}
@media screen and (min-width:768px),print{
	.slideshow-container {
		width: 100%;
		max-width: 400px;
		height: auto;
		margin: 10px auto;
	}
	.slide {width: 100%;}
	.slide img {width: 100%;}
	.dots-container{margin: 10px auto 110px auto;}
}


/*新着情報(News)ブロック----------------------------------------------------------------------*/
.news{
	width: 100%;
	background: var(--base-color);	
	position: relative;
}
.news::before{
	content: "";
	position: absolute;
	top:-300px;
	left: 0px;
	width: 100%;
	height: 300px;
	background: url('../images/home/news-before.png') no-repeat center center / cover;
	z-index: -1;
}
.news .news-content {
	width: 90%;
	margin: 0 auto 50px auto;
	height: 400px;
	overflow: auto;
}
.news .news-list-free {
	display: flex;			
    flex-direction: column;	
	width: 95%;
	max-width: 1400px;
	margin: 50px auto;
	background: var(--base-color);
	border: 3px solid var(--green-color);
	box-shadow: 5px 0px var(--green-color);
	border-radius: 20px 20px 20px 20px;
	z-index: 20;
}
.news .news-list-free h1 {
	margin: 0px 5%;
	color: var(--green-color);	
	font-size: 1.5rem;
	font-weight: 500;
	display: flex;
	justify-content: start;
	align-items: center;
}
.news .news-box{
	border: 1px solid black;
	margin-bottom: 12px;
	border-radius: 10px;
	color: black;
	background: var(--white-color);
}
.news .news-box dd{
	font-size: 0.8rem
}
.news .news-box a{
	display: block;
	border-radius: 10px;
	width: 100%;
	background: var(--form-base-color);
	box-shadow: 0px 5px black;
	color: var(--green-color);
	position: relative;
}
.news .news-box a:hover{
	box-shadow:0px 1px black;
	top: 3px;
	background: var(--white-color);
	color: var(--green-hover-color);
}
.news-jp{
	writing-mode: vertical-rl;
	font-size: 1rem;
}
.news-en{
	font-size: 5rem;
}
.news-lecture{
	background: url('../images/home/news-lecture-bg.png') no-repeat center bottom / cover;
	display: grid;
	width: 150px;
	height: 100px;
	margin: 80px 0px 0px 80px;
}
#modal-open{
	font-size: 1rem;
	width: fit-content;
	height: 40px;
	margin-top:-40px;
	margin-left: -30px;
	border-radius: 5px;
	border: 1px solid var(--grey-color);
	box-shadow: 0px 2px black;
	position: relative;
	white-space: nowrap;
	padding: 5px 5px;
}
#modal-open:hover{
	box-shadow:0px 1px black;
	top: 3px;
	background: var(--white-color);
	color: var(--green-hover-color);
}
#modal{
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: rgb(119, 119, 119,0.8);
	z-index: 100000000;
}
#modal .modal-header h3{
	font-size: 1.2rem;
	color:var(--white-color);
	white-space: nowrap;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	width: 90%;
}
#modal .modal-header span{
	font-size: 1.5rem;
	cursor: pointer;
}
.modal-content{
	background-color: var(--white-color);
	margin: 20px auto;
	width: 95%;
	max-width: 800px;
	overflow:auto;
	box-shadow: 0 2px 7px black;
	border-radius: 20px;
	animation-name: popup;
	animation-duration: 1s;
}
@keyframes popup{
	from{
		transform: translateY(150%);
		opacity: 0;
	}
	to{opacity: 1;}
}
.news .news-list-free h1 .modal-content {
	font-size: 0.8rem;
}
.modal-header{
	background-color: var(--green-color);
	color: var(--white-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0px 20px;
}
.modal-body{
	padding: 15px;
}
.ta2 caption {
	border-bottom: 1px dotted #333;
	text-align: center;
	background: var(--green-color);		
	font-weight: bold;		
	padding: 10px;	
	color: var(--white-color);
}
.ta2 {
	table-layout: auto;
	width: 100%;
	margin-bottom: 20px;
	text-align: center;	
	background: var(--base-color);	
	color:black;
	vertical-align:middle;
}
.ta2, .ta2 td, .ta2 th {
	word-break:normal;
	border: none;
	border-bottom: 1px dotted var(--grey-color);
	padding: 10px 5px;
	vertical-align: middle;
}
.news .ta2{
	margin-bottom: 10px;
}
.news .ta2, .ta2 td, .ta2 th {
	padding: 5px 5px;
}
.ta2 th {
	background: var(--base-color);
	text-align: center;
}
.ta2 tr{
	text-align: center;
}

/*PC対応*/
@media screen and (min-width:992px),print {
	.news-lecture{
		width: 180px;
		height: 120px;
		margin: 50px 0px 0px 0px;
	}
	#modal-open{
		font-size: 1.2rem;
		width: fit-content;
		height: 50px;
		margin-top:-50px;
		margin-left: -60px;
		border-radius: 5px;
		border: 1px solid var(--grey-color);
		box-shadow: 0px 3px black;
		position: relative;
		white-space: nowrap;
		padding: 5px 5px;
	}
    .modal-content{
	margin: 20px auto;
    }
    .news .ta2{
	margin-bottom: 20px;
    }
}
.news-content dt {
	padding: 0.2rem 0.5rem;
}
.news-content dd {
	padding: 0 0.5rem 0.5rem;
}
/*ブロック内のspan。日付の横のアイコン的な部分の設定*/
.news-content dt span {
	display: inline-block;
	margin-right: -1rem;
	text-align: center;
	border-radius: 3px;	
	padding: 0 0.5rem;	
	width: 8rem;
	transform: scale(0.8);
	background: var(--white-color);
	color:var(--red-color);
	border: 1px solid var(--grey-color);
}
.btn{
	display: block;
	width: fit-content;
	height: 60px;
	border: 2px solid var(--green-color);
	text-align: center;
}

/*PC対応*/
@media screen and (min-width:992px),print {
	.news .news-list-free {
		flex-direction: row;		
		align-items: flex-start;
	}
	.news .news-content{
		margin: 50px 10% 50px 0;
		width: 90%;
		flex: 1;
		height: 600px;
		overflow: auto;
	}
	.news .news-box{
		margin-bottom:15px;
	}
	.news .news-list-free h1 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 30%;
		margin-top: 50px;
	}	
	.news-jp{
		writing-mode: horizontal-tb;
	}
	.news-en{
		writing-mode: vertical-rl;
		font-size: 10rem;
		margin: 20px auto;
	}
}
.mask-bg{
	width: 100%;
	margin-top: -50px;
	margin-bottom: -50px;
	height: 80px;
}
@media screen and (min-width:768px),print {
	.mask-bg{
		margin-top: -50px;
		margin-bottom: -150px;
		height: 200px;
	}
}
.mask-bg img{
	width: 100%;
	height: 100%;
}
.between-news-aboutUs{
	width: 100%;
	height: 300px;
	background: url('../images/home/between-news-aboutUs-phone.png') no-repeat left center / cover;
	background-attachment: fixed;
}
/*PC対応*/
@media screen and (min-width:768px),print {
	.between-news-aboutUs{
		height: 500px;
		background: url('../images/home/between-news-aboutUs.png') no-repeat center top / cover;
		background-attachment: fixed;
	}
}
/*ipnone画面にて非表示*/
@media screen and (max-width:500px),print {
	.between-news-aboutUs{
		display: none;
	}
}

/*私達について(About us)ブロック----------------------------------------------------------------------*/
.aboout-us{
	width: 100%;
	margin: 0px auto;
	background: var(--green-color);
	position: relative;
	z-index: 10;
	padding-bottom: 10px;
}
@media screen and (max-width:500px),print {
	.aboout-us{
		margin: 50px auto;
	}
}
.aboout-us::before{
	content: "";
	position: absolute;
	width: 100%;
	height: 30px;
	bottom: 100%;
	box-shadow: 0px 0px 10px black;
	left: 0;
	background-color: var(--wood-color-dark);
}
.aboout-us::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 150px;
	bottom: -5px;
	left: 0;
	background: url('../images/home/about-us-after-phone.png') no-repeat right bottom / cover;;	
}

.aboout-us h2{
	color: var(--white-color);
}
.aboout-us-text{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 80%;
	height: auto;
	margin: 0 auto 130px auto;
}
#home-en .aboout-us-text p{
	color: var(--white-color);
	font-size: larger;
}
.about-us-text-1{
	width: 20.25rem;
	text-align:end;
	overflow: hidden;
}
.about-us-text-1.writting{
	animation: width-expand 1.5s linear;
}
@keyframes width-expand {
	from {
	  width: 0%;
	}
	to {
	  width: 21rem;
	}
  }
.about-us-text-1 p{
	width: auto;
	text-align: center;
	margin: auto 0;
	font-size: 1rem;
	color:var(--white-color);
	display: inline-block;
	white-space: nowrap;
}
.aboout-us-text-2{
	display: flex;
	text-align: center;
	width: 5%;
	height: auto;
	padding: 0 0 5% 0;
}
.aboout-us-text-2 img{
	top: 0;
	left: 0;
	width: 100%;
	margin: auto 0;
}
.aboout-us .aboout-us-content{
	width: 95%;
	max-width: 1440px;
	margin: 0 auto;
}
.aboout-us .group{
	background: var(--base-color);
	width: 90%;
	margin: 0 auto;
	border-radius: 20px;
}
.aboout-us .group-list-free {
	display: flex;			
    flex-direction: column;	
	justify-content: center;
	align-items: center;
	margin-bottom: 150px;
	padding: 0 10px;
}
.group-list-free i{
	color: var(--green-color);
}
.group-list-free ul{
	list-style-type: none; 
    padding-left: 0;
}
.group-list-free ul li{
	position: relative;
    padding-left: 25px;
}
.group-list-free ul li::before{
	content: "\f5da"; 
  font-family: "Font Awesome 6 Free"; 
  font-weight: 900; 
  position: absolute;
  left: 0;
  color: var(--grey-color);
}

.aboout-us .group-list-free-last{
	margin-bottom: -200px;
}
.group .group-top{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: var(--white-color);
	border: 3px solid var(--base-color);
	margin-top: -100px;
	line-height: 4rem;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color:rgba(255,255,255,0.2);
}
.group-top-1{
	background: url('../images/home/group1-before.jpg') no-repeat left center / cover;;
}
.group-top-2{
	background: url('../images/home/group2-before.jpg') no-repeat left center / cover;;
}
.group-top-3{
	background: url('../images/home/group3-before.jpg') no-repeat center center / cover;;
}
.group-top-4{
	background: url('../images/home/group4-before.jpg') no-repeat left center / cover;;
}
.group-top-5{
	background: url('../images/home/group5-before.jpg') no-repeat center center / cover;;
}
.group .group-top .group-number{
	font-size: 5rem;
	font-weight: 900;
}
.group .group-top .group-title{
	font-size: 2rem;
}

.aboout-us .group-list-free .text{
	width: 100%;
}
.aboout-us .group-list-free .text .image-yoko{
	width: 100%;
	height: auto;
	margin: 20px auto;
}
.aboout-us .group-list-free .text .image-yoko img{
	width: 100%;
}
.aboout-us .group-list-free .image{
	width: 100%;
	margin: 20px auto;
}
.aboout-us .group-list-free .image img{
	border-radius: 10px;
	width: 100%;
}
.image-group-1{
	display:flex;
	flex-direction: column;
	gap: 20px;
}
/*
.video-wrapper {
	position: relative;
	height: auto;
	overflow: hidden;
	width: 90%;        
	max-width: 768px;
	background: #000;
	margin: 0 auto;
	border: 5px solid var(--box-shadow-color);
	border-radius: 20px;
	padding-bottom: 56.25%; /* 16:9 の比率 (9/16 = 0.5625) 
  }
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}*/
.about-us-video{
	position: sticky;
	bottom: 0;
	left: 0;
	margin-top: 250px;
	margin-bottom: 40px;
	margin-left: calc(8px + 4.8%);
}
.about-us-video p{
	width: 80px;
	height: 160px;
	border-radius: 80px;
	border: 1px solid black;
	overflow: hidden;
	outline: 8px solid var(--white-color);
	offset: 8px;
	background: var(--form-base-color);
}
.about-us-video p:hover{
	background: var(--white-color);
	color: var(--green-hover-color);
}
.about-us-video p:hover ion-icon{
	color: var(--green-hover-color);
}
.about-us-video p a{
	width: 100%;
	height: 100%;
	writing-mode: vertical-rl;
	white-space: nowrap;
	display: flex;
	justify-content: center;
}
.about-us-video p a ion-icon{
	width: 60px;
	height: 60px;
	color: var(--green-color);
	font-size: 12px;
	margin: 10px auto;
	z-index: 10;
}
.about-us-video p a span{
	margin: 5px auto 10px auto;
	font-size: 1rem;
	font-weight: 900;
	color: var(--green-color);
	background: none;
}
#home-en .aboout-us .group-list-free-last{
	margin-bottom: 80px;
}

#home-en .group .group-top .group-title{
	font-weight: 800;
	text-align: center;
	line-height: normal;
}

#home-en .aboout-us::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 50px;
	bottom: -10px;
	left: 0;
	background: url('../images/home/about-us-after-en.png') no-repeat right bottom / cover;;	
}

@media screen and (min-width:992px),print {
	#home-en .aboout-us .group-list-free-last{
		margin-bottom: 150px;
	}
	#home-en .aboout-us::after{
		height: 100px;
	}
}
/*PC対応*/
@media screen and (min-width:992px),print {
	.aboout-us-title-en{
		font-size: 8rem;
	}
	.aboout-us-text{
		margin: 0 auto 50px auto;
	}
	.about-us-text-1{
		width: 31.5rem;
	}
	@keyframes width-expand {
		from {
		  width: 0%;
		}
		to {
		  width: 31.5rem;
		}
	}
	.about-us-text-1 p{
		font-size: 1.5rem;
	}
	.aboout-us .group{
		margin: 0 auto;
		border-radius: 20px;
	}
	.aboout-us .group-list-free {
		flex-direction: row;		
		align-items:flex-start;
		gap: 10px;
		padding: 50px 50px;
	}
	.group .group-top{
		width: auto;
		max-width: 250px;
		height: auto;
		aspect-ratio: 1/1;
		margin-top: 0;
		margin-left: -100px;
		margin-top: -100px;
		border: 3px solid var(--base-color);
		flex:1;
	}
	.group .text{flex: 2;}
	.aboout-us .group-list-free .image{
		margin: 0px auto;
		flex: 1;}
	.aboout-us .group-list-free .image img {	
		width: 100%;
		height: auto;
	}
	.aboout-us .group-list-free .text .image-yoko{
		width: 80%;
		height: auto;
		margin: 20px auto 0px auto;
	}
	.aboout-us .group-list-free .text .image-yoko img{width: 100%;}
	.about-us-video p{
		width: 100px;
		height: 200px;
		border-radius: 100px;
	}
}
@media screen and (min-width:500px),print{
	.aboout-us::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 150px;
	bottom: -5px;
	left: 0;
	background: url('../images/home/about-us-after.png') no-repeat left bottom / cover;;
}	
}

@media screen and (min-width:1900px),print {
	.about-us-video p{
	width: 130px;
	height: 260px;
	border-radius: 130px;}
}
@media screen and (max-width:400px),print {
	.about-us-video p{
	width: 50px;
	height: 100px;
	border-radius: 50px;
	outline: 4px solid var(--white-color);
	offset: 4px;
    }
	.about-us-video p a ion-icon{
	width: 100%;
	font-size: 20px;
	}
}

/*フッターのコンテンツ（住所やマップが入っているブロック）の設定はここから---------------------------------------------------------------------------*/
/*ブロック全体*/

#footer-contents {
	width: 95%;
	max-width: 1400px;
	color: var(--green-color);	
	margin: 50px auto 0px auto;
}
.footer-list-free{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--base-color);
}
.map-container{
	width: 100%;
	max-width: 1400px;
	height: 300px;
	overflow: hidden;
}
.iframe-box {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	border-radius: 20px;
}
.iframe-box iframe {
	width: 100%;
	height: 100%;
}
.map-link{
	width: 100%;
	height: 50px;
	margin: 10px auto;
	display: flex;
	gap: 5%;
	justify-content: space-between;
	align-items: center;
}
.map-link a{
	width: 100%;
	height: 100%;
	line-height: 50px;
	display: flex;
	justify-content: center;
	text-align: center;
	color: var(--green-color);
	text-align: center;
	border: 1px solid black;
	box-shadow: 0px 5px black;
	background: var(--form-base-color);
	border-radius: 10px;
	position: relative;
}
.map-link a:hover{
	box-shadow: 0px 1px black;
	top: 3px;
	background: var(--white-color);
	color: var(--green-hover-color);
}
.map-link a ion-icon{
	margin: 0 10px;
	font-size: 1.5rem;
}
@media screen and (min-width:992px),print {
	.footer-list-free{
		display: flex;
		flex-direction: row;
		justify-content: center;
	    align-items: center;
		gap: 2%;
	}
	.map-container{
		flex: 1;
	}
	.footer-list-free .ta2{
		flex: 1;
	}
}

/*フッターメニュー設定
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#home #footermenu {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: -10;
}
#footermenu img{
	width: 100%;
}
#footermenu footer{
	margin-top: -10px;
	width: 100%;
	height: 50px;
	background: var(--green-color);
	color: var(--white-color);
}

/*PC対応*/
@media screen and (min-width:992px),print {
	.access-title-en{
		font-size: 8rem;
	}
	#footermenu footer{
		height: 50px;
	}
}
/*ボックス内のリンクテキスト設定*/
#footermenu a {
	text-decoration: none;
	color: inherit;
}
small {font-size: smaller;}
footer {
	font-size: 0.8rem;
	text-align: center;	
	padding: 0.8rem 0.8rem;
}

#footermenu img{
	margin-top: -20px;
}

.links{
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}
#home .links{
	margin: 0 auto 150px auto;
}
@media screen and (min-width:992px),print{
	#home .links{
		margin: 0 auto 300px auto;
	}
}
.links h2{
	font-size: 1.2rem;
	font-weight: 900;
	color: black;
}
.grid-links{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
	width: 100%;
	gap: 2vw;
}
.links .grid-links a img{
	width: 100%;
}


/*PAGE TOP（↑）設定---------------------------------------------------------------------------*/
body .nav-fix-pos-pagetop a {display: none;}  /*デフォルトでは非表示に*/
@media screen and (max-width:1100px) {
	/*.nav-fix-pos-pagetop{
		display: none;
	}*/
}
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;
	z-index: 100;
	position: fixed;
	width: 50px;
	height: 50px;
	bottom: 45px;		
	right: 30px;			
	animation-name: scroll;	
	animation-duration: 0.5S;	
	animation-fill-mode: forwards;	
	border-radius: 50%;
}
@keyframes scroll {
	0% {opacity: 0;}
    100% {opacity: 1;}
}
body.is-fixed-pagetop .nav-fix-pos-pagetop a img{
	width: 100%;
}


/*ここからpublication.htmlページの個別設定------------------------------------------------------------------------*/
/*fade-in-downアニメーション効果はpublication, equipment, member, activity, career-pathの五つのページのタイトルに適用*/
.fade-in-down {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
.fade-in-down.down {
    opacity: 1;
    transform: translateY(0);
}

#publication #contents{
	background-image: none;
}
#publication #hero{
	background-image: none;
}
#publication #hero p{
	font-size: 1rem;
	padding: 20px 50px 50px 50px;
}
main section{
	width: 100%;
}
#publication main section{
	width: 100%;
	margin: 0 auto;
	padding: 0 5%;
	text-align: center;
}
.section-publication{
	width: 95%;
	max-width: 1400px;
	margin: 0 auto;
}
.publication-content {
	width: 95%;
	max-width: 1400px;
	display: none;
	margin: 30px auto 0 auto;
	background: var(--white-color);
	padding: 20px 15px 20px 25px;
	border-radius: 20px;
	text-align: start;
	box-shadow: 0 0 1rem rgba(0, 0, 0, .5);
}
.publication-content h2{
	font-size: 2rem;
	font-weight: 900;
	margin-bottom: 50px;
}
.publication-content ul li{
	list-style: inside;
	list-style-position: outside;
	margin-bottom: 10px;
	text-align: justify;
}
.publication-content ul li a{
	text-decoration: underline var(--grey-color);
	color:var(--green-color);
	font-weight: bold;
	font-size: smaller;
}
.publication-content ul li a:hover{
	color: var(--grey-color);
	text-decoration:none;
}
#item-paper-japanese:checked ~ .info-paper-japanese,
#item-paper-english:checked ~ .info-paper-english,
#item-presentation-japan:checked ~ .info-presentation-japan,
#item-presentation-grobal:checked ~ .info-presentation-grobal,
#item-lecture-japan:checked ~ .info-lecture-japan,
#item-lecture-grobal:checked ~ .info-lecture-grobal,
#item-book:checked ~ .info-book,
#item-patent:checked ~ .info-patent,
#item-award:checked ~ .info-award {
	display: block;
}
label, input {
    display: inline-block;
}
.item-label {
  padding: 0.5rem 0.2rem;
  width: 10em;
  border: 1px solid black;
  font-weight: bold;
  color: var(--green-color);
  background: var(--form-base-color);
  border-radius: 5px;
  box-shadow: 0px 4px black;
  position: relative;
  margin: 10px 0px;
}
.item-label:hover {
  box-shadow:0 1px var(--green-color);
  top: 3px;
  background: var(--white-color);
  color: var(--green-hover-color);
}
#item-paper-japanese:checked + .item-label,
#item-paper-english:checked + .item-label,
#item-presentation-japan:checked + .item-label,
#item-presentation-grobal:checked + .item-label,
#item-lecture-japan:checked + .item-label,
#item-lecture-grobal:checked + .item-label,
#item-book:checked + .item-label,
#item-patent:checked + .item-label,
#item-award:checked + .item-label {
	box-shadow:0 1px var(--green-color);
	top: 3px;
	background: var(--white-color);
	color: var(--green-hover-color);
}
#publication .publication-content .grid {
    grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
}
.grid-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.grid-item .equipment-intro{
	display: block;
	width: 90%;
	margin: 0px auto 20px auto;
}
.publication-content ul span{
	text-align: center;
	font-weight: bold;
	border-radius: 3px;	
	font-size: smaller;
	padding: 0 0.5rem;	
	width: 8rem;
	background: var(--white-color);
	color:var(--green-color);
	border: 1px solid var(--grey-color);
}
.grid-publication {
    width: 100%;
    margin: 0 auto 3vw;
    display: grid;
    column-gap: 2vw;
	row-gap: 4vw;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
}
/*PC対応*/
@media screen and (min-width:992px) {	
	.item-label {
	padding: 1rem 1rem;
	/*margin: 20px 20px;*/
	border-radius: 10px;
   }
   #publication .publication-content .grid-publication {
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    }
	.grid-gallery {
		filter: grayscale(100%);
		transition: .3s;
	}
	.grid-gallery:hover{
		filter: grayscale(0);
		box-shadow: 0 0 2rem rgba(0, 0, 0, .5);
		transform: scale(1.1);
		z-index: 3;
		position: relative;
	}
	.publication-content {
		padding: 50px 50px;
	}
	.publication-content  h3{
			margin: 20px auto 50px 20px;
		}
}
.grid-item p {
	width: 90%;
	margin: 10px auto;
}
.grid-item figure {
	width: 100%;
}
.grid-item figure a {
	width: 100%;
}
.grid-item figure a img {
	width: 100%;
}


/*ここからequipemt.htmlページの個別設定------------------------------------------------------------------------*/
#equipment #hero{
	background-image: none;
}
.grid {
    width: 100%;
    margin: 0 auto 3vw;
    display: grid;
    row-gap: 12vw;
	column-gap: 2vw;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
}
#equipment .grid-item{
	width: 95%;
	margin: auto auto;
	position: relative;
	align-items: center;
	/*overflow: hidden;*/
}
#equipment .grid-item h4{
	height: 2rem;
	text-align: center;
}
.section-equipment{
	width: 95%;
	max-width: 1400px;
	margin: 0 auto 10vw;
}
#equipment .grid-item figure img {
	width: 100%;
}
#equipment .grid-item p {
	text-align: center;
}
.equipment-intro-card{
	width: 90%;
	background-color: var(--white-color);
	padding: 0.5rem;
	border-radius: 0.5rem;
	font-size:small;
	line-height:1.5;
	position: absolute;
	bottom: -2rem;
	box-shadow: 0 6px 6px var(--grey-color);
	left: 0;
	right: 0;
	margin-inline:auto;
	opacity: 1;
	transition: opacity 1s 1s;
}
.new{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: #db4a36;
	color: var(--white-color);
	margin: 2px 5px;
	padding: 5px 2px;
	border-radius: 2px;
	font-weight: bolder;
}
@media screen and (min-width:992px){
	.section-equipment{
		margin: 0 auto;
	}
	.section-equipment h3{
		margin: 20px auto 50px 20px;
	}
	#equipment .grid {
		width: 100%;
		margin: 0 auto 3vw;
		display: grid;
		row-gap: 4vw;
		column-gap: 3vw;
		grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
	}
	
	#equipment .grid-item{
		width: 100%;
		position: relative;
		align-items: center;
		overflow: hidden;
	}
	#equipment .grid-item:hover .equipment-intro-card{
		animation: show-card 1s forwards;
		opacity: 1;
		transition: opacity .3s;
	}
	.equipment-intro-card{
		width: 90%;
		background-color: var(--white-color);
		padding: 0.5rem;
		border-radius: 0.5rem;
		font-size:smaller;
		position: absolute;
		bottom: -9rem;
		box-shadow: 0 6px 6px var(--grey-color);
		left: 0;
		right: 0;
		margin-inline:auto;
		opacity: 1;
		transition: opacity 1s 1s;
	}
	#equipment .grid-item:hover{
		animation: remove-overflow .3s forwards;
	}
	.grid-gallery-equipment {
		filter: grayscale(100%);
		transition: .3s;
	}
	#equipment .grid-item:hover .grid-gallery-equipment{
		filter: grayscale(0);
		position: relative;
	}
	@keyframes show-card{
		50%{
			transform: translateY(-10rem);
		}
		100%{
			transform: translateY(-7rem);
		}
	}
	@keyframes remove-overflow{
		to{
			overflow: initial;
		}
	}
}

/*ここからmember.htmlページの個別設定------------------------------------------------------------------------*/
#member #hero{
	background-image: none;
}
.section-member{
	width: 95%;
	max-width: 1400px;
	margin: 0 auto;
}
.teacher-box{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 30px;
	border: 1px solid var(--green-color);
	border-radius: 20px;
	margin-bottom: 50px;
	padding: 20px 30px;
}
rt{
	font-size: 14px;
}
h4 span{
	font-weight: 400;
	margin-left: 20px;
	font-size: 1.0rem;
}
.teacher-photo{
	width: 80%;
	max-width: 200px;
	margin: 20px auto;
}
.photo-link{
	text-align: center;
	width: 100%;
	overflow: hidden;
	position: relative;
	box-shadow: 6px 6px var(--grey-color);
	position: relative;
}
.photo-link:hover{
	box-shadow:1px 3px var(--grey-color);
	top: 8px;
	left: 5px;
	filter: brightness(0.8)
}
.photo-link a{
	width: 100%;
	border-radius: 20px;
}
.photo-link a img{
	width: 100%;
}
.section-member .ta2{
	margin-bottom: 50px;
}
.section-member .ta2 caption {
	background: var(--green-color);		
}
.section-member .ta2 td a{
	font-weight: 900;
	background: var(--form-base-color);
}
.section-member .ta2 td a p{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	font-size: 13px;
	color: var(--green-color);
	background: var(--form-base-color);
	border-radius: 50%;
	border: 1px solid black;
	box-shadow: 3px 3px black;
	position: relative;
}
.section-member .ta2 td a p:hover{
	font-size: 20px;
	color: var(--green-hover-color);
	background: var(--white-color);
	box-shadow: 1px 1px black;
	top: 3px;
}
.ta2 .theme-en{
	font-size: 10px;
}
@media screen and (min-width:992px){
	.teacher-box{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 50px;
		}
	.photo-link{
		flex: 1;
	}
	.teacher-cv{
		flex: 2;
	}
	.section-member .ta2 td a p{
		width: 50px;
		height: 50px;
		font-size: 18px;
	}
	.section-member .ta2 td a p:hover{
		font-size: 30px;
	}
	.ta2 .theme-en{
		font-size: 13px;
	}
}

/*activity.htmlページのの追加設定はここから---------------------------------------------------------------------------*/

#activity #hero{
	background-image: none;
}
.timeline {
	position: relative;
	width: 95%;
	max-width: 1400px;
	margin: 0px auto;
}
.container-life{
	padding: 20px 50px;
	position: relative;
	width: 50%;
	opacity: 0; 
	transform: translateY(80px); 
	transition: all 0.5s ease-in-out;
	z-index: 10;
}
.container-life.appear{
	opacity: 1; 
	transform: translateY(0); 
}
.timeline-text{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 30px 30px;
	background: var(--white-color);
	color: black;
	position: relative;
	border-radius: 20px;
	font-size: 15px;
	box-shadow: 0px 0px 5px var(--grey-color);
}
.timeline-text img{
	margin: 0 auto;
	width: 100%;
}
.container-left{
	left: 0;
}
.container-right{
	left: 50%;
}
.container-life .icons{
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 2px solid var(--green-color);	
	right: -25px;
	top: 45px;
	background:var(--green-color);
	color: var(--white-color);
	font-size: 0.8rem;
	font-weight: 500;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: 1.3;
}
.container-right .icons{
	left: -20px;
}
.timeline::after{
	content:'';
	position: absolute;
	width: 6px;
	height: 100%;
	background: var(--green-color);
	top: 0;
	left: 50%;
	z-index: -1;
	animation: moveline 10s linear forwards;
}
@keyframes moveline {
	0%{
		height: 0;
	}
	100%{
		height: 100%;
	}
}
.container-left-arrow{
	height: 0;
	width: 0;
	position: absolute;
	top: 35px;
	z-index: 1;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 15px solid var(--white-color);
	right: -15px;
}
.container-right-arrow{
	height: 0;
	width: 0;
	position: absolute;
	top: 35px;
	z-index: 1;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-right: 15px solid var(--white-color);
	left: -15px;
}
.activity-slideshow-container {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: auto;
	border-radius: 0%;
	margin:0px;
}
.activity-slides {
	width: 100%;
	display: flex;
	transition: transform 1s ease-in-out;
 }
  .activity-slide {
	width: 100%;
	flex-shrink: 0;
	position: relative;
	text-align: center;
	color: white;
}
.activity-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.comment {
	position: absolute;
	bottom: 10px;
	left: 50%;
	height: 2.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translateX(-50%);
	background: rgba(242, 241, 231, 0.7);
	color: var(--green-color);
	padding: 10px 20px;
	border-radius: 5px;
	font-size: 1rem;
	white-space: nowrap;
}
.controls {
	position: absolute;
	top: 50%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	pointer-events: none;
}
.control {
	pointer-events: all;
	width: 30px;
	height: 30px;
	background:rgba(0, 0, 0, 0.6);
	border: none;
	color: var(--base-color);
	font-size: 2rem;
	cursor: pointer;
	padding: 10px 15px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 400;
}
.control:hover {
	background: var(--white-color);
	color: var(--green-hover-color);
	font-weight: 900;
}

@media screen and (min-width:768px),print{
	#activity .slideshow-container {
		width: 100%;
		max-width: none;
		height: auto;
		margin: 0px;
	}
	.slide {width: 100%;}
	.slide img {width: 100%;}
	.control {
		width: 50px;
		height: 50px;}
}
@media screen and (min-width:992px),print{
	.container-life{
		transform: translateY(100px); 
	}
}
.bg-squares{
    width: 100%;
    height:100%;
	z-index: -1;
}
.squares{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.squares li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: var(--white-color);
    animation: squaresAnimation 10s linear infinite;
    bottom: -150px;
}
.squares li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.squares li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}
.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}
.squares li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.squares li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.squares li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}
.circles li:nth-child(8){
    left: 58%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.squares li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}
.squares li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}
.squares li:nth-child(11){
    left: 45%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}
.circles li:nth-child(12){
    left: 35%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.squares li:nth-child(13){
    left: 15%;
    width: 80px;
    height: 80px;
    animation-delay: 5s;
}
.circles li:nth-child(14){
    left: 80%;
    width: 20px;
    height: 20px;
    animation-delay: 1s;
}
.circles li:nth-child(15){
    left: 10%;
    width: 60px;
    height: 60px;
    animation-delay: 5s;
	animation-duration: 5s;
}
@keyframes squaresAnimation {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-6000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}
@media screen and (max-width:992px) {
	.timeline{
		margin: 50px auto;
	}
	.timeline::after{
		left:31px
	}
	.container-life{
		width: 100%;
		padding-left: 80px;
		padding-right: 25px;
	}
	.timeline-text{
		font-size: 13px;
		padding: 20px 15px 20px 15px;
		border-radius: 10px;
	}
	.timeline-text small{
		margin-bottom: 10px;
	}
	.container-right{
		left: 0;
	}
	.container-left .icons,.container-right .icons{
		left: 10px;
	}
	.container-left-arrow{
		left: -15px;
		transform: rotate(180deg);
	}
	
}

.researcher-link{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	font-size: 13px;
	color: var(--green-color);
	background: var(--form-base-color);
	border-radius: 50%;
	border: 1px solid black;
	box-shadow: 3px 3px black;
	position: relative;
}
.researcher-link:hover{
	font-size: 20px;
	color: var(--green-hover-color);
	background: var(--white-color);
	box-shadow: 1px 1px black;
	top: 3px;
}

/*career path.htmlページのの追加設定はここから---------------------------------------------------------------------------*/
#career-path #hero{
	background-image: none;
}
.accordion{
	width: 95%;
	max-width: 800px;
	margin: 0 auto;
}
.accordion-box{
	position: relative;
	margin: 1.5rem 0;
	border-radius: 10px;
	box-shadow: 0px 0px 5px black;
	background: var(--white-color);
}

.accordion-label{
	position: relative;
	padding: 1.5rem 3rem 1.5rem 3rem;
	min-height: 3.5rem;
	line-height: 1.5rem;
	font-size: 1.2rem;
	font-weight: bold;
	align-items: center;
	text-align: center;
	color: var(--green-color);
	cursor: pointer;
}
.accordion-label::after{
	content: '+';
	position: absolute;
	top: 50%;
	right: 5%;
	transform: translateY(-50%);
	font-size: 1.6rem;
	transition: transform 0.3s ease-in-out;
}
.active::after{
	content: '✕';
	font-size: 1.6rem;
	font-weight: bold;
	transform: translate(-0.038rem, -0.68rem);
}
.accordion-content{
	background: var(--white-color);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	text-align: center;
	border-radius: 0px 0px 10px 10px;
}
.active + .accordion-content{
	max-height: 1000px;
	border-top: 1px dotted var(--green-color);
}
.accordion ul li{
	list-style: none;
}