@charset "UTF-8";

/* 全体の背景とリセット */
body {
    margin: 0;
    padding: 0;
    background-color: #1a1a1a; /* 暗めの背景 */
    color: #ddd;
}

/* 漫画を表示する枠 */
#manga-container {
    max-width: 800px; /* PCで見やすくなる最大幅 */
    margin: 0 auto;   /* 中央寄せ */
    background-color: #000;
}

/* リンクコンテナのスタイル */
#link-container {
    text-align: center;
    padding: 10px;
}

/* 画像単体のスタイル */
.comic-page {
    display: block;    /* 隙間をなくすためにブロック要素化 */
    width: 100%;       /* 親枠に合わせて横幅いっぱい */
    height: auto;      /* 高さは自動 */
    vertical-align: bottom; /* 画像下の微妙な隙間を消す */
    margin-bottom: 20px; /* 画像間のスペース */
}

/* ベースのボタンスタイル */
.btn-base {
    display: flex;             /* 中身を整列 */
    justify-content: center;   /* 左右中央 */
    align-items: center;       /* 上下中央 */
    width: 100%;               /* スマホで横幅いっぱい */
    max-width: 400px;          /* PCでデカくなりすぎない制限 */
    margin: 10px auto;         /* 上下の隙間＋中央寄せ */
    padding: 18px 0;           /* ボタンの厚み */
    
    font-size: 18px;           /* 文字サイズ */
    font-weight: bold;         /* 太字 */
    text-decoration: none;     /* 下線を消す */
    color: #fff;               /* 文字色：白 */
    
    border-radius: 50px;       /* 角丸（カプセル型） */
    box-shadow: 0 4px 0 rgba(0,0,0,0.2); /* 下に影をつけて立体的に */
    transition: all 0.2s;      /* アニメーション */
    position: relative;
    background-color: #e60012; /* ボタンの背景色 */
}