/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
/*基本設定（滅多に変更しない）*/
/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
body {
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	animation: bodyFadeIn 3s ease 0s 1 normal;
	-webkit-animation: bodyFadeIn 3s ease 0s 1 normal;
	letter-spacing:1.1px;
	font-size: 16px;
	color:#666666;
  }
  @keyframes bodyFadeIn {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}
@-webkit-keyframes bodyFadeIn {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}


@media screen and (min-width:767px) and ( max-width:980px){

	a {
		color: #ffffff;
		transition: 0.3s;
	  }
	  a.anchor{
		display: block;
		padding-top: 120px;
		margin-top: -120px;
	}
	  a:hover {
		  color: #e4e4e4;
		transition: 0.3s;
	  }
	  ::selection {
		  background: #808080;
		  color: #fff;
	  }
	  img{
		  width: 100%;
	  }
		 
	  .midnone{
		  display:none;
	  }
	  hr{
		  margin: 100px 0;
		  border: .5px solid #fafafa;
	  }
	  hr.line{
		  margin: 5px 0;
		  background-image: url("../img/pc/line.png");
		  height: 10px;
		  background-repeat: repeat-x;
		  background-size: contain;
	  }
	  hr.short{
		padding-top: 0;
		margin-top: -0;
		border: none;
	}
	  
	  h1{
		  font-size: 28px;
		  color: #005AA0;
		  font-weight: bold;
		  text-align: center;
		  margin-bottom: 50px;
		  letter-spacing: 1.5px;
	  }
	  h2{
		  color: #666666;
		  font-size: 16px;
		  text-align: center;
	  }
	  .delay-02{
		  animation-delay: 2s;
	  }
	  .delay-04{
		  animation-delay: 4s;
	  }
	  .box{
		  width: 90%;
		  padding: 5%;
	  }
	  .box65{
		  width: 75%;
		  padding: 5% 12.5%;
	  }
	  .access-box{
		  width: 100%;
		  padding: 5% 0;
		  text-align: center;
	  }
	  .wrap{
		  display: grid;
		  justify-content: space-between;
	  }
	  .bold{
		  font-weight: bold;
	  }
	  .normal{
		font-weight:400 ;
	  }
	  .center{
		  text-align: center;
		  margin: 0 auto;
	  }
	  .right{
		  text-align: right;
	  }
	  .sm-mar{
		  margin: 10px 0;
	  }
	  .mid-mar{
		  margin: 30px 0;
	  }
	  .lar-mar{
		  margin: 100px 0;
	  }
	  
	  /*フェードインの処理*/
	  .fadein {
		  opacity : 0;
		  transform : translate(0, 0px);
		  transition : all 1s;
	  }
	  /* 画面内に入った状態 */
	  .fadein.scrollin {
		  opacity : 1;
		  transform : translate(0, 0);
		  }
		  .scrollin {
			  opacity : 1;
			  transform : translate(0, 0);
			  }
	  
	  /*header周辺*/
	  #header{
		position: fixed;
		z-index: 10;
		  width: 100%;
		  top: 0;
		  background: #ffffff;
		  box-shadow: 0  10px 10px rgba(152, 152, 152, 0.5);
	  }
	  #header .box{
		  padding: 15px 5% 0px 5%;
	  }
	  #header .wrap{
		  grid-template-columns: 70% 30%;
	  }
	  #header p{
		  font-size: 12px;
	  }
	  #header img{
		  width: 210px;
	  }
	  .head-right{
		  text-align: right;
		  display: flex;
		  align-items: flex-end;
		  justify-content: right;
		  margin-right: 30px;
	  }

	  
	  /*TOP周辺*/
	  .top-margin{
		margin-top: 120px;
	  }
	  #top .back{
		  position: relative;
	  }
	  #top .back img{
		  width: 100%;
	  }
	  #top .inner{
		  position: absolute;
		  width: 28%;
		  background:rgba(255, 255, 255, .7);
		  padding: 20px;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  -webkit-transform: translate(-50%, -50%);
		  -ms-transform: translate(-50%, -50%);
		  text-align: center;
	  }
	  #top .inner img{
		  width: 100%;
		  height: auto;
	  }
	  #top .inner p{
		  background: #FFC400;
		  border: 2px solid #000000;
		  border-radius: 5px;
		  color: #000000;
		  font-weight: bold;
		  font-size: 14px;
		  padding: 3px 20px;
		  display: inline-block;
		  margin-bottom: 20px;
	  }
	  #top .middle-area{
		  background: #DBE5F2;
		  padding: 20px 10%;
		  display: grid;
		  grid-template-columns: 23.25% 23.25% 23.25% 23.25%;
		  justify-content: space-between;
	  }
	  #top .middle-area img{
		  width: 100% ;
	  }
	  #top .middle-area img+img{
		  margin:0 1% ;
	  }
	  #top .bottom-area img{
		  width: 100%;
	  }
	  #top .bottom-area .btn-area{
		  grid-template-columns: 30% 30% 30%;
		  margin: 10px 0 30px 0;
	  }
	  .insta_list{
		  display: grid;
		  grid-template-columns: 19% 19% 19% 19% 19%;
		  justify-content: space-between;
		  margin: 3% 0;
	  }
	  .insta_list img{
		  object-fit: cover;
		  width: 100%;
		  margin: 0.5% 0;
	  }
	  
	  /*選ばれる理由*/
	  #cause .wrap{
		  grid-template-columns: 48% 50%;
	  }
	  #cause .title{
		  color:#E37A00 ;
		  font-weight: bold;
		  font-size:24px ;
	  }
	  #cause .text-area+.text-area{
		  margin-top: 20px;
	  }
	  .salutation{
			font-family: 'YuMincho';
		  font-family: 'Yu Mincho';
		  text-align: center;
		  margin-top: 80px;
	  }
	  .salutation img{
		  width: 40%;
		  margin: 30px 0 0 0;
	  }
	  .sal-title{
		  font-size: 28px;
		  margin: 15px 0;
	  }
	  .salutation .name{
		  font-size:24px;
	  }
	  
	  /*会社概要*/
	  #company .wrap{
		  grid-template-columns: 48% 48%;
		  row-gap: 30px;
	  }
	  #company .wrap+.wrap{
		  margin-top: 30px;
	  }
	  #company .wrap img{
		  width: 80%;
		  margin: 0 10%;
	  }
	  #company table{
		  border-collapse: collapse;	
	  }
	  #company td{
		  padding: 5px 0;
		  vertical-align: top;
	  }
	  #company td+td{
		  padding-left: 20px;
	  }
	  #company .text{
		  color: #505050;
		  font-size: 20px;
		  text-align: center;
	  }
	  #company .text2{
		  margin-left: 15px;
		  line-height: 30px;
	  }
	  #company .text2::before{
		  content:"・";
		  margin-left: -15px;
	  }
	  #access p{
		  font-weight: bold;
		  font-size: 20px;
	  }
	  
	  /*資格*/
	  #license{
		  text-align: center;
		  line-height: 30px;
	  }
	  
	  /*採用情報*/
	  #recruit .midashi{
		  background: #00B9EF;
		  display: block;
		  color: #ffffff;
		  padding: 2px 5px;
		  font-weight: bold;
	  }
	  #recruit p span{
		  margin: 20px 0;
		  display: block;
	  }
	  .rec-link{
		  text-align: center;
		  margin: 30px 0;
	  }
	  .rec-link .blue{
		  color: #005AA0;
		  font-weight: bold;
	  }
	  .rec-link img{
		  height: 55px;
		  width: auto;
	  }
	  .rec-btn{
		  margin: 15px 0 30px 0;
	  }
	  #recruit .syuryou{
		  padding: 10px 15px;
		  font-weight: bold;
		  color:#807B7B;
		  border: 2px solid #807B7B;
		  border-radius: 5px;
		  display: inline-block;
	  }
	  
	  /*front-foot*/
	  #front-foot{
		  text-align: center;
	  }
	  #front-foot img{
		  width: 180px;
		  margin: 15px 5px;
	  }
	  #front-foot span img{
		  width: 300px;
	  }
	  
	  /*footer*/
	  #footer{
		  text-align: center;
		  background: #005A9F;
		  padding: 3% 1% 1% 1%;
		  color: #ffffff;
		  font-size: 14px;
	  }
	  #footer ul{
		  padding: 0 5% 5% 5%;
		  text-align: left;
		  display: flex;
		  flex-wrap: wrap;
	  }
	  #footer ul li{
		  display: inline-block;
		  margin-right: 30px;
		  margin-top: 10px;
	  }
	  #footer img{
		  width: 300px;
		  margin: 50px 0;
	  }
	  #footer .copy{
		  font-size:12px;
		  margin-top: 50px;
	  }
	  #footer .company-name{
		  font-weight: bold;
		  font-size: 26px;
		  display: block;
	  }
	  
	  /*SDGs*/
	  #sdgs .title , #service .title , #privacy .title{
		  color:#005A9F;
		  font-weight: bold;
		  font-size: 26px;
		  text-align: center;
		  margin: 30px 0;
	  }
	  #sdgs .top-img{
		  width: 55%;
		  text-align: center;
		  margin: 50px 20%;
	  }
	  #sdgs .block{
		  margin:80px 0;
	  }
	  .sub-title-3 , .sub-title-8 , .sub-title-11, .sub-title-6, .sub-title-14{
		  font-size: 22px;
	  }
	  .sub-title-3{
		  color: #1B973A;
	  }
	  .sub-title-8{
		  color: #970A31;
	  }
	  .sub-title-11{
		  color: #F5A20B;
	  }
	  .sub-title-6{
		  color: #00A6D9;
	  }
	  .sub-title-14{
		  color: #0075BA;
	  }
	  .grad-line-1{
		  border-bottom: 8px solid;
		  border-image: linear-gradient(to right ,#1B973A,#ffffff,#970A31) 1;
		  border-image-slice: 1;
		  margin: 10px 0;
	  }
	  .grad-line-2{
		  border-bottom: 8px solid;
		  border-image: linear-gradient(to right ,#F5A20B,#ffffff,#F5A20B) 1;
		  border-image-slice: 1;
		  margin: 10px 0;
	  }
	  .grad-line-3{
		  border-bottom: 8px solid;
		  border-image: linear-gradient(to right ,#00A6D9,#ffffff,#0075BA) 1;
		  border-image-slice: 1;
		  margin: 10px 0;
	  }
	  #sdgs .sub-midashi{
		  background: #C3C3C3;
		  color: #ffffff;
		  padding: 3px 0;
		  text-align: center;
		  margin: 10px 0;
	  }
	  .wrap1-1{
		  grid-template-columns: 46% 46%;
	  }
	  .wrap1-2{
		  grid-template-columns: 23% 69%;
	  }
	  .subwrap1-1{
		  grid-template-columns: 48% 48%;
	  }
	  #sdgs .bottom-img{
		  text-align: center;
		  margin: 30px 0;
	  }
	  #sdgs .bottom-img img{
		  width: 200px;
		  margin: 5px;
	  }
	  #sdgs .bottom img{
		  margin: 50px 0;
	  }
	  #sdgs .grid{
		display: grid;
		grid-template-columns: 60% 38%;
		justify-content: space-between;
	}
	#sdgs .grid img{
		width: 100%;
	}
	  
	  /*SERVICE*/
	  #service .sub-midashi{
		  text-align: center;
		  background: #9B9B9B;
		  color: #ffffff;
		  padding: 3px 0;
	  }
	  .service-wrap1{
		  grid-template-columns: 49% 49%;
		  margin: 50px 0;
	  }
	  .service-wrap2{
		  grid-template-columns: 24% 24% 24% 24%;
		  margin: 10px 0;
	  }
	  #service .wid50{
		margin: 15px auto;
		display: block;
		text-align: center;
	}
	#service .wid50 img{
		width: 50%;
	}
	  .reno-title{
		  margin:0 0 30px 0 ;
	  }

	  #service .text-blue{
		font-weight: bold;
		color: #005A9F;
		margin: 5px 0;
	}
	  
	  /*Q&A*/
	  .qa-box{
		  border:2px solid #BABABA;
		  margin: 10px 0;
		  border-radius: 6px;
	  }
	  .acd-check , .acd-check2{
		  display: none;
	  }
	  .acd-label , .acd-label2{
		  display: block;
		  margin-bottom: 1px;
		  padding: 40px 80px 40px 130px;
		  position: relative;
		  font-weight: bold;
	  }
	  .acd-label::before , .acd-label2::before{
		  content:"";
		  background-size: 80px;
		  width: 80px;
		  height: 80px;
		  background-repeat: no-repeat;
		  position: absolute;
		  left: 20px;
		  top: 0;
		  bottom: 0;
		  margin: auto;
	  }
	  .acd-label::after , .acd-label2::after{
		  content:"";
		  background-size: 20px;
		  width: 20px;
		  height: 20px;
		  background-repeat: no-repeat;
		  position: absolute;
		  right: 50px;
		  top: 0;
		  bottom: 0;
		  margin: auto;
	  }
	  .acd-label::before{
		  background-image: url("../img/qa/q-icon1.png");
	  }
	  .acd-label2::before{
		  background-image: url("../img/qa/q-icon2.png");
	  }
	  .acd-label::after{
		  background-image: url("../img/qa/open-btn1.png");
	  }
	  .acd-label2::after{
		  background-image: url("../img/qa/open-btn2.png");
	  }
	  .acd-content , .acd-content2{
		  height: 0;
		  opacity: 0;
		  padding: 0 40px 0 40px;
		  transition: .4s;
		  visibility: hidden;
		  position: relative;
		  overflow: hidden;
	  }
	  .acd-check:checked + .acd-label + .acd-content , .acd-check2:checked + .acd-label2 + .acd-content2{
		  height: auto;
		  min-height: 60px;
		  opacity: 1;
		  padding: 20px 40px;
		  margin: 0;
		  visibility: visible;
	  }
	  .acd-check:checked + .acd-label::after , .acd-check2:checked + .acd-label2::after{
		  content:"";
		  background-size: 20px;
		  width: 20px;
		  height: 20px;
		  background-repeat: no-repeat;
		  position: absolute;
		  right: 50px;
		  top: 0;
		  bottom: 0;
		  margin: auto;
	  }
	  .acd-check:checked + .acd-label::after{
		  background-image: url("../img/qa/close-btn1.png");
	  }
	  .acd-check2:checked + .acd-label2::after{
		  background-image: url("../img/qa/close-btn2.png");
	  }
	  .acd-content .content::after , .acd-content2 .content::after{
		  content:"";
		  background-size: 80px;
		  width: 80px;
		  height: 80px;
		  background-repeat: no-repeat;
		  position: absolute;
		  right: 20px;
		  top: 0;
	  }
	  .acd-content .content::after{
		  background-image: url("../img/qa/a-icon1.png");
	  }
	  .acd-content2 .content::after{
		  background-image: url("../img/qa/a-icon2.png");
	  }
	  .acd-content .content , .acd-content2 .content{
		  padding:0px 100px 20px 0px;
	  }	
	  .text-red{
		  color: #FF0000;
	  }
	  .qa-midashi img{
		  width: 65%;
	  }
	  .qa-img{
		  width: 50%;
		  padding: 3% 25%;
	  }
	  .left-icon{
		  padding:40px 00px 40px 80px;
		  position: relative;
		  display: block;
	  }
	  .left-icon::before{
		  content:"";
		  background-size: 80px;
		  width: 80px;
		  height: 80px;
		  background-repeat: no-repeat;
		  position: absolute;
		  left: -20px;
		  top: 0;
		  bottom: 0;
		  margin: auto;
	  }
	  .left-icon::before{
		  background-image: url("../img/qa/a-icon3.png");
	  }
	  .right-icon-futa , .right-icon-mura{
		  padding:40px 80px 40px 0px;
		  position: relative;
		  display: block;
	  }
	  .right-icon-futa::before , .right-icon-mura::before{
		  content:"";
		  background-size: 80px;
		  width: 80px;
		  height: 80px;
		  background-repeat: no-repeat;
		  position: absolute;
		  right: -20px;
		  top: 0;
		  bottom: 0;
		  margin: auto;
	  }
	  .right-icon-futa::before{
		  background-image: url("../img/qa/a-icon1.png");
	  }
	  .right-icon-mura::before{
		  background-image: url("../img/qa/a-icon2.png");
	  }
	  .qa-wrap{
		  display: grid;
		  grid-template-columns: 25% 25% 25%;
		  justify-content: center;
		  text-align: center;
		  margin: 20px 0;
	  }
	  .qa-wrap2{
		  display: grid;
		  grid-template-columns: 48% 48%;
		  justify-content: space-between;
		  text-align: center;
		  margin: 20px 0;
	  }
	  .qa-wrap span{
		  margin: 5px;
		  padding: 3px 10px;
		  border: 2px solid #CAFFFF;
		  color: #1A59A2;
		  font-weight: bold;
	  }
	  .qa-submidashi{
		  color: #45A8E7;
		  border: 3px solid #45A8E7;
		  letter-spacing: 8px;
		  border-radius: 10px;
		  margin: 100px 0 10px 0;
	  }
	  .qa-submidashi-gray{
		  color: #525252;
		  border: 3px solid #BABABA;
		  letter-spacing: 8px;
		  border-radius: 10px;
		  padding: 3px 0;
		  margin: 30px 0 10px 0;
		  display: inline-block;
		  width: 80%;
	  }
	  .qa-line{
		  color: #F15A24;
		  border-bottom: 3px solid #F15A24;
		  text-align: center;
		  margin: 50px 0 20px 0;
	  }
	  .qa-icon-img{
		  width: 80px;
		  display: block;
		  margin: 15px auto;
	  }
	  .qa-point{
		  color: #FF0000;
		  background: #FFEC0B;
		  display: inline-block;
		  padding: 3px 15px;
		  border-radius: 10px;
		  margin: 10px 0;
	  }
	  #qa .text-orange{
		  color: #F15A24;
		  margin:30px 10%;
	  }
	  #qa .bottom-area img{
		  width: 100%;
	  }
	  #qa .bottom-area .btn-area{
		  grid-template-columns: 30% 30% 30%;
		  margin: 10px 0 30px 0;
	  }
	  
	  /*コンタクト*/
	  #contact .title{
		  color: #005A9F;
		  font-weight: bold;
		  font-size: 26px;
		  text-align: center;
		  margin: 30px 0;
	  }
	  .contact-link1 , .contact-link2{
		  padding: 3px 0;
		  width: 60%;
		  margin: 15px 20%;
		  border-radius: 5px;
		  text-align: center;
		  display: block;
	  }
	  .contact-link1{
		  color: #00BAED;
		  border: 1px solid #00BAED;
	  }
	  .contact-link2{
		  color: #005AA0;
		  border: 1px solid #005AA0;
	  }
	  .contact-link1:hover{
		  color: #ffffff;
		  background: #00BAED;
	  }
	  .contact-link2:hover{
		  color: #ffffff;
		  background: #005AA0;
	  }



	  .header-fixed{
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 100000;
		background-color: #ffffff;
		box-sizing: border-box;
	}
	.header-fixed-in{
	}
	/* チェックボックスは非表示（ラベルで操作するため） */
	#header-hamburger{
		display: none;
	}
	
	/* ハンバーガーアイコンの位置を指定（左） */
	.header-hamburger-icon{
		position: absolute;
		top: 25px;
		right: -25px;
		border: 3px solid #005AA0;
		padding: 5px;
		border-radius: 8px;
		height: 33px;
		width: 33px;
		color:#005AA0 ;
	}
	/* ハンバーガーアイコンの三本線をCSSで書く（上下の線） */
	.header-hamburger-icon span{
		display: block;
		position: relative;
		width: 33px;
		height: 22px;
		border-top: solid 4px #005AA0;
		border-bottom: solid 4px #005AA0;
		box-sizing: border-box;
		cursor: pointer;
	}
	/* ハンバーガーアイコンの三本線をCSSで書く（中央の線） */
	.header-hamburger-icon span:before{
		position: absolute;
		content: '';
		width: 100%;
		height: 4px;
		top: 5px;
		background-color: #005AA0;
	}
	.header-hamburger-icon .mid9{
		font-size: 9px !important;
	}	
	/*スライドで表示させるコンテンツ*/
	#header-content{
		z-index: 200000;
		overflow: auto;
		position: fixed;
		bottom: 0;
		left: 0;
		height: calc(100% - 120px);;
		width: 100%;
		box-sizing: border-box;
		transition: .3s;
		background: #FFF;
		text-align: center;
		/* デフォルト非表示（左側の見えないところに位置させる） */
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	#header-content .link1{
		background: #B2DDFF;
		padding:10px 0;
	}
	#header-content .link2{
		background: #B1EDFF;
		padding:10px 0;
	}
	#header-content ul{
		list-style-type: none;
		padding: 0;
	}
	#header-content ul li a{
		color:#005AA0;
		font-weight: bold;
		font-size: 20px;
		padding: 10px 0;
	}
	
	/*チェックが入ったらコンテンツを表示*/
	#header-hamburger:checked ~ #header-content{
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}
	
	/*チェックが入ったらコンテンツ外を暗くする*/
	#header-hamburger:checked ~ #header-close{
		display: block;
		opacity: .7;
	}


	  }