/*************************************************

CSS for http://unit.aist.go.jp/hiiri/

hiiri.css

April 1, 2020	ver 0.0

Copyright (C) 2020 HIIRI, AIST. All rights reserved.

*************************************************/

/*----- BODY -----*/

body {
color: #000000;
background-color: #FFFFFF;
background-image: url(./bg-BODY.jpg);
background-repeat: repeat-y;
font-style: normal;
text-decoration: none;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
text-align: left;
vertical-align: baseline;
letter-spacing: 0.12em;
word-spacing: 0.16em;
text-indent: 0em;
margin: 1em;
margin-left: 6em;
padding: 0em;
border-width: 0em;
border-color: transparent;
border-style: none;
height: auto;
word-wrap: normal;
}

/*----- TEXT -----*/

h1 {
color: #000000;
background-color: #FFFFFF;
background-image: url(./bg-H1.jpg);
background-position: 0% 0%;
background-repeat: no-repeat;
font-style: normal;
font-weight: bold;
font-size: 3em;
line-height: 1em;
letter-spacing: 0.15em;
word-spacing: 0.2em;
padding-top: 0.3em;
padding-bottom: 2em;
padding-left: 1em;
border-left-width: 0em;
border-right-width: 0em;
border-bottom-width: 0.1em;
border-top-width: 0.2em;
border-color: #C0C0C0;
border-style: solid;
}
span.h1s {
font-size: 0.37em;
letter-spacing: 0.111em;
}
span.h1m {
font-size: 0.55em;
letter-spacing: 0.17em;
}
span.h1t {
font-size: 0.7em;
letter-spacing: 0.21em;
}
h2 {
color: #000000;
background-color: #FAFAFA;
background-image: url(./bg-H2.jpg);
background-position: 100% 20%;
background-repeat: no-repeat;
margin-top: 1.5em;
font-size: 1.5em;
line-height: 1.5em;
font-weight: bold;
text-indent: 0.5em;
padding-left: 0.5em;
padding-right: 5em;
padding-top: 0.3em;
padding-bottom: 0.3em;
border-left-width: 0em;
border-right-width: 0em;
border-bottom-width: 0.1em;
border-top-width: 0.3em;
border-color: #D0D0D0;
border-style: solid;
}
h2.h2t {
background-image: url(./bg-H2T.jpg);
border-top-width: 0.2em;
border-color: #DCDCDC;
}
h3 {
color: #000000;
background-color: #F3F3F3;
background-image: url(./bg-H3.jpg);
background-position: 100% 60%;
background-repeat: no-repeat;
font-size: 1.3em;
line-height: 1.3em;
font-weight: bold;
text-align: center;
padding: 1em;
border-left-width: 0.4em;
border-right-width: 0.4em;
border-bottom-width: 0.2em;
border-top-width: 0.2em;
border-color: #E0E0E0;
border-style: dotted;
margin-left: 2em;
margin-right: 2em;
padding-right: 5em;
}
h3.topic {
background-image: url(./bg-H3T.jpg);
background-position: 100% 15%;
}
h4 {
color: #000000;
background-color: #FAFAFA;
font-size: 1em;
font-weight: bold;
width: 10em;
text-align: center;
border-width: 0.2em;
border-color: #F0F0F0;
border-style: solid;
}
p {
margin-left: 1em;
margin-right: 1em;
margin-bottom: 2em;
text-indent: 1em;
}
p.comment {
text-indent: 0em;
font-size: 0.9em;
line-height: 1.5em;
}
p.ni {
text-indent: 0em;
}
p.slogan-j {
font-size: 1.5em;
text-align: center;
margin-bottom: 0.5em;
line-height: 1.5em;
}
p.slogan-e {
font-size: 1.2em;
text-align: center;
margin-bottom: 0.5em;
}
address {
font-style: italic;
}
address#copyright {
text-align: center;
font-style: italic;
}
b {
font-weight: bold;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
.CENTER {
text-align: center;
}
.RIGHT {
text-align: right;
}
.hide {
color: #FFFFFF;
line-height: 0em;
font-size: 0.1em;
margin: 0em;
}

/*----- LIST -----*/

ul {
padding-left: 0em;
margin-left: 3em;
margin-right: 2em;
/* list-style-type: disc; */
list-style-image: url(./mk-UL.jpg);
list-style-position: outside;
}
ul.n, li.n {
list-style: none;
list-style-image: url();
list-style-type: none;
}
ol {
list-style-type: decimal;
}
ol.i {
list-style-type: lower-roman;
}
ul.nvl, li.nvl, li.nvls, ol.bcl, li.bcl, li.bcle, ul.vld, li.vld, ul.ln, li.ln, ul.ic, li.ic, ul.tp, li.tp {
list-style: none;
list-style-image: url();
list-style-type: none;
margin: 0em;
padding: 0em;
border-width: 0em;
border-style: solid;
display: inline;
}
ul.nvl {
border-left-width: 0.2em;
border-color: #C0C0C0;
display: flex;
flex-flow: row wrap;
text-align: center;
}
li.nvl, li.nvls {
background-color: #F8F8F8;
line-height: 1.5em;
border-color: #C0C0C0;
padding-top: 0.1em;
padding-bottom: 0em;
border-top-width: 0.1em;
border-bottom-width: 0.1em;
border-right-width: 0.2em;
flex-basis: 24%;
}
li.nvl a {
display: block;
}
li.nvl:HOVER {
background-color: #E0E0E0;
}
li.nvls {
background-color: #FFFFFF;
}
ol.bcl {
background-color: #FFFFFF;
}
li.bcl, li.bcle {
padding-right: 1.5em;
padding-left: 0em;
}
li.bcl {
background: url(./mk-bc.png) no-repeat right;
}
li.vld, li.ln {
padding-right: 0.1em;
padding-left: 0em;
}
ul.ic {
display: flex;
flex-flow: row wrap;
text-align: center;
}
li.ic {
flex-basis: 24%;
}
ul.tp {
display: flex;
flex-flow: row wrap;
text-align: left;
}
li.tp {
flex-basis: 33%;
}
li.ic:HOVER, li.tp:HOVER {
background-color: #E0E0E0;
}
li.news {
margin-top: 2em;
}

/*----- LINK -----*/

a.href:LINK {
color: #000050;
}
a.href:VISITED {
color: #500050;
}
a.href:HOVER {
color: #303000;
background-color: #E0E0E0;
}
a.href:ACTIVE {
color: #500000;
}

/*----- INPUT -----*/

input {
display: block;
background-color: #FFFFFF;
border-color: #000000;
line-height: 2em;
font-size: 1em;
}
input.form {
width: 90%
}
input.button {
border-radius: 1em;
}
input:HOVER {
background-color: #E0E0E0;
}

/*----- IMG -----*/

img {
border: 0em;
width: auto;
height: auto;
}
img.photo {
margin: 0.2em;
} 
img.aist {
margin: 0em;
margin-right: 0.5em;
}
img.icon {
/* width: 30%; */
}
img.full {
width: 100%;
}
img.half {
width: 50%;
}

/*----- FIGURE -----*/

figure.photo {
color: #000000;
margin-left: 1em;
font-size: 1.1em;
font-weight: bold;
}
figure.ic {
margin: 0.5em;
}

/*----- DIV -----*/

div {
margin: 0em;
}
div.body {
max-width: 47em;
width: 95%;
}
div.photo {
margin-left: 1em;
font-size: 0.9em;
font-weight: bold;
}
div.photobr {
margin-left: 1em;
margin-top: 1.5em;
margin-bottom: 1.5em;
font-size: 0.9em;
font-weight: bold;
}
div.nav {
line-height: 1.5em;
margin: 0em;
margin-top: 0.5em;
text-indent: 0em;
font-style: normal;
}
div#JPEN {
text-align: right;
}
div.ic {
display: grid;
}
div.req {
padding: 1em;
background-color: #FFFF00;
}

/*----- HR -----*/

hr {
color: #A0A0A0;
background-color: #A0A0A0;
height: 0.1em;
}

/*----- RUBY -----*/

ruby {
line-height: 2em;
}


/*===== Smart Phone =====*/

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

body {
font-size: 4em;
background-image: url();
margin-left: 0.5em;
}
.hide {
color: #000000;
line-height: 1.5em;
font-size: 1em;
margin: 0em;
}
h1, h2, h2.h2t, h3, h3.topic {
font-size: 1.5em;
text-align: left;
line-height: 1.5em;
background-image: url();
margin: 0em;
padding-left: 0.5em;
padding-right: 0.5em;
}
span.h1s, span.h1m {
font-size: 1em;
}
div#JPEN {
text-align: left;
}
ul {
margin-left: 1em;
list-style-type: disc;
list-style-image: url();
}
li.nvl, li.nvls, li.tp, li.ic {
flex-basis: 100%;
}
ol.bcl, li.bcl, li.bcle, ul.vld, li.vld, ul.ln, li.ln {
display: list-item;
}
input {
width: 90%;
display: block;
line-height: 1em;
font-size: 1em;
}
img.icon {
width: 75%;
}

}

/*===== Narrow PC =====*/

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

body {
font-size: 1em;
background-image: url();
margin-left: 0.5em;
}
.hide {
color: #000000;
line-height: 1.5em;
font-size: 1em;
margin: 0em;
}
h1, h2, h2.h2t, h3, h3.topic {
font-size: 1.5em;
/* text-align: left; */
line-height: 1.5em;
background-image: url();
margin: 0em;
padding-left: 0.5em;
padding-right: 0.5em;
}
span.h1s, span.h1m {
font-size: 1em;
}
ul {
margin-left: 1em;
list-style-type: disc;
list-style-image: url();
}
/*
div#JPEN {
text-align: left;
}
li.nvl, li.nvls, li.tp, li.ic {
flex-basis: 100%;
}
ol.bcl, li.bcl, li.bcle, ul.vld, li.vld, ul.ln, li.ln {
display: list-item;
}
input {
width: 90%;
display: block;
line-height: 1em;
font-size: 1em;
}
img.icon {
width: 75%
} */

}