@charset "utf-8";

/* ==========================================================================

   ショートコード（refinepro-shortcodes.css）

   注: 動的カラーは var(--re-sc-color, #369) を使用
   必要ならテーマやプラグインで :root { --re-sc-color: #xxxxxx; } を追加

   画像パスは本CSSが assets/css/ にある前提で ../img/… を参照

   ========================================================================== */

/* ==========================================================================
   タイトル付き囲み
   ========================================================================== */

.titled_box {
  margin: 0 0 20px;
  padding: 15px 20px;
  border: 1px solid #ccc;
  background: #fff;
  color: #333;
  text-align: left;
  font-size: 14px;
  font-size: 1.08rem;
  line-height: 1.75;
}

.sub .titled_box {
  padding: 10px;
  font-size: 12px;
  font-size: 0.93rem;
}

.titled_box > *:last-child {
  margin-bottom: 0 !important;
}

/* 見出し */

.box-title {
  margin: -15px -20px 15px;
  padding: 10px 15px;
  border-bottom: 1px solid #ccc;
  text-align: left;
  font-size: 14px;
  font-size: 1.08rem;
  line-height: 1.3;
}

.sub .box-title {
  margin: -7px -10px 7px;
  padding: 7px 10px;
  font-size: 12px;
  font-size: 0.93rem;
}

/* 見出し・白 */

.box-title-white {
  background: #fff url("../img/shortcodes/bg-bh-w-trans.png") repeat-x center bottom;
  color: #333;
  text-shadow: 0 1px 0 #fff;
}

/* 見出し・黒 */

.box-title-black {
  background: #666 url("../img/shortcodes/bg-bh-b-trans.png") repeat-x center bottom;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .75);
}

/* 見出し・色 */

.box-title-option {
  background: var(--re-sc-color, #369) url("../img/shortcodes/bg-bh-c-trans.png") repeat-x center bottom;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .75);
}

/* ==========================================================================
   カラー囲み
   ========================================================================== */

.colored_box {
  margin: 0 auto 20px;
  padding: 15px 20px;
  text-align: left;
  font-size: 14px;
  font-size: 1.08rem;
}

.sub .colored_box {
  margin: 0 auto 10px;
  padding: 10px;
  font-size: 12px;
  font-size: 0.93rem;
}

.colored_box > *:first-child { margin-top: 0 !important; }
.colored_box > *:last-child { margin-bottom: 0 !important; }

/* 丸 */

.box-r {
  border-radius: 5px;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
}

/* 普通の色 */

.box-green  { border: 1px solid #096; }
.box-blue   { border: 1px solid #369; }
.box-gray   { border: 1px solid #666; }
.box-purple { border: 1px solid #936; }
.box-red    { border: 1px solid #c33; }
.box-yellow { border: 1px solid #f90; }

/* 薄い色 */

.box-green-lt  { border: 3px solid #ABDDCD; }
.box-blue-lt   { border: 3px solid #BCCDDD; }
.box-gray-lt   { border: 3px solid #CDCDCD; }
.box-purple-lt { border: 3px solid #DDBCCD; }
.box-red-lt    { border: 3px solid #EEBCBC; }
.box-yellow-lt { border: 3px solid #FFDDAB; }

/* オプション色 */

.box-option { border: 1px solid var(--re-sc-color, #369); }

/* ==========================================================================
   カラー囲み（２カラム）
   ========================================================================== */

.colored_box_2 {
  display: table;
  margin: 0 auto 20px;
  text-align: left;
  font-size: 14px;
  font-size: 1.08rem;
}

.sub .colored_box_2 {
  margin: 0 auto 10px;
  font-size: 12px;
  font-size: 0.93rem;
}

.colored_box_2 > *:first-child { margin-top: 0 !important; }
.colored_box_2 > *:last-child  { margin-bottom: 0 !important; }

.cb2l,
.cb2r {
  display: table-cell;
  padding: 15px 20px;
  width: 49%;
  text-align: left;
}

.sub .cb2l,
.sub .cb2r { padding: 7px 10px; }

.cb2c { display: table-cell; }
.cb2c span { display: block; width: 15px !important; }

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

.colored_bg {
  position: relative;
  margin: 0 auto 20px;
  padding: 15px 20px;
  text-align: left;
  font-size: 14px;
  font-size: 1.08rem;
}

.sub .colored_bg {
  position: relative;
  margin: 0 auto 10px;
  padding: 10px;
  text-align: left;
  font-size: 12px;
  font-size: 0.93rem;
}

.colored_bg *:first-child { margin-top: 0 !important; }
.colored_bg *:last-child  { margin-bottom: 0 !important; }

/* 丸 */

.bg-r {
  border-radius: 5px;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
}

/* 普通の色 */

.bg-green  { color: #fff; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); background: #096 url("../img/texture1-trans.png") repeat-x center bottom; }
.bg-blue   { color: #fff; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); background: #369 url("../img/texture1-trans.png") repeat-x center bottom; }
.bg-gray   { color: #fff; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); background: #666 url("../img/texture1-trans.png") repeat-x center bottom; }
.bg-purple { color: #fff; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); background: #936 url("../img/texture1-trans.png") repeat-x center bottom; }
.bg-red    { color: #fff; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); background: #c33 url("../img/texture1-trans.png") repeat-x center bottom; }
.bg-yellow { color: #fff; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); background: #f90 url("../img/texture1-trans.png") repeat-x center bottom; }

/* 薄い色 */

.bg-green-lt  { color: #222; text-shadow: 0 1px 0 rgba(255,255,255,1); background: #e5f5ef; border: 3px solid #abddcd; }
.bg-blue-lt   { color: #222; text-shadow: 0 1px 0 rgba(255,255,255,1); background: #eaeff5; border: 3px solid #bccddd; }
.bg-gray-lt   { color: #222; text-shadow: 0 1px 0 rgba(255,255,255,1); background: #efefef; border: 3px solid #cdcdcd; }
.bg-purple-lt { color: #222; text-shadow: 0 1px 0 rgba(255,255,255,1); background: #f5eaef; border: 3px solid #ddbccd; }
.bg-red-lt    { color: #222; text-shadow: 0 1px 0 rgba(255,255,255,1); background: #faeaea; border: 3px solid #eebcbc; }
.bg-yellow-lt { color: #222; text-shadow: 0 1px 0 rgba(255,255,255,1); background: #fff5e5; border: 3px solid #ffddab; }

/* オプション色 */

.bg-option { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); background: var(--re-sc-color, #369) url("../img/texture1-trans.png") repeat-x center bottom; }

/* ==========================================================================
   ボタン
   ========================================================================== */

/* 大（横幅いっぱい） */

.btn_l {
  display: block;
  margin: 0 20px 20px;
  padding: 18px 20px 16px;
  color: #fff !important;
  text-align: center;
  text-decoration: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.66);
  letter-spacing: 1px;
  font-size: 18px;
  font-size: 1.39rem;
  line-height: 1;
}

.btn_l:before {
  content: url("../img/shortcodes/btn-img.png");
  vertical-align: -4px;
  margin-right: 5px;
}

.btn_l:active {
  position: relative;
  top: 1px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5) inset;
}

/* 小（文字数の幅に合わせる） */

.btn_s {
  display: inline-block;
  margin: 0 0 20px;
  padding: 0.9em 1.8em;
  color: #fff !important;
  text-align: center;
  text-decoration: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.66);
  font-size: 15px;
  font-size: 1.16rem;
  line-height: 1;
}

.btn_s:active {
  position: relative;
  top: 1px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5) inset;
}

/* 角・丸 */

.btn-r {
  border-radius: 5px;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
}

/* 色・赤 */
.btn-red   { border: 1px solid #c00; background: #c00 url("../img/shortcodes/bg-btn.png") repeat-x left center; box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 0 #c00, 0 2px 3px rgba(0,0,0,0.33); }
/* 色・青 */
.btn-blue  { border: 1px solid #369; background: #369 url("../img/shortcodes/bg-btn.png") repeat-x left center; box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 0 #369, 0 2px 3px rgba(0,0,0,0.33); }
/* 色・緑 */
.btn-green { border: 1px solid #7EA835; background: #7EA835 url("../img/shortcodes/bg-btn.png") repeat-x left center; box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 0 #7EA835, 0 2px 3px rgba(0,0,0,0.33); }
/* 色・オレンジ */
.btn-orange{ border: 1px solid #CF7616; background: #CF7616 url("../img/shortcodes/bg-btn.png") repeat-x left center; box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 0 #CF7616, 0 2px 3px rgba(0,0,0,0.33); }
/* 色・黒 */
.btn-black { border: 1px solid #000; background: #000 url("../img/shortcodes/bg-btn.png") repeat-x left center; box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 0 #000, 0 2px 3px rgba(0,0,0,0.33); }
/* 色・オプションカラー */
.btn-option{ border: 1px solid var(--re-sc-color, #369); background: var(--re-sc-color, #369) url("../img/shortcodes/bg-btn.png") repeat-x left center; box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 0 var(--re-sc-color, #369), 0 2px 3px rgba(0,0,0,0.33); }

.btn-red:hover, .btn-blue:hover, .btn-green:hover, .btn-orange:hover, .btn-black:hover, .btn-option:hover {
  background-image: url("../img/shortcodes/bg-btn-hover.png");
}

/* ==========================================================================
   アイコン表示
   ========================================================================== */

.sc-icon {
  vertical-align: middle;
  margin: 0 .5em;
  line-height: 1.75;
}

/* ==========================================================================
   よくある質問
   ========================================================================== */

.faq_q {
  padding: 1em 1em 1em 45px;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  border-radius: 5px 5px 0 0;
  color: #222;
  text-align: left;
  font-weight: bold;
  font-size: 14px;
  font-size: 1.08rem;
}

.faq-g  { background: #e6e6e6 url("../img/shortcodes/qa-q-g.png")  no-repeat 1em 1em; }
.faq-b  { background: #e6e6e6 url("../img/shortcodes/qa-q-b.png")  no-repeat 1em 1em; }
.faq-gr { background: #e6e6e6 url("../img/shortcodes/qa-q-gr.png") no-repeat 1em 1em; }
.faq-r  { background: #e6e6e6 url("../img/shortcodes/qa-q-r.png")  no-repeat 1em 1em; }
.faq-o  { background: #e6e6e6 url("../img/shortcodes/qa-q-o.png")  no-repeat 1em 1em; }
.faq-p  { background: #e6e6e6 url("../img/shortcodes/qa-q-p.png")  no-repeat 1em 1em; }

.faq_a  {
  margin: 0 auto 2em;
  padding: 1em 1em 1em 45px;
  border-width: 0 1px 1px;
  border-style: solid;
  border-color: #ccc;
  border-radius: 0 0 5px 5px;
  background: #f3f3f3 url("../img/shortcodes/qa-a.png") no-repeat 1em 1em;
  color: #333;
  text-align: left;
  font-size: 14px;
  font-size: 1.08rem;
}

/* ==========================================================================
   チェックリスト
   ========================================================================== */

.check-list ul {
  list-style-type: none !important;
  margin: 0 0 21px 1em !important;
}

.check-list ul li {
  margin: 0 0 0.5em !important;
  padding: 0 0 0 25px !important;
}

.cl-check1-b  li { background: url("../img/shortcodes/icon-check1-b.png")  no-repeat 0 3px; }
.cl-check1-g  li { background: url("../img/shortcodes/icon-check1-g.png")  no-repeat 0 3px; }
.cl-check1-gr li { background: url("../img/shortcodes/icon-check1-gr.png") no-repeat 0 3px; }
.cl-check1-o  li { background: url("../img/shortcodes/icon-check1-o.png")  no-repeat 0 3px; }
.cl-check1-p  li { background: url("../img/shortcodes/icon-check1-p.png")  no-repeat 0 3px; }
.cl-check1-r  li { background: url("../img/shortcodes/icon-check1-r.png")  no-repeat 0 3px; }
.cl-check2-b  li { background: url("../img/shortcodes/icon-check2-b.png")  no-repeat 0 3px; }
.cl-check2-g  li { background: url("../img/shortcodes/icon-check2-g.png")  no-repeat 0 3px; }
.cl-check2-gr li { background: url("../img/shortcodes/icon-check2-gr.png") no-repeat 0 3px; }
.cl-check2-o  li { background: url("../img/shortcodes/icon-check2-o.png")  no-repeat 0 3px; }
.cl-check2-p  li { background: url("../img/shortcodes/icon-check2-p.png")  no-repeat 0 3px; }
.cl-check2-r  li { background: url("../img/shortcodes/icon-check2-r.png")  no-repeat 0 3px; }
.cl-check3-b  li { background: url("../img/shortcodes/icon-check3-b.png")  no-repeat 0 3px; }
.cl-check3-g  li { background: url("../img/shortcodes/icon-check3-g.png")  no-repeat 0 3px; }
.cl-check3-gr li { background: url("../img/shortcodes/icon-check3-gr.png") no-repeat 0 3px; }
.cl-check3-o  li { background: url("../img/shortcodes/icon-check3-o.png")  no-repeat 0 3px; }
.cl-check3-p  li { background: url("../img/shortcodes/icon-check3-p.png")  no-repeat 0 3px; }
.cl-check3-r  li { background: url("../img/shortcodes/icon-check3-r.png")  no-repeat 0 3px; }

/* ==========================================================================
   カラム
   ========================================================================== */

/* ２カラム */

.col2-c1, .col2-c2 {
  float: left;
  display: inline;
  position: relative;
  width: 50%;
  text-align: left;
}

/* ３カラム */

.col3-c1, .col3-c2, .col3-c3 {
  float: left;
  display: inline;
  position: relative;
  width: 33.333333333%;
  text-align: left;
}

.col3-c1 .inner { margin-right: 10px; }
.col3-c2 .inner { margin-left: 5px; margin-right: 5px; }
.col3-c3 .inner { margin-left: 10px; }

/* ４カラム */

.col4-c1, .col4-c2, .col4-c3, .col4-c4 {
  float: left;
  display: inline;
  position: relative;
  width: 25%;
  text-align: left;
}

.col4-c1 .inner { margin-right: 10px; }
.col4-c2 .inner { margin-left: 5px; margin-right: 5px; }
.col4-c3 .inner { margin-left: 5px; margin-right: 5px; }
.col4-c4 .inner { margin-left: 10px; }

/* ==========================================================================
   右寄せリンク
   ========================================================================== */

.right-link {
  text-align: right !important;
  font-size: 14px;
  font-size: 1.08rem;
}

.right-link a {
  padding: 1px 0 5px 21px;
}

.rl-arrow1-b  a { background: url("../img/shortcodes/icon-arrow1-b-s.png")  no-repeat; }
.rl-arrow1-g  a { background: url("../img/shortcodes/icon-arrow1-g-s.png")  no-repeat; }
.rl-arrow1-gr a { background: url("../img/shortcodes/icon-arrow1-gr-s.png") no-repeat; }
.rl-arrow1-o  a { background: url("../img/shortcodes/icon-arrow1-o-s.png")  no-repeat; }
.rl-arrow1-p  a { background: url("../img/shortcodes/icon-arrow1-p-s.png")  no-repeat; }
.rl-arrow1-r  a { background: url("../img/shortcodes/icon-arrow1-r-s.png")  no-repeat; }
.rl-arrow2-b  a { background: url("../img/shortcodes/icon-arrow2-b-s.png")  no-repeat; }
.rl-arrow2-g  a { background: url("../img/shortcodes/icon-arrow2-g-s.png")  no-repeat; }
.rl-arrow2-gr a { background: url("../img/shortcodes/icon-arrow2-gr-s.png") no-repeat; }
.rl-arrow2-o  a { background: url("../img/shortcodes/icon-arrow2-o-s.png")  no-repeat; }
.rl-arrow2-p  a { background: url("../img/shortcodes/icon-arrow2-p-s.png")  no-repeat; }
.rl-arrow2-r  a { background: url("../img/shortcodes/icon-arrow2-r-s.png")  no-repeat; }
.rl-arrow3-b  a { background: url("../img/shortcodes/icon-arrow3-b-s.png")  no-repeat; }
.rl-arrow3-g  a { background: url("../img/shortcodes/icon-arrow3-g-s.png")  no-repeat; }
.rl-arrow3-gr a { background: url("../img/shortcodes/icon-arrow3-gr-s.png") no-repeat; }
.rl-arrow3-o  a { background: url("../img/shortcodes/icon-arrow3-o-s.png")  no-repeat; }
.rl-arrow3-p  a { background: url("../img/shortcodes/icon-arrow3-p-s.png")  no-repeat; }
.rl-arrow3-r  a { background: url("../img/shortcodes/icon-arrow3-r-s.png")  no-repeat; }

/* ==========================================================================
   区切り線
   ========================================================================== */

.horizontal-line { margin: 5px auto; }

.solid  { border-top-style: solid; }
.dotted { border-top-style: dotted; }
.dashed { border-top-style: dashed; }
.double { border-top-style: double; }

.w1 { border-top-width: 1px; }
.w2 { border-top-width: 2px; }
.w3 { border-top-width: 3px; }
.w4 { border-top-width: 4px; }
.w5 { border-top-width: 5px; }

.hl-green  { border-top-color: #096; }
.hl-blue   { border-top-color: #369; }
.hl-gray   { border-top-color: #666; }
.hl-purple { border-top-color: #936; }
.hl-red    { border-top-color: #c33; }
.hl-yellow { border-top-color: #f90; }
.hl-option { border-top-color: var(--re-sc-color, #369); }

.hl-green-lt  { border-top-color: #abddcd; }
.hl-blue-lt   { border-top-color: #bccddd; }
.hl-gray-lt   { border-top-color: #cdcdcd; }
.hl-purple-lt { border-top-color: #ddbccd; }
.hl-red-lt    { border-top-color: #eebcbc; }
.hl-yellow-lt { border-top-color: #ffddab; }

/* ==========================================================================
   飾り背景
   ========================================================================== */

[class^="bg-deco-"] {
  font-size: 14px;
  font-size: 1.08rem;
  line-height: 1.75;
}

.sub [class^="bg-deco-"] {
  font-size: 12px;
  font-size: 0.93rem;
  line-height: 1.5;
}

[class^="bg-deco-"] > *:first-child { margin-top: 0 !important; }
[class^="bg-deco-"] > *:last-child  { margin-bottom: 0 !important; }

/* メタル1 */

.bg-deco-metal1 {
  text-align: left;
  color: #222 !important;
  margin: 0 auto 20px;
  padding: 30px 35px 30px;
  border-style: solid;
  border-width: 2px;
  border-color: #fff #999 #666;
  border-radius: 10px;
  background:
    url("../img/shortcodes/bg-metal1-2.png") no-repeat left   top,
    url("../img/shortcodes/bg-metal1-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-metal1-2.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-metal1-2.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-metal1-1.png") repeat    center center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-metal1-2.png") no-repeat left   top,
    url("../img/shortcodes/bg-metal1-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-metal1-2.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-metal1-2.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-metal1-1.png") repeat    center center;
}

.bg-deco-metal1 h1,
.bg-deco-metal1 h2,
.bg-deco-metal1 h3,
.bg-deco-metal1 h4,
.bg-deco-metal1 h5,
.bg-deco-metal1 h6,
.bg-deco-metal1 p {
  color: #222 !important;
  text-shadow: none !important;
}

/* メタル2 */

.bg-deco-metal2 {
  text-align: left;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1) !important;
  margin: 0 auto 20px;
  padding: 30px 35px 30px;
  border-style: solid;
  border-width: 2px;
  border-color: #666 #333 #000;
  border-radius: 10px;
  background:
    url("../img/shortcodes/bg-metal2-2.png") no-repeat left   top,
    url("../img/shortcodes/bg-metal2-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-metal2-2.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-metal2-2.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-metal2-1.png") repeat    center center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-metal2-2.png") no-repeat left   top,
    url("../img/shortcodes/bg-metal2-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-metal2-2.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-metal2-2.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-metal2-1.png") repeat    center center;
}

.bg-deco-metal2 h1,
.bg-deco-metal2 h2,
.bg-deco-metal2 h3,
.bg-deco-metal2 h4,
.bg-deco-metal2 h5,
.bg-deco-metal2 h6,
.bg-deco-metal2 p {
  color: #fff !important;
}

/* メタル3 */

.bg-deco-metal3 {
  text-align: left;
  color: #222 !important;
  margin: 0 auto 20px;
  padding: 30px 35px 30px;
  border-style: solid;
  border-width: 1px;
  border-color: #fff #999 #666;
  border-radius: 1px;
  background:
    url("../img/shortcodes/bg-metal3-2.png") no-repeat left   top,
    url("../img/shortcodes/bg-metal3-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-metal3-2.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-metal3-2.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-metal3-1.png") repeat    center center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-metal3-2.png") no-repeat left   top,
    url("../img/shortcodes/bg-metal3-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-metal3-2.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-metal3-2.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-metal3-1.png") repeat    center center;
}

.bg-deco-metal3 h1,
.bg-deco-metal3 h2,
.bg-deco-metal3 h3,
.bg-deco-metal3 h4,
.bg-deco-metal3 h5,
.bg-deco-metal3 h6,
.bg-deco-metal3 p {
  color: #222 !important;
  text-shadow: none !important;
}

/* メタル4 */

.bg-deco-metal4 {
  text-align: left;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1) !important;
  margin: 0 auto 20px;
  padding: 30px 35px 30px;
  border-style: solid;
  border-width: 1px;
  border-color: #666 #333 #000;
  border-radius: 1px;
  background:
    url("../img/shortcodes/bg-metal4-2.png") no-repeat left   top,
    url("../img/shortcodes/bg-metal4-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-metal4-2.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-metal4-2.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-metal4-1.png") repeat    center center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-metal4-2.png") no-repeat left   top,
    url("../img/shortcodes/bg-metal4-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-metal4-2.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-metal4-2.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-metal4-1.png") repeat    center center;
}

.bg-deco-metal4 h1,
.bg-deco-metal4 h2,
.bg-deco-metal4 h3,
.bg-deco-metal4 h4,
.bg-deco-metal4 h5,
.bg-deco-metal4 h6,
.bg-deco-metal4 p {
  color: #fff !important;
}

/* 紙1 */

.bg-deco-paper1 {
  text-align: left;
  color: #222 !important;
  margin: 0 auto 20px;
  padding: 30px 35px 35px;
  background:
    url("../img/shortcodes/bg-paper1-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-paper1-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-paper1-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-paper1-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-paper1-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-paper1-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-paper1-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-paper1-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-paper1-9.png") repeat    center center;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-paper1-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-paper1-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-paper1-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-paper1-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-paper1-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-paper1-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-paper1-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-paper1-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-paper1-9.png") repeat    center center;
}

.bg-deco-paper1 h1,
.bg-deco-paper1 h2,
.bg-deco-paper1 h3,
.bg-deco-paper1 h4,
.bg-deco-paper1 h5,
.bg-deco-paper1 h6,
.bg-deco-paper1 p {
  color: #222 !important;
  text-shadow: none !important;
}

/* 紙2 */

.bg-deco-paper2 {
  text-align: left;
  color: #222 !重要;
  margin: 0 auto 20px;
  padding: 53px 35px 35px;
  background:
    url("../img/shortcodes/bg-paper2-0.png") no-repeat center top,
    url("../img/shortcodes/bg-paper2-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-paper2-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-paper2-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-paper2-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-paper2-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-paper2-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-paper2-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-paper2-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-paper2-9.png") repeat    center center;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-paper2-0.png") no-repeat center top,
    url("../img/shortcodes/bg-paper2-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-paper2-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-paper2-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-paper2-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-paper2-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-paper2-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-paper2-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-paper2-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-paper2-9.png") repeat    center center;
}

.bg-deco-paper2 h1,
.bg-deco-paper2 h2,
.bg-deco-paper2 h3,
.bg-deco-paper2 h4,
.bg-deco-paper2 h5,
.bg-deco-paper2 h6,
.bg-deco-paper2 p { color: #222 !important; text-shadow: none !important; }

/* 紙3 */

.bg-deco-paper3 {
  text-align: left;
  color: #222 !important;
  margin: 0 auto 20px;
  padding: 53px 35px 35px;
  background:
    url("../img/shortcodes/bg-paper3-0.png") no-repeat center top,
    url("../img/shortcodes/bg-paper2-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-paper2-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-paper2-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-paper2-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-paper2-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-paper2-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-paper2-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-paper2-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-paper2-9.png") repeat    center center;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-paper3-0.png") no-repeat center top,
    url("../img/shortcodes/bg-paper2-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-paper2-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-paper2-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-paper2-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-paper2-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-paper2-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-paper2-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-paper2-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-paper2-9.png") repeat    center center;
}

.bg-deco-paper3 h1,
.bg-deco-paper3 h2,
.bg-deco-paper3 h3,
.bg-deco-paper3 h4,
.bg-deco-paper3 h5,
.bg-deco-paper3 h6,
.bg-deco-paper3 p { color: #222 !important; text-shadow: none !important; }

/* 紙4 */

.bg-deco-paper4 {
  text-align: left;
  color: #222 !important;
  margin: 0 auto 20px;
  padding: 53px 35px 35px;
  background:
    url("../img/shortcodes/bg-paper4-0.png") no-repeat center top,
    url("../img/shortcodes/bg-paper2-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-paper2-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-paper2-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-paper2-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-paper2-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-paper2-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-paper2-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-paper2-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-paper2-9.png") repeat    center center;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-paper4-0.png") no-repeat center top,
    url("../img/shortcodes/bg-paper2-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-paper2-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-paper2-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-paper2-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-paper2-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-paper2-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-paper2-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-paper2-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-paper2-9.png") repeat    center center;
}

.bg-deco-paper4 h1,
.bg-deco-paper4 h2,
.bg-deco-paper4 h3,
.bg-deco-paper4 h4,
.bg-deco-paper4 h5,
.bg-deco-paper4 h6,
.bg-deco-paper4 p { color: #222 !important; text-shadow: none !important; }

/* 紙5 */

.bg-deco-paper5 {
  text-align: left;
  color: #222 !important;
  margin: 0 auto 20px;
  padding: 53px 35px 35px;
  background:
    url("../img/shortcodes/bg-paper5-0.png") no-repeat center top,
    url("../img/shortcodes/bg-paper2-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-paper2-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-paper2-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-paper2-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-paper2-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-paper2-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-paper2-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-paper2-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-paper2-9.png") repeat    center center;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-paper5-0.png") no-repeat center top,
    url("../img/shortcodes/bg-paper2-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-paper2-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-paper2-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-paper2-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-paper2-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-paper2-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-paper2-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-paper2-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-paper2-9.png") repeat    center center;
}

.bg-deco-paper5 h1,
.bg-deco-paper5 h2,
.bg-deco-paper5 h3,
.bg-deco-paper5 h4,
.bg-deco-paper5 h5,
.bg-deco-paper5 h6,
.bg-deco-paper5 p { color: #222 !important; text-shadow: none !重要; }

/* ポストイット1 */

.bg-deco-postit1 {
  text-align: left;
  color: #222 !important;
  margin: 0 auto 20px;
  padding: 30px 35px 35px;
  background:
    url("../img/shortcodes/bg-postit1-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-postit1-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-postit1-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-postit1-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-postit1-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-postit1-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-postit1-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-postit1-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-postit1-9.png") repeat    center center;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-postit1-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-postit1-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-postit1-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-postit1-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-postit1-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-postit1-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-postit1-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-postit1-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-postit1-9.png") repeat    center center;
}

.bg-deco-postit1 h1,
.bg-deco-postit1 h2,
.bg-deco-postit1 h3,
.bg-deco-postit1 h4,
.bg-deco-postit1 h5,
.bg-deco-postit1 h6,
.bg-deco-postit1 p { color: #222 !important; text-shadow: none !重要; }

/* ポストイット2 */

.bg-deco-postit2 {
  text-align: left;
  color: #222 !important;
  margin: 0 auto 20px;
  padding: 30px 35px 35px;
  background:
    url("../img/shortcodes/bg-postit2-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-postit2-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-postit2-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-postit2-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-postit2-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-postit2-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-postit2-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-postit2-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-postit2-9.png") repeat    center center;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-postit2-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-postit2-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-postit2-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-postit2-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-postit2-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-postit2-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-postit2-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-postit2-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-postit2-9.png") repeat    center center;
}

.bg-deco-postit2 h1,
.bg-deco-postit2 h2,
.bg-deco-postit2 h3,
.bg-deco-postit2 h4,
.bg-deco-postit2 h5,
.bg-deco-postit2 h6,
.bg-deco-postit2 p { color: #222 !important; text-shadow: none !important; }

/* ポストイット3 */

.bg-deco-postit3 {
  text-align: left;
  color: #222 !important;
  margin: 0 auto 20px;
  padding: 30px 35px 35px;
  background:
    url("../img/shortcodes/bg-postit3-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-postit3-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-postit3-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-postit3-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-postit3-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-postit3-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-postit3-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-postit3-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-postit3-9.png") repeat    center center;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-postit3-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-postit3-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-postit3-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-postit3-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-postit3-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-postit3-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-postit3-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-postit3-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-postit3-9.png") repeat    center center;
}

.bg-deco-postit3 h1,
.bg-deco-postit3 h2,
.bg-deco-postit3 h3,
.bg-deco-postit3 h4,
.bg-deco-postit3 h5,
.bg-deco-postit3 h6,
.bg-deco-postit3 p { color: #222 !important; text-shadow: none !important; }

/* ポストイット4 */

.bg-deco-postit4 {
  text-align: left;
  color: #222 !important;
  margin: 0 auto 20px;
  padding: 30px 35px 35px;
  background:
    url("../img/shortcodes/bg-postit4-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-postit4-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-postit4-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-postit4-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-postit4-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-postit4-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-postit4-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-postit4-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-postit4-9.png") repeat    center center;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-postit4-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-postit4-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-postit4-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-postit4-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-postit4-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-postit4-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-postit4-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-postit4-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-postit4-9.png") repeat    center center;
}

.bg-deco-postit4 h1,
.bg-deco-postit4 h2,
.bg-deco-postit4 h3,
.bg-deco-postit4 h4,
.bg-deco-postit4 h5,
.bg-deco-postit4 h6,
.bg-deco-postit4 p { color: #222 !important; text-shadow: none !important; }

/* ポストイット5 */

.bg-deco-postit5 {
  text-align: left;
  color: #222 !important;
  margin: 0 auto 20px;
  padding: 30px 35px 35px;
  background:
    url("../img/shortcodes/bg-postit5-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-postit5-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-postit5-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-postit5-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-postit5-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-postit5-6.png") repeat-y  right   center,
    url("../img/shortcodes/bg-postit5-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-postit5-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-postit5-9.png") repeat    center center;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-postit5-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-postit5-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-postit5-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-postit5-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-postit5-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-postit5-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-postit5-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-postit5-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-postit5-9.png") repeat    center center;
}

.bg-deco-postit5 h1,
.bg-deco-postit5 h2,
.bg-deco-postit5 h3,
.bg-deco-postit5 h4,
.bg-deco-postit5 h5,
.bg-deco-postit5 h6,
.bg-deco-postit5 p { color: #222 !important; text-shadow: none !important; }

/* 黒板 */

.bg-deco-chalkboard {
  text-align: left;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  margin: 0 auto 20px;
  padding: 30px 35px 35px;
  background:
    url("../img/shortcodes/bg-chalkboard1.png") no-repeat left   top,
    url("../img/shortcodes/bg-chalkboard2.png") no-repeat right  top,
    url("../img/shortcodes/bg-chalkboard3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-chalkboard4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-chalkboard5.png") repeat-x  center top,
    url("../img/shortcodes/bg-chalkboard6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-chalkboard7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-chalkboard8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-chalkboard9.png") repeat    center center;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-chalkboard1.png") no-repeat left   top,
    url("../img/shortcodes/bg-chalkboard2.png") no-repeat right  top,
    url("../img/shortcodes/bg-chalkboard3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-chalkboard4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-chalkboard5.png") repeat-x  center top,
    url("../img/shortcodes/bg-chalkboard6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-chalkboard7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-chalkboard8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-chalkboard9.png") repeat    center center;
}

.bg-deco-chalkboard h1,
.bg-deco-chalkboard h2,
.bg-deco-chalkboard h3,
.bg-deco-chalkboard h4,
.bg-deco-chalkboard h5,
.bg-deco-chalkboard h6,
.bg-deco-chalkboard p { color: #fff !important; }

/* 木の板1 */

.bg-deco-woodboard1 {
  text-align: left;
  color: #222 !important;
  margin: 0 auto 20px;
  padding: 30px 35px 35px;
  background:
    url("../img/shortcodes/bg-woodboard1-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-woodboard1-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-woodboard1-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-woodboard1-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-woodboard1-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-woodboard1-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-woodboard1-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-woodboard1-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-woodboard1-9.png") repeat    center center;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-woodboard1-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-woodboard1-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-woodboard1-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-woodboard1-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-woodboard1-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-woodboard1-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-woodboard1-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-woodboard1-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-woodboard1-9.png") repeat    center center;
}

.bg-deco-woodboard1 h1,
.bg-deco-woodboard1 h2,
.bg-deco-woodboard1 h3,
.bg-deco-woodboard1 h4,
.bg-deco-woodboard1 h5,
.bg-deco-woodboard1 h6,
.bg-deco-woodboard1 p { color: #222 !important; text-shadow: none !important; }

/* 木の枠1 */

.bg-deco-woodframe1 {
  text-align: left;
  color: #222 !important;
  margin: 0 auto 20px;
  padding: 70px 75px 75px;
  background:
    url("../img/shortcodes/bg-woodframe1-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-woodframe1-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-woodframe1-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-woodframe1-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-woodframe1-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-woodframe1-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-woodframe1-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-woodframe1-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-woodframe1-9.png") repeat    center center;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-woodframe1-1.png") no-repeat left   top,
    url("../img/shortcodes/bg-woodframe1-2.png") no-repeat right  top,
    url("../img/shortcodes/bg-woodframe1-3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-woodframe1-4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-woodframe1-5.png") repeat-x  center top,
    url("../img/shortcodes/bg-woodframe1-6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-woodframe1-7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-woodframe1-8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-woodframe1-9.png") repeat    center center;
}

.bg-deco-woodframe1 h1,
.bg-deco-woodframe1 h2,
.bg-deco-woodframe1 h3,
.bg-deco-woodframe1 h4,
.bg-deco-woodframe1 h5,
.bg-deco-woodframe1 h6,
.bg-deco-woodframe1 p { color: #222 !important; text-shadow: none !important; }

/* マーカー1 ピンク */

.bg-deco-marker-p {
  text-align: left;
  color: #222 !important;
  margin: 0 auto 10px;
  padding: 55px 50px 60px;
  background:
    url("../img/shortcodes/bg-marker-p1.png") no-repeat left   top,
    url("../img/shortcodes/bg-marker-p2.png") no-repeat right  top,
    url("../img/shortcodes/bg-marker-p3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-marker-p4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-marker-p5.png") repeat-x  center top,
    url("../img/shortcodes/bg-marker-p6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-marker-p7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-marker-p8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-marker-p9.png") repeat    center center;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-marker-p1.png") no-repeat left   top,
    url("../img/shortcodes/bg-marker-p2.png") no-repeat right  top,
    url("../img/shortcodes/bg-marker-p3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-marker-p4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-marker-p5.png") repeat-x  center top,
    url("../img/shortcodes/bg-marker-p6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-marker-p7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-marker-p8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-marker-p9.png") repeat    center center;
}

.bg-deco-marker-p h1,
.bg-deco-marker-p h2,
.bg-deco-marker-p h3,
.bg-deco-marker-p h4,
.bg-deco-marker-p h5,
.bg-deco-marker-p h6,
.bg-deco-marker-p p { color: #222 !important; text-shadow: none !important; }

/* マーカー1 黄色 */

.bg-deco-marker-y {
  text-align: left;
  color: #222 !important;
  margin: 0 auto 10px;
  padding: 55px 50px 60px;
  background:
    url("../img/shortcodes/bg-marker-y1.png") no-repeat left   top,
    url("../img/shortcodes/bg-marker-y2.png") no-repeat right  top,
    url("../img/shortcodes/bg-marker-y3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-marker-y4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-marker-y5.png") repeat-x  center top,
    url("../img/shortcodes/bg-marker-y6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-marker-y7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-marker-y8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-marker-y9.png") repeat    center center;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-marker-y1.png") no-repeat left   top,
    url("../img/shortcodes/bg-marker-y2.png") no-repeat right  top,
    url("../img/shortcodes/bg-marker-y3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-marker-y4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-marker-y5.png") repeat-x  center top,
    url("../img/shortcodes/bg-marker-y6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-marker-y7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-marker-y8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-marker-y9.png") repeat    center center;
}

.bg-deco-marker-y h1,
.bg-deco-marker-y h2,
.bg-deco-marker-y h3,
.bg-deco-marker-y h4,
.bg-deco-marker-y h5,
.bg-deco-marker-y h6,
.bg-deco-marker-y p { color: #222 !important; text-shadow: none !important; }

/* マーカー1 緑 */

.bg-deco-marker-g {
  text-align: left;
  color: #222 !important;
  margin: 0 auto 10px;
  padding: 55px 50px 60px;
  background:
    url("../img/shortcodes/bg-marker-g1.png") no-repeat left   top,
    url("../img/shortcodes/bg-marker-g2.png") no-repeat right  top,
    url("../img/shortcodes/bg-marker-g3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-marker-g4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-marker-g5.png") repeat-x  center top,
    url("../img/shortcodes/bg-marker-g6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-marker-g7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-marker-g8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-marker-g9.png") repeat    center center;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-marker-g1.png") no-repeat left   top,
    url("../img/shortcodes/bg-marker-g2.png") no-repeat right  top,
    url("../img/shortcodes/bg-marker-g3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-marker-g4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-marker-g5.png") repeat-x  center top,
    url("../img/shortcodes/bg-marker-g6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-marker-g7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-marker-g8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-marker-g9.png") repeat    center center;
}

.bg-deco-marker-g h1,
.bg-deco-marker-g h2,
.bg-deco-marker-g h3,
.bg-deco-marker-g h4,
.bg-deco-marker-g h5,
.bg-deco-marker-g h6,
.bg-deco-marker-g p { color: #222 !important; text-shadow: none !important; }

/* マーカー1 青 */

.bg-deco-marker-b {
  text-align: left;
  color: #222 !important;
  margin: 0 auto 10px;
  padding: 55px 50px 60px;
  background:
    url("../img/shortcodes/bg-marker-b1.png") no-repeat left   top,
    url("../img/shortcodes/bg-marker-b2.png") no-repeat right  top,
    url("../img/shortcodes/bg-marker-b3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-marker-b4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-marker-b5.png") repeat-x  center top,
    url("../img/shortcodes/bg-marker-b6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-marker-b7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-marker-b8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-marker-b9.png") repeat    center center;
  /*IE6 IE7 IE8 */
  behavior: url("../PIE.htc");
  position: relative;
  zoom: 1;
  -pie-background:
    url("../img/shortcodes/bg-marker-b1.png") no-repeat left   top,
    url("../img/shortcodes/bg-marker-b2.png") no-repeat right  top,
    url("../img/shortcodes/bg-marker-b3.png") no-repeat left   bottom,
    url("../img/shortcodes/bg-marker-b4.png") no-repeat right  bottom,
    url("../img/shortcodes/bg-marker-b5.png") repeat-x  center top,
    url("../img/shortcodes/bg-marker-b6.png") repeat-y  right  center,
    url("../img/shortcodes/bg-marker-b7.png") repeat-x  center bottom,
    url("../img/shortcodes/bg-marker-b8.png") repeat-y  left   center,
    url("../img/shortcodes/bg-marker-b9.png") repeat    center center;
}

.bg-deco-marker-b h1,
.bg-deco-marker-b h2,
.bg-deco-marker-b h3,
.bg-deco-marker-b h4,
.bg-deco-marker-b h5,
.bg-deco-marker-b h6,
.bg-deco-marker-b p { color: #222 !important; text-shadow: none !important; }

/* ==========================================================================
   イラスト
   ========================================================================== */

.ill-align-left   { float: left;  margin: 0 1em 1em 0; }
.ill-align-center { display: block; margin: 0 auto 1em; text-align: center; }
.ill-align-right  { float: right; margin: 0 0 1em 1em; }

/* ==========================================================================
   吹き出し＋イラスト
   ========================================================================== */

.illust_bubble:before, .illust_bubble:after { content: ""; display: table; }
.illust_bubble:after { clear: both; }
.illust_bubble { *zoom: 1; }

.ib-illust { margin-bottom: 1em; }

.ib-bubble:before, .ib-bubble:after { content: ""; display: table; }
.ib-bubble:after { clear: both; }
.ib-bubble { *zoom: 1; }

.illust_bubble .title {
  position: relative;
  margin: 1em auto .8em;
  font-weight: bold;
  font-size: 18px;
  font-size: 1.39rem;
  line-height: 1.33;
}

.illust_bubble .title:before {
  position: absolute;
  top: -10px;
  width: 84px;
  height: 44px;
  background-repeat: no-repeat;
  content: "";
}

.title.check:before     { background-image: url("../img/shortcodes/ill-badge-check.png"); }
.title.point:before     { background-image: url("../img/shortcodes/ill-badge-point.png"); }
.title.kensho:before    { background-image: url("../img/shortcodes/ill-badge-kensho.png"); }
.title.kuchikomi:before { background-image: url("../img/shortcodes/ill-badge-kuchikomi.png"); }
.title.chumoku:before   { background-image: url("../img/shortcodes/ill-badge-chumoku.png"); }
.title.riyuu:before     { background-image: url("../img/shortcodes/ill-badge-riyuu.png"); }
.title.naze:before      { background-image: url("../img/shortcodes/ill-badge-naze.png"); }
.title.gimon:before     { background-image: url("../img/shortcodes/ill-badge-gimon.png"); }

.ib-left .ib-illust { clear: both; }

.ib-illust img { margin: 0 0 1em; width: 140px; }

/* イラスト左 */

.ib-left .ib-illust { float: left; }
.ib-left .ib-bubble { margin-left: 160px; }

.ib-left .colored_bg:after {
  position: absolute;
  top: 18px;
  right: 100%;
  width: 0;
  height: 0;
  border: 18px solid transparent;
  border-left-width: 19px;
  border-left-style: solid;
  content: "";
}

.ib-left .bg-green-lt:after  { border-right-color: #abddcd; }
.ib-left .bg-blue-lt:after   { border-right-color: #bccddd; }
.ib-left .bg-gray-lt:after   { border-right-color: #cdcdcd; }
.ib-left .bg-purple-lt:after { border-right-color: #ddbccd; }
.ib-left .bg-red-lt:after    { border-right-color: #eebcbc; }
.ib-left .bg-yellow-lt:after { border-right-color: #ffddab; }

.ib-left .title.check,
.ib-left .title.point,
.ib-left .title.kensho,
.ib-left .title.kuchikomi,
.ib-left .title.chumoku,
.ib-left .title.riyuu,
.ib-left .title.naze,
.ib-left .title.gimon { padding-right: 55px; }

.ib-left .title.check:before,
.ib-left .title.point:before,
.ib-left .title.kensho:before,
.ib-left .title.kuchikomi:before,
.ib-left .title.chumoku:before,
.ib-left .title.riyuu:before,
.ib-left .title.naze:before,
.ib-left .title.gimon:before { right: -36px; }

/* イラスト右 */

.ib-right .ib-illust { float: right; }
.ib-right .ib-bubble { margin-right: 160px; }

.ib-right .colored_bg:after {
  position: absolute;
  top: 18px;
  left: 100%;
  width: 0;
  height: 0;
  border: 18px solid transparent;
  border-left-width: 19px;
  border-left-style: solid;
  content: "";
}

.ib-right .bg-green-lt:after  { border-left-color: #abddcd; }
.ib-right .bg-blue-lt:after   { border-left-color: #bccddd; }
.ib-right .bg-gray-lt:after   { border-left-color: #cdcdcd; }
.ib-right .bg-purple-lt:after { border-left-color: #ddbccd; }
.ib-right .bg-red-lt:after    { border-left-color: #eebcbc; }
.ib-right .bg-yellow-lt:after { border-left-color: #ffddab; }

.ib-right .title.check,
.ib-right .title.point,
.ib-right .title.kensho,
.ib-right .title.kuchikomi,
.ib-right .title.chumoku,
.ib-right .title.riyuu,
.ib-right .title.naze,
.ib-right .title.gimon { padding-left: 55px; }

.ib-right .title.check:before,
.ib-right .title.point:before,
.ib-right .title.kensho:before,
.ib-right .title.kuchikomi:before,
.ib-right .title.chumoku:before,
.ib-right .title.riyuu:before,
.ib-right .title.naze:before,
.ib-right .title.gimon:before { left: -36px; }