@use "sass:math";


// 目次
// ------------------------------

// 01.   管理画面デフォルトのブログカラー
// 02.   ファイルのパス
// 03.   グリッドシステム
// 04.   Media Queries
// 05.   ボタン
// 06.   ラベル
// 07.   バッジ
// 08.   パネル
// 09.   タイムライン
// 10.   テーブル
// 11.   フォーム
// 12.   アラート
// 13.   プログレスバー
// 14.   アニメーション
// 15.   編集ページ



// ------------------------------
//  acms.cssまたはacms-admin.cssの判定
// ------------------------------
// falseでacms.css、trueでacms-admin.css用のコードと区別しています
$admin: false !default;


// ------------------------------
//  管理画面のフォント設定
// ------------------------------

// 管理画面内、エントリー編集画面、モーダル内で使用されます
$acms-admin-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$acms-code-font-family: "Menlo","Monaco","Courier New",monospace !default;


// ------------------------------
//  管理画面デフォルトのブログカラー
// ------------------------------

// この色は管理画面のブログの設定からブログごとに変えることができます。
$acms-red: #dc4040 !default;


// ------------------------------
//  ファイルのパス
// ------------------------------

// a-blog cmsをインストールする階層が直下以外でも成立するパスの書き方をしています。
// その影響のため、オリジナルのテーマ内にacms.cssをいれたときはパスを変更してください。

$acms-path-marker    : '../images/marker/' !default;
$acms-form-select    : '../images/marker/arrow_black03.png' !default;
$acms-font           : '../fonts/' !default;


// ------------------------------
//  グリッドシステム
// ------------------------------

//コンテナー
$acms-container    : 980px !default;

// グリッドシステムの合計のカラム数
$acms-columns      : 12 !default;

// 各カラムの幅
//$acms-col-1        : math.div(1, $acms-columns) !default;
//$acms-col-2        : math.div(1, $acms-columns) !default;
//$acms-col-3        : percentage(3 / $acms-columns) !default;
//$acms-col-4        : percentage(4 / $acms-columns) !default;
//$acms-col-5        : percentage(5 / $acms-columns) !default;
//$acms-col-6        : percentage(6 / $acms-columns) !default;
//$acms-col-7        : percentage(7 / $acms-columns) !default;
//$acms-col-8        : percentage(8 / $acms-columns) !default;
//$acms-col-9        : percentage(9 / $acms-columns) !default;
//$acms-col-10       : percentage(10 / $acms-columns) !default;
//$acms-col-11       : percentage(11 / $acms-columns) !default;
//$acms-col-12       : percentage(12 / $acms-columns) !default;

// ※合計のカラム数を増やしたら、各カラムの幅も増やしてください。

// 例）13カラムにしたい場合
// $acms-columns: 13 !default;

// $acms-col-1: percentage(1 / $acms-columns) !default;
// ...
// $acms-col-13: percentage(13 / $acms-columns) !default;


//  グリッドシステム　間隔
//===============================

// ** a-blog cmsのグリッドシステムの仕組み
//acms.cssのグリッドシステムでは、各カラムにpadding左右10pxつけ、
//はみ出した左右10pxを、左右をmargin-10px（ネガティブマージンと呼ばれます）
//を設定したコンテナーを全体に適応し、相殺することで成立しています。

$grid-space           : 20px !default; //左右10px空ける
// $negative-grid-space:        -10px !default; //左右-10pxする

//モバイルのとき
$mobile-grid          : 100% !default; //幅を100%にする
$mobile-grid-space    : 0 !default; //10px空いていたのを0にする
// $mobile-negative-grid-space: 0 !default; //-10pxしていたのを0にする



// ------------------------------
//  Media Queries
// ------------------------------

//各種ブレイクポイント
// $xl-width : 1224px !default;
// $lg-width : 1024px !default;
// $md-width : 768px !default;
// $sm-width : 480px !default;

// max-widthの値も用意していますが、基本的にはmin-widthの値を使っています。
// よりコードの記述がシンプルになる場合はmax-widthを使います。

//min-width指定
$breakpoint-sm-min    : 480px !default;
$breakpoint-md-min    : 768px !default;
$breakpoint-lg-min    : 1024px !default;
$breakpoint-xl-min    : 1440px !default;

//max-width指定
$breakpoint-sm-max    : ($breakpoint-sm-min - 1) !default; //479px
$breakpoint-md-max    : ($breakpoint-md-min - 1) !default; //767px
$breakpoint-lg-max    : ($breakpoint-lg-min - 1) !default; //1023px
$breakpoint-xl-max    : ($breakpoint-xl-min - 1) !default; //1439px



// ------------------------------
//  エントリー内スタイル
// ------------------------------
//  ユニットグループ
//===============================
$entry-class                      : acms-entry !default;
$grid-column-name                 : "acms-col-" !default;

$text-unit-tags               : 'h2','h3','h4','h5','h6','dl','p' !default;
$unit-type                    : 'image','file','map','yolp','street-view','youtube','video','eximage','media','quote','module' !default;
$align                        : 'left','right','center','auto' !default;
$unit-gutter                  : $grid-space !default;
$unit-margin-bottom           : $unit-gutter !default;
$unit-margin-bottom-no-caption: math.div($unit-gutter, 2) !default;

$hightlight-colors            : #FFFF66,#a0FFFF,#99FF99,#FF9999,#FF66FF,#880000 !default;



// ------------------------------
//  ボタン
// ------------------------------
//基本カラー
$acms-btn-background                    : #EFEFEF !default;
$acms-btn-border-color                  : rgba(0,0,0,.1) !default;
$acms-btn-hover-border-color            : rgba(0,0,0,.2) !default;
$acms-btn-active-border-color           : rgba(0,0,0,.3) !default;
$acms-btn-focus-border-color            : #137AF3 !default;
$acms-btn-focus-box-shadow              : 0 0 0 2px rgba(19,122,243,.4) !default;

$acms-btn-admin-background              : #FFF !default;

// 文字カラー
$acms-btn-text-default-color            : #333 !default;
$acms-btn-text-color                    : #FFF !default;

// 基準カラー
$acms-btn-primary                       : #005cee !default;
$acms-btn-info                          : #4b4b4b !default;
$acms-btn-success                       : #009812 !default;
$acms-btn-warning                       : #f9b433 !default;
$acms-btn-danger                        : #C5001D !default;

$acms-btn-admin-primary                 : #0052B1 !default;
$acms-btn-admin-info                    : #545454 !default;
$acms-btn-admin-danger                  : #da364e !default;

// デフォルトのボタン
//===============================

$acms-btn-padding-y                     : 8px !default; //上下padding
$acms-btn-padding-x                     : 8px !default; //左右padding
$acms-btn-padding-x-sp                  : 10px !default; //左右padding
$acms-btn-font-size                     : 14 !default;
$acms-btn-font-size-desktop             : 12 !default;

//ボタンサイズ：Small
$acms-btn-small-padding-y               : 4px !default; //上下padding
$acms-btn-small-padding-x               : 6px !default; //左右padding
$acms-btn-small-font-size               : 10 !default;

//ボタンサイズ：Large
$acms-btn-large-padding-y               : 8px !default; //上下padding
$acms-btn-large-padding-x               : 16px !default; //左右padding
$acms-btn-large-border-radius           : 4px !default;
$acms-btn-large-font-size               : 16 !default;


//ボタンサイズ：アイコン
$acms-btn-icon-padding                 : 2px 5px !default; //上下左右padding
$acms-btn-icon-font-size               : 18 !default;

// ** primary
// デフォルト
$acms-btn-primary-color-base            : $acms-btn-primary !default;
$acms-btn-primary-color-darker          : darken($acms-btn-primary, 8%) !default;

$acms-btn-primary-start-color           : lighten($acms-btn-primary, 8%) !default; //グラデーションの始まり
$acms-btn-primary-end-color             : $acms-btn-primary !default; //グラデーションの終わり
$acms-btn-primary-border                : $acms-btn-primary !default;
// hover
$acms-btn-primary-hover-border          : darken($acms-btn-primary, 17%) !default;
// active
$acms-btn-primary-active-bg             : $acms-btn-primary !default;
$acms-btn-primary-active-border         : darken($acms-btn-primary, 17%) !default;
// focus
$acms-btn-primary-focus-border-color    : darken($acms-btn-primary, 17%) !default;


// ** info
// デフォルト
$acms-btn-info-color-base               : $acms-btn-info !default;
$acms-btn-info-color-darker             : darken($acms-btn-info, 8%) !default;

$acms-btn-info-start-color              : lighten($acms-btn-info, 8%) !default;
$acms-btn-info-end-color                : $acms-btn-info !default;
$acms-btn-info-border                   : $acms-btn-info !default;
// hover
$acms-btn-info-hover-start-color        : lighten($acms-btn-info, 12%) !default;
$acms-btn-info-hover-end-color          : lighten($acms-btn-info, 2%) !default;
$acms-btn-info-hover-border             : darken($acms-btn-info, 17%) !default;
// active
$acms-btn-info-active-bg                : $acms-btn-info !default;
$acms-btn-info-active-border            : darken($acms-btn-info, 17%) !default;
$acms-btn-info-active-inset             : darken($acms-btn-info, 17%) !default;
// focus
$acms-btn-info-focus-border-color       : darken($acms-btn-info, 17%) !default;


// ** success
// デフォルト
$acms-btn-success-color-base            : $acms-btn-success !default;
$acms-btn-success-color-darker          : darken($acms-btn-success, 5%) !default;

$acms-btn-success-start-color           : lighten($acms-btn-success, 8%) !default;
$acms-btn-success-end-color             : $acms-btn-success !default;
$acms-btn-success-border                : $acms-btn-success !default;
// hover
$acms-btn-success-hover-start-color     : lighten($acms-btn-success, 12%) !default;
$acms-btn-success-hover-end-color       : lighten($acms-btn-success, 2%) !default;
$acms-btn-success-hover-border          : darken($acms-btn-success, 17%) !default;
// active
$acms-btn-success-active-bg             : $acms-btn-success !default;
$acms-btn-success-active-border         : darken($acms-btn-success, 17%) !default;
$acms-btn-success-active-inset          : darken($acms-btn-success, 17%) !default;
// focus
$acms-btn-success-focus-border-color    : darken($acms-btn-success, 17%) !default;


// ** warning
// デフォルト
$acms-btn-warning-color-base            : $acms-btn-warning !default;
$acms-btn-warning-color-darker          : darken($acms-btn-warning, 8%) !default;

$acms-btn-warning-start-color           : lighten($acms-btn-warning, 8%) !default;
$acms-btn-warning-end-color             : $acms-btn-warning !default;
$acms-btn-warning-border                : $acms-btn-warning !default;
// hover
$acms-btn-warning-hover-start-color     : lighten($acms-btn-warning, 12%) !default;
$acms-btn-warning-hover-end-color       : lighten($acms-btn-warning, 2%) !default;
$acms-btn-warning-hover-border          : darken($acms-btn-warning, 17%) !default;
// active
$acms-btn-warning-active-bg             : $acms-btn-warning !default;
$acms-btn-warning-active-border         : darken($acms-btn-warning, 17%) !default;
$acms-btn-warning-active-inset          : darken($acms-btn-warning, 17%) !default;
// focus
$acms-btn-warning-focus-border-color    : darken($acms-btn-warning, 17%) !default;


// ** danger
// デフォルト
$acms-btn-danger-color-base             : $acms-btn-danger !default;
$acms-btn-danger-color-darker           : darken($acms-btn-danger, 5%) !default;

$acms-btn-danger-start-color            : lighten($acms-btn-danger, 8%) !default;
$acms-btn-danger-end-color              : $acms-btn-danger !default;
$acms-btn-danger-border                 : $acms-btn-danger !default;
// hover
$acms-btn-danger-hover-start-color      : lighten($acms-btn-danger, 12%) !default;
$acms-btn-danger-hover-end-color        : lighten($acms-btn-danger, 2%) !default;
$acms-btn-danger-hover-border           : darken($acms-btn-danger, 17%) !default;
// active
$acms-btn-danger-active-bg              : $acms-btn-danger !default;
$acms-btn-danger-active-border          : darken($acms-btn-danger, 17%) !default;
$acms-btn-danger-active-inset           : darken($acms-btn-danger, 17%) !default;
// focus
$acms-btn-danger-focus-border-color     : darken($acms-btn-danger, 17%) !default;



// フラットボタン
//===============================

$acms-btn-flat-padding-y               : 14px !default; //上下左右padding
$acms-btn-flat-padding-x               : 8px !default; //左右padding
$acms-btn-flat-padding-x-sp            : 20px !default; //左右padding
$acms-btn-flat-border-radius           : 4px !default;
$acms-btn-flat-font-size               : 16 !default;
$acms-btn-flat-font-size-desktop       : 13 !default;
$acms-btn-flat-text-default-color      : #666 !default; //デフォルトのボタンの文字カラー
$acms-btn-flat-text-color              : #FFF !default; //カラーボタンのボタンの文字カラー

// ** primary
// デフォルト
$acms-btn-flat-primary-color           : lighten($acms-btn-primary, 8%) !default; // 背景色
$acms-btn-flat-primary-border          : 1px solid $acms-btn-primary !default; // 周りの線の色
// hover
$acms-btn-flat-primary-hover-color     : lighten($acms-btn-primary, 12%) !default;
$acms-btn-flat-primary-hover-border    : 1px solid darken($acms-btn-primary, 17%) !default;
// active
$acms-btn-flat-primary-active-bg       : $acms-btn-primary !default;


// ** info
// デフォルト
$acms-btn-flat-info-color              : lighten($acms-btn-info, 8%) !default;
$acms-btn-flat-info-border             : 1px solid $acms-btn-info !default;
// hover
$acms-btn-flat-info-hover-color        : lighten($acms-btn-info, 12%) !default;
$acms-btn-flat-info-hover-border       : 1px solid darken($acms-btn-info, 17%) !default;
// active
$acms-btn-flat-info-active-bg          : $acms-btn-info !default;


// ** success
// デフォルト
$acms-btn-flat-success-color           : lighten($acms-btn-success, 8%) !default;
$acms-btn-flat-success-border          : 1px solid $acms-btn-success !default;
// hover
$acms-btn-flat-success-hover-color     : lighten($acms-btn-success, 12%) !default;
$acms-btn-flat-success-hover-border    : 1px solid darken($acms-btn-success, 17%) !default;
// active
$acms-btn-flat-success-active-bg       : $acms-btn-success !default;


// ** warning
// デフォルト
$acms-btn-flat-warning-color           : lighten($acms-btn-warning, 8%) !default;
$acms-btn-flat-warning-border          : 1px solid $acms-btn-warning !default;
// hover
$acms-btn-flat-warning-hover-color     : lighten($acms-btn-warning, 12%) !default;
$acms-btn-flat-warning-hover-border    : 1px solid darken($acms-btn-warning, 17%) !default;
// active
$acms-btn-flat-warning-active-bg       : $acms-btn-warning !default;


// ** danger
// デフォルト
$acms-btn-flat-danger-color            : lighten($acms-btn-danger, 8%) !default;
$acms-btn-flat-danger-border           : 1px solid $acms-btn-danger !default;
// hover
$acms-btn-flat-danger-hover-color      : lighten($acms-btn-danger, 12%) !default;
$acms-btn-flat-danger-hover-border     : 1px solid darken($acms-btn-danger, 17%) !default;
// active
$acms-btn-flat-danger-active-bg        : $acms-btn-danger !default;



// リンクボタン
//===============================
$acms-btn-link-color                   : #428bca !default;
$acms-btn-link-color-hover             : #2e67a5 !default;

// disabledボタン
//===============================
$acms-btn-disabled-opacity              : 0.65 !default;
$acms-btn-disabled-opacity-ie           : ($acms-btn-disabled-opacity * 100) !default; //IE用opacity



// ------------------------------
// ラベル
// ------------------------------

// デフォルト
$acms-label-text-color            : #333333 !default;
// success
$acms-label-text-success-color    : #0c6b26 !default;
// info
$acms-label-text-info-color       : #044bb1 !default;
// warning
$acms-label-text-warning-color    : #715e1a !default;
// danger
$acms-label-text-danger-color     : #9c0808 !default;


// 背景カラー
//===============================
// ** 基準カラー
$acms-label-black            : #333333 !default;
// デフォルト
$acms-label-default          : #CACACA !default;
// success
$acms-label-success-color    : #b7f7a5 !default;
// info
$acms-label-info-color       : #bfd7f9 !default;
// warning
$acms-label-warning-color    : #ffda6c !default;
// danger
$acms-label-danger-color     : #f9c6c6 !default;




// ------------------------------
// バッジ
// ------------------------------

// デフォルト
$acms-badge-text-color            : #333333 !default;
// success
$acms-badge-text-success-color    : #0c6b26 !default;
// info
$acms-badge-text-info-color       : #044bb1 !default;
// warning
$acms-badge-text-warning-color    : #715e1a !default;
// danger
$acms-badge-text-danger-color     : #9c0808 !default;

// 背景カラー
//===============================

// デフォルト
$acms-badge-default          : #CACACA !default;
// success
$acms-badge-success-color    : #b7f7a5 !default;
// info
$acms-badge-info-color       : #bfd7f9 !default;
// warning
$acms-badge-warning-color    : #ffda6c !default;
// danger
$acms-badge-danger-color     : #f9c6c6 !default;

// 承認バッジの設定
$acms-badge-approval-text-color       : #FFF !default;
$acms-badge-approval-color       : #E20020 !default;


// ------------------------------
// トースト
// ------------------------------

// デフォルト
$acms-toast-text-color            : #FFFFFF !default;
// success
$acms-toast-text-success-color    : #0c6b26 !default;
// info
$acms-toast-text-info-color       : #044bb1 !default;
// warning
$acms-toast-text-warning-color    : #715e1a !default;
// danger
$acms-toast-text-danger-color     : #9c0808 !default;


// 背景カラー
//===============================
// ** 基準カラー
$acms-toast-black            : #333333 !default;
// デフォルト
$acms-toast-default          : #333333 !default;
// success
$acms-toast-success-color    : #b7f7a5 !default;
// info
$acms-toast-info-color       : #bfd7f9 !default;
// warning
$acms-toast-warning-color    : #ffda6c !default;
// danger
$acms-toast-danger-color     : #f9c6c6 !default;



// ------------------------------
// パネル
// ------------------------------

// ** デフォルト
$acms-panel-black-text-color     : #FFFFFF !default;
// ボーダー
$acms-panel-black-border         : #9898A2 !default;
// 背景色
$acms-panel-black-bg             : #9898A2 !default;


// ** カラー
// ** info
$acms-panel-info-text-color      : #FFFFFF !default;
$acms-panel-info-bg              : #009BE6 !default;
$acms-panel-info-border          : #009BE6 !default;

// ** danger
$acms-panel-danger-text-color    : #FFFFFF !default;
$acms-panel-danger-bg            : #FF5A3C !default;
$acms-panel-danger-border        : #FF5A3C !default;


// ------------------------------
// リスト
// ------------------------------
$acms-list-group-border-color: #E5E5E5 !default;




// ------------------------------
// タイムライン
// ------------------------------
$timeline-line-color              : #DDD !default;
$timeline-line-width              : 4px !default;

$timeline-label-font-size         : 14 !default; //日付ラベルのフォントサイズ

$timeline-itemgroup-margin-top    : 30px !default;

$timeline-panel-margin            : 5px 0 20px !default; //要素間の感覚
$timeline-panel-padding           : 10px !default; //内側の感覚
$timeline-panel-border            : 1px solid #DDD !default;



// ------------------------------
// アイコン背景
// ------------------------------

// 文字カラー
$acms-icon-text-color       : #FFF !default;

// 背景カラー
//===============================
// ** 基準カラー
$acms-icon-black            : #333333 !default;
// デフォルト
$acms-icon-default          : lighten($acms-icon-black, 40%) !default;

// 基準カラー・success
$acms-icon-color            : #4AC0A4 !default;
// info
$acms-icon-info-color       : adjust-hue(lighten($acms-icon-color, 10%), 50) !default;
// warning
$acms-icon-warning-color    : adjust-hue(lighten($acms-icon-color, 10%), -120) !default;
// danger
$acms-icon-danger-color     : adjust-hue(lighten($acms-icon-color, 10%), -180) !default;




// ------------------------------
// テーブル
// ------------------------------

// デフォルト
//===============================
// .acms-table
$acms-table-border                   : 1px solid #DDD !default;
$acms-table-cell-padding             : 10px !default;

// ** 見出しありテーブル
// .acms-table-heading
$acms-table-heading-border           : 1px solid #CCCCCC !default;
// .acms-table-heading th
$acms-table-heading-th-padding       : 5px 10px !default;
$acms-table-heading-th-border        : solid 1px #25242C !default;
$acms-table-heading-th-bg            : #f5f5f5 !default;
$acms-table-heading-th-text-color    : #404040 !default;

// ** ボーダーテーブル
//.acms-table-bordered
$acms-table-bordered-border          : 1px solid #DDD !default;

// ** ストライプテーブル
// .acms-table-striped
$acms-table-border-odd               : #FFF !default;
$acms-table-border-even              : #f5f5f5 !default;

// ** ホバーしたときのテーブル
// .acms-table-hover,.acms-table-hover-line
$acms-table-hover-bg                 : #e8f2ff !default;
$acms-table-hover-line-bg            : #e8f2ff !default;

// ** 入れ替え用テーブル
// .acms-table-sortable-active
$acms-table-sortable-bg              : #FFFFFF !default;


// 管理画面のテーブル
//===============================
// ** デフォルト
// .acms-table-admin
$acms-table-admin-border:                 1px solid #DDD !default;
$acms-table-admin-cell:                   8px 5px !default; //th,tdのpaddingの感覚
$acms-table-admin-td-bg:                  #FFF !default;

// ** ストライプテーブル
// .acms-table-admin-striped
$acms-table-admin-border-odd:             #FFF !default;
$acms-table-admin-border-even:            #F2F2F4 !default;

// ** ミニテーブル
// .acms-admin-mini-table
$acms-admin-mini-table-thead-bg:          #f5f5f5 !default;

$acms-admin-mini-table-thead-border:      0 !default;
$acms-admin-mini-table-border :           $acms-table-admin-border !default;

$acms-admin-mini-table-odd :              #FFFFFF !default; //奇数
$acms-admin-mini-table-even :             #FFFFFF !default; //偶数

// ** 編集画面用テーブル
// .acms-table-admin-edit
$acms-table-admin-edit-border :           $acms-table-admin-border !default;
$acms-table-admin-edit-bg :               #FFF !default;

$acms-table-admin-edit-th-width:           250px !default;

// ** 編集画面用 ボーダーありテーブル
// .acms-table-admin-edit-bordered
$acms-table-admin-edit-bordered-border :   $acms-table-admin-border !default;
$acms-table-admin-edit-bordered-bg:        #FFF !default;

$acms-table-admin-edit-bordered-th-width : $acms-table-admin-edit-th-width !default;


// カラー
//===============================
// info
$acms-table-info-bg:    #BCCCE2 !default;
// success
$acms-table-success-bg: #AAD9CD !default;
// warning
$acms-table-warning-bg: #E1D7BB !default;
// danger
$acms-table-danger-bg:  #E1BCC4 !default;




// ------------------------------
// フォーム
// ------------------------------
// デフォルト
$acms-form-border                   : 1px solid rgba(0, 0, 0, .2) !default;
$acms-form-border-radius            : 3px !default;
$acms-form-box-shadow               : 0 1px 1px rgba(0, 0, 0, 0.1) inset !default;
$acms-form-hover-border-color       : rgba(0, 0, 0, .3) !default;
$acms-form-active-border-color      : rgba(0, 0, 0, .3) !default;
$acms-form-focus-border-color       : #137AF3 !default;
$acms-form-focus-box-shadow         : 0 0 0 2px rgba(19, 122, 243, 0.4) !default;

$acms-form-height-small             : 22px !default;
$acms-form-height                   : 26px !default;
$acms-form-height-large             : 38px !default;

$acms-form-height-small-sp          : 26px !default;
$acms-form-height-sp                : 32px !default;
$acms-form-height-large-sp          : 44px !default;

$acms-form-padding-x                : 4px !default;
$acms-form-padding-x-sp             : 8px !default;


// select
$acms-form-select-border            : 1px solid #CCC !default;
$acms-form-select-border-color-hover: 1px solid #AAA !default;
$acms-form-select-padding           : 6px 30px 6px 10px !default;
$acms-form-select-font-size         : 16 !default;
$acms-form-select-border-hover      : 1px solid $acms-form-hover-border-color !default;
$acms-form-select-bg-color          : #f7f7f7 !default;
// multiple
$acms-form-multiple-bg-color        : #FFF !default;

// disabled
$acms-form-disabled-border-color    : #DDD !default;
$acms-form-disabled-bg-color        : #F5F5F5 !default;
$acms-form-disabled-text-color      : #999 !default;
$acms-form-disabled-opacity         : .6 !default;

// 各種 幅
$acms-form-width-large-width        : 540px !default;
$acms-form-width-medium-width       : 380px !default;
$acms-form-width-small-width        : 220px !default;
$acms-form-width-mini-width         : 140px !default;

// エラーテキスト
$acms-form-error-border-color       : #DC8D99 !default;
$acms-form-error-bg-color           : #FFF8F8 !default;
$acms-form-error-text-color         : #C91032 !default;

$acms-text-error-color              : #C91032 !default;
$acms-text-helper-color             : #707070 !default;

$acms-input-images-path             : '#{$acms-path-marker}ico_input.png' !default;



// ------------------------------
// アラート
// ------------------------------

// 上下左右の余白
$acms-alert-padding          : 20px !default;
// 上下左右の角丸
$acms-alert-border-radius    : 0 !default;

// アイコンつきアラートの余白
$acms-alert-icon-padding     : 20px 40px 20px 50px !default;


// 各アラートのカラー
// ===============================

// ** デフォルト
// ボーダー
$acms-alert-black-border           : #9898A2 !default;
// 背景色
$acms-alert-black-bg               : #FFFFFF !default;
// 文字カラー
$acms-alert-black-text-color       : #404040 !default;
// 閉じるボタン
$acms-alert-black-close-color      : #9898A2 !default;
// アイコンカラー
$acms-alert-black-icon-color       : #9898A2 !default;

// ** カラー

// ** success
// ボーダー
$acms-alert-success-border         : #00AA64 !default;
// 背景色
$acms-alert-success-bg             : #FFFFFF !default;
// 文字カラー
$acms-alert-success-text-color     : #404040 !default;
// 閉じるボタン
$acms-alert-success-close-color    : #00AA64 !default;
// アイコンカラー
$acms-alert-success-icon-color     : #00AA64 !default;

// ** info
// ボーダー
$acms-alert-info-border            : #009BE6 !default;
// 背景色
$acms-alert-info-bg                : #FFFFFF !default;
// 文字カラー
$acms-alert-info-text-color        : #404040 !default;
// 閉じるボタン
$acms-alert-info-close-color       : #009BE6 !default;
// アイコンカラー
$acms-alert-info-icon-color        : #009BE6 !default;

// ** danger
// ボーダー
$acms-alert-danger-border          : #FF5A3C !default;
// 背景色
$acms-alert-danger-bg              : #FFFFFF !default;
// 文字カラー
$acms-alert-danger-text-color      : #404040 !default;
// 閉じるボタン
$acms-alert-danger-close-color     : #FF5A3C !default;
// アイコンカラー
$acms-alert-danger-icon-color      : #FF5A3C !default;

// ** warning
// ボーダー
$acms-alert-warning-border         : #FAB44B !default;
// 背景色
$acms-alert-warning-bg             : #FFFFFF !default;
// 文字カラー
$acms-alert-warning-text-color     : #404040 !default;
// 閉じるボタン
$acms-alert-warning-close-color    : #FAB44B !default;
// アイコンカラー
$acms-alert-warning-icon-color     : #FAB44B !default;




// ------------------------------
// プログレスバー
// ------------------------------

// ** プログレスバー全体

// 背景色
$acms-progress-bg               : #FFF !default;
// 高さ
$acms-progress-height           : 28px !default;
// ボーダー
$acms-progress-border           : 1px solid #CCCCCC !default;
// 上下左右の角丸
$acms-progress-border-radius    : 4px !default;


// プログレスバー
// ===============================
// 文字の色
$acms-progress-bar-text            : #FFF !default;
// ストライプの幅
$acms-progress-bar-stripe-width    : 40px !default;

// ** プログレスバーのカラー
// デフォルト
$acms-progress-bar-color           : #4AC0A4 !default;
// info
$acms-progress-bar-color-info      : adjust-hue(lighten($acms-progress-bar-color, 20), 50) !default;
// danger
$acms-progress-bar-color-danger    : adjust-hue(lighten($acms-progress-bar-color, 20), -180) !default;




// ------------------------------
// Lazy Load
// ------------------------------
$acms-lazy-load-bg: #f8f8f8 !default;




// ------------------------------
// アニメーション
// ------------------------------

// フェード
// ===============================
// フェードの速度
$acms-fade-speed         : 500ms !default;
// フェードイン 透明度（最大で1、0で完全透過）
$acms-fade-in-strong     : 0.3 !default;
$acms-fade-in            : 0.5 !default;
$acms-fade-in-light      : 0.7 !default;
// フェードアウト　透明度（最大で1、0で完全透過）
$acms-fade-out-strong    : 0.3 !default;
$acms-fade-out           : 0.5 !default;
$acms-fade-out-light     : 0.7 !default;

// スライド
// ===============================
// y軸の値
$acms-slide-top                : -20px !default; //-を指定することで上方向に移動します
$acms-slide-bottom             : 20px !default;
// x軸の値
$acms-slide-left               : -20px !default; //-を指定することで左方向に移動します
$acms-slide-right              : 20px !default;

// スライドでは、opacityの処理をtransformより早く実行することでフェードのアニメーションを作っています。
$acms-slide-opacity-speed      : 500ms !default; //表示する速度
$acms-slide-transform-speed    : 1200ms !default; //移動する速度

// ズーム
// ===============================
// 拡大する値
$acms-slide-zoom-in-show        : 0.8 !default; // 表示しながら拡大するときのデフォルト
$acms-slide-zoom-in-default     : 1 !default;
$acms-slide-zoom-in-hover       : 1.2 !default; // hover時の最大
// 縮小する値
$acms-slide-zoom-out-show       : 1.2 !default; // 表示しながら縮小するときのデフォルト
$acms-slide-zoom-out-default    : 1 !default;
$acms-slide-zoom-out-hover      : 0.8 !default; // hover時の最大

$acms-zoom-opacity-speed        : 500ms !default; //表示する速度
$acms-zoom-transform-speed      : 500ms !default; //移動する速度

// ポップアップ
// ===============================
//y軸の値
$acms-popup-top           : -5px !default;//-を指定することで上方向に移動します
$acms-popup-bottom        : 5px !default;
//x軸の値
$acms-popup-left          : -5px !default;//-を指定することで左方向に移動します
$acms-popup-right         : 5px !default;

// hoverしたときとhoverしたあとの速度を変えています
$acms-popup-up-speed      : 300ms !default; // hoverしたとき
$acms-popup-down-speed    : 500ms !default; // hoverをやめたとき

// 遅延
// ===============================

// 遅延のスピード
$acms-animation-delay-first             : 0.1s !default;
$acms-animation-delay-second            : 0.25s !default;
$acms-animation-delay-third             : 0.3s !default;
$acms-animation-delay-fourth            : 0.45s !default;

// 遅延のスピード （反対）
$acms-animation-delay-reverse-fourth    : 0.1s !default;
$acms-animation-delay-reverse-third     : 0.25s !default;
$acms-animation-delay-reverse-second    : 0.3s !default;
$acms-animation-delay-reverse-first     : 0.45s !default;




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

$acms-admin-title-textcolor     : #404040 !default;
$acms-admin-title2-textcolor    : #404040 !default;


