@charset "utf-8";
/* ===========================================================
▼ トップページのみ適用CSS
-------------------------------------------------------------- */

/* -----------------------------------------------------------
▼ レイアウト 137〜150行
-------------------------------------------------------------- */
/* トップカスタムレイアウト */
.home {
	background: #fefefe;

	#main_contents { /* 139行 */
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}

	/* トップ専用レイアウト追加（背景有り用） */
	.original_top_container {
		max-width: 1130px;
		margin: 0 auto;
		overflow: hidden;

		&#original_recommend_tag{
			max-width: 1320px;
			margin-bottom: 20px;
			padding: 0 50px;
		}
	}

	#main_col { /* 144行 */
		width: 100%;
		margin: 0;
	}

	#original_recommend_tag_post {
		margin: var(--block-layout-spacer-res);
	}
}

/* 見出し */
.c-heading {
	font-size: clamp(24px,6.7vw,32px);
	line-height: 1.4;
	text-align: center;

	> .c-heading_ja {
		font-size: 88%;
		vertical-align: text-top;
	}

	> .c-heading_sub {
		display: block;
		font-size: clamp(14px,3.8vw,16px);

		&::before,
		&::after {
			content: '--';
		}

		&::before {
			padding-right: 0.5em;
		}

		&::after {
			padding-left: 0.5em;
		}
	}
}

/* 日付カスタム */
.date {
	position:relative;
	padding:0 0 0 20px;
	color:#999;
	font-size: 14px;

	&::before {
		content:'\e912';
		position: absolute;
		top: 1px;
		left: 0;
		font-size: 13px;
		font-family: 'footer_bar';
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

/* -----------------------------------------------------------
▼ メインビジュアル（トップスライダー） 670〜614行
-------------------------------------------------------------- */
.home {
	#header_slider_wrap,
	#header_slider,
	#header_slider .item {
		height: auto;
	}

	#header_slider_wrap {
		max-width: 1440px;
		margin: 0 auto;
	}

	#header_slider .item {
		aspect-ratio: 72/25;
	}

	#header_slider .bg_image {
		background-size: contain !important;
		border-radius: 10px;
		aspect-ratio: 16/9;
	}
}

/* -----------------------------------------------------------
▼ オリジナル「ぜひ読んでほしい記事」
-------------------------------------------------------------- */
/* original_recommend_tag_post */
#original_recommend_tag {
	.original_recommend_tag_post {
		display: flex;
		gap: 28px;
		width: 100%;
		min-width: 0;
		padding: 0 0 16px;
		margin-top: 28px;
		overflow-x: auto;
		scroll-snap-type: x mandatory; /* 横方向に強制的にスナップさせる */
        -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにする */

		.original_recommend_tag_post_item {
			flex: 0 0 calc(100% / 1.2);
			max-width: 304px;
			padding-bottom: 56px;
			background: #fff;
			scroll-snap-align: start; /* 各アイテムの先頭で止まる */
            scroll-snap-stop: always; /* スワイプした時に1つずつ確実に止める（任意） */

			.original_post_link {
				.original_post_media {
					> img {
						height: 200px;
					}
				}
			}

			.original_post_title {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
				overflow: hidden;
				font-size: 18px;
			}
		}
	}

	.original_button {
		margin-top: clamp(24px,6.7vw,32px);

		a {
			background: #000;
		}
	}
}

/* -----------------------------------------------------------
▼ バナーエリア 892〜910行
-------------------------------------------------------------- */
.home {
	.banner_area .banner_area_inner { /* 894行 */
		width: 100%;
		max-width: 1130px;
	}

	.banner_area .banner_area_item { /* 895行 */
		min-width: 400px;
		max-width: 80%;
	}

	.banner_area .banner_area_item img { /* 903行 */
		transform: scale(0.95);
	}

	#index_banner_area { /* 905行 */
		margin: var(--block-layout-spacer-res);

		.animate_image:hover img { /* インライン上書き */
			transform: scale(1);
		}
	}
}

/* -----------------------------------------------------------
▼ オリジナル「コインオタクとは」
-------------------------------------------------------------- */
#original_coin-otaku_about {
	.original_about_panel_contents {
		.original_coin-otaku_about_image {
			display: block;
			width: 120px;
			margin: var(--block-layout-mt-spacer-res) auto 0;
		}

		.original_coin-otaku_about_description {
			margin-top: var(--block-layout-mt-spacer-res);
		}
	}
}

/* -----------------------------------------------------------
▼ オリジナル「COIN OTAKUの専門家」
-------------------------------------------------------------- */
#original_coin-otaku-expert_about {
	.original_about_card {
		padding: min(10vw,48px) min(5.6vw,40px) min(11.1vw,60px);
		background: #fff;
		border-radius: 16px;
		color: #000;

		&:nth-of-type(n+2) {
			margin-top: var(--block-layout-mt-spacer-res);
		}

		.original_author_profile {
			display: grid;
			gap: 32px;
			grid-template-columns: auto 1fr;

			.original_author_info {
				min-width: 160px;
				font-size: 16px;
				text-align: center;

				.original_avatar_image {
					display: block;
					width: 96px;
					height: 96px;
					margin: 0 auto;
					border-radius: 9999px;
					overflow: hidden;
				}

				.original_author_name {
					margin-top: 8px;
					font-weight: 600;
					line-height: 1.4;
				}

				.original_author_kana {
					display: block;
					color: #888;
					font-size: 12px;
				}
			}

			.original_autor_detail {
				margin-top: 20px;

				.original_author_description {
					line-height: 1.6;
				}
			}
		}

		/* プラグイン「YouTube Feeds Lite」上書き（優先度上げる） */
		#youtube-1.original_author_youtube,
		#youtube-6.original_author_youtube,
		#youtube-7.original_author_youtube {
			margin-top: 48px;

			.original_author_youtube_title {
				font-weight: bold;

				.c-heading_sub {
					font-size: clamp(18px,5vw,20px);
				}
			}

			.sby_items_wrap {
				display: grid;
				gap: 20px;
				grid-template-columns: repeat(4, minmax(0, 1fr));
				width: 100%;
				padding: 8px 0 0 0 !important;

				.sby_item {
					width: 100%;
				}
			}

			/* プラグイン「YouTube Feeds Lite」 再生ボタンの色上書き　sb-youtube-common.css */
			& [id^="sb_youtube_"].sb_youtube svg:not(:root).svg-inline--fa,
			& [id^="sb_youtube_"].sb_youtube_lightbox svg:not(:root).svg-inline--fa {
				color: #f00;
			}
		}
	}
}

@media (width <= 880px) {
	#original_coin-otaku-expert_about {
		.original_about_card {
			.original_author_profile {
				grid-template-columns: 1fr;

				.original_autor_detail {
					margin-top: 0;
				}
			}

			#youtube-1.original_author_youtube,
			#youtube-6.original_author_youtube,
			#youtube-7.original_author_youtube {
				.sby_items_wrap {
					grid-template-columns: repeat(2, minmax(0, 1fr));
				}
			}
		}
	}
}

@media (width <= 600px) {
	#original_coin-otaku-expert_about {
		.original_about_card {
			#youtube-1.original_author_youtube,
			#youtube-6.original_author_youtube,
			#youtube-7.original_author_youtube {
				.sby_items_wrap {
					grid-template-columns: repeat(1, minmax(0, 1fr));
				}
			}
		}
	}
}


/* -----------------------------------------------------------
▼ タブ一覧（カテゴリー別の記事） 711〜816行
-------------------------------------------------------------- */
/* タブスクロール */
.original_scroll-container {
	display: flex;
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #000 #e0e0e0;

	&::-webkit-scrollbar {
		display: block;
		height: 2px;
	}

	&::-webkit-scrollbar-track {
		background-color: #fff;
		/* border-radius: 10px; */
	}

	&::-webkit-scrollbar-thumb {
		background-color: #000;
		/* border-radius: 10px; */
		border: 1px solid #e0e0e0;
	}

	&::-webkit-scrollbar-thumb:window-inactive {
		background-color: #000;
	}
}

.home {
	#index_tab_post_list {
		margin-bottom: 100px;
	}

	#index_tab { /* 716行 */
		height: auto;
		margin: 20px 0;
	}

	#index_tab ol { /* 717行 */
		flex-wrap: nowrap;
		/* 親テーマのJSによる style属性（幅・余白）を強制的に上書き：「functions」→ head.php 1144〜1145行目 */
		width: auto !important;
		padding-right: 0 !important;
		overflow-x: scroll;
		overflow-y: hidden;
	}

	#index_tab li { /* 722行 */
		flex: none;
		font-size: 13px;
		line-height: 1.4;
		overflow: hidden;

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

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

	#index_tab a { /* 727行 */
		width: fit-content;
		padding: 0 27px;
		height: 48px;
		line-height: 48px;
		text-align: center;
	}

	#index_tab_post_list .post_list.type2 .image_wrap { /* 790行 */
		border-radius: 8px 0 0 8px;
	}

	#index_tab_post_list .post_list.type2 .content { /* 792行 */
		border-radius: 0 8px 8px 0;
	}

	#index_tab_post_list .post_list.type2 .category { /* 800行 */
		top: auto;
		bottom: 0;
		min-width: auto;
		height: auto;
		padding: 4px 1em;
		border-radius: 0 0 0 8px;
		font-weight: bold;
		font-size: 12px;
		line-height: 1.5;
	}

	#index_tab_post_list .post_list.type2 .title span { /* 809行 */
		line-height: 1.5;
		font-feature-settings: "palt";
	}
}


/* -----------------------------------------------------------
▼ オリジナル「オンラインサロン」
-------------------------------------------------------------- */
#original_online-salon_about {
	margin-bottom: 20px;

	.original_about_panel_contents {
		.original_online-salon_about_image {
			max-width: 100%;
			border-radius: 8px;
		}

		.original_online-salon_about_description {
			margin-top: var(--block-layout-mt-spacer-res);
		}
	}
}