/* =====================================================
   INTERESTING INNOVATION - GUIDANCE（募集要項）
   style.css → sub.css の後に読み込む
   基準幅: PC 1920 / TB 768 / SP 393（1rem = 基準幅で 10px）
   ===================================================== */

/* 見出し帯（中央タイトル）は sub.css。ヘッダー・フッターはホームと同じ */
.gd { padding: 0 31.9rem 0 32.1rem; color: var(--text); } /* コンテンツ幅 1280（x=321〜1601） */

/* ---------- 採用区分タブ（Frame 756: 3 x 411x100, gap 24, r100） ---------- */
.gd-tabs { display: flex; gap: 2.4rem; margin-top: 35.9rem; }
.gd-tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; height: 10rem; background: #fff; border-radius: 10rem; color: var(--black); transition: background-color .3s, color .3s; }
.gd-tab__ja { font-size: 2.7rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.gd-tab__en { font-size: 1.2rem; font-weight: 500; line-height: 1; letter-spacing: .02em; color: var(--orange); transition: color .3s; }
.gd-tab:not(.is-active):hover { color: var(--orange); }
.gd-tab.is-active { background: var(--orange); color: #fff; cursor: default; }
.gd-tab.is-active .gd-tab__en { color: #fff; }
/* 選択中タブの下の三角（Polygon 1: 38x38, 帯の 26px 下） */
.gd-tab.is-active::after { content: ""; position: absolute; left: 50%; bottom: -3.2rem; margin-left: -1.9rem; border-style: solid; border-width: 3.3rem 1.9rem 0; border-color: var(--orange) transparent transparent; z-index: 3; } /* タブの下端にくっつく吹き出しの三角（白カードの上に重なる） */
.gd-tabs { position: relative; z-index: 3; }

/* ---------- 募集要項テーブル（Frame 760: 白カード r20 pad 80） ---------- */
.gd-panel[hidden] { display: none; }
.gd-panel.is-enter { animation: gd-panel-in .5s ease both; }
@keyframes gd-panel-in { from { opacity: 0; transform: translateY(1.6rem); } to { opacity: 1; transform: none; } }
.gd-card { position: relative; z-index: 1; margin-top: 4.4rem; padding: 8rem; background: #fff; border-radius: 2rem; }
.gd-table { width: 100%; border-collapse: separate; border-spacing: 0; border-bottom: 1px solid var(--orange); } /* collapse だと行境界の 1px 線がにじむ */
.gd-table th { box-sizing: border-box; width: 28rem; padding: 3.2rem 1.6rem 3.2rem 4rem; border-top: 1px solid var(--orange); font-size: 1.8rem; font-weight: 700; line-height: 1.4; text-align: left; vertical-align: middle; }
.gd-table th.gd-table__th--sm { font-size: 1.6rem; line-height: 1; color: var(--black); }
.gd-table td { padding: 3.2rem 4rem 3.2rem 0; border-top: 1px solid var(--orange); font-size: 1.6rem; font-weight: 400; line-height: 2.9rem; vertical-align: middle; } /* 1.8 → 29px（行高を整数にして罫線のにじみを防ぐ） */

/* ---------- セクション見出し（Frame 667: 英字 Rubik 14 + 日本語 32） ---------- */
.gd-head { display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; }
.gd-head__en { font-family: 'Rubik', var(--font-en); font-size: 1.4rem; font-weight: 500; line-height: 1.2; letter-spacing: .02em; color: var(--orange); }
.gd-head__ja { font-size: 3.2rem; font-weight: 600; line-height: 1.2; color: var(--text); }

/* ---------- 選考フロー（Frame 866） ---------- */
.gd-flow { margin-top: 16rem; }
.gd-steps { display: flex; justify-content: space-between; gap: 5.3rem; margin: 8rem 0 0; padding: 0; list-style: none; counter-reset: none; }
.gd-step { position: relative; display: flex; flex-direction: column; align-items: center; width: 28rem; flex: none; padding: 3.2rem; background: #fff; border-radius: 2rem; text-align: center; }
.gd-step + .gd-step::before { content: ""; position: absolute; left: -3.85rem; top: 11.3rem; width: 2.4rem; height: 2.4rem; background: var(--orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.gd-step__num { display: flex; align-items: center; justify-content: center; width: 7.2rem; height: 7.2rem; background: var(--orange); border-radius: 50%; font-family: 'Rubik', var(--font-en); font-size: 2.4rem; font-weight: 700; line-height: 1; color: #fff; }
.gd-step__ttl { margin-top: 1.6rem; font-size: 2rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.gd-step__desc { margin-top: 1.6rem; font-size: 1.3rem; font-weight: 400; line-height: 1.85; text-align: left; }
/* カードは親 .reveal がまとめて発火 → 01→04 の順にふわっと */
.gd-steps.reveal .gd-step, .gd-faq__list.reveal .gd-faq__item { opacity: 0; transform: translateY(3rem); filter: blur(.4rem); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease; transition-delay: var(--d, 0s); }
.gd-steps.reveal.is-visible .gd-step, .gd-faq__list.reveal.is-visible .gd-faq__item { opacity: 1; transform: none; filter: none; }
.gd-steps.reveal, .gd-faq__list.reveal { opacity: 1; transform: none; filter: none; }

/* ---------- よくある質問（Frame 867） ---------- */
.gd-faq { margin-top: 16rem; }
.gd-faq__list { display: flex; flex-direction: column; gap: 2rem; margin: 8rem 0 0; }
.gd-faq__item { padding: 3.2rem; background: #fff; border-radius: 2rem; box-shadow: 0 .4rem 1.6rem rgba(0,0,0,.02); }
.gd-faq__q { display: flex; align-items: center; gap: 1.6rem; margin: 0; font-size: 1.8rem; font-weight: 700; line-height: 1.4; }
.gd-faq__mark { display: flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; flex: none; background: var(--orange); border-radius: 50%; font-family: 'Rubik', var(--font-en); font-size: 1.6rem; font-weight: 700; line-height: 1; color: #fff; }
.gd-faq__a { margin: 1.6rem 4.8rem 0 4.8rem; font-size: 1.5rem; font-weight: 400; line-height: 1.7; }

/* ---------- エントリー（Frame 332 + Frame 764） ---------- */
.gd-card--ext { padding: 9.6rem 8rem; } /* 新卒・第二新卒: 案内文とボタンを白いボックスに */
.gd-ext { text-align: center; }
.gd-ext__ttl { margin: 0; font-size: 3.2rem; font-weight: 700; line-height: 1.4; }
.gd-ext__lead { margin: 2.4rem 0 0; font-size: 1.6rem; font-weight: 500; line-height: 2; }
.gd-entry.gd-entry--ext { margin-top: 4.8rem; } /* 新卒・第二新卒: 外部サイトへのボタン */
.gd-entry { display: flex; flex-direction: column; align-items: center; margin-top: 12rem; } /* Figma は FAQ 下端から 262px だが、ユーザー指示で詰めた */
.gd-entry__btn { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; width: 40rem; height: 12rem; margin-top: 0; padding: 0 3.2rem 0 2.4rem; background: linear-gradient(180deg, #ff7d20, #ff4800); border-radius: .8rem; color: #fff; box-shadow: 0 .8rem 2.4rem rgba(255,72,0,.2); transition: box-shadow .3s; }
.gd-entry__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #e8560a, #c93a00); transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.7,0,.2,1); } /* hover で濃いオレンジが左から流れ込む */
.gd-entry__btn:hover::before { transform: scaleX(1); }
.gd-entry__circle svg { transition: transform .3s; }
.gd-entry__btn:hover .gd-entry__circle svg { animation: gd-arrow .55s ease-in-out; }
@keyframes gd-arrow { 0% { transform: translateX(0); } 45% { transform: translateX(160%); } 50% { transform: translateX(-160%); } 100% { transform: translateX(0); } }
.gd-entry__btn:hover { box-shadow: 0 1.2rem 3.2rem rgba(201,58,0,.35); }
.gd-entry__btn-txt { flex: 1; font-size: 2.4rem; font-weight: 600; line-height: 2; text-align: center; white-space: nowrap; }
.gd-entry__circle { display: flex; align-items: center; justify-content: center; width: 3.3rem; height: 3.3rem; flex: none; overflow: hidden; background: #fff; border-radius: 50%; color: var(--orange); }
.gd-entry__circle svg { width: 1.3rem; height: .9rem; display: block; }

/* ---------- 採用ページ内ナビ（btn_set） ---------- */

/* =====================================================
   TB / SP 共通（〜1199px）
   ===================================================== */
@media (max-width: 1199px) {
  .gd { padding: 0 var(--pad-x); }
  .gd-tabs { gap: .8rem; margin-top: 5.6rem; }
  .gd-tab { gap: .5rem; height: 6.4rem; }
  .gd-tab__ja { font-size: 1.4rem; }
  .gd-tab__en { font-size: .9rem; }
  .gd-tab.is-active::after { bottom: -1.7rem; margin-left: -1rem; border-width: 1.8rem 1rem 0; }
  .gd-card { margin-top: 2.4rem; padding: 2rem 1.6rem; border-radius: 1.2rem; }
  .gd-table, .gd-table tbody, .gd-table tr, .gd-table th, .gd-table td { display: block; width: auto; }
  .gd-table { border-bottom: 1px solid var(--orange); }
  .gd-table th { padding: 1.6rem 0 0; font-size: 1.5rem; line-height: 1.4; }
  .gd-table th.gd-table__th--sm { font-size: 1.5rem; line-height: 1.4; }
  .gd-table td { padding: .6rem 0 1.6rem; border-top: 0; font-size: 1.3rem; line-height: 1.8; }
  .gd-head { gap: .6rem; }
  .gd-head__en { font-size: 1.1rem; }
  .gd-head__ja { font-size: 2.2rem; }
  .gd-flow, .gd-faq { margin-top: 6.4rem; }
  .gd-steps { flex-direction: column; align-items: stretch; gap: 3.6rem; margin-top: 3.2rem; }
  .gd-step { width: auto; padding: 2.4rem; border-radius: 1.2rem; }
  .gd-step + .gd-step::before { left: 50%; top: -3rem; margin-left: -1.2rem; transform: rotate(90deg); }
  .gd-step__num { width: 5.6rem; height: 5.6rem; font-size: 2rem; }
  .gd-step__ttl { margin-top: 1.2rem; font-size: 1.7rem; }
  .gd-step__desc { font-size: 1.25rem; }
  .gd-faq__list { gap: 1.2rem; margin-top: 3.2rem; }
  .gd-faq__item { padding: 2rem 1.6rem; border-radius: 1.2rem; }
  .gd-faq__q { gap: 1rem; font-size: 1.5rem; }
  .gd-faq__mark { width: 2.6rem; height: 2.6rem; font-size: 1.3rem; }
  .gd-faq__a { margin: 1.2rem 0 0 3.6rem; font-size: 1.3rem; }
  .gd-entry { margin-top: 4.8rem; }
  .gd-entry__btn { width: 100%; max-width: 32rem; height: 7.2rem; margin-top: 0; padding: 0 2rem 0 1.6rem; }
  .gd-entry__btn-txt { font-size: 1.6rem; }
  .gd-entry__circle { width: 2.8rem; height: 2.8rem; }
}

/* =====================================================
   TB のみ（768〜1199px）
   ===================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
  .gd-tabs { gap: 1.6rem; margin-top: 6.4rem; }
  .gd-tab { gap: .8rem; height: 8rem; }
  .gd-tab__ja { font-size: 2rem; }
  .gd-tab__en { font-size: 1.1rem; }
  .gd-tab.is-active::after { bottom: -2.5rem; margin-left: -1.4rem; border-width: 2.6rem 1.4rem 0; } /* タブから離れないように */
  .gd-card { margin-top: 3.2rem; padding: 4rem; border-radius: 1.6rem; }
  .gd-table, .gd-table tbody { display: table; width: 100%; }
  .gd-table tr { display: table-row; }
  .gd-table th, .gd-table td { display: table-cell; border-top: 1px solid var(--orange); }
  .gd-table th { width: 17rem; padding: 2.4rem 1.6rem 2.4rem 1.6rem; font-size: 1.6rem; }
  .gd-table th.gd-table__th--sm { font-size: 1.5rem; line-height: 1.4; }
  .gd-table td { padding: 2.4rem 1.6rem 2.4rem 0; font-size: 1.5rem; }
  .gd-head__en { font-size: 1.3rem; }
  .gd-head__ja { font-size: 3rem; }
  .gd-flow, .gd-faq { margin-top: 10rem; }
  .gd-steps { flex-direction: row; flex-wrap: wrap; gap: 3.2rem 2.4rem; margin-top: 4.8rem; }
  .gd-step { width: calc((100% - 2.4rem) / 2); flex: none; }
  .gd-step + .gd-step::before { display: none; }
  .gd-step__num { width: 6.4rem; height: 6.4rem; }
  .gd-step__ttl { font-size: 1.9rem; }
  .gd-faq__list { gap: 1.6rem; margin-top: 4.8rem; }
  .gd-faq__item { padding: 2.8rem 2.4rem; }
  .gd-faq__q { font-size: 1.7rem; }
  .gd-faq__a { margin: 1.4rem 2.4rem 0 4.2rem; font-size: 1.45rem; }
  .gd-entry { margin-top: 8rem; }
  .gd-entry__btn { max-width: 36rem; height: 9.6rem; margin-top: 0; }
  .gd-entry__btn-txt { font-size: 2rem; }
}
@media (max-width: 1199px) { .gd-card--ext { padding: 4rem 2.4rem; } .gd-ext { padding: 0; } .gd-ext__ttl { font-size: 2.2rem; } .gd-ext__lead { margin-top: 1.6rem; font-size: 1.4rem; line-height: 1.9; text-align: left; } .gd-entry.gd-entry--ext { margin-top: 3.2rem; } .gd-ext__lead .pc-br { display: none; } }

/* 採用ページ内ナビ: 仕事紹介・大切にしていること（.ws-rnav / .cul-rnav）と同じデザイン */
.gd-nav { margin-top: 16rem; }
.gd-nav ul { display: flex; justify-content: center; width: 108.8rem; margin: 0 auto; padding: 0; list-style: none; }
.gd-nav li { display: flex; align-items: center; height: 5.8rem; padding: 0 1.6rem; border-left: 1px solid rgba(0,0,0,.5); }
.gd-nav li:last-child { border-right: 1px solid rgba(0,0,0,.5); }
.gd-nav a { display: block; width: 24rem; padding: 1.6rem 2.4rem; font-size: 2rem; font-weight: 600; line-height: 1.3; text-align: center; white-space: nowrap; color: var(--black); transition: color .3s; }
.gd-nav a:hover, .gd-nav a[aria-current="page"] { color: var(--orange); }
@media (max-width: 1199px) {
  .gd-nav { margin: 6.4rem 0 0; } /* .gd 側に左右の余白があるので二重にしない */
  .gd-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; width: auto; background: rgba(0,0,0,.3); border: 1px solid rgba(0,0,0,.3); }
  .gd-nav li { height: auto; padding: 0; border: 0; background: var(--beige); }
  .gd-nav li:last-child { border: 0; }
  .gd-nav a { width: 100%; padding: 1.4rem .8rem; font-size: 1.4rem; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .gd-nav { margin-top: 10rem; }
  .gd-nav ul { grid-template-columns: repeat(4, 1fr); }
  .gd-nav a { padding: 1.6rem .4rem; font-size: 1.5rem; }
}

/* TB/SP: 見出し帯（オレンジ + 筆のかすれ）とタブが重ならないよう、帯の高さぶん見出しを確保し、筆の下からタブを始める */
@media (max-width: 1199px) {
  /* 見出しの高さ（= コンテンツの位置）は元の帯の高さのまま、オレンジの帯と筆だけ短くする */
  .page-guidance .page-head { --band0: calc(var(--m) * 250); height: var(--band0); --band: calc(var(--band0) - 5.6rem); }
  .gd-tabs { margin-top: calc(13vw + 1.6rem); }
}
/* SP: タブは 1 本のバーを 3 つに区切るセグメント型。英字は外して日本語 1 行 */
@media (max-width: 767px) {
  .gd-tabs { gap: 0; padding: .4rem; background: #fff; border-radius: 10rem; }
  .gd-tab { gap: 0; height: 4.4rem; background: transparent; }
  .gd-tab.is-active { background: var(--orange); }
  .gd-tab__en { display: none; }
  .gd-tab__ja { font-size: 1.4rem; font-weight: 700; }
  .gd-tab.is-active::after { bottom: -1.4rem; margin-left: -.9rem; border-width: 1.4rem .9rem 0; }
  .gd-card { margin-top: 2.8rem; }
}
@media (min-width: 768px) and (max-width: 1199px) { .page-guidance .page-head { --band0: calc(var(--m) * 330); --band: calc(var(--band0) - 3.2rem); } } /* TB はタイトルが帯からはみ出さない範囲で */