@charset "UTF-8";

/* ========================================
   know.css
   会社を知る（北モの営業をもっと知る）ページ専用スタイル
   ※ Figma: node 6:43678「北モの営業をもっと知る」準拠
   ※ PC 版＋レスポンシブ実装済み（後半2セクションの中間帯調整が残タスク）
======================================== */

.know {
  /* ---- テーマカラー（Figma の塗りから）---- */
  --know-red: #f75959;       /* 赤（カード帯・大見出し等）*/
  --know-blue: #55baf5;      /* 青（カード帯）*/
  --know-yellow: #ffcd53;    /* 黄（カード帯・Q アイコン文字）*/
  --know-yellow-frame: #ffde8e; /* Q&A カード外枠の黄 */
  --know-marker: #ffeab8;    /* 回答の黄色マーカー下線 */
  --know-ink: #2c2c2c;       /* 本文の濃いグレー */
  --know-ink-strong: #212121;/* 枠線・見出しの黒に近いグレー */
  --know-gray: #848484;      /* 章番号の縦書き見出し */
  --know-grid: rgba(255, 205, 83, 0.09625);  /* 白枠内の方眼（既定＝黄セクション。インタビューProfile流用・約9.6%の淡さ）*/

  /* ---- レイアウト ---- */
  /* 「コンテンツの箱ごと縮小」の仕組み：
     ① 箱の幅 = 画面の 75%（上限 1440px）。… --know-w-*
     ② 中身（フォント/枠線/余白）= zoom で 0.897 倍に縮小。… --know-zoom
     設計は Figma 基準（箱 83.6% 幅・中身は等倍）で組まれている。箱を 75%（=83.6%×0.897）
     に狭めると中身が箱に収まらず勝手に折り返して崩れるため、中身も同率 0.897(=75/83.6) で
     縮める。zoom は「%指定の箱幅」は変えず「中身（vw フォント・px 余白）」だけを縮める性質
     （実機検証済み）なので、箱幅は 75% のまま・中身だけ 0.897 倍にできる。
     別の％にする時：--know-w-* の % と上限px、--know-zoom（= 目標% ÷ 83.6）を更新。
     例) 70% → width min(70%,1344px) / zoom 0.837。元に戻す → width 83.6%(/82.9%) ・ zoom 1。*/
  /* ※ zoom は「純粋な % 幅」は縮めないが px が混じると縮めてしまうため、
     箱幅は純 % で持つ（min(…px) の上限は付けない）。超大画面の上限はフォント側の
     clamp 上限で実質頭打ちになる。*/
  --know-w-cards: 75%;  /* 3カテゴリーカード（一番外側＝広端）*/
  --know-w-qa:    75%;  /* Q&A/likes 親の箱（広端）。Q&Aアイテムだけ中で内側に寄せる */
  --know-w-nav:   75%;  /* 関連ナビ（広端） */
  --know-content: 75%;  /* 最大幅の基準（＝広端カード幅）*/
  --know-zoom: 0.897;   /* 中身の縮小率（75 ÷ 83.6）。箱ごとスケール用 */
  /* Q&Aアイテムは広端より内側（Figma: 広端83.6%に対しQ&A75.5%＝幅比0.903）*/
  --know-qa-item-inset: 0.903;

  background-color: var(--color-bg);
  overflow-x: hidden;        /* 装飾の食み出しで横スクロールが出ないよう */
}

/* 共通の中身ラッパ（中央寄せ・左右余白）。
   interview/hearing と同じ true-hold 構成へ変更：
   幅(px上限)は「zoomを持たないセクション枠」が持ち、inner は 100%＋zoom（中身のみ縮小）。
   中身の vw は cqw（コンテナ幅基準）へ変換済み（×1920/1440=1.3333）なので、
   セクション枠が hold している間（画面1600px以上）は文字・余白も完全固定される。*/
.know-cards-inner,
.know-qa-inner,
.know-nav-inner {
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  width: 100%;
  /* 中身（フォント/枠線/余白）を箱と同率で縮小（箱ごとスケール）。
     zoom は %指定の箱幅は変えず中身だけ縮めるので、箱は 100% のまま中身が収まる。*/
  zoom: var(--know-zoom);
}
/* セクション枠：1920px時の実測幅1440px(=75%)を上限に hold。ウィンドウを狭めると
   まず左右余白から詰まり、余白が尽きる画面1532px(=1440/0.94)以下で94%幅の比例縮小へ。*/
.know-cards,
.know-qa,
.know-nav {
  width: min(1440px, 94%);
  margin-inline: auto;
  container-type: inline-size;
}
.know-hero-inner {
  width: 100%;
}

/* ============================================================
   Hero（赤帯[悩み吹き出し＋タイトル画像]＋導入文）
   Figma: 赤帯 高213 / 道路 高40（赤帯下端から）。
   タイトル画像のy中央 = 道路のy中央 になるよう、タイトルを赤帯の
   下端に重ね、道路（::after）をタイトル中央に通す。
============================================================ */
.know-hero {
  position: relative;
}

/* 赤い帯。中に [悩み吹き出し]（上）＋[タイトル画像]（下・道路に重なる）。
   道路（破線）は帯の下端に ::after で敷く。
   Figma(1920基準): 赤帯 高213px=11.09vw。
   吹き出し top201.27 − 帯top145 = 56.27px=2.93vw が上余白。
   1920px超では上限を効かせて巨大化を防ぐ（38px≒1920×0.0198 … 上限は実寸で固定）。*/
.know-hero-band {
  position: relative;
  background-color: var(--know-red);
  padding-top: clamp(28px, 3.66vw, 56px);  /* 56(=1920の値)を1532までhold → 比例縮小 */
  padding-bottom: 0;
}

/* 道路（破線のグレー帯）＝ 赤帯の下端に重ねる。
   高さは Figma 40/1920≒2.1% 相当。タイトル画像がこの上に重なる。*/
.know-hero-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(20px, 2.61vw, 40px);       /* 道路40pxを1532までhold */
  background-color: #3a3a3a;
  background-image: repeating-linear-gradient(
    to right,
    #fff 0,
    #fff 36px,
    transparent 36px,
    transparent 68px
  );
  background-position: left center;
  background-size: 68px 4px;
  background-repeat: repeat-x;
  z-index: 1;
}

/* 4つの悩み吹き出し（赤帯の上部に横並び・下向きしっぽ）。
   Figma: 画面幅1920に対し 左130.5〜右1789.5（左右余白 約6.8%ずつ）に
   4つが均等配置。→ コンテナを画面幅の約86%、justify-content:space-between。
   nowrap で必ず1段。実機フォント幅が変わっても折り返さない。
   隙間は space-between が自動分配（Figmaの不均等な隙間に近づく）。
   ごく狭い画面で溢れる手前で、別途スマホ用に縦積みへ切り替える（後日対応）。*/
.know-hero-questions {
  position: relative;
  z-index: 3;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(1360px, 90.9vw);              /* 内容実測1358に合わせ拡幅。1532までhold */
  max-width: none;
  display: flex;
  flex-wrap: nowrap;                      /* 必ず1段（2px超過でも折り返さない）*/
  justify-content: space-between;         /* 4つを均等に左右いっぱいへ */
  align-items: flex-start;
  column-gap: 8px;                        /* 最小の隙間（space-between が広げる）*/
}

.know-hero-question {
  position: relative;
  margin: 0;
  flex: 0 0 auto;                           /* 内容幅のまま縮まない（nowrap で1段維持）*/
  /* 旧 padding clamp(5,0.35vw,7) clamp(14,0.96vw,19) の 80%。*/
  padding: clamp(4px, 0.35vw, 5.4px) clamp(11px, 0.97vw, 14.8px);  /* 1532までhold */
  background-color: #fff;
  border: 2px solid var(--know-ink-strong);
  border-radius: 12px;
  color: var(--know-ink);
  /* 旧 clamp(1.9rem,1.56vw,3rem) の 80%（吹き出しを今の80%サイズに）*/
  font-size: clamp(1.52rem, 1.57vw, 24px);   /* 24(=1920の値)を1532までhold */
  line-height: 1.2;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
/* 吹き出しの下向きしっぽ。Figma見本：片辺が垂直の斜め尻尾（先端右下）。
   「枠線→斜辺→先端→垂直辺→枠線」が一筆書きで繋がって見えるよう、
   SVGは【線の帯そのもの】の形にする：
   ・黒 ＝ 斜辺2px幅＋垂直辺2px幅のV字ストローク（外周は (0,0)→(14,12)→(14,0)）
   ・白 ＝ 首元の開口（枠線を消して吹き出し内部と尻尾内部を繋ぐ）
   ・それ以外は透明 ＝ 背後の枠線・赤帯がそのまま見え、(0,0)と(14,0)の角で
     枠線と黒帯が自然に合流する（一筆書き）。
   上端は枠線の【上端】に一致させ、吹き出し内部には1pxも入れない。
   既定＝先端が右へ（PCの左側2つ）。右側は scaleX(-1) で左右反転。*/
.know-hero-question::before {
  content: "";
  position: absolute;
  left: 50%;                       /* 枠の中央下部 */
  bottom: -12px;                   /* 高さ12＝上端がちょうど枠線上端（内部に食い込まない）*/
  width: 14px;
  height: 12px;
  transform: translateX(-50%);
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 12"><path d="M0 0L14 12L14 0L12 0L12 7.65L3.07 0Z" fill="%23212121"/><path d="M3.07 0H12V7.65Z" fill="%23fff"/></svg>') no-repeat center / 100% 100%;
}
/* 旧・白三角(::after)は SVG に統合したため廃止 */
.know-hero-question::after { content: none; }
/* PC（1段組）: 右側2つ（3・4番目）は先端が左へ（左右反転）*/
.know-hero-question:nth-child(n+3)::before {
  transform: translateX(-50%) scaleX(-1);
}
/* 中間帯（1025〜1199px・260726 追加）:
   1段のままでは吹き出しが左右端まで詰まり（隙間8px・文字16px）、
   1024px でSPの2×2へ形も大きさも激変するため、この帯だけ
   PCスタイルのまま 2+2 の2段組・中央寄せに折り返してジャンプを緩和する。
   尻尾はSP帯と同じ考え方で「左列＝先端右／右列＝先端左」にミラー。
   1200px 以上は1段でも余裕があるため従来どおり。 */
@media (min-width: 1025px) and (max-width: 1199px) {
  .know-hero-questions {
    width: auto;
    max-width: 760px;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 32px;
    row-gap: 22px;              /* 尻尾の高さ12px＋余白を確保 */
  }
  .know-hero-question { font-size: 19px; }
  .know-hero-question:nth-child(odd)::before  { transform: translateX(-50%); }
  .know-hero-question:nth-child(even)::before { transform: translateX(-50%) scaleX(-1); }
}

/* スマホデザイン帯（≤1024px・2×2グリッド）:
   サイズは 640px設計の vw 連動（14/12/10px@640）。
   向きは「左列（1・3番目）＝右へ／右列（2・4番目）＝左へ」に組み替える。*/
@media (max-width: 1024px) {
  .know-hero-question::before {
    width: max(11px, 2.19vw);   /* 14px@640 */
    height: max(9.4px, 1.875vw);/* 12px@640 */
    bottom: calc(0px - max(9.4px, 1.875vw)); /* ＝高さと同値。上端が常に枠線上端（内部に食い込まない）*/
  }
  /* Figma SP見本: 上段＝下向き尻尾（左:先端右/右:先端左）、
     下段＝【上向き】尻尾（タイトル側・左:先端右上/右:先端左上＝上段の垂直反転）*/
  .know-hero-question:nth-child(n+3)::before {   /* 下段(3・4): 尻尾を上辺へ */
    bottom: auto;
    top: calc(0px - max(9.4px, 1.875vw)); /* 高さと同値＝下端が上枠線の上端に一致（内部に食い込まない）*/
    transform: translateX(-50%) scaleY(-1);
  }
  .know-hero-question:nth-child(2)::before { transform: translateX(-50%) scaleX(-1); }            /* 右上＝先端左 */
  .know-hero-question:nth-child(4)::before { transform: translateX(-50%) scaleY(-1) scaleX(-1); } /* 右下＝先端左上 */
}

/* タイトル画像（北モの営業をもっと知る）。中央寄せ、Figma 比率（幅78%）。
   赤帯の下端＝道路に y 中央が重なるよう、下に負マージンで食い込ませる。*/
.know-hero-title {
  position: relative;
  z-index: 2;
  /* Figma: 吹き出し下端274〜道路上端358 = 84px。道路高40を引いた残りが
     吹き出し〜タイトル上端の間。タイトル画像は上に透明余白を含むので、
     実測で吹き出し下端→道路上端が約84pxになるよう上マージンを詰める。*/
  margin: clamp(6px, 1.11vw, 17px) 0 0;     /* 17(=1920の値)を1532までhold */
  text-align: center;
  line-height: 0;
  top: clamp(-7.5px, -0.49vw, -2.5px);      /* -7.5(=1920の値)を1532までhold */
}
.know-hero-title-img {
  display: inline-block;
  width: min(966px, 63.05vw);               /* 966(=最大値)を1532までhold → 比例縮小 */
  height: auto;
  /* タイトル画像のy中央を「道路のy中央」に合わせる。
     画像高 ≒ 幅×(512/2762) ≒ 0.546幅×0.1854 ≒ 0.1012幅 → 画像高/2 ≒ 0.0506幅。
     道路高/2 ≒ 0.0105幅。両中央を一致させる下げ量 = (画像高/2 − 道路高/2) ≒ 0.040幅 ≒ 4.0vw。
     その量だけ負マージンで下げ、画像中央が道路中央に重なるようにする。*/
  margin-bottom: clamp(-77px, -5.03vw, -26px);  /* -77(=1920の値)を1532までhold */
  position: relative;
}

/* 導入文（中央寄せ）。タイトル画像が道路に重なって下へ約6.2vw はみ出すぶん、
   その下端をクリアして適切な余白を空ける。
   Figma: 道路中央(378px)〜導入文top(467.5px) = 89.5px=4.66vw。
   タイトル画像のはみ出し量6.2vw を引いた残り ≒ 1.5vw が画像下端〜導入文の実余白。
   上 margin = はみ出し量(6.2vw) + 実余白(1.5vw=clamp下限29px相当)。*/
.know-hero-lead {
  /* 上余白: タイトル画像のはみ出し量(4.0vw・画像70%縮小後) + 実余白。
     Figma の「道路中央〜導入文 = 89.5px=4.66vw」に合わせ、加算分を小さく詰める。*/
  margin: calc(clamp(26px, 5.03vw, 77px) + clamp(8px, 0.75vw, 11.5px)) auto 0;  /* 1532までhold */
  padding: 0 24px;
  text-align: center;
  color: var(--know-ink);
  /* Figma 25px=1.30vw。上限25px・下限16px。*/
  font-size: clamp(1.6rem, 1.63vw, 2.5rem);  /* 25(=1920の値)を1532までhold */
  line-height: 2;                           /* Figma leading50/25 = 2 */
}
.know-hero-lead p {
  margin: 0;
  /* Figma: 各行は折り返さない1行（whitespace-nowrap）。
     最大幅でフォントが大きくなっても「す。」が改行しないようにする。*/
  white-space: nowrap;
}

/* 導入文の下の下向き矢印（know-pass.png・縦長の細い道しるべ）。中央配置。
   Figma: 高さ45.735px=2.38vw、導入文最終行bottom〜矢印top = 17.4px=0.9vw。*/
.know-hero-pass {
  display: block;
  width: auto;
  height: clamp(30px, 3vw, 46px);  /* 46を1532までhold */
  margin: clamp(10px, 1.11vw, 17px) auto 0;  /* 17を1532までhold */
}

/* ============================================================
   3カテゴリーカード
============================================================ */
.know-cards {
  margin-top: calc(clamp(24px, 2.61vw, 40px) * var(--know-zoom));  /* 40を1532までhold */
}
.know-cards-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.know-card {
  display: flex;
}
.know-card-link {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 0 28px;
  background-color: #fff;
  border: 3px solid var(--know-ink-strong);
  border-radius: 24px;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.know-card-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 0 var(--know-ink-strong);
}

/* カード上部の色帯＋タイトル */
.know-card-title {
  margin: 0;
  padding: 22px 24px;
  color: #fff;
  font-size: clamp(2.6rem, 3.4667cqw, 5rem);  /* Figma 50px=2.60vw */
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.3;
  /* 白文字＋黒の太い縁取り（Figma/スクショの見た目）。
     paint-order:stroke fill で縁を文字の外側に出す。*/
  -webkit-text-stroke: 2px var(--know-ink-strong);
  paint-order: stroke fill;
}
.know-card--yellow .know-card-title { background-color: var(--know-yellow); }
.know-card--blue   .know-card-title { background-color: var(--know-blue); }
.know-card--red    .know-card-title { background-color: var(--know-red); }
/* ※タイトルの指定改行（.know-card-br）は廃止済み。
   旧: 3列時に901〜1199pxでタイトルが折り返すため＠指定していたが、
   この帯域を「2列＋3枚目中央」に変更したことでカード幅が広がり全幅1行で収まる。*/

.know-card-text {
  margin: 24px 28px 0;
  color: var(--know-ink);
  font-size: clamp(1.4rem, 1.3867cqw, 2rem);  /* Figma 20px=1.04vw */
  line-height: 2;                           /* Figma leading 40/20 = 2 */
  flex-grow: 1;
}

/* VIEW MORE → ボタン（黒い丸み矢印つき）。カード内で右揃え。*/
.know-card-more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 22px 24px 0 auto;          /* 左 auto で右寄せ、右 24px の内側余白 */
  color: var(--know-ink-strong);
  font-size: clamp(1.4rem, 1.3867cqw, 2rem);  /* Figma 20px=1.04vw */
  letter-spacing: 0.04em;
}
/* VIEW MORE の矢印画像（カード・ナビ共通の見た目）*/
.know-card-more-arrow,
.know-nav-more-arrow {
  display: inline-block;
  width: clamp(40px, 4.5333cqw, 56px);
  height: auto;
  vertical-align: middle;
}

/* ============================================================
   Q&A（営業に対する疑問を集めました！）
============================================================ */
.know-qa {
  position: relative;
  z-index: 0;                /* 中身を ::before の円弧背景より前面に */
  margin-top: calc(96px * var(--know-zoom));  /* セクション間：箱と同率で縮小 */
}
/* 円弧で2色に分かれる背景。
   Figma: Q&A の上あたりを大きな円弧（マスクグループ57）が横切り、
   その境界より上は #FFFDF4（.know の地色）のまま、下は #FFF4D9。
   → 巨大な横長楕円（border-radius 50%）を #FFF4D9 で敷き、上辺を
   ゆるやかなカーブにする。Q&A セクションの頭（円弧の頂点）から
   Q&A セクションの下端まで塗る（bottom:0）。下端を越えて伸ばすと
   外側の関連ナビ（.know-nav）を覆い隠してしまうため、はみ出させない。
   横にはみ出すぶんは .know の overflow-x:hidden で隠れる。*/
.know-qa::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  width: 132%;                       /* Figma: 楕円幅2545/1920≒132% */
  /* 見本: 円弧の頂点を Q&Aロゴの下部（文字の下が少しベージュに掛かるあたり）に。
     中央=高すぎ／下端=低すぎ だったので、その中間に調整。ロゴは zoom 内のため実測値。*/
  top: clamp(32px, 3.98vw, 61px);           /* 61(=1920の値)を1532までhold */
  bottom: 0;                         /* Q&A セクション下端まで（外のナビは覆わない）*/
  background-color: #fff4d9;         /* 境界より下の背景色 */
  /* Figma: 楕円 2545×697px の深い曲線。縦半径≒348px(=697/2)＝18vw 相当で、
     中央頂点から画面端まで約120px下がるドームにする（旧80pxは浅すぎた）。*/
  border-radius: 50% 50% 0 0 / clamp(160px, 22.72vw, 348px) clamp(160px, 22.72vw, 348px) 0 0;  /* 348を1532までhold */
}

/* セクション見出し「営業に対する疑問を集めました！」＋ 背景の大きな Q&A 文字 */
.know-qa-heading {
  position: relative;
  width: max-content;
  max-width: 90%;
  margin: 0 auto 56px;
  padding: 12px 40px;
  background-color: #fff;
  border-radius: 999px;
  color: var(--know-ink);
  font-size: clamp(1.8rem, 2.08cqw, 3rem);  /* Figma 30px=1.56vw */
  text-align: center;
  letter-spacing: 0.05em;
  /* Figma: 見出しピルに影なし（box-shadow 削除）*/
}
/* 背景の大きな赤い「Q&A」装飾文字 */
/* 大きな赤い「Q&A」装飾は画像（.know-qa-decor）で表示するため、
   CSS の ::before 装飾文字は非表示にする。*/
.know-qa-heading::before {
  content: none;
}

/* 大きな赤い「Q&A」装飾画像。見出しピルの上に重ねて中央配置。*/
.know-qa-decor {
  display: block;
  width: auto;
  height: clamp(5.8rem, 10.8cqw, 10.5rem);     /* 見本に合わせ拡大（zoom縮小を相殺ぶん大きめ）*/
  margin: 0 auto clamp(6px, 1.0667cqw, 14px);    /* 見本: 下の見出しピルと重ねず少し離す */
  position: relative;
  z-index: 1;
}

/* ---- Q&A グループ（章）---- */
.know-qa-group {
  position: relative;
  margin-top: 64px;
  /* 広端コンテンツ（likes/カード）を見出し左端まで広げるため、見出しは absolute で
     左に重ね、本文は全幅にする（Figma: 縦見出しがカード左端に重なる配置）。
     ※スマホでは将来 flex-direction:column で縦積みに切替予定（今回は未実装）。*/
  scroll-margin-top: calc(var(--header-h-now) + 24px);
}

/* 見出し以降（Q&Aカード群 / こんな瞬間が好き）をまとめる本文ラッパ＝全幅 */
.know-qa-group-body {
  min-width: 0;
}

/* 章見出し「1 営業の仕事を知る」＝ 左端に縦書き（90度回転）。本文の左端に重ねる。*/
.know-qa-group-title {
  position: absolute;      /* 本文左端に重ねる（広端コンテンツを見出し左に揃える）*/
  left: 0;                 /* 3カテゴリーカード/関連ナビ/本文の左端に揃える（広端） */
  top: 14px;               /* 上端をやや上げてカード(like-body)と被らないように */
  z-index: 2;              /* コンテンツより前面 */
  writing-mode: vertical-rl;
  /* 各文字を右に90度倒した横向き（sideways）に統一する。
     これで日本語も半角数字「1.」と同じ寝た向きになり、
     縦に並ぶ順序（上→下）は維持されたまま全文字が右90度回転する。*/
  text-orientation: sideways;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--know-gray);
  /* Figma 50px=2.60vw。ほんの少し小さくして被り＆余白に余裕を持たせる（約45px相当）。*/
  font-size: clamp(2.1rem, 3.1333cqw, 4.5rem);
  line-height: 1;          /* 縦書きの横幅を字に密着させ、余白(gap)を一定に保つ */
  letter-spacing: 0.02em;  /* Figma: 縦の総高さ458に合わせ字間を詰める */
  white-space: nowrap;
}
.know-qa-group-num::after {
  content: ".";
}

/* ---- 個々の Q&A カード ---- */
.know-qa-item {
  position: relative;
  /* Figma: Q&Aカードだけ広端より内側（広端83.6%に対し75.5%＝幅比0.903）。
     body(広端)の中で中央寄せにして左右を内側へ寄せる。likesは別要素なので影響なし。*/
  width: calc(var(--know-qa-item-inset) * 100%);
  margin: 32px auto 0;
  padding: 24px 24px 28px;
  background-color: var(--know-yellow-frame);
  border: 2px solid var(--know-ink-strong);
  border-radius: 40px;          /* Figma: 黄色枠 rounded 40 */
}

/* 黄色枠の中の「白い内枠」。回答＋先輩の声を包む（質問は外＝黄色部分に乗る）。
   Figma: 長方形7821（白 #fff / rounded 32 / border 2px）。中央寄せ。*/
.know-qa-body {
  margin: 16px 0 0;
  padding: 32px 40px 36px;
  /* 白背景＋方眼（インタビューProfileの背景CSSを流用）。
     線色はセクション色を淡く（--know-grid）、1マス20px。*/
  background-color: #fff;
  background-image:
    linear-gradient(to right, var(--know-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--know-grid) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 2px solid var(--know-ink-strong);
  border-radius: 32px;
}

/* 質問（Q アイコン＋テキスト）= 黄色部分に乗る・中央寄せ */
.know-qa-question {
  display: flex;
  align-items: center;
  justify-content: center;      /* Figma: 質問は中央寄せ */
  gap: 16px;
  margin: 8px 0 0;
  color: var(--know-ink);
  font-size: clamp(2rem, 2.7733cqw, 4rem);    /* Figma 40px=2.08vw */
  letter-spacing: 0.04em;
}
.know-qa-q-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}
.know-qa-question-text {
  display: inline-block;
}

/* 回答（白い内枠の中に直接置く・中央寄せ）。
   枠線/背景は内枠（.know-qa-body）が持つので、ここでは外す。*/
.know-qa-answer {
  margin: 0 0 28px;
  padding: 0;
  color: var(--know-ink);
  font-size: clamp(1.8rem, 2.08cqw, 3rem);  /* Figma 30px=1.56vw。下限1.7→1.8rem: タブレット帯実効16px確保（hearing本文並み・260729）*/
  line-height: 1.75;                        /* Figma leading 52.5/30 = 1.75 */
  text-align: center;
}

/* 回答の指定改行（◯ = <br class="know-qa-br know-qa-br--xx">）。
   広い幅では改行を有効にし見本どおり ◯ で改行。狭くなって ◯ 以外でも
   自然折り返しが起きる幅では、その強制改行を解除して自然折り返しに任せる。
   回答ごとに「1行に収まる下限幅」が違う（行が長いほど広い幅まで収まらない）ため、
   行の長さでティア分けし、各ティアが崩れ始める手前で解除する（実測値）:
     --sm（最長〜33字: S1-Q1, S1-Q2）  → ≤1120px で解除
     --md（最長〜40字: S1-Q3, S2-Q1, S2-Q3） → ≤1280px で解除
     --lg（最長 43字: S2-Q2）           → ≤1600px で解除 */
@media screen and (max-width: 1120px) { .know-qa-br--sm { display: none; } }
@media screen and (max-width: 1280px) { .know-qa-br--md { display: none; } }
@media screen and (max-width: 1600px) { .know-qa-br--lg { display: none; } }

/* 回答内の黄色マーカー（下線ハイライト）。グループ2 は青系。
   行の途中で折り返しても色が続くよう box-decoration-break を clone に。*/
.know-marker {
  /* 文字全体を覆う：塗り始めを文字の上端あたり(18%)まで上げる（旧55%は下半分のみ）。
     行間に少し隙間が残るマーカー。*/
  background: linear-gradient(transparent 18%, var(--know-marker) 18%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 2px;
}
.know-marker--blue {
  background: linear-gradient(transparent 18%, #cfeafb 18%);
}

/* ---- グループ2（北モでの進め方）＝ 青テーマ ---- */
/* グループ2（青テーマ）は白枠内の方眼も青に */
.know-qa-group--blue {
  --know-grid: rgba(85, 186, 245, 0.09625);
  /* section1写真とsection2カードの間を約30px広げる（64→94）。
     広げた分は下の ::before top を同じだけ引き上げて水色で埋めるので、
     写真下のベージュ隙間(約40px)は保ったまま「カード上の水色」も同じ約40pxになる。
     ★2026-07-31 94→154px(+60): 「1.営業の仕事を知る」末尾のクリーム/青の境目をもっと下へ
     (森さん依頼・案B採用)。::before top(-47px)は不変なので青帯の開始だけ60px下がり、
     青帯とカードの間隔(約53px)は維持される */
  margin-top: 154px;
}
/* グループ2の背景＝画面幅いっぱいの水色帯（#daf0fd）。
   likes と同様、zoom(0.897) 内なので 100vw を割り戻して実画面幅に。中身より背面。*/
.know-qa-group--blue::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* 境界1（上）＝写真下のベージュ隙間(約40px)を残し、カード上に約40pxの水色を確保。
     group側で上余白を+30px広げた分、ここも -17→-47 と同じだけ引き上げる
     （水色帯の上端の絶対位置は不変＝ベージュ隙間は維持、カードだけ下がって水色が増える）。
     境界2（下）＝ピンク帯の上端（likes上端-42px）に必ず届くよう深めに延長。
     余った分はピンク帯（後描画）の背面に隠れるので、見た目の境界はピンク上端で決まる。*/
  top: -47px;
  bottom: -135px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw / 0.897);  /* 旧0.861はzoom変更(→0.897)前の残骸 */
  background-color: #daf0fd;
}
.know-qa-group--blue .know-qa-item {
  background-color: #95d3f7;     /* Q&A カード外枠（方眼の外側の色枠）の青 */
}
.know-qa-group--blue .know-qa-question {
  /* 質問テキスト色はそのまま（濃グレー）。Q アイコンは画像で青 */
}

/* 先輩の声リスト（吹き出し＋アバター）*/
.know-voices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.know-voice {
  display: flex;
  align-items: center;
  justify-content: center;   /* 各声（アバター＋吹き出し）を枠内で中央寄せ（左右の端まで広げない）*/
  gap: 14px;
}
/* 偶数番の声は左右を反転（アバターを右に）してリズムを出す */
.know-voice:nth-child(even) {
  flex-direction: row-reverse;
}
.know-voice-avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.know-voice-text {
  position: relative;
  margin: 0;
  padding: 14px 22px;
  background-color: #fff;
  border: 2px solid var(--know-ink-strong);
  border-radius: 18px;
  color: var(--know-ink);
  font-size: clamp(1.8rem, 2.08cqw, 3rem);  /* Figma 30px=1.56vw。下限1.5→1.8rem: 本文と同じFigma 30pxのため下限も統一（260729）*/
  line-height: 1.6;
}
/* 吹き出しのしっぽ（アバター側へ向ける）*/
.know-voice-text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -9px;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 7px 9px 7px 0;
  border-color: transparent var(--know-ink-strong) transparent transparent;
}
.know-voice-text::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -6px;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 5px 7px 5px 0;
  border-color: transparent #fff transparent transparent;
}
/* 反転した声はしっぽも右向きに */
.know-voice:nth-child(even) .know-voice-text::before {
  left: auto;
  right: -9px;
  border-width: 7px 0 7px 9px;
  border-color: transparent transparent transparent var(--know-ink-strong);
}
.know-voice:nth-child(even) .know-voice-text::after {
  left: auto;
  right: -6px;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent #fff;
}

/* グループ末尾の写真2枚（横並び）*/
.know-qa-photos {
  /* 写真2枚の両端を Q&Aカードの両端に揃える（Figma: 画像frame x235-1685 ＝Q&Aカードと同じ）。
     よって Q&Aカードと同じ inset(90.3%)・中央寄せにする。*/
  width: calc(var(--know-qa-item-inset) * 100%);
  margin: 32px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Figma: 715px×2＋gap20px の 1450px枠 → gap=20/1450≒1.38%（各写真49.3%）*/
  gap: 1.38%;
}
.know-qa-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 715 / 520;       /* Figma の比率 */
  object-fit: cover;
  /* ★2026-07-31 黒縁線を写真の形に合わせる(森さん依頼): 画像(1430×1040)には角丸80pxが
     焼き込み済みなのに旧 border-radius:28px では四隅で縁線が写真から浮いていた。
     260730にjob/interview/indexで確立したbox-shadow方式に統一 —
     縁は box-shadow で角丸に完全追従、radius は焼き込みに一致する%(80/1430, 80/1040) */
  box-shadow: 0 0 0 2px var(--know-ink-strong);
  border-radius: 5.594% / 7.692%;
  display: block;
}

/* ============================================================
   こんな瞬間が好き!（「やりがいと楽しさ」グループ末尾）
   Figma: 薄ピンク背景の帯＋赤い吹き出しカード3枚＋キラキラ装飾
============================================================ */
.know-likes {
  position: relative;
  /* 56px→92px: section2写真下の「水色の余り」を、タイトル上の「ピンクの余り(52px)」と
     同じ縦幅にするため、likes（＝ピンク帯・タイトル以下ぜんぶ）を約32px下げる。
     後続の関連ナビも文書フローで一緒に下がる。（実測で52px/52pxになるよう微調整済み）*/
  margin-top: 100px;
  /* Figma: 見出し箱は section 上端付近（約19px）。上余白は詰める。
     下 padding は Figma 準拠でたっぷり取り、全幅フラットのピンク帯を下へ伸ばして
     3枚のカードが「全幅ピンクの上」に乗るようにする（＝箱が伸びるぶんナビも自然に
     下がり、伸ばしたピンクとナビが重ならない）。*/
  padding: clamp(8px, 1.3333cqw, 16px) clamp(4px, 0.6667cqw, 10px) clamp(110px, 12.5333cqw, 180px);
  /* 背景は ::before で画面幅いっぱいの帯にする（Figma: bg 全幅・色 #fdd0d0）。
     左右 padding は最小化してカードを最大幅に（72%内で Figma に近づける）。*/
}
/* キラキラ装飾（背景）*/
/* 背景の全幅ピンク帯（Figma bg）。likes は zoom(≈0.897) 内なので 100vw を割り戻して
   実画面幅いっぱいにする。中身より背面。*/
/* 薄い地色バンド（ピンクの背面）。likes の裏に敷かれた濃いベージュ #FFF4D9
   （.know-qa::before の楕円）を隠し、ピンクの下凸弧の外側に「薄い地色 #FFFDF4」を
   見せるためのレイヤー。ピンク(::after)より背面・濃ベージュより前面になるよう
   ::before に置く（塗り順: 濃ベージュ → 薄地色(::before) → ピンク(::after)）。
   フラットな長方形で左右に大きくはみ出させ、確実に全幅を覆う（overflow-x:hidden で切れる）。*/
.know-likes::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -42px;                        /* Figma: ピンク上端→タイトルの余白を確保（約54px）*/
  bottom: -40px;                     /* 弧の最下点より下まで薄地色を確保 */
  left: 50%;
  transform: translateX(-50%);
  width: 160vw;                      /* 濃ベージュを確実に覆う全幅（余裕を持たせる）*/
  background-color: var(--color-bg); /* 薄い地色 #FFFDF4 */
}
/* 全幅ピンク帯＋下凸の弧（Figma bg）。薄地色(::before)の上に重ねる。
   likes は zoom(≈0.897) 内なので 100vw を割り戻して実画面幅いっぱいにし、
   さらに左右へ余分に広げて右端まで確実に覆う（旧: 右端に濃ベージュの帯が残っていた）。*/
.know-likes::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -42px;                        /* Figma: ピンク上端→タイトルの余白を確保（約54px）*/
  bottom: 0;
  left: 50%;
  /* likes は縦見出しのぶん右に寄っているため中央を少し左へ寄せて画面中央に合わせる */
  transform: translateX(calc(-50% - 45px));
  /* 円弧は「1. 営業の仕事を知る」の弧（.know-qa::before）と同一形状で、膨らみだけ下向きに反転。
     section1 は非zoom(等倍)で width:132%(=132vw)・縦半径 clamp(160px,18.1vw,370px)。
     ここは zoom(0.897)内なので、画面上の見た目を section1 と完全一致させるため
     width・縦半径をそれぞれ ÷0.897 で割り戻す（可視深さ≈89px の広く緩やかな弧になる）。*/
  width: calc(132vw / 0.897);
  background-color: #fdd0d0;
  border-radius:
    0 0 50% 50% /
    0 0 calc(clamp(160px, 24.1333cqw, 370px) / 0.897) calc(clamp(160px, 24.1333cqw, 370px) / 0.897);
}

/* 見出し「こんな瞬間が好き!」＝ 白背景＋黒太枠の角丸ボックスに、赤文字（黒フチ）*/
.know-likes-title {
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: 92%;
  margin: 0 auto;
  /* Figma: 箱754×138。テキスト684に対し左右35px程度＝横paddingを詰める。
     縦は、グリフがem箱内で下寄りに描かれる分（実測 約0.105em）を上→下へ振り替え、
     赤文字の中心を「箱の上枠線〜ピル上端」のちょうど中点に合わせる（箱の高さは不変）。*/
  padding: calc(clamp(10px, 2.1333cqw, 18px) - 0.105em) clamp(20px, 3.4667cqw, 38px) calc(clamp(10px, 2.1333cqw, 18px) + 0.105em);
  background-color: #fff;
  border: clamp(2px, 0.5333cqw, 3px) solid var(--know-ink-strong);  /* Figma: 枠線3px */
  border-radius: 10px;                     /* Figma: 角丸 約10px */
  color: var(--know-red);
  font-size: clamp(3.6rem, 5.56cqw, 8rem);  /* Figma 80px=4.17vw（lead 30px との比 2.67 に）*/
  letter-spacing: 0.04em;                  /* Figma: 4px ≒ 0.05em（箱幅を Figma に寄せ微調整）*/
  text-align: center;
  line-height: 1.1;
  /* 文字を黒フチで縁取り（Figma の立体表現）*/
  -webkit-text-stroke: clamp(1px, 0.3333cqw, 2.5px) var(--know-ink-strong);
  paint-order: stroke fill;
}
/* Figma: 「が」だけ 70px（他は80px）＝ 0.875em */
.know-likes-title-ga {
  font-size: 0.875em;
}
/* リード「先輩たちは〜」＝ 黒ピル＋白文字。見出しボックスの真下に少し重ねて密着。*/
.know-likes-lead {
  position: relative;
  z-index: 3;                        /* タイトル箱(z-index:2)より前面。黒ピルの箱ごと表側に重ねる（位置・重なり量は据え置き）*/
  width: max-content;
  max-width: 96%;
  /* Figma: リード上端はタイトル箱下端に 25.5px 重なる。下の余白は詰めて画像に近づける。*/
  margin: -25.5px auto 14px;
  /* Figma: ピル(705×51)はテキスト(674)にほぼ密着＝左右15px。縦は51に収まるよう薄く。
     ↓ 縦の内余白は従来の半分に（上下 4-8px → 2-4px）。横はそのまま。*/
  padding: clamp(2px, 0.4cqw, 4px) clamp(10px, 1.8667cqw, 16px);
  background-color: var(--know-ink-strong);
  color: #fff;
  border-radius: 999px;
  /* Figma 比率: タイトル80px : リード30px = 0.375。タイトル clamp(3.6rem,4.17vw,8rem)×0.375 に連動。*/
  font-size: clamp(1.35rem, 2.08cqw, 3rem);
  line-height: 1;                    /* body の 1.7 を継承させない。行の上下余白を無くし、黒枠と文字を近づける（見本準拠）*/
  /* line-height を詰めた分ピルが縮み、上端固定のため中心が約10px上へ寄った。
     箱サイズ・重なり(margin)は変えず、見た目だけ下げて修正前の中心位置に戻す。*/
  transform: translateY(10.5px);
  text-align: center;
  letter-spacing: 0;                 /* Figma に寄せ箱幅を詰める（fallbackで広がるのを抑制）*/
}
.know-likes-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;   /* 設計幅1590px内のカード間（カードを広めにして本文1行目を収める）*/
  align-items: start;
  /* ② Figma忠実な2行レイアウトを保つため、list を Figma比率の設計幅(1590px)で組み、
     zoom で現状の枠に縮小する（box-scale）。カードがFigma幅になり本文が自然に2行へ。*/
  width: 1590px;
  /* 親(.know-qa-inner)の zoom 0.897 と二重がけ。内側(75%箱)をほぼ満たすよう調整。*/
  zoom: calc(100cqw / 1490px);   /* コンテナ幅比例（hold中は固定）。旧: 75vw/1490 と1920で同値 */
}
/* ※やりがいのレスポンシブは「3列(649px〜・zoom縮小) → カルーセル(≦648px)」の元仕様。
   一時期「900px以下1列」に統一したが、ユーザー指示で専用カルーセルUIへ復元済み。*/
/* カード = 赤背景＋黒枠の「外側カード」。中に白の塊（title+text）を入れ、
   外側の赤が縁として見える（Figma: 赤外枠＋黒枠、内側 白＋黒枠）。
   黒の影で立体感を出す。*/
.know-like {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  /* Figma: 画像が赤box上へ280px出る。その出しろぶんの余白を上に確保（設計px）。*/
  margin-top: 288px;
  padding: 16px;                         /* Figma: 赤リング16px（外赤box↔白箱の間） */
  /* 見本: 写真は赤枠の「後ろ」に回り込む。そのため本体には背景を置かず、
     赤い塗り＋枠線は ::before（写真より前面）で描く。*/
  background-color: transparent;
  border-radius: 40px;                   /* Figma: 外赤box 角丸40 */
  /* 見本: カードに影なし（box-shadow 削除）*/
}
/* 赤い塗り＋黒枠（写真より前面のレイヤー）。これが「枠線」になり、
   写真のカードに重なる部分はこの赤塗りの後ろに隠れる。*/
.know-like::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--know-red);
  border: 2px solid var(--know-ink-strong);   /* Figma: 枠線2px */
  border-radius: 40px;                          /* Figma: 外赤box 角丸40 */
  pointer-events: none;
}
/* 先輩の写真（円形）。赤カードの上端から上にはみ出す。
   見本: カードに重なる下半分は赤枠(::before)の後ろに隠れる → z-index 0。*/
/* 写真＝縦長の人物切り抜き（Figma 304×330・object-cover）。円形やめ。
   カードの中央上に大きく出す（Figma: カード幅520に対し写真304＝約58%）。*/
.know-like-img {
  position: absolute;
  left: 50%;
  /* Figma: 画像304×330。赤box上端より280px上に出て、赤boxへ50px食い込む（＝top:-280）。*/
  top: -280px;
  transform: translateX(-50%);
  width: 58%;                            /* Figma: 304/520 ≒ 58% */
  height: auto;
  z-index: 0;                            /* 赤枠(::before, z1)より後ろ */
}
/* 各カードのキラキラ・星の装飾。Figma見本に忠実に、頭〜肩の高い位置へ・左右非対称で、
   カードごとに個別サイズで配置する（座標は赤カード枠の左上基準の設計px。list は zoom で
   一律縮小されるため固定px指定）。*/
.know-like-deco {
  position: absolute;
  height: auto;
  z-index: 3;                            /* 最前面（装飾なので前に出す）*/
  pointer-events: none;
}
/* カード1（信頼）＝2つのキラキラが入ったクラスター画像。Figma:「きらきら」222×114 を
   カード左から136px・上-249px（頭の高さ）に配置。*/
.know-like-deco--cluster {
  left: 136px;
  top: -249px;
  width: 222px;
}
/* カード2（また相談）＝左大・右小の非対称。Figma: 左40px@(左135,-161) / 右29px@(右147,-256/左より高い) */
.know-like:nth-child(2) .know-like-deco--left  { left: 135px;  top: -161px; width: 40px; }
.know-like:nth-child(2) .know-like-deco--right { right: 147px; top: -256px; width: 29px; }
/* カード3（自分の提案）＝左右の星（同サイズ43px・高さ違い）。Figma: 左@(左135,-243/高い) / 右@(右135,-167) */
.know-like:nth-child(3) .know-like-deco--left  { left: 135px;  top: -243px; width: 43px; }
.know-like:nth-child(3) .know-like-deco--right { right: 135px; top: -167px; width: 43px; }
/* 白い内側カード（タイトル＋本文をまとめた1枚の白箱）。
   方眼は「上から下まで連続」させて全マス正方形にするため、方眼・白背景・枠線は
   ここに一括で置く（旧: title と text が別々の方眼を持ち、境界で1段だけ非正方形に
   なっていた問題を解消）。*/
.know-like-body {
  position: relative;
  z-index: 2;                            /* 赤枠(::before, z1)より前面 */
  background-color: #fff;
  /* Figma: 白内枠に方眼（30%程度の淡さ）。1枚の箱に敷くのでマスが継ぎ目なく連続する */
  background-image:
    linear-gradient(to right, rgba(33, 33, 33, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(33, 33, 33, 0.06) 1px, transparent 1px);
  background-size: 18px 18px;
  border: 2px solid var(--know-ink-strong);   /* Figma: 白箱 枠線2px */
  border-radius: 32px;                          /* Figma: 白箱 角丸32 */
}
/* タイトル（白箱の上半分）。赤文字。背景・枠線は .know-like-body 側に統一。
   Figma: 白箱(192)内で 上14px の位置・font40px・行67。*/
.know-like-title {
  margin: 0;
  padding: 18px 8px 0;                    /* Figma: 白箱上端から約14〜18px */
  color: var(--know-red);
  font-size: 40px;                        /* Figma: 見出し40px */
  white-space: nowrap;
  letter-spacing: 0.025em;                /* Figma: 1px ≒ 0.025em */
  line-height: 1.4;
  /* 文字を黒線で縁取り（一旦細め）。paint-order で塗りの外側にストロークを回し、
     文字が痩せない・赤文字がつぶれないようにする。太さは要調整の想定。*/
  -webkit-text-stroke: 1.2px var(--know-ink-strong);
  paint-order: stroke fill;
}
/* 説明文（白箱の下半分）。背景・枠線は .know-like-body 側に統一。
   Figma: 白箱上端から80px・font30px・行45・#2c2c2c・中央。17文字/行が
   白箱(488)内に収まるよう横paddingは最小に。*/
.know-like-text {
  margin: 0;
  padding: 6px 0 22px;                    /* 横0＝白箱幅いっぱい（Figma: 本文470を488内に中央）*/
  color: var(--know-ink);                 /* #2c2c2c */
  font-size: 30px;                        /* Figma: 本文30px */
  letter-spacing: 0.02em;                 /* Figma: 0.75px ≒ 0.025em（収まり優先で微調整）*/
  line-height: 1.5;                       /* Figma: 45/30 */
}

/* ============================================================
   関連ページナビ（他ページへ）
============================================================ */
/* nav は box-scale(zoom) を解除し、カード自身をコンテナ化して文字を cqw で
   「カード幅基準」にスケールする（列リフロー 3→2→1 と両立・枠線は固定pxでクッキリ）。
   幅は他の広端コンテンツと同じ 75%（--know-w-nav）のまま。*/
.know-nav-inner { zoom: 1; }

.know-nav {
  /* 上：伸ばしたピンク円弧の下端との余白（Figma: 約80px）。下：フッター前の余白は従来どおり。*/
  margin-block: clamp(50px, 5.22vw, 80px) clamp(56px, 6.53vw, 100px);  /* 80/100を1532までhold */
}
.know-nav-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  /* 「3.やりがいと楽しさ」の3カード列と横幅・x位置・カード間を揃える。
     likes 列の実測レンダリング幅 ≒ 71.2vw（中央寄せ）。gap も likes の ≈25px に合わせる。*/
  width: 94.93cqw;   /* 旧71.2vw（=コンテナ75vwの94.93%）。hold中は固定 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* Figma: 3列 */
  gap: clamp(14px, 1.7333cqw, 25px);       /* 25を1600までhold */
}
.know-nav-item {
  min-width: 0;
  /* cqw の基準（＝カード幅）。リンク自身に置くと、リンク自身の padding の cqw が
     コンテナを参照できず viewport 基準に化け、子要素は「膨張した padding を引いた
     内側幅」基準になる二重ズレが起きる（旧バグ）。親の item に置けば、リンクの
     padding も子要素もすべて同じ「カード幅」基準で解決される。*/
  container-type: inline-size;
}

/* カード：ベージュ地＋下部イエロー帯。cqw の基準は親 .know-nav-item（Figma 517px設計）*/
.know-nav-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ★2026-08-18 下だけ 0 → 6cqw（1440px幅で実測25px）。
     「もっと見る」を消すまでは、写真の下の隙間はその margin-bottom(3.9cqw) が作っていた。
     消すと写真が黄帯の下端を突き抜けるので、同じ役目をカード自身の padding に持たせる。
     値は跡田さん選択＝案A（写真の下に見える黄色 25px）*/
  padding: 4.6cqw 4.3cqw 6cqw;             /* Figma 上24px/左右22px・下は上記のとおり */
  background-color: #fff4d9;                /* ベージュ */
  border: 2px solid var(--know-ink-strong);
  border-radius: 40px;
  overflow: hidden;                         /* 黄帯の角を枠に収める */
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* 下部イエロー帯。★2026-08-18 25.9cqw(134px) → 16cqw(1440px幅で実測66px)。
   「もっと見る」を消してカードが縮んだため、元の帯だと写真に食い込んで厚すぎた。
   値は跡田さん選択＝案B の高さ。写真の左右に回り込む黄色の高さがこれで決まる */
.know-nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16cqw;
  background-color: var(--know-yellow);     /* #ffcd53 */
  z-index: 0;
}
.know-nav-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 0 var(--know-ink-strong);
}
/* タイトル：黒文字＋白フチ・Dela・カード幅基準（Figma 40px＝7.74cqw／指定改行）*/
.know-nav-text {
  position: relative;
  z-index: 1;
  color: var(--know-ink-strong);
  font-size: min(7.74cqw, 40px);
  line-height: 1.25;                        /* Figma 50/40 */
  letter-spacing: 0.05em;                   /* Figma 2px */
  text-align: center;
  /* 改行は指定の <br> のみ。cqw で文字がカード幅に追従して収まるので折返し自体が
     起きないが、万一でも非指定位置(CJK文字間)で折り返さないよう keep-all で固定。*/
  word-break: keep-all;
  /* Figma: 同一テキスト2枚重ねの下層に白ストローク＝外側に約6px(フォント40px時)の白フチ。
     CSSではストロークが中心振り分けのため、外側6px＝太さ12px(=2.32cqw)を指定し、
     paint-order で塗りを前面に出して同じ見た目にする。*/
  -webkit-text-stroke: min(2.32cqw, 12px) #fff;
  paint-order: stroke fill;
}
/* 画像：黒枠・角丸32（Figma 473×193＝91.5cqw）*/
.know-nav-img {
  position: relative;
  z-index: 1;
  width: 91.5cqw;
  aspect-ratio: 473 / 193;
  object-fit: cover;
  margin-top: 3.5cqw;                       /* Figma 18px */
  border: 2px solid var(--know-ink-strong);
  border-radius: min(6.2cqw, 32px);
}
/* ▼▼▼ 復元用に温存（know-nav-more / arrow）2026-08-18 ▼▼▼
   B-3 で「もっと見る」と矢印を削除（know.php 側も削除済み）。戻す場合はここを解除し、
   併せて .know-nav-link の padding-bottom(6cqw) を 0 に、::before の height を 25.9cqw に戻す。

★VIEW MORE：黄帯の中・黒文字＋黒い矢印ピル（白矢印）
.know-nav-more {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 2.7cqw;
  margin: 2.9cqw auto 3.9cqw;               ★画像下15px〜帯下20px
  color: var(--know-ink-strong);
  font-size: min(4.84cqw, 25px);            ★Figma 25px
  letter-spacing: 0.04em;
}
.know-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14.9cqw;                           ★Figma 76.86px
  height: 5.95cqw;                          ★Figma 30.75px
  max-width: 77px;
  max-height: 31px;
  background-color: var(--know-ink-strong);
  border-radius: 999px;
}
.know-nav-arrow img {
  width: 49%;                               ★Figma: 矢印37.5 ÷ ピル76.9 ≒ 49%
  height: auto;
}
   ▲▲▲ 復元用ここまで ▲▲▲ */

/* レスポンシブ：3段構成（3カテゴリーカードと同じ考え方）
   ・1200px以上 = 3列（likes列合わせの71.2vw）
   ・649〜1199px = 2列＋3枚目を中央（上段2枚のx軸中間＝孤立感を解消）
   ・648px以下（スマホ帯）= 1列縦積み */
@media screen and (min-width: 649px) and (max-width: 1199px) {
  .know-nav-list {
    grid-template-columns: repeat(2, 1fr);
    width: auto;               /* PC用の likes 列合わせ(71.2vw)を解除し箱幅いっぱいに */
  }
  .know-nav-item:nth-child(3) {
    grid-column: 1 / -1;                             /* 2行目を全幅トラックに */
    justify-self: center;                            /* 中央＝上段2枚のちょうど中間 */
    width: calc(50% - clamp(7px, 0.65vw, 12.5px));   /* 幅は上段1枚と同じ（gapの半分を差引）*/
  }
}
@media screen and (max-width: 648px) {
  .know-nav-list {
    grid-template-columns: 1fr;
    width: auto;
    max-width: 460px;
    margin: 0 auto;
    gap: 30px;                 /* カテゴリーカード1列時と同じカード間 */
  }
}

/* ヒーロー: 1024px以下はスマホデザイン（Figma 640px設計・member式の赤帯222+道路40）。
   640px設計を vw 連動（値÷6.4）で相似形のまま拡大縮小する。
   ≦約500px では全値が「max(0.78×設計値, vw値)」の px 床に【同じ倍率で一斉に】到達するため、
   相似形（余白バランス）を保ったまま、文字の最小サイズ 10.5px を確保できる。
   （旧: ≦648px だけ 640px設計の固定px値で、375px等では行間・帯だけ間延びして崩れていた）*/
@media (max-width: 1024px) {
  .know-hero-band {
    height: max(204px, 40.94vw);          /* 262px@640（赤222 + 道路40）*/
    padding-top: max(18px, 3.59vw);       /* 23px@640 */
    box-sizing: border-box;
  }
  .know-hero-band::after { height: max(31px, 6.25vw); }   /* 道路 40px@640 */
  .know-hero-questions {
    width: 94%;
    display: grid;              /* 2×2（flex wrap だと 3+1 になるため grid 固定）*/
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
    row-gap: max(65px, 12.97vw);          /* 83px@640 */
    column-gap: max(6px, 1.25vw);
  }
  .know-hero-question {
    justify-self: center;
    padding: max(13px, 2.5vw) max(19px, 3.75vw);   /* 16px / 24px @640 */
    font-size: max(1.05rem, 2.11vw);      /* 13.5px@640・最小10.5px */
    border-radius: max(6px, 1.25vw);
  }
  .know-hero-title {
    position: absolute;
    left: 50%;
    top: max(94px, 18.75vw);              /* 120px@640（上下の吹き出し行の間・Figmaタイトル中央）*/
    transform: translate(-50%, -50%);
    margin: 0;
    width: 81%;                 /* Figma 517/640 */
    z-index: 2;
  }
  .know-hero-title-img { width: 100%; margin-bottom: 0; }
  /* リード・下向き矢印もスマホ帯と同じ構成（リードの文字は読みやすさ優先で従来clamp）*/
  .know-hero-lead {
    margin: max(19px, 3.75vw) auto 0;
    padding: 0 20px;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    line-height: 1.9;
  }
  .know-hero-lead p { white-space: normal; }
  .know-hero-pass { height: max(31px, 6.25vw); margin: max(11px, 2.19vw) auto 0; }
}

/* ★2026-08-14 E-1: 狭いスマホで右側の吹き出し2つが画面外に切れる問題（跡田さん選択＝縦並び）。
   原因は「2列 × 1行1文（white-space: nowrap）」で、文字サイズが 10.5px で下限に張り付くため
   一番長い「最初から結果を出さないと厳しい？」が 198px 必要なのに、1列ぶんは 166px しかないこと。
   実測: 320px→65px / 360px→26px / 375px→12px はみ出す（390px 以上では起きない）。
   赤帯は overflow が効いていて横スクロールにもならないため、文字が黙って消えていた。

   対応: この幅だけ 2×2 → 1列に積む。タイトルを上下の吹き出しで挟む構図は保つため、
   1・2番目をタイトルの上、3・4番目を下に置く（尻尾の向きも従来のまま活きる）。
   赤帯は内容にあわせて伸ばす（道路の帯は ::after で下端に固定されているため追従する）。
   390px 以上には一切影響しない。 */
@media (max-width: 389px) {
  .know-hero-band {
    height: auto;                          /* 4つ積むぶん伸ばす */
    padding-bottom: calc(16px + max(20px, 6.25vw));   /* 下の余白 ＋ 道路の高さ */
  }
  .know-hero-questions {
    grid-template-columns: 1fr;            /* 2列 → 1列 */
    justify-items: center;
    row-gap: 10px;
  }
  .know-hero-question {
    max-width: calc(100% - 8px);
    white-space: normal;                   /* 保険。この幅でも1行に収まるが、収まらなければ折り返す */
    text-align: center;
  }
  /* タイトル画像1枚ぶんの空きを 2番目と3番目のあいだに作る。
     タイトルは絶対配置のままなので、場所だけ margin で空ける。
     タイトルの高さ = 幅81% × 元画像比(512/2762) ≒ 15.02vw、上下の余白を12pxずつ、
     grid の row-gap 10px が既に入るのでその分を引く */
  .know-hero-question:nth-child(3) {
    margin-top: calc(14px + 15.02vw);
  }
  /* タイトルの中心 = 2番目の下端(18+43+10+43=114px) ＋ 余白12px ＋ タイトル高さの半分 */
  .know-hero-title {
    top: calc(126px + 7.51vw);
  }
}

/* ============================================================
   3カテゴリカード: レスポンシブ3段構成
   ・1200px以上 = 3列
   ・649〜1199px = 2列＋3枚目を中央（下段は上段2枚のx軸中間＝孤立感を解消）
   ・648px以下（スマホ帯）= 1列縦積み

   ▼「直近の修正前」へ戻す可能性あり（ユーザー保留中）。復元手順：
     旧構成＝「3列(901px〜・タイトル＠改行 901〜1199px) → 900px以下で1列」
     ① 下の @media (min-width:649px) and (max-width:1199px) の2+1ブロックを削除
     ② 1列ブロックの境界を (max-width: 648px) → (max-width: 900px) に戻す
     ③ タイトル＠改行を復活：know.php の3タイトルへ br を再挿入
        「営業の仕事を<br class="know-card-br">知る」
        「北モでの<br class="know-card-br">進め方」
        「やりがいと<br class="know-card-br">楽しさ」
        ＋CSSに以下を追加（.know-card-title の色指定群の直後にあった）
        @media (min-width: 1200px) { .know-card-br { display: none; } }
        @media (max-width: 900px)  { .know-card-br { display: none; } }
============================================================ */
@media (min-width: 649px) and (max-width: 1199px) {
  .know-cards-list { grid-template-columns: repeat(2, 1fr); }
  .know-card:nth-child(3) {
    grid-column: 1 / -1;            /* 2行目を全幅トラックに */
    justify-self: center;           /* 中央＝上段2枚のちょうど中間 */
    width: calc(50% - 14px);        /* 幅は上段1枚と同じ（gap 28px の半分を引く）*/
  }
}
@media (max-width: 648px) {
  .know-cards { margin-top: 20px; }
  .know-cards-list {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .know-card-link { padding: 0 0 20px; border-radius: 20px; }
  .know-card-title {
    padding: 14px 16px;
    font-size: clamp(2.4rem, 6.25vw, 4rem);      /* Figma 40px@640 */
  }
  .know-card-text {
    margin: 16px 20px 0;
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);     /* Figma ≒16px@640。下限1.2→1.3rem: index本文13pxに揃え（260729）*/
    line-height: 1.7;
  }
  .know-card-more {
    margin: 16px 18px 0 auto;
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);     /* 下限1.2→1.3rem: card-textと連動（260729）*/
  }
  .know-card-more-arrow { width: clamp(32px, 8.75vw, 56px); }
}

/* ============================================================
   スマホ帯（≤648px）：Figma「Page / Mobile」(node 54:32963・640px設計) へ再構成
   ・ヒーロー: member式（赤帯222px＋道路40px）。吹き出し2×2、タイトルは帯の中央に絶対配置
   ・3カテゴリカード: 1列縦積み
   ・Q&A: 全幅ブリードの黄ブロック・縦書き章見出し→横書き中央
   ・こんな瞬間が好き!: 横スクロールカルーセル（中央スナップ＋両側peek＋ドット）
   ・関連ナビ: 横型カード（左テキスト・右写真）1列
   inner の zoom は解除（zoom:1）し、指定値がそのまま render される。
============================================================ */
@media (max-width: 648px) {
  /* ---- 共通: zoom解除・余白圧縮 ---- */
  .know-cards-inner,
  .know-qa-inner,
  .know-nav-inner {
    zoom: 1;
    padding: 0 16px;
  }
  .know-qa {
    width: 100%;              /* Q&Aは全幅ブリード（Figma: ブロックが画面端まで）*/
  }

  /* ---- ヒーロー: ルール一式は上の @media (max-width:1024px) 統合ブロックへ移設 ----
     （max(0.78×設計値, vw) 方式で 375px でも相似形バランスを維持しつつ最小文字10.5px確保）*/

  /* ---- 3カテゴリカード: 1列化ルールは上の @media (max-width: 900px) ブロックへ移設 ---- */

  /* ---- Q&A ---- */
  .know-qa-decor { height: clamp(5.8rem, 15.63vw, 10rem); }        /* Q&Aロゴ。Figma 640設計の100pxに比例（100/640=15.63vw・260729）*/
  .know-qa-heading {
    padding: 8px 22px;
    font-size: clamp(1.3rem, 3.2vw, 2.1rem);     /* 営業に対する疑問を… */
    margin-bottom: 32px;
  }
  /* 章見出し: 縦書き→横書き・中央。色は全ウィンドウ幅で #848484（--know-gray）に統一 */
  .know-qa-group { margin-top: 44px; }
  .know-qa-group-title {
    position: static;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    display: flex;
    justify-content: center;
    gap: 4px;
    color: var(--know-gray);
    font-size: clamp(2.4rem, 4.7vw, 3rem);       /* Figma 30px@640。下限2→2.4rem: hearing/indexの章見出し24pxに揃え（260729）*/
    margin-bottom: 4px;
  }
  /* 見出し「3. やりがいと楽しさ」がピンク（赤系）背景の上に乗るよう、
     ピンク帯の上端を見出しの少し上まで引き上げる（PC は -42px のまま）。
     引き上げで重なった分の青帯はピンクが上塗りするので境界は綺麗に保たれる。*/
  .know-likes::before,
  .know-likes::after { top: -112px; }
  /* Q&Aブロック = 全幅ブリード。
     Figma(node 59:30 Section/Q&A・640設計)準拠に変更（260729）:
     ・角丸なし。黄カード(枠702>画面)・白箱(677>画面)とも側面の枠線ごと画面外へ
       はみ出させ、上下の枠線だけ見せる（+4px/side のブリード）。
     ・白箱の背景はFigmaも方眼紙テクスチャ(30%)＝既存のCSS方眼と同義なので維持。*/
  .know-qa-item {
    width: calc(100% + 40px);
    margin: 20px -20px 0;
    padding: 12px 0 15px;            /* 下の黄帯 = Figma 17px相当 */
    border-radius: 0;
  }
  .know-qa-question {
    gap: 10px;
    padding: 0 14px;                 /* itemの左右paddingを0にした分をこちらで確保 */
    font-size: clamp(1.75rem, 4.4vw, 2.8rem);    /* Figma ≒28px@640。下限1.7→1.75rem: hearing質問17.5pxに揃え（260729）*/
  }
  .know-qa-q-icon { width: clamp(32px, 8vw, 51px); height: auto; }
  .know-qa-body {
    padding: 24px 16px 20px;
    border-radius: 0;
    background-size: 14px 14px;      /* 方眼はPC 20px→SP 14px（従来どおり）*/
  }
  .know-qa-answer {
    margin: 0 0 18px;
    font-size: clamp(1.4rem, 2.5vw, 1.6rem);     /* Figma ≒16px@640。下限1.2→1.4rem: hearing/interview本文14pxに揃え（260729）*/
    line-height: 1.75;
    text-align: center;              /* Figma: 回答は中央寄せ */
  }
  .know-voices { gap: 12px; }
  .know-voice { gap: 10px; }
  .know-voice-avatar { width: clamp(44px, 12.5vw, 80px); height: clamp(44px, 12.5vw, 80px); }
  .know-voice-text {
    padding: 9px 12px;
    font-size: clamp(1.25rem, 2.2vw, 1.4rem);    /* Figma ≒14px@640。下限1.1→1.25rem: hearingの注記12pxを下回らないよう底上げ（260729）*/
    border-radius: 12px;
  }
  /* 写真はFigma(640設計)準拠で各グループ1枚のみ（左=1枚目を残し2枚目は非表示・260729）。
     587×326の横長比率・角丸40px。*/
  .know-qa-photos {
    width: 100%;
    grid-template-columns: 1fr;
    margin-top: 20px;
  }
  .know-qa-photo {
    aspect-ratio: 587 / 326;
    border-radius: 40px;
    /* ★2026-07-31 SPで横長(587/326)クロップ時、既定の中央だと頭頂部が切れる(森さん)。
       上寄せして頭を全部入れる(下=机/資料側を切る)。焼込み角丸32.8px<CSS40pxで隙間は出ない */
    object-position: center top;
  }
  .know-qa-photo + .know-qa-photo { display: none; }
  /* グループ2の水色帯・likesのピンク帯（zoom解除後の全幅補正）*/
  /* ★2026-07-31 56→92px: PCの境目下げ(94→154px)と同比率でSPも下げる(56×154/94≒92) */
  .know-qa-group--blue { margin-top: 92px; }
  .know-qa-group--blue::before { width: 100vw; }
  .know-likes::after {
    transform: translateX(-50%);
    width: 132vw;
    border-radius: 0 0 50% 50% / 0 0 clamp(60px, 15vw, 120px) clamp(60px, 15vw, 120px);
  }

  /* ---- こんな瞬間が好き!: 横スクロールカルーセル ---- */
  .know-likes {
    margin-top: 64px;
    padding: 8px 0 56px;
  }
  .know-likes-title {
    font-size: clamp(2.2rem, 6.25vw, 4rem);      /* Figma 40px@640 */
    border-width: 2px;
    -webkit-text-stroke: 1.2px var(--know-ink-strong);
  }
  .know-likes-lead {
    margin: -10px auto 10px;
    font-size: clamp(1.25rem, 2.35vw, 1.5rem);   /* 下限1.1→1.25rem: 注記類の底上げ（260729）*/
    padding: 3px 12px;
    transform: translateY(6px);
  }
  /* ---- こんな瞬間が好き!: 横スクロールカルーセル（Figmaスマホ見本準拠・専用UI）----
     一時期「900px以下1列」へ統一したが、ユーザー指示でこの専用UIへ復元済み。*/
  .know-likes-list {
    zoom: 1;                   /* 入れ子zoomを解除（カード側で個別にzoom）*/
    width: auto;
    display: flex;
    margin: 0 -16px;
    padding: 8px 12vw 8px;     /* 左右=端カードが中央で止まる余白 */
    gap: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    align-items: flex-start;
  }
  .know-likes-list::-webkit-scrollbar { display: none; }
  .know-like {
    flex: 0 0 auto;
    scroll-snap-align: center;
    /* カード設計幅520pxを画面の約76%へ（中身の設計pxごと縮小）*/
    zoom: calc(76vw / 520px);
  }

  /* ▼▼▼ 復元用に温存（2026-07-10 レスポンシブ統一により無効化）▼▼▼
     関連ナビの横型カード（左テキスト＋右写真）＝Figmaスマホ見本準拠の専用UI。
     現在ナビは「3列→900px以下で1列縦積み」に統一中。戻す場合はコメント解除。

  .know-nav { margin-block: 40px 56px; }
  .know-nav-list {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .know-nav-link {
    display: grid;
    grid-template-columns: 1fr 44%;
    grid-template-areas:
      "text img"
      "more img";
    align-items: center;
    padding: 12px 14px;
    border-radius: 20px;
  }
  .know-nav-link::before { height: 40%; }        ★下部イエロー帯（Figma 64/159）
  .know-nav-text {
    grid-area: text;
    align-self: center;
    font-size: clamp(1.5rem, 3.75vw, 2.4rem);    ★Figma 24px@640
    -webkit-text-stroke: 5px #fff;
  }
  .know-nav-img {
    grid-area: img;
    width: 100%;
    margin-top: 0;
    aspect-ratio: 246 / 141;
    border-radius: 10px;
  }
  .know-nav-more {
    grid-area: more;
    justify-self: start;
    margin: 12px 0 0 4px;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    gap: 8px;
  }
  .know-nav-arrow { width: 48px; height: 19px; max-width: none; max-height: none; }
  ▲▲▲ 復元用ここまで ▲▲▲ */
}

/* likesカルーセルのドット（know.js が列の直後に生成・スマホ帯のみ表示）*/
.know-likes-dots { display: none; }
@media (max-width: 648px) {
  .know-likes-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    position: relative;
    z-index: 2;
  }
  .know-likes-dots-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--know-ink-strong);
    opacity: 0.22;
    transition: opacity 0.2s ease;
  }
  .know-likes-dots-dot.is-active { opacity: 1; }
}

/* ★2026-08-07 B-1(記号の全角統一)の見た目補正
   全角の約物は字の左右に空きを持つため、見出しで「好き　！」のように離れて見える。
   表記は全角のまま、負マージンで半角時の詰まった字面に戻す */
.know-likes-title-bang {
  /* margin だと width:max-content の内容幅が先に縮み、行が入りきらず折り返すため
     レイアウトに影響しない相対配置でずらし、右の余りは見出しの padding-right で吸収する */
  position: relative;
  left: -0.26em;
}
/* ！を左へ寄せたぶん右に余りが出るので、その分だけ右の内側余白を削って箱の左右を揃える */
.know-likes-title { padding-right: calc(clamp(20px, 3.4667cqw, 38px) - 0.26em); }