h1{
    font-size:3rem;
    max-width: 1300px;
    margin:0 auto;
    line-height: 1;
    padding:55px 70px 95px;
    font-weight: 500;
    letter-spacing: 5px;
}
h1 span{
    font-size:1.5rem;
    vertical-align: middle;
    margin-right:20px;
    color:#000266;
}
#content{
    width: 100%;
    margin: 0 auto;
    position: relative;
}
#content .title{
    text-align: right;
    position: relative;
    overflow: hidden;
}
#content .title picture{
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
#content .title picture.show{
    opacity: 1;
    visibility: visible;
    margin-top:-22vw;
    margin-right:-4vw;
}
#content .title picture.ac1{ z-index: 5; }
#content .title picture.ac2{ z-index: 4; }
#content .title picture.ac3{ z-index: 3; }
#content .title picture.ac4{ z-index: 2; }
#content .title picture.ac5{ z-index: 1; }
#content .title picture.ac6{ z-index: 6; }
#content .title picture.ac7{ z-index: 7; }
#content .title picture.ac8{ z-index: 8; }
#content .title picture.ac1,
#content .title picture.ac2,
#content .title picture.ac3,
#content .title picture.ac4,
#content .title picture.ac,
#content .title picture.ac6,
#content .title picture.ac7,
#content .title picture.ac8{
    position: absolute;
    top: 0;
    right: 0;
}
#content .title img{
    display: block;
    width: 90vw;
    margin-left: auto;
}
#content nav{
    position: fixed;
    top: 60%;
    left: 0%;
    transform: translateY(-50%);
    z-index: 10;
    width: min(22.25vw, 31vh, 300px);
}
#content nav .navBg{
    display: block;
    width: 100%;
}
#content nav dl{
    position: absolute;
    top: 30%;
    left: 15%;
}
#content nav dl dt img{
    display: block;
    width: 50%;
    margin-bottom: 11.5%;
}
#content nav dl dd ul li a{
    display: block;
}
#content nav dl dd ul li img{
    height: min(1.6vw, 1.9vh, 18px);
    margin-bottom: 7.7%;
    transition: opacity 0.3s ease;
}
#content nav dl dd ul li.current img{
    opacity: 0.4;
}
#content nav.nav-stopped{
    position: absolute;
}
@media all and (max-width: 1000px){
    h1{
        font-size:1.5rem;
        max-width: 1300px;
        margin:0 auto;
        line-height: 1;
        padding:0px 30px 30px;
        font-weight: 700;
        letter-spacing: 3px;
    }
    h1 span{
        font-size:1.1rem;
        display: block;
        margin-bottom:10px;
        color:#000266;
    }
}



/* section1 animation
+=================================== */
.section{
    overflow: hidden;
    margin-bottom:12.5vw;
}
.section-animation{
    position: relative;
    margin-left: auto;
    width: 57.75vw;
    max-width: 693px;
    margin-right: -14px;
}
.section-animation img{
    display: block;
    width: 100%;
}
.section-animation .bg{
    width: 57.75vw;
    margin-left: auto;
}
.section-animation .bg2{
    position: absolute;
    top: 0;
    right: 0;
    width: 57.75vw;
}
.section-animation .ac1,
.section-animation .ac2{
    position: absolute;
    right: 0;
}
.section-animation .text1,
.section-animation .text2,
.section-animation .text3,
.section-animation .bg,
.section-animation .bg2,
.section-animation .ac1,
.section-animation .ac2{
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 1s ease, visibility 1s ease, transform 1s ease;
}
.section-animation .text1.show,
.section-animation .text2.show,
.section-animation .text3.show,
.section-animation .bg.show,
.section-animation .bg2.show,
.section-animation .ac1.show,
.section-animation .ac2.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* section1 */
.section1 .section-animation {
    padding-top:2.1vw;
}
.section1 .section-animation .bg2{
    width: 38.73vw;
    top: 0vw;
    left: 15.4vw;
}
.section1 .section-animation .ac1{
    width: 34.53vw;
    top: 31.29vw;
    left: 13.3vw;
}
.section1 .section-animation .ac2{
    width: 40.37vw;
    top: 17.15vw;
    left: 9.24vw;
}
/* section2 */
.section2 .section-animation {
    padding-top:1.75vw;
}
.section2 .section-animation .bg2{
    width: 33.19vw;
    top: 0vw;
    left: 4.9vw;
}
.section2 .section-animation .ac1{
    width: 43.93vw;
    top: 31.15vw;
    left: 4.9vw;
}
.section2 .section-animation .ac2{
    width: 26.83vw;
    top: 14vw;
    left: 13.09vw;
}
/* section3 */
.section3 .section-animation {
    padding-top:1.4vw;
}
.section3 .section-animation .bg2{
    width: 47.25vw;
    top: 0vw;
    left: 3.5vw;
}
.section3 .section-animation .ac1{
    width: 14.64vw;
    top: 42.35vw;
    left: 7.42vw;
}
.section3 .section-animation .ac2{
    width: 24.27vw;
    top: 13.79vw;
    left: 14.7vw;
}
/* section4 */
.section4 .section-animation {
    padding-top:2.52vw;
}
.section4 .section-animation .bg2{
    width:36.98vw;
    top: 0vw;
    left: 16.8vw;
}
.section4 .section-animation .ac1{
    width: 40.43vw;
    top: 24.78vw;
    left: 8.68vw;
}
.section4 .section-animation .ac2{
    width: 20.59vw;
    top: 12.53vw;
    left: 23.52vw;
}
.section4 .text{
    display: none;
}
/* section5 */
.section5 .section-animation {
    padding-top:1.26vw;
}
.section5 .section-animation .bg2{
    width:33.48vw;
    top: 0vw;
    left: 4.2vw;
}
.section5 .section-animation .ac1{
    width: 43.05vw;
    top: 37.8vw;
    left: 6.3vw;
}
.section5 .text1,
.section5 .text2,
.section5 .text3{
    display: none;
}
.section5 .section-animation .ac2{
    width: 33.66vw;
    top:14vw;
    left: 7vw;
}
.flytothenext{
    margin-top:20vw;
}
#next, .flytothenext .section-animation{
    text-align: center;
    max-width: 1300px;
    margin:0 auto 10vw;
}
.flytothenext .section-animation{
    width: 100%;
    position: relative;
}
.flytothenext .section-animation .ac1{
    position: absolute;
    width: min(30.58vw, 397.54px);
    top: max(-14vw, -182px);
    left: 0;
    right: 0;
    margin: 0 auto;
}
.flytothenext .section-animation .ac2{
    position: absolute;
    width: min(62.2vw, 808.6px);
    top: min(33vw, 429px);
    left: min(10vw, 130px);
}

#next a{
    transition: .3s ease-in-out;
    opacity: 1;
}
#next a:hover{
    opacity: 0.75;
}

/* PC max (1200px cap)
+=================================== */
@media all and (min-width: 1200px){
    #content .title{
        max-width: 1080px;
        margin-left: auto;
        margin-right: calc(50% - 1080px / 2 - 130px);
    }
    #content .title img{
        width: 100%;
    }
    #content .title picture.show{
        margin-top:-264px;
        margin-right:0px;
    }
    .section{
        margin-bottom:150px;
    }
    .section-animation{
        width: 693px;
        margin-left: auto;
        margin-right: calc(50% - 693px / 2 - 140px);
    }
    .section-animation .bg{
        width: 693px;
    }
    .section-animation .bg2{
        width: 693px;
    }
    /* section1 */
    .section1 .section-animation{
        padding-top:25px;
    }
    .section1 .section-animation .bg2{
        width: 465px;
        top: 0px;
        left: 185px;
    }
    .section1 .section-animation .ac1{
        width: 414px;
        top: 375px;
        left: 160px;
    }
    .section1 .section-animation .ac2{
        width: 484px;
        top: 206px;
        left: 111px;
    }
    /* section2 */
    .section2 .section-animation{
        padding-top:21px;
    }
    .section2 .section-animation .bg2{
        width: 398px;
        top: 0px;
        left: 59px;
    }
    .section2 .section-animation .ac1{
        width: 527px;
        top: 374px;
        left: 59px;
    }
    .section2 .section-animation .ac2{
        width: 322px;
        top: 168px;
        left: 157px;
    }
    /* section3 */
    .section3 .section-animation{
        padding-top:17px;
    }
    .section3 .section-animation .bg2{
        width: 567px;
        top: 0px;
        left: 42px;
    }
    .section3 .section-animation .ac1{
        width: 176px;
        top: 508px;
        left: 89px;
    }
    .section3 .section-animation .ac2{
        width: 291px;
        top: 165px;
        left: 176px;
    }
    /* section4 */
    .section4 .section-animation{
        padding-top:30px;
    }
    .section4 .section-animation .bg2{
        width: 444px;
        top: 0px;
        left: 202px;
    }
    .section4 .section-animation .ac1{
        width: 485px;
        top: 298px;
        left: 104px;
    }
    .section4 .section-animation .ac2{
        width: 247px;
        top: 151px;
        left: 282px;
    }
    /* section5 */
    .section5 .section-animation{
        padding-top:15px;
    }
    .section5 .section-animation .bg2{
        width: 402px;
        top: 0px;
        left: 50px;
    }
    .section5 .section-animation .ac1{
        width: 517px;
        top: 454px;
        left: 76px;
    }
    .section5 .section-animation .ac2{
        width: 404px;
        top: 168px;
        left: 84px;
    }
    /* flytothenext */
    .flytothenext{
        margin-top:240px;
    }
}

/* SP
+=================================== */
@media all and (max-width: 767px){
    #content .title picture.show{
        margin-top:-15vw;
    }
    #content .title img{
        width: 100vw;
    }
    #content nav{
        display: none;
    }
    .section-animation{
        width: 100%;
        margin-right: 0;
    }
    .section-animation .bg{
        width: 104%;
        margin-left: -2%;
        display: block;
    }
    /* section1 sp */
    .section1 .section-animation{
        padding-top:5vw;
    }
    .section1 .section-animation .bg2{
        width: 88.1vw;
        top: 0vw;
        left: 10vw;
    }
    .section1 .section-animation .ac1{
        width: 70.93vw;
        top: 61vw;
        left: 18vw;
    }
    .section1 .section-animation .ac2{
        width: 82.13vw;
        top: 27vw;
        left: 11vw;
    }
    /* section2 sp */
    .section2 .section-animation{
        padding-top:3w;
    }
    .section2 .section-animation .bg2{
        width: 72.2vw;
        top: 0vw;
        left: 6vw;
    }
    .section2 .section-animation .ac1{
        width: 83.2vw;
        top: 58vw;
        left: 8vw;
    }
    .section2 .section-animation .ac2{
        width: 81.07vw;
        top: 28vw;
        left: 10vw;
    }
    /* section3 sp */
    .section3 .section-animation {
    padding-top:1vw;
    }
    .section3 .section-animation .bg2{
        width: 76.5vw;
        top: 0vw;
        left: 2.5vw;
    }
    .section3 .section-animation .ac1{
        width: 36.8vw;
        top: 78vw;
        left: 14.5vw;
    }
    .section3 .section-animation .ac2{
        width: 58.93vw;
        top: 25vw;
        left: 20vw;
    }
    /* section4 sp */
    .section4{
        padding-top:15vw;
    }
    .section4 .section-animation .bg2{
        width:36.26vw;
        top: 0vw;
        left: 61vw;
    }
    .section4 .text{
        display: block;
        width: 93.8vw;
        margin:-17vw auto 0;
    }
    .section4 .section-animation .ac1{
        width: 89.87vw;
        top: 27vw;
        left: 5.4vw;
    }
    .section4 .section-animation .ac2{
        width: 43.73vw;
        top: -15vw;
        left: 50vw;
    }
    /* section5 sp */
    .section5 .section-animation{
        padding-top:3vw;
    }
    .section5 .section-animation .bg2{
        width:77.4vw;
        top: -1vw;
        left: 5vw;
    }
    .section5 .section-animation .ac1{
        width: 100vw;
        top: 31vw;
        left: 0vw;
    }
    .section5 .section-animation .ac2{
        width: 40.8vw;
        top: 23vw;
        left: 5vw;
    }
    .section5 .text1,
    .section5 .text2,
    .section5 .text3{
        display: block;
    }
    .section5 .section-animation .text1{
        width: 83.7vw;
        margin: 8vw auto 10vw;
    }
    .section5 .section-animation .text2{
        width: 48.2vw;
        margin: 13vw auto 0;
    }
    .section5 .section-animation .text3{
        position: absolute;
        width: 36.8vw;
        top:0vw;
        left:30vw;
    }
    .flytothenext{
        margin-top:50vw;
    }
    .flytothenext .section-animation .bg{
        width: 100%;
        margin: 0 auto;
    }
    .flytothenext .section-animation .ac1{
        position: absolute;
        width: 59.2vw;
        top: -27vw;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .flytothenext .section-animation .ac2{
        position: absolute;
        width: 54.1vw;
        top: 72vw;
        left: 6vw;
    }
    #next, .flytothenext img{
        width: 100%;
    }
}