@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● editor.css                                          */
/*    管理画面用 CSS                                      */
/*    ・サイト全般の共通処理をインポート                  */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    各種import                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

// コンテンツタイプ（通常：default）
$contents-type: "default";

// 基本プロパティをインポート
@import "config";

// 共通部品をインポート
@import "reset_browser";
@import "common_element/index";
@import "effect/index";
@import "modules/index";
//@import "format/index";




/* Baserの初期スタイル
----------------------------------------------- */
body
{
	/* Font */
	//font-family: Arial, Verdana, sans-serif;

	/* Remove the background color to make it transparent */
	background: none;
	background-color: #fff;
}

body[class*='cke_editable'] ol,
body[class*='cke_editable'] ul,
body[class*='cke_editable'] dl,
body[class*='cke_editable'] p
{
  padding:5px;
  margin:5px;
}
body[class*='cke_editable'] dt,
body[class*='cke_editable'] dd{
  padding:5px;
  margin:5px;
}
body[class*='cke_editable'] div{
  padding:5px;
  margin:5px;
}


dl{border:1px dotted #4cb5e8;}
dt{border:1px dotted #0063a4;}
dd{border:1px dotted #003d84;}




/* text */
p{
  line-height: 1.5;
  margin: 0 0 1em;
}
/* list */
ul,
ol{
  margin: 1em 0;
}
body[class*='cke_show_blocks'] ul,
body[class*='cke_show_blocks'] ol{
  margin: 1em 0!important;
  border: 1px dotted #808080;
  padding: 0!important;
  padding-top: 8px;
  padding-left: 2em;
  li{
    border: 1px dotted #cccccc!important;
  }
  &:not[class]{
    li{
      padding: 4px!important;
    }
  }
}
body[class*='cke_show_blocks'] a{
  border: 2px solid rgba(0,0,255,0.5)!important;
  padding: 4px!important;
  display: inline-block!important;
  &:hover{
    color: inherit!important;
    background: inherit!important;
  }
}

body[class*='cke_editable'] {
  //font-size: 87.5%;
}
/* table */
body[class*='cke_editable'] table{
  width: 100%;
}
    body[class*='cke_editable'] table th,
    body[class*='cke_editable'] table td{
      min-width: 50px;
      min-height: 10px;
    }

/* hr */
hr{
  height: 10px;
  margin: 1em 0;
  border: none;
  display: block;
  border-bottom: 1px dotted #ccc;
  position: relative;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    custom Style                                  */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

html {
  background: #eee;
}

/* editor width */
body[class*='cke_editable']{
  //width: 1200px;
  max-width: 1050px;
  margin: 0 auto;
  padding: 15px;
}
/* img */
body[class*='cke_editable'] img{
  max-width: 100%;
  height: auto;
 /* max-height: 300px;*/
}
/* Heading */
body[class*='cke_editable'] .Heading{
  font-weight: bold;
}


// 見出しの上マージンをゼロにしないと改行挿入時にズレる
.Heading{
  margin: 0 0 1em!important;
}

 
// rem の基準フォントサイズを適用
html {
  font-size: 62.5%;
}
body {
  font-size: 1.6em;
}


// divの余白調整
body[class*='cke_editable'] div{
  margin: 15px 0;
}


/* Icon を可視化
--------------------------------------------------- */
.Icon{
  color: white!important;
  background: rgba(30,30,200,0.75)!important;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  width:  50px;
  position: static;
  vertical-align: middle;
  border-radius: 50px;
  transform: scale(0.5)!important;
}
.Icon:after{
  content: "アイコン";
  font-size: 10px;
  vertical-align: middle;
}


/* PHP code  を可視化
--------------------------------------------------- */
.PHPcode{
  color: white!important;
  background: red!important;
}
.PHPcode:before{
  content: "プログラムコード（PHP）";
}
.PHPcode:after{
  content: " 削除しないでください";
}
/* JS code  を可視化
--------------------------------------------------- */
.JScode{
  color: white!important;
  background: red!important;
}
.JScode:before{
  content: "プログラムコード（JS）";
}
.JScode:after{
  content: " 削除しないでください";
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*  Heading                                         */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* プルダウン用 */
.cke_panel_block [role="option"],
.cke_panel_block [role="option"] *{
  font-size: 12px;
}
.cke_panel_block .Heading[class*="Type"]{
  font-size: 12px;
  line-height: 1em;
  margin: 0!important;
  padding: 4px;
  &::before,
  &::after{
    margin: 0!important;
  }
}
/* エディタ内 */
/*
body[class*='cke_editable'] .Heading[class*="Type"] {
  position: relative;
  margin: 30px 0 10px;
  border: 2px solid #777!important;
}
body[class*='cke_editable'] .Heading[class*="Type"]:before{
  position: absolute;
  bottom: 100%;
  left: 0px;
  top: auto;
  font-size: 10px;
  font-weight: normal;
  font-family: sans-serif;
  letter-spacing: 0;
  text-align: center;
  display: inline-block;
  content: "カスタム見出し["attr(class)"]";
  width: auto;
  height: auto;
  color: #fff;
  background: #777;
  padding: 0.25em 1em;
  border-radius: 1em 1em 0 0;
}
*/




/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*  クラス名                                        */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*
[class],[id]{
  position: relative;
}
[class]:after,
[id]:after{
  position: absolute;
  display: inline-block;
  bottom: 80%;
  left: 0px;
}
[class]:after{
  content: ".'"attr(class)"'";
}
[id]:after{
  content: "#'"attr(id)"'";
}
*/

/*
body[class*='cke_show_blocks'] span{
  position: relative;
  border: 1px dotted #ccc!important;
  &::after{
    position: absolute;
    display: inline-block;
    bottom: 80%;
    left: 0px;
    font-size: 10px;
    font-weight: normal;
    text-align: center;
    display: inline-block;
    color: #fff;
    background: rgba(0,0,0, 0.375);
    padding: 0.25em 0.25em;
    white-space: nowrap;
  }
  &[class]::after{
    content: "."attr(class)" ";
  }
  &[style]::after{
    content: " "attr(style)" ";
  }
}
*/


/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    SknTpl                                        */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
body[class*='cke_show_blocks'] .SknTpl{
  margin: 2em 0px 0.5em;
  border: 2px solid #ccc!important;
  padding: 20px 15px;
  background: #eee;
  position: relative;
}
body[class*='cke_show_blocks'] .SknTpl:before,
body[class*='cke_show_blocks'] .SknTpl:after{
  position: absolute;
  width: 100%;
  color: #aaa;
  font-size: 10px;
  font-weight: normal;
  text-align: center;
  display: inline-block;
  white-space: nowrap;
}
body[class*='cke_show_blocks'] .SknTpl:before{
  bottom: 100%;
  left: 0%;
  width: auto;
  content: "TEMPLATE [ "attr(data-skntpl-name)"]";
  color: #fff;
  background: #777;
  padding: 0.5em 1em;
  border-radius: 1em 1em 0 0;
}
body[class*='cke_show_blocks'] .SknTpl:after{
  content: "TEMPLATE END";
  bottom: 0px;
}

/* SknTplThumbnailList
--------------------------------------------------- */
/*
.SknTplThumbnailList{
}
    .SknTplThumbnailList ul.ColumnGroup4elements > *{
      width: 25%;
      width: calc(25% - 10px)!important;
      float: left;
    }
    .SknTplThumbnailList ul.ColumnGroup3elements > *{
      width: 33.3%;
      width: calc(33.3% - 10px)!important;
      float: left;
    }
    .SknTplThumbnailList ul.ColumnGroup2elements > *{
      width: 50%;
      width: calc(50% - 10px)!important;
      float: left;
    }
    .SknTplThumbnailList ul.ColumnGroup4elements > *:nth-child(4n+1),
    .SknTplThumbnailList ul.ColumnGroup3elements > *:nth-child(3n+1),
    .SknTplThumbnailList ul.ColumnGroup2elements > *:nth-child(2n+1){
      clear: both;
    }
*/
    


/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    hide webfont icon                             */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
[class*='icon-']:before {
  display: none!important;
}




/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    Template                                      */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* SknTplThumbnailList
--------------------------------------------------- */
.SknTplThumbnailList{ 
  ul li{
    width: calc(25% - 10px)!important;
  }
  ul.ColumnGroup4elements > *{
    width: calc(25% - 10px)!important;
  }
  ul.ColumnGroup3elements > *{
    width: calc(33.3% - 10px)!important;
  }
  ul.ColumnGroup2elements > *{
    width: calc(50% - 10px)!important;
  }
}

/* SknTplThumbnailList
--------------------------------------------------- */
.SknTplImageParagraph{
}
    /* 管理画面では写真幅を小さめにする */
    /* ImageItem */
    .SknTplImageParagraph .ImageItem{
      width: 27.5%;
    }
    /* TextItem */
    .SknTplImageParagraph .TextItem{
      width: 62.5%;
    }