/*
文章共通
================================================ */
/* ふわっと表示させるための初期設定 */
.fade-in-text {
    opacity: 0; /* 初期は非表示 */
    transform: translateY(30px); /* 少し下にずらしておく */
    transition: opacity 5s ease-out, transform 1s ease-out; /* アニメーションの効果 */
}

.mes-gap{
    padding: 10px;
}

/* アニメーションが適用されるとき */
.fade-in-text.visible {
    opacity: 1;
    transform: translateY(0); /* 元の位置に戻す */
}
/*
CONCEPT
================================================ */
.concept {
    text-align: center;
    padding-top: 10vh;
}

.chapter-1 {
    display: flex;
    align-items: center;
}

.chapter-1::before {
    border-top: 1px solid;
    content: "";
    width: 2.5rem; /* 線の長さ */
    margin-right: 10px;
    color: #d4af37;
    margin-left: 10px;
}

.chapter-1::after {
    display: block;
    position: absolute;
    font-family: 'Dancing Script', cursive;
    color: rgba(216, 216, 216, 0.5);
    font-size: 2.5rem;
    right:0;
    margin-right: 10px;
    text-transform: uppercase;
    content: 'Concept';
    z-index: -1;
}

.concept-content {
    margin-top: 10px;
    margin-left: 0.5rem;
}

/*
Achievements
================================================ */
.archivements {
    text-align: center;
    padding-top: 30px;
}

.chapter-2 {
    display: flex;
    align-items: center;
}

.archivements-gap{
    margin-top: 5px;
}

.chapter-2::before {
    border-top: 1px solid;
    content: "";
    width: 2.5rem; /* 線の長さ */
    margin-right: 5px;
    margin-left: 10px;
    color: #d4af37;
}

.chapter-2::after {
    display: block;
    position: absolute;
    font-family: 'Dancing Script', cursive;
    color: rgba(216, 216, 216, 0.5);
    font-size: 2.5rem;
    right:0;
    margin-right: 10px;
    text-transform: uppercase;
    content: 'Archivement';
    z-index: -1;
}

.archivements-box {
    display: flex;
    justify-content: left;
    margin-top: 10px;
    margin-left: 0.5rem;
    gap: 5px;
    flex-direction: column;
}

/* 
MESSAGE
================================================ */
.message {
    text-align: center;
    padding-top: 30px;
}

.chapter-7 {
    display: flex;
    align-items: center;
}

.chapter-7::before {
    border-top: 1px solid;
    content: "";
    width: 2.5rem; /* 線の長さ */
    margin-right: 10px;
    margin-left: 0.5rem;
    border-color: #d4af37;
}

.chapter-7::after {
    display: block;
    position: absolute;
    font-family: 'Dancing Script', cursive;
    color: rgba(216, 216, 216, 0.5);
    font-size: 2.5rem;
    right:0;
    text-transform: uppercase;
    content: 'Message';
    z-index: -1;
}

.button {
    background-color: #000;
    border: solid 2px rgba(216, 216, 216, 0.5);
    color: #fff;
    padding: 10px 30px;
    text-decoration: none;
    font-size: 1rem;
    margin: 20px;
}
.button:hover {
    color: #fff;
    background-color: rgba(216, 216, 216, 0.5);
}

.button-area{
    padding-top: 50px;
    padding-bottom: 5rem;
}