html,
body,
.bg
{
  /* height:150%; */
  margin: 0;
  padding: 0;
}

/* * {
   box-sizing: border-box;
} */

body{
  height:100%;
  width:100%;
  font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic";
  letter-spacing: 0.1vw;
  white-space: nowrap;
  -ms-overflow-style: none;    /* IE, Edge 対応 */
  scrollbar-width: none;
  user-select:none;
}


body::-webkit-scrollbar{
    display:none;
}

header {
   padding: 0 0 0 3vw;
   position: fixed;
   width:500px;
   /* max-width:500px;
   min-width:400px; */

   height:120px;
   background-color: none;
   /* display: flex; */
   /* align-items: center; */
   /* z-index: -2; */
}

h1 {
    margin: 10px 0 0 0;
    padding: 0;
    /* font-size: 1.2vw; */
    font-size: 15px;

    color: #000;
    /* font-family: "Yu Gothic"; */
}

#title{
box-shadow: none;
}




.container {
  height:400%;
  width:100%;
  display: flex;
  flex-direction: column ;
  /* background-color: black; */

}

.portfolio{
  height: 25%;
  width:100%;
  /* background-color: gray; */
}

.food{
  /* margin-top: 100px; */
  height: 25%;
  width:100%;
  /* background-color: darkseagreen; */

}

.lifestyle{
  /* margin-top: -100px;
  padding-top: 200px; */
  height: 25%;
  width:100%;
  /* background-color: thistle; */

}

.landscape{
  margin-top: 100px;
  height: 25%;
  width:100%;
  /* background-color: cornsilk; */

}

 .mainblock{
   position: relative;
   /* top:5%; */
   /* left:100px; */
   height: 80%;
   width:1130px;
   /* background-color: white; */
 }


.underlay{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:100vw;
  /* background-color: black; */
  z-index: 10;
  animation-name: fadein;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.zoomlay{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:100vw;
  backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
  /* background-color: black; */
  z-index: 10;
  /* animation-name: fadein; */
  animation-duration: 1s;
  animation-fill-mode: forwards;
}



@keyframes fadein {
  from {
    background-color:rgba(0, 0, 0,0);
  }
  to {
    background-color:rgba(0, 0, 0,0.8);
  }
}


.img_underlay {
  position:absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height:80vh;
  width:auto;
  animation-name: fadein;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.img_zoomlay {
  position:absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height:80vh;
  width:auto;
  animation-name: fadein;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  /* opacity: 0.5; */
}


 #portfolio_main{
   top:20%;
   margin-top: 20px;
   margin-left: auto;
   margin-right: auto;
   /* background-color: green; */
 }

 #food_main{
   height: 80%;
   margin-left: auto;
   margin-right: auto;
   /* background-color: white; */
 }

 #lifestyle_main{
   height: 80%;
   margin-top: 100px;
   margin-left: auto;
   margin-right: auto;
   /* background-color: #f8f8f8; */
 }

 #landscape_main{
   /* top:12%; */
   height: 88%;
   /* margin-top: 150px; */
   margin-left: auto;
   margin-right: auto;
   /* background-color: white; */
 }



#profiletxt{
  margin-top: 100px;
  /* top:20%; */
  left: 10vw;
  height:450px;
  width: 100%;
  background-color: #fff;
  /* display: flex; */
  align-items: left;
  /* z-index: ; */
  /* background-color: pink; */

}

h2 {
    margin: 0 0 0 20vw;
    padding: 0;
    /* font-size: 1.2vw; */
    font-size: 15px;

    color: #000;
    /* font-family: "Yu Gothic"; */
}

.name{
  font-size: 17px;

}

.life{
  margin-top: 3%;
}

#mailadress{
  position:relative;
  margin-top: 1vw;
  margin-left: 19.5vw;
  width:260px;
  height:auto;

box-shadow: none;
}

#footer {
  padding-bottom: 20px;
   /* position: fixed; */
   /* bottom: 20vh; */
   width: 100%;
   /* background-color: #fff; */
   /* display: flex; */
   text-align : center;
   z-index: 0;
}


h3 {
    /* padding: 0; */
    /* font-size: 1.2vw; */
    font-size: 15px;
    color: #000;
}

#copyright {
  font-size: 13px;
   /* margin: 0 0 0 20vw; */
   text-align : center;
   /* color: #ddd; */
   /* z-index: 0; */
}


img {
  width: 100%;
  height: 100%;
  border:none;
}

.flame{
  /* background-color: gray; */
}

.portfolio_flame{
  position: absolute;
}

.portfolio_flame img{
  opacity: 0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  box-shadow: 5px 5px 10px 0px #dcdcdc;
}

.portfolio_flame.lazyloaded img.lazyloaded {
  transition-delay:0.5s;
  opacity: 1;
}

/* ポートフォリオimg */

#portfolio_flame03{
  top:80px;
  left:-50px;
  width:110px;
  height:164.3px;
  background-color: #fbfaf5;
}


#portfolio_flame02{
  top:43px;
  left:60px;
  width:110px;
  height:74.5px;
  background-color: #f8f4e6;
}

#portfolio_flame01{
  top:110.7px;
  left:60px;
  width:110px;
  height:157.5px;
  background-color: #f8fbf8;
}


#portfolio_flame04{
  top:0px;
  left:170px;
  width:110px;
  height:157.5px;
  background-color: #fffffc;
}
#portfolio_flame05{
  top:143.2px;
  left:170px;
  width:110px;
  height:155.4px;
  background-color: #fbfbef;
}
#portfolio_flame06{
  top:286.4px;
  left:170px;
  width:110px;
  height:165.3px;
  background-color: #fefefe;
}


#portfolio_flame07{
  top:13px;
  left:280px;
  width:110px;
  height:165.3px;
  background-color: #fbfaf5;
}
#portfolio_flame08{
  top:163.3px;
  left:280px;
  width:110px;
  height:165.3px;
  background-color: #fafafa;
}
#portfolio_flame09{
  top:313.6px;
  left:280px;
  width:110px;
  height:165.3px;
  background-color: #fffffc;
}


/* #portfolio_flame10{
  top:75px;
  left:400px;
  width:100px;
  height:151.2px;
  background-color: whitesmoke;
} */
#portfolio_flame21{
  top:75px;
  left:390px;
  width:110px;
  height:162.4px;
  background-color: #f8fbf8;
}
#portfolio_flame11{
  top:237.4px;
  left:390px;
  width:110px;
  height:164.9px;
  background-color: #fefefe;
}
#portfolio_flame12{
  top:402.3px;
  left:390px;
  width:110px;
  height:144.0px;
  background-color: #fbfbef;
}


#portfolio_flame13{
  top:110px;
  left:500px;
  width:110px;
  height:165.2px;
  background-color: #fbfaf5;
}
#portfolio_flame14{
  top:260.1px;
  left:500px;
  width:110px;
  height:164.8px;
  background-color: #fffffc;
}


#portfolio_flame15{
  top:80px;
  left:610px;
  width:110px;
  height:159.5px;
  background-color: #fafafa;
}
#portfolio_flame16{
  top:225px;
  left:610px;
  width:110px;
  height:73.2px;
  background-color: #f8fbf8;
}
#portfolio_flame17{
  top:291.5px;
  left:610px;
  width:110px;
  height:165.0px;
  background-color: #fbfbef;
}


#portfolio_flame18{
  top:110px;
  left:720px;
  width:110px;
  height:80.8px;
  background-color: #fbfaf5;
}
#portfolio_flame19{
  top:183.4px;
  left:720px;
  width:110px;
  height:150.9px;
  background-color: #fefefe;
}
#portfolio_flame20{
  top:320.6px;
  left:720px;
  width:110px;
  height:165.3px;
  background-color: #f8fbf8;
}


/* #portfolio_flame21{
  top:145px;
  left:800px;
  width:100px;
  height:147.7px;
  background-color: gainsboro;
} */


#portfolio_flame23{
  top:157.6px;
  left:830px;
  width:110px;
  height:148.6px;
  background-color: #fffffc;
}
#portfolio_flame22{
  top:306.2px;
  left:830px;
  width:110px;
  height:164.9px;
  background-color: #fbfaf5;
}


/* #portfolio_flame23{
  top:75px;
  left:900px;
  width:100px;
  height:135.1px;
  background-color: gainsboro;
} */
#portfolio_flame24{
  top:92.1px;
  left:940px;
  width:110px;
  height:160.5px;
  background-color: #f8fbf8;
}
#portfolio_flame25{
  top:238px;
  left:940px;
  width:110px;
  height:165.3px;
  background-color: #fbfbef;
}


#portfolio_flame26{
  top:195px;
  left:1050px;
  width:150px;
  height:106.7px;
  background-color: #fbfaf5;
}







/* フード関係 */



.food_thin{
  position: relative;
  margin-top: 125px;
  width:100%;
  height:260px;
  top:10%;
  left:0%;
  background-color: whitesmoke;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* align-items: stretch; */
  overflow: hidden;

}

.food_thins{
  animation-name: anim_thin;
  animation-duration: 60s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode:forwards;
  animation-direction: normal;
}

.food_thins2{
  animation-name: anim2_thin;
  animation-duration: 60s;
  animation-delay: 24.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode:forwards;
  animation-direction: normal;
}

@keyframes anim_thin {
  0% {
  transform: translateX(0px);
  }

  100% {
  transform: translateX(-2780.6px);
  }
}

@keyframes anim2_thin {
  0% {
  transform: translateX(-1130px);
  }

  100% {
  transform: translateX(-3910.6px);
  }
}





.food_flame{
  /* position: absolute; */

}

.food_flame img{
  opacity: 0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

.food_flame.lazyloaded img.lazyloaded {
  transition-delay:1s;
  opacity: 1;
}


.food_flame_thin01{
  width:180.4px;
  height: 260px;
  background-color: #f8faf4;
}
.food_flame_thin02{
  width:173.0px;
  height: 260px;
  background-color: #f7fbfb;
}
.food_flame_thin03{
  width:173.3px;
  height: 260px;
  background-color: #f8faf4;
}
.food_flame_thin04{
  width:173.0px;
  height: 260px;
  background-color: #f7fbfb;
}
.food_flame_thin05{
  width:173.4px;
  height: 260px;
  background-color: #f8faf4;
}
.food_flame_thin06{
  width:173.0px;
  height: 260px;
  background-color: #f7fbfb;
}
.food_flame_thin07{
  width:173.0px;
  height: 260px;
  background-color: #f8faf4;
}
.food_flame_thin08{
  width:173.0px;
  height: 260px;
  background-color: #f7fbfb;
}
.food_flame_thin09{
  width:173.3px;
  height: 260px;
  background-color: #f8faf4;
}
.food_flame_thin10{
  width:175.5px;
  height: 260px;
  background-color: #f7fbfb;
}
.food_flame_thin11{
  width:173.5px;
  height: 260px;
  background-color: #f8faf4;
}
.food_flame_thin12{
  width:173.3px;
  height: 260px;
  background-color: #f7fbfb;
}
.food_flame_thin13{
  width:173.0px;
  height: 260px;
  background-color: #f8faf4;
}
.food_flame_thin14{
  width:173.0px;
  height: 260px;
  background-color: #f7fbfb;
}
.food_flame_thin15{
  width:173.3px;
  height: 260px;
  background-color: #f8faf4;
}
.food_flame_thin16{
  width:173.3px;
  height: 260px;
  background-color: #f7fbfb;
}




.food_fat{
  position: relative;
  width:100%;
  height:130px;
  top:10%;
  left:0%;
  background-color: #f7fbfb;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* align-items: stretch; */
  overflow: hidden;
}

.food_fats{
  animation-name: anim_fat;
  animation-duration: 60s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode:forwards;
  animation-direction: normal;
}

.food_fats2{
  animation-name: anim2_fat;
  animation-duration: 60s;
  animation-delay: 31.56s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode:forwards;
  animation-direction: normal;
}

@keyframes anim_fat {
  0% {
  transform: translateX(0px);
  }

  100% {
  transform: translateX(-2147.8px);
  }
}

@keyframes anim2_fat {
  0% {
  transform: translateX(-1130px);
  }

  100% {
  transform: translateX(-3277.8px);
  }
}





#food_flame_fat01{
  width:195.4px;
  height: 130px;
  background-color: #f8faf4;
}
#food_flame_fat02{
  width:195.4px;
  height: 130px;
  background-color: #f7fbfb;
}
#food_flame_fat03{
  width:195.0px;
  height: 130px;
  background-color: #f8faf4;
}
#food_flame_fat04{
  width:195.4px;
  height: 130px;
  background-color: #f7fbfb;
}
#food_flame_fat05{
  width:195.0px;
  height: 130px;
  background-color: #f8faf4;
}
#food_flame_fat06{
  width:195.4px;
  height: 130px;
  background-color: #f7fbfb;
}
#food_flame_fat07{
  width:194.8px;
  height: 130px;
  background-color: #f8faf4;
}
#food_flame_fat08{
  width:195.5px;
  height: 130px;
  background-color: #f7fbfb;
}
#food_flame_fat09{
  width:195.4px;
  height: 130px;
  background-color: #f8faf4;
}
#food_flame_fat10{
  width:195.4px;
  height: 130px;
  background-color: #f7fbfb;
}
#food_flame_fat11{
  width:195.4px;
  height: 130px;
  background-color: #f8faf4;
}





/* ライフスタイル */

.lifestyle_flame{
  position: absolute;
  border-radius: 4px;
  background-color: #f8f8f8;
}

.lifestyle_flame img{
  opacity: 0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

.lifestyle_flame.lazyloaded img.lazyloaded {
  transition-delay:1s;
  opacity: 1;
}

.lifestyle_img{
  /* border-radius: 4px; */
  box-shadow:
  0.5px 1.9px 5px rgba(0, 0, 0, 0.15),
  2px 3px 10.1px rgba(0, 0, 0, 0.1);
  /* 0 10.1px 11.4px rgba(0, 0, 0, 0.086), */
  /* 0 19.2px 19.8px rgba(0, 0, 0, 0.092), */
  /* 0 38.4px 34.8px rgba(0, 0, 0, 0.1), */
  /* 0 101px 74px rgba(0, 0, 0, 0.13); */
}


#lifestyle_flame02{
  top:0px;
  left:70px;
  width:88px;
  height:132.2px;
}

#lifestyle_flame03{
  top:155px;
  left:40px;
  width:130px;
  height:86.7px;
}

#lifestyle_flame15{
  top:260px;
  left:88px;
  width:105px;
  height:70.1px;
}

#lifestyle_flame11{
  top:350px;
  left:0px;
  width:175px;
  height:116.4px;
}

#lifestyle_flame23{
  top:16px;
  left:192px;
  width:60px;
  height:92.4px;
}

#lifestyle_flame17{
  top:174px;
  left:190px;
  width:66px;
  height:99.2px;
}

#lifestyle_flame20{
  top:296px;
  left:198px;
  width:110px;
  height:73.3px;
}

#lifestyle_flame04{
  top:395px;
  left:164px;
  width:190px;
  height:126.8px;
}

#lifestyle_flame19{
  top:41px;
  left:280px;
  width:80px;
  height:53.4px;
}

#lifestyle_flame05{
  top:0px;
  left:405px;
  width:60px;
  height:90px;
}

#lifestyle_flame13{
  top:110px;
  left:277px;
  width:190px;
  height:126.4px;
}

#lifestyle_flame21{
  top:239px;
  left:322px;
  width:80px;
  height:54.3px;
}

#lifestyle_flame25{
  top:312px;
  left:345px;
  width:185px;
  height:123.5px;
}

#lifestyle_flame29{
  top:454px;
  left:399px;
  width:112px;
  height:74.5px;
}

#lifestyle_flame01{
  top:95px;
  left:482px;
  width:108px;
  height:71.9px;
}

#lifestyle_flame08{
  top:180px;
  left:457px;
  width:172px;
  height:114.5px;
}

#lifestyle_flame06{
  top:339px;
  left:548px;
  width:88px;
  height:132.3px;
}

#lifestyle_flame27{
  top:5px;
  left:570px;
  width:82px;
  height:123.2px;
}

#lifestyle_flame07{
  top:19px;
  left:685px;
  width:54px;
  height:84.2px;
}

#lifestyle_flame14{
  top:115px;
  left:653px;
  width:210px;
  height:139.7px;
}

#lifestyle_flame26{
  top:263px;
  left:620px;
  width:120px;
  height:79.8px;
}

#lifestyle_flame22{
  top:372px;
  left:658px;
  width:88px;
  height:132.3px;
}

#lifestyle_flame12{
  top:28px;
  left:772px;
  width:112px;
  height:74.5px;
}

#lifestyle_flame00{
  top:273px;
  left:758px;
  width:90px;
  height:135.3px;
}

#lifestyle_flame18{
  top:418px;
  left:812px;
  width:110px;
  height:73.4px;
}

#lifestyle_flame16{
  top:20px;
  left:906px;
  width:92px;
  height:131.8px;
}

#lifestyle_flame09{
  top:168px;
  left:888px;
  width:90px;
  height:59.9px;
}

#lifestyle_flame10{
  top:255px;
  left:863px;
  width:120px;
  height:79.8px;
}

#lifestyle_flame28{
  top:73px;
  left:1020px;
  width:92px;
  height:138.3px;
}

#lifestyle_flame24{
  top:240px;
  left:1005px;
  width:90px;
  height:59.9px;
}

#lifestyle_flame30{
  top:355px;
  left:960px;
  width:110px;
  height:165.3px;
}



/* ランドスケープ */

/* .mainblock_landscape{
  position: relative;
  top:15%;
  height: 100%;
  width:1130px;
  background-color: white;
} */

.landscape_show{
  position: relative;
  /* top:10%; */
  left:17%;
  width:66%;
  height:66%;
  /* background-color: gainsboro; */

}

.show_img{
  width: 100%;
  height: 100%;
  /* object-fit: scale-down; */
}

.landscape_show_img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  opacity: 1;
}

.landscape_show_img2{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  opacity: 0.5;
  visibility: hidden;
}


.landscape_select{
  position: absolute;
  margin-top: 10px;
  width:100%;
  height:150px;
  top:68%;
  /* left:8%; */
  background-color: white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* align-items: stretch; */
  overflow: hidden;
}

.landscape_flame{
  /* position: absolute; */
  /* width:104px;
  height:65px; */
}

.landscape_flame img{
  opacity: 0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

.landscape_flame.lazyloaded img.lazyloaded {
  transition-delay:0s;
  opacity: 1;
}

#landscape_flame01{
  margin-right: 2.2px;
  margin-left: 2.2px;
  width:97.7px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame02{
  margin-right: 7.7px;
  margin-left: 7.7px;
  width:86.7px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame03{
  margin-right: 2.2px;
  margin-left: 2.2px;
  width:192.5px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame04{
  margin-right: 2.3px;
  margin-left: 2.3px;
  width:97.4px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame05{
  margin-right: 2.3px;
  margin-left: 2.3px;
  width:97.4px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame06{
  margin-right: 2.3px;
  margin-left: 2.3px;
  width:97.5px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame07{
  margin-right: 2.2px;
  margin-left: 2.2px;
  width:97.7px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame08{
  margin-right: 2.4px;
  margin-left: 2.4px;
  width:97.3px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame09{
  margin-right: 2.0px;
  margin-left: 2.0px;
  width:97.9px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame10{
  margin-right: 2.2px;
  margin-left: 2.2px;
  width:97.7px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame11{
  margin-right: 2.2px;
  margin-left: 2.2px;
  width:97.7px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame12{
  margin-right: 2.2px;
  margin-left: 2.2px;
  width:97.7px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame13{
  margin-right: 2.3px;
  margin-left: 2.3px;
  width:194.6px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame14{
  margin-right: 6.5px;
  margin-left: 6.5px;
  width:86.6px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame15{
  margin-right: 28.4px;
  margin-left: 28.4px;
  margin-left: 27;
  margin-right: 27;
  width:43.3px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame16{
  margin-right: 7.0px;
  margin-left: 13.0px;
  width:86.7px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame17{
  margin-right: 2.2px;
  margin-left: 2.2px;
  width:97.7px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame18{
  margin-right: 2.7px;
  margin-left: 2.7px;
  width:97.7px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame19{
  margin-right: 2.2px;
  margin-left: 2.2px;
  width:97.7px;
  height:65px;
  background-color: whitesmoke;
}

#landscape_flame20{
  margin-right: 1.9px;
  margin-left: 1.9px;
  width:98.2px;
  height:65px;
  background-color: whitesmoke;
}