@charset "UTF-8";
/**
 *
 * page-cross-talk.scss
 *
 * CSS名は、cross-talkを省略して「xtalk」とする。
 *
 */
.xtalk-main {
	background-color: var(--color-bg10);
}

@media screen and (min-width: 1024px) {
	.xtalk-main {
		padding-bottom: 18rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-main {
		padding-bottom: 24rem ;
	}
}

/* ------------------------------------------------------------
 xtalk-article
------------------------------------------------------------ */
/* ----------------------------------------
 xtalk-article__hero
---------------------------------------- */
.xtalk-article__hero {
	position: relative;
	z-index: 0;
}

@media screen and (min-width: 1024px) {
	.xtalk-article__hero {
		min-height: var(--min-wh);
		max-height: var(--max-wh);
		height: var(--wh);
	}
}

.xtalk-article__hero__inner {
	position: relative;
	width: 100%;
	height: 100%;
}

@media screen and (min-width: 1024px) {
	.xtalk-article__hero__inner {
		display: flex;
		align-items: flex-end;
		-webkit-mask-image: url("../img/common/mask_symbol.webp");
		mask-image: url("../img/common/mask_symbol.webp");
		-webkit-mask-size: 127.37269% 218.44226%;
		mask-size: 127.37269% 218.44226%;
		-webkit-mask-position: 43.7% 50%;
		mask-position: 43.7% 50%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}
}

/* ---------- xtalk-article__hero__illust ---------- */
.xtalk-article__hero__illust {
	position: absolute;
	z-index: 2;
}

@media screen and (min-width: 1024px) {
	.xtalk-article__hero__illust {
		right: 11.2rem ;
		bottom: -4.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__hero__illust {
		right: var(--outside);
		bottom: -6.6rem ;
	}
}

.xtalk-article__hero__illust__balloon {
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url("../img/common/balloon.svg");
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--color-txt2);
	text-align: center;
	font-weight: 700;
	line-height: var(--line-height-noraml);
}

@media screen and (min-width: 1024px) {
	.xtalk-article__hero__illust__balloon {
		width: 29rem ;
		height: 14.5rem ;
		font-size: 3rem ;
		padding-left: 1rem ;
		padding-bottom: 2.1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__hero__illust__balloon {
		width: 13.3rem ;
		height: 6.5rem ;
		font-size: 1.5rem ;
		padding-bottom: 0.7rem ;
	}
}

.xtalk-article__hero__illust__balloon.-small {
	letter-spacing: var(--letter-spacing-_xs);
}

@media screen and (min-width: 1024px) {
	.xtalk-article__hero__illust__balloon.-small {
		font-size: 2.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__hero__illust__balloon.-small {
		font-size: 1.3rem ;
	}
}

.xtalk-article__hero__illust__character {
	margin-left: auto;
}

@media screen and (min-width: 1024px) {
	.xtalk-article__hero__illust__character {
		width: 18.2rem ;
		margin-top: -1.8rem ;
		margin-right: 3.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__hero__illust__character {
		width: 8.3rem ;
		margin-top: -0.9rem ;
		margin-right: 1.7rem ;
	}
}

/* ---------- xtalk-article__hero__figure ---------- */
@media screen and (min-width: 1024px) {
	.xtalk-article__hero__figure {
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__hero__figure {
		position: relative;
	}
}

@media screen and (min-width: 1024px) {
	.xtalk-article__hero__figure figure {
		width: 100%;
		height: 100%;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__hero__figure figure {
		max-height: 56rem ;
		-webkit-mask-image: url("../img/common/mask_symbol2.webp");
		mask-image: url("../img/common/mask_symbol2.webp");
		-webkit-mask-size: 135.89744% 147%;
		mask-size: 135.89744% 147%;
		-webkit-mask-position: 54% 50%;
		mask-position: 54% 50%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}
	.xtalk-article__hero__figure figure::before {
		content: '';
		display: block;
		padding-top: 102.5641%;
	}
}

/* ---------- xtalk-article__hero__contents ---------- */
.xtalk-article__hero__contents {
	position: relative;
	z-index: 2;
	width: 100%;
}

@media screen and (min-width: 1024px) {
	.xtalk-article__hero__contents {
		background: var(--color-gradation4);
		color: var(--color-txt2);
		padding: 10rem 6rem 8.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__hero__contents {
		padding: 4rem var(--outside) 0;
	}
}

.xtalk-article__hero__title {
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	border-bottom: var(--solid-small-current2);
	font-weight: 600;
	line-height: var(--line-height-noraml);
}

@media screen and (min-width: 1024px) {
	.xtalk-article__hero__title {
		font-size: var(--font-size24);
		padding-bottom: 1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__hero__title {
		font-size: var(--font-size16);
		letter-spacing: var(--letter-spacing-_rg);
		padding-bottom: 0.5rem ;
	}
}

.xtalk-article__hero__catch {
	font-weight: 600;
	letter-spacing: var(--letter-spacing-_rg);
}

@media screen and (min-width: 1024px) {
	.xtalk-article__hero__catch {
		font-size: 3.7037vw;
		line-height: calc( 90 / 64 * 1em);
		margin-top: 3.5rem ;
	}
}

@media screen and (min-width: 1728px) {
	.xtalk-article__hero__catch {
		font-size: var(--font-size64);
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__hero__catch {
		font-size: var(--font-size32);
		line-height: calc( 46 / 32 * 1em);
		margin-top: 1.8rem ;
	}
}

/* ----------------------------------------
 xtalk-article__member
---------------------------------------- */
.xtalk-article__member {
	position: relative;
	z-index: 10;
}

@media screen and (min-width: 1024px) {
	.xtalk-article__member {
		margin-top: 12.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__member {
		margin-top: 8.5rem ;
	}
}

/* ---------- xtalk-article__member__list ---------- */
.xtalk-article__member__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 4.4rem ;
}

@media screen and (min-width: 1024px) {
	.xtalk-article__member__list {
		gap: 2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__member__list {
		-webkit-column-gap: 1rem ;
		-moz-column-gap: 1rem ;
		column-gap: 1rem ;
		row-gap: 2rem ;
	}
}

.xtalk-article__member__item {
	border: var(--solid-current);
	background-color: var(--color-bg);
}

@media screen and (min-width: 1024px) {
	.xtalk-article__member__item {
		width: 25.1rem ;
		height: 34.5rem ;
		padding: 4rem 2rem 2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__member__item {
		width: 16.9rem ;
		height: 27rem ;
		padding: 3rem 0.5rem 2rem ;
	}
}

/* ----- xtalk-article__member__item__num ----- */
.xtalk-article__member__item__num {
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background-color: var(--color-bg2);
	color: var(--color-txt2);
	font-family: var(--font-sans-serif);
	font-weight: 600;
	font-size: var(--font-size16);
	letter-spacing: var(--letter-spacing-_rg);
	padding: 0.4rem 1.1rem ;
	white-space: nowrap;
}

/* ----- xtalk-article__member__item__figure ----- */
.xtalk-article__member__item__figure {
	margin-inline: auto;
}

@media screen and (min-width: 1024px) {
	.xtalk-article__member__item__figure {
		width: 17.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__member__item__figure {
		width: 12.9rem ;
	}
}

/* ----- xtalk-article__member__item__name ----- */
.xtalk-article__member__item__name {
	text-align: center;
	font-family: var(--font-sans-serif);
	letter-spacing: var(--letter-spacing-_rg);
}

@media screen and (min-width: 1024px) {
	.xtalk-article__member__item__name {
		font-size: var(--font-size30);
		margin-top: 2.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__member__item__name {
		font-size: var(--font-size24);
		margin-top: 1.8rem ;
	}
}

/* ----- xtalk-article__member__item__position ----- */
.xtalk-article__member__item__position {
	text-align: center;
	letter-spacing: var(--letter-spacing-_xs);
}

@media screen and (min-width: 1024px) {
	.xtalk-article__member__item__position {
		font-size: var(--font-size13);
		line-height: calc( 16 / 13 * 1em);
		margin-top: 1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__member__item__position {
		font-size: var(--font-size12);
		font-size: 1.2rem ;
		line-height: calc( 16 / 12 * 1em);
		margin-top: 0.6rem ;
	}
}

/* ----------------------------------------
 xtalk-article__looptxt
---------------------------------------- */
.xtalk-article__looptxt {
	position: relative;
	z-index: 0;
}

@media screen and (min-width: 1024px) {
	.xtalk-article__looptxt {
		margin-top: -10.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__looptxt {
		margin-top: -2.9rem ;
	}
}

.xtalk-article__looptxt__txt {
	color: var(--color-txt2);
	text-transform: uppercase;
	font-family: var(--font-sans-serif);
	font-weight: 600;
	opacity: .5;
	padding-left: 0.5em;
}

@media screen and (min-width: 1024px) {
	.xtalk-article__looptxt__txt {
		font-size: var(--font-size160);
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__looptxt__txt {
		font-size: var(--font-size96);
	}
}

/* ----------------------------------------
 xtalk-article__contents
---------------------------------------- */
@media screen and (min-width: 1024px) {
	.xtalk-article__contents {
		margin-top: 10.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__contents {
		margin-top: 9.4rem ;
	}
}

@media screen and (min-width: 1024px) {
	.xtalk-article__contents + .xtalk-article__contents {
		margin-top: 16rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__contents + .xtalk-article__contents {
		margin-top: 8rem ;
	}
}

/* ---------- xtalk-article__contents__figure ---------- */
.xtalk-article__contents__figure {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.xtalk-article__contents__figure {
		max-height: 96rem ;
		margin-bottom: 10.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__contents__figure {
		max-height: 48rem ;
		margin-bottom: 4rem ;
	}
}

.xtalk-article__contents__figure::after {
	content: '';
	display: block;
}

@media screen and (min-width: 1024px) {
	.xtalk-article__contents__figure::after {
		padding-top: 49.75124%;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__contents__figure::after {
		padding-top: 85.71429%;
	}
}

/* ---------- xtalk-article__contents__catch ---------- */
.xtalk-article__contents__catch {
	display: grid;
	gap: var(--line-gap);
}

@media screen and (min-width: 1024px) {
	.xtalk-article__contents__catch {
		--line-gap: 1rem ;
		margin-bottom: 8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__contents__catch {
		--line-gap: 0.5rem ;
		margin-bottom: 4rem ;
	}
	.xtalk-article__contents__catch.-small span {
		letter-spacing: var(--letter-spacing-_rg);
	}
	.xtalk-article__contents__catch.-small2 span {
		letter-spacing: var(--letter-spacing-_xs);
	}
}

@media screen and (min-width: 1024px) {
	.xtalk-article__contents__catch span.-pc {
		display: flex;
		flex-wrap: wrap;
		row-gap: var(--line-gap);
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__contents__catch span.-pc {
		display: grid;
		gap: var(--line-gap);
	}
}

.xtalk-article__contents__catch span.-sp {
	display: inline-block;
	background-color: var(--color-bg2);
	color: var(--color-txt2);
	font-weight: 700;
	white-space: nowrap;
}

@media screen and (min-width: 1024px) {
	.xtalk-article__contents__catch span.-sp {
		font-size: 2.77778vw;
		letter-spacing: var(--letter-spacing-_rg);
		padding: 1rem 0 1.4rem ;
	}
	.xtalk-article__contents__catch span.-sp:first-of-type {
		padding-left: 1rem ;
	}
	.xtalk-article__contents__catch span.-sp:last-of-type {
		padding-right: 1rem ;
	}
}

@media screen and (min-width: 1728px) {
	.xtalk-article__contents__catch span.-sp {
		font-size: var(--font-size48);
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__contents__catch span.-sp {
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
		font-size: var(--font-size24);
		padding: 0.6rem 1rem 0.8rem 1rem ;
	}
}

/* ---------- xtalk-article__contents__talk ---------- */
.xtalk-article__contents__talks {
	display: grid;
}

@media screen and (min-width: 1024px) {
	.xtalk-article__contents__talks {
		gap: 4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__contents__talks {
		gap: 2rem ;
	}
}

.xtalk-article__contents__talk {
	display: flex;
	align-items: flex-start;
}

@media screen and (min-width: 1024px) {
	.xtalk-article__contents__talk {
		gap: 6rem ;
		padding-right: 14rem ;
	}
	.xtalk-article__contents__talk:nth-of-type(2n) {
		flex-direction: row-reverse;
		padding-right: 0px;
		padding-left: 14rem ;
	}
	.xtalk-article__contents__talk:nth-of-type(2n) .xtalk-article__contents__talk__txt::before {
		-webkit-transform: scale(-1, 1);
		transform: scale(-1, 1);
		right: auto;
		left: 100%;
		margin-left: -1px;
		margin-right: 0px;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__contents__talk {
		gap: 2rem ;
	}
}

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

@media screen and (max-width: 1023px) {
	.xtalk-article__contents__talk__figure {
		width: 6rem ;
	}
}

.xtalk-article__contents__talk__figure figcaption {
	text-align: center;
	font-family: var(--font-sans-serif);
	font-size: var(--font-size16);
	line-height: var(--line-height-noraml);
	margin-top: 1rem ;
}

.xtalk-article__contents__talk__txt {
	flex: 1;
	position: relative;
	background-color: var(--color-bg);
}

@media screen and (min-width: 1024px) {
	.xtalk-article__contents__talk__txt {
		padding: 2rem 3rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__contents__talk__txt {
		padding: 1.5rem 2rem ;
	}
}

.xtalk-article__contents__talk__txt::before {
	content: '';
	display: block;
	background-color: var(--color-bg);
	clip-path: polygon(100% 0, 0 50%, 100% 100%);
	position: absolute;
	right: 100%;
	margin-right: -1px;
}

@media screen and (min-width: 1024px) {
	.xtalk-article__contents__talk__txt::before {
		width: 2.7rem ;
		height: 2.2rem ;
		top: 3.2rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-article__contents__talk__txt::before {
		width: 1.6rem ;
		height: 1.2rem ;
		top: 2.5rem ;
	}
}

/* ---------- xtalk-article__contents__figure2 ---------- */
@media screen and (min-width: 561px) {
	.xtalk-article__contents__figure2 {
		margin-inline: auto;
	}
}

@media screen and (min-width: 1024px) {
	.xtalk-article__contents__figure2 {
		width: 79.04192%;
	}
}

@media screen and (max-width: 1023px) and (min-width: 561px) {
	.xtalk-article__contents__figure2 {
		max-width: 70rem ;
		width: 100%;
	}
}

@media screen and (min-width: 561px) {
	.xtalk-article__contents__figure2 ul {
		display: flex;
		gap: 2.99401%;
	}
}

@media screen and (min-width: 561px) {
	.xtalk-article__contents__figure2 li {
		flex-basis: 100%;
	}
}

@media screen and (max-width: 560px) {
	.xtalk-article__contents__figure2 li {
		width: 74.35897vw;
	}
	.xtalk-article__contents__figure2 li:nth-of-type(2) {
		margin-top: 1rem ;
		margin-left: auto;
		margin-right: 0;
	}
}

/* ------------------------------------------------------------
 xtalk-looptxt
------------------------------------------------------------ */
.xtalk-looptxt {
	position: relative;
	z-index: 10;
	color: var(--color-txt2);
}

@media screen and (min-width: 1024px) {
	.xtalk-looptxt {
		margin-top: 22rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-looptxt {
		margin-top: 12rem ;
	}
}

/* ------------------------------------------------------------
 xtalk-pagination
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.xtalk-pagination {
		margin-top: 22.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.xtalk-pagination {
		margin-top: 16.3rem ;
	}
}

.comic-pagination__header {
	text-align: center;
}
/*# sourceMappingURL=sourcemaps/page-cross-talk-detail.css.map */