@charset "UTF-8";

/* Webフォントの指定 */
@font-face {
    font-family: "GenShinGothic-Bold";
    src: url("../fonts/GenShinGothic-Bold.woff") format("woff");
    font-weight: normal;
  }
  
  @font-face {
    font-family: "GenShinGothic-Heavy";
    src: url("../fonts/GenShinGothic-Heavy.woff") format("woff");
    font-weight: normal;
  }
  
  @font-face {
    font-family: "GenShinGothic-Medium";
    src: url("../fonts/GenShinGothic-Medium.woff") format("woff");
    font-weight: normal;
  }
  
  @font-face {
    font-family: "HannariMincho-Regular";
    src: url("../fonts/HannariMincho-Regular.woff") format("woff");
    font-weight: normal;
  }
  
  @font-face {
    font-family: "NotoSansJP-Medium";
    src: url("../fonts/NotoSansJP-Medium.woff") format("woff");
    font-weight: normal;
  }
  
  @font-face {
    font-family: "Philosopher-Italic";
    src: url("../fonts/Philosopher-Italic.woff") format("woff");
    font-weight: normal;
  }
  
  @font-face {
    font-family: "Philosopher-Regular";
    src: url("../fonts/Philosopher-Regular.woff") format("woff");
    font-weight: normal;
  }

body {
    width: 100%;
    height: auto;
    background-color: black;
}

h1 {
    font-family: "HannariMincho-Regular";
    color: rgb(255, 255, 255);
}

p {
    font-size: 1.1vw;
    color: rgb(197, 197, 191);
}

#title {
  padding: 7vw 3vw 0vw 3vw;
  position: relative;
}

#title h1{
  font-family: 'Noto Serif JP', serif;
  font-weight: lighter;
  font-size: 5vw;
  background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
  -webkit-background-clip: text;
  color: transparent;
  padding: 5vw 0vw 0vw 2vw;
}

#title h6{
  font-family: 'Inter', sans-serif;
  font-size: 1.1vw;
  letter-spacing: 0.13vw;
  background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
  -webkit-background-clip: text;
  color: transparent;
  padding: 1vw 0vw 0vw 3.1vw;
}

#title .title1{
  display: flex;
}

#title img {
  width: 45vw;
  height: auto;
}

.flex2 p {
  font-family: "HannariMincho-Regular";
  font-size: 1.3vw;
  letter-spacing: 0.3vw;
  line-height: 3vw;
  color: rgb(197, 197, 191);
  padding: 3vw 0vw 0vw 3vw;
}

.yumiyumi{
  font-family: 'Noto Serif JP', sans-serif;
  font-size: 1.2vw;
  font-style: italic;
  letter-spacing: 0.13vw;
  color: rgb(255, 255, 255);
  padding: 8vw 0vw 0vw 3.1vw;
}

.flex2 .yumiyumitext{
  font-family: 'Noto Serif JP', sans-serif;
  font-size: 1vw;
  font-style: italic;
  letter-spacing: 0.13vw;
  color: rgb(255, 255, 255);
  padding: 6vw 0vw 0vw 2.1vw;
}


#title a{
  font-family: 'Noto Serif JP', sans-serif;
  font-size: 1.3vw;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 0.13vw;
  background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
  -webkit-background-clip: text;
  color: transparent;
  padding: 5vw 0vw 0vw 3.1vw;
}

#memory {
  padding: 3vw 3vw 0vw 3vw;
}

#memory .memory1 p{
  font-family: 'Inter', sans-serif;
  font-size: 3vw;
  letter-spacing: 0.13vw;
  /* text-align: center; */
  color: rgb(255, 255, 255);
  padding: 8vw 32% 8vw 32%;
}

#memory .waves{
  width: 30vw;
  height: auto;
  padding: 0vw 0vw 0vw 0vw;
}

#memory .wood{
  width: 15vw;
  height: auto;
  position: absolute;
  top: 148vw;
  left: 41vw;
}

#memory .fog{
  width: 24vw;
  height: auto;
  position: absolute;
  top: 121vw;
  left: 70vw;
}

#memory .mountain{
  width: 40vw;
  height: auto;
  position: absolute;
  top: 172vw;
  left: 3vw;
}

#memory .water{
  width: 30vw;
  height: auto;
  position: absolute;
  top: 162vw;
  left: 63vw;
}
  

#memory .rock{
  width: 35vw;
  height: auto;
  position: absolute;
  top: 267vw;
  left: 46vw;
}

#memory .surface{
  width: 20vw;
  height: auto;
  position: absolute;
  top: 207vw;
  left: 57vw;
}

#memory .pile{
  width: 27vw;
  height: auto;
  position: absolute;
  top: 145vw;
  left: 8vw;
}

#memory .green{
  width: 18vw;
  height: auto;
  position: absolute;
  top: 134vw;
  left: 47vw;
}

#memory .mithuhashi{
  width: 20vw;
  height: auto;
  position: absolute;
  top: 230vw;
  left: 14vw;
}

#memory .sea{
  width: 24vw;
  height: auto;
  position: absolute;
  top: 331vw;
  left: 10vw;
}

#memory .campfire{
  width: 21vw;
  height: auto;
  position: absolute;
  top: 305vw;
  left: 49vw;
}

#memory .travel{
  width: 17vw;
  height: auto;
  position: absolute;
  top: 66vw;
  left: 73vw;
}

#memory .flex1{
  display:flex;
}

#memory .flex1 h1{
  font-family: 'Noto Serif JP', serif;
  font-weight: lighter;
  font-size: 5vw;
  background-image: linear-gradient(135deg, #8b92d5 0%, #08ffec 37%, #fefeb2 47%, #cce5e4 50%, #9e9e7c 53%, #edece5 63%, #f3f6f5 100%);
  -webkit-background-clip: text;
  color: transparent;
  width: 8vw;
  padding: 13vw 0vw 0vw 2vw;
}

#memory .flex1 p{
  font-family: "HannariMincho-Regular";
  font-size: 1.3vw;
  letter-spacing: 0.3vw;
  color: rgb(197, 197, 191);
  padding: 0.2vw 0vw 0vw 4vw;
}

#memory .comment2 h1{
  font-family: 'Noto Serif JP', serif;
  font-weight: lighter;
  font-size: 5vw;
  background-image: linear-gradient(135deg, #f6f6f5 73%, #b9f4a5 91%, #ababa1 61%, #fefdfa 62%, #7de490 55%, #58b8cf 97%, #99a5f8 100%);
  -webkit-background-clip: text;
  color: transparent;
  padding: 54vw 0vw 0vw 46vw;
}

#memory .comment2 span{
  font-family: "HannariMincho-Regular";
  font-size: 1.3vw;
  letter-spacing: 0.3vw;
  color: rgb(197, 197, 191);
  position: absolute;
  top: 206vw;
  left: 8vw;
}

#memory .comment3 span{
  font-family: "HannariMincho-Regular";
  font-size: 1.3vw;
  letter-spacing: 0.3vw;
  color: rgb(197, 197, 191);
  position: absolute;
  top: 235vw;
  left: 39vw;
}

#memory .comment4 h1{
  font-family: 'Noto Serif JP', serif;
  font-weight: lighter;
  font-size: 5vw;
  background-image: linear-gradient(135deg, #f6f6f5 73%, #9ef680 91%, #8f8f79 61%, #fefdfa 62%, #83e064 55%, #79ddf5 97%, #99a5f8 100%);
  -webkit-background-clip: text;
  color: transparent;
  width: 2vw;
  padding: 27vw 6vw 0vw 83vw;
}

#memory .comment4 span{
  font-family: "HannariMincho-Regular";
  font-size: 1.3vw;
  letter-spacing: 0.3vw;
  color: rgb(197, 197, 191);
  position: absolute;
  top: 274vw;
  left: 8vw;
}

#memory .comment5 span{
  font-family: "HannariMincho-Regular";
  font-size: 1.3vw;
  letter-spacing: 0.3vw;
  color: rgb(197, 197, 191);
  position: absolute;
  top: 337vw;
  left: 38vw;
}

#memory .futter{
  font-family: 'Noto Serif JP', sans-serif;
  font-size: 1.2vw;
  letter-spacing: 0.13vw;
  font-weight: bold;
  background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
  -webkit-background-clip: text;
  color: transparent;
  position: absolute;
  top: 382vw;
  right: 10%;
  left: 10%;
  text-align: center
}


.episode1 {
 opacity: 0;
 transform: translate(0, 100px);
 transition: all 1.5s;
}

.episode1.visible {
 opacity: 1;
 transform: translate(0, 0);
}

.episode2 {
  opacity: 0;
  transform: translate(0, 100px);
  transition: all 1.5s;
 }
 
 .episode12.visible {
  opacity: 1;
  transform: translate(0, 0);
 }

 .comment2 span {
  opacity: 0;
  transform: translate(0, 100px);
  transition: all 1.5s;
 }
 
 .comment2 span.visible {
  opacity: 1;
  transform: translate(0, 0);
 }

 .comment3 span{
  opacity: 0;
  transform: translate(0, 100px);
  transition: all 1.5s;
 }
 
 .comment3 span.visible {
  opacity: 1;
  transform: translate(0, 0);
 }


 .comment4 span {
  opacity: 0;
  transform: translate(0, 100px);
  transition: all 1.5s;
 }
 
 .comment4 span.visible {
  opacity: 1;
  transform: translate(0, 0);
 }

 .comment5 span {
  opacity: 0;
  transform: translate(0, 100px);
  transition: all 1.5s;
 }
 
 .comment5 span.visible {
  opacity: 1;
  transform: translate(0, 0);
 }

 



@media screen and (max-width: 1024px) {

  body {
    background-color: black;
}

h1 {
    font-family: "HannariMincho-Regular";
    color: rgb(255, 255, 255);
}

p {
    font-size: 1.1vw;
    color: rgb(197, 197, 191);
}

  #title {
    padding: 3vw 1.2vw 0vw 0.2vw;
  }
  
  #title h1{
    font-family: 'Noto Serif JP', serif;
    font-weight: lighter;
    font-size: 5vw;
    /* background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%); */
    -webkit-background-clip: text;
    color: transparent;
    padding: 8vw 0vw 0vw 3vw;
  }
  
  #title h6{
    font-family: 'Inter', sans-serif;
    font-size: 1.18vw;
    letter-spacing: 0.13vw;
    background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding: 1vw 0vw 0vw 4.1vw;
  }
  
  #title .title1{
    display: flex;
  }
  
  #title img {
    width: 38vw;
    height: auto;
    padding: 3vw 0vw 0vw 0vw;
  }
  
  .flex2 p {
    /* font-family: "HannariMincho-Regular"; */
    font-size: 1.6vw;
    letter-spacing: 0.3vw;
    line-height: 2;
    color: rgb(197, 197, 191);
    padding: 3vw 0vw 0vw 3.8vw;
  }
  
  .yumiyumi{
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 1.2vw;
    font-style: italic;
    letter-spacing: 0.13vw;
    color: rgb(255, 255, 255);
    padding: 5vw 0vw 0vw 4.1vw;
  }

  .flex2 .yumiyumitext{
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 1vw;
    font-style: italic;
    letter-spacing: 0.13vw;
    color: rgb(255, 255, 255);
    padding: 2vw 0vw 0vw 4.1vw;
  }
  
  #title a{
    font-family: 'Inter', sans-serif;
    font-size: 1.5vw;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.13vw;
    background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding: 2vw 0vw 0vw 4.1vw;
  }
  
  #memory {
    padding: 3vw 3vw 0vw 3vw;
  }
  
  #memory .memory1 p{
    font-family: 'Inter', sans-serif;
    font-size: 3vw;
    letter-spacing: 0.13vw;
    /* text-align: center; */
    color: rgb(255, 255, 255);
    padding: 8vw 32% 8vw 32%;
  }
  
  #memory .waves{
    width: 30vw;
    height: auto;
    padding: 0vw 0vw 0vw 0vw;
  }
  
  #memory .wood{
    width: 15vw;
    height: auto;
    position: absolute;
    top: 147vw;
    left: 48vw;
  }
  
  #memory .fog{
    width: 19vw;
    height: auto;
    position: absolute;
    top: 116vw;
    left: 71vw;
  }
  
  #memory .mountain{
    width: 40vw;
    height: auto;
    position: absolute;
    top: 159vw;
    left: 3vw;
  }
  
  #memory .water{
    width: 24vw;
    height: auto;
    position: absolute;
    top: 154vw;
    left: 70vw;
  }
    
  
  #memory .rock{
    width: 31vw;
    height: auto;
    position: absolute;
    top: 298vw;
    left: 51vw;
  }
  
  #memory .surface{
    width: 20vw;
    height: auto;
    position: absolute;
    top: 200vw;
    left: 63vw;
  }
  
  #memory .pile{
    width: 22vw;
    height: auto;
    position: absolute;
    top: 134vw;
    left: 8vw;
  }
  
  #memory .green{
    width: 16vw;
    height: auto;
    position: absolute;
    top: 131vw;
    left: 38vw;
  }
  
  #memory .mithuhashi{
    width: 27vw;
    height: auto;
    position: absolute;
    top: 233vw;
    left: 10vw;
  }
  
  #memory .sea{
    width: 28vw;
    height: auto;
    position: absolute;
    top: 356vw;
    left: 6vw;
  }
  
  #memory .campfire{
    width: 22vw;
    height: auto;
    position: absolute;
    top: 335vw;
    left: 53vw;
  }

  #memory .travel{
    width: 17vw;
    height: auto;
    position: absolute;
    top: 56vw;
    left: 73vw;
  }
  
  #memory .flex1{
    display:flex;
  }
  
  #memory .flex1 h1{
    font-family: 'Noto Serif JP', serif;
    font-weight: lighter;
    font-size: 5vw;
    background-image: linear-gradient(135deg, #8b92d5 0%, #08ffec 37%, #fefeb2 47%, #cce5e4 50%, #9e9e7c 53%, #edece5 63%, #f3f6f5 100%);
    -webkit-background-clip: text;
    color: transparent;
    width: 8vw;
    padding: 13vw 0vw 0vw 2vw;
  }
  
  #memory .flex1 p{
    font-family: "HannariMincho-Regular";
    font-size: 1.6vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    padding: 0.2vw 0vw 0vw 3vw;
  }
  
  #memory .comment2 h1{
    font-family: 'Noto Serif JP', serif;
    font-weight: lighter;
    font-size: 5vw;
    background-image: linear-gradient(135deg, #f6f6f5 73%, #b9f4a5 91%, #ababa1 61%, #fefdfa 62%, #7de490 55%, #58b8cf 97%, #99a5f8 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding: 51vw 0vw 0vw 46vw;
  }
  
  #memory .comment2 span{
    font-family: "HannariMincho-Regular";
    font-size: 1.6vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    position: absolute;
    top: 199vw;
    left: 9vw;
  }
  
  #memory .comment3 span{
    font-family: "HannariMincho-Regular";
    font-size: 1.6vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    position: absolute;
    top: 243vw;
    left: 42vw;
  }
  
  #memory .comment4 h1{
    font-family: 'Noto Serif JP', serif;
    font-weight: lighter;
    font-size: 5vw;
    background-image: linear-gradient(135deg, #f6f6f5 73%, #9ef680 91%, #8f8f79 61%, #fefdfa 62%, #83e064 55%, #79ddf5 97%, #99a5f8 100%);
    -webkit-background-clip: text;
    color: transparent;
    width: 2vw;
    padding: 79vw 6vw 0vw 83vw;
  }
  
  #memory .comment4 span{
    font-family: "HannariMincho-Regular";
    font-size: 1.6vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    position: absolute;
    top: 293vw;
    left: 10vw;
  }
  
  #memory .comment5 span{
    font-family: "HannariMincho-Regular";
    font-size: 1.6vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    position: absolute;
    top: 370vw;
    left: 37vw;
  }
  
  #memory .futter{
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 1.2vw;
    letter-spacing: 0.13vw;
    font-weight: bold;
    background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding: 2vw 0;
    position: absolute;
    top: 417vw;
    right: 13%;
    left: 15%;
  }


}


@media screen and (max-width: 680px) {

  body {
    background-color: black;
}

h1 {
    font-family: "HannariMincho-Regular";
    color: rgb(255, 255, 255);
}

p {
    font-size: 1.1vw;
    color: rgb(197, 197, 191);
}

  #title {
    padding: 3vw 1.2vw 0vw 0.2vw;
  }
  
  #title h1{
    font-family: 'Noto Serif JP', serif;
    font-weight: lighter;
    font-size: 5vw;
    /* background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%); */
    -webkit-background-clip: text;
    color: transparent;
    padding: 10vw 0vw 0vw 3vw;
  }
  
  #title h6{
    font-family: 'Inter', sans-serif;
    font-size: 1.18vw;
    letter-spacing: 0.13vw;
    background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding: 1vw 0vw 0vw 4.1vw;
  }
  
  #title .title1{
    display: flex;
    /* flex-flow: row-reverse; */
  }
  
  #title img {
    width: 25vw;
    height: auto;
    padding: 12vw 0vw 0vw 0vw;
  }
  
  .flex2 p {
    /* font-family: "HannariMincho-Regular"; */
    font-size: 1.1vw;
    letter-spacing: 0.3vw;
    line-height: 4vw;
    color: rgb(197, 197, 191);
    padding: 3vw 0vw 0vw 5.8vw;
  }
  
  .yumiyumi{
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 1.2vw;
    font-style: italic;
    letter-spacing: 0.13vw;
    color: rgb(255, 255, 255);
    padding: 2vw 0vw 0vw 4.1vw;
  }

  .flex2 .yumiyumitext{
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 0.1vw;
    font-style: italic;
    letter-spacing: 0.13vw;
    color: rgb(255, 255, 255);
    padding: 0vw 0vw 0vw 4.1vw;
  }
  
  #title a{
    font-family: 'Inter', sans-serif;
    font-size: 1.5vw;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.13vw;
    background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding: 2vw 0vw 0vw 4.1vw;
  }
  
  #memory {
    padding: 3vw 3vw 0vw 3vw;
  }
  
  #memory .memory1 p{
    font-family: 'Inter', sans-serif;
    font-size: 3vw;
    letter-spacing: 0.13vw;
    /* text-align: center; */
    color: rgb(255, 255, 255);
    padding: 8vw 32% 8vw 32%;
  }
  
  #memory .waves{
    width: 20vw;
    height: auto;
    padding: 0vw 0vw 0vw 0vw;
  }
  
  #memory .wood{
    width: 13vw;
    height: auto;
    position: absolute;
    top: 145vw;
    left: 25vw;
  }
  
  #memory .fog{
    width: 19vw;
    height: auto;
    position: absolute;
    top: 117vw;
    left: 69vw;
  }
  
  #memory .mountain{
    width: 40vw;
    height: auto;
    position: absolute;
    top: 169vw;
    left: 3vw;
  }
  
  #memory .water{
    width: 24vw;
    height: auto;
    position: absolute;
    top: 155vw;
    left: 57vw;
  }
    
  
  #memory .rock{
    width: 29vw;
    height: auto;
    position: absolute;
    top: 287vw;
    left: 52vw;
  }
  
  #memory .surface{
    width: 20vw;
    height: auto;
    position: absolute;
    top: 220vw;
    left: 63vw;
  }
  
  #memory .pile{
    width: 18vw;
    height: auto;
    position: absolute;
    top: 129vw;
    left: 8vw;
  }
  
  #memory .green{
    width: 16vw;
    height: auto;
    position: absolute;
    top: 140vw;
    left: 45vw;
  }
  
  #memory .mithuhashi{
    width: 23vw;
    height: auto;
    position: absolute;
    top: 240vw;
    left: 6vw;
  }
  
  #memory .sea{
    width: 20vw;
    height: auto;
    position: absolute;
    top: 371vw;
    left: 4vw;
  }
  
  #memory .campfire{
    width: 18vw;
    height: auto;
    position: absolute;
    top: 343vw;
    left: 56vw;
  }

  #memory .travel{
    width: 17vw;
    height: auto;
    position: absolute;
    top: 60vw;
    left: 73vw;
  }
  
  #memory .flex1{
    display:flex;
  }
  
  #memory .flex1 h1{
    font-family: 'Noto Serif JP', serif;
    font-weight: lighter;
    font-size: 5vw;
    background-image: linear-gradient(135deg, #8b92d5 0%, #08ffec 37%, #fefeb2 47%, #cce5e4 50%, #9e9e7c 53%, #edece5 63%, #f3f6f5 100%);
    -webkit-background-clip: text;
    color: transparent;
    width: 8vw;
    padding: 13vw 0vw 0vw 2vw;
  }
  
  #memory .flex1 p{
    font-family: "HannariMincho-Regular";
    font-size: 1.1vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    padding: 0.2vw 0vw 0vw 3vw;
  }
  
  #memory .comment2 h1{
    font-family: 'Noto Serif JP', serif;
    font-weight: lighter;
    font-size: 5vw;
    background-image: linear-gradient(135deg, #f6f6f5 73%, #b9f4a5 91%, #ababa1 61%, #fefdfa 62%, #7de490 55%, #58b8cf 97%, #99a5f8 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding: 49vw 0vw 0vw 46vw;
  }
  
  #memory .comment2 span{
    font-family: "HannariMincho-Regular";
    font-size: 1.1vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    position: absolute;
    top: 203vw;
    left: 9vw;
  }
  
  #memory .comment3 span{
    font-family: "HannariMincho-Regular";
    font-size: 1.1vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    position: absolute;
    top: 244vw;
    left: 32vw;
  }
  
  #memory .comment4 h1{
    font-family: 'Noto Serif JP', serif;
    font-weight: lighter;
    font-size: 5vw;
    background-image: linear-gradient(135deg, #f6f6f5 73%, #9ef680 91%, #8f8f79 61%, #fefdfa 62%, #83e064 55%, #79ddf5 97%, #99a5f8 100%);
    -webkit-background-clip: text;
    color: transparent;
    width: 2vw;
    padding: 69vw 6vw 0vw 83vw;
  }
  
  #memory .comment4 span{
    font-family: "HannariMincho-Regular";
    font-size: 1.1vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    position: absolute;
    top: 290vw;
    left: 5vw;
  }
  
  #memory .comment5 span{
    font-family: "HannariMincho-Regular";
    font-size: 1.1vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    position: absolute;
    top: 377vw;
    left: 26vw;
  }
  
  #memory .futter{
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 1.2vw;
    letter-spacing: 0.13vw;
    font-weight: bold;
    background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding: 2vw 0;
    position: absolute;
    top: 418vw;
    right: 13%;
    left: 15%;
  }


}


@media screen and (max-width: 570px) {

  body {
    background-color: black;
}

h1 {
    font-family: "HannariMincho-Regular";
    color: rgb(255, 255, 255);
}

p {
    font-size: 1.1vw;
    color: rgb(197, 197, 191);
}

  #title {
    padding: 3vw 1.2vw 0vw 0.2vw;
  }
  
  #title h1{
    font-family: 'Noto Serif JP', serif;
    font-weight: lighter;
    font-size: 5vw;
    /* background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%); */
    -webkit-background-clip: text;
    color: transparent;
    padding: 10vw 0vw 0vw 3vw;
  }
  
  #title h6{
    font-family: 'Inter', sans-serif;
    font-size: 1.18vw;
    letter-spacing: 0.13vw;
    background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding: 1vw 0vw 0vw 4.1vw;
  }
  
  #title .title1{
    display: flex;
    flex-flow: row-reverse;
  }
  
  #title img {
    width: 25vw;
    height: auto;
    padding: 12vw 3vw 0vw 0vw;
  }
  
  .flex2 p {
    /* font-family: "HannariMincho-Regular"; */
    font-size: 1vw;
    letter-spacing: 0.3vw;
    line-height: 4vw;
    color: rgb(197, 197, 191);
    padding: 3vw 0vw 0vw 5.8vw;
  }
  
  .yumiyumi{
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 1.2vw;
    font-style: italic;
    letter-spacing: 0.13vw;
    color: rgb(255, 255, 255);
    padding: 2vw 0vw 0vw 4.1vw;
  }
  
  #title a{
    font-family: 'Inter', sans-serif;
    font-size: 1.5vw;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.13vw;
    background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding: 2vw 0vw 0vw 4.1vw;
  }
  
  #memory {
    padding: 3vw 3vw 0vw 3vw;
  }
  
  #memory .memory1 p{
    font-family: 'Inter', sans-serif;
    font-size: 3vw;
    letter-spacing: 0.13vw;
    /* text-align: center; */
    color: rgb(255, 255, 255);
    padding: 8vw 32% 8vw 32%;
  }
  
  #memory .waves{
    width: 20vw;
    height: auto;
    padding: 0vw 0vw 0vw 0vw;
  }
  
  #memory .wood{
    width: 13vw;
    height: auto;
    position: absolute;
    top: 160vw;
    left: 12vw;
  }
  
  #memory .fog{
    width: 18vw;
    height: auto;
    position: absolute;
    top: 110vw;
    left: 75vw;
  }
  
  #memory .mountain{
    width: 40vw;
    height: auto;
    position: absolute;
    top: 195vw;
    left: 3vw;
  }
  
  #memory .water{
    width: 24vw;
    height: auto;
    position: absolute;
    top: 179vw;
    left: 65vw;
  }
    
  
  #memory .rock{
    width: 29vw;
    height: auto;
    position: absolute;
    top: 336vw;
    left: 41vw;
  }
  
  #memory .surface{
    width: 20vw;
    height: auto;
    position: absolute;
    top: 248vw;
    left: 68vw;
  }
  
  #memory .pile{
    width: 18vw;
    height: auto;
    position: absolute;
    top: 139vw;
    left: 5vw;
  }
  
  #memory .green{
    width: 16vw;
    height: auto;
    position: absolute;
    top: 158vw;
    left: 70vw;
  }
  
  #memory .mithuhashi{
    width: 23vw;
    height: auto;
    position: absolute;
    top: 284vw;
    left: 6vw;
  }
  
  #memory .sea{
    width: 20vw;
    height: auto;
    position: absolute;
    top: 459vw;
    left: 4vw;
  }
  
  #memory .campfire{
    width: 18vw;
    height: auto;
    position: absolute;
    top: 431vw;
    left: 61vw;
  }

  #memory .travel{
    width: 17vw;
    height: auto;
    position: absolute;
    top: 60vw;
    left: 77vw;
  }
  
  #memory .flex1{
    display:flex;
  }
  
  #memory .flex1 h1{
    font-family: 'Noto Serif JP', serif;
    font-weight: lighter;
    font-size: 5vw;
    background-image: linear-gradient(135deg, #8b92d5 0%, #08ffec 37%, #fefeb2 47%, #cce5e4 50%, #9e9e7c 53%, #edece5 63%, #f3f6f5 100%);
    -webkit-background-clip: text;
    color: transparent;
    width: 8vw;
    padding: 13vw 0vw 0vw 2vw;
  }
  
  #memory .flex1 p{
    font-family: "HannariMincho-Regular";
    font-size: 1.1vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    padding: 0.2vw 0vw 0vw 3vw;
  }
  
  #memory .comment2 h1{
    font-family: 'Noto Serif JP', serif;
    font-weight: lighter;
    font-size: 5vw;
    background-image: linear-gradient(135deg, #f6f6f5 73%, #b9f4a5 91%, #ababa1 61%, #fefdfa 62%, #7de490 55%, #58b8cf 97%, #99a5f8 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding: 28vw 0vw 0vw 46vw;
  }
  
  #memory .comment2 span{
    font-family: "HannariMincho-Regular";
    font-size: 1.1vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    position: absolute;
    top: 230vw;
    left: 9vw;
  }
  
  #memory .comment3 span{
    font-family: "HannariMincho-Regular";
    font-size: 1.1vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    position: absolute;
    top: 279vw;
    left: 32vw;
  }
  
  #memory .comment4 h1{
    font-family: 'Noto Serif JP', serif;
    font-weight: lighter;
    font-size: 5vw;
    background-image: linear-gradient(135deg, #f6f6f5 73%, #9ef680 91%, #8f8f79 61%, #fefdfa 62%, #83e064 55%, #79ddf5 97%, #99a5f8 100%);
    -webkit-background-clip: text;
    color: transparent;
    width: 2vw;
    padding: 122vw 6vw 0vw 83vw;
  }
  
  #memory .comment4 span{
    font-family: "HannariMincho-Regular";
    font-size: 1.1vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    position: absolute;
    top: 363vw;
    left: 5vw;
  }
  
  #memory .comment5 span{
    font-family: "HannariMincho-Regular";
    font-size: 1.1vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    position: absolute;
    top: 468vw;
    left: 26vw;
  }
  
  #memory .futter{
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 1.2vw;
    letter-spacing: 0.13vw;
    font-weight: bold;
    background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding: 2vw 0;
    position: absolute;
    top: 500vw;
    right: 13%;
    left: 15%;
  }


}



@media screen and (max-width: 410px) {

  body {
    background-color: black;
}

h1 {
    font-family: "HannariMincho-Regular";
    color: rgb(255, 255, 255);
}

p {
    font-size: 1.1vw;
    color: rgb(197, 197, 191);
}

  #title {
    padding: 3vw 1.2vw 0vw 0.2vw;
  }
  
  #title h1{
    font-family: 'Noto Serif JP', serif;
    font-weight: lighter;
    font-size: 5vw;
    /* background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%); */
    -webkit-background-clip: text;
    color: transparent;
    padding: 10vw 0vw 0vw 3vw;
  }
  
  #title h6{
    font-family: 'Inter', sans-serif;
    font-size: 1vw;
    letter-spacing: 0.13vw;
    background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding: 1vw 0vw 0vw 4.1vw;
  }
  
  #title .title1{
    display: flex;
    flex-flow: row-reverse;
  }
  
  #title img {
    width: 25vw;
    height: auto;
    padding: 12vw 3vw 0vw 0vw;
  }
  
  .flex2 p {
    /* font-family: "HannariMincho-Regular"; */
    font-size: 1vw;
    letter-spacing: 0.3vw;
    line-height: 4vw;
    color: rgb(197, 197, 191);
    padding: 3vw 0vw 0vw 5.8vw;
  }
  
  .yumiyumi{
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 1.2vw;
    font-style: italic;
    letter-spacing: 0.13vw;
    color: rgb(255, 255, 255);
    padding: 2vw 0vw 0vw 4.1vw;
  }
  
  #title a{
    font-family: 'Inter', sans-serif;
    font-size: 1.5vw;
    font-style: italic;
    font-weight: bold;
    letter-spacing: 0.13vw;
    background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding: 2vw 0vw 0vw 4.1vw;
  }
  
  #memory {
    padding: 3vw 3vw 0vw 3vw;
  }
  
  #memory .memory1 p{
    font-family: 'Inter', sans-serif;
    font-size: 3vw;
    letter-spacing: 0.13vw;
    /* text-align: center; */
    color: rgb(255, 255, 255);
    padding: 8vw 15% 8vw 32%;
  }
  
  #memory .waves{
    width: 20vw;
    height: auto;
    padding: 0vw 0vw 0vw 0vw;
  }
  
  #memory .wood{
    width: 13vw;
    height: auto;
    position: absolute;
    top: 173vw;
    left: 12vw;
  }
  
  #memory .fog{
    width: 18vw;
    height: auto;
    position: absolute;
    top: 112vw;
    left: 75vw;
  }
  
  #memory .mountain{
    width: 40vw;
    height: auto;
    position: absolute;
    top: 212vw;
    left: 3vw;
  }
  
  #memory .water{
    width: 24vw;
    height: auto;
    position: absolute;
    top: 210vw;
    left: 65vw;
  }
    
  
  #memory .rock{
    width: 29vw;
    height: auto;
    position: absolute;
    top: 317vw;
    left: 51vw;
  }
  
  #memory .surface{
    width: 20vw;
    height: auto;
    position: absolute;
    top: 248vw;
    left: 52vw;
  }
  
  #memory .pile{
    width: 18vw;
    height: auto;
    position: absolute;
    top: 149vw;
    left: 5vw;
  }
  
  #memory .green{
    width: 16vw;
    height: auto;
    position: absolute;
    top: 183vw;
    left: 70vw;
  }
  
  #memory .mithuhashi{
    width: 23vw;
    height: auto;
    position: absolute;
    top: 361vw;
    left: 6vw;
  }
  
  #memory .sea{
    width: 20vw;
    height: auto;
    position: absolute;
    top: 542vw;
    left: 4vw;
  }
  
  #memory .campfire{
    width: 18vw;
    height: auto;
    position: absolute;
    top: 412vw;
    left: 61vw;
  }

  #memory .travel{
    width: 17vw;
    height: auto;
    position: absolute;
    top: 60vw;
    left: 77vw;
  }
  
  #memory .flex1{
    display:flex;
  }
  
  #memory .flex1 h1{
    font-family: 'Noto Serif JP', serif;
    font-weight: lighter;
    font-size: 5vw;
    background-image: linear-gradient(135deg, #8b92d5 0%, #08ffec 37%, #fefeb2 47%, #cce5e4 50%, #9e9e7c 53%, #edece5 63%, #f3f6f5 100%);
    -webkit-background-clip: text;
    color: transparent;
    width: 8vw;
    padding: 13vw 0vw 0vw 2vw;
  }
  
  #memory .flex1 p{
    font-family: "HannariMincho-Regular";
    font-size: 1.1vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    padding: 0.2vw 0vw 0vw 3vw;
  }
  
  #memory .comment2 h1{
    font-family: 'Noto Serif JP', serif;
    font-weight: lighter;
    font-size: 5vw;
    background-image: linear-gradient(135deg, #f6f6f5 73%, #b9f4a5 91%, #ababa1 61%, #fefdfa 62%, #7de490 55%, #58b8cf 97%, #99a5f8 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding: 51vw 0vw 0vw 46vw;
  }
  
  #memory .comment2 span{
    font-family: "HannariMincho-Regular";
    font-size: 1.1vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    position: absolute;
    top: 267vw;
    left: 9vw;
  }
  
  #memory .comment3 span{
    font-family: "HannariMincho-Regular";
    font-size: 1.1vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    position: absolute;
    top: 347vw;
    left: 32vw;
  }
  
  #memory .comment4 h1{
    font-family: 'Noto Serif JP', serif;
    font-weight: lighter;
    font-size: 5vw;
    background-image: linear-gradient(135deg, #f6f6f5 73%, #9ef680 91%, #8f8f79 61%, #fefdfa 62%, #83e064 55%, #79ddf5 97%, #99a5f8 100%);
    -webkit-background-clip: text;
    color: transparent;
    width: 2vw;
    padding: 173vw 6vw 0vw 83vw;
  }
  
  #memory .comment4 span{
    font-family: "HannariMincho-Regular";
    font-size: 1.1vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    position: absolute;
    top: 440vw;
    left: 5vw;
  }
  
  #memory .comment5 span{
    font-family: "HannariMincho-Regular";
    font-size: 1.1vw;
    letter-spacing: 0.3vw;
    color: rgb(197, 197, 191);
    position: absolute;
    top: 559vw;
    left: 26vw;
  }
  
  #memory .futter{
    font-family: 'Noto Serif JP', sans-serif;
    font-size: 1.2vw;
    letter-spacing: 0.13vw;
    font-weight: bold;
    background-image: linear-gradient(135deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
    -webkit-background-clip: text;
    color: transparent;
    padding: 2vw 0;
    position: absolute;
    top: 606vw;
    right: 13%;
    left: 15%;
  }


}