.article {
	margin-top: clamp(1.5rem, -6.5rem + 16.6667vw, 6rem);

	@media(width < 862px) {
		display: flex;
		flex-direction: column;
	}

	.rank-math-breadcrumb {
		margin-top: 0;
		margin-bottom: clamp(1.5rem, -0.2778rem + 3.7037vw, 2.5rem);
	}

	.article-category {
		background-color: var(--white);
		border: 1px solid;
		border-radius: var(--radius--lg);
		display: inline-block;
		font-size: var(--font-size--sm);
		margin-bottom: 8px;
		padding: 2px 16px 3px;
	}

	.article-title {
		color: var(--color--text);
		font-family: var(--font--sans);
		font-size: clamp(1.5rem, 0.6111rem + 1.8519vw, 2rem);
		line-height: 1.6;
		margin-bottom: clamp(1.5rem, -0.2778rem + 3.7037vw, 2.5rem);
	}

	.article-row {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 6px;
		justify-content: space-between;
		margin-bottom: clamp(0.75rem, 0.0833rem + 1.3889vw, 1.125rem);
	}

	.article-date {
		color: #7D7D7D;
		font-size: var(--font-size--md);
	}

	.article-reading {
		background-color: #E2E2E2;
		border-radius: var(--radius--sm);
		color: var(--color--text);
		font-family: var(--font--sans);
		font-size: var(--font-size--md);
		padding: 2px 8px;
	}

	.article-main {
		aspect-ratio: 864 / 576;
		margin-bottom: clamp(1.5rem, -2.5rem + 8.3333vw, 3.75rem);

		img {
			border-radius: var(--radius--lg);
		}
	}

	.article-content {
		font-family: var(--font--sans);

		& > * + * {
			margin-top: clamp(1.875rem, -1.4583rem + 6.9444vw, 3.75rem);
		}

		img {
			margin-inline: auto;
		}

		h2 {
			background-color: var(--white);
			border-top: 2px solid;
			border-radius: 0 0 var(--radius--lg) var(--radius--lg);
			font-size: clamp(1.125rem, 0.4583rem + 1.3889vw, 1.5rem);
			padding: 26px 17px;

			@media(width < 768px) {
				margin-left: calc(50% - 50vw);
				margin-right: calc(50% - 50vw);
				padding: 18px 20px;
			}
		}

		h3 {
			border-bottom: 2px solid var(--color--border);
			color: var(--color--text);
			font-size: clamp(1rem, 0.3333rem + 1.3889vw, 1.375rem);;
			padding-bottom: clamp(1rem, 0.5556rem + 0.9259vw, 1.25rem);
			position: relative;

			&::after {
				background-color: var(--color--primary);
				content: "";
				display: inline-block;
				width: 40px;
				height: 3px;
				position: absolute;
				bottom: -2px;
				left: 0;
			}
		}

		p {
			color: var(--color--text);
			line-height: 1.88;

			span {
				font-weight: 700;
			}

			strong {
				background: linear-gradient(transparent 50%, #FFFF99 50%);
			}
		}

		h4 {
			font-size: var(--font-size--md);
			font-weight: 700;
			margin-bottom: clamp(1rem, 0.5556rem + 0.9259vw, 1.25rem);
		}

		.table-scroll {
			overflow-x: auto;
			overscroll-behavior-x: contain;
			-webkit-overflow-scrolling: touch;
		}

		table {
			border: none;
			min-width: 640px;
			table-layout: fixed;

			th,td {
				border-right: 1px solid var(--white);
				border-bottom: 1px solid var(--white);
				color: var(--color--text);
				padding: 12px 20px;

				&:last-child {
					border-right: none;
				}
			}

			tr:last-child {
				th,td {
					border-bottom: none;
				} 
			}

			th {
				background-color: #DFEAF7;
				text-align: left;
				width: 240px;

				@media(width < 768px) {
					width: 120px;
				}
			}

			td {
				background-color: #E6EEF9;
			}
		}

		.article-link {
			color: var(--color--primary);
			text-decoration: underline;
		}

		figcaption {
			color: var(--color--primary);
			font-size: clamp(1rem, 0.7786rem + 0.4619vw, 1.125rem);
			font-weight: 700;
			margin-bottom: clamp(0.75rem, 0.3072rem + 0.9238vw, 1rem);
		}

		.list01 {
			background-color: var(--white);
			border-radius: var(--radius--lg);
			line-height: 1.84;
			padding: 24px 32px;

			@media(width < 768px) {
				padding: 2px 24px;
			}

			li {
				color: var(--color--text);
				list-style: disc;
				list-style-position: inside;
			}
		}

			/* 追記ここから */
		
		ul {
			background-color: var(--white);
			border-radius: var(--radius--lg);
			line-height: 1.84;
			padding: 24px 32px;

			@media(width < 768px) {
				padding: 2px 24px;
			}

			li {
				color: var(--color--text);
				list-style: disc;
				list-style-position: inside;
			}
		}
			/* 追記ここまで */
		
		.list02 {
			li {
				color: var(--color--text);
				line-height: 1.75;
				padding-left: 25px;
				position: relative;

				&::before {
					content: url(/img/article/list-check.svg);
					position: absolute;
					top: 2px;
					left: 0;
				}

				& + li {
					margin-top: 16px;
				}
			}
		}

		/* あわせて読みたい */
		.media {
			background-color: var(--white);
			border: 1px solid #D1C195;
			border-radius: var(--radius--lg);
			position: relative;

			& + .media {
				margin-top: var(--space--3);
			}
		}

		.media-lead {
			background: linear-gradient(to bottom,transparent 0%, transparent 50%, var(--white) 50%, var(--white) 100%);
			color: #AA9454;
			display: flex;
			align-items: center;
			gap: 5px;
			font-size: var(--font-size--md);
			padding: 0 10px;
			position: absolute;
			top: -18px;
			left: 15px;
		}
		
		.media-link {
			display: flex;
			align-items: center;
			gap: clamp(0.75rem, -0.1389rem + 1.8519vw, 1.25rem);
			padding: 18px 24px;
			
			@media(width < 768px) {
				padding: 16px;
			}
		}

		.media-img {
			flex-shrink: 0;
			width: 150px;
			height: 100px;

			@media(width < 768px) {
				width: 120px;
				height: 80px;
			}

			img {
				border-radius: var(--radius--md);
			}
		}

		.media-title {
			color: var(--color--text);
			font-size: var(--font-size--base);
			margin-bottom: 0;
		}

		.media-text {
			font-size: var(--font-size--md);
			margin-top: 8px;

			@media(width < 768px) {
				display: none;
			}
		}

		/* この記事を書いた人 */
		.author {
			background-color: #F2F2F2;
			border-radius: var(--radius--md);
			font-size: var(--font-size--md);
			padding: clamp(1.25rem, -0.9722rem + 4.6296vw, 2.5rem);
		}
		
		.author-heaidng {
			border-bottom: 1px solid var(--color--border);
			font-weight: 700;
			padding-bottom: 8px;

		}

		.author-inner {
			display: flex;
			gap: 32px;
			padding-top: 16px;
			
			@media(width < 768px) {
				align-items: center;
				flex-wrap: wrap;
				gap: 0 16px;
			}
		}

		.author-avatar {
			flex-shrink: 0;

			@media(width < 768px) {
				width: 50px;
			}
		}

		.author-body {
			@media(width < 768px) {
				display: contents;
			}
		}

		.author-name {
			font-weight: 700;

			@media(width < 768px) {
				width: calc(100% - 66px);
			}
		}

		.author-desc {
			margin-top: 8px;

			@media(width < 768px) {
				width: 100%;
			}
		}
	}
}

.area-grid {
	@media(width < 862px) {
		display: contents;
	}

	.main {
		@media(width < 862px) {
			order: 1;
		}
	}

	.aside {
		@media(width < 862px) {
			border-top: 1px dotted var(--color--dotted);
			display: block;
			order: 3;
			margin-top: var(--space--4);
			padding-top: 32px;
		}
	}
}

/* WP Rich Table of Contents */
#rtoc-mokuji-wrapper {
	background-color: var(--white);
	border-radius: var(--radius--lg);
	margin-bottom: clamp(2.5rem, 0.5rem + 4.1667vw, 3.625rem);
	padding: 30px 40px;

	@media(width < 768px) {
		padding: 20px;
	}

	.rtoc_left {
		margin-bottom: 16px;

		span {
			color: var(--color--text);
			font-family: var(--font--sans);
			font-size: clamp(1.125rem, 0.4583rem + 1.3889vw, 1.5rem);
			font-weight: 700;
		}
	}

	.rtoc-mokuji {
		li {
			border-top:  1px solid var(--color--border);
			padding-block: clamp(0.75rem, 0.3056rem + 0.9259vw, 1rem);
			list-style: auto;
			list-style-position: inside;

			&:last-child {
				border-bottom:  1px solid var(--color--border);
			}
		}

		a {
			color: var(--color--primary);
			display: inline-block;
			font-family: var(--font--sans);
			font-weight: 700;
			line-height: 1.55;
		}
	}
}

/* 追記 */

	/* キタコイ用記事内CTA */
  .bnr_ceremonyhall {
    text-align: center;
    margin-bottom: 60px;
    @media screen and (min-width: 481px) {
      margin-top: 6vw;
    }
    @media screen and (max-width: 480px) {
      margin-top: 16vw !important;
    }
    p {
      text-align: center;
      font-weight: bold;
      font-size: 1.2rem !important;
      margin-bottom: 8px !important;
      line-height: 1.6 !important;
      @media screen and (max-width: 480px) {
        font-size: 1rem !important;
      }
    }
  }
  .bnr_ceremonyhall_hokkaido {
    margin: 0 auto;
    padding: 20px 0 80px;
    @media screen and (max-width: 480px) {
      padding: 0 0 60px;
    }
  }


@media all and (min-width: 481px) {
  .sp {
    display: none !important;
  }
  .logo {
    padding-bottom: 10px;
  }
  .hamburger {
    display: none !important;
  }
}

@media screen and (max-width: 480px) {
  .pc {
    display: none !important;
  }