/* === Base Reset (safety) === */
html, body { height: 100%; }
body { margin: 0; }
img { max-width: 100%; display: block; }

/* === Theme === */
/* =========================
   Base
========================= */
:root {
  --bg-main: #f5f2eb;
  --bg-sub: #ffffff;
  --text-main: #2b2b2b;
  --text-sub: #5a4632;
  --accent-gold: #9a8456;
  --border-soft: rgba(154,132,86,0.35);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Noto Serif JP", "游明朝", serif;
  background: var(--bg-main);
  color: var(--text-main);
  line-height: 1.9;
}

/* =========================
   Header
========================= */
.site-header {
  padding: 24px 0;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-main);
}

.site-logo {
  font-size: 28px;
  letter-spacing: 0.2em;
  color: var(--text-main);
}

/* =========================
   Hero
========================= */
.hero {
  position: relative;
  padding: 120px 20px 140px;
  text-align: center;
  background:
    linear-gradient(
      rgba(245,242,235,0.88),
      rgba(245,242,235,0.96)
    ),
    url("../img/shop-inside.png") center / cover no-repeat;
}

.hero h1 {
  font-size: 42px;
  letter-spacing: 0.15em;
  margin-bottom: 24px;
}

.hero p {
  max-width: 640px;
  margin: 0 auto;
  font-size: 16px;
  color: var(--text-sub);
}

/* =========================
   Section
========================= */
section {
  padding: 80px 20px;
}

.section-title {
  text-align: center;
  font-size: 26px;
  letter-spacing: 0.2em;
  margin-bottom: 56px;
  position: relative;
}

.section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--accent-gold);
  margin: 24px auto 0;
}

/* =========================
   Products
========================= */
.products {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
}

.product-card {
  background: var(--bg-sub);
  border: 1px solid var(--border-soft);
  padding: 24px;
}

.product-card img {
  width: 100%;
  display: block;
  margin-bottom: 20px;
}

.product-name {
  font-size: 18px;
  margin-bottom: 12px;
}

.product-desc {
  font-size: 14px;
  color: var(--text-sub);
  margin-bottom: 16px;
}

.product-price {
  font-size: 16px;
  color: var(--accent-gold);
}

/* =========================
   Reservation
========================= */
.reservation {
  background: var(--bg-sub);
  border: 1px solid var(--border-soft);
  max-width: 720px;
  margin: 0 auto;
  padding: 40px;
}

.reservation label {
  display: block;
  margin-bottom: 8px;
}

.reservation input,
.reservation textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid var(--border-soft);
  font-family: inherit;
}

.reservation button {
  background: var(--accent-gold);
  color: #fff;
  border: none;
  padding: 12px 32px;
  cursor: pointer;
}

/* =========================
   Shop Info
========================= */
.shop-info {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.shop-text {
  background: var(--bg-sub);
  border: 1px solid var(--border-soft);
  padding: 32px;
}

/* =========================
   Payment
========================= */
.payment {
  text-align: center;
}

.payment-icons {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;

  flex-wrap: wrap;
  align-items: center;
}

/* =========================
   Footer
========================= */
footer {
  padding: 60px 20px 40px;
  text-align: center;
  border-top: 1px solid var(--border-soft);
  font-size: 13px;
}

.footer-logo img {
  width: 80px;
  margin-bottom: 16px;
}

.footer-links a {
  margin: 0 12px;
  color: var(--text-sub);
  text-decoration: none;
}

/* =========================
   DIFFERENTIATION PATCH
   （骨董・数珠：静・祈り・時間）
========================= */

/* --- 全体の縦リズムを崩す --- */
.hero {
  padding: 180px 20px 220px;
}

section {
  padding: 100px 20px;
}

.products {
  margin-top: 20px;
}

.reservation,
.shop-info {
  margin-top: 140px;
}

/* --- Hero：迎えるための余白と静止 --- */
.hero h1 {
  margin-bottom: 48px;
  letter-spacing: 0.2em;
}

.hero p {
  line-height: 2.3;
  font-size: 15px;
}

/* --- 背景に「紙の層感」を足す --- */
body {
  background:
    linear-gradient(
      rgba(245,242,235,0.97),
      rgba(245,242,235,0.97)
    ),
    url("../img/paper_texture.png");
  background-size: auto, 400px 400px;
}

/* --- 商品カード：売り場 → 展示台 --- */
.product-card {
  box-shadow: none;
  background: #ffffff;
  border: 1px solid rgba(154,132,86,0.45);
}

.product-card img {
  margin-bottom: 24px;
}

.product-name {
  font-size: 17px;
  letter-spacing: 0.14em;
}

.product-desc {
  line-height: 2;
}

.product-price {
  font-size: 14px;
  color: #5a4632;
}

/* --- セクションタイトルを「控えめな見出し」に --- */
.section-title {
  font-size: 24px;
  letter-spacing: 0.25em;
  margin-bottom: 72px;
}

.section-title::after {
  width: 36px;
  opacity: 0.6;
}

/* --- 予約フォーム：促さない --- */
.reservation {
  background: #ffffff;
  box-shadow: none;
}

.reservation button {
  background: transparent;
  color: var(--accent-gold);
  border: 1px solid var(--accent-gold);
  letter-spacing: 0.2em;
}

/* --- フッター：署名のように --- */
footer {
  margin-top: 160px;
  padding: 32px 0 40px;
  border-top: 1px solid rgba(154,132,86,0.25);
  text-align: center;
}

.footer-logo-center{
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-logo-center img{
  display: block;
  margin: 0 auto;
}

.footer-links a {
  letter-spacing: 0.15em;
}

.antique-header {
  position: absolute;
  top: 40px;
  left: 24px;
}

.site-logo-vertical {
  writing-mode: vertical-rl;
  letter-spacing: 0.3em;
  font-size: 14px;
  opacity: 0.5;
}

/* =========================
   Header Differentiation Fix
========================= */

/* Tiida由来のヘッダーUIを完全に無効化 */
.site-header {
  padding: 0;
  border: none;
  background: transparent;
  height: auto;
}

/* 骨董用：空間に置く記号 */
.antique-header {
  position: absolute;
  top: 48px;
  left: 28px;
  z-index: 5;
}

/* 縦書きロゴは“読むもの”ではない */
.site-logo-vertical {
  writing-mode: vertical-rl;
  font-size: 13px;
  letter-spacing: 0.35em;
  opacity: 0.45;
  user-select: none;
}

/* =========================
   Payment Icons Adjustment
========================= */

.payment-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-top: 32px;
}

.payment-icons img {
  height: 28px;          /* 高さを統一 */
  width: auto;
  opacity: 0.75;         /* 少し控えめに */
  filter: grayscale(20%);
}

@media (max-width: 600px) {
  .payment-icons {
    flex-wrap: wrap;
    gap: 20px;
  }
}

.product-name::before {
  content: "—";
  margin-right: 8px;
  opacity: 0.5;
}

.product-card img {
  background: #f9f7f2;
  padding: 12px;
}

.product-card:hover {
  border-color: rgba(154,132,86,0.7);
}


/* Shop gallery */
.shop-gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px;}
.shop-shot{margin:0;border-radius:18px;overflow:hidden;background:rgba(255,255,255,0.55);border:1px solid rgba(0,0,0,0.08);}
.shop-shot img{width:100%;height:320px;object-fit:cover;display:block;}
.shop-shot figcaption{padding:10px 12px;font-size:14px;opacity:0.8;}
@media (max-width: 760px){
  .shop-gallery{grid-template-columns:1fr;}
  .shop-shot img{height:260px;}
}
.section-note{margin:10px 0 0;opacity:0.8;}

/* =========================
   Products Carousel
   ========================= */
.products-carousel{position:relative;margin-top:26px}
.products-viewport{overflow:hidden;border-radius:18px}
.products-track{display:flex;transition:transform .45s cubic-bezier(.22,.61,.36,1);will-change:transform}
.products-page{flex:0 0 100%;padding:6px}
.products-page .products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0}

@media (max-width: 920px){
  .products-page .products{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){
  .products-page .products{grid-template-columns:1fr}
}

.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(10,10,10,.55);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.25);cursor:pointer;z-index:2;backdrop-filter: blur(6px)}
.carousel-btn:hover{background:rgba(10,10,10,.72)}
.carousel-btn:disabled{opacity:.35;cursor:not-allowed}
.carousel-btn.prev{left:10px}
.carousel-btn.next{right:10px}

.carousel-dots{display:flex;justify-content:center;gap:10px;margin-top:14px}
.carousel-dot{width:8px;height:8px;border-radius:999px;border:0;background:rgba(255,255,255,.28);cursor:pointer}
.carousel-dot.is-active{background:rgba(255,255,255,.82)}

/* small tweak so product cards feel more consistent */
.product-card{height:100%}

/* =========================
   Legal pages (restore + center card)
   ========================= */
.page-hero{padding:110px 0 54px}
.page-hero .container{display:flex;align-items:center;justify-content:center}
.page-hero h1{margin:0;font-size:clamp(30px,4vw,44px);letter-spacing:.08em}

.legal-page{padding:24px 0 96px}
.legal-card{max-width:980px;margin:0 auto;border:1px solid rgba(0,0,0,.12);border-radius:18px;
  background:rgba(255,255,255,.7);backdrop-filter: blur(4px);
  box-shadow: 0 18px 50px rgba(0,0,0,.08);padding:34px}
.legal-card h2{margin-top:0}

@media (max-width: 640px){
  .legal-card{padding:22px;border-radius:16px}
}


/* =========================
   MOBILE POLISH PATCH (2026-02)
   - Keep PC look the same
   - Fix carousel overflow & touch usability
   - Fix Google map sizing on desktop/mobile
   - Improve legal/privacy readability on mobile
========================= */

/* --- Map: make iframe responsive (prevents PC layout break) --- */
.shop-info iframe {
  width: 100%;
  max-width: 100%;
  border: 0;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  height: 420px;
}

/* --- Carousel: prevent overflow + better tap targets --- */
.products-carousel {
  overflow: hidden;
}

.products-nav button {
  touch-action: manipulation;
}

/* --- Mobile tweaks --- */
@media (max-width: 700px) {
  /* Hero spacing a bit tighter on phones */
  .hero {
    padding: 120px 16px 140px;
  }
  .hero h1 {
    font-size: clamp(34px, 7vw, 44px);
    line-height: 1.15;
  }

  /* Map height smaller on phones */
  .shop-info iframe {
    height: 320px;
  }

  /* Carousel: keep inside viewport, reduce “squash” */
  .products-carousel {
    padding: 0;
    border-radius: var(--radius);
  }
  .products-page {
    gap: 14px;
  }
  .product-card {
    border-radius: var(--radius);
  }
}

/* Ultra small phones */
@media (max-width: 420px) {
  .hero h1 {
    letter-spacing: 0.14em;
  }
  .products-page {
    gap: 12px;
  }
}

/* --- Legal / Privacy pages: mobile-friendly rhythm --- */
@media (max-width: 700px) {
  .page-hero {
    padding: 90px 16px 70px;
  }
  .page-hero h1 {
    font-size: clamp(30px, 7vw, 40px);
  }
  .page-body {
    padding: 44px 16px 70px;
  }
  .legal-card {
    border-radius: var(--radius);
  }
}

/* =========================================================
   Mobile Fix Pack (index) - keep desktop mostly untouched
   ========================================================= */
@media (max-width: 768px) {
  /* 全体の横はみ出し対策 */
  html, body {
    overflow-x: hidden;
  }

  /* サイドの縦ロゴ（Timeless Objects）が被り・余白原因ならスマホで消す */
  .side-brand,
  .vertical-brand,
  .brand-vertical,
  .page-vertical-brand {
    display: none !important;
  }

  /* セクション幅を画面内に収める */
  .container,
  .section,
  .section-inner,
  .content,
  .wrap {
    max-width: 100%;
  }

  /* 余白の最適化 */
  .section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hero：文字が見えない対策（背景が強い場合の保険） */
  .hero,
  .hero-section,
  #hero {
    position: relative;
  }
  .hero::before,
  .hero-section::before,
  #hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* 背景写真が強いときはここで薄い白膜を足して可読性を確保 */
    background: rgba(248, 244, 236, 0.72);
    pointer-events: none;
  }
  .hero > *,
  .hero-section > *,
  #hero > * {
    position: relative;
    z-index: 1;
  }

  /* ==========================
     Collection: スマホは scroll-snap カルーセル
     ========================== */
  .collection-carousel,
  .carousel,
  .collection-slider {
    overflow: hidden; /* 外側は隠す */
  }

  .carousel-track,
  .collection-track,
  .carousel__track {
    display: flex !important;
    gap: 14px;
    padding: 6px 2px 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    transform: none !important; /* JSのtransformを無効化 */
  }
  .carousel-track::-webkit-scrollbar,
  .collection-track::-webkit-scrollbar,
  .carousel__track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  /* 1枚ずつ“カード”として見せる */
  .product-card,
  .collection-card,
  .carousel-item,
  .carousel__slide {
    flex: 0 0 84%;
    scroll-snap-align: center;
    max-width: 84%;
  }

  /* カードの角を丸める（角張り対策） */
  .product-card,
  .collection-card,
  .carousel-item,
  .carousel__slide,
  .shop-card,
  .shop-box,
  .shop-frame {
    border-radius: 16px !important;
  }

  /* スマホでは左右ボタンは邪魔＆崩れ要因なので非表示 */
  .carousel-prev,
  .carousel-next,
  .carousel-btn,
  .carousel__prev,
  .carousel__next {
    display: none !important;
  }

  /* 画像比率がバラバラでも崩れにくく */
  .product-card img,
  .collection-card img,
  .carousel-item img,
  .carousel__slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
  }

  /* ==========================
     Shop（店内・外観）枠がない問題
     ========================== */
  .shop,
  #shop,
  .shop-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .shop-grid,
  .shop-cards,
  .shop-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .shop-card,
  .shop-box,
  .shop-frame {
    background: rgba(255, 255, 255, 0.70);
    border: 1px solid rgba(40, 30, 18, 0.14);
    box-shadow: 0 10px 24px rgba(0,0,0,0.06);
    overflow: hidden;
  }

  /* ==========================
     店舗情報 + Map（スマホ崩れやすいので縦積み）
     ========================== */
  .shop-info-grid,
  .access-grid,
  .store-grid,
  .info-map-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  iframe,
  .map iframe,
  .googlemap iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 320px !important;
    border: 0 !important;
    border-radius: 16px !important;
    display: block;
  }
}

/* legal/privacy header overlap fix (mobile) */
@media (max-width: 768px) {
  .page-hero,
  .legal-hero,
  .privacy-hero,
  .page-header-hero {
    padding-top: 84px !important; /* ヘッダー分だけ下げる */
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .site-header .nav,
  .site-header nav {
    line-height: 1.4;
  }
}

/* =========================================================
   MOBILE FIX (Index) - minimal impact on PC
   ========================================================= */
@media (max-width: 820px){
  /* 横はみ出しでレイアウトが崩れるのを止める */
  html, body { overflow-x: hidden; }

  /* セクション余白を少し詰める */
  section { padding: 64px 16px; }

  /* 店舗情報 + Map：スマホは縦積み */
  .shop-info { grid-template-columns: 1fr; }
  .shop-text { padding: 22px; }

  /* Map：属性width=600 をCSSで確実に上書き */
  .shop-info iframe{
    width: 100% !important;
    max-width: 100% !important;
    height: 320px;
    display: block;
    border-radius: 16px;
  }

  /* 右左ボタンが商品に被る/押しづらい対策（スマホは非表示でOK） */
  .carousel-btn { display: none; }
}

/* =========================================================
   Collection: Mobile = 1-card scroll-snap carousel
   PC keeps current button carousel
   ========================================================= */
@media (max-width: 640px){
  /* viewportは横スクロール可能に */
  #productsCarousel .products-viewport{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding: 8%;
    padding-bottom: 10px;
  }

  /* JSが生成するトラック（1商品=1スライド） */
  #productsCarousel .snap-track{
    display: flex;
    gap: 14px;
    padding: 6px 8px 14px;
  }

  /* 1枚カード */
  #productsCarousel .snap-slide{
    flex: 0 0 84%;
    max-width: 84%;
    scroll-snap-align: center;
  }

  /* カードの見た目を安定させる */
  #productsCarousel .snap-slide .product-card{
    height: 100%;
    border-radius: 16px;
  }

  /* スマホはボタン/ドット非表示（誤タップ防止） */
  #productsCarousel .carousel-btn,
  #productsCarousel .carousel-dots{
    display: none !important;
  }
}

/* =========================================================
   Product Images: unify size by CSS (no file edit)
   ========================================================= */

/* 商品カード内の画像を固定比率にする */
.product-card img{
  width: 100%;
  height: 220px;          /* ← 基準高さ（必要なら後で微調整OK） */
  object-fit: cover;     /* トリミングして埋める */
  object-position: center;

  border-radius: 12px;
  background: #eee;      /* 読み込み遅延時の保険 */
}

/* スマホは少し低くして圧迫感を減らす */
@media (max-width: 640px){
  .product-card img{
    height: 180px;
  }
}