@media only screen and (max-width:800px) {
    .midashi3 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
        position: relative;
        display: inline-block;
        font-size: 24px;
    }

    /* .midashi3::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -0.5em;
        display: inline-block;
        width: 1.5em;
        height: 1px;
        background-color: #9e2b37;

    } */

    .midashi {
        font-size: 20px;
        text-align: center;
        font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
        font-weight: normal;

    }

    .midashi2 {
        font-size: 20px;
        font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
        font-weight: normal;
        text-align: center;
    }

    .adv-midashi {
        font-size: 20px;
        font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
        font-weight: normal;
        position: absolute;
        top: 5%;
        left: 5%;
    }

    .title {
        font-size: 30px;
    }


    .sub {
        font-size: 16px;
        position: relative;
        display: inline-block;
        padding: 0 0 0 2.5em;
    }

    /* .sub:before {
        content: '';
        position: absolute;
        top: 50%;
        display: inline-block;
        width: 2em;
        height: 1px;
        background-color: rgb(187, 70, 70);
    } */

    .sub:before {
        left: 0;
    }

    #contact {
        height: 260vw;
        position: relative;
    }

    .bg-text-con {
        font-family: jeff-script, sans-serif;
        font-style: normal;
        font-weight: 400;
        position: absolute;
        width: 80vw;
        left: 10vw;
        ;
        font-size: 4vw;
        color: hsla(26, 36%, 41%, 0.801);
        transform: rotate(-15deg);
    }

    .contact-gr {
        opacity: 0.5;
        width: 30vw;
        height: 50vw;
        z-index: -10;
        position: absolute;
        right: 1vw;
        top: 3vw;
        background-image: linear-gradient(15deg, #30cfd0 0%, #330867 100%);

    }

    .contact-bg {
        opacity: 0.9;
        z-index: -50;
        position: absolute;
        width: 100%;
        left: 0;
        top: 20%;
    }

    .contact-bg img {
        width: 100%;
    }

    .contact-tel {
        display: flex;
        position: absolute;
        top: 28vw;
        right: 5%;
        z-index: 20;
        background: rgba(255, 255, 255);
        width: 90%;
        height: 20vw;

    }

    .contact-tel p {
        text-align: center;
        font-size: 1em;
        line-height: 16px;
        margin: auto;
        flex: 1;
    }
    .contact-tel > p {
        margin-top: 2vw;
    }
    .tel-number {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 20px!important;
        text-align: center;
    }

    .tel-number i {

        color: #74ebd5;
        padding-right: 1rem;
    }

    .contact-message {
        background: rgba(255, 255, 255, 0.9);
        position: absolute;
        width: 90%;
        left: 5%;
        top: 10vw;
        padding: 2%;
        text-align: center;
        font-size: 14px;
    }

    .form {
        font-size: 1vw;
        position: absolute;
        top: 50vw;
        padding: 5% 10% 2%;
        background: rgba(255, 255, 255, 1);
        width: 90%;
        left: 5%;
    }

    .form dt {
        font-size: 14px;
        margin: 5px 0;
    }

    .form dl {
        text-align: left;
    }

    input,
    textarea {
        border: 1px solid #e2e2e2;
        font-size: 16px;
        transform: scale(0.9);
      }

    .form .name,
    .form .shop,
    .form .adress,
    .form .email,
    .form .url,
    .form .tel,
    .form .text{
        width: 100%;
        height: 25px;
    }
    textarea {
        width: 100%;
        height: 80px;
    }
    .footer p {
        font-size: 14px;
    }

    .footer a {
        font-size: 14px;
    }
    .kasou-header {
        width: 100%;
        height: 200px;
        color: #fff;
        text-align: center;
        display: table;
    }

    .head-text {
        display: table-cell;
        vertical-align: middle;
    }

    .head-text h3 {
        font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
        font-weight: normal;
    }

    .head-title {
        font-size: 30px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
    }

    .ec-banner {
        width: 80%;
        margin: 0 auto;
    }

    .ec-data {
        position: relative;
        height: 100vw;
        margin: 10vw 0;
    }


    .ec-data-text-box {
        text-align: center;
        position: absolute;
        width: 90vw;
        height: 40vw;
        background: #fff;
        top: 8vw;
        left: 5vw;
        padding: 3vw;
        z-index: -10;
    }

    .ec-data-text-box h3 {
        font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
        font-weight: normal;
        font-size: 18px;
        margin-bottom: 1em;

    }

    .ec-data-img {
        position: absolute;
        top: 35vw;
        right: 10vw;
        width: 80vw;
    }

    .ec-data-gr1 {
        position: absolute;
        width: 10vw;
        height: 18vw;
        left: 7vw;
        bottom: 0;
        z-index: -20;
        background-image: linear-gradient(15deg, #30cfd0 0%, #330867 100%);
    }

    .ec-data-gr2 {
        position: absolute;
        width: 10vw;
        height: 18vw;
        top: 0;
        right: 7vw;
        z-index: -20;
        background-image: linear-gradient(15deg, #30cfd0 0%, #330867 100%);
    }


    .ec-merit {
        margin: 5% 0;
    }

    .ec-merit-wrap {
        text-align: center;
        margin-top: 6vw;
        display: block;
        justify-content: center;
        background-image: linear-gradient(15deg, #30cfd0 0%, #330867 100%);
        background-repeat: no-repeat;
        background-size: 100% 60%;
        background-position: center center;

    }

    .ec-merit-box {
        width: 80vw;
        border: #120867 1px solid;
        background: rgba(255, 255, 255, 1);
        padding: 2vw;
        margin: 8vw auto;
    }

    .ec-merit-box img {
        width: 100%;
        height: auto;
    }

    .ec-merit-box-img {
        width: 40%;
        margin: -6vw auto 0;
    }

    .ec-merit-text {
        font-size: 14px;
    }

    .ec-merit-text h3 {
        margin-bottom: 1em;
        font-size: 20px;
    }

    .ec-merit-text h4 {
        margin-bottom: 1em;
        font-size: 16px;
    }

    .ec-point-box {
        position: relative;
        height: 65vw;
        margin: 4vw 0;
    }

    .ec-point-text {
        padding: 1em;
        width: 80vw;
        height: 54vw;
        position: absolute;
        top: 0%;
        left: 10%;
        background: rgba(255, 255, 255, 0.9);
        z-index: 10;
    }

    .ec-point-pict {
        position: absolute;
        height: 54vw;
        top: 0;
        right: 10%;
        width: 80%;
    }

    .ec-point-gr {
        position: absolute;
        top: 0;
        width: 50%;
        height: 30vw;
        right: 12%;
        z-index: -10;
        background-image: linear-gradient(15deg, #30cfd0 0%, #330867 100%);
    }

    .ec-point-text2 {
        padding: 1em;
        width: 80%;
        height: 54vw;
        position: absolute;
        top: 0;
        right: 10%;
        background: rgba(255, 255, 255, 0.9);
        z-index: 10;
    }

    .ec-point-pict2 {
        position: absolute;
        height: 55vw;
        top: 0;
        left: 10%;
        width: 80%;
    }

    .ec-point-gr2 {
        position: absolute;
        top: 0;
        width: 50%;
        height: 30vw;
        left: 12%;
        z-index: -10;
        background-image: linear-gradient(15deg, #30cfd0 0%, #330867 100%);
    }

    .ec-point-text h3,
    .ec-point-text2 h3 {
        font-size: 30px;
    }

    .ec-point-text h4,
    .ec-point-text2 h4 {
        font-size: 18px;
        padding: 0.2em 0;
    }

    .malls {
        width: 100%;
        margin: 50px auto;
        display: flex;
        justify-content: space-around;
    }

    .mall-inner {
        padding: 40px 20px;
    }

    .mall-img {
        margin: 0 10px;
    }

    .wd-white {
        background: rgba(255, 255, 255, 0.9);
        width: 100%;
        margin: auto;
        display: block;
        justify-content: center;
    }

    .wd-btn {
        font-size: 14px;
        margin: 3% auto;
        display: block;
        width: 80%;
        line-height: 70px;
        color: #333;
        text-decoration: none;
        text-align: center;
        background-color: #FFF;
        border: solid 1px #333;
    }

    .adv {
        position: relative;
        height: 95vw;
        text-align: center;
    }


    .adv-white {
        position: absolute;
        left: 10vw;
        display: flex;
        justify-content: center;
        background: #fff;
        width: 80vw;
        height: 60vw;
        top: 25vw;
        z-index: -10;
    }

    .adv-box {
        width: 50%;
        margin: 2vw 2vw;
    }

    .adv-pict {
        width: 30%;
        margin: 1em auto;
    }

    .adv-bg {
        width: 100%;
        position: absolute;
        top: 30vw;
        z-index: -30;
    }

    .adv-gr1 {
        position: absolute;
        width: 8vw;
        height: 18vw;
        top: 15vw;
        right: 7vw;
        z-index: -20;
        background-image: linear-gradient(15deg, #30cfd0 0%, #330867 100%);
    }

    .adv-gr2 {
        position: absolute;
        width: 8vw;
        height: 18vw;
        left: 7vw;
        bottom: 3vw;
        z-index: -20;
        background-image: linear-gradient(15deg, #30cfd0 0%, #330867 100%);
    }

    .adv-text {
        text-align: center;
        width: 80%;
        position: absolute;
        top: 60vw;
        z-index: 50;
        left: 10%;
    }

    .cm-inner {
        position: static;
        height: 190vw;
        margin-top: 5%;
    }

    .cm-box1 {
        position: static;
    }

    .cm-box2 {
        position: static;
    }

    .cm-box3 {
        position: static;
    }

    .cm-box4 {
        position: static;
    }

    .cm-pict {
        width: 60vw;
        margin: 4vw auto;
    }

    .type {
        position: relative;
    }

    .type-box {
        width: 100%;
        margin: 0 auto;
        display: block;
        justify-content: center;
        background-image: url(../img/type-bg.jpg);
        background-size: cover;
    }


    .types {
        padding: 5vw;
    }

    .type-text {
        margin: 0.5em 0 0 0;
        padding: 1vw;
        background: rgba(255, 255, 255, 0.9);
    }

    .type-text p {
        margin-top: 1em;
    }

    .type-bg {
        width: 100%;
        position: absolute;
        top: 7vw;
        z-index: -10;
    }

    .web-maketing {
        position: relative;
        height: 180vw;
        margin: 5vw 0;
    }

    .web-maketing h3 {
        font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
        font-size: 48px;
        font-weight: normal;
    }

    .web-maketing-text-box {
        text-align: center;
        position: absolute;
        top: 5vw;
        width: 90%;
        height: 170vw;
        background: #fff;
        padding: 3vw;
        z-index: -10;
    }

    .web-maketing-text-box p {
        padding: 1em;
    }

    .web-maketing-text-box2 {
        display: none;
    }

    .web-maketing-img {
        position: absolute;
        padding: 0 10%;

    }

    /* .web-maketing-img2 {
        position: absolute;
        width: 80vw;
        left: 10vw;
        top: 115vw;

    } */

    .web-maketing-gr1 {
        position: absolute;
        width: 10vw;
        height: 18vw;
        top: 0;
        left: 3vw;
        bottom: 0;
        z-index: -20;
        background-image: linear-gradient(15deg, #30cfd0 0%, #330867 100%);
    }

    .web-maketing-gr2 {
        position: absolute;
        width: 10vw;
        height: 18vw;
        bottom: 0;
        right: 3vw;
        z-index: -20;
        background-image: linear-gradient(15deg, #30cfd0 0%, #330867 100%);
    }
    .system-merit-inner {
        display: flex;
    }

    .rev {
        flex-flow: row-reverse;
    }
    .system-pro {
        margin: 3% 0;
    }

    .system-pro-bg {
        margin: 3% 0 0;
        background-image: url(../img/probg.jpg);
        background-size: cover;
    }

    .system-pro-inner {
        width: 80%;
        margin: 0 auto;
        display: block;
        justify-content: center;
    }

    .tech {
        position: relative;
        margin: 5% 0;
        height: 100vw;
    }

    .tech-pict {
        position: static;
        width: 100px;
    }

    .pro-pict {
        padding: 6% 20%;
    }


    .tech-text {
        position: absolute;
        top: 25vw;
        left: 5vw;
        background: rgba(255, 255, 255, 0.9);
        width: 90vw;
        padding: 2em;
    }

    .tech-gr {
        position: absolute;
        width: 40vw;
        height: 30vw;
        top: 60vw;
        left: 0;
        z-index: -20;
        background-image: linear-gradient(15deg, #30cfd0 0%, #330867 100%);
    }

    .system-merit-inner {
        width: 100%;
        margin: 0 auto;
        color: #fff;
        text-align: left;
        font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
        font-weight: normal;
    }

    .privacy {
        margin: 1rem;
    }

    .privacy h2 {
        font-size: 18px;
        padding: 0.5em 0;
    }

    .privacy p {
        padding: 1em;
    }
    .fancy-button {
        margin: 20px;
        font-size: 16px;
    }



    /* --山口追加-- */
    .blog {
        height: 66vw;
    }

    .blog-date {
        font-size: 1.5rem;
    }

    .blog .center {
        padding-top: 7vw;
    }

    

    .blog-date {
        font-size: 1.5rem;
    }
}