@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;200;300;400;500;600;700;800;900&family=Oswald:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:wght@100..700&display=swap');


/*==================================================================*/

/*:全体調整・共通設定*/

/*==================================================================*/

:root{
	--maxw:   unset;
	--border: #e6e6e6;
	--muted: #666;
	
	--col-time: 90px;
	--col-category: 90px;
	
	--visual-viewport-top: 0px;
}

* {
	box-sizing: border-box;	
}
body{
	line-height: 1.55;
	background-color: #0d3681;
	color: #fff;
	font-family: "Oswald", "M PLUS 1p", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	background-image: linear-gradient(0deg, #7d4b6c, #000000);
	-webkit-text-size-adjust: 100%;
}
body.bg-mode-photo.bg-photo--unset:before {
	content: 'PHOTO MODE';
	position: absolute;
	width: 100%;
	height: 100%;
	font-size: 30vw;
	line-height: 1;
	color: rgba(209, 201, 173, 0.3);
	z-index: -1;
	white-space: unset;
	color: #8f8a88;
	background-image: linear-gradient(0deg, #fff, #999);
}



html, body{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}
a{ word-break: break-all; }



.topbar{
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.btn{
	padding: 3px 12px;
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 8px;
	cursor: pointer;
}

/*==================================================================*/

/*:背景関連*/

/*==================================================================*/


/* 背景モード判別（写真モード） */
body.bg-mode-photo {
	
}
/* 写真モード：画像あり */
body.bg-mode-photo.bg-photo--has-image {
	
}
/* 写真モード：未設定 */
body.bg-mode-photo.bg-photo--unset {
	
}

.bg-photo-status{
	font-size: 12px;
	opacity: 0.85;
}
.bg-photo-status.is-unset{
	opacity: 0.75;
}
.bg-photo-status.is-set{
	opacity: 0.95;
}





body::before{
	content: '';
	position: fixed;
	inset: 0;
	background: radial-gradient(
		circle at 50% 30%,
		rgba(80,120,255,.12),
		rgba(10,20,60,.65) 70%
		);
	z-index: -1;
	pointer-events: none;
}
/* ===== 背景Canvas（夜桜・花びら） ===== */
#bgCanvas{
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none; /* UI操作を邪魔しない */
}
#wrap{
	position: relative;
	z-index: 1;
}
/* 背景の明るさ・コントラスト（JSから変数操作） */
:root{
	--bg-brightness: 1;
	--bg-contrast: 1;
}

#bgCanvas{
	filter: brightness(var(--bg-brightness))
		contrast(var(--bg-contrast));
}

/* 写真背景レイヤー（ベータ版実装） */
#bgPhoto{
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: scroll;
	
	/* JS から変数を入れる（0..60 / 40..100） */
	--bg-photo-overlay: 20;
	--bg-photo-opacity: 100;
	
	opacity: calc(var(--bg-photo-opacity) / 100);
	
	display: none; /* photo モード時のみ表示 */
}

/* 暗幕（overlay） */
#bgPhoto::after{
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0,0,0, calc(var(--bg-photo-overlay) / 100));
}




/* モーション軽減を尊重 */
@media (prefers-reduced-motion: reduce){
	#bgCanvas{
		display: none;
	}
}

/*==================================================================*/

/*:コンパネ関連*/

/*==================================================================*/


/* Control panel launcher */
.app-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}
.app-header span {
	font-family: "Oswald", sans-serif;
	font-size: 18px;
	font-weight: 400;
}



.header-actions{
	position: fixed;
	right: 20px;
	top: 5px;
	z-index: 99;
	display: flex;
	align-items: center;
	gap: 8px;
}

.header-actions .btn{
	flex: 0 0 auto;
}

.header-actions .gear-btn{
    padding: 3px 5px;
	line-height: 1;
}

.header-actions .gear-btn img{
	width: 30px;
	height: auto;
}

.header-actions .refresh-btn{
    padding: 4px 5px;
	line-height: 1;
	font-size: 30px;
}


.header-actions .og-toggle-btn {
	width: 42px;
	height: 42px;
	padding: 3px 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	line-height: 1;
}

.header-actions .og-toggle-btn__label {
	font-family: "Oswald", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
}

.header-actions .og-toggle-btn__state {
	min-width: 28px;
	padding: 2px 5px;
	border-radius: 999px;
	background: #787878;
	color: #fff;
	font-family: "Oswald", sans-serif;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
}

/* ON状態 */
.header-actions .og-toggle-btn.is-active .og-toggle-btn__state {
    background: #4CAF50;
    color: #fff;
    letter-spacing: 2px;
}



/* スマホ縦型 */
@media (max-width: 500px){
	.header-actions {
		top: calc(5px + var(--visual-viewport-top));
	}
}



/* Modal */
.modal{
	position: fixed;
	inset: 0;
	display: none;
	z-index: 1000;
}

.modal.is-open{
	display: block;
}

.modal__backdrop{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.45);
}

.modal__dialog{
	position: fixed;
	top: 12px;
	right: 12px;
	left: auto;
	bottom: auto;
	width: min(720px, calc(100% - 24px));
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.25);
	color: #333;
}
/* ===== モーダル：ダイアログを縦flexにして本文領域を確保 ===== */
.modal__dialog{
	display: flex;
	flex-direction: column;
	max-height: 92vh; /* 既存思想に合わせる */
	overflow: hidden; /* 本文スクロールを内側に閉じ込める */
	background: #fff; /* 念のため明示（白背景が途切れないように） */
}


/* 背景：詳細設定表示中はダイアログを右上固定 */
#panelModal.is-bg-advanced .modal__dialog{
	position: fixed;
	top: 12px;
	right: 12px;
	left: auto;
	bottom: auto;
	
	margin: 0;                 /* 中央寄せ解除 */
	width: min(520px, calc(100vw - 24px));
	max-height: calc(100vh - 24px);
	
	transform: none;           /* 中央寄せ対策（将来用） */
}

/* スマホ縦型 */
@media (max-width: 800px){
	#panelModal .modal__dialog{
		top: 40px;
		overflow: visible;
	}
	#panelModal.is-bg-advanced .modal__dialog{
		top: 40px;
		overflow: visible;
	}
}


/* 背景変化を見やすくする */
#panelModal.is-bg-advanced .modal__backdrop{
	background: rgba(0,0,0,0);
}
#panelModal.is-bg-advanced .modal__content{
	padding: 12px;
}



/* タブの下の本文領域 */
.modal__body{
	flex: 1 1 auto;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff; /* 本文が透けないように必ず白 */
	border-radius: 0 0 10px 10px;
}

/* tabs */
.cp-tabs{
	display: flex;
	gap: 5px;
	padding: 10px 16px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background-image: linear-gradient(#fff, #ddd);
	border-radius: 10px 10px 0 0;
}

.cp-tab{
	flex: 0 0 auto;
	padding: 2px 12px;
	border: 1px solid #ccc;
	background: #eee;
	color: inherit;
	font: inherit;
	white-space: nowrap;
	font-size: 15px;
}
.cp-tab[aria-selected="true"]{
	background: #fff;
	border-bottom: none;
}

/*==================================================================*/

/*:モーダル内部コンテンツ*/

/*==================================================================*/

.cp-panel{
	padding: 12px;
	min-height: 200px;
}
#panel-other.cp-panel .for-use {
	font-size:16px;
}
#panel-other.cp-panel .version {
	font-size: 12px;
	margin-left: 10px;
}
#panel-other.cp-panel ul {
	padding: 0 0 0 20px;
	margin-top: 0;
}
#panel-other.cp-panel ul li {
    font-size: 14px;
    font-family: 'M PLUS 1p';
}
#panel-other.cp-panel ul li em {
	font-style: normal;
	font-weight: 600;
}




.bg-controls .bg-mode {
	display: inline-flex;
	gap: 0;
	align-items: center;
	margin: 6px 0 0 0;
	overflow: hidden; 
	border: 1px solid #ddd; 
	border-radius: 10px; 
}
.bg-controls .bg-mode .bg-mode__btn {
	background: #fafafa;
	padding: 3px 20px;
	border-radius: 0;
	border: 0; 
	border-right: none;
	font-size: 16px;
}
.bg-controls .bg-mode .bg-mode__btn + .bg-mode__btn{
	border-left: 1px solid #ddd;
}
.bg-controls .bg-mode .bg-mode__btn.is-active {
	background: #555;
	font-weight: 600;
	color: #fff;
}

.bg-controls .bg-mode .bg-mode__btn:first-child {
	
}
.bg-controls .bg-mode .bg-mode__btn:last-child {
	
}
.bg-controls .bg-row.adv {
	margin: 10px 0;
	display: flex;
	justify-content: right;
	width: 100%;
}
.bg-controls .bg-photo-actions .bg-photo-status {
	font-size:13px;
}
.bg-controls .bg-field .bg-photo-actions {
	margin: 10px 0;
}



#bgSakuraNotice {
	font-size:14px;
	font-family:"M PLUS 1p";
	margin-top:5px;	
}
#bgSakuraNotice a {
	font-size:14px;
}


/*横向き設定 */
@media (orientation: landscape) and (max-height: 500px){
	.cp-panel * {
		font-size:16px;
	}
	.cp-panel ul li {
		font-size:14px;
	}
	.bg-controls {
		position: relative;
	}
	.bg-controls .setting {
		overflow: visible;
	}
}
/* スマホ縦型 */
@media (max-width: 800px){
	.cp-panel * {		
		font-size:16px;		
	}
	.cp-panel ul li {
		font-size:14px;
	}
}

/*===========================================-*/
/*-背景設定パネル */
/*===========================================-*/
.panel-section.bg {
	display: flex;
	flex-wrap: wrap;
}
.bg-controls {
	display: flex;
	flex-wrap: wrap;
}
.bg-controls .bg-row  {
	width: 50%;
}
.bg-controls .bg-row * {
	font-size:16px;		
}
.bg-controls .setting {
	width: 50%;
	background: #eee;
	padding: 10px 20px;
}
.bg-controls .setting .bg-row {
	width: 100%;
}


.bg-controls .bg-row .bg-photo-note {
	font-size: 14px;
	line-height: 120%;
	padding: 0 12px 0 0;
}

.bg-controls .bg-row .bg-label {
	font-size: 15px;
	font-weight: 600;
}
#bgPhotoDisplaySettings .bg-label {
	margin-top:10px;
}
.bg-controls .bg-row button {
	font-size: 14px;
	white-space: nowrap;
}




/** スマホ縦型 */
@media (max-width: 800px){
	.bg-controls {
		width:100%;
	}
	.bg-controls .bg-row {
		width: 100%;
		max-width: 100%;
	}
}
/*　写真　*/

/* ===== 背景タブ ===== */

#panel-bg:not([hidden]){
	display: flex;
	flex-direction: column;
	width: 100%;
	/*min-height: 0;*/
}
#panel-bg[hidden]{
	display: none;
}

/* panel-bg 内ルートセクション*/
#panel-bg > .panel-section{
	flex: 1 1 auto;
	min-height: 0;
}
#panel-bg .bg-view{
	flex: 1 1 auto;
	min-height: 0;
}


#panel-bg .bg-advanced-body{
	flex: 1 1 auto;
	min-height: 0;
}
/**背景：詳細ビューは1カラム（basicの2カラムCSSを無効化） */

#panel-bg .bg-view--advanced .bg-controls{
	display: block;
}

#panel-bg .bg-view--advanced .bg-row{
	width: 100%;
}

#panel-bg .bg-view--advanced .bg-label{
	display: none;
}

#panel-bg .bg-view--advanced .setting{
	width: 100%;
}

#panel-bg .bg-view--advanced .bg-field{
	width: 100%;
}
#panel-bg .bg-advanced-head{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}

#panel-bg .bg-advanced-title{
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 詳細内のフォーム配置 */
#panel-bg .bg-advanced-body{
	padding: 10px;
}

/* 2列を維持できる幅のみ2列、それ以外は1列 */
@media (max-width: 700px){
	#panel-bg .bg-advanced-body .bg-photo-grid{
		grid-template-columns: 1fr;
	}
}
@media (orientation: landscape) and (max-height: 500px){
	#panel-bg .bg-view--advanced{
		min-height: 0;
	}
	#panel-bg .bg-advanced-body{
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		max-height: calc(92vh - 110px); /* ヘッダ分を引く */
	}
}

.bg-photo-ui{
	margin-top: 10px;
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
.bg-photo-note{
	width: 100%;
	font-size: 12px;
	opacity: 0.75;
}

/* 写真表示設定（UIのみ） */
.bg-photo-statusline{
	display:flex;
	gap:10px;
	align-items:center;
	margin: 6px 0 10px;
	flex-wrap: wrap;
}
.bg-photo-statusbadge{
	display:inline-flex;
	align-items:center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.4;
	border: 1px solid rgba(255,255,255,0.25);
}
.bg-photo-statusbadge.is-unset{ opacity:0.85; }
.bg-photo-statusbadge.is-set{ opacity:0.95; }

.bg-photo-statushint{
	font-size: 12px;
	opacity: 0.75;
}

.bg-photo-grid{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px 12px;
}

.bg-photo-grid--details{
	margin-top: 10px;
}

.bg-photo-item{
	display:flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.bg-photo-item__label{
	font-size: 12px;
	opacity: 0.8;
}

.bg-photo-item__control{
	width: 100%;
}

.bg-photo-item--toggle .bg-photo-toggle{
	display:flex;
	gap: 8px;
	align-items:center;
}

.bg-photo-toggle__text{
	font-size: 12px;
	opacity: 0.8;
}

.bg-photo-details{
	margin-top: 10px;
	border-top: 1px solid rgba(255,255,255,0.12);
	padding-top: 8px;
}

.bg-photo-details__summary{
	cursor: pointer;
	font-size: 13px;
	opacity: 0.9;
	user-select: none;
}

.bg-photo-details[open] .bg-photo-details__summary{
	opacity: 1;
}

.bg-photo-note{
	margin-top: 8px;
	font-size: 12px;
	opacity: 0.75;
}



/* 詳細 */
.bg-advanced-body{
	
}

/* スマホ横向き */
@media (orientation: landscape) and (max-height: 500px){
	.bg-advanced-body{
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		max-height: calc(92vh - 120px);
	}
	.bg-photo-grid{
		gap: 8px 10px;
	}
}


/* 小さい端末：1列化して高さを節約 */
@media (max-width: 430px){
	.bg-photo-grid{
		grid-template-columns: 1fr;
	}
}

/*===========================================-*/
/*-モーダル内部
/*===========================================-*/

/* モーダル内部を縦レイアウトにして本文だけスクロール */
.modal__content{
	display: flex;
	flex-direction: column;
	max-height: 92vh; /* 既存に合わせて調整 */
}

.modal__body{
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}



/*横向き設定 */
@media (orientation: landscape) and (max-height: 500px){
	.modal__content{
		max-height: 96vh;
	}
	.cp-tab{
		padding: 6px 10px;
	}
	.cp-panel{
		height: auto;
		overflow: visible;
	}
	
	.modal__dialog{
		max-height: 96vh;
	}
	.bg-controls {
		
	}
	
	
}


.modal__title{
	font-family: "M PLUS 1p", sans-serif;
	font-size: 14px;
	font-weight: 600;
}

.modal__body .topbar{
	margin-bottom: 4px;
}

.modal__body .mode{
	margin-bottom: 8px;
}

body.modal-open{
	overflow: hidden;
}


#list .loading {
	min-height: 30vh;
	display: flex;
	align-items: center;
}
.loading{
	color: #666;
	padding: 12px 0;
}


.err{
	color: #b00020;
	font-weight: 600;
	padding: 8px 0;
}

.mode{
	display: inline-flex;
	gap: 0;
	align-items: center;
	margin: 6px 0 0 0;
}

/**ボタン*/
.btn--ghost{
	border: 1px solid #ccc;
	background: #fafafa;
	padding: 3px 20px;
}

.btn--ghost.is-active{
/*	border-color: #999;
	background: #555;
	font-weight: 600;
	color: #fff;*/
}

.mode .btn {
	border-radius: unset;
	border-right: none;
}
.mode .btn:first-child {
	border-radius: 10px 0 0 10px;
}
.mode .btn:last-child {
	border-right: 1px solid #ccc;
	border-radius: 0 10px 10px 0;
}



/*===========================================-*/
/*-モーダル閉じるボタン*/
/*===========================================-*/
#closePanel {
	position: absolute;
	right: 12px;
	top: 12px;
	font-family: 'M PLUS 1p';
	font-weight: 800;
	font-size: 20px;
	padding: 7px 10px;
	line-height: 1;
	background: #333;
	color: #fff;
	z-index: 10;
}
/* スマホ縦型 */
@media (max-width: 800px){
	#closePanel {
		right: 11px;
		top: -28px;
		background: #eee;
		color: #000;
	}
}


/*===========================================-*/
/*- ステータス */
/*===========================================-*/
.status{ margin-top: 12px; color: var(--muted); }
.status.err{ color:#b00020; font-weight:600; }

.list{ margin-top: 12px; }
.empty{
	color: #ddd;
	font-size: 12px;
	padding-left: 10px;
}

/*===========================================-*/
/*- カテゴリフィルタ */
/*===========================================-*/
.filters{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 3px;
	padding: 7px 20px;
	border: 1px solid #ddd;
	border-radius: 8px;
}

.filters .btn--ghost{
	padding: 3px 14px;
	font-size: 12px;
}

.filters .filters-label{
	font-size: 12px;
	color: #666;
	margin-right: 6px;
}
/*===========================================-*/
/*- 非表示設定 */
/*===========================================-*/
.panel-section .chk {
	font-size: 14px;
}

/** チェックボックスのアイコン */
.panel-section input[type="checkbox"] {
	position: relative;
	width: 20px;
	height: 20px;
	border: 1px solid #333;
	border-radius: 3px;
	vertical-align: -7px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.panel-section input[type="checkbox"]:checked {
	background: #555;
}
.panel-section input[type="checkbox"]:checked:before {
	position: absolute;
	top: 0px;
	left: 4px;
	transform: rotate(42deg);
	width: 6px;
	height: 11px;
	border-right: 3px solid #fff;
	border-bottom: 3px solid #fff;
	content: '';
}

/*===========================================-*/
/*-コンパネ：背景設定  */
/*===========================================-*/
.cp-bg-group{
	margin-top: 12px;
}

.cp-bg-group label{
	display: block;
	font-size: 12px;
	margin-bottom: 4px;
	opacity: .85;
}

.cp-bg-group input[type="range"],
.cp-bg-group select{
	width: 100%;
}
/*===========================================-*/
/*-背景写真：スライダー */
/*===========================================-*/

.bg-photo-item__head{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.bg-photo-item__value{
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

/* range 本体 */
.bg-photo-range{
	width: 100%;
	height: 34px;
	padding: 0;
	margin: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

/* Safari / Chrome：トラック */
.bg-photo-range::-webkit-slider-runnable-track{
	height: 8px;
	border-radius: 999px;
	background: #d5d5d5;
}

/* Safari / Chrome：つまみ */
.bg-photo-range::-webkit-slider-thumb{
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #1689f5;
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.25);
	margin-top: -9px;
}

/* Firefox：トラック */
.bg-photo-range::-moz-range-track{
	height: 8px;
	border-radius: 999px;
	background: #d5d5d5;
}

/* Firefox：つまみ */
.bg-photo-range::-moz-range-thumb{
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #1689f5;
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.25);
}







/*==================================================================*/

/*:全体構造（TIME & SCHEDULE）*/

/*==================================================================*/


#wrap {
	width: 100vw;
	min-height: 100vh;
	margin: 0;
	max-width: none; 
	display: flex;
	justify-content: flex-end;
}
#time {
	width: 40%;
	position: fixed;
	top: unset;
	bottom: 0;
	left: 0;
	padding: 20px 40px 20px 40px;
}
/**背景写真あり設定（シャドウ）*/
body.bg-mode-photo.bg-photo--unset #time,
body.bg-mode-photo.bg-photo--has-image #time {
	text-shadow: 2px 2px 4px black;
}
#schedule {
	width: 60%;
	padding: 0 20px;
	box-sizing: border-box;
}
/*スマホ縦型*/
@media (max-width: 500px){
	#schedule {
		padding-top: var(--visual-viewport-top);
	}
}


/*===========================================-*/
/*-追加読み込みボタン-*/
/*===========================================-*/
body.is-initial-loading #loadMoreBar {
	display: none !important;
}



#loadMoreBar {
	display: flex;
	justify-content: center;
	gap: 10px;
}
#loadMoreBar[hidden]{
	display: none !important;
}
#loadMoreBar:not([hidden]){
	display: flex;
	justify-content: center;
	gap: 10px;
}



#loadMoreBar .loadmore-btn {
	border-radius: 8px;
	padding: 7px 30px 5px 16px;
	line-height: 1;
	position: relative;
	background: #efefefe6;
	font-size: 16px;
	color: #333;
}
#loadMoreBar .loadmore-btn:after {
	position: absolute;
	content: "";
	height: 7px;
	width: 7px;
	transform: rotate(45deg);
	border-right: 3px solid #999;
	border-bottom: 3px solid #999;
	top: -4px;
	bottom: 0;
	margin: auto;
	right: 15px;
}

#loadMoreWeek {
	
}
#loadMoreMonth {
	
}


/*===========================================-*/
/*-イベントタイムライン*/
/*===========================================-*/
/** 日付表記 */
.date-wrap{ display: inline-flex; gap: 6px; }
.date-label{ color: var(--muted); font-family: "M PLUS 1p"; }
.date{
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	line-height: 1.1;
	margin-top: 8px;
}

.date-num{
	font-family: "Oswald", sans-serif;
	font-size: 18px;
	font-weight: 400;
}

.date-kanji{
	font-family: "M PLUS 1p", sans-serif;
	font-size: 16px;
	font-weight: 500;
	margin: 0px 0px 0 4px;
}
.date-kanji.week{
	margin: 0 0 0 -10px;
}
/** イベント3カラム */
.event {
	display: grid;
	grid-template-columns: var(--col-time) var(--col-category) 1fr;
	gap: 14px;
	align-items: start;
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 10px 12px;
	margin: 6px 0;
	background: rgb(239 239 239 / 90%);
	position: relative;
}
/**背景写真あり設定（透過率変更）*/
body.bg-mode-photo.bg-photo--has-image .event {
	background: rgb(239 239 239 / 94%);
}
body.bg-mode-photo.bg-photo--has-image .event.category-bd {
	background: none;
}




/** 時間 */
.col-time .time{
	font-family: "Oswald";
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	min-height: 1.2em;
	font-size: 17px;
	color: #333;
}

/** カテゴリー */
.col-category{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: flex-start;
	margin-top: 3px;
}

.category-label{
	font-family: "M PLUS 1p";
	font-size: 12px;
	padding: 4px 10px;
	line-height: 1;
	border-radius: 999px;
	width: 90px;
	text-align: center;
	color: #fff;
	background: #333;
}

/** Main column */
.col-main{
	min-width: 0;
	color: #333;
	margin-right: 30px;
}
/** タイトル */
.title{
	font-family: "M PLUS 1p";
	font-weight: 600;
	font-size: 16px;
	line-height: 120%;
	margin-bottom: 3px;
	margin-top: 4px;
	color: #333;
}

.event .loc {
	font-size: 13px;
	font-family: 'M PLUS 1p';	
}

/** メモ */
.desc{
	margin-top: 0px;
	white-space: pre-wrap;
	font-family: "M PLUS 1p";
	color: #333;
	font-size: 13px;
	line-height: 140%;
}



/** カテゴリ色の適用 */

.category-label{
	font-family: "M PLUS 1p";
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 600;
	background: #333;   /* フォールバック */
	color: #fff;           /* フォールバック */
}

/** cat-xxx が付いている場合だけ色適用 */
.category-label[class*="cat-"]{
	color: #fff;
	background: var(--cat-color);
}

/**INFOボタン*/
.event .event-info {
    position: absolute;
    right: 6px;
    bottom: 6px;
	background: #b2b2b2;
	border-radius: 100px;
	font-size: 15px;
	padding: 6px;
	font-weight: 700;
	cursor: pointer;
}
.event.category-og .event-info {
    background: #ddd;
    color: #9E9E9E;
}
.category-bd .event-info {
	display:none;
}


/*===========================================-*/
/*-スマホ横想定（時計・天気ミニサイズ）*/
/*===========================================-*/
@media (max-height: 500px){
	/* タイトル */
	.title{
		font-size: 14px;
	}
	/* 場所 */
	.loc {
		font-size: 11px;
	}	
	/* メモ */
	.desc{
		font-size: 11px;
	}	
}
/*===========================================-*/
/*-タブレット縦型：2COL */
/*===========================================-*/
@media (max-width: 900px) and (min-height: 800px){
	.event{
		grid-template-columns: 1fr;
		gap: 2px;
		position: relative;
	}
	.col-time{
		order: 1; 
	}
	.col-category{
		order: 2;
		position: absolute;
		right: 10px;
		top: 5px;
	}
	.col-main{ order: 3; }
}
/*===========================================-*/
/*- タブレット縦型：1COL  */
/*===========================================-*/
@media (max-width: 800px){
	.event{
		grid-template-columns: 1fr;
		gap: 2px;
		position: relative;
	}
	.col-time{
		order: 1; 
	}
	.col-category{
		order: 2;
		position: absolute;
		right: 10px;
		top: 5px;
	}
	.col-main{ order: 3; }
}

/*==================================================================*/

/*:カテゴリ別カラー定義*/

/*==================================================================*/

/* 必要に応じて追加・調整 */

.cat-tv{
	--cat-color: #2f4abe;
}
.cat-radio{
	--cat-color: #59adf6;
}
.cat-podcast{
	--cat-color: #59adf6;
}
.cat-live{
	--cat-color: #43a047;
}
.cat-news{
	--cat-color: #6d4c41;
}
.cat-event{
	--cat-color: #6d4c41;
}
.cat-net{
	--cat-color: #333;
}
.cat-fc{
	--cat-color: #6d4c41;
}
.cat-deadline{
	--cat-color: #6e6b60;
}
.cat-insta{
	--cat-color: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.cat-showroom{
	--cat-color: linear-gradient(45deg,rgba(255, 178, 84, 1) 37%, rgba(237, 221, 83, 1) 100%);
}
.cat-youtube {
	--cat-color: #FF0000;
}
.cat-lemino {
	--cat-color: linear-gradient(90deg, #E6007E 0%, #FF7F00 100%);
}
.cat-book {
	--cat-color: #bca59d;
}
.cat-concert {
	--cat-color:linear-gradient(45deg,rgba(255, 138, 204, 1) 8%, rgba(255, 168, 219, 1) 50%, rgba(255, 138, 204, 1) 88%);
}
.cat-bd {
	--cat-color: #ff57c2;
}
.cat-cd {
	--cat-color: #ff57c2;
}
.cat-movie {
	--cat-color: #666;
}
.cat-info {
	--cat-color: #ff57c2;
	font-weight: 400;
}
.category-label.cat-og {
	display: none;
}
.event.category-og {
    background: rgb(203 205 217 / 90%) !important;
    border: 1px solid #b8b8b8;
}


/* 誕生日の処理 */
.category-bd  .title{
	font-weight: 400;
	color: #ff57c2;
}
.event.category-bd {
	display: block;
	background: none;
	border: none;
	padding: 0 0 0 26px;
	margin: 0;
	position: relative;
}
.event.category-bd:before {
	position: absolute;
	display: block;
	content: "";
	width: 20px;
	height: 20px;
	left: 0;
	top: 2px;
	background-image: url(images/icon_bd.png);
	background-size: contain;
}

/*背景写真あり設定（シャドウ）*/
body.bg-mode-photo.bg-photo--unset .event.category-bd,
body.bg-mode-photo.bg-photo--has-image .event.category-bd {
	text-shadow: 1px 1px 2px #752c2c;
}



.event.category-bd .col-time,
.event.category-bd .col-category {
	display: none;
}
.event.category-bd .title {
	
}









.day-block{
	margin: 18px 0 26px;
}

.day-title{
	margin: 0 0 10px;
	font-family: "M PLUS 1p";
	font-size: 18px;
	font-weight: 600;
}
/**背景写真あり設定（シャドウ）*/
body.bg-mode-photo.bg-photo--unset .day-title,
body.bg-mode-photo.bg-photo--has-image .day-title {
	text-shadow: 1px 1px 3px black;
}






.is-today {
	border-left: 5px solid #efefef;
	margin-left: -15px;
	padding-left: 10px;
}
.is-today .day-title {
	/*color: #ff72bc;*/
}
.is-today .event {
	/*background: #fff1f1;
	border-color: #f5c9e4;*/
}

/*==================================================================*/

/*:詳細ウインドウ*/

/*==================================================================*/

.skz-sheet{
	position:fixed;
	inset:0;
	z-index:9999;
	display:none;
}
.skz-sheet.is-open{
	display:block;
}
.skz-sheet__backdrop{position:absolute;
	inset:0;
	background:rgba(0,0,0,.35);
}
/*===========================================-*/
/*-パネル内部*/
/*===========================================-*/
.skz-sheet__panel{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	height: fit-content;
	background: #fff;
	border-radius: 10px;
    padding: 10px 10px 20px 10px;
	box-shadow: 0 -8px 24px rgba(0, 0, 0, .2);
	color: #333;
	width: 60%;
}

@media (max-width: 800px) {
	.skz-sheet__panel{
		width: 94%;
		margin: auto;
	}
}

/**本文ブロック*/
.skz-sheet .skz-sheet__body {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.skz-sheet .detail-head {
	width: 100%;
	flex-direction: row;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 10px;
	margin: 0;
	gap: 5px;
	background: none;
    border: none;
}
/**時間*/
.skz-sheet .detail-head .col-time{
	width: 30%;
}
/**カテゴリー*/
.skz-sheet .detail-head .col-category{
	width: 60%;
	display: flex;
	justify-content: end;
}
.skz-sheet .detail-head .col-category .category-label {
	font-size: 15px;
	white-space: nowrap;
	display: table;
}
.skz-sheet .detail-head .col-main{
	width: 100%;	
	margin-right: 0;
}
.skz-sheet .detail-head .col-main .detail-url a {
	font-family: 'M PLUS 1p';
	font-size: 14px;
	line-height: 1;
	margin: 5px 0;
	display: inline-block;
}
/**タイトル*/
.skz-sheet .title{
	font-weight: 500;
	font-size: 22px;
}
/**説明*/
.skz-sheet .detail-desc {
	white-space: normal;
}
.skz-sheet .detail-desc .detail-desc-default {
	white-space: pre;
	font-size: 15px;
	margin: 10px 0;
	line-height: 130%;
}
.skz-sheet .detail-desc .detail-desc-extra {
white-space: pre-wrap;
    font-size: 15px;
    line-height: 130%;
    margin-top: 5px;
}


/*===========================================-*/
/*-アクションボタン（メタ）*/
/*===========================================-*/
.skz-sheet__actions {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 9px;
	padding: 0 10px;
}
@media (max-width: 800px) {
	.skz-sheet__actions {
		gap: 6px;
	}
}


.skz-sheet__btn{
	width: 32%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 6px;
	border-radius: 10px;
	background: #59adf6;
	font-size: 13px;
	font-family: 'M PLUS 1p';
	text-decoration: none;
	color: #fff;
	font-weight: 600;
}
@media (max-width: 400px) {
	.skz-sheet__btn{
		font-size: 12px;
	}
}
.skz-sheet__actions .meta-url {
	background: #59adf6;	
}
.skz-sheet__actions .meta-lemino,
.skz-sheet__actions .meta-vod,
.skz-sheet__actions .meta-radiko {
	background: #fff;
	color: #59adf6;
	border: 2px solid #59adf6;
	font-size: 14px;
}
.skz-sheet__actions .meta-buy,
.skz-sheet__actions .meta-ebook {
	background: #fff;
	color: #59adf6;
	border: 2px solid #59adf6;
	font-size: 14px;
}
.skz-sheet__actions .meta-x--post {
	background: #000;
}



/*-閉じる*/
.skz-sheet__close{
	position: absolute;
		right: -10px;
		top: -20px;
		font-family: 'M PLUS 1p';
    font-weight: 800;
    font-size: 20px;
    padding: 7px 10px !important;
    line-height: 1;
    background: #333 !important;
    color: #fff;
    z-index: 10;
    border-color: #999 !important;
}





/*==================================================================*/

/*:情報パネル*/

/*==================================================================*/


/*===========================================-*/
/*-PC想定（地点）*/
/*===========================================-*/
/** 地点 */
.panel-section {
	margin-top: 5px;
}
.panel-section .loc-current {
	display: flex;
	font-size: 14px;
	margin-bottom: 5px;
}
.loc-actions{
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}

.loc-coords{
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 8px;
}

#latInput, #lonInput{
	width: 80px;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid #ddd;
}

.loc-msg{
	margin-top: 6px;
	font-size: 12px;
	opacity: .85;
}
.osm-attrib{
	margin-top: 6px;
	font-size: 11px;
	opacity: .75;
}


/*===========================================-*/
/*-PC想定（アナログ時計）*/
/*===========================================-*/

#time .time-clock #analogClock {
	margin: 0 auto;
	display: block;
}

/*===========================================-*/
/*-PC想定（日付時間）*/
/*===========================================-*/

/**Digital area: Today Date + Time (no seconds)  */
#time .digital-clock{
	display: flex;
	flex-direction: column;
	width: 100%;
	justify-content: flex-start;
	align-items: flex-start;
	margin-bottom: 20px;
	position: relative;
}

#time .digital-clock .dt-date{
	font-family: 'Oswald';
	line-height: 1;
	font-size: 22px;
	margin-bottom: 5px;
}
#time .digital-clock .dt-holiday {
	display:inline-block;
}
#time .digital-clock .dt-holiday .dt-holiday-name {
	font-size:18px;
	font-family: 'M PLUS 1p';
	font-weight: 500;
	color: #ff6b6b;
}
#time .digital-clock .dt-time{
	font-family: 'Oswald';
	line-height: 1;
	font-size: 60px;
}

#time .digital-clock .dt-time .dt-num{
	display: inline-block;
	letter-spacing: 3px;
}
#time .digital-clock .dt-colon {
	margin: 0 -8px 0 -7px;
}
#time .digital-clock .dt-ja,
#time .digital-clock .dt-week-ja{
	font-family: 'M PLUS 1p';
	font-size: 19px;
	margin-left: 3px;
}
#time .digital-clock .dt-week {
	margin-left: -0.6em;
}

/** コロン点滅（JSで is-off を1秒ごとにトグル） */
#time .digital-clock .dt-colon.is-off{
	opacity: 0;
}

/**  #digitalClock: DateTime + Holiday  */
#digitalClock .dt-week-ja.is-sun { color: #ff6b6b; }
#digitalClock .dt-week-ja.is-sat { color: #6ba7ff; }
#digitalClock .dt-week-ja.is-holiday { color: #ff6b6b;}

#digitalClock .dt-holiday-name {
	font-weight: 300;
}

/**Schedule .day-title weekday/holiday ===== */
.day-title .date-week-ja.is-sun { color: #ff6b6b; }
.day-title .date-week-ja.is-sat { color: #6ba7ff; }
.day-title .date-week-ja.is-holiday { color: #ff6b6b; }

.day-title .date-holiday-name {
	font-weight: 400;
	font-size: 70%;
}


/*===========================================-*/
/*-PC想定（天気）*/
/*===========================================-*/

.weather {
	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: end;
}
.weather .w-temp {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.weather .w-temp .loc {
	margin-top: 4px;
	color: #ffffff;
	font-family: "M PLUS 1p";
}
.weather .w-temp .loc .weather-loc {
	
}
.weather .w-temp .loc .weather-loc span {
	
}
.weather .w-temp .temp {
	display: flex;
	align-items: baseline;
}
.weather .w-temp .temp .weatherTemp {
	font-size: 50px;
	line-height: 1;
}
.weather .w-temp .temp .weatherTemp .temp-unit {
	font-size: 30px;
	font-weight: 700;
}



.weather .w-temp .temp .wSun {
	
}

/**天気予報*/
.weather .w-forecast {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}


/** Material Symbols (weather icons) */
.material-symbols-rounded{
	font-family: 'Material Symbols Rounded';
	font-weight: normal;
	font-style: normal;
	font-size: 50px;
	line-height: 1;
	display: inline-flex;
	vertical-align: middle;
	user-select: none;
}

.w-forecast .wicon {
	font-size: 50px;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 50;
}



.w-forecast .weather-main {
	font-size: 14px;
	line-height: 1;
	margin-bottom: 10px;
}

/*===========================================-*/
/*-降水確率*/
/*===========================================-*/


/*===========================================-*/
/*-最高最低気温*/
/*===========================================-*/
#wHiLo {
	display: flex;
	flex-direction: row;
	line-height: 120%;
	margin-top: 5px;
	align-items: baseline;
}
#wHiLo .hilo-part {
	text-align: right;
}
#wHiLo .hilo-label {
	font-size: 13px;
	line-height: 1;
	margin-right: 5px;
}
#wHiLo .hilo-value {
	font-size: 22px;
	line-height: 1;
}
#wHiLo .hilo-sep {
	display: inline;
	margin: 0 5px;
}
/*===========================================-*/
/*-タブレット縦型：2COL */
/*===========================================-*/
@media (max-width: 900px){
	/**温度・湿度*/
	.weather .w-temp .temp {
		display: flex;
		align-items: baseline;
	}
	
	
	.weather .w-temp .temp .weatherTemp {
		font-size: 40px;
	}
	.weather .w-temp .temp .weatherTemp .temp-unit {
		font-size: 24px;
	}
	.weather .w-temp .temp .weather-sep {
		margin-left: 5px;
	}
	.weather .w-temp .temp .wHum .metric-label {
		display: none;
	}
	.weather .w-temp .temp .wHum .metric-value {
		
	}
	.weather .w-temp .temp .wHum .metric-unit {
		
	}
	/**日出・日入*/
	#wSun {
		display: flex;
		flex-wrap: wrap;
		line-height: 120%;
		margin-top: 5px;
		justify-content: start;
		gap: 10px;
	}
	#wSun .sun-part {
		flex-direction: column;
		display: flex;
	}
	#wSun .sun-label {
		font-size: 13px;
		white-space: nowrap;
	}
	#wSun .sun-time {
		text-align: end;
	}
	#wSun .sun-sep {
		display:none;
	}
	#wSun .sun-value {
		font-size: 19px;
	}
}



/*===========================================-*/
/*-スマホ縦想定（時計・天気なし）*/
/*===========================================-*/
@media (max-width: 500px){
	#wrap {
		justify-content: flex-start;
	}
	#time {
		display:none;	
	}
	#schedule {
		width: 100%;
	}
}
/*===========================================-*/
/*-スマホ横想定（時計・天気ミニサイズ）*/
/*===========================================-*/
@media (max-height: 800px) and (min-width: 400px) {
	.modal__dialog {
		margin: 20px auto;
	}
	#time {
		width: 30%;
		padding: 10px 10px 20px 40px;
		bottom: 0;
		top: unset;
	}
	#schedule {
		width: 70%;
	}
	#time .time-clock {
		display: flex;
		flex-direction: column;
	}
	#time .time-clock #analogClock {
		width: 70% !important;
		height: auto !important;
	}
	#time .digital-clock {
		flex-direction: column;
		justify-content: space-between;
		margin-bottom: 0;
	}
	
	#time .digital-clock .dt-date {
		font-size: 19px;
	}
	#time .digital-clock .dt-date .dt-year {
		display: block;
		font-size: 16px;
	}
	#time .digital-clock .dt-date .dt-year .dt-num {
		
	}
	#time .digital-clock .dt-date .dt-year .dt-ja {
		
	}
	#time .digital-clock .dt-week {
		margin-left: -0.6em;
	}
	#time .digital-clock .dt-ja, #time .digital-clock .dt-week-ja {
		font-family: 'M PLUS 1p';
		font-size: 14px;
		margin-left: 3px;
	}
	#time .digital-clock .dt-holiday {
		display: block;
		margin-top: 5px;
	}
	#time .digital-clock .dt-holiday .dt-holiday-name {
		font-size: 12px;
		display: block;
	}
	#time .digital-clock .dt-time{
        font-size: 44px;
	}
	
	
	
	/** 天気全体 */
	.weather {
        display: flex;
        margin-top: 20px;
	}
	/** 左：地点・気温・最高最低 */
	.weather .w-temp {
	width: 100%;
	}
	.weather .w-temp .temp {
	display: block;
	}
	.weather .w-temp .loc {
		position: relative;
	}
	.weather .w-temp .loc .weather-loc {
		font-size: 14px;
        white-space: nowrap;
        position: absolute;
        top: -26px;
	}
	.weather .w-temp .temp .weatherTemp {
		font-size: 30px;
	}
	.weather .w-temp .temp .weatherTemp .temp-unit {
		font-size: 20px;
	}
	.weather .w-temp .temp .wHum {
		line-height: 100%;
	}
	.weather .w-temp .temp .wHum .metric-label {
		font-size: 13px;
	}
	.weather .w-temp .temp .wHum .metric-value {
		font-size: 18px;
	}
	.weather .w-temp .temp .wHum .metric-unit {
		font-size: 13px;
	}
	
	.weather .w-temp .temp .weather-sep {
		display: none;
	}
	/**天気予報*/
	.w-forecast {
		width: 100%;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		justify-content: start;
		margin-top: 10px;
	}
	.w-forecast .wicon {
		font-size: 36px;
		font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 36;
		grid-row: 1 / 3;
		margin-right: 8px;
	}
	.w-forecast .weather-main {
		font-size: 12px;
		margin: 0;
		text-align: left;
	}
	
	
	
	/**日出・日入**/
	#wSun {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0;
        margin-top: 8px;
	}
	#wSun .sun-part {
		display: flex;
		flex-direction: row;
		gap: 3px;
		white-space: nowrap;
	}
	#wSun .sun-label {
		font-size: 13px;
		white-space: nowrap;
	}
	#wSun .sun-time {
		text-align: end;
	}
	#wSun .sun-sep {
        display: none;
	}
	#wSun .sun-value {
		font-size: 15px;
	}
	
	/** 最高最低気温**/
	#wHiLo {
        display: flex;
        flex-direction: column;
        align-items: baseline;
        flex-wrap: nowrap;
        margin-top: 3px;
	}
	#wHiLo .hilo-part {
		white-space: nowrap;
	}
	#wHiLo .hilo-label {
		font-size: 13px;
		line-height: 1;
	}
	#wHiLo .hilo-value {
		font-size: 15px;
		line-height: 1;
	}
	#wHiLo .hilo-sep {
        display: none;
	}
	#wHiLo .hilo-unit {
		font-weight: 700;
		font-size: 80%;
	}
	
}
/*===========================================-*/
/*-スマホ横想定（時計超ミニサイズ）*/
/*===========================================-*/
@media (max-height: 400px){
	#time .time-clock #analogClock {
		width: 55% !important;
		height: auto !important;
	}
}

/*==================================================================*/

/*:Layering rule */

/*==================================================================*/


/** 夜桜・色・光（最背面） */
body::before,
body::after{
	z-index: 0;
	pointer-events: none;
}

/** 動く背景（花びら Canvas） */
#bgCanvas{
	z-index: 1;
	pointer-events: none;
}

/** 通常UI（時計・天気・スケジュール全体） */
#wrap{
	position: relative;
	z-index: 10;
}

/** コンパネ（モーダル）は常に最前面 */
.modal{
	position: fixed;
	z-index: 100;
}