@charset "UTF-8";
/* 共通部分
------------------------------- */
html {
    font-size: 62.5%;/*---エンドユーザーの指定を使う---*/
    scroll-behavior: smooth;/*HTML全体にスムーススクロールを適用した*/
}

body{
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", sans-serif;
    line-height: 1.7;
    color: #432;
    margin-top: 60px;/*ヘッダーのぶんだけボディを下げます*/
    background-image: url(../images/kabegami-01.png);/*k壁紙・cssからみた画像の場所になるので注意*/
    background-repeat: repeat;
}
a {/*---リンク下線の表示OFF---*/
    text-decoration: none;
}
img {
    max-width: 100%;/*---画像基本100％---*/
}
.yuji-boku-regular {/*グーグルフォント朴雄二*/
        font-family: "Yuji Boku", serif;
        font-weight: 400;
        font-style: normal;
      }


/*---レイアウト---*/
.wrapper {
    max-width: 1120px;/*サイトの最大幅*/
    margin: auto;/*要素をセンター合わせに*/
    padding: 0 1.5rem;/*上下ゼロ、左右を15px相当*/
    overflow:hidden;/*はみ出ているものを無視する*/

}

.align-center {/*この名前で囲んだ部分はセンター配置できるので使おう*/
    text-align: center;
}


/*固定ヘッダーここまで*/


.page-title {/*ページのタイトルの色と大きさ行ぞろえ*/
    /*メンテ用・background-color: aqua; */   
    color: #601e25;
    font-size: 2.5rem;
       border-style: solid;/*下線のスタイルは実線*/
       border-width: 4px 0px 4px 0px;/*下線つけた*/
       border-color: #92b809;   
        margin-top:30px;
        width: fit-content;/*ボーダーラインとテキストの幅をそろえる*/
        font-weight:bold;/*文字を太くした*/
 }     



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




      .introduction-alea{/*①必ず画像は箱に入れてwidth100％*/
        margin-top: 40px;
        text-align: center;     
      }
       .manga-taitle{/*Manga duco,ergo sum*/
             color: #cb0371;
             font-size:2.0rem;
       }
       .ware-taitle{/*我まんがを描く*/
             color: #be0404;
             font-size:1.5rem;
       }
      .introduction{/*呼ばれてないけど、じゃじゃじゃ*/
             margin-top:3rem;
              color: #180000;
              font-size:1.3rem;
       }


.mangaobake-illasto{/*まんがおばけの全身イラスト*/
    margin-top:30px;
    width: 80%;
}

 /*プロフィール・エリア*/
 .profile-alea {
    margin-top: 50px;
    margin-bottom: 0;
        padding-top :20px;
        padding-bottom :20px;
    width: 80%;
    text-align: center;
    background-color: #e7ff92;
    border-top-left-radius: 80px;/*角を丸くする*/
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-bottom-left-radius: 80px;
    font-size:1.5rem;
}
.profile-alea img {/*プロフィールのまんがおばけの顔アイコン*/
    width: 100px;
}
.obake-coment-p {/*プロフィール*/
    padding-top: 0.5rem;
    padding-bottom: 2.0rem;
    font-size: 1.5rem;
}
.profile-neme {/*まんがおばけ*/
    margin-bottom:20px;
    line-height :0.3;
    font-size:1.7rem;
    color :rgb(242, 64, 64);
}


.profile-coment2{
    margin-top: 30px;;
    margin-bottom: 50px;   
      padding: 10px;
    font-size: 1.2rem;

    background-color: #f6b9c5;
    color: #5e1f1f;
    width: 70%;

    border: solid 5px  #fca25d;
    border-top-left-radius: 45%;/*角を丸くする*/
    border-top-right-radius: 45%;
    border-bottom-right-radius: 45%;
    border-bottom-left-radius: 45%;
    text-align:center;
}


.manga-alea2{/*まんがコマの大枠エリアだが、「2」をつけくわえてページガイド用としている*/
    margin-bottom: 150px;
    border: solid 5px #f97575;/*線*/
    background-color: #fd8ff052;
             border-top-left-radius: 20px;/*角を丸くする*/
         border-top-right-radius: 20px;
         border-bottom-right-radius: 20px;
         border-bottom-left-radius: 20px;
    /*padding-top:20px;*/
        width:auto;
        height:auto;
}

.manga-alea img{
    object-fit:contain;/*これがないと画像の比率が崩れる.。ちなみにcoverだとワクに収まらずはみ出す
    /*
    .manga-alea img{
     width: 500px;
   }*/

  }



.who{
    color:#307ae8
  }



/*枠線つき吹き出し*/
.balloon{
    position: relative;
    padding: 2em;
    border: 3px solid #ef8f3a;
    background-color: #ecfbc3;
    margin-top:15px;
    margin-left: 5%;
    margin-right:5%;
    margin-bottom:30px;
      padding: 10px;
       border-top-left-radius: 40px;/*角を丸くする*/
       border-top-right-radius: 40px;
       border-bottom-right-radius: 40px;
       border-bottom-left-radius: 40px;
  }
  .balloon:before,
  .balloon:after{/*△の部分*/
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: auto;
  }
  .balloon:before{/*後ろ側*/
    top: -40px;
    border-style: solid;
    border-color: transparent transparent #ef8f3a transparent;
    border-width: 0 45px 40px 0;
  }
  .balloon:after{/*前側*/
    top: -34px;
    border-style: solid;
    border-color: transparent transparent #ecfbc3;
    border-width: 0 39px 35px 0;
    z-index: 10;
  }/*ここまでが吹き出し*/


.page-footer {/*フッター*/
     background-color: rgb(48, 2, 215);
     color: aliceblue;
     text-align: center;
     margin-top: 40px;
     padding-bottom: 10px;
     font-size:1.5rem;
     opacity: .5;
         position: fixed; /* ← fixedで固定する */
    bottom:  0; /* 下部から配置の基準位置を決める */
    left: 0; /* 左から配置の基準位置を決める */
    width: 100%; 
}





/* ------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
デスクトップ版
--------------------------------------------------------------------------------------------------------------- */
@media (min-width: 800px) {
     /* 見出し */
    body {
        margin-top: 50px; /* ヘッダーの高さ分の余白をいれ、後ろの要素が隠れないようにする */
   }

   
   .manga-taitle{/*Manga duco,ergo sum*/
         font-size:2.5rem;
   }
   .ware-taitle{/*我まんがを描く*/
         font-size:2rem;
   }
  .introduction{/*呼ばれてないけど、じゃじゃじゃ*/
          font-size:1.5rem;
   }


.mangaobake-illasto{/*まんがおばけの全身イラスト*/
margin-top:30px;
width: 300px;
}

/*プロフィール・エリア*/
.profile-alea {
width: 70%;
font-size:1.5rem;
}

.obake-coment-p {/*プロフィール*/
padding-top: 0.5rem;
padding-bottom: 2.0rem;
font-size: 1.5rem;
}
.profile-neme {/*まんがおばけ*/
margin-bottom:20px;
line-height :0.3;
font-size:1.7rem;
color :rgb(242, 64, 64);
}


.profile-coment2{
font-size: 1.7rem;
}



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