/**
* styles.css
*/

/* ========================================
グローバルスタイル
======================================== */

:root {
	--bg-accent		:#6e8fef;
	--bg-pale		:rgba(110,143,239,0.7);
	--bg-dark-font	: white;
	--bg-base		: white;
	--tb-bg-today	: #E65100;	/* 当日用 */
	--tb-bg-baseday	: #0050ff;	/* 基準日用 */
	--tb-font		: #555;
	--tb-boder		: #eee;
	--tb-highlight	: rgba(110,143,239,0.7);	/* #fff3cd; */
	--mp-bg			: rgba(255,255,255,0.7);
	--st-bd			: rgba(255,255,255,0.7);	/* ステータスボーダー	*/
	--shadow		: rgba(0,0,0,0.2);
	--today-icon-edge			: white;
	--today-icon-triangle		: black;
	--today-icon-exclamation	: orange;
	--others-icon-edge			: black;
	--others-icon-triangle		: orange;
	--others-icon-exclamation	: black;
	--z-index-default	: 1;
	--z-header-top		: 100;
	--z-footer-botton	: 90;
	--z-modal			: 1000;
	--z-toast			: 2000;
	--z-toast-sp		: 3000;
	--z-map				: 101;		/* control boxより上 */
	--z-map-info		: 11;
	--z-map-container	:  9;
	--z-map-marker		: 10;
	--z-table-header	: 99;
	--z-table-sp-stiky	: 100;		/* scroll時に固定(SP用) */
	--z-table-pc-stiky	: 99;		/* scroll時に固定(PC用) */
	--z-table-highlight	: 0;		/* ハイライト時に手前 */
	--z-table-highlight-be	: -1;	/* ハイライト時に奥 */
	--z-loading			: 9999;
}

.is-modal-open {
	overflow: hidden;
}

#scroll-top {	/* WordpressのTOPへ戻るボタンを見えなくする */
	bottom	: -500px;
}

.main-content {
	position		: relative;
	font-family		: 'Comfortaa', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-weight		: 400;
	color			: #3E3A39;
}

/* 地図の表示日付ラベル */
.map-date-label {
	position		: absolute;
	bottom			: 35px;
	right			: 21px;
	font-size		: 3rem;
	text-align		: right;
	text-shadow		:	1px		1px		0 #FFF,
						-1px	-1px	0 #fff,
						1px		-1px	0 #fff,
						-1px	1px		0 #fff,
						0		1px		0 #fff,
						0		-1px	0 #fff,
						1px		0		0 #fff,
						-1px	0		0 #fff;
	opacity			: 0.75;
	letter-spacing	: 0.03em;
	z-index			: var(--z-map-info);
}

.map-date-label.today {
	color: var(--tb-bg-today);
}

.map-date-label.baseday {
	/* color:var(--tb-bg-baseday); */
	color			:initial;
}

/* スマホ用ステータストースト */
.map-tooltip-toast {
	position		: fixed;
	bottom			: -80px;
	left			: 50%;
	transform		: translateX(-50%);
	background		: rgba(50, 50, 50, 0.92);
	color			: #fff;
	padding			: 10px 22px;
	border-radius	: 24px;
	font-size		: 0.9rem;
	white-space		: nowrap;
	box-shadow		: 0 4px 12px rgba(0,0,0,0.25);
	z-index			: var(--z-toast-sp);
	pointer-events	: none;
	transition		: bottom 0.3s ease;
}

.map-tooltip-toast.show {
	bottom			: 30px;
}

/* ========================================
ローディング表示
======================================== */
.loading-overlay {
	position		: fixed;
	top				: 0;
	left			: 0;
	width			: 100%;
	height			: 100%;
	background		: rgba(255, 255, 255, 0.95);
	display			: flex;
	flex-direction	: column;
	justify-content	: center;
	align-items		: center;
	z-index			: var(--z-loading);
}

.loading-spinner {
	width			: 60px;
	height			: 60px;
	border			: 5px solid #f3f3f3;
	border-top		: 5px solid #4CAF50;
	border-radius	: 50%;
	animation		: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.loading-overlay p {
	margin-top	: 20px;
	font-size	: 18px;
	color		: #666;
}

/* ========================================
地名リンクセクション
======================================== */

.location-links {
	background		: var(--bg-base);
	padding			: 15px 20px;
	display			: flex;
	gap				: 2rem;
	flex-wrap		: wrap;
	justify-content	: center;
	position		: sticky;
	top				: 0;
	z-index			: var(--z-header-top);
}

.location-link {
	position		: relative;
	/* font-weight		: 300; */
	color			: inherit;
	text-decoration	: none;
	transition		: all 0.3s ease;
}

.location-link-line::after {
	content		: "";
	position	: absolute;
	left		: -1px;
	bottom		: -5px;
	transition: width 0.3s ease;
}

.location-link:hover .location-link-line::after {
	width: 100%;
	background-color: #9FA0A0;
	/* background-color: var(--bg-accent); */
}

/* ========================================
地図セクション
======================================== */

.map-container {
	position	: relative;
	padding		: 20px;
	background	: var(--bg-base);
	margin		: 0 80px;
	justify-self: center;
	max-width	: fit-content;
	z-index		: var(--z-map);
}

.map-controls {
	display			: flex;
	justify-self	: self-end;
	margin-bottom	: 30px;
	gap				: 10px;
}

.map-controls span {
	width			: 100%;
	text-align		: end;
    align-content	: center;
}

select {
	padding : 0 6px; /* Wordpress上書き */
}

#model-select {
	background		: initial;
	border			: none;
	color			: var(--tb-font);
	font-size		: initial;
}
#model-select:focus {
	outline			: none;
}

/* .model-btn {
	padding			: initial;
	background		: inherit;
	border			: none;
	color			: var(--tb-font);
}

.model-btn:hover {
	opacity			: 0.5;
	border-radius	: 5px;
	cursor			: pointer;
	color			: initial;
	background-color: initial;
}

.model-btn.active {
	position		: relative ;
	border			: none;
}

.model-btn-line.active{
	position	: absolute;
	left		: 0px;
	height		: 9px;
	width		: 58%;
	overflow	: hidden;
}

.model-btn-line.active svg {
	fill: var(--bg-accent);
	stroke: var(--bg-accent);
	stroke-width: 2px;
} */

/* マップコンテナ */
#leaflet-map {
	width			: calc(100vw - 185px);
	max-width		: 800px;
	height			: 500px;
	border-radius	: 8px;
	z-index			: var(--z-map-container);
}

/* カスタムマーカー */
.custom-marker {
	background: none;
	border: none;
}

.marker-content {
	display			: flex;
	flex-direction	: column;
	align-items		: center;
	cursor			: pointer;
	transition		: transform 0.2s;
}

.marker-name {
	position		: absolute;
	top				: -18px;
	width			: 57px;
	height			: 59px;
	background		: var(--mp-bg);
	border-radius	: 7px;
	font-size		: 1rem;
	text-align		: center;
	cursor			: pointer;
	transition		: all 0.3s ease;
	z-index			: var(--z-map-marker);
}

.marker-icon {
	width			: 35px	!important;
	height			: 35px	!important;
	border-radius	: 5px	 !important;
	z-index			: var(--z-map-info);
}
img.marker-icon {
	border			: 1px solid var(--st-bd);
}
.marker-content:hover {
	transform	: scale(1.2);
}

/* MAP ポップアップ */
.leaflet-popup { 
	bottom		: 12px !important;
}

.leaflet-popup-content {
	margin		: 10px;
	line-height	: 1.6;
}

.leaflet-popup-content strong {
	color		: var(--tb-font);
}

/* ズームコントロールの位置調整 */
.leaflet-control-zoom {
	/* margin-top: 10px !important; */
	margin-left: 10px !important;
}


/* ========================================
ステータステーブル
======================================== */
#info {
	justify-items: center;
}
.status-info {
	display		: flex;
    width		: 80%;
	margin		: 0 2rem;
	align-items	: center;
	gap			: 1rem;
}

.status-table-container {
	padding		: 20px;
	background	: var(--bg-base);
	margin		: 0px 80px;
	width		: calc(100% - 180px);
	justify-self: center;
}

.status-table-container h2 {
	margin-bottom	: 20px;
	text-align		: center;
	font-weight		: 300;
}

.table-wrapper {
	display		: flex;
	max-width	: 100%;
	/* height		: 1037px; */
	justify-self: center;
	overflow-x	: auto;
	overflow-y	: visible;
}

.status-table {
	min-width		:880px;
	border-collapse	: collapse;
	background		: var(--bg-base);
}

.status-table thead {
	height		: 1rem;
	padding		: 0.8rem 0;
}

.status-table th,
.status-table td {
	padding		: 12px 8px;
	text-align	: center;
	color		: var(--tb-font);
}

.location-header,
.model-header {
	position	: sticky;
	text-align	: center;
	font-size	: 0.9em;
	background	: var(--bg-base);
	z-index		: var(--z-header-top);
}

.location-header {
	left		: 0;
}

.model-header {
	left		: 95px;
}

.location-header,
.model-header,
.date-header {
	min-width	: 80px;
	font-weight	: 400;
}

.date-header.today,
.date-header.baseday {
	color		: var(--bg-dark-font);
	border-radius: 5px 5px 0 0;
}

.date-header.today,
.status-cell.today {
	background	: var(--tb-bg-today);
}

.date-header.baseday,
.status-cell.baseday {
	background: var(--tb-bg-baseday);
}

.status-row:nth-child(2n+1) {
	border-bottom: 2px dotted var(--e-a-border-color);
}

.status-row:nth-child(2n) {
	border-bottom: 2px solid var(--e-a-border-color);
}

.status-row.highlight td {
    z-index		: var(--z-table-highlight);
}

.status-row.highlight td::before {
	content		: "";
	position	: absolute;
	top			: 0;
	left		: 0;
	width		: 100%;
	height		: 100%;
	z-index		: var(--z-table-highlight-be); /* セルのコンテンツより後ろ、背景より前に配置 */
	background	: var(--tb-highlight);
	animation		: highlight-fade-pseudo 2s ease-out forwards;
	pointer-events	: none;
}

.location-name.highlight::before {
    content		: "";
    position	: absolute;
    top			: 0;
    left		: 0;
    width		: 100%;
    height		: 100%;
    z-index		: var(--z-table-highlight-be); /* セルのコンテンツより後ろ、背景より前に配置 */
    background	: var(--tb-highlight);
	animation	: highlight-fade-pseudo 2s ease-out;
	pointer-events	: none;
}

@keyframes highlight-fade-pseudo {
    0%	 { opacity: 1; }
    100% { opacity: 0; }
}

.location-name,
.model-cell {
	background	: var(--bg-base);
	text-align	: center;
	position	: sticky;
}

.location-name {
	left		: 0;
	z-index		: var(--z-table-sp-stiky);
}

.model-cell {
	left		: 98px;
	font-size	: 0.9em;
	z-index		: var(--z-table-pc-stiky);
}

.status-cell {
	position: relative;
}

.edge {
	fill		: var(--others-icon-edge);
}

.triangle {
	fill		: var(--others-icon-triangle);
}

.exclamation,
.exclamation {
	fill		: var(--others-icon-exclamation);
}

/* .status-cell.today svg .edge,
.status-cell.baseday svg .edge {
	fill		: var(--today-icon-edge);
}

.status-cell.today svg .triangle,
.status-cell.baseday svg .triangle {
	fill		: var(--today-icon-triangle);
}

.status-cell.today svg .exclamation,
.status-cell.baseday svg .exclamation {
	fill		: var(--today-icon-exclamation);
} */

.status-cell {
	background	: var(--bg-base);
	fill		: black;
}

.status-cell img {
	border		: 1px solid var(--st-bd);
}

.status-icon {
	font-size	: 28px;
	display		: inline-block;
	transition	: transform 0.2s;
}

.status-icon:hover {
	transform: scale(1.2);
}

/* ========================================
コントロールセクション
======================================== */
#control-box {
	position	: fixed;
	width		: 100%;
	height		: 50%;
    max-width	: 1000px;
	bottom		: 70px;
    justify-self: center;
	z-index		: var(--z-header-top);
	display		: grid;
    grid-template-columns: 60px 60px 1fr;
    grid-template-rows: 60px 60px 1fr;
	transition	: all 0.3s;
}

#control-box.on-footer {
	display		: grid;
	position	: relative;
	height		: 50px;
	bottom		: 13px;
	align-items	: center;
	gap			: 1rem;
	grid-template-columns	: 60px 60px 60px 1fr;
	grid-template-rows		: 60px 0;
	transition	: all 0.3s;
	transform	: translateY(-10px);
}
/* on-foooterシリーズ */
.on-footer #dateNavDivRight {
	grid-column		: 4 / 5;
	grid-row		: 1 / 2;
}

.on-footer #calendarLabel {
	grid-column	: 2 / 3;
	grid-row	: 1 / 2;
}

.on-footer .today-btn {
	grid-column	: 3 / 4;
	grid-row	: 1 / 2;
	align-self	: center;
}

@keyframes slideUp {
from	{ transform: translateY(100%); }
to	{ transform: translateY(0); }
}

/* ========================================
カレンダーボタン
======================================== */
#calendarLabel {
	grid-column	: 1 / 2;
    grid-row	: 2 / 3;
	justify-self: center;
	align-self	: center;
}

.calendar-btn {
	position	: relative;
	display		: block;
	width		: 32px;
	height		: 32px;
    font-weight	: 600;
    letter-spacing: 0.05em;
	cursor		: pointer;
	transition	: all 0.3s;
	background-repeat	: no-repeat;
	background-size		: contain;
	background-position	: center;
}

.date-nav-btn:hover,
.calendar-btn:hover,
.today-btn:hover {
	scale		: 1.1;
}

.calendar-input {
	pointer-events	: 'none';
	opacity		: 0;
	width		: 100%;
	height		: 100%;
	object-fit	: contain;
}
/* Chrome, Edge, Safari向け：クリック判定拡張(一応) */
.calendar-input::-webkit-calendar-picker-indicator {
	position	: absolute;
	top			: 0;
	left		: 0;
	width		: 100%;
	height		: 100%;
	margin		: 0;
	padding		: 0;
	cursor		: pointer;
}

/* ========================================
今日ボタン
======================================== */
.today-btn {
	position		: relative;
	width			: 32px;
	height			: 32px;
	fill			: var(--bg-accent);
	font-weight		: 600;
	letter-spacing	: 0.05em;
	grid-column		: 1 / 2;
    grid-row		: 3 / 4;
	justify-self	: center;
	align-self		: start;
	cursor			: pointer;
	z-index			: var(--z-footer-botton);
	transition		: all 0.3s;
	touch-action	: manipulation;
	user-select		: none;
	-webkit-user-select: none;
}

.today-txt {
	position	: absolute;
	left		: 4px;
	bottom		: 0;
	color		: var(--bg-dark-font);
	font-size	: 12px;
}

/* .today-btn:hover {
	まとめてセット
} */

/* ========================================
日付変更(1日ずつ)ボタン
======================================== */
#dateNavDivRight {
	grid-column	: 3 / 4;
	grid-row	: 1 / 2;
	justify-self: right;
}
#dateNavDivLeft {
	grid-column		: 1 / 1;
    grid-row		: 1 / 1;
}
.date-nav-btn {
	height			: 60px;
	width			: 60px;
	border			: none;
	border-radius	: 50%;
	padding			: initial;
	background		: var(--bg-accent);
	color			: var(--bg-dark-font);
	cursor			: pointer;
	flex-shrink		: 0;
	justify-content	: center;
	align-items		: center;
	transition		: background-color 0.3s;
	z-index			: var(--z-footer-botton);
	/* スマホ連打時のダブルタップズーム・長押し選択を防止 */
	touch-action	: manipulation;
	user-select		: none;
	-webkit-user-select: none;
}

.date-nav-text {
	position		: absolute;
	top				: 41px;
	left			: 13px;
	font-size		: 11px;
	color			: var(--bg-dark-font);
	white-space		: nowrap;
	opacity			: 0;
	pointer-events	: none;
	transition		: opacity 0.3s;
}

.date-nav-btn.left::before {
	content		: "\25C0";
	margin		: auto auto;
	padding-top	: 3px;
	padding-right: 3px;
}

.date-nav-btn.right::before {
	content		: "\25B6";
	margin		: auto auto;
	padding-top	: 3px;
	padding-left: 3px;
}

.date-nav-btn:hover {
	background	: var(--bg-pale);
	color		: var(--bg-dark-font);
}

.date-nav-btn:hover .date-nav-text {
	opacity: 1;
}


/* ========================================
フィードバックセクション
======================================== */
.feedback-bottom {
	display			: flex;
	position		: relative;
	bottom			: 5px;
	left			: 115px;
	gap				: 10px;
	flex-direction	: column;
	z-index			: var(--z-footer-botton);
}

.feedback-container {
	display			: flex;
	gap				: 10px;
	flex-direction	: column;
}

.feedback-btn {
	opacity		: 0;
	width		: 32px;
	cursor		: pointer;
	transition	: all 0.3s;
	z-index		: var(--z-footer-botton);
}

.on-footer .feedback-btn {
	opacity		: 1;
}

/* .feedback-btn.good {
	background: #4CAF50;
}

.feedback-btn.bad {
	background: #f44336;
} */

.feedback-btn:hover {
	transform: scale(1.1);
}

.feedback-link {
	display		: none;
	opacity		: 0;
	align-self	: end;
	grid-column	: 3 / 4;
    grid-row	: 3 / 4;
}

.on-footer .feedback-link {
	opacity		: 1;
    grid-row	: 1 / 2;
	align-self	: end;
}

.feedback-contact-btn {
	opacity		: 0;
	background	: var(--bg-base);
	border		: 1px solid var(--bg-accent);
	color		: var(--bg-dark-font);
	border		: none;
	padding		: 10px 15px;
	border-radius: 25px;
	cursor		: pointer;
	font-size	: 14px;
	box-shadow	: 0 4px 8px var(--shadow);
	transition	: all 0.3s;
	z-index		: var(--z-footer-botton);
}

.feedback-contact-btn:hover {
	background	: #5f7ed5;
	transform	: translateY(-2px);
}

/* ========================================
フッターエフェクト用トリガー
======================================== */
#footer-trigger {
	height: 50px;	/* コントロールセクション配置用 */
}

/* ========================================
モーダル
======================================== */
.modal {
	display			: flex;
	position		: fixed;
	z-index			: var(--z-modal);
	left			: 0;
	top				: 0;
	width			: 100%;
	height			: 100%;
	background		: rgba(0,0,0,0.5);
	justify-content	: center;
	align-items		: center;
	opacity			: 0;
	visibility		: hidden;
	transition		: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.is-open {
	opacity		: 1;
	visibility	: visible;
}

.modal-content {
	background		: var(--bg-base);
	padding			: 30px;
	margin			: 5% auto;
	border-radius	: 10px;
	max-width		: 500px;
	width			: 90%;
	position		: relative;
	box-shadow		: 0 8px 16px rgba(0,0,0,0.3);

	
	transform		: translateY(20px);
	opacity			: 0;
	transition		: transform 0.3s ease, opacity 0.3s ease;
}
.modal.is-open .modal-content {
	transform	: translateY(0);
	opacity		: 1;
}
.modal-close {
	position	: absolute;
	width		: 16px;
	height		: 16px;
	top			: 13px;
	right		: 16px;
	cursor		: pointer;
	fill		: var(--tb-font);
	
}

.modal-close:hover {
	fill		: #333;
}

#config-imprtant-item {
	max-height	: calc(100vh - 290px);
    overflow	: auto;
}

.form-group {
	margin-bottom: 20px;
}

.form-group label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
}

.form-group input,
.form-group textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 14px;
}

.submit-btn {
	background: #4CAF50;
	color: var(--bg-base);
	border: none;
	padding: 12px 30px;
	border-radius: 5px;
	font-size: 16px;
	cursor: pointer;
	width: 100%;
}

.submit-btn:hover {
	background: #45a049;
}

#modal-status {
	display					: grid;
    grid-template-columns	: 1fr auto 1fr;
    grid-template-rows		: 1fr 1fr 1fr;
}

#no-data,
#less-10,
#over-10 {
	display		: grid;
    grid-column	: 2 / 3;
    grid-template-columns: auto 1fr;
    gap			: 10px;
}
/* ========================================
トースト通知
======================================== */

.toast {
	position	: fixed;
	bottom		: -100px;
	left		: 50%;
	transform	: translateX(-50%);
	background	: #333;
	color		: var(--bg-dark-font);
	padding		: 15px 30px;
	border-radius: 5px;
	box-shadow	: 0 4px 8px rgba(0,0,0,0.3);
	z-index		: var(--z-toast);
	transition	: bottom 0.3s ease;
}

.toast.show {
	bottom: 20px;
}

.toast.success {
	background: #4CAF50;
}

.toast.error {
	background: #f44336;
}

/* ========================================
エラーメッセージ
======================================== */
.error-message {
	position	: fixed;
	top			: 20px;
	left		: 50%;
	transform	: translateX(-50%);
	background	: #f44336;
	color		: var(--bg-dark-font);
	padding		: 15px 30px;
	border-radius: 5px;
	box-shadow	: 0 4px 8px var(--shadow);
	z-index		: var(--z-toast);
}

/* ========================================
レスポンシブデザイン
======================================== */
/* モバイル向け */
@media (max-width: 768px) {
	:root {	/* まぶしい屋外用 */
		--bg-accent		: #212121;
		--bg-dark-font	: white;
		--tb-font		: #000;
		--tb-boder		: #eee;
		--tb-highlight	: rgba(110,143,239,0.7);	/* #fff3cd; */
		--mp-bg			: rgba(255,255,255,0.7);
		--st-bd			: white;	/* ステータスボーダー	*/
	}

	body {
		background-color: var(--bg-base) !important;
	}

	.elementor-shape-fill {
		fill: var(--bg-base) !important;
	}

	.main-content {
		width: 100%;
	}

	.location-links {
		margin			: 0 auto;
		padding			: 5px 20px;
		width			: 100%;
		gap				: initial;
		justify-content	: space-between;
		box-sizing		: border-box;
		flex-wrap		: nowrap;
	}

	.location-link {
		padding		: 0px 5px;
		white-space	: nowrap;
	}

	/* 地図 */
	.map-container {
		margin		: initial;
		padding		: 0px;
		width		: 100%;
		max-width	: 100%;
	}

	.map-wrapper {
		width		: 100%;
		max-width	: 100%;
		justify-self: center;
	}

	#leaflet-map {
		aspect-ratio: 1 / 1;
		margin		: 0 auto;
		width		: 100%;
	}

	.map-controls {
		position		: absolute;
		bottom			: 15px;
        right			: 0px;
		width			: 190px;
		height			: 80px;
		padding			: 3px 10px;
		margin			: initial;
		background		: rgba(0,0,0,0.1);
		border-radius	: 5px;
		align-items		: baseline;
		z-index			: var(--z-footer-botton);
	}

	.map-controls,
	#model-select  {
		color			: initial;
		text-shadow		: 1px 1px 0 #FFF, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
	}

	#model-select {
		width			: 7rem;
	}

	.map-controls span {
		width	: 8rem;
	}
	
	.map-date-label {
		bottom			: 15px;
		right			: 0px;
		padding			: 0px 10px;
		z-index			: var(--z-map-info);
	}

	/* テーブル */
	.status-table-container {
		padding		: 15px 10px;
		width		: calc(100% - 10px);
		margin		: initial;
	}

	#status-table {
		overflow: visible;	/* sticky用 */
	}

	.status-table {
		max-width		: 100%;
		min-width		: 600px;
	}

	.status-table th,
	.status-table td {
		padding: 5px;
	}

	.location-header,
	.model-header,
	.date-header{
		min-width: initial;
	}

	.table-wrapper {
		gap			: 5px;
		overflow-x	: auto;
		overflow-y	: visible;
		-webkit-overflow-scrolling: touch;
	}
	
	.model-header{
		position: initial;
	}

	.model-cell {
		left:initial;
	}

/* ========================================
コントロールセクション: モバイル
======================================== */
	.scroll-hint-icon {	/* スクロールヒント */
		margin-bottom: 30px;
		border-radius: 10px !important;
	}
	.scroll-hint-icon-wrap {
		left : 100px !important; /* 基準日より右に表示させたい */
	}

	#control-box {
		display		: grid;
		height		: 50px;
		bottom		: 13px;
		align-items	: center;
		gap			: 1rem;
		grid-template-columns	: 60px 60px 60px 1fr;
    	grid-template-rows		: 60px 0;
	}

	#control-box.on-footer{
		position: relative;
	}

	#control-box.on-footer .date-nav-btn {
		position: relative;
	}

	#calendarLabel {
		grid-column	: 2 / 3;
        grid-row	: 1 / 2;
		justify-self: left;
	}

	.calendar-btn {	/* カレンダーボタン */
		width		: 45px;
		height		: 45px;
	}

	.today-btn {
		width		: 45px;
		height		: 45px;
		grid-column	: 3 / 4;
        grid-row	: 1 / 2;
		justify-self: left;
        align-self	: center;
		
	}
	
	.today-txt {
		position	: absolute;
		left		: 7px;
		bottom		: 4px;
		color		: var(--bg-dark-font);
		letter-spacing: 0.05em;
		font-size	: initial;
	}

	.date-nav-btn {	/* 1日変更ボタン */
		position		: relative;
		top				: 2px;
		padding			: 8px 12px;
		border-radius	: 20%;
		width			: 42px;
		height			: 42px;
	}

	.date-nav-text {
		top				: initial;
		left			: 4px;
		bottom			: 1px;
	}

	#dateNavDivLeft {
		left			: 10px !important;
	}

	#dateNavDivRight {
		grid-column		: 4 / 5;
		grid-row		: 1 / 2;
		margin-right	: 20px;
	}

	.status-icon {
		font-size: 20px;
	}

	.feedback-link {
		grid-column	: 3 / 4;
    	grid-row	: 1 / 2;
	}

/* ========================================
フィードバックセクション: モバイル
======================================== */
	.feedback-bottom {
		width		: fit-content;
		left		: 25px;
	}

	.feedback-btn {
		width		: 45px;
		height		: 45px;
		font-size	: 20px;
	}

	.feedback-contact-btn {
		padding		: 10px 15px;
	}

	/* モーダル */
	.modal-content {
		padding		: 20px;
		width		: calc(100vw - 10px);
		max-width: 84%;
	}
}

/* タブレット向け */
@media (min-width: 769px) and (max-width: 1024px) {
	.status-table-container {
		max-width	: calc(100% - 10px);
		padding		: 20px 15px;
	}
}