@charset "utf-8";
:root{
    --white: #ffffff;
    --black: #333333;
    --orange: #f46e45;
    --orangeOff: #ea8a59;
    --navy: #2a315b;
    --gray: #717070;
    --gray-b3: #b3b3b3;
    --warm-gray: #e1d8d1;
    --cream: #fdf5e8;
    --info-title: #f9ebd7;

    --Caslon: 'Libre Caslon Text',serif;
    --ZenKakuGothicNew: "Zen Kaku Gothic New","Yu Gothic","Meiryo","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
    --NotoSansJP: "Noto Sans JP","Yu Gothic","Meiryo","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
}
/* topページのローディングのためのcssを打ち消し。全下層ページに必要 */
#header,#mainvisual,main,footer{opacity: 1;}

#access{
    width: 100%;
    background: var(--cream);
    padding: 8rem 0 2rem;
    line-height: 0;

    hgroup{
        width: fit-content;
        margin: 0 auto 10rem;
        text-align: center;
        line-height: 2;

        h2{
            width: 180px;
            aspect-ratio: 180/52;
            margin: 0 auto 1rem;
        }
        .wave-line-gray{
            width: 78%;
            margin: 0 auto 1rem;
        }
        p{
            line-height: 3.1;
        }
    }

    .map{
        width: min(966px,100%);
        aspect-ratio: 966/442;
        margin: 0 auto;
        iframe{
            width: 100%;
            height: 100%;
        }
    }

    .btn-container{
        width: min(966px,100%);
        margin: 0 auto;
        .btn-more{
            width: 150px;
            height: 52px;
            margin: 0 auto 0 0;
            position: relative;
            a{
                font-size: 1rem;
                white-space: nowrap;
                position: relative;
                span{
                    position: absolute;
                    left: 0.8rem;
                }
                img{
                    width: 10px;
                    margin-right: -0.8rem;
                }
            }
        }
    }
}

#z-container{
    width: 100%;
    background: var(--cream);
    padding: 10rem 0 0;
    line-height: 0;
    overflow: hidden;
    .z-layout{
        .text{
            padding: 2.5rem 3dvw 0 0;
            h4{
                text-align: left;
                color: var(--gray);
                .wave-line-gray{
                    margin: 1rem 0;
                }
            }
            .border-row{
                width: 55%;
                height: 1px;
                background: var(--gray);
                margin: 1rem 0;
            }
            p{
                line-height: 2;
                margin-bottom: 1rem;
            }
            small{
                font-size: 0.875rem;
                color: var(--orange);
                line-height: 1.6;
            }
        }
    }
}

#tothehotel{
    width: 100%;
    background: var(--cream);
    padding: 8rem 0 0;
    line-height: 0;

    hgroup{
        width: fit-content;
        margin: 0 auto 6rem;
        text-align: center;
        line-height: 2;

        h2{
            width: 494px;
            aspect-ratio: 494/48;
            margin: 0 auto 1rem;
        }
        .wave-line-gray{
            width: 78%;
            margin: 0 auto 1rem;
        }
    }

    .maishima-map{
        display: block;
        width: min(1096px,90%);
        aspect-ratio: 4096/2166;
        margin: 0 auto 8rem;
        img{width: 100%;}
    }
}

.midashi,.midashi02{
    width: min(1096px,90%);
    margin: 0 auto;
    .midashi-inner{
        width: fit-content;
        margin: 0 auto 4rem 0;
        h3{
            font-size: 1.5rem;
            line-height: 1.6;
            color: var(--orange);
            .sp-br{display: none;}
        }
        .wave-line-gray{
            width: 100%;
            margin: 0 auto 1rem;
        }
    }
    .transport{
        display: block;
        width: min(840px,90%);
        aspect-ratio: 4096/2476;
        margin: 0 auto 6rem;
    }
    
}

#info-list{
    width: 100%;
    background: var(--cream);
    padding: 0 0 6rem;
    line-height: 0;

    .list-inner{
        width: min(790px,90%);
        height: auto;
        margin: 0 auto;
        position: relative;
        
        .info-title{
            font-size: 1.17rem;
            line-height: 2;
            color: var(--orange);
            background: var(--info-title);
            text-align: center;
        }
        .info-content{
            background: var(--white);
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 3rem;
            padding: 1.25rem 2rem;
            
            .p-top{
                width: fit-content;
                line-height: 2;
                white-space: nowrap;
                text-align: left;
                margin: 0 2rem;
            }
            
            .p1{
                width: 186px;
                line-height: 2;
                white-space: nowrap;
                text-align: left;
            }
            .p2{
                width: 52%;
                line-height: 1.8;
                .br-sp{
                    display: block;
                }
                span{
                    font-size: 14px;
                    color: var(--orange);
                    line-height: 0;
                }
            }
        }
        .border-gray{
            width: 88%;
            height: 1px;
            margin: 0 auto;
            background: var(--gray);
            position: absolute;
            left: 6%;
        }

        /* ▼ accessページの追加テキスト */
        .addition-text{
            background: var(--white);
            padding: 0 2rem 2rem;
            small{
                display: block;
                width: fit-content;
                margin: 0 auto;
                font-size: 0.875rem;
                color: var(--orange);
                text-align: left;
                line-height: 1.8;
                font-weight: normal;
            }
        }
    }
}

.app-links{
    background: var(--cream);
    color: var(--orange);
    .line-bubble{
        width: min(528px,90%);
        aspect-ratio: 1183/226;
        background: url(../img/access/line-bubble.png) center/cover no-repeat;
        margin: 0 auto 0.5rem;
        padding-top: 0.5rem;
        p{
            width: fit-content;
            white-space: nowrap;
            margin: 0 auto;
            text-align: center;
            .br-sp{
                display: none;
            }
        }
    }
    a{
        display: block;
        width: min(498px,90%);
        aspect-ratio: 498/107;
        margin: 0 auto;
    }
}

#access-card{
    height: auto;
    background: var(--cream);
    padding-top: 6rem;
    .card-container{
        width: min(1102px,90%);
        margin: 0 auto -1rem;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.5rem;
        .item{
            width: 257px;
            margin-bottom: 2rem;
            img{
                width: 100%;
                height: auto;
                aspect-ratio: 257/172;
                border-radius: 20px;
            }
            
        }
    }
    small{
        display: block;
        width: fit-content;
        padding: 0 2rem;
        margin: 1.5rem auto;
        color: var(--orange);
    }
    .link-airst{
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        .link-airst-btn{
            width: 324px;
            padding: 1rem 0;
            margin: 1rem;
            line-height: 1.6;
            text-align: center;
            border: 1px solid var(--black);
        }
    }
}

#courtesy-bus{
    width: 100%;
    background: var(--cream);
    padding: 8rem 0 0;
    line-height: 0;

    hgroup{
        width: fit-content;
        margin: 0 auto 6rem;
        text-align: center;
        line-height: 2;

        h2{
            width: 337px;
            aspect-ratio: 337/63;
            margin: 0 auto;
        }
        .wave-line-gray{
            width: 78%;
            margin: 0 auto 1rem;
        }
    }

    .bus-card{
        width: min(900px,90%);
        margin: 0 auto 6rem;
        display: flex;
        justify-content: center;
        gap: 2rem;
        img{
            width: min(490px,100%);
            aspect-ratio: 490/315;
            border-radius: 20px
        }
        .text{
            width: calc(100% - 490px);
            position: relative;
            p{
                line-height: 2.5;
                padding: 0.5rem 0 1rem;
            }
            .link-airst{
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 1.5rem;
                position: absolute;
                bottom: 0;
                
                .link-airst-btn{
                    width: 324px;
                    padding: 1rem 0;
                    line-height: 1.2;
                    text-align: center;
                    border: 1px solid var(--black);
                    flex-shrink: 0;
                }
            }
        }
    }

    .midashi02{
        width: min(852px,90%);
        margin: 0 auto;
        .midashi-inner{
            width: fit-content;
            margin: 0 auto 4rem 0;
            h3{
                font-size: 1.5rem;
                line-height: 1.6;
                color: var(--orange);
                .sp-br{
                    display: none;
                }
            }
            .wave-line-gray{
                width: 100%;
                margin: 0 auto 1rem;
            }
        }
        .transport{
            width: min(840px,90%);
            aspect-ratio: 840/508;
            margin: 0 auto 6rem;
        }
        
    }

    .card-container{
        width: min(852px,90%);
        margin: 0 auto -1rem;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 2rem;
        .item{
            width: 257px;
            margin-bottom: 4rem;
            img{
                width: 100%;
                height: auto;
                aspect-ratio: 257/172;
                border-radius: 20px;
                margin-bottom: 0.5rem;
            }
            p{
                line-height: 1.8;
            }
            
        }
    }
    p{
        width: min(852px,90%);
        line-height: 2.2;
        margin: 0 auto;
    }
}

#bbq-menu{
    position: relative;
    padding-top: 8rem;

    hgroup{
        width: fit-content;
        margin: 0 auto 6rem;
        text-align: center;
        line-height: 2;
        h2{
            width: 290px;
            aspect-ratio: 290/63;
            margin: 0 auto;
        }
        .wave-line-gray{
            width: 78%;
            margin: 0 auto 1rem;
        }
        small{
            display: block;
            width: fit-content;
            font-size: 0.875rem;
            color: var(--orange);
            line-height: 1.6;
            padding: 0 2rem;
            margin: 0 auto;
        }
    }

    .bbq-menu{
        .bbq-menu-container{
            display: flex;
            align-items: stretch;

            .bbq-item{
                display: flex;
                flex-direction: column;

                .item-img{
                    flex-shrink: 0;
                }

                .item-text{
                    display: flex;
                    flex-direction: column;
                    flex: 1;

                    h4{
                        display: flex;
                        justify-content: space-between;
                        align-items: baseline;
                    }

                    span{
                        display: block;
                        font-size: 1rem;
                        color: var(--gray);
                    }

                    p{
                        flex: 1;
                    }
                }

                .link-airst{
                    width: fit-content;
                    margin: 0 auto;
                    padding: 1rem 2rem;
                    border: 1px solid var(--gray);
                }
            }
        }
    }
}
#faq{
    padding: 6rem 0 10rem;
}

@media screen and (max-width: 1300px){
    #z-container{
        .z-layout{
                margin-bottom: 2rem;
            .text{
                width: 60%;
                padding: 0;
                margin: 0 auto;
                h4{
                    text-align: center;
                    .wave-line-gray{
                        width: min(600px,100%);
                        margin: 1rem auto;
                    }
                }
                p{
                    width: min(382px,80%);
                    margin: 0 auto;
                }
                .bottom-space{
                    margin-bottom: 1.5rem;
                }
                .border-row{
                    width: min(600px,100%);
                    margin: 1rem auto;
                }
                small{
                    display: block;
                    width: min(600px, 100%);
                }
            }
        }
    }
}

@media screen and (max-width:1223px){
    #access-card {
        .card-container {
            width: min(546px, 90%);
            margin: 0 auto -1rem;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 2rem;
        }
    }
}
@media screen and (max-width:1110px){
    main{
        #bbq-menu{
            hgroup{
                width: 100%;
                margin: 0 auto 4rem;
                h2{
                    width: 163.18px;
                }
                .wave-line-gray{
                    width: min(290.01px, 80%);
                }
            }

            .bbq-menu .bbq-menu-container{
                .bbq-item{
                    .item-text{
                        h4{
                            font-size: 1.25rem;
                            line-height: 1.4;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                        }
                        span{
                            display: block;
                            font-size: 1rem;
                            color: var(--gray);
                        }
                    }
                    .link-airst{
                        width: fit-content;
                        margin: 0 auto;
                        padding: 1rem 2rem;
                        border: 1px solid var(--gray);
                    }
                }
            }
        }
    }
    .midashi,.midashi02{
        .midashi-inner{
            margin: 0 auto 4rem 0;
        }
    }
}

@media screen and (max-width:982px){
    #access{
        .btn-container{
            .btn-more{
                margin: 0 auto;
            }
        }
    }
}

@media screen and (max-width:950px){
    main{
        #courtesy-bus{
            .bus-card{
                width: 100%;
                margin: 0 auto 6rem;
                flex-direction: column;
                gap: 0;
                img{
                    width: 90%;
                    margin: 0 auto;
                }
                .text{
                    width: 100%;
                    margin: 0 auto;
                    p{
                        padding: 0 5%;
                        margin: 0 auto 2rem;
                    }
                    .link-airst{
                        position: static;
                        width: fit-content;
                        margin: 0 auto;
                    }
                }
            }
        }
    }
}

@media screen and (max-width:820px){
    main{
        #access{
            hgroup{
                width: 100%;
                margin: 0 auto 6rem;

                h2{
                    width: 128px;
                    aspect-ratio: auto;
                }

                .wave-line-gray{
                    width: min(290.01px, 80%);
                    margin: 0 auto 1rem;
                }
                p{
                    width: 80%;
                    margin: 0 auto;
                }
            }
            .map {
                aspect-ratio: 4/3;
            }
        }
        #z-container{
            padding: 8rem 0 0;
            .z-layout{
                .text{
                    margin-bottom: 0;
                }
            }
        }
        #tothehotel{
            padding: 6rem 0 0;
            hgroup{
                width: 100%;
                margin: 0 auto 4rem;

                h2{
                    width: 278px;
                    aspect-ratio: auto;
                }

                .wave-line-gray{
                    width: min(290.01px, 80%);
                }
            }
        }

        #courtesy-bus{
            padding: 6rem 0 0;
            hgroup{
                width: 100%;
                margin: 0 auto 4rem;
                h2{
                    width: 190px;
                }
                .wave-line-gray{
                    width: min(290.01px, 80%);
                }
            }

            .card-container{
                width: min(852px,90%);
                margin: 0 auto;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                gap: 1.5rem;
                .item{
                    width: 257px;
                    margin-bottom: 2rem;
                    img{
                        width: 100%;
                        aspect-ratio: 257/172;
                        border-radius: 20px;
                    }
                    p{
                        line-height: 1.8;
                    }
                    
                }
            }
            p{
                width: min(852px,90%);
                line-height: 2.5;
                margin: 0 auto;
            }
        }
    }
}
@media screen and (max-width: 712px) {
    #bbq-menu .bbq-menu .bbq-menu-container .bbq-item {
        width: 80%;
        margin: 0 0 5rem;
    }
}

@media screen and (max-width:708px){
    main{
        #courtesy-bus{
            hgroup{
                margin: 0 auto 2rem;
            }
            .midashi02{
                .midashi-inner{
                        width: 100%;
                        margin: 0 auto 2rem;
                        text-align: center;
                }
            }
        }
        .midashi{
            .midashi-inner{
                width: 100%;
                margin: 0 auto 2rem;
                text-align: center;
            }
            .transport{
                aspect-ratio: 1739/4096;
                margin: 0 auto 6rem;
            }
        }
        .transport{
            width: min(840px,90%);
            aspect-ratio: 840/508;
            margin: 0 auto 6rem;
        }
        #info-list{
            .list-inner{
                .info-content{
                    flex-direction: column;
                    padding: 1.25rem 0;
                    gap: 0;
                    
                    .p1{
                        width: 100%;
                        line-height: 2;
                        white-space: nowrap;
                        text-align: center;
                    }
                    .p2{
                        width: 100%;
                        text-align: center;
                        line-height: 2;
                        .br-sp{
                            display: block;
                        }
                        span{
                            white-space: nowrap;
                        }
                    }
                }
                .sp-flex{
                    flex-direction: row;
                }
                .border-gray{
                    width: 88%;
                    height: 1px;
                    margin: 0 auto;
                    background: var(--gray);
                    position: absolute;
                    left: 6%;
                }
                .addition-text{
                    background: var(--white);
                    padding: 0 2.5rem 1.5rem;
                }
            }
        }
    }
}

@media screen and (max-width:620px){
    main{
        #access-card .card-container .item,
        #courtesy-bus .card-container .item{
            width: 80%;
        }
    }
}
@media screen and (max-width:540px){
    main{
        #access{
            padding: 6rem 0 0;
        }
        
        #tothehotel{
            hgroup{
                margin: 0 auto 2rem;
            }
        }
        .midashi,.midashi02{
            .midashi-inner{
                h3{
                    font-size: 1.25rem;
                    .sp-br{
                        display: block;
                        font-size: 0;
                    }
                }
            }
        }
        .app-links{
            .line-bubble{
                aspect-ratio: 1206/451;
                background: url(../img/access/line-bubble-sp.png) center/cover no-repeat;
                margin: 0 auto 0.5rem;
                padding-top: 0.5rem;
                p{
                    position: relative;
                    top: clamp(0px, calc(0.124444 * (100vw - 360px)), 22.4px);
                    .br-sp{
                        height: 0;
                        display: block;
                    }
                }
            }
        }
        #courtesy-bus{
            .card-container{
                .item{
                    p{
                        width: 90%;
                    }
                }
            }
            p{
                width: 80%;
            }
        }
        #bbq-menu .bbq-menu .bbq-menu-container{
            padding-bottom: 4rem;
        }
        #faq{
            padding: 6rem 0 7rem;
        }
    }
}