@charset "utf-8";


.main_vi_img img {
    width: 100%;
    height: auto;
}
.ttl {
    text-align: center;
    background: #cf122e;
}
.ttl img {
    display: block;
    width: 100%;
    max-width: 1024px;
    height: auto;
    margin: 0 auto;
}
.ttl_sub01 {
    padding: .15em .5em .1em;
    box-sizing: border-box;
    font-size: 1.875em;
    line-height: 1.6;
    font-weight: bold;
    text-align: center;
    letter-spacing: .05em;
    color: #fff;
    background: #fd9500;
}
.mg_t01e {
    margin-top: 1em;
}
.lead {
    position: relative;
    width: 100%;
    margin: 2.5em 0;
    padding: 0 0 0 26.5%;
    box-sizing: border-box;
    line-break: strict;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.lead:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 11.9%;
    height: 0;
    margin: 1% 0 0 9%;
    padding-top: 17.46%;
    background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/dxmap_pct01.png") no-repeat top left;
    background-size: contain;
}
.dxmap img {
    width: 100%;
    height: auto;
}
.dxmap_wrap {
    position: relative;
    width: 90%;
    max-width: 1008px;
    margin: 0 auto;
    font-size: 1.5em;
    line-height: 1.6666;
    color: #030303;
}
.dxmap_inner {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}
.dxmap_ttl01 {
    padding: 1em;
    box-sizing: border-box;
    text-align: center;
    background: #fdc12d;
}
.adoption_rate .dxmap_ttl01 img {
    display: block;
    width: 60%;
    max-width: 382px;
    margin: 0 auto;
    vertical-align: top;
}
.result .dxmap_ttl01 img {
    display: block;
    width: 80%;
    max-width: 382px;
    margin: 0 auto;
    vertical-align: top;
}
.dxmap_txt {
    width: 80%;
    margin: 1.4em auto;
    font-size: 1.4em;
    line-height: 1.8;
    line-break: strict;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.adoption_rate {
    width: 100%;
    max-width: 1184px;
    margin: 0 auto;
}
.adoption_rate_map {
    position: relative;
    width: 100%;
    max-width: 930px;
    margin: 0 auto;
}
.adoption_rate_map_body {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
}
.legend {
    position: absolute;
    top: 0;
    left: 0;
    width: 34%;
    max-width: 290px;
    margin: 1.5em 0 0 1em;
    padding: 1.6% 0 1.6% 2.4%;
    box-sizing: border-box;
    background: #f6f6f6;
    border: 1px solid #9e9e9e;
}
.legend img {
    width: 87%;
    max-width: 230px;
    height: auto;
}
.result {
    margin: 5em 0;
    box-sizing: border-box;
    background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/result_bg_pc.png") left top;
}
.result_wrap {
    width: 100%;
    max-width: 1184px;
    margin: 0 auto;
}
.result_block {
    width: 100%;
    margin: 0 auto;
    background: #fff;
    overflow: hidden;
}
.dxmap_info {
    width: 100%;
    max-width: 800px;
    margin: 2em auto;
    padding: .6em 1.5em;
    box-sizing: border-box;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    color: #cf122e;
    border: 3px solid #cf122e;
    border-radius: .5em;
}
.dxmap_data {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    text-align: right;
}
.result_txt {
    margin: 1em auto;
    font-size: 1.6em;
    text-align: center;
}
.result_txt span {
    display: inline-block;
}
.query_nav {
    width: 96%;
    max-width: 1010px;
    margin: 2.5em auto 2em;
}
.query_nav_txt {
    width: 300px;
    margin: 2em auto 1.3em;
}
.query_nav_list {
    width: 100%;
    max-width: 1010px;
}
.query_nav_list li {
    width: 48.51%;
    margin-bottom: 1.54em;
}
.query_nav_list li a {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: .6em 0 .4em .8em;
    box-sizing: border-box;
    font-size: 1.6em;
    font-weight: bold;
    text-decoration: none;
    color: #000;
    background: #efc8b5;
    border-radius: 5px;
    box-shadow: 2px 2px 0 0 rgba(0, 0, 0, .4);
}
.selectNavi {
    display: none;
}
.query_nav_list li a:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 2.8em;
    width: 0;
    height: 70%;
    border-right: 2px solid #fff;
    transform: translateY(-50%);
}
.query_nav_list li a:after {
    content: "";
    position: absolute;
    top: 50%;
    right: .7em;
    width: 1em;
    height: 1em;
    background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/result_arrow01.png") no-repeat top center;
    background-size: contain;
    transform: translateY(-20%);
}
.query_nav_list li a span {
    display: inline-block;
}
.query_nav_list li a span:nth-child(1) {
    width: 2em;
}
.query_nav_list li a span:nth-child(2) {
    width: calc(100% - 4em);
    margin-left: .5em;
}
.query_body_ttl {
    width: 434px;
    margin: 5em auto 4em;
}
.query_wrap {
    position: relative;
    width: 96%;
    max-width: 1016px;
    margin: 0 auto 8em;
    padding: 2em 4.5em;
    box-sizing: border-box;
    background: #fff;
}
#query07 .contact_sct #query09.query_wrap {
    margin-bottom: 4.5em;
}
.query_ttl {
    width: 87.5%;
    max-width: 766px;
    margin: 0 0 1.2em;
}
.query_txt {
    width: 84%;
    margin: 0 0 1em;
    font-size: 1.5em;
    line-height: 1.4;
}
.query_txt b {
    color: #cf122e;
}
#query04 .query_txt, #query07 .query_txt, #query09 .query_txt {
    width: 100%;
}
#query03 .graph_wrap {
    margin-top: 2em;
}
#query04 .query04_wrap {
    display: flex;
    flex-wrap: wrap;
}
#query08 .graph_wrap {
    justify-content: flex-start;
    align-items: center;
}
#query08 .graph_item_list {
    width: 56%;
}
.query04_txt {
    order: 1;
    margin-bottom: .5em;
    font-size: 1.4em;
    line-height: 1.3;
}
#query04 .query_ttl {
    order: 2;
}
.graph_item_list {
    list-style: none;
    margin: 0 0 0 .1em;
    padding: 0;
    width: 60%;
    font-size: 1.6em;
    font-weight: bold;
}
.graph_item_list span {
    display: inline-block;
}
.graph_item_list li {
    position: relative;
    margin-bottom: .65em;
    padding-left: 1.6em;
    color: #161616;
    font-weight: bold;
}
.graph_item_list li:before {
    content: "";
    position: absolute;
    top: .05em;
    left: 0;
    width: 1.2em;
    height: 1.2em;
    background: #999;
}
li.graph_red01, li.graph_red02 {
    color: #cf122e;
}
li.graph_red01:before {
    background: #cf122e;
}
li.graph_red02:before {
    background: #ff9aa8;
}
li.graph_gray01:before {
    background: #dedede;
}
li.graph_gray02:before {
    background: #c9c9c9;
}
li.graph_gray03:before {
    background: #999;
}
li.graph_gray04:before {
    background: #666;
}
.graph_item {
    position: relative;
    width: 270px;
    margin: 0 10px;
}
.choice {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.6em;
    font-weight: bold;
    color: #cf122e;
    text-align: center;
    transform: translate(-50%, -50%);
}
.choice > span {
    display: block;
    line-height: 1;
}
.choice > span:first-child {
    margin-top: .3em;
    font-size: .9em;
    line-height: 1.2;
}
#query05 .choice > span:first-child, #query06 .choice > span:first-child, #query08 .choice > span:first-child {
    margin-top: .5em;
}
#query05 .choice > span:first-child, #query08 .choice > span:first-child {
    font-size: .75em;
}
.unit {
    display: inline-block;
    font-size: 1.8em;
    font-weight: bold;
}
.query_point {
    position: relative;
    background: #ffedc9;
    padding: 1.2em 2.2em 1.1em;
    box-sizing: border-box;
    font-size: 1.4em;
    line-height: 1.6;
    color: #161616;
    border-radius: .5em;
}
.query_point p {
    font-weight: bold;
    line-break: strict;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.query_point:before {
    content: "";
    position: absolute;
    top: -1em;
    left: -1em;
    width: 3em;
    height: 3em;
    background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/point_icon.png") no-repeat top left;
    background-size: contain;
}
.graf {
    margin-bottom: 3.5em;
    font-size: 1.6em;
}
.graf ul {
    list-style: none;
}
.graf li {
    margin-bottom: .7em;
}
.graf .query_value {
    display: inline-block;
    margin-left: .5em;
    font-size: .9em;
}
.graf dl, .graf dt, .graf dd {
    margin: 0;
    padding: 0;
}
.data-name {
    color: #161616;
}
.graf-bar-bg {
    width: 100%;
    background: #fff;
}
.graf-bar {
    font-size: 1em;
    line-height: 1;
    background: #ff9aa8;
}
.graf-bar span {
    color: #ff9aa8;
    visibility: hidden;
}
.graph_bar {
    margin: 3em auto;
    padding-left: 1em;
    box-sizing: border-box;
}
.graph_bar dt {
    margin-left: .5em;
    font-weight: bold;
    color: #161616;
}
#query07 .contact_sct {
    width: 100%;
    max-width: 720px;
    margin: 4em auto 2em;
}
#query07 .contact_sct .contact_sct_dtl {
    padding: 1.5em 1em;
    box-sizing: border-box;
}
.btn_re-selection {
    width: 90%;
    max-width: 658px;
    margin: 1em auto;
}
.btn_re-selection a {
    position: relative;
    display: block;
    width: 100%;
    padding: 1em 2em .8em;
    box-sizing: border-box;
    font-size: 1.6em;
    font-weight: bold;
    background: #cf122e;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: .3em;
    box-shadow: 3px 3px 2px rgba(0, 0, 0, .26);
}
.btn_re-selection a:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1em;
    width: 1em;
    height: 1em;
    background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/result_arrow02.png") no-repeat top center;
    background-size: contain;
    transform: translateY(-20%);
}
.inquiry {
    width: 90%;
    max-width: 720px;
    margin: 5em auto;
}
.links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 3em auto 0;
}
.links li {
    margin: 1em;
}
.links .button {
    display: block;
    width: 380px;
    padding: .8em;
    box-sizing: border-box;
    font-size: 1.5em;
}
.summary {
    margin-top: 3em;
    padding: 2.7em 0 2.3em;
    background: #cf122e url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/summary_bg.png") no-repeat top center;
}
.summary_txt {
    width: 94.14%;
    max-width: 964px;
    margin: 0 auto;
}
.summary_wrap {
    width: 90%;
    max-width: 1024px;
    margin: 0 auto;
    text-align: center;
}
.summary_img {
    width: 371px;
    margin: 3.2em auto 0;
}
.summary img {
    width: 100%;
    height: auto;
}
/* case */
.case_txt {
    margin: 1em 1em 2em;
    font-size: 1em;
    text-align: center;
}
.case_txt > span {
    display: inline-block;
}
.case_list {
    list-style: none;
    width: 75.6%;
    margin: 5% auto 14%;
    padding: 0;
}
.case_list li + li {
    margin-top: 13.5%;
}
.case_list a {
    display: block;
    background: #ffde7c;
    border-radius: .5em;
    overflow: hidden;
    box-shadow: 0 .5em 0 #fbb023;
}
.case_list img {
    display: block;
    width: 100%;
    height: auto;
}
@media (min-width: 641px) {
    .case_txt {
        width: 80%;
        max-width: 900px;
        margin: 1.7em auto;
        font-size: 1.6em;
    }
    .case_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 91.41%;
        max-width: 936px;
        margin: 2em auto 4em;
    }
    .case_list li {
        width: 46.58%;
    }
    .case_list li + li {
        margin-top: 0;
    }
    .case_list a:hover {
        background: #fdd358;
    }
}


@media (max-width: 950px) {
    .graph_wrap {
        justify-content: center;
    }
    .graph_item_list, #query01 .graph_item_list, #query02 .graph_item_list, #query03 .graph_item_list, #query05 .graph_item_list, #query06 .graph_item_list, #query08 .graph_item_list {
        width: 100%;
    }
    #query01 .graph_wrap, #query02 .graph_wrap, #query03 .graph_wrap, #query05 .graph_wrap, #query06 .graph_wrap, #query08 .graph_wrap {
        justify-content: center;
    }
}
@media (max-width: 640px) {
    .dxmap_ttl01 {
        padding: .7em;
    }
    .result .dxmap_ttl01 img {
        width: 62%;
        height: auto;
    }
    .dxmap_txt {
        width: 100%;
        padding: 0 1em;
        box-sizing: border-box;
        font-size: 1em;
        line-height: 1.6;
    }
    .adoption_rate_map {
        padding-top: 14%;
    }
    .legend {
        width: 49%;
        margin: -3% 0 0 4%;
        padding: 4.5% 0 4% 4.5%;
    }
    .legend img {
        width: 83%;
        height: auto;
    }
    .result {
        margin: 10.5% 0;
        padding: 1em 0;
        background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/result_bg.png") left top;
        background-size: 100% auto;
    }
    .dxmap_info {
        width: fit-content;
        margin: 1em auto;
        font-size: 1em;
        border: 2px solid #cf122e;
    }
    .result_txt {
        padding: 0 8px;
        box-sizing: border-box;
        font-size: 1em;
    }
    .query_nav_txt {
        width: 144px;
        margin: 2em auto 1em;
    }
    .query_nav_list {
        display: none;
    }
    .selectNavi_wrap {
        position: relative;
    }
    .selectNavi_wrap:after {
        content: "";
        position: absolute;
        top: 50%;
        right: .7em;
        width: 1em;
        height: 1em;
        background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/result_arrow01.png") no-repeat top center;
        background-size: contain;
        transform: translateY(-20%);
    }
    .selectNavi {
        display: block;
        width: 100%;
        padding: 1em 1em .8em .8em;
        box-sizing: border-box;
        font-size: 1.1em;
        font-weight: bold;
        text-decoration: none;
        color: #000;
        background: #efc8b5;
        border-radius: 5px;
        box-shadow: 2px 2px 0 0 rgba(0, 0, 0, .4);
    }
    .query_nav {
        width: 100%;
        padding: 0 .7em;
        box-sizing: border-box;
    }
    .query_body_ttl {
        width: 214px;
        margin: 3em auto 2em;
    }
    .query_wrap {
        width: 93.87%;
        margin: 0 auto 3em;
        padding: 1em;
    }
    #query09.query_wrap {
        margin-bottom: 2em;
    }
    .query_ttl {
        width: 100%;
        margin: 0 0 1.2em;
    }
    .query_txt {
        width: 100%;
        font-size: 1em;
    }
    .graph_wrap {
        position: relative;
        margin: 3em auto;
        padding-bottom: 16%;
    }
    .graph_wrap:after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        height: 0;
    }
    #query01 .graph_wrap:after {
        width: 31%;
        margin: 0 3% -5% 0;
        padding-top: 25%;
        background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/dxmap_q01_pct.png") no-repeat top right;
        background-size: contain;
    }
    #query02 .graph_wrap:after {
        width: 19%;
        margin: 0 11% -6% 0;
        padding-top: 26%;
        background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/dxmap_q02_pct.png") no-repeat top right;
        background-size: contain;
    }
    #query03 .graph_wrap:after {
        width: 23%;
        margin: 0 3% -6% 0;
        padding-top: 26%;
        background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/dxmap_q03_pct.png") no-repeat top right;
        background-size: contain;
    }
    #query05 .graph_wrap:after {
        width: 20%;
        margin: 0 6% -6% 0;
        padding-top: 24%;
        background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/dxmap_q05_pct.png") no-repeat top right;
        background-size: contain;
    }
    #query06 .graph_wrap:after {
        width: 19%;
        margin: 0 7% -7% 0;
        padding-top: 28%;
        background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/dxmap_q06_pct.png") no-repeat top right;
        background-size: contain;
    }
    #query08 .graph_wrap:after {
        width: 15%;
        margin: 0 3% -5% 0;
        padding-top: 24%;
        background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/dxmap_q08_pct.png") no-repeat top right;
        background-size: contain;
    }
    .query04_txt {
        font-size: 1em;
    }
    .graph_item_list {
        width: 100%;
        margin: 2em 0;
        font-size: 1em;
    }
    #query08 .graph_item_list {
        width: 100%;
    }
    .graph_item {
        margin: 0 auto;
    }
    .choice {
        font-size: 1.2em;
    }
    .choice > span:first-child {
        margin-top: .5em;
    }
    .query_point {
        padding: 1.5em 1.5em 1.3em;
        font-size: 1em;
    }
    .query_point:before {
        left: -.6em;
    }
    .graf {
        font-size: 1em;
    }
    .graph_bar {
        margin: 2em auto;
        padding-left: 0;
    }
    .graph_bar dt {
        margin-left: 0;
    }
    #query07 .contact_sct {
        margin: 2em auto 1em;
    }
    .inquiry {
        margin: 0 auto 3em;
    }
    .btn_re-selection a {
        font-size: 1em;
    }
    .coming-soon02 {
        margin: 2em auto 4em;
    }
    .ttl_sub01 {
        padding: .3em .5em .2em;
        font-size: 1.2em;
    }
    .dxmap_wrap {
        width: 100%;
        padding: 0 8px;
        box-sizing: border-box;
        font-size: 1em;
    }
    .dxmap_icon img {
        width: 90%;
        height: auto;
    }
    .lead {
        margin: 1em auto;
        padding: 0 0 0 21.5%;
    }
    .lead:before {
        width: 17%;
        padding-top: 26.46%;
        margin: 1% 0 0 2%;
    }
    .dxmap_data {
        margin: 1em auto;
        padding-right: .5em;
        box-sizing: border-box;
    }
    .links {
        margin: 2em auto 0;
    }
    .links li {
        width: 100%;
        margin: .5em 0;
    }
    .links .button {
        width: 100%;
        font-size: 1em;
    }
    .summary {
        margin-top: 7%;
        padding: 2.3em 0 2.3em;
        background: #cf122e url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/summary_bg_sp.png") no-repeat top center;
        background-size: 100% auto;
    }
    .summary_txt {
        width: 90.53%;
        max-width: 679px;
    }
    .summary_img {
        width: 68%;
        margin: 64% auto 1%;
    }
}
@media (min-width: 641px) {
    .result {
        padding: 6em 8px 1px;
    }
    .query_nav_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .query_wrap:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: 0;
    }
    #query01.query_wrap:after {
        width: 17.03%;
        margin: 2.5% 4.2% 0 0;
        padding-top: 13.48%;
        background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/dxmap_q01_pct.png") no-repeat top right;
        background-size: contain;
    }
    #query02.query_wrap:after {
        width: 11.32%;
        margin: 2.5% 7.8% 0 0;
        padding-top: 15.06%;
        background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/dxmap_q02_pct.png") no-repeat top right;
        background-size: contain;
    }
    #query03.query_wrap:after {
        width: 11.71%;
        margin: 1.6% 4.8% 0 0;
        padding-top: 13.19%;
        background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/dxmap_q03_pct.png") no-repeat top right;
        background-size: contain;
    }
    #query05.query_wrap:after {
        width: 10.73%;
        margin: 3.2% 5.6% 0 0;
        padding-top: 12.7%;
        background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/dxmap_q05_pct.png") no-repeat top right;
        background-size: contain;
    }
    #query06.query_wrap:after {
        width: 10.43%;
        margin: 3.4% 6% 0 0;
        padding-top: 15.26%;
        background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/dxmap_q06_pct.png") no-repeat top right;
        background-size: contain;
    }
    #query08.query_wrap:after {
        width: 9.84%;
        margin: 6.5% 4.5% 0 0;
        padding-top: 15.94%;
        background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/dxmap_q08_pct.png") no-repeat top right;
        background-size: contain;
    }
    .graph_wrap {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        margin: 3em auto 4.5em;
    }
    .graph:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, .52);
    }
}
@media (min-width: 1000px) {
    .lead {
        padding: 0 3em 0 26.5%;
    }
}
/* step */
.result_step {
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
}
.result_step dt {
    margin: 0;
    padding: 0;
    font-size: 2em;
    font-weight: bold;
    color: #7c2600;
}
.result_step dt > span {
    font-size: .85em;
}
.result_step dd {
    margin: 0;
    padding: 0;
}
.choice_list {
    list-style: none;
    margin: .8em auto 2.2em;
    padding: 0;
    font-size: 2em;
}
.choice_list label {
    position: relative;
    display: block;
    margin-bottom: .5em;
    padding-left: 3em;
    font-weight: bold;
}
.choice_list label:before {
    content: "";
    position: absolute;
    top: 50%;
    left: .65em;
    width: 1.8em;
    height: 1.8em;
    transform: translateY(-50%);
}
.choice_list li:nth-child(1) label:before {
    background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/dxmap_step01.png") no-repeat top left;
    background-size: contain;
}
.choice_list li:nth-child(2) label:before {
    background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/dxmap_step02.png") no-repeat top left;
    background-size: contain;
}
.choice_list div {
    position: relative;
}
.choice_list div:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 1.1em;
    width: 0;
    height: 0;
    border-top: .5em solid #000;
    border-right: .4em solid transparent;
    border-left: .4em solid transparent;
    border-bottom: .4em solid transparent;
    transform: translateY(-25%);
}
.choice_list select {
    width: 100%;
    padding: .7em .5em .6em 3.2em;
    box-sizing: border-box;
    font-size: .75em;
    color: #000;
    background: #ffeb79;
    border-radius: .2em;
}
.conditions {
    position: relative;
    width: 100%;
    margin: .5em auto 1.5em;
    padding: .5em 1em .45em 3em;
    box-sizing: border-box;
    font-size: 1.9em;
    color: #fff;
    background: #cf122e;
    border-radius: 1.5em;
}
.conditions:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 1.4em;
    width: 1em;
    height: 1em;
    background: url("/-/Media/Ricoh/Sites/co_jp/service/ricoh-kintone-plus/dx-map/img/dxmap_step03.png") no-repeat top left;
    background-size: contain;
    transform: translateY(-50%);
}
.conditions > span {
    display: inline-block;
}
@media (max-width: 640px) {
    .result_step dt {
        font-size: 1.4em;
    }
    .choice_list {
        font-size: 1.2em;
    }
    .choice_list select {
        padding: 1em .5em .9em 3.2em;
        font-size: 1em;
    }
    .conditions {
        font-size: 1em;
    }
    .conditions:before {
        left: 1.2em;
    }
}
@media (max-width: 800px) {
    .choice_list li + li {
        margin-top: 1.5em;
    }
}
@media (min-width: 801px) {
    .choice_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: .8em auto 2.2em;
        font-size: 2em;
    }
    .choice_list li {
        width: 48%;
    }
}
/*
red01: #be0712;
red02: #fc2a1c;
red03: #fd7f7c;
red04: #f7cbaf;
red05: #d9d9d9;
*/
/* 北海道 */
.pref01 {
    fill: #d9d9d9;
}
/* 青森 */
.pref02 {
    fill: #d9d9d9;
}
/* 岩手 */
.pref03 {
    fill: #d9d9d9;
}
/* 宮城 */
.pref04 {
    fill: #d9d9d9;
}
/* 秋田 */
.pref05 {
    fill: #d9d9d9;
}
/* 山形 */
.pref06 {
    fill: #d9d9d9;
}
/* 福島 */
.pref07 {
    fill: #d9d9d9;
}
/* 茨城 */
.pref08 {
    fill: #f7cbaf;
}
/* 栃木 */
.pref09 {
    fill: #d9d9d9;
}
/* 群馬 */
.pref10 {
    fill: #d9d9d9;
}
/* 埼玉 */
.pref11 {
    fill: #d9d9d9;
}
/* 千葉 */
.pref12 {
    fill: #f7cbaf;
}
/* 東京 */
.pref13 {
    fill: #f7cbaf;
}
/* 神奈川 */
.pref14 {
    fill: #d9d9d9;
}
/* 新潟 */
.pref15 {
    fill: #d9d9d9;
}
/* 富山 */
.pref16 {
    fill: #f7cbaf;
}
/* 石川 */
.pref17 {
    fill: #fd7f7c;
}
/* 福井 */
.pref18 {
    fill: #d9d9d9;
}
/* 山梨 */
.pref19 {
    fill: #f7cbaf;
}
/* 長野 */
.pref20 {
    fill: #f7cbaf;
}
/* 岐阜 */
.pref21 {
    fill: #d9d9d9;
}
/* 静岡 */
.pref22 {
    fill: #d9d9d9;
}
/* 愛知 */
.pref23 {
    fill: #d9d9d9;
}
/* 三重 */
.pref24 {
    fill: #f7cbaf;
}
/* 滋賀 */
.pref25 {
    fill: #d9d9d9;
}
/* 京都 */
.pref26 {
    fill: #d9d9d9;
}
/* 大阪 */
.pref27 {
    fill: #d9d9d9;
}
/* 兵庫 */
.pref28 {
    fill: #d9d9d9;
}
/* 奈良 */
.pref29 {
    fill: #d9d9d9;
}
/* 和歌山 */
.pref30 {
    fill: #d9d9d9;
}
/* 鳥取 */
.pref31 {
    fill: #d9d9d9;
}
/* 島根 */
.pref32 {
    fill: #f7cbaf;
}
/* 岡山 */
.pref33 {
    fill: #d9d9d9;
}
/* 広島 */
.pref34 {
    fill: #f7cbaf;
}
/* 山口 */
.pref35 {
    fill: #d9d9d9;
}
/* 徳島 */
.pref36 {
    fill: #d9d9d9;
}
/* 香川 */
.pref37 {
    fill: #f7cbaf;
}
/* 愛媛 */
.pref38 {
    fill: #d9d9d9;
}
/* 高知 */
.pref39 {
    fill: #d9d9d9;
}
/* 福岡 */
.pref40 {
    fill: #f7cbaf;
}
/* 佐賀 */
.pref41 {
    fill: #f7cbaf;
}
/* 長崎 */
.pref42 {
    fill: #d9d9d9;
}
/* 熊本 */
.pref43 {
    fill: #f7cbaf;
}
/* 大分 */
.pref44 {
    fill: #f7cbaf;
}
/* 宮崎 */
.pref45 {
    fill: #d9d9d9;
}
/* 鹿児島 */
.pref46 {
    fill: #d9d9d9;
}
/* 沖縄 */
.pref47 {
    fill: #f7cbaf;
}
.line01 {
    fill: #d9d9d9;
}






/* nav */
.info-nav {
    background: #faeec7;
    margin: 7% auto;
    padding: 6.2% 0;
}
.info-nav img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
    border: .5vw solid #aaa;
    box-sizing: border-box;
    border-radius: 4px;
}
.info-nav a img {
    display: block;
    border: none;
    border-radius: 0;
}
.info-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}
.info-nav li {
    width: 44.8%;
    margin: 0 1.2% 5.3%;
    box-sizing: border-box;
}
.info-nav li:last-child {
    width: 78.6%;
    margin-bottom: 0;
}
.info-nav a {
    display: block;
    border: .5vw solid #aaa;
    box-sizing: border-box;
    border-radius: 4px;
}
@media (min-width: 641px) {
    .info-nav {
        margin: 7% auto;
        padding: 2.2% 0 2.5%;
    }
    .info-nav {
        margin: 3em auto;
        padding: 2.8em 0;
    }
    .info-nav ul {
        width: min(98%, 1020px);
    }
    .info-nav li {
        width: max(23.65%, 170px);
        margin: 0 .63% 3%;
    }
    .info-nav li:last-child {
        width: max(37%, 263px);
        margin: 0 20%;
    }
    .info-nav img, .info-nav a {
        border-width: 3px;
    }
}
@media (hover: hover) {
    .info-nav a {
        transition: border-color .3s;
    }
    .info-nav a:hover {
        border-color: #cf122e;
    }
}
/* cv */
.cv {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.cv li {
    width: 50%;
    margin: 0;
}
.cv li:nth-child(1) {
    background: #faeec7;
}
.cv li:nth-child(2) {
    background: #d7e6f1;
}
.cv a {
    position: relative;
    display: block;
    width: 89%;
    border-radius: .3em;
}
.cv a img {
    display: inline-block;
    width: 100%;
    height: auto;
}
.cv li:nth-child(1) a {
    margin: 6% 4% 6% auto;
    background: #f75e23;
    border: 2px solid #ffb598;
    box-shadow: .2em .2em 0 #ffb598;
}
.cv li:nth-child(2) a {
    margin: 6% auto 6% 4%;
    background: #1164cf;
    border: 2px solid #76a9eb;
    box-shadow: .2em .2em 0 #76a9eb;
}
@media (min-width: 641px) {
    .cv a {
        width: 77.73%;
        max-width: 398px;
        margin: 1.46% auto 1.76%;
    }
    .cv li:nth-child(1) a, .cv li:nth-child(2) a {
        margin: .6em auto .8em;
    }
}
@media (min-width: 1024px) {
    .cv a {
        width: 398px;
        margin: 15px auto 18px;
    }
    .cv li:nth-child(1) a {
        margin: 15px 56px 18px auto;
    }
    .cv li:nth-child(2) a {
        margin: 15px auto 18px 54px;
    }
    .cv li:nth-child(1) a:hover {
        background: #f54400;
    }
    .cv li:nth-child(2) a:hover {
        background: #005ace;
    }
}