@charset "euc-jp";

/*

    再利用可能なコンポーネント
   
*/

/* ----------------------------------------------------------
    アイコン / .ico
------------------------------------------------------------- */
@font-face {
    font-family: 'starserver';
    font-style: normal;
    font-weight: normal;
    src: url(fonts/starserver.eot?5noji3);
    src: url(fonts/starserver.eot?5noji3#iefix) format('embedded-opentype'),
        url(fonts/starserver.ttf?5noji3) format('truetype'),
        url(fonts/starserver.woff?5noji3) format('woff'),
        url(fonts/starserver.svg?5noji3#starserver) format('svg');
}

.ico {
    font-family: 'starserver' !important;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    vertical-align: middle;
    text-transform: none;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ico_info:before { content: "\e948"; }
.ico_person:before { content: "\e949"; }
.ico_owlchan:before { content: "\e946"; }
.ico_arrow-down:before { content: "\e900"; }
.ico_arrow-left:before { content: "\e901"; }
.ico_arrow-right:before { content: "\e902"; }
.ico_arrow-up:before { content: "\e903"; }
.ico_balloon:before { content: "\e904"; }
.ico_balloon-a:before { content: "\e905"; }
.ico_balloon-q:before { content: "\e906"; }
.ico_balloon_question:before { content: "\e942"; }
.ico_book:before { content: "\e907"; }
.ico_book2:before { content: "\e943"; }
.ico_check:before { content: "\e908"; }
.ico_chevron-down:before { content: "\e909"; }
.ico_chevron-left:before { content: "\e90a"; }
.ico_chevron-right:before { content: "\e90b"; }
.ico_chevron-up:before { content: "\e90c"; }
.ico_circle:before { content: "\e90d"; }
.ico_circle-fill:before { content: "\e90e"; }
.ico_circle-arrow-down:before { content: "\e90f"; }
.ico_circle-arrow-left:before { content: "\e910"; }
.ico_circle-arrow-right:before { content: "\e911"; }
.ico_circle-arrow-up:before { content: "\e912"; }
.ico_circle-check:before { content: "\e913"; }
.ico_circle-double:before { content: "\e914"; }
.ico_circle-down:before { content: "\e915"; }
.ico_circle-left:before { content: "\e916"; }
.ico_circle-right:before { content: "\e917"; }
.ico_circle-up:before { content: "\e918"; }
.ico_cross:before { content: "\e919"; }
.ico_display:before { content: "\e91a"; }
.ico_email:before { content: "\e91b"; }
.ico_exclamation:before { content: "\e91c"; }
.ico_exclamation-fill:before { content: "\e91d"; }
.ico_gear:before { content: "\e91e"; }
.ico_globe:before { content: "\e91f"; }
.ico_hierarchy:before { content: "\e920"; }
.ico_home:before { content: "\e921"; }
.ico_home2:before { content: "\e947"; }
.ico_lock:before { content: "\e922"; }
.ico_safety:before { content: "\e923"; }
.ico_magnifier:before { content: "\e924"; }
.ico_menu:before { content: "\e925"; }
.ico_list:before { content: "\e926"; }
.ico_plus:before { content: "\e927"; }
.ico_minus:before { content: "\e928"; }
.ico_mouse:before { content: "\e929"; }
.ico_new-window:before { content: "\e92a"; }
.ico_operator:before { content: "\e92b"; }
.ico_pencil:before { content: "\e92c"; }
.ico_pencil2:before { content: "\e944"; }
.ico_phone:before { content: "\e92d"; }
.ico_q:before { content: "\e92e"; }
.ico_refresh:before { content: "\e92f"; }
.ico_server:before { content: "\e930"; }
.ico_signature:before { content: "\e931"; }
.ico_sitemap:before { content: "\e932"; }
.ico_smartphone:before { content: "\e933"; }
.ico_square:before { content: "\e934"; }
.ico_square-fill:before { content: "\e935"; }
.ico_square-q:before { content: "\e936"; }
.ico_square-a:before { content: "\e937"; }
.ico_square-exclamation:before { content: "\e938"; }
.ico_square-question:before { content: "\e939"; }
.ico_tag:before { content: "\e93a"; }
.ico_triangle-down:before { content: "\e93b"; }
.ico_triangle-left:before { content: "\e93c"; }
.ico_triangle-right:before { content: "\e93d"; }
.ico_triangle-up:before { content: "\e93e"; }
.ico_unlock:before { content: "\e93f"; }
.ico_window:before { content: "\e940"; }
.ico_wordpress:before { content: "\e941"; }
.ico_agreement:before { content: "\e945"; }

/* ----------------------------------------------------------
    画像アイコン / .imgico
------------------------------------------------------------- */
.imgico {
    display: inline-block;
    background: url(../img/common/icons.png) 0 0 no-repeat;
    line-height: 0;
    vertical-align: middle;
}
.imgico_starserver {
    width: 22px;
    height: 22px;
    background-position: 0 0;
}
.imgico_stardomain {
    width: 22px;
    height: 22px;
    background-position: 0 -30px;
}
.imgico_sslbox {
    width: 22px;
    height: 22px;
    background-position: 0 -60px;
}
.imgico_imgtalk {
    width: 22px;
    height: 22px;
    background-position: 0 -90px;
}
.imgico_starserverfree {
    width: 22px;
    height: 22px;
    background-position: 0 -143px;
}
.imgico_question {
    width: 15px;
    height: 15px;
    background-position: 0 -120px;
}

/* ----------------------------------------------------------
    オールSSDアイコン / .ssd-ico
------------------------------------------------------------- */
.ssd-ico {
    display: inline-block;
    vertical-align: baseline;
}

/* ----------------------------------------------------------
    ボタン / .btn
------------------------------------------------------------- */
.btn {
    cursor: pointer;
    display: inline-block;
    margin: 0 0 5px;
    padding: 8px 13px;
    border: none;
    border-radius: 3px;
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    -webkit-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
}
a.btn { text-decoration: none !important; }

/* PC */
@media only screen and (min-width: 940px) {
    .btn:hover {
        -webkit-transform: translateY(2px);
        -ms-transform: translateY(2px);
        transform: translateY(2px);
    }
}

.btn_label {
    padding: 3px 5px;
    background: #fff;
    font-size: 10px;
    vertical-align: middle;
}

/* デフォルト - 青罫+黒文字+青アイコン */
.btn_primary {
    background: #fff;
    border: 1px solid #209dd9;
    color: #333 !important;
}
.btn_primary:hover { background: #eaf6fc; }
.btn_primary .ico { color: #209dd9; }

/* ボタン大 */
.btn_l {
    padding: 10px 15px;
    font-size: 18px;
}
.btn_l .btn_label { font-size: 12px; }

/* ボタンさらに大 */
.btn_xl {
    padding: 15px 20px 10px;
    border-radius: 4px;
    font-size: 24px;
}
.btn_xl .btn_label { font-size: 14px; }

/* 青ボタン - 青+白文字 */
.btn_blue {
    background: #209dd9;
    border-bottom: 1px solid #0f88c3;
    color: #fff !important;
    font-weight: bold;
}
.btn_blue:hover {
    background: #0c89c5;
    border-bottom: 1px solid #0074af;
}
.btn_blue .ico { color: #fff; }
.btn_blue_label { color: #209dd9; }

/* 赤ボタン - 赤+白文字 */
.btn_red {
    background: #ff4e5b;
    border-bottom: 1px solid #d22f3b;
    color: #fff !important;
    font-weight: bold;
}
.btn_red:hover {
    background: #f03f4c;
    border-bottom: 1px solid #c3202c;
}
.btn_red .ico { color: #fff; }
.btn_red_label { color: #ff4e5b; }

/* 白ボタン - 白+黒文字 */
.btn_white {
    background: #fff;
    color: #333 !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.btn_white:hover { background: #f8f8f8; }
.btn_white .ico { color: #209dd9; }

/* オレンジボタン - オレンジ+白文字 */
.btn_orange {
    background: #ffa200;
    border-bottom: 1px solid #e87e00;
    color: #fff !important;
    font-weight: bold;
}
.btn_orange:hover {
    background: #ff8a00;
    border-bottom: 1px solid #e36b00;
}
.btn_orange .ico { color: #fff; }
.btn_orange .btn_label { color: #ff8a00; }

/* 緑ボタン - 緑+白文字 */
.btn_green {
    background: #00b8bd;
    border-bottom: 1px solid #009296;
    color: #fff !important;
    font-weight: bold;
}
.btn_green:hover {
    background: #00a0a6;
    border-bottom: 1px solid #007478;
}
.btn_green .ico { color: #fff; }
.btn_green .btn_label { color: #00b8bd; }

/* エコノミープランカラーのボタン */
.btn_economy {
    background: #ffc000;
    border-bottom: 1px solid #ffa800;
    color: #fff !important;
    font-weight: bold;
}
.btn_economy:hover {
    background: #ffae00;
    border-bottom: 1px solid #ff9600;
}
.btn_economy .ico { color: #fff; }

/* ライトプランカラーのボタン */
.btn_lite {
    background: #ffa800;
    border-bottom: 1px solid #ff9000;
    color: #fff !important;
    font-weight: bold;
}
.btn_lite:hover {
    background: #ff9600;
    border-bottom: 1px solid #ff7f00;
}
.btn_lite .ico { color: #fff; }

/* スタンダードプランカラーのボタン */
.btn_standard {
    background: #ff9000;
    border-bottom: 1px solid #f07700;
    color: #fff !important;
    font-weight: bold;
}
.btn_standard:hover {
    background: #ff7f00;
    border-bottom: 1px solid #f06600;
}
.btn_standard .ico { color: #fff; }

/* プレミアムプランカラーのボタン */
.btn_premium {
    background: #ff6c00;
    border-bottom: 1px solid #d25900;
    color: #fff !important;
    font-weight: bold;
}
.btn_premium:hover {
    background: #ff5b00;
    border-bottom: 1px solid #d24b00;
}
.btn_premium .ico { color: #fff; }

/* WPプランカラーのボタン */
.btn_business {
    background: #175caa;
    border-bottom: 1px solid #0d488b;
    color: #fff !important;
    font-weight: bold;
}
.btn_business:hover {
    background: #155298;
    border-bottom: 1px solid #0c407c;
}
.btn_business .ico { color: #fff; }

/* ----------------------------------------------------------
    幅、余白確保ボックス / .holder-*
------------------------------------------------------------- */
/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .holder-s,
    .holder-sm, 
    .holder-sl,
    .holder-sml {
        width: 93.75%;
        margin-left: auto;
        margin-right: auto;
    }
}
/* Tab */
@media only screen and (min-width: 768px) and (max-width: 939px) {
    .holder-m,
    .holder-sm, 
    .holder-ml,
    .holder-sml {
        width: 94.79%;
        margin-left: auto;
        margin-right: auto;
    }
}
/* PC */
@media only screen and (min-width: 940px) {
    .holder-l,
    .holder-sl,
    .holder-ml,
    .holder-sml {
        width: 940px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ----------------------------------------------------------
    テーブル / .table
------------------------------------------------------------- */
.table {
    width: 100%;
    margin: 0 0 20px;
    background: #fff;
    border-bottom: 1px solid #ddd;
}
.table caption {
    padding: 10px 15px;
    background: #209dd9;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
.table th,
.table td {
    padding: 10px 15px;
    vertical-align: middle;
}
.table td {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}
.table td:last-child { border-right: none; }
.table th > :last-child,
.table td > :last-child { margin-bottom: 0; }
.table thead th {
    background: #209dd9;
    border-right: 1px solid #1b90c8;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
.table thead th:last-child { border: none; }

.table tbody:first-child { border-top: 1px solid #ddd; }

.table tbody th {
    background: #dbedf6;
    border-bottom: 1px solid #bcd5e2;
}
.table tbody:not(.company_tb) tr:nth-child(even) th { background: #cce0ea; }
.table tbody:not(.company_tb) tr:nth-child(even) td { background: #edf4f7; }

.table .company_tb th {
    width: 27%;
}
.table_use-caption thead th {
    background: #4bb3e5;
    border-right: 1px solid #3ca3d4;
}
.table_use-caption thead th:last-child { border: none; }
.table table{ font-size: 14px; }

.table_tac th,
.table_tac td { text-align: center; }

.table_tar th,
.table_tar td { text-align: right; }

.table caption a,
.table thead th a { color: #fff; }

/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .table_responsive { width: 100%; }
    .table_responsive th,
    .table_responsive td {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        width: 100%;
        text-align: center;
    }
    .table_responsive th {
        padding: 10px;
        background-position: 0 100%;
    }
    .table_responsive td { border-bottom: 1px solid #ddd; }
    .table_responsive td:last-child { border-bottom: none; }
    .table tbody tr:nth-child(even) th { background: #dbedf6; }
    .table tbody tr:nth-child(even) td { background: #fff; }
}

/* ----------------------------------------------------------
    レスポンシブテーブル / .primary-table, .secondly-table
------------------------------------------------------------- */
.no-js .primary-table-ml,
.no-js .primary-table-l { display: table !important; }

/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .primary-table-ml,
    .primary-table-l { display: none; }
    
    .secondly-table-s,
    .secondly-table-sm { margin: 0 0 10px; }
    
    .secondly-table-s caption,
    .secondly-table-s th,
    .secondly-table-s td,
    .secondly-table-sm caption,
    .secondly-table-sm th,
    .secondly-table-sm td { padding: 5px; }
}

/* Tab */
@media only screen and (min-width: 768px) and (max-width: 939px) {
    .primary-table-l { display: none; }
    .secondly-table-s { display: none; }
    
    .secondly-table-sm { margin: 0 0 10px; }
    
    .secondly-table-sm caption,
    .secondly-table-sm th,
    .secondly-table-sm td { padding: 5px; }
}

/* PC */
@media only screen and (min-width: 940px) {
    .secondly-table-s,
    .secondly-table-sm { display: none; }
}

/* ----------------------------------------------------------
    注釈 / .note, note-list
------------------------------------------------------------- */
.note,
.note_x2,
.note_x3,
.note-list > li,
.note-list_x2 > li,
.note-list_x3 > li {
    margin-left: 1em;
    text-indent: -1em;
}
.note_x2,
.note-list_x2 > li {
    margin-left: 2em;
    text-indent: -2em;
}
.note_x3,
.note-list_x3 > li {
    margin-left: 3em;
    text-indent: -3em;
}
.note-list_margin > li { margin-bottom: 10px; }
.note-list_margin > li:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------
    画像付きボックス / .media
------------------------------------------------------------- */
.media { clear: both; }
.media:before, .media:after {
    content: " ";
    display: table;
}
.media:after { clear: both; }
.media { *zoom: 1; }

.media_image {
    float: left;
    margin-right: 15px; 
}
.media_image > img { display: block; }
.media_image_rev {
    float: right;
    margin-left: 15px; 
    margin-right: 0; 
}
.media_body { overflow: hidden; }
.media_body > :last-child { margin-bottom: 0; }

/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .media_image {
        float: none;
        display: block;
        margin: 0 0 10px;
        text-align: center;
    }
    .media_image > img { display: inline; }
    .media_image_rev {
        float: none;
        margin: 0 0 10px;
    }
    .media_body { overflow: visible; }
}

/* ----------------------------------------------------------
    ページタイトル / .ttl
------------------------------------------------------------- */
.ttl {
    position: relative;
    margin: 0 0 20px;
    padding: 17px 15px 17px 57px;
    background: #fff url(../img/common/bg_blue.png) 0 0 repeat;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    font-family: Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
    line-height: 1.2;
}
.ttl:before {
    content: url(../img/common/img_star_small.png);
    position: absolute;
    top: 50%;
    left: 14px;
    display: block;
    width: 34px;
    height: 33px;
    -moz-transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

.ttl_economy,
.ttl_lite,
.ttl_standard,
.ttl_premium,
.ttl_business { padding-left: 60px; }

.ttl_economy:before,
.ttl_lite:before,
.ttl_standard:before,
.ttl_premium:before,
.ttl_business:before {
    left: 9px;
    width: 48px;
    height: 48px;
    -moz-transform: translate(0,-50%) scale(0.8);
    -webkit-transform: translate(0,-50%) scale(0.8);
    -ms-transform: translate(0,-50%) scale(0.8);
    transform: translate(0,-50%) scale(0.8);
}

.ttl_economy:before { content: url(../img/common/img_plan_icon_economy.png); }
.ttl_lite:before { content: url(../img/common/img_plan_icon_lite.png); }
.ttl_standard:before { content: url(../img/common/img_plan_icon_standard.png); }
.ttl_premium:before { content: url(../img/common/img_plan_icon_premium.png); }
.ttl_business:before { content: url(../img/common/img_plan_icon_business.png); }

.ttl_label {
    display: inline-block;
    margin: 3px 10px 3px 0;
    padding: 5px;
    background: rgba(255,255,255,.9);
    color: #1A2E51;
    font-size: 12px;
    vertical-align: top;
}
/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .ttl_label { margin-bottom: 5px; }
}

/* ----------------------------------------------------------
    セクション / .section
------------------------------------------------------------- */
.section { margin: 0 0 40px; }
.section:last-child { margin: 0; }

.section_ttl {
    margin: 0 0 20px;
    padding: 13px 15px;
    background: #edf4f7;
    border-left: 5px solid #209dd9;
    color: #209dd9;
    font-size: 22px;
    font-family: Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}

.section_body {}
.section_body > :last-child { margin-bottom: 0; }

/* ----------------------------------------------------------
    ブロック / .block
------------------------------------------------------------- */
.block { margin: 0 0 30px; }
.block:last-child { margin: 0; }

.block_ttl {
    margin: 0 0 15px;
    padding: 0 15px;
    border-left: 5px solid #7dc9ee;
    font-size: 18px;
    font-weight: bold;
    font-family: Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}

.block_body {}
.block_body > :last-child { margin-bottom: 0; }
/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .block_body { padding: 0; }
}

/* ----------------------------------------------------------
    ボックス / .serial-box, .box
------------------------------------------------------------- */
.serial-box { margin: 0 0 30px 0; }

.box {
    margin: 0 0 20px;
    border: 1px solid #ddd;
}
.serial-box .box {
    margin: 0;
    border-bottom: none;
}
.serial-box .box:last-child { border-bottom: 1px solid #ddd; }

.box_ttl {
    margin: 0;
    padding: 13px;
    background: #edf4f7;
    border-bottom: 1px solid #ddd;
    color: #1A2E51;
    font-weight: bold;
}
.box_ttl:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.box_body {
    padding: 10px 13px 20px;
    background: #fff;
}
.box_body > :last-child { margin-bottom: 0; }

/* ----------------------------------------------------------
    記事 / .article
------------------------------------------------------------- */
.article {
    margin-bottom: 24px;
}

/* ----------------------------------------------------------
    画像フレーム / .img
------------------------------------------------------------- */
.img {
    max-width: 100%;
    border: 1px solid #ddd;
}

/* ----------------------------------------------------------
    リンク / .link
------------------------------------------------------------- */
.link { display: inline-block; }
.link .ico {
    margin: 0 5px;
    color: #209dd9;
}

/* ----------------------------------------------------------
    リスト(デフォルトスタイル) / .ul, .ol
------------------------------------------------------------- */
.ul {
    margin: 0 0 1em 1.5em;
    list-style: disc outside;
}
.ul_margin > li { margin-bottom: 1em; }

.ol {
    margin: 0 0 1em 2em;
    list-style: decimal outside;
}
.ol_lower-roman { list-style-type: lower-roman; }
.ol_margin > li { margin-bottom: 1em; }

/* ----------------------------------------------------------
    リスト(アイコン付き) / .list, list_*
------------------------------------------------------------- */
.list { margin: 0 0 1em 1.5em; }
.list > li { position: relative; }
.list > li li { margin: 0 0 0 13px; }
.list > li:after {
    content: '';
    position: absolute;
    top: .5em;
    left: -1.1em;
    display: block;
}

.list_margin > li { margin-bottom: 1em; }

.list_arrow-down > li:after {
    top: .6em;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #209dd9;
}

.list_arrow-up > li:after {
    top: .6em;
    width: 0;
    height: 0;
    border-bottom: 5px solid #209dd9;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.list_arrow-right > li:after {
    top: .6em;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #209dd9;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.list_chevron-down > li:after {
    top: .4em;
    width: 6px;
    height: 6px;
    border-bottom: 1px solid #209dd9;
    border-right: 1px solid #209dd9;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.list_chevron-up > li:after {
    top: .6em;
    width: 6px;
    height: 6px;
    border-bottom: 1px solid #209dd9;
    border-right: 1px solid #209dd9;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.list_chevron-right > li:after {
    width: 6px;
    height: 6px;
    border-bottom: 1px solid #209dd9;
    border-right: 1px solid #209dd9;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.list_circle > li:after {
    width: 5px;
    height: 5px;
    background-color: #fff;
    border: 1px solid #209dd9;
    border-radius: 100%;
}

.list_check > li:after {
    width: 8px;
    height: 3px;
    border-bottom: 2px solid #209dd9;
    border-left: 2px solid #209dd9;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* ----------------------------------------------------------
    定義 / .dl
------------------------------------------------------------- */
.dl {
    margin: 0 0 1em;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
}
.dl dt {
    margin: 0 0 10px;
    padding: 5px 8px;
    background: #f0efe0;
    font-weight: bold;
}
.dl dd {
    margin: 0 0 20px;
    padding: 0 0 0 1em;
}
.dl dd > :last-child { margin-bottom: 0; }
/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .dl dd { padding: 0; }
}

/* ----------------------------------------------------------
    メッセージ / .msg
------------------------------------------------------------- */
.msg {
    margin: 0 0 20px;
    padding: 15px;
    background: #ecf7fc;
}
.msg > :last-child { margin-bottom: 0; }
.msg .btn { margin: 0 5px 5px 0; }

.msg_ttl {
    display: flex;
    margin: 0 0 10px;
    color: #209dd9;
    font-size: 16px;
    font-weight: bold;
}
.msg_ttl .ico {
    margin: 0 5px 0 0;
    font-size: 18px;
}

.msg_body {}
.msg_body > :last-child { margin-bottom: 0; }

.msg_notice { background: #FBF8EA; }
.msg_notice .msg_ttl { color: #eca700; }

.msg_caution { background: #FBEDED; }
.msg_caution .msg_ttl { color: #BF1517; }

/* ----------------------------------------------------------
    ボーダーボックス / .border
------------------------------------------------------------- */
.border {
    margin-bottom: 1em;
    padding: 12px 15px;
    border: 1px solid;
}
.border > :last-child { margin-bottom: 0; }

.border_gray {
    background-color: #fff;
    border-color: #ccc;
}

.border_blue {
    background-color: #f7f8fa;
    border-color: #84a8c5;
}

.border_yellow {
    background-color: #fffdf5;
    border-color: #efe6c0;
}

.border_right {
    border-right: 1px solid #bcd5e2;
}

/* ----------------------------------------------------------
    ツールチップ / .tooltip
------------------------------------------------------------- */
.tooltip {
    position: relative;
    display: inline-block;
    margin: 0 5px;
}

.tooltip_btn { cursor: pointer; }

.tooltip_balloon {
    z-index: 100;
    position: absolute;
    top: 0;
    left: -14px;
    display: none;
    width: 200px;
    padding: 5px 8px;
    background: #fff;
    border: 1px solid #19283C;
    color: #19283C;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.4;
    text-align: left;
}
.tooltip_balloon_right {
    left: auto;
    right: -14px;
}
.tooltip_balloon.is-show { display: inline-block; }
.tooltip_balloon:before {
    content: "";
    z-index: 100;
    position: absolute;
    bottom: -9px;
    left: 20px;
    width: 0;
    height: 0;
    margin-left: -9px;
    border-color: #fff transparent transparent transparent;
    border-style: solid;
    border-width: 9px 9px 0 9px;
}
.tooltip_balloon_right:before {
    left: auto;
    right: 12px;
}
.tooltip_balloon:after {
    content: "";
    z-index: 99;
    position: absolute;
    bottom: -10px;
    left: 20px;
    width: 0;
    height: 0;
    margin-left: -10px;
    border-color: #19283C transparent transparent transparent;
    border-style: solid;
    border-width: 10px 10px 0 10px;
}
.tooltip_balloon_right:after {
    left: auto;
    right: 11px;
}
/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .tooltip_balloon_right {
        left: auto;
        right: -50px;
    }
    .tooltip_balloon_right:before {
        left: auto;
        right: 48px;
    }
    .tooltip_balloon_right:after {
        left: auto;
        right: 47px;
    }
}

/* ----------------------------------------------------------
    サンプルコード / .code
------------------------------------------------------------- */
.code {
    margin-bottom: 1em;
    padding: 12px 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
    -webkit-box-shadow: 1px 1px 2px #eee inset;
    -moz-box-shadow: 1px 1px 2px #eee inset;
    box-shadow: 1px 1px 2px #eee inset;
}

/* ----------------------------------------------------------
    マーク / .mark
------------------------------------------------------------- */
.mark {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 0;
    background: #333;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
}

/* ----------------------------------------------------------
    バナー / .bnr
------------------------------------------------------------- */
.bnr {
    margin: 0 auto 30px;
    text-align: center;
}
.top.bnr { margin: 0 auto 50px; }
.bnr img {
    display: inline-block;
    box-shadow: 3px 3px 0 0 rgba(0,0,0,.1);
}

/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .top.bnr { margin: 0 auto 20px; }
    .bnr img { width: 95%; }
}

/* Tab */
@media only screen and (min-width: 768px) and (max-width: 939px) {
    .top.bnr { margin: 0 auto 40px; }
    .bnr img { width: 95%; }
}