@charset "UTF-8";

/* ========================================
   question.css
   よくあるご質問ページ専用スタイル
   設計幅: PC 1920px / FAQ幅 1426px
   Figma: node 54-21343（開）/ 54-21901（閉）
======================================== */

.question {
  --q-red: #f75959;       /* ヒーロー赤帯 */
  --q-pink: #f7bbbb;      /* 開いたQのヘッダー行 */
  --q-ink: #212121;       /* 枠線・見出し文字 */
  --q-text: #2c2c2c;      /* 本文 */
  --q-road: #595959;      /* 道路 */
  --q-radius: clamp(20px, 2.084vw, 40px);   /* Figma 40px */
  --q-pad-x: clamp(20px, 2.865vw, 55px);    /* アイテム内左右余白 Figma 55px */

  background-color: #fffdf4;
  padding-bottom: clamp(48px, 4.9vw, 94px);
}

/* ============================================================
   Hero（赤帯＋吹き出し＋タイトル＋道路）
   Figma(1920): 赤帯 h188。吹き出しは帯上部中央（h80・文字30px）。
   タイトルは帯下端と道路（h40）に跨って中央。
============================================================ */
.question-hero-band {
  position: relative;
  height: clamp(120px, 9.792vw, 188px);   /* Figma 188px */
  background-color: var(--q-red);
}
/* 吹き出し（みなさんの“不安”、解消します！）。
   Figma(node 54-22324): 白の角丸長方形＋黒枠＋下向きしっぽ（黒縁・白抜き）。*/
.question-hero-bubble {
  position: absolute;
  top: clamp(14px, 2.35vw, 45px);          /* Figma: 帯上端から45px */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  height: clamp(40px, 3.44vw, 66px);       /* Figma: 本体高 80 − しっぽ 14 */
  margin: 0;
  padding: 0 clamp(16px, 1.4vw, 27px);
  background-color: #fff;
  border: clamp(2px, 0.16vw, 3px) solid var(--q-ink);
  border-radius: clamp(12px, 1.05vw, 20px);
  color: var(--q-text);
  font-size: clamp(1.5rem, 1.563vw, 3rem); /* Figma 30px */
  letter-spacing: 0.05em;
  white-space: nowrap;
  /* しっぽの寸法（hearing の見出し吹き出しと同じ二重三角の手法） */
  --qb-tail-h: clamp(8px, 0.73vw, 14px);
  --qb-tail-w: clamp(7px, 0.63vw, 12px);
}
/* 下向きしっぽ：外側の黒三角 */
.question-hero-bubble::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--qb-tail-h));
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: var(--qb-tail-h) var(--qb-tail-w) 0 var(--qb-tail-w);
  border-color: var(--q-ink) transparent transparent transparent;
}
/* 下向きしっぽ：内側の白三角（枠線ぶん上へずらして黒縁を残す） */
.question-hero-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--qb-tail-h) + 3.5px);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: var(--qb-tail-h) var(--qb-tail-w) 0 var(--qb-tail-w);
  border-color: #fff transparent transparent transparent;
}
/* タイトル画像（よくあるご質問）。帯下端に跨る＝道路の上に重なる */
.question-hero-title {
  position: absolute;
  /* left:50%＋translateX だと利用可能幅が親の半分に制限され、
     画像が指定幅まで広がれない（shrink-to-fit）ため、全幅＋中央寄せにする */
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(55%);
  z-index: 2;                              /* 道路より前面 */
  margin: 0;
  line-height: 0;
  text-align: center;
}
.question-hero-title-img {
  width: clamp(260px, 38vw, 730px);        /* Figma 実測 約657px＋フチ余白 */
  height: auto;
}
/* スマホではタイトルを大きく・吹き出しを下げる（PC は Figma どおり） */
@media (max-width: 767px) {
  .question-hero-title-img {
    width: min(370px, 88vw);
  }
  .question-hero-bubble {
    top: 36px;
  }
}

/* 道路ライン（recruit.css の .recruit-hero-road と同手法） */
.question-hero-road {
  position: relative;
  width: 100%;
  height: clamp(22px, 2.084vw, 40px);      /* Figma 40px */
  background-color: var(--q-road);
}
.question-hero-road::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: clamp(2px, 0.21vw, 4px);
  background-image: repeating-linear-gradient(
    to right,
    #fff 0,
    #fff 30px,
    transparent 30px,
    transparent 60px
  );
  transform: translateY(-50%);
}

/* ============================================================
   FAQ アコーディオン
   閉: 白カード（方眼・角丸40・黒枠2px）＋「＋」
   開: ヘッダー行 #f7bbbb ＋ 回答（方眼）＋「−」
============================================================ */
.question-list {
  /* Figma: 幅1426px（1920中）。狭い画面は左右24pxの余白を残して縮む */
  width: min(1426px, calc(100% - 48px));
  margin: clamp(40px, 4.844vw, 93px) auto 0;   /* 道路下端→最初のQ = Figma 93px */
}
/* PC では FAQ 一式を縮小（recruit の職種タブ〜カードと同じ手法）。
   zoom なので枠幅・文字・余白がすべて同率で縮む。SP/TAB(〜1024px)は従来どおり。
   0.9 で一段縮小後、さらに10%の縮小要望があり 0.81（= 0.9 × 0.9）に。*/
@media (min-width: 1025px) {
  .question-list {
    zoom: 0.81;
  }
}
.question-item {
  background-color: #fff;
  /* 方眼テクスチャ（Figma は写真素材を透過30%で敷いているが、
     interview / hearing と同じ CSS 方眼で統一） */
  background-image:
    linear-gradient(to right, rgba(247, 89, 89, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247, 89, 89, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 2px solid var(--q-ink);
  border-radius: var(--q-radius);
  overflow: hidden;                        /* 開時のピンク帯を角丸に沿わせる */
}
.question-item + .question-item {
  margin-top: clamp(16px, 2.084vw, 40px);  /* Figma: アイテム間 40px */
}

/* 質問行（クリックで開閉するボタン） */
.question-item-head {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.79vw, 15px);           /* Figma: Q丸→質問文 15px */
  width: 100%;
  min-height: clamp(60px, 5.73vw, 110px);  /* Figma 110px */
  padding: clamp(8px, 0.6vw, 12px) var(--q-pad-x);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: background-color 0.25s ease;
}
.question-item.is-open .question-item-head {
  background-color: var(--q-pink);
  border-bottom: 1px solid rgba(33, 33, 33, 0.5);  /* 回答との境界線（Figma の薄い枠線） */
}
.question-item-icon {
  flex-shrink: 0;
  width: clamp(36px, 3.125vw, 60px);       /* Figma 60px */
  height: auto;
}
.question-item-q {
  flex: 1;
  color: var(--q-ink);
  font-size: clamp(1.7rem, 2.084vw, 4rem); /* Figma 40px */
  letter-spacing: 0.05em;
  line-height: 1.4;
}
/* 開閉サイン（＋／−）。文字だと＋と−で位置がずれるため CSS の棒2本で描画。
   開くと縦棒が90°回転して横棒に重なり、＋→− がアニメーションで切り替わる。*/
.question-item-toggle {
  position: relative;
  flex-shrink: 0;
  width: clamp(20px, 2.084vw, 40px);       /* Figma 60px 文字の実効サイズ相当 */
  height: clamp(20px, 2.084vw, 40px);
}
.question-item-toggle::before,
.question-item-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--q-ink);
  border-radius: 2px;
  transition: transform 0.3s ease;
}
/* 横棒 */
.question-item-toggle::before {
  width: 100%;
  height: clamp(3px, 0.313vw, 6px);
  transform: translate(-50%, -50%);
}
/* 縦棒（開くと回転して横棒に重なる＝−になる） */
.question-item-toggle::after {
  width: clamp(3px, 0.313vw, 6px);
  height: 100%;
  transform: translate(-50%, -50%);
}
.question-item.is-open .question-item-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 回答（grid-template-rows で高さアニメーション） */
.question-item-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.question-item.is-open .question-item-body {
  grid-template-rows: 1fr;
}
.question-item-body-inner {
  overflow: hidden;
  min-height: 0;
}
.question-item-answer {
  padding: clamp(12px, 1.41vw, 27px) var(--q-pad-x) clamp(16px, 1.98vw, 38px);
  color: var(--q-text);
  font-size: clamp(1.4rem, 1.303vw, 2.5rem);  /* Figma 25px */
  line-height: 2;                             /* Figma leading 50/25 */
}
.question-item-answer p {
  margin: 0;
}