@charset "utf-8";

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 *
 *	file name : top.css
 *
 * :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */


/* -----------------------------------------------------------
	メインブロック
----------------------------------------------------------- */

#mainBlock {
	width: 100%;
}

/* メインビジュアル
----------------------------------------------------------- */
#mainVisual {
	display: none;
}

/* -- JavaScript有効 -- */
body.js-enabled #mainVisual {
	display: block;
}
#mainVisual {
	float: left;
	position: relative;
	width: 670px;
}
#mainVisual #mask {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 390px;
	overflow: hidden;
}
#mainVisual #mask ul {
	position: absolute;
	left: 0; /* default */
	top: 0;
}
#mainVisual #mask li {
	float: left;
	display: none;
}
#mainVisual #mask li img {
	width: 100%;
}

#mainVisual #relatedNavi {
	display: none;
}

#mainVisual #relatedNavi {
	display: none;
	position: absolute;
	top: 300px;
	left: 0;
	width: 670px;
	height: 90px;
	/*
	background-color: #fff;
	*/
	z-index: 10;
}
#mainVisual #relatedNavi .relatedCap {
	position: absolute;
	top: -19px;
	left: 7px;
	z-index: 15;
}
#mainVisual #relatedNavi ul {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 0 10px;
	background-color: #fff;
}
#mainVisual #relatedNavi ul.column_none {
	height:0px;
}

#mainVisual #relatedNavi ul.column2 {
	background: url(../images/r_bg_navi.png) 0 0 no-repeat;
}
#mainVisual #relatedNavi li {
	float: left;
}

#mainVisual #relatedNavi .column2 li {
	width: 315px;
	margin-left: 20px;
	padding-top: 10px;
}

#mainVisual #relatedNavi .column2 li:first-child {
	margin-left: 0;
}

#mainVisual p#btnPrev,
#mainVisual p#btnNext {
	position: absolute;
	top: 115px;
	width: 44px;
	height: 82px;
	z-index: 10;
	cursor: pointer;
}
#mainVisual p#btnPrev:hover,
#mainVisual p#btnNext:hover {
	opacity: 0.8;
}
#mainVisual p#btnPrev span,
#mainVisual p#btnNext span {
	display: none;
}

#mainVisual p#btnPrev {
	left: 0px;
	background: url(../images/r_btn_prev.png) 0 0 no-repeat;
	background-size: 100% auto;
}
#mainVisual p#btnNext {
	right: 0px;
	background: url(../images/r_btn_next.png) 0 0 no-repeat;
	background-size: 100% auto;
}

#mainVisual #pagination {
	position: relative;
	padding: 14px;
	margin: 0 auto;
	background-color: #cbd2d7;
	text-align: center;
	font-size: 0;
}

#mainVisual #pagination li {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 11px;
	border-radius: 50%;
	background-color: #fff;
	cursor:pointer;
}

#mainVisual #pagination li.current {
	background-color: #5b6771;
	cursor: default;
}

/* -- SP -- */
body.responsive-sp #mainVisual {
	float: none;
	width: 100%;
}
body.responsive-sp #mainVisual #mask {
	padding-top: 44.7761194029851%; /* 300/670 */
}
body.responsive-sp #mainVisual #relatedNavi {
	display: none !important;
}
body.responsive-sp #mainVisual p#btnPrev,
body.responsive-sp #mainVisual p#btnNext {
	top: 30.0699300699301%; /* 86/286 */
	width: 9.375%; /* 60/640 */
	height: 39.1608391608392%; /* 112/286 */
	background-size: 100%;
}
body.responsive-sp #mainVisual #pagination {
	padding: 3.125%; /* 20/640 */
}
body.responsive-sp #mainVisual #pagination li {
	width: 3%; /* 18/600 */
	height: 0;
	padding-top: 3%; /* 18/600 */
	margin: 0 1.33333333333333%; /* 8/600 */
}


/* メインビジュアル(JavaScript無効時)
----------------------------------------------------------- */
#mainVisualNoscript {
	margin-top: 20px;
	margin-bottom: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	border-top: 1px solid #ccc;
	text-align: left;
}

#mainVisualNoscript ul {
	width: 960px;
	margin-left: -10px;
}

#mainVisualNoscript ul li {
	display: inline;
	float: left;
	width: 468px;
	min-height: 280px;
	_height: 280px;
	margin: 0 0 10px 10px;
	padding-bottom: 13px;
	background-color: #fff;
	border: 1px solid #e0dfda;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
}

#mainVisualNoscript ul li dl {
	width: 460px;
	margin: 0 auto;
}

#mainVisualNoscript ul li dl dt {
	margin-bottom: 10px;
	padding-top: 4px;
	font-size: 0;
	line-height: 0;
}

#mainVisualNoscript ul li dl dd {
	margin: 0 5px 5px 8px;
	padding-left: 20px;
	background: url(../images/n_ic_pdf.gif) left 0.2em no-repeat;	
}

#mainVisualNoscript ul li dl dd a {
	line-height: 1.6;
}

/* バナーエリア
----------------------------------------------------------- */
#mainBlock .bnrArea {
	font-size: 100%;
	line-height: 1.3; /* 17/13 */
	text-align: left;
}
#mainBlock .bnrArea li {
	float: left;
	width: 32%;
	margin-left: 2%;
}
#mainBlock .bnrArea li:first-child {
	margin-left: 0;
}
#mainBlock .bnrArea li a,
#mainBlock .bnrArea li a img,
#mainBlock .bnrArea li a span {
	display: block;
}
#mainBlock .bnrArea li a {
	min-height: 190px;
	padding: 10px;
	background-color: #fff;
	color: #333;
	text-decoration: none;
}
#mainBlock .bnrArea li a span {
	margin-top: 10px;
}
#mainBlock .bnrArea li a span small {
	color: #999;
}

/* -- JavaScript有効 -- */
body.js-enabled #mainBlock .bnrArea {
	float: right;
	width: 260px;
}
body.js-enabled #mainBlock .bnrArea li {
	float: none;
	width: 100%;
	margin-left: 0;
	margin-top: 10px;
}
body.js-enabled #mainBlock .bnrArea li:first-child {
	margin-top: 0;
}


/* -- SP -- */
body.responsive-sp #mainBlock .bnrArea {
	float: none;
	width: auto;
	padding: 3.125% 3.125% 6.25% 3.125%; /* 20/640, 40/640 */
	font-size: 85%;
}
body.responsive-sp #mainBlock .bnrArea:after {
	clear: both;
	display: block;
	content: "";
}
body.responsive-sp #mainBlock .bnrArea li {
	float: left;
	width: 48%;
	margin: 0 0 0 4%;
}
body.responsive-sp #mainBlock .bnrArea li:first-child {
	margin: 0;
}
body.responsive-sp #mainBlock .bnrArea li a {
	padding: 6.94444444444444%; /* 20/288 */
	min-height: 0;
}
body.responsive-sp #mainBlock .bnrArea li a span {
	margin-top: 8.06451612903226%; /* 20/248 */
}


/* -----------------------------------------------------------
	製品検索
----------------------------------------------------------- */
.searchBlock {
	margin-top: 22px;
	text-align: left;
}

/* 検索ヘッダ */
.searchBlockHeader {
	position: relative;
	line-height: 40px;
}
.searchBlockHeader h2 {
	display: inline-block;
	vertical-align: top;
	font-size:108%;
	font-weight: normal;
}
.searchBlockHeader .trigger {
	display: inline-block;
	vertical-align: top;
	padding-top: 4px;
	margin-left: 12px;
	border-radius: 4px;
}
.searchBlockHeader .trigger:after {
	clear: both;
	display: block;
	content: "";
}
.searchBlockHeader .trigger li {
	float: left;
	font-size: 100%;
	line-height: 1.2;
}
.searchBlockHeader .trigger li a {
	position: relative;
	display: inline-block;
	width: 150px;
	padding: 8px 8px 8px 32px;
	box-sizing: border-box;
	background-color: #fff;
	text-align: center;
	text-decoration: none;
	color: #333;
	cursor: pointer;
}
.searchBlockHeader .trigger li a:before {
	position: absolute;
	left: 8px;
	top: 8px;
	width: 16px;
	height: 16px;
	background: url("/business/images_global/r_ico_tab_default_pc.png") no-repeat;
	content: "";
}
.searchBlockHeader .trigger li a.tabCurrent {
	background-color: #3d3d3d;
	color: #fff;
	cursor: default;
}
.searchBlockHeader .trigger li a.tabCurrent:before {
	background-image: url("/business/images_global/r_ico_tab_current_pc.png");
}

.searchBlockHeader .products {
	position: absolute;
	right: 0;
	top: 0;
}

/* 検索リスト */
.searchArea {
	margin-top: 1.2em;
}
.searchArea .rPanel .rPanelThumb a,
.searchArea .spPanel .spPanelThumb a,
.searchArea .rPanel .rPanelThumb .rPanelThumbLoader,
.searchArea .spPanel .spPanelThumb .rPanelThumbLoader {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-top: 61.9%;
	overflow: hidden;
	background: url("/business/images/r_case_thumb_loading.gif") no-repeat center center;
}
.searchArea .rPanel .rPanelThumb a .alt,
.searchArea .spPanel .spPanelThumb a .alt,
.searchArea .rPanel .rPanelThumb .rPanelThumbLoader .alt,
.searchArea .spPanel .spPanelThumb .rPanelThumbLoader .alt {
	display: none;
}
.searchArea .rPanel .rPanelThumb a img,
.searchArea .spPanel .spPanelThumb a img,
.searchArea .rPanel .rPanelThumb .rPanelThumbLoader img,
.searchArea .spPanel .spPanelThumb .rPanelThumbLoader img {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: auto;
	opacity: 0;
	backface-visibility: hidden;
}
.searchArea .panel-loaded .rPanelThumb a,
.searchArea .panel-loaded .spPanelThumb a,
.searchArea .panel-loaded .rPanelThumb .rPanelThumbLoader,
.searchArea .panel-loaded .spPanelThumb .rPanelThumbLoader  {
	background-image: none;
}
.searchArea .panel-loaded .rPanelThumb a img,
.searchArea .panel-loaded .spPanelThumb a img,
.searchArea .panel-loaded .rPanelThumb .rPanelThumbLoader img,
.searchArea .panel-loaded .spPanelThumb .rPanelThumbLoader img {
	opacity: 1;
	transition: opacity .4s linear;
}

.searchBox[data-hash="#case"] .rPanel .rPanelInner {
	margin-top: 10px;
}

/* -- SP -- */
body.responsive-sp .searchBlock {
	margin-top: 0;
}
body.responsive-sp .searchArea {
	margin-top: 0;
}

/* -----------------------------------------------------------
	製品検索（SP向け）
----------------------------------------------------------- */



/* -----------------------------------------------------------
	新着情報ブロック
----------------------------------------------------------- */
#newsBlock {
	margin-top: 30px;
}

/* -- SP -- */
body.responsive-sp #newsBlock {
	margin-top: 0;
}


/* 新着情報
----------------------------------------------------------- */
#newsArea {
	float: left;
	width: 710px;
}
#newsArea #scrollArea {
	width: 100%;
	height: 374px;
	overflow-y: scroll;
}
#newsArea #scrollArea .inner {
	padding: 0 12px 0 0;
}
#newsArea #scrollArea .inner dl {
	display: table;
	border-top: 1px solid #dbe0e4;
	font-size: 108%; /* 14px */
	line-height: 1.6;
}
#newsArea #scrollArea .inner dl dt {
	display: table-cell;
	width: 9em;
	padding: 0.5em 0;
}
#newsArea #scrollArea .inner dl dd {
	display: table-cell;
}
#newsArea #scrollArea .inner dl dd.icon {
	width: 6.5em;
	padding: 0.5em 0;
}
#newsArea #scrollArea .inner dl dd.icon span {
	display: inline-block;
	width: 5em;
	padding: 0.45em 0;
	background-color: #169898;
	text-align: center;
	color: #fff;
	font-size: 100%; /* 13px */
	line-height: 1;
}
#newsArea #scrollArea .inner dl dd.text {
	padding: 0.5em 1em 0.5em 0;
}

/* -- SP -- */
body.responsive-sp #newsArea {
	float: none;
	width: auto;
	background-color: transparent;
}
body.responsive-sp #newsArea #scrollArea {
	height: auto;
	overflow-y: auto;
}
body.responsive-sp #newsArea #scrollArea .inner {
	padding: 0;
	background-color: #fff;
}
body.responsive-sp #newsArea #scrollArea .inner dl {
	display: block;
	padding: 4.6875%; /* 30 / 640 */
}
body.responsive-sp #newsArea #scrollArea .inner dl:nth-child(n + 5) {
	display: none;
}
body.responsive-sp #newsArea #scrollArea .inner dl dt {
	display: inline;
	width: auto;
	padding: 0;
}
body.responsive-sp #newsArea #scrollArea .inner dl dd.icon {
	display: inline;
	width: auto;
	padding: 0;
	margin-left: 0.5em;
}
body.responsive-sp #newsArea #scrollArea .inner dl dd.text {
	display: block;
	padding: 0.5em 0 0 0;
}


/* バナーエリア
----------------------------------------------------------- */
#newsBlock .bnrArea {
	float: right;
	width: 230px;
	text-align: left;
}
#newsBlock .bnrArea li {
	margin-top: 10px;
}
#newsBlock .bnrArea li:first-child {
	margin-top: 0;
}
#newsBlock .bnrArea li a {
	display: block;
	padding: 20px 20px 14px 20px;
	background-color: #fff;
	color: #333;
	text-decoration: none;
}
#newsBlock .bnrArea li a span {
	display: block;
	margin-top: 14px;
}
#newsBlock .bnrArea li a span:hover {
	opacity: 0.8;
}
#newsBlock .bnrArea li a span:before {
	display: inline-block;
	width: 8px;
	height: 10px;
	margin-right: 0.6em;
	background: url("/business/images_global/r_ico_link_01.png") no-repeat;
	background-size: 100%;
	content: "";
}

/* -- SP -- */
body.responsive-sp #newsBlock .bnrArea {
	float: none;
	width: auto;
	padding: 4.6875% 3.125% 7.8125%; /* 30 20 50 / 640 */
	font-size: 108%; /* 14px */
}
body.responsive-sp #newsBlock .bnrArea li {
	margin-top: 3.33333333333333%; /* 20/600 */
}
body.responsive-sp #newsBlock .bnrArea li:first-child {
	margin-top: 0;
}
body.responsive-sp #newsBlock .bnrArea li a {
	padding: 7.14285714285714%; /* 40/560 */
}
body.responsive-sp #newsBlock .bnrArea li a span {
	margin-top: 6.66666666666667%; /* 32/480 */
}
body.responsive-sp #newsBlock .bnrArea li a span:before {
	width: 0.54em; /* 15/28 */
	height: 0;
	padding-top: 0.72em; /* 20/28 */
}


/* -----------------------------------------------------------
	関連会社ブロック
----------------------------------------------------------- */
#relationBlock {
	margin-top: 30px;
}
#relationBlock ul {
	margin-top: 20px;
}
#relationBlock ul:first-child {
	margin-top: 0;
}
#relationBlock ul li {
	float: left;
	display: table;
	width: 445px;
	margin-left: 20px;
}
#relationBlock ul li:first-child {
	margin-left: 0;
}
#relationBlock ul li .img,
#relationBlock ul li .txt {
	display: table-cell;
}
#relationBlock ul li .img {
	width: 120px;
	vertical-align: top;
}
#relationBlock ul li .txt {
	width: 295px;
	padding: 15px;
	background-color: #ebeef0;
	vertical-align: middle;
}
#relationBlock ul li .txt h3 {
	font-size: 108%;
	font-weight: normal;
	line-height: 1.4;
}
#relationBlock ul li .txt h3 a {
	position: relative;
	display: block;
	padding: 0 0 0 22px;
}
#relationBlock ul li .txt h3 a:before {
	position: absolute;
	left: 0;
	top: 2px;
	width: 16px;
	height: 16px;
	background: url("/business/images_global/r_ico_blank_01_pc.png") no-repeat;
	content: "";
}
#relationBlock ul li .txt p {
	margin-top: 8px;
}

/* -- SP -- */
body.responsive-sp #relationBlock {
	margin-top: 0;
}
body.responsive-sp #relationBlock ul {
	padding: 3.125% 3.125% 0; /* 20 20 0 / 640 */
	margin-top: 0;
}
body.responsive-sp #relationBlock ul li {
	float: none;
	width: 100%;
	margin-left: 0;
	margin-top: 3.33333333333333%; /* 20/600 */
}
body.responsive-sp #relationBlock ul li:first-child {
	margin-top: 0;
}
body.responsive-sp #relationBlock ul li .img,
body.responsive-sp #relationBlock ul li .txt {
	display: table-cell;
}
body.responsive-sp #relationBlock ul li .img {
	width: 20%; /* 120/600 */
}
body.responsive-sp #relationBlock ul li .txt {
	width: auto;
	padding: 0;
}
body.responsive-sp #relationBlock ul li .txt h3 a {
	padding: 5% 16.6666666666667% 5% 5%; /* 24 80 24 24 / 480 */
	background-color: #ebeef0;
	color: #333;
	text-decoration: none;
}
body.responsive-sp #relationBlock ul li .txt h3 a:before {
	left: auto;
	right: 5.83333333333333%; /* 28/480 */
	top: 50%;
	width: 1.07em; /* 30/28 */ /* 24/28 */
	height: 0;
	padding-top: 0.85em; /* 24/28 */
	margin-top: -0.535em; /* 1.07 / 2 */
	background-image: url("/business/images_global/r_ico_blank_02_sp.png");
	background-size: 100%;
}
body.responsive-sp #relationBlock ul li .txt p {
	display: none;
}