@charset UTF-8;

*{
	box-sizing: border-box;
}

body{
	font-family: sans-serif;
	background-color: #fff;
}


header a{
	text-align: center;
	padding: 10px;
	letter-spacing: 5px;
	color: #707070;
	text-decoration: none;
	font-weight: bold;
}

header a:hover{
	color: #B4AEAE;
}

#top-wrapper {
	position: relative;
}

.main-visual{
	margin: 0 auto;
	text-align: center;
}

.main-visual img{
	width: 90%;
	border-top-right-radius: 300px;
}

.text-wrapper{
	max-width: 700px;
	max-height: 800px;
	width: 50%;
	height: 25rem;
	background-color: #FFD9D9;
	padding: 5%;
	position: absolute;
	top: 50%;
	left: 2%;
}

.top-text{
	font-size: 1rem;
	color: #000;
	letter-spacing: 3px;
	line-height: 30px;
}

.skill{
	font-size: 0.9rem;
	color: #6F1010;
	padding-top: 15px;
}

.top-text,.skill{
	margin: 0 auto;

}

.border{
	width: 50%;
	height: 25rem;
	padding: 40px 50px;
	border: 2px solid #707070;
	position: absolute;
	top: 53%;
	left: 3%;
}

#top-wrapper h1{
	/*text-align: right;*/
	font: monospace;
	font-size: 45px;
	position: absolute;
	bottom: -30px;
	right: 30px;
	padding: 20px 100px 20px 30px;
	color: #C94F4F;
	font-weight: bold ;
}

.typing{
	border-right: .1em solid #C94F4F;
	overflow: hidden;
	white-space: nowrap;
	animation: 
	typing 5.5s steps(40,end)infinite,
	blink .75s step-end infinite ;
}

@keyframes typing{
	from{width: 0;}
	to{width: 30rem;}
}

@keyframes blink{
	from, to{border-color: transparent;}
	50%{border-color: #C94F4F;}
}

#contents-wrapper{
	margin-top: 10rem;
}

.content-box{
	border: 2px solid #707070;
	width: 90%;
	text-align: center;
	margin: 0 auto;
}

.heading {
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	padding: 10px 0 30px 0;
}

.banner, .b-img{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.b-img img{
	width: 15vw;
	height: 25vh;
	margin: 10px;
}

.b-img:hover img{
	opacity: 0.5;
}

#pd-box{
	margin-top: 5rem;
}

.p-design, .pd-img{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.pd-img img{
	width: 40vw;
	height: 50vh;
	margin: 10px;
}

.pd-img:hover img{
	opacity: 0.5;
}

footer p{
	text-align: center;
	margin: 20px;
}

/*ここから詳細ページ*/

.sampleimg{
	text-align: center;
	margin: 5%;
	display: flex;
}

.bannersample{
	width: 50%;
	margin: 0 auto;
}

.pc{
	width: 50%;
	margin: 0 10%;
}

.websample{
	width: 100%;

}

.tb{
	width: 30%;
	margin: 0 10%;
}

.tablet{
	width: 100%;
}

.sp{
	width: 15%;
	margin: 0 10%;
}

.responsiv{
	width: 100%;
}