@charset "UTF-8";
/* 変数 */
:root {
    --ocean: #0158b3;
    --aqua: #94d2ef;
    --lite_aqua: #cff0ff;
    --white: #fff;
    --text: #333333;
}

/* pc版 */
html {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 0.69444444444vw;
    /* 固定値（px） / 基準の画面幅（px） * 100 
       10/1440 *100 =  0.69444444444.... 
    これで1rem = 0.69444444444vw = (画面幅が1440pxのとき)10px になる
    〇〇px / 10 = 〇〇rem*/
}

.sp {
    display: none;
}

.pc {
    display: block;
}
/* 1440幅より大きい場合は1remを10px固定に*/
@media (width > 1440px) {
    html {
        font-size: 62.5%;
    }
}

/* 1000pxのとき10px */
/* @media (width <=1000px) {
    html {
        font-size: 1vw;
    }
    .sp {
        display: block;
    }
    .pc {
        display: none;
    }
} */

/* 1000幅より小さい場合1remを10px固定に*/
@media (width <=1000px) {
    html {
        font-size: 62.5%;
    }
    .sp {
        display: block;
    }
    .pc {
        display: none;
    }
}

/***********
*  共通 
 ***********/

/* base txt */
body {
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.8;
    overflow-x: clip;
    max-width: 100%;

    /* 画面幅を超えて横スクロールさせない */
    overflow-x: clip;
}
@media (width <=1000px) {
    body {
        font-size: 1.4rem;
    }
}

/* large txt */
.large-txt {
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.4;
}
@media (width <=1000px) {
    .large-txt {
        font-size: 2rem;
    }
}

/* strong txt */
.strong-txt {
    font-weight: 800;
    font-size: 3.5rem;
    line-height: 1.4;
}
@media (width <=1000px) {
    .strong-txt {
        font-size: 2.4rem;
    }
}

/* 英語見出し */
.headline_box {
    position: relative;
    display: flex;
    justify-content: center;
}
.en_headline {
    font-family: "Noto Serif", serif;
    font-size: 10rem;
    font-weight: 400;
    line-height: 1.4;
    text-transform: uppercase;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -8rem;
    opacity: 0.2;
    z-index: -1;
}
@media (width <=1000px) {
    .en_headline {
        font-size: 5rem;
        top: -4rem;
    }
}

/* テキストカラー */
.txt_aqua {
    color: var(--aqua);
}
.txt_wh {
    color: var(--white);
}
.txt_ocean {
    color: var(--ocean);
}

/* wrapper */
.wrapper {
    width: 100%;
    max-width: 1040px;
    margin: auto;
    padding: 0 20px;
}

/* 背景色 */
.aqua {
    background-color: var(--aqua);
}
.ocean {
    background-color: var(--ocean);
}

/* あしらいのグラデーション正方形 */
.grade_square {
    position: absolute;
    opacity: 0.4;
    border-radius: 10px;
    background: linear-gradient(
        155deg,
        var(--ocean, rgba(1, 88, 179, 0.4)) 16.99%,
        var(--aqua, rgba(148, 210, 239, 0.4)) 89.57%
    );
}

/* 背景に画像 */
.bg_img {
    position: relative;
    &::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.8;
        z-index: 0;
        background-color: var(--ocean);
    }
}
.bg_img > * {
    position: relative;
    z-index: 1; /* テキストをオーバーレイの上に出す */
}

/* 背景にビルの画像 */
.bg_img.bilding {
    background-image: url(../images/bg_bilging.webp);
    background-size: cover;
}

/* 背景にテクスチャー素材 */
.bg_img.texture {
    background-image: url(../images/bg_texture.webp);
    background-size: cover;
}

/* 箇条書きリスト */
.disc_list {
    list-style: disc inside;
}

/***********
*  header
 ***********/
header {
    width: 100%;
    padding: 2rem 2rem 0;
    position: fixed;
    z-index: 999;
}

.header {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 9rem;
    padding: 0 6rem;
    color: var(--ocean);
}

.logo {
    object-fit: contain;
    height: 5rem;
    width: 16rem;
}

.header_list ul {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
}

/* headerは、1000pxでブレイク */
@media (width <=1000px) {
    .header {
        padding: 1rem 2rem;
        height: 7rem;
        max-width: 100vw;
        overflow-x: clip;

        .pc {
            display: none;
        }
    }
    .logo {
        width: 14.7rem;
        height: 5rem;
    }
    .menu_btn {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: end;
        cursor: pointer;
        transition: 0.5s;
        width: 3rem;
        height: 3.2rem;
        span {
            display: block;
            height: 0.3rem;
            width: 3rem;
            background-color: var(--ocean);
            border-radius: 999px;
        }
    }

    .menu_btn.close {
        display: block;
        position: relative;
        width: 3rem;
        height: 3rem;
        transform: rotate(45deg);
        transition: 0.5s;
        align-self: end;
        span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            &:nth-of-type(1) {
                height: 3rem;
                width: 0.3rem;
            }
        }
    }
    .menu_list {
        display: none;
    }
    .menu_list.activ {
        position: fixed;
        display: flex;
        justify-content: end;
        width: 100%;
        height: 100dvh;
        background-color: rgba(0, 0, 0, 0.2);
        top: 0;
        left: 0;
        .menu_list_innner {
            width: calc(100% - 5rem);
            overflow: scroll;
            background-color: var(--white);
            display: flex;
            flex-direction: column;
            padding: 3.5rem 2.7rem 0 3rem;
            gap: 3.85rem;
        }

        .menu_list_innner_list {
            height: auto;

            > ul {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 2.5rem;
                > li {
                    width: 100%;
                    > a {
                        display: block;
                        width: 100%;
                    }
                }

                /* .menu-item-has-children {
                    position: relative;
                }

                .toggle {
                    width: 5rem;
                    height: 5rem;
                    position: absolute;
                    top: 1rem;
                    right: -1rem;
                    background-image: url(../images/header-toggle.svg);
                    background-size: 2rem 2rem;
                    background-repeat: no-repeat;
                    background-position: center;
                    transition: 0.5s;
                }

                .menu-item-has-children.submenu-open {
                    .toggle {
                        transition: 0.5s;
                        transform: rotate(180deg);
                    }
                    > a {
                        &::after {
                            content: none;
                        }
                    }
                } */
            }
            /* 
            ul.sub-menu {
                display: none;
            }

            ul.sub-menu.is-open {
                display: block;

                li {
                    a {
                        padding: 0 1rem 2.4rem 1rem;
                        display: flex;
                        align-items: center;
                        gap: 0.3rem;

                        &::before {
                            content: "";
                            display: block;
                            width: 0.8rem;
                            height: 0.8rem;
                            border-radius: 999px;
                            background-color: #5bbfb6;
                        }
                    }
                    &:last-of-type {
                        a {
                            &::after {
                                content: "";
                                position: absolute;
                                display: block;
                                bottom: 0;
                                left: 0;
                                width: 100%;
                                height: 0.1rem;
                                background-color: var(--gray-500);
                            }
                        }
                    }
                }
            } */
        }
    }
}
/***********
*  footer
 ***********/
.footer {
    padding: 10rem 0;
    display: grid;
    place-content: center;
    place-items: center;
    gap: 3.5rem;
    color: var(--ocean);
}
.sns_icon_list {
    display: flex;
    gap: 3rem;
}

/***********
* fv
 ***********/

.fv {
    position: relative;
    padding-bottom: 11.3rem;
    height: 102.4rem;
    &::after {
        content: "";
        position: absolute;
        z-index: -10;
        width: 100%;
        height: 100%;
        background-color: var(--ocean);
        top: 0;
    }
    .grade_square.big {
        width: 21rem;
        height: 21.1rem;
    }
    .grade_square.small {
        width: 11.8rem;
        height: 12rem;
    }
    .grade_square_group {
        z-index: 1;
        position: absolute;
        display: grid;
    }
    .grade_square_group.left {
        left: 0;
        bottom: -20.5rem;
        grid-template-columns: 14.2rem 6.8rem 5rem;
        grid-template-rows: 13.1rem 7.9rem 4rem;
        .grade_square.big {
            grid-row: 1/3;
            grid-column: 1/3;
        }
        .grade_square.small {
            grid-row: 2/4;
            grid-column: 2/4;
        }
    }
    .grade_square_group.right {
        left: 63.9rem;
        bottom: -21.1rem;
        grid-template-columns: 8.9rem 12.1rem 1.5rem;
        grid-template-rows: 6.8rem 7rem 14.3rem;
        .grade_square.big {
            grid-row: 2/4;
            grid-column: 1/3;
        }
        .grade_square.small {
            width: 13.6rem;
            height: 13.6rem;
            grid-row: 1/3;
            grid-column: 2/4;
        }
    }
}

.fv_wrapper {
    max-width: 1440px;
    margin: auto;
    padding-top: 6.6rem;
    position: relative;
    height: 100%;
     /* 画面幅を超えて横スクロールさせない */
    overflow-x: clip;
}

.fv_box {
    position: relative;
    height: 100%;
    padding-top: 11rem;
    &::after {
        content: "";
        position: absolute;
        z-index: -8;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            180deg,
            #fff 9.71%,
            rgba(1, 88, 179, 0.2) 100%
        );
        top: 0;
        left: 0;
    }
}

.fv_box_txt {
    width: 95.8rem;
    height: 46.9rem;
    border-radius: 0 10px 10px 0;
    background: rgba(1, 88, 179, 0.2);
    color: var(--white);
    padding-left: 8.3rem;
    font-size: 3.5rem;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    justify-content: center;
}

.fv_copy {
    font-size: 2.4rem;
}

.fv_contact_btn {
    background-color: var(--white);
    border-radius: 999px;
    color: var(--ocean);
    font-size: 2.4rem;
    width: 46.5rem;
    padding: 1.5rem 0;
    text-align: center;
}

.fv_img {
    position: absolute;
    right: 0;
    bottom: -14rem;
    width: 65rem;
    height: 47.3rem;
    border-radius: 10px 0 0 10px;
}

.fv_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    object-fit: cover;
    height: 100%;
    z-index: -9;
}

@media (width <=1000px) {
    .pc {
        display: none;
    }
    .fv {
        height: 63.8rem;
        /* height: calc(((100vw - 6.5rem) * 1.03 ) + 38.8rem); */
        padding-bottom: 7.3rem;
        .pc {
            display: none;
        }
        .grade_square_group.left {
            grid-template-columns: 4.6rem 2.8rem 2.6rem;
            grid-template-rows: 1.9rem 3.6rem 3.7rem;
            bottom: 3.7rem;
            .grade_square.big {
                grid-row: 2/4;
                grid-column: 1/3;
            }
            .grade_square.small {
                grid-row: 1/3;
                grid-column: 2/4;
            }
        }

        .grade_square.big {
            width: 7.4rem;
            height: 7.3rem;
        }
        .grade_square.small {
            width: 5.4rem;
            height: 5.5rem;
        }
        .grade_square.big.under {
            width: 8.4rem;
            height: 8.3rem;
            left: 1.8rem;
            bottom: -10.3rem;
        }
        .grade_square.big.top {
            width: 8.2rem;
            height: 8.1rem;
            right: 0;
            bottom: 11rem;
        }
    }
    .fv_box {
        padding-top: 8rem;
    }
    .fv_wrapper {
        padding-top: 3.5rem;
    }
    .fv_box_txt {
        padding: 0 2rem;
        width: auto;
        font-size: 1.8rem;
        height: 24.8rem;
        gap: 1rem;
        margin-right: 5.4rem;
    }
    .fv_copy {
        font-size: 1.4rem;
    }
    .fv_contact_btn {
        padding: 1.5rem 2rem;
        width: fit-content;
        vertical-align: middle;
        font-size: 1.4rem;
    }
    .fv_img {
        width: calc(100vw - 6.5rem);
        /* height: calc((100vw - 6.5rem) * 1.03); */
        height: 26.3rem;
        bottom: -8.7rem;
        object-fit: cover;
    }
}

/***********
* challenging(やりがい)
 ***********/
.challenging {
    position: relative;
    padding: 11.7rem 0 8.7rem;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100% + 20.9rem);
        z-index: -10;
        background-color: var(--lite_aqua);
    }
    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background-image: url(../images/challenging_bg.webp);
        width: 100%;
        height: calc(100% + 20.9rem);
        display: block;
        z-index: -9;
        background-size: cover;
        opacity: 0.1;
    }
}

.challenging_innner {
    display: grid;
    column-gap: 6rem;
    row-gap: 2rem;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
}

.challenging_graph {
    width: 44rem;
    height: 37.7rem;
    grid-column: 1/2;
    grid-row: 1/3;
    object-fit: contain;
}

.challenging_txt {
    &.main {
        grid-column: 2/3;
        grid-row: 1/2;
        align-content: flex-end;
        p:nth-of-type(1) {
            font-size: 2.4rem;
        }
        p:nth-of-type(2) {
            font-size: 3.5rem;
            line-height: 1.5;
            span {
                color: var(--ocean);
            }
        }
    }
    &.sub {
        grid-column: 2/3;
        grid-row: 2/3;
        p {
            color: var(--ocean);
        }
        .source {
            font-size: 1.2rem;
            margin-top: 1rem;
            color: #606060;
        }
    }
}

/* .challenging_txt {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    p:nth-of-type(1) {
        font-size: 2.4rem;
    }
    p:nth-of-type(2) {
        font-size: 3.5rem;
        span {
            color: var(--ocean);
        }
    }
    p:nth-of-type(4) {
        color: var(--ocean);
    }
} */

@media (width <=1000px) {
    .challenging {
        padding: 5rem 0;
        &::before {
            height: calc(100% + 4rem);
        }
        &::after {
            height: calc(100% + 4rem);
        }
    }
    .challenging_innner {
        display: grid;
        grid-template-rows: repeat(3, auto);
        grid-template-columns: 100%;
        column-gap: 0;
        place-items: center;
    }
    .challenging_graph {
        grid-column: 1/2;
        grid-row: 2/3;
        width: 28rem;
        height: 27.2134rem;
        justify-self: center;
    }
    .challenging_txt {
        &.main {
            grid-column: 1/2;
            grid-row: 1/2;
            width: fit-content;
            p:nth-of-type(1) {
                font-size: 1.4rem;
            }
            p:nth-of-type(2) {
                font-size: 2rem;
            }
        }
        &.sub {
            grid-column: 1/2;
            grid-row: 3/4;
        }
    }
}

/***********
* cta
 ***********/
.cta {
    overflow-x: clip;
}
.cta_innner {
    padding: 9rem 5rem;
    border-radius: 10px;
    border: 1px solid var(--ocean);
    background: var(--white);
    color: var(--ocean);
    margin-bottom: 12rem;
    position: relative;

    .cta_txt {
        margin-bottom: 6rem;
        text-align: center;
        p {
            color: var(--ocean);
            &:nth-of-type(1) {
                font-size: 3.5rem;
                font-weight: 700;
            }
            &:nth-of-type(2) {
                font-size: 2.4rem;
                font-weight: 500;
            }
        }
    }

    .cta_btn_list {
        /* display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem; */

        .cta_btn {
            color: var(--white);
            font-size: 2.4rem;
            font-weight: 500;
            background-color: var(--ocean);
            border-radius: 40px;
            padding: 2rem 0;
            text-align: center;
        }
    }

    .grade_square_group {
        position: absolute;
        display: grid;
    }
    .grade_square_group.left {
        left: -7rem;
        bottom: -5.2rem;
        grid-template-columns: 4rem 4rem 5.9rem;
        grid-template-rows: 3.1rem 5rem 5rem;
        .grade_square.big {
            width: 10rem;
            height: 10rem;
            grid-column: 2/4;
            grid-row: 2/4;
        }
        .grade_square.small {
            width: 8rem;
            height: 8rem;
            grid-column: 1/3;
            grid-row: 1/3;
        }
    }
    .grade_square_group.right {
        top: -3.9rem;
        right: -5.9rem;
        grid-template-rows: 7.4rem 10.6rem 2.4rem;
        grid-template-columns: 8.6rem 4.4rem 3.6rem;
        .grade_square.big {
            width: 13rem;
            height: 13rem;
            grid-column: 1/3;
            grid-row: 1/3;
        }
        .grade_square.small {
            width: 8rem;
            height: 8rem;
            grid-column: 2/4;
            grid-row: 2/4;
        }
    }
}

@media (width <=1000px) {
    .cta_innner {
        padding: 3rem 2rem;
        margin-bottom: 3rem;
        .cta_txt {
            margin-bottom: 2rem;
            p {
                &:nth-of-type(1) {
                    font-size: 2rem;
                }
                &:nth-of-type(2) {
                    font-size: 1.4rem;
                }
            }
        }
        .cta_btn_list {
            grid-template-columns: auto;
            grid-template-rows: 1fr 1fr;
            .cta_btn {
                font-size: 2rem;
            }
        }
    }
}
/***********
* profile(代表プロフィール)
 ***********/
.profile {
    padding: 20rem 0 14rem;
}

.profile_wrapper {
    max-width: 1440px;
    margin: auto;
     /* 画面幅を超えて横スクロールさせない */
    overflow-x: clip;
}
.profile_img {
    border-radius: 0 10px 10px 0;
}
.profile_box_txt {
    border-radius: 10px 0 0 10px;
}
.profile_box {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 10rem 1fr;
    grid-template-rows: auto;
    margin-top: 6rem;

    .profile_box_img {
        position: relative;
        grid-column: 1/3;
        grid-row: 1/2;
        height: fit-content;

        img {
            display: block;
            width: 100%;
            min-width: 65rem;
            height: 100%;
            min-height: 40.4rem;
            max-height: 55rem;
            object-fit: cover;
        }
        .grade_square.big {
            width: 18rem;
            height: 18rem;
            right: 2.5rem;
            bottom: -7.2rem;
        }
        .grade_square.small {
            width: 10.7rem;
            height: 10.7rem;
            right: 15.1rem;
            bottom: -12.4rem;
        }
    }
    .profile_box_txt {
        grid-column: 2/4;
        grid-row: 1/2;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 14rem 8rem 8rem 15rem;
        margin-top: 14rem;
        display: flex;
        flex-direction: column;
        gap: 8rem;

        .profile_box_txt_headline {
            font-weight: bold;
        }
        > div {
            &:nth-of-type(1) {
                display: flex;
                flex-direction: column;
                gap: 2rem;
            }
            &:nth-of-type(2) {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 7rem;
            }
        }
    }
}

@media (width <=1000px) {
    .profile {
        padding: 6rem 0;
    }
    .profile_box {
        margin-top: 3.1rem;
        .pc {
            display: none;
        }
        grid-template-columns: 2rem auto 2rem;
        .profile_box_img {
            img {
                width: calc(100vw - 2rem);
                /* height: 20.2rem; */
                height: calc((100vw - 2rem) * 0.6733);
                /* height: auto;
                aspect-ratio: 30 / 20.2;  */
                min-width: 30rem;
                min-height: 20.2rem;
            }
        }
        .profile_box_txt {
            padding: calc((100vw - 2rem) * 0.6733 - 4.7rem + 3.5rem) 2rem 4rem
                2.5rem;
            margin-top: 4.7rem;
            gap: 2rem;
            > div {
                &:nth-of-type(2) {
                    grid-template-columns: auto;
                    grid-template-rows: repeat(2, auto);
                    gap: 2rem;
                }
            }
        }
    }
}
/***********
* service(サービス内容)
 ***********/
.service {
    padding: 20rem 0;
}
.service_wrapper {
    max-width: 1440px;
    margin: auto;
     /* 画面幅を超えて横スクロールさせない */
    overflow-x: clip;
}

/* 左寄せボックス */
.box-left {
    width: 100%;
    display: flex;
    justify-content: left;
    padding-right: 4.95rem;
}
.box-left-innner {
    width: calc(100% - 27rem);
    padding-left: 22rem;
    border-radius: 0 10px 10px 0;
}

/* 右寄せボックス */
.box-right {
    width: 100%;
    display: flex;
    justify-content: right;
    padding-left: 4.95rem;
}
.box-right-innner {
    width: calc(100% - 27rem);
    padding-right: 22rem;
    border-radius: 10px 0 0 10px;
}

@media (width <=1000px) {
    .box-left {
        padding-right: 0;
    }
    .box-left-innner {
        width: auto;
    }
    .box-right {
        padding-left: 0;
    }
    .box-right-innner {
        width: auto;
    }
}

@media (width > 1440px) {
    .box-left-innner {
        width: 100%;
    }

    .box-right-innner {
        width: 100%;
    }
}

.service_list {
    margin-top: 15rem;
    display: flex;
    flex-direction: column;
    gap: 20rem;
    color: var(--white);
    .box-right-innner,
    .box-left-innner {
        background-color: var(--ocean);
        position: relative;
        z-index: -2;
        padding-top: 5rem;
        padding-bottom: 6rem;
    }
    .box-left-innner::before,
    .box-right-innner::before {
        content: "";
        position: absolute;
        width: 51.8rem;
        height: 25rem;
        bottom: 0;
        opacity: 0.8;
    }
    .box-left-innner::before {
        right: 0;
        background: linear-gradient(
            155deg,
            var(--ocean, rgba(1, 88, 179, 0.8)) 16.99%,
            var(--aqua, rgba(148, 210, 239, 0.8)) 89.57%
        );
        clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
        border-radius: 0 10px 10px 0;
        border-radius: 0 10px 10px 0;
    }
    .box-right-innner::before {
        left: 0;
        background: linear-gradient(
            155deg,
            var(--ocean, rgba(1, 88, 179, 0.8)) 16.99%,
            var(--aqua, rgba(148, 210, 239, 0.8)) 89.57%
        );
        clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
        border-radius: 10px 0 0 10px;
    }

    .service_list_headline {
        font-size: 2rem;
    }

    .service_list_txtbox {
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        > div {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
    }
    .box-right-innner .service_list_txtbox {
        padding-left: 55rem;
    }
    .box-right-innner .service_list_headline {
        padding-left: 55rem;
    }

    /* --- 小見出し（対象・内容・期待効果） --- */
    .service_list_txtbox > div > p:first-child {
        position: relative;

        &::before {
            content: "";
            position: absolute;
            background: linear-gradient(
                90deg,
                var(--ocean, rgba(1, 88, 179, 0.5)) 4%,
                var(--aqua, rgba(148, 210, 239, 0.5)) 100%
            );
            display: block;
            /* width: calc(26rem + ((100vw - 1000px) / 2)); */
            /* left: calc((1000px - 100vw) / 2); */
            left: -22rem;
            width: calc(26rem + 22rem);
            height: 3.7rem;
            /* 小見出しも斜めカット */
            clip-path: polygon(0 0, 95% 0, 100% 100%, 0 100%);
            opacity: 0.5;
            z-index: -1;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    li.box-right .service_list_txtbox > div > p:first-child {
        &::before {
            left: -55rem;
            width: calc(26rem + 55rem);
        }
    }

    .service_list_img {
        width: 55rem;
        height: 37rem;
        position: absolute;
        top: -5rem;
        right: -4.95rem;
        border-radius: 10px;
    }
    .box-right-innner .service_list_img {
        left: -5rem;
    }
}

@media (width <=1000px) {
    .service {
        padding: 6rem 0;
    }
    .service_list {
        margin-top: 3rem;
        gap: 3rem;
        .box-right-innner,
        .box-left-innner {
            width: calc(100vw - 2rem);
            padding: 3rem 2rem 25rem 2rem;
        }
        .box-left-innner {
            border-radius: 0 10px 10px 0;
        }
        .box-right-innner {
            border-radius: 10px 0 0 10px;
        }
        .box-left-innner::before,
        .box-right-innner::before {
            height: 25rem;
            width: 100%;
        }
        .box-left-innner::before {
            clip-path: polygon(0 0, 100% 60.2%, 100% 100%, 0 100%);
            background: linear-gradient(
                245deg,
                var(--ocean, rgba(1, 88, 179, 0.8)) 16.99%,
                var(--aqua, rgba(148, 210, 239, 0.8)) 89.57%
            );
        }
        .box-right-innner::before {
            clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 60.2%);
        }

        .service_list_headline {
        }

        .service_list_txtbox {
            > div {
            }
        }
        .box-right-innner .service_list_txtbox {
            padding-left: 2rem;
        }
        .box-right-innner .service_list_headline {
            padding-left: 2rem;
        }

        /* --- 小見出し（対象・内容・期待効果） --- */
        .service_list_txtbox > div > p:first-child {
            &::before {
                left: 0;
                width: 24rem;
                clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
            }
        }

        li.box-right .service_list_txtbox > div > p:first-child {
            &::before {
                left: -2rem;
                width: 24rem;
            }
        }

        .service_list_img {
            width: calc(100vw - 2rem);
            /* height: calc((100vw - 2rem) * 0.5349); */
            height: 16.1rem;
            bottom: 5rem;
            top: auto;
            /* right: calc((100vw - 2rem) - 100vw); */
            right: -2rem;
            object-fit: cover;
            border-radius: 10px 0 0 10px;
        }
        .box-right-innner .service_list_img {
            right: auto;
            left: -2rem;
            border-radius: 0 10px 10px 0;
        }
    }
}

/***********
* flow(サービスの流れ)
 ***********/
/* 流れ全体 */
.flow {
    padding: 20rem 0;
    .headline_box {
        color: var(--white);
        h2 {
            text-align: center;
        }
    }
}
.flow_list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    list-style: none;
    margin: 4rem 0 0;
    width: 100%;
}

/* 横ライン */
.flow_list::before {
    content: "";
    position: absolute;
    top: 3rem; /* 丸の中心に合わせる */
    left: 1rem;
    width: 95%;
    height: 2px;
    background: #ccc;
    z-index: 0;
}

/* 各ステップ */
.flow_list li {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--white);
}

/* 丸い番号 */
.flow_list li > div:first-child {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: white;
    color: var(--ocean);
    font-weight: bold;
    font-size: 1.2em;
    line-height: 56px;
    z-index: 1;
    position: relative;
}

/* 下の説明テキスト */
.flow_list li > div:last-child {
    margin-top: 0.5em;
}
.flow_list li p {
    margin: 0.2em 0;
}

/* スマホ縦並び */
@media (max-width: 1000px) {
    .flow {
        padding: 6rem 0;
    }
    .flow_list {
        flex-direction: column;
        gap: 2rem;
        width: fit-content;
        margin: 6rem auto 0;
    }
    .flow_list::before {
        width: 2px;
        height: 100%;
        left: 3rem;
        top: 0;
    }
    .flow_list li {
        flex-direction: row;
        gap: 2rem;
    }
    .flow_list li > div:last-child {
        display: flex;
    }
}

/***********
* strength(4つの強み)
 ***********/
.strength {
    padding: 20rem 0;
    .headline_box {
        color: var(--ocean);
    }
}
.strength_list {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6rem;
    li {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        align-items: center;
        color: var(--ocean);
    }
}
.strength_list_headline_box {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
        height: 15.5rem;
        width: auto;
    }
}
.strength_list_headline {
    position: absolute;
    width: max-content;
    color: var(--white);
    background-color: var(--ocean);
    padding: 0.4rem 1rem;
    border-radius: 4px;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1.9rem;
}

@media (max-width: 1000px) {
    .strength {
        padding: 6rem 0;
    }
    .strength_list {
        grid-template-columns: auto;
        grid-template-rows: repeat(4, auto);
    }
    .strength_list_headline_box {
        img {
            height: 12.5438rem;
            width: 13.2rem;
        }
    }
}

/***********
* thought(代表の想い)
 ***********/
.thought {
    .wrapper {
        padding: 20rem 20px 22rem;
        position: relative;
    }
    .headline_box {
        color: var(--white);
        margin-bottom: 4rem;
    }
}

.thought_box {
    position: relative;
    margin-bottom: 10rem;
    img {
        position: absolute;
        width: 41.9rem;
        height: 28.2rem;
        right: 0;
        bottom: -5rem;
        border-radius: 10px;
        object-fit: cover;
    }
}

.thought_box.right {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 5rem;
    img {
        width: 41.3rem;
        height: 24.8rem;
        left: 0;
        top: -7.5rem;
    }
}
.thought_box_list > div:nth-child(3) {
    margin-bottom: 5rem;
}

.thought_box_innner {
    color: var(--white);
    background: rgba(0, 0, 0, 0.2);
    padding: 5rem;
    border-radius: 10px;
    width: 64%;
    height: auto;
}

.img_right {
    padding-right: 9rem;
}

.img_left {
    padding-left: 9rem;
}

.certification {
    color: var(--white);
    padding: 4rem;
    border: 1px solid var(--white);
    border-radius: 10px;

    ul {
        list-style: disc;
        padding-left: 1.4rem;
    }
}

.izuhara {
    width: 56.9rem;
    height: 87.8rem;
    position: absolute;
    bottom: 0;
    right: 0;
}

@media (max-width: 1000px) {
    .thought {
        .wrapper {
            padding: 6rem 0;
        }
    }
    .thought_box_list {
        width: 100%;
        padding: 0 2rem;
        .thought_box:nth-child(3) {
            .thought_box_innner {
                padding: 5rem 2rem;
            }
        }
    }
    .thought_box_innner {
        padding: 3rem 2rem 5rem 2rem;
        width: auto;
        position: static;
        &.img_left {
            padding: 5rem 2rem;
        }
    }

    .thought_box:first-child {
        margin-bottom: 0;
        /* padding-bottom: calc((100vw - 9.7rem) * 0.77 - 4rem); */
        padding-bottom: 13rem;
        img {
            width: calc(100vw - 9.7rem);
            height: 17.2rem;
            /* height: calc((100vw - 9.7rem) * 0.77); */
            left: -2rem;
            bottom: -2rem;
            object-fit: cover;
            z-index: 2;
            object-fit: cover;
            border-radius: 0 10px 10px 0;
        }
    }

    .thought_box.right {
        /* padding-bottom: calc((100vw - 12.6rem) * 0.659 - 3rem); */
        padding-bottom: 13rem;
        margin-bottom: 3rem;
        img {
            width: calc(100vw - 12.6rem);
            height: 12.8rem;
            /* height: calc((100vw - 12.6rem) * 0.659); */
            bottom: 2.85rem;
            right: -2rem;
            top: auto;
            left: auto;
            z-index: 2;
            object-fit: cover;
            border-radius: 10px 0 0 10px;
        }
    }
}
/***********
* contact(お問い合わせ)
 ***********/
.contact {
    padding: 20rem 0;
    .headline_box {
        color: var(--ocean);
        margin-bottom: 3rem;
    }

    label span {
        color: var(--ocean);
    }
    span.required {
        display: flex;
        gap: 0.9rem;
        &::after {
            content: "必須";
            display: block;
            background-color: var(--lite_aqua);
            border-radius: 4px;
            padding: 0.4rem 1rem;
            width: fit-content;
        }
    }
    input {
        border: 1px solid var(--ocean);
        border-radius: 10px;
        width: 100%;
        height: 4rem;
        margin-top: 0.9rem;
        padding: 0 1rem;
        color: var(--text);
    }

    .textarea {
        display: flex;
        flex-direction: column;
        textarea {
            border: 1px solid var(--ocean);
            border-radius: 10px;
            width: 100%;
            height: 14.3rem;
            padding: 1rem;
            color: var(--text);
        }
    }

    .wpcf7-form > p {
        margin-bottom: 4rem;
    }

    .submit_btn {
        display: grid;
        place-content: center;
        .wpcf7-submit {
            border: none;
            background-color: var(--ocean);
            border-radius: 999px;
            width: 50rem;
            padding: 1.6rem 2rem;
            height: auto;
            color: var(--white);
            text-align: center;
        }
    }
}

@media (max-width: 1000px) {
    .contact {
        padding: 6rem 0;
        .submit_btn {
            display: block;
            width: 100%;
            .wpcf7-submit {
                width: 100%;
            }
        }
    }
}
/***********
* company(基本情報)
 ***********/
.company {
    padding: 20rem 0 10rem;
    color: var(--white);
    position: relative;
    &::after {
        content: "";
        background-color: var(--ocean);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -2;
    }
    .headline_box {
        color: var(--white);
        margin-bottom: 3rem;
    }
}

.company_table {
    width: 100%;
    tbody {
        display: flex;
        flex-direction: column;
    }
    tr {
        display: flex;
    }
    th {
        border-bottom: 1px solid var(--aqua);
        padding-bottom: 0.8rem;
        padding-top: 3rem;
        width: 9rem;
    }
    td {
        border-bottom: 1px solid var(--white);
        padding-bottom: 0.8rem;
        padding-top: 3rem;
        width: 100%;
    }
}

.company_origin {
    margin-top: 3rem;
}

@media (max-width: 1000px) {
    .company {
        padding: 6rem 0;
    }
}

/* ******** 
画面幅が1440以上のとき、すべての角を丸く
/* ******** */
@media (width > 1440px) {
    .all_round {
        border-radius: 10px;
    }
}

/* ******** 
アニメーションの初期状態
/* ******** */
.left_anime,
.right_anime,
.fuwatto_anime,
.list_anime_key > li {
    opacity: 0;
}