@charset "utf-8";

body {
	background-color: #F2F2F2;
}

/*============================
ヘッダー
============================*/
header {
	transition: transform 0.5s 0.3s;
}

@media screen and (max-width: 640px) {
	header {
		/* スマホ用の記述 */
	}
}

/* --------- 以下、必要に応じて有効化 ---------- */

/* ヘッダーが上に消える
header.hide {
	transform: translateY(-1.50rem);
}
*/

/* スクロールで表示された状態
header.scr {
	background-color: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
*/

main {
}

.contents {
	max-width: 3.90rem;
	margin: auto;
	position: relative;
	z-index: 1;
	background-color: #FFF;
	@media screen and (max-width: 640px) {
		max-width: 100%;
	}
	img {
		display: block;
		max-width: 100%;
	}
	/* ジャケット */
	.img {
		padding: 0.20rem;
		img {
			box-shadow: 0 0.04rem 0.10rem rgba(0,0,0,0.2);
		}
	}
	/* ロゴ */
	.logo {
		width: 1.20rem;
		margin: auto;
		padding-top: 0.20rem;
	}
	/* リリース情報 */
	.release {
		text-align: center;
		font-family: "Noto Serif JP", serif;
		padding: 0.20rem 0;
		.date {
			font-size: 0.22rem;
			font-weight: 600;
		}
		.format {
			padding-top: 0.25rem;
			.ttl {
				padding-bottom: 0.05rem;
				span {
					background-color: #222;
					padding: 0.02rem 0.04rem 0.03rem;
					display: inline-block;
					color: #FFF;
					letter-spacing: 0.10em;
					font-size: 0.10rem;
					font-weight: 600;
				}
			}
			.txt {
				font-size: 0.12rem;
				font-weight: 600;
				line-height: 1.65;
			}
			.label_logo {
				padding-top: 0.10rem;
				max-width: 1.00rem;
				margin: auto;
			}
		}
	}

	/* 作品情報 */
	.product_info {
		font-family: "Noto Serif JP", serif;
		padding: 0.20rem 0.30rem 0.50rem;
		.txt {
			font-size: 0.14rem;
			letter-spacing: 0;
			line-height: 2.12;
			text-align: justify;
		}
	}

	/* YouTube */
	.yt_box {
		position: relative;
		width: 100%;
		padding-top: 56.25%;
		iframe {
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: calc(100% + 1px);
		}
	}

	/* 視聴・問い合わせ */
	.main_buy_wrap {
		background-color: #222;
		padding: 0.20rem 0.30rem 0.30rem;
		text-align: center;
		color: #FFF;
		font-family: "Noto Serif JP", serif;
		.ttl {
			font-size: 0.15rem;
			font-weight: 700;
			padding-bottom: 0.15rem;
			padding-top: 0.20rem;
		}
		.txt {
			padding-bottom: 0.10rem;
			font-size: 0.13rem;
			font-family: "Inter", sans-serif;
			a {
				font-weight: 500;
				font-size: 0.13rem;
				color: #FFF;
				text-decoration: underline;
			}
		}
		hr {
			height: 0.20rem;
			border-top: 0;
			border-bottom: 1px solid rgba(255,255,255,0.2);
		}
	}

	/* 取り扱い店舗 */
	.shop_list_wrap {
		padding: 0.40rem 0.30rem;
		font-family: "Noto Serif JP", serif;
		.ttl {
			font-size: 0.18rem;
			font-weight: 700;
			padding-bottom: 0.10rem;
			text-align: center;
			position: relative;
		}
		.caption {
			font-size: 0.12rem;
			text-align: center;
		}
		.shop_list {
			position: relative;
			padding-top: 0.30rem;
			padding-bottom: 0.50rem;
			&::before {
				content: "";
				width: 1px;
				height: 0.20rem;
				background-color: #222;
				margin: 0 auto -0.10rem;
				display: block;
			}
			.detail {
				padding-top: 0.40rem;
				text-align: center;
				.shop_name {
					font-size: 0.15rem;
					font-weight: 700;
					padding-bottom: 0.10rem;
				}
				a {
					display: block;
					font-family: "Inter", sans-serif;
					font-size: 0.12rem;
					font-weight: 400;
					text-decoration: underline;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #222;
				}
			}
		}
	}

	/* プロフィール */
	.profile {
		background-color: #F2F2F2;
		padding: 0.50rem 0.30rem;
		font-family: "Noto Serif JP", serif;
		.name {
			font-size: 0.16rem;
			font-weight: 600;
			text-align: center;
			padding-bottom: 0.20rem;
		}
		.txt {
			font-size: 0.13rem;
			line-height: 1.91;
		}
		.insta {
			width: 0.30rem;
			padding-top: 0.20rem;
			margin: auto;
		}
	}
}

footer {
	padding: 0.40rem 0;
	text-align: center;
	font-family: "Inter", sans-serif;
	font-size: 0.11rem;
	line-height: 1.5;
	position: relative;
	&::before {
		content: "";
		width: calc(100% - 0.60rem);
		height: 1px;
		background-color: #CCC;
		position: absolute;
		top: 0;
		left: 0.30rem;
	}
}