@charset "UTF-8";
button {
    border: 0;
}
/* ====================================================
Media Quary
==================================================== */
@-webkit-keyframes circle-out {
    0% {
        margin: 3.1%;
        width: 93.8%;
        height: 93.8%;
        opacity: 1;
        background: #e9ece5;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        width: 88.754%;
        height: 88.754%;
        background: #e9ece5;
        opacity: 0.5;
    }
}
@keyframes circle-out {
    0% {
        margin: 3.1%;
        width: 93.8%;
        height: 93.8%;
        opacity: 1;
        background: #e9ece5;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        width: 88.754%;
        height: 88.754%;
        background: #e9ece5;
        opacity: 0.5;
    }
}

@-webkit-keyframes circle-over {
    0% {
        width: 88.754%;
        height: 88.754%;
        background: #569357;
        opacity: 0.05;
    }
    100% {
        margin: 3.1%;
        width: 93.8%;
        height: 93.8%;
        opacity: 0.5;
        background: #52ad71;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes circle-over {
    0% {
        width: 88.754%;
        height: 88.754%;
        background: #569357;
        opacity: 0.05;
    }
    100% {
        margin: 3.1%;
        width: 93.8%;
        height: 93.8%;
        opacity: 0.5;
        background: #52ad71;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@media screen and (min-width: 768px) {
    body {
        min-width: auto;
    }
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
    #wrapper {
        font-size: 1.6vw;
    }
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
    #header-site {
        font-size: 1em;
        min-width: 0;
        -webkit-transform: translateX(0) !important;
        -ms-transform: translateX(0) !important;
        transform: translateX(0) !important;
    }
    #header-site .wrap-btn-line {
        position: relative;
        bottom: auto;
    }
    #header-site .wrap-btn-line .btn-contact,
    #header-site .wrap-btn-line .btn-request {
        width: calc(33.33% - 18px);
        padding: 5px;
        margin-right: 2.5%;
        font-size: 0.85em;
        margin-top: 0;
        height: 3.813em;
        vertical-align: bottom;
    }
    #header-site .btn-try {
        width: 11.182em;
        margin: 0 24px 0 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
    #nav-site li {
        padding: 0 3.5%;
    }
}

.layout-r {
    padding-top: 82px;
}

@media screen and (min-width: 768px) {
    #wrapper .inner {
        max-width: 1000px;
    }
    .fix#nav-site .inner-nav-site {
        position: relative;
        top: auto;
        background: none;
        width: auto;
        min-width: auto;
    }
    #nav-site {
        font-size: inherit;
        height: 5.2em;
        min-width: auto !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    #nav-site {
        font-size: 0.8em;
    }
}

@media screen and (min-width: 768px) {
    #nav-site .inner {
        padding: 2.35em 0;
    }
    .mv-block {
        font-size: 14px;
        background: #c2dfc9;
    }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    .mv-block {
        font-size: 12.4px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1003px) {
    .mv-block {
        font-size: 1.236vw;
    }
}

@media screen and (min-width: 768px) {
    .mv_inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        position: relative;
        height: 32.2em;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 98%;
        padding: 0 0 3%;
    }
    .mv_ttl {
        text-align: left;
        width: auto;
        margin: 0 0 0 4.8%;
        font-weight: 500;
        letter-spacing: -2px;
        font-size: inherit;
        color: #313d36;
        line-height: 1.25;
    }
    .mv_ttl small {
        letter-spacing: 0;
        font-weight: 500;
        font-size: 1.30208em;
        line-height: 1.17;
        text-align: center;
        padding: 0.42em 5% 0.3em;
        min-width: 18.2em;
        color: #c2dfc9;
        border-radius: 999px;
        background-color: #313d36;
        display: inline-block;
        margin-bottom: 5.2%;
    }
    .mv_ttl img {
        width: 26.942em !important;
    }
    .mv_img {
        width: 24.3em;
        padding-right: 0;
        margin: 0;
        position: absolute;
        right: 1.3em;
        bottom: 4.3em;
    }
    .mv_img img {
        width: auto;
    }
    .mv_wrap {
        display: block;
        width: auto;
        max-width: none;
        margin: 0;
    }
    .mv_wrap_img {
        position: absolute;
        width: 13.75em;
        margin: 0;
        bottom: -3.9em;
        right: 7.2em;
    }
    .mv_wrap-btn {
        position: absolute;
        left: 4.6%;
        padding: 0;
        width: 19.5%;
        bottom: 14.5%;
    }
    .mv_txt {
        color: #040000;
        font-weight: 400;
        text-align: left;
        line-height: 1;
        letter-spacing: -1px;
    }
    .mv_content {
        position: absolute;
        font-size: 0.8138em;
        top: 8.5%;
        left: 5%;
    }
    .mv_content .img {
        max-width: 17em;
        margin: 2px 0 0 0;
    }
    .mv_btn {
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    #solution {
        font-size: 12.4px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1003px) {
    #solution {
        font-size: 1.236vw;
    }
}

@media screen and (min-width: 768px) {
    #solution .tl {
        color: #231815;
        font-size: 2.44141em;
        margin: 5.9% 0 0 0%;
        line-height: 1.5;
    }
    #solution .box {
        font-size: 1.2em;
        line-height: 1.8;
        padding: 0 0 22.4%;
        margin: 0 1.28% 0;
        width: 22.4%;
    }
    #solution .box:nth-child(1) {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
    #solution .box:nth-child(2) {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }
    #solution .box:nth-child(3) {
        -webkit-transform: translate(52%, 91.7%) !important;
        -ms-transform: translate(52%, 91.7%) !important;
        transform: translate(52%, 91.7%) !important;
    }
    #solution .box:nth-child(3) .trouble {
        top: 52%;
    }
    #solution .box:nth-child(3) .before {
        margin: -11.2% 0 0;
    }
    #solution .box:nth-child(3) .solution {
        top: 59%;
    }
    #solution .box:nth-child(3) .after {
        margin: -16.2% 0 0;
    }
    #solution .box:nth-child(4) {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
        -webkit-transform: translate(-52%, 91.7%) !important;
        -ms-transform: translate(-52%, 91.7%) !important;
        transform: translate(-52%, 91.7%) !important;
    }
    #solution .box:nth-child(4) .trouble {
        top: 52%;
    }
    #solution .box:nth-child(4) .before {
        margin: -11.2% 0 0;
    }
    #solution .box:nth-child(4) .solution {
        top: 59%;
    }
    #solution .box:nth-child(4) .after {
        margin: -16.2% 0 0;
    }
    #solution .wrap-illust {
        right: 0;
        width: 62%;
        margin: -3.4% auto 0;
    }
    #solution .wrap-box {
        margin: 3.8% -12% 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
    #solution .wrap-box {
        font-size: 1.25vw;
    }
}

@media screen and (min-width: 768px) {
    #solution .wrap-ov:after {
        margin: 0 0 17.8% -4.4%;
    }
    #solution .before {
        color: #65b67f;
        margin: -9.2% 0 0;
    }
    #solution .trouble {
        top: 50%;
    }
    #solution .trouble .txt {
        color: #000000;
        text-align: center;
    }
    #solution .after {
        margin: -12.2% 0 0;
    }
    #solution .solution {
        top: 54%;
    }
    #solution .solution .txt {
        text-align: center;
        margin-left: 0;
        font-size: 1.02933333333em;
        line-height: 2.04;
    }
    #point {
        background: #d6e5dd;
    }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    #point {
        font-size: 12.4px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1003px) {
    #point {
        font-size: 1.236vw;
    }
}

@media screen and (min-width: 768px) {
    #point .tl {
        color: #231815;
        padding: 6.6% 0 1.8%;
        font-size: 2.44141em;
        line-height: 1.5;
    }
    #point .picture,
    #point .picture.box-txt {
        width: 464px;
        margin: 0 auto 5.4%;
        margin-bottom: 5.4%;
        background: transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 0;
    }
    #point .wrap-txt {
        padding: 0 5.1% 3.1%;
        font-size: inherit;
    }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    #point .wrap-txt {
        font-size: 0.96vw;
    }
}

@media screen and (min-width: 768px) {
    #point .box-txt {
        -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
        width: 100%;
        margin-bottom: 7%;
    }
    #point .box-txt:first-child {
        margin-bottom: 7%;
    }
    #point .txt-point {
        color: #000000;
        padding: 0 28.2% 2.2% 4.2%;
        font-size: 1.45833333333em;
        font-weight: 500;
    }
    #point .txt-point2 {
        line-height: 1.8;
        padding: 0 29% 1.3% 4.2%;
    }
    #point .txt-point3 {
        padding: 0 30.2% 3.4% 4.2%;
        line-height: 1.9;
        padding-bottom: 3.4% !important;
    }
    #point .icon {
        color: #000000;
        margin: -3.9% auto 0;
        border-width: 4px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 2.2em;
        height: 2.2em;
        font-size: 0.856em;
        border-color: #578557;
    }
    #point .txt-icon {
        font-size: 0.35981308411em;
    }
    #point .stl {
        color: #69ac80;
        padding: 1.4em 0 0.15em 4.2%;
        font-weight: 500;
        font-size: 2.60416666667em;
    }
    #point .stl strong {
        font-weight: 800;
    }
    #point .stl3 {
        padding: 1.4em 0 0 4.2%;
    }
    #point .illust-point1 {
        padding: 4.4% 4% 4% 0;
        left: auto;
        right: 0px;
        width: 24%;
    }
    #point .illust-point2 {
        padding: 0 3% 5.8% 0;
        width: 22%;
        left: auto;
        right: 0;
    }
    #point .illust-point3 {
        padding: 20px 3.6% 4.3% 0;
        width: 23.1%;
        left: auto;
        right: 0;
    }
    #point .illust-point1,
    #point .illust-point2,
    #point .illust-point3 {
        padding: 0 1em 1em 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    #example {
        font-size: 12.4px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1003px) {
    #example {
        font-size: 1.236vw;
    }
}

@media screen and (min-width: 768px) {
    #example .tl {
        padding: 6.9% 0 4.4% 0;
        font-size: 2.44141em;
        line-height: 1.5;
    }
    #example .wrap {
        width: 89.9%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 0 0 8.3%;
    }
    #example .box {
        border-radius: 15px;
        width: 100%;
        padding: 0;
        -webkit-box-shadow: 0 0 3.2px rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 3.2px rgba(0, 0, 0, 0.5);
        margin: 0 0 4.5%;
    }
    #example .box .person {
        font-size: 0.8138em;
        color: #000000;
        line-height: 1.3;
        padding: 16.7em 0 0 1.8em;
        position: absolute;
        top: 0;
        font-weight: 500;
        left: 0;
    }
    #example .box .person .name {
        margin-left: 8px;
        font-weight: 500;
    }
    #example .box .person.two-line {
        padding-top: 18.8em;
    }
    #example .box p {
        font-size: 1.13932em;
        line-height: 1.8;
        padding: 0 2.5em 3.55em 16.9em;
        color: #1d1717;
    }
    #example .box .btn-detail a {
        font-size: 0.97656em;
        bottom: 5.9%;
        right: 3.9%;
        padding: 0 0px 0 6px;
        line-height: 27px;
        letter-spacing: -1px;
        font-weight: 500;
    }
    #example .box .btn-detail a .ico_end {
        background-size: 20px;
        background-position: right 4px center;
    }
    #example img,
    #example .img-example {
        height: 9em !important;
        max-height: none;
        position: absolute;
        margin: 0 0 0 -1.3em !important;
        left: 0;
        top: 2.3em;
        width: 18em !important;
        -o-object-fit: cover;
        object-fit: cover;
    }
    #example .stl {
        font-size: 1.2207em;
        color: #69ac80;
        padding: 9.75em 0 0 1.2em;
        position: absolute;
        top: 0;
        font-weight: 500;
        line-height: 1.4;
        left: 0;
    }
    #example .sstl {
        padding: 1.05em 0.6em 0.2em 11.8em;
        color: #69ac80;
        font-size: 1.6276em;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: -1px;
    }
    #example .link-target {
        margin: 0.8em auto 0;
    }
    #example .link-target a {
        padding: 0.9em 1.1em 0.8em;
    }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    #function {
        font-size: 12.4px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1003px) {
    #function {
        font-size: 1.236vw;
    }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    #plan {
        font-size: 12.4px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1003px) {
    #plan {
        font-size: 1.236vw;
    }
}

@media screen and (min-width: 768px) {
    #plan .inner {
        width: 84.6%;
    }
    #plan .tl {
        padding: 7.1% 0 0.5em;
        font-size: 2.44141em;
        color: #231815;
    }
    #plan .tl .note {
        font-size: 0.36666666666em;
        margin: -0.75% 0 0;
        color: #000000;
    }
    #plan .stl {
        font-size: 2.44141em;
        line-height: 1;
        color: #69ac80;
        padding: 0 0 0.32em;
    }
    #plan .stl small {
        font-size: 0.33333333333em;
        padding: 0;
    }
    #plan .stl-calcuration {
        padding: 0 0 0.56em;
    }
    #plan .caption-calcuration {
        font-size: 0.89518em;
        color: #000000;
        line-height: 1.91;
    }
    #plan .box-txt-calcuration {
        padding: 1.05em 1.01em 0.9em 1em;
        margin: 0 0 0.9em;
        letter-spacing: -0.2px;
    }
    #plan .plus {
        padding: 0 0.5em;
    }
    #plan .example-calcuration {
        margin: 2.5% 0 6%;
    }
    #plan .example-calcuration h5 {
        padding: 0.9em 0 0.44em;
    }
    #plan .txt-option {
        font-size: 1.13932em;
        line-height: 1.5;
        padding: 0 0 2.7em;
    }
    #plan .txt-option dd {
        padding: 0 0 0 14.5em;
    }
    #plan .stl-option {
        padding: 0 0 0.6em;
    }
    #plan .note-calcuration {
        margin-bottom: 9.5% !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    #stock,
    #contact {
        font-size: 12.4px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1003px) {
    #stock,
    #contact {
        font-size: 1.236vw;
    }
}

@media screen and (max-width: 767px) {
    .fix#nav-site .inner-nav-site {
        position: relative;
        top: auto;
        background: none;
        width: auto;
        min-width: auto;
    }
    #header-site .header-site__sub {
        padding-bottom: 0;
    }
    #header-site .header-site__sub .wrap-btn-line {
        display: none;
    }
    #header-site .btn-try,
    #header-site #header-site.thin .btn-try {
        visibility: hidden;
    }
    .mv_inner {
        padding: 24px 0 11px 0;
    }
    .mv_btn {
        border: 0.115em solid #00834b;
        background: #ffffff;
        color: #00834b !important;
        width: 68.9%;
        padding: 8px 10px 5px 10px;
        letter-spacing: 0;
        line-height: 1;
        border-radius: 12px;
    }
    .mv_ttl {
        font-weight: 600;
        letter-spacing: -2px;
        font-size: 0.51em;
        color: #313d36;
        line-height: 1.36;
        width: 100%;
        margin: 0 auto 3.4%;
    }
}

@media screen and (max-width: 767px) and (max-width: 374px) {
    .mv_ttl {
        font-size: 0.48em;
    }
}

@media screen and (max-width: 767px) {
    .mv_ttl small {
        letter-spacing: 0;
        font-weight: 500;
        font-size: 0.64em;
        line-height: 1.17;
        text-align: center;
        padding: 0.29em 5% 0.24em;
        min-width: 16.3em;
        color: #c2dfc9;
        border-radius: 999px;
        background-color: #313d36;
        display: inline-block;
        margin-bottom: 3.9%;
    }
    .mv_ttl img {
        width: 9.6584em !important;
        margin: 0 auto;
    }
    .mv_img {
        max-width: 420px;
        margin: 0 auto 9px;
    }
    .mv_txt {
        text-align: center;
        font-size: 0.9921em;
    }
    .mv_content .img {
        margin: 9px auto 12px;
    }
    .mv_wrap-btn img {
        width: 50.2% !important;
        margin: 11px auto 1px;
    }
    #solution .trouble .txt {
        text-align: center;
    }
    #solution .solution .txt {
        text-align: center;
    }
    #point {
        background: #d6e5dd;
    }
    #point .inner {
        width: 97.5%;
    }
    #point .picture {
        display: none;
    }
    #point .icon {
        color: #000000;
        border-color: #578557;
    }
    #point .stl {
        color: #69ac80;
        font-size: 0.506em;
        line-height: 1.36;
        font-weight: 500;
        padding: 1.4em 0 0.77em 5.5%;
    }
    #point .stl strong {
        font-weight: 600;
    }
    #point .icon {
        margin: -4.8% 0 0 0;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        left: 48.8%;
        border-width: 0.15em;
        width: 1.77em;
        height: 1.77em;
        font-size: 0.8em;
        font-weight: 600;
    }
    #point .box-txt {
        border-radius: 0.3em;
        margin: 0 0 12.9%;
    }
    #point .box-txt:first-child {
        margin-bottom: 13%;
    }
    #point .txt-point {
        font-size: 0.23811em;
        line-height: 1.35;
        color: #000000;
        padding: 0 5% 0 5.5%;
    }
    #point .txt-point2 {
        line-height: 1.57;
    }
    #point .txt-point3 {
        line-height: 1.5;
    }
    #point .illust-point1 {
        width: 69.341%;
        padding: 9.3% 0 6.8% 14.5%;
    }
    #point .illust-point2 {
        width: 69.2%;
        padding: 4.8% 0 4.9% 14%;
    }
    #point .illust-point3 {
        width: 68.7%;
        padding: 7.8% 0 5.9% 14.3%;
    }
    #plan p {
        font-size: 0.4em;
    }
}

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