/* ==========================================================================
   cards.css — カード系コンポーネント（担当A・Figma実測値・全てトークン参照）
   c-tag / p-news__item(3191:33427) / p-recruit-information__item(3191:32837) /
   c-feature-card(3191:33468) / p-locations__item(3191:32862) /
   c-card(3191:32830) / p-faq__item(3191:33460)
   ========================================================================== */

/* --------------------------------------------------------------------------
   c-tag — タグ（news / recruit-information 共通）
   -------------------------------------------------------------------------- */
.c-tag {
  display: inline-block;
  padding: var(--space-2) var(--space-8) var(--space-4); /* 上2px 左右8px 下4px（Figma実測） */
  border: var(--border-width-hairline) solid var(--color-primary);
  border-radius: var(--radius-xs);
  background: var(--color-bg-tag);
  color: var(--color-text);
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
}

/* --------------------------------------------------------------------------
   p-news__item / p-recruit-information__item — 外部リンクカード（同系構造）
   -------------------------------------------------------------------------- */
.p-news__item,
.p-recruit-information__item {
  min-width: 19rem; /* 304px（Figma実測） */
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: clip;
}

.p-news__item-link,
.p-recruit-information__item-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.p-news__img img,
.p-recruit-information__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio-golden); /* Figmaレイヤー名「1.618:1 (Golden Ratio)」 */
  object-fit: cover;
}

.p-news__item-body,
.p-recruit-information__item-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-16);
  padding: var(--space-24);
}

.p-news__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-8);
}

.p-recruit-information__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-16); /* newsは8px・recruitは16px（Figma実測） */
}

.p-news__tags,
.p-recruit-information__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.p-news__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.p-recruit-information__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* 2px（Figma実測） */
}

.p-news__date {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}

.p-news__title {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

.p-news__excerpt {
  /* 本文はAPI取得の記事抜粋で長さが揃わないため、3行で打ち切る */
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.p-recruit-information__name {
  margin: 0;
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

.p-recruit-information__position {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
}

.p-news__button,
.p-recruit-information__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  border-top: var(--border-width-hairline) solid var(--color-primary);
  padding-top: var(--space-16);
  padding-inline: var(--space-24);
}

.p-news__more,
.p-recruit-information__more {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

.p-news__more img,
.p-recruit-information__more img {
  display: block;
  width: 0.75rem;  /* 12px */
  height: 0.75rem; /* 12px */
}

/* hover / focus（⚠ inferred）: カード全体がリンクなので、押せる目印である
   「詳細を見る」に下線を出す。カード面の色は変えない（写真の見え方を保つ）。 */
.p-news__item-link:hover .p-news__more,
.p-news__item-link:focus-visible .p-news__more,
.p-recruit-information__item-link:hover .p-recruit-information__more,
.p-recruit-information__item-link:focus-visible .p-recruit-information__more {
  text-decoration: underline;
}

.p-news__note,
.p-recruit-information__note {
  margin: 0;
  font-size: var(--font-size-xs); /* Figma 11.67px → トークン11.6pxに正規化 */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}

/* --------------------------------------------------------------------------
   c-feature-card — 四隅＋左右中央だけ線を残す枠のカード（大数字つき・汎用）
   -------------------------------------------------------------------------- */
.c-feature-card {
  position: relative; /* 枠線（.c-corner-frame）用 */
  --corner-frame-units-y: 4; /* 左右辺は4分割＝辺の中央にも線が1本入る（Figma実測） */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  border-radius: var(--radius-xl);
  padding: var(--space-24);
}

.c-feature-card__img {
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: clip;
}

.c-feature-card__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio-golden);
  object-fit: cover;
}

.c-feature-card__num {
  margin: 0;
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
}

.c-feature-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.c-feature-card__title {
  margin: 0;
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
  text-align: center;
}

.c-feature-card__text {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}

/* --------------------------------------------------------------------------
   p-locations__item — 四隅＋左右中央だけ線を残す枠のカード（事業所）
   -------------------------------------------------------------------------- */
.p-locations__item {
  min-width: 18.667rem; /* 298.67px（Figma実測） */
}

.p-locations__card {
  position: relative; /* 枠線（.c-corner-frame）用 */
  --corner-frame-units-y: 4; /* 左右辺は4分割＝辺の中央にも線が1本入る（Figma実測） */
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  border-radius: var(--radius-xl);
  padding: var(--space-24);
  color: inherit; /* カード全体がリンク（<a>）のため、リンク色・下線を打ち消す */
  text-decoration: none;
}

/* カードのどこにhoverしても、ボタン単体hover（button.css）と同じ矢印の演出にする */
.p-locations__card:hover .c-button__arrow,
.p-locations__card:focus-visible .c-button__arrow {
  translate: var(--hover-shift) 0;
}

.p-locations__img {
  border-radius: var(--radius-sm);
  overflow: clip;
}

.p-locations__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio-golden);
  object-fit: cover;
}

.p-locations__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.p-locations__detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.p-locations__name {
  margin: 0;
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-snug);
}

.p-locations__info p {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}

/* 小ボタンは中央寄せ（矢印がはみ出すため右に余裕を持たせる） */
.p-locations__body .c-button--small {
  align-self: center;
}

/* --------------------------------------------------------------------------
   c-card — 汎用商品カード
   -------------------------------------------------------------------------- */
.c-card {
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: clip;
}

.c-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.c-card__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio-golden);
  object-fit: cover;
}

.c-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24);
}

.c-card__title {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading);
}

.c-card__text {
  margin: 0;
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}

/* --------------------------------------------------------------------------
   p-faq__item — Q行（濃色）の下にA面（白）が続くカード
   Figmaは重畳（margin-bottom:-53px）で表現されているが、Q行の行数が増えると
   A面の固定 padding-top では文字が被るため、Q/A それぞれが内容量で高さを持つ
   縦積みに正規化する。枠線と角丸はカード（__item）が1つだけ持ち、
   中のQ行・A面は overflow: clip で外枠に沿わせる。
   -------------------------------------------------------------------------- */
.p-faq__item {
  display: flex;
  flex-direction: column;
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-text);
  overflow: clip; /* Q行の角をカードの角丸に沿わせる */
}

/* Q行は開閉ボタン。ボタン既定のスタイルを打ち消してカードの見た目にする */
.p-faq__question {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  border: 0;
  background: var(--color-primary);
  padding: var(--space-6) var(--space-16);
  color: var(--color-white);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}

/* hover / focus（⚠ inferred）: 塗りボタンなので面を薄める（tokens.css の方針） */
.p-faq__question:hover,
.p-faq__question:focus-visible {
  background: var(--color-primary-hover);
}

.p-faq__q-mark,
.p-faq__a-mark {
  font-size: var(--font-size-h3-lg); /* 21.33px（Figma 25.6px から1段階） */
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-body);
}

.p-faq__q-text {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

/* ＋/− アイコン（Figma 18.3x17・stroke1.5相当）。
   横線は常時、縦線は開いたときに90°回転して横線に重なり「−」に見える。 */
.p-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.144rem;  /* 18.3px */
  height: 1.144rem;
}

.p-faq__icon::before,
.p-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--border-width-medium); /* 1.5px */
  border-radius: var(--radius-full);  /* Figmaの丸端stroke */
  background: currentColor;
  transform: translateY(-50%);
}

.p-faq__icon::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.3s ease;
}

/* 開くときに時計回りで倒れるよう、90° → 180°（0°に戻すと反時計回りになる） */
.p-faq__question[aria-expanded="true"] .p-faq__icon::after {
  transform: translateY(-50%) rotate(180deg);
}

/* 回答の開閉。閉状態の高さ0はCSSで持ち（初期表示のちらつき防止）、
   開閉時の遷移用の実測値（px）は faq.js が一時的に入れる。 */
.p-faq__answer-wrap {
  overflow: hidden;
  transition: height 0.3s ease;
}

.p-faq__item.is-collapsed .p-faq__answer-wrap {
  height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .p-faq__icon::after,
  .p-faq__answer-wrap {
    transition: none;
  }
}

/* 枠線・背景はカード（__item）側が持つので、A面は中身の配置だけ */
.p-faq__answer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-12) var(--space-16);
}

.p-faq__a-text {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

/* --- SP（767px以下・inferred: SPフレーム未提供のため暫定） --- */
@media (max-width: 767px) {
  .p-news__item,
  .p-recruit-information__item,
  .p-locations__item {
    min-width: 0; /* グリッド内での溢れ防止 */
  }

  /* .c-corner-frame の四隅Rに合わせてカード側のRも1段弱める */
  .c-feature-card,
  .p-locations__card {
    border-radius: var(--radius-lg);
  }
}