@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-border {
	width: 100%;
	height: 18px;
	background: url("/tv/wonderful_precure/assets/images/common/bg_heart_border.webp") repeat-x;
}
.u-txt-num {
	text-align: center;
}
.u-txt-num span {
		display: inline-block;
		padding: 2.75px 30px;
		font-size: 1.4rem;
		font-weight: bold;
		color: #fff;
		letter-spacing: 0.05em;
		background: var(--colorKey);
		border-radius: 15px;
	}
@media print, screen and (min-width: 1025px) {
.u-txt-num span {
			padding: 5px 25px;
			font-size: 2.4rem;
			line-height: 1.25;
			border-radius: 20px
	}
	}
.u-episodettl {
	position: relative;
	padding-bottom: 17.5px;
	margin-top: 15px;
	font-size: 2.0rem;
	font-weight: bold;
	text-align: center;
}
/* line-height: $lineHeightTtl; */
@media print, screen and (min-width: 1025px) {
.u-episodettl {
		padding-bottom: 30px;
		margin-top: 30px;
		font-size: 2.4rem
}
	}
.u-box-data {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 35px;
}
@media print, screen and (min-width: 1025px) {
.u-box-data {
		margin-top: 40px;
}
	}
.u-box-data .data-date {
		font-size: 1.4rem;
		font-weight: 500;
		/* line-height: $lineHeightTtl; */
		color: var(--colorKeyText);
	}
@media print, screen and (min-width: 1025px) {
.u-box-data .data-date {
			font-size: 1.6rem
	}
	}
.u-box-data .data-sns {
		display: flex;
	}
.u-box-data .data-sns li {
			line-height: 1;
		}
.u-box-data .data-sns li + li {
				margin-left: 15px;
			}
.u-box-slider {
	margin-top: 20px;
}
@media print, screen and (min-width: 1025px) {
.u-box-slider {
		margin-top: 30px;
}
	}
.u-box-slider .slider-main {
		/* // margin: 0 7px;margin */
		overflow: hidden;
	}
@media print, screen and (min-width: 1025px) {
.u-box-slider .slider-main {
			margin: 0;
	}
	}
.u-box-slider .slider-main .swiper-wrapper .swiper-slide img {
					border-radius: 10px;
				}
.u-box-slider .slider-thumb {
		margin-top: 10px;
	}
@media print, screen and (min-width: 1025px) {
.u-box-slider .slider-thumb {
			margin-top: 20px;
	}
	}
.u-box-slider .slider-thumb .swiper-wrapper .swiper-slide {
				cursor: pointer;
				transition: opacity 200ms;
			}
.u-box-slider .slider-thumb .swiper-wrapper .swiper-slide img {
					border-radius: 5px;
				}
.u-box-slider .slider-thumb .swiper-wrapper .swiper-slide.swiper-slide-thumb-active {
					opacity: 0.6;
				}
.u-box-slider .slider-thumb .swiper-wrapper .swiper-slide:focus-visible {
					opacity: 0.6;
	}
@media (hover: hover) and (pointer: fine) {
		.u-box-slider .slider-thumb .swiper-wrapper .swiper-slide:hover {
					opacity: 0.6;
		}
	}
.u-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 15px;
}
@media print, screen and (min-width: 1025px) {
.u-pager {
		margin-top: 30px;
}
	}
.u-pager .pager-item {
		position: relative;
		display: inline-flex;
		gap: 10px;
		align-items: center;
		font-size: 1.4rem;
	}
.u-pager .pager-item:nth-child(2) {
			flex-direction: row-reverse;
		}
.u-pager .pager-item:nth-child(2) .pager-icon {
				transform: rotate(180deg);
			}
.u-pager .pager-item .pager-icon {
			position: relative;
			display: block;
			flex-shrink: 0;
			width: 20px;
			aspect-ratio: 1/1;
			background: var(--colorKey);
			border-radius: 50%;
		}
.u-pager .pager-item .pager-icon::after {
				position: absolute;
				top: 50%;
				left: 46%;
				z-index: 1;
				display: block;
				width: 8px;
				height: 10px;
				content: "";
				background: url("/tv/wonderful_precure/assets/images/common/b_arrow_sp.webp") no-repeat center center / contain;
				translate: -50% -50%;
			}
.u-pager .pager-item .pager-text {}
.u-pager .pager-item.pager-prev {
			float: left;
			padding-left: 30px;
			font-size: 1.5em;
			font-weight: 700;
		}
.u-pager .pager-item.pager-prev:before {
				left: 0px;
				transform: rotate(180deg);
			}
.u-pager .pager-item.pager-next {
			float: right;
			padding-right: 30px;
			font-size: 1.5em;
			font-weight: 700;
		}
.u-pager .pager-item.pager-next:before {
				right: 0px;
			}
.u-staff {
	margin-top: 25px;
}
.u-staff .staff-ttl {
		font-size: 1.5rem;
		font-weight: bold;
		color: var(--colorKeyText);
	}
@media print, screen and (min-width: 1025px) {
.u-staff .staff-ttl {
			font-size: 1.8rem
	}
	}
.u-staff .c-txt-p {
		margin-top: 6px;
	}
.u-trailer {
	position: relative;
	margin-top: 90px;
}
@media print, screen and (min-width: 1025px) {
.u-trailer {
		margin-top: 120px;
}
	}
.u-trailer .trailer-ttl {
		position: absolute;
		top: 16px;
		left: 50%;
		z-index: 10;
		width: 110px;
		translate: -50% -100%;
	}
@media print, screen and (min-width: 1025px) {
.u-trailer .trailer-ttl {
			width: 168px
	}
	}
.u-weekly {
	margin-top: 50px;
}
@media print, screen and (min-width: 1025px) {
.u-weekly {
		margin-top: 80px;
}
	}
.u-weekly .u-weekly__title {
		max-width: 280px;
		margin-inline: auto;
	}
@media print, screen and (min-width: 1025px) {
.u-weekly .u-weekly__title {
			max-width: 472px
	}
	}
.u-weekly .u-weekly__desc {
		width: -moz-fit-content;
		width: fit-content;
		margin-inline: auto;
		margin-top: 24px;
		font-size: 2rem;
		font-weight: bold;
	}
@media print, screen and (min-width: 1025px) {
.u-weekly .u-weekly__desc {
			font-size: 2.4rem
	}
	}
.u-weekly .u-weekly__box {
		position: relative;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		padding-top: 24px;
	}
@media print, screen and (min-width: 1025px) {
.u-weekly .u-weekly__box {
			grid-template-columns: repeat(2, 1fr);
			height: 420px;
	}
	}
.u-weekly .u-weekly__box::after {
			position: absolute;
			top: 0;
			left: 50%;
			z-index: -1;
			display: block;
			width: 100%;
			max-height: 280px;
			aspect-ratio: 720/582;
			content: "";
			background: url("/tv/wonderful_precure/assets/images/episode/bg_story_sp.svg") no-repeat center center / contain;
			translate: -50% 0%;
		}
@media print, screen and (min-width: 1025px) {
.u-weekly .u-weekly__box::after {
				top: 50%;
				width: auto;
				height: 100%;
				max-height: none;
				aspect-ratio: 1100/660;
				background: url("/tv/wonderful_precure/assets/images/episode/bg_story_pc.svg") no-repeat center center / contain;
				translate: -50% -50%
		}
	}
.u-weekly .u-weekly__box .u-weekly__img {
			position: absolute;
			top: 20px;
			left: 50%;
			z-index: 10;
			display: block;
			width: 100%;
			max-width: 200px;
			height: auto;
			max-height: 600px;
			aspect-ratio: 1/1;
			padding: 0;
			margin: 0;
			cursor: pointer;
			background: none;
			border: none;
			outline: none;
			translate: -50% 0;
		}
.u-weekly .u-weekly__box .u-weekly__img:focus-visible {
		animation: hoverPush 340ms linear;
	}
@media (hover: hover) and (pointer: fine) {
		.u-weekly .u-weekly__box .u-weekly__img:hover {
		animation: hoverPush 340ms linear;
		}
	}
@media print, screen and (min-width: 1025px) {
.u-weekly .u-weekly__box .u-weekly__img {
				position: relative;
				left: 0;
				min-width: 100%;
				translate: 0;
		}
	}
.u-weekly .u-weekly__box .u-weekly__img .u-weekly__img-inner {
				position: relative;
				width: 100%;
				height: 100%;
			}
.u-weekly .u-weekly__box .u-weekly__img img {
				position: absolute;
				top: 50%;
				display: block;
				margin-inline: auto;
				pointer-events: none;
				translate: 0 -50%;
			}
@media print, screen and (min-width: 1025px) {
.u-weekly .u-weekly__box .u-weekly__img img {
					inset: 0;
					height: 100%;
					translate: 0
			}
	}
.u-weekly .u-weekly__box .u-weekly__img .is-large {
				animation: furifuri 1.6s ease-out 160ms infinite;
			}
@keyframes furifuri {
					0% {
						/* 600ms / 1.6s = 37.5% */
						rotate: 0deg;
					}

					9.375%, 28.125% {
						/* 動作開始後150ms (9.375%) から動作終了までの150ms前 (28.125%) */
						rotate: -10deg;
					}

					18.75% {
						/* 動作の中心点、300ms / 1.6s = 18.75% */
						rotate: 10deg;
					}

					37.5%, 100% {
						/* 動作終了後、1秒の停止期間 */
						rotate: 0deg;
					}
				}
.u-weekly .u-weekly__box .u-weekly__img .is-open {
				display: none;
			}
@media print, screen and (min-width: 1025px) {
.u-weekly .u-weekly__box .u-weekly__img .is-open {
					display: block
			}
	}
.u-weekly .u-weekly__box .u-weekly__content {
			position: relative;
			/* display: grid; */
			place-items: center;
		}
.u-weekly .u-weekly__box .u-weekly__content .u-weekly__content-intro {
				position: absolute;
				top: 44%;
				left: 50%;
				display: block;
				width: 100%;
				margin-inline: auto;
				font-size: 2.4rem;
				font-weight: bold;
				text-align: center;
				translate: -50% -50%;
			}
@media print, screen and (min-width: 1025px) {
.u-weekly .u-weekly__box .u-weekly__content .u-weekly__content-intro {
					top: 35%;
					font-size: 3.2rem;
			}
	}
.u-weekly .u-weekly__box .u-weekly__content .u-weekly__opened {
				display: flex;
				flex-direction: column;
				padding-bottom: 0px;
			}
.u-weekly .u-weekly__box .u-weekly__content .u-weekly__opened .u-weekly__opened-title {
					order: 2;
					width: -moz-fit-content;
					width: fit-content;
					padding: 0;
					margin-block: 0 24px;
					margin: 20px auto;
				}
@media print, screen and (min-width: 1025px) {
.u-weekly .u-weekly__box .u-weekly__content .u-weekly__opened .u-weekly__opened-title {
						order: 1;
						margin-inline: auto;
						margin-top: 0
				}
	}
.u-weekly .u-weekly__box .u-weekly__content .u-weekly__opened .u-weekly__opened-desc {
					order: 3;
					text-align: center;
				}
@media print, screen and (min-width: 1025px) {
.u-weekly .u-weekly__box .u-weekly__content .u-weekly__opened .u-weekly__opened-desc {
						order: 2
				}
	}
.u-weekly .u-weekly__box .u-weekly__content .u-weekly__opened .u-weekly__opened-img {
					display: block;
					order: 1;
					max-width:55%;
					margin-inline: auto;
					margin-top: 16px;
				}
@media print, screen and (min-width: 1025px) {
.u-weekly .u-weekly__box .u-weekly__content .u-weekly__opened .u-weekly__opened-img {
						order: 3;
					max-width: 280px;
				}
	}
.u-weekly .u-weekly__box .u-weekly__content .u-weekly__content-btn {
				width: 100%;
				max-width: 240px;
				margin-inline: auto;
			}
@media print, screen and (min-width: 1025px) {
.u-weekly .u-weekly__box .u-weekly__content .u-weekly__content-btn {
					max-width: 360px;
			}
	}
.u-weekly .u-weekly__box .u-weekly__content .u-weekly__content-btn .c-btn-common {
					width: 100%;
				}
.u-preview {
	position: relative;
}
.u-preview .c-list-movie {
		grid-template-columns: 1fr;
	}
.u-preview .c-list-movie .c-list-movie__modal {
			border: 4px solid var(--white);
			border-radius: 10px;
			box-shadow: 0 0 0 2px var(--colorKey);
		}
@media print, screen and (min-width: 1025px) {
.u-preview .c-list-movie .c-list-movie__modal {
				border: 4px solid var(--white);
				border-radius: 20px;
				box-shadow: 0 0 0 5px var(--colorKey)
		}
	}
.u-box-backnumber {
	position: relative;
	padding: 15px;
	margin-top: 30px;
	border-radius: 10px;
}
@media print, screen and (min-width: 1025px) {
.u-box-backnumber {
		padding: 45px 50px 50px;
		margin-top: 60px;
}
	}
.u-box-backnumber h2 {
		text-align: center;
	}
.u-box-backnumber h2 img {
			width: 170px;
		}
@media print, screen and (min-width: 1025px) {
.u-box-backnumber h2 img {
				width: 300px
		}
	}
.u-box-backnumber .u-backnumber {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
		margin-top: 10px;
	}
@media print, screen and (min-width: 1025px) {
.u-box-backnumber .u-backnumber {
			grid-template-columns: repeat(5, 1fr);
			margin-top: 30px;
	}
	}
.u-box-backnumber .u-backnumber li .m-btn-def {
				display: block;
				padding: 6px 5px 7px;
				color: #fff;
				background: var(--colorKey);
			}
.u-box-backnumber .u-backnumber li .m-btn-def.is-current {
					color: var(--colorKeyText);
					background: #fde9f2;
				}
.u-box-backnumber .u-backnumber li .m-btn-def:focus-visible {
					color: var(--colorKeyText);
					background: #fde9f2;
	}
@media (hover: hover) and (pointer: fine) {
		.u-box-backnumber .u-backnumber li .m-btn-def:hover {
					color: var(--colorKeyText);
					background: #fde9f2;
		}
	}
.m-btn-def {
	display: inline-block;
	padding: 6px 15px 7px;
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--colorKeyText);
	text-align: center;
	letter-spacing: 0.05em;
	background: #fde9f2;
	border-radius: 20px;
	transition: all 200ms ease-out;
}
/* @mixin transdef; */
@media print, screen and (min-width: 1025px) {
.m-btn-def {
		padding: 6px 10px 6px;
		font-size: 1.6rem;
		border-radius: 20px;
}
	}
.m-btn-def.is-current {
		color: #fff;
		pointer-events: none;
		background: var(--colorKey);
	}
.m-btn-def:focus-visible {
		color: #fff;
		text-decoration: none;
		background: var(--colorKey);
	}
@media (hover: hover) and (pointer: fine) {
		.m-btn-def:hover {
		color: #fff;
		text-decoration: none;
		background: var(--colorKey);
		}
	}