/*******************************/
/* 共通                        */
/*******************************/
@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: local('Material Icons'),
		local('MaterialIcons-Regular'),
		url('./lib/material-design-icons/MaterialIcons-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Material Icons Outlined';
	font-style: normal;
	font-weight: 400;
	src: local('Material Icons Outlined'),
		local('MaterialIconsOutlined-Regular'),
		url('./lib/material-design-icons/MaterialIconsOutlined-Regular.otf') format('opentype');
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;

	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;

	/* Support for IE. */
	font-feature-settings: 'liga';
}

.material-icons-outlined {
	font-family: 'Material Icons Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;

	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;

	/* Support for IE. */
	font-feature-settings: 'liga';
}
  
/* フォントのアンチエイリアシング */
@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	.html, body {	
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

/*
*:not(.icon):not(input) {
	font-family:
		'Noto Sans Japanese',
		-apple-system, blinkMacSystemFont,
		'Helvetica Neue',
		'Hiragino Kaku Gothic ProN',
		'Meiryo',
		sans-serif !important;
}
*/

/* 全体 */
html, body {
	position: relative;
	width: 100vw;
	height: calc(100vh); /* CSS変数非対応のフォールバック */
	height: calc(var(--vh, 1vh) * 100);
}
body {
	/*color: #333;*/
	color: #7f7f7f;
	margin: 0;
	box-sizing: border-box;
	background-color: #F9F9F9;
}

.layout {
	background-color: #F9F9F9;
}

.container {
	background-color: #F9F9F9;
	min-height: 90%;
}


*:not(.icon,.material-icons,.material-icons-outlined):not(input) {
	font-family:
		'Noto Sans Japanese',
		-apple-system, blinkMacSystemFont, /* Mac欧文 San Francisco (OS X 10.11以降) */
		'Helvetica Neue', /* Mac欧文 (OS X 10.10以前) */
		'Hiragino Kaku Gothic ProN', /* Macヒラギノ */
		'Meiryo',  /* Windowsメイリオ */
		sans-serif !important;
}

table {
	border-collapse: collapse;
	height: 100%;
	width: 100%;
}

h1, h2, h3 {
	color: #555555;
}

/* semantic ui custom */
/* プルダウン */
.ui.selection.dropdown,
.ui.selection.dropdown .menu>.item {
	color: rgb(102, 102, 102)
}

/* ボタン */
.ui.button:hover, .ui.buttons .ui.button:hover, .ui.buttons .ui.dropdown.button:hover  {
	transition: all .2s ease-in-out;
	box-shadow: .15em .15em .1em rgba(100, 100, 100, .2);
	filter: brightness(105%);
}
.ui.button:active {
	box-shadow: .15em .15em .1em rgba(100, 100, 100, .2);
	filter: brightness(135%);
}
.ui.basic.button:hover  {
	transition: all .2s ease-in-out;
	box-shadow: .15em .15em .1em rgba(100, 100, 100, .2);
	filter: brightness(95%);
}
.ui.basic.button:active {
	box-shadow: .15em .15em .1em rgba(100, 100, 100, .2);
	filter: brightness(85%);
}

/* スクロール抑止 */
.overflow-hidden {
	overflow: hidden !important;
}

/* 改行抑止 */
.nowrap {
	white-space: nowrap;
}

/* 非表示 */
.display-none {
	display: none !important;
}

/* 間隔調整 */
.section0 {
	margin-top: 2em;
}
.section1 {
	margin-top: 1em;
}
.section2 {
	margin-top: 0.5em;
}
.section3 {
	margin-top: 0.25em;
}
.indent1 {
	margin-left: 1em;
}
.indent2 {
	margin-left: 0.5em;
}

button {
	border-radius: 5px;
	border: solid 1px #999999 ;
	background-color: transparent;
	padding: 10px;
	font-weight: bold;
	color: #7F7F7F;
}

/**
 * 入力欄
 */
input[type='text'] {
	border-color: #c0c0c0!important;
}
input[type='text']:focus {
	border-color: #cc7777!important;
}

/* iPhone の入力欄フォーカス時にズームしないよう対策 */
@media(max-width: 767px) {
	input[type='text'] {
		font-size: 16px;
		padding-top: 7px!important;
		padding-bottom: 7px!important;
	}
	.remove.link.icon {
		margin-top: -2px!important;
		margin-right: 3px!important;
	}
}


/**
 * ボタン/疑似ボタン
 */
button.button:focus {
	outline-color: #999999;
}
div.button {
	outline:none;
	user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
	-ms-user-select: none;
}
.dialog-content .button {
	background-color: #F3F3F3;
}

.button:not(.disabled) {
	cursor: pointer;
}
.button:not(.disabled):not(.ui):hover {
	background-color: rgba(196, 196, 196, 0.7)!important;
	transition-duration: 250ms;
}
.button:not(.disabled):not(.ui):active {
	background-color: rgba(196, 196, 196, 0.9)!important;
	transition-duration: 250ms;
}

.clickable {
	outline: none;
}
.clickable:not(.disabled) {
	cursor: pointer;
}
.clickable:not(.disabled):hover {
	background-color: rgba(240, 240, 240, 0.7)!important;
	transition-duration: 250ms;
	filter: brightness(90%);
}
.clickable:not(.disabled):active {
	background-color: rgba(240, 240, 240, 0.9)!important;
	transition-duration: 250ms;
	filter: brightness(80%);
}

.search-result-item.clickable:hover {
	filter: none;
transition-duration: 250ms;	background-color: rgba(240, 240, 240, 0.7)!important;
}
.search-result-item.clickable:active {
	filter: none;
	background-color: rgba(240, 240, 240, 0.9)!important;
}
.search-result-item.clickable:hover img {
	transition-duration: 250ms;
	filter: brightness(90%);
}

/**
 * テキスト
 */
.priortext {
	color: #555555;
}
.subtext {
	color: #a5a5a5;
}


/**
 * 書籍情報表示共通
 */
.book-title {
	font-weight: bold;
}
.book-title h3 {
    color: #555555;
}

.book-cover img {
	box-shadow: #999999 2px 2px 3px;
}
.book-bookmark-btn {
	user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
	-ms-user-select: none;
	outline: none;
	cursor: pointer;
	font-size:large;
	text-shadow: #999999 1px 1px 2px;
}

.bookmarked {
	/* color: rgba(255, 224, 0, 1); */
	color: #ffbb00;
}
.bookmarked:hover {
	/* color: rgba(255, 224, 0, 1); */
	color: #E2AF1E;
}
.not-bookmarked {
	color: rgba(224, 224, 224, 0.8);
}
.not-bookmarked:hover {
	color: rgba(196, 196, 196, 0.75);
	transition-duration: 250ms;
}

.book-menu-btn-wrapper .book-menu-btn {
	/* clip-path: circle(); */ /* clip-path: circle() は iOS Safari(v13)で性能問題を引き起こすため使わない */
	width: 30px;
	height: 30px;
	border-radius: 15px;
}

.book-thumbnail-item .book-menu-btn-wrapper .book-menu-btn {
	background-color: rgba(224, 224, 224, 0.8);
}

/**
 * ブックマークリスト
 */
.bookmark-item {
	border: none;
	background-color: #f9f9f9;
	border-radius: 4px;
	filter: drop-shadow(1px 1px 1px rgba(128, 128, 128, .5))!important;
}

.bookmark-item .bookmark-btn-area .button {
	border-radius: 3px;
	background-color: #f9f9f9;
}

div.thumbnail-image-content {
	filter: drop-shadow(2px 2px 2px rgba(128, 128, 128, .5));
}

.bookmark-contents-title {
	font-size: 1.1em;
	color: #555;
}
.bookmark-contents-page {
	font-size: .9em;
}

/*******************************/
/* モーダルウインドウ          */
/*******************************/
.modal-window-wrapper {
	background-color:rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(0.5px);
	-webkit-backdrop-filter: blur(0.5px);
}
.modal-window {
	background-color:#ffffff;
	box-shadow: #999999 2px 2px 4px;
}
.modal-window-header {
	background-color:#f3f3f3;
}
.modal-window-header-center {
	color: #555555;
}

/*******************************/
/* オートコンプリート          */	
/*******************************/
.aci-list {
	border: solid 1px #999999;
	background-color: #ffffff;
	box-shadow: #999999 1px 1px 2px;
}
.autocomplete-list-item.selected {
	background-color: #d4d4d4!important;
}

/*******************************/
/* ドロップダウンメニュー      */
/*******************************/
.dropdown-menu-list {
	border: solid 1px #c0c0c0;
	background-color: #ffffff;
	box-shadow: #999999 1px 1px 2px;
}
.dropdown-menu-list-item:not(:first-child) {
	border-top: solid 1px #c0c0c0;
}
.menu-item {
	background-color: #ffffff;
}
.menu-title {
	font-weight: bold;
}

/*******************************/
/* ページャ                    */
/*******************************/
.pager-btn {
	background-color: #ffffff;
	border-color: #c0c0c0;
}
.pager-btn.disabled {
	background-color: #f9f9f9;
	color: #999999!important;
}
.pager-btn.disabled i {
	color: #999999!important;
}
.pager-btn i.material-icons, .pager-btn.pagenum-btn {
    color: #555555;
}
.pager-btn.current {
    background-color:rgba(212, 212, 212, 1);
    font-weight: bold;
}

/*******************************/
/* アコーディオン              */
/*******************************/
.select-tree.root {
	border: none;
	border-top: solid 1px #c0c0c0;
}

.select-tree .treeitem {
	border-bottom: solid 1px #c0c0c0; 
	background-color: #ffffff;
}
.select-tree .selected {
	background-color: #d8d8d8;
}

/**
 * ヘッダ
 */
.main_header {
	background-color: #f3f3f3;
}
.main_header > div {
	border-bottom: #c0c0c0 solid 1px;
}
.main_header > div:last-child {
	border-bottom:none;
}

.header_icon_button.selected {
	color: #cc7777;
}
.search-component .ui.button {
	background-color: #cc7777!important;
	color: #ffffff;
}

/**
 * コンテンツ検索結果画面
 */
#contents-search-result-container .search-result-item {
	background-color: #ffffff;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/**
 * ホーム
 */ 
.load-more-link {
	color: #cc7777;
}

/**
 * 本文検索結果画面
 */

 #text-search-result-container .search-result-item {
	background-color: #ffffff;
 }
 #text-search-result-container .search-result-list .list-item {
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	border-color: #c0c0c0;
}	
#text-search-result-container .search-result-list .list-item:first-of-type {
	border-top-width: 1px;
}

#text-search-result-container .search-result-list .list-item .description mark {
	/* background-color: rgba(255, 224, 0, 0.75); */
	background-color: #FFCCCC;
	border-radius: 0.2em;
	padding: 0 0.2em;
}
/**
 * 設定画面
 */ 
.menu-title.igsid {
	color: #a5a5a5;
}

/**
 * メニュー
 */
.menu-wrapper {
	border: solid 1px #999999;
	background-color: #F0F0F0;
	width: 300px;
	box-shadow: #999999 1px 1px 2px;
}
.menu-item .menu-icon {
	color: #cc7777;
}

/*******************************/
/* メイン                       */
/*******************************/
#app-container {
	margin-left : auto;
	margin-right: auto;
}

/*******************************/
/* 入力検証
/*******************************/
#validate-error-container .ui.header {
	margin-bottom: 0.5em;
}
.ui.input .error,
.ui.input .error:active {
	/*background: rgb(255, 232, 230) !important;*/
	background: #fff6f6 !important;
}

/*******************************/
/* ローダー
/*******************************/
#loader-container {
	height: 6rem;
	padding-top: 1rem;
}

/*******************************/
/* NOTFOUND画面
/*******************************/
#notfound-container {
	padding: 1em;
}
#notfound-container .ui.message .header {
	margin-bottom: 2em;
}
#notfound-container .link {
	margin-top: 3em;
	text-align: center;
}
#notfound-container .link a {
	text-decoration: underline;
	font-weight: 900;
	font-size: 1.25em;
}

/*******************************/
/* エラー画面
/*******************************/
#error-container {
	padding: 2em;
}
#error-container .ui.message .header {
	margin-bottom: 2em;
}
#error-container .link {
	margin-top: 3em;
	text-align: center;
}
#error-container .link a {
	text-decoration: underline;
	font-weight: 900;
	font-size: 1.25em;
}