@charset "utf-8";

/* ◆◆◆color and custom propaty◆◆◆ */
:root {
	--primary-100: #00ADB5;
	--primary-200: #AAE3E2;
	--primary-300: #fdf6fd;
	--accent-100: #AC7DD2;
	--accent-200: #fff4ff;
	--text-100: #EEEEEE;
	--text-200: #C5C5C5;
	--bg-100: #222831;
	--bg-200: #393E46;
	--bg-300: #454e59;
}



/* ◆◆◆CSS reset◆◆◆ */
*, ::before, ::after {
	box-sizing: border-box;
	transition: all 1s ease;
}


html {
	font-size: 62.5%;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li,
table, caption, tr, th, td, hr, div,
header, nav, main, section, article, aside, footer,
figure, figcaption,
form, input, select, option, textarea, button {
	margin: 0;
	padding: 0;
}

body {
	height: 100svh;
	font-family: serif;
	line-height: 1.75;
}

h1, h2, h3, h4, h5, h6, th {
	font-weight: normal;
}

th {
	text-align: left;
}

ul, ol, li {
	list-style: none;
}

img {
	width: 100%;
	vertical-align: bottom;
}



/* ◆◆◆common◆◆◆ */
body {
	background: var(--bg-100);
	color: var(--text-100);
	overflow: hidden;
	user-select: none;
}

h1, h2, h3, h4, h5, h6, ul, ol, p,
table, caption, figcaption {
	font-size: 1.6rem;
}

a:link,
a:visited,
a:hover,
a:active {
	color: var(--text-100);
}

small {
	display: inline-block;
	margin: 1rem 0;
	font-size: 1rem;
	line-height: 1.5;
}



/* ◆◆◆layout◆◆◆ */
/* ◆◆header◆◆ */
header {

	position: fixed;
	left: 0;
	top: 0;
	z-index: 10;
	display: flex;
	justify-content: start;
	align-items: start;
	padding: 1.5rem;
	width: 100%;
	line-height: 1;

	h1 {

		a:link,
		a:visited {
			text-decoration: none;
		}

		small {

			#caseMouse {
				display: inline;
			}
			#caseSwipe {
				display: none;
			}

			@media screen and ( width <= 768px ){

				#caseMouse {
					display: none;
				}
				#caseSwipe {
					display: inline;
				}

			}

		}

	}

}

@media screen and (width >= 768px) {

	header {
		left: 50%;
		width: 50%;
	}

}



/* ◆◆gallery◆◆ */
#worksDetails {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100svh;
	display: flex;
	justify-content: end;
	align-items: end;

	h2 {
		border-right: solid 4px var(--primary-100);
		margin-right: 1.5rem;
		padding: 0 1.5rem 1.5rem 0;
		text-align: right;

		span {
			display: block;
		}

		span:first-child {
			transform: translateY(-.3rem);
		}

		span:not(:first-child) {
			font-size: 1.2rem;
		}

		@media screen and (width >= 768px) {

			span:not(:first-child) {
				display: inline-block;
			}

			span:not(:last-child)::after {
				content: "/";
				display: inline-block;
				margin: 0 .5rem;
			}

			span:first-child::after {
				content: "";
				margin: 0;
			}

		}
	}

}



/* ◆◆gallery◆◆ */
#worksImage {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100svh;
	display: flex;
	justify-content: center;
	align-items: center;

	#img {
		width: 100%;
		height: 50svh;
	}

	@media screen and (width >= 768px) {

		#img {
			width: 50%;
			height: 100svh;
		}

	}
}

@media screen and (width >= 768px) {

	#worksImage {
		justify-content: start;
		align-items: start;
	}

}



/* ◆◆others◆◆ */
#others {

	position: fixed;
	left: 0;
	bottom: 20svh;
	z-index: 10;
	padding-right: 1.5rem;
	width: 100%;
	font-size: 2.4rem;
	text-align: right;

	img {

		border: solid 2px var(--text-100);
		margin-left: 1.5rem;
		width: 1rem;
		height: 1rem;
		overflow: hidden;
		box-shadow: 0 0 .5rem 0 var(--bg-100);

	}

}

@media screen and (width >= 768px) {

	#others {
		bottom: 1.5rem;
		width: 50%;
	}

}



/* ◆◆modal◆◆ */
#close {
	position : fixed;
	right: 1rem;
	top: 1rem;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--primary-100);
	border: solid 2px var(--text-100);
	width: 4.2rem;
	height: 4.2rem;
	font-size: 2.4rem;
	opacity: 0;
}



/* ◆◆mouse◆◆ */
#checkAction {
	position: fixed;
	right: 0;
	top: 0;
	z-index: 100;
	background: var(--bg-200);
	margin: 2.5rem;
	width: 20rem;
	color: #fff;
	border-collapse: collapse;

	th, td {
		border: solid thin var(--primary-100);
		padding: 1rem;
	}

}