@charset "UTF-8";
html, body {
    -webkit-user-select: none; /* Chrome or Safari */
    -moz-user-select: none; /* FireFox */
    -ms-user-select: none; /* IE */
    -o-user-select: none; /* Opera */
    user-select: none;
}
.mainbg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    overflow-x: hidden;
}
.mainbg img {
    height: 100vh;
    pointer-events: none;
}
.area1 {
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    width: 100vw;
}
.area1.last .deco {
    display: none;
}
.area1 .deco, .area1 .decoafter {
    position: absolute;
    pointer-events: none;
    width: 100vw;
    overflow-x: hidden;
    height: 100vh;
}
.area1 .trigger {
    display: none;
}
.area1.last .trigger {
    display: block;
}
.area1 .decoafter {
    display: none;
}
.area1.last .decoafter {
    display: block;
    pointer-events: auto;
}
.area1 .deco ul li img, .area1 .decoafter ul li img {
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    pointer-events: none;
}
.area1 .decoafter ul li img:nth-child(1) {
    z-index: 5;
    position: relative;
}
.area1 .decoafter ul li img:nth-child(2) {
    opacity: 0;
    transition: opacity 0.5s;
    width: 34vw;
}
.area1 .decoafter ul li:nth-child(1) img:nth-child(2) {
    position: absolute;
    transform: rotate(-270deg);
    left: 8vw;
    top: -8.3vw;
    z-index: 4;
}
.area1 .decoafter ul li:nth-child(2) img:nth-child(2) {
    position: absolute;
    transform: rotate(-180deg);
    left: -10vw;
    top: 8vw;
    z-index: 4;
}
.area1 .decoafter ul li:nth-child(3) img:nth-child(2) {
    position: absolute;
    left: -26.5vw;
    top: -10vw;
    transform: rotate(-90deg);
    z-index: 4;
}
.area1 .decoafter ul li:nth-child(4) img:nth-child(2) {
    position: absolute;
    left: -8.4vw;
    top: -25.2vw;
    transform: rotate(-0deg);
    z-index: 4;
}
.area1 .deco ul li, .area1 .deco2 ul li {
    position: absolute;
}
.area1 .decoafter ul li {
    position: fixed;
    animation-play-state: running;
}
.area1 .deco ul li:nth-child(1) {
    left: 27.69444vw;
    top: 62.33333vw;
    width: 56.958vw;
    animation: mainloopAnim 3.0s infinite;
    animation-delay: 0.05s;
}
.area1 .deco ul li:nth-child(2) {
    width: 18.8305vw;
    left: 70.83333vw;
    top: 21.9vw;
    animation: mainloopAnim 3.0s infinite;
    animation-delay: 0.1s;
}
.area1 .deco ul li:nth-child(3) {
    width: 18.13vw;
    right: -3vw;
    top: 94.09vw;
    animation: mainloopAnim 3.0s infinite;
    animation-delay: 0.15s;
}
.area1 .deco ul li:nth-child(4) {
    width: 22.1266vw;
    left: 18.5333vw;
    top: 114.86vw;
    animation: mainloopAnim 3.0s infinite;
    animation-delay: 0.2s;
}
.area1 .deco ul li:nth-child(5) {
    width: 21.3305vw;
    left: 6.38vw;
    top: 61.05vw;
    animation: mainloopAnim 4.0s infinite;
    animation-delay: 0.25s;
}
@keyframes mainloopAnim {
    0% {
        margin-top: 0vh;
    }
    50% {
        margin-top: -1vh;
    }
    100% {
        margin-top: 0vh;
    }
}
.area1 .deco2 ul li img {
    width: 100%;
}
.area1 .deco2 ul li:nth-child(1) {
    width: 6.7vw;
    left: 0;
    top: 34.8vw;
    animation: mainloopAnim 4.0s infinite;
    animation-delay: 0.3s;
}
.area1 .deco2 ul li:nth-child(2) {
    width: 11.9305vw;
    left: -3vw;
    top: 96vw;
    animation: mainloopAnim 4.0s infinite;
    animation-delay: 0.35s;
}
.area1 .deco2 ul li:nth-child(3) {
    width: 9.18vw;
    left: 79.18vw;
    top: 127.06vw;
    animation: mainloopAnim 4.0s infinite;
    animation-delay: 0.4s;
}
.area1 .decoafter ul li:nth-child(1), .area1 .decoafter ul li:nth-child(2), .area1 .decoafter ul li:nth-child(3), .area1 .decoafter ul li:nth-child(4) {
    left: 48vw;
    top: 70vw;
    width: 15.3vw;
    z-index: 30;
    animation: mainloopAnim 4.0s infinite;
    animation-delay: 0.45s;
}
.area1 .decoafter ul li:nth-child(1).anim {
    animation: ballrotate1 12s infinite;
    animation-timing-function: ease-in-out;
    /*    transform-origin: 53.3333vw 14.95vw 0;*/
}
.area1 .decoafter ul li:nth-child(2).anim {
    animation: ballrotate2 12s infinite;
    animation-timing-function: ease-in-out;
}
.area1 .decoafter ul li:nth-child(3).anim {
    animation: ballrotate3 12s infinite;
    animation-timing-function: ease-in-out;
}
.area1 .decoafter ul li:nth-child(4).anim {
    animation: ballrotate4 12s infinite;
    animation-timing-function: ease-in-out;
}
.area1 .decoafter ul li:nth-child(1) {
    transform: rotate(-90deg) translateY(-240%) rotate(90deg);
    transition: 0.3s;
}
.area1 .decoafter ul li:nth-child(2) {
    transform: rotate(0deg) translateY(-240%) rotate(0deg);
    transition: 0.3s;
}
.area1 .decoafter ul li:nth-child(3) {
    transform: rotate(90deg) translateY(-240%) rotate(-90deg);
    transition: 0.3s;
}
.area1 .decoafter ul li:nth-child(4) {
    transform: rotate(180deg) translateY(-240%) rotate(-180deg);
    transition: 0.3s;
}
.area1 .decoafter ul li:nth-child(5) {
    left: 30.3333vw;
    top: 53.95vw;
    width: 50vw;
    height: 50vw;
    transform: rotate(-32deg);
}
.area1 .decoafter ul li:nth-child(5) img {
    height: 100%;
}
.area1 .decoafter ul li:nth-child(6) {
    width: 50vw;
    left: 31.3333vw;
    top: 51.95vw;
    transform: rotate(-15deg);
    z-index: 30;
}
.area1 .decoafter ul li {
    filter: drop-shadow(0 0 0px rgba(102, 75, 236, 0.7));
    transition: filter 0.5s;
}
.area1 .decoafter ul li.scaleUp {
    filter: drop-shadow(0 0 24px rgba(102, 75, 236, 0.7));
    transition: filter var(--hold-time);
}
.area1 .decoafter ul li.end {
    filter: drop-shadow(0 0 24px rgba(102, 75, 236, 0.7));
    animation: end5 8.0s infinite linear;
    transition: filter 0.5s;
}
.area1 .decoafter.end2 ul li.lastvideo1 img {
    animation: end5 8.0s infinite linear;
    filter: drop-shadow(0 0 32px rgba(81, 57, 164, 0.8));
    animation-delay: 1.5s;
    transition: 1.5s;
}
.area1 .decoafter ul li.end img:nth-child(2) {
    transition: 0.4s;
    opacity: 1.0;
}
.area1 .decoafter.end2 img {
    transform: scale(1.00);
    transition: 0.4s;
    cursor: pointer;
}
.area1 .decoafter.end2:hover img {
    transform: scale(1.1);
    transition: 0.4s;
}
.area1 .decoafter.end2:hover ul li:nth-child(1) img:nth-child(2) {
    transform: rotate(-270deg) scale(1.05);
    transition: 0.4s;
}
.area1 .decoafter.end2:hover ul li:nth-child(2) img:nth-child(2) {
    transform: rotate(-180deg) scale(1.05);
    transition: 0.4s;
}
.area1 .decoafter.end2:hover ul li:nth-child(3) img:nth-child(2) {
    transform: rotate(-90deg) scale(1.05);
    transition: 0.4s;
}
.area1 .decoafter.end2:hover ul li:nth-child(4) img:nth-child(2) {
    transform: rotate(0deg) scale(1.05);
    transition: 0.4s;
}
.area1 .decoafter.end2:hover li:nth-child(5) img {
    transform: scale(1.0);
    transition: 0.4s;
}
/*
.area1 .decoafter.end2:hover li:nth-child(1) img, .area1 .decoafter.end2:hover li:nth-child(2) img, .area1 .decoafter.end2:hover li:nth-child(3) img, .area1 .decoafter.end2:hover li:nth-child(4) img, .area1 .decoafter.end2:hover li:nth-child(5) img {
    transform: scale(1.05);    
    transition: 0.4s;
}
*/
.area1 .decoafter ul li:nth-child(6) video {
    width: 100%;
}
.area1 .decoafter {
    opacity: 1.0;
    pointer-events: auto;
    transition: 0.5s;
}
.area1 .decoafter.hide, .area1 .trigger.hide {
    opacity: 0;
    pointer-events: none;
    transition: 0.5s;
}
.area1 .decoafter.pause li {
    animation-play-state: paused !important;
}
.decoafter.ballng img {
    animation: ballng 0.7s forwards;
}
@keyframes ballng {
    0% {
        margin-left: 0;
    }
    5% {
        margin-left: 1vw;
    }
    10% {
        margin-left: -0.9vw;
    }
    25% {
        margin-left: 0.6vw;
    }
    30% {
        margin-left: -0.5vw;
    }
    40% {
        margin-left: 0.4vw;
    }
    45% {
        margin-left: -0.3vw;
    }
    50% {
        margin-left: 0;
    }
}
@keyframes ballrotate1 {
    0% {
        transform: rotate(-90deg) translateY(-240%) rotate(90deg);
    }
    4% {
        transform: rotate(-90deg) translateY(-240%) rotate(90deg);
    }
    21% {
        transform: rotate(0deg) translateY(-240%) rotate(0deg);
    }
    29% {
        transform: rotate(0deg) translateY(-240%) rotate(0deg);
    }
    46% {
        transform: rotate(90deg) translateY(-240%) rotate(-90deg);
    }
    54% {
        transform: rotate(90deg) translateY(-240%) rotate(-90deg);
    }
    71% {
        transform: rotate(180deg) translateY(-240%) rotate(-180deg);
    }
    79% {
        transform: rotate(180deg) translateY(-240%) rotate(-180deg);
    }
    96% {
        transform: rotate(270deg) translateY(-240%) rotate(-270deg);
    }
    100% {
        transform: rotate(270deg) translateY(-240%) rotate(-270deg);
    }
}
@keyframes ballrotate2 {
    0% {
        transform: rotate(0deg) translateY(-240%) rotate(0deg);
    }
    4% {
        transform: rotate(0deg) translateY(-240%) rotate(0deg);
    }
    21% {
        transform: rotate(90deg) translateY(-240%) rotate(-90deg);
    }
    29% {
        transform: rotate(90deg) translateY(-240%) rotate(-90deg);
    }
    46% {
        transform: rotate(180deg) translateY(-240%) rotate(-180deg);
    }
    54% {
        transform: rotate(180deg) translateY(-240%) rotate(-180deg);
    }
    71% {
        transform: rotate(270deg) translateY(-240%) rotate(-270deg);
    }
    79% {
        transform: rotate(270deg) translateY(-240%) rotate(-270deg);
    }
    96% {
        transform: rotate(360deg) translateY(-240%) rotate(-360deg);
    }
    100% {
        transform: rotate(360deg) translateY(-240%) rotate(-360deg);
    }
}
@keyframes ballrotate3 {
    0% {
        transform: rotate(90deg) translateY(-240%) rotate(-90deg);
    }
    4% {
        transform: rotate(90deg) translateY(-240%) rotate(-90deg);
    }
    21% {
        transform: rotate(180deg) translateY(-240%) rotate(-180deg);
    }
    29% {
        transform: rotate(180deg) translateY(-240%) rotate(-180deg);
    }
    46% {
        transform: rotate(270deg) translateY(-240%) rotate(-270deg);
    }
    54% {
        transform: rotate(270deg) translateY(-240%) rotate(-270deg);
    }
    71% {
        transform: rotate(360deg) translateY(-240%) rotate(-360deg);
    }
    79% {
        transform: rotate(360deg) translateY(-240%) rotate(-360deg);
    }
    96% {
        transform: rotate(450deg) translateY(-240%) rotate(-450deg);
    }
    100% {
        transform: rotate(450deg) translateY(-240%) rotate(-450deg);
    }
}
@keyframes ballrotate4 {
    0% {
        transform: rotate(180deg) translateY(-240%) rotate(-180deg);
    }
    4% {
        transform: rotate(180deg) translateY(-240%) rotate(-180deg);
    }
    21% {
        transform: rotate(270deg) translateY(-240%) rotate(-270deg);
    }
    29% {
        transform: rotate(270deg) translateY(-240%) rotate(-270deg);
    }
    46% {
        transform: rotate(360deg) translateY(-240%) rotate(-360deg);
    }
    54% {
        transform: rotate(360deg) translateY(-240%) rotate(-360deg);
    }
    71% {
        transform: rotate(450deg) translateY(-240%) rotate(-450deg);
    }
    79% {
        transform: rotate(450deg) translateY(-240%) rotate(-450deg);
    }
    96% {
        transform: rotate(540deg) translateY(-240%) rotate(-540deg);
    }
    100% {
        transform: rotate(540deg) translateY(-240%) rotate(-540deg);
    }
}
.area1 .deco .video {
    position: absolute;
    left: 5.8vw;
    top: 18vw;
    width: 32.2vw;
    z-index: 5;
    opacity: 0.7;
    perspective: 2000px;
    transform-style: preserve-3d;
    perspective-origin: -17% 0;
}
.area1 .deco .video video {
    transform: rotateX(-13deg) rotateY(-5deg) rotateZ(26deg) skew(2deg, 2deg) scaleX(1.15);
    width: 100%;
}
.area1 .trigger li {
    position: fixed;
    /*    background: rgba(0,0,0,0.5);*/
    z-index: 50;
}
.area1 .trigger li:nth-child(2) {
    height: 24vw;
    width: 26vw;
    left: 6vw;
    top: 70vw;
}
.area1 .trigger li:nth-child(4) {
    height: 26vw;
    left: 43vw;
    top: 27vw;
    width: 24vw;
}
.area1 .trigger li:nth-child(3) {
    height: 24vw;
    width: 26vw;
    left: 80vw;
    top: 70vw;
}
.area1 .trigger li:nth-child(1) {
    height: 26vw;
    left: 43vw;
    top: 102vw;
    width: 24vw;
}
.area1 .trigger.end2 {
    pointer-events: none;
}
.fvttl h2 span {
    height: 0.9em;
    overflow: hidden;
    display: flex;
}

.fvttl h2 small{
    display:block;
    margin-top: 1.0em;
}
.fvttl h2 span:nth-child(1) {}
.fvttl h2 span:nth-child(2) {
    margin-left: 3.88888vw;
}
.fvttl h2 span:nth-child(3) {
    margin-left: 7.76666vw;
}
.fvttl h2 {
    font-size: 3.1rem;
    position: absolute;
    left: 3.2vw;
    bottom: 12vw;
    color: #cccdc7;
    mix-blend-mode: difference;
    letter-spacing: -0.03em;
    line-height: 0.9;
    font-weight: 600;
    z-index: 50;
    pointer-events: none;
}
.fvttl.keyon h2 {
    bottom: 13.2vw;
}
.fvttl span.sub {
    font-size: 1.07692rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
}
.fvtxt {
    font-size: 1.0rem;
    position: relative;
    left: 12.5vw;
    top: 98vh;
    z-index: 50;
    width: 80vw;
    pointer-events: none;
}
.area1margin.act {
    height: 100vh;
}
.keybnr {
    position: relative;
    left: 0;
    top: 110vh;
    font-size: 1.0rem;
    text-align: left;
    background: rgba(255, 255, 255, 0.65);
    padding: 4.8vw 6.4vw 4.8vw 12.8vw;
    filter: dropshadow(0, 0, 16px, #d0d0d0);
    border-radius: 0 4.2666vw 4.2666vw 0;
    cursor: pointer;
    transition: 0.4s;
    width: 61.33333vw;
    font-weight: 500;
    backdrop-filter: blur(8px);
    z-index: 100;
}
.keybnr:hover {
    opacity: 0.6;
    transition: 0.4s;
}
.keybnr p {
    display: flex;
    line-height: 1.35;
    letter-spacing: 0.06em;
    align-items: center;
    gap: 6.4vw;
    font-weight: 500;
}
.keybnr img {
    width: 6.6666vw;
}
.area2 {
    position: relative;
}
.area2 .inner, .area3, .area6 .inner, .area7 .inner {
    position: relative;
    width: var(--content-width);
    z-index: 100;
}
.area2 .inner {
    position: relative;
    width: var(--content-width);
    margin: 75vw auto 0;
}
.area2 .js-rotate {
    transform-origin: left bottom 0;
    display: inline-block;
}
.area2 h2 {
    font-size: 1.846rem;
    line-height: 1.4;
    font-weight: 600;
}
.area2 h2 p {
    margin-top: 0.25rem;
    text-indent: -0.75rem;
}
.area2 h2 p span {
    font-weight: 300;
}
.area2 h2 p small {
    font-size: 1.384rem;
}
.area2 h2 span.sub {
    font-size: 0.923rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    position: relative;
}
.area2 h2 span.sub:after {
    content: "";
    position: absolute;
    left: calc(var(--content-space2half) - 0.5vw);
    top: 0.7em;
    background: var(--dark-color);
    width: calc(var(--content-spacehalf) + 1vw);
    height: 1px;
    margin-left: -1.5vw;
}
.area2 figure {
    text-align: center;
    margin-top: 7.1vw;
}
.area5 .right figure, .area6 .right figure {
    margin-top: 4.4444vw;
}
.area2 figure img {
    width: 100%;
}
.area2 .pointList {
    margin-top: 10.6666vw;
}
.area2 .pointList > div {
    width: 100%;
    margin-top: 10.66666vw;
}
.area2 .pointList > div h3 p {
    width: 92%;
}
.area2 .pointList > div > p {
    margin-top: 0.5rem;
}
.area2 .inner h3 span {
    display: block;
    background: var(--white-color);
}
.area2 h3 img, .area2 h3 span small {
    height: 1.05rem;
    /*    margin-top: 0.35rem;*/
    margin-right: 0.2rem;
    filter: drop-shadow(0 0 12px rgba(81, 57, 164, 0));
    animation: rotatenum 4.0s infinite;
    transform-origin: left bottom 0;
}
.area2 .pointList > div:nth-child(2) h3 img, .area2 .pointList > div:nth-child(2) h3 small {
    animation-delay: 0.1s;
}
.area2 .pointList > div:nth-child(3) h3 img, .area2 .pointList > div:nth-child(3) h3 small {
    animation-delay: 0.2s;
}
.area2 .pointList > div:nth-child(4) h3 img, .area2 .pointList > div:nth-child(4) h3 small {
    animation-delay: 0.05s;
}
.area2 .pointList > div:nth-child(5) h3 img, .area2 .pointList > div:nth-child(5) h3 small {
    animation-delay: 0.15s;
}
.area2 .pointList > div:nth-child(6) h3 img, .area2 .pointList > div:nth-child(6) h3 small {
    animation-delay: 0.25s;
}
.area2 h3 img {
    margin-top: 0.25rem;
    pointer-events: none;
}
.area2 h3 img.key3 {
    position: absolute;
    left: -0.5vw;
    top: 0;
    opacity: 0;
    transition: 0.5s;
    transform: scale(1.0);
    filter: drop-shadow(0 0 12px rgba(81, 57, 164, 1.0));
}
.area2 h3 img.key3before {
    transform: rotateY(0deg);
}
.area2 h3 img.key3before.scaleUp {
    transform-origin: left bottom 0;
    display: inline-block;
    animation: key3scaleup 2.0s forwards;
}
@keyframes key3scaleup {
    0% {
        transform: rotateY(-1080deg);
    }
    85% {
        transform: rotateY(0);
    }
}
@keyframes rotatenum {
    0% {
        transform: rotateY(0);
    }
    25% {
        transform: rotateY(360deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}
.area2 h3 img.key3.end {
    opacity: 1.0;
    animation: end 2.0s infinite, keyFix 0.7s forwards;
    transition: 0.5s;
    transform: scale(1.00);
    cursor: pointer;
}
@keyframes keyFix {
    0% {
        transform: scale(5.0);
    }
    100% {
        transform: scale(1.0);
    }
}
@keyframes keyFix2 {
    0% {
        transform: scale(2);
    }
    100% {
        transform: scale(1.0);
    }
}
.area2 h3 img:nth-child(1).end {
    opacity: 0;
    transition: 0.4s;
}
.area2 h3 img.key3.end svg {
    fill: #f5f5fa;
}
/*
.area2 h3 img.key3.end:hover {
    transform: scale(1.5);
    transition: 0.3s;
}
*/
.area2 h3 {
    font-size: 1.23rem;
    font-weight: 600;
    display: flex;
    line-height: 1.4;
    gap: 4px;
    position: relative;
    -webkit-user-select: none; /* Chrome or Safari */
    -moz-user-select: none; /* FireFox */
    -ms-user-select: none; /* IE */
    -o-user-select: none; /* Opera */
    user-select: none;
}
.area3, .area4, .area5, .area6 .inner, .area7 .inner {
    margin: 0 auto 0;
}
.area3 h2 {
    font-size: 1.846rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 2.77777vw;
}
.area3 h2 span {
    font-size: 1.00rem;
    font-weight: 600;
    display: block;
    margin-bottom: 0.35rem;
}
.area3 dl {
    margin-top: 17.06666vw;
    margin-left: 10.6666vw;
}
.area3 h2 + dl {
    margin-top: 10.6666vw;
}
.area3 dl.reverse {
    flex-direction: row-reverse;
    margin-left: 0;
}
.area3 dl dt {
    width: 100%;
}

.area3 dl.reverse dt{
    width: 87.5%;
}
.area3 .reverse dl dt {
    width: 87.5%;
}
.area3 dl dt img {
    border-radius: 4.26666vw;
    width: 100%;
}
.area3 dl dd {
    width: 100%;
}
.area3 dl dd h3 {
    font-size: 2.4615rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    margin-top: 4.26666vw;
}
.area3 dl dd h3 span {
    display: block;
    font-size: 1.0rem;
}
.area3 dl dd p {
    margin-top: 3.2vw;
    width: 100%;
}
.area3 dl.reverse dd p, .area3 dl.reverse dd h3 {
    width: 87.5%;
}
.area3 .linkBlock {
    background: #fcfcff;
    width: 100vw;
    padding: 14vw 6.6666vw;
    margin-left: -6.66666vw;
    margin-top: 12.8vw;
    text-align: center;
    font-weight: 600;
}
.area3 .linkBlock a {
    background: var(--dark-color);
    color: var(--white-color);
    height: 12.8vw;
    width: 100%;
    border-radius: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.0rem;
    margin-top: 6.4vw;
    font-weight: 500;
}
.area4 {
    background: var(--dark-color);
    width: 100vw;
    color: var(--white-color);
    padding-top: var(--content-space2);
    padding-bottom: var(--content-space);
    min-height: 100vh;
}
.area4.act {
    background: var(--white-color);
}
.area4 .inner {
    width: 68.19vw;
    margin: 0 auto;
    padding: var(--content-space) 0;
    position: relative;
}
.area4 .inner .work {
    width: 100%;
    position: relative;
    margin-top: 5.5555vw;
}
.area4 .inner .workInner figure {
    position: relative;
    transition: 1.2s;
}
.area4 .inner .workInner2 figure:after {
    content: "";
    position: absolute;
    width: 9vw;
    height: 9vw;
    border-radius: 4vw;
    left: -1vw;
    top: 1vw;
    margin-top: -1.9444vw;
    background: #302c3d;
    opacity: 0.65;
    transition: 0.5s;
}
.area4 .inner .workInner2 figure.last:after {
    opacity: 0;
    transition: 0.5s;
}
.area4 .inner .workInner2 figure.scaleUp:after {
    background: var(--white-color);
    opacity: 1.0;
    transition: var(--hold-time);
}
.area4 .inner .workInner2 figure.end:after {
    background: var(--white-color);
    opacity: 1.0;
}
.area4 .inner .workInner2 figure img {
    width: 100%;
    height: 100%;
    border-radius: 4vw;
    object-fit: cover;
}
.area4 h2 {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.4;
    /*    margin-bottom: 2.77777vw;*/
    text-align: center;
    padding-top: 10vw;
    margin-bottom: 16vw;
}
.area4 h2 span {
    font-size: 1.25rem;
    font-weight: 500;
    display: block;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}
.area4 .work .workInner.active figure {
    width: 100%;
    height: 87.8vw;
    transform: scale(1.0) rotate(-5deg);
    opacity: 1.0;
    margin-top: 0;
    margin-left: -1vw;
}
.area4 .work .workInner figure, .area4 .work .workInner2 figure {
    border-radius: 6.4vw;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: 0.6s;
}
.area4 .work .workInner2 figure {
    width: 7.6vw;
    height: 7.6vw;
    border-radius: 32vw;
    overflow: hidden;
    transition: 0.4s;
    transform: scale(1.0);
    opacity: 1.0;
    position: absolute;
    right: -14vw;
    top: 43vw;
}
.area4 .work .workInner2 figure img {
    pointer-events: none;
}
.area4 .work .workInner2.change figure {
    transform: scale(0.5);
    opacity: 0;
    transition: 0.4s;
}
.area4 .workInner.active.change figure {
    transform: scale(0.9) rotate(0deg);
    margin-top: 5.1111vw;
    opacity: 0.0;
    transition: 0.4s;
}
.area4 .work .workInner2 figure.end {
    animation: end2 2.0s infinite;
    filter: drop-shadow(0 0 4px rgba(106, 214, 47, 0.8));
}
.area4 .work .workInner figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.area4 .inner .workInner > div {
    width: 35.41vw;
    opacity: 0;
    transition: 0.4s;
}
.area4 .inner .workInner.active > div {
    width: 100%;
    transform: scale(1.0);
    opacity: 1.0;
    transition: 0.6s;
    margin-top: 12.8vw;
}
.area4 .work .workInner.active.change > div {
    opacity: 0;
    margin-top: 3.2vw;
    transition: 0.4s;
}
.area4 .work > .workInner > div span {
    font-size: 1.0rem;
    opacity: 0.5;
}
.area4 .workInner > div strong {
    font-size: 1.2307rem;
    font-weight: 600;
    display: block;
    line-height: 1.65;
}
.area4 .workInner > div > p {
    margin-top: 1.33333vw;
}
.area4 .workInner > div > a {
    color: var(--color-white);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.0;
    letter-spacing: 0.02em;
    margin-top: 1.5rem;
    position: relative;
}
.area4 .workInner > div > a:before {
    content: "";
    background: var(--white-color);
    width: 1.25vw;
    height: 1.25vw;
    border-radius: 2vw;
    transition: 0.2s;
}
.area4 .workInner > div > a:hover:before {
    transform: scale(1.35);
    transition: 0.2s;
}
.area4 .workInner > div > a span:nth-child(1) {
    opacity: 1.0;
    transition: 0.4s;
}
.area4 .workInner > div > a span:nth-child(2) {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: 0.4s;
}
.area4 .workInner > div > a.last span:nth-child(1) {
    opacity: 0;
    transition: 0.4s;
}
.area4 .workInner > div > a.last span:nth-child(2) {
    position: absolute;
    left: 2.0vw;
    top: 0;
    opacity: 1.0;
    transition: 0.4s;
}
.area4 .workInner.active > div > a img {
    width: 0.5555vw;
}
.area4 p.nextBtn {
    position: absolute;
    left: 71.7vw;
    top: 45vw;
    z-index: 20;
    margin-top: -1.66666vw;
    height: 6.4vw;
    transform: scale(1.0);
    transition: 0.4s;
    cursor: pointer;
}
.area4 p.nextBtn:hover {
    transform: scale(1.1);
    transition: 0.4s;
}
.area4 p.nextBtn img {
    height: 100%;
    pointer-events: none;
}
.area4 p.nextBtn.end {
    animation: end2 2.0s infinite;
    filter: drop-shadow(0 0 4px rgba(106, 214, 47, 0.8));
}
.area4 p.backBtn {
    position: absolute;
    left: -11.7vw;
    top: 45vw;
    z-index: 20;
    margin-top: -1.66666vw;
    height: 6.4vw;
    transform: scale(1.0) rotate(-180deg);
    transition: 0.4s;
    cursor: pointer;
}
.area4 p.backBtn:hover {
    transform: scale(1.1) rotate(-180deg);
    transition: 0.4s;
}
.area4 p.backBtn img {
    height: 100%;
}
.area4 p.backBtn.end {
    animation: end2 2.0s infinite;
    filter: drop-shadow(0 0 4px rgba(106, 214, 47, 0.8));
}
.area4 .keyBtn {
    position: absolute;
    left: 68.7vw;
    top: 44vw;
    z-index: 20;
    width: 14.5vw;
    margin-top: -1.66666vw;
    height: 8.3333vw;
    pointer-events: none;
    cursor: pointer;
}
.area4 .keyBtn img {
    width: 10.5vw;
    position: absolute;
    left: 3.2vw;
    top: 0.5vw;
    opacity: 0;
}
.area4 .keyBtn.end {
    pointer-events: auto;
    opacity: 1.0;
    transition: 0.2s;
}
.area4 .keyBtn.end img {
    animation: end2 2.0s infinite, keyFix 0.7s forwards;
}
.area5 {
    position: relative;
    margin-top: var(--content-spacebig);
    width: 100vw;
    padding-top: var(--content-space);
    padding-bottom: var(--content-space);
    overflow-x: hidden;
}
.area5 h2 {
    font-size: 1.84615rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 12.8vw;
}
.area5 h2 span {
    font-size: 1.00rem;
    font-weight: 600;
    display: block;
    letter-spacing: 0.02em;
    position: relative;
    margin-bottom: 0.5rem;
}
.area5 h2 span:after {
    content: "";
    position: absolute;
    left: calc(var(--content-space2half) - 0.5vw);
    top: 0.7em;
    background: var(--dark-color);
    width: calc(var(--content-spacehalf) + 1vw);
    height: 1px;
    margin-left: -1.5vw;
}
.area5 .inner {
    position: relative;
    z-index: 10;
    pointer-events: none;
}
.area5 .inner > ul {
    width: 100%;
    pointer-events: none;
}
.area5 .inner > ul li {
    display: flex;
    gap: 1.6666vw;
    font-size: 1.23rem;
    padding-bottom: 8.53333vw;
    margin-bottom: 8.53333vw;
    pointer-events: none;
    -webkit-user-select: none; /* Chrome or Safari */
    -moz-user-select: none; /* FireFox */
    -ms-user-select: none; /* IE */
    -o-user-select: none; /* Opera */
    user-select: none;
}
.area5 .inner > ul li {
    border-bottom: 1px solid #dbdbeb;
}
.area5 .inner {
    width: var(--content-width);
    margin: 0 auto;
}
.area5 .decoration li {
    position: absolute;
}
.area5 .decoration li img {
    position: relative;
    width: 100%;
    pointer-events: none;
}
.area5 .decoration li.end img {
    pointer-events: auto;
}
.area5 .decoration li {
    filter: drop-shadow(0 0 0 rgba(106, 214, 47, 0));
    transition: filter 0.5s;
}
.area5 .decoration li.scaleUp {
    filter: drop-shadow(0 0 24px rgba(106, 214, 47, 0.7));
    transition: var(--hold-time);
}
.area5 .decoration li.end {
    animation-delay: 1.0s;
    animation: end3 2.0s infinite linear, keyFix2 0.7s forwards;
    /*    transform: scale(1.0);*/
    transition: 0.4s;
    cursor: pointer;
}
.area5 .decoration li:nth-child(1) {
    position: absolute;
    right: 0vw;
    top: 40vw;
    width: 30vw;
    height: 34vw;
}
.area5 .decoration li:nth-child(1) img:nth-child(1) {
    position: absolute;
    width: 21.33333vw;
    right: 6.5972222vw;
    top: 22.5vw;
    z-index: 10;
}
.area5 .decoration li:nth-child(1) p.tap {
    width: 30vw;
    height: 25vw;
    position: absolute;
    right: 0;
    top: 10vw;
    pointer-events: none;
}
.area5 .decoration li:nth-child(1).end p.tap {
    pointer-events: auto;
}
.area5 .decoration li:nth-child(2) {
    width: 14.93333vw;
    right: -5.833333vw;
    top: 190vw;
}
.area5 .decoration li:nth-child(1) img:nth-child(2) {
    position: absolute;
    width: 22.4vw;
    right: 0;
    top: 30.38vw;
}
.area5 .decoration li:nth-child(4) {
    width: 17.8666vw;
    left: 1.027777vw;
    top: 96vw;
}
.area5 .decoration li:nth-child(5) {
    width: 16.25vw;
    left: -5vw;
    top: 32.2777vw;
}
.area5 .decoration li:nth-child(6) {
    width: 20.5333vw;
    right: 1.84444vw;
    top: 233vw;
}
.area6 {
    width: 100vw;
}
.area5.act + .area6 .inner {
    padding-top: var(--content-space);
}
.area6 h2 {
    font-size: 1.846rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6.4vw;
    position: relative;
}
.area6 h2 span {
    font-size: 1.00rem;
    font-weight: 600;
    display: block;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
    position: relative;
}
.area6 h2 span:after {
    content: "";
    position: absolute;
    left: calc(var(--content-space2half) - 0.5vw);
    top: 0.7em;
    background: var(--dark-color);
    width: calc(var(--content-spacehalf) + 1vw);
    height: 1px;
    margin-left: -1.5vw;
}
.area6 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4.2666vw;
}
.area6 ul li {
    width: 41vw;
}
.area6 ul li img {
    width: 100%;
    border-radius: 2.1333vw;
}
.area7 h2 {
    font-size: 1.846rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 2.77777vw;
}
.area7 h2 span {
    font-size: 1.00rem;
    font-weight: 600;
    display: block;
    letter-spacing: 0.02em;
    position: relative;
    margin-bottom: 0.5rem;
}
.area7 h2 span:after {
    content: "";
    position: absolute;
    left: calc(var(--content-space2half) - 0.5vw);
    top: 0.7em;
    background: var(--dark-color);
    width: calc(var(--content-spacehalf) + 1vw);
    height: 1px;
    margin-left: -1.5vw;
}
.area7 ul {
    width: 100%;
    margin-top: 6.4vw;
}
.area7 ul li:not(:last-child) {
    border-bottom: 1px solid #dbdbeb;
}

.area7.act ul li:not(:last-child) {
    border-bottom: 1px solid rgba(255,255,255,0.3);
}
.area7 ul li {
    gap: 2.22222vw;
    padding: var(--v32-px) 0;
}
.area7.act ul li a{
    color: #fff;
}
.area7 ul li strong {
    font-weight: 600;
}
.area7 ul li .date {
    font-weight: 600;
}
.keyCarten {    
    position: fixed;
    left: 0;
    top: 0vh;
    background: #fff;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: 1.0s;
}
.keyCarten.act {
    top: 0;
    opacity: 1.0;
    transition: 1.0s;
}
.keyList ul {
    position: fixed;
    left: 2.777vw;
    bottom: 0;
    display: flex;
    z-index: 500;
}
.keyList.desc ul {
    z-index: 1050;
}
.keyList ul li {
    position: relative;
    width: 7.8vw;
    cursor: pointer;
    display: none;
}
.keyList ul li.key5 img:nth-child(2){
        width: 6vw;
    margin-top: 1vw;
    margin-left: 0.5vw;
    }
.keyList ul li.view {
    display: block;
}
.keyList ul li img {
    width: 100%;
    transform: scale(1.0);
    transition: 0.3s;
}
.keyList ul li:hover img {
    transition: 0.3s;
    transform: scale(1.05);
}
.keyList ul li img:nth-child(1) {
    opacity: 1.0;
}
.keyList ul li img:nth-child(2) {
    position: absolute;
    left: 0;
    top: 32%;
    opacity: 0;
}
.keyList ul li.active img:nth-child(2) {
    opacity: 1.0;
    transition: 0.5s;
}
.keyList ul li.active img:nth-child(1) {
    opacity: 0;
    transition: 0.5s;
}
.hourglass {
    position: fixed;
    right: 7.2vw;
    bottom: 11.2vw;
    opacity: 0.0;
    z-index: 100;
    transition: 0.4s;
}
.hourglass.view {
    bottom: 11.2vw;
    opacity: 0.7;
    transition: 0.4s;
}
.hourglass li {
    position: absolute;
    overflow-y: hidden;
    z-index: 100;
    isolation: isolate;
    transform: translateZ(0);
}
.hourglass li:nth-child(1) {
    left: 0;
    top: 0;
    width: 4.6875vw;
}
.hourglass li:nth-child(2) {
    left: 0.8vw;
    top: 0.7vw;
    width: 3.325vw;
    height: 3.325vw;
    border-radius: 3.325vw;
    overflow: auto !important;
}
.hourglass li:nth-child(2) span {
    background: #444;
    width: 200%;
    height: 4vw;
    position: absolute;
    left: -1vw;
    z-index: 101;
}
.hourglass li:nth-child(3) {
    left: 0.7vw;
    top: 5.9vw;
    width: 3.2975vw;
    height: 1.875vw;
    /*    background: #ddd;*/
    border-radius: 0 0 5vw 5vw;
}
.hourglass li:nth-child(4) {
    left: 0.5vw;
    top: 0.625vw;
    width: 3.75vw;
    opacity: 0;
    transition: 0.5s;
}
.hourglass li:nth-child(4) img {
    width: 3.75vw;
    transform: scaleX(0.9);
}
.hourglass li img {
    -webkit-user-select: none; /* Chrome or Safari */
    -moz-user-select: none; /* FireFox */
    -ms-user-select: none; /* IE */
    -o-user-select: none; /* Opera */
    user-select: none;
    pointer-events: none;
}
.hourglass li:nth-child(4).scaleUp {
    opacity: 1.0;
    transition: var(--hold-time);
}
.hourglass li:nth-child(4).end {
    opacity: 1.0;
    transition: opacity 0.5s;
    transition: transform 0.4s;
    animation: end4 2.0s infinite, keyFix 0.7s forwards;
    cursor: pointer;
    -webkit-user-select: auto; /* Chrome or Safari */
    -moz-user-select: auto; /* FireFox */
    -ms-user-select: auto; /* IE */
    -o-user-select: auto; /* Opera */
    user-select: auto;
}
.hourglass li:nth-child(3).end {
    opacity: 0;
    transition: 0.5s;
}
.hourglass li:nth-child(2) img {
    position: absolute;
    left: 0;
    top: 0;
}
.hourglass li:nth-child(3) img {
    padding-top: 1.75vw;
    position: absolute;
    left: 0;
    top: 0;
}
.hourglass li:nth-child(3) img {}
.hourglass li img {
    width: 100%;
}
.hourglass.hide{
    opacity:0;
    transition: 0.4s;
}

.innerBack {
    position: absolute;
    left: 0;
    top: 0;
    margin-top: var(--content-space2);
    opacity: 0;
    pointer-events: none;
    display: none;
}
.act .innerBack {
    pointer-events: auto;
}
.area2 .innerBack {
    /*    margin-top: 0;*/
    margin-top: var(--content-space);
    margin-bottom: var(--content-space2);
}
.area6 .innerBack {
    margin-top: 0;
}
.act .innerBack {
    position: relative;
    z-index: 100;
    opacity: 1.0;
    display: block;
}
.innerBack img {
    max-width: 100%;
}
.area1.act .inner, .area2.act .inner, .area3.act, .area4.act .inner, .area5.act .inner {
    position: absolute;
    z-index: -1;
    opacity: 0;
    display: none;
}
.area1 .innerBack {
    margin-top: 0;
}
.area7.act {
    margin-top: 0;
}
.circlewrap {
    position: fixed;
    left: calc(50vw - 55px) !important;
    top: calc(50vh - 55px) !important;
    pointer-events: none;
    z-index: 8000;
    transition: 0.4s;
}
.circlewrap2 {
    position: fixed;
    left: calc(50vw - 55px) !important;
    top: calc(50vh - 55px) !important;
    pointer-events: none;
    z-index: 8000;
    transition: 0.4s;
}
.circlewrap.scaleUp, .circlewrap2.scaleUp {
    transform: scale(1.0) rotate(0);
    transition: 0.5s;
}
.circlewrap.scaleUp, .circlewrap2.scaleUp {
    transform: scale(1.5) rotate(90deg);
    transition: var(--hold-time);
}
.circlewrap.off, .circlewrap2.off {
    display: none;
}
.keymodal {
    position: fixed;
    left: 0;
    top: 0;
    opacity: .0;
    transition: 0.7s;
    pointer-events: none;
    z-index: 5006;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(6px);
    overflow: scroll;
}
.keymodal.on {
    transition: 0.7s;
    opacity: 1.0;
    pointer-events: auto;
}
.keymodal .modalbg {
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(245, 245, 250, 0.95);
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(6px)
}
.keymodal .close {
    position: absolute;
    right: 10.6666vw;
    top: 12.8vw;
    cursor: pointer;
    opacity: 1.0;
    transition: 0.4s;
}
.keymodal .close:hover {
    opacity: 0.7;
    transition: 0.4s;
}
.keymodal .close img {
    width: 5.3333vw;
}
.keymodal .modalinner {
    position: relative;
    width: var(--content-width);
    margin: 0 auto;
    height: 100vh;
    overflow-y: scroll;
    padding-bottom: 32vw;
}
.keymodal .modallinner::-webkit-scrollbar {
    display: none;
}
.keymodal .modalinner .flex {
    display: flex;
    padding-top: 32vw;
    gap: 3.5vw;
}
.keymodal .modalinner .sample {
    width: 100%;
    background: rgba(252, 252, 255, 0.65);
    padding: 6.4vw;
    border-radius: 4.266666vw;
    box-shadow: 0 0 2.2222222vw rgb(208 208 208 / 25%);
    margin-top: 8.53333vw;
}
.keymodal .modalinner .sample p {
    width: 100%;
    margin-top: 6.4vw;
}
.keymodal .modalinner .sample small {
    font-size: 0.75rem;
    display: block;
}
.keymodal .modalinner .sample img {
    width: 43.73333vw;
}
.keymodal .modalinner .sample figure {
    text-align: center;
}
.keymodal .modalinner img {
    width: 48vw;
}
.keymodal .modalinner .left h2 {
    font-size: 1.846rem;
    font-weight: 600;
    line-height: 1.35;
}
.keymodal .modalinner .left h2 span {
    font-size: 1.0rem;
    letter-spacing: 0.02em;
    display: block;
    margin-bottom: 0.35rem;
}
.keymodal .modalinner .left > p {
    margin-top: 88vw;
}
.keymodal .modalinner .image {
    width: 67vw;
    position: relative;
    margin-top: 6.4vw;
}
.keymodal .modalinner .image > div {
    position: absolute;
    left: 7.5vw;
    top: 0;
    opacity: 0;
    animation: keymodalimg 8.0s infinite;
    width: 100%;
}
.keymodal .modalinner .image > div:nth-child(2) {
    animation-delay: 4.0s;
}
.keymodal .modalinner .image img {
    max-width: 100%;
}
@keyframes keymodalimg{
    0%{opacity:0; transform:scale(0.95);}
    10%{opacity:1.0;transform:scale(1.0);}
    50%{opacity:1.0;transform:scale(1.0);}
    60%{opacity:0;transform:scale(0.95);}
    100%{opacity:0;transform:scale(0.95);}
}
.keymodal .modalinner .image p {
    font-size: 0.75rem;
    line-height: 1.35;
    margin-top: 1.0rem;
}
.keymodal .modalinner .image {
    text-align: center;
}
.keydesc {
    position: fixed;
    left: 0;
    top: 0;
    opacity: 0;
    transition: 0.7s;
    pointer-events: none;
    z-index: 1005;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.keydesc.on {
    transition: 0.7s;
    opacity: 1.0;
    pointer-events: auto;
}
.keydesc .modalbg {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(51, 50, 56, 0.8);
    width: 100vw;
    height: 100vh;
}
.keydesc p.txt {
    position: absolute;
    left: 3vw;
    bottom: 16vw;
    font-size: 0.875rem;
    background: var(--white-color);
    width: 64vw;
    padding: 4.26666vw;
    border-radius: 2.13333vw;
}
.keydesc .close {
    position: absolute;
    right: -4.8vw;
    top: -4.8vw;
    cursor: pointer;
}
.keydesc .close img {
    width: 9.66666vw;
}
.charaserif li {
    position: fixed;
    right: 6.9444vw;
    bottom: 0;
    z-index: 1000;
    opacity: 0;
    transition: 0.5s;
    transform: scale(0.9);
    pointer-events: none;
}
.charaserif li.on {
    pointer-events: auto;
}
.charaserif li img {
    width: 42vw;
    pointer-events: none;
    position: relative;
    z-index: 0;
}
.charaserif li.on {
    opacity: 1.0;
    transition: 0.5s;
    transform: scale(1.0);
}
.charaserif li p {
    position: absolute;
    right: 91vw;
    bottom: 1vw;
    font-size: 0.8rem;
    width: 0;
}
.charaserif li p span.txt {
    display: block;
    background: var(--gimic1black-color);
    color: var(--gimicwhite-color);
    width: 67vw;
    padding: 4vw 5.4vw;
    border-radius: 2.111vw;
}
.charaserif li p span.txt {
    pointer-events: none;
    transform: scale(1.0);
    opacity: 1.0;
    transition: 0.7s;
    margin-right: 0;
}
.charaserif li p span.fukidashiopen {
    position: absolute;
    right: -71vw;
    bottom: 17vw;
    opacity: 0;
    transition: 0.7s;
    transform: scale(1.5);
}
.charaserif.close li p span.fukidashiopen {
    position: absolute;
    opacity: 1.0;
    transition: 0.7s;
    transform: scale(1.0);
}
.charaserif li p span.fukidashiopen img {
    width: 10vw;
}
/*
.charaserif li p:after {
    content: "";
    position: absolute;
    right: -4.3vw;
    top: 5vw;
    border-left: 3vw var(--gimic1black-color) solid;
    border-bottom: 3vw transparent solid;
    border-right: 1.5vw transparent solid;
    border-top: 0vw transparent solid;
    transition: 1.0s;
}
*/
.charaserif.close li p:after {
    opacity: 0;
    transition: 0.2s;
}
.charaserif li:nth-child(3) p:after {
    top: 12vw;
}
.charaserif li:nth-child(5) p:after {
    top: 12vw;
}
.charaserif span.fukidashiclose {
    position: absolute;
    right: -64.25vw;
    top: -4.5vw;
    cursor: pointer;
    opacity: 1.0;
    transition: 0.7s;
    pointer-events: none;
}
.charaserif li.on span.fukidashiclose {
    pointer-events: auto;
}
.charaserif .fukidashiclose img {
    width: 7.5333vw;
}
.charaserif.close li p:after {
    opacity: 0;
    transition: 0.4s;
}
.charaserif.close span.fukidashiclose {
    opacity: 0;
    transition: 0.4s;
    pointer-events: none;
}
.charaserif.close li p span.txt {
    border-radius: 20vw;
    transform: scale(0.5);
    opacity: 0;
    transition: 0.4s;
    margin-right: -20vw;
}
/* end animation */
@keyframes end {
    0% {
        opacity: 1.0;
        filter: drop-shadow(0 0 4px rgba(81, 57, 164, 0.8));
    }
    50% {
        opacity: 0.7;
        filter: drop-shadow(0 0 12px rgba(81, 57, 164, 1.0));
    }
    100% {
        opacity: 1.0;
        filter: drop-shadow(0 0 4px rgba(81, 57, 164, 0.8));
    }
}
@keyframes end2 {
    0% {
        opacity: 1.0;
        filter: drop-shadow(0 0 4px rgba(242, 186, 17, 0.8));
    }
    50% {
        opacity: 1.0;
        filter: drop-shadow(0 0 16px rgba(242, 186, 17, 1.0));
    }
    100% {
        opacity: 1.0;
        filter: drop-shadow(0 0 4px rgba(242, 186, 17, 0.8));
    }
}
@keyframes end3 {
    0% {
        opacity: 1.0;
        filter: drop-shadow(0 0 12px rgba(106, 214, 47, 0.7));
    }
    50% {
        opacity: 0.7;
        filter: drop-shadow(0 0 64px rgba(106, 214, 47, 1.0));
    }
    100% {
        opacity: 1.0;
        filter: drop-shadow(0 0 12px rgba(106, 214, 47, 0.7));
    }
}
@keyframes end4 {
    0% {
        opacity: 1.0;
        filter: drop-shadow(0 0 2px rgba(224, 50, 95, 0.7));
    }
    50% {
        opacity: 1.0;
        filter: drop-shadow(0 0 12px rgba(224, 50, 95, 1.0));
    }
    100% {
        opacity: 1.0;
        filter: drop-shadow(0 0 2px rgba(224, 50, 95, 0.7));
    }
}
@keyframes end5 {
    0% {
        opacity: 1.0;
        filter: drop-shadow(0 0 32px rgba(81, 57, 164, 1.0));
    }
    25% {
        opacity: 1.0;
        filter: drop-shadow(0 0 32px rgba(242, 186, 17, 1.0));
    }
    50% {
        opacity: 1.0;
        filter: drop-shadow(0 0 32px rgba(106, 214, 47, 1.0));
    }
    75% {
        opacity: 1.0;
        filter: drop-shadow(0 0 32px rgba(224, 50, 95, 1.0));
    }
    100% {
        opacity: 1.0;
        filter: drop-shadow(0 0 32px rgba(81, 57, 164, 1.0));
    }
}
.opening .logo {
    margin-top: 12.8vw;
    margin-left: -21.8vw;
    position: fixed;
    left: 50vw;
    width: 40vw;
}
.opening .logo img {
    width: 100%;
}
.opening {
    background: url("/img/index/bg.png") var(--white-color);
    background-size: cover;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    z-index: 6000;
    font-size: 3.466666vw;
}
.opening .deco .bgtxt {
    width: 93.75vw;
    position: fixed;
    top: 50vh;
    margin-top: -5.1vw;
    text-align: center;
    left: 3.125vw;
}
.opening .deco img {
    width: 100%;
}
.opening.none {
    opacity: 0;
    pointer-events: none;
    transition: 1.5s;
    transition-delay: 0.5s;
}
.opening.none2 {
    opacity: 0;
    transition: 0.2s;
    pointer-events: none;
}
.opening .inner {
    width: var(--content-width);
    padding-bottom: 15vh;
    position: relative;
    margin: 0 auto;
    /*    margin-left: 10vw;*/
    z-index: 500;
}
.opening .inner {
    padding-top: 75vh;
    text-align: left;
}
.opening .inner p.before {
    opacity: 0;
}
.opening .inner div.after, .opening .inner div.before {
    width: var(--content-width);
}
.opening .inner div.after p, .opening .inner div.before p {
    margin-top: 2.5rem;
    width: max-content;
    margin: 3.88vw 0 25vw;
}
@media screen and (min-width:768px) and (max-width:960px) {
    .opening .inner div.after p, .opening .inner div.before p {
        margin: 3.65vw auto;
    }
}
@media screen and (min-width:961px) and (max-width:1100px) {
    .opening .inner div.after p, .opening .inner div.before p {
        margin: 3.78vw auto;
    }
}
@media screen and (min-width:1101px) and (max-width:1200px) {
    .opening .inner div.after p, .opening .inner div.before p {
        margin: 3.85vw auto;
    }
}
.opening .inner .opwrap {
    position: relative;
}
/* オープニングアナグラム */
.opening .after span, .opening .before span {
    opacity: 1.0;
    transition: 0.6s;
}
.opening .opwrap .char span {
    position: absolute;
}
.opening .opwrap .char {
    opacity: 0;
    transition: 0.6s;
}
.opening.move .after span, .opening.move .before span {
    opacity: 0;
    transition: opacity 0.6s !important;
}
.opening.move .opwrap .char {
    opacity: 1.0;
    transition: opacity 0.6s;
}
.opening .act .opwrap .char span {
    position: absolute;
    line-height: 1.0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .opening .opwrap .char span:nth-child(1) {
        font-size: 1.846em;
        left: 0vw;
        top: -2vw;
        font-weight: 600;
    }
    .opening .opwrap .char span:nth-child(2) {
        font-size: 1.846em;
        left: 0;
        top: 6.5vw;
        font-weight: 600;
    }
    .opening .opwrap .char span:nth-child(3) {
        font-size: 1.846em;
        left: 6.85vw;
        top: 6.5vw;
        font-weight: 600;
    }
    .opening .opwrap .char span:nth-child(4) {
        font-size: 1em;
        left: 0vw;
        top: 21.1vw;
    }
    .opening .opwrap .char span:nth-child(5) {
        font-size: 1em;
        left: 3.85vw;
        top: 21.25vw;
    }
    .opening .opwrap .char span:nth-child(6) {
        font-size: 1em;
        left: 21.3vw;
        top: 21.1vw;
    }
    .opening .opwrap .char span:nth-child(7) {
        font-size: 1em;
        left: 6.1vw;
        top: 28vw;
    }
    .opening .opwrap .char span:nth-child(8) {
        font-size: 1em;
        left: 13.25vw;
        top: 28vw;
    }
    .opening .opwrap .char span:nth-child(9) {
        font-size: 1em;
        left: 16.9vw;
        top: 28vw;
    }
    .opening .opwrap .char span:nth-child(10) {
        font-size: 1em;
        left: 0;
        top: 35.05vw;
    }
    .opening .opwrap .char span:nth-child(11) {
        font-size: 1em;
        left: 18.05vw;
        top: 35.05vw;
    }
    .opening .opwrap .char span:nth-child(12) {
        font-size: 1em;
        left: 21.7vw;
        top: 35.05vw;
    }
    .opening .opwrap .char span:nth-child(13) {
        font-size: 1em;
        left: 0;
        top: 41.9vw;
    }
    .opening .opwrap .char span:nth-child(14) {
        font-size: 1em;
        left: 0;
        top: 49.35vw;
    }
    .opening .opwrap .char span:nth-child(15) {
        font-size: 1em;
        left: 3.87vw;
        top: 48.75vw;
    }
    .opening .opwrap .char span:nth-child(16) {
        font-size: 1em;
        left: 18.45vw;
        top: 48.75vw;
    }
    .opening .opwrap .char span:nth-child(17) {
        font-size: 1em;
        left: 0;
        top: 55.9vw;
    }
    .opening .opwrap .char span:nth-child(18) {
        font-size: 1em;
        left: 25.05vw;
        top: 55.8vw;
    }
    .opening .act .opwrap .char span:nth-child(1) {
        font-size: 1em;
        left: 21.2vw;
        top: 57.6vw;
        font-weight: 400;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
    .opening .act .opwrap .char span:nth-child(2) {
        font-size: 1.846em;
        left: 0;
        top: 9.4vw;
        font-weight: 600;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
    .opening .act .opwrap .char span:nth-child(3) {
        font-size: 1.846em;
        left: 6.7vw;
        top: 9.4vw;
        font-weight: 600;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
    .opening .act .opwrap .char span:nth-child(4) {
        font-size: 1em;
        left: 18.3vw;
        top: 43.7vw;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
    .opening .act .opwrap .char span:nth-child(5) {
        font-size: 1em;
        left: 24.35vw;
        top: 50.55vw;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
    .opening .act .opwrap .char span:nth-child(6) {
        font-size: 1em;
        left: 10.75vw;
        top: 36.7vw;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
    .opening .act .opwrap .char span:nth-child(7) {
        font-size: 1.846em;
        left: 0vw;
        top: 0.9vw;
        font-weight: 600;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
    .opening .act .opwrap .char span:nth-child(8) {
        font-size: 1em;
        left: 17.95vw;
        top: 29.8vw;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
    .opening .act .opwrap .char span:nth-child(9) {
        font-size: 1em;
        left: 0;
        top: 36.7vw;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
    .opening .act .opwrap .char span:nth-child(10) {
        font-size: 1.846em;
        left: 19.6vw;
        top: 0.9vw;
        font-weight: 600;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
    .opening .act .opwrap .char span:nth-child(11) {
        font-size: 1em;
        left: 24.75vw;
        top: 57.55vw;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
    .opening .act .opwrap .char span:nth-child(12) {
        font-size: 1em;
        left: 28.5vw;
        top: 29.8vw;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
    .opening .act .opwrap .char span:nth-child(13) {
        font-size: 1em;
        left: 13.95vw;
        top: 29.8vw;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
    .opening .act .opwrap .char span:nth-child(14) {
        font-size: 1em;
        left: 7vw;
        top: 22.9vw;
        font-weight: 400;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
    .opening .act .opwrap .char span:nth-child(15) {
        font-size: 1.846em;
        left: 6.8vw;
        top: 0.9vw;
        font-weight: 600;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
    .opening .act .opwrap .char span:nth-child(16) {
        font-size: 1em;
        left: 10.7vw;
        top: 22.9vw;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
    .opening .act .opwrap .char span:nth-child(17) {
        font-size: 1em;
        left: 13.9vw;
        top: 64.35vw;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
    .opening .act .opwrap .char span:nth-child(18) {
        font-size: 1em;
        left: 22vw;
        top: 43.8vw;
        transition: var(--optransition-time);
        transition-delay: var(--optransition-delay);
    }
}
.opening .inner div.before {
    opacity: 1.0;
}
.opening .inner div.after {
    position: absolute;
    left: 0;
    top: 0;
    opacity: .0;
}
.opening .inner.act div.before {
    opacity: .0;
    transition: var(--optransition-time);
    transition-delay: var(--optransition-delay);
}
.opening .inner.act div.after {
    opacity: 1.0;
    transition: var(--optransition-time);
    transition-delay: var(--optransition-delay);
}
.opening .inner.act {
    animation: flash 1.0s forwards;
}
@keyframes flash {
    0% {
        opacity: 1.0;
    }
    15% {
        opacity: 0.3;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        opacity: 1.0;
    }
}
.opening .inner div strong {
    text-align: left;
    display: block;
    width: max-content;
    height: max-content;
}
.opening .scroll {
    width: 1.5px;
    height: 22vw;
    position: fixed;
    left: 3.2vw;
    bottom: 1rem;
    z-index: 100;
    overflow: hidden;
    transform: scaleY(1.0);
}
.opening .scroll.act {
    transition: 0.7s;
    opacity: 0;
}
.opening .scroll li:nth-child(1) {
    background: var(--dark-color);
    width: 2px;
    height: 7vw;
    position: absolute;
    left: 0;
    bottom: 15vw;
    z-index: 100;
    opacity: 0.8;
}
.opening .scroll li:nth-child(2) {
    background: var(--dark-color);
    width: 2px;
    height: 22vw;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 100;
    opacity: 0.2;
}
.opening .scroll li:nth-child(3) {
    background: var(--dark-color);
    width: 2px;
    height: 2vw;
    position: absolute;
    left: 0;
    animation: opscroll 2.5s infinite;
    z-index: 100;
    opacity: 0.2;
}
.opening .scroll.none {
    transition: 0.4s;
    opacity: 0;
}
@keyframes opscroll {
    0% {
        bottom: 23.2vw;
        height: 4vw;
    }
    50% {
        bottom: -10.2vw;
        height: 8vw;
    }
    99% {
        bottom: -14.2vw;
        height: 0vw;
    }
    100% {
        bottom: -17.2vw;
        height: 4vw;
    }
}
.opening strong {
    font-size: 1.846em;
    line-height: 1.35;
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
    /*
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
*/
}
.opening p {
    font-size: 1.00em;
}
.opening .skip {
    position: fixed;
    right: 3.2vw;
    bottom: 3.2vw;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    font-weight: 500;
    z-index: 100;
    cursor: pointer;
}
.opening .skip:after {
    content: "";
    background: var(--dark-color);
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0.2em;
    left: 0;
    transition: 0.3s;
}
.opening .inner p.after {
    position: absolute;
    left: 0;
    top: 0;
}
.opening .skip:hover:after {
    width: 0;
    transition: 0.3s;
}
.opening .opimg {
    position: fixed;
    left: -59.2vw;
    opacity: 0.8;
    top: 5vw;
    animation: opimgAnim 4s infinite;
    height: 133vh;
    display: flex;
    align-items: center;
}
.opening.none .opimg {
    transform: scale(2.5);
    transition: 3.0s;
}
.opening p.gra {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 20vh;
    background: linear-gradient(rgba(236, 237, 246, 0), rgba(236, 237, 246, 1.0));
    z-index: 50;
}
@keyframes opimgAnim {
    0% {
        top: -12vh;
    }
    /*    10%{top: 7.2vw;}*/
    50% {
        top: -14vh;
    }
    /*    90%{top:7.2vw;}*/
    100% {
        top: -12vh;
    }
}
.opening .opimg img {
    width: 250vw;
    -webkit-user-select: none; /* Chrome or Safari */
    -moz-user-select: none; /* FireFox */
    -ms-user-select: none; /* IE */
    -o-user-select: none; /* Opera */
    user-select: none;
    pointer-events: none;
}
.opening .opkey {
    position: fixed;
    left: 56vw;
    top: 52.7vh;
    width: 16vw;
    opacity: 0;
    pointer-events: none;
    animation: opend 4.0s infinite;
    z-index: 600;
    -webkit-user-select: none; /* Chrome or Safari */
    -moz-user-select: none; /* FireFox */
    -ms-user-select: none; /* IE */
    -o-user-select: none; /* Opera */
    user-select: none;
}
.opening .opkey img {
    -webkit-user-select: none; /* Chrome or Safari */
    -moz-user-select: none; /* FireFox */
    -ms-user-select: none; /* IE */
    -o-user-select: none; /* Opera */
    user-select: none;
    pointer-events: none;
}
@keyframes opend {
    0% {
        margin-top: 0;
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
    }
    50% {
        margin-top: -2vh;
        filter: drop-shadow(0 0 24px rgba(255, 255, 255, 1.0));
    }
    100% {
        margin-top: 0;
        filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
    }
}
.opening.end .opkey {
    opacity: 1.0;
    transition: 1.0s;
    pointer-events: auto;
    text-align: center;
    cursor: pointer;
}
.opening.end.none .opkey {
    pointer-events: none;
}
.opening .opkey img {
    opacity: 1.0;
}
.opening .opkey span:nth-child(2),.opening .opkey span:nth-child(3) {
    opacity: 0;
    transition: 0.4s;
}
.opening .opkey img {
    width: 100%;
}
.opening .opkey.scaleUp {
    tranisiton: var(--hold-time);
    filter: drop-shadow(0 0 48px rgba(51, 50, 56, 1.0));
}
.opening.none .opkey {
    opacity: 0;
    transition: 0.4s;
}
p.ophold {
    position: absolute;
    font-size: 0.75rem;
    left: 0;
    top: 4.5vw;
    font-weight: 500;
    text-align: center;
    display: block;
    opacity: 1.0;
    width: 100%;
}
p.ophold span {
    display: block;
    text-align: center;
}
.opening.end2 .opkey span:nth-child(1) {
    opacity: 0;
    transition: 0.4s;
}
.opening.end2 .opkey span:nth-child(2), .opening.end2 .opkey span:nth-child(3) {
    opacity: 1.0;
    transition: 0.4s;
    margin-top: -1.5rem;
}
.area2.act {
    color: var(--gimicwhite-color);
    background: url("/img/indexbcontent/gimic1bg.jpg") var(--gimic1main-color) no-repeat;
    background-size: contain;
    background-position: left top;
    overflow: hidden;
    z-index: 100;
}
.innerBack, .area6.act, .area7.act {
    font-family: 'Archivo', 'Noto Sans JP', sans-serif !important;
}
.area2 .innerBack, .area4 .innerBack {
    width: var(--content-width);
    margin: 0 auto;
    font-size: 1.125rem;
    letter-spacing: 0.04em;
    padding-top: 9.6vw;
}


.innerBack figure.decotxt {
    height: 9vw;
    width: max-content;
    position: absolute;
    left: -10vw;
    top: -4.75vw;
    text-align: left;
    display: flex;
}

.area2 .innerBack figure.decotxt {
    top: -6.75vw;
}

.nowBlock .innerBack figure.decotxt {
    animation: gimic1decotxt 150s linear infinite;
}
.area5 .innerBack figure.decotxt {
    top: 0;
}
.innerBack figure.decotxt img {
    height: 100%;
    width: auto;
}
@keyframes gimic1decotxt {
    0% {
        left: -10vw
    }
    100% {
        left: -500vw;
    }
}
.area2 .innerBack .areaAbout h2, .area4 .innerBack .areaAbout h2 {
    position: relative;
    padding-top: 16.6666vw;
    font-weight: 800;
    font-size: 1.846rem;
}
.area2 .innerBack h2 strong, .area2 .innerBack h2 strong small, .area4 .innerBack h2 strong small {
    font-size: 3.69rem;
}
.area2 .gimic1_main .left, .area4 .gimic1_main .left {
    position: relative;
    margin-top: 100vw;
}
.area2 .innerBack h2 p {
    font-size: 2.4615rem;
    background: var(--gimicwhite-color);
    color: var(--gimic1main-color);
    display: inline-block;
    line-height: 1.0;
    padding: 2.13333vw 4.3vw;
    font-weight: 900;
}
.area2 .innerBack h2 > span {
    font-size: 1.25rem;
    display: block;
}
.area2 .innerBack h2 p span {
    font-size: 1.23rem;
    font-weight: 800;
}
.area2 .innerBack h2 small {
    font-weight: 300;
}
.area2 .gimic1_main {
    display: flex;
    position: relative;
}
.area2 .gimic1_main .left > p {
    margin-top: 2.222vw;
}
.area2 .gimic1_main figure {
    width: 109.3vw;
    position: absolute;
    right: -4.44444vw;
    top: 6.4vw;
}
.area2 .gimic1_main figure img {
    width: 100%;
}
.area2 .innerBack .areaAbout {
    position: relative;
    margin-top: 6.6666vw;
    width: 100%;
    border: 1px solid var(--gimicwhite-color);
    padding: 4.44444vw 6.66666vw;
}
.area2 .innerBack .areaAbout h3 {
    font-size: 1.846rem;
    color: var(--gimic1main-color);
    /*    text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF, 3px 3px 0 #fff;*/
    text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0 -1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF, 2px 2px 0 #fff;
}
.area2 .innerBack .areaAbout > div:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 3.33333vw;
    margin-bottom: 3.33333vw;
}
.area2 .innerBack .areaAbout > div > small {
    margin-left: 0.2rem;
}
.area2 .innerBack .backservice h2 {
    position: relative;
    font-size: 1.846rem;
    padding-left: 2.22222vw;
    margin-top: 17.6666vw;
}
.area2 .innerBack .backservice h2:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0.138vw;
    background: var(--gimicwhite-color);
    left: 0;
    top: 0;
}
.area2 .innerBack .backservice dl {
    margin-top: 17.0666vw;
}
.area2 .innerBack .backservice dl:nth-child(2) {
    margin-top: 5vw;
}
.area2 .innerBack .backservice dl dt {
    width: 100%;
    height: 53.3333vw;
}
.area2 .innerBack .backservice dl dt img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.area2 .innerBack .backservice dl dd {
    margin-left: 10vw;
    margin-top: -6.4vw;
}
.area2 .innerBack .backservice dl dd p {
    margin-top: 4.0vw;
    width: 100%;
}
.area2 .innerBack .backservice dl dd h3 {
    font-size: 2.4rem;
    display: block;
}
.area2 .innerBack .backservice dl dd h3 span {
    display: block;
    font-size: 1.23rem;
}
.area2 .innerBack .backservice dl:nth-child(3) {
    flex-direction: row-reverse;
}
.area2 .innerBack .backservice dl:nth-child(3) dd {
    margin-left: 0;
    position: relative;
    z-index: 50;
    width: 76.26vw;
}
.area2 .innerBack .finish {
    text-align: center;
    background: var(--gimic1light-color);
    padding: 17.0666vw 6.6666vw;
    margin-top: 10vw;
    width: 100vw;
    margin-left: -6.66666vw;
}
.area2 .innerBack .finish h3 {
    font-size: 1.846rem;
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-bottom: 0.8vw;
    height: auto;
}
.area2 .innerBack .finish a {
    background: var(--gimic1dark-color);
}
.area4.act {
    color: var(--gimicwhite-color);
    background: url("/img/indexbcontent/gimic2bg.jpg") var(--gimic2main-color) no-repeat;
    background-position: top left;
    background-size: contain;
    padding-top: 4.9vw;
    /*    padding-bottom: var(--content-space);*/
    width: 100vw;
    overflow-x: hidden;
}
.area4 .innerBack h2 {
    padding-top: 0;
    font-weight: 800;
    position: relative;
}
.area4 .innerBack h2 p {
    font-size: 1.875rem;
    color: var(--gimicwhite-color);
    display: block;
    line-height: 1.35;
    margin-top: 96vw;
    text-align: left;
}
.area4 .innerBack h2 strong {
    font-size: 3.69rem;
}
.area4 .innerBack h2 small {
    font-weight: 400;
}
.area4 .gimic2_main figure {
    width: 109.3vw;
    position: absolute;
    right: -4.44444vw;
    top: 6.4vw;
}
.area4 .innerBack .workbInner {
    width: max-content;
    display: flex;
    gap: 9.6vw;
    margin-top: 35vw;
}
.area4 .innerBack .workb .workInnerb {
    background: var(--gimic2white-color);
    color: var(--gimic2txt-color);
    width: 87.4666vw;
    border-radius: 4.4444vw;
}
.area4 .innerBack .workb .workInnerb > div {
    width: 100%;
    padding: 6.4vw 6.4vw 12.8vw;
}
.area4 .innerBack .workb .workInnerb > div p {
    margin-top: 1.2vw;
}
.area4 .innerBack .workInnerb strong {
    font-size: 1.5rem;
    font-weight: 800;
    display: block;
    line-height: 1.5;
}
.area4 .innerBack .workInnerb > div > span {
    font-weight: 600;
}
.area4 .innerBack .workInnerb > div > a {
    color: var(--gimic2txt-color);
}
.area4 .innerBack .workInnerb figure {
    width: 75.4vw;
    height: 54vw;
    overflow: hidden;
    transform: rotate(-5deg);
    margin-left: 7vw;
    margin-top: -27vw;
}
.area4 .innerBack .workInnerb figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.area4 .innerBack .workb .next {
    position: absolute;
    right: -5vw;
    top: -7.2vw;
    width: 14.4vw;
    /* margin-top: -2vw; */
    cursor: pointer;
    transition: 0.4s;
}
.area4 .innerBack .workb .next:hover {
    transform: scale(0.9);
    transition: 0.4s;
}
.area4 .innerBack .workb .back:hover {
    transform: scale(0.9) rotate(-180deg);
    transition: 0.4s;
}
.area4 .innerBack .workb .next img {
    width: 100%;
}
.area4 .innerBack .workb.num5 .next {
    opacity: 0.5;
    transition: 0.4s;
    pointer-events: none;
}
.area4 .innerBack .workb .back {
    position: absolute;
    left: -5vw;
    top: -7.2vw;
    width: 14.4vw;
    transform: rotate(-180deg);
    cursor: pointer;
    transition: 0.4s;
}
.area4 .innerBack .workb .back img {
    width: 100%;
}
.area4 .innerBack .workb.num1 .back {
    opacity: 0.5;
    transition: 0.4s;
    pointer-events: none;
}
.area4 .innerBack .workb.num1 .workbInner {
    margin-left: 0;
    transition: 0.7s;
}
.area4 .innerBack .workb.num2 .workbInner {
    margin-left: -97.066vw;
    transition: 0.7s;
}
.area4 .innerBack .workb.num3 .workbInner {
    margin-left: calc(97.066vw * -2);
    transition: 0.7s;
}
.area4 .innerBack .workb.num4 .workbInner {
    margin-left: calc(97.066vw * -3);
    transition: 0.7s;
}
.area4 .innerBack .workb.num5 .workbInner {
    margin-left: calc(97.066vw * -4);
    transition: 0.7s;
}
.area4 .innerBack .workb.num6 .workbInner {
    margin-left: calc(97.066vw * -5);
    transition: 0.7s;
}
.area4 .innerBack .workb.num7 .workbInner {
    margin-left: calc(97.066vw * -6);
    transition: 0.7s;
}
.area4 .innerBack .workb.num8 .workbInner {
    margin-left: calc(97.066vw * -7);
    transition: 0.7s;
}
.area4 .innerBack .workb.num9 .workbInner {
    margin-left: calc(97.066vw * -8);
    transition: 0.7s;
}
.area4 .innerBack .workb.num10 .workbInner {
    margin-left: calc(97.066vw * -9);
    transition: 0.7s;
}
.area4 .workInnerb > div > a {
    color: var(--color-white);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.0;
    letter-spacing: 0.02em;
    margin-top: 1.5rem;
}
.area4 .workInnerb > div > a:before {
    content: "";
    background: var(--gimic2txt-color);
    width: 1.25vw;
    height: 1.25vw;
    border-radius: 2vw;
    transition: 0.2s;
}
.area4 .workInnerb > div > a:hover:before {
    transform: scale(1.35);
    transition: 0.2s;
}
.area5.act {
    padding: 0 0 var(--content-space);
    margin-top: 0;
    background: url(/img/indexbcontent/gimic3bg.jpg) var(--gimic3main-color) no-repeat;
    background-size: contain;
    background-position: left top;
    overflow: hidden;
}
.area5 .innerBack {
    width: var(--content-width);
    margin: 0 auto;
    padding-top: 9.6vw;
}
.area5.act .decoration {
    display: none;
}
.area5 .innerBack h2 {
    padding-top: 3.2vw;
    font-weight: 800;
    position: relative;
}
.area5 .innerBack h2 p {
    font-size: 2.4610rem;
    color: var(--gimicwhite-color);
    display: block;
    line-height: 1.35;
    margin-top: 96vw;
    text-align: left;
}
.area5 .innerBack h2 strong {
    font-size: 6.75rem;
}
.area5 .innerBack h2 small {
    font-weight: 400;
}
.area5 .gimic3_main figure {
    width: 109.3vw;
    position: absolute;
    right: -4.44444vw;
    top: 6.4vw;
}
.area5.act .content {
    margin-top: 9.6vw;
}
.area5.act .content li {
    position: relative;
}
.area5.act .content li:not(:first-child) {
    margin-top: 3.2vw;
}
.area5.act .content li img {
    position: absolute;
    left: 0;
    top: 0;
}
.area5.act .content li p {
    font-size: 1.23rem;
    font-weight: 800;
    position: relative;
    line-height: 1.5;
    color: var(--gimic3txt-color);
    padding: 22vw 10.6vw 14.933vw;
}
.area5.act .content li span {
    position: absolute;
    color: var(--gimic3white-color);
    text-shadow: 1px 1px 0 var(--gimic3txt-color), -1px -1px 0 var(--gimic3txt-color), -1px 1px 0 var(--gimic3txt-color), 1px -1px 0 var(--gimic3txt-color), 0px 1px 0 var(--gimic3txt-color), 0-1px 0 var(--gimic3txt-color), -1px 0 0 var(--gimic3txt-color), 1px 0 0 var(--gimic3txt-color);
    font-size: 2.76rem;
    font-weight: 800;
    left: 9.6vw;
    top: 4.8vw;
    letter-spacing: -0.02em;
}
.area5.act .content li p strong {
    font-size: 2.15rem;
}
.area5.act .content li:nth-child(1) img {
    width: 87.2vw;
    height: 100%;
    filter: drop-shadow(0.4vw 0.4vw 0 var(--gimic3shadow-color));
}
.area5.act .content li:nth-child(2) {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.area5.act .content li:nth-child(2) > div {
    /*    width: 61.11111vw;*/
}
.area5.act .content li:nth-child(2) span {
    right: 12vw;
    left: auto;
}
.area5.act .content li:nth-child(2) img {
    width: 87.2vw;
    height: 100%;
    filter: drop-shadow(0.4vw 0.4vw 0 var(--gimic3shadow-color));
    right: 0;
    left: auto;
}
.area5.act .content li:nth-child(3) img {
    width: 87.2vw;
    height: 100%;
    filter: drop-shadow(0.4vw 0.4vw 0 var(--gimic3shadow-color));
}
.area5.act .content li:nth-child(4) {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.area5.act .content li:nth-child(4) > div {
    /*    width: 61.11111vw;*/
}
.area5.act .content li:nth-child(4) span {
    right: 12vw;
    left: auto;
}
.area5.act .content li:nth-child(4) img {
    width: 87.2vw;
    height: 100%;
    filter: drop-shadow(0.4vw 0.4vw 0 var(--gimic3shadow-color));
    right: 0;
    left: auto;
}
.area5.act .content li:nth-child(5) img {
    width: 87.2vw;
    height: 100%;
    filter: drop-shadow(0.4vw 0.4vw 0 var(--gimic3shadow-color));
}
.area5.act .content li:nth-child(6) img {
    width: 87.2vw;
    height: 100%;
    filter: drop-shadow(0.4vw 0.4vw 0 var(--gimic3shadow-color));
}
.area5.act .content li:nth-child(6) {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.area5.act .content li:nth-child(6) > div {
    /*    width: 61.11111vw;*/
}
.area5.act .content li:nth-child(6) span {
    right: 12vw;
    left: auto;
}
.area5.act .content li:nth-child(6) img {
    width: 87.2vw;
    height: 100%;
    filter: drop-shadow(0.4vw 0.4vw 0 var(--gimic3shadow-color));
    right: 0;
    left: auto;
}
.area5.act .content li:nth-child(7) img {
    width: 87.2vw;
    height: 100%;
    filter: drop-shadow(0.4vw 0.4vw 0 var(--gimic3shadow-color));
}
.area7 {
    padding-top: var(--content-space);
}
.area6.act {
    color: var(--gimicwhite-color);
    background: url("/img/indexbcontent/gimic4bg.jpg") var(--gimic4main-color) no-repeat;
    background-position: top left;
    background-size: contain;
    padding-bottom: var(--content-space);
    padding-top: 4.8vw;
}
.area7.act {
    color: var(--gimicwhite-color);
    background: var(--gimic2main-color);
}
.area6 .innerBack {
    width: var(--content-width);
    margin: 0 auto;
    padding-top: 9.6vw;
}
.area6 .innerBack h2 {
    padding-top: 0;
    font-weight: 800;
    margin-top: 96vw;
    padding-bottom: 4.8vw;
}
.area6 .innerBack h2 p {
    font-size: 2.4615rem;
    color: var(--gimicwhite-color);
    display: block;
    line-height: 1.35;
    text-align: left;
}
.area6 .innerBack h2 strong {
    font-size: 3.69rem;
}
.area6 .innerBack h2 small {
    font-weight: 400;
}
.area6 .gimic4_main figure {
    width: 109.3vw;
    position: absolute;
    right: -4.44444vw;
    top: 6.4vw;
}
.area6.act .inner h2, .area7.act .inner h2 {
    font-weight: 800;
    position: relative;
    padding-left: 2.22222vw;
}
.area6.act .inner h2:before, .area7.act .inner h2:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0.4vw;
    background: var(--gimicwhite-color);
    left: 0;
    top: 0;
}
.area6.act h2 span, .area7.act h2 span {
    display: none;
}
.area7.act {
    width: 100vw;
    background: var(--gimic4main-color);
    color: var(--gimicwhite-color);
    padding-top: 0;
    padding-bottom: var(--content-space);
}
.area1.act {
    background: url("/img/indexbcontent/gimic5pattern.jpg");
    background-size: 2.638888vw 2.638888vw;
    padding-bottom: var(--content-space);
}
.area1.act .content {
    width: var(--content-width);
    margin: 0 auto;
    background: #fff;
    padding: 7.2vw 7.2vw 14.4vw;
    margin-top: -27vw;
    position: relative;
    font-weight: 600;
}
.area1.act .content p {
    margin-bottom: 1.5rem;
    font-size: 1.00rem;
}
.area1.act .content p span {
    font-size: 0.75rem;
    font-weight: 400;
}
.area1.act .content dl {
    line-height: 1.0;
    font-weight: 800;
    position: relative;
    text-align: center;
}
.area1.act .content dt {
    background: #f8e11a;
    font-size: 1.3846rem;
    padding: 3.3333vw 0;
    letter-spacing: 0.02em;
}
.area1.act .content dd {
    background: #fef9d1;
    font-size: 2.0rem;
    padding: 3.333vw;
}
.area1.act .content dd small {
    font-size: 0.75rem;
    display: block;
    margin-top: 0.5rem;
}
.area1.act .content dd p:before {
    content: "";
    border-bottom: 1.5vw var(--dark-color) solid;
    border-right: 1.5vw transparent solid;
    border-left: 1.5vw transparent solid;
    border-top: 1.5vw transparent solid;
    position: absolute;
    left: 19vw;
    top: -2.75vw;
}
.area1.act .content dd p {
    position: absolute;
    left: 15.5vw;
    bottom: -1.35rem;
    font-weight: 400;
    font-size: 0.75rem;
    color: #fff;
    background: var(--dark-color);
    line-height: 1.0;
    padding: 1.6666vw 2.4vw;
    border-radius: 1.6666vw;
    margin-bottom: 0;
}
.area1.act .fvttl {
    display: none;
}
.area1.act .content .urabtn {
    margin-top: 9.6vw;
    background: var(--dark-color);
}
.area1.act .content > div {
    text-align: center;
}
.area1margin {
    height: 65vh;
}
.area1margin.act {
    height: 150vh;
}
.area1.act + .area1margin {
    display: none;
}
.area1.act .keybnr {
    display: none;
}
a.urabtn {
    color: var(--gimicwhite-color);
    border-radius: 2.13333vw;
    width: 100%;
    height: 16vw;
    display: inline-block;
    line-height: 16vw;
    margin-top: 8.53333vw;
    position: relative;
    font-weight: 600;
    text-align: center;
    font-size: 1.0rem;
}
a.urabtn:after {
    content: "";
    background: url(/img/indexbcontent/arrow.svg);
    background-size: cover;
    width: 1.86666vw;
    height: 2.6666vw;
    position: absolute;
    right: 4.266666vw;
    top: 40%;
}
div.wrap {
    position: fixed;
}
div.wrap.on {
    position: relative;
}
.area3 {
    margin-top: var(--content-space);
}
.area3.act {
    margin-top: 0;
}
.uradeco {
    position: relative;
}
.uradeco li:nth-child(1) {
    position: absolute;
    left: 58.72vw;
    top: 6vw;
    width: 9.6vw;
}
.uradeco li:nth-child(2) {
    position: absolute;
    left: -9vw;
    top: 23.5vw;
    width: 6.0277vw;
}
.area1.act + * + .area2 .inner {
    margin-top: 5vw;
}
.innerBack {
    position: relative;
    z-index: 50;
    width: 100vw;
}
.innerBack .right figcaption {
    position: absolute;
    font-size: 0.6875rem;
    line-height: 1.5;
    opacity: 0.8;
    z-index: 200;
    font-weight: 500;
}
.area2 .innerBack .right figcaption {
    left: 70vw;
    top: 54.5vw;
}
.area4 .innerBack .right figcaption {
    left: 77.5vw;
    top: 70vw;
    opacity: 1.0;
}
.area5 .innerBack .right figcaption {
    left: 68.5vw;
    top: 75vw;
    opacity: 1.0;
}
.area6 .innerBack .right figcaption {
    left: 79vw;
    top: 66.5vw;
}
.innerBack .right figcaption, .innerBack .right figcaption a {
    color: var(--white-color);
}
.innerBack .right figcaption a {
    text-decoration: underline!important;
}
.area4.act, .area5.act, .area6.act {
    overflow-x: hidden;
}
.area1 .scroll {
    width: 1.5px;
    height: 10vw;
    position: fixed;
    right: 2vw;
    bottom: 2vw;
    z-index: 100;
    overflow: hidden;
    transform: scaleY(1.0);
}
.area1 .scroll.none {
    width: 2px;
    position: fixed;
    right: 3.2vw;
    bottom: 3.2vw;
    z-index: 100;
    overflow: hidden;
    transition: 0.7s;
    opacity: 0;
    transform: scaleY(0)
}
.area1 .scroll li:nth-child(1) {
    background: var(--dark-color);
    width: 2px;
    height: 3.5vw;
    position: absolute;
    right: 0;
    bottom: 6.5vw;
    z-index: 100;
    opacity: 0.8;
    animation: mvscroll 2.0s infinite;
}
.area1 .scroll.none {
    transition: 0.4s;
    opacity: 0;
}
@keyframes mvscroll {
    0% {
        bottom: 28.2vw;
        height: 4vw;
    }
    50% {
        bottom: -9.2vw;
        height: 8vw;
    }
    99% {
        bottom: -10.2vw;
        height: 0vw;
    }
    100% {
        bottom: -12.2vw;
        height: 4vw;
    }
}
.area5 > .link{
    width: var(--content-width);
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
}
.area7 .btn2{
    justify-content: flex-end;
}

.area7 .urabtn{
    display: none;
}
.area7.act .btn2{
    display: none;
}
.area7.act .urabtn{
    display: flex;
    background: #37020f;
    justify-content: center;
}
.area4 .innerBack .urabtn{
    background: #312605;
}
.area5 .innerBack .urabtn{
    background: #194302;
}
.area7 .urabtn{
    background: #37020f;
}

.area4.act > .link{
    display: none;
}
.area5.act > .link{
    display: none;
}
/*  メインアニメーション */

.fvttl h2 > span{opacity:0; transform: translate(0, 3vw);}
.wrap.on .fvttl h2 > span{opacity:1.0; transform: translate(0, 0); transition: 0.8s; transition-delay:1.0s; line-height: 1.0; height: 1.0em;}
.fvtxt{opacity:0; transform: translate(0, 1.5vw);}
.wrap.on .fvtxt{opacity:1.0; transform: translate(0, 0); transition: 1.2s; transition-delay:1.0s;}

.wrap.on .fvttl h2 span:nth-child(1) small:nth-child(1){margin-top:0; transition: 0.8s; transition-delay: 1.00s;}
.wrap.on .fvttl h2 span:nth-child(1) small:nth-child(2){margin-top:0; transition: 0.8s; transition-delay: 1.02s;}
.wrap.on .fvttl h2 span:nth-child(1) small:nth-child(3){margin-top:0; transition: 0.8s; transition-delay: 1.04s;}
.wrap.on .fvttl h2 span:nth-child(1) small:nth-child(4){margin-top:0; transition: 0.8s; transition-delay: 1.06s;}
.wrap.on .fvttl h2 span:nth-child(1) small:nth-child(5){margin-top:0; transition: 0.8s; transition-delay: 1.08s;}
.wrap.on .fvttl h2 span:nth-child(1) small:nth-child(6){margin-top:0; transition: 0.8s; transition-delay: 1.10s;}
.wrap.on .fvttl h2 span:nth-child(1) small:nth-child(7){margin-top:0; transition: 0.8s; transition-delay: 1.12s;}
.wrap.on .fvttl h2 span:nth-child(1) small:nth-child(8){margin-top:0; transition: 0.8s; transition-delay: 1.14s;}

.wrap.on .fvttl h2 span:nth-child(2) small:nth-child(1){margin-top:0; transition: 0.8s; transition-delay: 1.10s;}
.wrap.on .fvttl h2 span:nth-child(2) small:nth-child(2){margin-top:0; transition: 0.8s; transition-delay: 1.12s;}
.wrap.on .fvttl h2 span:nth-child(2) small:nth-child(3){margin-top:0; transition: 0.8s; transition-delay: 1.14s;}
.wrap.on .fvttl h2 span:nth-child(2) small:nth-child(4){margin-top:0; transition: 0.8s; transition-delay: 1.16s;}
.wrap.on .fvttl h2 span:nth-child(2) small:nth-child(5){margin-top:0; transition: 0.8s; transition-delay: 1.18s;}
.wrap.on .fvttl h2 span:nth-child(2) small:nth-child(6){margin-top:0; transition: 0.8s; transition-delay: 1.20s;}
.wrap.on .fvttl h2 span:nth-child(2) small:nth-child(7){margin-top:0; transition: 0.8s; transition-delay: 1.22s;}
.wrap.on .fvttl h2 span:nth-child(2) small:nth-child(8){margin-top:0; transition: 0.8s; transition-delay: 1.24s;}
.wrap.on .fvttl h2 span:nth-child(2) small:nth-child(9){margin-top:0; transition: 0.8s; transition-delay: 1.26s;}
.wrap.on .fvttl h2 span:nth-child(2) small:nth-child(10){margin-top:0; transition: 0.8s; transition-delay: 1.28s;}
.wrap.on .fvttl h2 span:nth-child(2) small:nth-child(11){margin-top:0; transition: 0.8s; transition-delay: 1.30s;}
.wrap.on .fvttl h2 span:nth-child(2) small:nth-child(12){margin-top:0; transition: 0.8s; transition-delay: 1.32s;}

.wrap.on .fvttl h2 span:nth-child(3) small:nth-child(1){margin-top:0; transition: 0.8s; transition-delay: 1.20s;}
.wrap.on .fvttl h2 span:nth-child(3) small:nth-child(2){margin-top:0; transition: 0.8s; transition-delay: 1.22s;}
.wrap.on .fvttl h2 span:nth-child(3) small:nth-child(3){margin-top:0; transition: 0.8s; transition-delay: 1.24s;}
.wrap.on .fvttl h2 span:nth-child(3) small:nth-child(4){margin-top:0; transition: 0.8s; transition-delay: 1.26s;}
.wrap.on .fvttl h2 span:nth-child(3) small:nth-child(5){margin-top:0; transition: 0.8s; transition-delay: 1.28s;}
.wrap.on .fvttl h2 span:nth-child(3) small:nth-child(6){margin-top:0; transition: 0.8s; transition-delay: 1.30s;}
.wrap.on .fvttl h2 span:nth-child(3) small:nth-child(7){margin-top:0; transition: 0.8s; transition-delay: 1.32s;}
.wrap.on .fvttl h2 span:nth-child(3) small:nth-child(8){margin-top:0; transition: 0.8s; transition-delay: 1.34s;}
.wrap.on .fvttl h2 span:nth-child(3) small:nth-child(9){margin-top:0; transition: 0.8s; transition-delay: 1.36s;}
.wrap.on .fvttl h2 span:nth-child(3) small:nth-child(10){margin-top:0; transition: 0.8s; transition-delay: 1.38s;}
.wrap.on .fvttl h2 span:nth-child(3) small:nth-child(11){margin-top:0; transition: 0.8s; transition-delay: 1.40s;}
.wrap.on .fvttl h2 span:nth-child(3) small:nth-child(12){margin-top:0; transition: 0.8s; transition-delay: 1.42s;}
.wrap.on .fvttl h2 span:nth-child(3) small:nth-child(13){margin-top:0; transition: 0.8s; transition-delay: 1.44s;}
.wrap.on .fvttl h2 span:nth-child(3) small:nth-child(14){margin-top:0; transition: 0.8s; transition-delay: 1.46s;}


.area1 .deco ul li:nth-child(1) img,.area1 .deco ul li:nth-child(1) video{
    opacity:0;
    padding-top:8vw;
}
.area1 .deco ul li:nth-child(2) img{
    opacity:0;
    padding-top:4.5vw;
}
.area1 .deco ul li:nth-child(3) img{
    opacity:0;
    padding-top:12vw;
}
.area1 .deco ul li:nth-child(4) img{
    opacity:0;
    padding-top:2.5vw;
}
.area1 .deco ul li:nth-child(5) img{
    opacity:0;
    padding-top:6.5vw;
}
.area1 .deco2 ul li:nth-child(1) img{
    opacity:0;
    padding-top:4.5vw;
}
.area1 .deco2 ul li:nth-child(2) img{
    opacity:0;
    padding-top:7vw;
}
.area1 .deco2 ul li:nth-child(3) img{
    opacity:0;
    padding-top:14vw;
}

.wrap.on .area1 .deco ul li:nth-child(1) img,.wrap.on .area1 .deco ul li:nth-child(1) video{
    opacity:1.0;
    padding-top:0;
    transition-delay: 1.2s!important;
    transition:1.2s;
}
.wrap.on .area1 .deco ul li:nth-child(2) img{
    opacity:1.0;
    padding-top:0;
    transition-delay: 1.24s!important;
    transition:1.2s;
}
.wrap.on .area1 .deco ul li:nth-child(3) img{
    opacity:1.0;
    padding-top:0;
    transition-delay: 1.28s!important;
    transition:1.2s;
}
.wrap.on .area1 .deco ul li:nth-child(4) img{
    opacity:1.0;
    padding-top:0;
    transition-delay: 1.32s!important;
    transition:1.2s;
}
.wrap.on .area1 .deco ul li:nth-child(5) img{
    opacity:1.0;
    padding-top:0;
    transition-delay: 1.36s!important;
    transition:1.2s;
}
.wrap.on .area1 .deco2 ul li:nth-child(1) img{
    opacity:1.0;
    padding-top:0;
    transition-delay: 1.2s!important;
    transition:1.2s;
}
.wrap.on .area1 .deco2 ul li:nth-child(2) img{
    opacity:1.0;
    padding-top:0;
    transition-delay: 1.16s!important;
    transition:1.2s;
}
.wrap.on .area1 .deco2 ul li:nth-child(3) img{
    opacity:1.0;
    padding-top:0;
    transition-delay: 1.24s!important;
    transition:1.2s;
}
header,ul.item{transform:translate(0,-25vw);}

.wrap.on header,.wrap.on ul.item{
    transform: translate(0,0);
    transition: 1.2s;
    transition-delay: 1.0s;
}

.wrap.on2 header,.wrap.on2 ul.item{
    transition-delay: 0s!important;
}

.area2 .innerBack h2 p{
    width: 0;
    overflow:hidden;
    transition: 0.8s;
    display: block;
    padding-left:0;
}

.area2 .innerBack h2 p:nth-child(2){
    height: 4.5rem;
    white-space: nowrap;
}
.area2 .innerBack h2 p:nth-child(3){
    height: 3.4rem;
    white-space: nowrap;
}
.area2 .innerBack .gimic1_main.act h2 p:nth-child(2){
    width: 23rem;
    transition: 0.8s;
    padding-left: 1.5rem;
}
.area2 .innerBack .gimic1_main.act h2 p:nth-child(3){
    width: 25rem;
    transition: 0.8s;
    transition-delay: 0.1s;
    padding-left: 1.5rem;
    margin-top: 0.15em;
}

.gimic1_main figure,.gimic2_main figure,.gimic3_main figure,.gimic4_main figure{
    transform: scale(0.9) rotate(5deg);
    opacity:0;
}

.gimic1_main.act figure,.gimic2_main.act figure,.gimic3_main.act figure,.gimic4_main.act figure{
    transform: scale(1.0) rotate(0);
    opacity: 1.0;
    transition: 1.2s;}

.uradeco li:nth-child(1){
    transform: scale(0.5) rotate(10deg);
    opacity:0;
}
.uradeco li:nth-child(2){
    transform: scale(0.5) rotate(-10deg);
    opacity:0;
}

 .gimic1_main.act .uradeco li, .gimic2_main.act .uradeco li, .gimic3_main.act .uradeco li, .gimic4_main.act .uradeco li{
    transform: scale(1.0) rotate(0deg);
    opacity:1;
    transition: 1.5s;
}

.area4 .innerBack h2,.area5 .innerBack h2,.area7 .innerBack h2{
    opacity:0;
    transform: translate(0,5vw);
}
.area4 .innerBack .gimic2_main.act h2,.area5 .innerBack .gimic3_main.act h2,.area7 .innerBack .gimic4_main.act h2{
    opacity: 1.0;
    transition: 1.2s;
    transform: translate(0,0);}