@charset "UTF-8"; 
.page-order {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 8vw;
    gap: 5vw;
}
/* ===============================
   01: order header
=============================== */
.order__header {
    display: flex;
    flex-direction: column;
    gap: 3vw;
    padding: 12vw 0 0;
}
.header__title {
    display: flex;
    flex-direction: row;
    padding: 0 7vw;
    gap: 5vw;
    align-items: center;
}
.order__title {
    font-size: 4.2rem;
    line-height: normal;
    letter-spacing: .05em;
}
.order__subtitle {
    font-size: 1.6rem;
    line-height: normal;
    letter-spacing: .05em;
    font-weight: 500;
}
/* ================================
   Contact Form Base Style
=================================*/
.contactForm {
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 3vw;
}
.box {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}
.contentTitle {
    font-size: 1.6rem;
}
.contentTitle span {
    font-size: 1.2rem;
}

/* 各入力ブロック */
.contactForm__content {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}
.contactForm__content-txt {
    display: flex;
    gap: 1vw;
}
.contactForm__content-txt p {
    font-size: 1.3rem;
}
.required {
    color: #d16c6c;
    font-size: 1.3rem;
}

/* 入力フィールド */
.inputField,
.textarea {
    width: 100%;
    padding: 0.5vw;
    border-radius: 6px;
    background: #fff;
    font-size: 1.2rem;
}
.textarea:last-child {
height: 15vw;
}

/* ▼選択ボタン全体 ----------------------------*/
.inputSelects {
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
}
.selectBtn {
    padding: 0.5vw 1vw;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 1.2rem;
    border:1px solid #ccc;
    transition:.2s;
}
.selectBtn:hover {
    background:#5858587e;
}
.selectBtn.is-active {
    background:#585858;
    border-color:#585858;
    color:#fff;
}

/* ▼アコーディオン全体 -------------------------*/
.detailAccordion {
    display: none; /* 初期は非表示 */
    animation: fade .3s ease;
    flex-direction: column;
    gap: 3vw;
}
@keyframes fade {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.formBlock { 
    display: flex;
    flex-direction: column;
    gap: 1vw;
}
.formBlock__title {
    font-size: 1.2rem;
    font-weight: 500;
}
.formBlock__label {
    font-size: 1.6rem;
    display: flex;
    gap: 0vw;
    align-items: flex-start;
    flex-direction: column;
}
.labelContaioner {
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
}
/* ▼bottomTxt ------------------*/
.containerTxt {
    font-size: 1.2rem;
}
.containerTxt a {
    text-decoration: underline;
    transition:.2s;
}
.containerTxt a:hover {
    color: #C6D61A;
}

/* ▼プライバシーチェック ------------------*/
.privacy__container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vw;
    margin: 0 auto;
    text-align: center;
    overflow: visible; /* ←重要 */
}

.agreeCheck {
    width: 1.3vw;
    height: 1.3vw;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.agreeCheck:checked {
    background: #000;
    border-color: #000;
    position: relative;
}

.agreeCheck:checked::after {
    content: "";
    position: absolute;
    width: 0.6vw;
    height: 1vw;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    top: 0;
    left: 0.4vw;
}

.privacy__text p {
    margin: 0;
    font-size: 1.4rem;
}

.privacy__textLink  {
    font-size: 1.2rem;
    text-decoration: underline;
    margin: 0 auto;
    transition:.2s;
}
.privacy__textLink:hover  {
    color: #C6D61A;
}


/* ▼送信ボタン ----------------------------*/
.sendBtn {
    display: block;
    width: 12vw;
    text-align: center;
    margin: 0 auto;
    padding: 0.6vw 0;
    border-radius: 40px;
    background: #585858;
    color: #fff;
    letter-spacing: .05em;
    font-size: 1.5rem;
    cursor: pointer;
    transition: .3s;
    border: none;
}
.sendBtn:hover {
    background: #222;
}
.sendBtn:disabled {
    background: #bdbdbd;
    cursor: default;
}

/* ===============================
   00: mail
=============================== */
.mail {
    display: flex;
    padding: 5vw 22vw;
    flex-direction: column;
    align-items: center;
    gap: 4vw;
}
.mail__txt {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1.9px;
}
.mail__container {
    display: flex;
    height: 10vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.address {
    font-size: 3rem;
    letter-spacing: 3.5px;
}

.mailDecoration {
    position: absolute;
    width: 6vw;
}
.left {
    top: 0;
    left: -5vw;
}
.right {
    bottom: 0;
    right: -5vw;
}

/* 📱 Tablet (1024px) */
@media (max-width: 1024px){
    /* ===============================
    01: order header
    =============================== */
    .order__header {
        padding: 18vw 0 0;
    }
    .header__title {
        flex-direction: column;
        gap: .5vw;
        padding: 0 11vw;
    }
    .order__title {
        font-size: 3rem;
    }
    /* ================================
    Contact Form Base Style
    =================================*/
    .contactForm {
        width: 80%;
        gap: 5vw;
    }
    .box {
        padding: 0 3vw;
    }
    /* ▼アコーディオン全体 -------------------------*/
    .detailAccordion {
        padding: 0 3vw;
    }
    /* ▼アコーディオン全体 -------------------------*/
    .containerTxt {
        padding: 0 3vw;
    }
    /* ▼送信ボタン ----------------------------*/
    .sendBtn {
        font-size: 1.2rem;
    }

    /* ===============================
    04: mail
    =============================== */
    .mail {
        padding: 5vw 15vw;
    }
    .address {
        font-size: 2rem;
    }

}
/* 📱 Smartphone (810px)  */
@media (max-width: 810px){
    /* ===============================
    01: order header
    =============================== */
    .order__header {
        padding: 22vw 0 0;
    }
    .header__title {
        padding: 0 11vw;
        align-items: flex-start;
    }
    .order__title {
        font-size: 2.2rem;
    }
    .order__subtitle {
        font-size: 1.2rem;
        font-weight: 400;
        letter-spacing: -.05em;
    }
    /* ================================
    Contact Form Base Style
    =================================*/
    .contactForm {
        gap: 8vw;
    }
    .box {
        gap: 4vw;
    }
    .contentTitle {
        font-weight: 500;
    }
    .contentTitle span {
        font-weight: 400;
    }
    .contactForm__content-txt p {
        font-weight: 400;
    }
    .required {
        font-weight: 400;
    }
    /* 入力フィールド */
    .inputField,
    .textarea {
        height: 8vw;
    }
    .textarea:last-child {
        height: 30vw;
    }

    /* ▼選択ボタン全体 ----------------------------*/
    .inputSelects {
        gap: 3vw;
    }
    /* ▼アコーディオン全体 -------------------------*/
    .formBlock {
        gap: 3vw;
    }
    .formBlock__label {
        font-size: 1.2rem;
        font-weight: 500;
    }
    .labelContaioner {
        gap: 3vw;
    }
    /* ▼プライバシーチェック ------------------*/
    .privacy__container {
        gap: 1vw;
    }
    .agreeCheck {
        width: 4.5vw;
        height: 4.5vw;
    }
    .agreeCheck:checked::after {
        width: 1.6vw;
        height: 3vw;
        top: 0.3vw;
        left: 1.4vw;
    }

    .privacy__text p {
        font-size: 1.2rem;
    }

    .privacy__textLink  {
        font-size: 1.2rem;
        text-decoration: underline;
        margin: 0 auto;
        transition:.2s;
    }
    .privacy__textLink:hover  {
        color: #C6D61A;
    }
    
    /* ▼送信ボタン ----------------------------*/
    .sendBtn {
        width: 25vw;
        height: 10vw;
        font-size: 1.2rem;
    }


    /* ===============================
    04: mail
    =============================== */
    .mail {
        padding: 3vw 5vw;
        gap: 6vw;
    }
    .mail__txt {
        font-size: 1.2rem;
        font-weight: 500;
    }
    .address {
        font-size: 1.2rem;
        font-weight: 500;
        letter-spacing: 1.5px;
    }
    .mailDecoration {
        width: 8vw;
    }
    .left {
        left: -10vw;
    }
    .right {
        right: -10vw;
    }
}