: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 {
	/* ページ全体の横幅 */
	--content-width: 550px;
	/* レイアウトボックスの角丸 */
	--radius: 0.5rem;
	/* レイアウトボックスの間隔 */
	--margin-nallow: 0.5rem;
	--margin-wide: 3.5rem;
}


/* html header main footer --------------------------------------------*/

main {
	margin: 0 auto;
	width: var(--content-width);
	text-align: left;
}

.sub .container {
	/* margin: 0 auto; */
	padding: 2.0rem 0;
}

/* default --------------------------------------------*/

section {
	filter: var(--shadow);
	margin-bottom: var(--margin-wide);
	padding: var(--whiteback-padding);
	color: var(--my-text-color-75);
	background-color: var(--my-white);
	border-radius: var(--whiteback-br);
}

/* p:not(:last-child) {
	margin-bottom: 1.5rem;
} */

section {

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

	ul:last-child,
	ol:last-child {
		margin-bottom: 0;
	}
}

ul li img,
ul li a img {
	display: inline;
	width: auto;
	height: var(--percent100);
}

section:has(> h2:first-child) {
	margin-top: calc(var(--margin-wide) + 0.5rem);
}

details {

	transition: all .2s;

	summary {
		/* border-radius: var(--radius); */
		cursor: pointer;
		/* font-weight: bold; */
		line-height: 1.8;
		margin: 0.25rem 0;
		padding: 0.25rem 0.75rem;
		border-radius: 0.25rem;
		background-color: var(--light-bg-color);
		/* font-size: 0.9rem; */
		color: var(--my-text-color-75);
		font-size: clamp(0.84rem, 3.6cqw, 1.0rem);
		font-weight: 700;
	}

	summary:hover {
		color: var(--my-text-color);
	}

	p {
		margin: 0.12rem 1.0rem;
		font-size: clamp(0.84rem, 3.6cqw, 1.0rem);
	}

	.inner {
		padding: 0 1.6rem;
		margin-bottom: 1rem;
	}

	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;
	opacity: 1.0;
}

section hr {
	margin: 1.5em 0;
}

.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%; */
	line-height: 1;

	th {
		/* border-right: 1px solid var(--accent1); */
		color: var(--my-text-color);
		font-weight: bold;
		width: 30%;
	}

	th,
	td {
		/* border-bottom: 1px solid var(--accent1); */
		padding: 0.5rem 0;
		vertical-align: middle;
		line-height: 1.5;
	}

	td {
		color: var(--my-text-color-75);
	}

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



/* named parts --------------------------------------------*/
.accent {
	color: var(--accent);
}

.attention {
	color: #c00;
}

a.btn {
	background-color: var(--my-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.2s 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: clamp(0.6rem, 3.0cqw, 0.84rem);
}

.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(8rem, 1fr));
	list-style-type: none;
	margin-bottom: var(--margin-wide);
	padding: 0;
	text-align: center;
	color: var(--my-text-color);
	overflow: visible;

	a {
		aspect-ratio: 1 / 1;
		background-color: var(--my-white);
		border-radius: var(--radius);
		display: flex;
		filter: var(--shadow);
		font-size: clamp(0.75rem, 1.8vw, 1.0rem);
		font-weight: normal;
		line-height: 1;
		text-decoration: none;
		transition: opacity 0.2s ease-in-out;
		/* border: solid 1px #17253D; */
		color: var(--my-text-color);
	}

	a:hover {
		opacity: 0.25;
	}

	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.2s 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 {

	.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.2s 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.25rem 0.75rem;
	margin: 1.0rem 0 0;
	container-type: inline-size;

	img {
		margin-top: 5px;
	}

	dt {
		color: var(--my-text-color);
		font-weight: bold;
	}

	dt,
	dd {
		font-size: clamp(0.84rem, 3.6cqw, 1.0rem);
	}
}

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

.row.proficon {
	margin: 0 0 1.0rem;
	/* padding: 0; */

	img {
		background-color: var(--my-white);
		border-radius: 50%;
	}

	.username {
		font-size: clamp(1.25rem, 1.8vw, 1.5rem);
		font-weight: 900;
	}
}


/* responsive --------------------------------------------*/
@media (max-width: 992px) {
	.grid4 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 576px) {

	.sub {
		main {
			margin: 0 auto;
			padding: 5vw 1.0rem;
			width: var(--percent100);
			/* text-align: left; */
		}
	}


	.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(7rem, 1fr));
	}
}