@charset "utf-8";

/* ----- loading ----- */
.p-loading_svg {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

#loading_svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loading-svg-hide {
    display: none;
}

@keyframes string-fill-d {
    0% {
        opacity: 0;
    }

    100% {
        fill: '#0000FF';
        stroke: #ffffff;
        opacity: 1;
    }
}

@keyframes string-fill-w {
    0% {
        opacity: 0;
    }

    100% {
        fill: '#006837';
        stroke: #ffffff;
        opacity: 1;
    }
}


.p-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 999999;
    overflow: hidden;
}

.diagonalBg1,
.diagonalBg2,
.diagonalBg3 {
    width: 300vw;
    height: 300vw;
    position: absolute;
    transform-origin: center;
    transform: translate(-50%, -50%) rotateZ(45deg);
    background-color: #0bb492;
}

.diagonalBg1 {
    top: 15%;
    left: 15%;
    z-index: 9;
}

.diagonalBg2 {
    top: 50%;
    left: 50%;
    z-index: 9;
}

.diagonalBg3 {
    top: 85%;
    left: 85%;
    z-index: 9;
}

.p-loading.loading-hidden .diagonalBg1,
.p-loading.loading-hidden .diagonalBg2,
.p-loading.loading-hidden .diagonalBg3,
.p-loading.loading-hidden .p-loading_svg {
    animation: loading-hide 2s ease-in-out 0s 1 forwards;
}

@keyframes loading-hide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        width: 0;
        display: none;
    }
}

.loading-svg-hide {
    animation: loading-hidden 1s ease-in-out 0s 1 forwards;
}

.loading-wrap-hide {
    display: none;
}

/* introduceArea ---> */
.p-introduceArea,
.p-bgGraCanvas {
    width: 100%;
}

.p-introduce,
.p-bgGraCanvas {
    /* min-width: 320px height:65rem max-width: 1200px height:79.6rem*/
    height: clamp(65rem, calc(65rem + 0.165909 * (100vw - 32rem)), 79.6rem);
}

.p-bgGraCanvas {
    position: relative;
    z-index: -2;
}

.p-bgGraCanvas>canvas {
    position: absolute;
    bottom: 0;
    z-index: -1;
}

.p-introduce {
    position: relative;
}

/* <--- introduceArea */

/* messageArea ---> */
.p-messageArea {
    width: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.p-message {
    /* min-width: 320px font-size:1.8rem max-width: 1024px font-size:3.2rem*/
    font-size: clamp(1.8rem, calc(1.8rem + 0.019886 * (100vw - 32rem)), 3.2rem);
    text-align: center;
    font-family: "游明朝", "Hiragino Mincho ProN W3", "Hiragino Mincho ProN", "YuMincho", "ヒラギノ明朝 ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    white-space: nowrap;
}

.p-messageArea h2 {
    margin: 75px 0 0 0;
}

.p-messageArea p {
    margin: 40px 0 75px 0;
}

.p-message>span {
    /* min-width: 600px font-size:1.8rem max-width: 1024px font-size:4rem*/
    font-size: clamp(1.8rem, calc(1.8rem + 0.019886 * (100vw - 32rem)), 3.2rem);
}

.p-messageImageArea {
    /* min-width: 320px width:29rem max-width: 1024px width:50rem */
    width: clamp(29rem, calc(29rem + 0.298295 * (100vw - 32rem)), 50rem);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.p-messageImageArea__image--monitor {
    width: 100%;
    position: absolute;
    top: 5px;
    left: 0;
    z-index: 100;
}

.p-messageImageArea__movie--sm {
    /* min-width: 320px width:29rem max-width: 1024px width:46rem */
    width: clamp(26.7rem, calc(26.7rem + 0.274148 * (100vw - 32rem)), 46rem);
    margin: 0 auto;
    position: absolute;
    /* min-width: 320px top:1.7rem max-width: 1024px top:2.3rem */
    top: clamp(17px, calc(17px + 0.008523 * (100vw - 320px)), 23px);
    /* min-width: 320px left:1.1rem max-width: 1024px left:1.9rem */
    left: clamp(1.1rem, calc(1.1rem + 0.011364 * (100vw - 32rem)), 1.9rem);
    z-index: 1;
}

.p-messageImageArea__image--monitor>img,
.p-messageImageArea__movie--sm>video {
    width: 100%;
}


.p-bgBottomGra {
    width: 100%;
    height: 70px;
    background: linear-gradient(#006607, #003304);
    position: absolute;
    bottom: 0;
    opacity: 40%;
}

@media screen and (max-width: 700px) {
    .p-message {
        margin: 50px 0;
        line-height: 200%;
    }

    .p-messageArea .br_sp {
        display: block;
    }

    .p-messageArea p {
        margin: 10px 0 75px 0;
    }

}


/* <--- messageArea */

/* <--- introduceArea */

/* mainMessageArea ---> */
.p-mainMessageArea {
    width: 100%;
}

.p-mainMessage {
    padding: 80px 0 90px 0;
    text-align: center;
}

.c-mainMessage {
    font-size: clamp(1.6rem, calc(1.6rem + 0.022727 * (100vw - 32rem)), 3.2rem);
    padding: 15px 0;
    z-index: 20003;
}

.br_sp {
    display: none;
}

@media screen and (max-width: 428px) {

    .p-mainMessage>p:first-child {
        line-height: 400%;
    }

    .c-mainMessage .br_sp {
        display: block;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .p-mainMessage {
        padding: 70px 0;
    }
}

/* <--- mainMessageArea */

/* serviceArea ---> */
.p-contentsArea {
    position: relative;
    padding: 0 20px;
}

.p-service {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
}

.p-serviceContent {
    max-width: 360px;
    width: 100%;
    background-color: #ffffffdd;
    border: solid 1px #ddd;
    margin: 0 auto;
    padding: 30px 20px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    z-index: -1;
}

.p-serviceContent__image--direction,
.p-serviceContent__image--design,
.p-serviceContent__image--coding {
    max-width: 300px;
    width: 100%;
    display: block;
    margin: 0 auto;
}

.p-serviceContent__title--direction,
.p-serviceContent__title--design,
.p-serviceContent__title--coding {
    max-width: 322px;
    width: 100%;
    height: 52px;
    color: #fff;
    text-align: center;
    line-height: 52px;
    background-repeat: no-repeat;
    background-size: 322px 52px;
    margin-bottom: 20px;
}

.p-serviceContent__title--direction {
    background-image: url(../images/home/title_back_direction.png);
}

.p-serviceContent__title--design {
    background-image: url(../images/home/title_back_design.png);
}

.p-serviceContent__title--coding {
    background-image: url(../images/home/title_back_coding.png);
}

.p-serviceContent__descriptin--direction,
.p-serviceContent__descriptin--design,
.p-serviceContent__descriptin--coding {
    margin: 30px 10px 0 10px;
    line-height: 3rem;
}

.p-contentsAreaBackImage {
    padding-top: 77px;
}

.p-contentsAreaBackImage>div {
    margin-top: 340px;
}

@media screen and (max-width: 428px) {

    .p-serviceContent__descriptin--direction,
    .p-serviceContent__descriptin--design,
    .p-serviceContent__descriptin--coding {
        margin: 10px;
    }
}

@media screen and (max-width: 600px) {

    .p-serviceContent__descriptin--direction,
    .p-serviceContent__descriptin--design,
    .p-serviceContent__descriptin--coding {
        margin: 20px 10px 0 10px;
    }
}

@media screen and (min-width: 600px) and (max-width: 880px) {

    /* serviceArea ---> */
    .p-service {
        height: 100%;
        flex-direction: column;
    }

    .p-service>section {
        margin: 0 auto;
    }

    .p-serviceContent+.p-serviceContent {
        margin-top: 20px;
        margin-left: auto;
    }

    .p-serviceContent {
        max-width: 700px;
    }

    .p-serviceContentDescription {
        display: flex;
    }

    .p-serviceContent__title--direction,
    .p-serviceContent__title--design,
    .p-serviceContent__title--coding {
        width: 265px;
        height: 45px;
        line-height: 45px;
        background-size: contain;
        margin: 0 auto 30px auto;
    }

    .p-serviceContent__image--direction,
    .p-serviceContent__image--design,
    .p-serviceContent__image--coding {
        width: 265px;
    }

    .p-serviceContent__descriptin--direction,
    .p-serviceContent__descriptin--design,
    .p-serviceContent__descriptin--coding {
        margin: 0 0 0 20px;
    }
}

@media screen and (max-width:1296px) {
    .p-service {
        max-width: 860px;
        justify-content: center;
    }
}

/* <--- serviceArea */

/* creationPolicyArea ---> */
.p-creationPolicyArea {
    padding: 100px 0 0;
}

.p-creationPolicy {
    padding: 80px 0;
    text-align: center;
    line-height: 300%;
    background-color: #ffffffdd;
    border-radius: 2px;
}

.p-creationPolicyArea>.p-creationPolicy .c-creationPolicyMessage:nth-child(2) {
    /* min-width: 320px left:2.5rem max-width: 1200px left:4rem */
    font-size: clamp(2.5rem, calc(2.5rem + 0.017045 * (100vw - 32rem)), 4rem);
    margin: 38px 0 33px 0;
}

.c-creationPolicyMessage {
    /* min-width: 320px left:1.6rem max-width: 1200px left:3.2rem */
    font-size: clamp(1.6rem, calc(1.6rem + 0.020725 * (100vw - 42.8rem)), 3.2rem);
    padding: 5px 0;
    z-index: 20003;
    text-shadow: #fff 1px 1px 0px, #fff -1px 1px 0px, #fff 1px -1px 0px, #fff -1px -1px 0px;
}

.br_tab {
    display: none;
}

@media screen and (max-width: 428px) {
    .p-creationPolicyArea .p-creationPolicy {
        padding: 40px 10px;
    }

    .c-creationPolicyMessage .br_sp {
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .p-service {
        padding: 0;
    }
}

@media screen and (max-width: 1024px) {
    .c-creationPolicyMessage>span {
        display: block;
    }

    .p-creationPolicy {
        position: relative;
        padding: 30px 0;
        z-index: 10007;
    }

    .p-creationPolicy>.c-creationPolicyMessage:first-child {
        line-height: 200%;
    }

    .p-creationPolicy>.p-mainMessage .c-creationPolicyMessage:nth-child(2) {
        font-size: 2.4rem;
        padding: 20px 0;
    }

    .c-creationPolicyMessage .br_tab {
        display: block;
    }
}

/* <--- creationPolicyArea */

/* processArea ---> */
.p-process {
    max-width: 1200px;
    margin: 100px auto 0 auto;
    position: relative;
    z-index: 10;
}

.p-process>section+section {
    margin-top: 70px;
}

.p-processContentArea {
    border: solid 1px #ddd;
    background-color: #fff;
    background-image: url(../images/home/corner.png);
    background-repeat: no-repeat;
    background-position: 11px 11px;
    padding: 60px 0 40px 0;
}

.p-processContentAreaTitle {
    text-align: center;
    /* min-width: 320px font-size:1.6rem max-width: 1200px font-size:2.8rem*/
    font-size: clamp(1.6rem, calc(1.6rem + 0.013636 * (100vw - 32rem)), 2.8rem);
    margin: 0 0 57px 0;
}

.p-processContentAreaTitle>span {
    display: block;
    margin-top: 10px;
}

.p-processContent {
    display: flex;
    /* min-width: 1100px margin-left:5rem max-width: 1260px margin-left: 11.4rem*/
    margin: 0 53px 0 clamp(5rem, calc(5rem + 0.400000 * (100vw - 110rem)), 11.4rem);
    padding-bottom: 20px;
}


.p-processContentImageWrapper {
    width: 50%;
    /* width: 100%; */
}

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

.c-processContentDescription {
    width: 50%;
    /* min-width: 320px font-size:1.4rem max-width: 1200px font-size:1.8rem*/
    font-size: clamp(1.4rem, calc(1.4rem + 0.004545 * (100vw - 32rem)), 1.8rem);
    line-height: 3rem;
    /* min-width: 1100px margin-left:3rem max-width: 1260px margin-left: 6rem*/
    margin-left: clamp(3rem, calc(3rem + 0.187500 * (100vw - 110rem)), 6rem);
}

@media screen and (max-width: 600px) {
    .p-processContentArea {
        padding-top: 30px;
        padding-bottom: 0;
    }

    .p-contentsArea .p-process>section+section {
        margin-top: 30px;
    }
}

@media screen and (max-width: 880px) {

    /* processArea ---> */
    .p-processContentArea {
        background-size: 70px 70px;
    }

    .p-processContent {
        flex-direction: column;
        margin: 0 20px;
    }

    .p-processContentAreaTitle {
        margin-bottom: 30px;
    }

    .p-processContentImageWrapper {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }

    .c-processContentDescription {
        max-width: 600px;
        width: 100%;
        margin: 30px auto 0 auto;
    }

    .p-process>section+section {
        margin-top: 50px;
    }
}

/* <--- processArea */

/* features ---> */
.p-featureContentArea__wrapper {
    position: relative;
}

.p-featureContentArea__wrapper+.p-featureContentArea__wrapper {
    margin-top: 80px;
}

.p-slideframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 540px;
    background: linear-gradient(45deg, #0bb492 0%, #0ED8AF 25%, #0bb492 50%, #0ED8AF 75%, #0bb492 100%);
    z-index: 50000;
    transform: translateX(-120%);
}

.p-feature {
    position: relative;
    z-index: 10;
    margin-bottom: 100px;
}

.c-featureTitle {
    /* min-width: 320px font-size:1.8rem max-width: 1200px font-size:6rem*/
    font-size: clamp(1.8rem, calc(1.8rem + 0.047727 * (100vw - 32rem)), 6rem);
    text-align: center;
    padding: 0px 0 47px 0;
    text-shadow: white 1px 1px 0px, white -1px 1px 0px, white 1px -1px 0px, white -1px -1px 0px;
}

.c-featureTitle>span {
    font-size: clamp(1.6rem, calc(1.6rem + 0.009091 * (100vw - 32rem)), 2.4rem);
    display: block;
    padding-top: 10px;
}


.c-featureTitle {
    padding: 0 0 15px 0;
}


.p-featureContentArea__feature01,
.p-featureContentArea__feature02 {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.p-featureContent__feature01,
.p-featureContent__feature02 {
    display: flex;
    gap: clamp(2rem, calc(2rem + 0.060000 * (100vw - 70rem)), 5rem);
}

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

.p-featureContent__feature01,
.p-featureContent__feature02 {
    max-width: 1120px;
    /* min-width: 700px padding: 2rem padding: 1200px font-size:5rem*/
    padding: clamp(2rem, calc(2rem + 0.060000 * (100vw - 70rem)), 5rem);
    border: solid 1px #ddd;
    background-color: #fff;
    box-shadow: 0px 1px 5px #ddd;
}

.c-contentNumber__left,
.c-contentNumber__right {
    width: 120px;
    font-size: 6rem;
    color: #18c5a2;
    background-color: #ffffffdd;
    border: solid 2px #17caa6;
    border-radius: 100%;
    padding: 20px;
    text-align: center;
    box-shadow: white 2px 2px 0px, white -2px 2px 0px, white 2px -2px 0px, white -2px -2px 0px;
}

.c-contentNumber__left {
    margin: 0 0 20px 0;
}

.c-contentNumber__right {
    margin: 0 0 20px auto;
}

/* feature common ---> */
.c-featureContentDescriptionTitle__question01,
.c-featureContentDescriptionTitle__question02 {
    font-size: 2rem;
    background-repeat: no-repeat;
    background-position: 1px 1px;
    border-top: 20px;
    padding: 20px 0 30px 80px;
    border-bottom: solid 1px #707070;
    line-height: 2rem;
}

.c-featureContentDescriptionTitle__answer01,
.c-featureContentDescriptionTitle__answer02 {
    font-size: 1.8rem;
    margin-top: 25px;
    line-height: 3rem;
}

/* <--- feature common */

/* feature 01 ---> */
.p-featureContentArea__feature01 {
    background-image: url(../images/home/features/corner.png);
    background-repeat: no-repeat;
    background-position: top 44px right 0px;
}

.p-featureContentImageWrapper__feature01,
.p-featureContentImageWrapper__feature02 {
    flex: 1;
}

.p-featureContentImageWrapper__feature01>img,
.p-featureContentImageWrapper__feature02>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-featureContentDescription__feature01 {
    flex: 1;
}

.c-featureContentDescriptionTitle__question01 {
    background-image: url("../images/home/features/01/human.png");
}

/* <--- feature 01 */

/* feature 02 ---> */
.p-featureContent__feature02 {
    margin-left: 70px;
}

.p-featureContentArea__feature02 {
    background-image: url(../images/home/features/corner.png);
    background-repeat: no-repeat;
    background-position: top 70px left 7px;
}

.p-featureContentDescription__feature02 {
    flex: 1;
}

.c-featureContentDescriptionTitle__question02 {
    background-image: url("../images/home/features/02/human.png");
}

@media screen and (max-width: 620px) {

    .p-featureContent__feature01,
    .p-featureContent__feature02 {
        flex-direction: column;
    }

    .p-featureContentArea__wrapper .c-contentNumber__left,
    .p-featureContentArea__wrapper .c-contentNumber__right {
        font-size: 3rem;
    }

    .c-contentNumber__left,
    .c-contentNumber__right {
        width: 80px;
    }

    .c-featureContentDescriptionTitle__question01 .br_pc {
        display: none;
    }

    .c-featureContentDescriptionTitle__answer01,
    .c-featureContentDescriptionTitle__answer02 {
        margin-top: 15px;
    }
}

@media screen and (min-width: 621px) and (max-width: 1200px) {

    .p-featureContentArea__wrapper .c-contentNumber__left,
    .p-featureContentArea__wrapper .c-contentNumber__right {
        font-size: 4rem;
    }

    .c-contentNumber__left,
    .c-contentNumber__right {
        width: 90px;
    }
}

@media screen and (max-width: 1200px) {
    .p-featureContent__feature02 {
        margin-left: 0;
    }

    .p-featureContentDescription__feature01 {
        padding: 0 5px;
    }

    .p-featureContentArea__feature01,
    .p-featureContentArea__feature02 {
        background-image: none;
    }

    .p-featureContentImageWrapper__feature01,
    .p-featureContentImageWrapper__feature02 {
        margin: 10px 5px;
    }

    .p-featureContentArea__feature01,
    .p-featureContentArea__feature02,
    .p-featureContent__feature01,
    .p-featureContent__feature02,
    .p-featureContentArea__wrapper img,
    .c-featureContentDescriptionTitle__answer01,
    .c-featureContentDescriptionTitle__answer02 {
        width: 100%;
    }

    .c-featureContentDescriptionTitle__question01,
    .c-featureContentDescriptionTitle__question02,
    .c-featureContentDescriptionTitle__answer01,
    .c-featureContentDescriptionTitle__answer02 {
        font-size: 1.4rem;
    }
}

/* <--- features */
/* <--- slider */

.slider {
    margin: 80px 0;
}

.swiper-slide {
    border: solid 1px #eee;
    margin: 0 20px;
}

.slide-item {
    position: relative;
    overflow: hidden;
}

.slide-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.slider {
    overflow: hidden;
}

.slider .swiper {
    overflow: visible;
}

.slider .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}

.slider .swiper-slide {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

.slider .slide {
    overflow: hidden;
    border-radius: 4px;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
}

.slider .slide-item {
    width: 200px;
    height: 250px;
}

.slider .slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* slider ---> */

/* lastMessageArea ---> */
.p-lastMessageArea {
    padding: 0 20px;
}

.p-lastMessageWrapper {
    max-width: 1200px;
    margin: 0 auto;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    background-color: #ffffffef;
    border: solid 1px #bdbdbd;
    padding: 30px;
}

.p-lastMessage {
    width: 100%;
    position: relative;
    z-index: 20001;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.p-createHomepage>img {
    /* width: 769x width:35rem width: 1200px width:50rem*/
    width: clamp(35rem, calc(35rem + 0.348028 * (100vw - 76.9rem)), 50rem);
}

.p-lastMessageSentence {
    width: 100%;
    padding: 73px 20px;
    position: relative;
    z-index: 20003;
    text-align: center;
    line-height: 7rem;
}

.c-lastMessage {
    font-size: clamp(1.8rem, calc(1.8rem + 0.007955 * (100vw - 32rem)), 2.5rem);
    position: relative;
    z-index: 20003;
}

.c-lastMessage .br_sp_top,
.c-lastMessage .br_sp_bottom {
    display: none;
}

@media screen and (max-width: 400px) {
    .c-lastMessage .br_sp_top {
        display: block;
    }
}

@media screen and (max-width: 580px) {
    .c-lastMessage .br_sp_bottom {
        display: block;
    }
}

@media screen and (max-width: 768px) {
    .p-lastMessageWrapper {
        /* width: 320x width:30rem width: 768px width:50rem*/
        padding: clamp(2rem, calc(2rem + 0.066964 * (100vw - 32rem)), 5rem);
    }

    .p-lastMessageWrapper .p-createHomepage>img {
        /* width: 320x width:35rem width: 768px width:50rem*/
        width: clamp(25rem, calc(25rem + 0.559284 * (100vw - 32rem)), 50rem);

    }

    .p-lastMessage {
        flex-direction: column;
    }

    .p-lastMessageSentence {
        padding: 50px 0 30px 0;
    }
}

@media screen and (max-width: 1024px) {

    /* last message ---> */
    .p-lastMessage {
        height: 100%;
    }

    .p-lastMessageSentence {
        line-height: 5rem;
    }

    /* <--- last message */
}

/* <--- lastMessageArea */

/* scroll down ---> */
.p-scrollDown {
    width: 10px;
    height: 70px;
    margin: 80px auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.p-scrollDown::before {
    content: "";
    width: 3px;
    height: 10px;
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #888;
    animation: p-scrollDown 2s infinite;
    z-index: 3;
}

.p-scrollDown::after {
    content: "";
    width: 5px;
    height: 68px;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border: solid 1px #bbb;
    z-index: 2;
}

@keyframes p-scrollDown {
    0% {
        top: -50%;
    }

    100% {
        top: 150%;
    }
}

/* <--- scroll down */

/* Utility */

.u-mb0 {
    margin-bottom: 0;
}