/* -------------all-------------- */
#wrap{
    width: 100%;
}
#charity_wrap{
    width: 100%;
}
.charity_all{
    width: 1200px;
    margin: 0 auto;
    font-family: 'Amiri', serif;
    font-weight: 400;
    line-height: 1;
    font-feature-settings: "palt";
    box-sizing: border-box;
}
.charity_all img{
    width: 100%;
}
.charity_all video{
    width: 100%;
}
.cr .cr_imgbox_i1{
    width: 422px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 33px;
}
.cr_logo{
    width: 91px;
    position: absolute;
    top: 430px;
}
.cr._sec1 .cr_txt{
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    line-height: 1.71428571;
    letter-spacing: 0.125em;
    padding-bottom: 34px;
}

.cr .cr_flexele .elem{
    width: 216px;
}
.cr_price{
    font-size: 14px;
    margin-top: 25px;
    letter-spacing: 0.1em;
    text-align: center;
}
.cr .cr_imgbox{
    width: 422px;
    margin: 0 auto;
    position: relative;
}
.cr_flexele{
    justify-content: center;
    margin-top: 40px;
}
.cr_price span {
    display: inline-block;
}
.cr_price span:not(:first-child) {
    padding-top: 18px;
}
.charity_all .cr_fix{
    z-index: 99999;
}

/* -------------section1-------------- */
.cr._sec1{
    position: relative;

    text-align: center;
}
.cr._sec1 .cr_logo{
    right: 360px;
}
.cr._sec1 .cr_ttl{
    font-size: 16px;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}
.cr._sec1 h2{
    width: 392px;
    font-size: 24px;
    letter-spacing: 0.1em;
    padding-bottom: 7px;
    margin-bottom: 14px;
    border-bottom: 1px solid #808080;
    display: inline-block;
}
.cr._sec1 h3{
    font-size: 20px;
    letter-spacing: 0.1em;
    padding-bottom: 40px;
}
.cr._sec1 .cr_txt span{
    border-bottom: 1px solid;
    padding-bottom: 1px;
    display: inline-block;
}
.cr._sec1 .top_left{
    width: 380px;
    margin-top: 160px;
}
.cr._sec1 .top_right{
    width: 422px;
}

/* -------------section2-------------- */
.cr._sec2,._sec3,._sec4,.cr_vi,._sec6,._sec7,._sec8,._sec9{
    padding-top: 120px;
}
.cr._sec2 .cr_logo{
    left: 360px;
}
.cr._sec2 .top_right{
    margin-top: 120px;
}
.cr._sec2 .top_left,.top_right{
    width: 379px;
}
.cr._sec2 .cr_flexele._fx{
    margin-top: 40px;
}
.cr._sec2 .cr_flexele._s._fx{
    margin-top: 43px;
}
/* -------------section3-------------- */
.cr._sec3 .cr_logo{
    left: 360px;
}
.cr_price._05{
    margin-top: 29px;
}
/* -------------section4-------------- */
.cr._sec4 .cr_logo{
    right: 360px;
}
.cr._sec4 .cr_flexele{
    margin-top: 36px;
}
.cr_price._06{
    margin-top: 28px;
}
/* -------------section5-------------- */
.cr_vi{
    width: 316px;
    margin: 0 auto;
}
/* -------------section6-------------- */
.cr._sec6 .cr_logo{
    right: 360px;
}
.cr._sec6 .cr_secimg {
    margin-top: 39px;
}
.cr._sec6 .cr_flexele{
    margin-top: 37px;
}
.cr._sec6 .cr_flexele .elem{
    width: 217px;
}
/* -------------section7-------------- */
.cr._sec7 .cr_logo{
    right: 360px;
}
/* -------------section8-------------- */
.cr._sec8 .cr_logo{
    left: 360px;
}
.cr._sec8 .cr_secimg {
    width: 482px;
}
/* -------------section9-------------- */
.cr._sec9 .cr_logo{
    right: 360px;
}
.cr._sec9 .cr_secimg,.cr_thrimg {
    width: 379px;
}
/* -------------section_bnt-------------- */
.cr_bnt{
    width: 202px;
    height: 41px;
    border: 1px solid #000000;
    font-size: 13px;
    line-height: 41px;
    letter-spacing: 0.1em;
    margin: 0 auto;
    margin-top: 103px;
    margin-bottom: 98px;
    text-align: center;
}
/* -------------pc-------------- */
@media all and (min-width: 560px) {
    .sp_only {
        display: none !important
    }
    .cr._sec1{
        padding-top: 79px;
    }
    ._fx{
        display: flex;
        justify-content: center;
    }
    .cr._sec1 .cr_flexbox{
        width: 840px;
        justify-content: space-between;
        margin: 0 auto;
    }
    .cr._sec2 .cr_flexbox._fx{
        width: 796px;
        justify-content: space-between;
        margin: 0 auto;
        margin-top: 40px;
    }
    .cr._sec3 .cr_secimg{
        padding-right: 120px;
    }
    .cr._sec6 .cr_secimg{
        padding-left: 120px;
    }
    .cr .cr_secimg{
        width: 380px;
        margin: 0 auto;
        position: relative;
        margin-top: 40px;
    }

    .cr._sec7 .cr_secimg {
        width: 482px;
        padding-left: 120px;
    }
    .cr._sec7 .cr_thrimg {
        width: 379px;
        margin: 0 auto;
        margin-top: 38px;
        padding-right: 120px;
    }

    .cr._sec9 .cr_secimg{
        padding-right: 120px;
    }
    .cr._sec9 .cr_thrimg{
        margin: 0 auto;
        margin-top: 38px;
        padding-left: 120px;
    }
    .charity_all .cr_num,.cr_fix{
        transform: rotate(-90deg);
        font-size: 12px;
        position: fixed;
        top: 50%;
        letter-spacing: 0.1em;
    }
    
    .charity_all .cr_fix{
        margin-left: 6px;
    }
    .charity_all .cr_num{
        margin-left: 1123px;
        display: none;
    }
    .charity_all .cr_num.active{
        display: block;
    }
}

/* for tablet */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1200px)
and (-webkit-min-device-pixel-ratio: 1) {
    .charity_all{
        width: calc( 1200 * (100vw / 1200));
    }
    .cr .cr_imgbox_i1{
        width: calc( 422 * (100vw / 1200));
        margin-bottom: calc( 33 * (100vw / 1200));
    }
    .cr_logo{
        width: calc( 91 * (100vw / 1200));
        top: calc( 430 * (100vw / 1200));
    }
    .cr._sec1 .cr_txt{
        font-size: calc( 14 * (100vw / 1200));
        padding-bottom: calc( 34 * (100vw / 1200));
    }

    .cr .cr_flexele .elem{
        width: calc( 216 * (100vw / 1200));
    }
    .cr_price{
        font-size: calc( 14 * (100vw / 1200));
        margin-top: calc( 25 * (100vw / 1200));
    }
    .cr .cr_imgbox{
        width: calc( 422 * (100vw / 1200));
    }
    .cr_flexele{
        margin-top: calc( 40 * (100vw / 1200));
    }
    .cr_price span:not(:first-child) {
        padding-top: calc( 18 * (100vw / 1200));
    }
    .cr_num,.cr_fix{
        font-size: calc( 12 * (100vw / 1200));
    }
    .charity_all .cr_fix{
        margin-left: calc( 60 * (100vw / 1200));
    }
    .charity_all .cr_num{
        margin-left: calc( 1131 * (100vw / 1200));
    }

    /* -------------section1-------------- */
    .cr._sec1 .cr_logo{
        right: calc( 360 * (100vw / 1200));
    }
    .cr._sec1 .cr_ttl{
        font-size: calc( 16 * (100vw / 1200));
        margin-bottom: calc( 12 * (100vw / 1200));
    }
    .cr._sec1 h2{
        width: calc( 392 * (100vw / 1200));
        font-size: calc( 24 * (100vw / 1200));
        padding-bottom: calc( 7 * (100vw / 1200));
        margin-bottom: calc( 14 * (100vw / 1200));
        border-bottom: calc( 2 * (100vw / 1200)) solid #808080;
    }
    .cr._sec1 h3{
        font-size: calc( 20 * (100vw / 1200));
        padding-bottom: calc( 40 * (100vw / 1200));
    }
    .cr._sec1 .cr_txt span{
        border-bottom: calc( 1 * (100vw / 1200)) solid;
        padding-bottom: calc( 1 * (100vw / 1200));
    }
    .cr._sec1 .top_left{
        width: calc( 380 * (100vw / 1200));
        margin-top: calc( 160 * (100vw / 1200));
    }
    .cr._sec1 .top_right{
        width: calc( 422 * (100vw / 1200));
    }

    /* -------------section2-------------- */
    .cr._sec2,._sec3,._sec4,.cr_vi,._sec6,._sec7,._sec8,._sec9{
        padding-top: calc( 120 * (100vw / 1200));
    }
    .cr._sec2 .cr_logo{
        left: calc( 360 * (100vw / 1200));
    }
    .cr._sec2 .top_right{
        margin-top: calc( 120 * (100vw / 1200));
    }
    .cr._sec2 .top_left,.top_right{
        width: calc( 379 * (100vw / 1200));
    }
    .cr._sec2 .cr_flexele._fx{
        margin-top: calc( 40 * (100vw / 1200));
    }
    .cr._sec2 .cr_flexele._s._fx{
        margin-top: calc( 43 * (100vw / 1200));
    }
    /* -------------section3-------------- */
    .cr._sec3 .cr_logo{
        left: calc( 360 * (100vw / 1200));
    }
    .cr_price._05{
        margin-top: calc( 29 * (100vw / 1200));
    }
    /* -------------section4-------------- */
    .cr._sec4 .cr_logo{
        right: calc( 360 * (100vw / 1200));
    }
    .cr._sec4 .cr_flexele{
        margin-top: calc( 36 * (100vw / 1200));
    }
    .cr_price._06{
        margin-top: calc( 28 * (100vw / 1200));
    }
    /* -------------section5-------------- */
    .cr_vi{
        width: calc( 316 * (100vw / 1200));
    }
    /* -------------section6-------------- */
    .cr._sec6 .cr_logo{
        right: calc( 360 * (100vw / 1200));
    }
    .cr._sec6 .cr_secimg {
        margin-top: calc( 39 * (100vw / 1200));
    }
    .cr._sec6 .cr_flexele{
        margin-top: calc( 37 * (100vw / 1200));
    }
    .cr._sec6 .cr_flexele .elem{
        width: calc( 217 * (100vw / 1200));
    }
    /* -------------section7-------------- */
    .cr._sec7 .cr_logo{
        right: calc( 360 * (100vw / 1200));
    }
    /* -------------section8-------------- */
    .cr._sec8 .cr_logo{
        left: calc( 360 * (100vw / 1200));
    }
    .cr._sec8 .cr_secimg {
        width: calc( 482 * (100vw / 1200));
    }
    /* -------------section9-------------- */
    .cr._sec9 .cr_logo{
        right: calc( 360 * (100vw / 1200));
    }
    .cr._sec9 .cr_secimg,.cr_thrimg {
        width: calc( 379 * (100vw / 1200));
    }
    /* -------------section_bnt-------------- */
    .cr_bnt{
        width: calc( 202 * (100vw / 1200));
        height: calc( 41 * (100vw / 1200));
        border: calc( 1 * (100vw / 1200)) solid #000000;
        font-size: calc( 13 * (100vw / 1200));
        line-height: calc( 41 * (100vw / 1200));
        margin-top: calc( 103 * (100vw / 1200));
        margin-bottom: calc( 98 * (100vw / 1200));
    }
    .sp_only {
        display: none !important
    }
    .cr._sec1{
        padding-top: calc( 79 * (100vw / 1200));
    }
    .cr._sec1 .cr_flexbox{
        width: calc( 840 * (100vw / 1200));
    }
    .cr._sec2 .cr_flexbox._fx{
        width: calc( 796 * (100vw / 1200));
        margin-top: calc( 40 * (100vw / 1200));
    }
    .cr._sec3 .cr_secimg{
        padding-right: calc( 120 * (100vw / 1200));
    }
    .cr._sec6 .cr_secimg{
        padding-left: calc( 120 * (100vw / 1200));
    }
    .cr .cr_secimg{
        width: calc( 380 * (100vw / 1200));
        margin-top: calc( 40 * (100vw / 1200));
    }

    .cr._sec7 .cr_secimg {
        width: calc( 482 * (100vw / 1200));
        padding-left: calc( 120 * (100vw / 1200));
    }
    .cr._sec7 .cr_thrimg {
        width: calc( 379 * (100vw / 1200));
        margin-top: calc( 38 * (100vw / 1200));
        padding-right: calc( 120 * (100vw / 1200));
    }

    .cr._sec9 .cr_secimg{
        padding-right: calc( 120 * (100vw / 1200));
    }
    .cr._sec9 .cr_thrimg{
        margin-top: calc( 38 * (100vw / 1200));
        padding-left: calc( 120 * (100vw / 1200));
    }
}



/* ----------IE---------- */
 /* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* noto-serif-jp-regular - latin_japanese */
    .cr._sec1 .cr_txt{
        letter-spacing: 0.09em;
    }
}
  
  

/* -------------smartphone-------------- */
@media all and (max-width: 560px) {
    .pc_only {
        display: none !important
    }
    .charity_all{
        width: calc( 750 * (100vw / 750));
    }
    .cr .cr_imgbox_i1{
        width: calc( 602 * (100vw / 750));
        margin-bottom: calc( 51 * (100vw / 750));
    }
    .cr .cr_imgbox{
        width: calc( 602 * (100vw / 750));
    }
    .cr_logo{
        width: calc( 119 * (100vw / 750));
        top: calc( 601 * (100vw / 750));
    }
    .cr .cr_secimg{
        width: calc( 542 * (100vw / 750));
        position: relative;
        margin-top: calc( 58 * (100vw / 750));
    }
    .cr_flexele,.cr_flexele._s{
        display: flex;
        justify-content: center;
    }
    .cr_flexele{
        margin-top: calc( 59 * (100vw / 750));
    }
    .cr .cr_flexele .elem{
        width: calc( 241 * (100vw / 750));
    }
    .cr_price{
        font-size: calc( 24 * (100vw / 750));
        margin-top: calc( 30 * (100vw / 750));
    }
    .cr_num,.cr_fix{
        transform: rotate(-90deg);
        font-size: calc( 22 * (100vw / 750));
        position: fixed;
        top: 50%;
        letter-spacing: 0.1em;
    }
    .cr_fix{
        margin-left: calc(-93 * (100vw / 750));
    }
    .cr_num{
        margin-left: calc( 687 * (100vw / 750));
        display: none;
    }
    .cr_num.active{
        display: block;
    }

    /* -------------section1-------------- */
    .cr._sec1{
        padding-top: calc( 217 * (100vw / 750));
    }
    .cr._sec1 .cr_ttl{
        font-size: calc( 22 * (100vw / 750));
        margin-bottom: calc( 20 * (100vw / 750));
    }
    .cr._sec1 h2{
        width: calc( 521 * (100vw / 750));
        font-size: calc( 34 * (100vw / 750));
        padding-bottom: calc( 14 * (100vw / 750));
        margin-bottom: calc( 23 * (100vw / 750));
        border-bottom: calc( 2 * (100vw / 750)) solid #808080;
    }
    .cr._sec1 h3{
        font-size: calc( 25 * (100vw / 750));
        padding-bottom: calc( 62 * (100vw / 750));
    }
    .cr._sec1 .cr_logo{
        right: calc( 517 * (100vw / 750));
    }
    .cr._sec1 .cr_txt{
        font-size: calc( 20 * (100vw / 750));
        line-height: 1.75;
        padding-bottom: calc( 51 * (100vw / 750));
    }
    .cr._sec1 .cr_flexbox{
        display: flex;
        flex-direction: column-reverse;
    }
    .cr._sec1 .top_left{
        width: calc( 542 * (100vw / 750));
        margin-right: auto;
        margin-left: calc( 40 * (100vw / 750));
        margin-top: calc( 60 * (100vw / 750));
    }
    .cr._sec1 .top_right{
        width: calc( 542 * (100vw / 750));
        margin-left: auto;
        margin-right: calc( 40 * (100vw / 750));
    }

    /* -------------section2-------------- */
    .cr._sec2,._sec3,._sec4,.cr_vi,._sec6,._sec7,._sec8,._sec9{
        padding-top: calc( 180 * (100vw / 750));
    }
    .cr._sec2 .cr_imgbox{
        margin-bottom: calc( 58 * (100vw / 750));
    }
    .cr._sec2 .cr_logo{
        left: calc( 517 * (100vw / 750));
    }
    .cr._sec2 .top_left{
        margin-right: auto;
        margin-top: calc( 58 * (100vw / 750));
        margin-left: calc( 40 * (100vw / 750));
    }
    .cr._sec2 .top_right{
        margin-left: auto;
        margin-top: calc( 61 * (100vw / 750));
        margin-right: calc( 40 * (100vw / 750));
    }
    .cr._sec2 .top_left,.top_right{
        width: calc( 542 * (100vw / 750));
    }
    .cr._sec2 .cr_flexele._fx{
        margin-top: calc( 58 * (100vw / 750));
    }
    .cr._sec2 .cr_flexele._s._fx{
        margin-top: calc( 63 * (100vw / 750));
    }
    .cr_price span:not(:first-child) {
        padding-top: calc( 32 * (100vw / 750));
    }
    /* -------------section3-------------- */
    .cr._sec3 .cr_logo{
        left: calc( 517 * (100vw / 750));
    }
    .cr._sec3 .cr_secimg{
        width: calc( 542 * (100vw / 750));
        margin-left: calc( 35 * (100vw / 750));
        margin-top: calc( 58 * (100vw / 750));
    }
    .cr_price._05{
        margin-top: calc( 33 * (100vw / 750));
    }
    .cr_price._05 span:not(:first-child) {
        padding-top: calc( 34 * (100vw / 750));
    }
    /* -------------section4-------------- */
    .cr._sec4 .cr_logo{
        right: calc( 517 * (100vw / 750));
    }
    .cr._sec4 .cr_secimg{
        width: calc( 541 * (100vw / 750));
        margin: 0 auto;
        margin-top: calc( 58 * (100vw / 750));
    }
    .cr._sec4 .cr_flexele{
        margin-top: calc( 58 * (100vw / 750));
    }
    .cr_price._06{
        margin-top: calc( 33 * (100vw / 750));
    }
    .cr_price._06 span:not(:first-child) {
        padding-top: calc( 34 * (100vw / 750));
    }
    /* -------------section5-------------- */
    .cr_vi{
        width: calc( 721 * (100vw / 750));
    }
    /* -------------section6-------------- */
    .cr._sec6 .cr_logo{
        right: calc( 517 * (100vw / 750));
    }
    .cr._sec6 .cr_secimg {
        margin-top: calc( 59 * (100vw / 750));
        margin-left: calc( 170 * (100vw / 750));
    }
    .cr._sec6 .cr_flexele{
        margin-top: calc( 58 * (100vw / 750));
    }
    .cr._sec6 .cr_flexele .elem{
        width: calc( 241 * (100vw / 750));
    }
    /* -------------section7-------------- */
    .cr._sec7 .cr_logo{
        right: calc( 517 * (100vw / 750));
    }
    .cr._sec7 .cr_secimg {
        width: calc( 600 * (100vw / 750));
        margin-left: calc( 110 * (100vw / 750));
    }
    .cr._sec7 .cr_thrimg {
        width: calc( 541 * (100vw / 750));
        margin-top: calc( 59 * (100vw / 750));
        margin-left: calc( 40 * (100vw / 750));
    }
    .cr_price._07 span:not(:first-child) {
        padding-top: calc( 34 * (100vw / 750));
    }
    /* -------------section8-------------- */
    .cr._sec8 .cr_logo{
        left: calc( 517 * (100vw / 750));
    }
    .cr._sec8 .cr_secimg {
        width: calc( 602 * (100vw / 750));
        margin: 0 auto;
        margin-top: calc( 58 * (100vw / 750));
    }
    /* -------------section9-------------- */
    .cr._sec9 .cr_logo{
        right: calc( 517 * (100vw / 750));
    }
    .cr._sec9 .cr_secimg,.cr_thrimg {
        width: calc( 542 * (100vw / 750));
    }
    .cr._sec9 .cr_secimg{
        margin-left: calc( 40 * (100vw / 750));
    }
    .cr._sec9 .cr_thrimg{
        margin: 0 auto;
        margin-top: calc( 59 * (100vw / 750));
        margin-left: calc( 170 * (100vw / 750));
    }
    .cr_price._09{
        margin-top: calc( 37 * (100vw / 750));
    }
    .cr_price._09 span:not(:first-child) {
        padding-top: calc( 38 * (100vw / 750));
    }
    /* -------------section_bnt-------------- */
    .cr_bnt{
        width: calc( 322 * (100vw / 750));
        height: calc( 71 * (100vw / 750));;
        border: 1px solid #000000;
        font-size: calc( 26 * (100vw / 750));
        line-height: calc( 71 * (100vw / 750));
        letter-spacing: 0.075em;
        margin: 0 auto;
        margin-top: calc( 130 * (100vw / 750));
        margin-bottom: calc( 129 * (100vw / 750));
        text-align: center;
    }
}