body{
	margin:0;
}
 .nav ul.menu{
  	max-width:1020px;
  	width:100%;
  	}


  p.pagetop{
  	right:4%;
  }
footer{
	background:none;
}
/*footer:before{
  content: '';
  background: inherit;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: absolute;
  
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
}*/


#menu-cb,
#menu-icon,
#menu-background{
  display:none;
}

article.article-hidden {
  display:none; 
}


@media screen and (max-width: 769px){

  .nav ul.menu li{
    width:100%;
    border:none;
  }
  
  h2{
  	padding-left:4%;
    padding-right:4%;
  }
  
  footer address{
  	padding:0 4%;
  }


  /*ハンバーガー*/
  #menu-cb,
#menu-icon,
#menu-background{
  display:block;
}
  
  #mainMenu {
    background-color: #fff; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px; /*メニュー内左右上下余白*/
    position: fixed;
    right: -300px; /*メニュー横幅 width と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 300px; /*メニュー横幅*/
    z-index: 1000;
}


#menu-background {
    background-color: #333; /*黒背景*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 100%;
    z-index: -1;
}


#menu-icon {
    background-color: #fff; /*アイコン部分背景色*/
    border-radius: 0 0 0 10px; /*左下角丸*/
    color: #333; /*アイコン（フォント）色*/
    cursor: pointer;
    display: block;
    font-size: 50px; /*アイコン（フォント）サイズ*/
    height: 50px; /*アイコン縦高さ*/
    line-height: 50px; /*縦位置中央化*/
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: 50px; /*アイコン横幅*/
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    z-index: 1000;
}


#menu-cb {
    display: none; /*チェックボックス本体は消しておく*/
}


#menu-cb:checked ~ #mainMenu,
#menu-cb:checked ~ #menu-icon {
    transform: translate(-300px); /*メニュー本体横幅 width と合わせる*/
}


#menu-cb:checked ~ #menu-background {
    opacity: 0.5;
    z-index: 999;
}
  
  .nav ul.menu li a::after,
  .nav ul.menu li a:hover::after{
    display:none;
  }
  
  
}



 #menu-cb,
#menu-icon,
#menu-background{
  display:block;
}
  
  #mainMenu {
    background-color: #fff;
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px;
    position: fixed;
    right: -300px; 
    top: 0;
    transition: transform 0.3s linear 0s; 
    width: 300px;
    z-index: 1000;
}


#menu-background {
    background-color: #333; 
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; 
    width: 100%;
    z-index: -1;
}


#menu-icon {
    background-color: #fff; 
    border-radius: 0 0 0 10px;
    color: #333;
    cursor: pointer;
    display: block;
    font-size: 50px; 
    height: 50px;
    line-height: 50px; 
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: 50px; 
    transition: all 0.3s linear 0s; 
    z-index: 1000;
}


#menu-cb {
    display: none; 
}


#menu-cb:checked ~ #mainMenu,
#menu-cb:checked ~ #menu-icon {
    transform: translate(-300px); 
}


#menu-cb:checked ~ #menu-background {
    opacity: 0.5;
    z-index: 999;
}
  
  .nav ul.menu li a::after,
  .nav ul.menu li a:hover::after{
    display:none;
  }
 .nav ul.menu li {
    float: none;
    width: 100%;
    list-style: none;
}


/*-----------------------
header
------------------------*/
header{
  height:auto;
}
div.hero {
    width: 100%;
    height: 400px;
    /* padding-top: calc(1389 / 2090 * 100%); */
    padding: 0;
    background: url(https://himi-olive.com/wp-content/uploads/2017/03/IMG_3928.jpg) center center / cover no-repeat;
}

header h1 {
    padding: none;
    font-size: 20px;
    margin-top: 0;
    padding-top: 30px;
}

.hero_message {
	text-align:center;  
}

article.topArticle {
    margin-bottom: 0;
}

article.topArticle h3 {
	font-size:32px;  
}

@media screen and (min-width: 769px){
  div.hero {
    width: 100%;
    height: 800px;
  }
}