/*
 * CICO SEARCH
 * Frontend styles
 */

/* =========================================================
 * Search
 * ====================================================== */

.cico-search {
	width: 100%;
}


/* ---------------------------------------------------------
 * Search form
 * ------------------------------------------------------ */

.cico-search form {
	margin: 0 0 32px;
}

.cico-search fieldset {
	margin: 0;
	padding: 24px;
	border: 1px solid #e2e2e2;
	border-radius: 12px;
	background: #fff;
}

.cico-search legend {
	padding: 0 8px;
	font-size: 1.1rem;
	font-weight: 700;
}

.cico-search-description {
	margin: 4px 0 20px;
	color: #666;
	font-size: 0.9rem;
	line-height: 1.7;
}


/* ---------------------------------------------------------
 * Search tags
 * ------------------------------------------------------ */

.cico-search-tags {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 24px;
}

.cico-search fieldset .cico-search-tag {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

/*
 * 実際のチェックボックスは画面外へ隠す。
 * display:none にはせず、キーボード操作可能な状態を維持する。
 */
.cico-search-tag input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * 検索条件として選択するタグ本体。
 */
.cico-search-tag span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 10px 14px;
	border: 2px solid #e2e2e2;
	border-radius: 10px;
	background: #fff;
	color: #333;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	transition:
		border-color 0.15s ease,
		background-color 0.15s ease,
		color 0.15s ease,
		transform 0.15s ease;
}

.cico-search-tag:hover span {
	border-color: #999;
	background: #f7f7f7;
}

.cico-search-tag input[type="checkbox"]:checked + span {
	border-color: #333;
	background: #333;
	color: #fff;
}

.cico-search-tag input[type="checkbox"]:checked + span::before {
	content: "✓";
	margin-right: 7px;
	font-weight: 700;
}

.cico-search-tag input[type="checkbox"]:focus-visible + span {
	outline: 3px solid #777;
	outline-offset: 3px;
}


/* ---------------------------------------------------------
 * Search button
 * ------------------------------------------------------ */

.cico-search fieldset button {
	display: block;
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
	padding: 13px 20px;
	border: 0;
	border-radius: 8px;
	background: #333;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

.cico-search fieldset button:hover {
	opacity: 0.85;
}

.cico-search fieldset button:active {
	transform: translateY(1px);
}


/* ---------------------------------------------------------
 * Search messages
 * ------------------------------------------------------ */

.cico-search-message {
	margin: 24px 0;
	padding: 16px 18px;
	border-radius: 8px;
	background: #f5f5f5;
	line-height: 1.7;
}

.cico-search-message-error {
	border: 1px solid #ddd;
}


/* ---------------------------------------------------------
 * Search results
 * ------------------------------------------------------ */

.cico-search-results {
	margin-top: 32px;
}

.cico-search-results-header {
	margin-bottom: 24px;
}

.cico-search-results-title {
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #2b211c;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.5;
}

.cico-search-results-header p {
	margin: 0;
	color: #666;
}

/*
 * Cocoonの自動目次対象にしない検索条件パネル見出し。
 */
.cico-search-filter-panel-title {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: #2b211c;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.35;
}


/* ---------------------------------------------------------
 * Empty result
 * ------------------------------------------------------ */

.cico-search-empty {
	padding: 24px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	background: #fafafa;
	text-align: center;
}

.cico-search-empty p {
	margin: 0;
	line-height: 1.7;
}

.cico-search-empty p + p {
	margin-top: 6px;
	color: #666;
	font-size: 0.9rem;
}


/* ---------------------------------------------------------
 * Work grid
 * ------------------------------------------------------ */

.cico-search-results > ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}


/* ---------------------------------------------------------
 * Work card
 * ------------------------------------------------------ */

.cico-search-results > ul > li {
	align-self: start;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0 0 16px;
	overflow: hidden;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	background: #fff;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.15s ease;
}

.cico-search-results > ul > li:hover {
	border-color: #ccc;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}


/* ---------------------------------------------------------
 * Work image
 * ------------------------------------------------------ */

/*
 * 検索結果の画像領域は、
 * DUGAジャケット中画像の240×340と同じ比率で統一する。
 *
 * 画像そのものはトリミングせず、
 * 縦横比を維持したまま中央へ配置する。
 */
.cico-search-result-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 250px;
	margin: 0 0 14px;
	padding: 0;
	overflow: hidden;
	background: #f7f7f7;
}

.cico-search-result-image a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.cico-search-result-image img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	object-fit: contain;
}

/* ---------------------------------------------------------
 * Work title
 * ------------------------------------------------------ */

.cico-search-results > ul > li > strong {
	display: block;
	padding: 0 14px;
	font-size: 1rem;
	line-height: 1.6;
}

.cico-search-results > ul > li > strong a {
	color: #222;
	text-decoration: none;
}

.cico-search-results > ul > li > strong a:hover {
	text-decoration: underline;
}


/* ---------------------------------------------------------
 * Work tags
 * ------------------------------------------------------ */

.cico-work-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 14px 0;
}

.cico-work-tag {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 4px 8px;
	border: 1px solid #d8d8d8;
	border-radius: 999px;
	background: #f7f7f7;
	color: #555;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}


/* ---------------------------------------------------------
 * Work metadata
 * ------------------------------------------------------ */

.cico-search-results > ul > li > .cico-work-release-date {
	display: block;
	margin-top: 12px;
	padding: 0 14px;
	color: #777;
	font-size: 0.8rem;
	line-height: 1.5;
}


/* =========================================================
 * Work detail
 * ====================================================== */

.cico-work-detail {
	width: 100%;
}

/* 作品詳細ページではCocoonの自動目次を表示しない。 */
.cico-work-detail .toc,
.cico-work-detail-entry .toc {
	display: none !important;
}


/* ---------------------------------------------------------
 * Detail header
 * ------------------------------------------------------ */

.cico-work-detail-header {
	margin-bottom: 24px;
}

.cico-work-detail .cico-work-detail-title {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: 1.55rem;
	line-height: 1.45;
}

.cico-work-detail-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 14px;
}

.cico-work-detail-tag {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border: 1px solid #d8d8d8;
	border-radius: 999px;
	background: #f7f7f7;
	color: #444;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.3;
}

/*
 * 同一作品に複数Providerがある場合だけ表示する切替。
 * 画像・説明・CTAはリンク先で選択Providerのwork_sourcesへ丸ごと切り替える。
 */
.cico-work-provider-switcher {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

.cico-work-provider-switcher-label {
	flex: 0 0 auto;
	color: #716862;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.4;
}

.cico-work-provider-switcher-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cico-work-provider-switcher-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 7px 14px;
	border: 1px solid #c9beb3;
	border-radius: 999px;
	background: #fff;
	color: #65506f;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition:
		border-color 0.15s ease,
		background-color 0.15s ease,
		color 0.15s ease;
}

.cico-work-provider-switcher-link:hover,
.cico-work-provider-switcher-link:focus-visible {
	border-color: #a88f9e;
	background: #f8f3f6;
	color: #2b211c;
	text-decoration: none;
}

.cico-work-provider-switcher-link.is-current {
	border-color: #65506f;
	background: #65506f;
	color: #fff;
}

.cico-work-detail-search-return {
	margin-top: 12px;
}

.cico-work-detail-search-return-link {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 6px 12px;
	border: 1px solid #c9beb3;
	border-radius: 999px;
	background: #f6f1ea;
	color: #65506f;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.cico-work-detail-search-return-link::after {
	content: "›";
	margin-left: 6px;
	font-size: 1rem;
	line-height: 1;
}

.cico-work-detail-search-return-link:hover,
.cico-work-detail-search-return-link:focus-visible {
	border-color: #a88f9e;
	background: #f8f3f6;
	color: #2b211c;
	text-decoration: none;
}

/*
 * 詳細ページからアンカー遷移した際に、
 * 固定ヘッダーへ検索フォームが隠れにくい余白を確保する。
 */
#cico-search-form {
	scroll-margin-top: 84px;
}


/* ---------------------------------------------------------
 * Detail main
 * ------------------------------------------------------ */

.cico-work-detail-main {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
	gap: 28px;
	align-items: start;
	margin-bottom: 36px;
}


/* ---------------------------------------------------------
 * Detail image
 * ------------------------------------------------------ */

.cico-work-detail-visual {
	min-width: 0;
}

.cico-work-detail-side {
	min-width: 0;
}

.cico-work-detail-image {
	min-width: 0;
}

.cico-work-detail-image img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 10px;
}

/*
 * 作品紹介はジャケット下の補足情報として扱う。
 * 視覚コンテンツより強く見せない。
 */
.cico-work-detail-caption {
	margin: 12px 2px 0;
	color: #716862;
	font-size: 0.78rem;
	line-height: 1.75;
}

/*
 * 作品詳細上部のDUGA無料会員案内。
 *
 * 上部の「DUGAで作品を見る」と競合しないよう、
 * 外部遷移ボタンではなく下部CTAへの軽い案内として表示する。
 */
.cico-work-duga-signup-teaser {
	margin: 14px 0 0;
	padding: 12px 14px;
	border: 1px solid #b9d8c2;
	border-radius: 8px;
	background: #f1f8f3;
}

/*
 * PCでは作品情報カードの下、
 * 作品情報が縦並びになる幅ではジャケット下に表示する。
 */
.cico-work-duga-signup-teaser-mobile {
	display: none;
}

.cico-work-duga-signup-teaser-desktop {
	display: block;
}

.cico-work-duga-signup-teaser-text {
	margin: 0;
	color: #355844;
	font-size: 0.78rem;
	line-height: 1.65;
}

.cico-work-duga-signup-teaser-text strong {
	color: #28533b;
}

.cico-work-duga-signup-teaser-link {
	display: inline-block;
	margin-top: 6px;
	color: #2f6f4e;
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cico-work-duga-signup-teaser-link:hover,
.cico-work-duga-signup-teaser-link:focus-visible {
	color: #214f37;
}


/* ---------------------------------------------------------
 * Detail information
 * ------------------------------------------------------ */

.cico-work-detail-info {
	min-width: 0;
	padding: 20px;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	background: #fff;
}

.cico-work-detail-meta {
	margin: 0;
}

.cico-work-detail-meta > div {
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr);
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #eee;
}

.cico-work-detail-meta > div:first-child {
	padding-top: 0;
}

.cico-work-detail-meta > div:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.cico-work-detail-meta dt {
	margin: 0;
	color: #666;
	font-size: 0.85rem;
	font-weight: 700;
}

.cico-work-detail-meta dd {
	min-width: 0;
	margin: 0;
	color: #222;
	font-size: 0.9rem;
	line-height: 1.6;
}

.cico-work-detail-performers {
	overflow-wrap: anywhere;
}

.cico-work-detail-performer-more {
	display: inline-block;
	margin-left: 8px;
	color: #716862;
	font-size: 0.82rem;
	white-space: nowrap;
}


/* ---------------------------------------------------------
 * Affiliate action
 * ------------------------------------------------------ */

.cico-work-detail-action {
	margin-top: 24px;
	text-align: center;
}

.cico-work-affiliate-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	padding: 13px 18px;
	border-radius: 8px;
	background: #333;
	color: #fff !important;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none !important;
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

.cico-work-affiliate-button:hover {
	opacity: 0.85;
}

.cico-work-affiliate-button:active {
	transform: translateY(1px);
}

.cico-work-affiliate-note {
	margin: 9px 0 0;
	color: #777;
	font-size: 0.75rem;
	line-height: 1.5;
}


/* ---------------------------------------------------------
 * Work description
 * ------------------------------------------------------ */

.cico-work-detail-description {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid #e5e5e5;
}

.cico-work-detail-description > h2 {
	margin: 0 0 18px;
	font-size: 1.3rem;
	line-height: 1.5;
}

.cico-work-caption {
	line-height: 1.9;
}

.cico-work-caption > :first-child {
	margin-top: 0;
}

.cico-work-caption > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------
 * Sample video
 * ------------------------------------------------------ */

/*
 * DUGA公式APIから取得・保存済みのサンプル動画を
 * 作品詳細内で直接確認できるようにする。
 *
 * 自動再生は行わず、ユーザー操作でのみ再生する。
 */
.cico-work-detail-sample-video {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid #e5e5e5;
}

.cico-work-detail .cico-work-detail-sample-video > .cico-work-section-heading {
	margin: 0 0 8px;
	padding: 0 0 0 12px;
	border: 0;
	border-left: 4px solid #65506f;
	background: transparent;
	box-shadow: none;
	color: #2b211c;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.5;
}

.cico-work-detail-sample-video-description {
	margin: 0 0 16px;
	color: #716862;
	font-size: 0.84rem;
	line-height: 1.7;
}

.cico-work-detail-sample-video-player {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 12px;
	background: #000;
	box-shadow: 0 8px 24px rgba(43, 33, 28, 0.10);
}

.cico-work-detail-sample-video-player video {
	display: block;
	width: 100%;
	height: auto;
	max-height: 72vh;
	margin: 0;
	background: #000;
	object-fit: contain;
}

/*
 * サンプル動画を見た直後の購入検討導線。
 * 通常CTAよりも文脈を明確にし、動画視聴後の興味をProvider送客へつなげる。
 */
.cico-work-detail-after-video-bridge {
	max-width: 620px;
	margin: 22px auto 0;
	padding: 20px 20px 18px;
	border: 1px solid #c9beb3;
	border-radius: 12px;
	background: #f6f1ea;
	text-align: center;
}

.cico-work-detail-after-video-kicker {
	margin: 0 0 6px;
	color: #65506f;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.5;
}

.cico-work-detail-after-video-copy {
	margin: 0;
	color: #2b211c;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.7;
}

.cico-work-detail-action-after-video {
	max-width: 520px;
	margin: 14px auto 0;
}

.cico-work-affiliate-button-after-video {
	min-height: 58px;
	background: #2b211c;
	box-shadow: 0 7px 18px rgba(43, 33, 28, 0.16);
	font-size: 1.02rem;
}

/* ---------------------------------------------------------
 * Work digest
 * ------------------------------------------------------ */

.cico-work-detail-digest {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid #e5e5e5;
}

.cico-work-detail .cico-work-detail-digest > .cico-work-section-heading {
	margin: 0 0 18px;
	padding: 0 0 0 12px;
	border: 0;
	border-left: 4px solid #65506f;
	background: transparent;
	box-shadow: none;
	color: #2b211c;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.5;
}

/*
 * DUGAの作品ダイジェスト画像を3列で表示する。
 *
 * 画像はトリミングせず、
 * DUGAから取得した元の縦横比を維持する。
 */
.cico-work-detail-digest-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 120px);
	gap: 10px;
	justify-content: start;
}

.cico-work-detail-digest-image {
	min-width: 0;
	margin: 0;
	padding: 0;
}

.cico-work-detail-digest-image img {
	display: block;
	width: 120px;
	height: auto;
	margin: 0;
	border-radius: 6px;
}


.cico-work-detail-digest-button {
	display: block;
	width: 120px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
	overflow: hidden;
	border-radius: 6px;
}

.cico-work-detail-digest-button img {
	transition: transform 0.18s ease;
}

.cico-work-detail-digest-button:hover img {
	transform: scale(1.06);
}

/* ---------------------------------------------------------
 * Bottom affiliate action
 * ------------------------------------------------------ */

.cico-work-detail-action-bottom {
	max-width: 520px;
	margin: 36px auto 0;
	padding-top: 28px;
	border-top: 1px solid #e5e5e5;
}

/* ---------------------------------------------------------
 * DUGA free signup
 * ------------------------------------------------------ */

/*
 * 実際にDUGAへ遷移する無料会員登録CTA。
 * 通常の商品CTAとは目的を分け、機能色の緑で識別する。
 */
.cico-work-duga-signup {
	max-width: 720px;
	margin: 28px auto 0;
	padding: 20px 22px;
	border: 1px solid #b9d8c2;
	border-radius: 12px;
	background: #f1f8f3;
	box-sizing: border-box;
	scroll-margin-top: 84px;
	text-align: center;
}

.cico-work-duga-signup-copy {
	margin: 0 auto;
}

.cico-work-duga-signup-label {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 4px 10px;
	border: 1px solid #9fc8ab;
	border-radius: 999px;
	background: #fff;
	color: #2f6f4e;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.3;
}

.cico-work-duga-signup-title {
	margin: 10px 0 0;
	color: #2b211c;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.5;
}

.cico-work-duga-signup-description {
	margin: 7px 0 0;
	color: #4f6658;
	font-size: 0.84rem;
	line-height: 1.7;
}

.cico-work-duga-signup-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 420px;
	min-height: 48px;
	margin: 16px auto 0;
	padding: 11px 16px;
	border: 1px solid #2f6f4e;
	border-radius: 8px;
	background: #2f6f4e;
	color: #fff !important;
	font-size: 0.94rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none !important;
	transition:
		opacity 0.15s ease,
		transform 0.15s ease;
}

.cico-work-duga-signup-button:hover,
.cico-work-duga-signup-button:focus-visible {
	opacity: 0.88;
}

.cico-work-duga-signup-button:active {
	transform: translateY(1px);
}

.cico-work-duga-signup-note {
	margin: 8px 0 0;
	color: #6c7c71;
	font-size: 0.72rem;
	line-height: 1.5;
}


/* ---------------------------------------------------------
 * Related works / Popular ranking carousel
 * ------------------------------------------------------ */

.cico-work-showcase {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid #e5e5e5;
}

.cico-work-showcase-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.cico-work-showcase-heading {
	min-width: 0;
}

.cico-work-detail .cico-work-showcase-heading .cico-work-section-heading {
	margin: 0 0 6px;
	padding: 0 0 0 12px;
	border: 0;
	border-left: 4px solid #65506f;
	background: transparent;
	box-shadow: none;
	color: #2b211c;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.5;
}

.cico-work-showcase-heading p {
	margin: 0;
	color: #716862;
	font-size: 0.84rem;
	line-height: 1.7;
}

.cico-work-carousel-controls {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
}

.cico-work-carousel-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(101, 80, 111, 0.28);
	border-radius: 50%;
	background: #fff;
	color: #65506f;
	font-size: 1.45rem;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease,
		opacity 0.15s ease;
}

.cico-work-carousel-button:hover:not(:disabled) {
	border-color: #a88f9e;
	background: #f8f3f6;
	color: #2b211c;
}

.cico-work-carousel-button:disabled {
	opacity: 0.3;
	cursor: default;
}

.cico-work-carousel {
	position: relative;
	width: 100%;
}

.cico-work-carousel-track {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 2px 2px 10px;
	overflow-x: auto;
	overflow-y: hidden;
	list-style: none;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.cico-work-carousel-track::-webkit-scrollbar {
	display: none;
}

.cico-work-carousel-card {
	position: relative;
	flex: 0 0 205px;
	min-width: 0;
	margin: 0;
	padding: 0 0 14px;
	overflow: hidden;
	border: 1px solid rgba(201, 190, 179, 0.72);
	border-radius: 12px;
	background: #fff;
	scroll-snap-align: start;
	box-shadow: 0 3px 12px rgba(43, 33, 28, 0.03);
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.15s ease;
}

.cico-work-carousel-card:hover {
	border-color: #a88f9e;
	box-shadow: 0 10px 24px rgba(101, 80, 111, 0.10);
	transform: translateY(-2px);
}

.cico-work-carousel-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 250px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background:
		linear-gradient(
			180deg,
			#fbf8f5 0%,
			#f7f1f4 100%
		);
}

.cico-work-carousel-image img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.18s ease;
}

.cico-work-carousel-card:hover .cico-work-carousel-image img {
	transform: scale(1.03);
}

.cico-work-carousel-image-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #f6f1ea;
	color: #a88f9e;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.cico-work-detail h3.cico-work-carousel-title {
	margin: 0;
	padding: 8px 10px 0;
	border: 0;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	border-bottom: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #2b211c;
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1.42;
}

.cico-work-carousel-title a {
	color: #2b211c;
	text-decoration: none;
}

.cico-work-carousel-title a:hover {
	color: #65506f;
	text-decoration: underline;
}

.cico-work-detail h3.cico-work-carousel-title::before,
.cico-work-detail h3.cico-work-carousel-title::after {
	display: none;
	content: none;
}

.cico-work-related-reason {
	margin: 10px 12px 0;
}

.cico-work-related-reason-label {
	display: block;
	margin-bottom: 6px;
	color: #716862;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.4;
}

.cico-work-related-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.cico-work-related-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 7px;
	border: 1px solid rgba(168, 143, 158, 0.38);
	border-radius: 999px;
	background: #f8f3f6;
	color: #65506f;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.3;
}

.cico-work-related-tag-more {
	background: #fff;
	color: #716862;
}

.cico-work-popular-rank {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 999px;
	background: rgba(43, 33, 28, 0.92);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 4px 12px rgba(43, 33, 28, 0.18);
}

.cico-work-popular-rank-first {
	background: #b28a58;
}

@media screen and (max-width: 834px) {
	.cico-work-carousel-card {
		flex-basis: 200px;
	}
}

@media screen and (max-width: 480px) {
	.cico-work-showcase {
		margin-top: 28px;
		padding-top: 22px;
	}

	.cico-work-showcase-header {
		align-items: flex-start;
		margin-bottom: 13px;
	}

	.cico-work-detail .cico-work-showcase-heading .cico-work-section-heading {
		padding-left: 10px;
		border-left-width: 3px;
		font-size: 1.05rem;
	}

	.cico-work-showcase-heading p {
		font-size: 0.78rem;
		line-height: 1.6;
	}

	.cico-work-carousel-controls {
		display: none;
	}

	.cico-work-carousel-track {
		gap: 10px;
		padding-right: 18%;
	}

	.cico-work-carousel-card {
		flex-basis: 72%;
		max-width: 240px;
	}

	.cico-work-carousel-image {
		height: 235px;
		margin: 0;
	}

	.cico-work-detail h3.cico-work-carousel-title {
		padding: 7px 9px 0;
		font-size: 0.70rem;
		line-height: 1.4;
	}

	.cico-work-related-reason {
		margin: 8px 9px 0;
	}

	.cico-work-related-tag {
		padding: 3px 6px;
		font-size: 0.64rem;
	}

	.cico-work-popular-rank {
		top: 8px;
		left: 8px;
		min-width: 30px;
		height: 30px;
		font-size: 0.72rem;
	}
}


/* ---------------------------------------------------------
 * Work digest lightbox
 * ------------------------------------------------------ */

.cico-work-lightbox[hidden] {
	display: none !important;
}

.cico-work-lightbox {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
}

.cico-work-lightbox-backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(20, 16, 14, 0.92);
}

.cico-work-lightbox-dialog {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100% - 32px);
	max-width: 1400px;
	height: calc(100% - 48px);
	transform: translate(-50%, -50%);
}

.cico-work-lightbox-image-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 56px 72px;
	box-sizing: border-box;
}

.cico-work-lightbox-image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/*
 * DUGAの大画像（cap）が存在せず、
 * 小画像（scap）へフォールバックした場合だけ1.5倍表示する。
 *
 * transformによる拡大なので縦横比は保持され、
 * 通常の大画像には影響しない。
 */
.cico-work-lightbox-image.is-fallback-scaled {
	transform: scale(1.5);
	transform-origin: center center;
}

.cico-work-lightbox-close,
.cico-work-lightbox-prev,
.cico-work-lightbox-next {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(43, 33, 28, 0.78);
	color: #fff;
	cursor: pointer;
}

.cico-work-lightbox-close {
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 1.8rem;
}

.cico-work-lightbox-prev,
.cico-work-lightbox-next {
	top: 50%;
	width: 48px;
	height: 56px;
	margin-top: -28px;
	border-radius: 10px;
	font-size: 1.6rem;
}

.cico-work-lightbox-prev {
	left: 8px;
}

.cico-work-lightbox-next {
	right: 8px;
}

.cico-work-lightbox-counter {
	position: absolute;
	left: 50%;
	bottom: 10px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(43, 33, 28, 0.72);
	color: #fff;
	font-size: 0.82rem;
	transform: translateX(-50%);
}

html.cico-lightbox-open,
html.cico-lightbox-open body {
	overflow: hidden;
}


/* ---------------------------------------------------------
 * Detail messages
 * ------------------------------------------------------ */

.cico-work-message {
	margin: 24px 0;
	padding: 16px 18px;
	border-radius: 8px;
	background: #f5f5f5;
	line-height: 1.7;
}


/* =========================================================
 * Responsive
 * ====================================================== */

@media screen and (max-width: 834px) {

	.cico-search-tags {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cico-search-results > ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	/*
	 * タブレット以下では作品画像と基本情報を縦並びにする。
	 */
	.cico-work-detail-main {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.cico-work-duga-signup-teaser-mobile {
		display: block;
	}

	.cico-work-duga-signup-teaser-desktop {
		display: none;
	}


}


@media screen and (max-width: 480px) {

	.cico-search fieldset {
		padding: 18px;
	}

	.cico-search-description {
		font-size: 0.85rem;
	}

	.cico-search-tags {
		gap: 10px;
		margin-bottom: 20px;
	}

	.cico-search-tag span {
		min-height: 48px;
		padding: 9px 8px;
		font-size: 0.9rem;
	}

	.cico-search fieldset button {
		max-width: none;
	}

	.cico-search-empty {
		padding: 20px 14px;
	}

	.cico-search-results > ul {
		gap: 12px;
	}

	.cico-search-results > ul > li {
		padding-bottom: 12px;
	}

	.cico-search-results > ul > li > p {
		margin-bottom: 10px;
	}

	.cico-search-results > ul > li > strong {
		padding: 0 10px;
		font-size: 0.84rem;
		line-height: 1.42;
	}

	.cico-work-tags {
		gap: 4px;
		margin: 9px 10px 0;
	}

	.cico-work-tag {
		padding: 3px 6px;
		font-size: 0.7rem;
	}

	.cico-search-results > ul > li > .cico-work-release-date {
		margin-top: 9px;
		padding: 0 10px;
		font-size: 0.75rem;
	}

	/*
	 * 作品詳細。
	 */
	.cico-work-detail-header {
		margin-bottom: 18px;
	}

	.cico-work-detail .cico-work-detail-title {
		font-size: 1.18rem;
		line-height: 1.42;
	}

	.cico-work-detail-tags {
		gap: 5px;
		margin-top: 11px;
	}

	.cico-work-detail-tag {
		padding: 4px 8px;
		font-size: 0.75rem;
	}

	.cico-work-detail-search-return {
		margin-top: 10px;
	}

	.cico-work-detail-search-return-link {
		min-height: 32px;
		padding: 5px 10px;
		font-size: 0.75rem;
	}

	.cico-work-detail-main {
		margin-bottom: 28px;
	}

	.cico-work-detail-image img {
		border-radius: 8px;
	}

	.cico-work-detail-caption {
		margin-top: 10px;
		font-size: 0.74rem;
		line-height: 1.7;
	}

	.cico-work-duga-signup-teaser {
		margin-top: 11px;
		padding: 10px 12px;
	}

	.cico-work-duga-signup-teaser-text,
	.cico-work-duga-signup-teaser-link {
		font-size: 0.72rem;
	}

	.cico-work-detail-info {
		padding: 16px;
	}

	.cico-work-detail-meta > div {
		grid-template-columns: 78px minmax(0, 1fr);
		gap: 10px;
		padding: 10px 0;
	}

	.cico-work-detail-meta dt {
		font-size: 0.8rem;
	}

	.cico-work-detail-meta dd {
		font-size: 0.85rem;
	}

	.cico-work-affiliate-button {
		min-height: 52px;
		font-size: 0.95rem;
	}

	.cico-work-detail-description {
		margin-top: 28px;
		padding-top: 22px;
	}

	.cico-work-detail-description > h2 {
		margin-bottom: 14px;
		font-size: 1.15rem;
	}

	.cico-work-caption {
		font-size: 0.9rem;
		line-height: 1.85;
	}

	.cico-work-detail-action-bottom {
		margin-top: 28px;
		padding-top: 22px;
	}

	.cico-work-duga-signup {
		margin-top: 22px;
		padding: 16px 14px;
		border-radius: 10px;
	}

	.cico-work-duga-signup-title {
		font-size: 0.98rem;
	}

	.cico-work-duga-signup-description {
		font-size: 0.78rem;
	}

	.cico-work-duga-signup-button {
		min-height: 46px;
		font-size: 0.88rem;
	}


}

/*
 * スマートフォン用：検索結果画像
 *
 * 2列表示のカード幅に合わせて画像領域の高さを抑える。
 * 画像自体はトリミングせず、縦横比を維持して中央表示する。
 */
@media screen and (max-width: 480px) {

	.cico-search-result-image {
		height: 120px;
		margin-bottom: 10px;
	}

    /*
     * 作品ダイジェスト。
     */
    .cico-work-detail-digest {
    	margin-top: 28px;
    	padding-top: 22px;
    }
    
    .cico-work-detail .cico-work-detail-digest > .cico-work-section-heading {
    	margin-bottom: 14px;
    	padding-left: 10px;
    	border-left-width: 3px;
    	font-size: 1.05rem;
    }
    
    .cico-work-detail-digest-grid {
    	grid-template-columns: repeat(2, minmax(0, 1fr));
    	gap: 8px;
    }
    
    .cico-work-detail-digest-image img {
    	border-radius: 6px;
    }

	.cico-work-detail-digest-button {
		width: 100%;
	}

	.cico-work-detail-digest-button img {
		width: 100%;
	}

	.cico-work-detail-digest-button:hover img {
		transform: none;
	}

	.cico-work-lightbox-dialog {
		width: 100%;
		height: 100%;
	}

	.cico-work-lightbox-image-wrap {
		padding: 60px 16px 70px;
	}

	.cico-work-lightbox-prev,
	.cico-work-lightbox-next {
		display: none;
	}

	.cico-work-lightbox-close {
		top: 12px;
		right: 12px;
	}

}

/* =========================================================
 * Service credits
 * ====================================================== */

/*
 * DUGAなど、CICO SEARCHが利用している外部サービスの
 * 規定クレジット表示領域。
 *
 * 各サービスが指定するクレジットHTML自体は変更せず、
 * 外側の表示領域のみCICO SEARCH側で整える。
 */
.cico-service-credits {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 12px 16px;
	border-top: 1px solid #e5e5e5;
	background: #f7f7f7;
	color: #666;
	font-size: 0.75rem;
	line-height: 1.5;
	text-align: center;
	box-sizing: border-box;
}

.cico-service-credits a {
	color: #666;
	text-decoration: underline;
}

.cico-service-credits a:hover {
	color: #222;
}

@media screen and (max-width: 480px) {

	.cico-service-credits {
		gap: 8px;
		padding: 10px 12px;
		font-size: 0.7rem;
	}

}
@media screen and (max-width: 480px) {

	/*
	 * 浮動「条件を変更」はbody直下へ移動済み。
	 * スクロール座標をJSで追従させず、viewport下端へ純粋に固定する。
	 */
	body > .cico-search-change-filters {
		position: fixed !important;
		top: auto !important;
		right: auto !important;
		bottom: 16px !important;
		left: 50% !important;
		z-index: 990 !important;
	}

	/*
	 * 検索条件パネル表示中は浮動ボタンを表示しない。
	 * パネル／オーバーレイより前面へ出る事故も防ぐ。
	 */
	body.cico-filter-panel-open > .cico-search-change-filters,
	body > .cico-search-change-filters[hidden] {
		display: none !important;
	}
}