@charset "UTF-8";

.area1 {
    /*	position: relative;*/
    margin-top: -2.75vw;
}

.mv {
    width: 100vw;
    height: 150vh;
    background-size: 100%;
    position: fixed;
    opacity: 1.0;
    transition: 0.7s;
    animation: mv_zoom 6.0s infinite linear;
    pointer-events: none;
}

.scrollWrap:hover {
    transition: 0.4s;
    transform: scale(0.90);
    opacity: 1.0;
}

.scrollWrap {
    opacity: 0;
}

.scrollWrap img:nth-child(1) {
    position: absolute;
    left: 50%;
    top: 0.75vw;
    width: 0.625vw !important;
    margin-left: -0.3125vw;
    animation: scrollAct1 2.5s infinite;
}

.scrollWrap img:nth-child(2) {
    position: absolute;
    left: 50%;
    top: -1.75vw;
    width: 0.625vw !important;
    margin-left: -0.3125vw;
    animation: scrollAct1 2.5s infinite;
}

.scrollWrap.on {
    opacity: 1.0;
    transition: 0.7s;
    transition-delay: 3.0s;
}

.scrollWrap.off {
    opacity: 0;
    transition: 0.7s;
}

@keyframes scrollAct1 {
    0% {
        margin-top: 0;
    }

    5% {
        margin-top: -0.15vw;
    }

    35% {
        margin-top: 2.6vw;
    }

    100% {
        margin-top: 2.6vw;
    }
}

body:after {
    content: "";
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 0.55555vw;
    /*
    background: #312928;
    */
    z-index: 1000;
}

.mv img {
    width: 100vw;
}

.mv1,
.mv2,
.mv3 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
}

.mv.bgoff {
    opacity: 0;
    transition: 0.7s;
}

.mv .obj {
    position: absolute;
    transform: scale(1.05);
    transition: 1.0s;
    opacity: 0;
}

.mv .obj img {
    width: 100%;
}

.mv .on .obj {
    transform: scale(1.0);
    transition: 1.5s;
    opacity: 2.0;
    margin-top: 0;
    transition-delay: 0.5s;
}

.mv .on .bg_front,
.mv .on .bg_back {
    transform: scale(1.0);
    transition: 1.5s;
    transition-delay: 0.5s;
    opacity: 1.0;
    margin-top: 0;
}

.mv .obj1 {
    width: 55.34722222vw;
    left: 48.5vw;
    top: 46vw;
    margin-top: -1vw;
}

.mv .obj2 {
    width: 45.763889vw;
    left: 55.1vw;
    top: 6.9vw;
}

.mv .obj3 {
    width: 20.833333vw;
    left: -3.6vw;
    top: 29.8vw;
    margin-top: -1.5vw;
    animation: 4.0s obj3 infinite;
}


/*
@keyframes obj3{
	0%{ transform: rotate(0);}
	50%{ transform: rotate(1deg);}
	100%{ transform: rotate(0);}
}
*/

.mv .obj4 {
    width: 95vw;
    left: -1.5vw;
    top: 19.5vw;
    margin-top: -2vw;
}

.mv .obj5 {
    width: 38.05555555vw;
    left: 0vw;
    top: 3vw;
}

.mv .obj6 {
    width: 8.68055555vw;
    left: 10.8vw;
    top: 5.5vw;
    animation: 3.0s obj6 infinite;
}


/*
@keyframes obj6{
	0%{transform: rotate(0);}
	5%{transform: rotate(2deg);}
	10%{transform: rotate(-2deg);}
	15%{transform: rotate(0);}
	100%{transform: rotate(0);}
}
*/

.mv .obj7 {
    width: 50.5vw;
    left: 10.8vw;
    top: 18.5vw;
    animation: 2.5s obj7 forwards;
}


/*
@keyframes obj7 {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0);
    }
}
*/

@keyframes obj7 {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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


/*
.mv3{
	opacity:1.0;
	transition: 0.7s;
	z-index:50;
}

.mv3 .obj{opacity:1.0; transform: scale(1.0); margin-top:0!important;}

.mv3.on{
	opacity: 1.0;
	transition: 0.7s;
}
*/


/*
.mv3 .bg_front,.mv3 .bg_back{
	opacity: 1.0!important;
}
*/

.mv3 .bg_front,
.mv3 .bg_back {
    width: 110vw !important;
    left: 0vw !important;
    top: -2vw !important;
}

.mv1 .bg_front {
    width: 119.563889vw !important;
    top: -5vw !important;
    left: -4.5vw !important;
}

.mv1 .bg_back {
    width: 119.563889vw !important;
    top: -5vw !important;
    left: -2vw !important;
}

.mv .obj2_1 {
    width: 51.25vw;
    left: -2.2vw;
    top: 11.5vw;
}

.mv .obj2_2 {
    width: 41.38888vw;
    left: 40.6472222vw;
    top: 37.416667vw;
}

.mv .obj2_3 {
    width: 31.7361111vw;
    left: 72.5694444vw;
    top: 38.0833333vw;
}

.mv .obj2_4 {
    width: 111.66666vw;
    left: -8.88888vw;
    top: 26.983333vw;
}

.mv .obj2_5 {
    width: 47.22222vw;
    left: 42.638889vw;
    top: 33.097222vw;
}

.mv .obj2_6 {
    width: 53.5vw;
    left: 5.5vw;
    top: 9.5vw;
}

.mv2 .bg_front,
.mv2 .bg_back {
    top: -3.6vw !important;
}

.mv .obj3_1 {
    width: 65vw;
    left: -5vw;
    top: 7.6vw;
}

.mv .obj3_2 {
    width: 70vw;
    /*
    width: 111vw;
    top: 32vw;
    left: -1.5vw;
    */
    bottom: 2vw;
    right: 3vw;
}

.mv .obj3_3 {
    width: 84.0277777vw;
    top: 19.8vw;
    left: -1.7vw;
}

.mv .obj3_4 {
    width: 40vw;
    left: 10.5vw;
    top: 18.5vw;
}

.mv:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50vw;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    opacity: 0;
    transition: 1.0s;
}

.mv2.on:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50vw;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    opacity: 0;
    transition: 1.0s;
}

.mv3.on:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50vw;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    opacity: 0;
    transition: 1.0s;
}

.mv1:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 150vh;
    background: #ffffff;
    opacity: 0;
    transition: 1.0s;
    z-index: 100;
}

.mv2:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 150vh;
    background: #ffffff;
    opacity: 0;
    transition: 1.0s;
    z-index: 100;
}

.mv3:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 150vh;
    background: #ffffff;
    opacity: 0;
    transition: 1.0s;
    z-index: 100;
}

.mv.on {
    filter: blur(3px);
    transition: 0.5s;
}

.mv.on .mv1.on:after,
.mv.on .mv2.on:after,
.mv.on .mv3.on:after {
    opacity: 0.6;
    transition: 0.5s;
    transition-delay: 0.5s;
}

.mv .bg_front,
.mv .bg_back {
    width: 113vw;
    left: -9.5vw;
    top: -13.6vw;
    position: absolute;
    opacity: 0;
    transition: 2.0s;
}

.mv .bg_front img,
.mv .bg_back img {
    width: 100%;
}

.ttl {
    position: absolute;
    transform: scale(0.95);
    opacity: 0;
    right: 7vw;
    width: 20.34722222vw;
}


/*
.ttlinner {
    background: url("") no-repeat;
    background-size: contain;
    width: 20.3472222vw;
    height: 45vw;
}
*/

.scrollWrap {
    position: fixed;
    right: 7vw;
    bottom: -2.9vw;
    z-index: 2000;
    width: 20.3472222vw;
}

.scrollWrap .scroll {
    position: relative;
    right: 0;
    background: #3cb371;
    width: 5.83333333vw;
    height: 5.83333333vw;
    z-index: 2000;
    border-radius: 5%;
    overflow: hidden;
}

@media screen and (min-height:50vw) {
    .on .ttl {
        opacity: 1.0;
        transition: 1.5s;
        transition-delay: 2.5s;
        top: 6.6vh;
        transform: scale(0.9);
    }

    .scrollWrap .scroll {
        transform: scale(0.9);
    }

    .scrollWrap {
        transform: scale(1.0);
        display: flex;
        justify-content: center;
    }

    .ttl2 {
        width: 33.5vw;
        height: 31.7vw;
        background-size: cover;
        padding-left: 4.34444vw;
        padding-top: 3.33333vw;
        position: absolute;
        right: 9.7vw;
        bottom: 0;
        transform: scale(1.0);
    }

    .ttl3 {
        width: 33.5vw;
        height: 31.7vw;
        background-size: cover;
        padding-left: 4.34444vw;
        padding-top: 3.33333vw;
        position: absolute;
        right: 9.7vw;
        bottom: 0;
        transform: scale(1.0);
    }

    .ttl4 {
        width: 33.5vw;
        height: 31.7vw;
        background-size: cover;
        padding-left: 7vw;
        padding-top: 3.33333vw;
        position: absolute;
        right: 9.7vw;
        top: 100vh;
        transform: scale(1.0);
    }
}

@media screen and (max-height:49.9vw) {
    .scrollWrap {
        transform: scale(0.8);
        /*
		right: 18%;
	    margin-right: -4.21666vw;
*/
    }

    .on .ttl {
        opacity: 1.0;
        top: 4vh;
        transition: 1.5s;
        transition-delay: 2.5s;
        right: 7vw;
        transform: scale(0.8);
    }

    .scrollWrap .scroll {
        transform: scale(0.8);
    }

    .scrollWrap {
        transform: scale(1.0);
        display: flex;
        justify-content: center;
    }

    .ttl2 {
        width: 33.8vw;
        height: 31.7vw;
        background-size: cover;
        padding-left: 4.34444vw;
        padding-top: 3.33333vw;
        position: absolute;
        right: 9.7vw;
        bottom: 0;
    }

    .ttl3 {
        width: 33.8vw;
        height: 31.7vw;
        background-size: cover;
        padding-left: 4.34444vw;
        padding-top: 3.33333vw;
        position: absolute;
        right: 9.7vw;
        bottom: 0;
    }

    .ttl4 {
        width: 33.8vw;
        height: 31.7vw;
        background-size: cover;
        padding-left: 7vw;
        padding-top: 3.33333vw;
        position: absolute;
        right: 9.7vw;
        top: 100vh;
    }
}


/*
.ttl h1 img {
    width: 33vw;
    margin-left: 3.72vw;
    margin-top: 4vw;
}
*/

.ttl h1 img {
    width: 33vw;
    margin-left: -10.3vw;
    margin-top: 12vw;
}

.ttl ul {
    margin-left: 3.8vw;
    margin-top: 6.4vw;
}

.ttl ul li {
    height: 1.111111vw;
    margin-bottom: 1.6666vw;
}

.ttl li img {
    height: 1.111111vw;
}

.area2 {
    padding-top: 200vh;
    height: 150vh;
    position: relative;
}

.area2,
.area3,
.area4 {
    opacity: 0;
    margin-top: 2vw;
    pointer-events: none;
}

.area2.on,
.area3.on,
.area4.on {
    opacity: 1.0;
    margin-top: 0;
    transform: scale(1.00);
    transition: 0.7s;
}

.area2 img,
.area3 img {
    width: 33.3vw;
}

.area4 img {
    width: 33.3vw;
}

.area3,
.area4 {
    padding-top: 100vh;
    height: 150vh;
    position: relative;
}

.area4 {
    padding-bottom: 100vh;
}

.area5 .inner {
    position: fixed;
    left: 0;
    top: 0;
    background: url("../img/index/area5Bg.jpg") no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    opacity: 0;
    transition: 0.4s;
    transform: scale(1.05);
}

.area5.on .inner {
    opacity: 1.0;
    transition: 1.2s;
    transform: scale(1.0);
}

.area5 .decoTxt img {
    height: 5.208333333vw;
}

.area5 {
    height: 250vh;
    pointer-events: none;
}

.area5 video {
    min-width: 100vw;
    min-height: 100vh;
}

.area5 .decoTxt figure {
    margin-bottom: 0.5vw;
}

.area5 .decoTxt figure:nth-child(1) {
    animation: slide1 350s infinite linear;
}

.area5 .decoTxt figure:nth-child(2) {
    animation: slide1 420s infinite linear;
}

.area5 .decoTxt figure:nth-child(3) {
    animation: slide3 350s infinite linear;
}

.area5 .decoTxt figure:nth-child(4) {
    animation: slide3 400s infinite linear;
}

.area5 .decoTxt figure:nth-child(5) {
    animation: slide5 350s infinite linear;
}

.area5 .decoTxt figure:nth-child(6) {
    animation: slide5 350s infinite linear;
}

.area5 .decoTxt figure:nth-child(7) {
    animation: slide7 350s infinite linear;
}

.area5 .decoTxt figure:nth-child(8) {
    animation: slide7 350s infinite linear;
}

.area5 .decoTxt figure:nth-child(9) {
    animation: slide9 320s infinite linear;
}

.area5 .decoTxt figure:nth-child(10) {
    animation: slide9 350s infinite linear;
}

.area5 .decoTxt figure:nth-child(11) {
    animation: slide9 450s infinite linear;
}


/*
@keyframes slide1{
	0%{margin-left:0;}
	100%{margin-left: -1337vw;}
}
@keyframes slide2{
	0%{margin-left:-1337vw;}
	100%{margin-left: 0;}
}
@keyframes slide3{
	0%{margin-left:-150vw;}
	100%{margin-left: -1337vw;}
}
@keyframes slide4{
	0%{margin-left:-1237vw;}
	100%{margin-left: 0;}
}
@keyframes slide5{
	0%{margin-left:-100vw;}
	100%{margin-left: -1200vw;}
}
@keyframes slide6{
	0%{margin-left:-1337vw;}
	100%{margin-left: 0;}
}
@keyframes slide7{
	0%{margin-left:-150vw;}
	100%{margin-left: -1337vw;}
}
@keyframes slide8{
	0%{margin-left:-1237vw;}
	100%{margin-left: 0;}
}
@keyframes slide9{
	0%{margin-left:-400vw;}
	100%{margin-left: -1037vw;}
}
@keyframes base{
	0%{}
	100%{margin-left: -1037vw;}
}
*/

.area5 .txt img {
    width: 64.44444vw;
}

.area5 .txt {
    height: 28vw;
    background: rgba(255, 255, 255, .75);
    width: 100vw;
    position: absolute;
    left: 0vw;
    top: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -15vw;
    padding-left: 3vw;
    /*	border-radius: 1.666666vw;*/
}

.area5 .txt img {
    position: relative;
    margin-top: -0.9vw;
}

.area5 .txt:before {
    content: "";
    position: absolute;
    left: 17.86555vw;
    top: 50%;
    /*
    background: #003f8e;
    */
    background: rgb(9, 1, 138);
    background: -moz-linear-gradient(90deg, rgba(9, 1, 138, 1) 0%, rgba(0, 0, 172, 1) 44%, rgba(0, 149, 255, 0.4500000683867297) 100%);
    background: -webkit-linear-gradient(90deg, rgba(9, 1, 138, 1) 0%, rgba(0, 0, 172, 1) 44%, rgba(0, 149, 255, 0.4500000683867297) 100%);
    background: linear-gradient(90deg, rgba(9, 1, 138, 1) 0%, rgba(0, 0, 172, 1) 44%, rgba(0, 149, 255, 0.4500000683867297) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#09018a", endColorstr="#0095ff", GradientType=1);
    width: 0vw;
    height: 6.855555vw;
    margin-top: -1.9vw;
}

.area5 .obj {
    position: fixed;
    opacity: 1.0;
    left: 0;
    top: 0;
    z-index: 10;
    height: 100vh;
}

.area5 .obj li {
    position: absolute;
}

.area5 .obj li:nth-child(1) {
    left: 4.6vw;
    top: 45%;
    margin-top: 7.1vw;
}

.area5 .obj li:nth-child(1) img {
    width: 31.3vw;
    /*
    opacity: 0;
    */
}

.area5.on .obj li:nth-child(1) {
    animation: animView 1.5s forwards;
    animation-delay: 1.3s;
    opacity: 0;
}


/*
.area5 .obj li:nth-child(2) {
    left: 72vw;
    top: 43%;
    margin-top: -23vw;
}
*/

.area5 .obj li:nth-child(2) {
    left: 65vw;
    top: 54%;
    margin-top: -25vw;
}

.area5 .obj li:nth-child(2) img {
    width: 22.7vw;
    width: 26.7vw;
    /*
    opacity: 0;
    */
}

.area5.on .obj li:nth-child(2) img {
    animation: animView 1.5s forwards;
    animation-delay: 1.2s;
    opacity: 0;
}

@keyframes animView {
    0% {
        opacity: 0;
        transform: scale(0.7) rotate(5deg);
    }

    25% {
        transform: scale(1.05) rotate(-5deg);
    }

    50% {
        opacity: 1.0;
        transform: scale(1.0) rotate(1.0);
    }

    100% {
        opacity: 1.0;
    }
}

.area5.on .txt:before {
    width: 40.2vw;
    transition: 0.5s;
    transition-delay: 0.5s;
}

.area6 {
    position: relative;
    width: 100vw;
    margin: 0 auto;
    opacity: 0;
    background: #f5f5f5;
    padding: 4.15vw 13.1vw;
}

.area6.on {
    opacity: 1.0;
    transition: 0.7s;
}

.area6 strong {
    position: relative;
    margin-bottom: 1.9vw;
    display: block;
}

.area6 .section1 strong {
    margin-bottom: 2.4vw;
}

.area6 figure img {
    width: 40.2777777vw;
}

.area6 .decoTxt {
    position: absolute;
    left: 0vw;
    top: 22vw;
}

.area6 .decoTxt img {
    width: 8vw;
}

.area6 .section1,
.area6 .section2,
.area6 .section3,
.area6 .section4 {
    display: flex;
}

.area6 .section3 .blockRight {
    margin-top: -0.8vw;
}

.area6 img {
    position: relative;
}

.area6 .section1 {
    padding-top: 8vw;
}

.area6 .section1 strong img {
    height: 12.70833333vw;
}

.area6 .section1,
.area6 .section2,
.area6 .section3,
.area6 .section4 {
    border-bottom: 3px solid #f5f5f5;
}

.area6 .section2 strong img {
    height: 5.76388888vw;
}

.area6 .section4 strong img {
    height: 5.76388888vw;
}

.area6 .blockLeft {
    margin-bottom: 2.777777vw;
    margin-right: 2.013333vw;
}

.area6 .section1 .blockLeft,
.area6 .section3 .blockLeft {
    margin-left: -5vw;
}

.area6 .blockRight {
    width: 32.63888vw;
    margin-left: 1.7vw;
}

.area6 strong {
    margin-top: 5.555555vw;
}


/*
.area6 .section4 img {
    width: 40.208333vw;
}
*/

.ttlItem li {
    background: #36626d;
    position: relative;
    border-radius: 0.2vw;
}

.area6 .section1,
.area6 .section2,
.area6 .section3,
.area6 .section4 {
    opacity: 0;
    transform: scale(1.05);
}

.area6 .section1.on,
.area6 .section2.on,
.area6 .section3.on,
.area6 .section4.on {
    opacity: 1.0;
    transform: scale(1.00);
    transition: 0.7s;
}

.area6 .section1 .ttlItem li:nth-child(1) {
    position: absolute;
    width: 0;
    height: 3.19444444vw;
    left: 0;
    top: 2.6vw;
}

.area6 .section1 .ttlItem li:nth-child(2) {
    position: absolute;
    width: 0;
    height: 2.84722222vw;
    left: 5.1vw;
    top: 6.7vw;
}

.area6 .section1 .ttlItem li:nth-child(3) {
    position: absolute;
    width: 0;
    height: 2.84722222vw;
    left: 0;
    top: 10.3vw;
}

.area6 .section1.on .ttlItem li:nth-child(1) {
    width: 21.73611111vw;
    transition: 0.7s;
}

.area6 .section1.on .ttlItem li:nth-child(2) {
    width: 16.5277777777vw;
    transition: 0.75s;
}

.area6 .section1.on .ttlItem li:nth-child(3) {
    width: 19.09722222vw;
    transition: 0.8s;
}

.area6 .section2 {
    margin-top: 5.1vw;
    /*
    border-bottom: 1px solid #2b2522;
    */
}

.area6 .section2 .ttlItem li:nth-child(1) {
    position: absolute;
    width: 0vw;
    height: 3.2vw;
    left: -0.3vw;
    top: -0.2vw;
}

.area6 .section2.on .ttlItem li:nth-child(1) {
    width: 22.4vw;
    transition: 0.7s;
}

.area6 .section4 {
    margin-top: -5vw;
    /*
    border-bottom: 1px solid #2b2522;
    */
}

.area6 .section4 .ttlItem li:nth-child(1) {
    position: absolute;
    width: 0vw;
    height: 3.2vw;
    left: -0.3vw;
    top: -0.2vw;
}

.area6 .section4.on .ttlItem li:nth-child(1) {
    width: 22.4vw;
    transition: 0.7s;
}

.area6 .section2 p,
.area6 .section3 p,
.area6 .section4 p {
    width: 33.541666vw;
    margin-bottom: 2.15vw;
}

.area6 .section3 strong img {
    height: 17.152777777vw;
}

.area6 .section3 {
    margin-top: 5.5555vw;
    padding-bottom: 2.777777vw;
}

.area6 .section3 .ttlItem li:nth-child(1) {
    position: absolute;
    width: 0;
    height: 3.65vw;
    left: -0.1vw;
    top: 2.75vw;
}

.area6 .section3 .ttlItem li:nth-child(2) {
    position: absolute;
    width: 0;
    height: 3.522222vw;
    left: -0.1vw;
    top: 10.6vw;
}

.area6 .section3.on .ttlItem li:nth-child(1) {
    width: 20.45vw;
    transition: 0.7s;
}

.area6 .section3.on .ttlItem li:nth-child(2) {
    width: 20.527778vw;
    transition: 0.75s;
}


/*
.area6 .section4 {
    margin: 0 auto;
    margin-top: 5.555555vw;
    background: #fefaf7;
    border-radius: 1.66666vw;
    padding: 4.444444vw 5.555555vw;
    width: 55.0555555vw;
    display: none;
}


.area6 .section4 strong {
    margin-top: 0;
}
*/

.area7 {
    margin-top: 8.888888vw;
    opacity: 0;
    display: none;
}

.area7.on {
    opacity: 1.0;
    transition: 0.7s;
}

.area7 h2 {
    background: #383533;
    width: 0vw;
    height: 5.4166666vw;
    position: relative;
    padding-left: 6.75vw;
    padding-top: 1.38vw;
    opacity: 0;
    margin-bottom: 5.15vw;
    transform: scale(1.1);
}

.area7.on h2 {
    transition: 0.7s;
    width: 40.416666666vw;
    opacity: 1.0;
}

.area7 h2 img {
    height: 2.5vw;
}

.area7 h2:after {
    content: "";
    position: absolute;
    left: 40.35vw;
    border: 2.7vw transparent solid;
    border-left: 2.4vw #383533 solid;
    top: 0;
    opacity: 0;
}

.area7.on h2:after {
    opacity: 1.0;
    transition: 0.7s;
    transition-delay: 0.4s;
}

.area7 .block:nth-child(2) h3 img {
    width: 10.347222vw;
}

.area7 .block:nth-child(3) h3 img {
    width: 11.319444vw;
}

.area7 .block:nth-child(4) h3 img {
    width: 12.847222vw;
}

.area7 div.block {
    opacity: 0;
    transform: scale(1.05);
}

.area7 div.block.on {
    opacity: 1.0;
    transform: scale(1.00);
    transition: 0.7s;
}

.area7>div {
    width: 88.88888vw;
    margin: 0 auto 4.8vw;
    display: flex;
    margin-top: 3.33333vw;
}

.area7>div .txtBlock {
    margin-left: -3.88888vw;
    margin-top: 5.55555vw;
    background: #fefaf7;
    padding: 5vw;
    border-radius: 1.666666vw;
}

.area6>div .txtBlock {
    margin-left: -3.9vw;
    margin-top: 8.6vw;
    background: #fefaf7;
    padding: 3vw;
    border-radius: .65vw;
    position: relative;
    left: 3vw;
}

.area7 figure img {
    width: 56.38888888vw;
    border-radius: 1.666666vw;
}

.area7 .txtBlock p {
    margin-top: 1.11111vw;
    margin-bottom: 1.11111vw;
}

.area6 .txtBlock p {
    margin-top: 1.13vw;
    margin-bottom: 1.13vw;
    line-height: 1.65;
}

.area7 p.linkBlock {
    text-align: center;
    opacity: 0;
}

.area7 p.linkBlock.on {
    opacity: 1.0;
    transition: 0.7s;
}

.area7 a.link {
    position: relative;
    display: inline-block;
}

.area7 a.link:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0.138888vw;
    background: #383533;
    left: 0;
    bottom: 0vw;
}

.area7 a.link:after {
    content: "";
    background: url("../img/common/arrowBtn.png") no-repeat;
    background-size: cover;
    background-position: 80% 20%;
    width: 1.5972222vw;
    height: 1.5972222vw;
    display: inline-block;
    margin-left: 0.8vw;
    margin-top: -0.5vw;
}

.area7 .linkBlock.on a.link:before {
    width: 100%;
    transition: 0.5s;
}

.area8 {
    transform: scale(1.05);
    opacity: 0;
    text-align: center;
    margin-top: 8.8888vw;
    position: relative;
    display: none;
}

.area8 .decoTxt {
    position: absolute;
    left: 0;
    width: 300vw;
    display: flex;
    top: 14.7vw;
    animation: videoLoop 45s infinite linear;
}

.area8 .decoTxt img {
    height: 7.9861111vw;
}

@keyframes videoLoop {
    0% {
        left: 0;
    }

    100% {
        left: -190vw;
    }
}

.area8.on {
    transform: scale(1.0);
    opacity: 1.0;
    transition: 0.7s;
}

.area8 h2 img {
    height: 2.013888888vw;
}

.area8 .video>a>img {
    width: 46.666666vw;
    margin: 0 auto;
    border-radius: 1.666666vw;
}

.area8 .video {
    position: relative;
    border-radius: 1.666666vw;
    width: 46.666666vw;
    margin: 0 auto;
    overflow: hidden;
}

.area8 .video:after {
    content: "";
    background: #383533;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.7;
    transition: 0.4s;
}

.area8 .video:hover:after {
    opacity: 0;
    transition: 0.4s;
    pointer-events: none;
}

.area8 .video p.playBtn {
    position: absolute;
    left: 43.7%;
    top: 38.8%;
    z-index: 1;
    transition: 0.4s;
}

.area8 .video:hover p.playBtn {
    opacity: 0;
    transition: 0.4s;
}

.area8 .video p.playBtn img {
    width: 5.90277777vw;
}

.area8 h2 {
    margin-bottom: 3.333333vw;
}

.area9 {
    margin-top: 8.88888vw;
    position: relative;
    transform: scale(1.05);
    opacity: 0;
    display: none;
}

.area9.on {
    transform: scale(1.00);
    opacity: 1.0;
    transition: 0.7s;
}

.area9 .area4Bg {
    position: absolute;
    left: 0;
    top: 3.333333vw;
    background: #fefaf7;
    height: 29.652777777vw;
    width: 100vw;
}

.area9 .inner {
    margin-left: 13.0555555vw;
    display: flex;
    position: relative;
}

.area9 .inner figure {
    margin-top: -2vw;
}

.area9.on .inner figure {
    margin-top: 0;
    transition: 0.7s;
}

.area9 p {
    width: 32.6388888vw;
}

.area9 h2 {
    position: relative;
    margin-top: 7.94444444vw;
    margin-bottom: 1.8055555vw;
}

.area9.on h2 {
    margin-top: 6.94444444vw;
    transition: 0.7s;
}

.area9 .ttlItem li:nth-child(1) {
    position: absolute;
    width: 11.8vw;
    height: 3.847222vw;
    left: -0.1vw;
    top: 3.2vw;
}

.area9 .inner>figure img {
    width: 26.5277777vw;
    margin-right: 3.33333vw;
}

.area9 h2 img {
    position: relative;
    height: 6.666666vw;
}

.area9 p {
    margin-bottom: 1.8055555vw;
}

.area10 {
    opacity: 0;
    transform: scale(1.05);
    margin-top: 2.1vw;
    display: none;
}

.area10.on {
    opacity: 1.0;
    transform: scale(1.0);
    transition: 0.7s;
}

.area10 .inner {
    width: 100vw;
    background: #fefaf7;
    display: flex;
    align-items: center;
}

.area10 .inner .blockLeft {
    margin-left: 6.166666vw;
    margin-right: 2.166666vw;
    width: 35vw;
}

.area10 .inner .blockLeft img {
    height: 5.8333333vw;
}

.area10 .inner .blockRight {
    width: 100%;
    position: relative;
    background: #ffffff;
}

.area10 .inner .blockRight>* {
    width: 47.847222vw;
    margin: 0 auto;
}

.area10 h2 {
    position: relative;
}

.area10 .inner .blockRight ul {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 3.333333vw;
}

.area10 .inner .blockRight ul li {
    width: 15.9490740vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.7777vw;
}

.area10 .inner .blockRight ul li img {
    width: 90%;
}

.area10 .inner .blockRight>span {
    position: absolute;
    font-size: 0.6944444vw;
    right: -26.5vw;
    top: 24.65vw;
    display: inline;
}

.area10 .blockLeft h2 {
    margin-bottom: 2vw;
}

.area10 .ttlItem li:nth-child(1) {
    position: absolute;
    width: 11.7vw;
    height: 3.3vw;
    left: 6.3vw;
    top: -0.2vw;
}

.area10 h2 img {
    position: relative;
}

.area10 .blockRight {
    padding: 4.4444vw 0;
}

.area10 .blockRight p {
    padding-top: 3.333333vw;
    border-top: 1px solid #383533;
}

.area11 {
    display: flex;
    width: 100%;
    max-width: 100%;
    /*
    width: 50vw;
    width: 82.6388888vw;
    */
    margin: 3.6vw auto 8vw;
}

.area11 img {
    width: 80%;
}

.area11 div.block {
    margin-top: 2vw;
    opacity: 0;
}

.area11.on div.block:nth-child(1) {
    margin-top: 0;
    opacity: 1.0;
    transition: 0.7s;
}

.area11.on div.block:nth-child(2) {
    margin-top: 0;
    opacity: 1.0;
    transition: 0.7s;
    transition-delay: 0.1s;
}

.area11.on div.block:nth-child(3) {
    margin-top: 0;
    opacity: 1.0;
    transition: 0.7s;
    transition-delay: 0.2s;
}

.area11 p {
    width: 22.08333333vw;
    margin-top: 2vw;
    margin-bottom: 2vw;
    font-size: .85rem;
}

.area11 p a {
    color: #ba3b35;
}

.area11 .block:not(:last-child) {
    margin-right: 3.611111vw;
    padding-right: 3.61111vw;
    border-right: 1px solid #383533;
}

.area12 {
    width: 82.63888888vw;
    margin: 8.8888vw auto 0;
    text-align: center;
    background: #fefaf7;
    border-radius: 1.66666vw;
    padding: 3.2vw 0 4.444444444vw;
    transform: scale(1.05);
    opacity: 0;
    display: none;
}

.area12 p.decoTxt img {
    height: 7.9861111vw;
}

.area12.on {
    transform: scale(1.0);
    opacity: 1.0;
    transition: 0.7s;
}

.area12 h2 {
    margin-top: -4.5vw;
    margin-bottom: 1.66666vw;
}

.area12 h2 img {
    height: 3.95833333vw;
}

.area12 p {
    margin-bottom: 1.96666vw;
}

.area12 ul {
    display: flex;
    justify-content: center;
}

.area12 ul li:first-child {
    margin-right: 0.8333333vw;
}

.area13 {
    width: 58.263888888vw;
    margin: 0 auto 8.333333vw;
    transform: scale(1.05);
    opacity: 0;
    display: none;
}

.area13.on {
    transform: scale(1.0);
    opacity: 1.0;
    transition: 0.7s;
}

.area13 h2 {
    text-align: center;
    border-top: 1px solid #312928;
    border-bottom: 1px solid #312928;
    padding: 1.666666vw;
    margin-top: 8.8888vw;
    margin-bottom: 3.8888888vw;
}

.area13 strong {
    font-size: 1.3888888vw;
    font-weight: 600;
    line-height: 1.5;
    display: block;
    margin-top: 1vw;
    height: 6.25vw;
}

.area13 span {
    font-size: 0.9722222vw;
    display: block;
    margin-top: 0vw;
}

.area13 ul {
    display: flex;
}

.area13 ul li {
    opacity: 0;
    margin-top: 2vw;
}

.area13.on ul li:nth-child(1) {
    opacity: 1.0;
    margin-top: 0;
    transition: 0.7s;
}

.area13.on ul li:nth-child(2) {
    opacity: 1.0;
    margin-top: 0;
    transition: 0.7s;
    transition-delay: 0.1s;
}

.area13.on ul li:nth-child(3) {
    opacity: 1.0;
    margin-top: 0;
    transition: 0.7s;
    transition-delay: 0.2s;
}

.area13 ul li {
    width: 15.625vw;
}

.area13 ul li:not(:last-child) {
    margin-right: 5.55555555vw;
}

.area13 ul li img {
    height: 22.5vw;
    display: block;
}