@charset "utf-8";
/*
* CSS for Peripheral Device Index Page (Index Menu List)
*
* @version			0.0.1
* @lastmodified 2022-11-21
* @link					https://www.landcomp.co.jp/
* @copyright		Copyright 2005, LAND COMPUTER Co.,Ltd.All rights reserved.
*------------------------------------------------------------------------- */

.lineup_box {
	margin-bottom: 3rem;
}
.lineup_box p.catch {
	padding: 0 0px 20px;
	margin: 0;
}
.lineup_box ul.link {
  margin-top: -20px;
}
.lineup_box p.catch .micon {
	display: inline-block;
	float: left;
	margin: 0 1rem 1rem 0;
	max-width: 104px;
	width: 22%;
}
.lineup_box p.catch .micon img {
	max-width: 100%;
	width: auto;
}

.section ul.ProductList {
	clear: both;
  list-style: none;
  overflow: hidden;
  padding-left: 0;
	margin-bottom: 1rem;
}
ul.ProductList li {
  box-sizing: border-box;
  margin-bottom: 2rem;
  vertical-align: top;
  border-radius: 3px;
}
ul.ProductList li:last-child {
  margin-bottom: 0;
}
ul.ProductList .innerbox {
	position: relative;
	border: 1px solid #ddd;
}
ul.ProductList li a {
  display: block;
  text-align: center;
}
ul.ProductList li a img {
  height: auto;
  width: auto;
  max-width: 100%;
}
ul.ProductList li a span.title {
  display: block;
  margin-top: 0.5rem;
}
ul.ProductList li a span.model {
  color: #325DA7;
  display: block;
  font-size: 1.3rem;
  margin-bottom: 0.25rem;
}
ul.ProductList li p.detail {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.5rem;
  min-height: 4rem;
  border-top: 1px solid #eee;
  background-color: #f9f9f9;
}
ul.ProductList li div.new {
  position: relative;
}
ul.ProductList li img.new {
  position: absolute;
  top: 0;
  right: 0;
}
ul.ProductList li div.small img {
  max-width: 66%;
  padding: 12.75% 0;        /* w -> h % */
}

.state-newpro {
	color: #c00;
	display: inline-block;
	font-size: 1rem;
	font-size: 0.875rem;
	padding: 0.125rem 0.5rem;
	border: 1px solid #dc143c;
	position: absolute;
	top: 0.375rem;
	left: 0.375rem;
	z-index: 2;
}

.state-new {
	color: #c00;
	display: inline-block;
	font-size: 0.75rem;
	padding: 0.25rem 0 0 0.5rem;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.state-new::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -.2px;
	left: -.2px;
	display: block;
	border: 1px solid #F3D9D9;	/*#f5cccc;*/
	border-width: 54px 74px 0 0;
	border-color: #F3D9D9 transparent;
}

@media all and (min-width: 480px) {
  ul.ProductList li {
    float: left;
    width: 48%;
    margin-right: 2%;
  margin-bottom: 1rem;
  }
  ul.ProductList li:nth-child(2n) {
    margin-right: 0;
  }
}
@media all and (min-width: 768px) {
  ul.ProductList li {
    width: 31.33%;
    margin-right: 2%;
  }
  ul.ProductList li:nth-child(2n) {
    margin-right: 2%;
  }
  ul.ProductList li:nth-child(3n) {
    margin-right: 0;
  }
}

div.iconLinkBox {
	overflow: hidden;
	margin-top: 2rem;
}
div.iconLinkBox .cell.icon {
	text-align: center;
}
div.iconLinkBox .cell.text {
}
@media all and (min-width: 480px) {
	div.iconLinkBox .cell.icon {
		float: left;
		text-align: left;
		padding-right: 1rem;
	}
}

div.icon.infoBox {
  padding: 10px 10px;
  position: relative;
  border: 1px solid #ccc;
  border-radius: 6px;
}
div.icon.infoBox p img {
  display: block;
  float: none;
  margin: 0 auto 10px;
  position: static;
  top: 0;
  left: 0;
}
div.icon.infoBox ul {
  padding-left: 20px;
}
div.icon.infoBox .btn {
  text-align: center;
  margin: 0 auto;
  width: 100%;
}
div.icon.infoBox .btn img {
  float: none;
  margin: 0;
}
@media all and (min-width: 480px) {
  div.icon.infoBox {
    padding-left: 180px;
  }
  div.icon.infoBox p img {
    position: absolute;
    top: 10px;
    left: 10px;
  }
  div.icon.infoBox ul {
    padding-left: 40px;
  }
  div.icon.infoBox .btn {
    text-align: left;
    margin: 0;
    width: auto;
  }
}

.refInfoBox {
  font-size: 0.88rem;
}
.section .refInfoBox ul {
  padding-left: 0;
	overflow: hidden;
}
.refInfoBox ul li {
  box-sizing: border-box;
  display: block;
  float: left;
  vertical-align: top;
  margin-right: 0;
  width: 100%;
}
@media all and (min-width: 480px) {
  .refInfoBox ul li {
    margin-right: 2%;
    width: 49%;
  }
}
.refInfoBox ul li a {
  display: block;
  margin-bottom: 8px;
}
.refInfoBox ul li img {
  float: left;
  margin: 0 15px 10px 0;
}
.refInfoBox ul li:nth-child(2n) {
	margin-right: 0;
}