@charset "utf-8";
/* CSS Document */
@media screen and (min-width:768px){
	header {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 100;
	}
	header .headerIn {
		width: 100%;
		position: relative;
		height: 95px;
		margin: 0 auto;
		background-color: #FFF;
	}
	header .headerIn .headerRow {
		width: 94%;
		max-width: 1440px;
		position: relative;
		height: 95px;
		margin: 0 auto;
	}
	header .headerIn .logo {
		display: table-cell;
		width: 88px;
		height: auto;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	header .headerIn .logo a {
		display: block;
		width: 100%;
		height: 48px;
		background: left center / auto 100% url("../img/img_lg_01.png") no-repeat;
		font-size: 0;
		color: transparent;
	}
	header .headerIn .nav01 {
		position: absolute;
		right: 0;
		top: 0;
	}
	header .headerIn .nav01 ul {
		display: table;
	}
	header .headerIn .nav01 ul li {
		display: table-cell;
		height: 45px;
		vertical-align: middle;
	}
	header .headerIn .nav01 ul li.blueNav {
		background-color: #0098C4;
	}
	header .headerIn .nav01 ul li.arrowNav a {
		display: block;
		height: 45px;
		line-height: 45px;
		color: #161616;
		font-size: 14px;
		padding: 0 1.2em;
		position: relative;
	}
	header .headerIn .nav01 ul li.arrowNav a::before {
		content: "";
		display: table-cell;
		width: 5px;
		height: 6px;
		border-left: 5px solid #161616;
		border-top: 3px solid transparent;
		border-bottom: 3px solid transparent;
		position: absolute;
		top: 50%;
		left: 3px;
		transform: translateY(-50%);
		box-sizing: border-box;
	}
	header .headerIn .nav01 ul li.blueNav a {
		display: block;
		height: 45px;
		line-height: 45px;
		color: #FFF;
		font-size: 14px;
		padding: 0 1em 0 40px;
		position: relative;
	}
	header .headerIn .nav01 ul li#nav01_shop a::before {
		content: "";
		display: table-cell;
		background: center / auto 100% url("../img/icon_cart_01.svg") no-repeat;
		width: 20px;
		height: 16px;
		position: absolute;
		left: 10px;
		top: 50%;
		transform: translateY(-50%);
	}
	header .headerIn .nav01 ul li#nav01_shop a::after {
		content: "";
		display: table-cell;
		width: 1px;
		height: 20px;
		background-color: #FFF;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	header .headerIn .nav01 ul li#nav01_contact a::before {
		content: "";
		display: table-cell;
		background: center / auto 100% url("../img/icon_mail_01.svg") no-repeat;
		width: 17px;
		height: 13px;
		position: absolute;
		left: 13px;
		top: 50%;
		transform: translateY(-50%);
	}
	header .nav02 {
		width: 100%;
	}
	header .nav02 > ul {
		display: block;
		width: 100%;
		margin: 0 auto;
	}
	header .nav02 .hasMegaMenu {
		background-color: #FFF;
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		overflow-y: visible;
	}
	.megaMenuLabel {
		position: absolute;
		top: 0;
		right: 0;
		transform: translateY(-100%);
		display: table-cell;
		font-size: 15px;
		padding: 0 1em;
		height: 50px;
		line-height: 50px;
		cursor: pointer;
	}
	.active .megaMenuLabel::after {
		content: "";
		height: 3px;
		display: block;
		background-color: #0098c4;
		position: absolute;
		left: 0px;
		right: 0px;
		bottom: 0px;
		width: 100%;
	}
	.megaMenuLabel:hover {
		opacity: 0.8;
	}
	header .searchBox {
		position: absolute;
		height: 50px;
		top: 0;
		transform: translateY(-100%);
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 35px;
	}
	header .searchBox input#headerSearch {
		font-size: 14px;
		line-height: 28px;
		height: 30px;
		padding: 0 1em;
		background-color: #FFF;
		border: 1px solid #cacaca;
	}
	header .searchBox input#search_btn {
		content: "";
		display: table-cell;
		width: 35px;
		height: 30px;
		background-color: #0098c4;
		background-image: url("../img/icon_search_01.svg");
		background-size: 20px auto;
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
		right: 0;
		top: 10px;
	}
	.megaMenu {
		padding: 60px 0;
		display: none;
	}
	.megaMenu > li,
	.megaMenu > ul
	{
		width: 90%;
		max-width: 1100px;
		margin: 0 auto 25px;
		font-size: 0;
	}
	.megaMenu > ul.arrowList.mb-0 {
		margin-bottom: 0;
	}

	.megaMenu .btnHeadline {
	}
	.megaMenu .btnHeadline,
	.megaMenu .btnHeadline a
	{
		display: block;
		font-size: 26px;
		letter-spacing: 0.2em;
		line-height: 1.0;

	}
	.megaMenu .arrowList {
		font-size: 0;
		text-align: left;
		display: block;
		margin-bottom: 30px;
	}
	.megaMenu .arrowList > li {
		display: inline-block;
		width: 31%;
		margin-right: 2%;
		margin-left: 0;
		margin-bottom: 20px;
	}
	.megaMenu .arrowList li a {
		display: block;
		line-height: 1.3;
		padding-left: 23px;
		padding-right: 15px;
		position: relative;
	}
	.megaMenu .arrowList li a::before {
		color: #FFFFFF;
		border-radius: 50px;
		background-color: #0098c4;;
		width: 16px;
		height: 16px;
		top: 2px;
		left: 0px;
		position: absolute;
		content: "";
		text-align: center;
		display: block;
		font-size: 1.2rem;	
	}
	.megaMenu .arrowList li a::after {
		content: "";
		border-top: solid 2px #ffffff;
		border-right: solid 2px #ffffff;
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		width: 4px;
		height: 4px;
		margin: auto;
		top: 7px;
		left: 4px;
		position: absolute;
		text-align: center;
		display: block;
		font-size: 1.2rem;
	}

	.megaMenu .arrowList li:nth-child(3n) {
		margin-right: 0;
	}
	.thumbnailList {
		font-size: 0;
	}
	.thumbnailList li {
		display: inline-block;
		width: 19.0%;
		margin-right: 1%;
		vertical-align: top;
		border-bottom: 1px solid #f1efec;
	}
	.thumbnailList li:nth-child(5n) {
		margin-right: 0;
	}
	.thumbnailList li a {
		display: block;
		padding: 20px 0 20px 45px;
		position: relative;
		height: 90px;
	}
	.thumbnailList li a .text {
		display: block;
		line-height: 1.3;
		position: absolute;
		left: 45px;
		top: 50%;
		transform: translateY(-50%);
		padding-left: 28px;
		font-size: 13px;
	}
	.thumbnailList li a .text::before {
		color: #FFFFFF;
	  border-radius: 50%;
	  background-color: #0098c4;
	  width: 16px;
	  height: 16px;
	  top: 2px;
	  left: 3px;
	  position: absolute;
	  content: "";
	  text-align: center;
	  display: block;
	  font-size: 1.2rem;	
	}
	.thumbnailList li a .text::after {
		content: "";
		border-top: solid 2px #ffffff;
		border-right: solid 2px #ffffff;
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		width: 4px;
		height: 4px;
		margin: auto;
		top: 7px;
		left: 7px;
		position: absolute;
		text-align: center;
		display: block;
		font-size: 1.2rem;
	}
	.thumbnailList li a {
		background-position: 3px center;
		background-size: 40px auto;
		background-repeat: no-repeat;
	}
	.thumbnailList li#delivery_robots a {
		background: 3px center / 40px auto url("../img/nav_thumbnail/delivery_robots.jpg") no-repeat;
	}
	.thumbnailList li#cleaning_robots a {
		background: 3px center / 40px auto url("../img/nav_thumbnail/cleaning_robots.png") no-repeat;
	}
	.thumbnailList li#handy a {
		background: 3px center / 40px auto url("../img/nav_thumbnail/handy.png") no-repeat;
	}
	.thumbnailList li#setup a {
		background: 3px center / 40px auto url("../img/nav_thumbnail/setup.jpg") no-repeat;
	}
	.thumbnailList li#face_recognition a {
		background: 3px center / 40px auto url("../img/nav_thumbnail/face_recognition.jpg") no-repeat;
	}
	.thumbnailList li#esl a {
		background: 3px center / 40px auto url("../img/nav_thumbnail/esl.png") no-repeat;
	}
	.thumbnailList li#datacollector a {
		background: 3px center / 40px auto url("../img/nav_thumbnail/datacollector.jpg") no-repeat;
	}
	.thumbnailList li#printer a {
		background: 3px center / 40px auto url("../img/nav_thumbnail/printer.png") no-repeat;
	}
	.thumbnailList li#board a {
		background: 3px center / 40px auto url("../img/nav_thumbnail/board.jpg") no-repeat;
	}
	.thumbnailList li#o_scanner a {
		background: 3px center / 40px auto url("../img/nav_thumbnail/o_scanner.png") no-repeat;
	}
	.thumbnailList li#covid-19 a {
		background: 6px center / 20px auto url("../img/nav_thumbnail/covid-19.png") no-repeat;
	}
	.thumbnailList li#pc a {
		background: 3px center / 40px auto url("../img/nav_thumbnail/pc.png") no-repeat;
	}
}
@media screen and (max-width:1440px) {
	.thumbnailList li,
	.thumbnailList li:nth-child(5n) {
	  display: inline-block;
	  width: 24.0%;
	  margin-right: 1%;
	  vertical-align: top;
	  border-bottom: 1px solid #f1efec;
	}
	.thumbnailList li:nth-child(4n) {
		margin-right: 0;
	}
}
@media screen and (max-width:1000px) {
	.thumbnailList li,
	.thumbnailList li:nth-child(5n),
	.thumbnailList li:nth-child(4n)	{
	  display: inline-block;
	  width: 32.0%;
	  margin-right: 1%;
	  vertical-align: top;
	  border-bottom: 1px solid #f1efec;
	}
	.thumbnailList li:nth-child(3n) {
		margin-right: 0;
	}
}
@media screen and (min-width:768px){
	.spBtn {
		display: none;	
	}
	.only_sp767 {
		display: none;
	}
}
@media screen and (max-width:767px) {
	header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}
	.spBtn {
		display: table-cell;
		position: absolute;
		right: 0;
		top: 0;
		width: 13vw;
		height: 13vw;
		background-color: #0e3d90;		
	}
	.spBtn .btnIn {
		display: table-cell;
		width: 6vw;
		height: 4vw;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}
	.spBtn .btnIn .border {
		width: 6vw;
		height: 2px;
		background-color: #FFF;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		transition: 0.3s all ease;
	}
	.spBtn .btnIn .border:nth-child(1) {
		top: 0;
		transform: translateX(-50%) translateY(0) rotate(0);
	}
	.spBtn .btnIn .border:nth-child(2) {
		top: 50%;
		transform: translateX(-50%) translateY(-50%) rotate(0);
	}
	.spBtn .btnIn .border:nth-child(3) {
		top: 100%;
		transform: translateX(-50%) translateY(-100%) rotate(0);
	}
	.open .spBtn .btnIn .border:nth-child(1) {
		top: 50%;
		transform: translateX(-50%) translateY(-50%) rotate(315deg);
	}
	.open .spBtn .btnIn .border:nth-child(2) {
		width: 0;
	}
	.open .spBtn .btnIn .border:nth-child(3) {
		top: 50%;
		transform: translateX(-50%) translateY(-50%) rotate(-315deg);
	}
	header .headerIn .logo {
		display: table-cell;
		width: auto;
		height: auto;
		position: absolute;
		left: 4vw;
		top: 3.0vw;
	}
	header .headerIn .logo a {
		display: block;
		width: 15vw;
		height: auto;
		background: left center / auto 100% url("../img/img_lg_01.png") no-repeat;
		font-size: 0;
		color: transparent;
	}
	header .headerIn .logo a::after {
		content: "";
		display: block;
		width: 100%;
		padding-top: 55.75%;
	}
	.nav01 {
		position: absolute;
		right: 13vw;
		top:0;
	}
	.nav01 #nav01_news {
		display: none;
	}
	.nav01 #nav01_repair {
		display: none;
	}
	.nav01 ul {
		display: table;
	}
	.nav01 ul li {
		display: table-cell;
	}
	.nav01 ul li a {
		font-size: 0;
		color: transparent;
		display: block;
		width: 13vw;
		height: 13vw;
		background-color: #0098c4;
		border-right: 1px solid #FFF;
	}
	.nav01 ul li#nav01_shop a {
		background-image: url("../img/icon_cart_01.svg");
		background-repeat: no-repeat;
		background-position: 45% center;
		background-size: 50% auto;
	}
	.nav01 ul li#nav01_contact a {
		background-image: url("../img/icon_mail_01.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 40% auto;
	}
	.nav02 {
		background-color: #FFF;
		width: 100%;
		overflow-y: scroll;
		transition: 0.3s all ease;
	}
	.nav02 > ul {
		padding: 13vw 0;
	}
	.nav02 br {
		display: none;
	}	
	.nav02 .searchBox {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 13vw;
		background-color: #dedede;	
		padding: 3vw 6vw;
		font-size: 0;
	}	
	.nav02 .searchBox input#headerSearch {
		width: calc(100% - 8vw);
		border: 1px solid #cacaca;
		background-color: #FFFFFF;
		letter-spacing: 2px;
		font-size: 3.2vw;
		line-height: calc(7vw - 2px);
		height: 7vw;
		padding: 0 1em;
		box-sizing: border-box;
	}
	.nav02 .searchBox input#search_btn {
		position: absolute;
		top: 3vw;
		right: 6vw;
		display: table-cell;
		width: 8vw;
		height: 7vw;
		background-color: #0098c4;
		background-image: url("../img/icon_search_01.svg");
		background-repeat: no-repeat;
		background-position: center center;
		border-top-right-radius: 2px;
		border-bottom-right-radius: 2px;
		background-size: 60% auto;
		border-top: 1px solid #cacaca;
		border-right: 1px solid #cacaca;
		border-bottom: 1px solid #cacaca;
	}
	.hasChild > span,
	.nav02 a {
		display: block;
		font-size: 3.4vw;
		line-height: 3.2;
		padding: 0 6vw;
		border-bottom: 1px solid #bebebe;		
		position: relative;
	}
	.thumbnailList li,
	.thumbnailList li:nth-child(5n),
	.thumbnailList li:nth-child(4n)	{
	  display: block;
	  width: 100%;
	  margin-right: 0;
	  vertical-align: top;
	  border-bottom: 1px solid #f1efec;
	}
	.thumbnailList li:nth-child(3n) {
		margin-right: 0;
	}
	.child.megaMenu a {
		padding-left: 12vw; 
	}
	.hasChild > span::after,
	.nav02 a::after {
		content: "";
		display: table-cell;
		width: 1.6vw;
		height: 1.6vw;
		position: absolute;
		right: 6vw;
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
		border-top: 1px solid #141414;
		border-right: 1px solid #141414;
		transition: 0.3s all ease;
	}	
	.hasChild > span::after {
		transform: translateY(-50%) rotate(135deg);
	}	
	.hasChild.active > span::after {
		transform: translateY(-50%) rotate(-45deg);
	}
	header::before {
		content: "";
		display: block;
		width: 100%;
		height: 13vw;
		background-color: #FFF;
		position: absolute;
		left: 0;
		top: 0;	
	}
}
footer {
	background-color: #f1f1f1;
	padding-bottom: 90px;
}
footer .ft_map {
	width: 92%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 50px 0 110px;
}
footer .ft_map .flexbox {
	display: table;
	width: 100%;
}
footer .ft_map .ft_map_list {
	display: table-cell;
	width: 33.3%;
}
footer .ft_map .ft_map_list a {
	font-size: 14px;
	line-height: 1.3;
}
footer .ft_map .ft_map_list li {
	margin-bottom: 1.2em;
}
footer .ft_map .ft_map_list > li > ul {
	padding-left: 25px;
}
footer .ft_map .ft_map_list > li > ul > li {
	list-style: disc;
}
footer .ft_map .ft_map_list li.ttl {
}
footer .ft_map .ft_map_list li h2 a {
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
}
footer .ft_logo {
	background-color: #0098c4;
  color: #FFFFFF;
	padding: 50px 0;
}
footer .ft_logo .logo {
	margin-bottom: 30px;
}
footer .ft_logo .logo p {
	text-align: center;
}
footer .ft_logo .logo img {
	width: 100px;
	height: auto;
}
footer .ft_logo .copy p {
	text-align: center;
	font-size: 13px;
	color: #FFF;
}
.gotop {
	position: fixed;
	right: -100px;
	bottom: 100px;
	width: 44px;
	height: 44px;
	background-color: #0098c4;
	border-radius: 22px;
	transition: 0.3s all ease;
	z-index: 999;
}
.scrolled .gotop {
	right: 20px;
	bottom: 100px;
}
.gotop::before {
	content: "";
	display: table-cell;
	width: 8px;
	height: 8px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-30%) rotate(-45deg);
}
#pagetop a::before {
  content: "";
  display: block;
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  transform: rotate(-45deg);
  bottom: 0px;
  margin: auto;
  position: absolute;
  left: 0px;
  right: 0px;
}

#ft_cta {
  position: fixed;
  left: 0px;
  bottom: -150px;
  width: 100%;
  background-color: #eef0f0;
  overflow: hidden;
  z-index: 999;
	padding: 20px 0;
	transition: 0.3s all ease;
}
.scrolled #ft_cta {
	bottom: 0;
}
#ft_cta .container {
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
	display: table;
	position: relative;
}
#ft_cta .container::after {
	content: "";
	display: table-cell;
	width: 101px;
	height: 90px;
	position: absolute;
	right: 0;
	bottom: -20px;
	background: center / 100% auto url("../img/pic_ft_01.png") no-repeat;
	transform: translateX(85%);
	
}
#ft_cta .container .cel {
	display: table-cell;
	height: 50px;
}
#ft_cta .container .cel.cel01 a {
	font-size: 18px;
	color: #FFF;
	line-height: 50px;
	height: 50px;
	text-align: center;
	display: block;
	padding: 0 1em;
	background-color: #0098C4;
	
}
#ft_cta .container .cel.cel02 {
	padding-left: 30px;
	vertical-align: middle;
}
#ft_cta .container .cel.cel02 .telBox {
}
#ft_cta .container .cel.cel02 .telBox a {
	display: block;
}
#ft_cta .container .cel.cel02 .telBox a .text01 {
	font-size: 14px;
	font-weight: 700;
	line-height: 16px;
}
#ft_cta .container .cel.cel02 .telBox a .text02 {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	padding-left: 0.5em;
}
#ft_cta .container .cel.cel02 .telBox a .telNum {
	font-size: 34px;
	letter-spacing: 0;
	font-weight: 800;
	color: #0098C4;
}
#ft_cta .container .cel.cel03 {
	width: 350px;
}
#ft_cta .container .cel.cel03 a {
}
#ft_cta .container .cel.cel03 a .text {
	max-width: 350px;
	font-size: 16px;
	font-weight: 600;
	color: #FFF;
	line-height: 50px;
	height: 50px;
	background-color:#0098C4;
	padding: 0 0.8em 0 2.0em;
	display: block;
	text-align: right;
	position: relative;
}
#ft_cta .container .cel.cel03 a .text::before {
	content: "";
	display: table-cell;
	width: 16px;
	height: 16px;
	background: left center / 100% auto url("../img/icn_email.png") no-repeat;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	
}
@media screen and (max-width:1200px) {
	#ft_cta {
	  padding: 20px 100px 20px 12px;
	}
	#ft_cta .container .cel.cel02 {
	  padding-left: 10px;
		padding-right: 10px;
	  vertical-align: middle;
	}	
	#ft_cta .container .cel.cel01 a {
	  font-size: 14px;
	}	
	#ft_cta .container .cel.cel03 a .text {
	  font-size: 14px;
	}
	#ft_cta .container .cel.cel02 .telBox a .telNum {
	  font-size: 30px;
	  letter-spacing: 0;
	  font-weight: 800;
	  color: #0098C4;
	}	
	footer .ft_map .ft_map_list a {
	  font-size: 12px;
	  line-height: 1.3;
	}
	footer .ft_map .ft_map_list {
	  display: table-cell;
	  width: 33.3%;
		padding-right: 10px
	}	
}
@media screen and (max-width:767px) {
	.ft_map {
		display: none;
	}
	  #ft_cta {
		padding: 3vw 4vw 3vw 4vw;
	  }	
	
	#ft_cta .container .cel.cel03 {
		display: none;
	}	

	#ft_cta .container .cel.cel02 .telBox a .telNum {
	font-size: 5vw;
	}	
	#ft_cta .container .cel.cel02 .telBox a .text01 {
	  font-size: 2.4vw;
	  line-height: 2.4vw;
	}	
	#ft_cta .container .cel.cel02 .telBox a .text02 {
	  font-size: 2.4vw;
	  line-height: 3.0vw;
	}
	#ft_cta .container .cel.cel01 a {
	  font-size: 3.4vw;
	  line-height: 10vw;
	  height: 10vw;
	}	
	#ft_cta .container .cel {
	  display: table-cell;
	  height: 10vw;
		vertical-align: middle;
	}
	#ft_cta .container::after {
	  content: "";
	  display: table-cell;
	  width: 14vw;
	  height: 14vw;
	  position: absolute;
	  right: -4vw;
	  bottom: -3vw;
	  background: center / 100% auto url("../img/pic_ft_01.png") no-repeat;

	  transform: translateX(0);
	}	
	.gotop {
	  position: fixed;
	  right: -100px;
	  bottom: 100px;
	  width: 11vw;
	  height: 11vw;
	  background-color: #0098c4;
	  border-radius: 5.5vw;
	  transition: 0.3s all ease;
	}
	.scrolled .gotop {
	  right: 4vw;
	  bottom: 17vw;
	}	
	.gotop::before {
	  width: 3vw;
	  height: 3vw;
	}
	footer {
	  background-color: #f1f1f1;
	  padding-bottom: 17vw;
	}
	footer .ft_logo .logo img {
	  width: 20vw;
	  height: auto;
	}	
	footer .ft_logo .copy p {
	  font-size: 2.8vw;
	}	
	footer .ft_logo {
	  padding: 6vw 0;
	}
}