@charset "UTF-8";

/* =========================================================
   外部委託グッズデザイナー募集ページ
   スタイルは BeBlock 採用サイト（5Daysインターンシップ）に準拠
   https://beblock.co.jp/recruit/5days_internship-nagoya.html
   ========================================================= */

/*------------------------------------
  Value（採用サイト base.css と同じ値）
------------------------------------*/
:root {
  --main-color: #f26e00;
  --sec-color: #00ab8f;
  --text-color: #5c5c5c;
  --yellow: #f2be00;
  --gray: #898989;
  --bg-orange: #fef0e5;
  --border: #e1e1e1;
  --error: #c5000b;

  --min4: min(.33vw, 4px);/*/1200*/
  --min5: min(.42vw, 5px);
  --min6: min(.5vw, 6px);
  --min7: min(.58vw, 7px);
  --min8: min(.67vw, 8px);
  --min10: min(.83vw, 10px);
  --min12: min(1vw, 12px);
  --min14: min(1.17vw, 14px);
  --min15: min(1.25vw, 15px);
  --min16: min(1.33vw, 16px);
  --min17: min(1.42vw, 17px);
  --min18: min(1.5vw, 18px);
  --min20: min(1.67vw, 20px);
  --min22: min(1.83vw, 22px);
  --min24: min(2vw, 24px);
  --min25: min(2.08vw, 25px);
  --min26: min(2.17vw, 26px);
  --min27: min(2.25vw, 27px);
  --min28: min(2.33vw, 28px);
  --min30: min(2.5vw, 30px);
  --min32: min(2.67vw, 32px);
  --min34: min(2.83vw, 34px);
  --min36: min(3vw, 36px);
  --min38: min(3.17vw, 38px);
  --min40: min(3.33vw, 40px);
  --min42: min(3.5vw, 42px);
  --min45: min(3.75vw, 45px);
  --min48: min(4vw, 48px);
  --min50: min(4.17vw, 50px);
  --min55: min(4.58vw, 55px);
  --min58: min(4.83vw, 58px);
  --min60: min(5vw, 60px);
  --min65: min(5.42vw, 65px);
  --min70: min(5.83vw, 70px);
  --min75: min(6.25vw, 75px);
  --min80: min(6.67vw, 80px);
  --min90: min(7.5vw, 90px);
  --min100: min(8.33vw, 100px);
  --min120: min(10vw, 120px);
  --min130: min(10.83vw, 130px);
  --min150: min(12.5vw, 150px);
  --min180: min(15vw, 180px);

  --header-h: var(--min90);
}
@media screen and (max-width: 768px) {
  :root {
    --min4: min(0.52vw, 4px);
    --min5: min(0.65vw, 5px);
    --min6: min(0.78vw, 6px);
    --min7: min(0.9vw, 7px);
    --min8: min(1.04vw, 8px);
    --min10: min(1.30vw, 10px);
    --min12: min(1.56vw, 12px);
    --min14: min(1.82vw, 14px);
    --min15: min(1.95vw, 15px);
    --min16: min(2.08vw, 16px);
    --min17: min(2.21vw, 17px);
    --min18: min(2.34vw, 18px);
    --min20: min(2.60vw, 20px);
    --min22: min(2.86vw, 22px);
    --min24: min(3.125vw, 24px);
    --min25: min(3.26vw, 25px);
    --min26: min(3.4vw, 26px);
    --min27: min(3.5vw, 27px);
    --min28: min(3.65vw, 28px);
    --min30: min(3.91vw, 30px);
    --min32: min(4.17vw, 32px);
    --min34: min(4.43vw, 34px);
    --min36: min(4.69vw, 36px);
    --min38: min(4.95vw, 38px);
    --min40: min(5.21vw, 40px);
    --min42: min(5.47vw, 42px);
    --min45: min(5.9vw, 45px);
    --min48: min(6.25vw, 48px);
    --min50: min(6.51vw, 50px);
    --min55: min(7.16vw, 55px);
    --min58: min(7.55vw, 58px);
    --min60: min(7.81vw, 60px);
    --min65: min(8.46vw, 65px);
    --min70: min(9.11vw, 70px);
    --min75: min(9.76vw, 75px);
    --min80: min(10.42vw, 80px);
    --min90: min(11.7vw, 90px);
    --min100: min(13.02vw, 100px);
    --min120: min(15.63vw, 120px);
    --min130: min(16.93vw, 130px);
    --min150: min(19.53vw, 150px);
    --min180: min(23.44vw, 180px);

    --header-h: clamp(70px, 13vw, 100px);
  }
}

/*------------------------------------
  Base
------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  font-size: clamp(12px, 1.5vw, 18px);
  font-family: "fot-tsukuardgothic-std", "Zen Maru Gothic", sans-serif;
  line-height: 160%;
  overflow-x: hidden;
  color: var(--text-color);
  background: #fff;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; transition: all .5s ease 0s; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
@media screen and (max-width: 768px) {
  body { font-size: var(--min28); }
}

.inner { width: min(90%, 1080px); margin-left: auto; margin-right: auto; }
.inner--narrow { width: min(90%, 860px); }
.orange { color: var(--main-color); }
.bg-orange { background: var(--bg-orange); }
.text-sub { color: var(--gray); }
.indent { padding-left: 1em; text-indent: -1em; }

.sp-none { display: inline; }
@media screen and (max-width: 768px) {
  .sp-none { display: none; }
}

/* 編集ツールで「非表示」にしたセクション */
[data-hidden-section] { display: none !important; }

/* 仮の画像枠 */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9e9e9;
  color: #a0a0a0;
  font-size: var(--min16);
  font-weight: bold;
}

/*------------------------------------
  Header
------------------------------------*/
.header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9;
  background: #fff;
  height: var(--header-h);
  display: flex;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}
.navbar {
  width: 93%;
  margin: 0 3.5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-color);
}
.nav-logo {
  font-size: min(2.17vw, 30px);
  display: flex;
  align-items: flex-end;
  user-select: none;
}
.nav-logo img {
  height: min(2.6vw, 36px);
  width: auto;
  padding-bottom: 4px;
  border-right: 2px solid var(--text-color);
  margin-right: var(--min24);
  padding-right: var(--min24);
}
.nav-logo p { padding-bottom: 2px; }

@media screen and (max-width: 768px) {
  .navbar { width: 90%; margin: 0 5%; }
  .nav-logo {
    font-size: min(4.6vw, 35px);
    align-items: center;
  }
  .nav-logo img {
    height: min(5.5vw, 42px);
    border-right-color: #5b5b5b;
  }
  .nav-logo p { padding-top: var(--min5); color: #5b5b5b; }
}

/*------------------------------------
  ページタイトル
------------------------------------*/
.header-offset { padding-top: var(--header-h); }
.page-hero-title {
  margin: var(--min120) 0 0;
  padding-bottom: var(--min80);
  text-align: center;
  border-bottom: 1px solid #ddd;
}
.page-hero-title p {
  color: var(--main-color);
  font-size: var(--min14);
  font-weight: bold;
  letter-spacing: .05em;
}
.page-hero-title h2 {
  font-size: var(--min42);
  color: var(--gray);
  font-weight: bold;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .page-hero-title p { font-size: var(--min24); }
  .page-hero-title h2 { font-size: var(--min50); }
}

/*------------------------------------
  セクション共通
------------------------------------*/
.section { padding: var(--min120) 0; }
.page-title {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--min50);
  padding: 0 0 0 var(--min25);
  font-size: var(--min36);
  font-weight: bold;
  color: var(--main-color);
  line-height: 1.4;
}
.page-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 45%;
  width: min(.8vw, 10px);
  height: min(.8vw, 10px);
  border-radius: 100px;
  background: var(--main-color);
}
.section-lead { margin: calc(var(--min20) * -1) 0 var(--min50); }
/* 依頼する仕事：枠の下の補足・注意事項 */
.works-notes {
  margin-top: var(--min40);
  padding: var(--min30) var(--min40);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--gray);
  font-size: var(--min16);
}
.works-notes__title { margin-bottom: var(--min10); color: var(--text-color); font-weight: bold; }
.works-notes__title::before { content: "■"; margin-right: .3em; color: var(--main-color); }
.works-notes__list li { padding-left: 1em; text-indent: -1em; }
.works-notes__list li + li { margin-top: var(--min8); }
@media screen and (max-width: 768px) {
  .works-notes { font-size: var(--min24); padding: var(--min40); }
}
@media screen and (max-width: 768px) {
  .page-title { font-size: var(--min45); }
  .page-title::before { width: min(1.5vw, 10px); height: min(1.5vw, 10px); }
}

/*------------------------------------
  導入（MESSAGE＋働き方）
------------------------------------*/
.intro { padding: var(--min100) 0; }
.intro__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--min40); }
.intro__badge {
  display: inline-block;
  margin-bottom: var(--min30);
  padding: var(--min7) var(--min20) var(--min8);
  border-radius: 50px;
  background: var(--main-color);
  color: #fff;
  font-size: var(--min20);
  font-weight: bold;
}
.intro__title {
  color: var(--main-color);
  font-size: var(--min38);
  font-weight: bold;
  line-height: 1.4;
}
.intro__image {
  flex-shrink: 0;
  width: min(36.7vw, 440px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(242, 110, 0, .1);
}
/* 丸の四隅で絵が切れないよう、丸の幅の82%で中央に置く */
.intro__image img { display: block; width: 82%; height: auto; }

.intro-message {
  margin-top: var(--min50);
  padding: var(--min60);
  border-radius: 20px;
  background: #fff;
  text-align: center;
}
.intro-message__text { font-size: var(--min20); font-weight: bold; line-height: 1.8; }

/* 3つの特徴（番号の丸アイコン＋テキスト） */
.intro-points__title {
  margin-top: var(--min50);
  padding-top: var(--min50);
  border-top: 1px dashed #e5c9b3;
  font-size: var(--min26);
  font-weight: bold;
  line-height: 1.4;
}
.intro-points__title span {
  display: block;
  margin-bottom: var(--min5);
  color: var(--main-color);
  font-size: var(--min14);
  letter-spacing: .1em;
}
.intro-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--min30);
  margin-top: var(--min40);
}
.intro-features li { display: flex; flex-direction: column; align-items: center; gap: var(--min15); }
.intro-features__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(5.5vw, 66px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--bg-orange);
  color: var(--main-color);
  font-size: var(--min22);
  font-weight: bold;
  line-height: 1;
}
.intro-features p { font-size: var(--min18); font-weight: bold; line-height: 1.5; }

/* 募集期間について（募集要項の表と同じ見た目） */
.period {
  margin-top: var(--min60);
  padding-top: var(--min50);
  border-top: 1px dashed #e5c9b3;
  text-align: left;
}
.period__lead { margin-bottom: var(--min20); }
.period .info-table { margin-bottom: var(--min20); }
.period__notes li { padding-left: 1em; text-indent: -1em; font-size: var(--min16); color: var(--gray); }
.period__notes a { color: var(--main-color); text-decoration: underline; }

@media screen and (max-width: 768px) {
  .intro { padding: var(--min80) 0; }
  .intro__inner { flex-direction: column; align-items: flex-start; }
  .intro__badge { font-size: var(--min26); }
  .intro__title { font-size: var(--min45); }
  .intro__image { width: 100%; max-width: 400px; margin: var(--min20) auto 0; }
  .intro-message { padding: var(--min50) var(--min40); text-align: left; }
  .intro-message__text { font-size: var(--min27); }
  .intro-points__title { font-size: var(--min36); text-align: center; }
  .intro-points__title span { font-size: var(--min22); }
  .intro-features { grid-template-columns: 1fr; gap: var(--min30); }
  .intro-features li { flex-direction: row; gap: var(--min30); }
  .intro-features__num { flex-shrink: 0; width: min(13vw, 66px); font-size: var(--min30); }
  .intro-features p { font-size: var(--min28); text-align: left; }
  .intro-features p br { display: none; }
  .period__notes li { font-size: var(--min24); }
}

/*------------------------------------
  依頼する仕事
------------------------------------*/
.works { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--min30); }
.works__item { padding: var(--min40); border-radius: 20px; background: var(--bg-orange); }
.works__title {
  margin-bottom: var(--min20);
  padding-bottom: var(--min15);
  border-bottom: 2px solid var(--main-color);
  color: var(--main-color);
  font-size: var(--min24);
  font-weight: bold;
}
.works__list li { position: relative; padding-left: 1.1em; }
.works__list li + li { margin-top: var(--min8); }
.works__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: .45em;
  height: .45em;
  border-radius: 50%;
  background: var(--main-color);
}
@media screen and (max-width: 768px) {
  .works { grid-template-columns: 1fr; gap: var(--min30); }
  .works__item { padding: var(--min50); }
  .works__title { font-size: var(--min36); }
}

/*------------------------------------
  募集職種と報酬の目安
------------------------------------*/
.job {
  margin-bottom: var(--min50);
  padding: var(--min60);
  border-radius: 20px;
  background: #fff;
}
.job:last-child { margin-bottom: 0; }
.job__head { margin-bottom: var(--min40); }
.job__badge {
  display: inline-block;
  padding: var(--min5) var(--min20) var(--min6);
  border-radius: 50px;
  background: var(--main-color);
  color: #fff;
  font-size: var(--min16);
  font-weight: bold;
}
.job__name { margin: var(--min15) 0 var(--min10); color: var(--main-color); font-size: var(--min38); font-weight: bold; line-height: 1.4; }
.job__sub { margin-bottom: var(--min20); font-size: var(--min22); font-weight: bold; }
.job__sub::before { content: "■"; margin-right: .3em; color: var(--main-color); }

.price-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--min30); margin-bottom: var(--min50); }
.price-cards--single { grid-template-columns: 1fr; }
.price-card {
  padding: var(--min40) var(--min30);
  border: 2px solid var(--main-color);
  border-radius: 20px;
  text-align: center;
}
.price-card__label { font-size: var(--min20); font-weight: bold; }
.price-card__amount { margin-top: var(--min10); color: var(--main-color); font-size: var(--min24); font-weight: bold; line-height: 1.2; }
.price-card__amount span { font-size: var(--min58); letter-spacing: .02em; }
.price-card__unit { color: var(--gray); font-size: var(--min15); }
.price-card__detail {
  display: inline-block;
  margin-top: var(--min20);
  padding-top: var(--min20);
  border-top: 1px dashed #ccc;
  font-size: var(--min16);
  text-align: left;
}
.price-card__detail li { position: relative; padding-left: 1em; }
.price-card__detail li::before { content: "・"; position: absolute; left: 0; }

/* 報酬表・募集要項表（採用サイト .info-table と同じ見た目） */
.price-table, .info-table { margin-bottom: var(--min50); }
.job .info-table:last-child { margin-bottom: 0; }
.price-table dl, .info-table dl {
  display: flex;
  align-items: center;
  padding: var(--min28) 0 var(--min30);
  border-bottom: 1px solid var(--border);
  line-height: 170%;
}
.price-table dl:first-child, .info-table dl:first-child { border-top: 1px solid var(--border); }
.info-table dt { width: var(--min180); flex-shrink: 0; font-weight: bold; }
.info-table dd { width: calc(100% - var(--min180)); }
.price-table dt { flex: 1; }
.price-table dd { color: var(--main-color); font-size: var(--min26); font-weight: bold; white-space: nowrap; }
.price-table__note { margin-top: var(--min15); padding-left: 1em; text-indent: -1em; font-size: var(--min16); color: var(--gray); }

@media screen and (max-width: 768px) {
  .job { padding: var(--min50) var(--min40); }
  .job__badge { font-size: var(--min24); }
  .job__name { font-size: var(--min48); }
  .job__sub { font-size: var(--min32); }
  .price-cards { grid-template-columns: 1fr; }
  .price-card { padding: var(--min50) var(--min40); }
  .price-card__label { font-size: var(--min30); }
  .price-card__amount { font-size: var(--min32); }
  .price-card__amount span { font-size: var(--min80); }
  .price-card__unit, .price-card__detail { font-size: var(--min24); }
  .price-table dl, .info-table dl { font-size: var(--min28); }
  .info-table dl { flex-direction: column; align-items: flex-start; gap: var(--min8); }
  .info-table dt, .info-table dd { width: 100%; }
  .price-table dd { font-size: var(--min32); }
  .price-table__note { font-size: var(--min24); }
}

/*------------------------------------
  応募の流れ（採用サイト .internship-program と同じ見た目）
------------------------------------*/
.flow { display: flex; align-items: flex-start; justify-content: space-between; }
.flow__item { display: flex; flex-direction: column; text-align: center; }
.flow__step {
  display: inline-block;
  width: var(--min120);
  margin: auto;
  padding: var(--min4) 0 var(--min6);
  border-radius: 100px;
  background: var(--main-color);
  color: #fff;
  font-size: var(--min20);
  font-weight: bold;
}
.flow__content { display: flex; flex-direction: column; align-items: center; }
.flow__thumb {
  width: min(13vw, 160px);
  aspect-ratio: 1 / 1;
  margin: var(--min20) 0 var(--min25);
  border-radius: 50%;
}
/* 応募の流れ：STEPアイコン（インラインSVG）
   薄オレンジの丸背景に、メインカラーの線画を置く。
   色は currentColor で拾うので、--main-color を変えれば追従する。 */
.flow__thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-orange);
  color: var(--main-color);
}
.flow__thumb--icon svg {
  width: 54%;
  height: 54%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow__text { font-weight: bold; line-height: 1.4; }
.flow__arrow {
  flex-shrink: 0;
  width: 0;
  height: 0;
  margin: var(--min120) var(--min12) 0;
  border-top: var(--min15) solid transparent;
  border-bottom: var(--min15) solid transparent;
  border-left: var(--min15) solid var(--main-color);
}
.flow__note { margin-top: var(--min40); text-align: center; }

/* 応募の流れ：応募にあたっての注意事項 */
.apply-notes {
  margin-top: var(--min50);
  padding: var(--min40) var(--min50);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: var(--min16);
}
.apply-notes__title { font-size: var(--min24); font-weight: bold; }
.apply-notes__title::before { content: "■"; margin-right: .3em; color: var(--main-color); }
.apply-notes__block { margin-top: var(--min30); padding-top: var(--min25); border-top: 1px dashed var(--border); }
.apply-notes__sub { margin-bottom: var(--min8); color: var(--main-color); font-weight: bold; }
.apply-notes__list { margin-top: var(--min8); color: var(--gray); }
.apply-notes__list li { padding-left: 1em; text-indent: -1em; }
.apply-notes__list li + li { margin-top: var(--min5); }
@media screen and (max-width: 768px) {
  .apply-notes { padding: var(--min40); font-size: var(--min24); }
  .apply-notes__title { font-size: var(--min34); }
}

@media screen and (max-width: 768px) {
  .flow { flex-direction: column; }
  .flow__item { width: 100%; }
  .flow__step { position: relative; z-index: 2; width: var(--min150); padding: var(--min5) 0 var(--min8); font-size: var(--min30); }
  .flow__content {
    flex-direction: row;
    width: 100%;
    margin-top: calc(var(--min24) * -1);
    padding: var(--min30) var(--min30) var(--min20);
    border: 2px solid var(--main-color);
    border-radius: 20px;
    background: #fff;
  }
  .flow__thumb { width: min(18vw, 140px); margin: 0 var(--min30) 0 0; }
  .flow__text { text-align: left; font-size: var(--min30); }
  .flow__text br { display: none; }
  .flow__arrow { margin: var(--min20) auto; transform: rotate(90deg); }
  .flow__note { text-align: left; }
}

/*------------------------------------
  大きいボタン（採用サイト .internship-btn と同じ見た目）
------------------------------------*/
.btn-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--min50);
  padding: 0 0 var(--min120);
  border-bottom: 1px solid #666;
}
.big-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(50vw, 600px);
  border-radius: 100px;
  font-size: var(--min38);
  font-weight: bold;
  line-height: 1.2;
  cursor: pointer;
  transition: .3s ease;
}
.big-btn--primary {
  height: var(--min100);
  border: 0;
  background: var(--main-color);
  color: #fff;
  box-shadow: 0 6px 20px rgba(239, 124, 0, .35);
}
.big-btn--primary:hover { opacity: .85; }
.big-btn--outline {
  height: var(--min130);
  border: 2px solid var(--main-color);
  background: #fff;
  color: var(--main-color);
  font-size: var(--min32);
}
.big-btn--outline:hover { background: rgba(239, 124, 0, .07); }
.big-btn::after {
  content: "";
  position: absolute;
  right: 1em;
  border: 7px solid transparent;
  border-left: 9px solid currentColor;
  transform: translateX(4px);
}
.big-btn__label-small { display: block; margin-bottom: var(--min15); font-size: var(--min22); line-height: 1; }
.big-btn:disabled { opacity: .5; cursor: not-allowed; }
@media screen and (max-width: 768px) {
  .big-btn { width: 90%; font-size: var(--min42); }
  .big-btn--primary { height: var(--min120); }
  .big-btn--outline { height: var(--min150); font-size: var(--min36); }
  .big-btn__label-small { font-size: var(--min26); }
}

/*------------------------------------
  FAQ（採用サイト .meetyou-faq と同じ見た目）
------------------------------------*/
.faq { padding: var(--min120) 0; }
.faq-title {
  margin-bottom: min(5.47vw, 70px);
  font-size: min(3.5vw, 45px);
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
}
.faq-list li {
  margin-bottom: min(4vw, 50px);
  padding-bottom: min(4vw, 50px);
  border-bottom: 1px solid #676666;
}
.faq-list li:last-child { margin-bottom: 0; }
.faq-list dl { display: flex; align-items: center; }
.faq-list dt {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(4vw, 50px);
  aspect-ratio: 1 / 1;
  margin-right: min(1.56vw, 20px);
  border: 2px solid var(--main-color);
  border-radius: 50%;
  font-size: min(2vw, 24px);
  font-weight: bold;
  line-height: 1;
}
.faq-list dd { flex: 1; font-size: min(1.52vw, 18px); }
.faq-list .question { margin-bottom: min(1.95vw, 25px); }
.faq-list .question dt { background: var(--main-color); color: #fff; }
.faq-list .question dd { color: var(--main-color); font-size: min(2.2vw, 26px); font-weight: bold; line-height: 1.4; }
.faq-list .answer { align-items: flex-start; }
.faq-list .answer dt { background: #fff; color: var(--main-color); }
.faq-list .answer dd { padding-top: min(.8vw, 10px); }
@media screen and (max-width: 768px) {
  .faq-title { margin-bottom: min(9.1vw, 70px); font-size: min(7.8vw, 60px); }
  .faq-list li { margin-bottom: min(6.5vw, 50px); padding-bottom: min(6.5vw, 50px); }
  .faq-list dt { width: min(8vw, 50px); margin-right: min(2.6vw, 20px); font-size: min(4vw, 24px); }
  .faq-list dd { font-size: min(3.65vw, 28px); }
  .faq-list .question { margin-bottom: min(4vw, 30px); }
  .faq-list .question dd { font-size: min(4.7vw, 36px); }
  .faq-list .answer dd { padding-top: min(1.3vw, 10px); }
}

/*------------------------------------
  応募フォーム
------------------------------------*/
.form { padding: var(--min60); border-radius: 20px; background: #fff; }
.form__row { margin-bottom: var(--min40); }
.form__label { display: flex; align-items: center; gap: var(--min10); margin-bottom: var(--min10); font-weight: bold; }
.req, .opt {
  padding: 2px 10px 3px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.4;
}
.req { background: var(--main-color); color: #fff; }
.opt { background: #eee; color: var(--gray); }
.form__input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fafafa;
  font-size: 16px;
  transition: border-color .2s, background-color .2s;
}
.form__input:focus { outline: none; border-color: var(--main-color); background: #fff; }
.form__input.is-invalid, .form__choices.is-invalid { border-color: var(--error); background: #fdf0ef; }
.form__file { padding: 10px 12px; font-size: 14px; cursor: pointer; }
.form__help { margin-top: var(--min8); color: var(--gray); font-size: var(--min15); }
.form__choices { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 4px; border: 1px solid transparent; border-radius: 10px; }
.choice { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.choice input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: var(--main-color); }
.choice a { color: var(--main-color); text-decoration: underline; }

/* 希望職種で出し分ける質問のまとまり */
.form__group {
  margin-bottom: var(--min40);
  padding: var(--min40);
  border-radius: 16px;
  background: var(--bg-orange);
}
.form__group[hidden] { display: none; }
.form__group > .form__row:last-child { margin-bottom: 0; }
.form__group-title { margin-bottom: var(--min20); color: var(--main-color); font-weight: bold; }
.form__group > .form__help { margin: calc(var(--min10) * -1) 0 var(--min20); }
.form__group .form__input { background: #fff; }

.form__agree { margin: var(--min60) 0 var(--min30); text-align: center; }
.form__agree.is-invalid .choice { color: var(--error); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__error { margin-bottom: var(--min30); color: var(--error); font-weight: bold; text-align: center; }
.form__submit { display: flex; justify-content: center; }
.form__done { padding: var(--min80) var(--min40); border-radius: 20px; background: #fff; text-align: center; }
.form__done-title { margin-bottom: var(--min20); color: var(--main-color); font-size: var(--min32); font-weight: bold; }
@media screen and (max-width: 768px) {
  .form { padding: var(--min50) var(--min40); }
  .form__group { padding: var(--min40) var(--min30); }
  .form__help { font-size: var(--min22); }
  .form__done-title { font-size: var(--min42); }
}

/*------------------------------------
  追従応募ボタン（SP）
------------------------------------*/
.float-entry { display: none; }
@media screen and (max-width: 768px) {
  .float-entry {
    position: fixed;
    right: 5%;
    bottom: 16px;
    z-index: 8;
    display: block;
    padding: 12px 32px;
    border-radius: 100px;
    background: var(--main-color);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    box-shadow: 0 6px 20px rgba(239, 124, 0, .35);
    transition: opacity .3s, visibility .3s;
  }
  .float-entry.is-hidden { opacity: 0; visibility: hidden; }
}