/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
全体階層のコンテナ系UI
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#content-frame,
.content-frame
{
	clear: both;
	background-color: hsl(0,0%,20%);
	border: 1px solid hsl(0,0%,35%);
	border-radius: 4px;
	padding: 12px 12px 12px 12px;
	box-shadow: 1px 2px 13px hsl(0,0%,15%);
	position: relative;
}

#content-frame > .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

#content-frame > .container .content-frame-latest-time {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-right: 9px;
}

#content-frame > .container .content-frame-latest-time > small {
	font-size: 12px;
	margin-bottom: 5px;
	display: none;
}

.content-wide
{
	width: 560px;
}
.content-margin-swipeable
{
	width: 560px;
}

#content-frame-transparent
{
	margin: -8px;
}


.content-frame-clearfix
{
	clear: both;
	height: 0px;
}


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
入力フィールド
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */


.pc-input-list::after
{
	content: "";
	clear: both;
	display: block;
}

.pc-input-list > li
{
	margin-bottom: 20px;
}

.pc-input-list > li > p
{
	font-size: 14px;
	line-height: 1;
	margin-bottom: 12px;
	font-weight: 300;
}

#preview-inputs
input
{
	margin-bottom: 10px;
}


/* --------------------------------------
/ ラジオボタン
/ --------------------------------------- */

.pc-radios-container::after
{
	content: "";
	clear: both;
	display: block;
}

.pc-finish-message
{
	padding-top: 75px;
	padding-bottom: 80px;
	clear: both;
}
	.pc-radio-label input{
		display: none;
	}

	.pc-radio-label > i{
		display: block;
		float: left;
		width: 20px;
		height: 20px;
		border: 1px solid hsl(0,0%,70%);
		background-color: hsl(0,0%,20%);
		box-shadow: 1px 1px 4px hsl(0,0%,0%);
		border-radius: 50%;
		box-sizing: content-box;
	}
	.pc-radio-label span{
		display: block;
		float: left;
		padding-top: 1px;
		font-size: 16px;
		line-height: 1;
		margin-left: 8px;
		margin-right: 30px;
	}


	.pc-radio-label > input:checked + i::after{
		content: "";
		display: block;
		width: 12px;
		height: 12px;
		transform: translate(4px, 4px);
		border-radius: 50%;
		background: hsl(158,100%,45%);
		border: 1px solid hsl(158,80%,40%);
		box-sizing: border-box;
	}


/* --------------------------------------
/ セレクタ
/ --------------------------------------- */

.pc-select-short {
	width: 60px;
	float: left;
}

.pc-input-unit {
	font-size: 15px;
	margin-left: 6px;
	padding-top: 12px;
	display: inline-block;
}

.pc-select-wrapper:after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border: 0;
	border-bottom: 1.5px solid hsl(0,0%,30%);
	border-right: 1.5px solid hsl(0,0%,30%);
	transform: rotate(45deg);
	margin-left: -17px;
	margin-top: 10px;
	float: left;
}


/* --------------------------------------
/ 以下、モバイル版からコピペしたものをベースに
/ -------------------------------------- */

input, select, textarea {
	vertical-align:middle;
	border: none;
	border-radius: 3px;
	background: #fff;
	width: 100%;
	padding: 10px;
}

.input_wrapper {
	color: #fff;
}

.input_list_item p {
	text-align: left;
	font-size: 14px;
	line-height: 14px;
	margin-bottom: 8px;
}

.pc-input-wrapper {
	margin-left: 3px;
	margin-right: 3px;
}

.pc-input-wrapper
input,
.pc-input-wrapper
textarea
{
	margin-bottom: 20px;
}

.pc-input-wrapper
.li
{
	margin-bottom: 30px;
}

#input_wrapper_login
.input_ttl
{
	margin-bottom: 8px;
}

select {
	padding: 8px;
}


/* - - - - - -
/ テーブルレイアウト型の入力フォーム
/ - - - - - - - */

.pc-input-table,
.pc-confirm-table
{
	width: 100%;
	color: #fff;
	text-align: left;
	border-collapse: collapse;
}

	.pc-confirm-table tr
	{
		border-top: 1px solid hsl(0,0%,35.333%);
		box-sizing: border-box;
	}

	.pc-input-table-row > th,
	.pc-confirm-table-row > th
	{
		padding-top: 11px;
		font-size: 14.5px;
		line-height: 1;
		font-weight: normal;
		font-weight: 400;
		width: 150px;
		vertical-align: top;
		text-align: left;
	}

	.pc-input-table-row > td
	{
		padding-bottom: 19px;
	}

	.pc-confirm-table-row > td
	{
		padding-top: 11px;
		padding-bottom: 13px;
	}


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
並べ替えバー
// playlist/orderで使用
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.pc-sort-bar
{
	padding-top: 9px;
	border-top: 1px solid hsl(0,0%,35%);
	border-bottom: 1px solid hsl(0,0%,28%);
	margin-left: -11px;
	margin-right: -12px;
	height: 112px;
	background-color: hsl(0,0%,25%);
	box-sizing: border-box;
}

	.pc-sort-bar-deleter
	{
		width: 24px;
		height: 24px;
		display: block;
		float: left;
		margin-top: 30px;
		margin-left: 12px;
		margin-right: 10px;
		cursor: pointer;
	}

	.pc-sort-bar-square .pc-sort-bar-image {
		width: 90px;
	}

	.pc-sort-bar-image
	{
		width: 145px;
		height: 90px;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		display: block;
		float: left;
	}

	@media screen and (min-width: 1366px) {
		.pc-sort-bar-image
		{
			width: 160px;
		}
		.pc-sort-bar-square {
			height: 160px;
		}
		.pc-sort-bar-square .pc-sort-bar-image {
			width: 140px;
			height: 140px;
		}
		.pc-sort-bar-square .sort_handler {
			height: 160px;
		}
	}

	@media screen and (max-width: 1199.98px) {
		.pc-sort-bar-image
		{
			width: 135px;
		}
	}

	@media screen and (max-width: 991.98px) {
		.pc-sort-bar-image
		{
			width: 130px;
		}
	}

	@media (max-width: 575.98px) {
		.pc-sort-bar-image
		{
			width: 100px;
		}
	}

	.pc-sort-bar-texts
	{
		display: block;
		float: left;
		color: white;
		margin-left: 20px;
		box-sizing: border-box;
		height: 90px;
		width: 270px;
		overflow: hidden;
	}

	@media screen and (min-width:1079px) {
		.pc-sort-bar-texts
		{
			width: calc(100% - 300px);
		}
	}
	@media screen and (min-width:1366px) {
		.pc-sort-bar-texts
		{
			width: calc(100% - 350px);
		}
	}

	.pc-sort-bar-name
	{
		font-size: 14px;
		line-height: 19px;
		margin-bottom: 0px;
	}

	.pc-sort-bar-desc
	{
		font-size: 11px;
		line-height: 17.5px;
		font-weight: 200;
		overflow: normal;
	}

	.pc-sort-bar-landscape
	.pc-sort-bar-desc
	{
		height: 70px;
	}

	#content-frame[data-slug=list]
	.pc-sort-bar-desc
	{
		height: 24px;
	}




	.pc-sort-handler {
		cursor: pointer;
		float: right;
		margin-top: -10px;
		margin-bottom: -10px;
		width: 40px;
		height: 110px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: hsl(0,0%,30%);
		background-position: center;
		background-image: url(/images/icon_handle.png);
		background-repeat:  no-repeat;
	}

    .device-sort {
        margin-left: 40px;
        min-width: 40px;
        height: 60px;
		background-image: unset !important;
		padding: 10px 12px;
    }

	/* 縦画像の場合
	--------------------------------------------------------------- */


	.pc-sort-bar-portrait
	{
		padding-top: 8px;
		height: 130px;
	}

		.pc-sort-bar-portrait
		.pc-sort-bar-image
		{
			width: 62px;
			height:110px;
		}

		.pc-sort-bar-portrait
		.pc-sort-bar-desc
		{
			height: 94px;
		}

		.pc-sort-bar-portrait
		.pc-sort-bar-deleter
		{
			margin-top: 40px;
		}

		.pc-sort-bar-portrait
		.pc-sort-handler
		{
			height: 129px;
		}



	/* リスト表示の場合
	--------------------------------------------------------------- */

	#content-frame[data-slug=list]
	.pc-sort-bar
	{
		padding-top: 2px;
		height: 50px;
	}

		#content-frame[data-slug=list]
		.pc-sort-bar-deleter
		{
			margin-top: 9px;
		}

		#content-frame[data-slug=list]
		.pc-sort-bar-image
		{
			width: 80px;
			height: 45px;
		}

		#content-frame[data-slug=list] .pc-sort-bar-square .pc-sort-bar-image {
			width: 45px;
		}

		#content-frame[data-slug=list]
		.pc-sort-bar-portrait
		.pc-sort-bar-image
		{
			width: 25px;
			height:45px;
		}

		#content-frame[data-slug=list]
		.pc-sort-bar-texts
		{
			padding-top: 5px;
			height: 40px;
		}

		#content-frame[data-slug=list]
		.pc-sort-bar-texts
		{
			width: calc(100% - 250px);
		}

		#content-frame[data-slug=list]
		.pc-sort-bar-name
		{
			font-size: 12px;
			line-height: 12px;
			margin-bottom: 5px;
		}


		#content-frame[data-slug=list]
		.pc-sort-bar-desc
		{
			font-size: 10px;
			line-height: 14px;
		}

		#content-frame[data-slug=list]
		.pc-sort-bar-portrait
		.pc-sort-bar-desc
		{
			height: 20px;
		}

		#content-frame[data-slug=list]
		.pc-sort-handler
		{
			margin-top: -2px;
			width: 30px;
			height: 48px;
			background-size: contain;
			background-position: 7px 5px;
		}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
タブメニュー
// playlist/select で使用
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.pc-tab-menu-bar
{
	width: 80%;
	margin-bottom: 20px;
	height: 30px;
}


	.pc-tab-menu
	{
		padding: 0 20px 0 0;
		float: left;
		cursor: pointer;
	}

	.pc-tab-menu > span
	{
		font-size: 13px;
		color: white;
		display: inline-block;
		padding-bottom: 5px;
	}
	.pc-tab-menu.selected > span
	{
		border-bottom: 2px solid hsl(158,90%,45%);
	}


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
「完了しました」テキスト
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.centered-simple-text
{
	font-size: 16px;
	line-height: 21px;
	color: hsl(0,0%,100%);
	font-weight: 300;
	margin: auto;
	text-align: center;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
戻る矢印ボタン
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.return-arrow
{
	display: none;
	width: 34px;
	height: 34px;
	border-radius: 17px;
	margin: auto;
	background-color: hsla(0,0%,0%,0.2);
	border: 1px solid hsla(0,0%,100%,0.15);
	text-align: center;
	margin-top: -6px;
	margin-bottom: 12px;
	cursor: pointer;
}

.return-arrow:hover
{
	color: white;
	background-color: hsla(0,0%,0%,0.7);
	border: 1px solid hsla(0,0%,100%,0.25);
}

	.return-arrow > img
	{
		display: inline-block;
		color: white;
		margin-top: 5px;
		width: 32px;
	}

	.return-arrow-L.return-arrow > img
	{
		margin-top: 1px;
		width: 20px;
		margin-left: -2px;
	}

	#return-margin:hover
	{
		clear: both;
		height: 30px;
	}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
右上選択タブ
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.pc-tab-selector
{
	float: right;
	width: 200px;
	height: 23px;
	overflow: hidden;
	border-radius: 3px;
	border: 1px solid hsla(0,0%,100%,1);
	background-color: hsla(0,0%,0%,0.2);
	margin-bottom: 10px;
	box-sizing: border-box;
}

	.pc-tab-selector-button
	{
		float: left;
		width: 50%;
		height: 23px;
		cursor: pointer;
	}

	.pc-tab-selector-button[data-active=yes]
	{
		background-color: white;
	}


	.pc-tab-selector-icon
	{
		float: left;
		width: 20px;
		height: 20px;
		margin-top: 0px;
		margin-left: 6px;
		display: block;
	}

		.pc-tab-selector-button[data-slug=box] .pc-tab-selector-icon
		{
			background-image: url(/pc/images/playlist/icon_box.svg);
		}

		.pc-tab-selector-button[data-slug=list] .pc-tab-selector-icon
		{
			background-image: url(/pc/images/playlist/icon_list.svg);
		}

		.pc-tab-selector-button[data-active=yes][data-slug=box] .pc-tab-selector-icon
		{
			background-image: url(/pc/images/playlist/icon_box_on.svg);
		}

		.pc-tab-selector-button[data-active=yes][data-slug=list] .pc-tab-selector-icon
		{
			background-image: url(/pc/images/playlist/icon_list_on.svg);
		}


	.pc-tab-selector-title
	{
		float: left;
		font-size: 10px;
		line-height: 10px;
		margin-left: 3px;
		margin-top: 4px;
		color: white;
	}

	.pc-tab-selector-button[data-active=yes] > .pc-tab-selector-title
	{
		color: hsl(0,0%,10%);
	}


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
下端固定ボタン
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#buttonbar
{
	position: fixed;
	display: none;
	width: 100%;
	background-color: hsl(158,5%,23%);
	left: 240px;
	display: none;
	z-index: 100000;
	border-top: 1px solid hsl(0,0%,27%);
}

#buttonbar-container
{
	width: 560px;
	margin-left: auto;
	margin-right: auto;
	padding: 12px 0 24px 0;
}


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
ボタン
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.pc-button-wrapper
{
	clear: both;
	margin-top: 20px;
}

.pc-button
{
	width: 270px;
	height: 40px;
	display: inline-block;
	background-color: #333;
	text-shadow: 1px 1px 3px hsl(0,0%,20%);
	text-align: center;
	cursor: pointer;
	text-align: center;
}
#pc-button-next[data-deactive=yes]
{
	cursor: not-allowed;
}

.pc-button[data-deactive=yes]
{
	opacity: 0.25;
}
	.pc-button-per
	{
		width: 48%;
	}

	.pc-button-100per
	{
		width: 100%;
	}

	.pc-button-center
	{
		display: block;
		margin-left: auto;
		margin-right: auto;
		clear: both;
	}

	.pc-button > span
	{
		margin-top: 10px;
		font-size: 14px;
		line-height: 14px;
		display: block;
	}

	.pc-button > i
	{
		width: 24px;
		height: 12px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		opacity: 0.7;
	}

.pc-list-aside-button
{
	width: 60px;
	height: 60px;
	border-radius: 50%;
	float: right;
	margin-top: -80px;
	margin-right: 10px;
	margin-bottom: 0px;
	background: hsla(0,0%,100%,0.5);
	box-shadow: 1px 1px 7px hsla(0,0%,0%,0.3);
	z-index: 10000000;
	cursor: pointer;
}

.pc-list-aside-button:hover {
	background-color: hsla(0,0%,100%,0.85);
}

#orientation_switch
{
	margin-right: -7px;
	background-color: hsla(0,0%,100%,0.5);
}
#orientation_switch:hover
{
	background-color: hsla(0,0%,100%,0.85);
}

.action-multidelete
{
	margin-right: 70px;
	padding: 10px;
}

.pc-upper-right-button
{
	float: right;
	margin-top: 12px;
	margin-right: 18px;
	width: 180px;
	height: 32px;
	border-radius: 2px;
}

.pc-upper-right-button-aside-header
{
	margin-top: -32px;
}

.pc-upper-right-button span
{
	font-size: 12.5px;
	margin-top: 7px;
}

.pc-button input
{
	display: none;
}

/* 大きなボックスボタン
--------------------------------------------------------------- */

.pc-icon-bar-button
{
	width: 400px;
	height: 64px;
	border: 1px solid hsla(0,0%,100%,0.1);
	background-color: hsla(0,0%,100%,0.3);
	margin: auto;
	clear: both;
	display: block;
	cursor: pointer;
}

	.pc-icon-bar-button > img
	{
		margin-top: 8px;
		width: 44px;
		height: 44px;
		display: block;
		float: left;
		margin-left: 16px;
		margin-right: 16px;
	}

	.pc-icon-bar-button > span
	{
		margin-top: 22px;
		font-size: 14px;
		line-height: 14px;
		display: block;
		float: left;
	}


	.pc-icon-bar-button > i
	{
		display: block;
		margin-top: 20px;
		margin-left: 10px;
		width: 10px;
		height: 20px;
		background-size: contain;
		float: right;
		margin-right: 10px;
		background-image: url(/pc/images/common/arrow_R.svg);
	}



/* カラー違いパターン
--------------------------------------------------------------- */

.pc-button-file
{
	color: #ddd;
	border: 1px solid hsl(0,0%,40%);
	background-color: hsl(0,0%,25%);
}
.pc-button-file:hover
{
	border: 1px solid hsl(0,0%,40%);
	background-color: hsl(0,0%,35%);
}

.pc-button-dark
{
	color: #ddd;
	border: 1px solid hsl(0,0%,35%);
	background-color: hsl(0,0%,23%);
}
.pc-button-dark:hover
{
	border: 1px solid hsl(0,0%,33%);
	background-color: hsl(0,0%,28%);
}


.pc-button-graphite
{
	color: #ddd;
	border: 1px solid hsla(0,0%,0%,0.05);
	background-color: hsla(0,0%,0%,0.23);
}
.pc-button-graphite:hover
{
	background-color: hsla(0,0%,0%,0.33);
}

.pc-button-light
{
	border: 1px solid hsla(0,0%,100%,0.1);
	background-color: hsla(0,0%,100%,0.3);
}
.pc-button-light:hover
{
	border: 1px solid hsla(0,0%,100%,0.15);
	background-color: hsla(0,0%,100%,0.35);
}

.pc-button-color
{
	border: 1px solid hsl(158,100%,35%);
	background-color: hsl(158,90%,35%);
}
.pc-button-color:hover
{
	border: 1px solid hsl(158,100%,38%);
	background-color: hsl(158,90%,38%);
}


.pc-button-red
{
	color: white;
	border: 1px solid hsl(0,80%,40%);
	background-color: hsl(0,100%,50%);
}
.pc-button-red:hover
{
	border: 1px solid hsl(0,80%,40%);
	background-color: hsl(0,100%,45%);
}
/* 矢印違いパターン
--------------------------------------------------------------- */

.pc-button-B > span
{
	margin-top: 10px;
}
.pc-button-B > i
{
	margin-top: 0px;
	background-size: cover;
	background-image: url(/pc/images/common/arrow_B.svg);
}

.pc-button-T > span
{
	margin-top: 13px;
}
.pc-button-T > i
{
	margin-top: -27px;
	background-size: cover;
	background-image: url(/pc/images/common/arrow_T.svg);
}


.pc-button-L > span,
.pc-button-R > span
{
	margin-top: 12px;
	width: 84%;
	text-align: center;
}

	.pc-button-L > span
	{
		float: right;
		margin-right: 4%;
	}

	.pc-button-R > span
	{
		float: left;
		margin-left: 4%;
	}

.pc-button-L > i,
.pc-button-R > i
{
	display: block;
	margin-top: 8px;
	margin-left: 10px;
	width: 10px;
	height: 20px;
	background-size: contain;
}

	.pc-button-L > i
	{
		float: left;
		margin-left: 10px;
		background-image: url(/pc/images/common/arrow_L.svg);
	}

	.pc-button-R > i
	{
		float: right;
		margin-right: 10px;
		background-image: url(/pc/images/common/arrow_R.svg);
	}


/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
list-box のヘッダー
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.content-frame-header
{
	font-size: 14px;
	line-height: 21px;
	margin-bottom: 12px;
	margin-left: 10px;
	margin-top: 15px;
}


.pc-leftline-title
{
	color: #fff;
	border-left: 4px solid hsl(0,0%,60%);
	padding: 2px 0 4px 8px;
	font-size: 13px;
	line-height: 1;
}



.pc-list-header
{
	margin: -12px;
	margin-bottom: 8px;
}

	.pc-list-boxes-header
	{
		color: hsl(0,0%,100%);
		border-left: 4px solid hsla(0,0%,100%,0.6);
		padding: 3px 0 4px 8px;

		font-size: 13px;
		line-height: 1;
		margin-bottom: 12px;
		margin-left: 0px;
	}


#content-frame
.pc-list-header
{
	margin: -12px;
	margin-bottom: 20px;
	padding: 12px;
}
	#content-frame
	.pc-list-boxes-header
	{
		font-size: 14px;
		line-height: 21px;
		margin-bottom: 12px;
		margin-left: 10px;
	}

#content-frame[data-bg=contents]
{
	background-image: url('/pc/images/bg/contents_header.png');
	background-size: 400px auto;
	background-position: 0px 0px;
	background-repeat: no-repeat;
}
#content-frame[data-bg=playlist]
{
	background-image: url('/pc/images/bg/playlist_header.png');
	background-size: 400px 200px;
	background-position: 0px -45px;
	background-repeat: no-repeat;
}

#content-frame[data-bg=distribution]
{
	background-image: url('/pc/images/bg/distribution_header.png');
	background-size: 400px auto;
	background-position: 0px -25px;
	background-repeat: no-repeat;
}

#content-frame[data-bg=account]
{
	background-image: url('/pc/images/bg/account_header.png');
	background-size: 400px auto;
	background-position: 0px -25px;
	background-repeat: no-repeat;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
アイテムの一覧表示に使用するリストボックス系のスタイル
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.pc-list-boxes-title
{
	color: #fff;
	width: 101%;
	font-size: 19px;
	line-height: 19px;
	font-weight: normal;
	text-align: center;
	margin-bottom: 20px;
	margin-left: -5px;
	margin-right: -5px;
	padding: 8px 0 9px 0;
	background: rgba(0,0,0, 0.6);
}

.pc-list-boxes-container,
.pc-list-boxes-container-swipeable
{
	clear: both;
	margin: -8px;
}

	.pc-list-box,
	.pc-list-box-16_9
	{
		background-color: hsl(0,0%,25%);
		box-sizing: border-box;
		border: 1px solid hsl(0,0%,28%);
		border-radius: 1px;
		padding: 6px;
		margin: 7px;
		box-shadow: 0px 1px 10px hsl(0,0%,0%);
		float: left;
		width: 190px;
		cursor: pointer;
		position: relative;
	}

	.pc-list-box-half
	{
		width: 46%;
		margin: 2%;
	}

	.pc-list-box:hover {
		background-color: hsl(0,0%,30%);
	}

	.pc-list-box-wide
	{
		width: 258px;
		margin: 6px;
	}

	.list-box-square .pc-list-box-image {
		height: 244px;
	}

	@media screen and (min-width:1366px)
	{
		.pc-list-box-wide
		{
			width: 242px;
		}

		.list-box-square .pc-list-box-image {
			height: 228px;
		}
	}


		.pc-list-box-image
		{
			width: 100%;
			height: 120px;
			background: no-repeat center center #000;
			background-size: cover;
			display: block;
		}

		.select-list-box-square {
			height: 176px !important;
		}

		.pc-list-box-16_9
		.pc-list-box-image
		{
			width: 100%;
			height: 100px;
		}

		.pc-list-box-image-square {
			background-size: contain;
		}

		@media screen and (max-width: 1078px)
		{
			.pc-list-box,
			.pc-list-box-16_9
			{
				margin: 3px;
				width: 184px;
			}

			.list-box-square .pc-list-box-image {
				height: 170px;
			}
			.pc-list-box-image-square {
				height: 121px;
			}
		}

		/* ウインドウサイズ最大の場合 */
		@media screen and (min-width:1366px)
		{
			.pc-list-box,
			.pc-list-box-16_9
			{
				margin: 6px;
			}
		}
			.pc-list-box-checkicon
			{
				width: 20px;
				height: 20px;
				background-image: url(/images/icon_nocheck.png);
				background-repeat: no-repeat;
				background-size: contain;
				background-color: transparent;
				margin-top: 4px;
				margin-right: 6px;
				float: right;
			}

			.pc-list-box.checked > .pc-list-box-image > .pc-list-box-checkicon
			{
				background-image: url(/images/icon_checked.png);
			}

		.pc-list-box-title
		{
			font-size: 12px;
			color: hsl(0,0%,90%);
			text-align: center;
			margin-top: 6px;
		}

		.pc-list-box-title._ellipse
		{
			line-height: 1.5;
			margin-bottom: -2px;
		}

		.pc-list-barbox-image
		{
			width: 100%;
			height: 120px;
			background: no-repeat center center #000;
			background-position-y: 0;
			background-size: cover;
		}

		.pc-list-box-deleter
		{
			width: 24px;
			height: 24px;
			display: block;
			float: left;
			margin-top: 50px;
			margin-left: 6px;
			margin-right: 8px;
		}

		.pc-list-box-orientation
		{
			width: 35px;
			height: 35px;
			display: block;
			float: right;
			background: #2a994d;
			border-radius: 50%;
			background-repeat: no-repeat;
			background-size: contain;
			margin-top: 42px;
			margin-right: 16px;
			z-index: 15;
		}

			.pc-list-box-orientation.landscape
			{
				background-image: url(/images/icon_landscape.png);
			}
			.pc-list-box-orientation.portrait
			{
				background-image: url(/images/icon_portrait.png);
			}

		.pc-terminal-box-orientation
		{
			width: 35px;
			height: 35px;
			display: block;
			float: right;
			background: #2a994d;
			border-radius: 50%;
			background-repeat: no-repeat;
			background-size: contain;
			margin-top: -80px;
			margin-right: 16px;
			z-index: 15;
		}

			.pc-terminal-box-orientation.landscape
			{
				background-image: url(/images/icon_landscape.png);
			}
			.pc-terminal-box-orientation.portrait
			{
				background-image: url(/images/icon_portrait.png);
			}

		.pc-list-textarea {
			margin-top: 10px;
			width: 100%;
			height: 70px;
			text-align: left;
		}

		#content-frame
		.pc-list-textarea {
			height: 50px;
		}

			.pc-list-textarea-mainarea {
				height: 38px;
			}

				.pc-list-textarea-main {
					font-size: 14px;
					line-height: 19px;
					margin-bottom: 0px;
				}
				.pc-list-textarea-sub {
					font-size: 12px;
					line-height: 16px;
					padding-bottom: 3px;
				}
				.pc-list-textarea-sub-height {
					height: 48px;
				}
			.pc-list-textarea-caption {
				font-size: 10.5px;
				line-height: 16px;
				font-weight: 200;
				color: hsl(0,0%,85%);
			}




	/* 縦16:9画像の場合
	--------------------------------------------------------------- */

	.pc-list-box-portrait
	{
		padding: 5px 5px 5px 5px;
		width: 133px;
		margin: 5px;
		box-sizing: border-box;
	}
		.pc-list-box-image-portrait
		{
			width: 121px;
			height: 215px;
			box-sizing: border-box;
		}

	@media screen and (min-width:1079px) {

		.pc-list-box-portrait
		{
			width: 152px;
			margin: 5px;
		}
		.pc-list-box-image-portrait
		{
			width: 140px;
			height: 249px;
		}
		.pc-list-box-image-square {
			height: 140px;
		}

	}
	/* ウインドウサイズ最大の場合 */
	@media screen and (min-width:1366px) {
		.pc-list-box-portrait
		{
			width: 133px;
			margin: 5px;
		}
		.pc-list-box-image-portrait
		{
			width: 121px;
			height: 215px;
		}
		.pc-list-box-image-square {
			height: 121px;
		}
	}
	/* 横16:9画像の場合
	--------------------------------------------------------------- */


	.pc-list-box-landscape
	{
		padding: 4px 4px 4px 4px;
	}
		.pc-list-box-image-landscape {
			height: 100px;
			background: no-repeat center center #000;
			background-position-y: 0;
			background-size: cover;
			display: block;
			object-fit: cover;
		}

/* #content-frame の内部にlist-box が入ってくる場合は、小さめに微調整
--------------------------------------------------------------- */

#content-frame .pc-list-boxes-container {
	margin: -10px;
}


.pc-list-boxes-container-swipeable {
	margin: -10px;
}


#content-frame .pc-list-box {
	width: 172px;
	box-shadow: 0 1px 8px hsl(0,0%,0%);
	border: 1px solid hsl(0,0%,35%);
	background-color: hsl(0,0%,30%);
	border-radius: 4px;
}

#content-frame .pc-list-box:hover {
	background-color: hsl(0,0%,35%);
}


#content-frame  .pc-list-box-wide > .pc-list-box-image {
	height: 120px;
}

#content-frame  .pc-list-box-wide > .pc-list-box-image.img-square {
	height: 250px;
}

#content-frame  .pc-list-box-image {
	height: auto;
}

	#content-frame  .pc-list-box-wide {
		width: 264px;
		margin: 6px;
	}

	#content-frame
	.pc-list-box-half
	{
		width: 48%;
		margin: 1%;

		box-sizing: border-box;
		padding: 20px;

		box-shadow: none;
		background-color: hsla(0,0%,40%,0.4);

		background-image: url(/pc/images/common/arrow_R.svg);
		background-repeat: no-repeat;
		background-position: right 10px center;
		background-size: 10px;
	}

	@media screen and (min-width:1079px) {
		#content-frame  .pc-list-box-wide {
			width: 252px;
		}
		#content-frame .pc-list-box-wide > .pc-list-box-image.img-square {
			width: 240px;
			height: 240px;
		}
	}
	@media screen and (min-width:1366px) {
		#content-frame .pc-list-box-wide
		{
			width: 236px;
		}
		#content-frame .pc-list-box-wide > .pc-list-box-image.img-square {
			width: 224px;
			height: 224px;
		}
	}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
not found
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.not-found-container
{
	padding: 20px;
	background-color: hsla(0,0%,100%,0.05);
	font-size: 14px;
	text-align: center;
	line-height: 1.5;
	color: hsl(0,0%,80%);
	border-radius: 12px;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
アラートウインドウ
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

#pc-alert,
#pc-confirm
{
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	width: 100vw;
	background-color: hsla(0,0%,0%,0.3);
	z-index: 10000000000000000;
}

#pc-processing-overlay
{
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: hsla(158,15%,15%,0.7);
	z-index: 9999999999999999;
}

	#pc-alert-window,
	#pc-confirm-window,
	#pc-processing-window
	{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 400px;
		height: auto;
		background-color: hsl(0,0%,18%);
		border-radius: 3px;
		border: 1px solid hsl(0,0%,45%);
		box-shadow: 2px 8px 16px hsl(0,0%,0%);
		padding: 21px 20px 23px 20px;
	}

	#pc-confirm-window.pc-confirm-download {
		width: 440px;
	}

	#pc-confirm-window.pc-confirm-download  .pc-button {
		width: 172px;
	}

	#pc-confirm-window.pc-confirm-window--redirect {
		width: 600px;
	}

.pc-confirm-window--redirect  #pc-confirm-massage {
		padding: 50px 0 45px;
	}

.pc-confirm-window--redirect .btn-close-modal {
		position: absolute;
		height: 30px;
		width: 30px;
		padding: 5px;
		border: none;
		background: transparent;
		top: 15px;
		right: 15px;
		cursor: pointer;
	}

	#pc-processing-window
	{
		background-color: black;
		border: 1px solid hsl(0,0%,30%);
	}
		#pc-alert-message,
		#pc-confirm-massage,
		#pc-processing-message,
		.alert_vld_header,
		.alert_vld_message
		{
			font-size: 15px;
			line-height: 23px;
			color: hsl(0,0%,100%);
			text-align: center;
			padding-bottom: 20px;
		}

			.pc-confirm-name
			{
				font-size: 17px;
				margin-left: 3px;
				margin-right: 3px;
				display: inline-block;
			}

		#pc-processing-image
		{
			display: block;
			width: 40px;
			height: 40px;
			margin-top: 2px;
			margin-left: auto;
			margin-right: auto;
		}

		#pc-alert-window-button
		{
			display: block;
			margin: auto;
		}

		/* バリデーションメッセージ用
		--------------------------------------------------------------- */

		.alert_vld_header
		{
			margin-top: -12px;
			padding-bottom: 16px;
		}

		.alert_vld_message
		{
			margin-left: 30px;
			list-style-type: disc;
			padding-bottom: 30px;
			text-align: left;
			font-size: 14px;
			line-height: 19px;
		}

		/* トグルスイッチ（コンテンツ配信、アカウント管理で使用）
		--------------------------------------------------------------- */
		.btn_toggle {
			position: absolute;
			margin-left: -9999px;
			visibility: hidden;
		}
		.btn_toggle + label {
			display: block;
			position: relative;
			cursor: pointer;
			outline: none;
			user-select: none;
			-webkit-tap-highlight-color:rgba(0,0,0,0);
		}

		.btn_toggle + label {
		  width: 48px;
		  height: 30px;
		  border-radius: 30px;
		  border-radius: 8vw;
		}

		.btn_toggle + label:before,
		.btn_toggle + label:after {
		  display: block;
		  position: absolute;
		  top: 1px;
		  left: 0;
		  bottom: 1px;
		  content: "";
		}

		.btn_toggle + label:before {
		  right: 1px;
		  border-radius: 58px;
		  border: 1px solid hsla(0,0%,100%, 0.45);
		  transition: background 0.4s;
		}

		.btn_toggle + label:after {
		  width: 28px;
		  background-color: #fff;
		  border-radius: 100%;
		  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
		  transition: margin 0.4s;
		}

		.btn_toggle:checked + label::before {
		  background-color: #4bd963;
		  border-color: #4bd963;
		}

		.btn_toggle:checked + label::after {
		  margin-left: 20px;
		}



/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
左右センター配置の空白コンテナ
// 入力フィールドや編集ページなどで使用
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.pc-centered-container
{
	clear: both;
	width: 58%;
	margin-left: auto;
	margin-right: auto;
}

.pc-centered-container-per
{
	clear: both;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
センターに配置する大きめのサムネイル
// 入力フォーム画面や内容確認画面で使用
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.pc-centered-thumbnail-title-tag
{
	text-align: center;
	font-size: 11px;
	color: hsl(0,0%,100%);
	font-weight: 300;
	margin-bottom: 6px;
}

.pc-centered-thumbnail-title-larger
{
	font-size: 18px;
	line-height: 1;
	margin-bottom: 12px;
	text-align: center;
}
.pc-centered-thumbnail-title
{
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 12px;
	text-align: center;
}

.pc-centered-thumbnail-title-bottom
{
	font-size: 13px;
	line-height: 1;
	margin-top: -10px;
	padding: 7px 0 9px 7px;
	width: 100%;
	box-sizing: border-box;
	background-color: hsl(0,0%,18%);
	text-align: left;
}

.pc-centered-thumbnail-title-border
{
	padding-bottom: 7px;
	border-bottom: 1px solid hsl(0,0%,40%);
}


.pc-centered-thumbnail-tag
{
	margin-bottom: 9px;
}

.pc-centered-thumbnail
{
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	border-radius: 1px;
	margin-bottom: 10px;
	background-position: center center;
	background-size: cover;
	object-fit: cover;
}

.pc-centered-thumbnail-portrait,
.pc-centered-thumbnail-portrait-container
{
	margin-top: 7px;
	width: 50%;
}




.pc-centered-thumbnail-16_9
{
	overflow: hidden;
}
	.pc-centered-thumbnail > img
	{
		display: block;
	}

	.pl_new
	.pc-centered-thumbnail-16_9
	{
		border: 3px solid hsla(158,100%,50%,0.5);
		box-sizing: border-box;
	}

	.pl_now
	.pc-centered-thumbnail-16_9
	{
		border: 3px solid hsla(158,0%,80%,0.3);
		box-sizing: border-box;
	}

	.pc-centered-thumbnail > i
	{
		float: static;
		margin-top: 0;
		margin-right: 0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 8px;
	}


		.pc-centered-thumbnail-orientation
		{
			width: 35px;
			height: 35px;
			display: block;
			float: right;
			background: #2a994d;
			border-radius: 50%;
			background-repeat: no-repeat;
			background-size: contain;
			margin-top: -80px;
			margin-right: 16px;
			z-index: 15;
		}

			.pc-centered-thumbnail-orientation.landscape {
				background-image: url(/images/icon_landscape.png);
			}
			.pc-centered-thumbnail-orientation.portrait {
				background-image: url(/images/icon_portrait.png);
			}

	.pc-centered-thumbnail-texts
	{
		width: 400px;
		font-size: 13px;
		line-height: 18px;
		margin-left: auto;
		margin-right: auto;
	}

		.pc-centered-thumbnail-texts >
		.dist_list_summary
		{
			height: auto;
			max-height: 80px;
			margin-bottom: 6px;
		}

		.pc-centered-thumbnail-texts b
		{
			font-size: 15px;
			line-height: 1;
			font-weight: 400;
			padding-top: 2px;
			padding-bottom: 5px;
			display: inline-block;
		}

			.pc-centered-thumbnail-texts blockquote
			{
				font-size: 11.5px;
				line-height: 17px;
				color: hsl(0,0%,90%);
				float: right;
				display: block;
				font-weight: 300;
			}
			.pc-centered-thumbnail-texts blockquote li
			{
				padding-left: 10px;
				display: inline-block;
			}

	/* --------------------------------------------------
	画像の上に乗っける場合は、読みにくいので大きめに */

	.pc-centered-thumbnail-texts-float
	{
		margin-top: 10%;
		margin-left: 10%;
		width: 70%;
		height: 120px;
		font-size: 15px;
		line-height: 21px;
		box-sizing: border-box;
		text-shadow: 1px 1px 4px hsl(0,0%,0%);
	}

		.pc-centered-thumbnail-texts-float >
		.dist_list_summary
		{
			height: 40px;
			margin-bottom: 6px;
		}


		.pc-centered-thumbnail-texts-float blockquote
		{
			font-size: 13px;
			line-height: 17px;
			color: white;
			float: right;
			display: block;

		}



/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
横罫のテーブル式リスト
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

.pc-rows-list
{
	width: 100%;
}

	.pc-rows-list-row
	{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding-top: 8px;
		padding-bottom: 9px;
		padding-left: 4px;
		padding-right: 8px;
		box-sizing: border-box;
		border-bottom: 1px solid hsl(0,0%,35.333%);
		background-color: hsla(0,0%,0%,0.175);
	}
	.pc-rows-list-row:first-child {
		border-top: 1px solid hsl(0,0%,35.333%);
	}

	.pc-rows-list-row.arrow_right {
		position: relative;
		background-image: url(/pc/images/common/arrow_R.svg);
		background-repeat: no-repeat;
		background-position: right 10px center;
		background-size: 10px;
	}


		.pc-rows-list-row p
		{
			font-size: 14.5px;
			line-height: 1;
			padding-top: 10px;
		}


	/* 内容確認 バージョン */

	/* accounts バージョン */
	.pc-rows-list-accounts
	.pc-rows-list-row
	{
		display: list-item;
		justify-content: normal;
		padding-top: 12px;
		padding-bottom: 14px;
	}

	.pc-rows-list-accounts
	.pc-rows-list-row.arrow_right:hover
	{
		cursor: pointer;
		background-color: hsl(0,0%,23%);
	}

	.account_list_ttl {
		position: relative;
		height: 26px;
	}

	.account_list_ttl > p {
		color: hsl(0,0%,70%);
		font-weight: 300;
		font-size: 12.5px;
		display: inline-block;
		box-sizing: border-box;
		text-align: left;
	}

		.account_name_ttl {
			margin-left: 55px;
			width: 40%;
		}

		.pc-rows-list-accounts
		.pc-rows-list-row span
		{
			font-size: 14.5px;
			line-height: 17px;
			display: inline-block;
			box-sizing: border-box;
			text-align: left;
		}
			.pc-rows-list-accounts
			.pc-rows-list-row
			.account_no {
				padding-left: 10px;
				width: 50px;
				font-weight: 200;
				font-size: 13px;
				color: hsl(0,0%,80%);
			}

			.pc-rows-list-accounts
			.pc-rows-list-row
			.account_name {
				width: 40%;
				text-align: left;
			}

			.pc-rows-list-accounts
			.pc-rows-list-row
			.account_id {
				width: 20%;
			}

	/* toggle なしバージョン */
	.pc-rows-list-confirm
	.pc-rows-list-row
	{
		padding-top: 3px;
		padding-bottom: 6px;
		border-style: dotted;
		background-color: transparent;
	}

		.pc-rows-list-confirm
		.pc-rows-list-row p
		{
			font-size: 14.5px;
			line-height: 1;
			padding-top: 10px;
		}

	/* toggle なしバージョン */
	.pc-rows-list-simple
	.pc-rows-list-row
	{
		padding-top: 6px;
		padding-bottom: 9px;
	}

		.pc-rows-list-simple
		.pc-rows-list-row p
		{
			font-size: 14.5px;
			line-height: 14.5px;
			padding-top: 10px;
		}

	/* 画像リストバージョン */
	.pc-rows-list-imagetype
	.pc-rows-list-row
	{
		justify-content: normal;
		padding-left: 10px;
		padding-top: 12px;
		padding-bottom: 13px;
	}

		.pc-rows-list-imagetype
		.pc-rows-list-row
		img
		{
			width: 160px;
			height: 90px;
		}


		.pc-rows-list-imagetype
		.pc-rows-list-row
		p
		{
			float: left;
			margin-left: 20px;
			padding-top: 0px;
		}
		.pc-rows-list-imagetype
		.pc-rows-list-row
		p b
		{
			font-size: 15px;
			line-height: 1;
			font-weight: 400;
			margin-bottom: 8px;
			display: block;
		}
		.pc-rows-list-imagetype
		.pc-rows-list-row
		p small
		{
			font-size: 13px;
			line-height: 1.65;
			font-weight: 200;
			padding-top: 3px;
			height: 70px;
			display: block;
		}

		/* 縦型画像リストバージョン
		- - - - - - - - - - - - - - - - - - - */

		.pc-rows-list-portraittype
		.pc-rows-list-row
		img
		{
			width: 73px;
			height: 130px;
		}
		.pc-rows-list-portraittype
		.pc-rows-list-row
		p small
		{
			height: 120px;
		}



/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
その他
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* - - - - - -
tpl_edit.html
- - - - - - */

.tpl_list_preview{
	margin-bottom: 20px;
}
.tpl_list_preview::after{
	content: "";
	clear: both;
	display: block;
}

.canvas_area {
	margin-top: 26px;
	background-color: hsl(0,0%,17%);
	padding: 10px;
	margin-bottom: -30px;
	border-radius: 6px 6px 0 0;
	display: none;
}

.canvas_area canvas
{
	width: 100%;
	border: 1px solid hsl(0,0%,25%);
}

.canvas_area.portrait canvas
{
	width: 55%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.canvas_area.portrait img
{
	width: 55%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#preview-inputs img
{
	width: 50%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4px;
	margin-bottom: 4px;
	clear: both;
}

/* - - - - - -
/ 端末名を変更する
/ account/change.html
/ - - - - - - */

.ac_termname .terminal_list {
	padding: 0 10px;
}

.ac_termname .terminal_list_item {
	padding: 15px 0;
}

.ac_termname .terminal_list_item:first-child {
	border-top: 1px solid hsl(0,0%,35.333%);
}

.ac_termname .terminal_list_item:not(:last-child) {
	margin-bottom: 0;
}

.termName_serial {
	color: #ccc;
	display: block;
	margin-top: 5px;
	font-size: 14px;
}

.ac_termname .disp_termName {
	width: auto;
}


.text_disp_termName .termName_ttl
{
	font-size: 15px;
	line-height: 1;
	padding-right: 12px;
	display: inline-block;
}

.edit_termName {
	width: 100%;
	position: relative;
	display: none;
}

.disp_termName .icon_disp_termName::before {
	font-family: "Font Awesome 5 Free";
	content: '\f304';
	font-weight: 900;
	cursor: pointer;
}

.edit_termName span {
	display: inline-block;
	position: absolute;
	top: 31%;
	right: 0;
	transform: translateY(-50%);
	padding: 0.5em;
	color: #fff;
	cursor: pointer;
	border: 1px solid hsl(158,100%,35%);
	background-color: hsl(158,90%,35%);
	line-height: 18px;
	text-shadow: 1px 1px 3px hsl(0,0%,20%);
	width: 65px;
	text-align: left;
}

span.icon_edit_termName::after {
	content: '';
	position: absolute;
	background-image: url(/pc/images/common/arrow_R.svg);
	background-repeat: no-repeat;
	width: 10px;
	height: 20px;
	right: 4px;
}

.terminal_list_item {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 5px;
	border-bottom: 1px solid hsl(0,0%,35.333%);
}

.ac_termname .terminal_change_item:first-child {
	border-top: 1px solid hsla(0,0%,100%,0.4);
}
.terminal_change_item {
	border-bottom: 1px solid hsla(0,0%,100%,0.4);
}


.terminal_list_change_item
.disp_termName
{
	margin-top: -6px;
	margin-bottom: 6px;
	margin-left: 5px;
}

	.terminal_list_change_item
	.text_disp_termName
	{
		font-size: 15px;
		line-height: 1;
	}
	.terminal_list_change_item
	.termName_serial
	{
		font-size: 13px;
		line-height: 1;
		margin-top: 6px;
		color: hsl(0,0%,70%);
	}


/* - - - - - -
/ 端末配信設定一覧
/ distribution/terminal_list.html
/ - - - - - - */
.pc-terminal-list-box ul {
	clear: left;
	line-height: 1.5;
	padding: 5px 10px 7px 10px ;
}

	.pc-terminal-list-box li {
		margin-bottom: 10px;
	}
		.pc-terminal-list-box li b {
			font-size: 10px;
			line-height: 1;
			margin-bottom: 3px;
			font-weight: 300;
			display: block;
		}
		.pc-terminal-list-box li span {
			font-size: 17px;
		}

		.pc-terminal-list-box small {
			font-size: 12px;
			line-height: 1;
			margin-top: 16px;
			margin-right: 10px;
			font-weight: 300;
			color: hsl(0,0%,90%);
			display: block;
		}

/* - - - - - -
/ 端末配信設定一覧
/ distribution/terminal_list.html
/ - - - - - - */

#preview_images_container
{
	margin-bottom: 16px;
}

#preview_images_container::after
{
	content: "";
	clear: both;
	display: block;
}



/* - - - - - -
/ 利用規約
/ extra/terms.html
/ - - - - - - */
.terms_body main h3
{
	font-size: 15px;
	line-height: 1.5;
	font-weight: 500;
	margin-bottom: 12px;
}

.terms_body main div
{
	font-size: 14px;
	line-height: 1.65;
	font-weight: 300;
	margin-bottom: 40px;
	padding-left: 4px;
	box-sizing: border-box;
}

.pu_list p {
	margin: 1em 0;
	line-height: 1.5;
	font-size: 14px;
}

.pu_list_content ol {
	padding-left: 20px;
}

.pu_list_content ol li {
	list-style: decimal;
	line-height: 1.5;
	font-size: 14px;
}

.pu_list_content ol ol {
	padding-left: 1em;
	margin: 0;
}

.pu_list_content ol ol li {
	text-indent: -1.5em;
	list-style-type: none;
	list-style-position: inside;
	counter-increment: cnt;
}

.pu_list_content ol ol li:before {
	display: marker;
	content: "(" counter(cnt) ") ";
}

.pu_list_content table {
	width: 100%;
	margin: .5em 0;
}

.pu_list_content table td {
	border: 1px solid #FFF;
	font-size: 13px;
	line-height: 1.35;
	padding: 5px 6px 6px 6px;
}

/* - - - - - -
コンテンツを配信 トップページ
distribution/index.html
- - - - - - */
.pc-dist-link-header{
	line-height: 21px;
	font-size: 20px;
	font-weight: 500;
	margin: auto;
	margin-bottom: 10px;
	width: 400px;
}
#pc-dist-link-bottom-container {
	text-align: center;
}

/* - - - - - -
distribution/terminal_info.html
- - - - - - */

.pc-centered-thumbnail .dist_list_plName,
.pc-centered-thumbnail .dist_list_summary
{
	/* 影が途切れたようになってしまうので padding で調整 */
	padding-right: 5px;
	padding-bottom: 5px;
}

.upload-container .upload-area {
	width: 100%;
	min-height: 200px;
	border: 2px dashed lightgray;
	border-radius: 3px;
	margin: 0 auto;
	padding: 1em 1.5em;
	text-align: center;
	overflow: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.upload-container .upload-area:hover {
	cursor: pointer;
}

.upload-container .upload-area h1 {
	text-align: center;
	font-weight: normal;
	line-height: 40px;
}

.upload-container #file {
	display: none;
}

.upload-container .select-file {
	display: inline-block;
	border: 1px solid #0fb7ba;
	padding: 4px 8px;
	box-sizing: border-box;
	border-radius: 10px;
}

.pc-multiple-upload {
	width: 60px;
	height: 60px;
	right: 0;
	float: right;
	background: hsla(0,0%,100%,0.5);
	border-radius: 100%;
	cursor: pointer;
	text-align: center;
	box-sizing: border-box;
	position: relative;
}

.pc-multiple-upload:hover {
	background-color: hsla(0,0%,100%,0.85);
}

.pc-multiple-upload span {
	color: #000;
	font-size: 10px;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 12px;
}

/* - - - - - -
contents/prepared_select.html
- - - - - - */

.preview-template {
	opacity: 0;
}

.preview-template.landscape,
.preview-template.square,
.preview-template.portrait{
	opacity: 1;
}

.preview-template .preview-template__img {
	background: #000000;
	position: relative;
}

.preview-template .preview-template__img img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
}

.preview-template.landscape.img-same-ratio .preview-template__img img {
	width: 100%;
	max-height: 100%;
	height: auto;
}

.preview-template.landscape.img-smaller-ratio .preview-template__img img {
	max-width: 100%;
	height: 100%;
	width: auto;
}

.preview-template.portrait.img-smaller-ratio .preview-template__img img {
	width: 100%;
	max-height: 100%;
	height: auto;
}

.preview-template.portrait.img-same-ratio .preview-template__img img {
	max-height: 100%;
	width: 100%;
}

/*
==============================================
distribution add new features (2020/01)
==============================================
*/

/* - - - - - -
GLOBAL STYLE
- - - - - -
- - - - - - */

.header-schedule .header-middlebar {
	padding-left: 90px;
}

/*
===============================
Overwite style of Datepicker
===============================
*/

.datepicker-container {
	width: 370px !important;
}

.datepicker-panel>ul:first-child {
	display: flex;
	justify-content: center;
}

.datepicker-panel > ul:first-child > li {
	font-size: 16px;
}

.datepicker-panel > ul > li {
	color: hsla(0, 0%, 43%, 1);
}

.datepicker-container.datepicker-dropdown {
	background: hsla(0, 0%, 100%, 1);
	box-shadow: 5px 10px 15px hsla(0, 0%, 0%, 0.1);
	border: 1px solid hsla(0, 0%, 94%, 1);
	z-index: 100001 !important;
}

.datepicker-container .datepicker-panel {
	padding: 20px;
}

.datepicker-panel > ul[data-view="week"] {
	border-bottom: 1px solid hsla(0, 0%, 80%, 1);
}

.datepicker-panel > ul[data-view="week"] li {
	font-size: 16px;
	font-weight: bold;
}

.datepicker-container .datepicker-panel>ul[data-view="week"]>li,
.datepicker-container .datepicker-panel>ul[data-view="days"]>li {
	width: 35px;
    height: 35px;
    font-size: 15px;
    line-height: 25px;
    margin: 5px 6.5px;
	padding: 4px;
	font-family: 'Helvetica';
}

.datepicker-container .datepicker-panel>ul>li.highlighted {
    background-color: #e5f2ff;
    border-radius: 100px;
}

.popover.clockpicker-popover {
	z-index: 100001;
}

/*
===============================
Style for Switch
===============================
*/

.pc-switch {
	position: relative;
	display: inline-block;
	width: 47px;
	height: 28px;
  }

  .pc-switch input {
	opacity: 0;
	width: 0;
	height: 0;
  }

  .pc-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #CCCCCC;
	-webkit-transition: .4s;
	transition: .4s;
  }

  .pc-slider:before {
	position: absolute;
	content: "";
	width: 28px;
	height: 28px;
	background: #fff;
	border-radius: 90px;
	box-shadow: 0 5px 10px #00000048;
	left: 0;
	bottom: 0;
	-webkit-transition: .4s;
	transition: .4s;
  }

.pc-switch input[disabled="disabled"]+.pc-slider {
	cursor: not-allowed;
}
.pc-switch input[disabled="disabled"] + .pc-slider:before {
	background: rgba(0, 0, 0, 0.1);
}
.pc-switch input[disabled="disabled"]:checked + .pc-slider:before {
	background: #ffffff;
}

  input:checked + .pc-slider {
	background-color: #4CD963;
  }

  input:focus + .pc-slider {
	box-shadow: 0 0 1px #4CD963;
  }

  input:checked + .pc-slider:before {
	-webkit-transform: translateX(19px);
	-ms-transform: translateX(19px);
	transform: translateX(19px);
  }

  /* Rounded sliders */
  .pc-slider.round {
	border-radius: 15px;
  }

  .pc-slider.round:before {
	border-radius: 50%;
  }

/*
================================
Style for checkbox button
================================
*/
._checkbox_label {
		width: 100%;
		box-sizing: border-box;
		border-bottom: 1px solid #fafafa;
		padding-left: 30px;
		padding-top: 10px;
		padding-bottom: 11px;
		font-size: 16px;
		font-weight: 500;
		margin-bottom: 0;
		display: flex;
		align-items: center;
		cursor: pointer;
  }

.repeat-checkbox.disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

	._checkbox-label {
		cursor: pointer;
	}

	._checkbox-label > * {
		vertical-align: middle;
	}

  input[type=checkbox] {
		opacity: 0;
		display: none;
  }

  ._checkbox_label:hover {
		background-color: #f2f2f2;
  }

  ._checkbox_label > input[type=checkbox] {
		opacity: 0;
  }

  ._checkbox {
		width: 20px;
		height: 20px;
		display: inline-block;
		text-align: center;
		background: hsla(0, 0%, 100%, 1);
		border: 1px solid hsla(0, 0%, 80%, 1);
  }
  ._checkbox--cycle {
		border-radius: 50%;
		background-color: #ADADAD;
		border-color: #ADADAD;
		width: 26px;
		height: 26px;
  }

  input[type=checkbox] + ._checkbox > svg {
		opacity: 0;
		width: 13px;
    margin: 3px;
	  display: inline-block;
  }

  input[type=checkbox] + ._checkbox--cycle > svg {
		opacity: 0;
		width: 16px;
    margin: 4px 2px 2px;
  }

  input[type=checkbox]:checked + ._checkbox > svg {
		opacity: 1;
  }
  input[type=checkbox]:checked + ._checkbox {
		background-color: #009961;
		border-color: #009961;
  }
  input[type=checkbox]:checked + ._checkbox--cycle {
		background-color: #009961;
		border-color: #009961;
  }
  ._checkbox + ._checkbox-title {
		font-size: 14px;
		margin-left: 10px;
  }
  ._checkbox--cycle + ._checkbox-title {
		font-size: 12px;
		line-height: 17px;
		margin-left: 7px;
  }

  ._checkbox-all--list ._checkbox {
	  border: none;
  }

  ._checkbox-all--list ._checkbox--cycle {
	width: 50px;
	height: 50px;
  }

  ._checkbox-all--list .icon-checked {
	  display: none;
  }

  ._checkbox-all--list input[type=checkbox]:checked + ._checkbox--cycle .icon-checked {
	display: block;
  }

  ._checkbox-all--list input[type=checkbox]:checked + ._checkbox--cycle .icon-check {
	display: none;
  }

/* - - - - - -
distribution/device_select.html
- - - - - - */
.content-frame-header-device {
	font-size: 14px;
    line-height: 20px;
    color: #fff;
    border-left: 4px solid hsl(0,0%,60%);
    padding: 2px 0 4px 8px;
    margin: 15px 10px 20px 10px;
}
.content-frame-header-device ._checkbox-label {
	float: right;
}
.content-frame-header-device ._checkbox-all--list {
	margin-top: -17px;
	margin-right: 0;
}
.devices {
	display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 9px;
}

	.device {
		flex-basis: calc(50% - 10px);
		background: transparent radial-gradient(closest-side at 0% 0%, hsla(0, 0%, 29%, 0) 0%, hsla(0, 0%, 33%, .3) 100%) 0% 0% no-repeat padding-box;
		border: 1px solid hsla(0, 0%, 43%, 1);
		border-radius: 4px;
		margin-bottom: 20px;
		position: relative;
	}

	.device.selected {
		border: 2px solid #14B87C;
	}

	.device > a {
		cursor: pointer;
	}

	.device > a,
	.device > .device__content {
		display: flex;
		/*align-items: center;*/
		padding: 23px 13px 26px 29px;
		justify-content: space-between;
		z-index: 1;
	}

	.device > a > div:first-child,
	.device > .device__content > div:first-child {
		flex: 1;
		padding-right: 5px;
	}

	.device .device__checkbox {
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 2;
	}

	.device small {
		font-size: 10px;
		line-height: 24px;
	}

	.device__title {
		font-size: 18px;
		line-height: 24px;
	}

	.device__title--large {
		font-weight: 500;
	}
	.device__title--small {
		margin-bottom: 13px;
	}

	.device__date {
		font-size: 12px;
		line-height: 21px;
	}

	.device__status {
		font-size: 14px;
		display: table;
	}

	.device__status > * {
		display: table-cell;
		vertical-align: middle;
	}

	.device__status img {
		max-height: 20px;
		max-width: 20px;
		min-width: 18px;
		margin-right: 5px;
	}

.device__status--error {
	cursor: pointer;
}

.device__status--error .text-error {
		text-decoration: underline;
	}

	.device > .device__content .icon-device--landscape,
	.device > .device__content .icon-device--portrait{
		margin-right: 0;
	}

	.icon-device--landscape,
	.icon-device--portrait {
		width: 35px !important;
		height: 35px;
		margin-right: 17px;
	}

	.device i {
		display: block;
		width: 16px;
		height: 16px;
		float: right;
		margin-top: 10px;
		background-image: url(/pc/images/common/menu_direction_R.svg);
		background-size: cover;
	}

.data-button-next--red {
	border-color: hsla(354, 70%, 53%, 1);
	background-color: hsla(354, 70%, 53%, 1);
}

	.data-button-next--red:hover {
		border-color: hsla(354, 70%, 53%, 0.9);
		background-color: hsla(354, 70%, 53%, 0.9);
	}


/* - - - - - -
distribution/device_info.html
- - - - - - */

.device-info-list .tpl-thumbnail .tpl_img {
	max-height: 320px;
}

.device-detail-content .pc-leftline-title {
	font-size: 18px;
	line-height: 25px;
	margin-bottom: 7px;
}
.device-detail-content__title {
	font-size: 16px;
	line-height: 21px;
	margin-bottom: 12px;
	font-weight: 500;
	text-align: center;
}
.device-info-list__item {
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	background: rgba(0,0,0,0.2);
	border-top: 1px solid hsl(0,0%,35%);
	border-bottom: 1px solid hsl(0,0%,35%);
}

	.device-info-list__item--thumb {
		justify-content: flex-start;
	}

	.device-info-list__item .item-thumb {
		padding: 0 10px;
		display: flex;
		align-items: center;
	}

	.device-info-list__item--thumb .item-thumb {
		min-height: 120px;
		width: 170px;
	}

	.device-info-list__item--thumb .item-content {
		width: calc(100% - 170px);
	}

	.device-info-list__item .item-content {
		padding: 15px 10px;
	}

.tpl-thumbnail {
	position: relative;
}
	.tpl-thumbnail .icon-device--landscape,
	.tpl-thumbnail .icon-device--portrait {
		position: absolute;
		top: 50%;
		right: 8px;
		transform: translateY(-50%);
	}
/* - - - - - -
distribution/delivery_schedule.html
- - - - - - */

.schedule-setting-cnt{
	min-width: 560px;
}

/* #content*/

.content-schedule {
	padding-left: 90px;
}


.content-schedule .schedule-note {
	text-align: center;
}
.pc-content-header {
	position: relative;
}

.pc-content-header ._checkbox-all {
	position: absolute;
	top: 5px;
	left: 0;
}

@media screen and (min-width: 600px) and (max-width: 1078px) {
	#content.content-schedule{
		width: 100%;
	}
}

@media screen and (min-width: 1079px) {
	#content.content-schedule{
		width: 100%;
	}
}

@media screen and (min-width:1366px) {
	#content.content-schedule{
		width: 100%;
	}
}
.header-middlebar-btn-group {
	position: absolute;
	top: 5px;
	left: calc(50% + 32px);
	transform: translateX(-50%);
	min-width: 482px;
}

.header-middlebar-btn-group {
	display: flex;
	justify-content: center;
}

.header-middlebar-btn-group button:focus,
.header-middlebar-btn-group button:active {
	outline: none;
}

.header-middlebar-btn-group .button-cycle {
	margin: 0 5px;
}

.header-middlebar-btn-group .pc-datepicker {
	margin-bottom: 0;
	flex-direction: column;
}

.header-middlebar-btn-group .pc-datepicker > input {
	background: transparent;
	text-align: center;
	padding: 0;
	height: 0;
	opacity: 0;
}

.header-middlebar-btn-group .pc-datepicker .datepicker-schedule {
	color: #FAFAFA;
	font-size: 24px;
	line-height: 21px;
	text-align: center;
	width: 230px;
	padding: 7px 10px;
	margin: 0 auto;
}

.content-header-schedule {
	border-left: 4px solid #14B87C;
    font-size: 16px;
    line-height: 24px;
	padding: 0 8px;
	margin: 0 0 10px 0;
}
.content-header-schedule.playlist-name,
.content-header-schedule.device-name {
	border-left: 0;
	padding-left: 0;
}
.content-header-schedule.playlist-name > span,
.content-header-schedule.device-name > span {
	display: inline-block;
}
.content-header-schedule.playlist-name > span > *,
.content-header-schedule.device-name > span > * {
	vertical-align: middle;
}
.content-header-schedule.playlist-name img,
.content-header-schedule.device-name img {
	max-width: 30px;
	margin-right: 8px;
}
.content-header-schedule--grey {
	border-color: #A6AAA8;
}

.content-header-schedule ._checkbox-label {
	float: right;
	margin-right: 8%;
}

.playlists-container .playlists {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.playlists {
	position: relative;
}
	.playlist {
		width: 242px;
		margin: 0 12px 10px 0;
		box-shadow: 0 1px 10px #000000;
		border: 1px solid #595959;
		transition: all 0.2s;
		position: relative;
		z-index: 1;
	}
	.playlist.selected {
		border: 2px solid #14B87C;
	}
	.playlist > a {
		padding: 7px;
		cursor: pointer;
		background: #4D4D4D;
	}

	.playlist > a:hover {
		background-color: hsl(0,0%,34%);
	}
	.playlist.list-square .playlist__image {
		height: 226px;
	}
	.playlist__checkbox {
		position: absolute;
		top: 7px;
		right: 7px;
		z-index: 4;
	}
	.playlist .playlist__image {
		width: 100%;
		height: 120px;
		background: no-repeat center center grey;
		background-size: cover;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.playlist .playlist__content {
		padding-top: 10px;
	}

	.playlist .playlist__content > * {
		display: block;
		margin-bottom: 5px;
	}

	.playlist .playlist__content > p {
		font-size: 14px;
		line-height: 14px;
	}

	.playlist .playlist__content > small {
		font-size: 11px;
		line-height: 15px;
	}

	.playlist .playlist__overwrite:before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 3;
		background: hsla(0, 0%, 30%, 0.5)
	}

.pc-tabs {
	margin: 0 0 7px 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
.pc-tabs li {
	background: #FFFFFF;
	border: 2px solid #14B87C;
	color: #14B87C;
	display: inline-block;
	padding: 7px 10px 8px;
	cursor: pointer;
	font-size: 14px;
	line-height: 17px;
	min-width: 200px;
	font-weight: 500;
}

.pc-tabs li.current {
	background: #14B87C;
	color: #FFFFFF;
}

.tab-content {
	display: none;
	position: relative;
}

.tab-content.current {
	display: inherit;
}

.tab-content ._checkbox-all._checkbox-all--list {
	position: absolute;
	top: 10px;
	left: -67px;
}

.tab-content--title{
	margin-bottom: 16px;
	font-size: 14px;
	line-height: 21px;
	font-weight: 300;
}

.button-cycle {
	min-width: 34px;
	width: 34px;
	height: 34px;
	padding: 2px;
	box-shadow: 0 3px 6px hsla(0, 0%, 0%, 0.4);
	border-radius: 21px;
	background: hsla(0, 0%, 100%, 1);
	cursor: pointer;
	border-style: none;
	transition: ease-in-out all 0.2s;
}

.button-cycle:hover {
	transition: linear all 0.25s;
}

.button-cycle--add {
	width: 100px;
	letter-spacing: 0;
	color: #FFFFFF;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #14B87C;
	font-size: 13px;
	line-height: 21px;
}

.button-cycle--add img {
	width: 12px;
	margin-right: 5px;
}

.button-cycle--delete {
	padding: 8px;
}

.button-cycle--delete.show {
	background-color: #CCCCCC;
}

.button-cycle--delete img {
	width: 18px;
}

.button-cycle--event {
	padding: 8px;
}

.button-cycle--event img {
	width: 14px;
}

.button-cycle--delete:hover,
.button-cycle--event:hover {
	background: hsla(0, 0%, 90%, 1);
}

.button-cycle--prev,
.button-cycle--next {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
	width: auto;
	min-width: 18px;
}

.button-cycle--prev > img,
.button-cycle--next > img {
	width: 15px;
}

#pc-confirm.pc-delete-success.pc-error-detail {
	background-color: transparent;
}

#pc-confirm.pc-delete-success {
	background-color: hsla(0, 0%, 0%, 0.8);
}

.pc-delete-success #pc-confirm-window {
	background: hsla(0, 0%, 100%, 1);
	box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.1);
	border: 1px solid hsla(0, 0%, 43%, 1);
	border-radius: 6px;
	max-width: 500px;
	width: 100%;
	min-height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	align-content: center;
	padding: 34px 25px 40px;
}

.pc-error-detail #pc-confirm-window {
	top: 22px;
	transform: translateX(-50%);
}

.pc-delete-success #pc-confirm-window > p {
	flex: 1 100%;
}

.pc-delete-success #pc-confirm-massage {
	color: hsla(0, 0%, 25%, 1);
    font-size: 18px;
    line-height: 17px;
    font-weight: 500;
}

.pc-delete-success .del-confirm-btn {
	font-size: 14px;
}

.pc-delete-success .del-confirm-btn:focus,
.pc-delete-success .del-confirm-btn:active {
	outline: none;
}

.pc-delete-success .del-confirm-btn-close {
	position: absolute;
	height: 30px;
	width: 30px;
	padding: 5px;
	border: none;
	background: transparent;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

.pc-error-detail .error-detail {
	color: #000000;
}

.pc-error-detail .error-detail {
	color: #000000;
}

.error-detail-header {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	margin-bottom: 30px;
}

.error-detail-content {
	font-size: 14px;
}

.error-detail-content ul > li {
	margin-bottom: 4px;
	line-height: 28px;
}

.error-detail-header img {
	width: 30px;
	height: 30px;
	margin-right: 10px;
}

#buttonbar.confirm-delete {
	/*opacity: 0;*/
	display: none !important;
}
#buttonbar.confirm-delete.active {
	/*opacity: 1;*/
	display: block !important;
	bottom: 0;
	top: auto !important;
}
.playlists .owl-nav,
.playlists .owl-nav {
	position: absolute;
	top: 43%;
	left: -17px;
	right: 0;
	transform: translateY(-43%);
}

.playlists .owl-nav button.owl-next {
	position: absolute;
	right: 74px;
}

.playlists .owl-nav button.owl-prev {
	position: absolute;
	left: 0;
}

.playlists .owl-nav button.owl-next span {
	background-image: url(/pc/images/common/cursor-right.svg);
}
.playlists .owl-nav button.owl-prev span {
	background-image: url(/pc/images/common/cursor-left.svg);
}

.playlists .owl-nav button.owl-next span,
.playlists .owl-nav button.owl-prev span {
	height: 34px;
	width: 34px;
	background-repeat: no-repeat;
	background-size: inherit;
	background-position: -9px -6px;
	display: block;
	text-indent: -99999px;
}

.playlists .owl-nav button.owl-next.disabled,
.playlists .owl-nav button.owl-prev.disabled {
	display: none;
}

.owl-carousel .owl-item .the-flash-icon {
	width: 10px;
	margin-bottom: 0;
}

.the-flash-icon {
	width: 10px;
	position: absolute;
	bottom: 10px;
	right: 10px;
	margin-bottom: 0;
}

/* - - - - - -
distribution/delivery_schedule_edit.html
- - - - - - */

.pc-schedule-bar-box {
	margin-bottom: 5px;
	padding: 25px 10px 0 10px;
}
.pc-schedule-bar-box:not(.has-content) {
	display: flex;
	padding: 12px 10px;
}
.pc-schedule-bar-box:not(.pc-schedule-bar-box--thumb) {
	align-items: center;
}
.pc-schedule-bar-box.align-top:not(.pc-schedule-bar-box--thumb) {
	align-items: flex-start;
}
.pc-schedule-bar-box.has-content .pc-schedule-box-header {
	display: flex;
	align-items: center;
}
.pc-schedule-box-light:first-child .pc-schedule-box-header .box-header--icon > div:first-child img,
.pc-schedule-box-light:nth-child(2) .pc-schedule-box-header .box-header--icon > div:first-child img {
	width: 100%;
}
.pc-schedule-bar-box--thumb > div:last-child {
	position: relative;
}
.pc-schedule-bar-box--thumb > div:last-child .icon-device {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.pc-schedule-bar-box .box-col-8 {
	width: calc(100% - 170px);
}
.pc-schedule-bar-box .box-col-4 {
	width: 170px;
}
.pc-schedule-bar-box .box-col-12 {
	width: 100%;
}
.pc-schedule-bar-box--thumb .box-col-8 {
	width: calc(100% - 190px);
}
.pc-schedule-bar-box--thumb .box-col-4 {
	width: 190px;
}
	.pc-schedule-box-header,
	.pc-schedule-box-header .box-header--icon {
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
	}

.pc-schedule-box-header .box-header--icon{
	align-items: center;
}

	.pc-schedule-box-header .box-header--icon img {
		width: auto;
		margin: 0 auto;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

.pc-schedule-box-header .box-header--icon > div:first-child {
	width: 30px;
	height: 30px;
	margin-right: 10px;
	position: relative;
	display: inline-flex;
}

.pc-schedule-box-header > span {
		font-size: 14px;
		line-height: 21px;
		margin-left: 13px;
		font-weight: 500;
		padding-top: 4px;
		flex: 1;
}

.pc-schedule-box-header .box-header--title {
	min-width: 120px;
	padding: 8px 0;
	margin-bottom: 10px;
}

	.pc-schedule-bar-box--thumb .pc-schedule-box-content {
		padding: 10px 0 0 42px;
	}
	.pc-schedule-box-content {
		padding: 23px 0 0 170px;
	}

	.pc-schedule-box-content ._checkbox-label {
		margin-bottom: 24px;
		display: inline-block;
	}

.pc-schedule-box-light {
	background: #414141 0% 0% no-repeat padding-box;
	border-radius: 8px;
}
	.pc-schedule-box-light .pc-schedule-box-header > span {
		font-size: 16px;
	}
	.pc-value-view {
		font-weight: 300;
	}
.pc-value-view.device-name {
	line-height: 32px;
	font-weight: 500;
}
.pc-value-view.device-name span{
	margin-right: 8px;
	display: inline-block;
}
.pc-datepicker {
	display: flex;
	flex-wrap: wrap;
}
.pc-datepicker .datepicker[disabled="disabled"],
.pc-datepicker .timepicker[disabled="disabled"] {
	background-color: #bdbcbc;
	cursor: not-allowed;
}
.pc-datepicker .datepicker,
.pc-datepicker .timepicker {
	font-size: 14px;
	line-height: 21px;
	letter-spacing: 0;
	color: hsla(0, 0%, 43%, 1);
	padding: 8px 10px;
	border-radius: 4px;
	background: hsla(0, 0%, 94%, 1);
}
.pc-datepicker .timepicker {
	width: 90px;
	margin-right: 10px;
}
.pc-datepicker .datepicker {
	width: 126px;
	margin-right: 16px;
}
.pc-datepicker > span {
	font-size: 27px;
    font-weight: 100;
    line-height: 32px;
    margin-right: 10px;
}
.pc-switches-container {
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

	.pc-switches-container > li {
		flex-basis: calc(25% - 20px);
		margin-bottom: 21px;
		display: inline-flex;
    	align-items: center;
		vertical-align: super;
		margin-right: 10px;
		min-width: 105px;
		font-size: 14px;
		line-height: 21px;
		justify-content: space-between;
	}
.error-message {
	color: #DB1F1F;
	font-size: 12px;
	margin: 0 0 10px 0;
	display: none;
}

.error-message--show {
	display: block;
}

.clockpicker-popover {
	border: none !important;
	border-radius: 0 !important;
}
.clockpicker-popover .popover-title {
	font-size: 20px !important;
	font-weight: normal !important;
}

.the-line{
	width: calc(100% - 50px);
	height: 1px;
	background-color: #CCCCCC;
	margin-left: 50px;
}
.schedule-note {
    margin-left: 50px;
    margin-bottom: 10px;
}
.pc-finish-message--device > span{
	font-size: 18px;
	line-height: 38px;
	display: inline-block;
	margin-bottom: 28px;
}
.pc-finish-message--device{
	font-size: 15px;
	line-height: 28px;
	font-weight: 500;
	min-height: 190px;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
}
.playlists-container-scroll {
	position: relative;
}
.playlists-container-scroll ._checkbox-all--row {
	position: absolute;
    left: -55px;
    top: 95px;
}

/* - - - - - -
Animated for Error modal delivery-status.html
- - - - - - */

.animated {
	-webkit-animation-duration: .4s;
	animation-duration: .4s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}

@-webkit-keyframes fadeInDownBig {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,-2000px,0);
		transform: translate3d(0,-2000px,0)
	}

	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}

@keyframes fadeInDownBig {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,-2000px,0);
		transform: translate3d(0,-2000px,0)
	}

	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}

.fadeInDownBig {
	-webkit-animation-name: fadeInDownBig;
	animation-name: fadeInDownBig
}

@-webkit-keyframes fadeOutUpBig {
	0% {
		opacity: 1
	}

	to {
		opacity: 0;
		-webkit-transform: translate3d(0,-2000px,0);
		transform: translate3d(0,-2000px,0)
	}
}

@keyframes fadeOutUpBig {
	0% {
		opacity: 1
	}

	to {
		opacity: 0;
		-webkit-transform: translate3d(0,-2000px,0);
		transform: translate3d(0,-2000px,0)
	}
}

.fadeOutUpBig {
	-webkit-animation-name: fadeOutUpBig;
	animation-name: fadeOutUpBig
}

.history-container {
	text-align: right;
}

.pc-button-history{
	top: 20px;
	right: 20px;
	width: 180px !important;
	height: 32px;
	background: #707070 0% 0% no-repeat padding-box;
	border: 1px solid #595959;
	border-radius: 2px;
	opacity: 1;
	position: absolute;
	display: none;
}

.pc-button-history span{
	margin-top: 8px;
	font-family: "Source Han Sans JP";
	font-size: 12.5px;
	letter-spacing: 0px;
	color: #FAFAFA;
	text-shadow: 1px 1px 3px #333333;
	opacity: 1;
}

.pc-button-history:hover {
	border: 1px solid hsl(0,0%,40%);
	background-color: hsl(0,0%,35%);
}

.button-sort{
	margin-right: 70px;
}

.icon-video {
	bottom: 0;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	height:35px;
	width:35px;
}


/* - - - - - -
style delivery_schedule_pl_edit.html
- - - - - - */
.pc-button-reset{
	border: 1px solid #FAFAFA;
	border-radius: 4px;
	opacity: 1;
	width: 72px;
	height: 27px;
}
.pc-button-reset[disabled="disabled"] {
	cursor: not-allowed;
}
.pc-reset > li{
	flex-basis: auto;
}
.pc-button-reset > span{
	margin-top: 5px;
	width: 100%;
	margin-right: 0;
}
.pc-reset label{
	visibility: collapse
}

.pc-switches-container .repeat-checkbox {
	display: none;
}

.pl_list_item_thumb{
	position: relative;
}

.limit_file #pc-confirm-massage {
	font-size: 14px;
}

.limit_file ul {
	display: flex;
	justify-content: center;
}

#reload_button {
	display: table;
	border: 1px solid #ACAFAE;
	opacity: 1;
	background: #707070
}

#reload_button i {
	margin-right: 9px;
	width: 16px;
}

#reload_button span {
	font-size: 14px;
	letter-spacing: 0;
	color: #FFFFFF;
	text-shadow: 1px 1px 3px #333333;
	opacity: 1;
}

#reload_button div {
	display: table-cell;
	vertical-align: middle;
}
.loading-group {
	width: 30%;
	position: relative;
	display: flex;
	align-items: center;
}
.img-screen {
	display: block;
	object-fit: cover;
}
.device__title {
	word-break: break-word;
}
.time-title {
	font-size: 12px !important;
	display: none;
}
.loader {
	border-radius: 50%;
	width: 64px;
	height: 64px;
	border-top: 4px solid #EAEAEA;
	border-right: 4px solid #EAEAEA;
	border-bottom: 4px solid #EAEAEA;
	border-left: 4px solid #14B87C;
	-webkit-animation: load8 1s infinite linear;
	animation: load8 1s infinite linear;
	position: absolute;
	right: 18%;
	display: none;
}
@-webkit-keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.device__content .device__status {
	position: absolute;
	bottom: 26px;
}

#reload_button[disabled="disabled"] {
	cursor: not-allowed;
	background: hsl(0,0%,20%);
}

.title-bottom {
	height: 26px;
}

.device-title {
	font-size: 12px !important;
}
.screen-description {
	display: none;
	margin-top: 10px;
	font-size: 10px;
	text-align: center;
}

.select-tab-item {
	display: none;
}

.notice {
	height: 24px;
	font-size: 16px;
	display: flex;
	position: relative;
	align-items: center;
	cursor: pointer;
}

.notice:not(:last-child) {
	margin-bottom: 15px;
}

.normal {
	opacity: 0.9;
}

.notice.new {
	font-weight: bold;
}

.notice span:not(:last-child) {
	min-width: fit-content;
}

.notice .date {
	font-weight: normal;
	margin-right: 10px;
}

.notice .content {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	line-height: normal;
}

.notice.new::before {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -12px;
	width: 8px;
	height: 8px;
	background-color: #DB1F1F;
	border-radius: 50%;
}

#content-frame.content-wrapper {
	padding: 32px 0 22px;
}

.notice-wrap {
	height: 558px;
	overflow-y: scroll;
	padding: 0 12px 0 52px;
}

.notice-wrap.pl-20 {
	padding-left: 20px;
}

.notice-detail .detail-date {
	font-size: 16px;
	line-height: 1.25;
	margin-bottom: 16px;
}

.notice-detail .detail-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.75;
	margin-bottom: 16px;
}

.notice-detail .detail-content {
	font-size: 14px;
	line-height: 2;
	opacity: 0.9;
	white-space: pre-line;
}

.content-name, .tpl-name {
	padding: 7px;
	font-size: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	height: 22px;
}
.content-name.new::before, .tpl_landscape_lines.new::before, .tpl-name.new::before {
	content: '';
	width: 8px;
	height: 8px;
	background-color: #DB1F1F;
	border-radius: 50%;
	margin-right: 6px;
	display: inline-block;
}

.tpl_list_ttl.new {
	text-align: left;
}

.delivery-device-name {
	float: left;
}

.delivery-device-status {
	float: right;
	color: #FFFFFF;
	font-size: 10px;
	background: #14B87C;
	padding: 3px;
	border-radius: 3px;
}

.clear-fix {
	clear:both;
}

.icon-edit {
    color: #09aa6f;
}