/**************************************************/
/* ルール						  */
/**************************************************/
/*
	・スマホ表示は768pxを境とする。
	
	
*/

/**************************************************/
/* 画面上部に黒いバーを表示						  */
/**************************************************/

.page-content {
	margin-top: 2.5rem; /* バーの高さ分だけ余白を追加 */
}

/* スマホ表示向け スマホの場合はもっと高さの余白必要*/
@media screen and (max-width: 768px) {
	.page-content {
		margin-top: 3rem; /* バーの高さ分だけ余白を追加 */
	}
}

#hkcc_page_top_custom_bar {
	background-color: black;
	color: white;
	height: 30px; /* バーの高さを調整可能 */
	line-height: 30px;
	display: flex;
	justify-content: space-between;
	padding: 0 10px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: auto;
	box-sizing: border-box;
	z-index: 9999;
}


/**************************************************/
/* スマホ表示の全体								  */
/**************************************************/
/* スマホ表示向け */
@media screen and (max-width: 768px) {
	html {
		font-size: 100%; /* 全体縮小は読みにくくなるので標準サイズを維持 */
	}
}


/**************************************************/
/* 複数ページで使うスタイル						  */
/**************************************************/

.wp-video {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}


/* 2025.10.24 投稿一覧のリンクに下線を追加 */
a.dotted-link {
  text-decoration: underline dotted;
}


/* フッター固定の上下移動ボタン */
.hkcc_scroll_nav_buttons {
	position: fixed;
	right: 24px;
	bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 9998;
	pointer-events: none;
}

.hkcc_scroll_nav_button {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #0f4fb4;
	border-radius: 5px;
	background: linear-gradient(180deg, #5fb9ff 0%, #2478ea 52%, #0d57c3 100%);
	box-shadow: 0 14px 28px rgba(10, 55, 122, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -4px 10px rgba(5, 35, 92, 0.28);
	color: #ffffff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px) scale(0.92);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.hkcc_scroll_nav_button.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.hkcc_scroll_nav_button:hover,
.hkcc_scroll_nav_button:focus {
	filter: brightness(1.05);
	box-shadow: 0 18px 30px rgba(10, 55, 122, 0.34), inset 0 2px 0 rgba(255, 255, 255, 0.68), inset 0 -4px 10px rgba(5, 35, 92, 0.28);
	outline: none;
}

.hkcc_scroll_nav_button:active {
	transform: translateY(2px) scale(0.98);
	box-shadow: 0 8px 16px rgba(10, 55, 122, 0.26), inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 8px rgba(5, 35, 92, 0.24);
}

@media screen and (max-width: 768px) {
	.hkcc_scroll_nav_buttons {
		right: 16px;
		bottom: 16px;
		gap: 10px;
	}

	.hkcc_scroll_nav_button {
		width: 40px;
		height: 40px;
		border-radius: 4px;
		font-size: 20px;
	}
}



/* 「観覧」、「編集」ボタン用のcss */
a.hkcc_link_button,
button.hkcc_link_button {
	display: inline-block;
	font-weight: 400;
	color: #CC3366;
	text-align: center;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	background-color: #fffbfa;
	border: 1px solid #CC3366;
	/*padding: 0.5rem 1rem;*/
	padding: 5px 10px;
	/*font-size: 1rem;*/
	font-size: 16px;
	border-radius: 3px;
	transition: all 0.3s;
	text-decoration: none; /* デフォルトの下線を削除 */
	cursor: pointer;
}

a.hkcc_link_button:hover,
button.hkcc_link_button:hover,
button.hkcc_link_button:focus {
  background-color: #CC3366; /* ホバー時の色変更 */
  color: #fff; /* ホバー時の文字色変更 */
}

@media screen and (max-width: 768px) {
	a.hkcc_link_button,
	button.hkcc_link_button {
		font-size: 13px;
		padding: 4px 8px;
		line-height: 1.3;
	}
}


/* 「観覧」、「編集」ボタン用をもっと小さくする場合に使う */
a.hkcc_link_button_small {
	/*margin-left: 6px;*/
	margin-right: 4px;
	padding: 3px 6px !important;
	font-size: 80% !important;
}

.hkcc_admin_event_action_bar {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin: 18px 0 0;
	flex-wrap: wrap;
}

.hkcc_admin_event_modal_overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	justify-content: center;
	align-items: center;
	z-index: 10000;
	padding: 20px;
	box-sizing: border-box;
}

.hkcc_admin_event_modal {
	width: min(720px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: #fffdfc;
	border: 1px solid #CC3366;
	border-radius: 6px;
	padding: 20px;
	box-sizing: border-box;
}

.hkcc_admin_event_modal_title {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 12px;
	color: #8f2647;
}

.hkcc_admin_event_modal_caption {
	margin-bottom: 10px;
	font-weight: 600;
}

.hkcc_admin_event_post_list {
	border: 1px solid #e6c3cf;
	background: #fff;
	max-height: 320px;
	overflow-y: auto;
	padding: 8px 10px;
	margin-bottom: 16px;
}

.hkcc_admin_event_post_option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #f1dde4;
}

.hkcc_admin_event_post_option:last-child {
	border-bottom: none;
}

.hkcc_admin_event_modal_empty {
	padding: 12px;
	border: 1px solid #e6c3cf;
	background: #fff;
	margin-bottom: 16px;
}

.hkcc_admin_event_modal_field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.hkcc_admin_event_modal_field input {
	width: 100%;
	max-width: 280px;
	padding: 8px 10px;
	box-sizing: border-box;
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	margin-bottom: 18px;
}

.hkcc_admin_event_modal_actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
	.hkcc_admin_event_modal_actions .hkcc_link_button {
		width: 100%;
	}

	.hkcc_admin_event_modal {
		padding: 16px;
	}

	.hkcc_admin_event_modal_title {
		font-size: 18px;
	}

	.hkcc_admin_event_modal_field input {
		max-width: none;
	}
}



/* 2025.03.22 青いボタンは廃止 */
/*
button.hkcc_button, [type="submit"].hkcc_button, [type="button"].hkcc_button {
color: #fff;
border: 1px solid blue;
background-color: #668ad8;
}

button.hkcc_button:hover, button.hkcc_button:focus,
[type=submit].hkcc_button:hover,
[type=submit].hkcc_button:focus,
[type=button].hkcc_button:hover,
[type=button].hkcc_button:focus {
	background-color: #6495ed;
}
*/

/**************************************************/
/* 未整理のスタイル								  */
/**************************************************/

@media screen and (min-width:1280px) {
	.hkcc_front_body_width {
		max-width: 1440px;
		margin:auto
	}
	.hkcc_front_td_title {
		width:auto;
	}
	.hkcc_front_td_repeat_schedule {
		width:auto;
	}
	.hkcc_front_td_days {
		width:6em;
	}
	.hkcc_front_td_location {
		width:auto;
	}
	.hkcc_front_td_this_schedule {
		width:auto;
	}
	.hkcc_front_td_next_schedule {
		width:auto;
	}
	.hkcc_front_td_feiwai {
		width:8em;
	}
}

/* テーマがwidth100%にしているので解除する */
input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
	width: auto;
	/* max-width: none;*/ /* 2025.03.15 これautoにする横いっぱいに広がってしまう */
	min-width: auto;
	border: solid 1px #666666;
	border-radius: 3px;
	padding: 0.3rem 1rem;
	transition: all 0.3s;
}

.ppd_error_message {
	color : red;
}

.ppd_edit_genre_title {
	font-size : 120%;
	padding-top : 20px;
	padding-bottom : 10px;
}

.ppd_sort_list li {
	list-style:  none;	/* デフォルトのアイコンを消す */
	margin:  0;		 /* デフォルト指定上書き */
	padding: 0;		 /* デフォルト指定上書き */
	padding-left : 1.5em;
	padding-top: 5px;
	padding-bottom: 5px;
	line-height:3em;
	/*border:1px solid #cccccc;*/
	/*border:1px solid #333;*/
	border:1px dotted #333;
	/* list-style-type : decimal; *//* 数字表示 */
	cursor:pointer;
	background: #fff;
	max-width: 400px;
}

.ui-sortable-handle {
	cursor: grab;
}

.ui-sortable-handle:active {
	cursor: grabbing;
}

.ppd_front_title::before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  border: none;
	border-bottom-width: medium;
	border-bottom-style: none;
	border-bottom-color: currentcolor;
	border-left-width: medium;
	border-left-style: none;
	border-left-color: currentcolor;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  -index: -2;
}



/*
.hkcc_front_subitem {
  font-size: 115%;
  padding: 0.25em 0.5em;
  color: #494949;
  background: transparent;
  border-left: solid 5px #494949;
  margin-bottom: 4px;
  margin-top: 1em;
  margin-bottom: 0.5em;
}
*/

/* 副項目のタイトル */
.hkcc_front_subitem {
	font-size: 115%;
	padding: 0.25em 0.5em;
	color: #494949;
	background: transparent;
	border-left: solid 5px #494949; /* 左のボーダー色 */
	border-bottom: 1px dotted #494949; /* 下に点線を追加 */
	margin-bottom: 1.5em;
	margin-top: 1.5em;
}


span.ppd_front_iconppoku_progress {
	background-color: #5bc8ac; /* 6eb5c0 */
}
span.ppd_front_iconppoku_priority {
	background-color: #fd974f; /* FFCDAA */
}
span.ppd_front_iconppoku_priority_high {
	background-color: #ed5752;
}
span.ppd_front_iconppoku_target {
	background-color: #dd57a5;
}
span.ppd_front_iconppoku_weather {
	background-color: #12d2ff;
}
span.ppd_front_iconppoku_season {
	background-color: #FFCC35;
}
span.ppd_front_iconppoku_month {
	background-color: #e9cc95;
}
span.ppd_front_iconppoku_timeframe {
	background-color: #C3F47E;
}
span.ppd_front_iconppoku_holiday {
	background-color: #6495ed;
}
span.ppd_front_iconppoku_event {
	background-color: #d11c2c;
}


span.ppd_front_iconppoku_camera {
	display: block;
	width: 9em;
	/*background-color: #d83861;*/
	background-color: #f58f98
}
span.ppd_front_iconppoku_camera_option {
	display: block;
	width: 9em;
	background-color: #bec6c0;
}
span.ppd_front_iconppoku_mama {
	background-color: #47b5fd;
}
span.ppd_front_iconppoku_station {
	background-color: #ffa486;
}


span.ppd_front_iconppoku {
	white-space: nowrap;
	font-size: 90%;
	/*background-color: #47b5fd;*/
	color: #fff;
	border: 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	padding: 5px 8px;

}

div.ppd_front_iconppoku {
	margin-bottom: 6px;
}

/* イベント登録・編集ページのスタイル */
.hkcc_front_width {
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
	/*background: #555;*/
	padding: 0 10px;
}

.hkcc_front_input {
	width:100%;
}



textarea.hkcc_front_input_location_desc {
	width:600px !important;
	padding: 0.2rem 0.5rem !important;
	height: 7rem;
}

.hkcc_front_subitem2 {
	font-size: 115%;
	margin-top: 5px;
	margin-bottom: 5px;
}




// 検索ボックス
.hkcc_front_search_box {
	margin-top:5px;
	margin-bottom:0.5em;
	line-height: 2.8em;
}

.ppd_front_select {
	width: auto;
	padding: 0.3rem 0.5rem;
	margin-right: 3px;
	font-size: 90%;
	/*margin: 0px 0px 5px;*/
}
.hkcc_front_search_box_select {
	width: auto;
	padding: 0.4rem 0.5rem;
	margin-right: 3px;
			position: relative;
			top: -2px;
	font-size: 90%;
	/*margin: 0px 0px 5px;*/
}


.hkcc_front_space_s {
	margin-top: 3px;
	margin-bottom: 3px;
	/* 理屈はわからないが↓とすることで行と行の間隔がちゃんと空く */
	/*display: block ruby;*/
	/* 2025.02.19 rubyを入れると改行してくれないのでruby消す*/
	display: block;
}

.hkcc_front_inline_block {
	display: inline-block;
}


.ppd_front_font_small {
	font-size: 85%;
}


.hkcc_location_desc_text {
	max-width: 100%;
	line-height: 4;
}


#wp-original-wrap{
	max-width: 640px !important;
}


.body_main {
	padding: 0 10px;
	max-width: 1440px;
	/*text-align: center;*/
}

/* 開催間隔年数のテキストボックスの幅 */
#basic_standard_years {
	max-width: 8rem;
	
}

/* 開催間隔年数のテキストボックスの幅 */
.basic_standard_schedule_info {
	padding-bottom:10px !important;
	
}

.history_date {
	width: 12em !important;
	
}

/**************************************************/
/* 検索ページのカスタマイズ			*/
/**************************************************/

table.hkcc_table_no_wrap {
	white-space: nowrap !important;
}

@media screen and (max-width: 768px) {
	.hkcc_talble_yokoscroll {
		overflow: auto;
		white-space: nowrap;
	}
}

/**************************************************/
/* イベント情報表示ページタイムテーブル			*/
/**************************************************/
.time_table {
	border-collapse: collapse;
	margin-top: 10px; /* テーブルを左寄せ */
	margin-left: 10px; /* テーブルを左寄せ */
	width: auto;
	border-top: 1px solid #cccccc; /* 最上部の横線 */
}

/* スマホ表示向け スマホの場合はもっと高さの余白必要*/
@media screen and (max-width: 768px) {
	.time_table {
		width: 100%;
		table-layout: fixed;
		margin-left: 0;
		margin-right: 0;
		font-size: 85%;
	}

	.time_table_cell {
		padding: 2px 3px;
		line-height: 1.2;
	}

	.time_table .hkcc_schedule_col_date {
		width:12em;
		/*white-space: nowrap;*/
		word-break: normal;
		overflow-wrap: normal;
	}

	.time_table .hkcc_schedule_col_timetable {
		width: auto;
		white-space: nowrap;
		word-break: normal;
		overflow-wrap: normal;
		font-size: 95%;
	}

	.time_table .hkcc_schedule_col_desc {
		/*width: auto;*/
		min-width: 30%;
		white-space: normal;
		word-break: break-word;
		overflow-wrap: anywhere;
	}
}

.time_table_cell {
	border-bottom: 1px solid #cccccc; /* 各行の横線 */
	padding: 5px 10px; /* 上下5px、左右10pxのパディング */
	text-align: left; /* 左寄せ */
}
.time_table_header {
	background-color: #eaeaea; /* ヘッダーの背景を薄いグレーに変更 */
	font-weight: bold;
	text-align: left; /* ヘッダーも左寄せ */
	border-bottom: 1px solid #cccccc; /* ヘッダー下の横線 */
}

.hkcc_schedule_ditto {
	display: block;
	text-align: center;
	font-weight: bold;
}

.hkcc_schedule_placeholder_cell {
	text-align: center;
}

.time_table_cell.hkcc_schedule_placeholder_cell {
	text-align: center !important;
}

.hkcc_schedule_placeholder_text {
	display: block;
	width: 100%;
	text-align: center;
}

.hkcc_schedule_kind_badge {
	font-size: 80% !important;
	padding: 3px 4px 3px 4px !important;
	margin: -4px 4px 0 0 !important;
	vertical-align: baseline;
}




/**************************************************/
/* イベント情報表示ページのカスタマイズ			*/
/**************************************************/
/*
body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
}
*/

/* テーマのcssのcssを解除する */
table.no-style caption + thead tr:first-child th,
table.no-style caption + thead tr:first-child td,
table.no-style colgroup + thead tr:first-child th,
table.no-style colgroup + thead tr:first-child td,
table.no-style thead:first-child tr:first-child th,
table.no-style thead:first-child tr:first-child td {
  border-block-start: none !important;
}

table.no-style tbody > tr:nth-child(odd) > td,
table.no-style tbody > tr:nth-child(odd) > th {
  background-color: transparent !important;
}

table.no-style tbody tr:hover > td,
table.no-style tbody tr:hover > th {
  background-color: transparent !important;
}

table.no-style tbody + tbody {
  border-block-start: none !important;
}

table.no-style th, table.no-style td {
	border: none;
}

/* イベント情報のタイトルや情報を表示する */
#view_event_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-family: "MHeiHK Light" !important;
	color: #212529;
}


/* イベント名をh2タグで表示 */
.view_event_title {
	font-weight: bold;
	font-size: 150%;
	color: #6b6e80 !important;
}

.main_image_container,
.table-container,
.reference-images-container {
	padding: 10px;
	box-sizing: border-box;
}

@media screen and (max-width: 768px) {
	#view_event_container {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}

	#view_event_container .main_image_container,
	#view_event_container .table-container,
	#view_event_container .reference-images-container {
		width: 100%;
		max-width: 100%;
		padding-top: 2em;
		padding-left: 0;
		padding-right: 0;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}
}

.reference-image {
	max-width: 100%;
	height: auto;
}

.view_event_table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	background-color: #ffffff; /* 背景色は白 */
}
.view_event_table th,
.view_event_table td {
	border-bottom: 1px solid #d3d3d3 !important; /* 横線の色 */
	/*padding: 8px;*/
	text-align: left; /* テキストを左揃え */
	font-size: 110%; /* フォントサイズ */
}
@media screen and (max-width: 768px) {
	/* スマホ表示では文字サイズ調整不要 */
	.view_event_table th,
	.view_event_table td {
		font-size: 100%; /* フォントサイズ */
	}
}



.view_event_table th {
	background-color: #f0f0f0; /* ヘッダー行の背景色 */
	font-weight: bold; /* ヘッダーの文字を太字に */
}
@media (min-width: 768px) {
	#view_event_container {
		display: grid;
		grid-template-columns: 1fr 2fr 1fr;
	}
}

.view_event_table td,
.view_event_table th {
    word-break: break-word;    /* URLが折り返されるようにする */
    overflow-wrap: break-word; /* はみ出しを防ぐ */
    white-space: normal;       /* 改行を有効にする */
}



.view_event_table_item {
	white-space: nowrap; /* テキストが改行されないようにする */
	max-width : 15rem ;
	width : 30% !important;
}

/* uid=XXX&show=on 詳細テーブル: 1列目の項目ラベルに画像アイコンを付ける（PC/スマホ共通） */
#view_event_container .view_event_table > tbody > tr > td:first-child.view_event_table_item::before {
	content: "";
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.45em;
	vertical-align: -0.14em;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#view_event_container .view_event_table .view_event_table_item_name::before {
	background-image: url("../icon/icon_view_event_name.png");
}

#view_event_container .view_event_table .view_event_table_item_tags::before {
	background-image: url("../icon/icon_view_event_tag.png");
}

#view_event_container .view_event_table .view_event_table_item_feiwai::before {
	background-image: url("../icon/icon_view_event_feiwai_no.png");
}

#view_event_container .view_event_table .view_event_table_item_website::before {
	background-image: url("../icon/icon_view_event_web_site.png");
}

#view_event_container .view_event_table .view_event_table_item_location::before {
	background-image: url("../icon/icon_view_event_place.png");
}

#view_event_container .view_event_table .view_event_table_item_repeat::before {
	background-image: url("../icon/icon_view_event_schedule_repeat.png");
}

#view_event_container .view_event_table .view_event_table_item_next::before {
	background-image: url("../icon/icon_view_event_schedule_next.png");
}

#view_event_container .view_event_table .view_event_table_item_past::before {
	background-image: url("../icon/icon_view_event_schedule_past.png");
}

#view_event_container .view_event_table .view_event_table_item_summary::before {
	background-image: url("../icon/icon_view_event_overview.png");
}

#view_event_container .view_event_table .view_event_table_item_post::before,
#view_event_container .view_event_table .view_event_table_item_post_list::before {
	background-image: url("../icon/icon_view_event_post.png");
}

@media screen and (max-width: 768px) {
	#view_event_container .view_event_table {
		table-layout: auto;
	}

	#view_event_container .foldable-block,
	#view_event_container .foldable-content,
	#view_event_container .foldable-text {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	#view_event_container .foldable-text,
	#view_event_container .foldable-text a {
		white-space: normal;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	#view_event_container .foldable-text img,
	#view_event_container .foldable-text video,
	#view_event_container .foldable-text iframe,
	#view_event_container .foldable-text object,
	#view_event_container .foldable-text embed {
		max-width: 100%;
		height: auto;
	}

	/* [video] ショートコード等で出る固定幅ラッパーを抑制 */
	#view_event_container .foldable-text .wp-video,
	#view_event_container .foldable-text .wp-video-shortcode,
	#view_event_container .foldable-text .wp-caption,
	#view_event_container .foldable-text [style*="width"],
	#view_event_container .view_event_table > tbody > tr > td + td [style*="width"] {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	#view_event_container .view_event_table,
	#view_event_container .view_event_table > tbody,
	#view_event_container .view_event_table > tbody > tr,
	#view_event_container .view_event_table > tbody > tr > td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}

	#view_event_container .view_event_table > tbody > tr {
		border-bottom: 1px solid #d3d3d3;
		padding: 8px 0;
	}

	#view_event_container .view_event_table > tbody > tr > td {
		border-bottom: none !important;
		padding: 0;
		font-size: 100%;
		vertical-align: top;
	}

	#view_event_container .view_event_table > tbody > tr > td:first-child {
		font-weight: 600;
		color: #444;
		white-space: normal;
		line-height: 1.4;
		margin-bottom: 4px;
	}

	#view_event_container .view_event_table > tbody > tr > td + td {
		padding-left: 1em;
		line-height: 1.5;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	#view_event_container .view_event_table_item {
		max-width: none;
	}
}


.view_tag_container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;

}

.view_tag {
	display: inline-block;
	background-color: #ffffff; /* 白背景 */
	color: #333333; /* ダークグレーの文字 */
	padding: 6px 12px;
	border: 1px solid #444444; /* 黒に近いグレーの囲い */
	border-radius: 10px;
	font-size: 14px;
	font-weight: normal;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ホバーする意味ないので無効化 */
/*
.view_tag:hover {
	transform: scale(1.05);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
*/






/* 左上のメイン画像を比率も1:1に丸く切り抜く。*/
.view_main_img {
	width: 100%; /* 親要素に合わせて幅を調整 */
	aspect-ratio: 1 / 1; /* 正方形の縦横比 */
	object-fit: cover; /* 画像をエリアにフィットさせる */
	object-position: center; /* 中央を表示 */
	border-radius: 50%; /* 正円にする */
	opacity: 0.9; /* 透明度を指定 (0 が完全に透明、1 が完全に不透明) */
}


/* 768px以上の場合に適用 */
@media (min-width: 768px) {
	.main_image_container {
		margin-top:5em;
		
	}
	
	
}



/* デスクリプションのタイトル */
.view_desc_title {
	font-size: 110%; /* 小さめの文字サイズ */
	font-weight: bold; /* 太字で題名らしさを強調 */
	/*color: #444;*/
	color: #555;
	display: inline-block; /* 下線を文字幅に合わせるために設定 */
	border-bottom: 1px dotted #666; /* 細かい点線のスタイル */
	padding-bottom: 3px; /* 下線との間隔 */
	margin-bottom: 10px; /* 他の要素とのスペース */
}

/* デスクリプションの公開日の日の文字 */
.view_desc_date {
	margin-top: 8px;
	color: #8b8d9b !important;
	
}


/**************************************************/
/* 登録・編集ページのカスタマイズ					*/
/**************************************************/


/* メインページの背景 */
/* 1024px以上の場合に適用 */
@media (min-width: 1024px) {
	
	.edit_body_main {
		margin: 30px auto;
		background: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		position: relative; /* 必要なら追加 */
		z-index: 2; /* `.ppd_front_title` より上になるように設定 */
	}
	
}

/* 概要・内容（共用）欄の高さを調整 */
#event_description_main {
	height: 14rem;
	
}

/* 新規デスクリプション投稿ボタン */
.event_new_desc_post_button {
	margin-top: 10px;
	padding: 0.5rem 1rem;
	
}


.ppd_front_title {
  position: relative;
  padding: 5px 5px 5px 42px;
  background: #494949;
  font-size: 20px;
  color: white;
  margin-left: -33px;
  margin-top: 30px;
  line-height: 1.3;
  z-index: 1; /* 変更例 */
}





/* 登録、アップデートボタン */
.hkcc_submit_button {
	/* 中央寄せ（この3行書くと中央寄せできる便利）*/
	display: flex;
	justify-content: center;
	align-items: center;
}



.sshkcc_front_title_edit_mode {
	position: relative;
	padding: 5px 5px 5px 42px;
	background: #7db4e6;
	font-size: 20px;
	color: white;
	margin-left: -33px;
	margin-top: 30px;
	line-height: 1.3;
	z-index: -1;
}

/* 場所の詳細、テキストエリアの高さを設定 */
#event_location_desc {
	height:5rem;
}


button, [type="submit"], [type="button"] {
	background-color : #fffbfa;
}


.single_or_multi_day {
	margin-right: 10px;
}

/* ボタンが目立つので少し小さく。 */
.add_button_no_reapat,
.add_button_reapat,
#upload_images_button,
#edit_upload_main_img_button,
#edit_remove_img_button {
	
	font-size: 90%;
}


/* 官方網站名、官方網站URLの幅 */
#event_feiwai_no,
#event_feiwai_url,
#event_location_name,
#event_web_title,
#event_web_url {
	width: 70%;
}

/* 768px以上の場合に適用 */
@media (min-width: 768px) {
	#event_location_name,
	#event_web_title,
	#event_web_url {
		width: %;%;
	}
}


/* タイトル、キーワードの幅 */
#event_name,
#event_keyword {
	width: 90%;
}
/* 768px以下の場合に適用 */
@media (max-width: 768px) {
	#event_name,
	#event_keyword {
		width: 100%;
	}
}


/**************************************************/
/* 登録・編集ページ内のデスクリプションリスト	  */
/**************************************************/
.edit_desc_table_row {
	display: flex;
	justify-content: space-between;
	padding: 5px;
	border-bottom: 1px solid #ccc;
}
.edit_desc_cell {
	flex: 1;
	text-align: left;
}
.edit_desc_actions {
	flex: 0.5;
	text-align: center;
}



/**************************************************/
/* 登録・編集ページ レスポンシブ表示			  */
/**************************************************/

/*
	2025.03.15
	各項目の左項目、右入力欄が縦に並んでいる個所に対する調整。
	各項目名は縦列に均等割り付け。期間はスマホの場合は改行が必要なので
	綺麗に改行できるように調整。
	ここはもういじらないほうがいい。
*/

.hkcc_edit_form_group {
	display: flex;
	/*align-items: flex-start;*/
	align-items: center;
	margin-bottom: 10px;
}
.hkcc_edit_label {
	width: 5rem; /* 項目名の幅を統一 */
	/*font-weight: bold;*/
	flex-shrink: 0; /* ラベルが縮まないように */
}
.input {
	flex: 1;
}
.hkcc_edit_multi_select_box {
	display: flex;
	align-items: center;
	flex-wrap: wrap; /* 必要に応じて改行 */
}
.hkcc_edit_multi_select_box .hkcc_edit_break {
	display: inline-block; /* 一行で表示できる場合も常に表示 */
	width: auto;
}
@media (max-width: 512px) { /* 幅が狭いときのみ改行 */
	.hkcc_edit_multi_select_box {
	flex-wrap: wrap; /* 幅が足りないとき改行 */
	}
	.hkcc_edit_multi_select_box .hkcc_edit_break {
	width: 100%; /* 改行時に「～」を次行に表示 */
	text-align: left; /* 左寄せ */
	margin-top: -5px; /* 上方向に微調整 */
	}
}
.hkcc_edit_multi_select_box select, .hkcc_edit_multi_select_box span {
	margin-right: 5px;
	margin-bottom: 5px; /* スペース調整 */
}
.hkcc_edit_multi_select_box span {
	white-space: nowrap; /* 「～」の位置を固定 */
}

.hkcc_edit_select {
	margin-right: 10px;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

.hkcc_edit_button {
	margin-bottom: 0px !important;
}

/**************************************************/
/* 引用タグ											*/
/**************************************************/

blockquote {
	/*display: inline-block;*/ /* テキストに合わせた幅 */
	font-style: italic; /* 斜体で引用を強調 */
	color: #333; /* 濃い文字色 */
	border-left: 4px solid #B0B0B0; /* より淡いグレーのボーダー */
	padding: 10px 15px; /* 内側の余白 */
	margin: 20px 0; /* 上下の余白 */
	background-color: #F5F5F5; /* 非常に薄いグレーの背景色 */
	border-radius: 5px; /* 角を丸くして柔らかい印象 */
	white-space: pre-wrap; /* テキスト折り返し対応 */
	line-height: 1; /* 行間を詰める */
}

blockquote:before {
	content: "“"; /* 開始時に引用符を追加 */
	font-size: 24px;
	color: #B0B0B0; /* ボーダーと同じグレー */
	margin-right: 5px;
}

blockquote:after {
	content: "”"; /* 終了時に引用符を追加 */
	font-size: 24px;
	color: #B0B0B0; /* ボーダーと同じグレー */
	margin-left: 5px;
}

blockquote p {
	margin: 0; /* 段落の余白をリセット */
	line-height: inherit; /* 親のline-heightを引き継ぐ */
}

cite {
	display: block; /* 独立したブロック要素にする */
	text-align: right; /* 右揃えで引用元を配置 */
	font-style: italic; /* 斜体で引用元を強調 */
	color: #666; /* 落ち着いた文字色 */
	margin-top: 10px; /* 引用文との間に余白を追加 */
	font-size: 0.9em; /* 少し小さめの文字サイズ */
}


cite:before {
	content: "—來源: "; /* 「引用元」という文字を追加 */
	font-weight: bold; /* 太字で少し強調 */
	color: #555; /* 少し濃いめの文字色 */
}


/**************************************************/
/* 登録・編集ページの内容向けのメディアファイル複数用 */
/* 面倒なので名前などはこれ以上変更しないこと。面倒。 */
/**************************************************/
#image_list {
    display: flex; /* 横並びにする */
    flex-wrap: wrap; /* 行を折り返す */
    gap: 10px; /* 各画像間の間隔 */
    margin-top: 10px;
}

.image-item {
    text-align: center; /* 削除ボタンを中央揃え */
    width: 120px; /* アイテムの幅 */
}

.image-item img {
    width: 100%; /* 幅をアイテムの幅に合わせる */
    height: 100px; /* 高さを固定 */
    object-fit: cover; /* アスペクト比を維持しつつ領域を埋める */
    display: block;
    border-radius: 5px; /* 角を丸める（オプション） */
}

.image-item button {
    margin-top: 5px;
    width: 100%; /* ボタンを画像の幅に合わせる */
    padding: 5px;
    background-color: #ff5a5a;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.image-item button:hover {
    background-color: #ff4040; /* ホバー時の色 */
}


/**************************************************/
/* 検索、リセット、表示ボタンのカスタマイズ		*/
/**************************************************/
button,
[type=submit],
[type=button] {
  /*margin-top: 0em !important;*/
  /*padding: 0.3rem 1rem !important;*/
}


/**************************************************/
/* 開催情報機関のフォームの枠					 */
/**************************************************/
.bordered-div {
	border: 2px solid #e0e1e1; /* 枠線の太さと色 */
	padding: 10px; /* 内部余白 */
	/*margin: 5px 5px 5px 0px;*/
	margin-bottom: 5px;
}

.hkcc_edit_entry_toolbar {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.hkcc_edit_entry_toolbar_actions {
	justify-content: space-between;
	flex-wrap: wrap;
}

.hkcc_edit_entry_actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-left: auto;
}

.hkcc_edit_entry_action_buttons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
	width: 100%;
}

.hkcc_schedule_comment_toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.95rem;
	white-space: nowrap;
}

.hkcc_schedule_comment_field textarea.hkcc_schedule_comment_textarea {
	max-width: 420px;
}

.hkcc_schedule_comment_textarea {
	width: 100%;
	min-height: 5.5em;
	resize: vertical;
	box-sizing: border-box;
}

.hkcc_schedule_drag_handle {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 8px 10px;
	border: 1px dashed #c8c8c8;
	border-radius: 999px;
	background-color: #fafafa;
	color: #555;
	font-size: 0.9rem;
	cursor: move;
	user-select: none;
	margin-top:5px; /* ボタンを少し下げたほうが中央に見える */
}

.hkcc_schedule_drag_handle_icon {
	line-height: 1;
}

.hkcc_schedule_drag_handle_label {
	line-height: 1;
}

@media screen and (max-width: 768px) {
	.hkcc_edit_entry_toolbar_actions {
		gap: 6px;
	}

	.hkcc_edit_entry_actions {
		gap: 6px;
	}

	.hkcc_edit_entry_action_buttons {
		justify-content: flex-start;
	}

	.hkcc_schedule_comment_field textarea.hkcc_schedule_comment_textarea {
		max-width: 100%;
	}

	.hkcc_schedule_drag_handle {
		padding: 4px 8px;
	}

	.hkcc_schedule_drag_handle_label {
		display: none;
	}
}

.hkcc_schedule_entries > .ui-sortable-helper .bordered-div,
.hkcc_no_repeat_entries > .ui-sortable-helper .bordered-div {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	background-color: #fff;
}

.hkcc_schedule_drag_placeholder {
	border: 2px dashed #cfcfcf;
	border-radius: 6px;
	background-color: #fafafa;
	margin-bottom: 8px;
	height: 72px;
}



/**************************************************/
/* 繰り返しではない開催情報のフォームの背景色	 */
/**************************************************/
.form_no_repeat_color {
	/*background-color: #fef9fb;*/
	background-color: #fcfcfc;
}

.hkcc_no_repeat_groups {
	margin-bottom: 8px;
}

.hkcc_no_repeat_flat {
	margin-bottom: 8px;
}

.hkcc_no_repeat_entries {
	margin-bottom: 8px;
}

.hkcc_no_repeat_group_header {
	border: 1px solid #d8d8d8;
	border-radius: 6px;
	background-color: #f9f9f9;
	padding: 6px 10px;
	margin: 10px 0 6px;
	font-weight: 600;
	color: #3c3c3c;
}

.hkcc_no_repeat_group {
	border: 1px solid #d8d8d8;
	border-radius: 6px;
	background-color: #f9f9f9;
	margin-bottom: 8px;
	padding: 6px 8px;
}

.hkcc_no_repeat_group_summary {
	cursor: pointer;
	font-weight: 600;
	color: #3c3c3c;
	padding: 2px 0;
}

.hkcc_no_repeat_group_items {
	padding-top: 4px;
}

.hkcc_no_repeat_group_items .hkcc_no_repeat_entry:last-child .bordered-div {
	margin-bottom: 0;
}

.hkcc_no_repeat_group.ui-sortable-helper {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.hkcc_no_repeat_group[open] > .hkcc_no_repeat_group_summary {
	margin-bottom: 6px;
}

.hkcc_schedule_comment {
	margin-top: 4px;
	line-height: 1.6;
	white-space: normal;
	word-break: break-word;
}

.hkcc_schedule_comment_inline {
	font-size: 0.95em;
}

.hkcc_schedule_comment_block {
	margin-left: 0.6em;
	margin-bottom: 0.5em;
}

.hkcc_schedule_comment_row {
	text-align: left;
	line-height: 1.6;
	background-color: #faf7ef;
	word-break: break-word;
}

/**************************************************/
/* カレンダーのカスタマイズ					   */
/**************************************************/
/* 農歴の文字色を半透明にする */
.nunglik{
	opacity: 0.3;
}


table.calender_column{
	/*width: 95%;*/
	/*padding: 0 10px !important;*/
}

table.calender_column td{
	padding: 5px;
	border: 1px solid #CCC;
}

/* 日曜日・祝日 */
table.calender_column tr.holiday,
table.calender_column tr.week0{
	background-color: #ffefef;
	color: #FF0000;
}

/* 土曜日 */
table.calender_column tr.week6{
	background-color: #ededff;
	color: #0000FF;
}

/* 今日 */
table.calender_column tr.today{
	background-color: #fbffa3;
	font-weight: bold;
}

table.calender_column td:first-child{
	width: 20%;
	text-align: center;
}

table.calender_column td:last-child{
	width: 80%;
	color: #111111;
}


/* セレクトボックスで年月選択するときに「月」と「日」の文字の高さと間隔調整用 */
.basic_year_day_text {
	margin: 0.4em 0.4em;
	
}

/* 非表示チェックボックスの文字サイズ */
.hide_checkbox {
	font-size: 85%;
}

/* 浮動・不明の文字サイズ */
.faudung_batming_font {
	font-size: 0.9em !important;
}

/* お気に入りアイコンの表示 */
img.favorite {
	width: 24px;
	height: 24px;
	vertical-align: middle; /* または top, bottom など */
	margin-top: -8px;
	/*margin-right: 2px;*/
}

/**************************************************/
/* チェックボックスのカスタマイズ				 */
/**************************************************/

/*
label.hkcc_button {
	margin-right: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
}
label.hkcc_button input {
	display: none;
}
label.hkcc_button span {
	color: #31A9EE;
	font-size: 90%;
	border: 2px solid #006DD9;
	border-radius: 5px;
	padding: 5px 13px;
}
label.hkcc_button input:checked + span {
	color: #FFF;
	background: #6495ED;
	border: 2px solid #006DD9;
}

label.hkcc_button span:hover {
	background-color: #E2EDF9;

}
*/
label.hkcc_button {
    margin-right: 5px; /* ボタン同士の間隔 */
    margin-top: 10px;  /* ボタンがたくさんあり折り返し表示するときにこれないとボタン同士がかぶる */
    margin-bottom: 10px;
}
label.hkcc_button input {
    display: none; /* デフォルトのinputは非表示にする */
}
label.hkcc_button span {
    color: #000000; /* 未選択時の文字色を黒に */
    font-size: 90%; /* 文字サイズを14pxに */
    border: 1px solid #333333; /* ボーダーを細く（ダークグレー） */
    border-radius: 5px; /* 角丸を入れる */
    background-color: #FFFFFF; /* 未選択時の背景色を白に */
    padding: 5px 13px; /* 上下左右に余白をトル */
}
label.hkcc_button input:checked + span {
    color: #FFFFFF; /* 選択時の文字色を白に */
    background: #555555; /* 選択時の背景色を明るい黒に */
    border: 1px solid #666666; /* 選択時のボーダーを薄いグレーに */
}
label.hkcc_button span:hover {
    background-color: #DDDDDD; /* ホバー時に薄いグレーに */
}

/* 2～3個の横並びのラジオボタンでは左側のテキストと高さを合わせたいためmargin-topを無効化する */
.no_margin_top_label {
	margin-top: 0px !important;
	margin-right: 7px;
}

/**************************************************/
/* ラジオボタンのカスタマイズ		  */
/**************************************************/
input[type=radio] {
	display: none; /* ラジオボタンを非表示にする */
}

.label {
	display: block; /* ブロックレベル要素化する */
	float: left; /* 要素の左寄せ・回り込を指定する */
	/*margin: 5px;*/ /* ボックス外側の余白を指定する */
	width: auto; /* ボックスの横幅を指定する */
	/*height: 45px;*/ /* ボックスの高さを指定する */
	padding: 5px 13px;
	color: #31A9EE; /* フォントの色を指定 */
	text-align: center; /* テキストのセンタリングを指定する */
	/*line-height: 45px;*/ /* 行の高さを指定する */
	cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */
	border: 2px solid #006DD9;/* ボックスの境界線を実線で指定する */
	border-radius: 5px; /* 角丸を指定する */
	background-color: #ffffff;
}

input[type="radio"]:checked + label {
	background: #6495ED;/* マウス選択時の背景色を指定する */
	color: #FFF; /* マウス選択時のフォント色を指定する */
}

.label:hover {
	background-color: #E2EDF9; /* マウスオーバー時の背景色を指定する */
}


.label {
    display: block; /* ブロックレベル要素化する */
    float: left; /* 要素の左寄せ・回り込を指定する */
    width: auto; /* ボックスの横幅を指定する */
    padding: 5px 13px;
    color: #000000; /* フォントの色を黒に */
    text-align: center; /* テキストのセンタリングを指定する */
    cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */
    border: 1px solid #333333; /* ボックスの境界線を細めのダークグレーに */
    border-radius: 5px; /* 角丸を指定する */
    background-color: #FFFFFF; /* 背景色を白に */
}

input[type="radio"]:checked + label {
    background: #555555; /* マウス選択時の背景色を明るい黒に */
    color: #FFFFFF; /* マウス選択時のフォント色を白に */
}

.label:hover {
    background-color: #DDDDDD; /* マウスオーバー時の背景色を薄いグレーに */
}




/**************************************************/
/* デスクリプションのギャラリー					  */
/**************************************************/

.slider-container {
	position: relative;
	max-width: 100%;
	overflow: hidden;
	margin: 20px auto;
	user-select: none;
}
.image-gallery {
	display: flex;
	transition: transform 0.5s ease-in-out;
	cursor: grab;
}
.image-gallery.grabbing {
	cursor: grabbing;
	transition: none;
}
.image-gallery img {
	width: 200px;
	height: auto;
	margin: 0 5px;
	flex-shrink: 0;
	opacity: 0.7;
	cursor: pointer;
}
.arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	cursor: pointer;
	outline: none;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	border-radius: 50%;
}
.arrow-left {
	left: 10px;
}
.arrow-right {
	right: 10px;
}
.arrow span {
	font-size: 28px;
	font-weight: bold;
}
#image-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	justify-content: center;
	align-items: center;
	z-index: 2000;
	touch-action: none;
}
.modal-content {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
#modal-image {
	max-width: 90%;
	max-height: 90%;
	border: 5px solid white;
	display: block;
}
.modal-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	cursor: pointer;
	outline: none;
	z-index: 2001;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	border-radius: 50%;
}
.modal-arrow-left {
	left: 20px;
}
.modal-arrow-right {
	right: 20px;
}
.modal-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.7);
	color: black;
	border: none;
	cursor: pointer;
	outline: none;
	z-index: 2002;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	border-radius: 50%;
}
.hidden {
	display: none;
}

/**************************************************/
/* 要素の中央寄せ								 */
/**************************************************/
.center{
	margin-left:auto;
	margin-right:auto;
}
/**************************************************/
/* float 左詰めで横並び						 */
/**************************************************/
.left{
	float: left;
}
/**************************************************/
/* float 右詰めで横並び						 */
/**************************************************/
.right{
	float: right;
}

/**************************************************/
/* float解除									  */
/**************************************************/
.clear{
	clear:both;
}

/**************************************************/
/* リンクの下線を表示							  */
/**************************************************/
.link_underbar {
	text-decoration: underline dotted; /* 点線の下線 */
	text-underline-offset: 3px; /* 下線とテキストの距離を調整 */
}


/**************************************************/
/* ERRORメッセージは赤字						  */
/**************************************************/
.error{
	color: red;
}




/**************************************************/
/* 行追加ボタンの調整							 */
/**************************************************/
.addButton {
	font-size:90%;
	padding: 0.3rem 0.5rem !important;
}

/**************************************************/
/* カレンダー：予定アイコン						*/
/**************************************************/
.schedule_icon  {
	font-size: 110%;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
	color: #f9fbfd;
	border: 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	padding: 2px 10px 4px 10px;
	/*margin: 3px 10px 3px 0px;*/
	margin: 3px 1px 3px 0px;
}

.icon_color_holiday  {
	/*background-color: #ef4136;*/
	/*background-color: #ff7b5a;*/
	background-color: #f8686a;
}
.icon_color_jithei  {
	background-color: #ff9742;
}
.icon_color_jitdaan  {
	background-color: #dda0dd;
}

.icon_color_kakutei  {
	background-color: #ffb0aa;
}
.icon_color_kakutei:hover, {
	background-color: #ffa79f;
}

.icon_color_change_kakutei {
	background-color: #ffb0aa;
}
.icon_color_change_kakutei:hover {
	background-color: #ffa79f;
}

.icon_color_kotei  {
	background-color: #90e3ff;
}
.icon_color_kotei:hover {
	background-color: #82eaff;
}

.icon_color_ryuudou {
	/*background-color: #a8ffcf;*/
	/*background-color: #dddddd;*/
	background-color: #c0c0c0;
	
}
.icon_color_ryuudou:hover {
	/*background-color: #9dffce;*/
	/*background-color: #e6e7e8;*/
	background-color: #c9caca;
}

.icon_color_humei,
.icon_color_none  {
	/*background-color: #dddddd;*/
	background-color: #2d2937;
	font-color: #d2d6c8;
}
.icon_color_humei:hover,
.icon_color_none:hover {
	background-color: #393543;
}

.icon_color_no_event  {
	background-color: #e6e6e6;
	font-color: #d2d6c8;
}
.icon_color_no_event:hover {
	background-color: #ebebeb;
}



/**************************************************/
/* トップページ用css							  */
/**************************************************/

body.toppage {
	/*font-family: 'Roboto', sans-serif;*/
	/*background-color: #f4f4f4;*/
	background-color: #f7f6f5;
	margin: 0;
	padding: 0;
}
.container {
	max-width: 800px;
	margin: 20px auto;
	padding: 20px;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	border-radius: 10px;
}
h1.date {
	font-size: 24px;
	text-align: center;
	color: #4CAF50;
}
.columns {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}
.column {
	width: 48%;
}
ul.toppage {
	list-style-type: none;
	padding: 0;
}
li.toppage {
	padding: 12px 16px;
	border-bottom: 1px solid #ccc;
	display: flex;
	align-items: center;
	background-color: #f9f9f9;
	margin-bottom: 10px;
	border-radius: 8px;
	transition: background-color 0.3s;
}
li.toppage:hover {
	background-color: #e0f7fa;
}
img.toppage {
	width: 24px;
	height: 24px;
	margin-right: 12px;
}

.table-container {
	margin-top: 40px !important;
}
@media screen and (max-width: 768px) {
	/* スマホ表示ではパディング不要 */
	.table-container {
		margin-top: 0 !important;
	}
}

table.toppage {
	width: 100% !important;
	border-collapse: collapse !important;
}
th.toppage, td.toppage {
	padding: 10px !important;
	text-align: left !important;
	border-bottom: 1px solid #ccc !important;
	background-color: #fafafa !important;
}
th.toppage {
	background-color: #4CAF50 !important;
	color: white;
}
tr.toppage:nth-child(even) {
	background-color: #f2f2f2 !important;
}


/**************************************************/
/* ポップアップウィンドウ用css					*/
/**************************************************/

.deleteButtonStdTT, /* このクラス名変えるな */
.tt_show_popup {
	/*padding: 0.2rem 0.5rem;*/ /* ボタンを小さく */
	font-size: 80%;
}

.tt_popup {
	display: none;
	min-width: 400px;
	max-width: 400px;
	height: auto;
	background-color: #f9f9fb;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*text-align: center;*/
	/*line-height: 100px;*/
	border: 1px solid #000;
	padding-bottom:1em;
	padding-left:1em;
}

.tt_popup_button {
	display: block;
	margin-top: 10px;
	/*background-color: #f44336;*/
	color: white;
	border: none;
	/*padding: 5px 10px;*/
	cursor: pointer;
	border-radius: 5px;
	
}

.tt_close_popup:hover {
	/*background-color: #d32f2f;*/
}

div.tt_div {
	margin : 1rem 0.5rem;
}

/* tt_popup_button専用のスタイル */
.tt_popup_button {
    color: #fff;
    border: 1px solid blue;
    background-color: #668ad8;
}

.tt_popup_button:hover,
.tt_popup_button:focus {
    background-color: #6495ed;
}



/**************************************************/
/* タイムテーブルの装飾								*/
/**************************************************/

/* 動的な時間テーブルの編集・削除ボタン */
button.tt_edit,
button.tt_delete {
	background-color: #f0f0f0;
	color: #333;
	border: 1px solid #ccc;
	border-radius: 4px; /* 少し丸みをつける */
	padding: 3px 16px;
	/*margin: 5px;*/
	font-size: 14px;
	cursor: pointer;                        /* ホバー時にポインタ表示 */
	transition: background-color 0.3s ease; /* ホバー時のスムーズな変化 */
}


button.tt_edit:hover,
button.tt_edit:focus,
button.tt_delete:hover,
button.tt_delete:focus {
	background-color: #e0e0e0; /* ホバー時に少し濃いグレーに */
}


table.tt_table {
	all: unset; /* ★重要：全部リセット★ */
	display: table;
	border-collapse: collapse;
	margin: 5px 0px 5px 20px;
	padding: 0;
	border-collapse: collapse; /* 枠線を統一 */
	border: 1px solid #d3d3d3; /* テーブル全体の枠線をライトグレーに */
}


table.tt_table th,
table.tt_table td {
	/*pointer-events: none;*/ /* ★重要ホバーイベントを完全に無効化 */
	font-weight: normal; /* 太字を解除 */
	margin: 4px; /* セルごとの余白をゼロ */
	padding: 0; /* セルごとの内側余白をゼロ */
	border: 1px solid black; /* 必要なら枠線を指定 */
	text-align: left; /* テキストの位置 */
	border: 1px solid #d3d3d3; /* 各セルの枠線をライトグレーに */
	padding: 6px; /* 必要なら内側の余白を調整 */
	text-align: left; /* テキストの揃え方を指定 */
}

.tt_table tbody tr:hover > td,
.tt_table tbody tr:hover > th {
	background-color: transparent !important;
}

.tt_drag_handle {
	cursor: move;
	user-select: none;
	text-align: center;
	font-weight: bold;
	white-space: nowrap;
}

.tt_drag_placeholder td {
	height: 34px;
	background-color: #eef4ff;
	border: 1px dashed #9eb8e6;
}


/**************************************************/
/* お気に入りアイコン用のcss                      */
/**************************************************/


.view_title_container {
	display: flex;
	flex-wrap: nowrap; /* 要素の折り返しを防ぐ */
	align-items: center; /* 要素を縦方向に中央揃えする */
	gap: 10px; /* 要素間の間隔を10ピクセルに設定 */
}

.view_title_icon {
	flex-shrink: 0; /* アイコンのサイズを固定 */
}

.view_title_title {
	flex-grow: 1; /* タイトルエリアを拡張 */
	display: flex; /* コンテナ内で揃えを確保 */
	align-items: center; /* 縦方向に中央揃え */
}

.view_title_button {
	flex-shrink: 0; /* ボタンのサイズを固定 */
}

/* スマホ画面の場合の場合は2行構成にしタイトルの右上にボタンを移動 */
@media screen and (max-width: 768px) {
	.view_title_container {
		flex-wrap: wrap; /* レスポンシブレイアウトのために折り返しを許可 */
		/*gap: 10px*/; /* 要素間の間隔を10ピクセルに設定 */
	}

	.view_title_icon,
	.view_title_title {
		flex-wrap: nowrap; /* 要素の折り返しを防ぐ */
		display: flex; /* 配置を揃える */
		align-items: center; /* 両要素を縦方向に中央揃え */
		order: 1; /* デフォルトの順序 */
	}

	.view_title_icon {
		margin-bottom:8px;
		margin-right:2px;
}

	.view_title_button {
		text-align: right;
		margin-bottom: 0;
		order: -1; /* ボタンを上部に移動 */
		width: 100%; /* 視認性向上のため全幅にする */
		display: flex;
		justify-content: flex-end;
		gap: 6px;
		flex-wrap: wrap;
	}
}

.checkbox_uow {
	margin-top:-10px !important; /* 2025.07.28 追加 */
	margin-left:-60px !important;
	margin-right:-30px !important;
	float: left;
	width: 100px;
	height: 100px;
	cursor: pointer;
	transform: scale(0.35); /* サイズ調整 */
	display: inline-block; /* インライン要素に設定 */
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	display: block;
	background-color: rgba(0, 0, 0, 0.1);
	/*margin: 20px;*/
	-moz-transition: all 0.15s cubic-bezier(0.5, 0, 0, 1.5);
	-o-transition: all 0.15s cubic-bezier(0.5, 0, 0, 1.5);
	-webkit-transition: all 0.15s cubic-bezier(0.5, 0, 0, 1.5);
	transition: all 0.15s cubic-bezier(0.5, 0, 0, 1.5);
}

.checkbox_uow:hover:after {
	color: white;
}

.checkbox_uow:after {
	line-height: 100px;
	/*font-family: "FontAwesome";*/
	font-family: "Font Awesome 5 Free";
	display: block;
	content: "";
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
	width: 100%;
	height: 100%;
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	border-radius: 100%;
	font-size: 30px;
	-moz-transition: all 0.15s cubic-bezier(0.5, 0, 0, 1.5), font-size 0.35s cubic-bezier(0.5, 0, 0, 3);
	-o-transition: all 0.15s cubic-bezier(0.5, 0, 0, 1.5), font-size 0.35s cubic-bezier(0.5, 0, 0, 3);
	-webkit-transition: all 0.15s cubic-bezier(0.5, 0, 0, 1.5), font-size 0.35s cubic-bezier(0.5, 0, 0, 3);
	transition: all 0.15s cubic-bezier(0.5, 0, 0, 1.5), font-size 0.35s cubic-bezier(0.5, 0, 0, 3);
}

.checkbox_uow.is-checked:after {
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
	transform: scale(1);
	font-size: 50px;
	color: white;
}
.checkbox_uow.is-checked:hover:after {
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.check:after {
	content: "\f00c";
	background-color: rgba(165, 194, 92, 0);
}
.check.is-checked:after {
	background-color: #a5c25c;
}

.heart:after {
	content: "\f004";
	background-color: rgba(241, 76, 56, 0);
}
.heart.is-checked:after {
	background-color: #f14c38;
}

.star:after {
	content: "\f005";
	background-color: rgba(255, 202, 37, 0);
}
.star.is-checked:after {
	background-color: #ffca25;
}


/* お気に入りアイコン用のcssここまで              */