/* ============================================
   本店の共通のレイアウト（sayakobo.jp/2026/css/layout.css）
   トップページ（#topLayout）と商品ページ（#itemLayout）の両方で使う。
   パーツは layout.js が描く（クラス名はトップが tl-、商品ページが il- で始まる）。
   トップ専用の固定ブロック（カテゴリーから探す・条件で探す）は top.css にある。
   色と書体は design-proto（アイボリー×ゴールド）に合わせる
   ============================================ */

.tl,
.il,
.tl-fixed-blocks,
.top-preview {
  --tl-gold: #e3af2c;
  --tl-gold-deep: #c9922a;
  --tl-ink: #2f2a22;
  --tl-charcoal: #5c5346;
  --tl-gray: #948c7c;
  --tl-cream: #fbf9f6;
  --tl-cream-deep: #f7efda;
  --tl-line: #e7ddc6;
  --tl-card: #ffffff;
  --tl-radius: 6px;
  --tl-font-en: "Cormorant Garamond", serif;
  --tl-font-serif: "Shippori Mincho", serif;
  --tl-font-body: "Noto Sans JP", sans-serif;
  --tl-gutter: 16px;
}

/* ---------- 全体 ---------- */
.tl {
  max-width: 1120px;
  margin: 0 auto;
  color: var(--tl-ink);
  font-family: var(--tl-font-body);
  /* 並べ方は、画面の広さではなくこの置き場の広さで決める。
     カラーミーのテンプレートはトップページの中身を 500px ほどの幅に収めるので、
     画面の広さで数えると広い画面のとき商品が細くなりすぎる
     （管理画面のプレビューと見た目が食い違う原因だった） */
  container-type: inline-size;
  container-name: tl;
}
.tl img { display: block; max-width: 100%; height: auto; }
.tl ul { list-style: none; margin: 0; padding: 0; }
.tl a { color: inherit; text-decoration: none; }
/* 追加パーツ（.tl-part）は商品ページにも置けるので、.tl の中にいなくても同じ見た目にする */
.tl-part img { display: block; max-width: 100%; height: auto; }
.tl-part ul { list-style: none; margin: 0; padding: 0; }
.tl-part a { color: inherit; text-decoration: none; }

/* 商品ページの入れ物
   中身はカラーミーが先に書き出しているので、並べ替えは order で効かせる（JSを待たない）。
   item_layout.css が読めなければ、テンプレートに書いてある順のまま出る */
.il {
  display: flex;
  flex-direction: column;
  /* パーツどうしの間。24pxだと値段・カテゴリ・商品番号・数量の行が間延びしたので詰めた（2026-11-11）。
     見出しのあるパーツは見出しの上の余白（item.css の .section h2）で区切りを付ける */
  gap: 12px;
  /* 追加パーツの並べ方を、画面の広さではなくこの置き場の広さで決める（.tl と同じ） */
  container-type: inline-size;
  container-name: tl;
}
.il > .il-part,
.il > .tl-part { margin: 0; }
/* 中身が空のパーツ（オプションの無い商品、まだ中身を入れていないランキング）は、
   gap のぶんの隙間も出さない */
.il > .il-part:empty { display: none; }
/* 追加パーツだけ、トップページと同じ文字の色と書体にする（商品ページ本体には触らない） */
.il > .tl-part { color: var(--tl-ink); font-family: var(--tl-font-body); }

.tl-part { margin: 0 0 32px; }
.tl-part--slider,
.tl-part--banner { margin-bottom: 24px; }
.tl-part--title { margin-bottom: 16px; }

.tl-heading {
  margin: 0 var(--tl-gutter) 14px;
  font-family: var(--tl-font-serif);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .06em;
}

/* ---------- スライダー ---------- */
.tl-slider { position: relative; }
.tl-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.tl-slider__track::-webkit-scrollbar { display: none; }
.tl-slider__slide { flex: 0 0 100%; scroll-snap-align: start; }
.tl-slider__link img { width: 100%; }
.tl-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0 0;
}
.tl-slider__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tl-line);
  cursor: pointer;
}
.tl-slider__dot.is-active { background: var(--tl-gold); }
.tl-slider__arrow {
  display: none;
  position: absolute;
  top: calc(50% - 22px);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: var(--tl-ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(47, 42, 34, .15);
}
.tl-slider__arrow--prev { left: 12px; }
.tl-slider__arrow--next { right: 12px; }
/* 横長バナー（828x160）のスライダー。枠の高さが小さいので矢印と点を詰める */
.tl-slider--wide .tl-slider__arrow {
  top: calc(50% - 16px);
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
}
.tl-slider--wide .tl-slider__dots { padding-top: 6px; }

/* ---------- バナー ---------- */
.tl-banner { display: block; margin: 0 var(--tl-gutter); }
.tl-banner img { width: 100%; border-radius: var(--tl-radius); }
.tl-banner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0 var(--tl-gutter) !important;
}
.tl-banner-grid img { width: 100%; border-radius: var(--tl-radius); }
/* 横長バナー（828x160）を並べる。細長いのでスマホは1列、PCで2列 */
.tl-banner-wide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 var(--tl-gutter) !important;
}
.tl-banner-wide img { width: 100%; border-radius: var(--tl-radius); }

/* ---------- 商品 ---------- */
.tl-items--scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 var(--tl-gutter) 6px !important;
  scroll-snap-type: x proximity;
  /* 吸着の位置にも左右の余白を取る（無いと1つ目の商品が画面の端に寄る） */
  scroll-padding-inline: var(--tl-gutter);
  scrollbar-width: thin;
}
.tl-items--scroll .tl-item { flex: 0 0 40%; scroll-snap-align: start; }
.tl-items--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 12px;
  padding: 0 var(--tl-gutter) !important;
}
.tl-item__link { display: block; }
.tl-item__image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--tl-radius);
  background: var(--tl-cream-deep);
}
.tl-item__image img { width: 100%; height: 100%; object-fit: cover; }
.tl-item__soldout {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3px 0;
  background: rgba(47, 42, 34, .7);
  color: #fff;
  font-size: .68rem;
  letter-spacing: .1em;
  text-align: center;
}
.tl-item.is-soldout .tl-item__image img { opacity: .6; }
.tl-item__name {
  display: -webkit-box;
  margin: 8px 0 2px;
  overflow: hidden;
  font-size: .75rem;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tl-item__price {
  margin: 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--tl-gold-deep);
  /* 値段は左、ハートは右。検索結果の商品カードと同じ並べ方 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* 値段のまとまり。会員価格があるときは3行になる */
.tl-item__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
  min-width: 0;
}

/* 会員価格があるときの通常価格。取り消し線を引いて控えめに */
.tl-item__price-was {
  color: #999;
  font-weight: 400;
  font-size: .78rem;
  text-decoration: line-through;
}

/* 会員価格。通常価格より目立たせる */
.tl-item__price-num--member {
  color: #c0392b;
  font-size: 1rem;
}

.tl-item__price-tag {
  color: #c0392b;
  font-weight: 400;
  font-size: .62rem;
}

/* お気に入りのハート。商品へのリンクの中にあるので、押しても飛ばないようにするのは js.js */
.tl-item__fav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -6px -4px -6px 0;
  cursor: pointer;
}
.tl-item__fav svg { display: block; }
.tl-item__fav path { transition: fill .15s ease, stroke .15s ease; }
/* 登録済み。商品ページのハートと同じ色 */
.tl-item__fav.on path { fill: #e0245e; stroke: #e0245e; }

/* カートのボタン。押すと商品ページへ行く（色や大きさを選んでもらうため） */
.tl-item__cart {
  /* 絵と文字をひとまとまりにして真ん中へ。
     共通の指定で img が block になっているため、並べ方を flex で決める */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 100px;
  background: var(--btn-button-color, #7c6d5f);
  color: #fff;
  font-size: .7rem;
  font-weight: 400;
  white-space: nowrap;
}
.tl-item__cart img {
  flex: 0 0 auto;
  width: 18px;
  /* 元が黒い絵なので白へ反転させる */
  filter: brightness(0) invert(1);
}
/* 狭いところでは絵だけにする。文字が入らず潰れるため */
@container tl (max-width: 420px) {
  .tl-item__cart span { display: none; }
}
/* ---------- 横に流れる並びを、マウスで掴めるようにする ---------- */
/* 掴める見た目にするのはマウスのときだけ。指で触れる端末には関係がない */
@media (hover: hover) and (pointer: fine) {
  .tl-items--scroll,
  .tl-shorts,
  .tl-rakuten-banner--scroll { cursor: grab; }

  .tl-items--scroll.is-grabbing,
  .tl-shorts.is-grabbing,
  .tl-rakuten-banner--scroll.is-grabbing {
    cursor: grabbing;
    /* 掴んで動かしている間に、商品名が選ばれてしまわないように */
    user-select: none;
  }
  .is-grabbing a { pointer-events: none; }
}

/* ---------- 楽天から借りたバナー（横に流すとき。並べるときは小バナーと同じ） ---------- */
.tl-rakuten-banner--scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 var(--tl-gutter) 6px !important;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--tl-gutter);
  scrollbar-width: thin;
}
.tl-rakuten-banner--scroll > li { flex: 0 0 72%; scroll-snap-align: start; }
.tl-rakuten-banner--scroll img { width: 100%; border-radius: var(--tl-radius); }

/* ---------- 新着情報（1本だけ置くとき） ---------- */
.tl-news-one {
  display: flex;
  gap: 14px;
  margin: 0 var(--tl-gutter);
  padding: 14px;
  align-items: center;
  border: 1px solid var(--tl-line);
  border-radius: var(--tl-radius);
  background: var(--tl-cream);
}
.tl-news-one__image {
  flex: 0 0 88px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--tl-radius);
  background: var(--tl-cream-deep);
}
.tl-news-one__image img { width: 100%; height: 100%; object-fit: cover; }
.tl-news-one__body { flex: 1 1 auto; min-width: 0; }
.tl-news-one__date {
  display: block;
  margin: 0 0 4px;
  color: var(--tl-gray);
  font-size: .72rem;
  letter-spacing: .08em;
}
.tl-news-one__title {
  margin: 0;
  font-family: var(--tl-font-serif);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.6;
}
.tl-news-one__excerpt {
  display: -webkit-box;
  margin: 6px 0 0;
  overflow: hidden;
  color: var(--tl-charcoal);
  font-size: .78rem;
  line-height: 1.7;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---------- 新着情報 ---------- */
.tl-news {
  padding: 0 var(--tl-gutter) !important;
  border-top: 1px solid var(--tl-line);
}
.tl-news__item { border-bottom: 1px solid var(--tl-line); }
.tl-news__link {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  align-items: center;
}
.tl-news__image {
  flex: 0 0 64px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--tl-radius);
  background: var(--tl-cream-deep);
}
.tl-news__image img { width: 100%; height: 100%; object-fit: cover; }
.tl-news__body { flex: 1 1 auto; min-width: 0; }
.tl-news__date {
  display: block;
  margin: 0 0 3px;
  color: var(--tl-gray);
  font-size: .7rem;
  letter-spacing: .08em;
}
.tl-news__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: .82rem;
  line-height: 1.6;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tl-more {
  display: block;
  width: fit-content;
  margin: 14px auto 0;
  padding: 8px 28px;
  border: 1px solid var(--tl-line);
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--tl-charcoal) !important;
}

/* ---------- タイトル・テキスト ---------- */
.tl-title { display: block; margin: 0 var(--tl-gutter); text-align: center; }
.tl-title__main {
  margin: 0;
  font-family: var(--tl-font-en), var(--tl-font-serif);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--tl-gold);
  letter-spacing: .03em;
}
.tl-title__sub { margin: 6px 0 0; font-size: .8rem; color: var(--tl-gray); letter-spacing: .08em; }
.tl-text { margin: 0 var(--tl-gutter); font-size: .85rem; line-height: 1.9; }
.tl-text a { color: var(--tl-gold-deep); text-decoration: underline; }
.tl-text--light { padding: 18px 20px; border-radius: var(--tl-radius); background: var(--tl-cream-deep); }

/* ---------- 管理画面のプレビュー ---------- */
.top-preview { margin: 0; background: var(--tl-cream); }
.top-preview .tl,
.top-preview .il { padding: 16px 0 40px; }
.tl-placeholder {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 var(--tl-gutter);
  padding: 22px 16px;
  border: 1px dashed var(--tl-line);
  border-radius: var(--tl-radius);
  background: #fff;
  color: var(--tl-gray);
  font-size: .8rem;
  text-align: center;
}
.tl-placeholder strong { color: var(--tl-charcoal); }
.tl-placeholder--notice { border-color: #e7a19a; background: #fdf3f2; }
/* 商品ページのプレビューで、固定パーツの置き場を示す枠 */
.il-placeholder { margin: 0 var(--tl-gutter); }
.tl-part--editable { position: relative; cursor: pointer; }
.tl-part--editable::after {
  content: "";
  position: absolute;
  inset: -4px 4px;
  border: 2px solid transparent;
  border-radius: 8px;
  pointer-events: none;
}
.tl-part--editable:hover::after { border-color: rgba(227, 175, 44, .5); }
.tl-part--editable.is-selected::after { border-color: var(--tl-gold); }
.tl-part--editable.is-hidden { opacity: .35; }
.tl-part--editable.is-hidden::before {
  content: "\975e\8868\793a"; /* 非表示 */
  position: absolute;
  top: 6px;
  right: 22px;
  z-index: 1;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tl-charcoal);
  color: #fff;
  font-size: .65rem;
}

/* ---------- 置き場が広いとき（PCなど） ---------- */
@media (min-width: 769px) {
  /* この2つは .tl の外にあるので、今までどおり画面の広さで見る */
  .tl-fixed-blocks,
  .top-preview { --tl-gutter: 24px; }
}

@container tl (min-width: 769px) {
  /* 置き場そのものには @container が効かないので、中の要素に配って継承させる */
  .tl > *,
  .il > * { --tl-gutter: 24px; }
  .tl-part { margin-bottom: 56px; }
  .tl-heading { font-size: 1.35rem; }
  .tl-slider__slide { flex-basis: 100%; }
  .tl-slider__arrow { display: block; }
  .tl-banner-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .tl-banner-wide { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .tl-items--scroll .tl-item { flex-basis: calc((100% - 48px) / 5); }
  .tl-items--grid { grid-template-columns: repeat(5, 1fr); gap: 28px 18px; }
  .tl-news__image { flex-basis: 88px; }
  .tl-news__link { gap: 18px; padding: 16px 0; }
  .tl-news__title { font-size: .92rem; }
  .tl-news-one { gap: 20px; padding: 18px; }
  .tl-news-one__image { flex-basis: 120px; }
  .tl-news-one__title { font-size: 1.05rem; }
  .tl-rakuten-banner--scroll > li { flex-basis: 40%; }
  .tl-title__main { font-size: 2.6rem; }
  .tl-text { font-size: .9rem; }
  }

/* YouTube（ショート）。縦長のサムネを横に流す */
.tl-shorts{
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tl-shorts::-webkit-scrollbar{
  display: none;
}

.tl-shorts__item{
  flex: 0 0 auto;
  width: 38%;
  max-width: 180px;
}

.tl-shorts__link{
  display: block;
  color: inherit;
  text-decoration: none;
}

.tl-shorts__thumb{
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 8px;
  background: #eee;
  display: block;
}

.tl-shorts__title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 6px;
  font-size: .75rem;
  line-height: 1.4;
}

@container tl (min-width: 768px) {
  .tl-shorts__item{
    width: 160px;
  }
}