@charset "utf-8";

/* common
---------------------------------------------*/
* {margin:0;padding:0;}

a:link,a:visited {
	color: #ffffff;
	text-decoration:underline;
}
a:hover,a:active {
	color: #d90909;
	text-decoration:underline;
}


img{ border: none;}

/* ボタンのマウスオーバーで明るくする */
.btn:hover {
  filter: brightness(120%);
}


/* animation
---------------------------------------------*/
.feedInUp {
	opacity: 0;
	transform: translate(0,30px); 
	-webkit-transform: translate(0,30px); 
	transition: 1.5s;
}
.feedInUp_On {
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

/* layout
---------------------------------------------*/


/*TopIntro-Start*/
body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	min-width: 1002px;
	
  	background-color: #ffffff;
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: top center;
	
-webkit-text-size-adjust:none;
	
  text-align:center;
  font-size:33px;
  font-family: 'meiryo', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
    color: #403e3e;
}

/*ヘッダー*/
#header { background: url("../images/header.png") no-repeat top center; 
	height:    170px;
	position: fixed;
	width: 100%;
	background: rgba(0, 0, 0, .1);
	z-index: 100;
	display: flex;
	justify-content: space-between;
	}

#header2 { background: url("../images/header.jpg") no-repeat top center; height: 170px;}

a {
  display: block;
  width: 100%;
  line-height: 80px;
  text-align: center;
}


.container2 {
	text-align:center;
	width:500px;
	margin:0 auto;	
}

.container {
	text-align:center;
	width:1000px;
	margin:0 auto;	
}

.container3 {
	text-align:center;
	width:767px;
	margin:0 auto;	
}

.under {
  border-bottom:3px solid #00a5b8;
  padding-bottom: 5px;
}

.text1 {
  box-sizing: border-box;
	text-align: center;
	font-family: HiraKakuProN-W6;
	font-size: 30px;
	color: #383735;
	margin-top: 30px;
}

.text2 {
	text-align: left;
	font-family: HiraKakuProN-W3;
	font-size: 24px;
	color: #383735;
	width: 400px;
	padding-left: 50px;
}

	.flexbox{
      display:flex;
	  justify-content:center;
      flex-wrap: wrap;
      width: 100%;
      height:auto;
      padding:10px;
    }
    .box-item{
      width: 50%;
      text-align: center;
    }    

	.flexbox2{
      display:flex;
	  flex-direction:column;
	  justify-content:center;
      flex-wrap: wrap;
      width: 100%;
      height:auto;
    }
    .box-item2{
	  width: 50%;
      text-align: center;

}    

.text3 {
	    margin:0 auto;
		text-align: center;
		font-family: HiraKakuProN-W6;
		font-size: 24px;
		color: #383735;
		margin-top: 30px;
	    width: 80%;
	}

	.text4 {
	margin:0 auto;
	text-align: left;
	font-family: HiraKakuProN-W3;
	font-size: 20px;
	color: #383735;
	width: 80%;
}
	.flexbox3{
      display:flex;
	  justify-content:center;
	  flex-direction:column;
      flex-wrap: wrap;
      width: 100%;
      height:auto;
      padding:10px;
    }
    .box-item3{
      width: 100%;
      text-align: center;
    }    

	.flexbox4{
      display:flex;
	  flex-direction:column;
	  justify-content:center;
      flex-wrap: wrap;
      width: 100%;
      height:auto;
    }
    .box-item4{
	  width: 100%;
      text-align: center;
    }    
.pc { display: none !important; }
.sp { display: block !important; }
img { max-width: 100%; }


@media screen and (min-width:768px){
.pc { display: block !important; }
.sp { display: none !important; width: 100%; }
}



/*sec01*/
#title1 { background: url("../images/lp-title.png") no-repeat top center; height:    251px; margin-top: 50px } 
#portfolio1 { background: url("../images/portfolio_01.jpg") no-repeat top center; height:    1197px;} 
#portfolio2 { background: url("../images/portfolio_02.jpg") no-repeat top center; height:    1283px;} 
#portfolio3 { background: url("../images/portfolio_03.jpg") no-repeat top center; height:    1300px;} 
#portfolio4 { background: url("../images/portfolio_04.jpg") no-repeat top center; height:    1273px;} 
#portfolio5 { background: url("../images/portfolio_05.jpg") no-repeat top center; height:    1340px;} 

/*sec02*/
#flow1 { background: url("../images/flow_01.jpg") no-repeat top center; height:    258px;} 
#flow2 { background: url("../images/flow_02.jpg") no-repeat top center; height:    635px;} 
#flow3 { background: url("../images/flow_03.jpg") no-repeat top center; height:    649px;} 
#flow4 { background: url("../images/flow_04.jpg") no-repeat top center; height:    897px;} 
#flow5 { background: url("../images/flow_05.jpg") no-repeat top center; height:    893px;} 
#flow6 { background: url("../images/flow_06.jpg") no-repeat top center; height:    1208px;} 

/*sec03*/
#profile1 { background: url("../images/profile_01.jpg") no-repeat top center; height:    695px;} 
#profile2 { background: url("../images/profile_02.jpg") no-repeat top center; height:    657px;} 
#profile3 { background: url("../images/profile_03.jpg") no-repeat top center; height:    580px;} 
#profile4 { background: url("../images/profile_04.jpg") no-repeat top center; height:    286px;} 

/*form*/
#form1 { background: url("../images/form_01.jpg") no-repeat top center; height:    379px;} 
#form2 { background-color: #00a5b8 ;} 

#footer {  
	background-color: #383735;
}

#footer2 {  
	background-color: #00a5b8;
}


.flex_test-item{
		width: 100%;
	}
	
	.flex_test-box {
		margin-top: 0px;
	}

	.fixed_btn {
		display: block;
		padding: 0px;
	}
	.fixed_btn_img {
		display: block;
		margin: 0 auto;
		}

	.flex_test-box {
		padding:  0px;            
		display: flex;             
		margin-left: 0;
	}


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

.fixed_btn {
	display: block;
	padding: 0px;
	width: 100%;
}
.fixed_btn_img {
	display: block;
	margin: 0 auto;
}
}

ol,
ul{
	list-style-position: inside;
	padding-left:10px;
}
ol li,
ul li{
	text-align:left;
}



@media screen and (max-width:767px){
	* {
		background-size: contain;
	}
	body {
		min-width: inherit;
	}
	.container {
		width:100%;
	}
	.container2 {
		width:100%;
	}
	
	.text1 {
	  box-sizing: border-box;
		text-align: center;
		font-family: HiraKakuProN-W6;
		font-size: 30px;
		color: #383735;
		margin-top: 30px;
	}

	.text2 {
	text-align: left;
	font-family: HiraKakuProN-W3;
	font-size: 24px;
	color: #383735;
	width: 400px;
}
	.flexbox{
      display:flex;
	  justify-content:center;
	  flex-direction:column;
      flex-wrap: wrap;
      width: 100%;
      height:auto;
      padding:10px;
    }
    .box-item{
      width: 50%;
      text-align: center;
    }    

	.flexbox2{
      display:flex;
	  flex-direction:column;
	  justify-content:center;
      flex-wrap: wrap;
      width: 100%;
      height:auto;
    }
    .box-item2{
	  width: 50%;
      text-align: center;
    }    
	
	#header { height: 17.0vw; background-size: cover;} 
	#header2 { height: 17.0vw; background-size: cover;}
 

	/*sec01*/
	#title1 { height: 25.1vw; background-size: cover; width: 70%; margin-top: 50px} 
	#portfolio1 { height: 119.7vw; background-size: cover;} 
	#portfolio2 { height: 128.3vw; background-size: cover;} 
	#portfolio3 { height: 130.00vw; background-size: cover;} 
	#portfolio4 { height: 127.3vw; background-size: cover;} 
	#portfolio5 { height: 134.0vw; background-size: cover;}

	
	/*sec02*/
	#flow1 { height: 25.8vw; background-size: cover;}
	#flow2 { height: 63.5vw; background-size: cover;}
	#flow3 { height: 64.9vw; background-size: cover;}
	#flow4 { height: 89.7vw; background-size: cover;}
	#flow5 { height: 89.3vw; background-size: cover;}
	#flow6 { height: 120.8vw; background-size: cover;}
	
	/*sec03*/
	#profile1 { height: 69.5vw; background-size: cover;}
	#profile2 { height: 65.7vw; background-size: cover;}
	#profile3 { height: 58.0vw; background-size: cover;}
	#profile4 { height: 28.6vw; background-size: cover;}
	
	/*form*/
	#form1 { height: 37.9vw; background-size: cover;}
}