/***********************************************************
 * 一般スタイル
 ***********************************************************/

:root {
	--CC-ALL-HEAD-BASE:					var(--CC-THEMA-WHOLE-STRONG-LITTLE);
	--CC-ALL-HEAD-MAIN:					var(--CC-THEMA-WHOLE-STRONG-MUCH);
	--CC-ALL-HEAD-MAIN-LINE:			var(--CC-THEMA-WHOLE-STRONG-MUCH);
	--CC-ALL-HEAD-MAIN-TEXT:			var(--CC-THEMA-TEXT-INVERT);
	--CC-ALL-HEAD-SUB-UPPER:			var(--CC-THEMA-WHOLE);
	--CC-ALL-HEAD-SUB-LOWER:			var(--CC-THEMA-WHOLE-STRONG-MUCH);
	--CC-ALL-HEAD-SUB-LIGHT:			var(--CC-THEMA-WHOLE-WEEK-LITTL);
	--CC-ALL-HEAD-SUB-SEPARATOR:		var(--CC-THEMA-WHOLE-STRONG-LITTLE);

	--CC-ALL-FOOT-BASE:					var(--CC-THEMA-WHOLE-WEEK-LITTLE);
}

:root {
	--SZ-ALL-HEAD-H:					62px;
	--SZ-ALL-HEAD-H-LINE:				2px;
	--SZ-ALL-HEAD-H-NO-LINE:			calc(var(--SZ-ALL-HEAD-H) - var(--SZ-ALL-HEAD-H-LINE));

	--SZ-ALL-HEAD-LOGO-W:				200px;
	--SZ-ALL-HEAD-MENU-PADDING:			20px;
	--SZ-ALL-HEAD-RIGHT-W:				400px;
	--SZ-ALL-HEAD-ACCOUNT-W:			300px;

	--SZ-FOOTER-H:						50px;

	--SZ-HAM-HEAD-H:					80px;
}

html {
	position: relative;
	height: 100%;
	box-sizing: border-box;
	font-family: Meiryo, "メイリオ", sans-serif;
}

body {
	width: 100%;
	height: 100%;
}

#content {
	position: relative;
	margin: 0px;
	padding: 0px;
	width: 100%;
}

#content.login {
	height: 100%;
}

/**** 大枠のレイアウト (PC) ********************************/
@media screen and (min-width:961px) {
	.monly { display: none !important; }
	.mhide { /* DO_NOTHING */ }

	body {
		min-height: 600px;
		min-width: 600px;
	}
	body.mobile.desktop_size {
		background-color: var(--light6);
	}

	#content {
		height: calc(100% - var(--SZ-ALL-HEAD-H));
	}

	.mobile.desktop_size #content:not(.login) {
		top: var(--SZ-ALL-HEAD-H);
	}
}
/**** 大枠のレイアウト (Mobile) ****************************/
@media screen and (max-width:960px) {
	.ponly { display: none !important; }
	.mhide { display: none !important; }

	body {
		min-width: 300px;
		min-height: 300px;
	}
	body.mobile.mobile_size {
		height: calc(100% - var(--SZ-ALL-HEAD-H) - var(--SZ-FOOTER-H));
	}

	#content {
		height: calc(100% - var(--SZ-ALL-HEAD-H) - var(--SZ-FOOTER-H));
	}

	.mobile.mobile_size #content {
		height: 100%;
		margin-top: var(--SZ-ALL-HEAD-H);
		background-color: var(--light6);
	}
	.mobile.mobile_size #content.login {
		margin-top: 0px;
	}
}

/* Chrome, Edge */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
	header .navbar-header a img.desk_logo,
	header .navbar-header a img.cloud_logo {
		image-rendering: -webkit-optimize-contrast;
	}
}

/**** ヘッダー (PC) ****************************************/
@media screen and (min-width:961px) {
	header {
		position: fixed;
		z-index: 1000;
		top: 0px;
		left: 0px;
		right: 0px;
		box-sizing: border-box;
		height: var(--SZ-ALL-HEAD-H);
		margin: 0px;
		padding: 0px;
		font-size: 13px;
		border-collapse: collapse;
		border-color: var(--CC-ALL-HEAD-MAIN-LINE);
		border-width: 0px 0px 2px 0px;
		border-style: solid;
		background-color: var(--CC-ALL-HEAD-BASE);
		min-width: 700px;
	}

	/* 左上ロゴ部 */
	header .navbar-header {
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		width: var(--SZ-ALL-HEAD-LOGO-W);
		height: var(--SZ-ALL-HEAD-H-NO-LINE);
	}
	header .navbar-header a {
		display: table-cell;
		box-sizing: border-box;
		width: var(--SZ-ALL-HEAD-LOGO-W);
		height: var(--SZ-ALL-HEAD-H-NO-LINE);
		vertical-align: middle;
		color: var(--dark3);
		background-color: var(--white);
	}
	header .navbar-header a img {
		display: flex;
		margin: 5px auto 0 10px;
		width: 176px;
		height: 25px;
	}
	header .navbar-header a img.desk_logo {
		display: flex;
		width: 200px;
		height: 56px;
		margin: 0px;
		padding: 0px;
	}
	header .navbar-header a img.cloud_logo {
		display: flex;
		margin: 5px auto 0 10px;
	}


	/* メニュー部 */
	header .navbar-menu {
		position: absolute;
		top: 0px;
		left: var(--SZ-ALL-HEAD-LOGO-W);
		right: 0px;
		height: var(--SZ-ALL-HEAD-H-NO-LINE);
		opacity: 0;
		display: inline-flex;
	}

	header .navbar-menu-left,
	header .navbar-menu-right {
		top: 0px;
		display: inline-flex;
	}

	header .navbar-menu-right {
		width: auto;
	}
	header .navbar-menu-left{
		left: 0px;
		width: 100%;
		overflow: hidden;
	}

	header #navbar_link_dropdown {
		top: 0px;
		display: inline-flex;
		background-color: var(--dark3);
		right: 300px;
		width: 20px;
		height: var(--SZ-ALL-HEAD-H-NO-LINE);
		border: none;
		cursor: pointer;
	}
	header #toggle_hidden_link{
		margin-top: 25px;
		position: relative;
	}
	header #navbar_link_dropdown {
		color: var(--CC-ALL-HEAD-MAIN-TEXT);
		background: linear-gradient(to top, var(--CC-ALL-HEAD-SUB-LOWER), var(--CC-ALL-HEAD-SUB-UPPER));
	}
	header #navbar_link_dropdown:hover {
		background: linear-gradient(to top, var(--CC-ALL-HEAD-SUB-UPPER), var(--CC-ALL-HEAD-SUB-LIGHT));
	}
	header .fa-angle-double-right::before {
		padding: 100% 4px;
		margin-top: 25px;
	}
	header #hidden_nabvar_link_area {
		position: absolute;
		top: 59px;
		display: block;
		color: var(--white);
		background-color: var(--dark3);
		right: inherit;
		width: auto;
		height: auto;
		min-width: 100px;
		max-width: 450px;
		font-size: 13px;
		border-radius: 3px;
		filter: drop-shadow(1px 1px 4px #151d20)
	}
	header #hidden_nabvar_link_area a {
		color: var(--white);
		padding: 6px 26px 6px 6px;
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	header #hidden_nabvar_link_area a.currentgroup,
	header #hidden_nabvar_link_area a:hover,
	header #hidden_nabvar_link_area a:active{
		text-decoration: none;
	}
	header .hidden_navbar_link:hover {
		background-color: var(--dark7);
		color:var(--light1);
		border-radius: 3px;
		font-weight: bold;
		cursor: pointer;
	}

	header .select_box {
		position: relative;
		height: 100%;
		font-size: 12px;
		border: 1px solid;
		width: 100%;
	}

	header ul {
		list-style: none;
	}

	header ul.navbar-menu-list-left,
	header ul.navbar-menu-list-right {
		display: inline-block;
		margin: 0px;
		padding: 0px;
	}
	header ul.navbar-menu-list-left {
		font-size: 0;
		display: flex;
	}

	header ul.navbar-menu-list-left li,
	header ul.navbar-menu-list-right li {
		display: inline-block;
		list-style: none;
	}

	header ul.navbar-menu-list-left li {
		background: linear-gradient(to top, var(--CC-ALL-HEAD-SUB-LOWER), var(--CC-ALL-HEAD-SUB-UPPER));
		border-right: solid 1px var(--CC-ALL-HEAD-SUB-SEPARATOR);
		min-width: 115px;
		max-width: 155px;
		text-align: center;
		font-size: 13px;
	}
	header ul.navbar-menu-list-left li:hover {
		filter: brightness(125%);
	}

	header ul.navbar-menu-list-left li a,
	header ul.navbar-menu-list-right li a {
		display: block;
		margin: 0px;
		padding: var(--SZ-ALL-HEAD-MENU-PADDING);
		color: var(--CC-ALL-HEAD-MAIN-TEXT);
	}

	header ul.navbar-menu-list-left li a{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	header ul.navbar-menu-list-right {
		width: var(--SZ-ALL-HEAD-RIGHT-W);
		background-color: var(--CC-ALL-HEAD-MAIN);
	}

	header ul.navbar-menu-list-left li a.currentgroup,
	header ul.navbar-menu-list-left li a:hover,
	header ul.navbar-menu-list-left li a:active{
		text-decoration: none;
	}

	header ul.navbar-menu-list-right li a.status-area {
		padding: 0;
		display: inline-block;
		vertical-align: middle;
		position: relative;
		text-decoration: none;
	}

	header ul.navbar-menu-list-right li a.status-area-none {
		padding: 0;
		display: inline-block;
		vertical-align: middle;
		position: relative;
		text-decoration: none;
	}

	header ul.navbar-menu-list-right li a.status-area-none div{
		width: 90px;
	}

	header ul.navbar-menu-list-right li a.navbar-button {
		display: inline-block;
		font-size: 10px;
		padding: 2px 6px;
		margin: 0px 15px 0px 0px;
		border: 1px solid var(--white);
		border-radius: 3px;
		color: var(--white);
	}

	header ul.navbar-menu-list-right li a.navbar-button:hover,
	header ul.navbar-menu-list-right li a.navbar-button:active {
		color: var(--dark2);
		background-color: var(--white);
	}

	header ul.navbar-menu-list-right li a.navbar-button:active {
		position: relative;
		top: 1px;
		left: 1px;
	}

	.navbar-logout {
		display: inline-block;
		font-size: 10px;
		padding: 2px 6px;
		margin: 0px 15px 0px 0px;
		border: 1px solid var(--white);
		border-radius: 3px;
		color: var(--white);
		background-color: var(--blue1);
	}

	.navbar-logout:hover,
	.navbar-logout:active {
		color: var(--dark2);
		background-color: var(--white);
		text-decoration: underline;
	}

	.navbar-logout:active {
		position: relative;
		top: 1px;
		left: 1px;
	}

	#menu_account {
		position: relative;
		padding: 0;
		width: var(--SZ-ALL-HEAD-ACCOUNT-W);
		height: var(--SZ-ALL-HEAD-H-NO-LINE);
		white-space: nowrap;
		font-size: 13px;
		background-color: var(--CC-ALL-HEAD-MAIN);
		display: inline-block;
	}

	#menu_account .userimg {
		width: 40px;
		height: 40px;
		margin: 10px;
	}

	#menu_account:active,
	#menu_account:hover {
		filter: brightness(125%);
	}

	#menu_account_info {
		width: 210px;
		text-align: left;
		position: absolute;
		display: inline-block;
		margin-top: 10px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	#menu_account_info::after {
		content: '';
		display: block;
	}

	#menu_account_info.none_chat{
		margin-top: 20px !important;
	}

	#menu_account_info .account_info_badge_area{
		display: flex;
		align-items: center;
	}

	#menu_account_info .account_info_area{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.mobile.desktop_size header {
		position: fixed !important;
		top: 0;
	}
	.mobile.desktop_size .helparea {
		position: fixed;
		z-index: 1;
		top: var(--SZ-ALL-HEAD-H);
		background-color: rgba(213, 219, 229, 1);
	}
}
/**** ヘッダー (Mobile) ************************************/
@media screen and (max-width:960px) {
	header {
		position: fixed;
		z-index: 1000;
		top: 0px;
		left: 0px;
		right: 0px;
		box-sizing: border-box;
		height: var(--SZ-ALL-HEAD-H);
		margin: 0px;
		padding: 0px;
		font-size: 13px;
		border-collapse: collapse;
		border-color: var(--blue1);
		border-width: 0px 0px 2px 0px;
		border-style: solid;
		background-color: var(--white);
		min-width: 300px;
	}
	.mobile.mobile_size header {
		position: fixed !important;
	}

	header .navbar-mobile {
		display: flex;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: space-between;
	}

	header .navbar-mobile-left {
		width: 70px;
	}
	header .navbar-mobile-left img {
		width: 30px;
		height: 16px;
		cursor: pointer;
	}

	header .navbar-mobile-center img {
		width: 200px;
	}
	header .navbar-mobile-center img.desk_logo {
		width: 200px;
		height: 56px;
		margin: 0px;
		padding: 0px;
	}
	header .navbar-mobile-center img.cloud_logo {
		height: 29.16px;
	}

	header .navbar-mobile-right {
		width: 70px;
		min-width: 70px;
		text-align: right;
	}
	header .navbar-mobile-right img {
		margin-right: 5px;
		width: 30px;
		height: 30px;
		filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));
	}

	/***************
	* ハンバーガー
	***************/
	#ham_overlay {
		width: 100%;
	}

	#ham_main {
		position: absolute;
		width: 80%;
		height: 100%;
		margin: 0;
		padding: 0;
		top: 0;
		left: 0;
		background-color: var(--white);
		z-index: 1005;
		box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.2);
	}
	.mobile.mobile_size #ham_main {
			position: fixed;
	}

	#ham_account {
		height: var(--SZ-HAM-HEAD-H);
		padding-left: 20px;
		font-size: 14px;
		color: var(--CC-ALL-HEAD-MAIN-TEXT);
		background-color: var(--CC-ALL-HEAD-MAIN);
		display: flex;
		align-items: center;
	}
	#ham_account .userimg {
		width: 40px;
		height: 40px;
		float: left;
		margin-right: 10px;
		background: rgba(0, 0, 0, 0);
	}
	#ham_account .user_info {
		max-width: calc(100% - 95px);
	}
	#ham_account .user_name,
	#ham_account .user_info_organization {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.ham_user_info_organization {
		width: 100%;
		display: flex;
	}
	.ham_user_info_organization_main {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow-x: hidden;
	}
	.ham_user_info_organization_sub {
		min-width: 30px;
	}

	#ham_scroll {
		height: calc(100% - var(--SZ-HAM-HEAD-H) - var(--SZ-FOOTER-H));
	}
	#ham_menu {
		list-style: none;
		font-size: 18px;
	}
	#ham_main .ham_menu a {
		width: 100%;
		color: inherit;
		text-decoration: none;
	}

	#ham_menu .menu_list {
		height: 60px;
		padding: 12px 20px;
		cursor: pointer;
		display: flex;
		align-items: center;
	}

	#ham_menu .menu_list_margin {
		height: 15px;
	}

	#ham_menu .menu_list.work {
		border-bottom: 1px solid var(--light2);
	}

	#ham_menu .menu_list.manual img {
		width: 18px;
		height: 19px;
		margin-left: 10px;
	}

	#ham_menu .menu_list.faq img {
		width: 17px;
		height: 17px;
		margin-left: 10px;
	}

	#ham_menu .menu_list.logout {
		background-color: var(--light2);
	}
	#ham_menu .menu_list.logout a {
		width: 100%;
		color: var(--white);
		text-decoration: none;
	}

	.ham_logout_button {
		width: 100%;
		color: var(--white);
		text-decoration: none;
		border: none;
		background-color: var(--light2);
		text-align: left;
	}

	#ham_blank {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(54, 61, 69, 0.6);
		z-index: 1004;
	}
	.mobile.mobile_size #ham_blank {
		position: fixed;
	}
}

/**** フッター (PC) ****************************************/
@media screen and (min-width:961px) {
	footer { /* DO_NOTHING */ }
}

/**** フッター (Mobile) ************************************/
@media screen and (max-width:960px) {
	footer {
		position: fixed;
		z-index: 1020;
		left: 0;
		right: 0;
		bottom: 0;
		height: var(--SZ-FOOTER-H);
		width: 100%;
		margin: 0px;
		padding: 10px 20px;
		background-color: var(--CC-ALL-FOOT-BASE);
		min-width: 300px;
	}

	footer .footer-mobile {
		display: flex;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: space-between;
	}
}

.my_thanks_card_badge {
	display: none;
	width: 28px;
	height: 35px;
	margin: 0 5px;
	flex-shrink: 0;
	cursor: pointer;
	background-repeat: no-repeat;
	text-align: center;
	color: black;
	font-weight: bold;
	padding-top: 4px;
	font-size: 12px;
}

footer .footbtn {
	width: 32px;
	height: 32px;
	filter: var(--FT-SHADOW);
}

/* 1. フッター (Mobile) - マイルーム */
footer .footer-mobile-left {
	width: 70px;
}
footer #my_room_link_mobile {
	display: none;
}

footer .footer-mobile-left img {
	width: 24px;
	height: 24px;
}

/* 2. フッター (Mobile) - 総未読件数/総保留件数 */
footer .footer-mobile-center {
	position: relative;
	width: 70px;
	height: 35px;
	text-align: center;
}
footer #total_unread_mobile {
	position: absolute;
	top: 0px;
	left: 42px;
}
footer .unread_mobile {
	display: none;
}
footer span.unread_cnt_mobile {
	display: block;
	height: 18px;
	border-radius: 9px;
	text-align: center;
	background-color: var(--red1);
	color: var(--white);
	float: right;
	font-size: 12px;
	font-weight: bold;
}
footer span.unread_cnt_mobile.digit1 {
	width: 18px;
}
footer span.unread_cnt_mobile.digit2 {
	width: 27px;
}
footer #total_pause_mobile {
	position: absolute;
	top: 0px;
	left: 6px;
}
footer .pause_mobile {
	display: none;
}
footer span.pause_cnt_mobile {
	display: block;
	height: 18px;
	border-radius: 9px;
	text-align: center;
	background-color: var(--CC-THEMA-VIDEO-MAIN);
	color: var(--white);
	float: right;
	font-size: 12px;
	font-weight: bold;
}
footer span.pause_cnt_mobile.digit1 {
	width: 18px;
}
footer span.pause_cnt_mobile.digit2 {
	width: 27px;
}

/* 3. フッター (Mobile) - 検索 */
footer .footer-mobile-right {
	position: relative;
	width: 70px;
	height: 35px;
	text-align: right;
}
footer #footer_search {
	display: none;
	color: var(--white);
	font-size: 22px;
	cursor: pointer;
}

/* ヘルプエリア (PC) */
.helparea {
	padding: 0px 15px;
	position:absolute;
	margin-left: 0px;
	left: 0;
	right: 0;
	top: 0;
	height: 42px;
	background-color: var(--CC-THEMA-HELPAREA-BASE);
	font-size: 12px;
	display: flex;
	align-items: center;
}

/* 左寄せ表示領域(未読通知) */
.helparea div.left {
	position: absolute;
	left: 10px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.helparea div>p {
	margin: 0;
}

/* 未読数 */
.helparea div>div.unread {
	display: none;
	font-weight: bold;
	color: var(--black);
	margin: 0;
}

.helparea div>div.unread:hover {
	text-decoration: none;
}

/* 保留数 */
.helparea div>div.pause {
	display: none;
	font-weight: bold;
	color: var(--black);
	margin: 0;
}

.helparea div>div.pause:hover {
	text-decoration: none;
}

/* 右寄せ表示領域(ヘルプ、マニュアル) */
.helparea div.right {
	position: absolute;
	right: 20px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.helparea a.help {
	position: relative;
	margin-left: 20px;
	width: 20px;
	height: 20px;
	cursor: pointer;
}
.helparea a.help > img {
	width: 18px;
	height: 18px;
}

.helparea a.manual {
	position: relative;
	margin-left: 20px;
}
.helparea a.manual > img {
	width: 16px;
	height: 17px;
}
.helparea a.headset > img {
	width: 22px;
	height: 22px;
}
.helparea a.admin > img {
	width: 20px;
	height: 20px;
}

/******************************/
/* 組織表示用ポップオーバー(PC) */
/******************************/
.org_row {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
	width: 100%;
}
.org_popover {
	max-width: 480px !important;
	min-width: 200px;
	position: fixed;
	padding: 2px;
	margin-top: 0px !important;
	white-space: normal;
	border-radius: 3px;
	cursor: default;
	background-color: var(--dark2) !important;
	color: var(--white) !important;
	filter: drop-shadow(0px 0px 2px var(--dark1));
	z-index: 1070;
}
.org_popover_body {
	font-size: 11px;
	color: var(--white) !important;
	padding: 2px !important;
}
.over_display_org {
	font-size: 12px;
	color: var(--light1);
}
#user_info_name {
	font-size: 14px;
}
#user_info_organization {
	display: flex;
	font-size: 12px;
}

#user_info_organization_main {
	max-width: 210px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
}
@media screen and (max-width:1301px) {
	#user_info_organization_main {
		max-width: 100px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow-x: hidden;
	}
}

#user_info_organization_sub {
	width: 30px;
}

#user_info_organization_tooltip {
	display: block;
	position: fixed;
	padding: 5px;
	white-space: normal;
	border-radius: 3px;
	cursor: default;
	background-color: var(--dark2);
	filter: drop-shadow(0px 0px 2px var(--dark1));
}

#user_info_organization_tooltip div{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
	margin-bottom: 3px;
}

.menu_account_organization_sub_tooltip:hover {
	display: block;
}

.display_organization_main {
	max-width: 180px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
}

.display_organization_sub {
	width: 30px;
}

.display_organization_tooltip {
	display: block;
	position: fixed;
	padding: 5px;
	white-space: normal;
	border-radius: 3px;
	cursor: default;
	background-color: var(--dark2);
	filter: drop-shadow(0px 0px 2px var(--dark1));
}

/**********************************/
/* 組織表示用ポップオーバー(Mobile) */
/**********************************/
@media screen and (max-width:960px) {
	.org_popover {
		max-width: 480px !important;
		min-width: 200px;
		position: fixed;
		padding: 2px;
		margin-top: 0px !important;
		white-space: normal;
		border-radius: 3px;
		cursor: default;
		background-color: var(--dark2) !important;
		color: var(--white) !important;
		filter: drop-shadow(0px 0px 2px var(--dark1));
		z-index: 1070;
	}
	.org_popover_body {
		font-size: 11px;
		color: var(--white) !important;
		padding: 2px !important;
	}
	.over_display_org {
		font-size: 12px;
		color: var(--light1);
	}
}

/***************
* バッジ
***************/
.bookmark_cnt {
	display: block;
	text-align: center;
	background-image: url('/static/app/images/bookmark_badge.svg');
	background-repeat: no-repeat;
	color: var(--white);
	float: right;
	font-size: 12px;
	font-weight: bold;
}
.bookmark_cnt.digit1 {
	width: 20px;
	height: 20px;
	background-size: 20px 20px;
}
.bookmark_cnt.digit2 {
	width: 30px;
	height: 20px;
	background-size: 30px 20px;
}

.unread_cnt_area{
	margin: 0px 10px;
}
.unread_cnt_area:hover {
	opacity: 0.6;
	cursor: pointer;
}
.unread span {
	margin-left: 5px;
}
.unread span.unread_cnt {
	display: block;
	height: 18px;
	border-radius: 9px;
	text-align: center;
	background-color: var(--red1);
	color: var(--white);
	float: right;
	font-size: 12px;
	font-weight: bold;
}
span.unread_cnt.digit1 {
	width: 18px;
}
span.unread_cnt.digit2 {
	width: 27px;
}

.pause_cnt_area {
	margin: 0px 10px;
}
.pause_cnt_area:hover {
	opacity: 0.6;
	cursor: pointer;
}
.pause span {
	margin-left: 5px;
}
.pause span.pause_cnt {
	display: block;
	height: 18px;
	border-radius: 9px;
	text-align: center;
	background-color: var(--CC-THEMA-VIDEO-MAIN);
	color: var(--white);
	float: right;
	font-size: 12px;
	font-weight: bold;
}
span.pause_cnt.digit1 {
	width: 18px;
}
span.pause_cnt.digit2 {
	width: 27px;
}

.status_room {
	position: absolute;
	top: 27px;
	left: 34px;
	width: 16px;
	height: 16px;
	filter: drop-shadow(0px 0px 1.25px var(--dark5));
}
.status_room.hidden {
	display: none;
}
.status_badge {
	vertical-align: top;
}

/*************/
/* 処理中画面 */
/*************/
#waiting {
	position: fixed;
	z-index: 2000;
	display: none;
	top:    0;
	bottom: 0;
	left:   0;
	right:  0;
	background-color: rgba(55,55,55,0.3);
	align-items: center;
	justify-content: center;
	flex-direction: column;
	min-height: 600px;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}
@keyframes rotate-anime {
	0% { transform: rotate(0);      }
  100% { transform: rotate(360deg); }
}

@media screen and (min-width:961px) {
	#waiting_img {
		width:  12vw;
		height: 12vh;
		margin-bottom: 20px;
		animation: rotate-anime 3s linear infinite;
	}
	#waiting_msg {
		font-size: 2vw;
		color: var(--white);
		font-weight: bold;
		margin-bottom: 0px;
	}
	.mobile.desktop_size #waiting {
		position: fixed;
	}
}

@media screen and (max-width:960px) {
	.mobile.mobile_size #waiting {
		position: fixed;
	}
	#waiting_img {
		width:  16vw;
		height: 16vh;
		margin-bottom: 0px;
		animation: rotate-anime 3s linear infinite;
	}
	#waiting_msg {
		font-size: 4vw;
		color: var(--white);
		font-weight: bold;
		margin-bottom: 0px;
	}
}


/********/
/* 全体 */
/********/
* {
	box-sizing: inherit;
	margin: 0px;
	padding: 0px;
}

*:before,
*:after {
	box-sizing: inherit;
}

a {
	text-decoration: none;
}

input::-ms-clear {
	display: none;
}

input[type="checkbox"] {
	display: none;
}
input[type="checkbox"] + label {
	line-height: 1.2em;
	padding-left: calc(1.2em + 5px);
	display: inline-block;
	vertical-align: middle;
	outline: none;
	cursor: pointer;
	background: url('/static/app/images/check_box_blue.svg') no-repeat;
	background-size: 1.2em;
}
input[type="checkbox"] + label.without_text {
	height: 1.2em;
	margin-bottom: 0;
	padding-left: calc(1.2em);
}
input[type="checkbox"]:disabled + label {
	cursor: default;
	background: url('/static/app/images/check_box_gray.svg') no-repeat;
	background-size: 1.2em;
}
input[type="checkbox"]:checked:disabled + label {
	background: url('/static/app/images/check_on_grey.svg') no-repeat;
	background-size: 1.2em;
}
input[type="checkbox"]:checked + label {
	background: url('/static/app/images/check_on_blue.svg') no-repeat;
	background-size: 1.2em;
}

.checkbox_label {
	padding-bottom:2px;
	vertical-align: middle;
	font-size: 14px;
	cursor: pointer;
	color: var(--CC-THEMA-TEXT-INVERT);
	display: inline;
}
.checkbox_label.disabled {
	color: var(--CC-THEMA-TEXT-WEEK-MUCH);
	cursor: default;
}

.checkbox_indicator {
	position: relative;
	height: 15px;
	width: 15px;
	margin-top: -2px;
	border-radius: 4px;
	border: solid 1px var(--CC-THEMA-TEXT-INVERT);
	vertical-align: middle;
	display: inline-block;
}
.checkbox_indicator.check_box_colerA {
	border-color: var(--CC-THEMA-TEXT-INVERT);
}
.checkbox_indicator.check_box_colerB {
	border-color: var(--CC-THEMA-TEXT-WEEK-MUCH);
}

input[type="checkbox"]:disabled + .checkbox_indicator {
	border-color: var(--CC-THEMA-DISABLE);
}
input[type="checkbox"]:disabled + .checkbox_indicator.check_box_colerA {
	border-color: var(--CC-THEMA-DISABLE);
}
input[type="checkbox"]:disabled + .checkbox_indicator.check_box_colerB {
	border-color: var(--CC-THEMA-TOOL-BORDER);
}

label:has(> input[type="checkbox"]:disabled) {
	color: var(--CC-THEMA-DISABLE);
}
label:has(> input[type="checkbox"]:disabled + .check_box_colerA) {
	color: var(--CC-THEMA-DISABLE);
}
label:has(> input[type="checkbox"]:disabled + .check_box_colerB) {
	color: var(--CC-THEMA-TOOL-BORDER);
}

.checkbox_indicator:after {
	position: absolute;
	left: 3px;
	top: 0px;
	width: 6px;
	height: 11px;
	border: solid var(--CC-THEMA-WHOLE-WEEK-LITTLE);
	border-width: 0px 3px 3px 0px;
	transform: rotate(45deg);
	content: '';
	display: none;
}
.checkbox_indicator.check_box_colerA:after {
	border-color: var(--CC-THEMA-WHOLE-WEEK-LITTLE);
}
.checkbox_indicator.check_box_colerB:after {
	border-color: var(--CC-THEMA-WHOLE);
}

input:checked ~ .checkbox_indicator:after {
	display: inline;
}

input[type="radio"] {
	height: 0.8em;
	width: 0.8em;
	vertical-align: middle;
}

input[type="text"] {
	padding: 2px;
	line-height: normal;
}

input[type="password"] {
	padding: 2px;
	line-height: normal;
}

textarea {
	font-size: 12px;
	padding: 4px;
	line-height: 1.2em;
	background-color: var(--white);
}

/* iOS用スタイル */
.mobile:not(.desktop_size) input, .mobile:not(.desktop_size) select {
	outline: none;
	box-shadow: none;
	font-size: 16px;
	line-height: 16px;
}

/******** ボタン ********/
.btn {
	display: inline-block;
	padding: 0px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.428571429;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border-radius: 4px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

/* 画像のボタン */
.imgbtn {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer !important;
	outline: none !important;
}
.imgbtn:disabled {
	cursor: default !important;
}

.talkbtn {
	display: none;
	width: 24px;
	height: 24px;
	margin-left: 6px;
	margin-right: 6px;
	filter: var(--FT-SHADOW);
}
:not(.mobile) > .talkbtn:hover {
	transform: var(--TF-BIG);
}

.toolbtn {
	width: 24px;
	height: 24px;
	margin-left: 6px;
	margin-right: 6px;
	filter: var(--FT-SHADOW);
}
:not(.mobile) > .toolbtn:hover {
	transform: var(--TF-BIG);
}

.hambtn {
	width: 32px;
	height: 32px;
	margin-left: 8px;
	filter: var(--FT-SHADOW);
}

.change_btn {
	margin:  0px;
	padding: 0px;
	border:  0px;
	width: 100px;
	height: 21px;
	position: relative;
	outline: none   !important;
	cursor: pointer !important;
	background:url('/static/app/images/change_blue.svg');
}
.change_btn:active, .change_btn:hover {
	background-color:rgba(255, 255, 255, 0.2);
	background-blend-mode: lighten;
}

.delete_btn {
	margin:  0px;
	padding: 0px;
	border:  0px;
	width: 100px;
	height: 21px;
	outline: none   !important;
	cursor: pointer;
	background:url('/static/app/images/delete_blue.svg') no-repeat;
}
.delete_btn:active, .delete_btn:hover {
	background:url('/static/app/images/delete_blue_d.svg') no-repeat;
}
.delete_btn:disabled {
	cursor: default;
	background:url('/static/app/images/delete_gray.svg') no-repeat;
}

/* ブックマークボタン */
.msg_bookmark_btn {
	vertical-align: middle;
	border: none;
	width: 20px;
	height: 20px;
	cursor: pointer;
}
.msg_bookmark_btn.off {
	background: url('/static/app/images/bookmark_off.svg') no-repeat;
}
.msg_bookmark_btn.on {
	background: url('/static/app/images/bookmark_on.svg') no-repeat;
	opacity: 1;
}

/* あとで読むボタン */
.read_later {
	margin-left: 10px;
}
.msg_read_later_btn {
	vertical-align: middle;
	border: none;
	width: 20px;
	height: 20px;
	cursor: pointer;
}
.msg_read_later_btn.off {
	background: url('/static/app/images/talk_read_later_off.svg') no-repeat;
}
.msg_read_later_btn.on {
	background: url('/static/app/images/talk_read_later_on.svg') no-repeat;
	opacity: 1;
}

/* 通常ボタン（有効/無効/ホバー） */
.normal_btn{
	margin: 0px;
	padding: 0px;
	outline: none !important;
	width: var(--sz-button-w);
	min-width: var(--sz-button-w);
	height: var(--sz-button-h);
	min-height: var(--sz-button-h);
	border-radius: 4px;
	font-size: 12px;
	text-align: center;
	cursor: pointer;
	background-color: var(--CC-THEMA-BUTTON-ENABLED);
	border: 0px;
	color: var(--CC-THEMA-BUTTON-TEXT);
}
.normal_btn:disabled {
	cursor: default;
	filter: none !important;
	background-color: var(--CC-THEMA-BUTTON-DISABLED);
}
:not(.mobile) > .normal_btn:active, .normal_btn:focus, .normal_btn:hover {
	filter: brightness(110%);
}

/* 反転ボタン（有効/無効/ホバー） */
.invert_btn {
	margin: 0px;
	padding: 0px;
	outline: none !important;
	width: var(--sz-button-w);
	min-width: var(--sz-button-w);
	height: var(--sz-button-h);
	min-height: var(--sz-button-h);
	border-radius: 4px;
	font-size: 12px;
	text-align: center;
	cursor: pointer;
	background-color: var(--CC-THEMA-BUTTON-INVERT);
	border: solid 1px var(--CC-THEMA-BUTTON-ENABLED);
	color: var(--CC-THEMA-BUTTON-ENABLED);
}
.invert_btn:disabled {
	cursor: default;
	filter: none !important;
	border: solid 1px var(--CC-THEMA-BUTTON-DISABLED);
	color: var(--CC-THEMA-BUTTON-DISABLED);
}
:not(.mobile) > .invert_btn:active, .invert_btn:focus, .invert_btn:hover {
	filter: brightness(95%);
}

/* ボタン間隔（左側/右側） */
.btn_margin_left {
	margin-left: 8px;
}
.btn_margin_right {
	margin-right: 8px;
}

.change_submit {
	margin:  0px;
	padding: 0px;
	border:  0px;
	width: 100px;
	height: 21px;
	position: relative;
	outline: none   !important;
	cursor: pointer !important;
	background:url('/static/app/images/change_blue.svg');
	text-indent:-9999px;
}
.change_submit:active, .change_submit:hover {
	background-color:rgba(255, 255, 255, 0.2);
	background-blend-mode: lighten;
}
.change_submit_wrap {
	display: block;
	margin:  0px;
	padding: 0px;
	border:  0px;
	width: 100px;
	height: 21px;
	position: absolute;
	right:0;
	outline: none   !important;
	cursor: pointer !important;
}
.change_submit_wrap:active, .change_submit_wrap:hover {
	background-color:rgba(255, 255, 255, 0.2);
	background-blend-mode: lighten;
}

/** 文字のボタン **/
.darkbtn {
	border-radius:4px;
	border-width: 1px;
	border-style: solid;
	min-height:21px;
	line-height:21px;
	min-width:80px;
	font-size:12px;
	cursor: pointer;
	background-color: var(--CC-THEMA-BUTTON-ENABLED);
	border-color: var(--CC-THEMA-BUTTON-ENABLED);
	color: var(--CC-THEMA-BUTTON-TEXT);
}
.darkbtn.disable {
	cursor: default;
	filter: none !important;
	background-color: var(--CC-THEMA-BUTTON-DISABLED);
	border-color: var(--CC-THEMA-BUTTON-DISABLED);
}
:not(.mobile) > .darkbtn:active, .darkbtn:focus, .darkbtn:hover {
	filter: brightness(110%);
}

.lightbtn {
	border-radius:4px;
	border-width: 1px;
	border-style: solid;
	min-height:21px;
	line-height:21px;
	min-width:80px;
	font-size:12px;
	cursor: pointer;
	background-color: var(--CC-THEMA-BUTTON-INVERT);
	border-color: var(--CC-THEMA-BUTTON-ENABLED);
	color: var(--CC-THEMA-BUTTON-ENABLED);
}
.lightbtn.disable {
	cursor: default;
	filter: none !important;
	border-color: var(--CC-THEMA-BUTTON-DISABLED);
	color: var(--CC-THEMA-BUTTON-DISABLED);
}
:not(.mobile) > .lightbtn:active, .lightbtn:focus, .lightbtn:hover {
	filter: brightness(95%);
}


.hover:active,
.hover:hover {
	opacity: 0.7;
}

/* ユーザー画像/チャットルーム画像 */
.userimg, .roomimg {
	border-radius: 50%;
	border: none;
}
.userimg.aichat {
	background-color: var(--white);
}

/* ファイル投稿ボタン */
.file_upload {
	display:flex;
	align-items: center;
}
.file_upload_btn {
	margin:  0px;
	padding: 0px;
	border:  0px;
	width: 120px;
	height: 21px;
	min-width: 120px;
	min-height: 21px;
	position: relative;
	outline: none   !important;
	cursor: pointer !important;
	background:url('/static/app/images/select_file_blue.svg');
}
.file_upload_btn:active, .file_upload_btn:hover {
	background-color:rgba(255, 255, 255, 0.2);
	background-blend-mode: lighten;
}

.file_upload_file {
	display:none;
}
#change_img_filename {
	margin:0px 0px 0px 15px;
	background: none;
	box-shadow: none;
	border: none;
	font-size: 12px;
	padding:0px;
	color: #808080;
	outline: none !important;
	width:60%;
}

/* ダウンロードリンクのターゲットのiframe */
.download_target_iframe {
	display: none;
}

/* div */
div { margin:0;	padding:0; }

/* 成功メッセージ */
.success {
	color: var(--blue1);
	font-size: 12px;
	margin:0;
}

/* エラーメッセージ */
.error{
	color: var(--red1);
	font-size: 12px;
	margin:0;
}

.info_content {
	padding: 20px 30px;
	/*overflow:hidden;*/
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	right:0;
	display:flex;
	flex-direction: column;
	background-color: var(--light6);
}

/* 設定情報とかに使用するパネル */
.info_panel {
	background-color: var(--white);
	/*padding: 20px 20px 0px 20px;*/
	padding-top: 20px;
	border-bottom: 2px solid var(--light7);
	margin-bottom: 20px;
}

.info_row_static {
	position: relative;
	color: var(--dark2);
	margin: 0px 30px;
	height: 57px;
	border-bottom: 1px solid var(--light6);
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/**** パネル内アイテム (PC) ********************************/
@media screen and (min-width:961px) {
	.info_heading {
		color: var(--dark2);
		padding: 0px 30px;
		height: 42px;
		border-bottom: 2px solid var(--light6);
	}
	.info_row {
		position: relative;
		color: var(--dark2);
		margin: 0px 30px;
		height: 57px;
		border-bottom: 1px solid var(--light6);
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.info_row_group {
		min-height: 57px;
		height: auto;
	}
	.info_row_group_value {
		margin: 1em 0 1em 1.25em;
	}
	.info_row.img {
		height: 64px;
		line-height: 64px;
	}
	.info_row.noborder {
		border-bottom: 0px;
	}
	.info_row.action {
		border-bottom: 0px;
		align-items:center;
	}
	.info_label {
		position: relative;
		width: 250px;
		min-width: 250px;
		margin:0;
	}
	.info_label.img {
		height: 64px;
		line-height: 64px;
	}
	.info_value {
		position:relative;
		width:auto;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.info_value.img {
		position: relative;
		height:64px;
		line-height:64px;
		display:flex;
		align-items:center
	}
	.info_value_org {
		display: flex;
		flex-flow: column;
		margin: 10px 0px;
	}
	.info_value_change_org {
		display: flex;
	}
	.input-password, .input-text {
		width: 320px !important;
		height: 21px !important;
	}

}
/**** パネル内アイテム (Mobile) ****************************/
@media screen and (max-width:960px) {
	.info_heading {
		color: var(--dark2);
		padding: 0px 20px;
		height: 42px;
		border-bottom: 2px solid var(--light6);
	}
	.info_row {
		position: relative;
		color: var(--dark2);
		margin: 4px 20px 0px 20px;
		height: 57px;
		border-bottom: 1px solid var(--light6);
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
	}
	.info_row_group {
		min-height: 57px;
		height: auto;
	}
	.info_row_group_value {
		margin: 0 0 0.5em 1.25em;
	}
	.info_row.v_center {
		margin: 0;
		margin-left: 20px;
		align-items: center;
		flex-direction: initial;
	}
	.info_row.img {
		height: 80px;
	}
	.info_row.org_change {
		height: 90px;
	}
	.info_value_change_org {
		display: flex;
		margin-top: 5px;
		flex-flow: column;
	}
	.change_disp_org_submit {
		padding: 10px 0px;
	}
	.info_row.noborder {
		border-bottom: 0px;
	}
	.info_row.action {
		border-bottom: 0px;
		flex-direction: row;
		align-items:center;
	}
	.info_label {
		position: relative;
		width: 250px;
		min-width: 250px;
		margin:0;
	}
	.info_label.img {
	}
	.info_value {
		padding-left: 10px;
		position:relative;
		width:auto;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.info_value.img {
		position: relative;
		height:48px;
		line-height:48px;
		display:flex;
		align-items:center
	}
	.info_value_org {
		display: flex;
		flex-flow: column;
		margin: 10px 0px;
	}
	.info_value_change_org {
		display: flex;
		margin-top: 5px;
	}
	.input-password, .input-text {
		width: 240px !important;
		height: 21px !important;
		margin-top: 4px !important;
	}
}

/* モーダル表示時などに使用される背景スモーク */
.smoke {
	display:			none;
	z-index:			-1;
	position:			fixed;
	top:				0px;
	left:				0px;
	right:				0px;
	bottom:				0px;
	background-color:	rgba(21,29,32,0.7);
	color:				var(--white);
	font-size:			11px;
	justify-content:	center;
	align-items:		center;
}

/***********************************************************
 * 汎用ダイアログ
 ***********************************************************/
.dialog_smoke {
	display: none;
	z-index: -1;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(21,29,32,0.7);
	color: var(--white);
	font-size: 11px;
	justify-content: center;
	align-items: center;
}

.dialog_smoke.full_cover {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}

.dialog_main{
	background-color: var(--white);
	max-width: calc(100% - 32px);
	max-height: calc(100% - 32px);
	border-radius: .4rem;
}

.dialog_head{
	display: flex;
	width:				100%;
	height:				24px;
	padding:			0px 15px;
	background-color: 	var(--dark2);
	color:				var(--white);
	align-items:		center;
	border-top-left-radius: .3rem;
	border-top-right-radius: .3rem;
}

.dialog_body {
	width: auto;
	height:	auto;
	padding: 16px;
	background-color: var(--white);
	color: #212529;
	text-align: center;
	border-radius: .3rem;
	border: 1px solid rgba(0,0,0,.2);
}

.dialog_section {
	margin-bottom: 20px;
	word-break: break-word;
	word-wrap: break-word;
	display:flex;
	align-items: center;
	justify-content: center;
}

.dialog_section.no_margin {
	margin: 0px;
}

.dialog_section .icon{
	margin:auto 10px auto 0;
	height: 40px;
	width: 40px;
}

.dialog_section_msg {
	& > ul {
		display: inline;
		& > li {
			margin-left: 20px;
		}
	}
}

.dialog_content {
	min-width: 160px;
	word-break: break-word;
	word-wrap: break-word;
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.dialog_content_item + .dialog_content_item {
	margin-top: 16px;
}

.dialog_content_item_action {
	margin-left: auto;
	margin-right: 4px;
	text-align: right;
}

.dialog_form_text {
	width: 200px;
}
.dialog_form_text #text_box {
	width: 200px;
	padding: unset;
}

.dialog_form_radio {
	margin-top: 10px;
	margin-left: 15px;
	text-align: left;
}

.dialog_form_radio_label {
	margin-left: 5px;
}

.dialog_action {
	text-align: center;
}

.dialog_button_margin {
	margin-right: 8px;
}

.dialog_img {
	max-height: 250px;
	min-height: 100px;
	max-width: 100%;
	width: auto;
	border: 1px solid var(--black);
}

.dialog_img + .dialog_section {
	margin-top: 20px;
}

/***********************************************************
 * イメージプレビューダイアログ
 ***********************************************************/

#image_preview .ip_btn:hover {
	color: var(--blue3);
	cursor: pointer;
}

#image_preview .ip_btn_close {
	font-size:22px;
	color:var(--dark8);
}

#image_preview .ip_btn_download {
	font-size: 24px;
	color: var(--blue4);
}

#image_preview .ip_frame {
	position: relative;
}

#image_preview .ip_image {
	min-width: 240px;
	min-height: 160px;
	object-fit: contain;
}

#image_preview .ip_smoke {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	color: var(--white);
	background-color: rgba(0,0,0,0.8);
	justify-content: center;
	font-size: 14px;
	padding: 10px;
}

#image_preview .ip_waiting {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding-top: 16px;
	display: none;
	text-align: center;
	background-color: rgba(55,55,55,0.3) !important;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

#image_preview .ip_waiting img {
	max-width: 50%;
	max-height: 50%;
}

#image_preview .ip_waiting div {
	font-size: 16px;
	font-weight: bold;
	color: var(--white);
	margin-bottom: 0px;
}


/* 取り消し線 */
.force_line_through {
	text-decoration: line-through !important;
}

/* モーダル表示時のパディング勝手に追加される問題 */
.modal {
	padding-left: 0px !important;
}

/*************
 * 読み込み中インジケーター
 *************/
.waiting_list {
	z-index: 2000;
	display: none;
	background-color: rgba(55,55,55,0.3) !important;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

.waiting_list.tool {
	height: 100%;
}

.mobile .waiting_list {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

@media screen and (min-width:961px) {
	.waiting_list_img {
		width:  12vw;
		height: 12vh;
		margin-bottom: 20px;
		animation: rotate-anime 3s linear infinite;
	}
	.waiting_list_msg {
		font-size: 2vw;
		color: var(--white);
		font-weight: bold;
		margin-bottom: 0px;
	}

	.mobile.desktop_size .room_list_content {
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.mobile.desktop_size .waiting_list.rooms {
		position: fixed;
		top: 104px;
	}
}

@media screen and (max-width:960px) {
	.waiting_list_img {
		width:  16vw;
		height: 16vh;
		margin-bottom: 0px;
		animation: rotate-anime 3s linear infinite;
	}
	.waiting_list_msg {
		font-size: 4vw;
		color: var(--white);
		font-weight: bold;
		margin-bottom: 0px;
	}

	.mobile.mobile_size .room_list_content {
		height: auto;
		padding-bottom: var(--SZ-FOOTER-H);
	}
}

@keyframes rotate-anime {
	0% { transform: rotate(0);      }
	100% { transform: rotate(360deg); }
}

.closebtn {
	margin:  0px;
	padding: 0px;
	border:  0px;
	width: 100px;
	height: 21px;
	outline: none   !important;
	cursor: pointer;
	background:url('/static/app/images/close_button_blue.svg') no-repeat;
	background-color: var(--white);
	border-radius: 4px;
}
.closebtn:hover, .closebtn:focus {
	background-color: var(--light6);
	border-radius: 0.25rem;
}


/***********************************************************
 * ボタン用画像
 ***********************************************************/
.btn_myroom {
	background: url('/static/app/images/chat_tool_myroom.svg') no-repeat;
}
.btn_search {
	background: url('/static/app/images/chat_tool_search.svg') no-repeat;
}
.btn_headset {
	background: url('/static/app/images/chat_tool_headsed.svg') no-repeat;
}
.btn_bento {
	background: url('/static/app/images/chat_tool_bento.svg') no-repeat;
}
.btn_bookmark {
	background: url('/static/app/images/chat_tool_bookmark.svg') no-repeat;
}

.btn_help {
	background: url('/static/app/images/chat_tool_help.svg') no-repeat;
}
.btn_faq {
	background: url('/static/app/images/chat_tool_faq.svg') no-repeat;
}
.btn_spanner {
	background: url('/static/app/images/chat_tool_spanner.svg') no-repeat;
}
.btn_download {
	background: url('/static/app/images/chat_tool_download.svg') no-repeat;
}
.btn_mobile {
	background: url('/static/app/images/chat_tool_mobile.svg') no-repeat;
}
.btn_message {
	background: url('/static/app/images/chat_tool_message.svg') no-repeat;
}
.btn_aichat {
	background: url('/static/app/images/chat_tool_aichat.svg') no-repeat;
}
.btn_setting {
	background: url('/static/app/images/talk_room_setting.svg') no-repeat;
}


/***********************************************************
 * イージースクロールバー
 ***********************************************************/
div.easy_scroll:not(.is-reactnative) {
	overflow-x: hidden;
	overflow-y: auto;
	overflow-anchor: none;
	touch-action: auto;
}
@supports (-moz-appearance: none) {
	div.easy_scroll:not(.is-reactnative) {
		scrollbar-color: var(--CC-THEMA-SCROLLBAR-MAIN) var(--CC-THEMA-SCROLLBAR-BASE);
		scrollbar-width: thin;
	}
}

div.easy_scroll:not(.is-reactnative)::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
div.easy_scroll:not(.is-reactnative)::-webkit-scrollbar-track {
	background-color: var(--CC-THEMA-SCROLLBAR-BASE);
}
div.easy_scroll:not(.is-reactnative)::-webkit-scrollbar-thumb {
	background-color: var(--CC-THEMA-SCROLLBAR-MAIN);
	border-radius: 6px;
}


/***********************************************************
 * トースト通知
 ***********************************************************/
.toast_main {
	position: absolute;
	z-index: 1600;
	margin: 4px;
	padding: 4px;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 4px;
	max-width: 100%;
	max-height: 100%;
	font-size: 11px;
	background-color: #FFF;
	overflow: hidden;
	white-space: pre-wrap;
	word-break: break-word;
	word-wrap: break-word;
	will-change: transform;
	display: flex;
}


/* アクティベーションダイアログ */
.activate_dlg_smoke {
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	inset: 0px 0px 0px 0px;
	padding: 10px;
	background-color: rgba(21, 29, 32, 0.7);
}
.activate_dlg_box {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-width: 300px;
	max-width: 700px;
	max-height: 600px;
	background-color: var(--white);
	border-radius: 5px;
}
.activate_dlg__header {
	padding: 8px 16px;
	border-bottom: solid 1px var(--light1);
}
.activate_dlg__header__title {
	display: flex;
	flex-wrap: wrap;
	font-weight: bold;
	font-size: 18px;
}
.activate_dlg__header__title span {
	padding-right: 5px;
}
.activate_dlg__body {
	overflow-y: auto;
	height: 100%;
	padding: 10px 30px;
}
.activate_dlg__step {
	border: solid 2px var(--light1);
	border-radius: 5px;
	padding: 5px 10px;
	margin: 10px 0px;
}
.activate_dlg__step.active {
	border: solid 3px #3e72da;
}
.activate_dlg__step:not(.active) {
	cursor: pointer;
}
.activate_dlg__step:not(.active):hover {
	background-color: rgba(62, 114, 218, 0.1);
	border: solid 2px #3e72da;
}
.activate_dlg__step__header {
	display: flex;
	flex-direction: row;
	padding: 5px 0px;
}
.activate_dlg__step__header_text {
	font-size: 18px;
}
.activate_dlg__step.active .activate_dlg__step__header_text {
	font-weight: bold;
}
.activate_dlg__step__body {
	display: none;
	flex-direction: column;
	padding: 5px 0px;
	border-top: solid 1px var(--light1);
}
.activate_dlg__step.active .activate_dlg__step__body {
	display: flex;
}

.activate_dlg__footer {
	display: flex;
	justify-content: flex-end;
	padding: 16px;
	border-top: solid 1px var(--light1);
}
.activate_dlg__body_img {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 0px 5px;
}
.activate_dlg__body_img img {
	max-width: 100%;
}
.activate_dlg_hide {
	display: none;
}

/* ダイアログ内のアクションボタン */
.activate_dlg_box .action_btn {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2px 16px;
	border-radius: 5px;
	margin-left: 10px;
	min-width: 120px;
	cursor: pointer;
}
.activate_dlg_box .action_btn.hide {
	display: none;
}
.activate_dlg_box .action_btn.blue {
	background-color: #3e72da;
	color: var(--white);
}
.activate_dlg_box .action_btn.blue:hover {
	opacity: 0.8;
}
.activate_dlg_box .action_btn.white {
	background-color: var(--white);
	color: #3e72da;
	border: solid 1px #3e72da;
}
.activate_dlg_box .action_btn.white:hover {
	background-color: rgba(21, 29, 32, 0.1);
}
.activate_dlg_box .action_btn_text {
	font-size: 13px;
}
.restricted_by_schedule > * {
	text-align: left;
}
.restricted_by_schedule > li {
	list-style-type: none;
	margin: 0px 10px;
}

/* 言語切り替えUI */
/* 通常用 */
.btn_langu {
	width: 24px;
    height: 24px;
	font-weight: bold;
	font-size: 12px;
	background: none;
	border: none;
	color: black;
	cursor: pointer;
	outline: none;
	margin-left: 6px;
	margin-right: 6px;
}
/* モバイル用 */
.ham_langu{
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    appearance: none;
}