@charset "UTF-8";
/*---------------------------------
Font
---------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');

/*---------------------------------
Variable
---------------------------------*/

:root{
    --color-primary: #009176;
    --color-primary-rgb: 0, 145, 118;

    --color-secondary: #98B0A8;
    --color-secondary-rgb: 152, 176, 168;
    
    --color-red: #BF5846;
    --color-red-rgb: 191, 88, 70;

    --color-bl: #2B86C4;
    --color-bl-rgb: 43, 134, 196;

    --color-or: #FB8757;
    --color-or-rgb: 251, 135, 87;

    --color-gry01: #F3F4F3;
    --color-gry01-rgb: 243, 244, 243;

    --color-gry02: #D3DAD8;
    --color-gry02-rgb: 211, 218, 216;

    /* secondaryの不透明度20% */
    --color-gry03: #E1E6E4;
    --color-gry03-rgb: 225, 230, 228;

    --color-bk: #364B44;
    --color-bk-rgb: 54, 75, 68;

    --color-wh: #fff;
    --color-wh-rgb: 255,255,255;


    --box-shadow-btn: 0 2px 10px rgba(var(--color-bk-rgb),.2);
    --box-shadow-bk-shade: 0 4px 4px rgba(var(--color-bk-rgb),.2);

    --font-default: "Outfit", "Zen Kaku Gothic New", sans-serif;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;


    --font-size-s : 1.2rem;
    --font-size-m : 1.4rem;
    --font-size-l : 1.6rem;
    --font-size-xl : 1.8rem;
    
}
@media (768px <= width) {
    :root {
        --font-size-s : 1.4rem;
        --font-size-m : 1.6rem;
        --font-size-l : 1.8rem;
        --font-size-xl : 2rem;
    }
}

/*---------------------------------
Default
---------------------------------*/
html {
    margin: 0;
    padding: 0;
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    width: 100%;
    height: 100%;
    background-color: var(--color-gry01);
    scroll-behavior: smooth;
    /* scroll-padding: 100px; */
}

body {
    margin: 0;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-default);
    color: var(--color-bk);
    height: 100%;
    width: 100%;
    font-size: 1.4rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

ol {
    padding-left: 1.6rem;
}

img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

p {
    font-size: inherit;
    margin: 0;
    font-weight: inherit;
}

h1, h2, h3, h4 {    
    color: inherit;
    margin: 0;
    font-size: inherit;
    font-weight: var(--font-weight-bold);
}
button {
    background: none;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

dl, dd {
    margin: 0;
}

:where(input:not(.set_default):not([type="radio"])) {
    margin: 0;
    padding: 0;
    background: inherit;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
}
:where(input[type="date"]:not(.set_default))  {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}
:where(input[type="time"]:not(.set_default))  {
    width: 6em;
}
:where(select:not(.set_default)) {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}
:where(textarea:not(.set_default)) {
    cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

label {
    cursor: pointer;
}
/*---------------------------------
 utility
---------------------------------*/

.display_pc {
    display: none;
}
.display_sp {
    display: block;
}

.wbr {
    word-break: keep-all;
    overflow-wrap: break-word;
}

.inline_block {
    display: inline-block;
}

.c_bk {
    color: var(--color-bk);
}
.c_wh {
    color: var(--color-wh);
}
.c_red {
    color: var(--color-red);
}
.c_bl {
    color: var(--color-bl);
}
.c_primary {
    color: var(--color-primary);
}
.c_second {
    color: var(--color-secondary);
}
.c_win {
    color: #4ca99f;
}
.weight_b {
    font-weight: var(--font-weight-bold);
}

.flex_between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex_left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.column_center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.size_s {
    font-size: 0.8em;
}
.size_m {
    font-size: 1.2em;
}
.size_l {
    font-size: 1.4em;
}

.txt_left {
    text-align: left;
}
.txt_right {
    text-align: right;
}
.txt_center {
    text-align: center;
}


@media (768px <= width) {
    .display_pc {
        display: block;
    }
    .display_sp {
        display: none;
    }
}
/*---------------------------------
 page common
---------------------------------*/
.body_wrap {
    min-height: 100vh;
    /* display: flex;
    flex-direction: column;
    justify-content: space-between; */
    display: flex;
    flex-direction: column;
}
main {
    flex: 1;
}
.main {
    padding: 56px 0;
}

.page_user_common {
    width: min(94%, 600px);
    margin: 0 auto;
}

.page_user_common.full {
    width: 94%;
}

/* title */
.page_ttl {
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0 auto 2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.body_wrap:has(header) .page_ttl {
    margin: 0 0 2em 0;
    justify-content: flex-start;
}

.page_ttl i {
    font-size: 1.4em;
    margin-right: 0.3em;
    color: var(--color-secondary); 
}

.sec_ttl {
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 2em 0 1em;
    display: inline-flex;
    align-items: center;
}

.page_ttl + .sec_ttl {
    margin-top: 0;
}

.sec_ttl i {
    font-size: 1.4em;
    margin-right: 0.3em;
}

/* btn */

.btn_common {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    min-width: 49.5%;
    text-align: center;
    margin: 0 auto;
    padding: 0.8em 1em;
    border-radius: 4px;
    box-shadow: var(--box-shadow-btn);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-l);
    white-space: normal;
    letter-spacing: 0.1em;
}

.btn_common i {
    font-size: 1.4em;
    margin-right: .3em;
}
.btn_common_flex {
    display: flex;
    gap: 5px;
}

.btn_common_flex > * {
    flex: 1;
}

/* 背景なし */
.btn_link_line {
    display: inline-block;
    padding: 0.4em 1em;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    border-radius: 4px;
    font-weight: var(--font-weight-bold);
}

/* スリム */
.btn_common_slim {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    width: fit-content;
    text-align: center;
    padding: 0.5em 2em;
    border-radius: 4px;
    box-shadow: var(--box-shadow-btn);
    font-size: var(--font-size-s);
    background-color: var(--color-wh);
    color: var(--color-bk);
}

.btn_common_slim.copy::before {
    font-family: 'Font Awesome 7 Free';
    content:'\f0c5';
    font-weight: 400;
}


.btn_primary {
    background-color: var(--color-primary);
    color: var(--color-wh);
}
.btn_wh {
    background-color: var(--color-wh);
    color: var(--color-primary);
}
.btn_or {
    background-color: var(--color-or);
    color: var(--color-wh);
}
.btn_bk {
    background-color: var(--color-bk);
    color: var(--color-wh);
}
.btn_second {
    background-color: var(--color-secondary);
    color: var(--color-wh);
}
.btn_red {
    background-color: var(--color-red);
    color: var(--color-wh);
}
.btn_bl {
    background-color: var(--color-bl);
    color: var(--color-wh);
}
.btn_gry02 {
    background-color: var(--color-gry02);
    color: var(--color-bk);
}

/* 過去の予約履歴 */
.btn_history_prev {
    display: inline;
    margin: 0 0 0 2em;
}

/* 同意チェック */
.checkbox_common {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    margin: 1em 0 2em;
    user-select: none;
}

.checkbox_common .check_wrap {
    position: relative;
    z-index: 0;
    width: 2em;
    height: 2em;
    background-color: var(--color-wh);
    box-shadow: var(--box-shadow-bk-shade);
    border-radius: 4px;
}

.checkbox_common .check_wrap:has(input:checked)::before {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    font-family: 'Font Awesome 7 Free';
    content:'\f00c';
    color: var(--color-red);
    font-weight: 900;
    font-size: 1.2em;
    text-align: center;
    translate: -50% -50%;
}

/* タブボックス */

.common_tab_wrap {
    margin: 5em 0 3em;
    padding: 2em 1em;
    background-color: var(--color-wh);
    box-shadow: var(--box-shadow-bk-shade);
    border-radius: 0 4px 4px 4px;
    position: relative;
    z-index: 1;
    font-size: var(--font-size-s);
    text-align: center;
}

.common_tab_wrap .ttl {
    padding: 0.5em 1em;
    background-color: var(--color-bl);
    border-radius: 4px 4px 0 0;
    font-size: 1.4rem;
    color: var(--color-wh);
    position: absolute;
    top: 0;
    left: 0;
    translate: 0 -100%;
    z-index: 0;
}

.common_tab_wrap .ttl.bg_bk {
    background-color: var(--color-bk);
}

.common_tab_wrap .guide {
    margin: 0.5em auto;
    width: fit-content;
}

.line_box_list {
    display: flex;
    flex-wrap: wrap;
}

.line_box_list > * {
    width: 100%;
    text-align: left;
}
.line_box_list dt {
    display: inline-flex;
    align-items: center;
}
.line_box_list dt i {
    font-size: 1.4em;
    margin-right: 0.3em;
    color: var(--color-secondary);
}
.line_box_list dd {
    padding: .8em 1em 0 2em;

}
.line_box_list dd + dt {
    margin: 2em 0 0;
}
.line_box_list .mail {
    -moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
    border: 1px solid var(--color-gry02);
    font-family: inherit;
    color: inherit;
    padding: .5em;

    width: 100%;
}
.line_box_list .mail:focus {
	border: 1px solid var(--color-gry02);
	box-shadow: none;
	outline: none;
}
/* 実線ボックス */
.common_line_box {
    border: 1px solid var(--color-secondary);
    padding: 2em 1em;
}

.common_line_box + .common_line_box {
    margin-top: 1em;
}

.common_line_box_ttl {
    color: var(--color-secondary);
    font-size: 1.6rem;
    margin: 0 0 0.5em;
}

/* パンくず */
.breadcrumbs {
    color: var(--color-secondary);
    margin-bottom: 1em;
}

.breadcrumbs > * {
    display: inline;
}

.breadcrumbs > a {
    text-decoration: underline;
}

/* 汎用リスト */
.common_dl_list {
    border: 1px solid var(--color-gry03);
    font-size: var(--font-size-s);
    display: flex;
    flex-wrap: wrap;
}

.common_dl_list dt {
    background-color: var(--color-gry03);
    border-bottom: 1px solid var(--color-wh);
    color: var(--color-bk);
    width: 12em;
    padding: 0.8em 0.8em;
    display: flex;
    align-items: center;
}

.common_dl_list dd {
    padding: 0.8em 0.8em;
    width: calc(100% - 12em);
    background-color: var(--color-wh);
    border-bottom: 1px solid var(--color-gry03);
}

.common_dl_list dt:last-of-type,
.common_dl_list dd:last-of-type {
    border: none;
}

.common_dl_list .width_100 {
    width: 100%;
}

@media (min-width: 768px) {
    .page_ttl, .sec_ttl {
        font-size: 1.8rem;
    }
}
@media (min-width: 1024px) {

    :root {
        --side-width: 200px;
    }
    
    /* headerがないページとの条件分岐 */
    .body_wrap:has(header) main {
        /* 左寄せにするとき */
        padding-left: calc(var(--side-width) + 40px);
        /* 真ん中寄せ */
        /* padding-left: var(--side-width); */
    }

    .body_wrap:has(header) .page_user_common {
        /* 左寄せにするとき */
        margin: 0;
    }

    .body_wrap:has(header) .page_user_common .full {
        width: 98%;
    }

}
/*---------------------------------
header
---------------------------------*/

header {
    width: fit-content;
    max-width: 20em;
    height: 100vh;
    padding: 0 14px 12px;
    background-color: var(--color-wh);
    border-radius: 10px 0 0 10px;
    box-shadow: -4px 0 4px rgba(var(--color-bk-rgb),.1);
    
    display: flex;
    flex-direction: column;
    translate: calc(100% + 4px) 0;
    transition: translate .3s ease-in-out;

    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;

    overflow-y: scroll;
}

header.active {
    translate: 0;
}

.head {
    background-color: var(--color-wh);
    width: 100%;
    padding: 12px 0 24px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.header_logo img {
    height: 48px;
    width: auto;
    max-width: calc(100% - 72px);
    object-fit: contain;
}

.header_login_data {
    width: 100%;
    border-radius: 4px;
    padding: 8px 10px;
    margin: 20px 0 0;
    background-color: var(--color-gry03);
}

.header_login_data p {
    font-size: 1.2rem;
}
.header_login_data .name {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}


.header_nav_list {
    display: flex;
    flex-direction: column;
    position: relative;
}

.header_nav_list li {
    border-bottom: 1px solid rgba(var(--color-bk-rgb), .2);
}

.header_nav_list li.cat {
    padding: 3em 0 1em;
}

.header_nav_list li a {
    padding: 1em 0;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.header_nav_list li:last-of-type a {
    border: none;
}

.header_nav_list i {
    font-size: 1.4em;
    margin-right: 0.5em;
    color: var(--color-secondary);
}

.btn_close_nav {
    height: 56px;
    min-height: 56px;
    width: 112px;
    border: 1px solid var(--color-bk);
    border-radius: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 1.6rem;
    margin: 40px auto 10px;
    cursor: pointer;
}


.btn_header_sp {
    position: fixed;
    top: 12px;
    right: 12px;
    width: 50px;
    height: 34px;
    background-color: var(--color-secondary);
    border-radius: 4px;
    z-index: 10;

    cursor: pointer;
}

.btn_header_sp span {
    height: 2px;
    width: 24px;
    background-color: var(--color-wh);
    border-radius: 9999px;
    position: absolute;
    left: 50%;
    translate: -50% 0;
    transition: .3s ease-in-out;
}

.btn_header_sp span:first-child {    
    top: 12px;
}
.btn_header_sp span:last-child {
    bottom: 12px;
}

.btn_header_sp.active span:first-child {
    rotate: -30deg;
    top: 50%;
    translate: -50% -50%;
}

.btn_header_sp.active span:last-child {
    rotate: 30deg;
    bottom: 50%;
    translate: -50% 50%;
}

@media (min-width: 1024px) {
    header {
        width: var(--side-width);
        right: auto;
        left: 0;
        translate: 0;
        border-radius: 0 10px 10px 0;
        box-shadow: 4px 0 4px rgba(var(--color-bk-rgb),.1);

    }
    .btn_header_sp, .btn_close_nav {
        display: none;
    }

    .header_logo.manager img {
        max-width: 100%;
        height: auto;
    }

}
/*---------------------------------
 Footer
---------------------------------*/
.footer {
    text-align: center;
    font-size: 1.2rem;
    padding: 1.5em 0;
    color: var(--color-secondary);
    background: var(--color-gry03);
}

@media (min-width: 1024px) {
    .body_wrap:has(header) .footer {
        padding-left: calc(var(--side-width) + 40px);
    }
}
/*---------------------------------
 Login
---------------------------------*/
.login_logo {
    width: min(100%, 240px);
    height: 80px;
    margin: 0 auto 2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login_logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.signup_link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em;
    margin: 2em auto 0;
    padding: 2em 0 0;
    border-top: 1px solid rgba(var(--color-bk-rgb),.1);
    justify-content: center;
    text-align: center;
}
/*---------------------------------
 Mypage
---------------------------------*/
/* カレンダー */
.calendar_guide {
    background-color: var(--color-gry03);
    padding: 0.6em 1em;
    margin: 1em 0;
}

.calendar_guide p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 1em;
}

.calendar_guide span {
    font-size: var(--font-size-s);
    display: inline-flex;
    align-items: center;
}

.calendar_guide span i {
    font-size: 1.5em;
}

.calendar_guide span .triangle {
    width: 1.8em;
    height: 1.8em;
}

.calendar_month_wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 32px 0 10px;
    padding: 0 4%;
}

.common_form_wrap .calendar_month_wrap {
    margin: 0 0 10px;
}

.btn_calendar_prev {
    color: var(--color-secondary);
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding-bottom: 1em;
}

.btn_calendar_prev::before {
    content: "";
    height: 32px;
    width: 16px;
    background: url(../img/arrow_gray.svg) center / contain no-repeat;
    rotate: 180deg;
}

.calendar_month_now {
    font-size: 5rem;
    line-height: 1;
    color: var(--color-secondary);
    text-align: center;
}
.calendar_month_now .year {
    font-size: 0.3em;
    display: block;
}
.btn_calendar_next {
    color: var(--color-secondary);
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding-bottom: 1em;
}

.btn_calendar_next::after {
    content: "";
    height: 32px;
    width: 16px;
    background: url(../img/arrow_gray.svg) center / contain no-repeat;
}

.calendar_box .table {
    width: 100%;
    color: var(--color-secondary);
}

.calendar_box .day_week {
    width: 100%;
    display: flex;
    border-bottom: 1px solid var(--color-gry03);
}

.calendar_box .day_week > div {
    flex: 1;
    font-size: 1.6rem;
    padding: 0.5em 0;
    text-align: center;
}

.calendar_box .day {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar_box .day > div {
    padding: 0.8em 0 0;
    text-align: center;
    font-size: var(--font-size-s);
}

.calendar_box .day .white_space {
    display: flex;
    justify-content: center;
    align-items: center;
}


.calendar_reserve_status {
    width: 70%;
    min-width: 2em;
    max-width: 3em;
    height: auto;
    aspect-ratio: 1 / 1;
    text-align: center;
    font-size: 1.6rem;
    margin: 0.3em auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.calendar_reserve_status:has(a) {
    background-color: var(--color-wh);
    border-radius: 4px;
    box-shadow: var(--box-shadow-bk-shade);
}

.calendar_reserve_status a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    color: var(--color-primary);
}

.calendar_reserve_status .fa-circle {
    color: var(--color-red);
}

.triangle polygon {
    fill: none;
    stroke: #b2af00;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.calendar_reserve_status .triangle {
    width: 1.2em;
    height: 1.2em;
}

@media (min-width: 768px) {
    .calendar_month_now {
        font-size: 6rem;
    }
}
@media (min-width: 1024px) {
    .day > div {
        font-size: 1.6rem;
    }
}

/*---------------------------------
 予約履歴
---------------------------------*/
.history_item {
    background-color: var(--color-wh);
    box-shadow: var(--box-shadow-bk-shade);
    padding: 1em;
    position: relative;
    display: block;
    font-size: 1.2rem;
}

.history_item + .history_item {
    margin-top: 1em;
}

.history_item .status {
    padding: 0.2em .6em;
    margin-bottom: .5em;
    color: var(--color-wh);
    display: inline-block;
}

.history_item .status.waiting {
    background-color: var(--color-bl);
}
.history_item .status.unpaid {
    background-color: var(--color-red);
}
.history_item .status.visited {
    background-color: var(--color-gry02);
    color: var(--color-bk);
}
.history_item .status.finish {
    background-color: var(--color-gry02);
    color: var(--color-bk);
}

.history_item .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.1em 0.3em;
    width: calc(100% - 80px);
}

.history_item .list dt {
    width: 4.5em;
}

.history_item .list dd {
    width: calc(100% - 4.5em - 1em);
}

.history_item .list .size_s {
    font-size: 0.8em;
}

.history_item .link {
    color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5em;
    position: absolute;
    top: 50%;
    right: 1em;
    translate: 0 -50%;
    font-size: 1rem;
    text-align: center;
}
.history_item .link::after {
    content: "";
    height: 32px;
    width: 16px;
    background: url(../img/arrow_primary.svg) center / contain no-repeat;
}

@media (min-width: 768px) {
    .history_item, .history_item .link {
        font-size: 1.4rem;
    }
}

/*---------------------------------
 予約詳細
---------------------------------*/
/* 詳細 */
.reserve_detail_wrap {
    background-color: var(--color-gry03);
    padding: 1em;
    font-size: 1.2rem;
}

.reserve_detail_wrap .status {
    padding: 0.2em .6em;
    margin-bottom: .5em;
    color: var(--color-wh);
    display: inline-block;
}

.reserve_detail_wrap .status.waiting {
    background-color: var(--color-bl);
}
.reserve_detail_wrap .status.unpaid {
    background-color: var(--color-red);
}
.reserve_detail_wrap .status.visited {
    background-color: var(--color-gry02);
    color: var(--color-bk);
}
.reserve_detail_wrap .status.finish {
    background-color: var(--color-gry02);
    color: var(--color-bk);
}

.reserve_detail_wrap .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.reserve_detail_wrap .list dt {
    width: 8em;
    padding: 0.3em 0.5em;
}
.reserve_detail_wrap .list dd {
    width: calc(100% - 8em);
    padding: 0.3em 0.8em;
}

.reserve_detail_wrap .list.middle {
    margin: 0.5em 0;
}
.reserve_detail_wrap .list.middle dt {
    background-color: var(--color-gry02);
}

.reserve_detail_wrap .list.middle dd {
    background-color: var(--color-gry01);
}

.reserve_detail_wrap .list.bottom {
    align-items: center;
}
.reserve_detail_wrap .list.bottom dt {
    padding: 0.3em;
}

.reserve_detail_wrap .list.bottom dd {
    text-align: right;
    padding: 0.3em;
}
.reserve_detail_wrap .list.bottom dt.amount {
    font-size: 1.2em;
}
.reserve_detail_wrap .list.bottom dd.amount {
    font-size: 1.8em;
}

/* QR */

.btn_common + .qr_wrap {
    margin: 2em auto 0;
}
.qr_wrap:has( + .guide) {
    margin: 0 auto 2em;
}

.reserve_qr_wrap .qr_code {
    width: min(55%, 300px);
}

/* 予約キャンセル */
.reserve_cancel_wrap .ttl {
    padding: 0.5em 1em;
    border: 1px solid var(--color-red);
    text-align: center;
    color: var(--color-red);
}

.reserve_cancel_wrap .inner {
    padding: 1em 0.6em 0;
}

.reserve_cancel_wrap .guide {
    font-size: var(--font-size-s);
}

/*---------------------------------
 予約譲渡
---------------------------------*/
.transfer_wrap {
    margin: 3em 0;
}
.transfer_wrap .ttl {
    background-color: var(--color-bk);
}
.transfer_wrap .guide {
    margin: 0 0 1em;
}

.transfer_wrap #copyMsg {
    margin-left: 1em;
    opacity: 0;
    transition: opacity .3s;
}

.transfar_detail_ttl {
    color: var(--color-secondary);
    font-size: 1.6rem;
    margin: 0 0 0.5em;
    font-weight: var(--font-weight-medium);
}

.reserve_detail_wrap .btn_return {
    margin: 1em auto 0;
}
/* 受け取りページ */
.transfar_receive_wrap {
    padding: 1.5em 1em;
    margin: 2em 0 0;
    background-color: var(--color-wh);
    box-shadow: var(--box-shadow-bk-shade);
    border-radius: 4px;
}

.transfar_receive_wrap .ttl {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.transfar_receive_wrap .guide {
    font-size: var(--font-size-s);
    margin: 1em 0 2em;
}

.transfar_receive_wrap .form_item {
    margin-bottom: 2em;
}
/*---------------------------------
 フォーム共通
---------------------------------*/
.form_center {
    margin: 0 auto;
}
.form_item {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.form_item + .form_item {
    margin-top: 1.5em;
}

.form_item .form_label {
    color: var(--color-primary);
}

.form_item .form_label:has( > i) {
    display: inline-flex;
    align-items: center;
}

.form_item .form_label i {
    margin-right: .3em;
    font-size: 1.4em;
}
.form_item .form_input {
    background-color: var(--color-wh);
    border: 1px solid var(--color-secondary);
    border-radius: 4px;
    box-shadow: var(--box-shadow-bk-shade);
    padding: 0.8em 1em;
    width: 100%;
}
.form_item .form_input_date {
    background-color: var(--color-wh);
    border: 1px solid var(--color-secondary);
    border-radius: 4px;
    box-shadow: var(--box-shadow-bk-shade);
    padding: 0.3em;
}
.form_item .form_input[type="time"] {
    width: 8em;
}
.common_form_wrap {
    padding: 1.5em 1em 2em;
    background-color: var(--color-wh);
    box-shadow: var(--box-shadow-bk-shade);
    border-radius: 4px;
}

.form_select {
    background-color: var(--color-wh);
    border: 1px solid var(--color-secondary);
    border-radius: 4px;
    box-shadow: var(--box-shadow-bk-shade);
    padding: 0.8em 1em;
    min-width: 5em;
    text-align: center;
    width: 100%;
    max-width: 20em;
}

.common_form_wrap .guide + * {
    margin-top: 2em;
}

.form_unit {
    margin-left: 1em;
    display: inline-flex;
    align-items: center;
}

.form_textarea {
    background-color: var(--color-wh);
    border: 1px solid var(--color-secondary);
    border-radius: 4px;
    box-shadow: var(--box-shadow-bk-shade);
    padding: 0.5em;
    width: 100%;
    /* max-width: 40em; */
}
.confirm_item {
    
    width: 100%;
}
.confirm_item:has( > i) {
    display: inline-flex;
    align-items: center;
}

.confirm_item + .confirm_item {
    margin-top: 0.6em;
}

.confirm_item i {
    margin-right: .6em;
    font-size: 1.4em;
}

.form_guide_in {
    font-size: 0.75em;
}

.form_item .input_list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4em 1em;
}

.form_notes {
    font-size: 1rem;
    color: var(--color-secondary);
    display: inline-block;
    margin-top: 0.2em;
}

.form_notes_link {
    font-size: var(--font-size-s);
    color: var(--color-secondary);
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
}

/* 管理用 横並び */

.form_item.flex {
    flex-direction: row;
    align-items: center;
    padding-bottom: 1.5em;
    border-bottom: 1px solid var(--color-gry03);
}


.form_item.flex .form_label {
    width: min(40%, 15em);
    padding-right: 1em;
}

.form_item.flex .form_input:not([type="time"]),
.form_item.flex .form_textarea,
.form_item.flex .confirm_item,
.form_item.flex .form_select {
    width: calc(100% - min(40%, 15em) - 4em);
}

.form_item.flex + .btn_common {
    margin-top: 2em;
}

.form_alert {
    margin-bottom: 1em;
    font-size: var(--font-size-l);
    display: inline-flex;
    align-items: center;
}

.form_alert i {
    font-size: 1.4em;
    margin-right: 0.3em;
}

.form_radio_label {
    background-color: var(--color-secondary);
    color: var(--color-wh);
    padding: 0.6em 1em;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.form_radio_label:has(input:checked) {
    background-color: var(--color-primary);
}

/* 内定席　複数input */
.form_item_list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.2em;
    background: var(--color-gry01);
    padding: 1em;
}

.form_item_list > .form_item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 1em;
    background-color: var(--color-wh);
}
.form_item_list > .form_item > .form_label {
    font-size: 0.9em;
    width: auto;
    padding: 0;
    color: var(--color-bk);
    display: block;
}
.form_item_list > .form_item > .form_label > .capacity {
    font-size: 1em;
    background-color: var(--color-secondary);
    color: var(--color-wh);
    padding: .1em .2em;
    margin-top: 0.2em;
    display: block;
}

.form_item_list > .form_item > .form_label > .capacity i {
    font-size: 1em;
}
.form_item_list > .form_item > .form_select {
    padding: 0.2em;
    min-width: 4em;
}
/*---------------------------------
 新規予約
---------------------------------*/
/* ステップ */
.reserve_step_wrap {
    display: flex;
    align-items: flex-end;
    gap: 1em;
    margin: 0 0 1em;
}
.step_box {
    display: flex;
    align-items: flex-end;
    gap: 0.5em;
}
.step_box .now {
    font-size: 3.2rem;   
    line-height: 1;
    text-align: center;
    color: var(--color-secondary);
}
.step_box .now .step {
    font-size: 0.4em;
    display: block;
}

.step_box .all {
    font-size: 1.6rem;
}
.reserve_step_wrap .sec_ttl {
    margin: 0 0 .2em;
    font-size: var(--font-size-l);
}
.reserve_step_wrap .sec_ttl i {
    color: var(--color-primary);
}

/* フォーム部分 */


.selected_date {
    font-size: 1.6rem;
    margin: 0 0 0.8em;
}

.timeflame_item {
    background-color: var(--color-wh);
    border-radius: 4px;
    box-shadow: var(--box-shadow-btn);
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-primary);
}

.timeflame_item + .timeflame_item {
    margin-top: 1em;
}

.timeflame_item .fa-circle {
    color: var(--color-red);
}

.timeflame_item:has(.fa-xmark) {
    background-color: var(--color-gry01);
    box-shadow: none;
    color: var(--color-secondary);
}

.reserve_goods_item {
    display: block;
    background-color: var(--color-wh);
    border-radius: 4px;
    /* border: 2px solid transparent;
    box-shadow: var(--box-shadow-btn); */
    border-bottom: 1px solid var(--color-gry02);
    padding: 0 0 2em;
    /* position: relative;
    overflow: hidden; */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1em;
}

.reserve_goods_item:last-child {
    border: none;
}
/* 
.reserve_goods_item::before {
    content: '';   
    width: 2em;
    height: 2em;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    background-color: var(--color-primary);
    position: absolute;
    top: -2px;
    right: -2px;
    opacity: 0;
}


.reserve_goods_item:has(input:checked) {
    border-color: var(--color-primary);
}

.reserve_goods_item:has(input:checked)::before {
    opacity: 1;
} */

.reserve_goods_item + .reserve_goods_item {
    margin-top: 2em;
}

.reserve_goods_item .reserve_goods_checkbox {
    display: block;
    width: 32px;
    height: auto;
    aspect-ratio: 1;
    background: var(--color-gry03);
    border-radius: 8px;
    position: relative;
}

.reserve_goods_item:has(input:checked) .reserve_goods_checkbox {
    background-color: var(--color-primary);
}

.reserve_goods_item .reserve_goods_checkbox > i {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.8rem;
    color: var(--color-wh);
    translate: -50% -50%;
}


.reserve_goods_item input {
    display: none;
}

.reserve_goods_item .contents {
    flex: 1;
}

.reserve_goods_item .top {
    display: flex;
    justify-content: space-between;
    gap: 1em;
}
.reserve_goods_item .top .name {
    width: 100%;
}
.reserve_goods_item .top .price {
    min-width: 8em;
    text-align: right;
}

.reserve_goods_item .bottom_txt {
    color: var(--color-secondary);
    font-size: 1rem;
    margin-top: 0.8em;
}

.reserve_goods_item .img_select {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 1em;
}

.reserve_goods_item .img_select .form_select {
    padding: 0.4em 1em;
    width: 2em;
}

.reserve_confirm_wrap {
    border: 1px solid var(--color-secondary);
    font-size: var(--font-size-m);
    display: flex;
    flex-wrap: wrap;

}

.reserve_confirm_wrap dt {
    background-color: var(--color-secondary);
    border-bottom: 1px solid var(--color-wh);
    color: var(--color-wh);
    width: 7em;
    padding: 0.5em 0.8em;
    display: flex;
    align-items: center;
}

.reserve_confirm_wrap dd {
    padding: 0.5em 0.8em;
    width: calc(100% - 7em);
    background-color: var(--color-wh);
    border-bottom: 1px solid var(--color-secondary);
    text-align: right;
}

.reserve_confirm_wrap:has(.lottery) dt {
    width: 8em;
}
.reserve_confirm_wrap:has(.lottery) dd {
    width: calc(100% - 8em);
}

.reserve_confirm_wrap dt:last-of-type,
.reserve_confirm_wrap dd:last-of-type {
    border: none;
}

.reserve_confirm_wrap .width_100 {
    width: 100%;
}

.reserve_confirm_wrap .goods {
    padding: 1em;
    text-align: left;
}
.reserve_confirm_wrap .goods .top {
    display: flex;
    justify-content: space-between;
    gap: 1em;
}
.reserve_confirm_wrap .goods .top .name {
    flex: 1;
}
.reserve_confirm_wrap .goods .top .price {
    min-width: 8em;
    text-align: right;
}

.reserve_confirm_wrap .goods .bottom_txt {
    color: var(--color-secondary);
    font-size: 1rem;
    margin-top: 0.8em;
}

/* 下部ボタン */
.reserve_step_btn_wrap {
    display: flex;
    justify-content: space-between;
    gap: 1%;
    margin: 2em 0 0;
}

.reserve_step_btn_wrap .btn_common {
    margin: 0;
}

.reserve_step_btn_wrap .btn_next:only-child {
    margin: 0 0 0 auto;
}
.reserve_step_btn_wrap .btn_return:only-child {
    margin: 0 auto 0 0;
}


/*---------------------------------
 抽選結果
---------------------------------*/

.lottery_results {
    border: 1px solid var(--color-secondary);
    font-size: var(--font-size-s);
    display: flex;
    flex-wrap: wrap;
}

.lottery_results dt {
    background-color: var(--color-secondary);
    border-bottom: 1px solid var(--color-wh);
    color: var(--color-wh);
    width: 7em;
    padding: 0.5em 0.8em;
    display: flex;
    align-items: center;
}

.lottery_results dd {
    padding: 0.5em 0.8em;
    width: calc(100% - 7em);
    background-color: var(--color-wh);
    border-bottom: 1px solid var(--color-secondary);
    text-align: left;
}

.lottery_results dt:last-of-type,
.lottery_results dd:last-of-type {
    border: none;
}


.lottery_results dd .status {
    padding: 0.2em .6em;
    color: var(--color-wh);
    display: inline-block;
}

.lottery_results dd .status.waiting {
    background-color: var(--color-bl);
}

.lottery_results dd .status.unpaid {
    background-color: var(--color-red);
}
.lottery_results dd .alert {
    background-color: var(--color-gry03);
    padding: 0.3em 0.6em;
    margin-top: 0.3em;
    display: block;
}

.lottery_results dd .alert.red {
    background-color: var(--color-red);
    color: var(--color-wh);
}
/*---------------------------------



共通、ユーザー画面　ここまで



---------------------------------*/


/*---------------------------------



管理者画面



---------------------------------*/

/*---------------------------------
 管理者TOP
---------------------------------*/
/* 座席予約リスト */

.calendar_date_wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 0 10px;
    width: min(100%, 400px);
}

.calendar_date_now {
    font-size: 5rem;
    line-height: 1;
}
.calendar_date_now .year {
    font-size: 0.3em;
    display: block;
}

.calendar_date_now .unit {
    font-size: 0.3em;
    margin: 0 0.4em;
}

.seat_table_wrap {
    overflow-x: scroll;
}

.reserve_seat_box .seat_table {
    width: 100%;
    border-collapse: separate;
    width: max-content;
}

.reserve_seat_box .seat_table * {
    user-select: none;
}
.reserve_seat_box .seat_table th,
.reserve_seat_box .seat_table td {
    padding: 0.3em 0.5em;
    text-align: center;
}

.reserve_seat_box .seat_table th {
    background-color: var(--color-secondary);
    color: var(--color-wh);
    max-width: 10em;
}
.reserve_seat_box .seat_table th:not(.time) {
    position: sticky;
    left: 0;
    border-right: 3px solid var(--color-gry02);
}
.reserve_seat_box .seat_table td {
    background-color: var(--color-wh);
    min-width: 120px;
    max-width: 150px;
}

.reserve_seat_box .seat-reserved {
    background-color: var(--color-gry01);
    border-color: var(--color-gry01);
}
.reserve_seat_box .seat-unavailable {
    background-color: var(--color-gry02);
    border-color: var(--color-gry02);
}

.reserve_seat_box .seat-cell {
    cursor: pointer;
    border-radius: 4px;
    border: 2px solid transparent;
    padding: 0.5em 0.8em;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.reserve_seat_box .seat-cell:not(.seat-reserved) {
    touch-action: auto;
}

.reserve_seat_box .seat-cell.seat-dragging {
    
    background-color: #EEF9F7;
    border-color: var(--color-primary);
    box-shadow: var(--box-shadow-btn);
    cursor: grabbing;
}

.reserve_seat_box .seat-cell.seat-over {
    outline: 2px dashed var(--color-primary);
}

.reserve_seat_box .status {
    padding: 0.2em .6em;
    margin-bottom: .5em;
    color: var(--color-wh);
    display: inline-block;
}
.reserve_seat_box .status.waiting {
    background-color: var(--color-bl);
}

.reserve_seat_box .status.visited {
    background-color: #ED8F68;
}
.reserve_seat_box .status.finish {
    background-color: var(--color-bk);
}
.reserve_seat_box .status.unpaid {
    background-color: var(--color-red);
}
.reserve_seat_box .status.winning {
    background-color: #4ca99f;
}
.reserve_seat_box .status.informal {
    background-color: #4ca99f;
}

.reserve_seat_box .seat-reserved .name {
    text-align: center;
}

.reserve_seat_box .seat-reserved .amount {
    text-align: right;
}


@media (hover: hover) {
    .seat-cell:hover {
        background: #f0f7ff;
    }
}

/* 商品予約状況 */
.reserve_goods_list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 1em;
    background: var(--color-wh);
}

.reserve_goods_list li {
   position: relative;
   padding-left: 1.5em;
   display: flex;
   align-items: center;
}

.reserve_goods_list li::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    background-color: var(--color-or);
    border-radius: 50%;
    position: absolute;
    top: 0.5em;
    left: 0;
}

.reserve_goods_list li > span {
    padding-left: 2em;
    margin-left: 0.5em;
    position: relative;
    white-space: nowrap;
}

.reserve_goods_list li > span::before {
    content: "";
    width: 1.5em;
    height: 2px;
    background-color: var(--color-gry02);
    border-radius: 99px;
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
}

/* モーダル */
#modalOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

#seatModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    width: min(95%, 600px);
    border-radius: 8px;
    z-index: 1000;
    max-height: 90%;
    overflow: scroll;
}

#seatModal h3 {
    margin-top: 0;
}

.modal-footer {
    text-align: right;
    margin-top: 15px;
}
.modal_btn_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.modal_btn_wrap > div {
    display: inline-block;
    width: calc((100% - 4px) / 2);
}

.modal_btn_wrap .btn_common_slim {
    padding: 1em 0.5em;
    width: 100%;
}
/*---------------------------------
 設定カレンダー
---------------------------------*/
.calendar_manager .day {
    gap: 10px 7px;
    margin-top: 1em;
}
.calendar_manager .day .manager_date {
    background-color: var(--color-wh);
    border-radius: 4px;
    box-shadow: var(--box-shadow-bk-shade);
    font-size: 1rem;
    padding: 1em 2px 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.calendar_manager .manager_date_inner {
    padding: 0 0.8em 1em;
    display: flex;
    flex-direction: column;
}

.calendar_manager .manager_date .btn_reserve {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* height: 100%; */
}

.calendar_manager .manager_date .manager_day {
    color: var(--color-bk);
    text-align: left;
    font-size: 1.2rem;
    margin-bottom: 1em;
}

.calendar_manager .manager_date .manager_day .day_status {
    margin-left: 1em;
}
.calendar_manager .manager_date .manager_day:has(.holiday) {
    color: var(--color-red);
}
.calendar_manager .manager_date .manager_day:has(.close) {
    color: var(--color-secondary);
}

.calendar_manager .manager_date .manager_day_week {
    display: none;
}


.calendar_manager .manager_date .reserve_schedule {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5em;
    max-width: 15em;
}

.calendar_manager .manager_date .reserve_schedule dt {
    color: var(--color-secondary);
}

.calendar_manager .manager_date .reserve_schedule dt:not(:last-of-type) {
    margin-bottom: 0.2em;
}

.calendar_manager .manager_date .reserve_schedule dd {
    padding: 0.1em 0.5em;
    border-radius: 9999px;
    background-color: var(--color-secondary);
    color: var(--color-wh);
}
.calendar_manager .manager_date .reserve_schedule dd:not(:last-of-type) {
    margin-bottom: 0.4em;
}
.calendar_manager .manager_date .other_info {
    padding: 0.3em 0.5em;
    background-color: var(--color-gry01);
    color: var(--color-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.calendar_manager .manager_date .reserve_schedule:has(dt, dd) + .other_info {
    margin-top: 1em;

}

.calendar_manager .manager_date .other_info dt {
    width: 4em;
}

.calendar_manager .manager_date .other_info dd {
    width: calc(100% - 4.5em);
    text-align: right;
}

.calendar_manager .has_lottery_wrap {
    background: var(--color-bl);
    color: var(--color-wh);
    padding: 0.3em 0.5em;
    margin-top: 1em;
    font-size: 1.1rem;
}

.calendar_manager .has_lottery_box {
    
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.3em;
    margin-top: 0.2em;
}


.calendar_manager .has_lottery_box > a {
    position: relative;
    padding: 0.5em 0.2em;
    line-height: 1.3;
    font-size: 1rem;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    box-shadow: var(--box-shadow-btn);
}

.calendar_manager .has_lottery_apply {
    background-color: var(--color-wh);
    color: var(--color-bl);
}

.calendar_manager .has_lottery_setting {
    background: var(--color-gry01);
    color: var(--color-bk);
}
.calendar_manager .has_lottery_box > a > i {
    font-size: 1.4em;
}
.calendar_manager .manager_date .link {
    background-color: var(--color-bk);
    color: var(--color-wh);
    border-radius: 0 0 3px 3px;
    height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar_manager .manager_date .link > i {
    font-size: 1.4em;
}

.sp_day_week {
    display: none;
}

.setting_box {
    font-size: var(--font-size-m);
}

.setting_box .form_item {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
    gap: 0.5em 1em;
}

.setting_box .form_item label {
    display: flex;
    align-items: center;
    gap: 1em;
}
.setting_box .form_item .input_list label {
    gap: 0.5em;
}

.setting_box .setting_item {
    background-color: var(--color-secondary);
    color: var(--color-wh);
    padding: 0.3em 0.6em;
}
.setting_box .checkbox_common {
    margin: 0;
}
.setting_box .checkbox_common .check_wrap {
    border: 1px solid var(--color-secondary);
    width: 1.5em;
    height: 1.5em;
}
.form_item > label:has(input:checked) .setting_item {
    background-color: var(--color-primary);
}


.setting_box .form_item .form_switch {
    width: 100%;
    background-color: var(--color-secondary);
    color: var(--color-wh);
    padding: 0.3em 0.6em;
}

.form_item:has(input:checked) .form_switch {
    background-color: var(--color-primary);
}

.setting_box .form_item .form_switch_option {
    display: none;
    
    align-items: center;
    gap: 1em;
    width: 100%;
    max-width: 400px;
}
.setting_box .form_item .form_switch:has(input:checked) + .form_switch_option {
    display: flex;
}

.setting_box .form_item .form_switch_option p {
    width: auto;
}

.setting_box .form_item .form_switch_option p:nth-child(2) {
    width: 6%;
}

.setting_box .form_item .form_switch_option input {
    display: block;
    margin: .4em 0;
    padding: 0.3em;
}

.setting_box .form_item .form_switch_option input:has( + .form_unit) {
    display: inline-block;
}

.setting_box + .btn_common {
    margin-top: 2em;
}

.form_item + .setting_box {
    margin-top: 2em;
}

.setting_flex {
    display: grid;
    grid-auto-flow: column;
    gap: 1em;
}

.setting_flex .form_item {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
    gap: 0.5em 1em;
    margin: 0;
}

.setting_flex .form_item .form_switch {
    padding: 1em 0.6em;
    justify-content: center;
}

@media (max-width: 767px) {
    .calendar_manager .day_week {
        display: none;
    }
    .calendar_manager .day {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .calendar_manager .day .white_space {
        display: none;
    }
    
    .calendar_manager .day .manager_date {
        padding: 2px 2px 2px 0;
        flex-direction: row;
    }

    .calendar_manager .manager_date_inner {
        padding: 1em 1em 1em 56px;
        position: relative;
        width: 20em;
        min-height: 8em;
    }

    .calendar_manager .manager_date .manager_day {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -50%;
        width: 56px;
        font-size: 1.8rem;
        text-align: center;
        margin: 0;
    }

    .calendar_manager .manager_date .manager_day_week {
        display: block;
        font-size: 1.2rem;
    }
    

    .calendar_manager .manager_date .other_info {
        max-width: 15em;
    }


    .calendar_manager .manager_date .manager_day .day_status {
        font-size: 1rem;
        display: block;
        margin: .5em 0 0;
    }

    .calendar_manager .has_lottery_setting + .has_lottery_apply {
        margin-top: 0px;
    }

    .calendar_manager .manager_date .link {
        flex-direction: column;
        gap: 1em;
        height: 100%;
        width: 24%;
        padding: 1em .2em;
        border-radius: 0 3px 3px 0;
    }

    .sp_day_week {
        display: block;
        font-size: 1rem;
    }


}

/*---------------------------------
 表　管理者共通
---------------------------------*/
.common_manager_table {
    border-collapse: collapse;
    width: 100%;
}
.common_manager_table th, 
.common_manager_table td {
    padding: 0.5em;
}
.common_manager_table th {
    background-color: var(--color-secondary);
    color: var(--color-wh);
}

.common_manager_table th + th {
    border-left: 2px solid var(--color-gry01);
}

.common_manager_table tr {
    background-color: var(--color-wh);
}

.common_manager_table tr + tr {
    margin-top: .3em;
}

.common_manager_table tr:nth-child(2n+1) {
    background-color: #F9FAF9;
}

.common_manager_table tr.user_bk_list {
    background-color: rgba(var(--color-bk-rgb), .6);
    color: var(--color-wh);
}

.common_manager_table .btn_td {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
}

.common_manager_table .nowrap {
    white-space: nowrap;
}

.common_manager_table .detail_txt {
    max-width: 20em;
}
.common_manager_table .name {
    min-width: 5em;
}

@media (max-width: 767px) {
    .common_manager_table .btn_td:not(.no_column) {
        flex-direction: column;
    }
}

/*---------------------------------
 時間枠管理
---------------------------------*/
.timeflame_selected {
    background-color: var(--color-gry02);
    border-radius: 4px;
    padding: 0.5em 1em;
    display: grid;
    grid-template-columns: fit-content(100%) 1fr;
    align-items: center;
    font-weight: var(--font-weight-bold);
    text-align: left;
    margin: 1em 0 2em;
}

.timeflame_selected dt {
    padding: 0 16px 0 0;
    border-right: 1px solid var(--color-wh);
    font-size: var(--font-size-s);
}

.timeflame_selected dd {
    padding: 0 0 0 16px;
    font-size: var(--font-size-l);
}

.timeflame_selected dd .option {
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-medium);
    padding: 0 1em;
    border-radius: 9999px;
    background-color: var(--color-bk);
    color: var(--color-wh);
    display: inline-block;
    margin: 0 0 0 1em;
}

@media (max-width: 767px) {
    .timeflame_selected {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.2em;
        padding: 1em;
    }

    .timeflame_selected dt {
        width: fit-content;
    }

    .timeflame_selected dd {
        padding: 0;
        text-align: right;
    }
}

.search_wrap {
    margin: 0 0 2em;
    padding: 1em;
    width: min(100%, 400px);
    background-color: var(--color-gry03);
    font-size: 1.2rem;
}

.search_wrap .flex_left {
    margin-top: 2em; 
    gap: 1em;
}

.search_wrap .form_input,
.search_wrap .form_select,
.search_wrap .btn_common_slim {
    box-shadow: none;
    font-size: 1.2rem;
}



/*---------------------------------
 ユーザ詳細
---------------------------------*/
.user_detail_wrap {
    background-color: var(--color-gry03);
    padding: 1em;
    font-size: 1.4rem;
}

.user_detail_wrap .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.user_detail_wrap .list dt {
    width: 12em;
    padding: 0.3em 0.5em;
}
.user_detail_wrap .list dd {
    width: calc(100% - 12em);
    padding: 0.3em 0.8em;
}

/* 表題 */
.emphasis_title {
    background-color: var(--color-gry02);
    border-radius: 4px;
    padding: 0.5em 1em;
    display: grid;
    grid-template-columns: fit-content(100%) 1fr;
    align-items: center;
    font-weight: var(--font-weight-bold);
    text-align: left;
    margin: 1em 0 2em;
    font-size: var(--font-size-l);
}

/* 共通余白 */
.mt_1 {
    margin-top: 1em;
}

.mb_1 {
    margin-bottom: 1em;
}
.mt_2 {
    margin-top: 2em;
}

.mb_2 {
    margin-bottom: 2em;
}

.mb_4 {
    margin-bottom: 4em;
}

.mt_0 {
    margin-top: 0 !important;
}
.mb_0 {
    margin-bottom: 0 !important;
}

.mr_2 {
    margin-right: 2em;
}

.ml_2 {
    margin-left: 2em;
}


.pb_0 {
    padding-bottom: 0 !important;
}

/* 文字 */
.fc_blue {
    color: var(--color-bl);
}

.fc_green {
    color: var(--color-primary);
}

.fc_light_green {
    color: var(--color-secondary);
}

.fc_green_gray {
    color: #8e9593;
}

.fc_light_gray {
    color: #b2b9b7;
}

.fs_15 {
    font-size: 1.5rem;
}

.fs_16 {
    font-size: 1.6rem;
}

.total_amount_column {
    width: 100%;
    border-top: 1px solid var(--color-secondary);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.1em 0.3em;
    margin: 10px 0 0;
    padding: 5px 0 0;
    align-items: center;
}

.total_amount_column dt {
    font-size: 1.0em;
    padding: 0.3em 0.3em 0;
}

.total_amount_column dd {
    text-align: right;
    padding: 0.3em 0.3em 0;
}


/*---------------------------------
 集計画面
---------------------------------*/
.salestally_box {
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--color-gry02);
    margin-bottom: 1em;
    padding: 0.5em 1em;
    gap: 3%;
}

.salestally_box_l {
    width: 17%;
    border-right: 1px solid var(--color-gry02);
}

.salestally_box_c {
    width: 50%;
}
.salestally_box_r {
    width: 30%;
    text-align: right;
    border-left: 1px solid var(--color-gry02);
}

.salestally_box_r > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.sales_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.sales_list li {
    width: 100%;
    display: flex;
        justify-content: space-between;
    gap: 0.3em;
}

.sales_list_data {
    padding-left: 2em;
    position: relative;
    
}

.sales_list_data:before {
    content: "";
    width: 1.5em;
    height: 1px;
    background-color :var(--color-gry03);
    position:absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
}

@media (max-width: 767px) {
    .salestally_box {
        flex-direction: column;
        gap: 0.5em;
    }
    
    .salestally_box_l {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--color-gry02);
        padding: 0.5em 0;
    }
    
    .salestally_box_c {
        width: 100%;
        padding: 0 0 0.5em;
    }
    
    .salestally_box_r {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--color-gry02);
        padding: 0.5em 0 0;
        
    }
    
    .salestally_box_r > div {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
    
}


/*---------------------------------
 店舗タイトル
---------------------------------*/
.main_ttl_block {
    display: block;
    margin: 0 0 2em;
    /* width: 90%; */
    padding: 0 0 1.5em;
    z-index: 1;
    position: relative;
}

.main_ttl_block::before {
    content: "";
    width: 40px;
    height: 2px;
    background: var(--color-gry02);
    border-radius: 99px;
    position: absolute;
        bottom: 0;
    left: 0;
}