.top {
    background-color: #f5f5f5;
}

.headerNav__login {
    position: relative;
}

.headerNav__login::before {
    background-color: var(--colorSkyBlue);
    content: "";
    height: 32px;
    left: -10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
}

.mainvisual {
    background: url(../images/top/img__mv-pc.jpg) no-repeat center center / cover;
    height: 678px;
}

@media screen and (max-width: 767px) {
    .mainvisual {
        background: url(../images/top/img__mv-sp.jpg) no-repeat center center / cover;
    }
}

.mainvisual__inner {
    height: inherit;
    position: relative;
}

.mainvisualCatch {
    color: var(--colorWhite);
    left: 20px;
    position: absolute;
    top: 121px;
    /* transform: translate(0%, -50%); */
}

.mainvisualCatch__title {
    font-size: var(--fontMax52Min28);
}

.mainvisualCatch__title span {
    color: var(--colorSkyBlue);
    font-size: var(--fontMax72Min38);
}

.mainvisualCatch__text {
    font-size: var(--fontMax18Min16);
    margin-top: 20px;
}

.mainvisualCatch__concept {
    align-items: center;
    display: flex;
    margin-top: 30px;
}

.conceptItem {
    align-items: center;
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex;
    font-size: 18px;
    height: 102px;
    justify-content: center;
    position: relative;
    width: 102px;
}

.conceptItem:nth-of-type(1) {
    font-size: 24px;
}

.conceptItem:nth-of-type(2)::before,
.conceptItem:nth-of-type(3)::before {
    background-color: #fff;
    content: "";
    height: 2.42px;
    left: -11px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 22.56px;
    z-index: 2;
}

.conceptItem:nth-of-type(2)::after,
.conceptItem:nth-of-type(3)::after {
    background-color: #fff;
    content: "";
    height: 2.42px;
    left: -11px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    width: 22.56px;
    z-index: 2;
}

/* フォーム=============== */
.mainvisual__register {
    background-color: #fff;
    padding: 30PX 20PX;
    position: absolute;
    right: 3.472%;
    top: 50px;
}

.mainvisualForm {
    margin: 0 auto;
    max-width: 236px;
}

.mainvisualForm label {
    font-size: 12px;
    font-weight: 700;
}

.mainvisualForm input {
    background-color: var(--color-bgGray);
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    font-size: 12px;
    padding: 12px 10px;
}

.mainvisualForm__agree {
    align-items: center;
    display: flex;
    font-size: 12px;
    gap: 4px;
    margin-top: 15px;
}

.mainvisualForm__agree span {
    color: var(--colorSkyBlue);
}

.mainvisual__button {
    display: flex;
    justify-content: flex-start;
    max-width: 280px;
    padding: 8px 10px;
}

.mainvisual__button span {
    display: block;
    flex: 1;
    text-align: center;
}

.mainvisual__button:nth-of-type(1) {
    margin-top: 15px;
}

.mainvisual__button:nth-of-type(2) {
    margin-top: 20px;
}

.mainvisual__or {
    font-size: 12px;
    margin: 20px auto 0;
    position: relative;
    width: fit-content;
}

.mainvisual__or::before,
.mainvisual__or::after {
    background-color: var(--colorBlack);
    content: "";
    height: 1px;
    width: 102px;
}

.mainvisual__or::before {
    left: -10px;
    position: absolute;
    top: 50%;
    transform: translate(-100%, -50%);
}

.mainvisual__or::after {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translate(100%, -50%);
}

/* CTA課題解決============ */
.mainvisual__cta {
    align-items: center;
    background-color: #fff;
    /* transform: translate(-50%, 90%); */
    box-shadow: 0 4px 10px rgba(0 0 0 / 0.25);
    display: flex;
    gap: 9.333%;
    justify-content: center;
    margin-top: -100px;
    max-width: 100%;
    padding: 30px;
    text-align: center;
    /* position: absolute;
    left: 50%;
    bottom: 0; */
    width: 900px;
}

.maincisualCta__logo {
    height: 140px;
}

.maincisualCta__title {
    font-size: var(--fontMax24Min18);
    font-weight: 700;
}

.maincisualCta__lists {
    margin-top: 16px;
}

.maincisualCta__list {
    align-items: center;
    display: flex;
    gap: 6px;
}

.maincisualCta__list+.maincisualCta__list {
    margin-top: 12px;
}

.maincisualCta__list::before {
    background: url(../images/common/icon__check.svg) no-repeat center center / contain;
    content: "";
    display: inline-block;
    height: 22px;
    width: 22px;
}

@media screen and (max-width: 767px) {
    .mainvisual {
        height: 100%;
        padding: 50px 0;
    }

    .mainvisual__register {
        display: none;
    }

    .mainvisual__cta {
        margin-top: 0;
        width: 100%;
    }

    .mainvisualCatch {
        left: auto;
        position: relative;
        top: auto;
    }

    .conceptItem {
        font-size: 13px;
        height: 68px;
        width: 68px;
    }

    .conceptItem:nth-of-type(1) {
        font-size: 16px;
    }

    .maincisualCta__logo {
        display: none;
    }

    .maincisualCta__list+.maincisualCta__list {
        margin-top: 5px;
    }
}

/* ====================== */
/* ３つの理由 */
/* ====================== */
.reason {
    /* padding-top: 204px; */
    background-color: var(--color-bgGray);
}

.reasonBox__wrapper {
    position: relative;
}

.reasonBox__wrapper+.reasonBox__wrapper {
    margin-top: 72px;
}

.reasonBox__bg {
    background-color: #fff;
    /* width: 100%; */
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 69.444%;
}

.reasonBox__bg.reverse {
    left: 0;
    right: auto;
}

.reasonBox {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    max-width: 1080px;
    padding: 36px 0;
    position: relative;
    z-index: 2;
}

.reasonBox.reverse {
    flex-direction: row-reverse;
}

.reasonBox__img {
    display: block;
    max-width: 457px;
    position: relative;
    z-index: 2;
}

.reasonBox__content {
    padding: 0 8.9%;
    position: relative;
    z-index: 2;
}

.reasonBox__title {
    color: var(--colorSkyBlue);
    font-size: 18px;
    z-index: 2;
}

.reasonBox__subtitle {
    border-bottom: 3px solid var(--colorSkyBlue);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    padding-bottom: 20px;
}

.reasonBox__text {
    margin-top: 20px;
}

@media screen and (max-width: 1000px) {
    .reasonBox__bg {
        display: none;
    }

    .reasonBox {
        background-color: inherit;
        display: block;
        margin: 0 auto;
        max-width: 560px;
        padding: 0 20px;
        width: 100%;
    }

    .reasonBox__wrapper+.reasonBox__wrapper {
        margin-top: 50px;
    }

    .reasonBox__img {
        max-width: 100%;
        position: relative;
        top: auto;
        transform: none;
        width: 100%;
    }

    .reasonBox__content {
        margin-top: 20px;
        padding: 0;
        position: static;
    }
}

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

/* ====================== */
/* 導入事例 */
/* ====================== */
.pickup {
    background-color: black;
    color: #fff;
}

.pickup__contents {
    color: var(--colorBlack);
    margin: 0 auto;
    max-width: 966px;
    overflow: hidden;
}

.pickupCard__wrapper {
    animation: scroll-left 10s linear infinite;
    display: flex;
    gap: var(--scroll-gap);
    width: max-content;
}

.pickupCard__wrapper:hover {
    animation-play-state: paused;
}

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - var(--scroll-gap) / 2));
    }
}

.pickupCard {
    background-color: #fff;
    border-radius: 15px;
    color: var(--colorBlack);
    height: 100%;
    max-width: 300px;
    overflow: hidden;
}


.pickupCard__texts {
    background-color: #fff;
    padding: 30px;
}

.pickupCard__title {
    font-size: var(--16px);
    font-weight: 400;
    text-align: center;
}

.pickupCard__text {
    font-size: var(--14px);
    height: auto;
    margin-top: 20px;
}

/* ====================== */
/* CTA 問い合わせ*/
/* ====================== */
.cta {
    background: linear-gradient(180deg, rgba(89, 156, 194, 1) 0%, rgba(139, 191, 221, 1) 100%);
    padding: 100px 0;
    position: relative;
}

.cta__bg-logo {
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
}

.cta__column {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    justify-content: center;
}

.ctaCard {
    display: grid;
    grid-row: span 2;
    gap: 35px;
    grid-template-rows: subgrid;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 4px rgba(0 0 0 / 0.25);
    flex: 1 1 48.75%;
    font-weight: 700;
    padding: 50px;
    position: relative;
    text-align: center;
    z-index: 2;
    height: auto;
}
.ctaCard__head {
    display: flex;
    align-items: center;
}
.ctaCard__present {
    width: 50px;
    height: 50px;
    display: inline-block;
}
.ctaCard__text {
    font-size: var(--fontMax18Min14);
    line-height: 1.5;
}
.ctaCard__button {
    padding: 0.57em 0.71em;
}
@media screen and (max-width: 767px) {
    .ctaCard {
        padding: 20px;
        gap: 15px;
    }
    .ctaCard__present {
        width: 40px;
        height: 40px;
        display: inline-block;
    }
}
/* ====================== */
/* 7つの機能 */
/* ====================== */
.function {
}
.function__container {

}
.function__column {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    justify-content: center;
}
.functionCard {
    background-color: #fff;
    padding: 30px;
}
.functionCard__head {
    display: flex;
    gap: 10px;
    align-items: center;
}
.functionCard__title {
    font-size: var(--fontMax24Min18);
    font-weight: 700;
}
.functionCard__text {
    margin-top: 12px;
    font-size: var(--14px);
    line-height: 1.5;
}
/* ====================== */
/* 料金システム */
/* ====================== */

.price {
    background-color: #fdfdfd;
    width: 100%;
    /* overflow: hidden; */
}

.price__container {
    margin: 0 auto;
    max-width: 1096px;
}

.price__table {
    overflow-x: scroll;
    /* overflow-y: auto; */
    width: 100%;
}
::-webkit-scrollbar {
    /* width: 10px; */
    height: 12px;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(58, 58, 58, 0.25);
    border-radius: 200px;
    /* border-right: 2px solid transparent; */
    border: 3px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-track {
    background-color: #f8f8f8;
}


.price__bottom {
    margin-top: 70px;
}

.price__title {
    border-bottom: #599cc2;
    font-size: var(--fontMax18Min16);
    font-weight: 700;
}

.price__text span {
    color: var(--colorSkyBlue);
}

/* Grid構造=================== */
.grid-container {
    column-gap: 2.18%;
    /* min-width: 1096px; */
    display: grid;
    grid-template-columns: minmax(220px, 34.31%) repeat(3, minmax(220px, 21.17%));
    justify-content: space-between;
    position: relative;
    /* box-sizing: content-box; */
    margin-bottom: 16px;
}

@media screen and (max-width: 767px) {
    .grid-container {
        grid-template-columns: minmax(150px, 34.31%) repeat(3, minmax(220px, 21.17%));
        /* grid-template-columns: 17.86% 26.2% 26.2% 26.2%; */
    }
}

.gridItem {
    align-items: center;
    display: flex;
    font-size: var(--fontMax16Min14);
    justify-content: center;
}

.gridItem-1 {
    grid-column: 1;
    grid-row: 1;
}

.gridItem-2 {
    grid-column: 2;
    grid-row: 1;
}

.gridItem-3 {
    grid-column: 3;
    grid-row: 1;
}

.gridItem-4 {
    grid-column: 4;
    grid-row: 1;
}

.gridItem-5 {
    grid-column: 1;
    grid-row: 2;
}

.gridItem-6 {
    grid-column: 2;
    grid-row: 2;
}

.gridItem-7 {
    grid-column: 3;
    grid-row: 2;
}

.gridItem-8 {
    grid-column: 4;
    grid-row: 2;
}

.gridItem-9 {
    grid-column: 1;
    grid-row: 3;
}

.gridItem-10 {
    grid-column: 2;
    grid-row: 3;
}

.gridItem-11 {
    grid-column: 3;
    grid-row: 3;
}

.gridItem-12 {
    grid-column: 4;
    grid-row: 3;
}

.gridItem-13 {
    grid-column: 1;
    grid-row: 4;
}

.gridItem-14 {
    grid-column: 2;
    grid-row: 4;
}

.gridItem-15 {
    grid-column: 3;
    grid-row: 4;
}

.gridItem-16 {
    grid-column: 4;
    grid-row: 4;
}

.gridItem-17 {
    grid-column: 1;
    grid-row: 5;
}

.gridItem-18 {
    grid-column: 2;
    grid-row: 5;
}

.gridItem-19 {
    grid-column: 3;
    grid-row: 5;
}

.gridItem-20 {
    grid-column: 4;
    grid-row: 5;
}

.gridItem-21 {
    grid-column: 1;
    grid-row: 6;
}

.gridItem-22 {
    grid-column: 2;
    grid-row: 6;
}

.gridItem-23 {
    grid-column: 3;
    grid-row: 6;
}

.gridItem-24 {
    grid-column: 4;
    grid-row: 6;
}

.gridItem-25 {
    grid-column: 1;
    grid-row: 7;
}

.gridItem-26 {
    grid-column: 2;
    grid-row: 7;
}

.gridItem-27 {
    grid-column: 3;
    grid-row: 7;
}

.gridItem-28 {
    grid-column: 4;
    grid-row: 7;
}

.gridItem-29 {
    grid-column: 1;
    grid-row: 8;
}

.gridItem-30 {
    grid-column: 2;
    grid-row: 8;
}

.gridItem-31 {
    grid-column: 3;
    grid-row: 8;
}

.gridItem-32 {
    grid-column: 4;
    grid-row: 8;
}

.grid-line {
    border: 6px solid var(--colorSkyBlue);
    grid-column: 2;
    grid-row: 1 / span 8;
    /* 始まりのライン / span 何個分までの範囲かを指定 */
}

.grid-line-personal {
    border: 6px solid #a1a1a1;
    grid-column: 3;
    grid-row: 1 / span 8;
}

.grid-line-business {
    border: 6px solid #dcdcdc;
    grid-column: 4;
    grid-row: 1 / span 8;
}

/* Grid背景色=================== */
.gridItem:nth-of-type(n+5):nth-of-type(-n+8) {
    background-color: var(--color-bgGray);
}

.gridItem:nth-of-type(n+13):nth-of-type(-n+16) {
    background-color: var(--color-bgGray);
}

.gridItem:nth-of-type(n+21):nth-of-type(-n+24) {
    background-color: var(--color-bgGray);
}

.gridItem:nth-of-type(n+29):nth-of-type(-n+32) {
    background-color: var(--color-bgGray);
}

/* Gridカスタム=================== */
.gridItem__details {
    padding: 30px 0;
    /* height: 372px; */
}

.gridItem__detail {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    text-align: center;
    width: 100%;
}

.gridItem__title {
    font-size: 18px;
    font-weight: 700;
    margin-top: 6px;
}

.gridItem__subtitle {
    display: block;
    font-size: var(--fontMax18Min16);
}

.gridItem__text {
    height: auto;
    margin: 16px 0;
    padding: 0 20px;
}

.gridItem__price {
    align-items: baseline;
    display: flex;
    font-size: 18px;
    gap: 4.86px;
}

.gridItem__price-number {
    font-size: 48px;
    font-weight: 700;
}

.gridItem__button-Wrapper {
    margin: 16px 20px 0 20px;
    width: 100%;
}

.gridItem__button {
    line-height: 1;
    padding: 16px 10px;
    width: 180px;
}

.gridItem__button--white {
    background-color: var(--colorWhite);
    color: var(--colorSkyBlue);
}

.gridItem__heading {
    padding: 10px;
}

.gridItem.check::before {
    background: url(../images/top/icon__check--blue.svg) no-repeat center center / contain;
    content: "";
    display: inline-block;
    height: 32px;
    width: 32px;
}

.pb-6 {
    padding-bottom: 6px;
}

/* ====================== */
/* よくある質問 */
/* ====================== */
.faq {
    background-color: var(--color-bgGray);
}

details {
    background-color: #fff;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 4px rgba(0 0 0 / 0.25);
    margin-bottom: var(--24px);
    overflow: hidden;
    position: relative;
}

/* iOS 15未満の<summary>要素でdisplay: flexが機能しないバグ対策 */
summary {
    cursor: pointer;
    font-weight: bold;
    /* papddingはクリック領域のsummaryにつける。 */
    padding: var(--30px) var(--50px);
}

.summaryContent {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.faq__en {
    color: var(--colorSkyBlue);
    font-size: var(--24px);
    font-weight: 700;
}

.summaryContent__titles {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 5px;
}

.summaryContent__icon {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 24px;
}

.summaryContent__icon::before {
    background-color: var(--colorSkyBlue);
    content: "";
    height: 2.6px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
}

.summaryContent__icon::after {
    background-color: var(--colorSkyBlue);
    content: "";
    height: 24px;
    left: 10px;
    opacity: 1;
    position: absolute;
    top: 0;
    transition: transform 0.3s, opacity 0.3s;
    width: 2.6px;
}

.summaryContent__icon.is-click::after {
    opacity: 0;
    top: 0;
    transform: rotate(90deg);
}

.anser__texts {
    align-items: center;
    display: flex;
    gap: 5px;
    padding: var(--30px) var(--50px);
}

details[open] .anser__texts {
    /* details直下のタグにpaddingを設定すると挙動がおかしくなる */
    padding-top: 12px;
}

details[open] summary {
    padding-bottom: 12px;
}

details[open] .anser__line {
    border-top: 1px solid var(--colorSkyBlue);
    display: block;
    padding-bottom: 12px;
}

@media screen and (max-width: 767px) {
    .faq__en {
        font-size: var(--16px);
    }

    summary {
        padding: var(--20px);
    }

    details[open] summary {
        padding-bottom: 12px;
    }

    details[open] .anser__texts {
        padding: 0 var(--20px) var(--20px) var(--20px);
    }
}

/* =============== */
/* わたしたちの想い */
/* =============== */
.vision {

}
.vision__column {

}
.visionList + .visionList {
    margin-top: 120px;
}
.visionList {
    display: flex;
    align-items: center;
    gap: 4.9%;
    flex-direction: row-reverse;
}
.visionList.reverse {
    flex-direction:row;
}
.visionList__content {
    flex: 1;
}
.visionList__content p {
    margin-top: 20px;
}
.visionList__content p:first-of-type {
    margin-top: 30px;
}
.visionList__title {
    color: var(--colorSkyBlue);
    font-size: var(--fontMax32Min24);
    line-height: 1.5;
}
.visionList p {
    font-size: var(--16px);
    font-weight: 400;
    color: var(--colorBlack);
}
.visionList__img-wrapper {
    max-width: 400px;
    flex: 0 1 39.22%;
    margin: 0 auto;

}
.visionList__img {
    
}
@media screen and (max-width: 767px) {
    .visionList + .visionList {
        margin-top: 50px;
    }
    .visionList {
        display: block;
    }
    .visionList__img-wrapper {
        margin-bottom: 30px;
    }
    .visionList__content p {
        margin-top: 15px;
    }
}
/* =============== */
/* 会社情報 */
/* =============== */
.company {
    background: url(../images/top/img__mv-pc.jpg) no-repeat center center / cover;
    color: var(--colorWhite);
}



.companyList {
    align-items: center;
    border-bottom: 1px solid var(--colorWhite);
    display: flex;
    padding: 8px 0;
}

.companyList dt {
    font-size: var(--18px);
    font-weight: 700;
    padding: 10px;
    text-align: center;
    /* display: block; */
    width: 200px;
}

.companyList dd {
    display: block;
    flex: 1;
    font-size: var(--16px);
    padding: 10px;
}

.dd-text+.dd-text {
    margin-top: 20px;
    /* padding: 10px; */
}

@media screen and (max-width: 767px) {
    .companyList {
        display: block;
    }

    .companyList dt {
        display: block;
        line-height: 1.8;
        text-align: left;
        width: 100%;
    }

    .companyList dd {
        line-height: 1.8;
    }
}