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

@media screen and (max-width:767px) {
    /* メディアクエリー */

    html {
        -webkit-text-size-adjust: 100%;
    }

    * {
        margin: 0;
        padding: 0;

        box-sizing: border-box;
    }

    body {
        font: 15px/2.4 'Montserrat', 'Noto Sans JP', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", "meiryo", "ＭＳ Ｐゴシック", sans-serif;
        background: #000;
        color: #fff;
    }

    header,
    article,
    footer,
    aside,
    time,
    nav,
    small,
    section {
        display: block;
    }

    p,
    ul,
    table,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-bottom: 1.2em;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 1.3;
    }

    ul li,
    ol li {
        list-style-type: none;
    }

    a img {
        border-style: none;
    }

    a {
        color: #4d4d4d;
        text-decoration: none;
    }

    img,
    iframe {
        vertical-align: bottom;
        max-width: 100%;
        height: auto;
    }

    table {
        border-collapse: collapse;
    }

    table th,
    table td {
        vertical-align: top;
    }



    /* iOSでのデフォルトスタイルをリセット */
    input[type="submit"],
    input[type="button"] {
        border-radius: 0;
        -webkit-box-sizing: content-box;
        -webkit-appearance: button;
        appearance: button;
        border: none;
        box-sizing: border-box;
        cursor: pointer;
    }

    input[type="submit"]::-webkit-search-decoration,
    input[type="button"]::-webkit-search-decoration {
        display: none;
    }

    input[type="submit"]::focus,
    input[type="button"]::focus {
        outline-offset: -2px;
    }



    /*----------------------------------------------------------------


	clearfix


----------------------------------------------------------------*/

    .CF:before,
    .CF:after,
    .inner:before,
    .inner:after,
    ul:before,
    ul:after,
    section:before,
    section:after,
    .secondBLK:before,
    .secondBLK:after,
    #contents:before,
    #contents:after {
        content: " ";
        display: table;
    }

    .CF:after,
    .inner:after,
    ul:after,
    section:after,
    .secondBLK:after,
    #contents:after {
        clear: both;
    }

    .CF,
    .inner,
    ul,
    section,
    .secondBLK,
    #contents {
        *zoom: 1;
    }






    /*----------------------------------------------------------------


	スマホ非表示


----------------------------------------------------------------*/

    .SPDN {
        display: none;
    }




    /*----------------------------------------------------------------


	ローディング


----------------------------------------------------------------*/

    .start {
        background: #000;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 9000;
    }

    .start svg {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: none;
        z-index: 9999;
        width: 70vw;
    }


    /*----------------------------------------------------------------


	レイアウト


----------------------------------------------------------------*/

    #contents {}



    /*----------------------------------------------------------------


	ヘッダー


----------------------------------------------------------------*/

    #globalHeader {
        position: absolute;
        width: 100%;
        z-index: 3;
    }

    #globalHeader > .inner {
        padding: 10px 5% 0;
    }

    #globalHeader .logo {
        width: 150px;
    }

    #globalHeader .logo a img:hover {}



    /*----------------------------------------------------------------


	キービジュアル


----------------------------------------------------------------*/

    #kv {
        background-image: url(../images/kv/bg-kv.png);
        background-size: 1900px auto;
        background-repeat: repeat-x;
        animation-name: scroll-header-bg;
        animation-duration: 40s;
        /*3秒で画像1枚分スクロールする*/
        animation-timing-function: linear;
        /*再生速度を一定にする*/
        animation-iteration-count: infinite;
        position: relative;
        height: 100vh;
        width: 100%;
        display: none;
    }

    @keyframes scroll-header-bg {
        0% {
            background-position: 0 center;
            /*初期値を設定する*/
        }

        100% {
            background-position: -1900px center;
            /*画像サイズに合わせて変更する（負号で左スクロール）*/
        }
    }

    #kv ul {
        padding-top: 30vh;
    }

    #kv ul li {
        font-size: 13vw;
        font-weight: 800;
        text-align: center;
        line-height: 1.2;
        font-feature-settings: "palt";
        margin-bottom: 3vw;
    }

    #kv ul li.catch1 {
        letter-spacing: 0.08em
    }

    #kv ul li.catch3 {
        letter-spacing: 0.14em
    }

    .letterDrop {
        position: relative;
        top: -4.5em;
        display: inline-block;
        opacity: 0.8;
        transform: rotateX(-90deg);
        animation: letterDrop 2.0s ease 1 normal forwards;
    }

    @keyframes letterDrop {
        10% {
            opacity: 0.5;
        }

        20% {
            opacity: 0.8;
            top: -0.75em;
            transform: rotateX(-360deg);
        }

        100% {
            opacity: 1;
            top: 0em;
            transform: rotateX(360deg);
        }
    }

    .letterDrop2 {
        position: relative;
        left: -4.5em;
        display: inline-block;
        opacity: 0.8;
        transform: rotateY(-90deg);
        animation: letterDrop2 2.0s ease 1 normal forwards;
    }

    @keyframes letterDrop2 {
        10% {
            opacity: 0.5;
        }

        20% {
            opacity: 0.8;
            left: -0.75em;
            transform: rotateY(-360deg);
        }

        100% {
            opacity: 1;
            left: 0em;
            transform: rotateY(360deg);
        }
    }

    .letterDrop3 {
        position: relative;
        right: -4.5em;
        display: inline-block;
        opacity: 0.8;
        transform: rotateY(90deg);
        animation: letterDrop3 2.0s ease 4s 1 normal forwards;
    }

    @keyframes letterDrop3 {
        10% {
            opacity: 0.5;
        }

        20% {
            opacity: 0.8;
            right: -0.75em;
            transform: rotateY(360deg);
        }

        100% {
            opacity: 1;
            right: 0em;
            transform: rotateY(-360deg);
        }
    }



    .p-index-kv__scroll {
        width: 1px;
        height: 54px;
        position: absolute;
        bottom: 25px;
        left: 50%;
        z-index: 1;
        background-color: #ababab;
        display: none;
    }

    .p-index-kv__scroll-pointer {
        width: 9px;
        height: 9px;
        position: absolute;
        top: -4px;
        left: -4px;
        border-radius: 50%;
        background-color: #ababab;
    }

    .p-index-kv__scroll .scroll {
        position: absolute;
        top: -37px;
        left: -25px;
        font-size: 13px;
        font-weight: 800;
    }

    .p-index-kv__scroll-pointer:before {
        content: '';
        display: block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: #ababab;
    }

    .p-index-kv__scroll-pointer {
        -webkit-animation-name: moveScrollPointer;
        animation-name: moveScrollPointer;
        -webkit-animation-duration: 1.2s;
        animation-duration: 1.2s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    .p-index-kv__scroll-pointer:before {
        -webkit-animation-name: moveScrollPointerIn;
        animation-name: moveScrollPointerIn;
        -webkit-animation-duration: 1.2s;
        animation-duration: 1.2s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    @-webkit-keyframes moveScrollPointer {
        0% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }

        100% {
            -webkit-transform: translate3d(0, 54px, 0);
            transform: translate3d(0, 54px, 0)
        }
    }

    @keyframes moveScrollPointer {
        0% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }

        100% {
            -webkit-transform: translate3d(0, 54px, 0);
            transform: translate3d(0, 54px, 0)
        }
    }

    @-webkit-keyframes moveScrollPointerIn {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0)
        }

        10% {
            -webkit-transform: scale(1);
            transform: scale(1)
        }

        65% {
            -webkit-transform: scale(1);
            transform: scale(1)
        }

        100% {
            -webkit-transform: scale(0);
            transform: scale(0)
        }
    }

    @keyframes moveScrollPointerIn {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0)
        }

        10% {
            -webkit-transform: scale(1);
            transform: scale(1)
        }

        65% {
            -webkit-transform: scale(1);
            transform: scale(1)
        }

        100% {
            -webkit-transform: scale(0);
            transform: scale(0)
        }
    }



    /*----------------------------------------------------------------


	グローバルナビ


----------------------------------------------------------------*/

    #globalNav {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0px;
        right: 0;
        z-index: 21;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        background: rgba(0, 0, 0, 0.9);
        line-height: 1.3;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        -webkit-transition: -webkit-transform cubic-bezier(0.8, 0, 0.1, 1) 0.9s 0.2s;
        transition: transform cubic-bezier(0.8, 0, 0.1, 1) 0.9s 0.2s;
    }

    .menu-open #globalNav {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    #globalNav .inner {
        padding: 30px 5%;
        opacity: 0;
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
        -webkit-transition: opacity ease 0.6s 0s, -webkit-transform ease 0.6s 0s;
        transition: opacity ease 0.6s 0s, transform ease 0.6s 0s;
        text-align: center;
    }

    .menu-open #globalNav .inner {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition-delay: 0.7s;
        transition-delay: 0.7s;
    }

    #globalNav .inner ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #globalNav .inner ul li {
        width: 50%;
        margin: 0 0 10px 0;
    }

    #globalNav .inner ul li figure {
        position: relative;
    }

    #globalNav .inner figure:after {
        position: absolute;
        width: 100%;
        height: 100%;
        display: inline-block;
        content: '';
        background-color: rgba(0, 0, 0, .4);
        top: 0;
        left: 0;
    }

    #globalNav .inner .title-en {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        z-index: 5;
        font-size: 6vw;
        font-weight: bold;
        margin: 0;
    }



    #globalNav .inner .title-jp {
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        z-index: 5;
        font-size: 12px;
        margin: 0;
        width: 100%;
    }


    #globalNav .inner .ham-center {
        display: block;
        margin: 0 auto 10px;
        width: 50%;
    }


    #globalNav .ham-tel {
        font-size: 6vw;
        margin: 0 0 0.8em 0;
    }


    #globalNav .inner:after {
        content: "";
        display: block;
        clear: both;
    }

    #globalNav a {
        color: #fff;
        display: block;
        padding: 5px;
    }

    #globalNav a:hover {
        color: #9a9a9a;
    }




    /**
 * Burger
 */

    #burger {
        width: 80px;
        height: 80px;
        margin: 0 auto;
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 23;
        background: #000;
        border: none;
        outline: none;
    }


    #burger p {
        max-width: 50px;
        height: 50px;
        margin: auto;
        position: relative;
                cursor: pointer;
    }

    #burger span {
        height: 1px;
        display: block;
        position: absolute;
        left: 10px;
        right: 10px;
        background: #a9a9a9;
        -webkit-transition: -webkit-transform ease 0.2s;
        transition: transform ease 0.2s;
    }

    #burger span:nth-child(1) {
        top: 30%;
    }

    #burger span:nth-child(2) {
        top: 50%;
    }

    #burger span:nth-child(3) {
        top: 70%;
    }

    .menu-open #burger span:nth-child(1),
    #burger:hover span:nth-child(1) {
        -webkit-transform: translate3d(3px, 0, 0);
        transform: translate3d(3px, 0, 0);
    }

    .menu-open #burger span:nth-child(2),
    #burger:hover span:nth-child(2) {
        -webkit-transform: translate3d(-3px, 0, 0);
        transform: translate3d(-3px, 0, 0);
    }

    .menu-open #burger span:nth-child(3),
    #burger:hover span:nth-child(3) {
        -webkit-transform: translate3d(3px, 0, 0);
        transform: translate3d(3px, 0, 0);
    }



    /*----------------------------------------------------------------


	ぱんくず


----------------------------------------------------------------*/

    .breadcrumbs {
        padding: 10px 20px;
        background: #f5f5f5;
        margin-bottom: 40px;
        font-size: 14px;
    }



    /*----------------------------------------------------------------


	ページタイトル


----------------------------------------------------------------*/

    #pageTitle {
        background: url(https://usudaseiko.com/wp/wp-content/themes/usuda/images/title/bg-title.jpg) no-repeat center center;
        text-align: center;
        margin-bottom: 20px;
        margin-bottom: 100px;
    }

    #pageTitle h2 {
        padding: 180px 0 120px;
    }

    #pageTitle h2 span {}

    #pageTitle h2 span.EN {
        display: block;
        font-size: 70px;
        font-family: "Akrobat-Bold";
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    #pageTitle h2 span.JP {
        display: block;
        font-size: 20px;
    }



    /*----------------------------------------------------------------


	フッター


----------------------------------------------------------------*/






    #globalFooter {
        padding: 60px 0 40px;
        font-size: 14px;
        position: relative;
        line-height: 1.5;
        text-align: center;
    }

    #globalFooter > .inner {
        padding: 40px 5% 0;
        justify-content: space-between;
        border-top: 1px solid #2c2e2f;
    }

    #globalFooter .info {}

    #globalFooter .logo {
        width: 200px;
        margin: 0 auto 25px;
    }

    #globalFooter .info p {}

    #globalFooter a {}

    #globalFooter .privacy {
        font-weight: bold;
        margin: 0 0 30px;
    }

    #pagetop {
        font-size: 40px;
        line-height: 0;
        position: absolute;
        left: 50%;
        top: -0px;
        margin-left: -13px;
    }

    #globalFooter .fanuc-badge{
        margin-bottom:15px;
    }

    #COPYRIGHT {
        margin: 0;
        padding: 0;
        letter-spacing: 0.1em;
        flex-grow: 10;
    }

    #COPYRIGHT small {
        font-size: 12px;
    }



}

/* メディアクエリー閉じタグ */