/* CSS Document */

/*
Theme Name: nippo-techinfo-en
Theme Author: Kikaku Henshu Sha
*/

/*カテゴリーが複数ある場合、">"を表示*/

.category{
	display: flex;
	width: fit-content;
	margin-left: auto;
	margin-right: 0;
	margin-bottom: 16px;
	padding: 0 1em;
}

.category ul{
	display: flex;
}

.category ul li{
	margin: 0;
}

.category ul li+li::before{
	content: '>';
}

/*category.phpにおいて表示を切り替え*/

.view-change{
	display: inline-block;
	font-size: 1em;
	width: calc(6em + 30px);
	height: calc(1em + 20px);
	text-align: center;
	color: #009370;
	background-color: #fff;
	border: 1px solid #009370;
	position: relative;
	box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.4);
	cursor: pointer;
}

.view-change::after{
	content: 'Change to list';
	position: absolute;
	top: 8px;
	left: 12px;
}

.view-change.active{
	width: calc(7em + 30px);
}

.view-change.active::after{
	content: 'Change to index'
}

.tech_search_list.list-off{
	display: none;
}

.result_table_area{
	display: none
}

.result_table_area.table-active{
	display: block;
}

/*category.phpにおける特長マークの説明*/

.guide-active{
	display: inline-block;
	font-size: 1em;
	width: calc(10em + 24px);
	height: calc(1em + 24px);
	text-align: center;
	color: #009370;
	background-color: #fff;
	border: 1px solid #009370;
	position: relative;
	box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.4);
	cursor: pointer;
}

.mark-guide{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,.7);
	z-index: 10000;
	transition: all ,5s;
}

.mark-guide.mark-active{
	display: block;
}

.mark-guide-image{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	width: fit-content;
}

.mark-guide-image img{
	width: auto;
}

.guide-close::after{
	content: '\f00d';
	font-family: 'Font Awesome 5 free';
	font-weight: 900;
	position: absolute;
	right: 0;
	color: #fff;
	font-size: 2em;
	cursor: pointer;
}

/*category.phpにおけるページネーションのデザイン*/

.screen-reader-text{
	display: none;
}

.page-numbers{
	display: inline-block;
	background: #009370;
	color: #fff!important;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.4);
	margin-left: .5em;
	vertical-align: middle;
}

.next.page-numbers::after{
	content: '\f101';
	font-family: 'Font Awesome 5 free';
	font-weight: 900;
}

.prev.page-numbers::after{
	content: '\f100';
	font-family: 'Font Awesome 5 free';
	font-weight: 900;
}

.page-numbers.current{
	background: #ad2a4b;
}

/*絞り込み検索のデザイン調整*/

.more_info_form{
	animation: fadeIn .5s ease;
}

@keyframes fadeIn{
	0%{
		opacity: 0;
		transform: translateY(-10px);
	}
	
	100%{
		opacity: 1;
		transform: none;
	}
}

.vkfs{
	padding: 20px;
}

.vkfs__labels{
	display: block!important;
}

.vkfs:where(:not(.vkfs__layout--min)) .vkfs__outer-wrap{
	display: flex;
}

.vkfs__outer-wrap.vkfs__taxonomy.vkfs__outer-wrap--col-xs-12.vkfs__outer-wrap--col-sm-12.vkfs__outer-wrap--col-md-6.vkfs__outer-wrap--col-lg-6.vkfs__outer-wrap--col-xl-6.vkfs__outer-wrap--col-xxl-6.search-category{
	display: none;
}

.vkfs__label-name{
	width: 17em;
	text-align: center;
	font-weight: normal!important;
	display: grid;
	align-content: center;
	margin-bottom: 0!important;
}

.vkfs select{
	width: 20em!important;
}

.vkfs button[type=submit]{
	width: fit-content!important;
	margin: 0 auto;
	border: none;
	display: block;
}

@media screen and (max-width:768px){
	.vkfs:where(:not(.vkfs__layout--min)) .vkfs__outer-wrap{
		display: block;
	}
	
	.vkfs__label-name, .vkfs select{
		width: 100%!important;
	}
}

/* 一覧ページ */

.tech_info_table.common{
	display: block;
}

.tech_info_table.product{
	display: none;
}

.tech_info_table.common.delete{
	display: none;
}

.tech_info_table.product.appear{
	display: block;
}