CSS編集


body {
    margin: 10px;
font-family: 'Meiryo', 'メイリオ', 'MS Gothic', 'Hiragino Kaku Gothic ProN', sans-serif ;

}

h1, h2 {
    margin-bottom: 0.5em;
    margin-left: 0.3em;
}


/* スマホ(幅767px以下) */
@media screen and (max-width: 767px) {
h1 {
    font-size: 6vw;
    white-space: nowrap;
    margin-left: 0.3em;
}

.kotei{
          position: sticky;
      top: 118px;/*自分が固定したい位置*/
            width:100%;
            background-color: #fff;
            z-index:2;
    }
thead {
    position: sticky;
    top: 152px; /* 固定位置 */
     z-index:1;
    border: 1px solid #333;
    background: #c1e68a;
}


    table {
        width: 100%;
        table-layout: fixed;
    }
    th, td {
        word-break: break-all;
        white-space: normal;
    }
}



/* PC/タブレット(幅768px以上) */
@media screen and (min-width: 768px) {
    table {
        width: 600px;
        table-layout: auto;
    }

.kotei{
          position: sticky;
      top: 149px;/*自分が固定したい位置*/
            width:100%;
            background-color: #fff;

    }

thead {
    position: sticky;
    top: 183px; /* 固定位置 */
    z-index: 1; /* 他の要素より前面 */
    border: 1px solid #333;
    background: #c1e68a;
}
}


table {
    border-collapse: separate; /* セルの境界を維持する */
    border-spacing: 0; /* 余白をなくす */
    border: 0.4px solid #333;
    margin-bottom: 1em;
}
th, td {
    border: 0.4px solid #bbb;
    padding: 0.5em;
}
th {
    background: #c1e68a;
    font-weight: normal;
}
.month-row {
    background-color: #f5f5f5;
}
.bold {
    font-weight: bold;
    background-color: #fff !important;
    padding: 0.4em; /* 余白を少し調整 */
    outline: 1px solid #333; /* 既存のアウトライン */
    outline-offset: -1.1px; /* ✨ 内側に1px縮める */
}



.right {
    text-align: right;
}

/* ボタン全体のスタイル */
.nav-buttons {
    margin-bottom: 1em;
    margin-left: 1em;

}

/* 各フォームのスタイル */
.nav-buttons form {
    display: inline-block; /* 横並びにする */
    margin-right: 10px; /* フォーム間の間隔 */

}

/* ボタンのスタイル */
.nav-buttons form input[type="submit"] {
    width: 300px; /* フォームの幅いっぱいにする */
    height: 50px; /* ボタンの高さを大きく */
    font-size: 1em; /* 文字サイズを大きく */
    padding: 5px; /* ボタン内の余白 */
    background-color: #007bff; /* ボタンの背景色（青系） */
    color: white; /* 文字色を白に */
    border: none; /* 枠線なし */
    border-radius: 5px; /* 角を丸める */
    transition: background-color 0.3s; /* ホバー時のアニメーション */
}

/* ホバー時のスタイル */
.nav-buttons form input[type="submit"]:hover {
    background-color: #0056b3; /* ホバー時に少し濃い青に */
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
.nav-buttons {
    margin-bottom: 0.1em;
    margin-left: 1em;

}
.nav-buttons form input[type="submit"] {
    width: 100%; /* フォームの幅いっぱいにする */
}
    .nav-buttons form {
        width: 30%; /* スマホでは幅を広げる */
        margin-bottom: 10px; /* 下のボタンとの間隔 */
        margin-right: 8px; /* 下のボタンとの間隔 */
    }

    .nav-buttons form input[type="submit"] {
        font-size: 0.9em; /* スマホ文字 */
        height: 40px; /* 高さを増やす */
    }
}


        .fixed {
            position: fixed;
            top: 0;
            left: 0;
            margin: 0;
            padding: 0;
            width:100%;
            background-color: #fff;
            z-index:10;
            border: 1px #333;
        }

        .under {
            margin-top: 150px;
        }
        @media screen and (max-width: 767px) {
            .under {
                margin-top: 130px;
            }
        }


.nyuuryoku {
    display: flex; /* 横並びにする */
    align-items: center; /* 縦方向の中央揃え */
    gap: 10px; /* 入力欄とボタンの間隔を調整 */
}

#card_no {
    width: 160px; /* 入力欄の幅を広げる */
    height: 25px; /* 入力欄の高さを調整 */
    font-size: 18px; /* 文字サイズを大きく */
    padding: 8px; /* 内側の余白を追加 */
    border-radius: 8px; /* 角を丸く */
    border: 2px solid #ccc; /* 枠線を調整 */
}

.nyuuryoku-button {
    width: 80px; /* ボタンの幅 */
    height: 40px; /* ボタンの高さ */
    font-size: 18px; /* 文字サイズ */
    background-color:rgb(224, 79, 79); /* 青色 */
    color: white; /* 文字色 */
    border: none; /* 枠線なし */
    border-radius: 8px; /* 角を丸く */
    cursor: pointer; /* カーソル変更 */
    transition: background 0.3s;
}

.nyuuryoku-button:hover {
    background-color:rgb(136, 33, 33); /* ホバー時に少し暗く */
}