@charset "UTF-8";
/* ============================================
   ISHIDA JOURNAL - 埋め込み専用CSS エントリ
   出力: assets/css/embed.css
   役割: 商品詳細・カテゴリ・トップへの埋め込み用CSS。

   依存:
     ・カード本体（.up-d_journal-card 系）の base は detail.css に依存。
       埋め込み配置先ページ（URL取り込みページ）には
       detail.css + embed.css の両方を登録すること。
     ・ヘッダー/フッターは header-footer.css。
   ============================================ */
/* ============================================================
   ISHIDA JOURNAL - 埋め込み専用スタイル
   出力: assets/css/embed.css
   役割: 商品詳細・カテゴリ・トップへの埋め込み用CSS。

   依存:
     ・カード本体（.up-d_journal-card / -thumb / -title など）の base スタイルは
       detail.css 側に定義されている。埋め込み配置先ページ（URL取り込みページ）には
       detail.css + embed.css の両方を登録すること。
     ・JS (journal-embed.js) でフィルタ + 画像ハイドレート完了後に
       .up-d_is-ready 付与でフェードイン。
     ・data-collection-list-content の wrapper div は display:contents で透過。

   レイアウト:
     ・横スクロール（商品詳細・トップ）: PC 5カラム + 6枚目10〜15%チラ見え
     ・縦積み（カテゴリ用）
     ・カードは一覧と同じ <article class="up-d_journal-card"> を使うが、
       埋め込み内では公開日・著者を display:none でコンパクト化

   仕様根拠: MEETING_NOTES §A5 / Notion STEP 5
   ============================================================ */
.up-d_journal-section {
  width: 100%;
  padding-inline: 50px;
  margin-inline: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.up-d_journal-section.up-d_is-ready {
  opacity: 1;
  visibility: visible;
}

/* 見たまま編集画面ではJSが走らず .up-d_is-ready が付かないので強制表示
   （ガワ要素に [data-element-id] が付くのを利用） */
[data-element-id] .up-d_journal-section {
  opacity: 1;
  visibility: visible;
}

/* 見たまま編集画面では先頭10件のみ表示（A-BiSU側の list_number 500 だと
   編集画面が縦に長くなりすぎ編集しづらいため、11件目以降を非表示）。
   本番では [data-element-id] が付かないので 500件すべて出力 →
   journal-embed.js が URL でフィルタ + 最大10件にカット。
   仕様根拠: MEETING_NOTES §A3-1 / _template DEVELOPMENT_GUIDE.md §5 */
[data-element-id] .up-d_journal-section .up-d_journal-card:nth-child(n+11) {
  display: none;
}

/* 商品詳細ページ専用の上下余白
   配置先（itemdetail_2column の上）が商品情報に密接しており、独立したコンテンツとして
   見せるため上下にスペースを確保する。
   A-BiSU の埋め込みコード側の <div class='up-d_journal-section'> に
   modifier クラス `up-d_journal-section--product` を併記して有効化。 */
.up-d_journal-section.up-d_journal-section--product {
  margin-block: 60px 85px;
}

/* カテゴリページ専用の上余白 + 順序固定
   配置先（.block_category_menu の末尾）の最後のサイドメニュー項目との間隔を確保。
   `order: 999` は、親要素 (.block_category_menu) が SP/PC問わず flexbox の場合に
   強制的に最下部へ移動するための保険（取り込み先サイト側のレイアウトで HTML 末尾でも
   見た目上は最上部に表示されてしまう現象への対処）。
   親が block でも order は無害なので常時付与しておく。
   A-BiSU の埋め込みコード側の <div class='up-d_journal-section'> に
   modifier クラス `up-d_journal-section--category` を併記して有効化。 */
.up-d_journal-section.up-d_journal-section--category {
  margin-top: 60px;
  order: 999;
}

/* A-BiSU の data-collection-list-content ラッパー div を透過 */
.up-d_journal-section [data-collection-list-content] {
  display: contents;
}

/* 横スクロール（商品詳細・トップ）: PC 5カラム + 6枚目10〜15%チラ見え */
.up-d_journal-section .up-d_journal-list {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-top: 30px;
  /* スクロールバー非表示（機能は残してスクロール可能） */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* 旧Edge / IE */
}

.up-d_journal-section .up-d_journal-list::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

.up-d_journal-section .up-d_journal-list .up-d_journal-card {
  flex: 0 0 18%; /* PC: 5カラム + 6枚目チラ見え（メモ準拠） */
  scroll-snap-align: start;
}

/* 縦積み（カテゴリ用） */
.up-d_journal-section .up-d_journal-list--category {
  display: block;
  overflow-x: visible;
}

.up-d_journal-section .up-d_journal-list--category .up-d_journal-card {
  flex: none;
  width: 100%;
}

.up-d_journal-section .up-d_journal-list--category .up-d_journal-card + .up-d_journal-card {
  margin-top: 24px;
}

/* 埋め込み内のカードはコンパクト表示: 公開日と著者を非表示 */
.up-d_journal-section .up-d_journal-card-date,
.up-d_journal-section .up-d_journal-card-author {
  display: none;
}

/* 「コラム一覧はこちら」ボタン（トップ埋め込み末尾） */
.up-d_journal-more {
  margin-top: 32px;
  text-align: center;
}

.up-d_journal-more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 44px;
  border: 1px solid #ada27d;
  background: #fff;
  color: #948456;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.up-d_journal-more a:hover {
  background: #ada27d;
  color: #fff;
}

/* 右向きシェブロン（currentColor でテキスト色に追従） */
.up-d_journal-more a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 1024px) {
  /* 埋め込み横スクロール: TAB 3カラム */
  .up-d_journal-section .up-d_journal-list .up-d_journal-card {
    flex: 0 0 30%;
  }
}
@media (max-width: 768px) {
  /* 埋め込み横スクロール: SP 1カラム + チラ見え */
  .up-d_journal-section .up-d_journal-list .up-d_journal-card {
    flex: 0 0 85%;
  }
  .up-d_journal-section.up-d_journal-section--product {
  padding-inline: 0px;
}
  /* 「コラム一覧はこちら」ボタンも一覧へ戻るに合わせて padding 縮小 */
  .up-d_journal-more {
    margin-top: 24px;
  }
  .up-d_journal-more a {
    padding: 14px 32px;
  }
}
/* ============================================================
   プレビュー専用: preview-embed.html（3パターン埋め込みデモ）
   ・JS なしで全 section を見せるため opacity/visibility を強制で1に
   ・3ブロック（商品詳細 / カテゴリ / トップ）を縦に並べる枠とラベル
   ※ A-BiSU 側ページにはこれらのクラスが出現しないため、登録CSSに含まれても無害
   ============================================================ */
.up-d_journal-preview-main {
  padding: calc(40px + var(--up-d-header-h, 127px)) 0 60px;
}

.up-d_journal-preview-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

.up-d_journal-preview-head {
  text-align: center;
  margin-bottom: 40px;
}

.up-d_journal-preview-title {
  font-size: 28px;
  font-weight: bold;
  color: #222;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.up-d_journal-preview-lead {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 400;
  color: #888;
  letter-spacing: 0.04em;
  line-height: 1.8;
}

.up-d_preview-block {
  margin-top: 60px;
}

.up-d_preview-block-title {
  font-size: 18px;
  font-weight: bold;
  color: #222;
  letter-spacing: 0;
  line-height: 1.5;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

/* プレビューでは JS が走らないので、強制で表示状態に */
.up-d_journal-preview-main .up-d_journal-section {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 768px) {
  .up-d_journal-preview-main {
    padding: calc(24px + var(--up-d-header-h, 127px)) 0 40px;
  }
  .up-d_journal-preview-inner {
    padding-inline: 16px;
  }
  .up-d_journal-preview-title {
    font-size: 22px;
  }
  .up-d_preview-block {
    margin-top: 40px;
  }
  .up-d_preview-block-title {
    font-size: 16px;
  }
}