@charset "UTF-8";
/** ヘッダー css */

header { color: #fff; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; }
.left-section { display: flex; align-items: center; gap: 15px; }
.logo { height: 80px; }
.center-section { margin-left: 20px; flex: 1; display: flex; gap: 20px; color: #555555; }
.right-section { display: flex; align-items: center; gap: 15px; }
.user-role { font-weight: bold; }
.logout-btn { background-color: white; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; }
.user-name-txt {color: #555555; margin-right: 10px;}

/* 受付／管理 */
.content.nm-nego header, .content:has(#nmType_1:checked) header { background-color: var(--nego-bg-color); }
.content.nm-mng header, .content:has(#nmType_2:checked) header { background-color: var(--mng-bg-color); }

header .type-box label {
	font-size: 18px; color: #fff; font-weight: bold; padding: 8px 28px; border-radius: 24px;
	display: inline-block;
	    z-index: 2;
    position: relative;
}
.header-form dl { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
.header-form dl dt { display: flex; font-weight: bold; width: 50px; }
.header-form dl dd { margin: 0; }
.headerSummary-wrap { display: flex; flex-wrap: wrap; gap: 20px; }
.headerSummary-wrap .price-sum-box { display: flex; gap: 20px; flex: 1 1 100%; }
.headerSummary-wrap dl :is(dt, dd) { font-weight: bold; }
.headerSummary-wrap dl > dd { padding: 0 12px; color: #555555; font-size: 20px; background: #f1f1f1; border-radius: 50px; }
.headerSummary-wrap dl > dd span { font-weight: bold; vertical-align: baseline; }
.headerSummary-wrap dl > dd .kk-wrap {	font-size: 16px; }
.headerSummary-wrap .price-sum-box dl { display: flex; gap: 5px; margin: 0; }
.headerSummary-wrap .price-sum-box dd.plus { color: #42A35A; }
.headerSummary-wrap .price-sum-box dd.minus { color: #F56778; }

/* 出勤ステータス */
.attendance-status { color: #F56778; background-color: white; padding: 2px 8px; border-radius: 4px; font-weight: bold; }

.content.nm-nego :is(.logout-btn, .user-role) { color: var(--nego-btn-color); }
.content.nm-mng :is(.logout-btn, .user-role) { color: var(--mng-btn-color); }

.type-box .nego-only { background-color: var(--nego-btn-color); }
.type-box .mng-only { background-color: var(--mng-btn-color); }

/* (隠し機能)アンケートモーダルを開くボタン */
.type-box {	position: relative;	width: fit-content;	overflow: hidden; width: 92px; }
.type-box[data-gb="gogo"] { animation: gogo 0.75s ease-in forwards; }
.type-box[data-gb="back"] { animation: back 0.75s ease-in forwards; }
.type-box[data-gb="back"] .open-qa-modal-btn { transform: scale(-1, 1); }
@keyframes gogo { from { width: 92px; } to { width: 170px; } }
@keyframes back { from { width: 170px; } to { width: 92px; } }
.open-qa-modal-btn { position: absolute; right: 12px; bottom: 2px; color: var(--nego-btn-color); font-size: 26px; padding: 0 12px; border-radius: 8px; border: 2px dotted; }
.open-qa-modal-btn::before { content: '\f554'; font-family: 'Font Awesome 5 Free'; font-weight: 900; }

/* 来店者情報モーダル */
header #vst_modal > .modal-content { background-color: var(--nego-btn-color); box-shadow: 0px 0px 0px 10px var(--nego-btn-color); border: dashed 2px #fff; }
header #vst_modal h3::before { padding-right: 8px; content: '\f053';font-weight: 900; font-family: "Font Awesome 5 Free"; }
header #vst_modal h3::after { padding-left: 8px; content: '\f054';font-weight: 900; font-family: "Font Awesome 5 Free";  }
header #vst_modal h3 { font-size: 18px; }
header #vst_modal .ses-vst-wrap { margin: 0 auto; min-width: 200px; }
header #vst_modal .ses-vst-wrap > dl { margin-top: 12px; display: flex; justify-content: center; gap: 20px; }
header #vst_modal .ses-vst-wrap > dl > dt { width: 100px; text-align: right; }
header #vst_modal .ses-vst-wrap > dl > dd { min-width: 120px; text-align: left; }
header #vst_modal .ses-vst-wrap > dl > dd:empty::before { content: '-'; }

/* タブレット */
@media screen and (max-width: 1024px) {

  .center-section { display: none;}
}

/* スマホ */
@media screen and (max-width: 480px) {

  .left-section { gap: 4px; }
  .section-name { font-size: 16px; padding: 4px 16px; }
  .logout-btn { padding: 8px 8px; }
  .center-section { display: none;}
}