@charset "UTF-8";

/* =========================================
   Base / Reset
   ========================================= */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Zen Kaku Gothic New","Noto Sans JP",system-ui,-apple-system,sans-serif;color:#0b0917;background:#fff;scroll-padding-bottom:72px}
img{display:block;max-width:100%;height:auto}
ul{list-style:none;margin:0;padding:0}
a{text-decoration:none;color:inherit}
button{border:none;margin:0;padding:0;width:auto;overflow:visible;background:transparent;color:inherit;font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;}

/* Theme tokens */
:root{
  --bg:#ffffff;
  --bg-light:#f1f1ee;
  --ink:#0b0917;
  --muted:#666;
  --radius:14px;
  --nav-h:64px;
  --container:1120px;
  --gap:12px;
  --fz-xs:clamp(11px,2.6vw,13px);
  --fz-s:clamp(13px,3vw,14px);
  --fz-l:clamp(18px,5vw,22px);
}

/* Google Material Symbols */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* =========================================
   Header
   ========================================= */
.vh-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #e5e5e3;box-shadow:0 1px 0 rgba(11,9,23,.06)}
.vh-announcement{display:block;background:#0b0917;color:#fff;text-align:center;font-size:12px;letter-spacing:.08em;padding:8px 12px;text-decoration:none;transition:text-decoration .2s ease}
.vh-announcement a:hover{text-decoration:underline}
.vh-topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#fff}
.vh-logo {
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: .12em;
  color: #0b0917;
  display: flex; 
  align-items: center;
}
.vh-logo img {
  max-height: 40px;
  width: auto;
}
.vh-cart{position:relative;width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.vh-cart svg{width:22px;height:22px;stroke:#0b0917;fill:none;stroke-width:1.6}
.vh-badge{position:absolute;top:2px;right:0;background:#0b0917;color:#fff;border-radius:999px;min-width:18px;height:18px;display:grid;place-items:center;font-size:11px;padding:0 5px;font-weight:700}

/* =========================================
   Global Layout & Headings
   ========================================= */
.vl-section{padding:48px 16px;max-width:var(--container);margin-inline:auto}
@media(min-width:960px){.vl-section{padding:64px 24px}}

.vl-section.bg{background:var(--bg-light)}
.vl-section-container{max-width:var(--container);margin-inline:auto}
.vl-section.vl-section--fullwidth-bg{max-width:none;margin-inline:0}

/* Utility: Remove top padding */
.vl-section--pt0 {
  padding-top: 0;
}

.vl-subheading-en{font-size:12px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin:0 0 6px;font-weight:500; font-family: "Cormorant Garamond", "Zen Old Mincho", serif;}
.vl-h2{font-size:var(--fz-l);font-weight:700;margin:0 0 16px;letter-spacing:.02em;line-height:1.35}

/* More Link */
.vl-more {
  display: table;
  margin-left: auto;
  margin-top: 24px;
  font-size: var(--fz-s);
  color: inherit;
  text-decoration: underline; 
  text-underline-offset: 3px;
  padding-left: 16px;        
  padding-right: 0;          
  position: relative;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.vl-more::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-35%) rotate(45deg);
  transition: transform 0.2s ease, left 0.2s ease;
}
.vl-more:hover {
  color: var(--muted);
  opacity: 0.8;
}
.vl-more:hover::before {
  left: 4px;
}

.vl-section + .vl-section{position:relative}
.vl-section + .vl-section::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(11,9,23,.06),rgba(0,0,0,0))}

/* =========================================
   Product Card & Grid System (Shared)
   ========================================= */
.vl-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:600px){.vl-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:840px){.vl-grid{grid-template-columns:repeat(4,1fr)}}

.vl-prod {
  border: 1px solid #e5e5e3;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  position: relative;
  /* Gridの子要素として高さは自動で揃うが、中身を広げるためにFlexにする */
  display: flex;
  flex-direction: column;
}

/* ▼▼▼ 下揃えのための重要な変更 ▼▼▼ */
.vl-card-link {
  display: flex;       /* フレックスボックス化 */
  flex-direction: column;
  height: 100%;        /* 親(li)の高さいっぱいに広げる */
  transform: translateY(0);
  transition: transform .25s ease;
  text-decoration: none; /* リンクの下線を消す */
  color: inherit;
}
.vl-card-link:focus-visible{outline:2px solid #0b0917;outline-offset:3px}

.vl-prod .meta {
  padding: 10px 12px 14px;
  /* 余ったスペースを埋めて、下部要素を底に押しやる */
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 画像：正方形・背景あり */
.vl-prod .img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f9f9f9;
  position: relative;
  overflow: hidden;
  flex-shrink: 0; /* 画像が潰れないようにする */
}
.vl-prod img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}

@media (hover:hover){
  .vl-prod:hover img { transform: scale(1.05); }
}

/* 商品名 */
.vl-prod .name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #333;
  margin-bottom: 12px; /* 価格との最低限の隙間 */
  display: block;
  overflow: visible;
  height: auto;
}

/* --- Price & Favorite Layout --- */
.vl-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* 下揃え */
  /* ▼ これで一番下に配置される ▼ */
  margin-top: auto; 
}

/* 価格エリア */
.vl-card-bottom .price-area {
  flex: 1; /* 左側を埋める */
}

.vl-prod .price {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #0b0917;
  margin-top: 0;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* セール表示 */
.vl-prod .price.is-sale {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.vl-prod .price.is-sale .sale-row {
  display: flex;
  align-items: center; 
  gap: 8px;
  width: 100%;
}
.vl-prod .price.is-sale span:first-child {
  color: #cc0000;
  font-weight: 700;
  font-size: 15px;
}
.vl-prod .price.is-sale del {
  font-size: 11px;
  color: #999;
}
.vl-prod .price.is-sale .sale-off {
  font-size: 11px;
  background: #cc0000; 
  color: #ffffff;      
  padding: 2px 6px;    
  border-radius: 4px;  
  font-weight: 600;    
  display: inline-block;
  transform: translateY(-1px); 
}

/* お気に入りボタン */
.vl-prod .vl-fav {
  position: static;
  background: transparent;
  width: auto;
  height: auto;
  padding: 4px 0 4px 8px;
  transform: none;
  display: flex;
  border-radius: 0;
  backdrop-filter: none;
  box-shadow: none;
  border: none;
}
.vl-prod .vl-fav:hover {
  background: transparent;
  transform: scale(1.1);
}
.vl-prod .vl-fav svg {
  stroke: #0b0917;
  width: 20px;
  height: 20px;
  fill: none;
  stroke-width: 1.6;
}
.vl-prod .vl-fav.is-active svg {
  fill: #0b0917;
  stroke: #0b0917;
}

/* SOLD OUT */
.vl-prod.is-soldout {
  opacity: 1; /* 全体の透明度は下げない（白を綺麗に見せるため） */
}
.vl-prod .img.is-soldout::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  /* ▼ 黒(rgba(11,9,23,0.6)) から 白(rgba(255,255,255,0.6)) に変更 */
  background: rgba(255, 255, 255, 0.6);
  z-index:1;
  pointer-events: none;
}
.vl-prod .img.is-soldout::after{
  content:'SOLD OUT';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  color: #fff; 
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  z-index:2;
  white-space: nowrap;
  pointer-events: none;
}
.vl-prod .price.is-soldout {
  color: #999;
  font-weight: 700;
}


/* =========================================
   Tags (Common)
   ========================================= */
/* ▼▼▼ ここを修正しました！ ▼▼▼ */
.vl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.vl-tags a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* タブと同じグレー */
  background: #e5e5e3; 
  border: 1px solid #dcdcdc; 
  color: #0b0917; 
  
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all .2s ease;
}
.vl-tags a:hover {
  /* ホバー時はネイビー */
  background: #0b0917;
  color: #ffffff;
  border-color: #0b0917;
}

/* =========================================
   Breadcrumb (Common)
   ========================================= */
.vl-breadcrumb{font-size:var(--fz-xs);color:var(--muted);padding:0;margin:0}
.vl-breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.vl-breadcrumb li{display:flex;align-items:center}
.vl-breadcrumb li:not(:last-child)::after{content:'>';margin-left:8px;color:var(--muted)}
.vl-breadcrumb a{text-decoration:underline;text-underline-offset:2px}
.vl-breadcrumb a:hover{color:var(--ink)}


/* =========================================
   Bottom Nav (Mobile)
   ========================================= */
.vl-bottom-nav{position:sticky;bottom:0;left:0;right:0;height:var(--nav-h);background:#0b0917;border-top:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:repeat(5,1fr);z-index:80}
.vl-bottom-nav a, .vl-bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#ffffff;font-size:10px;cursor:pointer}
.vl-bottom-nav svg{width:22px;height:22px;stroke:#ffffff;fill:none;stroke-width:1.6}


/* =========================================
   Footer (Common)
   ========================================= */
.vl-footer {
  background: var(--bg-light);
  color: var(--ink);
  padding: 0 16px 0 16px;
  font-size: var(--fz-s);
  display: block; 
  margin-top: 48px;
  padding-bottom: calc(var(--nav-h)); 
}
@media(min-width: 960px) {
  .vl-footer {
    padding-bottom: 48px;
  }
}
.vl-footer .vl-section{
  padding-bottom:0 ;
}
.vl-footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(2, 1fr);
}
@media(min-width: 768px) {
  .vl-footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.vl-footer h3 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--muted);
}
.vl-footer ul {
  display: grid;
  gap: 8px;
}
.vl-footer a:hover {
  text-decoration: underline;
}
.vl-footer-sns {
  display: flex;
  gap: 16px;
}
.vl-footer-sns svg {
  width: 28px;
  height: 28px;
  fill: var(--ink);
  transition: opacity .2s ease;
}
.vl-footer-sns a:hover svg {
  opacity: 0.7;
}
.vl-footer-copy {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #ddd;
  text-align: center;
  font-size: var(--fz-xs);
  color: var(--muted);
}

/* =========================================
   Drawer Menu (Common)
   ========================================= */
.vl-menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.vl-menu-header .title{font-size:var(--fz-l);font-weight:700}
.vl-menu-header .close{font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;padding:8px}

.vl-menu-drawer, .vl-search-drawer{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:200;padding:24px 16px var(--nav-h);overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(20px);transition:opacity .3s ease,visibility .3s ease,transform .3s ease}
.vl-menu-drawer.is-open, .vl-search-drawer.is-open{visibility:visible;opacity:1;transform:translateY(0)}

.vl-menu-list details{border-bottom:1px solid #eee}
.vl-menu-list summary{font-size:var(--fz-s);font-weight:600;padding:16px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.vl-menu-list summary::-webkit-details-marker{display:none}
.vl-menu-list summary::after{content:'+';font-size:20px;font-weight:400;color:var(--muted)}
.vl-menu-list details[open] > summary::after{content:'−'}
.vl-menu-list .links{padding:0 8px 16px;display:grid;gap:12px}
.vl-menu-list .links a{font-size:var(--fz-s);color:var(--muted)}
.vl-menu-list .links a:hover{color:var(--ink)}
.vl-search-drawer .vl-search{margin-bottom:12px}

/* =========================================
   Guide & SNS (Common Components)
   ========================================= */
.vl-guide {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 960px) {
  .vl-guide {
    grid-template-columns: repeat(4, 1fr);
  }
}
.vl-guide a {
  display: flex;
  align-items: center;
  justify-content: center; 
  gap: 12px;
  padding: 14px;
  border: 1px solid #e5e5e3;
  border-radius: 12px;
  background: #fff;
  transition: all .2s ease;
  color: var(--ink); 
}
.vl-guide .material-symbols-outlined {
  font-size: 24px; 
  color: inherit; 
}
.vl-guide a:hover {
  background: #0b0917;
  color: #fff; 
  border-color: #0b0917;
  text-decoration: none;
}

/* SNS */
.vl-footer ul.vl-sns,
.vl-sns {
  display: flex;
  justify-content: center; 
  align-items: center;
  gap: 24px; 
  margin-top: 24px;
  list-style: none;
}
.vl-sns li {
  width: auto; 
}
.vl-sns a {
  display: block;
  transition: opacity 0.2s ease;
}
.vl-sns a:hover {
  opacity: 0.7;
}
.vl-sns img {
  width: 48px;  
  height: 48px; 
  object-fit: contain;
}

/* =========================================
   Utility Buttons
   ========================================= */
.vl-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 13px;
  text-decoration: none;
  transition: all 0.3s ease;
  min-width: 200px;
}
.vl-btn-outline span {
  font-size: 18px;
}
.vl-btn-outline:hover {
  background: var(--ink);
  color: #fff;
}

/* =========================================
   Favorites Page Specifics (Updated)
   ========================================= */

/* 削除ボタン（×ボタン） */
.vl-prod .vl-fav-delete {
  position: static; 
  background: transparent;
  width: auto;
  height: auto;
  padding: 4px 0 4px 8px; 
  display: flex;
  align-items: center;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  color: #0b0917; 
  text-decoration: none;
  transition: transform .2s ease;
}

/* ホバー時の挙動 */
.vl-prod .vl-fav-delete:hover {
  background: transparent;
  color: #666; /* ▼▼▼ 赤(#cc0000)からグレー(#666)に変更しました ▼▼▼ */
  transform: scale(1.1);
}

/* アイコンサイズ調整 */
.vl-prod .vl-fav-delete .material-symbols-outlined {
  font-size: 20px; 
  font-weight: 500;
  color: inherit;
}

/* 注意書きエリア */
.vl-fav-notice {
  margin-top: 24px;
  margin-bottom: 32px;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px;
  font-size: 12px;
  color: #666;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.vl-fav-notice .material-symbols-outlined {
  font-size: 20px;
  color: #999;
  flex-shrink: 0;
  transform: translateY(2px);
}

/* 空の状態 */
.vl-fav-empty {
  text-align: center;
  padding: 80px 0;
  color: #666;
}
.vl-fav-empty p {
  margin-bottom: 32px;
  font-size: 14px;
}
.vl-btn-home {
  display: inline-block;
  padding: 12px 32px;
  background: #0b0917;
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  transition: opacity .2s;
  text-decoration: none;
}
.vl-btn-home:hover {
  opacity: 0.8;
}