@charset "UTF-8";


html{
	font-family: "BIZ UDPGothic","Avenir","Helvetica Neue","Helvetica","Arial","Hiragino Sans","ヒラギノ角ゴシック","YuGothic","Yu Gothic","メイリオ", "Meiryo","ＭＳ Ｐゴシック","MS PGothic";
	color: #2f2f2f;

}
.gray{color: #414041;}
.pink{color: #ff07eb;}
.orange{color: #f47f21;}
.purple{color:#706df4;}


.top-messe span,
.wearemesse span,
.worksmesse span,
.jobnai span,
.case-title h4 span{
   display: inline-block; 
}

header:before{
    display: block;
    height: 7rem;
    margin-top: -7rem;
    content: "";
}
#main01, #main02, #main03,
#main04, #main05, #main06{
    padding-top:80px;
}

.grecaptcha-badge { visibility: hidden; }


/*---------- main we are ------------*/
main{
	margin: 50px auto;
}
#main01, #main05{
	background-color: #f9f9f9;
	width: 100%;
	height: auto;
	border-top: solid 1px #333333;
	border-bottom: solid 1px #333333;
}
.wearebox{
	width: 92%;
	max-width: 2000px;
	margin: 0 auto;
	padding: 5% 3%;
}

.wearebox h3,
.worksbox h3,
.compteam h3,
.contactbox h3{
	font-family: "Pliant", "Sawarabi Gothic","Avenir","Helvetica Neue","Helvetica","Arial","Hiragino Sans";
	font-weight: 700;
	-webkit-text-stroke: 2px #213448;
	paint-order: stroke fill;
	font-size: clamp( 1.2rem, calc( -0.3600000000000001rem + 3.8400000000000003vw ), 3rem );
	color: #aaffae;
	letter-spacing: 0.1rem;
}
.wearebox h4{
	padding: 2% 0;
	font-weight: 700;
	font-size: clamp( 1rem, calc( -0.30000000000000004rem + 3.2vw ), 2.5rem );
	letter-spacing: 0.1rem;
}

.wearemesse .sm{display: block;}
.wearemesse .pc{display: none;}

.wearemesse{
	font-size: clamp( 0.8rem, calc( 0.5533333333333333rem + 0.8533333333333334vw ), 1.5rem );
	line-height: 190%;
}

.weareimg-sm{
	width: 60%;
	margin-left: auto;
	padding:20px 0; 
}



/*---------- works ------------*/
.worksbox{
	width: 92%;
	max-width: 2000px;
	margin: 0 auto;
	padding: 5% 3%;
}
.worksmesse{
	text-align: right;
	font-size: clamp( 0.8rem, calc( 0.5533333333333333rem + 0.8533333333333334vw ), 2rem );
	line-height: 180%;
}

.worksbox-ue{
	padding: 40px 20px;
}
.worksimg{
	width: 70%;
	margin-right: auto;
	padding:20px 0; 
}
.worksimg-pc{display: none;}	




.worksbox-shita{
	width: 100%;
	margin: 40px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
}
.works{
	width: 80%;
	min-width: 200px;
	text-align: center;
	margin: 5px;
	border: solid 1px #000000;
}
.jobtit{
	font-size: clamp( 1rem, calc( 0.22000000000000008rem + 1.92vw ), 1.9rem );
	background-color: #f9661d;
	color: #FFFFFF;
	padding: 7px;
	letter-spacing: 0.15em;
}
.jobnai{
	font-size: clamp( 0.8rem, calc( 0.19333333333333336rem + 1.4933333333333334vw ), 1.5rem );
	padding: 7px;
	line-height: 130%;
}

.works .sm{display: block;}
.works .pc{display: none;}



#main03{
	background-color: #f9f9f9;
	width: 100%;
	height: auto;
	margin: 0 auto;
	border-top: solid 1px #333333;
	border-bottom: solid 1px #333333;
}

.casebox{
	width: 95%;
	max-width: 2000px;
	margin: 0 auto;
	padding: 50px 0;
}
.case{
	width: 100%;
	height:auto;
	padding:10px 15px;
	background-color: #FFFFFF;
	border: solid 1px #2f2f2f;
	margin-bottom: 15px;
}
.case-cate{
	background-color: #64bcff;
	padding: 0.5% 3%;
	border-radius: 15px;
	border: solid 1px #2f2f2f;
	display: inline-block;
}
.case-cate p{
	font-family: "Pliant", "Sawarabi Gothic","Avenir","Helvetica Neue","Helvetica","Arial","Hiragino Sans";
	font-weight: 700;
	-webkit-text-stroke: 2px #213448;
	color: #FFFFFF;
	paint-order: stroke fill;
	font-size: clamp( 0.8rem, calc( 0.19333333333333336rem + 1.4933333333333334vw ), 1.5rem );
}
.case-topimg{
	padding: 2% 0;
}
.case-topi{
	padding: 2%;
	color: #2f2f2f;
}
.case-title h4{
	font-size: clamp( 0.8rem, calc( 0.54rem + 0.6400000000000001vw ), 1.1rem );
	line-height: 130%;
	letter-spacing: 0.05em;
}
.caseh4span{
	font-size: 0.7rem;
}
.case-title p{
	font-size: clamp( 0.7rem, calc( 0.4399999999999999rem + 0.6400000000000001vw ), 1rem );
	line-height: 120%;
}
.case-naiyo{
	padding: 10px 0px;
	font-size:clamp( 0.8rem, calc( 0.6266666666666667rem + 0.4266666666666666vw ), 1rem );
	line-height: 130%;
	letter-spacing: 0.05em;
}
.case-link a{
	font-size:clamp( 0.8rem, calc( 0.7133333333333334rem + 0.2133333333333333vw ), 0.9rem );
	line-height: 130%;
	letter-spacing: 0.05em;
	color: #4d7da1;
}
.case-link a:hover{
	color: #6599c0;
}
.case-link-betsu{
	padding-top: 3px;
	font-size: 0.7rem;
	line-height: 120%;
}

/*---------- Team Companio ------------*/
.compteam{
	width: 92%;
	max-width: 2000px;
	margin: 0 auto;
	padding: 5% 3%;
}
.teambox{
	width: 100%;
	margin: 10px auto;
}
.team{
	width: 100%;
	margin: 0 auto;
	padding: 30px 8px 8px 5px;
	border-bottom: solid 1px #2f2f2f;
}
.team-kao{
	width: 30%;
	max-width: 160px;
	margin: 0 left;
}
.team-name{
	padding: 10px 0 0 0;
}


.teambox .sm{display: block;}
.teambox .pc{display: none;}


.team-nai{
	font-size:clamp( 0.7rem, calc( 0.4399999999999999rem + 0.6400000000000001vw ), 1rem );
	line-height: 130%;
	letter-spacing: 0.05em;
	}
.team-title{
	padding: 15px 0 0 0;
	font-size:clamp( 0.8rem, calc( 0.54rem + 0.6400000000000001vw ), 1.1rem );
	font-weight: 700;
	letter-spacing: 0.1em;
}
.team-title2{
	padding: 20px 0 0 0;
	font-size:clamp( 0.7rem, calc( 0.5266666666666666rem + 0.42666666666666675vw ), 0.9rem );
	letter-spacing: 0.1em;
}
.team-title3{
	padding: 5px 0 0 0;
	font-size:clamp( 0.7rem, calc( 0.5266666666666666rem + 0.42666666666666675vw ), 0.9rem );
	letter-spacing: 0.05em;
}

/*---------- Company ------------*/
.Company{
	width: 85%;
	max-width: 1500px;
	margin: 20px auto;
	padding: 5% 3%;
}
.Company h3{
	color: #FFFFFF;
	font-weight: 700;
	-webkit-text-stroke: 2px #213448;
	paint-order: stroke fill;
	font-size: clamp( 0.9rem, calc( 0.5533333333333333rem + 0.8533333333333334vw ), 1.3rem );
	background-color: #f9661d;
	padding: 0.7% 2.5%;
	border: solid 1px #2f2f2f;
	display: inline-block;
	letter-spacing: 0.15em;
}
.Company-nai{
	margin: 1% 0 2% 0;
}
.Company-nai p{
	margin: 0.5% 0.5% 0.5% 0;
	color: #2f2f2f;
	font-size: clamp( 0.7rem, calc( 0.5266666666666666rem + 0.42666666666666675vw ), 0.9rem );
	background-color: #FFFFFF;
	padding: 0.9% 2.5%;
	border: solid 1px #2f2f2f;
	display: inline-block;
	line-height: 130%;
}



/*---------- Contact ------------*/
.contactbox{
	width: 92%;
	max-width: 2000px;
	margin: 0 auto 40px auto;
	padding: 5% 3%;
}
.Cformbox{
	background-color: #f9f9f9;
	width: 100%;
	max-width: 1400px;
	border: solid 1px #333333;
	margin: 20px auto;
	padding: 50px 20px;
	text-align: center;
	letter-spacing: 0.1em;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/*--- form ---*/
.form-block{
	width: 90%;
	max-width: 350px;
	margin-right: auto;
	margin-left: auto;
	font-size: clamp( 0.7rem, calc( 0.5266666666666666rem + 0.42666666666666675vw ), 1rem );
	letter-spacing: 0.1em;
	padding-bottom: 100px;
	color: #666;
	margin-top: 10px;
	line-height: 130%;
	text-align: center;
}
.your{font-size:  1em;color: #333;}
.form_button, form p{padding: 8px 0px;}
.wpcf7-text,
.wpcf7-textarea,
.wpcf7-quiz{
	border: 1px solid #777;
	padding: 5px;
	color: #666;
	background: #fff;
	border-radius: 5px;
}
.wpcf7-list-item{
	border: 1px solid #777;
	padding: 7px;
	color: #666;
	background: #fff;
	border-radius: 5px;
}

.wpcf7 input[type="submit"]{
	padding: 0.3em 1em;
  	text-decoration: none;
  	color: #64bcff;
  	border: solid 1px #64bcff;
  	border-radius: 10px;
  	transition: .4s;
	background-color: #FFFFFF;
}
.wpcf7 input[type="submit"]:hover{
	background: #64bcff;
  	color: white;
}

.wpcf7 input[type="email"],
.wpcf7 input[type="text"],
.wpcf7 textarea{
  	max-width: 100%;
  	box-sizing:border-box;
	}
.sentbtn{
	text-align: center;
}



.sent .form-block {
   display: none;
}


.recaptcha {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.6rem;
	line-height: 130%;
}

.recaptcha a {
    display: inline-block;
    white-space: nowrap;
	color: #355B78;
}


/*--- footer ---*/
footer{
	background-color: #f9f9f9;
	width: 100%;
	border-top: solid 1px #333333;
}
.footerbox{
	width: 90%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 40px 0 15px 0;
	display: flex;
  	justify-content: space-between;
	align-items: flex-end;
}
.footer-left{
	align-self: flex-end;
}
.footer-left h6{
	font-weight: normal;
	font-size: clamp( 0.6rem, calc( 0.26666666666666666rem + 1.0666666666666667vw ), 1.2rem );
	line-height: 150%;
}
.footer-left a{
	color: #2f2f2f;
	line-height: 100%;
}
.footer-left a:hover{
	color: #636363;
}
.footer-right{
	text-align: right;
	align-self: flex-end;
}
.footer-right h2{
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 700;
	-webkit-text-stroke: 2px #213448;
	color: #f9661d;
	paint-order: stroke fill;
	font-size: clamp( 1rem, calc( 0.13333333333333341rem + 2.1333333333333333vw ), 2rem );
	line-height: 130%;
	letter-spacing: 0.1rem;
}
.footh2{
	font-family: "Pliant", "Sawarabi Gothic","Avenir","Helvetica Neue","Helvetica","Arial","Hiragino Sans";
	font-size: clamp( 1.5rem, calc( 0.19999999999999996rem + 3.2vw ), 3rem );
}
small{
	font-size: 0.6rem;
}

/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
@media only screen and (min-width: 350px) {
	
	
	
	
	
	
	
	

	
	
}
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
@media only screen and (min-width: 450px) {

.works{
	width: 45%;
	min-width: 160px;
	text-align: center;
	margin: 5px;
	border: solid 1px #000000;
}
	
.case{
	width: 48%;
	height:auto;
	padding:1.5%;
	margin-bottom: 15px;
}	
	
	
	
	
/*--- form ---*/
form-block{
	width: 90%;
	max-width: 400px;
	}	

	
}


/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
@media only screen and (min-width: 500px) {
	
	
.wearemesse .sm{display: none;}
.wearemesse .pc{display: block;}	
	

	
	
	
	
	



}
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
@media only screen and (min-width: 700px) {
#main01, #main02, #main03,
#main04, #main05, #main06{
    padding-top:50px;
}
	
	
.teambox .sm{display: none;}
.teambox .pc{display: block;}
	
.team{
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 60px 8px 8px 5px;
	border-bottom: solid 1px #2f2f2f;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
}
.team-kao{
	width: 25%;
	max-width: 200px;
	margin: 0 left;
}
.team-name{
	width: 70%;
	padding: 20px 0 10px 20px;
	display:flex;
	flex-direction: column;
	justify-content: space-between; 
}	
	

/*--- form ---*/
form-block{
	width: 90%;
	max-width: 500px;
	}	
	
	
}
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
@media only screen and (min-width: 850px) {

.weareimg-sm{display: none;}
.wearemesse{
	height: 60vh;
	min-height: 700px;
	background-image: url("img/weare001.png");
	background-size: auto 60%;
	background-repeat: no-repeat;
	background-position: right bottom;
}
	
.worksimg{display: none;}	
.worksimg-pc{display: block;}	

.worksbox-ue{
	padding: 40px 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.worksimg-pc{
	width: 40%;
}	
.worksmesse{
	width: 60%;
	display: inline-block;
}
	

	
	

	
.works{
	width: 30%;
	min-width: 200px;
	text-align: center;
	margin: 10px 5px;
	border: solid 1px #000000;
}
.jobtit{
	padding: 7px;
	letter-spacing: 0.15em;
}
.jobnai{
	padding: 7px;
	line-height: 130%;
}	

	
.case{
	width: 32%;
	height:auto;
	padding:1.5%;
	margin-bottom: 15px;
}	
	
	
}
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
@media only screen and (min-width: 900px) {
	

	
/*--- form ---*/
form-block{
	width: 90%;
	max-width: 600px;
	}		
	
	


}
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
@media only screen and (min-width: 1000px) {	
	

	
	
	
	
}
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
@media only screen and (min-width: 1100px) {	
	
.wearemesse{
	height: 60vh;
	min-height: 600px;
	background-image: url("img/weare001.png");
	background-size: 35%;
	background-repeat: no-repeat;
	background-position: right bottom;
}	


.works .sm{display: none;}
.works .pc{display: block;}	
	
	
#main01, #main02, #main03,
#main04, #main05, #main06{
    padding-top:20px;
}
		
	
}
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
/*------------------------------*/
@media only screen and (min-width: 1300px) {	
	
	

	
}