/* RAVONOTE のデザイン */
:root {
	--ravo-ink: #1c1a24;
	--ravo-sub: #55506a;
	--ravo-main: #5a23d6;
	--ravo-bg: #f4f3f7;
	--ravo-line: #e4e2ea;
	--ravo-line2: #eceaf0;
	--color_main: #5a23d6;
	--color_text: #1c1a24;
	--color_link: #5a23d6;
	--color_bg: #f4f3f7;
}

body,
#body_wrap {
	background: var(--ravo-bg);
	color: var(--ravo-ink);
	font-family: 'Zen Kaku Gothic New', sans-serif;
}

/* ヘッダー */
.l-header.ravo-header {
	position: relative;
	background: #fff;
	box-shadow: none;
	color: var(--ravo-ink);
}

.ravo-header__top {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1200px;
	min-height: 64px;
	margin: 0 auto;
	padding: 6px 16px;
	box-sizing: border-box;
}

.ravo-header__logoWrap {
	margin: 0;
	padding: 0;
	background: none;
	line-height: 0;
}

.ravo-header__logo {
	display: block;
	line-height: 0;
}

.ravo-header__tagline {
	color: var(--ravo-sub);
	font-size: 15px;
}

.ravo-header__search {
	flex: 0 1 300px;
	margin-left: auto;
}

.ravo-header__search input {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 14px;
	border: 0;
	border-radius: 8px;
	background: var(--ravo-bg);
	font-size: 15px;
}

.ravo-header__nav {
	border-top: 1px solid var(--ravo-line);
	border-bottom: 1px solid var(--ravo-line);
	background: #fff;
}

.ravo-header__navInner {
	display: flex;
	flex-wrap: wrap;
	gap: 0 28px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}

.ravo-header__navInner a {
	display: flex;
	align-items: center;
	min-height: 46px;
	color: var(--ravo-ink);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.ravo-header__navInner a:hover,
.ravo-home a:hover {
	color: var(--ravo-main);
}

/* トップページ */
.home #content,
.home .l-content.l-container {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
}

.ravo-home {
	width: 100%;
	line-height: 1.6;
}

.ravo-home a {
	color: inherit;
	text-decoration: none;
}

.ravo-home h1,
.ravo-home h2,
.ravo-home h3,
.ravo-home h4,
.ravo-home p {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
}

.ravo-home h2::before,
.ravo-home h2::after,
.ravo-home h3::before,
.ravo-home h3::after {
	display: none;
}

.ravo-home img {
	display: block;
	width: 100%;
	border-radius: 8px;
	background: var(--ravo-bg);
	box-shadow: 0 0 0 1px var(--ravo-line);
	object-fit: cover;
	aspect-ratio: 1200 / 630;
}

.ravo-two {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ravo-meta {
	color: var(--ravo-sub) !important;
	font-size: 14px;
}

.ravo-tag {
	color: var(--ravo-main) !important;
	font-size: 14px;
	font-weight: 700;
}

.ravo-band {
	padding: 56px 16px;
}

.ravo-band--first {
	padding-top: 32px;
}

.ravo-band--white {
	background: #fff;
}

.ravo-band--pale {
	background: var(--ravo-bg);
}

.ravo-band--ink {
	background: var(--ravo-ink);
	color: #fff;
}

.ravo-band__inner {
	max-width: 1168px;
	margin: 0 auto;
}

.ravo-head {
	margin-bottom: 28px;
}

.ravo-head h2 {
	font-size: 30px;
	font-weight: 900;
	line-height: 1.3;
}

.ravo-head p {
	margin-top: 6px;
	font-size: 16px;
	opacity: 0.8;
}

/* 最初の画面 */
.ravo-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 48px;
}

.ravo-lead .ravo-meta {
	margin-top: 16px;
}

.ravo-lead .ravo-tag {
	margin-right: 1em;
}

.ravo-lead h2 {
	margin-top: 6px;
	font-size: 28px;
	font-weight: 900;
	line-height: 1.45;
}

.ravo-lead:hover h2,
.ravo-pick:hover h3,
.ravo-item:hover h3,
.ravo-genre__lead:hover h4,
.ravo-genre__item:hover h4 {
	color: var(--ravo-main);
}

.ravo-rank {
	display: flex;
	flex-direction: column;
}

.ravo-rank h2 {
	padding-bottom: 12px;
	border-bottom: 3px solid var(--ravo-ink);
	font-size: 20px;
	font-weight: 900;
}

.ravo-rank ol {
	display: flex;
	flex: 1;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ravo-rank li {
	display: flex;
	flex: 1;
	gap: 14px;
	align-items: center;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--ravo-line2);
}

.ravo-rank a {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}

.ravo-rank__no {
	flex: 0 0 26px;
	color: var(--ravo-sub);
	font-size: 26px;
	font-weight: 900;
	line-height: 1;
}

.ravo-rank__no.is-top {
	color: var(--ravo-main);
}

.ravo-picks {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	margin-top: 44px;
	padding-top: 32px;
	border-top: 1px solid var(--ravo-line);
}

.ravo-pick .ravo-tag {
	margin-top: 12px;
}

.ravo-pick h3 {
	margin-top: 2px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

/* まとめて読む */
.ravo-series {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}

.ravo-serie {
	display: block;
}

.ravo-serie:hover h3 {
	color: #ffc400;
}

.ravo-serie__count {
	margin-top: 14px !important;
	color: #ffc400 !important;
	font-size: 14px;
	font-weight: 700;
}

.ravo-serie h3 {
	margin-top: 2px;
	font-size: 20px;
	font-weight: 900;
	line-height: 1.4;
}

.ravo-serie__text {
	margin-top: 6px !important;
	font-size: 15px;
	line-height: 1.6;
	opacity: 0.8;
}

/* 記事を探す */
.ravo-tabs__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0 32px;
	border-bottom: 1px solid var(--ravo-line);
}

.ravo-tabs__bar button {
	min-height: 48px;
	padding: 0;
	border: 0;
	border-bottom: 3px solid transparent;
	background: transparent;
	color: var(--ravo-sub);
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.ravo-tabs__bar button[aria-selected="true"] {
	border-bottom-color: var(--ravo-main);
	color: var(--ravo-ink);
}

.ravo-tabs__panel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 48px;
}

.ravo-tabs__panel[hidden] {
	display: none;
}

.ravo-item {
	display: flex;
	gap: 18px;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid var(--ravo-line2);
}

.ravo-home .ravo-item img {
	flex: 0 0 180px;
	width: 180px;
}

.ravo-item > div {
	min-width: 0;
}

.ravo-item h3 {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}

.ravo-item .ravo-meta {
	margin-top: 6px;
}

/* ジャンルから読む */
.ravo-genres {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 36px;
}

.ravo-genre__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 16px !important;
	padding-top: 12px !important;
	border-top: 4px solid var(--ravo-genre) !important;
	font-size: 20px;
	font-weight: 900;
}

.ravo-genre__head a {
	color: var(--ravo-sub) !important;
	font-size: 14px;
	font-weight: 500;
}

.ravo-genre__lead {
	display: block;
	margin-bottom: 20px;
}

.ravo-genre__lead h4 {
	margin-top: 12px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}

.ravo-genre__item {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-top: 14px;
}

.ravo-home .ravo-genre__item img {
	flex: 0 0 96px;
	width: 96px;
	border-radius: 6px;
}

.ravo-genre__item h4 {
	min-width: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
}

/* サイドバー */
.l-sidebar .ravo-rank,
.ravo-box {
	padding: 18px 20px;
	border-radius: 12px;
	background: #fff;
}

.l-sidebar .ravo-rank a {
	font-size: 15px;
}

.l-sidebar .ravo-rank__no {
	flex-basis: 20px;
	font-size: 20px;
}

.ravo-box__head {
	margin-bottom: 4px !important;
	font-size: 18px;
	font-weight: 900;
}

.ravo-line {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--ravo-line2);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
}

/* 記事・固定ページ・一覧 */
.single .l-mainContent__inner,
.page .l-mainContent__inner,
.archive .l-mainContent__inner,
.search .l-mainContent__inner {
	padding: 28px 32px 32px;
	border-radius: 12px;
	background: #fff;
}

.mg-article-hero {
	flex: 0 0 100%;
	overflow: hidden;
	width: 100%;
	margin-bottom: 24px;
	border-radius: 12px;
	background: #fff;
}

.mg-article-hero__img {
	height: 400px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.mg-article-hero__overlay {
	display: none;
}

.mg-article__title,
.c-postTitle__ttl,
.c-pageTitle {
	font-size: 28px;
	font-weight: 900;
	line-height: 1.5;
}

.mg-article__title {
	margin: 8px 0 12px;
}

.mg-article__meta-top {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	color: var(--ravo-sub);
	font-size: 15px;
}

.mg-label {
	color: var(--ravo-main);
	font-weight: 700;
	text-decoration: none;
}

.mg-article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 14px;
}

.mg-tag {
	color: var(--ravo-sub);
	text-decoration: none;
}

.mg-article__rule {
	height: 1px;
	margin: 16px 0 24px;
	background: var(--ravo-line);
}

@media ( max-width: 599px ) {
	.mg-article-hero__img {
		height: 200px;
	}

	.mg-article__title,
	.c-postTitle__ttl,
	.c-pageTitle {
		font-size: 22px;
	}
}

.post_content {
	font-size: 17px;
	line-height: 2;
}

.post_content h2 {
	padding: 0 0 8px;
	border: 0;
	border-bottom: 3px solid var(--ravo-main);
	border-radius: 0;
	background: none;
	color: var(--ravo-ink);
	font-size: 23px;
	font-weight: 900;
	line-height: 1.5;
}

.post_content h2::before,
.post_content h2::after {
	display: none;
}

.post_content h3 {
	font-size: 20px;
	font-weight: 900;
}

.p-toc {
	border: 1px solid var(--ravo-line);
	border-radius: 10px;
}

.l-sidebar .c-widget {
	padding: 16px 20px;
	border-radius: 12px;
	background: #fff;
}

.l-sidebar .c-widget__title {
	padding: 0 0 6px;
	background: none;
	color: var(--ravo-ink);
	font-size: 18px;
	font-weight: 900;
}

.l-sidebar .c-widget__title::before,
.l-sidebar .c-widget__title::after {
	display: none;
}

.p-postList__title {
	font-weight: 500;
}

/* パソコンの記事・固定ページ・一覧の枠組み */
@media ( min-width: 960px ) {
	.l-content.l-container,
	.p-breadcrumb__list.l-container {
		box-sizing: border-box;
		max-width: 1200px;
		padding-right: 16px;
		padding-left: 16px;
	}

	.l-content.l-container {
		justify-content: space-between;
		margin-bottom: 48px;
		padding-top: 24px;
	}

	.-sidebar-on #main_content {
		order: 1;
		width: calc( 100% - 340px );
	}

	.-sidebar-on #sidebar {
		display: flex;
		flex-direction: column;
		order: 2;
		gap: 20px;
		width: 320px;
	}
}

.l-sidebar a {
	color: var( --ravo-ink );
	text-decoration: none;
}

.l-sidebar a:hover {
	color: var( --ravo-main );
}

.l-sidebar h2 {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.l-sidebar h2::before,
.l-sidebar h2::after {
	display: none;
}

.l-sidebar .ravo-rank {
	flex: 0 0 auto;
}

/* フッター */
.l-footer {
	background: var(--ravo-ink);
	color: #fff;
}

.l-footer a {
	color: #fff;
}

.ravo-footer__logo {
	display: block;
	width: 116px;
	margin: 0 auto 12px;
	line-height: 0;
}

/* スマホ */
@media ( max-width: 959px ) {
	.ravo-header__tagline,
	.ravo-header__search {
		display: none;
	}

	.ravo-header__top {
		justify-content: space-between;
	}

	.ravo-header__navInner {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 0 20px;
	}

	.ravo-header__navInner a {
		flex: 0 0 auto;
	}

	.ravo-band {
		padding: 36px 16px;
	}

	.ravo-head {
		margin-bottom: 20px;
	}

	.ravo-head h2 {
		font-size: 24px;
	}

	.ravo-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.ravo-lead h2 {
		font-size: 22px;
	}

	.ravo-picks,
	.ravo-series {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
	}

	.ravo-picks {
		margin-top: 32px;
		padding-top: 24px;
	}

	.ravo-tabs__bar {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 0 20px;
	}

	.ravo-tabs__bar button {
		flex: 0 0 auto;
	}

	.ravo-tabs__panel,
	.ravo-genres {
		grid-template-columns: minmax(0, 1fr);
	}

	.ravo-genres {
		gap: 40px;
	}

	.ravo-item {
		padding: 14px 0;
	}

	.ravo-home .ravo-item img {
		flex-basis: 120px;
		width: 120px;
	}

	.ravo-item h3 {
		font-size: 15px;
	}

	.single .l-mainContent__inner,
	.page .l-mainContent__inner,
	.archive .l-mainContent__inner,
	.search .l-mainContent__inner {
		padding: 20px 16px 24px;
	}
}