@charset "utf-8";

.wrapper {
    padding-left: 5%;
    padding-right: 5%;
}

.about_fv {
    width: 100%;
    padding-top: 24%;
    padding-bottom: 10%;
    background-image: url(../img/pagetop_title2.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    /* 枠いっぱいに広げる */
    background-position: top center;
    /* 画像の「真ん中」を基準にする */
    position: relative;

}

.about_fv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(92, 66, 46, 0.38);
    /* 重ねたい色（ここでは黒の40%） */
    z-index: 1;
}

.about_fv h2 {
    position: relative;
    z-index: 2;
    color: #FEFDFA;
    text-align: center;
    letter-spacing: .1rem;
    font-weight: normal;
    padding-top: 5%;
    text-shadow: 0 2px 4px rgba(59, 72, 124, 0.3);

}

/* ご挨拶セクション */

main .message {
    background-color: #FEFDFA;
    padding-top: 15%;
    padding-bottom: 5%;

}

.message .title {
    font-weight: 500;
    letter-spacing: .2rem;
    font-size: 1.2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 自身の幅・高さ分戻して中央寄せ(レフトとトップは一番左端も文字が基準になったりして微妙に右にずれたり、下にずれたりするから） */
    margin: 0;
    color: #FEFDFA;
}

.message .messageheading {
    width: 70%;
    max-width: 300px;
    position: relative;
    margin: 0 auto;
    margin-bottom: 5%;
}

.message .messageheading img {
    width: 100%;
    display: block;
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.5s, transform 1.5s ease;
    /* 1秒かけて変化 */
}

/* 画面内に入って 'show' クラスがついた時の状態 */
.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}

.messagepicture {

    margin: 0 auto;
}

.messagepicture img {
    width: 70%;
    height: 80%;
    max-width: 400px;
    aspect-ratio: 1 / 1.1;
    object-fit: cover;
    object-position: top;
    display: block;
    margin: 0 auto;
}

.message .messagetext {
    margin-top: 5%;
    font-size: 0.8rem;
    text-align: center;
    margin-bottom: 5%;
}

.messagedeco {
    width: 50%;
    margin: 0 auto;
    max-width: 500px;
}

.messagedeco img {
    width: 100%;
}

/* 経歴セクション */
main .history {
    background-color: #FEFDFA;
    padding-top: 10%;
    padding-bottom: 5%;

}

.history .title {
    font-weight: 500;
    letter-spacing: .2rem;
    font-size: 1.2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 自身の幅・高さ分戻して中央寄せ(レフトとトップは一番左端も文字が基準になったりして微妙に右にずれたり、下にずれたりするから） */
    margin: 0;
    color: #FEFDFA;
}

.history .historyheading {
    width: 70%;
    max-width: 300px;
    position: relative;
    margin: 0 auto;
    margin-bottom: 5%;
}

.history .historyheading img {
    width: 100%;
    display: block;
}

.history .historytext {
    font-size: 0.8rem;
    margin: 0 auto;
    width: 95%;
}

.history .historytext p {
    margin-bottom: 2%;
}

.history .historytext ul li {
    margin-bottom: 1%;
}

.history .historytext ul li:nth-last-child(1) {
    margin-top: 2%;
}

.history .historytext ul li span {
    margin-left: 2.8rem;
}


/* 出演実績・受賞歴セクション */
main .achievements {
    background-color: #FEFDFA;
    padding-top: 5%;
    padding-bottom: 5%;

}

.achievements .title {
    font-weight: 500;
    letter-spacing: .2rem;
    font-size: 1.2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 自身の幅・高さ分戻して中央寄せ(レフトとトップは一番左端も文字が基準になったりして微妙に右にずれたり、下にずれたりするから） */
    margin: 0;
    color: #FEFDFA;
    width: 100%;
    text-align: center;
}

.achievements .achievementsheading {
    width: 64%;
    max-width: 300px;
    position: relative;
    margin: 0 auto;
    margin-bottom: 5%;
}

.achievements .achievementsheading img {
    width: 100%;
    display: block;
}

.achievements .achievementstext {
    font-size: 0.8rem;
}

.achievements h4 {
    margin-bottom: 0.5rem;
}

.achievements h4 span {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border: 0.4px solid #042660;
    transform: rotate(45deg);
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.achievements ul {
    margin-bottom: 1.5rem;
}

.achievements dl dd {
    margin-bottom: 0.5rem;
}



@media screen and (min-width: 430px) {
    .about_fv {
        padding-top: 20%;
    }

    /* ご挨拶セクション */
    .message .messageheading {
        width: 70%;
        max-width: 400px;
    }

    .message .title {
        letter-spacing: .2rem;
        font-size: 1.5rem;
    }

    .message .messagetext {
        font-size: 1rem;
    }

    /* 経歴セクション */

    .history .historyheading {
        width: 70%;
        max-width: 400px;
    }

    .history .title {
        letter-spacing: .2rem;
        font-size: 1.5rem;
    }

    .history .historytext {
        font-size: 1rem;
        width: 95%;

    }

    .history .historytext p {
        display: block;
        margin: 0 auto;
    }

    /* 出演実績・受賞歴セクション */

    .achievements .achievementsheading {
        width: 70%;
        max-width: 400px;
    }

    .achievements .title {
        letter-spacing: .2rem;
        font-size: 1.5rem;
        width: 100%;
        text-align: center;

    }

    .achievements .achievementstext {
        font-size: 1rem;
        width: 95%;
        margin: 0 auto;
    }


}


@media screen and (min-width: 1025px) {
    .about_fv h2 {
        font-size: 2rem;
        letter-spacing: .3rem;
        padding-top: 0;
    }

    /* ご挨拶セクション */
    .message .messagetext .none {
        display: none;

    }

    /* 経歴セクション */
    .history .historytext {
        width: 85%;
        padding-left: 20%;
    }

    .history .historytext .none {
        display: none;
    }

    /* 出演実績・受賞歴セクション */
    .achievements .achievementstext {
        width: 45%;
        margin: 0 auto;
    }


    .achievements .achievementstext .none {
        display: none;
    }

}