/* =====================================================================
   feature-safety.css — 下層「コープデリの特長 / 安心して使い続けられる」（B04）
   ヘッダー（写真＋タイトル：feature-assort.css の .p-fahero を再利用）
   白カード3つ：
     01 素材や環境に配慮した商品も選べます（テキスト＋画像）
     02 品質と安全への取り組み（3カラム）
     03 サステナビリティへの取り組み（4プロジェクト カルーセル／エコ活 3アイコン）
   PC: 角丸カード。SP: 全幅の白バンド（クリーム地と切り替え）。
   .p-fasec / .p-fahero 系は feature-assort.css を共有。本ファイルは差分のみ。
   ===================================================================== */

.p-safety {
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* safetyページのセクション間はPC/SPとも40px（共有の64pxを上書き。詳細度3クラスで勝つ） */
.p-safety .p-fasec + .p-fasec { margin-top: var(--space-40); }
/* SPのみ改行（≥600pxでは1行） */
@media (min-width: 600px) { .p-safety__sp-br { display: none; } }

/* 見出し左寄せバリエーション（01セクション用） */
.p-fasec__title--left { text-align: left; }

/* ---- 01: 素材や環境に配慮した商品も選べます ---- */
.p-safety__assort {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-32);
}
.p-safety__assort-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.p-safety__assort-text {
  font-size: 16px;
  line-height: 1.625;
  color: var(--text-default);
}
.p-safety__assort-img {
  width: 100%;
  aspect-ratio: 327 / 207;
  border-radius: var(--radius-24);
  overflow: hidden;
}
.p-safety__assort-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* SP: 順番＝見出し→画像→テキスト、見出しは中央寄せ */
@media (max-width: 1023px) {
  .p-safety__assort-body { display: contents; }
  .p-safety__assort .p-fasec__title { order: 1; text-align: center; }
  .p-safety__assort-img { order: 2; }
  .p-safety__assort-text { order: 3; }
}

/* ---- 共通：見出し＋リード（02・03の導入） ---- */
.p-safety__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  text-align: center;
}
.p-safety__head-text {
  font-size: 16px;
  line-height: 1.625;
  color: var(--text-default);
}

/* ---- 02: 品質と安全への取り組み（3カラム） ---- */
.p-safety__cards {
  width: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.p-safety__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.p-safety__card-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 327 / 207;
  object-fit: cover;
  border-radius: var(--radius-24);
}
.p-safety__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.p-safety__card-title {
  font-size: 20px;
  line-height: 1.7;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-default);
}
.p-safety__card-text {
  font-size: 16px;
  line-height: 1.625;
  color: var(--text-default);
}

/* ---- 03: サステナビリティ ---- */
.p-safety__sub {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.p-safety__sub-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  text-align: center;
}
.p-safety__sub-title {
  font-size: clamp(20px, 5.4vw, 28px);
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.p-safety__sub-text {
  font-size: 16px;
  line-height: 1.625;
  color: var(--text-default);
}

/* 4プロジェクト カルーセル（スワイプ＋左右ボタン / carousel.js） */
.p-safety__carousel {
  position: relative;
  width: 100%;
}
.p-safety__viewport {
  overflow: hidden;
  touch-action: pan-y;
}
.p-safety__track {
  list-style: none;
  display: flex;
  gap: var(--space-24);
  transition: transform .35s ease;
  will-change: transform;
}
.p-safety__proj {
  flex: 0 0 auto;
  width: min(320px, 86%);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.p-safety__proj-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 253;
  object-fit: cover;
  border-radius: var(--radius-24);
}
.p-safety__proj-text {
  font-size: 16px;
  line-height: 1.625;
  color: var(--text-default);
}

/* カルーセル左右ボタン（SP は非表示、PC で表示） */
.p-safety__nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  background: var(--container-white);
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.p-safety__nav svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; }
.p-safety__nav:hover:not(:disabled) { border-color: var(--border-primary); background: var(--color-secondary-light); }
.p-safety__nav:focus-visible { outline: 2px solid #0b57d0; outline-offset: 1px; }
.p-safety__nav--prev { left: -20px; }
.p-safety__nav--next { right: -20px; }
.p-safety__nav:disabled { opacity: .3; cursor: default; }
/* SP: 左右ボタンを表示（中央カードの左右端・画像の高さ中央） */
@media (max-width: 1023px) {
  .p-safety__nav { display: block; }
  .p-safety__nav--prev { left: 4px; }
  .p-safety__nav--next { right: 4px; }
}
/* SP専用調整 */
@media (max-width: 599px) {
  .p-fahero__lead { margin-block: 45px; gap: 25px; }  /* リード余白 上45/見出し↔本文25/下45 */
  .p-safety__nav { top: 89px; }                        /* 矢印を画像部分の縦中央へ（translateY(-50%)で中心=top） */
}

/* エコ活（SP：アイコン左＋テキスト右） */
.p-safety__eco {
  width: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.p-safety__eco-item {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}
.p-safety__eco-icon {
  flex: none;
  width: 120px;
  height: 120px;
  object-fit: contain;
}
.p-safety__eco-text {
  font-size: 16px;
  line-height: 1.375;
  color: var(--text-default);
}

/* =====================================================================
   PC（min-width:1024px）
   ===================================================================== */
@media (min-width: 1024px) {
  /* KV画像は下端基準でトリミング */
  .p-fahero__media img { object-position: bottom; }
  .p-safety__sust-br { display: none; }   /* 見出しの改行はSPのみ */

  /* 01: テキスト左 ＋ 画像右 */
  .p-safety__assort {
    flex-direction: row;
    align-items: center;
    gap: var(--space-80);
  }
  .p-safety__assort-body { flex: 1; min-width: 0; }
  .p-safety__assort-img {
    flex: 1;
    min-width: 0;
    aspect-ratio: 327 / 207;
  }

  /* 02: 3カラム横並び */
  .p-safety__head { padding-inline: var(--space-120); }
  .p-safety__cards { flex-direction: row; gap: var(--space-40); }
  .p-safety__card { flex: 1; min-width: 0; }

  /* 03: 見出しリード幅調整 */
  .p-safety__sub { gap: var(--space-32); }
  .p-safety__sub-title { font-size: 28px; }

  /* カルーセル：3カードを横並び表示、左右ボタン */
  .p-safety__carousel {
    padding-inline: var(--space-64);
  }
  .p-safety__track {
    gap: var(--space-40);
  }
  .p-safety__proj {
    width: 400px;
    gap: var(--space-24);
  }
  .p-safety__proj-img img { aspect-ratio: 400 / 253; }
  .p-safety__nav { display: block; }
  /* 左右ボタンを64pxガターの中央へ（ボタン40px→端から12pxで中心=32px） */
  .p-safety__nav--prev { left: 12px; }
  .p-safety__nav--next { right: 12px; }

  /* エコ活：3カラム・アイコン上＋テキスト中央 */
  .p-safety__eco { flex-direction: row; gap: var(--space-40); }
  .p-safety__eco-item {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    text-align: center;
    gap: var(--space-16);
  }
  .p-safety__eco-icon { width: 157px; height: 157px; }
}