@charset "UTF-8";

/* ==========================================================
   Q&Aページ固有CSS（is_page('qa') でのみ読み込み）
   ページ見出し等、下層ページ共通の部品は guide.css を参照してください。
   末尾CTAは .ctaBand（guide.css）をそのまま使います（独自クラスは作りません）。
   ========================================================== */

.qaPage {
  border-top: 1px solid var(--c-border);
}

/* guide.css の `.pageColumn > section{padding:35px 24px}` は下端にも35pxの
   余白を持たせる前提ですが、このページはリスト末尾の .qaItem__a 自身が
   既に下方向の余白（padding-bottom:28px）を持っており、二重に余白が
   付くと間延びして見えるため、このページだけ下端を0に打ち消しています。 */
.qaPage .pageColumn > section {
  padding: 35px 24px 0;
}

/* .pageColumn（下部の枠付きQ&Aリスト）と末尾CTA帯の間が詰まって見えるため、
   このページだけ .ctaBand 側に上余白を追加します（common.css本体は他ページと
   共有のため変更しません）。 */
.qaPage .ctaBand {
  margin-top: 60px;
}

@media (max-width: 900px) {
  .qaPage .ctaBand {
    margin-top: 40px;
  }
}

/* ==========================================================
   COMPONENT: 導入見出し  .qaIntro
   ----------------------------------------------------------
   .pageHero は「写真あり50/50分割」前提のため流用せず、
   右側に吹き出しの装飾を置く軽量版として新設しています。
   ========================================================== */
.qaIntro__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 56px 24px 32px;
}
.qaIntro__text {
  max-width: 640px;
}
.qaIntro__title {
  margin: 0 0 16px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 4rem;
  color: var(--c-text);
}
.qaIntro__title .sectionEyebrow {
  display: block;
}
.qaIntro__lead {
  margin: 0 0 12px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--c-primary-d);
}
.qaIntro__desc {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--c-muted);
}

/* 装飾の吹き出しで、質問文の例を並べただけの非機能要素です。
   スクリーンリーダーには読ませません（aria-hiddenをHTML側で付与）。
   .qaPanelを「考え事」の大きな吹き出し本体に、.qaBlobをそこから
   本文（左側のテキスト＝読み手）へ向かって小さくなりながら続く
   丸の連なりに見立てています（漫画の心の声の吹き出しの型）。
   パネルより奥にせず、丸は本体の角から外へはみ出す形で手前に重ねます。 */
.qaIntro__bubbles {
  position: relative;
  flex: none;
  width: 360px;
  min-height: 260px;
}
.qaPanel {
  position: absolute;
  z-index: 1;
  top: 28px;
  left: 16px;
  right: 0;
  bottom: 0;
  background: var(--c-primary-s);
  border-radius: 24px;
  box-shadow: 1px 1px 7px #014430a8;
}
.qaBlob {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  background: var(--c-primary-s);
}
.qaBlob--1 {
  bottom: -8px;
  left: 2px;
  width: 26px;
  height: 26px;
  box-shadow: 1px 1px 7px #014430a8;
}
.qaBlob--2 {
  bottom: -24px;
  left: -20px;
  width: 13px;
  height: 13px;
  box-shadow: 1px 1px 7px #014430a8;
}
.qaBubble {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 12px 22px;
  background: #fff;
  border: 1px solid var(--c-primary);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(26, 33, 28, .08);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-primary-d);
  white-space: nowrap;
  animation: qaBubbleFloat 4.5s ease-in-out infinite;
}
.qaBubble--1 { top: 54px; left: 44px; animation-delay: 0s; }
.qaBubble--2 { top: 118px; right: 12px; animation-delay: .6s; }
.qaBubble--3 { bottom: 34px; left: 30px; animation-delay: 1.2s; }

/* ふわっと浮かぶだけの控えめなループです。吹き出しごとにdelayをずらして
   3つが揃って動かないようにしています。 */
@keyframes qaBubbleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (max-width: 900px) {
  .qaIntro__inner {
    flex-direction: column;
    padding: 40px 24px 24px;
  }
  .qaIntro__title {
    font-size: 2.8rem;
  }
  .qaIntro__bubbles {
    display: none;   /* SPでは吹き出し装飾は省略します（本文の可読性を優先） */
  }
}

@media (prefers-reduced-motion: reduce) {
  .qaBubble {
    animation: none;
  }
}

/* ==========================================================
   COMPONENT: セクション切り替えタブ  .qaTabs
   ----------------------------------------------------------
   3つの見出し（応募・選考について 等）へのアンカーリンクです。
   既存の .btn--outline-primary をそのまま流用しています。
   ========================================================== */
.qaTabs {
  /* ルート style.css の旧ルール nav{position:absolute;width:100%} を
     明示的に上書きしています（.gnav・.footerNavと同じ理由です。<nav>要素の
     ため、そのままだと全称ルールに巻き込まれます）。 */
  position: static;
  width: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px 40px;
}

@media (max-width: 700px) {
  .qaTabs {
    flex-direction: column;
    align-items: stretch;
  }
  .qaTabs .btn {
    justify-content: center;
  }
}

/* ==========================================================
   COMPONENT: Q&Aグループ見出し  .qaGroup
   ----------------------------------------------------------
   number+タイトルのみです（説明文はカンプ指示により表示しません）。
   ========================================================== */
.qaGroup + .qaGroup {
  margin-top: 32px;
}
.qaGroup__head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  margin: -35px -24px 32px;
  background: var(--c-primary-d);
  border-radius: 10px 10px 0 0;
}
.qaGroup__num {
  margin: 0;
  font-family: var(--font-en);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  opacity: .5;
}
.qaGroup__head h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2rem;
  color: #fff;
}

@media (max-width: 900px) {
  .qaGroup__head {
    padding: 24px;
    margin: -35px -24px 24px;
    gap: 14px;
  }
  .qaGroup__num {
    font-size: 2.4rem;
  }
  .qaGroup__head h2 {
    font-size: 1.7rem;
  }
}

/* ==========================================================
   COMPONENT: Q&Aアコーディオン  .qaList / .qaItem
   ----------------------------------------------------------
   旧トップページ（recruitテーマ）の .question / .answer と
   同じ開閉ロジックをJS側で踏襲しつつ、クラス名はこのページの
   命名規則（.qaItem系）に合わせて新設しています。
   ========================================================== */
.qaList {
  margin: 0;
  padding: 0;
  list-style: none;
}
.qaItem {
  border-bottom: 1px solid var(--c-border);
}
.qaItem:first-child {
  border-top: 1px solid var(--c-border);
}
.qaItem__q {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 24px 8px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.qaItem__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.5rem;
}
.qaItem__mark--a {
  background: var(--c-primary-s);
  color: var(--c-primary-d);
}
.qaItem__text {
  flex: 1 1 auto;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--c-text);
}
.qaItem__toggle {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
}
.qaItem__toggle::before,
.qaItem__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--c-primary);
  transform: translate(-50%, -50%);
  transition: transform .2s;
}
.qaItem__toggle::before {
  width: 16px;
  height: 2px;
}
.qaItem__toggle::after {
  width: 2px;
  height: 16px;
}
.qaItem__q[aria-expanded="true"] .qaItem__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* .qaItem__a の display は完全にJS（slideToggle）に委ねています。CSS側でも
   .qaItem--openクラスからdisplay:block/noneを決めてしまうと、クリック
   直後に要素が最終状態の高さになり、slideDown/slideUpが動かす差分を
   失ってアニメーションなしの瞬時切り替えになります。
   flexレイアウトは内側の .qaItem__aRow に持たせています。 */
.qaItem__a {
  display: none;
  padding: 0 8px 28px 8px;
}
.qaItem__aRow {
  display: flex;
  gap: 16px;
}
.qaItem__aBody {
  flex: 1 1 auto;
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--c-muted);
}
.qaItem__aBody p {
  margin: 0 0 1em;
}
.qaItem__aBody p:last-child {
  margin-bottom: 0;
}
.qaItem__aBody a {
  color: var(--c-primary-d);
  text-decoration: underline;
}

@media (max-width: 900px) {
  .qaItem__q {
    padding: 18px 4px;
    gap: 12px;
  }
  .qaItem__text {
    font-size: 1.4rem;
  }
  .qaItem__a {
    padding: 0 4px 22px 4px;
  }
}

/* ==========================================================
   COMPONENT: 選考フロー図  .qaFlow（Q1回答内でのみ使用）
   ========================================================== */
.qaFlow + .qaFlow {
  margin-top: 20px;
}
.qaFlow__label {
  display: inline-block;
  margin: 0 0 10px;
  padding: 2px 12px;
  background: var(--c-primary-d);
  border-radius: var(--radius);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
}
.qaFlow__list {
  display: flex;
  gap: var(--qaFlowGap, 10px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.qaFlow__list li {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 3px 6px;
  background: var(--c-primary-s);
  border-radius: 6px;
  text-align: center;
  line-height: 1.3;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--c-primary-d);
}
.qaFlow__list li:not(:last-child)::after {
  content: "\203A";
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--qaFlowGap, 10px) / 2);
  transform: translate(50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--c-primary-d);
  font-size: 1.4rem;
}
.qaFlow__note {
  margin: 28px 0 0;
}
.qaFlow__noteText {
  margin: 0 0 12px;
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--c-muted);
}
.qaFlow__noteHighlight {
  margin: 0;
  padding: 14px 20px;
  background: var(--c-primary-s);
  border: 1px solid var(--c-primary);
  border-radius: 8px;
  color: var(--c-primary-d);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.8;
}

@media (max-width: 700px) {
  .qaFlow__list {
    flex-direction: column;
  }
  .qaFlow__list li {
    justify-content: flex-start;
    padding-left: 20px;
  }
  .qaFlow__list li:not(:last-child)::after {
    top: auto;
    right: 50%;
    bottom: calc(-1 * var(--qaFlowGap, 10px) / 2);
    transform: translate(50%, 50%) rotate(90deg);
  }
}