@charset "utf-8";

/* webフォントをCDNで読み込む場合はここで @import */
html {
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	font-size: clamp(12px, 3.75vw, 16px);
}

pre {
	overflow: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
}

pre,
code,
kbd {
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

a {
	text-decoration: none;
}

/* 引用元URL表示（jQueryで生成）*/
.cite_link {
	overflow: hidden;
	font-size: .9em;
	font-style: italic;
	text-align: right;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.cite_link::before {
	content: '【引用元】';
	opacity: .6;
}

/* はみ出しを防ぐ */
img,
iframe,
video,
textarea {
	max-width: 100%;
}

/* クリッカブル要素のカーソルをポインターに */
[role="button"],
[type="button"],
[type="reset"],
[type="submit"],
button,
label,
details summary {
	cursor: pointer;
}

/* form */
fieldset {
	border: 0 none;
}

legend {
	display: none;
}

[role="button"],
[type="button"],
[type="reset"],
[type="submit"],
[type="text"],
[type="password"],
button,
textarea,
select {
	padding: 3px 4px;
	border: 1px solid;
}

textarea {
	width: 100%;
}

textarea:invalid:focus,
input:invalid:focus {
	border: 1px solid #eab2b2;
	background: #fbf0f0;
}

.validation_message {
	margin: 0;
	display: none;
	color: #ff7676;
	font-size: 12px;
}

:invalid+.validation_message {
	display: block;
}

/* リセットCSSで消えたselect要素の下向き矢印を再表示 */
select {
	appearance: menulist;
	-moz-appearance: menulist;
	-webkit-appearance: menulist;
}

select::-ms-expand {
	display: block;
}

/* table */
table {
	border-collapse: collapse;
}

/* detailsの下向き矢印を消す */
details summary {
	list-style: none;
}

details summary::-webkit-details-marker {
	display: none;
}

/* details open animation */
details[open] div {
	animation: accordion 0.4s linear;
	overflow: hidden;
}

@keyframes accordion {
	0% {
		opacity: 0;
		height: 0;
	}

	70% {
		opacity: 0;
		height: 100px;
	}

	100% {
		opacity: 1;
	}
}

/* ほぼ変更がないであろう共通パーツ */
/* article内のul/olの左パディング */
.container ul:not([class]) {
	padding-left: 1em;
}

.container ol:not([class]) {
	padding-left: 1.5em;
}

/* パンくずリスト */
.breadcrumb {
	font-size: 80%;
	font-weight: 700;

	& li {
		display: inline;
		list-style: none;
	}

	& li::after {
		content: "\f054";
		font-family: "icomoon";
	}

	& li:last-child::after {
		content: "";
	}

	& a span {
		font-weight: 400;
	}
}

/* エラー・成功・概要等 */
.attention,
.complete,
.outline,
.new {
	border: 1px solid;
	border-radius: 3px;
	box-shadow: 1px 1px 0 rgba(255, 255, 255, .8) inset, -1px -1px 0 rgba(255, 255, 255, .8) inset;
}

.attention {
	border-color: #eab2b2;
	color: #900;
	background: #fbf0f0;
}

.complete {
	border-color: #b2eab2;
	color: #090;
	background: #f2fbf2;
}

.outline,
.new {
	border-color: #a9deff;
	color: #0c6eab;
	background: #e5f1ff;
}

:not(span):where(.attention, .complete, .outline) {
	padding: 12px;
	display: flex;
	align-items: center;
	gap: 1em;
}

:not(span):where(.attention, .complete, .outline)::before {
	font-family: "icomoon";
}

:not(span).attention::before {
	content: "\f071";
}

:not(span).complete::before {
	content: "\f058";
}

:not(span).outline::before {
	content: "\f05a";
}

:is(ul, ol):is(.attention, .complete, .outline) li {
	margin-left: 1em;
}

/* カテゴリ・タグ・コメントリンクアイコン */
:where(.categories, .tags, .comments)::before {
	margin-right: 3px;
	font-family: "icomoon";
}

.categories {
	margin: 0 5px;
}

.categories::before {
	content: "\f07b";
}

.tags::before {
	content: "\f02b";
}

.comments::before {
	content: "\f075";
}

/* ページ送りナビ */
.pagenation {
	margin-block: 1em;
	text-align: center;
}

.home,
.parent,
.prev,
.next,
.page_nums,
.current {
	min-width: 1.6em;
	display: inline-block;
	text-align: center;
}

.parent::before,
.prev::before,
.next::after {
	font-family: "icomoon";
}

.parent::before {
	margin-right: 5px;
	display: inline-block;
	content: "\f053";
	transform: rotate(90deg);
}

.prev::before {
	margin-right: 5px;
	content: "\f053";
}

.next::after {
	margin-left: 5px;
	content: "\f054";
}

:is(.view, .page) .pagenation a {
	margin-block: 1em;
	padding: 10px;
	width: 100%;
	min-height: 2.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .5em;
	text-align: center;
}

:is(.view, .page) .pagenation .prev {
	justify-content: start;
}

:is(.view, .page) .pagenation .next {
	justify-content: end;
}

/* 横並びかつ区切り文字入れたリスト */
.rows_list {
	padding-left: 0;
}

.rows_list li {
	display: inline;
	list-style: none;
}

.rows_list li::after {
	content: " / ";
}

.rows_list li:last-child::after {
	content: none;
}

/* ネタバレ */
span.hidearea {
	padding: 6px 10px;
	border: 2px solid #aaa;
	line-height: 2;
	background: #eee;
	border-radius: 3px;
	cursor: pointer;
}

span.hidearea:is(:active, :hover) {
	background: #aaa;
	color: #eee;
}

div.hidearea {
	margin-top: -1.1em;
	margin-bottom: 1em;
	padding: 5px 10px;
	border: 2px solid #aaa;
	background: #fafafa;
}

div.hidearea p {
	margin-bottom: 0;
}

/* ************************
他
.global_header 
	h1
		#site_title 
	.description 
.global_nav 
	ul
		li
			a
			details
				summary
					a
				ul
					li
.breadcrumb 
	ol
		li
			a
			span
.container 
	.contents_box
		.post_header 
			.post_title 
		.post_footer 
			time
				.year
				.month
				.date
			.categories 
			.tags 
			.comments 
		.post_body 
			.add_file
			.continue
				.button
			.gallery 
				li
					a
						img
	.contents_list 
	.reaction 
		.clap_button 
		.share 
	.related_entries 
		ul
			li
				a
	#comment 
		.comments_area 
			.comment 
				.comment_info 
					h4
					.comment_url 
					time
				.comment_body 
		#comment_form 
			.field 
				label
				input[type="text"]
				textarea
				.validation_message
				input[type="submit"]
	.pagenation 
		.home 
		.parent 
		.prev 
		.next 
		.page_nums 
		.current 
.global_footer 
	.copyright 
	address
.go_to_top 
.attention 
.new 
* ************************ */