@charset "utf-8";
/* CSS Document */

/* フェードイン用設定 */
.feadIn-0{
    opacity: 0; /* 最初は非表示にしておく */
    transition: all 1s; /* 動きを滑らかに */}
.fadeIn {
    opacity: 1;
}
/* フェードイン用設定 */

h1{
    font-size: 5rem;
}
.main-v-wrap ,
.main-haikei ,
.table{
    display: none;
}

.main-v-wrap-tab{
    position: relative; /* ★基準 */
    width: 100%;
}
.main-haikei-tab{
    width: 100%;
}

.toprogo{
  position: absolute;
  width: 60%;
  z-index: 37;
  bottom: 10%;
  left: 20%;
}

.stalker-tab{
    max-width: 100%;
    margin-bottom: 12rem;
}
.stalker2-tab{
    max-width: 100%;
    margin-bottom: 12rem;
}

.table-tab{
    width: 100%;
    position: absolute;
    bottom: 0%;
    left: 0%;
}

.tab-tatie{
    max-width: 100%;
}


#tatie-faedIN {
  animation: fade-in 1.5s;
  animation-fill-mode: forwards;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}





.main-shita{
    position: absolute;
    bottom: 100;
    width: 100%;
    height: 15rem;
    background-image: url(../image/testbackgif.gif);
    background-attachment: fixed;
    background-size: cover;
    
    z-index: 35;
}

.OBI01{
    width: 100%;
    height: 15rem;
    background-color: brown;
}

.news{
    width: 100%;
    position: relative;
    margin: 4rem 0 0 0;
}

.newslogo{
    font-family: "Mochiy Pop P One", sans-serif;
    font-size: 3rem;
    color: #FA26A0;
    text-align: center;
}

.news-A{

    text-align: center;
    margin: 5rem 0 0 0;

}
 
.news-B{
text-align: center;
margin: 2rem 0 0 0;
} 

.news-a{
    width: 8rem;
    height: 1.8rem;
    font-family: "Mochiy Pop P One", sans-serif;
    letter-spacing:0.3rem;
    padding: 0.2rem 0 0 0;
  background-color: #FA26A0; /* ピンク */
  color: #fff;
  font-size: 1.3rem;
  border-radius: 3rem; /* 完全な丸み */
  margin: 0 auto;
}





.news-b-time{
        margin: 0.5rem 0.5rem 0 0.5rem;
}


.news-b{
    display: inline-block;
    font-family: "Mochiy Pop P One", sans-serif;
    letter-spacing:0.1rem;
    font-size: 1rem;
    margin: 0.5rem 0 0 0;
    position: relative;
}

/* a要素(リンクつけた時)はa要素に変更しましょうね */
.news-b a{
          text-decoration:none;
          color:#FA26A0;
}
.news-b a:hover{
  color:#ec66b4;
}


.news-b:before{
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  width: 0;
  border-bottom: solid 4px #FA26A0;
}
@keyframes news-b-anime {
  0%{
    width: 0%;
  }
  100%{
    width: 100%;
  }
}

.news-b.is-underline:before{
  animation: news-b-anime 0.5s linear forwards;
}






/* 
.news-juice-kage{
    position: absolute;
    transform: rotate(25deg);
    top:50%;
    right: 8%;
} */


.profilelogo{
    font-family: "Mochiy Pop P One", sans-serif;
    font-size: 3rem;
    max-width:100%;
    color: #FA26A0;
    text-align: center;
    margin: 7rem 0 0 0;
}

.prof-tatie{
    width: 100%;
display: block;
margin: 4rem auto;
background-image: url(../image/proftatie.png);
background-size: cover;
transition: 0s;
}

.prof-tatie:hover{
  background-image: url(..//image/proftatie2.png);

}




.prof-logo-wrap{
  position: relative;
text-align: center;
margin: 4rem 0 0 0;
}


.prof-logo-wrap::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 4px;
  width: 0;
  background-color: #FA26A0;
}

.prof-logo-wrap.is-underline2::after{
  animation: prof-logo-anime 0.6s ease forwards;
}

@keyframes prof-logo-anime{
  from{ width: 0; }
  to{ width: 100%; }
}



.prof-matome{
  position: relative;
  text-align: center;
}






.moromoro{
    display: inline-block;
    line-height: 2rem;
    padding-bottom: 20px;
    margin: 3rem;
    border-bottom: 2px solid #ec66b4;
}

.old{
    display: block;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #ec66b4;
    width: fit-content;
    margin: 1rem auto;
}


.birthday{
    display: block;
    padding-bottom: 3px;
    border-bottom: 2px solid #ec66b4;
    width: fit-content;
    margin: 1rem auto;
}
.sinntyou{
    display: block;
    padding-bottom: 3px;
    border-bottom: 2px solid #ec66b4;
    width: fit-content;
    margin: 1rem auto;
}
.sukina{
    display: block;
    padding-bottom: 3px;
    border-bottom: 2px solid #ec66b4;
    width: fit-content;
    margin: 1rem auto;
}
.kiraina{
    display: block;
    padding-bottom: 3px;
    border-bottom: 2px solid #ec66b4;
    width: fit-content;
    margin: 1rem auto;
}
.syumi{
    display: block;
    padding-bottom: 3px;
    border-bottom: 2px solid #ec66b4;
    width: fit-content;
    margin: 1rem auto;
}
.sikou{
    display: block;
    padding-bottom: 3px;
    border-bottom: 2px solid #ec66b4;
    width: fit-content;
    margin: 1rem auto;
}


.OBI02{
    width: 100%;
    height: 10rem;
    background-image: url(../image/testbackgif.gif);
    background-attachment: fixed;
    background-size: cover;
}


.picklogo{
    font-family: "Mochiy Pop P One", sans-serif;
    font-size: 3rem;
    max-width:100%;
    color: #FA26A0;
    text-align: center;
    margin: 3rem 0 0 0;
}


.pickup-sliderPC{
    display: none;
}


.container {
  margin: 30px auto 0;
  max-width: 300px;
  width: 100%;
}
img {
  height: auto;
  width: 100%;
}
.thumbnail .slick-track {
  transform: unset !important;
}
.thumbnail-img {
  opacity: 0.3;
  transition: opacity .3s linear;
}
.thumbnail .slick-current {
  opacity: 1;
}


.pickup-btn-wrap {
  text-align: center;
  margin: 2rem;
}

.pickup-btn-pink {
  display: inline-block;
  padding: 1rem 3rem;
  background-color: #ff2fa0; /* ピンク */
  color: #fff;               /* 文字：白 */
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 30px;       /* 丸み */
  border: 0.3rem solid #ff2fa0;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease; /* なめらか */
}

.pickup-btn-pink:hover {
  background-color: #fff;    /* 背景：白 */
  color: #ff2fa0;            /* 文字：ピンク */
}



.workslogo{
    font-family: "Mochiy Pop P One", sans-serif;
    font-size: 3rem;
    max-width:100%;
    color: #FA26A0;
    text-align: center;
    margin: 10rem 0 0 0;
}

.worksAB{
    margin: 3rem;
}


.works-btn-wrap {
  text-align: center;
  margin: 2rem;
}

.works-btn-pink {
  display: inline-block;
  padding: 1rem 3rem;
  background-color: #ff2fa0; /* ピンク */
  color: #fff;               /* 文字：白 */
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 30px;       /* 丸み */
  border: 0.3rem solid #ff2fa0;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease; /* なめらか */
}

.works-btn-pink:hover {
  background-color: #fff;    /* 背景：白 */
  color: #ff2fa0;            /* 文字：ピンク */
}


.footer2{
    width:100%;
    height: 15rem;
    background-image: url(../image/testbackgif.gif);
    background-attachment: scroll;
    background-size: cover;
}







.osakapeta{
  width: 70%;
  position:absolute;
  bottom: 0;
  left: 0;
  opacity: 0.4;
}

small{
  bottom: 0;
  right: 0;
  position: absolute;
  font-size: 2rem;
  margin: 0.5rem;
}




/* pickup movieの設定 */

.pickup-movie-logo{
    font-family: "Mochiy Pop P One", sans-serif;
    font-size: 3rem;
    max-width:100%;
    color: #FA26A0;
    text-align: center;
    margin: 6rem 0 0 0;
}


.youtube-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

.youtube-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.movie-list {
  display: grid;
  grid-template-columns: 1fr; /* スマホ：縦 */
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}




@media (max-width: 768px) {
  .main-shita,
  .OBI02 {
    background-attachment: scroll;
  }


}

@media screen and (min-width: 768px) {
  .movie-list {
    grid-template-columns: repeat(3, 1fr); /* 3列 */
  }
    .toprogo{
  position: absolute;
  width: 30%;
  z-index: 37;
  top: 30%;
  left: 15%;
}
}


/* ↓tablet 768px over */
@media screen and (min-width: 768px) {
    body{
    font-size:87.5%;

}
html{
        scroll-behavior: smooth;
}

.main-v-wrap{
    display: block;
    position: relative; /* ★基準 */
    width: 100%;
}
.main-haikei{
    display: block;
    width: 100%;
}

.table{
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0%;
    left: 0%;
}




.main-v-wrap-tab ,
.main-haikei-tab ,
.table-tab{
    display: none;
}


 
.news-B{
    display: flex;
margin: 2rem 0 0 33%;
} 

.news-a{
    width: 10rem;
  margin: 0 ;
}



.news-b{
    margin: 0.5rem 0 0 1rem;
}

.prof-matome::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -6rem;
  height: 4px;
  width: 0;
  background-color: #FA26A0;
}

.prof-matome.is-underline3::after{
  animation: prof-logo-anime 0.6s ease forwards;
}

@keyframes prof-logo-anime{
  from{ width: 0; }
  to{ width: 100%; }
}






.prof-AB{
    display: flex;
    justify-content: center;
    gap: 4rem;
}

.worksA{
  width: 30%;

}
.worksAB{
    display: flex;
    justify-content: center;
}


.osakapeta{
  width: 40%;
  position:absolute;
  bottom: 0;
  left: 0;
  opacity: 0.4;
}



}

/* ↓PC 960px */
@media screen and (min-width: 960px){
    body{
    font: size 92%;

    }
}

/* ↓PC 1024px */
@media screen and (min-width: 1024px){
    body{
    font: size 100%;

    }
}




/* wrksの設定 */

.works001{
  display: block;
  width: 35%;
  margin:  5rem auto;
}

@media (max-width: 768px) {
.works001{
  width: 80%;
}}

.works-logo , .works-sonhoka{
    font-family: "Mochiy Pop P One", sans-serif;
    font-size: 3rem;
    max-width:100%;
    color: #FA26A0;
    text-align: center;
    margin: 6rem 0 0 0;
}



.workslistup{
  display: block;
  width: 60%;
  margin: 6rem auto;
}

.workslist{
  font-size: 1.3rem;
  margin: 1.5rem 0;
}
.tab-workslistup .tab-workslist{
  display: none;
}




@media (max-width: 768px) {
.tab-workslistup{
  display: block;
  width: 60%;
  margin: 6rem auto;
}

.tab-workslist{
  font-size: 1.3rem;
  margin: 1.5rem 0;
}

.workslistup .workslist{
  display: none;
}

.tab-workslistup .tab-workslist{
  display: block;
}
}