.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);
    }
}