/*******************************************/
/* ダークモードライトモード */
/*******************************************/

/* light */
:root {
	--text-color: #383838;
	--text-color-lineshare: #fbfbfb;
	--text-color-link: #3d54ece9;
	--bg-color: #ffffff;
	--bg-color-hover: #dcdcdc;
	--text-color-hover: #313131;

	--pointbox--btn-color: #dbe3ed;
	--pointbox--btn-color-hover: #cacaca;

	--title-bg-color: #F1F1F1;
	--title-color: #444444;

	--tag-bg-color: #000000;

	--header_title-color: #1a2baf;

	--list-group-item-ctg-bg-color: #ffffff;
	--list-group-item-ctg-color: #d4d4d4;
	--list-group-item-ctg-bg-color-hover: #f6f6f6;
	--list-group-item-ctg-color-hover: #e3e3e3;

	--table-tr-mouse-over-color: #F7F7F7;

	/*--border-color: #d5d5d5;*/
	--border-color: #d6d6d6;

	--form-control-text-color: #414141;
	--form-control-bg-color: #fbfbfb;
	--form-control-border-color: #c6c8ca;

	--pager-bg-color: #ffffff;
	--pager-text-color: #383838;
	--pager-bg-color-current: #e6e6e6;
	--pager-text-color-current: #606060;
	--pager-bg-color-hover: #afafaf;
	--pager-text-color-hover: #212121;

	--rss_box-color: #f3f3f3;
	--rss_box-bg-color: #FF9900;
	--rss_box-border: #cccccc;


	--alert-info-color: #0c5460;
	--alert-info-bg-color: #d1ecf1;
	--alert-info-border: #bee5eb;
	--alert-primary-color: #910e2a;
	--alert-primary-bg-color: #f1d1e1;
	--alert-primary-border: #ebbebe;

	--btn-light-color: #212529;
	--btn-light-bg-color: #f8f9fa;
	--btn-light-border-color: #f8f9fa;

	--bbs-title: #dcdcdc;
	--bbs-title-date: #dcdcdc;
	--bbs-name: #ffffff;
	--bbs-body: #ffffff;

	--user_add-input: #757575;

	--subscription-text-color: #383838;
	--subscription-text-primary-color: #e4f1ff;
	--subscription-primary-bg-color: #0b69cd;
	--subscription-bg-color: #f5f5f5;
	--subscription-text-warning-color: #e6ac00;
	--subscription-btn-warning-bg-color: #ebb000;
	--subscription-btn-warning-border-color: #d29e03;

	--subscription-text-p-color: #ebb000;
	--subscription-text-s-color: #007bff;

	--checkmark-color: #3d3f3d;

	--card_plans_back: #f6f6f6;
	--card_plans_border: #d9d9d9;
	--card_plans_shadow: #d9d9d9;

}

/* dark */
[data-theme="dark"] {
	--bg-color: #111111;
	--text-color: #d5d5d5;
	--text-color-lineshare: #fafafa;
	--text-color-link: #8a98ffe9;

	--bg-color-hover: #393939;
	--text-color-hover: #cdcdcd;

	--pointbox--btn-color: #545454;
	--pointbox-btn-color-hover: #585858;

	--title-bg-color: #353535;
	--title-color: #d4d4d4;

	--header_title-color: #d6d6d6;

	--list-group-item-ctg-bg-color: #202020;
	--list-group-item-ctg-color: #525252;
	--list-group-item-ctg-bg-color-hover: #454545;
	--list-group-item-ctg-color-hover: #616161;

	--table-tr-mouse-over-color: #1c1c1c;

	/*--border-color: #464646;*/
	/*--border-color: #656566;*/
	--border-color: #3d3d3d;

	--form-control-text-color: #d5d5d5;
	--form-control-bg-color: #6c6c6c;
	--form-control-border-color: #5b5c5e;

	--pager-bg-color: #383838;
	--pager-text-color: #d8d8d8;
	--pager-bg-color-current: #606060;
	--pager-text-color-current: #e6e6e6;
	--pager-bg-color-hover: #212121;
	--pager-text-color-hover: #afafaf;

	--rss_box-border: #FF9900;
	--rss_box-bg-border: #cccccc;

	--rss_box-color: #e8e8e8;
	--rss_box-bg-color: #FF9900;
	--rss_box-border: #353535;

	--alert-info-color: #8ed7e3;
	--alert-info-bg-color: #2c3435;
	--alert-info-border: #86a0a4;
	--alert-primary-color: #ec7d7d;
	--alert-primary-bg-color: #392325;
	--alert-primary-border: #8d5975;

	--btn-light-color: #c9d5e1;
	--btn-light-bg-color: #454748;
	--btn-light-border-color: #414242;

	--bbs-title: #414141;
	--bbs-title-date: #414141;
	--bbs-name: #000000;
	--bbs-body: #000000;

	--user_add-input: #7a7a7a;

	--subscription-text-color: #cfcfcf;
	--subscription-text-primary-color: #e9f2fc;
	--subscription-primary-bg-color: #0c71de;
	--subscription-bg-color: #2e2f30;
	--subscription-text-warning-color: #e4ab00;
	--subscription-btn-warning-bg-color: #dfa700;
	--subscription-btn-warning-border-color: #ffd145;

	--subscription-text-p-color: #dfa700;
	--subscription-text-s-color: #0f82fd;

	--checkmark-color: #D0D7D0;

	--card_plans_back: #252525;
	--card_plans_border: #5a5a5a;
	--card_plans_shadow: #505050;
}

/*******************************************/
/* 全体 */
/*******************************************/
body {
	background-color: var(--bg-color);
	color: var(--text-color);
}

* {
	font-size: 0.9rem;
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.4em;
	letter-spacing: 0px;
}
@media screen and (max-width: 768px) {
	* {
		font-size: 0.88rem;
		line-height: 1.2em;
	}
}

/*
.container {
	font-size: 0.83em;
	/*max-width: 930px;*/
	max-width: 992px;
	margin: 0 auto;
}
*/

hr {
	color: var(--text-color);
	width: 100%;
	height: 0px;
	border: 1px !important;
}
.hr_login {
	color: var(--text-color);
	width: 100%;
	height: 0px;
	border: 1px solid var(--border-color) !important;
}
a {
	color: var(--text-color-link) !important;
	text-decoration: none;
	background-color: transparent;
}
img {
	border-style:none;
}
.clear {
	clear: both;
	margin-bottom: 2px;
}
.clear2 {
	clear: both;
	margin-bottom: 15px;
}

#header_title {
	font-size: 1.27rem;
	font-weight: bold;
	color: var(--header_title-color);
	margin: 0px 0px 5px 0px;
	padding: 2px;
}
#header_subtitle {
	font-size: 0.83rem;
	color: var(--header_title-color);
	margin: 0px 0px 5px 0px;
	padding: 5px;
}
#header_title_version {
	font-size: 0.73rem;
	color: var(--header_title-color);
}
@media screen and (max-width: 768px) {
	#header_title {
		font-size: 18px;
		font-weight: bold;
		color: var(--header_title-color);
		margin: 0px 0px 5px 0px;
		padding: 2px;
	}
	#header_subtitle {
		font-size: 10px;
		color: var(--header_title-color);
		margin: 0px 0px 5px 0px;
		padding: 5px;
	}
	#header_title_version {
		font-size: 9px;
		margin-top:5px;
	}
}

.themeToggle{
	font-size: 1.5rem;
	padding: 1px 10px 7px 11px;
	margin: 0px 0px 0px 0px;
	background-color: var(--pointbox--btn-color);
    color: var(--text-color);
	border: 0px solid var(--border-color);
}
@media screen and (max-width: 768px) {
	.themeToggle{
		font-size: 1.5rem;
		padding: 8px 13px 11px 13px;
		margin: 0px 0px 0px 0px;
		background-color: var(--pointbox--btn-color);
	    color: var(--text-color);
		border: 0px solid var(--border-color);
	}
}

#footer {
	font-size: 0.88rem;
	color: var(--header_title-color);
	height: 43px;
	border-radius: 4px;
}
@media screen and (max-width: 768px) {
	#footer {
		font-size: 0.80rem;
		color: var(--header_title-color);
		height: 43px;
		border-radius: 4px;
	}
}

.error_message, .error_message_review{
	color: #ff3399;
	background-color: rgba(243, 151, 159, 0.21);
	border: solid 2px var(--border-color);
	padding: 10px;
	margin: 10px 0px 10px 0px;
	vertical-align: top;
	font-weight: bold;
	border-radius: 5px;
}
.link-block {
	display: block;
	width: 100%;
	text-decoration: none;
	color: inherit;
	padding: 1px 1px;
	border-radius: 4px;
}
.link-block:hover {
	/*background-color: #ecf1fa;*/
}

.border {
	border: 1px solid var(--border-color) !important;
}

.card {
  border: 1px solid var(--card_plans_border);
  background-color: var(--card_plans_bg);
  cursor:pointer;
}
.card_plans {
	transition: all 0.3s ease;
	border: 1px solid var(--card_plans_border);
	border-radius: 0.5rem;
	background-color: var(--card_plans_back);
	min-height: 400px;
	cursor:pointer;
}
.card_plans:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 5px var(--card_plans_shadow);
}
@media screen and (max-width: 768px) {
	.card_plans {
		transition: all 0.3s ease;
		border: 1px solid var(--card_plans_border);
		border-radius: 0.5rem;
		background-color: var(--card_plans_back);
		min-height: 100%;
	}
}
.checkmark {
	display: inline-block;
	width: 1.1em;
	text-align: center;
	color: var(--checkmark-color);
}
@media screen and (max-width: 768px) {
	.checkmark {
		display: inline-block;
		/*width: 1.1em;*/
		text-align: center;
		color: var(--checkmark-color);
	}
}


.subscription_title {
	font-size: 1.55rem;
	margin-bottom: 13px;
}
.subscription_title1{
	font-size: 1.55rem;
	margin-bottom: 13px;
}
.subscription_title2{
	color: var(--subscription-text-s-color) !important;
	font-size: 1.55rem;
	margin-bottom: 13px;
}
.subscription_title3{
	font-size: 1.55rem;
	margin-bottom: 13px;
}
/* .subscription_btn1 {
	margin-top: 36px;
} */

.alert-info {
	color: var(--alert-info-color);
	background-color: var(--alert-info-bg-color);
	border-color: var(--alert-info-border);
}
.alert-primary {
	color: var(--alert-primary-color);
	background-color: var(--alert-primary-bg-color);
	border-color: var(--alert-primary-border);
}

.text-primary {
	color: var(--subscription-text-primary-color) !important;
}
.text-muted {
    color: var(--subscription-text-color) !important;
}
.text-secondary {
	color: var(--text-color) !important;
}
.text-danger {
    color: #ff5d6c !important;
}
.text-warning {
    color: var(--subscription-text-warning-color) !important;
}

.bg-dark {
    background-color: var(--subscription-bg-color) !important;
}
.list-unstyled {
	color: var(--text-color) !important;
}
.btn-warning {
	background-color: var(--subscription-btn-warning-bg-color) !important;
	border-color: var(--subscription-btn-warning-border-color) !important;
}

.subscription_s {
    color: var(--subscription-text-s-color) !important;
}
.subscription_p {
    color: var(--subscription-text-p-color) !important;
}

/* loading */
.loadingimgage {
	display: inline-block;
	/* 中心を基準に回転 */
	transform-origin: 50% 50%;
	animation: spin 1s linear infinite;
}
@keyframes spin{
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* ダークモード用 */
[data-theme="dark"] .loadingimgage {
    filter: invert(1); /* 白っぽく反転 */
}

/*******************************************/
/* プレイヤー(共通) */
/*******************************************/
.audio_player{
	margin: 1px;
}

/* album */
.pbox[data-ctype="2"] .waveform_container {
    flex-grow: 1;
    position: relative;
    height: 40px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    overflow: hidden;
    border-radius: 4px;
}




/*******************************************/
/* レイアウト(index用) */
/*******************************************/
#main_index {
	float:left;
	width:790px;
	margin:6px;
}
#main_index ul{
	list-style-type: none;
	padding:1px;
	margin:1px;
}
#main_index ol{
	border:solid 3px var(--border-color);;
	padding:8px 10px 8px 20px;
	margin:15px 15px 15px 15px;
}

#index_right {
	float: right;
	width: 774px;
	padding: 0px 0px 5px 0px;
}
#index_right_box {
	float: right; 
	padding: 5px 1px 5px 100px;
}
.clearRight {
	clear:right;
}

.index_info {
	padding: 3px 0px 0px 0px;
	float: right;
	color: var(--text-color);
}
.index_info .disp_num{
	padding: 0px 5px 0px 0px;
	font-size: 15px;
	font-weight: bold;
}

.sound_index_icon {
	float: left;
	padding: 3px 1px 0px 1px;
	margin: 0px 1px 0px 1px;
	font-size: 15px;
	font-weight: bold;
}
.sound_index_link {
	float: left;
	padding: 3px 2px 2px 2px;
	margin: 0px 1px 0px 1px;
	font-size: 15px;
	font-weight: bold;
}
.sound_index_title {
	float: left;
	padding: 0px 1px 0px 1px;
	margin: 0px 1px 0px 1px;
	font-size: 15px;
	font-weight: bold;
}
.sound_index_date {
	float: left;
	padding: 7px 1px 0px 1px;
	margin: 0px 1px 0px 1px;
	font-size: 11px;
	/*font-weight: bold;*/
}
.sound_card {
	color: var(--text-color);
	background-color: var(--bg-color);
}

@media screen and (max-width: 768px) {
	#sound_search_word {
		margin-bottom: 5px;
	}
}

.list-group-item-top {
	position: relative;
	display: block;
	padding: 0.5rem 0.5rem;
	margin-bottom: -1px;
	background-color: var(--list-group-item-ctg-bg-color);
	border: 1px solid var(--list-group-item-ctg-color);
	color: var(--text-color);
}
@media screen and (max-width: 768px) {
	.list-group-item-top {
		position: relative;
		display: block;
		padding: 0.9rem 0.5rem;
		margin-bottom: -1px;
		background-color: var(--list-group-item-ctg-bg-color);
		border: 1px solid var(--list-group-item-ctg-color);
		color: var(--text-color);
	}
}
.list-group-item-top:hover {
    background-color: var(--list-group-item-ctg-bg-color-hover);
	color: var(--text-color);
}
.list-group-item {
	position: relative;
	display: block;
	/*padding: 0.3rem 0px 0.3rem 10px;*/
	padding: 0px !important;
	margin-bottom: -1px;
	background-color: var(--list-group-item-ctg-bg-color);
	border: 1px solid var(--list-group-item-ctg-color);
	color: var(--text-color);
}
.list-group-item:hover {
    background-color: var(--list-group-item-ctg-bg-color-hover);
	color: var(--text-color);
}

.list-group-item-ctg {
	position: relative;
	display: block;
	padding: 0.3rem 0px 0.3rem 10px;
	/*padding: 0px !important;*/
	margin-bottom: -1px;
	background-color: var(--list-group-item-ctg-bg-color);
	border: 1px solid var(--list-group-item-ctg-color);
	color: var(--text-color);
}
/*
.list-group-item-ctg a{
	transition: all 0.7s ease;
}
*/
.list-group-item-ctg:hover {
    background-color: var(--list-group-item-ctg-bg-color-hover);
	color: var(--text-color);
}

.d-block {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 10px 0px 5px 0px;
    box-sizing: border-box;
    margin-bottom: 0rem;
    cursor: pointer;
}
.d-block-menu {
    padding: 5px 8px;
    box-sizing: border-box;
    margin-bottom: 0rem;
    cursor: pointer;
}



/*******************************************/
/* レイアウト(通常用) */
/*******************************************/
#container {
	width:950px;
	margin:1px auto 1px;
	_text-align:left;
}
#sub {
	float:left;
	width:148px;
	margin:0px;
}
#sub1 {
	width:140px;
	float:right;
}
#sub2 {
	width:140px;
	float:left;
}
#contents {
	margin-bottom: 20px;
	float:left;
	width:950px;
}
#main {
	width:798px;
	float:right;
	margin-left:2px
}

.globalnavi_fix {
	top     : 0px;
	position: fixed;
	width   : 130px;
}
@media screen and (max-width: 768px) {
	.globalnavi_fix {
		top     : 0px;
		/* position: fixed; */
		width   : 130px;
		/* z-index: 1;*/
		display: contents;
	}
}



/*******************************************/
/* レイアウト関係(その他) */
/*******************************************/
/* ユーザメッセージ */
#u_header {
	position: relative ;
	/*vertical-align: middle;*/
	width: 100%;
	height: 30px;
	margin: 0px 0px 2px 0px;
	/* border-bottom: solid 1px #CCCCCC; */
}
#u_user {
	position: relative;
	float: right;
	margin-top: 7px;
	margin-bottom: 7px;
}
#u_message {
	position: relative;
	color: #FF0000;
	font-weight: bold;
	float: left;
}
.user_message_ajax {
	padding: 8px 0px 0px 0px;
	color: #FF0000;
	font-weight: bold;
	font-size: 11pt;
	/*vertical-align: middle;*/
}
#user_image_icon {
	border: 1px solid var(--border-color);
	border-radius: 2px;
	margin: 0px 3px;
}

/*******************************************/
/* 配置関係 */
/*******************************************/
/* テーブルセンタリング */
#tbl_center {
	width:70%;
	margin:0 auto;
	_text-align:center;
}
.box1 {
	float: left;
	padding: 0px;
	margin: 0px;
	width: 100%;
}
.box2 {
	float: left;
	padding: 7px;
	margin: 1px;
	width: 46%;
	height: auto;
	border: 1px solid var(--border-color);
}
.box3 {
	float:left;
	padding: 7px;
	margin: 1px 0px 1px 4px;
	width: 48%;
	height: auto;
	border: 1px solid var(--border-color);
}

/*******************************************/
/* ページ */
/*******************************************/
div.pager {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
div.pager a,
div.pager span {
	margin-right: 3px;
	padding: 7px 15px;
	height: 35px;
}
div.pager a {
	color: var(--pager-text-color);
	background-color: var(--pager-bg-color);
	border: 1px solid var(--border-color);
	text-decoration: none;
}
div.pager a:hover {
	color: var(--pager-text-color-hover);
	background-color: var(--pager-bg-color-hover);
	border: 1px solid var(--border-color);
}
/* 現在ページ */
div.pager span.current {
	color: var(--pager-text-color-current);
	background-color: var(--pager-bg-color-current);
	border: 1px solid var(--border-color);
	font-weight: bold;
}
div.pager span.nextprev {
	color: var(--pager-text-color);
	background-color: var(--pager-bg-color);
}
div.pager a.nextprev {
	font-weight: bold;
}
@media screen and (max-width: 768px) {
	div.pager {
	    display: flex;
	    flex-wrap: wrap;
	    gap: 2px;
	}

	div.pager a,
	div.pager span {
		margin-right: 1px;
		padding: 9px 12px;
	}
	div.pager a {
		color: var(--text-color);
		background-color: var(--bg-color);
		border: 1px solid var(--border-color);
		text-decoration: none;
	}
	div.pager a:hover {
		color: var(--text-color-hover);
		background-color: var(--bg-color-hover);
		border: 1px solid var(--border-color);
	}
	/* 現在ページ */
	div.pager span.current {
		color: var(--text-color);
		background-color: var(--bg-color-hover);
		border: 1px solid var(--border-color);
		font-weight: bold;
	}
	div.pager span.nextprev {
		color: var(--text-color);
		background-color: var(--bg-color);
	}
	div.pager a.nextprev {
		font-weight: bold;
	}


}




/*******************************************/
/* メニュー */
/*******************************************/
.menu_global ul{
	padding: 0px;
	margin: -5px 0px 10px 0px;
}
.menu_global li{
	display: block;
	line-height: 0px;
	padding: 0px;
	margin: 2px 0px;
	list-style-type: none;
}

.menu_global a{
	display: block;
	border: 1px solid var(--list-group-item-ctg-color);
	padding: 5px 5px;
	transition: all 0.3s ease;
	border-radius: 4px;
}
.menu_global a:hover{
	border: 1px solid var(--list-group-item-ctg-color);
	background-color: var(--list-group-item-ctg-color-hover);
}

@media screen and (max-width: 768px) {
	.menu_global a{
		display: block;
		border: 1px solid var(--list-group-item-ctg-color);
		padding: 15px 5px;
		transition: all 0.3s ease;
		border-radius: 4px;
	}
	.menu_global a:hover{
		border: 1px solid var(--list-group-item-ctg-color);
		background-color: var(--list-group-item-ctg-color-hover);
	}
}

#sp_menu{
	margin: 0px;
	padding: 0px;
}
#sp_menu ul {
	margin: 0px;
	padding: 0px;
	width: 100%;
	list-style-type: none;
}
#sp_menu li {
	display: block;
	float: left;
	margin: 0px;
	padding: 21px 0px 0px 10px;
	height: 40px;
	-moz-box-sizing: border-box;
	vertical-align: middle;
	border-bottom: 1px solid #CCC;
	background-color: #D8D8D8;
	background: linear-gradient(to bottom, #FFF 0%, #F7F7F7 45%, #F0F0F0 100%) repeat scroll 30% 0% transparent;
}

/* display:table;ナビゲーション */
#nav02 ul {
	display:table;
	table-layout:fixed;
	width:100%;
}
#nav02 ul li {
	display:table-cell;
	border-right:1px solid #ffffff;
}
#nav02 ul li a {
	display: block;
	padding: 0;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	background-color: #65ab31;
}
#nav02 ul li a:hover {
	 background-color:#618e34;
}




/***************************************************************************************************/
/* メニュー 訪問済みデザイン対応 */
/***************************************************************************************************/
[id^="sound_1_"] .sound_ctglist_1 > a {
    background-color: #81ACE64F;
}
[id^="sound_0_"] .sound_ctglist_0 > a {
    background-color: #81ACE64F;
}
[id^="sound_3_"] .sound_ctglist_3 > a {
    background-color: #81ACE64F;
}
#album___ .album___ > a {
    background-color: #81ACE64F;
}
#sound___ .sound___ > a {
    background-color: #81ACE64F;
}
#upolicy___ .upolicy___ > a {
    background-color: #81ACE64F;
}

#bbs___ .bbs___ > a {
    background-color: #81ACE64F;
}

#unq___ .unq___ > a {
    background-color: #81ACE64F;
}

#mail___ .mail___ > a {
    background-color: #81ACE64F;
}
#user_mylist___ .user_mylist___ > a {
    background-color: #81ACE64F;
}
#user_prc__dllist_ .user_prc__dllist_ > a {
    background-color: #81ACE64F;
}
#user_prc__about_user_id_ .user_prc__about_user_id_ > a {
    background-color: #81ACE64F;
}

#user_point___ .user_point___ > a {
    background-color: #81ACE64F;
}
#user_prc__setting_s .user_prc__setting_s > a {
    background-color: #81ACE64F;
}
#user_point___form .user_point___ > a {
    background-color: #81ACE64F;
}

#user_prc__setting_point_noti .user_prc__setting_point_noti > a {
    background-color: #81ACE64F;
}

.user_setting_radio {
	cursor: pointers;
}
@media (max-width: 768px) {
    .user-setting-table th {
        width: 40%;
        min-width: 100px;
    }
}


/*******************************************/
/* 見出し */
/*******************************************/
h1 {
	margin: 10px 0px 0px 0px;
	padding: 0px 0px 2px 0px;
	font-size: 19px;
	color: #444444;
	line-height: 2em;
	font-weight: bold;
}
h2 {
	margin: 0 0 5px 0;
	padding: 5px 5px;
	font-size: 16px;
	font-weight: bold;
	background: var(--title-bg-color);
	color: var(--title-color);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 3px;
}
/* タグ情報表示専用 */
.h2_tag {
	margin: 0 0 0 0;
	padding: 0px 5px;
	font-size: 16px;
	font-weight: bold;
	background: var(--bg-color) !important;
	color: var(--title-color);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 3px;
}
h3 {
	margin: 0 0 10px 0;
	padding: 5px 5px;

	font-size: 15px;
	font-weight: bold;

	background: var(--title-bg-color);
	color: var(--title-color);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 3px;
}
h4 {
	margin: 0;
	padding: 0px 0px 1px 2px;
	font-size: 14px;
	color: var(--title-color);
	line-height: 2em;
	font-weight: bold;
}
/*
h5 {
	margin: 0;
	padding: 0px 0px 1px 2px;
	font-size: 14px;
	color: var(--title-color);
	line-height: 2em;
	font-weight: bold;
}
*/

.app_h6 {
    display: inline-block;
    background: linear-gradient(var(--title-color), var(--title-bg-color));
    border-radius: 3px;
    color: #fff;
    font-weight: bold;

}

/*******************************************/
/* テーブル */
/*******************************************/
.table th, .table td {
	border-top: 1px solid var(--border-color) !important;
}
.table-bordered th, .table-bordered td {
	border: 1px solid var(--border-color) !important;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: rgb(222, 226, 230);
}
table tbody tr:hover {
	background-color: var(--table-tr-mouse-over-color);
	/*cursor: pointer;*/
}

table.tbl1 {
	margin: 0px auto;
	width: 100%;
	margin-top: 1px;
	margin-bottom: 1px;
	border-collapse: collapse;
	border: solid 1px var(--border-color);
}
table.tbl1 th {
	height: 40px;
	text-align:center;
	padding: 1px;
	border: 1px solid var(--border-color);
	background: #E6E6E6;
}
table.tbl1 td {
	padding: 1px;
	border: 1px solid var(--border-color);
}
table.tbl1 .odd {
	background: #DCE9FA;
}
table.tbl1 .even {
	background: #DBDBDB;
}
table.tbl1 tr:hover {
	background: #DCE9FA;
}

.table-sm td {
  padding: 0.16rem;
}
.table {
	color: var(--text-color);
}

.view_sound_details td:first-child{
    width: 50%;
    white-space: nowrap;
}
@media screen and (max-width: 768px) {
	.view_sound_details td:first-child{
		width: 50%;
		white-space: nowrap;
	}
}

/*******************************************/
/* フォーム */
/*******************************************/
input, option, select{
	font-size: 10pt;
}
/*
textarea {
	font-size: 10pt;
	width: 100%;
}
*/

/*
#submit {
	font-weight: bold;
	border: 1px solid #CCCCCC;
	background-color: #f1f1f1;
	padding: 5px 30px 5px 30px;
	margin: 10px 10px 10px 0px;
	border-radius: 4px;
}
#submit:hover{
	background-color: #D8D8D8;
	cursor: pointer;
}
*/

/* 必須項目 */
#form_mst {
	display: inline-block;
	_display: inline;
	color: #FF0000;
	font-weight: bold;
}
.form-control {
    /* display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;*/
    color: var(--form-control-text-color);
    background-color: var(--form-control-bg-color);
    /* background-clip: padding-box;*/
    border: 1px solid var(--form-control-border-color);
    /*border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; */
}


/*******************************************/
/* ボタン共通 */
/*******************************************/
/*
.btn-primary {
    color: #fff;
    background-color: #3c8dbc !important;
    border-color: #367fa9 !important;
}
*/
.btn-primary {
	padding: 0.12rem 0.5rem;
	background-color: var(--subscription-primary-bg-color) !important;
	border-color: #0a58ca !important;
	color: var(--subscription-text-primary-color) !important;
}
.btn-primary:hover {
	background-color: var(--subscription-primary-bg-color) !important;
	border-color: #0a58ca !important;
	color: var(--subscription-text-primary-color) !important;
}

.btn-light {
  color: var(--btn-light-color);
  background-color: var(--btn-light-bg-color);
  border-color: var(--btn-light-border-color);
}

.btn-outline-secondary:hover{
	background-color: var(--btn-light-bg-color);
}
@media screen and (max-width: 768px) {
	.subscription_btn1, .subscription_btn2, .subscription_btn3{
		padding: 10px 0px;
	}
}

#button_link a {
	font-weight: bold;
	border: 1px solid #CCCCCC;
	background-color: #f1f1f1;
	padding: 12px;
	margin: 8px 8px 8px 0px;
	border-radius: 4px;
}
#button_link a:hover{
	background-color: #D8D8D8;
}
#button_link_index a {
	float: right;
	font-weight: bold;
/*
	border: 1px solid #CCCCCC;
	background-color: #f1f1f1;
	padding: 5px 21px 5px 20px;
	margin: 0px 1px 0px 8px;
	border-radius: 4px;
	transition: all 0.7s ease;
*/
}
#button_link_index a:hover{
	background-color: #D8D8D8;
}

#button_link_logout {
	margin: 0px 0px 20px 0px;
}
#button_link_logout a {
	font-weight: bold;
	border: 1px solid #CCCCCC;
	background-color: #f1f1f1;
	padding: 12px 20px 12px 20px;
	margin: 8px 8px 20px 0px;
	border-radius: 4px;
}
#button_link_logout a:hover{
	background-color: #D8D8D8;
}

.index_login{
	float: left;
	line-height: 30px;
	display: flex;
}
.index_login_username{
	/* margin: 4px 0px 0px 2px; */
	display: flex;
	align-items: center;
	margin: 0px 0px 0px 2px;
	/* height: 40px; */
}
@media screen and (max-width: 768px) {
	.index_login_username{
		/* margin: 8% 0px 0px 2px;*/
		/*margin: 3% 0px 0px 2px;*/

		display: flex;
		align-items: center;
		margin: 3% 0px 0px 2px;
		/* height: 40px; */
	}
}

/*******************************************/
/* 情報枠 */
/*******************************************/
.social {
	background-color: var(--bg-color);
	border: solid 1px var(--border-color);
	padding: 10px;
	margin: 10px 0px 10px 0px;
	border-radius: 4px;
}
.social_area {
	background-color: var(--bg-color);
	border: solid 1px var(--border-color);
	/* height: 40px; */
	padding: 10px 10px 5px 15px;
	margin: 10px 0px 10px 0px;
	border-radius: 4px;
}
.social_tw {
	float: left;
	padding: 8px 0px 5px 0px;
}
.social_fb {
	float: left;
	padding: 8px 0px 0px 0px;
}
@media screen and (max-width: 768px) {
	.social_fb {
		float: left;
		padding: 11px 0px 8px 0px;
	}
}
.social_mx {
	float: left;
	padding-right: 10px;
}

.social_box {
	background-color: var(--bg-color);
	border: solid 1px var(--border-color);
	padding: 10px;
	margin: 10px 0px 10px 0px;
	vertical-align: top;
	border-radius: 4px;
}
/* タグ情報 */
.text-bg-info {
	padding: 7px;
	color: var(--bg-color);
}

/******************************************************************************/
/* 画面固有設定 */
/******************************************************************************/

/*******************************************/
/* TOPページ(index) */
/*******************************************/
#rss_box {
	font-weight: bold;
	padding: 2px 13px 2px 13px;
	margin: 1px 1px 1px 1px;
	color: var(--rss_box-color);
	background-color: var(--rss_box-bg-color);
	border: 2px solid var(--rss_box-border);
	border-radius: 4px;
}
#search_keyword {
	background-color: var(--bg-color);
	border: solid 2px var(--list-group-item-ctg-color);
	padding: 10px;
	margin: 15px 0px 15px 0px;
	vertical-align: top;
	border-radius: 4px;
}

#cm {
	color: #0066FF;
	margin-top: 30px;
	margin-bottom: 60px;
}
#cm a {
	color: #0066FF;
}

#cm2 {
	color: #FF6600;
	margin-top: 1px;
	margin-bottom: 1px;
}
#cm2 a {
	color: #FF6600;
}
#imobile_adspotdiv2 {
	text-align: center;
}

#banner_88 {
	float:left;
	margin: 10px 30px 10px 0px;
}
#banner {
	margin: 10px 10px 10px 0px;
}

.sound_search_btn {
	cursor: pointer;
}


/*******************************************/
/* ユーザ登録画面 */
/*******************************************/

.user_login_form label {
	cursor: pointer;
}
.user_login_form_box {
	padding: 8px 0px 1px 0px;
}

#autologin_checkbox {
	margin-top: 7px!important;
}
@media screen and (max-width: 768px) {
	#autologin_checkbox {
		margin-top: 3px!important;
	}
}

/*******************************************/
/* ポイント購入 */
/*******************************************/
.point_box {
	color: var(--text-color);
	background-color: var(--pointbox--btn-color);
	border: 1px solid #999999;
	border-radius: 4px;
	cursor: pointer;
}
.point_box:hover {
	background: #f1f3fc;
}
.bank-transfer-box {
	display: none !important;;
}


/*******************************************/
/* ユーザ設定 */
/*******************************************/
/* .user_setting_area{
	padding: 5px;
	margin: 0px 0px 20px 0px;
}
table.user_setting_tbl1 {
	background-color: var(--bg-color);
	float: left;
	width: 100%;
	border-collapse: collapse;
	border: solid 1px #CCCCCC;
}
table.user_setting_tbl1 th {
	width				: 30%;
	padding				: 6px;
	text-align			: left;
	vertical-align		: middle;
	color				: #333333;
	background-color	: #eee;
	border				: 1px solid #b9b9b9;
}
table.user_setting_tbl1 td {
	padding				: 6px;
	background-color	: #fff;
	border				: 1px solid #b9b9b9;
}
table.user_setting_tbl1 .odd {
	background: #DCE9FA;
}
.user_setting_item{
	font-weight: bold;
	text-align: right;
	padding: 5px 10px 5px 0px;
	background-color: #FFFFFF;
}
.user_setting_value{
	font-weight: bold;
	text-align: right;
	padding: 5px 10px 5px 0px;
	background-color: #FFFFFF;
}

.user_image{
	width: 130px;
	height: 130px;
	margin: 3px 0px 8px 0px;
	border-radius: 7px;
} */

.user-setting-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
  }
  
  .form-row {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 1rem;
  }
  
  .form-label {
	flex: 0 0 200px;
	font-weight: bold;
	color: var(--text-color);
	margin-bottom: 0.5rem;
  }
  
  .form-value {
	flex: 1;
	color: var(--text-color);
  }
  
  /* モバイル対応 */
  @media (max-width: 576px) {
	.form-label {
	  flex: 100%;
	}
	.form-value {
	  flex: 100%;
	}
  }







.user-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
}

.user-info__row {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
}

.user-info__label {
  font-weight: bold;
  color: var(--header_title-color);
  margin-bottom: 0.3rem;
}

.user-info__value {
  color: var(--title-color);
}

/* 横並びにするのは中画面以上で */
@media (min-width: 576px) {
	.user-info__row {
		flex-direction: row;
		align-items: center;
	}
	.user-info__label {
		flex: 0 0 180px;
		margin-bottom: 0;
	}
	.user-info__value {
		flex: 1;
	}
}

/* 画像調整 */
.user_image img {
	max-width: 100%;
	height: auto;
	border-radius: 0.25rem;
}




/*******************************************/
/* 新着情報関連 */
/*******************************************/
#news_date {
	padding-right: 2px;
	font-weight: bold;
}

/*******************************************/
/* 掲示板 */
/*******************************************/
div.check-group input {
	display: none;
}
div.check-group label {
	cursor: pointer;
	padding: 5px 10px;
	float: left;
	border: solid 1px #AAAAAA;
	margin-left: -1px;
	background: #FFFFFF;
}
div.check-group input:checked+label {
	color: #FFFFFF;
	background: #CCCCCC;
}
.bbs_title {
	background: var(--bbs-title);
}
.bbs_title_date {
	background: var(--bbs-title-date);
}
.bbs_name {
	background: var(--bbs-name);
}
.bbs_body {
	background: var(--bbs-body);
}

/*******************************************/
/* カテゴリ関係 */
/*******************************************/
@media (min-width: 768px) {
	.category_box{
		float: left;
		width: 50%;
		height: 36px;
		padding: 5px 5px 1px 5px;
		margin: 3px 0px;
		vertical-align: middle;
		border: solid 1px #D8D8D8;
		background: #FFFFFF;
		border-radius: 3px;
		transition: all 0.1s ease;
	}
	.category_box_odd2{
		float: left;
		width: 275px;
		height: 36px;
		padding: 5px 5px 1px 5px;
		margin: 3px 0px 3px 10px;
		vertical-align: middle;
		border: solid 1px #D8D8D8;
		background: #FFFFFF;
		border-radius: 3px;
		transition: all 0.1s ease;
	}
	.category_box_odd2:hover {
		border: solid 1px #999999;
		background: #D8D8D8;
	}
}
@media (min-width: 992px) {
	.category_box{
		float: left;
		width: 50%;
		height: 36px;
		padding: 5px 5px 1px 5px;
		margin: 3px 0px;
		vertical-align: middle;
		border: solid 1px #D8D8D8;
		background: #FFFFFF;
		border-radius: 3px;
		transition: all 0.1s ease;
	}
	.category_box_odd2{
		float: left;
		width: 360px;
		height: 36px;
		padding: 5px 5px 1px 5px;
		margin: 3px 0px 3px 10px;
		vertical-align: middle;
		border: solid 1px #D8D8D8;
		background: #FFFFFF;
		border-radius: 3px;
		transition: all 0.1s ease;
	}
	.category_box_odd2:hover {
		border: solid 1px #999999;
		background: #D8D8D8;
	}
}
@media (min-width: 1200px) {
	.category_box{
		float: left;
		width: 50%;
		height: 36px;
		padding: 5px 5px 1px 5px;
		margin: 3px 0px;
		vertical-align: middle;
		border: solid 1px #D8D8D8;
		background: #FFFFFF;
		border-radius: 3px;
		transition: all 0.1s ease;
	}
	.category_box_odd2{
		float: left;
		width: 362px;
		height: 36px;
		padding: 5px 5px 1px 5px;
		margin: 3px 0px 3px 10px;
		vertical-align: middle;
		border: solid 1px #D8D8D8;
		background: #FFFFFF;
		border-radius: 3px;
		transition: all 0.1s ease;
	}
	.category_box_odd2:hover {
		border: solid 1px #999999;
		background: #D8D8D8;
	}
}

.category_p{
	margin: 0px 0px 0px 1px;
}
.category_p_name{
	margin: 0px 0px 0px 3px;
}
.category_box img {
	 vertical-align: middle;
}
.category_box:hover {
	border: solid 1px #999999;
	background: #D8D8D8;
}

.category_box2 {
	display: table-cell;
	float: left;
	width: 48%;
	height: 26px;
	vertical-align: middle;
	padding: 2px 5px 1px 1px;
	margin: 0px 1px 3px 2px;
	border: solid 1px #D8D8D8;
	background: #FFFFFF;
	border-radius: 3px;
}
.category_box2 img {
	 vertical-align: middle;
}
.category_box2 a{
	float: left;
	display: table-cell;
	vertical-align: middle;
	border: solid 1px #D8D8D8;
	background: #D8D8D8;
}
.category_box2:hover {
	float: left;
	display: table-cell;
	vertical-align: middle;
	border: solid 1px #999999;
	background: #D8D8D8;
}


/******************************************************************************/
/* サウンド関係 */
/******************************************************************************/

.srt {
	cursor: pointer;
}

.fb-like{
	padding-bottom: 15px;
}
.btn-o {
	padding-bottom: 0px;
	margin-top: 10px;
}

/*******************************************/
/* ダウンロード時 ポイント消費時 共通 */
/*******************************************/
table.tbl1_point {
	font-size: 12pt;
	width: 270px;
	padding: 10px;
	margin: 1px;
	border-collapse: collapse;
	border: solid 1px #D8D8D8;
}
table.tbl1_point th {
	padding: 10px;
	border: 1px solid #D8D8D8;
	background: #E6E6E6;
}
table.tbl1_point td {
	padding: 10px;
	border: 1px solid #D8D8D8;
}
table.tbl1_point .odd {
	background: #DCE9FA;
}
table.tbl1_point tr:hover {
	background: #DCE9FA;
}

#point_total {
	width: 270px;
	padding: 10px;
	font-size: 10pt;
	border: 1px solid #CCCCCC;
}
#point_total_label {
	font-size: 15pt;
}
#point_total_value {
	font-size: 16pt;
	font-weight: bold;
}

/*******************************************/
/* おきにいり */
/*******************************************/
.user_mylist_box{
}
.user_mylist_dl{
	margin: 0px auto;
	width: 100%;
	margin-bottom: 10px;
}
.user_mylist_dl #submit {
	-webkit-appearance: none;
	font-weight: bold;
	border: 1px solid #CCCCCC;
	background-color: #f1f1f1;
	padding: 5px 5px 5px 5px;
	margin: 4px 4px 2px 0px;
	border-radius: 2px;
	font-size:10pt;
}
.user_mylist_dl #submit:hover {
	-webkit-appearance: none;
	font-weight: bold;
	border: 1px solid #CCCCCC;
	background-color: #D8D8D8;
	padding: 5px 5px 5px 5px;
	margin: 4px 4px 2px 0px;
	border-radius: 2px;
	font-size:10pt;
}
.user_mylist_title{
	float:left;
	width:250px;
	margin:10px 10px 0px 5px;
	font-size:12pt;
	font-weight:bold;

}
.user_mylist_player{
	float: left;

}
.user_mylist_dlwav{
	float:left;
	margin:20px 10px 0px 5px;

}
.user_mylist_delete{
	float: left;
	margin: 23px 10px 0px 15px;
}
.user_mylist_delete a{
	font-size:10pt;
}

/*******************************************/
/* DL履歴 */
/*******************************************/
/*
*.user_dllist_table {
*	width: 100%;
*	margin-top: 1px;
*	margin-bottom: 1px;
*	border-collapse: collapse;
*	border: solid 1px #D8D8D8;
*}
*.user_dllist_table th {
*	text-align:center;
*	padding: 1px;
*	border: 1px solid #D8D8D8;
*	background: #E6E6E6;
*}
*.user_dllist_table td {
*	padding: 1px;
*	border: 1px solid #D8D8D8;
*}
*/

.user_dllist_check {
	padding: 3px;
	text-align: center;
	font-size: 11pt;
	font-weight: bold;
}
.user_dllist_delete {
	padding: 3px;
	font-size: 11pt;
	font-weight: bold;
	text-align: center;
}

/*******************************************/
/* ユーザ登録 */
/*******************************************/
.user_add_step_input {
	color: var(--user_add-input);

}
.user_add_step_confirm {


}
.user_add_step_complete {


}







/*******************************************/
/* アルバム */
/*******************************************/
#download_area {
	margin-top: 10px;
}
table.tbl_album .section {
	width: 320px;
	height: 300px;
}
.album_img_menu {
	width: 75px;
	height: 75px;
	margin: 2px;
	display: inline-block;
	border: 2px #c0c0c0;
}
.album_box {
	background-color: var(--bg-color);
	border: solid 1px var(--border-color);
	padding: 10px 0px 10px 0px;
	margin: 10px 0px 50px 0px;
	vertical-align: top;
	border-radius: 6px;
}

/*******************************************/
/* サウンドプレイヤー */
/*******************************************/
.player {
	width: 272px;
	height: 68px;
	cursor: pointer;
	background-image: url("./img/player_img.gif");
	transition: all 0.7s ease;
}
.player:hover {
	width: 272px;
	height: 68px;
	cursor: pointer;
	background-image: url("./img/player_img_hover.gif");
}
.sound_player_box {
	margin-bottom: 10px;
}

/*******************************************/
/* サウンドリスト */
/*******************************************/
#sound_category_back {
	margin-bottom: 10px;
}

#sound_category_back a{
	font-weight: bold;
	display:block;
	font-size: 16px;
	border: solid 1px #D8D8D8;
	padding: 8px 10px 5px 10px;
	left: 0;
	top: 0;

    width: 200px;
    text-align: center;
    border-radius: 5px;
    background-color: #ccc;
    border: black;
    float: right;
    margin: 0px 5px 5px 5px;
}

#sound_category_back a:hover {
	background-color: #ececec;
}
/* タイトル */
#sound_list_title {
	padding: 5px 1px 5px 1px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
}
/* ダウンロードリンク */
#sound_list_dl {
	margin: 10px 5px 10px 5px;
	padding: 5px 1px 5px 1px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}

/* サウンド詳細 */
#sound_view {
	margin: 0px auto;
	background-color: var(--bg-color);
	border: solid 1px #999999;
	padding: 0px 10px 0px 10px;
	margin: 10px 0px 10px 0px;
	float: left;
}
#sound_view_title {
	font-size: 12pt;
	font-weight: bold;
	padding: 0px 0px 0px 10px;
	margin: 6px 0px 6px 0px;
}

#sound_view_listen {
	width: 100%;
	background-color: var(--bg-color);
	border: solid 1px var(--border-color);;
	margin-top: 10px;
	padding: 15px 0;
	float: left;
	border-radius: 4px;
}
#sound_view_listen_inner {
	background-color: var(--bg-color);
	padding: 10px;
	width: 270px;
	margin: 0 auto;
}
#sound_view_listen_inner_view {
	background-color: var(--bg-color);
	padding: 10px;
	width: 380px;
	margin: 0 auto;
}
@media screen and (max-width: 768px) {
	#sound_view_listen_inner {
		background-color: var(--bg-color);
		padding: 10px;
		width: 88%;
		margin: 0 auto;
	}
	#sound_view_listen_inner_view {
		background-color: var(--bg-color);
		padding: 10px;
		max-width: 100%;
		margin: 0 auto;
	}

}
#sound_view_review {
	background-color: var(--bg-color);
	border: solid 1px var(--border-color);;
	padding: 10px;
	margin: 0px 0px 10px 0px;
	float: left;
}
#sound_view_download_link {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

#sound_view_download_link a {
	font-weight: bold;
	border: 1px solid var(--border-color);
	background-color: var(--bg-color-hover);
	padding: 12px 30px;
	margin: 10px 0px 5px 10px;
	border-radius: 4px;
}

#sound_view_download_link a:hover {
	border: 1px solid var(--border-color);
	background-color: var(--bg-color-hover);
}

@media screen and (max-width: 768px) {
	#sound_view_download_link a {
		padding: 12px 5px;
		margin: 10px 0px 5px 10px;
	}
}

table.sound_tbl1 {
	background-color: var(--bg-color);
	float: left;
	width: 100%;
	border-collapse: collapse;
	border: solid 1px  var(--border-color);
	border-radius: 4px;
}
table.sound_tbl1 th {
	background-color: var(--bg-color);
	padding: 1px;
	border: 1px solid var(--border-color);;
	background: #E6E6E6;
}
table.sound_tbl1 td {
	padding: 4px;
	border: 1px solid var(--border-color);;
}
table.sound_tbl1 .odd {
	background: #DCE9FA;
}

table.sound_list {
	width: 99%;
	margin-top: 1px;
	margin-bottom: 1px;
	border-collapse: collapse;
	border: solid 1px var(--border-color);;
}
table.sound_list th,
table.sound_list td {
	border: solid 1px var(--border-color);;
	padding: 1px;
}
table.sound_list th {
	background: var(--bg-color);
	text-align: center;
	white-space: nowrap;
}
table.sound_list td.title {
	background-color: var(--bg-color);
	text-align: center;
	font-weight: bolder;
}
table.sound_list td.title2 {
	background-color: var(--bg-color);
	font-weight: bolder;
}
table.sound_list tr:hover {
	background: var(--bg-color-hover);
}

.d-flex {
    display: -ms-flexbox !important;
    display: table-cell  !important;
}

.form-check-label {
    cursor: pointer;
}
/* プレースホルダーの色を変更 */
input::placeholder {
    color: #cccccc !important;
}



/* サウンド一覧の1行のレイアウト調整 */
.sound_filename,
.sound_point_add,
.sound_soundfile_size,
.sound_favorite_add,
.sound_free {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	margin-top: 6px;
}
.sound_button_center {
	margin-top: 6px;
}
.sound_button_center a {
	margin: 0px 3px 0px 3px;
	padding: 2px 20px 2px 20px;
	border: solid 1px var(--border-color);;
	background-color:#ffffff;
	font-size: 1.0rem;
	border-radius: 4px;
}
.sound_button_center a:hover {
	background-color:#6699FF;
}


/* ajax */
.favorite-rating {
	display: inline-flex;
	gap: 1px;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.favorite-star {
	color: #cccccc;
	cursor: pointer;
	font-size: 1.2rem;
	user-select: none;
}
.favorite-star.active,
.favorite-star.hover-preview {
	color: #ffb400;
}
.sound_favorite_add {
	cursor: pointer;
	color: #2700EE;
}
.sound_free {
	color: #ff417d;
	font-size: 1.2rem !important;
}
.sound_point_add {
	cursor: pointer;
	color: #2700EE;
}


.button_center {
	width: 100%;
	text-align:center;
}  
.button_center div{
	width:150px;
	margin:0px auto;
	text-align: left;
}

/*******************************************/
/* googleads */
/*******************************************/
#googleads {
	margin-top: 10px;
}

/*******************************************/
/* upolicy */
/*******************************************/
.upolicy_list_thead {
	background-color: var(--title-bg-color);
}
.upolicy_list_theadw {
	width: 23%;
}

/*******************************************/
/* social area */
/*******************************************/
/* Line */
.line-share-button {
	display: inline-block;
	background-color: #00c300;
	color: var(--text-color-lineshare) !important;
	padding: 1px 13px 1px 13px;
	margin: 7px 0px 0px 0px;
	border-radius: 5px;
	text-decoration: none;
	font-weight: bold;
}
.line-share-button:hover {
	background-color: #00a300;
}

[data-theme="dark"] .line-share-button {
	background-color: #007a00;
	color: var(--text-color-lineshare) !important;
}

[data-theme="dark"] .line-share-button:hover {
	background-color: #005500;
}
@media screen and (max-width: 768px) {
	.line-share-button {
		display: inline-block;
		background-color: #00c300;
		color: var(--text-color-lineshare) !important;
		padding: 7px 7px 7px 7px;
		margin: 7px 0px 14px 6px;
		border-radius: 5px;
		text-decoration: none;
		font-weight: bold;
	}

	[data-theme="dark"] .line-share-button {
		background-color: #007a00;
		color: var(--text-color-lineshare) !important;
	}

	[data-theme="dark"] .line-share-button:hover {
		background-color: #005500;
	}
}


/*******************************************/
/* language area */
/*******************************************/
.language-theme-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-left: auto; /* 右寄せ */
}

.language-switch {
	display: flex;
	align-items: center;
	gap: 5px;
}

.lang_select {
	font-size: 0.9rem;
}




/*******************************************/
/* slider */
/*******************************************/

.slider-container .track {
  position: relative;
  width: 100%;
  height: 8px;
  background-color: #ddd;
  border-radius: 4px;
}

.slider-container .track input[type=range] {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  background: transparent;
  pointer-events: none;
}

.slider-container .range-highlight .range-highlightTime {
  position: absolute;
  height: 100%;
  background-color: #385e87;
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}

.range-inputs {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 10px;
}

input[type="range"] {
	-webkit-appearance: none;
	width: 100%;
	height: 8px;
	border-radius: 5px;
	background: #ddd;
	outline: none;
	position: absolute;
	pointer-events: none;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #007bff;
	cursor: pointer;
	pointer-events: auto;
	position: relative;
	z-index: 1;
}

input[type="number"] {
	width: 60px;
}

select {
	width: 80px;
}

.track {
	height: 8px;
	border-radius: 5px;
	background: #ddd;
	position: relative;
}

.range-highlight {
	position: absolute;
	height: 100%;
	background: #446e9d;
	border-radius: 5px;
}

.range-highlightTime {
	position: absolute;
	height: 100%;
	background-color: #446e9d;
	border-radius: 5px;
}

@media (max-width: 480px) {
	.range-inputs {
		flex-direction: column;
		align-items: flex-start;
	}
	input[type="number"], select {
		width: 100%;
	}
}

.rangebtn {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	background: #2e3742 !important;
	border-radius: 5px;
}
	/* Chrome / Edge / Safari */
	.rangebtn::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 20px;
		height: 20px;
		background: #ff6600;
		border-radius: 50%;
		cursor: pointer;
	}
	/* Firefox */
	.rangebtn::-moz-range-thumb {
		width: 20px;
		height: 20px;
		background: #ff6600;
		border-radius: 50%;
		cursor: pointer;
	}
	/* Edge IE */
	.rangebtn::-ms-thumb {
		width: 20px;
		height: 20px;
		background: #ff6600;
		border-radius: 50%;
		cursor: pointer;
	}



/* sound search toggle */
.toggle-header {
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.toggle-header:hover {
	background-color: var(--list-group-item-ctg-color-hover);
}
.toggle-content {
	display: none;
	width: 100%;
	transition: all 0.3s ease;
}

.collapse-animation {
	transition: all 0.35s ease;
	overflow: hidden;
}
.collapse.show {
	animation: fadeIn 0.35s ease;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(-5px); }
	to   { opacity: 1; transform: translateY(0);    }
}

.toggle-icon {
	font-size: 16px;
	transition: transform 0.25s ease;
}
.toggle-icon.open {
	transform: rotate(180deg);
}