/*
normalize
*/

*{
margin:0 auto;
-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
}

body{
font-family:"游ゴシック体","YuGothic","游ゴシック","Yu Gothic","メイリオ",sans-serif;
font-weight:500
}


/*
customize CSS
*/

.menuBar{
width:100%;
margin: 0 auto;
background-color:#195732;
display: table;
}
.menuBar table{
width: 100%;
}
.menuBar th{
width: 10%;
}
.menuBar td{
text-align: center;
}
.logoText{
height: 50px;
vertical-align: middle;
font-size: 1.2em;
color: white;
}
.toggleIcon{
cursor: pointer;
margin-top: 10px;
}
nav{
background-color:#195732;
padding:5px 0px;
}
nav li ,footer li{list-style: none;}
nav a ,footer a, .largrMenuBar a{text-decoration:none;}
nav a:link ,footer a:link, .largrMenuBar a:link{color:#fff;}
nav a:visited, footer a:visited, .largrMenuBar a:visited{color:#fff;}
nav a:hover,footer a:hover, .largrMenuBar a:hover{color:#009900;}

.largrMenuBar{
width:100%;
height:100px;
padding-top: 20px;
position: absolute;
z-index: 2;
background: -moz-linear-gradient(top, hsla(0, 0%, 0%, 0.3), transparent);
background: -webkit-linear-gradient(top, #00000021, transparent);
background: linear-gradient(to bottom, #04042942, transparent);
}
.largrMenuBar table{
width:800px;
margin: auto;
vertical-align: middle;
}
.headerPicture{
width: 100%;
height: 480px;
}
.headerPicture img {
width: 100%;
height: 480px;
object-fit: cover;
}
footer{
background-color: #55737D;
color: #FFF;
}
footer li{
margin-left: -42px;
}
.narrow{
width:500px; 
}
/*
Media Query
*/

@media screen and (min-width: 801px) { /*PC用のメディアクエリ*/
.menuBar{display:none ;}
.responsiveContainer{
width:800px; 
padding: 10px 40px;/*padding:縦　横;*/
}
}

@media screen and (min-width:501px) and ( max-width:800px) {
.largrMenuBar{display:none ;}
.responsiveContainer{
width:100%;
padding: 10px 40px;/*padding:縦　横;*/
}
.menuBar td{
text-align: left;
}
}

@media screen and (min-width:321px) and ( max-width:500px) {/*スマホ用のメディアクエリ*/ 
.largrMenuBar{display:none ;}
.responsiveContainer{
width: 100%;
padding: 10px;
}
.narrow{
width:300px;
}
}

@media screen and (max-width: 320px) { /*アクセシビリティ設定スマホ用のメディアクエリ*/
.largrMenuBar{display:none ;}
.responsiveContainer{
width: 100%;
}
}