@charset "UTF-8";
:root {
    --gray:#898989;
}
.content_wrap {
    /* viewport:768-960px  105-130px */
    padding-block:clamp(6.563rem, calc(0.313rem + 13.021vw), 8.125rem);
    width:min(900px, 90%);
}
.label {
    /* viewport:768-960px  56-70px */
    margin-bottom:clamp(3.5rem, calc(0rem + 7.292vw), 4.375rem);
}
* + .label {
    /* viewport:768-960px  94.5-118px */
    margin-top:clamp(5.906rem, calc(0.031rem + 12.24vw), 7.375rem);
}
form {
    
    & > dl dt {
        margin-bottom:1em;
        /* viewport:768-960px  19-24px */
        font-size:clamp(1.188rem, calc(-0.062rem + 2.604vw), 1.5rem);
        font-weight:bold;
    }
    & > dl dt:not(:first-of-type) { margin-top:1lh; padding-top:1lh; border-top:dashed 1px currentColor;}
    & > dl dd {
        font-family:var(--noto);
        /* viewport:768-960px  16-20px */
        font-size:clamp(1rem, calc(0rem + 2.083vw), 1.25rem);
    }
    span.required {
        margin-left:0.55em;
        color:var(--pink);
        /* viewport:768-960px  14.5-18px */
        font-size:clamp(0.906rem, calc(0.031rem + 1.823vw), 1.125rem);
    }
}

.subTitle {
    width:fit-content;
    margin:1.5em auto 0;
    padding:0.3em 1.4em;
    background:var(--pink);
    /* viewport:768-960px  16-20px */
    font-size:clamp(1rem, calc(0rem + 2.083vw), 1.25rem);
    font-weight:bold;
    color:#fff;
}

.remarks {
    display:flex;
    flex-direction:column;
    align-items:center;
    /* viewport:768-960px  16-20px */
    gap:clamp(1rem, calc(0rem + 2.083vw), 1.25rem);
    /* viewport:768-960px  72-90px */
    margin-top:clamp(4.5rem, calc(0rem + 9.375vw), 5.625rem);

    & p {
        color:var(--pink);
        /* viewport:768-960px  13-15px */
        font-size:clamp(0.813rem, calc(0.313rem + 1.042vw), 0.938rem);
        font-weight:bold;
    }
}
.comment {
    padding:1em 2em;
    background-color:#FFFAB7;
    border:solid 1px currentColor;
    color:var(--pink);
    /* viewport:768-960px  13-15px */
    font-size:clamp(0.813rem, calc(0.313rem + 1.042vw), 0.938rem);
    font-weight:bold;
    text-align:center;
    line-height:2;
}

.notice_box {
    width:fit-content;
    /* viewport:768-960px  32-48px */
    margin:clamp(2rem, calc(-2rem + 8.333vw), 3rem) auto 0;

    & label { justify-content:center;}
}

@media (width < 768px){
    .remarks {

        & .comment { word-break:keep-all;}
    }
}

.formLink { margin-top:3lh;}
@media (width < 768px){
    .formLink { display:block!important;}
}


/* ==================================================
    header
================================================== */
header {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:19.5px;
    height:fit-content;
    /* viewport:768-960px  10-26.5px */
    padding-top:clamp(0.625rem, calc(-3.5rem + 8.594vw), 1.656rem);
    /* viewport:768-960px  12-32px */
    padding-bottom:clamp(0.75rem, calc(-4.25rem + 10.417vw), 2rem);
    padding-inline:1em;

    background:url(../../image/bg.png) repeat center;
}
@media (width < 768px) {
    header {
        gap:6.5px;

        & .logo { width:75px;}
        & .cp_title { width:240px;}
    }
}




/* ========================= 今回セントリーの金庫を選んだ理由：表示・非表示処理 ========================= */
#toggleQ, #toggleQ + dd { display:none;}
#toggleQ.active, #toggleQ.active + dd { display:block;}

/* ========================= プルダウン ========================= */
select {
    padding:1.1em 1.2em;
    width:100%;
    appearance:none;
    border-color:var(--gray);
    font-size:inherit;

    &:has(option[value=""]:checked) { color:var(--gray);}
    & option { color:var(--black);}
}
.select_wrap {
    position:relative;

    &:after {
        content:"";
        position:absolute;
        display:block;
        width:1em;
        height:auto;
        aspect-ratio:1;
        background-color:var(--black);
        mask:url(../../image/icon_arrow.svg) no-repeat center / contain;
        -webkit-mask:url(../../image/icon_arrow.svg) no-repeat center / contain;
        rotate:90deg;
        inset:50% 1em auto auto;
        translate:0 -50%;
        pointer-events:none;
    }
}
select:has(option:not([value=""]):checked) option[value=""] { display:none;}


/* ========================= チェックボックス ========================= */
.caution {
    margin-top:0.5555em;
    padding-left:1em;
    text-indent:-1em;
    /* viewport:768-960px  14.5-18px */
    font-size:clamp(0.906rem, calc(0.031rem + 1.823vw), 1.125rem);
    color:var(--gray);
    font-weight:400;
}
.caution + .caution { margin-top:0;}
.label_wrap {
    display:flex;
    flex-wrap:wrap;
    gap:1em 1.5em;
}
label:has(input[type="checkbox"]) {
    display:flex;
    align-items:center;
    gap:0.5em;
    font-size:inherit;
}
input[type="checkbox"] {
    width:1.5em;
    height:1.5em;
    border:solid 1px var(--gray);
    border-radius:0.1em;
    font-size:inherit;
}

.check_other_text { display:none; margin-top:1em;}
.label_wrap:has(.check_other:checked) ~ .check_other_text { display:block;}

/* ========================= 日付 ========================= */
input[type="date"] {
    position:relative;
    width:100%;
    padding-block:1.1em;
    padding-inline:2.8em 1.2em;
    font-size:inherit;
    appearance:none;
    border:solid 1px var(--gray);
}
input[type="date"]:before {
    content:"";
    position:absolute;
    display:block;
    width:1.5em;
    height:auto;
    aspect-ratio:1;
    background-color:currentColor;
    mask:url(../../image/icon_calendar.svg) no-repeat center / contain;
    -webkit-mask:url(../../image/icon_calendar.svg) no-repeat center / contain;
    inset:50% auto auto 1em;
    translate:0 -50%;
}
input[type="date"]::-webkit-calendar-picker-indicator { position:absolute; inset:0 auto auto 0; width:100%; height:100%; opacity:0;}
input[type="date"]:not(.formrun-has-success) { color:var(--gray);}



/* ========================= テキスト ========================= */
input:where([type="text"], [type="tel"], [type="email"], [type="number"]) {
    width:100%;
    padding:1.1em 1.2em;
    font-size:inherit;
    border:solid 1px var(--gray);
    border-radius:0;
}


/* ========================= 電話番号 ========================= */
input[type="tel"] ~ .invalid_text { display:none;}
input[type="tel"]:user-invalid ~ .invalid_text { display:block;}
input[type="tel"].formrun-has-error ~ .invalid_text { display:none;}


/* ========================= ファイル ========================= */
.file_wrap {
    position:relative;
    display:grid;
    grid-template:
        "top" 1fr
        "bottom" 1fr / 100%;
    justify-items:center;
    font-size:inherit;

    & .icon {
        grid-row:1/2;
        grid-column:1/-1;
        align-self:end;
        display:block;
        width:3em;
        height:auto;
        aspect-ratio:1;
        background-color:#888888;
        mask:url(../../image/icon_camera.svg) no-repeat center / contain;
        -webkit-mask:url(../../image/icon_camera.svg) no-repeat center / contain;
        pointer-events:none;
    }
    & .text {
        grid-row:2/3;
        grid-column:1/-1;
        align-self:start;
        white-space:pre;
        font-size:0.75em;
        line-height:2;
        text-align:center;
        pointer-events:none;
    }
}
input[type="file"] { grid-row:1/-1; grid-column:1/-1; display:block; width:100%;}
::file-selector-button { width:100%; height:260px; color:transparent;}

/* ファイル添付 */
.file_wrap:has(input[type="file"].formrun-has-success) {
    --c:#007EAA;

    & .icon {
        width:3.5em;
        background-color:var(--c);
        mask:url(../../image/icon_fileUpSuccess.svg) no-repeat center / contain;
        -webkit-mask:url(../../image/icon_fileUpSuccess.svg) no-repeat center / contain;
    }
    & .text span {
        display:block;
        width:15em;
        color:var(--c);
        font-weight:bold;
        font-size:1.2em;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    & ::file-selector-button { background-color:transparent; border:solid 1px var(--c);}
}


/* ========================= form.run ========================= */
[data-formrun-show-if-error], .invalid_text { margin-block:0.5em; color:var(--red);}


/* ========================= thanks_wrap ========================= */
main:has(.thanks_wrap) {
    width:100%;
    /* viewport:768-960px  75-150px */
    padding-block:clamp(4.688rem, calc(-14.062rem + 39.063vw), 9.375rem);
    display:grid;
    place-items:center;
}
.thanks_wrap {
    width:min(800px, 90%);
    margin-inline:auto;

    & p {
        /* viewport:768-960px  14.5-18px */
        font-size:clamp(0.906rem, calc(0.031rem + 1.823vw), 1.125rem);
        word-break:keep-all;
        text-align:center;
        line-height:2;
    }
    & .comment { margin-top:3em; padding-inline:1em;}
    & a.btn { margin-block:3em 0;}
}