html {
    box-sizing: border-box;
    --bgColorMenu: #cd9834;
    /* --bgColorMenu : #4c4ce4; */
    --duration: .7s;
}

#filteredinfo,
#filteredcomprate {
    font-weight: bold;
    color: white;
}

.menu {
    opacity: 0.9;
    z-index: 10;
    margin: 0;
    display: flex;
    /* Works well with 100% width  */
    width: 100%;
    font-size: 1.5em;
    padding: 0 2.85em;
    /* position: relative; */
    position: sticky;
    top: 24px;
    align-items: center;
    justify-content: center;
    background-color: var(--bgColorMenu);
}

.main-panel>.bubblecontent {
    position: relative;
    padding: 0;
}

.dictinfo {
    margin: auto;
    padding: 0 2.85em;
    position: sticky;
    top: 0px;
    z-index: 10;
    background-color: #cd9834;
    opacity: 0.9;
}

#prevpage_btn,
#nextpage_btn {
    visibility: hidden;
    width: 80px;
    height: auto;
    z-index: 6;
    cursor: pointer;
    bottom: 0%;
}

#prevpage_btn {
    left: 10%;
}

#nextpage_btn {
    right: 10%;
}

@keyframes popup {
    0% {
        transform: translateY(40px) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1.0);
    }
    80%,
    100% {
        opacity: 1;
    }
}

.menu__item {
    all: unset;
    flex-grow: 1;
    z-index: 100;
    display: flex;
    cursor: pointer;
    position: relative;
    border-radius: 50%;
    align-items: center;
    will-change: transform;
    justify-content: center;
    padding: 0.55em 0 0.85em;
    transition: transform var(--timeOut, var(--duration));
}

.menu__item::before {
    content: "";
    z-index: -1;
    width: 4.2em;
    height: 4.2em;
    border-radius: 50%;
    position: absolute;
    transform: scale(0);
    transition: background-color var(--duration), transform var(--duration);
}

.menu__item.active {
    /* transform: translate3d(0, -.8em, 0); */
    /*選択時のふわっと浮き上がる部分*/
    outline: none;
    /*ボタン選択時の枠線を消す*/
}

.menu__item.active::before {
    transform: scale(1);
    background-color: var(--bgColorItem);
}

.icon {
    width: 2.6em;
    height: 2.6em;
    stroke: white;
    fill: transparent;
    stroke-width: 1pt;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;
}

.menu__item.active .icon {
    animation: strok 1.5s reverse;
}

@keyframes strok {
    100% {
        stroke-dashoffset: 400;
    }
}

.menu__border {
    visibility: hidden;
    left: 0;
    bottom: 99%;
    width: 10.9em;
    height: 2.4em;
    position: absolute;
    clip-path: url(#menu);
    /*四角形をdictmenu.phpのsvgパスでトリムして山形にしてる。*/
    will-change: transform;
    background-color: var(--bgColorMenu);
    transition: transform var(--timeOut, var(--duration));
}

.svg-container {
    width: 0;
    height: 0;
}

@media screen and (max-width: 50em) {
    .menu {
        font-size: .8em;
    }
}

#pagenum {
    font-weight: bold;
    color: white;
}

.pagepnbuttons {
    position: sticky;
    bottom: 20px;
    /* top: calc((var(--vh, 1dvh) *100-57) * 0.1); */
    /* bottom: 20%; */
    right: 40%;
    height: 80px;
    text-align: center;
    box-sizing: border-box;
    font-size: 26px;
    z-index: 10;
    pointer-events: none;
    /*popupmenuとの被り防止*/
}

#prevpage_btn,
#nextpage_btn {
    z-index: 10;
    pointer-events: auto;
}

/* 図鑑の本体。以前は overflow-y: hidden で、中身が画面より長いとスクロールできなかった
   （スマホの写真一覧や、コレクションの下のほうが見えなかった）。2026-09-23 に auto にした */
.main-panel {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0px;
    height: calc(100dvh - 57px);
}
.main-panel>.content{
    min-height: calc(100dvh - 57px);
}

.playframe{
    padding: 30%;
}

/* 上の 帯は 1行（2026-10-05。スマホで 2行に 折れていた）: 左に「写真 169種・383枚 0%」（はみ出す ときは …）、右に ページ */
.dictinfo { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 4px 14px; }
.dictinfo #filteredinfo { flex: 1 1 auto; width: auto; max-width: none; min-width: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dictinfo #pagenum { flex: none; width: auto; max-width: none; white-space: nowrap; }
/* ページ送り（生物管理と 同じ 形。一覧の すぐ 下・まんなか。下の まるい メニューに かからないよう 下に 余白） */
.dict-pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 14px 0 96px; position: relative; z-index: 5; }
.dict-pager[hidden] { display: none; }
.dict-pager #prevpage_btn, .dict-pager #nextpage_btn { visibility: visible; width: auto; height: auto; position: static; } /* 以前の 画像の 矢印の 指定（見えない・幅 80px）を 消す */
.dict-page { min-width: 96px; padding: 10px 18px; border: 0; border-radius: 999px; background: #fff; color: #1a6fb0; font-weight: 800; font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.2); cursor: pointer; }
.dict-pager-num { color: #fff; font-weight: 800; font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }