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

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

.box__dtitle > 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.for__like > div.effect-bg-minus.is-effect-pc {
    pointer-events: none;
    --circle-w: 690px;
    position: absolute;
    width: 100%;
    top: -450px;
    overflow: hidden;
}

.box__article__list.for__like > 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__dtitle {
    margin: 100px 0 50px 0;
}

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

.box__dtitle .box__container .box__body .body__title {
    text-align: left;
    margin-bottom: 50px;
}

.box__dtitle .box__container .box__body .body__sign {
    display: flex;
    flex-direction: column;
}

.box__dtitle .box__container .box__body .body__sign .sign__name,
.box__dtitle .box__container .box__body .body__sign .sign__date {
    text-align: left;
}
/* ----------------------------------------------------------------- */
.box__detail__content {
    z-index: 5;
}

.box__detail__content .box__container .box__body {
    --outline-w: 25%;
    --space-w: 4%;
    --con-w: calc(100% - var(--outline-w) - var(--space-w));
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}

.box__detail__content .box__container .box__body > li {
    position: relative;
    flex: 0 0 auto;
}

.box__detail__content .box__container .box__body > li.body__info {
    width: var(--outline-w);
    position: sticky;
    top: calc(var(--header-nav-h) + 20px);
    height: 100%;
}

.box__detail__content .box__container .box__body > li.body__info .info__outline > div,
.box__detail__content .box__container .box__body > li.body__info .info__outline > p,
.box__detail__content .box__container .box__body > li.body__info .info__more > div,
.box__detail__content .box__container .box__body > li.body__info .info__more > p {
    text-align: left;
}

.box__detail__content .box__container .box__body > li.body__info .info__outline {
    margin-bottom: 40px;
}

.box__detail__content .box__container .box__body > li.body__info .info__outline .title__part {
    -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__detail__content .box__container .box__body > li.body__info .info__outline .title__part:hover {
    color: #ADADAD;
}

.box__detail__content .box__container .box__body > li.body__info .info__more > div.more__title,
.box__detail__content .box__container .box__body > li.body__info .info__outline > div.outline__title {
    margin-bottom: 15px;
}

.box__detail__content .box__container .box__body > li.body__info .info__outline > p:not(:last-child) {
    margin-bottom: 10px;
}

.box__detail__content .box__container .box__body > li.body__info .info__outline > p {
    pointer-events: auto;
    cursor: pointer;
    --arrow-w: 10px;
    --arrow-space-w: calc(var(--list-point-space-w) * 0.5);
    position: relative;
    margin-left: calc(var(--arrow-w) + var(--arrow-space-w));

    font-weight: 500;
}

.box__detail__content .box__container .box__body > li.body__info .info__outline > p::before {
    content: "";
    position: absolute;
    width: var(--arrow-w);
    height: var(--arrow-w);
    top: 8px;
    left: calc(-1 * (var(--arrow-w) + var(--arrow-space-w)));
    background: url(../images/common/arrow-icon-right2.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.box__detail__content .box__container .box__body > li.body__info .info__more .more__btns  {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.box__detail__content .box__container .box__body > li.body__info .info__more .more__btns > a {
    position: relative;
    padding: 5px 30px;
    background-color: var(--color-orange);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;

    -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__detail__content .box__container .box__body > li.body__info .info__more .more__btns > a:hover {
    background-color: var(--color-yellow);
}

.box__detail__content .box__container .box__body > li.body__info .info__more .more__btns > a:not(:last-child) {
    margin-bottom: 10px;
}

.box__detail__content .box__container .box__body > li.body__con {
    width: var(--con-w);
}

.box__detail__content .box__container .box__body > li.body__con .con__fullpage {
    text-align: left;
}

.box__detail__content .box__container .box__body > li.body__con .con__inner .inner__banner {
    margin-top: 50px;

    --icon-w: 38%;
    --space-w: 2%;
    --con-w: calc(100% - var(--icon-w) - var(--space-w));
    background: #fff url(../images/blog/blog-article-banner-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 120%;

    border-radius: var(--panel-border-radius-l);
    box-shadow: var(--box-shadows);

    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: 2% 6%;
}

.box__detail__content .box__container .box__body > li.body__con .con__inner .inner__banner > li {
    position: relative;
    flex: 0 0 auto;
}

.box__detail__content .box__container .box__body > li.body__con .con__inner .inner__banner .banner__detail {
    width: var(--con-w);
}

.box__detail__content .box__container .box__body > li.body__con .con__inner .inner__banner .banner__icon {
    width: var(--icon-w);
}

.box__detail__content .box__container .box__body > li.body__con .con__inner .inner__banner .banner__detail .con__btn {
    margin-top: 10%;
}

.box__article__list {
    margin-top: 100px
}
/* ----------------------------------------------------------------- */
@media only screen and (min-width:360px) {
    .box__detail__content .box__container{
        padding: 0 0;
    }

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

    .box__detail__content .box__container .box__body > li.body__info {
        width: 100%;
        position: relative;
        top: 0;
        height: initial;
        padding: 0 var(--main-padding-side);
        margin-bottom: 40px;
    }

    .box__detail__content .box__container .box__body > li.body__info .info__more .more__btns  {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .box__detail__content .box__container .box__body > li.body__info .info__more .more__btns > a {
        flex: 0 0 auto;
        width: 30%;
        padding: 5px 0px;
        font-size: 14px;
    }

    .box__detail__content .box__container .box__body > li.body__info .info__more .more__btns > a:not(:last-child) {
        margin-bottom: 0px;
    }

    .box__detail__content .box__container .box__body > li.body__con {
        width: 100%;
    }

    /* .box__detail__content .box__container .box__body > li.body__con .con__fullpage p { */
    .box__detail__content .box__container .box__body > li.body__con .con__fullpage {
        padding: 0 var(--main-padding-side);
    }

    .box__detail__content .box__container .box__body > li.body__con .con__inner {
        padding: 0 var(--main-padding-side);
    }

    .box__detail__content .box__container .box__body > li.body__con .con__inner .inner__banner {
        --icon-w: 39%;
        --space-w: 0%;
        background-size: 150%;
        padding: 20px 20px;
    }

    .box__detail__content .box__container .box__body > li.body__con .con__inner .inner__banner .banner__detail .con__title {
        --fsize2: calc(var( --fsize) - 6px);
        font-size: var(--fsize2);
        line-height: calc(var(--fsize2) + 8px);
    }

    .box__detail__content .box__container .box__body > li.body__con .con__inner .inner__banner .banner__detail .con__btn > a.btn__style {
        width: 160px;
        min-width: initial;
    }
}
@media only screen and (min-width:501px) {}
@media only screen and (min-width:768px) {}
@media only screen and (min-width: 1024px) {
    .box__detail__content .box__container{
        padding: 0 var(--main-padding-side);
    }

    .box__detail__content .box__container .box__body {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
    }

    .box__detail__content .box__container .box__body > li.body__info {
        width: var(--outline-w);
        position: sticky;
        top: calc(var(--header-nav-h) + 20px);
        height: 100%;
        padding: 0 0;
        margin-bottom: 0px;
    }

    .box__detail__content .box__container .box__body > li.body__info .info__more .more__btns {
        flex-direction: column;
        justify-content: initial;
        align-items: flex-start;
    }    

    .box__detail__content .box__container .box__body > li.body__info .info__more .more__btns > a {
        width: initial;
        padding: 5px 30px;
        font-size: 16px;
    }    

    .box__detail__content .box__container .box__body > li.body__info .info__more .more__btns > a:not(:last-child) {
        margin-bottom: 10px;
    }

    .box__detail__content .box__container .box__body > li.body__con {
        width: var(--con-w);
    }

    /* .box__detail__content .box__container .box__body > li.body__con .con__fullpage p { */
    .box__detail__content .box__container .box__body > li.body__con .con__fullpage {
        padding: 0 0;
    }

    .box__detail__content .box__container .box__body > li.body__con .con__inner {
        padding: 0 0;
    }

    .box__detail__content .box__container .box__body > li.body__con .con__inner .inner__banner {
        --icon-w: 38%;
        --space-w: 2%;
        background-size: 120%;
        padding: 2% 6%;
    }

    .box__detail__content .box__container .box__body > li.body__con .con__inner .inner__banner .banner__detail .con__title {
        --fsize2: calc(var( --fsize));
        font-size: var(--fsize2);
        line-height: calc(var(--fsize2) + 8px);
    }

    .box__detail__content .box__container .box__body > li.body__con .con__inner .inner__banner .banner__detail .con__btn > a.btn__style {
        width: 40%;
        min-width: 240px;
    }
}

@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) {}