@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;}

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

    hgroup{
        width: 80%;
        margin: 0 auto 11.8rem;
        text-align: center;
        h2{
            display: block;
            width: 248px;
            aspect-ratio: 248/49;
            margin: 0 auto 1.5rem;
        }
        h3{
            width: fit-content;
            margin: 0 auto;
        }
        .wave-line-gray{
            width: 160px;
            margin: 1rem auto 2rem;
        }
        p{
            width: 80%;
            margin: 0 auto;
            line-height: 3.1;
        }
    }
}
#roomtype{
    width: 100%;
    background: var(--cream);
    line-height: 0;
    padding: 0 0 8rem;
    position: relative;
    overflow: hidden;

    .roomtype-inner{
        width: min(1250px,100%);
        height: auto;
        margin: 0 auto 4rem;
        .z-layout{
            .text{
                .btn-more{
                    margin: 1rem 0 0 auto;
                }
                .air-va-p{
                    margin-bottom: 1rem;
                }
                small{
                    text-align: left;
                    display: block;
                    color: var(--orange);
                    white-space: normal;
                    margin-bottom: 1.5rem;
                    line-height: 1.8;

                }
            }
        }
    }
}

#history{
    width: 100%;
    background: var(--gray);
    color: var(--white);
    position: relative;
    padding: 10rem 0 12rem;

    hgroup{
        width: 80%;
        margin: 0 auto 4rem;
        text-align: center;
        h2{
            width: 479px;
            aspect-ratio: 479/66;
            margin: 0 auto;
        }
        h3{
            width: fit-content;
            margin: 0 auto;
        }
        .wave-line-white{
            width: 230px;
            margin: 0.25rem auto 0;
        }
    }
    .history-img{
        width: min(1208px,90%);
        margin:  0 auto;
        .history-img-inner{
            height: auto;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            column-gap: 1.41rem;
            row-gap:  1.41rem;
            .img01{
                width: auto;
                height: 328px;
                aspect-ratio: 655/657;
            }
            .img02{
                width: auto;
                height: 328px;
                aspect-ratio: 853/657;
            }
            .img03{
                width: auto;
                height: 328px;
                aspect-ratio: 821/657;
            }
        }
        .wave-line-white{
            width: 100%;
            margin: 2rem auto;
        }
        p{
            width: 80%;
            margin: 0 auto;
            text-align: center;
            line-height: 3;
            margin-bottom: 2rem;
        }
        .link-airst{
            width: 100%;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            .link-airst-btn{
                width: fit-content;
                min-width: 220px;
                padding: 1rem 1.5rem;
                margin: 1rem;
                text-align: center;
                border: 1px solid var(--white);
            }
        }
    }
}

.padding{
    padding: 6rem 0;
}

@media screen and (max-width:1342px){
    #history .history-img .wave-line-white{
        width: 80%;
    }
}
@media screen and (max-width:1300px){
    .z-layout .text small{
        margin: 0 auto 1rem;
    }
}
@media screen and (max-width:1240px){
    main{
        #roomtype{
            padding: 0;
        }
        #roomtype .roomtype-inner .z-layout .text .btn-more{
            margin: 2rem auto 0;
        }
        #history{
            padding: 8rem 0;
        }
        #room-facility{
            padding: 8rem 0 10rem; 
        }
        #sec-wide{
            .sec-inner{
                margin: 0 auto 8rem;
            }
        }
    }
}
@media screen and (max-width:862px){
    #history{
        .history-img{
            width: 100%;
            .history-img-inner{
                width: min(424px,70%);
                margin: 0 auto;
                column-gap: 0;
                row-gap:  1.41rem;
                .img01,.img02,.img03{
                    width: 100%;
                    height: auto;
                }
            }
            .wave-line-white{
                width: 80%;
                margin: 1.5rem auto 0;
            }
        }
    }
}
@media screen and (max-width:820px){
    #airstream hgroup{
        width: 100%;
        margin: 0 auto 10rem;
        .wave-line-gray{
            width: min(290.01px, 80%);
        }
        h2{
        width: 140.59px;
        }
    }
    #roomtype hgroup{
        margin: 0 auto 5rem;
        h2{
            width: 137.8px;
        }
        .wave-line-gray{
            width: min(290.01px, 80%);
        }
    }
    #history hgroup{
        width: 100%;
        .wave-line-white{
            width: min(290.01px, 80%);
        }
        h2{
        width: 259px;
        }
    }
    #midashi-wide .sec-inner hgroup{
        .meal{
            width: 233.9px;
        }
        .wave-line-gray{
            width: min(290.01px, 80%);
        }
    }
    #midashi-wide .sec-inner hgroup{
        .faclity{
            width: 93.06px;
        }
    }
}
@media screen and (max-width:600px){
    #history .history-img p{
        width: 72%;
    }
}
@media screen and (max-width:540px){
    #airstream{
        padding: 6rem 0 0;
        hgroup {
            margin: 0 auto 6rem;
        }
    }
    #roomtype{
        padding: 0 0 2rem;
        hgroup{
            margin: 0 auto 4rem;
        }
        .roomtype-inner{
            margin: 0 auto;
            .z-layout .text small{
                width: 90%;
            }
        }
        .sec-card2{
            .sp-br{
                display: block;
                line-height: 0;
            }
        }
    }
    #history{
        padding: 6rem 0;
    }
    #room-facility{
        padding: 6rem 0 8rem; 
    }
    #sec-wide{
        .sec-inner{
            margin: 0 auto 6rem;
        }
    }
}