/*
 * 意図的に無個性にしてある。
 * 色・角丸・余白はすべて CSS 変数に逃がし、既定値はテーマから継承させる。
 * 客ごとのデザインは子テーマの style.css で変数を上書きして当てる。
 *
 * Bootstrap の12分割グリッドでは PC5列が作れないため、
 * Lightning の vk_post-col-* には乗らず CSS Grid で自前に組んでいる。
 */

.kss-grid {
	--kss-cols-pc: 4;
	--kss-cols-tab: 2;
	--kss-cols-sp: 1;
	--kss-gap: 1.5rem;
	--kss-radius: 4px;
	--kss-border: 1px solid rgba(0, 0, 0, .1);
	--kss-badge-bg: #c0392b;
	--kss-badge-color: #fff;
	--kss-ratio: 3 / 4;

	display: grid;
	grid-template-columns: repeat(var(--kss-cols-sp), minmax(0, 1fr));
	gap: var(--kss-gap);

	/* Lightning の一覧ループの入れ物が横並びレイアウトのため、
	   flex アイテムとして縮まないよう明示的に全幅を取る。 */
	width: 100%;
	flex: 1 1 100%;
	min-width: 0;
}

@media (min-width: 576px) {
	.kss-grid {
		grid-template-columns: repeat(var(--kss-cols-tab), minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.kss-grid {
		grid-template-columns: repeat(var(--kss-cols-pc), minmax(0, 1fr));
	}
}

.kss-card {
	border: var(--kss-border);
	border-radius: var(--kss-radius);
	overflow: hidden;
	background: #fff;
}

.kss-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.kss-card__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* 氏名のリンク。見出しの色をそのまま使い、下線は指を乗せたときだけ出す。 */
.kss-name__link {
	color: inherit;
	text-decoration: none;
}

.kss-name__link:hover,
.kss-name__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.kss-name__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.kss-card__media {
	position: relative;
	margin: 0;
	aspect-ratio: var(--kss-ratio);
	background: rgba(0, 0, 0, .04);
}

.kss-card__img,
.kss-card__noimg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kss-badge {
	position: absolute;
	top: .5rem;
	left: .5rem;
	padding: .1em .6em;
	font-size: .75rem;
	line-height: 1.6;
	background: var(--kss-badge-bg);
	color: var(--kss-badge-color);
	border-radius: calc(var(--kss-radius) / 2);
}

.kss-card__body {
	padding: .75rem;
}

.kss-card__name {
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
}

.kss-card__meta {
	margin: .35rem 0 0;
	font-size: .8125rem;
	opacity: .75;
}

/* 個別ページ */

.kss-single {
	--kss-gap: 2rem;
	--kss-radius: 4px;
	--kss-border: 1px solid rgba(0, 0, 0, .1);
	--kss-ratio: 3 / 4;
	display: grid;
	gap: var(--kss-gap);
}

@media (min-width: 768px) {
	.kss-single {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
	}
}

/*
 * ひな形で組んだ個別ページ。
 * 段組みはブロック側が持つので、こちらでは列を作らない。
 * 見た目の土台（余白・角丸・罫線・写真の縦横比）だけを渡す。
 */
.kss-single--layout,
.kss-single--layout.kss-single {
	display: block;
}

/* 写真はスライダーで見せる。並べて小さくするより、1枚を大きく見せるほうが伝わる */
.kss-single__gallery {
	display: block;
}

/* 子テーマで並べて出したい場合はこの指定を足す */
.kss-single__gallery--grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .5rem;
}

.kss-single__photo {
	margin: 0;
	background: rgba(0, 0, 0, .04);
	border-radius: var(--kss-radius, 4px);
	overflow: hidden;
}

/* 1枚目はメイン写真として全幅で見せる */
.kss-single__photo--main {
	grid-column: 1 / -1;
}

.kss-single__photo video,
.kss-slider__slide video {
	display: block;
	width: 100%;
	aspect-ratio: var(--kss-ratio, 3 / 4);
	object-fit: cover;
	background: #000;
}

.kss-single__photo img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.kss-single__photo--main img {
	aspect-ratio: var(--kss-ratio, 3 / 4);
}

.kss-single__name {
	margin-top: 0;
}

.kss-profile {
	width: 100%;
	border-collapse: collapse;
}

.kss-profile th,
.kss-profile td {
	padding: var(--kss-cell-pad, .6em .8em);
	border-bottom: 1px solid var(--kss-line, rgba(0, 0, 0, .1));
	text-align: left;
	vertical-align: top;
}

/* 項目名の列。ブロックの設定から色と太さを変えられるようにしてある */
.kss-profile th {
	width: var(--kss-th-width, 8em);
	white-space: nowrap;
	font-weight: var(--kss-th-weight, 600);
	color: var(--kss-th-color, inherit);
	background: var(--kss-th-bg, transparent);
}

.kss-profile td {
	color: var(--kss-td-color, inherit);
}

/* 1行おきに色を敷く */
.kss-profile--striped tbody tr:nth-child(odd) th,
.kss-profile--striped tbody tr:nth-child(odd) td {
	background: var(--kss-stripe, rgba(0, 0, 0, .025));
}

/* 項目を1つだけ出すブロック */
.kss-field {
	display: flex;
	align-items: baseline;
	gap: .4em;
	margin: 0 0 .5rem;
}

.kss-field--block {
	display: block;
}

.kss-field__icon {
	flex: 0 0 auto;
	line-height: 1;
	color: var(--kss-icon-color, inherit);
}

.kss-field__label {
	flex: 0 0 auto;
	opacity: .75;
	font-size: .875em;
}

.kss-field__value {
	flex: 1 1 auto;
}

.kss-single__video {
	margin-top: 1.5rem;
}

.kss-single__video video.kss-video {
	display: block;
	width: 100%;
	height: auto;
	background: #000;
}

.kss-single__video iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

/* 店舗情報 */

.kss-shop {
	margin: 0 0 1.5rem;
	padding: 1rem;
	border: var(--kss-border, 1px solid rgba(0, 0, 0, .1));
	border-radius: var(--kss-radius, 4px);
}

.kss-shop__name {
	margin: 0 0 .5rem;
	font-weight: 600;
}

.kss-shop__row {
	margin: 0 0 .25rem;
	font-size: .9375rem;
}

.kss-shop__row span {
	display: inline-block;
	min-width: 5em;
	opacity: .7;
}

.kss-shop__map {
	margin-top: .75rem;
}

.kss-shop__map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* ============================================
   スタッフ個別ページ（LP風）
   色や余白は変数に逃がしてあるので、
   客ごとの意匠は子テーマ側で変数を上書きして当てる。
   ============================================ */

.kss-lp {
	--kss-lp-gap: 4rem;
	--kss-lp-hero-ratio: 3 / 4;
	--kss-lp-accent: rgba(0, 0, 0, .04);
	--kss-radius: 4px;
	--kss-border: 1px solid rgba(0, 0, 0, .1);
}

/* 画面幅いっぱいに広げる */
.kss-lp__hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-bottom: var(--kss-lp-gap);
	overflow: hidden;
	background: #000;
}

.kss-lp__hero-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--kss-lp-hero-ratio);
	object-fit: cover;
}

@media (min-width: 768px) {
	.kss-lp {
		--kss-lp-hero-ratio: 16 / 9;
	}
}

.kss-lp__hero-body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2rem 1.25rem 1.75rem;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, .68), rgba(0, 0, 0, 0));
	text-align: center;
}

.kss-lp__kana {
	margin: 0 0 .25rem;
	font-size: .8125rem;
	letter-spacing: .18em;
	opacity: .85;
}

.kss-lp__name {
	margin: 0;
	font-size: clamp(1.6rem, 5vw, 2.6rem);
	line-height: 1.25;
	letter-spacing: .06em;
	color: inherit;
}

.kss-lp__role {
	margin: .5rem 0 0;
	font-size: .9375rem;
	letter-spacing: .12em;
	opacity: .9;
}

.kss-lp__section {
	margin-bottom: var(--kss-lp-gap);
}

.kss-lp__section--accent {
	padding: 2rem 1.25rem;
	background: var(--kss-lp-accent);
	border-radius: var(--kss-radius);
}

.kss-lp__heading {
	margin: 0 0 1.25rem;
	font-size: .875rem;
	letter-spacing: .28em;
	text-align: center;
	opacity: .6;
	border: 0;
}

.kss-lp__message {
	margin: 0;
	text-align: center;
	line-height: 2;
}

/* スライダー */

.kss-slider {
	position: relative;
}

.kss-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.kss-slider__track::-webkit-scrollbar {
	display: none;
}

.kss-slider__slide {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
}

.kss-slider__slide img {
	display: block;
	width: 100%;
	aspect-ratio: var(--kss-ratio, 3 / 4);
	object-fit: cover;
	border-radius: var(--kss-radius);
}

.kss-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .82);
	color: #222;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.kss-slider__nav:hover {
	background: #fff;
}

.kss-slider__nav--prev {
	left: .5rem;
}

.kss-slider__nav--next {
	right: .5rem;
}

.kss-slider__thumbs {
	display: flex;
	gap: .5rem;
	margin-top: .75rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.kss-slider__thumbs::-webkit-scrollbar {
	display: none;
}

.kss-slider__thumb {
	flex: 0 0 auto;
	width: 72px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--kss-radius);
	background: none;
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s ease, border-color .2s ease;
}

.kss-slider__thumb.is-current {
	opacity: 1;
	border-color: currentColor;
}

.kss-slider__thumb img,
.kss-slider__thumb video {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: calc(var(--kss-radius) - 1px);
	background: #000;
	pointer-events: none; /* サムネイルの動画は再生させず、切り替えだけに使う */
}

/* 動画のサムネイルには再生の印を重ねる */
.kss-slider__thumb-video {
	position: relative;
	display: block;
}

.kss-slider__thumb-video::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: .45rem 0 .45rem .75rem;
	border-color: transparent transparent transparent rgba(255, 255, 255, .9);
}

.kss-slider:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* プロフィール */

.kss-profile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1px;
	margin: 0;
	background: rgba(0, 0, 0, .1);
	border: var(--kss-border);
	border-radius: var(--kss-radius);
	overflow: hidden;
}

.kss-profile-grid__item {
	padding: 1rem 1.25rem;
	background: #fff;
}

.kss-profile-grid dt {
	margin: 0 0 .35rem;
	font-size: .75rem;
	letter-spacing: .1em;
	opacity: .6;
}

.kss-profile-grid dd {
	margin: 0;
	font-size: 1rem;
}

/* スクロールで現れる */

.kss-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s ease, transform .7s ease;
}

.kss-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.kss-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* 出勤スケジュール */

.kss-schedule {
	margin-top: 2rem;
}

.kss-schedule__heading {
	margin: 0 0 .75rem;
	font-size: 1rem;
	border: 0;
}

.kss-schedule__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border: var(--kss-border, 1px solid rgba(0, 0, 0, .1));
	border-radius: var(--kss-radius, 4px);
	overflow: hidden;
}

.kss-schedule__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .7rem 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.kss-schedule__row:last-child {
	border-bottom: 0;
}

.kss-schedule__row.is-sat {
	background: rgba(0, 110, 255, .05);
}

.kss-schedule__row.is-sat .kss-schedule__date {
	color: #1064c8;
}

.kss-schedule__row.is-sun {
	background: rgba(214, 54, 56, .05);
}

.kss-schedule__row.is-sun .kss-schedule__date {
	color: #c0392b;
}

.kss-schedule__date {
	font-weight: 600;
}

.kss-schedule__time {
	font-variant-numeric: tabular-nums;
}

.kss-schedule__off,
.kss-schedule__rest {
	opacity: .5;
}

/* 予約フォームへ飛べる日 */

.kss-schedule__row.is-open {
	padding: 0;
}

.kss-schedule__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: .7rem 1rem;
	color: inherit;
	text-decoration: none;
}

.kss-schedule__link:hover,
.kss-schedule__link:focus {
	background: var(--kss-book-hover, rgba(0, 0, 0, .045));
	color: inherit;
}

.kss-schedule__link .kss-schedule__time {
	margin-left: auto;
}

.kss-schedule__book {
	flex: none;
	padding: .1rem .6rem;
	font-size: .75rem;
	line-height: 1.6;
	white-space: nowrap;
	color: var(--kss-book-color, #c0392b);
	border: 1px solid currentColor;
	border-radius: 999px;
}

/* カードの出勤状況 */

.kss-card__shift {
	margin: .4rem 0 0;
	font-size: .8125rem;
	line-height: 1.5;
}

.kss-card__shift-tag {
	display: inline-block;
	margin-right: .4em;
	padding: .05em .5em;
	font-size: .75rem;
	border-radius: 2px;
	background: rgba(0, 0, 0, .06);
}

.kss-card__shift.is-today {
	color: #c0392b;
	font-weight: 600;
}

.kss-card__shift.is-today .kss-card__shift-tag {
	background: #c0392b;
	color: #fff;
}

.kss-card__shift.is-none {
	opacity: .55;
}

.kss-today-empty {
	padding: 1.5rem;
	text-align: center;
	background: rgba(0, 0, 0, .04);
	border-radius: var(--kss-radius, 4px);
}

/* SNSのアイコン */

.kss-sns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kss-sns-gap, .6rem);
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.kss-sns__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kss-sns__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--kss-sns-size, 1.75rem);
	height: var(--kss-sns-size, 1.75rem);
	color: inherit;
	text-decoration: none;
	transition: opacity .2s ease;
}

.kss-sns__link:hover {
	opacity: .65;
}

.kss-sns__link svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* 丸で囲む形にしたいとき、ブロックの設定から付けられる */
.kss-sns--framed .kss-sns__link {
	padding: .35em;
	border: 1px solid currentColor;
	border-radius: 50%;
	width: calc(var(--kss-sns-size, 1.75rem) + .7em);
	height: calc(var(--kss-sns-size, 1.75rem) + .7em);
}

/* スタッフの日記 */

.kss-diary {
	margin: 0 0 1.5rem;
}

.kss-diary__heading {
	margin: 0 0 .75rem;
	font-size: 1.0625rem;
}

.kss-diary__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--kss-line, rgba(0, 0, 0, .1));
}

.kss-diary__item {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--kss-line, rgba(0, 0, 0, .1));
}

.kss-diary__link {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .7rem 0;
	color: inherit;
	text-decoration: none;
}

.kss-diary__link:hover .kss-diary__title {
	text-decoration: underline;
}

.kss-diary__media {
	flex: 0 0 auto;
	width: var(--kss-diary-thumb, 64px);
	height: var(--kss-diary-thumb, 64px);
	overflow: hidden;
	border-radius: var(--kss-radius, 4px);
	background: rgba(0, 0, 0, .04);
}

.kss-diary__media img,
.kss-diary__noimg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kss-diary__body {
	flex: 1 1 auto;
	min-width: 0;
}

.kss-diary__date {
	display: block;
	font-size: .8125rem;
	opacity: .7;
}

.kss-diary__title {
	display: block;
	line-height: 1.5;
}

.kss-diary-card .kss-card__media {
	aspect-ratio: var(--kss-diary-ratio, 4 / 3);
}

/* 日記を書いたスタッフの署名 */

.kss-diary-author {
	margin: 2.5rem 0 0;
	border: var(--kss-border, 1px solid rgba(0, 0, 0, .1));
	border-radius: var(--kss-radius, 4px);
	overflow: hidden;
}

.kss-diary-author__link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	color: inherit;
	text-decoration: none;
}

.kss-diary-author__link:hover,
.kss-diary-author__link:focus {
	background: rgba(0, 0, 0, .035);
	color: inherit;
}

.kss-diary-author__media {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(0, 0, 0, .06);
}

.kss-diary-author__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kss-diary-author__body {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

.kss-diary-author__note {
	font-size: .8125rem;
	opacity: .7;
}

.kss-diary-author__name {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.4;
}

.kss-diary-author__more {
	font-size: .8125rem;
	color: var(--kss-book-color, #c0392b);
}

/* ひな形で組んだ一覧カード */

.kss-card--layout {
	display: flex;
	flex-direction: column;
}

.kss-card--layout .kss-card__link {
	display: block;
}

.kss-card--layout .kss-card__media {
	margin: 0;
}

.kss-card--layout .kss-card__shift {
	display: block;
	margin: 0;
}

.kss-card--layout .wp-block-group {
	flex: 1 1 auto;
}

/* 写真以外には左右の余白を付ける。入れ物のブロックを使わずに済ませるため */
.kss-card--layout > *:not(.wp-block-kss-card-photo) {
	padding-left: var(--kss-card-pad, .75rem);
	padding-right: var(--kss-card-pad, .75rem);
}

.kss-card--layout > .wp-block-kss-card-photo + * {
	padding-top: var(--kss-card-pad, .75rem);
}

.kss-card--layout > *:last-child {
	padding-bottom: var(--kss-card-pad, .75rem);
}

/* ============================================
   見せ方の小物（どのブロックにも付けられる）
   「高度な設定 → 追加CSSクラス」に名前を入れて使う。
   ============================================ */

/*
 * kss-gray … 中の画像をモノクロにし、マウスを乗せると色が戻る。
 *
 * @media (hover:hover) で囲んでいるのは、スマートフォンには
 * マウスを乗せる操作が無いため。囲まないと、スマートフォンでは
 * ずっとモノクロのままになり、写真が見られなくなる。
 */
@media (hover: hover) {
	.kss-gray img {
		filter: grayscale(1);
		transition: filter var(--kss-gray-time, .6s) ease, transform var(--kss-gray-time, .8s) ease;
	}

	.kss-gray a:hover img,
	.kss-gray figure:hover img,
	.kss-gray:hover img {
		filter: grayscale(0);
		transform: scale(var(--kss-gray-zoom, 1.05));
	}
}

/* 動きを減らす設定にしている人には、拡大も切り替えもしない */
@media (prefers-reduced-motion: reduce) {
	.kss-gray img {
		transition: none;
	}

	.kss-gray a:hover img,
	.kss-gray figure:hover img,
	.kss-gray:hover img {
		transform: none;
	}
}

/* ---------- めくりスライダー（kss/stack） ---------- */

.kss-stack {
	position: relative;
	width: 100%;
	max-width: var(--kss-stack-max, 520px);
	margin-inline: auto;
	aspect-ratio: var(--kss-stack-ratio, 3 / 4);
	cursor: pointer;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.kss-stack:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 10px;
}

/*
 * 位置・傾き・大きさは「前から何番目か（--i）」だけから計算する。
 * こうしておくと、写真が3枚でも8枚でも同じ指定で扱える。
 */
.kss-stack__layer {
	/*
	 * 奥行きは4段までで打ち止めにする。
	 * 20枚のように枚数が多いと、奥がどんどん薄く小さくなって消えてしまうため。
	 */
	--kss-d: min(var(--i, 0), 4);

	position: absolute;
	inset: 0;
	z-index: calc(100 - var(--i, 0));
	transform:
		translate(
			calc(var(--kss-d) * 4% * var(--kss-stack-spread, 1)),
			calc(var(--kss-d) * -2.4% * var(--kss-stack-spread, 1))
		)
		rotate(calc(var(--kss-d) * -2deg * var(--kss-stack-spread, 1)))
		scale(calc(1 - var(--kss-d) * 0.05));
	transform-origin: 50% 100%;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .6s ease, filter .6s ease;
	will-change: transform;
}

/* 奥に行くほど少しずつ薄くする（4段で頭打ち） */
.kss-stack__layer {
	opacity: calc(1 - var(--kss-d) * 0.12);
}

.kss-stack__layer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
	border-radius: 2px;
}

/*
 * 一番手前の1枚だけ、指定した角度に傾ける。
 * 奥の扇の広がりとは別に決められるようにしてある。
 */
.kss-stack__layer[data-i="0"] {
	transform: rotate(var(--kss-stack-tilt, 0deg));
}

.kss-stack__hint {
	margin: 1.2em 0 0;
	text-align: center;
	font-size: .85em;
	opacity: .75;
}

/*
 * めくって送るときの、一番手前の1枚の抜け方。
 * 時計回りに少し回りながら、薄くなって消える。
 */
.kss-stack__layer.is-leaving {
	z-index: 900;
	transform-origin: 50% 50%;
	pointer-events: none;
	animation: kss-stack-leave var(--kss-stack-exit-time, .45s) cubic-bezier(.32, .06, .38, 1) forwards;
}

@keyframes kss-stack-leave {
	0% {
		transform: rotate(var(--kss-stack-tilt, 0deg)) scale(1);
		opacity: 1;
	}

	100% {
		transform:
			rotate(calc(var(--kss-stack-tilt, 0deg) + var(--kss-stack-exit-turn, 30deg)))
			translate(6%, -4%)
			scale(.94);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kss-stack__layer {
		transition: none;
	}

	.kss-stack__layer.is-leaving {
		animation: none;
	}
}

/* ---------------------------------------------------------
   月間の出勤カレンダー

   色は変数に逃がしてある。子テーマで
   .kss-calendar { --kss-cal-sat: #0a58ca; } のように上書きできる。
   狭い画面では升目をやめ、日付ごとの縦並びに切り替える。
   7列のまま縮めると、名前が1文字ずつ折れて読めなくなるため。
   --------------------------------------------------------- */

.kss-calendar {
	--kss-cal-line: rgba(0, 0, 0, .12);
	--kss-cal-sat: #1064c8;
	--kss-cal-sun: #c0392b;
	--kss-cal-sat-bg: rgba(0, 110, 255, .05);
	--kss-cal-sun-bg: rgba(214, 54, 56, .05);
	--kss-cal-out: rgba(0, 0, 0, .35);
	--kss-cal-out-bg: rgba(0, 0, 0, .02);
	--kss-cal-day-bg: transparent;
	--kss-cal-head-bg: rgba(0, 0, 0, .03);
	--kss-cal-head-color: inherit;
	--kss-cal-today: rgba(255, 196, 0, .16);
	--kss-cal-tab-color: inherit;
	--kss-cal-tab-bg: rgba(0, 0, 0, .04);
	--kss-cal-tab-current-bg: #fff;
	--kss-cal-tab-current-color: inherit;
	--kss-cal-radius: var(--kss-radius, 4px);

	margin: 0 0 2rem;
}

.kss-calendar.is-loading {
	opacity: .5;
	transition: opacity .15s;
}

.kss-calendar__heading {
	margin: 0 0 .75rem;
	font-size: 1.15rem;
	border: 0;
}

/* 店舗の切り替え */

/*
 * 店舗の切り替えは、書類の見出しのような形にしてある。
 * 下線の上にタブが乗り、いま見ている店舗だけが下線を消して中身とつながる。
 * どの店舗を見ているのかが、色だけに頼らず形でも分かる。
 */

.kss-calendar__shops {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .25rem;
	padding: 0 .3rem;
	border-bottom: 1px solid var(--kss-cal-line);
}

.kss-calendar__shop {
	position: relative;
	bottom: -1px;
	padding: .5em 1.1em;
	border: 1px solid var(--kss-cal-line);
	border-radius: var(--kss-cal-radius) var(--kss-cal-radius) 0 0;
	background: var(--kss-cal-tab-bg);
	color: var(--kss-cal-tab-color);
	font-size: .9rem;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
}

.kss-calendar__shop:hover,
.kss-calendar__shop:focus {
	background: var(--kss-cal-tab-current-bg);
	text-decoration: none;
}

/* いま見ている店舗。下線を自分の背景で塗りつぶし、中身と地続きに見せる */
.kss-calendar__shop.is-current {
	background: var(--kss-cal-tab-current-bg);
	color: var(--kss-cal-tab-current-color);
	border-bottom-color: var(--kss-cal-tab-current-bg);
	font-weight: 600;
}

/* タブを出しているときは、中身を枠で囲ってタブの続きに見せる */
.kss-calendar--tabs .kss-calendar__inner {
	padding: 1rem;
	border: 1px solid var(--kss-cal-line);
	border-top: 0;
	border-radius: 0 0 var(--kss-cal-radius) var(--kss-cal-radius);
}

/* 月の移動 */

.kss-calendar__nav {
	margin-top: .2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .6rem;
}

.kss-calendar__title {
	font-size: 1.2rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.kss-calendar__move {
	padding: .35em 1em;
	border: 1px solid var(--kss-cal-line);
	border-radius: var(--kss-cal-radius);
	font-size: .9rem;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
}

.kss-calendar__move:hover,
.kss-calendar__move:focus {
	background: rgba(0, 0, 0, .04);
	text-decoration: none;
}

.kss-calendar__move.is-off {
	opacity: .3;
}

/* 升目 */

/*
 * 表の見出し（caption）は読み上げ用。目で見るぶんには上の月名と重なるので出さない。
 * テーマ側の screen-reader-text に頼らず、自分でも同じ扱いにしておく。
 */
.kss-calendar__table > caption {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.kss-calendar__table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	margin: 0;
}

.kss-calendar__dow {
	padding: .4em 0;
	border: 1px solid var(--kss-cal-line);
	background: var(--kss-cal-head-bg);
	color: var(--kss-cal-head-color);
	font-size: .85rem;
	font-weight: 600;
	text-align: center;
}

.kss-calendar__dow.is-sat {
	color: var(--kss-cal-sat);
}

.kss-calendar__dow.is-sun {
	color: var(--kss-cal-sun);
}

.kss-calendar__day {
	vertical-align: top;
	width: calc(100% / 7);
	height: 6.5em;
	padding: .3em .35em .45em;
	border: 1px solid var(--kss-cal-line);
	background: var(--kss-cal-day-bg);
	font-size: .85rem;
	line-height: 1.4;
}

.kss-calendar__day.is-out {
	background: var(--kss-cal-out-bg);
	color: var(--kss-cal-out);
}

.kss-calendar__day.is-sat {
	background: var(--kss-cal-sat-bg);
}

.kss-calendar__day.is-sun {
	background: var(--kss-cal-sun-bg);
}

.kss-calendar__day.is-today {
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25);
	background-image: linear-gradient(var(--kss-cal-today), var(--kss-cal-today));
}

.kss-calendar__date {
	display: flex;
	align-items: baseline;
	gap: .35em;
	margin-bottom: .2em;
}

.kss-calendar__num {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* 曜日は見出し行で分かるので、升目のときは出さない */
.kss-calendar__dowlabel {
	display: none;
	font-size: .8em;
}

.kss-calendar__day.is-sat .kss-calendar__num {
	color: var(--kss-cal-sat);
}

.kss-calendar__day.is-sun .kss-calendar__num {
	color: var(--kss-cal-sun);
}

.kss-calendar__day.is-out .kss-calendar__num {
	color: var(--kss-cal-out);
}

.kss-calendar__holiday {
	font-size: .7rem;
	color: var(--kss-cal-sun);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kss-calendar__rest {
	margin: 0;
	font-size: .8rem;
	opacity: .6;
}

.kss-calendar__staff {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kss-calendar__one {
	margin: 0 0 .1em;
}

.kss-calendar__link {
	display: flex;
	align-items: center;
	gap: .3em;
	color: inherit;
	text-decoration: none;
	border-radius: 3px;
	padding: 0 .1em;
}

a.kss-calendar__link:hover,
a.kss-calendar__link:focus {
	background: rgba(0, 0, 0, .06);
	text-decoration: underline;
}

.kss-calendar__photo {
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.kss-calendar__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kss-calendar__time {
	font-size: .75rem;
	opacity: .7;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.kss-calendar__more {
	font-size: .75rem;
	opacity: .6;
}

/* 狭い画面。升目をやめ、日付ごとの縦並びにする */

@media (max-width: 782px) {
	/* 店舗が多いと折り返して段が増えるので、横に流して1段に収める */
	.kss-calendar__shops {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.kss-calendar--tabs .kss-calendar__inner {
		padding: .6rem;
	}

	.kss-calendar__table,
	.kss-calendar__table tbody,
	.kss-calendar__table tr,
	.kss-calendar__table td {
		display: block;
		width: auto;
	}

	.kss-calendar__table thead {
		display: none;
	}

	.kss-calendar__table tr {
		border: 0;
	}

	.kss-calendar__day {
		display: flex;
		align-items: flex-start;
		gap: .8rem;
		height: auto;
		min-height: 0;
		padding: .5em .6em;
		border: 0;
		border-bottom: 1px solid var(--kss-cal-line);
		font-size: .95rem;
	}

	/* 前後の月のはみ出しは出さない */
	.kss-calendar__day.is-out {
		display: none;
	}

	.kss-calendar__date {
		flex: 0 0 5.5em;
		margin: 0;
		display: block;
	}

	.kss-calendar__holiday {
		display: block;
		white-space: normal;
	}

	/* 見出し行を隠すので、日付のとなりに曜日を出す */
	.kss-calendar__dowlabel {
		display: inline;
	}

	.kss-calendar__staff {
		display: flex;
		flex-wrap: wrap;
		gap: .2em .7em;
		flex: 1 1 auto;
	}

	.kss-calendar__day.is-today {
		box-shadow: inset 3px 0 0 rgba(0, 0, 0, .35);
	}
}