/* CSS Document */

/*------------------------------*/
:root{
    --main: #BB6C06;
}
/*------------------------------*/
section[class^="property"],
section.area-link,
section.pankuzu{
    position: relative;
    z-index: 1;
    background-color: #fff;
}
/*------------------------------*/
.property-title{
    text-align: center;
    padding-top: 10rem;
    padding-bottom: 4rem;
    @media (max-width: 768px) {
        padding-top: 5rem;
    }
    h1{
        line-height: 2;
    }
    p{
        color: inherit;
        text-transform: uppercase;
    }
}
/*------------------------------*/
.area-link{
    padding-block: 4rem;
    @media (max-width: 768px) {
        padding-block: 1.5rem;
    }
    .area-wrap{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        a{
            text-decoration: none;
            color: inherit;
            font-size: 1.4rem;
            line-height: 1.5;
            transition: color 0s ease;
            @media (any-hover: hover) {
                &:hover{
                    color: var(--main);
                    text-decoration: underline;
                }
            }
        }
    }
}
/*------------------------------*/
.property-country{
    padding-block: 4rem;
    @media (max-width: 768px) {
        padding-block: 2rem;
    }
    .wrap{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 1.5rem 3rem;
        @media (max-width: 768px) {
            flex-direction: column;
        }
        button{
            color: inherit;
            font-size: 1.8rem;
            font-weight: 500;
            opacity: 0.6;
            transition: color 0s ease;
            @media (any-hover: hover) {
                &:hover{
                    opacity: 1;
                    color: var(--main);
                }
            }
            &.active{
                opacity: 1;
                pointer-events: none;
                text-decoration: underline;
            }
        }
    }
}
/*------------------------------*/
.property-buildings{
    padding-top: 3rem;
    padding-bottom: 10rem;
    @media (max-width: 768px) {
        padding-bottom: 5rem;
    }
    .area-wrap{
        display: flex;
        flex-direction: column;
        row-gap: 6rem;
        @media (max-width: 768px) {
            row-gap: 4rem;
        }
    }
    .area-items{
        .area-name{
            display: inline-block;
            font-size: 1.8rem;
            font-weight: 500;
            color: inherit;
            text-decoration: none;
            transition: color 0s ease;
            @media (any-hover: hover) {
                &:hover{
                    color: var(--main);
                    text-decoration: underline;
                }
            }
        }
        ul{
            margin-top: 1rem;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 0 2.5rem;
            @media (max-width: 768px) {
                grid-template-columns: 1fr;
            }
            a{
                display: block;
                padding-block: 1rem;
                text-decoration: none;
                @media (any-hover: hover) {
                    &:hover{
                        color: var(--main);
                    }
                }
                p{
                    font-size: 1.3rem;
                    line-height: 1.8;
                }
                .building-name-en{
                    border-bottom: #0f0f0f 1px solid;      
                    font-size: 1.5rem;
                }
            }
        }
    }
}
/*------------------------------*/
.pankuzu{
    @media (max-width: 768px) {
        padding-top: 6rem;
    }
    ul{
        display: flex;
        align-items: center;
        li{
            font-size: 1.4rem;
            @media (max-width: 768px) {
                font-size: 1rem;
            }
            &.current{
                pointer-events: none;
            }
            &+ li{
                &::before{
                    content: "＞";
                    display: inline-block;
                    margin-inline: 1em;
                }
            }
            a{
                text-decoration: none;
                @media (any-hover: hover) {
                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    &+ .property-title{
        padding-top: 6rem;
    }
}
/*------------------------------*/
.property-list{
    padding-bottom: 8rem;
    @media (max-width: 768px) {
        padding-bottom: 5rem;
    }
    .property-region-groups{
        display: flex;
        flex-direction: column;
        row-gap: 6rem;
        @media (max-width: 768px) {
            row-gap: 4rem;
        }
    }
    .property-region-group{
        .property-region-group__title{
            text-align: center;
            margin-bottom: 3rem;
            a,span{
                text-decoration: none;
                color: inherit;
            }
            a{
                display: inline-flex;
                flex-direction: column;
                row-gap: 0.8rem;
            }
        }
        .property-region-group__title-jp{
            display: block;
            font-size: 2.4rem;
            font-weight: 500;
        }
        .property-region-group__title-en{
            display: block;
            font-size: 1.6rem;
            color: inherit;
            letter-spacing: 0.08em;
        }
    }
    .list-wrap{
        li{
            display: flex;
            padding-block: 6rem;
            @media (max-width: 768px) {
                flex-direction: column;
                padding-block: 3rem;
            }
            img{
                width: 30%;
                flex-shrink: 0;
                @media (max-width: 768px) {
                    width: 50%;
                    margin-inline: auto;
                }
            }
            .info-wrap{
                width: 70%;
                padding-inline: 6rem;
                display: flex;
                justify-content: center;
                flex-direction: column;
                row-gap: 5rem;
                position: relative;
                @media (max-width: 768px) {
                    width: 100%;
                    padding-inline: 0;
                    margin-top: 2rem;
                    row-gap: 1.5rem;
                }
                .category-tag{
                     position: absolute;
                     display: flex;
                     justify-content: flex-end;
                     align-items: center;
                     right: 0;
                     top: 0;
                     gap: 1rem;
                     @media (max-width: 768px) {
                        position: static;
                     }
                     p{
                        display: grid;
                        place-content: center;
                        border: 1px solid #515151;
                        min-width: 10rem;
                        padding-inline: 2rem;
                        line-height: 1.8;
                        border-radius: 0.5rem;
                        font-weight: 500;
                        @media (max-width: 768px) {
                            min-width: 5rem;
                            padding-inline: 1rem;
                            font-size: 1.2rem;
                        }
                     }
                }
                .keyword-tag{
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    p{
                        font-size: 1.8rem;
                        font-weight: 500;
                        line-height: 1.3;
                        @media (max-width: 768px) {
                            font-size: 1.4rem;
                        }
                        &+ p{
                            &::before{
                                content: "／";
                                display: inline-block;
                                margin-inline: 0.25em;
                                @media (max-width: 768px) {
                                    margin-inline: 0.15em;
                                }
                            }
                        }
                    }
                }
                .price{
                    font-weight: 700;
                    display: flex;
                    align-items: flex-end;
                    column-gap: 2rem;
                    @media (max-width: 768px) {
                        column-gap: 1rem;
                    }
                    p{
                        font-size: 3.2rem;
                        line-height: 0.875;
                        @media (max-width: 768px) {
                            font-size: 2.8rem;
                        }
                    }
                    span{
                        font-size: 2rem;
                        line-height: 1;
                        @media (max-width: 768px) {
                            font-size: 1.4rem;
                        }
                    }
                }
                .other{
                    display: flex;
                    align-items: center;
                    column-gap: 3rem;
                    font-weight: 500;
                    @media (max-width: 768px) {
                        margin-top: 1rem;
                        column-gap: 1rem;
                    }
                    a{
                        border: 1px solid #515151;
                        text-decoration: none;
                        display: grid;
                        place-content: center;
                        height: 4.6rem;
                        width: calc(50% - 1.5rem);
                        @media (max-width: 768px) {
                            width: calc(50% - 0.5rem);
                            height: 4rem;
                            font-size: 1.4rem;
                        }
                        @media (any-hover: hover) {
                            &:hover{
                                 border-color: var(--main);
                                 color: var(--main);
                            }
                        }
                    }
                }
            }
        }
    }
    #propertyInformation{
        padding-top: 10rem;
        margin-top: -10rem;
        .title{
            font-size: 1.8rem;
            font-weight: 500;
            border-bottom: #515151 1px solid;
            padding-bottom: 2rem;
            @media (max-width: 768px) {
                font-size: 1.6rem;
            }
        }
        dl{
            font-size: 1.8rem;
            line-height: 1.5;
            @media (max-width: 768px) {
                font-size: 1.4rem;
            }
            .row{
                display: flex;
                align-items: center;
                border-bottom: 1px solid #ddd;
                margin-top: 1.5rem;
            }
            dt{
                width: 12rem;
                font-weight: 500;
                flex-shrink: 0;
            }
            dd{
                text-align: right;
                flex-grow: 1;
                .price{
                    display: flex;
                    align-items: flex-end;
                    justify-content: flex-end;
                    margin-bottom: 1rem;
                    column-gap: 0.5rem;
                    p{
                        font-size: 3.2rem;
                        line-height: 1.1;
                        @media (max-width: 768px) {
                            font-size: 2rem;
                        }
                    }
                }
                span{
                    font-size: 1.4rem;
                    @media (max-width: 768px) {
                        font-size: 1.2rem;
                    }
                }
            }
        }
    }
    .other-wrap{
        display: flex;
        align-items: center;
        column-gap: 3rem;
        font-weight: 500;
        margin-top: 6rem;
        @media (max-width: 768px) {
            margin-top: 4rem;
            column-gap: 1rem;
        }
        a{
            border: 1px solid #515151;
            text-decoration: none;
            display: grid;
            place-content: center;
            height: 4.6rem;
            width: calc(50% - 1.5rem);
            @media (max-width: 768px) {
                height: 4rem;
                width: calc(50% - 0.5rem);
                font-size: 1.4rem;
            }
            @media (any-hover: hover) {
                &:hover{
                        border-color: var(--main);
                        color: var(--main);
                }
            }
        }
    }
}
/*------------------------------*/
.property-anchor{
    padding-block: 4rem;
    @media (max-width: 768px) {
        padding-block: 1.5rem;
    }
    ul{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        gap: 3rem;
        a{
            text-decoration: none;
            color: inherit;
            font-size: 1.4rem;
            line-height: 1.5;
            transition: color 0s ease;
            @media (any-hover: hover) {
                &:hover{
                    color: var(--main);
                    text-decoration: underline;
                }
            }
        }
    }
}
/*------------------------------*/
.property-photo{
    --photo-gap: 2rem;
    --photo-slide-width: min(30vw, 56rem);
    padding-block: 6rem 10rem;
    @media (max-width: 768px) {
        padding-block: 4rem 6rem;
    }
    .property-photo__header{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 2rem;
        border-bottom: 1px solid #515151;
        padding-bottom: 2rem;
    }
    .property-photo__title{
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 1.5;
        @media (max-width: 768px) {
            font-size: 1.6rem;
        }
    }
    .property-photo__counter{
        font-size: 1.6rem;
        font-weight: 600;
        line-height: 1;
        display: flex;
        align-items: center;
        column-gap: 0.4rem;
    }
    .property-photo__gallery{
        position: relative;
        margin-top: 3rem;
    }
    .property-photo__track{
        display: flex;
        gap: var(--photo-gap);
        align-items: center;
        overflow-x: auto;
        padding: 1rem 0 2rem;
        padding-inline: calc((100% - var(--photo-slide-width)) / 2);
        scroll-snap-type: x mandatory;
        scroll-padding-inline: calc((100% - var(--photo-slide-width)) / 2);
        -webkit-overflow-scrolling: touch;
    }
    .property-photo__track::-webkit-scrollbar{
        display: none;
    }
    .property-photo__slide{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 0 0 var(--photo-slide-width);
        min-width: var(--photo-slide-width);
        scroll-snap-align: center;
        opacity: 0.35;
        filter: grayscale(0.8);
        transform: scale(0.94);
        transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
    }
    .property-photo__slide.is-active{
        opacity: 1;
        filter: none;
        transform: scale(1);
    }
    .property-photo__image{
        border-radius: 0;
        overflow: hidden;
        background: transparent;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .property-photo__image img{
        display: block;
        max-width: 100%;
        height: auto;
        max-height: 50vw;
        object-fit: contain;
        object-position: center;
    }
    .property-photo__slide figcaption{
        margin-top: 0.8rem;
        font-size: 1.4rem;
        color: #666;
        text-align: center;
    }
    .property-photo__nav{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border: 1px solid #ddd;
        background: rgba(255,255,255,0.9);
        width: 4.2rem;
        height: 4.2rem;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 2.4rem;
        color: #111;
        cursor: pointer;
        z-index: 2;
        transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }
    .property-photo__nav.is-prev{
        left: 0.5rem;
    }
    .property-photo__nav.is-next{
        right: 0.5rem;
    }
    .property-photo__nav:disabled{
        opacity: 0.35;
        cursor: not-allowed;
        pointer-events: none;
    }
    @media (any-hover: hover) {
        .property-photo__nav:not(:disabled):hover{
            background: var(--main);
            color: #fff;
            border-color: var(--main);
        }
    }
    .property-photo__empty{
        margin-top: 2rem;
        text-align: center;
        color: #777;
        font-size: 1.4rem;
    }
    @media (max-width: 768px) {
        --photo-gap: 1.2rem;
        --photo-slide-width: calc(100% - 3rem);
        .property-photo__track{
            padding-inline: calc((100% - var(--photo-slide-width)) / 2);
        }
        .property-photo__slide{
            flex-basis: var(--photo-slide-width);
            min-width: var(--photo-slide-width);
        }
        .property-photo__nav{
            width: 3.6rem;
            height: 3.6rem;
        }
    }
}
/*------------------------------*/