/* ============================================================
   下層ページ：求人サイト構築（service-recruit）固有CSS
   共通分（リセット・ヘッダー・帯・badge・CTA・footer等）は
   common/css/common.css にあり、ここには固有分のみを置く
   ============================================================ */

main [id]{ scroll-margin-top:100px; }

/* ---------- sections ---------- */
.sec{ padding:clamp(56px, 8vw, 96px) 0; }
.sec--paper{ background:var(--paper); }
.sec--sky{ background:var(--sky-pale); }
.sec--cream{ background:var(--cream); }

/* ---------- リード（得意分野） ---------- */
.intro-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(32px, 5vw, 64px);
  align-items:center;
}
.intro-copy p{
  margin-top:20px;
  color:var(--ink-soft);
}
.intro-copy .tlink{ margin-top:24px; }
.intro-visual{
  position:relative;
  width:min(100%, 460px);
  margin-inline:auto;
}
.intro-photo{
  border-radius:56% 44% 52% 48% / 50% 55% 45% 50%;
  overflow:hidden;
  border:3px solid var(--ink);
}
.intro-photo img{
  width:100%;
  aspect-ratio:10/9;
  object-fit:cover;
}

/* badge--sky の位置は本ページ固有（common.css は right:-26px / top:26%） */
.badge--sky{
  right:-20px;
  top:auto;
  bottom:8%;
}

/* ---------- 3タイプ比較カード ---------- */
.type-grid{
  margin-top:clamp(36px, 5vw, 56px);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.type-card{
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:22px;
  box-shadow:0 4px 0 var(--ink);
  padding:26px 24px 28px;
}
.type-tag{
  align-self:flex-start;
  background:var(--tan-pale);
  border:2px solid var(--ink);
  border-radius:999px;
  padding:3px 14px;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.06em;
}
.type-card--sky .type-tag{ background:var(--sky-pale); }
.type-card h3{
  margin-top:14px;
  font-size:1.22rem;
  line-height:1.5;
}
.type-price{
  margin-top:4px;
  font-weight:900;
  color:var(--tan-deep);
  font-feature-settings:"tnum" 1;
}
.type-text{
  margin-top:10px;
  font-size:.92rem;
  color:var(--ink-soft);
}
.type-for{
  margin-top:auto;
  padding-top:14px;
  border-top:2px dashed var(--dash);
  font-size:.88rem;
}
.type-for b{ font-weight:900; }
.type-note{
  margin-top:22px;
  font-size:.85rem;
  color:var(--ink-soft);
}

/* ---------- 機能一覧（罫線リスト） ---------- */
.func-list{
  list-style:none;
  margin-top:clamp(32px, 4vw, 44px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 clamp(28px, 4vw, 64px);
}
.func-list li{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:13px 4px;
  border-top:2px dashed var(--dash);
  font-weight:700;
  font-size:.95rem;
}
.func-list li:nth-child(1),
.func-list li:nth-child(2){ border-top:0; }
.func-list svg{
  flex:none;
  color:var(--sky-deep);
}
.func-list .f-note{
  margin-left:auto;
  font-size:.78rem;
  font-weight:700;
  color:var(--sky-deep);
  white-space:nowrap;
}
.func-foot{
  margin-top:24px;
  font-size:.9rem;
  color:var(--ink-soft);
}

/* ---------- 制作の流れ（簡略版） ---------- */
.steps{
  list-style:none;
  margin-top:clamp(36px, 5vw, 52px);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.step{
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:18px;
  box-shadow:0 3px 0 var(--ink);
  padding:20px 20px 22px;
}
.step .s-no{
  display:block;
  font-size:.78rem;
  font-weight:700;
  color:var(--sky-deep);
  letter-spacing:.14em;
}
.step h3{
  margin-top:6px;
  font-size:1.05rem;
}
.step p{
  margin-top:8px;
  font-size:.88rem;
  color:var(--ink-soft);
}
.steps-foot{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 36px;
}

/* ---------- 実績バナー ---------- */
.works-banner{
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:22px;
  box-shadow:0 4px 0 var(--ink);
  padding:clamp(26px, 4vw, 40px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.works-banner p{
  font-weight:700;
  max-width:30em;
}
.works-banner b{ font-weight:900; }

/* ---------- 料金FAQ ---------- */
.faq-list{ margin-top:clamp(32px, 4vw, 44px); }
.faq-item{
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:18px;
  box-shadow:0 3px 0 var(--ink);
  overflow:hidden;
}
.faq-item + .faq-item{ margin-top:18px; }
.faq-item summary{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:64px;
  padding:15px 20px;
  font-weight:900;
  font-size:1.02rem;
  line-height:1.6;
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-q{
  flex:none;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--tangerine);
  border:2px solid var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.82rem;
  font-weight:900;
}
.faq-toggle{
  margin-left:auto;
  flex:none;
  width:30px;
  height:30px;
  position:relative;
}
.faq-toggle::before,
.faq-toggle::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  background:var(--ink);
  border-radius:2px;
}
.faq-toggle::before{ width:16px; height:2.5px; }
.faq-toggle::after{
  width:2.5px;
  height:16px;
  transition:transform .3s var(--ease-pop);
}
.faq-item[open] .faq-toggle::after{ transform:rotate(90deg); }
.faq-a{
  margin:0 20px;
  padding:14px 0 20px 48px;
  border-top:2px dashed var(--dash);
  font-size:.95rem;
  color:var(--ink-soft);
}
.faq-a strong{ font-weight:900; color:var(--ink); }
.faq-foot{ margin-top:28px; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:1024px){
  .intro-grid{ grid-template-columns:1fr; }
  .type-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:768px){
  /* badge--sky は元ページ準拠 -8px（common.css は -10px） */
  .badge--sky{ right:-8px; }

  .func-list{ grid-template-columns:1fr; }
  .func-list li:nth-child(2){ border-top:2px dashed var(--dash); }
}

@media (max-width:480px){
  /* 元ページは480でbadge縮小なし（common.css の 92px / 2px影 を打ち消す） */
  .badge{ width:94px; box-shadow:0 3px 0 var(--ink); }

  .steps{ grid-template-columns:1fr; }
  .func-list .f-note{ display:none; }
}