@charset "utf-8";

/**
 * orenokai/local2026.css
 * 「オレの買い」専用：2026年モダン・ダークデザイン
 * サイドバーの横並びをCSSで確実に制御する版
 */

:root {
    --kai-accent: #ff3366;      /* オレの買い ローズピンク */
    --kai-accent-hover: #ff5c8a;
    --main-bg: #121212;
    --sub-bg: #1e1e1e;
    --main-text: #e0e0e0;
    --border-color: #333333;
}

body {
    background-color: var(--main-bg) !important;
}

/* 全体のリンク色をピンクへ */
a {
    color: var(--kai-accent) !important;
    text-decoration: none !important;
}

/* 記事エリア */
article {
    background-color: var(--sub-bg) !important;
    padding: 50px;
    border-radius: 20px;
    margin-bottom: 50px;
    border: 1px solid var(--border-color);
}

article h1 {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    color: #ffffff;
}

.honbun {
    font-size: 1.4rem !important;
    line-height: 2.1;
}

.honbun h3 {
    border-left: 10px solid var(--kai-accent);
    border-bottom: 1px solid var(--kai-accent);
    padding: 12px 0 12px 20px;
    font-size: 1.8rem;
    font-weight: bold;
    color: #ffffff;
    margin: 6rem 0 3rem 0;
    background: linear-gradient(to right, rgba(255, 51, 102, 0.1), transparent);
}
.honbun img {
    max-width: 100% !important;
    height: auto !important;
}
/* サイドバー「Recent entries」の横並び制御 */
.side_col h3 {
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--kai-accent) !important;

    padding-bottom: 10px;
    margin-top: 50px;
}

#side_recent > a {
    display: flex !important;
    align-items: center !important;
    background-color: var(--sub-bg);
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

#side_recent .image_waku {
    width: 100px !important;
    height: 75px !important;
    flex-shrink: 0;
    overflow: hidden;
}

#side_recent .image_waku img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#side_recent p {
    padding: 10px 15px;
    margin: 0;
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--kai-accent) !important;
    line-height: 1.4;
}

#side_recent > a:hover {
    background-color: #252525;
}

#side_recent > a:hover p {
    color: var(--kai-accent-hover) !important;
}

.side-recent-card img,
#side_recent .image_waku img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* これで画像が枠いっぱいに広がり中央で切り取られます */
}


/* 引用 */
blockquote {
    position: relative;
    padding: 30px 20px 20px 60px;
    background: #252525 !important;
    border-radius: 10px;
    font-style: italic;
    color: #bbb;
    margin: 40px 0;
}
blockquote::before {
    content: "\f10d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 25px; left: 20px;
    font-size: 28px;
    color: var(--kai-accent);
    opacity: 0.5;
}

@media (max-width: 767.98px) {
    article { padding: 25px 15px; border-radius: 0; }
    .honbun { font-size: 1.2rem !important; }
}