@charset "utf-8";
        :root {
    /* color01（梅） */
    --color01: #fff0e8;
    --color01-text: #d97b4f;

    /* color02（竹） */
    --color02: #f0fff4;
    --color02-text: #3f8e5a;

    /* color03（松） */
    --color03: #f0f6ff;
    --color03-text: #2f5ec4;

    /* color04（番外編） */
    --color04: #fff6cc;
    --color04-text: #b88c00;
}

/* 見出し */
article h2 {
    border-right: 3px solid #000;
    border-left: 3px solid #000;
}
article #products01 h2 {
    background-color: var(--color01);
    border-right: 3px solid var(--color01-text);
    border-left: 3px solid var(--color01-text);
}
article #products01 h2 .color {
    color: var(--color01-text);
}

article #products02 h2 {
    background-color: var(--color02);
    border-right: 3px solid var(--color02-text);
    border-left: 3px solid var(--color02-text);
}
article #products02 h2 .color {
    color: var(--color02-text);
}

article #products03 h2 {
    background-color: var(--color03);
    border-right: 3px solid var(--color03-text);
    border-left: 3px solid var(--color03-text);
}
article #products03 h2 .color {
    color: var(--color03-text);
}

article #products04 h2 {
    background-color: var(--color04);
    border-right: 3px solid var(--color04-text);
    border-left: 3px solid var(--color04-text);
}
article #products04 h2 .color {
    color: var(--color04-text);
}

/* アンカーリンク */
article ul.anchor li:nth-child(1) a {
    border: 1px solid var(--color01-text);
}
article ul.anchor li:nth-child(1) a .number {
    color: var(--color01-text);
    border-right: 1px solid var(--color01-text);
}

article ul.anchor li:nth-child(2) a {
    border: 1px solid var(--color02-text);
}
article ul.anchor li:nth-child(2) a .number {
    color: var(--color02-text);
    border-right: 1px solid var(--color02-text);
}

article ul.anchor li:nth-child(3) a {
    border: 1px solid var(--color03-text);
}
article ul.anchor li:nth-child(3) a .number {
    color: var(--color03-text);
    border-right: 1px solid var(--color03-text);
}

article ul.anchor li:nth-child(4) a {
    border: 1px solid var(--color04-text);
}
article ul.anchor li:nth-child(4) a .number {
    color: var(--color04-text);
    border-right: 1px solid var(--color04-text);
}

/* 矢印 */
.arrow {
    position: relative;
    display: inline-block;
    width: 73.8px;
    height: 25.6px;
}

.arrow::before,
.arrow::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 1.5px);
    width: 3px;
    height: 45px;
    border-radius: 9999px;
    background-color: #000;
    transform-origin: 50% calc(100% - 1.5px);
}
.arrow::before {
    transform: rotate(57.5deg);
    box-shadow: 6px 0 0 #000;
}

.arrow::after {
    transform: rotate(-57.5deg);
    box-shadow: -6px 0 0 #000;
}

/* products01 */
#products01 ul li span {
    color: var(--color01-text);
}
/* color変更 */
#products01_after .arrow::before,
#products01_after .arrow::after {
    background-color: var(--color02-text);
}

#products01_after .arrow::before {
    transform: rotate(57.5deg);
    box-shadow: 6px 0 0 var(--color02-text);
}

#products01_after .arrow::after {
    transform: rotate(-57.5deg);
    box-shadow: -6px 0 0 var(--color02-text);
}

/* products02 */
#products02 a {
    color: var(--color01-text);
}
/* 矢印 color変更 */
#products02_after .arrow::before,
#products02_after .arrow::after {
    background-color: var(--color03-text);
}

#products02_after .arrow::before {
    transform: rotate(57.5deg);
    box-shadow: 6px 0 0 var(--color03-text);
}

#products02_after .arrow::after {
    transform: rotate(-57.5deg);
    box-shadow: -6px 0 0 var(--color03-text);
}

/* products03 */
#products03 a {
    color: var(--color02-text);
}

/* color変更 */
#products03_after .arrow::before,
#products03_after .arrow::after {
    background-color: var(--color04-text);
}

#products03_after .arrow::before {
    transform: rotate(57.5deg);
    box-shadow: 6px 0 0 var(--color04-text);
}

#products03_after .arrow::after {
    transform: rotate(-57.5deg);
    box-shadow: -6px 0 0 var(--color04-text);
}

/* products04 */
#products04 a {
    color: var(--color04-text);
}
