:root {
    --main-color: #ff7600;
    --mb-fb-17: 2.2368421052632vw;
    --mb-fs-18: 2.3684210526316vw;
    --mb-fs-24: 3.1578947368421vw;
    --mb-fs-30: 3.9473684210526vw;
    --mb-fs-36: 4.7368421052632vw;
    --mb-fs-59: 7.7631578947368vw;
    --mb-fs-35: 4.6052631578947vw;
    --mb-lh-22: 2.8947368421053vw;
    --mb-lh-32: 4.2105263157895vw;
    --mb-lh-35: 4.6052631578947vw;
    --mb-lh-36: 4.7368421052632vw;
    --mb-lh-47: 6.1842105263158vw;
    --mb-lh-70: 9.2105263157895vw;
    --mb-lh-79: 10.394736842105vw;
    --mb-text-color-ff7600: #ff7600;
    --mb-text-color--000000: #000000;
    --border-5px: 0.2683843263553409vw;

}

@media (max-width: 760px) {
    :root {
        --border-5px: 0.65789473684211vw;  
    }
}

.d-inline-table {
     display: inline-table; 
}

body {
    background: #EDE9E2;
}

p {
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
    font-style: inherit !important;
    font-variant: inherit !important;
    text-transform: inherit !important;
    opacity: 1;
}

.branding-main-content {
    background: var(--bg-url);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#page {
    overflow: hidden !important;
}

.branding section {
    padding: 0%;
}

section.section.main-features-title {
    margin-bottom: 5.2083333333333vw;
    margin-top: -6vh;
}

section.section.service {
    margin-bottom: 16vw;
}

.branding .features {
    padding-bottom: 6.854167vw;
}

.feature-item {
    position: relative;
    z-index: 1;
}

.feature-item:after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0.8051529790660226vw;
    right: -0.8051529790660226vw;
    background-color: #fff;
    border: #000 solid var(--border-5px);
    border-radius: 0.78125vw;
    box-shadow: 0px 0px 30px 0px rgba(0, 42, 106, 0.1);
}

.feature-icon {
    position: absolute;
    left: -3.125vw;
    top: -3.59375vw;
    width: 38.385416666667vw;
    height: 9.4791666666667vw;
    z-index: 2;
    background-repeat: no-repeat !important;
    background-size: 100% !important;
}


.feature-branding {
    font-size: 5.9vw;
    font-weight: 900;
    margin: -1vw 1vw -1vw 1vw;
}

#home {
    overflow: hidden;
    position: relative;
    height: 21vw;
    background: var(--bg-url);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
}
#home-mb {
    display: none;
}
@media (min-width: 1920px) {
    #home {
        background-size: 100% auto;
    }
}

#home img {
    width: 100%;
    height: 43.24045407636739vh;
    object-fit: cover;
}


.feature-image {
    position: absolute;
    right: -12.760416666667vw;
    top: 13.415892672859vh;
    width: 59.360364583333vw;
    height: 34.375vw;
    z-index: 2;
}

.inner-image {
    height: 100%;
    overflow: hidden;
    border-bottom: 4px solid black;
    border-right: 4px solid black;
}

.inner-image img {
    height: 100%;
    width: 100%;
    -ms-transform: skewX(-12deg);
    /* IE 9 */
    -moz-transform: skewX(-12deg);
    /* Firefox */
    -webkit-transform: skewX(-12deg);
    /* Safari and Chrome */
    -o-transform: skewX(-12deg);
    /* Opera */
    transform: skewX(-12deg);
    -ms-transform-origin: 100% 100%;
    /* IE 9 */
    -webkit-transform-origin: 100% 100%;
    /* Safari and Chrome */
    -moz-transform-origin: 100% 100%;
    /* Firefox */
    -o-transform-origin: 100% 100%;
    /* Opera */
    transform-origin: 100% 100%;
    border: 3px solid black;
}

.brand-next {
    position: relative;
    display: inline-block;
    padding: 6px 12px;
    background: #000;
    color: #11c7b2;
    transform: skew(-13deg);
    margin-left: 23px;
}

.brand-next::before {
    position: absolute;
    content: "";
    top: -6px;
    left: -23px;
    border-style: solid;
    height: 0;
    width: 25%;
    border-color: #000 transparent transparent transparent;
    border-width: 33px 5px 0 7px;
    transform: skew(9deg);
}

.brand-next::after {
    position: absolute;
    content: "";
    top: -13px;
    right: -24px;
    border-top: 25px solid transparent;
    border-bottom: 42px solid transparent;
    border-left: 30px solid #000;
    transform: skew(14deg, 10deg);
}

.studio-title {
    min-height: 19.143446852425vh;
    border-top: var(--border-5px) solid black;
    border-bottom: var(--border-5px) solid black;
}

.studio-title .content {
    font-size: 5.6770833333333vw;
    font-weight: bold;
    line-height: 19.143446852425vh;
}

.r-service {
    justify-content:center;
    align-items: center;
}

.service .service-item {
    background: #fff;
    padding: 30px;
    border-radius: unset;
    transform: skew(-12deg);
    border: 2px solid black;
    background: url("http://localhost/natsume-atari/wp-content/themes/natsume-atari/assets/image/studio.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 16vw;
    position: relative;
    margin: 12%;
}

.service .service-item-detail {
    border-radius: unset;
    transform: skew(-10deg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: -74%;
    left: 7.5%;
    width: 26.145833333333vw;
    height: 16.5625vw;
    position: absolute;
}

.service-items {
    margin-bottom: 16vh !important;
    position: relative;
    width: 29.791666666667vw;
    padding-left: 0px;
    padding-right: 0px;
    margin-right: 0.57291666666667vw;
}

.service-items .wrapper {
    transform-origin: 0 100%;
    transform: skewX(-10deg);
    width: fit-content;
    border: var(--border-5px) solid #000000;
}

.service .service-item-detail .item-title {
    color: var(--main-color);
    font-size: 1.4583333333333vw;
    font-weight: bold;
    line-height: 2.0833333333333vw;
    background: #000000;
    text-align: center;
    padding: 0.46875vw;
    border: var(--border-5px) solid #000000;
}

.service .service-item-detail .item-content {
    position: absolute;
    min-height: 68.4%;
    height: max-content;
    width: 100%;
    color: black;
    font-size: 0.9375vw;
    font-weight: bold;
    background: var(--main-color);
    text-align: left;
    line-height: 1.4583333333333vw;
    border: var(--border-5px) solid #000000;
    display: table-cell;
    vertical-align: middle;
}

.service .service-item-detail .unskew {
    transform: skewX(10deg);
}

.service .service-item-detail .unskew-content {
    height: max-content;
    text-align: left;
    width: 22.98vw;
    vertical-align: middle;
    margin: auto;
    padding-top: 0.78125vw;
}

.main-features-title .features-title {
    position: relative;
    display: inline-block;
    padding: 6px 12px;
    background: #000;
    color: #11c7b2;
    transform: skew(-13deg);
    margin-left: -20%;
    margin-top: 10%;
    margin-bottom: 10%;
    width: 100%;
    text-align: center;
    font-size: 1.5vw;
    font-weight: bolder;
    height: auto;
    padding: 2%;
    padding-left: 22%;
}

.main-features-title .features-title:before {
    position: absolute;
    content: "";
    top: -10%;
    right: -14%;
    border-style: solid;
    height: 0px;
    width: 6%;
    border-color: #000 transparent transparent transparent;
    border-width: 3vw 0.4vw 0 0.7vw;
    transform: skew(10deg);
}

.main-features-title .features-title::after {
    position: absolute;
    content: "";
    top: 21%;
    right: -10%;
    border-style: solid;
    height: 0px;
    width: 9%;
    transform: skew(11deg);
    border-top: transparent;
    border-bottom: 3.1vw solid #000;
    border-left: 0.8vw solid transparent;
    border-right: 0.8vw solid transparent;
}

.mfs-blog {
    margin-right: 0.9375vw;
    margin-left: 5.2083333333333vw;
    border: var(--border-5px) solid #000000;
    border-radius: 0.78125vw;
    background: #fef9f0;
    height: fit-content;
    padding: 0px !important;
    margin-bottom: 7.8125vw;
    width: 41.71875vw;
    position: relative;
}

.brand-btn {
    position: absolute;
    /* margin: 34px; */
    padding: 1vw 1vw;
    background: #000;
    border-radius: 0.5vw;
    width: 100%;
    text-align: center;
    display: flex;
    height: 7vw;
}

.brand-btn-link>span {
    display: inline-block;
    color: #fff;
    font-weight: 600;
    font-size: 1vw;
}

.btn-rhombus {
    position: absolute;
    bottom: -1.5vw;
    left: 23%;
    width: 1.5vw;
    height: 1.5vw;
    background: #000;
    transform: skew(-38deg);
}

span.btn-rhombus::before {
    position: absolute;
    content: "";
    bottom: -1.5vw;
    left: 0.5vw;
    border-top: 0px solid transparent;
    border-bottom: 2vw solid transparent;
    border-right: 2vw solid #000;
    transform: skew(-223deg);
}

.mfs-link {
    position: absolute;
    top: -1.8229166666667vw;
    left: -2.34375vw;
    width: 31.927083333333vw;
    height: 10.338541666667vw;
    z-index: 2;
}

.mfs-thumb {
    margin-top: 1.9791666666667vw;
    height: 21.510416666667vw;
}

.mfs-thumb img {
    max-width: 100%;
    height: 21.510416666667vw;
    object-fit: cover;
}

.client-info {
    padding: 2.0833333333333vw 3.359375vw 2.083333vw 3.359375vw;
    font-size: 0.9375vw;
    line-height: 1.6666666666667vw;
    letter-spacing: 0px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    opacity: 1;
    max-width: 41.2vw;
}

.client-info.read-more.js-read-more p {
    /* max-width: 42vw; */
}

.mfs-blog-h .client-info {
    padding-left: 4.0104166666667vw;
    padding-right: 4.0104166666667vw;
}

.client-info.custom-cli {
    padding: 1.3020833333333vw 1.5625vw 1.3020833333333vw 1.5625vw;
}

.b-box-shadow {
    position: absolute;
    width: 100%;
    height: 7vw;
    background-color: white;
    border: 0.3vw solid black;
    border-radius: 0.5vw;
    z-index: 0;
    left: 1vw;
    top: 1vw;
}

.read-more {
    /* border-top: var(--border-5px) solid #000000; */
    /* border-bottom: var(--border-5px) solid #000000; */
}

.rm-title {
    text-align: center;
    margin-top: 2.34375vw;
    font-weight: bold;
    font-size: 1.5625vw;
    color: #000000;
    letter-spacing: 0.234375vw;
    line-height: 3.6458333333333vw;
}

.rm-btn {
    text-align: center;
    margin-top: 4.1666666666667vw;
    margin-bottom: 2.34375vw;
}

.rm-img {
    width: 28.125vw;
}

.mr-footer {
    min-height: 4.6439628482972vh;
}

.rm-container .brand-btn {
    position: relative;
    height: 4vw;
    margin-bottom: 5vw;
}

.rm-container .btn-rhombus {
    left: 85%;
}

.fi-title {
    font-size: 1.875vw;
    font-weight: bold;
    text-align: left;
    opacity: 1;
    letter-spacing: 1.88px;
    line-height: 1.8229166666667vw;
}

.fi-content {
    margin-top: 2.0639834881321vh;
    text-align: left;
    font-size: 1.25vw;
    letter-spacing: 0px;
    font-weight: 500;
    line-height: 2.0833333333333vw;
    color: #000000;
    font-style: normal;
    font-variant: normal;
    opacity: 1;
     max-width: 39.114583333333vw; 
}

.ft-content {
    padding-top: 5.78125vw;
    padding-left: 5.1041666666667vw;
    padding-right: 30.833333333333vw;
    padding-bottom: 8.175vw;
    background-color: #fff;
    border: #000 solid var(--border-5px);
    border-radius: 0.78125vw;
    box-shadow: 0px 0px 30px 0px rgba(0, 42, 106, 0.1);
}


.ft-read-more {
    width: 10.208333333333vw;
    height: 8.25593395252838vh;
    margin-top: 2.6041666666667vw;
    margin-bottom: 2.34375vw;
}

.studio-title-section {
    margin-bottom: 2.9166666666667vw;
}

.brand-title {
    left: -6.039721vw;
}

.circle {
    background: #11C7B2;
    width: 4.7916666666667vw;
    height: 4.7916666666667vw;
    border-radius: 100%;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    color: #FFFFFF;
    font-size: 1.1458333333333vw;
    line-height: 1.4583333333333vw;
}

.ci-content {
    margin-bottom: 0.625vw;
}

.c-circle {
    width: 4.7916666666667vw;
    height: 4.7916666666667vw;
    padding: 0;
}

.ci-text {
    padding-left: 1.3020833333333vw;
    padding-right: 0px;
    width: 31.25vw;
}

.hoverScale {
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
}

.zoom-effect-container {
    overflow: hidden;
    position: relative;
}

.zoom-effect-container:hover .hoverScale {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
    filter: brightness(0.5) contrast(0.9) blur(0.09px);
}

.wrapper {
    padding: 0px;
    margin: 0px;
}

.wrapper .image {
    display: block;
    position: relative;
    width: 100%;
    height: 34.375vw;
    /* padding-bottom: 25%; */
    transform-origin: 0 100%;
    transform: skewX(-11deg) translatez(1px);
    overflow: hidden;
    border: var(--border-5px) solid #000000;
    box-shadow: var(--border-5px) var(--border-5px) 0.52083333333333vw #0000002B;
}


.wrapper .image:hover:before {
    -webkit-transform: scale(1.08);
    transform: scale(1.08) skewX(10deg);
    filter: brightness(0.5) contrast(0.9) blur(0.09px);
}


.wrapper .image:before {
    content: '';
    position: absolute;
    width: 111.184%;
    height: 101.694%;
    background-image: var(--si-image-url);
    background-size: cover;
    background-position: center;
    transform-origin: inherit;
    transform: skewX(10deg);
    left: -0.3%;
    bottom: -0.9%;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
}


.wrapper .si-image {
    display: block;
    position: relative;
    width: 26.366666666667vw;
    height: 19.427083333333vw;
    overflow: hidden;
}


.wrapper .si-image:before {
    content: '';
    position: absolute;
    width: 115.27%;
    height: 102.759%;
    background-image: var(--si-image-url);
    background-size: 100% 100%;
    background-position: center;
    transform-origin: center;
    transform: skewX(10deg);
    left: -7.6%;
    top: -1.5%;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
}

.wrapper .si-image:hover:before {
    -webkit-transform: scale(1.08);
    transform: scale(1.08) skewX(10deg);
    filter: brightness(0.5) contrast(0.9) blur(0.09px);
}

@media (min-width: 761px) {
    .mfs-blog-l {
        min-height: 38.072916666667vw;
    }

    .mfs-blog-h {
        min-height: 42.760416666667vw;
    }
}

/* max-width design mobie: 760 */

@media (max-width: 760px) {
    .branding-main-content {
        background: var(--mobile-bg-url);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
    }
    
    #home {
        display: none;
    }

    #home-mb {
        display: inline;
        width: 100%;
        overflow: hidden;
        position: relative;
        background: var(--bg-url);
        background-repeat: no-repeat;
        background-size: 252.63157894737vw;
        background-position: center;
    }

    .feature-icon {
        position: absolute;
        left: -2.5vw;
        top: 7.8947368421053vw;
        width: 56.973684210526vw;
        height: 14.078947368421vw;
        z-index: 2;
        background-repeat: no-repeat !important;
        background-size: 100% !important;
    }

    .feature-item {
        margin-top: 15.131578947368vw;
        margin-left: -17px;
        width: 93.421052631579vw;
    }

    .ft-content {
        border-radius: 0.78125vw 0.78125vw  0px 0px;
        padding-top: 13.815789473684vw;
        padding-left: 6.5789473684211vw;
        padding-right: 9.2105263157895vw;
        padding-bottom: calc(42.421053vw - 2.5rem);
    }

    .feature-item:after {
        width: 105%;
        top: 1.3157894736842vw;
        right: -1.3157894736842vw;
    }

    .fi-title {
        text-align: left;
        color: var(--mb-text-color-ff7600);
        font-size: var(--mb-fs-36);
        line-height: var(--mb-lh-35);
        letter-spacing: 0px;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        opacity: 1;   
    }

    .fi-content {
        margin-top: 5.2631578947368vw;
        color: var(--mb-text-color--000000);
        text-align: left;
        font-size: var(--mb-fs-24);
        line-height: var(--mb-lh-36);
        letter-spacing: 0px;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        opacity: 1;
        max-width: unset;
    }

    .fi-content p {
        margin-bottom: 2.5rem;
    }

    .feature-image {
        top: unset;
        right: unset;
        bottom: -29.605263157895vw;
        left: 13.815789473684vw;
        width: 116.71052631579vw;
        height: 60.789473684211vw;
    }

    .wrapper .image {
        width: 104.90789473684vw;
        height: 60.789473684211vw; 
    }

    .branding .features {
        padding-bottom: 50vw;
    }

    .studio-title {
        min-height: 13.421052631579vw;
    }

    .studio-title .content {
        text-align: center;
        color: var(--mb-text-color--000000);
        font-size: var(--mb-fs-59);
        line-height: var(--mb-lh-79);
        letter-spacing: 0px;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        opacity: 1;
    }

    .studio-title-section {
        margin-bottom: 15.434211vw;
    }

    .wrapper .si-image {
        width: 66.610526315789vw;
        height: 49.078947368421vw;
    }

    .wrapper .image:before {
        content: '';
        position: absolute;
        width: 111.605%;
        height: 102.214%;
        background-image: var(--si-image-url);
        background-size: cover;
        background-position: center;
        transform-origin: inherit;
        transform: skewX(10deg);
        left: -0.8%;
        bottom: -1.2%;
        -webkit-transition: 0.4s ease;
        transition: 0.4s ease;
    }

    .service .service-item-detail {
        width: 64.605263157895vw;
        height: 41.842105263158vw;
    }

    .r-service {
        padding-left: 12.368421052632vw;
        justify-content: unset;
    }

    .service-items {
        width: 66.610526315789vw;
        margin-bottom: 44.631579vw !important;
    } 

    .service .service-item-detail .item-title {
        text-align: center;
        color: var(--mb-text-color-ff7600);
        font-size: var(--mb-fs-35);
        line-height: var(--mb-lh-47);
        letter-spacing: 0px;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        opacity: 1;
        padding: 0.92105263157895vw 0px 0.92105263157895vw 0px;
    }

    .service .service-item-detail .item-content {
        min-height: 27.631578947368vw;
        border-top: unset;
        font-size: var(--mb-fs-18);
        line-height: var(--mb-lh-35);
        letter-spacing: 0px;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        opacity: 1;
    }

    .service .service-item-detail .unskew-content {
        height: max-content;
        text-align: left;
        width: 57.53vw;
        vertical-align: middle;
        margin: auto;
        padding-top: 0.78125vw;
    }

    section.section.service {
        margin-bottom: unset;
    }

    .brand-title {
        left: unset;
        padding-left: 0px;
        width: 94.868421052632vw;
        height: 12.5vw;
        margin-top: 9.026316vw;
        margin-bottom: 20.868421vw;
    }

    section.section.main-features-title {
        margin-bottom: unset;
        margin-top: unset;
    }

    .mfs-link {
        width: 62.894736842105vw;
        height: 20.263157894737vw;
        left: -4.6052631578947vw;
        top: -3.9473684210526vw;
    }

    .mfs-blog {
        width: 82.236842105263vw;
        margin-left: 11.184210526316vw;
    }

    .mfs-blog p {
        margin-bottom: unset;
    }

    .mfs-blog-l {
        min-height: 75vw;
    }

    .mfs-blog-l .client-info {
        /* height: 16.710526315789vw; */
        /* overflow-y: scroll; */
    }

    .mfs-thumb {
        margin-top: 4.3421052631579vw;
        height: 42.5vw;
    }

    .mfs-thumb img {
        max-width: 100%;
        height: 42.5vw;
        object-fit: cover;
    }
    .client-info {
        padding: unset;
        width: 67.763157894737vw;
        max-width: 67.763157894737vw;
        margin-bottom: 6.1842105263158vw;
        margin-top: 3.9473684210526vw;
        font-size: var(--mb-fs-18);
        line-height: var(--mb-lh-32);
        letter-spacing: 0px;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        opacity: 1;
    }

    .mfs-blog-h .client-info {
        width: 65.526315789474vw;
        padding-left: unset;
        padding-right: unset;
    }

    .mfs-blog-h .client-info.custom-cli {
        width: 100%;
        max-width: 100%;
    }

    .c-circle {
        width: 9.4736842105263vw;
        height: 9.4736842105263vw;
        padding: 0;
    }

    .circle {
        width: 9.4736842105263vw;
        height: 9.4736842105263vw;
        font-size: var(--mb-fs-17);
        line-height: var(--mb-lh-22);
        letter-spacing: 0px;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        opacity: 1;

    }
    .ci-content {
        margin-bottom: 4.078947368vw;
    }

    .ci-text {
        padding-left: 2.5vw;
        padding-right: 0px;
        width: 63.894737vw;
    }

    .rm-title {
        text-align: center;
        margin-top: 8.5526315789474vw;
        font-size: var(--mb-fs-30);
        line-height: var(--mb-lh-70);
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        opacity: 1;
    }

    .rm-btn {
        text-align: center;
        margin-top: 8.0263157894737vw;
        margin-bottom: 5vw;
    }

    .rm-img {
        width: 73.815789473684vw;
        height: 21.184210526316vw;
    }
}

.read-more__link {
    display: none;
}

.readmore-link {
    text-decoration: none;
    color: #007bff;
}

.read-more__link {
    padding: 0 2.0833333333333vw 0 3.359375vw;
    font-size: 0.9375vw;
    line-height: 1.6666666666667vw;
    letter-spacing: 0px;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    text-decoration: none;
    color: #007bff;
}

@media (max-width:760px) { 
    .read-more__link {
        padding: 0 6.010417vw 0 11.010417vw;
        font-size: 2.3684210526316vw;
        line-height: 4.2105263157895vw;
        letter-spacing: 0px;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        text-decoration: none;
    }

}

.info-row {
    margin-bottom: 1vw;
}