/*! tailwindcss v3.0.15 | MIT License | https://tailwindcss.com*/
*,
:after,
:before {
    border: 0 solid;
    box-sizing: border-box
}

:after,
:before {
    --tw-content: ""
}

html {
    -webkit-text-size-adjust: 100%;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4
}

body {
    line-height: inherit;
    margin: 0
}

h2,
h3 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

h2,
h3,
p {
    margin: 0
}

ul {
    list-style: none;
    margin: 0;
    padding: 0
}

img {
    display: block;
    vertical-align: middle
}

img {
    height: auto;
    max-width: 100%
}

*,
:after,
:before {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59, 130, 246, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia:
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.top-o-80 {
    top: .8rem
}

.right-0 {
    right: 0
}

.bottom-0 {
    bottom: 0
}

.left-0 {
    left: 0
}

.-z-10 {
    z-index: -10
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.mt-o-64 {
    margin-top: .64rem
}

.mt-o-60 {
    margin-top: .6rem
}

.mt-o-16 {
    margin-top: .16rem
}

.ml-auto {
    margin-left: auto
}

.mt-o-40 {
    margin-top: .4rem
}

.mt-o-100 {
    margin-top: 1rem
}

.mt-o-32 {
    margin-top: .32rem
}

.mt-o-68 {
    margin-top: .68rem
}

.mt-o-24 {
    margin-top: .24rem
}

.mt-o-28 {
    margin-top: .28rem
}

.mt-o-56 {
    margin-top: .56rem
}

.mt-o-8 {
    margin-top: .08rem
}

.ml-o-56 {
    margin-left: .56rem
}

.mt-o-80 {
    margin-top: .8rem
}

.mr-o-56 {
    margin-right: .56rem
}

.mt-o-20 {
    margin-top: .2rem
}

.-mt-o-4 {
    margin-top: -.04rem
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.flex {
    display: flex
}

.h-o-1 {
    height: .01rem
}

.w-o-689 {
    width: 6.89rem
}

.w-o-140 {
    width: 1.4rem
}

.w-o-614 {
    width: 6.14rem
}

.w-o-480 {
    width: 4.8rem
}

.w-full {
    width: 100%
}

.w-o-326 {
    width: 3.26rem
}

.w-o-312 {
    width: 3.12rem
}

.w-o-524 {
    width: 5.24rem
}

.w-o-492 {
    width: 4.92rem
}

.w-o-296 {
    width: 2.96rem
}

.w-o-510 {
    width: 5.1rem
}

.w-o-540 {
    width: 5.4rem
}

.w-o-640 {
    width: 6.4rem
}

.w-o-200 {
    width: 2rem
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.flex-wrap {
    flex-wrap: wrap
}

.items-start {
    align-items: flex-start
}

.items-end {
    align-items: flex-end
}

.items-center {
    align-items: center
}

.justify-between {
    justify-content: space-between
}

.gap-o-32 {
    gap: .32rem
}

.gap-o-16 {
    gap: .16rem
}

.gap-o-52 {
    gap: .52rem
}

.whitespace-nowrap {
    white-space: nowrap
}

.border-l-4 {
    border-left-width: 4px
}

.border-r-4 {
    border-right-width: 4px
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(33 33 33/var(--tw-bg-opacity))
}

.bg-red {
    --tw-bg-opacity: 1;
    background-color: rgb(224 0 0/var(--tw-bg-opacity))
}

.bg-gray {
    --tw-bg-opacity: 1;
    background-color: rgb(239 239 239/var(--tw-bg-opacity))
}

.bg-cover {
    background-size: cover
}

.p-o-8 {
    padding: .08rem
}

.py-o-56 {
    padding-bottom: .56rem;
    padding-top: .56rem
}

.py-o-28 {
    padding-bottom: .28rem;
    padding-top: .28rem
}

.py-o-88 {
    padding-bottom: .88rem;
    padding-top: .88rem
}

.py-o-68 {
    padding-bottom: .68rem;
    padding-top: .68rem
}

.py-o-8 {
    padding-bottom: .08rem;
    padding-top: .08rem
}

.py-o-32 {
    padding-bottom: .32rem;
    padding-top: .32rem
}

.px-o-64 {
    padding-left: .64rem;
    padding-right: .64rem
}

.px-o-80 {
    padding-left: .8rem;
    padding-right: .8rem
}

.pt-o-48 {
    padding-top: .48rem
}

.pb-o-456 {
    padding-bottom: 4.56rem
}

.pr-o-80 {
    padding-right: .8rem
}

.pb-o-120 {
    padding-bottom: 1.2rem
}

.pb-o-96 {
    padding-bottom: .96rem
}

.pt-o-88 {
    padding-top: .88rem
}

.pb-o-180 {
    padding-bottom: 1.8rem
}

.pt-o-64 {
    padding-top: .64rem
}

.pb-o-240 {
    padding-bottom: 2.4rem
}

.pt-o-68 {
    padding-top: .68rem
}

.pb-o-132 {
    padding-bottom: 1.32rem
}

.pl-o-24 {
    padding-left: .24rem
}

.pt-o-4 {
    padding-top: .04rem
}

.pb-o-20 {
    padding-bottom: .2rem
}

.pt-o-60 {
    padding-top: .6rem
}

.pb-o-28 {
    padding-bottom: .28rem
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.font-BarlowCondensed {
    font-family: Barlow Condensed, sans-serif;
}

.text-md {
    font-size: 13.02083vw
}

.text-16 {
    font-size: .16rem
}

.text-26 {
    font-size: .26rem
}

.text-71 {
    font-size: .71rem
}

.text-27 {
    font-size: .27rem
}

.text-25 {
    font-size: .25rem
}

.text-80 {
    font-size: .8rem
}

.text-32 {
    font-size: .32rem
}

.text-60 {
    font-size: .6rem
}

.text-36 {
    font-size: .36rem
}

.text-50 {
    font-size: .5rem
}

.text-37 {
    font-size: .37rem
}

.text-51 {
    font-size: .51rem
}

.text-24 {
    font-size: .24rem
}

.text-42 {
    font-size: .42rem
}

.text-28 {
    font-size: .28rem
}

.text-38 {
    font-size: .38rem
}

.text-47 {
    font-size: .47rem
}

.text-20 {
    font-size: .2rem
}

.text-15 {
    font-size: .15rem
}

.font-medium {
    font-weight: 500
}

.font-bold {
    font-weight: 700
}

.font-semibold {
    font-weight: 600
}

.italic {
    font-style: italic
}

.leading-o-20 {
    line-height: 2
}

.leading-none {
    line-height: 1
}

.leading-o-18 {
    line-height: 1.8
}

.tracking-o-75 {
    letter-spacing: .075em
}

.tracking-o-150 {
    letter-spacing: .15em
}

.tracking-o-100 {
    letter-spacing: .1em
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.text-red {
    --tw-text-opacity: 1;
    color: rgb(224 0 0/var(--tw-text-opacity))
}

.opacity-0 {
    opacity: 0
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(.2rem)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(.2rem)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

html {
    color: #212121;
    font-family: Noto Sans JP, sans-serif
}

.keyv {
    -webkit-animation: fadeIn 1.6s ease-in;
    animation: fadeIn 1.6s ease-in
}

.fadeIn {
    transform: translateY(.32rem)
}

.keyv_bg {
    background: url(../images/factory.png) no-repeat 0 100%/5.2rem auto, url(../images/keyv_bg.png) no-repeat bottom/cover
}

.factory {
    background: url(../images/factory.png) no-repeat 0 100%/5.2rem
}

.sample.factory {
    background: url(../images/factory.png) no-repeat bottom/5.2rem
}

.cta_line {
    position: relative
}

.cta_line:before {
    background-color: #fff;
    content: "";
    height: .02rem;
    left: -.8rem;
    position: absolute;
    top: 50%;
    width: 1.6rem
}

.bgleft:after {
    background: #fff;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: scaleX(0);
    transform-origin: right top;
    transition: transform .6s cubic-bezier(.8, 0, .2, 1) 0s;
    width: 100%;
    z-index: 2
}

.bgleft:hover:after {
    transform: scale(1);
    transform-origin: left top
}

.bgleft span {
    position: relative;
    z-index: 3
}

.bgleft {
    transition: color .6s cubic-bezier(.8, 0, .2, 1) 0s
}

.bgleft:hover {
    color: #212121
}

.content_bg {
    background: url(../images/content_bg.png) no-repeat right top 2rem/3.2rem, url(../images/factory.png) no-repeat 0 100%/5.2rem
}

@media screen and (min-width:768px) {
    .keyv_bg {
        background: url(../images/factory.png) no-repeat bottom left 1.8rem/5.2rem auto, url(../images/keyv_bg_pc.png) no-repeat bottom/cover
    }

    .content_bg {
        background: url(../images/content_bg_pc.png) no-repeat right 1rem center/3.5rem, url(../images/factory.png) no-repeat bottom left 1.8rem/5.2rem
    }

    .factory {
        background: url(../images/factory.png) no-repeat bottom left 1.8rem/5.2rem
    }
}

@media (min-width:768px) {
    .md\:-left-o-20 {
        left: -.2rem
    }

    .md\:bottom-o-72 {
        bottom: .72rem
    }

    .md\:order-2 {
        order: 2
    }

    .md\:order-1 {
        order: 1
    }

    .md\:mx-auto {
        margin-left: auto;
        margin-right: auto
    }

    .md\:mt-0 {
        margin-top: 0
    }

    .md\:mt-o-60 {
        margin-top: .6rem
    }

    .md\:block {
        display: block
    }

    .md\:inline {
        display: inline
    }

    .md\:flex {
        display: flex
    }

    .md\:hidden {
        display: none
    }

    .md\:w-o-1334 {
        width: 13.34rem
    }

    .md\:w-o-1133 {
        width: 11.33rem
    }

    .md\:w-1\/2 {
        width: 50%
    }

    .md\:w-o-680 {
        width: 6.8rem
    }

    .md\:w-o-520 {
        width: 5.2rem
    }

    .md\:w-o-786 {
        width: 7.86rem
    }

    .md\:w-o-538 {
        width: 5.38rem
    }

    .md\:w-o-796 {
        width: 7.96rem
    }

    .md\:w-o-932 {
        width: 9.32rem
    }

    .md\:w-o-764 {
        width: 7.64rem
    }

    .md\:flex-wrap {
        flex-wrap: wrap
    }

    .md\:items-start {
        align-items: flex-start
    }

    .md\:items-center {
        align-items: center
    }

    .md\:justify-center {
        justify-content: center
    }

    .md\:justify-between {
        justify-content: space-between
    }

    .md\:gap-o-24 {
        gap: .24rem
    }

    .md\:px-o-80 {
        padding-left: .8rem;
        padding-right: .8rem
    }

    .md\:px-o-108 {
        padding-left: 1.08rem;
        padding-right: 1.08rem
    }

    .md\:pb-o-200 {
        padding-bottom: 2rem
    }

    .md\:pb-0 {
        padding-bottom: 0
    }

    .md\:text-pc {
        /*font-size: 6.51042vw*/
        font-size: min(6.51042vw, 75px);
    }

    .md\:text-31 {
        font-size: .31rem
    }

    .md\:text-43 {
        font-size: .43rem
    }

    .md\:text-32 {
        font-size: .32rem
    }

    .md\:text-41 {
        font-size: .41rem
    }
}