/*************************************************************************************
うたをよむ専用スタイル
*************************************************************************************/
/*sns buttons*/
.snsButtons {
	margin: 0 auto;
	width: 990px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.snsButtons_tw {
	margin-bottom: 3px;
}
.snsButtons_fb {
	width: 160px;
	height: 28px;
	overflow: hidden;
}

.snsButtons_fb .fb-like {
	margin: 0;
}

/*sns buttons launch*/
.snsButtons--start {
	margin: 0 auto;
	width: 990px;
	position: relative;
}
.snsButtons_tw--start {
	display: block;
	width: 78px;
	height: 20px;
	position: absolute;
	top: 5px;
	left: 725px;
	margin-bottom: 3px;
}
.snsButtons_fb--start {
	display: block;
	width: 170px;
	height: 20px;
	position: absolute;
	top: 4px;
	left: 810px;
}

.snsButtons_fb--start .fb-like {
	margin: 0;
}

/*背景*/
.uta-bg {
	padding-top: 1rem;
	width: 100%;
	height: 1000px;
	background: url(https://cf.mora.jp/cfdocs/pc/utawoyomu/img/bg_kaikin_pc.jpg) no-repeat center bottom / cover;
	animation: fadein 3s ease-out forwards;
}

.uta-bg__start {
	padding-top: 1rem;
	width: 100%;
	height: auto;
	background: url(https://cf.mora.jp/cfdocs/pc/utawoyomu/img/bg_launch_color_pc.jpg?20241216) no-repeat center top / cover;
	background-size: 100% 470px;
	animation: fadein 3s ease-out forwards;
}

@keyframes fadein {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.uta-inner {
	width: 990px;
	margin: 0 auto;
	padding-top: 40px;
}

/* うたをよむ ロゴSVGアニメーション*/
.logo__wrapper {
	width: 100%;
}

.logo__svg {
	margin: 0 auto;
	text-align: center;
	color: #121212;
}

/***************************************************
 * Generated by SVG Artista on 6/25/2024, 10:29:20 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
.cls-1 {
	fill-rule: evenodd;
}

.cls-1,
.cls-2 {
	fill: #121212;
	stroke-width: 0px;
}

svg .svg-elem-1 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-1 {
	fill: #121212
}

svg .svg-elem-2 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg-elem-2 {
	fill: #121212
}

svg .svg-elem-3 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg-elem-3 {
	fill: #121212
}

svg .svg-elem-4 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .svg-elem-4 {
	fill: #121212
}

svg .svg-elem-5 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

svg.active .svg-elem-5 {
	fill: #121212
}

svg .svg-elem-6 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.active .svg-elem-6 {
	fill: #121212
}

svg .svg-elem-7 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}

svg.active .svg-elem-7 {
	fill: #121212
}

svg .svg-elem-8 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

svg.active .svg-elem-8 {
	fill: #121212
}

svg .svg-elem-9 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s;
}

svg.active .svg-elem-9 {
	fill: #121212
}

svg .svg-elem-10 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s;
}

svg.active .svg-elem-10 {
	fill: #121212
}

svg .svg-elem-11 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s;
}

svg.active .svg-elem-11 {
	fill: #121212
}

svg .svg-elem-12 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.9000000000000001s;
}

svg.active .svg-elem-12 {
	fill: #121212
}

svg .svg-elem-13 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s;
}

svg.active .svg-elem-13 {
	fill: #121212
}

svg .svg-elem-14 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.1s;
}

svg.active .svg-elem-14 {
	fill: #121212
}

svg .svg-elem-15 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s;
}

svg.active .svg-elem-15 {
	fill: #121212
}

svg .svg-elem-16 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.3s;
}

svg.active .svg-elem-16 {
	fill: #121212
}

svg .svg-elem-17 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4000000000000004s;
}

svg.active .svg-elem-17 {
	fill: #121212
}

svg .svg-elem-18 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.5s;
}

svg.active .svg-elem-18 {
	fill: #121212
}

svg .svg-elem-19 {
	fill: transparent;
	-webkit-transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
	transition: fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s;
}

svg.active .svg-elem-19 {
	fill: #121212
}

/*うたをよむとは*/
.about {
	margin: 0 auto;
	padding: 20px;
	width: 950px;
	text-align: center;
}

.about__text {
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	display: inline-block;
	text-align: left;
	line-height: 1.7;
	margin: 0 auto;
	padding: 20px;
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	color: #121212;
	/*white-space: pre-line;*/ /* 改行を反映させるためのスタイル */
}

.about__text--start {
	color: #121212;
}

/*1文字ずつ文字が出現*/
.eachTextAnime {
	opacity: 0;
	transition: opacity 2s ease;
}

.eachTextAnime span {
	opacity: 0;
	display: inline-block;
	transition: opacity 2s ease; /* 1秒かけて透明度を変化させる */
}

.eachTextAnime.appeartext span {
	animation: text_anime_on 1s ease-out forwards;
}

@keyframes text_anime_on {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.opensoon__text {
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 40px;
	color: #121212;
	padding-top: 200px;
	padding-bottom: 20px;
	text-align: center;
}

/*うたよみびと*/
.utayomibito {
	margin: 0 auto;
	padding-top: 60px;
	padding-bottom: 100px;
	width: 990px;
	text-align: center;
}

.utayomibito__heading {
	text-align: center;
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 40px;
	position: relative;
}

.utayomibito__heading::before {
	position: absolute;
	top: -60px;
	left: 50%;
	transform: translateX(-50%);
	color: #e8e8e8;
	font-size: 100px;
	content: "Utayomibito";
	z-index: -1;
	font-family: "relation-two", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.utayomibito__artist {
	display: flex;
	flex-wrap: wrap;
	/*gap: 60px; 各画像間の余白は60px */
	justify-content: center; /* 水平方向の中央揃え */
	align-items: center; /* 各アイテムを垂直方向で中央揃え */
	width: 990px; /* コンテナの横幅 */
	margin: 0 auto; /* 中央揃え */
	padding: 40px 0; /* デフォルトのパディングを取り除く */
	list-style: none; /* リストスタイルを無効にする */
}

.utayomibito__artist li {
	width: calc((990px - 3 * 60px) / 4); /* 各画像がそのグリッドセル内で100%の幅を持つように設定 */
	margin: 0 60px 60px 0;
	height: auto;
	font-size: 18px;
	font-family: ten-mincho, serif;
}

.utayomibito__artist li:nth-child(4n) {
	margin-right: 0;
}

.utayomibito__artist img {
	width: 100%;
	height: auto; /* 画像の高さは自動で調整される */
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* シャドウを設定 */
	display: block;
	margin-bottom: 10px;
}

/*広告枠のclearfix*/
.special_adBox::after {
	content: "";
	display: block;
	clear: both;
}

/*キャッチコピー*/
.intro__wrapper {
	width: 990px;
	margin: 0 auto;
    text-align:center;
}

.intro__title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #121212;
}

.intro__text {
  font-size: 16px;
  margin: 8px 0;
  line-height: 1.6;
  color: #121212;
}

/*作品*/
.works__wrapper {
	width: 990px;
	margin: 100px auto 0;
}

.works__header {
	text-align: center;
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 40px;
	position: relative;
	padding-bottom: 40px;
}

.works__header::before {
	position: absolute;
	top: -60px;
	left: 50%;
	transform: translateX(-50%);
	color: #e8e8e8;
	font-size: 100px;
	content: "Works";
	z-index: -1;
	font-family: "relation-two", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.notice {
	font-size: 12px;
	color: #121212;
	text-align: center;
}

.works__container {
	width: 100%;
	padding: 40px 0;
	color: #121212;
	text-align: center;
}

.works__block {
	display: grid;
	grid-template-columns: repeat(3, 300px);
    justify-content: center;
    gap: 80px 45px;
}

/* ラスト行を中央寄せ */
.works__row-last {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 45px;
}


.works__aritst-name {
	position: relative;
	display: inline-block;
	width: calc(100% - 40px);
	text-align: center;
	font-size: 18px;
	padding: 10px 20px;
	background: #fff;
	border-top: 1px solid #c0c0c0;
	border-bottom: 1px solid #c0c0c0;
	margin: 0 auto;
	font-family: ten-mincho, serif;
	font-weight: 400;
}

.works__aritst-name::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 50%; /* 上半分のみ表示 */
	width: 1px; /* ボーダーの幅 */
	background: #c0c0c0; /* ボーダーの色 */
}

.works__aritst-name::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	height: 50%; /* 下半分のみ表示 */
	width: 1px; /* ボーダーの幅 */
	background: #c0c0c0; /* ボーダーの色 */
}

.works__artist {
	width: 450px; /* カラムの幅を50%に設定し、間隔を調整 */
	margin-right: 80px; /* カラム間の余白 */
	padding-bottom: 80px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
}

.works__artist:nth-child(2n) {
	margin-right: 0;
}

.works__artist:last-child {
	margin-right: 0;
	padding-bottom: 0;
}

/*アーティスト3カラム*/
.works__artist--triple {
    width: 300px;
    display:flex;
    flex-direction:column;
    height:100%;
}

.works__block > .works__artist--triple:nth-child(3n) {
    justify-self: center;
}

.works__title-wrapper {
	padding-top: 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
}

.works__title-block {
	width: 200px;
	text-align: center;
	margin-right: 50px;
}

.works__title-block:nth-child(2n) {
	margin-right: 0;
}

.works__title-block img {
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
	margin-bottom: 10px;
}

.works__title-block a:hover {
	opacity: 0.7;
}

.works__title {
	font-size: 16px;
	margin-bottom: 15px;
	font-family: ten-mincho, serif;
	font-weight: 400;
}

.works__title-info {
	padding-bottom: 15px;
}

.works__delivery {
	font-size: 14px;
}

.buyBtnBox {
	position: static;
	width: 100%;
	font-family: Arial;
	display: block;
	position: relative;
	margin: 5px auto;
	text-align: center;
	font-size: 14px;
	border: 1px solid #333;
	border-radius: 3px;
	line-height: 25px;
}

.buyBtn.hires:before {
	content: "Hi-Res";
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.buyBtn a {
	width: 100%;
	height: 100%;
	background: transparent url(https://cf.mora.jp/cfdocs/pc/special/img/ie_bg.png) 0 0 repeat;
	display: block;
	top: 0;
	left: 0;
	position: absolute;
}

.buyBtn:hover {
	background-color: #eee;
}

/* もっと見るボタン */
.works__more {
	margin: 0 auto;
	position: relative;
	display: block;
	width: 280px;
	padding: 15px 0;
	background-color: #fff;
	border: 1px solid #121212;
	border-radius: 3px;
	font-size: 16px;
	color: #121212;
	text-decoration: none;
	text-align: center;
	cursor: pointer; /* マウスカーソルをポインターに変更してクリック可能を示す */
	transition: background-color 0.3s ease, border-color 0.3s ease; /* スムーズなスタイル変更 */
}

.works__more:hover {
	background-color: #f0f0f0; /* ホバー時に背景色を変えてクリック感を出す */
	border-color: #888; /* ボーダーの色を変更 */
}

/* もっと見るボタンのアイコン */
.works__more::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 27px;
	width: 9px;
	height: 9px;
	margin: auto;
	border-top: 2px solid #121212;
	border-right: 2px solid #121212;
	transform: translateY(-2px) rotate(135deg);
	box-sizing: border-box;
}

/* 閉じるボタン */
.works__close {
	margin: 80px auto 0;
	position: relative;
	display: block;
	width: 280px;
	padding: 15px 0;
	background-color: #fff;
	border: 1px solid #121212;
	border-radius: 3px;
	font-size: 16px;
	color: #121212;
	text-decoration: none;
	text-align: center;
	cursor: pointer; /* マウスカーソルをポインターに変更 */
	transition: background-color 0.3s ease, border-color 0.3s ease; /* スムーズなホバー効果 */
}

.works__close:hover {
	background-color: #f0f0f0; /* ホバー時に背景色を変更 */
	border-color: #888; /* ボーダーの色を変更 */
}

/* 閉じるボタンのアイコン */
.works__close::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 27px;
	width: 9px;
	height: 9px;
	margin: auto;
	border-top: 2px solid #121212;
	border-right: 2px solid #121212;
	transform: translateY(2px) rotate(315deg);
	box-sizing: border-box;
}

/*お知らせ*/
.news__wrapper {
	width: 990px;
	margin: 0 auto;
	padding-top: 120px;
}

.news__header {
	text-align: center;
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 40px;
	position: relative;
	padding-bottom: 40px;
}

.news__header::before {
	position: absolute;
	top: -60px;
	left: 50%;
	transform: translateX(-50%);
	color: #e8e8e8;
	font-size: 100px;
	content: "News";
	z-index: -1;
	font-family: "relation-two", sans-serif;
	font-weight: 400;
	font-style: normal;
}

/* RSS feed*/
ul#feed-utawoyomu {
	margin: 2%;
	overflow: hidden;
	color: #121212;
	text-align: center;
}

li.rss-thumbnail {
	font-size: 16px;
	list-style: none;
	padding: 20px;
	border-bottom: 1px dotted #ccc;
}

li.rss-thumbnail:hover {
	background-color: #e8e8e8;
}

.feed-utawoyomuBox .meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

span.date {
	width: 15%;
	text-align: left;
	font-size: 14px;
}

.tit {
	width: 85%;
	text-align: left;
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
}

.tit a {
	display: block;
}

.tit span {
	font-size: 16px;
}

/* News もっと見るボタン*/
.news__more {
	margin: 40px auto;
	position: relative;
	display: block;
	width: 280px;
	padding: 15px 0;
	background-color: #fff;
	border: 1px solid #121212;
	border-radius: 3px;
	font-size: 16px;
	color: #121212;
	text-decoration: none;
	text-align: center;
	cursor: pointer; /* マウスカーソルをポインターに変更してクリック可能を示す */
	transition: background-color 0.3s ease, border-color 0.3s ease; /* スムーズなスタイル変更 */
}

.news__more:hover {
	background-color: #f0f0f0; /* ホバー時に背景色を変えてクリック感を出す */
	border-color: #888; /* ボーダーの色を変更 */
}

/* News もっと見るボタンのアイコン */
.news__more::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 27px;
	width: 9px;
	height: 9px;
	margin: auto;
	border-top: 2px solid #121212;
	border-right: 2px solid #121212;
	transform: translateY(-2px) rotate(45deg);
	box-sizing: border-box;
}


/*うたをよむとは*/
.about__wrapper {
	width: 990px;
	margin: 0 auto;
	padding: 120px 0;
	background: url(https://cf.mora.jp/cfdocs/pc/utawoyomu/img/bg_launch_about.jpg) no-repeat center / contain;
}

.about__header {
	text-align: center;
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 40px;
	position: relative;
	padding-bottom: 20px;
}

.about__header::before {
	position: absolute;
	top: -60px;
	left: 50%;
	transform: translateX(-50%);
	color: #e8e8e8;
	font-size: 100px;
	content: "About";
	z-index: -1;
	font-family: "relation-two", sans-serif;
	font-weight: 400;
	font-style: normal;
}

/*アンカーリンク*/
.anchor__artist-list {
    list-style: none; /* リストの点を非表示 */
    margin: 60px auto 0;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width:990px;
}

.anchor__artist-list .artist-item {
    width: calc(14.28% - 32px); /* 7分割 (100% / 7) */
    box-sizing: border-box;
    margin: 16px; /* 余白を設定 */
}

.anchor__artist-list .artist-item a {
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.3s ease; /* 透明度の変化を滑らかに */
}

/* 下向き矢印 (疑似要素) */
.anchor__artist-list .artist-item a::after {
    content: ""; /* 疑似要素を表示 */
    width: 10px;
    height: 10px;
    border: solid #333; /* 枠線の色 */
    border-width: 0 0 2px 2px; /* 下と左だけ枠線を表示 */
    transform: rotate(-45deg); /* 矢印の形に回転 */
    margin-top: 4px;
    display: inline-block;
    box-sizing: border-box;
}

.anchor__artist-list .thumbnail {
    width: 100%; /* 親要素の幅に合わせる */
    height: auto; /* 高さは縦横比を維持 */
    aspect-ratio: 1 / 1; /* 縦横比を正方形に */
    background: #ccc; /* 仮の背景色 */
    border-radius: 5px;
    overflow: hidden; /* 子要素がはみ出さないように */
    display: flex; /* 中央配置用 */
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 1s forwards; /* フェードイン */
    transition: opacity 0.3s ease;
}

/* ホバー時のサムネイル */
.anchor__artist-list .artist-item a:hover {
    opacity: 0.7; /* ホバー時に透明度を0.7に */
}

/* アーティスト名 */
.anchor__artist-list .artist-name {
    margin: 8px 0 0;
    font-size: 14px;
}

/* フェードインアニメーション */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* まとめ買いJK */
.setPic {
    max-width: 250px;
    margin: 20px auto;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.setPic:hover {
    opacity:0.7;
}


/* まとめ買いボタン */
.setBtn {
	margin: 0 auto;
	position: relative;
	display: block;
	width: 100%;
	padding: 10px 0;
	border: 0;
	border-radius: 3px;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	cursor: pointer; /* マウスカーソルをポインターに変更してクリック可能を示す */
	transition: background-color 0.3s ease, /* スムーズなスタイル変更 */
}

.setBtn:hover {
	background-color: #f0f0f0; /* ホバー時に背景色を変えてクリック感を出す */
	opacity:0.7;
}

/* まとめ買いボタンのアイコン */
.setBtn::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 27px;
	width: 9px;
	height: 9px;
	margin: auto;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translateY(-2px) rotate(45deg);
	box-sizing: border-box;
}

.setBtn.mimori { background: #45B870;}
.setBtn.uesaka { background: #9974C2;}
.setBtn.aimi { background: #5869AF;}
.setBtn.aiba { background: #EF853B;}
.setBtn.mizuno { background: #7497FE;}
.setBtn.nanjo { background: #C9985D;}
.setBtn.yano { background: #EC515B;}



/* 曲とコメントまわり*/
.songWrapper {
    width: 100%;
    display:flex;
    flex-direction:column;
    flex-grow:1;
    justify-content:space-between;
}

.songList {
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
    display:flex;
    flex-direction: column;
}

.songItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}

.songTitle {
    width: 150px;
    text-align:left;
    font-size: 14px;
    flex-grow:1;
}

.songTitle strong {
    padding-left:5px;
}

.songBtn {
    width:78px;
    height:25px;
    background-color: white;
    border: 1px solid #08112E;
    border-radius: 3px;
    padding: 4px 10px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease,
}

.songBtn:hover {
    background-color: #eee;
}

.commentBox {
    display:flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #f3f3f3;
    padding: 10px;
    margin-top:10px;
    font-size: 14px;
    text-align: left;
}

.commentBox p {
    margin-left:5px;
}

#videoTagAuditionWrapper {
    display:none;
}