@charset "UTF-8";

/* ===========
   a220707
=========== */
.inBlock *[class*="inBlock"],
.inBlock_XL *[class*="inBlock"],
.inBlock_L *[class*="inBlock"],
.inBlock_M *[class*="inBlock"],
.inBlock_S *[class*="inBlock"],
.inBlock_XS *[class*="inBlock"] {
    padding-right: 0;
    padding-left: 0;
    max-width: 20.75em;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 501px) {

    .inBlock,
    .inBlock_XL,
    .inBlock_L,
    .inBlock_M,
    .inBlock_S,
    .inBlock_XS {
        padding-right: 44px !important;
        padding-left: 44px !important;
    }
}


#main {
    color: #2D2D2D;
    position: relative;
}

#bg-wrap {
    width: 0;
    height: 0;
    top: 0;
    position: fixed;
}

#bg-wrap.over {
    position: absolute;
    left: 0;
    bottom: 0;
    top: auto;
}

#bg-wrap .bg-inner {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#bg-wrap.over .bg-inner {
    transform: translateY(-100%);
}

#bg-wrap .bg-inner .bg {
    width: 100vw;
    height: 100%;
}

#bg-wrap .bg-inner .bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 769px) {
    #bg-wrap .bg-inner {
        width: calc(100vw - 185px - 83px);
    }

    #bg-wrap .bg-inner .bg {
        margin-left: -185px;
        margin-right: -83px;
    }
}

#magazine {
    background: #FFF;
    position: relative;
    letter-spacing: -.01em;
}

@media (min-width: 769px) {
    #magazine {
        max-width: 750px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;

        font-size: 20px !important;
    }
}

@media (min-width: 829px) {
    #magazine {
        font-size: 22px !important;
    }

    .inBlock p {
        font-size: 1.45454545455em;
    }

    .inBlock p sub {
        font-size: 0.5em;
    }
}


iframe {
    vertical-align: bottom;
}

/* --------------------
   margin
-------------------- */
.articleHeader {
    margin-bottom: 0;
}

/* --------------------
   #toc
-------------------- */
#toc {
    background: #FFF4CE;
    padding: 2em 0 .5em;
}

#toc ul li {
    margin: 1em 0;
}


/* --------------------
  etc
-------------------- */
.point {
    background-color: #D2F1DA;
    color: #565656;
    padding: 0 1.5em 2em;
}

.point>.ttl {
    background-color: #FFF;
    color: #00A794;
    font-size: 1.188em;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .2em;
    border-radius: 0 0 .75em .75em;
    width: 9em;
    margin: 0 auto;
    padding-bottom: .5em;
    display: block;
    text-align: center;
}

.point h4 {
    font-size: 1.90909090909em;
    font-weight: 500;
    line-height: 1.75;
    text-align: center;
    margin: 1.75em 0 .65em;
}

@media (max-width: 375px) {
    .point h4 {
        font-size: 1.3125em;
    }
}

.point h4 span {
    font-weight: 400;
    display: block;
    font-size: 0.7619047619em;
}

.point p {
    margin: .75em 0 0;
}

.point sup {
    font-size: 0.72727272727em;
}

.howto {
    background-color: #FFFFBC;
    /* padding: 1.5em 7.5% 2em; */
    padding: 0 2.36363636364em 1em;
    margin-top: 5%;
}

.howto .ttl {
    color: #565656;
    font-size: 1.90909090909em;
    font-weight: 400;
    text-align: center;
    margin-bottom: .2em;
}

.howto p {
    font-size: 1.45454545455em;
    font-weight: 300;
    margin: .75em 0 0;
    letter-spacing: -.1em;
}

@media (max-width: 375px) {
    .howto p {
        font-size: 1em;
    }
}

.slick-prev,
.slick-next {
    top: 30%;
}

.slick-prev {
    left: -35px;
}

.slick-next {
    right: -35px;
}

/* --------------------
   #cont1
-------------------- */


/* --------------------
   #cont2
-------------------- */


/* --------------------
   #cont3
-------------------- */


/* --------------------
   #cont4
-------------------- */


/* --------------------
   .card
-------------------- */
.card {
    /* width: 98%; */
}

@media(min-width:829px) {
    .card {
        max-width: 22em;
    }
}

.card .card_body>* {
    margin-right: 6%;
    margin-left: 6%;
}

.card .card_body>.btnBox {
    margin-top: 1em;
    margin-right: auto;
    margin-left: auto;
}

.card .txtBox {
    margin-top: 0;
}

.card .subscription {
    color: #00a33d;
    font-weight: 500;
}

@media(min-width:829px) {
    .btnBox .cartBtn {
        width: 11.5em;
    }
}

/* --------------------
   .card
-------------------- */

.card {
    background: #FFF;
    margin-bottom: 0;
    /* padding: 0.9em 0 3.4em; */
    max-width: unset;
}

.card .subscription {
    color: #00a33d;
    font-size: 1.36em;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    margin: 0.75em 1.25rem 0;
}

.card .txtBox .ttl {
    font-size: 1.45em;
}

.card .txtBox .sub_ttl {
    font-size: 1.09em;
    margin-top: 0;
}

.card .txtBox {
    margin-top: 0;
}

.card .txtBox,
.card .priceBox {
    padding: 0;
    margin-right: 2.04em;
    margin-left: 2.04em;
}

.card .priceBox {
    margin-top: 1.81em;
}

.card .priceBox .off {
    font-size: 1.9em;
}

.card .priceBox .price-r {
    padding-left: .75em;
}

.card .priceBox .price {
    flex: auto;
}

.card .priceBox .discount {
    color: #5a5a5a;
    white-space: nowrap;
    margin-bottom: .25em;
    position: relative;
}

.card .priceBox .discount .num {
    font-size: 1.9em;
}

.card .priceBox .discount+.price .num,
.card .priceBox .price .num {
    font-size: 2.72em;
}

.card .subscription {
    font-size: 1.36em;
}

.card .btnBox {
    padding: 1.63em 1.36em 0;
    margin: 0;
}

.card .buyBtn {
    font-size: 1.63em;
}

.card .note {
    font-size: 1.27em;
}

.btnBox .cartBtn {
    padding: 0;
    background: transparent;
    border: none;
    font-size: inherit;
    width: 100%;
}

@media (min-width: 829px) {
    .card {
        max-width: unset;
    }

    .btnBox .cartBtn {
        width: 27.5454545455em;
    }
}

@media (max-width: 375px) {
    .card {
        padding-bottom: 2.34375em;
    }

    .card .btnBox {
        padding: 1.28em 1.07em 0;
    }

    .card .txtBox,
    .card .priceBox {
        margin-right: 1.375em;
        margin-left: 1.375em;
    }

    .card .txtBox .ttl {
        font-size: 1.14em;
    }

    .card .txtBox .sub_ttl {
        font-size: 0.85714285714em;
    }

    .card .priceBox {
        margin-top: 1em;
    }

    .card .priceBox .off {
        font-size: 1.3em;
    }

    .card .priceBox .discount+.price .num,
    .card .priceBox .price .num {
        font-size: 1.875em;
    }

    .card .subscription {
        font-size: 0.9375em;
    }

    .card .priceBox .discount .num {
        font-size: 1.3125em;
    }

    .point .point-img {
        flex: 0 0 9.234375em;
        margin-top: 0;
    }

    .point .point-txt {
        font-size: 1em;
        padding-right: .8em;
    }

    .point .point-txt2 {
        font-size: 0.875em;
    }

    .point.reverse .point-txt {
        margin-left: .5em;
    }

    .card .priceBox .price-r {
        padding-left: .5em;
    }
}