@charset "utf-8";
        .recipe-num-wrapper {
            font-weight: 700;
            font-size: 1.4rem;
            display: inline;
            margin-bottom: 30px;
            width: 100%;
            border-bottom: 1px solid #000;
        }

        .recipe-list-recipe-num {
            font-size: 2rem;
            padding-right: 3px;
        }

        .recipe-frame .list-title {
            margin-bottom: 15px;
        }
        .recipe-frame .list-title .item-name-roman {
                display: block;
                font-family: "bebas kai";
                font-size: 18px;
                font-weight: normal;
                margin-bottom: 5px;
                color: #999;
            }
    
        .recipe-frame .list-title .item-name {
            display: block;
            font-size: 2.8rem;
            font-weight: 700;
            color: #000;
            font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif;
            line-height: 1.5;
        }

        .recipe-frame .list-title .sub {
            font-weight: 700;
            font-size: 2.4rem;
        }

        .active-tag-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            margin-bottom: 20px;
        }
        .active-tag-list li {
            display: block;
            padding: 5px 15px;
            border: 1px solid #c0b59e;
            border-radius: 9999px;
            background-color: #c0b59e;
            color: white;
            font-size: 1.6rem;
            font-weight: 500;
            text-align: center;
            white-space: nowrap;
            cursor: pointer;
            overflow: hidden;
            white-space: nowrap;
            min-width: 75px;
        }

        .recipe-frame {
            text-align: center;
            margin-bottom: 30px;
            width: 87%;
            margin-inline: auto;
        }

        .category-image-wrapper {
            order: 1;
        }

        .list-title {
            order: 2;
        }

        .recipe-num-wrapper {
            order: 3;
        }
                
        .recipe-frame .category-image-wrapper img {
            max-width: 100%;
            width: 200px;
            margin-bottom: 15px;
        }

        .related-banner-list li {
            margin-bottom: 15px;
        }
        .related-banner-list li .banner-image {
            width: 100%;
        }
        .related-banner-list li .text {
            font-size: 1.3rem;
            color: #474747;
        }
        .to-related-category-link {
            background-color: #fff;
            color: #776964;
            border-radius: 25px;
            padding: 10px 18px;
            font-size: 14px;
            border: solid 1px #776964;
            font-weight: 700;
            display: block;
            width: 200px;
            margin: 0 auto;
        }

        .recipe-list {
            width: 90%;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            padding: 0 15px;
            margin-bottom: 30px;
            margin-inline: auto;
        }
        .recipe-list li {
            width: calc(33.333% - 10px);
            line-height: 1.2;
        }
        .recipe-list li .recipe-list-recipe-image {
            width: 100%;
            vertical-align: middle;
            margin-bottom: 5px;
        }
        .recipe-list li .item-name {
            font-size: 12px;
            line-height: 20px;
            margin-bottom: 2px;
        }
        .recipe-list li .recipe-list-recipe-name {
            font-size: 14px;
        /*	line-height: 20px;*/
        }

        .pagination-wrapper {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
        }
        .recipe-pagination {
            display: flex;
            line-height: 1.8rem;
            margin: 0 10px;
            font-weight: 500;
        }
        .pagination-control {
            border-radius: 9px;
            font-size: 1.4rem;
            padding: 0 6px;
            display: block;
            line-height: 2.4;
        }
        .pagination-control.disabled {
            pointer-events: none;
        }
        .recipe-pagination li +li {
            margin-left: 10px;
        }
        .recipe-pagination li a {
            font-size: 1.5rem;
            display: block;
            padding: 5px;
            color: #776964;
            width: 30px;
            height: 30px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }
        .recipe-pagination li a.current {
            border: solid 1px #776964;
            color: #fff;
            background: #776964;
            border-radius: 50%;
        }
        /** search modal */
        .blocker {
            padding: 0;
        }
        .fix-search-btn-wrapper {
            display: inline-flex;
            flex-wrap: wrap;
            justify-content: center;
            position: fixed;
            bottom: 30px;
            right: 10%;
            z-index: 1000;
            width: 100px;
            height: 100px;
            background-color: #298695;            
            border-radius: 50%;
            box-shadow: 0px 0px 10px -5px #3f3f3f;
            padding: 7px 10px 15px;
        }
        .fix-search-btn-wrapper p {
            font-size: 1.4rem;
            color: #fff;
            line-height: 1;
            text-align: center;
        }
        .fix-search-btn-wrapper .fix-search-btn {
            width: 60%;
        }
        .fix-search-btn-link {
            cursor: pointer;
        }
        
        .search-modal-wrapper.modal {
            padding: 0;
            position: relative;
            width: 96%;
            max-width: 700px;
        }
        .search-modal-wrapper .search-modal-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
            line-height: 1.3;
            padding: 0 5px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
        }
        .search-modal-wrapper .search-modal-block-title {
            font-size: 18px;
            font-weight: bold;
            border-bottom: solid 1px #000;
            margin-bottom: 15px;
        }
        .search-modal-wrapper .keyword-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: flex-start;
            margin-bottom: 20px;
        }
        .search-modal-wrapper .keyword-list li {
            min-width: calc(100%/6 - 10px);
        }
        .search-modal-wrapper .keyword-list li a {
            display: block;
            padding: 6px 8px;
            border: 1px solid #c0b59e;
            border-radius: 9999px;
            background-color: white;
            color: #6b614a;
            font-size: 13px;
            text-align: center;
            white-space: nowrap;
            cursor: pointer;
            overflow: hidden;
            white-space: nowrap;
            font-weight: 500;
        }
        .search-modal-wrapper .keyword-list li a.active {
            background-color: #c0b59e;
            color: white;
        }
        .search-modal-wrapper .category-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-bottom: 10px;
        }
        .search-modal-wrapper .category-list li {
            width: calc(30% - 10px);
        }
        .search-modal-wrapper .category-list li a {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: baseline;
            height: 130px;
            padding: 10px 10px;
            border: 1px solid #c0b59e;
            border-radius: 10px;
            background-color: white;
            color: #6b614a;
            font-size: 12px;
            text-align: center;
            /* white-space: nowrap; */
            cursor: pointer;
            overflow: hidden;
            line-height: 18px;
            font-weight: 500;
        }
        .search-modal-wrapper .category-list li a.active {
            background-color: #c0b59e;
            color: white;
        }
        .search-modal-wrapper .category-list li img {
            width: 70%;
            margin: 0 auto 5px;
            display: block;
        }
        .search-modal-wrapper .search-recipe-link {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-color: #298695;
            color: white;
            font-weight: bold;
            cursor: pointer;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 10px;
            border-radius: 0 0 4px 4px;
        }
        .search-modal-wrapper .search-modal-wrapper-inner {
            padding: 30px 10px;
            margin-bottom: 20px;
            overflow: auto;
            height: auto;
        }

        .recipe-all-wrapper {
            margin-bottom: 30px;
        }

        .related-banner-wrapper {
            padding: 0 50px;
            margin-bottom: 80px;
        }

        .recipe-section-title {
            position: relative;
            text-align: center;
            width: 500px;
            margin: 0 auto 30px;
            font-weight: bold;
            font-size: 2rem;
        }
        .related-banner-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: baseline;
            gap: 20px;
        }
        .related-banner-list li {
            width: 45%;
            margin-bottom: 30px;
        }

        .related-banner-list li .banner-image {
            width: 100%;
        }
        .related-banner-list li .text {
            font-size: 14px;
            line-height: 1.4;
        }

        .to-top-link {
            display: block;
            border: solid 1px #776964;
            color: #776964;
            border-radius: 5px;
            padding: 10px;
            text-align: center;
            width: 36%;
            margin: 0 auto;
        }