@charset "UTF-8";

@font-face{
font-family: "Icons";
src: url("fonts/Icons.eot?slo3wg");
src: url("fonts/Icons.eot?slo3wg#iefix") format("embedded-opentype"),
url("fonts/Icons.ttf?slo3wg") format("truetype"),
url("fonts/Icons.woff?slo3wg") format("woff"),
url("fonts/Icons.svg?slo3wg#Icons") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}

body,html{
height: 100%;
}

body{
background-color: #f5fff5;
font-family: Sans-serif;
overflow: auto;
margin: 0px;
padding: 0px;
}

h1{
font-size: 210%;
color: #1b8050;
line-height: 150%;
font-weight: bold;
padding-top: 6px;
}

h2{
font-size: 170%;
color: #a52a2a;
line-height: 150%;
font-weight: bold;
position: relative;
padding: 16px 0px 0px 1.2em;
}

h2:before{
font-family: "Icons" !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
content: "\e900";
color: #ff1493;
position: absolute;
left: 0px;
}

h3{
font-size: 130%;
color: #292929;
line-height: 170%;
font-weight: bold;
position: relative;
padding: 16px 0px 0px 1.2em;
}

h3:before{
font-family: "Icons" !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
content: "\e901";
position: absolute;
left: 0px;
}

p,li{
font-size: 100%;
color: #292929;
line-height: 170%;
}

ul{
padding-left: 1.5em;
}

ol{
padding-left: 2.5em;
}

pre{
background-color: #515151;
font-family: monospace;
font-size: 100%;
color: #eeeeec;
line-height: 170%;
padding: 12px;
margin-left: 1em;
overflow-x: auto;
overflow-y: hidden;
}

img{
max-width: 100%;
height: auto;
border: none;
}

a:link{
color: #116aff;
}

a:visited{
color: #5000a0;
}

a:hover{
color: #1124cc;
background-color: #c0ffee;
}

a:active{
color: #1124cc;
}

p.description{
padding-top: 16px;
}

p.next{
padding-top: 16px;
}

p.footer{
font-size: 85%;
text-align: center;
margin-top: 40px;
}

span.mail:after{
content: "@sus.u-toyama.ac.jp"
}

span.copyright:after{
content: "-2025"
}

@media screen and (min-width: 768px){

p.menu{
font-family: "Century Gothic",Sans-serif;
font-size: 210%;
color: #1124cc;
line-height: 100%;
font-weight: bold;
padding-top: 4px;
padding-bottom: 8px;
}

p.menu:before,
p.menu:after{
content: "-";
}

ul.menu{
list-style: none;
padding: 0em;
}

li.menu{
font-family: "Century Gothic",Sans-serif;
font-size: 180%;
font-weight: bold;
line-height: 100%;
padding: 8px 0em;
}

a.menu:link{
color: #ff6250;
}

a.menu:visited{
color: #ff6250;
}

a.menu:hover{
color: #ff1493;
background-color: #ffddff;
}

a.menu:active{
color: #ff1493;
}

p.highjump{
display: none;
}

#menubox{
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 232px;
overflow: auto;
background-image: url(img/bg.png);
}

#menu{
text-align: center;
padding: 12px;
}

#mainbox{
height: 100%;
overflow: auto;
margin-left: 232px;
}

#main{
max-width: 900px;
padding: 12px 12px 12px max(12px,calc(50vw - 566px));
}

}

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

body{
height: 100%;
width: 100%;
overflow: auto;
}

h1{
font-size: 170%;
}

h2{
font-size: 130%;
}

h3{
font-size: 110%;
}

p.menu{
display: none;
}

ul.menu{
list-style: none;
padding: 0px;
text-align: center;
}

li.menu{
font-size: 140%;
font-weight: bold;
display: inline;
line-height: 170%;
}

p.highjump{
text-align: right;
padding-top: 16px;
}

#menu{
padding: 12px 12px 3px 12px;
}

#main{
padding: 3px 12px 12px 12px;
}

}

@media print{

p.highjump,
#menubox,
#menu{
display: none;
}

#mainbox{
height: 100%;
width: 100%;
overflow: visible;
margin-left: 0px;
}

#main{
padding: 0px;
}

}