/* CH_COMMON_UI_STYLE_V1 */


/* ==================================================
 * Header
 * ================================================== */

.ch-global-header {
    position: sticky;
    top: 0;
    z-index: 9000;

    width: 100%;

    background: rgba(255,255,255,.97);
    border-bottom: 1px solid #ddd;

    backdrop-filter: blur(8px);
}

.ch-global-header-inner {
    width: min(
        1120px,
        calc(100% - 32px)
    );

    margin: 0 auto;
    padding: 14px 0 13px;
}

.ch-global-logo {
    margin-bottom: 10px;

    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.ch-global-logo a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #222;
    text-decoration: none;
}

.ch-global-logo-icon {
    display: block;

    width: 32px;
    height: 32px;
}

.ch-site-title-logo {
    display: block;

    width: 360px;
    max-width: 100%;
    height: auto;
}

.ch-global-nav {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}

.ch-global-nav a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 8px 15px;

    border-radius: 999px;

    color: #222;
    background: #f1f1f1;

    font-size: 15px;
    line-height: 1;

    text-decoration: none;
}

.ch-global-nav a.is-current {
    color: #fff;
    background: #222;
}


/* ==================================================
 * Common Campaign
 * ================================================== */

.ch-common-campaign-area {
    width: 100%;
}

.ch-common-campaign-inner {
    width: min(
        1120px,
        calc(100% - 32px)
    );

    margin: 18px auto 0;
}

.ch-common-campaign {
    padding: 18px 20px;

    border: 1px solid #ead9a0;
    border-radius: 14px;

    background: #fffaf0;
}

.ch-common-campaign
+
.ch-common-campaign {
    margin-top: 10px;
}

.ch-common-campaign-title {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.4;
}

.ch-common-campaign-description {
    margin-top: 8px;

    color: #555;

    font-size: 14px;
    line-height: 1.7;
}

.ch-common-campaign-offers {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 14px;
}

.ch-common-campaign-offer {
    padding: 10px 12px;

    border-radius: 10px;

    background: #fff;
}

.ch-common-campaign-offer-label {
    font-weight: 700;
}

.ch-common-campaign-code {
    margin-top: 4px;

    font-family: monospace;
    font-size: 15px;
    font-weight: 800;
}

.ch-common-campaign-link {
    display: inline-block;

    margin-top: 8px;

    color: #222;

    font-size: 13px;
    font-weight: 700;

    text-underline-offset: 3px;
}

.ch-common-campaign-expire {
    margin-top: 12px;

    color: #777;

    font-size: 12px;
}


/* ==================================================
 * Footer
 * ================================================== */

.ch-global-footer {
    margin-top: 54px;

    border-top: 1px solid #ddd;

    background: #fff;
}

.ch-global-footer-inner {
    width: min(
        1120px,
        calc(100% - 32px)
    );

    margin: 0 auto;

    padding: 26px 0 30px;
}

.ch-global-footer-brand {
    font-weight: 900;
}

.ch-global-footer-nav {
    display: flex;

    flex-wrap: wrap;

    gap: 10px 18px;

    margin-top: 12px;
}

.ch-global-footer-nav a {
    color: #444;

    font-size: 14px;

    text-decoration: none;
}

.ch-global-footer-copy {
    margin-top: 18px;

    color: #888;

    font-size: 12px;
}


/* ==================================================
 * Mobile
 * ================================================== */

@media (max-width: 640px) {

    .ch-global-header-inner {
        width: min(
            100% - 24px,
            1120px
        );

        padding-top: 11px;
        padding-bottom: 11px;
    }

    .ch-global-logo {
        font-size: 19px;
    }

    .ch-global-nav {
        gap: 6px;
    }

    .ch-global-nav a {
        min-height: 36px;

        padding:
            8px
            13px;

        font-size: 14px;
    }

    .ch-common-campaign-inner,
    .ch-global-footer-inner {
        width: min(
            100% - 24px,
            1120px
        );
    }

}


/* ==================================================
 * CH_COMMON_UI_LAYOUT_V2
 * ページ側body paddingの影響を受けず、
 * Header / Campaign / Footerを全幅で統一
 * ================================================== */

.ch-global-header,
.ch-common-campaign-area,
.ch-global-footer {
    width: 100vw;

    margin-left:
        calc(50% - 50vw);
}


/*
 * ナビは1行維持。
 * 画面が狭い場合は横スクロール。
 */
.ch-global-nav {
    flex-wrap: nowrap;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ch-global-nav::-webkit-scrollbar {
    display: none;
}

.ch-global-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
}


/*
 * 長い日本語表記に合わせる
 */
@media (max-width: 640px) {

    .ch-global-nav a {
        padding:
            8px
            12px;

        font-size: 13px;
    }

}



/* ==================================================
 * CH_COMMON_BODY_TOP_ZERO_V1
 * ページ固有body paddingの上端だけ無効化
 * ================================================== */

body {
    padding-top: 0 !important;
}



/* ==================================================
 * CH_COMMON_HEADER_TWO_ROWS_V1
 * 全ページ共通：
 * 1段目 ロゴ
 * 2段目 サービスナビ
 * ================================================== */

.ch-global-header-inner {
    display: block !important;
}

.ch-global-logo {
    display: block;
    margin-bottom: 10px !important;
}

.ch-global-nav {
    justify-content: flex-start !important;
}


/* ==================================================
 * CH_MOBILE_NAV_4COL_V1
 * Mobile: 4 columns / 2 rows
 * ================================================== */

@media (max-width: 640px) {

    .ch-global-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
    }

    .ch-global-nav a {
        min-width: 0;
        min-height: 34px;

        padding: 8px 4px;

        font-size: 12px;
        white-space: nowrap;
    }

}

/* ==================================================
 * CH_DESKTOP_YAHOO_HEADER_V1
 * PC: nav left / logo center / nav right
 * ================================================== */

.ch-global-nav-left,
.ch-global-nav-right {
    display: none;
}

@media (min-width: 1100px) {

    .ch-global-header-inner {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);

        align-items: center;

        column-gap: 18px;
    }

    .ch-global-logo {
        grid-column: 2;
        grid-row: 1;

        margin-bottom: 0 !important;
    }

    .ch-global-nav-left {
        display: flex;

        grid-column: 1;
        grid-row: 1;

        justify-content: flex-end !important;
        flex-wrap: nowrap;
    }

    .ch-global-nav-right {
        display: flex;

        grid-column: 3;
        grid-row: 1;

        justify-content: flex-start !important;
        flex-wrap: nowrap;
    }

    .ch-global-nav-all {
        display: none !important;
    }
}


@media (max-width: 640px) {

    .ch-global-nav-left,
    .ch-global-nav-right {
        display: none !important;
    }

    .ch-global-nav-all {
        display: grid !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 6px;
        width: 100%;
    }

}

/* ==================================================
 * CH_DESKTOP_YAHOO_HEADER_V2
 * Visual balance adjustment
 * ================================================== */

@media (min-width: 1100px) {

    .ch-global-header-inner {
        grid-template-columns:
            auto
            auto
            auto !important;

        justify-content: center;

        column-gap: 22px;
    }

    .ch-site-title-logo {
        width: 300px;
    }

    .ch-global-nav-left,
    .ch-global-nav-right {
        gap: 7px;
    }

    .ch-global-nav-left a,
    .ch-global-nav-right a {
        padding-left: 11px;
        padding-right: 11px;
    }

}

/* ==================================================
 * CH_HORIZONTAL_OVERFLOW_FIX_V1
 * 100vw による数pxの横はみ出し防止
 * ================================================== */

html,
body {
    overflow-x: clip;
}

/* ==================================================
 * CH_MOBILE_STICKY_NAV_V1
 * Logo scrolls away / navigation stays fixed
 * ================================================== */

@media (max-width: 1099px) {

    .ch-global-header {
        position: relative;
        top: auto;
        z-index: auto;
    }

    .ch-global-logo {
        margin-bottom: 0 !important;
    }

    .ch-mobile-nav-sticky {
        position: sticky;
        top: 0;
        z-index: 9000;

        width: 100vw;
        margin-left: calc(50% - 50vw);

        padding: 6px 0;

        background: rgba(255,255,255,.97);
        border-bottom: 1px solid #ddd;

        backdrop-filter: blur(8px);
    }

    .ch-mobile-nav-sticky .ch-global-nav-all {
        width: min(
            1120px,
            calc(100% - 24px)
        );

        margin: 0 auto;
    }

}

@media (min-width: 1100px) {

    .ch-mobile-nav-sticky {
        display: none;
    }

}

/* CH_DETAIL_LINK_V1 */
.ch-detail-link {
    display: block;
    padding: 11px 12px;
    border: 1px solid #ccc;
    border-radius: 9px;
    background: #fff;
    color: #222;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}