betom/jp/public/css/service.css

@charset 'utf-8';

/* ===========================
 SERVICE.CSS
============================== */

/* PAGE TITLE ---------------- */

h1.main-title {
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    background-repeat: no-repeat;
    background-position: top left;
}

body.beginner        h1.main-title {
    background-image: url(../../../img/default/service/beginner/h1_beginner.gif);
}
body.reason          h1.main-title {
    background-image: url(../../../img/default/service/reason/h1_reason.gif);
}
body.plan            h1.main-title {
    background-image: url(../../../img/default/service/plan/h1_service_plan.gif);
}
body.plan-economy   h1.main-title {
    background-image: url(../../../img/default/service/plan-economy/h1_plan_economy.gif);
}
body.plan-lite     h1.main-title {
    background-image: url(../../../img/default/service/plan-lite/h1_plan_lite.gif);
}
body.plan-enterprise   h1.main-title {
    font-size: 210%;
    font-weight: bold;
    overflow: inherit;
    width: 100%;
    height: 47px;
    margin: 0 0 19px;
    padding: 7px 0 0;
    white-space: normal;
    text-indent: 0;
    color: #1a1a1a;
    border-bottom: 2px solid #ccc;
    background-image: none;
}
body.about           h1.main-title {
    background-image: url(../../../img/default/service/about/h1_service_intro.gif);
}
body.mail            h1.main-title {
    background-image: url(../../../img/default/service/aboutmail/h1_service_mail.gif);
}
body.spec            h1.main-title {
    background-image: url(../../../img/default/service/spec/h1_spec.gif);
}
body.server          h1.main-title {
    background-image: url(../../../img/default/service/aboutserver/h1_server.gif);
}
body.agency          h1.main-title,
body.confirm  h1.main-title,
body.registration  h1.main-title {
    background-image: url(../../../img/default/service/agency/h1_agency.gif);
}
body.domain          h1.main-title {
    background-image: url(../../../img/default/service/domain/h1_domain.gif);
}
body.list            h1.main-title {
    background-image: url(../../../img/default/service/domainlist/h1_domain_list.gif);
}
body.option          h1.main-title {
    background-image: url(../../../img/default/service/option/h1_option.gif);
}
body.ryokin          h1.main-title {
    background-image: url(../../../img/default/service/ryokin/h1_ryokin.gif);
}
body.campaign        h1.main-title {
    background-image: url(../../../img/default/service/campaign/h1_campaign.gif);
}
body.tokuten         h1.main-title {
    background-image: url(../../../img/default/service/tokuten/h1_tokuten.gif);
}
body.catalog         h1.main-title {
    background-image: url(../../../img/default/service/catalog/h1_catalog.gif);
}



/* -------------------------------------------------------------------
 SERVICE-TABLE
 --------------------------------------------------------------------- */

.service-table {
    box-sizing: border-box;
    width: 100%;
    border: solid 3px #b2b2b2;
}

.service-table th,
.service-table td {
    line-height: 140%;
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 10px;
}

.service-table th {
    text-align: center;
}

.item-size-l {
    font-size: 15px;
}

.item-size-s {
    font-size: 10px;
}

.item-lh {
    line-height: 110%;
    padding-top: 5px;
}

.service-table-item-th-side,
.service-table-item-th,
.service-table-item {
    border-bottom: solid 1px #b2b2b2;
}

.service-table-item-th-gray {
    background-color: #c0cccc;
}

.service-table-item-th-orange {
    background-color: #e88a11;
}

.service-table-item-th-orange a {
    color: #fff;
}

.service-table-item-th-orange a:hover {
    opacity: .5;
}

.service-table-item-th-side {
    border-right: solid 2px #b2b2b2;
    background: #e6ebeb;
}

.service-table-economy,
.service-table-lite,
.service-table-standard {
    width: 101px;
}

.service-table-economy,
.service-table-lite,
.service-table-standard,
.service-table-enterprise {
    height: 50px;
    border-right: solid 2px #b2b2b2;
    border-bottom: solid 1px #b2b2b2;
    border-left: solid 2px #b2b2b2;
}

.service-table-enterprise {
    width: 116px;
}

.service-table-item-th,
th.service-table-economy,
th.service-table-lite,
th.service-table-standard,
th.service-table-enterprise {
    color: #fff;
}

.service-table-economy {
    background-color: #fceaf0;
}

th.service-table-economy {
    background: #f3acc0;
}

.service-table-lite {
    background: #e6f6fb;
}

th.service-table-lite {
    background: #6fc5dc;
}

.service-table-standard {
    background: #f6f4d8;
}

th.service-table-standard {
    background: #c7ba3e;
}

.service-table-enterprise {
    background: #e8f0f8;
}

th.service-table-enterprise {
    background: #7ea4ce;
}

table.service-table-hover tr:hover,
table.service-table-hover tr:hover td {
    background-color: rgba(255,169,78,.2);
}

table.service-table-hover tr td:hover {
    background-color: #fff882;
}

/* -------------------------------------------------------------------
 ABOUT
 --------------------------------------------------------------------- */

.about #subdomain-id {
    width: 130px;
    color: #097c8d;
    border: 1px solid #748fb5;
}

.about #container #content .wrapper {
    background: url(../../../img/common/bg_main_1column.png) repeat-y 0 50%;
}

.about #body {
    width: 721px;
    padding: 10px 25px 0;
}

.about .main-body {
    width: 695px;
    margin: 0 auto;
}

.about h1 {
    width: 100%;
}

.about .body-bottom p#go-pagetop {
    width: 73px;
    height: 23px;
    margin: 0 0 0 646px;
    padding-top: 10px;
}


/* -------------------------------------------------------------------
 SERVICE-INTRO, SERVICE-HP, SERVICE-MAIL, SERVER
 --------------------------------------------------------------------- */

h2.intro {
    overflow: hidden;
    height: 30px;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/about/h2.svg);
    background-repeat: no-repeat;
    background-size: 710px 132px;
}

.about-service {
    background-position: 0 5px;
}
.about-server {
    background-position: 0 -38px;
}
.about-mail {
    background-position: 0 -83px;
}

.about-link {
    position: relative;
    height: 0;
}

.about-service-link1,
.about-service-link2,
.about-server-link1,
.about-server-link2,
.about-mail-link1,
.about-mail-link2 {
    position: absolute;
    top: -32px;
    display: block;
    overflow: hidden;
    height: 26px;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/about/btn.svg);
    background-repeat: no-repeat;
    background-size: 369px 96px;
}

.about-service-link1 {
    right: 141px;
    width: 179px;
    background-position: 0 0;
}
.about-service-link2 {
    right: -3px;
    width: 137px;
    background-position: -191px 0;
}
.about-server-link1 {
    right: 141px;
    width: 179px;
    background-position: 0 -35px;
}
.about-server-link2 {
    right: -3px;
    width: 137px;
    background-position: -191px -35px;
}
.about-mail-link1 {
    right: 183px;
    width: 179px;
    background-position: 0 -70px;
}
.about-mail-link2 {
    right: -3px;
    width: 179px;
    background-position: -190px -70px;
}

/* SERVICE-HP SERVICE-MAIL --- */

h2.servicehp {
    overflow: hidden;
    height: 25px;
    margin: 0 0 5px;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/abouthp/h2_service_hp.gif);
    background-repeat: no-repeat;
}

.servicehp-01 {
    background-position: 0 0;
}
.servicehp-02 {
    background-position: 0 -30px;
}
.servicehp-03 {
    width: 392px;
    background-position: 0 -60px;
}
.servicehp-03-2 {
    background-position: 0 -90px;
}
.servicehp-04 {
    background-position: 0 -120px;
}
.servicehp-05 {
    background-position: 0 -150px;
}
.servicehp-06 {
    background-position: 0 -180px;
}
.servicehp-07 {
    background-position: 0 -210px;
}
.servicehp-08 {
    background-position: 0 -240px;
}
.servicehp-09 {
    background-position: 0 -270px;
}
.servicehp-10 {
    background-position: 0 -300px;
}
.servicehp-11 {
    background-position: 0 -330px;
}
.servicehp-12 {
    background-position: 0 -360px;
}
.servicehp-13 {
    background-position: 0 -390px;
}

h2.servicemail {
    overflow: hidden;
    height: 25px;
    margin: 0 0 5px;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/aboutmail/h2_service_mail.gif);
    background-repeat: no-repeat;
}

.servicemail-01 {
    background-position: 0 0;
}
.servicemail-02 {
    background-position: 0 -30px;
}
.servicemail-03 {
    background-position: 0 -60px;
}
.servicemail-04 {
    background-position: 0 -90px;
}
.servicemail-05 {
    background-position: 0 -120px;
}
.servicemail-06 {
    background-position: 0 -150px;
}
.servicemail-07 {
    background-position: 0 -180px;
}
.servicemail-08 {
    background-position: 0 -210px;
}
.servicemail-09 {
    background-position: 0 -240px;
}
.servicemail-10 {
    background-position: 0 -270px;
}


ul.service {
    margin: 0 0 30px;
}
.service li {
    margin: 0;
}

/* -------------------------------------------------------------------
 SPEC
 --------------------------------------------------------------------- */

.spec #container #content .wrapper {
    background: url(../../../img/common/bg_main_1column.png) repeat-y 0 50%;
}

.spec #body {
    width: 721px;
    padding: 10px 25px 0;
}

.spec .main-body {
    width: 695px;
    margin: 0 auto;
}

.spec h1 {
    width: 100%;
}

.spec .list-link {
    margin-bottom: 30px;
    padding: 10px;
    border: 1px solid #d3e7ef;
    border-radius: 4px;
    background-color: #ecf7fb;
}

.spec .list-link a {
    padding: 2px 0 0 18px;
    text-decoration: none;
    color: #4d92ab;
    background-image: url(../../../img/default/service/spec/spec-arrow.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 12px 12px;
}

.spec .list-link a:hover {
    text-decoration: underline;
}

.spec .spec-h2 {
    overflow: hidden;
    height: 25px;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/spec/spec-h2.svg);
    background-repeat: no-repeat;
    background-size: 413px 347px;
}

.spec .spec-h2-system {
    background-position: 0 -7px;
}

.spec .spec-h2-webserver {
    background-position: 0 -52px;
}

.spec .spec-h2-mailserver {
    background-position: 0 -97px;
}

.spec .spec-h2-ftpserver {
    background-position: 0 -143px;
}

.spec .spec-h2-cgi {
    background-position: 0 -189px;
}

.spec .spec-h2-database {
    background-position: 0 -230px;
}

.spec .spec-h2-waf {
    background-position: 0 -282px;
}

.spec .spec-h2-limit {
    background-position: 0 -324px;
}

.spec .sub-text {
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f6f7f7;
}

.spec .body-bottom p#go-pagetop {
    width: 73px;
    height: 23px;
    margin: 0 0 0 646px;
    padding-top: 10px;
}

/* -------------------------------------------------------------------
 BEGINNER 1Column
 --------------------------------------------------------------------- */

.beginner div#container div#content div.wrapper {
    background: url(../../../img/common/bg_main_1column.png) repeat-y 0 50%;
}

.beginner div#body {
    display: block;
    width: 721px;
    height: auto;
}

body.beginner h1 {
    overflow: hidden;
    width: 721px;
    white-space: nowrap;
    text-indent: 100%;
    background-repeat: no-repeat;
    background-position: top left;
}

.beginner .body-bottom #go-pagetop {
    width: 73px;
    height: 23px;
    margin: 0 0 0 646px;
    padding-top: 10px;
}

#beginner_beginning,
#beginner_planchart {
    position: relative;
    width: 701px;
    height: auto;
    margin: 0 auto 40px;
}

#beginner_beginning h1,
#beginner_feeleasy h1,
#beginner_planchart h1 {
    position: relative;
    top: 0;
    left: -6px;
    overflow: hidden;
    height: 24px;
    margin: 0 0 10px;
    white-space: nowrap;
    text-indent: 110%;
    background-image: url(../../../img/default/service/beginner/h1_beginner.svg);
    background-repeat: no-repeat;
    background-size: 710px;
}
#beginning_beginner h1 {
    background-position: 0 0;
}
#beginner_feeleasy h1 {
    background-position: 0 -44px;
}
#beginner_planchart h1 {
    background-position: 0 -89px;
}

#beginner_beginning table {
    width: 700px;
    text-align: left;
    background-color: #f9f6d2;
}
#beginner_beginning table th {
    padding: 15px 12px 15px 18px;
}
#beginner_beginning table td.explanation {
    width: 43%;
    padding: 10px;
}
#beginner_beginning table td.howtouse {
    width: 43%;
    padding: 15px;
}
#beginner_beginning td.howtouse dl {
    font-size: 90%;
    padding: 15px;
    background-color: #fff;
}
#beginner_beginning table tr.beginner_website {
    border-bottom: 2px dashed #f7931e;
}
#beginner_beginning td.howtouse ul li {
    margin: 0 0 0 15px;
    list-style: disc;
}

.feeleasy_point {
    overflow: hidden;
    width: 630px;
    margin: 0 auto;
}

#beginner_feeleasy h2 {
    overflow: hidden;
    width: 292px;
    height: 29px;
    margin: 0 auto 10px;
    white-space: nowrap;
    text-indent: 110%;
    background-image: url(../../../img/default/service/beginner/h2.svg);
    background-repeat: no-repeat;
    background-size: 292px;
}

.feeleasy_point div {
    float: left;
    width: 132px;
    height: 112px;
    margin: 0 12px;
    text-align: center;
    background-image: url(../../../img/default/service/beginner/obj_feeleasy.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 132px;
}

.feeleasy_point p {
    font-size: 90%;
    margin: 68px 0 0;
}
.feeleasy_point strong {
    font-weight: bold;
    color: #f4721c;
}

.feeleasy_point .viruscheck {
    background-position: 0 0;
}
.feeleasy_point .waf {
    background-position: 0 -113px;
}
.feeleasy_point .backup {
    background-position: 0 -225px;
}
.feeleasy_point .ssl {
    background-position: 0 -338px;
}

.beginner_qa dt {
    font-size: 110%;
    position: relative;
    z-index: 1;
    top: 19px;
    left: 8px;
    display: inline-block;
    padding: 10px 15px 10px 10px;
    color: #fff;
    background-color: #47bfbc;
}
.beginner_qa dt:after {
    position: absolute;
    top: 50%; left: -6px;
    display: block;
    width: 0;
    height: 0;
    margin-top: -10px;
    content: '';
    border-width: 10px 10px 10px 0;
    border-style: solid;
    border-color: transparent #47bfbc transparent transparent;
}
.beginner_qa dd {
    position: relative;
    z-index: 0;
    display: block;
    margin: 0 10px 0 27px;
    padding: 25px 20px 20px;
    background-color: #f9f6d2;
}

#plan_chart h1 {
    top: 0;
    left: -6px;
    overflow: hidden;
    height: 24px;
    margin: 0 0 10px;
    white-space: nowrap;
    text-indent: 110%;
    background-image: url(../../../img/default/service/beginner/h1_chart.svg);
    background-size: 710px;
}

#plan_chart h1,
#chart_area {
    position: relative;
    background-repeat: no-repeat;
}

#chart_area {
    width: 598px;
    height: 622px;
    margin: 0 auto;
    background-image: url(../../../img/default/service/beginner/bg_chart.svg);
    background-size: 598px;
}

#chart_area ul li {
    line-height: 1.4;
    position: absolute;
    display: block;
    overflow: hidden;
    width: 168px;
    height: 192px;
    text-align: center;
    background-image: url(../../../img/default/service/beginner/question_chart.svg);
    background-repeat: no-repeat;
    background-size: 168px;
}

#chart_area .q1 {
    top: 0;
    left: 212px;
    background-position: 0 0;
}
#chart_area .q1 p {
    margin-top: 80px;
}
#chart_area .q2 {
    top: 159px;
    left: 95px;
    background-position: 0 -214px;
}
#chart_area .q2 p {
    margin: 62px 0 0 5px;
}
#chart_area .q3 {
    top: 154px;
    left: 331px;
    padding: 10px 0 0;
    background-position: 0 -435px;
}
#chart_area .q3 p {
    margin-top: 55px;
}
#chart_area .q4 {
    top: 393px;
    left: -2px;
    padding: 10px 0 0;
    background-position: 0 -697px;
}
#chart_area .q4 p {
    margin-top: 18px;
}
#chart_area .q5 {
    top: 400px;
    left: 216px;
    padding: 10px 0 0;
    background-position: 0 -931px;
}
#chart_area .q5 p {
    margin-top: 11px;
}
#chart_area .q6 {
    top: 396px;
    left: 431px;
    padding: 10px 0 0;
    background-position: 0 -1160px;
}
#chart_area .q6 p {
    margin-top: 37px;
}

#chart_area strong {
    font-size: 160%;
    display: block;
}

#result_area {
    overflow: hidden;
    margin: 0 auto 20px;
}

#result_area ul {
    overflow: hidden;
    width: 700px;
}

#result_area ul li {
    float: left;
    overflow: hidden;
    width: 170px;
    padding: 0 0 17px;
    border-radius: 5px;
    background-image: url(../../../img/default/service/beginner/obj_result.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 800px;
}

#result_area p {
    display: block;
    width: 145px;
    height: 213px;
    margin: 133px auto 0;
}
#result_area strong {
    font-weight: bold;
}

#result_area .economy {
    margin: 0 6px 0 0;
    background-color: #c5eab0;
    background-position: -11px 5px;
}
#result_area .lite {
    margin: 0 6px 0 0;
    background-color: #f7d5e3;
    background-position: -212px 5px;
}
#result_area .standard {
    margin: 0 6px 0 0;
    background-color: #91eaf9;
    background-position: -418px 5px;
}
#result_area .enterprise {
    margin: 0;
    background-color: #f7d0c1;
    background-position: -620px 5px;
}

#result_area .morebtn {
    font-size: 14px;
    width: 146px;
    margin: 0 auto 6px;
    padding: 9px 0;
    color: #fff;
    border: none;
    border-radius: 3px;
    display: block;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
}

#result_area .economy .morebtn {
    background-color: #60cc42;
    box-shadow: rgb(106, 178, 4) 0 5px 0 0;
}
#result_area .lite .morebtn {
    background-color: #f492b3;
    box-shadow: rgb(232, 124, 166) 0 5px 0 0;
}
#result_area .standard .morebtn {
    background-color: #14ade2;
    box-shadow: rgb(27, 164, 201) 0 5px 0 0;
}
#result_area .enterprise .morebtn {
    background-color: #f27b2c;
    box-shadow: rgb(229, 99, 26) 0 5px 0 0;
}

.beginner #recommend_area {
    width: 660px;
    height: auto;
    margin: 0 auto 10px;
    padding: 20px;
    background-color: #bff4f7;
    background-image: url(../../../img/default/service/beginner/obj_10dayfreetrial.svg);
    background-repeat: no-repeat;
    background-position: 536px 22px;
    background-size: 136px;
}

.beginner #recommend_area h2 {
    font-size: 130%;
    font-weight: bold;
    margin: 0 0 10px;
    color: #199ecc;
}

.beginner #recommend_area .topbox {
    width: 500px;
    margin: 0 0 14px;
}


/* -------------------------------------------------------------------
 REASON 1Column
 --------------------------------------------------------------------- */

.reason div#container div#content div.wrapper {
    background: url(../../../img/common/bg_main_1column.png) repeat-y 0 50%;
}

.reason div#body {
    display: block;
    width: 721px;
    height: auto;
}

body.reason h1 {
    overflow: hidden;
    width: 721px;
    white-space: nowrap;
    text-indent: 100%;
    background-repeat: no-repeat;
    background-position: top left;
}

#reason-btn {
    overflow: hidden;
    width: 710px;
    height: 77px;
    margin: 15px 0 50px;
}

#reason-btn a {
    display: block;
    float: left;
    width: 168px;
    height: 77px;
    margin: 0 9px 5px 0;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/reason/btn_nav.svg);
    background-repeat: no-repeat;
    background-size: 168px;
}
.btn_reason1 {
    background-position: 0 0;
}
.btn_reason2 {
    background-position: 0 -90px;
}
.btn_reason3 {
    background-position: 0 -180px;
}
.btn_reason4 {
    background-position: 0 -270px;
}

#reason1,
#reason3 {
    background-color: #c5f3ff;
}

#reason1,
#reason3,
#reason2 {
    position: relative;
    width: 689px;
    height: auto;
    margin: 0 auto 60px;
    padding: 64px 7px 7px;
    border-radius: 3px;
}
#reason2,#reason4{
    background-color: #cdf9f6;
}
#reason4 {
    position: relative;
    width: 689px;
    margin: 0 auto 10px;
    padding: 64px 7px 7px;
}

#reason4,
.reason-box {
    height: auto;
    border-radius: 3px;
}

.reason-box {
    line-height: 1.8;
    padding: 25px;
    background-color: #fff;
}

#reason1 h1,
#reason2 h1,
#reason3 h1,
#reason4 h1 {
    position: absolute;
    z-index: 1;
    top: -19px;
    left: 0;
    display: block;
    overflow: hidden;
    width: 700px;
    height: 77px;
    margin: 0;
    white-space: nowrap;
    text-indent: 110%;
    background-image: url(../../../img/default/service/reason/h1_reason.svg);
    background-repeat: no-repeat;
    background-size: 677px;
}

#reason1 .head_reason1 {
    background-position: 0 0;
}
#reason2 .head_reason2 {
    background-position: 0 -106px;
}
#reason3 .head_reason3 {
    background-position: 0 -212px;
}
#reason4 .head_reason4 {
    background-position: 0 -316px;
}

#reason1 .reason-2col {
    height: 193px;
    background-position: 1px 6px;
}

#reason1 .reason-2col,
#reason2 .reason-2col {
    overflow: hidden;
    width: 630px;
    margin: 0;
    padding: 0;
    background: url(../../../img/default/service/reason/obj.svg) no-repeat top left;
    background-size: 159px;
}

#reason2 .reason-2col {
    height: 185px;
    background-position: 1px -182px;
}

#reason3 .reason-2col {
    height: 216px;
    background-position: -1px -359px;
}

#reason3 .reason-2col,
#reason4 .reason-2col {
    overflow: hidden;
    width: 630px;
    margin: 0;
    padding: 0;
    background: url(../../../img/default/service/reason/obj.svg) no-repeat top left;
    background-size: 159px;
}

#reason4 .reason-2col {
    height: 140px;
    background-position: 0 -577px;
}

.reason-2col p {
    float: right;
    width: 456px;
    height: 200px;
}

.reason .body-bottom #go-pagetop,
.reason .body-bottom p#go-pagetop {
    width: 73px;
    height: 23px;
    margin: 0 0 0 646px;
    padding-top: 10px;
}

/* -------------------------------------------------------------------
 RYOKIN 1Column
 --------------------------------------------------------------------- */

.ryokin div#container div#content div.wrapper {
    background: url(../../../img/common/bg_main_1column.png) repeat-y 0 50%;
}

.ryokin div#body {
    display: block;
    width: 721px;
    height: auto;
}

body.ryokin h1 {
    width: 721px;
    background-position: top left;
}

body.ryokin h1,
body.ryokin h2 {
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    background-repeat: no-repeat;
}

body.ryokin h2 {
    height: 30px;
    background-image: url(../../../img/default/service/ryokin/h2.svg);
    background-size: 710px 132px;
}

body.ryokin table {
    width: 698px;
    height: auto;
    margin: 0 auto 20px;
    text-align: center;
    border: 3px solid;
}

body.ryokin .head {
    padding: 7px 0 7px 3px;
    text-align: left;
    color: #fff;
    background-color: #6dc9c9;
}

body.ryokin table th {
    width: 145px;
    padding: 15px 0;
    text-align: center;
    border: 2px solid;
}

body.ryokin table td {
    width: 26.8%;
}

body.ryokin table td,
#price-server table td {
    border-width: 2px;
    border-style: solid;
}

#price-server table td {
    width: 20%;
}

body.ryokin .price-fontsize {
    font-size: 160%;
}

#price-server {
    width: 700px;
    height: auto;
    margin: 0 0 30px;
    padding: 0;
}

body.ryokin #price-server h2 {
    background-position: 0 -40px;
}

#price-server h3.initialcost {
    overflow: hidden;
    height: 20px;
    margin: 3px 2px;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/ryokin/h3_table_initialcost.gif);
    background-repeat: no-repeat;
    background-size: 82px 20px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    #price-server h3.initialcost {
        background-image: url(../../../img/default/service/ryokin/h3_table_initialcost@2x.png);
    }
}

#price-server h3.monthlysum {
    overflow: hidden;
    height: 20px;
    margin: 3px 2px;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/ryokin/h3_table_monthlysum.gif);
    background-repeat: no-repeat;
    background-size: 82px 20px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    #price-server h3.monthlysum {
        background-image: url(../../../img/default/service/ryokin/h3_table_monthlysum@2x.png);
    }
}

#price-server table,
#price-server table th,
#price-server table td {
    border-color: #6dc9c9;
}
#price-server table th {
    background-color: #daf7fa;
}
#price-server td.economy {
    font-weight: bold;
    padding: 15px 0;
    color: #e25470;
    background-color: #f6bbcd;
}
#price-server td.lite {
    font-weight: bold;
    padding: 15px 0;
    color: #3d8e99;
    background-color: #a9e0ed;
}
#price-server td.standard {
    font-weight: bold;
    padding: 15px 0;
    color: #a08938;
    background-color: #e2da7e;
}
#price-server td.enterprise {
    font-weight: bold;
    width: 23%;
    padding: 15px 0;
    color: #698093;
    background-color: #b3cce5;
}
#price-server .price-initialcost td {
    padding: 15px 0 10px;
}

.price-campaign {
    font-size: 85%;
    line-height: 1.7;
    position: relative;
    z-index: 0;
    display: inline-block;
    width: 85%;
    margin: 10px auto 0;
    padding: 3px;
    color: #fbf200;
    border-radius: 3px;
    background-color: #ff685c;
}
.price-campaign:after {
    position: absolute;
    top: -8px; left: 50%;
    display: block;
    width: 0;
    height: 0;
    margin-left: -8px;
    content: '';
    border-width: 0 8px 8px;
    border-style: solid;
    border-color: transparent transparent #ff685c;
}
.price-campaign strong,
.price-campaign a.strong {
    font-size: 150%;
}

.price-campaign a {
    color: #fbf200;
}

.price-campaign-monthlysum {
    position: absolute;
    z-index: 0;
    right: 52px;
    display: inline-block;
    width: 15%;
    margin: 22px auto 0;
    padding: 3px;
    color: #fbf200;
    border-radius: 3px;
    background-color: #ff685c;
}
.price-campaign-monthlysum strong,
.price-campaign-monthlysum a {
    font-size: 130%;
    color: #fbf200;
}

.price-otoku {
    right: 65px;
    width: 50%;
}

.price-otoku,
.price-otoku-campaign {
    position: absolute;
    z-index: 0;
    padding: 3px;
    color: #fbf200;
    border-radius: 3px;
    background-color: #ff685c;
}

.price-otoku-campaign {
    right: 203px;
    width: 30%;
}
.price-otoku strong,
.price-otoku-campaign strong {
    font-size: 130%;
}

body.ryokin #price-option h2 {
    background-position: 0 -80px;
}

#price-option table,
#price-option table th,
#price-option table td {
    padding: 15px 0;
    border-color: #b2b2b2;
}
#price-option table th {
    background-color: #e6ebeb;
}
#price-option .option-head th,
#price-option .option-head td {
    background-color: #d0d6d6;
}
#price-option .option-head td a {
    color: #000;
}
.price-option-otoku {
    font-size: 85%;
    line-height: 1.6;
    position: relative;
    z-index: 0;
    display: inline-block;
    width: 80%;
    margin: 10px auto 0;
    padding: 3px;
    color: #fbf200;
    border-radius: 3px;
    background-color: #ff685c;
}
.price-option-otoku:after {
    position: absolute;
    top: -8px; left: 50%;
    display: block;
    width: 0;
    height: 0;
    margin-left: -8px;
    content: '';
    border-width: 0 8px 8px;
    border-style: solid;
    border-color: transparent transparent #ff685c;
}
.price-option-otoku strong {
    font-size: 130%;
}

/* style-calculator */
#calculator {
    overflow: hidden;
    width: 690px;
    height: auto;
    margin: 15px 0 25px;
    padding: 15px 0 10px 10px;
    border-radius: 3px;
    background-color: #fffdae;
}

body.ryokin #calculator h2 {
    background-position: 0 0;
}

.select-wrap-agreement,
.select-wrap-plan,
.select-wrap-period {
    position: relative;
    display: block;
    float: left;
    overflow: hidden;
    color: #333;
    border: 2px solid #b2b2b2;
    border-radius: 2px;
    background-color: #fff;
}

.select-wrap-agreement select,
.select-wrap-plan select,
.select-wrap-period select {
    font-size: 100%;
    line-height: 1.5;
    position: relative;
    z-index: 15;
    display: block;
    height: 32px;
    margin: 0;
    padding: 0 0 0 5px;
    border: 0;
    outline: none;
    background: transparent;

    -webkit-appearance: none;
       -moz-appearance: none;
         -o-appearance: none;
            appearance: none;
}

.select-wrap-agreement:before,
.select-wrap-plan:before,
.select-wrap-period:before {
    position: absolute;
    z-index: 10;
    top: 13px;
    right: 9px;
    content: '';
    border: 6px solid transparent;
    border-top-color: #575353;
}
.select-wrap-agreement:after,
.select-wrap-plan:after,
.select-wrap-period:after {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    width: 30px;
    height: 32px;
    content: '';
    background-color: #e6ebeb;
}

.select-wrap-agreement {
    width: 125px;
}
.select-wrap-agreement select {
    width: 120%;
    width: calc(60% + 5em);
}

.select-wrap-plan {
    width: 185px;
}
.select-wrap-plan select {
    width: 120%;
    width: calc(75% + 5em);
}

.select-wrap-period {
    width: 90px;
}
.select-wrap-period select {
    width: 120%;
    width: calc(50% + 5em);
}

#calculator .multiplication {
    display: block;
    float: left;
    overflow: hidden;
    width: 33px;
    height: 34px;
    margin: 0;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/ryokin/obj_multiplication.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 22px 22px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    #calculator .multiplication {
        background-image: url(../../../img/default/service/ryokin/obj_multiplication@2x.png);
    }
}

#cal-results {
    font-size: 110%;
    float: left;
    width: 197px;
    height: 40px;
    margin: 0 0 0 5px;
    padding: 6px 0 0;
    text-align: right;
    letter-spacing: 1px;
    color: #ff685c;
    background-image: url(../../../img/default/service/ryokin/bg_result.gif);
    background-repeat: no-repeat;
    background-position: 0 -3px;
}
#cal-results strong {
    font-size: 200%;
    font-weight: bold;
}

/* style-blink */
.blinking {
    -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-animation: animationFrames ease 3s;
            animation: animationFrames ease 3s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}

@keyframes animationFrames {
    0%,
    33% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
@-webkit-keyframes animationFrames {
    66%,
    100%,
    0%,
    33% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    66%,
    100% {
        opacity: 1;
    }
}

body.ryokin p#go-pagetop {
    width: 73px;
    height: 23px;
    margin: 0 0 0 650px;
    padding-top: 10px;
}


/* -------------------------------------------------------------------
 CAMPAIGN
 --------------------------------------------------------------------- */

.cam-atten {
    margin: 5px 0;
    padding: 1px 0 0 18px;
    color: #0083d3;
    background: url(../../../img/common/icon/icon_bullet_03.gif) no-repeat 0 3px;
}

#server-replace a {
    margin: 0;
}


/* -------------------------------------------------------------------
 DOMAIN, DOMAIN-DOKU, DOMAIN-SUB
 --------------------------------------------------------------------- */

/* DOMAIN -------------------- */

body.domain h2 {
    overflow: hidden;
    height: 36px;
    margin: 0 0 15px;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/domain/h2_domain.gif);
    background-repeat: no-repeat;
}

.dololi {
    background-position: 0 0;
}
.dodoku {
    background-position: 0 -50px;
}
dl.dotop dt,
dl.dotop dd {
    margin-bottom: 10px;
}


/* DOMAIN-SUB ---------------- */

dl.sub {
    margin: 5px 20px 50px;
}

dl.sub dd {
    margin: 0 0 5px;
    padding: 8px 5px 5px 8px;
}

.dd-01 {
    color: #be3562;
    background-color: #ffe3f4;
}
.dd-02 {
    color: #2d428f;
    background-color: #d5f1ff;
}
.dd-03 {
    color: #067a00;
    background-color: #dbff9f;
}
.dd-04 {
    color: #824f29;
    background-color: #efeacc;
}
.dd-05 {
    color: #ce3535;
    background-color: #ffe6d6;
}
.dd-06 {
    color: #700080;
    background-color: #e0dcff;
}


/* -------------------------------------------------------------------
 OPTION
 --------------------------------------------------------------------- */

h2.option {
    clear: both;
    overflow: hidden;
    height: 40px;
    margin: 0 0 10px;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/option/h2_option.gif);
    background-repeat: no-repeat;
}

.ssl-original {
    background-position: 0 0;
}
.anti-virus {
    background-position: 0 -40px;
}
.backup {
    background-position: 0 -80px;
}

.op-item li {
    height: 23px;
    margin: 5px 0;
    padding: 2px 0 0 138px;
    background-image: url(../../../img/default/service/option/obj_op_item.gif);
    background-repeat: no-repeat;
}

.op-plan {
    background-position: 0 0;
}
.op-ryokin {
    background-position: 0 -25px;
}


/* -------------------------------------------------------------------
 TOKUTEN
 --------------------------------------------------------------------- */

h2.tokuten {
    clear: both;
    overflow: hidden;
    height: 30px;
    margin: 0 0 10px;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/tokuten/h2_tokuten.gif);
    background-repeat: no-repeat;
}

.lolipoblog {
    background-position: 0 0;
}
.cartmini {
    background-position: 0 -30px;
}
.loliftp {
    background-position: 0 -60px;
}
.lolimailer {
    background-position: 0 -90px;
}
.app-iphone {
    background-position: 0 -120px;
}
.google-adwords {
    background-position: 0 -180px;
}

dl.tokuten {
    width: 490px;
}

.tokuten-l {
    float: left;
    width: 200px;
    margin: 0 0 20px;
}

.tokuten-r {
    float: right;
    width: 275px;
    margin: 0 0 20px;
}


/* -------------------------------------------------------------------
 DOMAIN-LIST
---------------------------------------------------------------------- */

h2.domain-list {
    overflow: hidden;
    height: 28px;
    margin: 0 0 7px;
    white-space: nowrap;
    text-indent: 100%;
    background-repeat: no-repeat;
}

.pop,
.cool,
.short,
.stylish,
.kawaii,
.odd {
    background-image: url(../../../img/default/service/domainlist/h2_domain_list.gif);
    background-repeat: no-repeat;
}

.pop {
    background-position: 0 0;
}
.cool {
    background-position: 0 -30px;
}
.short {
    background-position: 0 -60px;
}
.stylish {
    background-position: 0 -90px;
}
.kawaii {
    background-position: 0 -120px;
}
.odd {
    background-position: 0 -150px;
}


dl.dolist {
    width: 490px;
    margin: 0 0 20px;
    text-align: center;
}

dl.dolist dt {
    font-weight: bold;
    width: 170px;
}

dl.dolist dt,
dl.dolist dd {
    float: left;
    padding: 4px 0;
}

dl.dolist dd {
    width: 160px;
}

.tbg01 {
    background-color: #ec557f;
}
.tbg02 {
    background-color: #1680d3;
}
.tbg03 {
    background-color: #4ba402;
}
.tbg04 {
    background-color: #927a09;
}
.tbg05 {
    background-color: #f45e40;
}
.tbg06 {
    background-color: #974bbb;
}

.bg00 {
    background-color: #feffe8;
}
.bg01 {
    background-color: #fff0f7;
}
.bg02 {
    background-color: #d5f1ff;
}
.bg03 {
    background-color: #e9ffc4;
}
.bg04 {
    background-color: #f3f0da;
}
.bg05 {
    background-color: #fff0e6;
}
.bg06 {
    background-color: #eae8ff;
}

.txt01,
.txt02,
.txt03,
.txt04,
.txt05,
.txt06 {
    font-size: 115%;
}

.txt00 {
    color: #fff;
}
.txt01 {
    color: #ec557f;
}
.txt02 {
    color: #1680d3;
}
.txt03 {
    color: #4ba402;
}
.txt04 {
    color: #927a09;
}
.txt05 {
    color: #f45e40;
}
.txt06 {
    color: #974bbb;
}

/* -------------------------------------------------------------------
 SERVICE-PLAN-ECONOMY
 --------------------------------------------------------------------- */

.main-body-plan-economy {
    margin: 0 10px 0 0;
}
.main-body-plan-economy .topimg {
    position: relative;
    display: block;
    width: 510px;
    height: 239px;
    margin: 0 0 18px;
    background-image: url(../../../img/default/service/plan-economy/obj_top_bg.gif);
    background-repeat: no-repeat;
    background-size: 510px 239px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    .main-body-plan-economy .topimg {
        background-image: url(../../../img/default/service/plan-economy/obj_top_bg@2x.png);
    }
}
.main-body-plan-economy .topimg p {
    line-height: 1.8;
    position: absolute;
    top: 75px;
    left: 19px;
}
.main-body-plan-economy .topimg img {
    position: absolute;
    top: 140px;
    left: 16px;
}

.main-body-plan-economy h2.subtitle-point {
    overflow: hidden;
    width: 510px;
    height: 32px;
    margin: 0;
    margin: 0 0 12px;
    white-space: nowrap;
    text-indent: 110%;
    background-image: url(../../../img/default/service/plan-economy/h2_point.gif);
    background-repeat: no-repeat;
    background-size: 510px 32px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    .main-body-plan-economy h2.subtitle-point {
        background-image: url(../../../img/default/service/plan-economy/h2_point@2x.png);
    }
}

.main-body-plan-economy ul {
    margin: 0 0 25px;
    padding: 0 0 0 10px;
}

.main-body-plan-economy #twenty-domains {
    width: 510px;
    height: 135px;
    margin: 0 0 15px;
    padding: 0;
    background: url(../../../img/default/service/plan-economy/obj_20domain.gif) no-repeat top left;
    background-size: 152px 135px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    .main-body-plan-economy #twenty-domains {
        background-image: url(../../../img/default/service/plan-economy/obj_20domain@2x.png);
    }
}

.main-body-plan-economy #twenty-domains div,
.main-body-plan-economy #manymailaddress div {
    float: right;
    width: 350px;
    height: 150px;
}
.main-body-plan-economy #twenty-domains p,
.main-body-plan-economy #manymailaddress p {
    padding: 0 0 0 5px;
}

#twenty-domains h2 {
    overflow: hidden;
    height: 28px;
    margin: 0 0 5px;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/plan-economy/h2_20domain.gif);
    background-repeat: no-repeat;
    background-size: 306px 28px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    #twenty-domains h2 {
        background-image: url(../../../img/default/service/plan-economy/h2_20domain@2x.png);
    }
}

.main-body-plan-economy .btn-more {
    display: block;
    float: right;
    width: 139px;
    height: 32px;
    margin: 4px 10px 0 0;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/plan-standard/btn_more.gif);
    background-repeat: no-repeat;
    background-size: 139px 32px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    .main-body-plan-economy .btn-more {
        background-image: url(../../../img/default/service/plan-standard/btn_more@2x.png);
    }
}

.main-body-plan-economy #manymailaddress {
    width: 510px;
    height: 150px;
    margin: 0;
    padding: 0;
    background: url(../../../img/default/service/plan-economy/obj_410mailaddress.gif) no-repeat top left;
    background-size: 152px 135px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    .main-body-plan-economy #manymailaddress {
        background-image: url(../../../img/default/service/plan-economy/obj_410mailaddress@2x.png);
    }
}

#manymailaddress h2 {
    overflow: hidden;
    height: 28px;
    margin: 0 0 5px;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/plan-economy/h2_410mailaddress.gif);
    background-repeat: no-repeat;
    background-size: 277px 28px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    #manymailaddress h2 {
        background-image: url(../../../img/default/service/plan-economy/h2_410mailaddress@2x.png);
    }
}

.main-body-plan-economy .otherpoints {
    overflow: hidden;
    width: 500px;
    padding: 0 0 0 5px;
}

.main-body-plan-economy .otherpoints div {
    width: 247px;
    min-height: 100px;
    margin: 0;
    background-image: url(../../../img/default/service/plan-economy/obj_otherpoints.gif);
    background-repeat: no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    .main-body-plan-economy .otherpoints div {
        background-image: url(../../../img/default/service/plan-economy/obj_otherpoints@2x.png);
        background-size: 138px 850px;
    }
}

.main-body-plan-economy .otherpoints h3 {
    font-size: 110%;
    font-weight: bold;
    float: right;
    width: 163px;
}

.main-body-plan-economy .otherpoints p {
    float: right;
    width: 163px;
}

.main-body-plan-economy .otherpoints h3 strong {
    font-weight: bold;
    color: #ff7a17;
}

#spec-economy {
    width: 500px;
    padding: 5px;
    border-radius: 3px;
    background-color: #fae1e5;
}

#spec-economy h1 {
    float: left;
    overflow: hidden;
    width: 330px;
    height: 32px;
    margin: 0;
    margin: 5px 0 10px 5px;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/plan-economy/h1_plantable.gif);
    background-repeat: no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    #spec-economy h1 {
        background-image: url(../../../img/default/service/plan-economy/h1_plantable@2x.png);
        background-size: 330px 32px;
    }
}

#spec-economy .btn_moreplan {
    float: right;
    margin: 5px 5px 0 0;
}


/* -------------------------------------------------------------------
 SERVICE-PLAN-LITE
 --------------------------------------------------------------------- */

.main-body-plan-lite {
    margin: 0 10px 0 0;
}
.main-body-plan-lite .topimg {
    position: relative;
    display: block;
    width: 510px;
    height: 239px;
    margin: 0 0 18px;
    background-image: url(../../../img/default/service/plan-lite/obj_top_bg.gif);
    background-repeat: no-repeat;
    background-size: 510px 239px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    .main-body-plan-lite .topimg {
        background-image: url(../../../img/default/service/plan-lite/obj_top_bg@2x.png);
    }
}
.main-body-plan-lite .topimg p {
    line-height: 1.8;
    position: absolute;
    top: 75px;
    left: 19px;
}
.main-body-plan-lite .topimg img {
    position: absolute;
    top: 140px;
    left: 16px;
}

.main-body-plan-lite h2.subtitle-point {
    overflow: hidden;
    width: 510px;
    height: 32px;
    margin: 0;
    margin: 0 0 12px;
    white-space: nowrap;
    text-indent: 110%;
    background-image: url(../../../img/default/service/plan-lite/h2_point.gif);
    background-repeat: no-repeat;
    background-size: 510px 32px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    .main-body-plan-lite h2.subtitle-point {
        background-image: url(../../../img/default/service/plan-lite/h2_point@2x.png);
    }
}

.main-body-plan-lite ul {
    margin: 0 0 25px;
    padding: 0 0 0 10px;
}

.main-body-plan-lite #wp-sixtyseconds {
    width: 510px;
    height: 150px;
    margin: 0 0 15px;
    padding: 0;
    background: url(../../../img/default/service/plan-lite/obj_wp60seconds.gif) no-repeat top left;
    background-size: 152px 135px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    .main-body-plan-lite #wp-sixtyseconds {
        background-image: url(../../../img/default/service/plan-lite/obj_wp60seconds@2x.png);
    }
}

.main-body-plan-lite #wp-sixtyseconds div,
.main-body-plan-lite #freemailaddress div {
    float: right;
    width: 350px;
    height: 150px;
}
.main-body-plan-lite #wp-sixtyseconds p,
.main-body-plan-lite #freemailaddress p {
    padding: 0 0 0 5px;
}

#wp-sixtyseconds h2 {
    overflow: hidden;
    height: 28px;
    margin: 0 0 5px;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/plan-lite/h2_wp60seconds.gif);
    background-repeat: no-repeat;
    background-size: 318px 28px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    #wp-sixtyseconds h2 {
        background-image: url(../../../img/default/service/plan-lite/h2_wp60seconds@2x.png);
    }
}

.main-body-plan-lite .btn-more {
    display: block;
    float: right;
    width: 139px;
    height: 32px;
    margin: 4px 10px 0 0;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/plan-standard/btn_more.gif);
    background-repeat: no-repeat;
    background-size: 139px 32px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    .main-body-plan-lite .btn-more {
        background-image: url(../../../img/default/service/plan-standard/btn_more@2x.png);
    }
}

.main-body-plan-lite #freemailaddress {
    width: 510px;
    height: 150px;
    margin: 0;
    padding: 0;
    background: url(../../../img/default/service/plan-lite/obj_freemailaddress.gif) no-repeat top left;
    background-size: 152px 135px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    .main-body-plan-lite #freemailaddress {
        background-image: url(../../../img/default/service/plan-lite/obj_freemailaddress@2x.png);
    }
}

#freemailaddress h2 {
    overflow: hidden;
    height: 28px;
    margin: 0 0 5px;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/plan-lite/h2_freemailaddress.gif);
    background-repeat: no-repeat;
    background-size: 318px 28px;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    #freemailaddress h2 {
        background-image: url(../../../img/default/service/plan-lite/h2_freemailaddress@2x.png);
    }
}

.main-body-plan-lite .otherpoints {
    overflow: hidden;
    width: 500px;
    padding: 0 0 0 5px;
}

.main-body-plan-lite .otherpoints div {
    width: 247px;
    min-height: 100px;
    margin: 0;
    background-image: url(../../../img/default/service/plan-lite/obj_otherpoints.gif);
    background-repeat: no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    .main-body-plan-lite .otherpoints div {
        background-image: url(../../../img/default/service/plan-lite/obj_otherpoints@2x.png);
        background-size: 138px 850px;
    }
}

.main-body-plan-lite .otherpoints h3 {
    font-size: 110%;
    font-weight: bold;
    float: right;
    width: 163px;
}

.main-body-plan-lite .otherpoints p {
    float: right;
    width: 163px;
}

.main-body-plan-lite .otherpoints h3 strong {
    font-weight: bold;
    color: #ff7a17;
}

#spec-lite {
    width: 500px;
    padding: 5px;
    border-radius: 3px;
    background-color: #cdf1f9;
}

#spec-lite h1 {
    float: left;
    overflow: hidden;
    width: 284px;
    height: 32px;
    margin: 0;
    margin: 5px 0 10px 5px;
    white-space: nowrap;
    text-indent: 100%;
    background-image: url(../../../img/default/service/plan-lite/h1_plantable.gif);
    background-repeat: no-repeat;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
                  (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx) {
    #spec-lite h1 {
        background-image: url(../../../img/default/service/plan-lite/h1_plantable@2x.png);
        background-size: 284px 32px;
    }
}

#spec-lite .btn_moreplan {
    float: right;
    margin: 5px 5px 0 0;
}

/* -------------------------------------------------------------------
 SERVICE-PLAN-LITE AND ECONOMY otherpoints
 --------------------------------------------------------------------- */

.otherpoints .domain {
     float: left;
     background-position: 0 0;
}

.otherpoints .mailaddress {
    float: right;
    background-position: 0 -152px;
}

.otherpoints .programing {
    float: left;
    background-position: 0 -304px;
}

.otherpoints .backup {
    float: right;
    background-position: 0 -456px;
}

.otherpoints .wafsecurity {
    float: left;
    background-position: 0 -608px;
}

.otherpoints .viruscheck {
    float: right;
    background-position: 0 -760px;
}

/* -------------------------------------------------------------------
 SERVICE-PLAN-STANDARD
 --------------------------------------------------------------------- */

.plan-standard #body {
    font-size: 14px;
    line-height: 1.8;
    display: block;
    width: 721px;
    height: auto;
}

.plan-standard #container #content div.wrapper {
    background: url(../../../img/common/bg_main_1column.png) repeat-y 0 50%;
}

.plan-standard section {
    clear: both;
    overflow: hidden;
    margin: 0 auto 40px;
}
.plan-standard section h1 {
    font-size: 25px;
    font-weight: bold;
    line-height: 1.5;
    width: auto;
    height: auto;
    margin: 0 0 20px;
    text-indent: inherit;
    color: #000;
}

.plan-standard .button {
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
    margin: 0 0 5px;
    padding: 10px 30px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 3px;
}
.plan-standard .button--blue {
    color: #fff;
    background: #14ade2;
    box-shadow: rgb(0,128,209) 0 5px 0 0;
}
.plan-standard .button--blue:hover {
    background: #1bb6ec;
}
.plan-standard .button--white {
    color: #000;
    background: #fff;
    box-shadow: rgb(229,229,229) 0 5px 0 0;
}
.plan-standard .button--white:hover {
    background: #f8f8f8;
}
.plan-standard .button--orange {
    color: #fff;
    background: #ff7a17;
    box-shadow: rgb(229,110,21) 0 5px 0 0;
}
.plan-standard .button--orange:hover {
    background: #ff8932;
}
.plan-standard .button--line {
    color: #14ade2;
    border: 1px solid #14ade2;
}
.plan-standard .button--line:hover {
    color: #0080d1;
    border: 1px solid #0080d1;
}
.plan-standard .button--order {
    font-size: 25px;
    display: block;
    width: 495px;
    height: 80px;
    margin: 0 auto;
}

.plan-standard .eyecatch {
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    margin: 10px 0 20px;
    padding: 25px 30px 30px;
    border-radius: 5px;
    background: #aeeef9;
    background-image: url(../../../img/default/service/plan-standard/bg_sites.svg);
    background-repeat: no-repeat;
    background-position: right 0 bottom 16px;
    background-size: 296px 106px;
}

.plan-standard .eyecatch-copy h1 {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
    color: #00444f;
}

.plan-standard .eyecatch-topic {
    float: left;
    margin: 20px 0 0;
}
.plan-standard .eyecatch-topic-caption {
    font-size: 15px;
    margin: 0 0 10px;
    padding: 2px 10px;
    color: #fff;
    border-radius: 5px;
    background: #00444f;
}
.plan-standard .eyecatch-topic-caption strong {
    color: #fed335;
}
.plan-standard .eyecatch-topic-spec li {
    line-height: 1;
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 10px;
    color: #fff;
    border-radius: 5px;
}
.plan-standard .eyecatch-topic-spec strong {
    font-family: 'Arial';
    font-size: 30px;
    font-weight: bold;
    margin: 0 3px 0;
}
.plan-standard .eyecatch-topic-spec li:nth-child(1) {
    background: #f28754;
}
.plan-standard .eyecatch-topic-spec li:nth-child(2) {
    background: #9e9e9e;
}

.plan-standard .eyecatch-image {
    float: right;
}

.plan-standard .introduce {
    float: left;
    width: 470px;
}

.plan-standard .recommend {
    font-size: 12px;
    float: right;
    width: 210px;
    padding: 10px;
    border-radius: 5px;
    background: #f5f5f5;
}
.plan-standard .recommend p {
    margin: 0 0 4px;
    text-align: center;
    color: #ff7a17;
}

.plan-standard .feature {
    overflow: hidden;
}
.plan-standard .feature-item {
    display: inline-block;
    float: left;
    width: 230px;
}
.plan-standard .feature-item:nth-child(2) {
    margin: 0 15px 0;
}
.plan-standard .feature-item h2 {
    font-weight: bold;
    margin: 0 0 5px;
    text-align: center;
    color: #000;
}
.plan-standard .feature-item-image {
    display: block;
    height: 150px;
    text-align: center;
}
.plan-standard .feature-item--php img {
    width: 140px;
}
.plan-standard .feature-item--access img {
    width: 170px;
    padding: 5px 0 0;
}
.plan-standard .feature-item--ssl img {
    width: 164px;
    padding: 8px 0 0;
}

.plan-standard .feature-item-text {
    margin: 0 0 10px;
}
.plan-standard .feature-item-text strong {
    color: #ff7a17;
}

.plan-standard .feature-item-to_detail {
    text-align: center;
}

.plan-standard .other_feature {
    overflow: hidden;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
}
.plan-standard .other_feature h2 {
    font-weight: bold;
    color: #000;
}
.plan-standard .other_feature strong {
    font-weight: bold;
    color: #ff7a17;
}
.plan-standard .other_feature-item {
    float: left;
    box-sizing: border-box;
    width: 50%;
    height: 140px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.plan-standard .other_feature-item-wrap {
    display: table;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 15px;
}
.plan-standard .other_feature-item-image {
    display: table-cell;
    vertical-align: middle;
}
.plan-standard .other_feature-item-image img {
    width: 76px;
    height: 76px;
}

.plan-standard .other_feature-item-text {
    display: table-cell;
    float: right;
    width: 240px;
    vertical-align: middle;
}

.plan-standard .telephone_support {
    position: relative;
    padding: 30px 30px 25px;
    color: #fff;
    border-radius: 5px;
    background: #208ce0;
}
.plan-standard .telephone_support h1 {
    font-size: 30px;
    margin: 0 0 10px;
    color: #fff;
}
.plan-standard .telephone_support-text p {
    width: 410px;
    margin: 0 0 20px;
}
.plan-standard .telephone_support-image {
    position: absolute;
    right: 30px;
    bottom: 35px;
    width: 250px;
    height: auto;
}

.plan-standard .spec {
    display: table;
    overflow: hidden;
    width: 100%;
    height: auto;
    margin: 0 0 1px;
    padding: 8px 0 0;
    background-color: #aeeef9;
}
.plan-standard .spec--sitebuild {
    border-radius: 5px 5px 0 0;
}
.plan-standard .spec--tool {
    border-radius: 0 0 5px 5px;
}

.plan-standard .spec h2 {
    font-size: 16px;
    display: table-cell;
    width: 121px;
    height: auto;
    padding: 0 0 0 10px;
    vertical-align: middle;
    color: #00444f;
}
.plan-standard .spec strong {
    font-size: 22px;
    font-weight: bold;
}
.plan-standard .spec .spec-item {
    display: table;
    float: left;
    width: 134px;
    height: 55px;
    margin: 0 0 10px 10px;
    border-radius: 5px;
    background-color: rgba(255,255,255,.8);
    box-shadow: rgba(102, 102, 102, .3) 2px 2px 0 1px;
}
.plan-standard .spec .spec-item-link {
    line-height: 1.3;
    display: table-cell;
    padding: 0 8px;
    text-align: left;
    vertical-align: middle;
    text-decoration: none;
    color: #00444f;
}

.plan-standard .spec_notion {
    overflow: hidden;
    margin: 10px 0;
}
.plan-standard .spec_notion-text {
    font-size: 12px;
    float: left;
    width: 460px;
}
.plan-standard .spec_notion-to_plan {
    float: right;
    width: 250px;
    text-align: right;
}

.plan-standard .order_form {
    margin: -20px 0 40px;
}

.plan-standard .body-bottom #go-pagetop {
    width: 73px;
    height: 23px;
    margin: 0 0 0 646px;
    padding-top: 10px;
}


/* -------------------------------------------------------------------
 SERVICE-PLAN-SPECLIST WITHOUT ENTERPRISE-PLAN
 --------------------------------------------------------------------- */

.spec-sitebuild,
.spec-security,
.spec-domain,
.spec-mail,
.spec-tool {
    display: table;
    overflow: hidden;
    width: 496px;
    height: auto;
    margin: 0 0 5px;
    padding: 5px 0 0 4px;
    border-radius: 3px;
}
.spec-sitebuild h2,
.spec-security h2,
.spec-domain h2,
.spec-mail h2,
.spec-tool h2 {
    font-size: 110%;
    display: table-cell;
    width: 90px;
    height: auto;
    vertical-align: middle;
    color: #fff;
}

.spec-sitebuild ul,
.spec-security ul,
.spec-domain ul,
.spec-mail ul,
.spec-tool ul {
    margin: 0;
    padding: 0;
}

.spec-sitebuild li,
.spec-security li,
.spec-domain li,
.spec-mail li,
.spec-tool li {
    font-size: 85%;
    display: table;
    float: left;
    width: 94px;
    height: 55px;
    margin: 0 0 6px 6px;
    border-radius: 3px;
    background-color: rgba(255,255,255,.8);
    box-shadow: rgba(102, 102, 102, .3) 2px 2px 0 1px;
}

.spec-sitebuild li a,
.spec-security li a,
.spec-domain li a,
.spec-mail li a,
.spec-tool li a {
    display: table-cell;
    width: 40px;
    height: 40px;
    padding: 0 0 0 3px;
    text-align: left;
    vertical-align: middle;
    text-decoration: none;
    color: #666;
}

.spec-sitebuild li strong,
.spec-security li strong,
.spec-domain li strong,
.spec-mail li strong,
.spec-tool li strong {
    font-size: 150%;
    font-weight: bold;
}

.spec-sitebuild .none,
.spec-security .none,
.spec-domain .none,
.spec-mail .none,
.spec-tool .none {
    background-color: inherit;
    box-shadow: none;
}

.spec-sitebuild li.not-available,
.spec-security li.not-available,
.spec-domain li.not-available,
.spec-mail li.not-available,
.spec-tool li.not-available {
    font-size: 85%;
    display: table;
    float: left;
    width: 94px;
    height: 55px;
    margin: 0 0 6px 6px;
    pointer-events: none;
    color: #7a7072;
    border-radius: 3px;
    background-color: rgba(175,175,175,.8);
    box-shadow: none;
}

.spec-sitebuild {
    background-color: #77d5d5;
}
.spec-security {
    background-color: #b2a3e6;
}
.spec-domain {
    background-color: #e88fb0;
}
.spec-mail {
    background-color: #eda473;
}
.spec-tool {
    background-color: #82cf4f;
}


/* -------------------------------------------------------------------
 SERVICE-PLAN-ENTERPRISE
 --------------------------------------------------------------------- */

.plan-enterprise #header-bg {
    position: absolute;
    z-index: 20;
    display: block;
    width: 783px;
    height: 181px;
    background-image: url(../../../img/common/bg_header_enterprise.png);
    background-repeat: no-repeat;
    background-position: 0 0;
}

.plan-enterprise #description {
    position: absolute;
    z-index: 23;
    top: 0;
    left: 5px;
    overflow: hidden;
    height: 180px;
    text-indent: -999em;
    background-image: url(../../../img/common/obj_ojisan_enterprise.png);
    background-repeat: no-repeat;
}

.plan-enterprise div#container div#content div.wrapper {
    background: url(../../../img/common/bg_main_1column.png) repeat-y 0 50%;
}

.plan-enterprise div#body {
    line-height: 1.8;
    display: block;
    width: 721px;
    height: auto;
}

body.plan-enterprise h1 {
    letter-spacing: .12em;
    background-image: none;
}

body.plan-enterprise section {
    clear: both;
    width: 691px;
    height: auto;
    margin: 0 auto 40px;
}

body.plan-enterprise section h1 {
    font-size: 170%;
    font-weight: bold;
    position: relative;
    left: -14px;
    height: auto;
    margin: 0;
    text-indent: inherit;
    letter-spacing: .12em;
    color: #333;
    background-image: none;
}

#strongpoint-enterpriseplan div {
    overflow: hidden;
    margin: 0 0 40px;
    background-image: url(../../../img/default/service/plan-enterprise/obj_strongpoint.svg);
    background-repeat: no-repeat;
    background-size: 149px 500px;
}
div.strongpoint01 {
    height: 122px;
    background-position: right 10px;
}
div.strongpoint02 {
    height: 186px;
    background-position: right -136px;
}
div.strongpoint03 {
    height: 146px;
    background-position: right -353px;
}

#strongpoint-enterpriseplan h2 {
    font-size: 140%;
    width: 511px;
    margin: 0 0 10px;
    padding: 0 0 1px;
    letter-spacing: .12em;
    color: #333;
    border-bottom: 1px solid #b3b3b3;
}

#strongpoint-enterpriseplan p {
    width: 511px;
}

#strongpoint-enterpriseplan .note {
    font-size: 11px;
    width: 490px;
    padding: 10px;
    background-color: #f2f2f2;
}

#spec-enterpriseplan a.link_plantable {
    font-size: 110%;
    position: relative;
    display: block;
    float: right;
    width: 166px;
    margin: 15px 0 40px;
    padding: 5px 0;
    text-decoration: none;
    color: #fff;
    background-color: #f7931e;
}

#spec-enterpriseplan a.link_plantable p {
    margin: 0 0 0 43px;
}

#spec-enterpriseplan a.link_plantable:before {
    position: absolute;
    top: 11px;
    left: 30px;
    width: 0;
    height: 0;
    content: ' ';
    border: 6px solid transparent;
    border-right-width: 0;
    border-left-color: #fff;
}

#serverspec-enterpriseplan table {
    width: 691px;
}
#serverspec-enterpriseplan tbody {
    margin: 0 0 10px;
    border-bottom: 10px solid #fff;
}
#serverspec-enterpriseplan th {
    font-size: 110%;
    padding: 0 0 0 13px;
    color: #fff;
    border-right: 3px solid #fff;
    background-color: #4351dd;
}
#serverspec-enterpriseplan th.color-light {
    background-color: #586aed;
}
#serverspec-enterpriseplan td {
    padding: 5px;
    border-bottom: 3px solid #fff;
    background-color: #f4f4f4;
}
#serverspec-enterpriseplan .spec-category {
    background-color: #e6e6e6;
}

.price-campaign-enterprise {
    line-height: 1.7;
    position: relative;
    z-index: 100;
    display: block;
    width: 40%;
    margin: 10px auto;
    padding: 3px;
    text-align: center;
    color: #f15a24;
    border-radius: 3px;
    background-color: #fbf200;
}
.price-campaign-enterprise:after {
    position: absolute;
    z-index: 100;
    top: 100%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    margin-left: -8px;
    content: '';
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: #fbf200 transparent transparent;
}

.plan-enterprise input[type=submit].link_order {
    font-size: 200%;
    display: block;
    width: 495px;
    margin: 0 auto 48px;
    padding: 17px 0 17px 22px;
    text-decoration: none;
    letter-spacing: .12em;
    color: #fff;
    background-color: #f15a24;
    box-shadow: rgb(196, 67, 28) 0 7px 0 0;
    border: none;
    cursor: pointer;
    background-image: url(../../../img/common/arrow/arrow_right_white.svg);
    background-repeat: no-repeat;
    background-position: 106px 29px;
}

.plan-enterprise input[type=submit].link_order:hover {
    background-color: #fb5e25;
    box-shadow: rgb(206, 71, 31) 0 7px 0 0;
}

.note-enterpriseplan {
    font-size: 11px;
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #f4f4f4;
}

.plan-enterprise .body-bottom #go-pagetop {
    width: 73px;
    height: 23px;
    margin: 0 0 0 646px;
    padding-top: 10px;
}


/* -------------------------------------------------------------------
 SERVICE-PLAN-SPECLIST ENTERPRISE
 --------------------------------------------------------------------- */

.spec-sitebuild-enterprise,
.spec-security-enterprise,
.spec-domain-enterprise,
.spec-mail-enterprise,
.spec-tool-enterprise {
    display: table;
    overflow: hidden;
    width: 691px;
    height: auto;
    margin: 0 0 1px;
    padding: 8px 0 0;
    background-color: #899fef;
}
.spec-sitebuild-enterprise h2,
.spec-security-enterprise h2,
.spec-domain-enterprise h2,
.spec-mail-enterprise h2,
.spec-tool-enterprise h2 {
    font-size: 110%;
    display: table-cell;
    width: 121px;
    height: auto;
    padding: 0 0 0 13px;
    vertical-align: middle;
    color: #fff;
}

.spec-sitebuild-enterprise ul,
.spec-security-enterprise ul,
.spec-domain-enterprise ul,
.spec-mail-enterprise ul,
.spec-tool-enterprise ul {
    margin: 0;
    padding: 0;
}

.spec-sitebuild-enterprise li,
.spec-security-enterprise li,
.spec-domain-enterprise li,
.spec-mail-enterprise li,
.spec-tool-enterprise li {
    display: table;
    float: left;
    width: 128px;
    height: 55px;
    margin: 0 0 9px 9px;
    background-color: rgba(255,255,255,.8);
    box-shadow: rgba(102, 102, 102, .3) 2px 2px 0 1px;
}

.spec-sitebuild-enterprise li a,
.spec-security-enterprise li a,
.spec-domain-enterprise li a,
.spec-mail-enterprise li a,
.spec-tool-enterprise li a {
    line-height: 1.3;
    display: table-cell;
    width: 40px;
    height: 40px;
    padding: 0 0 0 8px;
    text-align: left;
    vertical-align: middle;
    text-decoration: none;
    color: #666;
}

.spec-sitebuild-enterprise li strong,
.spec-security-enterprise li strong,
.spec-domain-enterprise li strong,
.spec-mail-enterprise li strong,
.spec-tool-enterprise li strong {
    font-size: 140%;
    font-weight: bold;
}

.spec-sitebuild-enterprise .none,
.spec-security-enterprise .none,
.spec-domain-enterprise .none,
.spec-mail-enterprise .none,
.spec-tool-enterprise .none {
    background-color: inherit;
    box-shadow: none;
}

.spec-tool-enterprise strong.campaign {
    font-size: 100%;
    display: block;
    margin: 0 7px 2px 0;
    text-align: center;
    color: #f15a24;
    background: #fbf200;
}


/* -------------------------------------------------------------------
 TOOLTIP-STYLE
 --------------------------------------------------------------------- */

.tooltipster-default {
    margin: -10px 0 0;
    color: #fff;
    border: none;
    border-radius: 0;
    border-radius: 5px;
    background: #576269;
}

.tooltipster-default a:hover {
    color: #ffbb2a;
}

.tooltipster-default .tooltipster-content {
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', Meiryo, 'MS PGothic', Arial, sans-serif;
    font-size: 11px;
    line-height: 16px;
    overflow: hidden;
    padding: 5px 10px;
}

.tooltipster-base {
    font-size: 0;
    line-height: 0;
    position: absolute;
    z-index: 9999999;
    top: 0;
    left: 0;
    overflow: visible;
    width: auto;
    padding: 0;
    pointer-events: none;
}
.tooltipster-base .tooltipster-content {
    overflow: hidden;
}

.tooltipster-arrow {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}
.tooltipster-arrow span,
.tooltipster-arrow-border {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
}
.tooltipster-arrow-top span {
    bottom: -7px;
    border-top: 8px solid;
    border-right: 8px solid transparent !important;
    border-left: 8px solid transparent !important;
}
.tooltipster-arrow-top .tooltipster-arrow-border {
    bottom: -7px;
    border-top: 9px solid;
    border-right: 9px solid transparent !important;
    border-left: 9px solid transparent !important;
}
.tooltipster-arrow-top span,
.tooltipster-arrow-top .tooltipster-arrow-border {
    right: 0;
    left: 0;
    margin: 0 auto;
}

.tooltipster-fade {
    transition-property: opacity;
    opacity: 0;
}
.tooltipster-fade-show {
    opacity: 1;
}


/* -------------------------------------------------------------------
 AGENCY 1Column
 --------------------------------------------------------------------- */

.agency div#container div#content div.wrapper {
    background: url(../../../img/common/bg_main_1column.png) repeat-y 0 50%;
}

.agency div#body {
    display: block;
    width: 721px;
    height: auto;
}

body.agency h1 {
    overflow: hidden;
    width: 721px;
    white-space: nowrap;
    text-indent: 100%;
    background-repeat: no-repeat;
    background-position: top left;
}

#agency-about,
#agency-flow,
#agency-order,
#agency-agreement {
    position: relative;
    width: 701px;
    height: auto;
    margin: 0 auto 60px;
}

#agency-about h1,
#agency-flow h1,
#agency-order h1,
#agency-agreement h1,
#agency-order-confirm h1 {
    position: relative;
    top: 0;
    left: -6px;
    overflow: hidden;
    height: 24px;
    margin: 0 0 10px;
    white-space: nowrap;
    text-indent: 110%;
    background-image: url(../../../img/default/service/agency/h1_agency.svg);
    background-repeat: no-repeat;
    background-size: 710px;
}
#agency-about h1 {
    background-position: 0 0;
}
#agency-flow h1 {
    background-position: 0 -44px;
}
#agency-order h1 {
    background-position: 0 -89px;
}
#agency-agreement h1 {
    background-position: 0 -133px;
}
#agency-order-confirm h1 {
    background-position: 0 -177px;
}

#agency-about table {
    width: 642px;
    margin: 0 auto 10px;
    text-align: center;
    border: solid 3px #b2b2b2;
}

#agency-about table th {
    width: 20%;
    text-align: center;
    color: #fff;
}

#agency-about table th,
#agency-about table td {
    padding: 9px 0;
    border: solid 2px #b2b2b2;
}

#agency-about table td strong {
    font-size: 120%;
}

th.agency-table-head {
    background-color: #c0cccc;
}
th.agency-table-economy {
    background-color: #f3acc0;
}
th.agency-table-lite {
    background-color: #6fc5dc;
}
th.agency-table-standard {
    background-color: #c7ba3e;
}
th.agency-table-enterprise {
    background-color: #7ea4ce;
}
td.agency-table-month {
    background-color: #e6ebeb;
}

.agency-rank {
    position: relative;
    width: 630px;
    height: auto;
    margin: 0 auto;
    padding: 20px;
    border-radius: 5px;
    background-color: #bff4f7;
}
.agency-rank:after {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -22px;
    content: ' ';
    pointer-events: none;
    border: solid transparent;
    border-width: 22px;
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #bff4f7;
}

.agency-rank h2 {
    font-size: 130%;
    font-weight: bold;
    margin: 0 0 10px;
    color: #199ecc;
}

.obj_rank {
    display: block;
    margin: 15px 0 28px 70px ;
}

.obj_example {
    display: block;
    margin: 10px auto 32px;
}

#agency-flow h2 {
    font-size: 130%;
    margin: 0 0 10px;
}

#agency-flow ul {
    display: block;
    width: 670px;
    min-height: 120px;
    margin: 0 auto 20px;
    padding: 0 20px;
}

#agency-flow li {
    position: relative;
    z-index: 0;
    float: left;
    width: 20%;
    height: auto;
    height: 85px;
    padding: 20px 10px;
}

#agency-flow .step1 {
    position: relative;
    margin: 0 15px 0 0;
    background-color: #bff4f7;
}
#agency-flow .step1:before,
#agency-flow .step2:before,
#agency-flow .step3:before {
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 0;
    content: ' ';
    border-width: 63px 0 63px 14px;
    border-style: solid;
}
#agency-flow .step1:before {
    border-color: transparent transparent transparent #bff4f7;
}
#agency-flow .step2 {
    margin: 0 15px 0 0;
    background-color: #d7f4f4;
}
#agency-flow .step2:before {
    border-color: transparent transparent transparent #d7f4f4;
}
#agency-flow .step3 {
    position: relative;
    margin: 0 15px 0 0;
    background-color: #daeded;
}
#agency-flow .step3:before {
    border-color: transparent transparent transparent #daeded;
}
#agency-flow .step4 {
    margin: 0;
    background-color: #fff499;
}

#agency-flow .step1 h3,
#agency-flow .step2 h3,
#agency-flow .step3 h3 {
    font-size: 110%;
    font-weight: bold;
    color: #199ecc;
}
#agency-flow .step4 h3 {
    font-size: 120%;
    font-weight: bold;
    color: #f78157;
}

.flow-img-01:after {
    right: 10px;
    bottom: 6px;
    width: 66px;
    height: 31px;
    content: url('../../../img/default/service/agency/obj_agencyflow01.svg');
}
.flow-img-01:after,
.flow-img-02:after {
    position: absolute;
    z-index: 10;
}
.flow-img-02:after {
    right: 0;
    bottom: -6px;
    width: 59px;
    height: 50px;
    content: url('../../../img/default/service/agency/obj_agencyflow02.svg');
}
.flow-img-03:after {
    right: 6px;
    width: 66px;
    height: 31px;
    content: url('../../../img/default/service/agency/obj_agencyflow03.svg');
}
.flow-img-03:after,
.flow-img-04:after {
    position: absolute;
    z-index: 10;
    bottom: -8px;
}
.flow-img-04:after {
    right: -2px;
    width: 81px;
    height: 72px;
    content: url('../../../img/default/service/agency/obj_agencyflow04.svg');
}

#agency-agreement .agreement-area {
    font-size: 85%;
    padding: 20px;
    border-radius: 5px;
    background-color: #e2e2e2;
}

#agency-agreement .agreement-txt {
    overflow: auto;
    height: 250px;
    padding: 20px;
    background-color: #fff;
}

.agreement-txt h2 {
    font-weight: bold;
    margin: 20px 0 10px;
    color: #00a5be;
}

.agreement-txt p {
    margin: 5px 0;
}

.agreement-txt li {
    padding: 0 0 0 15px;
}

.agreement-txt table {
    margin: 0 auto 10px;
}

.agreement-txt table,
.agreement-txt table th {
    width: 90%;
    text-align: center;
    border: solid 1px #b2b2b2;
}

.agreement-txt table th {
    margin: 0 auto;
}
.agreement-txt table td {
    padding: 5px 0;
    border: solid 1px;
}

.agency .body-bottom p#go-pagetop {
    width: 73px;
    height: 23px;
    margin: 0 0 0 646px;
    padding-top: 10px;
}

/* AGENCY-ORDERTABLE ---------------- */

#agency-order h2 {
    font-size: 130%;
    font-weight: bold;
    display: block;
    clear: both;
    margin: 0 10px 12px 0;
    color: #199ecc;
}

#agency-order h2 span {
    font-size: 70%;
    font-weight: normal;
    margin: 0 0 0 10px;
    color: #666;
}

.order-content-block-inner {
    overflow: hidden;
    width: 660px;
    margin: 0 auto 25px;
}

.order-content-block-inner dt {
    font-size: 14px;
    font-weight: bold;
    float: left;
    width: 27%;
    padding: 15px 0 0;
    color: #4b4b4b;
}

.order-content-block-inner dd {
    font-size: 14px;
    float: left;
    width: 72%;
    padding: 5px 0 20px;
    color: #585858;
}

.form-required,
.form-any {
    font-size: 10px;
    font-weight: normal;
    margin-right: 5px;
    padding: 2px;
    vertical-align: 10%;
    color: #fff;
    border-radius: 2px;
}

.form-required {
    background: #e26453;
}

.form-any {
    background: #4573ab;
}

.form-example {
    font-size: 12px;
    font-weight: normal;
    position: relative;
    top: 3px;
    display: inline-block;
    margin-left: 10px;
    color: #8c8c8c;
}

.order-content-block-inner input[type='text']:focus,
.order-content-block-inner input[type='password']:focus,
.order-content-block-inner input[type='tel']:focus,
.order-content-block-inner textarea:focus {
    border: solid 1px #51a7e8;
    outline: none;
    box-shadow: 0 0 3px rgba(81,167,232,.5);
}

.order-content-block-inner input[type='text'],
.order-content-block-inner input[type='password'],
.order-content-block-inner input[type='tel'],
.order-content-block-inner select,
.order-content-block-inner textarea {
    -webkit-appearance: none;
       -moz-appearance: none;
         -o-appearance: none;
}

.order-content-block-inner input[type='text'],
.order-content-block-inner input[type='password'],
.order-content-block-inner input[type='tel'],
.order-content-block-inner textarea {
    font-size: 14px;
    width: 98%;
    height: 35px;
    padding-left: 2%;
    color: #444;
    border: 1px solid #9c9c9c;
    border-radius: 4px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.18);
}

.select-group > .select.error {
    border: none !important;
}

.select-group[for='pref-select'] {
    width: 109px;
    height: 38px;
}

.select-group[for='birth_y'] {
    width: 86px;
    height: 38px;
}

.select-group[for='birth_m'],
.select-group[for='birth_d'] {
    width: 70px;
    height: 38px;
}

.select-group[for='bank-select'] {
    width: 88px;
    height: 38px;
}

#birth-box {
    line-height: 36px;
}

.radio-btn {
    border: 1px solid #9c9c9c;
    border-radius: 4px;
}

.radio-btn li {
    position: relative;
}

.radio-btn li input {
    position: absolute;
    top: 14px;
    left: 15px;
}

.radio-btn li label {
    display: block;
    padding: 10px 10px 10px 40px;
    border-bottom: 1px solid #ebebeb;
}

.radio-btn li:last-child label {
    border-bottom: 1px solid #fff;
}

.radio-btn li:first-child,
.radio-btn li:first-child label {
    border-radius: 3px 3px 0 0;
}

.radio-btn li:last-child,
.radio-btn li:last-child label {
    border-radius: 0 0 3px 3px;
}

.radio-btn li label:hover {
    background: #f7fdff;
}

.radio-btn li:last-child label:hover {
    border-bottom: 1px solid #f7fdff;
    background: #f7fdff;
}

.radio-btn li input[type='radio']:checked + label {
    background: #e8f9ff;
}

.radio-btn li:last-child input[type='radio']:checked + label {
    border-bottom: 1px solid #e8f9ff;
}

#address {
    display: block;
    margin: 10px 0 0;
}

#desc-business {
    height: 60px;
    padding: 10px 0 0 10px;
}

.form div.success,
.customer div.success,
.confirm div.success,
.form label.error,
.customer label.error,
.confirm label.error,
.form div.error,
.customer div.error,
.confirm div.error {
    font-size: 13px;
    font-weight: bold;
    display: block;
    margin: 10px 0 0;
    padding: 0;
    padding-left: 20px;
    border: none;
    background: none;
}

.form div.success,
.customer div.success,
.confirm div.success {
    color: #2da701;
    background-image: url(../../../img/default/order/obj_ok.svg);
    background-repeat: no-repeat;
    background-position: 0 1px;
    background-size: 16px 16px;
}

.form label.error,
.customer label.error,
.confirm label.error,
.form div.error,
.customer div.error,
.confirm div.error {
    color: #e01919;
    background-image: url(../../../img/default/order/obj_error.svg);
    background-repeat: no-repeat;
    background-position: 0 1px;
    background-size: 16px 16px;
}

.form select.error,
.customer select.error,
.confirm select.error,
.form input.error,
.customer input.error,
.confirm input.error {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    color: #444 !important;
    border: 1px solid #ff1d1d !important;
    background-color: #fff4f4 !important;
}

.form input.error,
.customer input.error,
.confirm input.error {
    padding-left: 2%;
}

#agency-submit {
    display: block;
    width: 426px;
    height: 73px;
    margin: 0 auto;
    padding: 0;
    cursor: pointer;
    border: 0;
    background: url(../../../img/default/service/agency/btn_submit.svg) no-repeat top left;
    background-size: 426px;
}

/* -------------------------------------------------------------------
 AGENCY CONFIRM 1Column
 --------------------------------------------------------------------- */
.confirm div#container div#content div.wrapper {
    background: url(../../../img/common/bg_main_1column.png) repeat-y 0 50%;
}

.confirm div#body {
    display: block;
    width: 721px;
    height: auto;
}

body.confirm h1 {
    overflow: hidden;
    width: 721px;
    white-space: nowrap;
    text-indent: 100%;
    background-repeat: no-repeat;
    background-position: top left;
}

.order-content-block-inner dl.confirm {
    overflow: hidden;
    width: 630px;
    margin: 0 auto 25px;
}

.order-content-block-inner dl.confirm dt {
    font-weight: normal;
    float: left;
    clear: left;
    width: 24%;
    margin: 0;
    padding: 9px 0;
    color: #8c8c8c;
}

.order-content-block-inner dl.confirm dd {
    font-weight: bold;
    float: left;
    width: 76%;
    min-height: 18px;
    margin: 0;
    padding: 9px 0;
    color: #4b4b4b;
    border-bottom: solid 1px #ddd;
}

.terms-agree-area {
    font-size: 14px;
    margin: 40px 0 10px;
    padding: 25px 44px;
    color: #4b4b4b;
    border-radius: 5px;
    background: #f7f7fc;
}

.terms-agree {
    font-weight: bold;
    display: block;
    margin-top: 15px;
    padding: 15px 20px;
    border: 1px solid #9c9c9c;
    border-radius: 5px;
    background: #fff;
}

.submit-fix {
    width: 426px;
    height: 73px;
    margin: 0 auto 60px;
    background: url(../../../img/default/service/agency/btn_order.svg) no-repeat top left;
    background-size: 426px;
}

.submit-fix,
.submit-back {
    display: block;
    padding: 0;
    cursor: pointer;
    border: 0;
}

.submit-back {
    width: 156px;
    height: 56px;
    margin: 0 auto;
    white-space: nowrap;
    text-indent: 100%;
    background: url(../../../img/default/service/agency/btn_back.svg) no-repeat top left;
    background-size: 156px;
}

.confirm .body-bottom p#go-pagetop {
    width: 73px;
    height: 23px;
    margin: 0 0 0 646px;
    padding-top: 10px;
}

/* -------------------------------------------------------------------
 AGENCY REGISTRATION 1Column
 --------------------------------------------------------------------- */

.registration div#container div#content div.wrapper {
    background: url(../../../img/common/bg_main_1column.png) repeat-y 0 50%;
}

.registration div#body {
    display: block;
    width: 721px;
    height: auto;
}

body.registration h1 {
    overflow: hidden;
    width: 721px;
    margin: 10px 0 20px;
    white-space: nowrap;
    text-indent: 100%;
    background-repeat: no-repeat;
    background-position: top left;
}

body.registration h2 {
    font-size: 150%;
    font-weight: bold;
    margin: 0 0 20px;
    text-align: center;
}

.registration .body-bottom p#go-pagetop {
    width: 73px;
    height: 23px;
    margin: 0 0 0 646px;
    padding-top: 10px;
}

/*--------------------------------------------------------------------
 overwrite tooltipster
---------------------------------------------------------------------- */

.tooltipster-default {
    font-size: 12px;
    color: #fff;
    background: #293541;
    box-shadow: 0 3px 10px rgba(0,0,0,.2);
}

.tooltipster-default .tooltipster-content {
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 140%;
    overflow: hidden;
    padding: 10px;
}