@charest "UTF-8";
html{
    font-size:62.5%;
}
body {
	font-family: "ヒラギノ角ゴ Pro W3""ヒラギノ丸ゴ ProN W4",Hiragino Kaku Gothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", MS PGothic, sans-serif, "ＭＳ Ｐ明朝", MS PMincho;
	color: #000;
	background-color:#EECFA5;
}
a:link {color: deepskyblue; text-decoration:none;} transition; 3s;
a:visited {color: purple; text-decoration:none;}
a:hover {color: peru; text-decoration:underline;}
a:active {color: red; text-decoration:none;}

a img{ opacity:1; transition:0.5s;}
a img:hover{ opacity:0.5;}

#container{
    margin:0 auto;
    width:1000px;
}
header {
    display:flex;
	width: 100%;
	height: 160px;
	padding-top: 10px;
    color:darkblue;
}
nav{
    float:right;
    width:100%;
    writing-mode:tb-lr;
    writing-mode:vertical-lr;
    padding-top:10px;
}
nav ul{
    list-style:none;
}
nav li{
    width:30px;
    font-size:1.5rem;
    font-family:ＭＳ Ｐ明朝;
    color:skyblue;
}
nav li a{
    font-weight: bold;
    color:dodgerblue;
}
article{
    width:84%;
    text-align:left;
    margin:0 0 70px 80px;
    font-size:1.8rem;
    font-family:メイリオ;
    color:midnightblue;  
    line-height:2;
    letter-spacing:0.15em;
}
footer{
    width:100%;
    font-family:ＭＳ Ｐ明朝;
    font-weight:bold;
    font-size:1.6rem;
    margin:50px 0 30px 20px;    
    color:#000; 
}
footer ul{
    list-style:none;
}
footer p{
    text-align:right;
}
a.mail:link{
    color:#000;
}


@media screen and (max-width:1040px)
#container {
    width:96%;   
}    
    
@media screen and (max-width:780px) 
#container {
    width:100%;
    font-size:1.5rem;
}
    
@media screen and (max-width:520px) 
#container {
    width:100%;
    font-size:1.4rem;
}