* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

/* font-sizeは16pxの62.5%の10px */

body {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.4rem;
    /*font-size : 14px*/
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    background-size: cover;
    z-index: -1;
    display: none;
}

h1 {
    font-size: 2.0rem;
    /* font-size: 20px*/
    text-align: center;
    margin-bottom: 20%;
}

/* index.htmlのとき */
.top h1 {
    font-size: 3.5rem;
    text-align: center;
    color: #232A69;
}

.h-wrapper {
    width: 100%;
}

.site-header,
.site-footer {
    width: 100%;
    height: 10vh;
    background-color: #E1F6FF;
}

.site-header {
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    padding-left: 2%;
    padding-right: 2%;
}

.error {
    color: #cc0000;
}

.a-link {
    display: flex;
    align-items: center;
    height: 100%;
}

/* ロゴサイズ */
.logo-header {
    height: 8vh;
    max-height: 100%;
    padding-top: 1vh;
}

.site-footer {
    position: fixed;
    bottom: 0;
    /*ページ最下部に固定 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 下部タブバーのアイコン表示 */
.menu {
    display: flex;
    list-style: none;
    justify-content: space-around;
    width: 100%;
}

.menu li {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu li img {
    max-height: 50%;
}

/* 内容 */
#contents {
    max-width: 1024px;
    width: 90%;
    margin: 15vh auto;
}

.top,
.home,
.book-detail,
.user,
.login,
.n-enter,
.list,
.favorite {
    width: 80vw;
    margin: 0 auto;
    padding-left: 10vw;
    padding-right: 10vw;
}

.list table, .favorite table {
    text-align: center;
}

.book-detail p {
    margin: 8% auto;
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea {
    width: 100%;
}

select {
    width: 25%;
}

.kind {
    width: 50%;
}

.setting {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 5vh auto;
    padding: 2vh auto;
}

.user {
    text-align: center;
}

.top p {
    margin-top: 20vh;
}

button,
.cancel-button {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    outline: none;
}

button[type="submit"],
button[type="button"],
.cancel-button {
    display: inline-block;
    border-radius: 10px;
    /* 角を丸める */
    background-color: #E1F6FF;
    border: 1px solid #232A69;
    color: #232A69;
    text-align: center;
    /* テキストを中央揃えに */
    padding: 10px 20px;
    /* パディングを追加 */
    text-decoration: none;
    /* リンクの下線を消す */
}

.button {
    display: flex;
    justify-content: center;
    gap: 2rem;
    /* ボタン同士の間隔をremで指定 */
    margin: 0 auto;
}

.button form {
    margin: 0;
}

.cancel-button:hover {
    background-color: #d0e9ff;
    /* ホバー時の背景色 */
    border-color: #1a214e;
    /* ホバー時の境界線色 */
}

.link .link-button {
    background: none;
    color: blue;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    display: inline;
}

.link .link-button:hover {
    color: darkblue;
}

/* 中央揃え */
.center,
button.center {
    margin-top: 10%;
    text-align: center;
}

.button {
    display: flex;
    justify-content: center;
}


/* お気に入り表示 */
.favorite-label {
    color: black;
    cursor: pointer;
    position: relative;
    padding-left: 5%;
    /* ハートマークのスペースを確保 */
}

.favorite-label::before {
    content: '\2661';
    /* 白いハートマーク */
    position: absolute;
    left: 0;
    color: black;
}

input[type="checkbox"] {
    display: none;
    /* チェックボックスを隠す */
}

input[type="checkbox"]:checked+.favorite-label::before {
    content: '\2665';
    /* ピンクのハートマーク */
    color: #f5b3d4;
}

.login p {
    margin: 40% auto 10% auto;
    width: 80%;
}

.button p,
.user p {
    margin: 12% auto;
}

.n-enter p {
    margin: 8% auto;
}


/* テーブルレイアウト */
.table { 
    width: 100%; 
    border-collapse: collapse; 
    table-layout: auto; /* 内容に応じて自動的に幅を調整 */ 
    text-align: center;
} 

.table tr th, .table tr td { 
    text-align: center; 
    border-bottom: 1px solid #E1F6FF; 
    border-top: 1px solid #E1F6FF; /* 各tdの上に線を追加 */ 
} 

.table tr:first-child th, .table tr:first-child td { 
    border-top: none; /* 最初の行の上部の線を消す */ 
} 

.table tr:last-child td { 
    border-bottom: none; /* 最後の行の下部の線を消す */ 
}

@media (min-width: 1024px) {
    body::before {
        display: block;
    }
}