@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* reset css */
*,*::before,*::after{box-sizing:border-box}*{margin:0}body{font-feature-settings:"palt" 1;overflow-wrap: anywhere;word-break: normal;line-break: strict;}picture,video,canvas{display:block;max-width:100%}input,button,textarea,select{font:inherit}img{max-width:100%;height:auto}nav ul{list-style-type:none}:where(:any-link) {color:currentColor;text-decoration-skip-ink:auto;text-decoration-color:color-mix(in srgb, currentcolor 30%, transparent);text-underline-offset: 0.2em;}

:root{
	/* ページ全体の背景色 */
	--body-bg: #fff;
	/* メインの文字色 */
	--main-text-color: #555;
	/* アクセントカラー */
	--accent: #71b02e;
	/* レイアウトボックスの背景色 */
	--sub-bg-color: #f0f4dc;

	/* ページ全体の横幅 */
	--content-width: 550px;
	/* レイアウトボックスの角丸 */
	--radius: 1rem;
	/* レイアウトボックスの間隔 */
	--margin-nallow: 0.5rem;
	--margin-wide: 3rem;
	/* レイアウトボックスのドロップシャドウ */
	--shadow: drop-shadow(0 1px 1px var(--text-color-20));

	/* メインの文字色・アクセントカラーを薄くしたバリエーション（自動作成されるので変更不要です） */
	--text-color-10: color-mix(in srgb, var(--main-text-color) 10%, transparent);
	--text-color-20: color-mix(in srgb, var(--main-text-color) 20%, transparent);
	--text-color-30: color-mix(in srgb, var(--main-text-color) 30%, transparent);
	--text-color-50: color-mix(in srgb, var(--main-text-color) 50%, transparent);
	--text-color-70: color-mix(in srgb, var(--main-text-color) 70%, transparent);
	--accent1: color-mix(in srgb, var(--accent) 30%, transparent);
	--accent2: color-mix(in srgb, var(--accent) 20%, var(--sub-bg-color));
}


/* html header main footer --------------------------------------------*/
html{
	font-size: 100%;
}
body {
	accent-color: var(--accent);
	background: var(--body-bg);
	color: var(--main-text-color);
	font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Segoe UI", "Meiryo", sans-serif;
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.8;
	margin: 5vw;
	transition: background-color 0.3s ease-in-out;
}
header{
	margin: 0 auto var(--margin-wide);
	max-width: var(--content-width);
	text-align: center;
	img{
		margin: 0 5px 10px;
		vertical-align: bottom;
	}
	img.emoji{
		height: 72px;
		margin: 0 5px 10px;
		vertical-align: bottom;
		width: 72px;
	}
	img.circle{
		aspect-ratio: 1 / 1;
		border-radius: 100vmax;
		object-fit: cover;
		height: 72px;
		width: 72px;
	}
	h1{
		font-weight: bold;
		font-size: 1.5rem;
		line-height: 1.2;
		margin-bottom: 0;
	}
}
main{
	margin: 0 auto;
	max-width: var(--content-width);
	text-align: left;
}
footer{
	color: var(--text-color-50);
	font-size: 0.8rem;
	padding: 100px 0 0;
	text-align: center;
}


/* default --------------------------------------------*/
h2{
	font-size: 1.2rem;
	line-height: 1;
	margin-bottom: 0.8em;
}
h3{
	font-size: 1rem;
	margin-bottom: 0.5em;
}
section{
	background-color: var(--sub-bg-color);
	border-radius: var(--radius);
	filter: var(--shadow);
	margin-bottom: var(--margin-wide);
	padding: 1em 1.6em 1em;
}
ul{
	padding-left: 0;
}
::marker{
	color: var(--accent);
}
p:not(:last-child){
	margin-bottom: 1.5em;
}
section{
	h2:first-child{
		margin: -1.3em 0 1em;
	}
	ul,ol{
		margin-bottom: 1.5em;
		padding-left: 1.5em;
	}
	ul:last-child,
	ol:last-child{
		margin-bottom: 0;
	}
}
section:has(> h2:first-child){
	margin-top: calc(var(--margin-wide) + 0.5rem);
}
details{
	background-color: var(--sub-bg-color);
	border-radius: var(--radius);
	filter: var(--shadow);
	summary{
		border-radius: var(--radius);
		cursor: pointer;
		font-weight: bold;
		line-height: 1.3;		
		margin-bottom: unset;
		padding: 1rem 1.6rem 1rem;
	}
	summary:hover{
		color: var(--accent);
	}
	.inner{
		padding: 0 1.6rem;
		margin-bottom: 1rem;
	}
	h3{
		margin-bottom: 0.5em;
	}
	hr{
		margin: 1rem 0;
	}
	ul,ol{
		margin-bottom: 1.5em;
		padding-left: 1.5em;
	}
}
details[open]{
	padding-bottom: 0.1rem;
}

hr{
	border: none;
	border-top: 1px solid var(--accent1);
	clear: both;
	margin: var(--margin-wide) 0;
}
section hr{
	margin: 1.5em 0;
}
a{
	font-weight: bold;
}
a:hover{
	text-decoration: none;
}
.thin a{
	font-weight: normal;
}
em{
	font-style: normal;
	font-weight: bold;
	margin: 0 0.2em;
	padding: 0 0.2em;
	background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, var(--accent1) 50%);
}
aside{
	background-color: var(--text-color-10);
	border-radius: 5px;
	font-size: 0.85rem;
	padding: 1em 1.3em;
	margin-bottom: 0.7em;
}
table{
	border-spacing: 0;
	border-top: 1px solid var(--accent1);
	margin-bottom: 0.7em;
	text-align: left;
	width: 100%;
	th{
		border-right: 1px solid var(--accent1);
		color: var(--text-color-70);
		font-weight: bold;
	}
	th,td{
		border-bottom: 1px solid var(--accent1);
		padding: 5px 10px;
		vertical-align: top;
	}
	img{
		margin: 5px 0;
		vertical-align: bottom;
	}
}



/* named parts --------------------------------------------*/
.accent{
	color: var(--accent);
}
.attention{
	color: #c00;
}
a.btn{
	background-color: var(--main-text-color);
	border-radius: 5px;
	color: var(--sub-bg-color);
	display: inline-block;
	font-weight: bold;
	font-size: 0.9rem;
	margin: 0 0 5px 0;
	padding: 0.1em 0.6em 0.2em;
	text-decoration: none;
	transition: background-color 0.3s ease-in-out;
}
a.btn:hover{
	background-color: var(--accent);
}
.mt0{	margin-top: 0 !important; }
.mt05{	margin-top: 0.5rem !important; }
.mt1{	margin-top: 1rem !important; }
.mt2{	margin-top: 2rem !important; }

.mb0{	margin-bottom: 0 !important; }
.mb05{	margin-bottom: 0.5rem !important; }
.mb1{	margin-bottom: 1rem !important; }
.mb2{	margin-bottom: 2rem !important; }
.mb3{	margin-bottom: 3rem !important; }
.mb4{	margin-bottom: 4rem !important; }

.mbnallow{	margin-bottom: var(--margin-nallow) !important; }
.mbwide{	margin-bottom: var(--margin-wide) !important; }

.small{
	font-size: 0.85rem;
}
.normal{
	font-size: 1rem;
}
.center{
	text-align: center;
}
.ogp img{
	aspect-ratio: 1.91 / 1;
	display: block;
	object-fit: cover;
	object-position: top;
	width: 100%;
}
.square img{
	aspect-ratio: 1 / 1;
	display: block;
	object-fit: cover;
	object-position: top;
	width: 100%;
}
.book img{
	aspect-ratio: 1 / 1.41;
	display: block;
	object-fit: cover;
	object-position: top;
	width: 100%;
}
img.emoji {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    margin: 0 3px 3px;
}
.icon{
	float: left;
	font-size: 2rem;
	line-height: 1;
	margin: 0 1rem 0 0;
	img.emoji{
		margin: 0;
		vertical-align: top;
	}
}
section:has(.icon){
	padding-bottom: 1.5rem;
}

.grid{
	display: grid;
	gap: var(--margin-nallow);
	margin-bottom: var(--margin-wide);
}
.grid2{
	grid-template-columns: 1fr 1fr;
}
.grid3{
	grid-template-columns: repeat(3, 1fr);
}
.grid4{
	grid-template-columns: repeat(4, 1fr);
}

.linklist{
	display: grid;
	gap: 5px;
	grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
	list-style-type: none;
	margin-bottom: var(--margin-wide);
	padding-left: 0;
	text-align: center;
	a{
		aspect-ratio: 1 / 1;
		background-color: var(--sub-bg-color);
		border-radius: var(--radius);
		display: flex;
		filter: var(--shadow);
		font-size: 0.75rem;
		font-weight: normal;
		line-height: 1;
		text-decoration: none;
		transition: background-color 0.3s ease-in-out;
	}
	a:hover{
		background-color: var(--accent2);
	}
	li{
		margin:auto;
	}
	i{
		font-size: 2.2rem;
		font-style: normal;
		font-weight: bold;
		display: block;
		margin-bottom: 0.5rem;
	}
	img{
		height: 2.2rem;
		vertical-align: top;
	}
	img.emoji{
		margin: 0;
		vertical-align: top;
	}
}

.linkcards{
	a{
		background-color: var(--sub-bg-color);
		border-radius: var(--radius);
		filter: var(--shadow);
		text-align: center;
		text-decoration: none;
		transition: background-color 0.3s ease-in-out;
	}
	a:hover{
		background-color: var(--accent2);
	}
	img{
		border-radius: var(--radius) var(--radius) 0 0;
		display: block;
	}
	img.emoji{
		border-radius: unset;
		margin: auto;
	}
	.thumbnail{
		aspect-ratio: 1 / 1;
		background-color: var(--accent2);
		border-radius: var(--radius) var(--radius) 0 0;
		display: flex;
		font-size: 3rem;
	}
	p{
		font-size: 0.85rem;
		font-weight: normal;
		line-height: 1.4;
		padding: 0.8em;
	}
}
.linkcards.book{
	h3{
		line-height: 1.2;
		margin-bottom: 0;
		padding: 0.6em 0.6em 0;
	}
	.data{
		color: var(--accent);
		font-size: 0.85rem;
	}
	p{
		padding: 0 0.8em 1em;
	}
}
.linkcards.ogp .thumbnail{
	aspect-ratio: 1.91 / 1;
}

a.widebanner{
	background-color: var(--sub-bg-color);
	border-radius: var(--radius);
	display: block;
	filter: var(--shadow);
	margin-bottom: var(--margin-wide);
	text-decoration: none;
	transition: background-color 0.3s ease-in-out;
	img{
		border-radius: var(--radius) var(--radius) 0 0;
		display: block;
		width: 100%;
	}
	img:only-child {
		border-radius: var(--radius);
		}
	div{
		font-size: 0.85rem;
		font-weight: normal;
		line-height: 1.4;
		padding: 0.8em;
		text-align: center;
	}
}
a.widebanner:hover{
	background-color: var(--accent2);
}

dl.gridlist{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.3rem 2rem;
	
	img{
		margin-top: 5px;
	}
	dt{
		color: var(--text-color-70);
		font-weight: bold;
	}
}

.colorchange{
	display: grid;
	gap: 5px;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	
	button{
		background-color: #fff;
		border: 1px solid var(--text-color-20);
		border-radius: 100vmax;
		color: #333;
		cursor: pointer;
		font-size: 0.8rem;
		letter-spacing: inherit;
		padding: 0.3em;
	}
	button:hover{
		font-weight: bold;
	}
	button:nth-child(1)::first-letter{
		color: #cca3cf;
	}
	button:nth-child(2)::first-letter{
		color: #daab80;
	}
	button:nth-child(3)::first-letter{
		color: #d0b909;
	}
	button:nth-child(4)::first-letter{
		color: #71b02e;
	}
	button:nth-child(5){
		color: #fff;
		background-color: #17253D;
	}
	button:nth-child(5)::first-letter{
		color: #3E7BCB;
	}
	button:nth-child(6)::first-letter{
		color: #555;
	}
}


/* responsive --------------------------------------------*/
@media (max-width: 800px) {
	.grid4{
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 600px) {
	html{
		font-size: 95%;
	}
	body{
		margin-top: 3rem;
	}
	.grid{
		grid-template-columns: 1fr;
	}
	.grid4,
	.m_grid2{
		grid-template-columns: 1fr 1fr;
	}
	.m_grid3{
		grid-template-columns: repeat(3, 1fr);
	}
	.linklist{
		grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
	}
}