@keyframes blur {
    0% {
        filter: blur(7px);
    }
    100% {
        filter: blur(0);
    }
}
@keyframes line {
    0% {
        stroke-dashoffset: 1500px;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes animation02 {
    0% {
        -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }
    100% {
        -webkit-clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
        clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
    }
}
@keyframes animation03 {
    0% {
        -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }
    100% {
        -webkit-clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
        clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
    }
}
@keyframes animation04 {
    0% {
        opacity: 0;
        left: -196px;
    }
    100% {
        opacity: 1;
        left: -156px;
    }
}
@keyframes animation05 {
    0% {
        opacity: 0;
        left: -128px;
    }
    100% {
        opacity: 1;
        left: -88px;
    }
}
@keyframes animation06 {
    0% {
        opacity: 0;
        right: -220px;
    }
    100% {
        opacity: 1;
        right: -180px;
    }
}
@keyframes animation07 {
    0% {
        opacity: 0;
        top: 40px;
    }
    100% {
        opacity: 1;
        top: 0;
    }
}
@keyframes animation08 {
    0% {
        opacity: 0;
        right: -40px;
    }
    100% {
        opacity: 1;
        right: 0;
    }
}
@keyframes animation09 {
    0% {
        -webkit-clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
        clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
    }
    100% {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}
@keyframes animation10 {
    0% {
        margin-left: 70%;
    }
    100% {
        margin-left: 50%;
    }
}
@keyframes animation11 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes animation12 {
    0% {
        opacity: 0;
        left: 652px;
    }
    100% {
        opacity: 1;
        left: 612px;
    }
}
@keyframes animation13 {
    0% {
        opacity: 0;
        left: 707px;
    }
    100% {
        opacity: 1;
        left: 667px;
    }
}
@keyframes animation14 {
    0% {
        opacity: 0;
        left: -40px;
    }
    100% {
        opacity: 1;
        left: 0px;
    }
}
@keyframes animation54 {
    0% {
        opacity: 0;
        left: -40px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}
@keyframes animation55 {
    0% {
        opacity: 0;
        left: -40px;
    }
    100% {
        opacity: 1;
        left: 0px;
    }
}
@keyframes animation56 {
    0% {
        opacity: 0;
        right: -40px;
    }
    100% {
        opacity: 1;
        right: 0px;
    }
}
body {
    font-size: 1.4rem;
    line-height: 1.7em;
}
.pc-only,
.tb-only {
    display: none !important;
}
/* ドロワーメニュー*/
.drawer-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 3;
    background-color: rgba(51, 51, 51, 0.5);
    display: none;
}
.drawer-bg.open {
    display: block;
}
.drawer-menu {
    display: none;
    width: 85.77%;
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    background-color: #fff;
}
.drawer-menu.open {
    display: block;
    -webkit-transform: translate3d(0%, 0, 0);
    -moz-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}
.drawer-close {
    display: none;
    position: fixed;
    content: '';
    background-image: url(../images/sp/btn-close.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 14.222%;
    top: 0;
    right: 0;
    z-index: 10000;
}
.drawer-close.open {
    display: block;
}
.drawer-menu .drawer-inner {
    padding-top: 25px;
    padding-bottom: 100px;
    margin: 0 6.4%;
}
.drawer-menu .drawer-header .header ul li {
    display: inline-block;
    vertical-align: middle;
    width: 48.7%;
    margin-right: 2.6%;
}
.drawer-menu .drawer-header .header ul li a:before {
    content: "";
    display: block;
    padding-top: 28.58%;
}
.drawer-menu .drawer-header .header ul li:last-child {
    margin-right: 0;
}
.drawer-menu .drawer-header .header ul li a {
    display: block;
    background: url(../images/sp/side-menu01.png) no-repeat ;
    background-size: cover;
}
.drawer-menu .drawer-header .header ul li.online a {
    background-image: url(../images/sp/side-menu02.png);
}
.drawer-menu .drawer-header .search {
    padding: 16px 0 30px 0;
}
.drawer-menu .drawer-header .search form {
    height: 40px;
    border: solid 1px #e2c380;
}
.drawer-menu .drawer-header .search input[type="text"] {
    display: inline-block;
    width: 92%;
    font-size: 1.226rem;
    line-height: 34px;
    border: none;
    padding: 2px 0 2px 2rem;
    background: transparent;
}
.drawer-menu .drawer-header .search input[type="submit"] {
    display: inline-block;
    width: 8%;
    height: 1.866rem;
    border: none;
    background: transparent;
}
.drawer-menu .category-wrapper {
    margin-bottom: 2rem;
}
.drawer-menu .category-wrapper .category-title {
    padding: 1.666rem 0 1rem 0;
    border-bottom: 2px solid #e2c380;
    font-size: 1.3rem;
    font-weight: bold;
}
.drawer-menu .category-wrapper ul li {
    border-bottom: 1px solid #e2c380;
}
.drawer-menu .category-wrapper ul li:nth-child(odd) {
}
.drawer-menu .category-wrapper ul li a {
    position: relative;
    display: block;
    padding: 1rem 0;
}
.drawer-menu .category-wrapper ul li a:after {
    position: absolute;
    display: block;
    top: 2.66rem;
    right: 0;
    content: '';
    background-image: url(/images/one/arrow05.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 4px;
    height: 8px;
}
.section01 {
    background: #d14c2b;
    height: 538px;
}
.section01 .bg-white {
    position: absolute;
    width: 100%;
    height: 35vh;
    background: #fff;
}
.section01 .title {
    position: absolute;
    width: 100%;
    top: 47px;
    padding: 0 6.4%;
    z-index: 2;
}
.section01 .title:after {
    content: "";
    clear: both;
    display: block;
}
.section01 .title .logo {
    float: left;
    width: 37.6%;
}
.section01 .title .menu {
    float: right;
    width: 101px;
    /* 動画と被ってしまうため非表示にした */
    display: none;
}
.section01 .title .menu li {
    display: inline-block;
    width: 29px;
    margin-right: 7px;
}
.section01 .title .menu li:last-child {
    margin-right: 0;
}
.section01 .title .menu li img {
    width: 100%;
}
.section01 .video-area {
    position: absolute;
    top: 73px;
    right: 0;
    text-align: right;
}
.section01 .video-area video {
    width: 80.93%;
}
.section01 .scroll {
    position: absolute;
    right: 6.4%;
    bottom: 0;
    font-size: 1.2rem;
}
.section01 .scroll a {
    color: #fff;
}
.section01 .scroll span {
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    -ms-writing-mode: tb-rl;
}
.section01 .scroll a:after {
    content: "";
    display: block;
    background: url(../images/pc/scroll.gif) no-repeat;
    background-size: 1px 64px;
    width: 1px;
    height: 89px;
    margin: 12px 0 0 10px;
    border: none;
}
.section02 {
    display: block;
    content: "";
    width: 100%;
    height: 140px;
    background: #d14c2b url(../images/sp/img01.png) no-repeat 50% 50%;
    background-size: cover;
}
.section03 {
    height: 309px;
    margin-top: 33px;
    margin-bottom: 70px;
    overflow: hidden;
}
.section03 .animation-wrapper {
    position: relative;
}
.section03 #animation01 {
    position: absolute;
    left: calc(50% - 29.5px);
}
.section03 #title01 {
    content: '';
    position: absolute;
    background: url(../images/sp/title01.png) no-repeat 50% 11px;
    background-size: 56%;
    width: 52px;
    height: 309px;
    filter: blur(7px);
}
.section03 .animation02 {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    position: absolute;
    top: 105px;
    left: calc(50% - 167px);
}

.section03 .animation02 .cls-10 {
    fill: none;
    stroke: #f5e8e4;
    stroke-width: 1px;
    fill-rule: evenodd;
}
.section03 .animation02 .cls-11 {
    font-size: 9px;
    text-anchor: end;
    font-family: 'Noto Serif Japanese', serif;
}
.section03 .animation02.animation {
    animation: animation03 1s ease-in 1s forwards;
}


.section03 .animation03 {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    position: absolute;
    top: 105px;
    right: calc(50% - 160px);
}
.section03 .animation04 {
    opacity: 0;
    position: absolute;
    top: 57px;
    left: -156px;
}
.section03 .animation04.animation {
    animation: animation04 1s ease-out 2s forwards;
}
.section03 .animation05 {
    opacity: 0;
    position: absolute;
    top: 188px;
    left: -88px;
}
.section03 .animation05.animation {
    animation: animation05 1s ease-out 2s forwards;
}
.section03 .animation06 {
    opacity: 0;
    position: absolute;
    top: 112px;
    right: -180px;
}
.section03 .animation06.animation {
    animation: animation06 1s ease-out 2s forwards;
}
.section04 {
    position: relative;
    background: url(../images/sp/bg-about.png) repeat-x 0 381px;
    overflow: hidden;
}
.section04 .eye {
    text-align: center;
    margin-bottom: 28px;
}
.section04 .eye img {
    width: 126px;
}
.section04 .title {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
}
.section04 .title .cloud01 {
    position: absolute;
    top: 83px;
    left: -100px;
    width: 165px;
}
.section04 .title .cloud02 {
    position: absolute;
    top: 99px;
    right: -120px;
    width: 200px;
}
.section04 .title .okage {
    width: 55px;
}
.section04 .item {
    text-align: center;
}
.section04 .item img {
    width: 178px;
}
.section04 .left {
    position: absolute;
    top: 381px;
    left: 0;
    background: url(../images/pc/bg-left.png) no-repeat 50% 50%;
    width: 48px;
    height: 48px;
}
.section04 .right {
    position: absolute;
    top: 381px;
    right: 0;
    background: url(../images/pc/bg-right.png) no-repeat;
    width: 48px;
    height: 48px;
}
.section04 .description {
    padding: 36px 12.8%;
}
.section04 .description p {
    margin-bottom: 17px;
}
.section05 {
    overflow: hidden;
    background: #f3f2f2;
    background: url(../images/sp/bg-gray.png) repeat;
    padding-bottom: 100px;
}
.section05 .photo-box01 {
    position: relative;
    margin-bottom: 65px;
}
.section05 .photo-box01 .photo {
    padding-top: 128px;
    position: relative;
}
.section05 .photo-box01 .photo img {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    width: 87.2%;
    display: block;
    margin: 0 auto;
}
.section05 .photo-box01 .number {
    position: absolute;
    width: 100%;
    top: 40px;
    opacity: 0;
}
.section05 .photo-box01 .number.animation {
    animation: animation07 1s ease-out 0s forwards;
}
.section05 .photo-box01 .number img {
    width: 74.4%;
    display: block;
    margin: 0 auto;
}
.section05 .photo-box01 .title-line01 {
    position: absolute;
    width: 2px;
    left: 50%;
    bottom: -67px;
}
.section05 .photo-box01 .description {
    margin-top: 40px;
    padding: 0 12.8%;
}
.section05 .photo-box01 .description p {
    margin-bottom: 17px;
}
.section05 .photo-box01 .animation07 {
    position: absolute;
    width: 104.5px;
    top: 0;
    right: -100px;
    opacity: 0;
}
.section05 .photo-box01 .animation07.animation {
    animation: animation08 1s ease-out 1.5s forwards;
}
.section05 .photo-box01 .cls-17 {
    fill: none;
    stroke: #fff;
    stroke-width: 2px;
    fill-rule: evenodd;
}
.section05 .photo-box02 {
    position: relative;
    margin-bottom: 70px;
}
.section05 .photo-box02 .photo {
    position: relative;
    padding-top: 128px;
}
.section05 .photo-box02 .photo img {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    width: 87.2%;
    display: block;
    margin: 0 auto;
}
.section05 .photo-box02 .number {
    position: absolute;
    width: 100%;
    top: 40px;
    opacity: 0;
}
.section05 .photo-box02 .number.animation {
    animation: animation07 1s ease-out 0s forwards;
}
.section05 .photo-box02 .number img {
    width: 74.4%;
    display: block;
    margin: 0 auto;
}
.section05 .photo-box02 .title-line02 {
    position: absolute;
    width: 2px;
    left: 50%;
    bottom: -67px;
}
.section05 .photo-box02 .description {
    margin-top: 40px;
    padding: 0 12.8%;
}
.section05 .photo-box02 .description p {
    margin-bottom: 17px;
}
.section05 .photo-box02 .animation08 {
    position: absolute;
    top: -20px;
    left: -188px;
    opacity: 0;
}
.section05 .photo-box02 .animation08.animation {
    animation: animation05 1s ease-out 1.5s forwards;
}
.section05 .photo-box02 .cls-17 {
    fill: none;
    stroke: #fff;
    stroke-width: 2px;
    fill-rule: evenodd;
}
.section05 .photo-box03 {
    position: relative;
    margin-bottom: 40px;
}
.section05 .photo-box03 .photo {
    position: relative;
    padding-top: 128px;
}
.section05 .photo-box03 .photo img {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    width: 87.2%;
    display: block;
    margin: 0 auto;
}
.section05 .photo-box03 .number {
    position: absolute;
    width: 100%;
    top: 40px;
    opacity: 0;
}
.section05 .photo-box03 .number.animation {
    animation: animation07 1s ease-out 0s forwards;
}
.section05 .photo-box03 .number img {
    width: 74.4%;
    display: block;
    margin: 0 auto;
}
.section05 .photo-box03 .title-line03 {
    position: absolute;
    width: 2px;
    left: 50%;
    bottom: -67px;
}
.section05 .photo-box03 .description {
    margin-top: 40px;
    padding: 0 12.8%;
}
.section05 .photo-box03 .description p {
    margin-bottom: 17px;
}
.section05 .photo-box03 .animation09 {
    position: absolute;
    width: 104.5px;
    top: 0;
    right: -100px;
    opacity: 0;
}
.section05 .photo-box03 .animation09.animation {
    animation: animation08 1s ease-out 1.5s forwards;
}
.section05 .photo-box03 .cls-17 {
    fill: none;
    stroke: #fff;
    stroke-width: 2px;
    fill-rule: evenodd;
}
.section06 {
    margin-bottom: 80px;
    position: relative;
}
.section06 .component {
    position: relative;
    -webkit-clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
    height: 344px;
}
.section06 .component.animation {
    animation: animation09 1s ease-in-out 1s forwards;
}
.section06 .component.animation .shadow {
    animation: animation11 1s ease-in-out 2s forwards;
}
.section06 .component.animation .title {
    animation: animation11 1s ease-in-out 2s forwards;
}
.section06 .animation16 {
    position: absolute;
    opacity: 0;
    top: -30px;
    left: -40px;
    width: 92px;
}
.section06 .animation16.animation {
    animation: animation14 1s ease-in-out 0.5s forwards;
}
.section06 .bridge {
    overflow: hidden;
    background: #f3f2f2;
}
.section06 .bridge.animation .bridge-content {
    animation: animation10 1s ease-in-out 0.5s forwards;
}
.section06 .bridge-content {
    margin-left: 70%;
    height: 126px;
    width: 588px;
    background: url('../images/sp/bridge.png') no-repeat;
    background-size: cover;
}
.section06 .photo {
    background-image: url(../images/sp/component.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    height: 100%;
}
.section06 .shadow {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../images/sp/bg-shadow.png);
    background-size: cover;
    width: 100%;
    height: 100%;
}
.section06 .title {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../images/sp/component-title.png);
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}
.section07 {
    overflow: hidden;
}
.section07 .material-main  {
    position: relative;
}
.section07 .material-main .animation17 {
    position: absolute;
    width: 100px;
    opacity: 0;
    top: 41px;
    right: -40px;
    z-index: 1;
}
.section07 .material-main .animation17.animation {
    animation: animation08 1s ease-in 1s forwards;
}
.section07 .material-main .photo {
    position: relative;
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    padding: 0 12.8%;
    margin-bottom: 30px;
}
.section07 .material-main .photo img {
    width: 100%;
}
.section07 .material-main .photo .animation18 {
    position: absolute;
    width: 2px;
    left: 50%;
    bottom: -60px;
    fill: none;
    stroke: #edeceb;
    stroke-width: 2px;
    fill-rule: evenodd;
}
.section07 .material-main .number {
}
.section07 .material-main .description {
    padding: 0 12.8% 34px 12.8%;
}
.section07 .material-main .description p {
    margin-bottom: 17px;
}
.section07 .material-main .description .text1 {
    margin-bottom: 17px;
}
.section07 .material-main .animation10 {
    margin-left: -90px;
}
.section08 {
    background: url(../images/sp/bg-gray02.png) repeat;
}
.section08 .material-text {
    margin-bottom: 78px;
}
.section08 .material-text img {
    width: 100%;
}
.section08 .material01 .photo {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    margin-bottom: 40px;
}
.section08 .material01 .photo img {
    width: 100%;
}
.section08 .material01 .description {
    padding: 0 12.8%;
    padding-bottom: 62px;
}
.section08 .material01 .number {
    display: none;
}
.section08 .material01 .line {
    display: none;
}
.section08 .material01 .animation11 {
    display: none;
}
.section08 .material02 .photo {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    margin-bottom: 40px;
}
.section08 .material02 .photo img {
    width: 100%;
}
.section08 .material02 .description {
    padding: 0 12.8%;
    padding-bottom: 62px;
}
.section08 .material02 .number {
    display: none;
}
.section08 .material02 .line {
    display: none;
}
.section08 .material02 .animation12 {
    display: none;
}
.section08 .material03 .photo {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    margin-bottom: 40px;
}
.section08 .material03 .photo img {
    width: 100%;
}
.section08 .material03 .description {
    padding: 0 12.8%;
    padding-bottom: 62px;
}
.section08 .material03 .number {
    display: none;
}
.section08 .material03 .line {
    display: none;
}
.section08 .material03 .animation13 {
    display: none;
}
.section08 .material04 .photo {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    margin-bottom: 40px;
}
.section08 .material04 .photo img {
    width: 100%;
}
.section08 .material04 .description {
    padding: 0 12.8%;
    padding-bottom: 62px;
}
.section08 .material04 .number {
    display: none;
}
.section08 .material04 .line {
    display: none;
}
.section08 .material04 .animation14 {
}
.section09 {
    background: url(../images/sp/bg-gray02.png) repeat;
}
.section09 .flow {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 0 0);
    margin: 0 auto;
    width: 100%;
    margin-bottom: 45px;
}
.section09 .flow img {
    width: 100%;
    vertical-align: top;
}
.section10 img {
    width: 100%;
}
.section11 {
    height: 185px;
    margin-top: 38px;
    margin-bottom: 47px;
    overflow: hidden;
}
.section11 .animation-wrapper {
    position: relative;
}
.section11 #animation15 {
    position: absolute;
    left: calc(50% - 29.5px);
}
.section11 #title15 {
    content: '';
    position: absolute;
    background: url(../images/sp/title15.png) no-repeat 50% 16px;
    background-size: 50%;
    width: 52px;
    height: 178px;
    filter: blur(7px);
}
.section11 .animation52 {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    position: absolute;
    top: 34px;
    left: calc(50% - 167px);
}
.section11 .animation52 .cls-60 {
    fill: none;
    stroke: #f5e8e4;
    stroke-width: 1px;
    fill-rule: evenodd;
}
.section11 .animation52 .cls-61 {
    font-size: 9px;
    text-anchor: end;
    font-family: 'Noto Serif Japanese', serif;
}
.section11 .animation52.animation {
    animation: animation03 1s ease-in 1s forwards;
}
.section11 .animation53 {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    position: absolute;
    top: 34px;
    right: calc(50% - 160px);
}
.section11 .animation54 {
    opacity: 0;
    position: absolute;
    width: 58.5px;
    top: 0px;
    left: -40px;
}
.section11 .animation54 img {
    width: 100%;
}
.section11 .animation54.animation {
    animation: animation54 1s ease-out 2s forwards;
}
.section11 .animation55 {
    opacity: 0;
    position: absolute;
    width: 98.5px;
    top: 110px;
    left: -40px;
}
.section11 .animation55 img {
    width: 100%;
}
.section11 .animation55.animation {
    animation: animation55 1s ease-out 2s forwards;
}
.section11 .animation56 {
    opacity: 0;
    position: absolute;
    width: 98px;
    top: 44px;
    right: -40px;
}
.section11 .animation56 img {
    width: 100%;
}
.section11 .animation56.animation {
    animation: animation56 1s ease-out 2s forwards;
}
.section12 {
    position: relative;
    background: url(../images/sp/bg-gray.png) repeat;
    padding: 50px 0 0 0;
}
.section12 .left {
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/pc/bg-left.png) no-repeat;
    background-position: 50% 50%;
    width: 38px;
    height: 38px;
}
.section12 .right {
    position: absolute;
    top: 0;
    right: 0;
    background: url(../images/pc/bg-right.png) no-repeat;
    background-position: 50% 50%;
    width: 38px;
    height: 38px;
}
.section12 .cloud01 {
    position: absolute;
    width: 98px;
    top: -14px;
    right: 0;
}
.section12 .cloud01 img {
    width: 100%;
}
.section12 .cloud02 {
    position: absolute;
    width: 72.5px;
    bottom: 32px;
    left: 0;
}
.section12 .cloud02 img {
    width: 100%;
}
.section12 .item {
    position: relative;
    text-align: center;
    margin: 0 auto 44px auto;
}
.section12 .item01 {
    margin-bottom: 28px;
}
.section12 .item01 img {
    width: 74.4%;
}
.section12 .item02 img {
    width: 74.4%;
}
.section12 .shop {
    text-align: center;
    margin-bottom: 19px;
}
.section12 .shop a {
    display: inline-block;
    width: 82.6%;
    margin-left: 5%;
}
.section12 .shop a img {
    width: 100%;
}
.section12 .show {
    text-align: center;
    margin-bottom: 100px;
}
.section12 .show a {
    border-bottom: 1px solid #c3c2c2;
}
.section12 .jinja img {
    vertical-align: top;
    width: 100%;
}
footer {
    padding: 48px 0 40px 0;;
    font-size: 1rem;
}
footer .footer-title01 {
    margin-bottom: 24px;
}
footer .footer-title01:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 217px;
    height: 36.5px;
    background: url(../images/sp/footer-link1.png) no-repeat 50% 50%;
    background-size: cover;
}
footer .footer-menu01 {
    padding: 0 17.8%;
    text-align: center;
}
footer .footer-menu01 li {
    width: 26.8%;
    margin-right: 6%;
    display: inline-block;
    margin-bottom: 13px;
}
footer .footer-menu01 li:nth-child(3n) {
    margin-right: 0;
}
footer .footer-menu01 li:last-child {
    margin-right: 0;
}
footer .footer-menu01 li img {
    width: 100%;
}
footer .footer-menu02 {
    text-align: center;
    margin-bottom: 23px;
}
footer .footer-menu02 li {
    display: inline-block;
}
footer .footer-menu02 li:after {
    content: '>';
    display: inline-block;
    padding: 0 8px;
}
footer .footer-menu02 li:last-child:after {
    content: '';
    padding: 0;
}
footer .footer-menu03 {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 8px;
}
footer .footer-menu03 li {
    display: inline-block;
    margin-right: 2em;
    margin-bottom: 8px;
}
footer .footer-menu03 li:nth-child(2n) {
    margin-rigth: 0;
}
footer .footer-menu03 a {
}
footer .copyright {
    color: #7f7f7f;
    text-align: center;
    color: 0.9rem;
    padding-bottom: 100px;
}
.global-menu {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #000;
    z-index: 3;
}
.global-menu li {
    display: inline-block;
    width: 25%;
    border-right: 1px solid #4d4d4d;
}
.global-menu li:last-child {
    border-right: none;
}
.global-menu li a {
    color: #fff;
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 1.2rem 0;
}