@use 'sass:math';
@use '../global/common' as global;

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

// ---------------
// フィルター
// ---------------
.acms-filter {
  margin-bottom: 20px;
  background: global.$acms-color-gray20;
  border: 1px solid global.$acms-color-gray50;

  @include global.font-size(14);

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

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

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

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

.acms-filter-label {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  width: 5em;
  min-height: 26px;
  margin: 0 15px 8px 0;
  font-weight: bold;
  color: global.$acms-color-gray90;
  white-space: nowrap;
}

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

.acms-filter-item {
  display: flex;
  align-items: center;
  margin: 0 8px 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;
  align-items: center;
  width: 100%;
}

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

.acms-filter-detail-btn {
  margin: 0 0 0 auto;
  font-weight: bold;
  color: global.$acms-color-black;
  white-space: nowrap;

  @include global.font-size(12);

  a {
    color: global.$acms-color-black;

    &:hover,
    &:visited,
    &:active,
    &:focus {
      color: global.$acms-color-black;
    }

    &: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;
    transition: transform 0.2s;

    @include global.font-size(13);
  }
}

.acms-filter-inner {
  padding: 0 8px;
  margin: 0 -10px;
  border-bottom: 1px solid global.$acms-color-gray50;
}

.acms-filter-footer {
  display: flex;
  align-items: center;
  padding: 8px;
  background: global.$acms-color-gray20;

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

@media screen and (max-width: global.$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: flex-start;
    width: 100%;
  }
}

@media screen and (min-width: global.$breakpoint-md-min) {
  .acms-filter-group {
    flex-flow: row nowrap;
    align-items: flex-start;
  }

  .acms-filter-content {
    flex-direction: row;
    align-items: center;
  }

  .acms-filter-content-fit {
    width: 100%;
  }

  .acms-filter-just {
    display: flex;
  }
}

@media screen and (min-width: global.$breakpoint-lg-min) {
  .acms-filter-content-fit {
    flex-wrap: nowrap;
  }
}

@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;
  line-height: 1.3;
  color: global.$acms-admin-title-textcolor;

  @include global.font-size(20);
}

// title2
.acms-admin-title2 {
  padding: 0;
  margin: 10px 0;
  color: global.$acms-admin-title2-textcolor;

  @include global.font-size(14);

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

.acms-tabs-panel {
  .acms-admin-title2 {
    padding: 3px 5px;
    margin: 0 0 10px;
    background: global.$acms-color-gray20;
  }
}

// title3
.acms-admin-title3 {
  padding: 5px 10px;
  margin: 0 0 10px;
  color: global.$acms-color-black;
  background: global.$base-bg-light-gray;

  @include global.font-size(14);

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

.acms-title-info {
  display: inline-block;
  padding: 0;
  margin: 0;
  font-weight: bold;
  line-height: 1.5;
  list-style: none;

  @include global.font-size(14);
}

.acms-title-info-item {
  display: inline-block;
  margin: 0 10px 5px 0;
}

.acms-title-info-item-name {
  margin: 0 10px 0 0;
}

.acms-page-header-detail {
  display: flex;
  width: 100%;
}

.acms-page-header-side {
  margin-left: auto;
}

.acms-page-header-btn {
  margin: 0;
}

// ---------------
// フォームグループ
// ---------------
.acms-form-group2 {
  padding: 10px;
  border: 1px solid global.$acms-color-gray50;
}

// ---------------
// ユニット
// ---------------

// ユニット タイトル
.acms-unitbox-title {
  margin: 5px 5px 5px 0;
  color: global.$acms-color-black;

  @include global.font-size(15);
}

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

  @include global.clearfix;

  &:hover {
    box-shadow: 0 1px 1px 1px rgb(0 0 0 / 10%);
  }

  // ボタン
  .adminBtn {
    display: block;
    margin-bottom: 10px;
    line-height: 1;

    @include global.font-size(15);
  }

  .adminBtn:hover {
    cursor: move;
  }

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

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

/* ---------------
ユニット
--------------- */
.entryFormColumnBody {
  .entryFormFileentryFormImages,
  .formColumnMapTd {
    padding-right: 10px !important;
  }
}

.js-table-header {
  td,
  th {
    min-width: 100px;
  }
}

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

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

.highlight3 {
  color: #000;
  background-color: #9f9;
}

.highlight4 {
  color: #000;
  background-color: #f99;
}

.highlight5 {
  color: #000;
  background-color: #f6f;
}

.highlight6 {
  color: #000;
  background-color: #800;
}

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

/* 投稿フォーム */
#entryForm {
  width: 100%;
  background: global.$acms-color-system-gray10;
}

/* 投稿フォーム内容の囲み */
.entryFormWrapper {
  padding: 10px;
  _padding: 0;
  background: global.$acms-color-system-gray10 !important;

  @include global.font-size(14);
}

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

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

  th,
  td {
    color: global.$acms-color-black !important;
    background-color: global.$acms-color-system-gray10 !important;
    border: none !important;
  }

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

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

  .thY {
    width: 30%;
  }
}

/* 関連記事入力UI */
.acms-related-list-wrap {
  .Select-input {
    width: 100%;
  }

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

@media screen and (min-width: global.$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;
  vertical-align: middle;
}

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

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

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

/* 位置情報 */
.js-go_form table {
  width: 100%;
}

.entryFormGeoMap {
  margin: 0 0 15px;

  & > 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;
  }
}

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

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

.acms-drop-area-wrap {
  position: absolute;
  inset: 0;

  .js-drop_area & {
    display: none;
  }

  .js-drop-media_area & {
    display: none;
  }

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

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

  &::before {
    position: absolute;
    inset: -10px;
    z-index: global.zIndex(acms-drop-area-before);
    content: '';
    background: global.$acms-color-white;
    border: 3px global.$acms-color-info70 dashed;
  }
}

.acms-drop-area-inner {
  display: none;
  text-align: center;

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

.acms-drop-area-icon {
  font-size: 30px;
  color: global.$acms-color-info70;
}

.acms-drop-area-text {
  font-size: 14px;
  color: global.$acms-color-info70;
}

/* 動的フォーム テーブル */
.entryDynamicFormTable {
  width: 100%;
  border: none !important;

  th {
    font-weight: bold;
  }
}

.entryFormColumnBody {
  .entryDynamicFormTable th,
  .entryDynamicFormTable 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;
  }

  .entryDynamicFormTable .formUnitGroupValue {
    width: 80% !important;
  }

  .formUnitGroupAddTable {
    width: 100%;
  }
}

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

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

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

    table td.acms-border-bottom-sp {
      border-bottom: global.$acms-table-border !important;
    }
  }
}

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

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

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

    th,
    td {
      background-color: global.$acms-color-system-gray10 !important;
    }
  }

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

      .detail-fade-head {
        display: block !important;
        width: 100% !important;
        padding: 7px 0 !important;
        font-weight: bold;
        color: global.$acms-color-info80;
        text-align: center !important;
        text-decoration: none;
        background-color: global.$acms-color-system-gray20;
        outline: 0 !important;

        @include global.font-size(14);
      }
    }
  }
}

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

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

  th,
  td {
    border: none;
  }
}

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

  @if $admin == true {
    font-family: global.$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,
  .acms-form-width-medium,
  input.acms-form-width-medium,
  .acms-form-width-small,
  input.acms-form-width-small,
  .acms-form-width-mini,
  input.acms-form-width-mini {
    width: 100%;
  }

  .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-right: 0;
    padding-left: 0;
  }
}

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

.acms-accordion-title {
  margin: 0;

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

.acms-accordion-title-link {
  display: block;
  padding: 7px 0;
  font-weight: bold;
  color: global.$acms-color-info80;
  text-align: center;
  text-decoration: none;
  background-color: global.$acms-color-system-gray20;

  @include global.font-size(14);

  &:hover {
    color: global.$acms-color-info80;
    text-decoration: none;
    background-color: global.$acms-color-system-gray30;
  }
}

.acms-accordion-inner {
  padding: 10px;
  background: global.$acms-color-system-gray10;

  .entryFormTable td,
  .entryFormTable th {
    background: global.$acms-color-system-gray10 !important;
  }
}

// ---------------
// ソート用テーブル
// ---------------
.acms-table-sort {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid global.$acms-color-gray60;
  border-bottom: 1px solid global.$acms-color-gray60;

  th,
  td {
    padding: 10px;
    vertical-align: middle;
    border-top: 1px solid global.$acms-color-gray60;
    border-bottom: 1px solid global.$acms-color-gray50;
  }
}

.acms-icon-mute {
  color: global.$acms-color-gray70;
}

.acms-edit-icon-btn {
  @include global.font-size(18);
}

// ---------------
// カスタムフィールド用テーブル
// ---------------
.entryFormWrapper {
  .acms-admin-title2 {
    padding: 5px 10px;
    margin: 0 0 10px;
    background: global.$acms-color-system-gray20;
  }

  .acms-table-admin {
    th,
    td {
      background: transparent;
    }
  }

  .acms-table-heading {
    th {
      background: global.$acms-color-system-gray20;
    }
  }
}

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

/* フォームグループのサイズ調整 */
.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;
    white-space: nowrap;
    vertical-align: middle;
  }
}

@media (max-width: global.$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 {
    padding-bottom: 0;
    text-align: left;
  }

  .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%;
  min-height: 2em;

  @include global.font-size(16);
}

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

  th,
  td {
    border: none;
  }
}

.entryFormFileControl {
  line-height: 2em;
  vertical-align: top;

  .js-img_resize_input:focus + .acms-btn-admin {
    border: 1px solid global.$acms-btn-focus-border-color;
  }
}

.entryFormFileControl {
  &,
  th,
  td {
    background-color: transparent !important;
    border: none !important;

    @include global.font-size(13);
  }

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

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

.entryFormFileControlSelects {
  max-width: 400px;
  margin: 0 -5px 10px;

  @include global.clearfix;
}

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

  select {
    width: 100%;
  }
}

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

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

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

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

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

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

  th {
    width: 10em;
    text-align: right;
    background-color: global.$acms-color-gray10;
  }

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

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

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

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

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

  // 詳細設定
  .toggle {
    display: block;

    @include global.font-size(14);

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

    &:hover {
      text-decoration: none;

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

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

@media (max-width: global.$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;
      }
    }
  }
}

.entryFormImageTableWrap {
  position: relative;
}

.entryFormImageTableEditBtn {
  position: absolute;
  top: 5px;
  right: 5px;
}

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

.acms-media-img-container .entryFormFileentryFormFile {
  img {
    width: 70px;
    height: auto;
  }
}

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

.entryFormColumnItem {
  position: relative;
  margin: 10px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 20%);

  &:focus {
    outline: none;
  }

  &:hover .entryFormColumnAddunitWrap {
    display: block;
  }

  .acms-form-direct & {
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 20%);
  }
}

.entryFormColumnItem-toberemoved {
  display: none;
}

/* 拡張ラベル */

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

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

@media (max-width: global.$breakpoint-md-max) {
  .acms-extend-field-wrap {
    display: table;
    margin: 10px 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;
  padding: 5px 10px 0 30px;
  margin: 0;
  color: global.$acms-color-white;
  background: global.$edit-entry-bg-color-darker;
  border-radius: 3px 3px 0 0;

  @include global.font-size(13);
  @include global.box-sizing(content-box);

  select {
    min-height: 24px;
    padding-top: 2px;
    padding-bottom: 2px;

    @include global.font-size(12);
  }
}

@media (max-width: global.$breakpoint-md-max) {
  .entryFormColumnHeadLabel {
    @include global.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 {
      color: global.$acms-color-black;
      background: global.$edit-entry-bg-color-dark;
      transition:
        opacity 0.2s linear,
        background 0.2s linear;
    }

    .entryFormColumnHead {
      .sorthandle,
      .togglebody,
      .removethis,
      .addunit {
        color: global.$acms-color-black;
      }

      [name='align[]'] {
        border: 1px solid global.$acms-color-danger70;
      }
    }

    .entryFormColumnBody {
      background-color: rgba(global.$acms-color-system-gray30, 0.66);

      .entryFormLiteEditor,
      .lite-editor-source,
      .lite-editor-toolbox {
        @include global.opacity(0.66);
      }
    }

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

/* 記事概要部分のカラム */
.entryFormColumn .entryFormColumnItem-summary {
  .entryFormColumnHead {
    background-color: global.$acms-color-system-gray70;
  }

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

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

  @include global.font-size(14);

  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: global.$breakpoint-md-min) {
  .entryFormColumnBody {
    .lite-editor-select {
      margin-bottom: 0;
    }
  }
}

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

.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: global.$acms-color-gray70;
  text-align: center;

  @include global.font-size(100);
}

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

@media (min-width: global.$breakpoint-lg-min) {
  .entryFormFileentryFormImages {
    width: 320px;
  }
}

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

.categoryAdder {
  position: absolute;
  z-index: 1;
  display: none;
  padding: 10px;
  background: global.$acms-color-gray50;
}

.categoryAdder table {
  _width: 50%;
  background: global.$acms-color-gray10;
}

.categoryAdder .textbox {
  width: 80px;
}

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

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

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

  a {
    display: inline-block;
    padding: 5px;
    line-height: 1;
    border: 1px solid global.$acms-color-gray80;
    border-radius: 5px;

    &:hover {
      background-color: global.$acms-color-gray50;
    }
  }
}

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

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

  &::before {
    position: absolute;
    inset: 0;
    content: '';
  }

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

/* カラム(v1.1からカラム→ユニットと改名) */
.entryFormColumn .entryFormColumnHead .entryFormColumnHeadLayoutBox {
  width: auto;

  input,
  select {
    position: relative;
    max-width: 140px;
    margin: 0 0 5px;
  }

  // ダイレクト編集のとき
  .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;
    line-height: 1.5;
    background-color: transparent;

    @include global.font-size(13);

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

  .addunit,
  .togglebody,
  .closethis,
  .removethis {
    float: left;
    width: 18px;
    height: 18px;
    padding: 2px;
    margin: 0 0 0 5px;
    color: global.$edit-entry-bg-color-darker;
    text-align: center;
    cursor: pointer;
    background: global.$acms-color-white;
    border: 0;
    border-radius: 50%;

    @include global.font-size(10);

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

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

  .handle:hover {
    cursor: move;
  }

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

    &:focus {
      outline: 0;
    }

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

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

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

    .removethis {
      top: 1px;

      @include global.font-size(12);
    }

    .togglebody {
      @include global.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;
}

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

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

  @include global.font-size(14);

  &:hover {
    color: global.$edit-entry-bg-color-darkest;
    background: global.$acms-color-white;
    box-shadow: 0 1px 1px 1px rgb(0 0 0 / 10%);
  }

  .js-normal-delimiter.on {
    display: none;
  }

  .js-members-only-delimiter {
    display: none;
  }

  .js-members-only-delimiter.on {
    display: block;
  }
}

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

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

/* 地図 */
.formColumnMap {
  width: 100%;
  table-layout: fixed;
}

.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;
}

.js-open-street-map-picker {
  width: 100%;
  height: 0;
  padding-bottom: 62.5%;
}

.acms-osm-container {
  position: relative;
  max-width: 818px;
}

.acms-gmap-container {
  max-width: 100%;
  overflow: hidden;
}

// スマートフォン：マップのスタイル
@media (max-width: global.$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: global.$breakpoint-md-max) {
  .entryFormFileName {
    margin-top: 0;
  }

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

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

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

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

/* フォーム投稿ボタン囲み */
.comPostWrapper {
  position: sticky;
  bottom: 0;
  z-index: global.zIndex(com-post);
}

.comPost {
  padding: 10px;
  text-align: center;
  background-color: global.$edit-entry-bg-color-white;
  border: 1px solid global.$edit-entry-bg-color-base;
}

.comPostInner {
  display: inline-block;
}

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

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

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

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

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

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

    select {
      width: 100%;
    }
  }

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

@media screen and (min-width: global.$breakpoint-md-min) {
  #acms-admin-main .comPost {
    position: fixed;
    right: -20px;
    bottom: 0;
    z-index: global.zIndex(com-post);
    width: calc(100% - 225px);
    background-color: global.$acms-color-white;
    border-top: 1px solid global.$acms-color-gray60;
  }

  #acms-admin-main .comPostWrapper {
    margin-top: 50px;
  }
}

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

/* サブミット(承認)ボタン */
.submitBtn {
  width: 8em;

  @include global.font-size(14);
}

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

  @media (min-width: global.$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: global.$acms-color-caution-text;

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

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

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

/* 変更時メッセージ */
.noticeMsg {
  margin-bottom: 20px;
  text-align: center;
  background-color: rgb(224 224 224);
  border: 3px double global.$acms-color-white;

  @include global.font-size(14);
}

/* ベンチマーク用スタイル */
.acms-benchmark-container {
  display: flow-root;
  width: 100%;
}

.acmsBenchmark {
  float: left;
  margin-bottom: 20px;
  margin-left: 20px;

  h1 {
    text-align: center;

    @include global.font-size(14);
  }
}

.acmsBenchmarkTable {
  margin-top: 10px;
  text-align: left;
  border-collapse: collapse;
  background-color: global.$acms-color-white;

  @include global.font-size(8);

  thead th {
    background-color: global.$acms-color-success30;
  }

  tbody th {
    background-color: global.$acms-color-success10;
  }

  th,
  td {
    max-width: 300px;
    padding: 5px 10px;
    word-wrap: break-word;
    border: 1px solid global.$acms-color-gray80;
  }
}

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

.js-acms_loader {
  position: relative;
  margin: 20px auto;
  font-size: 10px;
  text-indent: -9999em;
  border-top: 6px solid global.$acms-color-black;
  border-right: 6px solid global.$acms-color-black;
  border-bottom: 6px solid global.$acms-color-black;
  border-left: 6px solid global.$acms-color-gray40;

  @include global.translateZ(0);
  @include global.animation(load 1.1s infinite linear);

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

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

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

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

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

#js-media_view {
  z-index: global.zIndex(js-media_view);
  width: 100%;
  height: 100%;
  background-color: global.$acms-color-gray90;
}

#js-media_view_inner {
  position: relative;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  background-color: global.$acms-color-white;
  border: 3px solid global.$acms-color-gray70;
}

/* リビジョンの一覧ボックス */
#js-revision_index {
  background-color: global.$acms-color-gray90;
  border: 3px solid global.$acms-color-gray70;

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

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

  @include global.font-size(12);

  .acms-tooltip {
    display: none;
  }

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

  .entryFormColumnBody {
    max-height: 80vh;
    overflow-y: auto;

    .map_msg_id {
      margin-bottom: 0;
    }
  }

  .entryFormColumnBody,
  .entryFormColumnHead {
    border: 1px solid rgb(100 100 100 / 10%);
  }

  .entryFormColumnHead {
    border-bottom: none;
  }

  .entryFormColumnBody {
    border-top: none;
  }
}

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

/* ホバー時オーバーレイ */
.js-edit_inplace-hovering {
  pointer-events: none;
  background-color: rgb(163 196 234 / 40%);
  border: 2px global.$acms-color-black solid;
}

.js-edit_inplace-sortable {
  background-color: rgb(163 196 234 / 60%);

  @include global.opacity(0.2);
}

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

  @include global.opacity(0.6);

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

/* 保存中の表示 */
#js-entry_saving_progress {
  position: absolute;
  z-index: global.zIndex(js-entry_saving_progress);
  display: none;
  width: 100%;
  height: 100%;
  background: rgb(255 255 255 / 66%);
  background-color: rgb(255 255 255);
  filter: alpha(opacity=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;
    font-weight: bold;
    color: global.$acms-color-black;

    @include global.font-size(16);

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

/* ローディングスプラッシュ */
#js-loading_splash {
  position: absolute;
  z-index: global.zIndex(js-loading_splash);
  display: none;
  width: 100%;
  height: 100%;

  // ローディングイメージの背景
  .js-loading_splash_frame {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 160px;
    height: 160px;
    margin-top: -80px;
    margin-left: -80px;
    text-align: center;
    background: global.$acms-color-black-dark;
    border-radius: 10%;
    opacity: 0.8; // 高さの半分// 幅の半分
    // ローディングスプラッシュ内テキスト
    p {
      position: absolute;
      right: 0;
      bottom: 18px;
      left: 0;
      margin: 0 auto;
      font-weight: bold;
      color: global.$acms-color-white;

      @include global.font-size(16);
    }
  }

  // ローディングイメージの位置調節
  .js-acms_loader_img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -22px; // 16（幅/2） + 6（線の太さ/2）
  }
}

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

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

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

  @include global.font-size(12);

  .inputTitle {
    width: 98%;
    padding: 0.2em 0.3em;
    margin-bottom: 0.5em;

    @include global.font-size(13);
  }

  p {
    text-align: right;
  }
}

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

#js-edit_inplace-title .entryFormColumnBody,
#js-edit_inplace-title .entryFormColumnHead {
  margin-bottom: 10px;
  border: 1px solid global.$acms-color-gray80;
  box-shadow: 1px 1px 2px rgb(0 0 0 / 20%);
}

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

.js-edit_inplace-title_trigger:hover {
  background-color: rgb(163 196 234 / 40%) !important;
}

/* 全幅通知 */
.js-notify {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  padding: 10px;
  font-weight: bold;
  color: global.$acms-color-white;
  text-align: center;
  text-shadow: -1px -1px 0 #000;
  background: rgb(0 0 0);
  background: rgb(0 0 0 / 66%);

  @include global.font-size(18);
}

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

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

  button {
    @include global.opacity(0.8);

    width: 50px;
    height: 42px;
    padding: 0;
    margin: 0;
    color: global.$acms-color-white;
    cursor: pointer;
    background-color: global.$acms-color-black-dark;
    border-color: global.$acms-color-black-dark;

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

.js-edit_sort-control-move {
  position: absolute;
  bottom: 0;
  z-index: global.zIndex(js-edit_inplace-title);
  overflow: hidden;
  clear: both;
  font-size: 12px !important;
  font-weight: bold;
  color: global.$acms-color-white;
  text-align: center;
  cursor: move;
  zoom: 1;
  background-color: global.$acms-color-gray90;
  border: 1px solid global.$acms-color-black;

  @include global.opacity(0.8);
}

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

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

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

  button {
    padding: 5px;
    margin: 3px;
    color: global.$acms-color-black;
    cursor: pointer;
    background-color: global.$acms-color-gray10;
    border: 1px solid global.$acms-color-black;
    border-radius: 3px;

    &:hover {
      background-color: global.$acms-color-white;
    }

    &.cansel {
      color: global.$acms-color-white;
      background-color: global.$acms-color-gray80;

      &:hover {
        background-color: global.$acms-color-gray90;
      }
    }
  }
}

/* ソート機能 */
.js-edit_inplace-sort_enable {
  box-sizing: border-box;
  padding: 10px 5px;
  margin: 10px 0;
  overflow: hidden;
  clear: both;
  cursor: pointer;
  border: 3px solid global.$acms-color-gray30;

  &:hover {
    box-sizing: border-box;
    background-color: rgb(163 196 234 / 40%);
    border: 3px global.$acms-color-black-dark solid;
  }
}

.js-edit_inplace-sort_enable_column {
  box-sizing: border-box;
  padding: 10px 5px;
  margin: 10px 0;
  cursor: pointer;
  border: 2px global.$acms-color-black-dark solid;

  &:hover {
    box-sizing: border-box;
    background-color: rgb(163 196 234 / 40%);
  }

  .js-edit_inplace-sort_enable {
    border: none;

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

.js-edit_inplace-sort_placeholder {
  position: relative;
  box-sizing: border-box;
  min-height: 80px;
  margin: 10px 0;
  background-color: rgb(163 196 234 / 20%);

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

    @include global.font-size(16);
  }
}

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

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

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

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

/* 画面下部コントロール */
#js-edit_inplace-below_control {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: global.zIndex(js-edit_inplace-below_control);
  box-sizing: border-box;
  width: 100%;
  font-weight: bold;
  color: global.$acms-color-danger90;
  text-align: right;
  background: rgb(250 250 250);
  background: rgb(250 250 250 / 66%);
  background-color: global.$acms-color-gray20;
  border-top: 1px solid global.$acms-color-gray50;

  @include global.font-size(13);

  span {
    padding: 7px 20px;
  }
}

#js-edit_inplace-show_detail,
#js-edit_inplace-sort_enable,
#js-edit_inplace-mode_abort {
  padding: 7px 10px;
  margin: 0;
  color: global.$acms-color-white;
  text-shadow: -1px -1px 0 global.$acms-color-black-dark;
  cursor: move;
  background: rgb(0 0 0);
  background: rgb(0 0 0 / 66%);
  border: none;
  border-left: 1px solid global.$acms-color-black;

  @include global.font-size(12);

  &:hover {
    background-color: rgb(0 0 0 / 50%);
  }

  &:active {
    text-shadow: -2px -2px 1px global.$acms-color-black-dark;
  }
}

// #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 {
  z-index: global.zIndex(acms-module-edit) !important;
  display: none !important;
  padding: 1px 4px;
  background-color: global.$acms-color-black-dark;
  border: 1px solid global.$acms-color-black-dark;
  border-bottom-left-radius: 4px;
  opacity: 0.7;

  @include global.font-size(14);
}

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

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

    a {
      color: global.$acms-color-white;
    }
  }

  .acms-module-edit-left {
    right: auto;
    left: -2px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 0;
  }

  &:hover {
    &::before {
      position: absolute;
      inset: -4px;
      z-index: -1;
      content: '';
      border: 2px solid global.$acms-color-gray80;
      border-radius: 4px;
    }

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

.acms-module-edit-btn {
  float: left;
  margin: 0 5px;
  transition: opacity 0.2s;

  a {
    @include global.button-shape(
      (math.div(global.$acms-form-height-small-sp - global.$acms-btn-small-font-size - 2px, 2))
        global.$acms-btn-small-padding-x
    );
    @include global.button-decoration(
      $border: 1px solid rgba(0, 0, 0, 0.2),
      $hover-bg-color: global.$acms-color-gray20,
      $hover-border-color: rgba(0, 0, 0, 0.3),
      $text-color: global.$acms-btn-text-default-color,
      $active-border-color: global.$acms-btn-active-border-color,
      $active-bg-color: global.$acms-color-gray40,
      $active-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3),
      $active-text-color: global.$acms-color-black,
      $focus-border-color: global.$acms-btn-focus-border-color
    );
    @include global.font-size(global.$acms-btn-small-font-size);

    @media (min-width: global.$breakpoint-md-min) {
      @include global.button-shape(
        $font-size: global.$acms-btn-font-size-desktop,
        $padding: (
          math.div(global.$acms-form-height-small - global.$acms-btn-small-font-size - 2px, 2),
        )
        global.$acms-btn-small-padding-x
      );
    }
  }
}

// ボタングループ
@media (max-width: global.$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 {
    height: 68%;
    margin-right: 20px;
    overflow: scroll;
  }

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

  .acms-media-list li {
    float: left;
    margin: 5px;
    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;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
  }

  // 選択時
  .media_selected {
    border: 3px solid global.$acms-color-info80;
    opacity: 0.7;
  }
}

// JavaScript用 操作class
.js-media_thumbnail {
  box-sizing: border-box;
  display: table;
  width: 200px;
  height: 180px;
  padding: 5px;
  border: 3px solid global.$acms-color-gray70;

  &:hover {
    cursor: pointer;
  }
}

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

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

.js-media_more {
  width: 103px;
  height: 103px;
  background-color: global.$acms-color-gray70;

  &:hover {
    cursor: pointer;
  }
}

// スマートフォンの時に挿入ボタンを見えるようにする
@media (max-width: global.$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;
  color: global.$acms-color-black;
  background-color: global.$acms-color-gray20;
  border-color: global.$acms-color-gray50;
}

.acms-popup-heading-title {
  padding: 10px 20px;
  margin: 0;

  @include global.font-size(16);
}

.acms-popup-heading-close {
  position: absolute;
  top: 12px;
  right: 20px;
  color: global.$acms-color-black;

  @include global.font-size(16);
}

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

  @include global.font-size(14);

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

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

#adminMinBox {
  display: none;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  background-color: global.$acms-color-gray50;
}

.js-dragAdminBox {
  position: fixed;
  top: 0;
  left: 10px;
  z-index: global.zIndex(js-dragadminbox);
  border-right: solid 2px global.$acms-color-black !important;
  border-bottom: solid 2px global.$acms-color-black !important;
  border-left: solid 2px global.$acms-color-black !important;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  opacity: 0.9;

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

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

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

  th {
    width: 110px;
    padding-right: 10px;
    font-weight: normal;
    text-align: left;
    vertical-align: top;

    @include global.font-size(12);
  }

  table,
  th,
  td {
    padding: 0 !important;
    margin: 0 !important;
    color: global.$acms-color-black !important;
    background-color: global.$edit-entry-bg-color-base !important;
    border: none !important;
  }

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

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

  a,
  a:visited {
    color: global.$acms-color-link-text;
  }
}

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

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

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

  td {
    padding: 8px 5px !important;

    @include global.font-size(14);
  }

  .acms-table-revison-title {
    @include global.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: global.$breakpoint-md-max) {
    th,
    .acms-btn-admin {
      white-space: nowrap;
    }
  }
}

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

// 管理ボタン
.acms-revison-admin {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  margin-bottom: 10px;
  line-height: 1.5;
  color: global.$acms-color-black;
  background-color: global.$edit-entry-bg-color-base;
  border: solid 1px global.$edit-entry-bg-color-dark;

  @include global.font-size(14);

  &__label {
    vertical-align: middle;
  }
}

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

.acms-revision-preview {
  display: grid;
  /* stylelint-disable scss/operator-no-newline-after */
  grid-template:
    'header header' 50px
    'sidebar main' calc(100vh - 50px) /
    minmax(250px, 22%) minmax(0, 1fr);
  /* stylelint-enable scss/operator-no-newline-after */
  width: 100vw;
  height: 100vh;
}

.acms-revision-preview[data-sidebar='false'] {
  /* stylelint-disable scss/operator-no-newline-after */
  grid-template:
    'header' 50px
    'main' calc(100vh - 50px) /
    1fr;
  /* stylelint-enable scss/operator-no-newline-after */
}

.acms-revision-actions {
  display: flex;
  white-space: nowrap;

  > * + * {
    margin-left: 5px;
  }

  button {
    padding: 6px 8px; // レスポンシブによってボタンのサイズが変わるため、固定値で指定

    @include global.font-size(12); // レスポンシブによってフォントサイズが変わるため、固定値で指定
  }
}

// サイドバー
.acms-revision-sidebar {
  grid-area: sidebar;
  overflow-y: auto;
  background: global.$acms-color-gray40;

  .acms-padding-small {
    border-bottom: solid 1px global.$acms-color-gray60;
  }

  &__buttons {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: flex-start;

    .-right {
      margin-left: auto;
    }
  }
}

.acms-revision-main {
  grid-area: main;

  > * {
    height: 100%;
  }
}

// revisionタイトル
.acms-revision-header {
  box-sizing: border-box;
  display: flex;
  grid-area: header;
  align-items: center;
  height: 50px;
  padding: 10px;
  color: global.$acms-color-gray60;
  background-color: global.$acms-color-gray90;

  .acms-revision-header-title {
    margin: 0;

    @include global.line-clamp(1);
    @include global.font-size(18);
  }

  .acms-revision-header-action-group {
    margin-left: auto;
  }
}

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

  li {
    padding: 12px;
    border-bottom: solid 1px global.$acms-color-gray60;
  }

  // 日付
  .acms-revision-comment-date {
    margin-bottom: 5px;

    @include global.font-size(11);
  }

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

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

  // 担当者と期限
  .acms-revision-comment-user {
    padding: 5px;
    margin: 0;
    list-style: none;
    background-color: global.$acms-color-gray50;
    border: solid 1px global.$acms-color-gray60;

    @include global.font-size(11);
  }

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

@media (max-width: global.$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-title {
  margin: 0 0 5px;

  @include global.font-size(14);
}

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

// ---------------
// メディア
// ---------------
// メディアのドロップエリア
.acms-media {
  background-color: global.$acms-color-system-gray10;
}

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

// テキスト
.acms-drop-inside {
  .acms-icon-media {
    padding: 0;
    color: global.$acms-color-gray60;

    @include global.font-size(100);
  }

  p {
    color: global.$acms-color-gray80;
    text-align: center;
  }
}

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

// プログレスバー内エラー文
.acms-progress-bar span {
  display: inline-block;
}

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

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

// ドラッグ&ドロップ時
.drag-n-drop-hover {
  &.acms-media {
    background: global.$acms-color-white;
  }

  .acms-drop-inside {
    border-color: global.$acms-color-info70;
  }

  .acms-icon-media {
    color: global.$acms-color-info70;
  }

  .acms-media-dropText {
    color: global.$acms-color-info70;
  }
}

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

.acms-edit-info-heading {
  padding: 5px 10px;
  font-size: 16px;
  color: global.$acms-color-white;
  background-color: global.$acms-color-gray90;

  a,
  a:visited,
  a:active,
  a:focus {
    color: global.$acms-color-white;
  }
}

.acms-edit-info-table {
  background: global.$acms-color-white;

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

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

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

    th {
      width: 100%;
      padding: 5px 10px;
      color: global.$acms-color-white;
      white-space: inherit;
      background: global.$acms-color-gray70;
    }
  }
}

@media (min-width: global.$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: global.zIndex(acms-layout-menu);
  width: 220px;
  background: global.$acms-color-gray50;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 50%);

  @include global.translateZ(0);
}

.acms-layout-menu-header {
  min-width: 200px;
  padding: 10px;
  color: global.$acms-color-white;
  cursor: move;
  background: global.$acms-color-black;
  border-radius: 3px 3px 0 0;

  @include global.font-size(13);
}

.acms-layout-menu-delete {
  color: global.$acms-color-white;
}

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

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

  @include global.font-size(13);

  &:link {
    color: global.$acms-color-white;
    text-decoration: none;
  }

  &:hover {
    background-color: global.$acms-color-system-gray80;
  }

  &:visited,
  &:active {
    color: global.$acms-color-white;
  }

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

.acms-layout-menu-group-body {
  padding: 10px 10px 0;
  overflow: hidden; // 簡易clearfix
  background: global.$acms-color-white;
}

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

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

.acms-layout-menu-order {
  margin: 0;
  background: global.$acms-color-white;
}

.acms-layout-menu-text {
  margin: 0;
  color: global.$acms-color-black;

  @include global.font-size(14);
}

.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: global.$acms-color-gray50;
}

.acms-table-unit-inner .a-table th {
  font-weight: normal;
  cursor: pointer;
}

.acms-table-unit-inner .a-table td {
  border: 1px solid global.$acms-color-gray60 !important;
}

.acms-table-unit-inner .acms-btn-group {
  padding: 0;
  margin: 7px 10px 7px 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;
  width: 80vw;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: right;
}

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

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

  .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;
  color: global.$acms-color-black;
  text-align: center;
  border: 1px solid global.$acms-color-gray60;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 30%);

  @include global.font-size(14);
}

.acms-insert-box-layout {
  margin: 0 0 10px;
  background: global.$acms-color-system-gray20;
}

.acms-insert-box-module {
  margin: 10px 0 0;
  font-weight: bold;
  background: global.$acms-color-white;
  border-radius: 6px;

  @include global.font-size(18);

  .acms-icon-module {
    margin: 0 5px 0 0;
    color: global.$acms-color-gray80;

    @include global.font-size(20);
  }
}

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

  &::before {
    position: absolute;
    inset: -2px;

    // レイアウト範囲表示
    content: '';
    border: 2px dashed global.$acms-color-black-dark;
  }
}

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

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

    .acms-layout-contents {
      padding: 3px;

      @include global.clearfix;
    }

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

  // ユニット内ラベルの名前
  .acms-layout-label-name {
    font-weight: bold;
    color: global.$acms-color-gray90;

    @include global.font-size(13);
  }

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

    .acms-layout-contents {
      min-height: 130px;
      background-color: global.$acms-color-white;
      border: 0;
    }
  }

  .acms-layout-edit-box {
    position: relative;
    padding: 5px 10px;
    color: global.$acms-color-gray90;

    @include global.font-size(13);

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

    [class*='acms-icon'] {
      &::before {
        vertical-align: middle;

        @include global.font-size(12);
      }
    }

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

  .acms-layout-module-unit .acms-layout-edit-box {
    padding: 10px 5px 5px 0;
    color: global.$acms-color-white;

    .acms-icon-delete {
      &::before {
        color: global.$acms-color-white;
      }
    }
  }
}

.acms-layout-placeholder {
  position: relative;
  box-sizing: border-box;
  min-height: 80px;
  margin: 10px 0;
  background-color: global.$layout-placeholder-bg;
  border: 2px solid global.$layout-placeholder-border;

  @include global.font-size(13);

  &::after {
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -70px;
    color: global.$layout-placeholder-color;
    content: '\30EC\30A4\30A2\30A6\30C8\3092\3053\3053\306B\30C9\30E9\30C3\30B0';
  }
}

.acms-module-placeholder {
  position: relative;
  box-sizing: border-box;
  min-height: 80px;
  margin: 10px 0;
  background-color: global.$module-placeholder-bg;
  border: 2px solid global.$module-placeholder-border;

  @include global.font-size(13);

  &::after {
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -70px;
    color: global.$module-placeholder-color;
    content: '\30E2\30B8\30E5\30FC\30EB\3092\3053\3053\306B\30C9\30E9\30C3\30B0';
  }
}

.preview-container {
  position: fixed;
  inset: 0;
  z-index: global.zIndex(preview-container);
  overflow: hidden;
  background: global.$acms-color-white;
}

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

.acms-layout-sidebar {
  padding: 0;

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

  dl {
    margin-top: 0;
  }

  dd {
    margin: 0;
  }
}

.acms-layout-module-edit-inner {
  background-color: global.$acms-color-white;
  border: 1px solid global.$layout-edit-border;

  @include global.clearfix;
}

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

.acms-layout-sidebar-item {
  padding: 10px;
  font-weight: bold;
  line-height: 1.2;
  background: global.$edit-entry-bg-color-light;
  border-right: 1px solid global.$acms-color-gray60;
  border-bottom: 1px solid global.$acms-color-gray60;

  @include global.font-size(14);
  @include global.transition(all 0.2s linear);

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

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

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

  [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;
  font-size: 12px;
  font-weight: normal;
  color: global.$acms-color-gray90;

  p {
    margin: 0;
  }
}

.acms-layout-sidebar-link a {
  padding: 20px 10px 20px 20px;
  padding-left: calc(10px + constant(safe-area-inset-left));
  font-weight: bold;
  color: global.$acms-color-black;

  @include global.font-size(14);

  &:hover {
    text-decoration: none;
  }
}

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

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

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

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

.acms-layout-mobile-preview * {
  box-sizing: border-box;
}

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

  &::before {
    position: absolute;
    bottom: 10px;
    left: 158px;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    content: '';
    border: 2px solid global.$acms-color-gray60;
    border-radius: 20px;
  }

  &::after {
    position: absolute;
    top: 25px;
    left: 138px;
    box-sizing: border-box;
    width: 80px;
    height: 6px;
    content: '';
    border: 3px solid global.$acms-color-gray60;
    border-radius: 5px;
  }
}

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

.acms-layout-desktop-preview-inner {
  position: absolute;
  inset: 0;
  background: global.$acms-color-gray20;
}

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

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

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

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

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

// ---------------
// エントリーロック
// ---------------
.acms-entry-lock-modal {
  &-lead {
    line-height: 21px;

    @include global.font-size(14);
  }

  &-table {
    width: 100%;
    margin-bottom: 20px;
    font-size: 14px;
    background-color: global.$acms-color-gray30;
    border: none;
    border-radius: 4px;
  }

  &-user {
    display: flex;
    align-items: center;

    img {
      width: 24px !important;
      margin-right: 8px;
    }
  }

  &-note-label {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-weight: bold;
    color: #333;
    background: transparent;
    border: none;

    @include global.font-size(14);

    span {
      margin-left: 5px;
    }
  }

  &-note {
    padding-left: 20px;
    margin-bottom: 20px;
    line-height: 21px;
    border-left: 1px solid global.$acms-color-gray60;

    @include global.font-size(14);
  }
}

// ------------------------------
// WYSIWYG Editor
// ------------------------------
:root {
  --tbw-cell-vertical-padding: 4px;
  --tbw-cell-horizontal-padding: 8px;
  --tbw-cell-line-height: 1.5em;
  --tbw-box-min-height: 100px;
  --tbw-box-max-height: 500px;
}

.trumbowyg-box {
  min-height: var(--tbw-box-min-height) !important;

  &:not(.trumbowyg-fullscreen) {
    max-height: var(--tbw-box-max-height) !important;
  }

  .trumbowyg-button-pane {
    flex-shrink: 0;
  }
}

.trumbowyg-fullscreen {
  z-index: global.zIndex(wysiwyg-fullscreen) !important;
}

.trumbowyg-editor-box {
  table {
    margin-bottom: var(--tbw-cell-line-height);
  }

  th,
  td {
    min-width: calc(var(--tbw-cell-horizontal-padding) * 8);
    height: calc(var(--tbw-cell-vertical-padding) * 2 + var(--tbw-cell-line-height));
    padding: var(--tbw-cell-vertical-padding) var(--tbw-cell-horizontal-padding);
    border: 1px solid #e7eaec;
  }
}

.trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-textarea {
  flex: 1 1 auto !important; // WYSIWYG エディターでソースを表示するとテキストユニットの高さが固定になってしまう問題の修正
}
