/*
Theme Name: AFFINGER Child
Template: affinger
Description: AFFINGER6 対応
Version: 20210719
*/

/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px) {

	.st-pagelink-in{
		padding-top:0;
	}
	.next.page-numbers {
		position: static;
		width: auto;
	}

	/*-- ここまで --*/
}
	
/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {


	/*-- ここまで --*/
}	
	
/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) {

	#wrapper{
		overflow:hidden;
	}
	.codoc-originalcss {
		line-height: 1.6;
		padding: 0 10%;
		margin-bottom: -8px;
	}
	.codoc-waku {
		padding: 0 12%;
	}

	#searchcategory select {
		width: 150px;
	}	

	#subnews-box div {
		padding: 0 10px 10px;
	}
	#subnews-box div.rss-bar {
		font-size: 14px;

	}
	#subnews-box dt {
		font-size: 14px;
		margin-bottom: 5px;
		padding-bottom: 5px;
		float: left;
		width: 90px;
		clear: both;
	}
	#subnews-box dd {
		padding-left: 100px;
		padding-bottom: 5px;
		font-size: 14px;
		margin-bottom: 10px;
	}
	#subnews-box div dl dd a {
		text-decoration: none;
	}

	
	/*-- ここまで --*/
}

/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {

	/* アドセンスのマージンを調整 */
	main .adbox {
		margin: -10px 0px 0px 20px ;
	}
	/*-- ここまで --*/
}

/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {

	.codoc-originalcss {
		line-height: 1.6;
		padding: 0 1.5%;
		margin-bottom: -8px;
	}

	#searchcategory select {
		width: 90px;
	}	

	/*-- ここまで --*/
}


/* 全幅にする要素用 */
div.wide-wrap{
	position:relative;
	margin:0 calc(50% - 50vw);
	overflow:hidden;
}
@media only screen and (min-width: 600px) {

	div.wide-wrap{
		margin-bottom:-70px;
	}

}
@media print, screen and (max-width: 599px) {

	div.wide-wrap{
		margin-bottom:-40px;
	}
	html, body {
    	overflow-x: hidden;
	}
}


/* スマホ検索オーバーレイメニュー内のmargin調整 */
.acordion_search_content > div{
	margin-bottom:10px;
}


/* トップに戻るボタン */
#page-top:not(.page-top-img) a {
	opacity:.9;
}
#page-top {
    bottom: calc(constant(safe-area-inset-bottom) + 140px )!important;
    bottom: calc(env(safe-area-inset-bottom) + 140px )!important;
}

#breadcrumb {
	margin-bottom:3px;
}


/* reCAPTCHAの右下のバッジを非表示 */
.grecaptcha-badge {
	visibility: hidden;
}
/* hCAPTCHAのmarginを調整 */
.h-captcha {
	margin-bottom: .5rem!important;
}


/* ページネーション */
@media print, screen and (max-width: 599px) {
	.st-pagelink {
		padding:10px 0;
	}
}
@media only screen and (min-width: 600px) {
	.st-pagelink {
		padding:0 0;
	}
}
.st-pagelink-in .next.page-numbers,
.st-pagelink-in .prev.page-numbers{
	font-size:13px;
	background-color: #E41B5E;
	border-color: #E41B5E;
	color: #fff;
}
.st-pagelink-in .next.page-numbers:hover,
.st-pagelink-in .prev.page-numbers:hover{
	color:#fff;
	opacity: .6;
}
.st-pagelink a.page-numbers{
	transition: .1s
}
.st-pagelink a.page-numbers:hover{
	border-color:#E41B5E;
	color:#E41B5E;
	opacity: 1;
	transition: .1s;
}


/* 日付のカラーを変更 */
.kdate {
    color: #777;
}


/* コメント欄 */
#comments {
	margin-top: 5px;
}
#comments textarea{
	border: 1px #777 solid;
}
#comments input[type=text]{
	border: 1px #777 solid !important;
}
#comments input[type=submit]{
	color: #fff;
    background-color: #E41B5E!important;
	border:none;
	width:40%;
	padding: 12px 15px;
}
form#commentform .comment-form-author #author {
    max-width: 400px;
}
.logged-in-as {
	display: none;
}
a#cancel-comment-reply-link {
	font-size: 12px;
    font-weight: normal;
	color: #4682b4;
	margin-left: 6px;
}
.comment-body {
	margin-bottom: 10px;
}
#comments ol>li {
	border: 1px solid #bcbcc7;
    margin-bottom: 15px;
    border-radius: 4px;
}
.post #comments h3 {
	color: #333;
}
#comments textarea {
	border-color: #333;
}

/* テキストボックス等の幅調整 */
.post input:not(.st-tab-label):not([type=image]) {
	padding: 12px 15px;
}
.contact-area input:not(.st-form-nowide):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=image]), textarea, select{
	width:70%;
}

/* お問い合わせフォーム */
/* 入力間違い時のエラーテキスト */
.wpcf7-not-valid-tip {
	font-size: .8em;
}
/* 必須マーク */
.must{
	font-size:12px;
	color: #fff;
	margin-right: 6px;
	padding: 5px 8px;
	background: #f12b46;
	border-radius: 20px;
}
/* 任意マーク */
.free {
	font-size:12px;
	color: #fff;
	margin-right: 6px;
	padding: 5px 8px;
	background: #ababab;
	border-radius: 20px;
}
/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 1px solid #d0d5d8;
	border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}
/* ボタン */
input[type="submit"]{
    color: #fff;
    background-color: #e41b5e;
    border: none!important;
    width: 70%!important;
	max-width: 300px!important;
}


/* タブ切り替え カスタマイズ */
.st-tab-content .st-tab-label:checked+label{
	background-color: #E41B5E !important;
    color: #FFFFFF !important;
}
@media print, screen and (max-width: 599px) {
	.st-tab-content .st-tab-label+label {
		font-size:16px;
	}
}
.st-tab-content .st-tab-label:checked+label {
	font-weight: bold!important;
}
.st-tab-content input[type=radio]+label {
	box-shadow: 0 0 10px rgba(0, 0, 0, .10);
}


/* タグクラウド カスタマイズ */
.tagcloud a {
	font-size: 12px !important;
	line-height: 1em;
	display: inline-block;
	white-space: nowrap;
	padding: 9px 14px;
	margin-top: 2px;
	margin-right: 0px;
	text-decoration: none;
	border-radius: 20px;
	background-color:#fff;
	transition: .1s;
}
.tagcloud:hover {
	opacity: 1!important;
	transition: .1s;
}
.tagcloud a:hover {
	border: 1px solid #E41B5E;
 	background: #E41B5E;
	color: #fff;
	transition: .1s;
}


/* カスタムタクソノミータームリストのスタイリング */
ul.terms-list {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
ul.terms-list li {
    flex: 0 0 auto;
    background: none;
	list-style: none;
}
ul.terms-list li a {
    display: block;
    padding: 10px;
	margin: 3px 3px 5px;
	line-height: .8em;
	border: 1px solid #777;
	border-radius: 20px;
    background-color: #fff;
	font-size: 12px;
	color: #777;
    text-align: center;
	text-decoration: none;
	transition: .1s;
}
ul.terms-list li a:hover {
    background-color: #242444;
	color: #fff;
	transition: .1s;
}


/* 記事ページ BGMダウンロードボタンなどのブロック */
.bgm_info_box {
    background-color: #f3f3f3;
	margin: 20px 0px;
	padding: 15px;
	text-align: center;
}
.bgm_info_box p {
    font-size: 14px;
}
.bgm_info_box p.bgm_info_title {
	font-size: 16px;
	font-weight: bold;
	line-height: 25px;
}
@media print, screen and (max-width: 599px) {
	.bgm_info_box {
		padding: 8px;
	}
	.bgm_info_box p {
    	font-size: 12px;
	}
	.bgm_info_box p.bgm_info_title {
		font-size: 13px;
	}
}


/* 詳細ページのダウンロードカウント */
.dl_count{
	font-weight: bold;
	color: #8282a1;
	line-height: 1.2;
}
.under_thumb .dl_count{
	font-size: 18px;
	width: 15%;
}
@media print, screen and (max-width: 599px) {
	.under_thumb .dl_count{
		width: 25%;
	}
}
.bgm_info_box .dl_count{
	font-size: 18px;
	text-align: right;
	padding-right: 30px;
}
.kanren dl .dl_count{
	text-align: left;
	padding-left: 5px;
}


/* MP3ダウンロードボタン */
.button_solid002 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 200px;
    padding: 13px 25px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    background: #E41B5E;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 50px;
	text-decoration: none;
}
.button_solid002 a:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
	color: #FFF;
}

/* OGGダウンロードボタン */
.button_solid015 {
    text-align: center;
}
.button_solid015 p {
    margin-bottom: 1px;
    font-weight: 600;
	font-size: 0.8em;
    color: #E41B5E;
    letter-spacing: 0.04rem;
    display: inline-block;
    position: relative;
}
.button_solid015 p:before, .button_solid015 p:after {
    display: inline-block;
    position: absolute;
    top: 45%;
    width: 15px;
    height: 3px;
    border-radius: 5px;
    background-color: #E41B5E;
    content: "";
}
.button_solid015 p:before {
    left: -30px;
    -webkit-transform: rotate( 50deg );
    transform: rotate( 50deg );
}
.button_solid015 p:after {
    right: -30px;
    -webkit-transform: rotate( -50deg );
    transform: rotate( -50deg );
}
.button_solid015 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 200px;
    padding: 13px 25px;
    color: #E41B5E;
    transition: 0.3s ease-in-out;
    background: #FFF;
    filter: drop-shadow(0px 2px 4px #ccc);
	border: 1px solid #E41B5E;
    border-radius: 50px;
	text-decoration: none;
}
.button_solid015 a:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
	color: #E41B5E;
}

/* Audiostockダウンロードボタン */
.button_solid002_hanten a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 200px;
    padding: 13px 25px;
    color: #E41B5E;
    transition: 0.3s ease-in-out;
    background: #FFF;
    filter: drop-shadow(0px 2px 4px #ccc);
	border: 1px solid #E41B5E;
    border-radius: 50px;
	text-decoration: none;
}
.button_solid002_hanten a:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}

/* 購入リンク */
.buy-link{
	font-size: 13px;
	color: #777!important;
}

/* ダウンロードファイル説明テキスト */
.file_text {
	margin-top: 5px;
	font-size: 13px;
	color: #777;
}
.file_text:before {
	content: "\f05a";
	font-family: "FontAwesome";
}

/* 楽譜購入ボタン */
.button_score a {
	position: relative;
    display: flex;
	justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 200px;
    padding: 11px 23px;
	font-weight: bold;
    color: #E41B5E;
    transition: .3s ease-in-out;
    border:2px solid #E41B5E;
    border-radius: 50px;
    text-decoration: none;
}



/* pixivFANBOXリンク */
.pixivfanbox_link {
	color:#333;
	color:#E41B5E;
	position: relative;
	padding-left: 110px;
}
.pixivfanbox_link::before {
	content: url(/wp-content/uploads/pixivFANBOX-logo.png);
	transform: scale(0.16);
	position: absolute;
	top: -94px;
    left: -265px;
}


/* PayPalリンク */
.paypal_link {
	color:#0070BA;
	position: relative;
	padding-left: 110px;
}
.paypal_link::before {
	content: url(/wp-content/uploads/BN-paypal-logo320_145.png);
	transform: scale(0.34);
	position: absolute;
	top: -65px;
	left: -109px;
}


/* BOOTH関連 */
.booth-color {
	color:#FC4D50;
}
/* BOOTHリンク1 */
.booth_link {
	color:#FC4D50;
	position: relative;
	padding-left: 42px;
}
.booth_link::before {
	content: url(/wp-content/uploads/booth_logo_icon_r.png);
	transform: scale(0.025);
	position: absolute;
	top: -507px;
	left: -490px;
}

/* BOOTHリンク2 */
.booth_link2 {
	color:#FC4D50;
	position: relative;
	padding-left: 117px;
}
.booth_link2::before {
	content: url(/wp-content/uploads/booth_logo.png);
	transform: scale(0.093);
	position: absolute;
	top: -205px;
	left: -545px;
}
.booth_link2:hover {
	opacity: 0.7 ;
}


/* BGM制作リクエストエリア */
.request_area {
	border: 2px solid #242444;
	padding: 20px 10px 20px;
	text-align: center;
	background: #f3f3f3;
}
.request_area p {
	margin-bottom: 10px;
}
.request_area .request_title {
	font-weight: bold;
	font-size: 115%;
	color: #e41b5e;
}
.request_area .request_cost_text {
	font-weight: bold;
}
.request_area .request_hosoku_text {
	font-size: 75%;
	line-height: 1.2rem;
}
.request_area a {
	font-size:75%;
}
.request_area a.request_button {
	background: #e41b5e;
    padding: 10px 20px;
	font-size:100%;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
}
.request_area a.request_button:hover {
	opacity: .5;
}


/*特殊利用規約の説明エリア*/
.term_type1_explanation p {
	color: red;
	font-weight: bold;
	margin-bottom: 15px;
}
.term_type1_credit_notation {
	text-align: left;
	border:1px solid #e41b5e;
	padding: 12px 16px;
	background: #fff;
}


/* サブスクエリア */
.subsc-card {
	padding: 15px 15px 15px;
    background: #fff;
	/* background: linear-gradient(45deg, #e7b855 0%, #e7c84e 45%, #fbe28a 70%, #ebc942 85%, #e9b03a 90% 100%); */
	border-radius: 8px;
    box-shadow: 0 1px 20px rgba(0,0,0,.125), 0 4px 4px -4px rgba(0,0,0,0);
	max-width: 470px;
	margin: 0 auto;
}
.subsc-card p {
	color: #e41b5e;
	font-weight: bold;
	font-size: .8rem;
	margin-bottom: 10px;
	line-height: 25px;
}
.subsc-card div {
	margin-bottom: 7px;
}
a.subsc-card-button {
	font-size: .9rem;
    background: #e41b5e;
    color: #fff;
    border-radius: 50px;
    padding: 8px 15px;
    font-weight: bold;
    text-decoration: none;
}
a.subsc-card-button:hover {
	opacity: .8;
}
.subsc-detail-link {
	font-size: .75rem;
	margin-top: 14px;
}


/* 寄付エリア */
.codoc-support {
	background: none !important;
	border: solid 2px #242444 !important;
}
.codoc-support .codoc-support-title {
	font-size: 15px !important;
	font-weight: 400 !important;
	color: #242444 !important;
}
@media print, screen and (max-width: 599px) {
	.codoc-support .codoc-support-title {
		font-size: 12px !important;
	}
}
.codoc-card {
	max-width: 390px;
	margin: 15px auto;
	margin-top: 35px;
}
.codoc-card .codoc-entry {
	padding: 15px 15px 25px 15px;
    background: #fff;
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.125), 0 4px 4px -4px rgba(0, 0, 0, 0);
}
.codoc-entry .codoc-support .codoc-btn {
	color: #fff !important;  /* ボタンのテキスト色を指定 */
	background: #242444 !important;  /* ボタンの背景色を指定 */
}
.codoc-entry .codoc-support .codoc-btn:hover {
	/* color: #242444!important;  /* ボタンのテキスト色を指定 */
	/* background: #fff !important;  /* ボタンの背景色を指定 */
	/* border: solid 1px #242444 !important;  /* ボタンのボーダー色を指定 */
	color: #fff !important;  /* ボタンのテキスト色を指定 */
	opacity: .8;
}
.codoc-siteSubscription-subscription {
	margin-bottom: 0px;
}
.codoc-title {
	font-size: 1rem!important;
}
.codoc-discription {
	font-size: 0.7rem;
    text-align: left;
}


/* Audioctock購入説明エリア */
.audiostock-area {
	font-size:14px;
    max-width: 614px;
	border: 2px solid #E41B5E;
	padding: 32px 5%;
    border-radius: 6px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.audiostock-area a {
	color: #E41B5E;
}
.audiostock-color {
	color: #E41B5E;
}
.audiostock-entry .audiostock-btn {
    display: block;
    max-width: 580px;
    height: 40px;
    margin: 0 auto;
    text-decoration: none!important;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
}
.audiostock-area .audiostock-btn {
	height: 46px;
    max-width: 580px;
    margin: 0 auto;
    padding: 2px 12px 6px;
    font-size: 15px;
    font-weight: 700;
    border: 1px solid #E41B5E;
    border-radius: 20px;
    background: #fff;
    color: #E41B5E!important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.audiostock-area .audiostock-btn:hover {
    background: #E41B5E;
    color: #fff!important;;
}
.bgm_info_box .audiostock_small_text {
	font-size: 12px;
	line-height: 1.2rem;
	margin-bottom: 23px;
}
@media print, screen and (max-width: 599px) {
	.bgm_info_box .audiostock_small_text {
		font-size: 11px;
	}
}


/* サイドフローティングメニュー */
#fixed-controls {
    position: fixed;
    z-index: 3;
    top: 70%;
    margin-top: -100px;
    background: #fff;
    border: #ddd 1px solid;
    width: 50px;
    font-size: 20px;
    right: 0;
}
#fixed-controls a {
	color: #444 ;
}
#fixed-controls a:hover {
	color: #b22222 ;
}
.fxc-row {
    display: block;
    text-align: center;
    /* height: 21px; */
    padding: 20px 0 20px;
    border-bottom: 1px solid #ddd;
    color: #444 ;
}


/* 言語スイッチャー カスタマイズ */
.lang-item {
	font-size: 12px;
	margin: 10px 1px;
}
.lang-item a {
	color: #ffffff;
}
.lang-item a:hover {
	text-decoration: underline !important;
}
.widget_polylang {
	text-align:right;
}
.widget_polylang ul li {
	display: inline-block;
}
#polylang-2 li:first-child::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url("/wp-content/uploads/global-white-16px.png") no-repeat;
	background-size: contain;
	margin-right: 7px;
	margin-bottom: -3px;
}
#polylang-2 li:not(:last-child)::after {
	color:#fff;
	content: "/";
	font-size:14px;
	padding: 0 10px;
	margin-right:-2px;
}
#polylang-4 {
	margin-top:-15px;
	margin-bottom:-5px;
}
#polylang-4 li:first-child::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url("/wp-content/uploads/global-gray-16px.png") no-repeat;
	background-size: contain;
	margin-right: 8px;
	margin-bottom: -3px;
}
#polylang-4 li:not(:last-child)::after {
	content: "/";
	font-size:14px;
	padding: 0 8px;
	margin-right:-3px;
}


/* BGMページのカテゴリ、タグブロック */
.tag-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    overflow: hidden;
    clear: both;
	margin-bottom: 20px;
}
.tag-block p {
	margin-bottom: 0px;
}
.tag-block .tag-midashi {
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
    background: #242444;
    padding: 14px 15px;
    width: 110px;
    margin-right: 13px;
}
.tag-block .tagst {
    font-size: 0.8em;
	padding: 0;
	width: 100%;
}
.tagst {
	color:#E29AAE !important;
}
.tagst a {
	color:#E29AAE;
}
@media print, screen and (max-width: 599px) {
	.tag-block {
		margin-bottom: 10px;
	}
	.tag-block .tag-midashi {
    	font-size: 13px;
	}
	.tagst a {
		font-size: 12px;
	}
}


/* BGMページ アルバム表示関連 */
.album-card {
	position: relative;
	display: flex;
	background: #fff;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	border: solid 1px #e41b5e;
	border-radius: 5px;
	max-width: 340px;
	margin-bottom: 40px;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.album-card:hover {
	box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
    transform: translateY(-1px);
	opacity: .9;
}
.album-card .album-card-thumb {
	padding: 8px;
	width: 60px;
}
.album-card-text-area {
	padding: 8px;
}
.album-card-link {
	font-size: 12px;
	margin-bottom: 0px;
}
.album-card-button::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: auto;
	content: "";
	background-color: transparent;
}
.album-card-button {
	display: block;
	width: 85px;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	background: #E41B5E;
	padding: 4px 12px;
	border-radius: 4px;
}
.album-card-button:hover {
	color: #fff;
}
.album-card-separator {
	width: 1px;
	background-color: #ccc;
}



/* カスタム検索フォーム */
.saerch-custom-block {
	max-width: 570px;
	margin:0 auto;
	margin-bottom: 40px;
	background: rgba(255,255,255,0.6);
	padding:20px 20px 10px 20px;
	border: 1px solid #9f4e6f;
    border-radius: 25px;
}
form select {
    color: #333333;
    background-color: #fff;
    border: solid 1px #ccc;
	display: block;
    margin-top: 0.7em;
    margin-bottom: 0.7em;
    padding: 0.55em;
    border-radius: 3px;
    box-shadow: none;
	border-color: #ccc;
    transition: ease;
}
.search-custom-flex{
	display:flex;
	border:1px solid #ccc;
	margin-bottom:13px;
}
#search .search-custom-flex form select {
	height: 42px;
	margin: 0;
	width:9em;
	background:#fff;
	color: #333333;
	border: none;
	border-radius: 0px;
	font-size: 12px;
}
.search-custom-flex #searchcategory {
	background:#fff;
	border: none;
	border-right: 1px solid #ccc !important;
	border-radius: 0px;
	font-size: 12px;
}
#search .search-custom-flex input[type="text"] {
	border: none !important;
	border-radius: 0px !important;
	font-size: 12px !important;
}
#search form select{
	border: none;
}
input#searchsubmit {
	width: 100px!important;
}

#searchcategory select:focus-visible{
	outline:none;
}
@media only screen and (min-width: 600px) {
	#searchcategory select option{
		font-size:15px;
	}
}
/* カスタム検索フォーム チェックボックス */
#search label#search-custom-checkbox-label{
	float:left;
	cursor: pointer;
}
#search input[type="checkbox"]{
  display: none;
}
#search .check{
	font-size: 14px;
	color:#333;
	padding-left: 22px;
	position:relative;
}
#search .check::before{
    border: 1px solid #242444;
	border-radius:2px;
	background-color: #fff;
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 0;
    height: 14px;
    width: 14px;
}
input[type="checkbox"]#search-custom-checkbox:checked + .check::before{
	border: 1px solid #242444;
	background-color: #242444;
}
input[type="checkbox"]#search-custom-checkbox:checked + .check::after{
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	content: "";
	display: block;
	position: absolute;
	top: 3px;
	left: 5px;
	height: 9px;
	width: 4px;
	transform: rotate(40deg);
}
/* Safari */
_::-webkit-full-page-media, _:future, :root .check::before{
  top: -1px;
}
_::-webkit-full-page-media, _:future, :root input[type="checkbox"]:checked + .check::after{
  top: 0;
}
/* カスタム検索フォーム下部、人気タグ */
.popular-tag-midashi {
	color: #333333;
	text-align:left;
	font-size: 85%;
	font-weight:bold;
	margin-top: 1.6em;
	margin-bottom: 5px;
}
.searchCustomBlock .tagcloud {
	text-align:left;
}
.popular-tag-area {
	/*
	max-width: 550px;
	margin: 0 auto;
    background: #fafafa;
    background: rgba(255,255,255,0.8);
    padding: 3px 20px;
	*/
}
.popular-tag-area .tagcloud {
	text-align:left;
	margin-bottom: 0.7em;
}



/* 記事一覧のYouTube再生ボタン */
lite-youtube>.lty-playbtn {
	width: 14%;
    height: 18%;
	max-width:68px;
	max-height:48px;
    background-repeat: no-repeat;
    top: 85%;
    left: 10%;
}
.youtube-playbtn-center lite-youtube>.lty-playbtn {
	width: 16%;
    height: 20%;
	max-width:68px;
	max-height:48px;
    background-repeat: no-repeat;
    top: 50%;
    left: 50%;
}
/* 記事一覧のカテゴリ */
.st-catgroup.itiran-category .catname {
	font-size: 10px;
}


/* 記事一覧の「OGG」などの情報タグ */
.info-tag {
	font-size: 10px;
	color: #E41B5E;
	border: 1px solid;
	padding: 3px 4px;
	margin: 0 0 5px;
	display: inline-block;
}

/* 記事一覧の「DLページへボタン」 */
.dlbtn_area {
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	align-items:center;
	margin-top:15px;
}
.dl_button {
	width: 63%;
}
.dl_button a {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	max-width: 220px;
    margin: 0 auto;
	margin-right: 5px;
	padding: 0.45rem;
	font-size:14px;
	font-weight: bold;
	border: 1px solid #333;
	color: #333;
	cursor: pointer;
	position: relative;
 	overflow: hidden;
 	z-index: 1;
}
.dl_button a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform: translateX(-100%);
	transition: all .3s;
	z-index: -1;
}
.dl_button a::after {
	position:absolute;
	right:10px;
	color: #111;
	content:"→"
}
.dl_button a:hover::after {
	opacity: 1 !important;
	color: #fff;
}
.dl_button a:hover::before {
	opacity: 1 !important;
	transform: translateX(0);
	background-color: #111;
}
.dl_button a:hover {
	opacity: 1 !important;
	border: 1px solid #111;
	color: #fff;
}
@media print, screen and (max-width: 599px) {
.dl_button a {
	max-width: 240px;
	margin-right: 5px;
	padding: 0.45rem;
}
	.dl_button a::before {
		transition: all .075s;
	}
}


/* 一覧ページ記事カードの音楽配信サービス宛誘導リンク */
.card-to-streaming-area {
	margin-top: 10px;
	padding-left: 10px;
	font-size: 12px;
	font-weight: bold;
	font-style: italic;

	i { color: #1DB954; }
	a { color: #000; }
}
@media print, screen and (max-width: 599px) {
	.card-to-streaming-area {
		font-size: 14px;
	}
}


/* 記事カードの関連特集detailsタグ */
.kanren_sp_accordion summary {
    list-style: none;
}
.kanren_sp_accordion {
	margin-top: 5px;
}
.kanren_sp_accordion summary {
	text-align: right;
	font-size: 14px;
	cursor: pointer;
	list-style: none;
	outline: none;
	align-items: center;
}
.kanren_sp_accordion summary::-webkit-details-marker {
	display: none; /* デフォルトのマーカーを非表示に */
}
.kanren_sp_accordion summary i {
	margin-right: 5px;
}
.kanren_sp_accordion .toggle_icon {
    transition: transform 0.3s ease;
}
details[open].kanren_sp_accordion .toggle_icon {
    transform: rotate(180deg);
}
.kanren_sp_accordion ul {
	list-style: none!important;
	margin-left: 0px;
	padding-left: 5px;
	margin-bottom: 0px;
}
.kanren_sp_panel {
	padding: 7px;
}
/* パネル内のリストのスタイリング */
.kanren_sp_panel li {
	margin-bottom: 0px;
}
.kanren_sp_panel li a {
	text-decoration: none;
	font-size: 12px;
	line-height: 1.2;
}
.kanren_sp_panel li a:hover {
	text-decoration: underline;
}


/* サムネ下エリア（オーディオプレイヤー・お気に入り・DL数） */
.under_thumb {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 720px;
}


/* プラグイン「Favorites」お気に入りリスト・ボタン */
.bookmark_button.page_bookmark i{
	font-size:30px !important;
}
.favorites-list a {
	color:#333;
	text-decoration: none;
	font-size: 16px;
}
.favorites-list a:hover {
	text-decoration: underline;
}
.simplefavorite-button {
    border: none;  /* 枠線を消す */
    outline: none; /* クリックしたときに表示される枠線を消す */
    background: transparent; /* 背景の灰色を消す */
	width:33px;
	height:33px;
}
.simplefavorite-button.active {
	opacity:1 !important;
}

/* ヘッダー、お気に入りページへのリンク */
.header_favo{
	position: relative;
    text-align: center;
    top: -35px;
    right: 142px;
    margin-bottom: -45px
}
.header_favo a:hover{
	transition: 0s;
	color:#fff;
	text-decoration:underline !important;
}

/* スライドメニュー内、お気に入りページへのリンク */
.button_favo_link a:before {
	font-family:"FontAwesome";
	content:" \f004";
	margin-right:7px;
}
.button_favo_link a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
	font-weight:normal;
    margin: 0 auto;
    max-width: 200px;
    padding: 8px 5px;
    color: #FFF;
	border: 1px solid #fff;
    border-radius: 2px;
	text-decoration: none;
}
.button_favo_link a:hover {
	color: rgb(228, 27, 94);
	border-color: rgb(228, 27, 94);
	opacity: 1 !important;
}



/* サイトロゴ周り */
#st-text-logo {
	margin-top:13px;
}
header .descr {
	font-size: 11px ;
}
.trigger {
	background-color:#E41B5E;
}


/* スマホスライドメニューの×ボタンを手前に */
.s-navi-active #s-navi-overlay {
	z-index: 9999;
    margin-top: -50px;
}


/* Affingerボックスメニュー改造 */
.goriyou .st-box-btn li {
	box-shadow: none !important;
}
.post .st-box-btn li, .post ul.st-box-btn li:last-child {
	box-shadow:none;
}
.goriyou .st-box-btn li a:hover {
	opacity: 1;
	transition: none;
}
.goriyou img:hover {
	transform: rotateY(-360deg);
    transition: 0.5s;
}
/*-- タブレット・PC --*/
@media only screen and (min-width: 600px) {

.goriyou .st-box-btn img {
	background-color: #ffd9e3;
	padding:22px;
	border-radius:50%;
}
.goriyou .st-box-btn img {
	margin-bottom:15px;
}

}
/*-- スマホだけ --*/
@media print, screen and (max-width: 599px) {

	.goriyou .st-box-btn img {
		background-color: #ffd9e3;
		padding:15px;
		border-radius:50%;
	}
	.goriyou .st-box-btn img {
		margin-right:15px;
	}
	.goriyou .st-box-btn-text-wrap {
		margin-left: 20px;
	}

}



/* アコーディオンパネル1 */
.top_seo_accordion {
	position: relative;
	text-align:center;
	line-height:50px;
	cursor:pointer;
	background-color: #cf4f7a;
}
.top_seo_accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between; /* コンテンツを左右に分散させる */
	width: 100%;
	font-weight: bold;
	flex-wrap: nowrap; /* アイテムが折り返されないようにする */
	color:#fff;
}
.top_seo_accordion summary::-webkit-details-marker {
	display: none; /* デフォルトのマーカーを非表示に */
}
.top_seo_accordion summary i {
	margin-left: auto;
}
.top_seo_accordion .toggle_icon {
	margin-left: auto; /* 左のすべての空白を利用して右端にアイコンを押し出す */
	margin-right: 10px;
    transition: transform 0.3s ease;
}
details[open].top_seo_accordion .toggle_icon {
    transform: rotate(180deg);
}
.top_seo_ac-box {
	background-color: #ededed;
	padding: 15px 135px 40px;
	line-height: 1.2rem;
}
@media print, screen and (max-width: 599px) {
	.top_seo_ac-box {
		padding: 15px 20px 30px;
	}
}
.top_seo_ac-box p, .top_seo_ac-box ul {
	color: #333;
	/* line-height: 23px; */
	font-size: 14px;
	text-align: justify;
	/* margin-bottom: 0px; */
}

/* アコーディオンパネル2 */
#acMenu dt.acmenu-dt {
    position: relative;
    display: block;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    background-color: #CF4F7A;
    color: #fff;
    padding-right: 5px;
}
#acMenu dt.acmenu-dt:after {
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
    margin: auto;
    font-family: "FontAwesome";
    content: "\f078"; /* 初期状態のアイコン (chevron-down) */
    transition: transform 0.3s ease;
}
#acMenu dd.acmenu-dd {
    text-align: center;
    display: none;
    padding: 0 12px;
    background: #e9e9eb;
    border: 1px dashed #a4a4b3;
    border-top: none;
}
#acMenu dt.acmenu-dt.active {
    background-color: #CF4F7A;
}
#acMenu dt.acmenu-dt.active:after {
    transform: rotate(180deg); /* 180度回転 */
}
.ac-box {
    padding: 15px;
}
.ac-box p {
    color: #777;
    line-height: 23px;
    font-size: 14px;
    text-align: justify;
    margin-bottom: 0px;
}



/* 記事コピーボタン */
.sns .share-copy a {
	background: #bcbcbc;
}



/* 続きを読む（折りたたみ式） */
.readmore{
    position: relative;
    box-sizing: border-box;
    /*以下お好み*/
    /* ボーダーを付ける場合 */
}
.readmore-content{
    position: relative;
    overflow: hidden;
    /*以下お好み*/
    /*高さの初期値*/
    height: 50px;
}
.readmore-content::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    content: "";
    /*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
    height: 50px;
	z-index: 1;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
}
/* 続きを読むボタン */
.readmore-label, .readmore-label-en{
	display: block;
    bottom: -5px;
    margin: 0 auto;
    z-index: 2;
    text-align: center;
	width: 140px;
	height: 35px;
	line-height: 35px;
    border: 1px solid #e41b5e;
    border-radius: 50px;
    background-color: #fff3f7;
    color: #e41b5e;
    font-size: 80%;
    cursor: pointer;
}
.readmore-label:before{
    content: '続きを読む ＋';
}
.readmore-label-en:before{
    content: 'Read more ＋';
}
.readmore-check{
    display: none;
}
/*チェック時にボタンを非表示*/
.readmore-check:checked ~ .readmore-label{
    position: static;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
    /* display: none; */
}
.readmore-check:checked ~ .readmore-label:before{
    content: '閉じる －';
}
.readmore-check:checked ~ .readmore-label-en:before{
    content: 'Close －';
}
/*チェック時に高さを自動に戻す*/
.readmore-check:checked ~ .readmore-content{
    height: auto;
}
/*チェック時グラデーション等を削除*/
.readmore-check:checked ~ .readmore-content::before {
    display: none;
}



/* 音楽ファイルメタ情報表示 */
.media-info {
    display: flex;
    /*justify-content: space-around;*/
	margin-top: -5px;
	margin-bottom: 6px;
	padding: 3px;
    flex-wrap: nowrap;
	align-items: baseline;
    overflow-x: auto;
}
@media print, screen and (max-width: 599px) {
	.media-info { justify-content: flex-start; }
}
.media-info-item {
	font-size: .7rem;
	color: #777;
	line-height: 1.1rem;
	white-space: nowrap;
	margin-bottom: 0px;
    margin-right: 18px;
}
.media-info-item i {
	margin-right: 3px;
}
.media-info-item .blogbox {
	margin-bottom: 0px;	
}
.media-info-item .blogbox span {
	font-size: .7rem;
}


/*楽曲ページ タブ切り替え */
#nocopy > div > div.btn_area > div.tab_btn > h2 {
  display: inline!important;
  font-size: .9rem!important;
  padding: 10px 0!important;
  margin: 0!important;
  line-height: 1;
  color: #777;
}
#nocopy > div > div.btn_area > div.tab_btn.active > h2 {
  color: #333;
}
div.btn_area > div > h2 > span {
  all: unset!important;
}
#nocopy > div > div.btn_area > div.tab_btn > h2 > span::before,
#nocopy > div > div.btn_area > div.tab_btn > h2 > span::after {
  content: none;
  display: none;
}
.tab_box {
	margin-top:-10px;
}
.tab_box .btn_area {
	display: -webkit-box;
	display: flex;
}
.tab_box .tab_btn {
	width: 50%;
	padding: 8px 0;
	margin-bottom:0;
	color: #777;
	background-color:#f3f3f3;
	font-size: .9rem!important;
	font-weight:bold;
	text-decoration: none!important;
	text-align: center;
	cursor: pointer;
	border: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	transition: all .2s;
}
.tab_box .tab_btn + .tab_btn {
}
.tab_box .tab_btn:hover {
}
.tab_box .tab_btn.active {
	border-bottom:none;
	background-color:#fff;
	color:#333;
}
.tab_box .tab_panel {
    display:none;
}
.tab_box .tab_panel.active {
    display:block;
}
.tab_panel.tab_comments {
	padding:0 10px 0 10px;
}
.tab_box .panel_area {
	padding-top: 10px;
}
/* --- 楽曲ページ タブ切り替え カラー修正版 --- */

/* タブボタン全体の基本スタイル */
/* --- 楽曲ページ タブ切り替え（最適化版） --- */

/* 1. 全体レイアウトとリセット */
.tab_box {
    margin-top: -10px;
}
.tab_box .btn_area {
    display: flex;
}

/* 2. タブボタン共通（非アクティブ状態） */
.tab_box .tab_btn {
    width: 50%;
    padding: 12px 0;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    font-size: .9rem!important;
    color: #777;
    background-color: transparent!important;
    border: none!important;
    border-bottom: 2px solid #e0e0e0!important; /* 下線グレー */
    transition: all .2s;
}

/* 3. アクティブ状態（指定色：#ea125a） */
.tab_box .tab_btn.active {
    color: #ea125a!important;
    background-color: #fff!important;
    border-bottom: 3px solid #ea125a!important; /* 下線指定色 */
}

/* 4. タブ内のH2/Span装飾リセット（テーマの干渉を完全除去） */
#nocopy .tab_btn h2,
#nocopy .tab_btn h2 span {
    all: unset!important;
    display: inline!important;
    font: inherit!important;
    color: inherit!important; /* 親の.tab_btnの色に追従 */
}
#nocopy .tab_btn h2 span::before,
#nocopy .tab_btn h2 span::after {
    display: none!important;
    content: none!important;
}

/* 5. パネルエリアの表示制御 */
.tab_box .tab_panel {
    display: none;
}
.tab_box .tab_panel.active {
    display: block;
}
.tab_panel.tab_comments {
    padding: 0 10px;
}
.tab_box .panel_area {
    padding-top: 20px;
}
/*
body,
header,
footer{
	width: 100%;
	background-color: #E41B5E;
}
*/


/* ヘッダーメニューカスタマイズ */
header .smanone ul.menu li li a:before{
	white-space: pre-wrap;
	content:'     ';	
}
header .smanone ul.menu li li a{
	transition: .1s;
	text-align:left;
}
header .smanone ul.menu li li a:hover{
	opacity:1 !important;
	background-color: #E41B5E;
	transition: .1s;
}
/* 「フリーBGM一覧」だけに限定 */
li.menu-item-has-children > a[href="https://music.storyinvention.com/category/free-bgm/"] + ul.sub-menu {
  width: 200%;
}


/* サイドバーカテゴリ カスタマイズ */
.hd-category{
	position:relative;
}
ul.hd-category{
	background-color:#fff;
	border:1px solid #e0e0e0;
	border-bottom:none;
}
.hd-category li a{
	color:#333 !important;
	text-decoration:none !important;
	padding:10px 10px 10px 20px !important;
	transition: 0.1s;
}
.hd-category li a:hover{
	color:#fff !important;
	background-color:#E41B5E !important;
	opacity:1 !important;
	transition: 0.1s;
}
.hd-category li a:hover .count{
	opacity:1 !important;
	transition: 0.1s;
}
.hd-category .count{
	position: absolute;
    right: 10px;
    border-radius: 8px;
    background: #242444;
    padding: 3px 10px;
    color: #fff;
    font-size: 11px;
}
#side .hd-category li.cat-item a::after{
	content:"";
}
#big-category{
	background-color:#f2f2f7;
}
#side .hd-category#big-category li.cat-item a::after{
	content:"\f054";
    padding-right: 5px;
}



/*--------------------------------
サブニュース
---------------------------------*/

#subnews-box div {
	padding: 0 10px 10px;
}

#subnews-box {
	padding: 0 0 10px;
	margin-bottom:10px;
}

.st-topin #subnews-box {
	padding: 10px 0 10px;
}

#subnews-box div.subnews-bar {
	font-size: 14px;
	margin-bottom:20px;
	padding: 5px 15px;
	margin-top:-10px;
}

.subnews-bar a {
	color:#333;
	text-decoration:none;
}

#subnews-box dt {
	font-size: 14px;
	color: #727272;
	padding-bottom: 5px;
}

#subnews-box dd {
	padding-bottom: 5px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #ccc;
	font-size: 14px;
	margin-bottom: 10px;
}

#subnews-box div dl dd a {
	color: #333;
	text-decoration: none;
}

#subnews-box div dl dd a:hover {
color: #b22222;
}



/* スライドの縦横比変更 */
.content-post-slider .post-slide-image img {
	height: auto!important;
}
.content-post-slider .post-slide-image::before {
	padding-top: 60%!important;
}


/* スティンガーボタン */
.st-originalbtn:hover{
	opacity:1;
}


.st-cardlink-card.has-bg.is-darkable:before {
	background-color: rgba(0,0,0,.4);
}


/* 記事スライドの矢印カラー変更 */
.slick-prev:before, .slick-next:before {
	color: #242444;
}


/* カテゴリの該当件数 */
.category_quantity {
	font-size: 1.1rem;
}

/* カテゴリページのテキスト枠 */
.category-text-box {
	border: 1px solid #ccc;
	padding: 20px;
	background-image: linear-gradient(-45deg,#fff 25%,#f7f7f9 25%,#f7f7f9 50%,#fff 50%,#fff 75%,#f7f7f9 75%,#f7f7f9);
    background-size: 8px 8px;
}


/* トップメインビジュアル内テキスト */
.top-mv-title {
	padding: 0!important;
	margin-top: 32px;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.3;
	color: #fff;
	text-align: center;
}
/* 見出しにする場合、以下が必要
.top-mv-title span.st-dash-design {
	padding: 0;
	margin: 0;
}
.top-mv-title span.st-dash-design::before {
	content: none!important;
}
.top-mv-title span.st-dash-design::after {
	content: none!important;
}
 */
.top-mv-text {
	font-size: 13px;
	text-align: center;
	color: #fff; margin-top: -12px;
	margin-bottom: 20px;
	line-height: 1.5;
}
@media print, screen and (max-width: 599px) {
	.top-mv-text {
		text-align: left;
	}
	.top-mv-title {
		font-size: 23px;
	}
}


/* フッター帯 */
.footer-band {
	background-color: #777;
	color: #fff;
	text-align: center;
	padding: 15px 0;
}
.footer-band p {
	font-size: 16px;
}


/* 記事並び替えのセレクトボックス */
.sort-box {
    margin-left: auto;
}
select#orderby_option {
	height: 40px;
    width: 150px;
    font-size: 14px;
}


/* サイドバー見出し */
.st-widgets-title {
	margin-top: 20px;
}
.st-widgets-title-small {
	font-size: 12px;
	font-weight: bold;
	margin: 20px 0px 5px 12px;
}



/* レビュー関連 */
.review-title-area {
	text-align: center;
}
.review-title {
	font-weight: bold;
	margin: 15px auto 5px;
	max-width: 500px;
	font-size: 15px;
}
.review-title-area .average-rating {
	margin-right: 0px;
}
.review-supplement {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 5px!important;
}
/* コメントフォームの星 */
.post-review {
	font-size: 15px;
	display: flex;
	align-items: center;
}
#form-rating span {
    cursor: pointer;
    font-size: 20px;
    color: lightgray; /* 選択時の色 */
}
#form-rating span.selected {
    color: #f5b301; /* 選択時の色 */
}
/* 投稿されたコメントの星 */
.comment-rating {
    font-size: 18px; /* 星のサイズ */
    color: #f5b301; /* 選択された星の色 */
}
.star-empty {
    color: lightgray; /* 未選択の星の色 */
}
/* 平均評価の星 */
.average-rating {
	/* font-size: 12px; */
}
.average-rating .stars span {
	/* font-size: 18px; */
}
.average-rating .filled-star {
    color: #f5b301; /* 塗りつぶされた星の色 */
}
.average-rating .empty-star {
    color: lightgray; /* 未選択の星の色 */
}
.average-rating .stars span {
    margin-right: 2px; /* 星の間隔調整（オプション） */
}
#parent-comments .post-review {
	display: block; /* 親コメントからのみレビューを送信できる */
}
.post-review {
	display: none;
}

/* レビュープラグイン「wpDiscuz」cssカスタマイズ */
.wpd-form-head {
	display: none!important;
}
.review-title {
	display: none;
}
.wpd-rating {
	margin-top: -5px!important;
	margin-bottom: 0px!important;
}
.wpd-rating-title {
	display: none!important;
}
.wpd-field-group-title {
	display: none!important;
}
.wpdiscuz-post-rating-wrap.wpd-custom-field {
	display: none;
}

/* コメントフォームのレビュー */
.post-review-2 input[type="radio"] {
    display: none; /* ラジオボタンを非表示にする */
}
.post-review-2 label {
    cursor: pointer;
    font-size: 24px; /* 星のサイズを大きくする */
    color: #ccc; /* 星のデフォルトの色（未選択時） */
}
.post-review-2 input[type="radio"]:checked + label {
    color: #f5b301; /* 星の選択時の色（ゴールド） */
}
.post-review-2 input[type="radio"]:checked + label ~ label {
    color: #ccc; /* 選択された星より右の星の色 */
}
.comment-rating {
    font-size: 18px; /* 星のサイズ */
    color: #f5b301; /* 選択された星の色 */
}
.star-empty {
    color: #ccc; /* 未選択の星の色 */
}


/* 独自ロジックの「似た曲」表示関連 */
.similar-posts {
    margin: 20px 10px 30px;
}
.similar-title {
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 10px;
}
.similar-card {
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
    margin-bottom: 15px;
    border: 2px solid #e1bec5;
	border-radius: 15px;
    padding: 17px 7px 17px 15px;
    background: #f9f9f9;
    display: flex;
    align-items: center;
}
.similar-card-title {
	 margin-bottom: 10px;
}
.similar-card a {
    color: #333;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
	transition: all .3s;
}
.similar-card a:hover {
	opacity: .8;
	color: #e41b5e;
	border-color: #e41b5e;
}
.similar-card-content {
    width: 90%;
    text-align: left;
}
.similar-card-icon {
    width: 10%;
    text-align: right;
}
.similar-card-icon a {
	font-size: 25px;
    text-decoration: none;
    color: #b5b5b5;
    border: 1px solid #ccc;
    border-radius: 8px;
	padding: 5px 10px
}
.similar-accordion-toggle {
	text-align: center;
    margin: 0 auto;
	border: 2px solid #242444;
	background-color: #f6f6fb;
    color: #242444;
    border-radius: 50px;
    font-size: 80%;
    cursor: pointer;
    width: 140px;
    height: 35px;
    line-height: 35px;
}
@media print, screen and (max-width: 599px) {
	.similar-card-content { width: 86%; }
	.similar-card-icon { width: 14%; }
}



/* トップバナー */
.top-banner {
	width: 100%;
	background: linear-gradient(45deg, #252147, #59cfca);
	background: linear-gradient(69deg, #f1b8a7, #dd6077);
	background: linear-gradient(69deg, #ed917c, #b6a1e7);
	background: linear-gradient(69deg, #ef8ea0, #c7b6e9);
	background: linear-gradient(69deg, #ff8d9d, #b6d4e9);
	color: #fff;
	padding: 10px 0;
	text-align: center;
}
@media print, screen and (max-width: 599px) {
	.top-banner { margin-top:42px; }
}
.top-banner p {
	font-size: .75rem;
	font-weight: bold;
}
.top-banner a.top-banner-button {
	font-size: .7rem;
	color: #fff;
	background-color: #e9447b;
	background-color: #242444;
	background-color: #35a8c1;
	padding: 4px 12px;
	border-radius: 50px;
	text-decoration: none;
	margin-left: 10px;
	box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
	transition: box-shadow 0.3s ease;
}
.top-banner a.top-banner-button:hover {
	opacity: 0.8;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}



/* カテゴリハッシュタグ */
.category-hash-tags {
    font-size: 12px;
    color: #777;
	text-align: right;
}


/* 一覧抜粋テキスト */
.st-excerpt p {
    font-size: 12px!important;
}


/* TOPページKVのボタン */
.main-cta-button a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 10px auto 20px;
    max-width: 220px;
    padding: 15px 25px;
    color: #FFF;
	font-weight: bold;
    transition: 0.3s ease-in-out;
    background: #E41B5E;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out; /* シャドーと背景色のトランジション */
    border-radius: 5px;
	text-decoration: none;
}
.main-cta-button a:hover {
	background-color: #f33576;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); /* ホバー時のシャドー */
}


/* 引用符 */
blockquote::before {
    color: #454545!important;
}



/* トップページ目次 */
.top_mokuzi {
    display: flex;
    justify-content: center;
	margin: -35px 0 30px 0;
}
.top_mokuzi ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.top_mokuzi li {
    margin-right: 50px;
    list-style: none;
}
@media print, screen and (max-width: 599px) {
	.top_mokuzi li { margin-right: 20px; }
}
.top_mokuzi li:last-child {
    margin-right: 0;
}
.top_mokuzi a {
	font-size: 1rem;
    color: #333;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
	transition: .1s;
}
.top_mokuzi a:hover {
    opacity: .7;
	transition: .1s;
}
.top_mokuzi a:hover .toggle_icon {
    transform: translateY(-2px);
	transition: .1s;
}
.top_mokuzi .toggle_icon {
    color: #e41b5e;
    margin-top: 5px; /* テキストとアイコンの間のスペース */
}


/* 引用アイコン */
.inyoumodoki::before, .post blockquote::before{
	color:#333!important;
}


/* タブ切り替え フェードインの時間調整 */
.st-tab-content-type-button .st-tab-main {
	animation-duration: 1s;
}



/* トップページのその他カテゴリ一覧 */
.top-category-list-box-4retsu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.top-category-list-box-4retsu ul {
    padding-left: 0;
    margin-bottom: 0;
}
.top-category-list-box-4retsu li {
    list-style-type: none;
    width: 215px;
}
.top-category-list-box-4retsu li a {
    font-size: 13px;
    color: #333;
}



/* ボタンリンク */
.st-mybtn {
    box-shadow: 0 0 15px rgba(0, 0, 0, .15);
}
.hd-mybtn {
    margin: 0 auto;
    background: #242444;
    border-radius: 100px;
    box-shadow: 0 0 15px rgba(0, 0, 0, .15);
    width: 300px;
    max-width: 70%;
}
.hd-mybtn a {
	font-size: .9rem;
    font-weight: bold;
    color: #fff;
    padding: .7em 1.5em;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 100%;
    text-decoration: none;
    justify-content: center;
    align-items: center;
}



/* 画面サイドに表示する目次（一覧ページ） */
.side-toc {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #e41b5e;
  background-color: #242444;
  padding: 10px 2px 10px 4px;
  border-radius: 8px 0 0 8px;
  z-index: 1000;
  box-shadow: 0 0 15px rgba(0, 0, 0, .15);
}
.side-toc ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.side-toc li {
  display: block;
}
.side-toc li:not(:last-child) {
  margin-bottom: 12px;
}
.side-toc a {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .15rem;
  display: block;
  padding: 10px 0;
  writing-mode: vertical-rl;
  transition: background-color 0.3s ease;
}


/* 過去曲に表示するタグ */
.catname.kakokyoku-tag {
	background:#b1b1b1;
}
/* プレミア素材に表示するタグ */
span.catname.st-catid1431,
span.catname.st-catid1433 {
	background: #b26742;
}
/* 有料素材のアイコン */
.premium-icon {
	color: #E41B5E;
	transition: 0.1s;
}
.cat-item:hover .premium-icon {
	color: #fff;
	transition: 0.1s;
}
/* プレミア素材カテゴリ（ID1431）のタグにアイコン付与 */
span.catname.st-catid1431::before,
span.catname.st-catid1433::before{
    content: "\f521";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 3px;
    display: inline-block;
}

/* 検索結果時のカテゴリ名表記 */
.search-cat-name {
	margin-bottom: -8px;
	font-size: 14px;
}


/* BGMページのSNSシェアアイコンの上に表示するテキスト */
.bgm-share-title {
	font-size: 1rem!important;
	font-weight: bold;
    margin: 0px 0 -5px 0;
	text-align: center;
}



/* 管理者コメントの下部にSNSアイコンを表示 */
.admin-sns-icons {
    display: flex; /* 左揃え */
    gap: 10px; /* アイコン間のスペース */
    margin-top: 5px; /* コメントとの間隔 */
}
.admin-sns-icons .sns-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* アイコンのサイズ */
    height: 30px; /* アイコンのサイズ */
    border-radius: 50%; /* 丸くする */
    background-color: #f3f3f3; /* 背景色 */
    text-decoration: none;
    color: #333; /* アイコンの色 */
    font-size: 16px; /* アイコンサイズ */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
.admin-sns-icons .sns-icon:hover {
    background-color: #ddd; /* ホバー時の背景色 */
    color: #000; /* ホバー時のアイコン色 */
    transform: scale(1.1); /* 少し拡大 */
}
.admin-sns-icons .sns-icon.twitter {
    color: #1da1f2; /* Twitterのブランドカラー */
}
.admin-sns-icons .sns-icon.instagram {
    color: #e1306c; /* Instagramのブランドカラー */
}
.admin-sns-icons .sns-icon.youtube {
    color: #ff0000; /* YouTubeのブランドカラー */
}


/* 記事タイトル横に「- フリーBGM」などのKWを小さめに表示 */
.title-tale-kw {
	font-size: 14px;
	font-weight: normal;
	display: inline-block;
}
@media print, screen and (max-width: 599px) {
	.title-tale-kw {
		font-size: 12px;
	}
}


/* デフォルトAudioプレイヤーのカスタマイズ */
.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body {
	background: #242444!important;
}



/* カスタムAudioプレイヤー */
#audio-fixed-controls {
    width: 215px;
    box-sizing: border-box;
    background-color: #0d0d0d;
    /* border: 1px solid #ddd; */
    border-top-left-radius: 2px;
    padding: 5px 10px;
    padding: 3px 10px 7px;
    text-align: center;
    overflow: hidden;
    position: fixed; /* スクロール時に追従 */
    bottom: 0;
    bottom: -100px; /* 初期状態で画面外に隠す */
	right: 0;
    z-index: 9999; /* 他の要素の上に表示 */
    transition: bottom 0.5s ease; /* アニメーション */
}
/* 表示時の状態 */
#audio-fixed-controls.visible {
    bottom: 0; /* 画面下に表示 */
}
@media print, screen and (max-width: 599px) {
	#audio-fixed-controls {
		/* display: none; */
	}
}

/* テキスト（曲名） */
#current-track-title {
	color: #fff;
    font-size: 12px;
    margin-bottom: 4px;
	text-align: left;
	line-height: 2;
    width: 100%; /* 親要素の幅いっぱいに広げる */
    white-space: nowrap; /* テキストを折り返さない */
    overflow: hidden; /* はみ出た部分を隠す */
    text-overflow: ellipsis; /* はみ出た部分を省略記号 (…) で表示 */
    display: block; /* ブロック要素として表示 */
}
/* 横スクロールを有効にする */
#current-track-title.scrollable {
    overflow: auto; /* スクロールを有効化 */
    text-overflow: clip; /* 省略記号を無効化 */
    scrollbar-width: thin; /* スクロールバーを細くする (Firefox対応) */
}

/* サムネイルとボタンを横並び */
.audio-fixed-controls-flexbox {
    display: flex;
    align-items: center; /* 垂直方向に中央揃え */
    justify-content: space-between; /* 横方向に均等配置 */
    gap: 3px;
}

/* サムネイル画像 */
#current-track-thumbnail {
    width: 48px;
    height: 38px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ccc;
    display: block;
    flex-shrink: 0; /* サムネイルのサイズを縮小させない */
	margin-right: 1px;
}

/* ボタンコンテナ */
.audio-controls-buttons {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-grow: 1; /* ボタン部分が広がる */
    justify-content: space-between;
}

/* ボタンスタイル */
.audio-control-btn {
    background-color: transparent;
	color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    padding: 2px;
    cursor: pointer;
    transition: background-color 0.3s;
    text-align: center;
    flex: 1; /* 各ボタンが均等に広がる */
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-control-btn:hover {
    color: #E41B5E;
}
#play-pause-track {
	/* border: 1px solid #fff; */
    padding: 6px 8px;
	font-size: 16px;
}
#play-pause-track:hover {
    color: #fff;
    background-color: #005177;
    background-color: #E41B5E;
}

.audio-control-btn i {
    pointer-events: none; /* クリックがアイコンに影響しないように */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    #audio-fixed-controls {
        width: 100%;
        margin-top: 20px;
    }
    #current-track-thumbnail {
    }
}

/* お気に入りボタンのcss（指定しないとうまく切り替わらない） */
#audio-fixed-controls #bookmark-button .simplefavorite-button i {
    color: #fff!important;
	font-size: 16px!important;
}
#audio-fixed-controls #bookmark-button .simplefavorite-button.active i.fa-solid.fa-heart {
    color: #E41B5E!important;
	font-size: 16px!important;
}



/* 曲のキャチコピー */
.music-catchphrase {
    margin: 10px 0px 2px;
    font-size: 12px!important;
    font-weight: bold;
    color: #333 !important;
}
.music-catchphrase-title {
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
    margin: 10px 0 -10px !important;
	font-size: 15px;
	font-weight: bold;
	color: #777;
}
/* ==========================================
   Custom Audio Player
   ========================================== */
#audio-fixed-controls {
  width: 220px;
  box-sizing: border-box;
  background-color: #f9fafc;
  border: 1px solid #ddd;
  border-top-left-radius: 8px;
  padding: 5px 10px;
  text-align: center;
  overflow: hidden;
  position: fixed;
  bottom: -100px;
  right: 0;
  z-index: 9999;
  transition: bottom 0.5s ease;
}
#audio-fixed-controls.visible {
  bottom: 0;
}
@media print, screen and (max-width: 599px) {
  #audio-fixed-controls {
    display: none;
  }
}

#current-track-title {
  color: #111;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 3px;
  text-align: left;
  line-height: 2;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
#current-track-title.scrollable {
  overflow: auto;
  text-overflow: clip;
  scrollbar-width: thin;
}

.audio-fixed-controls-flexbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#current-track-thumbnail {
  width: 56px;
  height: 45px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ccc;
  display: block;
  flex-shrink: 0;
}

.audio-controls-buttons {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-grow: 1;
  justify-content: space-between;
}

.audio-control-btn {
  background-color: transparent;
  color: #111;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  padding: 7px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.audio-control-btn:hover {
  color: #E41B5E;
}
.audio-control-btn i {
  pointer-events: none;
}

#play-pause-track {
  font-size: 16px;
  border: 1px solid #fff;
}
#play-pause-track:hover {
  color: #fff;
  background-color: #E41B5E;
}

@media (max-width: 768px) {
  #audio-fixed-controls {
    width: 100%;
    margin-top: 18px;
  }
}

#audio-fixed-controls #bookmark-button .simplefavorite-button i {
  font-size: 18px !important;
}
#audio-fixed-controls #bookmark-button .simplefavorite-button.active i.fa-solid.fa-heart {
  color: #E41B5E !important;
  font-size: 18px !important;
}

/* ==========================================
   Cassette Style UI (Archive Loop)
   ========================================== */

/* 必須：テーマのCSSに負けないよう padding と width の計算を固定化 */
.rom-cassette, 
.rom-cassette *, 
.rom-cassette *::before, 
.rom-cassette *::after { 
  box-sizing: border-box !important; 
}

/* Affingerのclearfix等によるレイアウト崩れを防止 */
.kanren::before, 
.kanren::after { 
  display: none !important; 
}

/* カード自体のスタイル（厚みを固定） */
.rom-cassette { 
  position: relative; 
  width: 100% !important; 
  margin-bottom: 2rem !important; 
  border-radius: 8px 8px 4px 4px; 
  padding: 4px 6px 6px 6px; 
  border-bottom: 4px solid rgba(0,0,0,0.3); 
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.15); 
  transition: all 0.2s ease; 
  background-color: var(--cassette-bg); 
  /* ★ グリッドの高さに合わせて中身が伸びないように設定 */
  display: block; 
  align-self: start; 
}
.rom-cassette:hover { 
  transform: translateY(-4px); 
}
.rom-cassette:active { 
  transform: translateY(0); 
  border-bottom-width: 2px; 
}


/* カラーテーマ */
/* =========================================
   デフォルトの指定（変数でメインカラーを管理）
   ========================================= */
.rom-cassette {
    /* 1. まず基本のピンクを定義 */
    --theme-color: #E41B5E;
    --text-color: #ffffff;

    /* 2. 各パーツは上の変数を参照させる */
    --cassette-bg: var(--theme-color);
    --header-bg: #1e232d;
    --header-text: #f3f4f6;
    --player-bg: #1a1c23;
    --player-btn: var(--theme-color); /* 自動で切り替わる */
    --player-bar: var(--theme-color); /* 自動で切り替わる */
    --player-shadow: 0 0 5px var(--theme-color);
    --player-time: #9ca3af;
    --player-bar-bg: #374151;

    /* 実際の適用 */
    background-color: var(--cassette-bg);
    color: var(--text-color);
}

/* ==========================================
   カセットテーマ別カラー定義
   ========================================== */

/* --- 共通：テーマクラスがついたら文字色は白 --- */
[class*="cassette-theme-"] {
    --text-color: #ffffff;
    transition: all 0.3s ease;
}

/* --- 1. 単体テーマ（背景色を上書きするだけ） --- */
.cassette-theme-horror          { --theme-color: #48374b !important; }
.cassette-theme-heartwarming    { --theme-color: #4ea33a !important; }
.cassette-theme-cute            { --theme-color: #F48FB1 !important; }
.cassette-theme-comical         { --theme-color: #ffb300 !important; }
.cassette-theme-8bit            { --theme-color: #9E9E9E !important; }
.cassette-theme-orchestra    { --theme-color: #bb4835 !important; }
.cassette-theme-pop      { --theme-color: #81D4FA !important; }
.cassette-theme-mystery        { --theme-color: #6f5491 !important; }
.cassette-theme-japanese        { --theme-color: #e41b5e !important; }
.cassette-theme-music-box        { --theme-color: #c2e2e5 !important; }

/* --- 2. 複合テーマ（!importantはPHP側で優先順位制御していれば不要ですが、念のため） --- */
.cassette-theme-japanese-horror     { --theme-color: #951a58 !important; }
.cassette-theme-honobono-comical    { --theme-color: #ff871d  !important; }
.cassette-theme-cute-honobono    { --theme-color: #77d183 !important; }
.cassette-theme-japanese-cute      { --theme-color: #f57384 !important; }

/* カセット上部 */
.rom-groove-wrap { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 0 8px; 
  margin-bottom: 6px; 
  opacity: 0.4; 
  height: 10px; 
}
.rom-groove { 
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.2); 
  background-color: #000; 
}
.rom-groove-circle { 
  width: 10px; 
  height: 10px; 
  border-radius: 50%; 
}
.rom-groove-lines { 
  display: flex; 
  gap: 6px; 
}
.rom-groove-line { 
  width: 40px; 
  height: 3px; 
  border-radius: 3px; 
}

/* ラベル領域 */
.rom-label-base { 
  background-color: #fff; 
  border-radius: 4px; 
  display: flex; 
  flex-direction: column; 
  overflow: hidden; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}
.rom-label-header { 
  background-color: var(--header-bg); 
  color: var(--header-text); 
  padding: 6px 12px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  border-bottom: 1px solid rgba(0,0,0,0.7); 
}
.rom-label-catch { 
  font-size: 10px; 
  font-weight: normal; 
  letter-spacing: 0.1em; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  opacity: 0.9; 
  line-height: 1; 
  padding-right: 8px;
}
.rom-label-date { 
  font-size: 9px; 
  font-weight: bold; 
  letter-spacing: 0.1em; 
  opacity: 0.7; 
  font-family: ui-monospace, SFMono-Regular, monospace; 
  flex-shrink: 0;
}

/* サムネイル */
.rom-thumbnail-link { 
  display: block; 
  width: 100%; 
  aspect-ratio: 21 / 9; 
  background-color: #e5e7eb; 
  position: relative; 
  overflow: hidden; 
  transition: opacity 0.2s; 
  text-decoration: none; 
}
.rom-thumbnail-link:hover { 
  opacity: 0.95; 
}
.rom-thumbnail-link img { 
  width: 100% !important; 
  height: 100% !important; 
  object-fit: cover !important; 
  object-position: center !important; 
  display: block; 
  border: none; 
}

/* UI領域 */
.rom-ui-area { 
  padding: 14px; 
}
.rom-player { 
  background-color: var(--player-bg); 
	border-radius: 6px;
	padding: 6px 12px;
  display: flex; 
  align-items: center; 
  gap: 10px; 
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); 
  margin-bottom: 14px; 
}
.rom-player-btn { 
  width: 26px; 
  height: 26px; 
  flex-shrink: 0; 
  color: #fff; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: none;
  background-color: #E41B5E;
  cursor: pointer; 
  transition: transform 0.1s; 
  padding: 0; 
}
.rom-player-btn:active { 
  transform: scale(0.95); 
}
.rom-player-btn svg { 
  width: 13px; 
  height: 13px; 
}
.rom-player-time { 
  font-family: ui-monospace, SFMono-Regular, monospace; 
  font-size: 9px; 
  font-weight: bold; 
  letter-spacing: -0.05em; 
  flex-shrink: 0; 
  /* --- 以下、チラつき防止の設定 --- */
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translateZ(0); /* GPUレイヤーに固定 */
  backface-visibility: hidden;
  filter: blur(0); /* レンダリング崩れを防止 */
}
.rom-player-bar-wrap { 
  flex: 1; 
  height: 4px; 
  background-color: var(--player-bar-bg); 
  border-radius: 999px; 
  position: relative; 
  overflow: hidden; 
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); 
}
.rom-player-bar { 
  position: absolute; 
  top: 0; 
  left: 0; 
  bottom: 0; 
  width: 0%; 
  background-color: var(--player-bar); 
  border-radius: 999px; 
  box-shadow: var(--player-shadow); 
}

/* コンテンツ */
.rom-tags-category { 
  display: flex; 
  align-items: center; 
  flex-wrap: wrap; 
  gap: 6px; 
  margin-bottom: 6px; 
}
/* カテゴリータグ：角丸(50px)・フォント標準 */
.rom-tag { 
  padding: 3px 10px; 
  background-color: #E41B5E; 
  color: #fff; 
  font-size: 10px; 
  font-weight: normal !important; 
  border-radius: 50px !important; 
  letter-spacing: 0.1em; 
  text-decoration: none; 
  transition: opacity 0.2s; 
  display: inline-block; 
}
.rom-tag:hover { 
  opacity: 0.8;
  color: #fff;
}
/* カセットカード内のプレミアカテゴリー */
.rom-tag.is-premier {
    background-color: #a66a4c; /* ブラウンゴールド */
    color: #fff;
    font-weight: 700 !important;
    border: none;
}
/* 王冠アイコンの微調整 */
.rom-tag.is-premier .fa-crown {
    font-size: 0.9em;
    vertical-align: baseline;
}
/* OGGありタグのカスタムスタイル */
.rom-tag.rom-tag-ogg {
    background-color: transparent; /* 背景を抜く */
    color: #E41B5E;
    border: 1.5px solid #E41B5E;
    border-radius: 0px !important;
}
.rom-title { 
  font-size: 15px; 
  font-weight: 900; 
  color: #111827; 
  line-height: 1.3; 
  margin: 0 0 6px 0; 
}
.rom-title a { 
  color: #333; 
  text-decoration: none; 
}
.rom-title a:hover { 
  text-decoration: none; 
	opacity: .8;
}

/* タグ表示エリア */
.rom-tags-post { 
  font-size: 11px; 
  font-weight: bold; 
  color: #6b7280; 
  margin-bottom: 4px; 
  display: flex; 
  align-items: center; 
  flex-wrap: wrap; 
  gap: 4px; 
}
.rom-tags-post a { 
  color: inherit; 
  text-decoration: none; 
  transition: color 0.2s; 
}
.rom-tags-post a:hover { 
	opacity: .8;
}
.rom-tag-icon { 
  width: 12px; 
  height: 12px; 
  margin-right: 2px; 
  flex-shrink: 0; 
}

.rom-spotify-wrap { 
  margin-top: 10px; 
}
.rom-spotify-link { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  font-size: 11px; 
  font-weight: bold; 
  color: #1DB954; 
  text-decoration: none; 
  transition: opacity 0.2s; 
}
.rom-spotify-link:hover { 
  opacity: 0.8; 
}
.rom-spotify-link svg { 
  width: 16px; 
  height: 16px; 
}

/* アクションバー */
.rom-action-bar { 
  padding-top: 14px; 
  margin-top: 7px; 
  border-top: 1px solid #f3f4f6; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}
.rom-action-left { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
}
.rom-dl-btn { 
  background-color: #fff; 
  border: 1px solid #d1d5db; 
  color: #1f2937; 
  padding: 6px 12px; 
  border-radius: 4px; 
  font-size: 11px; 
  font-weight: bold; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); 
  text-decoration: none; 
  letter-spacing: 0.1em; 
  display: inline-flex; 
  align-items: center; 
  gap: 4px; 
  transition: background-color 0.2s; 
}
.rom-dl-btn:hover { 
	color: #e41b5e; 
	border-color: #e41b5e; 
}
.rom-dl-btn svg { 
  width: 12px; 
  height: 12px; 
}

.rom-action-right { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  color: #9ca3af; 
}
.rom-bookmark-btn { 
  font-size: 16px; 
  color: #9ca3af; 
  cursor: pointer; 
  transition: color 0.2s; 
  display: flex; 
  align-items: center; 
}
.rom-bookmark-btn:hover { 
  color: #E41B5E; 
}
.rom-stat { 
  display: flex; 
  align-items: center; 
  gap: 4px; 
}
.rom-stat svg { 
  width: 16px; 
  height: 16px; 
}
.rom-stat-num { 
  font-size: 11px; 
  font-family: ui-monospace, SFMono-Regular, monospace; 
  font-weight: bold; 
  margin-top: 2px; 
}

/* 関連特集 (ポップアップアコーディオン) */
.rom-kanren-details { 
  position: relative; 
}
.rom-kanren-summary { 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 24px; 
  height: 24px; 
  color: #9ca3af; 
  transition: color 0.2s; 
  list-style: none; 
  outline: none; 
}
.rom-kanren-summary::-webkit-details-marker { 
  display: none; 
}
.rom-kanren-summary:hover { 
  color: #4b5563; 
}
.rom-kanren-icon { 
  width: 18px; 
  height: 18px; 
}
/* ==========================================
   情報ポップアップ（関連特集）：極小・コンパクト版
   ========================================== */

/* ポップアップ本体：パディングを詰める */
.rom-kanren-content { 
  position: absolute; 
  bottom: 120%; 
  right: 0; 
  width: 180px; /* 幅も少しスリムに調整（220pxから変更） */
  background-color: #fff; 
  border: 1px solid #e5e7eb; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
  border-radius: 4px; 
  padding: 8px 10px; /* 上下左右の余白をカット */
  z-index: 999; 
  font-size: 10px; /* 全体のベースを小さく */
  text-align: left; 
}

/* タイトル：高さを抑える */
.rom-kanren-title { 
  font-size: 11px; 
  font-weight: 900; 
  color: #6b7280; 
  margin-bottom: 5px; 
  border-bottom: 1px solid #f3f4f6; 
  padding-bottom: 3px; 
  line-height: 1; 
  letter-spacing: 0.05em;
}

/* リスト：行間を極限まで詰める */
.rom-kanren-list { 
  display: flex; 
  flex-direction: column; 
  gap: 2px !important; /* 項目同士の隙間を最小に */
  margin: 0; 
  padding: 0; 
  list-style: none; 
}

/* リンク：文字サイズと余白の調整 */
.rom-kanren-list li a { 
  color: #E41B5E; 
  text-decoration: none; 
  display: block; 
  font-weight: 700; 
  font-size: 11px; /* リンク文字を小さく */
  line-height: 1.3; 
  padding: 2px 0; /* 押しやすく、かつ詰まった印象に */
}

/* ホバー時は下線のみ */
.rom-kanren-list li a:hover { 
  text-decoration: underline !important; 
  opacity: 0.8;
}

/* 吹き出しの尻尾（位置を微調整） */
.rom-kanren-content::after { 
  content: ''; 
  position: absolute; 
  bottom: -5px; 
  right: 8px; 
  width: 10px; 
  height: 10px; 
  background-color: #fff; 
  border-bottom: 1px solid #e5e7eb; 
  border-right: 1px solid #e5e7eb; 
  transform: rotate(45deg); 
}



/* =======================================
   楽曲ページ (.single) 限定カスタムスタイル
======================================= */

/* AFFINGERデフォルトの余白を打ち消す（single時のみ） */
.single #wrapper:not(.colum1) #content-w, 
.single header + #content-w {
    padding-top: 0 !important;
}

/* PC・タブレット：メインエリアの余白 */
@media only screen and (min-width: 600px) {
    .single main {
    }
}

/* スマホ：メインエリアの余白 */
@media only screen and (max-width: 599px) {
    .single main {
    }
    
    /* 楽曲スペックカードの余白調整 */
    .single .st-music-spec-card {
        margin: 15px 0px 30px !important;
    }
}

/* 画面幅いっぱいの紺色背景タイトルエリア */
.cp-top-hero {
    background-color: #1a1a24; /* 紺色/ダーク背景 */
    width: 100%;
	padding: 15px 0 25px 0;
    margin-bottom: 0;
}
.cp-top-hero-inner {
    max-width: 1060px; /* AFFINGERのデフォルト幅に合わせて左端を揃える */
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

lite-youtube {
	max-width: none!important;
}
lite-youtube::before {
	background: none!important;
}

/* ★ パンくずのヒーローエリア用スタイル ★ */
.cp-top-hero #breadcrumb {
    margin: 0 0 25px 0;
}
.cp-top-hero #breadcrumb ol {
    color: #fff; /* 文字色を白に */
}
.cp-top-hero #breadcrumb li {
    color: #fff; /* リスト項目全体を白に */
}
.cp-top-hero #breadcrumb li a {
    color: #fff; /* リンク色を白に */
}

/* ★ カセット風アイコン ★ */
.cp-hero-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    margin-bottom: 2px;
}
.cp-hero-cassette {
    width: 34px;
    height: 22px;
    background-color: #8f2e3b; /* えんじ色 */
    border-radius: 3px 3px 0 0;
    padding: 2px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}
.cp-hero-cassette img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1px;
    opacity: 0.9;
}
.cp-hero-slot {
    width: 42px;
    height: 7px;
    background-color: #4b5563; /* 濃いグレー */
    border-radius: 3px;
    margin-top: -1px;
    position: relative;
    z-index: 2;
}

/* ★ キャッチコピー ★ */
.cp-top-hero-inner .cp-catchphrase {
    color: #e13a62;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-bottom: 0;
    /* 游ゴシックを強制適用 */
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif !important;
}

.cp-top-hero-inner .cp-entry-title {
    font-size: 26px;
    font-weight: 900;
    line-height: 1.3;
    margin: 0;
    color: #fff;
    border: none;
    padding: 0;
    /* 游ゴシックを強制適用 */
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif !important;
}
@media screen and (max-width: 959px) {
    .cp-top-hero-inner .cp-entry-title { font-size: 22px; }
}
.cp-top-hero-stats .stat-item {
    display: flex; align-items: center; gap: 6px;
}
.cp-top-hero-stats .stat-item i {
    color: #e13a62; font-size: 14px;
}
/* ステータス部分のテキスト（ダウンロード数など）は白に変更 */
.cp-top-hero-stats .stat-item span {
    font-size: 16px; 
    font-weight: normal; 
    color: #fff; 
}
/* 作曲者テキスト：白に変更 */
.cp-top-hero-stats .composer-text span {
    font-size: 14px !important;
    color: #fff !important; 
    font-weight: normal;
}

/* ヘッダー用評価スター */
.header-rating .post-ratings {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 2px;
    color: #ffc107 !important; /* 星自体の色は黄色 */
}

/* ★ 星アイコン・星テキストのみを確実に黄色にする ★ */
.header-rating .post-ratings i,
.header-rating .post-ratings .dashicons,
.header-rating .post-ratings .fa-star,
.header-rating .post-ratings img,
.cp-top-hero-stats .stat-item span.stars,
.average-rating .stars span {
    color: #ffc107 !important;
}

/* レビューの数字部分（.average-rating含む）およびその他の文字は白 */
.header-rating .post-ratings span:not(.stars),
.header-rating .post-ratings strong,
.header-rating .post-ratings .post-ratings-text,
.header-rating .average-rating {
    color: #fff !important;
    font-weight: normal !important;
}

/* ビジュアル */
.st-visual-wrapper {
    position: relative;
    padding: 0 0 15px;
    overflow: hidden;
    z-index: 0;
    width: 100%;
}
@media screen and (max-width: 599px) {
    .st-visual-wrapper {
        margin-top: -40px;
    }
}
@media screen and (max-width: 959px) {
    .st-visual-wrapper {
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        width: 100vw !important;
    }
}
.st-visual-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    filter: blur(8px) brightness(0.6);
    transform: scale(1.1);
    z-index: -1;
}
.st-visual-full { width: 100%; box-shadow: 0 4px 16px rgba(0,0,0,0.4); overflow: hidden; }
.st-visual-full img { width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: cover; }

.st-visual-full-youtube {
    background: transparent;
}
.st-visual-full-youtube .youtube-playbtn-center {
    display: block;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
    overflow: hidden;
}
.st-visual-full-youtube lite-youtube {
    display: block;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.st-visual-full-youtube .youtube-container {
    position: relative;
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 0 !important;
    padding: 0 0 56.25% !important;
    margin: 0 !important;
    overflow: hidden;
    background: #000;
}
.st-visual-full-youtube iframe.youtube {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* 全体ラッパー */
.st-cassette-wrap { position: relative; z-index: 9999; margin-bottom: 30px; }



/* ===================================================
   1. テーマカラーの定義（ここで色を一括管理）
=================================================== */

/* デフォルトの色（メインプレイヤー、似ている曲、その他） */
.st-cassette-player-area,
.similar-player-container,
.cassette-theme-default {
    --theme-color: #E41B5E; /* デフォルトのピンク */
}
.play-btn-compact {
    background-color: #E41B5E; /* デフォルトのピンク */
}

/* ===================================================
   2. 共通・大枠の設定 (rom-cassette用 変数セット)
=================================================== */
.rom-cassette {
    --cassette-bg: var(--theme-color);
    --header-bg: #1e232d;
    --header-text: #f3f4f6;
    --player-bg: #1a1c23;
    --player-btn: var(--theme-color);
    --player-bar: var(--theme-color);
    --player-shadow: 0 0 5px var(--theme-color);
    --player-time: #9ca3af;
    --player-bar-bg: #374151;
}


/* ===================================================
   3. メインプレイヤー (コンパクト版 カセットプレイヤー)
=================================================== */
.st-cassette-player-area {
    margin-top: -12px !important;
    padding: 0 15px;
}

.st-cassette-deck {
    background-color: #1a1a1f; 
    border: 3px solid var(--theme-color); /* 変数に変更 */
    border-radius: 10px;
    padding: 12px 20px; 
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    gap: 8px; 
}

/* メタ情報（作曲者・DL数） */
.deck-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px dashed #4b5563;
    margin-bottom: 4px;
}
.deck-meta-left {
    display: flex;
    gap: 16px;
    align-items: center;
}
.deck-meta .stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #e5e7eb;
    font-size: 12px; 
    font-weight: 700;
}
.deck-meta .stat-item i { color: #9ca3af; }
.deck-meta .composer-text span {
    font-size: 12px !important;
    color: #e5e7eb !important;
    font-weight: 700;
}

/* ==========================================
   スマホ限定 (820px以下) メタ情報レイアウト
   ========================================== */
@media screen and (max-width: 820px) {
    /* 親要素を基準位置に設定（flexを解除） */
    .deck-meta {
        position: relative !important;
        display: block !important; 
    }
    
    /* 左側グループ（星・作曲・DL） */
    .deck-meta-left {
        flex-wrap: wrap;
		gap: 0px;
		padding-right: 90px;
    }

    /* 【1段目】星・バッジ（100%幅にしてその後ろを強制改行） */
    .deck-meta-left .cp-top-hero-stats {
        width: 100%;
        margin-bottom: 8px;
    }

    /* 【2段目】作曲者とDL数（そのまま左から並べる） */
    .deck-meta-left .composer-text {
        margin-right: 15px;
    }

    /* 【1段目の右端】REC（日付）を右上に絶対配置 */
    .extra-publish-date {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        line-height: 1.5;
    }
}

/* メインコントロールエリア */
.deck-main-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* 再生ボタン */
.play-btn-compact {
    color: #ffffff !important;
    border: none; 
    width: 42px; height: 42px; 
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); 
    transition: transform 0.1s; padding: 0;
    flex-shrink: 0;
}
.play-btn-compact:active { transform: scale(0.95); }

/* プログレスバー */
.deck-progress-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1; 
}
.time-text { font-size: 11px; font-weight: 900; font-family: monospace; }
.current-time { color: var(--theme-color); } /* 変数に変更 */
.duration-time { color: #6b7280; }
.progress-bg {
    flex: 1; height: 6px; 
    background: #2a2b36; border-radius: 9999px; position: relative; cursor: pointer;
}
.progress-bar {
    position: absolute; top: 0; left: 0; bottom: 0; width: 0%; 
    background: var(--theme-color); /* 変数に変更 */
    border-radius: 9999px;
}

/* 右側アクション（音量・お気に入り・リピート） */
.deck-actions-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.text-gray { color: #6b7280; font-size: 14px; }
.hover-white:hover { color: white; cursor: pointer; }

/* ループアクティブ用クラス */
.loop-active {
    color: var(--theme-color) !important; /* 変数に変更 */
}


/* ===================================================
   4. 音量コントロール（全プレイヤー共通・統一デザイン）
   =================================================== */

/* コンテナ設定 */
.volume-control, 
.rom-volume-control,
.similar-volume-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.rom-volume-control { margin-left: 8px; flex-shrink: 0; }

/* 音量アイコン */
.rom-volume-icon {
    color: #ccc !important;
    fill: currentColor !important; /* SVGの色を現在の文字色(白)に合わせる */
}

/* スライダー本体（溝）の統一スタイル */
input[type="range"]#cassette-volume-slider,
input[type="range"].rom-volume-slider,
input[type="range"].similar-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    background: #38383f  !important; /* 背景色固定 */
    height: 12px !important;         /* 高さを統一 */
    border-radius: 50px !important; /* 角丸を統一 */
	border: 1px solid #fff !important;
    outline: none;
    cursor: pointer;
    overflow: hidden; /* ゲージのはみ出し防止 */
    padding: 0 !important;
    margin: 0;
}

/* スライダーの幅個別設定 */
input#cassette-volume-slider { width: 80px !important; }
.rom-volume-slider, 
.similar-volume-slider { width: 50px !important; }

/* ツマミのデザイン（Chrome, Safari） */
.rom-volume-slider::-webkit-slider-thumb,
#cassette-volume-slider::-webkit-slider-thumb,
.similar-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 8px;
    background: #ffffff !important;
    border-radius: 50% !important;
    cursor: pointer;
    transition: transform 0.1s;
    /* 左側のゲージをテーマカラーにする（必要なければ削除してください） */
    /* box-shadow: -100vw 0 0 100vw var(--theme-color); */
}

/* ツマミのデザイン（Firefox） */
.rom-volume-slider::-moz-range-thumb,
#cassette-volume-slider::-moz-range-thumb,
.similar-volume-slider::-moz-range-thumb {
    width: 8px;
    height: 8px;
    background: #ffffff !important;
    border-radius: 50% !important;
    border: none;
    cursor: pointer;
    transition: transform 0.1s;
}

/* アイコンの色指定 */
.rom-volume-icon,
.similar-volume-icon,
#volume-icon {
    color: #ccc !important;
    fill: #ccc !important;
    font-size: 13px;
    cursor: pointer;
}

/* ホバー時の挙動 */
input[type="range"].rom-volume-slider:hover::-webkit-slider-thumb,
input[type="range"].rom-volume-slider:hover::-moz-range-thumb {
    transform: scale(1.2);
}


/* ===================================================
   5. 情報エリア (タグ・スペックカード・ライナーノーツ)
=================================================== */
/* スペックカード */
.st-music-spec-card {
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    padding: 30px 25px; 
    margin: 15px 15px 30px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

/* メタ情報行 */
.compact-meta-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px;
    padding-bottom: 15px; margin-bottom: 25px; 
    border-bottom: 1px solid #f0f0f0; font-size: 12px; color: #374151; 
}
.compact-meta-item { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.compact-meta-item i { color: #9ca3af; font-size: 15px; width: 16px; text-align: center; }
.compact-meta-item a { color: inherit; text-decoration: underline; }

/* タグ・カテゴリ */
.extra-group-new { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.extra-label-custom { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 900; color: #6b7280; letter-spacing: 0.1em; flex-shrink: 0; width: 85px; margin-top: 6px; }
.extra-label-custom i { color: #9ca3af; font-size: 14px; width: 16px; text-align: center; }
.extra-tags { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }

.cat-link { 
    background: #e41b5e;
    color: white; padding: 4px 12px; border-radius: 100px; font-size: 11px; font-weight: 700; text-decoration: none; 
}
.cat-link:hover { 
    opacity: 0.8; 
	color: #fff;
}
/* プレミア素材専用のスタイル */
.cat-link.is-premier {
    background-color: #a66a4c !important; /* 以前のバッジの色 */
    color: #fff !important;
    font-weight: 700;
}

.tag-link-btn {
    background-color: #ffffff; border: 1px solid #e5e7eb; color: #374151; 
    padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 700; text-decoration: none; transition: all 0.2s;     box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.tag-link-btn:hover {
    border-color: #e41b5e;
    color: #e41b5e;
}

/* シェア・日付 */
.extra-share-row { padding-top: 10px; border-top: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; }
.extra-share-row .sns { padding: 0px; }
.share-label { font-size: 9px; font-weight: 900; color: #6b7280; letter-spacing: 0.15em; }
.extra-publish-date { font-size: 11px; color: #fff; letter-spacing: 0.05em; }

/* ライナーノーツ */
.st-liner-notes-box {
    background-color: #fdfbf7; background-image: radial-gradient(#e5e7eb 0.5px, transparent 0.5px);
    background-size: 20px 20px; border: 1px solid #e5e0d6; border-radius: 4px; padding: 30px; margin: 20px 0; position: relative; box-shadow: 2px 2px 0px #e5e0d6;
}
.st-liner-notes-box::before {
    content: "LINER NOTES"; position: absolute; top: -12px; left: 20px; background: #374151; color: white; padding: 2px 12px; font-size: 10px; font-weight: 900; letter-spacing: 0.1em;
}


/* ===================================================
   6. 似ている曲プレイヤー (コンパクト1行)
=================================================== */
.similar-player-container {
    width: 100%;
    margin-top: 10px;
}
.similar-player-ui {
    background-color: #1a1a1f; 
    /* border: 2px solid var(--theme-color); */
    border-radius: 8px;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* 似ている曲 再生ボタン */
.similar-play-btn {
    background: white; border: none; width: 34px; height: 34px; border-radius: 50%;
    color: var(--theme-color); /* 変数に変更 */
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0; transition: transform 0.1s;
}
.similar-play-btn:active { transform: scale(0.95); }

/* 似ている曲 再生バー */
.similar-progress-wrapper { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.similar-time { font-size: 10px; font-weight: 900; font-family: monospace; flex-shrink: 0; }
.similar-time-current { color: var(--theme-color); } /* 変数に変更 */
.similar-time-duration { color: #6b7280; }
.similar-progress-bg { flex: 1; height: 4px; background-color: #2a2b36; border-radius: 9999px; position: relative; cursor: pointer; }
.similar-progress-bar { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background-color: var(--theme-color); border-radius: 9999px; } /* 変数に変更 */

/* 似ている曲 アクション */
.similar-actions-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.similar-volume-wrapper { display: flex; align-items: center; gap: 6px; }
.similar-volume-icon { color: #6b7280; font-size: 13px; cursor: pointer; }
.similar-volume-slider { width: 50px !important; height: 4px; padding: 8px 5px !important; -webkit-appearance: none; appearance: none; background: #2a2b36; border-radius: 9999px !important; outline: none; cursor: pointer; overflow: hidden; }

/* お気に入りボタン微調整 */
.rom-player-actions-right .rom-bookmark-btn { font-size: 13px; line-height: 1; }
.rom-player-actions-right .rom-bookmark-btn a, .rom-player-actions-right .rom-bookmark-btn span { font-size: 13px !important; }
.similar-actions-right .custom-like-btn a, .similar-actions-right .custom-like-btn span { font-size: 13px !important; }


/* ===================================================
   7. レスポンシブ (スマホ対応)
=================================================== */
@media screen and (max-width: 599px) {
    .deck-main-controls { flex-wrap: wrap; gap: 12px; }
    .deck-progress-wrapper { order: -1; width: 100%; flex: none; }
    .deck-actions-right { margin-left: auto; }
}

@media screen and (max-width: 480px) {
    .similar-volume-slider { display: none; }
}

@media (max-width: 959px) {
	.rom-cassette-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 599px) {
	.rom-cassette-grid { grid-template-columns: 1fr !important; }
}

/* カセット本体リセット */
.rom-cassette-grid .rom-cassette {
	width: 100% !important;
	margin-bottom: 0 !important;
	float: none !important;
}

/* プレイヤー一行化のためのCSS */
.rom-player-actions-right {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-shrink: 0 !important;
}


/* ==========================================
   カセットUI：グリッドレイアウト（レスポンシブ重視版）
   ========================================== */

/* 【1】ベース設定：基本は3列 */
.rom-cassette-grid {
    display: grid !important;
	align-items: start !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
    grid-auto-flow: dense !important;
    margin-bottom: 20px !important; 
}

/* 【2】一覧ページ（アーカイブ）：2列 */
.archive .rom-cassette-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
}

/* 【3】★重要：2列だと「はみ出し」が始まる幅（1024px以下）で早めに調整 */
/* 一覧ページ以外の3列も、1024px以下では2列に落として幅を確保する */
@media screen and (max-width: 1024px) {
    .rom-cassette-grid,
    .archive .rom-cassette-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 【4】★重要：プレイヤーがはみ出す限界点（820px以下）で1列に切り替え */
/* 2列のままだとカード内のボタンやタイマーが重なるため、ここで1列にする */
@media screen and (max-width: 820px) {
    .rom-cassette-grid,
    .archive .rom-cassette-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/* --- 共通リセット設定 --- */

/* カード自体の幅固定を解除 */
.rom-cassette-grid .rom-cassette {
    width: 100% !important;
    margin-bottom: 0 !important;
    float: none !important;
}

/* 広告枠・メッセージの全幅化（崩れ防止） */
.rom-cassette-grid > p,
.rom-cassette-grid > .st-infeed-adunit {
    grid-column: 1 / -1 !important; 
    width: 100% !important;
    margin: 15px 0 !important;
}

/* ==========================================
   検索結果画面：カセットグリッドの強制適用
   ========================================== */

/* 検索結果のコンテナにもグリッドを適用 */
.search-results .st-main article, 
.search-results .rom-cassette-grid,
.search-results #st-tab-box {
    display: grid !important;
    /* ★ PCでは2列を維持 */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
}
/* スマホでは1列にする */
@media screen and (max-width: 820px) {
    .search-results .st-main article,
    .search-results .rom-cassette-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================
   グリッド：はみ出し防止 ＆ 列数維持設定
   ========================================== */

/* 2列や3列など、既存の列設定を活かしつつ「はみ出し」だけを防ぐ */
.search-results .st-main,
.rom-cassette-grid,
.st-music-archive-grid { /* 他のグリッドクラスも必要に応じて追加 */
    display: grid !important;
    /* ★ repeat(2,...) を削除し、自動計算を「中身に依存させない」設定に変更 */
    grid-auto-columns: minmax(0, 1fr); 
    width: 100% !important;
}

/* ★ 2列にしたい場所だけを個別に指定 */
.search-results .st-main {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* カセット本体：中身に押し広げられないようにする */
.rom-cassette {
    width: 100% !important;
    min-width: 0 !important; /* これが「はみ出し」を防ぐ鍵です */
    box-sizing: border-box !important;
}


#st-headerbox {
    position: relative;
    z-index: 1; /* 重なりの順序を制御 */
}
@media print, screen and (max-width: 599px) {
	#st-headerbox {
	    background-position: calc(50% + 40px) center!important;
	}
}

#st-headerbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 上から下に「黒の60%」から「透明」へ */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 50%);
    z-index: -1; /* 背景画像より上、テキストより下に配置 */
    pointer-events: none; /* リンクのクリック等を邪魔しない */
}


/* スマホでは音量操作エリアごと消す */
@media (hover: none) and (pointer: coarse) {
    .rom-volume-control,
    .volume-control {
        display: none !important;
    }
}
/* スマホのとき音量調整エリアを隠す */
@media screen and (max-width: 599px) {
    .similar-volume-wrapper {
        display: none !important;
    }
}
/* 一覧ページ（グリッド表示）の中にある音量アイコンだけを小さく調整 */
.rom-cassette-grid .rom-volume-icon {
    width: 16px !important;
    font-size: 13px !important;
}

/* ついでにスライダーとの間隔も少し詰めたい場合は以下も追加 */
.rom-cassette-grid .rom-volume-slider {
    width: 50px; /* スライダーを少し短くして収まりを良くする */
}

/* ゲームデモ */
.cp-game-demo-launch {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 0;
	background: #05050a;
	overflow: hidden;
}

.cp-game-demo-thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-game-demo-open {
	position: absolute;
	left: 16px;
	top: 16px;
	transform: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 0;
	border-radius: 50px;
	background: #e41b5e;
	color: #fff;
	padding: 10px 14px;
	font-weight: 700;
	cursor: pointer;
	z-index: 2;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.cp-game-demo-open:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
	
	/* 白を20%ほど重ねて明るくする（linear-gradientを使うと単色背景でも重ねられます） */
	background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), #e41b5e !important;
}


.cp-game-demo-modal {
	position: fixed;
	inset: 0;
	z-index: 2147483647;
	display: none;
}

.cp-game-demo-modal.is-open {
	display: block;
}

.cp-game-demo-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .82);
}

.cp-game-demo-modal-panel {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(96vw, 960px);
	aspect-ratio: 4 / 3;
	padding: 0;
	border: 0;
	background: #05050a;
	box-shadow: 0 20px 80px rgba(0, 0, 0, .55);
	overflow: visible;
}

.cp-game-demo-modal-bar {
	position: absolute;
	left: 0;
	right: 0;
	top: -44px;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	z-index: 2147483647;
}

.cp-game-demo-newtab,
.cp-game-demo-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .82);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .7);
	padding: 6px 10px;
	text-decoration: none;
	cursor: pointer;
	line-height: 1;
	font-weight: 700;
	box-sizing: border-box;
}

.cp-game-demo-newtab {
	min-height: 38px;
}

.cp-game-demo-close {
	width: 38px;
	height: 38px;
	min-height: 0;
	padding: 0 0 2px;
	font-size: 22px;
	line-height: 1;
	text-indent: 0;
}

#cp-game-demo-iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.cp-game-demo-lock {
	overflow: hidden;
}

@media (max-width: 720px) {
	.cp-game-demo-open {
		left: 10px;
		top: 10px;
		padding: 8px 10px;
		font-size: 13px;
	}

	.cp-game-demo-modal-backdrop {
		background: rgba(0, 0, 0, .68);
	}

	.cp-game-demo-modal-panel {
		inset: 0;
		left: auto;
		top: auto;
		transform: none;
		width: 100vw;
		height: 100dvh;
		padding: 56px 8px;
		aspect-ratio: auto;
		box-shadow: none;
		overflow: hidden;
		box-sizing: border-box;
		background: transparent;
	}

	.cp-game-demo-modal-bar {
		position: fixed;
		left: auto;
		top: calc(10px + env(safe-area-inset-top));
		right: 16px;
		width: auto;
		transform: none;
	}

	.cp-game-demo-newtab {
		display: none;
	}

	.cp-game-demo-close {
		width: 42px;
		height: 42px;
		padding: 0 0 2px;
		font-size: 24px;
	}
}


.rom-thumbnail-wrap {
	position: relative;
}

.cp-game-demo-open-card {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 5;
	padding: 6px 10px;
	border: 0;
	border-radius: 6px;
	/* background: rgba(0, 0, 0, 0.78); */
	background: #e41b5e!important;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;

}

.cp-game-demo-open-card:hover {
	/* 白を20%ほど重ねて明るくする（linear-gradientを使うと単色背景でも重ねられます） */
	background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), #e41b5e !important;
}

body.page .rom-cassette .cp-game-demo-open-card {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	/* background: rgba(0, 0, 0, 0.78); */
	background: #e41b5e!important;
	color: #fff;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

body.page .rom-cassette .cp-game-demo-open-card i {
	line-height: 1;
}



/* 利用事例 */
.case-card-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 24px;
}

.case-card {
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	border: 1px solid #e5e5e5;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.case-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.13);
}

.case-card-media {
	position: relative;
	aspect-ratio: 16 / 8.5;
	overflow: hidden;
	background: #eee;
}

.case-card-thumbnail {
	display: block;
	width: 100%;
	height: 100%;
}

.case-card-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.case-card:hover .case-card-thumbnail img {
	transform: scale(1.03);
}

.case-card-tags {
	position: absolute;
	left: 12px;
	bottom: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	z-index: 1;
}

.case-card-tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 50px !important;
	background-color: #E41B5E;
	color: #fff;
	font-size: 10px;
	font-weight: normal !important;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: opacity 0.2s;
}

.case-card-body {
	padding: 17px 18px 19px;
	background: #fff;
}

.case-card-title {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: #333 !important;
	font-size: 0.95rem !important;
	font-weight: 700;
	line-height: 1.55 !important;
}

.case-card-title::before,
.case-card-title::after {
	display: none !important;
}

.case-card-title a,
.case-card-title a:visited {
	color: #333 !important;
	text-decoration: none !important;
}

.case-card-title a:hover {
	color: #E41B5E !important;
	text-decoration: underline !important;
}

@media screen and (max-width: 767px) {
	.case-card-list {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.case-card-body {
		padding: 15px;
	}
}

.case-card-work-title {
	margin: 0 0 6px !important;
	padding: 0 !important;
	color: #777;
	font-size: 12px;
	font-weight: normal;
	line-height: 1.5;
}

.case-card-meta {
	margin: 9px 0 0 !important;
	padding: 0 !important;
	color: #777;
	font-size: 12px;
	font-weight: normal;
	line-height: 1.5;
}

.case-card-client {
	margin: 0 0 6px !important;
	padding: 0 !important;
	color: #777;
	font-size: 12px;
	font-weight: normal;
	line-height: 1.5;
}



/* トップページメインビジュアル */
#st-header {
    padding-top: 50px!important;
    padding-bottom: 50px!important;
}