/*-------------------------
	Simple reset
--------------------------*/


/*-------------------------
	General Styles
--------------------------*/

html, body{
	margin:0;
	padding:0;
	background-color: #ffffff;
	color: #333333;
	font: 14px/1.3 'Open Sans', sans-serif;
}

body {
	-webkit-text-size-adjust: 100%;
}

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }

a {
	text-decoration:none;
	outline:none;
	color:#4169e1;
}

a:hover{
	text-decoration:none;
}

.current{ color: #4169e1 !important;}

.paper{ color: #4169e1 !important;}

.seo h1 {
 float: left;
 font-size: 0px;
 height: 0px;
 width: 0px;
}

span.font300 {font-weight: 300; }
span.font700 {font-weight: 700; }
span.font800 {font-weight: 800; }
span.sample900 {font-weight: 900; }

/*----------------------------
	Container
-----------------------------*/

#container {
	max-width:800px;
	position: relative;
	padding: 0 10px;
	margin: 0 auto;
	/*left: 50%;
	margin-left: -400px;
	padding:0;*/
}


/*----------------------------
	The Header
-----------------------------*/

#header {
	height: 220px;
	max-width: 800px;
	margin:0;
	padding:0;
	font-family: 'Open Sans', sans-serif;
}

#header #title {
	color: #333333;
	font-size: 1.0em;
	font-weight: normal;
	width: 100%;
	position: relative;
	/*left: 20px;*/
	top: 25px;
}

#header #title img {
	left: 130px;
	position: absolute;
	border:1px solid #;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#header #title #name {
	color: #333333;
	font-size: 1.0em;
	font-weight: normal;
	left: 180px;
	top: 40px;
	/*margin-left: 0px;*/
	position: absolute;
}

.circular {
	position: relative;
	width: 130px;
	height: 130px;
	border-radius: 65px;
	left: 5px;
	-webkit-border-radius: 65px;
	-moz-border-radius: 65px;
	background: url(../img/yokoya24_390.webp) no-repeat;
	background-size: cover; /* 追加ポイント */
	box-shadow: 0 0 4px rgba(0, 0, 0, .8);
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .8);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .8);
}

@media screen and (max-width: 480px) {

#header {
	height: 180px;
	margin:0;
	padding:0;
	font-family: 'Open Sans', sans-serif;
}

	/* 480px以下に適用されるCSS（スマホ用） */
#header #title #name {
	color: #333333;
	font-size: 1.0em;
	font-weight: normal;
	left: 130px;
	top: 20px;
	/*margin-left: 0px;*/
	position: absolute;
}
#header #title img {
	left: 100px;
	position: absolute;
	border:1px solid #;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.circular {
	position: relative;
	width: 100px;
	height: 100px;
	border-radius: 50px;
	left: 5px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	background: url(../img/yokoya100.png) no-repeat;
	box-shadow: 0 0 4px rgba(0, 0, 0, .8);
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .8);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .8);
}
}

/*----------------------------
	The Navigation
-----------------------------*/

#header #nav {
	color: #333333;
	font-size: 1.5em;
	font-weight: normal;
	margin-top: 170px;
	padding: 13px 0 0;
	position: absolute;
	max-width: 800px;
}

#header #nav a {	
	color: #333333;
	text-decoration: none;
	padding: 0;
	background: none;
	text-shadow: none;
	-webkit-transition: 0.3s;
	-moz-transition:    0.3s;
	-ms-transition:     0.3s;
	-o-transition:      0.3s;
	transition:         0.3s;
}

#header #nav a:hover {
	color: #4169e1;
	text-decoration: none;
}

/*#header #nav a:focus {
	color: #4169e1;
	text-decoration: none;
}*/

#header #nav img {
	/*position: absolute;
	top: 12px;
	left: 750px;*/
	float: right;
	margin-left: 10px;
}

#header #nav i {
	float: right;
	margin-left: 10px;
	font-size: 1.5em;
}

#header .topnav {
  overflow: hidden;
  background-color: #fff;
  vertical-align:middle;
  color: #333333;
  font-size: 1.5em;
  font-weight: normal;
  position: relative;
  margin-top: 40px;
  max-width: 800px;
  z-index: 1;
}

#header .topnav a {
  float: left;
  display: block;
  color: #333333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
 
  background: none;
  text-shadow: none;
  -webkit-transition: 0.3s;
  -moz-transition:    0.3s;
  -ms-transition:     0.3s;
  -o-transition:      0.3s;
  transition:         0.3s;	
}

#header .topnav i {
  margin-top: 0px;
}

.navicon{
  font-size: 1.5em;
}

#header .topnav a:hover {
  color: #4169e1;
  text-decoration: none;
}

#header .current{ color: #4169e1 !important;}

#header .topnav a.active {
  background-color: #04AA6D;
  color: white;
}

#header .topnav .icon {
  display: none;
}

@media screen and (max-width: 800px) {
  #header .topnav a:not(:first-child) {display: none;}
  #header .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 800px) {
  #header .topnav.responsive {position: relative;}
  #header .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  #header .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/*----------------------------
	Common class
-----------------------------*/
.topic {
	max-width: 800px;
}
	
.topic_explanation {
	width: 400px;
	float: right;
	/*text-align: justify;*/
}

.topic_explanation2 {
	margin-top: 20px;
}

.topic_img {
	float: left;
}

.pub_img {
	border-radius: 10px;
}

.clear { clear:both; }  
.clear hr { display:none; }

/*----------------------------
	Publications
-----------------------------*/

#publications {
	max-width: 800px;
	margin-top: 20px;
}

#publications a, a:visited {
	text-decoration:none;
	outline:none;
	color:#4169e1;
}

.abst_bt {
	cursor: pointer;
	color:#333333 !important;
}

.file {
	cursor: pointer;
	color:#333333 !important;
}

/*----------------------------
	Researches
-----------------------------*/
#Research {
    max-width: 800px;
	padding-top: 20px;
}

#Research #topic img {
	float: left;
	margin-right: 10px;
}

.topic h2 {
	border-left: 5px solid rgb(51,51,51);
	border-bottom: 1px solid rgb(51,51,51);
	margin-top: 20px;
	padding: 3px 0px 3px 10px;
}

#html5-image {
	background-color: #ffffff;
}

.line {
	border-bottom: 1px solid rgb(51,51,51);
	margin-top: 10px;
	margin-bottom: 10px;
}

/*----------------------------
	Contact
-----------------------------*/

#Contact {
	margin-top: 20px;
	max-width: 800px;	
}

#Contact img {
	float: left;
	margin-right: 10px;
}

.left {
	float: left;
}
.right {
	float: right;
}

td {
	padding: 5px;
}

.items {
	font-size: 20px;
}

#Contact iframe {
	/*position: absolute;
	left: 50%;
	margin-left: -225px;*/
}

.contact {
    width: 380px;
   }
   
.gmap {
    width: 400px;
    height: 400px;
    float: right;
   }
   
@media screen and (max-width: 800px) {
.contact {
    width: 100%;
   }
.gmap {
    width: 100%;
   }
}

/*----------------------------
	The Footer
-----------------------------*/

#footer{
	margin-top: 30px;
	max-width:800px;
	height: 50px;
	/*font-family: century gothic;*/
	color: #333333;
	text-align: center;
}

#footer #copyright{
	font-size: 14px;
	font-weight: normal;
}

/* SOCIAL ICONS - GENERAL */
.social { list-style:none; margin:0px auto;}
.social li { display:inline; float:right; background-repeat:no-repeat; margin-left: 10px;
-webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius:3px; border-radius: 3px;}
.social li a { display:block; width:30px; height:30px; padding: 0 !important; position:relative; text-decoration:none; }

li.researchgate { background-image:url("../img/researchgate3.png"); }
li.facebook { background-image:url("../img/facebook3.png"); }
li.linkedin { background-image:url("../img/linkedin3.png"); }
li.googlescholar { background-image:url("../img/googlescholar2.png"); }

/* SOCIAL ICONS - CSS3 */
#css3:hover li { opacity:0.2; }

#css3 li { -webkit-transition-property: opacity; -webkit-transition-duration: 300ms;
 -moz-transition-property: opacity; -moz-transition-duration: 300ms; }
#css3 li:hover { opacity:1; }