@charset "utf-8";

#main {
    #home {
        .wrap {
            .contents {
                a {
                    background-color: #ff9900;
                    color:#FFFFFF;
                    font-weight:600;
                    display: grid;
                    width: 6em;
                    align-items: center;
                    justify-content: center;
                    line-height: 1;
                    height: 2em;
                    border-radius: 6px;
                    font-size:2.4rem;
                    margin:150px auto 0;
                    &.members {
                        width:13em;
                        margin-top:30px;
                        background-color:#0d8845;
                    }
                }
            }
        }
    }
}

.searchbox {
    margin-bottom:10px;
    form {
        &.searchandfilter {
            ul {
                li {
                    padding:0;
                    &.sf-field-post-meta-dlmember {
                        display:flex;
                        align-items:center;
                        column-gap:5px
                    }
                }
            }
        }
        & > ul {
            font-size:1.6rem;
            display:grid;
            align-items:center;
            grid-gap:15px;
            grid-template-columns:1fr auto 13em 8em 9em 7em 5em;
            .sf-field-search {
                label {
                    display:block;
                    input {
                        padding:.5em;
                        border:none;
                        border:2px solid #cccccc;
                        border-radius:4px;
                        box-shadow:none;
                    }
                }
            }
            .sf-input-text {
                width:100%;
            }
            .sf-input-select {
                width:100%;
                min-width:auto;
                padding:.33em;
                border:none;
                border:2px solid #cccccc;
                border-radius:4px;
            }
            .chosen-single {
                height: 2.6em;
                background:none;
                display:grid;
                align-items:center;
                box-shadow:none;
                border:2px solid #cccccc;
                div {
                    top:7px;
                }
            }
        }
    }
}

#lists {
    .count {
        margin-bottom:10px;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom:20px;
        transition:.3s;
        &.loaded {
            opacity: .5;
            pointer-events: none;
        }
        th,td {
            font-size:1.5rem;
            line-height:1.3;
            padding:.5em;
            border:2px solid #efefef;
            vertical-align:middle;
            text-align:center;
        }
        thead {
            th {
                background-color:#8ed7cf;
                font-weight:500;
                font-size:1.4rem;
            }
        }
        tbody {
            tr {
                &:nth-child(even) {
                    background-color:#f5f5f5;
                }
                &:has(td.dlcheck input:checked) {
                    background-color:#ffdddd;
                }
            }
            td {
                &:nth-last-child(2) {
                    text-align:left;
                }
                a {
                    &.btn {
                        font-size:1.4rem;
                        background-color:#ff9900;
                        padding:.2em .4em;
                        border-radius:4px;
                        color:#FFFFFF;
                        font-weight:600;
                    }
                }
            }
        }
    }
    .pagenation {
        .screen-reader-text {
            display:none;
        }
        .page-numbers {
            display:flex;
            flex-wrap:wrap;
            gap:.5em 1em;
            align-items:cneter;
            justify-content:center;
            li {
            }
            .current {
                font-weight:600;
                color:#007572;
                transform:scale(1.3);
            }
        }
    }
}

h1 {
    &.pagetitle {
        text-align:center;
        font-size:2.4rem;
        padding:1em 0 2em;;
        display:grid;
        grid-template-columns:repeat(2,auto);
        align-items:center;
        justify-content:center;
        grid-gap:.5em;
        font-weight:500;
        span {
            &::before {
                font-size:1.5em;
                color:#007572;
            }
        }
    }
}
.editbox {
    max-width:800px;
    margin:0 auto;
    .acf-fields {
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
        grid-gap:15px;
        .acf-field {
            padding:0;
            border:none;
            label {
                font-size:1.4rem;
            }
            input {
                padding:.5em;
                border:2px solid #cccccc;
                border-radius:4px;
                font-size:1.8rem;
            }
            &:nth-child(-n+2) {
                width:31.5%;
            }
            &:nth-child(2) {
                margin-right:33%;
            }
            &:nth-child(n+3):nth-child(-n+5) {
                width:31.5%;
            }
            &:nth-child(n+6):nth-child(-n+8) {
                width:31.5%;
            }
            &:nth-child(9) {
                width:31.5%;
            }
            &:nth-child(10) {
                width:64.5%;
            }
            &:nth-child(n+11):nth-child(-n+12) {
                width:31.5%;
                margin-bottom:15px;
            }
            &:nth-child(12) {
                margin-right:33%;
            }
            &:nth-child(15) {
                width:97%;
                margin-left:1.1%;
                margin-top:-20px;
                margin-bottom:20px
            }
            textarea {
                padding:.5em;
                border:2px solid #cccccc;
                border-radius:4px;
                font-size:1.8rem;
                width:100%;
                height:5em;
            }
        }
    }
    .acf-form-submit {
        text-align:center;
        input {
            background-color:#ff9900;
            border:none;
            color:#FFFFFF;
            font-size:2.0rem;
            font-weight:600;
            padding:.33em 1em;
            border-radius:6px;
        }
    }
}
a {
    &.back {
        position:absolute;
        right:200px;
        top:0;
        font-size:1.5rem;
        background-color:#4e90e7;
        color:#FFFFFF;
        font-weight:500;
        border-radius:4px;
        height:2.1em;
        display:grid;
        grid-template-columns:repeat(2,auto);
        grid-gap:.33em;
        align-items:center;
        justify-content:center;
        width:8em;
        span {
            &::before {
                font-size:.8em;
                transform:translateY(-.1em);
                display:inline-block;
            }
        }
    }
}

body {
    &.page-template-page-identity {
        min-width: auto;
    }
}
#main {
    #identity {
        .contents {
            width: 94%;
            max-width:380px;
            margin:0 auto;
            text-align:center;
            .pagetitle {
                padding:0 0 1.5em;
                margin-left:-1em;
                font-weight:600;
            }
            p {
                font-size:1.8rem;
                font-weight:500;
                line-height:1.8;
                margin-bottom:1em;
                &.att {
                    display:inline-block;
                    color:#ff0000;
                    font-weight:600;
                    border:3px solid #ff0000;
                    padding:.5em 1em;
                    border-radius:8px;
                }
            }
            .step1 {
                input[type="text"] {
                    display:block;
                    margin:0 auto 10px;
                    width:10em;
                    font-size:2.4rem;
                    text-align:center;
                    padding:.5em;
                    border:2px solid #cccccc;
                    border-radius:6px;
                    margin-bottom:1em;
                }
                input[type="submit"] {
                    font-size:2.0rem;
                    border:none;
                    background-color:#ff9900;
                    color:#FFFFFF;
                    line-height:2.4;
                    width:8em;
                    border-radius:8px;
                    font-weight:600;
                    box-shadow:  5px 5px 5px #ffcf87 inset,
                    -5px -5px 5px #cb8110 inset,
                    3px 3px 5px #c7c7c7,
                    -3px -3px 6px #f9f9f9;
                    text-shadow:2px 2px 2px #bd770a;
                }
                .att {
                    padding: 0;
                    margin-top:1.5em;
                    border:none;
                }
            }
            .step2 {
                p {
                    margin-bottom:.8em;
                }
                .check {
                    display:grid;
                    grid-template-columns:auto 1fr;
                    font-size:2.0rem;
                    text-align:left;
                    border-radius:8px;
                    padding:15px 20px;
                    grid-gap:10px;
                    font-weight:600;
                    margin-bottom:20px;
                    box-shadow:  3px 3px 5px #c7c7c7,
                    -3px -3px 6px #f4f4f4;
                    dt {
                        line-height:1.4;
                    }
                    dd {
                        line-height:1.4;
                        text-wrap:balance;
                    }
                }
                .select {
                    display:grid;
                    grid-template-columns:repeat(2,1fr);
                    justify-content:center;
                    align-items:center;
                    font-size:1.8rem;
                    font-weight:600;
                    border-radius:10px;
                    margin-bottom:15px;
                    overflow: hidden;
                    box-shadow:  3px 3px 5px #c7c7c7,
                    -3px -3px 6px #f9f9f9;
                    label {
                        line-height:1.2;
                        display:grid;
                        grid-template-columns:repeat(2,auto);
                        justify-content:center;
                        align-items:center;
                        grid-gap:.33em;
                        height:3.5em;
                        color:#28706d;
                        background-color:#EFEFEF;
                        opacity:.75;
                        &:has(input:checked) {
                            background-color:#007572;
                            color:#FFFFFF;
                            opacity:1;
                            box-shadow:  5px 5px 5px #123d3d inset,
                            -2px -2px 2px #31817e inset,
                            -4px -4px 5px #6fa9a8 inset;
                        }
                        input {
                            display:none;
                            &:not(:checked) {
                                & + span {
                                    color:#007572;
                                    opacity:.33;
                                }
                            }
                        }
                        span {
                            &::before {
                                font-size:2em;
                                transform:translate(-.4em,-.2em);
                                display:inline-block;
                            }
                        }
                    }
                    &:has(input.ok:checked) {
                        & + .editbox {
                            display:none;
                        }
                    }
                }
                .edit {
                    background-color:#efefef;
                    border-radius:10px;
                    padding:15px;
                    margin-bottom:15px;
                    box-shadow:  3px 3px 5px #c7c7c7,
                    -3px -3px 6px #f9f9f9;
                    p {
                        color:#ff0000;
                        display:flex;
                        align-items:center;
                        justify-content:center;
                        line-height:1.3;
                    }
                    dl {
                        display:grid;
                        grid-template-columns:auto 1fr;
                        font-size:2.0rem;
                        text-align:left;
                        border-radius:8px;
                        grid-gap:10px;
                        font-weight:600;
                        dt {
                            line-height:1.4;
                            padding-top:.66em;
                            font-size:1.7rem;
                        }
                        dd {
                            line-height:1.4;
                            text-wrap:balance;
                            input {
                                font-size:2.0rem;
                                padding:.5em;
                                width:100%;
                                border:2px solid #cccccc;
                                border-radius:6px;
                                &.chgzip {
                                    width:8em;
                                    margin-bottom:10px;
                                }
                            }
                            textarea {
                                width:100%;
                                height:4em;
                                padding:.5em;
                                border:2px solid #cccccc;
                                border-radius:6px;
                            }
                        }
                    }
                    &.add {
                        margin-bottom:20px;
                        background-color:#fff5e3;
                    box-shadow:  3px 3px 5px #c7c7c7,
                    -3px -3px 6px #f9f9f9;
                        p {
                            color:#333333;
                        }
                    }
                }
                .send {
                    display:block;
                    font-size:2.0rem;
                    margin:0 auto;
                    background-color:#ff9900;
                    color:#FFFFFF;
                    line-height:2.4;
                    width:15em;
                    border-radius:8px;
                    font-weight:600;
                    box-shadow:  5px 5px 5px #ffcf87 inset,
                    -5px -5px 5px #cb8110 inset,
                    3px 3px 5px #c7c7c7,
                    -3px -3px 6px #f9f9f9;
                    text-shadow:2px 2px 2px #bd770a;
                }
            }
            .complete {
                border:5px solid #cccccc;
                border-radius:20px;
                padding:20px 15px 30px;
                p {
                    font-size:2.4rem;
                    color:#007572;
                    font-weight:600;
                    display:grid;
                    grid-template-columns:repeat(2,auto);
                    align-items:center;
                    justify-content:center;
                    span {
                        &::before {
                            font-size:1.4em;
                            display:inline-block;
                            transform:translate(-.3em,-.1em);
                        }
                    }
                    &:first-child {
                        font-size:2.6rem;
                        color:#333333;
                    }
                }
                dl {
                    dt {
                        font-size:2.0rem;
                        line-height:1.4;
                        margin-bottom:1em;
                        font-weight:500;
                    }
                    dd {
                        display:grid;
                        grid-template-columns:1fr;
                        font-size:3.4rem;
                        grid-gap:.5em;
                        & > span {
                            font-size:.9em;
                            span {
                                font-size:.8em;
                            }
                        }
                        a {
                            color:#007572;
                            font-weight:500;
                            display:grid;
                            grid-template-columns:repeat(2,auto);
                            justify-content:center;
                            align-items:center;
                            grid-gap:.2em;
                            text-align:left;
                            span:first-child {
                                font-weight:600;
                                font-size:.5em;
                                grid-area:1/1/2/3;
                            }
                            .dashicons {
                            &::before {
                                font-size:1.5em;
                                transform:translate(-.3em,0em);
                                display:inline-block;
                            }
                            }
                        }
                    }
                }
                .takuho {
                    display:block;
                    margin-bottom:30px
                }
            }
        }
    }
}