@charset "UTF-8";

/* ベース */

html{
	scroll-behavior:smooth;
}

body{
	font-size:10px;
	margin:0;
	padding:0;
	
}

h1{
	font-size:1.0rem;
}

h1 img{
	width:50%;
	height:auto;
}

h2{
	font-size:2.4rem;
}

p{
	font-size:1.2rem;
	text-align:left;
	margin:0;
	padding:5px;
}

input{
	margin:0;
	padding:0;
}

textarea{
	margin:0;
	padding:0;
}

form{
	width:100%;
	margin:0;
	padding:0;
}

address{
	font-size:1.2rem;
	font-style: normal;
}

li{
	font-size:1.2rem;
}

.mgBt60{
	margin:0 0 60px 0;
}


:root {
	--color-whit:#ffffff;
    --color-titleBg: #007aff;
	--color-itemBg: #a9ddf3;
	--color-itemLightGry: #eeeeee;
	--color-itemGry:#f2f2f2;
	--color-itemDarkGry:#4d4d4d;
	--color-sendBox:#ff9900;
	--color-pink:#ff7bac;
	
}

a{
	color:var(--color-titleBg);
	text-decoration:none;
}

a:hover{
	color:var(--color-titleBg);
	text-decoration:underline;
}




/*ヘッダー*/

.header{
	width:100%;
	
}

.headerIn{
	max-width:1280px;
	background:#fff;
	display:flex;
	justify-content: space-between;
	margin:0px auto;
	padding:20px;
}

.headerLeft{
	with:50%;
}

.headerRight{
	with:50%;
	display:grid;
	grid-template-areas:"navi1 navi2 navi3 navi4 navi5";
	grid-auto-columns: 1fr;
	place-items: center; 
	gap:20px;
}


.header p{
	font-size:1.2rem;
	text-align:center;
	margin:0px;
	padding:5px;
}

.headerImageback{
	width:100%;
	background:#99c4f0;
	margin:0;
	padding:0px;
}

.headerImageback2{
	color:var(--color-whit);
	width:100%;
	background-color:var(--color-titleBg);
	margin:0px;
	padding:20px 0 20px 0;
}

.headerImagebackWorks{
	color:var(--color-whit);
	width:100%;
	background-color:var(--color-titleBg);
	margin:0 0 0px 0;
	padding:20px 0 20px 0;
}


.headerImage{
	max-width:1280px;
	display:flex;
	justify-content: center;
	margin:0px auto 0px auto;
	padding:0;
}

.headerImage2{
	max-width:1280px;
	display:flex;
	justify-content: center;
	margin:0 auto 0 auto;
	padding:0px;
}

.headerImage img{
	width:100%;
	height:auto;
}

.headerImage2 img{
	width:100%;
	height:auto;
}

.hamburger-menu{
	display:none;
}

.breadcrumbListBase{
	width:100%;
	margin:0 0 60px 0;
	background-color:var(--color-itemGry);
	border-top:solid 1px var(--color-itemLightGry);
	border-bottom:solid 1px var(--color-itemLightGry);
	
}

.breadcrumbList{
	font-size:1rem;
	display:flex;
	max-width:1280px;
	justify-content: flex-start;
	margin:0 auto 0px auto;
	padding:5px 10px 5px 10px;
	gap:5px;
}




/*　メイン　*/

.main{
	width:100%;
	
}

.topBaseCatch{
	max-width:1280px;
	background:var(--color-whit);
	display:flex;
	justify-content: space-between;
	margin:0px auto 60px auto;
	padding:0px;
	
}

.topBaseRec{
	max-width:1280px;
	background:var(--color-whit);
	display:flex;
	justify-content: space-between;
	margin:0px auto 60px auto;
	padding:0px;
	
}

.topBaseRec .image02{
	width:100%;
	box-sizing: border-box;
}

.topBaseRec .image02 img{
	width:100%;
	height:auto;
}

.topBaseRec .text02{
	box-sizing: border-box;
	width:100%;
	margin:0;
	padding:0 0 0 30px;
}

.topBaseAbout{
	max-width:1280px;
	background:var(--color-whit);
	display:flex;
	justify-content: space-between;
	margin:0px auto 60px auto;
	padding:0px;
	gap:40px;
}

.topBaseAbout .imageBox{
	display:flex;
	flex-direction: column;
	width:100%;
	
}

.topBaseAbout .imageBox img{
		width:100%;
		height:auto;
	}


.topBaseAbout .imageBox .topTxtLink{
	margin:20px 0 0 20px;
}

.topBaseAbout .image03{
	display:flex;
	width:100%;
	
}

.topBaseAbout .image03 img{
	width:100%;
	height:auto;
	
}

.sample1 {
	width:			100%;
	height:			auto;
	overflow:		hidden;
	margin:			0;
	position:		relative;	/* 相対位置指定 */
}
.sample1 .caption {
	display:grid;
	font-size:		1.6rem;
	font-weight:bold;
	text-align: 		center;
	place-items: center;
	padding-top:		200px;
	color:			#fff;
}
.caption a{
	color:var(--color-whit);
}

.sample1 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.sample1:hover .mask {
	opacity:		1;	/* マスクを表示する */
}



.mainIn{
	max-width:1280px;
	background:#fff;
	display:flex;
	justify-content:center;
	margin:0px auto 60px auto;
	padding:0;
	gap:20px;
}




.mainIn h2{
	text-align:center;
	margin:60px auto 0px auto;
	padding:0px;
}

.mainIn h3{
	text-align:center;
	margin:0px auto 0px auto;
	padding:0px;
}


.topBaseCatch .text01{
    margin: 20px 0px 40px 0px;
}

.topBaseCatch .image01{
	margin: 20px 0px 40px 0px;
}

.topBaseCatch .image01 img{
	width:100%;
	height:auto;
}

.mainIn .recruit{
	grid-area:recruit;
}

.topBaseRec .image02 img{
	width:100%;
	height:auto;
}



.mainIn .works{
	grid-area:works;
}

.mainIn .about{
	margin:0 0 60px 0;
}

.mainIn .image03{
	grid-area:image03;
	margin: 20px 0px 0px 0px;
}

.mainIn .image03 img{
	width:100%;
	height:auto;
}

.mainIn .image04{
    grid-area:image04;
	margin: 20px 0px 0px 0px;
}

.mainIn .image04 img{
	width:100%;
	height:auto;
}



.mainIn h3{
	text-align:center;
	margin:40px auto 0px auto;
	padding:0px;
}

.image01,.image02,.image03{
	box-shadow:20px 20px #1451ff;
	width:100%;
	margin:0px;
	padding:0px;
	line-height:0px;
}




.image03{
	box-shadow:20px 20px #1451ff;
	width:100%;
	margin:0px;
	padding:0px;
	line-height:0px;
}

.mainIn img{
	width:100%;
	height:auto;
	margin:0px;
	padding:0px;
	line-height:0px;
}

.mainInC{
	font-size:1.4rem;
	max-width:1280px;
	margin:0 auto 60px auto;
	background:#fff;
	display:flex;
	flex-direction: column;
	gap:20;
}

.mainInC h3{
	font-size:1.8rem;
	border-bottom:solid 1px #ccc;
	margin:0 0 20px 0;
	padding:0;
}

.mainInC h4{
	font-size:1.8rem;
	font-weight:bold;
	margin:0;
	padding:0;
}

.mainInC .blueline{
	display:block;
	box-sizing: border-box;
	width:30%;
	border-bottom:solid 1px var(--color-titleBg);
	margin-bottom:0 0 30px 0px;
	padding:5px;
}

.mainInC .catch{
	display:flex;
	justify-content: center;
	color:var(--color-itemDarkGry);
	font-size:2.0rem;
	font-weight:bold;
}

.mainInC .titleGryBig{
	text-align:left;
	color:var(--color-itemDarkGry);
	font-size:3.0rem;
	font-weight:900;
	padding:0 10px 0 10px;
}



.text02 a{
	color:#ff9900;
	font-weight:bold;
	text-decoration:none;
}

.table_base{
	display:flex;
	justify-content: space-between;
	margin:0 0 0 0;
	padding:0;
	gap:20px 2px;
}



.tableItemName{
	width:30%;
	margin:1px;
	padding:5px;
	background-color: var(--color-itemBg);
}

.tableItem70{
	box-sizing:border-box;
	width:70%;
	margin:0 0 2px 0;
	padding:10px 20px 10px 5px;
	background-color: var(--color-itemGry);
}

.tableItemBox70{
	box-sizing:border-box;
	width:70%;
	height:100%;
	margin:0 0 2px 0;
	padding:10px 20px 5px 5px;
	background-color: var(--color-itemGry);
}

.greetingBase{
	max-width:1280px;
	display:flex;
	justify-content: space-between;
	margin:0 auto 60px auto;
	padding:0 20px 0 20px;
	gap:20px;
}

.greetingBox{
	width:100%;
	margin:0;
	padding:0;
}

.greetingBox h4{
	font-size:1.4rem;
	margin:20px 0 20px 0;
	padding:0;
}


.greetingBox p{
	font-size:1.2rem;
	margin:0;
	padding:0;
}

.greetingBox .shakun{
	font-size:1.2rem;
	font-weight:bold;
	margin:20px 0 20px 0;
	padding:0;
}

.greetingImage{
	display:grid;
	place-items: center;
	width:100%;
	margin:0;
	padding:0;
}

.greetingImage img{
	width:40%;
	height:auto;
	margin:0;
	padding:0;
}

.aboutBase{
	display:flex;
	justify-content: space-between;
	margin:0 0 60px 0;
	padding:0;
	gap:20px 2px;
}

.aboutBase img{
	width:100%;
	height:auto;
}


.about{
	width:100%;
	margin:0;
	padding:0;
}

.about img{
	width:100%;
	height:auto;
}

.about .entry{
	font-size:1.6rem;
	font-weight:bold;
	margin:0 0 0 10px;
}

.map{
	width:100%;
	margin:0;
	padding:0;
}

.map ul{
	margin:5px;
}

.map li{
	font-size:1.4rem;
	margin:2px;
	padding:2px;
	
}

.map p{
	padding:10px;
}

.license li{
	font-size:1.4rem;
}

.methodBase{
	margin:0 0 60px 0;
	padding:0;
	gap:20px 2px;
}

.methodBase img{
	width:100%;
	height:auto;
}

.methodBase h4{
	color:var(--color-pink);
}

.worksBase{
	max-width:1280px;
	display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
	justify-content: center;
	padding:0;
	gap:20px;
}

.worksItem{
	display:flex;
	place-items: center;
	width:100%;
	justify-content: center;
	margin:0;
	padding:0;
}

.worksItemTxt{
	display:flex;
	width:100%;
	flex-direction: column;
	justify-content: center;
	margin:0;
	padding:0;
}

.worksItem img{
	width:100%;
	height:auto;
}

.worksItem p{
	font-size:1.2rem;
}


/* フォーム */
.formBase{
	width:100%;
	display:flex;
	justify-content:flex-start;
	margin:0 0 0 0;
	padding:5px;
	gap:20px 2px;
	overflow:hidden;
}

.textBoxVeryShort{
	box-sizing:border-box;
	width:25%;
	margin:0 0 0 5px;
	padding:5px;
}


.textBoxShort{
	box-sizing:border-box;
	width:50%;
	margin:0 0 0 5px;
	padding:5px;
}

.textBoxLong{
	box-sizing:border-box;
	width:100%;
	margin:0 0 0 5px;
	padding:5px;
}

.textBoxLongLarge{
	box-sizing:border-box;
	width:100%;
	height:100px;
	margin:0 0 0 5px;
	padding:5px;
}

.sendBoxOut{
	display:flex;
	justify-content: center;
	margin:10px auto;
}

.sendBox{
	width:50%;
	border: 0;
  line-height: 3;
  padding: 0 20px;
	
  font-size: 1.4rem;
  text-align: center;
  color: white;
  border-radius: 10px;
  background-color: var(--color-sendBox);
  
  
}

.returnBox{
	width:50%;
	border: 0;
  line-height: 3;
  padding: 0 20px;
	
  font-size: 1.4rem;
  text-align: center;
  color: white;
  border-radius: 10px;
  background-color: var(--color-itemBg);
  
  
}


.confirm{
	width:96%;
	margin:0 auto;
}


/* フォームここまで　*/

footer{
	background:#eee;
	width:100%;
	margin:0px;
	padding:0px;
	display:flex;
	justify-content: center;
}

.footerIn{
	text-align:center;
	max-width:1280px;
	display:grid;
	grid-template-areas:
     "address footnavi"
	"copy copy";
	grid-template-columns:1fr 1fr;
	justify-content:center;
	gap:20px;
}



.footerIn .footNavi{
    grid-area:footnavi;
}

.footerIn .footNavi{
	with:50%;
	margin:20px 0 0 0;
	padding:5px;
	display:grid;
	grid-template-areas:"navi1 navi2 navi3 navi4 navi5";
	grid-auto-columns: 1fr;
	place-items: center; 
	align-items:flex-start;
	gap:10px;
}

.footerIn .footNavi a{
	font-size:1.0rem;
}

.footerIn .copy01{
    grid-area:copy;
}
.footerIn .address address{
	font-style: normal; 
	margin:20px 0 0 0;	
}
.footerIn .address img{
	width:30%;
	height:auto;
} 

.footerIn .address{
	font-size:1.2rem;
	font-style: normal; 
    grid-area:address;
	text-align:left;
	padding:30px 0 30px 0;
}

.pc_image{
	display:block;
}

.sp_image{
	display:none;
}

/*width869px*/

@media screen and (max-width: 869px){
	
	body{
	margin:0 10px 0 10px;
	padding:0;
}

	.breadcrumbListBase{
	width:100%;
	margin:0 0 20px 0;
	background-color:var(--color-itemGry);
	border-top:solid 1px var(--color-itemLightGry);
	border-bottom:solid 1px var(--color-itemLightGry);
	
}
	
	.headerImage h2{
		font-size:1.6rem;
	}

.breadcrumbList{
	font-size:0.9rem;
	display:flex;
	max-width:1280px;
	justify-content: flex-start;
	margin:0 auto 0px auto;
	padding:5px 10px 5px 10px;
	gap:5px;
}

	
	.mainIn{
		margin:0;
		padding:10px 0 0 0;
	}
	
	.mainIn h2{
	text-align:center;
	margin:0px auto 0px auto;
	padding:0px;
}

.mainIn h3{
	text-align:center;
	margin:0px auto 0px auto;
	padding:0px;
}
	
	
	.topBaseCatch{
	width:100%;
	background:var(--color-whit);
	display:flex;
	box-sizing: border-box;
	flex-direction: column-reverse;
	margin:0px auto 0px auto;
	padding:0 20px 0 20px;
	gap:5px;
}
	.topBaseCatch .image01{
    margin: 0px 0px 20px 0px;
}
	
	.topBaseCatch .text01{
    margin: 0px 0px 20px 0px;
}
	
	.topBaseRec{
	width:100%;
	background:var(--color-whit);
	display:flex;
	box-sizing: border-box;
	flex-direction: column;
	margin:0px auto 0px auto;
	padding:0 20px 0 20px;
	gap:5px;
}
	
	.topBaseRec .image02{
	width:100%;
	box-sizing: border-box;
}

.topBaseRec .image02 img{
	width:100%;
	height:auto;
}

.topBaseRec .text02{
	box-sizing: border-box;
	width:100%;
	margin:0;
	padding:20px 0 0 0;
}
	
	
	
	.headerRight{
		display:none;
	}
	
	.hamburger-menu{
		display:block;
	}
	
	.headerImageback{
	width:100%;
	background:#99c4f0;
	margin:0;
	padding:0;
}

	.topBaseAbout{
	max-width:1280px;
	background:var(--color-whit);
	display:flex;
	flex-direction: column;
	margin:0px auto 60px auto;
	padding:0px;
	gap:40px;
}
	.topBaseAbout .imageBox img{
		width:100%;
		height:auto;
	}
	
	.sample1 .caption {
	display:grid;
	font-size:		1.4rem;
	font-weight:bold;
	text-align: 		center;
	place-items: center;
	padding-top:		140px;
	color:			#fff;
}
.caption a{
	color:var(--color-whit);
}

	.mainInC{
	max-width:100%;
	margin:0 auto 60px auto;
	background:#fff;
	display:flex;
	flex-direction: column;
	gap:20;
}
	
	.mainInC h3{
	font-size:1.4rem;
	border-bottom:solid 1px #ccc;
	margin:0 0 20px 0;
	padding:0;
}
	
	.mainInC .catch{
	display:flex;
	justify-content: center;
	color:var(--color-itemDarkGry);
	font-size:1.4rem;
	font-weight:bold;
	margin:0 0 0 10px;
}
	
	.greetingBase{
	max-width:100%;
	display:flex;
	flex-direction: column-reverse;
	margin:0 auto 0px auto;
	padding:0 20px 0 20px;
	gap:20px;
}

.greetingBox{
	display:grid;
	justify-content: center;
	width:100%;
	margin:0;
	padding:0;
}

	.greetingBox h4{
		
		font-size:1.2rem;
		margin:20px 0 20px 10px;
		padding:0;
	}
	
.greetingBox p{
	font-size:1.2rem;
	margin:0;
	padding:10px;
}

	.greetingBox .shakun{
	font-size:1.0rem;
	font-weight:bold;
	margin:20px 0 20px 10px;
	padding:0;
}
	
.greetingImage{
	display:grid;
	place-items: center;
	width:100%;
	margin:0;
	padding:0;
}

.greetingImage img{
	width:40%;
	height:auto;
	margin:0;
	padding:0;
}

	
	.aboutBase{
	display:flex;
	flex-direction: column;
	margin:0 0 20px 0;
	padding:0;
	gap:0px 2px;
}
	.about .entry{
	font-size:1.1rem;
	font-weight:bold;
	margin:0 0 0 10px;
}
	
	.map ul{
	margin:10px 10px 30px 0px;
}

.map li{
	font-size:1.2rem;
	margin:2px;
	padding:2px;
	
}

.map p{
	font-size:1.2rem;
	margin:0 0 0 10px;
	padding:10px;
}
	
	.license li{
		font-size:1.2rem;
	}

.mainInC h4{
	font-size:1.2rem;
	font-weight:bold;
	margin:0 0 0 10px;
	padding:0;
}

.mainInC .blueline{
	display:block;
	box-sizing: border-box;
	width:60%;
	border-bottom:solid 1px var(--color-titleBg);
	margin-bottom:0 0 30px 0px;
	padding:5px;
}
	
	.table_base{
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	margin:0 0 0 0;
	padding:0;
	gap:0px 2px;
}
	.tableItemName{
	box-sizing:border-box;
	font-size:1.2rem;
	width:100%;
	margin:1px;
	padding:5px;
	background-color: var(--color-itemBg);
}

.tableItem70{
	font-size:1.2rem;
	box-sizing:border-box;
	width:100%;
	margin:0 0 2px 0;
	padding:10px 0px 10px 5px;
	background-color: var(--color-itemGry);
}

.tableItemBox70{
	box-sizing:border-box;
	width:100%;
	height:100%;
	margin:0 0 2px 0;
	padding:10px 20px 5px 5px;
	background-color: var(--color-itemGry);
}
	
	/* フォーム */
.formBase{
	width:100%;
	box-sizing: border-box;
	display:flex;
	justify-content:flex-start;
	margin:0;
	padding:5px;
	gap:20px 2px;
	overflow:hidden;
}

.textBoxVeryShort{
	box-sizing:border-box;
	width:25%;
	margin:0 0 0 5px;
	padding:5px;
}


.textBoxShort{
	box-sizing:border-box;
	width:50%;
	margin:0 0 0 5px;
	padding:5px;
}

.textBoxLong{
	box-sizing:border-box;
	width:96%;
	margin:0 0 0 5px;
	padding:5px;
}

.textBoxLongLarge{
	box-sizing:border-box;
	width:100%;
	height:100px;
	margin:0 0 0 5px;
	padding:5px;
}

.sendBoxOut{
	display:flex;
	justify-content: center;
	margin:10px auto;
}

.sendBox{
	width:50%;
	border: 0;
  line-height: 3;
  padding: 0 20px;
	
  font-size: 1.2rem;
  text-align: center;
  color: white;
  border-radius: 10px;
  background-color: var(--color-sendBox);
  
  
}

.returnBox{
	width:50%;
	border: 0;
  line-height: 3;
  padding: 0 20px;
	
  font-size: 1.2rem;
  text-align: center;
  color: white;
  border-radius: 10px;
  background-color: var(--color-itemBg);
  
  
}


.confirm{
	width:96%;
	margin:0 auto;
}


/* フォームここまで　*/

	.footerIn .footNavi{
	display:none;
}
	
	.footerIn{
	font-size:1.2rem;
	text-align:center;
	max-width:1280px;
	display:grid;
	grid-template-areas:
     "address address"
	"copy copy";
	grid-template-columns:1fr 1fr;
	justify-content:center;
	gap:20px;
	padding:0 20px 0 20px;
}
	
	.pc_image{
	display:none;
}

.sp_image{
	display:block;
}

	clamp(1.2rem, 1.127rem + 0.36vw, 1.4rem)
	
}