.box-design {
    position: relative;
}
.tab-design ul {
    display: flex;
    width: var(--fluid-wd); --min-wd: 100; --max-wd: 160;
    height: var(--fluid-hg); --min-hg: 21; --max-hg: 33;
    margin: var(--fluid-mg1) var(--fluid-mg2) 0 0;
    --min-mg1: 9; --max-mg1: 12; --min-mg2: 14; --max-mg2: 20;
    padding: var(--fluid-pd1); --min-pd1: 2.5; --max-pd1: 4.5;
    gap: var(--fluid-gp1); --min-gp1: 3; --max-gp1: 4.5;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--tab-base);
    border-radius: var(--fluid-br); --min-br: 7; --max-br: 12;
}
.tab-design ul li {
    flex: 1;    /* 幅を均等に割り当て */
    text-align: center;
    align-content: center;
    color: var(--text-gray);
    font-size: var(--fluid-fs); --min-fs: 10; --max-fs: 14;
    font-family: Verdana;
    /* font-family: Helvetica; */
    font-weight: 500;
    border-radius: var(--fluid-br); --min-br: 5; --max-br: 8;
    transition: .2s;
    cursor: pointer;
}
.tab-design ul li:not(.selected):hover {
    color: var(--text);
    background: var(--tab-hover);
}
.tab-design ul li.selected {
    color: var(--text-highlight);
    background: var(--base);
    box-shadow: 0px -1px 3px rgba(0, 0, 0, .1);
}
.tab-content {
    display: none;
}
.tab-content.selected {
    display: grid;
    animation: fadeIn .3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}