@charset "UTF-8";
/*=======================================
	breakpoint
=======================================*/
/*=======================================
	hover
=======================================*/
/*=======================================
	中央配置
=======================================*/
/*=======================================
	可変レスポンシブ
=======================================*/
/* PC */
/* TB */
/* SP */
/*=======================================
	ブラウザ別
=======================================*/
/* Safari */
/* Firefox */
/*-------------------------
- products :ページ共通枠（ヘッダーの逃げ／コンテンツ幅）
- products_head :ページタイトルの余白／リード文（h1本体は common.css の .page_ttl）
- products_btn :ページ内共通ボタン
- products_category :製品カテゴリカード
- products_purchase :ご購入
- products_gallery :ご購入の商品イメージ
-------------------------*/
/* ---- productsページ用 変数 ---- */
/* Figma実寸から起こしたアスペクト比。
   Sassのバージョン差で「/」が除算評価されないよう文字列で保持する */
/*=======================================
　products
=======================================*/
/* 既存ヘッダーは position:absolute のため、ページ側で開始位置を確保する */
.products {
  padding-top: 105px;
  /* ヘッダーがハンバーガーへ切り替わる幅（xl）で高さも切り替わる */
}
@media screen and (max-width: 1024px) {
  .products {
    padding-top: 60px;
  }
}
.products .products__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

/* PC/SPで改行位置が異なる箇所の制御 */
.products-br--pc {
  display: inline;
}
@media screen and (max-width: 768px) {
  .products-br--pc {
    display: none;
  }
}

.products-br--sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .products-br--sp {
    display: inline;
  }
}

/*=======================================
　products_head
=======================================*/
/* Figma PC : ttl(42) → Frame 532 padding 60 0 → 一覧
   Figma SP : contents-header gap 30 ／ リードは Frame 43 padding-top 10 */
.products__head {
  padding-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .products__head {
    padding-bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .products__head .page_ttl {
    margin-top: 30px;
  }
}
.products__head .products__lead {
  margin-top: 60px;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.08em;
  text-align: center;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .products__head .products__lead {
    margin-top: 40px;
    font-size: 16px;
    line-height: 24px;
  }
}

/*=======================================
　products_btn
=======================================*/
/* Figma btn : #CFAD75 / radius 999 / 白文字。右端にリンクアイコン */
.products-btn {
  display: flex;
  gap: 14px;
  width: 299px;
}

.products-btn .products-btn__blank {
  position: absolute;
  top: 50%;
  right: 25px;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
}
.products-btn .products-btn__icon--cart {
  width: auto;
  height: 25px;
  filter: brightness(0) invert(1);
}
.products-btn .products-btn__icon--shop {
  width: 28px;
  height: auto;
}

/* ご購入の横長ボタン（Figma PC 408×60 ／ SP 299×50） */
.products-btn--wide {
  width: 408px;
  height: 60px;
  padding-right: 15px;
  /* Figma Frame 556 padding */
  font-size: 20px;
}
@media screen and (max-width: 768px) {
  .products-btn--wide {
    width: 299px;
    height: 50px;
    padding-right: 20px;
  }
}
.products-btn--wide.products-btn--arrow::after {
  right: 35px;
}
@media screen and (max-width: 768px) {
  .products-btn--wide.products-btn--arrow::after {
    right: 25px;
  }
}
.products-btn--wide .products-btn__blank {
  right: 35px;
}
@media screen and (max-width: 768px) {
  .products-btn--wide .products-btn__blank {
    right: 25px;
  }
}

/*=======================================
　products_category
=======================================*/
/* Figma Frame 538 : PC gap 60 ／ SP Product-info padding 60 20 + gap 40 */
.products-categories .products__inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media screen and (max-width: 768px) {
  .products-categories .products__inner {
    gap: 40px;
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* Figma PC : 1280×430（左テキスト545 / 右画像735）／ SP : 335幅の縦積み */
.products-category {
  display: grid;
  grid-template-columns: 545fr 735fr;
  overflow: hidden;
  border-radius: 20px;
  background: #F6F6F8;
  /* 2カラムのままだとテキスト側が狭くなりすぎるため、
     既存ヘッダーがハンバーガーへ切り替わる幅（xl）で縦積みへ変更する */
  /* 画像。PCは右カラム全高、縦積み時は上部 */
  /* Figmaのトリミング（scaleMode: CROP / imageTransform）を枠に対する比率で再現。
     PC/SPで枠の縦横比が異なるため、同じ比率でも表示範囲は自動的に変わる */
}
@media screen and (max-width: 1024px) {
  .products-category {
    grid-template-columns: 1fr;
  }
}
.products-category .products-category__media {
  position: relative;
  order: 2;
  overflow: hidden;
  aspect-ratio: 735 / 430;
}
@media screen and (max-width: 1024px) {
  .products-category .products-category__media {
    order: 0;
  }
}
@media screen and (max-width: 768px) {
  .products-category .products-category__media {
    aspect-ratio: 335 / 192;
  }
}
.products-category .products-category__img {
  position: absolute;
  max-width: none;
}
.products-category .products-category__body {
  order: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 20%;
  /* Figma 109 / 545 */
  padding-right: 20px;
  /* 縦積み時。左右はFigmaにない幅のため控えめな固定値とする */
}
@media screen and (max-width: 1024px) {
  .products-category .products-category__body {
    padding: 30px 40px 40px;
  }
}
@media screen and (max-width: 768px) {
  .products-category .products-category__body {
    padding: 26px 15px 35px;
  }
}
.products-category .products-category__ttl {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.4;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .products-category .products-category__ttl {
    font-size: 24px;
  }
}
.products-category .products-category__txt {
  margin-top: 23px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  /* Figma 180 PERCENT */
  color: #666666;
}
@media screen and (max-width: 768px) {
  .products-category .products-category__txt {
    margin-top: 13px;
  }
}
.products-category .products-category__action {
  margin-top: 40px;
  /* Figma Frame 535 gap */
}
@media screen and (max-width: 768px) {
  .products-category .products-category__action {
    margin-top: 35px;
    /* gap 25 ＋ Frame 45 padding-top 10 */
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .products-category .products-category__action .products-btn {
    width: 250px;
    margin: 0 auto;
  }
}

/* カテゴリ画像のトリミング値（Figma imageTransform 由来。PC/SP共通） */
.products-category__img--01 {
  left: -7.755%;
  top: -42.16%;
  width: 115.51%;
  height: 284.316%;
}

.products-category__img--02 {
  left: -38.992%;
  top: -20%;
  width: 140.007%;
  height: 136.103%;
}

.products-category__img--03 {
  left: -14.338%;
  top: -1.163%;
  width: 118.367%;
  height: 101.163%;
}

.products-category__img--04 {
  left: -8.844%;
  top: -0.85%;
  width: 118.996%;
  height: 101.7%;
}

/*=======================================
　products_purchase
=======================================*/
/* Figma PC : Frame 563 padding 60 0 100 0 ／ 中に 1280×440 の角丸ボックス
   Figma SP : 全幅ベタ塗り・角丸なし */
.products-purchase {
  padding: 60px 20px 100px;
  /* 2導線。PC横並び／SP縦積み */
}
@media screen and (max-width: 768px) {
  .products-purchase {
    padding: 0;
  }
}
.products-purchase .products-purchase__box {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 37px 20px 50px;
  border-radius: 20px;
  background: #F8F3EA;
}
@media screen and (max-width: 768px) {
  .products-purchase .products-purchase__box {
    max-width: none;
    padding-top: 50px;
    border-radius: 0;
  }
}
.products-purchase .products-purchase__inner {
  width: 100%;
  max-width: 844px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .products-purchase .products-purchase__inner {
    max-width: 335px;
  }
}
.products-purchase .products-purchase__ttl {
  font-weight: 500;
  font-size: 30px;
  line-height: 1.4;
  text-align: center;
  color: #1D1D1F;
}
.products-purchase .products-purchase__body {
  margin-top: 18px;
}
@media screen and (max-width: 768px) {
  .products-purchase .products-purchase__body {
    margin-top: 35px;
  }
}
.products-purchase .products-purchase__routes {
  display: flex;
  justify-content: center;
  gap: 28px;
  /* Figma Frame 559 gap */
}
@media screen and (max-width: 768px) {
  .products-purchase .products-purchase__routes {
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }
}
.products-purchase .products-purchase__route {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 408px;
  min-width: 0;
  /* PCの狭い幅で2列が縮めるようにする */
  max-width: 100%;
}
@media screen and (max-width: 768px) {
  .products-purchase .products-purchase__route {
    width: 100%;
  }
}
.products-purchase .products-purchase__label {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  color: #1D1D1F;
}
.products-purchase .products-btn {
  margin-top: 20px;
  /* Figma Frame 557 gap */
}

/*=======================================
　products_gallery
=======================================*/
/* Figma上は重なりを含む自由配置のため、枠に対する比率でabsolute配置する */
.products-purchase__gallery {
  position: relative;
  width: 100%;
  max-width: 778px;
  /* Figma Group 778×150 */
  margin: 40px auto 0;
  /* Figma Frame 560 gap */
  aspect-ratio: 778 / 150;
}
@media screen and (max-width: 768px) {
  .products-purchase__gallery {
    max-width: none;
    aspect-ratio: 335 / 446.448;
  }
}
.products-purchase__gallery .products-gallery__item {
  position: absolute;
  display: block;
  overflow: hidden;
}
.products-purchase__gallery .products-gallery__img {
  position: absolute;
  max-width: none;
}

/* ---- PC配置（Figma Clip path group 由来） ---- */
.products-gallery__item--bed {
  left: 0;
  top: 4.435%;
  width: 27.481%;
  height: 95.565%;
}
.products-gallery__item--bed .products-gallery__img {
  left: -14.434%;
  top: -10.311%;
  width: 116.463%;
  height: 124.054%;
}

.products-gallery__item--chair {
  left: 27.058%;
  top: 1.333%;
  width: 16.676%;
  height: 98.667%;
}
.products-gallery__item--chair .products-gallery__img {
  left: -98.378%;
  top: -3.972%;
  width: 198.391%;
  height: 124.014%;
}

.products-gallery__item--desk {
  left: 42.94%;
  top: 26.224%;
  width: 24.949%;
  height: 71.775%;
}
.products-gallery__item--desk .products-gallery__img {
  left: -3.24%;
  top: -3.426%;
  width: 106.532%;
  height: 109.751%;
}

.products-gallery__item--shelf {
  left: 70.854%;
  top: 10.367%;
  width: 18.119%;
  height: 89.632%;
}
.products-gallery__item--shelf .products-gallery__img {
  left: -68.781%;
  top: 0;
  width: 168.737%;
  height: 104.07%;
}

.products-gallery__item--hanger {
  left: 88.393%;
  top: 0;
  width: 11.607%;
  height: 100%;
}
.products-gallery__item--hanger .products-gallery__img {
  left: -101.235%;
  top: -6.667%;
  width: 210.283%;
  height: 109.133%;
}

/* ---- SP配置（3段組。Figma products_top_sp 由来） ---- */
@media screen and (max-width: 768px) {
  .products-gallery__item--bed {
    left: 1.765%;
    top: 0.521%;
    width: 63.821%;
    height: 32.108%;
  }
  .products-gallery__item--bed .products-gallery__img {
    left: -6.88%;
    top: -5.644%;
    width: 112.461%;
    height: 119.831%;
  }
  .products-gallery__item--chair {
    left: 65.587%;
    top: 0;
    width: 32.648%;
    height: 33.151%;
  }
  .products-gallery__item--chair .products-gallery__img {
    left: -105.08%;
    top: 2.459%;
    width: 211.794%;
    height: 111.151%;
  }
  .products-gallery__item--desk {
    left: 12.745%;
    top: 34.271%;
    width: 74.509%;
    height: 31.011%;
  }
  .products-gallery__item--desk .products-gallery__img {
    left: -3.165%;
    top: -9.309%;
    width: 106.532%;
    height: 109.751%;
  }
  .products-gallery__item--shelf {
    left: 15.482%;
    top: 68.143%;
    width: 42.08%;
    height: 30.115%;
  }
  .products-gallery__item--shelf .products-gallery__img {
    left: -74.064%;
    top: -3.245%;
    width: 183.647%;
    height: 113.266%;
  }
  .products-gallery__item--hanger {
    left: 57.562%;
    top: 66.402%;
    width: 26.956%;
    height: 33.599%;
  }
  .products-gallery__item--hanger .products-gallery__img {
    left: -101.235%;
    top: -6.667%;
    width: 210.283%;
    height: 109.133%;
  }
}