@charset "UTF-8";

/* ===================================
    10｜FAQ（faq/index.html）
    Figma: PC 3309-13179 / SP 3309-13254
    ・赤地の上に白い角丸パネル1枚（検索＋カテゴリタブ＋Q&Aアコーディオン）
=================================== */
.main--faq {
  padding-top: 0;
  background: var(--color-main);
  overflow-x: clip;
}

/* ===================================
    ヒーロー
=================================== */
.faqHero {
  position: relative;
  height: 70.3rem;
}

.faqHero__img {
  position: absolute;
  top: 11.5rem;
  left: 54.2rem;
  right: 0;
  height: 52.6rem;
  border-radius: 5rem;
  overflow: hidden;
}

.faqHero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faqHero__body {
  position: absolute;
  top: 22.9rem;
  left: 10.8rem;
  width: 36.4rem;
  color: #fff;
}

.faqHero__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.faqHero__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 8rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin-bottom: -0.7rem;
}

.faqHero__ja {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.44;
  letter-spacing: 0.06em;
}

.faqHero__lead {
  margin-top: 5rem;
  font-size: 1.5rem;
  line-height: 1.867;
}

/* ===================================
    白パネル
    下は Figma の 5rem の赤 ＋ .entry が -5rem で重なるぶん（無いとパネル下の角丸が隠れる）
=================================== */
.faqPanel {
  width: 138rem;
  max-width: calc(100% - 6rem);
  margin: 0 auto 10rem;
  background: #fff;
  border-radius: 5rem;
}

/* ===================================
    S01｜Q&Aリスト
=================================== */
/* ---- 見出し行（タイトル＋検索ボックス） ---- */
.faqList__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  padding: 12rem 13rem 3rem;
}

.faqSearch {
  /* 灰色のピル全体を入力欄として見せる。フォーカスは中の input ではなく、このピルの外周に出す */
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 52rem;
  height: 6rem;
  flex-shrink: 1;
  min-width: 0;
  padding: 0 1.4rem 0 2.8rem;
  border-radius: 999px;
  background: var(--color-gray);
  color: #212121; /* 虫めがね（mask・currentColor）の色 */
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .faqSearch:hover {
    background: #e6e3e0;
  }
}

/* 入力中：白地＋赤い枠＋うっすら外側のリング。キーボード操作のフォーカス表示もこれが担う */
.faqSearch:focus-within {
  background: #fff;
  box-shadow:
    inset 0 0 0 0.2rem var(--color-main),
    0 0 0 0.4rem rgba(214, 21, 26, 0.16);
  color: var(--color-main);
}

/* 共通の :focus-visible（黒いアウトライン）は、ピル側で表示しているので中の input では出さない */
.faqSearch__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.faqSearch__icon {
  display: block;
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  /* 和文フォントは行の枠の中で字面がやや上に来るので、字面の中心に合わせて持ち上げる */
  transform: translateY(-0.15rem);
  background-color: currentColor;
  -webkit-mask: url(../images/common/icon/icoSearch.svg) no-repeat center / contain;
  mask: url(../images/common/icon/icoSearch.svg) no-repeat center / contain;
}

.faqSearch__input {
  flex: 1;
  align-self: stretch;
  min-width: 0;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.467;
  color: #212121;
}

.faqSearch__input::placeholder {
  color: #757575;
  opacity: 1;
}

/* 入力した文字を消す（×）。文字があるときだけ出す（faq/index.js） */
.faqSearch__clear {
  position: relative;
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: #d9d6d3;
  transition: background-color 0.2s ease;
}

.faqSearch__clear[hidden] {
  display: none;
}

.faqSearch__clear::before,
.faqSearch__clear::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.2rem;
  height: 0.15rem;
  border-radius: 0.1rem;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.faqSearch__clear::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (hover: hover) {
  .faqSearch__clear:hover {
    background: var(--color-main);
  }
}

/* iOS Safari の検索フィールド装飾を消す */
.faqSearch__input::-webkit-search-decoration,
.faqSearch__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* ---- カテゴリタブ ---- */
.faqList__tabs {
  padding: 2.8rem 13rem;
}

.faqList__tabs-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

/* ---- Q&A 一覧 ---- */
.faqList__body {
  padding: 2.9rem 13rem 13rem;
}

.faqList__items {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.faqList__empty {
  font-size: 1.5rem;
  line-height: 1.8;
  color: #212121;
}

.faqList__empty[hidden] {
  display: none;
}

.faqItem {
  padding: 2.8rem 3.2rem;
  border-radius: 3rem;
  background: var(--color-gray);
}

.faqItem[hidden] {
  display: none;
}

/* 質問行＝開閉ボタン */
.faqItem__q {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
  text-align: left;
}

.faqItem__qmark,
.faqItem__amark {
  flex-shrink: 0;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.5;
  color: var(--color-main);
}

.faqItem__qtext {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.5;
  color: #212121;
  transition: color 0.3s ease;
}

/* ＋／− は装飾なので CSS で出し分ける */
/* ＋ と − を重ねて置き、開閉に合わせて回しながら入れ替える。
   content は補間できないので、2つの擬似要素のフェードで滑らかにする */
.faqItem__toggle {
  /* 赤い細い円に「＋」（Figma FIN 3883-23516：直径 40px・線 2px・十字 15.2px）。
     開くと縦線が 90° 回って横線に重なり「−」になる */
  position: relative;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.2rem var(--color-main);
  color: var(--color-main);
}

.faqItem__toggle::before,
.faqItem__toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.52rem;
  height: 0.2rem;
  border-radius: 0.1rem;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.3s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.faqItem__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faqItem__q.is-active .faqItem__toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .faqItem__toggle::before,
  .faqItem__toggle::after {
    transition: none;
  }
}

@media (hover: hover) {
  .faqItem__q:hover .faqItem__qtext {
    color: var(--color-main);
  }
}

/* 回答 */
.faqItem__a {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 2.6rem;
  padding: 3rem;
  border-radius: 2rem;
  background: #fff;
}

.faqItem__a[hidden] {
  display: none;
}

.faqItem__atext {
  flex: 1;
  min-width: 0;
  font-size: 1.4rem;
  line-height: 2;
  color: #212121;
}

.faqItem__atext--pending {
  color: #757575;
}

/* 新卒採用だけに出す設問の目印 */
.faqItem__badge {
  flex-shrink: 0;
  align-self: center;
  padding: 0.4rem 1.2rem;
  border-radius: 999px;
  background: var(--color-main);
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
}

/* 回答の中身（段落・箇条書き・新卒／キャリアの出し分けをまとめる） */
.faqItem__abody {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
  /* 最低でも A マークの高さ（字の大きさ × 行の高さ 1.5）を持たせて中身を縦中央に置く。
     回答が1行のときだけ A と縦中央でそろい、2行以上は A より高くなるので上ぞろえのまま */
  min-height: calc(3rem * 1.5);
}

/* 中の本文は伸ばさない（.faqItem__atext の flex: 1 が効くと枠いっぱいに伸びて、
   文字が上に寄ったままになる） */
.faqItem__abody > .faqItem__atext {
  flex: none;
}

.faqItem__alist {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 1.4rem;
  line-height: 2;
  color: #212121;
}

.faqItem__alist li {
  padding-left: 1.6rem;
  text-indent: -1.6rem;
}

.faqItem__alist li::before {
  content: '・';
  color: var(--color-main);
}

/* 質問は同じで回答が新卒・キャリアで分かれるもの */
.faqItem__split {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.faqItem__splitLabel {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--color-main);
}

/* ===================================
    Tab（〜1024px）PC レイアウトを縦積みに
=================================== */
@media screen and (max-width: 1024px) {
  /* iPad も 16px 未満だと拡大されるため（SP 側でも同じ指定） */
  .faqSearch__input {
    font-size: 16px;
  }

  .faqHero {
    height: auto;
    display: flex;
    flex-direction: column;
    padding: calc(var(--header-h) + 6rem) 0 0;
  }

  .faqHero__img {
    position: relative;
    inset: auto; /* PC 用の top / left / right を打ち消す（relative だと効いてしまう） */
    order: 2;
    height: auto;
    aspect-ratio: 986 / 526;
    margin: 6rem 0 0 5rem;
    border-radius: 5rem 0 0 5rem;
  }

  /* 枠の高さは aspect-ratio で決まるため、img の height: 100% は iOS Safari で解決されず
     画像本来の比率の高さで描かれて下が切れる。枠いっぱいに絶対配置して object-fit で収める */
  .faqHero__img img {
    position: absolute;
    inset: 0;
  }

  .faqHero__body {
    position: static;
    order: 1;
    width: auto;
    padding: 0 5rem;
  }

  .faqPanel {
    width: auto;
    max-width: none;
    margin-inline: 3rem;
  }

  .faqList__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.4rem;
    padding: 8rem 5rem 2rem;
  }

  .faqSearch {
    width: 100%;
  }

  /* パネルの外側まで伸ばして、タブ列を画面端までスクロールできるようにする */
  .faqList__tabs {
    margin-right: -3rem;
    padding: 2.4rem 5rem;
  }

  .faqList__body {
    padding: 2.4rem 5rem 9rem;
  }
}

/* ===================================
    SP（〜750px）Figma 3309-13254
=================================== */
@media screen and (max-width: 750px) {
  /* ---- ヒーロー（テキストが先、画像が後） ---- */
  .faqHero {
    padding: calc(var(--header-h) + 2.8rem) 0 0;
  }

  .faqHero__body {
    padding: 0 2rem;
  }

  .faqHero__img {
    margin: 3.2rem 0 0 2rem;
    aspect-ratio: 370 / 198;
    border-radius: 1.6rem 0 0 1.6rem;
  }

  .faqHero__en {
    font-size: 5.2rem;
    margin-bottom: 0.4rem;
  }

  .faqHero__ja {
    font-size: 1.4rem;
  }

  .faqHero__lead {
    margin-top: 3rem;
    font-size: 1.4rem;
    line-height: 1.715;
  }

  /* ---- 白パネル（Figma 3770-64778：左右 1rem の赤。下は 2rem の赤 ＋ .entry が SP で -3.7rem 重なるぶん） ---- */
  .faqPanel {
    margin: 4.8rem 1rem 5.7rem;
    border-radius: 3rem;
  }

  /* ---- 見出し行（見出しの下 16px ＋ 24px で検索ボックス） ---- */
  .faqList__head {
    gap: 4rem;
    padding: 5.6rem 2rem 0;
  }

  .faqList__head .sec-title__en {
    font-size: 4rem;
    margin-bottom: -1rem;
  }

  .faqList__head .sec-title__ja {
    line-height: 2.143;
  }

  .faqSearch {
    height: 5.2rem;
    padding: 0 1.2rem 0 2rem;
    gap: 1rem;
  }

  .faqSearch__icon {
    width: 1.6rem;
    height: 1.6rem;
  }

  .faqSearch__clear {
    width: 2.8rem;
    height: 2.8rem;
  }

  /* iOS Safari は 16px 未満の入力欄にフォーカスすると画面を拡大するため、
     rem（画面幅で縮む）ではなく px で 16px を下回らないようにする */
  .faqSearch__input {
    font-size: 16px;
    line-height: 1.5;
  }

  /* ---- カテゴリタブ（SP は折り返し） ---- */
  .faqList__tabs {
    margin-right: 0;
    padding: 1.4rem 2rem 0;
    overflow-x: visible;
  }

  .faqList__tabs-inner {
    flex-wrap: wrap;
    gap: 0.8rem;
  }

  .faqList__tabs .tab-pill {
    padding: 0.9rem 1.8rem;
    font-size: 1.3rem;
    line-height: 1.539;
  }

  /* ---- Q&A 一覧 ---- */
  .faqList__body {
    padding: 2.2rem 2rem 7.2rem;
  }

  .faqList__items {
    gap: 1rem;
  }

  .faqList__empty {
    font-size: 1.3rem;
  }

  .faqItem {
    padding: 1.8rem;
    border-radius: 1.6rem;
  }

  /* SP は幅が足りないので、バッジを質問文の下の行に落とす */
  .faqItem__q {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 1rem;
    align-items: center;
  }

  .faqItem__qmark {
    grid-area: 1 / 1;
  }

  .faqItem__qtext {
    grid-area: 1 / 2;
  }

  .faqItem__toggle {
    grid-area: 1 / 3;
  }

  .faqItem__badge {
    grid-area: 2 / 2;
    justify-self: start;
    align-self: start;
    margin-top: 0.8rem;
  }

  .faqItem__qmark,
  .faqItem__amark {
    font-size: 1.5rem;
  }

  .faqItem__qtext {
    font-size: 1.6rem;
    line-height: 1.625;
  }

  .faqItem__toggle {
    width: 3rem;
    height: 3rem;
    box-shadow: inset 0 0 0 0.15rem var(--color-main);
  }

  .faqItem__toggle::before,
  .faqItem__toggle::after {
    width: 1.14rem;
    height: 0.15rem;
  }

  .faqItem__a {
    gap: 1rem;
    margin-top: 1.6rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  .faqItem__atext,
  .faqItem__alist {
    font-size: 1.3rem;
    line-height: 1.77;
  }

  .faqItem__abody {
    gap: 1.2rem;
    min-height: calc(1.5rem * 1.5);
  }

  .faqItem__badge {
    font-size: 1.1rem;
    padding: 0.3rem 0.9rem;
  }

  .faqItem__splitLabel {
    font-size: 1.2rem;
  }
}