:root {
	color-scheme: light dark;
}

body {
	background-color: light-dark(#ECFFEC, #3A5B3A);
	font-family: Meiryo, noto-sans, roboto;
	text-align: center;
	color: light-dark(#1f1f1f, #e8e8e8);
}

h1 {
	font-size: 6.4vmin;
	margin-top: -6.4vmin;
}

h4 {
	font-size: 4.0vmin;
	margin-top: 4.0vmin;
}

p {
	font-size: 3.2vmin;
}

img {
    width: 100%;
    height: auto;
}

video {
    width: 100%;
    height: auto;
}

.profile {
	margin-top: 3.2vmin;
	margin-bottom: 3.2vmin;
	margin-left: 8vw;
	margin-right: 8vw;
	padding: 3.2vmin;
	/* background-color: rgba(255, 255, 255, .4); */
	/* backdrop-filter: blur(10px); */
	background-color: light-dark(#fff, #000000);
	color: light-dark(#1f1f1f, #e8e8e8);
	border-radius: 6vmin;
	box-shadow: 0 0 8vw rgba(0, 0, 0, 0.125);
}

.profile p {
	margin-top: 3.2vmin;
	margin-bottom: 3.2vmin;
}

.inline-icon {
	/* 文字の大きさに合わせるための設定 */
	height: 1em;        /* 高さを文字1つ分にする */
	width: auto;
	fill: currentColor; /* 文字の色と同じ色にする */

	/* 位置の微調整 */
	vertical-align: middle; /* 上下中央に配置 */
}

.shadow {
	border-radius: 2vw;
	box-shadow: 0 0 4vw 2vw #ececff;
	/* GAZOU NO KAGE */
}

.roll {
	animation: rollkAnime 0.1s linear infinite;
}

@keyframes rollkAnime {
	50% {
		transform: rotate(180deg);
	}

	100% {
		transform: rotate(360deg);
	}
}