@charset "utf-8";

/* ==========================================================================
   products.css
   取扱製品ページ専用スタイル
   ------------------------------------------------------------------------
   ※1rem = 10px（reset.css の html { font-size: 62.5%; } 前提）
   ※タイトルセクション・パンくず・セクション見出し（.c-sectitle）・
     ページ内リンク（.c-anchorlink）の共通スタイルは common.css の
     「12. 下層ページ共通パーツ」にあります。
     ここではタイトルセクションの背景画像だけ指定します。
   ========================================================================== */

/* ==========================================================================
   1. タイトルセクション
   ========================================================================== */
.c-pagetitle--products {
  background-image: url("/assets/img/products/img_products_managesystem01.jpg");
}

/* ==========================================================================
   2. 取扱製品
   ========================================================================== */
.p-products__group {
  margin-bottom: 7.2rem;
}

/* 最後のカテゴリとCONTACTの間だけ広くする */
.p-products__group:last-child {
  margin-bottom: 14.4rem;
}

.p-products__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 3.5rem;
  row-gap: 4.8rem;
  margin-top: 3.2rem;   /* デザイン実測：セクション見出しの下34px */
}

/* 支給素材は326×272〜1522×1080でまちまちなので、4:3の枠に切り抜く */
.p-products__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
}

/* デザイン実測：画像の下24px。フォントサイズはタブレット・SPも18pxのまま */
.p-products__title {
  margin-top: 2.4rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-main);
}

/* デザイン実測：製品名の下20px。フォントサイズ・行間はbodyの継承（1.6rem／2） */
.p-products__text {
  margin-top: 2rem;
}

/* ------------------------------ タブレット・SP ------------------------------ */
@media screen and (max-width: 1023px) {
  .p-products__group {
    margin-bottom: 4rem;
  }

  .p-products__group:last-child {
    margin-bottom: 8rem;
  }

  .p-products__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3.2rem;
    row-gap: 4rem;        /* SPデザイン実測：カード間40px */
    margin-top: 2.4rem;   /* SPデザイン実測：セクション見出しの下28px */
  }

  /* 画像・製品名・本文の余白は3点セットで連動するので、まとめて縮める */
  .p-products__title {
    margin-top: 1.8rem;   /* SPデザイン実測：画像の下18px */
  }

  .p-products__text {
    margin-top: 1.2rem;   /* SPデザイン実測：製品名の下13px */
  }
}

/* ------------------------------ SP ------------------------------ */
@media screen and (max-width: 767px) {
  /* 1カラムに積む。row-gapはタブレットの4remをそのまま使う */
  .p-products__list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   3. 拡大画像（ライトボックス）
   ========================================================================== */
/* クリックで拡大できることをカーソルと明度で示す */
.p-products__zoom {
  display: block;
  cursor: zoom-in;
  transition: opacity 0.2s;
}

@media (hover: hover) {
  .p-products__zoom:hover {
    opacity: 0.8;
  }
}

.p-lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: #fff;
  overflow: hidden;
}

.p-lightbox::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

/* 表示時のフェードイン（背景の暗幕も同時に） */
.p-lightbox[open],
.p-lightbox[open]::backdrop {
  animation: p-lightbox-fadein 0.2s ease-out;
}

@keyframes p-lightbox-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 送りボタン・✕ボタンの基準。paddingで画像がボタンに重ならないようにする */
.p-lightbox__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 7rem 7rem 3rem;
}

.p-lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  max-height: 100%;
}

.p-lightbox__img {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 18rem);
  max-height: calc(100dvh - 18rem);
  border-radius: 10px;
}

.p-lightbox__caption {
  flex-shrink: 0;
  margin-top: 1.6rem;
  text-align: center;
  line-height: 1.6;
}

.p-lightbox__name {
  font-size: 1.8rem;
  font-weight: 700;
}

/* 「3 / 9」の位置表示 */
.p-lightbox__count {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.4rem;
}

/* ---------------------- 閉じるボタン ---------------------- */
/* ✕マークは共通ヘッダーのハンバーガーと同じ「2本の線を±45度」方式 */
.p-lightbox__close {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
}

.p-lightbox__closeline {
  position: absolute;
  width: 2.8rem;
  height: 2px;
  background-color: #fff;
}

.p-lightbox__closeline:nth-of-type(1) { transform: rotate(45deg); }
.p-lightbox__closeline:nth-of-type(2) { transform: rotate(-45deg); }

/* ---------------------- 前へ／次へ ---------------------- */
.p-lightbox__nav {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  transform: translateY(-50%);
}

.p-lightbox__nav--prev { left: 1.6rem; }
.p-lightbox__nav--next { right: 1.6rem; }

.p-lightbox__navarrow {
  width: 2.8rem;
  height: 0.76rem;
  background-color: #fff;
  -webkit-mask: url("/assets/img/common/icon_arrow_right_blue.svg") no-repeat center center / contain;
          mask: url("/assets/img/common/icon_arrow_right_blue.svg") no-repeat center center / contain;
}

.p-lightbox__nav--prev .p-lightbox__navarrow {
  transform: scaleX(-1);
}

@media (hover: hover) {
  .p-lightbox__close:hover,
  .p-lightbox__nav:hover {
    opacity: 0.7;
  }
}

/* ------------------------------ SP ------------------------------ */
@media screen and (max-width: 767px) {
  .p-lightbox__inner {
    padding: 6rem 1.6rem 8rem;
  }

  .p-lightbox__img {
    max-height: calc(100vh - 22rem);
    max-height: calc(100dvh - 22rem);
  }

  .p-lightbox__close {
    top: 0.8rem;
    right: 0.8rem;
    width: 4.8rem;
    height: 4.8rem;
  }

  .p-lightbox__nav {
    top: auto;
    bottom: 1.6rem;
    width: 4.8rem;
    height: 4.8rem;
    transform: none;
  }

  .p-lightbox__nav--prev { left: calc(50% - 6.4rem); }
  .p-lightbox__nav--next { right: calc(50% - 6.4rem); }
}