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

@charset "utf-8" *, *::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: .2em
}

:root {
	--body-bg: #fff;
	--main-text-color: #555;
	--accent: #71b02e;
	--sub-bg-color: #f0f4dc;
	--content-width: 550px;
	--radius: 1rem;
	--margin-nallow: .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 {
	font-size: 100%;
	overflow-x: hidden
}

body {
	accent-color: var(--accent);
	background: var(--body-bg) fixed;
	background-image: url(img/image.jpg);
	background-position: left top;
	background-repeat: repeat;
	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: .05em;
	line-height: 1.8;
	margin: 5vw;
	transition: background-color 0.3s ease-in-out;
	overflow-x: hidden
	}

header {
	margin: 0 auto var(--margin-wide);
	max-width: var(--content-width);
	text-align: center;

	img {
		margin: 0 5px 10px;
		vertical-align: bottom
	}

	h1 {
		font-weight: 700;
		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: .8rem;
	padding: 10px 0 0;
	text-align: center
}

h2 {
	font-size: 1.2rem;
	line-height: 1;
	margin-bottom: .8em
}

h3 {
	font-size: 1rem;
	margin-bottom: .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: 700;
		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: .5em
	}

	hr {
		margin: 1rem 0
	}

	ul,
	ol {
		margin-bottom: 1.5em;
		padding-left: 1.5em
	}
}

details[open] {
	padding-bottom: .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: 700
}

a:hover {
	text-decoration: none
}

.thin a {
	font-weight: 400
}

em {
	font-style: normal;
	font-weight: 700;
	margin: 0 .2em;
	padding: 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: .85rem;
	padding: 1em 1.3em;
	margin-bottom: .7em
}

table {
  margin: 20px auto;
}
.tbl-r02 th {
  background: rgba(0, 0, 0, 0);
  border: 1px solid var(--accent1);
  padding: 10px;
}
.tbl-r02 td {
　border: 1px solid var(--accent1);
  padding: 10px;
}
@media screen and (max-width: 640px) {
  .last td:last-child {
    border: 1px solid var(--accent1);
    width: 100%;
  }
  .tbl-r02 {
    width: 80%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}

.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: 700;
	font-size: .9rem;
	margin: 0 0 5px 0;
	padding: .1em .6em .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: .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: .75rem;
		font-weight: 400;
		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: 700;
		display: block;
		margin-bottom: .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: .85rem;
		font-weight: 400;
		line-height: 1.4;
		padding: .8em
	}
}

.linkcards.book {
	h3 {
		line-height: 1.2;
		margin-bottom: 0;
		padding: .6em .6em 0
	}

	.data {
		color: var(--accent);
		font-size: .85rem
	}

	p {
		padding: 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: .85rem;
		font-weight: 400;
		line-height: 1.4;
		padding: .8em;
		text-align: center
	}
}

a.widebanner:hover {
	background-color: var(--accent2)
}

dl.gridlist {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .3rem 2rem;

	img {
		margin-top: 5px
	}

	dt {
		color: var(--text-color-70);
		font-weight: 700
	}
}

.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: .8rem;
		letter-spacing: inherit;
		padding: .3em
	}

	button:hover {
		font-weight: 700
	}

	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
	}
}

@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))
	}
}

.shadow {
	display: inline-block;
	color: #e44c65;
	font-size: 30pt;
	text-shadow: 3px 1px 2px #CCC
}

.shadow1 {
	display: inline-block;
	text-shadow: 1px 1px 1px #CCCCCC, -1px 1px 1px #CCCCCC, 1px -1px 1px #CCCCCC, -1px -1px 1px #CCCCCC, 1px 0 1px #CCCCCC, 0 1px 1px #CCCCCC, -1px 0 1px #CCCCCC, 0 -1px 1px #CCC
}