/* CSS Document */

/*
Theme Name: nippo-techinfo
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(4em + 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;
}

.view-change::after{
	content: '一覧表示';
	position: absolute;
	top: 8px;
	left: 12px;
}

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

.view-change.active::after{
	content: 'インデックス表示'
}

.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(8em + 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;
}

/*category.phpにおけるカラム表示のデザイン*/

.result_column_area{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start
}

.result_column{
	width: 30%;
	margin: 20px 0;
	margin-right: 3%;;
	color: #333!important;
}

.result_column a img{
	height: 200px;
	object-fit: cover;
}

.column_general_name{
	font-size: .7em;
	margin-bottom: 0!important;
	padding-left: 0!important;
}

.column_own_name{
	font-size: 1.2em;
	padding-left: 0!important;
}

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

.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;
	margin: initial!important;
	padding: calc(var(--vk-size-text)*1) 0; 
}

.vkfs:where(:not(.vkfs__layout--min)) .vkfs__outer-wrap + div{
	border-top: 1px solid #333;
}

.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: 23%;
	text-align: center;
	font-weight: normal!important;
	display: grid;
	align-content: center;
	margin-bottom: 0!important;
}

.vkfs ul.vkfs__input-wrap{
	width: 77%;
	justify-content: flex-start;
}

.vkfs__level-0{
	width: fit-content;
}

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

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

.more_info ul li:last-child{
	margin: initial;
}
/* 検索フォームの中央寄せ */
.search-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

/* フォーム全体 */
#search-form {
    padding-bottom: 50px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* 入力ボックス */
#search-input {
    white-space: nowrap;
    padding: 15px;
    font-size: 16px;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-right: 10px;
}

/* 検索ボタン */
#search-button {
    white-space: nowrap;
    padding: 15px 30px;
    font-size: 16px;
    background-color: #009370;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

/* 検索ボタンホバー時 */
#search-button:hover {
  opacity:0.5;
	background-color: #009370;
}

/* ページングボタン */
.pagination-container {
    margin-top: 20px;
    text-align: center;
}

/* ページングのリンク */
.pagination-link {
    display: inline-block;
    padding: 10px 20px;
    margin: 0 5px;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    cursor: pointer;
    text-decoration: none;
    color: #009370;
}

/* ページングリンクホバー時 */
.pagination-link:hover {
    background-color: #009370;
    color: #fff;
}

/* 現在のページ */
.pagination-link.current {
    background-color: #009370;
    color: #fff;
    cursor: default;
}

/* ページングリンク押下時 */
.pagination-link:active {
    background-color: #009370;
    color: #fff;
}

/* リセットボタン */
.reset-search-btn {
    padding: 10px 20px;
    margin: 0 5px;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    color: #ff0000;  /* 赤色に設定 */
}

/* リセットボタンホバー時 */
.reset-search-btn:hover {
    background-color: #ff0000;
    color: #fff;
}

/* 検索結果の抜粋をスタイリング */
.search-result {
    margin-bottom: 50px;
}
.search-result a{
      color: #009370;
    text-decoration: none;
}


.search-result a:hover {
    text-decoration: underline;
}

.search-excerpt {
    font-size: 12px;
    color: #555;
    margin-top: 5px;
}

/* 検索キーワードを太文字に */
.search-excerpt strong {
    font-weight: bold;
}

/* 検索結果数のスタイル */
.search-count {
    text-align: right;
    font-size: 20px;
    color: #009370;
    margin-bottom: 20px;
}

/* 引用元URLのスタイル */
.post-url {
    font-size: 0.8em;        /* 文字サイズを小さく */
    color: black;            /* 黒色 */
                       /* タイトルとの間隔を調整 */
    display: block;   
	margin-left: 1em;
/* ブロック要素として表示 */
}

.post-url a {
    color: black;            /* リンクの色を黒に変更 */
    text-decoration: none; 
	    padding: 0 1em;/* 下線を削除 */
}

.post-url a:hover {
    text-decoration: underline;  /* ホバー時に下線を表示 */
}

/* タイトルのリンクスタイル */
.post-title {
    font-size: 1.2em;        /* タイトルのフォントサイズ */
    font-weight: bold;       /* 太字 */
    color: #0073aa;          /* 青色 */
    text-decoration: none;   /* 下線なし */
    display: block;          /* ブロック要素として表示 */
       /* タイトルと引用元URLの間隔 */
}

.post-title:hover {
    text-decoration: underline;  /* ホバー時に下線表示 */
}
@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;
	}
}