@charset "UTF-8";

@media(min-width: 1920px) {
    body {
        font-size: 1.3rem;
    }
}

@media(max-width: 1366px) {

    .subtxt span:nth-child(1):before,
    .subtxt span:nth-child(2):after {
        width: 60px;
    }

    .TxtBox {
        padding-right: 1.5rem;
        margin-bottom: 32px;
    }

    .TxtBox .text p span {
        display: inline;
    }

    .TxtBox.TxtBox02 .text {
        padding-left: 4rem;
    }

    .TxtBox.TxtBox02 .text:before {
        width: 3rem;
    }

    .subtxt b {
        margin-top: 30%;
        width: 60px;
        height: 60px;
    }

    .PAGE03 .ImgBox h3 {
        margin-bottom: 10px;
    }

    .PAGE05 .TxtBox.TxtBox02 .text {
        padding-left: 3rem;
    }


    .PAGE07 .TxtBox .text p span {
        display: block;
    }

    .FOOTER .leftBox,
    .FOOTER .rightBox {
        padding: 0px 5%;
    }

    .subtxt span:nth-child(1):before,
    .subtxt span:nth-child(2):after {
        padding-top: 7%;
    }
}

@media(min-width: 991px) {
    .PAGE07 {
        padding-right: 0;
    }
}

@media(max-width: 991px) {
    .TxtBox {
        padding-right: 0;
        margin-bottom: 2rem;
    }

    .bannerArea .TxtBox {
        margin-top: -80%;
    }

    .TxtBox.TxtBox01 {
        flex-wrap: wrap;
    }

    .TxtBox.TxtBox01 .titleBox {
        -webkit-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
        display: block;
        width: 100%;
        margin-bottom: 2rem;
        margin-right: 0;

    }

    .TxtBox.TxtBox02 .text {
        padding-left: 0;
    }

    .TxtBox.TxtBox02 .text:before {
        position: static;
        top: auto;
        display: block;
        margin-bottom: 1rem;
        width: 100px;
        height: 3px;

    }


    .bannerArea {
        text-align: center;
    }

    .bannerArea .logo {
        width: 60%;
    }

    .bannerArea .subtxt {
        margin-top: 35vh;
        width: 100%;
        font-size: 1rem;
    }

    .subtxt span:nth-child(1):before,
    .subtxt span:nth-child(2):after {
        padding-top: 5%;
    }

    .subtxt b {
        margin: 0 3px;
        display: inline-block;
        width: 20px;
        height: 20px;
    }

    .subtxt b:nth-child(4) {
        border-width: 2px;
    }

    .PAGE01 {
        padding: 0;
        background: -webkit-linear-gradient(bottom, #dbdcdc 0%, #dbdcdc 30%, #ffffff 30%, #ffffff 100%);
        background: -o-linear-gradient(bottom, #dbdcdc 0%, #dbdcdc 30%, #ffffff 30%, #ffffff 100%);
        background: linear-gradient(bottom, #dbdcdc 0%, #dbdcdc 30%, #ffffff 30%, #ffffff 100%);
        padding-right: 0;
    }

    .PAGE01 .TxtBox {
        padding: 0 7%;
    }

    .caseSlick {
        padding: 0 5px;

    }

    .caseSlick .item {
        padding: 0 5px;
    }

    .caseSlick .item .Img .innerImg {
        padding-top: 110%;
        height: 0;
    }

    .PAGE02 {
        background-image: url(../images/img/page02_bg_m.jpg);
    }

    .PAGE02:before {
        display: none;
    }

    .PAGE02 .leftBox {
        max-width: 80%;
    }


    .PAGE02 .caption_icon {
        width: 60px;
        height: 60px;
    }

    .PAGE03 .TxtBox {
        transform: none;
    }

    .PAGE03 .ImgBox h3 {
        font-size: 14px;
        margin-top: 0;
        display: none;
    }

    .PAGE03 .TxtBox .text .title:before {
        display: block;
    }

    .PAGE03 .ImgBox .item {
        padding: 0;
    }

    .PAGE03 .innerImg {
        padding-top: 65%;
        height: 0;
    }


    .PAGE04 {
        padding-right: 8%;

        background: -webkit-linear-gradient(top, #6dd0cd 0%, #6dd0cd 60%, #ebebeb 60%, #ebebeb 100%);
        background: -o-linear-gradient(top, #6dd0cd 0%, #6dd0cd 60%, #ebebeb 60%, #ebebeb 100%);
        background: linear-gradient(top, #6dd0cd 0%, #6dd0cd 60%, #ebebeb 60%, #ebebeb 100%);

    }

    .PAGE04 .innerImg {
        padding-top: 65%;
        height: 0;
    }

    .PAGE05 .contentBox {
        padding: 8%;
        left: 0;
        right: auto;
        height: auto;
        width: 90%;
        /*padding-bottom: 0;*/
    }

    .PAGE06 {
        background: #fff;
    }


    form {
        margin-top: 1rem;
    }


    .FOOTER .btn-group {
        margin-top: 10px;
        margin-bottom: 1rem;
    }

    .FOOTER .info {
        margin-bottom: 1rem;
    }

    .FOOTER .map {
        padding: 5% 20%;
    }
}


@media (max-width: 480px) {
    body {
        font-size: 0.8rem;
    }

    .slick-dots li,
    .slick-dots li button {
        width: 30px
    }

    .Imgiofo h5 {
        font-size: 12px;
    }

    .TxtBox .titleBox {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .TxtBox.TxtBox02 .titleBox {
        margin-bottom: 1rem;
    }

    .TxtBox .text .title {
        font-size: 1rem;
        padding-bottom: 10px;
    }

    .PAGE02 {
        background-size: auto 138%;
        background-image: url(../images/img/page02_bg_m.jpg);
        background-position: 50% 0%;
    }

    .PAGE02:after {
        content: '';
        width: 90vw;
        background: -webkit-linear-gradient(bottom, rgba(255, 102, 0, 0.86) 0%, rgba(255, 102, 0, 0.86) 60%, transparent 60%, transparent 100%);
        background: -o-linear-gradient(bottom, rgba(255, 102, 0, 0.86) 0%, rgba(255, 102, 0, 0.86) 60%, transparent 60%, transparent 100%);
        background: linear-gradient(to top, rgba(255, 102, 0, 0.86) 0%, rgba(255, 102, 0, 0.86) 60%, transparent 60%, transparent 100%);
    }

    .PAGE02 .contentBox {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 70vh;
    }


    .PAGE02 .leftBox {
        max-width: 90%;


    }

    .PAGE02 .leftBox a {
        /*padding-right: 1rem;*/
    }

    .PAGE05 .innerImg {
        height: 20vh;
    }

    .PAGE05 {
        background-image: url(../images/img/master_m.png);
        -webkit-background-size: 100%;
        background-size: 100%;
        background-position: top right;
        background-repeat: no-repeat;
        background-color: #332a28;
    }


    .PAGE05 .TxtBox.TxtBox02 .text {
        padding-left: 0;
    }

    .PAGE05-1 {
        background-position: 30%;
        -webkit-background-size: cover;
        background-size: cover;
        background-image: url(../images/img/page02_bg_m.jpg);
    }

    .PAGE06 .productImg .innerImg {
        height: 45vh;
    }

    .PAGE07 {
        background: none;
        padding: 0;
        /*height: 100vh;*/
        /*overflow: hidden;*/
    }

    .PAGE07:after {
        content: '';
        background-color: rgba(255, 255, 255, 0.9);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
        bottom: 0;
    }



    .PAGE07 .caption_icon {
        width: 60px;
        height: 60px;
    }

    .PAGE07 .leftBox {
        padding: 0 10% !important;
        /*background-color: rgba(255, 255, 255, 0.9);*/
        height: auto;


    }

    .PAGE07 .leftBox a {
        height: auto;
        /*display: block;*/
        /*padding-top: 30%;*/
        align-items: center;
        min-height: 100vh;
        /*background-color: transparent;*/
    }

    .PAGE07 .leftBox .TxtBox.TxtBox01 {}

    .PAGE07 .TxtBox.TxtBox01 .titleBox {
        -webkit-writing-mode: vertical-lr;
        writing-mode: vertical-lr;
    }



    .FOOTER .btn {
        font-size: 10px;
    }

    .FOOTER .rightBox h6 {
        font-size: 12px;
    }

    .FOOTER .leftBox {
        border: none;
    }

    .FOOTER .logoBox {
        margin-bottom: 10px;
    }

    .FOOTER .map {
        padding: 2% 15%;
    }
}

@media (max-width: 320px) {



    .TxtBox .titleBox {
        font-size: 1.4rem;
    }

    .TxtBox .text .title {
        font-size: 1rem;
    }

    .TxtBox .text p {
        font-size: 0.75rem;
    }

    .Imgiofo h6 {
        font-size: 0.75rem;
    }



    .PAGE05 .innerImg {
        height: 15vh;
    }
}