/* style-30-components.css */


.gmap {
    height: 0;
    overflow: hidden;
    padding-bottom: var(--gmap-padding-bottom);
    position: relative;

    iframe {
        position: absolute;
        left: var(--px-0);
        top: var(--px-0);
        height: var(--percent-10000);
        width: var(--percent-10000);
    }
}

.eyecatch {
    width: var(--percent-10000);
    margin: var(--eyecatch-margin-y) 0;
    padding: var(--space-zero);
    position: relative;
    /* 相対位置指定 */

    .eyecatch_photo {
        box-sizing: border-box;
        width: var(--percent-10000);
    }

    .eyecatch_copy {
        max-width: var(--percent-10000);
        display: block;
        left: var(--px-0);
        right: var(--px-0);
        bottom: 0;
        margin: 0;
        padding: var(--eyecatch-copy-padding);
        color: var(--color-calendar-a);
        background: var(--new-color-blue-800);
    }
}

.side-bar {
    .side-bar-body {
        li {
            a {
                border-left: var(--px-5) solid var(--color-calendar-a);
            }
        }
    }

    ul {
        margin: var(--space-100em) 0;
    }

    li {
        text-align: left;
    }

    div {
        clear: both;
    }

    h2 {
        clear: both;
        font-size: var(--sidebar-h2-font-size);
        margin: 0 0 var(--space-100em);
        font-weight: normal;
        position: relative;
        color: var(--color-calendar-a);
        padding: var(--sidebar-h2-padding);
        background-color: var(--new-color-gray-600);
        border-radius: var(--sidebar-h2-radius);

        &::after {
            position: absolute;
            top: 50%;
            left: var(--sidebar-h2-marker-left);
            transform: translateY(-50%);
            content: '';
            width: var(--sidebar-h2-marker-width);
            height: var(--sidebar-h2-marker-height);
            background-color: var(--color-calendar-a);
        }

        &:not(:first-child) {
            margin-top: var(--space-200em);
        }
    }

    /*年毎の予想データ*/
    .js_side-bar {
        ul {
            display: flex;
            flex-wrap: wrap;

            li {
                width: var(--side-bar-li-width);
                margin: var(--side-bar-li-margin);
                box-sizing: border-box;

                a {
                    font-size: var(--side-bar-link-font-size);
                    text-align: center;
                    background: var(--new-color-gray-300);
                    color: var(--new-color-gray-800);
                    display: block;
                    padding: var(--side-bar-link-padding);

                    &:hover {
                        text-decoration: none;
                        background: var(--new-color-gray-600);
                        color: var(--color-calendar-a);
                    }
                }
            }
        }
    }
}

.main {
    .strategy_method {
        ul {
            li {
                padding: var(--space-100em) 0;
                text-indent: -1em;
                padding-left: var(--space-100em);
            }
        }
    }

    #monthly_event {
        ul {
            li {
                padding: var(--space-100em) 0;
            }
        }
    }

    /* チケットボタン */
    .ticket {
        a {
            display: block;
            padding: var(--ticket-padding);
            margin: var(--space-100em) auto;
            max-width: var(--ticket-max-width);

            /* テキスト */
            font-weight: bold;
            font-size: var(--ticket-font-size);
            text-align: center;
            text-decoration: none;
            color: var(--color-calendar-c);
            line-height: var(--ticket-line-height);

            /* 角丸 */
            border-radius: var(--ticket-radius);
            border: solid var(--ticket-border-width) var(--new-color-blue-800);
            background: var(--new-color-blue-800);

            /* ドロップシャドウ */
            box-shadow: var(--shadow-ticket);
        }

    }

    /*おすすめのホテル*/
    #hotel_list,
    .js_hotel_list {
        ul {
            li {
                width: var(--percent-10000);
                padding-bottom: var(--space-zero);
                margin: var(--space-100em) 0;
                border: var(--hotel-border);

                img {
                    border-bottom: var(--hotel-border);
                }

                .hotel_name {
                    padding: 0;
                    margin: var(--space-050em);
                    font-size: 1em;
                    font-weight: bold;
                    line-height: var(--hotel-name-line-height);
                    text-align: center;
                }

                .hotel_overview {
                    padding: 0;
                    margin: var(--space-050em);
                    font-size: var(--hotel-overview-font-size);
                    line-height: var(--hotel-overview-line-height);
                    text-align: center;
                }

                .hotel_review {
                    padding: var(--hotel-review-padding);
                    margin: var(--space-050em);
                    font-size: var(--hotel-overview-font-size);
                    line-height: var(--hotel-overview-line-height);
                    text-align: left;
                    background-color: var(--color-calendar-a);
                }

                &:before {
                    display: block;
                    text-align: center;
                    margin-top: var(--space-050em);
                }

                &.no1:before {
                    content: var(--img-no1);
                }

                &.no2:before {
                    content: var(--img-no2);
                }

                &.no3:before {
                    content: var(--img-no3);
                }
            }
        }
    }

    .youtube {
        iframe {
            width: var(--percent-10000);
        }
    }

    /*画像引用元*/
    .img_quote {
        font-size: 0.85em;
        color: var(--new-color-gray-600);

        a {
            font-size: 1em;
            color: var(--new-color-gray-600);
        }
    }

    /*年毎の予想データ（main側）*/
    .js_side-bar {
        display: flex;
        flex-wrap: wrap;

        li {
            width: var(--side-bar-li-width);
            margin: var(--side-bar-li-margin);
            box-sizing: border-box;

            a {
                font-size: var(--side-bar-link-font-size);
                text-align: center;
                background: var(--color-calendar-a);
                color: var(--new-color-gray-800);
                display: block;
                padding: var(--side-bar-link-padding);

                &:hover {
                    text-decoration: none;
                    background: var(--new-color-gray-600);
                    color: var(--color-calendar-a);
                }
            }
        }
    }
}