@charset "utf-8";
/***********************************************
＜本棚表示キット-3カラム版＞
制作：ロゴスウェア株式会社
Copyright (c) LOGOSWARE, Inc
------------------------------------
幅950px以下用／スマホ・タブレット表示向け
------------------------------------
*カスタマイズはcustomize-phone-tablet.cssにて行うこと
***********************************************/


/*******************************************
 Base Layout
*****************************************************/


/*******************************************
 Header
*****************************************************/

/***
 ユーザー用メニュー(モバイル用：.edit.minimum／パソコン用：.edit.maximum)
 *************/
/*
header div.edit a{
	font-size: 16px;
	font-size: 1.6rem;
}
*/

/*******************************************
 Main Menu ( Search / Display Style / Sort )
*****************************************************/
#mainMenu{
	padding: 0 10px 10px 10px;
	display: flex;
	display: -ms-flexbox; /* IE */
	flex-wrap: wrap;
	-ms-flex-wrap:wrap;
}
#mainMenu.none-for-phone-tablet{
	padding: 0;
}

#mainMenu #mobile_top_menu{
	flex: 0 0 100%;
	-ms-flex:0 0 100%;
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE */
}
/***
 Category Menu ( Pulldown )
 *************/
#mainMenu nav.menu-pulldown{
	/*float: left;*/
	box-sizing: border-box;
	/*margin: 10px 0 0 0;*/
	margin: 10px 10px 0 0;
	padding: 0;
	width: 70%;
	/*
	flex-basis: 70%;
	flex-shrink: 2;
	flex-grow: 2;
	*/
	flex: 2 2 70%;
	-ms-flex:2 2 70%;

}

#mainMenu nav.menu-pulldown select{
	box-sizing: border-box;
	padding: 4px;
	width: 100%;
	height: 40px;
	font-size: 16px;
	font-size: 1.6rem;
}


/***
 Sort Area ( Date / Popular / etc )
 *************/
#mainMenu .sort{
	display: none;
}

#mainMenu .sort-pulldown{
	/*float: left;*/
	box-sizing: border-box;
	/*margin: 10px 0 0 0;*/
	margin: 10px 0 0 0;
	padding: 0 0 0 0;
	width:30%;
	/*
	flex-basis: 30%;
	flex-shrink: 2;
	flex-grow: 2;
	*/
	flex: 2 2 30%;
	-ms-flex:2 2 30%;

}

#mainMenu .sort-pulldown select{
	box-sizing: border-box;
	padding: 4px;
	width: 100%;
	height: 40px;
	font-size: 15px;
	font-size: 1.5rem;
}


/***
 Search Area
 *************/
#mainMenu .search{
	/*float:none;
	clear: both;
	margin: 10px 0 0 0;
	padding:0 0 10px 0;
	*/
	margin: 10px 0 0 0;
	padding: 0;
	flex: 0 0 100%;
	-ms-flex:0 0 100%;

}
#mainMenu .search .searchBox{
	display: flex;
	display: -ms-flexbox; /* IE */
}
#mainMenu .search .searchBox #searchForm{
	/*
	width : calc(100% - 45px - 45px) ;
	width: -webkit-calc(100% - 45px - 45px) ;
	*/
	/*
	flex-basis: 100%;
	flex-shrink: 2;
	*/
	flex: 0 2 100%;
	-ms-flex:0 2 100%;

	height: 40px;
}
#mainMenu .search .searchBox input.keyword{
	width: 100%;
	height: 40px;
	font-size:16px;
	font-size: 1.6rem;
}
#mainMenu .search .searchBox #searchForm #searchClear{
	height: 40px;
	line-height: 40px;
	padding: 3px 10px;
	font-size:20px;
	font-size: 2.0rem;
}

#mainMenu .search .searchBox .searchBtn{
	width: 40px;
	/*flex-basis: 40px;*/
	flex: 0 0 40px;
	-ms-flex:0 0 40px;

	height: 40px;
	line-height: 40px;
	margin: 0 0 0 5px;
}
#mainMenu .search .searchBox .searchBtn i{
	font-size:20px;
	font-size:2.0rem;
	width: 40px;
	height: 40px;
	line-height: 40px;
	padding: 0;
}
#mainMenu .search .searchBox .searchBtn .label{
	display: none;
}

/* 検索条件の表示・非表示切り替えボタン（モバイルのみ） */

#mainMenu .search .switchSearchFilterBtn{
	width:40px;
	/*flex-basis: 40px;*/
	flex: 0 0 40px;
	-ms-flex:0 0 40px;

	height: 40px;
	margin: 0 0 0 5px;
}

#mainMenu .search .switchSearchFilterBtn i{
	font-size:20px;
	font-size: 2.0rem;
	width:40px;
	height: 40px;
	line-height: 40px;

}


/*
検索条件
********************/
#mainMenu .search .searchFilter{
	display: block;
	clear: both;
	margin:5px 0 0 0;
	padding: 10px 20px;
	font-size:15px;
	font-size:1.5rem;
}

#mainMenu .search .searchFilter li{
	margin: 0.25em 0 0.25em 0;
	padding: 0;
	width: 50%;
}

#mainMenu .search .searchFilter li.searchFilterLabel{
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}


/***
 Display style Area ( Bookshelf / list )
 *************/
#mainMenu .displayStyle{
	/* モバイルでは下部に表示するので、こちらは非表示*/
	display: none;
}

/***
 ページ
 *************/
#mainMenu .paginator{
	display: none;
	/*
	padding-top:10px;
	width: 100%;
	text-align: center;
	*/
}
#mainMenu .paginator .reloadBtn{
	/* モバイルでは下部に表示するので、こちらは非表示*/
	display: none;
}


/*
#mainMenu .pageController{
	color: #333;
	padding:0;
	margin: 0;

}
*/
/*******************************************
 container
*****************************************************/



/*******************************************
 Primary Area ( Contents - bookshelf and list )
*****************************************************/




/*******************************************
 Secondary Area (Category Menu)
*****************************************************/
#secondary{
	display: none;
}

#mainMenu nav.menu-pulldown{
	display:block;
}



/*******************************************
 Tertiary Area (Banner, etc)
*****************************************************/
#tertiary{
	clear: both;
	float: none;
	margin: 0;
	padding: 1em 0;
	width: 100%;
}

#tertiary p,
#tertiary li{
	font-size:14px;
	font-size: 1.4rem;
}

#tertiary p{
	margin: 0.5em 1.5em;
}

#tertiary .banner{
	text-align: center;
}



/*******************************************
 Footer
*****************************************************/
footer{
	margin:0 0 52px 0;/* #submenuのheight分、下にマージン設定 */
	font-size:14px;
	font-size: 1.4rem;
}


/*******************************************
 Sub Menu ( for mobile )
*****************************************************/
#submenu{
	display: flex;
	display: -ms-flexbox; /* IE */
	justify-content: space-between;
	-ms-flex-pack: justify;
	align-items: center;
	-ms-flex-align: center;

	position:fixed;
	bottom:0;
	z-index:1000;
	border-top:1px solid #CCC;
	width:100%;
	height:52px;
	background:#EFEFEF;
	vertical-align:middle;
}

#submenu .paginator{
	font-size: 16px;
	text-align: center;
}
#submenu .paginator .itemNumLabel.withPageNum{
	font-size: 10px;
}
/*
#submenu h1{
	float:left;
	margin:0 20px 0 0;
	padding:13px 0 0 15px;
	font-size:16px;
	font-size:1.6rem;
	line-height:1.3;
	color:#333;
}
#submenu .nav{
	float:right;
}

#submenu .nav_back{
	float:left;
}
*/

#submenu .nav > ul,
#submenu .nav_back > ul{
	margin:0;
	padding:0;
}

#submenu .nav > ul > li,
#submenu .nav_back > ul > li{
	/*float:left;*/
	display:inline-block;
	list-style:none;
	margin-right:5px;
	text-align:center;
	vertical-align: middle;
}

#submenu .nav > ul > li > a,
#submenu .nav_back > ul > li > a{
	display:block;
	padding:0px 10px 5px 10px;
	width:34px;
	height:34px;
	/*color:#555;*/
	text-decoration:none;

}
/*
#submenu .nav li a:hover,
#submenu .nav_back li a:hover{
	color:#177FBF;
}
*/
#submenu .nav > ul > li > a.active,
#submenu .nav_back > ul > li > a.active{
	/*color:#177FBF;*/
}
/* menu icon */
#submenu .nav > ul >  li >  a  .glyphicon,
#submenu .nav_back > ul >  li >  a .glyphicon{
	font-size:22px;
	font-size:2.2rem;
}

/* menu icon label */
#submenu .nav > ul >  li >  a .label,
#submenu .nav_back > ul >  li >  a .label{
	margin-top:-2px;
	font-size:10px;
	font-size:1.0rem;
}

#submenu .nav_back > ul > li > a.open-new-window-btn {
    width: auto;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 0px 10px;
    margin-left: 5px;
    text-decoration: none;
    vertical-align: middle;
    display: flex;
	display: -ms-flexbox; /* IE */
    align-items: center;
	background: #cccccc;
	color: #333333;
}
#submenu .nav_back > ul > li > a.open-new-window-btn .label{
	font-size: 12px;
	margin-left: 5px;
}

#content{
    min-height: 200px;
}

/*******************************************
 Shelf Index
*****************************************************/
/***
 フッター非表示の場合
 （Getパラメータによるコントロールで設定される）
 */
#home-page.unvisible-footer.shelf {
  background: url(../img/bg.png) repeat 0 0;
  background-size: auto 308px;
}
#home-page.unvisible-footer footer {
	margin-top: 52px;
}
/***
 フッター非表示の場合は、本棚の下部52pxがサブメニューに隠れてしまう対策
 */
#home-page.unvisible-footer #homeBody{
  padding-bottom: 52px;
}
/***
 フッター非表示で、かつ、サブメニュー非表示の場合
 本棚下部に空白ができないようにする
 */
#home-page.unvisible-footer.unvisible-submenu #homeBody{
  padding-bottom: 0px;
}

/***
 サブメニュー（画面下部のメニュー）非表示の場合
 （Getパラメータによるコントロールで設定される）
 */
#home-page.unvisible-submenu #submenu{
	display: none;
}
#home-page.unvisible-submenu footer{
	margin: 0;
}

#home-page .shelfBackground {
	background-size: auto 308px;
	/*height: 100%;*/
}

/* shelf title */
#content.shelfContent h2{
	font-size:16px;
	font-size:1.6rem;
}

/* shelf */
#content.shelfContent .shelf{
	background:url(../img/bg_shelf_s.png) repeat 0 0;
	background-size: auto 300px;
	min-height: 450px; /* 最小でも棚３段分 */
}
/* 埋め込みモードの場合 */
.embed #content.shelfContent .shelf{
	min-height: 150px; /* 最小でも棚1段分 */
}

#content.shelfContent .shelf ul li{
	width:100px;
	height:150px;

	box-sizing: border-box;
	flex:0 0 100px;
	-ms-flex:0 0 100px;

}

/* contents title */
#content.shelfContent .shelf .ctitleWrapper{
	margin-top: 13px;
	width: 90px;
	/*height: 30px;
	/*font-size: 13px;
	font-size: 1.3rem;
	line-height:1.2;*/
}

/* contents thumbnail */
#content.shelfContent .shelf .cimageWrapper {
	bottom: 9px;
	width: 100px;
}

#content.shelfContent .shelf img.thumbnail {
	max-width: 90px;
	max-height: 90px;
}

/*
 おすすめコンテンツ用本棚
***********************/
#content.shelfContent .recommendation .shelf{
	background:url(../img/bg_shelf_s_recommendation.png) repeat 0 0;
	background-size:auto 300px;
}



/*******************************************
 List Index
*****************************************************/
#content.listContent ul.list .cimageWrapper{
	width: 110px;
	flex:0 0 110px;
	-ms-flex:0 0 110px;
}
#content.listContent ul.list .cimageWrapper a.cimageLink{
	width: 110px;
}
#content.listContent ul.list .cimageWrapper img.thumbnail {
	max-width: 110px;
	max-height: 110px;
}

#content.listContent ul.list .basicinfo h3{
	font-size:18px;
	font-size:1.8rem;
	line-height:1.4;
}

#content.listContent ul.list .basicinfo p,
#content.listContent ul.list .basicinfo ul.metadata li{
	font-size:12px;
	font-size:1.2rem;
}

/* ボタン（開く・ダウンロード） */
#content.listContent ul.list .basicinfo ul.action .btn{
	box-sizing: border-box;
	font-size:15px;
	font-size:1.5rem;
}

/* コンテンツリスト表示のアイテム内ボタン（開く・ダウンロード）の 調整*/
@media screen and (max-width: 550px) {
	#content.listContent ul.list .basicinfo ul.action li {
		display: block;
	}

	#content.listContent ul.list .basicinfo ul.action li .btn {
		width: 100%;
		text-align: center;
	}
}

/* コンテンツ詳細モーダル画面のレイアウト調整　*/
@media screen and (max-width: 500px) {
	#content.listContent ul.list .content-list-item .content-list-item-body{
		-webkit-box-orient: block-axis;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	#content.listContent ul.list .content-list-item .content-list-item-body .cimageWrapper{
		width: 100%;
		flex:0 0 auto;
		-ms-flex:0 0 auto;
	}
	#content.listContent ul.list .content-list-item .content-list-item-body .cimageWrapper a.cimageLink{
		display: block;
		margin: 0 auto;
	}
	#content.listContent ul.list .content-list-item .content-list-item-body .cimageWrapper img.thumbnail{
		display: block;
		margin: 0 auto;
	}
	#content.listContent ul.list .content-list-item .content-list-item-body .box{
		flex:0 0 auto;
		-ms-flex:0 0 auto;
	}

	.content-detail-modal .content-detail-body {
		-webkit-box-orient: block-axis;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}
    .content-detail-modal .content-detail-body .cimageWrapper{
        width: 100%;
        margin: 0 0 10px 0;
    }
    .content-detail-modal .content-detail-body .cimageWrapper a.cimageLink{
        display: block;
        margin: 0 auto;
    }
    .content-detail-modal .cimageWrapper img.thumbnail{
        display: block;
        margin: 0 auto;
    }

	#content-page header #content-menu div{
		display: block;
		margin: 5px 5px;
	}
}

/***
　Add Itoh
***/
#content.listContent ul.list .searchHit ul.searchHitList li{
	font-size:15px;
	font-size:1.5rem;
}

/*-----------------------*/
#pageTop {
	bottom:70px;
	right: 15px;
}


#contentBottom .paginator{
	display: none;
}
#home-page.embed.unvisible-submenu #contentBottom .paginator{
	display: block;
}