/* --- 2024 Simplify --- */
:root {				/* グローバル変数にするため :root 擬似クラス */
    --my-main-width: 70%;	/* 左半分の <main> 記事の幅 */
    --my-topic-img-width: 40%;	/* main記事内の写真の相対幅 */
}

section#active {margin: 0 auto; padding: 1em; max-width: 1280px;}
main.activity h3 {
    display: flex; align-items: center;
    padding-left: 100px; height: 80px;
    background: center left no-repeat url("img/riku_umi_h2.png");
}
main.activity {
    float: left; width: var(--my-main-width);
    margin: 0 2em 1em 1em;
    background: white; border-radius: 2em;
}
main.activity article {
    padding: 1em; clear: both;
}
footer.wrapper {clear: both; padding: 1ex;}
main.activity + aside {margin-left: 2em;}
main.activity + aside h3 {text-align: center;}
main.activity + aside .sidebarbox {
    margin-left: calc(var(--my-main-width) + 2%); font-size: 0.875rem;
}
.sidebarbox {
    margin: 1ex;    padding: 1em 1em;
    color: #232323;
    background: #fff8e8;
    border-left: solid 10px #ffdd6e;
}
main.activity article p:nth-child(2n+1) img {
    float: right; width: var(--my-topic-img-width); padding-left: 2em;
}
main.activity article p:nth-child(2n) img {
    float: left; width: var(--my-topic-img-width); padding-right: 2em;
}
main.activity article p.continue {clear: none;}
h1, h2, h3, h4 {clear: both;}
main.activity article p {
    clear: both; margin: 4ex 0; text-indent: 1em;
}
main.activity article p img.full {width: 99%;}

aside#sidebar ul {
    list-style: none; padding: 0em 0em;
    margin-left: calc(var(--my-main-width) + 2%); /* + - は要前後スペース */
    border-bottom: 1px solid #777;
}
aside#sidebar ul li {
    padding: 1em 2em;
    border-top: solid  1px #777;
}