#solution .bnr-telework {
    position: relative;
    text-align: center;
    margin: 8% auto;
    padding: 0 4.3%;
    max-width: 907px;
}

#solution .bnr-telework a,
#plan .bnr-telework a {
    position: absolute;
    left: 0;
    right: 0;
    top: 49.5%;
    display: inline-block;
    margin: 0 auto;
    width: 89%;
}

#plan .bnr-telework a {
    width: 84%;
}

#solution .bnr-telework img {
    margin: 0 auto;
    max-width: 907px;
}

@media (max-width: 640px) {
    #solution .bnr-telework {
        padding: 0;
    }

    #plan .bnr-telework {
        padding: 0 3.5%;
    }
}

@media (min-width: 641px) {
    #solution .bnr-telework a:hover,
    #plan .bnr-telework a:hover {
        opacity: 0.7 !important;
    }
}

#plan .inner {
    overflow: visible;
}

@media (min-width: 768px) {
    #plan .note-calcuration {
        margin-bottom: 12.3%;
    }

    #solution .bnr-telework a,
    #plan .bnr-telework a {
        top: 54.7%;
        width: 40.12%;
    }

    #plan .bnr-telework a {
        width: 45.7%;
    }

    #plan tl.telework {
        margin: 0 -0.882em;
    }
}

@media screen and (min-width: 768px) {
    #example img,
    #example .img-example {
        margin-left: 0 !important;
    }
}

@media screen and (min-width: 768px) {
    #point .stl {
        padding: 1.4em 0 1.2em 4.2%;
        line-height: 1.2;
    }
    .mv_img {
        left: auto !important;
        margin: 0 auto !important;
    }
    .mv_ttl {
        top: 21% !important;
        margin-left: 0 !important;
        letter-spacing: 0.07em !important;
    }
    .mv_txt {
        font-size: 0.9em !important;
    }
    #point .picture.box-txt {
        margin-bottom: 9% !important;
    }
}
@media screen and (min-width: 1130px) {
    .mv_ttl {
        font-size: 1.6em !important;
    }
}

/* ====================================================
Media Quary
==================================================== */
@media screen and (min-width: 768px) {
    .mv-block {
        background-color: #c3e9ca;
        font-size: 19.39px;
        color: #437338;
    }
    .mv_inner {
        display: block;
        text-align: center;
        height: auto;
        padding: 0;
    }
    .mv_img {
        width: auto;
        position: relative;
        right: auto;
        bottom: auto;
    }
    .mv_ttl {
        z-index: 5;
        text-align: center;
        position: absolute;
        left: 10px;
        right: 10px;
        font-weight: 600;
        top: 25%;
        color: #437338;
        font-size: 1.37em;
        letter-spacing: 0.2em;
    }
    .mv_txt {
        background-color: #fff;
        text-align: center;
        color: #668c5d;
        font-weight: 600;
        font-size: 0.78em;
        line-height: 1.46;
        padding: 1.8% 1% 1.6%;
    }
    .mv_stl {
        display: none;
    }
    .mv_ml {
        display: none;
    }
    .mv_btn {
        display: none;
    }
    .mv_gd {
        display: none;
    }
    #solution .box:nth-child(1) {
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
        order: 0;
        -webkit-transform: translate(4%, 34.7%) !important;
        -ms-transform: translate(4%, 34.7%) !important;
        transform: translate(4%, 34.7%) !important;
    }
    #solution .box:nth-child(1) .wrap-ov:after {
        margin: 0 0 12% -4.4%;
    }
    #solution .box:nth-child(2) {
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
        order: 0;
    }
    #solution .box:nth-child(3) {
        -webkit-transform: translate(-2%, 34.7%) !important;
        -ms-transform: translate(-2%, 34.7%) !important;
        transform: translate(-2%, 34.7%) !important;
    }
    #solution .box:nth-child(4) {
        display: none;
    }
    #solution .wrap-illust {
        margin: -5% auto 0;
    }
    #point .picture,
    #point #point .picture.box-txt {
        width: 85.8% !important;
        margin-bottom: 6.2% !important;
    }
    #point .picture p,
    #point #point .picture.box-txt p {
        font-size: 0.82em;
        font-weight: 600;
        text-align: right;
        margin: 1.7em 0 0;
    }
    #point .txt-point {
        padding: 0 32% 2.2% 4.2%;
    }
    #point .txt-point2 {
        line-height: 1.5;
        padding: 0 34% 3.3% 4.2%;
    }
    #point .txt-point2 small {
        display: block;
        font-size: 0.75em;
    }
    #point .txt-point3 {
        padding: 0 35.2% 3.4% 4.2%;
    }
    #point .illust-point1 {
        padding: 2.4% 3.3% 5.8% 0;
        width: 26.2%;
    }
    #point .illust-point2 {
        padding: 0 3% 8.3% 0;
        width: 26%;
        right: -0.6%;
    }
    #point .illust-point3 {
        padding: 20px 0.1% 2.6% 0;
        width: 32.1%;
    }
    #point .illust-point1,
    #point .illust-point2,
    #point .illust-point3 {
        padding: 0 1em 1em 0;
    }
    #point .stl4 strong {
        font-size: 90%;
    }
    #example .wrap {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    #example .box {
        margin: 0 0 1.6%;
        width: calc(50% - 5px);
    }
    #example .box .sstl {
        padding: 0.6em 0.7em 0;
        min-height: 4.45em;
    }
    #example .box .fix-space {
        margin-right: -0.4em;
    }
    #example .box .img-example {
        position: relative;
        margin: 0 !important;
        top: auto;
        left: auto;
        width: 16.6em !important;
        float: none;
    }
    #example .box .stl {
        position: relative;
        top: auto;
        left: auto;
        padding: 0.6em 1em 0.1em;
    }
    #example .box .person {
        position: relative;
        top: auto;
        left: auto;
        padding: 0 1.6em 3.7em;
    }
    #example .box .person.two-line {
        padding-top: 0;
    }
    #example .box .btn-detail a {
        bottom: 11.2%;
        right: 7.8%;
    }
    #example .box:first-child {
        width: 100%;
    }
    #example .box:first-child .sstl {
        text-align: center;
        min-height: auto;
        padding-bottom: 0.5em;
    }
    #example .box:first-child .person {
        padding-bottom: 2em;
    }
    #example .box:first-child .flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    #example .box:first-child .col-l {
        width: 32%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    #example .box:first-child .col-r {
        width: 68%;
    }
    #example .box:first-child .col-r p.txt {
        padding: 0 2.5em 0.35em 2em;
        margin-top: -0.3em;
    }
    #example .box:first-child .col-r .btn-detail a {
        position: relative;
        right: auto;
        bottom: auto;
        margin: 0 2.25em 1.3em;
    }
    #function .box-txt p small {
        font-size: 0.84em;
        display: block;
    }
    #function .illust01 {
        margin: -2px 0 0.35em 6.9%;
        width: 16.2%;
    }
    #function .illust03 {
        margin: -3px 0 0 6%;
        width: 18.4%;
    }
    #function .illust02 {
        margin: -2.9% 0 0 4.97%;
        width: 20.3%;
    }
    #function .illust04 {
        width: 21.5%;
        margin: 0 0 0 4.8%;
    }
    #plan .example-calcuration {
        margin: 4.5% 0 9.5%;
        padding: 0 5.8% 1.2em;
        background-color: #e0ede6;
    }
    #plan .example-calcuration.mb2 {
        margin-bottom: -2%;
    }
    #plan .example-calcuration small {
        color: #699080;
        margin-bottom: 2%;
    }
    #plan .example-calcuration h5 {
        font-weight: 600;
        color: #699080;
        font-size: 1.65em;
        padding: 0.7em 0 1.3em;
        text-align: left;
    }
    #plan .example-calcuration h5 small {
        display: block;
        font-weight: 600;
        line-height: 1.57;
        font-size: 0.7em;
    }
    #plan .example-calcuration .box-txt-calcuration {
        background-color: #699080;
        background: transparent;
        margin: 0 0 0.75em;
        padding: 1.1em 1em 1.1em 0.48em;
        font-size: 1.16em;
    }
    #plan .example-calcuration .box-txt-calcuration.answer {
        font-size: 1.3em;
        padding: 1.05em 0.56em 1.05em 1em;
    }
    #plan .example-calcuration .plus {
        padding: 0 0.02em 0 0.1em;
    }
}

@media screen and (max-width: 767px) {
    .mv_inner {
        width: 100%;
        text-align: center;
        padding: 24px 0 10px 0;
    }
    .mv_img {
        max-width: none;
        margin: 0 auto;
        padding: 0 1% 0 4%;
        width: auto;
    }
    .mv_ttl {
        color: #437338;
        font-size: 0.54em;
        margin: 6% auto 2%;
    }
    .mv_txt {
        background-color: #fff;
        text-align: center;
        color: #668c5d;
        font-weight: 600;
        font-size: 0.28em;
        line-height: 1.6;
        padding: 4.2% 1% 2.4%;
    }
    .mv_stl {
        font-size: 0.25em;
        text-align: right;
        padding: 0 0.5em;
    }
    .mv_ml {
        width: 4.4em;
        margin: 4.5% auto 2.2%;
    }
    .mv_btn {
        width: 61.9%;
        padding: 8px 10px 7px 10px;
        margin: 0 auto 2.4%;
    }
    .mv_gd {
        width: 45%;
        margin: 0 auto;
    }
    #solution .box:nth-child(1) {
        float: none;
        margin: 0 auto;
    }
    #solution .box:nth-child(1) .wrap-ov:after {
        margin: 0 0 16% -3.5%;
    }
    #solution .box:nth-child(2) {
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
        order: 0;
        float: left;
        -webkit-transform: translate(-8%, -12%) !important;
        -ms-transform: translate(-8%, -12%) !important;
        transform: translate(-8%, -12%) !important;
    }
    #solution .box:nth-child(3) {
        -webkit-transform: translate(8%, -12%) !important;
        -ms-transform: translate(8%, -12%) !important;
        transform: translate(8%, -12%) !important;
        float: right;
    }
    #solution .box:nth-child(4) {
        display: none;
    }
    #solution .wrap-illust {
        margin: -20.5% 0 0 -6%;
    }
    #example .wrap {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    #example .box {
        border-radius: 0.3em;
        padding: 0px 2.8% 10.5% 4.8%;
    }
    #example .box .img-example {
        width: 73%;
        margin: 0 0 0 -9%;
    }
    #example .box .sstl {
        font-size: 0.415em;
        padding: 0.5em 0 0;
        letter-spacing: -1px;
        min-height: 4.6em;
    }
    #example .box .person {
        line-height: 1.3;
    }
    #example .box .stl {
        padding: 1.1em 0 0.05em;
    }
    #example .box .btn-detail a {
        bottom: 11.6%;
    }
    #example .box:first-child {
        padding: 0 7.463%;
    }
    #example .box:first-child .sstl {
        font-size: 0.28em;
        line-height: 1.536;
        text-align: center;
        letter-spacing: -1px;
        margin: 0 -1em;
        padding: 1.25em 0 0.55em;
        min-height: auto;
    }
    #example .box:first-child .img-example {
        width: 108%;
        margin: 6.8% 0 0 -9%;
    }
    #example .box:first-child .person {
        line-height: 1.455;
    }
    #example .box:first-child .btn-detail a {
        bottom: 3%;
    }
    #example .fix-space {
        margin-right: -0.4em;
    }
    #plan .example-calcuration small {
        font-size: 0.24em;
        font-weight: 300;
        color: #699080;
        display: block;
    }
    #plan .example-calcuration h5 {
        color: #699080;
        font-size: 0.4em;
        text-align: left;
    }
    #plan .example-calcuration h5 small {
        display: block;
        font-weight: 300;
        line-height: 1.57;
        font-size: 0.67em;
    }
}

a.btn-try {
    white-space: nowrap;
}

@media screen and (min-width: 768px) {
    .btn-contact {
        min-width: 150px;
        display: inline-block;
    }

    a.btn-try .txt-try {
        font-size: 0.7em;
        margin-top: -3px;
    }
}

/* To maintain the old style */
@media screen and (max-width: 767px) {
    .mv-block {
        padding-top: 20vw;
    }
}

#ricoh-logo {
    margin-top: 60px;
}

@media screen and (min-width: 768px) {
    #ricoh-logo {
        margin-top: 20px;
    }
}

@media screen and (max-width: 575px) {
    .site-header .brand-logo {
        margin-top: 0;
    }
    .brand-logo {
        width: 140px;
    }
}

/* Adjusted View on Tablet */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .btn-contact {
        min-width: auto;
    }
}
