@charset "UTF-8";
*{
margin:0; padding:0;
font-size: 14px;
font-family: メイリオ;
z-index: 0;
}

/* ヘッダー */
header{
max-width : 930px;
width : 95%;
height : 60px;
margin: 0.5em auto;
text-align: center;
background-color: rgb(240, 240, 240);
display: flex;
justify-content: space-between;
}
header .header0 , header .header1{
margin : 5px;
}



/* PC用メニュー ここから*/
@media(min-width:900px){

header .navi ul li{
list-style-type: none;
display: inline-block;
height: 40px;
margin-top : 5px;
margin-right : 20px;
}

header .navi ul li a{
text-decoration: none;
color: rgb(88, 44, 44);
display: block;
height: 100%;
width: 100%;
font-size:17px;
padding-top: 10px;
}

header .navi ul li a:hover{
color: purple;
font-weight : bolder;
}

}/* @media */



/* スマホ用メニュー */
@media(max-width:899px){

header .navi ul li{
list-style-type: none;
display: flex;
justify-content: flex-end;
background: #666666;

}
header .navi ul {
padding-top:5px;
padding-right:5px;
}
header .navi a{
color:white;
text-decoration: none;
}
header .navi ul li{
border-radius :8px;
}


header .navi ul li a{
font-size:0;
}
header .navi ul li:first-child :before{
font-size:33px;
content:'　≡　';
border-radius :8px;
}
header .navi a:hover{
color:yellow;
font-weight : bolder;
}
header .navi:hover ul li:first-child :before{
font-size:0px;
}
header .navi:hover ul li a{
font-size:16px;
}
header .navi:hover ul li:first-child{
padding-top:50px;
}
header .navi:hover {
display: block;
width: 135px;
height: 40px;
opacity:0.90;
}
header .navi:hover a{
width: 135px;
height: 40px;
padding-top:10px;
display: block;
z-index: 10;
}

}/* @media */
/* スマホ用メニュー ここまで */


/* メインコンテンツ */
main{
  width: 95%;
  max-width: 930px;
  margin: 0 auto;

  text-align: left;
  padding-left : 3%;
  padding-right : 3%;
}


/* フッター */
footer{
  display: flex;
  justify-content: center;
  width: 100%;
  height: 120px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
  background-color: rgb(240, 240, 240);

}
footer ul{
text-align: center;
}
footer ul li{
  list-style-type: none;
  display: inline-block;
  height: 40px;
  width: 120px;
  text-align: center;
}
footer ul li a{
  text-decoration: none;
  color: rgb(88, 44, 44);
  display: block;
    height: 100%;
    width: 100%;
  padding-top: 15px;
}
footer ul li a:hover{
  color: purple;
  font-weight : bolder;
}