@charset "utf-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* end
http://meyerweb.com/eric/tools/css/reset/
*/
/* clearfix */
#wrapper .clearfix:after {
    content: '';
    display: block;
    clear: both;
}
/* common */
body {
    font-family:
        'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic ProN',
        'ヒラギノ角ゴ', Meiryo, 'メイリオ', 'MS PGothic', 'ＭＳ Ｐゴシック',
        sans-serif;
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
    padding: 0;
    border: 0;
    color: #2f3e36;
    -webkit-font-smoothing: antialiased;
}
a,
a:visited,
a:link {
    color: #4e8064;
    text-decoration: none;
}
#wrapper .for-pc {
    display: none !important;
}
#wrapper .lay-br {
    display: inline-block;
}

.ft-base {
    font-family:
        -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

@media screen and (max-width: 479px) {
    body {
        font-size: 14px;
    }
}
/* #wrapper */
#wrapper {
    font-size: 13.333vw;
    overflow: hidden;
}
#wrapper img {
    display: block;
    width: 100%;
    height: auto;
}
#wrapper .inner {
    width: 89.334%;
    margin: 0 auto;
}
#wrapper .img-example {
    width: 108.597%;
    height: auto;
    margin: 8.8% 0 0 -9%;
}
#wrapper .anchor {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: -16.8%;
}
#wrapper .tl .box-tl {
    display: block;
}
/* #header-site */
#header-site {
    font-weight: bold;
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    background: #fff;
    z-index: 11;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    right: 0;
}
#header-site .logo-header {
    width: 36%;
    display: block;
    float: left;
    backface-visibility: hidden;
    margin: 3.7% 0 0 3.4%;
}
#header-site .txt-logo-header {
    font-size: 0.2em;
    line-height: 1.5;
    display: block;
    margin: 5% 0 0 2%;
    transform-origin: 0 0;
    font-size: 19.21px;
    white-space: nowrap;
    visibility: hidden;
    transition-property: opacity;
    height: 1em;
    color: #569357;
}
#header-site .wrap-btn-header {
    float: right;
    width: 55%;
    line-height: 1;
    text-align: right;
}
#header-site .wrap-btn-line {
    padding: 8.9% 3.4% 0 1.6%;
    display: inline-block;
    backface-visibility: hidden;
    margin-left: -10%;
}
#header-site .btn-request,
#header-site .btn-contact {
    border: solid 0.143em rgba(0, 0, 0, 0.1);
    font-size: 0.2em;
    line-height: 1.3;
    width: 9em;
    height: 2.5em;
    vertical-align: top;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    margin: 0 0 12%;
    border-radius: 0.429em;
    letter-spacing: 0.03em;
    white-space: nowrap;
    backface-visibility: hidden;
}
#header-site .btn-contact .box-txt,
#header-site .btn-request .box-txt {
    padding: 0;
    transition-duration: 0ms;
    backface-visibility: hidden;
}
#header-site .btn-contact .box-txt:after,
#header-site .btn-request .box-txt:after {
    content: '';
    font-family: Arial, Helvetica, 'sans-serif';
}
#header-site .btn-try {
    background: #fb494e;
    color: #fff;
    font-size: 0.27em;
    line-height: 1.318;
    display: block;
    float: right;
    width: 51.7%;
    height: 0;
    padding: 0 0 47.6%;
    text-align: center;
    border-radius: 0.445em 0 0 0.445em;
    letter-spacing: 0.06em;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
#header-site .btn-try .box-txt {
    padding: 14.6% 0 0;
    display: inline-block;
}
#header-site .txt-try {
    font-size: 0.681em;
    line-height: 1.453;
    display: block;
    text-align: left;
    white-space: nowrap;
    padding: 5.9% 0 0 4%;
    letter-spacing: 0.05em;
    font-weight: 500;
    backface-visibility: hidden;
}

@media screen and (max-width: 767px) {
    #header-site * {
        transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    /* #header-site.thin */
    #header-site {
        transform: translateX(0) !important;
    }
    #header-site.thin .logo-header {
        margin-top: 4.7%;
    }
    #header-site.thin .wrap-btn-line {
        padding: 2.4% 2.4% 0;
        margin-bottom: -100px;
        overflow: hidden;
        vertical-align: top;
    }
    #header-site.thin .btn-request,
    #header-site.thin .btn-contact {
        /* height: 2.182em; */
        margin-bottom: 5.2%;
    }
    #header-site.thin .btn-contact .box-txt,
    #header-site.thin .btn-request .box-txt {
        padding: 0;
        line-height: 1;
    }
    #header-site.thin .btn-try {
        width: 51.734%;
        padding-bottom: 30.4%;
    }
    #header-site.thin .btn-try .box-txt {
        padding-top: 13.2%;
    }
    #header-site.thin .txt-try {
        opacity: 0;
    }
    #header-site.thin .btn-request {
        margin-bottom: 0;
    }
    #header-site.thin .txt-logo-header {
        opacity: 0;
        height: 0;
    }
}
/* #top */
#top {
    background: #dcebe3;
    font-weight: bold;
    padding-top: 26%;
}
#top .inner {
    opacity: 0;
    width: 77%;
}
#top h1 {
    width: 59.127%;
    padding: 3.3% 0 0;
    margin: 0 0 0 -2%;
}
#top .copy01 {
    font-size: 0.633em;
    line-height: 1.438;
    padding: 12.8% 0 0;
    letter-spacing: 0.1em;
    white-space: nowrap;
}
#top .copy02 {
    font-size: 0.24em;
    line-height: 1.693;
    padding: 2.4% 0 0;
    letter-spacing: 0.08em;
    margin: 0 -2em 0 0;
}
#top .img-top {
    width: 100.957%;
    margin: 5.5% 0 0 0.3%;
    padding: 0 0 16%;
}
/* #nav-site */
#nav-site {
    background: #43a868;
    font-size: 0.26em;
    letter-spacing: 0.1em;
    font-weight: bold;
    position: relative;
    z-index: 5;
    min-height: 6.424em;
}
#nav-site li {
    float: left;
    padding: 0 10.1% 4.9% 0;
}
#nav-site a {
    color: #c5ddd1;
}
#nav-site a:after {
    content: '';
    font-family: Arial, Helvetica, sans-serif;
}
#nav-site .inner {
    padding: 5.8% 0 1.5%;
    line-height: 1;
}
#nav-site .bg-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #43a868;
    opacity: 0;
}
/* #solution */
#solution {
    font-weight: bold;
}
#solution .tl {
    font-size: 0.5em;
    line-height: 1.521;
    letter-spacing: 0;
    margin: 4rem -1em 0;
    opacity: 0;
    text-align: center;
}
#solution .wrap-box {
    margin: 9.6% 0 0 0;
    position: relative;
    z-index: 1;
}
#solution .box {
    font-size: 0.247em;
    line-height: 1.637;
    float: left;
    width: 49.105%;
    height: 0;
    padding: 0 0 49.105%;
    position: relative;
    margin: 0 0 2.1%;
    border-radius: 750px;
}
#solution .wrap-ov {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 750px;
    overflow: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#solution .box:nth-child(even) {
    float: right;
}
#solution .trouble {
    position: absolute;
    top: 49%;
    left: 0;
    transform: translate(0%, -50%) scale(1);
    z-index: 1;
    backface-visibility: hidden;
    width: 100%;
    text-align: center;
}
#solution .trouble .txt {
    display: inline-block;
    text-align: left;
}
#solution .before {
    color: #43a868;
    display: block;
    text-align: center;
    font-size: 0.817em;
    margin: -11.2% 0 0;
    letter-spacing: 0.06em;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
#solution .after {
    display: block;
    text-align: center;
    font-size: 0.817em;
    margin: -13.1% 0 0 0;
    letter-spacing: 0.06em;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
#solution .wrap-ov:after {
    content: '';
    background: url('../../img/ricoh_lps/icon-arw-btm.png') no-repeat;
    background-size: contain;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 7%;
    height: 7%;
    transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
    margin: 0 0 21.2% -3.5%;
}
#solution .solution {
    position: absolute;
    top: 51%;
    left: 0;
    opacity: 0;
    color: #fff;
    z-index: 2;
    transform: translate(0%, -50%) scale(0.95);
    white-space: nowrap;
    backface-visibility: hidden;
    width: 100%;
    text-align: center;
}
#solution .solution .txt {
    display: inline-block;
    text-align: left;
    margin-left: 0.5em;
}
#solution .box:nth-child(4) .solution .txt {
    margin-left: 0;
}
#solution .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: rotate 8s linear infinite;
    z-index: -1;
}
#solution .box:nth-child(2) .bg {
    animation-delay: 1000ms;
}
#solution .box:nth-child(3) .bg {
    animation-delay: 2000ms;
}
#solution .box:nth-child(4) .bg {
    animation-delay: 3000ms;
}
@keyframes rotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.05);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}
#solution .circle-bg01,
#solution .circle-bg02,
#solution .circle-bg03,
#solution .circle-bg04 {
    position: absolute;
    top: 0;
    left: 0;
    width: 88.754%;
    height: 88.754%;
    background: #569357;
    border-radius: 750px;
    opacity: 0.05;
    animation: scale 8s linear infinite;
}
#solution .circle-ov {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #43a868;
    border-radius: 750px;
    opacity: 0.2;
    transform: scale(1.35);
    opacity: 0;
}
@keyframes scale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}
#solution .circle-bg01 {
    margin: -0.607% 0 0 6.687%;
}
#solution .circle-bg02 {
    margin: 4.864% 0 0 2.128%;
}
#solution .circle-bg03 {
    margin: 6.383% 0 0 10.335%;
}
#solution .circle-bg04 {
    margin: 4.256% 0 0 7.903%;
}
#solution .wrap-illust {
    width: 111.941%;
    position: relative;
    margin: -5.5% 0 0 -6%;
    float: left;
}
#solution .illust-solution {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
/* #solution.hover */
#solution .wrap-ov.hover .bg {
    animation: none;
}
#solution .wrap-ov.hover .trouble {
    animation: trouble-over 300ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes trouble-over {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#solution .wrap-ov .trouble {
    animation: trouble-out 400ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes trouble-out {
    0% {
        opacity: 0;
        transform: translate(0%, -50%) scale(1.05);
    }
    30% {
        opacity: 0;
        transform: translate(0%, -50%) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translate(0%, -50%) scale(1);
    }
}
#solution .wrap-ov.hover .solution {
    animation: solution 350ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes solution {
    0% {
        opacity: 0;
        transform: translate(0%, -50%) scale(0.9);
    }
    10% {
        opacity: 0;
        transform: translate(0%, -50%) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translate(0%, -50%) scale(1);
    }
}
#solution .wrap-ov.hover + .circle-ov {
    animation:
        circle-transform 250ms cubic-bezier(0.19, 1, 0.22, 1) forwards,
        circle-opacity 300ms forwards;
}
@keyframes circle-transform {
    0% {
        transform: scale(1.35);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes circle-opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.2;
    }
}
#solution .wrap-ov.hover .circle-bg01,
#solution .wrap-ov.hover .circle-bg02,
#solution .wrap-ov.hover .circle-bg03,
#solution .wrap-ov.hover .circle-bg04 {
    animation: circle-over 400ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
    z-index: 2;
}
@keyframes circle-over {
    0% {
        width: 88.754%;
        height: 88.754%;
        background: #569357;
        opacity: 0.05;
    }
    100% {
        margin: 3.1%;
        width: 93.8%;
        height: 93.8%;
        opacity: 0.5;
        background: #43a868;
        transform: scale(1);
    }
}
#solution .wrap-ov .circle-bg01,
#solution .wrap-ov .circle-bg02,
#solution .wrap-ov .circle-bg03,
#solution .wrap-ov .circle-bg04 {
    animation: circle-out 400ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes circle-out {
    0% {
        margin: 3.1%;
        width: 93.8%;
        height: 93.8%;
        opacity: 1;
        background: #43a868;
        transform: scale(1);
    }
    100% {
        width: 88.754%;
        height: 88.754%;
        background: #569357;
        opacity: 0.05;
    }
}
#solution .wrap-ov.hover:after {
    opacity: 0;
    transform: translateY(30%);
}

@media screen and (max-width: 767px) {
    #nav-site .inner-nav-site {
        transform: none !important;
    }
    #nav-site a {
        color: #fff;
    }
}
/* #point */
#point {
    background: #dcebe3;
    font-weight: bold;
    position: relative;
    clear: both;
}
#point .inner {
    padding: 0 0 7.1%;
}
#point .tl {
    font-size: 0.5em;
    line-height: 1.521;
    text-align: center;
    padding: 15.3% 0 9.4%;
    margin: 0 -1em;
}
#point .box-txt {
    background: #fff;
    border-radius: 0.121em;
    box-shadow: 0 0 0.211em rgba(39, 95, 40, 0.3);
    position: relative;
    margin: 0 0 10.5%;
}
#point .stl {
    color: #569357;
    font-size: 0.48em;
    line-height: 1.501;
    padding: 1.6em 0 0.4em 7.5%;
}
#point .icon {
    border: solid 0.091em #569357;
    background: #fff;
    color: #2f3e36;
    font-size: 1.153em;
    display: block;
    border-radius: 750px;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    margin: -8% 0 0 5.5%;
    letter-spacing: 0.02em;
    text-indent: 0.01em;
}
#point .txt-icon {
    font-size: 0.302em;
    display: block;
    padding: 20% 0 6%;
}
#point .txt-point {
    font-size: 0.24em;
    line-height: 1.5;
    padding: 0 5% 0 7.5%;
    text-align: justify;
}
#point .illust-point1 {
    width: 73.341%;
    padding: 7.3% 0 10.6% 13.5%;
}
#point .caption-point {
    font-size: 0.22em;
    line-height: 1.5;
    display: block;
    text-indent: -1em;
    padding: 2.4% 0 0 1em;
    position: absolute;
    left: 0;
    top: 100%;
    letter-spacing: -0.03em;
}
#point .illust-point2 {
    width: 72.227%;
    padding: 8.2% 0 10.9% 13.6%;
}
#point .illust-point3 {
    width: 63.583%;
    padding: 7.6% 0 12.7% 18.3%;
}
#point .picture.box-txt {
    margin-bottom: 9% !important;
}
@media screen and (max-width: 767px) {
    #point {
        background: #d6e5dd;
    }
    #point .inner {
        width: 97.5%;
    }
    #point .picture {
        display: none;
    }
    #point .icon {
        color: #000000;
        border-color: #578557;
    }
    #point .stl {
        color: #69ac80;
        font-size: 0.506em;
        line-height: 1.36;
        font-weight: 500;
        padding: 1.4em 0 0.77em 5.5%;
    }
    #point .stl strong {
        font-weight: 600;
    }
    #point .icon {
        margin: -4.8% 0 0 0;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        left: 48.8%;
        border-width: 0.15em;
        width: 1.77em;
        height: 1.77em;
        font-size: 0.8em;
        font-weight: 600;
    }
    #point .box-txt {
        border-radius: 0.3em;
        margin: 0 0 12.9%;
    }
    #point .box-txt:first-child {
        margin-bottom: 13%;
    }
    #point .txt-point {
        font-size: 0.23811em;
        line-height: 1.35;
        color: #000000;
        padding: 0 5% 0 5.5%;
    }
    #point .txt-point2 {
        line-height: 1.57;
    }
    #point .txt-point3 {
        line-height: 1.5;
    }
    #point .illust-point1 {
        width: 69.341%;
        padding: 9.3% 0 6.8% 14.5%;
    }
    #point .illust-point2 {
        width: 69.2%;
        padding: 4.8% 0 4.9% 14%;
    }
    #point .illust-point3 {
        width: 68.7%;
        padding: 7.8% 0 5.9% 14.3%;
    }
}

/* #support */
#support {
    position: relative;
}
#support ul {
    padding: 0 0 8.8%;
}
#support li {
    width: 50%;
    float: left;
    margin: 0 0 7.3%;
    backface-visibility: hidden;
}
#support li:nth-child(7),
#support li:nth-child(8) {
    position: relative;
    top: 1.3vw;
}
#support img {
    width: auto;
    height: 10.133vw;
    margin: 0 auto;
    padding: 0 12% 0 0;
}
#support .tl {
    font-size: 0.5em;
    font-weight: bold;
    line-height: 1.441;
    text-align: center;
    padding: 16.6% 0 9.6%;
}
/* #example */
#example {
    background: #69b986;
}
#example .tl {
    padding: 16.5% 0 9.7% 0;
    color: #fff;
    font-size: 0.5em;
    line-height: 1.441;
    font-weight: bold;
    text-align: center;
}
#example .wrap {
    padding: 0 0 12.4%;
}
#example .box {
    position: relative;
    background: #fff;
    padding: 0 7.463%;
    overflow: hidden;
    border-radius: 0.121em;
    margin: 0 0 5.9%;
}
#example .box p {
    font-size: 0.24em;
    line-height: 1.76;
    text-align: justify;
    padding: 0 0 18%;
}

#example .box .btn-detail a {
    position: absolute;
    bottom: 3%;
    right: 7.463%;
    display: inline-block;
    padding: 0.3em 1em;
    color: #fff;
    font-size: 0.22em;
    background: #43a868;
    border-radius: 5px;
}

#example .stl {
    color: #5d8a71;
    font-weight: bold;
    font-size: 0.26em;
    padding: 1.5em 0 0.2em;
}
#example .box .person {
    font-size: 0.22em;
    line-height: 1.455;
    padding: 0;
}
#example .name {
    font-weight: bold;
}
#example .sstl {
    color: #5d8a71;
    font-size: 0.28em;
    font-weight: bold;
    line-height: 1.536;
    padding: 1.2em 0 0.5em;
}
/* #function */
#function {
    background: #e2eee8;
    position: relative;
}
#function h3 {
    color: #569357;
}
#function .inner {
    padding: 0 0 15%;
}
#function .tl {
    font-size: 0.5em;
    font-weight: bold;
    line-height: 1.441;
    text-align: center;
    padding: 16.4% 0 0;
}
#function .illust01 {
    width: 28.806%;
    margin: 0.65em 0 0.35em 36.3%;
}
#function .box-txt h3 {
    font-weight: bold;
    font-size: 0.36em;
    line-height: 1.576;
    padding: 0 0 0.6em;
}
#function .box-txt p {
    font-size: 0.24em;
    line-height: 1.76;
    text-align: justify;
}
#function .illust02 {
    width: 34.03%;
    margin: 0.6em 0 0.34em 33.6%;
}
#function .illust03 {
    width: 34.627%;
    margin: 0.65em 0 0.35em 32.5%;
}
#function .illust04 {
    width: 33.583%;
    margin: 0.65em 0 0.35em 33.6%;
}
#function .link-detail {
    color: #2f3e36;
    font-size: 0.26em;
    display: block;
    margin: 3.7em auto 0;
    font-weight: bold;
    width: 100%;
    max-width: 20em;
    text-align: center;
}
/*#function .link-detail:after {
	content: "";
	background: url("/-/Media/Ricoh/Sites/co_jp/service/makeleaps/special/point/img/icon-arw-rt.png") no-repeat center center;
	background-size: contain;
	margin-left: .5em;
	width: 0.77em;
	height: 1.1em;
	display: inline-block;
	vertical-align: middle;
}*/
/* #plan */
#plan {
    font-weight: bold;
    position: relative;
}
#plan p {
    font-size: 0.26em;
    line-height: 1.693;
    text-align: justify;
    letter-spacing: 0.04em;
}
#plan .tl {
    font-size: 0.5em;
    line-height: 1.441;
    text-align: center;
    margin: 0 -0.6em;
    padding: 12% 0 0;
}
#plan .stl {
    color: #569357;
    font-size: 0.5em;
    line-height: 1;
    padding: 0 0 0.6em;
}
#plan .stl small {
    font-size: 0.441em;
    padding: 0 0 1.1em;
    display: inline-block;
}
#plan .stl-calcuration {
    color: #569357;
    font-size: 0.28em;
    padding: 2em 0 0.9em;
    letter-spacing: 0.04em;
}
#plan .wrap-calcuration {
    text-align: left;
}
#plan .box-txt-calcuration {
    font-size: 1.101em;
    border: solid 0.105em #569357;
    background: #fff;
    border-radius: 0.42em;
    padding: 1.17em 1.5em;
    display: inline-block;
    margin: 0 0 1em;
    line-height: 1;
}
#plan .box-txt-calcuration:after {
    content: '';
    font-family: Arial, Helvetica, sans-serif;
}
#plan .plus {
    color: #569357;
    font-size: 1.37em;
    padding: 0 0 0 0.4em;
}
#plan .caption-calcuration {
    display: block;
    font-size: 0.847em;
    font-weight: 500;
}
#plan .example-calcuration {
    background: #e7f1ec;
    margin: 4.3% 0 6%;
    border-radius: 0.121em;
    padding: 0 7.6% 0.5em;
}
#plan .example-calcuration h5 {
    color: #569357;
    font-size: 0.36em;
    line-height: 1.556;
    padding: 1.3em 0 0.6em;
    text-align: left;
    letter-spacing: 0.04em;
}
#plan .example-calcuration small {
    font-size: 0.75em;
    font-weight: 300;
}
@media screen and (max-width: 767px) {
    #plan .example-calcuration small {
        font-size: 0.24em;
        line-height: 1.5;
        display: block;
    }

    #plan .example-calcuration h5 small {
        line-height: 1.57;
        font-size: 0.67em;
        display: block;
    }
}
#plan .answer-calcuration {
    border-bottom: solid 0.129em #569357;
    font-size: 2.091em;
    display: inline-block;
    margin: -0.15em 0 0;
    line-height: 1.3;
    letter-spacing: 0.05em;
    color: #54625a;
}
#plan .box-yen {
    font-size: 0.75em;
}
#plan .stl-option {
    color: #569357;
    font-size: 0.36em;
    letter-spacing: 0.04em;
    padding: 0 0 0.5em;
}
#plan .txt-option {
    font-size: 0.26em;
    line-height: 1.693;
    letter-spacing: 0.04em;
    padding: 0 0 3.4em;
}
#plan .txt-option dt {
    float: left;
}
#plan .txt-option dd {
    padding: 0 0 0 10.4em;
}
#plan .note-calcuration {
    color: #569357;
    display: block;
    margin: -0.3em 0 4em;
    letter-spacing: 0.04em;
    text-align: left;
}
/* #stock */
#stock {
    font-weight: bold;
}
#stock .inner {
    border: solid 0.031em #cc1930;
    padding: 6.3% 6.3% 5.8%;
    box-sizing: border-box;
}
#stock .tl {
    color: #cc1930;
    font-size: 0.42em;
    line-height: 1.429;
    text-align: center;
    padding: 0 0 0.65em;
    letter-spacing: 0.08em;
    margin: 0 -1em;
}
#stock .txt {
    font-size: 0.24em;
    line-height: 1.76;
    text-align: justify;
    letter-spacing: 0.03em;
}

/* #contact */
#contact {
    position: relative;
}
#contact .inner {
    padding: 0 0 16.3%;
}
#contact .tl {
    font-size: 0.5em;
    font-weight: bold;
    line-height: 1.521;
    text-align: center;
    padding: 2.15em 0 4.8% 0.5em;
    letter-spacing: 0.05em;
    margin: 0 -0.5em;
}
#contact .wrap-btn {
    font-size: 0.3146em;
    width: 15em;
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
}
#contact .wrap-btn a:after {
    content: '';
    font-family:
        'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic ProN',
        'ヒラギノ角ゴ', Meiryo, 'メイリオ', 'MS PGothic', 'ＭＳ Ｐゴシック',
        sans-serif;
}
#contact .btn-try {
    width: 100%;
    background: #fb494e;
    color: #fff;
    display: block;
    border-radius: 0.318em;
    padding: 0.91em 0;
    margin: 0 0 1em;
}
#contact .btn-try:hover {
    background: #e14246 !important;
}
#contact .btn-contact {
    font-size: 0.7em;
    border: solid 0.143em rgba(0, 0, 0, 0.1);
    /*float: left;*/
    border-radius: 0.318em;
    width: 46.3%;
    padding: 0.65em 0;
}
#contact .btn-request {
    margin-left: auto;
    font-size: 0.7em;
    border: solid 0.143em rgba(0, 0, 0, 0.1);
    /*float: right;*/
    border-radius: 0.318em;
    width: 46.3%;
    padding: 0.65em 0;
}
#contact .wrap-btn {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 10px 0;
    line-height: 1.2;
    flex-wrap: wrap;
}
#contact .wrap-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

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

@media screen and (max-width: 374px) {
    #wrapper {
        font-size: 50px;
    }
    #wrapper header,
    #top,
    #solution .wrap-box,
    #function .wrap-box-s {
        font-size: 13.333vw;
    }
    #wrapper h2.tl {
        font-size: 0.426em;
    }
    #stock h2.tl {
        font-size: 0.324em;
    }
    #plan .wrap-calcuration {
        font-size: 0.23em;
    }
}

/*-------------
	create 12/09/2019 -- mm/dd/yy
-------------*/
.mv-block {
    background: #dcebe3;
    font-weight: bold;
    padding-top: 15px;
}
.mv_inner {
    width: 87.7%;
    margin: 0 auto;
    padding: 20px 0 11px 0;
}
.mv_ttl {
    text-align: center;
    font-size: 0.5em;
    font-weight: bold;
    line-height: 1.37;
    letter-spacing: -1px;
    width: 91.3%;
    margin: 0 auto 12px;
}
.page-template-ricoh_lpspoint-php .mv_ttl {
    color: #4f8064;
}
.mv_img {
    padding-left: 6px;
    width: 100%;
    margin: 0 auto 12px;
    max-width: 782px;
}
.mv_content {
    font-size: 0.3em;
    display: block;
    width: 100%;
    margin: 0 auto;
    line-height: 1.35;
    color: #000000;
    text-align: center;
}
.mv_content .img {
    margin: 8px auto 6px;
    width: 66.5%;
}
.mv_wrap-btn {
    width: 100%;
}
.mv_wrap-btn img {
    width: 70% !important;
    margin: 30px auto;
}
.mv_btn {
    display: block;
    width: 94.9%;
    margin: 1rem auto;
    background: #fa4c4d;
    color: #fff !important;
    text-align: center;
    font-size: 0.39em;
    padding: 13px 10px 14px 10px;
    box-sizing: border-box;
    letter-spacing: 1.9px;
    line-height: 1.35;
    border-radius: 8px;
}
.mv_btn small {
    display: block;
    font-size: 0.65em;
    letter-spacing: 0;
    font-weight: normal;
}
.mv_btn small span {
    display: inline-block;
    background: #fff;
    color: #fa4c4d;
    padding: 1px 3px 2px 3px;
    border-radius: 3px;
    font-weight: bold;
    margin-right: 4px;
}
.mv_wrap-btn .mv_txt {
    color: #000000;
    line-height: 1.35;
    font-size: 0.3em;
    text-align: center;
}
@media (max-width: 767px) {
    .mv_wrap-btn .mv_txt {
        margin-top: 2.5em;
    }
    .mv_wrap-btn .mv_txt br {
        display: none;
    }
}
#contact .contact_txt {
    text-align: center;
    margin-bottom: 30px;
    font-size: 0.3em;
    line-height: 1.5;
}
#contact .contact_txt img {
    width: 100%;
    max-width: 199px;
    margin: 0 auto;
}

/* style for style.css*/

#header-site .logo-header {
    width: 28%;
}

#header-site .wrap-btn-header {
    width: calc(68.6%);
}

#contact .wrap-btn {
    width: 100%;
}

#contact .btn-contact {
    width: calc(33.33% - 2.333%);
    margin-right: 3.5%;
}

#contact .btn-request {
    width: calc(33.33% - 2.333%);
    margin-right: 0;
}

#example .link-target {
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    width: 100%;
}

#example .link-target a {
    padding: 1em 1.5em;
    font-size: 0.24em;
    color: #4e8064;
    border: solid 0.143em rgba(0, 0, 0, 0.1);
    background: #fff;
    border-radius: 0.429em;
    font-weight: bold;
    display: inline-block;
}

#example .link-target a:hover {
    opacity: 0.6;
}

@media screen and (max-width: 767px) {
    #header-site .btn-request,
    #header-site .btn-contact {
        font-size: 0.2em;
        height: auto;
        padding: 5px;
    }

    #header-site.thin .btn-contact .box-txt,
    #header-site.thin .btn-request .box-txt {
        line-height: 1.3 !important;
    }

    #header-site.thin .wrap-btn-line {
        margin-bottom: 0;
        padding: 2.4% 2.4% 2.4%;
    }
    #header-site .btn-try,
    #header-site.thin .btn-try {
        width: 65%;
        height: calc(3% + 48px);
        padding-bottom: 0;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 140px;
    }
    #header-site .btn-try .box-txt,
    #header-site.thin .btn-try .box-txt {
        padding: 3%;
        width: 100%;
        text-align: center;
        line-height: 1.5;
    }
    #header-site .btn-try .box-txt .for-sp,
    #header-site.thin .btn-try .box-txt .for-sp {
        display: none;
    }
    #header-site .header-site__sub {
        position: relative;
        display: inline-flex;
        width: 100%;
        height: auto;
        padding-bottom: 14vw;
        align-items: center;
        justify-content: space-between;
    }

    #header-site .header-site__sub .wrap-btn-line {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: inline-flex;
        left: 0;
        right: 0;
        margin-left: 0;
        box-sizing: border-box;
        padding: 2.4% 2.4%;
    }

    #header-site .header-site__sub .wrap-btn-line a {
        width: calc(33.33% - 10px);
        margin-right: 15px;
        margin-bottom: 0;
    }

    #header-site .header-site__sub .wrap-btn-line a:last-child {
        margin-right: 0;
    }

    #header-site .logo-header {
        width: 140px;
        margin-top: 0;
    }

    #header-site.thin .logo-header {
        margin-top: 0;
    }
    #header-site {
        display: inline-flex;
        width: 100%;
    }
    #header-site.thin .txt-try,
    #header-site .txt-try {
        text-align: center;
        padding-top: 0;
        padding-left: 0;
    }
    #header-site.thin .txt-try {
        opacity: 1;
    }
}
@media screen and (max-width: 640px) {
    #header-site .logo-header {
        width: 75px;
    }
}
@media screen and (max-width: 480px) {
    #header-site .header-site__sub {
        padding-bottom: 15vw;
    }
    #header-site .header-site__sub .wrap-btn-line a {
        width: calc(33.33% - 6.67px);
        margin-right: 10px;
        margin-bottom: 0;
    }
}
/* inline css */
#solution .bnr-telework {
    position: relative;
    text-align: center;
    margin: 8% auto;
    padding: 0 4.3%;
    max-width: 907px;
}
#solution .bnr-telework a,
#plan .bnr-telework a {
    position: absolute;
    left: 0;
    right: 0;
    top: 49.5%;
    display: inline-block;
    margin: 0 auto;
    width: 89%;
}
#plan .bnr-telework a {
    width: 84%;
}
#solution .bnr-telework img {
    margin: 0 auto;
    max-width: 907px;
}
@media (max-width: 640px) {
    #solution .bnr-telework {
        padding: 0;
    }
    #plan .bnr-telework {
        padding: 0 3.5%;
    }
}
@media (min-width: 641px) {
    #solution .bnr-telework a:hover,
    #plan .bnr-telework a:hover {
        opacity: 0.7 !important;
    }
}
#plan .inner {
    overflow: visible;
}
@media (min-width: 768px) {
    #plan .note-calcuration {
        margin-bottom: 12.3%;
    }
    #solution .bnr-telework a,
    #plan .bnr-telework a {
        top: 54.7%;
        width: 40.12%;
    }
    #plan .bnr-telework a {
        width: 45.7%;
    }
    #plan tl.telework {
        margin: 0 -0.882em;
    }
}
#contact .btn-contact {
    width: calc(50% - 2.333%);
}
#contact .btn-contact:last-of-type {
    margin-right: 0;
}

.external_w {
    background-image: url('../../img/ricoh_lps/icon_s_external_02.png');
}

.ico_end {
    display: inline-block;
    background-repeat: no-repeat;
    padding-right: 24px;
    background-position: right center;
}

/* IT-hojo */
#wrapper .it-hojo {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 760px;
    text-align: center;
    width: 90%;
}
#wrapper .it-hojo.it-hojo-mt {
    margin-top: 4rem;
}
#wrapper .it-hojo.it-hojo-mb {
    margin-bottom: 4rem;
}

/* heading with line */
.heading-with-line {
    display: table;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.333;
    margin: 2.5rem auto 0;
    max-width: 80%;
    position: relative;
    text-align: center;
}
.heading-with-line.heading-with-line-contracts {
    margin-bottom: 1rem;
}
.heading-with-line:before,
.heading-with-line:after {
    background: url(../../img/home/heading-line.svg) no-repeat center center /
        cover;
    bottom: 0;
    content: '';
    display: block;
    height: 30px;
    position: absolute;
    width: 37px;
}
.heading-with-line:before {
    left: -2.2em;
}
.heading-with-line:after {
    right: -2.2em;
    transform: scale(-1, 1);
}
.heading-with-line-big-text {
    display: inline-block;
    font-size: 40px;
    margin: 0 0.1em;
}
@media screen and (max-width: 639px) {
    .heading-with-line {
        font-size: 17px;
    }
    .heading-with-line-big-text {
        font-size: 32px;
    }
    .heading-with-line:before,
    .heading-with-line:after {
        height: 25px;
        width: 31px;
    }
}

/* landing-section-title */
.landing-section-title {
    font-size: 0.3em;
    line-height: 1.75;
    text-align: center;
    font-weight: 700;
}
@media screen and (min-width: 736px) {
    .landing-section-title {
        font-size: 24px;
        line-height: 36px;
    }
}
.landing-section-title span {
    display: inline-block;
    line-height: 2.8;
}
.landing-section-title strong {
    font-size: 1.6em;
    letter-spacing: -0.01em;
    line-height: 36px;
    color: #3ea966;
    border-bottom: 4px solid #3ea966;
    padding-bottom: 4px;
    display: inline;
}
@media screen and (min-width: 736px) {
    .landing-section-title strong {
        font-size: 36px;
        line-height: 48px;
        padding-bottom: 8px;
        border-bottom: 5px solid #3ea966;
        margin-left: 5px;
    }
}

/* customers-logos */
.hero-home-customers-logos {
    gap: 20px;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2rem auto;
    max-width: 1300px;
    padding: 0 5px;
}
#wrapper .logo-tokyu-resorts {
    width: 222px;
}
#wrapper .logo-tech-play {
    width: 165px;
}
#wrapper .logo-gmo {
    width: 120px;
}
#wrapper .logo-ayudante {
    width: 110px;
}
#wrapper .logo-peatix {
    width: 110px;
}
#wrapper .logo-gengo {
    width: 85px;
}
#wrapper .logo-fintech {
    width: 223px;
}
#wrapper .logo-daito-kentaku {
    width: 130px;
}
#wrapper .logo-htb {
    width: 210px;
}
@media screen and (max-width: 735px) {
    .hero-home-customers-logos {
        gap: 15px;
        margin: 1rem auto;
    }
    .hero-home-customers-logos img {
        zoom: 85%;
    }
}

/* diagram */
#wrapper .diagram {
    background-color: #e2eee8;
    padding-bottom: 1rem;
}
#wrapper .diagram .inner {
    max-width: 1200px;
    text-align: center;
    width: 90%;
}
#wrapper .diagram picture {
    display: block;
    margin: 1rem auto;
    max-width: 1168px;
}
#wrapper .diagram .diagram-attention {
    display: block;
    font-size: 0.24em;
    line-height: 1.76;
    margin: 20px 0 0;
    text-align: center;
}
@media screen and (min-width: 746px) {
    #wrapper .diagram .diagram-attention {
        display: none;
    }
}

/* pricing */
#wrapper .pricing {
    margin: 0 auto;
    max-width: 1200px;
    width: 90%;
}
#wrapper .pricing * {
    box-sizing: border-box;
}
#wrapper .pricing img {
    display: inline-block;
    width: 16px;
}
#wrapper .pricing p {
    text-align: center;
    letter-spacing: 0;
    font-size: 16px;
    line-height: 24px;
}
.pricing .scroll-warning {
    margin: 30px 0 20px;
    font-size: 16px;
    text-align: center;
}
.pricing .scroll-warning img {
    vertical-align: middle;
    position: relative;
    top: -2px;
}
.pricing .icon-tooltip {
    width: 16px;
    position: relative;
    top: 2px;
}
.pricing-table-wrapper {
    width: 100%;
    overflow: scroll;
    margin: 50px 0 40px;
}
@media screen and (max-width: 979px) {
    .pricing-table-wrapper {
        margin-top: 0;
    }
}
.pricing-table {
    width: 770px;
}
.pricing-table-cell {
    flex: 1 0 0%;
    border-right: 5px solid #fff;
    text-align: center;
    display: flex;
    justify-content: center;
}
.pricing-table-cell:last-child {
    border-right: none;
}
.pricing-table-cell-empty {
    background: #fff;
    position: sticky;
    flex: 0 0 115px;
    left: 0;
    z-index: 1;
}
.pricing-table-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
.pricing-table .table-cells {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0;
    text-align: center;
    margin: 0;
}
.pricing-table .table-cells li {
    flex: 1 0 0%;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    text-align: center;
    padding: 15px;
    border-right: 5px solid #fff;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pricing-table .table-cells li:last-child {
    border-right: 0;
}
.pricing-table .table-cells li:first-child {
    flex: 0 0 115px;
    padding: 14px 10px;
    font-weight: bold;
    text-align: left;
    display: flex;
    align-items: center;
    position: sticky;
    left: 0;
    justify-content: flex-start;
    z-index: 1;
}
.pricing-table .table-cells li.symbol {
    font-size: 1.5rem;
    font-family: YuGothic, Courier;
}
.pricing-table .table-cells:nth-child(even) li {
    background: #f4f5f7;
}
.pricing .bubble {
    align-items: center;
    background: rgba(255, 189, 201, 0.4);
    border-radius: 8px;
    justify-content: center;
    font-size: 16px;
    line-height: 24px;
    padding: 10px 19px;
    margin: 0 0 25px;
    position: relative;
    display: flex;
    font-weight: normal;
    width: 100%;
}
@media screen and (max-width: 735px) {
    .pricing .bubble {
        padding: 10px;
    }
}
.pricing .bubble:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid rgba(255, 189, 201, 0.4);
    bottom: -12px;
    left: 50%;
    margin-left: -8px;
}
.pricing-table-heading-cell {
    background: #cdeadc;
    margin-bottom: 8px;
}
.pricing-table-heading-cell:nth-child(3),
.pricing-table-heading-cell:nth-child(5) {
    background: #edf7f1;
}
.pricing-table-heading-cell h4 {
    font-size: 36px;
    line-height: 44px;
    padding: 13px 5px;
    margin: 0;
    font-weight: 500;
}
.pricing-table-heading-cell h4 strong {
    color: #3ea966;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    display: block;
}
.pricing-table-heading-cell h4 small {
    font-size: 18px;
    line-height: 28px;
}
.pricing-table-heading-cell h4 small small {
    font-size: 16px;
    line-height: 28px;
    font-weight: normal;
}
.pricing .button-wrap {
    text-align: center;
    margin-bottom: 20px;
}
.pricing .button-wrap .button {
    margin: 0 10px 20px;
}
.pricing .button-wrap .button-primary:hover,
.pricing .button-wrap .button-primary:focus {
    box-shadow:
        0 4px 0 rgba(144, 144, 144, 0.2),
        inset 600px 0 0 0 #ff6c00;
}
@media screen and (min-width: 736px) {
    .pricing-table {
        width: 900px;
    }
    .pricing-table-cell-empty {
        flex: 0 0 200px;
    }
    .pricing-table .table-cells li:first-child {
        flex: 0 0 200px;
        text-align: right;
        padding: 14px 23px 14px 10px;
        justify-content: flex-end;
    }
}
@media screen and (min-width: 980px) {
    .pricing-table-wrapper {
        overflow: hidden;
    }
    .pricing-table {
        width: 100%;
    }
    .pricing .scroll-warning {
        display: none;
    }
    .pricing-table .table-cells li {
        padding: 20px;
    }
    .pricing-table .table-cells li:first-child,
    .pricing-table-cell-empty {
        position: static;
    }
}
.pricing-modal-link {
    display: inline-block;
    flex-shrink: 0;
    margin-left: 5px;
}
.pricing .pricing-table .table-cells li:first-child br {
    display: none;
}
.pricing-sp-only {
    display: none;
}
@media screen and (max-width: 1279px) {
    .pricing-sp-only {
        display: block;
    }
    .pricing-pc-only {
        display: none;
    }
    .pricing .pricing-table-heading-cell h4 {
        font-size: 28px;
        line-height: 1.3;
    }
    .pricing .pricing-table-heading-cell h4 strong {
        font-size: 14px;
    }
    .pricing .pricing-table-heading-cell h4 small {
        font-size: 16px;
    }
    .pricing .pricing-table-heading-cell h4 small small {
        font-size: 14px;
    }
}
@media screen and (max-width: 991px) {
    .pricing .pricing-table-heading-cell h4 strong {
        letter-spacing: -0.02em;
    }
}
@media screen and (max-width: 639px) {
    .pricing .pricing-table .table-cells li:first-child br {
        display: block;
    }
    .pricing .bubble {
        font-size: 14px;
        line-height: 1.3;
    }
    .pricing .pricing-table-heading-cell h4 strong {
        font-size: 12px;
    }
}
.pricing-footnotes {
    font-weight: normal;
    list-style: none;
    margin: 0 0 2.5rem 0;
    padding: 0;
}
.pricing-footnotes li {
    color: #444;
    font-size: 12px;
    line-height: 20px;
    padding-left: 16px;
}
.pricing-footnotes li::before {
    content: '※';
    font-family:
        'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ', Meiryo, 'メイリオ',
        'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif;
    margin-left: -16px;
    margin-right: 5px;
}

/* modal */
.modal-wrapper {
    z-index: 1000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 40px 10px;
    text-align: center;
}
.modal-wrapper:not(:target) {
    opacity: 0;
    visibility: hidden;
}
.modal-wrapper:target {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.4s,
        visibility 0.4s;
}
.modal-wrapper::after {
    display: inline-block;
    height: 100%;
    margin-left: -0.05em;
    vertical-align: middle;
    content: '';
}
.modal-wrapper .modal-window {
    box-sizing: border-box;
    display: inline-block;
    z-index: 20;
    position: relative;
    width: 90%;
    max-width: 600px;
    padding: 30px 30px 15px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
    vertical-align: middle;
    font-size: 1rem;
}
.modal-wrapper .modal-window .modal-content {
    max-height: 80vh;
    overflow-y: auto;
    text-align: left;
}
.modal-overlay {
    z-index: 10;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
}
.modal-wrapper .modal-close {
    z-index: 20;
    position: absolute;
    top: -15px;
    right: -5px;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
}
.modal-wrapper .modal-close:hover {
    color: #2b2e38 !important;
}
.modal-note {
    font-size: 0.875rem;
    color: #aaa;
    margin: 1rem 0;
}
.modal-wrapper .bg-darker-gray {
    background: #f3f3f3;
}
.modal-wrapper .cell-light-gray {
    background-color: #fbfbfb;
    padding: 0.75rem;
}
.modal-wrapper .cell-white {
    background-color: #fff;
    padding: 0.75rem;
}
.modal-wrapper p {
    margin-bottom: 1rem;
}
.modal-wrapper strong {
    font-weight: 700;
}
.modal-wrapper table {
    width: 100%;
}
.modal-wrapper table tbody {
    font-size: 1rem;
    text-align: center;
}
.modal-wrapper table th {
    font-weight: 700;
}
.modal-wrapper td:first-child {
    min-width: 6rem;
}
@media screen and (min-width: 900px) {
    .modal-wrapper table {
        table-layout: auto;
        margin: 0 auto;
        text-align: center;
    }
    .modal-wrapper table th {
        width: 16%;
    }
}
@media screen and (max-width: 760px) {
    .modal-wrapper td {
        display: table-cell;
    }
}

/* blank link */
a.blank-link {
    align-items: center;
    display: inline-flex;
}
a.blank-link:after {
    background: url(../../img/home/icons/icon_link-blank_green.svg) no-repeat
        center / contain;
    content: '';
    display: inline-block;
    height: 1.5em;
    width: 1.5em;
}
a.blank-link:hover {
    color: #444;
}
a.blank-link:hover:after {
    filter: brightness(0);
}

/* customer-logos-loop */
.customer-logos-loop {
    animation: logos-loop 50s linear infinite;
    background: url('../../img/home/logos/customer-logos.png?ver=1') repeat-x
        left center/auto 36px;
    height: 36px;
    margin: 1rem auto;
    overflow: hidden;
    text-align: center;
    width: 100%;
}
.customer-logos-loop-v-huis-ten-bosch {
    background-image: url('../../img/home/logos/customer-logos-v-huis-ten-bosch.png?ver=1');
}
@media screen and (max-width: 639px) {
    .customer-logos-loop {
        animation: logos-loop-sp 25s linear infinite;
        background: url('../../img/home/logos/customer-logos-sp.png?ver=1')
            repeat-x left center/auto 68px;
        height: 68px;
    }
    .customer-logos-loop-v-huis-ten-bosch {
        background-image: url('../../img/home/logos/customer-logos-v-huis-ten-bosch-sp.png?ver=1');
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 2),
    screen and (min-resolution: 2dppx) {
    .customer-logos-loop {
        background-image: url('../../img/home/logos/customer-logos@2x.png?ver=1');
    }
    .customer-logos-loop-v-huis-ten-bosch {
        background-image: url('../../img/home/logos/customer-logos-v-huis-ten-bosch@2x.png?ver=1');
    }
    @media screen and (max-width: 639px) {
        .customer-logos-loop {
            background-image: url('../../img/home/logos/customer-logos-sp@2x.png?ver=1');
        }
        .customer-logos-loop-v-huis-ten-bosch {
            background-image: url('../../img/home/logos/customer-logos-v-huis-ten-bosch-sp@2x.png?ver=1');
        }
    }
}
@keyframes logos-loop {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -3260px 0;
    }
}
@keyframes logos-loop-sp {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -1280px 0;
    }
}