@charset "utf-8";
/* ===================================================================

	-	html
	-	font
	-	body

	-	@media print

=================================================================== */

html{
  overflow-y: scroll;
  height: 100%;
}

/*--------------------------------------------------------------------------
   font
---------------------------------------------------------------------------*/



/*--------------------------------------------------------------------------
   body
---------------------------------------------------------------------------*/
body{
  width: 100%;
  min-width: 320px;
  height: 100%;
  font-family: 'Robot', 'Noto Sans Japanese', Arial, 'ヒラギノ角ゴ ProN W3',"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  font-size: 18px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-weight: 300;
}


img{
  border-style: none;
}




/*--------------------------------------------------------------------------
   見出し　
---------------------------------------------------------------------------*/

h1{
  text-align: center;
  font-size: 3em;
  line-height: 1.3em;
  margin-bottom: 2em;
	
	
	
}

h1:first-letter{color: red;}

h3{
	text-align: center;

    margin-top: 2rem;
  margin-bottom: 1rem;
}




/*--------------------------------------------------------------------------
   header
---------------------------------------------------------------------------*/
header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  transition: .3s;
  background-color: rgba(255,255,255,0);
}



nav{
  z-index: 3;
  position: fixed;
  top: 15px;
  right: 20px;


	
}

nav li{
  float: left;
  margin-right: 1em;
  margin-left: 1em;
  font-size: 1.3em;

}


header a:link {
	color           : #fff;
	text-decoration : none;
	}
header a:visited {
	color           : #fff;
	text-decoration : none;
	}
header a:hover {
	color           : #fff;
	text-decoration : none;
	}
header a:active {
	color           : #fff;
	text-decoration : none;

	}

header a{
  outline: none;
  cursor : pointer;
  transition:all 0.3s ease 0s;
}






nav li:first-letter{
	color:red;

}




.is-fixed  {
  position:  fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  background-color: rgba(255,255,255,0.8);
  -webkit-transition: all .4s ease 0s,background .6s ease .2s;
  transition: all .4s ease 0s,background .6s ease .2s;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  height: 70px;

	
}

header.is-fixed a{
	color:000;
}


header.is-fixed  a:link {
	color           : #000;
	text-decoration : none;
	}
header.is-fixed  a:visited {
	color           : #000;
	text-decoration : none;
	}
header.is-fixed  a:hover {
	color           : #000;
	text-decoration : none;
	}
header.is-fixed  a:active {
	color           : #000;
	text-decoration : none;}














.h-logo{
z-index: 3;
 position: fixed;
	top:10px;
	left:20px;
	
}






/*--------------------------------------------------------------------------
   footer
---------------------------------------------------------------------------*/



footer{

background-color: #e1dfdb;
	  padding: 2em 3em;

}

footer div{
		text-align: center;
	width: 1025px;
  margin: 1em auto;
}

footer .copy{
	margin-top: 2em;
	color: rgba(160,160,160,1.00);
}

footer p{margin-top: 1em;}













/*--------------------------------------------------------------------------
   section
---------------------------------------------------------------------------*/

section{
  width: 100%;
  padding-top: 5em;
  padding-bottom: 5em;
	

}



.sec-wrap{
  width: 1025px;
	margin-left: auto;
	margin-right: auto;
}





/*-- top ---------------------------*/

#top{

  background-image: url(../img/bg_top.jpg);
  background-position: center center;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
padding-top:0; 
	padding-bottom:0;
	position: relative;
}

#top .sec-wrap{
	text-align: center;
position: absolute;
	margin: auto;
  top: 20%;
  right: 0;
  bottom: 0;
  left: 0;
}



/*    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	*/






/*-- flow ---------------------------*/

#flow{
}
#flow .sec-wrap{
display:flex;	
justify-content: space-around;
}

#flow img{

}

.flow-txtBox{
  text-align: center;
  width: 550px;
	margin: auto;
}

.flow-txtBox h3{
  font-size: 2rem;
}




/*-- works ---------------------------*/
#works{
  background-color: #e1dfdb;
 	
}

.works-txtBox{
  padding: 20px;
  top: 390px;
  text-align: center;
}

.works-box{
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
}

.works-item{
  width: 238px;
  margin-top: 1em;
}

.works-item p{
  font-size: 0.85rem;
  margin-top: 0.5em;
}





/*-- about ---------------------------*/

#about{
	}



#about dl{
  /* [disabled]width: 600px; */
  margin-left: auto;
  margin-right: auto;
  border-bottom: 1px solid #E1DFDB;

	
}

#about dl:last-of-type{
	border-bottom: none;
	}



#about dt{
  float: left;
  font-weight: 700;
	
}
#about dd{
  margin-left: 10em;
  margin-top: 0.7em;
  margin-bottom: 0.7em;
	
}

#about .flex-box{
  display: flex;
  justify-content: space-around;
}


/*-- contact ---------------------------*/

#contact{

		background-color: #e1dfdb;
}

#contact h1{
}

#contact dl{
  width: 800px;
  margin-left: auto;
  margin-right: auto;
	margin-bottom:1.5em;
	
}

#contact dl:last-of-type{

	}



#contact dt{
  float: left;
  padding-top: 0.5em;
  padding-right: 0px;
	
}

#contact dt.mandatory::after{
	font-size: 0.85em;
  content: " ［必須］"; 
  color: red;

}

#contact dd{
  margin-left: 13em;
	background-color: white;
	padding:0.3em 0.5em;

}

#contact input[type="text"]{
border:none;
width: 100%}

#contact textarea{
border:none;
width: 100%
}

#contact input[type="submit"] , input[type="reset"]{
	padding: 0.2em 0.7em;
}




@media print{
.newpage_before{page-break-before:always;}
body {
        zoom: 0.5;
        -webkit-print-color-adjust: exact;
    }
	
header{
	  position: absolute;

}
	nav{

  position: absolute;
	
}
	.h-logo{position: absolute;}	
.is-fixed  {
  position:  absolute;
	
}
	
}

@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
	body{font-size: 13px;}
	.sec-wrap{width:90%;}
	img{max-width: 90%;
		height:auto;
	}
	
	div{
		flex-direction:column;
		align-items:center;
		justify-content: space-around;
	}
	
	.flow-txtBox{width: 90%;}
	
	header{}
	.h-logo img{width: 60%;}
	nav li{

  margin-right: 0.5em;
  margin-left: 0.5em;
}
	
	footer div{width: 90%;}
	
	.sp-mt-1{margin-top: 1rem;}
}