/* ==================== 共通: [+]ボタンは常に非表示 ==================== */
.expand-toggle {
	display: none !important;
}

/* ==================== PC表示（641px以上）: ヘッダー＋詳細文をセル内に表示 ==================== */
@media screen and (min-width:641px){
	.expandable-item {
		margin: 0;
		padding: 0;
	}

	.expandable-header {
		padding: 0;
		font-size: inherit;
		font-weight: bold;
		cursor: auto;
		user-select: auto;
		display: block;
		line-height: inherit;
	}

	/* 詳細文はセル内にそのまま表示 */
	.expanded-detail {
		display: block;
	}

	/* 日付・時刻・タイトルはヘッダーやセルと重複するため非表示 */
	.expanded-detail .modal-header,
	.expanded-detail .expanded-time,
	.expanded-detail .expanded-title {
		display: none !important;
	}

	.expanded-comment {
		font-size: 90%;
		line-height: 140%;
		word-break: break-word;
	}

	.expanded-action {
		text-align: right;
	}
}

/* ==================== スマートフォン表示（640px以下）: モーダル表示 ==================== */
@media screen and (max-width:640px){
	img{
		max-width: 100%;
		height: auto;
		width /***/:auto;
	}
	#container{
		width:100%;
	}

	body {
		font-size: 13pt;
		margin: 0 ;
		padding: 0 ;
	}
	div#data{
		margin: 1px -2px;
		padding: 3px;
	}

	#coment{
		padding: 15px;
		line-height:180%;
		text-align:center;
	}
	#coment a#ToCal{
		max-width: 80%;
		display: inline-block;
		padding: 15px;
		margin: 0 auto;
		text-decoration: underline;
	}
	#TopImage{
		text-align:center;
	}
	#TopImage img{
		max-width: 100%;
		height: auto;
		width /***/:auto;
	}

	#CalBox{
		padding:0;
		margin:8px auto;
		width:100%;
		text-align:center;
		display: block;
	}
	#CalBox div#YMBox{
		clear:both;
		height:26px;
		margin:10px auto 0;
		text-align:center;
	}
	#CalBox div#YMBox_l{
		width:100%;
		text-align:center;
		float:none;
		margin:10px 0;
	}
	#CalBox div#YMBox_c{
		text-align:center;
		float:none;
		width:100%;
	}
	#CalBox div#YMBox_c ul{
		padding:0;
		margin:0 auto;
		width:100%;
	}
	#CalBox div#YMBox_c{
	}
	#CalBox div#YMBox_c ul#MBox li{
		padding:15px 0;
		width:16.66666%;
		float:left;
		list-style-type: none;
		text-decoration: underline;
	}
	#CalBox div#YMBox_c ul#MBox li#MToday{
		text-decoration: blink;
	}
	#CalBox div#YMBox_r{
		width:1px;
		height:26px;
		float:left;
		display:none;
	}
	#CalBox div#Cal{
		clear:both;
	}

	#CalBox #MonthBox td{
		width:40px;
	}

	td div#daytitle{
		font-size: 60%;
		line-height: 140%;
		font-weight: bold;
	}
	td div#daycoment{
		font-size: 55%;
		line-height: 120%;
	}
	div.status{
		padding: 5px 0;
		background-color: #FFFFFF;
		margin: 5px 0;
		text-align:left;
	}

	div.status ul{
		padding:0;
		margin:0 10px;
		text-align: center;
	}
	div.status ul li{
		padding:4px;
		display:inline;
		float:none;
		list-style-type: none;
		white-space: nowrap;
		line-height: 1.1em;
		font-size: 80%;
	}

	#CalBox #cal{
		margin:10px 0 0 0;
		max-width: 100%;
		height: auto;
		width /***/:auto;
	}

	#DayOfWeek td{
		width:14%;
		text-align: center;
	}
	#CalTable td{
		vertical-align: top;
		padding:1px;
		background-color:#ffffff;
	}

	#CalBox #cal td .holiday{
		font-size: 80%;
	}

	#CalTable .expandable-item {
		position: relative;
	}

	#CalTable .expandable-header {
		cursor: pointer;
		user-select: none;
		display: flex;
		align-items: center;
		gap: 3px;
		line-height: 1.2em;
		padding: 2px 0;
		font-size: 55%;
	}

	#CalTable .expand-toggle {
		display: none;
		width: 12px;
		height: 12px;
		line-height: 12px;
		text-align: center;
		font-weight: 700;
		font-size: 10pt;
		transition: transform 0.25s ease;
		flex-shrink: 0;
	}

	#CalTable .expanded-detail {
		display: none;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90%;
		max-width: 500px;
		max-height: 70vh;
		background: white;
		z-index: 9999;
		box-sizing: border-box;
		overflow-y: auto;
		overflow-x: hidden;
		font-size: 13pt;
		line-height: 1.6em;
		border-radius: 8px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
		padding: 0;
	}

	/* モーダル背景のダークオーバーレイ */
	#CalTable .expandable-item.expanded::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9998;
	}

	#CalTable .expandable-detail > * {
		position: relative;
		z-index: 1;
		background: transparent;
		padding: 10px 15px;
	}

	#CalTable .modal-header {
		font-weight: bold;
		font-size: 14pt;
		background: #f5f5f5;
		padding: 12px 15px;
		margin: 0;
		border-bottom: 1px solid #ddd;
		border-radius: 8px 8px 0 0;
		color: inherit;
		position: sticky;
		top: 0;
		z-index: 100;
		display: block !important;
	}

	#CalTable .expandable-detail > .modal-header {
		padding: 12px 15px;
		z-index: 100;
		margin: 0;
	}

	#CalTable .expanded-time {
		font-weight: normal;
		color: inherit;
		margin: 0 0 8px 0;
		font-size: 13pt;
		display: block;
		padding: 10px 15px;
	}

	#CalTable .expanded-title {
		font-weight: bold;
		color: inherit;
		margin: 8px 0 10px 0;
		font-size: 13pt;
		display: block;
		padding: 0 15px;
	}

	#CalTable .expanded-comment {
		margin: 10px 0 15px 0;
		word-break: break-word;
		white-space: pre-wrap;
		font-size: 13pt;
		display: block;
		padding: 0 15px;
	}

	#CalTable .expanded-action {
		margin: 0;
		text-align: right;
		padding: 10px 15px;
		border-top: 1px solid #ddd;
		display: block;
		background: white;
		position: relative;
		z-index: 1;
	}

	#CalTable .expanded-action::after {
		content: '×';
		position: absolute;
		top: 10px;
		right: 15px;
		font-size: 24pt;
		cursor: pointer;
		color: #999;
		line-height: 1;
	}

	#CalTable .expanded-action input {
		padding: 6px 12px;
		font-size: 12pt;
		background: #f0f0f0;
		border: 1px solid #ccc;
		border-radius: 3px;
		cursor: pointer;
		margin-right: 10px;
		margin-bottom: 10px;
	}

	#CalTable .expandable-item.expanded .expanded-detail {
		display: block;
	}

	#CalTable .expandable-item.expanded .expand-toggle {
		transform: rotate(45deg);
	}
}