@charset "utf-8";
/*
* CSS for Lnut aside HC5
*
* @version			0.0.0
* @lastmodified 2022-08-30
* @link					https: //www.landcomp.co.jp/
* @copyright		Copyright 2005, LAND COMPUTER Co.,Ltd.All rights reserved.
*------------------------------------------------------------------------- */

/* adjust ------- */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* SubNav ------------ */
div#subNavi {
	float: none;
	padding: 0;
	width: auto;
}
#subNavi #relatedProducts {
	padding: 1rem 1rem 0.5rem;
	margin-bottom: 1rem;
	border: 1px solid #ddd;
	background-color: #fbfcfd;
}
#subNavi #relatedProducts h2 {
  font-size: 1.25rem;
	__font-weight: bold;
	text-align: center;
	text-indent: 0;								/* adjust */
	padding: 0;
  margin-bottom: 0.25rem;
  border: none;
  background: none;
}
/* SIDE NAVIGATION / Sub-Navi ----------------- */
#subNavi #relatedProducts dl dt {
  color: #333;
  padding: 0.375rem 0.75rem;
	border: 1px solid #325DA7;
  background: none;
}
#subNavi #relatedProducts dl dd ul {
  list-style: none;
  padding: 0;
	margin: 0 0 0.5rem;
}
#subNavi div ul li {
	list-style: none;
	margin: 0;
	border-bottom: 1px solid #8EAADB;
}
#subNavi div ul li:last-child {
	border-bottom: none;
}

#subNavi div ul li a {
	display: block;
	line-height: 3;
}
#subNavi div ul li a:before {
  display: inline-block;
  background: url('../../img5/link-mark.png') no-repeat 0 2px;
}
#subNavi div ul li a:hover {
  background-color: #D8EAF9;
}

#subNavi #referenceInfo {
	padding: 1rem 1rem;
	margin: 0.5rem 0;
 	border: 1px solid #ccc;
}
#subNavi #referenceInfo h3 {
	text-indent: 0;
	height: auto;
  font-size: 1.22rem;
	font-weight: bold;
	padding: 0;
  margin-bottom: 0.125rem;
  border: none;
  background: none;
}

#subNavi div ul li a {
  padding-left: 0.875rem;
  position: relative;
}
#subNavi div ul li a::after {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  right: 0.5rem;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 0;
  border-top: solid 2px #325DA7;
  border-right: solid 2px #325DA7;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

@media all and (min-width: 769px) {
  #subNavi h2 {
    __height: 54px;
    __background: url(../../../images/common/global_sprite.png) no-repeat 50% -80px;
  }
  #subNavi h2 a {
    __display: block;
    __height: 54px;
  }
}

/* support link */
#subNavi dl#supportLink dt {
	font-size: 1.25rem;
	margin: 0;
	padding: 1rem 0 0;
	text-align: center;
	background-color: #EEE;
}
#subNavi dl#supportLink dd ul {
	padding: 0 1rem 1rem;
	background-color: #EEE;
}
#subNavi dl#supportLink dd ul li {
	margin-top: 1rem;
}
#subNavi dl#supportLink dd ul li a::after {
	right: 0.75rem;
}
#subNavi dl#supportLink dd ul li a {
	font-size: 1.125rem;
	padding: 1.25rem 1rem 1.25rem;
	border: 1px solid #aaa;
	border-radius: 4px;
	background-color: #FFF;
}
#subNavi dl#supportLink dd ul li a {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: left;
}
#subNavi dl#supportLink dd ul li a span {
	display: inline-block;
}
#subNavi dl#supportLink dd ul li a span.icn {
	flex-basis: 2.25rem;
	min-width: 2.25rem;
	max-width: 2.25rem;
	height: 2.25rem;
}
#subNavi dl#supportLink dd ul li a span:not(.icn) {
	padding-left: 0.25rem;
}
#subNavi dl#supportLink dd ul li a span.icn {
	background-image: url("../../../product/peripheral/images/shared/supportLink.png");
	background-position-y: 0;
}
#subNavi dl#supportLink dd ul li#iman a span.icn {
	background-position-x: 0;
}
#subNavi dl#supportLink dd ul li#icat a span.icn {
	background-position-x: -40px;
}
#subNavi dl#supportLink dd ul li#iwar a span.icn {
	background-position-x: -80px;
}
#subNavi dl#supportLink dd ul li a:hover span.icn {
	_bbackground-position: inherit -40px;
	background-position-y: -40px;
}
#subNavi dl#serviceLink dd ul li {
	border-bottom: 1px solid #ccc;
}
@media all and (min-width: 480px) {
  #subNavi .refInfo dl dd ul li {
    float: none;
    width: auto;
  }
}
@media all and (min-width: 640px) {
  #subNavi .refInfo dl {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  #subNavi .refInfo ul li {
    padding: 0;
    background-image: none;
  }
}
@media all and (min-width: 768px) {
	#subNavi dl#supportLink dd ul {
		display : -webkit-box;     /* old Android */
  	display : -webkit-flex;    /* Safari etc. */
  	display : -ms-flexbox;     /* IE10        */
		display: flex;
		justify-content: space-between;
		padding: 0 0.5rem 1rem;
	}
	#subNavi dl#supportLink dd ul li {
		margin: 0.5rem 0.5rem 0;
		width: 33.33%;
	}
	#subNavi dl#supportLink dd ul li a {
		padding: 0.5rem 1rem;
	}
	#subNavi dl#serviceLink dd ul {
		display : -webkit-box;     /* old Android */
  	display : -webkit-flex;    /* Safari etc. */
  	display : -ms-flexbox;     /* IE10        */
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#subNavi dl#serviceLink dd ul li {
		flex: 0 0 49%;
	}
}

/* bunner -------- */
#subNavi ul.bnrBox {
	background: none;	
}
#subNavi ul.bnrBox li {
	display: block;
	float: none;
	text-align: center;	
	margin: 0.5rem 0 0;
	width: auto;
} 
@media all and (min-width: 321px) {
  #subNavi ul.bnrBox li {
		display: block;
		float: none;
		text-align: center;	
		margin: 0.5rem 0 0;
		width: auto;
  }
  #subNavi ul.bnrBox li:nth-child(2n+1) {
    margin-left: 0;
  }
}
@media all and (min-width: 480px) {
  #subNavi ul.bnrBox {
		display : -webkit-box;     /* old Android */
  	display : -webkit-flex;    /* Safari etc. */
  	display : -ms-flexbox;     /* IE10        */
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
  }
  #subNavi ul.bnrBox li {
		flex: 0 0 50%;
  }
}
@media all and (min-width: 640px) {
  #subNavi ul.bnrBox li {
		flex: 0 0 33.33%;
  }
}