html {
    background-color: #ffffff;
    scrollbar-width: none;
    transition: all 0.3s;
}
section.topics {
    width: 80%;
    margin: 10% auto 10%;
}
.title-ani {
    overflow: hidden;
    color: #393939 !important;
    transition-delay: 0.6s;
    font-size: 3.6rem;
}

.title-ani-s {
    overflow: hidden;
    color: #343434 !important;
    transition-delay: 0.7s;
    font-size: 1.3rem;
}
ul.news-list {
    margin: 3% auto 0;
    width: 90%;
    max-width: 1240px;
    padding: 0px 0px 40px 0px;
}
p.text {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 2rem;
}
.meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 3% 0 2%;
}
time {
    font-size: 0.94rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #595858;
}
.item.jsStanby p.cate {
    background-color: white;
    border: 1px solid black;
    border-radius: 7px;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    letter-spacing: 1px;
    font-weight: 400;
    position: relative;
    z-index: 1;
}
.item.jsStanby::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #e2e2e2; /* デフォルトの横線の色 */
    margin-top: 2rem; /* 必要に応じて調整 */
    transition: background 0.5s ease-in-out;
}
        .item.jsStanby {
            position: relative;
            overflow: hidden; /* 擬似要素のオーバーフローを隠す */
            cursor: pointer; /* ホバー時にカーソルをポインターに変更 */
    padding: 10px 10px 20px 10px;
            margin-bottom: 20px; /* 各アイテム間のスペース */
        }

        /* カテゴリテキストのスタイル */
        .item.jsStanby p.cate::before {
    content: "";
    position: absolute;
    left: 1px; /* ボーダーの幅分だけ左にずらす */
    top: 1px;  /* ボーダーの幅分だけ上にずらす */
    height: calc(100% - 2px); /* ボーダーの幅分だけ高さを縮める */
    width: calc(100% - 2px);  /* ボーダーの幅分だけ幅を縮める */
    background-color: #e0ff80; /* フェードイン時の背景色 */
    opacity: 0; /* 初期状態は透明 */
    transition: opacity 1s ease-in-out; /* フェードインの遷移 */
    z-index: -1; /* テキストの背面に配置 */
    border-radius: 6px; /* ボーダーの内側に合わせて角丸を調整 */
        }

        /* テキストのスタイル */
        .item.jsStanby p.text {
            position: relative;
            z-index: 1; /* テキストを擬似要素の上に表示 */
            transition: color 0.5s ease-in-out; /* 文字色の変化を滑らかに */
            margin: 5px 0; /* マージンを調整 */
        }

        .item.jsStanby p.text a {
            text-decoration: none; /* リンクの下線を削除 */
            color: inherit; /* 親要素の色を継承 */
        }

        /* ::after 擬似要素のスタイル */
        .item.jsStanby::after {
            content: "";
            position: absolute;
            bottom: 0; /* 横線を下部に配置 */
            left: 0;
            width: 100%;
            height: 2px;
    background: #e2e2e2; /
            z-index: 0; /* 擬似要素をテキストの背面に配置 */
            /* 背景色の変化をスムーズに */
            transition: background 3s ease-in-out;
        }


        /* ::before 擬似要素を使用して左から右に色を広げる */
        .item.jsStanby::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0%;
            height: 2px;
            background-color: #a8de00; /* ホバー時の横線の色 */
            z-index: 1; /* 擬似要素を::afterの上に配置 */
            transition: width 2s ease-in-out; /* 幅の変化を滑らかに */
        }

        /* ホバー時の ::before 要素の幅を100%に拡大 */
        .item.jsStanby.hovered::before {
            width: 100%;
        }
.item.jsStanby.hovered::after {
    background: linear-gradient(90deg, #a8de00, #a8de00);
}


        .item.jsStanby.hovered p.cate::before {
            opacity: 1; /* フェードイン */
        }

        /* ホバー時の <p class="text"> の文字色変更 */
        .item.jsStanby.hovered p.text a {
            color: #a8de00; /* ホバー時の文字色 */
        }

@media (max-width: 768px) {
:root {
    --primary-color: #ff5722;
    --secondary-color: #393939;
    --accent-color: #343434;
    --border-color: #595858;
    --font-size-base: 0.98rem;
    --font-size-time: 0.84rem;
    --transition-speed: 0.3s;
}

.item.jsStanby {
    margin-bottom: 0px;
}
.text.sponly {
        display: block;
    }
    section.topics {
        width: 90%;
        margin: 7rem auto 20%;
    }
    .title-ani {
        overflow: hidden;
        color: var(--secondary-color) !important;
        transition-delay: 0.6s;
        font-size: 2rem;
    }
    .title-ani-s {
        overflow: hidden;
        color: var(--accent-color) !important;
        transition-delay: 0.7s;
        font-size: 1rem;
    }
    time {
        font-size: var(--font-size-time);
        font-weight: 600;
        letter-spacing: 1px;
        color: var(--border-color);
    }
    .newsinner {
        font-family: YakuHanJP, Zen Kaku Gothic New, sans-serif;
        line-height: 2rem;
        font-size: var(--font-size-base);
        letter-spacing: 0px;
        -webkit-text-stroke: 0.01vw;
        text-stroke: 0.01vw;
    }
    ul.news-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin: 10% auto 0;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    p.text {
        line-height: 1.8rem;
        font-size: var(--font-size-base);
        letter-spacing: 1px;
        -webkit-text-stroke: 0.01vw;
        text-stroke: 0.01vw;
    }
    .item.jsStanby p.cate {
        position: relative;
        z-index: 1;
        padding: 6px 1rem 8px;
    }
    .cate {
        background-color: white;
        border: 1px solid black;
        border-radius: 7px;
        padding: 0.1rem 0.7rem;
        font-size: 0.8rem;
        letter-spacing: 1px;
        font-weight: 400;
    }
.item.jsStanby p.cate {
    font-size: 0.8rem;
}
    /* リンクスタイルの追加 */
    .news-list a {
        position: relative;
        color: inherit;
        text-decoration: none;
        transition: color var(--transition-speed), background-color var(--transition-speed);
    }

    .news-list a:active {
        color: var(--primary-color);
        background-color: rgba(255, 87, 34, 0.1);
        border-radius: 4px;
    }

    .news-list a:focus {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }

    .news-list a::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 87, 34, 0.3);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.4s ease-out;
        pointer-events: none;
    }

    .news-list a:active::after {
        width: 200px;
        height: 200px;
        opacity: 1;
    }
*, *::before, *::after {
    box-sizing: border-box;
}
.item.jsStanby p.cate,
.item.jsStanby .meta time {
    display: flex;
    align-items: center;
    height: 2.2rem; /* 同じ高さを指定 */
    padding: 0 0.7rem; /* 水平方向のパディングを調整 */
}
.meta {
    margin: 3% 0 4%;
}
}