@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-news-ttl {
	position: relative;
	padding-bottom: 35px;
}
@media print, screen and (min-width: 1025px) {
.p-news-ttl {
		padding-bottom: 40px;
}
	}
.p-news-ttl:before {
		position: absolute;
		right: 0px;
		bottom: 0px;
		left: 0px;
		display: inline-block;
		height: 18px;
		content: '';
		background: url(/tv/precure/assets/images/common/bg_heart_border.webp) top left repeat-x;
		background-size: 50px 18px;
	}
.p-news-ttl .ttl-info .info-date {
			font-weight: bold;
			color: var(--colorKeyText);
		}
@media print, screen and (min-width: 1025px) {
.p-news-ttl .ttl-info .info-date {
				font-size: 1.8rem
		}
	}
.p-news-ttl .ttl-info .info-cat {
			display: inline-block;
			padding: 4px 8px;
			margin-left: 10px;
			font-size: 1.0rem;
			line-height: 1;
			color: #ffffff;
			vertical-align: text-bottom;
			background: var(--colorKey);
			border-radius: 10px;
		}
@media print, screen and (min-width: 1025px) {
.p-news-ttl .ttl-info .info-cat {
				padding: 4px 15px;
				margin-left: 20px;
				font-size: 1.6rem;
				border-radius: 12px
		}
	}
.p-news-ttl .ttl-txt {
		margin-top: 10px;
		font-size: 2.0rem;
		font-weight: bold;
		line-height: var(--lineHeightTitle);
	}
@media print, screen and (min-width: 1025px) {
.p-news-ttl .ttl-txt {
			margin-top: 15px;
			font-size: 2.4rem
	}
	}
/* -----------------------------------------------------------------
プルダウン
----------------------------------------------------------------- */
.c-btn-pulldown {
	position: relative;
	display: block;
	margin-inline: auto;
	margin-bottom: 50px;
}
.c-btn-pulldown::after {
		position: absolute;
		top: 50%;
		right: 20px;
		z-index: 1;
		display: block;
		width: 12px;
		aspect-ratio: 1/1;
		content: "";
		background: url('/tv/precure/assets/images/common/icon_btn.webp') no-repeat center center / contain;
		rotate: 90deg;
		translate: 0% -50%;
	}
@media print, screen and (min-width: 1025px) {
.c-btn-pulldown{
		width: 250px;
	}
	}
.c-btn-pulldown select {
		width: 100%;
		padding-block: 4px;
		color: var(--white);
		-moz-text-align-last: center;
		     text-align-last: center;
		-webkit-appearance: none;
		   -moz-appearance: none;
		        appearance: none;
		cursor: pointer;
		background: var(--colorKey);
		border: none;
		border-radius: 999px;
		outline: none;
	}
@media print, screen and (min-width: 768px) {
.c-btn-pulldown select {
			padding-block: 12px
	}
	}