@charset "utf-8";

/*
------------------------
table
------------------------
*/

table {
    color: var(--parts-font-color);
    background-color: var(--parts-background-color);
    width: 100%;
    border-radius: 16px;
}

table caption {
    color: var(--second-font-color);
    background-color: var(--second-background-color);
    width: 100%;
    padding: 8px 16px;
    line-height: 24px;
    font-size: 1.1em;
    border-radius: 16px 16px 0 0;
    font-weight: bold;
    text-align: left;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

table caption div {
    display: inline-block;
    position: relative;
}

table caption img {
    height: 24px;
    margin-right: 6px;
}

table caption p {
    line-height: 24px;
    display: inline-block;
}

table caption .band {
    margin-right: 6px;
}

table thead tr {
    color: var(--header-font-color);
    background-color: var(--header-background-color);
    border-bottom: solid 1px var(--border-color);
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
    margin: 8px 16px;
}

table tbody tr {
    padding: 12px;
    margin: 12px;
}

table tr th,
table tr td {
    position: relative;
    vertical-align: middle;
    font-weight: normal;
    line-height: 22px;
    background-clip: padding-box; /* IE edge ボーダー消えるバグ対策 */
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}

table tr th {
    padding: 8px;
    user-select: none;
}

table tr th .js-tooltip div {
    display: flex;
    align-items: center;
    gap: 6px;
}

table tr td {
    padding-top: 8px;
    padding-bottom: 8px;
}

table tr.column td {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

table tr.row td {
    display: flex;
    align-items: center;
    gap: 16px;
}

table tr td input[type="checkbox"],
table tr td input[type="radio"] {
    margin: 6px;
}

table tr td ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

table tr td ul li {
    position: relative;
}

table tr th .link,
table tr td .link {
    cursor: pointer;
    color: var(--link-font-color);
}

table tr th .link>img,
table tr td .link>img,
table tr th .icon-image>img {
    height: 32px;
    margin-right: 6px;
}

table tr th .link>p,
table tr td .link>p,
table tr th .icon-image>p {
    display: inline-block;
    line-height: 32px;
}

table tr th .attention {
    border-radius: 6px;
    margin-left: auto;
}

table tr.border td {
    border-bottom: solid 1px #686868;
}

table tr td .season,
table tr td .day-of-week {
    display: flex;
    flex-wrap: wrap;
}

table tr td .season label {
    width: 70px;
}

table tr td .day-of-week label {
    width: 50px;
}

table tr td .rank label {
    width: 25%;
    display: inline-block;
}

table tr td .state div {
    border: solid 1px var(--second-background-color);
    margin-left: 30px;
    border-radius: 4px;
}

table tr td .state div label {
    margin: 0 4px;
    display: inline-block;
}

table tr th .link-button {
    display: flex;
    gap: 8px;
}

table tr th button>span,
table tr th button>a {
    padding: 2px;
    font-size: 12px;
    line-height: 10px;
}

table tr td button.js-edit-readonly,
table tr td button.js-close-readonly {
    position: absolute;
    top: 2px;
    right: 0;
}

table tr td button.js-edit-readonly img,
table tr td button.js-close-readonly img {
    height: 10px;
    margin-right: 2px;
}

table tr td button.js-edit-readonly p,
table tr td button.js-close-readonly p {
    line-height: 10px;
}

table tr td .request .title {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 8px;
    margin-bottom: 6px;
}

table tr td .request .title-sub {
    font-size: 1em;
    font-weight: bold;
}

table tr td .request div {
    border: solid 1px var(--second-background-color);
    margin-left: 8px;
    margin: 4px 0;
    padding: 0 6px;
}

table tr td.one-row {
    color: var(--third-font-color);
    background-color: var(--third-background-color);
    font-weight: bold;
    border-radius: 4px;
    line-height: 16px;
    padding: 6px !important;
}

table tr td.one-row a {
    color: var(--third-font-color) !important;
}

table tr td.one-row .link>img,
table tr td.one-row .link>p {
    height: 16px;
    line-height: 16px;
}

table tr td .video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 12px;
}

table tr td .video iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

table tr td .user-agent-area {
    margin: 6px 0;
}

table tr td input[type="tel"],
table tr td input.js-number,
table tr td>select.single {
    width: 50%;
}

table tr td .js-count-display:has(+input[type="tel"],+input.js-number) {
    right: 50%;
}


/* sp */

@media only screen and (max-width: 640px) {
    table tr td input[type="tel"],
    table tr td input.js-number,
    table tr td>select.single {
        width: 100%;
    }
    table tr td .js-count-display:has(+input[type="tel"],+input.js-number) {
        right: 0;
    }
}


/* type0 */

table.type0>tbody>tr {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    gap: 12px;
}

table.type0>tbody>tr>th,
table.type0>tbody>tr>td {
    position: relative;
    padding: 8px 0;
}

table.type0>tbody>tr>th {
    min-width: 120px;
    display: flex;
    align-items: center;
    font-weight: bold;
}

table.type0>tbody>tr>td {
    flex-grow: 1;
}

table.type0>tbody>tr>td::-webkit-scrollbar {
    height: 4px;
}

table.type0>tbody>tr>td::-webkit-scrollbar-track {
    background-color: var(--scrollbar-background-color);
    border-radius: 2px;
}

table.type0>tbody>tr>td::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border-radius: 2px;
}

table.type0>tbody>tr>td>a {
    display: flex;
    gap: 8px;
}


/* type1 */
/* type2 */

table.type1>tbody>tr,
table.type2>tbody>tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

table.type1>tbody>tr>th,
table.type2>tbody>tr>th {
    text-align: left;
}

table.type1>tbody>tr>th,
table.type1>tbody>tr>td,
table.type2>tbody>tr>th,
table.type2>tbody>tr>td {
    width: 100%;
}

table.type1>tbody>tr>th,
table.type2>tbody>tr>th {
    color: var(--title-font-color);
    background-color: var(--title-background-color);
    border-radius: 4px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* type1 */
table.type1>tbody>tr>td {
    padding-bottom: 0;
}

table.type1>tbody>tr:last-of-type>td {
    padding-bottom: 0;
}

table.type2>tbody>tr {
    gap: 8px;
    padding: 0;
    margin: 8px 16px;
}

table.type2>tbody>tr>td input.js-number {
    width: 100%;
}

table.type2>tbody>tr>td .js-count-display:has(+input.js-number) {
    right: 0;
}


/* type3 */

table.type3>thead>tr {
    padding-top: 8px;
    padding-bottom: 8px;
}

table.type3>tbody>tr:nth-of-type(2n+1) {
    background-color: var(--table-tr-background-color);
}

table.type3>tbody>tr:last-of-type {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

table.type3>thead>tr,
table.type3>tbody>tr {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

table.type3>thead>tr>td,
table.type3>tbody>tr>td {
    flex-basis: 122px;
    flex-shrink: 0;
    flex-grow: 1;
    font-weight: bold;
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
}

table.type3>thead>tr .content,
table.type3>tbody>tr .content {
    flex-grow: 1;
    flex-basis: 350px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

table.type3>thead>tr .content .label span,
table.type3>tbody>tr .content .label span {
    display: inline-block;
    padding: 6px 16px;
    line-height: 12px;
    border-radius: 4px;
}

table.type3>thead>tr .content .list-detail,
table.type3>tbody>tr .content .list-detail {
    flex-grow: 1;
}

table.type3>thead>tr .rank,
table.type3>tbody>tr .rank {
    flex-basis: 100px;
    flex-shrink: 0;
    flex-grow: initial;
}

table.type3>thead>tr>td.rank>p,
table.type3>tbody>tr>td.rank>p {
    color: var(--third-font-color);
    background-color: var(--third-background-color);
    border: solid 1px var(--third-background-color);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin: 0 auto;
}


/* type4 */

table.type4 {
    border: solid 1px var(--gray-out-border-color);
    border-radius: 0;
}

table.type4 tr {
    display: flex;
    padding: 0;
    margin: 0;
}

table.type4 tr.total {
    color: var(--content-font-color);
    background-color: var(--content-background-color);
}

table.type4 tr>td {
    flex-basis: 130px;
    flex-shrink: 0;
    flex-grow: 1;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
}

table.type4>thead>tr>td {
    color: var(--gray-out-font-color);
    background-color: var(--gray-out-background-color);
    border: solid 1px var(--gray-out-border-color);
}


/* week */

table.week tr:nth-of-type(2n) {
    background-color: var(--table-tr-background-color);
}

table.week tr td {
    border-right: solid 1px var(--gray-out-border-color);
    border-bottom: solid 1px #FFFFFF;
}

table.week tr td:last-of-type {
    border-right: none;
}

table.week tr:last-of-type td {
    border-bottom: none;
}

table.week tr td.bg {
    background-color: #E2EEFF;
}

table.week tr td.bg1 {
    background-color: #C9DFFF;
}

table.week tr td.bg2 {
    background-color: #B5D3FF;
}

table.week tr td.bg3 {
    background-color: #A1C7FF;
}

table.week tr td.bg4 {
    background-color: #90BDFF;
}

table.week tr td.bg5 {
    background-color: #7AB0FF;
}

table.week tr td.bg6 {
    background-color: #67A5FF;
}

table.week tr td.bg7 {
    background-color: #5097FF;
}

table.week tr td.bg8 {
    background-color: #3788FF;
}

table.week tr td.bg9 {
    background-color: #247DFF;
}

table.week tr td.bg10 {
    background-color: #0068FF;
}


/* child-item */

table.child-item>tbody>tr {
    display: flex;
}

table.child-item>tbody>tr>th {
    width: 100px;
    padding: 8px;
    vertical-align: top;
}

table.child-item>tbody>tr>th button[type="button"] {
    margin-bottom: 6px;
}

table.child-item>tbody>tr>th .square-area {
    max-width: 100px;
}

table.child-item>tbody>tr>td {
    display: flex;
    flex-grow: 1;
    gap: 8px;
}

table.child-item>tbody>tr>td .js-checkbox {
    margin: 0;
}

table.child-item>tbody>tr>td>div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 50%;
}

table.child-item>tbody>tr>td>div .small-label {
    margin-right: 8px;
}


/* x-scroll */

.x-scroll {
    overflow-x: scroll;
    padding-bottom: 6px;
    margin-bottom: 6px;
}

.x-scroll::-webkit-scrollbar {
    height: 12px;
}

.x-scroll::-webkit-scrollbar-track {
    background-color: var(--scrollbar-background-color);
    border-radius: 6px;
}

.x-scroll::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border-radius: 6px;
}


/* address-area */
table tr td .address-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

table tr td .address-area .postcode-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

table tr td .address-area .postcode-area input {
    width: 60px;
}

table tr td .address-area .postcode-area div {
    width: fit-content;
}

table tr td .address-area select {
    width: 140px;
}


/* date-select-area */
table tr td .date-select-area,
table tr td .date-select-area select {
    margin-right: 12px;
}

table tr td .date-select-area select {
    width: 75px;
}

table tr td .date-select-area.year select {
    width: 80px;
}

table tr td .date-select-area .js-input-area {
    display: inline;
}

table tr td .date-select-area:last-of-type {
    margin-right: 0;
}


/* select select-matrix */

table tr td .select>p,
table tr td .select-matrix>p {
    line-height: 20px;
    margin-bottom: 8px;
}

table tr td .select>p:last-of-type,
table tr td .select-matrix>p:last-of-type {
    margin-bottom: 0;
}

table tr td .select>p>span,
table tr td .select-matrix>p>span {
    color: var(--second-font-color);
    background-color: var(--second-background-color);
    border-radius: 2px;
    padding: 2px 8px 1px;
    margin-right: 8px;
}