@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;
	--colorniko: #b07cea;
	--colornikoUiBg: #dffaff;
	/* イージング */
	--easeOutBack: cubic-bezier(0.4, 1.5, 0.64, 1.5);
	/* アスペクト比計算用 */
	--widthPC: 1440;
	--widthSP: 750;
	--heightCharacterPc: 700;
	--heightCharacterSp: 856;
}
/* ------------------------------
		トップの設定
------------------------------ */
.l-wrap {
	overflow: hidden;
}
.l-header__logo {
	display: none;
}
/* 画面一番上で非表示 */
.l-footer .l-footer__nav {
		visibility: hidden;
		opacity: 0;
	}
.l-footer .l-footer__content {
		display: none;
	}
.l-footer .l-footer__info-banner {
		display: block;
	}
/* ------------------------------
		メインビジュアル
------------------------------ */
:root {
	--heightMvPC: 990;
	--heightMvSP: 990;
}
[data-gsap-mv="character"] {
	visibility: hidden;
	opacity: 0;
	scale: 0.6;
}
[data-gsap-mv="fadein"] {
	visibility: hidden;
	opacity: 0;
}
[data-gsap-mv="logo"] {
	visibility: hidden;
	opacity: 0;
}
.p-mv {
	position: relative;
	z-index: var(--zIndexLv0);
	width: 100%;
	aspect-ratio: var(--widthSP)/var(--heightMvPC);
}
/* background: url("/tv/wonderful_precure/assets/images/top/bg_topics_sp.webp") no-repeat top center / cover; */

@media print, screen and (min-width: 1025px) {
.p-mv {
		aspect-ratio: var(--widthPC)/var(--heightMvPC);
	/* background: url("/tv/wonderful_precure/assets/images/top/bg_topics.webp") no-repeat top center / cover; */
}
	}
/* レース */
.p-mv::before {
		position: absolute;
		bottom: calc(115 / var(--heightMvPC) * 100%);
		left: 50%;
		z-index: -1;
		display: block;
		width: 100%;
		aspect-ratio: var(--widthSP)/200;
		content: "";
		background: url("/tv/wonderful_precure/assets/images/top/p_lace_mv_sp.webp") no-repeat top center / contain;
		translate: -50% 100%;
	}
@media print, screen and (min-width: 1025px) {
.p-mv::before {

			aspect-ratio: var(--widthPC)/270;
			background: url("/tv/wonderful_precure/assets/images/top/p_lace_mv.webp") no-repeat top center / contain
	}
	}
/* 白マスク */
.p-mv::after {
		position: absolute;
		bottom: calc(250 / var(--heightMvPC) * 100%);
		left: 50%;
		z-index: -2;
		display: block;
		width: calc(6880 / var(--widthPC) * 100%);
		aspect-ratio: 1/1;
		pointer-events: none;
		content: "";
		background: var(--white);
		border-radius: 50%;
		translate: -50% 100%;
	}
@media print, screen and (min-width: 1025px) {
.p-mv::after {
			bottom: calc(48 / var(--heightMvPC) * 100%);
			width: calc(18880 / var(--widthPC) * 100%)
	}
	}
.p-mv .p-mv__character {
		position: absolute;
		top: 0;
		z-index: -3;
		display: block;
		width: 100%;
		opacity: 1;
		transition: opacity 1s;
	}
.p-mv .p-mv__character img {
			display: block;
			width: 100%;
		}
.p-mv .p-mv__character [data-gsap-mv] {
			opacity: 0;
		}
.p-mv .p-mv__character .p-mv__character_bg {
			position: absolute;
			z-index: -3;
		}
.p-mv .p-mv__character .p-mv__character_4 {
			position: absolute;
			z-index: 0;
		}
.p-mv .p-mv__character .p-mv__character_2 {
			position: absolute;
			z-index: 1;
		}
.p-mv .p-mv__character .p-mv__character_1 {
			position: absolute;
			z-index: 2;
			top:-5px;
		}
.p-mv .p-mv__character .p-mv__character_3 {
			position: absolute;
			z-index: 3;
		}
.p-mv .p-mv__character .p-mv__character_5 {
			position: absolute;
			z-index: 4;
		}
.p-mv .p-mv__copy {
		position: absolute;
		top: calc(250 / var(--heightMvPC) * 100%);
		right: calc(30 / var(--widthSP) * 100%);
		width: calc(105 / var(--widthSP) * 100%);
		aspect-ratio: 116/336;
	}
@media print, screen and (min-width: 1025px) {
.p-mv .p-mv__copy {
			top: calc(270 / var(--heightMvPC) * 100%);
			right: calc(200 / var(--widthPC) * 100%);
			width: calc(116 / var(--widthPC) * 100%);
	}
	}
.p-mv .p-mv__copy img {
			width: 100%;
		}
.p-mv__animal {
	position: absolute;
	z-index: var(--zIndexLv2);
	width: calc(90 / var(--widthSP) * 100vw);
	translate: 0% 100%;
}
.p-mv__animal img {
		width: 100%;
	}
@media print, screen and (min-width: 1025px) {
.p-mv__animal{
		width: calc(90 / var(--widthPC) * 100%);
	}
	}
.p-mv__animal:nth-of-type(1) {
		bottom: calc(380 / var(--heightMvSP) * 100%);
		left: calc(100/ var(--widthSP) * 100%);
	}
@media print, screen and (min-width: 1025px) {
.p-mv__animal:nth-of-type(1) {
			bottom: calc(70 / var(--heightMvPC) * 100%);
			left: calc(664 / var(--widthPC) * 100%)
	}
	}
.p-mv__animal:nth-of-type(2) {
		bottom: calc(260 / var(--heightMvSP) * 100%);
		left: calc(18/ var(--widthSP) * 100%);
	}
@media print, screen and (min-width: 1025px) {
.p-mv__animal:nth-of-type(2) {
			bottom: calc(58 / var(--heightMvPC) * 100%);
			left: calc(292 / var(--widthPC) * 100%)
	}
	}
.p-mv__animal:nth-of-type(3) {
		bottom: calc(160 / var(--heightMvSP) * 100%);
		left: calc(40/ var(--widthSP) * 100%);
	}
@media print, screen and (min-width: 1025px) {
.p-mv__animal:nth-of-type(3) {
			bottom: calc(76 / var(--heightMvPC) * 100%);
			left: calc(420 / var(--widthPC) * 100%)
	}
	}
.p-mv__animal:nth-of-type(4) {
		right: calc(100/ var(--widthSP) * 100%);
		bottom: calc(380 / var(--heightMvSP) * 100%);
	}
@media print, screen and (min-width: 1025px) {
.p-mv__animal:nth-of-type(4) {
			bottom: calc(70 / var(--heightMvPC) * 100%);
			left: calc(544 / var(--widthPC) * 100%)
	}
	}
.p-mv__animal:nth-of-type(5) {
		right: calc(18/ var(--widthSP) * 100%);
		bottom: calc(260 / var(--heightMvSP) * 100%);
	}
@media print, screen and (min-width: 1025px) {
.p-mv__animal:nth-of-type(5) {
			bottom: calc(44 / var(--heightMvPC) * 100%);
			left: calc(168 / var(--widthPC) * 100%)
	}
	}
.p-mv__animal:nth-of-type(6) {
		right: calc(40/ var(--widthSP) * 100%);
		bottom: calc(160 / var(--heightMvSP) * 100%);
	}
@media print, screen and (min-width: 1025px) {
.p-mv__animal:nth-of-type(6) {
			right: calc(166 / var(--widthPC) * 100%);
			bottom: calc(54 / var(--heightMvPC) * 100%)
	}
	}
@media print, screen and (min-width: 1025px) {
.p-mv__animal:nth-of-type(7) {
			right: calc(292 / var(--widthPC) * 100%);
			bottom: calc(58 / var(--heightMvPC) * 100%)
	}
	}
@media print, screen and (min-width: 1025px) {
.p-mv__animal:nth-of-type(8) {
			right: calc(420 / var(--widthPC) * 100%);
			bottom: calc(70 / var(--heightMvPC) * 100%)
	}
	}
@media print, screen and (min-width: 1025px) {
.p-mv__animal:nth-of-type(9) {
			right: calc(540 / var(--widthPC) * 100%);
			bottom: calc(70 / var(--heightMvPC) * 100%)
	}
	}
/* <-- ビジュアルセレクトボタン --> */
.p-mv__select {
	position: absolute;
	right: 0;
	bottom: calc(230 / var(--heightMvPC) * 100%);
	z-index: var(--zIndexLv1);
	display: block;
	width: 52px;
	/* height: 167px; */
	padding: 9px 3px;
	background-color: #f46ca9;
	border-radius: 6px 0 0 6px;
}
@media print, screen and (min-width: 1025px) {
.p-mv__select {
		bottom: calc(80 / var(--heightMvPC) * 100%);
		width: 100px;
		height: 340px;
		padding: 20px 8px;
		border-radius: 12px 0 0 12px
}
	}
.p-mv__select-col {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	max-height: 280px;
	margin-top: 4px;
}
@media print, screen and (min-width: 1025px) {
.p-mv__select-col {
		margin-top: 15px
}
	}
.p-mv__select-item {
	margin-top: 5px;
	text-align: center;
}
@media print, screen and (min-width: 1025px) {
.p-mv__select-item {
		margin-top: 10px
}
	}
@media print, screen and (min-width: 1025px) {
		.p-mv__select-item-hover:focus-visible {
		animation: hoverOutBack 300ms var(--easeOutBack);
	}
		@media (hover: hover) and (pointer: fine) {
		.p-mv__select-item-hover:hover {
		animation: hoverOutBack 300ms var(--easeOutBack);
		}
	}
	}
.p-mv__select-btn {
	padding: 0;
	background-color: transparent;
	border: none;
	border-radius: 50%;
}
.p-mv__select-btn.p-mv__select-btn-hover {
		transition: opacity 160ms linear;
	}
.p-mv__select-btn.p-mv__select-btn-hover:focus-visible {
		opacity: .6;
	}
@media (hover: hover) and (pointer: fine) {
		.p-mv__select-btn.p-mv__select-btn-hover:hover {
		opacity: .6;
		}
	}
.p-mv__select-btn.is-active {
		opacity: 0.6;
	}
.p-mv__select-btn.is-active .p-mv__select-btn-img {
			display: block;
			background: #fdfedf;
			border: 1px solid;
			border-color: var(--colorCurewonderful);
			border-radius: 50%;
		}
.p-mv__select-btn.is-active .p-mv__select-btn-img .is-off {
				display: none;
			}
.p-mv__select-btn.is-active .p-mv__select-btn-img .is-on {
				display: block;
			}
@media print, screen and (min-width: 1025px) {
.p-mv__select-btn.is-active .p-mv__select-btn-img{
				opacity: 1;
	}
	}
@media print, screen and (min-width: 1025px) {
.p-mv__select-btn.is-active .p-mv__select-btn-img{
				border: 2px solid transparent;
				border-color: var(--colorCurewonderful);
	}
	}
.p-mv__select-btn-img-src {
	width: 36px;
}
@media print, screen and (min-width: 1025px) {
.p-mv__select-btn-img-src {
		width: 72px;
		border: 2px solid transparent
}
	}
.p-mv__hogosya {
	display: none;
}



@media print, screen and (min-width: 1025px) {
    .p-mv__hogosya {
        position: absolute;
        left: calc(110 / var(--widthPC)* 100%);
        bottom: calc(100 / var(--heightMvPC)* 100%);
        z-index: var(--zIndexLv1);
        display: block;
        width: calc(220 / var(--widthPC)* 100%);
    }
		.p-mv__hogosya:focus-visible {
		animation: hoverOutBack 300ms var(--easeOutBack);
	}
		@media (hover: hover) and (pointer: fine) {
		.p-mv__hogosya:hover {
		animation: hoverOutBack 300ms var(--easeOutBack);
		}
	}
	
	}
	
	
.p-mv__hogosya img {
		display: block;
		width: 100%;
		margin-inline: 0;
		filter: drop-shadow(0px 0px 20px rgba(255, 255, 255, 0.5)) drop-shadow(0px 0px 20px rgba(255, 255, 255, 0.5));
	}
.p-mv__tver {
	display: none;
}
@media print, screen and (min-width: 1025px) {
.p-mv__tver {
		position: absolute;
		top: calc(5 / var(--heightMvPC) * 100%);
		right: calc(40 / var(--widthPC) * 100%);
		z-index: var(--zIndexLv1);
		display: block;
		width: calc(180 / var(--widthPC) * 100%);
}
		.p-mv__tver:focus-visible {
		animation: hoverOutBack 300ms var(--easeOutBack);
	}
		@media (hover: hover) and (pointer: fine) {
		.p-mv__tver:hover {
		animation: hoverOutBack 300ms var(--easeOutBack);
		}
	}
		.p-mv__tver{
		padding: 1% 0 0 2%;
	}
	}
.p-mv__tver img {
		display: block;
		width: 100%;
		margin-inline: 0;
	}
.p-mv__logo {
	position: absolute;
	bottom: calc(290 / var(--heightMvPC) * 100%);
	left: 50%;
	z-index: var(--zIndexLv1);
	width: 100%;
	translate: -50% 100%;
}
@media print, screen and (min-width: 1025px) {
    .p-mv__logo {
        top: calc(124 / var(--heightMvPC)* 100%);
        bottom: initial;
        left: calc(25 / var(--widthPC)* 100%);
        width: calc(430 / var(--widthPC)* 100%);
        translate: calc(-64 / var(--widthPC)* 100%) 0;
    }
	}
.p-mv__logo img {
		display: block;
		width: calc(520 / var(--widthSP) * 100%);
		margin-inline: auto;
		filter: drop-shadow(0px 0px 20px rgba(255, 255, 255, 0.5)) drop-shadow(0px 0px 20px rgba(255, 255, 255, 0.5));
	}
@media print, screen and (min-width: 1025px) {
.p-mv__logo img {
			width: 100%;
			margin-inline: 0
	}
	}
.p-mv__banner {
	display: none;
}
@media print, screen and (min-width: 1025px) {
    .p-mv__banner {
        position: absolute;
        top: calc(325 / var(--heightMvPC)* 100%);
        left: calc(40 / var(--widthPC)* 100%);
        z-index: var(--zIndexLv1);
        display: block;
				}
	}
	
.p-banner-date {
	display: block;
}
@media print, screen and (min-width: 1025px) {
.p-banner-date {
		width: calc(400 / var(--widthPC) * 100vw);
}
	}
.p-banner-date img {
		filter: drop-shadow(0px 0px 15px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 30px rgba(255, 255, 255, 0.5));
		translate: calc(-10 / var(--widthPC) * 100vw) 0;
	}
.p-banner__notice {
	display: block;
	margin-top: 30px;
}
.p-banner__notice img {
		width: 100%;
	}
@media print, screen and (min-width: 1025px) {
.p-banner__notice img {
			filter: drop-shadow(0px 0px 15px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 30px rgba(255, 255, 255, 0.5))
	}
	}
.p-banner__notice:focus-visible {
		animation: hoverOutBack 300ms var(--easeOutBack);
	}
@media (hover: hover) and (pointer: fine) {
		.p-banner__notice:hover {
		animation: hoverOutBack 300ms var(--easeOutBack);
		}
	}
@media print, screen and (min-width: 1025px) {
.p-banner__notice.is-animal {
        width: calc(273 / var(--widthPC)* 100vw);
        margin-top: calc(38 / var(--heightMvPC)* 100%);
        margin-left: 45px;
	}
	}
@media print, screen and (min-width: 1025px) {
.p-banner__notice.is-ohirome {
			width: calc(225 / var(--widthPC) * 100vw);
			/* width: calc(240 / var(--widthPC) * 100vw); */
			margin-top: calc(80 / var(--heightMvPC) * 100%)
	}
	}
@media print, screen and (min-width: 1025px) {
.p-banner__notice.is-greeting {
			width: calc(340 / var(--widthPC) * 100vw);
			margin-top: calc(38 / var(--heightMvPC) * 100%);
	}
	}
@media print, screen and (min-width: 1025px) {
.p-banner__notice.is-greeting img {
				translate: calc(-26 / var(--widthPC) * 100vw) 0
		}
	}
@media print, screen and (min-width: 1025px) {
.p-banner__notice.is-aikotoba {
			width: calc(240 / var(--widthPC) * 100vw);
			/* width: calc(240 / var(--widthPC) * 100vw);  */
			margin-top: calc(38 / var(--heightMvPC) * 100%)
	}
	}
/* ------------------------------
		バナーエリア
------------------------------ */
.p-banner {
	position: relative;
	z-index: var(--zIndexLv2);
	margin-top: calc(35 / var(--widthPC) * 100%);
}
@media print, screen and (min-width: 1025px) {
.p-banner {
		margin-top: calc(200 / var(--widthPC) * 100%)
}
	}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.p-banner__inner {
		max-width: calc(500 / var(--widthSP) * 100%);
		margin-inline: auto
}
	}
.p-banner__mv {}
.p-banner__sns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding-inline: 14px;
	margin-top: 30px;
}
@media print, screen and (min-width: 1025px) {
.p-banner__sns {
		gap: 30px;
		padding-inline: 40px;
}
	}
.p-banner__sns .p-banner__sns__item .p-banner__sns__link {
			display: block;
			aspect-ratio: 1/1;
		}
@media print, screen and (min-width: 1025px) {
.p-banner__sns .p-banner__sns__item .p-banner__sns__link {
				aspect-ratio: initial;
		}
	}
.p-banner__sns .p-banner__sns__item .p-banner__sns__link:focus-visible {
		animation: hoverOutBack 300ms var(--easeOutBack);
	}
@media (hover: hover) and (pointer: fine) {
		.p-banner__sns .p-banner__sns__item .p-banner__sns__link:hover {
		animation: hoverOutBack 300ms var(--easeOutBack);
		}
	}
.p-banner__sns .p-banner__sns__item .p-banner__sns__link img {
				display: block;
				width: 100%;
				margin-inline: auto;
				border-radius: 50%;
				box-shadow: 0px 0px 14px 2px rgba(244, 108, 169, 0.5);
			}
@media print, screen and (min-width: 1025px) {
.p-banner__sns .p-banner__sns__item .p-banner__sns__link img {
					border-radius: 0%;
					box-shadow: none
			}
	}
.p-banner__navi {
	margin-top: 32px;
}
@media print, screen and (min-width: 1025px) {
.p-banner__navi {
		display: none
}
	}
/* ------------------------------
		ムービー
------------------------------ */
.p-movie {
	position: relative;
	z-index: var(--zIndexLv2);
	margin-block: 60px 40px;
}
@media print, screen and (min-width: 1025px) {
.p-movie {
		margin-block: 100px 120px;
}
	}
.p-movie .p-movie__inner {
		position: relative;
		width: 100%;
		padding-block: 0px 32px;
		padding-inline: 10px;
	}
@media print, screen and (min-width: 1025px) {
.p-movie .p-movie__inner {
			padding-block: 0px 80px;
			padding-inline: 0px;
	}
	}
.p-movie .p-movie__inner .p-movie__bg {
			position: absolute;
			bottom: 0;
			left: 50%;
			z-index: -1;
			width: 100%;
			height: 100%;
			translate: -50% 0;
		}
.p-movie .p-movie__inner .p-movie__bg .p-movie__bg-inner {
				position: relative;
				width: inherit;
				height: inherit;
				filter: drop-shadow(0px -1px 0px #ffe4a3);
			}
@media print, screen and (min-width: 1025px) {
.p-movie .p-movie__inner .p-movie__bg .p-movie__bg-inner {
					filter: drop-shadow(0px -2px 0px #ffe4a3);
			}
	}
/* border: 1px solid #ffe4a3; */
.p-movie .p-movie__inner .p-movie__bg .p-movie__bg-inner::before {
					position: absolute;
					bottom: 0%;
					left: 50%;
					z-index: 1;
					display: block;
					width: 100%;
					height: calc(100% - 60px);
					content: "";
					background: var(--colorCurewonderfulUiBg);
					border: 1px solid #ffe4a3;
					border-top: none;
					border-radius: 10px;
					translate: -50% 0%;
				}
@media print, screen and (min-width: 1025px) {
.p-movie .p-movie__inner .p-movie__bg .p-movie__bg-inner::before {
						width: calc(100% + 40px * 2);
						height: calc(100% - 90px);
						border-width: 2px;
						border-radius: 20px
				}
	}
.p-movie .p-movie__inner .p-movie__bg .p-movie__bg-inner::after {
					position: absolute;
					top: calc(60px + 16px);
					left: 50%;
					z-index: -1;
					display: block;
					width: 220px;
					height: 120px;
					content: "";
					background: var(--colorCurewonderfulUiBg);
					border-radius: 50%;
					translate: -50% -50%;
				}
@media print, screen and (min-width: 1025px) {
.p-movie .p-movie__inner .p-movie__bg .p-movie__bg-inner::after {
						top: calc(90px + 64px);
						width: 460px;
						height: 250px
				}
	}
.p-movie .p-movie__title {
		position: relative;
		width: 180px;
		margin-inline: auto;
		text-align: center;
	}
@media print, screen and (min-width: 1025px) {
.p-movie .p-movie__title {
			width: 284px;
	}
	}
.p-movie .p-movie__title .p-movie__title-left {
			position: absolute;
			bottom: 0;
			left: -20px;
			display: block;
			height: 100%;
			translate: -100% 0;
		}
.p-movie .p-movie__title .p-movie__title-left img {
				display: block;
				height: 100%;
			}
.p-movie .p-movie__title .p-movie__title-right {
			position: absolute;
			right: 0px;
			bottom: 0;
			display: block;
			height: 100%;
			translate: 100% 0;
		}
.p-movie .p-movie__title .p-movie__title-right img {
				display: block;
				height: 100%;
			}
.p-movie .p-movie__list {
		margin-top: 20px;
	}
@media print, screen and (min-width: 1025px) {
.p-movie .p-movie__list {
			margin-top: 40px
	}
	}
.p-movie__link {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	margin-inline: auto;
	margin-top: 26px;
}
@media print, screen and (min-width: 1025px) {
.p-movie__link {
		margin-top: 30px;
}
	}
.p-movie__link:focus-visible {
		animation: hoverPush 340ms linear;
	}
@media (hover: hover) and (pointer: fine) {
		.p-movie__link:hover {
		animation: hoverPush 340ms linear;
		}
	}
.p-movie__link img {
		max-width: 230px;
	}
@media print, screen and (min-width: 1025px) {
.p-movie__link img {
			max-width: 380px
	}
	}
/* ------------------------------
		トピックス
------------------------------ */
.p-topics {
	position: relative;
	z-index: var(--zIndexLv2);
	padding-block: 60px 30px;
	background: url("/tv/wonderful_precure/assets/images/top/bg_topics_sp.webp") no-repeat top center / cover;
}
@media print, screen and (min-width: 1025px) {
.p-topics {
		padding-block: 170px 120px;
		background: url("/tv/wonderful_precure/assets/images/top/bg_topics.webp") no-repeat top center / cover;
}
	}
.p-topics .c-btn-pulldown {
		display: none;
	}
.p-topics::before {
		position: absolute;
		top: 0%;
		left: 50%;
		z-index: 1;
		display: block;
		width: 100%;
		height: 34px;
		content: "";
		background: url("/tv/wonderful_precure/assets/images/common/p_lace.webp") repeat-x top center / contain;
		scale: 1 -1;
		translate: -50% 0%;
	}
@media print, screen and (min-width: 1025px) {
.p-topics::before {
			height: 50px
	}
	}
.p-topics .p-topics__inner {}
.p-topics .p-topics__title {
		position: relative;
		width: 180px;
		margin-inline: auto;
	}
@media print, screen and (min-width: 1025px) {
.p-topics .p-topics__title {
			width: 304px;
	}
	}
.p-topics .p-topics__title .p-topics__title-left {
			position: absolute;
			bottom: 0;
			left: -20px;
			display: block;
			height: 100%;
			translate: -100% 0;
		}
.p-topics .p-topics__title .p-topics__title-left img {
				display: block;
				height: 100%;
			}
.p-topics .p-topics__title .p-topics__title-right {
			position: absolute;
			right: -10px;
			bottom: 0;
			display: block;
			height: 100%;
			translate: 100% 0;
		}
.p-topics .p-topics__title .p-topics__title-right img {
				display: block;
				height: 100%;
			}
.p-topics .p-topics__list {
		margin-top: 18px;
	}
@media print, screen and (min-width: 1025px) {
.p-topics .p-topics__list {
			margin-top: 50px
	}
	}
.p-topics .p-topics__link {
		display: block;
		width: 240px;
		margin-inline: auto;
		margin-top: 32px;
	}
@media print, screen and (min-width: 1025px) {
.p-topics .p-topics__link {
			width: 380px;
			margin-top: 50px;
	}
	}
.p-topics .p-topics__link:focus-visible {
		animation: hoverPush 340ms linear;
	}
@media (hover: hover) and (pointer: fine) {
		.p-topics .p-topics__link:hover {
		animation: hoverPush 340ms linear;
		}
	}
/* ------------------------------
		キャラクター
------------------------------ */
.p-character {
	position: relative;
	z-index: var(--zIndexLv2);
}
.p-character__content {}
.p-slide {
	position: relative;
	z-index: var(--zIndexLv1);
	aspect-ratio: var(--widthSP)/var(--heightCharacterSp);
}
@media print, screen and (min-width: 1025px) {
.p-slide {
		aspect-ratio: var(--widthPC)/var(--heightCharacterPc);
}
	}
.p-slide.swiper-slide-active .p-slide__img {
			opacity: 1;
			transition-delay: 200ms;
			translate: 0 0;
		}
.p-slide .p-slide__img {
		position: absolute;
		z-index: var(--zIndexLv1);
		opacity: 0;
		transition: all 320ms var(--easeOutBack);
		transition-delay: 400ms;
		translate: 0 10%;
	}
.p-slide .p-slide__img img {
			-o-object-fit: cover;
			   object-fit: cover;
			bottom: 0;
			width: 100%;
		}
.p-slide .p-slide__button {
		position: absolute;
		right: calc(88 / var(--widthSP) * 100%);
		bottom: calc(640 / 1712 * 100%);
		z-index: var(--zIndexLv3);
		width: calc(274 / var(--widthSP) * 100%);
	}
.p-slide .p-slide__button:focus-visible {
		animation: hoverPush 340ms linear;
	}
@media (hover: hover) and (pointer: fine) {
		.p-slide .p-slide__button:hover {
		animation: hoverPush 340ms linear;
		}
	}
@media print, screen and (min-width: 1025px) {
.p-slide .p-slide__button {
			right: calc(362 / var(--widthPC) * 100%);
			bottom: calc(200 / 700 * 100%);
			width: calc(240 / var(--widthPC) * 100%);
	}
	}
.p-slide .p-slide__button img {
			display: block;
			width: 100%;
		}
.p-slide .p-slide__bg {
		z-index: var(--zIndexLv0);
	}
.p-character__navi {
	position: absolute;
	bottom: calc(62 / var(--heightCharacterSp) * 100%);
	left: 50%;
	z-index: var(--zIndexLv3);
	translate: -50% 0;
}
@media print, screen and (min-width: 1025px) {
.p-character__navi {
		bottom: calc(40 / 700 * 100%);
}
	}
.p-character__navi .p-character__navi-inner {
		display: flex;
		gap: calc(10 / var(--widthSP) * 100vw);
		align-items: center;
	}
@media print, screen and (min-width: 1025px) {
.p-character__navi .p-character__navi-inner {
			gap: 20px
	}
	}
.p-character__navi .p-character__navi-item {
		flex-shrink: 0;
		width: calc(76 / var(--widthSP) * 100vw);
		aspect-ratio: 1/1;
		pointer-events: visible;
		cursor: pointer;
		background: url("/tv/wonderful_precure/assets/images/common/b_arrow.webp") no-repeat center center / contain;
		filter: drop-shadow(0px 0px 16px rgba(244, 108, 168, 0.35));
		border-radius: 4px;
		transition: translate 300ms var(--easeOutBack);
	}
@media print, screen and (min-width: 1025px) {
.p-character__navi .p-character__navi-item {
			top: 50%;
			width: 74px;
	}
	}
.p-character__navi .p-character__navi-item:first-of-type:focus-visible {
				translate: -10% 0;
	}
@media (hover: hover) and (pointer: fine) {
		.p-character__navi .p-character__navi-item:first-of-type:hover {
				translate: -10% 0;
		}
	}
.p-character__navi .p-character__navi-item:last-child {
			scale: -1 1;
		}
.p-character__navi .p-character__navi-item:last-child:focus-visible {
				translate: 10% 0;
	}
@media (hover: hover) and (pointer: fine) {
		.p-character__navi .p-character__navi-item:last-child:hover {
				translate: 10% 0;
		}
	}
.p-character__navi .p-character__navi-pagination {
		position: relative;
		inset: 0;
		display: flex;
		gap: calc(18 / var(--widthSP) * 100vw);
		align-items: center;
	}
@media print, screen and (min-width: 1025px) {
.p-character__navi .p-character__navi-pagination {
			gap: 8px;
	}
	}
.p-character__navi .p-character__navi-pagination .swiper-pagination-bullet {
			position: relative;
			display: block;
			width: calc(92 / var(--widthSP) * 100vw);
			height: calc(92 / var(--widthSP) * 100vw);
			aspect-ratio: 1/1;
			margin-inline: 0 !important;
			overflow: hidden;
			background: var(--colorKey25);
			border: 2px solid var(--white);
			border-radius: 50%;
			opacity: 1;
		}
@media print, screen and (min-width: 1025px) {
.p-character__navi .p-character__navi-pagination .swiper-pagination-bullet {
				width: 72px;
				height: 72px;
		}
	}
.p-character__navi .p-character__navi-pagination .swiper-pagination-bullet:focus-visible {
		animation: hoverOutBack 300ms var(--easeOutBack);
	}
@media (hover: hover) and (pointer: fine) {
		.p-character__navi .p-character__navi-pagination .swiper-pagination-bullet:hover {
		animation: hoverOutBack 300ms var(--easeOutBack);
		}
	}
.p-character__navi .p-character__navi-pagination .swiper-pagination-bullet::after {
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: 1;
				display: block;
				width: 100%;
				height: 100%;
				content: "";
				background-repeat: no-repeat;
				background-position: center center;
				background-size: contain;
				transform: translate(-50%, -50%);
			}
.p-character__navi .p-character__navi-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
					opacity: .5;
				}
.p-character__navi .p-character__navi-pagination .swiper-pagination-bullet:nth-child(1) {
				background: var(--colorCurewonderfulUiBg);
				box-shadow: 0 0 0 2px var(--colorCurewonderful);
			}
.p-character__navi .p-character__navi-pagination .swiper-pagination-bullet:nth-child(1)::after {
					background-image: url("/tv/wonderful_precure/assets/images/common/p_tumb_curewonderful.webp");
				}
.p-character__navi .p-character__navi-pagination .swiper-pagination-bullet:nth-child(2) {
				background: #fed4ff;
				box-shadow: 0 0 0 2px var(--colorCurefriendly);
			}
.p-character__navi .p-character__navi-pagination .swiper-pagination-bullet:nth-child(2)::after {
					background-image: url("/tv/wonderful_precure/assets/images/common/p_tumb_curefriendly.webp");
				}
.p-character__navi .p-character__navi-pagination .swiper-pagination-bullet:nth-child(3) {
				background: #fdfedf;
				box-shadow: 0 0 0 2px var(--colorCurenyami);
			}
.p-character__navi .p-character__navi-pagination .swiper-pagination-bullet:nth-child(3)::after {
					background-image: url("/tv/wonderful_precure/assets/images/common/p_tumb_curenyami.webp");
				}
.p-character__navi .p-character__navi-pagination .swiper-pagination-bullet:nth-child(4) {
				background: #ffd3ff;
				box-shadow: 0 0 0 2px var(--colorCurelillian);
			}
.p-character__navi .p-character__navi-pagination .swiper-pagination-bullet:nth-child(4)::after {
					background-image: url("/tv/wonderful_precure/assets/images/common/p_tumb_curelillian.webp");
				}
/* ------------------------------
		SNS ＆ 過去のプリキュア
------------------------------ */
.p-sns-past {
	position: relative;
	z-index: var(--zIndexLv2);
	padding-block: 60px 130px;
	background: #d4f1f9;
	background: url("/tv/wonderful_precure/assets/images/top/bg_past_sp.webp") no-repeat top center / cover;
}
@media print, screen and (min-width: 1025px) {
.p-sns-past {
		padding-block: 120px 230px;
		background: url("/tv/wonderful_precure/assets/images/top/bg_past.webp") no-repeat top center / cover
}
	}
/* sns */
@media print, screen and (min-width: 1025px) {
.p-sns .p-sns__inner {
			position: relative;
			display: flex;
			gap: 48px;
			align-items: center;
			justify-content: center;
			width: -moz-fit-content;
			width: fit-content
	}
	}
.p-sns .p-sns__title {
		position: relative;
		width: 190px;
		margin-inline: auto;
	}
@media print, screen and (min-width: 1025px) {
.p-sns .p-sns__title {
			position: static;
			width: 320px;
			margin-inline: 0px;
			translate: 0 -10px
	}
	}
.p-sns .p-sns__title-left {
		position: absolute;
		top: 32px;
		left: 40px;
		display: block;
		height: 70px;
	}
@media print, screen and (min-width: 1025px) {
.p-sns .p-sns__title-left {
			top: calc(50% - 24px);
			left: 0px;
			height: 140px;
			translate: -100% -50%;
	}
	}
.p-sns .p-sns__title-left img {
			display: block;
			height: 100%;
		}
.p-sns .p-sns__title-right {
		position: absolute;
		top: 32px;
		right: 40px;
		display: block;
		height: 70px;
	}
@media print, screen and (min-width: 1025px) {
.p-sns .p-sns__title-right {
			top: calc(50% - 24px);
			right: 0px;
			height: 140px;
			translate: 100% -50%;
	}
	}
.p-sns .p-sns__title-right img {
			display: block;
			height: 100%;
		}
.p-sns .p-sns__sns-list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		margin-top: 30px;
	}
@media print, screen and (min-width: 1025px) {
.p-sns .p-sns__sns-list {
			gap: 16px;
			margin-top: 0;
	}
	}
.p-sns .p-sns__sns-list .p-sns__sns-item {
			display: grid;
			place-items: center;
		}
.p-sns .p-sns__sns-list .p-sns__sns-item .p-sns__sns-link {
				display: grid;
				place-items: center;
				height: 60px;
				aspect-ratio: 1/1;
			}
@media print, screen and (min-width: 1025px) {
.p-sns .p-sns__sns-list .p-sns__sns-item .p-sns__sns-link {
					height: 80px;
			}
	}
.p-sns .p-sns__sns-list .p-sns__sns-item .p-sns__sns-link{

				transition: opacity 160ms linear;
}
.p-sns .p-sns__sns-list .p-sns__sns-item .p-sns__sns-link:focus-visible {
		opacity: .6;
	}
@media (hover: hover) and (pointer: fine) {
		.p-sns .p-sns__sns-list .p-sns__sns-item .p-sns__sns-link:hover {
		opacity: .6;
		}
	}
.p-sns .p-sns__sns-list .p-sns__sns-item .p-sns__sns-link img {
					display: block;
					filter: drop-shadow(0px 0px 10px rgba(82, 190, 233, 0.2)) drop-shadow(0px 0px 10px rgba(82, 190, 233, 0.2));
				}
/* 過去のプリキュア */
.p-past {
	margin-top: 38px;
	overflow: hidden;
}
@media print, screen and (min-width: 1025px) {
.p-past {
		padding-bottom: 0;
		margin-top: 100px;
}
	}
.p-past .p-past__title {
		position: relative;
		z-index: 2;
		display: block;
		width: 280px;
		margin: 0 auto -35px;
	}
@media print, screen and (min-width: 1025px) {
.p-past .p-past__title {
			width: 420px;
			margin: 0 auto 36px
	}
	}
.p-past .past-list {
		position: relative;
		z-index: 1;
		padding-inline: 12px;
		margin-top: 16px;
	}
@media print, screen and (min-width: 1025px) {
.p-past .past-list {
			margin-inline: auto;
			margin-top: -72px;
	}
	}
@media print, screen and (min-width: 1025px) {
.p-past .past-list .list-area .area-cols {
					display: flex;
					justify-content: space-between;
					padding: 80px 40px 40px;
					background: #fff9c5;
					border: 1px solid #ffe4a3;
					border-radius: 20px;
			}
	}
.p-past .past-list .list-area .area-cols .list-col {
					position: relative;
					display: flex;
					flex-shrink: 0;
					height: 100%;
					padding: 45px 20px 20px;
					background: #fff9c5;
					border: 1px solid #ffe4a3;
					border-radius: 12px;
				}
@media print, screen and (min-width: 1025px) {
.p-past .past-list .list-area .area-cols .list-col {
						width: 298px;
						padding: 0;
						background: transparent;
						border: 0;
						border-radius: 0;
						box-shadow: none;
				}
	}
.p-past .past-list .list-area .area-cols .list-col ul .list-item {
							padding-bottom: 10px;
						}
@media print, screen and (min-width: 1025px) {
.p-past .past-list .list-area .area-cols .list-col ul .list-item {
								padding-bottom: 15px;
						}
	}
.p-past .past-list .list-area .area-cols .list-col ul .list-item + .list-item {
								margin-top: 10px;
							}
@media print, screen and (min-width: 1025px) {
.p-past .past-list .list-area .area-cols .list-col ul .list-item + .list-item {
									margin-top: 15px
							}
	}
.p-past .past-list .list-area .area-cols .list-col ul .list-item a {
								position: relative;
								display: block;
								padding-left: 30px;
								font-weight: bold;
								color: $defaultTxtColor;
								transition: color 80ms linear;
							}
@media print, screen and (min-width: 1025px) {
.p-past .past-list .list-area .area-cols .list-col ul .list-item a {
									font-size: 1.4rem;
							}
	}
.p-past .past-list .list-area .area-cols .list-col ul .list-item a:focus-visible {
									color: var(--colorKeyText);
	}
@media (hover: hover) and (pointer: fine) {
		.p-past .past-list .list-area .area-cols .list-col ul .list-item a:hover {
									color: var(--colorKeyText);
		}
	}
.p-past .past-list .list-area .area-cols .list-col ul .list-item a:before {
									position: absolute;
									top: 50%;
									left: 0px;
									display: inline-block;
									width: 20px;
									aspect-ratio: 1/1;
									content: "";
									background: url("/tv/wonderful_precure/assets/images/top/i_arrow_past.webp") no-repeat center center / contain;
									translate: 0 -50%;
								}
.p-past .past-list .list-area .list-pagination {
				position: relative;
				bottom: auto;
				margin-top: 17px;
				line-height: 0.1;
			}
@media print, screen and (min-width: 1025px) {
.p-past .past-list .list-area .list-pagination {
					display: none;
			}
	}
.p-past .past-list .list-area .list-pagination .swiper-pagination-bullet {
					position: relative;
					width: 20px;
					height: 30px;
					margin: 0 5px;
					background: transparent;
					opacity: 1;
				}
.p-past .past-list .list-area .list-pagination .swiper-pagination-bullet:before {
						position: absolute;
						top: 50%;
						left: 50%;
						display: inline-block;
						width: 15px;
						height: 15px;
						margin: -7px 0 0 -7px;
						content: "";
						background: #fff;
						border: 2px solid var(--colorKey);
						border-radius: 50%;
					}
.p-past .past-list .list-area .list-pagination .swiper-pagination-bullet:after {
						position: absolute;
						top: 50%;
						left: 50%;
						display: inline-block;
						width: 34px;
						aspect-ratio: 1/1;
						content: "";
						background: url("/tv/wonderful_precure/assets/images/top/i_pagination_past.webp") no-repeat center center / contain;
						opacity: 0;
						translate: -50% -50%;
					}
.p-past .past-list .list-area .list-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
							opacity: 0;
						}
.p-past .past-list .list-area .list-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
							opacity: 1;
						}