@charset "utf-8";

/* ======================================================
 * network.css
 * ------------------------------------------------------
 * @media print, screen and (min-width: 768px)
 * @media only screen and (max-width: 767px)
====================================================== */
@media print, screen and (min-width: 768px) {
	/* network-sort-navi */
	.network-sort-navi {
		margin: 50px 0;
		padding: 40px 30px;
		background-color: #f4f4f4;
	}
	.network-sort-navi > *:first-child {
		margin-top: 0 !important;
	}
	
	/* network-sort-radio */
	.network-sort-radio > li {
		position: relative;
		margin-top: 20px;
		overflow: hidden;
	}
	.network-sort-radio input[type="radio"] {
		position: absolute;
		top: 0;
		left: -9999px;
		opacity: 0;
	}
	.network-sort-radio_label {
		position: relative;
		display: inline-block;
		padding-left: 27px;
		cursor: pointer;
	}
	.network-sort-radio_label::before {
		display: block;
		position: absolute;
		top: 3px;
		left: 0;
		width: 18px;
		height: 18px;
		border: 2px solid #ccc;
		border-radius: 50%;
		background-color: #fff;
		content: '';
	}
	.network-sort-radio_label::after {
		position: absolute;
		display: block;
		top: 8px;
		left: 5px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: #898989;
		opacity: 0;
		transition-property: opacity;
		transition-duration: .2s;
		content: '';
	}
	input[type="radio"]:checked + .network-sort-radio_label::after {
		opacity: 1;
	}
	
	/* network-sort-button-wrap */
	.network-sort-button-wrap {
		position: relative;
		margin-top: 35px;
	}
	.network-sort-button-wrap [class*="link-button"].type-network-sort,
	.network-sort-button-wrap [class*="link-button"].type-network-reset{
		margin-top: 0;
	}
	.network-sort-button-wrap [class*="link-button"].type-network-sort a,
	.network-sort-button-wrap [class*="link-button"].type-network-reset a {
		vertical-align: top;
	}
	.network-sort-button-wrap [class*="link-button"].type-network-sort li {
		text-align: center;
	}
	.network-sort-button-wrap [class*="link-button"].type-network-sort a {
		width: 500px;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.network-sort-button-wrap [class*="link-button"].type-network-sort a::after {
		width: 16px;
		height: 16px;
		margin-top: -8px;
		border: none;
		background: url("/common/images/com_ic37.png") no-repeat 0 0;
		transform: rotate(0);
	}
	.network-sort-button-wrap [class*="link-button"].type-network-reset {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
	.network-sort-button-wrap [class*="link-button"].type-network-reset a {
		width: 270px;
	}
	.network-sort-button-wrap [class*="link-button"].type-network-reset a::after {
		width: 14px;
		height: 15px;
		margin-top: -8px;
		border: none;
		background: url("/common/images/com_ic38.png") no-repeat 0 0;
		transform: rotate(0);
	}
	
	/* network-sort-container */
	.network-sort-container {
		padding-bottom: 30px;
	}
	
	/* index-layout type-network */
	.index-layout.type-network {
		margin: 0 0 0 -36px !important;
	}
	.index-layout.type-network .index-layout_item {
		margin: 30px 0 0 36px !important;
	}
	.index-layout.type-network[data-row-pc="2"] .index-layout_item {
		width: calc((100% - 72px) / 2);
	}
	.index-layout.type-network[data-row-pc="3"] .index-layout_item {
		width: calc((100% - 108px) / 3);
	}
	.index-layout.type-network[data-row-pc="4"] .index-layout_item {
		width: calc((100% - 144px) / 4);
	}
	.index-layout.type-network .index-layout_icon {
		display: flex;
		flex-flow: row wrap;
	}
	.index-layout.type-network .index-layout_icon > li {
		margin: 0 10px 7px 0;
		padding: 6px 5px 5px;
		color: #fff;
		font-size: 1.4rem;
		line-height: 1;
	}
	.index-layout.type-network .index-layout_icon > li[data-industry-category="functional"] {
		background-color: #e8382f
	}
	.index-layout.type-network .index-layout_icon > li[data-industry-category="thin_film"] {
		background-color: #ea6182
	}
	.index-layout.type-network .index-layout_icon > li[data-industry-category="resource"] {
		background-color: #00a0ca
	}
	.index-layout.type-network .index-layout_icon > li[data-industry-category="metal"] {
		background-color: #f08300
	}
	.index-layout.type-network .index-layout_icon > li[data-industry-category="recycling"] {
		background-color: #008e3f
	}
	.index-layout.type-network .index-layout_icon > li[data-industry-category="tanb"] {
		background-color: #b7600d
	}
	.index-layout.type-network .index-layout_icon > li[data-industry-category="other"] {
		background-color: #8a8a8a
	}
	.index-layout.type-network .index-layout_label {
		font-size: 2rem;
		font-weight: bold;
	}
	.index-layout.type-network .index-layout_label + * {
		margin-top: 15px !important;
	}
	.index-layout.type-network .index-layout_description {
		display: flex;
		flex-flow: row nowrap;
		margin-top: 5px;
		color: #333;
		font-size: 1.6rem;
	}
	.index-layout.type-network .index-layout_description_title {
		flex-shrink: 0;
	}
	.index-layout.type-network .index-layout_description_title::after {
		content: "：";
	}
	.index-layout.type-network .index-layout_description_detail {
		width: 100%;
	}
}

@media only screen and (max-width: 767px) {
	/* network-sort-navi */
	.network-sort-navi {
		margin: 25px 0;
		padding: 20px 15px 30px;
		background-color: #f4f4f4;
	}
	.network-sort-navi > *:first-child {
		margin-top: 0 !important;
	}
	
	/* network-sort-radio */
	.network-sort-radio > li {
		position: relative;
		margin-top: 20px;
		overflow: hidden;
	}
	.network-sort-radio input[type="radio"] {
		position: absolute;
		top: 0;
		left: -9999px;
		opacity: 0;
	}
	.network-sort-radio_label {
		position: relative;
		display: inline-block;
		padding-left: 27px;
		cursor: pointer;
	}
	.network-sort-radio_label::before {
		display: block;
		position: absolute;
		top: 1px;
		left: 0;
		width: 18px;
		height: 18px;
		border: 2px solid #ccc;
		border-radius: 50%;
		background-color: #fff;
		content: '';
	}
	.network-sort-radio_label::after {
		position: absolute;
		display: block;
		top: 6px;
		left: 5px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: #898989;
		opacity: 0;
		transition-property: opacity;
		transition-duration: .2s;
		content: '';
	}
	input[type="radio"]:checked + .network-sort-radio_label::after {
		opacity: 1;
	}
	
	/* network-sort-button-wrap */
	.network-sort-button-wrap {
		position: relative;
		margin-top: 30px;
	}
	.network-sort-button-wrap [class*="link-button"].type-network-sort a,
	.network-sort-button-wrap [class*="link-button"].type-network-reset a {
		vertical-align: top;
	}
	.network-sort-button-wrap [class*="link-button"].type-network-sort {
		margin-top: 0;
	}
	.network-sort-button-wrap [class*="link-button"].type-network-sort a::after {
		right: 15px;
		width: 16px;
		height: 16px;
		margin-top: -8px;
		border: none;
		background: url("/common/images/com_ic37_sp.png") no-repeat 0 0;
		background-size:  16px 16px;
		transform: rotate(0);
	}
	.network-sort-button-wrap [class*="link-button"].type-network-reset{
		margin-top: 15px;
	}
	.network-sort-button-wrap [class*="link-button"].type-network-reset li {
		text-align:  center;
	}
	.network-sort-button-wrap [class*="link-button"].type-network-reset a {
		display:  inline-block;
		width:  auto;
		min-width: 150px;
	}
	.network-sort-button-wrap [class*="link-button"].type-network-reset a::after {
		right: 15px;
		width: 12px;
		height: 12px;
		margin-top: -6px;
		border: none;
		background: url("/common/images/com_ic38_sp.png") no-repeat 0 0;
		background-size:  12px 12px;
		transform: rotate(0);
	}
	
	/* index-layout type-network */
	.index-layout.type-network {
		margin-top: 5px !important;
	}
	.index-layout.type-network .index-layout_item {
		margin-top: 15px !important;
	}
	.index-layout.type-network .index-layout_item > .block {
		padding:  15px 25px 15px 10px;
	}
	.index-layout.type-network .index-layout_item > .a-blank::after {
		margin: 0;
	}
	.index-layout.type-network .index-layout_inner {
		display:  block;
	}
	.index-layout.type-network .index-layout_icon {
		display: flex;
		flex-flow: row wrap;
	}
	.index-layout.type-network .index-layout_icon {
		margin-bottom: 5px;
	}
	.index-layout.type-network .index-layout_icon > li {
		margin: 0 5px 5px 0;
		padding: 5px;
		color: #fff;
		font-size: 1.2rem;
		line-height: 1;
	}
	.index-layout.type-network .index-layout_icon > li[data-industry-category="functional"] {
		background-color: #e8382f
	}
	.index-layout.type-network .index-layout_icon > li[data-industry-category="thin_film"] {
		background-color: #ea6182
	}
	.index-layout.type-network .index-layout_icon > li[data-industry-category="resource"] {
		background-color: #00a0ca
	}
	.index-layout.type-network .index-layout_icon > li[data-industry-category="metal"] {
		background-color: #f08300
	}
	.index-layout.type-network .index-layout_icon > li[data-industry-category="recycling"] {
		background-color: #008e3f
	}
	.index-layout.type-network .index-layout_icon > li[data-industry-category="tanb"] {
		background-color: #b7600d
	}
	.index-layout.type-network .index-layout_icon > li[data-industry-category="other"] {
		background-color: #8a8a8a
	}
	.index-layout.type-network .index-layout_label {
		font-size: 1.4rem;
		font-weight: bold;
	}
	.index-layout.type-network .index-layout_label + * {
		margin-top: 10px !important;
	}
	.index-layout.type-network .index-layout_description {
		display: flex;
		flex-flow: row nowrap;
		margin-top: 2px;
		color: #333;
		font-size: 1.3rem;
	}
	.index-layout.type-network .index-layout_description_title {
		flex-shrink: 0;
	}
	.index-layout.type-network .index-layout_description_title::after {
		content: "：";
	}
	.index-layout.type-network .index-layout_description_detail {
		width: 100%;
	}
}