/*
 * 書籍『使えるボトムス』の書体に合わせた文字組み
 * 書籍はヒラギノ角ゴ（W1〜W3）。Mac / iPhone はヒラギノ、
 * それ以外は近い字形の Noto Sans JP（Google Fonts）で表示する。
 */

:root {
	--font-book: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

body,
h1, h2, h3, h4,
.btn {
	font-family: var(--font-book);
}

body {
	font-weight: 300;
	letter-spacing: 0.04em;
	-webkit-font-smoothing: antialiased;
}

/* 見出し：書名のような細く大きい字 */
h2 {
	font-weight: 300;
	letter-spacing: 0.12em;
}

h3,
h3.normal {
	font-weight: 300;
	letter-spacing: 0.12em;
}

h4 {
	font-weight: 400;
	letter-spacing: 0.08em;
}

p.lead {
	font-weight: 300;
	letter-spacing: 0.06em;
}

small {
	font-weight: 300;
}

ul.item-list .num {
	font-weight: 400;
}

.btn {
	font-weight: 400;
	letter-spacing: 0.06em;
}

/* ---------- 読みやすさ・使いやすさ ---------- */

/* 本文は細すぎない太さに（細い字は見出しなど大きな文字だけ） */
body,
p.lead,
small {
	font-weight: 400;
}

/* ピンクの見出しは元の色のまま、ウェイトを一段上げて読みやすく */
h3 {
	color: #f475ff;
	font-weight: 500;
}

h3.normal {
	color: #000;
}

/* 小さな文字（クレジット・書誌）は14px以上に */
small {
	font-size: 0.875rem;
	line-height: 1.8;
}

/* 本文中のリンクは、背景色に関係なく分かるよう下線つきの文字色に */
.sec p a:not(.btn),
.book-info a:not(.btn) {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sec p a:not(.btn):hover,
.book-info a:not(.btn):hover {
	color: #f475ff;
}

/* キーボード操作時のフォーカス表示 */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
	outline: 2px solid #000;
	outline-offset: 3px;
	box-shadow: none;
}

/* アイテム一覧 → 対談コラムの該当アイテムへ */
ul.item-list a {
	display: block;
	padding: 4px 0;
	color: inherit;
	text-decoration: none;
}

ul.item-list a:hover .name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ページの先頭へ戻るボタン */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 20px;
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
}

.to-top.show {
	opacity: 1;
	visibility: visible;
}

.to-top:hover {
	color: #fff;
	background: #000;
	text-decoration: none;
}

@media screen and (max-width: 767px) {
	/* スマホのヘッダーを小さくして、メインビジュアルを早く見せる */
	h1 img {
		width: 55%;
	}

	h2 {
		font-size: 1.15rem;
		letter-spacing: 0.08em;
	}

	ul.item-list a {
		padding: 8px 0;
	}
}

ul.item-list .num {
	color: #f475ff;
	font-weight: 500;
}

/* 見出しを語句の切れ目で改行する */
.phrase {
	display: inline-block;
}

/* ---------- ボタン：黒ベタをやめ、細い線の控えめな形に ---------- */

.btn-dark,
.btn-outline-dark {
	color: #333;
	background: #fff;
	border: 1px solid #999;
}

.btn-dark:hover,
.btn-outline-dark:hover,
.btn-dark:focus,
.btn-outline-dark:focus {
	color: #000;
	background: #f3f3f3;
	border-color: #333;
}

.btn-dark:not(:disabled):not(.disabled):active,
.btn-outline-dark:not(:disabled):not(.disabled):active {
	color: #000;
	background: #e9e9e9;
	border-color: #333;
}

/* ページ先頭へ戻るボタンも白地に */
.to-top {
	background: rgba(255, 255, 255, 0.9);
	color: #333;
	border: 1px solid #999;
}

.to-top:hover {
	background: #f3f3f3;
	color: #000;
}

/* ---------- 本文の行間 ---------- */

/* 標準の 1.5 は日本語には詰まって見えるので広げる（リード文は別途 2.5rem / 2rem） */
p {
	line-height: 1.9;
}

/* ヘッダーの見出し（発売日）は一段太く */
h2 {
	font-weight: 400;
}

/* 旅する洋裁教室の枠は、プロフィールから少し離す */
.class-row {
	margin-top: 64px;
}

@media screen and (max-width: 767px) {
	.class-row {
		margin-top: 40px;
	}
}

/* 旅する洋裁教室：ロゴを小さく、枠の内側を広く */
.class-row .class-box {
	padding: 48px 40px;
}

.class-row img.class-logo {
	max-width: 220px;
}

@media screen and (max-width: 767px) {
	.class-row .class-box {
		padding: 32px 24px;
	}

	.class-row img.class-logo {
		max-width: 180px;
	}
}

.class-row p.block-txt {
	width: auto;
	text-align: center;
}

/* ---------- 外部リンクのマーク ---------- */

/* 別タブで開くリンク（target="_blank"）の後ろに、外部リンクのアイコンを付ける */
a[target="_blank"]::after {
	content: "";
	content: "" / "（外部サイト）";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-left: 0.3em;
	vertical-align: -0.05em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5h4.5V7'/%3E%3Cpath d='M13.5 2.5 7 9'/%3E%3Cpath d='M12 9.5v3.5a.5.5 0 0 1-.5.5h-8.5a.5.5 0 0 1-.5-.5V4.5a.5.5 0 0 1 .5-.5H6.5'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2.5h4.5V7'/%3E%3Cpath d='M13.5 2.5 7 9'/%3E%3Cpath d='M12 9.5v3.5a.5.5 0 0 1-.5.5h-8.5a.5.5 0 0 1-.5-.5V4.5a.5.5 0 0 1 .5-.5H6.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 改行を入れない文章は、1行が長くなりすぎないよう幅を絞って中央に置く */
.sec p.lead,
.sec p.block-txt {
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
}

/* 改行を手で入れない代わりに、語句の切れ目で折り返し、行の長さをそろえる
   （対応していないブラウザでは通常の折り返しになるだけ） */
p {
	word-break: auto-phrase;
	text-wrap: pretty;
	/* 語句が長くて1行に収まらないときは、途中で折り返してはみ出しを防ぐ */
	overflow-wrap: anywhere;
}

@media screen and (min-width: 768px) {
	.sec p.lead,
	.class-row p.block-txt {
		text-wrap: balance;
	}
}

/* 既刊のアーカイブページへのリンクは、購入ボタンと少し離す */
.book-info p.archive-link {
	margin-top: 24px;
}

/* 縦長の1ページだけの誌面サンプル（使えるトップス）は、大きくなりすぎないよう幅を抑える */
.samples img.page-single {
	max-width: min(560px, 100%);
}

/* ---------- アイテム一覧：書籍のイラスト付き ---------- */

ul.item-list.item-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 28px 12px;
	max-width: 960px;
	text-align: center;
}

ul.item-grid li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: 0.8125rem;
	line-height: 1.5;
}

ul.item-grid .thumb {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 110px;
	margin-bottom: 6px;
}

ul.item-grid .thumb img {
	max-height: 110px;
	width: auto;
}

ul.item-grid .num {
	width: auto;
}

@media screen and (max-width: 767px) {
	ul.item-list.item-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px 8px;
	}

	ul.item-grid .thumb {
		height: 84px;
	}

	ul.item-grid .thumb img {
		max-height: 84px;
	}
}

/* ---------- 購入への導線 ---------- */

.cta {
	margin-top: 48px;
	text-align: center;
}

.cta-date {
	margin-bottom: 16px;
	font-weight: 500;
	letter-spacing: 0.08em;
}

.cta-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.cta-more {
	margin: 16px 0 0;
	font-size: 0.875rem;
}

.cta-more a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 「対になる一冊」の一言 */
.pair-note {
	display: inline-block;
	margin-bottom: 12px;
	padding: 2px 12px;
	background: #fff;
	border: 1px solid #f475ff;
	font-size: 0.8125rem;
}

@media screen and (max-width: 767px) {
	.cta {
		margin-top: 40px;
	}

	.cta-buttons {
		flex-direction: column;
	}

	.cta-buttons .btn-buy {
		width: 100%;
	}
}

/* ---------- イベントのお知らせ ---------- */

.sec-event {
	padding-bottom: 0;
}

.event-box {
	max-width: 720px;
	margin: 0 auto;
	padding: 40px;
	border: 1px solid #f475ff;
	background: #fff;
}

.event-label {
	margin: 0 0 4px;
	color: #f475ff;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-align: center;
}

.event-box h3 {
	margin-bottom: 28px;
	font-size: 1.375rem;
	line-height: 1.7;
	text-align: center;
}

.event-info {
	display: grid;
	grid-template-columns: 4em 1fr;
	gap: 10px 16px;
	margin: 0 0 24px;
}

.event-info dt {
	font-weight: 500;
}

.event-info dd {
	margin: 0;
}

.event-info a {
	color: inherit;
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.event-points {
	margin: 0 0 16px;
	padding: 16px 16px 16px 2.2em;
	background: #ffedfd;
}

.event-points li + li {
	margin-top: 4px;
}

.event-note {
	margin: 0;
	font-size: 0.9375rem;
}

@media screen and (max-width: 767px) {
	.event-box {
		padding: 28px 20px;
	}

	.event-box h3 {
		font-size: 1.15rem;
	}

	.event-info {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.event-info dd + dt {
		margin-top: 12px;
	}
}

.event-info a.venue {
	font-size: inherit;
}

/* ---------- 対談コラムのちら見せ ---------- */

.column-teaser {
	max-width: 720px;
	margin: 0 auto;
}

.column-lead {
	text-align: center;
	text-wrap: balance;
}

.teaser-talk {
	position: relative;
	margin: 32px 0 24px;
	padding: 32px 32px 8px;
	background: #fff;
	max-height: 260px;
	overflow: hidden;
}

/* 続きがあることが伝わるよう、下をぼかして途中で切る */
.teaser-talk::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 110px;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%);
}

.talk {
	display: grid;
	grid-template-columns: 4.5em 1fr;
	gap: 4px 16px;
	margin-bottom: 16px;
}

.talk .speaker {
	font-weight: 500;
	letter-spacing: 0.06em;
}

/* 書籍のコラムページと同じ色 */
.talk.watanabe .speaker {
	color: #00adef;
}

.talk.kichiya .speaker {
	color: #ec008c;
}

.talk p {
	margin: 0;
	text-align: left;
	word-break: normal;
}

.column-note {
	margin-bottom: 24px;
	font-size: 0.9375rem;
	text-align: center;
	text-wrap: balance;
}

.column-note strong {
	font-weight: 500;
	background: linear-gradient(transparent 60%, #ffedfd 60%);
}

@media screen and (max-width: 767px) {
	.teaser-talk {
		padding: 24px 20px 8px;
		max-height: 420px;
	}

	.talk {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.column-lead,
	.column-note {
		text-align: left;
	}
}

/* ---------- スマホでの読みやすさ・押しやすさ ---------- */

@media screen and (max-width: 767px) {
	/* 小さすぎる文字を14px以上に */
	ul.item-grid li,
	.pair-note,
	.event-label {
		font-size: 0.875rem;
	}

	/* 文字だけのリンクも、指で押しやすい高さに */
	.cta-more a,
	.event-info a {
		display: inline-block;
		padding: 10px 0;
	}

	/* プロフィールのボタン（小さいボタン）を押しやすく */
	.btn-sm {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
	}

	/* 購入・予約ボタンの高さをそろえる */
	.btn-buy {
		min-height: 48px;
	}
}

@media screen and (max-width: 767px) {
	/* スマホは左寄せなので、語句単位の折り返しはやめて通常の折り返しに（「縫い／代」のような途中改行を防ぐ） */
	p,
	.column-note,
	.column-lead {
		word-break: normal;
		text-wrap: wrap;
	}

	/* 購入・予約ボタンの文字を1行に収める */
	.btn-buy {
		font-size: 1rem;
		letter-spacing: 0.02em;
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* アイテム名は「ベイカー／パンツ」のように言葉の区切りでだけ改行する */
ul.item-grid .name {
	word-break: keep-all;
	letter-spacing: 0;
}

/* 書店の店頭に並ぶタイミングについての注意書き */
.store-note {
	margin: 0 auto 20px;
	max-width: 40em;
	color: #555;
	font-size: 0.875rem;
	line-height: 1.8;
}

.book-info .store-note {
	margin: 16px 0 0;
}

/* ロゴのリンク（トップページへ） */
h1 .logo-link {
	display: inline-block;
}

h1 .logo-link:hover img {
	opacity: 0.7;
}

/* フッターの「このサイトについて（アクセス解析の利用）」 */
.site-note {
	max-width: 46em;
	margin: 0 auto;
	padding-top: 24px;
	color: #777;
	font-size: 0.8125rem;
	line-height: 1.8;
}

.site-note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media screen and (max-width: 767px) {
	.site-note {
		text-align: left;
	}
}