@charset "utf-8";

/* common */
.internship_bg {
    position: relative;
}
.internship_bg::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    opacity: 0.2;
}
.internship {
    color: #33221b;
    position: relative;
    z-index: 1;
}
@media (min-width: 769px) {
    .internship {
        padding-bottom: 200rem;
    }
    .internship_bg::after {
        background: url(../img/internship/bg.webp) repeat-y top center / 100% auto;
    }
    .internship_inner {
        max-width: 1440rem;
        padding-inline: 120rem;
        margin-inline: auto;
    }
}
@media (max-width: 768px) {
    .internship {
        padding-bottom: 140rem;
    }
    .internship_bg::after {
        background: url(../img/internship/bg_sp.webp) repeat-y top center / 100% auto;
    }
    .internship_inner {
        width: 100%;
        padding-inline: 20rem;
    }
}

/* bg_sticky */
@media (min-width: 1151px) {
    .bg_sticky {
        --ttl-height: 232px;
    }
}
@media (max-width: 1151px) and (min-width: 769px) {
    .bg_sticky {
        --ttl-height: 296px;
    }
}
@media (min-width: 769px) {
    .bg_sticky {
        --ttl-bottom: 95rem;
        --lead-height: 855px;
        --lead-gradation-height: 553rem;
    }
}
@media (max-width: 768px) {
    .bg_sticky {
        --ttl-bottom: 80rem;
        --ttl-height: 202rem;
        --lead-height: 890rem;
        --lead-gradation-height: 521rem;
    }
}

/* kv */
.kv_wrap {
    height: calc((100vh - var(--head-height)) + var(--lead-height) + var(--lead-gradation-height));
}
.kv {
    width: 100%;
    height: calc(100vh - var(--head-height));
    position: sticky;
    top: var(--head-height);
    overflow: clip;
}
.kv_bg {
    position: absolute;
    inset: 0;
    margin: auto;
    background: url(../img/internship/kv_bg.webp) no-repeat center / cover;
}
.kv_anime {
    width: 100%;
    height: 100%;
}
.kv_light {
    position: absolute;
    z-index: 1;
    opacity: 0.5;
}
.kv_light svg {
    width: 100%;
    height: 100%;
}
@keyframes kv_loop_pc {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: -7280px;
    }
}
@keyframes kv_loop_sp {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: -3226rem;
    }
}
.kv_loop_wrap {
    position: absolute;
    width: 100%;
    left: 0;
    overflow: hidden;
}
.kv_loop {
    width: 100%;
}
.kv_ttl_txt img {
    height: 100%;
}
@media (min-width: 769px) {
    .kv {
        padding-bottom: 25rem;
    }
    .kv_bg {
        width: calc(100% - 50rem);
        height: calc(100% - 50rem);
        border-radius: 20rem;
    }
    .kv_loop_wrap {
        top: 124rem;
    }
    .kv_loop {
        height: 334px;
        background: url(../img/internship/kv_loop.svg) repeat-x top left / auto 100%;
        animation: kv_loop_pc 45s linear infinite;
    }
    .kv_light {
        width: 835rem;
        height: 784rem;
        top: -4%;
        left: 40%;
    }
    .kv_test {
        position: absolute;
        left: 50%;
        bottom: 95rem;
        margin-left: -604rem;
    }
}
@media (max-width: 768px) {
    .kv {
        padding-bottom: 20rem;
    }
    .kv_bg {
        width: calc(100% - 40rem);
        height: calc(100% - 40rem);
        border-radius: 10rem;
    }
    .kv_loop_wrap {
        top: 91rem;
    }
    .kv_loop {
        height: 148rem;
        background: url(../img/internship/kv_loop_sp.svg) repeat-x top left / auto 100%;
        animation: kv_loop_sp 45s linear infinite;
    }
    .kv_light {
        width: 738rem;
        height: 778rem;
        top: -53rem;
        left: -159rem;
    }
    .kv_test {
        position: absolute;
        left: 40rem;
        bottom: 80rem;
    }
}
.kv_wrap {
    --lottie-duration: 1s;
}
.animation_ready .kv_loop {
    translate: 0 50%;
    opacity: 0;
    transition:
        translate 1.5s cubic-bezier(0.25, 1, 0.5, 1) var(--lottie-duration),
        opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1) var(--lottie-duration);
}
.animation_ready.animation_loaded .kv_loop {
    translate: 0 0;
    opacity: 1;
}
.animation_ready .kv_ttl_txt_anime {
    overflow: hidden;
}
.animation_ready .kv_ttl_txt_anime img {
    transition: translate 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.animation_ready.animation_loaded .kv_ttl_txt_anime img {
    translate: 0 0;
}
@media (min-width: 1151px) {
    .animation_ready .kv_ttl1 img {
        transition-delay: 1.5s;
    }
    .animation_ready .kv_ttl2_1 img,
    .animation_ready .kv_ttl2_2 img {
        transition-delay: 1.6s;
    }
    .animation_ready .kv_ttl3 img {
        transition-delay: 1.7s;
    }
}
@media (max-width: 1150px) {
    .animation_ready .kv_ttl1 img {
        transition-delay: 1.5s;
    }
    .animation_ready .kv_ttl2_1 img {
        transition-delay: 1.6s;
    }
    .animation_ready .kv_ttl2_2 img {
        transition-delay: 1.7s;
    }
    .animation_ready .kv_ttl3 img {
        transition-delay: 1.8s;
    }
}
@media (min-width: 769px) {
    .animation_ready .kv_ttl_txt_anime img {
        translate: 0 90px;
    }
}
@media (max-width: 768px) {
    .animation_ready .kv_ttl_txt_anime img {
        translate: 0 54rem;
    }
}

/* kv_ttl */
.kv_ttl_wrap {
    margin-top: calc((100vh + var(--lead-height) + var(--lead-gradation-height)) * -1);
    position: relative;
    z-index: 1;
}
.kv_ttl_cont {
    height: calc(100vh + var(--lead-gradation-height));
}
.kv_ttl {
    padding-top: calc(100vh - (var(--ttl-height) + var(--ttl-bottom)));
    display: flex;
    flex-direction: column;
    padding-bottom: var(--ttl-bottom);
    position: sticky;
    top: 0;
}
.kv_ttl_txt {
    display: inline-block;
    overflow: hidden;
}
.kv_ttl2 {
    display: flex;
}
@media (min-width: 1151px) {
    .kv_ttl2 {
        gap: 34px;
    }
}
@media (max-width: 1151px) {
    .kv_ttl2 {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}
@media (min-width: 769px) {
    .kv_ttl2_1 {
        width: auto;
        height: 63px;
    }
    .kv_ttl2_2 {
        width: auto;
        height: 83px;
    }
    .kv_ttl {
        gap: 6px;
    }
    .kv_ttl_txt {
        line-height: 6.2;
    }
}
@media (max-width: 768px) {
    .kv_ttl1 {
        width: 230rem;
    }
    .kv_ttl2 {
        gap: 11rem;
        margin-top: 5rem;
    }
    .kv_ttl2_1 {
        width: 198rem;
    }
    .kv_ttl2_2 {
        width: 244rem;
    }
    .kv_ttl3 {
        width: 120rem;
    }
    .kv_ttl {
        gap: 7rem;
        padding-left: 20rem;
    }
    .kv_ttl_txt {
        line-height: 0;
    }
}

/* lead */
.lead {
    position: relative;
    height: calc(var(--lead-height) + var(--lead-gradation-height));
    padding-top: var(--lead-gradation-height); /*553*/
    margin-top: calc(var(--lead-gradation-height) * -1);
    background: linear-gradient(
        to bottom,
        rgba(255, 253, 251, 0) 0,
        rgba(255, 253, 251, 0.8) 25%,
        rgba(255, 253, 251, 0.8) 100%
    );
}
.lead .internship_inner {
    height: 100%;
    display: flex;
    align-items: center;
}
@media (min-width: 769px) {
    .lead_txt {
        font-size: 20px;
        line-height: 1.84;
    }
}
@media (max-width: 768px) {
    .lead_txt {
        font-size: 16rem;
        line-height: 1.8;
        padding-left: 20rem;
    }
}

/* outline */
.outline {
    width: 100%;
}
.outline_btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../img/internship/bg_gradation.webp) no-repeat center / cover;
    color: var(--color-white);
}
.outline_block_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.outline_block_txt_area {
    display: flex;
    flex-direction: column;
}
.outline_block_txt {
    line-height: 2;
    font-weight: 500;
}
.outline_block_txt_note {
    line-height: 2;
    font-weight: 400;
}
.outline_program_detail {
    display: flex;
    flex-direction: column;
}
.outline_program_detail dl {
    border-top: 1px solid #cecece;
    display: flex;
}
.outline_program_detail dt {
    line-height: 1.6;
}
.outline_program_detail dd {
    font-weight: 400;
}
.outline_program_detail_txt_area {
    display: flex;
    flex-direction: column;
}
.outline_program_detail_list li {
    line-height: 2;
    padding-left: 1em;
    text-indent: -1em;
}
.outline_program_detail_txt_note {
    line-height: 2;
    font-weight: 400;
}
.outline_program_detail_txt {
    line-height: 2;
}
.outline_mail {
    display: flex;
    align-items: center;
    line-height: 2;
    color: #33221b;
    text-decoration: underline;
}
.outline_mail::before {
    content: '';
    display: block;
    background: url(../img/internship/mail_icon.svg) no-repeat center / contain;
}
.outline_bnr {
    display: block;
}
@media (min-width: 769px) {
    .outline {
        padding-block: 175rem 215rem;
    }
    .outline_content {
        display: flex;
        gap: 120rem;
    }
    .outline_ttl_wrap {
        width: 360rem;
        flex-shrink: 0;
    }
    .outline_btn {
        padding: 20rem;
        font-size: 24rem;
        line-height: 1.7;
        border-radius: 12rem;
    }
    .outline_btn_sticky {
        margin-top: 40rem;
    }
    .outline_bnr {
        margin-top: 80rem;
    }
    .outline_block_wrap {
        gap: 80px;
    }
    .outline_sticky {
        position: sticky;
        top: calc(var(--head-height) + 40rem);
    }
    .outline_block_ttl {
        font-size: 24px;
        padding-bottom: 7px;
        border-bottom: 3px solid var(--color-red);
        margin-bottom: 28px;
    }
    .outline_block_txt_area {
        gap: 20px;
    }
    .outline_block_txt {
        font-size: 18px;
    }
    .outline_block_txt_note {
        font-size: 14px;
    }
    .outline_program_detail {
        margin-top: 80px;
        gap: 28px;
    }
    .outline_program_detail dl {
        padding-top: 28px;
        gap: 20px;
    }
    .outline_program_detail dt {
        font-size: 18px;
        width: 157px;
        flex-shrink: 0;
    }
    .outline_program_detail_txt_area {
        gap: 10px;
    }
    .outline_program_detail_list li {
        font-size: 16px;
    }
    .outline_program_detail_txt_note {
        font-size: 14px;
    }
    .outline_program_detail_txt {
        font-size: 16px;
    }
    .outline_mail {
        gap: 8px;
        font-size: 16px;
    }
    .outline_mail::before {
        width: 30px;
        height: 30px;
        margin-bottom: -5px;
    }
    @media (hover: hover) {
        .outline_bnr {
            overflow: clip;
            border-radius: 6px;
        }
        .outline_bnr > img {
            transition: scale 0.3s;
        }
        .outline_bnr:hover > img {
            scale: 1.1;
        }
    }
}
@media (max-width: 768px) {
    .outline {
        padding-block: 160rem 80rem;
    }
    .outline_ttl_wrap {
        width: 333rem;
    }
    .outline_btn {
        padding: 16rem;
        font-size: 18rem;
        line-height: 1.6;
        border-radius: 8rem;
    }
    .outline_btn_sticky {
        margin-top: 60rem;
    }
    .outline_bnr {
        margin-top: 80rem;
    }
    .outline_btn_sp {
        margin-top: 80rem;
    }
    .outline_block_wrap {
        gap: 80rem;
        margin-top: 80rem;
    }
    .outline_block_ttl {
        font-size: 20rem;
        padding-bottom: 9rem;
        border-bottom: 3rem solid var(--color-red);
        margin-bottom: 20rem;
    }
    .outline_block_txt_area {
        gap: 12rem;
    }
    .outline_block_txt {
        font-size: 14rem;
    }
    .outline_block_txt_note {
        font-size: 12rem;
    }
    .outline_program_detail {
        margin-top: 80rem;
        gap: 28rem;
    }
    .outline_program_detail dl {
        padding-top: 28rem;
        gap: 8rem;
        flex-direction: column;
    }
    .outline_program_detail dt {
        font-size: 16rem;
    }
    .outline_program_detail_txt_area {
        gap: 8rem;
    }
    .outline_program_detail_list li {
        font-size: 14rem;
    }
    .outline_program_detail_txt_note {
        font-size: 12rem;
    }
    .outline_program_detail_txt {
        font-size: 14rem;
    }
    .outline_mail {
        gap: 8rem;
        font-size: 16rem;
    }
    .outline_mail::before {
        width: 30rem;
        height: 30rem;
        margin-bottom: -5rem;
    }
}