/*
 * 本文中のショートコードの見た目（inc/shortcodes.php が出力する HTML）
 * 旧プラグイン（Column Shortcodes / Shortcodes Ultimate / TOC+ / Responsive Lightbox）と同じ見た目に合わせた。
 */

/* ---------------------------------------------------------------- [one_half]（Column Shortcodes と同じクラス） */
.one_half {
	float: left;
	width: 50%;
}

.clear_column {
	clear: both;
	display: block;
	width: 100%;
	height: 0;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
}

@media (max-width: 600px) {
	.one_half {
		clear: both;
		width: 100%;
		margin: 0 0 1em;
	}
}

/* ---------------------------------------------------------------- [su_row] / [su_column size="1/2"] */
.columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 4%;
	margin-bottom: 1.5em;
}

.columns__item img {
	max-width: 100%;
}

.columns__item > :first-child,
.box__content > :first-child,
.accordion__content > :first-child,
.service__content > :first-child {
	margin-top: 0;
}

.columns__item > :last-child,
.box__content > :last-child,
.accordion__content > :last-child,
.service__content > :last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.columns {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
}

/* ---------------------------------------------------------------- [su_box] */
.box {
	margin: 0 0 1.5em;
	border: 2px solid var(--box-border);
	border-radius: var(--box-radius);
}

.box__title {
	display: block;
	padding: 0.5em 1em;
	font-size: 1.1em;
	font-weight: 700;
	color: var(--box-title-color);
	background-color: var(--box-color);
	border-radius: calc(var(--box-radius) - 2px) calc(var(--box-radius) - 2px) 0 0;
}

.box__content {
	padding: 1em;
	color: #444;
	background-color: var(--color-white);
	border-radius: 0 0 calc(var(--box-radius) - 2px) calc(var(--box-radius) - 2px);
}

.box__content::after {
	content: "";
	display: table;
	clear: both;
}

/* ---------------------------------------------------------------- [su_spoiler]（<details>） */
.accordion {
	margin-bottom: 1.5em;
}

.accordion__title {
	position: relative;
	display: block;
	min-height: 20px;
	padding: 7px 0 7px 27px;
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	cursor: pointer;
	list-style: none;
}

.accordion__title::-webkit-details-marker {
	display: none;
}

/* ＋ / − の印 */
.accordion__title::before,
.accordion__title::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 4px;
	width: 12px;
	height: 2px;
	background: currentColor;
	transform: translateY(-50%);
}

.accordion__title::after {
	transform: translateY(-50%) rotate(90deg);
	transition: transform var(--duration-fast) ease;
}

.accordion[open] > .accordion__title::after {
	transform: translateY(-50%) rotate(0deg);
}

.accordion__title:focus-visible {
	outline: thin dotted currentColor;
}

.accordion__content {
	padding: 1em 0 1em 27px;
}

.accordion__content::after {
	content: "";
	display: table;
	clear: both;
}

/* ---------------------------------------------------------------- [su_service]（吹き出しアイコン付き） */
.service {
	position: relative;
	margin: 0 0 1.5em;
}

.service__title {
	display: block;
	min-height: 32px;
	margin-bottom: 0.5em;
	padding-left: 46px;
	font-size: 1.1em;
	font-weight: 700;
	line-height: 32px;
	color: #333;
}

.service__title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	background-color: #333;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13 4C6.4 4 1 8.3 1 13.5c0 2.8 1.6 5.4 4.2 7.1L4 26l5.6-3.2c1.1.3 2.2.4 3.4.4 6.6 0 12-4.3 12-9.6S19.6 4 13 4zm0 2.4c5.4 0 9.6 3.3 9.6 7.2s-4.2 7.2-9.6 7.2c-1.1 0-2.2-.1-3.2-.4l-.5-.1-2 1.1.4-1.9-.7-.4C4.7 17.8 3.4 15.7 3.4 13.6c0-4 4.2-7.2 9.6-7.2zM27 13.2v2.5c1.3 1 2.1 2.4 2.1 3.9 0 1.6-.9 3.1-2.5 4.1l-.7.4.4 1.6-1.6-.9-.5.1c-.8.2-1.6.3-2.4.3-2.2 0-4.2-.7-5.6-1.8-.9.2-1.9.4-2.9.4 1.7 2.3 4.9 3.8 8.5 3.8.9 0 1.7-.1 2.6-.3L31 30l-.9-4.2c1.9-1.4 3-3.4 3-5.6 0-2.9-2.1-5.5-5.1-7z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13 4C6.4 4 1 8.3 1 13.5c0 2.8 1.6 5.4 4.2 7.1L4 26l5.6-3.2c1.1.3 2.2.4 3.4.4 6.6 0 12-4.3 12-9.6S19.6 4 13 4zm0 2.4c5.4 0 9.6 3.3 9.6 7.2s-4.2 7.2-9.6 7.2c-1.1 0-2.2-.1-3.2-.4l-.5-.1-2 1.1.4-1.9-.7-.4C4.7 17.8 3.4 15.7 3.4 13.6c0-4 4.2-7.2 9.6-7.2zM27 13.2v2.5c1.3 1 2.1 2.4 2.1 3.9 0 1.6-.9 3.1-2.5 4.1l-.7.4.4 1.6-1.6-.9-.5.1c-.8.2-1.6.3-2.4.3-2.2 0-4.2-.7-5.6-1.8-.9.2-1.9.4-2.9.4 1.7 2.3 4.9 3.8 8.5 3.8.9 0 1.7-.1 2.6-.3L31 30l-.9-4.2c1.9-1.4 3-3.4 3-5.6 0-2.9-2.1-5.5-5.1-7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.service__content {
	padding-left: 46px;
	line-height: 1.4;
}

/* ---------------------------------------------------------------- [su_list icon="icon: user"] */
.icon-list {
	margin-bottom: 1.5em;
}

.post_content .icon-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.post_content .icon-list li {
	position: relative;
	margin: 0;
	padding: 4px 0 4px 2em;
	line-height: 1.3em;
}

.icon-list li::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 1.3em;
	height: 1.3em;
	background-color: #333;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='5'/%3E%3Cpath d='M2 23c0-5.5 4.5-9 10-9s10 3.5 10 9z'/%3E%3C/svg%3E") center / 70% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='5'/%3E%3Cpath d='M2 23c0-5.5 4.5-9 10-9s10 3.5 10 9z'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* ---------------------------------------------------------------- [toc] */
.toc {
	display: table;
	margin-bottom: 1em;
	padding: 10px;
	font-size: 95%;
	background: #f9f9f9;
	border: 1px solid #aaa;
}

.post_content .toc__list {
	margin: 0;
	list-style: none;
}

.post_content .toc__item {
	margin: 0;
}

.toc__item--level-2 { padding-left: 1.5em; }
.toc__item--level-3 { padding-left: 3em; }
.toc__item--level-4 { padding-left: 4.5em; }

.post_content .toc a {
	text-decoration: none;
}

.post_content .toc a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------- [rl_gallery] */
.image-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2px;
	margin: 0 0 1.5em;
}

.image-grid__item {
	text-align: center;
}

/* 画像は元の大きさ（medium）まで。列が広いときは中央に置く（旧 Responsive Lightbox と同じ） */
.image-grid__item img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

@media (max-width: 1200px) {
	.image-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
	.image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	.image-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- 画像の拡大表示（lightbox.js） */
.lightbox {
	width: 100vw;
	max-width: none;
	height: 100vh;
	max-height: none;
	margin: 0;
	padding: 0;
	background: rgba(0, 0, 0, 0.92);
	border: 0;
}

.lightbox::backdrop {
	background: transparent;
}

.lightbox__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 50px 60px;
}

.lightbox__image {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.lightbox__button {
	position: absolute;
	width: 50px;
	height: 50px;
	padding: 0;
	color: var(--color-white);
	cursor: pointer;
	background: rgba(0, 0, 0, 0.5);
	border: 0;
}

.lightbox__button::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin: 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.lightbox__button:hover {
	background: var(--color-accent);
}

.lightbox__button--prev { top: 50%; left: 0; --icon: var(--icon-chevron-left); transform: translateY(-50%); }
.lightbox__button--next { top: 50%; right: 0; --icon: var(--icon-chevron-right); transform: translateY(-50%); }
.lightbox__button--close {
	top: 0;
	right: 0;
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4l16 16M20 4 4 20' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E");
}

.lightbox.is-single .lightbox__button--prev,
.lightbox.is-single .lightbox__button--next {
	display: none;
}