@charset "UTF-8";

/*!
Theme Name: Cocoon Child VOA
Description: Voice of Artのホームページ用のCocoon子テーマ
Theme URI: https://wp-cocoon.com/
Template:   cocoon-master
Version: 1.2026.09.29.5
*/

:root {
	--color-main: #E60505;
	--color-text: #333;
	--color-background: #FFFDF9;
	--color-background-base: #EAE8E4; 
	--color-background-sub-1: #FDE8E8; 
	--color-background-sub-2: #F7F6F3; 
	--color-background-button: #F9F5F5; 
}

/* 固定ページでのみ投稿日・区切り線などの非表示設定 */
.page {
	.date-tags {
		display: none;
	}

	.article {
		.article-footer {
			padding-bottom: 0;
			border-bottom: 0;
		}
	}
}

/* 作品関連ページで、カテゴリー・タグウィジェットを非表示
   （artwork一覧、artwork個別、artistタクソノミー画面） */
.post-type-archive-artwork .widget_categories,
.post-type-archive-artwork .widget_tag_cloud,
.single-artwork .widget_categories,
.single-artwork .widget_tag_cloud,
.tax-artist .widget_categories,
.tax-artist .widget_tag_cloud {
    display: none !important;
}

/* 通常投稿関連ページで、作家ウィジェットを非表示
   （通常投稿の個別記事、カテゴリー一覧、タグ一覧、トップ/一覧画面など） */
.single-post .widget-artists,
.category .widget-artists,
.tag .widget-artists,
.blog .widget-artists,
.home .widget-artists,
.date .widget-artists {
    display: none !important;
}

.entry-content>*, .mce-content-body>*, .article p, .demo .entry-content p, .article dl, .article ul, .article ol, .article blockquote, .article pre, .article table, .article .toc, .body .article, .body .column-wrap, .body .new-entry-cards, .body .info-list, .body .popular-entry-cards, .body .navi-entry-cards, .body .box-menus, .body .ranking-item, .body .rss-entry-cards, .body .widget, .body .author-box, .body .blogcard-wrap, .body .login-user-only, .body .information-box, .body .question-box, .body .alert-box, .body .information, .body .question, .body .alert, .body .memo-box, .body .comment-box, .body .common-icon-box, .body .blank-box, .body .button-block, .body .micro-bottom, .body .caption-box, .body .tab-caption-box, .body .label-box, .body .toggle-wrap, .body .wp-block-image, .body .booklink-box, .body .kaerebalink-box, .body .tomarebalink-box, .body .product-item-box, .body .speech-wrap, .body .wp-block-categories, .body .wp-block-archives, .body .wp-block-archives-dropdown, .body .wp-block-calendar, .body .ad-area, .body .wp-block-gallery, .body .wp-block-audio, .body .wp-block-cover, .body .wp-block-file, .body .wp-block-media-text, .body .wp-block-video, .body .wp-block-buttons, .body .wp-block-columns, .body .wp-block-separator, .body .components-placeholder, .body .wp-block-search, .body .wp-block-social-links, .body .timeline-box, .body .blogcard-type, .body .btn-wrap, .body .btn-wrap a, .body .block-box, .body .wp-block-embed, .body .wp-block-group, .body .wp-block-table, .body .scrollable-table, .body .wp-block-separator, .body .wp-block, .body .video-container, .comment-area, .related-entries, .pager-post-navi, .comment-respond {
	margin-bottom: 1.5em;
}

sup {
	line-height: .5em;
}

a {
	text-decoration: none;
}

/* ヘッダー */
.header-container {
	position: relative;

	.header {
		background: #EAE8E4;

		.tagline {
			margin: 0;
		}

		.logo-image {
			padding: 0;

			.site-name {
				width: 240px;
				margin: 0 auto;
				padding: 0;
			}
		}
	}

	.navi-in > ul {
		li:not(.open-en) {
			width: 160px;
			height: 72px;
			margin: 0 16px;

			a {
				flex-direction: column;

				&::after {
					content: "";
					display: block;
					width: 100%;
					height: 3px;
					background: var(--color-main);
				}

				.caption-wrap {					
					height: calc(100% - 3px);
					padding-top: 8px;
				}
			}

			.item-label {
				line-height: 20px;
				font-weight: bold;

				.en {
					font-size: .8em;
					font-weight: normal;
				}
			}

			.sub-menu {
				width: 256px;
				box-shadow: 1px 3px 8px 0 rgba(0, 0, 0, .3);

				li {
					width: 100%;
					margin: 0;

					a {
						display: flex;
						flex-direction: row;

						&::before {
							content: "";
							position: relative;
							display: block;
							width: 8px;
							min-width: 8px;
							height: 8px;
							margin-right: 12px;
							left: 0;
							top: 32px;
							background: var(--color-main);
						}
						&::after {
							content: none;
						}
					}
				}
			} 
		}

		li.open-en {
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	#navi .navi-in a:hover {
		background: var(--color-background-sub-2);
		opacity: .9;
	}

	#navi .navi-in .open-en a, 
	#navi .navi-in .open-en a:hover {
		width: 120px;
		height: 40px;
		margin-top: 20px;
		border-radius: 20px;
		font-size: 14px;
		color: var(--color-main);
		font-weight: bold;
	}
	#navi .navi-in .open-en a:hover {
		background: var(--color-background);
		opacity: .8;
	}
}

/* Cocoonアピールエリア */
.appeal {
	background-position: center center;
	background-size: cover;

	.appeal-in {
		padding: 8px;

		.appeal-content {
			margin: 40px auto auto auto;
			padding: 0;
			border-radius: 0;

			.appeal-title {
				padding: 12px 2px 2px 12px;
				line-height: 32px;
				font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Yu Mincho", "游明朝", serif;
				font-size: 32px;
				font-weight: normal;
				letter-spacing: .05em;
			}
			.appeal-message {
				padding: 16px;
				line-height: 18px;
				font-family: serif;
				font-size: 18px;
				font-weight: 500;
				margin: 0;
				letter-spacing: .02em;
			}
		}
	}
}

/* コンテンツエリア */
.front-top-page .content {
	margin: 0;
	padding: 0;
}

.page .content-in {
	max-width: 1000px;
}

.content {
	margin: 0;
	padding-top: 32px;
	background: var(--color-background-base);

	.content-in {
		position: relative;
		background: transparent;

		.main {
			padding: 24px 56px 96px 56px;
			background: var(--color-background);
			border-radius: 0;
			border: 0;

			&::before,
			&::after {
				content: "";
				position: absolute;
				display: block;
				width: 240px;
				height: 160px;
				background: var(--color-background-sub-1);
				z-index: -1;
			}
			&::before {
				left: 32px;
				top: 0;
			}
			&::after {
				right: 32px;
				bottom: 0;
				height: 80px;
			}

			article {
				z-index: 1;
			}
		}
	}

	.post-date .far,
	.archive-title .fas,
	.cat-link .fas,
	.tag-link .fas,
	.tag-caption .fas  {
		display: none;
	}
}

.entry-title, .archive-title {
	position: relative;
	margin: -25px 0 32px -40px;
	padding: 40px 0 40px 40px;
	border-left: 3px solid var(--color-text);
	font-size: 36px;

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

.article h2 {
	display: flex;
	align-items: flex-start;
	margin-bottom: 8px;
	padding: 32px 24px 20px 20px;
	background: transparent;
	font-size: 32px;
	font-weight: normal;

	&::before {
		content: "";
		display: block;
		width: 72px;
		height: 28px;
		margin-left: -88px;
		margin-right: 16px;
		/* transform: translateY(-2px); */
		transform: translateY(4.5px);
		background: var(--color-main);
	}

	& strong {
		font-weight: normal;
	}

	&.voa-h2-en {
		margin-bottom: 8px;
		padding: 0 24px 20px 20px;
		font-size: 18px;
		font-weight: bold;

		&::before {
			height: 2px;
			transform: translateY(8.5px);
		}

		& strong {
			font-weight: bold;
		}
	}
}

.article h3,
.sidebar h3 {
	margin: 48px 0 24px 0;
	padding: 16px 24px;
	background: var(--color-background-button);
	border-left: 5px solid var(--color-main);
	border-top: 0;
	border-bottom: 0;
	border-right: 0;
	font-size: 24px;
	font-weight: normal;

	& strong {
		font-weight: normal;
	}
}

.article h4 {
	margin: 48px 0 24px 0;
	padding: 4px 0 2px 0;
	border-top: 0;
	border-bottom: 2px solid var(--color-text);
	font-size: 22px;
}

.eye-catch img,
.wp-block-image:not(.voa-step-top-list) img {
	box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .3);
}
figcaption {
	margin: 0;
	padding: 8px 0 2px 4px;
	line-height: 1.5em;
	border-bottom: 1px solid var(--color-text);
	font-size: 15px;
	text-align: left;
	opacity: 1;
}

.voa-step-top-list{
	margin: 24px 0 40px 0;
}

.voa-link a {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 32px 64px 32px 16px;
	border-radius: 8px;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 0.05em;
	transition: .3s;

	&::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 23px;
		width: 48px;
		height: 48px;
		border-top: 4px solid var(--color-main);
		border-right: 4px solid var(--color-main);
		transform: translateY(-50%) rotate(45deg);
		transition: .3s;
	}

	&:hover {
		transform: translateY(-1px);
		background: var(--color-background-sub-2);
		opacity: .9;

		&::after {
			right: 20px;
			opacity: .8;
		}
	}
}

.voa-button {
	display: flex;
	justify-content: center;
	align-items: center;

	a,
	input[type=submit] {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 280px;
		margin: 16px 0 32px 0;
		padding: 16px 32px;
		font-size: 18px;
		font-weight: bold;
		text-decoration: none;
		letter-spacing: 0.05em;
		z-index: 1;
		transition: .3s;

		&::before,
		&::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			transition: .3s;
		}
		&::before {
			left: 4px;
			top: 4px;
			background: var(--color-background-button);
			z-index: -1;
		}
		&::after {
			left: -4px;
			top: -4px;
			border: 1px solid var(--color-main);
			z-index: 0;
		}

		&:hover {
			transform: translateY(-2px);
		}
	}
}
.voa-button-submit {
	display: flex;
	justify-content: center;

	p {
		position: relative;
		display: inline-block;
		z-index: 1;
		transition: .3s;

		&:hover {
			transform: translateY(-2px);
		}

		input[type=submit] {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			min-width: 280px;
			margin: 0;
			padding: 16px 32px;
			font-size: 18px;
			font-weight: bold;
			text-decoration: none;
			letter-spacing: 0.05em;
			background: transparent;
			border: 0;
			color: var(--color-main);
			z-index: 1;
		}

		&::before,
		&::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
		}
		&::before {
			left: 4px;
			top: 4px;
			background: var(--color-background-button);
			z-index: -1;
		}
		&::after {
			left: -4px;
			top: -4px;
			border: 1px solid var(--color-main);
			z-index: 0;
		}

		.wpcf7-spinner {
			position: absolute;
			border-bottom: -40px;
		}
	}
}

.body .voa-step {
	position: relative;
	margin-bottom: 112px;
	padding: 16px;
	background-color: var(--color-background-button);

	/* &::before {
		content: "";
		position: absolute;
		left: 0;
		bottom: -64px;
		width: 100%;
		height: 64px;
		background-color: var(--color-background-button);
		clip-path: polygon(0 0, 100% 0, 50% 100%);
	} */
	&::after {
		content: "";
		position: absolute;
		display: block;
		left: 0;
		bottom: -80px;
		width: 100%;
		height: 80px;
		background-image: url('images/step-item-bottom.svg');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}
}

.body .voa-step-end {
	position: relative;
	margin-bottom: 40px;
	padding: 16px;
	background-color: var(--color-background-button);
}

.body .voa-profile-header {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 40px;

	.wp-block-column {
		&:first-child {
			margin-right: 40px;
		}

		& > * {
			margin: 0 0 4px 0;
			line-height: 1.5em;
		}

		p {
			padding: 0 2px;
		}

		hr {
			max-width: 480px;
			margin-bottom: 12px;
		}
	}

	img {
		box-shadow: none;
	}
}

/* お問い合わせ */
.wpcf7-form {
	.title {
		display: inline-block;
		padding-bottom: 4px;
		font-weight: bold;

		&::before {
			content: "";
			display: block;
			width: 64px;
			height: 2px;
			margin-left: -72px;
			margin-right: 16px;
			transform: translateY(14px);
			background: var(--color-main);
		}

		.required {
			font-size: .9em;
			font-weight: normal;
			color: var(--color-main);
		}
	}
	
	input[type=text], input[type=password], input[type=date], input[type=datetime], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=time], input[type=url], textarea, select, .search-edit {
		border: 1px solid #666;
		border-radius: 8px;
	}
}
.wpcf7 form .wpcf7-response-output {
	padding: 16px;
	background: #FEFEFE;
	color: #515151;
	/* border-width: 1px; */
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	border-color: var(--color-main);
	border-style: dashed;
}

/* 固定ページ・投稿のタイトルエリアのメタ情報 */
.single-title-meta-wrap,
.entry-card-meta-wrap {
	& > * {
		display: block;
	}

	.title-ja-subtitle {
		font-size: 28px;
	}

	.title-en-title {
		margin-top: 8px;
		font-size: 20px;
		font-weight: normal;
	}

	.title-en-subtitle {
		font-size: 16px;
		font-weight: normal;
	}
}

/* 個別投稿 */
.article {
	.article-header {
		display: flex;
		flex-direction: column;

		.entry-title {
			order: 1;
		}
		.date-tags {
			order: 2;
			
			.post-date, .post-update, .post-author, .amp-back, .entry-category {
				font-size: 15px;
			}
		}
		.eye-catch-wrap {
			order: 3;
			margin-bottom: 24px;

			.cat-label {
				display: none;
			}
		}
	}

	.summary {
			margin-bottom: 40px;
			padding: 16px 24px;
			border: 1px solid var(--color-text);
	}

	.custom-meta-box {
		.summary {
			position: relative;
			margin-bottom: 24px;
			padding: 48px 24px 16px 24px;

			&::before {
				position: absolute;
				left: 0;
				top: 0;
				display: inline-block;
				padding: 4px 16px;
				background: var(--color-text);
				color: var(--color-background);
				font-size: 14px;
			}

			&.meta-ja-summary::before {
				content: "日本語 要約";
			}
			&.meta-en-summary::before {
				content: "English Summary";
			}
		}
	}

	.article-footer {
		padding-bottom: 16px;
		border-bottom: 1px solid var(--color-text);

		.cat-link {
			margin: 0 6px 6px 0;
			border-radius: 0;
			background: var(--color-main);
			font-size: 14px;
		}

		.tag-link {
			margin: 0 6px 6px 0;
			border-radius: 0;
			border-color: var(--color-text);
			font-size: 14px;

			&:hover {
				background: var(--color-background-sub-2);
			}
		}
	}
}

.under-entry-content {
	.pager-post-navi {
		justify-content: space-between;

		.a-wrap {
			width: 48%;

			&:first-child {
				margin-right: 4%;
			}

			&:hover {
				background: var(--color-background-sub-2);
			}

			.card-thumb {
				width: 80px;
				min-width: 80px;
				height: 80px;
				min-height: 80px;
			}

			.prev-post-title, 
			.next-post-title {
				-webkit-line-clamp: 4;
				font-size: 14px;
				font-weight: bold;

				.adjacent-post-title-meta {
					display: block;

					& > * {
						display: block;
					}

					.title-ja-subtitle,
					.title-en-title,
					.title-en-subtitle {
						font-size: 13px;
					}
					
					.title-en-title,
					.title-en-subtitle {
						font-weight: normal;
					}

					.title-en-title {
						padding-top: 6px;
					}
				}
			}

			.iconfont {
				color: var(--color-text);
			}
		}
	}
}

/* 投稿一覧 */
#list,
.list {
	row-gap: 0;
	margin-bottom: 1em;

	.a-wrap {
		padding: 0;

		&:hover {
			background: var(--color-background-sub-2);
		}

		.entry-card {
			padding: 16px 0;
			border-top: 1px solid var(--color-text);

			.entry-card-thumb {
				width: 160px;
				height: 160px;
				margin: 0;

				img {
					width: 100%;
					height: 100%;
				}

				.cat-label {
					left: 0;
					top: 0;
					padding: 2px 4px;
					border: 0;
					background: rgba(230, 5, 5, .8);
					font-size: 13px;
					font-weight: bold;
				}
			}

			.entry-card-content {
				display: flex;
				flex-direction: column;
				margin-left: 176px;

				.entry-card-meta {
					order: 1;
					position: relative;
					margin-bottom: 8px;

					.e-card-info {
						justify-content: flex-start;

						& > * {
							font-size: 15px;
						}

						.entry-date {
							margin: 0;
						}
					}
				}

				.entry-card-title,
				.related-entry-card-title {
					order: 2;
					display: block;
					margin: 0;
					-webkit-line-clamp: unset;
					font-size: 20px;

					.title-ja-subtitle {
						font-size: 18px;
					}

					.title-en-title,
					title-en-subtitle {
						font-size: 16px;
					}
				}
			}
		}

	}
}

/* 作品・作家 */
.single-artwork .article {
	.custom-meta-box {
		.artwork-spec-list {
			display: grid;
			grid-template-columns: max-content 1fr;
			column-gap: 2em;
			row-gap: 8px;
			margin-bottom: 24px;
			padding: 16px 24px;
			border: 1px solid var(--color-text);

			dt {
				font-weight: bold;
			}

			dd {
				margin: 0;
			}
		}
	}

	.entry-categories-tags {
		display: none;
	}
}

.post-type-archive-artwork #list,
.post-type-archive-artwork .list,
.tax-artist #list,
.tax-artist .list {
	.a-wrap {
		.cat-label {
			display: none;
		}

		.entry-card {
			.entry-card-content {
				.entry-card-title,
				.related-entry-card-title {

					& > * {
						display: block;
					}

					.entry-card-artwork-artist {
						margin-bottom: 8px;
						font-size: 15px;
						font-weight: normal;
					}

					.entry-card-artwork-year {
						margin-top: 8px;
						padding: 0 16px;
						text-align: right;
						font-size: 15px;
						font-weight: normal;
					}
				}
			}

			.entry-card-meta {
				margin: 0;
					
				.e-card-info {
					display: none;
				}
			}
		}
	}
}

.artist-taxonomy-list.page-artists {
	.cat-item {
		position: relative;
		margin: 0;
		list-style: none;
		border-bottom: 1px dotted var(--color-text);

		&:not(.header) {
			padding-left: 16px;
		}

		&.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24px 0 8px 0;
			border-bottom: 2px solid var(--color-text);
			font-weight: bold;
		}

		a {
			display: block;
			width: 100%;
			padding: 16px 8px;
			line-height: 20px;
			color: var(--color-text);
			text-decoration: none;

			&::before {
				content: "";
				position: absolute;
				display: block;
				left: 0;
				top: 21px;
				width: 8px;
				min-width: 8px;
				height: 8px;
				background: var(--color-main);
			}

			&:hover {
				background: var(--color-background-sub-2);
			}
		}

		.artist-count {
			position: absolute;
			display: block;
			right: 24px;
			top: 16px;
			font-size: .9em;
		}
	}
}

/* ページャー */
.pagination-next {
	display: none;
}

.pagination {
	.page-numbers {
		border-radius: 0;
		border: 1px solid var(--color-text);
		background: var(--color-background);
		color: var(--color-text);

		&:not(.current ):hover {
			background: var(--color-background-sub-2);
		}

		&.current {
			background: var(--color-text);
			color: var(--color-background);
		}
	}
}

/* サイドバー */
.sidebar {
	background: var(--color-background);
	border-radius: 0;
	border: 0;

	.widget_categories,
	.widget-artists {
		ul {
			padding-left: 8px;

			li {
				position: relative;
				padding-left: 16px;

				a {
					&::before {
						content: "";
						position: absolute;
						display: block;
						left: 0;
						top: 15px;
						width: 8px;
						min-width: 8px;
						height: 8px;
						background: var(--color-main);
					}

					line-height: 20px;

					&:hover {
						background: var(--color-background-sub-2);
					}

					.post-count {
						float: right;
						font-size: .9em;
					}
				}

				.artist-count {
					position: absolute;
					display: block;
					right: 24px;
					top: 8px;
					font-size: .9em;
				}
			}
		}
	}

	.tagcloud a {
		padding: 4px 10px 2px 10px;
		line-height: 20px;
		font-size: 16px;
		border-radius: 0;
		border-color: var(--color-text);
		color: var(--color-text);

		&:hover {
			background: var(--color-background-sub-2);
		}
	}
}

/* フッター */
#footer {
	margin: 0;
	padding: 0;
	background: var(--color-background-base);
	font-size: 14px;

	.footer-in {
		width: 100%;
		margin: 0;

		.footer-bottom {
			margin: 0;
			padding: 0;

			.navi-footer {
				max-width: 1000px;
				margin: 0 auto;
				padding: 16px 0;

				ul {
					justify-content: flex-end;

					li {
						margin-left: 40px;
						border: 0;
					}
				}

				a {
					padding: 4px 8px;
					border-radius: 10px;
					font-weight: bold;
					color: var(--color-main);

					&:hover {
						background: var(--color-background-sub-2);
						opacity: .8;
					}
				}
			}

			.copyright {
				margin: 0;
				padding: 14px;
				background: var(--color-background);
				border-top: 2px solid var(--color-main);
			}
		}
	}
}

.go-to-top-button {
	border-radius: 0;
	opacity: .9;

	&:hover {
		opacity: .7;
	}
}




/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	/* ヘッダー */
	.mobile-menu-buttons {
		color: var(--color-main);
	}

	.mobile-header-menu-buttons{
		height: 72px;
		background: var(--color-background);
	}

	.mobile-menu-buttons {
		.menu-button {
			width: 64px;

			.menu-icon {
			font-size: 32px;
			line-height: 40px;
			}
			.menu-caption {
				font-size: 10px;
				line-height: 14px;
				opacity: 1;
			}
		}
	}

	.logo-menu-button img {
		width: 240px;
		margin-right: 40px;
		padding: 0 4px;
	}

	.menu-content {
		display: flex;
		flex-direction: column;

		.menu-close-button {
			display: block;
			min-width: 32px;
			margin: 16px 16px 8px auto;
			color: var(--color-text);

			.fa, .fas {
				font-weight: normal;
			}

			.fa-times:before {
				content: "×";
			}
		}

		.menu-drawer {
			li {
				position: relative;
				margin-bottom: 16px;
				padding-left: 16px;

				a {
					&::before {
						content: "";
						position: absolute;
						display: block;
						left: 0;
						top: 12px;
						width: 8px;
						min-width: 8px;
						height: 8px;
						background: var(--color-main);
					}
					&::after {
						content: none;
					}

					line-height: 20px;
					font-weight: bold;

					.en {
						font-size: .8em;
						font-weight: normal;
					}
				}
			}
		}
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
	/* Cocoonアピールエリア */
	.appeal .appeal-in {
		height: 400px;
		min-height: 400px;

		.appeal-content {

			.appeal-title {
				line-height: 28px;
				font-size: 28px;
			}
		}
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
	/* Cocoonアピールエリア */
	.appeal .appeal-in {
		height: 280px;
		min-height: 280px;

		.appeal-content {
			margin-top: 24px;

			.appeal-title {
				padding: 8px 2px 2px 8px;
				line-height: 24px;
				font-size: 22px;
				letter-spacing: .01em;
			}
			.appeal-message {
				padding: 8px;
				line-height: 16px;
				font-size: 14px;
				letter-spacing: 0;
			}
		}
	}

	/* コンテンツエリア */
	.content {

		.content-in {

			.main {
				padding: 24px 16px 64px 16px;

				&::before,
				&::after {
					width: 160px;
					height: 80px;
				}
				&::before {
					left: 32px;
					top: 0;
				}
				&::after {
					right: 32px;
					bottom: 0;
					height: 56px;
				}
			}
		}
	}

	.entry-title, .archive-title {
		margin: -25px 0 32px 0;
		padding: 32px 0 32px 32px;
		font-size: 30px;
	}

	.article h2 {
		padding: 28px 16px 16px 16px;
		font-size: 28px;

		&::before {
			content: "";
			display: block;
			width: 28px;
			min-width: 28px;
			height: 28px;
			margin-left: -32px;
			margin-right: 16px;
			transform: translateY(2px);
		}

		&.voa-h2-en {
			margin-bottom: 8px;
			padding: 0 16px 16px 16px;
			font-size: 16px;
			transform: translateY(7px);
		}
	}

	.article h3 {
		font-size: 22px;
	}

	.article h4 {
		font-size: 18px;
	}

	.body .voa-profile-header {
		max-width: 320px;
		margin: 16px auto 40px auto;

		.wp-block-column {
			&:first-child {
				margin-right: 0;
			}
		}
	}

	/* 個別投稿 */
	.article {
		.custom-meta-box {
			.summary {
				padding: 48px 16px 16px 16px;
			}
		}
	}

	.under-entry-content {
		.pager-post-navi {
			.a-wrap {
				width: 100%;
			}
		}
	}

	/* 投稿一覧 */
	#list,
	.list {
		.a-wrap {
			.entry-card {
				padding: 8px 0;
				
				.entry-card-thumb {
					width: 80px;
					height: 80px;

					.cat-label {
						font-size: 12px;
						font-weight: normal;
					}
				}

				.entry-card-content {
					margin-left: 88px;

					.entry-card-meta {
						margin-bottom: 4px;

						.e-card-info > * {
							font-size: 14px;
						}
					}
				}

				.entry-card-title,
				.related-entry-card-title {
					font-size: 15px;

					.title-ja-subtitle {
						font-size: 15px;
					}

					.title-en-title,
					title-en-subtitle {
						font-size: 14px;
					}
				}
			}
		}
	}

	/* フッター */
	#footer {
		.footer-in {
			.footer-bottom {
				.navi-footer {
					ul {
						li {
							flex: 0 1 auto;
							width: auto;
							margin: 0 16px 0 24px;
						}
					}
				}

			}
		}
	}
}