@charset "utf-8";
/* 
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

.loading {
   width: 50%;
   height: 50%;
   background: white;
   display: grid;
   place-items: center;

}

.loading img {
   animation: anime 2s ease-in-out 1;
}

@keyframes anime{
   
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }

} */
/* 最初は完全に透明で　最後に完全に不透明になる！ */

body {
   font-family: "Kiwi Maru", serif;
   background-repeat: repeat;
   background-size: 10%;
}



/* ★★★ヘッダーの記述 */


header {
   position: absolute;
   z-index: 2;
   width: 100%;

}

/* ロゴのサイズ、位置調整 */

.header-logo {
   text-align: center;
}

.header-logo img{
   width: 240px;
   height: 80px;
   margin: 10px;
}




/* メインへの記述 ナビゲーション*/



.link-item .link-list{
   padding-top: 130px;
   margin-left: 30px;
   margin-right: 120px;
}


.link-item nav ul li img{
   align-items: center;
   width: 70px;
   height: 40px;
   cursor: pointer;
}

.link-item nav ul .character-link img{
   width: 160px;
   height: 40px;

}


.link-item nav ul .story-link img{
   width: 200px;
}

.link-item nav ul .cast-link img{
   height: 40px;
   width: 90px;
}

.link-item nav ul .special-link img{
   width: 110px;
}

.hamburger-menu {
   display: none;
}

/* ここまで */

/* リンクホバーアニメ */


.home-link a:hover{
   background-color: aqua;
}
.story-link a:hover{
   background-color: #36ff8a;
}
.character-link a:hover{
   background-color: yellow;
}
.cast-link a:hover{
   background-color: #ffbf36;
}
.special-link a:hover{
   background-color: #ff51bc;
}


/* リンクバナー位置 */

.link-item {
   margin: 0 100px;
}

.link-item nav ul{
   width: 100%;
   display: flex;
   justify-content: space-between;
}

/* リンク位置固定 */

main .link-item .link-list ul{
   position: sticky; 
   top: 30px;
   z-index: 1000;
}



/* ★★★メインの記述 */

main {
   background-image: url(../img/deco/hanikamu.png);
   background-repeat: repeat;
   /* background-size: cover; */
   /* background-repeat: repeat; */
   /* 分かりやすい色分け */
}

.main-items {
   padding-top: 50px;
}

main .first-inp{
   display: flex;
   width: 100vw;
}

.title-start{
   width: 550px;
}

main .title-h1 {
   width: 75%;
   margin-top: 40px;
   margin-left: 130px;
}

.key-visual-space {
   width: 800px;
   height: 900px;
   background-image: url(../img/deco/key_visual_72.png);
   background-size: contain;
   background-repeat: no-repeat;
}

/* 放送開始 */
.start-text{
   position: absolute;
   z-index: 5;
   width: 40%;
   height: 40%;
   background-image: url(../img/deco/start@4x.png);
   background-size: contain;
   background-repeat: no-repeat;
   margin-left: 40px;
   margin-top: 40px;
}

/* 主題歌 */

.movie{
   margin-top: 190px;
   margin-left: 150px;
}

.movie iframe{
   padding-right: 30px;
   display: block;
   width: 300px;
   height: 200px;
}

.song-text {
   width: 75%;
   margin-top: 18px;
}


/* ！！！！　イントロダクションエリア 　！！！！*/

.Introduction-area{
   margin-top: 100px;
   padding-bottom: 50px;
   padding-left: 50px;
   border-top: 10px solid #90bffd;
   border-bottom: 10px solid #90bffd;
   padding-top: 50px;
   width: 100vw;
   height: 750px;
   background-image: url(../img/deco/okumono_simplekira29.png);
   background-size: 100%;
   background-repeat: no-repeat;
}

.intro-box {
   padding-top: 5px;
   /* background-image: url(../img/deco/window.png); */
   background-size: 100vw;
   background-repeat: no-repeat;
   /* width: 1150px; */
}


.Introduction-area .intro-box .intro-intro img{
   width: 28%;
   margin-left: 420px;
   margin-bottom: 20px;

}

.intro-text img{
   margin-top: 10px;
   margin-left: 340px;
   width: 40%;
   height: 25%;
}


/* キャラクターエリア */

.character-area{
   width: 100vw;
   height: 700px;
   background-color: #fff9fc;
   padding: 45px;
   padding-bottom: 45px;
}

.character-area h2 img{
   margin-left: 500px;
   width: 20%;
}

.character-area .chara-list img{
   width: 85%;
   height: 100%;
}

.chara-list {
   display: flex;
   overflow: scroll;
}

.chara-list li{
   flex-shrink: 0;
   width: 1100px;
   margin-left: 200px;
}

.chara-list li:first-child{
   margin-right: 30px;
}


/* special */


.special-area{
   max-width: 100vw;
   margin-left: 380px;
   align-items: center;
}

.special-area h2 img{
   width: 20%;
   margin-left: 190px; 
   margin-bottom: 30px;
}

.special-area img .bg-mini{
   margin-top: 50px;
   width: 60%;
}

.bg-mini-samne{
   width: 600px;
   height: 450px;
   background-image: url(../img/deco/bg-mini.png);
   background-size: contain;
   background-repeat: no-repeat;
   
}

.special-area p{
   font-weight: bold;
   font-size: 2rem;
   margin-left: 15px;
}


/* スタッフエリア */

.staff-area {
   position: relative;
   text-align: center;
   display: flex;
   height: 900px;
   background-image: url(../img/deco/window.png);
      background-size: 70%;
      background-position: center center;
      background-repeat: no-repeat;
}


.staff-area .minna img{
   margin-top: 250px;
   position: absolute;
   z-index: 5;
   width: 28%;
   margin-left: 470px;
}




/* フッターへの記述 */


footer {
   position: relative;
   bottom: 0;
   background: rgb(98,203,249);
   height: 400PX;
   width: 100%;
   /* background-color: #f0effff8; */
}

.footer-deco::before {
   content: "";
   width: 100%;
   height: 520px;
   position: absolute;
   background: url(../img/deco/dot.png) repeat-x;
   bottom: 115px;
}


footer p {
   text-align: center;
}


/* burger */
.burger {
   width: 40px;
   height: 40px;
   background-color: blue;
   margin-right: 0;
}



/* メディア用記述 */

@media (max-width: 900px) {


   /* ハンバーガーメニュー */

   .link-item {
      display: none;
   }

   .hamburger-menu {
      display: block;
      background-image: linear-gradient(2deg, #6fee7c, rgba(91, 229, 192, 0.8) 59%, rgba(4, 202, 255, 0.8));
   }

   .hamburger-menu nav ul{
   text-align: center;
   padding-top: 180px;
   padding-bottom: 500px;
   top: 100%;
   left: 0;
   right: 0;
   }

   /* ハンバーガーメニュー内　サイズ */

   
.hamburger-menu nav ul li img{
   align-items: center;
   width: 105px;
   height: 60px;
   cursor: pointer;
}

.hamburger-menu .h-home-link img{
   margin-right: 5px;
}

.hamburger-list ul .h-character-link img{
   width: 220px;
   height: 60px;

}


.hamburger-menu nav ul .h-story-link img{
   width: 130px;
}

.hamburger-menu nav ul .h-cast-link img{
   height: 60px;
}

.hamburger-menu nav ul .h-special-link img{
   width: 180px;

}

/* ハンバーガーメニュー　サイズ　ここまで */

   .header {
      position: fixed;
      height: 100px;
      top: 0;
      left: 0;
      right: 0;
      background-color: aliceblue;
      background-size: cover;
      z-index: 5;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
   }

   .header-logo img{
   height: 80px;
   width: 190px;
   position: fixed;
   z-index: -1;
   left: 0;
   }

}


/* メイン背景実験 */


/* 共通ブランク */

main .space-br {
   height: 180px;
}