/*
Theme Name: Lightning Child
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.0
*/

/* ========================================
   都市出版 刊行物詳細
======================================== */


/* ----------------------------------------
   東京人商品ページ：1カラム固定
---------------------------------------- */

body.category-item .site-body-container {
	max-width: 1200px;
}

body.category-item .main-section,
body.category-item .main-section--col--two {
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
}

body.category-item .sub-section {
	display: none;
}


/* ----------------------------------------
   商品ページ全体
---------------------------------------- */

.tokyojin-item {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 0 60px;
	box-sizing: border-box;
}


/* ----------------------------------------
   ページタイトル
---------------------------------------- */

.tokyojin-item__header {
	margin-bottom: 32px;
	text-align: center;
}

.tokyojin-item__title {
	margin: 0;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.4;
}


/* ----------------------------------------
   表紙 + 商品情報
   左：右 = 3：2
---------------------------------------- */

.tokyojin-item__summary {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 60px;
	align-items: start;

	width: 100%;
	max-width: 100%;

	margin-top: 35px;

	box-sizing: border-box;
}


/* ========================================
   商品画像ギャラリー
======================================== */

.tokyojin-gallery {
	position: relative;

	width: 100%;
	max-width: 480px;
	min-width: 0;

	margin: 0 auto;

	box-sizing: border-box;
}


/* ----------------------------------------
   ギャラリー表示領域
---------------------------------------- */

.tokyojin-gallery__viewport {
	width: 100%;
	max-width: 100%;
	min-width: 0;

	overflow: hidden;

	box-sizing: border-box;
}


/* ----------------------------------------
   実際に横スクロールするトラック
---------------------------------------- */

.tokyojin-gallery__track {
	display: flex;

	width: 100%;
	max-width: 100%;
	min-width: 0;

	overflow-x: auto;
	overflow-y: hidden;

	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	-webkit-overflow-scrolling: touch;

	scrollbar-width: none;

	box-sizing: border-box;
}

.tokyojin-gallery__track::-webkit-scrollbar {
	display: none;
}


/* ----------------------------------------
   各画像スライド
---------------------------------------- */

.tokyojin-gallery__slide {
	flex: 0 0 100%;

	width: 100%;
	max-width: 100%;
	min-width: 0;

	scroll-snap-align: start;
	scroll-snap-stop: always;

	display: flex;
	align-items: center;
	justify-content: center;

	box-sizing: border-box;
}


/* ----------------------------------------
   画像ボタン
---------------------------------------- */

.tokyojin-gallery__image-button {
	display: block;

	width: 100%;
	max-width: 100%;

	margin: 0;
	padding: 0;

	border: 0;
	background: transparent;

	cursor: zoom-in;

	box-sizing: border-box;
}


/* ----------------------------------------
   商品画像
---------------------------------------- */

.tokyojin-gallery__image-button img {
	display: block;

	width: 100%;
	max-width: 420px;
	height: auto;
	max-height: 620px;

	margin: 0 auto;

	object-fit: contain;
}


/* ----------------------------------------
   PC用 前後ボタン
---------------------------------------- */

.tokyojin-gallery__nav {
	position: absolute;
	top: 50%;
	z-index: 5;

	width: 42px;
	height: 42px;

	padding: 0;

	border: 0;
	border-radius: 50%;

	background: rgba(0, 0, 0, 0.55);
	color: #fff;

	font-size: 30px;
	line-height: 1;

	cursor: pointer;

	transform: translateY(-50%);
}

.tokyojin-gallery__nav--prev {
	left: 8px;
}

.tokyojin-gallery__nav--next {
	right: 8px;
}

.tokyojin-gallery__nav:hover {
	background: rgba(0, 0, 0, 0.7);
}


/* ----------------------------------------
   ページ番号
---------------------------------------- */

.tokyojin-gallery__counter {
	margin-top: 10px;

	text-align: center;
	font-size: 0.9rem;
	line-height: 1.4;

	color: #666;
}


/* ========================================
   右側商品情報
======================================== */

.tokyojin-item__info {
	width: 100%;
	max-width: 100%;
	min-width: 0;

	overflow: hidden;

	box-sizing: border-box;
}


/* ----------------------------------------
   商品詳細本文
---------------------------------------- */

.tokyojin-item__feature-content {
	width: 100%;
	max-width: 100%;
	min-width: 0;

	font-size: 1rem;
	line-height: 1.9;

	overflow-wrap: anywhere;
	word-break: break-word;

	box-sizing: border-box;
}

.tokyojin-item__feature-content > *:first-child {
	margin-top: 0;
}

.tokyojin-item__feature-content > *:last-child {
	margin-bottom: 0;
}


/* ----------------------------------------
   Welcart商品詳細内 pre 対策
---------------------------------------- */

.tokyojin-item__feature-content pre,
.tokyojin-item__feature-content pre.a-b-r-La {
	display: block;

	width: 100%;
	max-width: 100%;
	min-width: 0;

	margin: 0 0 1.2em;
	padding: 0;

	border: 0;
	background: transparent;

	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: 1.9;
	color: inherit;

	white-space: pre-wrap !important;
	overflow-wrap: anywhere !important;
	word-break: break-word;

	overflow: hidden;

	box-sizing: border-box;
}


/* ----------------------------------------
   商品詳細内見出し
---------------------------------------- */

.tokyojin-item__feature-content h2,
.tokyojin-item__feature-content h3 {
	margin-top: 0;
	margin-bottom: 16px;

	padding: 0;
	border: 0;

	font-size: 2rem;
	line-height: 1.45;
}


/* ----------------------------------------
   書誌情報
---------------------------------------- */

.tokyojin-item__meta {
	width: 100%;
	max-width: 100%;
	min-width: 0;

	padding-bottom: 20px;

	border-bottom: 0;

	line-height: 1.7;

	box-sizing: border-box;
}

.tokyojin-item__meta p {
	margin: 0 0 16px;
}

.tokyojin-item__meta p:last-child {
	margin-bottom: 0;
}

.tokyojin-item__issue {
	font-size: 1.25rem;
}

.tokyojin-item__meta-label {
	font-size: 0.85rem;
	color: #666;
}

.tokyojin-item__price {
	font-size: 1.25rem;
	font-weight: 700;
}

.tokyojin-item__code,
.tokyojin-item__jan {
	font-size: 0.9rem;
	color: #555;
}


/* ========================================
   購入先
======================================== */

.ts-shop-links {
	width: 100%;
	max-width: 100%;
	min-width: 0;

	margin-top: 28px;

	box-sizing: border-box;
}

.ts-shop-links__label {
	margin: 0 0 12px;

	font-size: 0.9rem;
	font-weight: 700;

	color: #555;
}

.ts-shop-links__buttons {
	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 10px;

	width: 100%;
	max-width: 100%;
	min-width: 0;

	box-sizing: border-box;
}

.ts-shop-links__button {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 100%;
	max-width: 100%;
	min-width: 0;

	min-height: 48px;

	padding: 8px 10px;

	background: #555;
	color: #fff !important;

	text-align: center;
	text-decoration: none;
	line-height: 1.25;

	overflow-wrap: anywhere;

	box-sizing: border-box;
}

.ts-shop-links__button:hover {
	opacity: 0.8;
	text-decoration: none;
}


/* ========================================
   目次
======================================== */

.tokyojin-item__contents {
	width: 100%;
	max-width: 100%;

	margin-top: 48px;

	box-sizing: border-box;
}

.ts-contents {
	width: 100%;
	max-width: 100%;

	padding-top: 24px;

	border-top: 2px solid #333;

	box-sizing: border-box;
}

.ts-contents__title {
	margin: 0 0 24px;

	padding: 0;
	border: 0;

	font-size: 1.5rem;
	line-height: 1.4;
}

.ts-contents__body {
	width: 100%;
	max-width: 100%;

	line-height: 1.9;

	overflow-wrap: anywhere;
	word-break: break-word;

	box-sizing: border-box;
}

.ts-contents__body p {
	margin: 0;
}


/* ========================================
   拡大表示
======================================== */

.tokyojin-lightbox {
	position: fixed;

	inset: 0;

	z-index: 99999;

	display: flex;

	align-items: center;
	justify-content: center;

	background: rgba(0, 0, 0, 0.88);
}

.tokyojin-lightbox[hidden] {
	display: none;
}


/* ----------------------------------------
   拡大画像領域
---------------------------------------- */

.tokyojin-lightbox__body {
	display: flex;

	align-items: center;
	justify-content: center;

	width: min(90vw, 1200px);
	height: 90vh;

	padding: 20px;

	box-sizing: border-box;
}

.tokyojin-lightbox__image {
	display: block;

	width: auto;
	height: auto;

	max-width: 100%;
	max-height: 100%;

	object-fit: contain;
}


/* ----------------------------------------
   拡大表示 閉じるボタン
---------------------------------------- */

.tokyojin-lightbox__close {
	position: absolute;

	top: 18px;
	right: 22px;

	z-index: 5;

	width: 48px;
	height: 48px;

	padding: 0;

	border: 0;

	background: transparent;
	color: #fff;

	font-size: 40px;
	line-height: 1;

	cursor: pointer;
}


/* ----------------------------------------
   拡大表示 前後ボタン
---------------------------------------- */

.tokyojin-lightbox__nav {
	position: absolute;

	top: 50%;

	z-index: 5;

	width: 54px;
	height: 54px;

	padding: 0;

	border: 0;
	border-radius: 50%;

	background: rgba(255, 255, 255, 0.18);
	color: #fff;

	font-size: 38px;
	line-height: 1;

	cursor: pointer;

	transform: translateY(-50%);
}

.tokyojin-lightbox__nav--prev {
	left: 20px;
}

.tokyojin-lightbox__nav--next {
	right: 20px;
}

.tokyojin-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.3);
}


/* ----------------------------------------
   拡大表示 ページ番号
---------------------------------------- */

.tokyojin-lightbox__counter {
	position: absolute;

	left: 50%;
	bottom: 20px;

	color: #fff;

	font-size: 0.95rem;

	transform: translateX(-50%);
}


/* ========================================
   スマートフォン
======================================== */

@media (max-width: 767px) {

	/* ------------------------------------
	   商品ページ全体
	------------------------------------ */

	.tokyojin-item {
		width: 100%;
		max-width: 100%;

		padding-bottom: 40px;
	}

	.tokyojin-item__header {
		margin-bottom: 24px;
		text-align: center;
	}


	/* ------------------------------------
	   2カラム → 1カラム
	------------------------------------ */

	.tokyojin-item__summary {
		display: block;

		width: 100%;
		max-width: 100%;

		margin-top: 25px;
	}


	/* ------------------------------------
	   ギャラリー
	------------------------------------ */

	.tokyojin-gallery {
		width: 100%;
		max-width: 320px;

		margin: 0 auto 30px;
	}

	.tokyojin-gallery__viewport,
	.tokyojin-gallery__track,
	.tokyojin-gallery__slide {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.tokyojin-gallery__image-button img {
		width: 100%;
		max-width: 280px;
		max-height: 440px;
	}


	/*
	 * スマホはスワイプ主体
	 */
	.tokyojin-gallery__nav {
		display: none;
	}

	.tokyojin-gallery__counter {
		margin-top: 8px;
	}


	/* ------------------------------------
	   商品情報
	------------------------------------ */

	.tokyojin-item__info,
	.tokyojin-item__feature-content,
	.tokyojin-item__meta,
	.ts-shop-links {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}


	/* ------------------------------------
	   商品詳細本文
	------------------------------------ */

	.tokyojin-item__feature-content h2,
	.tokyojin-item__feature-content h3 {
		font-size: 1.5rem;
	}


	/* ------------------------------------
	   購入先
	------------------------------------ */

	.ts-shop-links {
		margin-top: 24px;
	}

	.ts-shop-links__buttons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}


	/* ------------------------------------
	   目次
	------------------------------------ */

	.tokyojin-item__contents {
		margin-top: 40px;
	}


	/* ------------------------------------
	   拡大表示
	------------------------------------ */

	.tokyojin-lightbox__body {
		width: 94vw;
		height: 84vh;

		padding: 10px;
	}

	/*
	 * スマホの拡大表示も
	 * 左右操作はスワイプ主体
	 */
	.tokyojin-lightbox__nav {
		display: none;
	}

	.tokyojin-lightbox__close {
		top: 10px;
		right: 10px;
	}

	.tokyojin-lightbox__counter {
		bottom: 12px;
	}

}

/* ========================================
   都市出版 刊行物カテゴリーポータル
======================================== */

.publication-portal {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px 0 60px;
}

.publication-portal__header {
	margin-bottom: 40px;
	padding-bottom: 24px;
	border-bottom: 1px solid #ddd;
}

.publication-portal__title {
	margin: 0;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.4;
}

.publication-portal__description {
	margin-top: 18px;
	line-height: 1.9;
}

.publication-portal__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 36px 28px;
}

.publication-card {
	min-width: 0;
	margin: 0;
}

.publication-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.publication-card__image {
	margin-bottom: 16px;
}

.publication-card__image img {
	display: block;
	width: 100%;
	height: auto;
}

.publication-card__no-image {
	display: flex;
	aspect-ratio: 3 / 4;
	align-items: center;
	justify-content: center;
	background: #f2f2f2;
	color: #777;
	font-size: 0.9rem;
}

.publication-card__title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	font-weight: 600;
}

.publication-card__link:hover .publication-card__title {
	text-decoration: underline;
}

.publication-portal__pagination {
	margin-top: 50px;
}

.publication-portal__empty {
	padding: 40px 0;
	color: #666;
}


/* Tablet */

@media (max-width: 991px) {

	.publication-portal__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}


/* Smartphone */

@media (max-width: 767px) {

	.publication-portal {
		padding-bottom: 40px;
	}

	.publication-portal__header {
		margin-bottom: 28px;
	}

	.publication-portal__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 18px;
	}

	.publication-card__title {
		font-size: 0.95rem;
	}

}

/* ----------------------------------------
   刊行物カード 書誌情報
---------------------------------------- */

.publication-card__body {
	padding-top: 2px;
}

.publication-card__issue,
.publication-card__date,
.publication-card__price {
	margin: 8px 0 0;
	line-height: 1.5;
}

.publication-card__issue {
	font-size: 0.9rem;
	color: #555;
}

.publication-card__date {
	font-size: 0.85rem;
	color: #666;
}

.publication-card__price {
	font-size: 0.95rem;
	font-weight: 600;
}

.publication-card__image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* ========================================
   Welcart商品カテゴリー
   Lightning標準アーカイブ調整
======================================== */

body.ts-item-category .archive-header {
	display: none;
}

/* ========================================
   都市出版 刊行物一覧
======================================== */


/* ----------------------------------------
   青帯ページヘッダー
---------------------------------------- */

.ts-item-category .page-header {
	padding-top: 18px;
	padding-bottom: 18px;
}

.ts-item-category .page-header-inner {
	min-height: 0;
}

.ts-item-category .page-header-title {
	margin: 0;
	font-size: 1.8rem;
	line-height: 1.35;
}


/* ----------------------------------------
   商品グリッド
---------------------------------------- */

.ts-publication-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 42px 24px;
	width: 100%;
}


/* ----------------------------------------
   商品カード
---------------------------------------- */

.ts-publication-card {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.ts-publication-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit !important;
	text-decoration: none !important;
}


/* ----------------------------------------
   表紙
---------------------------------------- */

.ts-publication-card__image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 3 / 4;
	margin-bottom: 14px;
	overflow: hidden;
}

.ts-publication-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
}

.ts-publication-card__no-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #f3f3f3;
	color: #777;
	font-size: 0.85rem;
}


/* ----------------------------------------
   商品情報
---------------------------------------- */

.ts-publication-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.ts-publication-card__title {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.55;
}

.ts-publication-card__name,
.ts-publication-card__feature {
	display: block;
}

.ts-publication-card__feature {
	margin-top: 2px;
}

.ts-publication-card__editor {
	margin: 0 0 5px;
	font-size: 0.88rem;
	line-height: 1.55;
	color: #555;
}

.ts-publication-card__price {
	margin: auto 0 0;
	padding-top: 4px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.5;
}


/* ----------------------------------------
   PCの補助表現
   ホバーに依存しない
---------------------------------------- */

.ts-publication-card__link:hover .ts-publication-card__title,
.ts-publication-card__link:focus-visible .ts-publication-card__title {
	text-decoration: underline;
}

.ts-publication-card__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 5px;
}


/* ========================================
   大画面：6列
======================================== */

@media (min-width: 1400px) {

	.ts-publication-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

}


/* ========================================
   中サイズPC：4列
======================================== */

@media (max-width: 1199px) {

	.ts-publication-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 36px 22px;
	}

}


/* ========================================
   Tablet：3列
======================================== */

@media (max-width: 991px) {

	.ts-publication-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 20px;
	}

}


/* ========================================
   Smartphone：2列
======================================== */

@media (max-width: 767px) {

	.ts-item-category .page-header {
		padding-top: 11px;
		padding-bottom: 11px;
	}

	.ts-item-category .page-header-title {
		font-size: 1.4rem;
	}

	.ts-publication-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 16px;
	}

	.ts-publication-card__image {
		margin-bottom: 10px;
	}

	.ts-publication-card__title {
		font-size: 0.92rem;
		line-height: 1.5;
	}

	.ts-publication-card__editor {
		font-size: 0.8rem;
	}

	.ts-publication-card__price {
		font-size: 0.88rem;
	}

}


/* ========================================
   都市出版 刊行物詳細
   Lightning 2カラム幅の解除
======================================== */

@media (min-width: 992px) {

	body.single.category-publications .site-body-container {
		display: block;
	}

	body.single.category-publications .main-section {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}

	body.single.category-publications .main-section--col--two {
		width: 100% !important;
		max-width: 100% !important;
		flex-basis: 100% !important;
	}

	body.single.category-publications .tokyojin-item {
		width: 100%;
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
	}

}