.page-saketour{
    --color-blue: #375aa8;
    --color-yellow: #f7c000;

    --font-oswald: "Oswald", sans-serif;

    background-color: #f5f3e7;
    color: #333;
    font-size: 1.5rem;
    letter-spacing: 0;
}
@media not all and (min-width: 768px){
    .page-saketour{
        font-size: 1.4rem;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ==========================
 * util
*/
.util-text-white{
    color: #fff;
}
.util-text-blue{
    color: var(--color-blue);
}
.util-text-yellow{
    color: var(--color-yellow);
}

.saketour-util-h2{
    display: grid;
    row-gap: 1rem;
    text-align: center;
    line-height: 1;
}
.saketour-util-h2 .__label{
    font-family: var(--font-oswald);
    font-size: 1.4rem;
    font-weight: 400;
    text-transform: uppercase;
}
.saketour-util-h2 .__main{
    font-size: 3rem;
    font-weight: 600;
}
@media not all and (min-width: 768px){
    .saketour-util-h2{
        row-gap: 0.5rem;
    }
    .saketour-util-h2 .__label{
        font-size: 1.1rem;
    }
    .saketour-util-h2 .__main{
        font-size: 2rem;
    }
}

.saketour-util-blue-tag{
    padding-top: calc(1em * 6 / 18);
    padding-inline: calc(1em * 21 / 18);
    padding-bottom: calc(1em * 8 / 18);
    text-align: center;
    background-color: var(--color-blue);
    border-radius: 9999px;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
}
.saketour-util-blue-tag.--small{
    padding-top: calc(1em * 4 / 12);
    padding-inline: calc(1em * 14 / 12);
    padding-bottom: calc(1em * 6 / 12);
    font-size: 1.2rem;
}
@media not all and (min-width: 768px){
    .saketour-util-blue-tag{
        font-size: 1.4rem;
    }
    .saketour-util-blue-tag.--small{
        font-size: 1rem;
    }

}




/* ==========================
 * kv
*/
.saketour-kv{
    position: relative;
    display: grid;
    grid-template: 1 / 1;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 700;
}
@media not all and (min-width: 480px){
    .saketour-kv{
        min-height: 200px;
    }
}
@media (min-width: 480px){
    .saketour-kv{
        width: 100%;
        height: auto;
        aspect-ratio: 1920 / 700;
    }
}

.saketour-kv__bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.saketour-kv__logo{
    z-index: 1;
    position: absolute;
    inset: 0;
    margin: auto;
}
.saketour-kv__logo img{
    position: absolute;
    inset: 0;
    margin: auto;
    translate: -6% 0%;
    width: max(16rem, calc(100% * 550 / 1920));
    height: auto;
    aspect-ratio: 550 / 514;
}


/* ==========================
 * intro
*/
.saketour-intro{
    --car-gatter: clamp(64px, calc(100vw * 172 / 1024), 172px);
    padding-top: 20rem;
    padding-bottom: 24rem;

    /* 背景が水玉のドット */
    --dot-color: #fff4cc;
    --dot-opacity: 0.7;
    --dot: color-mix(in srgb, var(--dot-color), transparent calc(100% - (var(--dot-opacity) * 100%)));

    background-image: radial-gradient(circle, var(--dot) 10px, transparent 10px), radial-gradient(circle, var(--dot) 10px, transparent 10px);

    background-position: 0 0, 2.6rem 3rem;
    background-size: 5.2rem 6rem;
}
@media not all and (min-width: 768px){
    .saketour-intro{
    padding-top: 10rem;
    padding-bottom: 12rem;
    }
}

.saketour-intro__inner{
    display: grid;
}
@media (min-width: 768px){
    .saketour-intro__inner{
        grid-template: 1fr / max(520px, calc(100% * 646 / 1200)) auto;
    }
}

.saketour-intro-contents{
    z-index: 1;
    position: relative;
    align-self: center;
    display: grid;
    row-gap: 1.6rem;
    width: max(280px, 100%);
    padding-top: calc(100% * 40 / 646);
    padding-inline: calc(100% * 72 / 646);
    padding-bottom: calc(100% * 48 / 646);
    background-color: #fff;
    border-radius: 10px;
}
.saketour-intro-contents .__car{
    z-index: 1;
    position: absolute;
    top: 100%;
    right: 0;
    transform: translate(var(--car-gatter), clamp(-56px, calc(100vw * -56 / 1024), -20px));
    display: block;
    width: calc(100% * 461 / 646);
    height: auto;
    aspect-ratio: 461 / 274;
    content: '';
    /* background-image: url('../img/companyinfo/saketour/intro-car.png');
    background-repeat: no-repeat;
    background-size: cover; */
}
@media not all and (min-width: 768px){
    .saketour-intro-contents{
        margin-top: calc(-1 * var(--car-gatter) / 2);
    }
}

.saketour-intro-contents .__title{
    font-size: 3rem;
    font-weight: 600;
    line-height: calc(40 / 30);
}
.saketour-intro-contents .__text{
    font-size: 1.5rem;
    line-height: calc(30 / 15);
}
@media not all and (min-width: 768px){
    .saketour-intro-contents .__title{
        font-size: 2rem;
    }
    .saketour-intro-contents .__text{
        font-size: 1.4rem;
    }
}

.saketour-intro-visual{
    border-radius: 10px;
    overflow: hidden;
}
.saketour-intro-visual img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 80%;
}
@media not all and (min-width: 768px){
    .saketour-intro-visual{
        padding-left: var(--car-gatter);
        margin-right: -15px;
    }
}
@media (min-width: 768px){
    .saketour-intro-visual{
        order: 2;
        width: 50vw;
        min-height: 552px;
        margin-left: -48px;
    }
}


/* ==========================
 * merit
*/
.saketour-merit{
    padding-block: 10rem;
    background-color: var(--color-blue);

    /* 背景が水玉のドット */
    --dot-color: #3456a0;
    --dot-opacity: 0.7;
    --dot: color-mix(in srgb, var(--dot-color), transparent calc(100% - (var(--dot-opacity) * 100%)));

    background-image: radial-gradient(circle, var(--dot) 10px, transparent 10px), radial-gradient(circle, var(--dot) 10px, transparent 10px);

    background-position: 0 0, 2.6rem 3rem;
    background-size: 5.2rem 6rem;
}

.saketour-merit-list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    margin-top: 6rem;
}
.saketour-merit-list li{
    flex: 0 0 32rem;
}
@media not all and (min-width: 480px){
    .saketour-merit-list li{
        flex-basis: 84%; /* 画面幅375pxでちょうどいい塩梅の数値 */
    }
}

.saketour-merit-card{
    position: relative;
    display: grid;
    grid-template: 1fr / 1fr;
    justify-items: center;
    width: 100%;
    text-align: center;
}
.saketour-merit-card > *{
    grid-row: -1 / 1;
    grid-column: -1 / 1;
}
.saketour-merit-card img{
    width: calc(100% * 250 / 320);
    aspect-ratio: 1;
    object-fit: cover;
}

.saketour-merit-card p{
    z-index: 1;
    align-self: end;
    display: grid;
    place-items: center;
    width: 100%;
    height: auto;
    aspect-ratio: 638 / 110;
    background-image: url('../img/companyinfo/saketour/merit-card-obi.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 2rem;
    font-weight: 500;
}
@media not all and (min-width: 768px){
    .saketour-merit-card p{
        font-size: 1.8rem;
    }
}



/* ==========================
 * ツアーコンテンツ全体
*/
.saketour-contents{
    padding-top: 15rem;
    padding-bottom: 20rem;
}
@media not all and (min-width: 768px){
    .saketour-contents{
        padding-top: 10rem;
        padding-bottom: 15rem;
    }
}

/* ==========================
 * ツアー目次
*/
.saketour-index{
    width: 100%;
    padding-top: 6.4rem;
    padding-inline: 7rem;
    padding-bottom: 8rem;
    background-color: #fff;
    border-radius: 3rem;
    border: 1px solid var(--color-blue);
}
@media not all and (min-width: 768px){
    .saketour-index{
        padding-top: 3.2rem;
        padding-inline: 4rem;
        padding-bottom: 4rem;
        border-radius: 2rem;
    }
}

.saketour-index-list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: 4rem;
    column-gap: 3rem;
    margin-top: 6rem;
}
.saketour-index-list li{
    flex: 0 0 24rem;
}
@media not all and (min-width: 768px){
    .saketour-index-list{
        row-gap: 3rem;
        column-gap: 2.4rem;
        margin-top: 3rem;
    }
}

.saketour-index-card{
    display: grid;
    justify-items: center;
    row-gap: 1rem;
}
.saketour-index-card a{
    border: 1px solid var(--color-blue);
    border-radius: 10px;
    overflow: hidden;
}

/* ==========================
 * ルート本体のラッパー
*/
.saketour-route{
    display: grid;
    row-gap: 6rem;
    padding-top: 20rem;
}
@media not all and (min-width: 768px){
    .saketour-route{
        row-gap: 4rem;
        padding-top: 12rem;
    }
}

/* ==========================
 * ルート本体のヘッド要素
*/
.route-heading{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    row-gap: 5rem;
    column-gap: 10rem;
}
.route-heading__thumbnail{
    flex: 0 1 52rem;
}
.route-heading__contents{
    /* flex: 1 0 auto; */
    display: grid;
    row-gap: 1.6rem;
}
@media not all and (min-width: 480px){
    .route-heading__thumbnail{
        flex-basis: 100%;
    }
}

.route-title{
    display: flex;
    align-items: center;
    row-gap: 0.5rem;
    column-gap: 2rem;
    font-size: 3rem;
    font-weight: 400;
}
@media not all and (min-width: 768px){
    .route-title{
        flex-wrap: wrap;
    }
}
@media not all and (min-width: 480px){
    .route-title{
        font-size: 2.4rem;
    }
}

.route-price{
    font-size: 3rem;
}
.route-price .__tax{
    font-size: calc(1em * 13 / 30);
}
@media not all and (min-width: 480px){
    .route-price{
        font-size: 2.4rem;
    }
}

.route-available{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    row-gap: 0.5rem;
    column-gap: 2rem;
    line-height: 1;
}
.route-available dt{
    padding-block: calc(1em * 4 / 12);
    padding-inline: calc(1em * 8 / 12);
    border: 1px solid currentColor;
    font-size: 1.2rem;
}
.route-available dd{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: 0.5rem;
}
.route-available dd span{
    display: grid;
    place-items: center;
    width: 3rem;
    height: auto;
    padding-bottom: 2px;
    aspect-ratio: 1;
    background-color: var(--color-blue);
    border-radius: 50%;
    font-family: var(--font-oswald);
    color: #fff;
    font-size: 1.4rem;
}
.route-available .__caution{
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.25em;
    font-size: 1.1rem;
    line-height: 1.3;
}
.route-available .__caution::before{
    content: '※';
    font-size: 1em;
}
@media not all and (min-width: 768px){
    .route-available{
        grid-template-columns: 1fr;
        row-gap: 0.5rem;
    }
    .route-available dt{
        width: fit-content;
        margin-bottom: 0.5rem;
    }
    .route-available .__caution{
        grid-column: unset;
        font-size: 1rem;
    }
}
@media not all and (min-width: 480px){
    .route-available .__caution br{
        display: none;
    }
}


/* ==========================
 * ルート本体の目次
*/
.route-spot{
    width: min(816px, calc(100% - 20px));
    margin-inline: auto;
    padding-block: 3.2rem;
    padding-inline: 4.5rem;
    background-color: #fff;
    border-radius: 1rem;
}
.route-spot .saketour-util-blue-tag{
    width: fit-content;
    margin-inline: auto;
    font-weight: 500;
}
@media not all and (min-width: 768px){
    .route-spot{
        /* ここのpaddingの数値は .saketour-index から拝借 */
        padding-top: 3.2rem;
        padding-inline: 4rem;
        padding-bottom: 4rem;
    }
}

.route-spot-list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    row-gap: 2rem;
    column-gap: 3rem;
    width: fit-content;
    margin-top: 2rem;
    margin-inline: auto;
}
.route-spot-list li{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 1rem;
    font-size: 2rem;
    line-height: 1;
    font-weight: 500;
}
.route-spot-list li span{
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: auto;
    aspect-ratio: 1;
    background-color: #333;
    border-radius: 50%;
    font-family: var(--font-oswald);
    color: #fff;
    font-size: 1.2rem;
}
@media not all and (min-width: 768px){
    .route-spot-list li{
        font-size: 1.8rem;
    }
    .route-spot-list li span{
        width: 2.4rem;
        font-size: 1rem;
    }
}



/* ==========================
 * ルート本体のコンテンツ
*/
/* レイアウト周り */
.route-contents{
    --label-width: 10rem;
    position: relative;
    display: grid;
    grid-template-columns: var(--label-width) auto;
    row-gap: 6rem;
    column-gap: 3rem;
}
.route-contents::before{
    position: absolute;
    top: 0;
    left: calc(var(--label-width) * 0.5);
    bottom: 0;
    display: block;
    width: 1px;
    height: 100%;
    content: '';
    background-color: var(--color-yellow);
}
.route-contents__item{
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
}
@media not all and (min-width: 768px){
    .route-contents{
        --label-width: 6.4rem;
        row-gap: 4rem;
        column-gap: 2rem;
    }
}


.route-path--terminal{
    align-items: center;
}

.route-path__marker{
    position: relative;
    /* justify-items: center; */
}
@media not all and (min-width: 480px){
    .route-path--spot .route-path__marker{
        /* コンテンツの描画領域を広げるため、スマホのときだけタイムラインの丸数字消す＆白背景で囲む。 */
        display: none;
    }
}

.route-path__body{
    display: grid;
    row-gap: 1.6rem;
}
@media not all and (min-width: 480px){
    .route-path--spot .route-path__body{
        /* コンテンツの描画領域を広げるため、スマホのときだけタイムラインの丸数字消す＆白背景で囲む。 */
        position: relative;
        grid-column: -1 / 1;
        row-gap: 2rem;
        padding-top: 2rem;
        padding-inline: 2rem;
        padding-bottom: 3.2rem;
        border-radius: 2rem;
        background-color: #fff;
        /* border: 1px solid var(--color-blue); */
    }
}

.route-path--spot__flex{
    display: flex;
    /* flex-wrap: wrap; */
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: 4rem;
    column-gap: 8rem;
}
.route-path--popin__flex{
    display: grid;
    grid-template-columns: repeat(2, min(100%, 25rem));
    column-gap: 5.4rem;
}
@media not all and (min-width: 768px){
    .route-path--spot__flex{
        display: flex;
        /* flex-wrap: wrap; */
        align-items: flex-start;
        justify-content: flex-start;
        row-gap: 4rem;
        column-gap: 8rem;
    }
    .route-path--popin__flex{
        display: grid;
        grid-template-columns: min(80%, 25rem);
        row-gap: 5.4rem;
    }
}

.route-path--spot__visual{
    /* flex: 0 0 auto; */
    flex: 0 0 clamp(300px, 45%, 480px);
}
.route-path--spot__contents{
    /* flex: 1 0 auto; */
}

.route-cta-button{
    text-align: center;
}


@media not all and (min-width: 768px){
    .route-path--spot__flex{
        flex-wrap: wrap;
    }
}
@media not all and (min-width: 640px){
    .route-path--spot__visual{
        flex: 1 0 100%;
    }
    .route-path--spot__contents{
        flex: 1 0 100%;
    }
}



/* 小物系 */
.route-path-terminal-tag{
    display: grid;
    place-items: center;
    width: 100%;
    padding-top: calc(1em * 12 / 16);
    padding-bottom: calc(1em * 14 / 16);
    background-color: var(--color-yellow);
    border-radius: 9999px;
    font-family: var(--font-oswald);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 500;
}
@media not all and (min-width: 768px){
    .route-path-terminal-tag{
        font-size: 1.4rem;
    }
}

.route-path-num{
    display: grid;
    place-items: center;
    width: 4rem;
    height: auto;
    aspect-ratio: 1;
    margin-inline: auto;
    background-color: #333;
    border-radius: 50%;
    font-family: var(--font-oswald);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 500;
}
@media not all and (min-width: 768px){
    .route-path-num{
        width: 3rem;
        font-size: 1.2rem;
    }
}

.spot-title{
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-start;
    column-gap: 1.2rem;
    line-height: 1;
}
.spot-title .__label{
    font-family: var(--font-oswald);
    color: var(--color-blue);
    font-size: 1.3rem;
}
.spot-title .__name{
    font-size: 2.4rem;
    font-weight: 500;
}
@media not all and (min-width: 768px){
    /* .spot-title .__label{
        font-size: 1.1rem;
    } */
    .spot-title .__name{
        font-size: 2rem;
    }
}

.spot-copy{
    margin-bottom: 0.5em;
    font-size: 2rem;
    font-weight: 500;
    line-height: calc(30 / 20);
}
@media not all and (min-width: 768px){
    .spot-copy{
        font-size: 1.8rem;
    }
}

.spot-text{
    font-size: 1.5rem;
    line-height: calc(26 / 15);
}
@media not all and (min-width: 768px){
    .spot-text{
        font-size: 1.4rem;
    }
}

.spot-info{
    margin-top: 1.25rem;
}

.spot-info-label{
    --hukidashi-size: 6px;
    z-index: 0;
    position: relative;
    text-align: center;
    width: 17rem;
    padding-top: calc(1em * 6 / 14);
    padding-bottom: calc((1em * 8 / 14) + var(--hukidashi-size));
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
}
.spot-info-label::before{
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: calc(100% - var(--hukidashi-size));
    content: '';
    background-color: var(--color-yellow);
    border-radius: 9999px;
}
.spot-info-label::after{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: var(--hukidashi-size);
    height: auto;
    aspect-ratio: 1;
    margin-inline: auto;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    content: '';
    background-color: var(--color-yellow);
}
@media not all and (min-width: 768px){
    .spot-info-label{
        --hukidashi-size: 6px;
        width: 12rem;
        font-size: 1.2rem;
    }
}

.spot-info-list{
    display: grid;
    grid-template-columns: 7rem 1fr;
    column-gap: 4rem;
    margin-top: 1rem;
    color: #898989;
    line-height: 1.2;
}
.spot-info-list .__row{
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
    align-items: center;
    padding-top: 1.4rem;
    padding-inline: 1rem;
    padding-bottom: 1.6rem;
    border-top: 1px solid #ccc;
}
.spot-info-list .__row:last-child{
    border-bottom: 1px solid #ccc;
}
.spot-info-list dt{
    font-size: 1.2rem;
}
.spot-info-list dd{
    min-width: 0;
    font-size: 1.4rem;
}
.spot-info-list dd a{
    word-wrap: break-word; /* 長いURLを折り返す */
}
@media not all and (min-width: 768px){
    .spot-info-list{
        grid-template-columns: 1fr;
        margin-top: 0.5rem;
    }
    .spot-info-list .__row{
        grid-template-columns: unset;
        row-gap: 0.5rem;
        padding-top: 1rem;
        padding-inline: 1rem;
        padding-bottom: 1.4rem;
    }
    .spot-info-list dt{
        font-size: 1.1rem;
    }
    .spot-info-list dd{
        font-size: 1.3rem;
    }
}


.popin-card{
    position: relative;
    width: 100%;
    padding-top: 1rem;
    padding-inline: 1rem;
    padding-bottom: 1.6rem;
    background-color: var(--color-blue);
    border-radius: 10px;
}
.popin-card::before{
    /* ちょっと寄り道のラベル */
    z-index: 1;
    position: absolute;
    bottom: 100%;
    left: 100%;
    transform: translate(-50%, 50%);
    width: calc(100% * 87 / 250);
    height: auto;
    aspect-ratio: 87 / 80;
    content: '';
    background-image: url('../img/companyinfo/saketour/popin-card-label.png');
    background-repeat: no-repeat;
    background-size: contain;
}
.popin-card img{
    width: 100%;
    height: auto;
    aspect-ratio: 230 / 144;
    object-fit: cover;
}
.popin-card figcaption{
    text-align: center;
    margin-top: 1.6rem;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
}
@media not all and (min-width: 768px){
    .popin-card figcaption{
        margin-top: 1rem;
        font-size: 1.6rem;
    }

}

.popin-card:nth-child(n + 2)::after{
    /* 西湘南エリア 3Hコース POPIN */
    position: absolute;
    top: 50%;
    left: -2.7rem;
    transform: translate(-50%, -50%);
    display: block;
    content: 'or';
    font-family: var(--font-oswald);
    font-size: 2rem;
}
@media not all and (min-width: 768px){
    .popin-card:nth-child(n + 2)::after{
        position: absolute;
        top: -2.8rem;
        left: 50%;
        font-size: 2rem;
    }
}

.popin-nocard{
    /* こま参道 */
    align-self: center;
    font-size: 2rem;
}
@media not all and (min-width: 768px){
    .popin-nocard{
        font-size: 1.6rem;
    }
}

.route-cta-button a{
    z-index: 0;
    position: relative;
    display: block;
    width: fit-content;
    margin-inline: auto;
    opacity: 1 !important;
    transform: translateY(0);
    transition: transform 0.3s ease;
}
.route-cta-button a::before{
    z-index: -1;
    position: absolute;
    inset: 0;
    transform: translateY(5px);
    margin: auto;
    display: block;
    border-radius: 9999px;
    background-color: #192a55;
    content: '';

    transition: transform 0.3s ease;
}
.route-cta-button a:hover{
    transform: translateY(5px);
}
.route-cta-button a:hover::before{
    transform: translateY(0);
}
@media not all and (min-width: 768px){
    .route-cta-button a{
        width: 24rem;
    }
}



/* ==========================
 * fadein
*/
.js-fadein{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.js-fadein.is-visible{
    opacity: 1;
    transform: translateY(0);
}


.pagetop-button{
    z-index: 100;
    position: fixed;
    right: 4rem;
    bottom: 4rem;
}
@media not all and (min-width: 768px){
    .pagetop-button{
        width: 4rem;
        height: auto;
        aspect-ratio: 1;
        right: 2rem;
        bottom: 2rem;
    }
}