/* */
@charset "UTF-8";html{color:#000;background:#fff}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:""}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size: 100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}a{color:#000;text-decoration:none}a:hover{color:#000;text-decoration:none;background:#e5e5e5}strong{font-weight:700}body{font-size:16px;font-family:Didot,Didot LT STD,Bodoni,Palatino,Palatino Linotype,Sabon,Garamond,Adobe Garamond Pro,Hiragino Mincho Pro,HGSMinchoE,MS PMincho,serif}#globalheader-container{background:#101929;color:#fff;top:0;left:0;width:100%}.service-menu li a{color:#fff}#container,#footer{width:992px;margin:0 auto;padding:0 32px 0 0;background:url(https://cdn.blog.st-hatena.com/css/theme/novel/line.gif?version=1680f7e9f72477756816b715390e81) repeat-y 736px 0}#container{margin:0 auto;position:relative;overflow:hidden}#container-inner{width:100%;overflow:hidden}#blog-title{width:736px;height:200px;margin:24px 0 0;overflow:hidden;z-index:-5000}#blog-title-inner{margin:0 2px 0 0;width:608px!important;padding:32px 0 0 32px}#top-editarea{margin:24px 0 0 32px;width:640px;min-height:192px}#top-box{margin:24px 0 0 32px;width:640px}#box2{margin:-200px 0 0}.enable-top-editarea #box2{margin:-416px 0 0}.page-category-category_name #box2,.page-archive-category #box2{margin:-248px 0 0}.page-category-category_name.enable-top-editarea #box2,.page-archive-category.enable-top-editarea #box2{margin:-464px 0 0}#blog-title+#content #main{margin:32px 64px 0 32px}.header-image-enable #blog-title-inner,.header-image-only #blog-title-inner{margin:0 0 0 32px}.header-image-enable #blog-title-inner a:hover,.header-image-only #blog-title-inner a:hover{background:none;text-decoration:underline}.page-archive .breadcrumb{margin-bottom:10px}#content:after{content:"";clear:both;display:block;height:0}#wrapper{text-align:justify;text-justify:inter-ideograph;overflow:hidden;width:736px;float:left}#main{margin:0 64px 0 32px}#box2{float:right;width:224px;font-size:13px;overflow:hidden;z-index:8000;letter-spacing:1px;height:auto;word-wrap:break-word;line-height:1.6}#box2 a{color:#486670;text-decoration:none;border:none}#box2 .archive-module-month{margin:0 0 0 2.5em}#bottom-editarea{margin:64px 64px 0 32px;width:640px;clear:both}#footer{overflow:hidden;clear:both}#footer-inner{width:224px;float:right;font-size:12px;line-height:1.5;padding:0 0 24px 31px}#footer-inner a{border:none}#title a{font-weight:700;border:none;line-height:1;font-size:34px;letter-spacing:2px}#blog-description{font-size:14px;margin:7px 0 0}.entry{clear:both;overflow:hidden;position:relative;padding:0 0 48px}.entry-header{clear:both;overflow:hidden}.entry-header a{border:none}.date-,.date-first{margin:64px 0 0;background:url(https://cdn.blog.st-hatena.com/css/theme/novel/hr2.png?version=1680f7e9f72477756816b715390e81) repeat-x top left}.date-:first-child,.date-first:first-child{margin:0}.date- .date,.date-first .date{margin:0 0 40px}.date- .date a,.date-first .date a{font-size:20px;margin:20px 0 0;letter-spacing:2px;font-weight:700;display:inline-block;color:#eb1212}.date- .date a:hover,.date-first .date a:hover{border:none}.date- .date .date-year:after,.date-first .date .date-year:after{content:"年"}.date- .date .date-month:after,.date-first .date .date-month:after{content:"月"}.date- .date .date-day:after,.date-first .date .date-day:after{content:"日"}.date- .date .hyphen,.date-first .date .hyphen{display:none}.date- .date-last-updated,.date-first .date-last-updated{color:#eb1212;font-size:16px;font-weight:700;letter-spacing:2px}.date- .date-last-updated svg,.date-first .date-last-updated svg{width:15px;height:15px}.date-middle,.date-last{margin:48px 0 0;background:url(https://cdn.blog.st-hatena.com/css/theme/novel/hr.png?version=1680f7e9f72477756816b715390e81) no-repeat center top}.date-middle .entry-header,.date-last .entry-header{margin:53px 0 0}.date-middle .date,.date-last .date{display:none}.entry-title{margin:0 32px 16px 0;letter-spacing:1px;float:left}.entry-title a{font-size:18px;font-weight:700;font-family:Helvetica Neue,Helvetica,Univers,Arial,Hiragino Kaku Gothic Pro,Meiryo,MS PGothic,sans-serif}.categories{margin:4px 0 16px;display:inline-block;float:right}.categories a{font-size:13px;margin:0 0 0 7px}.categories a:after{content:","}.categories a:last-child:after{content:""}.entry-header-menu{position:absolute;top:20px;right:0}.entry-header-menu a{padding:7px 7px 5px;line-height:1;display:block;background:#f5f5f5}.entry-header-menu a:hover{background:#000;color:#ddd}.entry-content a{color:#486670;text-decoration:none;border-bottom:1px solid #777}.entry-content a:hover{color:#486670;text-decoration:none;border-bottom:1px solid #000;background:#e5e5e5}.entry-content .keyword{color:#000;text-decoration:none;border-bottom:1px solid #f0f0f0}.entry-content .keyword:hover{color:#000;text-decoration:none;border-bottom:1px solid #aaa;background:none}.entry-content{clear:both}.entry-content p{line-height:2;margin:0 0 8px}.entry-content img{max-width:100%;vertical-align:bottom;margin:0 0 16px}.entry-content img.hatena-image-left{margin:0 15px 0 0}.entry-content img.hatena-image-right{margin:0 0 0 15px}.entry-content .hatena-fotolife,.entry-content .http-image{border:none}.entry-content .hatena-fotolife:hover,.entry-content .http-image:hover{border:none;background:none}.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6{font-family:Helvetica Neue,Helvetica,Univers,Arial,Hiragino Kaku Gothic Pro,Meiryo,MS PGothic,sans-serif}.entry-content h1{background:#555;padding:5px 10px 3px;color:#fff;font-weight:700;margin:56px 0 16px;font-size:22px}.entry-content h2{border-top:3px double #000;padding:8px 0 0;font-weight:700;margin:56px 0 16px;font-size:20px}.entry-content h3{border-bottom:1px solid #000;padding:0 0 5px;font-weight:700;margin:56px 0 16px;font-size:18px}.entry-content h4{padding:8px 0 0;font-weight:700;margin:32px 0 8px;line-height:1}.entry-content h4:before{content:"";width:14px;height:14px;border-radius:50%;display:block;background:#000;float:left;margin:1px 5px 0 0}.entry-content h5,.entry-content h6{font-weight:700;margin:32px 0 8px}.entry-content pre{padding:16px 20px;font-size:14px;line-height:1.5;border:1px solid #ddd;font-family:Helvetica Neue,Helvetica,Univers,Arial,Hiragino Kaku Gothic Pro,Meiryo,MS PGothic,sans-serif;margin:16px 0 0;color:#aaa}.entry-content ul{margin:10px 0 0}.entry-content ul li{list-style-type:disc;margin:0 0 10px 1.5em}.entry-content ul li ul,.entry-content ul li ol{margin:10px 0}.entry-content ol{margin:10px 0 0}.entry-content ol li{list-style-type:decimal-leading-zero;margin:0 0 10px 2em}.entry-content ol li ul,.entry-content ol li ol{margin:10px 0}.entry-content dl{margin:10px 0 0}.entry-content dd{margin:0 0 0 1.5em}.entry-content table{width:100%;margin:16px 0}.entry-content th,.entry-content td{padding:12px 15px 8px;border:1px solid #ddd}.entry-content th{border:1px solid #bbb;font-weight:700;background:#ddd}.entry-content blockquote{border:1px solid #ddd;padding:16px 20px!important;border-radius:5px;margin:16px 0;font-style:italic;font-size:14px}.entry-content blockquote p,.entry-content blockquote li{font-style:italic}.entry-content blockquote cite{margin:16px 0 0;display:block;font-size:13px;color:#aaa;text-align:right}.entry-content blockquote cite:before{content:"Source: "}.entry-content blockquote cite a{color:#aaa;border-color:#aaa}.entry-content blockquote p{margin:0}.entry-content blockquote p+p,.entry-content blockquote p+ul,.entry-content blockquote p+ol,.entry-content blockquote ul+p,.entry-content blockquote ol+p{margin:16px 0 0}.entry-content .http-bookmark{padding:0 2px;margin:0;vertical-align:baseline}.entry-footer{margin:16px 0 0}.entry-footer-time a{border:none}#google_afc_user{clear:both;margin-top:15px}#google_afc_user div#google_afc_user_container{margin:0}.comment-box{font-size:14px;margin:20px 0 0}.comment li{padding:16px 0 0;margin:0 0 48px;border-top:1px dotted #ddd;min-height:74px}.comment-user-name{position:relative;width:112px}.comment-user-name .hatena-id-icon{width:50px;height:50px;position:absolute;top:24px;left:0}.comment-user-name .comment-user-id{position:absolute;top:0;left:0}.comment-content,.comment-metadata{margin:0 0 0 144px}.comment-content{line-height:1.8;word-wrap:break-word}.comment-metadata{margin-top:10px}.read-more-comments{text-align:left}.read-more-comments a{display:inline-block;margin:0 0 0 144px;border-bottom:1px solid #000}.leave-comment-title{border-bottom:1px solid #000;text-align:left}.pager{margin:144px 0 32px;overflow:hidden}.pager a{line-height:1.5;word-wrap:break-word;display:inline-block;max-width:250px}.pager-next{float:right}.pager-prev{float:left}.hatena-module{margin:0 0 32px}.hatena-module-title{font-weight:700;text-decoration:none;margin:0 0 8px;font-size:14px;font-family:Helvetica Neue,Helvetica,Univers,Arial,Hiragino Kaku Gothic Pro,Meiryo,MS PGothic,sans-serif}.hatena-module-title a{color:#000!important;border:none}.hatena-module-title a:hover{text-decoration:underline}.hatena-module-profile{letter-spacing:0}.hatena-module-profile .hatena-module-body{position:relative;padding:0 0 0 80px;margin:0}.hatena-module-profile img{position:absolute;top:0;left:0;width:64px;height:64px}.hatena-module-profile .id{margin:0 0 5px;display:block}.hatena-urllist li{list-style:none;padding:0 0 0 15px;background:url(https://cdn.blog.st-hatena.com/css/theme/novel/li.png?version=1680f7e9f72477756816b715390e81) no-repeat 5px top;margin:0 0 10px;display:block}.hatena-urllist.urllist-with-thumbnails li{padding:0 0 10px;background:none;border-bottom:1px dotted #ddd}.hatena-module-search-box .search-module-input{background:#f5f5f5;font-size:18px;line-height:1;padding:8px 15px 6px;height:32px;width:145px;float:left;border:none}.hatena-module-search-box .search-module-input:focus{outline:none}.hatena-module-search-box .search-module-button{height:46px;width:46px;text-indent:-9999px;background:#f5f5f5 url(https://cdn.blog.st-hatena.com/css/theme/novel/search.png?version=1680f7e9f72477756816b715390e81) no-repeat center center;border:none}.hatena-module-search-box .search-module-button:hover{opacity:.8}.archive-module-calendar a{color:#eb1212!important}.page-about dl{overflow:hidden}.page-about dt{float:left;width:20%;height:25px;font-size:13px;margin:0 32px 32px 0;font-weight:700;letter-spacing:1px;clear:both;vertical-align:middle;font-family:Helvetica Neue,Helvetica,Univers,Arial,Hiragino Kaku Gothic Pro,Meiryo,MS PGothic,sans-serif}.page-about dd{width:auto;font-size:16px;height:auto;margin:0 0 32px;overflow:hidden}.page-about dd .about-subscription-count{margin:0 10px 0 0}.page-about dd .profile-icon{display:inline;margin:0;vertical-align:middle;border:none}.page-about dd a,.page-about dd a:hover{border:none}.page-archive .archive-entry{margin-bottom:50px}.page-archive .entry-title,.page-archive .categories{float:none}.page-archive .no-categories{display:none}.page-archive .page-archive-section{margin:30px auto 0;padding:15px 0 0;clear:both;overflow:hidden}.page-archive .page-archive-section h1{padding:7px 0 0;margin:0 0 20px;border-top:1px dotted #000}.page-archive .page-archive-section h1 a{text-decoration:none;border:none;font-size:16px;font-weight:800;font-family:Source Code Pro,sans-serif;letter-spacing:1px}.page-archive .page-archive-section li{margin:0 0 20px;line-height:1;overflow:hidden;list-style-type:disc}.page-archive .page-archive-section .categories{float:right;margin:7px 0 5px}.page-archive .page-archive-section .categories a{border:none;font-size:12px;letter-spacing:2px;vertical-align:middle;display:inline-block;border-bottom:1px solid #000}.page-archive .page-archive-section .categories a:hover{border-bottom:1px solid #000}.page-archive .page-archive-section .entry-title{line-height:1.8;margin:0;overflow:hidden}.page-archive .page-archive-section .bookmark-widget-counter,.page-archive .page-archive-section .star-container a{border:none}.page-archive .page-archive-section .social-buttons{clear:both;display:block;margin:10px 0 0}@media(-webkit-min-device-pixel-ratio:2){#container,#footer{background:url(https://cdn.blog.st-hatena.com/css/theme/novel/line@2x.gif?version=1680f7e9f72477756816b715390e81) repeat-y 736px 0;background-size:1px 2px}.date-,.date-first{background:url(https://cdn.blog.st-hatena.com/css/theme/novel/hr2@2x.png?version=1680f7e9f72477756816b715390e81) repeat-x top left;background-size:11px 7px}.date-middle,.date-last{background:url(https://cdn.blog.st-hatena.com/css/theme/novel/hr@2x.png?version=1680f7e9f72477756816b715390e81) no-repeat center top;background-size:89px 9px}.hatena-module li{background:url(https://cdn.blog.st-hatena.com/css/theme/novel/li@2x.png?version=1680f7e9f72477756816b715390e81) no-repeat 4px top;background-size:5px 11px}.hatena-module-search-box .search-module-button{background:#f5f5f5 url(https://cdn.blog.st-hatena.com/css/theme/novel/search@2x.png?version=1680f7e9f72477756816b715390e81) no-repeat center center;background-size:20px 20px}}
/* */
/* */
/* default */
/* */
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&family=Zen+Old+Mincho:wght@400;600;700&display=swap");
/* ============================================================
日々の読書記録 — 「読書室」テーマ
BookShelf アプリと同じカラートークン / 書体で統一する。
paper #F0EDE1 / ink #262420 / forest #33503F
indigo #2E3E5C / rust #7A4A34 / gold #A8863F
============================================================ */
:root {
--paper: #f0ede1;
--paper-raised: #faf9f1;
--ink: #262420;
--ink-soft: #5f5a50;
--ink-faint: #8d877b;
--forest: #33503f;
--indigo: #2e3e5c;
--rust: #7a4a34;
--gold: #a8863f;
--rule: rgba(38, 36, 32, 0.13);
--rule-strong: rgba(38, 36, 32, 0.24);
--shadow-card: 0 1px 2px rgba(38, 36, 32, 0.05), 0 14px 32px -18px rgba(38, 36, 32, 0.32);
--sans: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4",
"游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;
--serif: "Zen Old Mincho", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif;
}
/* ---------- 土台 ---------- */
body {
background-color: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 17px;
line-height: 2;
letter-spacing: 0.02em;
-webkit-font-smoothing: antialiased;
}
#container {
padding-bottom: 64px;
/* テーマ既定の縦罫線(line.gif)を消す */
background-image: none;
}
/* テーマ既定の欧文書体を、見出しは明朝・本文は丸ゴシックに置き換える */
h1, h2, h3, h4, h5, h6,
#title a,
.entry-title, .entry-title a,
.archive-entry-title, .archive-entry-title a,
.hatena-module-title, .hatena-module-title a {
font-family: var(--serif);
}
.entry-content, .entry-content p, .entry-content li,
#box2, .entry-footer, #footer, input, textarea, button {
font-family: var(--sans);
}
/* ---------- ブログタイトル ---------- */
#blog-title {
margin: 0 0 8px;
padding: 56px 0 36px;
border-bottom: 0;
}
#blog-title-inner {
background-color: transparent;
}
#title {
position: relative;
margin: 0;
padding-bottom: 24px;
text-align: center;
}
/* タイトル下の箔押し罫 */
#title::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 56px;
height: 2px;
margin-left: -28px;
background-color: var(--gold);
}
#title a {
font-family: var(--serif);
font-size: 34px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.22em;
text-indent: 0.22em;
line-height: 1.4;
border: 0;
}
#title a:hover {
color: var(--forest);
text-decoration: none;
}
#blog-description {
margin: 14px 0 0;
text-align: center;
font-size: 14px;
font-weight: normal;
line-height: 1.8;
color: var(--ink-soft);
letter-spacing: 0.06em;
}
/* ---------- 記事カード ---------- */
.entry,
.archive-entry {
position: relative;
margin: 0 0 40px;
padding: 40px 44px 32px;
background-color: var(--paper-raised);
border: 1px solid var(--rule);
border-radius: 4px;
box-shadow: var(--shadow-card);
overflow: hidden;
/* テーマ既定の波線罫(hr2.png)を消す */
background-image: none;
}
/* 左端に「背表紙」を一本立てる */
.entry::before,
.archive-entry::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background-color: var(--forest);
}
.entry-header {
margin: 0 0 28px;
}
.entry-header .date,
.archive-date {
margin: 0 0 12px;
font-size: 13px;
letter-spacing: 0.08em;
border: 0;
background: none;
}
.entry-header .date a,
.archive-date a {
font-size: 13px;
font-weight: normal;
color: var(--ink-faint);
text-decoration: none;
border: 0;
}
.entry-header .date a:hover,
.archive-date a:hover {
color: var(--forest);
}
.entry-title,
.archive-entry-title {
position: static;
float: none;
margin: 0;
padding: 0;
border: 0;
font-family: var(--serif);
font-size: 26px;
font-weight: 600;
line-height: 1.55;
letter-spacing: 0.02em;
color: var(--ink);
}
.entry-title::before,
.entry-title::after {
content: none;
display: none;
}
.entry-title a,
.entry-title > a,
.archive-entry-title a {
font-family: var(--serif);
font-size: inherit;
font-weight: inherit;
color: var(--ink);
text-decoration: none;
border: 0;
}
.entry-title a:hover,
.archive-entry-title a:hover {
color: var(--forest);
text-decoration: none;
}
.entry-categories,
.categories {
float: none;
display: block;
margin: 16px 0 0;
}
/* 同日2件目以降の記事(テーマが罫線画像と大きな余白を当てている)を揃える */
.date-middle .entry-header,
.date-last .entry-header {
margin: 0 0 28px;
}
.entry-categories a,
.entry-tags a,
.categories a {
display: inline-block;
margin: 0 6px 6px 0;
padding: 2px 12px;
font-size: 12px;
line-height: 1.9;
letter-spacing: 0.04em;
color: var(--indigo);
background-color: rgba(46, 62, 92, 0.08);
border: 0;
border-radius: 999px;
text-decoration: none;
}
.entry-categories a:hover,
.entry-tags a:hover,
.categories a:hover {
background-color: rgba(46, 62, 92, 0.16);
text-decoration: none;
}
/* ---------- 本文 ---------- */
.entry-content {
font-size: 17px;
line-height: 2.05;
letter-spacing: 0.03em;
color: var(--ink);
}
.entry-content p {
margin: 0 0 1.7em;
}
.entry-content a {
color: var(--indigo);
text-decoration: none;
border-bottom: 1px solid rgba(46, 62, 92, 0.35);
}
.entry-content a:hover {
color: var(--forest);
border-bottom-color: var(--forest);
text-decoration: none;
}
.entry-content h2 {
margin: 3em 0 1.2em;
padding: 0 0 0 18px;
font-family: var(--serif);
font-size: 22px;
font-weight: 600;
line-height: 1.6;
letter-spacing: 0.04em;
color: var(--forest);
border: 0;
border-left: 4px solid var(--gold);
background: none;
}
/* Markdown の「---」は、直前行が
などのときに
ではなく
中身が空の見出し(
)へ変換される。
テーマは border-top で横罫線に見せていたので、同じ意図で横罫線として描く。
id は空か "-1" 形式(重複時)になるため、その2つに限定して誤爆を防ぐ。 */
.entry-content h1[id=""]:has(> br:only-child),
.entry-content h1[id^="-"]:has(> br:only-child),
.entry-content h2[id=""]:has(> br:only-child),
.entry-content h2[id^="-"]:has(> br:only-child) {
height: 0;
margin: 2.8em auto;
padding: 0;
font-size: 0;
line-height: 0;
border: 0;
border-top: 1px solid var(--rule-strong);
background: none;
overflow: hidden;
}
.entry-content h3 {
margin: 2.4em 0 1em;
padding: 0 0 8px;
font-family: var(--serif);
font-size: 19px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--ink);
border: 0;
border-bottom: 1px solid var(--rule-strong);
}
.entry-content h4,
.entry-content h5 {
margin: 2em 0 0.8em;
font-family: var(--serif);
font-size: 17px;
font-weight: 600;
color: var(--rust);
border: 0;
}
.entry-content ul,
.entry-content ol {
margin: 0 0 1.7em;
padding-left: 1.6em;
}
.entry-content li {
margin-bottom: 0.4em;
}
.entry-content blockquote {
margin: 2em 0;
padding: 20px 24px;
font-size: 16px;
color: var(--ink-soft);
background-color: rgba(51, 80, 63, 0.05);
border: 0;
border-left: 3px solid rgba(51, 80, 63, 0.4);
border-radius: 0 4px 4px 0;
}
.entry-content blockquote p:last-child {
margin-bottom: 0;
}
.entry-content hr {
margin: 3em auto;
width: 100%;
height: 1px;
border: 0;
background-color: var(--rule-strong);
}
.entry-content img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
.entry-content pre,
.entry-content code {
font-family: "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 14px;
}
.entry-content pre {
padding: 16px 20px;
background-color: #232420;
color: #e9e4d4;
border: 0;
border-radius: 6px;
line-height: 1.7;
overflow-x: auto;
}
.entry-content table {
border-collapse: collapse;
font-size: 15px;
}
.entry-content th,
.entry-content td {
padding: 8px 14px;
border: 1px solid var(--rule-strong);
}
.entry-content th {
background-color: rgba(51, 80, 63, 0.08);
}
/* 「続きを読む」 */
.entry-see-more {
display: inline-block;
margin-top: 8px;
padding: 8px 24px;
font-size: 14px;
letter-spacing: 0.06em;
color: var(--forest);
background: none;
border: 1px solid rgba(51, 80, 63, 0.45);
border-radius: 999px;
text-decoration: none;
}
.entry-see-more:hover {
color: var(--paper-raised);
background-color: var(--forest);
border-color: var(--forest);
text-decoration: none;
}
/* ---------- Amazon 書籍カード ---------- */
.hatena-asin-detail {
margin: 2.4em 0;
padding: 24px;
background-color: var(--paper);
border: 1px solid var(--rule);
border-radius: 6px;
box-shadow: none;
}
.hatena-asin-detail-image {
border-radius: 3px;
box-shadow: 0 2px 6px rgba(38, 36, 32, 0.18), 0 12px 24px -14px rgba(38, 36, 32, 0.4);
}
.entry-content .hatena-asin-detail .hatena-asin-detail-title,
.entry-content .hatena-asin-detail .hatena-asin-detail-title a {
margin: 0 0 10px;
font-family: var(--serif);
font-size: 17px;
font-weight: 600;
line-height: 1.6;
}
.entry-content .hatena-asin-detail .hatena-asin-detail-title a {
color: var(--ink);
border-bottom: 0;
}
.entry-content .hatena-asin-detail .hatena-asin-detail-title a:hover {
color: var(--forest);
}
.hatena-asin-detail-meta,
.hatena-asin-detail li {
font-size: 13px;
line-height: 1.9;
color: var(--ink-soft);
}
.hatena-asin-detail-meta a {
color: var(--ink-soft);
border-bottom: 0;
}
.entry-content .hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy {
display: inline-block;
align-self: flex-start;
width: auto;
max-width: 260px;
text-align: center;
margin-top: 12px;
padding: 8px 32px;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.06em;
color: #ffffff;
background-color: var(--gold);
border: 0;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 2px 6px rgba(168, 134, 63, 0.35);
}
.entry-content .hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy:hover {
background-color: #8f7134;
color: #ffffff;
text-decoration: none;
}
/* ---------- BookShelf アプリ導線 ---------- */
/* 記事末尾の紹介段落(Google Play リンクを含む段落)をカード化する */
.entry-content p:has(a[href*="play.google.com"]) {
margin: 3em 0 2em;
padding: 32px 32px 28px;
text-align: center;
font-size: 16px;
line-height: 1.95;
color: var(--ink);
background-color: #fffdf4;
border: 1px solid rgba(51, 80, 63, 0.3);
border-radius: 12px;
box-shadow: 0 0 0 4px rgba(51, 80, 63, 0.06),
0 18px 34px -22px rgba(38, 36, 32, 0.55);
}
/* 段落先頭の余分な改行を畳む */
.entry-content p:has(a[href*="play.google.com"]) > br:nth-child(1),
.entry-content p:has(a[href*="play.google.com"]) > br:nth-child(2) {
display: none;
}
/* カード見出しの帯 */
.entry-content p:has(a[href*="play.google.com"])::before {
content: "読んだ本を、そのまま本棚に。";
display: block;
margin: -8px 0 18px;
font-family: var(--serif);
font-size: 18px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--forest);
}
/* アプリロゴ */
.entry-content img[alt="Book shelf"] {
display: block;
width: 240px;
max-width: 70%;
height: auto;
margin: 22px auto 4px;
}
/* Google Play バッジ = 主 CTA */
.entry-content a[href*="play.google.com"] {
display: block;
width: 220px;
max-width: 100%;
margin: 10px auto 16px;
padding: 0;
border: 0;
border-radius: 8px;
line-height: 0;
transition: transform 0.18s ease, box-shadow 0.18s ease;
box-shadow: 0 4px 14px -4px rgba(38, 36, 32, 0.45);
}
.entry-content a[href*="play.google.com"]:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px -6px rgba(38, 36, 32, 0.5);
border: 0;
}
.entry-content a[href*="play.google.com"] img {
display: block;
width: 220px;
max-width: 100%;
height: auto;
margin: 0;
border-radius: 8px;
}
/* ランキングバナーの誘導文 */
.entry-content i.faa-bounce {
display: inline-block;
margin: 6px 0;
font-style: normal;
font-weight: 600;
font-size: 15px;
letter-spacing: 0.06em;
color: var(--rust);
}
.embed-group {
margin: 1em 0 2em;
}
.embed-group-link {
border-bottom: 0;
}
/* ---------- 記事フッタ ---------- */
.entry-footer {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--rule);
font-size: 14px;
color: var(--ink-soft);
}
.entry-footer .hatena-star-container,
.entry-footer .social-buttons {
margin-top: 12px;
}
.comment-box li {
border-color: var(--rule);
}
.leave-comment-title {
display: inline-block;
margin-top: 8px;
padding: 6px 20px;
font-size: 13px;
letter-spacing: 0.04em;
color: var(--ink-soft);
background-color: var(--paper);
border: 1px solid var(--rule-strong);
border-radius: 999px;
text-decoration: none;
}
.leave-comment-title:hover {
color: var(--forest);
border-color: var(--forest);
text-decoration: none;
}
/* ---------- ページャ ---------- */
.pager {
margin: 8px 0 0;
font-size: 15px;
}
.pager a {
display: inline-block;
padding: 10px 24px;
color: var(--forest);
background-color: var(--paper-raised);
border: 1px solid var(--rule-strong);
border-radius: 999px;
text-decoration: none;
letter-spacing: 0.04em;
}
.pager a:hover {
color: var(--paper-raised);
background-color: var(--forest);
border-color: var(--forest);
text-decoration: none;
}
/* ---------- サイドバー ---------- */
#box2 {
font-size: 14px;
}
#box2 .hatena-module {
margin-bottom: 28px;
padding: 22px 22px 18px;
background-color: var(--paper-raised);
border: 1px solid var(--rule);
border-radius: 4px;
}
#box2 .hatena-module-title {
margin: 0 0 14px;
padding: 0 0 10px;
font-family: var(--serif);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--ink);
background: none;
border: 0;
border-bottom: 1px solid var(--rule-strong);
}
#box2 .hatena-module-title a {
color: var(--ink);
}
#box2 .hatena-module-body {
line-height: 1.8;
}
#box2 .hatena-urllist li {
padding: 8px 0;
border: 0;
border-bottom: 1px dotted var(--rule);
line-height: 1.7;
}
#box2 .hatena-urllist li:last-child {
border-bottom: 0;
}
#box2 a {
color: var(--ink-soft);
text-decoration: none;
}
#box2 a:hover {
color: var(--forest);
text-decoration: none;
}
#box2 .hatena-module-profile .profile-icon {
border-radius: 50%;
}
#box2 .hatena-module-search-box .search-form {
display: flex;
align-items: center;
border: 1px solid var(--rule-strong);
border-radius: 999px;
background-color: var(--paper);
overflow: hidden;
}
#box2 .hatena-module-search-box .search-module-input {
flex: 1;
width: auto;
height: auto;
float: none;
background: transparent;
border: 0;
padding: 9px 14px;
font-family: var(--sans);
font-size: 14px;
color: var(--ink);
}
/* テーマは虫眼鏡画像 + text-indent で送信ボタンを隠しているが、
画像に依存せずテキストボタンとして見せる */
#box2 .hatena-module-search-box .search-module-button {
flex: none;
width: auto;
height: auto;
padding: 0 16px 0 6px;
text-indent: 0;
font-family: var(--sans);
font-size: 13px;
letter-spacing: 0.04em;
color: var(--forest);
background: none;
border: 0;
cursor: pointer;
}
/* ---------- フッタ ---------- */
#footer {
background-image: none;
margin-top: 48px;
padding: 28px 0;
border-top: 1px solid var(--rule);
font-size: 13px;
letter-spacing: 0.04em;
color: var(--ink-faint);
text-align: center;
background: none;
}
#footer-inner {
width: auto;
float: none;
padding: 0 0 16px;
}
#footer a {
color: var(--ink-soft);
}
/* ---------- スマートフォン(レスポンシブ) ---------- */
/* novel テーマは幅指定のメディアクエリを持たない固定幅レイアウト
(#container 992px / #wrapper 736px / #box2 224px float +
タイトル横へ引き上げる負マージン)のため、
ここで幅・フロート・負マージンをすべて解除して1カラムに組み替える。 */
@media (max-width: 767px) {
html {
-webkit-text-size-adjust: 100%;
}
body {
font-size: 16px;
}
#container,
#footer {
width: auto;
padding: 0 16px;
background-image: none;
box-sizing: border-box;
}
#container-inner {
width: auto;
}
#blog-title {
width: auto;
height: auto;
margin: 0;
padding: 32px 0 24px;
}
#blog-title-inner {
width: auto !important;
margin: 0;
padding: 0;
}
#title {
padding-bottom: 18px;
}
#title a {
font-size: 24px;
letter-spacing: 0.14em;
}
#wrapper {
width: auto;
float: none;
}
#main,
#blog-title + #content #main {
margin: 0;
}
/* サイドバーをタイトル横へ引き上げている負マージンを打ち消して本文の下へ */
#box2,
.enable-top-editarea #box2,
.page-category-category_name #box2,
.page-archive-category #box2,
.page-category-category_name.enable-top-editarea #box2,
.page-archive-category.enable-top-editarea #box2 {
float: none;
width: auto;
margin: 32px 0 0;
}
#top-editarea,
#top-box,
#bottom-editarea {
width: auto;
margin: 24px 0 0;
}
#footer-inner {
width: auto;
float: none;
padding: 0 0 16px;
}
.entry,
.archive-entry {
padding: 24px 20px 20px;
border-radius: 3px;
}
.entry-title,
.archive-entry-title {
font-size: 21px;
}
.entry-content {
font-size: 16px;
line-height: 1.95;
}
.entry-content h2 {
margin-top: 2.4em;
font-size: 19px;
}
.entry-content h3 {
font-size: 17px;
}
.entry-content blockquote {
padding: 16px 18px;
}
/* 狭い画面では中央揃えだと行末が乱れるので本文だけ左揃えに戻す
(ロゴとバッジは block + auto マージンで中央のまま) */
.entry-content p:has(a[href*="play.google.com"]) {
padding: 24px 18px 20px;
text-align: left;
}
.entry-content p:has(a[href*="play.google.com"])::before {
font-size: 16px;
text-align: center;
}
/* 記事の編集メニュー(著者のみ表示)がタイトルに重ならないように */
.entry-header-menu {
position: static;
margin: 0 0 8px;
}
.pager a {
max-width: 46%;
padding: 10px 16px;
font-size: 14px;
}
/* コメント欄の絶対配置レイアウトを縦積みに */
.comment-user-name {
width: auto;
}
.comment-user-name .hatena-id-icon,
.comment-user-name .comment-user-id {
position: static;
}
.comment-user-name .hatena-id-icon {
width: 36px;
height: 36px;
margin-right: 8px;
vertical-align: middle;
}
.comment-content,
.comment-metadata,
.read-more-comments a {
margin-left: 0;
}
}