@charset "utf-8";


/* 背景*/
.wrap {
	position: relative;
}

.products_bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-top: 200px;
}

.products_bg .bg001,
.products_bg .bg002,
.products_bg .bg003,
.products_bg .bg004,
.products_bg .bg005 {
	position: relative;
  width: 100%;
  height: 20%;
}


.products_bg .bg001::before {
	content: '';
	display: block;
	position: absolute;
	/*
	top: 0;
	left: 0;
	*/
	width: 100%;
	height: 78%;
	top: 0px;
	left: 0%;
	background-color: rgba(189, 237, 255, 0.8);
	transform: skewY(-5deg);
	background-image: -webkit-linear-gradient(270deg,rgba(189,219,255,0.80) 0%,rgba(189,237,255,0.80) 100%);
	background-image: linear-gradient(180deg,rgba(189,219,255,0.80) 0%,rgba(189,237,255,0.80) 100%);
}

.products_bg .bg002::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 75%;
	background-color: rgba(255,219,232,0.8);
	transform: skewY(12deg);
	background-image: -webkit-linear-gradient(270deg,rgba(250,219,255,0.80) 0%,rgba(255,219,244,0.80) 100%);
	background-image: linear-gradient(180deg,rgba(250,219,255,0.80) 0%,rgba(255,219,244,0.80) 100%);
}

.products_bg .bg003::before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 70%;
	background-color: rgba(255, 2254, 168, 0.6);
	transform: skewY(-4deg);
}
.products_bg .bg004::before{
	content: '';
	display: block;
  position: absolute;
  top: -6%;
  left: 0;
  width: 100%;
  height: 60%;
  background: -moz-linear-gradient(-45deg, rgba(246, 235, 254, 0.8) 0%, rgba(220, 232, 251, 0.8) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(246, 235, 254, 0.8)), color-stop(100%, rgba(220, 232, 251, 0.8)));
  background: -webkit-linear-gradient(-45deg, rgba(246, 235, 254, 0.8) 0%, rgba(220, 232, 251, 0.8) 100%);
  background: -o-linear-gradient(-45deg, rgba(246, 235, 254, 0.8) 0%, rgba(220, 232, 251, 0.8) 100%);
  background: -ms-linear-gradient(-45deg, rgba(246, 235, 254, 0.8) 0%, rgba(220, 232, 251, 0.8) 100%);
  background: linear-gradient(135deg, rgba(246, 235, 254, 0.8) 0%, rgba(220, 232, 251, 0.8) 100%);
	transform: skewY(10deg);
	/*
  -webkit-transform: rotateX(55deg);
  transform: rotateX(55deg);
  -webkit-transform: skew(0deg, 10deg);
  -ms-transform: skew(0deg, 10deg);
  transform: skew(0deg, 10deg);
	*/
}

.products_bg .bg005::before{
	content: '';
	display: block;
  position: absolute;
  top: -6%;
  left: 0;
  width: 100%;
  height: 85%;
  background: rgba(189, 237, 255, 0.6);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(189, 237, 255, 0.6)), color-stop(100%, rgba(189, 249, 222, 0.6)));
  background: -webkit-gradient(linear, left top, right top, from(rgba(189, 237, 255, 0.6)), to(rgba(189, 249, 222, 0.6)));
  background: -webkit-linear-gradient(left, rgba(189, 237, 255, 0.6) 0%, rgba(189, 249, 222, 0.6) 100%);
  background: -o-linear-gradient(left, rgba(189, 237, 255, 0.6) 0%, rgba(189, 249, 222, 0.6) 100%);
  background: linear-gradient(to right, rgba(189, 237, 255, 0.6) 0%, rgba(189, 249, 222, 0.6) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bdedff', endColorstr='#bdf9de', GradientType=1);
	transform: skewY(-3deg);
	/*
  -webkit-transform: skew(0deg, -10deg);
  -ms-transform: skew(0deg, -10deg);
  transform: skew(0deg, -10deg);
	*/
}

#Contents  #ProductsList.inner #mainContents h3 {
	border-bottom: 1px solid #0052a4;
}
#Contents  #ProductsList.inner #mainContents h3::before {
	content: none;
}

#Contents #ProductsList.inner #mainContents ul.anchorBox {
	margin: 0px 0px 70px;
	padding: 0px;
	display: flex;
	flex-wrap: wrap;
}
#Contents #ProductsList.inner #mainContents ul.anchorBox li {
	margin: 0px 0px 1em;
	padding: 0px 1.2em;
	border-left: 2px solid #e6e6e6;
	width: 20%;
}
#Contents #ProductsList.inner #mainContents ul.anchorBox li:first-child,
#Contents #ProductsList.inner #mainContents ul.anchorBox li:nth-child(6n) {
	border-left: none;
}
#Contents #ProductsList.inner #mainContents ul.anchorBox li:last-child,
#Contents #ProductsList.inner #mainContents ul.anchorBox li:nth-child(3n) {
	border-right: none;
}

#Contents #ProductsList.inner #mainContents ul.anchorBox li a {
	display: block;
	padding: 8px;
	color: #000000;
	text-decoration: none;
	margin: 0px;
	text-indent: 0px;
	
}
#Contents #ProductsList.inner #mainContents ul.anchorBox li a:hover {
	background-color: #f0f0f0;
}
#Contents #ProductsList.inner #mainContents ul.anchorBox li a::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f078";
	color: #0052a4;
	margin-right: 1.5em;
}

#Contents #ProductsList.inner #mainContents .iconLinkList {
	display: flex;
	flex-wrap: wrap;
}
#Contents #ProductsList.inner #mainContents .iconLinkList li {
	width: 25%;
	margin-bottom: 2em;
}
#Contents #ProductsList.inner #mainContents .iconLinkList li a {
	text-decoration: none;
		text-indent: -1.5em;
	padding: 0px 1.5em 0px 1.5em;
	display: block;
	color: #303030;
}
#Contents #ProductsList.inner #mainContents .iconLinkList li a:hover {
	color: #0066ff;
}

#Contents #ProductsList.inner #mainContents .iconLinkList li a::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f138";
	color: #0050d9;
	margin-right: 0.5em;
}

#Contents #ProductsList.inner #mainContents .productsCategoryList {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	
}
#Contents #ProductsList.inner #mainContents .productsCategoryList .col {
	width: 20%;
	padding: 0px 0px 3.4em;
	margin: 0px 6.666% 4em 0px;
	position: relative;
}
#Contents #ProductsList.inner #mainContents .productsCategoryList .col img {
	max-width: 100%;
	height: auto;
	margin-bottom: 0.8em;
}
#Contents #ProductsList.inner #mainContents .productsCategoryList .col p {
	margin-bottom: 0.8em;
}
#Contents #ProductsList.inner #mainContents .productsCategoryList .col p.ttl {
	font-weight: bold;
}

#Contents #ProductsList.inner #mainContents .productsCategoryList .col:nth-child(4n) {
	margin-right: 0px;
}
#Contents #ProductsList.inner #mainContents .productsCategoryList .col .btn {
	position: absolute;
	bottom: 0px;
	left: 0px;
}


#Contents #ProductsList.inner #mainContents .productsCategoryList .col a {
	/*display: block;
	background-color: #0052a4;
	color:  #ffffff;
	text-decoration: none;*/
	/*
	position: absolute;
	bottom: 0px;
	left: 0px;
	*/
	/*padding: 3px 10px;
	margin-top: 3px;*/
}
#Contents #ProductsList.inner #mainContents .productsCategoryList .col a:hover {
	opacity: 0.7;
}
#Contents #ProductsList.inner #mainContents .productsCategoryList .col a::before {
	/*font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f138";
	margin-right: 0.4em;*/
}

/**カテゴリータブ**/
#Contents #ProductsList.inner #mainContents .categoryTabs {
	width: 100%;
	display: flex;
justify-content: space-between;
	flex-wrap: wrap;
	
}
/**タブ部分のスタイル**/
#Contents #ProductsList.inner #mainContents .categoryTabs .tab_item {
	width: 19.8%;
	padding: 1em;
	background-color: #1a6dc0;
	color: #ffffff;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}
#Contents #ProductsList.inner #mainContents .categoryTabs .tab_item:hover {
	opacity: 0.7;
}
#Contents #ProductsList.inner #mainContents .categoryTabs .tab_item::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f138";
	position: absolute;
	top: 50%;
left: 10px;
-webkit-transform: translate(0px, -50%);
transform: translate(0px, -50%);

}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
display: none;
}
/*選択されているタブのスタイルを変える*/
#Contents #ProductsList.inner #mainContents .categoryTabs input:checked + .tab_item {
  background-color: #ffffff;
  color: #1a6dc0;
	border: 2px solid #1a6cd0;
}

/*タブ切り替えの中身のスタイル*/
.tabbox {
	display: none;
	width: 823px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 2em;
	background-color: #ffffff;
	border:  1px solid #1a6cd0;
}
/*選択されているタブのコンテンツのみを表示*/
#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content,
#tab03:checked ~ #tab03_content,
#tab04:checked ~ #tab04_content,
#tab05:checked ~ #tab05_content
{
  display: block;
}

.tabbox ul {
	display: flex;
	flex-wrap: wrap;
}
.tabbox ul li {
	display: flex;
	width: 24%;
	margin-right: 1.33%;
	margin-bottom: 1em;
	align-items: center;
}
.tabbox ul li:nth-child(4n) {
	margin-right: 0px;
}



.tabbox ul li a.icon {
	display: block;
	width: 48px;
	height: 48px;
	border: 1px solid #c0c0c0;
	margin-right: 0.5em;
}
.tabbox ul li a:nth-child(2) {
	flex: 1;
}
.tabbox ul li a.icon img {
	height: auto;
}


@media screen and (max-width: 639px) {
	#Contents #ProductsList.inner #mainContents ul.anchorBox {
	margin: 0px 0px 35px;
}

#Contents #ProductsList.inner #mainContents ul.anchorBox li {
	width: 50%;
	padding: 0px 0.5em;
}
#Contents #ProductsList.inner #mainContents ul.anchorBox li:nth-child(6n),
#Contents #ProductsList.inner #mainContents ul.anchorBox li:nth-child(3n) {
	border-left: 2px solid #e6e6e6;
}
	#Contents #ProductsList.inner #mainContents ul.anchorBox li:last-child {
	border-right: none;
}
	#Contents #ProductsList.inner #mainContents ul.anchorBox li:nth-child(odd){
		border-left: none;
	}
	
#Contents #ProductsList.inner #mainContents .iconLinkList li {
	width: 50%;
	margin-bottom: 1em;
}
#Contents #ProductsList.inner #mainContents .iconLinkList li a {
		text-indent: -1.2em;
	padding: 0px 1.2em 0px 1.2em;
}
	
	
.iconLinkList01 li {
	width: 45%;
}
	
	
#Contents #ProductsList.inner #mainContents .productsCategoryList {
}
#Contents #ProductsList.inner #mainContents .productsCategoryList .col {
	width: 100%;
	padding: 0px 0px 1em;
	margin: 0px 0px 2em 0px;
	border-bottom: 1px solid #c0c0c0;
	text-align: center;
}
#Contents #ProductsList.inner #mainContents .productsCategoryList .col p.desc {
	text-align: left;
	}
#Contents #ProductsList.inner #mainContents .productsCategoryList .col .btn {
	position: relative;
	bottom: inherit;
	left:inherit;
}
	
	/**タブ部分のスタイル**/
	#Contents #ProductsList.inner #mainContents .categoryTabs {
	}
#Contents #ProductsList.inner #mainContents .categoryTabs .tab_item {
	width: 49.8%;
	margin-bottom: 3px;
}
.tabbox {
	padding: 0.8em;
}
	
.tabbox ul {
	justify-content: space-between;
}
.tabbox ul li {
	display: flex;
	width: 49%;
	margin-right: 0px;
	margin-bottom: 1em;
	align-items: center;
}
	
	
}