/* == リボン見出し（モバイル用設定） == */
.ribbon-black, .ribbon-red, .ribbon-blue, .ribbon-green, .ribbon-orange {
    margin: 0px 0px 30px -26px;
    padding: 15px 0px 15px 20px;
    text-align:center;
}

.container_oc .ribbon-black, .container_oc .ribbon-red, .container_oc .ribbon-blue, .container_oc .ribbon-green, .container_oc .ribbon-orange {
    margin: 0px -26px 30px -26px;
}

@media screen and (max-width: 767px) {
    .ribbon-black, .ribbon-red, .ribbon-blue, .ribbon-green, .ribbon-orange {
        margin: 0px -26px 30px -26px;
    }
}

/* == リボン見出し（黒） == */
.ribbon-black {
    position: relative;
    color: #fff;
    background: #363636;
    font-size: 26px;
    line-height: 1.2;
    box-shadow: 0 1px 3px #777;
}

/*
.ribbon-black:after, .ribbon-black:before {
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #222222;
}
*/

.ribbon-black:after {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #222222;
    left: 0;
    border-right: 5px solid #222222;
}

.container_oc .ribbon-black:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #222222;
    right: 0;
    border-left: 5px solid #222222;
}

/* == リボン見出し（赤） == */
.ribbon-red {
    position: relative;
    color: #fff;
    background: #da4f49;
    font-size: 26px;
    line-height: 1.2;
    box-shadow: 0 1px 3px #777;
}

/*
.ribbon-red:after {
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #bd362f;
}

.ribbon-red:after {
left: 0;
border-right: 5px solid #bd362f;
}
*/

.ribbon-red:after {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #bd362f;
    left: 0;
    border-right: 5px solid #bd362f;
}

.container_oc .ribbon-red:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #bd362f;
    right: 0;
    border-left: 5px solid #bd362f;
}


/* == リボン見出し（青） == */
.ribbon-blue {
    position: relative;
    color: #fff;
    background: #006dcc;
    font-size: 26px;
    line-height: 1.2;
    box-shadow: 0 1px 3px #777;
}

/*
.ribbon-blue:after, .ribbon-blue:before {
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #0044cc;
}
*/

.ribbon-blue:after {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #0044cc;
    left: 0;
    border-right: 5px solid #0044cc;
}

.container_oc .ribbon-blue:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #0044cc;
    right: 0;
    border-left: 5px solid #0044cc;
}

/* == リボン見出し（緑） == */
.ribbon-green {
    position: relative;
    color: #fff;
    background: #5bb75b;
    font-size: 26px;
    line-height: 1.2;
    box-shadow: 0 1px 3px #777;
}

/*
.ribbon-green:after, .ribbon-green:before {
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #51a351;
}
*/

.ribbon-green:after {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #51a351;
    left: 0;
    border-right: 5px solid #51a351;
}

.container_oc .ribbon-green:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #51a351;
    right: 0;
    border-left: 5px solid #51a351;
}

/* == リボン見出し（橙） == */
.ribbon-orange {
    position: relative;
    color: #fff;
    background: #faa732;
    font-size: 26px;
    line-height: 1.2;
    box-shadow: 0 1px 3px #777;
}

/*
.ribbon-orange:after, .ribbon-orange:before {
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #f89406;
}
*/

.ribbon-orange:after {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #f89406;
    left: 0;
    border-right: 5px solid #f89406;
}

.container_oc .ribbon-orange:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #f89406;
    right: 0;
    border-left: 5px solid #f89406;
}

/* == 吹出し見出し（黒） == */
.fukidashi-black {
    position: relative;
    color: #fff;
    background: #363636;
    font-size: 24px;
    line-height: 1.2;
    border: 2px solid #363636;
    margin: 30px 0px 30px 0px;
    padding: 15px 5px 12px 10px;
    border-radius: 3px;
}

.fukidashi-black:after, .fukidashi-black:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
}

.fukidashi-black:after {
    left: 33px;
    border: 11px solid transparent;
    border-top: 11px solid #363636;
}

.fukidashi-black:before {
    left: 30px;
    border: 14px solid transparent;
    border-top: 14px solid #363636;
}

/* == 吹出し見出し（赤） == */
.fukidashi-red {
    position: relative;
    color: #fff;
    background: #da4f49;
    font-size: 24px;
    line-height: 1.2;
    border: 2px solid #da4f49;
    margin: 30px 0px 30px 0px;
    padding: 15px 5px 12px 10px;
    border-radius: 3px;
}

.fukidashi-red:after, .fukidashi-red:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
}

.fukidashi-red:after {
    left: 33px;
    border: 11px solid transparent;
    border-top: 11px solid #da4f49;
}

.fukidashi-red:before {
    left: 30px;
    border: 14px solid transparent;
    border-top: 14px solid #da4f49;
}

/* == 吹出し見出し（青） == */
.fukidashi-blue {
    position: relative;
    color: #fff;
    background: #006dcc;
    font-size: 24px;
    line-height: 1.2;
    border: 2px solid #006dcc;
    margin: 30px 0px 30px 0px;
    padding: 15px 5px 12px 10px;
    border-radius: 3px;
}

.fukidashi-blue:after, .fukidashi-blue:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
}

.fukidashi-blue:after {
    left: 33px;
    border: 11px solid transparent;
    border-top: 11px solid #006dcc;
}

.fukidashi-blue:before {
    left: 30px;
    border: 14px solid transparent;
    border-top: 14px solid #006dcc;
}

/* == 吹出し見出し（緑） == */
.fukidashi-green {
    position: relative;
    color: #fff;
    background: #5bb75b;
    font-size: 24px;
    line-height: 1.2;
    border: 2px solid #5bb75b;
    margin: 30px 0px 30px 0px;
    padding: 15px 5px 12px 10px;
    border-radius: 3px;
}

.fukidashi-green:after, .fukidashi-green:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
}

.fukidashi-green:after {
    left: 33px;
    border: 11px solid transparent;
    border-top: 11px solid #5bb75b;
}

.fukidashi-green:before {
    left: 30px;
    border: 14px solid transparent;
    border-top: 14px solid #5bb75b;
}

/* == 吹出し見出し（橙） == */
.fukidashi-orange {
    position: relative;
    color: #fff;
    background: #faa732;
    font-size: 24px;
    line-height: 1.2;
    border: 2px solid #faa732;
    margin: 30px 0px 30px 0px;
    padding: 15px 5px 12px 10px;
    border-radius: 3px;
}

.fukidashi-orange:after, .fukidashi-orange:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
}

.fukidashi-orange:after {
    left: 33px;
    border: 11px solid transparent;
    border-top: 11px solid #faa732;
}

.fukidashi-orange:before {
    left: 30px;
    border: 14px solid transparent;
    border-top: 14px solid #faa732;
}

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

/* == チェックリスト（黒） == */
.checklist-black:before {
    font-family: 'Glyphicons Halflings';
    content: '\e013';
    color: #333;
    margin: 0 3px 0 0;
}

/* == チェックリスト（赤） == */
.checklist-red:before {
    font-family: 'Glyphicons Halflings';
    content: '\e013';
    color: #d25c5a;
    margin: 0 10px 0 0;
}

/* == チェックリスト（青） == */
.checklist-blue:before {
    font-family: 'Glyphicons Halflings';
    content: '\e013';
    color: #468bbf;
    margin: 0 10px 0 0;
}

/* == チェックリスト（緑） == */
.checklist-green:before {
    font-family: 'Glyphicons Halflings';
    content: '\e013';
    color: #88b12b;
    margin: 0 10px 0 0;
}

/* == チェックリスト（橙） == */
.checklist-orange:before {
    font-family: 'Glyphicons Halflings';
    content: '\e013';
    color: #e98106;
    margin: 0 10px 0 0;
}

/* == ボタン（黒） == */
.button-black:before {
    font-family: 'Glyphicons Halflings';
    content: '\e080';
    color: #fff;
    margin: 0 20px 0 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.button-black:hover:before {
    color: #666666;
    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
}

.button-black, .button-black a, .button-black a:visited, .button-black:active {
    text-align: center;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    display: block;
    border: 1px solid #222222;
    background: #363636;
    background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222));
    background: -webkit-linear-gradient(top, #444444, #222222);
    background: -moz-linear-gradient(top, #444444, #222222);
    background: -ms-linear-gradient(top, #444444, #222222);
    background: -o-linear-gradient(top, #444444, #222222);
    padding: 15px 22px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    -webkit-box-shadow: rgba(180, 180, 180, 0.4) 0 1px 0;
    -moz-box-shadow: rgba(180, 180, 180, 0.4) 0 1px 0;
    box-shadow: rgba(180, 180, 180, 0.4) 0 1px 0;
    text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
    color: #fff!important;
    font-size: 24px;
    text-decoration: none;
    vertical-align: middle;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    overflow: hidden;
    max-width:450px;
}

.button-black:hover {
    border-color: #444444;
    background: #d5d5d5;
    background: -webkit-gradient(linear, left top, left bottom, from(#d7d7d7), to(white));
    background: -webkit-linear-gradient(top, #d7d7d7, white);
    background: -moz-linear-gradient(top, #d7d7d7, white);
    background: -ms-linear-gradient(top, #d7d7d7, white);
    background: -o-linear-gradient(top, #d7d7d7, white);
    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
    color: #666666!important;
}

/* == ボタン（赤） == */
.button-red:before {
    font-family: 'Glyphicons Halflings';
    content: '\e080';
    color: #fff;
    margin: 0 20px 0 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.button-red:hover:before {
    color: #da4f49;
    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;

}

.button-red, .button-red a, .button-red a:visited, .button-red:active {
    text-align: center;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    display: block;
    border: 1px solid #da4f49;
    background: #da4f49;
    background: -webkit-gradient(linear, left top, left bottom, from(#ee5f5b), to(#bd362f));
    background: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
    background: -moz-linear-gradient(top, #ee5f5b, #bd362f);
    background: -ms-linear-gradient(top, #ee5f5b, #bd362f);
    background: -o-linear-gradient(top, #ee5f5b, #bd362f);
    padding: 15px 22px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    -webkit-box-shadow: rgba(180, 180, 180, 0.4) 0 1px 0;
    -moz-box-shadow: rgba(180, 180, 180, 0.4) 0 1px 0;
    box-shadow: rgba(180, 180, 180, 0.4) 0 1px 0;
    text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
    color: #fff!important;
    font-size: 24px;
    text-decoration: none;
    vertical-align: middle;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    overflow: hidden;
    max-width:450px;
}

.button-red:hover {
    border-color: #bd362f;
    background: #bd362f;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffe9e9), to(white));
    background: -webkit-linear-gradient(top, #ffe9e9, white);
    background: -moz-linear-gradient(top, #ffe9e9, white);
    background: -ms-linear-gradient(top, #ffe9e9, white);
    background: -o-linear-gradient(top, #ffe9e9, white);
    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
    color: #da4f49!important;
}

/* == ボタン（青） == */
.button-blue:before {
    font-family: 'Glyphicons Halflings';
    content: '\e080';
    color: #fff;
    margin: 0 20px 0 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.button-blue:hover:before {
    color: #006dcc;
    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
}

.button-blue, .button-blue a, .button-blue a:visited, .button-blue:active {
    text-align: center;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    display: block;
    border: 1px solid #0044cc;
    background: #006dcc;
    background: -webkit-gradient(linear, left top, left bottom, from(#0088cc), to(#0044cc));
    background: -webkit-linear-gradient(top, #0088cc, #0044cc);
    background: -moz-linear-gradient(top, #0088cc, #0044cc);
    background: -ms-linear-gradient(top, #0088cc, #0044cc);
    background: -o-linear-gradient(top, #0088cc, #0044cc);
    padding: 15px 22px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    -webkit-box-shadow: rgba(180, 180, 180, 0.4) 0 1px 0;
    -moz-box-shadow: rgba(180, 180, 180, 0.4) 0 1px 0;
    box-shadow: rgba(180, 180, 180, 0.4) 0 1px 0;
    text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
    color: #fff!important;
    font-size: 24px;
    text-decoration: none;
    vertical-align: middle;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    overflow: hidden;
    max-width:450px;
}

.button-blue:hover {
    border-color: #9fc2dd;
    background: #ffe9e9;
    background: -webkit-gradient(linear, left top, left bottom, from(#dbe9f3), to(white));
    background: -webkit-linear-gradient(top, #dbe9f3, white);
    background: -moz-linear-gradient(top, #dbe9f3, white);
    background: -ms-linear-gradient(top, #dbe9f3, white);
    background: -o-linear-gradient(top, #dbe9f3, white);
    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
    color: #006dcc!important;
}

/* == ボタン（緑） == */
.button-green:before {
    font-family: 'Glyphicons Halflings';
    content: '\e080';
    color: #fff;
    margin: 0 20px 0 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.button-green:hover:before {
    color: #5bb75b;
    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
}

.button-green, .button-green a, .button-green a:visited, .button-green:active {
    text-align: center;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    display: block;
    border: 1px solid #51a351;
    background: #5bb75b;
    background: -webkit-gradient(linear, left top, left bottom, from(#62c462), to(#51a351));
    background: -webkit-linear-gradient(top, #62c462, #51a351);
    background: -moz-linear-gradient(top, #62c462, #51a351);
    background: -ms-linear-gradient(top, #62c462, #51a351);
    background: -o-linear-gradient(top, #62c462, #51a351);
    padding: 15px 22px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    -webkit-box-shadow: rgba(180, 180, 180, 0.4) 0 1px 0;
    -moz-box-shadow: rgba(180, 180, 180, 0.4) 0 1px 0;
    box-shadow: rgba(180, 180, 180, 0.4) 0 1px 0;
    text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
    color: #fff!important;
    font-size: 24px;
    text-decoration: none;
    vertical-align: middle;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    overflow: hidden;
    max-width:450px;
}

.button-green:hover {
    border-color: #c0da66;
    background: #e9f2d2;
    background: -webkit-gradient(linear, left top, left bottom, from(#e9f2d2), to(white));
    background: -webkit-linear-gradient(top, #e9f2d2, white);
    background: -moz-linear-gradient(top, #e9f2d2, white);
    background: -ms-linear-gradient(top, #e9f2d2, white);
    background: -o-linear-gradient(top, #e9f2d2, white);
    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
    color: #5bb75b!important;
}

/* == ボタン（橙） == */
.button-orange:before {
    font-family: 'Glyphicons Halflings';
    content: '\e080';
    color: #fff;
    margin: 0 20px 0 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}

.button-orange:hover:before {
    color: #faa732;
    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
}

.button-orange, .button-orange a, .button-orange a:visited, .button-orange:active {
    text-align: center;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    display: block;
    border: 1px solid #f89406;
    background: #faa732;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbb450), to(#f89406));
    background: -webkit-linear-gradient(top, #fbb450, #f89406);
    background: -moz-linear-gradient(top, #fbb450, #f89406);
    background: -ms-linear-gradient(top, #fbb450, #f89406);
    background: -o-linear-gradient(top, #fbb450, #f89406);
    padding: 15px 22px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    -webkit-box-shadow: rgba(180, 180, 180, 0.4) 0 1px 0;
    -moz-box-shadow: rgba(180, 180, 180, 0.4) 0 1px 0;
    box-shadow: rgba(180, 180, 180, 0.4) 0 1px 0;
    text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
    color: #fff!important;
    font-size: 24px;
    text-decoration: none;
    vertical-align: middle;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    overflow: hidden;
    max-width:450px;
}

.button-orange:hover {
    border-color: #ebb459;
    background: #f7c36e;
    background: -webkit-gradient(linear, left top, left bottom, from(#f7d9a9), to(white));
    background: -webkit-linear-gradient(top, #f7d9a9, white);
    background: -moz-linear-gradient(top, #f7d9a9, white);
    background: -ms-linear-gradient(top, #f7d9a9, white);
    background: -o-linear-gradient(top, #f7d9a9, white);
    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
    color: #faa732!important;
}


.checklistbox {
    padding: 20px;
    margin: 2em 20px;
    border: 1px solid #999;
    white-space:normal;
    /*    line-height: 1;*/
}

.checklistbox li{
    list-style: none;
    border-bottom: 1px dotted #999;
}

.checklistbox br{
    display:none;
}

.textbox-black {
    border: 1px solid #363636;
    background-color: #e6e6e6;
    margin: 2em 0;
    padding: 20px;
    color: #363636;
}

.textbox-red {
    border: 1px solid #da4f49;
    background-color: #f6e4e3;
    margin: 2em 0;
    padding: 20px;
    color: #da4f49;
}

.textbox-blue {
    border: 1px solid #006dcc;
    background-color: #e3eef6;
    margin: 2em 0;
    padding: 20px;
    color: #006dcc;
}

.textbox-green {
    border: 1px solid #5bb75b;
    background-color: #f3f8e1;
    margin: 2em 0;
    padding: 20px;
    color: #5bb75b;
}

.textbox-orange {
    border: 1px solid #faa732;
    background-color: #fef2dd;
    margin: 2em 0;
    padding: 20px;
    color: #faa732;
}


.optinform{
    max-width:720px;
    background-color:#f5f5f5;
    padding: 5px 120px 20px 120px;
    border-radius: 10px;
    text-align:center;
    margin-bottom: 30px;
}

.optinform br{
    display:none;
}


.optinform dl {
    width:480px;
    margin-bottom: 0px;
}

.optinform dt {
    float:left;
    clear:left;
    width:160px;
    height:56px;
    padding-top:13px;
    text-align: left;
}

.optinform dd {
    float:left;
    width:320px;
}

.optinform input[type=text] {
    padding: 10px;
    border: solid 1px #dcdcdc;
    transition: box-shadow 0.3s, border 0.3s;
    margin-bottom: 10px;
    width:320px;
    background-color:#fff;
}

.optinforminput[type=text]:focus {
    border-color:#333; 
}


.optinform input[type="text"]:focus,
.optinform input[type="text"].focus {
    border: solid 1px #707070;
    box-shadow: 0 0 5px 1px #969696;
}

.optinform input[type=submit] {
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    padding: 10px;
    margin: 10px;
    background: #08C;
    /* Font styles */
    color: white;
    font-weight: bold;
    text-decoration: none;
    width:480px;
    margin:10px auto 0px auto;
}

.optinform-black input[type=submit] {
    background: #363636;
}

.optinform-red input[type=submit] {
    background: #da4f49;
}

.optinform-blue input[type=submit] {
    background: #006dcc;
}

.optinform-green input[type=submit] {
    background: #5bb75b;
}

.optinform-orange input[type=submit] {
    background: #faa732;
}



@media screen and (max-width: 767px) {

    .optinform{
        width:100%;
        padding: 5px 30px 20px 30px;
    }

    .optinform dl {
        width:100%;
    }

    .optinform dt{
        width:100%;
        height:40px;
    }

    .optinform dd {
        width:100%;
    }

    .optinform input[type=text] {
        width:100%;
    }

    .optinform input[type=submit] {
        width:100%;
    }
}