@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&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: 'Zen Maru Gothic', 'ヒラギノ角 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: #f46ca9;
	--colorKey50: #f9b5d4;
	--colorKey25: #fcdae9;
	--colorKeyText: #ea4f98;
	/* キャラ設定 */
	--colorCurewonderful: #ff326b;
	--colorCurewonderfulUiBg: #FFFCDF;
	--colorCurefriendly: #aa57ff;
	--colorCurefriendlyUiBg: #F4DAFA;
	--colorCurenyami: #29b6ff;
	--colorCurenyamiUiBg: #fdfedf;
	--colorCurelillian: #25e9e8;
	--colorCurelillianUiBg: #ffd3ff;
	--colorCurelillianText: #0fbdd0;
	/* イージング */
	--easeOutBack: cubic-bezier(0.4, 1.5, 0.64, 1.5);
	/* アスペクト比計算用 */
	--widthPC: 1440;
	--widthSP: 750;
	--heightCharacterPc: 700;
	--heightCharacterSp: 856;
}
.p-box-sort .sort-ttl {
		margin-top: 25px;
		font-size: 2.4rem;
		font-weight: bold;
		line-height: var(--lineHeightTitle);
		color: var(--colorKeyText);
	}
@media print, screen and (min-width: 1025px) {
.p-box-sort .sort-ttl {
			margin-top: 0
	}
	}
@media print, screen and (min-width: 1025px) {
.p-box-sort .sort-select {
			display: flex
	}
	}
.p-list-tab {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: calc(100% + 14px);
	margin: 0 -7px;
}
@media print, screen and (min-width: 1025px) {
.p-list-tab {
		justify-content: flex-end;
		width: 360px;
		margin: 0 -10px;
}
	}
.p-list-tab li {
		width: 50%;
		padding: 0 7px;
	}
@media print, screen and (min-width: 1025px) {
.p-list-tab li {
			padding: 0 10px;
	}
	}
.p-list-tab li:nth-child(n + 3) {
			margin-top: 14px;
		}
@media print, screen and (min-width: 1025px) {
.p-list-tab li:nth-child(n + 3) {
				margin-top: 0px
		}
	}
@media print, screen and (min-width: 1025px) {
.p-list-tab li:nth-child(n + 4) {
				margin-top: 20px
		}
	}
.p-btn-def {
	display: block;
	padding: 6px 15px 7px;
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--colorKeyText);
	text-align: center;
	letter-spacing: 0.05em;
	background: var(--colorKey25);
	border-radius: 20px;
	transition: all 0.3s ease;
}
@media print, screen and (min-width: 1025px) {
.p-btn-def {
		padding: 6px 10px 6px;
		font-size: 1.6rem;
		border-radius: 20px;
}
	}
.p-btn-def.is-current {
		color: #fff;
		pointer-events: none;
		background: var(--colorKey);
	}
.p-btn-def:focus-visible {
		color: #fff;
		text-decoration: none;
		background: var(--colorKey);
	}
@media (hover: hover) and (pointer: fine) {
		.p-btn-def:hover {
		color: #fff;
		text-decoration: none;
		background: var(--colorKey);
		}
	}
.p-list-thumb {
	display: flex;
	flex-wrap: wrap;
	margin: 15px -5px 0;
}
@media print, screen and (min-width: 1025px) {
.p-list-thumb {
		margin: 30px -10px 0;
}
	}
.p-list-thumb > li {
		width: 50%;
		padding: 0 5px;
		margin-top: 10px;
	}
@media print, screen and (min-width: 1025px) {
.p-list-thumb > li {
			width: 25%;
			padding: 0 10px;
			margin-top: 20px;
	}
	}
.p-list-thumb > li > a {
			display: block;
			overflow: hidden;
			font-size: 1.2rem;
			border: 1px solid var(--colorKey);
			border-radius: 5px;
			box-shadow: 0 0 20px 0 rgba(var(--colorKey), 0.15);
		}
@media print, screen and (min-width: 1025px) {
.p-list-thumb > li > a {
				border: 2px solid var(--colorKeyText);
				border-radius: 10px;
		}
	}
.p-list-thumb > li > a .thumb-img {
				position: relative;
				display: block;
				padding-top: 100%;
				overflow: hidden;
			}
.p-list-thumb > li > a .thumb-img img {
					position: absolute;
					top: 0px;
					right: 0px;
					bottom: 0px;
					left: 0px;
					max-width: 75%;
					max-height: 74%;
					margin: auto;
					transition: all 0.3s ease;
				}
.p-list-thumb > li > a .thumb-img .img-att {
					position: absolute;
					right: 5px;
					bottom: 3px;
					left: 5px;
					display: block;
					font-size: 1rem;
					color: var(--txtColor);
				}
@media print, screen and (min-width: 1025px) {
.p-list-thumb > li > a .thumb-img .img-att {
						right: 10px;
						bottom: 5px;
						left: 10px;
						font-size: 1.2rem
				}
	}
.p-list-thumb > li > a dl {
				padding: 2px 8px 12px;
				background: #fff;
			}
@media print, screen and (min-width: 1025px) {
.p-list-thumb > li > a dl {
					padding: 2px 15px 10px;
			}
	}
.p-list-thumb > li > a dl dt {
					font-weight: 700;
					color: var(--txtColor);
					letter-spacing: 0.05em;
				}
@media print, screen and (min-width: 1025px) {
.p-list-thumb > li > a dl dt {
						font-size: 1.6rem
				}
	}
.p-list-thumb > li > a dl dd {
					padding-top: 10px;
					margin-top: 15px;
					font-weight: 700;
					color: var(--colorKey);
					letter-spacing: 0.05em;
					border-top: 2px dotted var(--colorKey);
				}
@media print, screen and (min-width: 1025px) {
.p-list-thumb > li > a dl dd {
						border-top: 4px dotted var(--colorKey);
				}
	}
.p-list-thumb > li > a dl dd .thumb-data {
						display: flex;
						flex-wrap: wrap;
					}
@media print, screen and (min-width: 1025px) {
	}
.p-list-thumb > li > a dl dd .thumb-data li {
							position: relative;
							padding-left: 18px;
						}
.p-list-thumb > li > a dl dd .thumb-data li + li {
								margin-left: 20px;
							}
@media print, screen and (min-width: 1025px) {
	}
.p-list-thumb > li > a dl dd .thumb-data li:before {
								position: absolute;
								top: 50%;
								left: 0px;
								display: inline-block;
								width: 13px;
								height: 13px;
								margin-top: -6px;
								content: '';
								background-repeat: no-repeat;
								background-position: center;
								background-size: 13px 13px;
							}
@media print, screen and (min-width: 1025px) {
.p-list-thumb > li > a dl dd .thumb-data li:before {
									margin-top: -7px
							}
	}
.p-list-thumb > li > a dl dd .thumb-data li.data-date:before {
									background-image: url(/tv/wonderful_precure/assets/images/common/i_cal.svg);
								}
.p-list-thumb > li > a dl dd .thumb-data li.data-cat:before {
									background-image: url(/tv/wonderful_precure/assets/images/common/i_disc.svg);
								}
.p-list-thumb > li > a:focus-visible {
				text-decoration: none;
	}
.p-list-thumb > li > a:focus-visible .thumb-img img {
						transform: scale(1.1);
					}
@media (hover: hover) and (pointer: fine) {
		.p-list-thumb > li > a:hover {
				text-decoration: none;
		}
					.p-list-thumb > li > a:hover .thumb-img img {
						transform: scale(1.1);
					}
	}
.p-list-thumb > li .thumb-modal {
			display: none;
		}