/* CSS変数で色管理 #fded20 */
:root {
    --border-color-one: #5bc7ed;
    --border-color-two: #82d420;
}

/* セクション左右ボーダー自動色分け（heroセクション除外） */

/* heroセクション以外に適用 */
.main-content section:not(.hero):nth-child(odd) {
    border-left: 15px solid var(--border-color-one);
    border-right: 15px solid var(--border-color-one);
}

.main-content section:not(.hero):nth-child(even) {
    border-left: 15px solid var(--border-color-two);
    border-right: 15px solid var(--border-color-two);
}

/* ボーダーとコンテンツの間に少し余白を追加（heroセクション除外） */
.main-content section:not(.hero) {
    padding-left: calc(1rem + 15px);
    padding-right: calc(1rem + 15px);
}

/* スマホ表示時も同様に適用 */
@media (max-width: 768px) {
    .main-content section:not(.hero) {
        padding-left: calc(0.2rem + 15px);
        padding-right: calc(0.2rem + 15px);
    }
}