@charset "UTF-8";
/* ----------------------------------------------------------------- */
body {
    background-color: var(--color-bg-beige);
}

.footer_include {
    z-index: 1;
}
/* ----------------------------------------------------------------- */
.box__article__list > div.effect-bg-plus.is-effect-pc {
    pointer-events: none;
    --circle-w: 870px;
    position: absolute;
    width: 100%;
    top: -500px;
    overflow: hidden;
}

.box__article__list > div.effect-bg-plus.is-effect-pc > img {
    position: relative;
    width: var(--circle-w);
    height: var(--circle-w);
    left: calc((100% - var(--circle-w))/2 + 800px);
}

.box__article__list > div.effect-bg-minus.is-effect-pc {
    pointer-events: none;
    --circle-w: 690px;
    position: absolute;
    width: 100%;
    bottom: -600px;
    overflow: hidden;
}

.box__article__list > div.effect-bg-minus.is-effect-pc > img {
    position: relative;
    width: var(--circle-w);
    height: var(--circle-w);
    left: calc((100% - var(--circle-w))/2 - 800px);
}
/* ----------------------------------------------------------------- */
.box__blog__sheet {
    margin-top: 50px;
}

.box__blog__sheet .box__container {
    max-width: var(--main-inner-max-width);
    padding: 0 var(--main-inner-padding-side);
}

.box__blog__sheet .box__container .box__body .body__back > a.btn__style2 {
    --font-size: 16px;
    --padding-top-bottom: 6px;
    max-width: 150px;
    min-width: 150px;
}

.box__blog__sheet .box__container .box__body .body__back > a.btn__style2 > p {
    --arrow-w: 10px;
    --arrow-space-w: 0px;
    position: relative;
    padding-left: calc(var(--arrow-w) + var(--arrow-space-w));
}

.box__blog__sheet .box__container .box__body .body__back > a.btn__style2 > p::before {
    content: "";
    position: absolute;
    width: var(--arrow-w);
    height: var(--arrow-w);
    top: 7px;
    left: calc(-1 * (var(--arrow-w) + var(--arrow-space-w)));
    background: url(../images/common/arrow-icon-left2.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.box__blog__sheet .box__container .box__body .body__btns {
    margin-top: 25px;
    display: flex;
    flex-direction: row; 
}

.box__blog__sheet .box__container .box__body .body__btns > a {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 12px 50px;
    font-size: 18px;
    font-weight: 500;
    background-color: #E9E9E9;
    border-radius: 10px;

    -webkit-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    -moz-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s;
}

.box__blog__sheet .box__container .box__body .body__btns > a:hover {
    /* background-color: var(--color-yellow);
    color: #000; */
    background-color: var(--color-orange);
    color: #fff;
}

/* .box__blog__sheet .box__container .box__body .body__btns > a.is-actived:hover {
    background-color: var(--color-yellow);
    color: #fff;
} */

.box__blog__sheet .box__container .box__body .body__btns > a.is-actived {
    pointer-events: none;
    cursor: default;
    background-color: var(--color-orange);
    color: #fff;
}

.box__blog__sheet .box__container .box__body .body__btns > a:not(:first-child) {
    margin-left: 15px;
}


.box__article__list {
    margin-bottom: 80px
}

.box__article__list .box__container .box__body .body__list .list__article {
    width: var(--item-w);
    margin-bottom: calc(var(--space-w) * 2)
}

.box__article__list .box__container .box__body .body__list .list__article:last-child:nth-child(3n - 1) {
    /* 三欄 兩個間隔 每個間隔  % */
    margin-right: calc(var(--item-w) + var(--space-w));
}
/* ----------------------------------------------------------------- */
.box__pagination {
    margin-top: 40px;
}

.box__pagination .box__container .box__body {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
}

.box__pagination .box__container .box__body .body__num {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
}

.box__pagination .box__container .box__body .body__num > a {
    position: relative;
    width: 26px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;

    pointer-events: auto;
    cursor: pointer;

    color: #000;
    font-family: 'arial', serif;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50%;
}

.box__pagination .box__container .box__body .body__left,
.box__pagination .box__container .box__body .body__right {
    position: relative;
    width: 100%;
}

.box__pagination .box__container .box__body .body__left > a,
.box__pagination .box__container .box__body .body__right > a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #000;
    padding: 12px 40px;
    border-radius: var(--btn-border-radius);
    font-size: 16px;
    font-weight: 600;
    position: relative;
    width: 100%;
}

.box__pagination .box__container .box__body .body__left > a > img,
.box__pagination .box__container .box__body .body__right > a > img {
    width: 12px;
    height: auto;
}

.box__pagination .box__container .box__body .body__left {
    margin-right: 40px;
}

.box__pagination .box__container .box__body .body__right {
    margin-left: 40px;
}

.box__pagination .box__container .box__body .body__left > a > img {
    margin-right: 10px;
}

.box__pagination .box__container .box__body .body__right > a > img {
    margin-left: 10px;
}

.box__pagination .box__container .box__body .body__num > a {
    margin: 0 4px;
}

.box__pagination .box__container .box__body .body__num > a.is-actived {
    color: #fff !important;
    background-color: #000 !important;
}


@media only screen and (min-width:360px) {
    .box__article__list .box__container .box__body .body__list .list__article {
        width: 100%;
        margin-bottom: 50px;
    }

    .box__blog__sheet .box__container .box__body .body__btns {
        flex-direction: column; 
    }

    .box__blog__sheet .box__container .box__body .body__btns > a:not(:first-child) {
        margin-left: 0px;
        margin-top: 10px;
    }

    .box__pagination .box__container .box__body {
        flex-direction: column;
        justify-content: initial;
        align-items: center;
    }

    .box__pagination .box__container .box__body .body__num {
        margin: 20px 0;
    }

    .box__pagination .box__container .box__body .body__left, 
    .box__pagination .box__container .box__body .body__right {
        width: 100%;
    }

    .box__pagination .box__container .box__body .body__left {
        margin-right: 0px;
    }
    
    .box__pagination .box__container .box__body .body__right {
        margin-left: 0px;
    }
}
@media only screen and (min-width:501px) {}
@media only screen and (min-width:768px) {}
@media only screen and (min-width: 1024px) {
    .box__article__list .box__container .box__body .body__list .list__article {
        width: var(--item-w);
        margin-bottom: calc(var(--space-w) * 2)
    }

    .box__blog__sheet .box__container .box__body .body__btns {
        flex-direction: row; 
    }

    .box__blog__sheet .box__container .box__body .body__btns > a:not(:first-child) {
        margin-left: 15px;
        margin-top: 0px;
    }


    .box__pagination .box__container .box__body {
        flex-direction: row;
        justify-content: center;
        align-items: baseline;
    }

    .box__pagination .box__container .box__body .body__num {
        margin: 0px 0;
    }
    
    .box__pagination .box__container .box__body .body__left, 
    .box__pagination .box__container .box__body .body__right {
        width: initial;
    }

    .box__pagination .box__container .box__body .body__left {
        margin-right: 40px;
    }
    
    .box__pagination .box__container .box__body .body__right {
        margin-left: 40px;
    }
}

@media only screen and (min-width: 1200px) {
}
@media only screen and (min-width: 1400px) {
}
@media only screen and (min-width: 1600px) {}
@media only screen and (min-width: 1900px) {}