@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/old-english-five');
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');

/* ==========================================
   #leopard インタラクティブ・リッチスタイル
========================================== */
#leopard {
  width: 100%;
  background-color: #080808;
  color: #ffffff;
  font-family: "Times New Roman", "Times", "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  overflow: hidden;
  position: relative;
}

/* 写真の隙間をなくし、枠いっぱいに綺麗に収める */
#leopard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* マウス追従型カスタムカーソル (PCのみ) */
#leopard .leopard-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 32px; height: 32px;
  border: 1px solid #c5a059;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease-out, width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
  mix-blend-mode: difference;
}

#leopard .leopard-cursor.is-hover {
  width: 60px;
  height: 60px;
  background-color: rgba(197, 160, 89, 0.2);
  border-color: #ffffff;
}

/* スクロール連動アニメーションクラス */
#leopard .reveal-item {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

#leopard .reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* HERO SECTION */
#leopard .leopard-hero {
  position: relative;
  padding: 50px 20px 90px;
  text-align: center;
  background: radial-gradient(circle at center, #1a150e 0%, #080808 70%);
}

/* ------------------------------------------
   HERO WATERMARK (ロゴ画像の調整版)
------------------------------------------ */
#leopard .hero-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  /* JSの transform と競合しないよう、ベースの位置はそのまま維持 */
  transform: translate(-50%, -50%);
  width: 70vw;
  max-width: 800px;
  
  /* 【調整】不透明度を 0.05 から 0.12 〜 0.15 程度に上げて視認性を高めます */
  opacity: 0.13; 
  
  pointer-events: none;
  user-select: none;
  will-change: transform;
  z-index: 1;
}

#leopard .hero-watermark img {
  width: 100%;
  height: auto;
  display: block;
  /* 【調整】わずかに明るさを上げることで、黒背景に立体的に浮かび上がらせます */
  filter: brightness(2.2) drop-shadow(0 0 10px rgba(197, 160, 89, 0.15));
}

#leopard .hero-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

#leopard .hero-badge {
  display: inline-block;
  padding: 6px 18px;
  font-size: 11px;
  letter-spacing: 0.3em;
  border: 1px solid #c5a059;
  color: #c5a059;
  background: rgba(197, 160, 89, 0.05);
  margin-bottom: 24px;
}

#leopard .hero-title-masked {
  font-size: 80px;
  font-weight: 900;
  letter-spacing: 0.12em;
  margin: 0;
  line-height: 1;
  background: linear-gradient(135deg, #ffffff 20%, #c5a059 60%, #4a3818 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
}

#leopard .hero-sub-title {
  font-size: 14px;
  letter-spacing: 0.5em;
  color: #888888;
  margin: 12px 0 24px;
  font-weight: 600;
  text-align: center;
}

#leopard .hero-line {
  width: 40px;
  height: 2px;
  background: #c5a059;
  margin: 0 auto 24px;
}

#leopard .hero-desc {
  font-size: 14px;
  color: #cccccc;
  line-height: 1.9;
  letter-spacing: 0.05em;
  text-align: center;
}

/* MARQUEE */
#leopard .marquee-wrapper {
  background: #c5a059;
  color: #000000;
  padding: 10px 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.25em;
  white-space: nowrap;
  overflow: hidden;
  transform: rotate(-5deg);
  margin: -10px -10px 60px;
  box-shadow: 0 0 20px rgba(197, 160, 89, 0.2);
}

#leopard .marquee-track {
  display: inline-block;
  animation: leopard-marquee 25s linear infinite;
}

#leopard .marquee-track .dot {
  margin: 0 20px;
  font-size: 8px;
}

@keyframes leopard-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ITEM CARDS & CONTAINER */
#leopard .leopard-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 15px 20px 100px;
}

#leopard .item-card {
margin-bottom:  45px;
  padding-bottom: 80px;
  border-bottom: 1px solid #3f3f3f;
  position: relative;
}



/* ==========================================
   アイテムヘッダーの刷新（見栄え改善版）
========================================== */
#leopard .item-header {
  display: block; /* 横並びから縦積みに変更して文字の改行崩れを防ぐ */
  margin-bottom: 24px;
  position: relative;
  padding-left: 0;
}

/* 数字（01）を上部に小さく、ゴールドのアクセントとして配置 */
#leopard .item-num {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: #c5a059; /* 中抜きではなくゴールドのソリッドカラーで上品に */
  -webkit-text-stroke: none;
  font-family: 'Cinzel', serif;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 数字の横に小さく引き締めラインを入れるとさらに高級感が出ます */
#leopard .item-num::after {
  content: '';
  display: inline-block;
  width: 40px;
  height: 1px;
  background: rgba(197, 160, 89, 0.4);
}

#leopard .item-meta {
  width: 100%;
}

#leopard .item-category {
  font-size: 10px;
  letter-spacing: 0.25em;
  color: #888888;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
}

/* タイトルが窮屈にならないようフォントサイズとウェイトを調整 */
#leopard .item-name {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: #ffffff;
  border-bottom: none;
}

#leopard .item-price {
  font-size: 16px;
  color: #dddddd;
  font-weight: 600;
  letter-spacing: 0.05em;
}

#leopard .item-price .tax {
  font-size: 10px;
  color: #777777;
  margin-left: 4px;
}

/* LOOKBOOK GALLERY GRID */
#leopard .lookbook-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

#leopard .item-card.reverse .lookbook-grid {
  grid-template-columns: 1fr 1.4fr;
}

#leopard .item-card.reverse .look-main { order: 2; }
#leopard .item-card.reverse .look-subs { order: 1; }

#leopard .look-main {
  aspect-ratio: 3 / 4; /* 画像の一般的な比率（縦長3:4）に自動追従させます */
  height: auto;
  perspective: 1000px;
}

#leopard .look-subs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  height: auto;
align-items: stretch;
}

#leopard .look-subs .img-wrapper {
  aspect-ratio: 3 / 4; /* サブ画像も比率を固定して隙間を防ぎます */
  height: auto;
  cursor: pointer;
position: relative;
  overflow: hidden;
  background: #080808;
  /* ボックス自体に薄いデフォルトの枠線を持たせておくことで線が消えるのを防ぐ */
  border: 1px solid rgba(255, 255, 255, 0.1); 
  transition: all 0.3s ease;
}

#leopard .look-subs .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, filter 0.6s ease;
}

#leopard .look-subs .img-wrapper:hover img {
  transform: scale(1.08);
  filter: brightness(1.1);
}

#leopard .look-subs .img-wrapper.active {
border: 2px solid #c5a059 !important; 
  box-shadow: 0 0 12px rgba(197, 160, 89, 0.5);
}

/* サブ画像枠 */
#leopard .img-wrapper {
position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #080808;
}

#leopard .img-wrapper img {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, filter 0.6s ease;
}

#leopard .img-wrapper:hover img {
  transform: scale(1.08);
  filter: brightness(1.1);
}

#leopard .look-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 10px;
  letter-spacing: 0.2em;
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  padding: 4px 10px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

#leopard .leopard-border {
 border: 2px solid #c5a059 !important;
  box-shadow: 0 0 20px rgba(197, 160, 89, 0.25);
  transition: transform 0.1s ease-out, border-color 0.3s ease;
}

/* BUTTON */
#leopard .btn-container { 
text-align: center; 
margin-top: 30px;	
}

#leopard .leopard-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;                  
  max-width: 320px;            
  height: 56px;
  background: #000000;
  border: 2px solid #c5a059;    
  box-sizing: border-box;       
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

#leopard .btn-text {
  position: relative;
  z-index: 3;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.25em;
  color: #ffffff;
  transition: color 0.4s ease;
}

#leopard .btn-bg-pattern {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #c5a059 0%, #8c6d31 100%);
  transition: left 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 1;
}

#leopard .leopard-btn:hover .btn-bg-pattern {
  left: 0;
}

#leopard .leopard-btn:hover .btn-text {
  color: #000000;
}


/* RESPONSIVE */
@media screen and (max-width: 767px) {
#leopard .leopard-cursor { display: none; }
#leopard .hero-title-masked { font-size: 45px; }
#leopard .hero-watermark {
    width: 90vw;               
    top: 40%;                   
    transform: translate(-50%, -50%);
  }
  #leopard .item-header { align-items: flex-start; }
  #leopard .item-num { font-size: 17px; }
  #leopard .item-name { font-size: 20px; }
	
  #leopard .lookbook-grid,
  #leopard .item-card.reverse .lookbook-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

#leopard .marquee-wrapper	{
  letter-spacing: 0;
padding: 10px 0;
	font-size: 2.7vw;
	margin:  -40px -10px 36px;
  }
	
#leopard .hero-badge {
  font-size: 9px;
}	
	
	
#leopard .hero-sub-title {
  font-size: 10px;
}	
	
  #leopard .item-card.reverse .look-main,
  #leopard .item-card.reverse .look-subs { order: initial; }


  #leopard .look-subs {
    height: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  #leopard .leopard-btn { width: 100%; }
	
#leopard .hero-watermark {

  transform: translate(-50%, -50%);	
}	
	
}