@charset "UTF-8";

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

div object {
    float: left;
}

html {
    font-size: 100%;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 25px;
    /* text-align: center; */
}

.table{
    /* text-align: center; */
    /* margin: 5px 30px */
    margin-left: 10px;
    /* margin-top: 50px; */
}

.box{
    margin-top:-30px;
}

.container {
    text-align: center;
    display: flex;
    /* grid-template-columns: 1fr 1fr; */
    /* gap: 40px; */
    justify-content: flex-start;
    /* align-items: flex-start; */
    /* margin: 10px 30px; */
    
}

.item {
    margin: 5px 10px;
    padding: 20px;
}

.data {
    width: 350px;
    height: 1100px;
    overflow: scroll;
}

/* 推薦科目の部分 */
a:hover {
    background-position: -100% 0;
    color: red;
}

/* ▼テーブル全体の装飾 */
table.sample {
    border-collapse: collapse;
    /* テーブルの罫線を重ねて1本に見せる */
    border: 2px solid black;
    /* テーブルの外側の枠線(2pxで緑色の実線) */
}

/* ▼セル共通の装飾 */
table.sample th,
table.sample td {
    border: 2px solid black;
    /* テーブルの内側の罫線(1pxで緑色の実線) */
}

/* ▼見出しセルの装飾 */
table.sample th {
    background-color: #ccffcc;
    /* 背景色(淡い緑色) */
    padding: 0.2em;
    /* 内側の余白(0.3文字分) */
}

/* ▼リンクの上にマウスが載った際の装飾(背景色だけ指定) */
a:hover {
    background-color: #fcfcaa;
}