/* ==========================================================================
   products-pc.css — フォト商品ページ (products.html) の PC・横長画面用
   <link media="(min-width: 1024px)"> で読み込む。方針は common-pc.css の冒頭を参照。

   - ヒーロー … 写真を横長の角丸に。タイトルのコーラルは左下に重ねたまま拡大
   - 商品 … ベージュの枠を横長にして「写真｜商品名・説明・価格表」の2列。1つおきに左右を入れ替える
     写真はマウスで横スクロールしにくいので、カルーセルをやめて2列のタイルで全部見せる
     （枚数が奇数のときは1枚目を大きく）
   ========================================================================== */

/* =============== ヒーロー =============== */
.pd-hero {
  width: min(1100px, calc(100% - 2 * var(--pc-gutter)));
  height: auto;
  margin: 50px auto 0;
}
.pd-hero__photo {
  display: block;
  width: 100%;
  height: clamp(320px, 32vw, 440px);
  border-radius: 32px;
}
.pd-hero__coral {
  right: -40px;
  top: -24px;
  width: 200px;
  height: 77px;
}
.pd-hero__badge {
  left: -40px;
  top: auto;
  bottom: -70px;
  zoom: 1.6;
}

/* =============== リード =============== */
.pd-intro {
  width: min(760px, calc(100% - 2 * var(--pc-gutter)));
  margin-top: 150px;
}
.pd-intro__lead {
  font-size: 32px;
  letter-spacing: 4px;
  text-align: center;
}
.pd-intro__body {
  margin-top: 30px;
  font-size: 17px;
  line-height: 2;
  letter-spacing: 0.5px;
}

/* =============== 商品ごとのパネル =============== */
.pd-item {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "photos name"
    "photos sub"
    "photos price";
  column-gap: clamp(40px, 5vw, 70px);
  align-items: start;
  width: min(1100px, calc(100% - 2 * var(--pc-gutter)));
  margin: 90px auto 0;
  padding: 64px clamp(40px, 5vw, 72px);
  /* スマホ版の「いびつな丸」の地は横長の枠には合わないので、PC では角丸の面にする */
  background: #e8dac0;
  border-radius: 64px;
}
.pd-item::before,
.pd-intro::after { display: none; }
.pd-item + .pd-item { margin-top: 48px; }

/* 1つおきに左右を入れ替える（.pd-intro も section なので、商品は2番目から数える） */
.pd-item:nth-of-type(odd) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-areas:
    "name  photos"
    "sub   photos"
    "price photos";
}

.pd-item__name {
  grid-area: name;
  margin: 8px 0 0;
  zoom: 1.3;
}

/* ---- 写真（PC ではタイル） ---- */
.pd-carousel {
  grid-area: photos;
  margin-top: 0;
}
.pd-carousel__track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  overflow: visible;
}
.pd-slide { flex: none; }
.pd-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}
/* 枚数が奇数（1枚・3枚）のときは、1枚目を横いっぱいに */
.pd-slide:first-child:nth-last-child(odd) { grid-column: 1 / -1; }

.pd-item__badge {
  left: -24px;
  top: -36px;
  zoom: 1.3;
}

/* ---- 商品の説明 ---- */
.pd-item__sub {
  grid-area: sub;
  width: auto;
  margin: 34px 0 0;
  font-size: 17px;
  line-height: 1.8;
  text-align: left;
  text-wrap: pretty;
}

/* ---- 価格表 ---- */
.pd-price {
  grid-area: price;
  width: 100%;
  margin: 26px 0 0;
}
.pd-price th,
.pd-price td {
  padding: 11px 8px;
  font-size: 17px;
}
.pd-price thead th { font-size: 15px; padding-bottom: 12px; }
.pd-price__tax { font-size: 12px; }
.pd-price th.pd-price__label,
.pd-price td.pd-price__label { width: 6em; font-size: 15px; }
.pd-price td.pd-price__size { font-size: 15px; }

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

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