/*
Theme Name: Catalog Minimal
Version: 1.0
*/

:root{
    --wrap: 1120px;
    --text: #111;
    --muted:#666;
    --line:#e8e8e8;
    --soft:#f6f6f6;
  }
  
  *{ box-sizing:border-box; }
  
  body{
    margin:0;
    color: var(--text);
    background:#fff;
    letter-spacing:.03em;
    line-height:1.9;
  }
  
  a{ color:inherit; text-decoration:none; }
  img{ width:100%; height:auto; display:block; }
  
  .wrap{
    max-width: var(--wrap);
    margin:0 auto;
    padding: 0 20px;
  }
  
  /* ===== Header / Nav (minimal) ===== */
  .site-header{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding: 18px 0;
  }
  
  .site-headerInner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
  }
  
  .site-logo{
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .02em;
    text-decoration:none;
    color:#111;
  }
  
  .site-nav{
    display:flex;
    align-items:center;
    gap: 18px;
    font-size: 14px;
  }
  
  /* 既存のHTMLが <a> 直書きでも効くように */
  .site-nav a,
  .nav-link{
    color:#111;
    text-decoration:none;
    padding: 10px 2px;
    letter-spacing:.02em;
  }
  
  .site-nav a:hover,
  .nav-link:hover{ opacity:.75; }
  
  .nav-item{
    position: relative;
  }
  
  /* ▼ dropdown本体 */
  .nav-dropdown{
    position:absolute;
    right: 0;
    top: 100%;
    margin-top: 0;
  
    min-width: 180px;
    background:#fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0,0,0,.10);
    padding: 10px;
  
    display:none;
  }
  
  .nav-dd-item{
    display:block;
    padding: 10px 10px;
    border-radius: 10px;
    text-decoration:none;
    color:#111;
    font-size: 14px;
  }
  
  .nav-dd-item:hover{
    background: rgba(0,0,0,.04);
  }
  
  /* ▼ Products上でもdropdown上でも表示を維持 */
  .nav-products:hover .nav-dropdown,
  .nav-products:focus-within .nav-dropdown{
    display:block;
  }
  
  /* ▼ hoverの橋：Productsとdropdownの間を埋めて消えにくくする */
  .nav-products{ position: relative; }
  
  .nav-products::after{
    content:"";
    position:absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;           /* 消えやすければ 18px〜22px に */
    background: transparent;
    pointer-events: none;
  }
  
  /* Mobile: hoverが使えないので位置だけ調整 */
  @media (max-width: 800px){
    .nav-dropdown{
      right:auto;
      left:0;
    }
  }
  
  /* ===== Footer ===== */
  .site-footer{
    border-top: 1px solid var(--line);
    padding: 18px 0;
    color: var(--muted);
    margin-top: 40px;
  }
  
  /* ===== Wraps ===== */
  .p-wrap, .s-wrap{
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 64px 20px 96px;
  }
  
  .p-head{ margin-bottom: 28px; }
  
  .p-title{
    font-size: 30px;
    font-weight: 400;
    margin: 0 0 24px;
  }
  
  /* ===== Grid (Products / Posts) ===== */
  .p-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px 36px;
  }
  
  /* 画面が広いPCだけ 4列 */
  @media (min-width: 1400px){
    .p-grid{
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  
  @media (max-width: 900px){
    .p-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  
  @media (max-width: 560px){
    .p-grid{
      grid-template-columns: 1fr;
    }
  }
  
  .p-card{
    border-top: 1px solid #efefef;
    padding-top: 18px;
  }
  
  .p-thumb{
    aspect-ratio: 4 / 3;
    background: var(--soft);
    border-radius: 20px;
    overflow:hidden;
  }
  
  .p-thumb img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
  }
  
  .p-thumbFallback{
    width:100%;
    height:100%;
    background: linear-gradient(135deg, #f2f2f2, #fafafa);
  }
  
  .p-name{
    font-size: 14.5px;
    font-weight: 400;
    margin: 14px 0 8px;
    line-height:1.6;
  }
  
  .p-meta{
    font-size: 12.5px;
    color: #777;
    margin-bottom: 10px;
  }
  
  .p-excerpt{
    font-size: 12.5px;
    color:#777;
    line-height:1.7;
    margin: 0 0 12px;
  }
  
  .p-more{
    font-size: 12.5px;
    color: #111;
    border-bottom: 1px solid #111;
    padding-bottom: 2px;
    display: inline-block;
  }
  
  /* pager */
  .p-pager{ margin-top: 40px; }
  
  .p-pager .page-numbers{
    margin-right: 10px;
    color: var(--muted);
  }
  
  .p-pager .current{ color: var(--text); }
  
  /* ===== Single (Post/Page/Product) ===== */
  .s-head{ margin-bottom: 18px; }
  
  .s-title{
    font-size: 30px;
    font-weight: 400;
    margin: 0 0 10px;
  }
  
  .s-meta{
    font-size: 12.5px;
    color:#777;
  }
  
  .s-dot{ margin: 0 8px; color:#bbb; }
  .s-metaLink{ color:#333; border-bottom:1px solid #ddd; padding-bottom:2px; }
  
  .s-media{
    border-radius: 20px;
    overflow:hidden;
    background: var(--soft);
    margin: 18px 0 26px;
  }
  
  .s-content{
    max-width: 720px;
  }
  
  .s-content a{
    border-bottom:1px solid #ddd;
  }
  
  .s-content h2, .s-content h3{
    font-weight: 500;
    letter-spacing:.02em;
  }
  
  .s-content p{
    margin: 0 0 1.2em;
  }
  
  .s-nav{
    display:flex;
    justify-content:space-between;
    gap: 12px;
    border-top:1px solid var(--line);
    margin-top: 34px;
    padding-top: 18px;
  }
  
  .s-navItem a{
    font-size: 13px;
    color:#333;
  }
  
  /* back link (カテゴリ詳細などで使用) */
  .p-back { margin-top: 10px; }
  
  .p-backLink {
    display: inline-block;
    font-size: 14px;
    color: inherit;
    opacity: .75;
    text-decoration: none;
  }
  
  .p-backLink:hover {
    opacity: 1;
    text-decoration: underline;
  }
/* ===== Article images (size control) ===== */
.s-content img{
    max-width: 100%;
    height: auto;
  }
  
/* ==============================
   Single Product: hero image too large
   ============================== */

/* 製品の個別ページだけ、全体の横幅を細くする */
body.single-product .s-wrap{
    max-width: 760px !important;  /* 680〜820あたりで好みに調整 */
  }
  
  /* 念のため、ヒーローと画像枠も中央寄せで制限 */
  body.single-product .s-hero{
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  body.single-product .s-hero .s-media{
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* 画像は枠にフィット */
  body.single-product .s-hero .s-media img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
/* Productsトップではカテゴリタブを表示しない */
body.post-type-archive-product .p-tabs{
    display: none;
  }
/* 「詳しく」リンクを非表示 */
.p-more{
    display: none;
  }
/* ===== Card hover effect ===== */

/* カード全体をリンク想定（既存構造のままでOK） */
.p-card{
    transition: transform .25s ease;
  }
  
  /* 画像：ほんの少し暗く */
  .p-card:hover .p-thumb img{
    filter: brightness(0.92);
    transition: filter .25s ease;
  }
  
  /* タイトル：わずかに浮かせる */
  .p-card:hover .p-name{
    transform: translateY(-2px);
    transition: transform .25s ease;
  }
/* ===== Blog index (page-blog.php) ===== */
.b-wrap{
    max-width: var(--wrap, 1120px);
    margin: 0 auto;
    padding: 56px 24px 80px;
  }
  
  .b-title{
    font-size: 30px;
    font-weight: 400;
    margin: 0 0 28px;
  }
  
  .b-list{
    display: grid;
    gap: 18px;
  }
  
  .b-item{
    border-top: 1px solid var(--line, #e8e8e8);
    padding-top: 18px;
  }
  
  .b-link{
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 18px;
    align-items: start;
    text-decoration: none;
    color: inherit;
  }
  
  .b-thumb{
    border-radius: 18px;
    overflow: hidden;
    background: #f2f2f2;
  }
  
  .b-thumb img{
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: filter .18s ease;
  }
  
  .b-thumb--empty{
    height: 150px;
  }
  
  .b-name{
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 400;
    transition: transform .18s ease;
  }
  
  .b-meta{
    font-size: 13px;
    color: var(--muted, #666);
    margin-bottom: 10px;
  }
  
  .b-dot{
    margin: 0 6px;
  }
  
  .b-excerpt{
    font-size: 14px;
    line-height: 1.8;
    color: var(--text, #111);
    opacity: .9;
  }
  
  /* hover：画像が少し暗く、タイトルが少し浮く */
  .b-link:hover .b-thumb img{
    filter: brightness(.92);
  }
  .b-link:hover .b-name{
    transform: translateY(-2px);
  }
  
  /* responsive */
  @media (max-width: 720px){
    .b-link{
      grid-template-columns: 1fr;
    }
    .b-thumb img,
    .b-thumb--empty{
      height: 200px;
    }
  }
/* ===== Blog 2-col with sticky calendar ===== */
.blog2-wrap{
    max-width: var(--wrap, 1120px);
    margin: 0 auto;
    padding: 56px 24px 80px;
  }
  .blog2-title{ font-size:30px; font-weight:400; margin:0 0 28px; }
  
  .blog2-grid{
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 28px;
    align-items: start;
  }
  .blog2-side{
    position: sticky;
    top: 24px; /* admin barがあるなら必要に応じて増やす */
  }
  
  .bc-box{
    border: 1px solid var(--line, #e8e8e8);
    border-radius: 16px;
    padding: 14px;
    background: #fff;
  }
  
  .bc-head{
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  .bc-label{ font-size: 13px; color: var(--muted,#666); }
  
  .bc-controls{
    display:flex;
    gap: 6px;
  }
  .bc-controls select{
    font-size: 12px;
    padding: 6px 8px;
    border: 1px solid var(--line,#e8e8e8);
    border-radius: 10px;
    background: #fff;
  }
  
  .bc-weekhead{
    font-size: 11px;
    color: var(--muted,#666);
    margin-bottom: 6px;
  }
  .bc-week span{
    display:inline-block;
    width: calc(100% / 7);
    text-align: center;
  }
  
  .bc-grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
  }
  
  .bc-cell{
    width: 100%;
    aspect-ratio: 1 / 1;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 10px;
    font-size: 12px;
  }
  
  .bc-empty{
    background: transparent;
  }
  
  .bc-day{
    border: 1px solid transparent;
    background: #f6f6f6;
    color: #111;
    cursor: default;
    padding: 0;
  }
  
  .bc-day.is-has{
    background: #fff;
    border-color: var(--line,#e8e8e8);
    cursor: pointer;
    font-weight: 600;
    color: #0b57d0; /* 投稿ありの日を青 */
    text-decoration: underline;
  }
  
  .bc-day.is-has:hover{
    background: #f3f7ff;
  }
  
  .bc-foot{
    margin-top: 12px;
    display:flex;
    justify-content:flex-end;
  }
  .bc-reset{
    font-size: 12px;
    padding: 6px 10px;
    border: 1px solid var(--line,#e8e8e8);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
  }
  .bc-reset:hover{ background:#f6f6f6; }
  
  /* 日付クリック後の結果 */
  .bd-result{ display:none; margin-bottom: 18px; }
  .bd-picked{ font-size:14px; color: var(--muted,#666); margin: 0 0 10px; }
  
  .bd-dayList{ display:grid; gap: 10px; }
  .bd-dayItem{
    border-top: 1px solid var(--line,#e8e8e8);
    padding-top: 10px;
  }
  .bd-dayLink{ text-decoration:none; color:inherit; display:block; }
  .bd-dayTitle{ font-size: 16px; margin: 0 0 4px; }
  .bd-dayMeta{ font-size: 12px; color: var(--muted,#666); }
  
  /* 既存 b-list を流用している前提（以前のCSSが入っている想定） */
  @media (max-width: 900px){
    .blog2-grid{ grid-template-columns: 1fr; }
    .blog2-side{ position: static; }
  }
/* =========================
   Blog layout
========================= */
.blog-wrap{
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 48px 20px;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 40px;
  }
  
  @media (max-width: 980px){
    .blog-wrap{ grid-template-columns: 1fr; }
    .blog-side{ position: static; }
  }
  
  .blog-head{ margin-bottom: 24px; }
  .blog-title{ font-size: 32px; margin: 0 0 10px; }
  .blog-lead{ margin: 0; color: var(--muted); }
  
  .blog-side{
    position: sticky;
    top: 20px;
    align-self: start;
  }
  
  .blog-list, .bd-dayList{
    display: grid;
    gap: 10px;
  }
  
  .blog-item, .bd-dayItem{
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    background: #fff;
  }
  
  .blog-itemLink, .bd-dayLink{
    display: block;
    padding: 14px 14px;
    text-decoration: none;
    color: inherit;
  }
  
  .blog-itemTitle, .bd-dayTitle{
    font-weight: 600;
  }
  
  .blog-itemMeta, .bd-dayMeta{
    margin-top: 6px;
    font-size: 13px;
    color: var(--muted);
  }
  
  /* =========================
     Calendar (small + sticky)
  ========================= */
  .bc-box{
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 14px;
    background: #fff;
  }
  
  .bc-ctrl{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  .bc-select{
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
  }
  
  .bc-weekhead{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
  }
  
  .bc-grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
  }
  
  .bc-cell{
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 13px;
  }
  
  .bc-empty{ background: transparent; }
  
  .bc-day{
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    cursor: pointer;
  }
  
  .bc-day:disabled{
    opacity: .35;
    cursor: default;
  }
  
  .bc-day.is-has{
    border-color: rgba(0, 90, 255, .35);
    background: rgba(0, 90, 255, .06);
    font-weight: 700;
    text-decoration: underline;
  }
  
  .bc-day.is-active{
    outline: 2px solid rgba(0, 90, 255, .45);
  }
  
  .bc-note{
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--muted);
  }
  
  /* 結果表示 */
  .bd-picked{
    font-weight: 700;
    margin-bottom: 10px;
  }
  .bd-empty{
    color: var(--muted);
  }
/* 個別記事のアイキャッチを小さく */
.s-media {
    max-width: 720px;   /* ← 好みで 600 / 640 / 720 など */
    margin: 0 auto 32px;
  }
  
  .s-media img {
    width: 100%;
    height: auto;
    border-radius: 12px; /* 角丸いらなければ消す */
  }
/* ===== 個別記事：本文とアイキャッチの幅を揃える ===== */
.single main,
.single article {
  /* 何もしない（保険） */
}

/* 本文の枠を中央に、幅を固定 */
.single .entry-content,
.single .post-content,
.single .wp-block-post-content,
.single .s-content,
.single .p-content {
  max-width: 640px;      /* ←本文の幅（ここが基準） */
  margin-left: auto;
  margin-right: auto;
}

/* アイキャッチ画像の枠も同じ幅に */
.single .post-thumbnail,
.single .wp-post-image,
.single figure.wp-block-post-featured-image,
.single .s-media,
.single .p-thumb {
  max-width: 640px;      /* ←本文と同じにする */
  margin-left: auto;
  margin-right: auto;
}

/* 画像そのものを枠にフィット＆中央 */
.single .post-thumbnail img,
.single img.wp-post-image,
.single figure.wp-block-post-featured-image img,
.single .s-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;   /* 不要なら消してOK */
}
/* ---------------------------
   Blog layout
--------------------------- */
.blog-wrap{
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
  }
  
  .blog-head{ margin-bottom: 20px; }
  .blog-title{ font-size: 40px; margin: 0 0 8px; }
  .blog-lead{ margin: 0; color: #666; }
  
  .blog-side{
    position: sticky;
    top: 24px;
    align-self: start;
  }
  
  /* ---------------------------
     Blog list (title+date+excerpt)
  --------------------------- */
  .blog-list{
    display: grid;
    gap: 14px;
  }
  
  .blog-item{
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    background: #fff;
  }
  
  .blog-item-link{
    display: block;
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
  }
  
  .blog-item-title{
    font-size: 18px;
    margin: 0 0 6px;
  }
  
  .blog-item-date{
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
  }
  
  .blog-item-excerpt{
    font-size: 14px;
    color: #333;
    line-height: 1.7;
  
    /* だいたい2行で止める */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .blog-empty, .blog-loading{
    padding: 12px 0;
    color: #666;
  }
  
  /* ---------------------------
     Calendar
  --------------------------- */
  .blog-cal{
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    background: #fff;
    padding: 14px;
  }
  
  .blog-cal-head{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  .blog-cal select{
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
  }
  
  .blog-cal-dow{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: 12px;
    color: #666;
    margin: 6px 0 8px;
    text-align: center;
  }
  
  .blog-cal-grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
  }
  
  .blog-cal-cell{
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.10);
    background: #fff;
    cursor: pointer;
    font-size: 13px;
  }
  
  .blog-cal-cell.is-empty{
    border: none;
    background: transparent;
  }
  
  .blog-cal-cell:disabled{
    opacity: .35;
    cursor: default;
  }
  
  .blog-cal-cell.has-post{
    border-color: rgba(0,124,186,.35);
    background: rgba(0,124,186,.10);
    font-weight: 700;
  }
  
  .blog-cal-cell.is-active{
    outline: 2px solid rgba(0,124,186,.70);
    outline-offset: 1px;
  }
  
  .blog-cal-note{
    margin-top: 10px;
    font-size: 12px;
    color: #666;
  }
  
  /* ---------------------------
     Single post featured image size & alignment
  --------------------------- */
  .post-one{ max-width: 720px; }
  .post-head{ margin-bottom: 12px; }
  .post-title{ font-size: 34px; margin: 0 0 6px; }
  .post-date{ color: #666; font-size: 13px; }
  
  .post-featured{
    max-width: 720px;      /* 本文幅と揃える */
    margin: 18px 0 18px;
  }
  
  .post-featured img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
  
    /* 大きすぎる感がある場合はここを下げる（例: 520px） */
    max-height: 560px;
    object-fit: cover;
  }
  
  .post-content{
    max-width: 720px;
    line-height: 1.9;
  }
  
  /* 選択日の結果表示 */
  .blog-date-results{
    margin-top: 26px;
  }
  .blog-date-results-note{
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
  }
  
  /* ---------------------------
     Responsive
  --------------------------- */
  @media (max-width: 980px){
    .blog-wrap{
      grid-template-columns: 1fr;
    }
    .blog-side{
      position: static;
    }
    .post-one, .post-featured, .post-content{
      max-width: 100%;
    }
  }
/* =========================
   Global header (BALMUDA like)
   ========================= */
   .site-header{
    position: sticky;
    top: 0;
    z-index: 50;
    background: #111;
    border-bottom: none;
    backdrop-filter: none;
    padding: 18px 0;
  }
  
  .site-header .site-logo{
    color: #fff;
    font-size: 22px;
    letter-spacing: .08em;
    font-weight: 600;
  }
  
  .site-header .site-nav,
  .site-header .site-nav a,
  .site-header .nav-link{
    color: #fff;
  }
  
  .site-header .site-nav a:hover,
  .site-header .nav-link:hover{
    opacity: .75;
  }
  
  /* dropdown */
  .site-header .nav-dropdown{
    background: #111;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 12px 34px rgba(0,0,0,.35);
  }
  
  .site-header .nav-dd-item{
    color: #fff;
  }
  
  .site-header .nav-dd-item:hover{
    background: rgba(255,255,255,.08);
  }
/* Blog full list + pager */
.b-list{
    display: grid;
    gap: 36px;
  }
  
  .b-item{
    border-top: 1px solid rgba(0,0,0,.08);
    padding-top: 22px;
  }
  
  .b-itemTitle{
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 6px;
  }
  
  .b-itemMeta{
    font-size: 13px;
    color: #666;
    margin-bottom: 14px;
  }
  
  .b-itemThumb{
    max-width: 720px;
    margin: 16px 0 18px;
    border-radius: 18px;
    overflow: hidden;
  }
  
  .b-itemContent{
    max-width: 720px;
    line-height: 1.9;
  }
  
  .b-pager{
    margin-top: 40px;
  }
  
  .b-pager .page-numbers{
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
  }
  
  .b-pager .page-numbers a,
  .b-pager .page-numbers span{
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 10px;
    font-size: 13px;
  }
  
  .b-pager .page-numbers .current{
    font-weight: 700;
  }
  .b-twoCol{
    display:flex;
    gap:24px;
    align-items:flex-start;
  }
  .b-main{ flex:1; min-width:0; }
  .b-side{ width:320px; position:sticky; top:16px; }
  
  @media (max-width: 900px){
    .b-twoCol{ display:block; }
    .b-side{ width:auto; position:static; margin-top:20px; }
  }
  .pcat-list{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:12px;
    margin:16px 0;
  }
  .pcat-item{
    display:block;
    padding:12px 14px;
    border:1px solid #ddd;
    border-radius:12px;
    text-decoration:none;
  }
  .pcat-item:hover{
    border-color:#bbb;
  }
  .tc-tiles{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:18px;
    max-width:1000px;
    margin:30px auto;
    padding:0 20px;
  }
  @media (max-width: 900px){
    .tc-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 520px){
    .tc-tiles{ grid-template-columns: 1fr; }
  }
  .tc-tile{
    display:block;
    position:relative;
    border-radius:16px;
    overflow:hidden;
    text-decoration:none;
    background:#f2f2f2;
  }
  .tc-tile img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
  }
  .tc-tileTitle{
    position:absolute;
    left:14px;
    bottom:12px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(0,0,0,.55);
    color:#fff;
    font-weight:700;
    letter-spacing:.04em;
  }
/* Home tiles - borderless square */
.tc-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 80px auto;
    padding: 0 20px;
  }
  
  .tc-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1; /* 正方形 */
    text-decoration: none;
  }
  
  .tc-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 正方形PNGをそのまま */
  }
  
  /* ほんの気配だけのホバー（不要なら消してOK） */
  .tc-tile:hover {
    opacity: 0.85;
  }
  .tc-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    text-decoration: none;
    font-size: 0; /* ← 万一の文字を完全無効化 */
  }
  
  .tc-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
/* Products grid */
.tc-products-grid{
    display:grid;
    grid-template-columns: repeat(var(--tc-cols, 3), minmax(0, 1fr));
    gap: 26px;
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
  }
  @media (max-width: 900px){
    .tc-products-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 520px){
    .tc-products-grid{ grid-template-columns: 1fr; }
  }
  
  .tc-products-grid__item{
    display:block;
    text-decoration:none;
    color:inherit;
  }
  
  .tc-products-grid__thumb{
    width:100%;
    aspect-ratio: 1 / 1;   /* 正方形タイル */
    overflow:hidden;
  }
  
  .tc-products-grid__img{
    width:100%;
    height:100%;
    object-fit: cover;     /* 写真を正方形にトリミング */
    display:block;
  }
  
  .tc-products-grid__title{
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: .02em;
  }
  
  /* 画像が無い場合 */
  .tc-products-grid__noimg{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    border: 1px solid #e5e5e5;
    font-size: 12px;
    letter-spacing: .08em;
  }
  .tc-cat-sections{
    max-width:1100px;
    margin:60px auto;
    padding:0 20px;
  }
  
  .tc-cat-title{
    margin: 40px 0 14px;
    font-size: 18px;
    letter-spacing: .04em;
  }
  .tc-cat-tiles{
    display:grid;
    grid-template-columns: repeat(var(--tc-cols, 3), minmax(0, 1fr));
    gap: 26px;
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
  }
  
  @media (max-width: 900px){ .tc-cat-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 520px){ .tc-cat-tiles{ grid-template-columns: 1fr; } }
  
  .tc-cat-tiles__item{
    display:block;
    text-decoration:none;
    color:inherit;
  }
  
  .tc-cat-tiles__thumb{
    width:100%;
    aspect-ratio: 1 / 1;
    overflow:hidden;
  }
  
  .tc-cat-tiles__img{
    width:100%;
    height:100%;
    object-fit: contain; /* 正方形PNGをそのまま見せる */
    display:block;
  }
  
  .tc-cat-tiles__title{
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
  }
/* Category tiles (product_category) */
.tc-cat-tiles{
    display:grid;
    grid-template-columns: repeat(var(--tc-cols, 3), minmax(0, 1fr));
    gap: 26px;
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
  }
  @media (max-width: 900px){ .tc-cat-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 520px){ .tc-cat-tiles{ grid-template-columns: 1fr; } }
  
  .tc-cat-tiles__item{
    display:block;
    text-decoration:none;
    color:inherit;
  }
  
  .tc-cat-tiles__thumb{
    width:100%;
    aspect-ratio: 1 / 1;   /* ← これがないと画像枠が消えやすい */
    overflow:hidden;
  }
  
  .tc-cat-tiles__img{
    width:100%;
    height:100%;
    object-fit: contain;
    display:block;
  }
  
  .tc-cat-tiles__title{
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
  }
/* single product: fixed width, proportional height */
.tc-single img{
    width: 720px;     /* ← 横幅を固定（好みで変更） */
    max-width: 100%;  /* スマホ対応 */
    height: auto;     /* ← 縦は比率維持 */
    display: block;
    margin: 20px auto;
  }
/* single product: center content and match image width */
.tc-single{
    max-width: 720px;   /* ← 画像と同じ幅 */
    margin: 0 auto;
  }
  
  /* images inside product content */
  .tc-single img{
    width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
  }
/* タイル“専用” */
.tc-products-grid__thumb img{
    width: 100%;
    height: auto;
    display: block;
  }
  
/* 製品カード全体の幅を画像に合わせる */
.product-item,
.product-card {
  width: 720px;
  max-width: 100%;
  margin: 0 auto 48px;
}
.product-item h2,
.product-item h3,
.product-item p {
  text-align: left;
}
/* === Products grid (shortcode) === */
.tc-products-grid__thumb{
    aspect-ratio: 1 / 1;   /* 正方形に揃える（必要なら消してOK） */
    overflow: hidden;
    border-radius: 14px;
  }
  
  .tc-products-grid__thumb img.tc-products-grid__img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;     /* トリミングして揃える（トリミング嫌なら contain に） */
    display: block;
  }
/* Home: category tiles smaller */
.tc-cat-tiles{
    --tc-cols: 4;                 /* PCは4列にする（3→4で小さくなる） */
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
    gap: 18px;                    /* タイル間の隙間を少し詰める */
  }
  
  /* タイル自体のサイズ感 */
  .tc-cat-tiles__thumb{
    aspect-ratio: 1 / 1;          /* 正方形のまま */
  }
  
  /* タイトルも少し小さく */
  .tc-cat-tiles__title{
    font-size: 13px;
    margin-top: 8px;
  }
/* Home category tiles 強制調整 */
body.home .tc-cat-tiles{
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 1000px !important;
  }
  
  body.home .tc-cat-tiles__thumb{
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
  }
  
  body.home .tc-cat-tiles__img{
    max-width: 85% !important;
    max-height: 85% !important;
    margin: auto !important;
  }
/* ==========================
   製品カテゴリページのタイル調整
   ========================== */

   body.tax-product_category .tc-product-tiles{
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  
  /* 画像サイズ */
  body.tax-product_category .tc-product-tiles img{
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }
  
  /* タイトル */
  body.tax-product_category .tc-product-title{
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
  }
/* ==========================
   Home カテゴリタイル
   ========================== */

   body.home .tc-cat-tiles{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 60px auto;
  }
  
  body.home .tc-cat-tile{
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  
  body.home .tc-cat-tile img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  /* hover overlay */
  body.home .tc-cat-tile::after{
    content: attr(data-label);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 14px;
    letter-spacing: .12em;
    opacity: 0;
    transition: opacity .2s ease;
  }
  
  body.home .tc-cat-tile:hover::after{
    opacity: 1;
  }
  
  /* スマホ */
  @media (max-width: 768px){
    body.home .tc-cat-tiles{
      grid-template-columns: repeat(2, 1fr);
    }
  }
  body.home .tc-cat-tiles{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 60px auto;
    padding: 0 20px;
  }
  
  body.home .tc-cat-tile{
    position: relative;
    display:block;
    aspect-ratio: 1 / 1;
    overflow:hidden;
  }
  
  body.home .tc-cat-tile__img{
    width:100%;
    height:100%;
    object-fit:contain; /* イラストを切らない */
  }
  
  /* hover */
  body.home .tc-cat-tile::after{
    content: attr(data-label);
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(0,0,0,.55);
    color:#fff;
    font-size:14px;
    letter-spacing:.12em;
    opacity:0;
    transition: opacity .2s ease;
  }
  body.home .tc-cat-tile:hover::after{
    opacity:1;
  }
  
  @media (max-width: 768px){
    body.home .tc-cat-tiles{ grid-template-columns: repeat(2,1fr); }
  }
/* =========================
   FINAL: Tiles 5 columns on PC
   （このブロックはstyle.cssの末尾に追加）
========================= */

/* 1) Products / Posts 共通グリッド（.p-grid が3列なので5列に） */
@media (min-width: 1000px){
    .p-grid{
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
  }
  
  /* タブレット */
  @media (max-width: 999px) and (min-width: 561px){
    .p-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
  
  /* スマホ */
  @media (max-width: 560px){
    .p-grid{
      grid-template-columns: 1fr !important;
    }
  }
  
  /* 2) Home/トップのタイル（.tc-tiles が3列系/auto-fit系で揺れるのを5列固定に） */
  @media (min-width: 1000px){
    .tc-tiles{
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
  }
  
  /* 3) カテゴリタイル（.tc-cat-tiles：homeで5列にしたい場合も含めて統一） */
  @media (min-width: 1000px){
    .tc-cat-tiles{
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
  }
  
  @media (max-width: 768px){
    .tc-tiles,
    .tc-cat-tiles{
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
  @media (max-width: 520px){
    .tc-tiles,
    .tc-cat-tiles{
      grid-template-columns: 1fr !important;
    }
  }
/* ==========================
   Home カテゴリタイル hover 表示
   ========================== */

/* タイル全体 */
body.home .tc-cat-tile{
    position: relative;
    display: block;
    overflow: hidden;
  }
  
  /* 疑似要素でカテゴリ名を表示 */
  body.home .tc-cat-tile::after{
    content: attr(data-label); /* ← カテゴリ名 */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: 14px;
    letter-spacing: .08em;
    opacity: 0;
    transition: opacity .2s ease;
  }
  
  /* hoverで表示 */
  body.home .tc-cat-tile:hover::after{
    opacity: 1;
  }
/* ===== 製品個別ページ：本文画像を小さく（左寄せ） ===== */
.single-product .tc-single .wp-block-image img{
    width: 100%;
    max-width: 520px;   /* 好みで 520 / 600 / 680 など */
    height: auto;
    display: block;
    margin: 0;          /* ← 左寄せ（中央寄せを解除） */
  }
  /* Blogページ左の説明文（見出し直下のp） */
.blog main > p:first-of-type{
    display: none;
  }
  
  /* カレンダー下の注意書き */
  .blog aside p{
    display: none;
  }
/* ===== Blogページ：ページタイトル「Blog」を小さく ===== */
.blog h1{
    font-size: 20px;   /* 今よりかなり控えめ */
    font-weight: 600;
    margin-bottom: 20px;
  }
/* ===== Blog一覧：記事タイトルを小さく ===== */
.blog .post-title,
.blog h2{
  font-size: 20px;   /* ちょうど読みやすいサイズ */
  font-weight: 600;
  line-height: 1.4;
}
/* ===== Blog：右カレンダーの幅を少し狭める ===== */
.blog .tc-calendar,
.blog aside .tc-calendar{
  width: 260px;   /* 例：今より少し細く */
}
/* ===== Blog 2カラム：右(カレンダー)を細くして左(記事)を広げる ===== */
.blog .blog-wrap{
    max-width: 1100px;     /* すでに同等設定があれば不要 */
    margin: 60px auto;
    padding: 0 20px;
    display: flex;
    align-items: flex-start;
    gap: 40px;             /* 2カラムの間隔 */
  }
  
  /* 左(記事)は残り全部を使う */
  .blog .blog-main{
    flex: 1 1 auto;
    min-width: 0;          /* はみ出し防止 */
  }
  
  /* 右(カレンダー)は固定幅で細くする */
  .blog .blog-side{
    flex: 0 0 320px;       /* ←ここが幅。300〜340で調整 */
  }
  
  /* カレンダー本体も右幅に追従 */
  .blog .blog-cal{
    width: 100%;
    box-sizing: border-box;
  }

/* 2カラムを強制 */
body.blog main.blog-wrap{
  display: flex !important;
  align-items: flex-start !important;
  gap: 40px !important;
}

/* 右(カレンダー)を固定幅に強制 */
body.blog main.blog-wrap > .blog-side{
  flex: 0 0 260px !important;   /* ←ここで幅が変わるはず */
}

/* 左(記事)を残りに強制 */
body.blog main.blog-wrap > .blog-main{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* カレンダー自身も追従 */
body.blog .blog-cal{ width: 100% !important; box-sizing: border-box !important; }
/* ===== Blog 2カラム最終レイアウト ===== */

body.blog main.blog-wrap{
    display: flex;
    align-items: flex-start;
    gap: 40px; /* 左右の余白 */
  }
  
  /* 左：記事エリア */
  body.blog .blog-main{
    flex: 1 1 auto;
    min-width: 0;
  }
  
  /* 右：サイド（ラッパーは幅を持たせない） */
  body.blog .blog-side{
    flex: 0 0 auto;
  }
  
  /* 右：実体のカレンダー幅をここで制御 */
  body.blog .blog-cal{
    width: 280px;      /* ← 好きな幅に調整（280〜320pxあたり） */
    max-width: 100%;
    box-sizing: border-box;
  }
/* 右カラムの幅を強制（これが一番効きます） */
.blog-wrap{
    display:flex;
    align-items:flex-start;
    gap:40px;
  }
  
  .blog-main{
    flex:1 1 auto;
    min-width:0;
  }
  
  .blog-side{
    flex:0 0 280px !important;  /* ← ここが右カラム幅 */
    width:280px !important;
  }
  
  /* カレンダー本体は親幅に追従 */
  .blog-side .blog-cal{
    width:100% !important;
    box-sizing:border-box;
  }
 /* Blog 全体を2カラム flex に */
body.blog main.blog-wrap{
    display: flex;
    align-items: flex-start;
    gap: 40px;
  }
  
/* 2カラム（親） */
body.blog main.blog-wrap{
    display:flex !important;
    align-items:flex-start;
    gap: 40px;
  }
  
/* 右カラムを200固定（確実に勝つセレクタ） */
body.blog main.blog-wrap > .blog-side{
    flex: 0 0 200px !important;
    width: 200px !important;
    max-width: 200px !important;
  }
  
  /* カレンダー自体も右カラム幅に追従 */
  body.blog .blog-side .blog-cal{
    width: 100% !important;
    box-sizing: border-box;
  }
  
  /* グリッドを「7列×可変幅」にして、はみ出しを止める */
  body.blog .blog-side .blog-cal-grid{
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  
  /* 日付セルを固定幅にしない（幅は列に合わせる） */
  body.blog .blog-side .blog-cal-cell{
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1;
/* =========================
   Blog: FINAL OVERRIDE (append at end)
   ========================= */

/* 1) 2カラム：左を可変、右を固定200 */
body.blog main.blog-wrap{
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;                 /* 40だと左が増えにくいので少し詰める */
  }
  
  body.blog main.blog-wrap > .blog-main{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;           /* 左が広がらない保険 */
  }
  
  body.blog main.blog-wrap > .blog-side{
    flex: 0 0 200px !important;
    width: 200px !important;
    max-width: 200px !important;
  }
  
  /* 2) カレンダー箱は親(200px)に100%追従 */
  body.blog .blog-side .blog-cal{
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px !important;             /* 200pxではpadding 14が重いので少し減らす */
  }
  
  /* 3) 7列グリッドを200pxでも破綻させない */
  body.blog .blog-side .blog-cal-grid{
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px !important;                  /* 8px→4pxに */
  }
  
  /* セルは固定heightをやめて正方形に（狭い幅でも崩れない） */
  body.blog .blog-side .blog-cal-cell{
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    min-width: 0 !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }
  
  /* 4) 左の記事枠が「どこかでmax-width固定」されている可能性があるので解除（安全側） */
  body.blog .blog-main *{
    max-width: none;
  }
/* === DEBUG: if you see this, CSS is loading === */
body.blog { outline: 8px solid lime !important; }