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

/*------------------------------------------------------------ 
    FV
------------------------------------------------------------*/  

.p-about-fv{
    width:100%;
    margin-bottom: 70px;
}

.p-about-box__txt{
    display: flex;
    flex-direction: column;
    gap:20px;
}

/*------------------------------------------------------------ 
    LEAD
------------------------------------------------------------*/  

.p-about-box{
    width:calc(714/1480*100%);
}

.p-about-sec__ttl{
    font-size: 25px;
    font-weight: 500;
    letter-spacing: .02em;
}

.p-about-sec__txt{
    font-size: 18px;
    line-height: 1.6;
    margin-top: 10px;
}

.p-about-lead__btn{
    width:100%;
    max-width: 280px;
    margin-top: 40px;
}

.p-about-btn{
    display:flex;
    align-items: center;
    justify-content:space-between;
    width:100%;
    height:46px;
    padding:0 20px 1px;
    color:#333;
    font-size: 18px;
    font-weight: 500;
    line-height:1.2;
    border-radius:5px;
    overflow: hidden;
    letter-spacing: 0.04em;
    font-family: var(--en_ja);
    background-color: var(--accent);
    box-sizing: border-box;
}

.p-about-btn.is-en{
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-family: var(--din);
}

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

.p-about-btn:hover::after{ filter:invert(1);}

.p-about-btn.is-pdf::after{
    width: 18px;
    background-image: url(../../assets/img/icon-external-link.svg);
}

/*------------------------------------------------------------ 
    SECTION (MICE/REPORT)
------------------------------------------------------------*/  

.p-about-sec{
    display: flex;
    flex-direction:column-reverse;
    width:calc(714/1480*100%);
    gap:20px;
    padding:50px;
    background-color: var(--gray);
    box-sizing: border-box;
}

.p-about-sec__txtfield{
    flex:1;
    display: flex;
    flex-direction: column;
}

.p-about-sec__head{
    display: flex;
    flex-direction: column;
    gap:40px;
}

.p-about-secWrapper{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 73px;    
}

.p-about-sec__btn{
    width: 230px;
    margin-top: auto;
    padding-top: 20px;
}

.p-about-sec__btnWrapper{
    display: flex;
    flex-wrap: wrap;
    gap:0 20px;
    margin-top: auto;
}

/*------------------------------------------------------------ 
    SASTANABILITY
------------------------------------------------------------*/  

.p-about-sas{
    width:100%;
    margin-top: 47px;
}

.p-about-sas a{
    display: block;
    width:100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.p-about-sas__box{
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    color:#fff;
    border-radius: 30px;
    box-sizing: border-box;
    position: relative;
    transition:border-radius 0.6s cubic-bezier(0, 0, 0, 1);
    z-index: 1;
}
/*
.p-about-sas__box::after{
	content:"";
	width:100%;
	height: 100%;
	background-color: rgba(80,84,90,.4);
	position: absolute;
	left: 0;
	top:0;
	z-index: -1;
}
*/
.p-about-sas__box::before{
	content:"";
	width:100%;
	height: 100%;
	will-change: transform;
    transition: transform 0.6s cubic-bezier(0, 0, 0, 1);
	background: url(../img/bg-sustainability.webp?ver=1) no-repeat;
	background-size: cover;
	position: absolute;
	left: 0;
	top:0;
	z-index: -2;
}

.p-about-sas__box:hover{ border-radius: 0;}
.p-about-sas__box:hover::before{ transform:scale(1.05); }

.p-about-sas__inner{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width:calc(714/1480*100%);
    min-height: 449px;
    padding:60px 60px 60px 50px;
    box-sizing: border-box;
}

.p-about-sas__txt{
    font-size: 25px;
    font-weight: 500;
    letter-spacing: .02em;
}

.p-about-sas__ttl{
    font-size: 19px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: .04em;
    margin-bottom: 16px;
}

.p-about-sas 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);
}

.p-about-sas a:hover::before{
    opacity:1;
}


/*------------------------------------------------------------ 
    PARTNERS
------------------------------------------------------------*/  

.p-about-part{
    width:100%;
    margin: 78px 0 83px;
}

.p-about-part__img{
    width:calc(958/1680*100%);
    margin:80px auto 0;
}

.p-about-part__img .cls-1 {
    fill: none;
    stroke: #261f1c;
    stroke-miterlimit: 10;
    stroke-width: 1.5px;
}

.p-about-part__img .cls-2 {
    fill:var(--accent);
}

.p-about-part__img .cls-3 {
    fill: #251e1c;
}

.p-about-part__img .cls-4 {
    isolation: isolate;
}

.p-about-part__img .cls-5 {
    fill: #d3d3d3;
    transition: 0.6s cubic-bezier(0, 0, 0, 1);
}

.p-about-part__img a:hover .cls-5 {
    fill:var(--accent);
}

/*------------------------------------------------------------ 
    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% * (600/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% 54%;
    transform: scale(1.2);
}

.is-mark1#js-svg-mark{
    transform:scale(0);
}

.is-mark3#js-svg-mark,
.is-mark4#js-svg-mark{
    transform: scale(1.5);
    transform-origin: 27.5% 53%;
}

.top-Area__label{
    font-size: 2.2rem;
    line-height: 1.75;
    font-weight: 700;
    margin-bottom: 54px;
    letter-spacing: 0.04em;
}

@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__label,
    .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__label{ transition-delay: 450ms;}
    .top-Area__section .com-SectionHeader__subtitle{ transition-delay: 500ms;}
    .top-Area__section .com-SectionHeader__title{ transition-delay: 550ms;}
    .top-Area__section .com-Text__small{ transition-delay: 600ms;}
    .top-Area__sectionHour{ transition-delay: 650ms;}

    .swiper-slide-active .top-Area__section .top-Area__label,
    .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,
.top-Area__image:nth-child(3)::before,
.top-Area__image:nth-child(4)::before{ opacity:.4;}
.top-Area__image:nth-child(2)::before{ opacity:.5;}

/*------------------------------------------------------------ 
    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){


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

}


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


}

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

    .p-about-fv{
        margin-bottom: 44px;
    }

    .p-about-box{
        width: 100%;
    }

    .p-about-sas__txt,
    .p-about-sec__ttl {
        font-size: 20px;
    }

    .p-about-sec__txt {
        font-size: 14px;
    }

    .p-about-lead__btn{
        max-width: 200px;
        margin-top: 30px;
    }
    
    .p-about-btn{
        height:40px;
        padding:0 17px 1px;
        font-size: 15px;
    }
    
    .p-about-btn.is-en{
        font-size: 12px;
    }
    
    .p-about-btn::after{
        width:14px;
    }

    .p-about-sec{
        flex-direction: row-reverse;
        width:100%;
        gap:30px;
        padding:36px;
    }

    .p-about-secWrapper{
        margin-top: 33px;
        gap:34px;
        flex-direction: column;
    }

    .p-about-sec__img{
        width:calc(50% - 30px);
    }

    .p-about-sec__txtfield{
        width:50%;
    }
    
    .p-about-sec__btn{
        width: calc(50% - 9px);
    }
    
    .p-about-sec__btnWrapper{
        gap:18px;
    }

    .p-about-sec .com-SectionHeader__title{
        font-size: 16px;
    }

    .p-about-sec .com-Text{
        font-size: 12px;
        line-height: 1.75;
    }

    .p-about-sas{
        margin-top: 34px;
    }
    
    .p-about-sas a{
        border-radius: 20px;
    }
    
    .p-about-sas__inner{
        width:100%;
        min-height: 289px;
        padding:36px;
    }
    
    .p-about-sas__ttl{
        font-size: 17px;
        margin-bottom: 12px;
    }

    .p-about-sas a::before{
        width:72px;
        right:-36px;
        background-size: 18px auto;
        border-width: 1.5px;
    }

    .p-about-part{
        margin: 54px 0 65px;
    }
    
    .p-about-part__img{
        width:calc(672/828*100%);
        margin-top:64px;
    }
    
    .top-Area__section .com-SectionHeader__subtitle{ font-size: 35px;}
    .top-Area__section .com-Text__small{ font-size: 16px;}

    /* AREA */
    .top-Area__label {
        font-size: 19px;
        margin-bottom: 30px;
    }

    #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:818px;
        left: -14%;
        top: 22%;
    }
    

}

/* TABLET */
@media screen and (min-width: 835px){


}

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

    .p-about-sec__txtfield .com-Text__small{
        font-size: 16px;
        line-height: 1.5;
    }

    .p-about-fv{
        margin-bottom: 30px;
    }

    .p-about-lead__btn{
        max-width: 280px;
    }
    
    .p-about-btn{
        height:46px;
        padding:0 20px 1px;
        font-size: 17px;
    }
    
    .p-about-btn.is-en{
        font-size: 16px;
    }
    
    .p-about-btn::after{
        width:17px;
    }

    .p-about-sec{
        flex-direction: column-reverse;
        gap:16px;
        padding:30px;
    }

    .p-about-secWrapper{
        margin-top: 20px;
        gap:30px;
    }

    .p-about-sec__img,
    .p-about-sec__txtfield{
        width:100%;
    }

    .p-about-sec .com-Text{
        font-size: 14px;
        line-height: 1.78;
    }

    .p-about-sec__ttl{
        margin-bottom: 0.16em;
    }

    .p-about-sec__txt{
        font-size: 16px;
        line-height: 1.5;
        margin-top: 0;
    }

    .p-about-sas{
        margin-top: 30px;
    }

    .p-about-part{
        margin: 28px 0 54px;
    }
    
    .p-about-part__img{
        width:calc(672/774*100%);
        margin-top:60px;
    }

    .p-about-sas a::before{
        display: none;
    }
    

    /* AREA */
    .top-Area__label {
        font-size: 18px;
    }

    #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{
        line-height: 1.5;
    }

}


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

    .p-about-fv{
        margin-bottom: 24px;
    }

    .p-about-lead__btn{
        max-width: 100%;
        margin-top: 16px;
    }
    
    .p-about-btn{
        height:60px;
        padding:0 25px 1px;
    }
    
    .p-about-btn.is-en{
        font-size: 17px;
    }
    
    .p-about-sec{
        padding:20px;
        gap:16px;
    }

    .p-about-secWrapper{
        gap:25px;
    }

    .p-about-sas{
        margin-top: 25px;
    }

    .p-about-sas__inner{
        min-height: 377px;
        padding:30px 36px;
    }
    
    .p-about-sas__ttl{
        font-size: 16px;
        margin-bottom: 8px;
    }

    .p-about-sas .com-enttl{
        margin-bottom: 16px;
    }

    .p-about-part{
        margin: 49px 0 61px;
    }
    
    .p-about-part__img{
        width:100%;
        margin-top: 55px;
    }

    .p-about-sec__btnWrapper{
        gap:0;
        flex-direction: column;
    }

    .p-about-sec__btn{
        width:100%;
    }

    .p-about-part .com-enttl{
        margin-bottom: 16px;
    }

    /* AREA */
    .top-Area__label {
        font-size: 16px;
        margin-bottom: 20px;
    }

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

    .top-Area__scroll{
        width: 39px;
        left: 50%;
        bottom:34px;
        transform: translateX(-50%);
        padding-bottom:0;
    }

    .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-Area__section .com-SectionHeader__subtitle {
        font-size: 32px;
    }
    
    .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:34px;
        padding-bottom: 160px;
        background: no-repeat 50%;
        background-size:cover;
        position: relative;
        z-index: 1;
        gap:30px;
        display: flex;
        flex-direction: column;
        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%;
        aspect-ratio: 480 / 496;
        background: no-repeat 50%;
        background-size:100% auto;
        display: block;
    }

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

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

    #top-Area .swiper-slide:nth-child(1)::after{ background-image: url(../img/map-sapporo.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-kutchan.svg?ver=2);}
    #top-Area .swiper-slide:nth-child(4)::after{ background-image: url(../img/map-niseko.svg?ver=3);}

}