img{
    max-width: 100%;
    margin: 0;
}

body{
 width: 100%;
 background: #eef0f5;
 color: #444;
 font-size: min(20px,3vw);
 font-family: '?????','????', Meiryo;
 margin: 0;
}

::selection {
    background: #666;
    color: #fff;
    }

.head{
    font-size: 10px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

H1{
 font-size: 24px;
 color: #444;
 width: 100%;
 max-width: 350px;
 text-align: center;
 border: 0px solid #cccccc;
 border-bottom: 2px solid #C0C0C0;
 margin: auto;
}

hr{
  border-bottom: 2px solid #C0C0C0;
  width: 200px;
}

.sty{
 background: #ffffff;
 width: 100%;
 max-width: 500px;
 text-align: center;
 border: 2px solid #cccccc;
 margin-top: 20px auto;
 margin-bottom: 10px;
 margin-left: auto;
 margin-right: auto;
 padding-top: 30px;
 padding-bottom: 30px;
}

.sty a{
 text-decoration: none;
 color: #444;;
}

.sty a:hover{
 border-radius: 50px;
 color: #fff;
 background:  #333;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
}

.sty2{
 font-size: 18px;
 background: #ffffff;
 width: 90%; /* スマホで端まで行き過ぎないよう少し余白を */
 min-width: 280px; /* これ以上小さくならない幅を指定 */
 max-width: 400px; /* PCでの最大幅 */
 text-align: center;
 border: 2px solid #cccccc;
 margin: 20px auto 10px auto; /* 上下左右のマージン */
 padding: 0; /* コンテナのパディングは削除 */
}

.sty2 a{
 display: block; /* リンクをブロック要素にして箱全体に広げる */
 width: 100%;
 height: 100%;
 padding: 30px 0; /* ここでボタンの高さを出す */
 text-decoration: none;
 color: #444;
}

.sty2 a:hover{
}

P{
 font-size: min(21px,3.5vw);
 text-align: center;
 margin-bottom: 15px;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
}

P a{
 text-decoration: none;
 border-radius: 50px;
 font-size: min(22px,4vw);
 color: #38a1db;
 }

P a:hover{
 background-color: #ddd;
 }

.center {
 text-align: center;
}

.btn_mng img {
 max-width: 100%; 
 /* 160px引くことで、ナビ上部に20px程度の確実な隙間を作る */
 max-height: calc(95vh); 
 cursor: pointer; 
}

.framed-box5{
    margin-bottom: 2vh; /* 画像の下に少し余白を追加 */
}

.kankaku {
 font-size: 50vh;
}

.manga_kankaku {
 font-size: 10vh;
}


.chuou {
 /* position: absolute;  削除 */
 /* top: 45%;            削除 */
 /* left: 50%;           削除 */
 /* transform: translate(-50%, -50%); 削除 */
 position: relative; /* 文脈に合わせて配置 */
 margin: 5vh auto 10vh auto; /* 上下に余白を持たせて中央揃え */
 cursor: pointer; 
}

.chuou span{
 font-size: 18px;
 color: #444;
 width: 100%;
 text-align: center;
}

.btn_top {
 cursor: pointer; 
}

.nav {
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 font-size: min(22pt, 5vw);
 background: #222;
 opacity:0.8;
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
}

.nav a {
    text-decoration: none;
    color: #fff;
    display: inline;
}

.page {
    color: #fff;
    display: inline;
}

.mihiraki {
 display: flex;
 flex-direction: row-reverse;
 justify-content: center;
}

@media screen and (min-aspect-ratio: 5/4) and (max-height: 800px) {
.btn_mng img {
 max-width: 100%; 
 max-height: calc(98vh);
 cursor: pointer; 
}
.nav {
 display: none;
 }
}

@media screen and (min-aspect-ratio: 16/9) and (max-height: 1200px){
.btn_mng img {
 max-width: 100%; 
 max-height: calc(98vh);
 cursor: pointer; 
}
.nav {
 display: none;
 }
}

@media screen and (max-aspect-ratio: 1/1){
.mihiraki {
    display: inline;
 }
}

/* Loading */
#loadingBg {
    width: 100vw;
    height: 100vh;
    transition: all 0s;
    background-color: #555;
    
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 500;
}

#loading {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    padding: 50px 20px;
    margin: -70px 0 0 -220px;
    background: #555;
    color: #ffffff;
    z-index: 999;
}

#loading #percent {
    margin-bottom: 5px;
    text-align: center;
    font-size: 22px;
}

#loading #gauge {
    width: 0px;
    height: 10px;
    background: #ffffff;
}

/*
.spinner {
    width: 200px;
    height: 200px;
    color: #fff;
    border: 40px rgba(200,200,200,0.25) solid;
    border-top: 40px rgba(0,0,0,1) solid;
    border-radius: 50%;
    -webkit-animation: spCircRot .6s infinite linear;
    animation: spCircRot .6s infinite linear;
}

.loaded {
    opacity: 0;
    visibility: hidden;
}

@-webkit-keyframes spCircRot {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(359deg); }
}
@keyframes spCircRot {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}
*/

.copy{
 font-size: min(16px,2.8vw);
 text-align: center;
 
}

/* ---------------------------------------------------
   ページ番号入力のデザイン修正版
--------------------------------------------------- */

/* ナビゲーション内のリンク（ボタン）の間隔をCSSで調整 */
.nav a {
    margin: 0 10px; /* ボタン同士の横間隔を広げる */
}

/* 入力エリア全体 */
.page-container {
    display: inline-flex; /* 横並びにして高さを揃える */
    align-items: center;  /* 上下中央揃え */
    justify-content: center;
    margin: 0 15px;       /* 左右のボタンとの距離 */
    color: #fff;

}

/* 入力欄（ボックス）のデザイン */
#page-input {
    width: 3em;           /* 3桁くらい入る幅 */
    height: 1.4em;        /* 高さ確保 */
    padding: 2px 5px;     /* 内側の余白 */
    margin-right: 5px;    /* 「/」との隙間 */
    
    /* 入力できる感(アフォーダンス)を出すデザイン */
    background-color: rgba(255, 255, 255, 0.15); /* 半透明の白い背景 */
    border: 1px solid rgba(255, 255, 255, 0.4);  /* 薄い枠線 */
    border-radius: 4px;   /* 角を少し丸く */
    
    /* テキストスタイル */
    color: #fff;
    font-size: 0.9em;     /* 少しだけ文字を小さくして収まり良く */
    text-align: center;   /* ★数字を真ん中に表示 */
    font-family: 'Verdana', sans-serif; /* 数字が見やすいフォント */
    outline: none;
    transition: all 0.2s ease; /* アニメーション */
}

/* 入力しようとした時（フォーカス時） */
#page-input:focus {
    background-color: rgba(255, 255, 255, 0.9); /* 背景を白く明るく */
    color: #333;          /* 文字を黒にして読みやすく */
    border-color: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6); /* 光らせる */
}

/* スラッシュと総ページ数 */
#page-total {
    font-size: 0.9em;
    opacity: 0.8;
}

/* ▼ ブラウザ標準の▲▼矢印を消す設定（変更なし） */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}