@charset "utf-8";

html {
    font-size: 100%;
    /* color: #333; */
    color: #1E0853;
    background-color: #D9D9D9;
    /* font-family: "Oleo Script", serif; */
    font-family: "Noto Sans JP", serif;
}

img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    object-fit: cover;
}

ul,ol {
    list-style-type: none;
}

a {
    color: #333;
    text-decoration: none;
}

.sec__title {
    font-family: "Oleo Script", serif;
    font-size: 10vw;
    color: #442198;
    /* color: #3186C3; */
    font-weight: normal;
}

.sec__left,
.sec__right {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.sec__left::before {
    content: "";
    position: absolute;
    top: 44%;
    left: -100%; /* 最初は画面外（左） */
    width: 80%;
    height: 40%;
    background-color: #BBB3D1;
    /* background-color: #B5C5EE; */
    transition: left 0.6s ease-in-out; /* アニメーション */
    border-radius: 0 50px 0 0;
    z-index: -1;
  }

  .sec__right::before {
    content: "";
    position: absolute;
    top: 44%;
    left: 100%;
    border-radius: 50px 0 0 0;
    width: 80%;
    height: 40%;
    background-color: #BBB3D1;
    /* background-color: #B5C5EE; */
    transition: left 0.6s ease-in-out; /* アニメーション */
    z-index: -1;
  }
  
  /* 表示されたら背景がスライドイン */
  .sec__left.show::before {
    left: 0;
  }
  .sec__right.show::before {
    left: 20%;
  }


/*header================================*/
header {
    width: 100%;
    height: 120px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 8px 24px;
}

.header__logo {
    transition: opacity 0.5s ease-out;
}
    /*スクロールダウン用*/
    /*スクロールダウン全体の場所*/
    .scrolldown4{
        /*描画位置※位置は適宜調整してください*/
        position:absolute;
        bottom:0 ;
        right:4%;
        /*矢印の動き1秒かけて永遠にループ*/
        animation: arrowmove 1s ease-in-out infinite;
        transition: opacity 0.5s ease-out;
    }
    
    /*下からの距離が変化して全体が下→上→下に動く*/
    @keyframes arrowmove{
          0%{bottom:1%;}
          50%{bottom:3%;}
         100%{bottom:1%;}
     }
    
    /*Scrollテキストの描写*/
    .scrolldown4 span{
        /*描画位置*/
        position: absolute;
        left:0;
        bottom:10px;
        /*テキストの形状*/
        color: #1E0853;
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        /*縦書き設定*/
        -ms-writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }
    
    /* 矢印の描写 */
    .scrolldown4:before {
        content: "";
        /*描画位置*/
        position: absolute;
        bottom: 10;
        right: -6px;
        /*矢印の形状*/
        width: 1px;
        height: 20px;
        background: #1E0853;
        transform: skewX(-31deg);
    }
    
    .scrolldown4:after{
        content:"";
        /*描画位置*/
        position: absolute;
        bottom:0;
        right:0;
        /*矢印の形状*/
        width:1px;
        height: 50px;
        background:#1E0853;
    }

/*.main__visual==============================================*/

.main__visual {
    position: relative;
    height: 400vh;
}
.hero {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.background {
    position: absolute;
    width: 96%;
    height: 96%;
    border-radius: 50% 50% 0 0;
    /* border: 8px solid #DACB2C; */
    background: url('../images/hero.webp') center/cover no-repeat;


    box-shadow: 
    0 0 20px rgba(255, 215, 0, 0.8),   /* 光沢感とハイライト */
    0 0 30px rgba(255, 215, 0, 0.6),   /* 輝きが広がる */
    0 0 40px rgba(255, 215, 0, 0.4),   /* 広がる金属の輝き */
    inset 0 0 15px rgba(0, 0, 0, 0.6),  /* 内側の影で深み */
    inset 0 0 30px rgba(0, 0, 0, 0.3),  /* 内側の影でより立体的 */
    0 0 15px rgba(0, 0, 0, 0.4),       /* 外側に微細な暗い影 */
    0 0 30px rgba(255, 215, 0, 0.7);   /* 光沢の強調 */
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0;
    transition: opacity 1.5s;
}
.text {
    position: absolute;
    color: #1E0853;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.5s, transform 1.5s;
    text-align: center;
}
.text h2 {
    font-size: 7.4vw;
    font-family: "Oleo Script", serif;/*メモ*/
    margin-bottom: 24px;
    font-weight: normal;
}
.text p {
    font-size: 2.2vw;
    margin-bottom: 1em;
}

/*.content============================*/

.content {
    padding:64px 0;
    position: relative;
    overflow: hidden;
}


.content__title {
    padding-left: 96px;
}

.content__container {
    display: flex;
    align-items: start;
    justify-content: space-around;
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 96px;
    padding-right: 64px;
}

.content__box {
    background-color: #EDE4FF;
    border-radius: 200px 200px 0 0;
    border: 8px solid #DACB2C;
    display: flex;
    flex-direction: column;
    justify-content: baseline;
    align-items: center;
    width: 500px;
    height: 832px;
}

.gaming__box {
    margin-top: 400px;
}


.content__subtitle {
    font-family: "Oleo Script", serif;
    font-size: 112px;
    color: #1E0853;
    text-align: left;
    padding: 56px 0 40px 0;
    margin-left: -2.4em;
    font-weight: normal;
}

.content__img {
    width: 100%;
}

.content__img img {
    width: 100%;
    height: 328px;
    object-fit: cover;
}

.content__text {
    padding: 24px 40px;
    padding-bottom: 16px;
    font-size: calc(20/16*1rem);
}

.channel__move {
    padding: 10px 32px;
    background-color: #D72424;
    border: #A89CC8 4px solid;
    border-radius: 50px;
    color: #fefefe ;
    margin-right: -294px;
    transition: ease 0.4s;
}

.channel__move:hover {
    background-color: #1E0853;
}

/*about==============================*/

.about {
    position: relative;
    overflow: hidden;
}

.about__title {
    text-align: right;
    padding-right: 96px;
}

.about__container {
    display: flex;
    justify-content: space-around;
    max-width: 1550px;
    margin: 0 auto;
    margin-bottom: 160px;
}

.about__img {
    width: 44%;
    text-align: center;
}
.about__img img {
    border-radius: 40% 40% 0 0;
    width: 90%;
}

.about__box {
    width: 48%;
    padding: 40px 0;
}

.about__box__title {
    font-size: clamp(16px,5vw,88px);
    margin-bottom: 0.8em;
    text-align: center;
}

.about__box__text {
    width: 80%;
    font-size: clamp(16px , 2vw , 32px);
    margin: 0 auto;
    margin-bottom: 1em;
}

.about__box__sns {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 80px;
    width: 70%;
    margin: 0 auto;
    border-bottom: #A89CC8 1px solid;
    padding-bottom: 16px;
}

.about__box__sns a img {
    width: 104px;
    height: 104x;
    object-fit: contain;
    transition: ease 0.4s;
}

.about__box__sns a img:first-child {
    transform: scale(0.8);
}

.about__box__sns a img:hover {
    opacity: 0.7;
}

/*videos================================*/

.videos {
    background-color: #C5CBE3;
    padding: 40px 0;
}

.videos__title {
    padding-left: 96px;
}

.swiper {
    width: 80%;
    padding: 56px 0;
  }


  .swiper-slide:hover {
    opacity: 0.8;
  }

  .swiper-button-next, 
  .swiper-button-prev {
      width: 50px;
      height: 50px;
      background: none; /* 背景を削除 */
      border: none; /* 枠線を削除 */
  }
  
  /* 右ボタン（三角形） */
  .swiper-button-next {
      position: absolute;
      right: 10px;
      top:58%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-left: 25px solid #1E0853; /* 黒色の三角形 */
  }
  
  /* 左ボタン（三角形） */
  .swiper-button-prev {
      position: absolute;
      left: 10px;
      top: 58%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-right: 25px solid #1E0853; /* 黒色の三角形 */
  }
  
  /* ボタンのホバー時の色変更 */
  .swiper-button-next:hover {
      border-left-color: gray;
  }
  .swiper-button-prev:hover {
      border-right-color: gray;
  }

  /* Swiperのデフォルト矢印を消す */
.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}

.video__channnel {
    display: block;
    text-align: right;
    padding-right: 64px;
    padding-top: 24px;
}
.video__channnel a {
    margin: 0;
}

/*profile========================*/

.profile {
    padding: 40px 0 96px 0;
}

.profile__title {
    text-align: right;
    padding-right: 96px;
}

.table__container {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 32px 0;
}

.left__table,
.right__table {
    width: 40%;
    font-size: clamp(16px,1.6vw,24px);
}

th,
td {
    padding: 16px ;
    border-bottom: #A89CC8 1px solid;
    position: relative;
    font-weight: normal;
}

.right__table th,
.right__table td {
    vertical-align: top;
}

.right__table th {
    width: 24%;
}

th {
    width: 50%;
}

td {
    width: 50%;
    padding-left: 1em;
}

td br {
    display: block;
    margin-bottom: 1em;
    content: "";
}

.left__table td {
    text-align: center;
}

tr:first-child th,
tr:first-child td {
    border-top: 1px solid #A89CC8;
}

th::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -16px; /* はみ出し部分（調整可能） */
    height: 32px; /* 縦線の長さ（50%で中央より下から開始） */
    width: 1px; /* 線の太さ */
    background-color: #A89CC8; /* 線の色 */
  }

  tr:first-child th::before {
    content: "";
    position: absolute;
    right: 0;
    top: -16px; /* はみ出し部分（調整可能） */
    height: 32px; /* 縦線の長さ（50%で中央より下から開始） */
    width: 1px; /* 線の太さ */
    background-color: #A89CC8; /* 線の色 */
  }

  /*footer========================================*/

  .footer {
    text-align: center;
    padding: 24px;
    background-color: #333;
  }

  .footer small {
    color: #fefefe;
  }

  /*1239px以下設定=========================================*/
  @media (max-width: 1239px) {

    /*content===================*/
    .content {
        padding:56px 0;
    }
    
    .content__title {
        padding-left: 64px;
    }
    
    .content__container {
        max-width: 896px;
        padding-left: 56px;
        padding-right: 32px;
    }
    
    .content__box {
        border-radius: 200px 200px 0 0;
        width: 328px;
        height: 560px;
    }
    
    .gaming__box {
        margin-top: 320px;
    }
    
    .content__subtitle {
        font-size: 64px;
        color: #1E0853;
        padding: 40px 0 32px 0;
        margin-left: -2.4em;
    }
    
    .content__img img {
        height: 160px;
    }
    
    .content__text {
        padding: 16px 24px;
        padding-bottom: 16px;
        font-size: calc(16/16*1rem);
    }
    
    .channel__move {
        padding: 8px 16px;
        margin-right: -192px;
        font-size: calc(14/16*1rem);
    }

    /*about==============================--*/
    .about__title {
        padding-right: 64px;
    }
    
    .about__container {
        margin-bottom: 104px;
    }
    
    .about__box {
        padding: 24px 0;
    }
    
    .about__box__title {
        font-size: clamp(16px,4.6vw,88px);
    }
    
    .about__box__sns {
        padding-top: 40px;
        width: 70%;
        margin: 0 auto;
    }
    
    .about__box__sns img {
        width: 80px;
        height: 80px;
    }

    /*videos=========================-*/
    .videos__title {
        padding-left: 64px;
    }

    /*profile=======================*/
    .profile {
        padding: 32px 0 64px 0;
    }

    .profile__title {
        padding-right: 64px;
    }
  }

    /*767px以下設定=========================================*/
    @media (max-width: 767px) {
        /*content===========*/
        .content {
            padding:48px 0;
        }
        
        .content__title {
            padding-left: 48px;
        }
        
        .content__container {
            max-width: 446px;
            padding-left: 8px;
            padding-right: 8px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .content__box {
            width: 90%;
            height: 538px;
        }
        
        .gaming__box {
            margin-top: 24px;
            margin-bottom: 48px;
        }
        
        .content__subtitle {
            font-size: 64px;
            color: #1E0853;
            padding: 40px 0 32px 0;
            margin-left: -2.4em;
        }
        
        .content__text {
            padding: 16px 24px;
            padding-bottom: 16px;
            font-size: calc(16/16*1rem);
        }
        
        .channel__move {
            padding: 8px 16px;
            margin-right: -192px;
            font-size: calc(14/16*1rem);
        }

        /*about==============================*/

        .about__title {
            padding-right: 48px;
        }

        .about__container {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-bottom: 64px;
            margin-top: 24px;
        }

        .about__img {
            width: 56%;
        }

        .about__box {
            width: 90%;
            padding: 16px 0;
        }

        .about__box__title {
            font-size: clamp(14px,6.8vw,88px);
            margin-bottom: 16px;
        }

        .about__box__text {
            width: 64%;
            max-width: 400px;
            font-size: clamp(14px , 2vw , 32px);
            margin-bottom: 0.8em;
        }

        .about__box__sns {
            gap: 24px;
            padding-top: 16px;
            width: 60%;
        }

        .about__box__sns img {
            width: 72px;
            height: 72px;
        }

        /*videos==============*/
        .videos {
            padding: 24px 0 32px 0;
        }
        
        .videos__title {
            padding-left: 64px;
        }

        .swiper {
            padding: 32px 0 24px 0;
          }
          .video__channnel {
            padding-right: 24px;
            padding-top: 8px;
        }

        .swiper-button-next, 
        .swiper-button-prev {
            top: 66%;
        }

        /*profile==============*/
        .profile {
            padding: 40px 0 16px 0;
        }
        
        .profile__title {
            padding-right: 64px;
        }
        
        .table__container {
            flex-direction: column;
            align-items: center;
            gap: 56px;
            padding: 48px 0;
        }
        
        .left__table,
        .right__table {
            width: 90%;
            font-size: clamp(14px,1.6vw,24px);
        }
        
        th,
        td {
            padding: 12px ;
        }
        
        th::after {
            bottom: -10px; /* はみ出し部分（調整可能） */
            height: 20px; /* 縦線の長さ（50%で中央より下から開始） */
          }
        
          tr:first-child th::before {
            top: -10px; /* はみ出し部分（調整可能） */
            height: 20px; /* 縦線の長さ（50%で中央より下から開始） */
          }

    }

    /*459px以下設定=========================================*/
    @media (max-width: 459px) {

        .sec__title {
            font-size: 12vw;
        }

    /*hero====================*/
        .text h2 {
            font-size: 8.2vw;
            margin-bottom: 24px;
        }
        .text p {
            font-size: calc(14/16*1rem);
        }
        .text p span {
            display: inline-block;
        }

        /*content===========*/
        .content {
            padding:32px 0 56px 0;
        }
        
        .content__title {
            padding-left: 24px;
        }
        
        .content__container {
            max-width: 304px;
        }
        
        .content__box {
            width: 98%;
            height: 472px;
        }
        
        .gaming__box {
            margin-top: 24px;
            margin-bottom: 48px;
        }
        
        .content__subtitle {
            font-size: 48px;
            padding: 24px 0 16px 0;
            margin-left: -2.4em;
        }
        
        .content__text {
            padding: 12px 24px 12px 16px;
            padding-bottom: 16px;
            font-size: calc(14/16*1rem);
        }
        
        .channel__move {
            padding: 8px 12px;
            margin-right: -160px;
            font-size: calc(14/16*1rem);
        }

        /*about==============================*/

        .about__title {
            padding-right: 24px;
        }

        .about__container {
            margin-bottom: 48px;
        }

        .about__img {
            width: 64%;
        }

        .about__box__title {
            font-size: clamp(14px,8vw,88px);
            margin-bottom: 16px;
        }

        .about__box__text {
            width: 80%;
            max-width: 400px;
            font-size: calc(14/16*1rem);
        }

        .about__box__sns {
            gap: 16px;
            padding-top: 16px;
            width: 60%;
        }

        .about__box__sns img {
            width: 48px;
            height: 48px;
        }

        /*videos==============*/
        .videos {
            padding: 24px 0 32px 0;
        }
                
        .videos__title {
            padding-left: 24px;
        }

        /*profile==============*/
        .profile {
            padding: 32px 0 16px 0;
        }
                
        .profile__title {
            padding-right: 24px;
        }
    }

/*背景オブジェクトまとめ============================================*/

@keyframes floatBg {
    0% { background-position: center 0px; }
    50% { background-position: center 10px; }
    100% { background-position: center 0px; }
  }

    .content__game__object {
        position: absolute;
        top: 6%;
        left: 54%;
        width: 40vw;
        height: 40vw;
        background: url('../images/geme.png') no-repeat center/contain;
        transform: rotate(-20deg);
        z-index: 1;
        animation: floatBg 3s ease-in-out infinite;
    }
    .content__mike__object {
        position: absolute;
        top: 53%;
        left: 56%;
        width: 36vw;
        height: 36vw;
        background: url('../images/mike.png') no-repeat center/contain;
        transform: rotate(30deg);
        z-index: 1;
        animation: floatBg 3s ease-in-out infinite;
    }

    @media (min-width: 599px) {
        .content__game__object {
            position: absolute;
            top: 6%;
            left: 54%;
            width: 40vw;
            height: 40vw;
            background: url('../images/geme.png') no-repeat center/contain;
            transform: rotate(-20deg);
            z-index: 1;
        }
        .content__mike__object {
            position: absolute;
            top: 53%;
            left: 68%;
            width: 18vw;
            height: 36vw;
            background: url('../images/mike.png') no-repeat center/contain;
            transform: rotate(30deg);
            z-index: 1;
        }
        .content__star__object {
            position: absolute;
            top: 46%;
            left: 3%;
            width: 32vw;
            height: 32vw;
            background: url('../images/star.png') no-repeat center/contain;
            transform: rotate(-10deg);
            z-index: 1;
            animation: floatBg 4s ease-in-out infinite;
        }

        .about__game__object {
            position: absolute;
            top: 3%;
            left: 64%;
            width: 38vw;
            height: 38vw;
            background: url('../images/geme.png') no-repeat center/contain;
            transform: rotate(20deg);
            z-index: 1;
            animation: floatBg 3s ease-in-out infinite;
        }
        .about__mike__object {
            position: absolute;
            top: 52%;
            left: 76%;
            width: 18vw;
            height: 36vw;
            background: url('../images/mike.png') no-repeat center/contain;
            transform: rotate(30deg);
            z-index: 1;
            animation: floatBg 3s ease-in-out infinite;
        }
        .about__star__object {
            position: absolute;
            top: 46%;
            left: 3%;
            width: 24vw;
            height: 24vw;
            background: url('../images/star.png') no-repeat center/contain;
            transform: rotate(-10deg);
            z-index: 1;
            animation: floatBg 3s ease-in-out infinite;
        }

    }

    @media (min-width: 768px) {
        .content__game__object {
            position: absolute;
            top: 70%;
            left: 54%;
            width: 36vw;
            height: 36vw;
            background: url('../images/geme.png') no-repeat center/contain;
            transform: rotate(-20deg);
            z-index: 1;
        }
        .content__mike__object {
            position: absolute;
            top: 8%;
            left: 24%;
            width: 24vw;
            height: 42vw;
            background: url('../images/mike.png') no-repeat center/contain;
            transform: rotate(30deg);
            z-index: 1;
        }
        .content__star__object {
            position: absolute;
            top: 32%;
            left: 3%;
            width: 20vw;
            height: 20vw;
            background: url('../images/star.png') no-repeat center/contain;
            transform: rotate(-10deg);
            z-index: 1;
        }

        .about__game__object {
            display: none;
        }
        .about__mike__object {
            display: none;
        }
        .about__star__object {
            display: none;
        }
    }

    @media (min-width: 1550px) {
        .content__game__object {
            position: absolute;
            top: 64%;
            left: 54%;
            width: 38vw;
            height: 38vw;
            background: url('../images/geme.png') no-repeat center/contain;
            transform: rotate(-20deg);
            z-index: -1;
        }
        .content__mike__object {
            position: absolute;
            top: 12%;
            left: 18%;
            width: 18vw;
            height: 36vw;
            background: url('../images/mike.png') no-repeat center/contain;
            transform: rotate(30deg);
            z-index: 1;
        }
        .content__star__object {
            position: absolute;
            top: 60%;
            left: 2%;
            width: 20vw;
            height: 20vw;
            background: url('../images/star.png') no-repeat center/contain;
            transform: rotate(-10deg);
            z-index: 1;
        }
        .content__star__objects {
            position: absolute;
            top: 38%;
            left: 82%;
            width: 16vw;
            height: 16vw;
            background: url('../images/star.png') no-repeat center/contain;
            transform: rotate(10deg);
            z-index: 1;
            animation: floatBg 4s ease-in-out infinite;
        }

        .about__game__object {
            display: block;
            position: absolute;
            top: 13%;
            left: 88%;
            width: 14vw;
            height: 14vw;
            background: url('../images/geme.png') no-repeat center/contain;
            transform: rotate(20deg);
            z-index: -1;
        }
        .about__mike__object {
            display: block;
            position: absolute;
            top: 52%;
            left: 76%;
            width: 28vw;
            height: 46vw;
            background: url('../images/mike.png') no-repeat center/contain;
            transform: rotate(30deg);
            z-index: -1;
        }
        .about__star__object {
            display: block;
            position: absolute;
            top: 46%;
            left: -2%;
            width: 16vw;
            height: 16vw;
            background: url('../images/star.png') no-repeat center/contain;
            transform: rotate(-10deg);
            z-index: -1;
        }
    }