@charset "UTF-8";

:root {
	--color-main: #333;
	--color-link: #1269CE;
	--color-link-hover: #5196E5;
	--color-light-green: #A1E672;
	--color-light-gray: #F5F6F5;
	--color-border-gray: #D3D6D5;
}

/*
.contents_right {
	display: none;
}
*/

#main {

	.pcp-container {
		max-width: 800px;
		margin-right: auto;

		@media screen and (max-width: 1024px) {
			max-width: unset;
		}
	}

	img {
		max-width: 100%;
		height: auto;
		vertical-align: bottom;
	}
	a {
		transition: 0.3s;
	}
	p {
		a {
			color: var(--color-link);
			text-decoration: underline;
			transition:
				opacity 0.2s ease,
				background-color 0.2s ease;

			&:hover {
				color: var(--color-link-hover);
			}
		}
	}

	/* =========================================
	見出し
	========================================= */
	.pcp-title {
		& + p {
			a {
				text-decoration: none;
			}
		}
	}


	/* =========================================
	雑誌セクション (Journal)
	========================================= */
	.journal-section {
		display: flex;
		gap: 40px;
		margin-bottom: 40px;
		justify-content: space-between;

		@media screen and (max-width: 767px) {
			flex-direction: column;
			gap: 3px;
			margin-bottom: 0;
		}

		.journal-left {
			flex: 0 0 261px;

			@media screen and (max-width: 767px) {
				flex: unset;
				max-width: 280px;
				margin: 0 auto;
				transform: translateX(-7px);
			}
		}

		.journal-image {
			margin-bottom: 16px;

			@media screen and (max-width: 767px) {

				.journal-cover {
					max-width: 263px;
					margin: 0 auto;
					display: block;
				}
			}
		}

		.journal-links {

			a {
				font-size: 14px;
				color: var(--color-main);
				display: flex;
				align-items: center;
				justify-content: flex-start;
				gap: 8px;
				font-family: 'Manrope', sans-serif;
				font-weight: 500;
				margin: 0 0 8px 3px;

				&:before {
					content: "";
					width: 6px;
					height: 6px;
					border-top: 2px solid var(--color-main);
					border-right: 2px solid var(--color-main);
					transform: rotate(45deg);
					display: block;
				}

				&:hover {
					color: var(--color-link);
				}
				
				&::after {
					display: none;
				}
			}

			.journal-links--caption {
				font-size: 13px;
				color: #808080;
				padding-left: 1em;
				text-indent: -1em;
				margin-top: 16px;
				line-height: 1.5;
			}
		}

		.journal-right {
			flex: 1 1 500px;

			@media screen and (max-width: 767px) {
				display: flex;
				flex-direction: column-reverse;
				justify-content: flex-end;
				flex: unset;

				.journal-text {
					margin: 0;
				}
			}
		}

		.journal-box {
			padding: 18px 20px;
			border: 2px solid var(--color-light-green);
			font-size: 15px;
			margin-top: 19px;

			@media screen and (max-width: 767px) {
				margin: 0 0 17px;
				line-height: 1.6;
			}
		}
	}

	/* =========================================
	著者アンカーリンク (Author Anchors)
	========================================= */
	.author-anchors {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		margin: 30px 0 40px;

		@media screen and (max-width: 767px) {
			grid-template-columns: repeat(1, 1fr);
			gap: 12px;
			margin: 16px 0 33px;
		}

		.anchor-card {
			display: flex;
			align-items: center;
			color: var(--color-main);
			font-weight: 500;
			border: 2px solid var(--color-light-gray);
			background: var(--color-light-gray);
			height: 80px;
			overflow: hidden;

			&:hover {
				opacity: 0.7;
				text-decoration: none;
			}

			span {
				display: flex;
				align-items: center;
				width: 100%;
				justify-content: space-between;
				margin: 0 22px 0 16px;

				@media screen and (max-width: 767px) {
					font-size: 14px;
				}

				&:after {
					content: "";
					width: 6px;
					height: 6px;
					border-top: 2px solid var(--color-main);
					border-right: 2px solid var(--color-main);
					transform: rotate(134deg);
					display: block;
				}
			}

			img {
				width: 76px;
				object-fit: cover;
			}
		}
	}

	/* =========================================
	記事ブロック (Article Block)
	========================================= */
	.article-block {
		margin-top: 40px;
		padding-top: 3px;
		border-top: 1px solid var(--color-border-gray);
		position: relative;

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

		@media screen and (max-width: 767px) {
			margin-top: 30px;
		}
	}

	.author_content {
		margin: 13px 0 0;

		@media screen and (max-width: 767px) {
			margin-top: 10px;
		}
	}

	.author-main {
		display: flex;
		gap: 25px;
		margin-bottom: 24px;

		@media screen and (max-width: 767px) {
			flex-direction: column;
			gap: 0;
			margin-bottom: 22px;
		}

		.author-main-text {
			flex: 1;

			a:after {
				content: none;
			}
		}

		.author-main-pic {
			flex: 0 0 340px;

			@media screen and (max-width: 767px) {
				flex: unset;
				max-width: 340px;
				margin: 0 auto;
			}

			.img {
				border: 1px solid var(--color-border-gray);
				padding: 10px;
			}

			.button {
				margin: 20px 0 0 auto;
				padding-left: 10px;

				@media screen and (max-width: 767px) {
					margin-left: 0;
				}
				
				[lang="en"] & {
					font-size: 13px;
				}

				&:after {
					left: 13px;
					content: '' !important;
					padding: 0 !important;
				}
			}
		}
	}

	.author_info {
		display: flex;
		gap: 32px;
		background: var(--color-light-gray);
		padding: 32px;
		margin-bottom: 17px;

		@media (max-width: 767px) {
			padding: 24px 20px;
			gap: 17px;
			flex-direction: column;
		}

		.author_image {
			flex: 0 0 180px;
			text-align: center;

			img {
				object-fit: cover;
				margin-bottom: 10px;
			}

			.caption {
				font-weight: 500;
				text-align: left;
				margin: 0;
			}

			@media (max-width: 767px) {
				flex: unset;
				width: 160px;
				margin: 0 auto;

				.caption {
					text-align: center;
				}

				img {
					margin-bottom: 9px;
				}
			}
		}

		.author_text {
			flex: 1;

			p {
				margin: 0;
			}
		}
	}

	.author_sns {
		h5 {
			margin: 0 0 8px 0;
			font-size: 1rem;
		}

		p {
			font-size: 15px;
			line-height: 1.5;
		}
	}

	/* =========================================
	ページネーション
	========================================= */
	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 32px;
		border-top: 1px solid var(--color-border-gray);
		padding-top: 56px;
		margin-top: 40px;
		margin-left: 17px;

		@media screen and (max-width: 767px) {
			gap: 20px;
			padding-top: 40px;
			margin-top: 30px;
			margin-left: -22px;
		}

		.pagination_item.prev a,
		.pagination_item.next a {
			color: var(--color-main);
			display: flex;
			align-items: center;
			gap: 10px;

			@media screen and (max-width: 767px) {
				gap: 5px;
			}

			&:before {
				content: "";
				width: 6px;
				height: 6px;
				border-top: 2px solid var(--color-main);
				border-right: 2px solid var(--color-main);
				transform: rotate(227deg);
				display: block;
			}

			&.disable {
				color: #ACACAC;
				pointer-events: none;

				&:before {
					border-color: #ACACAC;
				}
			}
		}

		.pagination_item.next a {
			flex-direction: row-reverse;

			&:before {
				scale: -1;
			}
		}

		.pagination_item.back {
			display: block;

			a {
				display: flex;
				align-items: center;
				gap: 9px;
				width: 160px;
				justify-content: center;
				color: var(--color-main);
				font-size: 18px;
				border: 2px solid var(--color-border-gray);
				height: 48px;
				border-radius: 999px;

				&::before {
					content: "";
					display: inline-block;
					width: 18px;
					height: 10px;
					background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10'%3E%3Cpath d='M7,9V7H21V9Zm0,4V11H21v2Zm0,4V15H21v2ZM4,9A1,1,0,1,1,4,7,1,1,0,1,1,4,9Zm0,4a1,1,0,1,1,0-2,1,1,0,1,1,0,2Zm0,4a1,1,0,1,1,0-2,1,1,0,1,1,0,2Z' transform='translate(-3 -7)' fill='%23292929'/%3E%3C/svg%3E")
						no-repeat center / contain;
				}

				&:hover {
					background: var(--color-light-gray);
				}
			}
		}
	}
}