.main{
                  width: 100%;              /* 幅指定                          */
                  background-color: #6e5a40;   /* 背景色指定(黒色)                */
                  text-align: center;       /* テキスト表示位置指定(中央寄せ)  */
    }
     
    .text{
                  font-size:30px;           /* 文字サイズ指定                  */
                  color: #fff;              /* 色指定(白色)                    */
    }
    body {
        background-color: #eae7e7; /* アイボリーの背景色 */
        color: #000000; 
    }
    li {
        list-style-type: none;
    }
    .button {
      display       : inline-block;
      border-radius : 22%;          /* 角丸       */
      font-size     : 16pt;        /* 文字サイズ */
      text-align    : center;      /* 文字位置   */
      cursor        : pointer;     /* カーソル   */
      padding       : 8px 36px;   /* 余白       */
      background    : #505978;     /* 背景色     */
      color         : #ffffff;     /* 文字色     */
      line-height   : 1em;         /* 1行の高さ  */
      transition    : .3s;         /* なめらか変化 */
      box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
      border        : 2px solid #b0c4de;    /* 枠の指定 */
    }
    .button:hover {
      box-shadow    : none;        /* カーソル時の影消去 */
      color         : #98ff98;     /* 背景色     */
      background    : #ffffff;     /* 文字色     */
    }

*{box-sizing: border-box;}
/*header*/
ul.gnav-navi-1{
background: #e6c1a0;
padding: 0;
text-align: center;
}
ul.gnav-navi-1 li{
display: inline-block;
}


ul.gnav-navi-1 li a{
display: block;
padding: 1em;
color: #fff;
text-decoration: none;
}
ul.gnav-navi-1 a::first-line{
font-size: 16px;
font-weight: bold;
}



.txt {
    display: flex;
    overflow: hidden;
}

.txt p {
    color: #505978;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: .06em;
    margin: 0;

    /* ここからアニメーション関係 */
    transform: translateY(2em);
    animation: textanimation 1s forwards;
}
/* 1文字目 */
.txt p:nth-child(1) {
    animation-delay: 0.2s
}
/* 2文字目 */
.txt p:nth-child(2) {
    animation-delay: 0.4s
}
/* 3文字目 */
.txt p:nth-child(3) {
    animation-delay: 0.6s
}
/* 4文字目 */
.txt p:nth-child(4) {
    animation-delay: 0.8s
}
/* 5文字目 */
.txt p:nth-child(5) {
    animation-delay: 1s
}
/* 6文字目 */
.txt p:nth-child(6) {
    animation-delay: 1.2s
}
/* 7文字目 */
.txt p:nth-child(7) {
    animation-delay: 1.4s
}
/* 8文字目 */
.txt p:nth-child(8) {
    animation-delay: 1.6s
}


@keyframes textanimation {
    0% {
        transform: translateY(2em);
    }

    100% {
        transform: translateY(0);
    }
}