/**
 *
 * page-comic.scss
 *
 */
/* ------------------------------------------------------------
 comic-container
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.comic-container {
		padding: 8.4rem 0 18rem ;
	}
}

@media screen and (max-width: 1023px) {
	.comic-container {
		padding: 3.1rem 0 9.4rem ;
	}
}

/* ------------------------------------------------------------
 comic-contents
------------------------------------------------------------ */
.comic-contents {
	max-width: 89.1rem ;
	width: 100%;
	margin-inline: auto;
}

/* ----------------------------------------
 comic-contents__list
---------------------------------------- */
.comic-contents__list {
	display: grid;
}

@media screen and (min-width: 1024px) {
	.comic-contents__list {
		--corner: 4.3rem ;
		gap: 1.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.comic-contents__list {
		--corner: 1.8rem ;
		gap: 1rem ;
		padding: 0 1rem ;
	}
}

/* ----------------------------------------
 comic-contents__footer
---------------------------------------- */
@media screen and (min-width: 1024px) {
	.comic-contents__footer {
		margin-top: 8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.comic-contents__footer {
		margin-top: 3.2rem ;
		padding-left: 3rem ;
		padding-right: 3rem ;
	}
}

.comic-contents__footer__inner {
	display: grid;
	place-items: center;
	text-align: center;
	border-bottom: var(--solid2);
}

@media screen and (min-width: 1024px) {
	.comic-contents__footer__inner {
		padding-bottom: 7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.comic-contents__footer__inner {
		padding-bottom: 3rem ;
	}
}

.comic-contents__footer__figure {
	border: var(--solid-current-bold);
}

@media screen and (min-width: 1024px) {
	.comic-contents__footer__figure {
		width: 8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.comic-contents__footer__figure {
		width: 5.5rem ;
	}
}

.comic-contents__footer__en {
	font-family: var(--font-sans-serif);
	padding-top: 0.1px;
	padding-bottom: 0.1px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.comic-contents__footer__en::before, .comic-contents__footer__en::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: inherit;
}

.comic-contents__footer__en::before {
	margin-top: var(--font-sans-serif-top);
}

.comic-contents__footer__en::after {
	margin-bottom: var(--font-sans-serif-bottom);
}

@media screen and (min-width: 1024px) {
	.comic-contents__footer__en {
		font-size: var(--font-size18);
		margin-top: 2.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.comic-contents__footer__en {
		font-size: var(--font-size12);
		margin-top: 0.9rem ;
	}
}

.comic-contents__footer__title {
	font-family: var(--font-gothic2);
	font-weight: 800;
	font-style: italic;
	letter-spacing: -0.02em;
}

@media screen and (min-width: 1024px) {
	.comic-contents__footer__title {
		font-size: var(--font-size27);
		margin-top: 1.3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.comic-contents__footer__title {
		font-size: var(--font-size18);
		margin-top: 0.8rem ;
	}
}

.comic-contents__footer__end {
	font-weight: 700;
	letter-spacing: 0.02em;
}

@media screen and (min-width: 1024px) {
	.comic-contents__footer__end {
		font-size: var(--font-size18);
		margin-top: 1.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.comic-contents__footer__end {
		font-size: var(--font-size12);
		margin-top: 1.8rem ;
	}
}

/* ------------------------------------------------------------
 comic-list
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.comic-list {
		margin-top: 16.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.comic-list {
		margin-top: 8.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.comic-list__inner {
		padding: 0 2rem ;
	}
}

/* ----------------------------------------
 comic-list__list
---------------------------------------- */
@media screen and (min-width: 1024px) {
	.comic-list__list {
		margin-top: 4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.comic-list__list {
		margin-top: 3.2rem ;
	}
}

.comic-list__item a {
	position: relative;
	display: flex;
	align-items: flex-start;
	height: 100%;
	background-color: var(--color-bg);
	transition: var(--transition-hover);
	transition-property: background-color;
}

@media screen and (min-width: 1024px) {
	.comic-list__item a {
		--corner: 0.8rem ;
		padding: 7.2rem 3.6rem 3rem 3.1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.comic-list__item a {
		--corner: 0.7rem ;
		padding: 2rem 4.3rem 2rem 2rem ;
	}
}

@media (hover: hover) {
	.comic-list__item a:hover {
		background-color: var(--color-main);
	}
}

/* ---------- comic-list__item__figure ---------- */
.comic-list__item__figure {
	border: var(--solid-current-bold);
}

@media screen and (min-width: 1024px) {
	.comic-list__item__figure {
		width: 9.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.comic-list__item__figure {
		width: 8.4rem ;
	}
}

/* ---------- comic-list__item__contents ---------- */
.comic-list__item__contents {
	flex: 1;
}

@media screen and (min-width: 1024px) {
	.comic-list__item__contents {
		margin-left: 2.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.comic-list__item__contents {
		margin-left: 1.6rem ;
	}
}

@media screen and (min-width: 1024px) {
	.comic-list__item__title {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		padding: 2.6rem 3.3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.comic-list__item__title {
		margin-bottom: 0.8rem ;
	}
}

@media screen and (min-width: 1024px) {
	.comic-list__item__button {
		margin-top: 1.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.comic-list__item__button {
		display: none;
	}
}

@media screen and (min-width: 1024px) {
	.comic-list__item__arrow {
		display: none;
	}
}

@media screen and (max-width: 1023px) {
	.comic-list__item__arrow {
		position: absolute;
		top: 1.7rem ;
		right: 1.7rem ;
	}
}