@charset "Shift_JIS";
/* =========================================================
   cute stone PC base styles
   - 保存文字コード: Shift-JIS（Color Me想定）
   - 既存の見た目/挙動を維持しつつ、漏れを整理（header-nav→modal）
   ========================================================= */

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
}
   
/* ========== CSS変数 / トークン ========== */
:root{
  --color-primary:#392011;
  --color-accent:#C6A15B;
  --color-bg:#FBF7F0;
  --color-border:#E7E1D6;
  --color-text:#2B1A0D;
  --color-text-weak:#6B5A4A;
  --grad-top:#F5EADB;
  --grad-btm:#E7D4AF;
  --pill-border:rgba(57,32,17,.18);
  --container:1060px; /* 調整: PC全体を約15%引き締め */

  /* 検索UI用（既存色へブリッジ） */
  --pill-top:#FBF7F0;
  --pill-btm:#EAD8B7;
  --text:var(--color-primary);
}

/*フォント類*/

.b {font-weight:bold;}

/* PCでは br.pc は改行しない */
br.pc{
  display:none;
}

/* スマホだけ br.pc を有効化 */
@media (max-width:980px){
  br.pc{
    display:block;
  }
}


/* =========================================
   共通見出し（セクションタイトル）
========================================= */
:root{
  --h2-icon: 18px;
}

h2.heading{
  position:relative;
  text-align:center;
  font-size:var(--fs-xl);
  margin:0 0 var(--space-2);
  letter-spacing:.02em;
  color:var(--color-primary);
  margin-bottom:30px;
}

h2.heading > span{
  display:inline-flex;
  gap:8px;
}

/* 百合アイコン */
h2.heading > span::before,
h2.heading > span::after{
  content:"";
  flex:0 0 var(--h2-icon);
  width:var(--h2-icon);
  height:var(--h2-icon);
  background:url("https://file002.shop-pro.jp/PA01356/160/img/logo/h2_icon.png") no-repeat center / contain;
}

/* ========== Base ========== */
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:system-ui,-apple-system,"Meiryo","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  font-size:15px; /* 調整: PC体感だけ少し引き締め */
  line-height:1.6; /* 補足: 可読性維持のため行間はやや確保 */
}
.container{max-width:var(--container);margin-inline:auto;padding-inline:12px;}

/* ========== Header ========== */
.header{
  background:linear-gradient(to bottom,#FFF7EC,#F0E4D2);
  border-bottom:1px solid var(--color-border);
  position:sticky;
  top:0;
  z-index:100;
  transition:transform .35s ease;
}

.header .container{
  max-width:var(--container);
  margin:0 auto;
  padding:8px 12px;
}

.header-top{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
}

/* ロゴ */
.header .logo a{
  display:inline-block;
  line-height:0;
  border-radius:6px;
  transition:
    opacity .22s ease,
    transform .22s ease,
    filter .22s ease;
}

.header .logo img{
  height:42px;
  object-fit:contain;
  width:auto;
  display:block;
}

.header .logo a:hover{
  opacity:.88;
  transform:translateY(-1px);
  filter:brightness(1.02);
}

/* 右上ユーティリティ */
.header-util{
  display:flex;
  gap:12px;
  align-items:center;
}

.header-util a{
  color:var(--color-text);
  text-decoration:none;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:14px;
  border-radius:10px;
  transition:
    color .22s ease,
    background-color .22s ease,
    transform .22s ease,
    box-shadow .22s ease,
    opacity .22s ease;
}

.header-util .icon,
.header-nav .icon{
  width:16px;
  height:16px;
  flex:0 0 auto;
  color:#392011;
  opacity:.9;
  transition:
    color .22s ease,
    opacity .22s ease;
}

.header-util a:hover{
  color:#6f4510;
  transform:translateY(-1px);
  opacity:.96;
}

.header-util a:hover .icon{
  color:#6f4510;
  opacity:1;
}

.header-util .pill{
  background:linear-gradient(to bottom,var(--grad-top),var(--grad-btm));
  border:1px solid var(--pill-border);
  min-width:48px;
  height:38px;
  padding:0 12px;
  border-radius:14px;
  gap:6px;
  font-weight:700;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset;
}

.header-util .pill:hover{
  background:linear-gradient(to bottom,#fbf2e3,#e5c98f);
  color:#5f3a12;
  box-shadow:
    0 1px 0 rgba(255,255,255,.32) inset,
    0 4px 10px rgba(57,32,17,.10);
}

.cart-pill{
  position:relative;
}

.cart-count{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#b22222;
  color:#fff;

  font-size:11px;
  font-weight:700;
  line-height:1;
}

.header-util .pill:hover .icon{
  color:#5f3a12;
}

/* 下段ナビ */
.header-nav{
  margin-top:6px;
  background:#F4EBDD;
  border:1px solid var(--color-border);
  border-radius:10px;
}

.header-nav .row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
  padding:5px;
}

/* ★ ヘッダーボタン装飾は .row 直下のリンクに限定 */
.header-nav .row > a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  height:36px;
  text-decoration:none;
  color:var(--color-text);
  font-weight:700;
  font-size:14px;
  background:linear-gradient(to bottom,#FCF9F2,#ECDDBF);
  border:1px solid var(--color-border);
  border-radius:8px;
  transition:
    background .22s ease,
    color .22s ease,
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.header-nav .row > a:hover{
  background:linear-gradient(to bottom,#fffdf8,#e8d1a1);
  color:#6f4510;
  border-color:#dbc8aa;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(57,32,17,.08);
}

.header-nav .row > a:hover .icon{
  color:#6f4510;
  opacity:1;
}

/* ========== 検索ブロック ========== */
.search-section{
  position:relative;
  background:linear-gradient(to bottom,var(--grad-top),var(--grad-btm));
}

.search-grid{
  display:grid;
  align-items:center;
  gap:14px;
  grid-template-columns:255px minmax(0,1fr) 96px;
  padding-block:10px 14px;
}

.ctrl-h{
  height:34px;
}

/* select */
.search-select{
  width:100%;
  padding:0 10px;
  border:1.5px solid #fff;
  border-radius:10px;
  background:#fff;
  color:#2B1A0D;
  font-size:14px;
  height:34px;
  line-height:1.2;
  -webkit-appearance:none;
  appearance:none;
  background-color:#fff;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23392011" d="M1 1l5 5 5-5"/></svg>');
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px 8px;
  padding-right:32px;
  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    transform .22s ease;
}

.search-select::-ms-expand{
  display:none;
}

.search-select:hover{
  background-color:#fffdfa;
  border-color:#ead8b7;
  box-shadow:0 4px 10px rgba(57,32,17,.07);
}

.search-select:focus{
  outline:none;
  border-color:#c6a15b;
  box-shadow:0 0 0 3px rgba(198,161,91,.18);
}

/* input wrapper */
.searchbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 8px 0 10px;
  border:1.5px solid #fff;
  border-radius:10px;
  background:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    transform .22s ease;
}

.searchbar:hover{
  background:#fffdfa;
  border-color:#ead8b7;
  box-shadow:0 5px 12px rgba(57,32,17,.08);
}

.searchbar:focus-within{
  border-color:#c6a15b;
  box-shadow:0 0 0 3px rgba(198,161,91,.18), 0 5px 12px rgba(57,32,17,.08);
  background:#fff;
}

.searchbar .icon{
  width:16px;
  height:16px;
  opacity:.55;
  flex:0 0 auto;
  transition:opacity .22s ease;
}

.searchbar:hover .icon,
.searchbar:focus-within .icon{
  opacity:.78;
}

.searchbar input{
  flex:1;
  min-width:0;
  height:100%;
  padding:0 6px;
  border:0;
  outline:0;
  background:#fff;
  color:#2B1A0D;
  font-size:14px;
  line-height:1.2;
}

.searchbar input::placeholder{
  color:rgba(43,26,13,.6);
}

/* 検索ボタン */
.search-btn{
  height:34px;
  width:100%;
  border:1px solid var(--pill-border);
  border-radius:10px;
  background:linear-gradient(to bottom,var(--pill-top),var(--pill-btm));
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  font-size:14px;
  line-height:1.2;
  transition:
    background .22s ease,
    color .22s ease,
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.search-btn:hover{
  background:linear-gradient(to bottom,#fffdf8,#e8d1a1);
  color:#6f4510;
  border-color:#d8c19a;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(57,32,17,.08);
}

.search-btn:active{
  transform:translateY(0);
  box-shadow:0 2px 6px rgba(57,32,17,.06);
}

.arch{
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:12px;
  pointer-events:none;
}

.arch svg{
  width:100%;
  height:100%;
  display:block;
}

.arch path{
  fill:var(--color-bg);
  stroke:none !important;
}

.visually-hidden{
  position:absolute !important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
}

/* レスポンシブ（最小限） */
@media (max-width:1200px){
  .search-grid{gap:12px;grid-template-columns:236px minmax(0,1fr) 92px;}
  .ctrl-h{height:38px;}
}
@media (max-width:1024px){
  .search-grid{gap:10px;grid-template-columns:210px minmax(0,1fr) 92px;}
  .ctrl-h{height:38px;}
}
@media (max-width:900px){
  .search-grid{gap:10px;grid-template-columns:190px minmax(0,1fr) 88px;}
  .ctrl-h{height:36px;}
}
@media (max-width:820px){
  .search-grid{gap:8px;grid-template-columns:176px minmax(0,1fr) 88px;}
  .ctrl-h{height:34px;}
  .searchbar .icon{width:15px;height:15px;}
}
@media (max-width:780px){
  .search-grid{gap:6px;grid-template-columns:166px minmax(0,1fr) 84px;}
  .ctrl-h{height:32px;}
}
@media (max-width:740px){
  .searchbar .icon{display:none;}
  .search-grid{grid-template-columns:160px minmax(0,1fr) 84px;}
  .ctrl-h{height:32px;}
}

/* ========== スクロール時のスマート非表示（ヘッダー＋検索） ========== */
.search-section{
  position:sticky;
  top:var(--header-h,64px);
  z-index:99;
  transition:transform .35s ease;
}

.smart-hide .header{
  transform:none;
}

.smart-hide .search-section{
  transform:translateY(calc(-1 * (var(--header-h,64px) + var(--search-h,56px))));
}

/* ========== Catalog モーダル ========== */
/* オーバーレイ */
.catalog-modal-overlay{
  position:fixed;
  inset:0;
  z-index:1100;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  animation:catalogFadeIn .25s ease;
}

.catalog-modal-overlay.is-open{
  display:flex;
}

@keyframes catalogFadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* パネル */
.catalog-panel{
  position:relative;
  background:#fff;
  color:#392011;
  width:min(1040px,92vw);
  max-height:90vh;
  overflow:auto;
  border-radius:5px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  padding:18px 18px 20px;
  transform:translateY(18px);
  animation:catalogUp .25s ease forwards;
}

@keyframes catalogUp{
  to{
    transform:translateY(0);
    opacity:1;
  }
}

.catalog-panel h2{
  margin:0 0 12px;
  font-size:18px;
  font-weight:800;
  border-left:5px solid #C6A15B;
  padding-left:9px;
}

/* カテゴリ・カード */
.catalog-cats{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(4,1fr);
  margin-top:2px;
}

@media (max-width:1024px){
  .catalog-cats{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:720px){
  .catalog-cats{grid-template-columns:repeat(2,1fr)}
}

.catalog-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:160px;
  border:1px solid #ddd6ca;
  border-radius:5px;
  background:#fdfbf7;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  text-decoration:none;
  color:#392011;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    color .18s ease;
  padding:10px 6px;
  text-align:center;
}

.catalog-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.10);
  border-color:#d8c19a;
  background:#fffdfa;
  color:#6f4510;
}

.catalog-card .icon-box{
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.catalog-card .icon-box img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.catalog-card span{
  display:block;
  font-size:13.5px;
  font-weight:700;
  line-height:1.45;
}

/* モーダル内 検索 */
.catalog-search{
  margin-top:16px;
  display:grid;
  gap:14px;
  align-items:center;
  grid-template-columns:220px minmax(0,1fr) 120px;
}

@media (max-width:900px){
  .catalog-search{
    grid-template-columns:190px minmax(0,1fr) 96px;
  }
}

.catalog-search .ctrl-h{
  height:52px;
}

.catalog-search .search-select{
  height:42px;
  padding:0 44px 0 16px;
  border:1px solid #d9d1c4;
  border-radius:14px;
  background-color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  font-size:17px;
}

.catalog-search .search-select:hover{
  border-color:#cdbca0;
  background-color:#fffdfa;
}

.catalog-search .search-select:focus{
  outline:none;
  border-color:#c6a15b;
  box-shadow:0 0 0 3px rgba(198,161,91,.16);
}

.catalog-search .searchbar{
  height:42px;
  padding:0 16px;
  border:1px solid #d9d1c4;
  border-radius:14px;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}

.catalog-search .searchbar:hover{
  border-color:#cdbca0;
  background:#fffdfa;
  box-shadow:0 3px 8px rgba(57,32,17,.06);
}

.catalog-search .searchbar:focus-within{
  border-color:#c6a15b;
  box-shadow:0 0 0 3px rgba(198,161,91,.16);
  background:#fff;
}

.catalog-search .searchbar .icon{
  width:20px;
  height:20px;
  opacity:.42;
}

.catalog-search .searchbar input{
  font-size:17px;
  background:transparent;
}

.catalog-search .searchbar input::placeholder{
  color:#8a7a6b;
}

.catalog-search .search-btn{
  height:42px;
  border-radius:14px;
  border:1px solid #ccb68f;
  background:linear-gradient(to bottom,#f3e7cf,#e4d1ab);
  color:#392011;
  font-size:17px;
  font-weight:800;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}

.catalog-search .search-btn:hover{
  background:linear-gradient(to bottom,#f7edd9,#e8d5b0);
  border-color:#bea06d;
  color:#5f3a12;
  box-shadow:0 4px 10px rgba(57,32,17,.08);
  transform:translateY(-1px);
}

/* よく見られているページ */
.catalog-utils{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
  margin-bottom:8px;
}

.catalog-utils a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:4px;
  background:linear-gradient(to bottom,#fbf6ed,#f1e4cf);
  border:1px solid #d9cdbb;
  color:var(--color-primary);
  text-decoration:none !important;
  font-weight:700;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  font-size:14px;
  line-height:1.35;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.catalog-utils a:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  ackground:linear-gradient(to bottom,#fffaf2,#ead7b2);
  border-color:#ccb68f;
  color:#6f4510;
}

/* 閉じる（下部） */
.catalog-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:max-content;
  margin:24px auto 0;
  padding:9px 18px;
  line-height:1;
  background:linear-gradient(to bottom,#F1F1F1,#DADADA);
  color:#2B1A0D;
  border:1px solid rgba(0,0,0,.18);
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  font-size:14px;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease;
}

.catalog-close::before{
  content:"×";
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  font-size:18px;
  font-weight:700;
  opacity:.85;
}

.catalog-close:hover{
  background:linear-gradient(to bottom,#EAEAEA,#D3D3D3);
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

/* 右上 × ボタン */
.catalog-close-top{
  display:none;
  position:absolute;
  top:8px;
  right:8px;
  width:32px;
  height:32px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:20px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  z-index:5;
  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.catalog-close-top::before{
  content:"×";
  display:block;
  text-align:center;
}

.catalog-close-top:hover{
  background:rgba(0,0,0,.72);
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}

.catalog-modal-overlay.is-open .catalog-close-top{
  display:block;
}

/* 「一覧から商品を探す」トリガの矢印を統一 */
#openCatalogPanel{
  position:relative;
  padding-right:18px;
}

#openCatalogPanel::after{
  content:"";
  position:absolute;
  right:6px;
  top:50%;
  width:12px;
  height:8px;
  transform:translateY(-50%);
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23392011" d="M1 1l5 5 5-5"/></svg>') no-repeat center/12px 8px;
  transition:transform .22s ease, opacity .22s ease;
}

#openCatalogPanel:hover::after{
  transform:translateY(-50%) translateY(1px);
  opacity:.9;
}

.header-util .icon.heart{
  transform:translateY(0);
}

/* --- モーダル内リンクのリセット（ヘッダー装飾を受けない）--- */
.header-nav .catalog-panel a:not(.catalog-card):not(.catalog-utils a){
  background:none !important;
  height:auto !important;
  box-shadow:none !important;
  padding:0 !important;
}

.header-nav .catalog-panel a{
  height:auto !important;
}

/* ========== Main ========== */
main{max-width:var(--container);margin:18px auto 84px;padding:0 12px;}
main .lead{color:var(--color-text-weak);}

/* ========== Footer ========== */
.pc-footer{
  margin-top:34px;color:#F2E7D6;
  background:linear-gradient(to bottom,#392011,#2B1A0D);
  border-top:1px solid var(--color-border);
  position:relative;
}
.pc-footer .pf-arch-top{position:absolute;left:0;right:0;top:-12px;height:12px;}
.pc-footer .pf-arch-top svg{width:100%;height:100%;display:block;}
.pc-footer .pf-arch-top path{fill:var(--color-bg);}
.pc-footer .pf-container{max-width:var(--container);margin:0 auto;padding:24px 12px 18px;}
.pc-footer .pf-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:20px;align-items:start;}
@media(max-width:1160px){.pc-footer .pf-grid{grid-template-columns:1fr 1fr 1fr}.pc-footer .pf-brand{grid-column:1/-1}}
@media(max-width:880px){.pc-footer .pf-grid{grid-template-columns:1fr 1fr}}
.pc-footer h3{margin:0 0 10px;font-size:15px;font-weight:800;color:#fff;border-left:4px solid rgba(255,255,255,.22);padding-left:9px;}
.pc-footer a{color:#F2E7D6;text-decoration:none;}
.pc-footer a:hover{text-decoration:underline;}
.pc-footer .pf-muted{opacity:.9;font-size:13px;line-height:1.75;}
.pc-footer .pf-list{display:grid;gap:6px;font-size:13.5px;padding-left:10px;}
.pc-footer .pf-social{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
.pc-footer .pf-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:linear-gradient(to bottom,var(--grad-top),var(--grad-btm));color:#392011;border:1px solid var(--pill-border);}
.pc-footer .pf-bottom{border-top:1px solid rgba(255,255,255,.18);margin-top:16px;padding-top:10px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:12.5px;}
.pc-footer .pf-backtotop{position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--pill-border);background:linear-gradient(to bottom,var(--grad-top),var(--grad-btm));color:#392011;}
.pc-footer .pf-backtotop svg{width:20px;height:20px;}


/* =========================================
   PCフッター：ソーシャルアイコン（mobile準拠）
========================================= */
.pc-footer .pf-social-large{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 96px));
  gap:14px;
  margin-top:20px;
  justify-content:start;
}

.pc-footer .pf-social-item{
  display:grid;
  grid-template-rows:auto auto;
  justify-items:center;
  min-width:0;
}

.pc-footer .pf-social-btn{
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:24px;
  background:linear-gradient(to bottom,var(--color-bg),var(--color-border));
  color:var(--color-primary);
  border:1px solid var(--pill-border);
  box-shadow:var(--shadow-inset),0 2px 8px rgba(0,0,0,.12);
  text-decoration:none;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.pc-footer .pf-social-btn:hover{
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:var(--shadow-inset),0 4px 12px rgba(0,0,0,.16);
}

.pc-footer .pf-social-btn .ico{
  display:block;
  width:38px;
  height:38px;
  margin:auto;
  stroke:currentColor;
  fill:none;
}

.pc-footer .pf-social-label{
  display:block;
  margin-top:8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  color:#fff;
  text-align:center;
  line-height:1.2;
}

.pc-footer .pf-cat-list{
  display:grid;
  gap:6px;
  padding-left:10px;
}

.pc-footer .pf-cat-link{
  display:block;
  min-height:0;
  padding:0;
  background:none;
  border:none;
  border-radius:0;
  box-shadow:none;
  color:#F2E7D6;
  text-align:left;
  place-items:initial;
}

.pc-footer .pf-cat-link:hover{
  color:#fff;
  text-decoration:underline;
  transform:none;
  box-shadow:none;
}


@media (max-width:1160px){
  .pc-footer .pf-social-large{
    grid-template-columns:repeat(3, minmax(0, 88px));
    gap:12px;
  }

  .pc-footer .pf-social-btn .ico{
    width:34px;
    height:34px;
  }
}

/* ===============================
   フッターSNS hover強化
=============================== */

/* 共通hover */
.pc-footer .pf-social-btn{
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    color .25s ease;
}

/* 浮き */
.pc-footer .pf-social-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* ===== 個別カラー ===== */

/* X */
.pc-footer .pf-social-item:nth-child(1) .pf-social-btn:hover{
  background:#111;
  color:#fff;
  border:1px solid rgba(255,255,255,.4);
}

/* Instagram */
.pc-footer .pf-social-item:nth-child(2) .pf-social-btn:hover{
  background:linear-gradient(
    45deg,
    #f58529,
    #dd2a7b,
    #8134af,
    #515bd4
  );
  color:#fff;
}

/* YouTube */
.pc-footer .pf-social-item:nth-child(3) .pf-social-btn:hover{
  background:#ff0000;
  color:#fff;
}



/* ========== 営業日カレンダー（最小調整） ========== */
.pf-cal-wrap{background:#fff;border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:10px;}
.pf-cal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media(max-width:1160px){.pf-cal-grid{grid-template-columns:1fr}}

.side_section_cal .side_cal .tbl_calendar{
  background:#FFFFFF;color:#3A2A23;border:1px solid #6A4A3A;border-radius:5px;overflow:hidden;border-collapse:separate;border-spacing:0;width:100%;
}
.side_section_cal .side_cal .tbl_calendar caption{caption-side:top;text-align:left;padding:7px 9px 6px;color:#3A2A23;font-weight:800;font-size:14px;}
.side_section_cal .side_cal .tbl_calendar th,
.side_section_cal .side_cal .tbl_calendar td{
  text-align:center;padding:8px 6px;border-left:1px solid #6A4A3A;border-top:1px solid #6A4A3A;border-right:0;border-bottom:0;background-clip:padding-box;
  font-size:13px; /* 調整: PC全体との密度を合わせる */
}
.side_section_cal .side_cal .tbl_calendar tr > *:first-child{border-left:0;}
.side_section_cal .side_cal .tbl_calendar tr:first-child > *{border-top:0;}
.side_section_cal .side_cal .tbl_calendar tr:first-child th{background:#F5EADF;color:#3A2A23;font-weight:700;}
.side_section_cal .side_cal .tbl_calendar td:not([style*="background"]){background:#FFFFFF;}
.side_section_cal .side_cal .tbl_calendar td:empty{background:#FBF8F5;color:#B8A99D;}
.side_section_cal .side_cal .tbl_calendar td[style*="background"]{border-left:1px solid #6A4A3A;border-top:1px solid #6A4A3A;}
.side_section_cal .side_cal_memo{margin-top:10px;color:#3A2A23;font-size:13.5px;line-height:1.65;}
.side_section_cal .side_cal_memo a{color:#B88A3E;text-decoration:underline;text-underline-offset:2px;}

/* ========== スクロール時のスマート非表示（ヘッダー＋検索） ========== */
.search-section{position:sticky;top:var(--header-h,64px);z-index:99;transition:transform .35s ease;}
.smart-hide .header{transform:none;}
.smart-hide .search-section{transform:translateY(calc(-1 * (var(--header-h,64px) + var(--search-h,56px))))}


/* =========================================================
   補足メモ
   - 今回は pc_base.css のみ調整
   - 商品詳細の画像・価格・カートボタンの大きさは pc_goods.css 側の影響も大きい
   - さらに「商品ページだけ」もう一段だけ締めたい場合は pc_goods.css で微調整する
   ========================================================= */

body.modal-open .pf-backtotop{
  display:none !important;
}

.pc-modal-viewport.is-loading{
  visibility:hidden;
}


/* =========================================
   パンくずリスト
========================================= */
.pc-breadcrumb{
  background:#fff;
  border-bottom:1px solid var(--color-border);
  font-size:13px;
}

.pc-breadcrumb .container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:8px 12px;
}

.pc-breadcrumb a{
  color:var(--color-text-weak);
  text-decoration:none;
}

.pc-breadcrumb a:hover{
  text-decoration:underline;
}

.pc-breadcrumb span{
  color:#aaa;
}

.pc-breadcrumb .current{
  color:var(--color-text);
  font-weight:600;
}

/* スマホ */
@media (max-width:980px){
  .pc-breadcrumb{
    font-size:12px;
  }
}


/* =========================================================
   トップページ共通パーツ
   - スマホ版の意匠をPC向けに整理
   ========================================================= */
main > section{
  padding:32px 0 0;
}

.seo-lead{
  margin:12px 0 48px;
  padding:16px 18px;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}

.seo-lead p{
  margin:0;
  color:var(--color-text-weak);
  line-height:1.9;
  white-space:pre-line;
}

.subcopy{
  margin:0 0 14px;
  text-align:center;
  color:var(--color-text-weak);
  font-size:13px;
}

.newslist{
  display:grid;
  gap:12px;
}

.newsitem{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:14px;
  align-items:center;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 6px 12px rgba(57,32,17,.05);
}

.newsitem .label{
  display:inline-block;
  margin-bottom:6px;
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  color:#2B1A0D;
  background:#F0E6D3;
}

.newsitem time{
  font-size:12px;
  color:var(--color-text-weak);
}

.cats{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}

.cat{
  display:grid;
  place-items:center;
  min-height:208px;
  padding:22px 12px;
  text-align:center;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:12px;
  color:var(--color-text);
  text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 6px 12px rgba(57,32,17,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cat:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(57,32,17,.10);
  border-color:#dcc9aa;
}

.cat img{
  width:56px;
  height:56px;
  object-fit:contain;
  margin-bottom:10px;
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

#new-items{margin:32px 0px 42px;}

#new-items .card:nth-child(n+25){
  display:none;
}

.card{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(57,32,17,.04);
}

.card > a{
  display:block;
  color:var(--color-text);
  text-decoration:none;
}

.thumbwrap{
  position:relative;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:#EEE5D9;
  border-bottom:1px solid var(--color-border);
}

.thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.thumbwrap.sold img.thumb{
  filter:grayscale(100%) brightness(.9) contrast(1.05);
}

.thumbwrap.sold::after{
  content:"SOLD";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:26px;
  letter-spacing:.18em;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
  background:rgba(0,0,0,.22);
  pointer-events:none;
}

.meta{
  padding:12px 12px 14px;
}

.title{
  font-size:13px;
  line-height:1.5;
  min-height:3em;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.title img{
  width:auto !important;
  height:auto !important;
  max-height:14px;
  vertical-align:-2px;
}

.price{
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  color:var(--color-primary);
  white-space:nowrap;
}

.card.sold .price{
  color:#C7513A;
}

.more-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin: 20px auto 80px;
  padding:13px 18px;
  width:min(360px,100%);
  text-align:center;
  border-radius:12px;
  border:1px solid var(--pill-border);
  background:linear-gradient(to bottom,var(--grad-top),var(--grad-btm));
  color:var(--color-primary);
  text-decoration:none;
  font-weight:800;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 2px 8px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.more-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(57,32,17,.10);
  border-color:#dcc9aa;
}

.more-btn .ico{
  width:22px;
  height:22px;
  flex:0 0 auto;
  margin-left:6px;
  transition:none;
}

.more-btn:hover .ico{
  transform:none;
}


.faq-section{
  margin:80px 0 0;
}

.faq-section .heading{
  margin-bottom:38px;
}
[data-faqz] .faqz{
  border:1px solid var(--color-border);
  border-radius:12px;
  background:#fff;
  margin:12px 0;
  overflow:hidden;
  box-shadow:0 2px 4px rgba(57,32,17,.06);
  transition:box-shadow .2s ease;
}

[data-faqz] .faqz:hover{
  box-shadow:0 2px 2px rgba(57,32,17,.08);
}

[data-faqz] .faqz summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  cursor:pointer;
  font-weight:700;
  color:var(--color-primary);
  background:#e9dcc7;
}

[data-faqz] .faqz summary::-webkit-details-marker{
  display:none;
}

[data-faqz] .faqz .q{
  line-height:1.5;
}

[data-faqz] .faqz .chev{
  width:18px;
  height:18px;
  flex:0 0 auto;
  opacity:.7;
  transition:transform .2s ease;
}

[data-faqz] .faqz[open] .chev{
  transform:rotate(180deg);
}

[data-faqz] .faqz .answer{
  padding:10px 16px 16px;
  color:var(--color-text-weak);
  line-height:1.8;
  background:#fff;
}


/* answer をアニメーションさせる */
[data-faqz] .faqz .answer{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-2px);
  transition:
    max-height .35s ease,
    opacity .25s ease,
    transform .25s ease;
}

/* 開いたとき */
[data-faqz] .faqz[open] .answer{
  max-height:300px; /* 内容に合わせて調整OK */
  opacity:1;
  transform:translateY(0);
}

/* =========================
   hover（上品に浮かせる）
========================= */

[data-faqz] .faqz{
  transition:
    box-shadow .2s ease,
    transform .2s ease;
}

[data-faqz] .faqz:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 2px rgba(57,32,17,.10);
}

/* =========================
   開いてるとき少し強調
========================= */

[data-faqz] .faqz[open]{
  box-shadow:0 6px 18px rgba(57,32,17,.12);
}

/* =========================================================
   トップページ横スライダー
   ========================================================= */
.top-slider-section{
  position:relative;
  margin:56px 0 0;
}

.top-slider-section .heading{
  margin-bottom:18px;
}

.top-slider{
  position:relative;
  padding:0 52px;
}

.top-slider-track{
  display:flex;
  gap:12px;
  overflow:hidden;
  scroll-behavior:smooth;
  padding:4px 0;
}

.top-slider-track .card{
  flex:0 0 calc((100% - 60px) / 6);
  min-width:0;
  margin:0;
}

.top-slider-arrow{
  position:absolute;
  top:calc(50% - 40px);
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border:none;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2;
  color:var(--color-primary);
  background:rgba(255,255,255,.95);
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  font-size:26px;
  line-height:1;
  padding:0;
}

.top-slider-prev{ left:0; }
.top-slider-next{ right:0; }

.top-slider-arrow:hover{
  transform:translateY(calc(-50% + 1px));
}

.top-slider-arrow:disabled{
  opacity:.45;
  cursor:default;
}

@media (max-width:1180px){
  .cats{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .top-slider-track .card{
    flex:0 0 calc((100% - 48px) / 5);
  }
}

@media (max-width:980px){
  main > section{
    padding-top:28px;
  }

  .card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .cats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .newsitem{
    grid-template-columns:96px minmax(0,1fr);
    gap:12px;
  }

  .top-slider{
    padding:0 44px;
  }

  .top-slider-track .card{
    flex:0 0 calc((100% - 36px) / 4);
  }

  .top-slider-arrow{
    width:34px;
    height:34px;
    font-size:28px;
  }
}

section[aria-labelledby="cats-heading"]{
  margin-bottom: 64px;
}

section[aria-labelledby="restock-heading"]{
  margin-bottom: 64px;
}

section[aria-labelledby="cats-heading"] .heading{
  margin-bottom:30px;
}

section[aria-labelledby="news"] .heading{
  margin-bottom:20px;
}

section[aria-labelledby="news"]{
  margin-bottom:50px;
}

section[aria-labelledby="new-heading"] > .heading{
  margin-bottom:10px;
}

section[aria-labelledby="new-heading"] > .subcopy{
  margin-bottom:10px;
  text-align:center;
}


/* =========================================
   トップページ商品カード hover
   新着 / おすすめ / 注目の再入荷 / 最近チェックした商品
   控えめに少しだけ浮かせる
========================================= */
.card{
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background-color .22s ease;
}

.card > a{
  display:block;
  color:inherit;
  text-decoration:none;
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 5px rgba(57,32,17,.05);
}

.card:hover .thumbwrap{
  border-color:#ddd2bf;
}

.card:hover .title,
.card:hover .price{
  color:#6f4510;
}

/* 画像もほんの少しだけ反応 */
.card .thumb{
  transition:
    transform .28s ease,
    filter .28s ease,
    opacity .28s ease;
}

.card:hover .thumb{
  transform:scale(1.03);
  filter:brightness(1.03);
}

/* SOLDは動かしすぎない */
.card.sold:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(57,32,17,.06);
}

.card.sold:hover .thumb{
  transform:none;
  filter:none;
}

/* キーボード操作時も見やすく */
.card > a:focus-visible{
  outline:2px solid rgba(198,161,91,.9);
  outline-offset:3px;
  border-radius:12px;
}



/* =========================================
   トップページ 商品カードの表示アニメーション
========================================= */
.card{
  opacity:0;
  transform:translateY(12px);
  transition:
    opacity .5s ease,
    transform .5s ease;
  will-change:opacity, transform;
}

.card.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* 動きに弱い環境では無効化 */
@media (prefers-reduced-motion: reduce){
  .card{
    opacity:1;
    transform:none;
    transition:none;
  }
}