@charset "UTF-8";
/* ===========
   a220908
=========== */

.p1 { padding: .25em !important; }
.p2 { padding: .5em !important; }
.p3 { padding: 1em !important; }
.p4 { padding: 1.5em !important; }

.m1 { margin: .25em !important; }
.mt-1 { margin-top: .25em !important; }
.mb-1 { margin-bottom: .25em !important; }
.m2 { margin: .5em !important; }
.mt-2 { margin-top: .5em !important; }
.m3 { margin: 1em !important; }
.mt-3 { margin-top: 1em !important; }
.mt-4 { margin-top: 1.5em !important; }
.m4 { margin: 1.5em !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: .25em !important; }
.pt-2 { padding-top: .5em !important; }
.pb-3 { padding-bottom: 1em !important; }
.pb-0 { padding-bottom: 0 !important; }

.my-0 { margin-top: 0; margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }

@media (min-width: 768px) {
    .inBlock {
        padding: 0 2.04em !important;
    }
}

.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: 28px;
        padding-left: 28px;
    }
}


#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;
}

@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;
    }
}


iframe {
    vertical-align: bottom;
}

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

/* --------------------
   cv
-------------------- */
.cvBox {
    padding-top: .5em;
}

.cvBox .cv .cartBtn {
    margin-top: .5em;
}

.cvBox .cv .card {
    padding-bottom: 0;
    margin: 0 35px 0 auto;
    width: 11.5em;
}

.cvBox .cv .card .priceBox {
    margin: 0;
}

/* --------------------
   #toc
-------------------- */
#toc {}

#toc .ttl {
    font-size: 1.5em;
    text-align: center;
    color: #579DF7;
}

#toc ul {
    display: flex;
    padding: 0 2%;
}

#toc ul li {
    padding: 0 0.5%;
}


/* --------------------
  etc
-------------------- */
.bg-color {
    background: #E7E1F5;
    overflow: hidden;
}

.bg-color .card {
    background: transparent;
}

h4.ttl {
    color: #F56E85;
    line-height: 1.5;
}


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



/* --------------------
   #cont2
-------------------- */
#cont2 .point {
    color: #5A5A5A;
}

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

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


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

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

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

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

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

.subscription {
    color: #00a33d;
    font-size: calc(30*1em / 22);
    font-weight: 500;
    text-align: center;
    margin-top: .5em;
}

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

@media (min-width: 769px) {
    .inBlock-cs {
        padding-right: calc(72*1em / 22);
        padding-left: calc(72*1em / 22);
    }

    .card {
        width: 100%;
        max-width: unset;
    }

    .card .txtBox,
    .card .priceBox {
        margin-right: calc(88*1em / 22);
        margin-left: calc(88*1em / 22);
    }

    .card .card_header {
        padding-right: calc(88*1em / 22);
        padding-left: calc(88*1em / 22);
    }

    .card .card_header .ttl {
        font-size: calc(47*1em / 22);
    }

    .card .card_body--small {
        margin-top: calc(60*1em / 22);
    }

    .card .txtBox.txtBox--txt {
        margin-right: calc(72*1em / 22);
        margin-left: calc(72*1em / 22);
    }

    .card .card_header .imgBox {
        height: calc(315*1em / 22);
    }

    .txt {
        font-size: calc(32*1em / 22);
        line-height: calc(55 / 32);
    }

    .txt02 {
        font-size: calc(28*1em / 22);
    }

    .txt sub {
        font-size: calc(16*1em / 32);
    }

    .card .card_body>.btnBox {
        max-width: 606px;
        margin-top: calc(36*1em / 32);
        margin-right: auto;
        margin-left: auto;
    }

    .card .txtBox .ttl {
        font-size: calc(32*1em / 22);
    }

    .card .txtBox .sub_ttl,
    .card .priceBox .tax {
        font-size: calc(24*1em / 22);
        margin-top: 0;
    }

    .card .priceBox .discount .num,
    .card .priceBox .off {
        font-size: calc(42*1em / 22);
    }

    .card .priceBox .discount + .price .num,
    .card .priceBox .price .num {
        font-size: calc(60*1em / 22);
    }

    .btnBox .cartBtn {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

    .inBlock-btn {
        max-width: 27.5454545455em;
        padding: 1em 0 0;
        margin: 0 auto;
    }

    .toc ul li a {
        font-size: 1.54545454545em;
    }
}

@media (max-width: 768px) {
    .inBlock-cs {
        padding-right: calc(50*1em / 22);
        padding-left: calc(50*1em / 22);
    }

    .subscription {
        font-size: calc(15* 1em / 16);
    }

    .inBlock-btn {
        max-width: calc(303* 1em / 16);
        padding: 1em 0 0;
        margin: 0 auto;
    }

    .mtsp10 {
        margin-top: 1em;
    }

    .imgW {
        max-width: 153.5px;
        margin: 0 auto;
    }

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