/**
 * SWELL Compatibility CSS（追加分）
 *
 * swell.css に無かったブロックを足すファイル。
 * rewritetools.xyz の既存記事で実際に使われているクラスだけを対象にしている。
 *  - swell-block-capbox / cap_box（キャプションボックス）
 *  - is-style-big_icon_point / _memo / _caution（アイコン付きボックス）
 *  - is-style-stripes（縞模様テーブル）
 *  - is-style-num_circle（丸数字リスト）
 *  - SWELL カラーパレットの実値合わせ
 */

/* =====================================================
   SWELLカラーパレットの実値（管理画面の色設定に合わせる）
   swell.css の推測値をこちらで上書きする
   ===================================================== */
:root{
  --color_main:#04384c;
  --color_deep01:#e44141;
  --color_deep02:#3d79d5;
  --color_deep03:#63a84d;
  --color_deep04:#f09f4d;
  --color_pale01:#fff2f0;
  --color_pale02:#f3f8fd;
  --color_pale03:#f1f9ee;
  --color_pale04:#fdf9ee;
  --color_icon_point:#ffa639;
  --color_icon_memo:#84878a;
  --color_icon_caution:#f7da38;
  --color_list_num:#04384c;
}

.has-swl-deep-01-color{ color:var(--color_deep01) !important; }
.has-swl-deep-02-color{ color:var(--color_deep02) !important; }
.has-swl-deep-03-color{ color:var(--color_deep03) !important; }
.has-swl-deep-04-color{ color:var(--color_deep04) !important; }

.has-swl-pale-01-background-color{ background-color:var(--color_pale01) !important; }
.has-swl-pale-02-background-color{ background-color:var(--color_pale02) !important; }
.has-swl-pale-03-background-color{ background-color:var(--color_pale03) !important; }
.has-swl-pale-04-background-color{ background-color:var(--color_pale04) !important; }

.has-swl-deep-01-background-color{ background-color:var(--color_deep01) !important; }
.has-swl-deep-02-background-color{ background-color:var(--color_deep02) !important; }
.has-swl-deep-03-background-color{ background-color:var(--color_deep03) !important; }
.has-swl-deep-04-background-color{ background-color:var(--color_deep04) !important; }

/* =====================================================
   キャプションボックス（swell-block-capbox / cap_box）
   タイトル帯 + 本文の囲みボックス
   ===================================================== */
.entry-content .cap_box{
  margin:2em 0;
  border:1px solid var(--color_main);
  border-radius:6px;
  background:#fff;
  font-size:inherit;
}
.entry-content .cap_box_ttl{
  margin:0;
  padding:10px 16px;
  background:var(--color_main);
  color:#fff;
  font-weight:700;
  font-size:.95em;
  line-height:1.5;
  border-radius:5px 5px 0 0;
}
.entry-content .cap_box_ttl span{ display:inline-block; }
.entry-content .cap_box_content{
  padding:16px 18px;
}
.entry-content .cap_box_content > *:first-child{ margin-top:0; }
.entry-content .cap_box_content > *:last-child{ margin-bottom:0; }
.entry-content .cap_box_content p{ margin:0 0 1em; }

/* 色違い（data-colがある場合） */
.entry-content .cap_box[data-col="red"]{ border-color:var(--color_deep01); }
.entry-content .cap_box[data-col="red"] .cap_box_ttl{ background:var(--color_deep01); }
.entry-content .cap_box[data-col="blue"]{ border-color:var(--color_deep02); }
.entry-content .cap_box[data-col="blue"] .cap_box_ttl{ background:var(--color_deep02); }
.entry-content .cap_box[data-col="green"]{ border-color:var(--color_deep03); }
.entry-content .cap_box[data-col="green"] .cap_box_ttl{ background:var(--color_deep03); }
.entry-content .cap_box[data-col="yellow"]{ border-color:var(--color_deep04); }
.entry-content .cap_box[data-col="yellow"] .cap_box_ttl{ background:var(--color_deep04); }

/* タイトルにアイコンが付くタイプ（big_icon_〇〇） */
.entry-content .cap_box.is-style-big_icon_point,
.entry-content .cap_box.is-style-big_icon_memo,
.entry-content .cap_box.is-style-big_icon_caution,
.entry-content .cap_box.is-style-big_icon_good,
.entry-content .cap_box.is-style-big_icon_bad{
  position:relative;
  margin-top:2.6em;
  border:2px solid var(--ns-cap-col,#ffa639);
  border-radius:6px;
  background:#fff;
}
.entry-content .cap_box.is-style-big_icon_point{ --ns-cap-col:var(--color_icon_point); }
.entry-content .cap_box.is-style-big_icon_memo{ --ns-cap-col:var(--color_icon_memo); }
.entry-content .cap_box.is-style-big_icon_caution{ --ns-cap-col:var(--color_icon_caution); }
.entry-content .cap_box.is-style-big_icon_good{ --ns-cap-col:var(--color_icon_good,#3cd250); }
.entry-content .cap_box.is-style-big_icon_bad{ --ns-cap-col:var(--color_icon_bad,#4b73eb); }

.entry-content .cap_box.is-style-big_icon_point .cap_box_ttl,
.entry-content .cap_box.is-style-big_icon_memo .cap_box_ttl,
.entry-content .cap_box.is-style-big_icon_caution .cap_box_ttl,
.entry-content .cap_box.is-style-big_icon_good .cap_box_ttl,
.entry-content .cap_box.is-style-big_icon_bad .cap_box_ttl{
  position:absolute;
  top:-.9em;
  left:14px;
  padding:2px 12px;
  border-radius:99px;
  background:var(--ns-cap-col);
  color:#fff;
  font-size:.85em;
}
.entry-content .cap_box.is-style-big_icon_point .cap_box_content,
.entry-content .cap_box.is-style-big_icon_memo .cap_box_content,
.entry-content .cap_box.is-style-big_icon_caution .cap_box_content,
.entry-content .cap_box.is-style-big_icon_good .cap_box_content,
.entry-content .cap_box.is-style-big_icon_bad .cap_box_content{
  padding:20px 18px 16px;
}

/* グループブロックに is-style-big_icon_〇〇 が付くパターン */
.entry-content .wp-block-group.is-style-big_icon_point,
.entry-content .wp-block-group.is-style-big_icon_memo,
.entry-content .wp-block-group.is-style-big_icon_caution,
.entry-content .wp-block-group.is-style-big_icon_good,
.entry-content .wp-block-group.is-style-big_icon_bad{
  position:relative;
  margin:2.6em 0 2em;
  padding:22px 18px 6px;
  border:2px solid var(--ns-cap-col,#ffa639);
  border-radius:6px;
  background:#fff;
}
.entry-content .wp-block-group.is-style-big_icon_point{ --ns-cap-col:var(--color_icon_point); }
.entry-content .wp-block-group.is-style-big_icon_memo{ --ns-cap-col:var(--color_icon_memo); }
.entry-content .wp-block-group.is-style-big_icon_caution{ --ns-cap-col:var(--color_icon_caution); }
.entry-content .wp-block-group.is-style-big_icon_good{ --ns-cap-col:var(--color_icon_good,#3cd250); }
.entry-content .wp-block-group.is-style-big_icon_bad{ --ns-cap-col:var(--color_icon_bad,#4b73eb); }

.entry-content .wp-block-group.is-style-big_icon_point::before,
.entry-content .wp-block-group.is-style-big_icon_memo::before,
.entry-content .wp-block-group.is-style-big_icon_caution::before,
.entry-content .wp-block-group.is-style-big_icon_good::before,
.entry-content .wp-block-group.is-style-big_icon_bad::before{
  position:absolute;
  top:-.9em;
  left:14px;
  padding:2px 12px;
  border-radius:99px;
  background:var(--ns-cap-col);
  color:#fff;
  font-size:.8em;
  font-weight:700;
  line-height:1.6;
}
.entry-content .wp-block-group.is-style-big_icon_point::before{ content:"POINT"; }
.entry-content .wp-block-group.is-style-big_icon_memo::before{ content:"MEMO"; }
.entry-content .wp-block-group.is-style-big_icon_caution::before{ content:"注意"; }
.entry-content .wp-block-group.is-style-big_icon_good::before{ content:"GOOD"; }
.entry-content .wp-block-group.is-style-big_icon_bad::before{ content:"BAD"; }

.entry-content .wp-block-group.is-style-big_icon_point > .wp-block-group__inner-container > *:last-child,
.entry-content .wp-block-group.is-style-big_icon_memo > .wp-block-group__inner-container > *:last-child,
.entry-content .wp-block-group.is-style-big_icon_caution > .wp-block-group__inner-container > *:last-child,
.entry-content .wp-block-group.is-style-big_icon_good > .wp-block-group__inner-container > *:last-child,
.entry-content .wp-block-group.is-style-big_icon_bad > .wp-block-group__inner-container > *:last-child{
  margin-bottom:0;
}

/* =====================================================
   縞模様テーブル（is-style-stripes）
   ===================================================== */
.entry-content .wp-block-table.is-style-stripes{
  border-bottom:0;
}
.entry-content .wp-block-table.is-style-stripes table{
  width:100%;
  border-collapse:collapse;
  font-size:.95em;
}
.entry-content .wp-block-table.is-style-stripes th,
.entry-content .wp-block-table.is-style-stripes td{
  padding:10px 12px;
  border:0;
  border-bottom:1px solid #e6e6e6;
  line-height:1.7;
  text-align:left;
  vertical-align:top;
}
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td,
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) th{
  background:#f6f7f8;
}
.entry-content .wp-block-table.is-style-stripes tbody tr:first-child td{
  background:var(--color_main);
  color:#fff;
  font-weight:700;
}
.entry-content .wp-block-table.is-style-stripes tbody tr:first-child td a{ color:#fff; }

@media(max-width:600px){
  .entry-content .wp-block-table.is-style-stripes{ overflow-x:auto; }
  .entry-content .wp-block-table.is-style-stripes table{ font-size:.86em; min-width:420px; }
  .entry-content .wp-block-table.is-style-stripes th,
  .entry-content .wp-block-table.is-style-stripes td{ padding:8px 9px; }
}

/* =====================================================
   丸数字リスト（is-style-num_circle）
   ===================================================== */
.entry-content ul.is-style-num_circle,
.entry-content ol.is-style-num_circle{
  counter-reset:ns-num;
  list-style:none;
  margin:1.8em 0;
  padding:0;
}
.entry-content ul.is-style-num_circle li,
.entry-content ol.is-style-num_circle li{
  counter-increment:ns-num;
  position:relative;
  margin:0 0 .9em;
  padding:0 0 0 2.2em;
  line-height:1.85;
  list-style:none;
}
.entry-content ul.is-style-num_circle li::before,
.entry-content ol.is-style-num_circle li::before{
  content:counter(ns-num);
  position:absolute;
  top:.2em;
  left:0;
  width:1.55em;
  height:1.55em;
  border-radius:50%;
  background:var(--color_list_num);
  color:#fff;
  font-size:.82em;
  font-weight:700;
  line-height:1.55em;
  text-align:center;
}