@charset "UTF-8";

/* 
----------------------------------------------------*/
body {
	font-family: "Klee One", cursive;
	font-weight: 400;
	font-style: normal;
}

.grid-wrap {
	position: relative;

	@media (860px <= width) {
		display: flex;
		justify-content: center;
		flex-direction: row-reverse;
		gap: 0 48px;
		padding-left: 6vw;
	}
	& .right-flow {
		width: 100%;
		padding-inline: min(24px,4vw);
		margin-bottom: 24px;
		@media (860px <= width) {
			width: 24vw;
			margin-bottom: 0;
		}
		@media (1024px <= width) {
			width: 320px;
			flex-shrink: 0;
			margin-bottom: 0;
		}
		& .stick {
			position: sticky;
			right: 0;
			top: 120px;
			border: 1px solid #ccc;
			background-color: #fafcfc;
			padding: 12px;
			font-size: 14px;
			& #reactions {
				& ul {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: space-between;
					gap: 0 2%;
					& li {
						flex-basis: 49%;
						margin-bottom: 6px;
						& button {
							width: 100%;
							padding-inline: 0.2em;
							&:disabled {
								background-color: #ccc;
								&:hover {
									color: inherit;
								}
							}
						}
					}
					@media (860px <= width) {
						display: flex;
						flex-direction: column;
						& li {
							flex-basis: 100%;
						}
					}
					@media (1024px <= width) {
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: space-between;
						gap: 0 2%;
						& li {
							flex-basis: 49%;
						}
					}

				}
			}
			& .fav-wrap {
				& button {
					width: 100%;
					padding-inline: 0.2em;
					&:disabled {
						background-color: #ccc;
						&:hover {
							color: inherit;
						}
					}
				}
			}
			/* & .fav-wrap {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 6px 2%;
				& p {
					flex-basis: 49%;
				}
				& #favoriteBtn,
				& button {
					flex-basis: 49%;
					padding-inline: 0.2em;
					text-align: center;
				}
				& button:disabled {
					background-color: #ccc;
				}
			} */
			& .write-wrap {
				border-top: 1px solid #ccc;
				margin-top: 12px;
				padding-top: 12px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				position: relative;
				& p {
					flex-basis: 49%;
					& a {
						display: inline-flex;
						align-items: center;
						& .userIcon {
							background: #fff;
							aspect-ratio: 1 / 1;
							height: auto;
							display: inline-block;
							width: 16px;
							border-radius: 6px;
							margin-right: 4px;
							border: 1px solid #ddd;
							@media (480px <= width) {
								width: 48px;
								position: absolute;
								right: 12px;
								top: 12px;
							}
							@media (860px <= width) {
								width: 16px;
								position: static;
							}
							@media (1024px <= width) {
								position: absolute;
								right: 12px;
								top: 12px;
								width: 60px;
							}
						}
					}
				}
				@media (860px <= width) {
					flex-direction: column;
					& p {
						flex-basis: 100%;
					}
				}
				@media (1024px <= width) {
					/* background: url(/src/img/fv/1523515707.png) no-repeat right bottom / 96px; */
				}
			}
			& .bookmark-wrap:has(button) {
				border-top: 1px solid #ccc;
				margin-top: 12px;
				padding-top: 12px;
				text-align: center;
				& button {
					width: 100%;
					padding-inline: 0.2em;
				}
			}
		}
	}
}
.article-wrap {
	<?= 'font-family: "' . htmlspecialchars($font) . '", sans-serif;';?>
	width: 100%;
	padding-inline: min(24px,4vw);
	font-weight: 400;
	font-style: normal;
	flex: 1;
	@media (860px <= width) {
		max-width: 640px;
		padding-inline: 0;
	}
}

h1 {
	font-size: var(--fs-22-36);
	margin-bottom: 12px;
}

/* チャート */
.lifeChart-wrap {
	margin-bottom: 12px;
	aspect-ratio: 10 / 6;

	width: 104%;
	margin-left: -2%;
	margin-right: 0;
	@media (1024px <= width) {
		width: 112%;
		margin-left: -9%;
		margin-right: -3%;
	}
	height: auto;
	& #lifeChart {
		width: 100%!important;
	}
}

/* 目次 */
.article-index {
	border: 1px solid #ccc;
	background-color: #fafcfc;
	padding: 1em;
	margin-bottom: 40px;
	& details {
		&:open summary {
			margin-bottom: min(3vw,12px);
		}
		& > ul {
			& > li {
				margin-bottom: 40px;
				& p {
					border-bottom: 1px solid #ccc;
					margin-bottom: 12px;
				}
			}
		}
	}
	& h2 {
		font-size: 18px;
		margin-left: 6px;
	}
	& .h3 {
		font-size: 16px;
		margin-left: 12px;
	}
	& .h4 {
		font-size: 16px;
		margin-left: 24px;
	}
	& .h5 {
		font-size: 16px;
		margin-left: 36px;
	}
	& .h5::before,
	& .h4::before,
	& .h3::before,
	& h2::before {
		content: "";
		display: inline-block;
		width: 0.8em;
		height: 1px;
		background-color: #777;
		vertical-align: middle;
		margin: 0 0.2em 0.16em 0.1em;
	}
}

/* 記事 */
.kiji {
	&:not(:first-of-type) {
		padding-top: min(12vw,60px);
	}
	& .section-heading {
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		background: #fff;
		padding: 4px 6px;
		display: flex;
		justify-content: space-between;
		margin-bottom: min(5vw,36px);
		@media (width < 860px ) {
			position: sticky;
			top: 12px;
			z-index: 100;
		}
		& button {
			border: 0px none;
			padding: 0 4px;
		}
	}
	& .section-image {
		padding-inline: min(2vw,6px);
		margin-bottom: min(5vw,36px);
		& img {
			max-width:100%;
		}
	}
	& .section-content {
		padding-inline: min(2vw,6px);
	}
	& h2 {
		padding-inline: min(2vw,6px);
		font-size: 24px;
		font-weight: bold;
		margin-top: 1.5em;
		margin-bottom: 0.75em;
	}
	& h3 {
		font-size: 22px;
		font-weight: bold;
		margin-top: 2.5em;
		margin-bottom: 0.75em;
	}
	& h4 {
		font-size: 20px;
		font-weight: bold;
		margin-top: 2.5em;
		margin-bottom: 0.75em;
	}
	& h5 {
		font-size: 18px;
		font-weight: bold;
		margin-top: 2.5em;
		margin-bottom: 0.75em;
	}
	& * {
		line-height: 2;
		letter-spacing: 0.05em;
	}
	& li,
	& p {
		font-size: var(--fs-15-18);

		/* 禁則処理 */
		/* line-break: strict;
		word-break: keep-all;
		overflow-wrap: break-word; */
	}
	& ol,
	& ul,
	& blockquote,
	& p {
		margin-bottom: 1.5em;
	}
	& blockquote {
		background-color: var(--back-gray);
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: min(4vw,24px);
		font-size: var(--fs-13-16);
		& p {
			margin-bottom: 0;
		}
	}
	& cite {
		font-size: var(--fs-11-14);
	}
	& b {
		font-weight: bold;
	}
	& a {
		text-decoration: underline 1px dotted var(--dark-gray);
		&:hover {
			background-color: var(--light-gray);
		}
	}
	& em {
		text-shadow: 0 3px 5px rgb(255 255 255 / .6);
		line-height: normal;
		background: linear-gradient(rgb(0 0 0 / 0) 72%, rgb(133 174 192 / .6) 0);
		transform: skewX(-20deg);

	}
	& span.underline {
		background-image: linear-gradient(90deg, #1e7eb3, #44cce2);
		background-repeat: no-repeat;
		background-position: bottom;
		background-size: 100% 6%;
	}

	/**/
	& .bigger {font-size: 1.5em;}
	& .biggest {font-size: 2em;}
	& .smaller {font-size: 0.8em;}
	& .smallest {font-size: 0.6em;}
	& .underline {
		text-decoration: underline;
	}
	& .highlight {
		background-color: yellow;
	}
	& .strikethrough {
		text-decoration: line-through;
	}

	/* */
	& .box {
		margin-block: 1em;
	}
	& .box-gray   { background: #f4f4f4; border-radius: 6px; padding: 1em;}
	& .box-blue   { background: #e6f4ff; border-radius: 6px; padding: 1em;}
	& .box-red    { background: #ffecec; border-radius: 6px; padding: 1em;}
	& .box-yellow { background: #fffde6; border-radius: 6px; padding: 1em;}
	& .box-green  { background: #e6ffed; border-radius: 6px; padding: 1em;}

	/**/
	& .delimiter {
		line-height: 1.6em;
    width: 100%;
    text-align: center;
		padding: .4em 0;
	}
	.delimiter:before {
    display: inline-block;
    content: "***";
    font-size: 30px;
    line-height: 65px;
    height: 30px;
    letter-spacing: .2em;
	}

}

/* */
.similar-articles {
	& h2 {
		background: #e1eeee;
		display: inline-block;
		padding: min(1vw, 6px) min(4vw, 24px);
		border-radius: 5px 5px 0 0;
	}
	& div {
		border: 1px solid #ccc;
		padding: 24px 12px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		gap: 24px 0;

		@media (420px <= width) {
			flex-direction: row;
			justify-content: space-around;
		}
		& .card {
			flex-basis: 46%;
			& a {
				display: flex;
				flex-direction: column-reverse;
				font-size: var(--fs-11-14);
				& img {
					border-radius: 5px;
					margin-bottom: 12px;
				}
			}
		}
	}
}