/*
Theme Name: pillows-Child
Version: 01
Template: pillows
*/

@charset "UTF-8";

.xo-months {
	display: flex;
	justify-content: space-around;
	width: 80%;
	margin: 0 auto;
}

.xo-month-wrap {
	width: 60%;
}

.xo-event-calendar table.xo-month>thead th {
	font-weight: 400;
	font-size: 1.4rem
}

caption {
	color: #000;
	font-size: 1.6rem;
	height: 64px;
	letter-spacing: 1px;
}

.xo-event-calendar table.xo-month {
	font-size: 1.6rem;
}

.xo-event-calendar table.xo-month>thead th {
	height: 52px;
	position: relative;
}

.xo-event-calendar table.xo-month>thead th::after {
	position: absolute;
	content: "";
	display: block;
	background-color: #C9C9C9;
	height: 1px;
	width: 100%;
	top: 32px;
}

.xo-event-calendar table.xo-month>thead th {
	color: #000 !important;
}

/* 定休日の背景色を消す */
.other-month,
.holiday-all,
.holiday-reserve {
	background-color: rgba(255, 255, 255, 0) !important;
}

/* 予約日の背景色 */
.holiday-reserve {
	position: relative;
}

.holiday-reserve::before {
	position: absolute;
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid #F3981C;
	top: 0;
	left: 34%;
	z-index: 100;
}

/* 今日の文字色 */
.xo-event-calendar table.xo-month .month-dayname td div.today {
	color: #000;
	font-weight: 400;
}

/* 表の線を消す */
.xo-event-calendar table.xo-month {
	border: none;
}

.xo-month th,
.xo-month td {
	border: none !important;
}

/* 文字の中央揃え */
.xo-event-calendar table.xo-month .month-dayname td div {
	text-align: center;
	line-height: 3.2rem;
}

/* 曜日の下に線と余白を挿入 */
.xo-event-calendar table thead {
	height: 64px;
}

.xo-event-calendar table th {
	vertical-align: top;
}

/* 休日に車線を引く */
.holiday-all {
	position: relative;
}

.holiday-all::before {
	position: absolute;
	content: "";
	display: block;
	transform: rotate(-45deg);
	background-color: #333;
	width: 52%;
	height: 1px;
	top: 20px;
	left: 34px;
}

/* tbodyの数字を中央揃え */
.xo-event-calendar table.xo-month .month-dayname-space {
	height: 56px;
}

/* 他の月を消す */
.other-month {
	display: none;
}

/* 凡例を消す */
.holiday-title {
	display: none;
}

/* ここから追加 */
.schedule_desc{
    width: 48%;
    margin: 0 auto;
}
.guide:first-of-type{
    margin-bottom: 14px;
}
.guide{
    width: fit-content;
    margin: 0 0 0 auto;
}
.guide_reserve_none, .guide_closed_none{
    display: none;
}
.guide_reserve, .guide_closed{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: fit-content;
    font-size: 1.4rem;
}
.guide_reserve::before{
    content: "";
    display: inline-block;
    width: 2.0rem;
    height: 2.0rem;
    border-radius: 50%;
    border: 2px solid #F3981C;
    margin-right: 4px;
}
.guide_closed::before{
    content: "";
    display: inline-block;
    transform: rotate(-45deg);
    background-color: #333;
    width: 24px;
    height: 1px;
    margin-right: 4px;
}
/* ここから追加 */
.month-event-title {
	margin-top: -10px !important;
	margin-bottom: 24px!important;
}

.month-event-title {
	background-color: #777 !important;
	color: #fff !important;
}

.xo-event-calendar table.xo-month .month-event-title {
	line-height: 1.8;
}

/*  Reservation*/
.sln-salon--m {
	margin: 8em auto !important;
}

.sln-list,
#sln-salon .sln-list {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

@media(max-width: 1520px) {
	.holiday-reserve::before {
		left: 27%;
	}
	.holiday-all::before {
		left: 24px;
	}
}

@media(max-width: 1260px) {
	.xo-month-wrap {
		width: 60%;
	}
}

@media(max-width: 1024px) {
	.xo-month-wrap {
		width: 60%;
	}

	.holiday-all::before {
		width: 72%;
		left: 7px;
	}

	.holiday-reserve::before {
		left: 10%;
	}
}

@media(max-width: 848px) {
	.holiday-reserve::before {
		top: 0.4%;
	}
}

@media(max-width: 768px) {
	.xo-month-wrap {
		width: 80%;
		margin: 0 auto;
	}

	.holiday-reserve::before {
		top: 0;
		left: 20%;
	}

	.schedule_desc {
		width: 80%;
	}
}

@media(max-width: 700px) {
	.holiday-reserve::before {
		left: 17%;
	}
}

@media(max-width: 570px) {
	.xo-month-wrap {
		width: 100%;
	}

	.xo-event-calendar table.xo-month .month-event-title {
		font-size: 0.7em;
		line-height: 2.0;
		width: 99.6%;
		padding: 0 3px;
	}

	.xo-event-calendar table.xo-month .month-dayname-space {
		height: 48px;
	}

	/* 		fontsize	 */
	caption {
		font-size: 1.4rem;
		height: 40px;
	}

	.xo-event-calendar table.xo-month {
		font-size: 1.4rem;
	}

	.xo-event-calendar table.xo-month .month-dayname-space {
		height: 44px;
	}
	.xo-event-calendar table thead {
		height: 44px;
	}
	/* カレンダー行間の調整 */
	.xo-event-calendar table.xo-month .month-event-space {
		height: 1.2rem;
	}
}

@media(max-width: 460px) {
	.holiday-reserve::before {
		width: 36px;
		height: 36px;
		top: 0.2%;
		left: 12%;
	}
}

@media(max-width: 389px) {
	.xo-months {
		width: 90%;
	}

	.schedule_desc {
		width: 90%;
	}
}