@charset "utf-8";
/*=============================================================
 header
=============================================================*/
#header{
  background-color:rgba(255, 255, 255, 0.8);
	width:100%;
	position:fixed;
	top:0;
	left:0;
	z-index: 21;
	transition: background-color 0.5s ease; 
	box-sizing: border-box;
  border-bottom: 1px solid #E8E8E8;
}
#header a{
	display: block;
	line-height: 150%;
}
#header #hdr-logo a{transition: all .3s;}
#header #hdr-logo a:hover{opacity: .6;}
/*#top #header{
	background-color:rgba(255, 255, 255, 0);
	box-shadow: 0px 1px 3px 0px rgba(23, 37, 76, 0.0);
	box-shadow:none;
}
#top #header.scrolled {
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0px 1px 3px 0px rgba(23, 37, 76, 0.10);
}
#top #header.hover-effect::before,
#top #header.scrolled::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}
#top #header.hover-effect::before{opacity: 1;}*/

/* hdr-logo
-------------------------------------------------------------*/
#hdr-logo{
	position: absolute;
	top: 0;
	width: 160px;
	z-index: 2;
}

/* globalNavSet
-------------------------------------------------------------*/
#globalNavSet{position:relative;}
#globalNavSet>dt{display:none;}

/* delete JS Style */
@media only screen and (min-width:1080px){
#container{margin-top:0 !important;}
}
/* boxGNavBg */
.boxGNavBg{
	background:rgba(0,0,0,.5);
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:20;
	visibility:hidden;
	opacity:0;
	transition:.2s;
}
html.gNavOpen .boxGNavBg{
	visibility: visible;
	opacity: 1;
}

/* globalNav
-------------------------------------------------------------*/
#globalNav{width:100%;}
#globalNav>li{
	box-sizing:border-box;
	margin:0;
	position:relative;
}
#globalNav>li>a{
	font-style: normal;
	box-sizing:border-box;
	position:relative;
	white-space: nowrap;
}	


/*#globalNav>li:last-child{padding-right:4px;}*/



/* hdr-menu
-------------------------------------------------------------*/
#hdr-menu a{
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	color: var(--textColorBlack);
	position: relative;
}
#hdr-menu [class^="link-arw"][target="_blank"]{display: inline-block;}
#hdr-menu [class^="link-arw"][target="_blank"]::after{
	content: '';
	background: url("../img/hdr-icon-blank-black.svg") no-repeat center;
  background-size: cover;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	width: 11px;
	height: 11px;
	margin-top: -1px;
}
#hdr-menu [class^="link-arw"][target="_blank"]:hover::after{
	background: url("../img/hdr-icon-blank-blue.svg") no-repeat center;
  background-size: cover;
}


/* -----------------------------------------------------------
　PC Only 1024px～
-------------------------------------------------------------*/
@media only screen and (min-width:1023.01px){
/*=============================================================
 header
=============================================================*/
#header{
	height: 108px;
	padding: 28px 0 20px;
}

/* hdr-col
-------------------------------------------------------------*/	
#header .hdr-col{
	display: flex;
	justify-content: space-between;
	/*max-width: 1300px;*/
	position: relative;
}
#header .contentsInner.hdr-col{
	max-width: calc(1280px - 6%);
  padding: 0 3%;
}
#header .hdr-col nav{
	/*max-width: 994px;*/
	width: 100%;
}
  
/* underline
-------------------------------------------------------------*/
#header #globalNav>li>a{
	display: inline-block;
	text-decoration:none;
	background-image: linear-gradient(90deg, var(--primaryColor), var(--primaryColor));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0 1px;
	transition: background-size 0.3s;
	position: relative;
	padding: 0 0 2px 0;
  line-height: 180%;
  font-weight: 600;
}
#header #globalNav>li>a:hover,
#header #globalNav>li.act>a,
#header #globalNav>li>a.act{
	color: var(--primaryColor);
	/*background-size: 100% 1px;*/
	text-decoration: none;
}

#globalNav .sp-dsp-block{display:none;}
#globalNav .sp-dsp-none{display:block;}

	
#globalNav{
	display:flex;
	justify-content: flex-end;
	padding-top: 35px;
}
#globalNav>li{text-align:center;}
#globalNav>li>a{
	color: var(--textColorBlack);
	padding-right: 24px!important;
}
#globalNav>li>a.noArw{padding-right: 0!important;}	
#globalNav>li>a:not(.noArw)::after{
	content: '';
	background: url("../img/hdr-drop-arw.svg") no-repeat;
	background-size: 16px 12px;
	width: 16px;
	height: 12px;
	position: absolute;
	top: calc((100% - 10px) / 2);
	right: 0;
	transition: all .1s;
}
#globalNav>li>a:hover:not(.noArw)::after{
	background: url("../img/hdr-drop-arw-blu.svg") no-repeat;
}
#globalNav>li.act>a::after,
#globalNav>li>a.act::after{
	transform: rotate(-180deg);
	transform-origin: center;
	background: url("../img/hdr-drop-arw-blu.svg") no-repeat;
}
	
/* drop
-------------------------------------------------------------*/
/* drop */
#globalNav .drop{
  display:block !important;
  box-sizing:border-box;
  width:100%;
  transition:.25s ease-out;
  position:fixed;
  left:0;
  z-index:22;
  background: #fff;
}
	#globalNav .drop.open{
		visibility:visible;
		opacity:1;
		margin-top: 15px;
    padding: 20px 7% 50px 7%;
  }
	.hdrShrink #globalNav .drop.open{
		margin-top: 20px;
	}
	#globalNav .drop>*{
		display:none;
		text-align: left;
	}
	#globalNav .drop.open>*{display:block;}
	#globalNav .cat-ttl{
    border-right: 1px solid #e8e8e8;
  }
  #globalNav .cat-ttl [class^="link-arw"]{
		display: inline-block;
		font-size: 1.8rem;
    font-size: 1.8rem;
		font-style: normal;
		font-weight: 500;
		line-height: 180%;
    padding-right: 10px;
	}
	#globalNav .cat-ttl [class^="link-arw"] span{
    display: inline-block;
    position: relative;
    padding-right: 20px;
  }
	#globalNav .cat-ttl [class^="link-arw"] span:after{
    content: '';
    position: absolute;
    background: url("/wx-mobility-lab/shared/img/arw-icon-blu.svg") right no-repeat;
    width: 16px;
    height: 12px;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
  }
  
  
	#globalNav .gb-col{
		display: flex;
		flex-wrap: nowrap;
		font-size: 1.5rem;
		line-height: 21px;
		column-gap: 32px;
/*		margin-top: 36px;*/
	}
	#globalNav .gb-col>ul,
	#globalNav .gb-col>div{
		/*width: calc((100% - 96px) / 5);*/
		position: relative;
		text-align: left;
		padding: 0;
		box-sizing: border-box;
	}
	#globalNav .gb-col>div:first-child{
		margin-top: 0;
		/*width: calc((100% - 32px) * 2 / 5);*/
	}
	#globalNav .gb-col>div:last-child{
		margin-top: 0;
		/*width: calc((100% - 32px) * 3 / 5);*/
	}
	#globalNav .gb-col .gb-col-2>ul{
		/*width: calc((100% - 32px) / 2);*/
    width: 100%;
    display: flex;
    gap : 32px;
    
    
	}
	#globalNav .gb-col .gb-col-2>ul li{
		width: calc((100% - 32px) / 3);
	}
/*	#globalNav .gb-col .gb-col-3{
		display: flex!important;
		margin-top: 0!important;
	}
	#globalNav .gb-col .gb-col-3>li{
		width: calc((100% - 64px) / 3);
		margin-top: 0!important;
	}
	#globalNav .gb-col .gb-col-3>li ul li + li{margin-top: 32px;}*/
	
  /* hdr-link-arw-s */
	#globalNav .drop ul .hdr-link-arw-s{
		display: inline;
		position: relative;
		margin-right: 20px;
	}
	#globalNav .drop ul .hdr-link-arw-s::before{
		content:"";
		width:6px;
		height:6px;
		border-bottom:2px solid var(--primaryColor);
		border-right:2px solid var(--primaryColor);
		position:absolute;
		right: -8px;
		bottom: 0;
		transform: rotate(-45deg) translateX(100%);
	}

	#globalNav .drop ul li a{
		color: var(--textColorBlack);
		display:inline-block;
		position:relative;
		transition: all .3s;
		opacity: 1;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 200%;
	}
	#globalNav .drop ul li a:hover{
		text-decoration: none;
		opacity: .7;
	}	
	/*#globalNav .drop ul li + li{margin-top: 18px;}	*/

  #globalNav .drop .megaInner{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0px;
    gap: 32px;  
  }
  #globalNav .drop .megaInner #gb-innovation ul.m3rd{
    display: flex;
    flex-wrap: nowrap;
  }
  #globalNav .drop .megaInner #gb-innovation ul.m3rd li{
    font-style: normal;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 200%;
  }
  #globalNav .drop .megaInner .cat-ttl{
    width: 44%;
  }
  #globalNav .drop .megaInner .cat-ttl a[class^="link-arw"]::after {
    content: none;
  }
  #globalNav .drop .megaInner ul.m3rd li a img{
    border-radius: 8px;
  }

/* hdr-menu
-------------------------------------------------------------*/
#hdr-menu{
	display: flex;
	column-gap: 40px;
	align-items: center;	
	position: absolute;
	top: 0;
	right: 0;
}
#hdr-menu ul{
	display: flex;
	column-gap: 20px;
	align-items: center;
}
#hdr-menu a{
	display: inline-block;
	text-decoration:none;
	/*background-image: linear-gradient(90deg, var(--primaryColor), var(--primaryColor));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0 1px;*/
	transition: background-size 0.3s;
	padding: 0 0 2px 0;
}
#hdr-menu a.link-arw{padding-right: 13px;}

#hdr-menu a:hover{
	color: var(--primaryColor);
	/*background-size: 100% 1px;*/
	text-decoration: none;
}
#hdr-menu a:hover img{
  opacity: 0.6;
  transition:all 0.3s ease-out;
} 


/* floating-menu
-------------------------------------------------------------*/
#floating-menu {
  display: none;
}

	
/* header shrink
-------------------------------------------------------------*/
#header.setShrink,
.setShrink #hdr-logo,
.setShrink #globalNavSet,
.setShrink #globalNav,
.setShrink #hdr-menu{transition:all 0.2s ease-out;}

.hdrShrink #header.setShrink{
	/*height: auto;*/
	/*padding:20px 0 20px;*/
  /*padding: 0;*/
  margin-top: -108px;
}
.hdrShrink.hdrShow #header.setShrink{
  margin-top: 0px;
}
/*.hdrShrink .setShrink #hdr-logo{top: -4px;}*/

.setShrink #hdr-logo img{
	/*max-width: 100%;*/
	width: 100%;
  transition:all 0.2s ease-out;
}
.setShrink #hdr-logo img{
  /*max-width:none;*/
}
.hdrShrink .setShrink #hdr-logo{
	/*width:176px;*/
  height: auto;
	top:50%;
	transform:translate(0,-50%);
}
.hdrShrink .setShrink #hdr-logo img{
  /*transform: scale(0.666);*/
  transition:all 0.2s ease-out;
}
/*.hdrShrink .setShrink #globalNavSet{
	margin-left:60px;
}*/
/*.hdrShrink .setShrink #globalNav{
	padding-top:0;
}*/
/*
.hdrShrink .setShrink #hdr-menu{
	visibility:hidden;
	opacity:0;
	transform:translate(0, -30px);
}
*/
}
@media only screen and (min-width: 1023px) {
	#globalNav{column-gap: 32px;}
	#hdr-menu a{font-size: 1.2rem;}
	#globalNav>li>a{font-size: 1.4rem;}
}

/* 1023.01px～1259px */
/*@media only screen and (min-width: 1023.01px) and (max-width: 1259px) {
	#globalNav{column-gap: calc(18px + ((1vw - 10.23px) * 2.27273));}
	#header .hdr-col nav{max-width: calc(748px + ((1vw - 10.23px) * 31.83024));}
	#globalNav>li>a{font-size: calc(14px + ((1vw - 10.23px) * 1.69492));}
	#hdr-menu a{font-size: calc(1.3rem + ((1vw - 10.23px) * 0.06944));}
}*/

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:1022px){
  #globalNav .sp-dsp-block{display:block;}
  #globalNav .sp-dsp-none{display:none;}
  
  #header{
    background-color: rgba(255, 255, 255, 1)!important;
    height:70px;
/*
    padding-top:16px;
    padding-bottom: 16px;
*/
  }
  /*.door #header{background: transparent!important;}	*/
  #header>.contentsInner{
    display:flex;
    align-items:center;
    height:100%;
  }
/* hdr-logo
-------------------------------------------------------------*/
  #hdr-logo{
    position:static;
  	width: 100px;
  }
	
/* globalNavSet
-------------------------------------------------------------*/
	#globalNavSet{position:static;}
	#globalNavSet a{
		background-image: none!important;
		font-size: 1.5rem;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}
	#globalNavSet a[class^="link-arw"]::before,
	#globalNavSet a[class^="link-arw"]::after{content: none;}
  #globalNavSet>dt{
    /*background: #eee;*/
    display:block;
    width:70px;
		height:70px;
		position:absolute;
		top:0;
		right:0;
		cursor:pointer;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		user-select:none;
	}
/*.gNavOpen #globalNavSet>dt{background:var(--keyColor);}*/
	#globalNavSet>dt::before,
	#globalNavSet>dt::after{
		content:"";
		background-color:#333;
		display:block;
		width:26px;
		height:2px;
		position:absolute;
		top:32px;
		left:50%;
		margin-left:-13px;
		z-index:1;
	}
	#globalNavSet>dt>span::before{
		content:"";
		width:26px;
		height:20px;
		margin-left:-13px;
		border-top:2px solid #333;
		border-bottom:2px solid #333;
		top:22px;
		left:50%;
		position:absolute;
	}
	#globalNavSet>dt>span .open,
	#globalNavSet.open>dt>span .close{display:none;}
	#globalNavSet.open>dt>span .open{display:inherit;}
	#globalNavSet>dt::before,
	#globalNavSet>dt::after,
	#globalNavSet>dt>span{
		transition:all 0.3s ease;
	}
	#globalNavSet.open>dt>span::before{border-color:rgba(255,255,255,0);}
	#globalNavSet.open>dt::before{transform:rotate(45deg);}
	#globalNavSet.open>dt::after{transform:rotate(-45deg);}
	#globalNavSet>dt>span>span{
		display: none;
		overflow: hidden;
	}

	#globalNavSet>dd{
		color:#000;
		background-color: var(--bgColorWhite);
		box-sizing:border-box;
		width:100%;
		visibility:hidden;
		overflow:hidden;
		position:fixed;
		top:70px;
		bottom:100%;
		left:0;
		z-index:71;
		opacity:0;
		transition:all 0.3s ease;
		height:0;
		margin: 0 auto;
		padding: 0 clamp(20px, 2.5vw, 48px);
	}
#globalNavSet.open>dd{
	height:calc(100vh - 70px);
	visibility:visible;
	/*bottom:0;*/
	opacity:1;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}
#globalNavSet>dd>div{display:block;}
#globalNavSet>dd>*{visibility:hidden;}
#globalNavSet.open>dd>*{visibility:inherit;}
html.gNavOpen,
html.gNavOpen body{
	height:100%;
	overflow:hidden;
}
	html.gNavOpen #globalNavSet>dd>div{
		box-sizing:border-box;
		width:100%;
		/*height:100%;*/
		position:relative;
	}
	/* boxGNavBg */
	html.gNavOpen .boxGNavBg{
		visibility:visible;
		opacity:1;
	}
/* globalNav
-------------------------------------------------------------*/
	#globalNav{
		display:block;
    padding: 16px 0;
		border-bottom:1px solid var(--lineColorGray);
	}
	#globalNav a:hover{text-decoration: none;}
	#globalNav li{position: relative;}
	#globalNav>li{
		text-align:left;
		padding:0 !important;
/*		border-bottom:1px solid var(--lineColorGray);*/
	}
	#globalNav>li:before,
	#globalNav>li:last-child:after{display:none;}
#globalNav .drop ul	.gb-img figure{display: none;}

	#globalNav>li>a,
	#globalNav>li a+.toggle-btn{
		color:#000 !important;
		display:block;
		font-size: 1.4rem;
		padding: 16px 46px 16px 0;
		box-sizing: border-box;
		line-height: normal;
	}
	#globalNav>li a+.toggle-btn{text-indent: -99999px;}
	#globalNav>li>a:hover,
	#globalNav .setDrop a.act{background:none !important;}
	#globalNav>li>.toggle-box .contentsInner{
		padding: 0;
		background-color: var(--hdrSpBgColor);
	}	


	
/* act */
/*#globalNav>li>a::after{display:none !important;}*/

	/* arw */
	#globalNav>li:not(.setDrop)>a::after{
		content: '';
		display: block;
		width: 6px;
		height: 6px;
		border-bottom: 2px solid var(--primaryColor);
		border-right: 2px solid var(--primaryColor);
		position: absolute;
		top: calc(50% - 3px);
		right: 29px;
		transform: rotate(-45deg);
	}	

	/* toggle-btn */
	#globalNav .toggle-btn{
		cursor: pointer;
		text-indent:112%;
		width:100%;
		overflow:hidden;
		position:absolute;
		top:0;
		left:0;
	}
	#globalNav .toggle-btn::after,
	#globalNav .toggle-btn::before{
		content:"";
		background-color: var(--primaryColor);
		display:block;
		width:14px;
		height:2px;
		margin-top:-1px;
		position:absolute;
		top:calc(50% + 2px);
		right: 23px;
		transition:all 0.3s ease;
	}
	#globalNav .toggle-btn:after{transform:rotate(90deg);}
	#globalNav .open>.toggle-btn:after{transform:rotate(0);}	
/*#globalNav ul .toggle-btn::after{
	top:5px;
	right:0;
}*/
/*#globalNav ul .toggle-btn+ul{margin-top:8px;}*/
#globalNav ul .toggle-set>a{
	display:inline-block;
	padding-right:12px;
	pointer-events:none;
}
	/* cat-ttl */
	#globalNav .cat-ttl [class^="link-arw"]{
		display: block;
		font-size: 1.4rem;
		line-height: 150%;
		padding: 16px 46px 16px 23px;
		box-sizing: border-box;
	}
	
	/* m3rd */
	#globalNav .m3rd li a{
		color: var(--textColorBlack);
		display: block;
		font-size: 1.4rem;
		padding: 16px 46px 16px 23px;
		box-sizing: border-box;
	}
	/* m4th */
	#globalNav .gb-col>ul.m3rd ul.m4th li a{
		padding: 8px 46px 8px 39px;
		color: var(--textColorGray);
	}
	#globalNav .gb-col ul.m4th.gb-col-3{margin-bottom: 8px;}
	#globalNav .gb-col ul.m4th.gb-col-3>li ul li a,
	#globalNav .gb-col>ul.m3rd ul.m4th.m4th-other li .m5th li a{
		padding: 8px 46px 8px 39px;
		color: var(--textColorGray);
	}
	/* m5th */
	#globalNav .gb-col>ul.m3rd ul.m4th.m4th-other li a{
		font-size: 1.4rem;
		color: var(--textColorBlack);
		padding: 16px 46px 16px 23px;
	}
	
/* hdr-gbDrop
-------------------------------------------------------------*/
/*.hdr-gbDrop{display:none !important;}*/

/* hdr-menu
-------------------------------------------------------------*/
	#hdr-menu{
		margin-top: 16px;
	}
	#hdr-menu ul{
		display: block;
	}
	#hdr-menu ul li{
    width: auto;}
	#hdr-menu ul li a{
    padding: 16px 46px 16px 0;
    font-size: 1.5rem;
  }
	#hdr-menu [class^="link-arw"][target="_blank"]{padding: 0 14px 0 0;}
	#hdr-menu [class^="link-arw"][target="_blank"]::after{margin-top: 1px;}
  
/* floating-menu
-------------------------------------------------------------*/
  #floating-menu ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 13px;
    margin-top: 24px;
  }
  #floating-menu ul li{
    width: calc(50% - 26px);
    border-radius: 4px;
    border: 1px solid #fff;
    background: linear-gradient(90deg, #0171D4 0%, #0095BA 50%, #1BC6CF 100%);
  }
  #floating-menu ul li a{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px 12px;
    border-radius: 4px;
    color: #fff;
  }  
	
}