/*
Theme Name:twentytwentyfour-child
Theme URI:
Description:WordPressテーマ「twentytwentyfour」の自作子テーマです。
Template:twentytwentyfour
Author: shirakashi
Author URI:
Version:0.0.8
*/

.flex {
    display: flex;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.align-center {
    align-items: center;
}
.w-30 {
    width: 30%;
}
.w-35 {
    width: 35%;
}
.w-40 {
    width: 40%;
}
.w-60 {
    width: 60%;
}
.w-65 {
    width: 65%;
}
.w-70 {
    width: 70%;
}

.w-full {
    width: 100% !important;
}

.cursor-pointer {
    cursor: pointer;
}

.no-decoration {
    text-decoration: none;
}

.btn-custom {
    background: #6F5436;
    color: #FFFFFF;
    min-height: 50px;
    min-width: 200px;
    font-family: "Noto Sans JP";
    font-size: 18px;
    font-weight: 400;
    line-height: 26.06px;
    letter-spacing: 0.1em;
    text-align: center;
}


.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 2s ease-out, transform 2s ease-out;
}
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-up {
    opacity: 0;
    transform: translateY(50px);  /* 下から50px上がってくる */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;  /* 1.5秒かけてゆっくり変化 */
    will-change: opacity, transform;  /* パフォーマンス最適化 */
}  
.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}