html.lenis, html.lenis body {
height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}



/*グローバル変数　jsで操作*/
:root {
--va_num: 0;
}


body,
html {
overscroll-behavior: none;
background-color: #fff;
height: 100vh;
width: 100%;
color: #333;
margin: 0;
padding: 0;
}


main{
position: relative;
width: 100%;
margin: 0;
padding: 0;
}

/*footerがz-index:1*/
canvas{
position: fixed;
z-index: 2;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: auto;
}

.scrollable{
position: relative;
z-index: 3;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
will-change: transform;
}
/*スマホスタート-----------------------------------------------------------------------------------------*/






.main_area{
position: relative;
z-index: 1;
width: 100vw;
height: 100vh;
height: 100dvh;
margin: 0;
padding: 0;
overflow: hidden;
}

.main_area .photo_area{
width: 100%;
height: 100%;
overflow: hidden;
}

.main_area img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}

/*MACのみ*/
body.mac .main_area img{
visibility: hidden;
}


#hoge{
position: relative;
/*transform: matrix(1, 0, 0, 1, 0, var(--va_num));*/
}





#trig01{
position: relative;
z-index: 999;
width: 100%;
margin: 0;
padding: 100px 0 100px 0;
background: #fff;
}


.niretu{
position: relative;
z-index: 2;
width: 100%;
margin: 0 auto;
padding: 0;
/*全体 子要素を折り返しせず、1行に配置（wrapが複数行OK）*/
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;
}

.niretu .baka{
position: relative;
flex-basis: 38%;
margin: 0 6% 0 6%;
padding: 0;
}

.baka:nth-child(1){
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * 0.5 ) );
}


.baka:nth-child(2){
margin-top: 200px;
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * 1 ) );
}


.baka:nth-child(3){
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * 2 ) );
}

.baka:nth-child(4){
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * 3 ) );
}


.niretu .baka img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}


.niretu .baka img{
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * -0.9 ) );
}

/*MACのみ*/
body.mac .niretu .baka img{
visibility: hidden;/*htmlのjpegは隠す。*/
}


.niretu .baka .photo_area{
position: relative;
width: 100%;
height: calc( 38vw / 1200 * 1600);
height: -webkit-calc( 38vw / 1200 * 1600);
margin: 0 0 30px 0;
padding: 0;
overflow: hidden;
}







#trig02{
position: relative;
z-index: 1;
width: 100%;
margin: 0 0 0 0;
padding: 100px 0 100px 0;
}




#trig02 .bg{
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#trig02 .bg img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}


/*MACのみ*/
body.mac #trig02 .bg img{
visibility: hidden;/*htmlのjpegは隠す。*/
}


.younretu{
position: relative;
z-index: 2;
width: 100%;
margin: 0 auto;
padding: 0;
/*全体（wrap or nowrap）*/
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}




.younretu .area{
position: relative;
flex-basis: 50vw;
margin: 0 0 50px 0;
padding: 0;
}


.younretu .area img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.younretu .area .photo_area{
position: relative;
width: 100%;
height: calc( 50vw / 1200 * 1600);
height: -webkit-calc( 50vw / 1200 * 1600);
margin: 0 0 30px 0;
padding: 0;
overflow: hidden;
}

.younretu .area .photo_area.n01{
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * 0.5 ) );
}


.younretu .area .photo_area.n02{
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * 1 ) );
}


.younretu .area .photo_area.n03{
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * 1.5 ) );
}

.younretu .area .photo_area.n04{
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * 2 ) );
}

.younretu .area .photo_area img{
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * -1 ) );
}




#trig03{
position: relative;
z-index: 1;
width: 100%;
margin: 0 0 0 0;
padding: 100px 0 100px 0;
overflow: hidden;
}


#trig03 .bg{
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#trig03 .bg img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

/*MACのみ*/
body.mac #trig03 .bg img{
visibility: hidden;
}


.footer_area_kasou{
height: 50vh;
width: 100%;
}



.footer_area{
position: fixed;
z-index: 1;
bottom: 0;
left: 0;

width: 100%;
height: 50vh;
background: #5e7b9b;
}



.footer_area_layout{
position: relative;
width: 100%;
height: 50vh;
background: #83a4c9;

font-size: 50px;
color: #fff;

display: flex;
justify-content: center;
align-items: center;
}













/*スマホ終了　PC開始（横幅880px以上）-----------------------------------------------------------------------------------------*/
@media (min-width: 880px) {










.main_area{
position: relative;
z-index: 1;
width: 100vw;
height: calc( 100vw / 1600 * 1200 );
height: -webkit-calc( 100vw / 1600 * 1200 );
margin: 0;
padding: 0;
overflow: hidden;
}

.main_area .photo_area{
width: 100%;
height: 100%;
overflow: hidden;
}

.main_area img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: left top;
}

/*MACのみ*/
body.mac .main_area img{
visibility: hidden;
}


#hoge{
position: relative;
/*transform: matrix(1, 0, 0, 1, 0, var(--va_num));*/
}





#trig01{
position: relative;
z-index: 999;
width: 100%;
margin: 0;
padding: 100px 0 100px 0;
background: #fff;
}


.niretu{
position: relative;
z-index: 2;
width: 100%;
margin: 0 auto;
padding: 0;
/*全体 子要素を折り返しせず、1行に配置（wrapが複数行OK）*/
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;
}

.niretu .baka{
position: relative;
flex-basis: 38%;
margin: 0 6% 0 6%;
padding: 0;
}

.baka:nth-child(1){
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * 0.5 ) );
}


.baka:nth-child(2){
margin-top: 200px;
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * 1 ) );
}


.baka:nth-child(3){
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * 2 ) );
}

.baka:nth-child(4){
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * 3 ) );
}


.niretu .baka img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}


.niretu .baka img{
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * -0.9 ) );
}

/*MACのみ*/
body.mac .niretu .baka img{
visibility: hidden;/*htmlのjpegは隠す。*/
}


.niretu .baka .photo_area{
position: relative;
width: 100%;
height: calc( 38vw / 1200 * 1600);
height: -webkit-calc( 38vw / 1200 * 1600);
margin: 0 0 30px 0;
padding: 0;
overflow: hidden;
}







#trig02{
position: relative;
z-index: 1;
width: 100%;
margin: 0 0 0 0;
padding: 100px 0 100px 0;
}




#trig02 .bg{
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#trig02 .bg img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}


/*MACのみ*/
body.mac #trig02 .bg img{
visibility: hidden;/*htmlのjpegは隠す。*/
}


.younretu{
position: relative;
z-index: 2;
width: 100%;
margin: 0 auto;
padding: 0;
/*全体 子要素を折り返しせず、1行に配置（wrapが複数行OK）*/
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;
}




.younretu .area{
position: relative;
flex-basis: 20%;
margin: 0 2.5% 0 2.5%;
padding: 0;
}


.younretu .area img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.younretu .area .photo_area{
position: relative;
width: 100%;
height: calc( 20vw / 1200 * 1600);
height: -webkit-calc( 20vw / 1200 * 1600);
margin: 0 0 30px 0;
padding: 0;
overflow: hidden;
}

.younretu .area .photo_area.n01{
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * 0.5 ) );
}


.younretu .area .photo_area.n02{
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * 1 ) );
}


.younretu .area .photo_area.n03{
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * 1.5 ) );
}

.younretu .area .photo_area.n04{
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * 2 ) );
}

.younretu .area .photo_area img{
transform: matrix(1, 0, 0, 1, 0, calc( var(--va_num) * -1 ) );
}




#trig03{
position: relative;
z-index: 1;
width: 100%;
margin: 0 0 0 0;
padding: 0 0 100px 0;
overflow: hidden;
}


#trig03 .bg{
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#trig03 .bg img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

/*MACのみ*/
body.mac #trig03 .bg img{
visibility: hidden;
}


.footer_area_kasou{
height: 50vh;
width: 100%;
}



.footer_area{
position: fixed;
z-index: 1;
bottom: 0;
left: 0;

width: 100%;
height: 50vh;
background: #5e7b9b;
}



.footer_area_layout{
position: relative;
width: 100%;
height: 50vh;
background: #83a4c9;

font-size: 50px;
color: #fff;

display: flex;
justify-content: center;
align-items: center;
}






}/*880px以上終了！*/