/* CSS Document */





.p-contact {
    padding-bottom: 6.25rem; 
}
@media screen and ( max-width: 768px ){
    .p-contact {
        padding-bottom: 3rem; 
    }
}



.p-contact__inner {
}
@media screen and ( max-width: 768px ){
}




.p-contact__intro {
}
@media screen and ( max-width: 768px ){
}



.p-contact-step {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 3.75rem; /* 60px */
    margin: 0 0 3.75rem; /* 60px */
    padding: 0;
}
.p-contact-step__item {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc( 22.5rem - 0.125rem ); /* 360px */
    height: 100%;
    margin: 0;
    padding: 0;
    color: #A0A0A0;
    background-color: #E6E6E6;
}
.p-contact-step__item.is_current {
    color: #fff;
    background-color: #E6002E;
}
.p-contact-step__item.item_01 {
    top: 0;
    left: 0;
    clip-path: polygon( 0 0, 20rem 0, 100% 50%, 20rem 100%, 0 100% );
}
.p-contact-step__item.item_02 {
    top: 0;
    left: calc( 20rem + 0.125rem ); /* 320px */
    clip-path: polygon( 0 0, 20rem 0, 100% 50%, 20rem 100%, 0 100%, 2.5rem 50% );
}
.p-contact-step__item.item_03 {
    top: 0;
    left: calc( 40rem + 0.25rem ); /* 640px */
    clip-path: polygon( 0 0, 20rem 0, 100% 50%, 20rem 100%, 0 100%, 2.5rem 50% );
}
@media screen and ( max-width: 768px ){
    .p-contact-step {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        width: 100%;
        height: 15.25rem;/* 250px */
        margin: 0 0 3.75rem; /* 60px */
        padding: 0;
    }
    .p-contact-step__item {
        width: 100%;
        height: 5rem;
        margin: 0;
        padding: 0;
    }
    .p-contact-step__item.is_current {
    }
    .p-contact-step__item.item_01 {
        top: 0;
        left: 0;
        clip-path: polygon( 0 0, 100% 0, 100% 3.625rem, 50% 100%, 0 3.625rem );
    }
    .p-contact-step__item.item_02 {
        top: calc( 3.625rem + 0.25rem );
        left: 0;
        height: 6.375rem;
        clip-path: polygon( 0 0, 50% 1.375rem, 100% 0, 100% 5rem, 50% 100%, 0 5rem );
    }
    .p-contact-step__item.item_03 {
        top: calc( 8.625rem + 0.5rem );
        left: 0;
        height: 6.375rem;
        clip-path: polygon( 0 0, 50% 1.375rem, 100% 0, 100% 5rem, 50% 100%, 0 5rem );    }
}



.p-contact__content {
    margin-top: 5rem;
}
@media screen and ( max-width: 768px ){
    .p-contact__content {
        margin-top: 0;
    }
}



.p-contact-text {
    font-weight: 500;
    font-size: 1rem;
    line-height: 2;
    color: var(--gray-text);
}
.p-contact-text--privacy {
    font-size: 0.6875rem; /* 11px */
    line-height: 1.5;
}
.p-contact-text--center {
    text-align: center;
}
@media screen and ( max-width: 768px ){
}



.p-contact-error_text {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 2em 0 0;
}
.p-contact-error_text.p-contact-text {
    color: #FA0046;
}



.p-contact-form-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    min-height: 5.625rem; /* 90px */
    margin: 0;
    padding: 0;
}
.p-contact-form-item--privacy {
    flex-direction: column;
    min-height: auto;
    margin-top: 2.5rem; /* 40px */
}
.p-contact-form-item--btn {
    justify-content: center;
    gap: 0 1rem;
}
@media screen and ( max-width: 768px ){
    .p-contact-form-item {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        min-height: 5.625rem; /* 90px */
        margin: 0;
        padding: 0;
    }
    .p-contact-form-item--privacy {
        flex-direction: column;
        min-height: auto;
        margin-top: 2rem; /* 40px */
    }
    .p-contact-form-item--btn {
        flex-direction: column;
        justify-content: center;
        gap: 1rem 0;
    }
}



.p-contact-form-item-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 12.5rem; /* 200px */
    margin: 0;
    padding: 0 1.25rem;
    padding: 0 1rem;
    border-bottom: 1px solid #4D4D4D;
}
@media screen and ( max-width: 768px ){
    .p-contact-form-item-title {
        justify-content: flex-start;
        gap: 0 1rem;
        width: 100%;
        padding-top: 1rem;
        border-bottom: none;
    }
}



.p-contact-form-item-title__text {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: calc( 100% - 2.125rem );
    margin: 0;
    padding: 0;
    color: #111;
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: 2;
    letter-spacing: 0;
}
@media screen and ( max-width: 768px ){
    .p-contact-form-item-title__text {
        width: auto;
    }
}



.p-contact-form-item-title__must {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.125rem; /* 34px */
    height: 1.3125rem; /* 21px */
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0;
    border-radius: 0.3125rem; /* 5px */
    background-color: #FA0046;
}
@media screen and ( max-width: 768px ){
    .p-contact-form-item-title__must {
    }
}



.p-contact-form-item-content {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 48.125rem; /* 770px */
    margin: 0;
    padding: 0 1.25rem;
    padding: 0 1rem;
    padding-top: 1.3125rem;
    padding-bottom: 1.3125rem;
    border-bottom: 1px solid #D3D3D3;
}
.p-contact-form-item-content--tel {
}
.p-contact-form-item-content--radio {
    flex-wrap: wrap;
    gap: 0 1.875rem;
}
.p-contact-form-item-content--privacy {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.625rem 0; /* 10px */
    width: 100%;
    border-bottom: none;
}
.p-contact-form-item-content--confirm {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
@media screen and ( max-width: 768px ){
    .p-contact-form-item-content {
        width: 100%;
    }
    .p-contact-form-item-content--tel {
    }
    .p-contact-form-item-content--radio {
        flex-wrap: wrap;
        gap: 0 1.875rem;
    }
    .p-contact-form-item-content--privacy {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0.625rem 0; /* 10px */
        width: 100%;
        border-bottom: none;
    }
    .p-contact-form-item-content--confirm {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
}



.p-contact-form-item-content__inner {
}
.p-contact-form-item-content--radio .p-contact-form-item-content__inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 0 1.875rem;
    margin: 0;
    padding: 0;
}
.p-contact-form-item-content--radio_site .p-contact-form-item-content__inner {
    width: 28.1875rem; /* 435px -> 41px に変更 */
}
@media screen and ( max-width: 768px ){
    .p-contact-form-item-content--radio_purpose .p-contact-form-item-content__inner {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
}



.p-contact-form-item-content__separator {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem; /* 32px */
    margin: 0;
    padding: 0;
    color: #111;
    font-size: 1rem; /* 16px */
    line-height: 1;
    letter-spacing: 0;
}
@media screen and ( max-width: 768px ){
}



.p-contact-form-item-content input[type=text], 
.p-contact-form-item-content input[type=email], 
.p-contact-form-item-content input[type=tel] {
    position: relative;
    width: 28.1875rem; /* 435px -> 41px に変更 */
    height: 3rem; /* 48px */
    margin: 0;
    padding: 0 1em;
    color: #111;
    font-size: 1rem; /* 16px */
    line-height: 1;
    letter-spacing: 0.05em;
    border: 1px solid #D3D3D3;
    border-radius: 0.3125rem; /* 5px */
}
.p-contact-form-item-content--tel input[type=tel] {
    width: 8.0625rem; /* 128px -> 129px に変更 */
}
@media screen and ( max-width: 768px ){
}



.p-contact-form-item-content--radio input[type=radio] {
      -webkit-appearance: none;
      width: 1.125rem; /* 18px */
      height: 1.125rem; /* 18px */
      border: 1px solid #D3D3D3;
      border-radius: 50%;
      position: relative;

      &:before {
        content: "";
        display: block;
        position: absolute;
        width: 60%;
        height: 60%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
      }

      &:checked:before {
        background: #FA0046;
      }
}
.p-contact-form-item-content--radio label {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0 0.5rem;
    height: 2rem;
}
.p-contact-form-item-content--radio_site label {
    min-width: 7.8125rem;
}
@media screen and ( max-width: 768px ){
}



.p-contact-form-item-content--privacy input[type=checkbox] {
    appearance: none;
    height: 1.5rem; /* 24px */
    width: 1.5rem; /* 24px */
    margin: 0.25rem; /* 4px */
    border: 1px solid #8b98a5;
    border-radius: 0.25rem; /* 4px */
    opacity: 1;
}
.p-contact-form-item-content--privacy input[type=checkbox]:disabled {
    background-color: #8b98a5;
    opacity: 0.4;
}
.p-contact-form-item-content--privacy input[type=checkbox]:checked {
    border: 1px solid #D3D3D3;
    background-color: transparent;
}
.p-contact-form-item-content--privacy input[type=checkbox]:checked::before {
    display: grid;
    place-content: center;
    color: #FA0046;
    height: 100%;
    font-family: "Material Icons";
    font-size: 1.125rem; /* 18px */
    content: "\E876"; /** 外部のアイコンを使ってCheckmarkを実装 */
}
.p-contact-form-item-content--privacy input[type=checkbox]:focus-visible {
    outline: 0.125rem solid #FA0046; /* 2px */
    outline-offset: 0.125rem; /* 2px */
}
.p-contact-form-item-content--privacy label {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0 0.5rem;
    height: 2rem;
}
@media screen and ( max-width: 768px ){
}



.p-contact-form-item-content textarea {
    position: relative;
    width: 28.1875rem; /* 435px -> 41px に変更 */
    height: 12.5rem; /* 200px */
    margin: 1.3125rem 0;
    padding: 1em;
    color: #111;
    font-size: 1rem; /* 16px */
    line-height: 1.2;
    letter-spacing: 0.05em;
    border: 1px solid #D3D3D3;
    border-radius: 0.3125rem; /* 5px */
}
@media screen and ( max-width: 768px ){
}



.p-contact-heading-sub {
    margin-bottom: 1.25rem; /* 20px */
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 2;
    letter-spacing: 0.06em;
}
.p-contact-heading-sub--center {
    text-align: center;
}
@media screen and ( max-width: 768px ){
}



.p-contact-iframe {
    position: relative;
    width: 100%;
    height: 19.75rem; /* 316px */
    margin: 0;
    padding: 1.875rem; /* 30px */
    border: 1px solid #D3D3D3;
    border-radius: 0.3125rem; /* 5px */
}
@media screen and ( max-width: 768px ){
    .p-contact-iframe {
        padding: 1rem; /* 30px */
    }
}



.p-contact-iframe__inner {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 0.25rem 0 0;
    overflow-y: scroll;
}
@media screen and ( max-width: 768px ){
}



.p-contact-form-item__button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22.5rem; /* 360px */
    height: 4.375rem; /* 70px */
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 1.125rem; /* 18px */
    line-height: 1.3;
    letter-spacing: 0.04em;
    background-color: #111;
    border-radius: 0.3125rem; /* 5px */
    opacity: 1;
}
.p-contact-form-item__button:disabled {
    opacity: 0.4;
}
.p-contact-form-item__button--back {
    color: #111;
    background-color: #D3D3D3;
}
@media screen and ( max-width: 768px ){
    .p-contact-form-item__button {
        width: 100%;
    }
    .p-contact-form-item__button:disabled {
    }
    .p-contact-form-item__button--back {
    }
}



.p-contact-form-item-content__error {
    position: relative;
    width: 100%;
    margin: 0.5em 0 0;
    padding: 0;
    color: #FA0046;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    font-feature-settings: "palt";
}
@media screen and ( max-width: 768px ){
}



.p-contact-text--remark{ }
@media screen and ( max-width: 768px ){
    .p-contact-text--remark{
        margin-top: 0.2rem;
        font-size: 0.8rem;
        line-height: 1.5;
     }
}