/* Y'S GEAR : download.css */


.contentsWidth {
	margin-bottom: 120px !important;
}

.commonTitleH2 {
	font-size: 2.4rem;
}

/* [ フォームパーツ ] */
.contentsWidth input,
.contentsWidth textarea,
.contentsWidth select,
.contentsWidth button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	font-size: 1.6rem;
	line-height: 1.4;
}

/* [ テキスト系 ] */
.contentsWidth input, 
.contentsWidth textarea {
	width: 100%;
	padding: 7px 10px;
	border: 1px solid #aeaeae;
}

/* [ セレクトボックス ] */
.contentsWidth .select {
	position: relative;
	border: 1px solid #aeaeae;
	border-radius: 4px;
	background: #fff;
}
.contentsWidth .select::before {
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	width: 0;
	height: 0;
	margin-top: -5px;
	border: 6px solid transparent;
	border-top: 11px solid #000;
	content: "";
}
.contentsWidth select {
	position: relative;
	width: 100%;
	padding: 5px 25px 5px 10px;
	border: none;
	background: none;
	cursor: pointer;
	z-index: 10;
}
.contentsWidth select::-ms-expand { /* IE */
	display: none;
}
.contentsWidth option {
	font-size: 1.6rem;
	line-height: 1;
}

/* [ ボタン ] */
.contentsWidth button {
	display: inline-block;
	padding: 7px;
	border: none;
	border-radius: 4px;
	box-sizing: border-box;
	background: #484848;
	color: #fff;
	font-size: 1.7rem;
	cursor: pointer;
}
.contentsWidth button:hover, 
.contentsWidth button:active {
	background: #999;
}

/* [ セクション ] */
.contentsWidth > section {
	margin-bottom: 75px;
}


/*======================================================================*
 *  [ notesBox | 注意事項 ]
 *======================================================================*/

.notesBox {
	margin-bottom: 30px;
	padding: 10px 15px;
	border-left: 3px solid #000;
	color: #000;
	font-size: 1.5rem;
}

.notesBox p + p {
	margin-top: 5px;
}
.notesBox .small {
	font-size: 1.3rem;
}

.notesBox a {
	color: #363a90;
	text-decoration: underline;
}
.notesBox a:hover, 
.notesBox a:active {
	text-decoration: none;
}


/*======================================================================*
 *  [ searchBox | 検索 ]
 *======================================================================*/

.searchBox {
	margin-bottom: 50px;
	color: #505050;
}

/* [ 見出し ] */
.searchBox h3 {
	margin-bottom: 10px;
	font-size: 1.7rem;
	line-height: 1.2;
}
.searchBox h3 span {
	display: inline-block;
	padding-bottom: 5px;
	border-bottom: 1px solid #505050;
}
.searchBox h3 span::before {
	display: inline-block;
	margin: 0 10px 0 5px;
	vertical-align: text-bottom;
	content: url(../img/icon_search.svg);
}

.searchBox h3 + p {
	margin-bottom: 10px;
	font-size: 1.4rem;
}
.searchBox h3 + p.ex span {
	display: inline-block;
	margin: 2px 5px;
	padding: 3px 5px 4px;
	border-radius: 5px;
	background: #ebebf4;
	color: #363A90;
	line-height: 1;
}
.searchBox h3 + p.ex br {
	display: none;
}

/* [ キーワード検索 ] */
.searchBox .keyword {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}
.searchBox .keyword input {
	width: 300px;
}
.searchBox .keyword button {
	width: 80px;
	margin-left: 10px;
}

/* [ 商品一覧検索 | タブ ] */
.searchBox .tabBox {
	position: relative;
}
.searchBox .tab {
	display: -webkit-flex;
	display: flex;
	position: absolute; /* Chrome対策 */
	visibility: hidden; /* Chrome対策 */
	margin: 0 -10px;
	padding-bottom: 20px;
}
.searchBox .tab li {
	display: -webkit-flex;
	display: flex;
	width: 33.33333333%;
	padding: 0 10px;
	box-sizing: border-box;
}
.searchBox .tab a {
	display: block;
	position: relative;
	width: 100%;
	padding: 15px 5px;
	border: 1px solid #aeaeae;
	border-radius: 4px;
	box-sizing: border-box;
	background: #ebebf4;
	color: #000;
	font-size: 1.7rem;
	text-align: center;
	cursor: pointer;
}
.searchBox .tab img {
	display: block;
	margin: 0 auto 5px;
}
.searchBox .tab p {
	margin-top: 5px;
	font-size: 1.2rem;
	line-height: 1.1;
}
.searchBox .tab.active a {
	background: #f6f5f5;
	color: #b4b4b4;
}
.searchBox .tab .active a {
	color: #fff;
	border-color: #363a90;
	background: #363a90;
}
.searchBox .tab .active a:hover, 
.searchBox .tab .active a:active {
	color: #fff !important;
}
.searchBox .tab .active a::after {
	position: absolute;
	left: 50%;
	bottom: -27px;
	width: 0;
	height: 0;
	margin-left: -11px;
	border: 11px solid transparent;
	border-top: 16px solid #363a90;
	content: "";
}

/* [ 商品一覧検索 | ボックス ] */
.searchBox .box {
	display: none;
}
.searchBox .box.active {
	display: block;
}

/* [ 商品一覧検索 | カテゴリ ] */
.searchBox .category {
	padding: 20px;
	background: #ebebf4;
	font-size: 1.6rem;
	line-height: 1.4;
}
.searchBox .category li {
	display: inline-block;
	margin: 5px 10px;
}
.searchBox .category li.active {
	font-weight: bold;
	border-bottom: 1px solid #363a90;
}
.searchBox .category li.active a {
	color: #363a90 !important;
}

/* [ 商品一覧検索 | 絞り込み ] */
.searchBox .filter {
	position: relative;
	margin-top: 20px;
	padding: 17px;
	border: 3px solid #d7d7d7;
}
.searchBox .filter::before {
	position: absolute;
	top: -23px;
	left: 50%;
	width: 0;
	height: 0;
	margin-left: -11px;
	border: 11px solid transparent;
	border-top: 16px solid #ebebf4;
	content: "";
}

.searchBox .filter .inner {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}
.searchBox .filter .inner p {
	width: 15%;
	color: #000;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1;
}
.searchBox .filter .inner p::before {
	display: inline-block;
	width: 24px;
	margin-right: 5px;
	vertical-align: middle;
	content: url(../img/icon_filter.svg);
}
.searchBox .filter .inner ol {
	display: -webkit-flex;
	display: flex;
	width: 70%;
}
.searchBox .filter .inner li {
	position: relative;
	padding: 0 15px 0 30px;
	width: 50%;
	box-sizing: border-box;
}
.searchBox .filter .inner li::before {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 24px;
	margin-top: -12px;
	border-radius: 50%;
	background: #737373;
	color: #fff;
	font-size: 1.4rem;
	line-height: 24px;
	text-align: center;
}
.searchBox .filter .inner li.first::before { content: "1"; }
.searchBox .filter .inner li.second::before { content: "2"; }

.searchBox .filter .inner button {
	width: 15%;
}


/*======================================================================*
 *  [ resultBox | 検索結果 ]
 *======================================================================*/

.resultBox {
	margin-bottom: 50px;
}

/* [ タイトル ] */
.resultBox .title {
	margin-bottom: 10px;
}
.resultBox .title > b, 
.resultBox .title h3, 
.resultBox .title p {
	display: inline-block;
}
.resultBox .title > b {
	color: #363a90;
	font-size: 2rem;
	line-height: 1.1;
}
.resultBox .title h3 {
	margin-right: 10px;
	color: #505050;
	font-size: 1.8rem;
}
.resultBox .title p {
	color: #363a90;
	font-size: 1.4rem;
}
.resultBox .title p b {
	font-size: 2rem;
}

/* [ テーブル ] */
.resultBox .table, 
.resultBox .table th, 
.resultBox .table td {
	box-sizing: border-box;
}
.resultBox .table {
	width: 100%;
	margin-bottom: 50px;
	line-height: 1.2;
}
.resultBox .table th, 
.resultBox .table td {
	border-right: 1px dotted #aeaeae;
	border-left: 1px dotted #aeaeae;
	vertical-align: middle;
}
.resultBox .table .img { width: 80px; border-left: none; }
.resultBox .table .img img { width: 70px; }
.resultBox .table .hand { width: 80px; }
.resultBox .table .install { width: 80px; border-right: none }

/* [ テーブル | 見出し ] */
.resultBox .table thead {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	background: #969696;
	color: #fff;
	font-size: 1.4rem;
}
.resultBox .table thead th, 
.resultBox .table thead td {
	padding: 10px 5px;
	border-color: #fff;
}

/* [ テーブル | 中身 ] */
.resultBox .table tbody {
	font-size: 1.3rem;
}
.resultBox .table tbody tr {
	border-bottom: 1px solid #aeaeae;
}
.resultBox .table tbody th, 
.resultBox .table tbody td {
	padding: 10px;
}
.resultBox .table tbody td[onclick] {
	cursor: pointer;
}
.resultBox .table tbody .svg {
	fill: #969696;
	vertical-align: middle;
}
.resultBox .table tbody .img {
	padding: 5px;
}
.resultBox .table tbody .name {
	font-size: 1.4rem;
}
.resultBox .table tbody .model {
	width: 20%;
}
.resultBox .table tbody .code {
	width: 10em;
	text-align: center;
}
.resultBox .table tbody .hand, 
.resultBox .table tbody .install {
	text-align: center;
}
/* オンマウス */
.resultBox .table tbody tr:hover { background: #fdeee5; }
.resultBox .table tbody tr:hover .svg { fill: #e95900; }
.resultBox .table tbody td[onclick]:hover, 
.resultBox .table tbody td[onclick]:active { background: #e95900; color: #fff; }
.resultBox .table tbody td[onclick]:hover .svg, 
.resultBox .table tbody td[onclick]:active .svg { fill: #fff; }


/*======================================================================*
 *  [ btnBox | 戻るボタン ]
 *======================================================================*/

.btnBox {
	margin-bottom: 50px;
	text-align: center;
}

.btnBox a {
	display: inline-block;
	position: relative;
	padding: 20px 20px 20px 50px;
	border: 1px solid #363a90;
	border-radius: 4px;
	background: #363a90;
	color: #fff;
	font-size: 1.8rem;
}
.btnBox a::before {
	position: absolute;
	top: 50%;
	left: 24px;
	width: 15px;
	height: 15px;
	margin-top: -8px;
	border-top: 4px solid #fff;
	border-left: 4px solid #fff;
	content: "";
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.btnBox a:hover, 
.btnBox a:active {
	background: #ebebf4;
}
.btnBox a:hover::before, 
.btnBox a:active::before {
	border-color: #363a90;
}


/*======================================================================*
 *  [ specialLink | スペシャルリンク ]
 *======================================================================*/

.specialLink a {
	display: block;
	position: relative;
	max-width: 330px;
	margin: 0 auto;
	padding: 15px 40px;
	border: 1px solid #363A90;
	color: #363A90;
	font-size: 1.8rem;
	line-height: 1.2;
	text-align: center;
}
.specialLink a:hover, 
.specialLink a:active { background: #ebebf4; }
.specialLink a::after {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 13px;
	height: 13px;
	margin-top: -10px;
	border-top: 5px solid #9a9cc7;
	border-right: 5px solid #9a9cc7;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	content: "";
}
.specialLink a b, 
.specialLink a span { display: inline-block; }
.specialLink a span {
	color: #686bac;
	font-size: 1.2rem;
}


/*======================================================================*
 *  [ Media Queries 768 ] 
 *======================================================================*/

@media screen and (max-width: 768px) {
	
	/*==================================================================*
	 *  [ searchBox | 検索 ]
	 *==================================================================*/
	
	/* [ 商品一覧検索 | タブ ] */
	.searchBox .tab span {
		display: none;
	}
	
	/* [ 商品一覧検索 | 絞り込み ] */
	.searchBox .filter .inner {
		display: block;
		margin-right: -10px;
		margin-left: 0;
	}
	
	.searchBox .filter .inner p {
		width: 100%;
		margin-bottom: 5px;
	}
	
	.searchBox .filter .inner ol {
		width: 100%;
		margin-bottom: 20px;
	}
	
	.searchBox .filter .inner button {
		display: block;
		width: 125px;
		margin: 0 auto;
	}
	
	
	/*==================================================================*
	 *  [ resultBox | 検索結果 ]
	 *==================================================================*/
	
	/* [ テーブル ] */
	.resultBox .table .img { width: 60px; }
	.resultBox .table .img img { width: 50px; }
	.resultBox .table .hand { width: 60px; }
	.resultBox .table .install { width: 60px; }
	
	
} /* */


/*======================================================================*
 *  [ Media Queries 568 ] 
 *======================================================================*/

@media screen and (max-width: 568px) {
	
	.contentsWidth {
		margin-bottom: 60px !important;
	}
	
	.commonTitleH2 {
		font-size: 2rem;
	}
	
	/*==================================================================*
	 *  [ searchBox | 検索 ]
	 *==================================================================*/
	
	/* [ 商品一覧検索 | タブ ] */
	.searchBox .tab {
		margin: 0 -5px;
	}
	.searchBox .tab li {
		padding: 0 5px;
	}
	.searchBox .tab a {
		font-size: 1.5rem;
	}
	.searchBox .tab p {
		display: none;
	}
	
	.searchBox h3 + p.ex span {
		margin: 5px 10px 0 0;
	}
	.searchBox h3 + p.ex br {
		display: block;
	}
	
	/* [ 商品一覧検索 | カテゴリ ] */
	.searchBox .category {
		padding: 7px 5px;
		font-size: 1.4rem;
	}
	
	/* [ 商品一覧検索 | 絞り込み ] */
	.searchBox .filter {
		padding: 10px;
	}
	
	.searchBox .filter h4 {
		padding-bottom: 15px;
		margin-bottom: 15px;
		border-bottom: 1px dashed #ccc;
		font-size: 1.6rem;
	}
	
	.searchBox .filter .inner {
		margin-right: 0;
	}
	
	.searchBox .filter .inner ol {
		display: block;
		margin-bottom: 10px;
	}
	.searchBox .filter .inner li {
		width: 100%;
		padding: 0;
	}
	.searchBox .filter .inner li + li {
		margin-top: 10px;
	}
	
	
	/*==================================================================*
	 *  [ resultBox | 検索結果 ]
	 *==================================================================*/
	
	.resultBox .table th, 
	.resultBox .table td {
		border-right: none;
		border-left: none;
	}
	
	/* [ テーブル | 見出し ] */
	.resultBox .table thead {
		display: none;
	}
	
	/* [ テーブル | 中身 ] */
	.resultBox .table tbody tr {
		display: block;
		border: 1px solid #aeaeae;
		padding: 10px;
	}
	.resultBox .table tbody tr + tr {
		margin-top: -1px;
	}
	.resultBox .table tbody tr:hover {
		background: none;
	}
	.resultBox .table tbody tr::after {
		display: block;
		clear: both;
		content: "";
	}
	.resultBox .table tbody td {
		display: block;
		padding: 0;
	}
	.resultBox .table tbody .img {
		display: none;
	}
	.resultBox .table tbody .name {
		margin-bottom: 10px;
		font-weight: bold;
	}
	.resultBox .table tbody .model {
		width: auto;
		margin-bottom: 5px;
		padding: 2px 5px;
		background: #ebebf4;
		color: #363a90;
	}
	.resultBox .table tbody .model::before {
		content: "適応機種：";
	}
	.resultBox .table tbody .code {
		width: auto;
		margin-bottom: 10px;
		color: #666;
		text-align: left;
	}
	.resultBox .table tbody .hand, 
	.resultBox .table tbody .install {
		display: none;
	}
	.resultBox .table tbody .hand[onclick], 
	.resultBox .table tbody .install[onclick] {
		display: block;
		float: left;
		width: 48%;
		padding: 7px 5px;
		border: 1px solid #ccc;
		border-radius: 4px;
		background: #f6f5f5;
	}
	.resultBox .table tbody .hand {
		margin-right: 4%;
	}
	.resultBox .table tbody .hand::before { content: "取扱説明書　"; }
	.resultBox .table tbody .install::before { content: "取付説明書　"; }
	
	
	/*==================================================================*
	 *  [ btnBox | 戻るボタン ]
	 *==================================================================*/
	
	.btnBox a {
		font-size: 1.6rem;
	}
	.btnBox a::before {
		margin-top: -10px;
	}
	
	
	/*==================================================================*
	 *  [ specialLink | スペシャルリンク ]
	 *==================================================================*/
	
	.specialLink a {
		max-width: 280px;
		padding: 15px 40px 15px 15px;
		font-size: 1.6rem;
	}
	
	
} /* */