:root
	{
		--alpha: 0.3;
	}

	/* a
	{
		color: #fff;
		text-decoration: underline;
	} */

	/* 背景 start */
	body
	{
		/* padding-top: calc((100vh - 40em) / 2);
		padding-top: 12.3609%;
		padding-top: clamp(24px,
					calc((100vh - 80vw) / 2 + 2vh),
					15vh); */

		/* background-color: #fff; */
		transition: all 0.5s;
	}

	body::before
	{
		content: '';
		position: fixed;
		inset: 0;
		inset: -5vw;
		background-image: url('./images/bg/room.jpg');
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		will-change: transform;
		z-index: -1;
		/* JSから受信 */
		transform:
			translate(
				var(--bg-x, 0px),
				var(--bg-y, 0px)
			)
			scale(1.03);
		transition:
			filter 0.6s ease,
			transform 0.8s ease;

		filter: brightness(110%) saturate(0);
		/* filter: var(--bg-filter, none); */
	}

	body.chill::before
	{
		background-image: url('./images/bg/chill.jpg');
		filter: brightness(120%) saturate(0.7);
	}

	body.sky::before
	{
		background-image: url('./images/bg/sky.jpg');
		filter: brightness(120%) sepia(40%);
	}

	body.ocean::before
	{
		background-image: url('./images/bg/ocean.jpg');
		filter: brightness(140%) saturate(1.2);
	}

	body.gradient::after
	{
		content: '';
		position: fixed;
		inset: 0;
		z-index: -1;
	}

	.grad-blue::after
	{
		background: linear-gradient(rgba(10, 20, 40, var(--alpha)), rgba(29, 103, 212, var(--alpha)));
			/* radial-gradient(circle at 50% 40%,
				rgba(29, 103, 212, var(--alpha)),
				rgba(10, 20, 40, var(--alpha))); */
	}

	.grad-red::after
	{
		background: linear-gradient(rgba(85, 210, 255, var(--alpha)), rgba(255, 106, 193, var(--alpha)));
	}

	/* 背景 end */

	.alpha-50
	{
		background-color: rgba(255, 255, 255, 0.5);	
	}

	/* footer
	{
		color: #a6acb2;
	} */
	/* footer
	{
		margin-top: 5%;
		margin-bottom: 20vh;
		color: #a6acb2;
	} */

	div#container 
	{
		text-align: center;
		margin: 0 auto; 
	}

	.site_caption
	{
		/* margin: 15% 0; */
		/* margin-bottom: 8%; */
		font-family: 'huifont';
		font-weight: normal;
		color: #111;
	}

	h1.site_caption
	{
		/* color: #262629; */
		font-size: 420%;
		font-weight: bold;
		/* margin: 10% auto; */
		margin: 100px auto;
		text-shadow: #0000004d 0px 3px 3px;
	}

	h3.site_caption
	{
		margin: 0;
		margin-bottom: 0.6em;
		font-size: 165%;
	}

	div.summary
	{
		margin: 14px auto;
	}

	.atentions
	{
		/* background: rgba(0, 0, 0, 0.2); */
		margin: 0 auto;
		padding: 2vh;
		border-radius: 1.65rem;
		/* box-shadow: 0px 0px 5px #747474; */
		/* width: 708px; */
		max-width: 700px;
		color: #111;
	}

	/* .atentions > :first-child::before
	{
		content: '⚠️';
		font-size: 2em;
	}
 */
	.backdrop-10
	{
		backdrop-filter: blur(10px);
	}

	ul.rate_selection
	{
		margin: 2% auto;
		list-style-type: none;
		padding-inline-start: 0px;
		min-width: 60%;
		font-weight: bolder;
	}

	ul.rate_selection li a
	{
		display: block;
		margin: 1em auto;
		padding: 3.8% 0;
		margin-bottom: 2rem;
		color: #0e0e0f;
		background: #ffffff80;
		border: 1.5px solid #9c9ca1;
		border-radius: 20px;
		text-decoration: none;
		transition: all 0.8s 0s ease;
		white-space: nowrap;
		width: 80%;
	}

	ul.rate_selection li a:hover
	{
		background-color: #32b7ff4d;
		/* color: #0e0e0f; */
		/* color: #ffffff; */
	}

	.tools
	{
		/* text-align: left; */
		margin: 20px auto;
		padding: 2% 5%;
		border-radius: 20px;
		background-color: #00bbff;
		width: 50vh;
	}

	.relation
	{
		margin: 0 auto;
		background-color: #f4f4f4;
		background-color: #ffffff33;
		margin-bottom: 20px;
		/* padding: 6px 10px; */
		border-radius: 1.65em;
		text-align: left;
		/* width: 220px; */
		padding: 1.5vh;
		min-width: 160px;
		max-width: 700px;
		display: inline-flex;
		vertical-align: top;
	}

	.relation div
	{
		/* margin-right: 0.5em; */
		/* margin-bottom: 1em; */
		width: 100%;
	}

	.relation ul
	{
		margin: 0;
		padding: 0;
	}

	.relation ul li
	{
		list-style-type: none;
		/* display: inline-block; */
		width: auto;
	}

	.relation ul li a.pixiv
	{
		background-image: url('/images/logo_icon_r.png');
		background-size: 28px;
	}

	.relation ul li a.skeb
	{
		background-image: url('/images/skeb.svg');
		background-size: 48px;
	}

	.relation ul li a
	{
		color: #222;
		display: block;
		margin-bottom: 8px;
		padding: 8px;
		padding: 8px 1em;
		border-radius: 25px;
		text-decoration: none;
		/* text-indent: 1em; */
		background-repeat: no-repeat;
		background-position: 5px 6px;
		background-color: #63d5ff80;
		/* background-color: var(--medium-blue); */
		transition: all 0.8s ease;
	}

	.relation ul li a:hover
	{
		text-indent: 1.1em;
		color: #e7edff;
		background-color: #0e0e0f;
	}

	.profile
	{
		margin: auto;
		margin: 32px auto;
		/* background-color: #00bbff; */
	}

	.profile div
	{
		margin: 0 auto;
		width: 120px;
		height: 120px;
		border-radius: 50%;
		border: 5px solid #fff;
		outline: 2px solid #aaa;
		background-image: url('./images/ojo3_3.jpg');
		background-size: 100%;
		background-position: center center;
	}

	.cookie-banner
	{
		pointer-events: none;
		display: none;
		position: fixed;
		left: 50%;
		bottom: 20px;
		transform: translateX(-50%);
		padding: 16px 24px;

		background: rgba(255,255,255,0.2);
		backdrop-filter: blur(12px);
		border-radius: 16px;

		color: #fff;
		z-index: 10000;
	}

	.cookie-banner.hidden
	{
		display: none;
	}

	.cookie-banner button
	{
		/* margin-left: 8px; */
		display: inline-block;
		justify-content: center;
		align-items: center;
	}


	@media screen and (max-width: 780px)
	{
		h1.site_caption
		{
			margin: 10% auto;
		}
		ul.rate_selection li a
		{
			width: auto !important;
		}

		div.relation
		{
			/* width: 22vh; */
			width: auto;
			display: grid;
		}

		.atentions,
		.tools
		{
			width: auto;
			margin: 0 auto;
			margin-bottom: 4%;
		}

		ul.rate_selection
		{
			width: auto;
		}

		body
		{
			padding-top: 0;
		}
	}

	.bubble
	{
		margin: 0.8em;
		position: relative;
		display: inline-block;
		padding: 0.8em;
		background: #fff;
		border: 2px solid #000;
		border-radius: 160px;
		width: 160px;
		color: #000;
		font-size: 20px;
	}

	.bubble::before
	{
		content: '';
		position: absolute;
		left: 49%;
		top: -20px;
		width: 0;
		height: 0;
		border: 10px solid transparent;
		border-bottom-color: #000;
	}

	.bubble::after
	{
		content: '';
		position: absolute;
		left: 50%;
		top: -16px;
		width: 0;
		height: 0;
		border: 8px solid transparent;
		border-bottom-color: #fff;
	}