@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&family=Noto+Sans+JP:wght@400;500;700&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: 'Noto Sans JP', 'ヒラギノ角 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: #5d38b1;
	--colorKey50: #f9b5d4;
	--colorKey25: #fcdae9;
	--colorKeyText: #5d38b1;
	/* キャラ設定 */
	--colorCureidol: #ed2d7a;
	--colorCurewink: #4060ef;
	--colorCurekyunkyun: #a74eff;
	--colorPurirun: #55a248;
	--colorMeroron: #e795cd;
	/* イージング */
	--easeOutBack: cubic-bezier(0.4, 1.5, 0.64, 1.5);
	/* アスペクト比計算用 */
	--widthPC: 1440;
	--widthSP: 750;
	--heightCharacterPc: 700;
	--heightCharacterSp: 856;
}
.p-content__back {
	padding: 40px 15px;
	background-color: #fff;
}
@media print, screen and (min-width: 768px) {
.p-content__back {
		padding: 80px
}
	}
.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: 30px;
	margin-top: 15px;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
}
/* line-height: $lineHeightTtl; */
@media print, screen and (min-width: 1025px) {
.u-episodettl {
		padding-bottom: 50px;
		margin-top: 30px;
		font-size: 3.2rem;
}
	}
.u-episodettl::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		width: 100%;
		aspect-ratio: 65 / 3;
		margin: auto;
		content: '';
		background: url('https://precure-web.com/you-and-idol/assets/images/common/p_entry_line.png') center no-repeat;
		background-size: 100% auto;
	}
.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.6rem;
		font-weight: 500;
		/* line-height: $lineHeightTtl; */
		color: var(--colorKeyText);
	}
@media print, screen and (min-width: 1025px) {
.u-box-data .data-date {
			font-size: 1.8rem
	}
	}
.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: 0;
				}
.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: 0px;
				}
.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-staff {
	margin-top: 25px;
}
.u-staff .staff-ttl {
		position: relative;
		padding-left: 40px;
		font-size: 1.8rem;
		font-weight: bold;
		color: var(--colorKeyText);
	}
@media print, screen and (min-width: 768px) {
.u-staff .staff-ttl {
			padding-left: 52px;
			font-size: 3.2rem;
	}
	}
.u-staff .staff-ttl::before {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			display: block;
			width: 35px;
			aspect-ratio: 89 / 84;
			margin: auto;
			content: '';
			background: url('https://precure-web.com/you-and-idol/assets/images/common/news_h2_icon.png') center no-repeat;
			background-size: 100% auto;
		}
@media print, screen and (min-width: 768px) {
.u-staff .staff-ttl::before {
				width: 38px
		}
	}
.u-staff .c-txt-p {
		margin-top: 6px;
	}
/* .u-trailer {
	position: relative;
	margin-top: 72px;

	@mixin viewPc {
		margin-top: 124px;
	}

	.trailer-ttl {
		position: absolute;
		top: 24px;
		left: 50%;
		z-index: 10;
		width: 325px;
		margin-inline: auto;
		text-align: center;
		translate: -50% -100%;

		@mixin viewTabPc {
			width: 100%;
			padding-inline: 16px;
		}

		img {
			display: block;
			height: auto;
		}
	}
} */
.u-weekly {
	margin-top: 60px;
}
@media print, screen and (min-width: 1025px) {
.u-weekly {
		margin-top: 80px;
}
	}
.u-weekly .u-weekly__title{
		width:60%;
		margin-inline: auto;
		text-align: center;
	}
@media print, screen and (min-width: 768px) {
.u-weekly .u-weekly__title{
			width:100%;
			padding-inline: 16px;
	}
	}
.u-weekly .u-weekly__title img {
			display: block;
			width:100%;
		}
.u-weekly .u-weekly__movie {
		position: relative;
		width: 100%;
		aspect-ratio: 1300 / 1026;
		margin-top: 15px;
		background-image: url('https://precure-web.com/you-and-idol/assets/images/episode/p_story01_sp.png');
		background-size: contain;
	}
@media print, screen and (min-width: 768px) {
.u-weekly .u-weekly__movie {
			aspect-ratio: 1760 / 802;
			margin-top: 15px;
			background-image: url('https://precure-web.com/you-and-idol/assets/images/episode/p_story01.png');
	}
	}
.u-weekly .u-weekly__movie .u-weekly__movie-button {
			position: absolute;
			top: -16%;
			right: 0;
			bottom: 0;
			left: 0;
			width: 68%;
			aspect-ratio: 16 / 9;
			padding: 0;
			margin: auto;
			overflow: hidden;
			background: none;
			border: none;
		}
@media print, screen and (min-width: 768px) {
.u-weekly .u-weekly__movie .u-weekly__movie-button {
				top: -20%;
				width: 46%;
		}
	}
.u-weekly .u-weekly__movie .u-weekly__movie-button img {
				display: block;
				width: 100%;
				transition: scale 160ms ease-out;
			}
.u-weekly .u-weekly__movie .u-weekly__movie-button:focus-visible img {
					transition: scale 200ms var(--easeOutBack);
					scale: 1.1;
				}
@media (hover: hover) and (pointer: fine) {
				.u-weekly .u-weekly__movie .u-weekly__movie-button:hover img {
					transition: scale 200ms var(--easeOutBack);
					scale: 1.1;
				}
	}
.u-weekly .u-weekly__movie .u-weekly__movie-button::after {
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: 1;
				display: block;
				width: 40px;
				aspect-ratio: 1/1;
				content: "";
				background: url("https://precure-web.com/you-and-idol/assets/images/common/i_play.png") no-repeat center center / contain;
				border-radius: 50%;
				translate: -50% -50%;
			}
@media print, screen and (min-width: 1025px) {
.u-weekly .u-weekly__movie .u-weekly__movie-button::after {
					width: 80px
			}
	}
.u-preview {
	position: relative;
}
.u-preview .c-list-movie {
		grid-template-columns: 1fr;
		width:90%;
		margin:0 auto;
	}
.u-preview .c-list-movie .c-list-movie__modal {
			border: 4px solid var(--white);
			border-radius: 0;
			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)

		}
	}
.u-box-backnumber {
	position: relative;
	margin-top: 30px;
	border-radius: 10px;
}
@media print, screen and (min-width: 1025px) {
.u-box-backnumber {
		margin-top: 60px;
}
	}
.u-box-backnumber h2 {
		width: 60%;
	    margin: 50px auto 0px;
		text-align: center;
	}
@media print, screen and (min-width: 768px) {
.u-box-backnumber h2 {
		width: 60%;
        padding-inline: 16px;
        margin: 100px auto 30px;	
        }
	}
.u-box-backnumber h2 img {
			display: block;
			height: auto;
		}
.u-box-backnumber .u-backnumber {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 15px;
		margin-inline: auto;
		margin-top: 32px;
	}
@media print, screen and (min-width: 768px) {
.u-box-backnumber .u-backnumber {
			width: 480px;
			margin-top: 20px;
	}
	}
@media print, screen and (min-width: 1025px) {
.u-box-backnumber .u-backnumber {
			width: 720px;
			grid-template-columns: repeat(5, 1fr);
	}
	}
.u-box-backnumber .u-backnumber li .m-btn-def {
				display: block;
				padding: 6px 10px 7px;
				font-weight: bold;
				color: var(--colorKey);
				background: #fff;
				border: 2px solid var(--colorKey);
			}
.u-box-backnumber .u-backnumber li .m-btn-def.is-current {
					color: #fff;
					background: var(--colorKey);
				}
.u-box-backnumber .u-backnumber li .m-btn-def:focus-visible {
					color: #fff;
					background: var(--colorKey);
	}
@media (hover: hover) and (pointer: fine) {
		.u-box-backnumber .u-backnumber li .m-btn-def:hover {
					color: #fff;
					background: var(--colorKey);
		}
	}
.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: 30px;
}
	}
.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);
		}
	}