@charset "utf-8";
/* CSS Document */

.post-edit-link {display:none;}

.edit-link {display:none;}

html{
    font-size:20px;
}

img{
    max-width:100%;
    height:auto;
	image-rendering: -webkit-optimize-contrast;
    pointer-events: none;
}

a,a:link,a:active,a:visited,a:focus{
    color:inherit;
    transition:opacity ease 0.3s;
}

a:hover{
    opacity:0.8;
}

:root {
    --main-color:#3C4045;
    --theme-color:#B9B5AA;
    --color-border:#B9B5AA;
    --color-red:#E60012;
    --color-body:#FFFDF9;
    --font-jp:"Noto Sans JP", sans-serif;
    --font-poppins:"Poppins", sans-serif;
    --font-mon:"Montserrat", sans-serif;
    --font-small:0.65rem;
    --font-ex-small:0.65rem;
    --c-width:90%;
    --c-width-wide:95%;
    --c-max-width:1500px;
    --c-max-width-wide:1800px;
    --c-max-width-narrow:900px;
    --c-max-width-sub:1200px;
    --n-large:150px;
    --n-middle:90px;
    --n-small:45px;
}

h1,h2,h3,h4,h5{
    font-weight: 700;
}

h1{
    font-size:2.25rem;
    line-height: 1.4;
    letter-spacing: 0.1rem;
    
}

h2{
    font-size:1.25rem;
    line-height: 1.4;
}

h3{
    font-size:1rem;
}

body{
    line-height:1.4;
    background:var(--color-body);
    font-weight: 400;
    font-family: var(--font-jp);
    color:var(--main-color);
}

.img-pc{
    display: inline;
}

.img-sp{
    display: none;
}

.content-middle{
    width:var(--c-width);
    max-width:var(--c-max-width);
    margin:auto;
}

.big-font-ttle{
    position: relative;
    width:fit-content;
    margin-bottom: var(--n-middle);
}

.bf-en{
    font-size:6rem;
    font-weight: 600;
    font-family: var(--font-poppins);
}

.big-font-ttle h2{
    font-size:14px;
    position: absolute;
    bottom:0.8em;
    left:0;
    right:0;
    margin:auto;
    width:fit-content;
    border:1px solid var(--color-border);
    background:#ffffff;
    padding:0.25rem 1rem;
    border-radius: 999px;
}

.top-sub-ttl{
    margin-bottom: var(--n-small);
}

.site-main{
    padding-bottom: var(--n-large);
}

.page-header{
    margin-bottom: var(--n-middle);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:6rem;
}

.page-header .archive-description{
    width:50%;
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: justify;
}

.page-header .page-title{
    flex:1;
}

.separator {
    height: 45px;
    background: url("../img/bg-separator.png") repeat-x;
    background-size: auto 28px;
    background-position: center center;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    animation: scrollBackground 40s linear infinite;
}

@keyframes scrollBackground {
    0% {
        background-position: 0 center;
    }
    100% {
        background-position: -100vw center;
    }
}

.ttl-sub-ttl-wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width:100%;
    margin-bottom: var(--n-small);
}

.ttl-sub-text{
    font-size:16px;
    color:var(--theme-color);
    font-family: var(--font-mon);
    padding-right: 80px;
    background: url(../img/icon-dog-cat.svg) no-repeat;
    background-size: auto 100%;
    background-position: right center;
    height:fit-content;
}

.ttl-sub-image{
    width:200px;
    aspect-ratio:1/1;
}

.lead{
    line-height: 1.7;
    letter-spacing: 1px;
    text-align: justify;
}

.lead:not(:last-of-type){
    margin-bottom: 1.5rem;
}

.bg-deco{
    height:400px;
    width:100%;
    background:url("../img/bg-deco.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    position: relative;
}

.bg-deco:before{
    content:"";
    display: block;
    width:100%;
    height:100%;
    position: absolute;
    background:rgba(0,0,0,0.4);
    left:0;
    top:0;
}

/*****************パンくずリスト*********************/

.breadcrumb{
    text-align: right;
    font-size:16px;
    margin-bottom: var(--n-middle);
}

.breadcrumb > span:first-of-type a{
    font-family: var(--font-mon);
}

.breadcrumb > span{
    padding:0 15px;
}

.breadcrumb  > span:last-of-type{
    padding-right:0;
}

.breadcrumb-flex{
    display: flex;
    justify-content: space-between;
}

.breadcrumb-deco:after{
    content:"Archives";
    color:var(--theme-color);
    font-size:16px;
    font-family: var(--font-mon);
    background:url("../img/icon-dog-cat.svg") no-repeat;
    background-size:auto 100%;
    background-position: right center;
    padding-right:80px;
}

.tax-cate-life-with-pets .breadcrumb-deco:after,.single-life-with-pets .breadcrumb-deco:after,.page-life-with-pets .breadcrumb-deco:after,.post-type-archive-life-with-pets .breadcrumb-deco:after{
    content:"Living With Pets";
}

.tax-cate-recipe .breadcrumb-deco:after,.single-recipe .breadcrumb-deco:after,.page-recipe .breadcrumb-deco:after,.post-type-archive-recipe .breadcrumb-deco:after{
    content:"Homemade Pet Recipes";
}

.page-news .breadcrumb-deco:after,.category-news .breadcrumb-deco:after{
    content:"News";
}

.tax-tag-common .breadcrumb-deco:after{
    content:"Tags";
}

/*******************記事ページ***********************/

.article-ttl-wrapper{
    display: flex;
    justify-content: space-between;
    padding-bottom:0.5rem;
    border-bottom:1px solid var(--color-border);
    margin-bottom: 1rem;
}

.tag-list{
    display: flex;
    gap:1rem;
}

.tag-list a{
    background:#ffffff;
    padding:0.5rem;
}

.tag-list a:before{
    content:"#";
}

.article-ttl{
    margin-bottom: var(--n-middle);
}

.article-heading{
    margin-bottom: var(--n-middle);
}

.text-red{
    color:#ff0000;
}

.article-paragraph{
    letter-spacing: 1px;
    line-height: 2;
}

.thumb-img{
    display: flex;
    align-items: center;
    height:500px;
    overflow: hidden;
}

.thumb-img img{
    width:100%;
    height:auto;
}

.thumb-img{
    margin-bottom:var(--n-middle);
}

.article-parts:not(:last-of-type){
    margin-bottom:var(--n-middle);
}

.section-heading{
    margin-bottom: var(--n-small);
    font-weight: 700;
    border-bottom:1px solid var(--color-border);
    padding-bottom: 0.5rem;
    position: relative;
    padding-left:2.5rem;
}

.section-heading:before{
    content:"";
    display: block;
    width:30px;
    height:30px;
    background: url("../img/icon-nikukyu.svg") no-repeat;
    background-size:cover;
    position: absolute;
    left:0;
    top:0;
    bottom:0.5rem;
    margin:auto;
}

.article-2col-image-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap:3rem;
}

.article-2col-image-wrapper .article-paragraph{
    width:calc(70% - 3rem);
}

.article-2col-image-wrapper .article-image{
    width:30%;
}

.article-2col-image-wrapper.col-rev .article-paragraph{
    order:2;
}

.article-2col-image-wrapper.col-rev .article-image{
    order:1;
}

.article-2col-image-wrapper.col-vertical{
    flex-direction: column;
}

.article-2col-image-wrapper.col-vertical .article-paragraph,.article-2col-image-wrapper.col-vertical .article-image{
    width:100%;
}

.article-2col-image-wrapper.col-vertical .article-image{
    text-align: center;
}

.article-datalist:not(:last-of-type){
    margin-bottom: var(--n-small);
}

.article-datalist dt{
    margin-bottom: 1.5rem;
    position: relative;
    background:#E7E4DD;
    padding:0.75rem;
}

.article-datalist dd{
    padding-left:2rem;
}

.article-datalist dd + dd{
    margin-top: 1.5rem;
}

.dot-list li{
    position: relative;
}

.article-datalist.datalist-dot dt{
    padding-left: 2em;
}

.dot-list li{
    padding-left:1.75em;
}

.article-datalist.datalist-dot dt:before,.dot-list li:before{
    content:"●";
    color:var(--theme-color);
    display: block;
    position: absolute;
    left:0.5rem;
    top:0.75rem;
    transform: scale(0.8);
    transform-origin: center center;
}

.dot-list li:before{
    top:0;
}

.article-parts {
    counter-reset: section;
}

.article-datalist.datalist-num dt {
    padding-left: 2em;
    position: relative;
    counter-increment: section;
}

.article-datalist.datalist-num dt:before {
    content: counter(section, cjk-ideographic);
    display: block;
    position: absolute;
    left:0.5rem;
    top: 0.75rem;
}

.article-datalist.datalist-qanda dt {
    padding-left: 2em;
    position: relative;
}

.article-datalist.datalist-qanda dt:before {
    content:"Q.";
    font-family: var(--font-poppins);
    color:var(--theme-color);
    display: block;
    position: absolute;
    left:0.5rem;
    top: 0.75rem;
}

.num-list {
    counter-reset: num-counter;
}

.num-list li {
    padding-left: 1.25em;
    position: relative;
    counter-increment: num-counter;
}

.num-list li:before {
    content: counter(num-counter, cjk-ideographic);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

@counter-style cjk-ideographic {
    system: cyclic;
    symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩";
    suffix: " ";
}


.article-paragraph:not(:last-of-type){
    margin-bottom: 1.5rem;
}

.article-paragraph-lead{
    margin-bottom: 3rem;
}

ul li:not(:last-of-type),ol li:not(:last-of-type){
    margin-bottom: 0.5rem;
}

.article-table th,.article-table td{
    border:1px solid var(--color-border);
    padding:1rem;
}

.article-table th{
    text-align: center;
    background: #E7E4DD;
}

.article-table td{
    background: #ffffff;
}

.article-bg-parts{
    background: #E7E4DD;
    padding:var(--n-small);
}

/*******************記事一覧ページ***********************/

.article-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap:3rem;
}

.tag-list-wrapper:not(:last-of-type){
    margin-bottom: var(--n-middle);
}
.article-wrapper .article-link{
    display: block;
    width:calc((100% - 3rem * 2)/3);
}

.article-main-link{
    position: relative;
}

.article-main-link.new-article:before{
    content:"NEW";
    font-family: var(--n-font-mon);
    display: flex;
    align-items: center;
    justify-content: center;
    width:60px;
    height:60px;
    background:var(--main-color);
    color:#ffffff;
    position: absolute;
    left:0;
    top:0;
    z-index: 2;
    
}

.product-badge-wrapper{
    position: absolute;
    right:15px;
    bottom:15px;
    display: flex;
    gap:5px;
}

.badge-dog-food,.badge-cat-food,.badge-domestic,.badge-color_additive,.badge-color_fixative{
    display: flex;
    align-items: center;
    justify-content: center;
    width:45px;
    height:45px;
    background: var(--main-color);
    color:#ffffff;
    border-radius:100%;
}

.badge-dog-food:after{
    content:"犬";
}

.badge-cat-food:after{
    content:"猫";
}

.badge-domestic:after{
    content:"国産";
}

.badge-color_additive:after{
    content:"着色料無添加";
}

.badge-color_fixative:after{
    content:"発色剤無添加";
}

.article-type-product-info .article-list-date span{
    display: none;
}

.article-list-ttl{
    font-size:1rem;
}

.article-cate{
    font-size:14px;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.article-list-date{
    font-family:var(--font-mon);
    color:var(--theme-color);
    font-size:14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.article-list-date span{
    order:3;
}

.article-list-date:before{
    content:"Living With Pets";
    font-size:16px;
    order:1;
}

.article-type-recipe .article-list-date:before{
    content:"Homemade Pet Recipes";
}

.article-type-product-info .article-list-date:before{
    content:"Products";
}

.article-type-post .article-list-date:before{
    content:"News";
}

.article-type-product-info + .article-cate a:after,.article-type-product-info + .news-post-info .news-post-category a:after{
    content:" シリーズ";
}

.article-list-date:after{
    content:"";
    order:2;
    flex-grow:1;
    border-bottom: 1px solid var(--theme-color);
    margin: 0 20px;
}

/*****************ページャー**********************/

.pagination-wrapper {
    text-align: center;
    margin-top: 20px;
    width:100%;
}

.pagination-wrapper .page-numbers {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 4px;
    text-decoration: none;
    font-size: 14px;
}

.pagination-wrapper .page-numbers.current {
    font-weight:600;
}

.pagination-wrapper .page-numbers.prev,
.pagination-wrapper .page-numbers.next {
    font-size:14px;
    font-weight: bold;
    text-decoration: underline;
    position: relative;
}

.pagination-wrapper .page-numbers.prev:before{
    content:"";
    display: block;
    width:5px;
    height:8px;
    background:url("../img/icon-pager-arrow-left.svg") no-repeat;
    background-size:cover;
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto;
}

.pagination-wrapper .page-numbers.next:before{
    content:"";
    display: block;
    width:5px;
    height:8px;
    background:url("../img/icon-pager-arrow-right.svg") no-repeat;
    background-size:auto 100%;
    position: absolute;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}

.page-num:not(.prev):not(.next){
    font-family:var(--font-mon);
}

/**********************TOP ニュース********************************/

.top-news{
    padding-top: var(--n-large);
    padding-bottom: var(--n-large);
}

.news-post-title{
    font-size:1rem;
    font-weight: 700;
}

.top-common-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap:6rem;
}

.top-common-left,.top-common-right{
    width:calc((100% - 6rem)/2);
}

.top-news-left{
    max-width:450px;
}

.top-common-right{
    width:auto;
    flex:1;
}

.news-post-item{
    display: flex;
    flex-wrap: wrap;
    gap:3rem;
}

.news-post-thumbnail{
    width:150px;
    aspect-ratio:1/1;
}

.news-post-item:not(:last-of-type){
    padding-bottom: var(--n-small);
    margin-bottom: var(--n-small);
    border-bottom:1px solid var(--color-border);
}

.news-post-info{
    flex:1;
    display: flex;
    flex-direction: column;
}

.news-post-inner{
    display: flex;
    gap:1.5rem;
    margin-bottom: 1rem;
    font-size:16px;
}

.news-post-thumbnail,.article-list-image{
    display: flex;
    align-items: center;    
    justify-content: center;
    overflow: hidden;
    border:1px solid var(--color-border);
    aspect-ratio:1/1;
}

.article-list-image{
    margin-bottom: 0.5rem;
    position: relative;
}

.news-post-thumbnail img,.article-list-image img{
    height:100%;
    width: 100%;
    object-fit: cover;
}

.news-post-date{
    font-family: var(--font-mon);
}

.news-post-category{
    font-weight:700;
}

.news-post-link{
    margin-top: auto;
    margin-left:auto;
}

.link-btn-wrapper{
    margin-top: var(--n-middle);
}

.link-btn-wrapper a{
    background:var(--main-color) url("../img/icon-pager-arrow-right-white.svg") no-repeat;
    background-size:5px auto;
    background-position: right 25px center;
    color:#ffffff;
    display: block;
    width:fit-content;
    margin-left:auto;
    padding:20px 40px;
    padding-right:60px;
    font-size:14px;
    border-radius: 999px;
}

.news-post-image-wrapper {
    position: relative;
}

.news-post-image-wrapper .product-badge-wrapper .badge-domestic,.news-post-image-wrapper .product-badge-wrapper .badge-color_additive,.news-post-image-wrapper .product-badge-wrapper .badge-color_fixative{
    display: none;
}

.news-post-image-wrapper .product-badge-wrapper .badge-dog-food,.news-post-image-wrapper .product-badge-wrapper  .badge-cat-food{
    width:20px;
    height:20px;
    font-size:12px;
}

/**********************検索ページ***************************/

.search-list-wrapper{
    display:flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    width:100%;
}

.search-list-wrapper article{
    display: block;
    width: calc((100% - 1.5rem* 2) / 3);
}

.search-ttl{
    margin-bottom: var(--n-middle);
}

.search-filter-wrapper{
    background: #ffffff;
    border:2px solid var(--color-border);
    padding:1rem;
    margin-bottom: var(--n-middle);
    border-radius: 10px;
}

.search-filter-ttl{
    font-weight: 700;
    margin-bottom: 1rem;
    font-size:16px;
}

.search-filter-box{
    display: flex;
    gap:1rem;
    font-size:14px;
}

.search-filter-box:not(:last-of-type){
    margin-bottom: 1rem;
}

.article-type-ttl,.tag-subttl{
    margin-bottom: var(--n-small);
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
    position: relative;
    padding-left: 2.5rem;
}

.article-type-ttl:before ,.tag-subttl:before{
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: url(../img/icon-nikukyu.svg) no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0.5rem;
    margin: auto;
}

.search-flex{
    display: flex;
    gap:6rem;
}

.search-image-wrapper{
    width:calc((100% - 600px - 6rem));
    background:url(../img/header-logo.png) no-repeat;
    background-size:300px auto;
    background-position: center center
}

.search-box-wrapper{
    width:600px;
    padding:6rem 3rem;
}

.search-box-wrapper {
    max-height: 100vh;
    overflow-y: auto;
}

.search-box{
    font-size:14px;
}

.search-box:not(:last-of-type){
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom:1px solid var(--color-border);
}

.search-box-ttl{
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--n-small);
}

.search-box-ttl:after{
    content:"Product Search";
    font-family: var(--font-mon);
    font-weight: 400;
}

.search-box-ttl.search-box-ttl-article:after{
    content:"Media Search";
}

.search-box-ttl.search-box-ttl-tag:after{
    content:"Tags";
}

/* Chrome, Edge, and Safari */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 10px; /* トラック全体に角丸を適用 */
}

::-webkit-scrollbar-thumb {
    background-color: #D9D9D9;
    border-radius: 999px; /* 端を丸くするための高い値 */
    border: 3px solid #ffffff;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #bfbfbf;
}

/* Firefox */
/*.search-box-wrapper {
    scrollbar-width: thin;
    scrollbar-color: #D9D9D9 #ffffff;
}*/

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    padding:10px;
    line-height: 1.4;
}

input::placeholder{
    font-size:16px;
    color:var(--theme-color);
}

button, [type="button"], [type="reset"], [type="submit"]{
    font-size:14px;
    border:1px solid var(--main-color);
    padding:15px 40px;
    border-radius:999px;
    background:#ffffff;
}

.search-parts-key .search-accordion-box{
    width:100%;
}

.keyword-form{
    font-size:16px;
    width:100%;
}

.search-parts{
    border:1px solid var(--color-border);
    border-right:none;
    border-left:none;
    padding:1rem 1.5rem;
}

.search-parts-wrapper{
    margin-bottom: 1.5rem;
}

.search-parts:not(:last-of-type){
    border-bottom:none;
}

.search-box-sub-ttl{
    font-weight: 700;
}

.search-accordion{
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap:1rem;
}

.search-box [type="submit"]{
    background:#ffffff url("../img/icon-search.svg") no-repeat;
    background-size:10px auto;
    background-position: right 25px center;
    padding-right:60px;
    margin-left:auto;
    display: block;
    font-weight: 500;
}

.search-tag-wrapper ul{
    display: flex;
    flex-wrap: wrap;
    gap:1rem;
}

.search-tag-wrapper ul li a{
    text-decoration: underline;
}

.search-tag-wrapper ul li a:before{
    content:"#";
}

/*****チェックボックスの装飾*****/

.search-accordion label {
    display: block;
    padding: 0.25rem 1rem;
    background-color:#ffffff;
    color: var(--main-color);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.search-accordion input[type="checkbox"] {
    display: none;
}

.search-accordion input[type="checkbox"]:checked + label {
    background-color: var(--main-color);
    color: #fff;
}

.search-accordion-inner{
    display: flex;
    flex-wrap: wrap;
    gap:10px;
}

/*****チェックボックスの装飾ここまで*****/

/*検索アコーディオン*/

.search-box-sub-ttl{
    position: relative;
    padding-left: 20px;
    cursor: pointer;
}

.nav-box-sub-ttl{
    position: relative;
    padding-right: 20px;
    cursor: pointer;
    width: fit-content;
}

.search-box-sub-ttl::before {
    content: '+';
    position: absolute;
    left: 0;
    font-size: 14px;
    transition: transform 0.3s ease, content 0.3s ease;
}

.nav-box-sub-ttl::after{
    content: '+';
    position: absolute;
    right:0;
    font-size: 14px;
    transition: transform 0.3s ease, content 0.3s ease;
}

.site-nav-box:first-of-type .nav-box-sub-ttl::after{
    content:none;
}

.search-box-sub-ttl.active::before,.nav-box-sub-ttl.active::after {
    content: '-';
    transform: rotate(180deg);
}

.search-accordion,.nav-accordion-box {
    display: none;
    /*overflow: hidden;*/
    transition: max-height 0.3s ease;
}

.search-accordion.open,.nav-accordion-box.open {
    display: block;
}

/*検索アコーディオンここまで*/

/*********************ヘッダー****************************/

#page{
    padding-top: 110px;
}

.site-header{
    padding:15px 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    transition:background 0.5s ease-in-out;
    z-index: 9;
}

.is-not-top .site-header{
    background:rgba(255,255,255,0.6);
}

.btn-header{
    width:50px;
    height:50px;
    border-radius:100%;
    background:var(--main-color) url("../img/icon-search-head.svg") no-repeat;
    background-size:20px auto;
    background-position: center center;
    cursor: pointer;
}

.btn-header.btn-header-gnav{
    background:var(--main-color) url("../img/icon-gnav-head.svg") no-repeat;
    background-size:20px auto;
    background-position: center center;
}

.btn-header-wrapper{
    display: flex;
    gap:1rem;
}

/*********************ドロワーナビ****************************/

body.drawer-on {
    height: 100%;
    overflow: hidden;
}

.btn-search-close,.btn-gnav-close{
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: url(../img/icon-close-head.svg) no-repeat;
    background-size: 20px auto;
    background-position: center center;
    border:1px solid var(--main-color);
    cursor: pointer;
    position: absolute;
    right:30px;
    top:15px;
    display: none;
    z-index: 99;
}

body.drawer-on .btn-search-close,body.drawer-on .btn-gnav-close{
    display: block;
}

.search-wrapper{
    background:var(--color-body);   
    position: fixed;
    top: 0;
    right: 0;
    align-items: center;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    transition: all .4s linear;
    transition-timing-function: cubic-bezier(.24,1,.18,1);
    display: none;
    z-index: -10;
}

body.gnav-active .site-nav-content{
    position: fixed;
    top: 0;
    right: 0;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    transition: all .4s linear;
    transition-timing-function: cubic-bezier(.24,1,.18,1);
    z-index: -10;
    z-index: 999;
    -webkit-animation: drawer-open .4s cubic-bezier(.24,1,.18,1) 0s;
    -webkit-animation-fill-mode: both;
    animation: drawer-open .4s cubic-bezier(.24,1,.18,1) 0s;
    animation-fill-mode: both;
}

body.gnav-active .site-nav-inner{
    max-height: 100vh;
    overflow-y: auto;
    padding:3rem 3rem;
}

body.search-active .search-wrapper{
    display: block;
    z-index: 999;
    overflow-x:hidden;
}

body.search-active .search-wrapper {
    -webkit-animation: drawer-open .4s cubic-bezier(.24,1,.18,1) 0s;
    -webkit-animation-fill-mode: both;
    animation: drawer-open .4s cubic-bezier(.24,1,.18,1) 0s;
    animation-fill-mode: both;
}

body .search-wrapper {
    -webkit-animation: drawer-close .4s cubic-bezier(.180,.80,.40,1) 0s;
    -webkit-animation-fill-mode: both;
    animation: drawer-close .4s cubic-bezier(.180,.80,.40,1) 0s;
    animation-fill-mode: both
}

@-webkit-keyframes drawer-open {
    0% {
        transform: scale(1.05);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes drawer-open {
    0% {
        transform: scale(1.05);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@-webkit-keyframes drawer-close {
    0% {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(1.05);
        opacity: 0
    }
}

@keyframes drawer-close {
    0% {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(1.05);
        opacity: 0
    }
}

/************ナビゲーション*******************/

.site-nav-content{
    background: #e7e4dd;
    width:100%;
}

.site-nav-inner{
    padding:6rem 3rem;
}

.nav-logo-wrapper{
    margin-bottom: var(--n-middle);
}

.nav-box-sub-ttl{
    font-weight:700;
    font-size:14px;
    margin-bottom: 1rem;
}

.site-nav-box:not(:last-of-type){
    margin-bottom: var(--n-small);
}

.nav-accordion-box ul{
    display: flex;
    flex-wrap: wrap;
    gap:0.5rem;
}

.nav-accordion-box ul li a{
    background: #ffffff;
    border-radius: 999px;
    font-size:15px;
    padding:0.25rem 1rem;
    white-space: nowrap;
}

.nav-flex-wrapper{
    display: flex;
    margin-bottom: var(--n-middle);
}

.site-nav-wrapper{
    padding-right:6rem;
    flex:1;
}

.nav-slider-wrapper{
    padding-left:6rem;
    border-left:1px solid var(--color-border);
}

.nav-slider-wrapper .splide{
    width:500px;
}

.other-nav-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap:1rem;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: var(--n-middle);
}

.other-nav-wrapper ul{
    display: flex;
    flex-wrap: wrap;
    gap:1rem;
}

.other-nav-wrapper ul li a{
    font-size:14px;
    font-weight: 700;
}

.sns-link{
    display: block;
}

.copyright-wrapper{
    font-size:16px;
    font-weight: 500;
    font-family: var(--font-mon);
    text-align: center;
}

/*********ナビスライダー********/

.splide-nav-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:3rem;
}

#nav-splide-slider {
    max-width: 400px;
    margin: 0 auto;
}

/* 共通のスタイル */
.custom-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 150px;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    font-family: var(--font-mon);
}

.custom-pagination span {
    display: inline-block;
    width:2em;
    text-align: center;
}

.pagination-divider {
    flex-grow: 1;
    height: 1px;
    /*background-color: var(--main-color);*/
    margin: 0 10px;
    border-bottom:1px solid var(--main-color);
}

/* 数字の切り替えアニメーション */
.current-slide, .total-slides {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
    width: 2em;
    text-align: center;
}

.splide__arrows {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.splide__arrow {
    border: 1px solid var(--main-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: static;
    transform: none;
    background: none;
}

#nav-splide-slider .custom-pagination {
    width: 150px;
}

.splide-common .custom-pagination {
    width: 200px;
}

.fade-out {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.fade-in {
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
}

.splide-common .splide__slide{
    width:500px;
}

.splide-common{
    margin-left:5%;
}

.splide-common .splide__track{
    margin-bottom: var(--n-small);
}

.splide-common .splide-nav-wrapper{
    justify-content: flex-start;
}

/****************TOPタグスクロール********************/

.top-tag-wrapper{
    font-size:15px;
    border-top:1px solid var(--color-border);
    border-bottom:1px solid var(--color-border);
    padding:0.5rem 0;
    margin-bottom: var(--n-small);
}

.top-tag-wrapper ul li:not(:last-of-type), .top-tag-wrapper ol li:not(:last-of-type){
    margin-bottom: 0;
}

.top-tag-wrapper a{
    text-decoration: underline;
}

.top-tag-wrapper a:before{
    content:"#";
}

.top-tag-wrapper ul li{
    padding:0 30px;
}

/****************TOP人気記事********************/

.top-popular{
    margin-bottom: var(--n-large);
}

.btn-arrow-link{
    text-align: right;
}

.btn-arrow-link a,.news-post-link{
    font-size:14px;
    font-weight: 700;
    position: relative;
    padding-right:20px;
    text-decoration: underline;
}

.btn-arrow-link a:before,.news-post-link:before {
    content: "";
    display: block;
    width: 5px;
    height: 8px;
    background: url(../img/icon-pager-arrow-right.svg) no-repeat;
    background-size: auto 100%;
    position: absolute;
    right: 0;
    top: 3px;
    bottom: 0;
    margin: auto;
}

.top-popular .btn-arrow-link{
    padding-right: 5%;
    margin-top:-40px;
}

/***********TOP製品情報************/

.top-product{
    padding-top: var(--n-large);
}

.ttl-deco-paws{
    margin-bottom: var(--n-small);
    font-size:14px;
    background:url("../img/icon-nikukyu.svg") no-repeat;
    background-size:auto 100%;
    background-position: left center;
    padding:0.25rem 3rem;
}

.top-product .search-box:not(:last-of-type){
    border:none;
    padding-bottom: 0;
}

.top-product-genre-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
}

.top-product-genre-box{
    width:calc((100% - 1.5rem) / 2);
    aspect-ratio:1/1;
}

.thumb_link{
    position: relative;
    display: block;
}

.product-for-what{
    font-family:var(--font-mon);
    color:var(--theme-color);
    font-size:14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left:0;
    right:0;
    top:10px;
    margin: auto;
    width:90%;
    height:fit-content;
}

.product-for-what span{
    order:3;
}

.product-for-what:before{
    content:"";
    width:24px;
    height:24px;
    order:1;
}

.product-for-what.product-for-dog:before{
    background:url("../img/icon-dog.svg") no-repeat;
    background-size: cover;
    background-position: center center;
}

.product-for-what.product-for-cat:before{
    background:url("../img/icon-cat.svg") no-repeat;
    background-size: cover;
    background-position: center center;
}

.article-type-recipe .product-for-what:before{
    content:"Homemade Pet Recipes";
}

.article-type-product-info .product-for-what:before{
    content:"Products";
}

.article-type-post .product-for-what:before{
    content:"News";
}

.product-for-what:after{
    content:"";
    order:2;
    flex-grow:1;
    border-bottom: 1px solid var(--theme-color);
    margin: 0 20px;
}

.thumb_link_ttl{
    position: absolute;
    font-size: 14px;
    font-weight: 700;
    padding-right: 20px;
    text-decoration: underline;
    width:fit-content;
    right:20px;
    bottom:20px;
}

.thumb_link_ttl:before {
    content: "";
    display: block;
    width: 5px;
    height: 8px;
    background: url(../img/icon-pager-arrow-right.svg) no-repeat;
    background-size: auto 100%;
    position: absolute;
    right: 0;
    top: 3px;
    bottom: 0;
    margin: auto;
}

.sticky-inner{
    position: sticky;
    top: 6rem;
}