.has-hexagonWrap {
  padding-block: 10rem;
  &::after {
    top: unset;
    bottom: -11rem;
    background-image: url(../../img/common/bg_page_hexagon_contact_02.png);
    width: 43rem;
    height: 56rem;
    z-index: 0;
  }
  @media screen and (max-width: 767px) {
    padding-top: 10rem;
    &::after {
        content: unset;
    }
  }
}

.page__sectionTitle {
    margin-top: 10rem;
}

.contactSteps {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 3rem;
    max-width: 892px;
    margin-inline: auto;
    margin-top: 8.5rem;
    .contactSteps__item {
        clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
        background: linear-gradient(to right, #33A2FF, #84C7FF);
        position: relative;
        color: var(--colorWhite);
        font-size: 2.4rem;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 8rem;
        &.is-current {
            background: var(--colorMainBlue);
        }
        &::before {
            position: absolute;
            left: 0;
            top: 0;
            clip-path: polygon(100% 0, 0 0, 0 100%);
            content: "";
            width: 5rem;
            height: 100%;
            background: var(--colorMainBlue);
            z-index: -1;
        }
    }
     @media screen and (max-width: 767px)  {
        gap: 2rem;
        grid-template-columns: 1fr;
        margin-top: 10rem;
        max-width: 24rem;
        .contactSteps__item {
            font-size: 1.8rem;
            height: 6rem;
        } 
        
     }
}


/* -------------------------------------------
    お問い合わせ
----------------------------------------------*/
.contactArea {
    background: var(--colorWhite);
    padding: 9rem 9.5rem;
    margin-top: 6.5rem;
    display: grid;
    gap: 5rem;
    .contactItem {
        .contactItem__title {
            font-size: 2.4rem;
            position: relative;
            padding-left: 4rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                background-image: url(../../img/common/icon_square.svg);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                width: 2.4rem;
                height: 2.4rem;
            }
        }
        .contactItem__input {
            input,textarea  {
                background: var(--colorWhite);
                border: 0.1rem solid var(--colorGray);
                padding: 1rem;
                border-radius: 0.5rem;
                width: 100%;
                font-size: 2.4rem;
            }
            input {
                height: 50px;
            }
            textarea {
                min-height: 22rem;
            }
            [data-name="contact_tel"] input {
                width: 40%;
            }
            
        }

    }
    .contactSend {
        color: var(--colorBlack);
        border: 0.1rem solid var(--colorBlack);
        font-size: 2rem;
        width: 26.7rem;
        height: 7rem;
        margin-left: auto;
        font-family: var(--fontNotoSans);
        margin-top: 3rem;
        .wpcf7-spinner {
            display: none;
        }
        input {
            width: 100%;
            height: 100%;
            padding-left: 6rem;
        }
        &::after {
            content: "";
            background: url(../../img/common/arrow_right_blue.svg) no-repeat center center / contain;
        }
        &:hover {
            opacity: 1;
        }
        &:hover input {
            animation: rotation 2s linear infinite;
        }
        &:hover::after {
            animation: ctaRotation 2s linear infinite;
        }
    }
    
    @media screen and (max-width: 767px) {
        padding: 6rem 3rem;
        margin-top: 4rem;
        .contactSend {
            margin-inline: auto;
        }
    }
}


/* -------------------------------------------
    お問い合わせ（確認）
----------------------------------------------*/
#contact-confirm {
    .contactArea {
        gap: 3.5rem;
        .contactItem {
            border-bottom: 0.1rem solid var(--colorGray);
            padding-bottom: 3rem;
            .contactItem__input {
                font-size: 2rem;
            }
        }
        .contactSend {
            width: 207px;
        }
    }


    
}

/* -------------------------------------------
    お問い合わせ（完了）
----------------------------------------------*/
#contact-complete {
    &.has-hexagonWrap {
        padding-block: 1rem 15rem;
    }
    .contactComplete {
        background: var(--colorWhite);
        padding: 9rem 10rem 10rem;
        text-align: center;
        margin-top: 10rem;
        .contactComplete__title {
            font-size: 3.2rem;
            font-weight: 700;
            letter-spacing: 0.08em;
        }
        .contactComplete__text {
            font-size: 2rem;
            margin-top: 1.5rem;
            font-weight: 400;
            line-height: 2;
            letter-spacing: 0.07em;
        }
        .cta {
            color: var(--colorBlack);
            border: 0.1rem solid var(--colorBlack);
            font-size: 2rem;
            width: 22.7rem;
            height: 7rem;
            margin-left: auto;
            margin-top: 8.5rem;
            font-family: var(--fontNotoSans);
            &::after {
            content: "";
            background: url(../../img/common/arrow_right_blue.svg) no-repeat center center / contain;
            }
            &:hover {
                opacity: 1;
            }
            &:hover span {
                animation: rotation 2s linear infinite;
            }
            &:hover::after {
                animation: ctaRotation 2s linear infinite;
            }
        }
        
    }
    @media screen and (max-width: 767px) {
        .contactComplete {
            padding: 6rem 3rem;
            .contactComplete__title {
                font-size: 2.4rem;
            }
            .contactComplete__text {
                text-align: start;
                margin-top: 2rem;
            }
            .cta {
                margin: 4rem auto 0;
            }
        }
    }
}