body{
    color: #fff;
}
/***************

▼kv

***************/
section.kv{
    background: #41084D;
background: url(../img/top_kv_tritop.webp), linear-gradient(0deg, rgba(65, 8, 77, 1) 0%, rgba(8, 17, 60, 1) 26%, rgba(12, 10, 23, 1) 100%);
overflow: hidden;
margin: 0;
padding: 0;
position: relative;
z-index: 0;

    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
}
/* 共通スタイル */
.wrap_kv_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0; 
  animation: fadeIn 1s forwards;
  animation-play-state: paused;
}

.bg2 { background-image: url(../img/kv-flower1.webp); animation-delay: .1s; background-position: left bottom 0;background-size: 400px;}
.bg3 { background-image: url(../img/kv-flower1.webp); animation-delay: 0s; background-position: right bottom 130px;background-size: 500px;}
.bg4 { background-image: url(../img/kv-flower-blur.webp); animation-delay: .2s; background-position: left 15% bottom -20px;background-size: 500px;}
.bg5 { background-image: url(../img/kv-flower-blur.webp); animation-delay: .3s; background-position: right -10% bottom 150px;background-size: 500px;}

/* フェードインアニメーション */
@keyframes fadeIn {
  to { opacity: 1; }
}
section.kv .wrap_kv_img{
    position: absolute;
    left: 0;
    top: 0;
    min-height: 100vh;
    width: 100%;
    background-image: url(../img/kv_main4.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
    animation: zoomIn 2s ease forwards;
    animation-play-state: paused;
}

@keyframes zoomIn {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
section.kv:after{
    background-image:  url(../img/top_kv_tribottom.webp);
    position: absolute;
    bottom:0;
    right: 0;
    content: "";
    background-size: contain;
    z-index: 1;
    width: 100%;
    height: 300px;
    background-repeat: no-repeat;
    background-position: bottom -50px right;
}
section.kv img.catch_copy{
    position: absolute;
    width:120px;
    z-index: 2;
    left: 15%;
    top:50%;
    transform: translateY(-50%);
}
section.kv img.name{
    position: absolute;
    width:120px;
    z-index: 2;
    right: 15%;
    top:10%;
}

section.kv ul.sns{
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
}
section.kv ul.sns img{
    width: 40px;
}
@media screen and (max-width: 768px){
    
.bg2 {background-position: left -60% bottom 70px;background-size: 350px;}
.bg3 {background-position: right -100% bottom 200px;background-size: 400px;}
.bg4 {background-position: left -100px bottom 150px;background-size: 400px;}
.bg5 { background-position: right -200px bottom 200px;background-size: 400px;}


section.kv .wrap_kv_img{
    background-size:90%;
}
section.kv{
    background-size: 200%;
}

section.kv:after{
    background-size: 300%;
    background-repeat: no-repeat;
    background-position: bottom 0px center;
}

section.kv img.catch_copy{
    width:18vw;
    left: 5%;
}

section.kv img.name{
    width:90px;
    z-index: 2;
    right: 10%;
}
}

#container {
  overflow:hidden;
  position:relative;
  height: 100%;
  width: 100%;
  height:100vh;
}

#pixie {
  z-index:10;
  position: absolute;
  top: 0;
  left: 0;
}
canvas{
  pointer-events: none;}
/***************

▼message

***************/
section.message{
    background-color: #e7e7e7;
    color: #000;
    background-image: url(../img/bg-curve.webp);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size:40vw;
}
section.message p{
    text-align: left;
}
section.message p span{
    color: #871325;
    font-size: xx-large;
}
section.message img{
    max-width: 400px;
}

@media screen and (max-width: 768px){
    section.message{
    background-size:80%;
    background-position: center bottom;
}
	
section.message p{
	font-size:larger
}
}
/***************

▼profile

***************/

section.profile{
    background-color: #871325;
    position: relative;
    background-image: url(../img/bg_uroko.jpg),url(../img/bg_uroko.jpg);
    background-size: 50%, 50%;
    background-position: right -30% top, left -30% bottom 30%;
    background-repeat: no-repeat;
}

section.profile p{
    font-size: 23px;
    text-align: left;
}
section.profile img{
    max-width: 500px;
}
ul.tag {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  width: 100%;
  line-height: 2.5;
  text-align: center;
  margin: 10vw 0;
}
ul.tag span{
    display: block
}
ul.tag li{
    border-right: solid 1px #c79098;
    position: relative;
}
ul.tag li::before{
    width: 50px;
    height: 35px;
    content: "";
    position: absolute;
    top:-60px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../img/top_profile_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
ul.tag li:last-child{
    border-right: none
}
@media screen and (max-width: 768px){
     section.profile{
    background-size: 90%, 110%;
    background-position:  top right -40vw, left -50vw bottom 30%;
}  
section.profile p{
    text-align: center;
    margin-bottom: 10%;
}
ul.tag li{
    border-right: none;
}
ul.tag li::before{
    width: 30px;
    height: 35px;
    top:-40px;
}
ul.tag {
  grid-template-columns: repeat(2, 1fr);
  gap: 90px 0;
  width: 100%;
  line-height: 1.5;
  margin: 30vw 0 0;
}
}


/***************

▼obi

***************/

section.obi{
    position: relative;
}
section.obi img{
    max-width: 800px;
}
section.obi:before{
    content: "";
    position: absolute;
    width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent transparent #871325;
border-width: 200px 0px 0px 98vw;
bottom: 0;
left: 0;
z-index: -1;
}
section{
    overflow: hidden;
}
/***************

▼video

***************/
section.video{
    background-color: #871325;
    background-image: url(../img/bg_kumo-left.webp), url(../img/bg_kumo.webp);
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right bottom;
    background-size: 30%, 30%;
}
section.video img{
    max-width: 900px;
}
.youtube-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%; 
  max-width: 800px;
  margin: 0 auto; 
}

.youtube-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
@media screen and (max-width: 768px){
    section.video{
    background-size: 50%, 50%;
}
}
/***************

▼gallery

***************/
section.gallery{
    position: relative;
    overflow-x: hidden;
    background-color: #871325;
    z-index: 0;
    padding-bottom: 0;

}

section.gallery .wrap_object{
    bottom:50%;
    right: 0;
    background-image: url(../img/bg_goldline.webp);
    background-size: contain;
    background-repeat: no-repeat;
}
section.gallery:before{
    content: "";
    position: absolute;
    width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent transparent #e7e7e7;
border-width: 400px 0px 0px 100vw;
bottom: 0;
left: 0;
z-index: -1;
}
section.gallery .wrap_gallery{
  display: flex;
  gap:20px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
section.gallery .wrap_gallery .box{
min-height: 100px;
  aspect-ratio: 3 / 2;
  display: block;
  width: 30%;
  position: relative;
}

section.gallery .wrap_gallery .box .wrap_img {
    width: 100%;
    height: 100%; 
    overflow: hidden; 
}

section.gallery .wrap_gallery .box .wrap_img img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block; 
}
section.gallery .wrap_gallery .box span.new{
    content:"";
    position: absolute;
    right: -10px;
    top: -10px;
    min-height: 80px;
    width: 80px;
    background-image: url(../img/icon_new.webp);
    background-size: contain;
    background-repeat: no-repeat;
}
section.gallery .wrap_gallery .box img{
    object-fit: cover;
}

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

section.gallery .wrap_gallery .box span.new{
    min-height: 50px;
    width: 50px;
}
section.gallery .wrap_gallery .box{
  width: 45%;
}

}
/*****************/
.loader-hide {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.loader-hide img {
  animation: none !important; /* 回転アニメ停止 */
  opacity: 0 !important;
}