@charset "UTF-8";

/* 共通 */
html {
    height: 100%;
}
body {
    background-color: #E5E5E5;
    color: #3E3A39;
}
h1 , h2 , h3 , h4 , h5 {
    font-weight: normal;
}
.showBox {
    position: relative;
    max-width: 1272px;
    margin: 0 auto;
    padding: 0 107px;
}
.red {
    color: #D51518;
}
.caption01 {
    text-align: center;
}
.caption01 > span {
    position: relative;
    padding-bottom: 2.6%;
    display: block !important;
}
.caption01 > span:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 67px;
    height: 1px;
    background-color: #D51518;
    -webkit-transform: translate(-50%);
       -moz-transform: translate(-50%); 
        -ms-transform: translate(-50%); 
         -o-transform: translate(-50%); 
            transform: translate(-50%);
}
.linkbutton01 span {
    position: relative;
    font-size: 1.7rem;
    padding: 0 0.2em 0.4em;
}
.linkbutton01 span:before {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
}
.linkbutton01 span:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1.2rem;
    height: 1.7rem;
    background-image: url(../images/common/arrow-right.png);
    background-size: cover;
    margin-left: 1em;
}

/* ヘッダー */
#main {
    padding-top: 63px;
}
#mainHeader {
    position: fixed;
    z-index: 9999;
    width: 100%;
    background-color: rgba(255,255,255,0.6);
}
#mainHeader a {
    display: block;
    line-height: 1;
}
#mainHeader > .inner {
    max-width: 1078px;
    margin: 0 auto;
    padding: 0 10px;
}
#mainHeader .table {
    padding: 1.51228% 0;
}
#mainHeader .table-cell {
    vertical-align: middle;
}
#mainHeader .table-cell.col01 {
    width: 24%;
    padding-right: 5.7%;
}
@media only screen and (min-width: 769px){
    .drawer--top .drawer-nav {
        position: static !important;
        background-color: transparent;
    }
    #mainHeader .table-cell.col02 li {
        position: relative;
        vertical-align: middle;
        line-height: 1;
    }
    #mainHeader .table-cell.col02 li + li {
        margin-left: 5.9789%;
    }
    #mainHeader .table-cell.col02 li a img {
        display: block;
    }
    #mainHeader .table-cell.col02 li a {
        padding: 5px 0;
    }
    #mainHeader .table-cell.col02 li a:before {
        content: '';
        position: absolute;
        bottom: -5px;
        width: 100%;
        height: 1px;
        background-color: #808080;
    }
    #mainHeader .table-cell.col02 li a:before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 0;
        height: 1px;
        background-color: #808080;
        -webkit-transition:all 100ms linear;
        transition:all 100ms linear;
        box-shadow: #fff 0 0 0;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translate(-50%);
        transform: translate(-50%);
    }
    #mainHeader .table-cell.col02 li a:hover > * {
        opacity: 1;
    }
    #mainHeader .table-cell.col02 li a:hover:before {
        width: 100%;
    }
    #mainHeader .table-cell.col02 li.col01 {
        width: 6.20609%;
    }
    #mainHeader .table-cell.col02 li.col02 {
        width: 8.47913%;
    }
    #mainHeader .table-cell.col02 li.col03 {
        width: 9.03388%;
    }
    #mainHeader .table-cell.col02 li.col04 {
        width: 7.58475%;
    }
    #mainHeader .table-cell.col02 li.col05 {
        width: 8.98651%;
    }
    #mainHeader .table-cell.col02 li.col06 {
        width: 8.59249%;
    }
    #mainHeader .table-cell.col02 li.col07 {
        width: 14.41969%;
    }
    #mainHeader .table-cell.col02 li.col07 a {
        background-color: #D51518;
        padding: 7.66585% 24.0813%;
        -webkit-transition:all 200ms linear;
        transition:all 200ms linear;
        box-shadow: #fff 0 0 0;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    #mainHeader .table-cell.col02 li.col07 a:before {
        display: none;
    }
}
@media only screen and (min-width: 769px){
    #mainHeader .table-cell.col02 li.col07 a:hover {
        opacity: 0.6;
    }
}

/* トップページイントロ */
body.index #introAnime {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #D51518;
    z-index: 99998;
    -webkit-transition:all 500ms linear;
            transition:all 500ms linear;
}
body.index #introAnime img {
    left: 40px;
    top: 30px;
    display: block;
    height: 42px;
    position: absolute;
    /*-webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);*/
}
body.index.introOff #introAnime {
    -webkit-transform: translate(250%,0);
            transform: translate(250%,0);
}
body.index .PageHeader-Menu {
    left: 40px;
    top: 30px;
    display: block;
    position: fixed;
    z-index: 99999;
    padding: 10px;
    -webkit-transition:all 300ms linear;
       -moz-transition:all 300ms linear;
        -ms-transition:all 300ms linear;
         -o-transition:all 300ms linear;
            transition:all 300ms linear;
    box-shadow: #fff 0 0 0;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
body.index .PageHeader-Menu-load {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -21px 0 0 -21px;
    z-index: 2;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-name: lightbox-load-circle-03;
    animation-name: lightbox-load-circle-03;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
    -webkit-animation-timing-function: cubic-bezier(.645,.045,.355,1);
    animation-timing-function: cubic-bezier(.645,.045,.355,1);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    overflow: hidden;
}
body.index .PageHeader-Menu-load .parts-left {
    left: 0;
}
body.index .PageHeader-Menu-load .parts-left ,
body.index .PageHeader-Menu-load .parts-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
body.index .PageHeader-Menu-load .parts-left .parts-circle ,
body.index .PageHeader-Menu-load .parts-right {
    right: 0;
}
body.index .PageHeader-Menu-load .parts-left ,
body.index .PageHeader-Menu-load .parts-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
body.index .PageHeader-Menu-load .parts-right .parts-mask-inner {
    right: 100%;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    transition-delay: .25s;
}
body.index .PageHeader-Menu-load .parts-mask-inner {
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    overflow: hidden;
    position: absolute;
    top: 0;
    -webkit-animation-name: lightbox-load-circle-03;
    animation-name: lightbox-load-circle-03;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-timing-function: cubic-bezier(.645,.045,.355,1);
    animation-timing-function: cubic-bezier(.645,.045,.355,1);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
body.index .PageHeader-Menu-load .parts-right .parts-circle {
    left: 0;
}
body.index .PageHeader-Menu-load .parts-circle {
    position: absolute;
    top: 0;
    width: 200%;
    height: 100%;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #fff;
    box-sizing: border-box;
}
body.index .PageHeader-Menu-load .parts-left .parts-mask-inner {
    left: 100%;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
}
body.index .PageHeader-Menu-load .parts-mask-inner {
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    overflow: hidden;
    position: absolute;
    top: 0;
    -webkit-animation-name: lightbox-load-circle-03;
    animation-name: lightbox-load-circle-03;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-timing-function: cubic-bezier(.645,.045,.355,1);
    animation-timing-function: cubic-bezier(.645,.045,.355,1);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
body.index .PageHeader-Menu-load .parts-left .parts-circle ,
body.index .PageHeader-Menu-load .parts-right {
    right: 0;
}
body.index .PageHeader-Menu-load .parts-circle {
    position: absolute;
    top: 0;
    width: 200%;
    height: 100%;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #fff;
    box-sizing: border-box;
}
body.index .PageHeader-Menu-circle {
    position: relative;
    width: 44px;
    height: 44px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.3);
    transition: -webkit-transform .6s cubic-bezier(.215,.61,.355,1);
    transition: transform .6s cubic-bezier(.215,.61,.355,1);
    transition: transform .6s cubic-bezier(.215,.61,.355,1),-webkit-transform .6s cubic-bezier(.215,.61,.355,1);
}
body.index .PageHeader-Menu-circle::after {
    content: "";
    width: 48px;
    height: 48px;
    background-color: #D51518;
    border-radius: 50%;
    position: absolute;
    left: -2px;
    top: -2px;
    -webkit-transform: scale(1);
    transform: scale(1);
}
body.index .PageHeader-Menu-circle::before {
    content: "";
    display: block;
    position: absolute;
    left: -1px;
    top: -1px;
    width: 46px;
    height: 46px;
    border: 4px solid #b4b4b4;
    box-sizing: border-box;
    border-radius: 50%;
    opacity: 0;
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    transition: opacity .6s cubic-bezier(.645,.045,.355,1),-webkit-transform .6s cubic-bezier(.645,.045,.355,1);
    transition: transform .6s cubic-bezier(.645,.045,.355,1),opacity .6s cubic-bezier(.645,.045,.355,1);
    transition: transform .6s cubic-bezier(.645,.045,.355,1),opacity .6s cubic-bezier(.645,.045,.355,1),-webkit-transform .6s cubic-bezier(.645,.045,.355,1);
}
body.index .PageHeader-Menu-text {
    position: absolute;
    left: 69px;
    top: 50%;
    margin-top: -6px;
    overflow: hidden;
    font-size: .6rem;
}
body.index #overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 99998;
    margin-left: -110%;
    -webkit-transform: skewX(-17deg);
            transform: skewX(-17deg);
    -webkit-transition:all 500ms linear;
       -moz-transition:all 500ms linear;
        -ms-transition:all 500ms linear;
         -o-transition:all 500ms linear;
            transition:all 500ms linear;
    box-shadow: #fff 0 0 0;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
body.index #overlay:before {
    content: '';
    display: block;
    position: fixed;
    width: 200%;
    height: 100%;
    background-color: #ebebeb;
    margin-left: 30%;
    z-index: 99997;
}
body.index #overlay:after {
    content: '';
    display: block;
    position: fixed;
    width: 200%;
    height: 100%;
    background-color: #D51518;
    margin-left: 80%;
    z-index: 99997;
}
body.index.introOff #overlay {
    -webkit-transform: skewX(-17deg) translate(250%,0);
            transform: skewX(-17deg) translate(250%,0);
}
body.index.introOff .PageHeader-Menu {
    display: none;
}

/* トップページナビ */
#indexPageNav {
    position: absolute;
    z-index: 99;
    right: 48px;
    top: 50%;
    margin-top: 42px;
    -webkit-transform: translate(0,-50%);
            transform: translate(0,-50%);
}
#indexPageNav li a {
    position: relative;
    width: 26px;
    height: 35.1px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    display: block;
}
#indexPageNav li a span {
    display: block;
    position: absolute;
    width: 10px;
    height: 0;
    left: 10px;
    top: 10px;
    padding-top: 10px;
    overflow: hidden;
    border-radius: 50%;
    background-color: #CCCCCC;
    transition: background .5s cubic-bezier(.42,.08,.2,1),-webkit-transform .4s cubic-bezier(.215,.61,.355,1);
    transition: background .5s cubic-bezier(.42,.08,.2,1),transform .4s cubic-bezier(.215,.61,.355,1);
    transition: background .5s cubic-bezier(.42,.08,.2,1),transform .4s cubic-bezier(.215,.61,.355,1),-webkit-transform .4s cubic-bezier(.215,.61,.355,1);
}
#indexPageNav li a:after {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 10px;
    height: 10px;
    border: 2px solid #CCCCCC;
    box-sizing: border-box;
    border-radius: 50%;
    -webkit-transform: scale(2.5);
    transform: scale(2.5);
    transition: opacity .6s cubic-bezier(.645,.045,.355,1),border .6s cubic-bezier(.645,.045,.355,1),-webkit-transform .6s cubic-bezier(.645,.045,.355,1);
    transition: transform .6s cubic-bezier(.645,.045,.355,1),opacity .6s cubic-bezier(.645,.045,.355,1),border .6s cubic-bezier(.645,.045,.355,1);
    transition: transform .6s cubic-bezier(.645,.045,.355,1),opacity .6s cubic-bezier(.645,.045,.355,1),border .6s cubic-bezier(.645,.045,.355,1),-webkit-transform .6s cubic-bezier(.645,.045,.355,1);
}
#indexPageNav li.active a span {
    background-color: #D51518;
}
#indexPageNav li.active a:after {
    border: 2px solid #D51518;
}

/* トップページ */
body.index {
    height: 100%;
    position: relative;
    overflow: hidden;
}
body.index #main {
    padding-top: 0;
    overflow: hidden;
}
body.index #mainHeader ,
body.index #main ,
body.index #mainFooter {
    opacity: 0;
}
body.index.introOff #mainHeader ,
body.index.introOff #main ,
body.index.introOff #mainFooter {
    opacity: 1;
}
body.index .HomeScene7-dline {
    position: absolute;
    width: 100%;
    top: 0;
    margin-left: 7.14286%;
}
body.index .HomeScene7-dline-inner {
    position: absolute;
    width: 1px;
    height: 50vh;
    left: 48%;
    top: 0;
    -webkit-transform: translate(0,-100%) rotate(17.62deg);
            transform: translate(0,-100%) rotate(17.62deg);
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
}
body.index .HomeScene7-dline-inner-line {
    position: absolute;
    width: 100%;
    height: 400%;
    left: 0;
    top: 0;
    background-color: #dc0032;
    transition: height 1.2s cubic-bezier(.645,.045,.355,1) .35s;
}
body.index #mainContent > section {
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-perspective: 1000px;
            perspective: 1000px;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;
}
body.index #mainContent > section.active {
    z-index: 1;
}
body.index #mainContent > section > .body {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 68px;
    width: 100%;
    height: 100%;
}
body.index #mainContent > section > .body > .showBox ,
body.index #mainContent > section > .body > .showBox > .inner ,
body.index #mainContent > section > .body > .showBox > .inner > .table ,
body.index #mainContent > section > .body > .showBox > .inner > .table > .table-cell {
    height: 100%;
}
body.index #mainContent > section > .body > .showBox > .inner > .table > .table-cell {
    vertical-align: middle;
}
body.index #mainContent > section > .body .slide-content {
    overflow: hidden;
}
body.index #mainContent > section > .body .slide-content > * {
    display: inline-block;
    opacity: 0;
    box-shadow: #fff 0 0 0;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    -webkit-animation: slideContentMiyamariken 500ms ease forwards;
            animation: slideContentMiyamariken 500ms ease forwards;
}
body.index #mainContent > section.active > .body .slide-content > * {
    -webkit-animation: activeSlideContentMiyamariken 450ms ease 1050ms forwards;
            animation: activeSlideContentMiyamariken 450ms ease 1050ms forwards;
}
body.index #mainContent > section.active.upper > .body .slide-content > * {
    -webkit-animation: upperActiveSlideContentMiyamariken 450ms ease 1050ms forwards;
            animation: upperActiveSlideContentMiyamariken 450ms ease 1050ms forwards;
}
body.index #mainContent > section.active > .body .slide-content.tien + .tien > * {
    -webkit-animation: activeSlideContentMiyamariken 450ms ease 1250ms forwards;
            animation: activeSlideContentMiyamariken 450ms ease 1250ms forwards;
}
body.index #mainContent > section.active > .body .slide-content.tien + .tien + .tien > * {
    -webkit-animation: activeSlideContentMiyamariken 450ms ease 1450ms forwards;
            animation: activeSlideContentMiyamariken 450ms ease 1450ms forwards;
}
body.index #mainContent > section.active > .body .slide-content.tien + .tien + .tien + .tien > * {
    -webkit-animation: activeSlideContentMiyamariken 450ms ease 1650ms forwards;
            animation: activeSlideContentMiyamariken 450ms ease 1650ms forwards;
}
body.index #mainContent > section.active > .body .slide-content.tien + .tien + .tien + .tien + .tien > * {
    -webkit-animation: activeSlideContentMiyamariken 450ms ease 1850ms forwards;
            animation: activeSlideContentMiyamariken 450ms ease 1850ms forwards;
}
body.index #mainContent > section.active.upper > .body .slide-content.tien + .tien > * {
    -webkit-animation: upperActiveSlideContentMiyamariken 450ms ease 1250ms forwards;
            animation: upperActiveSlideContentMiyamariken 450ms ease 1250ms forwards;
}
body.index #mainContent > section.active.upper > .body .slide-content.tien + .tien + .tien > * {
    -webkit-animation: upperActiveSlideContentMiyamariken 450ms ease 1450ms forwards;
            animation: upperActiveSlideContentMiyamariken 450ms ease 1450ms forwards;
}
body.index #mainContent > section.active.upper > .body .slide-content.tien + .tien + .tien + .tien > * {
    -webkit-animation: upperActiveSlideContentMiyamariken 450ms ease 1650ms forwards;
            animation: upperActiveSlideContentMiyamariken 450ms ease 1650ms forwards;
}
body.index #mainContent > section.active.upper > .body .slide-content.tien + .tien + .tien + .tien + .tien > * {
    -webkit-animation: upperActiveSlideContentMiyamariken 450ms ease 1850ms forwards;
            animation: upperActiveSlideContentMiyamariken 450ms ease 1850ms forwards;
}
body.index #mainContent > section.upperpart > .body .slide-content > * {
    -webkit-animation: upperpartSlideContentMiyamariken 500ms ease forwards;
            animation: upperpartSlideContentMiyamariken 500ms ease forwards;
}
body.index #mainContent > section > .inner {
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-transform: translate(-47.7%, 200%) matrix3d(0.999848, 0.0174524, 0, 0, -0.0174524, 0.999848, 0, 0, 0, 0, 1, 0, 0, 0, -200, 1);
            transform: translate(-47.7%, 200%) matrix3d(0.999848, 0.0174524, 0, 0, -0.0174524, 0.999848, 0, 0, 0, 0, 1, 0, 0, 0, -200, 1);
    box-shadow: #000 0 0 0;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            animation: scroll 0.9s cubic-bezier(0.42, 0, 1.0, 1.0) forwards;
    -webkit-animation: scroll 0.9s cubic-bezier(0.42, 0, 1.0, 1.0) forwards;
    background-color: #fff;
}
body.index #mainContent > section.active > .inner {
            animation: activeScroll 0.9s cubic-bezier(0, 0, 0.58, 1.0) 0.6s forwards;
    -webkit-animation: activeScroll 0.9s cubic-bezier(0, 0, 0.58, 1.0) 0.6s forwards;
}
body.index #mainContent > section.active.upper > .inner {
            animation: upperActiveScroll 0.9s cubic-bezier(0, 0, 0.58, 1.0) 0.6s forwards;
    -webkit-animation: upperActiveScroll 0.9s cubic-bezier(0, 0, 0.58, 1.0) 0.6s forwards;
}
body.index #mainContent > section.upperpart > .inner {
            animation: upperpartScroll 0.9s cubic-bezier(0.42, 0, 1.0, 1.0) forwards;
    -webkit-animation: upperpartScroll 0.9s cubic-bezier(0.42, 0, 1.0, 1.0) forwards;
}
body.index #section01 .backimage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body.index #section01 .backimage span {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity:0;
    background-size: cover;
    -webkit-transition:all 600ms linear;
            transition:all 600ms linear;
    box-shadow: #fff 0 0 0;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
body.index #section01 .backimage span.active {
    opacity:1;
}
body.index #section01 .backimage span img {
    display: none;
}
body.index #section01 > .inner:before {
    content: '';
    position: absolute;
    z-index: 2;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/index/dot_03.png);
}
body.index #section01 > .inner:after {
    content: '';
    position: absolute;
    z-index: 2;
    bottom: 0;
    right: 0;
    width: 36.875%;
    height: 35.32333%;
    background-image: url(../images/index/top_row01_33.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
}
body.index #section01 .row02 {
    padding-bottom: 30px;
}
body.index #section01 .row02_01 {
    width: 59.16824%;
}
body.index #section01 .row02_02 {
    font-size: 1.847rem;
    line-height: 2.06063;
    color: #fff;
    margin: -0.53032em 0.7em;
    padding-top: 1.84082em;
    text-shadow:1px 1px 3px #000000;
    letter-spacing: 0.075em;
}
body.index #section01 .row03 .inner {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}
body.index #section01 .row03 a {
    position: relative;
    width: 7.65595%;
}
body.index #section01 .row03 a span img {
    position: static;
    width: 50%;
    padding: 15px 0 70.37037%;
    -webkit-animation: vertical 0.5s linear infinite alternate;
            animation: vertical 0.5s linear infinite alternate;
}
body.index #section01 .row03 img {
}
body.index #about > .inner:before {
    content: '';
    position: absolute;
    z-index: 2;
    bottom: 0;
    right: 0;
    width: 36.80555%;
    height: 44.87179%;
    background-image: url(../images/index/top_row02_bk_02.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
}
body.index #about > .inner:after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 36.80555%;
    height: 44.87179%;
    background-image: url(../images/index/top_row02_bk_01.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
}
body.index #about .showBox {
    height: 100%;
}
body.index #about .showBox > .inner {
    width: 82%;
    height: 100%;
    margin: 0 auto 0;
    position: relative;
}
body.index #about h1 span ,
body.index #about h2 span ,
body.index #about h3 span {
    text-align: justify;
    text-justify: inter-ideograph;
}
body.index #about h1 {
    font-size: 2.8rem;
    margin: -0.375em 0;
    letter-spacing: 0.1em;
}
body.index #about h2 {
    font-size: 2.2rem;
    line-height: 1.90909;
    margin: -0.454545em 0;
    padding-top: 0.8em;
    letter-spacing: 0.05em;
}
body.index #about h3 {
    font-size: 1.6rem;
    line-height: 2.3125;
    margin: -0.65625em 0;
    padding-top: 1.5em;
    letter-spacing: 0.05em;
}
body.index #about .table .table {
    margin: 12% 0 0 0;
}
body.index #about .table-cell.col01 {
    width: 41.97674%;
}
body.index #about .table-cell.col02 {
    padding: 0 0 0 6.27907%;
}
body.index #business > .inner {
    background-image: url(../images/index/top_row03_bk_01.jpg);
    background-size: cover;
    background-position: center;
}
body.index #business .caption01 img {
    width: 19.09262%;
}
body.index #business h1 {
    font-size: 2.4rem;
    margin: -0.375em 0;
    padding: 3.49716% 0 4.72589%;
}
body.index #business ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display:         flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    justify-content: center;
}
body.index #business li {
    width: 28.73346%;
    text-align: justify;
    text-justify: inter-ideograph;
}
body.index #business li + li {
    margin-left: 3.02457%;
}
body.index #business li .textBox {
    background-color: #fff;
    display: block !important;
}
body.index #business h2 {
    font-size: 2.3rem;
    color: #D51518;
    margin: -0.375em 0;
    padding: 7.88157%  9.44625% 0;
}
body.index #business li h3 {
    font-size: 1.6rem;
    margin: -0.375em 0;
    padding: 0.8em 9.44625% 8.88157%;
}
body.index #projects .showBox {
    padding: 0 10px;
}
body.index #projects .caption01 img {
    width: 16.85303%;
}
body.index #projects h1 {
    font-size: 2.4rem;
    margin: -0.375em 0;
    padding: 3% 0 3%;
}
body.index #projects ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display:         flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    justify-content: center;
}
body.index #projects li {
    width: 19.375%;
}
body.index #projects li + li {
    margin-left: 0.64935%;
}
body.index #projects li .textBox {
    display: block;
    width: 100%;
}
body.index #projects h2 {
    font-size: 1.8rem;
    margin: -0.375em 0;
    text-align: center;
    padding: 9.21659% 0 0;
}
body.index #projects .linkbuttonArea {
    margin-top: 4.22078%;
}
body.index #passion > .inner {
    background-image: url(../images/index/top_row05_bk_01.jpg);
    background-size: cover;
    background-position: center;
}
body.index #passion .caption01 img {
    width: 16.73%;
}
body.index #passion h1 {
    font-size: 2.4rem;
    margin: -0.375em 0;
    padding: 3.49716% 0 4.72589%;
}
body.index #passion h2.slide-content {
    width: 53.02457%;
    font-size: 1.5rem;
    line-height: 2;
    margin: -0.5em auto;
    text-align: justify;
    text-justify: inter-ideograph;
}
body.index #passion .row01 {
    width: 53.02457%;
    margin: 3.78072% auto 0;
}
body.index #passion .row01 img {
    width: 39.72%;
}
body.index #company .caption01 img {
    width: 19.56522%;
}
body.index #company .colbox {
    margin-top: 3.96975%;
}
body.index #company .colbox > .col01 {
    width: 51.79584%;
}
body.index #company .colbox > .col02 {
    position: relative;
    width: 39.60302%;
}
body.index #company .colbox > .col02 span {
    position: absolute;
    z-index: 1;
    padding: 5.26316% 0 0 8.37321%;
    font-size: 1.456rem;
}
body.index #company table {
    font-size: 1.5rem;
    table-layout: fixed;
    width: 100%;
}
body.index #company table th {
    font-weight: normal;
    width: 26.07076%;
    padding-right: 1em;
    vertical-align: top;
}
body.index #company table th ,
body.index #company table td {
    text-align: left;
    padding: 0.766667em 0;
}
body.index #mainFooter {
    position: absolute;
    width: 100%;
    padding-top: 0;
    bottom: 0;
    left: 0;
}
body.index #copyright {
    margin-top: 0;
}

/* フッター */
#mainFooter {
    padding: 500px 0 16px;
}
#mainFooter .page_top {
    width: 2.45746%;
    display: inline-block;
}
#copyright {
    display: block !important;
    margin-top: 1.89036%;
    font-size: 1rem;
}
#copyright span {
    padding-top: 19px;
}
#copyright img {
    width: 28.54442%;
}

/* リクルート */
body.recruit {
    background-image: url(../images/recruit/recruit_bk.png);
}
body.recruit #mainContent .row01 {
    padding: 8.03403% 0 0;
}
body.recruit #mainContent .row02 {
    font-size: 2.7rem;
    margin: -0.375em 0;
    padding: 3.40264% 0 0;
}
body.recruit #mainContent .row03 {
    font-size: 1.6rem;
}
body.recruit #mainContent .row03 h2 {
    padding-top: 7%;
    margin: -0.375em 0;
}
body.recruit #mainContent .row03 table {
    width: 59.54631%;
    margin: 3.78072% auto 0;
    table-layout: fixed;
    line-height: 1.875;
}
body.recruit #mainContent .row03 th {
    width: 27.77778%;
    text-align: left;
    font-weight: normal;
    padding: 10px 0;
}
body.recruit #mainContent .row03 td {
    padding: 10px 0;
}
body.recruit #mainContent .row04 {
    margin-top: 12.28733%;
}
body.recruit #mainContent .row04 h2 {
    font-size: 2.7rem;
}
body.recruit #mainContent .row04 textarea ,
body.recruit #mainContent .row04 input ,
body.recruit #mainContent .row04 select ,
body.recruit #mainContent .row04 option {
    font-size: 1.6rem;
}
body.recruit #mainContent .row04 textarea ,
body.recruit #mainContent .row04 input[type="text"] ,
body.recruit #mainContent .row04 input[type="email"] ,
body.recruit #mainContent .row04 select {
    width: 100%;
    border: none;
    padding: 5px 1em;
    line-height: 1.75;
}
body.recruit #mainContent .row04 textarea {
    height: 38px;
}
body.recruit #mainContent .row04 .selectBox {
    position: relative;
}
body.recruit #mainContent .row04 .selectBox:before {
    content: '';
    position: absolute;
    right: 7px;
    top: 50%;
    margin-top: -13px;
    width: 11px;
    height: 26px;
    background-image: url(../images/common/select_07.jpg);
    background-size: cover;
}
body.recruit #mainContent .row04 .selectBox select {
    padding-right: 25px;
    background-color: #fff;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
body.recruit #mainContent .row04 .inputfileBox {
    position: relative;
    background-color: #fff;
    display: block;
    padding: 5px 1em;
    line-height: 1.75;
    width: 186px;
    padding-right: 25px;
    overflow: hidden;
    white-space: nowrap;
    -webkit-text-overflow: ellipsis;
         -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
}
body.recruit #mainContent .row04 .inputfileBox:before {
    content: attr(data-text);
    color: #231815;
}
body.recruit #mainContent .row04 .inputfileBox:after {
    content: '';
    position: absolute;
    right: 7px;
    top: 50%;
    margin-top: -4.5px;
    width: 11px;
    height: 9px;
    background-image: url(../images/common/inputfile_11.jpg);
    background-size: cover;
}
body.recruit #mainContent .row04 .inputfileBox input {
    opacity: 0;
    width: 0;
    height: 0;
}
body.recruit #mainContent .row04 table {
    width: 74.1964%;
    table-layout: fixed;
    margin: 3.78071% auto 0;
    font-size: 1.6rem;
    -webkit-transform: translate(-50px,0);
       -moz-transform: translate(-50px,0);
        -ms-transform: translate(-50px,0);
         -o-transform: translate(-50px,0);
            transform: translate(-50px,0);
}
body.recruit #mainContent .row04 th {
    width: 20.89172%;
    text-align: right;
    font-weight: normal;
    padding: 15px 4.458599% 10px 0;
    vertical-align: top;
}
body.recruit #mainContent .row04 td {
    padding: 10px 0;
}
body.recruit #mainContent .row04 .submitButton {
    margin-top: 4.725898%;
}
body.recruit #mainContent .row04 .submitButton button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    background-color: #fff;
    padding: 0;
    -webkit-transition:all 200ms linear;
       -moz-transition:all 200ms linear;
        -ms-transition:all 200ms linear;
         -o-transition:all 200ms linear;
            transition:all 200ms linear;
    box-shadow: #fff 0 0 0;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
body.recruit #mainContent .row04 .submitButton button:hover {
    opacity: 0.7;
}
body.recruit #mainContent ::-webkit-input-placeholder {
    color: #C9CACA;
}
body.recruit #mainContent ::-moz-placeholder {
    color: #C9CACA;
}
body.recruit #mainContent :-moz-placeholder {
    color: #C9CACA;
}
body.recruit #mainContent input:-ms-input-placeholder {
    color: #C9CACA;
}
body.recruit #mainContent .error {
    font-size: 1.2rem;
    color: #D51518;
    position: absolute;
    -webkit-transform: translate(0,-90%);
            transform: translate(0,-90%);
}
body.recruit #form {
    padding-top: 68px;
    margin-top: -68px;
}

/* 完了 */
body.thanks {
    height: 100%;
}
body.thanks #main {
    position: relative;
    padding-bottom: 159px;
    min-height: 100%;
}
body.thanks #mainFooter {
    position: absolute;
    width: 100%;
    bottom: 0;
}
body.thanks #mainContent {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
body.thanks #mainContent .row05 {
    font-size: 2.7rem;
    letter-spacing: 0.05em;
    padding: 190px 0 0;
}
body.thanks #mainContent .row06 {
    font-size: 1.6rem;
    line-height: 2.3125;
    margin: -0.65625em;
    padding: 60px 0 80px;
}

/* プロジェクト */
body.project #mainContent .row01 {
    padding: 8.03403% 0 0;
}
body.project #mainContent .row01 img {
    width: 177px;
}
body.project #mainContent .row02 {
    font-size: 2.4rem;
    margin: -0.375em 0;
    padding-top: 3.78072%;
}
body.project #mainContent .row03 {
    margin: 10.39697% auto 0;
    max-width: 910px;
}
body.project #mainContent .row03 section {
    position: relative;
}
body.project #mainContent .row03 section + section {
    margin-top: 10.32967%;
}
body.project #mainContent .row03 .table-cell.col01 {
    width: 56.59340%;
    padding-right: 4.3956%;
}
body.project #mainContent .row03_01 {
    font-size: 2.4rem;
    margin: -0.375em 0;
}
body.project #mainContent .row03 .table-cell.col02 .row + .row {
    margin: -0.375em 0;
    padding-top: 10.12658%;
}
body.project #mainContent .row03 .table-cell.col02 p {
    font-size: 1.5rem;
    line-height: 2;
    margin: -0.5em 0;
}

/* レスポンシブ */
@media only screen and (max-width: 1252px){
    /* 共通 */
    .showBox {
        max-width: 1252px;
        padding: 0 7.06169%;
    }

    /* index */
    body.index #projects h2.slide-content {
        font-size: 1.59744vw;
    }
}
@media only screen and (max-width: 768px){
    /* 共通 */
    body {
        overflow: hidden;
    }
    .showBox {
        padding: 0 20px;
    }
    .caption01 > span {
        padding-bottom: 18.5px;
    }
    .caption01 > span::before {
        bottom: 1px;
    }

    /* ヘッダー */
    #mainHeader {
        height: 58px;
    }
    #mainHeader > .inner {
        padding: 0;
    }
    #mainHeader .table ,
    #mainHeader .table .table-cell {
        display: block;
        width: 100%;
    }
    #mainHeader .table {
        width: 100%;
        display: block;
        padding: 12.5px 17.5px;
    }
    #mainHeader .table-cell.col01 a {
        position: relative;
        z-index: 3;
    }
    #mainHeader .table-cell.col01 img {
        height: 32.755px;
    }
    #mainHeader .drawer-toggle.drawer-hamburger {
        left: auto;
        padding-left: 20px;
        padding-right: 20px;
        width: 35px;
    }
    #mainHeader .drawer-hamburger-icon,
    #mainHeader .drawer-hamburger-icon::after,
    #mainHeader .drawer-hamburger-icon::before {
        height: 1px;
    }
    #mainHeader .drawer-nav {
        background-color: rgba(255,255,255,0.9);
    }
    #mainHeader .drawer-menu {
        padding: 58px 0 43px;
    }
    #mainHeader .drawer-menu li {
        display: block;
        text-align: center;
    }
    #mainHeader .drawer-menu a {
        display: inline-block;
        padding: 0;
    }
    #mainHeader .drawer-menu li img {
        height: 14.8425px;
    }
    #mainHeader .drawer-menu li {
        padding-top: 40px;
    }
    #mainHeader .drawer-menu li.col07 a {
        background-color: #D51518;
        padding: 12px 33px;
    }

    /* トップページイントロ */
    #intro {
        width: 100%;
        overflow: hidden;
    }

    /* トップページ */
    body.index .nextLink a {
        position: relative;
        padding: 1em 1%;
        display: inline-block;
        width: 23.10605%;
        margin-top: 1em;
    }
    body.index .nextLink a span {
        display: block;
    }
    body.index .nextLink a span img {
        width: auto;
        height: 13.2px;
        -webkit-animation: vertical 0.5s linear infinite alternate;
                animation: vertical 0.5s linear infinite alternate;
    }
    body.index .nextLink img {
        width: 100%;
    }
    body.index #mainContent > section > .body > .showBox {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    body.index #mainContent > section > .body > .showBox > .inner {
        height: auto;
        padding: 2em 0;
    }
    body.index #section01 .row02 {
        padding: 40px 0 30px;
    }
    body.index #section01 .row02_01 {
        width: 74.53333%;
    }
    body.index #section01 .row02_02 {
        font-size: 1.5rem;
        line-height: 1.86666;
    }
    /*body.index #section01 .row03 .inner {
        position: static;
    }*/
    body.index #section01 .row03 a {
        width: 23.10605%;
    }
    body.index #section01 > .inner::before {
        background-image: url(../images/index/sp/dot_03.png);
    }
    body.index #section01 > .inner::after {
        width: 57.09973%;
        height: 50%;
    }
    body.index #about > .inner::before ,
    body.index #about > .inner::after {
        width: 57.09973%;
        height: 15.63598%;
    }
    body.index #about .showBox > .inner {
        width: 100%;
        height: 100%;
    }
    body.index #about h1 {
        font-size: 2.3rem;
        line-height: 1.52174;
        margin: -0.26087em 0;
    }
    body.index #about h1 span {
        text-align: center;
    }
    body.index #about .table .table {
        margin: -1.7em 0;
        padding-top: 35px;
    }
    body.index #about .table-cell.col01 ,
    body.index #about .table-cell.col02 {
        width: 100%;
        display: table-row;
    }
    body.index #about .table-cell.col01 {
        display: table-footer-group;
    }
    body.index #about .table-cell.col01 img {
        width: 67.18198%;
        padding: 2.5em 0;
        margin-left: 12px;
    }
    body.index #about h2 {
        text-align: center;
        margin: -0.33333em 0;
    }
    body.index #about h2 br {
        display: none;
    }
    body.index #about h2 span {
        text-align: center;
        font-size: 1.7rem;
        line-height: 1.66667;
        width: 100%;
    }
    body.index #about h3 {
        font-size: 1.4rem;
        line-height: 1.9285;
        margin: -1.4em 0;
        padding-top: 25px;
    }
    body.index #business > .inner {
        background-image: url(../images/index/sp/top_sp_ol.jpg);
    }
    body.index #business .caption01 img {
        width: 40.52593%;
    }
    body.index #business h1 {
        font-size: 1.8rem;
        margin: -0.375em 0;
        padding: 28px 0 33px;
    }
    body.index #business li {
        width: 100%;
        display: block;
        position: relative;
        padding-right: 30.43478%;
        overflow: hidden;
    }
    body.index #business li + li {
        margin: 20px 0 0;
    }
    body.index #business li > .slide-content {
        position: absolute;
        width: 30.43478%;
        height: 100%;
        right: 0;
    }
    body.index #business li > .slide-content img {
        position: absolute;
        top: 0;
        max-width: none;
        width: auto;
        height: 100%;
    }
    body.index #business h2 {
        font-size: 1.6185rem;
        color: #D51518;
    }
    body.index #business li h3 {
        font-size: 1.4rem;
        line-height: 1.53571;
    }
    body.index #projects .caption01 img {
        width: 40.52593%;
    }
    body.index #projects h1 {
        font-size: 1.8rem;
        margin: -0.375em 0;
        padding: 28px 0 33px;
    }
    body.index #projects ul {
        display: block;
        text-align: left;
    }
    body.index #projects li {
        width: 50%;
    }
    body.index #projects li + li {
        margin-left: 0;
    }
    body.index #projects li:nth-of-type(2n) {
        padding-left: 7.5px;
    }
    body.index #projects li:nth-of-type(2n + 1) {
        padding-right: 7.5px;
    }
    body.index #projects .showBox {
        padding: 0 20px;
    }
    body.index #projects h2 {
        font-size: 1.4rem;
        margin: -0.375em 0;
        text-align: left;
        padding: 0 0 1em;
    }
    body.index #projects .linkbuttonArea {
        display: none;
    }
    body.index #passion .caption01 img {
        width: 40.52593%;
    }
    body.index #passion h1 {
        font-size: 1.8rem;
        margin: 0;
        padding: 28px 0 33px;
    }
    body.index #passion h2.slide-content {
        font-size: 1.4rem;
        line-height: 1.92857;
        margin: -0.5em 0;
        width: 100%;
    }
    body.index #passion .row01 {
        text-align: left;
        width: 100%;
        margin-top: 2.25em;
    }
    body.index #passion .row01 img {
        width: 30.15%;
    }
    body.index #mainContent > #company > .body > .showBox > .inner {
        padding-bottom: 0;
    }
    body.index #company .caption01 img {
        width: 40.52593%;
    }
    body.index #company .colbox > .col01 ,
    body.index #company .colbox > .col02 {
        width:100%;
        display: block;
    }
    body.index #company .colbox > .col02 {
        margin: 0 -20px;
        width: auto;
    }
    body.index #company table {
        font-size: 1.4rem;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    body.index #company table th {
        width: 31.80327%;
    }
    body.index #mainFooter {
        position: static;
    }

    /* footer */
    #mainFooter .page_top {
        width: 7.16417%;
    }
    #copyright img {
        width: 71.64179%;
    }

    /* リクルート */
    body.recruit #mainContent .showBox {
        padding: 0 30px;
    }
    body.recruit #mainContent .row01 img {
        width: 36.11381%;
    }
    body.recruit #mainContent .row02 {
        font-size: 1.7rem;
        padding-top: 6.34921%;
        text-align: left;
        white-space: nowrap;
    }
    body.recruit #mainContent .row03 {
        font-size: 1.4rem;
    }
    body.recruit #mainContent .row03 h2 {
        padding-top: 12.698413%;
    }
    body.recruit #mainContent .row03 table {
        width:100%;
        margin: 11.11111% auto 0;
        table-layout: fixed;
        line-height: 1.875;
    }
    body.recruit #mainContent .row04 h2 {
        font-size: 1.9rem;
    }
    body.recruit #mainContent .row04 {
        margin-top: 22.53968%;
    }
    body.recruit #mainContent .row04 table {
        width: 100%;
        display: block;
        margin: 3.78071% auto 0;
        font-size: 1.6rem;
        -webkit-transform: translate(0);
           -moz-transform: translate(0);
            -ms-transform: translate(0);
             -o-transform: translate(0);
                transform: translate(0);
    }
    body.recruit #mainContent .row04 tbody ,
    body.recruit #mainContent .row04 tr ,
    body.recruit #mainContent .row04 tr > * {
        display: block;
        width: 100%;
        text-align: left;
    }
    body.recruit #mainContent .row04 tr + tr {
        margin-top: 3.1746%;
    }
    body.recruit #mainContent .row04 th ,
    body.recruit #mainContent .row04 td {
        padding: 0;
    }
    body.recruit #mainContent .row04 .submitButton {
        text-align: left;
        margin-top: 11.904762%;
    }
    body.recruit #mainContent .row04 .submitButton button {
        padding: 0;
    }
    body.recruit #mainContent .sp.error {
        position: static;
        padding-left: 0.4em;
        vertical-align: middle;
        display: inline-block !important;
        -webkit-transform: translate(0);
                transform: translate(0);
    }

    /* 完了 */
    body.thanks #mainContent .row05 {
        font-size: 1.9rem;
        letter-spacing: 0.05em;
        padding: 100px 0 0;
    }
    body.thanks #mainContent .row06 {
        font-size: 1.4rem;
        line-height: 1.64286;
        margin: -0.65625em;
        padding: 60px 0 80px;
    }
    body.thanks #mainContent .row07 img {
        width: 66.66667%;
    }

    /* プロジェクト */
    body.project #mainContent .showBox {
        padding: 0 35px;
    }
    body.project #mainContent .row01 img {
        width: 36.11381%;
    }
    body.project #mainContent .row02 {
        font-size: 1.7rem;
        margin: -0.375em 0;
        padding-top: 6.55738%;
    }
    body.project #mainContent .row03 {
        padding-top: 8.19672%;
    }
    body.project #mainContent .row03 .table-cell.col02 .row + .row {
        marign: 0;
        padding-top: 3%;
    }
    body.project #mainContent .row03 .table-cell.col02 p {
        font-size: 1.4rem;
        line-height: 1.71428;
        margin: 0;
    }
    body.project #mainContent .row03 .table-cell.col02 p.row03_04 {
        font-size: 1.2rem;
    }
    body.project #mainContent .row03 section + section {
        margin-top: 15.40983%;
    }
}

/* アニメーション */
@-webkit-keyframes vertical {
    0% { transform:translateY( 2px); }
   50% { transform:translateY( 0px); }
  100% { transform:translateY(-2px); }
}
@keyframes vertical {
    0% { transform:translateY( 2px); }
   50% { transform:translateY( 0px); }
  100% { transform:translateY(-2px); }
}
@-webkit-keyframes lightbox-load-circle-03 {
    0% {
        -webkit-transform:rotate(0);
    }
    100% {
        -webkit-transform:rotate(360deg);
    }
}
@keyframes lightbox-load-circle-03 {
    0% {
        transform:rotate(0)
    }
    100% {
        transform:rotate(360deg)
    }
}
@-webkit-keyframes slideContentMiyamariken {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(30px);
    }
}
@keyframes slideContentMiyamariken {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(30px);
    }
}
@-webkit-keyframes slideContent {
    0% {
        opacity: 1;
        -webkit-transform: translate(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0,200%);
    }
}
@keyframes slideContent {
    0% {
        opacity: 1;
        transform: translate(0);
    }
    100% {
        opacity: 0;
        transform: translate(0,200%);
    }
}
@-webkit-keyframes activeSlideContentMiyamariken {
    0% {
        opacity: 0;
        -webkit-transform: translateY(30px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0);
    }
}
@keyframes activeSlideContentMiyamariken {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}
@-webkit-keyframes activeSlideContent {
    0% {
        opacity: 0;
        -webkit-transform: translate(0,200%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0);
    }
}
@keyframes activeSlideContent {
    0% {
        opacity: 0;
        transform: translate(0,200%);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}
@-webkit-keyframes upperActiveSlideContentMiyamariken {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@keyframes upperActiveSlideContentMiyamariken {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@-webkit-keyframes upperActiveSlideContent {
    0% {
        opacity: 0;
        -webkit-transform: translate(0,-200%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0);
    }
}
@keyframes upperActiveSlideContent {
    0% {
        opacity: 0;
        transform: translate(0,-200%);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}
@-webkit-keyframes upperpartSlideContentMiyamariken {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
    }
}
@keyframes upperpartSlideContentMiyamariken {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-30px);
    }
}
@-webkit-keyframes upperpartSlideContent {
    0% {
        opacity: 1;
        -webkit-transform: translate(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0,-200%);
    }
}
@keyframes upperpartSlideContent {
    0% {
        opacity: 1;
        transform: translate(0);
    }
    100% {
        opacity: 0;
        transform: translate(0,-200%);
    }
}





@keyframes scroll {
    0% {
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
    50% {
        transform: translate(-0.5875%, 2.5%) /*matrix3d(0.999888,0,0.00,0,0.00,0.999888,0.00,0,0,0,1,0,0,0,-100,1)*/;
    }
    100% {
        transform: translate(-47.7%, 200%) /*matrix3d(0.999848,0,0.00,0,0.00,0.999848,0.00,0,0,0,1,0,0,0,-200,1)*/;
    }
}
@keyframes activeScroll {
    0% {
        transform: translate(-47.7%, 200%) /*matrix3d(0.999848,0,0.00,0,0.00,0.999848,0.00,0,0,0,1,0,0,0,-200,1)*/;
    }
    50%{
        transform: translate(-0.5875%, 2.5%) /*matrix3d(0.999888,0,0.00,0,0.00,0.999888,0.00,0,0,0,1,0,0,0,-100,1)*/;
    }
    100% {
        transform: translate(0,0);
   }
}
@keyframes upperActiveScroll {
    0% {
        transform: translate(47.7%, -200%) /*matrix3d(0.999848,0,0.00,0,0.00,0.999848,0.00,0,0,0,1,0,0,0,-200,1)*/;
    }
    50% {
        transform: translate(0.5875%,-2.5%) /*matrix3d(0.999888,0,0.00,0,0.00,0.999888,0.00,0,0,0,1,0,0,0,-100,1)*/;
    }
    100% {
        transform: matrix(1, 0, 0, 1, 0, 0);
   }
}
@keyframes upperpartScroll {
    0% {
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
    50% {
        transform: translate(0.5875%,-2.5%) /*matrix3d(0.999888,0,0.00,0,0.00,0.999888,0.00,0,0,0,1,0,0,0,-100,1)*/;
    }
    100% {
        transform: translate(47.7%, -200%) /*matrix3d(0.999848,0,0.00,0,0.00,0.999848,0.00,0,0,0,1,0,0,0,-200,1)*/;
    }
}





@-webkit-keyframes scroll {
    0% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
                transform: matrix(1, 0, 0, 1, 0, 0);
    }
    50% {
        -webkit-transform: translate(-0.5875%, 2.5%) matrix3d(0.999888,0,0.00,0,0.00,0.999888,0.00,0,0,0,1,0,0,0,-100,1);
                transform: translate(-0.5875%, 2.5%) matrix3d(0.999888,0,0.00,0,0.00,0.999888,0.00,0,0,0,1,0,0,0,-100,1);
    }
    100% {
        -webkit-transform: translate(-47.7%, 200%) matrix3d(0.999848,0,0.00,0,0.00,0.999848,0.00,0,0,0,1,0,0,0,-200,1);
                transform: translate(-47.7%, 200%) matrix3d(0.999848,0,0.00,0,0.00,0.999848,0.00,0,0,0,1,0,0,0,-200,1);
    }
}
@-webkit-keyframes activeScroll {
    0% {
        -webkit-transform: translate(-47.7%, 200%) matrix3d(0.999848,0,0.00,0,0.00,0.999848,0.00,0,0,0,1,0,0,0,-200,1);
                transform: translate(-47.7%, 200%) matrix3d(0.999848,0,0.00,0,0.00,0.999848,0.00,0,0,0,1,0,0,0,-200,1);
    }
    50%{
        -webkit-transform: translate(-0.5875%, 2.5%) matrix3d(0.999888,0,0.00,0,0.00,0.999888,0.00,0,0,0,1,0,0,0,-100,1);
                transform: translate(-0.5875%, 2.5%) matrix3d(0.999888,0,0.00,0,0.00,0.999888,0.00,0,0,0,1,0,0,0,-100,1);
    }
    100% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
                transform: matrix(1, 0, 0, 1, 0, 0);
   }
}
@-webkit-keyframes upperActiveScroll {
    0% {
        -webkit-transform: translate(47.7%, -200%) matrix3d(0.999848,0,0.00,0,0.00,0.999848,0.00,0,0,0,1,0,0,0,-200,1);
                transform: translate(47.7%, -200%) matrix3d(0.999848,0,0.00,0,0.00,0.999848,0.00,0,0,0,1,0,0,0,-200,1);
    }
    50% {
        -webkit-transform: translate(0.5875%,-2.5%) matrix3d(0.999888,0,0.00,0,0.00,0.999888,0.00,0,0,0,1,0,0,0,-100,1);
                transform: translate(0.5875%,-2.5%) matrix3d(0.999888,0,0.00,0,0.00,0.999888,0.00,0,0,0,1,0,0,0,-100,1);
    }
    100% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
                transform: matrix(1, 0, 0, 1, 0, 0);
   }
}
@-webkit-keyframes upperpartScroll {
    0% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
                transform: matrix(1, 0, 0, 1, 0, 0);
    }
    50% {
        -webkit-transform: translate(0.5875%,-2.5%) matrix3d(0.999888,0,0.00,0,0.00,0.999888,0.00,0,0,0,1,0,0,0,-100,1);
                transform: translate(0.5875%,-2.5%) matrix3d(0.999888,0,0.00,0,0.00,0.999888,0.00,0,0,0,1,0,0,0,-100,1);
    }
    100% {
        -webkit-transform: translate(47.7%, -200%) matrix3d(0.999848,0,0.00,0,0.00,0.999848,0.00,0,0,0,1,0,0,0,-200,1);
                transform: translate(47.7%, -200%) matrix3d(0.999848,0,0.00,0,0.00,0.999848,0.00,0,0,0,1,0,0,0,-200,1);
    }
}