body,div,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,object,iframe,pre,code,p,blockquote,form,fieldset,legend,table,th,td,caption,tbody,tfoot,thead,article,section,nav,aside,figure,figcaption,header,footer,hgroup,menuaudio,video,canvas{margin:0;padding:0;}article,section,nav,aside,figure,figcaption,header,footer,hgroup,menu{display:block;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;}
body{font-size:14px;background:#fff;text-rendering : optimizeSpeed;}
body.fullmode a{text-decoration:none;-webkit-transition:color,background-color 0.4s ease;-moz-transition: color,background-color 0.4s ease;}
a{opacity:1;color:#169dda;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}
::selection{background:#169dda;color:#fff;}
::-moz-selection{background:#169dda;color:#fff;}
.cf:before,.cf:after{content:"";display:table;}.cf:after{clear:both;}.cf{zoom:1;}
em{font-style: normal;}
body{background-color: #fafafa;}
.fader {-webkit-transition:all 0.4s ease;transition:all 0.4s ease;-moz-transition: all 0.4s ease;opacity:1}
body{overflow-y: scroll;position: relative;color:#252525;
	letter-spacing: 0.05em; -webkit-font-smoothing: auto;
	font-weight: 500;-webkit-text-stroke: 0.2px;
}
body article{margin-top: 66px;}
body article.wrp{margin-top: 66px;}
body.spmode article.wrp{margin-top: 50px;}
header.pc{position: fixed;top: 0;z-index: 4;}
body ,.gothic{font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,sans-serif;font-weight: 300;-webkit-text-stroke: inherit;}
.serif{font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;font-weight: 300;-webkit-text-stroke: inherit;}

body.loading >*{display: none;}
body.loading #loading_spinner{display: block;position: fixed;width: 100%;height:100%;background: #fff url(/img/loader.gif) no-repeat center center;top:0;}
.item{background-color: #fff;display: inline-block;margin: 15px;position: relative;overflow: hidden;}
.item-cvr{width: 290px;height:290px;background:url(/img/loader.gif) no-repeat center;display:block;background-size: contain;overflow: hidden;}
.item-cvr.lazy_img{background-size: auto;}
.item .detail{display:table;height:290px;width:290px;position: absolute; overflow: hidden;background-color: rgba(0,0,0,0.3);bottom:0;margin-left:-290px;opacity:0;color:#fff;-webkit-box-pack: center;box-sizing: border-box;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;
-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-transition:opacity 0.2s ease;transition:opacity 0.2s ease;-moz-transition: opacity 0.2s ease;}
.item .detail .detail-wrap{display: block;font-size: 14px;text-align: center;}
.item .detail .detail-wrap > * {display: inline-block;margin:0 20px 8px;font-weight: 600;text-align: center;}
.item:hover .item-cvr{opacity: 0.8;}
.item:hover .detail,.item:focus .detail{opacity: 1;margin-left:0px;}
.item.locked .detail{background: url(/bookshelf/img/locked.png) center;background-blend-mode: darken;background-color: rgba(0,0,0,0.3);	background-position-y: 70px;}
.item.locked:hover .detail{opacity: 1;}
/* sp menu */
#sp_header{clear: both;position: fixed;top:0;height: 50px;display: none;width:100%;background-color: #fff;z-index: 5;}
#pc_header{width:100%;}
#sp_header .menu_icon span{display:block;width: 26px;height:0px;position: absolute;right:0;border-top:1px solid #000;top:8px;left:0;}
#sp_header .menu_icon span:before{content:'';display:block;width: 26px;height:0px;position: absolute;right:0;border-top:1px solid #000;top:-9px;left:0;}
#sp_header .menu_icon span:after{content:'';display:block;width: 26px;height:0px;position: absolute;right:0;border-top:1px solid #000;top:8px;left:0;}
#sp_header .menu-wrap ,#sp_header .menu_icon,#sp_header .menu_icon span,#sp_header .menu_icon span:before,#sp_header .menu_icon span:after{
/**/transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;}
body.menu-open #sp_header .menu_icon span{width: 0;border-color:#fff;}
body.menu-open #sp_header .menu_icon span:before{transform:rotate(45deg);-webkit-transform:rotate(45deg);top:0;border-color:#fff;}
body.menu-open #sp_header .menu_icon span:after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);top:0;border-color:#fff;}
body.menu-open #sp_header .menu_icon{right: 230px !important;}

#pc_header>a{display: block;width: 120px;height: 120px;margin:30px auto;}
.bookshelf_header{margin:40px;}
.bookshelf_header_title{text-align: center;font-size:12px;line-height: 1.4;}
.bookshelf_header_image{width: 120px;height:120px;background:#fff url() no-repeat center;background-size:cover;display: block;border-radius: 60px;overflow: hidden;margin:30px auto;}

.main{max-width:980px;width:100%;margin:40px auto;}

.controller_wrap{border-bottom:1px solid #e8e8e8;}
.sort_selecter{width:140px;float: left;}
.sort_selecter .sort_selected{padding:8px 15px;display: block;cursor: pointer;height: 37px;box-sizing:border-box;}
.sort_selecter .sort_lists{z-index:100;position:absolute;padding:1px;border:1px solid #f0f0f0;display: none;cursor: pointer;background-color: #fff;}
.sort_selecter .sort_lists li{padding:8px 15px;cursor: pointer;}
.sort_selecter .sort_lists li:hover{color:#666;background-color: #fafafa;}
.tag_selecter{width:140px;float: left;}
.tag_selecter .tag_selected{padding:8px 15px;display: block;cursor: pointer;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 150px;height: 37px;box-sizing:border-box;}
.tag_selecter .tag_lists{z-index:100;position:absolute;padding:1px;border:1px solid #f0f0f0;display: none;cursor: pointer;background-color: #fff;}
.tag_selecter .tag_lists li{padding:8px 15px;cursor: pointer;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 140px;}
.tag_selecter .tag_lists li:hover{color:#666;background-color: #fafafa;}
/*.sort_selecter:hover .sort_lists,.controller_wrap.open .sort_lists{display: block;}*/

@media only screen and (max-width: 989px){
	.main{max-width:650px;width:100%;margin:40px auto;}
}
@media only screen and (max-width: 798px){
	.main{width:100%;margin:40px auto;}
	.controller_wrap{text-align: center;}
	.thumb_wrap{text-align: center;}
}
@media only screen and (max-width: 849px){
/*	#pc_header{display: none;}
	#sp_header{display:block;}
*/}
.effect_fadeup,.effect_fadein,.effect_fadeleft,.effect_faderight,.effect_fadeblur{opacity: 0;}
.ie9 .effect_fadeup,.ie9 .effect_fadein,.ie9 .effect_fadeleft,.ie9 .effect_faderight,.effect_fadeblur{opacity: 1;}
.e_active .effect_fadeup,.effect_fadeup.e_active{animation: kf_fadeup 1.2s ease 0.0s  both;-webkit-animation: kf_fadeup 1.2s ease 0.0s  both;}
.e_active .effect_fadein,.effect_fadein.e_active{animation: kf_fadein 1.2s ease 0.0s  both;-webkit-animation: kf_fadein 1.2s ease 0.0s  both;}
.e_active .effect_fadeleft,.effect_fadeleft.e_active{animation: kf_fadeleft 1.2s ease 0.0s  both;-webkit-animation: kf_fadeleft 1.2s ease 0.0s  both;}
.e_active .effect_faderight,.effect_faderight.e_active{animation: kf_faderight 1.2s ease 0.0s  both;-webkit-animation: kf_faderight 1.2s ease 0.0s  both;}
.e_active .effect_fadeblur,.effect_fadeblur.e_active{animation: kf_fadeblur 1.2s ease 0.0s  both;-webkit-animation: kf_fadeblur 1.2s ease 0.0s  both;}
@keyframes kf_fadeblur {
  0%{-webkit-filter: blur(36px);-moz-filter: blur(36px);-ms-filter: blur(36px);filter: blur(36px);filter: alpha(opacity=10);-moz-opacity: 0.1;opacity: 0.1;}
100%{-webkit-filter: blur(0);-moz-filter: blur(0);-ms-filter: blur(0);filter: blur(0);filter: alpha(opacity=100);-moz-opacity: 1;opacity: 1;}
}
@keyframes kf_fadeup {
	0%{opacity: 0;transform:translate(0,30px);-webkit-transform:translate(0,30px);}
 80%{transform:translate(0,0);-webkit-transform:translate(0,0);}
100%{opacity: 1.0;transform:translate(0,0);-webkit-transform:translate(0,0);}
}
@keyframes kf_fadeleft {
	0%{opacity: 0;transform:translate(30px,0);-webkit-transform:translate(30px,0);}
 80%{transform:translate(0,0);-webkit-transform:translate(0,0);}
100%{opacity: 1.0;transform:translate(0,0);-webkit-transform:translate(0,0);}
}
@keyframes kf_faderight {
	0%{opacity: 0;transform:translate(-30px,0);-webkit-transform:translate(-30px,0);}
 80%{transform:translate(0,0);-webkit-transform:translate(0,0);}
100%{opacity: 1.0;transform:translate(0,0);-webkit-transform:translate(0,0);}
}
@keyframes kf_fadein {0%{opacity: 0;}100%{opacity: 1.0;}}
@-webkit-keyframes kf_fadeup {
	0%{opacity: 0;transform:translate(0,30px);-webkit-transform:translate(0,30px);}
 80%{transform:translate(0,0);-webkit-transform:translate(0,0);}
100%{opacity: 1.0;transform:translate(0,0);-webkit-transform:translate(0,0);}
}
@-webkit-keyframes kf_fadeleft {
	0%{opacity: 0;transform:translate(30px,0);-webkit-transform:translate(30px,0);}
 80%{transform:translate(0,0);-webkit-transform:translate(0,0);}
100%{opacity: 1.0;transform:translate(0,0);-webkit-transform:translate(0,0);}
}
@-webkit-keyframes kf_faderight {
	0%{opacity: 0;transform:translate(-30px,0);-webkit-transform:translate(-30px,0);}
 80%{transform:translate(0,0);-webkit-transform:translate(0,0);}
100%{opacity: 1.0;transform:translate(0,0);-webkit-transform:translate(0,0);}
}
@-webkit-keyframes kf_fadein {0%{opacity: 0;}100%{opacity: 1.0;}}
.effect_delay1{	animation-delay: 0.0s !important;-webkit-animation-delay: 0.0s !important;}
.effect_delay2{	animation-delay: 1.0s !important;-webkit-animation-delay: 1.0s !important;}
.effect_delay3{ animation-delay: 1.5s !important;-webkit-animation-delay: 1.5s !important;}
.effect_delay4{	animation-delay: 2.0s !important;-webkit-animation-delay: 2.0s !important;}
footer{font-size: 13px;text-align: center;padding:4px 0;display: none;}


.txt_search{float: right;padding-bottom: 10px;position: relative;}
.txt_search #search_kwd{height: 35px;border:1px solid #ebebeb;width: 218px;box-sizing:border-box;padding:3px 30px 3px 8px;color: #999;}
.txt_search .label{position: absolute;text-align: center;color: #999;width: 218px;height: 35px;line-height: 35px;top: 0;left: 0;}

.txt_search .del_kwd{
	position:absolute;
	display:inline-block;
	top:1px;
	right:0;
	width:32px;
	height:32px;
	border:0;
	background-color:#ccc;
	border-radius:32px;
	margin:0;
	padding:0;
	transform:scale(0.5);
	cursor:pointer;
	display: none;
}
.txt_search .del_kwd:before{
	content:"";
	position:absolute;
	display:inline-block;
	top:4px;
	left:14px;
	width:4px;
	height:24px;
	border:0;
	margin:0;
	padding:0;
	background-color:white;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
.txt_search .del_kwd:after{
	content:"";
	position:absolute;
	display:inline-block;
	top:4px;
	left:14px;
	width:4px;
	height:24px;
	border:0;
	margin:0;
	padding:0;
	background-color:white;
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
.txt_search .del_kwd:hover{
}

.list_wrap .item{display: block;background-color: #FAFAFA;margin-top: 38px;box-sizing:border-box;min-height:290px;}
.list_wrap .item .lft{position: absolute;}
.list_wrap .item .lft a{display: block;width: 240px;height: 290px;background-color: #FFF;}
.list_wrap .item .rgt{padding-left: 285px;}
.list_wrap .item .rgt h2.book_title{font-size: 24px;margin: 15px 0 15px;display: flex;align-items:center;line-height: 1;}
.list_wrap .item .rgt h2.book_title svg{width: 24px;height: 24px;fill:#666;padding-left: 3px;}
.list_wrap .item .rgt .open a{background-color: #fff;text-align: center;display: block;color: #999;border:1px solid #d7d7d7;width: 220px;height: 34px;line-height: 34px;}
.list_wrap .item .rgt .open a:hover{text-decoration: none;background-color: #7D7D7D;color: #FFF;}
.list_wrap .item .rgt .page_no{margin:30px 0 20px;}
.list_wrap .item .rgt .outline{}
.list_wrap .item .rgt .outline .highlight{background-color: #FDF47D;display: inline-block;}
.view_mode{text-align: center;padding:27px 0 0;position: relative;z-index: 2;}
.view_mode li{display: inline-block;margin:0 20px;cursor: pointer;}
.view_mode li svg{fill:#e1e1e1;width: 20px;height: 20px;}
.view_mode li.cur svg,.view_mode li:hover svg{fill:#000;}
.book_wrap{position: relative;}
.book_wrap.spinner{background: url('/img/loader.gif') no-repeat center;}
.thumb_wrap{position: absolute;top: 10px;width: 100%;padding-bottom: 20px;}
.list_wrap{display: none;position: absolute;top: -13px;width: 100%;padding-bottom: 20px;}
p.nodata{margin-top: 20px;}
.list_wrap p.nodata{margin-top: 43px;}


@media only screen and (max-width: 799px){
 .txt_search{float: none;width: 270px;margin:0 auto;}
 .txt_search #search_kwd{width: 270px;}
 .txt_search .label{width: 270px;box-sizing:border-box;}
 .select_wrap{width: 300px;margin:0 auto 10px;}
 .sort_selecter,.tag_selecter{width: 145px;}
 .sort_selecter .sort_selected{text-align: left;}
 .tag_selecter .tag_selected{text-align: left;}
 .sort_selecter .sort_lists li{text-align: left;}
 .tag_selecter .tag_lists li{text-align: left;width: 145px;}
 p.nodata{padding:0 10px;text-align: center;}
}
/* ===== モバイル(max-width:798px)のみ 3モード表示(tile追加) 2026 ===== */
/* tile(2x2)アイコンは既定で非表示 → PC/タブレット(799px〜)は従来どおり2アイコン */
.view_mode li[data-type="tile"]{display:none;}
/* リスト表示OFF時の 1列/2列 切替UI(.sp_only): PC/タブレットでは非表示、モバイルのみ表示 */
.view_mode.sp_only{display:none;}
@media only screen and (max-width: 798px){
	/* モバイルのみ: tileアイコンを表示（アイコン上の余白はPCと同じ27pxのまま） */
	.view_mode li[data-type="tile"]{display:inline-block;}
	.view_mode.sp_only{display:block;}
	/* thumb(既定)=2列: .main(最大650px)基準の%で常に2列。vwだと651〜798pxで.mainに収まらず1列に折り返す為 */
	/* 左寄せ: 奇数件の最後の1件が行中央に来ないよう左カラムに揃える */
	#mgcovers:not(.tile_mode) .thumb_wrap{text-align:left;}
	#mgcovers:not(.tile_mode) .thumb_wrap .item{width:44%;margin:2% 1.5% 4%;vertical-align:top;}
	#mgcovers:not(.tile_mode) .thumb_wrap .item-cvr{width:100%;height:0;padding-bottom:100%;}
	#mgcovers:not(.tile_mode) .thumb_wrap .item .detail{width:100%;height:100%;margin-left:0;pointer-events:none;}
	/* tile=1列(大サムネ): .main基準の%で常に1列。base290pxだと650px内に2つ入り2列化する為 */
	#mgcovers.tile_mode .thumb_wrap{text-align:center;}
	#mgcovers.tile_mode .thumb_wrap .item{width:86%;margin:2% auto 5%;display:block;}
	#mgcovers.tile_mode .thumb_wrap .item-cvr{width:100%;height:0;padding-bottom:100%;}
	#mgcovers.tile_mode .thumb_wrap .item .detail{width:100%;height:100%;margin-left:0;pointer-events:none;}
	/* レイヤー(.detail)は自アイテム内に固定+hover(iOSは1回目タップ)まで非interactiveにし、2列で左隣に重なりタップが点滅する問題を解消。1列と同じ「1タップでレイヤー→2タップで遷移」に統一 */
	#mgcovers .thumb_wrap .item:hover .detail{pointer-events:auto;}
	/* list: 680px以下(スマホ) サムネ左固定・右カラムにタイトル/ボタン/本文を縦積み。ボタンは右カラム全幅、本文は2行省略 */
	.list_wrap .item{min-height:100px;margin-top:38px;padding:0 15px;text-align:left;}
	.list_wrap .item .lft{position:absolute;left:15px;top:0;}
	.list_wrap .item .lft a{width:80px;height:100px;margin:0;}
	.list_wrap .item .rgt{padding-left:95px;}
	.list_wrap .item .rgt h2.book_title{display:block;font-size:15px;margin:0 0 6px;line-height:1.4;}
	.list_wrap .item .rgt .open a{display:block;width:100%;box-sizing:border-box;padding:0;height:28px;line-height:28px;margin:0 0 8px;}
	.list_wrap .item .rgt .page_no{margin:0 0 4px;width:auto;}
	.list_wrap .item .rgt .outline{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px;line-height:1.7;}
}