@charset "euc-jp";

/*

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

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

.ico {
    font-family: 'xserver';
    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_circle:before { content: "\e800"; }
.ico_circle-double:before { content: "\e814"; }
.ico_circle-fill:before { content: "\e801"; }
.ico_square:before { content: "\e802"; }
.ico_square-fill:before { content: "\e803"; }
.ico_exclamation:before { content: "\e804"; }
.ico_exclamation-fill:before { content: "\e805"; }
.ico_triangle-down:before { content: "\e815"; }
.ico_triangle-left:before { content: "\e816"; }
.ico_triangle-right:before { content: "\e817"; }
.ico_triangle-up:before { content: "\e818"; }
.ico_circle-arrow-down:before { content: "\e806"; }
.ico_circle-arrow-left:before { content: "\e807"; }
.ico_circle-arrow-right:before { content: "\e808"; }
.ico_circle-arrow-up:before { content: "\e809"; }
.ico_arrow-down:before { content: "\e600"; }
.ico_arrow-left:before { content: "\e601"; }
.ico_arrow-right:before { content: "\e602"; }
.ico_arrow-up:before { content: "\e603"; }
.ico_chevron-down:before { content: "\e604"; }
.ico_chevron-left:before { content: "\e605"; }
.ico_chevron-right:before { content: "\e606"; }
.ico_chevron-up:before { content: "\e607"; }
.ico_circle-down:before { content: "\e608"; }
.ico_circle-left:before { content: "\e609"; }
.ico_circle-right:before { content: "\e60a"; }
.ico_circle-up:before { content: "\e60b"; }
.ico_hierarchy:before { content: "\e624"; }
.ico_check:before { content: "\e80f"; }
.ico_cross:before { content: "\e60c"; }
.ico_plus:before { content: "\e60d"; }
.ico_minus:before { content: "\e60e"; }
.ico_menu:before { content: "\e60f"; }
.ico_list:before { content: "\e610"; }
.ico_book:before { content: "\e611"; }
.ico_display:before { content: "\e612"; }
.ico_circle-check:before { content: "\e613"; }
.ico_email:before { content: "\e614"; }
.ico_gear:before { content: "\e615"; }
.ico_globe:before { content: "\e616"; }
.ico_home:before { content: "\e617"; }
.ico_lock:before { content: "\e618"; }
.ico_magnifier:before { content: "\e619"; }
.ico_mouse:before { content: "\e61a"; }
.ico_new-window:before { content: "\e61b"; }
.ico_operator:before { content: "\e61c"; }
.ico_pencil:before { content: "\e61d"; }
.ico_phone:before { content: "\e61e"; }
.ico_refresh:before { content: "\e61f"; }
.ico_safety:before { content: "\e620"; }
.ico_server:before { content: "\e621"; }
.ico_tag:before { content: "\e622"; }
.ico_unlock:before { content: "\e623"; }
.ico_balloon:before { content: "\e80a"; }
.ico_balloon-q:before { content: "\e80b"; }
.ico_balloon-a:before { content: "\e80c"; }
.ico_square-q:before { content: "\e80d"; }
.ico_square-a:before { content: "\e80e"; }
.ico_q:before { content: "\e810"; }
.ico_signature:before { content: "\e811"; }
.ico_window:before { content: "\e812"; }
.ico_wordpress:before { content: "\e813"; }
.ico_square-exclamation:before { content: "\e900"; }
.ico_square-question:before { content: "\e901"; }
.ico_smartphone:before { content: "\e902"; }

/* ----------------------------------------------------------
    画像アイコン / .imgico
------------------------------------------------------------- */
.imgico {
    display: inline-block;
    background: url(../img/common/icons.png?date=190207) 0 0 no-repeat;
    line-height: 0;
    vertical-align: middle;
}
.ie7 .imgico {
    display: inline;
    zoom: 1;
}
.imgico_medal {
    width: 16px;
    height: 23px;
    background-position: 0 0;
}
.imgico_marker-gray {
    width: 7px;
    height: 4px;
    background-position: 0 -60px;
}
.imgico_marker-blue {
    width: 7px;
    height: 4px;
    background-position: -10px -60px;
}
.imgico_xserver {
    width: 16px;
    height: 16px;
    background-position: 0 -30px;
}
.imgico_sixcore {
    width: 16px;
    height: 16px;
    background-position: -20px -30px;
}
.imgico_xdomain {
    width: 16px;
    height: 16px;
    background-position: -40px -30px;
}
.imgico_wpx {
    width: 16px;
    height: 16px;
    background-position: -60px -30px;
}
.imgico_drivee {
    width: 16px;
    height: 16px;
    background-position: -80px -30px;
}
.imgico_xbiz {
    width: 16px;
    height: 16px;
    background-position: -100px -30px;
}
.imgico_xdrive {
    width: 16px;
    height: 16px;
    background-position: -120px -30px;
}
.imgico_seveneleven {
    width: 36px;
    height: 35px;
    background-position: 0 -80px;
}
.imgico_lawson {
    width: 36px;
    height: 35px;
    background-position: -40px -80px;
}
.imgico_familymart {
    width: 36px;
    height: 35px;
    background-position: -80px -80px;
}
.imgico_dailyyamazaki {
    width: 36px;
    height: 35px;
    background-position: -120px -80px;
}
.imgico_ministop {
    width: 36px;
    height: 35px;
    background-position: -160px -80px;
}
.imgico_seicomart {
    width: 36px;
    height: 35px;
    background-position: -200px -80px;
}
.imgico_circlek {
    width: 36px;
    height: 35px;
    background-position: -240px -80px;
}
.imgico_2way {
    width: 39px;
    height: 39px;
    background-position: 0 -120px;
}
.imgico_transfer-server {
    width: 35px;
    height: 25px;
    background-position: 0 -160px;
}
.imgico_transfer-domain {
    width: 29px;
    height: 25px;
    background-position: -40px -160px;
}
.imgico_transfer-domain {
    width: 29px;
    height: 25px;
    background-position: -40px -160px;
}
.imgico_circle-double {
    width: 26px;
    height: 26px;
    background-position: -50px 0;
}
.imgico_circle {
    width: 26px;
    height: 26px;
    background-position: -20px 0;
}
.imgico_circle-mini_orange {
    width: 11px;
    height: 11px;
    background-position: -80px 0;
}
.imgico_question {
    width: 16px;
    height: 16px;
    background-position: -100px 0;
}


/* ----------------------------------------------------------
    ボタン / .btn
------------------------------------------------------------- */
.btn {
    cursor: pointer;
    display: inline-block;
    margin: 0 0 5px;
    border: none;
    font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;
    line-height: 1.4;
    text-align: center;
    -webkit-transition: opacity .1s ease-out;
    -o-transition: opacity .1s ease-out;
    transition: opacity .1s ease-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.ltie7 .btn,
.ie7 .btn {
    display: inline;
    zoom: 1;
}
.ie7 .btn,
.ie8 .btn { filter: none; }
.btn:hover {
    opacity: .8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=80)";
    -khtml-opacity: .8;
    -moz-opacity: .8;
}
a.btn { text-decoration: none !important; }

.btn .ico { margin-left: 5px; }
.btn .imgico { margin-left: 5px; }

/* デフォルト - 青+白文字 */
.btn_blue {
    padding: 13px 15px 10px;
    background: #1b63a7;/* Old Browsers */
    background: -moz-linear-gradient(top, #2c6fae 0, #2c6fae 50%, #1b63a7 51%, #1b63a7 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #2c6fae), color-stop(50%, #2c6fae), color-stop(51%, #1b63a7), color-stop(100%, #1b63a7));/* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #2c6fae 0, #2c6fae 50%, #1b63a7 51%, #1b63a7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2c6fae 0, #2c6fae 50%, #1b63a7 51%, #1b63a7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2c6fae 0, #2c6fae 50%, #1b63a7 51%, #1b63a7 100%); /* IE 10+ */
    background: linear-gradient(to bottom, #2c6fae 0, #2c6fae 50%, #1b63a7 51%, #1b63a7 100%);/* W3C */
    border-radius: 3px;
    color: #fff !important;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 -1px 0 #1b558b;
    -webkit-box-shadow: inset 0 0 0 1px #fff, 0 1px 3px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 0 0 1px #fff, 0 1px 3px rgba(0,0,0,.3);
    box-shadow: inset 0 0 0 1px #fff, 0 1px 3px rgba(0,0,0,.3);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2c6fae', endColorstr='#1b63a7', GradientType=0 );/* IE6-9 */
}
.ie7 .btn_blue,
.ie8 .btn_blue { border-bottom: 2px solid #17548F; }
.btn_blue:hover { color: #fff; }

/* オレンジ+白文字 */
.btn_orange {
    padding: 10px 15px;
    background: #f7790b;/* Old Browsers */
    background: -moz-linear-gradient(top, #f9a155 0, #f88724 50%, #f7790b 51%, #f7790b 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #f88724), color-stop(50%, #f88724), color-stop(51%, #f7790b), color-stop(100%, #f7790b));/* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #f9a155 0, #f88724 50%, #f7790b 51%, #f7790b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9a155 0, #f88724 50%, #f7790b 51%, #f7790b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f9a155 0, #f88724 50%, #f7790b 51%, #f7790b 100%); /* IE 10+ */
    background: linear-gradient(to bottom, #f9a155 0, #f88724 50%, #f7790b 51%, #f7790b 100%);/* W3C */
    border-radius: 3px;
    color: #fff !important;
    font-weight: bold;
    text-shadow: 0 -1px 0 #d67227;
    -webkit-box-shadow: inset 0 0 0 1px #fff, 0 1px 3px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 0 0 1px #fff, 0 1px 3px rgba(0,0,0,.3);
    box-shadow: inset 0 0 0 1px #fff, 0 1px 3px rgba(0,0,0,.3);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f88724', endColorstr='#f7790b', GradientType=0 );/* IE6-9 */
}
.ie7 .btn_orange,
.ie8 .btn_orange { border-bottom: 2px solid #E16C07; }
.btn_orange:hover { color: #fff; }

/* グレー+黒文字 */
.btn_gray {
    padding: 8px 12px;
    background: #e2e2e2;/* Old Browsers */
    background: -moz-linear-gradient(top, #f5f5f5 0, #f5f5f5 50%, #e2e2e2 51%, #e2e2e2 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #f5f5f5), color-stop(50%, #f5f5f5), color-stop(51%, #e2e2e2), color-stop(100%, #e2e2e2));/* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #f5f5f5 0, #f5f5f5 50%, #e2e2e2 51%, #e2e2e2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f5f5f5 0, #f5f5f5 50%, #e2e2e2 51%, #e2e2e2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f5f5f5 0, #f5f5f5 50%, #e2e2e2 51%, #e2e2e2 100%); /* IE 10+ */
    background: linear-gradient(to bottom, #f5f5f5 0, #f5f5f5 50%, #e2e2e2 51%, #e2e2e2 100%);/* W3C */
    border-radius: 3px;
    color: #222 !important;
    text-shadow: 0 1px 0 #fff;
    -webkit-box-shadow: inset 1px 1px 0 0 rgba(0,0,0,0.05), 0 1px 1px rgba(0,0,0,.3);
    -moz-box-shadow: inset 1px 1px 0 0 rgba(0,0,0,0.05), 0 1px 1px rgba(0,0,0,.3);
    box-shadow: inset 1px 1px 0 0 rgba(0,0,0,0.05), 0 1px 1px rgba(0,0,0,.3);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e2e2e2', GradientType=0 );/* IE6-9 */
}
.ie7 .btn_gray,
.ie8 .btn_gray { border-bottom: 2px solid #ccc; }
.btn_gray .ico { color: #1b63a7; }
.btn_gray:hover { color: #222; }

/* 白+黒文字 */
.btn_white {
    padding: 8px 12px;
    background: #fff;/* Old Browsers */
    background: -moz-linear-gradient(top, #fff 0, #fff 50%, #f1f1f1 51%, #f1f1f1 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #fff), color-stop(50%, #fff), color-stop(51%, #f1f1f1), color-stop(100%, #f1f1f1));/* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #fff 0, #fff 50%, #f1f1f1 51%, #f1f1f1 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fff 0, #fff 50%, #f1f1f1 51%, #f1f1f1 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fff 0, #fff 50%, #f1f1f1 51%, #f1f1f1 100%); /* IE 10+ */
    background: linear-gradient(to bottom, #fff 0, #fff 50%, #f1f1f1 51%, #f1f1f1 100%);/* W3C */
    border-radius: 3px;
    color: #222 !important;
    text-shadow: 0 1px 0 #fff;
    -webkit-box-shadow: inset 0 0 0 1px #fff, 0 1px 3px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 0 0 1px #fff, 0 1px 3px rgba(0,0,0,.3);
    box-shadow: inset 0 0 0 1px #fff, 0 1px 3px rgba(0,0,0,.3);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1', GradientType=0 );/* IE6-9 */
}
.ie7 .btn_white,
.ie8 .btn_white { border-bottom: 2px solid #ddd; }
.btn_white .ico { color: #1b63a7; }
.btn_white:hover { color: #222; }

/* 白+灰色ボーダー+黒文字 */
.btn_white-borderd {
    padding: 8px 12px;
    background: #f1f1f1;/* Old Browsers */
    background: -moz-linear-gradient(top, #fff 0, #fff 50%, #f1f1f1 51%, #f1f1f1 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #fff), color-stop(50%, #fff), color-stop(51%, #f1f1f1), color-stop(100%, #f1f1f1));/* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #fff 0, #fff 50%, #f1f1f1 51%, #f1f1f1 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fff 0, #fff 50%, #f1f1f1 51%, #f1f1f1 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fff 0, #fff 50%, #f1f1f1 51%, #f1f1f1 100%); /* IE 10+ */
    background: linear-gradient(to bottom, #fff 0, #fff 50%, #f1f1f1 51%, #f1f1f1 100%);/* W3C */
    border-radius: 3px;
    color: #222 !important;
    text-shadow: 0 1px 0 #fff;
    -webkit-box-shadow: inset 0 0 0 1px #ccc, 0 1px 3px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 0 0 1px #ccc, 0 1px 3px rgba(0,0,0,.3);
    box-shadow: inset 0 0 0 1px #ccc, 0 1px 3px rgba(0,0,0,.3);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1', GradientType=0 );/* IE6-9 */
}
.ie7 .btn_white-borderd,
.ie8 .btn_white-borderd {
    border: 1px solid #eee;
    border-bottom: 2px solid #ccc;
}
.btn_white-borderd .ico { color: #1b63a7; }
.btn_white-borderd:hover { color: #222; }

/* オレンジ大ボタン - オレンジ+白文字 */
.btn_orange-l {
    padding: 18px;
    background: #f7790b;/* Old Browsers */
    background: -moz-linear-gradient(top, #f9a155 0, #f88724 50%, #f7790b 51%, #f7790b 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #f88724), color-stop(50%, #f88724), color-stop(51%, #f7790b), color-stop(100%, #f7790b));/* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #f9a155 0, #f88724 50%, #f7790b 51%, #f7790b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f9a155 0, #f88724 50%, #f7790b 51%, #f7790b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f9a155 0, #f88724 50%, #f7790b 51%, #f7790b 100%); /* IE 10+ */
    background: linear-gradient(to bottom, #f9a155 0, #f88724 50%, #f7790b 51%, #f7790b 100%);/* W3C */
    border-radius: 3px;
    color: #fff !important;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 -1px 0 #d67227;
    -webkit-box-shadow: inset 0 0 0 1px #f7790b, inset 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 0 0 1px #f7790b, inset 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3);
    box-shadow: inset 0 0 0 1px #f7790b, inset 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f88724', endColorstr='#f7790b', GradientType=0 );/* IE6-9 */
}
.ie7 .btn_orange-l,
.ie8 .btn_orange-l { border-bottom: 2px solid #E16C07; }
.btn_orange-l:hover { color: #fff; }

/* グレー大ボタン - グレー+黒文字 */
.btn_gray-l {
    padding: 18px;
    background: #e2e2e2;/* Old Browsers */
    background: -moz-linear-gradient(top, #f5f5f5 0, #f5f5f5 50%, #e2e2e2 51%, #e2e2e2 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #f5f5f5), color-stop(50%, #f5f5f5), color-stop(51%, #e2e2e2), color-stop(100%, #e2e2e2));/* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #f5f5f5 0, #f5f5f5 50%, #e2e2e2 51%, #e2e2e2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f5f5f5 0, #f5f5f5 50%, #e2e2e2 51%, #e2e2e2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f5f5f5 0, #f5f5f5 50%, #e2e2e2 51%, #e2e2e2 100%); /* IE 10+ */
    background: linear-gradient(to bottom, #f5f5f5 0, #f5f5f5 50%, #e2e2e2 51%, #e2e2e2 100%);/* W3C */
    border-radius: 3px;
    color: #222 !important;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 1px 0 #fff;
    -webkit-box-shadow: inset 0 0 0 1px #ccc, inset 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 0 0 1px #ccc, inset 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3);
    box-shadow: inset 0 0 0 1px #ccc, inset 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e2e2e2', GradientType=0 );/* IE6-9 */
}
.ie7 .btn_gray-l,
.ie8 .btn_gray-l { border-bottom: 2px solid #ccc; }
.btn_gray-l .ico { color: #1b63a7; }
.btn_gray-l:hover { color: #222; }

/* 黒大ボタン - 黒+白文字 */
.btn_black-l {
    padding: 18px;
    background: #222;/* Old Browsers */
    background: -moz-linear-gradient(top, #555 0, #333 50%, #222 51%, #222 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #555), color-stop(50%, #333), color-stop(51%, #222), color-stop(100%, #222));/* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #555 0, #333 50%, #222 51%, #222 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #555 0, #333 50%, #222 51%, #222 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #555 0, #333 50%, #222 51%, #222 100%); /* IE 10+ */
    background: linear-gradient(to bottom, #555 0, #333 50%, #222 51%, #222 100%);/* W3C */
    border-radius: 3px;
    color: #fff !important;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 -1px 0 #000;
    -webkit-box-shadow: inset 0 0 0 1px #222, inset 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 0 0 1px #222, inset 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3);
    box-shadow: inset 0 0 0 1px #222, inset 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#222', GradientType=0 );/* IE6-9 */
}
.ie7 .btn_black-l,
.ie8 .btn_black-l { border-bottom: 2px solid #000; }
.btn_black-l:hover { color: #fff; }

/* 青大ボタン - 青+白文字 */
.btn_blue-l {
    padding: 18px;
    background: #1b63a7;/* Old Browsers */
    background: -moz-linear-gradient(top, #2c6fae 0, #2c6fae 50%, #1b63a7 51%, #1b63a7 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #2c6fae), color-stop(50%, #2c6fae), color-stop(51%, #1b63a7), color-stop(100%, #1b63a7));/* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #2c6fae 0, #2c6fae 50%, #1b63a7 51%, #1b63a7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2c6fae 0, #2c6fae 50%, #1b63a7 51%, #1b63a7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2c6fae 0, #2c6fae 50%, #1b63a7 51%, #1b63a7 100%); /* IE 10+ */
    background: linear-gradient(to bottom, #2c6fae 0, #2c6fae 50%, #1b63a7 51%, #1b63a7 100%);/* W3C */
    border-radius: 3px;
    color: #fff !important;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 -1px 0 #1b558b;
    -webkit-box-shadow: inset 0 0 0 1px #fff, 0 1px 3px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 0 0 1px #fff, 0 1px 3px rgba(0,0,0,.3);
    box-shadow: inset 0 0 0 1px #fff, 0 1px 3px rgba(0,0,0,.3);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2c6fae', endColorstr='#1b63a7', GradientType=0 );/* IE6-9 */
}
.ie7 .btn_blue-l,
.ie8 .btn_blue-l { border-bottom: 2px solid #17548F; }
.btn_blue-l:hover { color: #fff; }

/* 緑大ボタン - 緑+白文字 */
.btn_green-l {
    padding: 18px;
    background: #66bb1f;/* Old Browsers */
    background: -moz-linear-gradient(top, #7ac33e 0, #7ac33e 50%, #66bb1f 51%, #66bb1f 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #7ac33e), color-stop(50%, #7ac33e), color-stop(51%, #66bb1f), color-stop(100%, #66bb1f));/* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #7ac33e 0, #7ac33e 50%, #66bb1f 51%, #66bb1f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7ac33e 0, #7ac33e 50%, #66bb1f 51%, #66bb1f 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #7ac33e 0, #7ac33e 50%, #66bb1f 51%, #66bb1f 100%); /* IE 10+ */
    background: linear-gradient(to bottom, #7ac33e 0, #7ac33e 50%, #66bb1f 51%, #66bb1f 100%);/* W3C */
    border-radius: 3px;
    color: #fff !important;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 -1px 0 #77ab49;
    -webkit-box-shadow: inset 0 0 0 1px #77ab49, inset 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 0 0 1px #77ab49, inset 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3);
    box-shadow: inset 0 0 0 1px #77ab49, inset 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.3);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7ac33e', endColorstr='#66bb1f', GradientType=0 );/* IE6-9 */
}
.ie7 .btn_green-l,
.ie8 .btn_green-l { border-bottom: 2px solid #559C19; }
.btn_green-l:hover { color: #fff; }

/* ----------------------------------------------------------
    ステッカー / .sticker
------------------------------------------------------------- */
.sticker {
    display: inline-block;
    margin: 0 5px;
    padding: 4px 5px;
    background: #eca700;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    vertical-align: middle;
    text-decoration: none !important;
    -webkit-box-shadow: 0 0 3px 0 #ccc;
    -moz-box-shadow: 0 0 3px 0 #ccc;
    box-shadow: 0 1px 1px 0 #ccc;
    -webkit-transition: background-color .1s ease-out;
    -o-transition: background-color .1s ease-out;
    transition: background-color .1s ease-out;
}
a.sticker:hover {
    background: #E59600;
    color: #fff;
}

/* ----------------------------------------------------------
    幅、余白確保ボックス / .holder-*
------------------------------------------------------------- */
/* スマホ */
@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;
    }
}
/* タブレット */
@media only screen and (min-width: 768px) and (max-width: 969px) {
    .holder-m,
    .holder-sm, 
    .holder-ml,
    .holder-sml {
        width: 94.79%;
        margin-left: auto;
        margin-right: auto;
    }
}
/* PC */
@media only screen and (min-width: 970px) {
    .holder-l,
    .holder-sl, 
    .holder-ml,
    .holder-sml {
        width: 960px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ----------------------------------------------------------
    テーブル / .table
------------------------------------------------------------- */
.table {
    width: 100%;
    margin: 0 0 20px;
    background: #fff;
}
.table caption {
    padding: 10px;
    background: #646464;/* Old Browsers */
    background: -moz-linear-gradient(top, #7c7c7c 0, #646464 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #7c7c7c), color-stop(100%, #646464));/* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #7c7c7c 0, #646464 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7c7c7c 0, #646464 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #7c7c7c 0, #646464 100%); /* IE 10+ */
    background: linear-gradient(to bottom, #7c7c7c 0, #646464 100%);/* W3C */
    border: 1px solid #ccc;
    border-bottom: none;
    color: #fff;
    font-weight: bold;
    text-align: center;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7c7c7c', endColorstr='#646464', GradientType=0 );/* IE6-9 */
}
.table th,
.table td {
    padding: 10px;
    border: 1px solid #ccc;
    vertical-align: middle;
}
.table td { font-size: 13px; }
.table th > :last-child,
.table td > :last-child { margin-bottom: 0; }
.table thead th {
    background: #646464;/* Old Browsers */
    background: -moz-linear-gradient(top, #7c7c7c 0, #646464 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #7c7c7c), color-stop(100%, #646464));/* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #7c7c7c 0, #646464 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7c7c7c 0, #646464 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #7c7c7c 0, #646464 100%); /* IE 10+ */
    background: linear-gradient(to bottom, #7c7c7c 0, #646464 100%);/* W3C */
    color: #fff;
    font-weight: bold;
    text-align: center;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7c7c7c', endColorstr='#646464', GradientType=0 );/* IE6-9 */
}

.table tbody th { background: #f0f4f7; }
.table_striped tbody tr:nth-child(even) th { background: #e7eaed; }
.table_striped tbody tr:nth-child(even) td { background: #f5f5f5; }

.table_use-caption thead th {
    background: #999;
    filter: none;
}
.table table{ font-size: 14px; }

/* スマホ */
@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;
        box-sizing: border-box;
        display: block;
        width: 100%;
        border-bottom: none;
        text-align: center;
    }
    .table_responsive th {
        padding: 10px;
        background-position: 0 100%;
    }
    .table_responsive tr:last-child > :last-child { border-bottom: 1px solid #ccc; }
	
	.table caption a{
    	color: #fff;
}
}

.table_ttl {
    background: #cbd9e6 !important;
    color: #355d7d;
} 

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

/* スマホ */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .primary-table-ml,
    .primary-table-l,
    .ssl-primary-table-l { display: none; }
    
    .secondly-table-s,
    .secondly-table-sm,
    .ssl-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,
    .ssl-secondly-table-sm caption,
    .ssl-secondly-table-sm th,
    .ssl-secondly-table-sm td { padding: 5px; }
}

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

/* PC */
@media only screen and (min-width: 970px) {
    .secondly-table-s,
    .secondly-table-sm,
    .ssl-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; }

/* スマホ */
@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 {
    margin: 0 0 20px;
    padding: 10px 15px;
    background: #fff url(../img/common/bg_grid.png) 0 0 repeat;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    font-size: 16px;
    font-weight: bold;
}
.ttl .ico {
    margin: 0 8px 0 0;
    font-size: 24px;
}

/* ----------------------------------------------------------
    コンテンツタイトル / .sub-ttl
------------------------------------------------------------- */
.sub-ttl {
    margin: 0 0 20px;
    padding: 0 0 17px;
    background: #fff url(../img/common/bg_subttl.png) 0 100% repeat-x;
    font-size: 20px;
    font-weight: bold;
}

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

.section_ttl {
    position: relative;
    margin: 0 0 18px;
    padding: 12px 0 10px 22px;
    background: #fff;
    background: -moz-linear-gradient(top, #fff 0, #F7F7F7 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #fff), color-stop(100%, #F7F7F7));
    background: -webkit-linear-gradient(top, #fff 0, #F7F7F7 100%);
    background: -o-linear-gradient(top, #fff 0, #F7F7F7 100%);
    background: -ms-linear-gradient(top, #fff 0, #F7F7F7 100%);
    background: linear-gradient(to bottom, #fff 0, #F7F7F7 100%);
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
    -webkit-box-shadow: inset 0 -1px 0 #fff;
    -moz-box-shadow: inset 0 -1px 0 #fff;
    box-shadow: inset 0 -1px 0 #fff;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#F7F7F7', GradientType=0 );
}
.section_ttl:before {
    content: "";
    position: absolute;
    top: 9px;
    left: 9px;
    display: block;
    width: 4px;
    height: 23px;
    background: #1a6bb5;/* Old Browsers */
    background: -moz-linear-gradient(top, #5c94ca 0, #1a6bb5 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #5c94ca), color-stop(100%, #1a6bb5));/* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #5c94ca 0, #1a6bb5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #5c94ca 0, #1a6bb5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #5c94ca 0, #1a6bb5 100%); /* IE 10+ */
    background: linear-gradient(to bottom, #5c94ca 0, #1a6bb5 100%);/* W3C */
    -webkit-box-shadow: 0 0 1px #aaa;
    -moz-box-shadow: 0 0 1px #aaa;
    box-shadow: 0 0 1px #aaa;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#5c94ca', endColorstr='#1a6bb5', GradientType=0 );/* IE6-9 */
}

.section_body {
    margin-bottom: 40px;
    padding: 0 0 0 10px;
}
.section_body:last-child,
.section_body > :last-child { margin-bottom: 0; }
@media only screen and (min-width: 0) and (max-width: 767px) {
    .section_body { padding: 0; }
}

.section_footer {
    padding: 20px 0 0;
    border-top: 1px dotted #ccc;
}

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

.block_ttl {
    margin: 0 0 15px;
    padding: 9px 10px;
    background: #DEEEF4;
    font-weight: bold;
    /* background: #d6eaf2; */
}

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

/* ----------------------------------------------------------
    ボックス / .serial-box, .box
------------------------------------------------------------- */
.serial-box {}

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

.box_ttl {
    padding: 13px;
    background: #d8e5f1;/* Old Browsers */
    background: -moz-linear-gradient(top, #d8e5f1 0, #cedfee 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #d8e5f1), color-stop(100%, #cedfee));/* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #d8e5f1 0, #cedfee 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #d8e5f1 0, #cedfee 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #d8e5f1 0, #cedfee 100%); /* IE 10+ */
    background: linear-gradient(to bottom, #d8e5f1 0, #cedfee 100%);/* W3C */
    border-bottom: 1px solid #ccc;
    color: #1b63a7;
    font-weight: bold;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#d8e5f1', endColorstr='#cedfee', GradientType=0 );/* IE6-9 */
}
.box_ttl:last-child { border-bottom: none; }
.box_ttl_no-body {
    border-bottom: none;
}

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

/* ----------------------------------------------------------
    画像フレーム / .img
------------------------------------------------------------- */
.img {
    max-width: 100%;
    border: 1px solid #cbcbcb;
    -webkit-box-shadow: 1px 1px 2px #bbb;
    -moz-box-shadow: 1px 1px 2px #bbb;
    box-shadow: 1px 1px 2px #bbb;
}

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

/* ----------------------------------------------------------
    リスト(デフォルトスタイル) / .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;
}
.ltie7 .list,
.ie7 .list {
    margin: 0 0 1em 1.5em;
    list-style: disc outside;
}
.ie8 .list { margin: 0 0 1em 1.5em; }

.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 #1b63a7;
}

.list_arrow-up li:after {
    top: .6em;
    width: 0;
    height: 0;
    border-bottom: 5px solid #1b63a7;
    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 #1b63a7;
    -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 #1b63a7;
    border-right: 1px solid #1b63a7;
    -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 #1b63a7;
    border-right: 1px solid #1b63a7;
    -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 #1b63a7;
    border-right: 1px solid #1b63a7;
    -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 #1b63a7;
    border-radius: 100%;
}

.list_check li:after {
    width: 8px;
    height: 3px;
    border-bottom: 2px solid #1b63a7;
    border-left: 2px solid #1b63a7;
    -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 #ccc;
}
.dl dt {
    margin: 0 0 10px;
    padding: 5px 8px;
    background: #eee;
    font-weight: bold;
}
.dl dd {
    margin: 0 0 20px;
    padding: 0 0 0 1em;
}
.dl dd:last-child { margin: 0; }
.dl dd > :last-child { margin-bottom: 0; }
@media only screen and (min-width: 0) and (max-width: 767px) {
    .dl dd { padding: 0; }
}

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

.msg_ttl {
    margin: 0 0 10px;
    color: #69b000;
    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;
    border-color: #e7e3d3;
}
.msg_notice .msg_ttl { color: #eca700; }

.msg_caution {
    background: #FBEDED;
    border-color: #ebd5d5;
}
.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;
}

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

/* ----------------------------------------------------------
    ツールチップ
------------------------------------------------------------- */
.tooltip {
    display: inline-block;
}

.tooltip_target {
    display: inline-block;
    cursor: pointer;
}

.tooltip_content {
    display: none;
}

.tooltip_balloon {
    text-align: left;
    color: #000;
    background: #fff;
    border: 1px solid #333333;
    position: absolute;
    z-index: 100000;
    padding: 10px;
    font-size: 12px;
}

.tooltip_balloon:before {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #333;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -11px;
    margin-left: -10px;
}

.tooltip_balloon:after {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
}

.tooltip_balloon.top:before {
    border-top-color: transparent;
    border-bottom: 10px solid #333;
    top: -21px;
    bottom: auto;
}
.tooltip_balloon.top:after {
    border-top-color: transparent;
    border-bottom: 10px solid #fff;
    top: -20px;
    bottom: auto;
}

.tooltip_balloon.left:before,
.tooltip_balloon.left:after {
    left: 10px;
    margin: 0;
}

.tooltip_balloon.right:before,
.tooltip_balloon.right:after {
    right: 10px;
    left: auto;
    margin: 0;
}

.tooltip_balloon_bottom {
    position: absolute;
    width: 60px;
    height: 30px;
    left: 50%;
    bottom: -30px;
    background: #fff;
    opacity: 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.tooltip_balloon_btn {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 50%;
    bottom: -30px;
    background: #fff;
    opacity: 0;
    cursor: pointer;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.tooltip_balloon.left .tooltip_balloon_bottom{ left: 20px; }
.tooltip_balloon.left .tooltip_balloon_btn{ left: 20px; }

.tooltip_balloon.right .tooltip_balloon_bottom{ right: 20px; }
.tooltip_balloon.right .tooltip_balloon_btn{ right: 20px; }

/* ----------------------------------------------------------
    検索結果 / .search-results
------------------------------------------------------------- */
.search-results{ margin: 0 10px 30px; }
.search-results_list{
    margin: 0 0 2em 2em;
    list-style: decimal outside;
}
.search-results_list > li{
    margin-bottom: 2em;
    padding-left: 1em;
}

.search-results_tit,
.search-results_body{ margin-bottom: .7em; }

/* PC */
@media only screen and (min-width: 970px) {
    .search-results_bottom { clear: both; }
    .search-results_bottom:before, .search-results_bottom:after {
        content: " ";
        display: table;
    }
    .search-results_bottom:after { clear: both; }
    .search-results_bottom { *zoom: 1; }
    
    .search-results_bottom_url{ float: left; }
    .search-results_bottom_words{ 
        overflow: hidden;
        text-align: right;
    }
}