@charset "utf-8";  
/*------------------------------------------------------------ 
    TOP css
------------------------------------------------------------*/  

/*------------------------------------------------------------ 
    ABOUT
------------------------------------------------------------*/  

#top-About{
    margin: 0 auto;
    padding-top:100px;
}

#top-About__logo{
    width:calc(100% * (355/1480));
    padding-right: 68px;
}

.top-AboutService{
    width:100%;
    margin-top:70px
}

.top-AboutService__title{
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.top-AboutService__list{
    width:100%;
    margin-top: 21px;
    border-top:1px solid #242424;
}

.top-AboutService__item{
    width:100%;
    border-bottom:1px solid #242424;
}

.top-AboutService__item a{
    display:flex;
    align-items:center;
    height:66px;
    color:#242424;
    font-weight: 500;
    font-size: 2rem;
    transition: all 0.6s cubic-bezier(0.78, 0.07, 0, 1);
    background-color: #fff;
    position: relative;
    z-index: 1;
}

.top-AboutService__item a:hover{
/*    color:transparent;*/
    padding-left: 1em;
    background-color: var(--accent);
}

.top-AboutService__item a::after{
    display: flex;
    content:"";
    width:76px;
    height: 100%;
    margin-left: auto;
    transition: background 0.6s cubic-bezier(0.78, 0.07, 0, 1);
    background: var(--accent) url(../img/icon-arrow.svg) no-repeat 50%;
    background-size:13px auto;
}

.top-AboutService__item a:hover::after{
    background-color: #242424;
    background-image:url(../img/icon-arrow-w.svg);
}

/*
.top-AboutService__item a::before{
    display: block;
    content:attr(data-text)"";
    font-family: var(--ja);
    font-size: 2rem;
    font-weight: bold;
    color:#242424;
    position: absolute;
    left: 0;
    top:50%;
    transform: translateY(-50%);
    opacity:0;
    transition: all 0.6s cubic-bezier(0.78, 0.07, 0, 1);
}

.top-AboutService__item a:hover::before{
    opacity:1;
    left: .5em;
}
*/
/*------------------------------------------------------------ 
    NEWS
------------------------------------------------------------*/  

#top-NewsWrapper{
    width: 100%;
    padding-top: 52px;
    margin-top: 100px;
    background-color: #F0F0F0;
}

.top-NewsItem{
    width:100%;
    padding-bottom: 55px;
    background: url(../assets/img/border.svg) repeat-x 0% bottom;
    background-size: auto 2px;
}

.top-NewsItem:not(:last-child){
    margin-bottom: 53px;
}

.top-NewsItem a{
    display: flex;
    justify-content: space-between;
    width: 100%;
    color:#242424;
    position: relative;
    z-index: 1;
}

.top-NewsItem__txtfield{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width:calc(710/1480*100%);
}

.top-NewsItem__cate{
    display: flex;
    align-items: center;
    justify-content: center;
    width:96px;
    aspect-ratio: 96 / 44;
    font-size: 18px;
    font-weight: 500;
    font-family: var(--en);
    letter-spacing: .04em;
    margin-bottom: 32px;
    color: #333;;
    background:url(../img/bg-cate.svg) no-repeat right 0;
    background-size: auto 100%;
}

.top-NewsItem__title{
    font-size: 26px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .02em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.top-NewsItem__text{
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: .02em;
    margin-top: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.top-NewsItem__date{
    margin-top: auto;
    font-weight: 500;
    line-height: 1;
    padding-top: 20px;
    font-size: 18px;
    letter-spacing: .02em;
    font-family: var(--din);
}

.top-NewsItem__image{
    width:calc(714/1480*100%);
    border-radius:30px;
    align-self: flex-start;
    transition: border-radius 0.6s cubic-bezier(0, 0, 0, 1);
    position: relative;
}

.hover-thumb:hover .top-NewsItem__image{ border-radius:0;}

.top-NewsItem__image::before{
    content:"";
    width:100%;
    height: 100%;
    background-color: rgba(0,0,0,.18);
    position: absolute;
    left: 0;
    top:0;
    z-index: 10;
}

.top-News__moreWrapper{
    width:100%;
    padding:35px 0 87px;
}

.top-News__more{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width:230px;
    height: 46px;
    margin-left: auto;
    color:#333;
    overflow: hidden;
    border-radius: 5px;
    padding:0 20px 1px;
    font-family: var(--din);
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.2;
    box-sizing: border-box;
    background-color: var(--accent);
}

.top-News__more::after{
    content:"";
    width:16px;
    aspect-ratio: 1;
    background: url(../assets/img/icon-arrow.svg) no-repeat;
    background-size: cover;
    transition:filter .2s ease-out;
}

.top-News__more:hover::after{ filter:invert(1);}

.top-NewsItem a::before{
    content:"";
    width:92px;
    aspect-ratio: 1;
    background: var(--accent) url(../assets/img/icon-arrow.svg) no-repeat 50%;
    background-size: 18px auto;
    position: absolute;
    bottom:54px;
    right:-46px;
    z-index: 20;
    border-radius: 50%;
    border:2px solid #333;
    box-sizing: border-box;
    opacity:0;
    transition: opacity 0.6s cubic-bezier(0, 0, 0, 1);
}

.top-NewsItem a:hover::before{
    opacity:1;
}

/*------------------------------------------------------------ 
    SAPPORO
------------------------------------------------------------*/  

.top-Headline{
    font-size:9rem;
    line-height: 1.12;
    margin-bottom: 42px;
    font-family: var(--en);
    letter-spacing: 0.02em;
    font-weight: 400;
}

#top-Sapporo{ padding-top: 90px;}

#top-SapporoHead{
    width:100%;
    max-height:750px;
    margin-bottom:80px;
    background-color: var(--base);
    overflow: hidden;
}

#top-SapporoHead__txtfield{
    width:calc(100% * (600/1480));
    padding: 70px 0 80px;
}

#top-SapporoHead__image{
    width:100%;
    margin-top:40px;
}

#top-SapporoHead__map{
    width:calc(100% * (770/1480));
    position: relative;
/*    margin-right: calc(50% - 50vw + 60px);*/
}

#top-SapporoHead__map--svg{
    width:calc(100vw * (1477/1480));
    position: absolute;
    left: 0;
    top:38%;
    transform:translateY(-50%)
}

#top-SapporoHead__map img{ object-position: left center;}

.top-SapporoSection{
    display:flex;
    justify-content: flex-end;
    width:100%;
    box-sizing: border-box;
}

.top-SapporoSection + .top-SapporoSection{ margin-top:56px;}

.top-SapporoSection__txtfield{
    width:calc(100% * (854/1480));
    max-width:600px;
    padding:34px 40px;
    margin:64px 0;
    box-sizing: border-box;
    position:relative;
    z-index: 10;
}

.top-SapporoSection__image{
    display: flex;
    width:calc(100% * (760/1480));
}



.top-SapporoSection:nth-child(odd) .top-SapporoSection__txtfield{
    margin-left: calc(-100% * (254/1480));
    background:var(--accent);
}

.top-SapporoSection:nth-child(even) .top-SapporoSection__txtfield{
    margin-right: calc(-100% * (254/1480));
    background:var(--base);
}

/*------------------------------------------------------------ 
    FACILITY 
------------------------------------------------------------*/  

#top-Facility{
    width:100%;
    margin:80px 0;
    padding:80px 0;
    border-top:1px solid #242424;
    border-bottom:1px solid #242424;
}

#top-Facility__txtfield{ max-width:740px;}

#top-Facility__map{
    width:100%;
    margin:40px 0 80px;
    background-color: #d2d2d2;
}
/*
#top-Facility__map--detail{
    width:100%;
    min-height: 1px;
    margin-bottom: 54px;
}

.top-Facility__mapItem{
    display: flex;
    flex-direction:column
}

.top-Facility__mapItem--title{
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    border-radius:10px 10px 0 0;
    height:48px;
    font-size:2rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.1;
    background-color: var(--accent);
    box-sizing: border-box;
}

.top-Facility__mapItem--body{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex:1;
    padding:16px 26px;
    background-color: #fff;
    border-radius:0 0 10px 10px;
    box-sizing:border-box;
}

.top-Facility__mapItem--text{
    font-size: 1.4rem;
    margin-bottom: .25em;
}

.top-Facility__mapItem--min{
    display:flex;
    align-items: flex-end;
    font-family: var(--din);
    font-weight: 500;
    line-height:1;
    font-size: 2.4rem;
}

.top-Facility__mapItem--min span{
    display:block;
    margin-right: .25rem;
    font-family:inherit;
    font-weight: bold;
    line-height:inherit;
    font-size:4.4rem;
}
*/
.top-FacilityItem{
    display: flex;
    flex-direction: column;
    width:calc(100% * (330/1480));
}

.top-FacilityItem .com-SectionHeader__title{ padding-bottom: .1em;}

.top-FacilityItem__image{
    width:100%;
    margin-bottom: 12px;
    position:relative;
    z-index:1;
}

.top-FacilityItem__image::before{
    content:"";
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.05);
    position:absolute;
    left:0;
    top:0;
    z-index: 2;
}

.top-FacilityItem:nth-child(3) .top-FacilityItem__image::before{ background-color: rgba(0,0,0,0);}

.top-FacilityItem:nth-child(2) .top-FacilityItem__image::before,
.top-FacilityItem:nth-child(4) .top-FacilityItem__image::before{ background-color: rgba(0,0,0,.15);}

.top-FacilityItem__image--en{
    width:100%;
    color:#fff;
    font-size:3rem;
    font-family: var(--din);
    line-height:1.2;
    font-weight: 500;
    padding:0 20px;
    box-sizing: border-box;
    position:absolute;
    bottom:16px;
    left:0;
    z-index: 3;
}

.top-FacilityItem__button{
    width:230px;
    height: 46px;
    margin-top:20px;
}

.top-FacilityItem__button a{
    display:flex;
    align-items: center;
    justify-content: space-between;
    width:100%;
    height:100%;
    padding:0 20px 1px;
    color:#333;
    overflow: hidden;
    border-radius: 5px;
    font-family: var(--din);
    font-weight: 500;
    font-size: 1.8rem;
    line-height:1.2;
    letter-spacing: 0.02em;
    background-color: var(--accent);
    box-sizing: border-box;
}

.top-FacilityItem__button a::after{
    display: block;
    content:"";
    width:16px;
    aspect-ratio: 1;
    margin-left: auto;
    background:url(../assets/img/icon-arrow.svg) no-repeat;
    background-size:cover;
    transform:translateY(1px);
    transition:filter 0.3s cubic-bezier(0.78, 0.07, 0, 1);
}

.top-FacilityItem__button a:hover::after{ filter:invert(1);}


/*------------------------------------------------------------ 
    AREA 
------------------------------------------------------------*/  

#top-Area{
    width:100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

#top-Area .swiper{
    width:100%;
    height:100vh;
    z-index: 10;
}

#top-Area .swiper-slide{
    width:100%;
    height:100%;
    padding-top:110px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical > .swiper-pagination-bullets{
    width:14px;
    right:43px;
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet{
    width:14px;
    height: 14px;
    margin:16px 0;
    border-radius:50%;
    background-color: var(--base);
    transition: .2s;
    transform: scale(.5);
    opacity:1;
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet-active,
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet-active{
    background-color: var(--accent);
    transform: scale(1);
}

.top-Area__section{
    width:calc(100% * (540/1480));
    color:#fff;
}

#top-Area__contents{
    width:100%;
    height: 100%;
    position:absolute;
    left:0;
    top:0;
}

#top-Area__scroll{
    display: flex;
    align-items: flex-end;
    width:40px;
    height: 100vh;
    box-sizing: border-box;
    position:absolute;
    bottom:0;
    z-index: 20;
    padding-bottom: 100px;
    transition:all .2s ease-out;
}

#top-Area__scroll a{
    display: flex;
    align-items: center;
    width:100%;
    height:110px;
    font-size:1.6rem;
    padding: 1em 0;
    font-family: var(--en);
    box-sizing: border-box;
    color:#fff;
    font-weight: 400;
    border-radius:20px;
    border:1px solid #fff;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -webkit-text-orientation: mixed;
    text-orientation: mixed;
    position: relative;
    letter-spacing: 0.04em;
    transition:all .2s ease-out;
}

#top-Area__scroll a::after{
    display: block;
    content:"";
    width:8px;
    height: 8px;
    border-right: 1px solid #fff;
    border-bottom:1px solid #fff;
    transform:rotate(45deg);
    margin-top:auto;
}

#top-Area__scroll a:hover{
    color:#242424;
    background-color:var(--accent);
    border-color:var(--accent);
}

#top-Area__scroll a:hover::after{
    border-right-color:#242424;
    border-bottom-color:#242424;
}


#js-svg-mark{
    transition: transform .2s ease-out;
    transform-origin: 26% 58%;
}

.is-mark3#js-svg-mark{
    transform:scale(1.5);
}

.is-mark4#js-svg-mark{
    transform:scale(1.75);
    transform-origin: 26.5% 58%;
}

@media screen and (min-width: 481px){
.top-Area__section .com-SectionHeader__subtitle,
.top-Area__section .com-SectionHeader__title,
.top-Area__section .com-Text__small,
.top-Area__sectionHour{
    opacity:0;
    transform: translateY(40px);
    transition: transform .8s cubic-bezier(.43,.05,.17,1),opacity .8s cubic-bezier(.26,.06,0,1);
}

.top-Area__section .com-SectionHeader__subtitle{ transition-delay: 450ms;}
.top-Area__section .com-SectionHeader__title{ transition-delay: 500ms;}
.top-Area__section .com-Text__small{ transition-delay: 550ms;}
.top-Area__sectionHour{ transition-delay: 600ms;}

.swiper-slide-active .top-Area__section .com-SectionHeader__subtitle,
.swiper-slide-active .top-Area__section .com-SectionHeader__title,
.swiper-slide-active .top-Area__section .com-Text__small,
.swiper-slide-active .top-Area__section .top-Area__sectionHour{
    opacity:1;
    transform:translateY(0);
}
}

/* MAP */
#top-Area__side{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:calc(100% * (860/1480));
    height: 100vh;
    padding-bottom: 50px; 
    margin-left: auto;
    box-sizing: border-box;
    position: relative;
}


#top-Area__side--inner{
    width: calc(100vw * (1480/1480));
    position: absolute;
    left: 0;
    top: 37%;
    transform: translateY(-50%);
}

.map-detail{
    opacity:0;
    transition:opacity .6s cubic-bezier(.26,.06,0,1);
}

.map-detail.is-active{ opacity:1;}

#top-Area__navi{
    width:14px;
    position:absolute;
    right:43px;
    top:50%;
    z-index: 20;
    transform:translateY(-50%);
}

#top-Area__navi li{
    width:14px;
    height:14px;
    margin:8px 0;
}

#top-Area__navi a{
    display: flex;
    width:100%;
    height: 100%;
    background-color: var(--base);
    border-radius:50%;
    transition:.2s;
    transform: scale(.5);
}

#top-Area__navi .is-active{
    background-color: var(--accent);
    pointer-events:none;
    transform: scale(1);
}


/* COVER */
#top-Area__image{
    width:100%;
    height: 100%;
    overflow: hidden;
    position:absolute;
    left:0;
    top:0;
    z-index: -1;
}


.top-Area__image{
    width:100%;
    height:100vh;
    position: absolute;
    overflow: hidden;
    opacity:0;
    transition: opacity 1.2s cubic-bezier(0.485, 0.135, 0, 0.995);
    top:0;
    z-index: 1;
}

.top-Area__image.is-inview{ opacity:1;}

.top-Area__image::before{
    content:"";
    width:100%;
    height:100%;
    background-color:#242424;
    position: absolute;
    left: 0;
    top:0;
    z-index: 2;
}

.top-Area__image:nth-child(1)::before{ opacity:.4;}
.top-Area__image:nth-child(2)::before{ opacity:.6;}
.top-Area__image:nth-child(3)::before{ opacity:.45;}
.top-Area__image:nth-child(4)::before{ opacity:.4;}

/*------------------------------------------------------------ 
    MediaQuery 
------------------------------------------------------------*/  

@media screen and (max-width: 1800px) and (min-width: 1081px){

    .swiper-pagination-vertical.swiper-pagination-bullets,
    .swiper-vertical > .swiper-pagination-bullets{
        right:calc((100vw * (100/1800) - 14px)/2);
    }
    
}


@media screen and (max-width: 1350px) and (min-width: 1025px){

    .top-FacilityItem{ width:calc(100% * (713/1480));}
    .top-FacilityItem:nth-child(n+3){ margin-top:calc(100% * (54/1480));}

    .top-Headline{ font-size: calc(100vw * (90/1350));}

    .swiper-pagination-vertical.swiper-pagination-bullets,
    .swiper-vertical > .swiper-pagination-bullets{ right:23px;}

}


@media screen and (min-width: 1025px){

    #top-About__info{
        width: calc(714 / 1480* 100%);
    }
    
    #top-SapporoHead__map--svg{
        max-width:1477px;
        min-width:1148px;
    }

    #top-Area__side--inner{
        max-width: 1480px;
        min-width: 1024px;
    }

}

/* PC */
@media screen and (max-width: 1024px){

    #visualImg{
        width: calc(520 / 928* 100%);
    }

    #top-About {
        padding-top: 50px;
        flex-direction: column-reverse;
    }

    #top-About__logo{
        width:615px;
        padding-right:0;
        margin-bottom: 34px;
    }

    #top-About__info{ width:100%;}

    .top-AboutService{
        margin-top: 32px;
    }

    .top-AboutService__title {
        font-size: 21px;
        margin-bottom: 8px;
    }

    .top-AboutService__list{
        display: flex;
        justify-content: space-between;
        border-top:none;
        margin-top: 12px;
    }

    .top-AboutService__item{
        width:calc(100% * (394/828));
        border-top:1px solid #242424;
    }

    .top-AboutService__item a{
        height:50px;
        font-size: 1.7rem;
    }

    .top-AboutService__item a::before{ font-size: 1.5rem;}

    .top-AboutService__item a::after{
        width:48px;
        background-size:10px auto;
    }

    #top-NewsWrapper{
        padding-top: 42px;
        margin-top: 68px;
    }

    .top-NewsItem {
        padding-bottom: 44px;
    }

    .top-NewsItem:not(:last-child){
        margin-bottom: 42px;
    }

    .top-NewsItem__txtfield{
        width:calc(394/828*100%);
    }
    
    .top-NewsItem__cate{
        margin-bottom: 27px;
    }
    
    .top-NewsItem__title{
        font-size: 21px;
    }
    
    .top-NewsItem__text{
        font-size: 16px;
        margin-top: 12px;
        line-height: 1.375;
    }
    
    .top-NewsItem__date{
        padding-top: 20px;
        font-size: 18px;
    }
    
    .top-NewsItem__image{
        width:calc(394/828*100%);
        border-radius:20px;
    }

    .top-NewsItem a::before{
        width:72px;
        background-size: 18px auto;
        border-width: 1.5px;
        right:-36px;
    }

    .top-News__moreWrapper{
        padding:31px 0 67px;
    }
    
    .top-News__more{
        width: 204px;
        height: 40px;
        padding: 0 26px 1px 28px;
        font-size: 1.5rem;
    }

     /* SAPPORO */
    .top-Headline{
        font-size:5.9rem;
        margin-bottom: 30px;
        letter-spacing: 0.02em;
    }
    
    #top-Sapporo{ padding-top: 55px;}
    
    #top-SapporoHead{
        max-height:none;
        margin-bottom:50px;
    }

    #top-SapporoHead__txtfield{
        width:calc(100% * (394/828));
        padding: 31px 0 49px;
    }
    
    #top-SapporoHead__image{ margin-top:35px;}

    .top-FacilityItem{ width:calc(100% * (394/828));}

    #top-SapporoHead__map{
        width:calc((100% * (382/828)) + 50px);
        margin-right:-50px;
        overflow: hidden;
    }

    #top-SapporoHead__map--svg{
        width:calc(100vw * (881/1024));
        min-width:881px;
        top:42%;
        left:calc(-100vw * (52/1024));
    }

    .top-SapporoSection + .top-SapporoSection{ margin-top:39px;}

    .top-SapporoSection__txtfield{
        width:calc(100% * (444/828));
        max-width:444px;
        padding:28px 30px 26px;
        margin:35px 0;
    }

    .top-SapporoSection__image{ width:calc(100% * (464/828));}

    .top-SapporoSection:nth-child(odd) .top-SapporoSection__txtfield{ margin-left: calc(-100% * (177/828));}
    .top-SapporoSection:nth-child(even) .top-SapporoSection__txtfield{ margin-right: calc(-100% * (177/828));}

    #top-Facility__txtfield{ max-width:414px;}

    /* FACILITY */
    #top-Facility {
        margin: 50px 0 32px;
        padding: 32px 0 50px;
    }

    #top-Facility__map{ margin:40px 0 50px;}
    .top-FacilityItem:nth-child(n+3){ margin-top:calc(100% * (42/828));}

    .top-FacilityItem__image{ margin-bottom:20px;}
    .top-FacilityItem__image--en{ bottom: 16px;}

    .top-FacilityItem__button{
        width:204px;
        height: 40px;
    }

    .top-FacilityItem__button a{
        padding:0 26px 1px 28px;
        font-size: 1.5rem;
    }

    #top-Area .swiper-slide{ padding-top:40px;}

    #top-Area__scroll{ padding-bottom:50px;}

    .top-Area__section{ width:calc(100% * (342/828));}

    .swiper-pagination-vertical.swiper-pagination-bullets,
    .swiper-vertical > .swiper-pagination-bullets{
        width:auto;
        display: flex;
        align-items: center;
        right:50px;
        top:auto;
        transform:none;
        bottom:50px;
    }

    .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
    .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet{
        width:12px;
        height: 12px;
        margin:0 0 0 8px;
    }

    #top-Area__side{
        width:calc(100% * (414/828));
        padding-bottom: 10px; 
    }
    
    
    #top-Area__side--inner{
/*        width: calc(100vw * (818/1024));*/
        width:818px;
        left: -14%;
        top: 22%;
    }
    

}

/* TABLET */
@media screen and (min-width: 835px){
    .top-SapporoSection:nth-child(odd){
        flex-direction: row-reverse;
    }

    #top-Facility__map .hover-item{
        opacity:0;
        transition: opacity .3s ease-out;
    }

    #top-Facility__map .hover-button{ cursor: pointer;}
    #top-Facility__map .hover-button:hover + .hover-item{ opacity:1;}


    #top-Facility__map .hover-button .bg{ transition: fill .3s ease-out;}
    #top-Facility__map .hover-button .line{ transition: stroke .3s ease-out;}
    #top-Facility__map .hover-button path{ transition: fill .3s ease-out,stroke .3s ease-out;}

    #top-Facility__map .hover-button:hover .bg{ fill: #242424;}
    #top-Facility__map .hover-button:hover path:not(.bg):not([fill="none"]){ fill: #fff;}
    #top-Facility__map .hover-button:hover .line{ stroke: #fff;}

}

@media screen and (max-width: 834px){

    #top-Facility__map .hover-item{ display: none;}

    #visual{ height: calc(100vh - 80px);}
    #visualImg {
        width: calc(100% * (512/834));
    }

    #top-About{
        padding-top:34px;
    }

    #top-About__logo{
        width:100%;
        max-width: 492px;
        margin-bottom: 26px;
    }

    .top-AboutService__item a{ font-size:1.6rem;}

    .top-FacilityItem,
    .top-AboutService__item {
        width: calc(100% * (372/774));
    }

    #top-NewsWrapper {
        padding-top: 42px;
        margin-top: 49px;
    }

    .top-NewsItem{
        padding-bottom: 44px;
    }
    
    .top-NewsItem:not(:last-child){
        margin-bottom: 42px;
    }

    .top-NewsItem__txtfield{
        width:calc(372/774*100%);
    }

    .top-NewsItem__image{
        width:calc(372/774*100%);
        border-radius:20px;
    }

    .top-NewsItem a::before{
        display: none;
    }
    
    .top-News__more{
        padding: 0 26px 1px 24px;
        font-size: 1.5rem;
    }

    #top-Sapporo {
        padding-top: 44px;
    }

    .top-Headline {
        font-size: 4.7rem;
        margin-bottom: 26px;
        line-height: 1.08;
    }

    #top-SapporoHead__txtfield{
        width:100%;
        padding:20px 0 50px;
    }

    #top-SapporoHead__image {
        margin-top: 25px;
    }

    .top-SapporoSection{ flex-wrap: wrap;}
    .top-SapporoSection + .top-SapporoSection{ margin-top:30px;}

    .top-SapporoSection__txtfield{
        order:2;
        width:100%;
        max-width:100%;
        padding:38px 40px 34px;
        margin: 0;
        transform: translate3d(0,0,0);
        opacity: 1;
    }

    .top-SapporoSection__txtfield .com-Text__small{
        font-size: 1.4rem;
        line-height: 1.785;
    }

    .top-SapporoSection__image{
        order:1;
        width:100%;
        aspect-ratio: 1/.6;
    }

    .top-SapporoSection:nth-child(odd) .top-SapporoSection__txtfield{ margin-left:0;}
    .top-SapporoSection:nth-child(even) .top-SapporoSection__txtfield{ margin-right: 0;}

    #top-Facility {
        padding-bottom:40px;
    }

    #top-Facility__txtfield{ max-width:100%;}
    .top-FacilityItem:nth-child(n+3){ margin-top:calc(100% * (34/774));}
    .top-FacilityItem__image{ margin-bottom: 18px;}

    .top-FacilityItem .com-SectionHeader__title{ font-size: 1.8rem;}
    .top-FacilityItem .com-Text__small {
        font-size: 1.4rem;
        line-height: 1.78;
    }

    .top-FacilityItem__button a {
        padding: 0 26px 1px 24px;
        font-size: 1.5rem;
    }

    .top-FacilityItem__route{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width:100%;
        margin-top:14px;
        padding: 17px 0 19px;
        border-top:1px solid #242424;
        border-bottom: 1px solid #242424;;
    }

    .top-FacilityItem__route dt{
        font-size:1.4rem;
        letter-spacing: 0.04em;
        line-height: 1;
    }

    .top-FacilityItem__route dt span{
        display: block;
        font:inherit;
        margin-top: 17px;
    }

    .top-FacilityItem__route dd{
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        font-size:1.9rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        font-family: var(--din);
        line-height: 1;
    }

    .top-FacilityItem__route dd span{
        font-size:3.9rem;
        font-weight: 500;
        letter-spacing: -0.03em;
        line-height: .9;
        font-family: var(--din);
        padding-right: 0.128em;
    }

    #top-Area .swiper-slide{ padding-top:120px;}

    #top-Area__scroll{
        width: 28px;
        padding-bottom:30px;
    }

    #top-Area__scroll a {
        height:77px;
        font-size: 1.1rem;
        padding:10px 0;
    }

    #top-Area__scroll a::after {
        width: 5px;
        height: 5px;
    }

    .top-Area__section{ width:calc(100% * (320/774));}

    .swiper-pagination-vertical.swiper-pagination-bullets,
    .swiper-vertical > .swiper-pagination-bullets{
        right:30px;
        bottom:30px;
    }

    .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
    .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet{
        width:8px;
        height: 8px;
    }

    #top-Area__side{
        width:calc(100% * (454/774));
        padding-bottom: 10px; 
    }
    
    #top-Area__side--inner{
        width:calc(100vw * (1800*.6/834));
        top: 29%;
        left: -3px;
    }

    .top-Area__section .com-Text__small{
        font-size:1.4rem;
        line-height: 1.78;
    }

}


/* SP */
@media screen and (max-width: 480px){

    #visual{ height: calc(100vh - 70px);}
    #visualImg {
        width: calc(100% * (400/480));
    }

    #top-About{
        padding-top:25px;
    }

    #top-About__logo{
        max-width: calc(393/480*100vw);
        margin-bottom: 18px;
    }

    .top-AboutService ul{ display: block;}

    .top-FacilityItem,
    .top-AboutService__item{ width:100%;}

    .top-AboutService__item + .top-AboutService__item{ border-top:none;}

    .top-FacilityItem__button{
        width:100%;
        height: 60px;
    }

    .top-FacilityItem__button a {
        padding: 0 22px 1px 20px;
        font-size: 1.7rem;
    }

    #top-NewsWrapper {
        padding-top: 40px;
        margin-top: 40px;
    }

    .top-NewsItem {
        padding-bottom: 32px;
    }

    .top-NewsItem:not(:last-child){
        margin-bottom: 30px;
    }

    .top-NewsItem a{
        flex-direction: column;
        gap:26px;
    }

    .top-NewsItem__txtfield{
        width:100%;
        position: relative;
    }

    .top-NewsItem__cate{
        width:90px;
        margin-bottom: 20px;
    }

    .top-NewsItem__title{
        font-size: 23px;
        line-height: 1.5;
    }
    
    .top-NewsItem__text{
        font-size: 16px;
        line-height: 1.5;
        margin-top: 10px;
    }

    .top-NewsItem__date{
        padding-top: 0;
        line-height: 44px;
        position: absolute;
        right:0;
        top:0;
    }

    .top-NewsItem__image {
        width:100%;
    }

    .top-News__more {
        width: 100%;
        height: 60px;
        font-size: 18px;
        text-align: center;
        justify-content: center;
    }

    .top-News__more::after{
        display: none;
    }

    .top-News__moreWrapper {
        padding: 30px 0;
    }

    .top-AboutService{ margin-top:26px;}

    .top-Headline {
        font-size: clamp(2rem,8.3vw,4rem);
        margin-bottom: .4em;
        line-height: 1.1;
    }

    #top-Sapporo {
        padding-top: 34px;
    }

    #top-SapporoHead {
        margin-bottom: 26px;
    }

    #top-SapporoHead__txtfield{ padding: 14px 0 25px;}

    #top-SapporoHead__image {
        margin-top: 18px;
    }

    .top-SapporoSection__txtfield{
        padding:30px 30px 25px;
    }

    #top-Facility {
        margin:44px 0 18px;
        padding: 20px 0 40px;
    }

    .top-FacilityItem{ margin-top:25px;}
    .top-FacilityItem + .top-FacilityItem{ margin-top: 30px;}

    #top-Area .swiper-slide{ padding-top:80px;}

    #top-Area__scroll{
        display: none;
        width: 39px;
        left: 50%;
        transform: translateX(-50%);
        padding-bottom:35px;
    }

    #top-Area__scroll a {
        height:108px;
        font-size: 1.5rem;
        padding:15px 0;
    }

    #top-Area__scroll a::after {
        width: 6px;
        height: 6px;
    }

    .top-Area__section{ width:100%;}

    #top-Area__side{
        width:100vw;
        height: 100vw;
        overflow: hidden;
        padding-bottom: 0; 
        position: absolute;
        left: 0;
        top:250px;
    }
    
    #top-Area__side--inner{
        width:calc(100vw * (1068/480));
        top: 30%;
        left: -15%;
    }

    .swiper-pagination{ display: none!important;}

    
    .top-FacilityItem__image{ margin-bottom: 10px;}
    .top-FacilityItem__route dd{ align-self: flex-end;}

    #top-Area .swiper{ height: auto;}
    #top-Area .swiper-wrapper{ display: block;}
    #top-Area .swiper-slide{
        padding-top:22px;
        background: no-repeat 50%;
        background-size:cover;
        position: relative;
        z-index: 1;
        height:697px;
        box-sizing: border-box;
    }

    #top-Area .swiper-slide::before{
        content:"";
        width:100%;
        height:100%;
        background-color:#242424;
        position: absolute;
        left: 0;
        top:0;
        z-index: -1;
    }

    .top-Area__section{ width:100%;}

    #top-Area .swiper-slide::after{
        content:"";
        width:100%;
        height:100%;
        background: no-repeat 50%;
        background-size:cover;
        position: absolute;
        left:0;
        top:0;
        z-index: 10;
    }

    .swiper-slide .inner{
        position:relative;
        z-index: 20;
    }

    #top-Area .swiper-slide:nth-child(1){ background-image: url(../img/bg-jozankei.jpg);}
    #top-Area .swiper-slide:nth-child(2){ background-image: url(../img/bg-otaru.jpg);}
    #top-Area .swiper-slide:nth-child(3){ background-image: url(../img/bg-yoichi.jpg);}
    #top-Area .swiper-slide:nth-child(4){ background-image: url(../img/bg-niseko.jpg);}

    #top-Area .swiper-slide:nth-child(1)::before,
    #top-Area .swiper-slide:nth-child(4)::before{ opacity:.4;}
    #top-Area .swiper-slide:nth-child(2)::before{ opacity:.6;}
    #top-Area .swiper-slide:nth-child(3)::before{ opacity:.45;}

    #top-Area .swiper-slide:nth-child(1)::after{ background-image: url(../img/map-jozankei.svg?ver=2);}
    #top-Area .swiper-slide:nth-child(2)::after{ background-image: url(../img/map-otaru.svg?ver=2);}
    #top-Area .swiper-slide:nth-child(3)::after{ background-image: url(../img/map-yoichi.svg?ver=2);}
    #top-Area .swiper-slide:nth-child(4)::after{ background-image: url(../img/map-niseko.svg?ver=2);}


}