@charset "UTF-8";
/*===========================================
General Info / City, Eat, Tour
===========================================*/

/*-------------------------------------------
City Attraction
-------------------------------------------*/
.attractions{
    margin-top:-15px;
    --att-img-py:20px;
    --att-img-px:30px;
}
    .attraction{
        padding:15px 0;
    }
        .attraction__title{
            background-color:rgba(var(--primary-rgb), .07);
            border-left:2px solid var(--primary-color);
            color:#000;
            font-size:1.25rem;
            line-height:1.2;
            padding:10px;
            margin:0 0 .75em;
            width:100%;
        }
        .attraction__content{
            display:flex;
            flex-wrap:wrap;
            position:relative;
            margin:calc(0px - var(--att-img-py)) calc(0px - var(--att-img-px)) 0;
        }
            .attraction__content > div{
                width:50%;
                padding:var(--att-img-py) var(--att-img-px);
                position:relative;
            }
            .attraction__desc{
                align-self:center;
                line-height:1.7;
            }
            .img2 .attraction__desc{
                width:100%;
            }
            .img2 .attraction__img{
                overflow:hidden;
            }
                .attraction__img img{
                    display:block;
                    width:100%;
                    aspect-ratio:12 / 8;
                    width:100%;
                    object-fit:cover;
                }
.dataSource{
    border-top:1px solid rgba(0,0,0,.1);
    font-size:.875rem;
    margin-top:20px;
    padding-top:20px; padding-left:90px;
    position:relative;
}
    .dataSource .label{
        position:absolute; left:0;
    }
    .dataSource__list{
        list-style:none;
        margin:0;
        padding:0;
    }
        .dataSource__list > li{
            margin-bottom:.35em;
        }
@media screen and (max-width:1024px){
    .attractions{
        --att-img-py:20px;
        --att-img-px:15px;
    }
}
@media screen and (max-width:667px){/* i6, i7, i8 Landscape */
    .attractions{
        --att-img-py:10px;
    }
        .attraction__content > div{
            width:100%;
        }
}
@media screen and (max-width:576px){
    .dataSource{
        padding-left:0;
    }
        .dataSource .label{
            position:static;
        }
}
@media screen and (max-width:320px){/* i5, SE */
    .attractions{
        --att-img-py:20px;
        --att-img-px:10px;
    }
}

/*-------------------------------------------
Tour
-------------------------------------------*/
.tour__service{
    --logo-width:200px;
    position:relative;
    padding-left:calc(var(--logo-width) + 40px);
}
.tour__service:nth-of-type(n+2){
    margin-top:40px;
}
    .tour__service .part__title{
        position:absolute; left:0;
        background-position:0 0;
        background-repeat:no-repeat;
        background-size:contain;
        overflow:hidden;
        text-indent:-99999em;
    }
    .klook .part__title{
        aspect-ratio:20 / 6;
        background-image:url(../images/general/tour/logo_klook.svg);
        width:var(--logo-width);
    }
    .kkday .part__title{
        aspect-ratio:20 / 8;
        background-image:url(../images/general/tour/logo_kkday.svg);
        width:var(--logo-width);
    }
    .tour__attractions{
        display:flex;
        margin:0 -10px;
    }
        .tour__attraction{
            width:33.3333%;
            position:relative;
            padding:0 10px 10px;
        }
            .tour__attraction a{
                display:block;
                color:#000;
                font-weight:700;
            }
            .tour__attraction a:focus,
            .tour__attraction a:hover{
                color:var(--hover-color);
            }
            .tour__img{
                position:relative;
                aspect-ratio:8 / 6;
                background-color:#f7f7f7;
                background-position:center;
                background-repeat:no-repeat;
                background-size:cover;
                box-shadow:0 10px 15px -10px rgba(0,0,0,.4);
                margin-bottom:8px;
            }
@media screen and (max-width:1180px){/* iPad Air Landscape */
    .tour__service{
        padding-left:0;
    }
        .tour__service .part__title{
            position:static;
            margin:0 auto 15px;
        }
}
@media screen and (max-width:820px){/* iPad Air and Portrait */
    /* .tour__service{ */
        /* --logo-width:180px; */
        /* padding-left:calc(var(--logo-width) + 50px); */
    /* } */
        /* .tour__service .part__title{ */
            /* position:absolute; */
        /* } */
        .tour__attractions{
            flex-wrap:wrap;
            margin:0 4vw;
        }
            .tour__attraction{
                width:100%;
                padding:0 0 30px;
            }
                .tour__img{
                    aspect-ratio:8 / 5;
                }
}