@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;
	--colorTyokkiri: #68343c;
	/* イージング */
	--easeOutBack: cubic-bezier(0.4, 1.5, 0.64, 1.5);
	/* アスペクト比計算用 */
	--widthPC: 1440;
	--widthSP: 750;
	--heightCharacterPc: 700;
	--heightCharacterSp: 856;
}
.m-list-thumb {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 30px;
}
@media print, screen and (min-width: 1025px) {
.m-list-thumb {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
		margin-top: 40px;
}
	}
.m-list-thumb > li {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		gap: 0;
		background: var(--white);
	}
.m-list-thumb > li a {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 3;
			overflow: hidden;
			font-size: 1.2rem;
			border: 2px solid var(--colorKeyText);
			box-shadow: 0 0 20px 0 rgba(234, 79, 152, 0.15);
		}
@media print, screen and (min-width: 1025px) {
.m-list-thumb > li a {
				border: 3px solid var(--colorKeyText);
		}
	}
.m-list-thumb > li a:focus-visible {
				text-decoration: none;
	}
.m-list-thumb > li a:focus-visible .thumb-img img {
						transform: scale(1.1);
					}
@media (hover: hover) and (pointer: fine) {
		.m-list-thumb > li a:hover {
				text-decoration: none;
		}
					.m-list-thumb > li a:hover .thumb-img img {
						transform: scale(1.1);
					}
	}
.m-list-thumb > li a .thumb-img {
				position: relative;
				display: block;
				padding-top: 100%;
				overflow: hidden;
			}
.m-list-thumb > li a .thumb-img img {
					position: absolute;
					top: 0px;
					right: 0px;
					bottom: 0px;
					left: 0px;
					max-width: 83%;
					height: 100%;
					max-height: 83%;
					margin: auto;
					transition: 200ms var(--easeOutBack);
					-o-object-fit: contain;
					   object-fit: contain;
				}
.m-list-thumb > li a .thumb-title {
				padding-inline: 15px;
				font-size: 1.2rem;
				font-weight: 700;
				letter-spacing: 0.05em;
			}
@media print, screen and (min-width: 1025px) {
.m-list-thumb > li a .thumb-title {
					padding-inline: 20px;
					font-size: 1.4rem
			}
	}
.m-list-thumb > li a .thumb-data {
				position: relative;
				display: flex;
				flex-direction: column;
				gap: 4px;
				padding-block: calc(100% * 47 / 595) 15px;
				margin-inline: 15px;
				margin-top: 15px;
			}
.m-list-thumb > li a .thumb-data::before {
					position: absolute;
					top: 0;
					right: 0;
					left: 0;
					display: block;
					width: 100%;
					aspect-ratio: 595 / 47;
					margin: auto;
					content: '';
					background: url('/tv/precure/assets/images/book/p_nav_border02_sp.png') center no-repeat;
					background-size: 100% auto;
				}
@media print, screen and (min-width: 1025px) {
.m-list-thumb > li a .thumb-data{
					flex-direction: row;
					gap: 20px;
					align-items: center;
					padding-block: calc(100% * 3 / 41) 20px;
					margin-inline: 20px;
					margin-top: 10px;
	}

					.m-list-thumb > li a .thumb-data::before {
						position: absolute;
						top: 0;
						right: 0;
						left: 0;
						display: block;
						width: 100%;
						aspect-ratio: 41 / 3;
						margin: auto;
						content: '';
						background: url('/tv/precure/assets/images/book/p_nav_border02.png') center no-repeat;
						background-size: 100% auto;
					}
	}
.m-list-thumb > li a .data-date {
				position: relative;
				display: inline-flex;
				gap: 5px;
				align-items: center;
				font-size: 1.2rem;
				font-weight: bold;
				color: var(--colorKeyText);
			}
.m-list-thumb > li a .data-date:before {
					display: inline-block;
					width: 16px;
					height: 16px;
					content: '';
					background: var(--colorKeyText);
					-webkit-mask-image: url('/tv/precure/assets/images/bluraydvd/i_calendar.svg');
					        mask-image: url('/tv/precure/assets/images/bluraydvd/i_calendar.svg');
					-webkit-mask-repeat: no-repeat;
					        mask-repeat: no-repeat;
					-webkit-mask-position: center;
					        mask-position: center;
					-webkit-mask-size: contain;
					        mask-size: contain;
				}
@media print, screen and (min-width: 1025px) {
.m-list-thumb > li a .data-date{
					font-size: 1.4rem;
	}
	}
.m-list-thumb > li a .data-cat {
				position: relative;
				display: inline-flex;
				gap: 5px;
				align-items: center;
				font-size: 1.2rem;
				font-weight: bold;
				color: var(--colorKeyText);
			}
.m-list-thumb > li a .data-cat:before {
					display: inline-block;
					width: 16px;
					height: 16px;
					content: '';
					background: var(--colorKeyText);
					-webkit-mask-image: url('/tv/precure/assets/images/bluraydvd/i_bul-ray.svg');
					        mask-image: url('/tv/precure/assets/images/bluraydvd/i_bul-ray.svg');
					-webkit-mask-repeat: no-repeat;
					        mask-repeat: no-repeat;
					-webkit-mask-position: center;
					        mask-position: center;
					-webkit-mask-size: contain;
					        mask-size: contain;
				}
@media print, screen and (min-width: 1025px) {
.m-list-thumb > li a .data-cat{
					font-size: 1.4rem;
	}
	}
.p-table-common {
	width: 100%;
	margin-top: 24px;
	border: 2px solid #ed2d7a;
}
@media print, screen and (min-width: 768px) {
.p-table-common {
		margin-top: 0;
}
	}
.p-table-common tr + tr {
			border-top: 2px solid #ed2d7a;
		}
.p-table-common tr th {
			width: 30%;
			min-width: 120px;
			font-weight: bold;
			color: #ed2d7a;
			background: #fce0eb;
		}
.p-table-common tr th,
		.p-table-common tr td {
			padding: 10px 15px;
			text-align: left;
		}
.m-list-label {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
@media print, screen and (min-width: 768px) {
.m-list-label {
		gap: 20px;
}
	}
.m-list-label .label-cat {
		font-size: 1.6rem;
		color: var(--colorKey);
	}
@media print, screen and (min-width: 768px) {
.m-list-label .label-cat {
			font-size: 1.8rem
	}
	}
.m-list-label .label-disc {
		padding: 3px 12px;
		font-size: 1.2rem;
		color: #fff;
		background: var(--colorKey);
		border-radius: 14px;
	}
@media print, screen and (min-width: 768px) {
.m-list-label .label-disc {
			padding-inline: 16px;
			font-size: 1.4rem;
			border-radius: 16px
	}
	}
.m-list-label li {
		position: relative;
		font-weight: bold;
	}
@media print, screen and (min-width: 1025px) {
	}
.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
	}
	}
.entry-book {
	position: relative;
	padding-top: calc(100% * 3 / 65 + 20px);
}
.entry-book::before {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		display: block;
		width: 100%;
		aspect-ratio: 65 / 3;
		margin: auto;
		content: '';
		background: url('/tv/precure/assets/images/common/p_entry_line.png') center no-repeat;
		background-size: 100% auto;
	}
@media print, screen and (min-width: 768px) {
.entry-book{
		padding-top: calc(100% * 3 / 65 + 40px);
	}
	}
.content-area {
	padding: 34px 15px 20px;
	background-color: var(--white);
}
@media print, screen and (min-width: 768px) {
.content-area {
		padding: 80px 80px 60px
}
	}
.p-bluraydvd-ttl {
	position: relative;
	padding-bottom: 15px;
}
@media print, screen and (min-width: 1025px) {
.p-bluraydvd-ttl {
		padding-bottom: 20px;
}
	}
.p-bluraydvd-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-bluraydvd-ttl .ttl-txt {
			margin-top: 15px;
			font-size: 2.4rem
	}
	}
.p-content__image img {
		display: block;
		width: 100%;
	}
.p-box-sort.p-box-sort-mt {
		margin-top: 60px;
	}
@media print, screen and (min-width: 768px) {
.p-box-sort.p-box-sort-mt {
			margin-top: 80px
	}
	}
.p-box-sort .sort-ttl img {
			display: block;
			width: 100%;
		}
.p-purchase__button {
	margin-top: 20px;
}
@media print, screen and (min-width: 768px) {
.p-purchase__button {
		margin-top: 40px;
}
	}
.p-purchase__button .p-purchase__button-link {
		display: block;
		width: 240px;
		margin-inline: auto;
		transition: all 0.3s ease-out;
	}
.p-purchase__button .p-purchase__button-link:focus-visible {
		animation: hoverPush 340ms linear;
	}
@media (hover: hover) and (pointer: fine) {
		.p-purchase__button .p-purchase__button-link:hover {
		animation: hoverPush 340ms linear;
		}
	}
@media print, screen and (min-width: 768px) {
.p-purchase__button .p-purchase__button-link {
			width: 272px;
			margin-inline: 0;
	}
	}
.p-purchase__button .p-purchase__button-link img {
			display: block;
			width: 100%;
		}

.p-bluraydvd__card{
	margin-top: 20px;
}
.p-bluraydvd__card img {
	width: 190px;
	margin: auto;
	display: block;
}
@media print, screen and (min-width: 768px) {
	.p-bluraydvd__card {
		margin-top: 10px;
	}
	.p-bluraydvd__card img{
		width: 18.269230769230766vw;
		max-width: 190px;
	}
}