/* style-50-media.css */


/* =========================
   表示切替（ユーティリティ）
========================= */
.none_m {
    @media screen and (min-width:481px) {
        display: var(--display-none);
    }
}

.none_t {
    @media screen and (min-width:768px) {
        display: var(--display-none);
    }
}

.none_p {
    @media screen and (min-width:1024px) {
        display: var(--display-none);
    }
}

/* =========================
   全体（文字サイズ）
========================= */
* {
    @media screen and (min-width:768px) {
        font-size: var(--font-size-tablet);
    }

    @media screen and (min-width:1024px) {
        font-size: var(--font-size-base);
    }
}

/* =========================
   wrapper
========================= */
.wrapper2 {
    @media screen and (min-width:768px) {
        width: var(--wrapper2-width-tablet);
        margin: 0 auto;
        padding-top: var(--space-050em);
    }

    @media screen and (min-width:1024px) {
        width: var(--wrapper2-width-pc);
        margin: 0 auto;
        padding-top: var(--space-050em);
    }
}

/* =========================
   header
========================= */
.header {
    a {
        img {
            @media screen and (min-width:481px) {
                width: var(--logo-width-mobile);
            }

            @media screen and (min-width:768px) {
                width: var(--logo-width-tablet);
                margin: var(--logo-margin-tablet);
            }

            @media screen and (min-width:1024px) {
                width: var(--logo-width-pc);
                margin: var(--logo-margin-pc);
            }
        }
    }
}

/* =========================
   eyecatch
========================= */
.eyecatch {
    .eyecatch_copy {
        @media screen and (min-width:481px) {
            font-size: var(--eyecatch-copy-font-mobile);
        }

        @media screen and (min-width:768px) {
            font-size: var(--eyecatch-copy-font-tablet);
            padding: var(--eyecatch-copy-padding-tablet);
        }
    }
}

/* =========================
   main / side-bar（共通枠）
========================= */
.main,
.side-bar {
    @media screen and (min-width:768px) {
        width: var(--main-sidebar-width-tablet);
        border-radius: var(--radius-1em);
        margin: 0 auto;
    }

    @media screen and (min-width:1024px) {
        padding: var(--space-100em);
        margin: var(--space-025em) 0 var(--space-200em);
        border-radius: var(--radius-1em);
    }
}

/* =========================
   main
========================= */
.main {
    @media screen and (min-width:481px) {

        /*おすすめのホテル*/
        #hotel_list,
        .js_hotel_list {
            ul {
                clear: both;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                li {
                    width: var(--hotel-li-width-mobile);
                }
            }
        }
    }

    @media screen and (min-width:768px) {
        margin-bottom: var(--space-100em);

        /* チケットボタン */
        .ticket {
            a {
                max-width: var(--ticket-maxwidth-tablet);
                padding: var(--ticket-padding-tablet);
                margin: var(--space-100em) auto;
                font-size: var(--ticket-fontsize-tablet);
            }
        }

        /*おすすめのホテル*/
        #hotel_list,
        .js_hotel_list {
            ul {
                li {
                    width: var(--hotel-li-width-tablet);
                }
            }
        }

        /* 単月カレンダー */
        .month {
            margin: var(--month-margin-tablet);
            float: left;
            padding: 0;
            clear: both;

            div {
                width: var(--month-cell-width);
                font-size: var(--month-cell-fontsize-tablet);
                height: var(--month-cell-height-tablet);

                /* 2段表示のため固定line-heightを使わない */
                line-height: 1.15;
            }
        }
    }

    @media screen and (min-width:1024px) {
        width: var(--main-width-pc);
        float: left;

        /* 単月カレンダー */
        .month {
            float: left;
            width: var(--month-width-pc);
            margin: var(--month-margin-pc);
            padding: 0;
            clear: both;

            div {
                height: var(--month-cell-height-pc);

                /* 2段表示のため固定line-heightを使わない */
                line-height: 1.15;
            }
        }

        /* チケットボタン */
        .ticket {
            a {
                max-width: var(--ticket-maxwidth-pc);
                font-size: var(--ticket-fontsize-pc);
            }
        }
    }
}

/* =========================
   side-bar
========================= */
.side-bar {
    @media screen and (min-width:768px) {
        margin-top: var(--space-100em);
        margin-bottom: var(--space-200em);
    }

    @media screen and (min-width:1024px) {
        width: var(--sidebar-width-pc);
        float: right;
    }
}

/* =========================
   footer
========================= */
.footer {
    @media screen and (min-width:768px) {
        clear: both;
        margin: 0;
        padding: 0;
    }

    @media screen and (min-width:1024px) {
        clear: both;
        margin: 0;
        padding: 0;
    }
}