body.data{
    background:#f6f8f8;
    font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;
    color:#1f2d2a;
}

/* レイアウト */
.page-layout{
    display:flex;
    max-width:1300px;
    margin:40px auto;
    gap:30px;
    padding:0 20px;
}

/* 左メニュー */
.species-menu{
    width:260px;
    flex-shrink:0;

    position:sticky;
    top:80px;

    background:#fff;
    border-radius:18px;
    padding:18px;

    box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.menu-title{
    font-size:12px;
    letter-spacing:0.2em;
    margin-bottom:10px;
    color:#6b7a75;
}

.species-menu input{
    width:100%;
    padding:8px;
    margin-bottom:10px;
    border:1px solid #ddd;
    border-radius:8px;
}

summary{
    cursor:pointer;
    padding:8px 0;
    font-weight:600;
}

.species-menu a{
    display:block;
    padding:6px 10px;
    text-decoration:none;
    color:#1f2d2a;
    border-radius:6px;
}

.species-menu a:hover{
    background:#eef6f4;
}

.current{
    color:#2f7d6a;
    font-weight:700;
}

/* 本文 */
.species-content{
    flex:1;
    max-width:850px;
}

/* ヘッダー */
.species-header{
    text-align:center;
    margin:20px 0 30px;
}

.latin{
    font-size:1.1rem;
    color:#6b7a75;
}

/* ブロック */
.article-block{
    margin-bottom:60px;
}

/* メイン写真 */
.article-block img{
    width:100%;
    height:auto;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.article-block p{
    margin-top:10px;
    line-height:1.8;
}

/* 写真保管庫 */
.archive{
    margin-top:80px;
}

.archive-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.archive-grid img{
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    transition:0.2s;
}

.archive-grid img:hover{
    transform:scale(1.03);
}

/* スマホ */
@media(max-width:900px){

    .page-layout{
        flex-direction:column;
        gap:15px;
    }

    .species-menu{
        width:100%;
        position:static;
        margin-bottom:10px;
        padding:12px;
    }

    .archive-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .article-block img{
        max-height:280px;
    }
}

.all-species-title{
    cursor:pointer;
    font-weight:700;
}

/* PC */
@media (min-width:901px){

    .all-species{
        display:block;
    }

    .all-species > summary{
        display:none;
    }

}

/* スマホ */
@media (max-width:900px){

    .all-species > summary{

    list-style:none;

    background:#2f7d6a;
    color:white;

    padding:14px 16px;

    border-radius:14px;

    font-weight:700;
    text-align:center;

    cursor:pointer;

    box-shadow:0 6px 20px rgba(47,125,106,0.25);

    transition:.2s;
}

.all-species > summary:hover{
    transform:translateY(-1px);
}
}

#todaiou,
#nazoken{
    scroll-margin-top: 85px;
}