@charset "utf-8";

/*--------------------------------------------------------------
  基礎設定
--------------------------------------------------------------*/
:root {
    /* ブルー */
    --blue-gradation: 48 134 158;
    /* グリーン */
    --green-gradation: 125 127 168;

    /* 黄色 */
    --yello-gradation: 255 200 0;
    /* オレンジ */
    --orange-gradation: 255 160 0;

    /* グリーン */
    --lightgreen-gradation: 125 165 135;
    /* 黄緑 */
    --darkgreen-gradation: 107 156 73;


    /* 明るい紫 */
    --lightpurple-gradation: 165 125 155;
    /* 明るい紫 */
    --darkpurple-gradation: 120 72 155;

    /* 明るい茶 */
    --lightbrown-gradation: 148 165 125;
    /* 暗い茶 */
    --darkbrown-gradation: 155 135 72;
}


.gradation-purple {
    padding: 2rem 10%;
    background: linear-gradient(to right, rgb(var(--green-gradation) / 1.0), rgb(var(--blue-gradation) / 1.0));
    color: #fff;
    font-size: 1rem;
}

.gradation-purple>h3 {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
}

.gradation-orange {
    padding: 2rem 10%;
    background: linear-gradient(to right, rgb(var(--yello-gradation) / 1.0), rgb(var(--orange-gradation) / 1.0));
    color: #fff;
    font-size: 1rem;
}

.gradation-orange>h3 {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
}

.gradation-green {
    padding: 2rem 10%;
    background: linear-gradient(to right, rgb(var(--lightgreen-gradation) / 1.0), rgb(var(--darkgreen-gradation) / 1.0));
    color: #fff;
    font-size: 1rem;
}

.gradation-green>h3 {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
}

.gradation-lightpurple {
    padding: 2rem 10%;
    background: linear-gradient(to right, rgb(var(--lightpurple-gradation) / 1.0), rgb(var(--darkpurple-gradation) / 1.0));
    color: #fff;
    font-size: 1rem;
}

.gradation-lightpurple>h3 {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
}

.gradation-lightbrown {
    padding: 2rem 10%;
    background: linear-gradient(to right, rgb(var(--lightbrown-gradation) / 1.0), rgb(var(--darkbrown-gradation) / 1.0));
    color: #fff;
    font-size: 1rem;
}

.gradation-lightbrown>h3 {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
}