@charset "utf-8";
/* 石井光の著書一覧（books.html）。色・字は創業者ページ・トップの著書の段に合わせる */

.bk-in { width: calc(1024 * var(--u)); margin: 0 auto; padding: 0 calc(60 * var(--u)); }

/* 前書きと目次 */
.bk-intro { padding-block: calc(40 * var(--u)) calc(10 * var(--u)); }
.bk-lead { font-size: calc(16.5 * var(--u)); line-height: 2; color: var(--ink); text-align: center; letter-spacing: .03em; }
.bk-lead strong { color: var(--navy); font-weight: 700; }
.bk-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--u)) calc(12 * var(--u)); margin-top: calc(28 * var(--u)); }
.bk-toc a { display: block; padding: calc(7 * var(--u)) calc(16 * var(--u)); border: 1px solid #C9D6E6; border-radius: 999px; background: #fff; font-family: var(--serif); font-weight: 600; font-size: calc(14 * var(--u)); color: var(--navy); text-decoration: none; }
.bk-toc a:hover { border-color: var(--navy); }

/* 本ごとの段 */
.bk-list-sec { padding-block: calc(30 * var(--u)) calc(60 * var(--u)); background: linear-gradient(180deg, #fff, #F3F7FC 30%, #F3F7FC 70%, #fff); }
.bk-book { display: grid; grid-template-columns: calc(200 * var(--u)) 1fr; gap: calc(44 * var(--u)); align-items: start; padding: calc(36 * var(--u)) calc(40 * var(--u)); background: #fff; border-radius: calc(14 * var(--u)); box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(30,53,96,.07); scroll-margin-top: 90px; }
.bk-book + .bk-book { margin-top: calc(26 * var(--u)); }
.bk-cover img { display: block; width: 100%; height: auto; filter: drop-shadow(0 calc(8 * var(--u)) calc(12 * var(--u)) rgba(30,53,96,.22)); }
.bk-cover-text { display: flex; flex-direction: column; justify-content: center; gap: calc(12 * var(--u)); aspect-ratio: 176 / 262; padding: calc(18 * var(--u)) calc(16 * var(--u)); border-radius: calc(3 * var(--u)); background: linear-gradient(160deg, #24447A, #1C3566); box-shadow: 0 calc(8 * var(--u)) calc(14 * var(--u)) rgba(30,53,96,.25); color: #fff; font-family: var(--serif); text-align: center; }
.bk-cover-title { font-weight: 700; font-size: calc(17 * var(--u)); line-height: 1.5; }
.bk-cover-sub { font-size: calc(12 * var(--u)); line-height: 1.5; color: #E6D3A8; }
.bk-cover-author { margin-top: calc(10 * var(--u)); padding-top: calc(10 * var(--u)); border-top: 1px solid rgba(214,187,134,.6); font-size: calc(13 * var(--u)); letter-spacing: .2em; }
.bk-sales { display: inline-block; margin-bottom: calc(10 * var(--u)); padding: calc(3 * var(--u)) calc(16 * var(--u)); border-radius: 999px; background: linear-gradient(180deg, #2C4C86, #1C3566); color: #fff; font-family: var(--serif); font-weight: 600; font-size: calc(15 * var(--u)); }
.bk-title { font-family: var(--serif); font-weight: 700; font-size: calc(25 * var(--u)); line-height: 1.5; color: var(--navy); letter-spacing: .03em; text-wrap: balance; }
.bk-sub { margin-top: calc(4 * var(--u)); font-family: var(--serif); font-size: calc(15 * var(--u)); color: #5A6B85; }
.bk-desc { margin-top: calc(16 * var(--u)); font-size: calc(15.5 * var(--u)); line-height: 1.95; color: var(--ink); }
.bk-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(24 * var(--u)); margin-top: calc(18 * var(--u)); border-top: 1px solid #DDE5EF; }
.bk-meta div { display: flex; gap: calc(12 * var(--u)); padding: calc(8 * var(--u)) 0; border-bottom: 1px solid #DDE5EF; font-size: calc(14 * var(--u)); }
.bk-meta dt { flex: none; width: calc(70 * var(--u)); color: #6A7890; }
.bk-meta dd { color: var(--ink); min-width: 0; }
.bk-links { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)) calc(18 * var(--u)); margin-top: calc(16 * var(--u)); font-size: calc(14 * var(--u)); }
.bk-links a { color: var(--navy); text-underline-offset: 3px; }
.bk-link-rel::before { content: "→ "; color: #A5844C; }
.bk-note { margin-top: calc(30 * var(--u)); font-size: max(11.5px, calc(12.5 * var(--u))); line-height: 1.8; color: #6F7A8C; }
.bk-back { margin-top: calc(24 * var(--u)); text-align: center; }
.bk-back a { display: inline-block; padding: calc(12 * var(--u)) calc(34 * var(--u)); border-radius: 999px; background: var(--navy); color: #fff; font-family: var(--serif); font-weight: 600; font-size: calc(15.5 * var(--u)); text-decoration: none; }

@media (max-width: 1023px) {
	.bk-in { width: auto; padding: 0 16px; }
	.bk-pc { display: none; }
	.bk-intro { padding-block: 26px 4px; }
	.bk-lead { font-size: 14.5px; line-height: 1.9; text-align: left; }
	.bk-toc { justify-content: flex-start; gap: 8px; margin-top: 18px; }
	.bk-toc a { padding: 5px 12px; font-size: 13px; }
	.bk-list-sec { padding-block: 20px 40px; }
	.bk-book { grid-template-columns: 110px 1fr; gap: 16px; padding: 18px 16px; border-radius: 10px; }
	.bk-book + .bk-book { margin-top: 16px; }
	.bk-cover-text { gap: 6px; padding: 10px 8px; }
	.bk-cover-title { font-size: 12.5px; }
	.bk-cover-sub { font-size: 9.5px; }
	.bk-cover-author { margin-top: 4px; padding-top: 6px; font-size: 10px; }
	.bk-sales { margin-bottom: 6px; padding: 2px 12px; font-size: 13px; }
	.bk-title { font-size: 18px; }
	.bk-sub { font-size: 13px; }
	.bk-body { display: contents; }
	.bk-cover { grid-row: 1 / span 3; grid-column: 1; }
	.bk-sales, .bk-title, .bk-sub { grid-column: 2; justify-self: start; margin: 0; }
	.bk-book { grid-auto-rows: auto; row-gap: 6px; align-items: start; }
	.bk-desc, .bk-meta, .bk-links { grid-column: 1 / -1; margin-top: 10px; }
	.bk-desc { margin-top: 0; font-size: 14.5px; line-height: 1.85; }
	.bk-meta { grid-template-columns: 1fr; margin-top: 0; }
	.bk-meta div { font-size: 13.5px; padding: 7px 0; }
	.bk-meta dt { width: 64px; }
	.bk-links { margin-top: 0; font-size: 13.5px; }
	.bk-note { font-size: 11.5px; }
	.bk-back a { padding: 12px 26px; font-size: 14.5px; }
}

/* 一覧から詳細へのリンク */
.bk-cover { display: block; }
.bk-title a { color: inherit; text-decoration: none; }
.bk-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bk-more { margin-top: calc(18 * var(--u)); }
.bk-more a { display: inline-block; padding: calc(9 * var(--u)) calc(26 * var(--u)); border: 1px solid var(--navy); border-radius: 999px; font-family: var(--serif); font-weight: 600; font-size: calc(14.5 * var(--u)); color: var(--navy); text-decoration: none; }
.bk-more a::after { content: " ›"; }
.bk-more a:hover { background: var(--navy); color: #fff; }
@media (max-width: 1023px) {
	.bk-more { grid-column: 1 / -1; margin-top: 4px; text-align: center; }
	.bk-more a { padding: 9px 26px; font-size: 14px; }
}

/* ========== 詳細ページ（/books/<slug>/） ========== */
.bkd-top { padding-block: calc(40 * var(--u)) calc(20 * var(--u)); }
.bkd-top-in { display: grid; grid-template-columns: calc(250 * var(--u)) 1fr; gap: calc(56 * var(--u)); align-items: start; }
.bkd-cover img { display: block; width: 100%; height: auto; filter: drop-shadow(0 calc(10 * var(--u)) calc(16 * var(--u)) rgba(30,53,96,.25)); }
.bkd-cover .bk-cover-title { font-size: calc(21 * var(--u)); }
.bkd-cover .bk-cover-sub { font-size: calc(14 * var(--u)); }
.bkd-title { font-family: var(--serif); font-weight: 700; font-size: calc(32 * var(--u)); line-height: 1.45; color: var(--navy); letter-spacing: .03em; text-wrap: balance; }
.bkd-sub { display: block; margin-top: calc(6 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; color: #5A6B85; }
.bkd-en { margin-top: calc(6 * var(--u)); font-family: var(--serif); font-size: calc(16 * var(--u)); color: #5A6B85; }
.bkd-author { margin-top: calc(14 * var(--u)); font-size: calc(15 * var(--u)); color: var(--ink); }
.bkd-author a { color: var(--navy); font-weight: 700; text-underline-offset: 3px; }
.bkd-info .bk-meta { margin-top: calc(18 * var(--u)); }
.bkd-buy { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); margin-top: calc(20 * var(--u)); }
.bkd-buy a { display: inline-block; padding: calc(9 * var(--u)) calc(22 * var(--u)); border-radius: 999px; background: var(--navy); color: #fff; font-size: calc(14 * var(--u)); font-weight: 700; text-decoration: none; }
.bkd-buy a::after { content: " ↗"; font-weight: 400; }
.bkd-buy a:hover { opacity: .85; }

.bkd-sec { padding-block: calc(30 * var(--u)); }
.bkd-sec .rn-h2 { margin-bottom: calc(18 * var(--u)); }
.bkd-text { font-size: calc(16 * var(--u)); line-height: 2; color: var(--ink); }
.bkd-text + .bkd-text { margin-top: calc(12 * var(--u)); }
.bkd-small { font-size: calc(14 * var(--u)); color: #5A6B85; }
.bkd-h3 { margin-top: calc(26 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(19 * var(--u)); color: var(--navy); }
.bkd-points { margin-top: calc(12 * var(--u)); display: grid; gap: calc(8 * var(--u)); }
.bkd-points li { position: relative; padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u)) calc(42 * var(--u)); background: #F3F7FC; border-radius: calc(8 * var(--u)); font-size: calc(15.5 * var(--u)); line-height: 1.8; color: var(--ink); }
.bkd-points li::before { content: ""; position: absolute; left: calc(18 * var(--u)); top: calc(22 * var(--u)); width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: linear-gradient(180deg, #D9BC7E, #A5844C); }
.bkd-sec-toc { background: linear-gradient(180deg, #F3F7FC, #fff); }
.bkd-toc { counter-reset: none; padding: calc(10 * var(--u)) calc(30 * var(--u)); background: #fff; border: 1px solid #DDE5EF; border-radius: calc(12 * var(--u)); }
.bkd-toc li { padding: calc(12 * var(--u)) 0; border-bottom: 1px dashed #D3DDEA; font-family: var(--serif); font-weight: 600; font-size: calc(16 * var(--u)); line-height: 1.6; color: var(--navy); list-style: none; }
.bkd-toc li:last-child { border-bottom: 0; }
.bkd-author-box { display: grid; grid-template-columns: calc(150 * var(--u)) 1fr; gap: calc(30 * var(--u)); align-items: start; width: calc(904 * var(--u)); padding: calc(26 * var(--u)) calc(30 * var(--u)) !important; background: #fff; border: 1px solid #DDE5EF; border-radius: calc(14 * var(--u)); }
.bkd-author-photo { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: 50%; background: linear-gradient(180deg, #E4EEF8, #C9DCEE); }
.bkd-author-h { font-family: var(--serif); font-weight: 700; font-size: calc(19 * var(--u)); color: var(--navy); margin-bottom: calc(8 * var(--u)); }
.bkd-author-link { margin-top: calc(12 * var(--u)); font-size: calc(14.5 * var(--u)); }
.bkd-author-link a { color: var(--navy); text-underline-offset: 3px; }
.bkd-rel { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); }
.bkd-rel a { display: block; padding: calc(12 * var(--u)) calc(24 * var(--u)); border: 1px solid #C9D6E6; border-radius: calc(8 * var(--u)); background: #fff; font-family: var(--serif); font-weight: 600; font-size: calc(15 * var(--u)); color: var(--navy); text-decoration: none; }
.bkd-rel a::before { content: "→ "; color: #A5844C; }
.bkd-rel a:hover { border-color: var(--navy); }
.bkd-sec-others { background: linear-gradient(180deg, #fff, #F3F7FC); padding-bottom: calc(60 * var(--u)); }
.bkd-others { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(14 * var(--u)); }
.bkd-others a { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); text-align: center; text-decoration: none; color: var(--navy); }
.bkd-others-cover { width: 100%; }
.bkd-others-cover img { display: block; width: 100%; aspect-ratio: 176 / 262; object-fit: contain; filter: drop-shadow(0 calc(5 * var(--u)) calc(8 * var(--u)) rgba(30,53,96,.2)); }
.bkd-others-cover .bk-cover-text { padding: calc(8 * var(--u)) calc(6 * var(--u)); gap: calc(4 * var(--u)); }
.bkd-others-cover .bk-cover-title { font-size: calc(10.5 * var(--u)); }
.bkd-others-cover .bk-cover-sub, .bkd-others-cover .bk-cover-author { display: none; }
.bkd-others-title { font-family: var(--serif); font-weight: 600; font-size: calc(12.5 * var(--u)); line-height: 1.5; }
.bkd-others-sales { font-size: calc(11.5 * var(--u)); color: #A5844C; font-weight: 700; }
.bkd-others a:hover .bkd-others-title { text-decoration: underline; }
.bkd .bk-note a { color: inherit; }

@media (max-width: 1023px) {
	.bkd-top { padding-block: 22px 8px; }
	.bkd-top-in { grid-template-columns: 1fr; gap: 20px; }
	.bkd-cover { width: 56%; max-width: 220px; margin: 0 auto; }
	.bkd-cover .bk-cover-title { font-size: 16px; }
	.bkd-cover .bk-cover-sub { font-size: 11px; }
	.bkd-info { text-align: left; }
	.bkd-title { font-size: 22px; }
	.bkd-sub { font-size: 14px; }
	.bkd-author { font-size: 14px; }
	.bkd-info .bk-meta { grid-template-columns: 1fr; }
	.bkd-buy a { padding: 9px 18px; font-size: 13.5px; }
	.bkd-sec { padding-block: 20px; }
	.bkd-text { font-size: 15px; line-height: 1.9; }
	.bkd-small { font-size: 13px; }
	.bkd-h3 { font-size: 17px; }
	.bkd-points li { padding: 10px 14px 10px 34px; font-size: 14.5px; }
	.bkd-points li::before { left: 14px; top: 19px; width: 9px; height: 9px; }
	.bkd-toc { padding: 4px 16px; }
	.bkd-toc li { padding: 10px 0; font-size: 14.5px; }
	.bkd-author-box { grid-template-columns: 1fr; gap: 14px; padding: 18px 16px !important; margin: 0 16px; width: auto; }
	.bkd-author-photo { width: 110px; margin: 0 auto; }
	.bkd-author-h { font-size: 17px; text-align: center; }
	.bkd-rel a { padding: 10px 16px; font-size: 14px; }
	.bkd-others { grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
	.bkd-others-cover .bk-cover-title { font-size: 10px; }
	.bkd-others-title { font-size: 12px; }
	.bkd-others-sales { font-size: 11px; }
}
