@charset "utf-8";

/* * {
	margin:0;
	padding:0;
} */

body{
	/* background-color: #fffdfd; */
	background-color: #fefdfd;
	color:#2a2a2a;
	text-align:justify;
	font-family: Helvetica Neue, Helvetica, sans-serif;
	/* font-family: sans-serif; */
	font-size: 16px;
	padding-top: 120px;
}

/* 
 * Define default text decoration colors 
 */
a:link { color: #2a2a2a; text-decoration: none;}
a:visited { color: #2a2a2a; text-decoration: none;}
a:hover { color: #ff0000; text-decoration: none;}
a:active { color: #ff8000; text-decoration: none;}


/* 
 * Header
 */
#wrap_header_border{
	width: 100%;
	margin: 0 auto 20px auto;
	border-bottom: solid 1px rgb(206, 206, 206);
	background-color: #fafafa;
	position: fixed;
	top: 0;
	z-index: 1000;
}
#wrap_header{
	width: 1000px;
	margin: 0 auto 0px auto;
	/* border-bottom: 1px solid rgb(206, 206, 206); */
	position:relative;
}
#header_name{
	padding-top: 40px;
	margin-left: 0px;
	margin-right: 0px; /* distance from header name to menu bar */
	/* width: 43vw; */
	/* text-align: left; */
}
#font_header{
	font-size: 30px; 
	/* 32pt; */
	/* color: rgb(0, 0, 0); */
	font-weight: 500;
}
#mylinks{
	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: 10px;
	text-align: left;
	margin: 0 4px 0 auto;
	/* width: 17vw; */
	margin-left: 30px;
}
#myicons {
	font-size: 14px;
}
#myicons img{
	padding-top: 3px;
	object-fit: contain;
	vertical-align: -10%;
}


/*
 * Menu bars
 */
.skew-menu {
	text-align: center;
	margin-top: 42px;
	margin-left: 3em;
	margin-bottom: 1em;
}
.skew-menu ul {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
	transform: skew(0deg);
}
.skew-menu ul li {
	background: #fafafa;
	float: left;
	border: 1px solid #fafafa;
	/* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); */
	/* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); */
	border-radius: 7px 7px 7px 7px;

	margin-left: 12px;
	width: 110px;

	/* text-transform: uppercase; */
	color: #555;
	/* font-weight: bolder; */
	transition: all 0.2s linear;

}
/* .skew-menu ul li:first-child {
	border-radius: 7px 0 0 7px;
}
.skew-menu ul li:last-child {
	border-right: none;
	border-radius: 0 7px 7px 0;
} */
.skew-menu ul li:nth-child(1):hover {
	/* background: #eee; */
	color: rgb(99, 208, 224);
	border: 1px solid rgb(99, 208, 224);
	/* box-shadow: tomato; */
	/* box-sizing: border-box; */
}
.skew-menu ul li:nth-child(2):hover {
	/* background: #eee; */
	color: rgb(90, 211, 124);
	border: 1px solid rgb(90, 211, 124);
	/* box-shadow: tomato; */
	/* box-sizing: border-box; */
}
.skew-menu ul li:nth-child(3):hover {
	/* background: #eee; */
	color: rgb(200, 191, 94);
	border: 1px solid rgb(200, 191, 94);
	/* box-shadow: tomato; */
	/* box-sizing: border-box; */
}
.skew-menu ul li:nth-child(4):hover {
	/* background: #eee; */
	color: rgb(224, 99, 99);
	border: 1px solid rgb(224, 99, 99);
	/* box-shadow: tomato; */
	/* box-sizing: border-box; */
}
.skew-menu ul li a {
	display: block;
	padding: 0.5em 0em;
	color: inherit;
	text-decoration: none;
	/* transform: skew(-5deg); */
}


/* .main_doi{
	height: 22.5px;
} */


.block_me{
	padding: 18px 0 9px 0;
	/* background-color: #fefdfd; */
}
.block_odd{
	padding: 9px 0 9px 0;
	/* background-color: #fefdfd; */
}
.block_even{
	padding: 9px 0 9px 0;
	/* background-color: #fefdfd; */
}


.emph{
	font-weight: bold;
}


#about_me{
	/* white-space: pre; */
	width: 700px;
	padding-right: 10px;
	/* text-indent: 50px; */
}
#img_face{
	width: 200px;
	height: 200px;
	padding-left: 0px;
	margin-left: 40px;
	/* margin-right: 20px; */
	/*border: 1px solid black;*/
	border-radius: 30px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#img_face:hover {
	/* transform: translateY(-2px); */
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), 0 6px 12px rgba(0, 0, 0, 0.15);
}

#wrap_img_face{
	width: 220px;
	height: 220px;
}



/* SELECTED WORKS */


.fade-container {
	position: relative;
	width: 600px;
	height: 300px;
}
.fade-item {
	display: flex;
	position: relative;
	margin-bottom: -204px;
	/* height: 100px; */
	padding: 0px;
}

.selected_img_div {
	background-color: #fefdfd;
	display: flex;
	position: relative;
	opacity: 0;
	/* Initially hidden */
	transition: opacity 1s ease-in-out;
	/* Smooth transition */
	margin-bottom: 0px; /*relativeの効果でできる余白を解消する値を入れます*/
}
.contents_description_text {
	transition: opacity 1s ease-in-out;
}
.contents_description_link{
	transition: opacity 1s ease-in-out;
}
.selected_img{
	/* float: left; */
	height: 300px;
	width: 500px;
	margin-right: 13px;
	margin-left: 70px;
	object-fit: contain;
}
.fade-item1 {
	z-index: 100;
	top: 0px;
	left: 0;
	width: 100%;
	height: 100%;
}.fade-item2 {
	z-index: 80;
	top: -96px;
	left: 0;
	width: 100%;
	height: 100%;
}
.fade-item3 {
	z-index: 60;
	top: -192px;
	left: 0;
	width: 100%;
	height: 100%;
}

.selected_img_div:first-child {
	opacity: 1;
	/* First item visible */ 
}


#selected_works {
	margin-top: 20px;
	position: relative;
}

/* 
.selected_contents_left{
	display: flex;
	margin-right: 10px;
	padding-top: 10px;
	padding-right: 10px;
}
.selected_contents_right{
	display: flex;
	margin-right: 10px;
	padding-top: 10px;
	padding-right: 10px;
} */
 
.contents_description{
	/* margin: auto; */
	width: 340px;
	margin-left: 10px;
	margin-right: 70px;
}
.main_doi{
	width: auto;
	height: 20px;
}





.fade-container_pos {
	margin: auto;
	display: flex;
}.item-pos {
	position: relative;
	opacity: 0.25;
	transition: opacity 1s ease-in-out;
	width: 6px;
	height: 6px;
	background-color: #818181;
}.item-pos1 {
	top: 20px;
	left: 470px;
}.item-pos2 {
	top: 14px;
	left: 490px;
}.item-pos3 {
	top: 8px;
	left: 510px;
}

/* Navigation arrows */
#nav-arrows {
	position: absolute;
	width: 1000px;
	height: 300px;
	top: 0;
	left: 0;
	pointer-events: none;
}

.nav-arrow {
	position: absolute;
	background: none;
	color: gray;
	border: none;
	font-size: 30px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: auto;
	z-index: 200;
}

.nav-arrow:hover {
	background: none;
	color: darkgray;
	transform: translateY(-50%) scale(1.1);
}

.prev-arrow {
	left: 0;
}

.next-arrow {
	right: 0;
}



.align_bottom{
	align-items: baseline;
}
.flex_h{
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;

	flex-direction: row;

	position:relative;
	/* overflow: hidden; */
}
.main_space{
	height: 10px;
}

.header1{
	font-size: 25px; /*headers of each block*/
	padding-bottom: 5px;
	/* color: rgb(0, 0, 0); */
	font-weight: 500;
}

#header_aboutme {
	border-left: 5px solid rgb(60, 188, 205);
	border-bottom: 2px solid rgba(60, 188, 205, 0.2);
	padding: 12px 0 12px 20px;
	position: relative;
	background: rgba(60, 188, 205, 0.03);
	margin: 8px 0;
	border-radius: 0 8px 8px 0;
	box-shadow: 0 2px 8px rgba(60, 188, 205, 0.1);
	transition: all 0.3s ease;
}

#header_aboutme:hover {
	/* transform: translateX(2px); */
	box-shadow: 0 4px 12px rgba(60, 188, 205, 0.15);
	background: rgba(60, 188, 205, 0.05);
}

#header_selectedworks {
	border-left: 5px solid rgb(60, 188, 205);
	border-bottom: 2px solid rgba(60, 188, 205, 0.2);
	padding: 12px 0 12px 20px;
	position: relative;
	background: rgba(60, 188, 205, 0.03);
	margin: 20px 0 20px 0;
	border-radius: 0 8px 8px 0;
	box-shadow: 0 2px 8px rgba(60, 188, 205, 0.1);
	transition: all 0.3s ease;
}

#header_selectedworks:hover {
	/* transform: translateX(2px); */
	box-shadow: 0 4px 12px rgba(60, 188, 205, 0.15);
	background: rgba(60, 188, 205, 0.05);
}
#header_publication{
	border-left: 5px solid rgb(94, 183, 42);
	border-bottom: 2px solid rgba(94, 183, 42, 0.2);
	padding: 12px 0 12px 20px;
	position: relative;
	background: rgba(94, 183, 42, 0.03);
	margin: 20px 0;
	border-radius: 0 8px 8px 0;
	box-shadow: 0 2px 8px rgba(94, 183, 42, 0.1);
	transition: all 0.3s ease;
}

#header_publication:hover {
	/* transform: translateX(2px); */
	box-shadow: 0 4px 12px rgba(94, 183, 42, 0.15);
	background: rgba(94, 183, 42, 0.05);
}

#header_lecture{
	border-left: 5px solid rgb(200, 191, 94);
	border-bottom: 2px solid rgba(200, 191, 94, 0.2);
	padding: 12px 0 12px 20px;
	position: relative;
	background: rgba(200, 191, 94, 0.03);
	margin: 20px 0;
	border-radius: 0 8px 8px 0;
	box-shadow: 0 2px 8px rgba(200, 191, 94, 0.1);
	transition: all 0.3s ease;
}

#header_lecture:hover {
	/* transform: translateX(2px); */
	box-shadow: 0 4px 12px rgba(200, 191, 94, 0.15);
	background: rgba(200, 191, 94, 0.05);
}

#header_projects{
	border-left: 5px solid #bd3d3d;
	border-bottom: 2px solid rgba(189, 61, 61, 0.2);
	padding: 12px 0 12px 20px;
	position: relative;
	background: rgba(189, 61, 61, 0.03);
	margin: 20px 0;
	border-radius: 0 8px 8px 0;
	box-shadow: 0 2px 8px rgba(189, 61, 61, 0.1);
	transition: all 0.3s ease;
}

#header_projects:hover {
	/* transform: translateX(2px); */
	box-shadow: 0 4px 12px rgba(189, 61, 61, 0.15);
	background: rgba(189, 61, 61, 0.05);
}
.header2{
	margin: 20px 0 0 0;
	font-size: 20px; /*1.7vw*/
	/* color: rgb(0, 0, 0); */
	/* padding: 0 0 0 1.5vw; */
	padding: 0 0 0 5px;
	/* border-left: 1px solid rgb(192, 192, 192); */
}
.itemtriangle1 {
	background: #6bcbe0;
	margin-top: 6px;
	margin-right: 10px;
	height: calc(tan(60deg) * 20px / 2); /*1vw*/
	width: 15px; /*0.75vw*/
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	float: left;
}.itemtriangle2 {
	background: #63da61;
	margin-top: 6px;
	margin-right: 10px;
	height: calc(tan(60deg) * 20px / 2);
	width: 15px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	float: left;
}.itemtriangle3 {
	background: #cab34b;
	margin-top: 6px;
	margin-right: 10px;
	height: calc(tan(60deg) * 20px / 2);
	width: 15px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	float: left;
}.itemtriangle4 {
	background: #e26551;
	margin-top: 6px;
	margin-right: 10px;
	height: calc(tan(60deg) * 20px / 2);
	width: 15px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	float: left;
}

.itemkey {
	padding-left: 10px;
}

#wrap_contents{
	margin: 0 auto;
	width: 1000px; /*60vw*/
	font-size: 16px; /*1.0vw*/
}

.me{
	font-weight: bold;
	text-decoration: underline;
}


.award{
	color: rgb(255, 0, 0);
	font-weight: bold;
	text-decoration: underline;
	}


#table_bibliography {
	margin: 10px 0 0 28px;
	text-align: left;
}
#table_current ul {
	padding: 0;
	margin-left: 30px;
}
#table_lecture {
	margin: 10px 0 0 20px;
}
.table_date{
	width: 200px;
	vertical-align: top;
}

	
#wrap_footer{
	width: 1000px;
	text-align: center;
	margin: 20px auto 20px auto;
}
#footer{
	margin: 0 auto;
}
#font_footer{
	color: rgb(110, 110, 110);
}


@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
	html {
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}
	

	body {
		font-size: 12px;
		width: 100%;
		margin: 0 auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}

	/* 
	* Header
	*/
	#wrap_header{
		width: 100%;
		margin: 0 auto 0px auto;
		border-bottom: 1px solid rgb(206, 206, 206);
	}
	#header_name{
		width: 50%;
		padding-top: 30px;
		margin-left: 5%;
		margin-right: 0px; /* distance from header name to menu bar */
		/* width: 43vw; */
		/* text-align: left; */
	}
	#font_header{
		font-size: 28px; 
		/* 32pt; */
		/* color: rgb(0, 0, 0); */
	}
	#mylinks{
		padding-top: 0px;
		padding-left: 0px;
		padding-bottom: 10px;
		text-align: left;
		margin: 0 4px 0 auto;
		/* width: 17vw; */

		
		position: absolute;
		top: 10px;
		right: 10px;
		overflow: hidden;
	}
	
	/* #mylinks{
	} */
	/* #myicons {
		margin-top: px;
	} */
	#myicons img{
		padding-top: 3px;
	}



	/*
	* Menu bars
	*/
	.flex_h{
		display: block;
		width: 100%;
		margin: 0 auto;
		/* flex-direction: row; */
	}
	.skew-menu {
		text-align: center;
		margin-top: 50px;
		margin-left: 0em;
		margin-bottom: 5px;
		font-size: 16px;
	}

	.skew-menu ul li {
		/* background: #fefdfd; */
		float: left;
		/* border: 1px solid #fefdfd; */
		/* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); */
		/* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); */
		border-radius: 7px 7px 7px 7px;

		margin-left: 5px;
		margin-right: 5px;
		/* width: 110px; */
	}
	.skew-menu ul li {
		width:85px;
	}


	
	.block_me{
		padding: 9px 0 9px 0;
		/* background-color: #fefdfd; */
	}

	#mylinks{
		position: absolute;
		top: 10px;
		right: 10px;
		overflow: hidden;
	}







	#wrap_contents{
		margin: 50px auto 0 auto;
		width: auto;
		padding: 5%;
		font-size: 16px; /*1.0vw*/
	}





	
	#header_aboutme {
		margin: 8px 0;
	}
	#header_selectedworks {
		margin: 8px 0 20px 0;
	}
	#header_publication{
		margin: 8px 0;
	}
	#header_lecture{
		margin: 8px 0;
	}
	#header_projects{
		margin: 8px 0;
	}


	#about_me {
		width: 100%;
		margin: 0 auto;
		padding-right: 0px;
		padding-left: 0px;
	}

	#img_face {
		width: 200px;
		height: 200px;
		padding-left: 0px;
		margin-top: 10px;
		margin-left: auto;
		margin-right: auto;
		/* margin-right: 20px; */
		/*border: 1px solid black;*/
		border-radius: 30px;
	}

	#wrap_img_face {
		width: 220px;
		height: 220px;
		margin-left: auto;
		margin-right: auto;
	}



	.fade-container {
		position: static;
		margin: 0 auto;
		width: 100%;
		display: block;
	}
	.fade-item {
		display: block;
		position: static;
		margin-bottom: 0px;
		/* height: 100px; */
		padding: 0px;
	}
	



	.selected_img_div {
		display: block;
		transition: none;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	.selected_img {
		margin: 0 auto;
		margin-left: auto;
		margin-right: auto;
		width: 95%;
	}
	.contents_description{
		/* margin: auto; */
		width: auto;
		/* padding-left: 5%;
		padding-right: 5%; */
		/* margin-left: 5%;
		margin-right: 5%; */
		margin: 0 auto;
		margin-left: 0;
		margin-right: 0;
	}
	.contents_description_text {
		transition: none;
	}
	.contents_description_link{
		transition: none;
	}
	
	/* Temporary */
	.fade-item3 {
		opacity: 0;
		margin-bottom: -300px;
	}


	#fade-container_pos{
		opacity: 0;
	}

	/* Hide navigation arrows on mobile */
	#nav-arrows {
		display: none;
	}




	#table_bibliography {
		margin: 10px 0 0 0px;
	}
	#table_current ul {
		padding: 0;
		margin-left: 0px;
	}
	#table_lecture {
		margin: 10px 0 0 0px;
	}
	.table_date{
		width: 30%;
	}


	#wrap_footer{
		width: 100%;
		text-align: center;
		margin: 20px auto 20px auto;
	}
	

}