@charset "UTF-8";

/* コラム目次リスト全体の調整 */
.column-list {
    list-style: none;     /* デフォルトの点を消す */
    padding: 0;           /* 左側の余白をリセット */
    margin: 20px 0;       /* 前後の文章との間隔 */
}

/* 記事一行ごとの設定 */
.column-list li {
    padding: 12px 0;      /* 上下に12pxずつ余白。これでタップしやすくなります */
    border-bottom: 1px dotted #ccc; /* 項目間に点線を入れて見やすく */
    line-height: 1.6;     /* 行間を広げて視認性アップ */
    color: #666;          /* 日付の色を少し抑える */
}

/* リンクテキストの設定 */
.column-list li a {
    display: inline-block; /* クリックできる範囲をしっかり確保 */
    margin-left: 10px;     /* 日付とタイトルの間のスペース */
    color: #0056b3;        /* リンクらしい青色（お好みで調整してください） */
    text-decoration: none; /* 下線を一旦消す（スッキリします） */
    font-weight: bold;     /* タイトルを少し強調 */
}

/* マウスを乗せたとき、またはタップしたときの反応 */
.column-list li a:hover {
    text-decoration: underline; /* マウスが乗ったときだけ下線を出す */
    color: #ff6600;            /* 色を変えて反応を分かりやすく */
}

/* 最後の項目の線は消す */
.column-list li:last-child {
    border-bottom: none;
}

/* 背景全体の設定 */
.bgroom {
    background-image: url("/images/columntop-bg.jpg") !important; 
    background-repeat: repeat-y !important;
    background-position: center top !important;
    background-size: 100% auto !important;
    /* PCで消えてしまうのを防ぐため、最小の高さを確保 */
    min-height: 100vh;
}

/* テキストを囲む白いエリア */
.toumei {
    background-color: rgba(255, 255, 255, 0.4);
    margin: 0;
    padding: 0 20px 20px 20px;
}

/* 一番上に置く画像の設定 */
.toumei::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9; 
    background-image: url("/images/masterroom.jpg");
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
}

/* 画面幅が1024px以上のPC向け設定 */
@media (min-width: 1024px) {
    .toumei::before {
        width: 60%;
        margin-left: auto;  /* 左右中央に配置 */
        margin-right: auto;
}