:root {
	--headerHeight: 60px;
	--bodyMaxWidth: 700px;
	--worksThumbSize: 200px;
	--worksThumbMargin: 25px;
	--worksPopSize: min(600px, 60vh);
	--snsLinkSize: 1.5rem;
	--profileTextMergin: 1rem;
}

@font-face {
	font-family: "ヒラギノ明朝 ProN";
	src: url(../src/fonts/ヒラギノ明朝\ ProN.ttc);
}

@font-face {
	font-family: "ヒラギノ角ゴシック W2";
	src: url(../src/fonts/ヒラギノ角ゴシック\ W2.ttc);
}

* {
	font-family: ヒラギノ明朝 ProN, 'Courier', sans-serif;
}

.flatText {
	transform: scale(1, 0.75);
}

a {
	text-decoration: none;
	color: black;
}

span {
	display: inline-block;
}

#startScreen {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: white;
	z-index: 10000;
	animation: fadeOut 2s ease-in-out forwards;
}

@keyframes fadeOut {
	/* はじめはロゴをしっかり表示しておきたい */
	0% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		z-index: -1;
	}
}

#startScreen .logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 240px;
}

body {
	max-width: var(--bodyMaxWidth);
	margin: 100px auto 30px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	min-height: calc(100vh - 30px * 2);
}

header {
	display: flex;
	align-items: flex-end;
	padding-top: 20px;
	padding-bottom: 20px;
	justify-content: space-between;
	height: var(--headerHeight);
	
	/* 中身をbodyと同じ幅にする */
	max-width: var(--bodyMaxWidth);
	margin: auto;
	
	/* 最上部に固定 */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: white;
	opacity: 0.95;
	z-index: 1;
}

header .logo {
	width: 300px;
}

header .navMenu ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 0;
	margin-bottom: 0;
}

header .navMenu ul li {
	list-style: none;
	margin-left: 35px;
	font-size: 20px;
}

#headerBrank {
	height: var(--headerHeight);
}

main {
	flex: 1;
}

main section {
	margin-top: 60px;
}

.sectionTitle {
	text-align: start;
	font-size: 25px;
	font-weight: normal;
	margin-top: 30px;
}

#works .content #itemWrapper {
	display: flex;
	flex-wrap: wrap;
	margin: calc(-1 * var(--worksThumbMargin));
	list-style-type: none;
	padding: 0;
}

#works .content #itemWrapper .item {
	height: var(--worksThumbSize);
	width: var(--worksThumbSize);
	margin: var(--worksThumbMargin);
}

#works .content #itemWrapper .item a {
	display: block;
	height: 100%;
	width: 100%;
	text-align: center;
}

#works .content img {
	object-fit: contain;
	height: 100%;
	width: 100%;
}

.thumb:hover {
	-webkit-transform: scale(1.05);
			transform: scale(1.05);
	-webkit-transition-duration: 1s;
			transition-duration: 1s;
}

.popupbg {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: white;
	opacity: 0.95;
	z-index: 10;
	top: 0;
	left: 0;
	display: none;
}

.popupWrapper {
	position: fixed;
	z-index: 11;
	text-align: start;
	width: var(--worksPopSize);
	height: var(--worksPopSize);
	left: calc(50vw - var(--worksPopSize) / 2);
	top: calc(50vh - var(--worksPopSize) / 2);
}

.closeBtn{
	position: absolute;
	right: 0;
	top: -45px;
	display: block;
	width: 35px; /*線の長さ*/
}

.closeBtn::before, .closeBtn::after{
	content: "";
	display: block;
	width: 100%; /*バツ線の長さ*/
	height: 1px; /*バツ線の太さ*/
	background: black;
	transform: rotate(45deg);
	transform-origin:0% 50%;
	position: absolute;
	top: calc(14% - 5px);
	left: 14%;
}

.closeBtn::after{
	transform: rotate(-45deg);
	transform-origin:100% 50%;
	left: auto;
	right: 14%;
}

.popupWrapper .caption {
	margin-top: calc(0.058 * var(--worksPopSize));
	color: black;
	font-size: 15px;
	text-align: center;
}

#profile img {
	width: calc(var(--worksThumbSize) / 2);
	margin: 30px 0;
}

#profile .content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#profileTextWrapper {
	display: flex;
	margin: 0 calc(var(--profileTextMergin) * -1);
}

#profileTextWrapper .profileText {
	flex: 1;
	margin: 0 var(--profileTextMergin);
}

#profile .msg {
	font-size: 15px;
}

#contact .content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#contact .msg {
	font-size: 13px;
	margin: 8px 0;
}

#snsLinkWrapper {
	margin-top: 15px;
	display: flex;
}

#contact .snsLink {
	width: var(--snsLinkSize);
	height: var(--snsLinkSize);
	margin: 0 10px;
}

#contact .snsLink img {
	width: 100%;
	height: 100%;
}

footer {
	display: flex;
	align-items: center;
	flex-direction: column;
	font-size: 0.6rem;
	margin-top: 50px;
	border-top: solid 1px;
	padding-top: 23px;
}

footer .logo {
	height: 1.5rem;
}

#rightNortation {
	font-family: "ヒラギノ角ゴシック W2";
}