/*
 *
 * TOPページ
 * LAST UPDATE : 2022/09/16
 *
 */

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

　   main

--------------------------------------------------------------------------------------------- */
/* キャッチコピー */
#catchcopy {
    position: absolute;
    color: #fff;
    z-index: 2;
}

#catchcopy p {
    margin: 0;
    padding: 0;
    line-height: 1;
}

.catchcopy_big {
    font-weight: 500;
}

/* キャッチコピー　小さいほう */
.catchcopy_small {
    font-size: min(4.8vw, 2em);
    font-weight: 500;
}

#catchcopy span {
    position: relative;
    display: inline-block;
    margin: 0 0 2rem 0;
    padding: 0;
}

#catchcopy span::before {
    content: "";
    position: absolute;
    z-index: -1;
    background-color: rgba(28, 140, 184, .8);
}


.catchcopy_small span::before {
    bottom: -5px;
    left: -10px;
    top: -10px;
    right: -10px;
}


@media not all and (min-width: 1366px) {
    #catchcopy {
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 80%;
    }

    .catchcopy_big {
        font-size: 60px;
    }

    .catchcopy_big span::before {
        bottom: 0;
        left: -10px;
        top: -5px;
        right: -10px;
    }
}

/* パソコン */
@media print,
screen and (min-width : 1366px) {

    #catchcopy {
        position: absolute;
        top: 22%;
        left: 50%;
        transform: translateX(-50%);
        width: 73.2%;
        z-index: 2;
    }

    .catchcopy_big {
    font-size: 7.5em;/* 120px */
    font-weight: 500;
}

    .catchcopy_big span::before {
        bottom: 12px;
        left: -10px;
        top: -5px;
        right: -10px;
    }

}



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

　   MV

--------------------------------------------------------------------------------------------- */
#mv {
    position: relative;
    width: 100%;
}

.swiper_mv {
    position: relative;
    width: 100%;
}

.swiper-slide.slide01 {
    background: url('../img/mv01.jpg') no-repeat;
    background-size: cover;
}

.swiper-slide.slide02 {
    background: url('../img/mv02.jpg') no-repeat;
    background-size: cover;
}

.swiper-slide img {
    width: 100%;
    object-fit: cover;
}

/* Ver.8.3.2で autoplay だと fade が効かないので(矢印orスワイプだとfadeする)
 * swiper@7.0.9のCSSから持ってきた部分 */
.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none;
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto;
}

@media not all and (min-width: 1024px) {
    .swiper_mv .swiper-slide {
        height: calc(100vh - var(---bt_size) / 2);
    }
    .swiper-slide.slide01 {
        background: url('../img/mv01_sp.jpg') no-repeat;
        background-size: cover;
    }
    
    .swiper-slide.slide02 {
        background: url('../img/mv02_sp.jpg') no-repeat;
        background-size: cover;
    }   
}

/* パソコン */
@media print, screen and ( min-width : 1366px ) {
    .swiper_mv .swiper-slide {
        height: calc(100vh - var(---bt_size));
    }
}

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

　   NEWS

--------------------------------------------------------------------------------------------- */
#bl_news {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

#bl_news>div {
    display: grid;
    grid-template-columns: 80px 1fr;
    height: 80px;
    overflow: hidden;
}

#bl_news h2 {
    color: #fff;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #176216;
}


#bl_news .swiper_news {
    position: relative;
    width: 100%;
    height: 80px;
    background-color: #fff;
    display: grid;
    grid-template-columns: 85% 15%;
}

.swiper_news .swiper-slide a {
    display: flex;
    align-items: flex-end;
}

.swiper_news .date {
    padding: 24px;
}

.swiper_news .date .yyyy {
    font-size: 10px;
}

.swiper_news .news_title {
    padding: 8px 8px 26px;
    font-size: 14px;
}



/* 矢印の設定 */
.swiper-button-next:after,
.swiper-button-prev:after {
    display: none;
}


.swiper_news .swiper-button-prev,
.swiper_news .swiper-button-next {
    position: relative;
    width: 14px;
    height: 7px;
    right: auto;
    left: auto;
    z-index: 3;
}

.swiper_news .btn {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    height: 80px;
    padding: 28px;
}

/* 前ページボタン*/
.swiper-button-prev {
    background-image: url("../img/news_btn.png");

}

.swiper-button-next {
    background-image: url("../img/news_btn.png");
    transform: scale(1, -1);/* 上下反転 */
}

/* プログレスバー */
#bl_progressbar {
    position: absolute;
    bottom: 0;
    left: 80px;
    width: calc(100% - 80px);
    z-index: 1;
}

.el_progressbar {
    position: relative;
    width: 100%;
    height: 2px;
    margin-top: 10px;
    background: #ccc;
    overflow: hidden;
}

.el_progressbar span {
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--accent_color_yellow);
    border-radius: 7px;
    transform: scaleX(0);
    transform-origin: left center;
    transition-timing-function: linear;
}

@media not all and (min-width: 1366px) {
    #bl_news {
        width: 100%;
    }
}

/* パソコン */
@media print,
screen and (min-width : 1366px) {
    #bl_news>div {
        width: 448px;
    }
}

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

　   about_company

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

#about_company .box {
    color: #fff;
}

    #about_company .box h2 {
        opacity: 0;
        text-align: center;
    }

    #about_company .box p {
        line-height: 2;
    }

/* ABOUT US */
#aboutus {
    /* background: url("../img/aboutus_bg.jpg") no-repeat left top; */
    background: url("../img/aboutus_bg.jpg") no-repeat center;
}

#aboutus::after {
    background-color: rgba(4, 100, 180, 0.7);
}

/* COMPANY */
#company {
    /* background: url("../img/company_bg.jpg") no-repeat right top; */
    background: url("../img/company_bg.jpg") no-repeat center;
}

#company::after {
    background-color: rgba(28, 140, 184, 0.7);
}






@media not all and (min-width: 1366px) {
    #about_company * {
        position: relative;
    }
    #about_company h2,
    #about_company p {
        z-index: 2;
    }

    #about_company h2 {
        margin-bottom: 36px;
    }
    #about_company p {
        width: 78.3%; /* boxの左右幅にpaddingをいれたのでPSから拾う数字よりも大きくなっている */
        margin: 0 auto 62px;
    }

    #aboutus,
    #company {
        position: relative;
        padding: 54px 5.3% 36px;
        background-size: cover;
    }
        #aboutus::after,
        #company::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

    #aboutus {
        background-position: left top;
    }
    #company {
        background-position: center top;
    }
}

/* パソコン */
@media print,
screen and (min-width : 1366px) {
    #about_company {
        position: relative;
        display: flex;

        width: 100%;
        /*    aspect-ratio: 683/310;*/
        overflow: hidden;

    }

    #about_company .box {
        position: relative;
        width: 100%;
        
        padding: 124px 0 0;
    }

    #about_company .box::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    #about_company .box>* {
        /* 色背景対応 */
        position: relative;
        z-index: 2;
    }

    #about_company .box h2 {
        margin-bottom: 52px;
        
        
    }

    #about_company .box p {
        width: 59%;
        margin: 0 auto 150px;
    }

    #about_company .box.inactive>* {
        opacity: 0.3;
    }

    .btn_pos {
        /*    position: absolute !important;*/
        bottom: 69px;
        left: 50%;
        width: 90px;
        transform: translateX(-50%);
        z-index: 2;
    }


    /* ABOUT US */
    #aboutus {
        transition: .3s;
    }

    /* COMPANY */
    #company {
        transition: .3s;
    }


    /* 装飾要素 */
    #about_company .decorativeElements {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: none;
    }

    #about_company .decorativeElements.active {
        display: block;
    }

    #about_company .decorativeElements>div {
        position: relative;
        width: 100%;
        height: 100%;
    }

    #about_company .decorativeElements>div::before {
        position: absolute;
        width: 100%;
        height: 100%;
        content: "";
    }

    #about_company .decorativeElements>div.inactive {
        display: none;
    }

    #about_company .decorativeElements>.box_aboutus.active::before {

        background-color: rgba(4, 100, 180, 0.7);
        z-index: 2;
    }

    #about_company .decorativeElements>.box_company.active::before {
        background-color: rgba(28, 140, 184, 0.7);
        z-index: 2;
    }

    #about_company .decorativeElements img {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        opacity: 0;
        transition: .3s;
    }

    #about_company .decorativeElements>div.active>img {
        display: block;

        z-index: 1;
        transition: .3s;
        animation: appear .5s ease forwards;
    }

    @keyframes appear {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }
}

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

　   ANIMAL HOSPITAL

--------------------------------------------------------------------------------------------- */
#ah {
    position: relative;
    width: 100%;
    height: 100%;
    
    text-align: center;
    transition: all .3s;
    /*アニメーションの指定*/
}


#ah h2 {
    opacity: 0;
    line-height: 1;
}

#ah p {
    opacity: 0;
    line-height: 1.6;
}

#ah #ah_svg_map {
    opacity: 0;
}


@media not all and (min-width: 1366px) {
    #ah {
        padding: 48px 5.3% 36px;
        background: url("../img/ah_bg_sp.png") no-repeat center top;
        background-size: cover;
    }


        #ah h2 {
            margin-bottom: 24px;
        }

        #ah p {
            width: 73.5%;
            margin: 0 auto 32px;
        }

        #ah #ah_svg_map {
            width: 98%;
            margin: auto;
        }
}

/* パソコン */
@media print, screen and ( min-width : 1366px ) {
    #ah {
        padding-top: 130px;
        padding-bottom: 250px;
        transition: all .3s;/*アニメーションの指定*/
    }
        #ah.ah_bg::before {
            content: "";
            position: absolute;
            top: 0;
            left: -300px;

            width: 100%;
            height: 100%;
            background: url("../img/ah_bg_left.png") no-repeat top left;
            
            opacity: 0;

            animation-name: ah_bg_fadeInLeft;
            animation-duration: .8s;
            animation-delay: .2s;
            animation-fill-mode: forwards;

            transition: all .3s;/*アニメーションの指定*/
            transition-delay: .2s;
        }
        @keyframes ah_bg_fadeInLeft {
            0% {
                opacity: 0;
                left: -300px;
            }
            100% {
                opacity: 1;
                left: 0;
            }
        }

        #ah.ah_bg::after {
            content: "";
            position: absolute;
            top: 0;
            right: -300px;

            width: 100%;
            height: 100%;
            background: url("../img/ah_bg_right.png") no-repeat top right;
            
            opacity: 0;

            animation-name: ah_bg_fadeInRight;
            animation-duration: .8s;
            animation-delay: .2s;
            animation-fill-mode: forwards;

            transition: all .3s;/*アニメーションの指定*/
            transition-delay: .2s;
        }
        @keyframes ah_bg_fadeInRight {
            0% {
                opacity: 0;
                right: -300px;
            }
            100% {
                opacity: 1;
                right: 0;
            }
        }

    #ah h2 {
        margin-bottom: 48px;
        
        
    }

    #ah p {
        width: 35%;
        margin: 0 auto 56px;
    }

    #ah > div {
        position: relative;
        z-index: 2;
    }

    #ah #ah_svg_map {
        width: 37%;
        margin: 0 auto;
    }
}



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

　   RECRUIT

--------------------------------------------------------------------------------------------- */
#recruit::before {
    content: "";
    width: 100%;

    background: url("../img/recruit_bg01.jpg") repeat-x top right;
    background-size: 1366px 290px;
    /* 画像の縦横サイズを入れる */

    animation: bg_01 110s linear infinite;
}

#recruit::after {
    content: "";

    width: 100%;

    background: url("../img/recruit_bg02.jpg") repeat-x bottom left;
    background-size: 1365px 290px;
    /* 画像の縦横サイズを入れる */

    animation: bg_02 110s linear infinite;
}

@keyframes bg_01 {
    0% {
        background-position: 0px 0;
    }

    100% {
        background-position: -1567px 0;
    }
}

@keyframes bg_02 {
    0% {
        background-position: 0px 0;
    }

    100% {
        background-position: 1497px 0;
    }
}


#recruit .box {
    position: relative;
    text-align: center;
    background-color: rgba(185, 215, 233, .9);
}

#recruit h2 {
    margin-bottom: 40px;
    color: #0d5ea7;
    letter-spacing: 4px;
}

#recruit h2::before {
    content: "採用情報";
    display: block;
}

.subTitle {
    color: var(--accent_color_blue2e68b1);
    font-size: 1.125em;/*18px*/
}



/* subTitle以外のp */
#recruit .box p:not(.subTitle) {
    width: 78.7%;
    margin: auto;
    line-height: 1.6;
}


/* SP */
@media not all and (min-width: 1366px) {
    #recruit::before,
    #recruit::after {
        display: block;
        height: 290px;
    }

    #recruit .box {
        padding: 44px 0 40px;
    }

    #recruit h2::before {
        margin-bottom: 11px;
        font-size: 13px;
        font-weight: 500;
    }

    .subTitle {
        margin-bottom: 24px;
    }

    #recruit .box p:not(.subTitle) {
        margin-bottom: 40px;
    }

}

/* パソコン */
@media print, screen and ( min-width : 1366px ) {
        
    /* ループする画像 */
    #recruit {
        position: relative;
        height: 580px;
    }

        #recruit::before {
            position: absolute;
            top: 0px;
            left: 0;
            overflow: hidden;

            height: 50%;

            z-index: 1;
        }
        #recruit::after {
            position: absolute;
            bottom: 0px;
            left: 0;
            overflow: hidden;
        
            height: 50%;
        
            z-index: 1;
        }

    #recruit .box {
        width: 44%;
        height: 100%;
        margin: 0 auto;
        padding: 70px 0 75px;
        z-index: 3;
    }

    #recruit h2::before {
        margin-bottom: 20px;
        font-size: 1rem;
        font-weight: 500;
    }

    .subTitle {
        margin: 0 0 40px;
    }


    /* subTitle以外のp */
    #recruit .box p:not(.subTitle) {
        width: 63.8%;
        margin: 0 auto 32px;
    }
}


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

　   video

--------------------------------------------------------------------------------------------- */
#video iframe {
    aspect-ratio: 16/9;
}

/* SP */
@media not all and (min-width: 1366px) {
	#video .box {
		margin: 3rem 0;
	}
}
/* pc */
@media print, screen and ( min-width : 1366px ) {
	#video .box {
		width: 44%;
		padding: 125px 0;
		margin: auto;
	}
}