/* common.css ― 全画面共通 */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    color: #333;
    background: #faf8f5
}
.alert {
    margin-bottom: 16px;
    padding: 10px 12px;
    background: #fdecea;
    border: 1px solid #f5c2c0;
    color: #b3271e;
    border-radius: 6px;
    font-size: 13px;
}
.col:after, .row:after, .container:after{
    content: "";
    display: table;
    clear: both;
}

img{
	width: 100%;
}
.main_contents{
	margin-bottom: 6rem;
}
.t_right{
	text-align: right;
}
.t_center{
	text-align: center;
}

main section:not(:last-child){
    margin-bottom: 3%;
}
main section .row:not(:last-child){
    margin-bottom: 1.5%;
}


h3{
    margin-top: 0;
    margin-bottom: 0.5em;
}

@media (min-width:769px){
	a[href^="tel:"] {  /* hrefがtel:で始まるものに対して */
		pointer-events: none;
	}
    .col{
        float: left;
    }
    .col:not(:last-child){
        margin-right: 2%;
    }
    .span_12{
        width: 100%;
    }
    .span_10{
        width: 82.333333%;
    }
	.span_9{
        width: 74%;
    }
    .span_8{
        width: 65.666666%;
    }
    .span_6{
        width: 49%;
    }
    .span_7{
        width: 57.33333%;
    }
    .span_5{
        width: 40.66666%;
    }
    .span_4{
        width: 32%;
    }
	.span_3{
        width: 23.5%;
    }
	.span_2{
        width: 18.4%;
    }
}

@media(min-width: 769px){
	.sp-only{
		display: none!important;
	}
}
@media(max-width: 768px){
	a{
		color: #000;
	}
	button{
		color: #000;
	}
	.pc-only{
		display: none!important;
	}
	h2{
		font-size: 20px;
	}
	h1{
		font-size: 28px;
	}
	body{
		font-size: 16px;
		font-family: "Hiragino Kaku Gothic ProN", sans-serif;
		letter-spacing: 0em;
		line-height: 1.8;
		color: #000;
		overflow-x: hidden;
	}
	section{
		padding: 0 10px;
	}
	.inner_contents{
		padding: 60px 0;
	}
    main section .row:not(:last-child){
        margin-bottom: 2%;
    }
    main section .row:not(:last-child) .col:not(:last-child){
        margin-bottom: 2%;
    }
}
main.content{
    /* max-width: 1200px; */
    /* margin: auto; */
}

/* ============================================================
   トップバー / サイドバー(全画面共通)
     ・システム全体で見た目を揃えるため、デザインはここ(common.css)に集約する。
       → 1か所直せば TOP・ユーザー管理など全画面にそのまま反映される。
     ・幅や色は下の :root 変数で一元管理。ここを変えれば全画面に効く。
     ・「場所によって変えたい」差分だけ、その画面の css(common.css より後に
       読み込まれる)で上書きする。例:
         body.main_page { --topbar-width: 220px; }   ← その画面だけ幅を変更
   ============================================================ */
:root {
    --topbar-width: 220px;      /* サイドバーの幅 */
    --content-offset: 240px;    /* 本文をサイドバー分だけ右へ寄せる量 */
    --brand-navy: #1c2e3d;      /* メインカラー(紺) */
    --brand-gold: #c9a96e;      /* サブカラー(金) */
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--topbar-width);
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    background: var(--brand-navy);
    color: #fff;
    box-shadow: 2px 0 16px rgba(42, 63, 95, .22);
    z-index: 100;
}

/* ロゴ */
.topbar-title {
    width: 100%;
    text-align: center;
    margin-bottom: 14px;
}
.topbar-title img { max-width: 140px; }
/* ロゴも <button>(遷移は js/common.js の go_top()) */
.logo-btn {
    display: inline-block;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    line-height: 0;
}

/* サイドナビ(TOP / ユーザー管理 …)。ナビが無い画面には要素自体が無いので影響しない */
.side-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* ナビも <a> ではなく <button>(遷移は js/common.js) */
.side-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: 0;
    border-radius: 8px;
    color: #cfd8e3;
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.side-link .menu-ico { width: 20px; height: 20px; color: var(--brand-gold); flex-shrink: 0; }
.side-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.side-link.is-active { background: rgba(201, 169, 110, .18); color: #fff; }
.side-link.is-active .menu-ico { color: #e6cfa2; }

/* ユーザー名(サイドバー下部) */
/* 画面ごとの追加メニュー(_sidebar.php の $sidebar_extra)。一番下に寄せる */
.side-nav-bottom {
    margin-top: auto;
    width: 100%;
}

.topbar-right {
    margin-top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}
.welcome {
    font-size: 14px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    text-align: center;
    line-height: 1.5;
    min-width: 190px;
}

/* サイドバーがある画面(=.topbar を持つ画面)だけ、本文を右へ寄せる。
   本文の余白(padding)は画面ごとに違うので、各 css 側で指定する。 */
.topbar ~ main.content,
.topbar + main.content {
    margin-left: var(--content-offset);
    /* max-width: none; */
    /* max-width: 1200px; */
    /* margin: auto; */
    min-height: 100vh;
}
@media (max-width: 1675px) {
    .topbar ~ main.content,
    .topbar + main.content {
        margin-left: var(--content-offset);
        /* max-width: none; */
        /* max-width: 1200px; */
        /* margin: auto; */
    }
}
/* ===== メニューアイコン ===== */
.menu-ico {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: #c9a96e;
    transition: color .16s ease;
}
/* ログアウトは警告色のタイルに */
/* topbar-right が中央寄せ(flex)になっても、ボタンは幅いっぱいに保つ */
.logout_box{
    margin-top: 20px;
    width: 100%;
}
.logout_box .menu-tile.btn-logout {
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-height: 40px;
    padding: 5px 12px;
    background: #fff;
    border: 1px solid #e5e9f0;
    /* border-top: 3px solid #c9a96e; */
    border-radius: 12px;
    color: #2a3f5f;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(42, 63, 95, .06);
    transition: transform .16s ease, box-shadow .16s ease,
                border-color .16s ease, color .16s ease;
    /* border-top-color: #e05a5a; */
    color: #c0392b;
    cursor: pointer;
}
.logout_box .menu-tile.btn-logout:hover {
    background: #fff5f5;
    border-top-color: #c0392b;
    box-shadow: 0 10px 22px rgba(224, 90, 90, .22);
    color: #a5281b;
}
.logout_box .menu-tile.btn-logout .menu-ico { color: #e05a5a; }
.logout_box .menu-tile.btn-logout:hover .menu-ico { color: #c0392b; }

/* モバイル: サイドバーを上部バーへ戻す */
@media (max-width: 768px) {
    .topbar {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 12px 16px;
    }
    .topbar-title { width: auto; margin-bottom: 0; }
    .topbar-title img { max-width: 90px; }
    .side-nav {
        order: 3;
        width: 100%;
        flex-direction: row;
        margin-top: 10px;
    }
    .side-link { flex: 1; justify-content: center; }
    .topbar-right { margin-top: 0; width: auto; padding-top: 0; border-top: none; }
    .topbar ~ main.content,
    .topbar + main.content { margin-left: 0; max-width: none;}
}

/* ============================================================
   確認ポップアップ(js/common.js の show_confirm)
     ブラウザ標準の confirm() の置き換え。マークアップは JS が作るので、
     ここのデザインを直せば全画面の確認ダイアログに反映される。
     見た目は他画面のカード(白 + 上辺のライン + 影)に合わせている。
   ============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;              /* サイドバー(100)・select2(1051)より前へ */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 33, 44, .5);
    opacity: 0;
    transition: opacity .16s ease;
}
.modal-overlay.is-open { opacity: 1; }

/* 背面のスクロールを止める */
body.is-modal-open { overflow: hidden; }

.modal-dialog {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border: 1px solid #e5e9f0;
    /* border-top: 3px solid var(--brand-gold); */
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(20, 33, 44, .28);
    overflow: hidden;
    transform: translateY(8px) scale(.98);
    transition: transform .16s ease;
}
.modal-overlay.is-open .modal-dialog { transform: none; }
/* 削除など、取り消しにくい操作は上辺のラインを警告色にする */
/* .modal-dialog.is-danger { border-top-color: #c0392b; } */

/* ---- 見出し ---- */
.modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 0;
}
.modal-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #eef2f8;
    color: var(--brand-navy);
}
.modal-ico svg { width: 19px; height: 19px; }
.modal-dialog.is-danger .modal-ico { background: #fdecea; color: #c0392b; }
.modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-navy);
    line-height: 1.4;
}

/* ---- 本文 ---- */
.modal-body { padding: 12px 20px 18px; }
.modal-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #3d4b5c;
    white-space: pre-line;   /* JS 側の改行文字をそのまま改行として出す */
}
.modal-note {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #8a94a3;
    white-space: pre-line;
}

/* ---- ボタン列 ---- */
/*   .btn 系は画面ごとの css にあるため、ここでは専用クラスで完結させる。 */
.modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px 16px;
    border-top: 1px solid #eef1f6;
    background: #fafbfd;
}
.modal-btn {
    min-width: 104px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.modal-btn:active { transform: translateY(1px); }
.modal-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(201, 169, 110, .35); }

.modal-btn-cancel { background: #fff; color: #2a3f5f; border-color: #cfd6e0; }
.modal-btn-cancel:hover { background: #f3f6fb; border-color: #9fb0c6; }

.modal-btn-ok.is-primary { background: var(--brand-navy); color: #fff; }
.modal-btn-ok.is-primary:hover { background: #26405a; box-shadow: 0 6px 16px rgba(28, 46, 61, .25); }

.modal-btn-ok.is-danger { background: #c0392b; color: #fff; }
.modal-btn-ok.is-danger:hover { background: #a93226; box-shadow: 0 6px 16px rgba(192, 57, 43, .25); }

@media (max-width: 768px) {
    .modal-foot { flex-direction: column-reverse; }
    .modal-btn { width: 100%; min-width: 0; }
}


/* ============================================================
   お知らせ(トースト)  js/common.js の show_toast()
     画面の上から浮いて出てくるメッセージ。
     ・position: fixed で本文の**上に重ねる**ので、出しても消しても
       下のレイアウト(表など)の高さは変わらない = 画面がガタつかない。
     ・アラート・注意書きのたぐいは、全画面この見た目に統一する。
       (画面ごとに独自の「帯」を作らないこと)
   ============================================================ */
.toast-area {
    position: fixed;
    top: 14px;
    left: 0;                       /* 既定(サイドバーが無い画面)は画面の真ん中 */
    right: 0;
    z-index: 2000;                 /* 確認ポップアップ(1100)より前に出す */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    pointer-events: none;          /* 何も出ていない間は下の操作を邪魔しない */
}
/* サイドバーがある画面だけ、その幅ぶん右へ寄せて本文の真ん中に出す。
   (シフト画面のようにサイドバーを出さない画面では、この指定は当たらない)
   ※入れものは <body> の末尾に作られるので .topbar の後ろの兄弟になる。 */
.topbar ~ .toast-area { left: var(--content-offset); }

.toast {
    pointer-events: auto;
    box-sizing: border-box;
    width: 100%;
    max-width: 520px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px 11px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(20, 33, 44, .18);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    /* 出る前・消えた後は上へ逃がしておく(is-in で降りてくる) */
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity .18s ease, transform .18s ease;
}
.toast.is-in  { opacity: 1; transform: translateY(0); }
.toast.is-out { opacity: 0; transform: translateY(-16px); }

.toast-ico { flex-shrink: 0; display: inline-flex; margin-top: 1px; }
.toast-ico svg { width: 18px; height: 18px; }

.toast-body { flex: 1 1 auto; min-width: 0; }
.toast-text { overflow-wrap: anywhere; }

/* tone(色) … ok:完了 / ng:エラー / warn:注意 / info:お知らせ */
.toast.is-ok   { background: #e7f6ec; border-color: #b8e0c6; color: #1e7a46; }
.toast.is-ng   { background: #fdecea; border-color: #f0bdb7; color: #b3271e; }
.toast.is-warn { background: #fff6e5; border-color: #f0d9a8; color: #8a5a00; }
.toast.is-info { background: #eef2f8; border-color: #cfd9e8; color: var(--brand-navy); }

/* 添えるボタン(「元に戻す」など) */
.toast-btn {
    margin-left: 10px;
    padding: 4px 12px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: #fff;
    color: inherit;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.toast-btn:hover { background: rgba(255, 255, 255, .6); }

/* 閉じる(×) */
.toast-close {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}
.toast-close:hover { opacity: 1; background: rgba(255, 255, 255, .55); }
.toast-close svg { width: 14px; height: 14px; }

@media (max-width: 768px) {
    /* サイドバーが上部バーに戻る幅。画面いっぱいに寄せる */
    .toast-area,
    .topbar ~ .toast-area { left: 0; top: 10px; padding: 0 10px; }
    .toast { max-width: none; }
}

/* 端末側で「動きを減らす」設定のときは、すべり込みをやめる */
@media (prefers-reduced-motion: reduce) {
    .toast { transform: none; transition: opacity .12s ease; }
    .toast.is-in, .toast.is-out { transform: none; }
}

/* ============================================================
   入力エラーの欄(.is-error)
     エラーの文言はトーストで出し、該当の入力欄をここで赤くする。
     ・付け外しは js/common.js の mark_error_fields() が行う。
       PHP からは page_alerts(['ng'=>…, 'fields'=>['staff_id',…]]) で渡す。
     ・入力欄の枠色は画面ごとの css(staff.css など)で指定しているため、
       それより後から確実に上書きできるよう !important を付けている。
       (common.css は画面別 css より **先に** 読み込まれるため)
   ============================================================ */
input.is-error,
select.is-error,
textarea.is-error {
    border-color: #d94a3d !important;
    background-color: #fff7f6 !important;
}
input.is-error:focus,
select.is-error:focus,
textarea.is-error:focus {
    border-color: #d94a3d !important;
    box-shadow: 0 0 0 3px rgba(217, 74, 61, .18) !important;
}

/* 検索できるプルダウン(select2)は本物の <select> が隠れるので、
   見えている側(.select2-selection)にも同じ赤を当てる */
.select2-container.is-error .select2-selection {
    border-color: #d94a3d !important;
    background-color: #fff7f6 !important;
}

/* ラジオ・チェックのまとまりは欄そのものが無いので、囲みを赤くする */
.form-input.is-error,
.chip-list.is-error {
    padding: 6px 8px;
    border: 1px solid #d94a3d;
    border-radius: 6px;
    background: #fff7f6;
}

/* 見出し(項目名)も赤くして、どこが悪いか一目で分かるようにする */
.form-row.is-error .form-label,
.auth-field.is-error label,
.field.is-error label { color: #b3271e; }



/* ============================================================
   日付入力(flatpickr)
     ・入力欄は  <input type="text" class="js-date"> (js/common.js が初期化)
     ・lib/flatpickr.css の既定を、このシステムの配色
       (紺 #1c2e3d / 金 #c9a96e)に寄せる上書き。
   ============================================================ */
input.js-date {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    padding-right: 32px !important;
    cursor: pointer;
}
input.js-date:read-only { background-color: #fff; }   /* allowInput=false のときも白のまま */

.flatpickr-calendar {
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(42, 63, 95, .18);
    font-family: inherit;
}
/* 年月バー : サイドバーと同じ紺 */
.flatpickr-months,
.flatpickr-months .flatpickr-month {
    background: var(--brand-navy);
    color: #fff!important;
    fill: #fff;
    border-radius: 9px 9px 0 0;
}
.numInputWrapper span{
    opacity: 1!important;
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after{
    border-top-color: rgba(255, 255, 255, 0.9)!important;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after{
    border-bottom-color: rgba(255, 255, 255, 0.9)!important;
}
/* 現状のshop.phpとuser.phpにて、入力時の電話番号に対し、桁数とアルファベットなど、電話番号の形に対したバリデーションを増やしてください。 */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { color: #fff; fill: #fff!important; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #fff!important; }
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months { color: #fff; }
.flatpickr-current-month .flatpickr-monthDropdown-months option { color: #2a3f5f; }
.numInputWrapper:hover { background: rgba(255, 255, 255, .12); }

/* 曜日見出し */
span.flatpickr-weekday { color: #6b7889; font-weight: 700; }

/* 日 */
.flatpickr-day { color: #2a3f5f; border-radius: 6px; }
.flatpickr-day:hover { background: #f3f6fb; border-color: #f3f6fb; }
.flatpickr-day.today { border-color: var(--brand-gold); font-weight: 700; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: #b9c1cc; }