@charset "utf-8";

/* mv */
@media (min-width: 769px) {
    .subpage_mv {
        background-image: url(../img/greeting/mv.jpg);
    }
    html[lang='en'] .anim_char_up_inner {
        padding-bottom: 9px;
    }
}
@media (max-width: 768px) {
    .subpage_mv {
        background-position: top center;
        background-image: url(../img/greeting/mv_sp.jpg);
    }
    html[lang='en'] .anim_char_up_inner {
        padding-bottom: 7px;
    }
}

/* greeting */
.greeting_txt {
    color: var(--color-dark-gray);
}
.greeting_name_wrap {
    display: flex;
    justify-content: flex-end;
}
.greeting_img_wrap {
    overflow: hidden;
}
.greeting_img {
    width: 100%;
}
/* en */
html[lang='en'] .greeting_name_wrap {
    text-align: right;
}
@media (min-width: 769px) {
    .greeting {
        margin-top: 75px;
    }
    .greeting .inner {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-direction: row-reverse;
        gap: 68px;
    }
    .greeting_content {
        width: 47%;
    }
    .greeting_ttl {
        font-size: 28px;
    }
    .greeting_txt {
        margin-top: 55px;
        font-size: 18px;
        line-height: calc(36 / 18);
    }
    .greeting_name_wrap {
        margin-top: 56px;
    }
    .greeting_job {
        font-size: 16px;
        line-height: calc(26 / 16);
    }
    .greeting_name {
        font-size: 20px;
    }
    .greeting_img_wrap {
        width: 47%;
        border-radius: 16px;
    }
}
@media (max-width: 768px) {
    .greeting {
        margin-top: 56px;
    }
    .greeting_ttl {
        font-size: 20px;
    }
    .greeting_txt {
        margin-top: 32px;
        font-size: 16px;
        line-height: calc(56 / 32);
    }
    .greeting_name_wrap {
        margin-top: 38px;
    }
    .greeting_job {
        font-size: 16px;
        line-height: calc(52 / 32);
    }
    .greeting_name {
        font-size: 20px;
    }
    .greeting_img_wrap {
        margin-top: 40px;
        border-radius: 8px;
    }
}
.animation_ready .greeting_img {
    transition: clip-path 1s cubic-bezier(0, 0.55, 0.45, 1);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.animation_loaded .greeting_img_wrap.is_animated .greeting_img {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}