/**
 * Gutenberg / 投稿本文（フロントとエディタで共有）
 */

.p-single-body,
.editor-styles-wrapper {
	--mb: 30px;
	--mb-sp: 15px;
	color: #111;

	p {
		margin: 0 0 var(--mb);
		font-size: 16px;
		line-height: 1.8;
		@media (max-width: 768px) {
			line-height: 1.6;
		}
	}

	a:not(.c-btn):not(.p-button):not(.acf-button):not(.acf-icon):not(.wp-block-button__link):not(.p-studio__photo) {
		/* color: var(--color-accent); */
		text-decoration: underline;
		font-weight: 500;
	}

	[class*="wp-block-"] {
		margin-bottom: var(--mb);
		@media (max-width: 768px) {
			margin-bottom: var(--mb-sp);
		}
	}
	.wp-block-group {
		margin-bottom: 50px;
		@media (max-width: 768px) {
			margin-bottom: 30px;
		}
	}
	img {
		display: block;
		height: auto;
		max-width: 100%;
	}

	figure {
		margin: 0 0 var(--mb);
	}

	.wp-block-image {
		img {
			width: 100%;
			height: auto;
		}

		figcaption {
			margin-top: 8px;
			color: #666;
			font-size: 13px;
			text-align: center;
		}
	}

	iframe[src*="youtube.com"],
	iframe[src*="youtu.be"],
	iframe[src*="google.com/maps"] {
		display: block;
		width: 100%;
		aspect-ratio: 16 / 9;
		height: auto;
		border: 0;
		margin-bottom: var(--mb);
	}

	h2,
	h2.wp-block-heading {
		position: relative;
		margin: 0 0 15px;
		padding-bottom: 11px;
		border-bottom: 5px solid #efefef;
		color: #111;
		font-size: 24px;
		font-weight: 700;
		line-height: 1.3;

		&::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: -5px;
			width: 150px;
			max-width: 40%;
			height: 5px;
			background-color: var(--color-accent);
		}

		@media (max-width: 768px) {
			margin-bottom: 10px;
			font-size: 20px;
		}
	}

	h3,
	h3.wp-block-heading {
		margin: 0 0 15px;
		padding: 12px 10px 12px 20px;
		border-left: 5px solid var(--color-accent);
		background-color: #f6f6f6;
		color: #111;
		font-size: 20px;
		font-weight: 700;
		line-height: 1.3;

		@media (max-width: 768px) {
			margin-bottom: 10px;
			font-size: 18px;
		}
	}

	h4,
	h4.wp-block-heading {
		margin: 0 0 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid #efefef;
		color: #111;
		font-size: 20px;
		font-weight: 700;
		line-height: 1.3;

		@media (max-width: 768px) {
			margin-bottom: 10px;
			font-size: 18px;
		}

		&.--2 {
			background-color: #111;
			color: #fff;
			padding: 10px 15px;
			border-radius: 5px;
			border: 0;
		}
	}

	h5,
	h5.wp-block-heading {
		margin: 0 0 10px;
		color: #111;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.3;
	}

	h6,
	h6.wp-block-heading {
		margin: 0 0 10px;
		color: #111;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.3;
	}

	ul:not(.p-news-single__cats):not(.wp-block-social-links) {
		margin: 0 0 var(--mb);
		padding: 0;
		list-style: none;

		li {
			position: relative;
			margin-bottom: 8px;
			padding-left: 16px;
			line-height: 1.8;

			&:last-child {
				margin-bottom: 0;
			}

			&::before {
				content: "";
				position: absolute;
				top: 15px;
				left: 0;
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background-color: var(--color-accent);
				transform: translateY(-50%);
			}
		}
	}

	ol {
		margin: 0 0 var(--mb);
		padding: 0;
		list-style: none;
		counter-reset: li;

		li {
			position: relative;
			margin-bottom: 8px;
			padding-left: 1.6em;
			line-height: 1.8;

			&:last-child {
				margin-bottom: 0;
			}

			&::before {
				content: counters(li, ".") ".";
				position: absolute;
				left: 0;
				counter-increment: li;
				font-weight: 700;
				color: var(--color-accent);
			}
		}
	}

	blockquote,
	.wp-block-quote {
		margin: 0 0 var(--mb);
		padding: 16px 20px;
		border-left: 5px solid var(--color-accent);
		background-color: #f6f6f6;

		p:last-child {
			margin-bottom: 0;
		}
	}

	.wp-block-separator {
		margin: 0 0 var(--mb);
		border: 0;
		border-top: 1px solid #efefef;
	}

	.wp-block-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		.wp-block-button {
			margin-bottom: 0 !important;
			.wp-block-button__link {
				margin-bottom: 0 !important;
			}
		}
	}

	.wp-block-button {
		.wp-block-button__link {
			display: grid;
			grid-template-columns: 1fr auto 1fr;
			column-gap: 16px;
			align-items: center;
			min-width: 200px;
			/* max-width: 300px; */
			padding: 20px 30px 20px 17px;
			overflow: hidden;
			border: 1px solid #111;
			border-radius: 0 !important;
			box-shadow: none !important;
			font-size: 15px;
			font-weight: 700;
			line-height: 1.2;
			text-align: center;
			text-decoration: none !important;
			background-color: var(--white);

			&:not(.has-background) {
				/* background-color: transparent; */
			}

			&:not(.has-text-color) {
				color: #111;
			}

			&.has-background {
				/* border-color: transparent; */
			}

			&::before {
				content: "";
				width: 25px;
				height: 25px;
			}

			&::after {
				content: "";
				justify-self: end;
				width: 25px;
				height: 25px;
				background-color: currentColor;
				clip-path: inset(0 -8px 0 0);
				mask-image: url("/wp-content/themes/edance-parent/assets/img/icon/btn-arrow.svg");
				mask-size: contain;
				mask-repeat: no-repeat;
				mask-position: center;
				-webkit-mask-image: url("/wp-content/themes/edance-parent/assets/img/icon/btn-arrow.svg");
				-webkit-mask-size: contain;
				-webkit-mask-repeat: no-repeat;
				-webkit-mask-position: center;
			}

			&:hover {
				opacity: 0.75;
			}

			&:hover::after {
				animation: arrow-hover 0.6s cubic-bezier(0.18, 0.89, 0.32, 1) both;
			}

			@media (prefers-reduced-motion: reduce) {
				&:hover::after {
					animation: none;
				}
			}
		}
	}


	.wp-block-table,
	table {
		width: 100%;
		margin-bottom: var(--mb);
		border-collapse: collapse;
		table {
			margin-bottom: 0;
		}
		th,
		td {
			padding: 12px 16px;
			border: 1px solid #ddd;
			text-align: left;
			font-size: 15px;
			line-height: 1.6;
		}

		th {
			background-color: #efefef;
			font-weight: 700;
		}

		tr.has-black-background-color {
			th,
			td {
				background-color: #111;
				color: #fff;
				font-weight: 700;
			}
		}
	}

	.wp-block-table.p-spec-table {
		table {
			border: 0;
		}

		th,
		td {
			padding: 20px 0;
			border: 0;
			border-top: 1px solid #ddd;
			background-color: transparent;
			vertical-align: top;
			font-size: 16px;
			line-height: 1.8;
		}

		th {
			width: 174px;
			padding-right: 30px;
			font-weight: 700;
			white-space: nowrap;
		}
	}

	.p-spec-list {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin: 0 0 var(--mb);

		.p-spec-list__item {
			display: grid;
			grid-template-columns: 174px 1fr;
			column-gap: 30px;
			padding-top: 20px;
			border-top: 1px solid #ddd;
		}

		dt,
		dd {
			margin: 0;
			font-size: 16px;
			line-height: 1.8;
		}

		dt {
			font-weight: 700;
		}

		dd {
			font-weight: 500;
		}

		@media (max-width: 768px) {
			.p-spec-list__item {
				grid-template-columns: 1fr;
				row-gap: 4px;
			}
		}
	}

	.p-instructor-cards {
		display: flex;
		align-items: flex-start;
		margin: 0 0 var(--mb);
		padding-top: 20px;
		border-top: 1px solid #ddd;
	}

	.p-instructor-cards__label {
		flex: 0 0 220px;
		width: 220px;
		padding-right: 120px;
		color: #111;
		font-size: 18px;
		line-height: 1.8;
	}

	.p-instructor-cards__heading,
	.p-instructor-cards__time {
		margin: 0;
	}

	.p-instructor-cards__heading {
		font-weight: 700;
	}

	.p-instructor-cards__time {
		font-weight: 500;
	}

	.p-instructor-cards__list {
		display: flex;
		flex: 1 1 auto;
		flex-wrap: wrap;
		align-items: center;
		gap: 15px;
		min-width: 0;
	}

	.p-instructor-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		box-sizing: border-box;
		width: 156px;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 10px;
		background-color: #fff;
	}

	.p-instructor-card__image {
		width: 136px;
		height: 175px;
		overflow: hidden;
		flex-shrink: 0;

		img {
			display: block;
			width: 100%;
			height: 100%;
			max-width: none;
			object-fit: cover;
		}
	}

	.p-instructor-card__body {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		width: 100%;
	}

	.p-instructor-card__genre {
		margin: 0;
		padding: 5px;
		background-color: #111;
		color: #fff;
		font-size: 13px;
		font-weight: 500;
		font-feature-settings: "palt" 1;
		line-height: 1;
		white-space: nowrap;
	}

	.p-instructor-card__name {
		margin: 0;
		color: #111;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.5;
		text-align: center;
	}

	@media (max-width: 768px) {
		.p-instructor-cards {
			flex-direction: column;
			gap: 15px;
		}

		.p-instructor-cards__label {
			flex: none;
			width: 100%;
			padding-right: 0;
			font-size: 16px;
		}

		.p-instructor-cards__list {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			align-items: stretch;
			gap: 10px;
			width: 100%;
		}

		.p-instructor-card {
			width: auto;
			padding: 8px;
		}

		.p-instructor-card__image {
			width: 100%;
			height: auto;
			aspect-ratio: 136 / 175;
		}
	}

	.wp-block-flexible-table-block-table {
		> table {
			border-collapse: separate;
			border-spacing: 0;
			border: 1px solid #ddd;

			tr {
				th {
					background-color: #efefef;
				}

				th,
				td {
					padding: 1rem;
					border-color: #ddd;
					border-style: solid;
					border-width: 1px 0 0 1px;
					font-size: 15px;
					font-weight: 500;
				}

				th:first-child,
				td:first-child {
					border-left-width: 0;
				}
			}

			> tr:first-child th,
			> tr:first-child td,
			> thead tr:first-child th,
			> thead tr:first-child td,
			> tbody tr:first-child th,
			> tbody tr:first-child td {
				border-top-width: 0 !important;
			}
		}

		&.is-scroll-on-mobile {
			> table {
				width: 900px;
			}
		}

		&.is-style-stripes {
			border-bottom: 0 !important;

			thead {
				border-bottom: 0;

				th {
					text-align: left;
				}
			}

			tbody {
				tr:nth-child(odd) {
					th,
					td {
						background-color: #efefef;
					}
				}
			}

			tr {
				th {
					background-color: #efefef;
				}

				th,
				td {
					padding: 1rem;
					border-color: #ddd;
				}
			}
		}
	}

	.has-background:not(.wp-block-button__link):not(.wp-block-separator) {
		padding: 1.5rem 2rem;
	}

	.wp-block-embed {
		margin-bottom: var(--mb);
	}

	.wp-block-embed-canva iframe {
		display: block;
		/* Canvaの埋め込みが出力するインラインの固定サイズを上書きする。 */
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 500 / 281;
	}

	.c-card.c-card--image-card {
		display: block;
		overflow: hidden;
		margin-bottom: var(--mb);
		border-radius: 16px;
		background-color: #fff;
		color: #111;
		text-decoration: none;

		.c-card__image {
			overflow: hidden;
			aspect-ratio: 3 / 2;
			margin-bottom: 0;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.c-card__content {
			padding: 20px;
			border: 1px solid #e8e8e8;
			border-top: 0;
			border-radius: 0 0 16px 16px;

			.c-card__title {
				font-size: clamp(15px, calc(16 / 1440 * 100vw), 16px);
				font-weight: 600;
				letter-spacing: 0.1em;
				text-align: center;
			}

			.c-card__text {
				color: #666;
				font-size: clamp(14px, calc(14 / 1440 * 100vw), 14px);
				line-height: 1.6;
			}

			&:has(.c-card__text) .c-card__title {
				margin-bottom: 5px;
				text-align: left;
			}
		}

		@media (max-width: 768px) {
			.c-card__content {
				.c-card__title {
					margin-bottom: 5px;
					font-size: clamp(16px, calc(18 / 375 * 100vw), 18px);
				}

				.c-card__text {
					font-size: clamp(14px, calc(14 / 375 * 100vw), 14px);
				}
			}
		}
	}

	.wp-block-columns .wp-block-column {
		.c-card--image-card {
			margin-bottom: 0;
		}
	}

	> *:last-child {
		margin-bottom: 0;
	}
}