:root {
    --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-42: 5.5263157894737vw;
    --mb-fs-59: 7.7631578947368vw;
    --mb-fs-35: 4.6052631578947vw;
    --mb-lh-22: 2.8947368421053vw;
    --mb-lh-26: 3.4210526315789vw;
    --mb-lh-28: 3.6842105263158vw;
    --mb-lh-30: 3.9473684210526vw;
    --mb-lh-32: 4.2105263157895vw;
    --mb-lh-35: 4.6052631578947vw;
    --mb-lh-36: 4.7368421052632vw;
    --mb-lh-46: 6.0526315789474vw;
    --mb-lh-47: 6.1842105263158vw;
    --mb-lh-48: 6.3157894736842vw;
    --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;  */
    }
}

html {
  overflow-x: hidden;
}

body {
  line-height: 1.6;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  color: #000000;
  font-weight: 400;
  overflow-x: hidden;
  background: #12C0A9;
}

p {
    margin: 0 !important;
    padding: 0 !important;
    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;
}

a {
    text-decoration: none !important;
}

a:hover, a:focus, a:active {
    text-decoration: none !important;
}

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

.company-message section {
    padding: 0% !important;
}

.company-message .main-content {
    background: var(--bg-url);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

.banner {
  position: relative;
  overflow: hidden;
  background: #fff;
  background-size: cover;
  min-height: 21.822916666667vw;
}

#home {
    overflow: hidden;
    position: relative;
    height: 21.822916666667vw;
    background: var(--bg-url);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center -17.102083vw;
}

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

.features {
    padding-bottom: 16.197916666667vw;
}

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

.feature-item {
  margin-top: 9.0104166666667vw;
  height: fit-content;
  width: 88.645833333333vw;
  margin-right: 0.9375vw;
}

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

.ft-content {
    padding: 0;
    background-color: #fff;
    border: #000 solid var(--border-5px);
    border-radius: 0.52083333333333vw;
    box-shadow: 0px 0px 30px 0px rgba(0, 42, 106, 0.1);
}

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

.cm-title {
    width: 54vw;
    margin-top: 5.2083333333333vw;
    margin-bottom: 6.6145833333333vw;
}

.mobile-svg-title {
    display: none;
}

.read-more {
    border-top: 0.26041666666667vw solid #000000;
    border-bottom: 0.26041666666667vw 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;
}

.cmd-content {
    margin-bottom: 7.2916666666667vw;
}

.wrapper {
    padding: 0px;
    margin: 0px;
    width: 26.510416666667vw;
    height: 31.197916666667vw;
    position: relative;
}

.wrapper:after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 31.5625vw;
    height: 30.833333333333vw;
    top: 1.8229166666667vw;
    left: 2.0833333333333vw;
    overflow: hidden;
    z-index: 0;
    background: var(--bg-image-url);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.wrapper .si-image {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    /* padding-bottom: 23%; */
    transform-origin: 0 100%;
    transform: skewX(-10deg) translatez(1px);
    overflow: hidden;
    border: var(--border-5px) solid #000000;
    z-index: 1;
}


.wrapper .si-image:before {
    content: '';
    position: absolute;
    width: 270%;
    height: 100%;
    background-image: var(--si-image-url);
    background-size: 100%;
    background-position: center;
    transform-origin: center;
    transform: skewX(10deg);
    background-repeat: no-repeat;
    left: -78%;
    /* top: -4%; */
    -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);
}

.cmd-image {
    margin-left: 11.302083333333vw;
    margin-right: 9.8958333333333vw;
}

.cmd-description {
    width: 31.927083333333vw;
}

.cmd-description .content {
    text-align: left;
    font-size: 1.25vw;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 2.3958333333333vw;
    opacity: 1;
}

.cmd-description .director-name {
    text-align: left;
    font-size: 2.1875vw;
    font-weight: bold;
    letter-spacing: 0px;
    line-height: 1.4583333333333vw;
    opacity: 1;
    margin-bottom: 2.7083333333333vw;
}

.cmd-description .title {
    text-align: left;
    font-size: 1.25vw;
    font-weight: 300;
    letter-spacing: 0px;
    line-height: 1.4583333333333vw;
    opacity: 1;
    margin-bottom: 0.625vw;
}

.cm-commit {
    margin-left: 9.2708333333333vw;
    margin-right: 6.875vw;
    padding-top: 0.72916666666667vw;
    background-color: #FF7600;
    border-radius: 0.41666666666667vw;
    text-align: center;
    margin-bottom: 1.6666666666667vw;
}

.commit-title {
    background: #000000;
    color: #FF7600;
    padding-top: 0.52083333333333vw;
    padding-bottom: 0.52083333333333vw;
    font-size: 1.5625vw;
    line-height: 1.4583333333333vw;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    opacity: 1;
}

.commit-content {
    padding-top: 1.3541666666667vw;
    padding-bottom: 2.0833333333333vw;
    font-size: 1.25vw;
    line-height: 2.3958333333333vw;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    opacity: 1;
}

.commit-content br{
    display: none;
}

.director-note .note {
    margin-left: 9.2708333333333vw;
    margin-right: 6.875vw;
    margin-bottom: 10.989583333333vw;
    padding-top: 1.6666666666667vw;
    height: 9.6354166666667vw;
    text-align: left;
    letter-spacing: 0px;
    font-size: 1.25vw;
    line-height: 2.3958333333333vw;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
}

.management-philosophy {
    position: relative;
    padding: 0;
    margin-top: 8.90625vw;
    margin-bottom: 8.3854166666667vw !important;
    width: 90.104166666667vw;
    /* background: url(http://localhost/natsume-atari/wp-content/themes/natsume-atari/assets/image/company/white-bg.png); */
    /* background-size: contain; */
    /* background-position: top; */
    /* background-repeat: no-repeat; */
    background-color: #fff;
    border: #000 solid var(--border-5px);
    border-radius: 0.78125vw 0.78125vw 0.78125vw 0.78125vw;
}

.management {
    padding: 0;
    width: 89.322916666667vw;
    border-bottom: #000000 solid var(--border-5px);
    /* margin-left: var(--border-5px); */
}

.m-title {
    width: 21.354166666667vw;
    height: 3.8541666666667vw;
    background: #000000;
    border: #000000 solid var(--border-5px);
    border-radius: 0.52083333333333vw;
    text-align: left;
    padding-top: 0.88541666666667vw;
    padding-left: 7.4479166666667vw;
    color: #ffffff;
    font-size: 1.4583333333333vw;
    line-height: 1.8229166666667vw;
    letter-spacing: 0.21875vw;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    opacity: 1;
}

.mt-text {
    text-align: center;
    margin-top: 1.9791666666667vw;
    margin-bottom: 1.171875vw;
    color: #EE7E31;
    font-size: 1.875vw;
    line-height: 2.5vw;
    letter-spacing: 0.28125vw;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    opacity: 1;
}

.philosophy {
    padding: 0;
    margin: 0;
    padding-bottom: 5.8333333333333vw;
}

.p-text {
    text-align: center;
    margin-top: 2.421875vw;
    margin-bottom: 2.8645833333333vw;
    color: #000000;
    font-size: 0px;
    line-height: 2.3958333333333vw;
    letter-spacing: 0px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    opacity: 1;
}

.p-text p {
    font-size: 1.25vw !important;
}

.fp-content {
    width: 13.125vw;
    height: 10.46875vw;
    background: #FF7600;
    border-radius: 0.52083333333333vw;
    padding-top: 0.72916666666667vw;
    margin-right: 4.0625vw;
    margin-left: -4px;
}
.rfp {
    padding: 0;
}

.five-philosophy {
    margin: 0;
    padding: 0;
    padding-left: calc(3.59375vw + 5px);
}

.fpc-title {
    text-align: center;
    background: #000000;
    color: #FF7600;
    padding-top: 0.52083333333333vw;
    padding-bottom: 0.52083333333333vw;
    font-size: 1.5625vw;
    line-height: 1.4583333333333vw;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    opacity: 1;
}

.fpc-description {
    text-align: center;
    padding-top: 0.83333333333333vw;
    padding-bottom: 1.3020833333333vw;
    font-size: 0.9375vw;
    line-height: 1.4583333333333vw;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    opacity: 1;
}

.cp-justify-content {
    justify-content: center !important;
}

.cm-top {
    width: 26.354166666667vw;
    height: 7.8645833333333vw;
    margin-bottom: 11.145833333333vw;
    padding-left: 0;
    padding-right: 0;
}

.cm-top-mb {
    display: none;
}

.custom-text br{
    display: none;
}

@media (max-width: 1025px) {
    .company-message {
         background-size: cover !important; 
    }
}

/* CSS for mobile design */
@media (min-width: 761px) {
    .p-text br {
        display: none;
    }

    .p-text p {
        display: inline;
    }

    .commit-title p {
        display: inline;
    }
}

@media (max-width: 760px) {
    .company-message {
         background-size: cover !important; 
    }

    .company-message .main-content {
        background: var(--mobile-bg-url);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
    }

    #home {
        overflow: hidden;
        position: relative;
        height: 115.52631578947vw;
        background: var(--bg-url);
        background-repeat: no-repeat;
        background-size: 252.078947vw 140.131579vw;
        background-position: -58.289474vw;
    }

    .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;
      height: fit-content;
      width: 86.842105263158vw;
    }

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

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

    .feature-item:after {
         all: unset;
    }

    .cm-title {
        width: 62.236842105263vw;
        height: 10.789473684211vw;
        margin-top: 16.973684210526vw;
        margin-bottom: 8.0263157894737vw;
        padding-left: 0;
        padding-right: 0;
    }

    .mobile-svg-title {
        display: block;
    }

    .pc-svg-title {
        display: none;
    }

    .cmd-image {
        margin-left: 4.7368421052632vw;
        margin-right: 4.7368421052632vw;
        margin-bottom: 8.1578947368421vw;
    }

    .wrapper {
        padding: 0px;
        margin: 0px;
        width: 77.5vw;
        height: 75.263157894737vw;
        position: relative;
    }

    .wrapper:after {
        content: "";
        position: absolute;
        z-index: 0;
        width: 77.5vw;
        height: 75.263157894737vw;
        top: 2.6315789473684vw;
        left: 2.6315789473684vw;
        overflow: hidden;
        z-index: 0;
        background: var(--mb-bg-image-url);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .wrapper .si-image {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        transform-origin: unset;
        transform: unset;
        overflow: hidden;
        border: var(--border-5px) solid #000000;
        z-index: 1;
    }


    .wrapper .si-image:before {
        content: '';
        position: absolute;
        width: 260%;
        height: 100%;
        background-image: var(--si-image-url);
        background-size: 100%;
        background-position: center;
        transform-origin: unset;
        transform: unset;
        background-repeat: no-repeat;
        left: -71%;
        -webkit-transition: 0.4s ease;
        transition: 0.4s ease;
    }

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

    .cmd-description {
        margin-left: 4.7368421052632vw;
        margin-right: 4.7368421052632vw;
        width: 73.421052631579vw;
    }

    .cmd-description .title {
        text-align: left;
        font-size: var(--mb-fs-18);
        line-height: var(--mb-lh-35);
        letter-spacing: 0px;
        font-style: normal;
        font-variant: normal;
        font-weight: 500;
        opacity: 1;
        margin-bottom: 3.1578947368421vw;
    }

    .cmd-description .director-name {
        text-align: left;
        font-size: var(--mb-fs-42);
        line-height: var(--mb-lh-28);
        letter-spacing: 0px;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        opacity: 1;
        margin-bottom: 2.7631578947368vw;
    }

    .cmd-description .content {
        text-align: left;
        font-size: var(--mb-fs-18);
        line-height: var(--mb-lh-35);
        letter-spacing: 0px;
        font-style: normal;
        font-variant: normal;
        font-weight: 500;
        opacity: 1;
        margin-bottom: 13.684210526316vw;
    }

    .cm-commit {
        margin-left: 4.7368421052632vw;
        margin-right: 4.7368421052632vw;
        padding-top: 2.1052631578947vw;
        background-color: #FF7600;
        border-radius: 0.41666666666667vw;
        text-align: center;
        margin-bottom: 5.2631578947368vw;
    }

    .commit-title {
        background: #000000;
        color: #FF7600;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 11.710526315789vw;
        font-size: var(--mb-fs-24);
        line-height: var(--mb-lh-30);
        font-style: normal;
        font-variant: normal;
        font-weight: 500;
        opacity: 1;
    }

    .commit-content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 20.921052631579vw;
        font-size: var(--mb-fs-18);
        line-height: var(--mb-lh-30);
        font-style: normal;
        font-variant: normal;
        font-weight: 500;
        opacity: 1;
    }

    .commit-content br{
        display: block;
    }

    .director-note .note {
        margin-left: 4.7368421052632vw;
        margin-right: 4.7368421052632vw;
        margin-bottom: 10.789473684211vw;
        height: 9.2105263157895vw;
        text-align: left;
        letter-spacing: 0px;
        font-size: var(--mb-fs-18);
        line-height: var(--mb-lh-46);
        font-style: normal;
        font-variant: normal;
        font-weight: 500;
    }

    .management-philosophy {
        background: unset;
        position: relative;
        padding: 0;
        margin-top: 10.657894736vw;
        margin-bottom: 8.3854166666667vw !important;
        width: 86.842105263158vw;
        height: fit-content;
        z-index: 1;
        background-color: #fff;
        border: #000 solid var(--border-5px);
        border-radius: 0.78125vw 0.78125vw 0.78125vw 0.78125vw;
        box-shadow: 0px 0px 30px 0px rgba(0, 42, 106, 0.1);
    }

    .m-title {
        padding: unset;
        width: 53.947368421053vw;
        height: 7.7631578947368vw;
        border: #000000 solid var(--border-5px);
        background: #000000;
        
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;

        font-size: var(--mb-fs-24);
        line-height: var(--mb-lh-26);
        letter-spacing: 1.3157894736842vw;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        opacity: 1;
    }

    .mt-text {
        text-align: center;
        margin-top: 5vw;
        margin-bottom: 4.4736842105263vw;
        color: #EE7E31;
        font-size: var(--mb-fs-24);
        line-height: var(--mb-lh-48);
        letter-spacing: 0px;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        opacity: 1;
    }

    .management {
        width: unset;
        margin-left: unset;
    }

    .p-text {
        text-align: center;
        margin-top: 5.2631578947368vw;
        margin-bottom: 5.2631578947368vw;
        color: #000000;
        font-size: var(--mb-fs-18);
        line-height: var(--mb-lh-35);
        letter-spacing: 0px;
        font-style: normal;
        font-variant: normal;
        font-weight: 500;
        opacity: 1;
    }

    .p-text p {
        font-size: var(--mb-fs-18) !important;
    }

    .rfp {
        padding-left: unset !important;
    }

    .fp-content {
        width: 77.368421052632vw;
        height: 21.578947368421vw;
        background: #FF7600;
        border-radius: 1.3157894736842vw;
        padding-top: 2.1052631578947vw;
        margin-right: 4.7368421052632vw;
        margin-left: 4.0789473684211vw;
        margin-bottom: 3.9473684210526vw;
    }

    .philosophy {
        padding-bottom: 3.9473684210526vw;
    }

    .fpc-title {
        background: #000000;
        color: #FF7600;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 7.3684210526316vw;
        font-size: var(--mb-fs-24);
        line-height: var(--mb-lh-30);
        font-style: normal;
        font-variant: normal;
        font-weight: 500;
        opacity: 1;
    }

    .fpc-description {
        justify-content: center;
        align-items: center;
        height: 12.105263157895vw;
        font-size: var(--mb-fs-18);
        line-height: var(--mb-lh-30);
        font-style: normal;
        font-variant: normal;
        font-weight: 500;
        opacity: 1;
        padding-top: 1.5789473684211vw;
    }

    .fpc-description br {
        display: none;
    }

    .cp-justify-content {
        justify-content: end !important;
        margin-right: 4.6052631578947vw;
    }

    .custom-text p {
        display: inline;
    }

    .custom-text br {
        display: block;
    }

    .cm-top {
        width: 45vw;
        height: 13.421052631579vw;
        margin-bottom: 26.315789473684vw;
    }

    .cm-top-mb {
        display: block;
    }

    .cm-top-pc {
        display: none;
    }

}