@charset "UTF-8";



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

/* --------------------
   .ttl
-------------------- */
.section_ttl {
    text-align: center;
}

/* --------------------
   .toc
-------------------- */
.toc {
    text-align: center;
}

.toc ul li {
    padding-bottom: 1.5em;
}

.toc ul li .btnBox {
    margin: .5em 0 .5em;
}

.toc ul li a {
    display: inline-block;
    line-height: 1.25;
    border-bottom: 1px solid currentColor;
}

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

/* --------------------
   .card
-------------------- */
.card {
    margin-bottom: 2em;
    max-width: 21.25em;
    background: transparent;
}

.card .card_header {
    padding: 1em 1.25rem;
}

.card .txtBox {
    margin: 0 1.25rem;
}

.card .priceBox {
    margin: .75em 1.25rem 0;
}

.card .btnBox {
    margin: .5em 1.5rem 1em;
}

.card .btnBox+.txtBox {
    margin-top: 3rem;
}

/* --------------------
   color
-------------------- */
p sub {
    display: block;
    margin-top: .5em;
    letter-spacing: 0;
    font-size: .5em;
}


/* --------------------
   cont1
-------------------- */
#cont1 .read {
    color: #666464;
    margin: .5em 0 -3em;
    position: relative;
}

#cont1 .img2 {
    margin-bottom: .5em;
}


/* --------------------
   cont3
-------------------- */
#cont3 .card_header {
    padding-top: 0;
    padding-bottom: 0;
}

#cont3 .card_header .ttl {
    width: 100%;
    min-height: inherit;
    font-size: 1.125em;
    font-weight: 700;
    color: #83AEE5;
}

#cont3 .card_body {
    position: relative;
}

#cont3 .card .imgBox {
    position: absolute;
    top: 0;
    right: 0;
}

#cont3 .card .price {
    width: 8em;
    /* width: calc(303*1em / 22); */
    position: relative;
}

#cont3 .card .btnBox {
    margin: 1.5em 1.5rem 1em;
}

/* --------------------
   cont4
-------------------- */
#cont4 .read {
    font-size: 1.5em;
    font-weight: 700;
    color: #FFD670;
    margin-bottom: 1em;
}

#cont4>.inBlock>.inner {
    background: #FFF3DD;
    padding: 1.5em 0 0;
}

#cont4>.inBlock>.inner .inner {
    padding: 0 1.25em 0;
}

#cont4 .card_header .ttl {
    width: 100%;
    min-height: inherit;
    font-size: 1.125em;
    font-weight: 700;
    margin-bottom: 0;
}

#cont4 .color1 {
    color: #DDAC44;
}

#cont4 .color2 {
    color: #6FB9FF;
}

#cont4 .card_body {
    position: relative;
}

#cont4 .card .imgBox {
    width: 10em;
    position: absolute;
    bottom: 5.5em;
    right: 2em;
}

#cont4 .card .imgBox--1 {
    bottom: 4.5em;
}

#cont4 .card .priceBox {
    margin-bottom: 1.5em;
}

#cont4 .card .btnBox {
    margin: 2em 1.5em 1em;
}

/* --------------------
   Btn
-------------------- */
.btnBox .cartBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.75em;
    font-weight: 500;
    line-height: 1;
    width: 100%;
    max-width: 100%;
    padding: 0.45em 0 0.6em 0;
    margin: 0 auto;
    border-radius: 0;
    text-align: center;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: .2s;
    color: #FFF;
    background: #FF0000;
    background: linear-gradient(90deg, #FF0000 0%, #FF7A61 50%, #FF0000 100%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(255, 255, 255, .2) rgba(0, 0, 0, .2) rgba(0, 0, 0, .3) rgba(255, 255, 255, .3);
}

.cartBtn i.cart {
    display: block;
    width: 1em;
    height: 1em;
    margin-left: 0.25em;
    background: url(../img/cart.png) no-repeat center center / contain;
    transform: translateY(.05em);
}

@media (min-width: 769px) {
    .txt {
        font-size: calc(30*1em / 22);
        line-height: calc(48 / 30);
    }

    .card {
        max-width: unset;
    }

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

    .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 .card_header {
        padding: 1em calc(44*1em / 22) calc(70*1em / 22);
    }

    .inBlock-txt {
        padding: 0 calc(44*1em / 22);
    }

    .inBlock-txt2 {
        padding: 0 calc(33*1em / 22);
    }

    #cont4 .read {
        font-size: calc(49*1em / 22);
    }

    .card .txtBox {
        margin: 0 calc(44*1em / 22);
    }

    #cont3 .card .btnBox {
        margin: 2em auto 1em;
    }

    #cont3 .card_header .ttl,
    #cont4 .card_header .ttl {
        font-size: calc(38*1em / 22);
    }

    #cont4 .card .imgBox {
        right: calc(75 * 1em / 22);
    }
    
    #cont4 .card .imgBox--1 {
        width: calc(282 * 1em / 22);
        bottom: 6.5em;
    }
    
    #cont4 .card .imgBox--2 {
        width: calc(329 * 1em / 22);
        bottom: 8em;
    }

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

    #cont3 .card .price {
        width: calc(303*1em / 22);
    }

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

    .card .btnBox {
        max-width: 27.5454545455em;
        margin: 1em auto 0;
    }
}

@media (max-width: 768px) {
    .inBlock-txt {
        padding: 0 calc(22*1em / 16);
    }

    .inBlock-txt2 {
        padding: 0 calc(16.5*1em / 16);
    }

    #cont3 .card .card_header {
        padding-right: .25em;
        padding-left: .25em;
    }

    #cont3 .card .txtBox {
        margin-right: .25em;
        margin-left: .25em;
    }
}