@charset "UTF-8";

/* ========================================
    Variables
======================================== */

:root {
    --wester-text: #17275c;
    --wester-content-width: 1280px;
    --wester-side-space: 20px;
}


/* ========================================
    Base
======================================== */

.wester-lp {
    width: 100%;
    overflow: hidden;

    color: var(--wester-text);

    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        "Yu Gothic",
        "Meiryo",
        sans-serif;

    line-height: 1.7;

    background:
        url("../img/bg.jpg")
        center top /
        1920px auto
        repeat-y;
}

.wester-lp-main {
    display: block;
}


/* ========================================
    Layout
======================================== */

.wester-lp .inner {
    width: min(
        calc(100% - var(--wester-side-space) * 2),
        var(--wester-content-width)
    );
    margin-inline: auto;
}


/* ========================================
    Responsive
======================================== */

@media screen and (max-width: 767px) {

    :root {
        --wester-side-space: 20px;
    }

}

/* ========================================================
    Responsive Visibility Utilities
======================================================== */

/* PC以上でのみ表示 */
@media screen and (max-width: 1023px) {
    .up-pc {
        display: none !important;
    }
}

/* タブレットでのみ表示 */
@media screen and (max-width: 767px),
       screen and (min-width: 1024px) {
    .only-tb {
        display: none !important;
    }
}

/* スマホ（タブレット未満）でのみ表示 */
@media screen and (min-width: 768px) {
    .only-sp {
        display: none !important;
    }
}

/* タブレット以上で表示 */
@media screen and (max-width: 767px) {
    .up-tb {
        display: none !important;
    }
}