﻿@charset "utf-8";
/* CSS Document */
@media screen and (min-width:1051px){
	header {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 100;
	}
	header .headerIn {
		width: 100%;
		position: relative;
		height: 90px;
		margin: 0 auto;
		background-color: #32a9c6;
	}
	.page-robot header .headerIn {
		width: 100%;
		position: relative;
		height: 90px;
		margin: 0 auto;
		background-color: transparent;
	}
	.page-robot.post header .headerIn,
	.page-robot.post.page-robot-topics header .headerIn,
	.page-robot.page-robot-topics header .headerIn
	{
		width: 100%;
		position: relative;
		height: 90px;
		margin: 0 auto;
		background-color: #32a9c6;
	}
	
	header .headerIn .logo {
		display: table-cell;
		width: 88px;
		height: auto;
		position: absolute;
		left: 25px;
		top: 50%;
		transform: translateY(-50%);
	}
	header .headerIn .logo a {
		display: block;
		width: 100%;
		height: 48px;
		background: left center / auto 100% url("../img/logo_white.png") no-repeat;
		font-size: 0;
		color: transparent;
	}
	.megaMenuWrap {
		position: absolute;
		top: 90px;
		right: 0;
		width: 100vw;
	}
	.megaMenuWrap > ul {
	}
	.megaMenuWrap > ul > li {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
	}
	.megaMenuWrap > ul > li.noChild {
		padding: 0 5px;
	}
	
	.megaMenuWrap > ul > li.noChild,
	.megaMenuWrap > ul > li.hasMegaMenu > span
	{
		position: absolute;
		top: 0;
		right: 0;
		transform: translateY(-100%);
		display: block;
		word-break: keep-all;
	}
	.megaMenuWrap > ul > li.noChild.btnColor {
		transform: translateY(-150%);
	}
	.megaMenuWrap > ul > li.noChild a:hover {
		opacity: 1.0;
	}

	.megaMenuWrap > ul > li.noChild a,
	.megaMenuWrap > ul > li.hasMegaMenu > span {
		display: block;
		font-size: 14px;
		color: #FFF;
		line-height: 90px;
		height: 90px;
		padding: 0 12px;
		cursor: pointer;
	}
	.megaMenuWrap > ul > li.noChild a:hover::after,
	.megaMenuWrap > ul > li.hasMegaMenu > span:hover::after {
		content: "";
		display: block;
		width: calc(100% - 24px);
		height: 4px;
		background-color: #32a9c6;
		position: absolute;
		bottom: 25px;
		left: 50%;
		transform: translateX(-50%);
	}
	.megaMenuWrap > ul > li.noChild.btnColor a:hover::after {
		display: none;
	}

	.megaMenuWrap > ul > li.hasMegaMenu.active > span::after {
		content: "";
		display: block;
		width: calc(100% - 24px);
		height: 4px;
		background-color: rgba(255,255,255,0.40);
		position: absolute;
		bottom: 25px;
		left: 50%;
		transform: translateX(-50%);
	}
	.megaMenu {
		width: 100vw;
		height: auto;
		background-color: #FFF;
		padding-top: 40px;
		padding-bottom: 40px;
		text-align: right;
		display: none;
	}
	.megaMenu .megaMenuIn {
		display: block;
		width: 92%;
		max-width: 1200px;
		margin: 0 auto;
		text-align: center;
	}
	.megaMenu .megaMenuIn > li {
		display: inline-block;
		vertical-align: top;
	}
	.megaMenu .megaMenuIn > li > .text {
		font-size: 22px;
		color: #32a9c6;
		display: block;
		width: 180px;
		text-align: left;
	}
	.megaMenu .megaMenuIn > ul {
		display: inline-block;
		vertical-align: top;
	}
	.megaMenu .megaMenuIn > ul > li {
		font-size: 16px;
		margin-bottom: 18px;
	}
	.megaMenu .megaMenuIn > ul > li:nth-last-child(1) {
		margin-bottom: 0;
	}
	.megaMenu .megaMenuIn > ul > li a {
		display: block;
		padding-left: 15px;
		position: relative;
		font-size: 16px;
	}
	.megaMenu .megaMenuIn > ul > li a::before {
		content: "";
		display: table-cell;
		width: 7px;
		height: 12px;
		box-sizing: border-box;
		border-left: 7px solid #32a9c6;
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.megaMenu .arrowList01 {
		margin-right: 25px;
	}	
	#megaMenuCompany .megaMenu .arrowList {
		width: 410px;
		font-size: 0;
		text-align: left;
	}
	#megaMenuCompany .megaMenu .arrowList li {
		display: inline-block;
		width: 200px;
	}
	#megaMenuCompany .megaMenu .arrowList li:nth-child(3),
	#megaMenuCompany .megaMenu .arrowList li:nth-child(4)
	{
		display: block;
	}
	.megaMenuWrap > ul > li.noChild.btnColor a {
		display: block;
		width: 150px;
		text-align: center;
		line-height: 46px;
		height: 46px;
		border-radius: 23px;
		padding: 0;
		font-size: 14px;
	}
	
	.megaMenuWrap > ul > li.btnOrange.btnColor.noChild a {
		background-color: #ee8100;
	}
	.megaMenuWrap > ul > li.btnBlue.btnColor.noChild a {
		background-color: #155398;
	}
	
	@media screen and (max-width:1200px) {
		  .megaMenuWrap > ul > li.noChild a, .megaMenuWrap > ul > li.hasMegaMenu > span {
			font-size: 13px;
			padding: 0 4px;
		  }
		 .megaMenuWrap > ul > li.noChild.btnColor a {
			width: 140px;
			font-size: 13px;
		  }		
	}
	.onlySpList,
	.spBtn {
		display: none;	
	}
	.only_pc1051 {
		display: block;
	}
}
@media screen and (max-width:1050px) {
	.only_pc1051 {
		display: none;
	}
	header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
	}
	.headerRow {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 90px;
		background-color:rgba(50,169,198,1.00);
		transition: 0.3s all ease;
	}
	.page-robot  .headerRow {
		background-color:rgba(50,169,198,0.00);
	}
	.page-robot.post .headerRow,
	.page-robot.page-robot-topics .headerRow,	
	.open .headerRow {
		background-color:rgba(50,169,198,1.00);
	}
	.headerRow .logo {
		position: absolute;
		left: 20px;
		top: 50%;
		transform: translateY(-50%);
	}
	.headerRow .logo h1 {
		font-size: 0;
	}
	.headerRow .logo h1 a {
		background: left center / auto 100% url("../img/logo_white.png") no-repeat;
		position: relative;
		width: 80px;
		height: auto;
		display: block;
		font-size: 0;
		color: transparent;
	}
	.headerRow .logo h1 a::before {
		content: "";
		display: block;
		padding-top: 61%;
	}
	.spBtn {
		display: table-cell;
		position: absolute;
		right: 20px;
		top: 20px;
		display: table-cell;
		width: 50px;
		height: 50px;
	}
	.spBtn .btnIn {
		display: table-cell;
		width: 40px;
		height: 25px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}
	.spBtn .btnIn .border {
		display: table-cell;
		width: 100%;
		height: 3px;
		background-color: #FFF;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%) rotate(0);
		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: auto;
		bottom: 0;
		transform: translateX(-50%) translateY(0) rotate(0);
	}
	.open .spBtn .btnIn .border:nth-child(1) {
		top: 50%;
		transform: translateX(-50%) translateY(-50%) rotate(405deg);
	}
	.open .spBtn .btnIn .border:nth-child(2) {
		top: 50%;
		width: 0;
		transform: translateX(-50%) translateY(-50%) rotate(0);
	}
	.open .spBtn .btnIn .border:nth-child(3) {
		top: 50%;
		bottom: auto;
		transform: translateX(-50%) translateY(-50%) rotate(-405deg);
	}
	.megaMenuWrap {
		position: absolute;
		top: 90px;
		right: -100vw;
		display: block;
		width: 100%;
		overflow-y: scroll;
		padding: 30px 30px 150px;
		background-color: #daf0f6;
		transition: 0.3s all ease;
	}
	header.open .megaMenuWrap {
		right: 0;
	}
	.megaMenu {
		display: none;
	}
	.noChild,
	.megaMenu li,
	.megaMenu ul:has(+ ul)  {
		border-bottom: 1px solid #32a9c6;
	}
	.megaMenu li:nth-last-child(1) {
		border-bottom: none;
	}	
	.noChild a,
	.hasChild a {
		display: block;
		font-size: 16px;
		line-height: 3.2;
		height: 3.2em;
		padding: 0 60px 0 0.8em;
		position: relative;
	}
	.hasChild a {
		padding-left: 1.6em;
		background-color: #FFF;
	}
	.noChild a::after,
	.hasChild a::after {
		content: "";
		display: table-cell;
		background: center / 100% auto url("../img/robot_header_icn_arrow.png") no-repeat;
		width: 25px;
		height: 25px;
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
	}
	.hasChild {
		border-bottom: none;
	}
	.hasChild .child.megaMenu {
		border-bottom: 1px solid #32a9c6;	
	}
	.megaMenu .btnHeadline {
		display: none;
	}
	.megaMenuLabel {
		display: block;
		font-size: 16px;
		line-height: 3.2;
		height: 3.2em;
		padding: 0 60px 0 0.8em;
		position: relative;
		cursor: pointer;
	}
	.megaMenuLabel:has(+ ul) {
		border-bottom: 1px solid #32a9c6;	
	}
	.megaMenuLabel .icns {
		display: table-cell;
		width: 25px;
		height: 25px;
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
	}
	.megaMenuLabel .icns .border {
		transform-origin: 50%;
		width: 100%;
		height: 3px;
		background-color: #32a9c6;
		position: absolute;
		top: 50%;
		left: 50%;
		transition: 0.3s all ease;
	}
	.megaMenuLabel .icns .border:nth-child(1) {
		transform: translateX(-50%) translateY(-50%) rotate(0);
	}
	.megaMenuLabel .icns .border:nth-child(2) {
		transform: translateX(-50%) translateY(-50%) rotate(90deg);
	}
	.active .megaMenuLabel .icns .border:nth-child(1) {
		transform: translateX(-50%) translateY(-50%) rotate(0);
	}
	.active .megaMenuLabel .icns .border:nth-child(2) {
		transform: translateX(-50%) translateY(-50%) rotate(360deg);
	}
	.onlySpList {
		text-align: center;
		font-size: 0;
	}	
	.onlySpList01 {
		padding-top: 60px;
	}
	.onlySpList li {
		display: inline-block;
		width: 47.9%;
		margin-right: 4%;
		margin-bottom: 3%;
		box-sizing: border-box;
	}
	.onlySpList li:nth-child(2n),
	.onlySpList li:nth-last-child(1)
	{
		margin-right: 0;
	}
	.onlySpList li a {
		font-size: 16px;
		display: block;
		background-color: #1089a6;
		text-align: center;
		border-radius: 2em;
	}
	.onlySpList li a .text {
		line-height: 4em;
		color: #FFF;
	}
	.onlySpList li.btnBlank a {
		background-color: #aceeff;
	}
	.onlySpList li.btnBlank a .text {
		padding-left: 30px;
		position: relative;
		color: #00566b;
	}
	.onlySpList li.btnBlank a .text::before {
		content: "";
		display: table-cell;
		background: left center / auto 100% url("../img/robot_footer_icn_cart.png") no-repeat;
		width: 18px;
		height: 18px;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	.onlySpList li.btnOrange a {
		background-color: #ee8100;
	}
	.onlySpList li.btnBlue a {
		background-color: #155398;
	}
	.onlySpList02 li a {
		font-size: 18px;
		font-weight: 700;
	}	
	.onlySpList02 li a .text {
		font-size: 18px;
	}
}
@media screen and (max-width: 767px) {
  .headerRow {
    height: 12vw;
  }	
  .headerRow .logo {
    left: 4vw;
  }
  .headerRow .logo h1 a {
    width: 12vw;
  }
	.spBtn {
		right: 4vw;
		top: 6vw;
		width: 5.3vw;
		height: 5.3vw;
		transform: translateY(-50%);
	}
	.spBtn .btnIn {
		width: 5.3vw;
		height: 5vw;
	}
	.spBtn .btnIn .border {
		width: 100%;
		height: 2px;
	}
	.megaMenuWrap {
		top: 12vw;
		padding: 4vw 4vw 20vw;
	}	
  .noChild a, .hasChild a {
    font-size: 3.8vw;
    padding: 0 11vw 0 0.8em;
  }
	.hasChild a {
		padding-left: 2em;
	}
  .noChild a::after, .hasChild a::after {
    width: 5vw;
    height: 5vw;
    right: 4vw;
  }	
 .megaMenuLabel {
    font-size: 3.8vw;
    padding: 0 11vw 0 0.8em;
  }	
  .megaMenuLabel .icns {
    width: 4vw;
    height: 4vw;
    right: 4vw;
  }	
  .megaMenuLabel .icns .border {
    height: 0.4vw;
  }	
 .onlySpList01 {
    padding-top: 6vw;
	 margin-bottom: 4vw;
  }	
  .onlySpList li a {
    font-size: 3.5vw;
	  line-height: 2.0;
  }	
  .onlySpList li.btnBlank a .text {
    padding-left: 4vw;
  }	
  .onlySpList li.btnBlank a .text::before {
    width: 3.4vw;
    height: 3.4vw;
  }	
	.onlySpList02 li a {
		border-radius: 8vw;
	}	
  .onlySpList02 li a .text {
    font-size: 4.0vw;
  }	
}




header {
	z-index: 999;
}
.contWrap {
	position: relative;
	z-index: 1;
	min-height: 100vh;
}
@media screen and (max-width:1440px) {
}
@media screen and (max-width:1000px) {
}
@media screen and (min-width:768px){
	.only_sp767 {
		display: none;
	}
}
@media screen and (max-width:767px) {
	
}

