@charset "utf-8";
/* CSS Document */

/* layout */
.flex{
    display: flex;
}

/*grid*/

.flex.gap-3{
    gap: 0.75rem;/*12px*/
}

.flex.gap-4{
    gap: 1rem;/*16px*/
}


/*
-------------------------------------*/
#double-contact{
    min-height: 100vh;
    padding: 1rem;
    background: #e5e7eb;
}

#double-contact.flex{
    align-items: center;
    justify-content: center;
}

@media (min-width: 640px) {
    #double-contact{
        padding: 2rem;/*32px*/
    }
}


.double-contact-container{
    width: 100%;
    max-width: 56rem;
    border-top: solid 4px #1D3557;
    background: #ffffff;
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.double-contact-container.flex{
    flex-direction: column;
}


.form-head{
    padding: 1rem;/*1.5rem 1rem*/
    background: #1D3557;
    color: #ffffff;
    text-align: center;
    
}




.form-head h3{
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.75rem;
    letter-spacing: 0.025em;
}

@media (min-width: 640px) {
    .form-head h3{
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

.form-head p{
    font-size: 0.75rem;/*12px*/
    line-height: 1rem;
}

@media (min-width: 640px) {
    .form-head p{
        font-size: 0.875rem;/*14px*/
        line-height: 1.25rem;
    }
}


.double-contact-inner{
    padding: 1.5rem;/*24px*/
    border: solid 1px #e5e7eb;
    border-top: none; 
}

@media (min-width: 640px) {
    .double-contact-inner{
        padding: 2.5rem;/*40px*/
    }
}

.double-contact-container.flex .double-contact-inner{
    flex-grow: 1;
}

.form-top-notes{
    padding: 0.5rem 1.25rem;/*1.25rem*/
    margin-bottom: 2rem;
    border-left: solid 4px #1D3557;
    background: #f8fafc;
    color: #374151;
    line-height: 1;
}

.form-top-notes > p:first-child{
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.form-top-notes > p:last-child{
    color: #6b7280
}








/*フォーム入力エリア*/
.form-area{
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
    margin-bottom: 2rem;/*32px*/
}

.form-box{
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    border-bottom: solid 1px #f3f4f6;
}

.form-box:first-child{
    padding-top: 0;
}

@media (min-width: 640px) {
    .form-box{
        align-items: center;
        flex-direction: row;
    }
}

.form-box-contactnumber{
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    border-bottom: solid 1px #f3f4f6;
}

@media (min-width: 640px) {
    .form-box-contactnumber{
        align-items: flex-start;
        flex-direction: row;
    }
}

.form-box-contactdetails{
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    border-bottom: solid 1px #f3f4f6;
}

@media (min-width: 640px) {
    .form-box-contactdetails{
        flex-direction: row;
    }
}


.form-box-ttl{
    margin-bottom: 0.5rem;/*8px*/
    color: #1f2937;
    font-size: 0.875rem;/*14px*/
    line-height: 1.25rem;
    font-weight: 700;
}

@media (min-width: 640px) {
    .form-box-ttl{
        width: 33.333333%;
        margin-bottom: 0;
    }
}

.form-box-contactnumber .form-box-ttl{
    margin-top: 0.25rem;/*4px*/
}

.form-box-contactdetails .form-box-ttl{
    margin-top: 0.5rem;/*8px*/
}




.input-box{
    
}

@media (min-width: 640px) {
    .input-box{
        width: 66.666667%;
    }
}


.form-box-contactnumber .input-box.flex{
    flex-direction: column;
}

@media (min-width: 640px) {
    .form-box-contactnumber .input-box.flex{
        flex-direction: row;
    }
}


.form-box.name .input-box .w-half{
    width: 45%;
}

.form-box.name .input-box .w-half:last-child{
    margin-left:auto; 
}



.sr-only{
    position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}


.form-box-contactnumber .input-box > div{
    width: 100%;
}

@media (min-width: 640px) {
    .form-box-contactnumber .input-box > div{
    width: 45%;
    }
    .form-box-contactnumber .input-box > div:last-child{
        margin-left: auto;
    }
}

.form-box-contactnumber .input-box > div > label{
    display: inline-block;
    margin-bottom: 0.25rem;/*4px*/
    color: #4b5563;
    font-size: 0.75rem;/*12px*/
    font-weight: 700;
    line-height: 1rem;
}



input.input-box-deco,
textarea.input-box-deco{
    width: 100%;
    padding: 0.5rem 1rem; 
    border: solid 1px #d1d5db;    
    border-radius: 0.125rem;/*2px*/
}

input:focus,
textarea:focus{
    outline: 2px solid #1F2937;
}



/*必須*/
.form-box .form-box-ttl .text-req{
    margin-left: 0.25rem;/*4px*/
    color: #e63946;
    font-size: 0.75rem;/*12px*/
    line-height: 1rem;
}

.form-box-contactnumber .text-req{
    margin-left: 0.25rem;/*4px*/
    color: #e63946;
}

.form-box-contactdetails .text-req{
    color: #e63946;
}


/*任意*/
.form-box .form-box-ttl .text-opt{  
    margin-left: 0.25rem;/*4px*/
    color: #9ca3af;
    font-size: 0.75rem;/*12px*/
    line-height: 1rem;
}


.form-box-contactnumber .text-opt{
    margin-left: 0.25rem;/*4px*/
    color: #9ca3af;
}




/* 補足 */
.form-bottom-notes{
    margin-bottom: 2rem;/*32px*/
    color: #6b7280;
    text-align: center;
}


/* プライバシーポリシー */
.privacy-area{
    padding: 1.25rem;/*20px*/
    margin-bottom: 2rem;/*32px*/
    border: solid 1px #e5e7eb;    
    border-radius: 0.125rem;/*2px*/
    background-color: #f9fafb;
}

.privacy-area.flex{
    align-items: flex-start;
}

.privacy-area .check-box.flex{
    align-items: center;
    height: 1.25rem; 
}

.privacy-area .check-box > input{
    height: 1rem;
    width: 1rem;/*16px*/;
    color: #1F2937;
    border: solid 1px #d1d5db;    
    border-radius: 0.25rem;
    cursor: pointer;
}

.privacy-area .check-box > input:focus{
    outline: none;
}


.privacy-area-text{
    margin-left: 0.75rem;/*12px*/;
    
}

.privacy-area-text label{
    color: #1f2937;
    font-weight: 700;
    cursor: pointer;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.privacy-area-text label:hover{
    opacity: 0.8;
}

.privacy-area-text label .underline{
    color: #1F2937;
    font-weight: 700;
    text-decoration: underline;
}

.privacy-area-text label .text-req{
    color: #e63946;
}

.privacy-area-text p{
    margin-top: 0.25rem;/*4px*/
    color: #4b5563;
    font-size: 0.75rem;/*12px*/
    line-height: 1.625;
}

@media (min-width: 640px) {
    .privacy-area-text p{
        font-size: 0.875rem;/*14px*/
    }    
}

/* 送信ボタンエリア */
.submit-area{
    text-align: center;
}

.submit-area button{
    width: 100%;
    padding: 1rem 2rem;
    border: none;
    background-color: #1D3557;
    color: #ffffff;
    font-weight: 700;
    border-radius: 0.125rem;/*2px*/
    --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   
    	--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));	
    transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
    transition-duration: 200ms;	

}

@media (min-width: 640px) {
    .submit-area button{
        width: auto;
        padding: 1rem 4rem;
    }    
}

.submit-area button:hover{
    background-color: #142640;
    --tw-translate-y: -0.125rem;/*-2px*/

}

.submit-area p{
    margin-top: 1rem;/*16px*/
    color: #6b7280;
    font-size: 0.75rem;/*12px*/
    line-height: 1rem;
}