@charset "utf-8";

#top_page {
    background: #000;
}
#cat_top {
    background: url("../img/top/cat_top_bg.jpg") no-repeat center center / cover;
}

/*-----------------------------------
TOP
-----------------------------------*/
.movie_area {
    width: 100dvw;
    height: 100dvh;
    position: fixed;
    top: 0;
    right:0;
    left:0;
    bottom:0;
}

/*-----------------------------------
クリックエリア（PC）
-----------------------------------*/
#movie_pc {
    position: relative;
    overflow: hidden;
}
#movie_pc .video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
}
#movie_pc .click_area {
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1920 / 1080;
    overflow: hidden;
}
#movie_pc .click_area img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    width: 1920px;
    aspect-ratio: auto 1920 / 1080;
}
area {
    cursor: pointer;
    z-index: 99;
}
.link_icon {
    width: 13.6%;
    height: 10%;
    display: block;
    position: absolute;
    transition: background .6s, opacity .6s;
    z-index: 1;
    pointer-events: none;
}
.new_icon {
    top: 4.5%;
    right: 37.3%;
    background: url("../img/top/new_off.png") no-repeat center center / contain;
}
.click_new .new_icon {
    background: url("../img/top/new_on.png") no-repeat center center / contain;
    transition: background .6s, opacity .6s;
    animation: bounce 0.5s infinite alternate;
}
.career_icon {
    top: 9.5%;
    right: 15.1%;
    background: url("../img/top/career_off.png") no-repeat center center / contain;
}
.click_career .career_icon {
    background: url("../img/top/career_on.png") no-repeat center center / contain;
    transition: background .6s, opacity .6s;
    animation: bounce 0.5s infinite alternate;
}
@keyframes bounce {
    0% { transform: translateY(0);}
    100% { transform: translateY(10%); }
}
.fade { opacity: 0; animation: fade .4s ease-in-out 3s 1 normal forwards; }
@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.fade_sp { opacity: 0; animation: fade_sp .4s ease-in-out 10s 1 normal forwards, bounce 0.5s ease-in-out 10.6s infinite alternate; }
@keyframes fade_sp {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@media screen and (max-width:768px){
    #movie_sp {
        position: relative;
        overflow-x: hidden;
        overflow-y: auto;
    }
    #movie_sp .video {
        width: 100%;
        position: relative;
        vertical-align: top;
    }
    #movie_sp .click_area {
        position: absolute;
        top: 0;
        left:0;
        width: 100%;
        aspect-ratio: 1008 / 2160;
        overflow: hidden;
    }
    #movie_sp .click_area img {
        max-width: 100%;
        height: auto;
        vertical-align: top;
        width: 1008px;
        aspect-ratio: 1008 / 2160;
    }
    .link_icon {
        width: 36%;
        height: 10%;
    }
    .new_icon {
        top: 24.7%;
        right: 53.3%;
        background: url(../img/top/new_sp_off.png) no-repeat center center / contain;
    }
    .career_icon {
        top: 36.2%;
        right: 6.5%;
        background: url(../img/top/career_sp_off.png) no-repeat center center / contain;
    }
    .click_new .new_icon {
        background: url("../img/top/new_sp_on.png") no-repeat center center / contain;
    }
    .click_career .career_icon {
        background: url("../img/top/career_sp_on.png") no-repeat center center / contain;
    }
}


/*-----------------------------------
各TOP共通
-----------------------------------*/
#logo {
    width: calc(100dvw / 3);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
}
#logo img {
    width: 487px;
    max-width: 70%;
    max-height: 40%;
    aspect-ratio: 487 / 262;
    margin-top: 15dvh;
}
#cat_top header {
    justify-content: flex-end;
    position: relative;
    z-index: 999;
}
#cat_top header h1 {
    display: none;
}
#cat_top footer {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}
#magazine {
    display: flex;
    align-items: center;
}
#cat_top .click_area {
    height: auto;
    max-height: 92.5%;
    max-width: 40%;
    aspect-ratio: 838 / 1244;
    margin: 0 auto;
    position: relative;
    z-index: 99;
}
#cat_top .click_area .img_wrap {
    width: 100%;
    height: 100%;
}
#cat_top .click_area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#cat_top .click_area::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: -1%;
    right: -2%;
    background-color: #231815;
    mix-blend-mode: multiply;
    filter: blur(8px);
    opacity: 0.6;
    z-index: -1;
}
.hover_area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    align-items: center;
}
.cat_link_area {
    height: 42%;
    aspect-ratio: 880 / 560;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}
#cat_top .link_icon {
    width: 35%;
    height: 22%;
}
@media screen and (max-width:768px){
    #logo {
        display: none;
    }
    #cat_top header {
        justify-content: space-between;
    }
    #cat_top header h1 {
        display: flex;
    }
    #cat_top footer {
        display: none;
    }
    .cat_link_area {
        display: none;
    }
    #cat_top .click_area {
        max-width: 100%;
        max-height: calc(100dvh - 70px);
        margin-bottom: -30px;
    }
    #cat_top .click_area::after {
        bottom: -4%;
        right: -10%;
        opacity: 0.6;
        transform: rotate(6deg);
        filter: blur(3px);
    }
}

/* 点滅 */
.blinking {
    animation:blink 3s ease-in-out infinite alternate;
}
@keyframes blink{
    0% { opacity: 0;}
    60% { opacity: 0;}
    100% { opacity: 1;}
}

/*-----------------------------------
新卒トップ
-----------------------------------*/
#cat_top .career_icon {
    top: 0.5%;
    right: 8.3%;
}

/*-----------------------------------
中途トップ
-----------------------------------*/
#cat_top .new_icon {
    top: 11%;
    right: 13.3%;
}