/* 共通のセクションスタイル */
.diagonal {
    position: relative;
    /*padding: 80px 0;*/
    /*overflow: hidden;*/ /* はみ出した背景を隠す */
}

/* 疑似要素を使った傾いた背景の実装 */
.diagonal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 120vw; /* 画面幅より広く取る */
    height: 100%;
    z-index: -1;
    transform-origin: center center;
}

/* 時計回りに傾いた背景 */
.clockwise-bg::before {
    background-color: rgba(202,213,224,0.7);
    transform: translateX(-10vw) rotate(5deg);
}

/* 反時計回りに傾いた背景 */
.counterclockwise-bg::before {
    background-color: rgba(202,213,224,0.7);
    transform: translateX(-10vw) rotate(-5deg);
}
/* 時計回りに傾いた背景 */
.clockwise-bg-2::before {
    background-color: rgba(0,51,102,1.0);
    transform: translateX(-10vw) rotate(5deg);
}

/* 反時計回りに傾いた背景 */
.counterclockwise-bg-2::before {
    background-color: rgba(0,51,102,1.0);
    transform: translateX(-10vw) rotate(-5deg);
}
/* 時計回りに傾いた背景 */
.clockwise-bg-3::before {
    background-color: rgba(223,228,74,0.7);
    transform: translateX(-10vw) rotate(5deg);
}

/* 反時計回りに傾いた背景 */
.counterclockwise-bg-3::before {
    background-color: rgba(223,228,74,0.7);
    transform: translateX(-10vw) rotate(-5deg);
}
/* コンテンツコンテナ */
.content-container {
    max-width: 3000px;
    width: 100%;
    margin: 0 auto;
    /*padding: 0 20px;*/
    /* コンテンツは水平のまま */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .diagonal::before {
        width: 150vw;
        transform: translateX(-25vw) rotate(5deg);
    }
    
    .counterclockwise-bg::before {
        transform: translateX(-25vw) rotate(-5deg);
    }
    .counterclockwise-bg-2::before {
        transform: translateX(-25vw) rotate(-5deg);
    }

}