@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */

/* フォント */
.prod-category,
.prod-new,
.prod-name {
	font-weight: bold;
}

/* カラー */
.prod-new {
	color: #FF6200;
}

.prod-category {
	background-color: #9B9B9B;
	color: #fff;
}

.table-result th {
	background-color: #FAFAFA;
	font-weight: 500;
}

.table-result th[data-name] {
	background-color: #fff;
}

.table-result td {
	background-color: #fff;
	text-align: center;
}

.category-row td,
#resultBody .category-ttl {
	background-color: #DB8731;
}

.category-ttl {
	color: #fff;
}

/* メインタイトル */
.main-text {
	font-weight: 500;
	text-align: center;
}

/* リンクボタンリスト */
ul.list-link-btn {
	display: flex;
}

ul.list-link-btn li {
	margin-left: 10px;
}

ul.list-link-btn li:first-child {
	margin-left: 0;
}

ul.list-link-btn a {
	display: inline-block;
	padding: .5em 1em .5em .5em;
	line-height: 1;
	background-color: #fff;
	color: #535353;
	border: solid 1px #535353;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
}

ul.list-link-btn a .fa-chevron-right {
	margin-right: .25em;
	position: relative;
	top: -.1em;
}

ul.list-link-btn a:hover {
	background: #535353;
	color: #fff;
}

.links-center ul.list-link-btn {
	justify-content: center;
}

/* タブメニュー */
#options {
	width: 90%;
	margin: 4rem auto 0;
}

.tab-menu-item[data-tab]:not(.active) {
	display: none;
}

.tab-menu-accordion-btn a[data-tabaccordion-target="tab-menu-body"] {
	display: block;
	height: 30px;
	background-color: #9B9B9B;
	color: #fff;
	text-align: center;
	text-decoration: none;
}

.tab-menu-accordion-btn .fa-chevron-up {
	width: auto;
	height: 80%;
	transition: transform .3s;
}

.tab-menu-accordion-btn a:not(.tabaccordion-open) .fa-chevron-up {
	transform: rotate(180deg);
}

/* 検索条件 */
ul.list-options {
	display: flex;
	flex-wrap: wrap;
}

ul.list-options li {
	position: relative;
	display: inline-block;
}

ul.list-options li input {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	opacity: 0;
	cursor: pointer;
}

/* 比較表ボディ：チェックボックス */
.body-thead .row-ttl {
	position: relative;
}

.body-thead .row-ttl input {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	opacity: 0;
	cursor: pointer;
}

.body-thead .row-ttl input[type="checkbox"]+label {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 0 0 1.6em;
	font-size: 1.2rem;
	line-height: 1.2;
	background-image: url(common/images/check-off.svg);
	background-repeat: no-repeat;
	background-position: left top 2px;
	background-size: 1.2em auto;
}

.body-thead .row-ttl input[type="checkbox"]:checked+label {
	background-image: url(common/images/check-on.svg);
}

/* ポップアップ：コンテナ */
.popup-scroll-prevent {
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}

.popup-outer {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .8);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 11;
	display: none;
}

#popup:not(.popup-open) {
	z-index: -1;
}

.popup-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 5%;
	position: relative;
}

.popup-container {
	background-color: #fff;
	border-radius: 5px;
	position: relative;
}

.popup-container .btn-close {
	width: 26px;
	height: 26px;
	position: absolute;
	top: 16px;
	right: 20px;
	cursor: pointer;
}

.popup-container .btn-close::before {
	content: '';
	width: 2px;
	height: 100%;
	background-color: #000;
	position: absolute;
	top: 0;
	left: calc(50% - 1px);
	transform: rotate(45deg);
}

.popup-container .btn-close::after {
	content: '';
	width: 100%;
	height: 2px;
	background-color: #000;
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	transform: rotate(225deg);
}

/* ポップアップ：辞書データ */
.dictionary-data-container-wrap {
	max-height: 400px;
	overflow-y: auto;
}

.dictionary-title {
	font-weight: bold;
}

.dictionary-publisher {
	font-weight: bold;
}

.dictionary-recording-type {
	font-size: 1.4rem;
	color: #777777;
}

.dictionary-recording-num {
	margin-bottom: 15px;
	font-size: 1.4rem;
	color: #777777;
}

.dictionary-description p {
	margin-top: 10px;
}

ul.list-dictionary-caption {
	color: #777777;
}

/* 比較表・共通 */
#result {
	display: none;
	border: solid 1px #ddd;
}

.table-result label,
.table-result {
	word-break: break-all;
	word-wrap: break-word;
	white-space: normal;
	border-collapse: collapse;
	border-spacing: 0;
}

.table-result th {
	border-right: solid 1px #D0D0D0;
	border-bottom: solid 1px #D0D0D0;
}

.table-result td {
	border-right: solid 1px #D0D0D0;
	border-bottom: solid 1px #D0D0D0;
}

.table-result .result-body th {
	text-align: left;
}

.table-result .result-body .pos-rel {
	position: relative;
}

/* 比較表ボディ：チェックボックス */
.table-result input {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	opacity: 0;
	cursor: pointer;
}

.table-result input[type="checkbox"]+label {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 8px 5px 8px 25px;
	line-height: 1.2;
	background-image: url(common/images/check-off.svg);
	background-repeat: no-repeat;
	background-position: left 5px top 6px;
	background-size: 16px auto;
}

.table-result input[type="checkbox"]:checked+label {
	background-image: url(common/images/check-on.svg);
}

/* 比較表ボディ：製品情報 */
.prod-main {
	width: 100%;
	height: 100%;
	text-align: center;
	position: relative;
}

.prod-main a {
	display: block;
	height: 100%;
	padding: 5px 5px;
	text-decoration: none;
}

.prod-main a:hover {
	background-color: #E0EEF5;
	color: #366DA0;
}

.prod-category {
	width: 100%;
}

.prod-main .prod-close {
	width: 1.5em;
	height: 1.5em;
	font-size: 1.4rem;
	line-height: 1.5;
	background-color: gray;
	border-radius: 100%;
	color: #fff;
	position: absolute;
	right: 6px;
	bottom: 6px;
	cursor: pointer;
	transition: opacity .3s;
}

.prod-main .prod-close:hover {
	opacity: .6;
}

.caption-container {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

.hidden {
	display: none;
}

/* ====================================
	1023px以下専用スタイル
===================================== */
@media only screen and (max-width: 1023px) {

	/* メインタイトル */
	.main-title {
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 2.4rem;
		border-bottom: solid 1px #D9D9D9;
	}

	.main-text-container {
		margin-bottom: 2rem;
	}

	.main-text {
		margin: 2rem auto 1rem;
		font-size: 1.6rem;
	}

	.main-sub-text {
		font-size: 1.4rem;
		text-align: center;
	}

	/* リンクボタンリスト */
	.links-top {
		display: none;
	}

	.links-center ul.list-link-btn {
		margin-top: 4rem;
	}

	ul.list-link-btn a {
		font-size: 1.2rem;
	}

	/* タブメニュー */
	.tab-menu-header {
		border: solid 1px #9B9B9B;
		background-color: #F7F7F7;
	}

	ul.list-tab-menu {
		display: flex;
		flex-wrap: wrap;
	}

	ul.list-tab-menu li {
		width: calc(100% / 3);
	}

	ul.list-tab-menu li a {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 40px;
		font-size: 1.4rem;
		line-height: 1;
		border-right: solid 1px #9B9B9B;
		border-bottom: solid 1px #9B9B9B;
		text-align: center;
		text-decoration: none;
		position: relative;
	}

	ul.list-tab-menu li:nth-child(3n) a {
		border-right: none;
	}

	ul.list-tab-menu li:nth-child(3n-2):last-child a {
		border-bottom: none;
	}

	ul.list-tab-menu li:nth-last-child(2):nth-child(3n) a,
	ul.list-tab-menu li:nth-last-child(3):nth-child(3n-1) a {
		border-bottom: solid 1px #9B9B9B;
	}

	ul.list-tab-menu li a.active {
		padding-bottom: 6px;
		background-color: #ECECEC;
	}

	ul.list-tab-menu li a.active::before {
		content: '';
		display: block;
		width: 94%;
		height: 3px;
		background-color: #DB8731;
		border-radius: 10px;
		position: absolute;
		bottom: 5px;
		left: 3%;
	}

	ul.list-tab-menu .wrap {
		line-height: 1;
	}

	ul.list-tab-menu .tab-name {
		display: inline-block;
		font-size: 1.4rem;
		font-weight: 500;
	}

	ul.list-tab-menu .kakko {
		display: inline-block;
		width: 100%;
		font-size: 1rem;
		white-space: nowrap
	}

	.tab-menu-body {
		height: 160px;
		border-left: solid 1px #9B9B9B;
		border-right: solid 1px #9B9B9B;
		border-bottom: solid 1px #9B9B9B;
		overflow-y: auto;
		display: none;
	}

	/* 検索条件 */
	ul.list-options {
		padding: 5px;
	}

	ul.list-options li {
		margin-right: 10px;
		margin-bottom: 10px;
	}

	ul.list-options li input[type="checkbox"]+label {
		display: flex;
		align-items: center;
		height: 100%;
		margin: 0;
		padding: 4px 34px 4px 20px;
		font-size: 1.2rem;
		line-height: 1.2;
		background-color: #fff;
		background-image: url(common/images/check-off.svg);
		background-repeat: no-repeat;
		background-position: left 0 top 4px;
		background-size: 16px auto;
	}

	ul.list-options li input[type="checkbox"]:checked+label {
		background-image: url(common/images/check-on.svg);
	}

	ul.list-options li a[data-popup] {
		display: block;
		width: 24px;
		height: 24px;
		font-size: 1.4rem;
		font-weight: 500;
		line-height: 1.6;
		background-color: #D2D2D2;
		color: #555;
		border-radius: 20px;
		text-align: center;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(0, -50%);
		text-decoration: none;
	}

	/* ポップアップ：コンテナ */
	.popup-container {
		max-width: 640px;
		padding: 5rem 5% 4rem;
	}

	/* ポップアップ：辞書データ */
	.dictionary-data-img {
		width: 200px;
		margin: 0 auto 2rem;
	}

	.dictionary-data-text {
		font-size: 1.4rem;
	}

	.dictionary-title {
		font-size: 1.8rem;
	}

	.dictionary-publisher {
		margin-bottom: 1em;
		font-size: 1.2rem;
	}

	ul.list-dictionary-caption {
		margin-top: 1em;
	}

	/* オプションボタン */
	ul.list-btns {
		width: 120px;
		margin: 0 auto;
	}

	ul.list-btns li:first-child {
		margin-bottom: 10px;
	}

	ul.list-btns li a {
		display: block;
		padding: 10px 15px;
		font-size: 1rem;
		font-weight: bold;
		background: #e5e5e5;
		background: -moz-linear-gradient(top, #e5e5e5 0%, #e5e5e5 50%, #dbdbdb 51%, #dbdbdb 100%);
		background: -webkit-linear-gradient(top, #e5e5e5 0%, #e5e5e5 50%, #dbdbdb 51%, #dbdbdb 100%);
		background: linear-gradient(to bottom, #e5e5e5 0%, #e5e5e5 50%, #dbdbdb 51%, #dbdbdb 100%);
		color: #000;
		text-shadow: 0 0 3px #EFF5FB;
		border: solid 1px #D0D0D0;
		border-radius: 5px;
		text-align: center;
		text-decoration: none;
	}

	ul.list-btns a .fa-check-square {
		width: 1.2em;
		height: 1.2em;
		margin-right: .25em;
		position: relative;
		top: -.1em;
	}

	/* 比較表・共通 */
	#result {
		width: 90%;
		margin: 4rem auto 0;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.table-result label,
	.table-result {
		table-layout: fixed;
	}

	#resultHeader {
		display: block;
	}

	#tableResult,
	#resultHeader {
		width: 680px;
	}

	#resultBody {
		height: 44vh;
		display: block;
		overflow-y: scroll;
	}

	#resultBody th:first-child,
	#resultHeader th:first-child {
		width: 196px;
	}

	#resultBody td[data-name],
	#resultHeader th[data-name] {
		width: 38px;
	}

	#resultHeader th {
		height: 180px;
	}

	.result-body {
		font-size: 1rem;
	}

	.category-ttl {
		padding: 0 5px;
		font-size: 1.2rem;
	}

	.result-body tr:not(.active) {
		display: none;
	}

	/* 比較表ボディ：製品情報 */
	.prod-category,
	.prod-zaiko,
	.prod-new,
	.prod-img {
		display: none;
	}

	.prod-main a {
		padding: 0;
		text-decoration: none;
		pointer-events: none;
	}

	.prod-name {
		display: flex;
		align-items: center;
		width: 100%;
		padding-top: 32px;
		font-size: 1.6rem;
		writing-mode: vertical-rl;
		text-orientation: upright;
	}

	.prod-arrow {
		width: 20px;
		height: 20px;
		background-image: url(common/images/chevron-right-solid.svg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 12px auto;
		border: solid 1px #707070;
		border-radius: 50%;
		position: absolute;
		top: 4px;
		left: 50%;
		transform: translate(-50%, 0);
		pointer-events: auto;
	}

	.prod-main .prod-close {
		width: 26px;
		height: 26px;
		padding-top: 3px;
		font-size: 18px;
		line-height: 1;
		background-color: #535353;
		border-radius: 0;
		left: 50%;
		bottom: 4px;
		transform: translate(-50%, 0);
	}

	.prod-zaiko-sp {
		font-size: 1.2rem;
		color: #00a0e9;
	}

	/* test */
	#result,
	.tab-menu-body {
		will-change: transform;
	}

}

/* ====================================
	567px以下専用スタイル
===================================== */
@media only screen and (max-width: 567px) {}

/* ====================================
	568以上767px以下専用スタイル
===================================== */
@media only screen and (min-width: 568px) and (max-width: 1023px) {}

/* ====================================
	1024px以上印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) {

	main[data-footer-type] {
		padding-bottom: 8rem;
	}

	/* メインタイトル */
	.main-title {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 10rem;
		font-size: 3rem;
		border-top: solid 1px #d9d9d9;
	}

	.main-text-container {
		margin-bottom: 6rem;
	}

	.main-text {
		margin: 2rem auto 0;
		font-size: 2rem;
	}

	.main-sub-text {
		font-size: 1.4rem;
		text-align: center;
	}

	/* リンクボタンリスト */
	.links-top {
		position: relative;
	}

	.links-top ul.list-link-btn {
		position: absolute;
		top: -70px;
		right: 20px;
	}

	.links-center ul.list-link-btn {
		margin-top: 8rem;
	}

	ul.list-link-btn a {
		font-size: 1.4rem;
	}

	/* タブメニュー */
	.tab-menu-container {
		margin-bottom: 6rem;
		padding-top: 45px;
		position: relative;
	}

	.tab-menu-header {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	ul.list-tab-menu {
		display: flex;
		height: 46px;
	}

	ul.list-tab-menu li {
		width: 12%;
	}

	ul.list-tab-menu li.cate-eigo-kentei {
		width: 22%;
	}

	ul.list-tab-menu .cate-gaikokugo {
		width: 18%;
	}

	ul.list-tab-menu a {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 1.5rem;
		line-height: 1.2;
		border-top: solid 1px #9B9B9B;
		border-right: solid 1px #9B9B9B;
		border-bottom: solid 1px #9B9B9B;
		text-align: center;
		text-decoration: none;
		position: relative;
	}

	ul.list-tab-menu li:first-child a {
		border-left: solid 1px #9B9B9B;
	}

	ul.list-tab-menu li a.active {
		padding-bottom: 6px;
		background-color: #ECECEC;
		border-bottom: solid 1px #ECECEC;
	}

	ul.list-tab-menu li a.active::before {
		content: '';
		display: block;
		width: 94%;
		height: 5px;
		background-color: #DB8731;
		border-radius: 10px;
		position: absolute;
		bottom: 0;
		left: 3%;
	}

	ul.list-tab-menu .wrap {
		line-height: 1;
	}

	ul.list-tab-menu .tab-name {
		display: inline-block;
		font-size: 1.6rem;
		font-weight: 500;
	}

	ul.list-tab-menu .kakko {
		display: inline-block;
		width: 100%;
		font-size: .8em;
		white-space: nowrap
	}

	.tab-menu-body {
		padding: 20px 20px;
		background-color: #ECECEC;
		border: solid 1px #9B9B9B;
	}

	/* 検索条件 */
	ul.list-options li {
		margin-right: 1rem;
		margin-bottom: 0.5rem;
	}

	ul.list-options li input[type="checkbox"]+label {
		display: flex;
		align-items: center;
		min-width: 278px;
		height: 100%;
		margin: 0;
		padding: .4em 4em .4em 2em;
		font-size: 1.2rem;
		line-height: 1.2;
		background-color: #fff;
		background-image: url(common/images/check-off.png);
		background-repeat: no-repeat;
		background-position: left .4em center;
		background-size: 1.4em auto;
		border: solid 1px #A7A7A7;
		border-radius: 20px;
	}

	ul.list-options li input[type="checkbox"]:checked+label {
		background-image: url(common/images/check-on.png);
	}

	ul.list-options li a[data-popup] {
		display: block;
		width: 1.5em;
		height: 1.5em;
		font-size: 1.2rem;
		font-weight: 500;
		line-height: 1.5;
		background-color: #D2D2D2;
		color: #555;
		border-radius: 20px;
		text-align: center;
		position: absolute;
		top: 50%;
		right: .4em;
		transform: translate(0, -50%);
		text-decoration: none;
	}

	/* ポップアップ：コンテナ */
	.popup-container {
		flex-shrink: 0;
		max-width: 960px;
		padding: 4rem 5rem 4rem 4rem;
	}

	/* ポップアップ：辞書データ */
	.dictionary-data-container {
		display: flex;
	}

	.dictionary-data-img {
		width: 40%;
		max-width: 40%;
	}

	.dictionary-data-text {
		width: 60%;
		padding: 0 2rem;
		font-size: 1.5rem;
	}

	.dictionary-title {
		font-size: 2rem;
	}

	.dictionary-publisher {
		margin-bottom: 1em;
		font-size: 1.4rem;
	}

	ul.list-dictionary-caption {
		margin-top: 1.5em;
	}

	/* オプションボタン */
	ul.list-btns {
		width: 100%;
		padding: 24px 28px;
	}

	ul.list-btns li {
		width: 220px;
	}

	ul.list-btns li:first-child {
		margin-bottom: 2rem;
	}

	ul.list-btns li a {
		display: block;
		padding: .8em;
		font-size: 1.5rem;
		font-weight: bold;
		background: #e5e5e5;
		background: -moz-linear-gradient(top, #e5e5e5 0%, #e5e5e5 50%, #dbdbdb 51%, #dbdbdb 100%);
		background: -webkit-linear-gradient(top, #e5e5e5 0%, #e5e5e5 50%, #dbdbdb 51%, #dbdbdb 100%);
		background: linear-gradient(to bottom, #e5e5e5 0%, #e5e5e5 50%, #dbdbdb 51%, #dbdbdb 100%);
		color: #000;
		text-shadow: 0 0 3px #EFF5FB;
		border: solid 1px #D0D0D0;
		border-radius: 5px;
		text-align: center;
		text-decoration: none;
	}

	ul.list-btns a .fa-check-square {
		width: 1.2em;
		height: 1.2em;
		margin-right: .25em;
		position: relative;
		top: -.1em;
	}

	/* 比較表・共通 */
	#result {
		width: 90%;
		height: 70vh;
		margin: 0 auto;
		overflow-x: scroll;
		overflow-y: scroll;
		position: relative;
	}

	#tableResult {
		width: 1900px;
		text-align: center;
	}

	#resultHeader {
		display: block;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 1;
	}

	#resultBody {
		display: block;
	}

	.fixed01 {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 3;
	}

	.fixed03 {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		left: 0;
	}

	#tableBody th:first-child,
	#tableResult th:first-child {
		width: 280px;
	}

	#resultBody [data-name],
	#resultHeader [data-name] {
		width: 130px;
	}

	.result-body {
		font-size: 1.2rem;
	}

	.category-ttl {
		padding: 0 10px;
		font-size: 1.4rem;
	}

	/* 比較表ボディ：製品情報 */
	.prod-main {
		font-size: 1.3rem;
	}

	.prod-category {
		margin-bottom: 5px;
	}

	.prod-new {
		font-size: 1.2rem;
	}

	.prod-img {
		padding: 0 10%;
	}

	.prod-name {
		font-size: 1.8rem;
	}

	.prod-label {
		height: 20px;
	}

	/* 在庫僅少 */
	.prod-zaiko {
		display: inline-block;
		padding: 0 .5em;
		font-size: 1.2rem;
		font-weight: normal;
		color: #E6000D;
		border: solid 1px #E6000D;
	}

	.prod-zaiko-sp {
		display: none;
	}
}

/* ====================================
	1024px以上1199px以下印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) and (max-width: 1199px) {}

/* ====================================
	IE
===================================== */
@media screen and (min-width: 0\0) and (min-resolution: +72dpi) {

	/* 比較表・共通 */
	#result {
		overflow-x: auto;
		overflow-y: hidden;
	}

	.table-result label,
	.table-result {
		table-layout: fixed;
	}

	#resultHeader {
		display: block;
	}

	#resultBody {
		height: 60vh;
		display: block;
		overflow-y: scroll;
	}

	#tableResult,
	#resultHeader {
		width: 1900px;
	}

}