/******************************
  10/16  Cleaned (Mobile compact)
******************************/
:root{
  --c-text:#000; --c-muted:#909090; --c-border:#e0e0e0;
  --c-elev:rgba(0,0,0,.15); --c-elev-strong:rgba(0,0,0,.25);
  --c-brand-line:#00c300; --z-modal:10000;

  /* 横スクロール（既定=モバイル） */
  --card-box: 78vw;
  --card-pad: 16px;
  --img-size: calc(var(--card-box) - 2*var(--card-pad));

  /* 共通タイトル（おすすめ等） */
  --title-lines: 2;
  --title-line-height: 1.35;
  --title-font-size: 14px;
  --title-height: calc(var(--title-lines) * var(--title-font-size) * var(--title-line-height));
  --price-height: 20px;
}

/* PC（≥1031px） */
@media (min-width:1031px){
  :root{ --card-box:260px; --card-pad:35px; --img-size:calc(260px - 70px); }
  .u-container{ max-width:1030px; padding-inline:15px; }
}

/* タブレット（768–1030px） */
@media (min-width:768px) and (max-width:1030px){
  :root{
    --card-box: calc((100vw - 40px)/4 + 10px);
    --card-pad: 20px;
    --img-size: calc(((100vw - 40px)/4 + 10px) - 40px);
  }
  .u-container{ max-width:none; padding-inline:20px; }
}

/* 汎用コンテナ */
.u-container{ max-width:1030px; margin-inline:auto; padding-inline:12px; box-sizing:border-box; }

/* ===============================
   HERO（左右独立＋中央帯）
=============================== */
.p-hero{ margin:0 auto; }
.p-hero-row{
  display:grid;
  grid-template-columns:200px 1fr 200px;
  gap:20px;
  align-items:stretch;
  width:100%;
  max-width:1030px;
  margin:0 auto;
  height:260px;
}
.p-hero-side,
.p-hero-center{ height:100%; }

.p-hero-side{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; background:#fff; border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  text-decoration:none; color:#333; padding:14px; transition:transform .2s, box-shadow .2s;
  box-sizing:border-box;
}
.p-hero-side:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,0.18); }
.p-hero-side__img{ max-width:100%; height:120px; object-fit:contain; display:block; }
.p-hero-side__label{ margin-top:10px; font-size:14px; font-weight:600; }

.p-hero-center{
  border-radius:12px; overflow:hidden;
  background:#fff6dd; box-shadow:0 10px 26px rgba(0,0,0,0.18);
  display:flex; align-items:center; justify-content:center;
}
.p-hero-center__img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 右：LINE強調（任意） */
.p-hero-side--line{ border:2px solid color-mix(in oklab, var(--c-brand-line) 85%, white); }
.p-hero-side--line .p-hero-side__label{ color:#0a8a0a; }

/* ===============================
   カテゴリ
=============================== */
.c-ttl-main{ text-align:center; margin:12px 0; }
.p-category{ margin-block-start:0; }
.p-category-list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  list-style:none; padding:0; margin:8px 0 0;
}
.p-category-list__img img{ display:block; width:100%; height:100%; object-fit:cover; }
.p-category-list__ttl{
  background:transparent !important; padding:0 !important; margin:8px 0 0 !important;
  text-align:center; color:#222; font-weight:600; font-size:15px;
}

/* ===============================
   NEWS（カード風）
=============================== */
.p-line-information{
  inline-size:auto;
  max-width:1030px;
  margin:60px auto 0;
  text-align:center;
  background:#fff;
  border:1px solid #e6dfcf;
  border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  padding:22px 20px 18px;
}
.p-line-information__ttl{
  font-family:"Noto Serif JP","Hiragino Mincho ProN",serif;
  font-size:clamp(28px,4.5vw,48px)!important;
  line-height:1.1;
  letter-spacing:.06em;
  font-weight:800;
  margin:0 0 18px;
  position:relative;
}
.p-line-information__ttl::after{
  content:"";
  display:block;
  width:72px; height:2px;
  margin:14px auto 0;
  background:#222; opacity:.25; border-radius:2px;
}
.p-line-information__list{
  list-style:none; padding:0; margin:8px auto 0; text-align:left;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
  gap:16px 24px; align-items:start; max-width:100%;
}
.p-line-information__list>li{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  font-size:18px; line-height:1.8; letter-spacing:.015em;
  padding:10px 0; border-bottom:1px dashed var(--c-border);
}
.p-line-information__list>li:last-child{ border-bottom:none; }
.p-line-information a{
  color:#222;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:.08em;
  text-decoration-color:#bbb; transition:color .15s ease, text-decoration-color .15s ease, opacity .15s ease;
}
.p-line-information a:hover{ color:#000; text-decoration-color:#888; opacity:.92; }

/* ===============================
   スマホ（<=767px）
=============================== */
@media (max-width:767px){
  .u-container{ padding-inline:10px; }

  /* HERO レイアウト縮小 */
  .p-hero-row{
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap:10px; height:auto; align-items:stretch;
  }
  .p-hero-row > :nth-child(2){
    grid-column: 1 / -1; grid-row: 1;
    height: 180px; padding: 0; border-radius: 12px; overflow: hidden; box-sizing: border-box;
  }
  .p-hero-row > :nth-child(1),
  .p-hero-row > :nth-child(3){
    grid-row: 2; height: 90px; border-radius: 12px;
    display:flex; align-items:center; justify-content:center; padding: 6px; box-sizing:border-box;
  }
  .p-hero-side__label{ display:none !important; }
  .p-hero-side__img{ height:100px; max-width:200px; object-fit:contain; display:block; }

  /* カテゴリ（スマホは詰め気味） */
  :root{
    --cat-lines: 3;
    --cat-font-size: 13px;
    --cat-line-height: 1.35;
    --cat-title-height: calc(var(--cat-lines) * var(--cat-font-size) * var(--cat-line-height));
  }
  .c-ttl-main{ margin:10px 0 6px; }             /* ↓ 余白微縮小 */
  .p-category-list{ grid-template-columns:repeat(3,1fr); gap:10px; margin:6px 0 0; }
  .p-category-list__ttl{
    font-size: var(--cat-font-size);
    line-height: var(--cat-line-height);
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: var(--cat-lines); overflow:hidden;
    min-height: var(--cat-title-height);
    margin:6px 6px !important;
  }

  /* 横スクロールカード基準（モバイル既定） */
  :root{ --card-box:65vw; --card-pad:10px; --img-size: calc(65vw - 20px); }
  .c-item-list__ttl span{ font-size:13px; }
  .c-item-list__price{ fontサイズ:12px; }

  /* ▼ NEWS：スマホ時の余白とパディングをさらに圧縮 */
  .p-line-information{
    max-width:95%;
    margin:6px auto 0;
    padding:8px 10px 8px;
  }
  .p-line-information__ttl{
    font-size:clamp(20px,6vw,24px)!important;
    margin-bottom:6px;
  }
  .p-line-information__list{ grid-template-columns:1fr; gap:8px; }
  .p-line-information__list>li{ font-size:14px; line-height:1.7; padding:6px 0; }
}

/* ===============================
   横スクロール（おすすめ／新着／ランキング）
=============================== */
.c-item-list, .p-ranking-list{ list-style:none; padding:0; margin:0; }
.h-scroll{
  display:grid; grid-auto-flow:column; grid-auto-columns: var(--card-box);
  gap:0; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  touch-action: pan-x; overscroll-behavior-x: contain;
  padding-bottom:1px; margin-bottom:0;
}
@supports (scrollbar-gutter: stable) { .h-scroll{ scrollbar-gutter: stable both-edges; } }
.h-scroll::-webkit-scrollbar{ height:10px; }
.h-scroll::-webkit-scrollbar-thumb{ border-radius:10px; background: rgba(0,0,0,.25); }
.h-scroll::-webkit-scrollbar-track{ background: rgba(0,0,0,.06); }
.h-scroll > *{ scroll-snap-align:start; }

.c-item-card, .p-ranking-card{
  display:block; inline-size: var(--card-box); box-sizing:border-box;
  padding: var(--card-pad); border:1px solid #eee; border-radius:12px; background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.12); text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; margin:0;
}
.c-item-card:hover, .p-ranking-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.2); border-color:#e6e6e6; }
.c-item-list__img, .p-ranking-list__img{ width: var(--img-size); height: var(--img-size); margin-inline:auto; border-radius:10px; overflow:hidden; background:#fafafa; }
.c-item-list__img img, .p-ranking-list__img img{ inline-size:100%; block-size:100%; object-fit:cover; display:block; }
.c-item-list__txt{ margin-top:10px; min-height: calc(var(--title-height) + var(--price-height)); text-align:center; }
.c-item-list__ttl span{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: var(--title-lines); overflow:hidden;
  font-size: var(--title-font-size); line-height: var(--title-line-height); font-weight:600; color:#222;
}
.c-item-list__price{ font-size:13px; color:#222; margin-top:6px; min-height: var(--price-height); }
.c-item-list__price.is-discount{ color:#d81b60; font-weight:700; }
.c-item-list__price.is-strikethrough{ color:#909090; text-decoration:line-through; }
.c-item-list__price.is-soldout{ color:#909090; font-weight:700; }

/* 左右ボタン */
.hscroll-wrap{ position:relative; }
.hscroll-btn{
  position:absolute; top:50%; translate:0 -50%;
  width:40px; height:40px; border-radius:50%;
  border:1px solid #ddd; background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  display:grid; place-items:center;
  cursor:pointer; user-select:none;
  transition:transform .15s, box-shadow .15s, opacity .15s;
  z-index:2;
}
.hscroll-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.22); }
.hscroll-btn:disabled{ opacity:.35; cursor:default; box-shadow:none; }
.hscroll-btn--prev{ left:-18px; }
.hscroll-btn--next{ right:-18px; }
.hscroll-btn svg{ width:18px; height:18px; }
@media (max-width:767px){ .hscroll-btn{ display:none; } }

/* ===============================
   モーダル（LINEフォールバック）
=============================== */
.c-modal[hidden]{ display:none !important; }
.c-modal{ position:fixed; inset:0; z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); padding:20px; box-sizing:border-box; }
.c-modal__panel{ width:min(92vw,720px); max-height:92vh; background:#fff; border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.35); overflow:hidden; }
.c-modal__hd{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--c-border); }
.c-modal__title{ font-size:16px; font-weight:700; }
.c-modal__close{ appearance:none; cursor:pointer; border:1px solid #ddd; background:#f7f7f7; color:#333; border-radius:8px; padding:6px 10px; line-height:1; }
.c-modal__bd{ padding:16px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.c-modal__qr{ display:block; width: clamp(220px, 60vw, 520px); max-height:70vh; height:auto; object-fit:contain; }
.c-modal__btn{ display:inline-block; padding:10px 16px; background:var(--c-brand-line); color:#fff; text-decoration:none; font-weight:700; }

/* ===============================
   ヒーロースライダー左右の飾り画像
=============================== */
.u-container > .slider{ position: relative; overflow: visible; }
.u-container > .slider::before,
.u-container > .slider::after{
  content:""; position:absolute; top:50px;
  width:550px; height:800px; background-repeat:no-repeat; background-position:center; background-size:contain;
  opacity:.95; pointer-events:none; z-index:0;
}
.u-container > .slider::before{
  left:-650px;
  background-image:url("https://img21.shop-pro.jp/PA01519/171/etc_base64/uril0KXKobw.png?cmsp_timestamp=20251006173032");
}
.u-container > .slider::after{
  right:-650px;
  background-image:url("https://img21.shop-pro.jp/PA01519/171/etc_base64/paqhvKXXpfOl0KXKobw.png?cmsp_timestamp=20251006164151");
}
@media (max-width:767px){
  .u-container > .slider::before,
  .u-container > .slider::after{ display:none; }
}

/* ===============================
   カテゴリ：枠削除＋影は画像側へ
=============================== */
.p-category-list__item > a.u-img-scale{
  background:transparent !important; border:none !important; padding:0 !important;
  box-shadow:none !important; border-radius:0 !important; overflow:visible !important;
}
.p-category-list__item > a.u-img-scale::before,
.p-category-list__item > a.u-img-scale::after{ content:none !important; }
.p-category-list__img{
  border-radius:14px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  transition: box-shadow .18s ease, transform .18s ease;
}
.p-category-list__item > a.u-img-scale:hover .p-category-list__img{
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}

/* ===============================
   モバイルだけ：おすすめ/新着/ランキングのカードを小さめに
=============================== */
@media (max-width:767px){
  .p-recommend, .p-new-item, .p-ranking{
    --card-box: 56vw;
    --card-pad: 8px;
    --img-size: calc(var(--card-box) - 2 * var(--card-pad));
  }
  .p-recommend .c-item-list__ttl span,
  .p-new-item  .c-item-list__ttl span{ font-size:12px; line-height:1.35; }
  .p-recommend .c-item-list__price,
  .p-new-item  .c-item-list__price{ font-size:11px; }
  .p-ranking .p-ranking-list__ttl span{ font-size:12px; line-height:1.35; }
  .p-ranking .p-ranking-list__price{ font-size:11px; }
}

/* ===============================
   NEWS：fallback（1件のみ時）2段組（PC/タブレットのみ）
=============================== */
@media (min-width:768px){
  .p-line-information__list > li:only-child{
    column-width:340px; column-gap:40px; column-fill:balance;
    padding:0; border-bottom:none;
  }
  .p-line-information__list > li:only-child br{ line-height:1.2; }
}