@charset "UTF-8";

/* //////////////////////////////////////////////////////////// */
/* article */
/* //////////////////////////////////////////////////////////// */

/*--------------------------------------------------------- governor ---------------------------------------------------------*/
#contents {
	#contents-title {
		& .container {
			text-align: center;

			& h1 {
				padding: 5px 0;

				.governor & span {
					margin-right: -1px;
					padding: .3em;
					display: inline-block;
					line-height: 1;
					border: 1px solid var(--white);

					&:first-child,
					&:first-child + * {
						color: var(--main-color);
						background-color: var(--white);
						border-left-color: var(--main-color);
					}
				}
			}
		}
	}
	#contents-menu {
		padding: 0 0 20px;
		position: relative;
		background-color: var(--bg-color);
			
		&::before {
			content: "MENU";
			margin-bottom: 1px;
			display: block;
			padding: 1em;
			color: var(--white);
			background-color: var(--main-color);
		}
		&::after {
			content: "";
			width: .7em;
			height: .7em;
			display: block;
			position: absolute;
			top: 1.3em;
			right: 1.2em;
			border: 1px solid var(--white);
			border-top-color: transparent;
			border-left-color: transparent;
			transform: rotate(45deg);
			transition: .3s;
		}

		&.active::after  {
			top: 1.8em;
			transform: rotate(-135deg);
		}

		& nav {
			display: grid; 
			grid-template-rows: 0fr;
			position: relative;
			transition: 250ms grid-template-rows ease;

			.active & {
				grid-template-rows: 1fr;
			}

			& > div {
				overflow: hidden;

				&::after {
					content: "";
					width: calc(100% / 3);
					height: 0;
					display: block;
				}

				& a {
					padding: 1em;
					display: block;
					overflow: hidden;
					position: relative;
					color: var(--white);
					text-decoration: none;
					background-color: var(--link-color);
					border-bottom: 1px solid var(--htitle);
					transform-origin: top;

					&::after {
						content: "";
						width: .6em;
						height: .6em;
						display: block;
						position: absolute;
						top: 50%;
						right: 15px;
						border: 1px solid var(--white);
						border-bottom-color: transparent;
						border-left-color: transparent;
						transform: translate(-50%, -50%) rotate(45deg);
					}

					&:has(img) {
						& img {
							display: none;
						}
					}
				}
			}
		}
	}
	#contents-body {
		/* -------------------- governor -------------------- */
		.governor.top & {
			& .container {
				display: flex;
				flex-direction: column-reverse;

				& section {
					margin-bottom: 40px;
				}
			}
		}
		.governor & {
			counter-reset: comment;

			& h4[id^="anc"] {
				counter-increment: comment;

				&::before {
					content: counter(comment) ".";
					margin-right: .5em;
					display: inline-block;
				}
			}

			& .comment-list {
				margin-bottom: 2em;
				padding: 20px;
				background-color: var(--htitle);
				border: 1px solid var(--border-color1);
				border-radius: 4px;

				& li:not(:last-child) {
					margin-bottom: .5em;
				}
			}

			& .comment {
				margin: 0 0 1em;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				& strong {
					width: 2em;
					padding: .5em .4em;
					line-height: 1;
					text-align: center;
					writing-mode: vertical-lr;
					border-radius: 3px;
				}

				& p {
					padding: 1em;
					flex-grow: 9;
					position: relative;
					border-radius: 4px;

					&::before {
						content: "";
						width: 0;
						height: 0;
						display: block;
						position: absolute;
						top: 10px;
						border: 6px solid transparent;
					}
				}

				&.answerer {
					& > * {
						background-color: var(--comment-bg1);
					}

					& p {
						margin-left: 15px;

						&::before {
							right: 100%;
							border-right: 9px solid var(--comment-bg1);
						}
					}
				}

				&.interviewer {
					flex-direction: row-reverse;

					& > * {
						background-color: var(--comment-bg2);
					}

					& p {
						margin-right: 15px;

						&::before {
							left: 100%;
							border-left: 9px solid var(--comment-bg2);
						}
					}
				}
			}

			& th {
				width: 7em;
			}
			
			& .kaiken {
				margin-bottom: 20px;
				border: 1px solid var(--border-color1);
				border-radius: 4px;

				& > div {
					padding: 15px 20px;

					&:first-child {
						background-color: var(--htitle);
						border-bottom: 1px solid rgba(0,0,0,.1);
					}
				}
			}
		}
	}
}












/* /////////////////////////////////////////////////////////////////////////////////////// */
/* PC *//* /////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 1100px) {
	/*--------------------------------------------------------- governor ---------------------------------------------------------*/
	#contents {
		#contents-menu {
			padding: 20px 20px 0;
			border-radius: 5px 5px 0 0;

			.governor.top & {
				margin-top: -45px;
				padding: 20px;
				border-radius: 0 0 5px 5px;
			}

			&::before,
			&::after {
				content: none;
			}

			& nav {

				& > div {
					margin: 0 auto;
					padding: 5px;
					display: flex;
					overflow: visible;
					flex-wrap: wrap;
					justify-content: space-between;
					align-items: stretch;
					background-color: var(--bg-color);

					& a {
						width: calc((100% - 2px) / 3);
						padding: 1em 1.5em 1em 1em;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						background-color: var(--main-color);
						border-bottom-color: var(--bg-color);

						&:hover {
							background-color: var(--accent-color);
						}
						&::after {
							right: 10px;
						}

						.governor.top &:first-child,
						.governor.top &:first-child + * {
							width: calc(50% - .5px);
						}

						&:has(img) {
							padding: 0;
							flex-direction: column;

							&::after {
								top: auto;
								bottom: 1em;
							}

							& img {
								width: 100%;
								height: 200px;
								display: block;
								object-fit: cover;
							}

							& span {
								padding: .75em 1em;
							}
						}
					}
				}
			}
		}
		#contents-body {
			& .comment {
				&:has( + h4) {
					margin-bottom: 6.5em !important;
				}

				& strong {
					position: absolute;
				}

				& p {
					margin: 0 calc(2em + 15px) 0 !important;
					padding: 1.5em;
				}
			}
		}
	}
}