.site-header{
    background: #000;
    opacity:0.7;
    display: flex;
    position: fixed;
    justify-content: space-between;
    width: 100%;
    height: 4em;
    z-index: 10;
    font-size:2vw;
    font-family: 'Midashi Go MB31','Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

}

@media screen and (min-width:1024px) {
    .site-header{
        font-size:16px;
}}

.gnav__menu{
    display: flex;
    flex-direction: column;
    z-index: 2;
}
.gnav__menu__item{
    margin-left: 20px;
    margin-top:0.9em;
}
.gnav__menu__item a{
    color: #fff;
    text-decoration: none;
}

.main-article {
    margin-top:20px;
    padding:0em 0 0 8vw;
    line-height: 170%;
    font-size:80%;

    position: relative;
}

@media screen and (min-width:1024px) {
.main-article {
    width:980px;
    margin:auto;
    position: relative;
    font-size:100%;
}
}

.main-article-borderarea {
    border-left: 1px solid #818285;
    padding-left:0 0 0 2em;
}


.sub-article {
    margin-top:20px;
    padding:0em 8vw;
    line-height: 170%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-article-inner {
    padding:0.6em 0.8em 0.6em 0em;
    color:#474243;
    font-family: 'Midashi Go MB31','Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.main-article-parts a {
    text-decoration:underline;
    color:#3068E5;
}

h2 {
    padding:1em 0 0.3em 2.5vw;
    font-size:240%;
    font-weight:bold;
    color: #7e9234;
    font-family: 'Midashi Go MB31','Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

h3 {
    padding:1em 0 0.3em 2.5vw;
    font-size:150%;
    font-weight:bold;
    color: #7e9234;
    font-family: 'Midashi Go MB31','Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

h5 {
    padding: 0.1em 0.8em 0.12em 0.8em;
    background-color: #bac885;
    font-weight:bold;
    color: #fff;
    text-align: right;
}

.no-padding-left {
    padding-left:0;
}

.margin-bottom {
    margin-bottom: 0.8em;
}

p {
    padding-bottom:0.3em;
}

strong {
    font-weight:bold;
    color:#818285;
}

em {
    color: #7e9234;
    font-style:normal;
}

.link-color {
    color: #0e83cd;
    border-bottom: 1px solid #0e83cd;
}

.right-padding {
    padding-right: 1em;
}

.left-padding {
    padding-left: 1em;
}

.img-border {
    border: #818285 solid 1px;
}

.img-max {
    max-width: 100%;
}

.img-half {
    max-width: 50%;
}

.img-quarter {
    max-width: 25%;
}

.main-article-parts,.main-article-parts-no-dot {
    padding:0.6em 0 0.6em 2.5vw;
}

.main-article-parts-flex-box {
    display: flex;
  flex-direction: row;
}

.main-article-parts-with-image {
    flex: 1;
}

.inner-flex-parent {
    display: flex;
  flex-direction: row;
}

.button-img-container {
    display: flex;
    flex-direction: row;
}
.button-img-parts {
    flex: 0;
}

.button-img-source {
    width: 23.8vw;
    margin:1vw 0.43vw;
    border-radius: 0.5vw;
    transition:all 0.4s;
    filter:brightness(0.2);
}

.button-img-source:hover {
    background-color:#0e83cd;
    filter:brightness(1);
}

.break-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.img-parts {
    flex: 0;
    /*visibility: hidden;*/
}

.img-parts-left {
    margin-right:16px;
    float:left;
}

.img-parts-right {
    margin-left:16px;
}

.img-parts-right2 {
    margin-left:16px;
    float:right;
}


.circle-path {
    clip-path: circle(40%);
}

.main-article-normal {
    clear:all;
}

.absolute-img-parts {
    position:absolute;
}

.absolute-img-parts-right {
    position:absolute;
}

@media screen and (max-width:1024px) {
    .absolute-img-parts-right {
        display: none;
    }
        }

.empty-img-parts {
    flex:0;
}

.footer-back {
    background-color: #7e9234;
    background-image: url(../img/slider/footer_img.jpg);
    background-size: cover;
    color:#fff;
    padding: 1.5em;
    font-size:80%;

    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Lato', 'Noto Sans JP';
}


.img-parts {
    float: left;
}


.nav-empty {
    position: relative;
    width:33.333%;
}


.nav-name {
    position: relative;
    width:33.333%;
}

.hmenu-area {
    position: relative;
    width:33.333%;
}

.nav-name-inner {
/*    position: absolute;
    left:50%;*/
    color:white;
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;

}


.menu-btn {
    display: flex;
    justify-content:flex-end;
    z-index: 0;
    height:100%;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}

#menu-btn-check {
    display: none;
}

.menu-btn-img {
    height:100%;
}

.drawer-content {
    width: 10em;
    height: 100%;
    position: fixed;
    top: 0;
    right: -10em;
    z-index: -3;
    background: #000;
    transition: .25s;
  }

  .hamburger-menu {
    height:100%;
    padding-right:1vw;
    display: flex;
    justify-content: flex-end;
    align-items: center;

  }

  .gnav__menu {
      margin-top:4em;
  }
  /* アイコンがクリックされたらメニューを表示 */
  #menu-btn-check:checked ~ .drawer-content {
    right: 0em;/* メニューを画面に入れる */
  }


  .button-img-over-text {
      color:#fff;
      font-size:3.2em;
      font-weight: bold;
      position: absolute;
      z-index:10;
      text-align: center;

      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;

      width: 80%;
      height: 20%;
  }

 .button-img-over-text-img {
width:100%;
}