body {
margin: 0;
padding: 0;
color: #2a2a2a;
text-align: center;
position: relative;
font-family: sans-serif;
background-color: #fff;
}

a {text-decoration: none;}
nav a:link {color: #fff;}
nav a:visited {color:#fff;}
nav a:active {color:#fff;}

a:link{color: #;40552b;}
a:visited {color: #e27272;}
a:active {color: #727238;}
a img {border: none;}


main {
display: block;
margin: 0 auto;
width: 65%;
}



article {
margin: 0.5em auto;
margin-top: 1em;
position: relative;
}

h2 {
  position: relative;/*相対位置*/
  padding-left: 2em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
  color: #7b6459;/*文字色*/
}

h2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f1b0";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1.5em;/*サイズ*/
  left: 0em;/*アイコンの位置*/
  bottom: -0.1em;/*アイコンの位置*/
  color: #ff938b; /*アイコン色*/
}

.box1 {
width: 80%;
padding: 0.5em;
margin: 0.5em auto;
text-align: left;
color: #595959;
border: 2pt #bfea95 solid;
border-radius: 1em;
overflow: auto;
}


hr {
border: dashed 1px #95dc4e;
margin: 2em auto;
}

h1 {
width: 100%;
margin: 60px auto;
padding: 0.5em;
text-align: center;
}


h3 {
  position: relative;
  color: white;
  background: #95dc4e;
  line-height: 1.4;
  padding: 0.2em;
border-radius: 1em;
}

h3:before {
  font-family: "Font Awesome 5 Free";
  content: "\f101";
  font-weight: 900;
  position: absolute;
  left : 0.5em; /*左端からのアイコンまでの距離*/
}



i {
color: #fff;
}

i:hover {
color: #ffff80;
}

.green {
color: #95dc4e;
font-size: 2em;
font-weight: 900;
}

.green:hover {
color: #bfea95;
}

footer {
color: #fff;
width: 100%;
text-align: center;
font-size: 80%;
padding: 5px;
clear: both;
margin: 1em 0;
background-color: #95dc4e;
}






/*スマホ用メニュー*/

@media(max-width: 751px){
header {
  padding:2%;
  background: #95dc4e;
}
}


@media(max-width:751px){
#nav-drawer {
  position: relative;
}
}

/*チェックボックス等は非表示に*/
@media(max-width:751px){
.nav-unshown {
  display:none;
}
}

/*アイコンのスペース*/
@media(max-width:751px){
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}
}

/*ハンバーガーの形をCSSで表現*/
@media(max-width:751px){
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #fff;
  display: block;
  content: '';
  cursor: pointer;
}
}
@media(max-width:751px){
#nav-open span:before {
  bottom: -8px;
}
}

@media(max-width:751px){
#nav-open span:after {
  bottom: -16px;
}
}

/*閉じる用の薄黒箇所*/
@media(max-width:751px){
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}
}

/*メニューの中身*/
@media(max-width:751px){
#nav-content {
  overflow: auto;
  position: fixed;
  z-index: 9999;
  width: 70%;
  max-width: 90%;/*最大幅*/
  background: #fff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
padding: 0;
}
}

/*チェックがついたら表示させる*/
@media(max-width:751px){
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}
}

@media(max-width:751px){
#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
}
@media(max-width:751px){
.header-logo-menu{
 display: flex;
 display: -moz-flex;
 display: -o-flex;
 display: -webkit-flex;
 display: -ms-flex;
 flex-direction: row;
 -moz-flex-direction: row;
 -o-flex-direction: row;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
}
}

/*ロゴやサイトタイトルをセンタリング*/
@media(max-width:751px){
.logo-area{text-align:center;margin:auto;}
section {
line-height: 1.25em;
display: block;
font-size: small;
margin: auto;
color: #fff;
}
}