@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;
    position:fixed;
	background-color:#EECFA5;    
	}
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;
}
main{
    width:100%; 
    padding:140px 0 40px 0;
}
section{
    width:25%;
    margin-bottom:20px;
//  padding:10px;
}
section p{
    font-size:1.2rem;
    line-height:1.5;
}
.flex{
    display:flex;
    flex-direction:column;
     justify-content:center;
    align-items:flex-start;
    width:96%;
    }
.flex div{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    width:100%;
    padding:5px;
    margin:5px;
}

.flex div a{
  padding:20px;
}

.flex h1{
    font-size:2.5rem;
    font-weight:bold;
    color:blue;
    margin:50px 0 30px 20px;
    text-decoration-line: underline;
    text-decoration-style:double;
    text-decoration-color:blue;
    text-underline-offset:10px;
}
.flex h2{
    padding:5px;
    font-size:2rem;
    font-weight:bold;
    margin:30px 0 5px 20px;
}
.flex h3{
    padding:5px;
    font-size:1.5rem;
    font-weight:bold;
    margin:5px 0 10px 0;
    color:darkblue;
}
.flex h4{
    font-size:1.2rem;
    font-weight:bold;
    margin:5px 0 5px 0;
}
.flex a{
    color:darkblue;
}
.flex a:hover{
    color:red;
}
.onsen p{
    font-size:1.4rem;
    margin-left:40px;
}
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;
}