.elementor-1421 .elementor-element.elementor-element-9234224{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1421 .elementor-element.elementor-element-cfd9eda{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:60px;--margin-left:0px;--margin-right:0px;}.elementor-1421 .elementor-element.elementor-element-1ed645a{--display:flex;}.elementor-1421 .elementor-element.elementor-element-8db07ee > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-radius:10px 10px 10px 10px;}.elementor-1421 .elementor-element.elementor-element-e952f75{--display:flex;}.elementor-1421 .elementor-element.elementor-element-53dc1ee{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--border-radius:10px 10px 10px 10px;--padding-top:5px;--padding-bottom:5px;--padding-left:10px;--padding-right:10px;}.elementor-1421 .elementor-element.elementor-element-f18a9e9{--display:flex;}.elementor-1421 .elementor-element.elementor-element-b8532c3{width:auto;max-width:auto;}.elementor-1421 .elementor-element.elementor-element-3126fcf{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:10px 20px;--row-gap:10px;--column-gap:20px;}.elementor-1421 .elementor-element.elementor-element-e4dbfae{width:auto;max-width:auto;}.elementor-1421 .elementor-element.elementor-element-12404ad .wd-products-with-bg, .elementor-1421 .elementor-element.elementor-element-12404ad .wd-products-with-bg :is(.wd-product,.wd-cat){--wd-prod-bg:#FFFFFF;--wd-bordered-bg:#FFFFFF;}@media(max-width:1024px){.elementor-1421 .elementor-element.elementor-element-20dbc71 > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-1421 .elementor-element.elementor-element-cfd9eda{--margin-top:0px;--margin-bottom:40px;--margin-left:0px;--margin-right:0px;}.elementor-1421 .elementor-element.elementor-element-53dc1ee{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1421 .elementor-element.elementor-element-3126fcf{--justify-content:space-between;}.elementor-1421 .elementor-element.elementor-element-f570c0f{width:auto;max-width:auto;}}@media(max-width:768px){.elementor-1421 .elementor-element.elementor-element-20dbc71 > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-1421 .elementor-element.elementor-element-cfd9eda{--margin-top:0px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;}}@media(min-width:769px){.elementor-1421 .elementor-element.elementor-element-1ed645a{--width:25%;}.elementor-1421 .elementor-element.elementor-element-e952f75{--width:75%;}.elementor-1421 .elementor-element.elementor-element-f18a9e9{--width:34%;}.elementor-1421 .elementor-element.elementor-element-3126fcf{--width:66%;}}@media(max-width:1024px) and (min-width:769px){.elementor-1421 .elementor-element.elementor-element-e952f75{--width:100%;}.elementor-1421 .elementor-element.elementor-element-f18a9e9{--width:100%;}.elementor-1421 .elementor-element.elementor-element-3126fcf{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-9234224 *//* =========================================================
   IRODOLL – .iro-cat-pickup 最適化版
   - 最大幅1400px・中央寄せ
   - 見出し: <span class="iro-catname">…</span><span class="iro-caption">…</span>
   - スマホ: バッジは見出し内側（必要時は少し外へ逃がす）
   - PC/タブレット: バッジは見出し外側
========================================================= */

/* ---------- 外枠・背景＆角丸 ---------- */
.elementor-section.iro-cat-pickup,
.e-con.iro-cat-pickup{
  --pickup-strong: rgba(90,178,255,.55);
  --pickup-light:  rgba(214,236,255,.35);
  --pickup-shadow: rgba(66,133,244,.12);
  --pickup-radius: 12px;

  position: relative;
  isolation: isolate;
  border-radius: var(--pickup-radius);
  box-shadow: 0 8px 22px var(--pickup-shadow);
  background: transparent;
  overflow: hidden;                                        /* 擬似要素も含めてクリップ */
  -webkit-mask-image: -webkit-radial-gradient(#000,#000);  /* Safari にじみ対策 */
}
.elementor-section.iro-cat-pickup::before,
.e-con.iro-cat-pickup::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius: inherit;
  background: linear-gradient(135deg,var(--pickup-strong) 0 55%,var(--pickup-light) 55%);
}
.elementor-section.iro-cat-pickup::after,
.e-con.iro-cat-pickup::after{
  content:"";
  position:absolute; inset:-22% -12% auto -12%; height:62%;
  z-index:0; pointer-events:none; border-radius: inherit;
  background: linear-gradient(135deg,rgba(255,255,255,.70),rgba(255,255,255,0));
  transform: skewY(-8deg); filter: blur(6px);
}

/* ---------- 内側ラッパ ---------- */
.iro-cat-pickup > :is(.elementor-container,.e-con-inner){
  position: relative; z-index: 1;
  max-width: 1400px; margin: 0 auto; padding: 20px 16px;
}

/* ===================== 見出し ===================== */
.iro-cat-pickup .h2-box{
  --accent: #3b82f6;
  --badge-size: 40px;      /* バッジ直径 */
  --badge-gap:  12px;      /* バッジと文字の最小距離 */
  --badge-nudge: 0px;      /* スマホで“少し外へ”逃がす量（+で外へ） */
  --text-pad: 6px;         /* 文字の左右最小パディング */

  display:flex !important; justify-content:center; align-items:center;
  padding:10px 16px; margin-bottom:12px;
  background:linear-gradient(90deg,#EAF4FF,#FFF);
  border-radius:8px;
  box-shadow:0 1px 0 rgba(0,0,0,.03) inset, 0 4px 14px rgba(59,130,246,.08);
}
.iro-cat-pickup .h2-box > :is(.elementor-container,.e-con-inner){
  display:flex !important; align-items:center; justify-content:center; width:100%;
}

/* 2行レイアウト（行間5px固定／スマホはバッジ分の余白を確保） */
.iro-cat-pickup .h2-box h2.elementor-heading-title{
  position:relative; display:flex !important; flex-direction:column;
  align-items:center; justify-content:center; gap:5px !important;
  margin:0 !important; line-height:1 !important; text-align:center;
  white-space:normal !important;
  /* 予約幅 = バッジ − 外逃がし量（マイナスは 0 とみなす） */
  --reserve: max(0px, calc(var(--badge-size) - var(--badge-nudge)));
  padding-inline: calc(var(--reserve) + var(--badge-gap) + var(--text-pad));
}
.iro-cat-pickup .h2-box h2.elementor-heading-title br{ display:none !important; }

/* 上段：カテゴリ名（小さめ） */
.iro-cat-pickup .h2-box h2 .iro-catname{
  display:block !important; margin:0 !important;
  font-weight:700; font-size:clamp(12px,1.05vw,15px); line-height:1.1;
}

/* 下段：任意文言（大きめ・原則折り返さない） */
.iro-cat-pickup .h2-box h2 .iro-caption,
.iro-cat-pickup .h2-box h2 > span:not(.iro-catname){
  display:block !important; margin:0 !important;
  font-weight:800; font-size:clamp(18px,2.4vw,28px); line-height:1.1;
  white-space: nowrap; text-wrap: nowrap; word-break: keep-all;
}

/* 左右バッジ（基本＝見出し内側） */
.iro-cat-pickup .h2-box h2.elementor-heading-title::before,
.iro-cat-pickup .h2-box h2.elementor-heading-title::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:var(--badge-size); height:var(--badge-size);
  display:flex; align-items:center; justify-content:center;
  font:700 12px/1 system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  border-radius:50%;
  background:color-mix(in srgb, var(--accent) 18%, #fff);
  color:#1d4ed8; box-shadow:0 2px 6px rgba(59,130,246,.12);
  pointer-events:none; animation:iro-dokidoki 2s ease-out infinite;
  transform-origin:center; will-change:transform;
}
.iro-cat-pickup .h2-box h2.elementor-heading-title::before{ content:"NEW";  left:  calc(var(--badge-gap) - var(--badge-nudge)); }
.iro-cat-pickup .h2-box h2.elementor-heading-title::after { content:"PICK"; right: calc(var(--badge-gap) - var(--badge-nudge)); }

/* PC/タブレット：バッジを完全に外側へ（gap 分も外へ） */
@media (min-width: 768px){
  .iro-cat-pickup .h2-box h2.elementor-heading-title{ padding-inline: 0; }
  .iro-cat-pickup .h2-box h2.elementor-heading-title::before{
    left:  calc(-1 * (var(--badge-size) + var(--badge-gap)));
  }
  .iro-cat-pickup .h2-box h2.elementor-heading-title::after{
    right: calc(-1 * (var(--badge-size) + var(--badge-gap)));
  }
}

/* スマホ：折り返し抑制（フォント少し縮小＋外逃がし強化） */
@media (max-width: 540px){
  .iro-cat-pickup .h2-box{
    --badge-size: 34px; --badge-gap: 12px; --badge-nudge: 14px;
  }
  .iro-cat-pickup .h2-box h2.elementor-heading-title{
    gap:4px !important;
    /* .iro-caption を使っていない場合のフォールバック縮小 */
    font-size: clamp(18px, 5.2vw, 22px);
  }
  .iro-cat-pickup .h2-box h2 .iro-catname{  font-size: clamp(12px, 2.8vw, 14px); }
  .iro-cat-pickup .h2-box h2 .iro-caption{ font-size: clamp(17px, 5vw, 22px); letter-spacing:.01em; }
}
@media (max-width: 400px){
  .iro-cat-pickup .h2-box{
    --badge-size: 30px; --badge-gap: 10px; --badge-nudge: 18px;
  }
  .iro-cat-pickup .h2-box h2.elementor-heading-title{
    font-size: clamp(17px, 5.6vw, 21px);  /* フォールバック用 */
  }
  .iro-cat-pickup .h2-box h2 .iro-caption{ font-size: clamp(16px, 5.4vw, 20px); }
}

/* 心拍アニメ（translateY を含めて固定） */
@keyframes iro-dokidoki{
  0%,40%,100%{ transform: translateY(-50%) scale(1); }
  20%       { transform: translateY(-50%) scale(0.9); }
}

/* ===================== WoodMart 商品サムネ比率固定 ===================== */
.iro-cat-pickup{
  --thumb-w: 2;   /* 2:3 の比率 */
  --thumb-h: 3;
  --thumb-padding: calc(var(--thumb-h) / var(--thumb-w) * 100%); /* Fallback */
}
.iro-cat-pickup .product-grid-item .product-element-top .product-image-link{
  position:relative; display:block; aspect-ratio: var(--thumb-w) / var(--thumb-h);
  overflow:hidden; border-radius:12px;
}
@supports not (aspect-ratio: 1 / 1){
  .iro-cat-pickup .product-grid-item .product-element-top .product-image-link::before{
    content:""; display:block; padding-top:var(--thumb-padding);
  }
  .iro-cat-pickup .product-grid-item .product-element-top .product-image-link > *,
  .iro-cat-pickup .product-grid-item .product-element-top .hover-img{ position:absolute; inset:0; }
}
.iro-cat-pickup .product-grid-item .product-element-top .product-image-link img,
.iro-cat-pickup .product-grid-item .product-element-top .hover-img img{
  width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block;
}
.iro-cat-pickup .product-grid-item .product-element-top .hover-img{
  position:absolute; inset:0; pointer-events:none;
}

/* カルーセルの左右余白を詰める */
.iro-cat-pickup .wd-carousel-container,
.iro-cat-pickup .wd-carousel-inner{ padding-left:0; padding-right:0; }
.iro-cat-pickup .wd-carousel{ margin-bottom:8px; }/* End custom CSS */
/* Start custom CSS for wd_archive_products, class: .elementor-element-12404ad */.wd-product:not(.wd-hover-small) :is(.product-image-link,.hover-img) img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}/* End custom CSS */