body {
    width: 100%;
    color: #fff;
    background-color: black;
    font-family: serif;
    z-index: -20;
    display: none;
}

a {
    color: #fff;
    text-decoration: none;
}

.fadein-inline{
    transform:translateX(-50px);/* 最初は元の位置より左にずらしておく */
    opacity:0;  /* 最初は非表示にしておく */
    transition: opacity 1s,transform 2s;/* 透明度と位置を設定 */
}

.fadein-inline-right{
    transform:translateX(50px);/* 最初は元の位置より左にずらしておく */
    opacity:0;  /* 最初は非表示にしておく */
    transition: opacity 1s,transform 2s;/* 透明度と位置を設定 */
}

.fadein-up{
    transform:translateY(50px);/* 最初は元の位置より左にずらしておく */
    opacity:0;  /* 最初は非表示にしておく */
    transition: opacity 1s,transform 2s;/* 透明度と位置を設定 */
}

.fadein-down{
    transform:translateY(-50px);/* 最初は元の位置より左にずらしておく */
    opacity:0;  /* 最初は非表示にしておく */
    transition: opacity 1s,transform 2s;/* 透明度と位置を設定 */
}

.fadein-after{
    /*透過度の設定。非表示から表示にする。*/
    opacity: 1;
    /*要素を100px左にしていたのを元の位置に戻す*/
    transform: translate(0);
}

header {
    width: 100%;
    height: 90px;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    transition: opacity 1s,transform 2s;/* 透明度と位置を設定 */
}

.invert {
    transform:translateY(-100px);
    opacity:0;  /* 最初は非表示にしておく */
    transition: opacity 1s,transform 2s;/* 透明度と位置を設定 */
}

.header {
    width: 90%;
    height: 90px;
    margin: 0 auto;
}

.header h1 {
    display: inline-block;
}

    .header h1 img {
        width: 60px;
        padding-block: 15px;
    }

    .header h1 p {
        font-size: 24px;
        display: inline-block;
        line-height: 90px;
        vertical-align: top;
        font-weight: 400;
        letter-spacing: normal;
    }

.header nav {
    float: right;
    line-height: 90px;
}

    .header nav ul li {
        display: inline-block;
        font-size: 15px;
        padding-inline: 10px;
    }

    .header nav ul li a {
        color: #fff;
        text-decoration: none;
    }


footer {
    width: 100%;
    background-color: black;
}

footer li {
    font-size: 18px;
    color: #8A8A8A;
    list-style: none;
    line-height: 2em;
}

footer a {
    font-size: 18px;
    color: #8A8A8A;
    list-style: none;
    line-height: 2em;
}

.footer {
    width: 90%;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 80px;
}

.footer h1 {
    display: inline-block;
}

    .footer h1 img {
        width: 60px;
        padding-block: 15px;
    }

    .footer h1 p {
        font-size: 24px;
        display: inline-block;
        line-height: 90px;
        vertical-align: top;
        font-weight: 400;
        letter-spacing: normal;
    }

.footer_left {
    display: inline-block;
    width: 40%;
}

    .footer_left ul {
        margin-top: 35px;
    }

.footer_center {
    display: inline-block;
    width: 30%;
    vertical-align: bottom;
}

.footer_right {
    display: inline-block;
    width: 25%;
    vertical-align: bottom;
}

.footer_right ul li {
    display: inline-block;
}
.footer_right ul li img {
    width: 25px;
    color: #8A8A8A;
}

.footer_right p a {
    font-size: 14px;
}

.hamburger-menu {
    display: none;
}



@media screen and (max-width: 800px){
    
    .hamburger-menu {
        display: block;
    }
    
    .header nav {
        line-height: 40px;
    }
    
    .header nav ul li {
        display: block;
    }

    .footer {
        text-align: center;
    }

    .footer_left {
        display: block;
        width: auto;
    }

    .footer_center {
        display: none;
    }

    .footer_right {
        display: block;
        width: auto;
        padding-top: 20px;
    }
    
    /* ハンバーガメニュー */
    .header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
      }
      .logo {
        font-weight: 700;
        padding-left: 14px;
      }
      .hamburger-menu {
        width: 50px;
        height: 50px;
        position: relative;
        border: none;
        background: transparent;
        appearance: none;
        padding: 0;
        cursor: pointer;
      }
      .hamburger-menu__bar {
        display: inline-block;
        width: 44%;
        height: 2px;
        background: #fff;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        transition: .5s;
      }
      .hamburger-menu__bar:first-child {
        top: 16px;
      }
      .hamburger-menu__bar:nth-child(2) {
        top: 24px;
      }
      .hamburger-menu__bar:last-child {
        top: 32px;
      }
      .hamburger-menu--open .hamburger-menu__bar {
        top: 50%;
      }
      .hamburger-menu--open .hamburger-menu__bar:first-child {
        transform: translateX(-50%) translateY(-50%) rotate(45deg);
      }
      .hamburger-menu--open .hamburger-menu__bar:last-child {
        transform: translateX(-50%) translateY(-50%) rotate(-45deg);
      }
      .hamburger-menu--open .hamburger-menu__bar:nth-child(2) {
        display: none;
      }
      .navigation {
        display: none;
        background: rgb(36, 36, 36, 0.7);
        position: absolute;
        top: 70px;
        width: 100%;
        z-index: 9999;
      }
      .navigation__list {
        text-align: center;
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .navigation__list-item {
        border-bottom: solid 1px #474747;
      }
      .navigation__list-item:first-child {
        border-top: solid 1px #474747;
      }
      .navigation__link {
        color: #fff;
        font-weight: 700;
        text-decoration: none;
        display: block;
        padding: 24px 0;
        transition: .5s;
      }
      @media (hover: hover) and (pointer: fine) {
        .navigation__link:hover {
          background: #333;
        }
      }
}