/* ------------------------------------
joinus.html
------------------------------------ */

        @media (min-width: 768px) {
            #main form[data-type="joinus"] .formBox .name th,
            #main form[data-type="joinus"] .formBox .name td,
            #main form[data-type="joinus"] .formBox .kanaRow th,
            #main form[data-type="joinus"] .formBox .kanaRow td,
            #main form[data-type="joinus"] .formBox .sexTr th,
            #main form[data-type="joinus"] .formBox .sexTr td,
            #main form[data-type="joinus"] .formBox .birthRow th,
            #main form[data-type="joinus"] .formBox .birthRow td,
            #main form[data-type="joinus"] .formBox .add03 th,
            #main form[data-type="joinus"] .formBox .add03 td,
            #main form[data-type="joinus"] .formBox .phoneRow th,
            #main form[data-type="joinus"] .formBox .phoneRow td,
            #main form[data-type="joinus"] .formBox .emailRow th,
            #main form[data-type="joinus"] .formBox .emailRow td,
            #main form[data-type="joinus"] .formBox .emailConfirmRow th,
            #main form[data-type="joinus"] .formBox .emailConfirmRow td {
                vertical-align: middle;
            }

            #main form[data-type="joinus"] .formBox td .nameList li {
                display: flex;
                align-items: center;
                min-height: 32px;
            }

            #main form[data-type="joinus"] .formBox td .nameList li span {
                line-height: 32px;
            }

            #main form[data-type="joinus"] .formBox .add02 th,
            #main form[data-type="joinus"] .formBox .add03 th,
            #main form[data-type="joinus"] .formBox .add04 th,
            #main form[data-type="joinus"] .formBox .add05 th,
            #main form[data-type="joinus"] .formBox .phoneRow th,
            #main form[data-type="joinus"] .formBox .emailRow th,
            #main form[data-type="joinus"] .formBox .emailConfirmRow th,
            #main form[data-type="joinus"] .formBox .pswTd th,
            #main form[data-type="joinus"] .formBox .pswCon th {
                line-height: 32px;
            }

            #main form[data-type="joinus"] .formBox .add02 dl {
                position: relative;
            }

            #main form[data-type="joinus"] .formBox .add02 dt {
                position: absolute;
                top: 0;
                left: -1.4em;
                margin-top: 0;
                float: none;
                width: auto;
                line-height: 32px;
            }

            #main form[data-type="joinus"] .formBox .add02 dd {
                padding-left: 0;
            }

            #main form[data-type="joinus"] .formBox .add02 dd input {
                width: 112px;
            }

            #main form[data-type="joinus"] .formBox .add03 td input,
            #main form[data-type="joinus"] .formBox .add04 td input,
            #main form[data-type="joinus"] .formBox .add05 td input {
                width: 390px;
            }
        }

        @media (max-width: 767px) {
            #main form[data-type="joinus"] {
                --sp-field-gap: 3.8em;
                width: 100%;
                max-width: 100%;
                overflow-x: hidden;
            }

            #main form[data-type="joinus"] .formBox th,
            #main form[data-type="joinus"] .formBox td {
                padding-right: 20px;
                overflow: hidden;
            }

            #main form[data-type="joinus"] > ul {
                margin: 0;
                padding: 0;
            }

            #main form[data-type="joinus"] .formBox {
                margin: 0 0 30px;
                width: 100%;
                max-width: 100%;
                overflow: hidden;
                box-sizing: border-box;
            }

            #main form[data-type="joinus"] .formBox table,
            #main form[data-type="joinus"] .formBox tbody,
            #main form[data-type="joinus"] .formBox tr,
            #main form[data-type="joinus"] .formBox th,
            #main form[data-type="joinus"] .formBox td {
                max-width: 100%;
                box-sizing: border-box;
            }

            #main form[data-type="joinus"] .block,
            #main form[data-type="joinus"] .myTitle.wide.ma-inset,
            #main form[data-type="joinus"] .insetBox {
                width: 100%;
                box-sizing: border-box;
            }

            #main form[data-type="joinus"] .insetBox {
                padding: 12px;
            }

            #main form[data-type="joinus"] .insetBox section {
                margin: 12px 0;
            }

            #main form[data-type="joinus"] .block label {
                overflow-wrap: anywhere;
            }

            #main form[data-type="joinus"] .formBox td input[type="text"],
            #main form[data-type="joinus"] .formBox td input[type="tel"],
            #main form[data-type="joinus"] .formBox td input[type="url"],
            #main form[data-type="joinus"] .formBox td input[type="email"],
            #main form[data-type="joinus"] .formBox td input[type="date"],
            #main form[data-type="joinus"] .formBox td input[type="password"],
            #main form[data-type="joinus"] .formBox td input[type="search"],
            #main form[data-type="joinus"] .formBox td input[type="number"] {
                width: calc(100% - var(--sp-field-gap)) !important;
                max-width: 100%;
                box-sizing: border-box;
            }

            #main form[data-type="joinus"] .formBox td .nameList {
                display: block;
                width: 100%;
            }

            #main form[data-type="joinus"] .formBox td .nameList li {
                width: 100%;
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                min-width: 0;
                margin: 0 0 10px;
                padding-right: var(--sp-field-gap);
                position: relative;
                box-sizing: border-box;
            }

            #main form[data-type="joinus"] .formBox td .nameList li span {
                margin-right: 6px;
                flex: none;
                line-height: 32px;
                width: 1.6em;
            }

            #main form[data-type="joinus"] .formBox td .nameList li input {
                width: auto !important;
                flex: 1 1 auto;
                min-width: 0;
            }

            #main form[data-type="joinus"] .formBox td .nameList li .em {
                margin: 0;
                flex: none;
                max-width: none;
                white-space: nowrap;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }

            #main form[data-type="joinus"] .formBox td .nameList li:last-child {
                margin-bottom: 0;
            }

            #main form[data-type="joinus"] .formBox .name td .nameList,
            #main form[data-type="joinus"] .formBox .kanaRow td .nameList {
                width: 100%;
                max-width: 100%;
            }

            #main form[data-type="joinus"] .formBox .name td .nameList li,
            #main form[data-type="joinus"] .formBox .kanaRow td .nameList li {
                display: grid;
                grid-template-columns: 2.4em minmax(0, 1fr) 3.8em;
                column-gap: 6px;
                align-items: center;
                padding-right: 0;
                position: static;
            }

            #main form[data-type="joinus"] .formBox .name td .nameList li span,
            #main form[data-type="joinus"] .formBox .kanaRow td .nameList li span {
                width: auto;
                margin-right: 0;
            }

            #main form[data-type="joinus"] .formBox .name td .nameList li input,
            #main form[data-type="joinus"] .formBox .kanaRow td .nameList li input {
                width: 100% !important;
                flex: none;
            }

            #main form[data-type="joinus"] .formBox .name td .nameList li .em,
            #main form[data-type="joinus"] .formBox .kanaRow td .nameList li .em {
                position: static;
                transform: none;
                margin: 0;
                padding-left: 4px;
                width: 100%;
                justify-self: start;
                white-space: nowrap;
            }

            #main form[data-type="joinus"] .formBox td .sexList {
                margin: 0;
                display: flex;
                gap: 22px;
                align-items: center;
            }

            #main form[data-type="joinus"] .formBox td .sexList > li {
                margin: 0;
                float: none;
                font-size: 12px;
            }

            #main form[data-type="joinus"] .formBox .birthRow td {
                padding-top: 8px;
            }

            #main form[data-type="joinus"] .formBox td .birthList {
                margin: 0;
            }

            #main form[data-type="joinus"] .formBox td .birthList > li {
                margin-right: 0;
                float: none;
            }

            #main form[data-type="joinus"] .formBox .birthRow td input[type="date"] {
                width: 100% !important;
            }

            #main form[data-type="joinus"] .formBox .add02 dt,
            #main form[data-type="joinus"] .formBox .add02 dd {
                float: none;
                width: 100%;
            }

            #main form[data-type="joinus"] .formBox .add02 dt {
                padding-top: 0;
                margin-bottom: 6px;
            }

            #main form[data-type="joinus"] .formBox .add02 dd {
                padding-left: 0;
            }

            #main form[data-type="joinus"] .formBox .add02 dd input {
                width: min(100%, 180px) !important;
                max-width: 100%;
            }

            #main form[data-type="joinus"] .formBox .add03 td input,
            #main form[data-type="joinus"] .formBox .add04 td input,
            #main form[data-type="joinus"] .formBox .add05 td input,
            #main form[data-type="joinus"] .formBox .phoneRow td input,
            #main form[data-type="joinus"] .formBox .emailRow td input,
            #main form[data-type="joinus"] .formBox .emailConfirmRow td input,
            #main form[data-type="joinus"] .formBox .pswTd td input,
            #main form[data-type="joinus"] .formBox .pswCon td input {
                width: 100% !important;
            }

            #main form[data-type="joinus"] .formBox .add03 td input,
            #main form[data-type="joinus"] .formBox .add04 td input,
            #main form[data-type="joinus"] .formBox .add05 td input,
            #main form[data-type="joinus"] .formBox .phoneRow td input,
            #main form[data-type="joinus"] .formBox .emailRow td input,
            #main form[data-type="joinus"] .formBox .emailConfirmRow td input {
                width: calc(100% - 4.2em) !important;
            }

            #main form[data-type="joinus"] .formBox .pswTd td,
            #main form[data-type="joinus"] .formBox .pswCon td {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: center;
                column-gap: 8px;
            }

            #main form[data-type="joinus"] .formBox .pswTd td input,
            #main form[data-type="joinus"] .formBox .pswCon td input {
                width: 100% !important;
                min-width: 0;
            }

            #main form[data-type="joinus"] .formBox .pswTd td .em,
            #main form[data-type="joinus"] .formBox .pswCon td .em {
                margin: 0;
                padding: 0;
                white-space: nowrap;
                text-align: left;
            }

            #main form[data-type="joinus"] .formBox .pswTd td .notes {
                grid-column: 1 / -1;
                margin-top: 8px;
            }

            #main form[data-type="joinus"] .formBox td,
            #main form[data-type="joinus"] .formBox .emailAdd,
            #main form[data-type="joinus"] .formBox td .notes,
            #main form[data-type="joinus"] .formBox td .delTtl,
            #main form[data-type="joinus"] .formBox td .em,
            #main form[data-type="joinus"] .block,
            #main form[data-type="joinus"] .block span,
            #main form[data-type="joinus"] .block label,
            #main form[data-type="joinus"] .insetBox,
            #main form[data-type="joinus"] .insetBox * {
                overflow-wrap: anywhere;
                word-break: break-word;
            }

            #main form[data-type="joinus"] .submit {
                width: 100%;
                max-width: 100%;
                padding: 0;
                box-sizing: border-box;
            }

            #main form[data-type="joinus"] .submit .agree-scroll,
            #main form[data-type="joinus"] .submit #confirmBtn {
                max-width: 100%;
                box-sizing: border-box;
            }
        }

        #main form[data-type="joinus"] .agree-scroll {
            transition: opacity 0.2s ease, filter 0.2s ease;
            border-radius: 4px;
            overflow: hidden;
        }

        #main form[data-type="joinus"] .agree-scroll.is-disabled {
            filter: grayscale(1);
            opacity: 0.7;
        }

        #main form[data-type="joinus"] .agree-scroll.is-disabled span,
        #main form[data-type="joinus"] .agree-scroll.is-disabled input {
            background: #b6b6b6 !important;
            border-color: #b6b6b6 !important;
            color: #fff !important;
            border-radius: 4px !important;
        }

        #main form[data-type="joinus"] #confirmBtn {
            transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
            border-radius: 4px;
        }

        #main form[data-type="joinus"] #confirmBtn:disabled {
            background: #b6b6b6 !important;
            border-color: #b6b6b6 !important;
            color: #fff !important;
            cursor: not-allowed;
            opacity: 1;
            pointer-events: none;
        }

/* ------------------------------------
joinus_conf.html
------------------------------------ */

        @media (min-width: 0) and (max-width: 767px) {
            #main form[data-type="joinus_conf"] .submit {
                margin: 0 auto;
                max-width: 320px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: nowrap;
                gap: 10px;
                padding: 0;
            }

            #main form[data-type="joinus_conf"] .submit li {
                float: none !important;
                margin: 0;
                display: block;
                width: calc((100% - 10px) / 2);
                flex: 0 0 calc((100% - 10px) / 2);
            }

            #main form[data-type="joinus_conf"] .submit input[type="submit"] {
                display: block;
                width: 100% !important;
                max-width: 100%;
            }
        }