/*
Theme Name: The Authentic Japan
Theme URL: acade.met.tokyo
Description: 学習参考会の習作デザインです。
Author: The Authentic Japan
Version: テーマのバージョン
Tags: テーマの特徴を表すタグ（カンマ区切り/オプション）
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/



/* この下に通常のcssを書いていく */

/* iPhoneで文字が自動調節されるのを防ぐ
html {
	-webkit-text-size-adjust: 100%;
}
*/

/* 基本設定 */
body {
	color: #000000;
	margin: 0;
	background-color: #ffffff;
/*	font-family: 'BIZ UDMincho', serif; */ /* 組版B */
	font-family: 'Montserrat', 'Shippori Antique', sans-serif;
}
/* 太字の設定 */
h1, h2, h3, h4, h5, h6, b {
	font-family: 'Montserrat', 'Zen Kaku Gothic New', sans-serif;
}
/* 組版B */
/* p {
	font-family: 'Zen Old Mincho', serif;
} */

/* 余白などのクリア */
h2, h3, p {
	margin: 0;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}


/* メイン幅 */
.main {
	width: min(90%, 1000px);
	margin: auto;
}



/* ヘッダー */
.bar {
	border-bottom: 1px solid #000000;
	position: sticky;
	top: 0;
	z-index: 1;
}
.header {
	background: transparent;
	height: 90px;
}

.header-container {
	display: flex;
	align-items: center;
	height: 100%;
}
.header-container > .site {
	margin-right: auto;
}

/* 画面が広いとき"screen-wide"のclassがついた画像が表示される */
.screen-wide { display: block; }
.screen-middle { display: none; }
.screen-narrow { display: none; }
 
/* 画面が狭いとき"screen-middle"のclassがついた画像が表示される */
@media (max-width: 800px) {
	.screen-wide { display: none; }
	.screen-middle { display: block; }
	.screen-narrow { display: none; }
}
/* 画面がめちゃ狭いとき"screen-narrow"のclassがついた画像が表示される */
@media (max-width: 500px) {
	.screen-wide { display: none; }
	.screen-middle { display: none; }
	.screen-narrow { display: block; }
}



/* ナビメニュー */
.navmenu ul {
/*	width: 50%; */
	font-size: 20px;
	display: flex;
}
.navmenu li {
	padding: 0 16px;
}
@media (max-width: 800px) {
	.navmenu ul {
		display: grid;
	}
	.navmenu li {
		padding: 5px;
	}
}
.navmenu a {
	text-decoration: none;
	color: #000000;
	padding: 0;
}
.navmenu a:hover {
	color: #606060;
}




h2 {
	font-size: 28px;
	margin: 42px 0 24px;
}
h2 span {
	padding: 0 0 2px 0;
	border-bottom: solid 1px #000000;
}




/* 記事一覧 */
figure.logoChara {
	display: flex;
	justify-content: center;
	margin: 0 auto 42px;
}
div.postsWrapper {
	display: grid;
	gap: clamp(12px, 3vw, 24px);
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 800px) {
	div.postsWrapper {
		grid-template-columns: repeat(2, 1fr);
	}
}
section.posts {
	display: block;
}
h3.postsTitle {
	margin: 24px 0 10px 0;	
}
h3.postsTitle a {
	text-decoration: none;
	color: #000000;
	background: linear-gradient(transparent 66%, #e0e0e0 66%); /* 蛍光ペン */
	padding: 0.2em;
}
h3.postsTitle a:hover {
	text-decoration: none;
	color: #606060;
}
.posts img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin-bottom: 10px;
}
.posts p:first-letter { /* 最初の文字をぶち抜きで */
	text-indent: 0;
	font-size: 2.4em;
	padding: 0 0.125em;
	float: left;
	line-height: 1.2;
}
.posts p {
	clear: both;
}



/* ページナビゲーション 記事一覧 */
div.nav-links {
	text-align: center;
	margin: 64px auto 0;
}
.nav-links span, a {
	text-size: 14px;
	margin: 0;
	padding: 10px;
}
.nav-links a {
	border: solid 1px #c0c0c0;
	border-radius: 20px;
	text-decoration: none;
	color: #000000;
}
.nav-links a:hover {
	color: #606060;
}





/* single ページ */
.postWrapper h2 {
	font-size: 28px;
	padding: 0;
	margin: 64px 0 24px;
}
.postWrapper h2 a {
	text-decoration: none;
	color: #000000;
	background: linear-gradient(transparent 66%, #e0e0e0 66%); /* 蛍光ペン */
	padding: 0.2em;
}
/* シングルページの画像と文章 */
.contentWrapper figure {
	margin: 0 24px 12px 0;
	width: 50%;
	clear: both; /* 手前までの回り込みを解除 */
	float: left; /* 自身は左寄せ */
}
.contentWrapper figure.right {
	float: right;
	margin: 0 0 12px 24px;
}	
.contentWrapper img {
	margin: 0;
}
.contentWrapper figure figcaption {
	margin: 0;
	padding: 0;
	font-style: italic;
}
.contentWrapper figure figcaption::before {
	content: "▲ ";
	font-style: normal;
}
.contentWrapper p {
	text-indent: 1em;
	margin: 0 0 12px 24px;
}
@media (max-width: 800px) {
	.contentWrapper figure {
		width: 100%;
	}
	.contentWrapper figure img {
		aspect-ratio: 3 / 1; /* 画像を切り抜き */
		object-fit: cover;
		width: 100%;
	}
}
/* テキストの1文字目を大きくして回り込み */
.contentWrapper p.firstletter {
	text-indent: 0;
}
.contentWrapper p.firstletter:first-letter {
	text-indent: 0;
	font-size: 2.4em;
	padding: 0 0.125em;
	float: left;
	line-height: 1.2;
}
.clear {
	width: 100%;
	margin-top: 36px;
	clear: both;
	float: left;
}



/* タグ */
.tags {
	text-align: right;
	margin-bottom: 4px;
}
.tags + .tags {
	margin-bottom: 28px;
}
.tags a {
	font-style: italic;
	padding: 0 5px;
	text-decoration: none;
	color: #000000;
}
.tags a:hover {
	color: #606060;
}



/* ページナビゲーション */
.pagenav { /* 回り込みを解除 */
	clear: both;
	text-align: center;
	padding-top: 64px;
}
.pagenav img {
	display: inline;
	text-align: center;
}
.pagenav span {
	vertical-align: middle;
	display: inline-block; /* タイトルが変な位置で改行されるのを防ぐ */
/*	white-space: nowrap; */ /* これつけちゃうと頑なに改行せずにハミ出ちゃうので使用しない */
}
.pagenav a {
	color: #000000;
	text-decoration: none;
	padding: 0 24px 0;
}
.pagenav a:hover {
	color: #606060;
}




/* 404 */
p.error404{
	margin: 64px auto;
	text-align: center;
}



/* フッター */
.footer-container {
	display: grid;
	grid-column: 2;
	grid-template-columns: auto auto;
	gap: 24px;
	justify-content: center;
	align-content: center;
	align-items: center;
	padding-top: 64px;
	padding-bottom: 48px;
}
.footer-menu {
	display: grid;
	gap: 0.5em;
}
@media (min-width: 800px) {
	.footer-container {
		display: flex;
		gap: 42px;
		justify-items: center;
	}
	.footer-menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
		max-width: 500px;
	}
}
/* フッター・テキストメニュー */
.footer-copy {
	margin: 48px auto 48px;
	display: grid;
	justify-items: center;
}