@charset "utf-8";
html {
    font-family: 'Noto Sans JP', sans-serif;
    color: #32484A;
}

body {
    min-width: 390px;
    padding-bottom: 0;
}

body.js-active {
    overflow: hidden;
}

main {
    overflow: hidden;
}

picture {
    display: block;
}

img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.--blue{
    background: #31B7C7;
}

.--blue-text{
    color: #31B7C7;
}

.--orange{
    background: linear-gradient(136deg, #FFAA48 0%, #FF900F 100%);
}

.--black{
    background: linear-gradient(136deg, #898989 0%, #727272 100%);
}

.--btn__arrow {
    display: block;
    width: 22px;
    height: 19px;
}

@media screen and (min-width: 901px) {
    a.--nomal {
        transition: opacity .5s;
    }

    a.--nomal:hover {
        opacity: 0.7;
    }

    .--hover-orange:hover {
        outline-color: #FF900E;
        outline-style: solid;
        outline-width: 3px;
        color: #FF900F;
        background: #fff;
    }

    .--hover-orange:hover .--arrow-orange {
        background-color: #FF900F;
    }

    .--hover-blue:hover {
        outline-color: #31B7C7;
        outline-style: solid;
        outline-width: 3px;
        color: #31B7C7;
        background: #fff;
    }

    .--hover-black:hover {
        outline-color: #646464;
        outline-style: solid;
        outline-width: 3px;
        color: #646464;
        background: #fff;
    }
    .--hover-black:hover .--arrow-black {
        background-color: #646464;
    }

}

/* utility */
.u-en {
    font-family: poppins, sans-serif;
}

/* text */

.c-head {
    text-align: center;
    z-index: 1;
}

.c-head__ttl {
    font-weight: bold;
    font-size: 46px;
    position: relative;
    z-index: 1;
}

.c-head__ttl::before {
    white-space: nowrap;
    font-family: poppins, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 249px;
    line-height: 1;
    position: absolute;
    z-index: -1;
    display: inline-block;
    top: 50%;
    transform: translateY(-40%);
    -webkit-transform: translateY(-40%);
    -ms-transform: translateY(-40%);
}

.c-head__ttl.--gray::before{
    color: #F8F8F8;
}

.c-head__ttl.--white::before{
    color: #fff;
}

.c-head__ttl.--right::before{
    left: 30%;
}

.c-head__ttl.--left::before{
    right: 30%;
}

.c-head__subTtl {
    display: inline-block;
    font-family: poppins, sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #31B7C7;
    font-size: 22px;
    border-bottom: 2px solid #31B7C7;
    margin-top: 22px;
    position: relative;
    z-index: 1;
    letter-spacing: 0.1em;
}

@media screen and (max-width: 900px) {
    .c-head__ttl {
        font-size: 28px;
        line-height: 1.5em;
    }

    .c-head__ttl::before {
        font-size: 112px;
    }

    .c-head__ttl.--right::before{
        left: 7%;
    }

    .c-head__ttl.--left::before{
        right: 7%;
    }

    .c-head__subTtl {
        font-size: 16px;
        margin-top: 17px;
        border-bottom: 1px solid #31B7C7;
    }

    .--btn__arrow  {
        display: block;
        width: 16px;
        height: 12px;
    }
}

/* layout */
.l-wrapper {
    padding-left: 4.4%;
    padding-right: 4.4%;
}

.l-inner {
    margin: 0 auto;
    max-width: 1080px;
}

@media screen and (max-width: 900px) {
    .l-wrapper {
        padding-left: 25px;
        padding-right: 25px;
    }

    .l-inner {
        max-width: 340px;
    }
}

/* common */
.pc-only {
    display: block;
}

.br-pc-only {
    display: inline-block;
}

.sp-only {
    display: none;
}

.br-sp-only {
    display: none;
}

@media screen and (max-width: 900px) {
    .pc-only {
        display: none;
    }

    .br-pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }

    .br-sp-only {
        display: inline-block;
    }
}

/*===========================================================================*/
/*  header  */
/*===========================================================================*/
.p-header {
    padding: 0 30px;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 99;
}

.p-header__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.p-header__logo {
    width: 384px;
    margin-top: 22px;
}

.p-header__right {
    display: flex;
    align-items: center;
    margin-top: 17px;
    gap: 12px;
}

.p-header__btn{
    width: 205px;
    text-align: center;
    color: #fff;
    padding: 20px 0;
    border-radius: 9999px;
    font-size: 18px;
    font-weight: bold;

}

@media screen and (max-width: 900px) {
    .p-header {
        padding: 15px 25px;
        position: absolute;
    }

    .p-header__logo {
        max-width: 220px;
        margin-top: 0;
    }

    .p-header__right {
        display: none;
    }
}

/*===========================================================================*/
/*  mv  */
/*===========================================================================*/
.p-mv{
    padding-top: 155px;
    padding-bottom: 140px;
    background:
        url(../images/mv_accent.png) calc(50% - 120px) calc(100% - 30px) no-repeat,
        url(../images/mv_bg.png) center bottom no-repeat;
    background-size: 1562px, auto;
}

.p-mv__inner{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-mv__left{
    display: flex;
    justify-content: flex-end;
    text-align: center;
    width: 46.5%;
}

.p-mv__left h1{
    display: inline-flex;
    align-items: center;
    flex-direction: column;
}

.p-mv__left--title{
    width: 80%;
    max-width: 366px;
    margin-bottom: 28px;
}

.p-mv__right{
    width: 53.5%;
    max-width: 642px;
}

.p-mv__left--text{
    font-size: min(2.2vw, 29px);
    font-weight: bold;
}

.p-mv__left--text.--large{
    font-size: min(4.7vw, 62px);
    margin-top: 17px;
    line-height: 1.3;
}



.p-mv__btn{
    margin: 40px auto 0;
    padding: 33px 122px 33px 80px;
    font-size: 23px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    border-radius: 9999px;
    white-space: nowrap;
    position: relative;
    box-shadow: 4px 10px 25px rgba(208, 115, 8, .25);

}


.p-mv__btn-arrow{
    width: 56px;
    height: 56px;
    position: absolute;
    right: 19px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
    background-color: #E68310;
}



@media screen and (max-width: 1100px){
    .p-mv__left--text.--large{
        margin-top: 16px;
    }

    .p-mv__btn{
        margin-top: 16px;
        padding: 22px 73px 22px 53px;
        font-size: 16px;
    }


    .p-mv__btn-arrow{
        width: 40px;
        height: 40px;
        right: 10px;
        background-color: #E68310;
    }


}


@media screen and (max-width: 900px) {
    .p-mv{
        padding-top: 100px;
        padding-bottom: 60px;
        padding-left: 0;
        padding-right: 0;
        background:
            url(../images/mv_bg_accent_sp.png) calc(50% + 10px) calc(100% - 12px) no-repeat,
            url(../images/mv_bg_sp.png) center bottom no-repeat;
        background-size: 600px, cover;
    }

    .p-mv__inner{
        display: block;
    }

    .p-mv__left{
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .p-mv__left--title{
        max-width: 235px;
        margin-bottom: 15px;
    }

    .p-mv__right{
        width: 100%;
        max-width: 340px;
        margin: 21px auto 0;
    }

    .p-mv__left--text{
        font-size: 18px;
    }

    .p-mv__left--text.--large{
        font-size: 38px;
        margin-top: 10px;
        line-height: 1.26;
    }
}

/*===========================================================================*/
/*  float  */
/*===========================================================================*/
.p-float {
    position: fixed;
    width: 100%;
    bottom: -15px;
    left: 0;
    z-index: 99;
    display: none;
}

.p-float__online {
    height: 70px;
    border-bottom: 19px solid #31B7C7;
    background: linear-gradient(180deg, #31B7C7 0%, #78C8D3 100%);
    width: 50%;
    position: relative;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-float__download {
    height: 70px;
    border-bottom: 19px solid #FF900F;
    background: linear-gradient(180deg, #FF900F 0%, #FFAA48 100%);
    width: 50%;
    position: relative;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-float__head {
    font-size: 16px;
    font-weight: bold;
}


@media screen and (max-width: 900px) {
    .p-float {
        display: flex;
    }
}

/*===========================================================================*/
/*  problem  */
/*===========================================================================*/
.p-problem,.p-benefit{
    padding-top: 134px;
    padding-bottom: 92px;

}

.p-problem .c-head__ttl::before{
    content: "PROBLEM";
}

.p-benefit .c-head__ttl::before{
    content: "Benefits";
}

.p-problem__text, .p-benefit__text{
    font-size: 15px;
    font-weight: 500;
    line-height: 2em;
    max-width: 826px;
    margin: 41px auto 0;
}



.p-problem__text span {
    color: #31B7C7;
}

.p-problem__container, .p-benefit__container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 45px;
    background-color: #F8F8F8;
    padding: 68px;
    position: relative;
    margin-top: 68px;
    border-radius: 30px;
}
.p-benefit__container {
    display: block;
}
.p-benefit__container:first-child {
    padding-bottom: 40px;
}
.p-benefit__container:last-child {
    padding: 68px 45px 40px 31px;
}
.p-benefit__container .pc-only {
    margin: auto;
}
.p-benefit__container:first-child .pc-only {
    max-width: 987px;
}
.p-benefit__container:last-child .pc-only {
    max-width: 1026px;
}
.p-problem__container-img, .p-benefit__container-img {
    width: 268px;
    height: auto;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.p-benefit__container-img {
    width: 373px;
}
.p-problem__container li {
    background-color: #fff;
    border-radius: 15px;
    aspect-ratio: 1/1;
    padding: 33px 0;
}
.p-problem__container-photo {
    width: 110px;
    height: 105px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.p-problem__container-photo img {
    display: block;
}
.p-problem__container-production {
    width: 109px;
    height: auto;
}
.p-problem__container-contract {
    width: 78px;
    height: auto;
}
.p-problem__container-it {
    width: 98px;
    height: auto;
}
.p-problem__container-goods {
    width: 85px;
    height: auto;
}
.p-problem__container-title {
    font-size: 19px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
}
.p-problem__container-bottomText {
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    margin-top: 47px;
    line-height: 1.6em;
}
.p-problem__container-bottomText span {
    color: #31B7C7;
}



@media screen and (max-width: 900px) {
    .p-problem{
        padding-top: 87px;
        padding-bottom:61px ;

    }

    .p-problem__text{
        font-size: 13px;
        margin-top: 20px;
    }
    .p-problem__text span {
        color: #31B7C7;
    }

    .p-problem__container {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        padding: 38px 20px 20px;
        margin-top: 54px;
    }
    .p-benefit__container {
        padding: 49px 20px 20px;
        margin-top: 54px;
    }
    .p-problem__container-img {
        width: 242px;
    }
    .p-benefit__container .sp-only{
        text-align: center;
    }
    .p-benefit__container .sp-only img {
        width: auto;
        max-width: 292px;
    }
    .p-problem__container li {
        padding: 20px 0;
    }
    .p-problem__container-photo {
        width: 84px;
        height: 70px;
    }
    .p-problem__container-production {
        width: 84px;
    }
    .p-problem__container-contract {
        width: 60px;
    }
    .p-problem__container-it {
        width: 75px;
    }
    .p-problem__container-goods {
        width: 66px;
    }
    .p-problem__container-title {
        font-size: 16px;
        margin-top: 20px;
    }
    .p-problem__container-bottomText {
        font-size: 18px;
        margin-top: 25px;
    }

}

/*===========================================================================*/
/*  conversion  */
/*===========================================================================*/
.p-conversion__inner {
    background:
        url(../images/conversion__cloud.png) left bottom no-repeat,
        url(../images/back-rod-top.png) 80% 350% no-repeat,
        url(../images/back-rod-right.png) 140% 10% no-repeat,
        #31B7C7;
    background-size: 593px, 500px, 500px, auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    padding: 86px 40px;
    gap: 65px;
    max-width: 1080px;
    margin: 0 auto ;
    z-index: 1;
    overflow: hidden;
}

.p-conversion__margin-bottom {
    margin-bottom: -238px;
}
.p-conversion__margin-top {
    margin-top: -255px;
}

.p-conversion__left{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-conversion__ttl {
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    line-height: 1.4em;
}

.p-conversion__btn{
    margin: 37px auto 0;
    padding: 31px 106px 31px 64px;
    text-align: center;
    font-size: 27px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    border-radius: 9999px;
    white-space: nowrap;
    border: #fff 3px solid;
    position: relative;
}


.p-conversion__btn-arrow{
    width: 56px;
    height: 56px;
    position: absolute;
    right: 19px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
    background-color: #E68310;
}


.p-conversion__right {
    max-width: 386px;
    position: relative;
    z-index: 2;
}

.p-conversion__top-img {
    position: absolute;
    width: 319px;
    height: auto;
    opacity: 44%;
    top: -57%;
    right: 30px;
    z-index: -1;
}

.p-conversion__bottom-img {
    position: absolute;
    width: 319px;
    opacity: 44%;
    height: auto;
    bottom: -64%;
    right:30px;
    z-index: -1;
}

.p-conversion__right-img {
    width: 100%;
    height: auto;
    display: block;
}



@media screen and (max-width: 1090px){
    .p-conversion__inner {
        padding: 60px 40px;
        gap: 40px;
    }

    .p-conversion__margin-bottom {
        margin-bottom: -238px;
    }

    .p-conversion__margin-top {
        margin-top: -255px;
    }

    .p-conversion__ttl {
        font-size: 30px;
    }

    .p-conversion__right {
        max-width: 330px;
        position: relative;
        z-index: 2;
    }

    .p-conversion__top-img {
        width: 263px;
    }

    .p-conversion__bottom-img {
        width: 263px;
    }
}
@media screen and (max-width: 900px){
    .p-conversion__inner {
        background:
            url(../images/conversion__cloud.png) left bottom no-repeat,
            url(../images/back-rod-top.png) 10px -170px no-repeat,
            url(../images/back-rod-right.png) 150px 170px no-repeat,
            #31B7C7;
        background-size: 259px, 300px, 300px, auto;
        position: relative;
        flex-direction: column;
        align-items: center;
        padding: 35px 30px;
        gap: 0;
        max-width: 340px;
    }

    .p-conversion__margin-bottom {
        margin-bottom: -209px;
    }

    .p-conversion__margin-top {
        margin-top: -205px;
    }

    .p-conversion__ttl {
        font-size: 23px;
        margin-bottom: 30px;
    }

    .p-conversion__btn{
        margin: 40px auto 0;
        padding: 22px 73px 22px 53px;
        font-size: 16px;
        z-index: 1;
    }

    .p-conversion__right {
        max-width: 242px;
        margin: 0 auto;
    }

    .p-conversion__top-img {
        position: absolute;
        width: 182px;
        height: auto;
        opacity: 44%;
        top: -22px;
        right: -100px;
        z-index: -1;
    }

    .p-conversion__bottom-img {
        position: absolute;
        width: 182px;
        opacity: 44%;
        height: auto;
        bottom: -22px;
        right:0;
        left: -100px;
        z-index: -1;
    }

    .p-conversion__right-img {
        width: 254px;
        height: auto;
        display: block;
    }

    .p-conversion__btn-arrow{
        width: 40px;
        height: 40px;
        right: 10px;
        background-color: #E68310;
    }



}

/*===========================================================================*/
/*  strength  */
/*===========================================================================*/

.p-strength .c-head__ttl::before{
    content: "STRENGTH";
}

.p-strength {
    background:
        url(../images/strength-bg-top.png) center top no-repeat,
        url(../images/strength-bg-bottom.png) center bottom no-repeat;
    background-size: 130%, 130%;
    padding-top: 397px;
    padding-bottom: 375px;
    position: relative;
}

.p-strength__inner{
    background-color: #F2F7F7;
}


.p-strength__box {
    margin-top: 100px;
}

.p-strength__box-contents {
    display: flex;
    align-items: center;
}

.p-strength__box-contents:not(:last-child) {
    margin-bottom: 80px;
}

.p-strength__box-left {
    width: 50%;
}

.p-strength__box-left img {
    width: 100%;
    height: auto;
    display: block;
}

.p-strength__box-right {
    width: 45%;
    margin-left: 40px;
    position: relative;
    z-index: 2;
}

.p-strength__right-rod {
    width: 170%;
    position: absolute;
    top: -270px;
    right: -440px;
    z-index: -1;
}

.p-strength__left-rod {
    transform: rotate(180deg);
    width: 170%;
    position: absolute;
    top: -100px;
    left: -420px;
    z-index: -1;
}

.strength__right-subText {
    width: 136px;
    height: auto;
    display: block;
}


.p-strength__right-ttl {
    font-size: 37px;
    font-weight: bold;
    line-height: 1.5em;
    margin-bottom: 15px;
}

.p-strength__right-ttl span {
    color: #31B7C7;
}

.p-strength__right-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.71em;
    padding-bottom: 20px;
    border-bottom: 1px solid #D3D3D3;
    margin-bottom: 24px;
}

.p-strength__right-bottomBox {
    display: flex;
    align-items: center;
}

.p-strength__right-bottomBox:not(:last-child) {
    margin-bottom: 15px;
}

.p-strength__right-bottomBox img {
    width: 15px;
    height: auto;
    display: block;
}

.p-strength__right-bottomText {
    font-size: 15px;
    font-weight: bold;
    margin-left: 10px;
}

.p-strength-reverse {
    flex-direction: row-reverse;
}

.p-strength-reverse .p-strength__box-right {
    margin-left: 0;
    margin-right: 40px;
}

.p-strength__bottm-box {
    max-width: 895px;
    background-color: #fff;
    border-radius: 15px;
    padding: 65px ;
    display: flex;
    align-items: center;
    gap: 45px;
    justify-content: center;
    margin: 110px auto 0;
    box-shadow: 30px 30px 45px rgba(28, 82, 98, .04);
}

.p-strength__bottm-left {
    width: 386px;
}

.p-strength__title-box {
    display: flex;
    align-items: center;
    margin-bottom: 19px;
}

.p-strength__title-box img {
    width: 28px;
    height: auto;
    display: block;
}

.p-strength__box-title {
    font-size: 28px;
    font-weight: bold;
    margin-left: 7px;
}

.p-strength__bottm-leftText {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7em;
}

.p-strength__bottm-right {
    width: 314px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.p-strength__bottm-right img {
    width: calc(50% - 20px);
    max-width: 134px;
    height: auto;
}

@media screen and (max-width: 1090px){
    .p-strength__right-ttl {
        font-size: 30px;
    }
}

@media screen and (max-width: 900px){
    .p-strength .--backText::before {
        left: -69%;
    }

    .p-strength {
        background:
            url(../images/strength-bg-top-sp.png) center top no-repeat,
            url(../images/strength-bg-bottom-sp.png) center bottom no-repeat;
        padding-top: 275px;
        padding-bottom: 265px;
    }

    .p-strength__box {
        margin-top: 25px;
    }

    .p-strength__box-contents {
        display: flex;
        flex-direction: column-reverse;
    }

    .p-strength__box-contents:not(:last-child) {
        margin-bottom: 35px;
    }

    .p-strength__box-left {
        width: 100%;
        margin-top: 21px;
    }

    .p-strength__box-right {
        width: 100%;
        margin-left: 0px;
    }

    .p-strength__right-ttl {
        font-size: 24px;
        margin-bottom: 5px;
    }

    .p-strength__right-text {
        font-size: 13px;
        padding-bottom: 15px;
        margin-bottom: 18px;
    }

    .p-strength__right-bottomBox:not(:last-child) {
        margin-bottom: 10px;
    }

    .p-strength__right-bottomBox img {
        width: 15px;
        height: auto;
        display: block;
    }

    .p-strength__right-bottomText {
        font-size: 13px;
        margin-left: 7px;
    }

    .p-strength-reverse {
        display: flex;
        flex-direction: column-reverse;
    }

    .p-strength-reverse .p-strength__box-right {
        margin-left: 0;
        margin-right: 0px;
    }

    .strength__right-subText {
        width: 104px;
    }

    .p-strength__bottm-box {
        padding: 30px 25px;
        display: block;
        gap: 0;
        margin: 40px auto 0;
    }

    .p-strength__bottm-left {
        width: 100%;
    }

    .p-strength__title-box {
        margin-bottom: 10px;
    }

    .p-strength__title-box img {
        width: 21px;
        height: auto;
        display: block;
    }

    .p-strength__box-title {
        font-size: 21px;
        margin-left: 5px;
    }

    .p-strength__bottm-leftText {
        font-size: 13px;
        margin-bottom: 13px;
    }

    .p-strength__bottm-right {
        width: 269px;
        margin: 0 auto;
    }

    .p-strength__bottm-right img {
        width: 115px;
    }
}


/*===========================================================================*/
/*  achievements  */
/*===========================================================================*/

.p-achievements{
    padding-top: 153px;
    padding-bottom: 180px;
}

.p-achievements__inner {
    position: relative;
}

.p-achievements__left-photo {
    position: absolute;
    width: auto;
    height: 450px;
    right: 90%;
    bottom: -40px;
}

.p-achievements__right-photo {
    position: absolute;
    width: auto;
    height: 432px;
    left: 90%;
    bottom: -50px;
}

.p-achievements__text {
    font-size: 15px;
    font-weight: 500;
    line-height: 2em;
    font-weight: 500;
    text-align: center;
    margin: 45px 0 67px;
}

.p-achievements__text span {
    color: #31B7C7;
}

.p-achievements__contents-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.p-achievements__contents-box::before {
    content: "ACHIEVEMENTS";
    color: #F8F8F8;
    font-family: poppins, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 298px;
    position: absolute;
    top: calc(50% + 30px);
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.p-achievements__contents {
    height: 200px;
    width: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.p-achievements__contents::before{
    font-size: 10px;
    line-height: 1.8em;
    width: 100%;
    font-weight: 500;
    color: #ACACAC;
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}


.p-achievements__contents .--block{
    display: block;
}



.p-achievements__contents--text .--center-margin-bottom{
    margin-bottom: -12px;
    line-height: 1;
    font-size: 23px;
    font-weight: bold;
}

.p-achievements__contents--text .--right-margin-bottom{
    margin-bottom: -13px;
    line-height: 1;
    font-size: 23px;
    font-weight: bold;
}


.p-achievements__contents .--margin-top{
    margin-top: -24px;
    line-height: 1;
    font-size: 23px;
    font-weight: bold;
}

.p-achievements__contents .p-achievements__contents-left-text {
    margin-top: -40px;
}

.p-achievements__left-box .--blue-text{
    font-size: 65px;
    font-weight: 900;
    margin-top: 10px;
}

.p-achievements__left-box .--flex{
    display: flex;
    align-items: center;
}

.p-achievements__left-box .--large{
    font-size: 133px;
    font-weight: 600;
    letter-spacing: -.05em;
}

.p-achievements__center-box .--blue-text{
    font-size: 76px;
    font-weight: 600;
}

.p-achievements__center-box .--large{
    font-size: 120px;
    font-weight: 600;
    letter-spacing: -.05em;
}
.p-achievements__right-box .--blue-text{
    font-size: 50px;
    font-weight: 900;
}

.p-achievements__right-box .--large{
    font-size: 81px;
    font-weight: 600;
    margin-top: 5px;
    letter-spacing: -.05em;
}
.p-achievements__right-box {
    padding-top: 35px;
}



.p-achievements__left-box::before {
    content: "※1 2024年12月時点";
}

.p-achievements__center-box::before {
    content: "※2 東京証券取引所プライム市場上場企業において、BtoBプラットフォームを利用して\A請求書発行/受取実績がある企業の割合（2022年4月時点）";
    white-space: pre;
    width: initial;
}


.p-achievements__right-box::before {
    content: "※3 2022年9月現在 東京商工リサーチ調べ";
}



@media screen and (max-width: 1000px){
    .p-achievements__center-box::before {
        content: "※2 東京証券取引所プライム市場上場企業において、\A BtoBプラットフォームを利用して\A請求書発行/受取実績がある企業の割合（2022年4月時点）";
        white-space: pre-wrap;
        width: 100%;
    }
}

@media screen and (max-width: 900px){
    .p-achievements{
        padding-top: 67px;
        padding-bottom: 110px;
    }

    .p-achievements__inner .c-head {
        position: relative;
    }

    .p-achievements__left-img {
        position: absolute;
        width: 70px;
        top: 90px;
        left: 0;
    }
    .p-achievements__right-img {
        position: absolute;
        width: 70px;
        top: 80px;
        right: 0;
    }

    .p-achievements__text {
        font-size: 14px;
        line-height: 2em;
        margin: 25px 0  5px;
    }

    .p-achievements__left-photo-sp {
        display: block;
        position: absolute;
        width: 45px;
        top: 10px;
        left: 0;
    }

    .p-achievements__right-photo-sp {
        display: block;
        position: absolute;
        width: 42px;
        top: -10px;
        right: 0;
    }

    .p-achievements__contents-box {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .p-achievements__contents-box::before {
        font-size: 198px;
        top: 46%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }

    .p-achievements__contents {
        height: initial;
    }

    .p-achievements__contents::before{
        font-size: 10px;
        top: calc(100% + 10px);
    }


    .p-achievements__contents .--margin-top{
        margin-top: -24px;
    }

    .p-achievements__contents .p-achievements__contents-left-text {
        margin-top: -37px;
    }

    .p-achievements__contents--text .--center-margin-bottom{
        margin-bottom: -15px;
    }

    .p-achievements__contents--text .--right-margin-bottom{
        margin-bottom: -13px;
    }

    .p-achievements__left-box .--blue-text{
        font-size: 53px;
    }

    .p-achievements__left-box .--large{
        font-size: 109px;
    }

    .p-achievements__center-box .--blue-text{
        font-size: 63px;
    }

    .p-achievements__center-box .--large{
        font-size: 109px;
    }

    .p-achievements__right-box .--blue-text{
        font-size: 40px;
    }


    .p-achievements__left-box::before {
        content: none;
    }

    .p-achievements__center-box::before {
        content: none;
    }

    .p-achievements__right-box::before {
        content: none;
    }


    .p-achievements__right-box::before {
        margin-top: -15px;
    }

    .p-achievements__photo-box {
        gap: 10px;
        margin-top: 35px;
    }

    .p-achievements__photo-box img {
        width: 105px;
        aspect-ratio: 1/1;
    }

    .p-achievements__sp-text {
        font-size: 10px;
        color: #ACACAC;
        margin-top: 9px;
        line-height: 1.7em;
    }
    .p-achievements__contents .--sp-margin-top {
        margin-top: -15px;
    }

    .p-achievements__right-box .--large{
        font-size: 84px;
        margin-top: 6px;
    }

    .p-achievements__right-box {
        padding-top: 0px;
    }

}

/*===========================================================================*/
/*  feature  */
/*===========================================================================*/

.p-feature .c-head__ttl::before{
    content: "FEATURE";
    right: 35%;
}

.p-feature {
    background:
        url(../images/feature-bg-top.png) center top no-repeat,
        url(../images/feature-bg-bottom.png) center bottom no-repeat;
    background-size: 130%, 130%;
    padding-top: 150px;
    padding-bottom: 150px;
    position: relative;
}

.p-feature__inner{
    background-color: #F2F7F7;
}

.p-feature__contents {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 55px;
    margin-top: 70px;
}

.p-feature__contents-box {
    height: auto;
    background-color: #fff;
    border-radius: 15px;
    padding: 50px 28px 30px;
    box-shadow: 30px 30px 40px rgba(28, 82, 98, .04);
}

.p-feature__photo-box {
    max-width: 216px;
    width: 100%;
    height: 143px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-feature__quotation {
    width: 161px;
    height: 143px;
}

.p-feature__contract {
    width: 215px;
    height: 124px;
}

.p-feature__purchase-order {
    width: 177px;
    height: 125px;
}

.p-feature__delivery-slip {
    width: 143px;
    height: 131px;
}

.p-feature__receipt {
    width: 150px;
    height: 143px;
}

.p-feature__invoice {
    width: 163px;
    height: 125px;
}

.p-feature__alignment {
    width: 178px;
    height: 135px;
}

.p-feature__electronic {
    width: 152px;
    height: 142px;
}

.p-feature__work {
    width: 161px;
    height: 142px;
}

.p-feature__photo-box img {
    display: block;
}


.p-feature__photo-title {
    font-size: 22px;
    text-align: center;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 15px;
}

.p-feature__photo-text {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.61em;
}
@media screen and (max-width: 1000px) {
    .p-feature__contents {
        gap: 40px;
    }

    .p-feature__contents-box {
        padding: 40px 20px 25px ;
    }

    .p-feature__photo-title {
        font-size: 20px;
    }
}

@media screen and (max-width: 900px) {
    .p-feature .--backText::before {
        left: -40%;
    }

    .p-feature {
        padding-top: 77px;
        padding-bottom: 70px;
    }

    .p-feature__contents {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px 0;
        margin: 35px auto 0;
    }

    .p-feature__contents-box {
        height: auto;
        background-color: #fff;
        border-radius: 15px;
        padding: 25px 25px 30px ;
    }

    .p-feature__quotation {
        width: 128px;
        height: 114px;
    }

    .p-feature__contract {
        width: 181px;
        height: 105px;
    }

    .p-feature__purchase-order {
        width: 148px;
        height: 105px;
    }

    .p-feature__delivery-slip {
        width: 124px;
        height: 114px;
    }

    .p-feature__receipt {
        width: 120px;
        height: 114px;
    }

    .p-feature__invoice {
        width: 136px;
        height: 105px;
    }

    .p-feature__alignment {
        width: 150px;
        height: 114px;
    }

    .p-feature__electronic {
        width: 128px;
        height: 120px;
    }

    .p-feature__work {
        width: 132px;
        height: 116px;
    }

    .p-feature__photo-box {
        width: 181px;
        height: 120px;
    }

    .p-feature__photo-title {
        font-size: 20px;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .p-feature__photo-text {
        font-size: 12px;
    }
}

/*===========================================================================*/
/*  case  */
/*===========================================================================*/
.p-case{
    padding-top: 183px;
    padding-bottom: 110px;
    padding-left: calc(4.4% - 29px);
    padding-right: calc(4.4% - 29px);
    overflow: hidden;
}
.p-case .c-head__ttl::before{
    content: "CASE STUDY";
    left: 21%;
}

.p-case__inner{
    margin: 0 auto;
    max-width: 1138px;
    transform: translateX(29px);
}

.slick-list{
    overflow: visible;
}

.p-case__wrapper{
    margin-top: 76px;
    position: relative;
}

.p-case__lists--item{
    margin-right: 58px;
    opacity: .5;
    transition: opacity .5s;
}

.slick-current{
    opacity: 1;
}

.slick-current + .p-case__lists--item{
    opacity: 1;
}

.p-case__lists--img{
    aspect-ratio: 511/307;
    overflow: hidden;
    border-radius: 20px;
}

.p-case__lists--img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-case__lists--text{
    margin-top: 22px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.6;
}

.slick-arrow {
    position: absolute;
    width: 70px;
    height: 70px;
    top: 154px;
    background-image: url(../images/slide-arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    transition: opacity .5s;
    cursor: pointer;
}

.slick-arrow:hover{
    opacity: 0.7;
}

.slick-arrow.slick-disabled{
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}

.slick-next {
    right: 58px;
    transform: translate(50%, -50%);
    -webkit-transform: translate(50%, -50%);
    -ms-transform: translate(50%, -50%);
}

.slick-prev {
    left: 0;
    transform: translate(-50%, -50%) rotate(180deg);
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
    -ms-transform: translate(-50%, -50%) rotate(180deg);
}

.slick-dots{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 58px;
    gap: 16px 8px;
    width: 100%;
    max-width: 1080px;
}

.slick-dots li{
    height: 6px;
}

.slick-dots > li:first-child:last-child {
    display: none;
}

.slick-dots li button{
    background: #EFEFEF;
    height: 6px;
    width: 49px;
    font-size: 0;
    text-indent: -9999px;
    border-radius: 9999px;
}

.slick-dots li.slick-active button{
    background: #31B7C7;
}

@media screen and (max-width: 1180px){
    .slick-arrow {
      top: calc(((100vw - 58px - 8.8%) / 2) * ((307 / 511) / 2));
    }
}

@media screen and (max-width: 900px){
    .p-case{
        padding-top: 67px;
        padding-bottom: 80px;
        padding-left: 25px;
        padding-right: 25px;
    }

    .p-case__inner{
        max-width: 340px;
        transform: initial;
    }

    .p-case__wrapper{
        margin-top: 35px;
    }

    .p-case__lists{
        width: 100%;
        padding-left: 34px;
        padding-right: 34px;
    }

    .p-case__lists.--only{
        /* margin: 0 auto; */
        width: 100%;
    }

    .p-case__lists.--only .slick-track{
        display: flex;
        justify-content: center;
    }

    .p-case__lists.--only .p-case__lists--item{
        margin: 0 auto;
        max-width: 252px;
    }

    .p-case__lists--item{
        margin-right: 10px;
        margin-left: 10px;
    }

    .p-case__lists--img{
        border-radius: 10px;
    }

    .p-case__lists--text{
        margin-top: 12px;
        font-size: 14px;
    }

    .slick-current + .p-case__lists--item{
        opacity: .5;
    }

    .slick-arrow {
        width: 42px;
        height: 42px;
        top: 76px;
    }

    .slick-next {
        right: 0;
        transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
    }

    .slick-prev {
        left: 0;
        transform: translate(-0, -50%) rotate(180deg);
        -webkit-transform: translate(-0, -50%) rotate(180deg);
        -ms-transform: translate(-0, -50%) rotate(180deg);
    }

    .slick-dots{
        margin-top: 36px;
        gap: 12px 6px;
        width: 100%;
    }

    .slick-dots li{
        height: 4px;
    }

    .slick-dots li button{
        height: 4px;
        width: 36px;
    }
}



/*===========================================================================*/
/*  footer  */
/*===========================================================================*/
.p-footer {
    padding-bottom: 50px;
    background:
        url(../images/footer-back-rod.png) calc(50% - 3px) 50% no-repeat,
        url(../images/footer-back-color.png) center top 230px no-repeat;
    background-size: 1700px, auto;
}

.p-footer__ttl {
    width: 500px;
    height: auto;
    margin: 0 auto;
    display: block;
}

.p-footer__pc-img {
    width: 731px;
    height: auto;
    margin: 0 auto;
    display: block;
}

.p-footer__left-ttl {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    white-space: nowrap;
}

.p-footer__btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.p-footer__box{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-footer__btn{
    display: inline-block;
    margin: 15px auto 0;
    padding: 32px 130px 32px 84px;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    border-radius: 9999px;
    white-space: nowrap;
    position: relative;
}

.p-footer__right-btn{
    padding: 32px 118px 32px 71px;
}

.p-footer__btn-arrow{
    width: 56px;
    height: 56px;
    position: absolute;
    right: 19px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
    background-color: #E68310;
}

.p-footer__right-btn__arrow {
    width: 56px;
    height: 56px;
    position: absolute;
    right: 19px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
    background-color: #646464;
}


.p-footer__menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 15px 22px;
    margin: 100px auto 0;
    width: 430px;
}

.p-footer__menu-text {
    font-size: 11px;
    font-weight: bold;
    color: #fff;
}

.p-footer__menu-img {
    width: 10px;
    height: auto;
    display: block;
    margin-left:6px ;
}

.p-footer__menu a {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.p-footer__copyright {
    font-family: poppins, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 12px;
    color: #fff;
    text-align: center;
    margin-top: 40px;
}
@media screen and (max-width: 900px) {

    .p-footer {
        padding-bottom: 80px;
        background:
            url(../images/footer-back-rod-sp.png) calc(50% + 40px) calc(50% + 80px) no-repeat,
            url(../images/footer-back-color-sp.png) center top 130px no-repeat;
        background-size: 600px, 900px;
    }

    .p-footer__ttl {
        width: 281px;
        margin-bottom: 10px;
    }

    .p-footer__pc-img {
        max-width: 359px;
        width: 100%;
    }

    .p-footer__left-ttl {
        font-size: 13px;
    }

    .p-footer__btn-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 22px;
    }

    .p-footer__btn{
        margin: 10px auto 0;
        padding: 22px 73px 22px 53px;
        font-size: 16px;
    }

    .p-footer__right-btn{
        padding: 22px 65px 22px 45px;
    }

    .p-footer__btn-arrow{
        width: 40px;
        height: 40px;
        right: 10px;
        background-color: #E68310;
    }

    .p-footer__right-btn__arrow{
        width: 40px;
        height: 40px;
        right: 10px;
        background-color: #646464;
    }


    .p-footer__menu {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 13px 20px;
        margin: 63px auto 0;
        width: 100%;
        max-width: 340px;
    }


    .p-footer__menu-text {
        font-size: 10px;
    }

    .p-footer__copyright {
        font-size: 10px;
        margin-top: 21px;
    }
}