@charset "utf-8";
/*
Theme Name:COINO OTAKU Muum
Theme URI:
Description:COINOTAKU向けに、TCDテーマ「Muum」をカスタマイズした子テーマです。
Template: muum_tcd085
Author:COINO OTAKU
Author URI:
Version:0.0.0
*/

/* ===========================================================
▼▼▼ ページ共通
-------------------------------------------------------------- */
/* カード記事の文字数制限 */
.home,
.archive {
	#index_tab_post_list .post_list.type2 .title { /* 805行 */
		max-height: none;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		span {
			overflow: hidden;
		}
	}
}


/* -----------------------------------------------------------
ヘッダー 1423行 〜1435
-------------------------------------------------------------- */
:root {
	--header-fixed-height-pc: 120px;
	--header-fixed-height-mobile: 60px;
}

#header {
	position: fixed;
	inset: 0;
	height: var(--header-fixed-height-pc);
	background: #fff;
	border-bottom: solid 2px #000;

	#header_top { /* 1427行 */
		height: 72px;
	}

	#global_menu { /* 1480行 */
		height: 48px;
	}

	#global_menu > ul > li > a { /* 1490行 */
		height: 48px;
		line-height: 48px;
		font-weight: 500;
	}
}

#body {
	scroll-padding-top: var(--header-fixed-height-pc);
}

/* トップページ */
.home {
	#header_slider_wrap {
		padding-top: var(--header-fixed-height-pc);
	}
}

/* 記事ページ */
.single {
	#bread_crumb {
		padding-top: var(--header-fixed-height-pc);
	}
}

/* カテゴリー・アーカイブページ */
#page_header {
	padding-top: var(--header-fixed-height-pc);
}

@media (width <= 1250px) {
	#body {
		scroll-padding-top: var(--header-fixed-height-mobile);
	}

	#header {
		#header_top {
			height: 60px;
		}
	}

	/* トップページ */
	.home {
		#header_slider_wrap {
			padding-top: var(--header-fixed-height-mobile);
		}
	}

	/* 記事ページ */
	.single {
		#bread_crumb {
			padding-top: var(--header-fixed-height-mobile);
		}
	}

	/* カテゴリー・アーカイブページ */
	#page_header {
		padding-top: var(--header-fixed-height-mobile);
	}
}

/* -----------------------------------------------------------
ロゴ 1438 〜 1447行
-------------------------------------------------------------- */
#header_logo img {
	max-height: 48px;
}

/* -----------------------------------------------------------
▼  ブログアーカイブページ 1063〜1096行目
-------------------------------------------------------------- */
/* 「カテゴリー」「アーカイブ」ページ */
.archive {
	#header_desc { /* 916行 */
		line-height: 1.8;
		text-align: left;
		margin: 0 0 40px;
		font-weight: 600;
	}

	.blog_list.type1 {
		/* 見出し「行頭約物半角」 */
		.title span::first-letter {
			font-feature-settings: "palt";
		}

		.image_wrap { /* 509行 */
			position: relative;
		}

		.item { /* 1155行 */
			height: auto;
		}

		.image_wrap { /* 1087行 */
			border-radius: 8px 8px 0 0;
			overflow: hidden;
		}

		.content { /* 1087行 */
			height: 192px;
			border-radius: 0 0 8px 8px;
		}

		.original_post_category {
			display: flex;
			position: absolute;
			bottom: 0;
			left: 1px;
			bottom: 0;
			z-index: 100;

			.category { /* 1102行 */
				position: static;
				display: inline-block;
				width: auto;
				min-width: auto;
				height: auto;
				padding: 2px 1em;
				background: var(--c-tag--primary);
				color: #fff;
				font-size: 12px;
				line-height: 2;

				&:first-child:has(+ li) {
					padding-right: 0;
				}

				&:nth-child(n+2) {
					padding-left: 0;

					&::before {
						content: '・';
					}
				}
			}

			.title { /* 1093行 */
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
		}

		.original_post_content_meta {
			position: absolute;
			right: clamp(20px,5.6vw,30px);
			bottom: clamp(18px,5vw,20px);
			text-align: right;

			.original_post_date {
				display: block;
				right: 0;
				bottom: 18px;
				left: auto;
				font-weight: normal;
			}

			.original_post_author {
				font-weight: normal;
				font-size: 12px;
			}
		}
	}
}

/* ===========================================================
▼▼▼ フッター 1780〜1910行
-------------------------------------------------------------- */
/* ▶︎▶︎▶︎ custom & original footer post info */
#footer {
	background: #000;
	color: #fff;

	.original_footer_post_info {
		display: flex;
		gap: 40px;
		max-width: 1130px;
		margin: 0 auto;
		padding: 60px;

		.original_footer_post_info_panel {
			width: 55%;

			.footer_logo {
				display: block;
				width: 104px;
				margin: 0 auto 20px;
			}


			#footer_free_space { /* 1784行 */
				margin: 0;

				p {
					margin-bottom: 1em;
					font-size: 14px;
					line-height: 1.6;
				}
			}
		}

		/* フッターウィジェット 1852〜1857行 */
		#footer_widget { /* 1853行 */
			width: 45%;
			background: none;
			padding: 20px 0 20px 40px;
			border-left: 1px solid #fff;
		}

		#footer_widget_inner { /* 1854行 */
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			grid-template-rows: auto auto;
			grid-template-areas:
				"footer_widget_area01 footer_widget_area02"
				"footer_widget_area01 footer_widget_area03";
			gap: 10px;
			width: auto;
			margin: 0;
			padding: 0;
			font-size: 14px;

			> div:nth-of-type(1) {
				grid-area: footer_widget_area01;
			}

			> div:nth-of-type(2) {
				grid-area: footer_widget_area02;
			}

			> div:nth-of-type(3) {
				grid-area: footer_widget_area03;
				margin-top: 20px;

				.external_link {
					margin: 0;
					list-style: none inside;

					.external_link_item {
						margin: 0;
						padding: 0;
						line-height: 2;

						a {
							display: block;
							margin-left: 1em;
							text-decoration: none;
							font-size: 14px;
							color: #fff;
						}
					}
				}
			}

			.widget_content { /* 1855行 */
				width: auto;
				margin: 0;
				float: none;

				&:nth-child(3n) {
					margin-right: 0;
				}
			}

			.widget_headline { /* 1857行 */
				height: auto;
				margin: 0;
				padding: 0;
				border-left: none;
				font-weight: bold;
				font-size: 14px;
				line-height: 2;
			}

			/* デフォルトのナビ 2819〜2824行 */
			.widget_nav_menu ul li a { /* 2823行 */
				margin: 0 0 0 1em;
				padding: 0;
				line-height: 2;
				color: #fff;
			}
		}
	}
}

/* ページ上部へ戻るボタン 1833〜1849行 */
#return_top a { /* 1835行 */
	width: 48px;
	height: 48px;
	line-height: 48px;
}


/* ===========================================================
▼▼▼ オリジナル
-------------------------------------------------------------- */
/* -----------------------------------------------------------
▼ 基本設定
-------------------------------------------------------------- */
:root {
	/* コンテンツレイアウトマージン */
	--block-layout-spacer-res: clamp(40px,11.1vw,60px) 0  clamp(80px,22.2vw,100px);
	/* トップページ見出し下の余白（下のブロックから調整） */
	--block-layout-mt-spacer-res: clamp(24px,6.7vw,48px);

	/* TCDテーマ設定のメイン・サブカラー */
	--tcd-main-color: rgba(0,0,0,1);
	--tcd-sub-color: rgba(68,68,68,1);

	/* ブロックの枠線の色 */
	--u-border-light-gray: rgba(221,221,221,1);

	/* リンクなしカテゴリーの色 */
	--c-tag--primary: var(--tcd-main-color);
	--c-tag--secondary: var(--tcd-sub-color);
}

/* 見出し「行頭約物半角」 */
:is(h1, h2, h3, h4, h5, h6)::first-letter {
	font-feature-settings: "palt";
}

/* カテゴリー */
.category {
	font-weight: bold;
}


/* -----------------------------------------------------------
▼ オリジナル記事一覧（カテゴリーリンクなし）
-------------------------------------------------------------- */
/* トップページ「ぜひ読んでほしい記事」 */
/* 投稿記事ページ「関連記事」 */
.original_post_list {
	.original_post_item {
		position: relative;
		border: 1px solid var(--u-border-light-gray);
		border-radius: 8px;
		transition: all 0.35s ease;
		overflow: hidden;

		&:hover {
			transform: translateY(-3px);
			box-shadow: 0 0 30px 0 rgb(0 0 0 / 20%);
		}

		.original_post_link {
			.original_post_media {
				position: relative;
				overflow: hidden;

				.original_post_category {
					display: flex;
					position: absolute;
					left: 1px;
					bottom: 0;
					z-index: 1;

					li {
						display: inline-block;
						padding: 2px 1em;
						background: var(--c-tag--primary);
						color: #fff;
						font-size: 12px;
						line-height: 2;

						&:first-child:has(+ li) {
							padding-right: 0;
						}

						&:nth-child(n+2) {
							padding-left: 0;

							&::before {
								content: '・';
							}
						}
					}
				}

				> img {
					display: block;
					width: 100%;
					max-width: 100%;
					height: 160px;
					object-fit: cover;
					aspect-ratio: 16 / 9;
					transition: 0.75s ease;
				}
			}

			.original_post_title {
				margin-bottom: 20px;
				padding: 16px 16px 0;
				line-height: 1.6;

				&::first-letter {
					font-feature-settings: "palt";
				}
			}

			.original_post_contents {
				position: absolute;
				right: 0;
				bottom: 0;
				/* left: 0; */
				padding: 16px 16px 20px;
				text-align: right;

				.original_post_date {
					display: block;
				}

				.original_post_author {
					margin-top: 8px;
					font-size: 12px;
				}
			}

			&:hover {
				.original_post_media {
					.original_post_category {
						li {
							background: var(--c-tag--secondary);
						}
					}
				}

				img {
					transform: scale(1.2);
				}
			}
		}
	}
}

.original_post_list_none {
	margin-top: var(--block-layout-mt-spacer-res);
	text-align: center;
}

/* -----------------------------------------------------------
▼ オリジナルパネル
-------------------------------------------------------------- */
/* トップページ「コインオタクとは」「オンラインサロン」 */
.original_about_panel {
	margin-bottom: 100px;
	padding: min(16.7vw,80px) 0 min(22.2vw,120px);
	background: #000;
	color: #fff;

	.original_top_container {
		background: var(--tcd-main-color);
		color: #fff;

		.original_about_panel_contents {
			margin-top: var(--block-layout-mt-spacer-res);

			&.orignal_about_panel_contents_max {
				width: fit-content;
				max-width: 800px;
				margin: var(--block-layout-mt-spacer-res) auto 0;
				padding: 0 20px;
			}

			.original_about_panel_description {
				margin-top: 1em;
				line-height: 1.8;
			}
		}
	}
}

/* ボタン */
.original_button {
	width: fit-content;
	min-width: 200px;
	margin: clamp(60px,16.7vw,80px) auto 0;

	a {
		padding: 0 3em 0 2em;
		background: #3cab34;
		border-radius: 4px;
		line-height: 56px;

		span {
			color: #fff;
			font-weight: bold;
		}
	}
}

.original_about_panel_no_user_message {
	text-align: center;
}

/* 矢印リンク */
.original_link_arrow {
	display: block;
	position: relative;
	z-index: 100;
	transform: scale(0.9);
	transition: 0.2s ease;
	font-size: 110%;

	&::after {
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		margin-block: auto;
		content: '';
	}

	&::after {
		right: 1em;
		width: 10px;
		height: 10px;
		background: #fff;
		clip-path: polygon(0 0, 20% 0, 60% 50%, 20% 100%, 0 100%, 40% 50%);
	}

	&:hover,
	&:active {
		transform: scale(1);
	}
}

/* -----------------------------------------------------------
▼ オリジナルランキング
-------------------------------------------------------------- */
/* 「トップ」「サイドバー」共通表示 */
.original_rannking_post {
	margin-bottom: 100px;

	/* ランキングタブ */
	.original_ranking_tab_menu {
		margin: 20px 0;

		ol {
			display: flex;
			flex-wrap: nowrap;
			width: fit-content;
			margin: 0 auto;
			padding: 0;
			border: 1px solid #ddd;
			border-radius: 8px;
			list-style: none;
			overflow: hidden;

			li {
				margin:0 -1px 0 0;
				border-right: 1px solid #ddd;
				font-weight: 600;
				font-size: 13px;
				text-align: center;
				transition: all 0.2s ease;

				&:nth-last-of-type() {
					border-right: none;
				}

				a {
					display: block;
					width: fit-content;
					padding: 0 40px;
					height: 48px;
					line-height: 48px;
					text-align: center;

				}

				&:hover {
					a {
						background: #444;
						color: #fff;
					}
				}

				&.active {
					a {
						background: #000;
						color: #fff;
					}
				}
			}
		}
	}

	/* ランキング記事 */
	.original_ranking_content {
		.original_rank_panel {
			.original_ranking_list {
				.original_rank_item {
					position: relative;
					border: 1px solid #ddd;
					margin-bottom: 30px;
					border-radius: 8px;
					overflow: hidden;

					.original_rank-no {
						position: absolute;
						top: 0;
						left: 0;
						z-index: 10;
						width: 28px;
						height: 28px;
						background: #000;
						color: #fff;
						font-weight: bold;
						font-size: 13px;
						line-height: 28px;
						text-align: center;

						&.rank-no-1 {
							background: #E6B422;
						}

						&.rank-no-2 {
							background: #919191;
						}

						&.rank-no-3 {
							background: #B87333;
						}
					}

					.rank_list_link {
						display: grid;
						grid-template-columns: 300px 1fr;
						align-items: center;

						.rank_item_image {
							position: relative;
							height: 200px;
							overflow: hidden;

							.category {
								position: absolute;
								bottom: 0;
								left: 0;
								z-index: 100;
								width: auto;
								min-width: auto;
								height: auto;
								padding: 2px 1em;
								background: var(--c-tag--primary);
								color: #fff;
								font-size: 12px;
								line-height: 2;
							}

							img {
								width: 100%;
								height: inherit;
								object-fit: cover;
								object-position: center;
								transition: transform 0.75s ease;
							}
						}

						.rank_item_content {
							padding: 0 30px;

							.rank_item_title {
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 3;
								overflow: hidden;
								font-size: 18px;
								line-height: 1.6;
								font-feature-settings: "plat";
							}

							.rank_item_date {
								margin-top: 7px;
							}
						}

						&:hover {
							.rank_item_image {
								img {
									transform: scale(1.2);
								}
							}
						}
					}
				}

				.original_ranking_list_no_message {
					position: relative;
					width: 100%;
					min-width: 280px;
					margin: var(--block-layout-mt-spacer-res) auto 0;
					line-height: 1.6;
					text-align: center;
				}
			}
		}
	}
}

/* 「トップ」レスポンシブ対応 */
@media (width >= 900px) {
	.original_rannking_post.front_riginal_rannking_post {
		.original_ranking_content {
			.original_rank_panel {
				.original_ranking_list {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					column-gap: 40px;

					.original_rank_item {
						.rank_list_link {
							grid-template-columns: 45% 1fr;
						}
					}
				}

				.original_ranking_list_no_message {
					position: relative;
					width: calc(200% + 48px);
				}
			}
		}
	}
}

@media (width <= 750px) {
	.original_rannking_post.front_riginal_rannking_post {
		.original_ranking_content {
			.original_rank_panel {
				.original_ranking_list {
					.original_rank_item {
						.rank_list_link {
							grid-template-columns: 240px 1fr;

							.rank_item_image {
								height: 148px;
							}

							.rank_item_content {
								padding: 0 1em;

								.rank_item_title {
									font-size: 15px;
									line-height: 1.5;
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (width <= 550px) {
	.original_rannking_post.front_riginal_rannking_post {
		.original_ranking_content {
			.original_rank_panel {
				.original_ranking_list {
					.original_rank_item {
						.rank_list_link {
							grid-template-columns: 120px 1fr;

							.rank_item_image {
								height: 120px;
							}
						}
					}
				}
			}
		}
	}
}

/* 「サイドバー」表示 */
.original_rannking_post.side_original_rannking_post {
	margin-bottom: 40px;

	/* ランキングタブ */
	.original_ranking_tab_menu {
		margin: 0;

		ol {
			width: fit-content;
			margin: 0;
			border-bottom: none;
			border-radius: 8px 8px 0 0;

			li {
				border-bottom: none;

				a {
					box-sizing: border-box;
					width: 116px;
				}
			}
		}
	}

	/* ランキング記事 */
	.original_ranking_content {
		.original_rank_panel {
			.original_ranking_list {
				.original_rank_item {
					margin-bottom: 0;
					border-radius: 0;

					&:first-of-type {
						/* border-radius: 0 8px 0 0; */
						border-radius: 0;
					}

					&:nth-of-type(n+2) {
						border-top: none;
					}

					&:last-of-type {
						/* border-radius: 0 0 8px 8px; */
					}

					.rank_list_link {
						grid-template-columns: 100px 1fr;

						.rank_item_image {
							height: 100px;

							.category {
								display: none;
							}
						}

						.rank_item_content {
							padding: 0 18px;

							.rank_item_title {
								-webkit-line-clamp: 2;
								font-weight: 400;
								font-size: 14px;
								line-height: 1.6;
							}

							.rank_item_date {
								display: none;
								margin-top: 7px;
							}
						}
					}
				}
			}
		}
	}
}