@charset "utf-8";

// 条件設定
$admin: true;
@import "variable.scss";
@import "variables-fonts";
@import "system-variable.scss";
@import "functions.scss";
@import "mixins.scss";


/* ------------------------------
 管理画面の専用
------------------------------ */

html.is-admin-page {
	background: #FFF;
}

body {
	height: 100%;
	margin: 0;
	font-family: $acms-admin-font-family;
	@include font-size(13);
}

// ------------------------------
// リンクカラー
// ------------------------------
// リンク
a {
	color: #006dec;
	text-decoration: none;
}

// visited
a:visited {
}

// hover
a:hover {
	color: #8ebef7;
}

// active
a:active {
	color: #8ebef7;
}

// ------------------------------
// IE対応
// ------------------------------

/* IE8以下 */
.lt-ie9 {
	#acms-admin-main {
		padding-left: 170px;
	}


	#nav {
		position: fixed;
		width: 175px;
	}

	#outer-wrap {
		overflow: visible;
	}

}


// ------------------------------
// メインカラム
// ------------------------------
// メインカラム
#acms-admin-main {
	z-index: zIndex(acms-main);
	height: 100%;
	padding-right: ($grid-space / 2);
	padding-right: calc((#{$grid-space} / 2) + constant(safe-area-inset-right));
	padding-left: ($grid-space / 2);
}

#main {
	padding-top: 20px;
	padding-bottom: 20px;
}

@media screen and (min-width: $breakpoint-md-min) {
	#acms-admin-main {
		padding: 0 20px 0 245px;
		padding: 0 calc(30px + constant(safe-area-inset-right)) 0 20px;
	}
}

// ------------------------------
// ヘッダー ナビゲーション
// ------------------------------

// ブログ名全体
.acms-navbar-admin {
	z-index: zIndex(acms-navbar-admin);
	box-sizing: border-box;
	width: 100vw;
	height: 60px;
	padding: 0 10px;
	padding-right: calc(5px + constant(safe-area-inset-right));
	padding-left: calc(5px + constant(safe-area-inset-left));
	text-align: center;
	background: $base-bg-primary;

	.logo {
		float: left;
		margin: 0;
		line-height: 1;
	}
}

@media screen and (min-width: $breakpoint-md-min){
	.acms-navbar-admin {
		width: 50px;
		height: 100vh;
	}
}

/* ナビゲーションリンク */
.acms-navbar-admin-nav{
	margin: 0 -10px;
	padding-left: 0;
	@include font-size(22);
	> li {
		margin-bottom: 10px;
		list-style: none;
		> a,
		> button {
			display: block;
			margin: 0 auto;
			padding: 5px 0;
			color: #FFF;
			line-height: 1.2;
			text-align: center;
			background: 0;
			border: 0;
			@include font-size(22);

			&:focus {
				outline: 0;
			}

			&:hover,
			&:focus,
			&:active {
				opacity: .6;
			}
		}
		// ナビゲーションリンク ボタンは回避
		.acms-btn{
			padding: 8px 10px;
		}
	}

	[class*="acms-icon-"] {
		padding: 0;
	}
}

.acms-user-profile {
	border: 2px solid #F1F1F1;
	border-radius: 100%;
}

// ブログ名
.acms-title-blog,
.acms-title-rule {
	margin: 0;
	@include font-size(13);
	font-weight: bold;
	border-bottom: 1px solid #9e9e9e;

	a {
		display: block;
		padding: 20px 10px 20px 20px;
		color: #333;
	}
}

// hover
.acms-navbar-admin-nav > li > a:hover,
.acms-title-blog a:hover {
	text-decoration: none;
	opacity: 0.5;
}

.acms-title-blog .acms-arrow-right {
	position: absolute;
	top: 15px;
	right: 10px;
}

@media screen and (min-width: $breakpoint-md-min){
	.acms-title-blog,
	.acms-title-rule {
		a {
			padding: 10px 20px;
		}
	}
	.acms-navbar-admin-profile {
		position: absolute;
		bottom: 15px;
		left: 10px;
		.js-acms-dropdown-menu {
			top: -60px;
		}
	}
}

.acms-nav {
	z-index: zIndex(acms-nav);
}

@media screen and (min-width: $breakpoint-md-min){
	.acms-nav {
		position: fixed;
		top: 0;
	}
}

.acms-navbar-system {
	position: relative;

	// a-blog cmsのロゴを固定
	.acms-list-blog-sp {
		position: absolute;
		top: 10px;
		right: 15px;
		width: auto;
		margin: 0;
		@include font-size(30);
		color: #ffffff;
	}
}

.acms-title-cms {
	margin: 0;
	padding: 15px 0 20px 0;
	@include font-size(26);
}

.acms-icon-logo {
	padding: 0;
}

.acms-icon-logo,
.acms-blog-color {
	display: block;
	color: #fff;
}

.js-acms-color-picker-target {
	background-color: $acms-red;
}

// スクロール
.acms-list-scroll {
	max-height: 400px;
	overflow: auto;
}

// a-blog cmsのロゴを固定
.acms-navbar-system .acms-list-blog-sp {
	position: absolute;
	top: 10px;
	right: 15px;
	width: auto;
	margin: 0;
	@include font-size(30);
	color: #ffffff;
}

@media screen and (max-width: $breakpoint-md-max) {
	// オフキャンバス
	.js .js-offcanvas {
		display: none;

		&.js-acms-offcanvas-sidebar {
			display: block;
		}
	}

	.no-js {
		overflow: inherit;

		.acms-sidebar {
			position: static;
			width: 100%;
		}
		.acms-nav {
			position: static;
		}
		#acms-admin-main {
			height: auto;
			overflow: inherit;
		}
	}
}

// ------------------------------
// トピックパス
// ------------------------------
.acms-system-topicpath {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
	@include font-size(14);
	img {
		border: 0;
		border-radius: 3px;
	}
	// 中の要素
	>li {
		display: inline-block;
		color: #999;
		vertical-align: middle;
	}
	>li:not(.site-image) {
		+li:before {
			display: inline-block;
			width: 8px;
			height: 17px;
			margin-bottom: 3px;
			vertical-align: middle;
			background: url("../images/common/topicpath.svg") no-repeat center center;
			background-size: 25px 25px;
			content: ' ';
		}
	}
	// リンク
	.link {
		display: inline-block;
		padding: 10px 5px;
		color: #333;
		line-height: 1;
		@include font-size(14);
		&:link {
			text-decoration: none;
		}
		&:hover {
			color: #333;
			text-decoration: none;
			background: #fff;
			border-radius: 3px;
		}
	}
}

.acms-system-topicpath-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
	margin: 0 0 20px 0;
	padding: 5px 15px;
	background: #f1f1f1;
	border-radius: 3px;
}

.acms-system-view-site-wrap {
  margin: 0 0 0 auto;
}

.acms-system-view-site {
	display: none;
	float: right;
  margin: 0;

	.acms-btn {
		background: #FFF;
		border: 1px solid rgba(0,0,0,.1);

		&:hover {
			background: rgba(255,255,255,.5);
		}
	}

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

@media screen and (min-width: $breakpoint-md-min){
	.acms-system-view-site {
		display: inline-block;
	}
}


// ------------------------------
// サイドナビゲーション
// ------------------------------
// ナビゲーション固定
#sidebar {
	height: 100%;
	background: $base-bg-light-white;

	.ps__rail-y {
		right: 0;
		left: auto !important;

		.ps__thumb-y {
			width: 8px;
			background: lighten($base-bg-primary, 45%);
		}
	}
	&.js-mobile{
		height: auto;
	}
}

@media screen and (min-width: $breakpoint-md-min){
	#sidebar {
		background: $base-bg-light-gray;
	}
}

.js-nav #acms-admin-main {
	position: absolute;
	top: 0;
	width: 100%;
}

.acms-icon-admin-blog-children {
	color: #999999;
}

.acms-sidebar {
	top: 0;
	bottom: 0;
	width: 100%;
	padding-bottom: 0;
}

.acms-sidebar-header .js-acms-dropdown-menu {
	padding: 0;
}

.acms-sidebar-main {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

.acms-sidebar-alert {
	position: relative;
	margin: 0;
	padding: 10px 10px 10px 15px;
	color: #fff;
	font-weight: bold;
	background: $acms-alert-danger-border;
	@include font-size(11);

	.acms-icon-tooltip {
		margin-left: 5px;
	}
}

@media screen and (min-width: $breakpoint-md-min){
	.acms-sidebar {
		position: fixed;
		width: auto;
	}
	.acms-sidebar-header {
		width: 175px;
	}
	.acms-sidebar-main {
		width: 175px;
	}
}

.acms-sidebar-title {
	padding-left: calc(5px + constant(safe-area-inset-left));
	background: $base-bg-light-gray;
}

// SP用
.acms-sidebar-sp-list {
	display: table;
	width: 100%;
	table-layout: fixed;
	border-bottom: 1px solid #9E9E9E;

	li {
		border-bottom: 0; // acms.cssの打ち消し
	}
}
.acms-sidebar-sp-list-item {
	display: table-cell;
	width: (100%/3);
	text-align: center;
	vertical-align: middle;
	border-right: 1px solid #CCC;

	&:last-child {
		border: 0;
	}

	a {
		display: block;
		padding: 10px 2px;
		color: #333;
		@include font-size(20);
		font-weight: bold;
		&:hover {
			text-decoration: none;
		}
	}
	.acms-icon {
		padding: 0;
	}
	.acms-user-profile {
		display: block;
		margin: 0 auto;
		border: 0;
	}
}
.acms-sidebar-sp-list-text {
	display: block;
	@include font-size(11);
}

.acms-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;
	background: $base-bg-light-white;
	&:hover {
		text-decoration: none;
	}
}

.acms-sidebar-item {
	padding: 10px 10px;
	@include font-size(14);
	font-weight: bold;
	line-height: 1.2;
	border-bottom: 1px solid #ccc;

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

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

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

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

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

@media (min-width : $breakpoint-md-min) {
	.acms-sidebar-link a {
		background: $base-bg-light-gray;
	}

	.acms-sidebar-link .stay a {
		background: $base-bg-light-white;
	}
}


// 文字のトリム
.acms-text-ellipsis-container {
	overflow: hidden;
	white-space: nowrap;
}

.acms-text-ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

// テーブルセルのとき
.acms-text-ellipsis-table-cell {
	max-width: 1px;
}

.acms-module-title-sub {
	margin: 0 0 5px 0;
	font-size: 14px;
}

.acms-module-title-main {
	display: block;
	clear: both;
	margin: 0 0 15px 0;

	.acms-module-title {
		margin: 0;
		font-size: 20px;
		line-height: 1.2;
	}
}

// ソースコード
pre .linenums {
	margin: 0;
	padding-left: 30px;
	font-family: $acms-code-font-family;
}
pre .linenums li {
	line-height: 1.5;
}


// スマートフォン メニューアイコン
#nav-open-btn {
	position: absolute;
	top: 15px !important;
	left: 15px !important;
	padding: 0;
	color: $header-nav-color;
	background: 0;
	border: none;
	@include font-size(30);

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

	&:active {
		box-shadow: none;
	}

	.acms-icon:focus {
		outline: 0;
	}

	@media screen and (min-width: $breakpoint-md-min) {
		display: none;
		padding: 15px 12px;
		color: #0085cc;
		background-color: #eeeeee;
		border: solid 1px #cccccc;
		@include font-size(15);
	}
}

.acms-header-btn {
	color: $header-nav-color;
	@include font-size(30);

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

@media screen and (min-width: $breakpoint-md-min) {
	// 固定解除
	#sidebar {
		position: fixed;
		top: 0;
		left: 50px;
		width: 175px;
	}

	// ブログ一覧を非表示
	.acms-list-blog-sp {
		display: none;
	}

	// ナビゲーションが閉じている時
	#outer-wrap #nav {
		position: static;
	}

	/* サイドバー */
	.acms-sidebar-link a {
		padding: 11px 10px 11px 20px;
		padding-left: calc(10px + constant(safe-area-inset-left));
		font-weight: bold;
		@include font-size(13);
	}

	.acms-sidebar {
		padding-bottom: 40px;
	}
}

@media only screen and (min-device-width: $breakpoint-md-max) and (max-device-width: $breakpoint-lg-max) and (orientation: portrait) {
	#sidebar .acms-btn-login {
		width: 75%;
	}
}

// ------------------------------
// ボタンの固定
// ------------------------------
// ボタンを固定
.fixed {
	position: static;
	top: inherit;
	left: inherit;
}

@media screen and (min-width: $breakpoint-md-min) {
	.fixed {
		position: fixed;
		top: 47px;
		z-index: zIndex(fixed);
	}
}

// ボタンを右に配置
.fixed.acms-position-right {
	right: 20px;
}

// ボタンの固定全体
.fixed.acms_fix_bg {
	z-index: zIndex(acms_fix_bg);
	width: 100%;
	@include box-sizing(border-box);
}

.acms_fix_bg_index {
	box-sizing: content-box;
	@include clearfix();
}

/* 固定ボタン */
.js-acms_fix_target {
	margin-bottom: 10px;

	&.fixed {
		margin-bottom: 0;
	}
}

@media screen and (min-width: $breakpoint-md-min) {
	.fixed.acms_fix_bg {
		top: 36px;
		left: 180px;
		padding: 0 20px 0 0;

	}
}

// ボタンの固定 白背景
.fixed .acms_fix_bg_index {
	height: 32px;
	margin-right: 0;
	padding: 10px 0;
	background-color: #ffffff;
	box-shadow: 0 0 0 #ffffff;
}

@media screen and (min-width: $breakpoint-md-min) {
	.fixed .acms_fix_bg_index {
		height: 32px;
		padding: 10px 0;
		box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
	}
}

// 固定したボタンの重ね順
.fixed .acms_fix_bg_index .acms-btn-admin {
	z-index: zIndex(acms_fix_bg_index);
}

.js-acms_fix_target {
	margin-bottom: 10px;

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

@media screen and (min-width: $breakpoint-md-min) {
	.fixed + .acms-admin-title2 {
		margin-top: 55px;
	}

	.fixed + .acms-table-responsive {
		margin-top: 70px;
	}

	.js-acms_fix_target .acms-btn-admin {
		margin-bottom: 0;
	}
}

// ------------------------------
// カラーパレット
// ------------------------------
.acms-color-palette {
	float: left;
	width: 30px;
	height: 30px;
	margin: 0 5px;
	background-image:none;
	border: 1px solid #CCC;
}


// ------------------------------
// 管理ボックス
// ------------------------------
#js-admin_action_box {
	display: none;
}

@media screen and (min-width: $breakpoint-md-min) {
	#js-admin_action_box {
		display: block;
	}
}

// ------------------------------
// 背景インナーボックス
// ------------------------------
.acms-bg-light-gray {
	background: $edit-entry-bg-color-light;
}

.acms-update-panel {
	padding: 15px 25px;
	background: $edit-entry-bg-color-light;
	border-radius: $update-panel-border-radius;
}


// ------------------------------
// タブセレクト
// ------------------------------
.acms-tab-text {
	display: block;
	max-width: 300px;
	@include font-size(12);
}

.fixed .acms-tab-text {
	display: none;
}

// ------------------------------
// ユーザーグループ編集
// ------------------------------
.argRefLeft strong,
.argRefCenter strong,
.argRefRight strong {
	display: block;
	margin-bottom: 5px;
}

.argRefLeft {
	float: left;
	width: 40%;
	height: 100%;
}

.argRefLeft .js-acms_tabs {
	height: 90%;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.argRefLeft .js-acms_tabs li a {
	display: block;
	margin-bottom: 2px;
	padding: 3px;
	border: 1px solid silver;
	border-right: none;
}

.argRefLeft .js-acms_tab-active {
	background-color: #fff;
}

.argRefCenter {
	width: 360px;
	height: 100%;
	margin: 0 auto;
}

.argRefRight {
	float: left;
	width: 60%;
	height: 100%;
	text-align: left;
}

.argRefCenter ul,
.argRefRight ul {
	height: 90%;
	padding: 0;
	overflow-y: auto;
	background-color: #fff;
	border: 1px solid silver;
	border-left: none;
}

.argRefCenter ul {
	border-left: 1px solid silver;
}

.argRefCenter ul li,
.argRefRight ul li {
	margin-bottom: 3px;
	list-style: none;
}

.argRefCenter ul li a,
.argRefRight ul li a {
	display: block;
	width: 98%;
	padding: 3px 0 3px 2%;
}

.argRefCenter ul li a:hover,
.argRefRight ul li a:hover {
	color: white;
	background-color: #ffffff;
}

.argRefRight:not(:target) {
	width: 260px\9; /* IE9・IE10 */
}


// ------------------------------
// コンフィグ
// ------------------------------
// コンフィグ名
.acms-config-name {
	@include font-size(14);

	a {
		display: block;
	}

	// アイコン
	.acms-icon {
		display: inline-block;
		color: #505050;
		vertical-align: middle;
	}

	// モジュール名
	.acms-config-module-name {
		display: inline-block;
		vertical-align: middle;
	}

	.acms-config-module-name-en {
		display: block;
		color: #777777;
		@include font-size(11);
	}
}

// スニペットと変数表
.acms-config-code {
	text-align: right;

	a {
		display: none;
		margin-left: 10px;
		@include font-size(11);
		color: #888888;
		vertical-align: middle;
	}

	.acms-icon {
		display: none;
	}
}

@media screen and (min-width: $breakpoint-md-min) {
	.acms-config-code {
		width: 140px;
		a {
			display: inline;
		}
	}
}

// ------------------------------
// セレクトメニュー
// ------------------------------
// ナビゲーションモジュール専用のセレクトメニュー
.acms-module-navigation-select {
	max-width: 150px;
}

// ------------------------------
// ラベル
// ------------------------------
.acms-label-min-width {
	display: block;
	min-width: 3em;
	line-height: 1;
	text-align: center;
}

// ------------------------------
// タグセレクト
// ------------------------------
// プルダウンの絞り込み
.js-acms-tab-select {
	margin-bottom: 10px;
}

.js-acms-tab-select-value {
	margin-right: 5px;
}


// ------------------------------
// エントリ一覧ページ
// ------------------------------
.acms-entryTitle,
.categoryTitle {
	display: inline-block;
	font-weight: bold;
	@include font-size(13);
}

.acms-dateTime {
	width: 110px;
}

// カテゴリータイトル
.categoryTitle {
	margin: 0 20px 0 10px;
}

// エントリー
.acms-entryTitle {
	margin: 0;
}

// 日付、ブログ名
.acms-list-inline {
	margin: 0;
	padding-left: 0;
}

#tagList li {
	padding-right: 5px;
	a {
		@include button-shape();
		@include button-decoration(
			$border: 1px solid rgba(0,0,0,.2),
			$hover-bg-color: #F1F1F1,
			$hover-border-color: rgba(0,0,0,.3),
			$text-color: $acms-btn-text-default-color,
			$active-border-color: $acms-btn-active-border-color,
			$active-bg-color: #E1E1E1,
			$active-box-shadow: inset 0 1px 2px rgba(0,0,0,.3),
			$active-text-color: #333,
			$focus-border-color: $acms-btn-focus-border-color
		);
	}

	@media screen and (min-width: $breakpoint-md-min) {
		a {
			@include button-shape(
				$font-size: $acms-btn-font-size-desktop,
				$padding: ($acms-form-height - $acms-btn-font-size-desktop -2px)/2 $acms-btn-padding-x
			);
		}
	}

	.acms-label {
		margin-left: 5px;
		padding: 3px 5px;
		border-radius: 5px;
		vertical-align: baseline;
	}
}

.admin-entry-index-val {
	color: #666666;
}

// ------------------------------
// カテゴリー一覧ページ
// ------------------------------
.acms-title-sp {
	margin: 0;
}

// ------------------------------
// 子ブログ一覧ページ
// ------------------------------
.acms-blog-index-url {
	margin: 0;
}

// ------------------------------
// ページャ
// ------------------------------
// ページャの間隔
.acms-pager-container {
	margin-top: 10px;
}

.acms-itemsAmount-container {
	margin-top: 10px;
	text-align: right;
}

// ------------------------------
// テーブル
// ------------------------------
.acms-table-admin-edit-bordered,
.acms-table-admin-edit {
	td,
	th {
		p {
			margin: 0;
		}
	}
}

// スマートフォンの時
@media screen and (max-width: $breakpoint-md-max) {
	// テーブル全体に色
	.acms-table-heading {
		background-color: #FFF;

		td {
			display: inline-block;
		}

		.acms-td-status,
		.acms-td-edit {
			display: block;
			width: 100%;
		}
	}

	#main .acms-table-admin td {
		padding-top: 5px;
		padding-bottom: 5px;
	}

	// エントリ情報の一覧
	.acms-table-admin td .acms-list-inline {
		margin-top: 5px;

		li {
			line-height: 1.5;
		}
	}

	.acms-td-title {
		display: inline-block;
	}

	.acms-td-title .acms-entryTitle {
		@include font-size(14);
	}

	#main .acms-table-heading th,
	.acms-table-heading td {
		border-top: none;
		border-bottom: none;
	}

	.acms-table-heading .acms-td-edit {
		border-bottom: 1px solid #cccccc;
	}

	// チェックボックス
	.acms-table-admin .acms-th-checkbox {
		text-align: left;
	}

	// テーブルの項目を非表示
	.acms-table-heading {
		.acms-th-number,
		.acms-th-id {
			display: none;
		}
	}

	.acms-table-hover tr:hover td {
		background-color: #FFF;
	}
}

// テーブル内ツールチップ
.acms-table-admin-edit .tooltipIcon,
.acms-table-admin .tooltipIcon {
	margin-left: 10px;
}

// アイコンを大きく
.acms-admin-mini-table .acms-icon {
	@include font-size(22);
}

.acms-admin-mini-table td.caution {
	background-color: #f9bfb4 !important;
}

// テーブル内でスクロール
.acms-admin-table-scroll {
	max-height: 320px;
	overflow-y: scroll;
}

// コンフィグ一覧テーブル
.acms-admin-config-table tbody th {
	width: 50px;
}

// ダッシュボード内テーブル
.acms-admin-icon-table img {
	margin-right: 10px;
	vertical-align: middle;
}

//コンフィグのテーブルのハンドルまわり
.acms-table-admin-edit {
	.acms-admin-config-table-item-handle {
		width: 30px;
	}

	.acms-admin-config-table-sort {
		width: 92px;
	}

	.acms-admin-config-table-publish {
		width: 77px;
	}

	.acms-admin-config-table-target {
		width: 50px;
	}

	.acms-admin-config-table-parent {
		width: 50px;
	}

	.acms-admin-config-table-action {
		width: 50px;
	}

	.acms-admin-config-table-criterion {
		width: 50px;
  }
  .acms-admin-config-table-display {
    width: 50px;
  }

	.day {
		width: 100px;
	}
}

// iPad 縦のとき
@media only screen and (min-device-width: $breakpoint-md-max) and (max-device-width: $breakpoint-lg-max) and (orientation: portrait) {
	.acms-table-admin-edit {
		th,
		td {
			display: block;
			text-align: left;
		}
	}
}

@media screen and (max-width: $breakpoint-md-max) {
	.acms-table-admin-edit {
		// スマートフォンのときの画像
		img {
			width: auto;
			max-width: 200px !important;
			height: auto;
		}

		// スマートフォンのときのプルダウン
		select {
			display: block;
			width: 100%;
		}
	}
}

// ------------------------------
// アイコン
// ------------------------------
.acms-admin-icon {
	margin-right: 10px;
}

.acms-admin-icon-center {
	margin-right: 10px;
	vertical-align: middle;
}

// ------------------------------
// ショートカットボタン
// ------------------------------
// ボタン
.acms-shortcut-btn {
	padding: 7px 10px 6px 10px;
}

// ------------------------------
// ドロップダウン
// ------------------------------
// ボタンの幅
.acms-btn-group-entry {
	min-width: 90px;
}

// リンクカラー
.acms-dropdown-menu > li > a {
	color: #333333;
}

.acms-btn-admin + .acms-dropdown-toggle {
	height: 31px;
	margin-left: -1px;
}

.acms-td-edit .js-acms-dropdown-menu {
	min-width: 120px;
}

// ------------------------------
// ユニット設定
// ------------------------------
// ユニット囲い
.acms-unitbox {
	margin: 0 0 20px 0;
	padding: 10px;
	background: #FFF;
	border: 1px solid $edit-entry-bg-color-dark;
}

// コンテンツ
.acms-table-container {
	margin: 0 0 10px 0;
	background: $edit-entry-bg-color-light;
	border: 1px solid $edit-entry-bg-color-dark;

	// テーブル
	.acms-table {
		border: none;

		th {
			vertical-align: inherit;
		}
	}
}

.acms-unitbox {
	.acms-table-container {
		tr,
		th,
		td {
			border: none;
		}
	}

	.a-table {
		th {
			border: 1px dashed #a7a7aa;
		}

		td {
			border: 1px solid #cccccc;
		}
	}


	i.acms-icon-sort {
		margin-right: 4px;
	}

	@media screen and (max-width: $breakpoint-md-max) {
		th,
		td {
			display: block;
		}

		// 削除ボタン
		.acms-table td.acms-table-action {
			width: auto;
			text-align: right;
		}
	}
}


// ------------------------------
// ログイン画面
// ------------------------------
// 背景色
#loginBg {
	background-color: #e5e5e9;
}

// コンテンツ
.acms-loginBox-container {
	max-width: 480px;
	margin: 0 auto;
}

.acms-titleBox {
	max-height: 140px;
	margin: 100px auto 0;
	overflow: hidden;
}

.acms-login-text {
	color: #333;
	@include font-size(13);
	line-height: 1.7;
}

// ログイン囲い
.acms-loginBox {
	max-width: 480px;
	margin: 0 auto 0;
	padding: 20px;
	background-color: #fff;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

// サイトサムネイル
.acms-siteImage {
	float: left;
	margin: 0 20px 0 0;
	border: 1px solid #cccccc;
}

// サイト名
.acms-siteImageText {
	display: block;
	margin-bottom: 15px;
	text-align: center;

	& span {
		margin-right: 5px;
	}
}

.acms-titleBox {
	text-align: center;
}

.acms-loginHeaderImage {
	width: 480px;
	height: auto;
	vertical-align: top;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.acms-loginLogo {
	border: none;
}

// 入力フォーム
.acms-loginBox .acms-form {
	margin-top: 25px;

	input {
		margin-bottom: 10px;
	}
}

// ラベル
.acms-loginBox .acms-form label {
	@include font-size-important(13);
	margin-top: 10px;
}

.acms-loginBox .acms-form-block {
	width: 100%;
}

label.acms-form-block a {
	margin-left: 15px;
}

//　読者リンク
.acms-loginBox-bottom {
	margin-top: -10px;
	padding: 20px;
	background: #ffffff;
	border-top: 1px solid #e5e5e9;
	@include round-bottom(5px);
}

.acms-loginBox-bottom p {
	margin: 0;
}

// エラー
.acms-loginBox input.validator-result- {
	display: block;
}

.acms-loginBox input.validator-result-0,
.acms-loginBox input.validator-result-0:focus {
	background: #fff;
	border: 1px solid #bd3f5e;
	box-shadow: none;
}

// ロゴ
.loginLogo {
	float: right;
	margin-top: 10px;
}

//ソーシャルログイン
.acms-border {
	position: relative;
	width: 100%;
	margin: 20px 0 18px 0;
	text-align: center;
}

.acms-border:before {
	position: absolute;
	left: 0;
	margin: 10px 0 0 0;
	padding: 0 0 0 100%;
	border-top: 1px solid #e5e5e9;
	content: "";
}

.acms-borderText {
	position: relative;
	padding: 0 10px;
	background: #fff;
}

.acms-btn-snslogin-container {
	margin: 0 -10px;
	padding: 0;
}

.acms-btn-snslogin-col {
	position: relative;
	display: block;
	float: left;
	width: 100%;
	margin: 0 0 20px 0;
	padding: 0 10px;
	@include box-sizing(border-box);
}

@media screen and (min-width: $breakpoint-sm-min){
	.acms-btn-snslogin-col {
		width: $acms-col-6;

		&:only-child {
			width: 100%;
		}

		&:nth-last-child(n+3),
		&:nth-last-child(n+3) ~ .acms-btn-snslogin-col {
			width: $acms-col-4;
		}
	}
}

.acms-btn-snsimage {
	position: absolute;
	left: 10px;
	width: 44px;
	height: 100%;
	padding: 0;
	color: #fff;
	text-align: center;
	border-right: 1px solid #ccc;
	border-radius: 6px 0 0 6px;
	@include font-size(22);
}

.acms-btn-snsimage-facebook {
	background-color: #1877f2;
}

.acms-btn-snsimage-twitter {
	background-color: #55acee;
}

.acms-btn-snsimage-google {
	box-sizing: border-box;
	background-color: #FFF;
	border: 1px solid #CECED2;
}
.acms-btn-snsimage-line {
	background-color: #00b901;
}

.acms-btn-snsimage {
	.acms-icon-facebook-circle {
		position: static;
		padding: 0;
		@include font-size(28);

		&:before {
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -14px 0 0 -14px;
		}
	}

	.acms-icon-twitter {
		position: static;
		padding: 0;

		&:before {
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -11px 0 0 -11px;
		}
	}

	.acms-icon-google-login {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -11px 0 0 -11px;
		padding: 0;
	}

	.acms-icon-line-login {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -16px 0 0 -16px;
		padding: 0;
	}
}

.acms-btn-snslogin {
	padding: 12px 15px;
	@include font-size(14);
	border-radius: 6px;
}

@media screen and (min-width: $breakpoint-sm-min){
	.acms-btn-snslogin {
		padding: 12px 15px 12px 44px;
	}
}

//Facebook ログイン
.acms-login-facebook {
	padding: 0 10px 0 0;
}

.acms-btn-facebooklogin {
	color:  #FFF;
	background: #1877f2;
	border: 1px solid #1877f2;
	@include box-sizing(border-box);

	// hover
	&:hover {
		color:  #FFF;
		text-decoration: none;
		background: #0163e2;
		border: 1px solid #192752;
	}

	// 色
	&:link,
	&:hover,
	&:active,
	&:visited {
		color: #ffffff;
	}

	// active
	&:active {
		text-decoration: none;
		border: 1px solid #192752;
		@include btn-color-active($background-color: #2D4694, $color: #FFFFFF, $inset-color: #192752);
	}

	&:focus {
		border-color: #192752;
		outline: none;
	}
}

.acms-btn-linelogin {
	color:  #FFF;
	background: #00b901;
	border: 1px solid #00b901;
	@include box-sizing(border-box);

	// hover
	&:hover {
		color:  #FFF;
		text-decoration: none;
		background: #0a9a0a;
		border: 1px solid #192752;
	}

	// 色
	&:link,
	&:hover,
	&:active,
	&:visited {
		color: #ffffff;
	}

	// active
	&:active {
		text-decoration: none;
		border: 1px solid #192752;
		@include btn-color-active($background-color: #00b901, $color: #FFFFFF, $inset-color: #192752);
	}

	&:focus {
		border-color: #192752;
		outline: none;
	}
}

//Twitter ログイン
.acms-btn-twitterlogin {
	border: 1px solid #299af1;
	@include btn-color($start-color: #55AFF4, $end-color: #299AF1, $color: #FFFFFF);

	// hover
	&:hover {
		text-decoration: none;
		border: 1px solid #005896;
		@include btn-color($start-color: #6CB9F5, $end-color: #4BAAF4, $color: #FFFFFF);
	}

	// 色
	&:link,
	&:hover,
	&:active,
	&:visited {
		color: #ffffff;
	}

	// active
	&:active {
		text-decoration: none;
		border: 1px solid #005896;
		@include btn-color-active($background-color: #299AF1, $color: #FFFFFF, $inset-color: #005896);
	}

	&:focus {
		border-color: #005896;
		outline: none;
	}
}

.acms-login-twitter {
	padding: 0 0 0 10px;
}

//Google ログイン
.acms-btn-googlelogin {
	color: #333;
	background: #FFF;
	border: 1px solid #CECED2;
	// 色
	&:link,
	&:hover,
	&:active,
	&:visited {
		color: #FFF;
	}

	// hover,active
	&:hover,
	&:active {
		color: #333;
		text-decoration: none;
		background: #EEE;
		border: 1px solid #C9C9CA;
	}

	&:focus {
		border-color: #005896;
		outline: none;
	}
}

// スマートフォンのとき
@media (max-width: $breakpoint-sm-max) {
	.acms-titleBox {
		margin: 0 auto;
	}

	.acms-loginLogo {
		width: 133px;
		height: 23px;
		border: none;
	}

	.acms-loginHeaderImage {
		width: 100%;
		height: auto;
		border-radius: 0;
	}

	#loginBg {
		background-color: #fff;
	}

	.acms-loginBox {
		margin: 0;
		padding: 10px;
	}

	.acms-loginBox .acms-form {
		margin-top: 18px;
	}

	.acms-loginTitle {
		margin: 0 auto;
	}

	// スマートフォン時のみボタンになるスタイル
	.acms-sp-btn-admin {
		display: inline-block;
		margin: 0 5px 5px 0;
		text-align: center;
		text-decoration: none;
		transition: all .2s linear;
		@include button-shape();
		@include button-decoration(
			$border: 1px solid rgba(0,0,0,.2),
			$hover-bg-color: #F1F1F1,
			$hover-border-color: rgba(0,0,0,.3),
			$text-color: $acms-btn-text-default-color,
			$active-border-color: $acms-btn-active-border-color,
			$active-bg-color: #E1E1E1,
			$active-box-shadow: inset 0 1px 2px rgba(0,0,0,.3),
			$active-text-color: #333,
			$focus-border-color: $acms-btn-focus-border-color
		);
		@include box-sizing(border-box);

		&:hover {
			text-decoration: none;
			background-color: darken($acms-btn-admin-background, 5%);
			border-top: 1px solid rgba(0, 0, 0, 0.3);
		}

		&:link,
		&:hover,
		&:active,
		&:visited {
			color: #0085cc;
		}

		&:active {
			text-decoration: none;
			background-color: darken($acms-btn-admin-background, 10%);
			border-top: 1px solid rgba(0, 0, 0, 0.3) !important;
			box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
		}
	}

	.acms-loginBox,
	.acms-loginBox-bottom {
		background: transparent;
		border: none;
	}

	// 新規の読者登録ボタン
	.acms-loginBox-bottom {
		margin: 0 0 20px 0;
		padding: 0 10px;
	}

	// ログインページンのロゴ
	.loginLogo {
		float: none;
		margin-bottom: 20px;
		text-align: center;
	}

	//SNSログインのボタン
	.acms-btn-snsimage {
		padding: 0;
	}
}

// ------------------------------
// 表示制御
// ------------------------------
.validator-result-,
.validator-result-1,
.transaction-notice-,
#tooltip,
#js-processing-notice-,
#js-processing-notice-show {
	display: none;
}

.validator-result-error,
.validator-result-0 {
	display: block;
}

// ------------------------------
// 管理ボタン
// ------------------------------
#adminBox > #loginUserStatus {
	display: none;
}

#adminBox {
	margin: 0 0 20px 0;
	padding: 12px 20px 10px;
	background-color: #f1f1f1;
	border: none;
}

.acms-action-box {
	margin-bottom: 10px;
}

// ------------------------------
// acms-admin-title2
// ------------------------------
.acms-admin-title2 {
	clear: both;
	padding: 0;
}

.acms-admin-title2.acms-margin-top-medium {
	margin-top: 10px;
}


// ------------------------------
// トピックパス
// ------------------------------
@media (max-width: $breakpoint-md-max) {
	.acms-topicpath {
		// 右寄せしない
		&.acms-float-right {
			float: none;
		}
	}
}

// ------------------------------
// テンプレート書出し管理画面
// ------------------------------
.acms-form-side-select {
	position: relative;
	display: table-cell;
	width: 1%;
	padding-right: 10px;
	white-space: nowrap;
	vertical-align: top;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.acms-form-action-width-select input[type=text]:last-child{
	border-left: $acms-form-border;
	border-top-left-radius: $acms-form-border-radius;
	border-bottom-left-radius: $acms-form-border-radius;
}


// ------------------------------
// エクスポート・インポート
// ------------------------------

.acms-exported-list {
	margin-bottom: 15px;

	li {
		padding-right: 5px;
	}
}

.acms-exported-label {
	font-size: 13px;
}

// ------------------------------
// box
// ------------------------------
.acms-box-group {
	margin-top: 20px;
	margin-bottom: 20px;
}

// ------------------------------
// タブ
// ------------------------------
.acms-tabs {
	margin-bottom: 20px;
}

// ------------------------------
// チェックリスト
// ------------------------------
.acms-admin-checklist-config-search {
	margin: 10px 10px 20px;
}

// ------------------------------
//  パスワード 強度メーター
// ------------------------------
.acms-password-strength-meter {
	width: 100%;
	height: 6px;
	margin: 0 0 5px;
	background-color: $password-strength-default-color;

	&.js-result-0 { background: $password-strength-danger-color; }
	&.js-result-1 { background: $password-strength-anxiety-color; }
	&.js-result-2 { background: $password-strength-warning-color; }
	&.js-result-3 { background: $password-strength-reasonable-color; }
	&.js-result-4 { background: $password-strength-secure-color; }
}
.acms-password-strength-label {
	&:before {
		margin: 0 5px 0 0;
		font-family: 'acms-fonts';
	}
	&.js-label-0 { color: $password-strength-danger-color; }
	&.js-label-4 { color: $password-strength-secure-color; }

	&.js-label-0 {
		&:before {
			content: $icon-news;
		}
	}
	&.js-label-1 {
		&:before {
			content: $icon-news;
		}
	}
	&.js-label-2 {
		&:before {
			content: $icon-attention;
		}
	}
	&.js-label-3 {
		&:before {
			content: $icon-checklist;
		}
	}
	&.js-label-4 {
		&:before {
			content: $icon-checklist;
		}
	}
}


// ------------------------------
// フォント
// ------------------------------
.acms-font {
	font-family: 'acms-fonts', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W6', Meiryo, 'メイリオ', 'ＭＳ Ｐゴシック', 'MS PGothic', Verdana, sans-serif;
}

// ------------------------------
// ベンチマーク
// ------------------------------
@media screen and (min-width: $breakpoint-md-min) {
	.acms-benchmark-container {
		padding: 0 20px 0 245px;
		padding: 0 calc(30px + constant(safe-area-inset-right)) 0 20px;
	}
}

// ------------------------------
// 管理画面固定ヘッダー
// ------------------------------
.js-acms_fix_marker {
	z-index: zIndex(js-acms_fix_marker);
	margin: 0 0 10px 0;
	padding-top: 5px;
	padding-bottom: 5px;
	background: #FFF;
	&.js-acms-tab-select {
		margin-bottom: 0;
	}
	&[style*="position: fixed;"] {
		margin: 0;
		box-shadow: 0 3px 0 rgba(50,50,50,0.1);
	}
}

.acms-fix-right{
	position: relative;
	z-index: zIndex(acms-fix-right);
}


// ------------------------------
// jQuery UI Tabs
// ------------------------------
// スマートフォンのとき
@media screen and (max-width: $breakpoint-md-max) {
	#main .ui-tabs {
		margin-bottom: 20px;

		.ui-tabs-panel {
			padding: 0;
		}
	}
}

// ------------------------------
// 管理画面 SmartPhoto
// ------------------------------
.is-admin-page .smartphoto {
	z-index: zIndex(smartphoto);
	background-color: rgba(0, 0, 0, .9);
}
