/* 
 * Blocks.css
 * for Block Lab pulgin
 * 
*/

/* ============================================
     管理画面
   ============================================ */

/*  管理画面のエディタ拡幅
  ------------------------------------ */
.wp-block {    max-width: 840px; }

/*  ゴースト設定
  ------------------------------------ */
.ghost{ display: none;}
.block-editor-writing-flow .ghost{ display: block; border:1px dashed #ccc; height: 30px; text-align: center;}



/* ============================================
     基本パーツ
   ============================================ */

/*  [mk2]見出し　｜　mk2BasicTtl
  ------------------------------------ */
.mk2BasicTtl .size16{ font-size: 16px;}
.mk2BasicTtl .size18{ font-size: 18px;}
.mk2BasicTtl .size20{ font-size: 20px;}
.mk2BasicTtl .size24{ font-size: 24px;}
.mk2BasicTtl .size28{ font-size: 28px;}
.mk2BasicTtl .size34{ font-size: 34px;}
.mk2BasicTtl .size42{ font-size: 42px;}
   
.mk2BasicTtl .left  { text-align: left;}
.mk2BasicTtl .center{ text-align: center;}
.mk2BasicTtl .right { text-align: right;}

.mk2BasicTtl .black { color: #000;}
.mk2BasicTtl .white { color: #fff;}
.mk2BasicTtl .green { color: #24890d;}
.mk2BasicTtl .orange{ color: #FC8524;}
.mk2BasicTtl .gray  { color: #888;}

.mk2BasicTtl .borderBlack{ border-bottom: 2px solid #000; padding-bottom: 8px;}
.mk2BasicTtl .borderWhite{ border-bottom: 2px solid #fff; padding-bottom: 8px;}
.mk2BasicTtl .borderGreen{ border-bottom: 2px solid #24890d; padding-bottom: 8px;}
.mk2BasicTtl .borderOrange{ border-bottom: 2px solid #FC8524; padding-bottom: 8px;}
.mk2BasicTtl .borderGray{ border-bottom: 2px solid #888; padding-bottom: 8px;}

@media (max-width: 540px) {
   .mk2BasicTtl .size24{ font-size: 22px;}
   .mk2BasicTtl .size28{ font-size: 24px;}
   .mk2BasicTtl .size34{ font-size: 28px;}
   .mk2BasicTtl .size42{ font-size: 34px;}
}

/*  [mk2]リード文　｜　mk2BasicLeadTxt
  ------------------------------------ */
.mk2BasicLeadTxt.size16{ font-size: 16px;}
.mk2BasicLeadTxt.size18{ font-size: 18px;}
.mk2BasicLeadTxt.size20{ font-size: 20px;}
.mk2BasicLeadTxt.size24{ font-size: 24px;}
.mk2BasicLeadTxt.size28{ font-size: 28px;}

.mk2BasicLeadTxt.normal{ font-weight: normal;}
.mk2BasicLeadTxt.bold  { font-weight: bold;}

.mk2BasicLeadTxt.black { color: #000;}
.mk2BasicLeadTxt.green { color: #24890d;}
.mk2BasicLeadTxt.orange{ color: #FC8524;}
.mk2BasicLeadTxt.gray  { color: #888;}
.mk2BasicLeadTxt.white { color: #fff;}

.mk2BasicLeadTxt.left  { text-align: left;}
.mk2BasicLeadTxt.center{ text-align: center;}
.mk2BasicLeadTxt.right { text-align: right;}
   

/*   [mk2]スペーサーブロック　｜　blockUmrSpacer
  ------------------------------------ */
.block-editor-writing-flow .blockMk2Spacer { border:1px dashed #ccc;}
.block-editor-writing-flow .blockMk2Spacer:before { content: "Spacer Block"; color:#ddd;}

@media (max-width: 540px) {
   .blockMk2Spacer.forPC { display: none;}
}


/*  [mk2]画像　｜　mk2BasicIMG
  ------------------------------------ */
.block-editor-writing-flow .ghostMk2BasicIMGTab { background-color: #ccc;}
.block-editor-writing-flow .ghostMk2BasicIMGTab:before { content: "FloatImageEdit"; color:#888;}

.block-editor-writing-flow .ghost.ghostMk2BasicIMG { height: 150px; background-color: lightpink;}
.block-editor-writing-flow .ghostMk2BasicIMG:before { content: "No Image"; color:#f00;}

.mk2BasicIMG { padding-bottom:1em; }
.mk2BasicIMG .img { margin-bottom: 5px; }
.mk2BasicIMG .caption { margin-bottom: 0; line-height: 1.4; }

.mk2BasicIMG.alignLeft { text-align: left;}
.mk2BasicIMG.alignCenter { text-align: center;}
.mk2BasicIMG.alignRight { text-align: right;}

.mk2BasicIMG .size12 { font-size: 12px;}
.mk2BasicIMG .size14 { font-size: 14px;}
.mk2BasicIMG .size16 { font-size: 16px;}
.mk2BasicIMG .size18 { font-size: 18px;}

.mk2BasicIMG .black { color: #000;}
.mk2BasicIMG .green { color: #24890d;}
.mk2BasicIMG .orange{ color: #FC8524;}
.mk2BasicIMG .gray  { color: #888;}

.mk2BasicIMG.floatLeft { float: left; margin-right: 30px;  max-width: 50%;}
.mk2BasicIMG.floatRight { float: right; margin-left: 30px;  max-width: 50%;}

@media (max-width: 640px) {
   .mk2BasicIMG.floatLeft,
   .mk2BasicIMG.floatRight { float: none; margin: 0 auto 10px; max-width: inherit; text-align: center !important;}
}


/*  [mk2]フロート解除　｜　mk2FloatClear
  ------------------------------------ */
.mk2FloatClear{ clear: both;}
.block-editor-writing-flow .ghost.ghostMk2FloatClear:before { content: "Float Clear"; color:#ccc;}


/*  [mk2]区切り線　｜　mk2HR
  ------------------------------------ */
.mk2HR hr{  display: block;    height: 1px;    border: 0;    border-top: 1px solid #ccc;    margin: 1em auto;   padding: 0; }
.mk2HR.gray hr{ border-color:#ccc;}
.mk2HR.black hr{ border-color:#000;}
.mk2HR.green hr{ border-color:#D6EFC4;}
.mk2HR.orange hr{ border-color:#FC8524;}
.mk2HR.white hr{ border-color:#fff;}

.mk2HR.w90 hr{ max-width: 90%;}
.mk2HR.w80 hr{ max-width: 80%;}
.mk2HR.w60 hr{ max-width: 60%;}


/*  [mk2]リンクボタン　｜　mk2LinkBtn
  ------------------------------------ */
.mk2LinkBtn p{margin-bottom: 0;}
.mk2LinkBtn a{ display: inline-block; padding: 4px 40px; box-sizing: border-box; border: 2px solid #24890d; background: url("/common/img/mark_arrowR_02.png") no-repeat right center ; background-size: 62px 21px; border-radius: 5px; text-decoration: none; text-align: center; font-size: 16px; font-weight: bold;color: #24890d; transition: all .3s ;}
   .mk2LinkBtn a:hover{ opacity: 0.7;  }

.mk2LinkBtn.font14 a{ font-size: 14px; }
.mk2LinkBtn.font16 a{ font-size: 16px; }
.mk2LinkBtn.font18 a{ font-size: 18px; }
.mk2LinkBtn.font20 a{ font-size: 20px; }

.mk2LinkBtn.green a{ background-color: #24890d; color: #fff; background-image:  url("/common/img/mark_arrowR_01.png");}
.mk2LinkBtn.greenClear a{ background-color: #fff; color: #24890d;}
.mk2LinkBtn.grayClear a{ background-color: #fff; border-color: #888;  color: #888;}
.mk2LinkBtn.blackClear a{ background-color: #fff; border-color: #000; color: #000;}

.mk2LinkBtn.wFull a{ width: 100%; max-width: 100%;}
.mk2LinkBtn.w500 a{ width: 500px; max-width: 100%;}
.mk2LinkBtn.w300 a{ width: 300px; max-width: 100%;}
.mk2LinkBtn.w200 a{ width: 200px; max-width: 100%;}

.mk2LinkBtn.left p{ text-align: left;}
.mk2LinkBtn.center p{ text-align: center;}
.mk2LinkBtn.right p{ text-align: right;}


/* [mk2]基本パーツ｜表｜項目名+内容　｜　mk2Table2col
  ------------------------------------ */
.mk2Table2col table{ border: 0; border-top: 5px solid #24890d; border-spacing: 0;width: 100%; margin-bottom: 10px; }
.mk2Table2col th,
.mk2Table2col td{ border: 0;  border-bottom: 1px solid #ccc; padding: 8px 16px; text-align: left;vertical-align: top;}
.mk2Table2col th{ width: 140px; font-weight: bold;}
.mk2Table2col tr:last-child th,
.mk2Table2col tr:last-child td{ border-bottom: 2px solid #24890d;}

@media (max-width: 640px) {
   .mk2Table2col th,
   .mk2Table2col td{ display: block; padding: 8px ; }   
   .mk2Table2col th{ width: inherit; border-bottom: 0; padding-bottom: 0;}
   .mk2Table2col td{ }
}

/* ============================================
     セクション・エリア
   ============================================ */

/* [mk2]エリア｜エリアエンド　｜　ghostMk2AreaEnd
  ------------------------------------ */
.block-editor-writing-flow .ghostMk2AreaEnd:before { content: "area end"; color:#ddd;}

/* [mk2]エリア｜色地エリアスタート　｜　mk2AreaStartColorBG
  ------------------------------------ */
.mk2AreaStartColorBG { margin-left: auto; margin-right: auto; border: 1px solid #ccc; background-color: #efefef; max-width: 100%; box-sizing: border-box; padding: 25px 25px 0;}
.block-editor-writing-flow .ghostMk2AreaStartColorBG:before { content: "colord area start"; color:#ddd;}

.mk2AreaStartColorBG.gray {background-color:#EEEEEE ; border-color:#CECECE ;}
.mk2AreaStartColorBG.pink {background-color:#FDE8FA ; border-color:#F799E9 ;}
.mk2AreaStartColorBG.yellow {background-color:#FDFDE8 ; border-color:#F0F048 ;}
.mk2AreaStartColorBG.blue {background-color:#E8F0FD ; border-color: #7AA8F3;}
.mk2AreaStartColorBG.green {background-color:#ECFDE8 ; border-color:#8AF174 ;}

.mk2AreaStartColorBG.full { }
.mk2AreaStartColorBG.max800 { max-width: 800px;}
.mk2AreaStartColorBG.max500 { max-width: 500px;}
.mk2AreaStartColorBG.max300 { max-width: 300px;}

.mk2AreaStartColorBG.alignLeft { margin-left: 0; }
.mk2AreaStartColorBG.alignRight { margin-right: 0; }

@media (max-width: 640px) {
.mk2AreaStartColorBG { padding: 10px 10px 0;}
}