/* public/css/apl.css アプリ用css copyright itcore */
html {
    scroll-behavior: auto !important;
    /* スパッとページ内ジャンプする。*/
}

body {
    word-break: break-all;
    padding: 5px;
}

h1 {
    background: aquamarine;
    font-size: 20px;
    /* font-size: clamp(24px, 5vw, 48px); */
}

h2 {
    background: pink;
    font-size: 18px;
}

h3 {
    background: lightyellow;
    font-size: 16px;
}

h4 {
    background: gold;
    font-size: 14px;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    padding: 5px 10px 5px;
    border-radius: 5px;
    /* width: 100%; */
    /* white-space: nowrap; */
    /* display: block; */
    /* min-width: 0; */
}

h2 a,
h3 a {
    font-size: 16px;
}

table,
th,
td {
    border-collapse: collapse;
    margin: 5px;
    border: 1px solid gray;
    padding: 5px;
}

th {
    background: #68be8d !important;
    color: white !important;
}

.table_子供 th {
    background: lightblue !important;
    color: black !important;
}

.table_検索 th {
    background: lightgreen !important;
    color: black !important;
}

.th_input {
    background: pink !important;
    color: black !important;
}

/* input {
    margin: 5px;
} */

textarea {
    resize: both;
}

.checkbox_label {
    cursor: pointer;
    margin-top: 5px;
    /* padding-top: 10px; */
}

.er {
    position: relative;
    margin: 10px;
}

.er-yoko {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.er-box {
    border: 1px solid black;
    position: absolute;
    text-align: center;
    width: 200px;
    height: 50px;
    line-height: 50px;
    /* padding: 20px; */
    /* margin: 0 50px; */
    margin: 0;
    padding: 0;
    /* background-color: lightgray; */
}

.er-yokosen {
    content: '';
    position: absolute;
    margin: 0;
    padding: 0;
    height: 1px;
    width: 200px;
    background-color: black;
}

.er-tatesen {
    content: '';
    position: absolute;
    margin: 0;
    padding: 0;
    height: 25px;
    width: 1px;
    background-color: black;
}

/* DataTables */
.dataTables_wrapper .dataTables_length {
    float: none;
    display: inline-block;
}

.dataTables_wrapper .dataTables_filter {
    margin-left: 10px;
    width: 380px;
    text-align: left;
    float: none;
    display: inline-block;
}

.dataTables_filter input {
    background: #fff
}

.table.dataTable {
    margin: 0;
}

.table-hover {
    >tbody>tr:hover>* {
        background-color: #ccffff;
    }
}

/* .datatable-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.datatable-header {
    margin-bottom: 10px;
} */

.div_msg {
    font-weight: bold;
    color: green;
    background-color: yellow;
    margin: 10px;
}

.div_err {
    font-weight: bold;
    color: red;
    background-color: yellow;
    margin: 10px;
}

.form_item {
    /* font-size: 16px; */
    font-weight: bold;
}

/* ボタン風のチェックボックス */
.checkbox_button_group {
    display: flex;
    gap: 8px;
}

.checkbox_button_group input[type="checkbox"],
.checkbox_button_group input[type="radio"] {
    /* display: none; */
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.checkbox_button_group label {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f9f9f9;
    color: #333;
    cursor: pointer;
    user-select: none;
    text-align: center;
    min-width: 60px;
}

/* 選択時のスタイル */
.checkbox_button_group input[type="checkbox"]:checked+label,
.checkbox_button_group input[type="radio"]:checked+label {
    background-color: #4CAF50;
    color: #fff;
    border-color: #4CAF50;
}

.btn {
    margin: 5px;
}

/* レスポンシブル */
/* 小画面（iPhone SEなど） */
@media (max-width: 375px) {

    .r20px,
    .btn {
        font-size: 32px;
    }

    .r16px,
    .btn-sm {
        font-size: 28px;
    }

    .r14px {
        font-size: 26px;
    }

    input[type="checkbox"] {
        transform: scale(2.0);
        position: relative;
        top: -5px;
        margin: 0 3px 0 8px;
    }
}

/* 中画面（iPhone 16eなど） */
@media (min-width: 376px) and (max-width: 767px) {
    .r20px {
        font-size: 28px;
    }

    .r16px,
    .btn-sm {
        font-size: 24px;
    }

    .r14px {
        font-size: 22px;
    }

    input[type="checkbox"] {
        transform: scale(1.8);
        position: relative;
        top: -2px;
        margin: 0 3px 0 8px;
    }
}

/* タブレット（iPadなど） */
@media (min-width: 768px) and (max-width: 1024px) {
    .r20px {
        font-size: 24px;
    }

    .r16px,
    .btn-sm {
        font-size: 20px;
    }

    .r14px {
        font-size: 18px;
    }

    input[type="checkbox"] {
        transform: scale(1.6);
        position: relative;
        top: 0px;
        margin: 0 3px 0 8px;
    }
}

/* PC向け（デフォルト or min-width: 1025px） */
@media (min-width: 1025px) {
    .r20px {
        font-size: 20px;
    }

    .r16px,
    .btn-sm {
        font-size: 16px;
    }

    .r14px {
        font-size: 14px;
    }

    input[type="checkbox"] {
        transform: scale(1.4);
        position: relative;
        top: 0px;
        margin: 0 3px 0 8px;
    }
}