html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}
body{
font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

a{
color:#fff;
text-decoration:none;
}
ul{
list-style:none;
}


/*========================*/
/*body構成*/
/*========================*/
.modal-overlay {
  z-index:5;
  display:none;
  position: fixed;
  top: 5;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.75); 
}
.modal-overlay.active{
	display:block;
}

.section{
color:#fff;
text-align:center;
margin:0 auto;
background-color:rgb(53,54,63);
}

.contents{
display:block;
max-width:800px;
margin:0 auto;
text-align:center;
padding-top:50px;
}

.about{
text-align:left;
width:600px;
}

.section-gray{
background-color:rgb(127,128,127);
}

.container{
padding-top:100px;
padding-bottom:100px;
position:relative;
}

.contents-title{
cursor:pointer;
z-index:3;
}
#about,#service,#flow,#works,#contact{
	position:relative;
}
.bg-title{
	position:absolute;
	top:0;
	font-size:10em;
	font-weight: bold;
	z-index:1;
	letter-spacing:0.08em;
}
#about .bg-title, #flow .bg-title, #contact .bg-title{
	color:rgba(98,98,99,0.2);
	left:20%;
}
#service .bg-title, #works .bg-title{
	color:rgba(173,173,173,0.2);
	right:20%;
}
@media screen and (max-width: 1000px){
	.bg-title{
		font-size:8em;
	}
	#about .bg-title, #flow .bg-title, #contact .bg-title{
		left:50%;
		transform:translateX(-50%);
	}
	#service .bg-title, #works .bg-title{
		right:initial;
		left:50%;
		transform:translateX(-50%);
	}
}
@media screen and (max-width: 650px){
	.about{
		width:100%;
	}
	.bg-title{
		font-size:5em;
		top:20px;
	}
}
@media screen and (max-width: 370px){
	.bg-title{
		font-size:4em;
		top:30px;
	}

}
/*========================*/
/*ハンバーガーメニュー*/
/*========================*/
.menu-trigger{
	width:40px;
	height:25px;
	float:right;
	margin-right:50px;
	margin-top:30px;
	position:relative;
	cursor:pointer;
	display:none;
}
.menu-trigger span{
	height:2px;
	width:100%;
	background:#fff;
	position:absolute;
}
.menu-trigger span:nth-of-type(1) {
  top: 0; 
}
.menu-trigger span:nth-of-type(2) {
  top: 50%; 
  transform:translateY(-50%);
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0; 
}
.menu-trigger.active span:nth-of-type(1) {
transform: translateY(7px) rotate(-45deg); 
}
.menu-trigger.active span:nth-of-type(2) {
opacity: 0; 
}
.menu-trigger.active span:nth-of-type(3) {
transform: translateY(-15px) rotate(45deg); 
}

.nav-modal{
display:none;
position:fixed;
top:80px;
right:0;
width:100%;
z-index:100;
text-align:center;
}

.nav-list{
color:#fff;
text-decoration:none;
display:block;
background-color:#232333;
padding:15px
}

.nav-list:hover{
background-color:rgb(127,128,127);
}
@media(max-width:1000px){
	.menu-trigger{
		display:block;
	}
}

/*========================*/
/*header*/
/*========================*/
.header-container{
height:80px;
width:100%;
background-color:#232333;
color:#fff;
position:fixed;
top:0;
opacity:1;
z-index:10;
}
.header-title{
font-size:1.5em;
font-family: "Amatic SC", cursive;
line-height:80px;
}
.header-subtitle{
font-size:0.8em;
}

.header-left{
padding-left:20px;
float:left;
}

.header-right{
float:right;
padding-right:0;
z-index:3;
}

.header-right a{
float:left;
line-height:80px;
background-color:rgb(53,54,63);
padding:0 40px;
text-decoration: none;
}

.header-right a:hover{
background-color:rgb(127,128,127);
}

/*========================*/
/*firstview*/
/*========================*/
.top-section{
height:700px;
width:100%;
text-align:center;
margin:0 auto;
background-image:url(../img/sample.jpg);
background-size:cover;
background-position:50% 50%;
z-index:1;
position:relative;
margin-top: 80px;
}

.letter-space{
background-color:#000;
position:absolute;
top:50%;
width:100%;
transform:translateY(-50%);
text-align:center;
opacity:0.5;
color:#fff;
padding:50px 15px;
box-sizing:border-box;
}
.letter-space p{
	padding-top: 15px;
}

#title{
letter-spacing:5px;
font-size:40px;
font-family: "Amatic SC", cursive;
}

.scrollDown{
text-decoration:none;
color:#fff;
margin-top:20px;
display: block;
font-family: "Amatic SC", cursive;
}

span{
margin-left:20px;
}
@media screen and (max-width: 500px){
	.top-section{
		height:500px;
	}
}

/*========================*/
/*form*/
/*========================*/
input,textarea{
width:80%;
padding:10px;
font-size:18px;
border:1px solid #dee7ec;
box-sizing:border-box;
outline:none;
border-radius:4px;
margin-bottom:15px;
}
textarea{
	height:200px;
	margin-bottom:30px;
}
input.err{
	background: #fae5e1;
}
textarea.err{
	background: #fae5e1;
}
.contact-item{
	position:relative;
	width:80%;
	margin:0 auto;
}
.area-msg{
	color:#E3647F;
	position:absolute;
	right:0;
}
.required{
	background:#E3647F;
	padding:3px 5px;
	color:#fff;
	font-size:0.7em;
	border-radius:4px;
}
.submit{
-webkit-appearance: none;
width:min(300px,90%);
padding:5px;
border-radius:1px;
background:rgb(53,54,63);
border:1px solid #fff;
color:#fff;
border-radius:25px;
transition:all 0.3s;
box-sizing:border-box;
outline:none;
}

.submit:hover{
cursor:pointer;
background:#fff;
border:1px solid rgb(127,128,127);
color:rgb(127,128,127);
box-sizing:border-box;
transition:.3s;
}


.confirmation{
	width:100%;
	margin:0 auto;
	box-sizing:border-box;
	padding-top:100px;
	padding-bottom:calc(100vh - 500px);
}
.complete{
	width:100%;
	margin:0 auto;
	box-sizing:border-box;
	padding-top:100px;
	padding-bottom:calc(100vh - 300px);
}
.confirmation-title,.complete-title{
	margin-bottom:20px;
	text-align:center;
}
.form{
	width:min(600px, 80%);
	margin:0 auto;
}
.confirmation-table{
	text-align:left;
	margin:30px auto 60px auto;
	border:1px solid #fff;
	border-collapse: collapse;
  	border-spacing: 0;
	width:100%;
}
.confirmation-table th, .confirmation-table td{
	padding:10px;
	border-bottom:1px solid #fff;
}
th{
	text-align:center;
	background:rgb(127,128,127);
	font-weight:normal;
	width:40%;
}
.btn-wrap{
	text-align:center;
	position:relative;
}
.btn-back{
	color:#fff;
	text-decoration:underline;
	transition:.3s;
	text-align:left;
	position:absolute;
	left:0;
}
.btn-back:hover{
	cursor:pointer;
	opacity:0.7;
	transition:.3s;
}
.btn-back_center{
	color:#fff;
	text-decoration:underline;
	transition:.3s;
	text-align:center;
	margin-top:30px;
	display:block;
}

@media screen and (max-width: 600px){
	input,textarea{
		width:100%;
	}
}

/*========================*/
/*footer*/
/*========================*/
.footer-container{
height:100px;
width:100%;
background-color:#232333;
color:#fff;
/*
position:absolute;
bottom:0;
*/
}

.footer-container h4{
padding-top:20px;
margin-bottom:5px;
text-align:center;
}

.footer-container a{
font-size:12px;
padding-bottom:20px;
display:block;
text-align:center;
}

/*========================*/
/*service*/
/*========================*/
.flex{
	display:flex;
	flex-wrap:wrap;
	width:100%;
}
.flex-service{
	width:33%;
	padding:10px;
	box-sizing:border-box;
}
.flex-service>img{
	height:50px;
}
.flex-service>p{
	text-align:left;
	font-size:0.8em;
}
.flex-service>h4{
	font-size:1.2em;
	padding:10px 0;

}
@media screen and (max-width: 670px){
	.flex-service:nth-child(3n){
		padding-right:0;
	}
}
@media screen and (max-width: 600px){
	.flex-service{
		width:50%;
	}
	.flex-service:nth-child(3n){
		padding:10px;
	}
	.flex-service:nth-child(2n){
		padding-right:0;
	}

}
@media screen and (max-width: 370px){
	.flex-service{
		width:100%;
		padding-right:0;
		padding-bottom:30px;
	}
	.flex-service:nth-child(3n){
		padding-bottom:30px;
	}
}
/*========================*/
/*flow*/
/*========================*/
.step{
	width:50%;
	margin:5px auto;
	padding:5px;
	background:rgb(127,128,127);
	border-radius:4px;
	display:flex;
	align-items:center;
	box-sizing:border-box;
}

.step span{
	background:#fff;
	color:#232323;
	padding:5px 10px;
	margin-right:20px;
	border-radius:4px;
}
.step h4{
	font-weight:normal;
}
.triangle{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 17.3px 10px 0 10px;
	border-color:#fff transparent transparent transparent;
	margin:0 auto;
}
.flow-comment{
	margin-top:30px;
}

@media screen and (max-width: 700px){
	.step{
		width:80%;
	}
	#flow p{
		text-align:left;
	}
}
@media screen and (max-width: 500px){
	.step{
		width:100%;
	}
	.step span{
		margin-right:10px;
		margin-left:10px;
	}
}

/*========================*/
/*works*/
/*========================*/
.works-content{
	margin-bottom:45px;
}
.works-content a:hover{
	text-decoration:underline;
	transition:.3s;
}
.works-content img{
	width:min(400px,90%);
}
.works-content .fas{
	padding-left:5px;
}

/*========================*/
/*アニメーション*/
/*========================*/
.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeUpAnime{
    0%{
        opacity: 0;
		transform: translateY(100px);
    }
    100%{
        opacity:1;
		transform: translateY(0);
    }
}