@charset "utf-8"; .sec0 {
    background-image: url(/images/top/mv_f2.png);
    background-size: cover;
    background-position: center;
    position: relative;
}

@media screen and (max-width: 1120px) {
    section.sec0 {
        background-image: url(/images/top/mv_f1.png);
        background-position: left;
        /* padding-top: 84px; */
    }
}

.sec2 {
    background-position: center;
    /* overflow: hidden; */
    background-image: url(/images/top/sec2_mv.png);
    /*position: relative;}*/
    background-size: 50% 100%;
    /* background-position-x: center; */
    z-index: 6;
    background-position: right center;
    background-repeat: no-repeat;
}

.sec3 {
    background-image: url(/images/top/sec3_mv.png);
    /* background-image: url(/images/top/sec3_mv1.png); */
    background-size: cover;
    z-index: 0;
}

.sec4 {
    background-color: #fff;
}

.sec5 {
    background-color: #0068b7;
    position: relative;
}

.section_cont.sec5 {
    padding: 70px 0px;
}

.header_menu a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.2em;
}

.nav_area {
    align-items: center;
    justify-content: space-between;
}

.logo_area {
    position: relative;
    top: 3px;
}

.header_menu li {
    margin-right: 25px;
}

.icon_menu li {
    margin-left: 20px;
}

nav.menu {
    /* margin-right: 10px; */
}

.main_catch h1 {
    font-size: 70px;
    color: #fff;
    padding-left: 66px;
    line-height: 1.25em;
    padding-right: 83px;
    letter-spacing: 0.2em;
    padding-top: 223px;
    /* font-weight: 500; */
    padding-bottom: 162px;
}

.main_copy {
    display: inline-block;
}

.main_sub {
    font-size: 18px;
    color: #fff;
    margin-top: 4px;
    display: block;
    letter-spacing: 0.09em;
    line-height: 1.6em;
}

.mv_height {
    height: 730px;
}

.main_catch {
    height: calc(100% - 72px);
    position: relative;
}

.video_wrap {
    position: absolute;
    overflow: hidden;
    width: 100%;
    top: 0;
    left: 0;
    /* object-fit: fill; */
    z-index: -1;
}

.video {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 730px;
    z-index: -1;
}

.main_video {
    object-fit: fill;
    position: absolute;
}

.main_bk {
    margin: 0 auto;
    max-width: 1120px;
    position: relative;
}

.header_wrapper {
    padding-top: 23px;
    padding-right: 20px;
    padding-left: 20px;
}

span.scroll_down {
    position: absolute;
    transform: rotate(90deg);
    right: -7px;
    font-size: 13px;
    bottom: 140px;
    letter-spacing: 0.1em;
    color: #fff;
}

.sec_num {
    border-bottom: 3px solid #2c3a44;
    font-size: 30px;
    margin-right: 25px;
    margin-bottom: 0px;
    line-height: 1em;
}

.section_head {
    font-size: 50px;
    letter-spacing: 0.15em;
    letter-spacing: 0.25em;
}

.service_item h3 {
    letter-spacing: 0.1em;
    font-size: 26px;
    margin-top: 35px;
    margin-bottom: 30px;
    font-family: 'Heebo', sans-serif;
    font-weight: 500;
}

.service_discription {
    font-size: 15px;
    line-height: 1.8em;
    text-align: left;
    margin-bottom: 40px;
}

.desing_service {
    margin-top: 70px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.desing_service {
    display: flex;
}

.section_subhead {
    margin-top: 15px;
    line-height: 1.8em;
    letter-spacing: 0.1em;
    text-align: justify;
}

.service_item {
    text-align: center;
    margin-right: 30px;
    max-width: 270px;
}

.service_item .read_more {
    margin: 0 auto;
}

.more_wrap a {
    text-decoration: none;
}

.sec2 .image_area {
    position: absolute;
    right: 0px;
    z-index: -1;
}

.web_solution {
    font-size: 116px;
    color: #fff;
    margin-bottom: 0px;
    letter-spacing: 0.2em;
    width: 2000px;
}

.sec2 .more_wrap, .sec3 .more_wrap {
    margin-top: 35px;
}

.section_cont {
    padding: 100px 0px;
}

.bk_design {
    background-image: url(/images/top/bk_top_design.png);
    background-repeat: no-repeat;
    background-position: center 220px;
}

.sec1 .content {
    padding: 0px 20px;
}

.section_cont.sec2 {
    padding: 80px 0px 100px 0px;
    overflow: hidden;
}

.web_wrap {
    margin-left: 450px;
    position: absolute;
    overflow: hidden;
    bottom: 0px;
    padding-bottom: 8px;
}

.image_area3 {
    top: 0px;
    right: 0px;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.sec3 {
    position: relative;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.45);
}

.image_area3 img {
    width: 100%;
    height: 100%;
}

.sec3_cont {
    display: flex;
}

.sec3_cont .sec_head_area {
    margin-right: 60px;
}

.for_human h3 {
    font-size: 25px;
    margin-bottom: 10px;
}

.top_for_human p {
    font-size: 14px;
}

.sec3_cont {
    color: #fff;
    align-items: center;
}

.sec3 .sec_num, .sec5 .sec_num {
    border-bottom: 3px solid #fff;
}

.sec3 .read_more {
    color: #fff;
    /* border: 1px solid #fff; */
}

.news_list time:before {
    content: '▶';
    margin-right: 15px;
    color: #2c3a44;
    font-size: 12px;
}

.news_list span {
    display: inline-block;
    background-color: #0068b7;
    color: #fff;
    padding: 6px 10px;
    margin-left: 20px;
    margin-right: 20px;
    width: 90px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.18em;
}

.news_list li {
    padding: 15px 0px;
}

.news_list {
    margin-top: 20px;
}

.news_list a {
    text-decoration: none;
}

.sec5 .sec_head_area {
    color: #fff;
    /* margin-right: 170px; */
}

.contact_form {
    display: inline-block;
    letter-spacing: 0.18em;
}

.form_inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 390px;
    height: 92px;
    border: 1px solid #fff;
    color: #fff;
    position: relative;
    z-index: 3;
}

.form_wrap a {
    text-decoration: none;
}

.sec5_content {
    display: flex;
    justify-content: space-between;
}

.sec6 {
    background-color: #a6a6a6;
}

.footer_menu_wrap {
    display: flex;
    margin-top: 40px;
    align-items: center;
}

.sec6 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.footer_catch {
    color: #fff;
    margin-left: 30px;
    letter-spacing: 0.1em;
}

.right p {
    margin: 0px;
    text-align: center;
    font-size: 14px;
    padding: 10px 0px;
    color: #707070;
}

.circle_inner {
    width: 50px;
    height: 50px;
    background-color: #fff;
    position: relative;
    border-radius: 9999px;
}

.circle_inner span {
    margin: 0px;
    display: inline-block;
    width: 18px;
    height: 2px;
    background-color: #0068b7;
    /* position: absolute; */
}

.left {
    transform: rotate(-45deg);
}

.right {
    transform: rotate(45deg);
}

.left {
    position: absolute;
    top: 23px;
    left: 10px;
}

.right {
    position: absolute;
    top: 23px;
    right: 10px;
}

.circle_position {
    margin: 0 auto;
    max-width: 1120px;
    position: relative;
}

.circle_wrap {
    position: absolute;
    right: 0px;
    top: -54px;
}

.copy_right p {
    text-align: center;
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px;
    color: #a6a6a6;
    letter-spacing: 0.09em;
}

.sec3:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
    background-image: url(/images/top/shadow.png);
}

.sec2 {
    position: relative;
}

.sec2:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    /* z-index: -1; */
    background: rgb(255, 255, 255, 0.5);
    background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 48%, rgba(255, 255, 255, 1) 48%, rgba(255, 221, 221, 1) 51%, rgba(255, 232, 232, 1) 99%);
    /* background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 48%, rgba(255, 255, 255, 1) 48%, rgba(255, 221, 221, 1) 51%, rgba(255, 232, 232, 1) 99%); */
    background: linear-gradient(115deg, rgba(241, 241, 241, 1) 0%, rgba(241, 241, 241, 1) 50%, rgba(241, 241, 241, 1) 60%, rgba(241, 241, 241, 0) 60%, rgba(241, 241, 241, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffe8e8', GradientType=1);
}

.sec2 .content {
    padding-bottom: 0px;
    z-index: 10;
    position: relative;
}

.top_for_human h3 {
    font-size: 26px;
    margin-bottom: 20px;
    letter-spacing: 0.2em;
}

.top_for_human p {
    font-size: 14px;
    letter-spacing: 0.1em;
    padding-left: 16px;
    margin-bottom: 0px;
}

.header_menu li {
    letter-spacing: 0.1em;
}

.news_list li {
    border-bottom: 1px dotted;
}

.service_item:last-child {
    margin-right: 0px;
}

.sec2 .section_subhead {
    max-width: 620px;
}

.sec3 .content {
    position: relative;
    z-index: 3;
}

.sp_logo {
    display: none;
}

.news_list br {
    display: none;
}

.sp_footer_menu {
    display: none;
}

.sp_sec0 {
    display: none;
}

.border_back {
    position: relative;
    width: 80px;
    height: 1px;
    /* background-color: rgba(9, 9, 9, 0.5); */
    transform: rotate(90deg);
    position: absolute;
    top: 618px;
    right: 5px;
    /* background-color: rgba(9, 9, 9, 0.5); */
}

.scroll_border {
    height: 1px;
    transition: width 0.18s linear;
    width: 80px;
    transform-origin: right;
}

.line_for_js {
    position: absolute;
    transition: all 0.3s linear;
    background-color: #1865a0;
}

.sec3 .line_for_js {
    background-color: #fff;
}

.line_top {
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left;
    top: 0px;
    right: 0px;
}

.line_bottom {
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    / transform-origin: right;
    bottom: 0;
    left: 0px;
}

.line_right {
    width: 1px;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
    top: 0px;
    right: 0px;
}

.line_left {
    width: 1px;
    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom;
    top: 0px;
    left: 0px;
}

.js_line_updown .line_updown {
    transform: scaleX(1);
    transition-delay: 0.3s;
}

.js_line_side .line_side {
    transform: scaleY(1);
}

/* ===================================================================================
 js用のスタイル
 =================================================================================== */
.js_show {
    transform: translateX(0px);
}

.js_show_before {
    /*display: none;*/
    opacity: 0;
    transform: translateX(20px);
    transition: all 1.8s ease;
}

.js_show_after {
    /*display: block;*/
    opacity: 1;
    transform: translateX(0px);
}

.js_catch1 {
    transition-delay: 0.7s;
}

.js_catch2 {
    transition-delay: 0.9s;
}

.js_catch3 {
    transition-delay: 1.1s;
}

.js_border_hide {
    transform: scaleX(0);
}

.char {
    opacity: 0;
    transition: all .2s linear;
}

.js_secShow .char {
    opacity: 1;
}

/* ===================================================================================
 for PC min-width: 741px
 =================================================================================== */
@media screen and (min-width: 741px) {
}

/* ===================================================================================
 for SP max-width: 768px
 =================================================================================== */
@media screen and (max-width: 768px) {
    .main_video {
        /*object-fit: fill;*/ position: absolute;
        max-width: 414px;
        height: 730px;
        object-fit: cover;
    }

    .sp_sec0 {
        display: block;
        position: fixed;
        width: 100%;
        box-sizing: border-box;
        z-index: 9999;
        background: #FFF;
        top: 0;
        left: 0;
        box-sizing: border-box;
        height: 44px;
    }

    .web_wrap {
        display: none;
    }

    .header_wrapper {
        display: none;
    }

    .sp_logo {
        display: block;
    }

    .main_catch h1 {
        padding: 20px 20px;
        font-size: 50px;
    }

    .menu_border {
        display: block;
        width: 20px;
        height: 2px;
        background-color: #2c3a44;
        transition: all 0.35s ease-in-out;
    }

    .sp_logo_inner img {
        height: 24px;
    }

    .sp_header_wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        box-sizing: border-box;
        height: 44px;
    }

    .groMenu_area {
        background-color: #0068b7;
        position: fixed;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 1;
        /* display: none; */
        transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, z-index 0.2s linear;
        opacity: 0;
        transform: translateY(-100px);
        z-index: -1;
    }

    .groMenu_area {
        overflow: scroll;
    }

    .cursol_border {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #fff;
        /* transform: rotate(45deg); */
    }

    .cursol_left {
        transform: rotate(-45deg) translate(-1px, 2px);
    }

    .cursol_right {
        transform: rotate(45deg) translate(0px, 0px);
    }

    .cursol_right {
        position: absolute;
        top: 9px;
        left: 0px;
    }

    .cursol_left {
        position: absolute;
        top: 6px;
        left: 0px;
    }

    .groMenu_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .groMenu_content {
        padding: 10px 20px;
    }

    .groMenu_logo_inner img {
        height: 24px;
    }

    .gronav_area li {
        font-size: 38px;
        color: #fff;
        margin-bottom: 40px;
    }

    .gronav_area li a {
        text-decoration: none;
    }

    .gronav_area {
        margin-top: 80px;
        padding: 0px 30px;
    }

    .desing_service {
        display: block;
    }

    .service_item {
        margin: 0 auto;
        margin-bottom: 50px;
        max-width: -webkit-fill-available;
        position: relative;
        /* overflow: hidden; */
    }

    .desing_service .service_item:last-child {
        margin: 0 auto;
    }

    .sec2 {
        background-image: url(/images/top/sec2_mv.png);
        background-size: cover;
        padding-top: 0px;
    }

    .section_cont.sec2 {
        padding-bottom: 0px;
    }

    .section_cont.sec2:before {
        width: 100%;
        background-image: url(/images/top/sp_shadow.png);
    }

    .sec2 .sec_head_area {
        align-items: flex-start;
    }

    .sec2 .read_more {
        margin: 0 auto;
    }

    .sec2 .more_wrap {
        padding: 50px 0px;
        margin-top: 0px;
    }

    .section_head {
        font-size: 40px;
    }

    .sec3_cont {
        display: block;
    }

    .top_for_human p {
        display: none;
    }

    .top_for_human h3 {
        text-align: center;
        line-height: 1.5em;
    }

    .sec3 .read_more {
        margin: 0 auto;
    }

    .top_for_human {
        margin: 50px 0px;
    }

    .news_list br {
        display: block;
        margin-bottom: 15px;
    }

    .news_list span {
        margin-bottom: 15px;
    }

    .sec5 .border_head {
        display: none;
    }

    .sec5_content {
        display: block;
    }

    .form_wrap {
        margin-top: 50px;
        text-align: center;
    }

    .sec5 .sec_head_area {
        margin-right: 0px;
    }

    .form_inner {
        width: 250px;
        height: 60px;
        margin: 0 auto;
    }

    .footer_menu_wrap {
        display: none;
    }

    .sp_footer_menu {
        display: block;
    }

    .footer_logo_area {
        display: block;
    }

    .footer_catch {
        margin-left: 0px;
        line-height: 1.8em;
        margin-bottom: 20px;
    }

    .sp_footer_icon li {
        display: inline-block;
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }

    .footer_logo {
        margin-bottom: 10px;
    }

    .sp_footer_icon {
        margin-right: 15px;
    }

    span.scroll_down {
        display: none;
    }

    span.border {
        display: none;
    }

    .circle_position {
        display: none;
    }

    .more_wrap {
        text-align: center;
    }

    .menu_bar_inner div {
        position: relative;
        width: 20px;
        height: 20px;
        z-index: 99999;
    }

    .cursol_area div {
        position: relative;
        width: 35px;
        height: 35px;
    }

    .menu_border_up {
        position: absolute;
        top: 8px;
        left: 0px;
    }

    .menu_border_down {
        position: absolute;
        top: 13px;
        left: 0px;
    }

    .mv_height {
        height: 687px;
    }

    .main_catch.flex_center h1 {
        padding: 80.5px 20px 77.5px;
        box-sizing: border-box;
    }

    .main_sub {
        margin-top: 23.5px;
    }

    .video_wrap {
    }

    .section_cont {
        padding: 50px 0;
    }

    .section_cont.sec5 {
        padding: 50px 0px;
    }

    .sec_head_area {
        display: flex;
        justify-content: center;
    }

    .section_subhead {
        margin-top: 25px;
        line-height: 2em;
    }

    .service_item h3 {
        margin: 20px 0 25px;
    }

    .service_discription {
        line-height: 2em;
        font-size: 16px;
    }

    .read_more {
        width: 192px;
        height: 52px;
    }

    .sec3_cont .sec_head_area {
        margin-right: 0;
    }

    .more_inner {
        letter-spacing: 0.15em;
    }

    .contact_form {
        letter-spacing: 0.15em;
    }

    .sec6 .content {
        padding: 20px 40px;
    }

    .gronav_area li {
        font-size: 22px;
        letter-spacing: 0.25em;
    }

    .service_item_bg {
        position: absolute;
        width: auto;
        max-width: none;
        top: 40px;
        height: 93px;
        z-index: -1;
        left: 0;
    }

    .sec1.js_sec1 .content {
        overflow: hidden;
    }

    .sec1 .content {
        padding: 20px;
    }

    .bk_design {
        background-image: none;
    }

    /* ===================================================================================
 JS用スタイル
 =================================================================================== */
    .js_show_nav {
        /* display: block; */
        opacity: 1;
        transform: translateY(0px);
        z-index: 99999;
    }

    .open .menu_border_up {
        transform: rotate(315deg);
        background-color: red;
        top: 13px;
    }

    .open .menu_border_down {
        transform: rotate(-315deg);
        background-color: red;
        top: 14px;
    }

    .open .menu_border {
        background-color: #fff;
    }
}

/* ===================================================================================
 for SP max-width: 568px
 =================================================================================== */
@media screen and (max-width: 568px) {
}