/*----------------------------------------------------------
:::::::::::::::::::::　　基本スタイル　 ::::::::::::::::::::
-----------------------------------------------------------*/
@charset "utf-8";
/* CSS Document */

/* :::::::::::::::::::::::::::::::::::: */
/* ::::::: のべおか ebooks :*****:::::: */
/* :::::::::::::::::::::::::::::::::::: */

/* 画像のフォルダ名を変更した場合は
CSSファイル内のパス「../nobeoka/..」を任意のフォルダ名に変更してください。
（例）../../img/subpage/city_ebooks/ここを変更/logo.png */



/* :::::::::::::::: 2018/4/11追加分 :::::::::::::::::::: */
.container-fluid img{
	width: 100%;
}
body#CityEbooks_tpl div.genre-area{
	overflow: hidden;
	margin-top: 5%;
	margin-bottom: 2%;
}
.genre-area img{
	width: 80%;
}
body#CityEbooks_tpl div.book-area{
	border: 1px dashed #b2b2b2;
	margin: 0 2%;
	padding: 0 2%;
	display: block;
}
.book-area .cover img{
	max-width: 70%;
	max-height: 173px;
	margin: 7px auto 0;
	background: none repeat scroll 0 0 #333333;
	box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.4);
	display: block;
	width: 100%;
	height: auto;
}
.book-area .txt01{
	color: #333333;
	text-align: center;
	font-size: 78%;
	font-weight: bold;
	line-height: 16px;
}
#content .book-area .txt02{
  text-align: center;
  font-size: 12px;
  padding: 0 5px 5px 10px;
  line-height: 16px;
}
#content .book-area .txt02 a{
	color: #808080;
}
#nobeoka .empty .cover.heightLine-bookimg img{
	margin: 0;
}
#content p.cover{
	margin-top: 15%;
	min-height: 173px;
	position: relative;
}
#content p.cover img{
	width: auto;
	position:absolute;
  left:0;
  right:0;
  bottom:0;
}
#content .book-area .txt02{
	margin-bottom: 10%;
}
@media screen and (max-width: 500px) {
	#content p.cover{
		min-height: 105px;
	}
	.book-area .cover img {
		max-height: 105px;
	}
	#content .book-area .txt01 {
    margin-bottom: 10%;
	}
	#nobeoka div.empty p.cover img{
		width: auto;
		position: absolute;
		left: 0;
		right: 0;
	}
}
/* :::::::::::::::: 2018/4/11追加分 ここまで :::::::::::::::::::: */


#content #container {
	padding-top:0;
}

#nobeoka #container {
	width:90%;
	margin:-6em auto 0;
}

#nobeoka #logo {
	height:80px;
	background-image: url("../../img/subpage/city_ebooks/nobeoka/logo.png");
	background-size:100%;
	background-repeat:no-repeat;
	margin:0 auto !important;
}

#nobeoka.ie_box #logo {
	background-image: url("../../img/subpage/city_ebooks/nobeoka/logo_ie.png");
	height:72px !important;
}

#nobeoka #main_image {
	background-image: url("../../img/subpage/city_ebooks/nobeoka/bg_body.jpg");
	background-size:100%;
	background-repeat:no-repeat;
	height:492px;
	margin:0 auto !important;
}
#nobeoka ul.nobeoka_navi {
	background: none repeat scroll 0px 0px transparent;
	box-shadow: none;
	max-width: 950px;
	width: 100%;
	padding: 34% 0 0 0;
	margin:0 auto !important;
}

#nobeoka ul.nobeoka_navi li {
    float: left;
    line-height: 0;
    font-size: 0px;
    width: 25%;
    margin: 0px 0px 20px;
}

#nobeoka ul.nobeoka_navi li img {
    width: 100%;
    max-width: 238px;
}

.coverImage {
	width:100%;
}

#nobeoka .title_booklist {
    text-align: center;
		margin-bottom:9px;
}
#nobeoka .title_booklist img {
		height:30px;
}

.umiurara {
	position:relative;
}

.umiurara img {
	width:100%;
}

/* アンカーリンク
------------------------------ */
#nobeoka #anchorLink {
	background-color:#d5d5d5;
	height:31px;
	width:85%;
	margin:0 auto;
}
#nobeoka #anchorLink ul {
	padding-top:0.5em;
}
#nobeoka #anchorLink li {
	float:left;
	padding-left:9%;
}
#nobeoka #anchorLink li:after {
	clear:both;
}
/*
------------------------------ */
#nobeoka .empty .cover img{
	margin:auto;
	width:100%;
	position:absolute;
	bottom:0px;
	left:17.5%;
	display:block;
}

#nobeoka #book_list .books {
	width:30%;
	min-width:unset;
	height:unset;
	float:left;
	padding:1em 0 0 0;
	margin:0.2em 1%;
}

#nobeoka #book_list .books .cover {
	height:5em;
}

/* --------------------------------------
  可変ナビゲーション用のスタイル
*/

#CityEbooks_tpl #container ul {
	padding:0.825em 0 0 0;
}

#nobeoka #container .site-content {
	margin:1.5em 0 0 0;
}

#nobeoka #container .site-content .anchorLink {
	background-color:#e5e5e5;
	clear:both;
	display:block;
	height:4.2em;
	padding:0;
	z-index:999;
	line-height:0.5em;
	margin-left:0.26%;
	margin-bottom:12px;
	width:98.1%;
}

#nobeoka #container .site-content .anchorLink li{
	float:left;
	width:17%;
	margin:0 0.1%;
	text-align:center;
	font-size:inherit;
	line-height:2em;
	height:2em;
	padding:0 1%;
}

#nobeoka #container .site-content .anchorLink li a {
	display:block;
	padding:0.1em 0px;
	text-decoration:none;
	font-size:small;
	color:#666;
	margin-top:-0.6em;
	line-height:1.6em;
}

.is-fixed .anchorLink {
	width:933px !important;
	position: fixed;
	top: 0;
	background-color:#e5e5e5;
}

#nobeoka .title_booklist .add-space {
	/* ガタつきを防止するためのスタイル */
	margin-bottom: -2em;
}

#nobeoka #container .site-content .anchorLink .hover {
	background-color:#fff;
	border-radius:1em;
	height:1.5em;
	margin-top:-0.6em;
	line-height:1.6em;
}

/*
  可変ナビゲーション用のスタイル
-------------------------------------- */

/* --------------------------
   スクロール用ナビゲーション
*/
#nobeoka .clear {
	clear:both;
}

/* スクロール用ナビゲーション
----------------------------- */

/* ------------------------------
   SNS
*/
#nobeoka .fb-like-box{
	margin:0 auto 15px;
	padding:0 0 0 0;
	line-height:0;
	font-size:0px;
}

#nobeoka .sns .twitter{
	margin:0px 10px 15px 0px;
	padding:0px 0 0 0;
	width:300px;
	display:inline-block;
}

#nobeoka .sns .twitter .tw_main{
	margin:0px 0 0 0;
}
/* SNS
------------------------------ */

@media screen and (max-width: 320px)  {

#nobeoka {
	padding:0 10px;
	width:100%;
	max-width:300px;
	overflow: hidden;
}

.umiurara {
	width:25%;
	top:-4.75em;
	left:30%;
}

#nobeoka #container .site-content .anchorLink {
	display:none;
}

#nobeoka .title_booklist {
	display:none;
}

#nobeoka #container .categoryHeader .categoryImage img {
	width:166%;
}

}

@media screen and (min-width:321px) and (max-width: 375px) {

.umiurara {
	width:25%;
	top:-6.75em;
	left:29%;
}

#nobeoka #container .site-content .anchorLink {
	display:none;
}

#nobeoka .title_booklist {
	display:none;
}

#nobeoka #container {
	width:90%;
	margin:-100px auto 0;
}

}

@media screen and (min-width:376px) and (max-width: 414px) {

.umiurara {
	width:27%;
	top:-6.25em;
	left:30%;
}

#nobeoka #container .site-content .anchorLink {
	display:none;
}

#nobeoka .title_booklist {
	display:none;
}

}

@media screen and (min-width:415px) and (max-width: 480px) {

#nobeoka {
	width:100%;
	max-width:480px;
	overflow: hidden;
}

.umiurara {
	width:27%;
	top:-6.5em;
	left:30%;
}

#nobeoka #container .site-content .anchorLink {
	display:none;
}

#nobeoka .title_booklist {
	display:none;
}

#nobeoka #main_image {
    background-image: url("../../img/subpage/city_ebooks/nobeoka/bg_body.jpg");
	height:120px;
}

}

@media screen and (min-width:481px) and (max-width: 568px) {

#nobeoka {
	width:100%;
	max-width:568px;
	overflow: hidden;
}

#nobeoka #container {
	margin:-9em auto 0;
}

#nobeoka #container .site-content .anchorLink {
	display:none;
}

.umiurara {
	width:28%;
	top:-7.5em;
	left:30%;
}

.site-content>.title_booklist {
	margin:3em auto;
}

#nobeoka .title_booklist {
	display:none;
}

#fb-root {
    display: none;
}

.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fb_iframe_widget span{
	width: 100% !important;
}

}

@media screen and (min-width:569px) and (max-width: 667px) {

#nobeoka {
	width:100%;
	max-width:667px;
	overflow: hidden;
}

.site-content>.title_booklist {
	margin:2em auto;
}

.umiurara {
	width:28%;
	top:-9em;
	left:31%;
}

#nobeoka #container .site-content .anchorLink {
	display:none;
}

#nobeoka .title_booklist {
	display:none;
}

#nobeoka #container {
	margin:-10em auto 0;
}

}

@media screen and (min-width:668px) and (max-width: 736px) {

#nobeoka {
	width:100%;
	max-width:736px;
	overflow: hidden;
}

#nobeoka #container {
	margin:-9em auto 0;
}

#nobeoka #container .site-content .anchorLink {
	display:none;
}

#nobeoka .title_booklist {
	display:none;
}

.site-content>.title_booklist {
	margin:2em auto;
}

.umiurara {
	width:29%;
	top:-10em;
	left:32%;
}

}

@media screen and (min-width:737px) and (max-width: 768px) {

#nobeoka {
	width:100%;
	max-width:768px;
	overflow: hidden;
}

#nobeoka #container {
	width:90%;
	margin:-10em auto 0;
}

#nobeoka #container .site-content .anchorLink {
	display:none;
}

#nobeoka #message {
	display:none;
}

.umiurara {
	width:28%;
	top:-10.5em;
	left:31%;
}

}

@media screen and (min-width: 769px) and (max-width: 1024px) {

.umiurara {
	width:28%;
	top:-12.5em;
	left:31%;
}

#nobeoka #container {
	width:90%;
	margin:-10em auto 0;
}

#nobeoka #container .site-content .anchorLink {
	display:none;
}

}

@media screen and (min-width: 1025px) and (max-width: 1365px) {

.umiurara {
	width:30%;
	top:-17em;
	left:31%;
}

#nobeoka #container {
	width:90%;
	margin:-12em auto 0;
}

}


@media screen and (min-width: 1366px) {

#nobeoka #container {
	width:90%;
	margin:-12em auto 0;
}

.umiurara {
	width:15%;
	top:-23.5em;
	left:27%;
}

}

@media screen and (min-width: 1366px) and (max-width: 1439px) {

.umiurara {
	width:27%;
	top:-17em;
	left:29%;
}

}

@media screen and (min-width: 1440px) and (max-width: 1599px) {

.umiurara {
	width:24.5%;
	top:-17em;
	left:26%;
}

}

@media screen and (min-width:1600px) and (max-width: 1919px) {

.umiurara {
	width:21%;
	top:-17.5em;
	left:23%;
}

}

@media screen and (min-width: 1920px) {

.umiurara {
	width:20%;
	top:-17em;
	left:23%;
}
}

/*****************************************************************************
****************** Bootstrap 5等分css ****************************************
*****************************************************************************/
.col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5,
.col-xs-2-5, .col-sm-2-5, .col-md-2-5, .col-lg-2-5,
.col-xs-3-5, .col-sm-3-5, .col-md-3-5, .col-lg-3-5,
.col-xs-4-5, .col-sm-4-5, .col-md-4-5, .col-lg-4-5 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-xs-1-5 {
    width: 20%;
    float: left;
}
.col-xs-2-5 {
    width: 40%;
    float: left;
}

.col-xs-3-5 {
    width: 60%;
    float: left;
}

.col-xs-4-5 {
    width: 80%;
    float: left;
}
@media (min-width: 768px) {
    .col-sm-1-5 {
        width: 20%;
        float: left;
    }
    .col-sm-2-5 {
        width: 40%;
        float: left;
    }
    .col-sm-3-5 {
        width: 60%;
        float: left;
    }
    .col-sm-4-5 {
        width: 80%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-1-5 {
        width: 20%;
        float: left;
    }
    .col-md-2-5 {
        width: 40%;
        float: left;
    }
    .col-md-3-5 {
        width: 60%;
        float: left;
    }
    .col-md-4-5 {
        width: 80%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-1-5 {
        width: 20%;
        float: left;
    }
    .col-lg-2-5 {
        width: 40%;
        float: left;
    }
    .col-lg-3-5 {
        width: 60%;
        float: left;
    }
    .col-lg-4-5 {
        width: 80%;
        float: left;
    }
}

/*****************************************************************************
****************** bootstrap調整 *********************************************
*****************************************************************************/
ul{
	margin-bottom: 0;
}