@charset "UTF-8";
/* ==========================================================================
   RepeatLab Next：テーマで書き足した見た目
   --------------------------------------------------------------------------
   main.css は「本番の HTML に出ていた class」だけで作っているため、
   画面を開いたあとに JS で作られていた部分（目次の中身・スライダー）の指定が入っていない。
   その分をここに書く。値は旧テーマ SWELL 2.19.0（GPL v3）と同じにしている。

     1. 目次（中身・番号・「もっと見る」）
     2. 記事スライダー（旧テーマは Swiper。このテーマは横スクロール＋自前の JS）
     3. 画像の拡大表示（旧テーマは Luminous）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 目次
   -------------------------------------------------------------------------- */
.-index-off .p-toc {
	display: none;
}

#main_content .p-toc {
	border-radius: var(--swl-radius--2, 0);
	margin: 4em auto;
	max-width: 800px;
}

.p-toc.-double {
	background: var(--color_gray);
	background: linear-gradient(-45deg, transparent 25%, var(--color_gray) 25%, var(--color_gray) 50%, transparent 50%, transparent 75%, var(--color_gray) 75%, var(--color_gray));
	background-clip: padding-box;
	background-size: 4px 4px;
	border-bottom: 4px double var(--color_border);
	border-top: 4px double var(--color_border);
	padding: 1.5em 1em 1em;
}

.p-toc__ttl {
	display: block;
	font-size: 1.2em;
	line-height: 1;
	position: relative;
	text-align: center;
}

.p-toc.-double .p-toc__ttl {
	margin-bottom: .75em;
}

.p-toc__ttl::before {
	content: "";
	display: inline-block;
	margin-right: .5em;
	padding-bottom: 2px;
	vertical-align: middle;
}

.p-toc__list li {
	line-height: 1.6;
}

.p-toc__list > li + li {
	margin-top: .5em;
}

.p-toc__list .p-toc__childList {
	padding-left: .5em;
}

.p-toc__list [data-level="3"] {
	font-size: .9em;
}

.post_content .p-toc__list {
	padding-left: 0;
}

.p-toc__link {
	color: inherit;
	font-size: inherit;
	text-decoration: none;
}

.p-toc__link:hover {
	opacity: .8;
}

/* 番号（1. / 1-1.） */
.p-toc .is-style-index {
	list-style: none !important;
}

.p-toc ol.is-style-index > :first-child {
	counter-reset: toc;
}

.p-toc ol.is-style-index ol > li,
.p-toc ol.is-style-index > li {
	margin-left: 2em;
	padding-left: 0;
	position: relative;
}

.p-toc ol.is-style-index ol > li::before,
.p-toc ol.is-style-index > li::before {
	border-right: 1px solid;
	content: counters(toc, "-");
	counter-increment: toc;
	display: block;
	font-family: inherit;
	letter-spacing: -.1px;
	line-height: 1.1;
	padding: 0 .5em 0 0;
	position: absolute;
	right: calc(100% + .5em);
	top: .25em;
	transform: scale(.95);
	white-space: nowrap;
	width: auto;
}

.p-toc ol.is-style-index ol {
	counter-reset: toc;
	list-style: none !important;
}

.p-toc ol.is-style-index ol li::before {
	opacity: .75;
}

/* 11項目め以降を隠す・「もっと見る」 */
.p-toc.is-omitted {
	position: relative;
}

.p-toc.is-omitted::before {
	background: linear-gradient(hsla(0, 0%, 100%, 0), var(--color_bg));
	bottom: 5em;
	content: "";
	height: 4em;
	left: 0;
	opacity: .75;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 1;
}

.p-toc.is-omitted::after {
	background: var(--color_bg);
	bottom: 0;
	content: "";
	height: 5em;
	left: 0;
	opacity: .75;
	position: absolute;
	width: 100%;
	z-index: 1;
}

.p-toc.is-omitted [data-omit="1"] {
	display: none;
}

.p-toc .p-toc__expandBtn {
	background-color: #f7f7f7;
	/* 線は出さず、色だけ持たせる（左右の点線がこの色を受け継ぐ。旧テーマと同じ） */
	border: none;
	border-color: rgba(0, 0, 0, .2);
	border-radius: 5em;
	box-shadow: 0 0 0 1px #bbb;
	color: #333;
	cursor: pointer;
	display: block;
	font-size: 14px;
	line-height: 1.5;
	margin: .75em auto 0;
	min-width: 6em;
	padding: .5em 1em;
	position: relative;
	transition: box-shadow .25s;
	z-index: 2;
}

.p-toc .p-toc__expandBtn::before,
.p-toc .p-toc__expandBtn::after {
	border-top-color: inherit;
	border-top-style: dotted;
	border-top-width: 3px;
	content: "";
	display: block;
	height: 1px;
	position: absolute;
	top: calc(50% - 1px);
	width: 22px;
}

.p-toc .p-toc__expandBtn::before {
	right: calc(100% + 1em);
}

.p-toc .p-toc__expandBtn::after {
	left: calc(100% + 1em);
}

@media (hover: hover) {
	.p-toc .p-toc__expandBtn:hover {
		box-shadow: 0 0 0 2px currentcolor;
	}
}

@media (min-width: 600px) {
	.p-toc.-double {
		padding: 2em;
	}
}

@media (min-width: 960px) {
	#main_content .p-toc {
		width: 92%;
	}
}

/* 見出しへ飛んだとき、固定ヘッダーに隠れないように */
.post_content :is(h2, h3)[id] {
	scroll-margin-top: calc(var(--swl-fix_headerH, 64px) + 16px);
}

/* --------------------------------------------------------------------------
   2. 記事スライダー（トップ）
   -------------------------------------------------------------------------- */
.p-postSlider {
	--ps_space: 8px;
	--rl-slide-w: 50%;
}

@media (min-width: 600px) {
	.p-postSlider {
		--rl-slide-w: 33.3333%;
	}
}

@media (min-width: 960px) {
	.p-postSlider {
		--rl-slide-w: 20%;
	}
}

.p-postSlider__inner {
	position: relative;
}

.p-postSlider__swiper {
	overflow: hidden;
}

.p-postSlider__postList {
	display: flex;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: 0;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.p-postSlider__postList::-webkit-scrollbar {
	display: none;
}

.p-postSlider .p-postList__item {
	flex: 0 0 var(--rl-slide-w);
	height: auto;
	margin: 0;
	padding: 0 var(--ps_space);
	scroll-snap-align: start;
	width: var(--rl-slide-w);
}

/* 前後のボタン（旧テーマと同じ：黒の半透明の地に白い山形） */
.p-postSlider__btn {
	--rl-nav: 32px;
	align-items: center;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	cursor: pointer;
	display: flex;
	height: calc(var(--rl-nav) * 1.2);
	justify-content: center;
	padding: 0;
	position: absolute;
	top: calc(50% - 1.25em);
	transform: translateY(-50%);
	width: var(--rl-nav);
	z-index: 2;
}

.p-postSlider__btn::after {
	border-color: currentColor;
	border-style: solid;
	content: "";
	display: block;
	height: calc(var(--rl-nav) * .4);
	transform: rotate(45deg) skew(10deg, 10deg);
	width: calc(var(--rl-nav) * .4);
}

.p-postSlider__btn.-prev {
	left: var(--ps_space);
}

.p-postSlider__btn.-prev::after {
	border-width: 0 0 2px 2px;
	margin-left: calc(var(--rl-nav) * .15);
}

.p-postSlider__btn.-next {
	right: var(--ps_space);
}

.p-postSlider__btn.-next::after {
	border-width: 2px 2px 0 0;
	margin-right: calc(var(--rl-nav) * .15);
}

@media not all and (min-width: 600px) {
	.p-postSlider__btn::after {
		border-width: 0 0 1px 1px;
	}

	.p-postSlider__btn.-next::after {
		border-width: 1px 1px 0 0;
	}
}

/* 下の点（今どこを見ているか） */
.p-postSlider__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	line-height: 1;
	margin-top: 16px;
}

.p-postSlider__dot {
	background: currentColor;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	height: 8px;
	opacity: .2;
	padding: 0;
	transition: opacity .2s;
	width: 8px;
}

.p-postSlider__dot.is-active {
	opacity: 1;
}

/* スマホ・タブレットでは前後のボタンを出さない（旧テーマと同じ。指で横に送る） */
@media not all and (min-width: 960px) {
	.p-postSlider__btn {
		display: none;
	}
}

/* JS が動かないときは前後のボタンと点を出さない（横スクロールだけで見られる） */
html[data-loaded="false"] .p-postSlider__btn {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.p-postSlider__postList {
		scroll-behavior: auto;
	}
}

/* --------------------------------------------------------------------------
   3. 画像の拡大表示（記事の画像を押すと、画面いっぱいに出す）
   -------------------------------------------------------------------------- */
.post_content .wp-block-image img[data-rl-zoom] {
	cursor: zoom-in;
}

.rl-lightbox {
	align-items: center;
	background: rgba(0, 0, 0, .8);
	cursor: zoom-out;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 4vmin;
	position: fixed;
	z-index: 1000;
}

.rl-lightbox img {
	box-shadow: 0 0 24px rgba(0, 0, 0, .4);
	height: auto;
	max-height: 92vh;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}