/* ==========================================================================
   products.css — フォト商品ページ (products.html) 専用
   接頭辞 .pd- / スコープ .products-page

   デザイン: Figma 38:340 → 342:5954
   座標は原寸書き出し（390x3634）を画素解析して取った。
   デザインのヘッダーは111px、実装は55pxなので、y は 56px 引いてある。
   ========================================================================== */

/* =============== ヒーロー =============== */
.pd-hero {
  position: relative;
  z-index: 1;
  width: 390px;
  height: 234px;
}
.pd-hero__photo {
  width: 390px;
  height: 234px;
  object-fit: cover;
}

/* 右上のコーラル。写真の上に少しだけ乗る */
.pd-hero__coral {
  position: absolute;
  right: -10px;
  top: -6px;
  width: 124px;
  height: 48px;
}

/* 左下のコーラル。中に白抜きでタイトル */
.pd-hero__badge {
  position: absolute;
  z-index: 2;
  left: -18px;
  top: 172px;
  width: 182px;
  height: 131px;
}
.pd-hero__badge img { width: 182px; height: 131px; }
.pd-hero__badge h1 {
  position: absolute;
  left: 18px;
  top: 40px;
  width: 146px;
  font-family: var(--font-kurumilk);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 1px;
  color: #fff;
  text-align: center;
}

/* =============== リード =============== */
.pd-intro {
  position: relative;
  width: 334px;
  margin: 105px auto 0;
}
/* リード文の右端からのぞくベージュの飾り（Figma 342:5911、デザイン x344 / y545） */
.pd-intro::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 316px;
  top: 98px;
  width: 113px;
  height: 72px;
  background: url('/assets/products/pd-decor-beige.svg') no-repeat center / 100% 100%;
  pointer-events: none;
}

.pd-intro__lead {
  font-family: var(--font-zenmaru);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: 2px;
  color: var(--dark);
  text-align: right;
}

.pd-intro__body {
  margin-top: 22px;
  font-family: var(--font-zenmaru);
  font-size: 13px;
  line-height: 1.85;
  color: var(--dark);
}

/* =============== 商品ごとのパネル =============== */
/* デザインのパネルの地は、横553pxの大きな「いびつな丸」（Figma 342:6334 / 342:6413）を
   商品ごとに1つ敷いたもの。画面の左右からはみ出し、1つおきに上下反転している
   （上のパネルの下端のとがりと、下のパネルの上端のとがりが、くびれのようにつながって見える）。
   2026-09-17 に Figma から形を取得（assets/products/pd-panel-blob.svg）。
   それまでは楕円の角丸で代用していた */
.pd-item {
  position: relative;
  isolation: isolate;
  margin-top: 46px;
  padding: 52px 0 44px;
}
.pd-item::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -14px;
  bottom: -46px;
  width: 553px;
  background: url('/assets/products/pd-panel-blob.svg') no-repeat center / 100% 100%;
  transform: translateX(-50%);
  pointer-events: none;
}
/* 2つ目・4つ目…の商品は上下反転（.pd-intro も section なので nth-of-type は奇数） */
.pd-item:nth-of-type(odd)::before {
  top: -46px;
  bottom: -14px;
  transform: translateX(-50%) scaleY(-1);
}
.pd-item + .pd-item { margin-top: 26px; }

/* ---- 商品名のふきだし ---- */
.pd-item__name {
  position: relative;
  width: 221px;
  height: 46px;
  margin-left: 143px;
}
.pd-item__name span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* いびつな丸（assets/products/pd-name-blob.svg）。★本物の形は未取得で、同じ系統の形の代用 */
  background: url('/assets/products/pd-name-blob.svg') no-repeat center / 100% 100%;
  font-family: var(--font-zenmaru);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 2px;
  color: #fff;
  white-space: nowrap;
}
/* ふきだしの右下に付く小さな丸 */
.pd-item__name::after {
  content: '';
  position: absolute;
  left: 173px;
  top: 32px;
  width: 64px;
  height: 24px;
  /* Figma 342:5891 の形 */
  background: url('/assets/products/pd-name-dot.svg') no-repeat center / 100% 100%;
}

/* ---- 写真のカルーセル ---- */
/* 中央のカードが294px、左右に12pxの間隔。前後のカードが35pxずつのぞく */
.pd-carousel {
  position: relative;
  margin-top: 19px;
}

.pd-carousel__track {
  display: flex;
  gap: 12px;
  padding: 0 48px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pd-carousel__track::-webkit-scrollbar { display: none; }

.pd-slide {
  position: relative;
  flex: 0 0 294px;
  scroll-snap-align: center;
}
.pd-slide img {
  width: 294px;
  height: 196px;
  border-radius: 16px;
  object-fit: cover;
}

/* 「ママ人気 No.1！」のバッジ。カルーセルの左上に重ねる */
.pd-item__badge {
  position: absolute;
  z-index: 2;
  left: 25px;
  top: -21px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 93px;
  height: 83px;
  border-radius: 50%;
  background: #f7b52c;
  font-family: var(--font-zenmaru);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}

/* ---- 商品の説明 ---- */
.pd-item__sub {
  /* 現行サイトの説明文は長いものがあるので、幅を決めて折り返す（2026-09-17）。
     デザインの短い1行（「アクリル製のフォトパネル」）の見た目は変わらない */
  width: 320px;
  margin: 23px auto 0;
  font-family: var(--font-zenmaru);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
  text-wrap: balance;
  /* 日本語を文節で折る（「キラキラ輝／く」のような途中の折れを防ぐ）。対応していないブラウザは普通に折れる */
  word-break: auto-phrase;
  letter-spacing: 1px;
  color: var(--dark);
  text-align: center;
}

/* ---- 価格表 ---- */
.pd-price {
  width: 334px;
  margin: 20px auto 0;
  border-collapse: collapse;
  font-family: var(--font-zenmaru);
}

.pd-price th,
.pd-price td {
  /* 列どうしが詰まって「100ラウンド16,000円」のようにくっつかないよう、左右に少し余白 */
  padding: 7px 3px;
  font-size: 15px;
  line-height: 1.2;
  color: var(--dark);
  text-align: center;
  white-space: nowrap;
}

.pd-price thead th {
  padding-bottom: 10px;
  border-bottom: 1px solid #b9ab90;
  font-weight: 700;
  font-size: 14px;
}
/* 当日特別価格の列はコーラル */
.pd-price thead th.is-special,
.pd-price td.is-special { color: var(--pink); }

.pd-price__tax {
  display: block;
  margin-top: 2px;
  font-weight: 500;
  font-size: 10px;
}

.pd-price tbody td {
  border-bottom: 1px dashed #c4b699;
  font-weight: 700;
}
.pd-price tbody tr:last-child td { border-bottom: 0; }

/* サイズ区分（「100ラウンド」「4コマセット」など）と寸法は、長いときだけ折り返す。
   寸法は「×」の後ろで折れるよう、HTML側に <wbr> を入れてある */
.pd-price th.pd-price__label,
.pd-price td.pd-price__label { width: 3.5em; font-weight: 500; font-size: 13px; white-space: normal; line-height: 1.3; word-break: auto-phrase; }
.pd-price td.pd-price__size { font-weight: 700; font-size: 12px; white-space: normal; line-height: 1.3; }

/* =============== 予約への導線 =============== */
.pd-cta {
  margin-top: 56px;
}

.pd-cta__note {
  margin-top: 14px;
  font-family: var(--font-zenmaru);
  font-size: 12px;
  line-height: 1.8;
  color: #a49a97;
  text-align: center;
}

.products-page .footer {
  margin-top: 70px;
}