/* =========================================
   Waki Wood Catalog Block — SS
   ========================================= */

/* レイアウト */
/* .ww-catalog was removed as it's no longer a 2-column layout */
.wws-list-wrapper{
  overflow:hidden;
  position:relative;
  border:none; /* 枠線を削除 */
  background: transparent; /* ★ 白背景を透明に変更 */
  border-radius:12px;
  padding:.25rem;
}
.wws-list{
  display:flex; /* ページを横並びにする */
  /* transition: transform .7s cubic-bezier(.4,0,.2,1); */ /* スライドアニメーションを削除 */
}
.wws-list-page{
  flex:0 0 100%; /* 1ページがコンテナ幅ピッタリに */
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:0.25rem; /* ギャップをさらに小さく */
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* SP用の横スクロール設定（2列×2行） */
@media (max-width: 960px){
  .wws-list-page{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap: 0.2rem; /* スマホでもギャップを小さく */
  }
  
  /* 横スクロールコンテナ */
  .wws-list-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  
  .wws-list-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }
  
  /* スクロール促進アニメーション */
  .scroll-indicator {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #333333;
    font-size: 24px;
    font-weight: bold;
    animation: blink 2s infinite;
    z-index: 10;
    pointer-events: none;
  }
  
  @keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
  }
}
.wws-list-page:not(.is-visible) {
  opacity: 0;
  /* フェードアウト中は見えなくするが、レイアウトは維持 */
  visibility: hidden;
}

/* アニメーション用 */
/* .wws-item は L237 へ移動・統合 */

.wws-item.is-visible {
  /* 不要になったため削除 */
}

/* ページネーション */
.wws-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:1rem;
  gap:.75rem;
}
.wws-prev, .wws-next{
  background: #f0f0f1;
  border:1px solid #dcdcde;
  border-radius:50%;
  width:32px;
  height:32px;
  cursor:pointer;
  transition:background-color .15s ease;
}
.wws-prev:hover, .wws-next:hover{ background:#e2e2e4; }
.wws-prev.is-disabled, .wws-next.is-disabled{
  opacity:.5;
  cursor:not-allowed;
}
.wws-dots{
  display:flex;
  gap:.5rem;
}
.wws-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ffffff; /* 背景を白に */
  border:1px solid #777; /* 枠線を#777に */
  padding:0;
  cursor:pointer;
  transition:background-color .15s ease;
}
.wws-dot.is-active{
  background:#777; /* アクティブ時の背景を#777に */
}

/* =================================
   ★ 共通カードスタイル（ガラス風）
   ================================= */
.ww-item,
.wws-item {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .6rem;
  text-align: left;

  /* Glass effect */
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-right-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.ww-item:hover,
.wws-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
}
.ww-item[aria-selected="true"]{outline:3px solid #2271b1;outline-offset:0;border-color:#cfe5fb}

/* カード内要素 */
.ww-thumb img,
.wws-thumb img {
  width:100%;
  height:auto;
  display:block;
  border-radius:8px
}
.ww-name,
.wws-name {
  font-size:18px;
  line-height:1.4;
  text-align:center;
  color:#333
}

/* .ww-detail and related styles are removed as they are no longer used. */
/* メディア：中央寄せ・同幅（追加画像はボーダー無しのまま） */
.ww-media{max-width:200px;margin:0 auto 1rem}
.ww-hero img{width:100%;height:auto;display:block;margin:0 auto .6rem;border-radius:10px}
.ww-gallery.ww-gallery--stack{display:block}
.ww-gallery.ww-gallery--stack img{width:100%;height:auto;display:block;margin:.6rem auto 0}

/* メタ情報カード */
.ww-metaCard{background:#fafafa;border:1px solid #eee;border-radius:12px;padding:.9rem}

/* ★ dl を各行2カラムで綺麗に */
.ww-meta{margin:.2rem 0 .8rem}
.ww-meta > div{display:grid;grid-template-columns:7em 1fr;gap:.35rem 1.2rem;align-items:start}
.ww-meta dt{font-weight:700;color:#444}
.ww-meta dd{margin:0;color:#333}

/* 説明 */
.ww-desc{font-size:.95rem;line-height:1.75;color:#333}
.ww-descHead{font-weight:700;margin:0 0 .25rem;color:#444}

/* 色バッジ（任意利用） */
.ww-badge{display:inline-block;padding:.15rem .45rem;border-radius:999px;font-size:.8rem;line-height:1;border:1px solid rgba(0,0,0,.12);background:#fff}
.ww-badge--light{background:#fff;border-color:#e6e6e6}
.ww-badge--medium{background:#fff7e6;border-color:#f1d9a6}
.ww-badge--dark{background:#f1f1f1;border-color:#d0d0d0}

/* ===============================
   モバイル用ポップアップ（最前面）
   =============================== */

/* まず完全に隠す（PC/モバイル共通の初期状態） */
.ww-modal{display:none;}
.ww-modal__close{display:none;}

/* z-index・オーバーレイ・ダイアログ構造 */
.ww-modal{
  position:fixed;inset:0;z-index:2147480000;
}
.ww-modal__overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.48);z-index:2147480000;
}
.ww-modal__dialog{
  position:fixed;left:50%;top:50%;transform:translate(-50%, -50%); /* 中央配置 */
  width:calc(100% - 2rem);max-width:560px;
  max-height:calc(100vh - 4rem); /* 画面の高さから上下の余白を引いた値 */
  overflow:hidden;
  background:#fff;border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.28);
  z-index:2147480001;
  padding:1rem 1rem .75rem;
}
.ww-modal__body{
  max-height:calc(100vh - 116px); /* 画面の高さ - (ダイアログ上下余白 + ダイアログ上下padding + 閉じるボタン高さ + 閉じるボタンtop + body-padding-top) */
  overflow:auto;padding-top:.5rem;
}

/* ×ボタン */
.ww-modal__close{
  position:absolute;top:8px;right:8px;
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(0,0,0,.18);
  background:rgba(255,255,255,.8);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
  z-index:2147480002;cursor:pointer;font-size:0;line-height:1;
}
.ww-modal__close::before,
.ww-modal__close::after{
  content:"";position:absolute;width:20px;height:2px;
  background:#000;border-radius:1px;
}
.ww-modal__close::before{transform:rotate(45deg)}
.ww-modal__close::after{transform:rotate(-45deg)}
.ww-modal__close:focus{outline:2px solid #2271b1;outline-offset:2px}

/* PC幅では出さない（is-openでも無視） */
@media (min-width: 961px){
  .ww-modal{display:none !important;}
  .ww-modal__close{display:none !important;}
}

/* モバイル幅：開いている時だけ表示 */
@media (max-width: 960px){
  .ww-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ww-modal.is-open{display:block;}
  .ww-modal.is-open .ww-modal__close{display:inline-flex;}
}

/* モバイル：ダイアログの位置を少し上へ */
/* モバイルでのトップ位置調整は中央配置により不要になるため削除 */
/* @media (max-width: 960px){
  .ww-modal__dialog{ top: 12%; }
} */



/* ===============================
   WakiWood Scroller (Shortcode)
   =============================== */

.wws { margin: 1.2rem 0; }

/* 横スクロール（SPは後ろのMQで縦） */
.wws-strip{
  /* Desktop: grid with up to 4 columns and vertical scroll */
  display:grid;
  gap:0;
  overflow-y:auto; overflow-x:hidden;
  /* remove side padding so items sit flush */
  padding:.5rem 0 .75rem;
  max-height:80vh;
}

/* PC用の列数設定 */
.wws-list--2col{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.wws-list--3col{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.wws-list--4col{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.wws-list--5col{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.wws-list--6col{ grid-template-columns:repeat(6,minmax(0,1fr)); }

/* 間隔設定 */
.wws--compact .wws-item{ margin-bottom: 0.3rem; }
.wws--normal .wws-item{ margin-bottom: 0.6rem; }
.wws--loose .wws-item{ margin-bottom: 1.2rem; }

/* ページネーション設定 */
.wws--pagination-hide .wws-pagination{ display: none !important; }
.wws--pagination-auto .wws-pagination{ display: none; }
.wws--pagination-auto.wws-has-multiple-pages .wws-pagination{ display: flex; }

/* カード (.wws-item は L90 付近に統合) */
/* This rule has been merged with the .wws-item rule at line 30 to fix transition conflicts. */

/* 画像とタイトルの隙間ゼロ */
.wws-thumb{ margin:0; line-height:0; }  /* 画像下の行間を潰す */
/* .wws-thumb img は L107 に統合 */
/* .wws-name は L113 に統合 */

.wws-empty{ color:#666; padding:.5rem 0; }

/* ===== モーダル（PC/スマホ共通） ===== */
.wws-modal{ display:none; }                         /* 初期は非表示 */
.wws-modal.is-open{ display:block !important; }     /* 開いている時だけ必ず表示 */

.wws-modal__overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.48); z-index:2147480000;
}
/* モーダルのメイン画像を一回り小さく＆中央寄せ */
.wws-detail__hero img{
  max-width:85%;
  height:auto;
  display:block;
  margin:0 auto;       /* 中央寄せ */
  border-radius:8px;
}

/* 追加画像ギャラリーのサイズ調整 */
.wws-detail__gallery {
  max-width: 80%; /* 20%小さく */
  margin: 0.6rem auto; /* 中央寄せと上下の余白 */
}
.wws-detail__gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* モーダルの木材名（p）を中央寄せ・少し太く */
.wws-detail__title{
  margin:.6rem 0 .35rem;
  font-weight:700;
  text-align:center;
}

.wws-modal__dialog{
  position:fixed; left:50%; transform:translateX(-50%);
  top:100px; width:calc(100% - 2rem); max-width:560px;
  max-height:84vh; overflow:hidden; background:#fff; border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.28); z-index:2147480001; padding:1rem 1rem .75rem;
}
.wws-modal__body{ max-height:calc(84vh - 56px); overflow:auto; padding-top:.5rem; }
.wws-modal__close{
  position:absolute; top:8px; right:8px; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(0,0,0,.18); background:rgba(255,255,255,.8);
  display:inline-flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(0,0,0,.18);
  cursor:pointer; font-size:0; line-height:1;
}
.wws-modal__close::before, .wws-modal__close::after{
  content:""; position:absolute; width:20px; height:2px; background:#000; border-radius:1px;
}
.wws-modal__close::before{ transform:rotate(45deg); }
.wws-modal__close::after{  transform:rotate(-45deg); }

/* SPは縦スクロール */
@media (max-width: 960px){
  /* Mobile: 2-column grid for better visibility */
  .wws-list--2col,
  .wws-list--3col,
  .wws-list--4col,
  .wws-list--5col,
  .wws-list--6col{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  
  /* SP用の行数設定（2列×6行） */
  .wws-list-page{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(6,minmax(0,1fr));
  }
  
  /* SP用の間隔調整 */
  .wws--compact .wws-item{ margin-bottom: 0.2rem; }
  .wws--normal .wws-item{ margin-bottom: 0.4rem; }
  .wws--loose .wws-item{ margin-bottom: 0.8rem; }
}


/* 画像とタイトルの隙間ゼロ */
.wws-thumb{
  margin:0;
  line-height:0;
  display: block;
}     /* 行間由来の隙間も潰す */

/* 画像の隙間をなくす */
.wws-item img {
  margin: 0;
  padding: 0;
  border-radius: 8px;
  display: block;
  width: 100%;
  height: auto;
}

/* グリッドのgapを調整 */
.wws-list-page {
  gap: 0.25rem; /* ギャップを小さくして画像を近づける */
}


/* WWS emergency override */
.wws-modal { display: none; }
.wws-modal.is-open { display: block !important; }  /* 何があっても出す */

.wws-detail__head{
	font-weight:bold;
}

.wws-name {
    font-size: 18px;
    font-weight: bold;
}

/* Pagination and column fixes */
.ww-list-wrapper{
  overflow:hidden;
  position:relative;
  border:none;
  background:transparent;
  border-radius:12px;
  padding:.5rem;
}
.wws-list-wrapper{ padding:.25rem; }
.ww-list,
.wws-list{
  display:flex;
  transition:transform .2s ease;
}
.ww-list-page,
.wws-list-page{
  flex:0 0 100%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:none;
  grid-auto-rows:auto;
  gap:.4rem;
  opacity:1;
  transition:opacity .2s ease;
}
.wws-list-page{
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:.25rem;
}
.ww-list-page:not(.is-visible),
.wws-list-page:not(.is-visible){
  opacity:0;
  visibility:hidden;
}
.ww-pagination,
.wws-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:1rem;
  gap:.75rem;
}
.ww-prev,
.ww-next,
.wws-prev,
.wws-next{
  background:#f0f0f1;
  border:1px solid #dcdcde;
  border-radius:50%;
  width:32px;
  height:32px;
  cursor:pointer;
  transition:background-color .15s ease;
}
.ww-prev:hover,
.ww-next:hover,
.wws-prev:hover,
.wws-next:hover{ background:#e2e2e4; }
.ww-prev.is-disabled,
.ww-next.is-disabled,
.wws-prev.is-disabled,
.wws-next.is-disabled{
  opacity:.5;
  cursor:not-allowed;
}
.ww-dots,
.wws-dots{
  display:flex;
  gap:.5rem;
}
.ww-dot,
.wws-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fff;
  border:1px solid #777;
  padding:0;
  cursor:pointer;
  transition:background-color .15s ease;
}
.ww-dot.is-active,
.wws-dot.is-active{ background:#777; }
.wws-list--2col > .wws-list-page{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.wws-list--3col > .wws-list-page{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.wws-list--4col > .wws-list-page{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.wws-list--5col > .wws-list-page{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.wws-list--6col > .wws-list-page{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.ww-item,
.wws-item{
  appearance:none;
  width:100%;
  font:inherit;
  color:inherit;
}
.wws-item[aria-selected="true"]{
  outline:3px solid #2271b1;
  outline-offset:0;
  border-color:#cfe5fb;
}
@media (max-width: 960px){
  .ww-list-page{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;
  }
  .wws-list--2col > .wws-list-page,
  .wws-list--3col > .wws-list-page,
  .wws-list--4col > .wws-list-page,
  .wws-list--5col > .wws-list-page,
  .wws-list--6col > .wws-list-page{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
  }
  .wws-list-wrapper{
    overflow:hidden;
    touch-action:pan-y;
  }
  .ww-list-wrapper{
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .ww-list-wrapper::-webkit-scrollbar{ display:none; }
}