/* policy.css — OUR POLICYセクション（Figma: Frame 1895 2008:10277）
   実値: グレーグラデパネル radius 32px pt 120 pb 80 内側px 80
         カード radius 16 py 32 影 0,0,12.5,5% / タイトル 25.6px Black
         本文 16px Regular lh 1.8 / 交互レイアウトで画像がカード外へ40pxはみ出す */

.policy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--space-120);
  overflow: hidden;
}

/* 左上の青い矢羽根形状（Figma: Rectangle 201。実寸配置） */
.policy__bg {
  position: absolute;
  top: 0;
  left: max(-182.375rem, calc(50% - 227.375rem)); /* 1440px超は中央基準で追従 */
  width: 241.0625rem;
  height: 63.25rem;
  pointer-events: none;
}

.policy__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--layout-max);
  padding: var(--space-120) 0 var(--space-80);
  border-radius: var(--radius-32);
  background: var(--gradient-panel-gray);
}

.policy__watermark {
  position: absolute;
  top: 2.1875rem;
  left: 2.5rem;
  margin: 0;
  font-size: var(--font-size-watermark);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-none);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  background: var(--gradient-watermark-gray);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.5;
  pointer-events: none;
}

/* 透かしは語ごとの span。PCは1語1行（従来の nl2br と同じ見た目）。
   SPはスペース区切りの1行（components/watermark.css で上書き）。 */
.policy__watermark span {
  display: block;
}

.policy__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-80);
  width: 100%;
  padding: 0 var(--space-80);
}

/* 導入行：イラスト + 見出し・リード */
.policy__head {
  display: flex;
  align-items: stretch; /* Figma: イラストは行の高さにフィット（h-full） */
  justify-content: space-between;
  gap: var(--space-40);
}

.policy__head-visual {
  position: relative;
  flex: 1;
  min-width: 0;
  align-self: stretch;
}

/* イラストは行の高さ（=見出し・リード側の高さ）にフィットさせて中央配置（Figma: h-full）。
   絶対配置にしないと画像の固有サイズが行の高さを押し広げてしまう */
.policy__head-visual img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
}

.policy__head-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 32.5rem; /* Figma実値: カード本文と同じ520px（flex等分500pxだとリード1行目が折れる） */
  flex-shrink: 0;
}

.policy__title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.policy__lead {
  margin: 0;
  /* 1行目「…迷いやムダが減る。」(26文字)が末尾字間ぶんで520pxを3pxだけ超えるため、
     行末の字間を吸収する余裕を持たせる（Figmaは行末トラッキングなしで520に収まる） */
  width: calc(100% + var(--space-8));
  max-width: 48rem;
  color: var(--color-black);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

/* 交互カードリスト */
.policy__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  margin: 0;
  padding: 0;
  list-style: none;
}

.policy-item {
  display: flex;
  width: 100%;
}

.policy-item__card {
  display: flex;
  width: calc(100% - var(--space-40));
  padding: var(--space-32) 0;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-drop-sm);
}

.policy-item__inner {
  position: relative;
  display: flex;
  gap: var(--space-40);
  align-items: flex-start;
  /* カード幅+40pxを維持（flexで縮むと画像が細くなり40pxのはみ出しが消えるため） */
  flex-shrink: 0;
  width: calc(100% + var(--space-40));
}

/* 画像が左：カードを右に寄せ、画像がカード左端から40pxはみ出す */
.policy-item--img-left .policy-item__card {
  margin-left: auto;
}
.policy-item--img-left .policy-item__inner {
  left: calc(-1 * var(--space-40));
}

/* 画像が右：カードは左寄せ、画像がカード右端から40pxはみ出す */
.policy-item--img-right .policy-item__card {
  margin-right: auto;
}

.policy-item__image {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius);
}

.policy-item__image img {
  display: block;
  width: 100%;
  aspect-ratio: 503 / 274;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.policy-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 32.5rem;
  flex-shrink: 0;
}

.policy-item--img-left .policy-item__body {
  padding-right: var(--space-40);
}
.policy-item--img-right .policy-item__body {
  padding-left: var(--space-40);
}

.policy-item__title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.policy-item__bar {
  display: block;
  width: 3.75rem;
  height: .375rem;
  background: var(--color-primary);
}

.policy-item__text {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose);
  letter-spacing: var(--letter-spacing-widest);
}

/* --- SP: カードは縦積み・画像の40pxはみ出しギミックは解除 ----------------- */
@media (max-width: 767px) {
  .policy {
    padding: var(--space-48) var(--space-24);
  }
  .policy__panel {
    padding: var(--space-48) 0 var(--space-24);
    overflow: hidden;

  }
  .policy__inner {
    gap: var(--space-24);
    padding: 0 var(--space-24);
  }
  .policy__head {
    flex-direction: column;
    gap: var(--space-24);
  }
  .policy__list {
    gap: var(--space-24);
  }
  /* SPはイラストを省き、見出し・リードに幅を使う */
  .policy__head-visual {
    display: none;
  }
  .policy__head-body {
    width: 100%;
  }
  .policy__title {
    font-size: var(--font-size-h2);
    text-align: center;
  }
  /* PC用の<br>を無効化し、SPは自然折返し＋バランスで末尾の孤立文字を防ぐ */
  .policy__lead br { display: none; }
  .policy-item__card {
    width: 100%;
    padding: var(--space-24) 0;
  }
  .policy-item__inner {
    flex-direction: column;
    width: 100%;
    gap: var(--space-24);
  }
  .policy-item__title {
    font-size: var(--font-size-h3);
  }
  /* PCは互い違い（DOM順が項目ごとに逆）だが、SPは常に画像→本文の順に統一 */
  .policy-item__image,
  .policy-item__image-col {
    order: -1;
  }
  .policy-item--img-left .policy-item__inner {
    left: 0;
  }
  .policy-item--img-left .policy-item__body,
  .policy-item--img-right .policy-item__body {
    width: 100%;
    padding: 0 var(--space-24);
    gap: var(--space-16);
  }
  .policy-item__bar {
    height: 0.2rem;
  }
  .policy-item__image {
    width: 100%;
    padding: 0 var(--space-24);
  }
  /* SPは事例・メディアカードと画像比率を統一（16:9） */
  .policy-item__image img {
    aspect-ratio: var(--ratio-16-9);
  }
}