@charset "UTF-8";
@media screen and (max-width: 768px) {
/* common
----------------------------- */
body { border: 0; color: #333333; font-family: 'Noto Sans Japanese', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 16px; line-height: 1.6; margin: 0; padding: 0; text-align: center; -webkit-text-size-adjust: none; }
a,a:link, a:visited { color: #17407f; text-decoration: none; }
a:focus { outline: none }
img{ vertical-align: bottom; width: 100%; height: auto}
ul { letter-spacing: -.4em }
li { letter-spacing: normal; vertical-align: bottom; list-style-type: none}
sup { vertical-align: super; font-size: smaller; }
.pcVer, #breadcrumb { display: none !important }
#header .inner { max-width: 100%; }
#header .inner > .logo { padding-top: 8px; text-align: left }
#header .inner > .logo img { height: 45px; width: auto; }
#header .inner .produce-logo { position: absolute; top: 50%; right: 70px; width: 70px; transform: translateY(-50%); }
#gNav > #nav > .mainList li { width: 50%; padding: 5px;}
#gNav #nav .mainList li a { display: block; padding: .8em 0; font-size: 80%;}
#gNav #nav .mainList li a::after { right: 10px;}
#gNav #nav .ttl { padding: .4em .75em; font-size: 80%; margin-bottom: 10px;}
#gNav #nav .list li { width: 50%; font-size: 80%;}
#gNav #nav .list li a { padding: 0;}
#gNav .box { padding: 20px; width: 100%; margin: 0 auto 20px;}
#gNav > ul.bnr > li { padding: 5px;}
.snsList { overflow: hidden; display: block; text-align: center; margin-top: 20px;}
.snsList li { display: inline-block; padding: 3px; vertical-align: middle; height: 40px;}
.archiveListBox { margin-bottom: 20px;}
p.imgnowide img { width: auto !important }
.books ul.banner { margin-bottom: 20px;}
.books ul.banner li { display: inline-block; padding: 5px;}
textarea { padding: 0;}
.aform-content .submit input { padding: 0 !important; margin: 0 !important;}
#searchKeyword { width: 100%;}
.gsc-results-wrapper-overlay { width: 90% !important; padding: 30px 20px !important; top: 10% !important; left: 50% !important; -webkit-transform: translateX(-50%) !important; transform: translateX(-50%) !important}
.searchKeyword { width: 100%;}
/* layout
----------------------------- */
.inner { position: relative; padding: 0 20px; overflow: hidden; margin: 0 auto; max-width: 500px;}
h2 { text-align: center; margin-bottom: 20px;}
#wrapper { overflow: hidden; }
#content p { margin-bottom: 20px;}
#content { text-align: left}
p.btn, .submit, ul.bk-btn li { margin: 0 auto; text-align: center; width: 250px !important;}
ul.bk-btn li { margin-bottom: 20px; float: none !important}
.aform-content .submit input { margin-bottom: 10px !important;}
.aform-content .submit input:last-of-type { margin-bottom: 0 !important;}
.submit input[type="submit"], .submit input[type="button"], p.btn button { width: 250px;}
p.btn a, .submit input[type="submit"], .submit input[type="button"], p.btn button, ul.bk-btn li a { display: block; background: #14a83b; color: #fff; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; padding: 10px 0;}
p.btn a span, .submit input[type="submit"], .submit input[type="button"], ul.bk-btn li a span { position: relative;}
p.btn a span::after, .submit input[type="submit"]::after, .submit input[type="button"]::after, ul.bk-btn li span::after { content: ''; position: absolute; right: -20px; top: 9px; width: 5px; height: 5px; border-top: solid 2px currentColor; border-right: solid 2px currentColor; -webkit-transform: rotate(45deg); transform: rotate(45deg);}

/* footer
----------------------------- */
#footer { background-color: #cbcbcb; font-size: 88%; padding: 40px 0;}

/* page top
----------------------------- */
#pageTop { bottom: 60px; display: none; position: fixed; right: 10px; z-index: 999; }
#pageTop img { width: 40px; }

/* index
----------------------------- */
.index h2 { text-align: center; margin-bottom: 20px;}
.index h3 { text-align: left; margin-bottom: 20px; padding: 0 20px; font-size: 180%; font-weight: bold; text-align: center; margin: 0 auto; max-width: 500px;}
#anchor { background: #fff; width: 100%; padding: 10px 0;}
#anchor ul { display: table; table-layout: fixed; font-size: 80%; width: 100%;}
#anchor ul li { display: table-cell; text-align: center; position: relative; vertical-align: middle}
#anchor ul li::after { position: absolute; width: 1px; height: 16px; background: #989898; content: ''; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
#anchor ul li:last-child { display: none}
.books #anchor ul li:last-child { display: block}
#anchor ul li a { display: block; padding: 0 0; text-decoration: none; color: #333;}
	
#reading { background: #f5f5f5; padding: 20px 0 0;}
#reading .entry-box { margin-bottom: 40px; }
#reading .entry-box:last-of-type { margin-bottom: 0; }
#reading p.date { text-align: center; font-weight: bold; font-size: 120%;}
#reading h2 img { width: auto; height: 100px}
#reading h2 { text-align: center; font-size: 140%; font-weight: bold;}
#reading h2 span { position: relative;}
#reading h2 span::before { position: absolute; content: ''; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -60px; background: url(../img/ic_ttl_left.png) no-repeat 0 0; width: 35px; height: 14px; background-size: auto 14px;}
#reading h2 span::after { position: absolute; content: ''; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -60px; background: url(../img/ic_ttl_right.png) no-repeat 0 0; width: 35px; height: 14px; background-size: auto 14px;}
#reading .ttlBox { position: relative;}
#reading .ttlBox p { margin-bottom: 0; position: absolute; top: 30px; right: 0}
#reading .ttlBox p img { width: 60px; height: auto; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;}
#reading p.author { text-align: center; font-size: 90%; margin-bottom: 10px; line-height: 1}
#reading p.catName { text-align: center; margin-bottom: 20px; line-height: 1.5}
#reading h3 { font-size: 120%; margin-bottom: 10px; text-align: left;}
	
#word { padding: 20px 0 0;}
#word h2 img { width: auto; height: 80px}
#word h3 { margin-bottom: 10px; font-size: 140%;}
#word .author { text-align: right;}
	
#recommend { background: #f5f5f5; padding: 20px 0 0;}
#recommend h2 img { width: auto; height: 80px}
#recommend h3 { font-size: 140%; margin-bottom: 10px;}
#recommend p.author { font-size: 120%; margin-bottom: 20px; line-height: 1; text-align: center;}
#recommend dl { overflow: hidden; margin-bottom: 20px}
#recommend dl dt { width: 180px; margin: 0 auto 20px;}
#recommend dl dt img { margin-bottom: 5px;}
#recommend dl dt span { display: block; text-align: right; font-size: 80%;}
#recommend dl dt span::before { content: '（'}
#recommend dl dt span::after { content: '）'}
#recommend h3 a { color: #333;}
#recommend dl dd h4 { font-size: 110%; margin-bottom: 10px; font-weight: bold;}
#recommend p.ttl { text-align: center; margin-bottom: 10px;}
#recommend p.ttl img { width: auto; height: 40px;}
	
#recommend-entry { padding: 20px 0; background: #e9e9e9}
#recommend-entry .inner { padding: 0 10px;}
#recommend-entry h2 { text-align: center; font-size: 140%; font-weight: bold;}
#recommend-entry h2 span { position: relative;}
#recommend-entry h2 span::before { position: absolute; content: ''; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -60px; background: url(../img/ic_ttl_left.png) no-repeat 0 0; width: 35px; height: 14px; background-size: auto 14px;}
#recommend-entry h2 span::after { position: absolute; content: ''; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -60px; background: url(../img/ic_ttl_right.png) no-repeat 0 0; width: 35px; height: 14px; background-size: auto 14px;}
#recommend-entry ul { overflow: hidden; padding: 5px;}
#recommend-entry li { float: left; width: 50%; padding: 5px;}
#recommend-entry li:first-child { float: none; width: 100%;}
#recommend-entry .box { padding: 10px 10px 0; overflow: hidden; background: #fff;}
#recommend-entry li:first-child .box { padding: 20px 20px 0;}
#recommend-entry h3 { margin-bottom: 10px; padding: 0;}
#recommend-entry li:first-child h3 { margin-bottom: 20px;}
#recommend-entry h4 { text-align: center; margin-bottom: 5px;}
#recommend-entry h4 a { text-decoration: none; font-weight: bold; font-size: 88%; color: #333; line-height: 1.4}
#recommend-entry li:first-child h4 a { font-size: 120%; line-height: 1.6}
#recommend-entry p.author { text-align: center; font-size: 75%; margin-bottom: 10px !important}
#recommend-entry li:first-child p.author { margin-bottom: 20px !important}
#recommend-entry li:first-child p.author { font-size: 88%;}
#recommend-entry p.txt { display: none;}
#recommend-entry li:first-child p.txt { display: block;}
	
#banner { padding: 20px 0;}
#banner .inner { padding: 0 10px;}
#banner ul { overflow: hidden; }
#banner ul li { width: 50%; padding: 5px; text-align: center; float: left;}
#banner ul li div { background: #f5f5f5; padding: 8px;}
#banner ul li div a { display: block; padding-bottom: 2px; color: #333;}
#banner ul li div a img { margin-bottom: 10px;}
#banner ul li div span { font-size: 80%;}

#backnumber { padding: 20px 0;}
#backnumber h2 { text-align: center; font-size: 140%; font-weight: bold;}
#backnumber h2 span { position: relative;}
#backnumber h2 span::before { position: absolute; content: ''; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -60px; background: url(../img/ic_ttl_left.png) no-repeat 0 0; width: 35px; height: 14px; background-size: auto 14px;}
#backnumber h2 span::after { position: absolute; content: ''; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -60px; background: url(../img/ic_ttl_right.png) no-repeat 0 0; width: 35px; height: 14px; background-size: auto 14px;}
	
#backnumber .box { border-top: 1px solid #ccc; margin-bottom: 20px; padding-top: 10px;}
#backnumber .box dl { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ccc;}
#backnumber .box dl dt { margin-bottom: 5px}
#backnumber .box dl dt span { display: inline-block; font-size: 80%; padding: 2px 10px; background: #000; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; text-align: center; color: #fff}
#backnumber .box dl dd span { display: block; text-align: right; margin-top: 5px}
#backnumber .box dl dd span.member { position: static; padding: 3px 15px; background: #000; color: #fff; border-radius: 4px; font-size: 80%; display: inline-block;}
#backnumber .box dl dt strong { font-weight: bold;}
#backnumber .box dl dd a { color: #333;}

#yesterday{ padding: 20px 0; background: #ececec; padding-bottom: 20px;}
#yesterday h2 { text-align: center; font-size: 140%; font-weight: bold;}
#yesterday h2 span { position: relative;}
#yesterday h2 span::before { position: absolute; content: ''; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -60px; background: url(../img/ic_ttl_left.png) no-repeat 0 0; width: 35px; height: 14px; background-size: auto 14px;}
#yesterday h2 span::after { position: absolute; content: ''; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -60px; background: url(../img/ic_ttl_right.png) no-repeat 0 0; width: 35px; height: 14px; background-size: auto 14px;}
	
#yesterday .box { border-top: 1px solid #ccc; margin-bottom: 20px; padding-top: 10px;}
#yesterday .box dl { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ccc;}
#yesterday .box dl dt { margin-bottom: 5px}
#yesterday .box dl dt span { display: inline-block; font-size: 80%; padding: 2px 10px; background: #000; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; text-align: center; color: #fff}
#yesterday .box dl dd span { display: block; text-align: right; margin-top: 5px}
#yesterday .box dl dd span.member { position: static; padding: 3px 15px; background: #000; color: #fff; border-radius: 4px; font-size: 80%; display: inline-block;}
#yesterday .box dl dt strong { font-weight: bold;}
#yesterday .box dl dd a { color: #333;}
	
/* ----------- */
#entry { padding: 10px 10px 40px; background: #f5f5f5; overflow: hidden}
#entry .inner { background: #fff; padding: 20px 20px 0}
#entry p.number { text-align: center}
#entry p.number span { color: #fff; padding: 5px 40px; background: #14a83b; font-size: 100%; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; text-align: center}
#entry h2 { font-size: 160%; font-weight: bold; text-align: left}
#entry h3 { position: relative; padding-bottom: .2em; border-bottom: 2px solid #ccc; margin-bottom: 20px; font-size: 140%;}
#entry h3::after { position: absolute; bottom: -2px; left: 0; z-index: 2; content: ''; width: 20%; height: 2px; background-color: #14a83b;}
#entry h4 { font-size: 120%;}
#entry h5 { font-size: 110%;}
#entry p.date { font-size: 80%; text-align: right; color: #14a83b}
#entry article { margin-bottom: 40px;}
#entry article p { line-height: 2}
#entry #authorBox { margin-bottom: 20px; border: 1px solid #dedede; padding: 20px 20px 0;}
#entry #authorBox p.ic { text-align: center}
#entry #authorBox p.ic img { width: 120px; height: auto; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;}
#entry #authorBox p.name { text-align: center; font-size: 160%;}
#entry #authorBox p.name span { font-size: 70%;}
#entry #authorBox ul.list { overflow: hidden; display: block; text-align: center; margin-bottom: 15px}
#entry #authorBox ul.list li { width: 50%; display: inline-block; text-align: center; padding: 5px}
#entry #authorBox ul.list li img { width: 100%; height: auto; display: block;}
#entry #authorBox ul.list li span { font-size: 80%;}
#entry #authorBox p.btn { width: 100%;}
#entry #info { border: dotted 1px #dedede; border-left: none; border-right: none; padding: 20px 0 20px; margin-bottom: 20px;}
#entry #info p.ttl { font-size: 140%; font-weight: bold; text-align: center;}
#entry #pagenation { margin: 20px auto 0; position: relative;}
#entry #pagenation li { position: absolute;}
#entry #pagenation li a { color: #333;}
#entry #pagenation li.prev { top: 0; left: 0;}
#entry #pagenation li.next { top: 0; right: 0;}
#entry #pagenation li.prev a::before { content: '\f104'; font-family: 'icon';}
#entry #pagenation li.prev span { padding-left: 1em}
#entry #pagenation li.next a::after { content: '\f105'; font-family: 'icon';}
#entry #pagenation li.next span { padding-right: 1em}
	
.grayBox { background: #f2f2f2; padding: 10px 10px 0; overflow: hidden; margin-bottom: 20px}
blockquote { position: relative; padding: 10px 15px 10px 50px; font-style: italic; background: #efefef; color: #555; margin-bottom: 30px;}
blockquote:before{ display: inline-block; position: absolute; top: 10px; left: -3px; vertical-align: middle; content: "“"; font-family: sans-serif; color: #cfcfcf; font-size: 90px; line-height: 1;}
blockquote p { padding: 0; margin: 10px 0; line-height: 1.7;}
blockquote cite { display: block; text-align: right; color: #888888; font-size: 0.9em;}

#entry article ol { padding-left: 1em; margin-bottom: 20px}
#entry article ol li { list-style-type: decimal}
/* ----------- */
#entry .commentList { background: #f5f5f5; padding: 10px 10px 0; }
#entry .commentList li { background: #fff; padding: 20px 20px 0; overflow: hidden; border: 1px solid #dadada; border-bottom: none}
#entry .commentList li:last-of-type { border-bottom: 1px solid #dadada;}
#entry .commentList li dl dt { margin-bottom: 5px; overflow: hidden; font-size: 80%}
#entry .commentList li dl dt span.commentAuthor { font-weight: bold}
#entry .commentList li dl dt span.datetime { color: #657786; display: block}
#entry .commentList li dl dd p { margin-bottom: 20px !important}
#entry .commentList li .reply-box { margin: 0 0 10px 10px;}
#entry .commentList li .reply-box dl { background: #f2f2f2; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; padding: 10px 10px 0; overflow: hidden}
#entry .commentList li .reply-box dl p { margin-bottom: 10px !important}
#entry .commentList li .reply-box:last-of-type { margin-bottom: 20px}
#entry #comments { overflow: hidden; background: #f5f5f5; padding: 10px; margin-bottom: 20px}
#entry #comments textarea { height: 100px; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; background: #fff; border: 1px solid #dadada; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px}
#entry #comments #comments-open-text { margin-bottom: 10px;}
#comments-open-footer.submit { width: auto}
#comments-open-footer.submit input[type="submit"] { width: 90%; margin: 0 auto}
/* ----------- */
.webpage h1, .news h1 { height: 100px; background: #14a83b; color: #f2f2f2; font-weight: bold; font-size: 140%; line-height: 100px; vertical-align: middle; text-align: center}
.webpage .inner { background: #fff; padding: 20px}
.webpage h2 { font-size: 220%; font-weight: bold; text-align: left}
/* ----------- */
.backnumber h1 {  height: 100px; font-weight: bold; font-size: 140%; line-height: 100px; vertical-align: middle; text-align: center}
.backnumber h1 img { width: auto; height: 80%; vertical-align: middle}
/* ----------- */
#category-list { background: #f5f5f5; padding: 20px 0; margin-top: 20px;}
#category-list h2 { text-align: center; font-size: 140%; font-weight: bold;}
#category-list h2 span { position: relative;}
#category-list h2 span::before { position: absolute; content: ''; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -60px; background: url(../img/ic_ttl_left.png) no-repeat 0 0; width: 35px; height: 14px; background-size: auto 14px;}
#category-list h2 span::after { position: absolute; content: ''; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -60px; background: url(../img/ic_ttl_right.png) no-repeat 0 0; width: 35px; height: 14px; background-size: auto 14px;}
#category-list ul { overflow: hidden; margin-bottom: 20px;}
#category-list li { float: left; width: 50%; padding: 5px;}
#category-list .box { padding: 10px 10px 0; overflow: hidden; background: #fff;}
#category-list .box img { width: 100%; height: auto}
#category-list p.ttl { position: relative; padding-bottom: .2em; border-bottom: 2px solid #ccc; margin-bottom: 20px; font-size: 120%; font-weight: bold;}
#category-list p span { font-size: 70%;}
#category-list p.ttl::after { position: absolute; bottom: -2px; left: 0; z-index: 2; content: ''; width: 20%; height: 2px; background-color: #14a83b;}
#category-list h3 { margin-bottom: 10px;}
#category-list h4 { text-align: center; margin-bottom: 5px;}
#category-list h4 a { text-decoration: none; font-weight: bold; color: #333}
#category-list p.author { text-align: center; font-size: 80%; margin-bottom: 10px !important}
/* ----------- */
.recommend h1 { height: 100px; background: #f5f5f5; font-weight: bold; font-size: 140%; line-height: 100px; vertical-align: middle; text-align: center}
.recommend h1 img { width: auto; height: 80%;}	
.recommend #recommend { padding: 20px 0;}
.recommend #recommend .inner { background: #fff; padding-top: 20px; margin: 0 10px 20px;}
.recommend #recommend h2 { text-align: center; font-size: 200%; font-weight: bold;}
.recommend #recommend h2 span { position: relative;}
.recommend #recommend h2 span::before { position: absolute; content: ''; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -80px; background: url(../img/ic_ttl_left.png) no-repeat 0 0; width: 35px; height: 14px; background-size: auto 14px;}
.recommend #recommend h2 span::after { position: absolute; content: ''; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -80px; background: url(../img/ic_ttl_right.png) no-repeat 0 0; width: 35px; height: 14px; background-size: auto 14px;}
.recommend #recommend h3 { text-align: left; font-size: 110%; width: auto; margin-bottom: 10px;}
.recommend #recommend p.author { text-align: left; font-size: 100%; margin-bottom: 20px; line-height: 1; font-weight: bold;}
.recommend #recommend dl { margin-bottom: 20px; padding: 0 0 10px; border-bottom: 1px solid #f2f2f2; position: relative;}
.recommend #recommend dl dt { width: 120px; margin: 0 auto 10px}
.recommend #recommend dl dt img { width: 120px; height: auto; margin-bottom: 5px;}
.recommend #recommend dl dd p { margin-bottom: 10px;}
.recommend #recommend dl dd p.date { display: inline-block; font-size: 70%; padding: 3px 5px; background: #000; color: #fff; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; float: right; position: absolute; right: 0; top: 0;}
/* ----------- */
.webpage section { padding: 10px; background: #f5f5f5;}
.webpage section .box { margin-bottom: 20px;}
.webpage section h2 { position: relative; padding-bottom: .2em; border-bottom: 2px solid #ccc; margin-bottom: 20px; font-size: 140%; text-align: left}
.webpage section h2::after { position: absolute; bottom: -2px; left: 0; z-index: 2; content: ''; width: 20%; height: 2px; background-color: #14a83b;}
.webpage section h3 { font-size: 120%; margin-bottom: 20px;}
.webpage section h4 { font-size: 110%; margin-bottom: 20px;}
.webpage ol { padding-left: 1em; margin-bottom: 20px}
.webpage ol li { list-style-type: decimal; margin-bottom: 5px;}
/* ----------- */
.webpage.company dl { margin-bottom: 10px;}
.webpage.company dl dt { display: block; font-size: 80%; background: #000; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; text-align: center; color: #fff; padding: 5px 0; margin-bottom: 5px;}
/* ----------- */
.webpage.member dl { margin-bottom: 20px;}
.webpage.member dl dt, .webpage.member dl dd { margin-bottom: 10px;}
.webpage.member dl dt { font-weight: bold;}
.webpage.member dl dt img, .webpage.member dl dd img { width: auto; height: auto}
.webpage.member article { padding-bottom: 20px;}
.webpage.member dl dd input { width: 100% !important}
/* ----------- */
.webpage.login .submit { padding: 20px 0 !important}
.webpage.mypage .submit input { margin: 0 !important}
/* footer
----------------------------- */
#footer { background-color: #cbcbcb; font-size: 88%; padding: 20px 0; text-align: center;}
#footer .inner ul { display: block; text-align: center; margin-bottom: 20px;}
#footer .inner ul li { display: inline-block; position: relative;}
#footer .inner ul li a { display: block; text-decoration: none; color: #333; padding: 0 20px; line-height: 1}
#footer .inner ul li a::before { content: ''; background: #333; position: absolute; top: 50%; left: 0; width: 1px; height: 8px; margin-top: -4px;}
#footer .inner ul li::after { content: ''; background: #333; position: absolute; top: 50%; right: 0; width: 1px; height: 8px; margin-top: -4px;}
/* ----------- */
#sub-anchor { position: fixed; left: 0; bottom: -50px; -webkit-transition: all .3s; transition: all .3s; width: 100%; z-index: 1}
#sub-anchor.active { bottom: 0;}
#sub-anchor ul { display: table; width: 100%;}
#sub-anchor li { font-size: 70%; display: table-cell; position: relative;}
#sub-anchor li a { display: block; text-decoration: none; padding: 10px 5px; background: #000; color: #fff; text-align: center;}
#sub-anchor li::after { width: 1px; height: 5px; content: ''; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: #fff;}
#sub-anchor li:last-child::after { width: 0; height: 0; background: none;}
}

@media screen and (max-width: 320px) {
#anchor ul li br { display: block}
#reading .ttlBox p {top: 40px; right: -10px}
#reading .ttlBox p img { width: 45px;}
}