/* project.css — 伴走支援・個別サービスセクション（Figma: 2247:66356 / 2247:66587 / PROJECT）
   実値: グレーグラデパネル radius 32 py 80 / policy-item を流用したジグザグ配置
         見出し行 42.67px Black + ロボット / サブタイトル 24px Black
         チェックリスト 12px角 #1561AB + 16px lh1.6 */

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

/* サービスTOPではグレーパネルの下端とセクション下端の間に120pxの余白が入る
   （Figma 2652:8133 / 2652:8304: Section が y=120 から始まりフレーム下端まで120px）。
   AI・業務改善診断ページのPROJECTはFigma未確認のため、ページ限定で当てる。 */
@media (min-width: 768px) {
  .page-template-page-service .project {
    padding-bottom: var(--space-120);
  }
}

/* 左上に矢羽根を置くバリアント（FEATURE等） */
.project--bg-left .project__bg {
  right: auto;
  left: max(-182.375rem, calc(50% - 227.375rem)); /* 1440px超は中央基準で追従 */
  transform: none;
}

/* 右上の青い矢羽根形状（左右反転で配置） */
.project__bg {
  position: absolute;
  top: 0;
  right: max(-182.375rem, calc(50% - 227.375rem)); /* 1440px超は中央基準で追従 */
  width: 241.0625rem;
  height: 63.25rem;
  transform: scaleX(-1);
  pointer-events: none;
}

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

.project__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;
}

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

.project__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-40);
}

.project__head--reverse {
  flex-direction: row-reverse;
}

.project__heading {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-24);
}

.project__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);
  white-space: nowrap; /* 改行は文言側の<br>で制御（Figma準拠） */
}

.project__lead {
  margin: 0;
  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);
}

.project__head-visual {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: center;
}

.project__head-visual img {
  display: block;
  width: 14.3125rem;
  height: auto;
  object-fit: contain;
}

/* --- 項目カード内の追加要素（policy-item を拡張）--- */
/* 見出しと副題は縦積み（Figma: サービスTOP 4083:8653 の li は flex-col gap 8）*/
.policy-item__title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

.policy-item__title--black {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-widest);
  white-space: nowrap;
}

.policy-item__subtitle {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-card);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-widest);
  white-space: nowrap;
}

.policy-item__text--gray {
  color: var(--color-text-body);
}

/* 「実施内容」見出し（Figma: サービスTOP 4083:8653 / Black 21.33px 字間0.1em・px24インデント）。
   見出しと箇条書きは Figma では gap 8 の同一ボックスだが、実装では .policy-item__body
   （gap 24）直下の兄弟なので、リスト側の負マージン16pxで 24 → 8 に詰める。 */
.project--scheme .policy-item__reco-title {
  padding: 0 var(--space-24);
}

.project--scheme .check-list--flush {
  padding: 0 var(--space-24);
  margin-top: calc(-1 * var(--space-16));
}

/* 画像カード（Figma: 白地 + 影 0,0,2,25% radius 8。図版用） */
.policy-item__image--card {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: var(--space-8);
  border-radius: var(--radius);
  background: var(--color-white);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
}

.policy-item__image--card img {
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: contain;
}

/* 写真をそのまま角丸で（縦横比は素材なり） */
.policy-item__image--photo img {
  aspect-ratio: auto;
  height: 100%;
}

/* 画像+キャプションの列 */
.policy-item__image-col {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-self: stretch;
}

/* 画像ボックスは列の高さいっぱいに伸びるが、img は aspect-ratio で高さが決まるため
   そのままだと上端に寄る。本文が長い項目でも img を上下中央に置く。 */
.policy-item__image-col .policy-item__image {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
}

.policy-item__image-col .policy-item__image img {
  min-width: 0;
}

/* 画像下のキャプション（Figma: 2247:65251 青四角 + 16px） */
.policy-item__image-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  margin: 0;
  margin-top: var(--space-8);
  color: var(--color-black);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

/* 画像が左の項目では画像が40px左へはみ出すため、キャプションは
   カード内（カード左端+40px＝Figma実値）に収める。col起点(card-40)から+80px。 */
.policy-item--img-left .policy-item__image-note {
  margin-left: var(--space-80);
}

.policy-item__image-note::before {
  content: "";
  flex-shrink: 0;
  width: .75rem;
  height: .75rem;
  margin-top: .375rem;
  border-radius: 2px; /* Figma実値 rounded-2 */
  background: var(--color-primary);
}

/* チェック付きリスト（Figma: 12px角 #1561AB radius 2px） */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
  padding: 0 var(--space-24);
  list-style: none;
  width: 100%;
}

.check-list--flush {
  padding: 0;
}

.check-list li {
  position: relative;
  padding-left: var(--space-24);
  color: var(--color-black);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}

.check-list li::before {
  content: "";
  position: absolute;
  top: .4375rem;
  left: 0;
  width: .75rem;
  height: .75rem;
  border-radius: 2px; /* Figma実値 rounded-2（全ページ共通） */
  background: var(--color-accent);
}

/* チェックリストの前見出し（こんな方におすすめ / 例えば… / 実施内容）。
   Figmaはどのセクションも Black 21.33px・字間0.1em で共通。差はインデントだけなので、
   共通分をここに置き、px24インデントが要るバリアント側で padding だけ足す。 */
.policy-item__reco-title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-widest);
}

/* カード内中央の詳細リンク */
.policy-item__more {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: var(--space-24);
}

/* 幅可変ボタン（Figma: px40 py16 gap40 18.286px） */
.btn--auto {
  width: auto;
  justify-content: flex-start;
  gap: var(--space-40);
  padding: var(--space-16) var(--space-40);
  font-size: var(--font-size-h3);
}
.btn--auto::after {
  width: 1rem;
  height: .75rem;
  mask: url("../../images/icon-arrow-right-sm.svg") center / contain no-repeat;
  -webkit-mask: url("../../images/icon-arrow-right-sm.svg") center / contain no-repeat;
}

/* --- 業務改善診断ページ FEATURE（Figma: 2374:10294）--- */
/* section は base.css で既定密着のため、セクション間の40pxはページ側で確保する
   （AIページの .project--ai / .steps--band と同じ扱い）。
   これが無いと COMPARISON のグレーパネル下端と FEATURE の矢羽根、
   FEATURE のグレーパネル下端と STEP の青帯が接してしまう。 */
.page-template-page-shindan .project--shindan,
.page-template-page-shindan .steps {
  margin-top: var(--space-40);
}

/* 本文は黒(#1A1616)・チェック文は#333・字間0.1em・「例えば…」はBlack */
/* 見出し行のロボット（Figma「話す4」: 262.8×320px → 263px描画） */
.project--shindan .project__head-visual img {
  width: 16.4375rem;
}
.project--shindan .policy-item__text--gray {
  color: var(--color-black);
}
.project--shindan .check-list li {
  color: var(--color-text-body);
  letter-spacing: var(--letter-spacing-widest);
}
/* 「例えば…」+チェックは本文より24pxインデント（Figma: px-24ブロック） */
.project--shindan .policy-item__reco-title {
  padding-left: var(--space-24);
}
.project--shindan .check-list {
  padding: 0 var(--space-24);
}

/* --- SP（項目カードの縦積み自体は policy.css のSPブロックが担う）---------- */
@media (max-width: 767px) {
  .project {
    padding: var(--space-24) var(--space-24) var(--space-40);
  }
  .project__panel {
    padding: var(--space-48) 0 var(--space-40);
    border-radius: var(--radius-lg);
  }
  /* 透かしの位置は section.css の .section__watermark（トップ）に合わせる */
  .project__watermark {
    font-size: var(--font-size-en-title);
    top: var(--space-16);
    left: 50%;
    transform: translateX(-50%);
  }
  .project__inner {
    padding: 0 var(--space-24);
  }
  .project__head,
  .project__head--reverse {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-24);
  }
  /* 見出しは全幅・左寄せ。右上に重なる図版のぶんだけ逃がす */
  .project__heading {
    padding-right: var(--space-40);
  }
  .project__title {
    white-space: normal;
    font-size: var(--font-size-h2);
  }
  /* 図版は縦積みの1ブロックとして場所を取らず、見出しの右上に小さく重ねる
     （--reverse でも位置は同じ。絶対配置なので flex の並び順は効かない） */
  .project__head-visual {
    position: absolute;
    top: var(--space-64);
    right: 0;
    flex: none;
  }
  /* サービスTOPのみ、図版をパネル右上の角へ寄せる（上下とも枠外へ逃がす）。
     ⚠ right の -1.2rem は8の倍数スケール外。対応トークンなし・要デザイン確認 */
  .page-template-page-service .project__head-visual {
    top: calc(-1 * var(--space-56));
    right: -1.2rem;
  }
  /* 個別サービスは図版を出さないので、見出しを逃がす必要もない */
  .project--kobetsu .project__head-visual {
    display: none;
  }
  .project--kobetsu .project__heading {
    padding-right: 0;
  }
  .project__head-visual img,
  .project--shindan .project__head-visual img {
    width: 6rem;
  }
  .policy-item__title--black,
  .policy-item__subtitle {
    white-space: normal;
  }
  /* PCの card(24px) はSPでは大きいので h4(16px) まで落とす */
  .policy-item__subtitle {
    font-size: var(--font-size-h4);
  }
  /* PCは画像が40pxはみ出すぶんキャプションを右にずらすが、SPははみ出しが無い。
     画像・本文と同じ左右余白に揃える */
  .policy-item__image-note,
  .policy-item--img-left .policy-item__image-note {
    margin-left: 0;
    padding: 0 var(--space-24);
    font-size: var(--font-size-h5);
  }
  /* PCの「例えば…」+チェックの24pxインデントはSPでは付けない
     （カード側の左右余白だけで十分なため）。
     バリアント側が同じ指定を持つので、同じ詳細度で並べて打ち消す。
     ⚠ --ai は ai.css（このファイルより後に読み込む）で同じ打ち消しをしている */
  .policy-item__reco-title,
  .project--shindan .policy-item__reco-title,
  .project--scheme .policy-item__reco-title {
    padding-left: 0;
    padding-right: 0;
    font-size: var(--font-size-h3);
  }
  .check-list,
  .check-list--flush,
  .project--shindan .check-list,
  .project--scheme .check-list--flush {
    padding: 0;
    margin-top: 0;
  }
  /* SPは図版も写真と同じ「角丸画像をそのまま置く」扱いに揃える
     （PCの白カード＝白地+余白+影 は外す）。図版は切りたくないので contain のまま */
  .policy-item__image--card {
    display: block;
    padding: 0 var(--space-24); /* 写真側（.policy-item__image）と同じ左右余白に戻す */
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .policy-item__image--card img {
    border-radius: var(--radius-md);
  }

  /* 「〇〇について詳しく見る」は文言が長く、SPではカード幅に収まらない（rem基準が
     12.8pxへ上がる一方でカードは狭いため）。ボタン内で折り返してカード幅に収める。
     PCはFigma通り1行のままなので、この指定はSPだけに閉じる。 */
  .policy-item__more .btn {
    position: relative;
    max-width: 100%;
    /* .btn の nowrap を解除。ただし日本語は既定でどこでも改行でき「…について詳しく /
       見る」のように切れるため、keep-all で自動改行を止め、ラベルの \n（<wbr>）で
       指定した位置だけで折り返す。overflow-wrap は \n を持たないラベルの保険。 */
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-align: center;
    /* 矢印を絶対配置で流れから抜き、テキストをボタン幅の中央に置く。左右のpaddingは
       Figmaのpx40のまま揃えているので、テキストの中央＝ボタンの中央になる。
       ⚠ SPのカードは実測271px（390px幅）しかなく、ここに40pxのgapを足すと文字領域が
       1行目（「業務の健康診断について」＝177px）より狭くなり、keep-allの保険
       （overflow-wrap）が効いて文節の途中で割れる。そのため矢印は下で右16pxへ寄せる。 */
    justify-content: center;
    padding-inline: var(--space-40);
  }
  /* 矢印はSPだけpaddingの内側（右16px）に寄せる。PCのpx40のままだと上記の通り
     文字領域が足りず、折り返し位置が壊れるため */
  .policy-item__more .btn::after {
    position: absolute;
    top: 50%;
    right: var(--space-16);
    transform: translateY(-50%);
  }
  /* .btn:hover::after の translateX を上書き（縦中央のオフセットを保つ）。
     実機SPでは効かないが、PCブラウザを狭めた場合に矢印が縦にズレるのを防ぐ */
  @media (hover: hover) {
    .policy-item__more .btn:hover::after {
      transform: translate(var(--space-4), -50%);
    }
  }
}