/* 記事目次・カテゴリ共通の瓢箪。写真画像を使わず文字と曲線で表示します。 */
.toc-gourd, .category-gourd {
    font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "MS PMincho", serif;
    font-weight: 400;
}
/* 単一のベジェ曲線で上下のふくらみとくびれを滑らかにつなぎます。 */
.toc-gourd::before, .category-gourd::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #efa4b4;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20150%22%3E%3Cpath%20d%3D%22M50%200%20C27%200%2010%2018%2010%2040%20C10%2056%2018%2063%2018%2075%20C18%2087%207%2094%207%20111%20C7%20133%2026%20150%2050%20150%20C74%20150%2093%20133%2093%20111%20C93%2094%2082%2087%2082%2075%20C82%2063%2090%2056%2090%2040%20C90%2018%2073%200%2050%200%20Z%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20150%22%3E%3Cpath%20d%3D%22M50%200%20C27%200%2010%2018%2010%2040%20C10%2056%2018%2063%2018%2075%20C18%2087%207%2094%207%20111%20C7%20133%2026%20150%2050%20150%20C74%20150%2093%20133%2093%20111%20C93%2094%2082%2087%2082%2075%20C82%2063%2090%2056%2090%2040%20C90%2018%2073%200%2050%200%20Z%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

#cate_main_img .category-gourd {
    position: absolute;
    z-index: 100;
    right: 6%;
    top: 17%;
    width: 100px;
    height: 150px;
    color: #fff;
    text-align: center;
}
.category-gourd__brand, .category-gourd__name {
    position: absolute;
    left: 12%;
    width: 76%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.category-gourd__brand { top: 13px; height: 45px; font-size: 16px; }
.category-gourd__brand > span { white-space: nowrap; }
.category-gourd__name { bottom: 13px; height: 60px; font-size: 16px; }
.category-gourd--medium .category-gourd__name { font-size: 13px; }
.category-gourd--long .category-gourd__name { font-size: 10.5px; }
@media screen and (max-width: 640px) {
    #cate_main_img .category-gourd { right: 1rem; top: 29%; width: 90px; height: 135px; }
    .category-gourd__brand { top: 12px; height: 40px; font-size: 14px; }
    .category-gourd__name { bottom: 11px; height: 54px; font-size: 14px; }
    .category-gourd--medium .category-gourd__name { font-size: 12px; }
    .category-gourd--long .category-gourd__name { font-size: 10px; }
}