@charset "UTF-8";
/*html {
  touch-action: manipulation;
}*/
html, body {
    margin: 0;
    padding: 0;
    touch-action: manipulation;
}
body{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
img{
/*    width: 100%;*/
max-width: 100%;

}
.absolute{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.relative{
    position: relative;
}
.headerTop .header {
    position: fixed;
    top: 0;
    z-index: 200;
}
.scrollDiv {
/*    height: 1600vh;*/
    height: 1500vh;
}
.area {
    height: calc(100% / 15);
}
/*.area:last-child {
    padding-bottom: calc(100% / 15);
}*/

#bg {
    position: fixed;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    /* position: absolute; */
    top: 0;
    pointer-events: none;
    user-select: none;
}
#bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
}
#bg .bg_sky img {
    height: 100vh;
    width: 100%;
}
.cloud{
    animation: cloudMove 2s ease infinite;
    animation-direction:alternate;
}
#bg .cloud img {
    object-fit: cover;
}
.cloud.cloud01 {
    top: -17%;
}
@keyframes cloudMove {
    to{
        transform: translateY(5px);
    }
}
.cloud02{animation-delay:0.5s}
.cloud03{animation-delay:0.8s}
.cloud04{animation-delay:1.1s}
.cloud05{animation-delay:1.4s}
.cloud06{animation-delay:1.7s}

.contentItem {
/*    padding-top: 135px;*/
/*    margin-top: -135px;*/
    height: 100vh;
    position: relative;
    overflow: hidden;
}
#wrapper {
    pointer-events: none;
}
.roaded #wrapper {
    pointer-events: all;
}

.contentItemInner {
/*    width: 500%;*/
/*    height: 100vh;*/
/*    display: flex;*/
/*    flex-wrap: nowrap;*/
/*    will-change: auto;*/
}
.scene {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* scene01  */
.scene.scene01 {
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: flex-end;*/
/*    height: calc(100% - 135px);*/
/*    max-width: 1000px;*/
/*    margin: auto;*/
}
.hero {
    position: fixed;
    bottom: 20%;
    z-index: 10;
    width: 55vw;
    /* height: 70vh; */
/*    pointer-events: none;*/
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: auto;
    left: 0;
    right: 0;
    z-index: 50;
}
.roaded .hero {
    pointer-events: none;
}

#heroWrap {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
}
.heroLogo {
    padding: 0 2%;
    /* position: absolute; */
    /* bottom: -5%; */
    /* left: -15%; */
    /* right: -15%; */
    max-width: 430px;
}
#content {
    /* margin-top: 135px; */
    position: fixed;
    width: 100%;
    height: 100%;
}
.scene {
    width: 100vw;
    height: 100vh;
    padding: 0 19vw;
    box-sizing: border-box;
    position: absolute;
    pointer-events: none;
    user-select: none;
}
.scene.slide-active{
    pointer-events: all;
}


.ranger_red, .ranger_green {
/*    margin: 0 4vw;*/
/*    max-width: 300px;*/
}
#heroWrap {
    position: fixed;
     left: 22%;
    /* left: 0%; */
    bottom: 20%;
    width: 55%;
    transition: all 1s;
    /* transform: translate(0vw, 0vh) scale(1.0); */
}
.roaded #heroWrap {
    /* left: 0%; */
    /* width: 35%; */
    /* animation: heroMove 1s ease-in forwards; */
    /* width: 100%; */
    /* transform: translate(-37vw, 3vh) scale(0.6); */
    /* transform: scale(0.6); */
    /* left: 0; */
    /* justify-content: flex-start; */
    /* transform-origin: center bottom; */
    left: 0%;
    bottom: clamp(100px, 10%, 210px);
    width: clamp(480px, 23%, 500px);
}
/*@keyframes heroMove {
    0%{
        transform: translate(0vw,0vh) scale(1.0);
    }
    100%{
        transform: translate(-32vw,12vh) scale(0.5);
    }

}*/
.scene_3 #heroWrap {
    width: 100%;
    left: 0;
    bottom: 0;
    justify-content: space-between;
}
#heroRed {
    transform: translateX(15%) translateY(-200%);
    transition: 0.5s;
}
.scene_3 #heroRed {
    width: 35%;
    max-width: 500px;
    transform: translateX(15%) translateY(0%);
    
}

#heroGreen {
    transform: translateX(-15%) translateY(-200%);
    transition: 0.5s;
}
.scene_3 #heroGreen {
    width: 35%;
    max-width: 500px;
    transform: translateX(-15%) translateY(0%);
}

[class^="scene_"]:not(.scene_3) #heroRed,
[class^="scene_"]:not(.scene_3) #heroGreen{
    transform: translateX(0%) translateY(0%);
}



#slideWrap {
    position: fixed;
    top: 1%;
    left: 0;
    width: 100vw;
    height: 99vh;
    z-index: 20;
}
.ranger_red{
    transition: all 1s;
/*    transform: translate(0vw,0vh);*/
/*    transform-origin: center bottom;*/
}
.roaded #heroWrap .ranger_red {
    /* transform: translate(-14vw, 12vh); */
    left: -30%;
/*    left: 0%;*/
    bottom: -40px;
}
#heroWrap.heroAction .ranger_red{
    animation: heroAction 0.3s ease-in forwards;
}
@keyframes heroAction {
    0%{
        transform: translate(-11vw,8vh);
    }
    50%{
        transform: translate(-11vw,0vh);
    }
    100%{
        transform: translate(-11vw,8vh);
    }

}

.heroLogoWrap {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    bottom: -6%;
    width: 100%;
    transition: all 1s;
    opacity: 1;
    display: none;
}
.roaded .heroLogoWrap {
    opacity: 0;
}
.contactTOpButton {
    position: absolute;
    bottom: -70px;
    /* transition: all 1s; */
    max-width: 370px;
    width: 90%;
}
.roaded .contactTOpButton {
    opacity: 0;
}

.fukidashi {
    /* position: absolute; */
    /* width: 50vw; */
    /* bottom: 20%; */
    /* left: 0; */
    transition: all 0.5s;
    transform: translate(-36%, 30%) scale(.2);
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position:relative;
/*    height: 100%;*/
}
.slide-active .fukidashi {
    /* position: absolute; */
    /* width: 50vw; */
    /* bottom: 20%; */
    /* left: 0; */
    transform: translate(0%, 0%) scale(1);
    opacity: 1;
/*        max-width: 1000px;*/
            max-width: 110vh;
}
.slide-active .fukidashi.fukidashi04 {
    max-width: 98vh;
}
.hideAnimation .fukidashi {
    transform: translate(36%, 20%) scale(.2);
    opacity: 0;
}

.scrollPosition02 .fukidashi02,
.scrollPosition03 .fukidashi03,
.scrollPosition04 .fukidashi04,
.scrollPosition05 .fukidashi05 {
    width: 50vw;
    bottom: 20%;
    left: 0;
    transform: translate(50%, -10%) scale(1);
    opacity: 1;
    transition: all 0.5s 1s;
}
.scrollPosition02_hide .fukidashi02,
.scrollPosition03_hide .fukidashi03,
.scrollPosition04_hide .fukidashi04,
.scrollPosition05_hide .fukidashi05 {
    width: 50vw;
    bottom: 20%;
    left: 0;
    transform: translate(90%, 10%) scale(0);
    opacity: 0;
    transition: all 0.5s 1s;
}


.buttonWrap {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s;
}
.roaded .buttonWrap {
    opacity: 1;
    pointer-events: all;
}
.button {
    padding: 10px;
    max-width: 100px;
}

#peopleWrap {
/*    position: fixed;
    z-index: 50;
    bottom: 6%;
    right: 0;
    border: 1px solid #F00;
    width: 30%;
    height: 40%;*/
    transform-style: preserve-3d;
}
#peopleInner {
/*    position: fixed;*/
/*    z-index: 50;*/
/*    bottom: 0;*/
/*    right: 0;*/
/*    border: 1px solid #F00;*/
/*    width: 40%;*/
/*    height: 50%;*/
    transform-style: preserve-3d;
    will-change: transform;
/*    transform: rotateX(0deg) rotateY(0deg);*/
/*    transform-style: preserve-3d;*/
/*    animation: rotate 12s linear;*/
transform: rotateY(360deg);
transition: all 0.5s;
}

.people {
    transform-style: preserve-3d;
   position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
        transition: all 0.5s;
/*    font-size: 24px;*/
/*    color: white;*/
/*    border: 2px solid white;*/
/*    transform: translateZ(150px);*/
/*animation: rotate 12s infinite reverse;*/
}
.peopleInner {
    transform-style: preserve-3d;
/*    animation: rotate 12s linear reverse;*/
    position: relative;
    transform: rotateY(0deg);
    transition: all 0.5s;
    pointer-events: none;
    user-select: none;
}
@keyframes rotate {
    from {
        transform: rotateY(360deg);
    }
    to {
        transform: rotateY(0deg);
    }
}
.bank {
  transform-style: preserve-3d;
  transform: rotateX(-25deg);
  position: fixed;
    z-index: 50;
    bottom: -16%;
/*    right: -30%;*/
    left: 160%;
/*    border: 1px solid #F00;*/
    width: 30%;
    height: 40%;
        transition: all 1s;
}
.roaded .bank{
    left: 70%;
}
.bank-follow {
  transform-style: preserve-3d;
  transform: rotateX(25deg);
    width: 210px;
    height: 350px;
    overflow: hidden;
    position: relative;
}
/*.balloon {
    position: absolute;
    top: -170px;
    left: -30px;
    right: -30px;
    opacity: 0;
}*/
.balloon {
    position: absolute;
    top: -170px;
    left: 130px;
    right: initial;
    opacity: 0;
    width: 130%;
}
.balloonInner {
    position: relative;
    transform-style: preserve-3d;
}
.heroTextWrap{
    opacity: 0;
}
.hero_balloon_active .heroTextWrap{
    opacity: 1;
}
.heroTextWrap .balloonInner {
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s;
}

.balloonInner.active{
    opacity: 1;
}
.balloonText,
.balloonText_after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75%;
    display: flex;
    justify-content: center;
    align-items: center;
/*    font-family: 'Noto Sans JP';*/
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    color: var(--textColor_bold,#2d190f);
    font-feature-settings: "palt";
}
#people04.balloon_text_after .balloonText_after {
    top: -10px;
}
.active_balloon .balloon {
    opacity: 1;
        transition: 0.5s 1s;
}
.balloonText.heroText {
    height: 90%;
}
/*.people:nth-child(1) { transform:translateX(-100px)translateZ(100px); }*/
/*.people:nth-child(2) { transform:translateX(100px) translateZ(100px); }*/
/*.people:nth-child(3) { transform:translateX(100px)translateZ(-100px); }*/
/*.people:nth-child(4) { transform:translateX(-100px)translateZ(-100px); }*/
.people:nth-child(1) { transform:translateX(-100px)translateZ(100px); }
.people:nth-child(2) { transform:translateX(70px) translateZ(150px); }
.people:nth-child(3) { transform:translateX(120px)translateZ(-70px); }
.people:nth-child(4) { transform:translateX(-50px)translateZ(-100px); }



.people.active .img{
    animation: peopleInner-move 3s 1.0s steps(103) forwards;
}
@keyframes peopleInner-move {
  to {
    transform: translateY(-36050px);
  }
}
.people.active .bank-follow:before {
    content: '';
    background-image: url(/img/top/bikkuri01.png);
    background-size: cover;
    display: block;
    width: 55%;
    height: 35%;
    position: absolute;
    top: 10%;
    left: -5%;
    z-index: 10;
    animation: blink 0.2s 0.2s 3 forwards;
}
@keyframes blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#houseWrap {
    width: 700px;
    height: 286px;
/*    height: 27%;*/
    overflow: hidden;
    position: absolute;
    bottom: 7%;
    right: -100%;
    transition: 1s;
}
#houseWrap.center{
    right: 30%;
}
#houseWrap.left {
    right: 45%;
}
.house {
    text-align: center;
}
.house img{
    width: 100%;
}

#end_card {
    /* margin: auto; */
    position: absolute;
/*    bottom: -100%;*/
    top:150%;

    /* left: 0; */
    right: 0;
    width: 700px;
    box-sizing: border-box;
    padding-right: 60px;
    padding-left: 0;
    height: auto;
    transition: all 0.5s;
}
#end_card.active {
    /* bottom: 12%; */
    /* bottom: 40vh; */
    top: 21%;
    pointer-events: all;
    max-width: 82vh;
}
.end_card #bg.meeting .bg_town {
    right: -5vw;
}
.end_card #bg.meeting .bg_road {
    right: 0VW;
}


#houseWrap.active .house{
    animation: house_animation 1s 1.5s steps(8) forwards;
    text-align: center;
}
@keyframes house_animation {
  to {
    transform: translateY(-2288px);
  }
}

#hero.meeting #heroWrap {
/*    transform: translate(-100px, 2vh) scale(0.6);*/
left: 5%;
bottom: 0;
}
#hero.meeting #heroWrap .ranger_red {
    /* transform: translate(-270px, 0); */
/*    left: 0;*/
    left: -26%;
    bottom: 0;
}
.ranger_green{
    transition: all 1s;
}
#hero.meeting #heroWrap .ranger_green {
    /* transform: translate(-270px, 0); */
/*    right: -20%;*/
    right: 0%;
}

#bank.meeting{
    left: 65%;
}
#bank.meeting #people01 {
    transform: translateX(30px) translateZ(20px);
}
#bank.meeting #people02 {
    transform: translateX(60px) translateZ(120px);
}
#bank.meeting #people03 {
    transform: translateX(80px) translateZ(-90px);
}
#bank.meeting #people04 {
    transform: translateX(50px) translateZ(-180px);
}

#bg .bg_town {
    bottom: -2vh;
}
#bg.meeting .bg_town {
    right: -8VW;
    text-align: right;
}


#bg.meeting .bg_road {
    right: 0VW;
}

/*#bg .bg_town,
#bg .bg_mountain,
#bg .bg_fuji,
#bg .bg_road {
    top: unset;
    height: auto;
}
#bg .bg_town,
#bg .bg_mountain,
#bg .bg_fuji2,
#bg .bg_road2 {
    top: 0;
}*/
#bg .bg_town img,
#bg .bg_mountain img,
#bg .bg_fuji img {
    width: auto;
/*    height: 80vh;*/
}
.bg_fuji.absolute {
background-image: url(../img/top/bg004_fuji.png);
background-size: cover;
background-position: 0% 100%;
/*transition: all 1s;*/
background-repeat: no-repeat;
}
#bg .bg_mountain.absolute {
background-image: url(../img/top/bg005_mountain.png);
background-size: cover;
background-position: 0% 100%;
/*transition: all 1s;*/
background-repeat: repeat-x;
}
#bg .bg_town_back.absolute {
background-image: url(../img/top/bg006_town_back.png);
background-size: cover;
background-position: 0% 100%;
/*transition: all 1s;*/
background-repeat: repeat-x;
}
#bg .bg_town.absolute {
background-image: url(../img/top/bg007_town_front.png);
background-size: cover;
background-position: 0% 100%;
/*transition: all 1s;*/
background-repeat: repeat-x;
}

#bg .bg_road.absolute {
background-image: url(../img/top/bg008_road.png);
background-size: cover;
background-position: 0% 100%;
/*transition: all 1s;*/
background-repeat: repeat-x;
pointer-events: none;
}

/*scene_1*/
.scene_1 #bg .bg_town_back.absolute,
.scene_2 #bg .bg_town_back.absolute,
.scene_3 #bg .bg_town_back.absolute {
/*                                    background-position: 1% 100%;*/
}
.scene_1 #bg .bg_town.absolute,
.scene_2 #bg .bg_town.absolute,
.scene_3 #bg .bg_town.absolute {
/*                                    background-position: 2% 100%;*/
}
.scene_1 #bg .bg_road.absolute,
.scene_2 #bg .bg_road.absolute,
.scene_3 #bg .bg_road.absolute {
/*                                    background-position: 4% 100%;*/
}
/*scene_4*/
.scene_4 #bg .bg_town_back.absolute,
.scene_5 #bg .bg_town_back.absolute,
.scene_6 #bg .bg_town_back.absolute {
/*                                    background-position: 2% 100%;*/
}
.scene_4 #bg .bg_town.absolute,
.scene_5 #bg .bg_town.absolute,
.scene_6 #bg .bg_town.absolute {
/*                                    background-position: 4% 100%;*/
}
.scene_4 #bg .bg_road.absolute,
.scene_5 #bg .bg_road.absolute,
.scene_6 #bg .bg_road.absolute {
/*                                    background-position: 8% 100%;*/
}
/*scene_7*/
.scene_7 #bg .bg_town_back.absolute,
.scene_8 #bg .bg_town_back.absolute,
.scene_9 #bg .bg_town_back.absolute {
/*                                    background-position: 3% 100%;*/
}
.scene_7 #bg .bg_town.absolute,
.scene_8 #bg .bg_town.absolute,
.scene_9 #bg .bg_town.absolute {
/*                                    background-position: 6% 100%;*/
}
.scene_7 #bg .bg_road.absolute,
.scene_8 #bg .bg_road.absolute,
.scene_9 #bg .bg_road.absolute {
/*                                    background-position: 12% 100%;*/
}
/*scene_10*/
.scene_10 #bg .bg_town_back.absolute,
.scene_11 #bg .bg_town_back.absolute,
.scene_12 #bg .bg_town_back.absolute {
/*                                    background-position: 4% 100%;*/
}
.scene_10 #bg .bg_town.absolute,
.scene_11 #bg .bg_town.absolute,
.scene_12 #bg .bg_town.absolute {
/*                                    background-position: 8% 100%;*/
}
.scene_10 #bg .bg_road.absolute,
.scene_11 #bg .bg_road.absolute,
.scene_12 #bg .bg_road.absolute {
/*                                    background-position: 16% 100%;*/
}
/*meeting*/
#bg.meeting .bg_town_back.absolute{
/*                                        background-position: 5% 100%;*/
}
#bg.meeting .bg_town.absolute{
/*                                        background-position: 10% 100%;*/
}
#bg.meeting .bg_road{
/*                                        background-position: 20% 100%;*/
}
/*scene_16*/
.scene_16 #bg .bg_town_back.absolute{
/*                                    background-position: 6% 100%;*/
}
.scene_16 #bg .bg_town.absolute {
/*                                    background-position: 12% 100%;*/
}
.scene_16 #bg .bg_road.absolute {
/*                                    background-position: 24% 100%;*/
}

#bg .bg_road img {
    width: auto;
    height: 70vh;
    min-width: 140vw;
    display: block;
}

/*#bg .bg_town,
#bg .bg_road {
    right: -40vw;
    left: initial;
    width: 140vw;
    transition: all 1s;
}*/

#contentWrap.end #bank {
    transform: scale(0.4);
    transform-origin: -200% 14%;
    /* opacity: 0; */
}
.people .img{
    transition: all 0.5s;
}
#contentWrap.end .people .img{
    opacity: 0;
}
#contentWrap.end #heroWrap {
    transform: translate(7vw, 2vh) scale(0.4);
    opacity: 0;
}

.drone {
    position: fixed;
/*    top: 15%;*/
    left: -65%;
    z-index: 300;
    transition: all 2s;
    width: clamp(120px, 13vw, 180px);
}
.drone.drone_red {
    position: fixed;
    bottom: 47%;
    left: -65%;
    z-index: 300;
    transition: all 2s;
    width: clamp(120px, 13vw, 180px);
}
.drone_red:hover:after {
    content: '準備中';
    padding: 20px;
    background: #FFF;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    height: 20px;
    width: 50px;
    margin: auto;
    border-radius: 100px;
    border: 5px solid #ff7979;
}
.drone.drone_green {
    position: fixed;
    bottom: 65%;
    left: -65%;
    z-index: 300;
    transition: all 2s;
    width: clamp(120px, 13vw, 180px);
}
.drone_green:hover:after {
    content: '準備中';
    padding: 20px;
    background: #FFF;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    height: 20px;
    width: 50px;
    margin: auto;
    border-radius: 100px;
    border: 5px solid #30b42f;
}
.roaded .drone {
/*    bottom: 47%;
    top: initial;
    left: 0%;*/
}
.roaded .scene_11 + .drone,
.roaded .scene_12 + .drone,
.roaded .scene_13 + .drone,
.roaded .scene_14 + .drone,
.roaded .scene_15 + .drone,
.roaded .scene_16 + .drone,
.roaded .scene_17 + .drone,
.roaded .scene_18 + .drone,
.roaded .scene_19 + .drone {
/*    bottom: 47%;*/
/*    top: initial;*/
    left: 0%;
}
.roaded .scene_11 + .drone + .drone,
.roaded .scene_12 + .drone + .drone,
.roaded .scene_13 + .drone + .drone,
.roaded .scene_14 + .drone + .drone,
.roaded .scene_15 + .drone + .drone,
.roaded .scene_16 + .drone + .drone,
.roaded .scene_17 + .drone + .drone,
.roaded .scene_18 + .drone + .drone,
.roaded .scene_19 + .drone + .drone
/*.roaded .drone.drone_green*/
 {
/*    bottom: 65%;*/
    left: 0%;
}





.droneAnimation{
    animation: droneAnimation 5s ease-in-out infinite;
    animation-direction:alternate;
}

@keyframes droneAnimation {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(30px);
    }
}


.sun {
    width: 12vw;
    max-width: 200px;
    position: fixed;
    top: 25%;
    left: 0%;
    transition: all 10s;
}
.scene_1 .sun {
    top: 25%;
    left: 0%;
}
.scene_2 .sun {
    top: 24%;
    left: 2%;
}
.scene_3 .sun {
    top: 23%;
    left: 4%;
}
.scene_4 .sun {
    top: 22%;
    left: 6%;
}
.scene_5 .sun {
    top: 21%;
    left: 8%;
}
.scene_6 .sun {
    top: 20%;
    left: 10%;
}
.scene_7 .sun {
    top: 19%;
    left: 12%;
}
.scene_8 .sun {
    top: 18%;
    left: 14%;
}
.scene_9 .sun {
    top: 17%;
    left: 16%;
}
.scene_10 .sun {
    top: 16%;
    left: 18%;
}
.scene_11 .sun {
    top: 15%;
    left: 20%;
}
.scene_12 .sun {
    top: 14%;
    left: 22%;
}
.scene_13 .sun {
    top: 13%;
    left: 24%;
}
.scene_14 .sun {
    top: 12%;
    left: 26%;
}
.scene_15 .sun {
    top: 11%;
    left: 28%;
}
.scene_16 .sun {
    top: 10%;
    left: 30%;
}
.scene_17 .sun {
    top: 9%;
    left: 32%;
}
.scene_18 .sun {
    top: 8%;
    left: 34%;
}
.scene_19 .sun {
    top: 7%;
    left: 36%;
}

/*.slide02 .sun {
    top: 23%;
    left: -3%;
}
.slide03 .sun {
    top: 21%;
    left: -1%;
}
.slide04 .sun {
    top: 19%;
    left: 1%;
}
.slide05 .sun {
    top: 17%;
    left: 3%;
}*/
.linkButton {
    display: block;
    position: absolute;
}
.scene01 .button_1 {
    width: 38%;
    height: 18%;
    left: 4%;
    top: 60%;
}
.scene01 .button_2 {
    width: 20%;
    height: 18%;
    left: 58%;
    top: 78%;
}
.scene02 .button_3 {
    width: 20%;
    height: 16%;
    left: 40%;
    top: 81%;
}
.scene03 .button_4 {
    width: 20%;
    height: 16%;
    left: 40%;
    top: 81%;
}
.scene04 .button_5 {
    width: 20%;
    height: 16%;
    left: 40%;
    top: 81%;
}
.scene04 .button_5 {
    width: 20%;
    height: 16%;
    left: 12%;
    top: 60%;
}
.scene05 .button_6 {
    width: 20%;
    height: 16%;
    left: 40%;
    top: 30%;
}

/*=================** op  **=================*/
.scene_1 .scene
.scene_2 .scene{
    display: none;
}

.op {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
}
.first #hero,
.scene_1 #hero,
.scene_2 #hero {
    display: none;
}

#content.scene_3 .op_01_bg,
#content.scene_4 .op_01_bg,
#content.scene_5 .op_01_bg,
#content.scene_6 .op_01_bg,
#content.scene_7 .op_01_bg,
#content.scene_8 .op_01_bg,
#content.scene_9 .op_01_bg,
#content.scene_10 .op_01_bg,
#content.scene_11 .op_01_bg,
#content.scene_12 .op_01_bg,
#content.scene_13 .op_01_bg,
#content.scene_14 .op_01_bg,
#content.scene_15 .op_01_bg,
#content.scene_16 .op_01_bg,
#content.scene_17 .op_01_bg,
#content.scene_18 .op_01_bg,
#content.scene_19 .op_01_bg,
#content.scene_20 .op_01_bg{
    opacity: 0;
}

.op_01_bg {
/*    background-image: url(../img/top/op_01_bg.jpg);*/
    background-color: #444a4a;
}
.op_01_bg img {
    object-fit: cover;
    display: block;
    width: auto;
    height: 100%;
    object-position: bottom center;
}
.op_01_fukidashi {
/*    background-image: url(../img/top/op_01_fukidashi.png);*/
/*    background-size: contain;*/
    background-position: 50% 40px;
    opacity: 0;
    transition: 1s 0.5s;
}
.loaded .op_01_fukidashi,
.scene_1 .op_01_fukidashi {
    opacity: 1;
    
}
.op_01_man_1{
/*    background-image: url(../img/top/op_01_man_1.png);*/
    opacity: 0;
}

.loaded .op_01_man_1,
.scene_1 .op_01_man_1{
    opacity: 1;
    transition: 1s 0.3s;
}
.op_01_man_1 img,
.op_01_man_2 img,
.op_01_man_3 img,
.op_01_man_1 picture,
.op_01_man_2 picture,
.op_01_man_3 picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
}
.op_01_fukidashi img {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
}

.op_01_man_2{
/*    background-image: url(../img/top/op_01_man_2.png);*/
    opacity: 0;
}
.loaded .op_01_man_2,
.scene_1 .op_01_man_2{
    opacity: 1;
    transition: 1s 1s;
}

.op_01_man_3 {
/*    background-image: url(../img/top/op_01_man_3.png);*/
    opacity: 0;
}
.loaded .op_01_man_3,
.scene_1 .op_01_man_3{
    opacity: 1;
    transition: 1s 1.5s;
}
.scene_1 .op_01_man_1,
.first .op_01_man_1{
    animation: villainAnimation 2s ease-in-out infinite;
    animation-iteration-count:5;
}
.scene_1 .op_01_man_2,
.first .op_01_man_2{
    animation: villainAnimation 1s 0.5s ease-in-out infinite;
    animation-iteration-count:5;
}
.scene_1 .op_01_man_3,
.first .op_01_man_3{
    animation: villainAnimation 1.5s 1s ease-in-out infinite;
    animation-iteration-count:5;
}

@keyframes villainAnimation {
    0% {
        transform: translateX(0px);
    }
    80% {
        transform: translateX(0px);
    }
    85% {
        transform: translateX(1px);
    }
    95% {
        transform: translateX(-1px);
    }
    100% {
        transform: translateX(0px);
    }
}

#content:not(.scene_2) #op_02{
    opacity: 0;
}
#content.scene_2 #op_02{
    opacity: 1;
}

.op_02_bg{
/*    background-image: url(../img/top/op_02_bg.png);*/
    opacity: 0;
}
.scene_2 .op_02_bg{
    opacity: 1;
}
.op_02_hole_upper{
/*    background-image: url(../img/top/op_02_hole_upper.png);*/
    background-position: top center;
    opacity: 0;
}
.scene_2 .op_02_hole_upper{
    opacity: 1;
    transition: 0.3s 0.5s;
}
.op_02_hole_under{
/*    background-image: url(../img/top/op_02_hole_under.png);*/
    background-position: top center;
    opacity: 0;
}
.scene_2 .op_02_hole_under{
    opacity: 1;
    transition: 0.3s 0.5s;
}
.op_02_line{
/*    background-image: url(../img/top/op_02_line.png);*/
    background-position: top center;
    transform: scale(0.2);
    opacity: 0;
/*    will-change: transform, opacity;*/
}
.scene_2 .op_02_line{
    opacity: 1;
    transition: 0.5s 0.5s;
    transform: scale(1);
}
.op_02_stone{
/*    background-image: url(../img/top/op_02_stone.png);*/
    background-position: top center;
    transform: scale(0.2);
    opacity: 0;
/*    will-change: transform, opacity;*/
}
.scene_2 .op_02_stone{
    opacity: 1;
    transition: 0.5s 0.6s;
    transform: scale(1);
}

.op_02_hero_red{
/*    background-image: url(../img/top/op_02_hero_red.png);*/
    background-position: top center;
    transform: scale(0.5) translate(10%, 90%);
    opacity: 0;
/*    will-change: transform, opacity;*/
}
.scene_2 .op_02_hero_red{
    transform: scale(1) translate(0%, 0%);
    transition: 0.5s 0.6s;
    opacity: 1;
}

.op_02_hero_green{
/*    background-image: url(../img/top/op_02_hero_green.png);*/
    background-position: top center;
    transform: scale(0.5) translate(-10%, 90%);
    opacity: 0;
/*    will-change: transform, opacity;*/
}
.scene_2 .op_02_hero_green{
    transform: scale(1) translate(0%, 0%);
    transition: 0.5s 0.6s;
    opacity: 1;
}

.op_03_fukidashi{
/*    background-image: url(../img/top/op_03_fukidashi.png);*/
    background-size: contain;
    background-position: 50% 40px;
    transform: scale(0.5);
    opacity: 0;
/*    will-change: transform, opacity;*/
}
.scene_3 .op_03_fukidashi{
    transform: scale(1);
    transition: 0.5s;
    opacity: 1;
}
#content:not(.scene_3) #op_03 .op_03_fukidashi{
    opacity: 0;
}
#content.scene_3 #op_03 .op_03_fukidashi{
    opacity: 1;
}
.op_02_bg img,
.op_02_line img,
.op_02_stone img,
.op_02_hole_upper img,
.op_02_hole_under img,
.op_02_hero_red img,
.op_02_hero_green img {
    height: 100%;
    object-fit: cover;
}
.op_03_fukidashi img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.op img {
    max-width: initial;
    width: 100%;
}
.caution {
    display: none;
}
.is-rotated .caution {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    background-color: #d7d7d7;
}
.is-rotated .caution img {
    width: auto;
    height: 80%;
    display: block;
    margin: auto;
}
.is-rotated .caution p {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}
.is-rotated {
    overflow: hidden;
    height: 100svh;
}

@media screen and (max-width: 500px) {
.op_01_bg {
/*    background-image: url(../img/top/op_01_bg_sp.png);*/
}
.op_01_fukidashi {
/*    background-image: url(../img/top/op_01_fukidashi_sp.png);*/
}
.op_01_man_1{
/*    background-image: url(../img/top/op_01_man_1_sp.png);*/
}
.op_01_man_2{
/*    background-image: url(../img/top/op_01_man_2_sp.png);*/
}
.op_01_man_3 {
/*    background-image: url(../img/top/op_01_man_3_sp.png);*/
}



.op_02_bg{
/*    background-image: url(../img/top/op_02_bg_sp.png);*/
}
.op_02_hole_upper{
/*    background-image: url(../img/top/op_02_hole_upper_sp.png);*/
}
.op_02_hole_under{
/*    background-image: url(../img/top/op_02_hole_under_sp.png);*/
}
.op_02_line{
/*    background-image: url(../img/top/op_02_line_sp.png);*/
}
.op_02_stone{
/*    background-image: url(../img/top/op_02_stone_sp.png);*/
}
.op_02_hero_red{
/*    background-image: url(../img/top/op_02_hero_red_sp.png);*/
}
.op_02_hero_green{
/*    background-image: url(../img/top/op_02_hero_green_sp.png);*/
}
.op_03_fukidashi{
/*    background-image: url(../img/top/op_03_fukidashi_sp.png);*/
}



.scene_3 #heroRed {
    width: 50%;
    transform: translateX(20%) translateY(-20%);
}
.scene_3 #heroGreen {
    width: 50%;
    transform: translateX(-20%) translateY(-20%);
}

@media screen and (max-width:500px) and ( max-height:950px) {
    .scene_3 #heroRed {
        width: 48%;
        transform: translateX(30%) translateY(-20%);
    }
    .scene_3 #heroGreen {
        width: 48%;
        transform: translateX(-30%) translateY(-20%);
    }
}

.scene_3 #opFukidashi {
        background-image: url(../img/top/op_03_fukidashi_2_sp.png);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom;
    }

}


/*=================** op  **=================*/

@media screen and (min-width: 2000px) {
#bg .bg_town img,
#bg .bg_mountain img,
#bg .bg_fuji img {
    width: auto;
    height: auto;
}
#bg .bg_town img,
#bg .bg_road img
 {
    width: 120vw;
    height: auto;
    max-width: initial;
}
}
@media screen and (max-width: 1350px) {
#end_card {
    width: 600px;
}
#houseWrap {
    transform: scale(0.7);
    transform-origin: left center;
}
}
@media screen and (max-width: 1000px) {
.roaded #heroWrap {
    transform: scale(0.7);
    transform-origin: left bottom;
}
.roaded .bank {
    transform: rotateX(-25deg) scale(0.7);
    transform-origin: right center;
}
#end_card {
    width: 500px;
}
    #houseWrap {
/*        right: -70%;*/
        transform: scale(0.7);
        transform-origin: left bottom;
    }
#houseWrap.left {
    right: 30%;
}
#heroWrap {
    bottom: 18%;
}
.roaded .bank {
    left: 63vw;
}
}

@media screen and (max-width: 768px) {
.scene {
/*    padding: 0 6vw;*/
    padding: 0 9vw;
}
#slideWrap .fukidashi {
    padding: 5vw 0vw 5vw;
}
.roaded .drone {
    top: 5%;
    z-index: 200;
}
#scene04 .fukidashi04 .flex__fukidashi {
    padding: 0 40px;
}
#slideWrap .fukidashi.fukidashi05 {
    padding: 2vw 5vw 5vw;
}
#bg .bg_town img,
#bg .bg_mountain img,
#bg .bg_fuji img {
    object-fit: cover;
}
}
@media screen and (max-width: 600px) {
#scene06 #houseWrap.center {
    right: -25%;
}
#slideWrap .fukidashi.fukidashi05 {
padding: 2vw 1vw 5vw;
}
.fukidashi.fukidashi05 .flex {
    flex-direction: column;
}
#scene05 .fukidashi.fukidashi05 .flex .imgWrap {
    width: 100%;
    padding-right: 0px;
}
}
@media screen and (max-width: 500px) {
#houseWrap {
   right: -250vw;
}
#heroWrap {
    left: 5%;
    width: 90%;
    bottom: 40%;
}
.hero {
    width: 100vw;
    bottom: 34%;
}
    .roaded #heroWrap {
        transform: scale(0.5);
        bottom: 5%;
        left: -5%;
    }
    #slideWrap .fukidashi {
        background: #FFF;
        border: 5px solid #623c1f;
        border-radius: 10px;
    }
.flex__fukidashi {
/*    flex-direction: column;*/
    flex-wrap: wrap;
}
#sceneWrap .flex__fukidashi .left {
    width: 80%;
}
#sceneWrap .flex__fukidashi .right {
    padding-left: 0px;
    padding-top: 20px;
    width: 80%;
}
    #slideWrap .fukidashi {
        margin-top: -20%;
    }
.fukidashi02 .flex__fukidashi .imgOuter {
    width: 100%;
}
.fukidashi03 .flex__fukidashi {
    padding: 0px 0px 0;
}
#hero.meeting #heroWrap {
    transform: scale(0.5);
    left: -5%;
    bottom: 5%;
}
#bank.meeting {
    left: 55%;
    transform: rotateX(-25deg) scale(0.5);
}
    #scene06 #houseWrap.center {
        right: -70%;
        transform: scale(0.5);
        bottom: 9%;
    }
    #end_card {
        width: 94vw;
        padding: 0;
        margin: auto;
        right: 0;
        left: 0;
    }
        #slideWrap .fukidashi.fukidashi05 {
        padding: 2vw 5vw 5vw;
    }
#position{
    display: none;
}
    .roaded .bank {
        transform: rotateX(-15deg) scale(0.5);

    }
#bg .bg_town img,
#bg .bg_town_back img,
#bg .bg_mountain img,
#bg .bg_fuji img {
    object-fit: cover;
    height: 100dvh;
}
.bg_fuji.absolute img,
.bg_town_back.absolute img,
.bg_town.absolute img,
.bg_road.absolute img,
.bg_mountain.absolute img {
    width: 100%;
    height: 100%;
    object-fit: unset;
}
.sun {
    width: 22vw;
}
#bg .bg_fuji.absolute,
#bg .bg_town_back.absolute,
#bg .bg_town.absolute,
#bg .bg_road.absolute,
#bg .bg_mountain.absolute {
    background-size: 400%;
    background-position: left bottom;
    height: 100dvh;
}
#slideWrap {
/*    top: 1%;*/
/*    height: 97vh;*/
}
.balloon {
    left: 80px;
}
.scrollDiv {
/*    height: 1600vh;*/
    height: 900svh;
}
.scene {
    height: 100dvh;
}


.op_01_fukidashi picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
/*    padding-top: 40px;*/
}
.op_02_bg picture img,
.op_02_hole_upper picture img,
.op_02_hole_under picture img,
.op_02_hero_green picture img,
.op_02_hero_red picture img,
.op_02_line picture img,
.op_02_stone picture img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.op_03_fukidashi picture {
    padding-top: 40px;
    display: block;
}

.op_01_fukidashi img {
    padding: 30px 20px 20px;
    box-sizing: border-box;
}
    #nav {
        height: 34px;
    }
.hd__hamburger {
    width: 30px;
    height: 20px;
}
.hd__menu {
    height: 20px;
}
}
@media screen and (max-height: 650px) {
#slideWrap {
    top: 3%;
    height: 97vh;
}
}

/*.hero-img {
  position: absolute; 
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out; 
}

.hero-img.active {
  visibility: visible;
  opacity: 1;
}*/

@media screen and (min-width: 500px) {

.op_01_fukidashi {
    transform: translateY(5%);
}
#contentWrap[class*="scale_Adjust1"] .op_01_fukidashi {
    transform: translateY(0%);
}

.scale_Adjustment_wrap .scale_Adjustment {
    top: 16%;
}
.scale_Adjustment_wrap .op_02 .scale_Adjustment {
    top: 20%;
}
.scale_Adjustment_wrap .scale_Adjustment img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.scale_Adjustment_wrap #heroWrap {
/*        transform: scale(0.7);*/
    }

.scale_Adjustment_wrap #heroGreen img,
.scale_Adjustment_wrap #heroRed img
{
    object-fit: contain;
    max-height: 60vh;
    object-position: bottom;
}
.scale_Adjustment_wrap .scene_3 #heroGreen {
    transform: translateX(0%) translateY(0%);
}

.scale_Adjustment_wrap.roaded #heroWrap {
    transform: scale(0.8);
    transform-origin: bottom left;
    bottom: 8%;
}


.scale_Adjustment_wrap.roaded .bank {
    transform: rotateX(-25deg) scale(0.75, 0.7);
    transform-origin: bottom;
    bottom: 2%;
}

.scale_Adjustment_wrap.roaded .bank {
        left: initial;
        right: 0;
    }

.scale_Adjustment_wrap .fukidashi {
    padding: 1vw 0vw 3vw;
    transform: scale(0.9) translateY(5%);
}

.scale_Adjustment_wrap #houseWrap {
        transform: scale(0.7);
        transform-origin: left bottom;
    }
.scale_Adjustment_wrap #end_card.active {
    top: 31%;
}
.scale_Adjustment_wrap .balloon {
    transform: scale(0.9, 1);
}

/*  1.25  */
.scale_Adjustment_wrap.scale_Adjust125 .scene03 {
/*    transform: scale(0.8);*/
}

/*  1.50  */
.scale_Adjustment_wrap.scale_Adjust150 #heroWrap {
        transform: scale(0.7);
    transform-origin: bottom;
    bottom: 8%;
    }
.scale_Adjustment_wrap.scale_Adjust150 .bank {
        transform: rotateX(-25deg) scale(0.65, 0.6);
        transform-origin: bottom;
        bottom: 2%;
    }
.scale_Adjustment_wrap.scale_Adjust150 .scene_3 #heroGreen {
        transform: translateX(-20%) translateY(0%);
    }
.scale_Adjustment_wrap.scale_Adjust150 .scene_3 #heroRed {
        transform: translateX(35%) translateY(0%);
    }

.scale_Adjustment_wrap.scale_Adjust150 .fukidashi {
        padding: 1vw 0vw 3vw;
        transform: scale(0.9) translateY(10%);
    }
.scale_Adjustment_wrap.scale_Adjust150 .fukidashi03 .flex__fukidashi {
        padding: 0;
    }

.scale_Adjustment_wrap.scale_Adjust150 .fukidashi > div {
    transform: scale(0.9);
    transform-origin: bottom;
    padding: 0;
}
.scale_Adjustment_wrap.scale_Adjust150 .fukidashi > div.textCenter {
    transform-origin: top;
}
.scale_Adjustment_wrap.scale_Adjust150 .scene03 {
    transform: scale(0.9);
}
.scale_Adjustment_wrap.scale_Adjust150 .fukidashi .textCenter,
.scale_Adjustment_wrap.scale_Adjust150 .fukidashi .textCenter {
    transform: scale(0.7);
}
.scale_Adjustment_wrap.scale_Adjust150 #scene04 .fukidashiInner {
    padding: 0;
}
.scale_Adjustment_wrap.scale_Adjust150 .fukidashi.fukidashi01 .fukidashiInner {
    padding-top: 3%;
}


/*  1.75  */
.scale_Adjustment_wrap.scale_Adjust175 #heroWrap {
        transform: scale(0.6);
    transform-origin: bottom;
    bottom: 8%;
    }
.scale_Adjustment_wrap.scale_Adjust175 .bank {
        transform: rotateX(-25deg) scale(0.45, 0.4);
        transform-origin: bottom;
        bottom: 12%;
    }
.scale_Adjustment_wrap.scale_Adjust175 .scene_3 #heroRed {
    transform: translateX(45%) translateY(0%);
}
.scale_Adjustment_wrap.scale_Adjust175 .scene_3 #heroGreen {
        transform: translateX(-30%) translateY(0%);
    }
.scale_Adjustment_wrap.scale_Adjust175 .fukidashi
 {
        padding: 1vw 0vw 3vw;
        transform: scale(0.9) translateY(15%);
    }
.scale_Adjustment_wrap.scale_Adjust175 .fukidashi03 .flex__fukidashi
 {
        padding: 0;
    }

.scale_Adjustment_wrap.scale_Adjust175 .fukidashi > div
 {
    transform: scale(0.8);
    transform-origin: bottom;
    padding: 0;
}
.scale_Adjustment_wrap.scale_Adjust175 .fukidashi > div.textCenter
 {
    transform-origin: top;
}
.scale_Adjustment_wrap.scale_Adjust175 .fukidashi.fukidashi03 > div {
    
}
.scale_Adjustment_wrap.scale_Adjust175 .scene03 {
    transform: scale(0.8);
}



}