@charset "utf-8";

/* -----------------------------------------------
 * stylemenu.css 
 * BinBのサイドメニューを構成するCSSです。
 * サービス運用時はCSS内のコメントを削除してご利用ください。
 * ＊＊＊ インフォビュー用の設定は当ファイルの後半に記述されています。 ＊＊＊
 * -----------------------------------------------
 */

/* -----------------------------------------------
 * 基本設定
 *
 * BinBのサイドメニューで使用する基本設定です。
 * これらの設定はBinB動作関連していますので、変更は行わないでください。
 * カスタマイズする場合も、この部分はそのままご利用ください。
 * （color指定のみ変更が可能です）
 * -----------------------------------------------
 */

html {
	height:100%;
}
body {
	height:100%;
	font-family: "Noto Sans Japanese","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,sans-serif;
	margin: 0;
	padding: 0;
	/*background-color: #d0d0d0;*/
	background-color: #707070;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	overflow-x:hidden;
	overflow-y:visible;
}

#container {
	position:relative;
	background-color:#fff;
	overflow:hidden;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

#container{
	height:70%;
}

#sidemenu {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#fff;
	color:#505050;
	overflow-y:auto;
	overflow-x:hidden;
	-webkit-overflow-scrolling:auto;
}

.mobile_device #sidemenu {
}

.pc_device #sidemenu::-webkit-scrollbar {
	overflow:hidden;
	margin-left:8px;
	width:8px;
}

.pc_device #sidemenu::-webkit-scrollbar-button {
	display:none;
}

.pc_device #sidemenu::-webkit-scrollbar-track-piece {
	-webkit-border-radius:4px;
	border-radius:4px;
	background-color:#a0a0a0;
}

.pc_device #sidemenu::-webkit-scrollbar-thumb {
	overflow:hidden;
	-webkit-border-radius:4px;
	border-radius:4px;
	background-color:#404040;
}

.pc_device #sidemenu::-webkit-scrollbar-corner {
	display:none;
}

#sidemenu_contents {
	position:relative;
	margin:0;
	padding:0 0 5em 0;
	min-height:100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

#copyright {
	position: relative;
	overflow: hidden;
	margin: -5em 0 0 0;
	padding: 1em;
	width: 100%;
	height: 5em;
	font-size: 0.7em;
	color: #fff;
	background-color: #333;
	text-align: right;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

#contents iframe {
	padding: 0;
	margin: 0;
}

#custom_contents {
	position: fixed;
	margin: 0;
	padding: 0;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(128,128,128,0.6);
	color: #000000;
	-webkit-transition: opacity 200ms;
	-moz-transition: opacity 200ms;
	-op-transition: opacity 200ms;
	-ms-transition: opacity 200ms;
	transition: opacity 200ms;
	overflow: hidden;
	-webkit-overflow-scrolling: auto;
	opacity: 0;
}

#custom_contents iframe {
	padding: 0;
	margin: 0;
}

div.sidemenu_container {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 100%;
}

img.image_fit_width {
	width: 100%;
	height: auto;
	vertical-align: middle;
}

a {
	text-decoration: none;
	color: inherit;
}
a img {
	border: none;
}
.pc_device #container a:hover, .pc_device #container a div:hover, .pc_device #container a div img:hover,
.mobile_device #container a.hover, .mobile_device #container a div.hover, .mobile_device #container a div img.hover {
	background-color: #f60;
	color: #fff;
	text-decoration: none;
}

div.contents {
	position: absolute;
	margin: 0;
	padding: 0;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: #FEFEFE;
	color: #000000;
	box-shadow: rgba(0,0,0,0.4) -1px 0px 4px 4px;
	-webkit-transition: left 200ms;
	-moz-transition: left 200ms;
	-op-transition: left 200ms;
	-ms-transition: left 200ms;
	transition: left 200ms;
}

div.contents_none_transition {
	position: absolute;
	margin: 0;
	padding: 0;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: transparent;
	color: #000000;
	box-shadow: -6px 1px 5px rgba(0,0,0,0.3);
	-webkit-transition: left 0ms;
	-moz-transition: left 0ms;
	-op-transition: left 0ms;
	-ms-transition: left 0ms;
	transition: left 0ms;
}

.fixed_content.has_no_searchtext #binbop_searchtext {
	display: none;
}
.fixed_content.has_no_searchtext #binbop_searchtext + hr {
	display: none;
}

.login_user #binbop_login {
	display: none;
}
.login_user #binbop_login + hr {
	display: none;
}

.disabled_buy_link #binbop_buy {
	display: none;
}
.disabled_buy_link #binbop_buy + hr {
	display: none;
}

.disabled_speech #binbop_speech {
	display: none;
}
.disabled_speech #binbop_speech + hr {
	display: none;
}

.pc_device #binbop_speech .linkmenu_subtitle.mobile_device {
	display: none;
}
.mobile_device #binbop_speech .linkmenu_subtitle.pc_device {
	display: none;
}

/* -----------------------------------------------
 * カスタマイズ設定
 *
 * サイドメニューをカスタマイズする場合は以下の設定を参考としてください。
 * カスタマイズするメニュー構成に応じて、削除・追加をお願いします。
 * カスタマイズした場合、PC/MAC/iPhone/iPad/Android等のサポート端末上で
 * 正常に動作することを確認した上でご利用ください。
 * -----------------------------------------------
 */

.background_image {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

.sidemenu_container hr {
	color: transparent;
	border: none;
	border-top: solid 1px #bbb;
	width: 95%;
	margin: 3px auto;
}

div.simple_message {
	font-size: 0.6em;
	margin-left: 3%;
	margin-right: 4px;
	padding: 0;
}

/* ヘッダ ------------------------------------------------------- */

hr.header {
	margin: 15px auto 3px auto;
	width: 95%;
	border-top: solid 3px #000;
}

div.social_area {
	font-size : 80%;
	font-weight: bold;
	text-align: right;
	padding: 0 4% 1em 0;
}

div.social_area a {
	padding-left: 1%;
	padding-right: 1%;
	text-shadow: 0.1em 0.1em 3px #fff;
}

/* --　タイトル・著者表示 ---------------------------------------- */

#ci_title {
	position: relative;
	display: block;
	font-size: 1.4em;
	padding: 0.2em 0.5em;
	font-weight: bold;
	line-height: 1.1;
	text-shadow: 0.1em 0.1em 3px #fff;
}

#ci_author {
	position: relative;
	display: block;
	font-size: 1em;
	padding: 0.2em 0.5em 0.2em 1em;
	text-align: right;
	line-height: 1.1;
	text-shadow: 0.1em 0.1em 3px #fff;
}

/* --　リンクメニュー ----------------------------------------------- */

h2 {
	font-size: 0.6em;
	margin: 1.5em 4px 3px 2%;
	padding: 0 0 3px 1%;
	text-decoration: none;
	font-weight: normal;
	border-bottom: solid 1px #000;
	width: 95%;
}

.linkmenu {
	display: block;
	margin: 0;
	padding: 0.2em 3%;
}

div.linkmenu_title {
	font-size: 1.2em;
	font-weight: bold;
	margin: 0;
	padding: 0.2em 0 0.1em 0;
	line-height: 1;
}

div.linkmenu_subtitle {
	font-size: 0.6em;
	font-weight: bold;
	margin: 0;
	padding: 0.1em 0 0.2em 0;
	line-height: 1;
}

/* --　書籍検索 ----------------------------------------------------- */

.searchbox {
    position:relative;
    background-color:#fff;
	margin:0.5em auto;
    border:1px solid #aaa;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    -o-border-radius:8px;
    -ms-border-radius:8px;
    border-radius:8px;
    width:90%;
	height:1.6em;
}
.searchbox_wrapper {
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:2em;
	margin:0 0.3em;
	padding:0;
}
.searchbox_wrapper input{
	margin:0;
	padding:0;
    height:1.6em;
	line-height:1.6;
	font-size:1em;
    background:none;
	width:100%;
    border:none;
	color:#505050;
}
.searchbox button {
    display:block;
	position:absolute;
	top:0;
	right:0;
	width:2em;
	height:100%;
    background:none;
    border:none;
    padding:0;
    margin:0;
    font-size:1em;
    line-height:0;
    overflow:visible;
    cursor:pointer;
}
.searchbox button img {
    width:auto;
    height:80%;
}

/*--　インフォメーション ------------------------------------------- */

div.information {
	margin: 0.1em;
	padding: 0.1em;
	font-size: 70%;
}
div.information ul {
	margin: 0 0 0 2em;
	padding: 0;
}
div.information li {
	margin: 0;
	padding: 0 1em 0 0;
}

div.more_link {
	font-size: 60%;
	text-align: right;
	padding-right: 3%;
}
div.more_link a {
	padding: 0.2em 0.5em;
}

/* --　書籍紹介 ----------------------------------------------------- */

div.pickup {
	position: relative;
	margin: 0.1em;
	padding: 0.1em;
	text-align: center;
}

div.pickup_cover {
	display: inline-block;
	width: 30%;
	height: 100%;
	position: relative;
	vertical-align: top;
	margin: 0;
	padding: 1%;
}

div.pickup_cover a {
	display: inline-block;
	padding: 2%;
}

span.pickup_name {
	position: relative;
	display: inline-block;
	vertical-align: top;
	font-size: 70%;
	margin: 0;
	padding:0;
}

/* --　アクセスランキング ------------------------------------------- */

div.rankinglistitem {
	position: relative;
	padding: 0.1em 0;
	margin: 0;
	text-align: center;
}

div.rankinglistitem_title {
	display: inline-block;
	width: 60%;
	font-size: 0.8em;
	font-weight: bold;
	position: relative;
	text-align: left;
	padding: 0;
	margin: 0;
	vertical-align: middle;
}

div.rankinglistitem_author {
	display:inline-block;
	width: 30%;
	font-size: 0.6em;
	position: relative;
	text-align: right;
	padding: 0;
	margin: 0;
	vertical-align: middle;
}

/* --　スペシャルサイト --------------------------------------------- */

div.banner {
	position: relative;
	margin: 1%;
	padding: 1%;
}

/* --　おすすめ ----------------------------------------------------- */

div.recommend {
	position: relative;
	margin: 0.1em;
	padding: 0.1em;
	text-align: center;
}

div.recommend_title {
	font-size: 70%;
	font-weight: bold;
	margin-left: 3%;
	margin-right: 4px;
	margin-bottom: 3px;
	padding: 0;
}

div.recommend_cover {
	display: inline-block;
	width: 30%;
	position: relative;
	vertical-align: bottom;
}

div.recommend_detail {
	display:inline-block;
	width: 60%;
	position: relative;
	vertical-align: top;
	font-size: 70%;
	text-align: left;
}

/* --　リンク ------------------------------------------------------- */

a.singleline_link {
	display: block;
	font-size: 70%;
	margin-left: 2%;
	margin-right: 2%;
	padding: 0;
}

/* -----------------------------------------------
 * インフォビュー設定
 *
 * BinBのインフォビューで使用する基本設定です。
 * 位置やサイズは基本的にemで指定します。
 * @mediaでデバイスピクセルレシオ毎にフォントサイズを
 * 調整して環境毎に表示サイズをあわせます。
 * -----------------------------------------------
 */

/* -- カスタムUI用の定義 ---------- */




/* 鏡文字 */
.text_mirror{
	-moz-transform:matrix(-1, 0, 0, 1, 0, 0);
	-webkit-transform:matrix(-1, 0, 0, 1, 0, 0);
	-ms-transform:matrix(-1, 0, 0, 1, 0, 0);
	transform:matrix(-1, 0, 0, 1, 0, 0);
}

/* ヘッダー */
#cst_reader_header{
	height:3.5em;
}

/* フッター */
#cst_reader_footer{
	clear:both;
}

/* リーダーの左側に表示する情報 */
.cst_leftgroup{
	width:60%;
	width:-webkit-calc(65% - 4rem);
	width:calc(65% - 4rem);
	float:left;
	margin 0 auto;
	margin-left:4%;
	margin-left:calc(4rem);
	text-align: left;
}

/* リーダーの右側に表示する情報 */
.cst_rightgroup{
	width:30%;
	width:-webkit-calc(35% - 5rem);
	width:calc(35% - 5rem);
	/* float:right; */
	margin 0 auto;
	margin-right:4%;
	margin-right:calc(4rem);
	margin-left:1%;
	margin-left:calc(1rem);
	text-align: left;
}

/* コントローラ */
.information_controller{
	display:inline-block;
	background-color: #282828; /* black; */
	color: white;
	padding: 0.5em 0;
}

.information_controller img{
	height:1.5em;
	width:auto;
}

.information_controller span{
	font-size:1.5em;
}

/* コントローラ(左) */
.information_controller_left{
	width:auto;
	font-size:1.5em;
	height:2em;
	float:left;
	margin-left:0.5em;
	margin-top:0.5em;
	margin-bottom:0.5em;
}

/* コントローラ(右) */
.information_controller_right{
	width:auto;
	font-size:1.5em;
	height:2em;
	margin-right:0.5em;
	margin-top:0.5em;
	margin-bottom:0.5em;
	float:right;
}

.information_controller_left > div{
	margin-left:0.5em;
}

.information_controller_right > div{
	margin-right:0.5em;
}

.information_controller_left > div, .information_controller_right > div{
	padding:0.4em;
	text-align:center;
	vertical-align: middle;
	text-decoration:none;
	float:left;

	-webkit-border-radius:0.2em;
	border-radius:0.2em;
}

.information_controller_left .cst_page_active{
	padding-left:2.25em;
	padding-right:2.25em;
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	box-sizing:content-box;
}

#cst_viewfull{
	padding-left:2.25em;
	padding-right:2.25em;
	-webkit-box-sizing:content-box;
	-moz-box-sizing:content-box;
	box-sizing:content-box;
}

.displayed #cst_viewfull , .displayed .information_controller_left .cst_page_active{
	background-color:#1a444a;
}

#cst_toleftchapter , #cst_toleftpage , #cst_torightpage , #cst_torightchapter , #cst_showsetting , #cst_showmemolist , #cst_viewfull{
	cursor:pointer;
	
	-moz-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}

.pc_device #cst_toleftchapter:hover , .pc_device #cst_toleftpage:hover , .pc_device #cst_torightpage:hover , .pc_device #cst_torightchapter:hover , .pc_device #cst_showsetting:hover , .pc_device #cst_showmemolist:hover , .pc_device #cst_viewfull:hover{
	background-color:#404040;
}

.pc_device #cst_viewfull:hover , .pc_device .information_controller_left .cst_page_active:hover{
	background-color:#3a646a !important;
}

#cst_slidercaption{
}

#cst_bookstore_list_more span,#cst_ebookstore_list_more span,#cst_bookstore_list_close span,#cst_ebookstore_list_close span,.cst_thumb_button_default span,.cst_thumb_button_all span{
	cursor: pointer;
}

.information_controller_right div > img,.information_controller_left div > img{
	vertical-align:middle;
	margin-top:0.1em;
	margin-bottom:0.1em;
	max-width:100%;
}

/* カスタムインフォメーション*/
.custom_information{
	font-size:100%;
	display:inline-block;
}

.information_controller,.custom_information div,.custom_information p,#coverDiv,#coverMain,#cst_left_info,.cst_rightgroup{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/* 関連書籍リンク */
#cst_thumb_links{
	width:100%;
}

.cst_thumb_link{
	width:100%;
	margin:0;
	padding:0.5em 1.5em;
	background-color:white;
	display:inline-block;
}

.cst_thumb_link:nth-child(odd){
	background-color:#f8f8f8;
}

.cst_thumb_link a > div{
	float:left;
	margin-right:0.5em;
	width:100%;
	height:auto;
}

.cst_thumb_link_thumb{
	float:left;
}

.cst_thumb_link a img{
	width:5em;
	height:auto;
	max-width:100%;
	margin-right:0.5em;
	border:solid 0.1em #f0f0f0;
}

.cst_thumb_link a p{
	text-align:left;
	word-wrap:break-word;
}

.cst_thumb_link_title {
	font-size:1.2em;
	font-weight:bold;
}

.cst_thumb_link_author {
	color:DimGray;
}

.cst_thumb_group{
	display:inline-block;
	background:white;
	margin-bottom:0.5em;
	width:100%;
	padding: 0.5em 0;

	color:#555;
    -webkit-border-radius:0.15em;
    -moz-border-radius:0.15em;
    -ms-border-radius:0.15em;
    border-radius:0.15em;
}

.cst_thumb_group_caption{
	display:inline-block;
	text-align: left;
	padding: 0 1em;
	font-size:120%;
	font-weight: bold;

	/*
	padding: 0.2em 1em 0.2em 0.4em;
	border-left:solid 0.3em #555;
	margin-left:0.3em;
	*/
}

.cst_thumb_link_button{
	width:100%;
	text-align:center;
}

.cst_thumb_link_button > hr{
	width:99%;
	height:0.5em;
	margin:0;
	margin-left:0.5%;
	border-top-width: 0.15em;
}

.cst_thumb_button_default,.cst_thumb_button_all{
	background:white;
	cursor:point;
	text-align: center;
}

.cst_thumb_button_all{
	display:none;
}

.cst_thumb_group_all .cst_thumb_button_default{
	display:none;
}

.cst_thumb_group_all .cst_thumb_button_all{
	display:block;
}

.cst_thumb_link_def_off{
	display:none;
}

.cst_thumb_group_all .cst_thumb_link_def_off{
	display:inline-block;
}

/* バナー */
#cst_banner{
	background:white;
	margin-bottom:0.5em;
}

#cst_banner_image{
	width:100%;
	max-width:100%;
	height:auto;
}

.cst_heading_title{
	font-size:120%;
	font-weight: bold;
}

/* 新規書籍(NewBooks) */
#cst_new_books{
	background:white;
	margin-bottom:0.5em;
	display:inline-block;
	width:100%;
	padding: 0.5em 1em;

	color:#555;
    -webkit-border-radius:0.15em;
    -moz-border-radius:0.15em;
    -ms-border-radius:0.15em;
    border-radius:0.15em;
}

.cst_newbooks_book{
	float:left;
	width:33%;
	padding-right:0.5em;

	color:#555;
    -webkit-border-radius:0.15em;
    -moz-border-radius:0.15em;
    -ms-border-radius:0.15em;
    border-radius:0.15em;
}

.cst_newbooks_book_img{
	padding-top:0.5em;
}

.cst_newbooks_book_img > img{
	width:100%;
	height:auto;
}

/* インフォメーション */
#cst_informations{
	background:white;
	padding: 0.5em 1em;

	color:#555;
    -webkit-border-radius:0.15em;
    -moz-border-radius:0.15em;
    -ms-border-radius:0.15em;
    border-radius:0.15em;
}

#cst_information_list{
	padding-top:0.5em;
}

/* 表示中書籍情報 */
#cst_content_info , .cst_bookstore_list{
	width:100%;
	padding:0.5em 1em;
	margin-top:0.5em;
	float:none;
	text-align:left;
	background-color:white;
	margin-top:0.5em;

	color:#555;
    -webkit-border-radius:0.15em;
    -moz-border-radius:0.15em;
    -ms-border-radius:0.15em;
    border-radius:0.15em;
}

#cst_current_info{
	display:inline-block;
	min-width:100%;
}

#cst_thumbnail{
	width:6em;
	height:auto;
}

#cst_current_info > div{
	float:left;
	display:block;
}

#cst_title,#cst_author,#cst_description{
	width:100%;
	padding:0.5em;
}

#cst_title{
	font-size:1.2em;
	font-weight: bold;
}

#cst_share{
	text-align: right;
	width:100%;
}
#cst_share img{
	/*
	width:8.1127em;
	height:1.5em;
	*/
	width:10.8169em;
	height:2em;
}

/* 初期処理中表示カバー */
#coverDiv{
	display:none;
	position:absolute;
	background-color:white;
}

#coverMain{
	width:100%;
	text-align:center;
	padding:0 1em;
	color:black;
    font-family: 'Syncopate', Helvetica, Arial;
	font-size:3em;
}

#coverMsg{
	display:inline-block;
}

.hidecover {
  -moz-animation-duration: 0.8s;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -moz-animation-name: hideeffect;
  -webkit-animation-name: hideeffect;
  animation-name: hideeffect;
  -moz-animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -moz-animation-direction: normal;
  -webkit-animation-direction: normal;
  animation-direction: normal;
}

/* スライダーカスタマイズ */
#slider{
	margin:0.6em;
	height:0.4em;
	background: white;
}

#slider .ui-slider-range {
	background: #1a444a;
}

/* スライダーハンドル */
#slider .ui-slider-handle {
	border: none;
	background: white;
	width:1.2em;
	height:1.2em;
	top:-0.45em;
	margin-left:-0.6em;
}

#slider > .ui-slider-horizontal {
	height: 0.4em;
}
#slider > .ui-slider-horizontal .ui-slider-handle {
	top: 0;
	margin-left: -0.6em;
}
    
@-moz-keyframes hideeffect {
  from {
    opacity:1;
  }
      
  to {
    opacity:0;
    display:none;
  }
}

@-webkit-keyframes hideeffect {
  from {
    opacity:1;
  }
      
  to {
    opacity:0;
    display:none;
  }
}

@keyframes hideeffect {
  from {
    opacity:1;
  }
      
  to {
    opacity:0;
    display:none;
  }
}

/* コントロールアイコンのサイズ */
#cst_controller{
	font-size:60%;
}

.mobile_device #cst_controller{
	font-size:100%;

    -webkit-border-radius:0 0 0.15em 0.15em;
    -moz-border-radius:0 0 0.15em 0.15em;
    -ms-border-radius:0 0 0.15em 0.15em;
    border-radius:0 0 0.15em 0.15em;
}

.pc_device #cst_controller{
	font-size:60%;

    -webkit-border-radius:0 0 0.25em 0.25em;
    -moz-border-radius:0 0 0.25em 0.25em;
    -ms-border-radius:0 0 0.25em 0.25em;
    border-radius:0 0 0.25em 0.25em;
}

/* ストアリスト */
.cst_bookstore_list{
	width:100%;
}

.cst_bookstore_list > p{
	font-size:120%;
	font-weight: bold;
}

.cst_bookstore_list > div{
	display:inline-block;
	width:12%;
	height:auto;
	padding:0.25em;
}

.cst_bookstore_list > div > a > div{
	width:100%;
	height:auto%;
	text-align:center;
	backgroud-color:white;
}

.cst_bookstore_list > div > a > div > img{
	width:100%;
	height:auto;
	max-width:100%;
	max-height:100%;
}

#cst_bookstore_list_more,#cst_ebookstore_list_more,#cst_bookstore_list_close,#cst_ebookstore_list_close{
	width:100%;
	font-size:1em;
	text-align:center;
	height:1em;
}

#cst_bookstore_list_more > hr,#cst_ebookstore_list_more > hr,#cst_bookstore_list_close > hr,#cst_ebookstore_list_close > hr{
	width:99%;
	height:0.5em;
	margin:0;
	border-top-width: 0.15em;
}


/* 各デバイスコンテキスト対応 */
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
	#cst_left_info,.cst_rightgroup,#slider,#cst_reader_footer,.mobile_device #cst_reader_header{
		font-size:150%;
	}
	#cst_controller{
		font-size:60%;
	}
	.mobile_device #cst_controller{
		font-size:100%;
	}
	.pc_device #cst_controller{
		font-size:60%;
	}
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
	#cst_left_info,.cst_rightgroup,#slider,#cst_reader_footer,.mobile_device #cst_reader_header{
		font-size:200%;
	}
	#cst_controller{
		font-size:60%;
	}
	.mobile_device #cst_controller{
		font-size:100%;
	}
	.pc_device #cst_controller{
		font-size:60%;
	}
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
	#cst_left_info,.cst_rightgroup,#slider,#cst_reader_footer,.mobile_device #cst_reader_header{
		font-size:300%;
	}
	#cst_controller{
		font-size:78%;
	}
	.mobile_device #cst_controller{
		font-size:130%;
	}
	.pc_device #cst_controller{
		font-size:78%;
	}
}
@media only screen and (-webkit-min-device-pixel-ratio:4){
	#cst_left_info,.cst_rightgroup,#cst_controller,#cst_reader_footer,.mobile_device #cst_reader_header{
		font-size:400%;
	}
	#cst_controller{
		font-size:90%;
	}
	.mobile_device #cst_controller{
		font-size:150%;
	}
	.pc_device #cst_controller{
		font-size:90%;
	}
}
/*
@media screen and (-webkit-min-device-pixel-ratio:4) and (min-width:1400) and (orientation: portrait),
screen and (-webkit-min-device-pixel-ratio:4) and (min-width:2000) and (orientation: landscape){
	#cst_controller{
		font-size:60%;
	}
	#cst_left_info,.cst_rightgroup,#slider,#cst_reader_footer{
		font-size:600%;
	}
}
*/
/* 縦長画面用定義 */
@media only screen and (orientation: portrait){
	.cst_leftgroup, .cst_rightgroup{
		width:100%;
		float:none;
		margin 0;
		margin-left:0;
		margin-right:0;
	}
	.information_controller{
		padding:0.5em;
		width:100%;
		margin-left:0;
	}
	#cst_left_info{
		margin-bottom:0.5em;
	}
	#cst_right{
		width:100%;
		margin-top:1em;
		position:relative;
		right:0px;
		top:0px;
		padding-left:0;
	}
	#cst_content_info,#cst_bottom{
		width:100%;
		margin-left:0;
	}
	#cst_content_info > div,#cst_bottom > div{
		margin-right:0em;
	}
	#container{
		width:100%;
		margin-left:0;
	}
	.cst_bookstore_list > div{
		width:24%;
	}
}

/* 最大表示用定義 */
.container_full #container{
	width:100%;
	height:100%;
	margin:0;
}

.container_full .custom_information,.container_full #cst_controller,.container_full #cst_contents_jump, .container_full #cst_reader_header, .container_full #cst_reader_footer{
	display:none;
}

body.container_full{
	overflow-x:hidden;
	overflow-y:hidden;
}

/* ヘッダ */
 nav {
  font-family: 'Noto Sans Japanese', Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.navbar {
  background-color:#333;
  font-size:130%;
  padding:0.25em;
  
  min-height: 2em;
  margin-bottom: 2.5em;
}

.navbar-inverse .navbar-nav>li>a {
  color: #FFF !important;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.displayed .navbar-inverse .navbar-nav>li>a.cst_active{
	color :#555 !important;
	background-color: #FFF;
}

.navbar-nav a:hover,
.navbar-nav a:focus {
	color:white !important;
	background-color:#808080 !important;
}

.navbar-brand{
    height: 2em;
    padding: 0.5em 0.8em;
    font-size: 100%;
    line-height: 2em;
}


.navbar-nav > li > a{
	line-height: 1.2em;
}

.cst_head_mov{
	display:none;
}

@media (max-width: 767px) {
	.cst_head_mov{
		display:inline;
	}
}

@media (min-width: 768px){
	.normal_ratio .navbar-right {
    	margin-right: 0.85em !important;
    }
	.normal_ratio .navbar-nav>li>a>span.cst_head_mov {
		display: none;
	}
}
@media (min-width: 1152px) and (-webkit-min-device-pixel-ratio: 1.5),(min-width: 1536px) and (-webkit-min-device-pixel-ratio: 2),(min-width: 2304px) and (-webkit-min-device-pixel-ratio: 3),(min-width: 3072px) and (-webkit-min-device-pixel-ratio: 4){
	.custom_ratio .navbar-right {
    	margin-right: 0.85em !important;
    }
	.custom_ratio .navbar-nav>li>a>span.cst_head_mov {
		display: none;
	}
}


.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
	color: #FFF;
	background-color: #808080;
}
.navbar-fixed-top .navbar-collapse {
	max-height: 400px;
}

.navbar-toggle .icon-bar {
  display: block;
  width: 1.22em;
  height: 0.11em;
  border-radius: 0.1em;
}
.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 0.21em;
}

.navbar-toggle{
    margin-top: 0;
    margin-right: 0.9em;
    margin-bottom: 0;
    padding:0.5em;
}

@media (min-width: 768px) {
  .normal_ratio .navbar-nav > li > a {
    padding-top: 0.4em;
    padding-bottom: 0.4em;
  }
}
@media (min-width: 1152px) and (-webkit-max-device-pixel-ratio: 1.5),(min-width: 1536px) and (-webkit-max-device-pixel-ratio: 2),(min-width: 2304px) and (-webkit-max-device-pixel-ratio: 3),(min-width: 3072px) and (-webkit-max-device-pixel-ratio: 4){
  .custom_ratio .navbar-nav > li > a {
    padding-top: 0.4em;
    padding-bottom: 0.4em;
  }
}

.top-logo {
	position:relative;
	top:-0.5em;
	height:2.2em;
}

/* フッター */
#cst_reader_footer{
	background-color:white;
	color:#555;
	width:100%;
	display:inline-block;
	margin-top:0.5em;
	padding-top:0.2em;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing: border-box;
}

#cst_foot_title{
	width:100%;
	padding-left:2em;
	padding-right:2em;
	border-top:dashed 0.1em #555;
	border-bottom:dashed 0.1em #555;
	margin-bottom:0.2em;
	font-weight: bold;
}

#cst_foot_body{
	position: relative;
	display: inline-block;
	width:100%;
}

#cst_foot_left_img_group{
	float:left;
	width:20%;
    display: inline-block;
    vertical-align: middle;
    
    position: absolute;
    top: 0;
    bottom: 0;

    cursor:pointer;

	background-position:center center;
	background-repeat:no-repeat;
	-moz-background-size:contain;
	background-size:contain;
}

#cst_foot_left_img_group > img{
	position:absolute;
	right:25%;
	bottom:0.5em;
	width:40%;
	height:auto;
}

#cst_right_bannar_groups{
	margin-left:20%;
    width: 80%;
    display: inline-block;
}

.cst_right_bannar_group{
	float:left;
	width:49%;
	margin-top:1em;
	padding-left:1em;
}

.cst_bannar_group{
	float:left;
	width:100%;
}

.cst_bannar_group_titile{
	float:left;
	width:99%;
	border-bottom:dashed 0.1em #555;
	margin-left:1em;
	text-indent: -1em;
}

.cst_bannars,.cst_bannars2{
	float:left;
	width:100%;
	padding-left:1em;
}

.cst_bannars > a > div{
	float:left;width:33%;height:auto;padding:0.5em;
}

.cst_bannars > a > div > div, .cst_bannars2 > a > div > div{
	wdth:100%;
	height:auto;
	border:solid 0.1em #555;
}

.cst_bannars > a > div > div > img, .cst_bannars2 > a > div > div > img{
	width:100%;
	height:auto;
}

.cst_bannars2 > a > div{
	float:left;width:24.5%;height:auto;padding:0.5em;
}

#cst_foot_bottom{
	float:left;
	width:100%;
	margin-top:0.2em;
	border-top:dashed 0.1em #555;
	border-bottom:solid 0.4em black;
}

#cst_foot_bottom > div{
	padding-right:2em;
	float:right;
	text-align:right;
}

#cst_foot_bottom_border{
	float:left;
	width:100%;
	height:1em;
}

/* 縦長画面用定義 */
@media only screen and (orientation: portrait){
	#cst_foot_left_img_group{
		width:30%;
		padding-left:1em;
		padding-right:1em;
	}

	#cst_foot_left_img_group > img{
		position:absolute;
		right:0;
		bottom:25%;
		width:60%;
		height:auto;
	}

	#cst_right_bannar_groups{
    	width: 100%;
		margin-left:0;
		float: right;
		margin-right: 1em;
	}
	
	.cst_right_bannar_group{
		float:right;
		width:69%;
	}
}

/* バナー内iframe */
.cst_banner_tag{
position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.cst_banner_tag > iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}