@charset "UTF-8";





/* ================================================================================
header
================================================================================ */
header
{
	z-index: 5;
	position: fixed;
	top: 0;	left: 0;

	display: flex;

	width: 100%;	min-width: 1200px;
	height: 100vh;
	background: url("../image/background.jpg") no-repeat center/cover;
}


header .black:first-child,
header .black:last-child
{
	width: calc((100% - 1200px)/2);	min-width: 0;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.92);
	box-shadow: 0 0 1rem 0.1rem rgba(0, 0, 0, 0.6);
}


header .sectionInner
{
	position: relative;
	width: 1200px;	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
}


header .raftel
{
	position: absolute;
	top: 48%;	right: 0;
	width: 700px;
	transform: translateY(-50%);
}



@media screen and (max-width: 767px)
{

header{	min-width: 100%;	}

header .black:first-child,
header .black:last-child
{	display: none;	}

header .sectionInner{	width: 100%;	}
header .raftel
{
	top: 40%;
	width: 90vw;
}

}




/* ================================================================================
menu
================================================================================ */
#menu
{
	z-index: 20;
	position: fixed;
	top: 0;	left: 0;

	width: 100%;	min-width: 1200px;
	height: 100vh;
	pointer-events: none;
}
#menu .sectionInner
{
	position: relative;
	width: 1200px;	height: 100%;
	margin: 0 auto;
}
#menu ul
{
	position: absolute;
	top: calc(48% + 11rem);	right: 0;

	display: flex;	flex-wrap: wrap;	justify-content: flex-end;
	width: 210px;
}
#menu li
{
	position: relative;
	padding: 0.2rem 0.5rem;
	margin: 0 0 1rem;
	pointer-events: all;
}
#menu li::before
{
	z-index: 5;
	position: absolute;
	top: 0;	right: 0;
	content: "";
	display: block;
	width: 0%;	height: 100%;
	background-color: white;
	transition-duration: 0.3s;
}
#menu li:hover::before{	width: 100%;	}


#menu li p
{
	z-index: 10;
	position: relative;
	color: white;
	font-size: 1.5rem;
	/* font-weight: bold; */
	text-align: right;
	transition-duration: 0.3s;
}
#menu li:hover p{	color: black;	}


@media screen and (max-width: 767px)
{
#menu
{
	width: 100%;	min-width: 100%;
}
#menu .sectionInner
{
	width: 100%;
}

#menu ul
{
	top: 0;
	justify-content: space-around;
	width: 100%;
	background-color: rgba(0,0,0,0.8);
	box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.6);
}
#menu li
{
	padding: 3vw 0;
	margin: 0;
}
#menu li::before{	display: none;	}
#menu li p{	font-size: 3.2vw;	}
#menu li:hover p{	color: white;	}



}






.content
{
	z-index: 10;
	position: absolute;
	top: 0;	left: 0;

	width: 100%;
	padding: 70vh 0 10vh;
}

.content .contentInner
{
	width: 1200px;
	margin: 0 auto;
}


.content a:link,	a:visited{	text-decoration: underline;	}
.content a:hover{	text-decoration: none;	}


@media screen and (max-width: 767px)
{

.content
{
	top: 10vw;	left: 0;
	width: 100%;
	padding: 60vh 0 10vh;
}

.content .contentInner
{
	width: 100%;
	overflow: hidden;
}

}








/* ================================================================================
business, abput, contact
================================================================================ */
#about
{
	padding: 0 0 0 400px;
	margin: -4rem 0 0;
}

#works
{
	padding: 0 0 0 50px;
	margin: -2rem 0 0;
}
#contact
{
	padding: 0 0 0 200px;
	margin: 2rem 0 0;
}



#business .sectionInner,
#about .sectionInner,
#contact .sectionInner,
#works .sectionInner
{
	width: 600px;
	padding: 3rem 2rem 2rem;
	background-color: rgba(0, 0, 0, 0.5);
	box-shadow: 0.2rem 0.3rem 0.5rem 0.1rem rgba(0, 0, 0, 0.6);
}
#works .sectionInner{	width: 900px;	}


#business .title,
#about .title,
#contact .title,
#works .title
{	margin: 0 0 2rem;	}

#business .title h2,
#about .title h2,
#contact .title h2,
#works .title h2
{
	margin: 0 0 0.5rem;
	color: white;
	font-size: 1.5rem;
	text-align: center;
	letter-spacing: 0.1rem;
}

#business .title p,
#about .title p,
#contact .title p,
#works .title p
{
	color: white;
	font-size: 1.2rem;
	text-align: center;
	letter-spacing: 0.1rem;
}


#business p,
#about p,
#contact p,
#works p
{
	margin: 0 auto 2rem;

	color: white;
	text-align: center;
	line-height: 2rem;
}

#works p.year
{
	margin: 0 auto 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	font-size: 1.2rem;
}


.loaded #prepare p{	opacity: 1;	}


/* ==================== SP ==================== */
@media screen and (max-width: 767px)
{

#about
{
	padding: 0 0 0 10vw;
	margin: -10vw 0 0;
}

#works
{
	padding: 0 5vw;
}

#contact
{
	padding: 0 0 0 5vw;
	margin: 5vw 0 0;
}

#business .sectionInner,
#about .sectionInner,
#contact .sectionInner,
#works .sectionInner
{
	width: 90vw;
	padding: 5vw 5vw 10vw;
	background-color: rgba(0, 0, 0, 0.8);
}

#business .title h2,
#about .title h2,
#contact .title h2
{	font-size: 4vw;	}

#business .title p,
#about .title p,
#contact .title p
{	font-size: 3.8vw;	}


#business p,
#about p,
#contact p
{
	font-size: 3.5vw;
	line-height: 2rem;
}

}



/* ======================================== end ======================================== */