@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&family=Noto+Sans+JP:wght@400;500;700&display=swap');
/* -----------------------------------------------------------------
フォント設定
----------------------------------------------------------------- */
/* -----------------------------------------------------------------
メディアクエリ
----------------------------------------------------------------- */
/* media query */
/* -----------------------------------------------------------------
ホバー
----------------------------------------------------------------- */
/* -----------------------------------------------------------------
ホバーアニメーション
----------------------------------------------------------------- */
/* 半透明になる - 優先度の低いバナーなど */
/* 押しボタン - UIパーツなど */
@keyframes hoverPush {
	30% {
		transform: scale(0.92);
	}

	100% {
		transform: scale(1);
	}
}
/* 飛び出し - 目立たせたい要素など */
@keyframes hoverOutBack {
	50% {
		translate: 0 -10%;
	}

	100% {
		translate: 0 0%;
	}
}
/* -----------------------------------------------------------------
テキスト内リンク設定
----------------------------------------------------------------- */
/* -----------------------------------------------------------------
リンクアイコン付与
----------------------------------------------------------------- */
/* aタグ内のspanにアイコン付与したい際にselectorWrapは使用する */
/* -----------------------------------------------------------------
拡張子別リンクアイコンカラー設定
----------------------------------------------------------------- */
/* -----------------------------------------------------------------
子要素のマージントップを0に強制
----------------------------------------------------------------- */
/* -----------------------------------------------------------------
次要素のマージントップを0に強制
----------------------------------------------------------------- */
/* -----------------------------------------------------------------
カラム別マージントップ設定
----------------------------------------------------------------- */
/* -----------------------------------------------------------------
テキスト非表示
----------------------------------------------------------------- */
/* -----------------------------------------------------------------
クリック・タッチの最小ターゲット設定
----------------------------------------------------------------- */
/* -----------------------------------------------------------------
Webフォント設定
----------------------------------------------------------------- */
/* -----------------------------------------------------------------
CSS変数設定
----------------------------------------------------------------- */
:root {
	--primary: #e8380d;
	--secondary: #94252a;
	--txtColor: #3b3d48;
	--borderColor: #c6c6c6;
	--bgColor: #fff;
	--bgColorSecondary: #3b3d48;
	--bgColorTertiary: #f5f5f5;
	--bgColorTh: #e6e6e6;
	--bgColorThSub: rgba(230,230,230, 0.25);
	--white: #fff;
	--black: #3b3d48;
	--fontFamily: 'Noto Sans JP', 'ヒラギノ角 Pro W3', 'Hiragino Kaku Pro W3', 'メイリオ', Meiryo, 'MS Pゴシック',
		'MS PGothic', sans-serif;
	--txtSizeSp: 1.4rem;
	--txtSizePc: 1.6rem;
	--lineHeight: 1.75;
	--lineHeightTitle: 1.5;
	--letterSpacing: 0.01em;
	--fixedWidth: 1040px;
	--fixedWidthInner: 880px;
	--fixedWidthMain: 800px;
	--zIndexLv0: 0;
	--zIndexLv1: 1;
	--zIndexLv2: 10;
	--zIndexLv3: 100;
	--zIndexLv4: 1000;
	--zIndexLv5: 10000;
	--breakTabLength: 768;
	--breakPcLength: 1025;
	/* 個人設定 */
	--colorKey: #5d38b1;
	--colorKey50: #f9b5d4;
	--colorKey25: #fcdae9;
	--colorKeyText: #5d38b1;
	/* キャラ設定 */
	--colorCureidol: #ed2d7a;
	--colorCurewink: #4060ef;
	--colorCurekyunkyun: #a74eff;
	--colorPurirun: #55a248;
	--colorMeroron: #e795cd;
	--colorTyokkiri: #68343c;
	/* イージング */
	--easeOutBack: cubic-bezier(0.4, 1.5, 0.64, 1.5);
	/* アスペクト比計算用 */
	--widthPC: 1440;
	--widthSP: 750;
	--heightCharacterPc: 700;
	--heightCharacterSp: 856;
}
.p-list-activity {
	grid-template-columns: repeat(1, 1fr);
	gap: 85px;
	padding-top: 40px;
}
@media print, screen and (min-width: 1025px) {
.p-list-activity {
		grid-template-columns: repeat(1, 1fr);
		gap: 87px;
}
	}
.p-list-activity .p-list-activity__item {
		display: grid;
		grid-template-rows: auto 1fr;
		gap: 25px;
		padding: 30px 15px;
		background-color: #fff;
		box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
		transform: rotate(0deg);
	}
@media print, screen and (min-width: 768px) {
.p-list-activity .p-list-activity__item {
			gap: 20px;
			width: 500px;
			padding: 40px;
			margin-inline: auto;
	}
	}
.p-list-activity .p-list-activity__item:nth-of-type(3n + 1)::before {
				top: -46px;
				width: 64px;
				height: 70px;
			}
@media print, screen and (min-width: 1025px) {
				.p-list-activity .p-list-activity__item:nth-of-type(3n + 1)::before {
					top: -48px;
					width: 73px;
					height: 80px;
				}
	}
.p-list-activity .p-list-activity__item:nth-of-type(3n + 2)::before {
				top: -46px;
				width: 64px;
				height: 70px;
			}
@media print, screen and (min-width: 1025px) {
				.p-list-activity .p-list-activity__item:nth-of-type(3n + 2)::before {
					top: -48px;
					width: 73px;
					height: 80px;
				}
	}
.p-list-activity .p-list-activity__item:nth-of-type(3n)::before {
				top: -46px;
				width: 64px;
				height: 70px;
			}
@media print, screen and (min-width: 1025px) {
				.p-list-activity .p-list-activity__item:nth-of-type(3n)::before {
					top: -48px;
					width: 73px;
					height: 80px;
				}
	}
.p-list-activity .p-list-activity__item .p-activity__thum {
			position: relative;
			width: 100%;
		}
.p-list-activity .p-list-activity__item .p-activity__thum .p-activity__img {
				display: flex;
				justify-content: center;
			}
.p-list-activity .p-list-activity__item .p-activity__thum .p-activity__img img {
					width: 100%;
					/* height: 100%;
					max-height: 325px; */
					-o-object-fit: contain;
					   object-fit: contain;
				}
@media print, screen and (min-width: 768px) {
.p-list-activity .p-list-activity__item .p-activity__thum .p-activity__img img {
						/* max-height: 420px; */
				}
	}
.p-list-activity .p-list-activity__item .p-activity__thum .p-activity__new {
				position: absolute;
				top: -20px;
				left: -10px;
				z-index: 1;
				width: 40px;
				aspect-ratio: 9/10;
				pointer-events: none;
				content: '';
				background: url("/tv/precure/assets/images/common/p_topics_new.png") no-repeat center center / contain;
			}
@media print, screen and (min-width: 1025px) {
.p-list-activity .p-list-activity__item .p-activity__thum .p-activity__new {
					top: -20px;
					left: -16px;
					width: 60px
			}
	}
.p-list-activity .p-list-activity__item .p-activity__info {
			/* .p-activity__info-date {
				font-size: 1.2rem;
				font-weight: bold;
				color: var(--colorKey);

				@mixin viewTabPc {
					font-size: 1.6rem;
				}
			} */
		}
.p-list-activity .p-list-activity__item .p-activity__title {
			margin-top: 15px;
			font-size: 1.2rem;
		}
@media print, screen and (min-width: 768px) {
.p-list-activity .p-list-activity__item .p-activity__title {
				font-size: 1.6rem
		}
	}
.p-list-activity .p-list-activity__item .data-sns {
			position: relative;
			display: flex;
			justify-content: flex-end;
		}
/* padding-top: 30px; */
/* margin-top: 30px; */
@media print, screen and (min-width: 768px) {
.p-list-activity .p-list-activity__item .data-sns {
				/* padding-top: 60px; */
		}
	}
.p-list-activity .p-list-activity__item .data-sns li {
				line-height: 1;
			}
.p-list-activity .p-list-activity__item .data-sns li.data-sns-list {
					display: flex;
					gap: 16px;
				}
.p-list-activity .p-list-activity__item .data-sns li > a {
					display: block;
					transition: opacity 0.2s ease-out;
				}
.p-list-activity .p-list-activity__item .data-sns li > a:focus-visible {
						opacity: 0.5;
	}
@media (hover: hover) and (pointer: fine) {
		.p-list-activity .p-list-activity__item .data-sns li > a:hover {
						opacity: 0.5;
		}
	}
.p-list-activity .p-list-activity__item .data-sns li .data-sns__img-line {
					display: block;
					height: 24px;
				}
.p-list-activity .p-list-activity__item .data-sns li .data-sns__img-x {
					display: block;
					height: 24px;
				}
button.newiine_btn {
	display: flex;
	align-items: center;
	padding: 4px 12px;
	font-size: 1.4rem;
	line-height: 1;
}
button.newiine_btn span.material-icons-round {
		font-size: 1.4rem;
	}
button.newiine_btn .newiine_count {
		margin-inline: 6px 4px;
	}
button.newiine_btn.newiine_clickedtoday {
	color: var(--colorCureidol);
	border-color: var(--colorCureidol);
}
button.newiine_btn.newiine_clickedtoday:hover {
	background: #fff3f5;
}
button.newiine_btn.newiine_clicked {
	color: var(--bgColor);
	background: var(--colorCureidol);
	border-color: var(--colorCureidol);
}
button.newiine_btn.newiine_clicked:hover {
	background: #fd7f96;
	border-color: #fd7f96;
}
button.newiine_btn div.newiine_thanks {
	min-width: 244px;
	padding: 15px;
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.4));
	border-radius: 0px;
}
@media print, screen and (min-width: 768px) {
button.newiine_btn div.newiine_thanks {
		min-width: 340px;
		padding: 20px
}
	}
button.newiine_btn div.newiine_thanks_up {
	bottom: 200%;
}
button.newiine_btn div.newiine_thanks_up:after {
	border-top: 16px solid white;
	border-bottom: 16px solid transparent;
}
button.newiine_btn div.newiine_thanks p {
	margin-bottom: 0;
}
@media print, screen and (min-width: 768px) {
button.newiine_btn div.newiine_thanks p {
		margin-top: 16px
}
	}