@charset "UTF-8";
/* ヘッダーとページめくりのボタンのみのCSSです。
------------------------------- */

header {
    position: fixed; /* ヘッダーを← fixedで固定する */
    top: 0; /* 上部から固定の基準位置を決める */
    left: 0; /* 左から固定の基準位置を決める */
    height: 70px; /* ヘッダーの高さを指定する */
   
    /* background-color:rgba(30, 43, 232, 0.629);*/
    width: 100%;/*横幅*/
 }  
 
 .top-icon {/*ヘッダーの左上の丸いアイコン*/
    position:absolute;/*丸いアイコンがテキストの上に来るようにこれを入れる*/
       top:0%;
       left:-5%;
    width: 47px;
    height: 47px;
    object-fit: cover;
       border-top-left-radius: 45%;/*角を丸くする*/
       border-top-right-radius: 45%;
       border-bottom-right-radius: 45%;
       border-bottom-left-radius: 45%;
  }

  .logo-mangaobake{/*ヘッダーの左上「まんがおばけのテキスト」*/
    position: relative;/*丸いアイコンの下にテキストが来るようにこれを入れる*/
    width: 100%;/*横幅*/
    height: 2.5rem;
    font-size: 1.5rem;
    margin-top: 10px;
    margin-left: 40px;
    background-image: linear-gradient(88deg, rgba(101, 255, 246, 1) 10%, rgb(67, 50, 252) 80%);
    padding-left: 35px;
    color: #bb0c0c;

   }
     .menu a:hover {/*Menuをさわると色が変わる*/
           color: rgb(248, 8, 188);
     }


/*ここまでが固定ヘッダー部分*/





/*ここから次へ戻るボタン*/

.container {/*進むバックボタンを下部に固定*/
    position: fixed; /* ← fixedで固定する */
    bottom:  0; /* 下部から配置の基準位置を決める */
    left: 0; /* 左から配置の基準位置を決める */
    width: 100%; /* ボックスの横幅を指定する */
    height: 100px; /* ボックスの高さを指定する・矢印ボタンはこれにつられて大きさがかわる */
    padding: bottom 10px;

    /*padding-left:3%;
    justify-content:space-between;/*横並びを両端寄席にした。*/

    display: flex;
    flex-direction: row-reverse;
    background-color:rgba(50, 103, 248, 0.329)

}

.next-botan {
    width: 70%;
    background-size: cover;
}

.menu-botan {
    padding-top: 10%;
    width: 70%;
}
.back-botan {
    width: 70%;
    background-size: cover;
}


/*---------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
デスクトップ版
--------------------------------------------------------------------------------------------------------------- */

@media (min-width: 800px) {

      .top-icon {
        left:0%;
     width: 100px;
     height: 100px;
   }
   .logo-mangaobake{/*ヘッダーの左上「まんがおばけ」*/
     position: relative;/*丸いアイコンの下にテキストが来るようにこれを入れる*/
     width: 100%;/*横幅*/
     height: 2.5rem;
     font-size: 1.5rem;
     margin-top: 20px;
     margin-left: 10%;
     background-image: linear-gradient(88deg, rgba(101, 255, 246, 1) 10%, rgb(67, 50, 252) 80%);
     padding-left: 130px;
     color: #bb0c0c;
 
    }





}/*←メディアアクリの閉じ*/