/* -------------------------------------------------- */

/* root */

body{
  max-width: 100vw;
  width: 100%;
  max-height: 100vh;
  height: 100%;

  overflow: hidden;
}
footer{
  margin-top: 0;
}
.windows{
  width: 100%;
  height: 100%;
  border: var(--window-border);
  background-color: var(--color-white);
  
  box-shadow: var(--window-shadow);
}
.window-ui{
  width: 100%;
  height: 18px;

  padding: 0 0.2rem;

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

  border-bottom: var(--window-border);
}
  .window-ui a{
    width: auto;
    height: 90%;

    display: flex;
    align-items: center;
  }
    .window-ui a img{
      width: auto;
      aspect-ratio: 1 / 1;
      height: 100%;
    }

/* -------------------------------------------------- */

/* header */

.language__selector.sp{
  display: none !important;
}


/* -------------------------------------------------- */

/* main */

main{
  height: calc(100vh - 88px);
}
.desctop{
  width: 100%;
  height: 100%;
}
  .desctop__inner{
    width: 100%;
    height: 100%;
  }
    .desctop__inner__container{
      width: 100%;
      height: 100%;
      position: relative;
    }
      .desctop__inner__container .folder{
        width: 70px;
        height: auto;
      }
        .desctop__inner__container .folder .folder__inner{
          width: 100%;
          height: fit-content;
        }
          .desctop__inner__container .folder .folder__inner .img-box{
            width: 100%;
            height: auto;
          }
            .desctop__inner__container .folder .folder__inner img{
              width: 100%;
              height: auto;
            }
/* each folder */

.dammy{
  position: absolute;
  cursor: pointer !important;
}
  .dammy .folder__inner{
    pointer-events: none;
  }
.dammy-1  { top: 12%; left: 10%; }
.dammy-2  { top: 15%; left: 46%; }
.dammy-3  { top: 18%; right: 33%; }
.dammy-4  { top: 9%; right: 12%; }
.dammy-5  { top: 40%; left: 9%; }
.dammy-6  { top: 37%; left: 41%; }
.dammy-7  { top: 34%; left: 56%; }
.dammy-8  { top: 38%; right: 26%; }
.dammy-9  { top: 45%; right: 10%; }
.dammy-10 { top: 61%; left: 13%; }
.dammy-11 { top: 82%; left: 25%; }
.dammy-12 { top: 70%; left: 40%; }
.dammy-13 { top: 74%; right: 44%; }
.dammy-14 { top: 72%; right: 27%; }
.dammy-15 { top: 66%; right: 17%; }


/* main folders*/
.mononkvl,
.elina,
.heart,
.koto{
  position: absolute;
  cursor: pointer;
}
.mononkvl{
  width: 78px !important;
  top: 21%;
  left: 27%;
}
.heart{
  width: 90px !important;
  top: 50%;
  left: 26%;
}
.koto{
  width: 105px !important;
  top: 28%;
  right: 16%;
}
.elina{
  width: 110px !important;
  top: 55%;
  right: 35%;
}


/* -------------------------------------------------- */

/* popup */

.popup{
  position: fixed;
  width: 100vw;
  height: calc(100vh - 44px);
  bottom: 0;
  left: 0;
  pointer-events: none;
}
  .popup__inner{
    width: 100%;
    height: 100%;
    position: relative;
  }
    .popup .window-ui{
      background-color: var(--color-red);
    }
/* -------------------------------------------------- */

/* each popup */

.mononkvl__popup{
  position: absolute;
  z-index: 5000;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);

  max-width: 36%;
  min-width: 500px;
  width: 100%;
  height: auto;
  /* 初期は非表示（hover時のみ表示） */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  will-change: opacity;
}

/* mononkvlフォルダのhover中だけポップアップ表示（Chrome/Safari対応） */
body:has(.folder.mononkvl:hover) .mononkvl__popup{
  opacity: 1;
  visibility: visible;
  
}
  .mononkvl__popup__content{
    width: 100%;
    height: auto;
  }
    .mononkvl__popup__content .img__box{
      width: 100%;
      aspect-ratio: 5 / 6;
      height: auto;
      overflow: hidden;
      display: flex;
      justify-content: center;
    }
      .mononkvl__popup__content .img__box img{
        width: auto;
        /* aspect-ratio: 5 / 6; */
        height: 100%;
        object-fit: cover;
      }


/* about */

.about.active{
  display: block !important;
}
.about{
  display: none;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);

  max-width: 60%;
  min-width: 400px;
  width: 100%;
  height: 80%;
  /* margin: 0 2rem; */
  overflow: hidden;
  box-shadow: var(--window-shadow);
}
  .about__inner{
    width: 100%;
    height: 100%;
  }
    .window__about{
      width: 100%;
      height: calc(100% - 18px);
      overflow-x: hidden;
      overflow-y: scroll;
    }
      .window__about__inner{
        display: flex;
        flex-direction: column;
        align-items: center;
      }
        .window__about__inner .logo-box{
          height: var(--subtitle-font-size);
          margin: 6rem;
        }
          .window__about__inner .logo-box img{
            height: var(--subtitle-font-size);
          }
        .window__about__inner .contents{
          width: 100%;
          height: auto;
          padding: 0 15%;

          display: flex;
          flex-direction: column;
          gap: 6rem;
        }
          .window__about__inner .contents .about__desc{
            display: flex;
            flex-direction: column;
            gap: 5rem;
          }
            .about__desc p{
              line-height:  1.7rem;
            }
          .window__about__inner .contents .line{
            border-bottom: var(--window-border);
            height: 0;
          }
          .window__about__inner .contents .about__info{}
            .about__info ul{
              display: flex;
              flex-direction: column;
              gap: 0.7rem;
              align-items: start;
            }
              .about__info ul li{
                display: flex;
                align-items: center;
                gap: 0.5rem;
              }
                .about__info ul li p{
                  line-height: 2rem
                }
          .window__about__inner .contents .about__copyright{
            margin: 7rem 0 2.5rem;
            display: flex;
            justify-content: center;
          }
.contact.active{
  display: block;
}
  .contact{
    display: none;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  
    max-width: 60%;
    min-width: 400px;
    width: 100%;
    max-height: 65%;
    height: auto;

    overflow: hidden;
    box-shadow: var(--window-shadow);
  }
    .contact__inner{
      width: 100%;
      height: 100%;
    }
      .window__contact{
        width: 100%;
        padding: 8rem;
        height: auto;
      }
        .window__contact__inner{
          width: 100%;
          height: auto;

          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 3rem;
        }
            .window__contact__inner .title__box h5{
              font-size: var(--accent-font-size);
              font-weight: 700;
            }
          .window__contact__inner .form__btn__box{
            width: auto;
            height: auto;
            padding: 0 2rem;
          }
            .form__btn__box a{
              background-color: var(--color-black);
              width: 250px;
              height: 54px;

              display: flex;
              justify-content: center;
              align-items: center;
            }
              .form__btn__box a p{
                font-size: var(--desc-font-size);
                color: var(--color-white);
              }





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

  .language__selector.sp{
    display: none !important;
  }

  main{
    height: calc(100vh - 132px) !important;
  }

.about{
  max-width: 80%;
  min-width: 280px;
  height: 70%;
}
  .window__about .contents{
    padding: 0 2rem;
  }
.contact{
  max-width: 80%;
  min-width: 280px;
}
  .window__contact{
    padding: 20vh 2rem;
  }


}




/* -------------------------------------------------- */

/* for folders */
@media screen and (max-width: 1100px){
  .dammy-7  { top: 34%; left: 56%;  display: none;}
  .dammy-11 { top: 82%; left: 25%; display: none;}
  .dammy-13 { top: 74%; right: 44%; display: none;}
}
@media screen and (max-width: 900px){
  .popup{
    display: none;
  }
  .dammy-3 { display: none; }
  .dammy-8 { display: none; }
  .dammy-15 { display: none; }
  .koto{
    width: 105px !important;
    top: 28%;
    right: 23%;
  }
}
@media screen and (max-width: 600px){
  .dammy-1 { display: none; }
  .dammy-12 { display: none; }
  .mononkvl{
    width: 78px !important;
    top: 12%;
    left: 14%;
  }
}
@media screen and (max-width: 430px){
  .desctop__inner__container .folder{
    width: 55px;
    height: auto;
  }
  .dammy-2  { top: 13%; left: 56%; }
  .dammy-4 { display: none; }
  .dammy-5  { top: 33%; left: 13%; }
  .dammy-6  { top: 35%; left: 47%; }
  .dammy-9  { top: 46%; right: 18%; }
  .dammy-10 { top: 68%; left: 15%; }
  .dammy-14 { top: 74%; right: 15%; }
  .mononkvl{
    width: 78px !important;
    top: 12%;
    left: 14%;
  }
  .heart{
    width: 90px !important;
    top: 58%;
    left: 51%;
  }
  .koto{
    width: 105px !important;
    top: 24%;
    right: 10%;
  }
  .elina{
    width: 80px !important;
    top: 47%;
    right: 62%;
  }
}