@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-main {}
[data-scroll-interaction] {
	opacity: 0;
	transition: transform 0.4s ease, opacity 0.4s ease;
	transform: translateY(30px);
}
[data-scroll-interaction="true"] {
	opacity: 1;
	transform: translateY(0);
}
.p-mv {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}
@media print, screen and (min-width: 768px) {
.p-mv {
		min-height: 400px;
		max-height: 722px;
		aspect-ratio: 1440 / 722;
}
	}
@media print, screen and (min-width: 768px) {
.p-mv::before {
			position: absolute;
			bottom: -1px;
			left: 0;
			z-index: 2;
			width: 100%;
			height: auto;
			aspect-ratio: 1440 / 104;
			content: "";
			background: url('/tv/wonderful_precure/assets/images/wonderful/mask_mv_pc.svg') center no-repeat;
			background-size: 100% 100%
	}
	}
.p-mv__img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}
.p-main__inner {
	padding-block: 40px 60px;
}
@media print, screen and (min-width: 768px) {
.p-main__inner {
		position: relative;
		z-index: 3;
		padding-block: 0px 80px;
		-webkit-margin-before: -30px;
		        margin-block-start: -30px
}
	}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.p-main__inner {
		-webkit-margin-before: 0;
		        margin-block-start: 0
}
	}
.p-main__ttl {
	font-size: 2.6rem;
	font-weight: bold;
	line-height: var(--lineHeightTitle);
	color: #622c23;
	text-align: center;
	letter-spacing: 0.2em;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.p-main__ttl {
		font-size: 4.2rem;
		text-align: center;
}
	}
@media print, screen and (min-width: 1025px) {
.p-main__ttl {
		font-size: 4.2rem;
		text-align: center;
}
	}
.p-main__text {
	-webkit-margin-before: 32px;
	        margin-block-start: 32px;
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 2;
	text-align: center;
}
@media print, screen and (min-width: 768px) {
.p-main__text {
		-webkit-margin-before: 40px;
		        margin-block-start: 40px;
		font-size: 2.1rem
}
	}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.p-main__text {
		font-size: 2.1rem
}
	}
.p-section {
	padding-block: 60px;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.p-section {
		padding-block: 90px;
}
	}
@media print, screen and (min-width: 1025px) {
.p-section {
		padding-block: 120px;
}
	}
.p-section.p-section--bg-orange {
		background: #FDFAF7;
	}
.p-section.p-section--lace-decoration {
		position: relative;
		padding-block: 92px 60px;
	}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.p-section.p-section--lace-decoration {
			padding-block: 145px 90px;
	}
	}
@media print, screen and (min-width: 1025px) {
.p-section.p-section--lace-decoration {
			padding-block: 175px 120px;
	}
	}
.p-section.p-section--lace-decoration::before {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 32px;
			content: "";
			background: url("/tv/wonderful_precure/assets/images/wonderful/p_lace.webp") repeat-x top center / auto 100%;
			filter: drop-shadow(0 10px 10px #F5ECDF);
		}
@media print, screen and (min-width: 768px) {
.p-section.p-section--lace-decoration::before {
				height: 55px
		}
	}
.p-section.p-section--footprints01 {
		-webkit-padding-after: 117px;
		        padding-block-end: 117px;
		overflow: hidden;
	}
@media print, screen and (min-width: 768px) {
.p-section.p-section--footprints01 {
			-webkit-padding-after: 120px;
			        padding-block-end: 120px
	}
	}
.p-section.p-section--footprints02 {
		overflow: hidden;
	}
.p-section__inner.p-section__inner--footprints01 {
		position: relative;
		z-index: 2;
	}
.p-section__inner.p-section__inner--footprints01::before {
			position: absolute;
			right: 0;
			bottom: -84px;
			z-index: -1;
			width: 227px;
			height: 293px;
			content: "";
			background: url("/tv/wonderful_precure/assets/images/wonderful/bg_footprints_01_sp.webp") no-repeat center;
			background-size: contain;
		}
@media print, screen and (min-width: 1025px) {
.p-section__inner.p-section__inner--footprints01::before {
				top: -82px;
				right: auto;
				bottom: auto;
				left: calc(100% + 10px);
				width: 247px;
				height: 270px;
				background: url("/tv/wonderful_precure/assets/images/wonderful/bg_footprints_01_pc.webp") no-repeat center;
				background-size: contain
		}
	}
@media print, screen and (min-width: 1025px) {
.p-section__inner.p-section__inner--footprints01::after {
				position: absolute;
				right: calc(100% + 60px);
				bottom: -45px;
				z-index: -1;
				width: 150px;
				height: 138px;
				content: "";
				background: url("/tv/wonderful_precure/assets/images/wonderful/bg_footprints_02_pc.webp") no-repeat center;
				background-size: contain
		}
	}
.p-section__inner.p-section__inner--footprints02 {
		position: relative;
		z-index: 2;
		-webkit-padding-after: 96px;
		        padding-block-end: 96px;
	}
.p-section__inner.p-section__inner--footprints02::before {
			position: absolute;
			bottom: 36px;
			left: -32px;
			z-index: -1;
			width: 209px;
			height: 307px;
			content: "";
			background: url("/tv/wonderful_precure/assets/images/wonderful/bg_footprints_02_sp.webp") no-repeat center;
			background-size: contain;
		}
@media print, screen and (min-width: 1025px) {
.p-section__inner.p-section__inner--footprints02::before {
				top: -76px;
				right: auto;
				bottom: auto;
				left: calc(100% - 8px);
				width: 146px;
				height: 150px;
				background: url("/tv/wonderful_precure/assets/images/wonderful/bg_footprints_03_pc.webp") no-repeat center;
				background-size: contain
		}
	}
@media print, screen and (min-width: 1025px) {
.p-section__inner.p-section__inner--footprints02::after {
				position: absolute;
				right: calc(100% + 5px);
				bottom: 5px;
				z-index: -1;
				width: 251px;
				height: 228px;
				content: "";
				background: url("/tv/wonderful_precure/assets/images/wonderful/bg_footprints_04_pc.webp") no-repeat center;
				background-size: contain
		}
	}
.p-text-ttl2 {
	position: relative;
	-webkit-padding-after: 32px;
	        padding-block-end: 32px;
	font-size: 2rem;
	font-weight: 500;
	text-align: center;
}
@media print, screen and (min-width: 768px) {
.p-text-ttl2 {
		-webkit-padding-after: 42px;
		        padding-block-end: 42px;
		font-size: 3rem;
		line-height:4rem;
}
	}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.p-text-ttl2 {
		font-size:3rem;
}
	}
.p-text-ttl2::before {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		max-width: 300px;
		height: 16px;
		margin: 0 auto;
		content: "";
		background: url("/tv/wonderful_precure/assets/images/wonderful/bg_ttl2.svg") no-repeat center;
		background-size: contain;
	}
@media print, screen and (min-width: 768px) {
.p-text-ttl2::before {
			max-width: 500px;
			height: 26px
	}
	}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.p-text-ttl2::before {
			max-width: 400px;
			height: 21px
	}
	}
.p-text-ttl2__inner {
	display: inline-block;
}
.p-text-p {
	-webkit-margin-before: 32px;
	        margin-block-start: 32px;
	font-size: 1.6rem;
	font-weight: 500;
}
@media print, screen and (min-width: 768px) {
.p-text-p {
		-webkit-margin-before: 40px;
		        margin-block-start: 40px
}
	}
.p-section__character {
	width: 158px;
	-webkit-margin-before: 40px;
	        margin-block-start: 40px;
	margin-inline: auto;
}
@media print, screen and (min-width: 768px) {
.p-section__character {
		width: 189px
}
	}
.p-section__character-img {
	width: 100%;
}
.p-section__picture {
	width: 100%;
	max-width: 636px;
	-webkit-margin-before: 40px;
	        margin-block-start: 40px;
	margin-inline: auto;
}
@media print, screen and (min-width: 768px) {
.p-section__picture {
		max-width: none;
		-webkit-margin-before: 80px;
		        margin-block-start: 80px
}
	}
.p-section__picture-img {
	width: 100%;
}
.p-section__col1to2 {
	-webkit-margin-before: 32px;
	        margin-block-start: 32px;
}
@media print, screen and (min-width: 768px) {
.p-section__col1to2 {
		display: grid;
		grid-template-columns: 0.381fr 0.619fr;
		gap: 3.7%;
		-webkit-margin-before: 40px;
		        margin-block-start: 40px
}
	}
.p-section__col1to2-img {
	width: 100%;
	max-width: 636px;
	margin: 0 auto;
}
.p-section__col1to2-img-src {
	width: 100%;
}
.p-section__col1to2-textbox {
	-webkit-margin-before: 32px;
	        margin-block-start: 32px;
}
@media print, screen and (min-width: 768px) {
.p-section__col1to2-textbox {
		-webkit-margin-before: 0;
		        margin-block-start: 0
}
	}
.p-section__col1to2-text {
	font-size: 1.6rem;
	font-weight: 500;
}
.p-section__col1to2-name {
	font-size: 1.8rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: right;
}
@media print, screen and (min-width: 768px) {
.p-section__col1to2-name {
		-webkit-margin-before: 32px;
		        margin-block-start: 32px;
		font-size: 2.4rem;
}
	}
.p-section__box {
	padding: 20px;
	border: 1px solid #B09590;
	border-radius: 10px;
}
@media print, screen and (min-width: 768px) {
.p-section__box {
		padding: 30px
}
	}
.p-section__box-text {
	font-size: 1.6rem;
	font-weight: 500;
}
/* header */
.p-header {
	position: absolute;
	z-index: var(--zIndexLv5);
	width: 100%;
}
.p-header__logo {
	width: -moz-fit-content;
	width: fit-content;
	margin-top: 15px;
	margin-left: auto;
}
@media print, screen and (min-width: 768px) {
.p-header__logo {
		margin-top: 10px;
		margin-left: 0
}
	}
.p-header__logo-link {
	display: block;
}
.p-header__logok-img {
	height: 60px;
}
@media print, screen and (min-width: 1025px) {
.p-header__logok-img {
		height: 72px
}
	}
/* footer */
.p-footer {
	position: relative;
	padding-block: 92px 40px;
	background: #FDFAF7;
}
@media print, screen and (min-width: 768px) {
.p-footer {
		padding-block: 147px 40px;
}
	}
.p-footer::before {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 32px;
		content: "";
		background: url("/tv/wonderful_precure/assets/images/wonderful/p_lace.webp") repeat-x top center / auto 100%;
		filter: drop-shadow(0 10px 10px #F5ECDF);
	}
@media print, screen and (min-width: 768px) {
.p-footer::before {
			height: 55px
	}
	}
.p-footer__inner {}
.p-footer__banner {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}
.p-footer__banner-item {
	width: 100%;
	max-width: 636px;
	margin: 0 auto;
}
@media print, screen and (min-width: 768px) {
.p-footer__banner-item {
		width: 300px;
		margin: 0
}
	}
.p-footer__banner-link {
	display: block;
	transition: opacity 160ms linear;
}
.p-footer__banner-link:focus-visible {
		opacity: .6;
	}
@media (hover: hover) and (pointer: fine) {
		.p-footer__banner-link:hover {
		opacity: .6;
		}
	}
.p-footer__banner-img {
	width: 100%;
}
.p-footer__copy {
	-webkit-margin-before: 50px;
	        margin-block-start: 50px;
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1;
	text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.p-footer__copy {
		-webkit-margin-before: 75px;
		        margin-block-start: 75px
}
	}
@media print, screen and (min-width: 1025px) {
.p-footer__copy {
		-webkit-margin-before: 80px;
		        margin-block-start: 80px
}
	}
@media print, screen and (min-width: 768px) {
.column560{width:auto;margin:0 auto;text-align:center;}
	}
@media print, screen and (min-width: 1025px) {
.column560{width:560px;margin:0 auto;text-align:center;}
	}