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

body{
 width: 100%;
 background: #555;
// background: #eef0f5;
 color: #444;
 font-size: 24px;
 font-family: '���C���I', Meiryo;
 margin: 0;
}

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

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

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

.sty{
 font-size: 24px;
 color: #fff;
 width: 100%;
 max-width: 200px;
 padding; 10px;
 text-align: center;
 margin-right: auto;
 margin-left: auto;
}

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

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


.kankaku {
 font-size: 50vh;
}

.manga_kankaku {
 font-size: 10vh;
}


.chuou {
 position: absolute;
 top: 45%;
 left: 50%;
 transform: translate(-50%, -50%);
 cursor: pointer; 
}

.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%;
    
/* ???:?????? */
    background: rgba(30, 30, 30, 0.65); /* ????? */
    backdrop-filter: blur(12px); /* ??????(??) */
    -webkit-backdrop-filter: blur(12px); /* Safari? */
    border: 1px solid rgba(255, 255, 255, 0.1); /* ????????? */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* ????? */
}

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



.page {
    color: #fff;
    display: inline;
}
.mihiraki {
 display: flex;
 flex-direction: row-reverse;
 justify-content: center;
}

.btn_mng img {
 max-width: 100%; 
 max-height: 93vh;
 cursor: pointer; 
}


@media screen and (max-width: 900px) and (orientation: landscape){
.btn_mng img {
 max-width: 100%; 
 max-height: 98vh;
 cursor: pointer; 
}
.nav {
 font-size: 0;
 }
}

@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); }
}
*/

.caution{
    color: #ff0000;
    font-size: min(18px,3vw);
}


/* ---------------------------------------------------
   ???????????????
--------------------------------------------------- */

/* ????????????(???)????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;
}