@charset "utf-8";
/* =========================================================================
   参考サイトの「手描きの枠 ＋ 袋文字の大見出し」の作り
   ・JOB01/02（s06/s07）… リボン帯 ＋ その① ＋ 袋文字の職種名
   ・GALLERY（s08）     … 手描きの囲み枠 ＋ 袋文字の見出し
   ・WANTED（s09）      … のぼり型の枠 ＋ 2色の袋文字 ＋ 黄色いリボンの見出し

   枠はすべてインラインSVG。画像を足さないので、色替えも拡縮も破綻しない。
   線は vector-effect:non-scaling-stroke で、拡大しても太さが変わらないようにする。
   ========================================================================= */

/* ---------- 共通：袋文字（黄色い塗り＋黒フチ） ---------- */
.kb-disp {
  font-weight: 900;
  color: #FFC43C;
  -webkit-text-stroke: clamp(2px, .42dvh, 4px) #1d1d1d;
  paint-order: stroke fill;
  letter-spacing: .02em;
}
.kb-disp--r { color: #E3242B; }     /* 参考の2色使い：赤 */
.kb-disp--o { color: #FF9902; }     /* 同：オレンジ */


/* =========================================================================
   JOB01 / JOB02
   ========================================================================= */
.kb-job { justify-content: safe center; }

/* ---------- リボン帯 ---------- */
.kb-ribbon {
  position: relative; isolation: isolate;
  width: min(74%, 300px);
  margin-inline: auto;
  padding: clamp(6px, 1.5dvh, 14px) clamp(26px, 8vw, 46px);
  text-align: center;
  rotate: -1.6deg;
  font-weight: 900; letter-spacing: .2em; color: #1d1d1d;
  font-size: max(12px, min(calc(15 * var(--u)), 2dvh));
}
.kb-ribbon_bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  filter: drop-shadow(0 2px 0 rgba(29, 29, 29, .16));
}

/* ---------- 「その①」 ---------- */
.kb-jobno {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .12em;
  font-size: max(9px, min(calc(11 * var(--u)), 1.45dvh));
  font-weight: 700; letter-spacing: .12em; color: var(--ink);
}
.kb-jobno b {
  display: inline-grid; place-items: center;
  width: 1.7em; height: 1.7em;
  border: 2px solid var(--accent); border-radius: 50%;
  color: var(--accent); font-size: 1.15em; line-height: 1;
}

/* ---------- 職種名（袋文字） ---------- */
.kb-jobh {
  text-align: center;
  font-size: max(20px, min(calc(30 * var(--u)), 4dvh));
  line-height: 1.3;
}
.kb-jobh .kb-disp { font-size: 1.22em; }

/* ---------- 写真：手描きの楕円枠 ＋ 左にイラスト ---------- */
.kb-jobfig {
  position: relative;
  display: flex; align-items: flex-end; flex-direction: row-reverse;  /* イラストを左へ */
  width: 100%;
}
.kb-jobfig > .kb-photo { flex: 0 0 68%; min-width: 0; }
.kb-jobfig > .kb-photo > .kb-photo_in {
  height: clamp(60px, 21dvh, 250px);
  clip-path: ellipse(50% 50% at 50% 50%);
}
.kb-jobfig_ring {                       /* 楕円の手描き枠：写真とぴったり同じ箱に重ねる */
  position: absolute; z-index: 2; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.kb-jobfig_il {
  flex: 0 0 auto;
  margin: 0 0 0 0; margin-right: -9%;
  transform: translateY(6%);
}
.kb-jobfig_il img {
  width: auto; max-width: none;
  height: clamp(44px, 16dvh, 200px);
}

/* ---------- 本文の上の区切り線 ---------- */
.kb-rule { display: block; width: 100%; height: clamp(4px, .7dvh, 8px); }


/* =========================================================================
   GALLERY — 手描きの囲み枠
   ========================================================================= */
.kb-frame {
  position: relative; isolation: isolate;
  width: 100%;
  /* 🔴 2026-09-19 ユーザー指示「黒線の枠もう少し広げて(中のテキストは今のまま)」。
     この padding は枠線(.kb-frame_bg)とセクション端の間隔＝枠の外側の大きさを決める。
     内側の文字まわりの余白は .kb-cofr が別途持っているので、ここを縮めても
     テキストの位置・間隔は変わらない。 */
  padding: clamp(8px, 2dvh, 22px) clamp(8px, 2.8vw, 18px) clamp(7px, 1.8dvh, 20px);
}
.kb-frame_bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
}
.kb-gallh {
  text-align: center;
  font-size: max(14px, min(calc(18.5 * var(--u)), 2.45dvh));
  line-height: 1.38;
}
/* 🔴 袋文字は同じ級数でも実寸が大きい。1.5em だと「ちょこっとお見せします！」が
   2行に割れて「す！」だけ落ちるので、1行に収まる級数まで落とす。 */
.kb-gallh .kb-disp { font-size: 1.24em; }
.kb-gallcap {
  text-align: center;
  font-size: max(9px, min(calc(11 * var(--u)), 1.45dvh));
  font-weight: 700; letter-spacing: .18em; color: var(--ink);
}
/* 🔴 GALLERY のラベルだけ、会社概要(COMPANY)と同じ格へ上げる：赤字＋星。
   級数は .kb-gallcap の高さ追随（1.45dvh 上限）を保つので .kb-label は使わず、
   色・字間・星だけを COMPANY と同値で足す。中央寄せは維持。 */
.kb-gallcap--label {
  display: flex; align-items: center; justify-content: center;
  gap: calc(8 * var(--u));
  letter-spacing: .26em;
  color: var(--accent);
}
.kb-gallcap--label::before {
  content: ""; flex: none;
  width: calc(13 * var(--u)); height: calc(13 * var(--u));
  background: var(--accent);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
/* 🔴 四角の外に出した注釈。.swipe-section は flex column なので
   inline-block でも align-items:stretch で全幅に伸ばされ、手描き下線
   (width:100%) が画面端まで伸びてしまう。中央で内容幅に戻す。 */
.kb-frame + .kb-note { align-self: center; }


/* =========================================================================
   ENTRY — JOB01/02 と同じ「リボン帯 + 袋文字の見出し + 区切り線」の組み方に揃える。
   🔴 袋文字は同じ級数でも実寸が大きい。「選ばなくていい。」8文字が1行に
      収まる級数まで落とす（GALLERY の kb-gallh と同じ理由）。
   ========================================================================= */
/* 縦可変セクションの先頭なので、ヘッダーとの間に息を入れる */
#s12 .kb-ribbon { margin-top: clamp(8px, 2dvh, 22px); }
.kb-entryh {
  text-align: center;
  font-size: max(15px, min(calc(20 * var(--u)), 2.7dvh));
  line-height: 1.45;
}
.kb-entryh .kb-disp { font-size: 1.28em; }


/* =========================================================================
   COMPANY（会社概要）— 参照デザインに合わせた「黒枠 + 袋文字の見出し + 区切り線」
   既存部品（.kb-frame / .kb-disp / .kb-rule）の組み合わせで作る。
   ========================================================================= */
/* 🔴 枠線は SVG を preserveAspectRatio:none で伸ばしているので、線は要素の
   内側 1〜3%（＝枠の大きさに比例）へ入る。padding の数値がそのまま
   見た目の余白にはならない。旧値では実測で線から 6〜12px しか無く、
   上下左右ともキツキツだった。実測で 16〜26px 空くところまで上げる。
   （検証: scratchpad/measure_frame.py — 線の画素と中身の外接矩形の差を測る） */
/* 🔴 2026-09-20 ユーザー指示「枠を大幅に広げる」。
   枠の外側 = セクションの padding-inline（共通 --sidegap ≒25px）を 6px まで詰めて
   枠を画面端いっぱいへ。内側 = .kb-cofr の左右 padding はそのぶん増やして、
   本文が枠線に当たらないようにする（枠だけ広がり、文字は枠内に収まる）。 */
.kb-company { padding-inline: 6px; }
.kb-cofr { padding: clamp(22px, 4.4dvh, 48px) clamp(30px, 9vw, 52px) clamp(24px, 4.8dvh, 52px); }
/* 2026-09-21: SPでは枠線と内容の間を上下だけ広げる。左右幅と本文配置は維持。 */
@media (max-width: 767.98px) {
  .kb-cofr { padding-top: clamp(78px, 11dvh, 112px); padding-bottom: clamp(82px, 11.5dvh, 116px); }
  #s10 .kb-h { margin-top: 4px; }
  #s10 .kb-photo { margin-top: 7px; }
  #s10 .kb-dl { margin-top: 7px; }
  #s10 .kb-photo > .kb-photo_in { height: clamp(60px, 8.8dvh, 88px); }
}
.kb-company .kb-label { justify-content: center; }
.kb-colead {
  text-align: center;
  font-size: max(var(--fsMin), min(calc(13 * var(--u)), 1.9dvh));
  font-weight: 700; letter-spacing: .06em; color: #3a2f22;
}
.kb-coh {
  text-align: center;
  font-size: max(18px, min(calc(26 * var(--u)), 3.4dvh));
  line-height: 1.3;
}
.kb-coh .kb-disp { font-size: 1.2em; }

/* 🔴 2026-09-18(後半) 本文13px化で、低い画面だと会社概要が 13〜47px あふれた。
   級数は下げられないので、枠の内余白・行の高さ・写真の高さで吸収する。
   （検証: scratchpad/full_check.py — 7画面の縦あふれ） */
@media (max-height: 699.98px) {
  .kb-cofr { padding: clamp(24px, 4dvh, 32px) clamp(18px, 6vw, 30px) clamp(26px, 4.2dvh, 34px); }
  .kb-company .kb-dl > div { padding-block: clamp(2px, .5dvh, 5px); }
  .kb-company .kb-dl dd { line-height: 1.5; }
  .kb-company .kb-photo--wide .kb-photo_in { height: clamp(46px, 11dvh, 78px); }
  .kb-company .kb-rule { display: none; }   /* 手描き罫は格の記号なので、まずここを落とす */
}

/* 2026-09-21: Safariの短い表示領域でも、枠内の上下余白を明確に確保する。 */
@media (max-width: 767.98px) {
  #s10 { height: auto; padding-block: 28px; scroll-snap-stop: normal; }
  #s10 .kb-cofr { min-height: calc(100dvh - var(--headerH) - 56px); padding: 48px clamp(18px, 6vw, 30px) 48px; }
  #s10 .kb-colead { margin-top: 14px; }
  #s10 .kb-h { margin-top: 10px; }
  #s10 .kb-photo { margin-top: 18px; }
  #s10 .kb-dl { margin-top: 14px; }
  #s10 .kb-photo--wide .kb-photo_in { height: clamp(90px, 23vw, 112px); }
  #s10 .kb-dl > div { padding-block: 10px; }
  #s10 .kb-dl dd { line-height: 1.7; }
}


/* Short Safari viewport: keep the complete frame inside the visible panel. */
@media (max-width: 767.98px) and (max-height: 760px) {
  #s10 { padding-block: 12px; }
  #s10 .kb-cofr { min-height: 0; padding-block: 30px; }
  #s10 .kb-colead { margin-top: 10px; }
  #s10 .kb-h { margin-top: 8px; }
  #s10 .kb-photo { margin-top: 12px; }
  #s10 .kb-dl { margin-top: 10px; }
  #s10 .kb-dl > div { padding-block: 8px; }
}
@media (max-width: 767.98px) and (max-height: 620px) {
  #s10 .kb-photo--wide .kb-photo_in { height: 80px; }
  #s10 .kb-dl > div { padding-block: 6px; }
}

/* =========================================================================
   REQUIREMENTS（s11 募集要項）— 2026-09-18
   ① 見出しは会社概要(s10)と同じ格：黒枠 ＋ ★ラベル ＋ 袋文字
   ② リストは「項目名セルに色ベタ ＋ 破線の行区切り ＋ 実線の縦罫」
      支給された参考画像の組み方を、色だけコバデンのベース系へ置き換えたもの
   ③ セクションは縦可変（swipe-section--auto）。内部スクロールは持たない
   ========================================================================= */
/* 縦可変セクションの先頭なので、ヘッダーとの間に息を入れる（ENTRY と同じ扱い） */
#s11 .kb-reqhead { margin-top: clamp(8px, 2dvh, 22px); }
.kb-reqhead { padding: clamp(14px, 3dvh, 30px) clamp(16px, 5vw, 30px) clamp(16px, 3.2dvh, 32px); }
.kb-reqsec .kb-reqhead .kb-label { justify-content: center; }
.kb-reqh {
  text-align: center;
  font-size: max(18px, min(calc(26 * var(--u)), 3.4dvh));
  line-height: 1.3;
}
.kb-reqh .kb-disp { font-size: 1.2em; }

/* ---------- 表組み ---------- */
/* 🔴 .kb-dl（事務情報の素の組み）を土台に、この画面だけ罫と地色を足す。
   角丸は使わない（DNA RULE 9）。 */
.kb-reqdl {
  border: 2px solid #1d1d1d;
  background: var(--white);
}
.kb-reqdl > div {
  /* 項目名の列は「読める最小幅」を確保しつつ、広い画面で伸びすぎないよう上限を持つ */
  grid-template-columns: clamp(86px, 30%, 124px) 1fr;
  gap: 0;
  padding-block: 0;
  border-bottom: 0;
}
.kb-reqdl > div:first-child { border-top: 0; }
/* 行の区切りは破線。項目名セルの上も通したいので row 側に持たせる */
.kb-reqdl > div + div { border-top: 2px dashed #1d1d1d; }
.kb-reqdl dt {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background: var(--tint);                /* 面用の淡色。マーカーより濃い。#333 と 8.0:1 */
  border-right: 2px solid #1d1d1d;
  padding: clamp(8px, 1.6dvh, 18px) clamp(4px, 1.6vw, 10px);
  letter-spacing: .06em;                  /* 4文字が折れないよう素の .1em から詰める */
  line-height: 1.4;
}
.kb-reqdl dd {
  padding: clamp(8px, 1.6dvh, 18px) clamp(10px, 3.4vw, 20px);
}
.kb-reqdl dd ul li::before { content: "◇"; }


/* =========================================================================
   WANTED — のぼり型の枠
   ========================================================================= */
.kb-nobori {
  position: relative; isolation: isolate;
  width: 100%;
  /* 🔴 下端の波は viewBox の y=89〜97、つまり枠高の約11%を占める。
     下paddingがそれより小さいと最終行が波に食い込む（実測 -13.5〜-21.9px）。
     padding-% は「幅」基準で高さに追随しないため dvh で持たせる。 */
  padding: clamp(12px, 2.8dvh, 30px) clamp(12px, 4vw, 26px) clamp(52px, 9.9dvh, 100px);
}
.kb-nobori_bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
}
.kb-wanth {
  text-align: center;
  font-size: max(22px, min(calc(32 * var(--u)), 4.2dvh));
  line-height: 1.2; letter-spacing: .02em;
}

/* ---------- 黄色いリボンの小見出し（その1 / その2） ---------- */
.kb-plate2 {
  position: relative; isolation: isolate;
  display: block; width: fit-content;
  margin-inline: auto;
  padding: clamp(3px, .7dvh, 7px) clamp(18px, 5.5vw, 30px);
  font-weight: 900; letter-spacing: .06em; color: #1d1d1d;
  font-size: max(12px, min(calc(15 * var(--u)), 2dvh));
}
.kb-plate2_bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }

/* ---------- 本文は点線の下線（参考の組みに合わせる） ---------- */
.kb-nobori .kb-p {
  background-image: linear-gradient(to right, rgba(29,29,29,.35) 46%, rgba(0,0,0,0) 46%);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  background-position: 0 calc(100% - .12em);
  padding-bottom: .1em;
}


/* のぼりの中は行が詰まるので、本文だけ少し小さくする */
.kb-nobori .kb-p--sm {
  /* 🔴 下限は --fsMin。字間 .2em のままだと行数が増えるので、のぼりの中だけ詰める */
  font-size: max(var(--fsMin), min(calc(13 * var(--u)), 1.9dvh));
  letter-spacing: .02em;
  line-height: 1.75;
}
.kb-nobori .kb-h--sm { font-size: max(13px, min(calc(17 * var(--u)), 2.3dvh)); }

/* 🔴 2026-09-18(後半) 本文13px化で 390x600 が 19px あふれた。
   波の食い込みを避ける下padding（枠高の約11%）は削れないので、
   写真・行間・小見出しの余白で吸収する。 */
@media (max-height: 640px) {
  .kb-nobori { padding-top: clamp(8px, 1.8dvh, 14px); }
  .kb-nobori .kb-p--sm { line-height: 1.6; }
  .kb-wanted .kb-photo_in { height: clamp(42px, 10dvh, 70px); }
  .kb-plate2 { padding-block: clamp(2px, .5dvh, 5px); }
}