/************ index *****************/
.section01 {
    /*
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    */
}

.section02 {
    position: relative;
    z-index: 1;
    background: #fff;
    padding-bottom: 10px;
    -webkit-transform: translate3d(0, 0, 0);
}

@media handheld, only screen and (max-width: 760px) {
    .section01 {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
    }

    .section02 {
        background: #fff;
        padding-bottom: 50px;
    }
}


.header-area-index {
    /*	max-width: 1280px;	*/
    max-width: 2560px;
    /*	height: 815px; */
    height: 770px;
    margin: auto;
    background: url(/mod/static_images/img-mainvisual-index.jpg.webp) no-repeat 50% 50%;
    /*	background-position: center top;	*/
    -webkit-background-size: cover; /* Safari 3-4 */
    background-size: cover; /* Chrome, Firefox 4+, IE 9+, Opera, Safari 5+ */
}

.no-webp .header-area-index {
    /*	max-width: 1280px;	*/
    max-width: 2560px;
    /*	height: 815px; */
    height: 770px;
    margin: auto;
    background: url(/mod/static_images/img-mainvisual-index.jpg) no-repeat 50% 50%;
    /*	background-position: center top;	*/
    -webkit-background-size: cover; /* Safari 3-4 */
    background-size: cover; /* Chrome, Firefox 4+, IE 9+, Opera, Safari 5+ */
}

.lt-ie9 .header-area-index {
    max-width: 1280px;
    background-position: 50% 0;
}


.header-area-index .header-area-inner {
    max-width: 990px;
    margin: 160px auto auto auto;
}

.header-area-index .header-area-inner > .left {
    float: left;
    width: 650px;
    margin-top: 75px;
}

.header-area-index .header-area-inner > .left .header-area-title {
    font-size: 40px;
    font-weight: 400;
    text-shadow: 0px 0px 40px #eee;
    text-align: center;
}

.header-area-inner > .left .feature {
    margin-top: 40px;
    text-align: center;
}

.header-area-inner > .left .feature li {
    display: inline-block;
    margin: 0 3px;
    background: #ffdd00;
    border-radius: 50%;
}

.header-area-inner > .right {
    float: right;
    width: 290px;
}

@media handheld, only screen and (min-width: 761px) and (max-width: 960px) {
    .header-area-index {
        height: 900px;
    }

    .header-area-index .header-area-inner {
        max-width: 990px;
        margin: 70px auto auto auto;
    }

    .header-area-index .header-area-inner > .left {
        float: left;
        width: 650px;
        margin-top: 0px;
    }

    .header-area-index .header-area-inner > .left .header-area-title {
        font-size: 32px;
    }

    .header-area-inner > .right {
        float: right;
        width: 500px;
        margin-top: 3px;
    }
}

@media handheld, only screen and (max-width: 760px) {
    .header-area-index {
        max-width: 100%;
        height: auto;
        margin: auto;
        background: url(/mod/static_images/img-mainvisual-index.jpg.webp) no-repeat;
        background-position: center top;
        background-size: cover;
    }

    .no-webp .header-area-index {
        max-width: 100%;
        height: auto;
        margin: auto;
        background: url(/mod/static_images/img-mainvisual-index.jpg) no-repeat;
        background-position: center top;
        background-size: cover;
    }

    .header-area-index .header-area-inner {
        max-width: 990px;
        margin: 0 auto auto auto;
        padding-top: 50px;
    }

    .header-area-index .header-area-inner > .left {
        float: none;
        width: 100%;
        margin-top: 0;
    }

    .header-area-index .header-area-inner > .left .header-area-title {
        font-size: 20px;
        font-weight: 400;
        text-align: center;
    }

    .header-area-inner > .left .feature {
        margin-top: 20px;
        text-align: center;
    }

    .header-area-inner > .left .feature li {
        width: 20%;
        display: inline-block;
        margin: 0 3px;
        background: #ffdd00;
        border-radius: 50%;
    }

    .header-area-inner > .left .feature li img {
        width: 100%;
        height: auto;
    }

    .header-area-inner > .right {
        float: none;
        width: 100%;
    }
}


/* 無料で登録フォーム */
.header-area-inner > .right .registration {
    padding: 25px 15px 15px 15px;
    background: rgba(255, 255, 255, 0.8);
}

.header-area-inner > .right .registration .registration-title {
    text-align: center;
    font-size: 20px;
    margin-bottom: 25px;
}

.header-area-inner > .right .registration .registration-text {
    /* text-align: center; */
    width: 100%;
    margin-bottom: 10px;
}

.header-area-inner > .right .registration .registration-text input {
    border-radius: 0;
    border: none;
    -webkit-appearance: none;
    border: 1px solid #ccc;
    width: 100%;
    height: 38px;
    line-height: 38px;
    padding: 0 1em;
    font-size: 14px;
    border-radius: 6px;
}

.header-area-inner > .right .registration .registration-note {
    font-size: 12px;
    line-height: 1.4;
}

.header-area-inner > .right .registration .registration-submit {
    margin-top: 15px;
    text-align: center;
    width: 100%;
}

.header-area-inner > .right .registration .registration-submit input {
    border-radius: 0;
    border: none;
    -webkit-appearance: none;
    padding: 10px 15px;
    background: #ff3c61;
    color: #fff;
    border-radius: 20px;
    font-size: 16px;
    width: 100%;
}

.header-area-inner > .right .registration .registration-function {
    overflow: hidden;
    margin-top: 20px;
}

.header-area-inner > .right .registration .registration-function .left a,
.header-area-inner > .right .registration .registration-function .right a {
    text-decoration: underline;
    line-height: 1.4;
}

.header-area-inner > .right .registration .registration-function .left {
    float: left;
    width: 40%;
}

.header-area-inner > .right .registration .registration-function .right {
    float: right;
    width: 60%;
    text-align: right;
}

@media handheld, only screen and (max-width: 760px) {
    .header-area-inner > .right .registration {
        margin-top: 20px;
        padding: 25px 15px 15px 15px;
        background: rgba(255, 255, 255, 0.8);
    }

    .header-area-inner > .right .registration .registration-title {
        text-align: center;
        font-size: 20px;
        margin-bottom: 25px;
    }

    .header-area-inner > .right .registration .registration-text {
        text-align: center;
        width: 100%;
        margin-bottom: 10px;
    }

    .header-area-inner > .right .registration .registration-text input {
        border-radius: 0;
        border: none;
        -webkit-appearance: none;
        border: 1px solid #ccc;
        width: 100%;
        /*
    height: 38px;
        line-height: 38px;
    */
        padding: 10px 1em;
        font-size: 14px;
        border-radius: 6px;
    }

    .header-area-inner > .right .registration .registration-note {
        font-size: 12px;
        line-height: 1.4;
    }

    .header-area-inner > .right .registration .registration-submit {
        margin-top: 15px;
        text-align: center;
        width: 100%;
    }

    .header-area-inner > .right .registration .registration-submit input {
        border-radius: 0;
        border: none;
        -webkit-appearance: none;
        padding: 10px 15px;
        background: #ff3c61;
        color: #fff;
        border-radius: 20px;
        font-size: 16px;
        width: 100%;
    }

    .header-area-inner > .right .registration .registration-function {
        overflow: hidden;
        margin-top: 20px;
    }

    .header-area-inner > .right .registration .registration-function .left a,
    .header-area-inner > .right .registration .registration-function .right a {
        text-decoration: underline;
        line-height: 1.4;
    }

    .header-area-inner > .right .registration .registration-function .left {
        float: left;
        width: 40%;
    }

    .header-area-inner > .right .registration .registration-function .right {
        float: right;
        width: 60%;
        text-align: right;
    }
}

/* //無料で登録フォーム */


/* ニュース */
.header-area-index > .news-wrapper {
    max-width: 990px;
    margin: 30px auto auto auto;
    position: relative;
}

.header-area-index > .news-wrapper .news {
    position: absolute;
    top: -75px;
    left: 0;
    width: 595px;
    padding: 15px 15px 5px 15px;
    background: rgba(255, 255, 255, 0.8);
}

.header-area-index > .news-wrapper .news p {
    position: relative;
    padding: .5em 0 .75em;
    text-align: right;
}

.header-area-index > .news-wrapper .news p:before {
    padding: 0 .35em 0 0;
    content: "\FF1E";
}

.header-area-index > .news-wrapper .news p a {
    text-decoration: underline;
}

.header-area-index > .news-wrapper .news p a:hover {
    text-decoration: none;
}

.header-area-index > .news-wrapper .news dl {
    overflow: hidden;
    margin-bottom: 10px;
}

.header-area-index > .news-wrapper .news dl dt {
    float: left;
    width: 145px;
    font-size: 14px;
    line-height: 1.4;
}

.header-area-index > .news-wrapper .news dl dt span {
    margin-left: 10px;
    padding: 0.2em 0.5em;
    background: #f5a1b1;
    color: #fff;
    font-size: 12px;
}

.header-area-index > .news-wrapper .news dl dd {
    float: left;
    width: 415px;
    line-height: 1.4;
}

.header-area-index > .news-wrapper .news dl dd a {
    text-decoration: underline;
}

@media handheld, only screen and (min-width: 761px) and (max-width: 960px) {
    .header-area-index > .news-wrapper .news {
        position: absolute;
        top: -20px;
    }
}

@media handheld, only screen and (max-width: 760px) {
    .header-area-index .news-wrapper {
        max-width: 990px;
        margin: 50px auto 20px auto;
    }

    .header-area-index .news-wrapper .news {
        width: 100%;
        position: relative;
        top: -30px;
        bottom: 0;
        padding: 15px 15px 5px 15px;
        background: rgba(255, 255, 255, 0.8);
    }

    .header-area-index .news-wrapper .news dl {
        overflow: auto;
        margin-bottom: 10px;
        display: table;
        width: 100%;
    }

    .header-area-index .news-wrapper .news dl dt {
        float: none;
        display: table-cell;
        width: 1%;
        font-size: 14px;
        line-height: 1.4;
        white-space: nowrap;
    }

    .header-area-index .news-wrapper .news dl dt span {
        margin-left: 1%;
        padding: 0.2em 0.5em;
        background: #f5a1b1;
        color: #fff;
        font-size: 12px;
        white-space: nowrap;
    }

    .header-area-index .news-wrapper .news dl dd {
        float: none;
        display: table-cell;
        width: auto;
        padding-left: 2%;
        line-height: 1.4;
        word-break: break-all;
    }

    .header-area-index .news-wrapper .news dl dd a {
        text-decoration: underline;
    }
}

/* //ニュース */


/* サバモニの特長 */
.slider-area {
    max-width: 1160px;
    margin: auto;
    position: relative;
}

.slider-area .bx-viewport {
    max-width: 980px;
    height: auto !important;
    margin: auto;
}

.slider-area .slider-area-inner {
    max-width: 990px;
    margin: auto;
    padding: 50px 0;
}

.slider-area .slider-area-inner .slider-area-title {
    text-align: center;
    font-size: 28px;
}

.slider-area .slider-area-inner .feature {
    display: table;
    margin: 35px auto;
    table-layout: fixed;
}

.slider-area .slider-area-inner .feature li {
    display: table-cell;
    width: 305px !important;
    margin: auto;
    padding: 0 20px;
    vertical-align: top;
    text-align: center;
}

.slider-area .slider-area-inner .feature li .text {
    margin-top: 20px;
    text-align: center;
    line-height: 1.6;
}

.slider-area .slider-area-inner .slider-area-function {
    text-align: center;
}

.slider-area .slider-area-inner .slider-area-function li {
    display: inline-block;
    margin: auto 10px;
}

.slider-area .slider-area-inner .slider-area-function li.left {
    padding: 10px 45px;
    background: #ff3c61;
    color: #fff;
    border-radius: 20px;
    font-size: 16px;
    border: 2px solid #ff3c61;
}

.slider-area .slider-area-inner .slider-area-function li.left a {
    color: #fff;
}

.slider-area .slider-area-inner .slider-area-function li.right {
    padding: 10px 45px;
    background: #fff;
    border-radius: 20px;
    font-size: 16px;
    border: 2px solid #ccc;
}

.slider-area .bx-controls-direction {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: table;
}

.slider-area .bx-controls-direction .bx-prev {
    display: table-cell;
    height: 70px;
    text-align: left;
    position: relative;
    background: url(/mod/static_images/icon-arrow-l.png) no-repeat;
    background-position: left center;
    text-indent: -9999px;
}

.slider-area .bx-controls-direction .bx-next {
    display: table-cell;
    height: 70px;
    text-align: left;
    position: relative;
    background: url(/mod/static_images/icon-arrow-r.png) no-repeat;
    background-position: right center;
    text-indent: -99999px;
}

/* スライダ */
@media handheld, only screen and (max-width: 760px) {
    .slider-area .slider-area-inner {
        max-width: 990px;
        margin: auto;
        padding: 20px 0;
    }

    .slider-area .slider-area-inner .slider-area-title {
        text-align: center;
        font-size: 28px;
    }

    .slider-area .slider-area-inner .feature {
        display: table;
        margin: 20px auto;
        table-layout: fixed;
    }

    .slider-area .slider-area-inner .feature li {
        display: block;
        width: 96%;
        margin: auto auto 40px auto;
        padding: 20px;
        vertical-align: top;
        text-align: center;
    }

    .slider-area .slider-area-inner .feature li img {
        width: 60%;
        height: auto;
    }

    .slider-area .slider-area-inner .feature li .text {
        margin-top: 20px;
        text-align: center;
        line-height: 1.6;
        font-size: 11px;
    }

    .slider-area .slider-area-inner .slider-area-function {
        text-align: center;
        width: 100%;
    }

    .slider-area .slider-area-inner .slider-area-function li {
        display: inline-block;
        width: 45%;
        margin: auto 0;
        margin: 0 2%;
    }

    .slider-area .slider-area-inner .slider-area-function li.left {
        padding: 10px 0;
        background: #ff3c61;
        color: #fff;
        border-radius: 20px;
        font-size: 14px;
        border: 2px solid #ff3c61;
    }

    .slider-area .slider-area-inner .slider-area-function li.left a {
        color: #fff;
    }

    .slider-area .slider-area-inner .slider-area-function li.right {
        padding: 10px 0;
        background: #fff;
        border-radius: 20px;
        font-size: 14px;
        border: 2px solid #ccc;
    }

    .slider-area .bx-controls-direction .bx-prev {
        display: table-cell;
        height: 70px;
        text-align: left;
        position: relative;
        background: url(/mod/static_images/icon-arrow-l.png) no-repeat;
        background-position: 2% center;
        background-size: 18px 36px;
        text-indent: -9999px;
    }

    .slider-area .bx-controls-direction .bx-next {
        display: table-cell;
        height: 70px;
        text-align: left;
        position: relative;
        background: url(/mod/static_images/icon-arrow-r.png) no-repeat;
        background-position: 98% center;
        background-size: 18px 36px;
        text-indent: -99999px;
    }
}

/* //サバモニの特長 */


.use-case-area {
    max-width: 1160px;
    margin: auto;
    position: relative;
}
.use-case-area ul {
    list-style: none;
    font-size:0;
}
.use-case-area ul li {
    display: inline-block;
    width: 25%;
    height: 180px;
    line-height: 180px;
    text-align: center;
    vertical-align: middle;
}
.use-case-area img {
    width: 180px;
    height: auto;
    vertical-align: middle;
}

.use-case-area .use-case-area-title {
    text-align: center;
    font-size: 28px;
}


@media handheld, only screen and (max-width: 760px) {
    .use-case-area {
        max-width: 760px;
        margin: auto;
        position: relative;
    }
    .use-case-area ul {
        list-style: none;
        font-size:0;
    }
    .use-case-area ul li {
        display: inline-block;
        width: 50%;
        height: 180px;
        line-height: 180px;
        text-align: center;
        vertical-align: middle;
    }
    .use-case-area img {
        width: 160px;
        height: auto;
        vertical-align: middle;
    }
}



.tool-image-area {
    min-height: 350px;
    background: url(/mod/static_images/img-index001.jpg.webp) no-repeat;
    background-position: center center;
    background-size: cover;
}

.no-webp .tool-image-area {
    min-height: 350px;
    background: url(/mod/static_images/img-index001.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
}

@media handheld, only screen and (max-width: 760px) {
    .tool-image-area {
        min-height: 100px;
        background: url(/mod/static_images/img-index001.jpg.webp) no-repeat;
        background-position: center center;
        background-size: cover;
    }

    .no-webp .tool-image-area {
        min-height: 100px;
        background: url(/mod/static_images/img-index001.jpg) no-repeat;
        background-position: center center;
        background-size: cover;
    }
}


.explanation-area {
    max-width: 1280px;
    margin: auto;
    padding: 90px 0;
}

.explanation-area .explanation-area-inner {
    max-width: 990px;
    margin: auto;
}

.explanation-area .explanation-area-inner .explanation-area-title {
    font-size: 38px;
    font-weight: 400;
    line-height: 1.4;
}

.explanation-area .explanation-area-inner .explanation-text {
    margin-top: 40px;
    line-height: 1.4;
}

.explanation-area .explanation-area-inner .explanation-area-function {
    text-align: center;
    margin-top: 30px;
}

.explanation-area .explanation-area-inner .explanation-area-function li {
    display: inline-block;
    margin: auto 10px;
}

.explanation-area .explanation-area-inner .explanation-area-function li.left {
    padding: 10px 30px;
    background: #ff3c61;
    color: #fff;
    border-radius: 20px;
    font-size: 14px;
    border: 2px solid #ff3c61;
}

.explanation-area .explanation-area-inner .explanation-area-function li.left a {
    color: #fff;
}

.explanation-area .explanation-area-inner .explanation-area-function li.right {
    padding: 10px 30px;
    background: #fff;
    border-radius: 20px;
    font-size: 14px;
    border: 2px solid #ccc;
}

.explanation-area .explanation-left {
    float: left;
    width: 430px;
}

.explanation-area .explanation-right {
    float: right;
    width: 430px;
}

.explanation01 {
    padding: 140px 0 90px 0;
    background: url(/mod/static_images/img-index01.jpg.webp) no-repeat;
    background-position: right 50px;
}

.no-webp .explanation01 {
    padding: 140px 0 90px 0;
    background: url(/mod/static_images/img-index01.jpg) no-repeat;
    background-position: right 50px;
}

.explanation01 .explanation-right img {
    display: none;
}

.explanation02 {
    padding: 120px 0 120px 0;
    background: #90d9ea url(/mod/static_images/img-index02.png.webp) no-repeat;
    background-position: top 10px left 55px;
}

.no-webp .explanation02 {
    padding: 120px 0 120px 0;
    background: #90d9ea url(/mod/static_images/img-index02.png) no-repeat;
    background-position: top 10px left 55px;
}

.explanation02 .explanation-left img {
    display: none;
}

@media handheld, only screen and (max-width: 760px) {
    .explanation-area {
        max-width: 1280px;
        margin: auto;
        padding: 30px 0;
    }

    .explanation-area .explanation-area-inner {
        max-width: 990px;
        margin: auto;
    }

    .explanation-area .explanation-area-inner .explanation-area-title {
        font-size: 30px;
        font-weight: 400;
        line-height: 1.4;
        text-align: center;
    }

    .explanation-area .explanation-area-inner .explanation-text {
        margin-top: 40px;
        line-height: 1.4;
    }

    .explanation-area .explanation-area-inner .explanation-area-function {
        text-align: center;
        margin-top: 30px;
    }

    .explanation-area .explanation-area-inner .explanation-area-function li {
        display: inline-block;
        width: 45%;
        margin: auto 0;
        margin: 0 2%;
    }

    .explanation-area .explanation-area-inner .explanation-area-function li.left {
        padding: 10px 0;
        background: #ff3c61;
        color: #fff;
        border-radius: 20px;
        font-size: 16px;
        border: 2px solid #ff3c61;
    }

    .explanation-area .explanation-area-inner .explanation-area-function li.left a {
        color: #fff;
    }

    .explanation-area .explanation-area-inner .explanation-area-function li.right {
        padding: 10px 0;
        background: #fff;
        border-radius: 20px;
        font-size: 16px;
        border: 2px solid #ccc;
    }

    .explanation-area .explanation-left {
        float: none;
        width: 100%;
        padding: 0 2%;
    }

    .explanation-area .explanation-right {
        float: none;
        width: 100%;
        padding: 0 2%;
    }

    .explanation01 {
        padding: 30px 0;
        background: none;
    }

    .explanation01 .explanation-right img {
        display: block;
        width: 100%;
        height: auto;
    }

    .explanation02 {
        background: none;
        background: #90d9ea;
        padding: 30px 0;
    }

    .explanation02 .explanation-left img {
        display: block;
        width: 100%;
        height: auto;
    }
}


@media all and (-ms-high-contrast: none) {
    *::-ms-backdrop, .explanation-area-function li.left-btn {
        padding: 10px 25px 5px 25px !important
    }

    /* IE11 */
    *::-ms-backdrop, .explanation-area-function li.right-btn {
        padding: 10px 25px 5px 25px !important
    }

    /* IE11 */
    *::-ms-backdrop, .slider-area-function li.left-btn {
        padding: 10px 45px 5px 45px !important
    }

    /* IE11 */
    *::-ms-backdrop, .slider-area-function li.right-btn {
        padding: 10px 45px 5px 45px !important
    }

    /* IE11 */
}