/* ================================================================
   ARTICLE UTILITIES CSS — 記事コンテンツ内で使うユーティリティクラス
   blog.css から抽出・整理。記事ページ（is_single）で読み込む。
   ================================================================ */


/* ===================================================================
   1. テキスト配置
   =================================================================== */
.fleft    { float: left; }
.fright   { float: right; }
.posiCenter { text-align: center; }
.posiLeft   { text-align: left; }
.posiRight  { text-align: right; }


/* ===================================================================
   2. 下マージン
   =================================================================== */
.end      { margin-bottom: 0 !important; }
.btmMg0   { margin-bottom: 0 !important; }
.btmMg5   { margin-bottom: 5px !important; }
.btmMg10  { margin-bottom: 10px !important; }
.btmMg12  { margin-bottom: 12px !important; }
.btmMg15  { margin-bottom: 15px !important; }
.btmMg20  { margin-bottom: 20px !important; }
.btmMg25  { margin-bottom: 25px !important; }
.btmMg30  { margin-bottom: 30px !important; }
.btmMg35  { margin-bottom: 35px !important; }
.btmMg40  { margin-bottom: 40px !important; }
.btmMg45  { margin-bottom: 45px !important; }
.btmMg50  { margin-bottom: 50px !important; }
.btmMg55  { margin-bottom: 55px !important; }


/* ===================================================================
   3. 上マージン
   =================================================================== */
.topMg5   { margin-top: 5px !important; }
.topMg10  { margin-top: 10px !important; }
.topm10   { margin-top: 10px !important; }
.topm15   { margin-top: 15px !important; }
.topm20   { margin-top: 20px !important; }
.topm25   { margin-top: 25px; }
.topm30   { margin-top: 30px !important; }
.topm40   { margin-top: 40px !important; }
.topm50   { margin-top: 50px !important; }
.topm60   { margin-top: 60px !important; }
.topm90   { margin-top: 90px !important; }


/* ===================================================================
   4. 左右マージン
   =================================================================== */
.leftm5   { margin-left: 5px !important; }
.leftm10  { margin-left: 10px !important; }
.leftm15  { margin-left: 15px !important; }
.leftm20  { margin-left: 20px !important; }
.leftm30  { margin-left: 30px !important; }
.rightm5  { margin-right: 5px !important; }
.rightm9  { margin-right: 9px !important; }
.rightm10 { margin-right: 10px !important; }
.rightm15 { margin-right: 15px !important; }
.rightm20 { margin-right: 20px !important; }
.rightm30 { margin-right: 30px !important; }


/* ===================================================================
   5. 左右パディング
   =================================================================== */
.leftp5   { padding-left: 5px; }
.leftp10  { padding-left: 10px; }
.leftp15  { padding-left: 15px; }
.leftp20  { padding-left: 20px; }
.leftp30  { padding-left: 30px; }
.leftp42  { padding-left: 42px; }
.rightp0  { padding-right: 0 !important; }
.rightp5  { padding-right: 5px; }
.rightp10 { padding-right: 10px; }
.rightp15 { padding-right: 15px; }
.rightp20 { padding-right: 20px; }
.rightp25 { padding-right: 25px; }
.rightp30 { padding-right: 30px; }
.rightp40 { padding-right: 40px; }
.btmp0    { padding-bottom: 0 !important; }
.btmp5    { padding-bottom: 5px !important; }
.btmp10   { padding-bottom: 10px !important; }
.btmp15   { padding-bottom: 15px !important; }
.btmp20   { padding-bottom: 20px !important; }


/* ===================================================================
   6. フォントサイズ
   =================================================================== */
.sizeXS  { font-size: 75% !important; }
.sizeS   { font-size: 88% !important; }
.sizeM   { font-size: 90% !important; }
.sizeL   { font-size: 110% !important; }
.sizeLL  { font-size: 120% !important; }
.sizeXL  { font-size: 130% !important; }
.sizeXXL { font-size: 140% !important; }

.fsize-160p,
.fsize-180p,
.fsize-200p,
.fsize-220p,
.fsize-240p,
.fsize-260p,
.fsize-280p,
.fsize-300p { line-height: 1.2; }
.fsize-160p { font-size: 160% !important; }
.fsize-180p { font-size: 180% !important; }
.fsize-200p { font-size: 200% !important; }
.fsize-220p { font-size: 220% !important; }
.fsize-240p { font-size: 240% !important; }
.fsize-260p { font-size: 260% !important; }
.fsize-280p { font-size: 280% !important; }
.fsize-300p { font-size: 300% !important; }


/* ===================================================================
   7. テキストカラー
   =================================================================== */
.mainContents .strong,
.mainContents-sp .strong { font-weight: bold; }

.mainContents .color01 { color: #c00; }
.mainContents .color02 { color: #0b39a0; }
.mainContents .color03 { color: #f465c7; }
.mainContents .color04 { color: #0098b0; }
.mainContents .color05 { color: #ff5656; }
.mainContents .color06 { color: #5bb162; }
.mainContents .color07 { color: #de63b7; }
.mainContents .color08 { color: #f09432; }
.mainContents .color09 { color: #3e90e3; }
.mainContents .color10 { color: #9280d4; }
.mainContents .color11 { color: #c8002b; }
.mainContents .color12 { color: #e14f01; }
.mainContents .color13 { color: #3b4d88; }
.mainContents .color14 { color: #f03; }
.mainContents .color15 { color: #2789a6; }

.mainContents .color-docomo { color: #cd102e; }
.mainContents .color-au     { color: #e85603; }
.mainContents .color-sb     { color: #b2b2b2; }
.mainContents .color-ym     { color: #fb0131; }


/* ===================================================================
   8. マーカー（ハイライト）
   =================================================================== */
.mainContents .marker_cream_bold,
.mainContents-sp .marker_cream_bold {
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, #ffffb8 0%);
}

.mainContents .marker_cream_thin,
.mainContents-sp .marker_cream_thin {
  background: linear-gradient(rgba(0, 0, 0, 0) 60%, #ffffb8 60%);
}

.mainContents .marker_yellow_bold,
.mainContents-sp .marker_yellow_bold {
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, #ffff66 0%);
}

.mainContents .marker_yellow_thin,
.mainContents-sp .marker_yellow_thin {
  background: linear-gradient(rgba(0, 0, 0, 0) 60%, #ffff66 60%);
}


/* ===================================================================
   9. 補足ボックス（bg-color_*）
   白地・4辺ボーダー。用途別に色で意味を分ける。
   =================================================================== */
.bg-color_gray,
.bg-color_yellow,
.bg-color_red {
  background: #fff;
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

/* グレー：補足説明・豆知識 */
.bg-color_gray {
  border: 2px solid #bbb;
}

/* イエロー：注意・時事注記 */
.bg-color_yellow {
  border: 2px solid #f5a623;
}

/* レッド：危険・NG警告 */
.bg-color_red {
  border: 2px solid #e53935;
}