@charset "utf-8";

/* CSS Document */

/* ======================================================
	[calendar]
	@import"../css/test_line.css";
====================================================== */
.Calendar
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--gap);
	text-align: center;
}

.Calendar>ul
{
	list-style: none;
	margin: 0;
	text-align: inherit;
}

.Calendar>ul>li
{
	margin: 0;
}

.Calendar>ul>li>.Wrap
{
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.Calendar .caption
{
	font-size: 1.2em;
	text-align: center;
	line-height: 1;
}


.Calendar>*:not(.CalMark)
{
	display: flex;
	justify-content: center;
	gap: var(--gap);
}

.Calendar>*:not(.CalMark)>*
{
	width: 100%;
}


.Calendar table,
.Calendar th,
.Calendar td,
.CalMark li .type
{
	height: 100%;
	text-align: center;
	border-style: solid;
	border-width: 1px;
}

.Calendar table
{
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	background-color: rgb(var(--w) / 0.15);
	letter-spacing: normal;
	line-height: 1;
}

.Calendar :is(th, td)
{
	padding: 0;
	font-weight: normal;
}

/* cell */
.Calendar :is(th, td)>*
{
	display: block;
	width: 100%;
	height: 100%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.Calendar :is(th, td)>*>*
{
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}

/* <thead>　平日 */
.Calendar thead :is(th, td)
{
	color: rgb(var(--bk) / 0.75);
	background-color: var(--cal_color_daily_bg);
}

.Calendar thead :is(th, td)>*
{
}

/* <tbody> */
.Calendar tbody :is(th, td)
{
}

.Calendar tbody :is(th, td)>*
{
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}
/*
	justify-content: center;
*/

/* <tfoot> */
.Calendar tfoot :is(th, td)
{
}


/* 空セル */
.Calendar .Blank
{
}

.Calendar .day
{
}


/* ------------------------------------------------------------------------------------------------------------
	曜日・装飾
------------------------------------------------------------------------------------------------------------ */
/* sun */
.Calendar :is(th, td):first-of-type
{
	background-color: var(--cal_color_sun_bg);
	color: var(--cal_color_sun);
}

/* sat */
.Calendar :is(th, td):last-of-type
{
	background-color: var(--cal_color_sat_bg);
	color: var(--cal_color_sat);
}

/* 祝日 */
.Calendar .Holiday,
.Calendar .Holiday.Saturday
{
	background-color: var(--cal_color_holiday_bg);
}

.Calendar .Holiday
{
	color: var(--cal_color_holiday);
}

/* 休業日 */
.Calendar .closed .Mark,
.Calendar :is(th, td).Closed
{
	background-color: var(--cal_color_closed_bg);
	color: var(--cal_color_closed);
}

/* 「○」可 */
.Reservation .Calendar .type
{
	color: var(--cal_color_OK);
}

/* 「×」不可 */
.Reservation .Calendar .Off .type
{
	color: var(--cal_color_NG);
}


/* タテ軸(時間)区切り */
.Calendar .BorderDouble
{
}

.Calendar .BorderDouble th,
.Calendar .BorderDouble td
{
	border-bottom-width: 2px;
}


/* ------------------------------------------------------------------------------------------------------------
	凡例
------------------------------------------------------------------------------------------------------------ */
.Calendar .CalMark
{
	line-height: var(--line_height);
	margin-left: auto;
	margin-right: auto;
}

.CalMark ul
{
	list-style: none;
	margin: 0;
}

.CalMark li
{
	margin: 0;
}

.CalMark .Item>.Wrap
{
	display: flex;
	align-items: center;
	gap: 1em;
}

.CalMark .Mark
{
	width: calc(1em * var(--line_height));
	height: calc(1em * var(--line_height));
	line-height: var(--line_height);
	letter-spacing: normal;
	text-align: center;
}

.CalMark .Mark .type
{
}
/*
.CalMark .Mark .type:before
{
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2em;
	height: 2em;
	translate: -50% -50%;
	border-width: 1px;
}
*/

.CalMark .Txt
{
}


/* ============================================================================================================
	<イベントカレンダー>
	------------------------------------------------------
	去年　今年　来年<br>
	1月　2月　3月　4月　5月　6月　7月　8月　9月　10月　11月　12月
------------------------------------------------------------------------------------------------------------ */
.event_calendar
{
}

.event_calendar>.body
{
	display: grid;
	gap: var(--gap);
}

.event_calendar .head
{
	display: grid;
	gap: 0.5em;
}


.event_calendar .head .yy a
{
	display: inline-block;
}
/*
.event_calendar .head .mm a
{
	display: block;
}
*/
.event_calendar .head b
{
	font-size: 1.5em;
	font-weight: inherit;
}

.event_calendar .head>*
{
}
.event_calendar .head>*>*
{
}

.event_calendar .head>.yy
{
	display: flex;
	gap: 0.5em;
}
.event_calendar .head .yy :is(.PrevNen, .NextNen)
{
	width: 10em;
	color: rgb(var(--bl));

	white-space: nowrap;
	word-break: keep-all;
	overflow-wrap: break-word;

}
.event_calendar .head .yy .PrevNen
{
	text-align: left;
}
.event_calendar .head .yy .DispNen
{
	width: 100%;
	font-size: 1.5em;
	background-color: rgb(var(--w));
}
.event_calendar .head .yy .NextNen
{
	text-align: right;
}
/*
.event_calendar .head>.yy
{
	display: grid;
	grid-template-columns: 10em 1fr 10em;
	gap: 0.5em;
}
.event_calendar .head .yy .PrevNen
{
	text-align: left;
	color: rgb(var(--bl));
}
.event_calendar .head .yy .DispNen
{
	font-size: 1.5em;
	background-color: rgb(var(--w));
}
.event_calendar .head .yy .NextNen
{
	text-align: right;
	color: rgb(var(--bl));
}
*/


.event_calendar .head .yy :is(.PrevNen, .NextNen) a
{
	display: inline-grid;
	align-items: center;
	gap: 0em;
}
.event_calendar .head .yy :is(.PrevNen, .NextNen) a::before
{
	grid-area: mark;
}
.event_calendar .head .yy :is(.PrevNen, .NextNen) a>span
{
	grid-area: num;
}


.event_calendar .head .yy :is(.PrevNen, .NextNen) a::before
{
	aspect-ratio: 1 / 1;

	content: "";
	display: block;

	width: 2em;

	background-color: rgb(var(--bl));

	clip-path: none;
	clip-path: circle(50% at 50% 50%);
	border-radius: 100em;

	mask-image: linear-gradient(#000, #000), var(--mask_arrow_line_r);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-composite: exclude;
}

.event_calendar .head .yy .PrevNen a
{
	grid-template-areas:
		"mark num"
	;
}
.event_calendar .head .yy .PrevNen a::before
{
	margin-right: 0.5em;
	rotate: 180deg;
}
.event_calendar .head .yy .NextNen a
{
	grid-template-areas:
		"num mark"
	;
}
.event_calendar .head .yy .NextNen a::before
{
	margin-left: 0.5em;
}



.event_calendar .head>.mm
{
	--bg_color				:  var(--w) / 1;

	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 0.5em;

}
.event_calendar .head>.mm>*
{
	background-color: rgb(var(--w));

	display: grid;
	align-items: center;
	border-radius: 0.5em;
}
/*
.event_calendar .head>.mm
{
	--bg_color				:  var(--w) / 1;
	display: flex;
	gap: 0.5em;

}
.event_calendar .head>.mm>*
{
	width: 100%;
	background-color: rgb(var(--w));
}
*/
.event_calendar .head>.mm a
{
	background-color: rgb(var(--bg_color));
	border-width: 1px;
	border-color: rgb(var(--bl) / 0.5);
	
	border-radius: 0.5em;
}
.event_calendar .head>.mm a:hover>*
{
	text-decoration-line: underline;
}
/*
.event_calendar .head>.mm a:hover::after
{
	content: "";
	display: block;

	position: absolute;
	left: 50%;
	top: calc(100% - 1px);
	translate: -50% -0%;

	aspect-ratio: 1 / cos(30deg);
	width: 1em;

	background-color: rgb(var(--bg_color));
	clip-path: polygon(
		0 0,
		50% 100%,
		100% 0
	);
}
*/
.event_calendar .head .Tuki.Active
{
	--bg_color				:  var(--bl) / 0.4;
}


.event_calendar .main
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-content: center;
	gap: var(--gap);;
}

.event_calendar .main .Item
{
}

.event_calendar .main .Item a
{
	display: grid;
	gap: 1em;
}

.event_calendar .main .Item h2
{
	min-width: initial;
	max-width: initial;
	width: 100%;

	margin: 0;
}
.event_calendar .main .Item h2>b
{
	min-width: initial;
	max-width: initial;
	width: 100%;

	background-color: transparent;
	color: inherit;

	font-size: 1.2em;
	font-weight: bold;
	padding: 0;
}

.event_calendar .main .Item .Img img
{
	aspect-ratio: 400 / 533;

	display: block;
	width: 100%;
}

.event_calendar .main .Item .data
{
	display: grid;
	gap: 0.5em;
}


/* ============================================================================================================
	<admin>
------------------------------------------------------------------------------------------------------------ */
#Admin .Calendar table
{
	background-color: rgb(var(--cal_color_daily_bg) / 0.1);
}