/* ----------------------------------------------

 * メインビジュアル

---------------------------------------------- */

.ly_header {
    height: 80vh;
    position: relative;
    overflow: hidden;
}

    /* 動画 */
    .ly_header .vidio_wrap {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;

        width: 100%;
        height: 80vh;
    }
        .ly_header .vidio_wrap::after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgb(0, 24, 56, 52%);
        }

        /* video */
        .ly_header .vidio_wrap video {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }


    /* テキスト */
    .ly_header .page_title {
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);

        font-size: var(--fontsize_35);
        font-weight: var(--fontweight_bold);
        text-align: center;
        line-height: 1.3;
    }
    .ly_header .page_title span.en {
        display: inline-block;
        font-size: var(--fontsize_18);
        font-family: "IBM Plex Serif", serif;
        font-weight: var(--fontweight_regular);
    }
    .ly_header .page_title span.ja {
        display: inline-block;
    }

/* PC用判定 */
@media screen and (pointer: fine) and (hover: hover) and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
    /* 動画 */
    .ly_header {
        height: 90vh;
    }
        .ly_header .vidio_wrap {
            height: 90vh;
        }

    /* テキスト */
    .ly_header .page_title {
        transform: translate(-50%,-40%);
        font-size: var(--fontsize_90);
        font-weight: var(--fontweight_regular);
        letter-spacing: 0.15em;
    }
    .ly_header .page_title span.en {
        font-size: var(--fontsize_43);
        letter-spacing: initial;
    }
}



/* ----------------------------------------------

 * コンテンツ

---------------------------------------------- */
main {
    position: relative;
    overflow-x: hidden;
}


/* ----------------------------------------------

 * キャッチコピー

---------------------------------------------- */
#catchcopy {
    position: relative;
}

#catchcopy .blurred_circle {
    bottom: -433px;
    left: 50%;
    transform: translateX(-50%);
}


/* PC用判定 */
@media screen and (pointer: fine) and (hover: hover) and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
    /* キャッチコピー */
    #catchcopy {
        margin-block-start: 56px;
    }
    #catchcopy p {
        font-size: var(--fontsize_24);
        line-height: 2.5;

    }

    #catchcopy .blurred_circle {
        display: none;
    }
}



/* ----------------------------------------------

 * 募集要項一覧

---------------------------------------------- */
#job_description {

    
}

#job_description ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
    #job_description ul li {
        position: relative;
        text-align: center;

        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
        #job_description ul li::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;

            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.65);
        }
        #job_description ul li a {
            position: relative;
            z-index: 2;

            display: flex;
            justify-content: center;
            align-items: center;

            width: 100%;
            height: 100%;
            aspect-ratio: 188 / 137;
        }
            #job_description ul li a::after {
                content: "";
                display: block;
                width: 16px;
                height: 14px;
                position: absolute;
                right: 16px;
                bottom: 10px;

                background-image: url("../common/img/arrow_right_white.svg");
                background-size: contain;
            }

        /* JASMINE */
        #job_description ul li.jasmine {
            background-image: url("../img/top/image_jasmine.jpg");
        }

        /* 埼玉動物医療センター */
        #job_description ul li.saitama {
            background-image: url("../img/top/image_saitama.jpg");
        }

        /* 吉田動物病院 */
        #job_description ul li.yoshida {
            background-image: url("../img/top/image_yoshida.jpg");
        }

        /* 奈良動物医療センター */
        #job_description ul li.nara {
            background-image: url("../img/top/image_nara.jpg");
        }

        /* けいはんな動物病院 */
        #job_description ul li.keihanna {
            background-image: url("../img/top/image_keihanna.jpg");
        }

        /* 浜松どうぶつ医療センター */
        #job_description ul li.hamamatsu {
            background-image: url("../img/top/image_hamamatsu.jpg");
        }

        /* ノースラボ */
        #job_description ul li.northlab {
            background-image: url("../img/top/image_northlab.jpg");
        }

#job_description .blurred_circle {
    display: none;
}

/* PC用判定 */
@media screen and (pointer: fine) and (hover: hover) and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
    #job_description {
        position: relative;
        padding-right: 5.75%;
        padding-left: 5.75%;
    }
    
    #job_description ul {
        grid-template-columns: repeat(5, 1fr);
        
    }
        #job_description ul li {
            font-size: clamp(16px, 1.25vw, 24px);
        }
        #job_description ul li a::after {
            width: 30px;
            height: 26px;
        }

    #job_description .blurred_circle {
        display: block;
        right: -180px;
        bottom: -220px;

        width: 100%;
        max-width: 881px;
        height: 881px;
    }
}




/* ----------------------------------------------

 * 職種紹介

---------------------------------------------- */
#occupation {
    padding: 56px 0 0;

    background-image: url("../img/top/occupation_bg.jpg");
    background-size: cover;
}

    #occupation img {
        margin: 1rem 0;
    }

    #occupation ul.links {
        margin: 0;
    }

/* PC用判定 */
@media screen and (pointer: fine) and (hover: hover) and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
    #occupation {
        /* margin-block-end: -112px; *//* キャリアアップ・研修が非表示の間はコメントアウト */
        padding-bottom: 144px;
    }

    #occupation p {
        margin-bottom: 56px;
        text-align: center;
    }

    #occupation .layout_pc_only {
        display: grid;
        grid-template-columns: 483px 1fr;
        
        gap: 50px;

        width: 100%;
        
    }
        #occupation .layout_pc_only .image {
            /* width: 483px;
            height: 461px; */
        }
            #occupation .layout_pc_only .image img {
                width: 100%;
                height: 100%;
                
                margin: 0;
                
                object-fit: cover;

            }

        #occupation .layout_pc_only .text {
            display: flex;
            align-items: center;
        }

        #occupation .layout_pc_only .links {
            width: 100%;
        }
}



/* ----------------------------------------------

 * キャリアアップ・研修

---------------------------------------------- */
#cd {
    padding: 56px 0;
    background-image: url("../img/top/cd_bg.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-color: #054EAD;
}
    #cd p {
        margin: 1.5rem 0 3rem;
    }

/* PC用判定 */
@media screen and (pointer: fine) and (hover: hover) and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
    /* キャリアアップ・研修 */
    #cd {
        padding: 272px 0 304px;
        background-image: url("../img/top/cd_bg_pc.jpg");
        background-position: center;
        background-size: contain;
    }
        #cd p {
            font-size: var(--fontsize_18);
            line-height: 2.7;
        }
}

/* ----------------------------------------------

 * 職場見学・インターンシップ

---------------------------------------------- */
#internship {
    display: flex;
    flex-direction: column;
    justify-content: center;
    

    width: 100%;
    height: 100%;
    aspect-ratio: 75 / 32;

    background-image: url("../img/top/internship_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

/* PC用判定 */
@media screen and (pointer: fine) and (hover: hover) and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
    #internship {
        padding: 0;
        align-items: center;
        background-image: none;
        aspect-ratio: initial;
    }

    /* 職場見学・インターンシップ */
    #internship .inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        margin-left: auto;
        margin-right: auto;

        background-image: url("../img/top/internship_bg.jpg");
        background-repeat: no-repeat;
        background-size: cover;

        aspect-ratio: 1003 / 300;
    }
}

/* ----------------------------------------------

 * 私たちについて

---------------------------------------------- */
#about_us {
    position: relative;
    padding: 56px 0;
}
    #about_us p {
        margin-bottom: 3rem;
    }

#about_us .blurred_circle {
    display: none;
}

/* PC用判定 */
@media screen and (pointer: fine) and (hover: hover) and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
    #about_us {
        
    }
    #about_us p {
        font-size: var(--fontsize_18);
        line-height: 2.7;
    }

    #about_us .blurred_circle {
        display: block;
        width: 881px;
        height: 881px;

        right: 0;
        bottom: -220px;
    }
}

/* ----------------------------------------------

 * 事業紹介

---------------------------------------------- */
#biz_overview {
    position: relative;
    padding: 0 0 56px;
}

#biz_overview ul {
    width: 82.2%;
    margin-left: auto;
    margin-right: auto;
}
    #biz_overview ul li:not(:last-child) {
        margin-bottom: 32px;
    }

#biz_overview .blurred_circle {
    top: -250px;
    left: -200px;
}


/* PC用判定 */
@media screen and (pointer: fine) and (hover: hover) and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
    /* 事業紹介 */
    #biz_overview ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(1px, 1.25vw, 32px);
        justify-content: center;
        width: 100%;
        
    }
}


/* ----------------------------------------------

 * グループストーリー

---------------------------------------------- */
#group_story {
    position: relative;
    padding: 0 0 56px;
}
    #group_story h2 {
        margin-top: 56px;
    }
    #group_story p {
        margin: 1.5rem 0 3rem;
    }

    #group_story .blurred_circle {
        top: 37%;
        left: 20%;
    }

/* PC用判定 */
@media screen and (pointer: fine) and (hover: hover) and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
    #group_story p {
        font-size: var(--fontsize_18);
        line-height: 2.7;
    }

    #group_story .blurred_circle {
        width: 881px;
        height: 881px;
        
        top: initial;
        left: initial;
        right: 0;
        bottom: 0;
    }
}




/* ----------------------------------------------

 * 新卒の方へ

---------------------------------------------- */
#new_grad {
    background-image: url("../img/top/new_grad_bg.jpg");
}

/* ----------------------------------------------

 * よくある質問

---------------------------------------------- */
#faq {
    background-image: url("../img/top/faq_bg.jpg");
}

/* PC用判定 */
@media screen and (pointer: fine) and (hover: hover) and (orientation: landscape) and (min-width: 800px) and (min-height: 600px) {
    /* .banners {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        
        width: 96%;
        max-width: 1000px;
        margin: auto;
    }
        .banners .banner {
            aspect-ratio: 250 / 203;
        }

				p.banner_name {
                    margin-top: 0;
                    margin-bottom: 1em;
					font-size: var(--fontsize_32);
				} */

    /* 新卒の方へ */
    #new_grad {
        background-image: url("../img/top/new_grad_bg_pc.jpg");
    }

    /* よくある質問 */
    #faq {
        background-image: url("../img/top/faq_bg_pc.jpg");
    }
}