@charset "utf-8";
@font-face{
    font-family: 'M+ 2c bold';
    src: url('font/mplus-2c-bold-sub.eot');
    src: url('font/mplus-2c-bold-sub.eot?#iefix') format('embedded-opentype'),
    url('font/mplus-2c-bold-sub.woff') format('woff'),
    url('font/mplus-2c-bold-sub.ttf') format('truetype');
}

html{
	font-size: 10px;
}

body{
	font-family: 'M+ 2c bold';
    background: #e1e1e1;
}

.hid{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.wrapper{
	position: relative;
	min-height: 110vh;
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
}
/*-------------------------------*/
/* #index-head ----------------- */
/*-------------------------------*/
#index-head{
	background: url(../images/head-bg.png) no-repeat;
    background-position: center;
	background-size: cover;
	width: 100%;
	margin-bottom: 20px;
	padding: 130px 0;
}

#index-head h1{
	text-align: center;
}

#index-head h1 a{
	display: inline-block;
}

.title{
	width: 100%;
	max-width: 250px;
}

/* index-navi ------------------*/
#index-navi ul{
	list-style-type: none;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	width: 100%;
	max-width: 1400px;
	margin-bottom: 30px;
}

#index-navi ul li{
	margin-bottom: 10px;
}

#index-navi ul li a{
    display: block;
    font-size: 2rem;
    color: #293330;
	text-align: center;
    text-decoration: none;
	width: 100%;
    max-width: 270px;
}

#index-navi ul li a:hover{
	text-decoration: underline;
	opacity: 0.8;
}

/* SNS --------------------*/
#sns{
	margin-bottom: 30px;
}

.sns{
	list-style-type: none;
	display: flex;
	flex-direction: row;
	text-align: center;
	width: 100%;
	max-width: 350px;
	margin: 0 auto;
}

.sns li{
	width: 100%;
}

.sns li a{
	display: inline-block;
	text-align: center;
}

.icon{
	width: 80%;
}

/*-------------------------------*/
/* #header ----------------------*/
/*-------------------------------*/
#header{
	background: #35423f;
	width: 100%;
}

#head-navi ul{
	list-style-type: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto;
	padding: 10px 0;
}

#head-navi ul li a{
	display: block;
	font-size: 2rem;
	color: #fff;
	text-decoration: none;
	padding: 10px;
}

#head-navi ul li:first-child a{
    display: block;
	width: 80%;
	max-width: 250px;
}

#head-navi ul li a:hover{
	background: url(../images/menu-border.png) no-repeat;
	background-position: bottom;
}

/* ハンバーガーメニュー非表示 ---*/
.nav-unshown{
	display: none;
}

/*-------------------------------*/
/* index：container -------------*/
/*-------------------------------*/
.container{
	width: 90%;
	margin: 0 auto;
}

/*-------------------------------*/
/* #header ----------------------*/
/*-------------------------------*/
#header{
	background: #35423f;
	width: 100%;
}

#head-navi ul{
	list-style-type: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto;
	padding: 10px 0;
}

#head-navi ul li a{
	display: block;
	font-size: 2rem;
	color: #fff;
	text-decoration: none;
	padding: 10px;
}

#head-navi ul li:first-child a{
    display: block;
	width: 80%;
	max-width: 250px;
}

#head-navi ul li a:hover{
	background: url(../images/menu-border.png) no-repeat;
	background-position: bottom;
}

/* ハンバーガーメニュー非表示 ---*/
.nav-unshown{
	display: none;
}

/*----------------------------------*/
/* main ----------------------------*/
/*----------------------------------*/
#main{
	width: 100%;
	min-height: 100vh;
	padding: 30px;
}

#main h1{
	font-size: 2rem;
	margin-left: 20px;
	background: url(../images/border.png) no-repeat left bottom;
	width: 100%;
	max-width: 600px;
	margin-bottom: 20px;
}

/*----------------------------------*/
/* 業務内容：busi-wrap ---------------*/
/*----------------------------------*/
.busi-img{
}

.busi-wrap{
	background: url(../images/business.png) no-repeat center;
/*	rgba(255,255,255,0.5)*/
	background-size: 15%;
	display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    width: 80%;
	margin: 0 auto;
	padding: 30px 0;
}

.busi{
	width: 40%;
	margin-bottom: 20px;
    padding: 0 20px;
}

.busi li:nth-child(1){
	list-style-type: none;
	font-size: 1.5rem;
	background: url(../images/title-bg.png) no-repeat;
    background-size: contain;
    margin-bottom: 10px; 
	margin-left: 0;
}

.busi li{
	list-style-type: disc;
	font-size: 1.4rem;
	margin-left: 25px;
}

/*----------------------------------*/
/* 業績紹介：rec-wrap ---------------*/
/*----------------------------------*/
.rec-bg{
}

.rec-img{
/*
	background: url(../images/record.png) no-repeat center;
	background-size: 20%;
*/
}

.rec-wrap{
	display: flex;
	flex-direction: column;
	width: 98%;
	margin: 0 auto 50px;
}

h3{
	font-size: 1.5rem;
	background: url(../images/title-bg.png) no-repeat;
	background-size: contain;
	margin-bottom: 10px;
}

/* 名刺 ---------------------*/
.rec-card{
	list-style-type: none;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 30px;
}

.rec-card li{
}

.card-img{
	width: 100%;
	max-width: 521px;
}

/* ラベル ------------------*/
.rec-label{
	list-style-type: none;
	display: flex;
	flex-flow: column;
	justify-content: center;
	width: 100%;
	margin-bottom: 30px;
}

.rec-label li{
}

.label-img{
	width: 100%;
	max-width: 150px;
}

/* 看板 ----------------- */
.rec-bord{
	list-style-type: none;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 95%;
	margin-bottom: 30px;
}

.rec-bord li{
}

.bord-img{
	width: 100%;
	max-width: 250px;
}

/* ロゴ ----------------- */
.rec-logo{
	list-style-type: none;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	width: 95%;
}

.rec-logo li{
	margin-right: 20px;
	margin-bottom: 10px;
}

.logo-img-leng{
	width: 100%;
	max-width: 150px;
}

.logo-img{
	width: 100%;
	max-width: 400px;
}

/*----------------------------------*/
/* 会社案内：comp-wrap ---------------*/
/*----------------------------------*/
.comp-img{
	background: url(../images/company.png) no-repeat right center;
	background-size: 18%;
}

.comp-wrap{
    display: flex;
	flex-direction: row;
	justify-content: space-around;
    width: 90%;
	margin: 0 auto;
}

.comp{
	list-style-type: none;
	width: 50%;
}

.comp li h2{
	font-size: 1.7rem;
	background: url(../images/title-bg.png) no-repeat;
	background-size: contain;
	margin-bottom: 10px;
}

.comp li{
	font-size: 1.5rem;
	width: 100%;
}

.map{
    width: 100%;
    max-width: 350px;
    border: 1px solid #35423f;
}

/*----------------------------------*/
/* お問い合わせ ----------------------*/
/*----------------------------------*/
.inq-img{
}

.inq-wrap{
	background: url(../images/inquiry.png) no-repeat right bottom;
	background-size: 25%;
	width: 95%;
	margin: 0 auto 20px;
	padding-bottom: 20px;
}

.item{
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
}

#form{
}

#form label{
	font-size: 1.5rem;
}

.key{
	font-size: 1.2rem;
	color: #f92408;
	margin-left: 5px;
}

#form .name{
	font-size: 1.3rem;
	color: #000;
	box-sizing: border-box;
	border: 1px solid #1b2538;
	width: 30%;
	transition: 0.3s;
	letter-spacing: 1px;
	border-radius: 4px;
	padding: 5px;
}

#form .mail{
	font-size: 1.3rem;
	color: #000;
	box-sizing: border-box;
	border: 1px solid #1b2538;
	width: 50%;
	transition: 0.3s;
	letter-spacing: 1px;
	border-radius: 4px;
	padding: 5px;
}

#form .msg{
	font-size: 1.3rem;
	color: #000;
	box-sizing: border-box;
	border: 1px solid #1b2538;
	width: 50%;
	transition: 0.3s;
	letter-spacing: 1px;
	border-radius: 4px;
	padding: 5px;
}

#form .but{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	width: 50%;
}

.reset{
    position: relative;
    display: inline-block;
	background: #fff;
    border-bottom: solid 2px #fd9535;
    border-radius: 4px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	font-size: 1.3rem;
	color: #000;
	text-decoration: none;
	width: 15%;
	margin-right: 10px;
	padding: 10px;
}

.reset:hover{
	background: #fd9535;
	border-radius: 4px;
	color: #fff;
}

.reset:active{
    border-bottom: solid 2px #fd9535;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

.send{
    position: relative;
    display: inline-block;
    background: #fff;
    border-bottom: solid 2px #29977e;
    border-radius: 4px;/*角の丸み*/
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	font-size: 1.3rem;
    color: #000;
	text-decoration: none;
	width: 15%;
	padding: 10px;
}

.send:hover{
	background: #29977e;
	border-radius: 4px;
	color: #fff;
}

.send:active{
    border-bottom: solid 2px #29977e;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

/*----------------------------------*/
/* 送信確認：confirm -----------------*/
/*----------------------------------*/



/*----------------------------------*/
/* 送信完了：message -----------------*/
/*----------------------------------*/
#message{
}

.msg-box{
	background: #e1e1e1;
	box-shadow: 2px 2px 4px;
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
}

.msg-box h1{
	font-size: 2rem;
	text-align: center;
	margin-bottom: 10px;
}

.msg-box p{
	font-size: 1.3rem;
}


/* #footer ------------------------------------*/
#footer{
    position: fixed;
/*	position: absolute;*/
	bottom: 0;
	background: #35423f;
	width: 100%;
	padding: 10px 0;
}

#footer p{
	font-size: 1.2rem;
	color: #fff;
	text-align: center;
}

/* ------------------------------------------------------*/
/* iPadよこ ----------------------------------------------*/
/* ------------------------------------------------------*/
@media screen and (max-width: 1024px){
	/* iPadよこ：wrapper --------------*/
	.wrapper{
		position: relative;
		min-height: 130vh;
		width: 100%;
		margin: 0 auto;
	}
	
	/* iPadよこ ----------------------*/
	.container{
		width: 95%;
	}
	
    /* iPadよこ：#index-head --------- */
    #index-head{
        padding: 100px 0;
    }

    #index-head h1{
    }

    #index-head h1 a{
    }

    .title{
        width: 70%;
    }
    
     /* iPadよこ：#header ------------ */   
	#header{
        background: #35423f;
    }

    #head-navi ul{
    }

    #head-navi ul li a{
    }
    
    #head-navi ul li:first-child a{
        width: 80%;
    }
	
	/* iPadよこ：#index-navi ----------*/
	#index-navi{
	}
	
	#index-navi ul{
		flex-flow: row wrap;
		justify-content: space-around;
	}

	#index-navi ul li{
		margin: 30px;
	}

	#index-navi ul li a{
	}
	
	/* iPadよこ：SNS -------*/
	#sns{
		margin-bottom: 30px;
	}

	.sns{
		width: 100%;
	}

	.sns li{
	}

	.sns li a{
		margin-bottom: 20px;
	}
	
	/* iPadよこ -----------------*/
	#main{
		width: 100%;
		margin: 0 auto;
		padding: 20px;
	}

	#main h1{
		font-size: 2rem;
		width: 90%;
		margin-left: 20px;
	}

	/* iPadよこ：業務内容：busi-wrap -------------*/
	.busi-img{
	}

	.busi-wrap{
        background-position: bottom;
		background-size: 30%;
		padding: 0;
	}

	.busi{
		justify-content: space-between;
	}
	
	.busi li:nth-child(1){
		font-size: 1.5rem;
	}

	.busi li{
		font-size: 1.4rem;
	}
	
	/* iPadよこ：業績紹介：rec-wrap ---------------*/
	.rec-wrap{
		width: 96%;
	}

	h3{
		margin-bottom: 10px;
	}

	/* iPadよこ：名刺 -----------*/
	.rec-card{
		flex-flow: row wrap;
		justify-content: space-around;
		width: 100%;
		margin: 0 auto 20px;
	}

	.rec-card li{
		width: 50%;
/*		margin: 0;*/
/*		margin-bottom: 20px;*/
	}

	.card-img{
		width: 80%;
	}

	/* iPadよこ：ラベル --------*/
	.rec-label{
		flex-flow: column;
		justify-content: center;
		width: 95%;
		margin-bottom: 30px;
	}

	.rec-label li{
		width: 100%;
		max-width: 250px;
	}

	.label-img{
		width: 100%;
		max-width: 150px;
	}

	/* iPadよこ：看板 ------- */
	.rec-bord{
		flex-flow: row wrap;
		justify-content: space-between;
		width: 95%;
		margin-bottom: 20px;
	}

	.rec-bord li{
		width: 100%;
	}

	.bord-img{
		width: 100%;
	}

	/* iPadよこ：ロゴ ----- */
	.rec-logo{
		flex-flow: row wrap;
		width: 100%;
	}

	.rec-logo li:first-child{
		width: 20%;
	}

	.logo-img-leng{
		width: 100%;
	}

	.logo-img{
		width: 100%;
	}
	
	/* iPadよこ：会社案内：comp-wrap ---------*/
	.comp-img{
		background-position: right;
		background-size: 15%;
	}

	.comp-wrap{
		flex-direction: row;
		justify-content: flex-start;
		width: 80%;
		margin-left: 20px;
		padding: 0;
	}

	.comp{
	}
    
    .comp li h2{
		font-size: 1.7rem;
	}
    
	.comp li{
		font-size: 1.5rem;
	}
	
    .map{
        width: 100%;
    }
	
	/* iPadよこ：お問い合わせ -------------*/
	.inq-img{
	}

	.inq-wrap{
/*		background: url(../images/inquiry.png) no-repeat right bottom;*/
		background-size: 40%;
		width: 90%;
		margin: 0 auto;
		margin-top: 0px;
	}

	.item{
		flex-direction: column;
		margin-bottom: 10px;
	}

	#form label{
		font-size: 1.7rem;
	}

	#form .name{
		font-size: 1.3rem;
		width: 50%;
	}

	#form .mail{
		font-size: 1.3rem;
		width: 50%;
	}

	#form .msg{
		font-size: 1.3rem;
		width: 50%;
	}
	
	#form .but{
		justify-content: flex-end;
		width: 50%;
	}
	
	.send{
		font-size: 1.3rem;
		width: 30%;
	}

	.send:active{
	}

	.reset{
		font-size: 1.3rem;
		width: 30%;
	}

	.reset:active{
	}
	
	#footer{
	    position: fixed;
        bottom: 0;
	}
}

/* ------------------------------------------------------*/
/* iPadたて ----------------------------------------------*/
/* ------------------------------------------------------*/
@media screen and (max-width: 800px){
	/* iPadたて：wrapper --------------*/
	.wrapper{
		position: relative;
		min-height: 100vh;
		width: 100%;
		margin: 0 auto;
	}
	
	/* iPadたて：#header ------------- */
	#header{
		margin-bottom: 10px;
	}
	
	.head-top a{
		background-size: 70%;
		padding: 40px 0;
	}
	
	.head-title{
    }
	
	.title{
        width: 70%;
    }
	
	.container{
		width: 95%;
	}
	
    /* iPadたて：#index-head --------- */
    #index-head{
        padding: 200px 0;
    }

    #index-head h1{
    }

    #index-head h1 a{
    }
	
	#index-navi ul{
	}

	#index-navi ul li{
		margin-bottom: 10px;
	}

	#index-navi ul li a{
	}

	#index-navi ul li a:hover{
	}
	
	/* iPadたて：SNS ------------*/
	#sns{
		margin-bottom: 40px;
	}

	.sns{
		width: 100%;
	}

	.sns li{
		width: 100%;
	}

	.sns li a{
	}

	/* iPadたて：business業務内容 ----------*/
	#main{
		width: 100%;
		padding: 10px;
	}

	#main h1{
		font-size: 2rem;
		margin-left: 20px;
	}

	.border{
		width: 80%;
	}

	.main-wrap{
		width: 100%;
	}

	.main-img{
		width: 30%;
		max-width: 542px;
		opacity: 0.8;
		float: left;
	}

	/* iPadたて：業務内容：busi-wrap -------*/
	.busi-img{
	}

	.busi-wrap{
		background-position: center bottom;
		background-size: 30%;
		width: 100%;
	}

	.busi{
		width: 45%;
		margin-bottom: 30px;
		padding: 0;
	}

	.busi li:nth-child(1){
		font-size: 1.5rem;
	}
	
	.busi li{
		font-size: 1.4rem;
	}
	
	/* iPadたて：業績紹介：rec-wrap ---------------*/
	.rec-wrap{
		flex-flow: column;
		margin: 0 auto ;
	}

	h3{
		font-size: 1.5rem;
		margin-bottom: 10px;
	}

	/* iPadたて：名刺 ----------*/
	.rec-card{
		flex-flow: row wrap;
		justify-content: space-between;
		width: 100%;
		margin: 0 auto;
	}

	.rec-card li{
		margin: 0;
		margin-bottom: 20px;
	}

	.card-img{
		width: 70%;
	}

	/* iPadたて：ラベル --------*/
	.rec-label{
		flex-flow: column;
		justify-content: center;
		width: 100%;
		margin-bottom: 20px;
	}

	.rec-label li{
		width: 100%;
		max-width: 250px;
	}

	.label-img{
		width: 100%;
		max-width: 150px;
	}

	/* iPadたて：看板 -------- */
	.rec-bord{
		flex-flow: row wrap;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 20px;
	}

	.rec-bord li{
	}

	.bord-img{
		width: 100%;
		max-width: 250px;
	}

	/* iPadたて：ロゴ ------- */
	.rec-logo{
		flex-flow: row wrap;
		align-items: flex-end;
		justify-content: space-between;
		width: 95%;
		margin-bottom: 50px;
	}

	.rec-logo li{
		width: 70%;
		margin-bottom: 10px;
	}

	.logo-img-leng{
		width: 100%;
	}

	.logo-img{
		width: 70%;
	}
	
	/* iPadたて：会社案内：comp-wrap ------------*/
	.comp-img{
		background-size: 30%;
	}
	
	.comp-wrap{
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		width: 95%;
		margin-left: 200px;
	}
	
	.comp-wrap li{
		margin-bottom: 20px;
	}

	.comp{
		width: 100%;
	}

	.comp li h2{
		font-size: 1.5rem;
	}
	
	.comp li{
		margin: 0;
	}

	.map{
		width: 100%;
	}
	
	/* iPadたて：お問い合わせ：inq-img --------*/
	.inq-img{
	}

	.inq-wrap{
		background-size: 30%;
		width: 90%;
		margin: 0 auto;
		margin-top: 0px;
		padding: 0;
	}

	.item{
	}

	#form label{
		font-size: 1.7rem;
	}

	#form .name{
		font-size: 1.3rem;
		width: 30%;
	}

	#form .mail{
		font-size: 1.3rem;
		width: 50%;
	}

	#form .msg{
		font-size: 1.3rem;
		width: 50%;
	}
	
	#form .but{
		justify-content: flex-end;
		width: 30%;
	}
	
	.send{
		font-size: 1.3rem;
		width: 20%;
	}

	.send:active{
	}

	.reset{
		font-size: 1.3rem;
		width: 20%;
	}

	.reset:active{
	}
	
	#footer{
/*
	    position: fixed;
        bottom: 0;
*/
	}
}

/*--------------------------------------------------------*/
/* スマホよこ ----------------------------------------------*/
/*--------------------------------------------------------*/
@media screen and (max-width: 768px){
	/* スマホよこ：wrapper ---------------*/
	.wrapper{
		position: relative;
		min-height: 150vh;
		width: 100%;
		margin: 0 auto;
	}
	
	/* スマホよこ：container -------------*/
	.container{
		width: 95%;
		margin-bottom: 30px;
	}
	
    /* スマホよこ：#index-head --------- */
    #index-head{
        margin-bottom: 10px;
        padding: 30px 0;
    }

    #index-head h1{
    }

    #index-head h1 a{
    }

    .title{
        width: 70%;
    }
	
	/* スマホよこ：#header ------------- */
	#header{
    }

    #head-navi ul{
        width: 95%;
    }
	
	#head-navi ul li{
		width: 90%;
		text-align: left;
	}

    #head-navi ul li a{
        display: block;
        font-size: 1.5rem;
		text-align: center;
        color: #fff;
        padding: 10px;
    }

    #head-navi ul li:first-child a{
		width: 100%;
    }

    #head-navi ul li a:hover{
		background-position: center bottom;
    }
	
	/* スマホよこ：#index-head---------- */
	#index-navi ul{
		flex-flow: row wrap;
		justify-content: space-around;
		width: 100%;
		max-width: 1400px;
		margin-bottom: 30px;
	}
	
	#index-navi ul li{
		margin-bottom: 10px;
	}

	#index-navi ul li a{
	}

	#index-navi ul li a:hover{
	}
	
	/* スマホよこ：SNS -----------------*/
	#sns{
		margin-bottom: 30px;
	}

	.sns{
		width: 100%;
	}

	.sns li{
		width: 100%;
	}

	.sns li a{
	}
	
	/* スマホよこ ---------------------------*/
	#main{
		width: 100%;
		margin: 0 auto;
		padding: 0px;
	}

	#main h1{
		font-size: 1.7rem;
		width: 70%;
		background-position: left bottom;
		margin-bottom: 20px;
	}

	/* スマホよこ：業務内容：busi-wrap -------*/
	.busi-img{
	}

	.busi-wrap{
		background-position: center;
		background-size: 30%;
		width: 90%;
		margin-bottom: 30px;
		padding: 0;
	}

	.busi{
		width: 50%;
		margin-bottom: 10px;
		padding: 0 45px;
	}

	.busi li:nth-child(1){
		font-size: 1.2rem;
	}	

	.busi li{
		font-size: 1.1rem;
	}
	
	/* スマホよこ：業績紹介：rec-wrap ---------------*/
	.rec-wrap{
		margin: 0 auto 10px;
	}

	h3{
		font-size: 1.5rem;
	}

	/* スマホよこ：名刺 ----------*/
	.rec-card{
		justify-content: space-between;
		width: 100%;
	}

	.rec-card li{
		margin-bottom: 10px;
	}

	.card-img{
		width: 80%;
		max-width: 521px;
	}

	/* スマホよこ：ラベル -------*/
	.rec-label{
		flex-flow: column;
		justify-content: center;
		width: 100%;
		margin-bottom: 20px;
	}

	.rec-label li{
	}

	.label-img{
		width: 100%;
		max-width: 150px;
	}

	/* スマホよこ：看板 ------- */
	.rec-bord{
		flex-flow: row wrap;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 20px;
	}

	.rec-bord li{
		width: 100%;
	}

	.bord-img{
		width: 100%;
		max-width: 250px;
	}

	/* スマホよこ：ロゴ ------ */
	.rec-logo{
		flex-flow: row wrap;
		align-items: flex-end;
		justify-content: flex-start;
		width: 100%;
		margin-bottom: 30px;
	}

	.rec-logo li{
		margin-bottom: 20px;
	}

	.logo-img-leng{
		width: 100%;
	}

	.logo-img{
		width: 70%;
	}

	/* スマホよこ：会社案内：comp-wrap -----*/
	.comp-img{
		background-position: right bottom;
		background-size: 20%;
	}

	.comp-wrap{
		flex-direction: column;
		width: 80%;
		margin: 0 auto 30px;
		padding: 0;
	}

	.comp{
		margin-bottom: 30px;
	}
	
	.comp li h2{
		font-size: 1.5rem;
	}
	
	.comp li{
		font-size: 1.3rem;
	}
	
	.map{
		width: 100%;
	}
	
	/* スマホよこ：お問い合わせ：inq-img --------*/
	.inq-img{
		background-size: 10%;
/*		background: none;*/
	}

	.inq-wrap{
		width: 95%;
		margin: 0 auto 30px;
		padding: 0px;
	}

	.item{
	}
	
	#form{
		padding-bottom: 10px;
	}
	
	#form label{
		font-size: 1.5rem;
	}

	#form .name{
		font-size: 1.3rem;
		width: 70%;
	}

	#form .mail{
		font-size: 1.3rem;
		width: 70%;
	}

	#form .msg{
		font-size: 1.3rem;
		width: 70%;
	}
	
	#form .but{
		justify-content: flex-end;
		width: 70%;
	}
	
	.send{
		font-size: 1.3rem;
		width: 20%;
	}

	.send:active{
	}

	.reset{
		font-size: 1.3rem;
		width: 20%;
	}

	.reset:active{
	}

	/* スマホよこ：#footer -------------------*/
	#footer{
/*
		position: fixed;
		bottom: 0;
*/
	}

	#footer p{
	}
}

/*--------------------------------------------------------*/
/* スマホたて ----------------------------------------------*/
/*--------------------------------------------------------*/
@media screen and (max-width: 480px){
	/* スマホたて：wrapper ------------------*/
	.wrapper{
		position: relative;
		min-height: 130vh;
		background: #e1e1e1;
		width: 100%;
		margin: 0 auto;
	}
	
	.container{
		width: 95%;
	}
	
    /* スマホたて：#index-head -------------- */
    #index-head{
        width: 100%;
        margin-bottom: 10px;
        padding: 30px 0;
    }

    #index-head h1{
        text-align: center;
    }

    #index-head h1 a{
        display: inline-block;
    }

    .title{
        width: 60%;
    }
    
    /* スマホたて：#header ----------------- */
    #header{
		margin-bottom: 10px;
		padding: 20px 0;
	}

	.head-top a{
		background-size: 80%;
		padding: 30px 0;
	}
	
	#head-navi ul{
		flex-direction: column;
	}
	
	#head-navi ul li:nth-child(1){
		text-align: center;
	}
	
	/* スマホたて：#head-navi ---------------*/
	#head-navi ul{
 		background: #35423f;
		list-style-type: none;
		position: fixed;
		display: flex;
		flex-direction: column;
		width: 100%;
		margin: 0 auto;
		padding: 10px 0;
	}

	#head-navi ul li a{
		display: block;
		font-size: 1.5rem;
		color: #fff;
		text-align: center;
		text-decoration: none;
		padding: 10px;
	}
	
	#head-navi ul li:first-child a{
		width: 80%;
		margin: 0 auto;
	}

	#head-navi ul li a:hover{
		background: url(../images/menu-border.png) no-repeat;
		background-position: center bottom;
	}
	
	/* スマホたて：ハンバーガーメニュー ------------ */
	#nav-drawer{
        position: relative;
		margin-left: 5px;
	}

	/* チェックボックスは非表示 ---*/
	.nav-unshown{
        display: none;
	}

	/* アイコンのスペース ---------*/
	#nav-open{
        display: inline-block;
        width: 30px;
        height: 22px;
        vertical-align: middle;
	}

	/* アイコンを描く ----------- */
	#nav-open span, #nav-open span:before, #nav-open span:after{
        position: absolute;
		left: 0;
        display: block;
        content: '';
        cursor: pointer;
        width: 25px;
        height: 3px;
        border-radius: 3px;
        background: #555;
	}
	
	#nav-open span:before{
        bottom: -8px;
	}
	
	#nav-open span:after{
        bottom: -16px;
	}

	/*閉じる用の薄黒カバー ------ */
	#nav-close{
        position: fixed;
        display: none;
        z-index: 99;
        top: 0;/*全体に広がるように*/
        left: 0;
        width: 100%;
        height: 100%;
/*        background: black;*/
        opacity: 0;
        transition: .3s ease-in-out;
    }

	/*中身*/
	#nav-content{
        overflow: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;/*最前面に*/
        width: 100%;/*右側に隙間を作る（閉じるカバーを表示）*/
        max-width: 200px;/*最大幅（調整してください）*/
        height: 100%;
        transition: .3s ease-in-out;/*滑らかに表示*/
		transform: translateX(-105%);/*左に隠しておく*/
		opacity: 0.9;
    }

    /*チェックが入ったらもろもろ表示*/
    #nav-input:checked ~ #nav-close{
        display: block;/*カバーを表示*/
        opacity: .5;
    }
    
    #nav-input:checked ~ #nav-content{
		transform: translateX(0%);/*中身を表示（右へスライド）*/
/*        box-shadow: 6px 0 25px rgba(0,0,0,.15);*/
    }
	
	/* スマホたて：#index-navi --------*/
	#index-navi ul{
		align-items: center;
	}
	
	#index-navi ul li{
		margin-bottom: 20px;
	}
	
	/* スマホたて：SNS ---------------*/
	#sns{
		margin-bottom: 30px;
	}

	.sns{
		width: 80%;
	}

	.sns li{
		width: 100%;
	}

	.sns li a{
	}
	
	/* スマホたて：main --------*/
	#main{
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}

	#main h1{
		background-position: center bottom;
		font-size: 1.6rem;
		text-align: center;
		margin: 0 auto 10px;
	}

	/* スマホたて：業務内容：busi-wrap ---------*/
	.busi-img{
	}

	.busi-wrap{
		background-position: right bottom;
		background-size: 30%;
		flex-flow: column;
		justify-content: flex-start;
		width: 100%;
		margin: 0;
		margin-bottom: 35px;
		padding: 0;
	}

	.busi{
		width: 88%;
		margin-bottom: 15px;
	}
	
	.busi li:nth-child(1){
		font-size: 1.2rem;
		margin-bottom: 5px;
	}
	
	.busi li{
		font-size: 1.2rem;
	}
	
	/* スマホたて：業績紹介：rec-wrap ---------*/
	.rec-wrap{
		width: 95%;
		margin: 0 auto 10px;
	}

	h3{
		font-size: 1.3rem;
	}

	/* スマホたて：名刺 ---------*/
	.rec-card{
		flex-flow: row wrap;
		justify-content: space-around;
		width: 100%;
	}

	.rec-card li{
		width: 50%;
		margin-bottom: 10px;
	}

	.card-img{
		width: 90%;
	}

	/* スマホたて：ラベル ------*/
	.rec-label{
		width: 100%;
	}

	.rec-label li{
	}

	.label-img{
		width: 100%;
	}

	/* スマホたて：看板 ------ */
	.rec-bord{
		flex-flow: row wrap;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 20px;
	}

	.rec-bord li{
	}

	.bord-img{
		width: 100%;
		max-width: 250px;
	}

	/* スマホたて：ロゴ ----- */
	.rec-logo{
		flex-flow: row wrap;
		justify-content: flex-start;
		width: 95%;
		margin-bottom: 30px;
	}

	.rec-logo li{
		width: 50%;
		margin-bottom: 10px;
	}

	.logo-img-leng{
		width: 100%;
	}

	.logo-img{
		width: 100%;
	}

	/* スマホたて：会社案内：comp-wrap -------*/
	.comp-img{
		background-size: 20%;
		background-position: right bottom;
	}
	
	.comp-wrap{
		flex-direction: column;
		justify-content: space-around;
		width: 100%;
		margin-left: 10px;
		margin-bottom: 35px;
		padding: 0;
	}

	.comp{
	}
	
	.comp li h2{
		font-size: 1.5rem;
	}
	
	.comp li{
		font-size: 1.4rem;
		width: 80%;
	}

	.map{
		width: 90%;
	}
	
	/* スマホたて：お問い合わせ：inq-img --------*/
	.inq-img{
		background-size: 20%;
	}

	.inq-wrap{
		width: 95%;
	}
	
	#form{
		padding-bottom: 10px;
	}

	.item{
	}

	#form label{
		font-size: 1.5rem;
	}

	#form .name{
		font-size: 1.3rem;
		width: 75%;
	}

	#form .mail{
		font-size: 1.3rem;
		width: 75%;
	}

	#form .msg{
		font-size: 1.3rem;
		width: 75%;
	}
	
	#form .but{
		width: 70%;
	}

	.send{
		font-size: 1.3rem;
		width: 30%;
	}

	.send:active{
	}

	.reset{
		font-size: 1.3rem;
		width: 30%;
	}

	.reset:active{
	}
	
	/* スマホたて：#footer --------------*/
	#footer{
/*
		position: fixed;
        bottom: 0;
*/
	}
}