/* ------------------------------
 編集ページ
------------------------------- */

// ---------------
// フィルター
// ---------------
.acms-filter {
	margin-bottom: 20px;
	padding: 20px 9px 10px;
	border: 1px solid #e8e8e8;
	background: #FFF;

	// フォームグループ
	.acms-form-group {
		display: block;
	}
}

.acms-filter-fit {
	margin: 0;
}

.acms-filter-body {
  padding: 10px 10px 0 10px;
}

.acms-filter-group {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.acms-filter-label {
	display: flex;
	align-items: center;
	min-height: 26px;
  margin: 0 15px 8px 0;
  font-weight: bold;
  white-space: nowrap;
}

.acms-filter-content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: start;
  width: 100%;
}

.acms-filter-item {
	display: flex;
  align-items: center;
  margin: 0 5px 8px 0;
}

.acms-filter-item-full {
  width: 100%;
}

.acms-filter-item-name {
  display: inline-block;
  margin-right: 10px;
  white-space: nowrap;
}

.acms-filter-item-content {
  display: flex;
  width: 100%;
}

.acms-filter-just {

}
.acms-filter-just-item {
	display: inline-block;
}

.acms-filter-detail-btn {
  margin: 0 0 0 auto;
  color: #333;
  font-weight: bold;
  @include font-size(12);
  white-space: nowrap;

  a {
    color: #333;

    &:hover,
    &:visited,
    &:active,
    &:focus {
      color: #333;
    }

    &:hover {
      text-decoration: underline;
    }

    &.js-fade-active,
    &:hover {
      [class*="acms-icon"] {
        text-decoration: none;
        transform: rotate(-90deg);
      }
    }
  }
  [class*="acms-icon"] {
    margin: 0 5px 0 0;
    @include font-size(13);
    transition: transform .2s;
  }
}

.acms-filter-inner {
  margin: 0 -10px -5px;
  padding: 0 8px;
  background: #F5F6F8;
  border-bottom: 1px solid #e8e8e8;
}

.acms-filter-footer {
  display: flex;
  align-items: center;
	padding: 0 8px 8px 8px;
  background: #F5F6F8;

  .acms-btn-search {
    margin: 0 10px 0 0;
  }
}

@media screen and (max-width: $breakpoint-md-max){
	.acms-filter select {
		display: block;
		width: 100%;
	}

	.acms-filter .select2 {
		display: block;
		width: 100% !important;
		margin-right: 0;
	}

	.acms-table-admin input[type="text"],
	.acms-filter input[type="text"] {
		width: 100%;
	}


	.acms-filter-item {
		flex-direction: column;
		align-items: start;
    width: 100%;
  }
}

@media screen and (min-width: $breakpoint-md-min){
  .acms-filter-group {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: start;
  }
  .acms-filter-content {
    flex-direction: row;
    align-items: center;
  }
  .acms-filter-content-fit {
    flex-wrap: nowrap;
		width: 100%;
  }
	.acms-filter-just {
		display: flex;
	}
}

@media all and (-ms-high-contrast: none) {
	*::-ms-backdrop, .acms-filter-content-fit {
		flex-wrap: wrap;
	}
}


// ---------------
// タイトル
// ---------------
// title1
.acms-admin-title {
	margin-top: 0;
	margin-bottom: 20px;
	color: $acms-admin-title-textcolor;
	@include font-size(20);
	line-height: 1;

	@media (max-width: $breakpoint-md-max) {
		padding-left: 10px;
	}
}

// title2
.acms-admin-title2 {
	padding: 0;
	color: $acms-admin-title2-textcolor;
	margin: 10px 0;
	@include font-size(14);

	* + & {
		margin-top: 50px;
	}
}

// title3
.acms-admin-title3 {
	margin: 0 0 10px 0;
	padding: 5px 10px;
	background: $base-bg-light-gray;
	color: #333333;
	@include font-size(14);

	& + .acms-table-admin {
		margin-top: -10px;
	}
}

// ユニット タイトル
.acms-unitbox-title {
	margin: 5px 5px 5px 0;
	color: #333333;
	@include font-size(15);
}

// ---------------
// ユニット追加
// ---------------
.ablogcms--column-add-btn {
	margin: 10px;
	padding: 10px 10px 0 10px;
	border: solid 1px $edit-entry-bg-color-dark;
	background: $edit-entry-bg-color-base;
	box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
	@include clearfix();

	&:hover {
		box-shadow: 0 1px 1px 1px rgba(0,0,0,.1);
	}

	// ボタン
	.adminBtn {
		display: block;
		margin-bottom: 10px;
		@include font-size(15);
		line-height: 1;
	}

	.adminBtn:hover {
		cursor: move;
	}

	// 並び替え
	.acms-icon-sort {
		margin-right: 15px;
	}
}

// ---------------
// 管理ボタン
// ---------------
#adminBox .acms-btn-admin {
	margin-right: 0;
}

// ---------------
// 動的フォーム
// ---------------
.entryFormOption {
}

/* ---------------
ユニット
--------------- */
.entryFormColumnBody {
	.entryFormFileentryFormImages,
	.formColumnMapTd {
		padding-right: 10px !important;
	}
}
.js-table-header {
	td,
	th {
		min-width: 100px;

	}
}

/* 検索結果のハイライト
---------------*/
.highlight1 {
	background-color: #ffff66;
	color: #000000;
}

.highlight2 {
	background-color: #a0ffff;
	color: #000000;
}

.highlight3 {
	background-color: #99ff99;
	color: #000000;
}

.highlight4 {
	background-color: #ff9999;
	color: #000000;
}

.highlight5 {
	background-color: #ff66ff;
	color: #000000;
}

.highlight6 {
	background-color: #880000;
	color: #000000;
}

/* ---------------
投稿フォーム関連表示設定
--------------- */

/* 投稿フォーム */
#entryForm {
	width: 100%;
	background: $edit-entry-bg-color-lightest;
}

/* 投稿フォーム内容の囲み */
.entryFormWrapper {
	padding: 10px;
	_padding: 0;
	background: $edit-entry-bg-color-lightest;
}

/* 投稿フォーム用基本テーブル */
.entryFormTable {
	width: 100% !important;
	margin: 0 0 10px 0 !important;
	border: none !important;
	border-collapse: collapse !important;

	[class*=validator-result] {
		margin: 0;
	}

	th,
	td {
		border: none !important;
		background-color: #f7f7f7 !important;
		color: #333333 !important;
	}

	th {
		padding: 7px 10px 0 !important;
		white-space: nowrap;
	}

	td {
		padding: 7px 10px !important;
	}

	.thY {
		width: 30%;
	}

	.Select-input {
		width: 100%;
	}
	.Select-input input {
		display: inline-block;
		width: 100%;
	}
}


@media screen and (min-width: $breakpoint-md-min) {
	.entryFormTable th {
		width: 10em;
		padding: 7px 10px !important;
		text-align: right;
	}
}

.entryFormTable {
	.entryFormDateBlockWrap{
		display: block;
		margin: 0;
	}

	.entryFormDateBlock {
		display: block;
	}
}

.entryFormTimeLabel {
	display: inline-block;
	margin: 10px 0;
	vertical-align: middle;
}

.entryFormDateLabel {
	display: inline-block;
	margin: 0 0 10px 0;
	vertical-align: middle;
}

@media screen and (min-width: $breakpoint-sm-min) {
	.entryFormTable {
		.entryFormDateBlockWrap{
			display: inline-block;
		}

		.entryFormDateBlock {
			display: inline-block;
			vertical-align: middle;
			margin-right: 10px;
			width: 150px;
		}
	}


	.entryFormDateLabel,
	.entryFormTimeLabel {
		margin: 0;
	}
}

/* 位置情報 */
.js-go_form table {
	width: 100%;
}
.entryFormGeoMap {
	margin: 0 0 15px 0;

	& > div {
		width: 100%!important;
		max-width: 100%;
	}
}
.entryFormGeoControl {
	vertical-align: top;
}
.entryFormGeoControlDetail {
	th {
		font-weight: normal;
		text-align: left;
	}

	th,
	td {
		padding: 5px 10px 5px 0;
	}
}

/* 関連エントリー情報 */
.entryFormRelatedActions{
	float: right;
}

.acms-sortable-item {
	z-index: zIndex(related-item);
}

/* 画像ユニットのドラッグアンドドロップ */
.js-drop_area {
	position: relative;
}

.acms-drop-area-wrap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	.js-drop_area & {
		display: none;
	}

	.drag-n-drop-hover & {
		display: block;
	}
}

.drag-n-drop-hover .acms-drop-area {
	z-index: zIndex(acms-drop-area);
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;

	&:before {
		content: "";
		position: absolute;
		top: -10px;
		right: -10px;
		bottom: -10px;
		left: -10px;
		background: #fff;
		border: 3px #006dd9 dashed;
		z-index: zIndex(acms-drop-area-before);
	}
}


.acms-drop-area-inner {
	display: none;
	text-align: center;
	.drag-n-drop-hover & {
		position: relative;
		display: table-cell;
		vertical-align: middle;
		z-index: zIndex(acms-drop-area-inner);
	}
}

.acms-drop-area-icon {
	color: #006dd9;
	font-size: 30px;
}

.acms-drop-area-text {
	color: #006dd9;
	font-size: 14px;
}


/* 動的フォーム テーブル */
.entryDynamicFormTable {
	width: 100%;
}

.entryFormColumnBody {
	.js-formUnitGroup th,
	.js-formUnitGroup td,
	.formUnitGroupOption th,
	.formUnitGroupOption td,
	.formUnitLabel th,
	.formUnitLabel td,
	.entryFormImageTable th,
	.entryFormImageTable td {
		padding: 5px 10px !important;
		background-color: transparent !important;
	}
}

#entryForm .entryFormColumnBody {
	.formUnitGroupOption .formUnitGroupOptionValue {
		padding: 5px 10px !important;
	}

	.js-formUnitGroup .formUnitGroupValue {
		width: 80% !important;
	}

	.formUnitGroupAddTable {
		width: 100%;
	}
}

@media (max-width: $breakpoint-md-max) {
	.entryDynamicFormTable .detail-column-body {
		border-top: 1px solid #ddd;
		background: #eee;

		&:first-child {
			border-top: 0;
		}
	}

	.entryFormColumnBody {
		.formUnitLabel th,
		.formUnitLabel td {
			display: block;
		}

		table td.acms-border-bottom-sp {
			border-bottom: 1px solid #cccccc !important;
		}
	}


	/* 関連エントリー情報 */
	.entryFormRelatedActions{
		float: none;
		padding-top: 5px;
	}
}

@media (min-width: $breakpoint-md-min) {
	#entryForm {
		.entryFormColumnBody {
			.formUnitGroupOption {
				.formUnitGroupOptionValue {
					width: 70px !important;
					padding: 5px 5px !important;
				}

				.formUnitGroupOptionCell {
					width: 1%;
				}
			}
		}
	}
}

/* 投稿フォーム用基本テーブル（詳細部分） */
.entryFormTable {
	.detail-fade-body {
		padding: 0 10px !important;

		th,
		td {
			background-color: $edit-entry-bg-color-lighter !important;
		}
	}

	.detail-fade {
		td {
			padding: 0 !important;

			.detail-fade-head {
				display: block !important;
				width: 100% !important;
				padding: 7px 0 !important;
				text-align: center !important;
				background-color: $edit-entry-bg-color-base;
				outline: 0 !important;
			}
		}
	}
}


/* 投稿フォーム用基本テーブル（カラムごとの各設定） */
.entryFormColumnSettingTable {
	table-layout: fixed;
	width: 100%;
	border: none;

	th {
		width: 8em;
		background-color: transparent;
		text-align: right;
		vertical-align: top;
	}

	th,
	td {
		border: none;
	}
}


/* エントリー作成画面のプルダウンとinput */
.acms-form-edit {
	margin: 0;

	@if $admin == true {
		font-family: $acms-admin-font-family;
	}
}

.acms-form-edit {
	select,
	input[type="text"],
	input[type="password"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="date"],
	input[type="month"],
	input[type="time"],
	input[type="week"],
	input[type="number"],
	input[type="email"],
	input[type="url"],
	input[type="search"],
	input[type="tel"] {
		width: auto;
		height: auto;
		margin: 0;
	}

	textarea {
		margin: 0;
	}

	.acms-form-width-large,
	input.acms-form-width-large {
		width: $acms-form-width-large-width;
	}

	.acms-form-width-medium,
	input.acms-form-width-medium {
		width: $acms-form-width-medium-width;
	}

	.acms-form-width-small,
	input.acms-form-width-small {
		width: $acms-form-width-small-width;
	}

	.acms-form-width-mini,
	input.acms-form-width-mini {
		width: $acms-form-width-mini-width;
	}

	.acms-form-width-full,
	input.acms-form-width-full {
		width: 100%;
	}

	.acms-form-width-3quarters,
	input.acms-form-width-3quarters {
		width: 75%;
	}

	.acms-form-width-half,
	input.acms-form-width-half {
		width: 50%;
	}

	.acms-form-width-quarter,
	input.acms-form-width-quarter {
		width: 25%;
	}

	.acms-hide-pc {
		display: none;
	}
}

// 編集画面用スタイル
.acms-entry h2,
.acms-entry h3,
.acms-entry h4,
.acms-entry h5,
.acms-entry h6 {
	&.fieldTitle {
		padding-left: 0;
		padding-right: 0;
	}
}

// ---------------
// アコーディオン
// ---------------
.acms-accordion {
	margin: 0 0 10px 0;
}

.acms-accordion-title {
	margin: 0;

	[class*='acms-icon'] {
		margin: 0 0 0 5px;
	}
}

.acms-accordion-title-link {
	display: block;
	padding: 7px 0;
	text-align: center;
	@include font-size(14);
	font-weight: normal;
	background-color: $edit-entry-bg-color-base;

	&:hover {
		text-decoration: none;
		background-color: $edit-entry-bg-color-dark;
	}
}

.acms-accordion-inner {
	padding: 10px;
	background: #efefef;

	.entryFormTable td,
	.entryFormTable th {
		background: #efefef !important;
	}
}

// ---------------
// ソート用テーブル
// ---------------
.acms-table-sort {
	width: 100%;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;

	th,
	td {
		padding: 10px;
		vertical-align: middle;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ddd;
	}
}

.acms-icon-mute {
	color: #a7a7aa;
}

// ---------------
// スマートフォン対応 エントリー作成画面
// ---------------

/* フォームグループのサイズ調整 */
.entryFormInputGroup {
	position: relative;
	display: table;
	max-width: 480px;
	border-collapse: separate;

	input {
		position: relative;
		display: table-cell;
		width: 100%;
	}
	.entryFormInputSideBtn {
		position: relative;
		display: table-cell;
		width: 1%;
		padding: 0 0 0 5px;
		vertical-align: middle;
		white-space: nowrap;
	}
}

@media (max-width: $breakpoint-md-max) {
	.entryFormPreview,
	.entryFormPreviewMap,
	.entryFormFileentryFormFile,
	.entryFormFileControl,
	.entryTableUnit th,
	.entryTableUnit td,
	.acms-table-edit th,
	.acms-table-edit td,
	.acms-select-block {
		display: block;
	}

	#entryForm {
		margin-right: 0 !important;
	}

	.entryFormWrapper .acms-table-edit th,
	.acms-table-edit th,
	.entryTableUnit th {
		text-align: left;
		padding-bottom: 0;
	}

	.entryFormTextarea {
		margin-bottom: 10px;
	}

	.entryFormImageTable {
		width: auto;
	}

	.entryFormImageTable .toggle {
		margin-right: 10px;
	}

	#entryForm .entryInputTitle {
		width: 100%;
	}

	/* フォームアイテムのサイズ調整 */
	.entryFormInputText {
		max-width: 180px;
	}

	.entryFormInputDate {
		max-width: 110px;
		margin-right: 5px;
	}
}

/* テキスト入力 */
.acms-form input[type="text"].entryInputTitle {
	width: 100%;
	@include font-size(20);
}

.entryFormColumnTable {
	width: 100%;
	margin: 0;
	border: none;
	background-color: transparent !important;

	th,
	td {
		border: none;
	}
}


.entryFormFileControl {
	vertical-align: top;
	line-height: 2em;
	.js-img_resize_input:focus + .acms-btn-admin {
		border: 1px solid $acms-btn-focus-border-color;
	}
}

.entryFormFileControl {
	&,
	th,
	td {
		border: none !important;
		background-color: transparent !important;
		@include font-size(13);
	}

	th {
		padding-right: 10px !important;
	}

	dt {
		@include font-size(13);
	}

}

.entryFormFileControlSelects {
	margin: 0 -5px 10px;
	max-width: 400px;
	@include clearfix();
}

.entryFormFileControlSelectsItem {
	float: left;
	width: 50%;
	padding: 0 5px;
	box-sizing: border-box;

	select {
		width: 100%;
	}
}

.entryFormColumnTable img {
	display: block;
	max-width: 100%;
	height: auto;
	padding: 1px;
	box-sizing: border-box;
}

// ダイレクト編集 inputの長さ
.entryFormFileControl .acms-form-width-large {
	width: 300px;
}

.entryFormColumnBody .entryFormColumnTable th,
.entryFormColumnBody .entryFormColumnTable td {
	padding-bottom: 5px !important;
}

@media (max-width: $breakpoint-md-max) {
	.entryFormColumnTable th,
	.entryFormColumnTable td {
		display: block;
		width: 100%;
		@include box-sizing(border-box);
	}
}

/* 投稿フォーム画像詳細 */
.entryFormImageTable {
	width: 100%;
	margin: 5px 0 0 0 !important;
	padding: 10px;
	border: none;
	border-collapse: collapse;
	background-color: $edit-entry-bg-color-light !important;

	/* フォームアイテムのサイズ調整 */
	.entryFormInputText {
		width: 180px;
	}

	th {
		width: 10em;
		background-color: #f7f7f7;
		text-align: right;
	}

	td {
		padding: 5px 10px !important;
	}

	@media (max-width: $breakpoint-md-max) {
		th {
			text-align: left;
		}

		th,
		td {
			padding-left: 10px !important;
			padding-right: 10px !important;
		}

		.acms-select-block {
			margin: 5px 0;
		}
	}

	// 画像サイズ 大
	.imageLargeSize {
		margin-left: 15px;
	}

	// 詳細設定
	.toggle {
		display: block;
		@include font-size(14);

		.acms-icon-arrow-small-right {
			transition: transform .2s;
		}

		&:hover {
			text-decoration: none;

			.acms-icon-arrow-small-right {
				transform: rotate(90deg);
			}
		}
	}
}

.entryFormMapTable {
	th,
	td {
		padding: 5px !important;
	}
}

@media (max-width: $breakpoint-md-max) {
	.acms-form .entryFormMapTable input.acms-form-width-mini {
		width: 100%;
	}

	.formColumnMap {
		.yolp-address-search-header {
			padding: 10px;
		}

		.yolp-address-search {
			max-width: 100%;
		}

		.yolp-address-search > input[type="text"] {
			padding: 5px;
		}

		.entryFormMapTable {
			display: table;
			width: 100%;

			th,
			td {
				display: table-cell;
				width: auto;
			}
		}
	}
}

.entryFormImageTable,
.formColumnMap .entryFormImageTable,
.entryFormColumnSettingTable .entryFormImageTable,
.formColumnMap .entryFormImageTable tr,
.entryFormColumnSettingTable .entryFormImageTable tr {
	background-color: $edit-entry-bg-color-light !important;
}

/* 編集中の記事フォーム */
.entryFormColumn {
	position: relative;
	padding: 0 0 10px 0;
}

.entryFormColumnItem {
	position: relative;
	margin: 10px;
	box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);

	&:focus{
		outline: none;
	}

	&:hover .entryFormColumnAddunitWrap {
		display: block;
	}
}


.entryFormColumnItem-toberemoved {
	display: none;
}

.entry tr {
	border: none;
}

/* 拡張ラベル */

.acms-extend-field-wrap {
	display: inline-block;
}

.acms-extend-field {
	padding: 0 0 5px;
}

@media (max-width: $breakpoint-md-max) {
	.acms-extend-field-wrap {
		display: table;
		margin: 10px 0 0 0;
	}

	.acms-extend-field {
		display: table-cell;
		width: 1%;
		padding: 0 10px 0 0;
	}

	.acms-extend-field-input {
		display: table-cell;
		width: 100%;
	}
}

/* テキスト挿入 */
.editTextInsert,
.js-extendTagSelect {
	display: inline-block;
	margin-top: 10px;
}

/* 投稿配置指定 */
.entryFormColumn .entryFormColumnHead {
	position: relative;
	margin: 0;
	padding: 5px 10px 0 30px;
	background: $edit-entry-bg-color-darker;
	color: #ffffff;
	@include font-size(13);
	border-radius: 3px 3px 0 0;
	@include box-sizing(content-box);

	select {
		min-height: 24px;
		padding-top: 2px;
		padding-bottom: 2px;
		@include font-size(12);
	}
}

@media (max-width: $breakpoint-md-max) {
	.entryFormColumnHeadLabel {
		@include hide-visually();
	}

	.editTextInsert {
		display: block;
		margin: 12px 0 0;
	}

	.editTextInsert a {
		padding: 5px;
	}

	.entryFormColumnHead .entryFormColumnHeadLayoutBox {
		padding-right: 30px;
	}

	.formEntryActionUnit .acms-icon-sort {
		font-size: 20px;
	}

	.acms-sidebar-box .acms-btn-admin.block-level {
		width: 95%;
	}

	// ソートを非表示
	.entryFormColumnHead .sorthandle {
		display: none;
	}

}

/* 非表示ユニット */
.entryFormColumn {
	.entryFormColumnItem-hidden {
		.entryFormColumnHead,
		.entryFormColumnBody {
			background: $edit-entry-bg-color-dark;
			color: #333;
			transition: opacity 0.2s linear, background 0.2s linear;
		}

		.entryFormColumnHead {
			.sorthandle,
			.togglebody,
			.removethis,
			.addunit {
				color: #333;
			}
			[name="align[]"] {
				border: 1px solid red;
			}
		}

		.entryFormColumnBody {
			@include opacity(0.66);
		}

		#js-edit_inplace-box & .entryFormColumnBody {
			@include opacity(1);
		}

	}
}

/*　記事概要部分のカラム　*/
.entryFormColumn .entryFormColumnItem-summary {
	.entryFormColumnHead {
		background-color: #7e7e84;
	}

	.entryFormColumnBody {
		background-color: $edit-entry-bg-color-white;
	}
}

.entryFormColumnBody {
	margin: 0;
	padding: 10px;
	background-color: $edit-entry-bg-color-white;
	text-align: left;
	border-radius: 0 0 3px 3px;

	textarea {
		line-height: 1.7;
	}
}


/* LiteEditor */

#js-edit_inplace-box .entryFormLiteEditor+ .entryFormTextarea,
.entryFormLiteEditor + .entryFormTextarea {
	width: 100%;
	margin-bottom: 0;
}


#js-edit_inplace-box .js-add-unit-parts {
	display: none;
}

.acms-btn .lite-editor-emoji-font {
	font-size: 11px;
}

.entryFormColumnBody {

	.lite-editor-toolbox {
		margin-top: 10px;
		background-color: transparent;
		border: none;
	}

	.lite-editor-select-wrap label {
		display: inline-block;
		margin-right: 5px;
		margin-left: 5px;
	}

	.lite-editor-toolbox .acms-btn-group > .acms-btn {
		height: auto;
	}

	.lite-editor-select {
		margin-bottom: 5px;
	}

	.acms-btn-group {
		padding: 0;
	}

	.lite-editor-toolbox {
		padding: 0;
	}

	.lite-editor-select-wrap {
		padding: 0 10px 0 0;
	}

	.lite-editor-btn-group-wrap .acms-btn-group {
		float: left;
		margin-right: 10px;
	}
}

.entryFormColumnBody > [data-id] {
	position: relative;
}

@media (min-width : $breakpoint-md-min) {
	.entryFormColumnBody {
		.lite-editor-select {
			margin-bottom: 0;
		}
	}
}


.entryFormColumnBody dl dd {
	margin-left: 0;
	padding-bottom: 8px;
}

.entryFormFileentryFormImages {
	width: 100%;

	a {
		display: block;
	}
}

.entryFormColumnBody .entryFormFileentryFormImages,
.entryFormColumnBody .formColumnMapTd {
	padding-right: 10px !important;
	background-color: transparent !important;
}


// noImage
.entryFormFileentryFormImages .acms-icon-unit-image {
	color: #aaaaaa;
	@include font-size(100);
	text-align: center;
}

@media (min-width: $breakpoint-md-min) {
	.entryFormFileentryFormImages {
		width: 320px;
		padding-right: 20px;
		vertical-align: top;
	}
}

/* カテゴリー追加 */
.categoryAdderBtn {
	display: inline;
}

.categoryAdder {
	display: none;
	position: absolute;
	padding: 10px;
	background: #d0d0d0;
	z-index: 1;
}

.categoryAdder table {
	_width: 50%;
	background: #f7f7f7;
}

.categoryAdder .textbox {
	width: 80px;
}

/* カテゴリー追加のmodal dialog */
#categoryAddForm {
	@include font-size(13);
}

/* タグ候補 */
#tag-assist {
	margin: 10px -3px 0;
	padding: 0;
	text-align: left;

	li {
		display: inline-block;
		margin: 3px;
		white-space: nowrap;
		_display: inline;
		_zoom: 1;
	}

	a {
		display: inline-block;
		padding: 5px;
		line-height: 1;
		border: 1px solid #999;
		border-radius: 5px;

		&:hover {
			background-color: #ddd;
		}
	}
}

/* 詳細設定のトグルリンク */
#dateExpander {
	position: relative;

	&:hover {
		background-color: $edit-entry-bg-color-dark;
		text-decoration: none;
	}

	&:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	&:focus:before {
		border: 1px dotted $acms-btn-focus-border-color;
	}
}

/* カラム(v1.1からカラム→ユニットと改名) */
.entryFormColumn .entryFormColumnHead .entryFormColumnHeadLayoutBox {
	width: auto;
	input,
	select {
		max-width: 140px;
		position: relative;
		margin: 0 0 5px 0;
	}
	// ダイレクト編集のとき
	.acms-form-direct & {
		left: 10px;
	}
}

.entryFormColumn .entryFormColumnHead {
	.sorthandle {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		_padding-right: 20px;
		cursor: move;
		_cursor: auto;
	}

	.entryFormColumnHeadAction {
		position: absolute;
		top: 8px;
		right: 10px;
	}

	.label {
		float: left;
		margin: 0 0 0 8px;
		font-weight: bold;
		background-color: transparent;
		@include font-size(13);
		line-height: 1.5;

		@media screen and (max-width: $breakpoint-md-max){
			@include hide-visually();
		}
	}

	.addunit,
	.togglebody,
	.closethis,
	.removethis {
		float: left;
		width: 18px;
		height: 18px;
		margin: 0 0 0 5px;
		padding: 2px;
		color: $edit-entry-bg-color-darker;
		@include font-size(10);
		text-align: center;
		cursor: pointer;
		border: 0;
		background: #FFF;
		border-radius: 50%;

		&:focus {
			outline: 0;
			border-color: $acms-btn-focus-border-color;
		}

		[class*="acms-icon-"] {
			display: block;
		}
	}

	.handle:hover {
		cursor: move;
	}

	// ソートボックス
	.sorthandle {
		display: inline-block;
		color: #fff;
		text-align: left;
		background: transparent;
		border: 0;

		&:focus {
			outline: 0;
		}

		.acms-icon-sort {
			margin-left: 10px;
			padding-top: 12px;
		}
	}


}
@media (max-width: $breakpoint-md-max) {
	.entryFormColumn .entryFormColumnHead {
		padding-left: 45px;

		.addunit {
			@include font-size(12);
		}

		.removethis {
			top: 1px;
			@include font-size(12);
		}

		.togglebody {
			@include font-size(12);
		}

		.sorthandle {
			.acms-icon-sort {
				padding: 7px 10px;
				margin: 0;
				font-size: 20px;
			}
		}
	}
}

/* カラムをドラッグした時のスタイル */
.entryFormColumn .ui-sortable-helper {
	position: absolute;
	left: 0 !important;
	width: 97.25%;
	margin: 10px 10px 10px 10px;
}

#more.ui-sortable-helper {
	width: 97%;
}

/* 投稿フォーム内の「以下のカラムが一覧表示時に「続きを読む」になります」部分 */
.entryFormColumn #more {
	position: relative;
	display: none;
	margin: 10px 10px 0 10px;
	padding: 10px 0;
	background: $edit-entry-bg-color-darkest;
	box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
	border: 3px solid $edit-entry-bg-color-darkest;
	cursor: move;
	color: #FFF;
	@include font-size(14);
	text-align: center;
	line-height: 1;
	transition: background .2s;

	&:hover {
		color: $edit-entry-bg-color-darkest;
		background: #FFF;
		box-shadow: 0 1px 1px 1px rgba(0,0,0,.1);
	}
}

.entryFormColumn #more .sorthandle {
	width: 100%;
	height: 100%;
}

.entryFormColumn #more .sorthandle .acms-icon-sort {
	float: left;
	margin-left: 9px;
}

/* 地図 */
.formColumnMap {
	width: 100%;
}

.formColumnMapTd {
	width: 400px;
	padding-right: 20px;
	vertical-align: top;
}

* + html .formColumnMapTd {
	width: 200px;
}

.map_msg_id {
	width: 100%;
}

* + html .map_msg_id {
	width: 90%;
}

.yolp_msg_id {
	width: 100%;
}

.acms-form-edit input.yolp-address-search-txtbx {
	width: 220px;
}

// スマートフォン：マップのスタイル
@media (max-width: $breakpoint-md-max) {
	.formColumnMap th,
	.formColumnMap td {
		display: block;
		width: 100%;
	}

	.acms-gmap-container,
	.acms-gmap-box {
		width: 240px !important;
		height: 240px !important;
	}

	.acms-form input[type="text"].mapSearchText {
		width: 200px;
	}

	.map_msg_id {
		height: 40px;
	}

	.entryFormColumn #more .sorthandle .acms-icon-sort {
		position: absolute;
		top: 8px;
		left: 10px;
		margin-left: 0;
		font-size: 20px;
	}
}

.entryFormFilePreview {
	width: 74px; // アイコン幅
	padding-right: 20px;
	vertical-align: top;

	.entryFormFileIcon,
	.acms-form-checkbox {
		margin-bottom: 0;
	}
}

.entryFormFileName {
	margin: 0;
}

// スマートフォン：ファイルのスタイル
@media (max-width: $breakpoint-md-max) {
	.entryFormFileName {
		margin-top: 0;
	}

	.entryFormFilePreview {
		position: relative;
		width: auto;
		padding-right: 0;
	}

	.entryFormFileIcon {
		position: absolute;
		left: 0;
		top: 0;
	}

	.entryFormFileData {
		padding: 0 0 20px 100px;
	}

	.entryFormColumnSettingTable th {
		text-align: left;
	}
}

/* フォーム投稿ボタン囲み */
.comPost {
	padding: 10px;
	background-color: $edit-entry-bg-color-base;
	border: solid 1px $edit-entry-bg-color-dark;
	text-align: center;
}

.comPostInner {
	display: inline-block;
}

.comPostMain,
.comPostSide {
	display: inline-block;
}

@media (max-width: $breakpoint-md-max) {
	.comPost {
		padding: 10px 5px;
		margin-bottom: 0;
		background-color: transparent;
		text-align: left;
	}

	.comPostInner {
		display: table;
		width: 100%;
	}

	.comPostMain {
		display: table-cell;
		width: 70%;
		padding: 0 5px;
		box-sizing: border-box;
	}

	.comPostSide {
		display: table-cell;
		width: 30%;
		padding: 0 5px;
		box-sizing: border-box;
	}

	.comPostFull {
		display: table-cell;
		width: 100%;
		padding: 0 5px 10px 5px;

		select {
			width: 100%;
		}
	}

	.comPost [class*="acms-btn"] {
		width: 100%;
		padding-right: 10px !important;
		padding-left: 10px !important;
		box-sizing: border-box;
	}
}

/* キャンセルボタン */
.cancelBtn {
	@include font-size(14);
}

/* サブミット(承認)ボタン */
.submitBtn {
	width: 8em;
	@include font-size(14);
}

/* 入力欄の横幅設定 */
.formSizeS {
	width: 150px;
}

.formSizeM {
	width: 240px;
}

.formSizeL {
	width: 320px;
}

// 保存ボタンの余白
#unitForm .entryFormColumnBody {
	padding-bottom: 60px;

	@media (min-width: $breakpoint-md-min) {
		padding-bottom: 50px;
	}
}

/* 投稿フォームの表示調整 */

/* フォームの内容に問題がある場合のコメントの表示 */

/* 通常は非表示 */
.transaction-notice-,
.validator-result-,
.validator-result-1,
.v-result-,
.v-result-1 {
	display: none;
}

/* 問題発生時には表示 */
.transaction-notice-error,
.validator-result-error,
.validator-result-0,
.v-result-error,
.v-result-0 {
	display: block;
	color: #ff0000;

	// a-blog cms 管理画面内のアラート
	&.acms-alert {
		color: $acms-alert-black-text-color;
	}

	&.acms-alert-info {
		color: $acms-alert-info-text-color;
	}

	&.acms-alert-danger {
		color: $acms-alert-danger-text-color;
	}
}

/* 変更時メッセージ */
.noticeMsg {
	margin-bottom: 20px;
	border: 3px double #ffffff;
	background-color: rgb(224, 224, 224);
	@include font-size(14);
	text-align: center;
}

/* ベンチマーク用スタイル */
.acmsBenchmark {
	float: left;
	margin-left: 20px;
	margin-bottom: 20px;

	h1 {
		@include font-size(14);
		text-align: center;
	}
}

.acmsBenchmarkTable {
	margin-top: 10px;
	border-collapse: collapse;
	background-color: white;
	text-align: left;
	@include font-size(8);

	thead th {
		background-color: #99cc99;
	}

	tbody th {
		background-color: #ccffcc;
	}

	th,
	td {
		max-width: 300px;
		padding: 5px 10px;
		border: 1px solid gray;
		word-wrap: break-word;
	}
}

/* ローディング画像 */
.js-acms_loader,
.js-acms_loader:before,
.js-acms_loader:after {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: load 1.8s infinite ease-in-out;
	animation: load 1.8s infinite ease-in-out;
	box-sizing: content-box;
}

.js-acms_loader {
	position: relative;
	margin: 20px auto;
	font-size: 10px;
	text-indent: -9999em;
	border-top: 6px solid #333;
	border-right: 6px solid #333;
	border-bottom: 6px solid #333;
	border-left: 6px solid #eee;
	@include translateZ(0);
	@include animation(load 1.1s infinite linear);

	&,
	&:after {
		border-radius: 50%;
		width: 32px;
		height: 32px;
	}
}

@-webkit-keyframes load {
	0% {
		@include rotate(0deg);
	}

	100% {
		@include rotate(360deg);
	}
}

@keyframes load {
	0% {
		@include rotate(0deg);
	}

	100% {
		@include rotate(360deg);
	}
}

/* 範囲選択（没） */
#js-edit_inplace-sort_selection {
	position: absolute;
	z-index: zIndex(js-edit_inplace-sort_selection);
	border: 1px solid blue;
	background-color: rgba(0, 0, 255, 0.01);
}

.js-edit_inplace-sort_selecting {
	box-shadow: 0 0 5px #adff2f;
}

.js-edit_inplace-sort_selectAll {
	background-color: #eee;
	box-shadow: 0 0 5px #adff2f;
	cursor: pointer;

	.js-edit_inplace-sort_selecting {
		box-shadow: none;
	}
}

#js-media_view {
	width: 100%;
	height: 100%;
	background-color: #4e4e4e;
	z-index: zIndex(js-media_view);
}

#js-media_view_inner {
	position: relative;
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
	background-color: #fff;
	border: 3px solid #aaa;
}

/* リビジョンの一覧ボックス */
#js-revision_index {
	border: 3px solid #aaa;
	background-color: #4e4e4e;

	@media (min-width: $breakpoint-md-min) {
		width: 850px;
	}
}

/* ダイレクト編集ボックス */
#js-edit_inplace-box {
	max-width: 800px;
	padding-bottom: 15px;
	position: relative;
	@include font-size(12);
	z-index: zIndex(js-edit_inplace-box);
	text-align: center;

	.acms-tooltip {
		display: none;
	}

	.entryFormColumnHead {
		padding: 5px 10px 0 5px;
		text-align: left;
	}

	.entryFormColumnBody {
		max-height: 80vh;
		overflow-y: auto;
		textarea {
			margin-bottom: 10px;
		}

		.map_msg_id {
			margin-bottom: 0;
		}
	}

	.entryFormColumnBody,
	.entryFormColumnHead {
		border: 1px solid #999999;
		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	}

	.entryFormColumnHead {
		border-bottom: none;
	}

	.entryFormColumnBody {
		border-top: none;
	}
}

#js-edit_inplace-submit {
	position: absolute;
	right: 20px;
	bottom: 45px;
}

/* ホバー時オーバーレイ */
.js-edit_inplace-hovering {
	border: 2px #000 solid;
	background-color: rgba(163, 196, 234, 0.4);
	pointer-events: none;
}

.js-edit_inplace-sortable {
	background-color: rgba(163, 196, 234, 0.6);
	@include opacity(.2);
}

/* ロード中オーバーレイ */
.js-edit_inplace-loading {
	background-color: rgb(255, 255, 255);
	@include opacity(.6);

	.js-acms_loader_img {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -17px;
		margin-left: -18px;
	}
}

/* 保存中の表示 */
#js-entry_saving_progress {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: zIndex(js-entry_saving_progress);
	filter: alpha(opacity=66);
	background-color: rgb(255, 255, 255);
	background: rgba(255, 255, 255, 0.66);

	.js-acms_loader_img {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -28px;
		margin-left: -18px;
	}

	span {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: 30px;
		margin-left: -55px;
		@include font-size(16);
		font-weight: bold;
		color: #111;

		&:before {
			content: "\4FDD\5B58\3057\3066\3044\307E\3059..."; // 変換：保存しています...
		}
	}
}

/* ローディングスプラッシュ */
#js-loading_splash {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: zIndex(js-loading_splash);
	// ローディングイメージの背景
	.js-loading_splash_frame {
		position: absolute;
		top: 45%;
		left: 50%;
		width: 160px;
		height: 160px;
		margin-top: -80px;// 高さの半分
		margin-left: -80px;// 幅の半分
		border-radius: 10%;
		background: #000;
		opacity: .8;
		text-align: center;
		// ローディングスプラッシュ内テキスト
		p {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 18px;
			margin: 0 auto;
			@include font-size(16);
			font-weight: bold;
			color: #fff;
		}
	}
	// ローディングイメージの位置調節
	.js-acms_loader_img {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -40px;
		margin-left: -22px; // 16（幅/2） + 6（線の太さ/2）
	}
}

/* カテゴリーセレクトボックスのwidthの制限*/
.categoryWidth {
	max-width: 250px;
	width: auto;
}

/* ファイルサイズ表示 */
.fileSize {
	padding-left: 10px;
	font-weight: bold;
}

/* タイトル編集 */
#js-edit_inplace-title {
	display: none;
	position: relative;
	z-index: zIndex(js-edit_inplace-title);
	width: 640px;
	height: 60px;
	@include font-size(12);

	.inputTitle {
		width: 98%;
		padding: 0.2em 0.3em;
		@include font-size(13);
		margin-bottom: 0.5em;
	}

	p {
		text-align: right;
	}
}

#js-edit_inplace-title .closethis {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 14px;
	height: 14px;
	cursor: pointer;
	text-align: center;
}

#js-edit_inplace-title .entryFormColumnBody,
#js-edit_inplace-title .entryFormColumnHead {
	margin-bottom: 10px;
	border: 1px solid #999999;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.js-edit_inplace-title_trigger {
	cursor: pointer;
}

.js-edit_inplace-title_trigger:hover {
	background-color: rgba(163, 196, 234, 0.4)!important;
}

/* 全幅通知 */
.js-notify {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 10px;
	@include font-size(18);
	font-weight: bold;
	text-align: center;
	color: #fff;
	text-shadow: -1px -1px 0 #000;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.66);
}

/* Experiment ダイレクト編集コントローラ */
#js-edit_inplace-control {
	float: right;
	font-weight: bold;
	font-size: 18px !important;
	text-shadow: 1px 1px 1px #ffffff;

	.js-edit_inplace-control-label {
		font-size: 12px;
	}

	button {
		@include opacity(.8);
		width: 50px;
		height: 42px;
		margin: 0;
		padding: 0;
		border-color: #000;
		background-color: #000;
		color: #FFF;
		cursor: pointer;

		&:hover {
			@include opacity(1);
		}
	}
}

.js-edit_sort-control-move {
	position: absolute;
	bottom: 0;
	border: 1px solid #222222;
	@include opacity(.8);
	background-color: #444444;
	text-align: center;
	font-weight: bold;
	font-size: 12px !important;
	color: #ffffff;
	cursor: move;
	z-index: zIndex(js-edit_inplace-title );
	clear: both;
	zoom: 1;
	overflow: hidden;
}

.js-direct-sort-wrap {
	position: relative;
}

/* ユニット追加選択肢 */
#js-edit_inplace-holder {
	clear: both;
	width: 100%;
	background-color: #aaa;
	margin: 10px 0;
}

#js-edit_inplace-detail {
	z-index: zIndex(js-edit_inplace-detail);
}

#js-edit_inplace-units {
	padding: 8px;
	font-size: 18px !important;
	text-align: center;

	button {
		margin: 3px;
		padding: 5px;
		border: 1px solid #333333;
		border-radius: 3px;
		background-color: #fafafa;
		color: #333333;
		cursor: pointer;

		&:hover {
			background-color: #fff;
		}

		&.cansel {
			color: #fff;
			background-color: #777;

			&:hover {
				background-color: #555;
			}
		}
	}
}

/* ソート機能 */
.js-edit_inplace-sort_enable {
	clear: both;
	overflow: hidden;
	border: 3px solid #eee;
	margin: 10px 0;
	padding: 10px 5px;
	@include box-sizing(border-box);
	cursor: pointer;

	&:hover {
		border: 3px #000 solid;
		background-color: rgba(163, 196, 234, 0.4);
		box-sizing: border-box;
	}
}

.js-edit_inplace-sort_enable_column {
	border: 2px #000 solid;
	margin: 10px 0;
	padding: 10px 5px;
	@include box-sizing(border-box);
	cursor: pointer;

	&:hover {
		background-color: rgba(163, 196, 234, 0.4);
		@include box-sizing(border-box);
	}

	.js-edit_inplace-sort_enable {
		border: none;

		&:hover {
			border: none;
			background: none;
		}
	}
}

.js-edit_inplace-sort_placeholder {
	position: relative;
	min-height: 80px;
	margin: 10px 0;
	background-color: rgba(163, 196, 234, 0.2);
	@include box-sizing(border-box);

	&:after {
		content: "\3053\3053\306B\30E6\30CB\30C3\30C8\3092\79FB\52D5"; // 変換：ここにユニットを移動
		position: absolute;
		top: 40%;
		left: 50%;
		margin-left: -80px;
		@include font-size(16);
		font-weight: bold;
	}
}

.js-edit_inplace.align_hidden {
	-moz-opacity: 0.5 !important;
	opacity: 0.5 !important;
	filter: alpha(opacity=50) !important;
}

.js-edit_inplace-sort_label {
	position: relative;
	display: block;
	width: 80px;
	float: right;
	margin-right: 85px;
	margin-bottom: -100px;
	line-height: 2;
	text-align: center;
	color: #ffffff;
	background-color: #333333;
	content: "\975E\8868\793A"; // 非表示
	opacity: 0.7;
	filter: alpha(opacity=70);
	z-index: zIndex(js-edit_inplace-sort_label);
}

.js-edit_inplace-sort_close {
	position: relative;
	display: block;
	width: 80px;
	float: right;
	margin-bottom: -100px;
	line-height: 2;
	text-align: center;
	color: #ffffff;
	background-color: #333333;
	content: "\975E\8868\793A"; // 変換：非表示
	opacity: 0.7;
	filter: alpha(opacity=70);
	z-index: zIndex(js-edit_inplace-sort_close);
}

.js-edit_inplace.align_hidden::before {
	position: relative;
	display: block;
	width: 50px;
	float: right;
	margin-bottom: -100px;
	line-height: 2;
	text-align: center;
	color: #ffffff;
	background-color: #333333;
	content: "\975E\8868\793A"; // 変換: 非表示
}

/* 画面下部コントロール */
#js-edit_inplace-below_control {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: zIndex(js-edit_inplace-below_control);
	width: 100%;
	@include font-size(13);
	font-weight: bold;
	text-align: right;
	color: #ff4500;
	background-color: #fafafa;
	background: rgb(250, 250, 250);
	background: rgba(250, 250, 250, 0.66);
	@include box-sizing(border-box);
	border-top: 1px solid #dddddd;

	span {
		padding: 7px 20px;
	}
}

#js-edit_inplace-show_detail,
#js-edit_inplace-sort_enable,
#js-edit_inplace-mode_abort {
	margin: 0;
	padding: 7px 10px;
	border: none;
	border-left: 1px solid #333333;
	text-shadow: -1px -1px 0 #000;
	color: #ffffff;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.66);
	@include font-size(12);
	cursor: move;

	&:hover {
		background-color: rgba(0, 0, 0, 0.50);
	}

	&:active {
		text-shadow: -2px -2px 1px #000;
	}
}

// #js-edit_inplace-show_detail:hover,
// #js-edit_inplace-sort_enable:hover,
// #js-edit_inplace-mode_abort:hover {
// 	background-color: rgba(0,0,0,0.50);
// }
// #js-edit_inplace-show_detail:active,
// #js-edit_inplace-sort_enable:active,
// #js-edit_inplace-mode_abort:active {
// 	text-shadow: -2px -2px 1px #000;
// }

/* モジュール設定リンク */
.acms-module-edit {
	display: none !important;
	padding: 1px 4px;
	background-color: #000000;
	border: 1px solid #000000;
	border-bottom-left-radius: 4px;
	opacity: 0.7;
	z-index: zIndex(acms-module-edit) !important;
}

.acms-module-edit-wrapper {
	position: relative;
	z-index: 0;

	.acms-module-edit {
		position: absolute;
		top: -2px;
		right: -2px;
		margin: 0;

		a {
			color: #ffffff;
		}
	}

	&:hover {
		&:before {
			content: "";
			position: absolute;
			top: -4px;
			right: -4px;
			bottom: -4px;
			left: -4px;
			border: 2px solid #666;
			border-radius: 4px;
			z-index: -1;
		}

		.acms-module-edit {
			display: inline !important;
		}
	}
}

// ボタングループ
@media (max-width: $breakpoint-md-max) {
	.acms-btn-action-group th,
	.acms-btn-action-group td {
		display: block;
		width: 100%;
	}
}

// ---------------
// メディア挿入
// ---------------
// 全体囲い
.acms-media-insert {
	.acms-media-body {
		height: 80%;
	}

	// リスト
	.acms-media-list {
		margin-right: 20px;
		height: 68%;
		overflow: scroll;
	}

	.acms-media-list ul {
		padding-left: 20px;
	}

	.acms-media-list li {
		margin: 5px;
		float: left;
		list-style-type: none;
	}

	// フィルター
	.acms-filter {
		margin: 20px;
	}

	// フッター
	.acms-media-footer {
		height: 40px;
	}

	// 挿入ボタン
	.acms-media-footer button {
		float: right;
		margin-right: 20px;
	}

	// 画像プレビュー
	.acms-media-preview {
		display: block;
		max-width: 100%;
		max-height: 100px;
		overflow: hidden;
		margin-left: auto;
		margin-right: auto;
	}

	// 選択時
	.media_selected {
		border: 3px solid #004cc5;
		opacity: 0.7;
	}
}

// JavaScript用 操作class
.js-media_thumbnail {
	display: table;
	width: 200px;
	height: 180px;
	padding: 5px;
	border: 3px solid #aaaaaa;
	@include box-sizing(border-box);

	&:hover {
		cursor: pointer;
	}
}

.acms-media-wrap {
	display: table-row;
}

.acms-media-img {
	display: table-cell;
	width: 100%;
	height: 100px;
	max-width: 100%;
	vertical-align: middle;
}

.js-media_more {
	width: 103px;
	height: 103px;
	background-color: #aaaaaa;

	&:hover {
		cursor: pointer;
	}
}

// スマートフォンの時に挿入ボタンを見えるようにする
@media (max-width: $breakpoint-md-max) {
	#js-media_view {
		position: absolute !important;
	}

	#js-media_view_inner {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		min-height: 800px;
	}

	.acms-media-insert {
		.media-body {
			height: 100%;
		}

		.media-list {
			height: 300px;
		}
	}
}

// ---------------
// ポップアップ
// ---------------
// タイトル
.acms-popup-heading {
	position: relative;
	border-color: #dddddd;
	background-color: #f5f5f5;
	color: #333333;
}

.acms-popup-heading-title {
	margin: 0;
	padding: 10px 20px;
	@include font-size(16);
}

.acms-popup-heading-close {
	position: absolute;
	top: 12px;
	right: 20px;
	color: #333333;
	@include font-size(16);
}

// ---------------
// 管理ボタン集
// ---------------
#adminBox,
.acms-box {
	padding: 10px;
	border: solid 1px $edit-entry-bg-color-dark;
	background-color: $edit-entry-bg-color-base;
	margin-bottom: 20px;
	@include font-size(14);

	#loginUserStatus {
		margin: 0 0 8px;
		font-size: 12px;
	}

	.acms-inline-btn {
		margin-bottom: 5px;
	}
}


#adminMinBox {
	padding: 10px;
	background-color: #dddddd;
	margin-bottom: 20px;
	font-size: 14px;
	display: none;
}

.js-dragAdminBox {
	z-index: zIndex(js-dragAdminBox);
	position: fixed;
	top: 0;
	left: 10px;
	border-right: solid 2px #333333 !important;
	border-left: solid 2px #333333 !important;
	border-bottom: solid 2px #333333 !important;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	opacity: 0.9;

	.dragBoxToggle {
		cursor: pointer;
		float: right;
		padding: 0 5px;
		font-size: 14px;
	}

	.dragBoxHandle {
		cursor: move;
		float: right;
		padding: 0 5px;
		font-size: 14px;
	}
}

.acms-btn-action-group {
	clear: both;
	margin: 10px;
	padding: 10px 10px 0;
	border: solid 1px $edit-entry-bg-color-dark;
	background-color: $edit-entry-bg-color-base;

	th {
		width: 110px;
		padding-right: 10px;
		@include font-size(12);
		font-weight: normal;
		text-align: left;
		vertical-align: top;
	}

	table,
	th,
	td {
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		background-color: $edit-entry-bg-color-base !important;
		color: #333333 !important;
	}

	.acms-inline-btn {
		margin-bottom: 10px;
	}
}

.acms-label-approval-group {
	display: inline;
	padding: 0 10px;

	a,
	a:visited {
		color: #006dd9;
	}
}

// ------------------------------
// ユーザー
// ------------------------------
.acms-user {
	border-radius: 50%;
	vertical-align: middle;
}

// ---------------
// バージョン管理
// ---------------
.revison_box .acms-table-responsive {
	padding: 0;
}

.acms-table-revison {
	table-layout: auto;
	padding: 0;
	border-collapse: collapse;

	td {
		padding: 8px 5px !important;
		@include font-size(14);
	}

	.acms-table-revison-title {
		@include font-size(13);
	}

	.acms-table-current td {
		background-color: #abd6f9;
	}

	.th1 {
		width: 65px;
	}

	.th2 {
		width: 140px;
	}

	.th3 {
		width: 90px;
	}

	.th4 {
		width: 130px;
	}

	.th5,
	.th7 {
		width: 70px;
		text-align: center;
	}

	.th6 {
		width: 110px;
	}

	@media (max-width: $breakpoint-md-max) {
		th,
		.acms-btn-admin {
			white-space: nowrap;
		}
	}
}

// スクロール
.acms-table-revison-scroll {
	height: 300px;
	overflow: scroll;
}

// 管理ボタン
.acms-revison-admin {
	padding: 10px;
	border: solid 1px $edit-entry-bg-color-dark;
	background-color: $edit-entry-bg-color-base;
	margin-bottom: 10px;

	.js-get_revisions {
		margin-right: 15px;
	}

	.acms-label {
		margin-right: 15px;
	}
}

// ---------------
// revision プレビュー
// ---------------
// 幅と高さの突抜を防止
.acms-revision-preview #acms-main {
	@include box-sizing(border-box);
}

.acms-revision-actions {
	white-space: nowrap;
	float: right;
}

.acms-revision-preview-btn {
	padding: 10px;
}

// サイドバー
.acms-revision-sidebar {
	float: left;
	width: (2/12)*100%;
	padding-top: 50px;
	min-height: 100%;
	background: #EEE;
	overflow: auto;

	.acms-padding-small {
		border-bottom: solid 1px #cccccc;
	}
}

.acms-revision-main {
	float: left;
	width: (10/12)*100%;
	height: 100%;
}

// revisionタイトル
.acms-revision-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	height: 50px;
	padding: 10px;
	background-color: #464646;
	color: #cccccc;
	box-sizing: border-box;

	.acms-revision-header-title {
		margin: 0;
		@include font-size(18);
	}
}

// コメント
.acms-revision-comment {
	list-style: none;
	margin: 0;
	padding: 0;

	li {
		padding: 12px;
		border-bottom: solid 1px #cccccc;
	}

	// 日付
	.acms-revision-comment-date {
		margin-bottom: 5px;
		@include font-size(11);
	}

	// 写真
	.acms-revision-comment-photo {
		margin: 0 0 10px;

		img {
			margin-right: 10px;
			vertical-align: middle;
		}
	}

	// 担当者と期限
	.acms-revision-comment-user {
		list-style: none;
		margin: 0;
		padding: 5px;
		border: solid 1px #cccccc;
		background-color: #dddddd;
		@include font-size(11);
	}

	ul li {
		padding: 0;
		border-bottom: none;
	}
}

@media (max-width: $breakpoint-md-max) {
	.acms-revision-preview {
		// メインを非表示
		#acms-main {
			display: none;
		}

		// 固定解除
		#outer-wrap #nav,
		#outer-wrap #top {
			position: static;
		}

		// 高さをオート
		.acms-revision-header,
		#nav:not(:target) {
			height: auto;
		}
	}
	.acms-revision-header .acms-revision-header-title {
		margin-bottom: 10px;
	}
	.acms-revision-actions {
		float: none;
		white-space: normal;
		.acms-btn-admin {
			margin-bottom: 5px;
		}
	}
}

// ---------------
// タイトル
// ---------------
.acms-title {
	margin: 0 0 5px;
	@include font-size(14);
}

// ---------------
// tabs
// ---------------
.js-tabs {
	margin-bottom: 30px;
}

// ---------------
// dialog
// ---------------
body .ui-dialog {
	z-index: zIndex(ui-dialog);
}

// ---------------
// メディア
// ---------------
// メディアのドロップエリア
.acms-media {
	background-color: #f2f2f4;
}

.acms-drop-inside {
	width: 100%;
	margin: 20px auto;
	padding: 30px 0;
	text-align: center;
	border: 3px dashed transparent;
}

// テキスト
.acms-drop-inside {
	.acms-icon-media {
		padding: 0;
		color: #ccc;
		@include font-size(100);
	}

	p {
		color: #999;
		text-align: center;
	}
}

.acms-media-dropText {
	@include font-size(15);
}

// プログレスバー内エラー文
.acms-progress-bar span {
	display: inline-block;
	margin-top: 5px;
	color: #fff;
}

// プログレスバー
.acms-progress.acms-active .acms-progress-bar {
	-webkit-animation: progress-bar-stripes 1s linear infinite;
	-moz-animation: progress-bar-stripes 1s linear infinite;
	-ms-animation: progress-bar-stripes 1s linear infinite;
	-o-animation: progress-bar-stripes 1s linear infinite;
	animation: progress-bar-stripes 1s linear infinite;
}

// 画像サイズ
.preview_img {
	width: 60px;
	height: 60px;
	overflow: hidden;
}

// ドラッグ&ドロップ時
.drag-n-drop-hover {
	&.acms-media {
		background: #fff;
	}

	.acms-drop-inside {
		border-color: #006dd9;
	}

	.acms-icon-media {
		color: #006dd9;
	}

	.acms-media-dropText {
		color: #006dd9;
	}
}

// ---------------
// ページ下 メタ情報一覧
// ---------------
.acms-edit-info {
	background-color: #efefef;
	padding: 15px;
	border: 1px solid #ddd;
	margin: 20px 0;
	font-size: 14px;
	line-height: 1.7;
}

.acms-edit-info-heading {
	padding: 5px 10px;
	color: #fff;
	@include font-size(16);
	background-color: #666;

	a,
	a:visited,
	a:active,
	a:focus {
		color: #fff;
	}
}

.acms-edit-info-table {
	background: #fff;

	th {
		width: 1%;
		white-space: nowrap;
	}
}

.acms-edit-info-ogpimage {
	width: 100%;
	max-width: 100px;
	height: auto;
}

@media (max-width: $breakpoint-md-max) {
	.acms-edit-info-table {
		th,
		td {
			display: block;
			@include box-sizing(border-box);
		}

		th {
			width: 100%;
			padding: 5px 10px;
			color: #fff;
			background: #aaa;
			white-space: inherit;
		}
	}
}

@media (min-width: $breakpoint-md-min) {
	.acms-edit-info-table {
		th,
		td {
			padding: 15px;
		}
	}
}

// ---------------
// レイアウトモジュール編集画面
// ---------------
.acms_layout_row {
	cursor: move;
}

// サイドメニュー
.acms-layout-menu {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: zIndex(acms-layout-menu);
	width: 220px;
	background: #ddd;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
	@include translateZ(0);
}

.acms-layout-menu-header {
	min-width: 200px;
	padding: 10px;
	color: #fff;
	@include font-size(13);
	border-radius: 3px 3px 0 0;
	background: #333;
	cursor: move;
}

.acms-layout-menu-delete {
	color: #fff;
}

.acms-layout-menu-half {
	float: left;
	width: 50%;
	padding: 0 5px;
	@include box-sizing(border-box);
}

// アコーディオン
.acms-layout-menu-group-heading {
	display: block;
	padding: 7px 10px 7px 28px;
	color: #fff;
	@include font-size(13);
	font-weight: bold;
	border-radius: 0;
	border-top: 1px solid #fff;
	background: url('../images/marker/arrow_black05.png') no-repeat 10px center #9898a2;
	background-size: 8px 5px;

	&:link {
		color: #fff;
		text-decoration: none;
	}

	&:hover {
		background-color: #6b6b74;
	}

	&:visited,
	&:active {
		color: #fff;
	}

	&:first-child {
		border: 0;
	}
}

.acms-layout-menu-group-body {
	padding: 10px 10px 0 10px;
	background: #fff;
	overflow: hidden; // 簡易clearfix
}

.acms-layout-menu-inner {
	padding: 10px;
	@include box-sizing(border-box);
}

.acms-layout-unit-menu {
	overflow-y: scroll;
}

.acms-layout-menu-order {
	margin: 0;
	background: #fff;
}

.acms-layout-menu-text {
	margin: 0;
	color: #333;
}

.acms-layout-menu-step-label {
	margin: 0 5px 0 0;
}

.js-acms_layout_list {
	.acms-layout-unit {
		display: none;
	}
}

// テーブルユニット
.acms-tabs-panel .a-table {
	background-color: #d0d0d0;
}

.entryFormColumnBody .a-table th {
	font-weight: normal;
	cursor: pointer;
}

.entryFormColumnBody .a-table td {
	border: 1px solid #cccccc !important;
}
.acms-table-unit-inner .acms-btn-group {
	margin: 7px 10px 7px 0;
	padding: 0;
}

[class^=js-editable-table] .acms-btn-group {
	float: left;
}

.acms-table-unit-inner .a-table-header th {
	height: 20px;
}

.a-table td,
.a-table th {
	padding: 5px !important;
	font-size: 13px;
}

.acms-table-unit-handle {
	display: none;
	text-align: right;
	padding-top: 5px;
	padding-bottom: 5px;
	width: 80vw;
}

.acms-table-unit-handle-inner span {
	transform: rotate(90deg);
	color: #fff;
	vertical-align: middle;
}

@media screen and (max-width: $breakpoint-md-max) {
	.acms-table-unit-container .acms-btn-group .acms-btn {
		height: 44px;
	}

	.acms-table-unit-handle {
		display: block;
	}

	.a-table-wrapper .a-table td,
	.a-table-wrapper .a-table th {
		display: table-cell !important;
		padding: 10px !important;
		padding-bottom: 10px !important;
	}

	.a-table td,
	.a-table th {
		font-size: 16px;
	}
}

// 挿入ボックス
.acms-insert-box {
	display: block;
	width: 100%;
	padding: 12px 0;
	@include font-size(14);
	color: #333;
	text-align: center;
	border: 1px solid #cccccc;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
}

.acms-insert-box-layout {
	margin: 0 0 10px 0;
	background: #e5e5e9;
}

.acms-insert-box-module {
	margin: 10px 0 0 0;
	@include font-size(18);
	font-weight: bold;
	background: #ffffff;
	border-radius: 6px;

	.acms-icon-module {
		margin: 0 5px 0 0;
		color: #999;
		@include font-size(20);
	}
}

// レイアウトモジュールメイン
.js-acms_layout_frame {
	position: relative;
	padding: 5px 0;

	&:before {
		// レイアウト範囲表示
		content: "";
		position: absolute;
		top: -2px;
		right: -2px;
		bottom: -2px;
		left: -2px;
		border: 2px dashed #000;
	}
}

.acms-layout-edit {
	.acms-layout-menu-inner {
		display: none;
	}

	// レイアウトユニット
	.acms-layout-unit {
		margin-bottom: 5px;
		padding: 0 3px 3px 3px;
		background-color: $layout-unit-bg;
		border: 1px solid $layout-unit-border;
		border-radius: 4px;
		cursor: move;
		@include box-sizing(border-box);

		.acms-layout-contents {
			padding: 3px;
			@include clearfix();
		}

		.acms-layout-contents-inner {
			min-height: 130px;
			padding: 5px 5px 0 5px;
			background-color: #fff;
			border: 1px dashed $layout-contents-border;
		}
	}

	// ユニット内ラベルの名前
	.acms-layout-label-name {
		font-weight: bold;
		@include font-size(13);
		color: #666;
	}

	// モジュールユニット
	.acms-layout-module-unit {
		margin-bottom: 5px;
		padding: 0 5px 5px 5px;
		background: #7096cd;

		.acms-layout-contents {
			min-height: 130px;
			background-color: #fff;
			border: 0;
		}
	}

	.acms-layout-edit-box {
		position: relative;
		padding: 5px 10px;
		color: #666;
		@include font-size(13);

		&:before {
			display: block;
			position: absolute;
			left: 0;
			right: 0;
			width: 100%;
			height: 13px;
			content: "";
			background: url('../images/marker/ico_dragabble.png') no-repeat center center;
			background-size: 23px 13px;
		}

		[class*='acms-icon'] {
			&:before {
				@include font-size(12);
				vertical-align: middle;
			}
		}

		.acms-layout-control-btn {
			position: relative;
			vertical-align: middle;
			line-height: 1.3;
		}
	}

	.acms-layout-module-unit .acms-layout-edit-box {
		padding: 10px 5px 5px 0;
		color: #fff;

		.acms-icon-delete {
			&:before {
				color: #fff;
			}
		}
	}
}

.acms-layout-placeholder {
	position: relative;
	min-height: 80px;
	margin: 10px 0;
	@include font-size(13);
	background-color: $layout-placeholder-bg;
	border: 2px solid $layout-placeholder-border;
	@include box-sizing(border-box);

	&:after {
		content: "\30EC\30A4\30A2\30A6\30C8\3092\3053\3053\306B\30C9\30E9\30C3\30B0"; // 変換： レイアウトをここにドラッグ
		position: absolute;
		top: 40%;
		left: 50%;
		margin-left: -70px;
		color: $layout-placeholder-color;
	}
}

.acms-module-placeholder {
	position: relative;
	min-height: 80px;
	margin: 10px 0;
	@include font-size(13);
	background-color: $module-placeholder-bg;
	border: 2px solid $module-placeholder-border;
	@include box-sizing(border-box);

	&:after {
		content: "\30E2\30B8\30E5\30FC\30EB\3092\3053\3053\306B\30C9\30E9\30C3\30B0"; // 変換： ���ジュールをここにドラッグ
		position: absolute;
		top: 40%;
		left: 50%;
		margin-left: -70px;
		color: $module-placeholder-color;
	}
}

.preview-container {
	position: fixed;
	z-index: zIndex(preview-container);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	overflow: hidden;
}

// ---------------
// レイアウトモジュール モジュール選択画面
// ---------------
.acms-layout-module-edit {
	.acms-filter {
		padding: 10px;
		border-top: 0;
		border-color: $layout-edit-border;
	}
}

.acms-layout-sidebar {
	padding: 0;

	ul{
		list-style: none;
		margin: 0;
		padding-left: 0;
	}
	dl{
		margin-top: 0;
	}
	dd{
		margin: 0;
	}
}

.acms-layout-module-edit-inner {
	background-color: #fff;
	border: 1px solid $layout-edit-border;
	@include clearfix();
}

.acms-layout-module-edit-tpl-type {
	margin: 0 10px 0 0;
	font-weight: bold;
	color: #666;
}

.acms-layout-sidebar-item {
	padding: 10px 10px;
	@include font-size(14);
	font-weight: bold;
	line-height: 1.2;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	background: $edit-entry-bg-color-light;
	@include transition(all .2s linear);

	&.acms-layout-sidebar-item-selected {
		background: $edit-entry-bg-color-darker;
	}

	&.acms-layout-sidebar-item-active {
		background: $edit-entry-bg-color-white;
		border-right: 1px solid #fff;
	}

	&:hover {
		cursor: pointer;
		background: $edit-entry-bg-color-white;
		border-right: 1px solid #fff;
	}

	[class*="acms-label"] {
		font-weight: normal;
	}
}

.acms-layout-sidebar-item-inner {
	display: table;
	width: 100%;
}

.acms-layout-sidebar-item-cell {
	display: table-cell;
}

.acms-layout-sidebar-item-cell-full {
	width: 100%;
}

.acms-layout-sidebar-item-cell-middle {
	vertical-align: middle;
}

// サイドバー中身
.acms-layout-sidebar-item-main-inner {
	display: table;
	width: 100%;
}

.acms-layout-sidebar-item-main {
	margin: 0;
	font-size: 14px;
}

.acms-layout-sidebar-item-sub {
	display: block;
	margin: 0 0 8px 0;
	font-size: 12px;
	font-weight: normal;
	color: #666;

	p {
		margin: 0;
	}
}

.acms-layout-sidebar-link a {
	padding: 20px 10px 20px 20px;
	padding-left: calc(10px + constant(safe-area-inset-left));
	color: #333;
	@include font-size(14);
	font-weight: bold;
	&:hover {
		text-decoration: none;
	}
}


.acms-layout-scroll-area {
	overflow: auto;
}

// ---------------
// レイアウトモジュール確認画面
// ---------------
//レイアウトプレビューモードのときのルートのhtml要素
.js-layout_preview_mode {
	position: fixed;
}

// PC画面表示
.acms-layout-desktop-preview {
	border-right: 1px solid #ccc;
	left: 0;
	right: 420px;
}

// モバイル画面表示
.acms-layout-mobile-preview {
	position: fixed;
	right: 0;
	width: 420px;
	background: #ddd;
	overflow: scroll;
}

.acms-layout-mobile-preview * {
	@include box-sizing(border-box);
}

.acms-layout-mobile-phone-frame {
	margin: 20px auto;
	border: 2px solid #bcbcbc;
	width: 360px;
	height: 680px;
	padding-top: 50px;
	padding-left: 18px;
	position: relative;
	border-radius: 35px;
	clear: both;
	background: #fff;

	&:before {
		content: "";
		border: 2px solid #bcbcbc;
		position: absolute;
		bottom: 10px;
		left: 158px;
		width: 40px;
		height: 40px;
		border-radius: 20px;
		@include box-sizing(border-box);
	}

	&:after {
		content: "";
		border: 3px solid #bcbcbc;
		position: absolute;
		top: 25px;
		left: 138px;
		width: 80px;
		height: 6px;
		border-radius: 5px;
		@include box-sizing(border-box);
	}
}

.acms-layout-preview-iframe-wrapper {
	border: 2px solid #bcbcbc;
	width: 320px;
	height: 568px;
	border-radius: 3px;
	z-index: zIndex(acms-preview-iframe-wrapper);
}

.acms-layout-desktop-preview-inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fefefe;
}

.acms-layout-preview-col {
	position: absolute;
	top: 0;
	bottom: 0;
}

.acms-layout-preview-split-left {
	left: 0;
	right: 420px;
}

@media screen and (max-width: 1000px) {
	.acms-layout-preview-split-left {
		right: 40px;
	}

	.acms-layout-mobile-preview {
		width: 40px;
	}

	.acms-layout-mobile-phone-frame {
		display: none;
	}
}
