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

@media (max-width: 1023px) {
	header h1 {
        width: 26vw;
    }
    header .btnwrap {
        width: 38.583vw;
    }
    header .btnwrap a {
        width: 33.33%;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 4.615vw;
    }
    a:hover {
        opacity: 1;
    }
    section {
        padding-bottom: 23.077vw;
    }
    .inner {
        width: 84.615vw;
    }
    .flex {
        flex-direction: column;
    }
    br.nopc {
        display: block;
    }
    br.nosp {
        display: none;
    }

    .scr_fadeup_head {
        opacity: 1;
        position: relative;
        top: 0;
    }


    /* header */
    header {
        position: fixed;
        top: 0;
    }
    header .inner,
    header .navber,
    header h1,
    header .btnwrap {
        width: 100%;
    }
    header h1,
    header .btnwrap,
    header .btnwrap>a {
        height: 15.385vw;
    }
    header .btnwrap>a {
        padding-left: 0;
    }
    header .btnwrap.flex {
        flex-direction: row;
    }
    header h1 {
        padding-left: 7.692vw;
    }
    header h1 img {
        width: 35.897vw;
    }
    header .btnwrap>a {
        font-size: 3.846vw;
        justify-content: center;
        padding-bottom: 3vw;
        width: 33.333%;
        border-radius: 0;
        margin: 0;
    }
    header .btnwrap>a::after {
        font-size: 3.077vw;
        transform: rotate(90deg);
        bottom: 3vw;
        left: 0;
        right: 0;
        margin: auto;
        justify-content: flex-end;
        width: 15.385vw;
    }

    /* hamberger */
    #hamburger {
        width: 12.821vw;
        height: 8vw;
        top: 4vw;
        right: 7.692vw;
    }
    #hamburger.active {
        width: 10.256vw;
        height: 15.256vw;
        top: 4.359vw;
        right: 5.641vw;
    }
    #hamburger div {
        height: 0.769vw;
    }
    #hamburger div:nth-of-type(2) {
        top: calc(50% - 0.3845vw);
        left: 0;
    }
    #hamburger.active div:nth-of-type(1) {
        -webkit-transform: translate(-30%, 390%) rotate(-315deg);
        transform: translate(-30%, 390%) rotate(-315deg);
    }
    #hamburger.active div:nth-of-type(3) {
        -webkit-transform: translate(-30%, -1500%) rotate(315deg);
        transform: translate(-30%, -1500%) rotate(315deg);
    }

    /* menuwrap */
    .menuWrap {
        padding-top: 20.769vw;
    }
    .menuWrap .inner {
        width: 84.615vw;
        margin: auto;
    }
    .menuWrap .inner>div {
        width: 100%;
    }
    .menuWrap p {
        font-size: 4.872vw;
        border-bottom: solid 1px #F3F3F3;
        padding: 1.282vw 2.821vw;
    }
    .menuWrap p::after {
        content:"〉";
        font-size: 3.077vw;
        transform: rotate(90deg);
        position: absolute;
        right: 2.821vw;
        bottom: 0;
    }
    .menuWrap a {
        font-size: 3.846vw;
    }
    .menuWrap ul {
        height: 0;
        overflow: hidden;
        transition: 0.3s;
        opacity: 0;
        padding-left: 2.821vw;
        margin-bottom: 1.41vw;
    }
    .menuWrap ul.open {
        height: auto;
        opacity: 1;
    }
    .menuWrap li {
        padding-left: 4vw;
    }
    .menuWrap li::before {
        font-size: 2.051vw;
        line-height: 3.846vw;
    }
    .menuWrap li.nosp {
        display: none;
    }
    .menuWrap li.nopc {
        display: block;
    }

    /* fv */
    #fv .inner {
        padding-top: 30.77vw;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #fv .fv_textwrap {
        padding-top: 0;
    }
    #fv .fv_textwrap p {
        font-size: 5.8vw;
    }
    #fv .fv_textwrap p .sub {
        font-size: 4.103vw;
    }
    #fv .fv_flow {
        width: 100%;
        flex-direction: row;
        margin-top: 16.026vw;
    }
    #fv .fv_flow .flowitem {
        font-size: 3.526vw;
        width: 40.026vw;
        height: 10.256vw;
        border-radius: 0.641vw;
    }
    #fv .fv_mainimg {
        position: relative;
        width: 100%;
        top: 0;
        margin-top: 11.538vw;
    }

    /* content */
    section {
        padding-bottom: 25.641vw;
    }
    .viewwrap {
        height: auto;
    }
    h2 {
        font-size: 5.128vw;
        margin-bottom: 12.821vw;
    }
    .subhead {
        font-size: 4.872vw;
    }
    .scr_fadeup {
        height: auto;
    }
    .scr_fadeup>div {
        opacity: 1;
        position: relative;
    }


    /* about */
    #about {
        margin-top: 12.821vw;
    }
    #about .flex {
        margin-top: 12.821vw;
    }
    #about .flex>div {
        font-size: 3.59vw;
        width: 100%;
        height: 96.154vw;
        margin-bottom: 12.821vw;
        padding-top: 6.41vw;
        padding-bottom: 0;
        justify-content: flex-start;
    }
    #about .flex>div:last-child {
        margin-bottom: 0;
    }
    #about .flex>div img {
        margin-bottom: 0;
    }
    #about .flex>div:first-child img,
    #about .flex>div:nth-child(2) img,
    #about .flex>div:nth-child(3) img,
    #about .flex>div:nth-child(4) img {
        width: 100%;
    }
    #about .flex .txtwrap {
        height: 100%;
        display: flex;
        align-items: center;
    }


    /* summary */
    #summary {
        margin-top: 0;
        margin-bottom: 0;
    }
    #summary img {
        margin-top: 12.821vw;
        box-shadow: 2.564vw 2.564vw 6.41vw RGBa(0,0,0,0.16);
    }

    /* merit */
    #merit {
        margin-top: 0;
        margin-bottom: 0;
    }
    #merit h2 {
        margin-bottom: 12.821vw;
    }
    #merit .flex div {
        width: 100%;
        margin-bottom: 12.821vw;
    }
    #merit .flex>div:last-child {
        margin-bottom: 0;
    }
    #merit .fadeup:nth-child(2) {
        animation-delay: 0s;
    }
    #merit .fadeup:nth-child(3) {
        animation-delay: 0s;
    }
    
    /* features */
    #features h2 {
        margin-bottom: 12.821vw;
    }
    #features>div img {
        border-radius: 0.641vw;
        box-shadow: 2.564vw 2.564vw 6.41vw RGBa(0,0,0,0.16);
        margin-bottom: 12.821vw;
    }
    #features .viewwrap {
        font-size: 4.615vw;
        text-align: justify;
        margin-bottom: 12.821vw;
    }
    #features .blue {
        text-align: center;
        margin-bottom: 3.205vw;
    }
    #features .viewwrap:last-child {
        margin-bottom: 0;
    }
    #features .viewwrap p {
        width: 100%;
    }
    #features .blue {
        font-size: 4.744vw;
    }

    /* operation */
    #operation {
        margin-top: 0;
        margin-bottom: 0;
    }
    #operation .operation_item,
    #operation .operation_item:nth-child(n + 5),
    #operation .operation_item:first-child {
        padding: 9.795vw 5.128vw;
        margin-top: 12.821vw;
        height: auto;
    }
    #operation .operation_item:first-child .imgwrap {
        height: auto;
    }
    #operation h3 {
        font-size: 5.128vw;
        line-height: 1.4;
        margin-bottom: 2.66vw;
    }
    #operation .operation_item p {
        font-size: 4.615vw;
        line-height: 1.4;
    }
    #operation .operation_text {
        font-size: 4.359vw;
    }
    #operation .operation_text li {
        text-indent: -1.4em;
        padding-left: 1.4em;
    }
    #operation .operation_text li:before {
        font-size: 4.872vw;
        margin-right: 1vw;
    }
    #operation .imgwrap {
        height: auto;
        margin-top: 5.333vw;
    }

    /* lisence,  spec*/
    #lisence h2,
    #spec h2 {
        margin-bottom: 12.821vw;
    }
    #lisence .inner>p,
    #spec .inner>p {
        font-size: 3.846vw;
    }
    #lisence table,
    #lisence tbody,
    #lisence table tr,
    #lisence table th,
    #lisence table td,
    #spec table,
    #spec tbody,
    #spec table tr,
    #spec table th,
    #spec table td {
        font-size: 3.846vw;
        display: block;
        border: none;
    }
    #lisence table,
    #spec table {
        margin-bottom: 12.821vw;
    }
    #lisence .border,
    #spec .border {
        border-bottom: solid 1px #707070;
    }
    #lisence .head,
    #spec .head {
        font-weight: 500;
        border-top: solid 1px #707070;
        border-bottom: solid 1px #707070;
        background-color: #FBFBFB;
    }

    /* lisence */
    #lisence table th {
        display: none;
    }
    #lisence table {
        border: solid 1px #707070;
        border-top: none;
    }
    #lisence table td.medium {
        font-weight: 500;
    }

    /* spec */
    #spec {
        margin-top: 0;
    }
    #spec .nosp {
        display: none;
    }
    #spec .nopc {
        display: block;
    }
    #spec .inner>p {
        letter-spacing: -0.01em;;
    }
    #spec table th.bold {
        font-weight: 700;
        border: none;    }
    #spec table th.medium,
    #spec table td.medium {
        font-weight: 500;
    }
    #spec table th:first-child,
    #spec table th:nth-child(2),
    #spec #spec05+table th:nth-child(2),
    #spec #spec05+table th:nth-child(3) {
        width: 100%;
    }
    #spec table {
        border-bottom: solid 1px #707070;
    }
    #spec table th {
        background-color: inherit;
        border-right: solid 1px #707070;
        border-left: solid 1px #707070;
    }
    #spec table td {
        border-right: solid 1px #707070;
        border-left: solid 1px #707070;
    }
    #spec05 {
        font-weight: 700;
    }

    /* casestudy */
    #casestudy {
        padding-bottom: 12.821vw;
    }
    #casestudy .nosp {
        display: none;
    }
    #casestudy .nopc {
        display: block;
        width: 84.615vw;
        margin-right: auto;
        margin-left: auto;
    }
    #casestudy h3 {
        font-size: 7.692vw;
    }
    #casestudy .name {
        font-size :3.846vw;
        font-weight: 500;
    }
    #casestudy .imgwrap {
        margin: 5.385vw auto 7.821vw ;
    }
    #casestudy .text {
        background-color: #fff;
        height: 126.923vw;
        padding: 9.744vw 6.41vw 15.385vw;
    }
    #casestudy .link {
        font-size: 5.769vw;
        position: absolute;
        bottom: 6.667vw;
        right: 6.41vw;
    }
    #casestudy .link a img {
        width: 6.41vw;
    }
    #casestudy .bg {
        height: 183.333vw;
        margin-top: -175.641vw;
    }

    /* relation */
    #relation {
        margin-top: 0;
        margin-bottom: 12.821vw;
    }
    #relation .subhead {
        margin-bottom: 0;
    }
    #relation .flex>div {
        width: 100%;
        margin-top: 12.821vw;
    }
    #relation .name {
        font-size: 4.872vw;
        margin-top: 4.487vw;
        margin-bottom: 2.564vw;
    }
    #relation .fadeup:nth-child(2) {
        animation-delay: 0s;
    }

    /* movie */
    #movie {
        padding: 12.821vw 0;
        margin-bottom: 12.821vw;
    }
    #movie h2 {
        margin-bottom: 12.821vw;
    }
    #movie .moviewrap,
    #movie .moviewrap iframe {
        width: 100%;
        height: 47.595vw;
    }
    #movie .moviewrap {
        margin-top: 12.821vw;
    }

    /* contact */
    #contact .flex {
        margin-top: 12.821vw;
    }
    #contact .flex>div {
        width: 100%;
    }
    #contact .flex>div:last-child {
        padding-top: 12.821vw;
        padding-left: 0;
    }
    #contact .link {
        padding-top: 0;
    }
    #contact .link li a {
        font-size: 3.846vw;
        height: 12.821vw;
        padding: 3.205vw 9.615vw;
    }
    #contact .link li a img {
        right: 9.615vw;
        width: 4.103vw;
    }
    #contact .link li {
        margin-bottom: 3.846vw;
    }

    footer {
        margin-top: 0;
        padding-bottom: 12.821vw;
    }
    footer .f_jbat_logo {
        width: 23.077vw;
    }
    footer .inner>.flex {
        margin-top: 5.385vw;
        align-items: flex-start;
    }
    footer .fnav {
        align-items: flex-start;
    }
    footer .fnav li::before {
        font-size: 3.846vw;
    }
    footer .fnav a {
        font-size: 3.59vw;
    }
    footer small {
        text-align: center;
        margin-top: 10.256vw;
    }

    #totop {
        width: 12.821vw;
        height: 12.821vw;
        right: 7.692vw;
    }

}