@charset "utf-8";


/**
 * ショートコード
 * 
 */


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

.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;
}

/* 見出し */

.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/bg-bh-w-trans.png) repeat-x center bottom;
    color: #333;
    text-shadow: 0 1px 0 #fff ;
}

/* 見出し・黒 */

.box-title-black {
    background: #666 url(img/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: #369 url(img/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 {
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
}

/* 普通の色 */

.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-gold   { border: 1px solid #e5c732; }
.box-skyblue{ border: 1px solid #a3f1ff; }

/* 薄い色 */

.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-gold-lt   { border: 3px solid #e5c732; }
.box-skyblue-lt{ border: 3px solid #a3f1ff; }

/* オプション色 */

.box-option { border: 1px solid #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 {
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
}

/* 普通の色 */

.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: #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/btn-img.png);
    vertical-align: -4px;
    margin-right: 5px;
}

.btn_l:active {
    position: relative;
    top: 1px;
    -webkit-box-shadow: 0 2px 4px rgba(000,000,000,0.5) inset;
       -moz-box-shadow: 0 2px 4px rgba(000,000,000,0.5) inset;
            box-shadow: 0 2px 4px rgba(000,000,000,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;
    -webkit-box-shadow: 0 2px 4px rgba(000,000,000,0.5) inset;
       -moz-box-shadow: 0 2px 4px rgba(000,000,000,0.5) inset;
            box-shadow: 0 2px 4px rgba(000,000,000,0.5) inset;
}

/* 角・丸 */

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

/* 色・赤 */

.btn-red {
    border: 1px solid #c00;
    background: #c00 url("img/bg-btn.png") repeat-x left center;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #c00, 0 2px 3px rgba(0, 0, 0, 0.33);
       -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #c00, 0 2px 3px rgba(0, 0, 0, 0.33);
            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/bg-btn.png") repeat-x left center;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #369, 0 2px 3px rgba(0, 0, 0, 0.33);
       -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #369, 0 2px 3px rgba(0, 0, 0, 0.33);
            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/bg-btn.png") repeat-x left center;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #7EA835, 0 2px 3px rgba(0, 0, 0, 0.33);
       -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #7EA835, 0 2px 3px rgba(0, 0, 0, 0.33);
            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 #ff9900;
    background: #ff9900 url("img/bg-btn.png") repeat-x left center;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #CF7616, 0 2px 3px rgba(0, 0, 0, 0.33);
       -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #CF7616, 0 2px 3px rgba(0, 0, 0, 0.33);
            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 #bf0000;
    background: #bf0000 url("img/bg-btn.png") repeat-x left center;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 black, 0 2px 3px rgba(0, 0, 0, 0.33);
       -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 black, 0 2px 3px rgba(0, 0, 0, 0.33);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 black, 0 2px 3px rgba(0, 0, 0, 0.33);
}

/* 色・オプションカラー */

.btn-option {
    border: 1px solid #369;
    background: #369 url("img/bg-btn.png") repeat-x left center;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #369, 0 2px 3px rgba(0, 0, 0, 0.33);
       -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 #369, 0 2px 3px rgba(0, 0, 0, 0.33);
            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-red:hover, .btn-blue:hover, .btn-green:hover, .btn-orange:hover, .btn-black:hover, .btn-option:hover {
    background-image: url("img/bg-btn-hover.png");
}


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

.icon {
    display: inline-block;
    margin-right: 7px;
    background-repeat: no-repeat !important;
    vertical-align: text-bottom;
    zoom: 1;
}

.icon_q1-b        { width: 18px; height: 18px; background: url("img/icon-q1-b.png") }
.icon_q1-g        { width: 18px; height: 18px; background: url("img/icon-q1-g.png") }
.icon_q1-gr       { width: 18px; height: 18px; background: url("img/icon-q1-gr.png") }
.icon_q1-o        { width: 18px; height: 18px; background: url("img/icon-q1-o.png") }
.icon_q1-p        { width: 18px; height: 18px; background: url("img/icon-q1-p.png") }
.icon_q1-r        { width: 18px; height: 18px; background: url("img/icon-q1-r.png") }
.icon_a1-b        { width: 18px; height: 18px; background: url("img/icon-a1-b.png") }
.icon_a1-g        { width: 18px; height: 18px; background: url("img/icon-a1-g.png") }
.icon_a1-gr       { width: 18px; height: 18px; background: url("img/icon-a1-gr.png") }
.icon_a1-o        { width: 18px; height: 18px; background: url("img/icon-a1-o.png") }
.icon_a1-p        { width: 18px; height: 18px; background: url("img/icon-a1-p.png") }
.icon_a1-r        { width: 18px; height: 18px; background: url("img/icon-a1-r.png") }
.icon_arrow1-b    { width: 18px; height: 18px; background: url("img/icon-arrow1-b.png") }
.icon_arrow1-g    { width: 18px; height: 18px; background: url("img/icon-arrow1-g.png") }
.icon_arrow1-gr   { width: 18px; height: 18px; background: url("img/icon-arrow1-gr.png") }
.icon_arrow1-o    { width: 18px; height: 18px; background: url("img/icon-arrow1-o.png") }
.icon_arrow1-p    { width: 18px; height: 18px; background: url("img/icon-arrow1-p.png") }
.icon_arrow1-r    { width: 18px; height: 18px; background: url("img/icon-arrow1-r.png") }
.icon_check1-b    { width: 18px; height: 18px; background: url("img/icon-check1-b.png") }
.icon_check1-g    { width: 18px; height: 18px; background: url("img/icon-check1-g.png") }
.icon_check1-gr   { width: 18px; height: 18px; background: url("img/icon-check1-gr.png") }
.icon_check1-o    { width: 18px; height: 18px; background: url("img/icon-check1-o.png") }
.icon_check1-p    { width: 18px; height: 18px; background: url("img/icon-check1-p.png") }
.icon_check1-r    { width: 18px; height: 18px; background: url("img/icon-check1-r.png") }

.icon_q2-b        { width: 18px; height: 18px; background: url("img/icon-q2-b.png") }
.icon_q2-g        { width: 18px; height: 18px; background: url("img/icon-q2-g.png") }
.icon_q2-gr       { width: 18px; height: 18px; background: url("img/icon-q2-gr.png") }
.icon_q2-o        { width: 18px; height: 18px; background: url("img/icon-q2-o.png") }
.icon_q2-p        { width: 18px; height: 18px; background: url("img/icon-q2-p.png") }
.icon_q2-r        { width: 18px; height: 18px; background: url("img/icon-q2-r.png") }
.icon_a2-b        { width: 18px; height: 18px; background: url("img/icon-a2-b.png") }
.icon_a2-g        { width: 18px; height: 18px; background: url("img/icon-a2-g.png") }
.icon_a2-gr       { width: 18px; height: 18px; background: url("img/icon-a2-gr.png") }
.icon_a2-o        { width: 18px; height: 18px; background: url("img/icon-a2-o.png") }
.icon_a2-p        { width: 18px; height: 18px; background: url("img/icon-a2-p.png") }
.icon_a2-r        { width: 18px; height: 18px; background: url("img/icon-a2-r.png") }
.icon_arrow2-b    { width: 18px; height: 18px; background: url("img/icon-arrow2-b.png") }
.icon_arrow2-g    { width: 18px; height: 18px; background: url("img/icon-arrow2-g.png") }
.icon_arrow2-gr   { width: 18px; height: 18px; background: url("img/icon-arrow2-gr.png") }
.icon_arrow2-o    { width: 18px; height: 18px; background: url("img/icon-arrow2-o.png") }
.icon_arrow2-p    { width: 18px; height: 18px; background: url("img/icon-arrow2-p.png") }
.icon_arrow2-r    { width: 18px; height: 18px; background: url("img/icon-arrow2-r.png") }
.icon_check2-b    { width: 18px; height: 18px; background: url("img/icon-check2-b.png") }
.icon_check2-g    { width: 18px; height: 18px; background: url("img/icon-check2-g.png") }
.icon_check2-gr   { width: 18px; height: 18px; background: url("img/icon-check2-gr.png") }
.icon_check2-o    { width: 18px; height: 18px; background: url("img/icon-check2-o.png") }
.icon_check2-p    { width: 18px; height: 18px; background: url("img/icon-check2-p.png") }
.icon_check2-r    { width: 18px; height: 18px; background: url("img/icon-check2-r.png") }

.icon_q3-b        { width: 18px; height: 18px; background: url("img/icon-q3-b.png") }
.icon_q3-g        { width: 18px; height: 18px; background: url("img/icon-q3-g.png") }
.icon_q3-gr       { width: 18px; height: 18px; background: url("img/icon-q3-gr.png") }
.icon_q3-o        { width: 18px; height: 18px; background: url("img/icon-q3-o.png") }
.icon_q3-p        { width: 18px; height: 18px; background: url("img/icon-q3-p.png") }
.icon_q3-r        { width: 18px; height: 18px; background: url("img/icon-q3-r.png") }
.icon_a3-b        { width: 18px; height: 18px; background: url("img/icon-a3-b.png") }
.icon_a3-g        { width: 18px; height: 18px; background: url("img/icon-a3-g.png") }
.icon_a3-gr       { width: 18px; height: 18px; background: url("img/icon-a3-gr.png") }
.icon_a3-o        { width: 18px; height: 18px; background: url("img/icon-a3-o.png") }
.icon_a3-p        { width: 18px; height: 18px; background: url("img/icon-a3-p.png") }
.icon_a3-r        { width: 18px; height: 18px; background: url("img/icon-a3-r.png") }
.icon_arrow3-b    { width: 18px; height: 18px; background: url("img/icon-arrow3-b.png") }
.icon_arrow3-g    { width: 18px; height: 18px; background: url("img/icon-arrow3-g.png") }
.icon_arrow3-gr   { width: 18px; height: 18px; background: url("img/icon-arrow3-gr.png") }
.icon_arrow3-o    { width: 18px; height: 18px; background: url("img/icon-arrow3-o.png") }
.icon_arrow3-p    { width: 18px; height: 18px; background: url("img/icon-arrow3-p.png") }
.icon_arrow3-r    { width: 18px; height: 18px; background: url("img/icon-arrow3-r.png") }
.icon_check3-b    { width: 18px; height: 18px; background: url("img/icon-check3-b.png") }
.icon_check3-g    { width: 18px; height: 18px; background: url("img/icon-check3-g.png") }
.icon_check3-gr   { width: 18px; height: 18px; background: url("img/icon-check3-gr.png") }
.icon_check3-o    { width: 18px; height: 18px; background: url("img/icon-check3-o.png") }
.icon_check3-p    { width: 18px; height: 18px; background: url("img/icon-check3-p.png") }
.icon_check3-r    { width: 18px; height: 18px; background: url("img/icon-check3-r.png") }

.icon_check-b-b   { width: 64px; height: 40px; background: url("img/icon-check-b-b.png") }
.icon_check-b-bk  { width: 64px; height: 40px; background: url("img/icon-check-b-bk.png") }
.icon_check-b-g   { width: 64px; height: 40px; background: url("img/icon-check-b-g.png") }
.icon_check-b-r   { width: 64px; height: 40px; background: url("img/icon-check-b-r.png") }
.icon_finger1-b   { width: 51px; height: 25px; background: url("img/icon-finger1-b.png") }
.icon_finger1-bk  { width: 51px; height: 25px; background: url("img/icon-finger1-bk.png") }
.icon_finger1-g   { width: 51px; height: 25px; background: url("img/icon-finger1-g.png") }
.icon_finger1-r   { width: 51px; height: 25px; background: url("img/icon-finger1-r.png") }
.icon_point-b-b   { width: 64px; height: 40px; background: url("img/icon-point-b-b.png") }
.icon_point-b-bk  { width: 64px; height: 40px; background: url("img/icon-point-b-bk.png") }
.icon_point-b-g   { width: 64px; height: 40px; background: url("img/icon-point-b-g.png") }
.icon_point-b-r   { width: 64px; height: 40px; background: url("img/icon-point-b-r.png") }
.icon_point1-1-b  { width: 38px; height: 44px; background: url("img/icon-point1-1-b.png") }
.icon_point1-2-b  { width: 38px; height: 44px; background: url("img/icon-point1-2-b.png") }
.icon_point1-3-b  { width: 38px; height: 44px; background: url("img/icon-point1-3-b.png") }
.icon_point1-4-b  { width: 38px; height: 44px; background: url("img/icon-point1-4-b.png") }
.icon_point1-5-b  { width: 38px; height: 44px; background: url("img/icon-point1-5-b.png") }
.icon_point1-6-b  { width: 38px; height: 44px; background: url("img/icon-point1-6-b.png") }
.icon_point1-1-g  { width: 38px; height: 44px; background: url("img/icon-point1-1-g.png") }
.icon_point1-2-g  { width: 38px; height: 44px; background: url("img/icon-point1-2-g.png") }
.icon_point1-3-g  { width: 38px; height: 44px; background: url("img/icon-point1-3-g.png") }
.icon_point1-4-g  { width: 38px; height: 44px; background: url("img/icon-point1-4-g.png") }
.icon_point1-5-g  { width: 38px; height: 44px; background: url("img/icon-point1-5-g.png") }
.icon_point1-6-g  { width: 38px; height: 44px; background: url("img/icon-point1-6-g.png") }
.icon_point1-1-gr { width: 38px; height: 44px; background: url("img/icon-point1-1-gr.png") }
.icon_point1-2-gr { width: 38px; height: 44px; background: url("img/icon-point1-2-gr.png") }
.icon_point1-3-gr { width: 38px; height: 44px; background: url("img/icon-point1-3-gr.png") }
.icon_point1-4-gr { width: 38px; height: 44px; background: url("img/icon-point1-4-gr.png") }
.icon_point1-5-gr { width: 38px; height: 44px; background: url("img/icon-point1-5-gr.png") }
.icon_point1-6-gr { width: 38px; height: 44px; background: url("img/icon-point1-6-gr.png") }
.icon_point1-1-o  { width: 38px; height: 44px; background: url("img/icon-point1-1-o.png") }
.icon_point1-2-o  { width: 38px; height: 44px; background: url("img/icon-point1-2-o.png") }
.icon_point1-3-o  { width: 38px; height: 44px; background: url("img/icon-point1-3-o.png") }
.icon_point1-4-o  { width: 38px; height: 44px; background: url("img/icon-point1-4-o.png") }
.icon_point1-5-o  { width: 38px; height: 44px; background: url("img/icon-point1-5-o.png") }
.icon_point1-6-o  { width: 38px; height: 44px; background: url("img/icon-point1-6-o.png") }
.icon_point1-1-p  { width: 38px; height: 44px; background: url("img/icon-point1-1-p.png") }
.icon_point1-2-p  { width: 38px; height: 44px; background: url("img/icon-point1-2-p.png") }
.icon_point1-3-p  { width: 38px; height: 44px; background: url("img/icon-point1-3-p.png") }
.icon_point1-4-p  { width: 38px; height: 44px; background: url("img/icon-point1-4-p.png") }
.icon_point1-5-p  { width: 38px; height: 44px; background: url("img/icon-point1-5-p.png") }
.icon_point1-6-p  { width: 38px; height: 44px; background: url("img/icon-point1-6-p.png") }
.icon_point1-1-r  { width: 38px; height: 44px; background: url("img/icon-point1-1-r.png") }
.icon_point1-2-r  { width: 38px; height: 44px; background: url("img/icon-point1-2-r.png") }
.icon_point1-3-r  { width: 38px; height: 44px; background: url("img/icon-point1-3-r.png") }
.icon_point1-4-r  { width: 38px; height: 44px; background: url("img/icon-point1-4-r.png") }
.icon_point1-5-r  { width: 38px; height: 44px; background: url("img/icon-point1-5-r.png") }
.icon_point1-6-r  { width: 38px; height: 44px; background: url("img/icon-point1-6-r.png") }
.icon_point2-1-b  { width: 34px; height: 38px; background: url("img/icon-point2-1-b.png") }
.icon_point2-2-b  { width: 34px; height: 38px; background: url("img/icon-point2-2-b.png") }
.icon_point2-3-b  { width: 34px; height: 38px; background: url("img/icon-point2-3-b.png") }
.icon_point2-4-b  { width: 34px; height: 38px; background: url("img/icon-point2-4-b.png") }
.icon_point2-5-b  { width: 34px; height: 38px; background: url("img/icon-point2-5-b.png") }
.icon_point2-6-b  { width: 34px; height: 38px; background: url("img/icon-point2-6-b.png") }
.icon_point2-1-g  { width: 34px; height: 38px; background: url("img/icon-point2-1-g.png") }
.icon_point2-2-g  { width: 34px; height: 38px; background: url("img/icon-point2-2-g.png") }
.icon_point2-3-g  { width: 34px; height: 38px; background: url("img/icon-point2-3-g.png") }
.icon_point2-4-g  { width: 34px; height: 38px; background: url("img/icon-point2-4-g.png") }
.icon_point2-5-g  { width: 34px; height: 38px; background: url("img/icon-point2-5-g.png") }
.icon_point2-6-g  { width: 34px; height: 38px; background: url("img/icon-point2-6-g.png") }
.icon_point2-1-gr { width: 34px; height: 38px; background: url("img/icon-point2-1-gr.png") }
.icon_point2-2-gr { width: 34px; height: 38px; background: url("img/icon-point2-2-gr.png") }
.icon_point2-3-gr { width: 34px; height: 38px; background: url("img/icon-point2-3-gr.png") }
.icon_point2-4-gr { width: 34px; height: 38px; background: url("img/icon-point2-4-gr.png") }
.icon_point2-5-gr { width: 34px; height: 38px; background: url("img/icon-point2-5-gr.png") }
.icon_point2-6-gr { width: 34px; height: 38px; background: url("img/icon-point2-6-gr.png") }
.icon_point2-1-o  { width: 34px; height: 38px; background: url("img/icon-point2-1-o.png") }
.icon_point2-2-o  { width: 34px; height: 38px; background: url("img/icon-point2-2-o.png") }
.icon_point2-3-o  { width: 34px; height: 38px; background: url("img/icon-point2-3-o.png") }
.icon_point2-4-o  { width: 34px; height: 38px; background: url("img/icon-point2-4-o.png") }
.icon_point2-5-o  { width: 34px; height: 38px; background: url("img/icon-point2-5-o.png") }
.icon_point2-6-o  { width: 34px; height: 38px; background: url("img/icon-point2-6-o.png") }
.icon_point2-1-p  { width: 34px; height: 38px; background: url("img/icon-point2-1-p.png") }
.icon_point2-2-p  { width: 34px; height: 38px; background: url("img/icon-point2-2-p.png") }
.icon_point2-3-p  { width: 34px; height: 38px; background: url("img/icon-point2-3-p.png") }
.icon_point2-4-p  { width: 34px; height: 38px; background: url("img/icon-point2-4-p.png") }
.icon_point2-5-p  { width: 34px; height: 38px; background: url("img/icon-point2-5-p.png") }
.icon_point2-6-p  { width: 34px; height: 38px; background: url("img/icon-point2-6-p.png") }
.icon_point2-1-r  { width: 34px; height: 38px; background: url("img/icon-point2-1-r.png") }
.icon_point2-2-r  { width: 34px; height: 38px; background: url("img/icon-point2-2-r.png") }
.icon_point2-3-r  { width: 34px; height: 38px; background: url("img/icon-point2-3-r.png") }
.icon_point2-4-r  { width: 34px; height: 38px; background: url("img/icon-point2-4-r.png") }
.icon_point2-5-r  { width: 34px; height: 38px; background: url("img/icon-point2-5-r.png") }
.icon_point2-6-r  { width: 34px; height: 38px; background: url("img/icon-point2-6-r.png") }
.icon_point3-1-b  { width: 52px; height: 26px; background: url("img/icon-point3-1-b.png") }
.icon_point3-2-b  { width: 52px; height: 26px; background: url("img/icon-point3-2-b.png") }
.icon_point3-3-b  { width: 52px; height: 26px; background: url("img/icon-point3-3-b.png") }
.icon_point3-4-b  { width: 52px; height: 26px; background: url("img/icon-point3-4-b.png") }
.icon_point3-5-b  { width: 52px; height: 26px; background: url("img/icon-point3-5-b.png") }
.icon_point3-6-b  { width: 52px; height: 26px; background: url("img/icon-point3-6-b.png") }
.icon_point3-1-g  { width: 52px; height: 26px; background: url("img/icon-point3-1-g.png") }
.icon_point3-2-g  { width: 52px; height: 26px; background: url("img/icon-point3-2-g.png") }
.icon_point3-3-g  { width: 52px; height: 26px; background: url("img/icon-point3-3-g.png") }
.icon_point3-4-g  { width: 52px; height: 26px; background: url("img/icon-point3-4-g.png") }
.icon_point3-5-g  { width: 52px; height: 26px; background: url("img/icon-point3-5-g.png") }
.icon_point3-6-g  { width: 52px; height: 26px; background: url("img/icon-point3-6-g.png") }
.icon_point3-1-gr { width: 52px; height: 26px; background: url("img/icon-point3-1-gr.png") }
.icon_point3-2-gr { width: 52px; height: 26px; background: url("img/icon-point3-2-gr.png") }
.icon_point3-3-gr { width: 52px; height: 26px; background: url("img/icon-point3-3-gr.png") }
.icon_point3-4-gr { width: 52px; height: 26px; background: url("img/icon-point3-4-gr.png") }
.icon_point3-5-gr { width: 52px; height: 26px; background: url("img/icon-point3-5-gr.png") }
.icon_point3-6-gr { width: 52px; height: 26px; background: url("img/icon-point3-6-gr.png") }
.icon_point3-1-o  { width: 52px; height: 26px; background: url("img/icon-point3-1-o.png") }
.icon_point3-2-o  { width: 52px; height: 26px; background: url("img/icon-point3-2-o.png") }
.icon_point3-3-o  { width: 52px; height: 26px; background: url("img/icon-point3-3-o.png") }
.icon_point3-4-o  { width: 52px; height: 26px; background: url("img/icon-point3-4-o.png") }
.icon_point3-5-o  { width: 52px; height: 26px; background: url("img/icon-point3-5-o.png") }
.icon_point3-6-o  { width: 52px; height: 26px; background: url("img/icon-point3-6-o.png") }
.icon_point3-1-p  { width: 52px; height: 26px; background: url("img/icon-point3-1-p.png") }
.icon_point3-2-p  { width: 52px; height: 26px; background: url("img/icon-point3-2-p.png") }
.icon_point3-3-p  { width: 52px; height: 26px; background: url("img/icon-point3-3-p.png") }
.icon_point3-4-p  { width: 52px; height: 26px; background: url("img/icon-point3-4-p.png") }
.icon_point3-5-p  { width: 52px; height: 26px; background: url("img/icon-point3-5-p.png") }
.icon_point3-6-p  { width: 52px; height: 26px; background: url("img/icon-point3-6-p.png") }
.icon_point3-1-r  { width: 52px; height: 26px; background: url("img/icon-point3-1-r.png") }
.icon_point3-2-r  { width: 52px; height: 26px; background: url("img/icon-point3-2-r.png") }
.icon_point3-3-r  { width: 52px; height: 26px; background: url("img/icon-point3-3-r.png") }
.icon_point3-4-r  { width: 52px; height: 26px; background: url("img/icon-point3-4-r.png") }
.icon_point3-5-r  { width: 52px; height: 26px; background: url("img/icon-point3-5-r.png") }
.icon_point3-6-r  { width: 52px; height: 26px; background: url("img/icon-point3-6-r.png") }
.icon_ranking1-1  { width: 59px; height: 55px; background: url("img/icon-ranking1-1.png") }
.icon_ranking1-2  { width: 59px; height: 55px; background: url("img/icon-ranking1-2.png") }
.icon_ranking1-3  { width: 59px; height: 55px; background: url("img/icon-ranking1-3.png") }
.icon_ranking1-4  { width: 59px; height: 55px; background: url("img/icon-ranking1-4.png") }
.icon_ranking1-5  { width: 59px; height: 55px; background: url("img/icon-ranking1-5.png") }
.icon_ranking2-1  { width: 40px; height: 40px; background: url("img/icon-ranking2-1.png") }
.icon_ranking2-2  { width: 40px; height: 40px; background: url("img/icon-ranking2-2.png") }
.icon_ranking2-3  { width: 40px; height: 40px; background: url("img/icon-ranking2-3.png") }
.icon_ranking2-4  { width: 40px; height: 40px; background: url("img/icon-ranking2-4.png") }
.icon_ranking2-5  { width: 40px; height: 40px; background: url("img/icon-ranking2-5.png") }
.icon_ranking3-1  { width: 31px; height: 24px; background: url("img/icon-ranking3-1.png") }
.icon_ranking3-2  { width: 31px; height: 24px; background: url("img/icon-ranking3-2.png") }
.icon_ranking3-3  { width: 31px; height: 24px; background: url("img/icon-ranking3-3.png") }
.icon_ranking3-4  { width: 31px; height: 24px; background: url("img/icon-ranking3-4.png") }
.icon_ranking3-5  { width: 31px; height: 24px; background: url("img/icon-ranking3-5.png") }
.icon_star        { width: 23px; height: 27px; background: url("img/icon-star.png") }
.icon_star-h      { width: 23px; height: 27px; background: url("img/icon-star-half.png") }
.icon_star-n      { width: 23px; height: 27px; background: url("img/icon-star-none.png") }
.icon_star5-0     { width: 88px; height: 21px; background: url("img/icon-star5-0.png") }
.icon_star5-1     { width: 88px; height: 21px; background: url("img/icon-star5-1.png") }
.icon_star5-2     { width: 88px; height: 21px; background: url("img/icon-star5-2.png") }
.icon_star5-3     { width: 88px; height: 21px; background: url("img/icon-star5-3.png") }
.icon_star5-4     { width: 88px; height: 21px; background: url("img/icon-star5-4.png") }
.icon_star5-5     { width: 88px; height: 21px; background: url("img/icon-star5-5.png") }
.icon_pdf1        { width: 27px; height: 32px; background: url("img/icon-pdf1.png") }
.icon_pdf2        { width: 27px; height: 32px; background: url("img/icon-pdf2.png") }
.icon_zip1        { width: 27px; height: 32px; background: url("img/icon-zip1.png") }
.icon_zip2        { width: 27px; height: 32px; background: url("img/icon-zip2.png") }
.icon_mail1       { width: 32px; height: 32px; background: url("img/icon-mail1.png") }
.icon_mail2       { width: 32px; height: 32px; background: url("img/icon-mail2.png") }


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

.faq_q {
    padding: 1em 1em 1em 45px;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    -webkit-border-radius: 5px 5px 0 0;
       -moz-border-radius: 5px 5px 0 0;
            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/qa-q-g.png)  no-repeat 1em 1em; }
.faq-b  { background: #e6e6e6 url(img/qa-q-b.png)  no-repeat 1em 1em; }
.faq-gr { background: #e6e6e6 url(img/qa-q-gr.png) no-repeat 1em 1em; }
.faq-r  { background: #e6e6e6 url(img/qa-q-r.png)  no-repeat 1em 1em; }
.faq-o  { background: #e6e6e6 url(img/qa-q-o.png)  no-repeat 1em 1em; }
.faq-p  { background: #e6e6e6 url(img/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;
    -webkit-border-radius: 0 0 5px 5px;
       -moz-border-radius: 0 0 5px 5px;
            border-radius: 0 0 5px 5px;
    background: #f3f3f3 url(img/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/icon-check1-b.png")  no-repeat 0 3px; }
.cl-check1-g  li { background: url("img/icon-check1-g.png")  no-repeat 0 3px; }
.cl-check1-gr li { background: url("img/icon-check1-gr.png") no-repeat 0 3px; }
.cl-check1-o  li { background: url("img/icon-check1-o.png")  no-repeat 0 3px; }
.cl-check1-p  li { background: url("img/icon-check1-p.png")  no-repeat 0 3px; }
.cl-check1-r  li { background: url("img/icon-check1-r.png")  no-repeat 0 3px; }
.cl-check2-b  li { background: url("img/icon-check2-b.png")  no-repeat 0 3px; }
.cl-check2-g  li { background: url("img/icon-check2-g.png")  no-repeat 0 3px; }
.cl-check2-gr li { background: url("img/icon-check2-gr.png") no-repeat 0 3px; }
.cl-check2-o  li { background: url("img/icon-check2-o.png")  no-repeat 0 3px; }
.cl-check2-p  li { background: url("img/icon-check2-p.png")  no-repeat 0 3px; }
.cl-check2-r  li { background: url("img/icon-check2-r.png")  no-repeat 0 3px; }
.cl-check3-b  li { background: url("img/icon-check3-b.png")  no-repeat 0 3px; }
.cl-check3-g  li { background: url("img/icon-check3-g.png")  no-repeat 0 3px; }
.cl-check3-gr li { background: url("img/icon-check3-gr.png") no-repeat 0 3px; }
.cl-check3-o  li { background: url("img/icon-check3-o.png")  no-repeat 0 3px; }
.cl-check3-p  li { background: url("img/icon-check3-p.png")  no-repeat 0 3px; }
.cl-check3-r  li { background: url("img/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/icon-arrow1-b-s.png")  no-repeat; }
.rl-arrow1-g  a { background: url("img/icon-arrow1-g-s.png")  no-repeat; }
.rl-arrow1-gr a { background: url("img/icon-arrow1-gr-s.png") no-repeat; }
.rl-arrow1-o  a { background: url("img/icon-arrow1-o-s.png")  no-repeat; }
.rl-arrow1-p  a { background: url("img/icon-arrow1-p-s.png")  no-repeat; }
.rl-arrow1-r  a { background: url("img/icon-arrow1-r-s.png")  no-repeat; }
.rl-arrow2-b  a { background: url("img/icon-arrow2-b-s.png")  no-repeat; }
.rl-arrow2-g  a { background: url("img/icon-arrow2-g-s.png")  no-repeat; }
.rl-arrow2-gr a { background: url("img/icon-arrow2-gr-s.png") no-repeat; }
.rl-arrow2-o  a { background: url("img/icon-arrow2-o-s.png")  no-repeat; }
.rl-arrow2-p  a { background: url("img/icon-arrow2-p-s.png")  no-repeat; }
.rl-arrow2-r  a { background: url("img/icon-arrow2-r-s.png")  no-repeat; }
.rl-arrow3-b  a { background: url("img/icon-arrow3-b-s.png")  no-repeat; }
.rl-arrow3-g  a { background: url("img/icon-arrow3-g-s.png")  no-repeat; }
.rl-arrow3-gr a { background: url("img/icon-arrow3-gr-s.png") no-repeat; }
.rl-arrow3-o  a { background: url("img/icon-arrow3-o-s.png")  no-repeat; }
.rl-arrow3-p  a { background: url("img/icon-arrow3-p-s.png")  no-repeat; }
.rl-arrow3-r  a { background: url("img/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: #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/bg-metal1-2.png") no-repeat left   top,
        url("img/bg-metal1-2.png") no-repeat right  top,
        url("img/bg-metal1-2.png") no-repeat left   bottom,
        url("img/bg-metal1-2.png") no-repeat right  bottom, 
        url("img/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");
    -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/bg-metal2-2.png") no-repeat left   top,
        url("img/bg-metal2-2.png") no-repeat right  top,
        url("img/bg-metal2-2.png") no-repeat left   bottom,
        url("img/bg-metal2-2.png") no-repeat right  bottom, 
        url("img/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");
    -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/bg-metal3-2.png") no-repeat left   top,
        url("img/bg-metal3-2.png") no-repeat right  top,
        url("img/bg-metal3-2.png") no-repeat left   bottom,
        url("img/bg-metal3-2.png") no-repeat right  bottom,
        url("img/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");
    -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/bg-metal4-2.png") no-repeat left   top,
        url("img/bg-metal4-2.png") no-repeat right  top,
        url("img/bg-metal4-2.png") no-repeat left   bottom,
        url("img/bg-metal4-2.png") no-repeat right  bottom,
        url("img/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");
    -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/bg-paper1-1.png") no-repeat left   top,
        url("img/bg-paper1-2.png") no-repeat right  top,
        url("img/bg-paper1-3.png") no-repeat left   bottom,
        url("img/bg-paper1-4.png") no-repeat right  bottom, 
        url("img/bg-paper1-5.png") repeat-x  center top,
        url("img/bg-paper1-6.png") repeat-y  right  center,
        url("img/bg-paper1-7.png") repeat-x  center bottom,
        url("img/bg-paper1-8.png") repeat-y  left   center,
        url("img/bg-paper1-9.png") repeat    center center;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
    -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 !important;
    margin: 0 auto 20px;
    padding: 53px 35px 35px;
    background: 
        url("img/bg-paper2-0.png") no-repeat center top,
        url("img/bg-paper2-1.png") no-repeat left   top,
        url("img/bg-paper2-2.png") no-repeat right  top,
        url("img/bg-paper2-3.png") no-repeat left   bottom,
        url("img/bg-paper2-4.png") no-repeat right  bottom,
        url("img/bg-paper2-5.png") repeat-x  center top,
        url("img/bg-paper2-6.png") repeat-y  right  center,
        url("img/bg-paper2-7.png") repeat-x  center bottom,
        url("img/bg-paper2-8.png") repeat-y  left   center, 
        url("img/bg-paper2-9.png") repeat    center center;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
    -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/bg-paper3-0.png") no-repeat center top,
        url("img/bg-paper2-1.png") no-repeat left   top,
        url("img/bg-paper2-2.png") no-repeat right  top,
        url("img/bg-paper2-3.png") no-repeat left   bottom,
        url("img/bg-paper2-4.png") no-repeat right  bottom,
        url("img/bg-paper2-5.png") repeat-x  center top,
        url("img/bg-paper2-6.png") repeat-y  right  center,
        url("img/bg-paper2-7.png") repeat-x  center bottom,
        url("img/bg-paper2-8.png") repeat-y  left   center, 
        url("img/bg-paper2-9.png") repeat    center center;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
    -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/bg-paper4-0.png") no-repeat center top,
        url("img/bg-paper2-1.png") no-repeat left   top,
        url("img/bg-paper2-2.png") no-repeat right  top,
        url("img/bg-paper2-3.png") no-repeat left   bottom,
        url("img/bg-paper2-4.png") no-repeat right  bottom,
        url("img/bg-paper2-5.png") repeat-x  center top,
        url("img/bg-paper2-6.png") repeat-y  right  center,
        url("img/bg-paper2-7.png") repeat-x  center bottom,
        url("img/bg-paper2-8.png") repeat-y  left   center,
        url("img/bg-paper2-9.png") repeat    center center;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
    -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/bg-paper5-0.png") no-repeat center top,
        url("img/bg-paper2-1.png") no-repeat left   top,
        url("img/bg-paper2-2.png") no-repeat right  top,
        url("img/bg-paper2-3.png") no-repeat left   bottom,
        url("img/bg-paper2-4.png") no-repeat right  bottom,
        url("img/bg-paper2-5.png") repeat-x  center top,
        url("img/bg-paper2-6.png") repeat-y  right  center,
        url("img/bg-paper2-7.png") repeat-x  center bottom,
        url("img/bg-paper2-8.png") repeat-y  left   center,
        url("img/bg-paper2-9.png") repeat    center center;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
    -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 !important;
}

/* ポストイット1 */

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

/* ポストイット2 */

.bg-deco-postit2 {
    text-align: left;
    color: #222 !important;
    margin: 0 auto 20px;
    padding: 30px 35px 35px;
    background: 
        url("img/bg-postit2-1.png") no-repeat left   top,
        url("img/bg-postit2-2.png") no-repeat right  top,
        url("img/bg-postit2-3.png") no-repeat left   bottom,
        url("img/bg-postit2-4.png") no-repeat right  bottom,
        url("img/bg-postit2-5.png") repeat-x  center top,
        url("img/bg-postit2-6.png") repeat-y  right  center,
        url("img/bg-postit2-7.png") repeat-x  center bottom,
        url("img/bg-postit2-8.png") repeat-y  left   center,
        url("img/bg-postit2-9.png") repeat    center center;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
    -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/bg-postit3-1.png") no-repeat left   top,
        url("img/bg-postit3-2.png") no-repeat right  top,
        url("img/bg-postit3-3.png") no-repeat left   bottom,
        url("img/bg-postit3-4.png") no-repeat right  bottom,
        url("img/bg-postit3-5.png") repeat-x  center top,
        url("img/bg-postit3-6.png") repeat-y  right  center,
        url("img/bg-postit3-7.png") repeat-x  center bottom,
        url("img/bg-postit3-8.png") repeat-y  left   center,
        url("img/bg-postit3-9.png") repeat    center center;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
    -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/bg-postit4-1.png") no-repeat left   top,
        url("img/bg-postit4-2.png") no-repeat right  top,
        url("img/bg-postit4-3.png") no-repeat left   bottom,
        url("img/bg-postit4-4.png") no-repeat right  bottom,
        url("img/bg-postit4-5.png") repeat-x  center top,
        url("img/bg-postit4-6.png") repeat-y  right  center,
        url("img/bg-postit4-7.png") repeat-x  center bottom,
        url("img/bg-postit4-8.png") repeat-y  left   center,
        url("img/bg-postit4-9.png") repeat    center center;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
    -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/bg-postit5-1.png") no-repeat left   top,
        url("img/bg-postit5-2.png") no-repeat right  top,
        url("img/bg-postit5-3.png") no-repeat left   bottom,
        url("img/bg-postit5-4.png") no-repeat right  bottom,
        url("img/bg-postit5-5.png") repeat-x  center top,
        url("img/bg-postit5-6.png") repeat-y  right   center,
        url("img/bg-postit5-7.png") repeat-x  center bottom,
        url("img/bg-postit5-8.png") repeat-y  left   center,
        url("img/bg-postit5-9.png") repeat    center center;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
    -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/bg-chalkboard1.png") no-repeat left   top,
        url("img/bg-chalkboard2.png") no-repeat right  top,
        url("img/bg-chalkboard3.png") no-repeat left   bottom,
        url("img/bg-chalkboard4.png") no-repeat right  bottom,
        url("img/bg-chalkboard5.png") repeat-x  center top,
        url("img/bg-chalkboard6.png") repeat-y  right  center,
        url("img/bg-chalkboard7.png") repeat-x  center bottom,
        url("img/bg-chalkboard8.png") repeat-y  left   center,
        url("img/bg-chalkboard9.png") repeat    center center;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
    -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/bg-woodboard1-1.png") no-repeat left   top,
        url("img/bg-woodboard1-2.png") no-repeat right  top,
        url("img/bg-woodboard1-3.png") no-repeat left   bottom,
        url("img/bg-woodboard1-4.png") no-repeat right  bottom,
        url("img/bg-woodboard1-5.png") repeat-x  center top,
        url("img/bg-woodboard1-6.png") repeat-y  right  center,
        url("img/bg-woodboard1-7.png") repeat-x  center bottom,
        url("img/bg-woodboard1-8.png") repeat-y  left   center,
        url("img/bg-woodboard1-9.png") repeat    center center;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
    -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/bg-woodframe1-1.png") no-repeat left   top,
        url("img/bg-woodframe1-2.png") no-repeat right  top,
        url("img/bg-woodframe1-3.png") no-repeat left   bottom,
        url("img/bg-woodframe1-4.png") no-repeat right  bottom,
        url("img/bg-woodframe1-5.png") repeat-x  center top,
        url("img/bg-woodframe1-6.png") repeat-y  right  center,
        url("img/bg-woodframe1-7.png") repeat-x  center bottom,
        url("img/bg-woodframe1-8.png") repeat-y  left   center,
        url("img/bg-woodframe1-9.png") repeat    center center;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
    -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/bg-marker-p1.png") no-repeat left   top,
        url("img/bg-marker-p2.png") no-repeat right  top,
        url("img/bg-marker-p3.png") no-repeat left   bottom,
        url("img/bg-marker-p4.png") no-repeat right  bottom,
        url("img/bg-marker-p5.png") repeat-x  center top,
        url("img/bg-marker-p6.png") repeat-y  right  center,
        url("img/bg-marker-p7.png") repeat-x  center bottom,
        url("img/bg-marker-p8.png") repeat-y  left   center,
        url("img/bg-marker-p9.png") repeat    center center;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
    -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/bg-marker-y1.png") no-repeat left   top,
        url("img/bg-marker-y2.png") no-repeat right  top,
        url("img/bg-marker-y3.png") no-repeat left   bottom,
        url("img/bg-marker-y4.png") no-repeat right  bottom,
        url("img/bg-marker-y5.png") repeat-x  center top,
        url("img/bg-marker-y6.png") repeat-y  right  center,
        url("img/bg-marker-y7.png") repeat-x  center bottom,
        url("img/bg-marker-y8.png") repeat-y  left   center,
        url("img/bg-marker-y9.png") repeat    center center;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
    -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/bg-marker-g1.png") no-repeat left   top,
        url("img/bg-marker-g2.png") no-repeat right  top,
        url("img/bg-marker-g3.png") no-repeat left   bottom,
        url("img/bg-marker-g4.png") no-repeat right  bottom,
        url("img/bg-marker-g5.png") repeat-x  center top,
        url("img/bg-marker-g6.png") repeat-y  right  center,
        url("img/bg-marker-g7.png") repeat-x  center bottom,
        url("img/bg-marker-g8.png") repeat-y  left   center,
        url("img/bg-marker-g9.png") repeat    center center;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
    -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/bg-marker-b1.png") no-repeat left   top,
        url("img/bg-marker-b2.png") no-repeat right  top,
        url("img/bg-marker-b3.png") no-repeat left   bottom,
        url("img/bg-marker-b4.png") no-repeat right  bottom,
        url("img/bg-marker-b5.png") repeat-x  center top,
        url("img/bg-marker-b6.png") repeat-y  right  center,
        url("img/bg-marker-b7.png") repeat-x  center bottom,
        url("img/bg-marker-b8.png") repeat-y  left   center,
        url("img/bg-marker-b9.png") repeat    center center;
    /*IE6 IE7 IE8 */
    behavior: url("./PIE.htc");
    -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; }

[class^="title-"] {
    position: relative;
    margin:1em auto .8em;
    font-weight: bold;
    font-size: 18px;
    font-size: 1.39rem;
    line-height: 1.33;
}

[class^="title-"]:before {
    position: absolute;
    top: -10px;
    width: 84px;
    height: 44px;
    background-repeat: no-repeat;
    content: "";
}

.title-check:before     { background-image: url("img/ill-badge-check.png") }
.title-point:before     { background-image: url("img/ill-badge-point.png") }
.title-kensho:before    { background-image: url("img/ill-badge-kensho.png") }
.title-kuchikomi:before { background-image: url("img/ill-badge-kuchikomi.png") }
.title-chumoku:before   { background-image: url("img/ill-badge-chumoku.png") }
.title-riyuu:before     { background-image: url("img/ill-badge-riyuu.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 [class^="title-"] {
    padding: 0 55px 0 0;
}

.ib-left [class^="title-"]: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 [class^="title-"] {
    padding: 0 0 0 55px;
}

.ib-right [class^="title-"]:before {
    left: -36px;
}



/* ====================================================
   追加スタイル（プラグイン独自）
   ==================================================== */

/* 2カラム */
.re-column2 { display: flex; gap: 20px; margin-bottom: 20px; }
.re-col2-left, .re-col2-right { flex: 1; }
@media (max-width: 600px) {
    .re-column2 { flex-direction: column; }
}

/* 3カラム */
.re-column3 { display: flex; gap: 20px; margin-bottom: 20px; }
.re-col3-item { flex: 1; }
@media (max-width: 600px) {
    .re-column3 { flex-direction: column; }
}

/* 4カラム */
.re-column4 { display: flex; gap: 15px; margin-bottom: 20px; }
.re-col4-item { flex: 1; }
@media (max-width: 600px) {
    .re-column4 { flex-wrap: wrap; }
    .re-col4-item { flex: 0 0 48%; }
}

/* FAQ */
.faq-q { display: flex; align-items: flex-start; padding: 12px 15px; background: #f5f5f5; margin-bottom: 0; }
.faq-a { display: flex; align-items: flex-start; padding: 12px 15px; margin-bottom: 20px; }
.faq-q-icon, .faq-a-icon { flex-shrink: 0; margin-right: 10px; }
.faq-q-icon img, .faq-a-icon img { width: 30px; height: 30px; }
.faq-q-text, .faq-a-text { flex: 1; line-height: 1.6; }

/* 矢印リンク */
.right-link { display: inline-block; text-decoration: none; margin: 3px 0; }
.right-link-icon { width: 12px; height: 12px; margin-right: 5px; vertical-align: middle; }

/* イラスト */
.illust { max-width: 100%; height: auto; }
.ill-align-left { display: block; margin: 0 auto 10px 0; }
.ill-align-center { display: block; margin: 0 auto 10px; }
.ill-align-right { display: block; margin: 0 0 10px auto; }

/* サービス終了 */
.service-end {
    display: inline-block;
    padding: 3px 12px;
    background: #c33;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
}

/* 装飾背景 deco_bg */
.deco_bg { margin: 0 auto 20px; padding: 20px; background-size: 100% 100%; background-repeat: no-repeat; }

/* ====================================================
   ジャンルナビゲーション（サイドバー）
   ==================================================== */
.genre-nav { display: flex; flex-direction: column; gap: 8px; }
.genre-nav a {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 6px;
    text-decoration: none !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.genre-nav a::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
    pointer-events: none;
}
.genre-nav a::after {
    content: '▶';
    margin-left: auto;
    font-size: 12px;
    opacity: 0.7;
    transition: transform 0.3s, opacity 0.3s;
}
.genre-nav a:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
}
.genre-nav a:hover::after {
    transform: translateX(4px);
    opacity: 1;
}
.genre-nav .gn-mmo    { background: linear-gradient(135deg, #c0392b, #e74c3c); }
.genre-nav .gn-fps    { background: linear-gradient(135deg, #2c3e99, #3b5fc0); }
.genre-nav .gn-action { background: linear-gradient(135deg, #8e24aa, #ba68c8); }
.genre-nav .gn-card   { background: linear-gradient(135deg, #c89000, #f5b800); }
.genre-nav .gn-slg    { background: linear-gradient(135deg, #1b8a3e, #43a047); }
.genre-nav .gn-browser{ background: linear-gradient(135deg, #00838f, #26c6da); }
.genre-nav a .gn-icon {
    width: 28px; height: 28px;
    margin-right: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.2);
    border-radius: 6px;
    font-size: 16px;
    flex-shrink: 0;
}