/*--------------------------------------------------------ここまで共通----------------------------------------------------*/


/*--------------------------------------------------------ここから960px----------------------------------------------------*/

@media print,
screen and (min-width:960px) {
    .clientform_table {
        margin: 1rem auto;
        width: 70%;
        min-width: 1070px;
    }
    .clientform_table tr {
        width: 100%;
    }
    .form_table tr:nth-child(2n+1) td {
        background-color: #e7e7e7;
    }
    .clientform_table td {
        padding: .5rem;
    }
    .clientform_table th {
        padding: .5rem .5rem .5rem 1.75rem;
    }
    .clientform_table th {
        width: 25rem;
        background-color: #dcffc7;
        border: 1px solid #ccc;
        color: #000;
        vertical-align: middle;
    }
    .clientform_table td {
        padding-left: 1rem;
        border: 1px solid #cccccc;
    }
    .clientform_table td input,
    .clientform_table td .form-textarea {
        border: 1px solid #ccc;
    }
    .clientform_table td input[type=text] {
        width: 25rem;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    .clientform_table td input[type=email] {
        width: 25rem;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    .clientform_table td input[type=tel] {
        width: 25rem;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    .clientform_table td textarea {
        width: 70%;
        height: auto;
    }
    .question {
        display: inline-block;
        width: 20px;
        vertical-align: sub;
        margin-left: .5rem;
    }
    .my-checkbox {
        display: inline;
        position: relative;
        margin: 0 1rem;
        padding-left: 22px;
        cursor: pointer;
        user-select: none;
        /* テキストの選択を防ぐ */
    }
    /* inputは非表示にする */
    .my-checkbox input {
        display: none;
    }
    /* □ */
    .checkmark {
        position: absolute;
        top: 0;
        /* 上からの位置 */
        left: 0;
        height: 22px;
        /* 大きさ */
        width: 22px;
        /* 大きさ */
        border: solid 2px #d4dae2;
        /* 線 */
        border-radius: 4px;
        box-sizing: border-box;
    }
    /* ✓ */
    .checkmark:after {
        content: "";
        position: absolute;
        left: 5px;
        /* チェックの位置 */
        top: 1px;
        /* チェックの位置 */
        width: 6px;
        /* チェックの大きさ */
        height: 10px;
        /* チェックの大きさ */
        border: solid #FFF;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        opacity: 0;
        /* 透明にしておく */
    }
    /* チェックが入ったときの□ */
    .my-checkbox input:checked+.checkmark {
        background: #2e80ff;
        /* チェック時の色 */
        border-color: #2e80ff;
        /* チェック時の色 */
    }
    /* チェックが入ったときの✓ */
    .my-checkbox input:checked+.checkmark:after {
        opacity: 1;
        /* 透明を解除 */
    }
    .ticketList {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .ticketListItem {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 100px;
        width: 100%;
        border-top: solid 1px #000;
        border-bottom: solid 1px #000;
    }
    .ticketListItem label {
        padding: 0 0 0 24px;
        /* ラベルの位置 */
        font-size: 16px;
        line-height: 28px;
        /* ボタンのサイズに合わせる */
        display: inline-block;
        cursor: pointer;
        position: relative;
        margin: auto auto auto 0;
    }
    .ticketListItem label:before {
        content: '';
        width: 24px;
        /* ボタンの横幅 */
        height: 24px;
        /* ボタンの縦幅 */
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgb(255, 255, 255);
        border-radius: 50%;
        border: solid 2px #000;
    }
    .ticketListItem input[type="radio"] {
        display: none;
    }
    .ticketListItem input[type="radio"]:checked+label:after {
        content: '';
        width: 12px;
        /* マークの横幅 */
        height: 12px;
        /* マークの縦幅 */
        position: absolute;
        top: 6px;
        left: 6px;
        background-color: rgb(0, 0, 0);
        border-radius: 50%;
    }
    .ticketDate {
        text-align: right;
    }
}


/*--------------------------------------------------------ここまで960px----------------------------------------------------*/


/*--------------------------------------------------------ここから600px----------------------------------------------------*/

@media screen and (min-width:600px) and (max-width:959px) {
    .clientform_table {
        margin: 1rem auto;
        width: 80%;
        min-width: 810px;
    }
    .clientform_table tr {
        width: 100%;
    }
    .form_table tr:nth-child(2n+1) td {
        background-color: #e7e7e7;
    }
    .clientform_table td {
        padding: .5rem;
    }
    .clientform_table th {
        padding: .5rem .5rem .5rem 1.75rem;
    }
    .clientform_table th {
        width: 25rem;
        background-color: #dcffc7;
        border: 1px solid #ccc;
        color: #000;
        vertical-align: middle;
    }
    .clientform_table td {
        padding-left: 1rem;
        border: 1px solid #cccccc;
    }
    .clientform_table td input,
    .clientform_table td .form-textarea {
        border: 1px solid #ccc;
        width: 100%;
    }
    .clientform_table td input[type=text] {
        width: 25rem;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    .clientform_table td input[type=email] {
        width: 25rem;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    .clientform_table td input[type=tel] {
        width: 25rem;
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    .clientform_table td textarea {
        width: 70%;
        height: auto;
    }
    .question {
        display: inline-block;
        width: 20px;
        vertical-align: sub;
        margin-left: .5rem;
    }
    .my-checkbox {
        display: inline;
        position: relative;
        margin: 0 1rem;
        padding-left: 22px;
        cursor: pointer;
        user-select: none;
        /* テキストの選択を防ぐ */
    }
    /* inputは非表示にする */
    .my-checkbox input {
        display: none;
    }
    /* □ */
    .checkmark {
        position: absolute;
        top: 0;
        /* 上からの位置 */
        left: 0;
        height: 22px;
        /* 大きさ */
        width: 22px;
        /* 大きさ */
        border: solid 2px #d4dae2;
        /* 線 */
        border-radius: 4px;
        box-sizing: border-box;
    }
    /* ✓ */
    .checkmark:after {
        content: "";
        position: absolute;
        left: 5px;
        /* チェックの位置 */
        top: 1px;
        /* チェックの位置 */
        width: 6px;
        /* チェックの大きさ */
        height: 10px;
        /* チェックの大きさ */
        border: solid #FFF;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        opacity: 0;
        /* 透明にしておく */
    }
    /* チェックが入ったときの□ */
    .my-checkbox input:checked+.checkmark {
        background: #2e80ff;
        /* チェック時の色 */
        border-color: #2e80ff;
        /* チェック時の色 */
    }
    /* チェックが入ったときの✓ */
    .my-checkbox input:checked+.checkmark:after {
        opacity: 1;
        /* 透明を解除 */
    }
    .ticketList {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .ticketListItem {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 100px;
        width: 100%;
        border-top: solid 1px #000;
        border-bottom: solid 1px #000;
    }
    .ticketListItem label {
        padding: 0 0 0 24px;
        /* ラベルの位置 */
        font-size: 16px;
        line-height: 28px;
        /* ボタンのサイズに合わせる */
        display: inline-block;
        cursor: pointer;
        position: relative;
        margin: auto auto auto 0;
    }
    .ticketListItem label:before {
        content: '';
        width: 24px;
        /* ボタンの横幅 */
        height: 24px;
        /* ボタンの縦幅 */
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgb(255, 255, 255);
        border-radius: 50%;
        border: solid 2px #000;
    }
    .ticketListItem input[type="radio"] {
        display: none;
    }
    .ticketListItem input[type="radio"]:checked+label:after {
        content: '';
        width: 12px;
        /* マークの横幅 */
        height: 12px;
        /* マークの縦幅 */
        position: absolute;
        top: 6px;
        left: 6px;
        background-color: rgb(0, 0, 0);
        border-radius: 50%;
    }
    .ticketDate {
        text-align: right;
    }
}


/*--------------------------------------------------------ここまで600px----------------------------------------------------*/


/*--------------------------------------------------------ここから599px----------------------------------------------------*/

@media screen and (max-width:599px) {
    .clientform_table {
        margin: 1rem auto;
        width: 95%;
        min-width: 300px;
    }
    .clientform_table tr {
        width: 100%;
    }
    .form_table tr:nth-child(2n+1) td {
        background-color: #e7e7e7;
    }
    .clientform_table td {
        padding: .5rem;
    }
    .clientform_table th {
        padding: .5rem;
    }
    .clientform_table th {
        width: 26%;
        background-color: #dcffc7;
        border: 1px solid #ccc;
        color: #000;
        vertical-align: middle;
    }
    .clientform_table td {
        padding-left: 1rem;
        border: 1px solid #cccccc;
    }
    .clientform_table td input,
    .clientform_table td .form-textarea {
        border: 1px solid #ccc;
        width: 100%;
    }
    .clientform_table td input[type=text] {
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    .clientform_table td input[type=email] {
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    .clientform_table td input[type=tel] {
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    .clientform_table td textarea {
        width: 70%;
        height: auto;
    }
    .question {
        display: inline-block;
        width: 20px;
        vertical-align: sub;
        margin-left: .5rem;
    }
    .my-checkbox {
        display: inline;
        position: relative;
        margin: 0 1rem;
        padding-left: 22px;
        cursor: pointer;
        user-select: none;
        /* テキストの選択を防ぐ */
    }
    /* inputは非表示にする */
    .my-checkbox input {
        display: none;
    }
    /* □ */
    .checkmark {
        position: absolute;
        top: 0;
        /* 上からの位置 */
        left: 0;
        height: 22px;
        /* 大きさ */
        width: 22px;
        /* 大きさ */
        border: solid 2px #d4dae2;
        /* 線 */
        border-radius: 4px;
        box-sizing: border-box;
    }
    /* ✓ */
    .checkmark:after {
        content: "";
        position: absolute;
        left: 5px;
        /* チェックの位置 */
        top: 1px;
        /* チェックの位置 */
        width: 6px;
        /* チェックの大きさ */
        height: 10px;
        /* チェックの大きさ */
        border: solid #FFF;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        opacity: 0;
        /* 透明にしておく */
    }
    /* チェックが入ったときの□ */
    .my-checkbox input:checked+.checkmark {
        background: #2e80ff;
        /* チェック時の色 */
        border-color: #2e80ff;
        /* チェック時の色 */
    }
    /* チェックが入ったときの✓ */
    .my-checkbox input:checked+.checkmark:after {
        opacity: 1;
        /* 透明を解除 */
    }
    .ticketList {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .ticketListItem {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 100px;
        width: 100%;
        border-top: solid 1px #000;
        border-bottom: solid 1px #000;
    }
    .ticketListItem label {
        padding: 0 0 0 24px;
        /* ラベルの位置 */
        font-size: 16px;
        line-height: 28px;
        /* ボタンのサイズに合わせる */
        display: inline-block;
        cursor: pointer;
        position: relative;
        margin: auto auto auto 0;
    }
    .ticketListItem label:before {
        content: '';
        width: 24px;
        /* ボタンの横幅 */
        height: 24px;
        /* ボタンの縦幅 */
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgb(255, 255, 255);
        border-radius: 50%;
        border: solid 2px #000;
    }
    .ticketListItem input[type="radio"] {
        display: none;
    }
    .ticketListItem input[type="radio"]:checked+label:after {
        content: '';
        width: 12px;
        /* マークの横幅 */
        height: 12px;
        /* マークの縦幅 */
        position: absolute;
        top: 6px;
        left: 6px;
        background-color: rgb(0, 0, 0);
        border-radius: 50%;
    }
    .ticketDate {
        text-align: right;
    }
}