@charset "UTF-8";
/* ==========================================================================
   lxdx  共通スタイルシート
   --------------------------------------------------------------------------
   1. デザイントークン（カスタムプロパティ）
   2. ベース / リセット
   3. 共通パーツ（ヘッダー・ボタン・チップ・フッター）
   4. トップページ
   5. 下層ページ共通
   6. 各ページ固有（診断・結果・コラム・フォーム・404）
   7. レスポンシブ（1360 / 1180 / 1000 / 900 / 820 / 680px）
   ==========================================================================
   ・外部ライブラリ / ビルド不要。このファイル 1 枚で全 16 ページに適用されます
   ・色・角丸・影は :root のトークンを変更すれば全体に反映されます
   ========================================================================== */
/* ==========================================================================
   1. デザイントークン
   色・余白・角丸・影・グラデーション。ここを変えると全ページに反映されます
   ========================================================================== */
:root {
  /* 和文=Noto Sans JP／欧文・数字=Inter。数字の可読性を優先した組み合わせ */
  --font: "Inter","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-num: "Inter","Noto Sans JP",sans-serif;
  --wrap: 1200px;
  --wrap-hero: 1760px;
  --wrap-hd: 1560px;
  --gut: clamp(20px,3.4vw,40px);
  --ink: #101b30;
  --ink-2: #33415c;
  --muted: #67748c;
  --line: #e3e9f2;
  --bg: #ffffff;
  --bg-soft: #f4f7fc;
  --navy: #060c1c;
  --navy-2: #0b1428;
  --blue: #3b6bff;
  --blue-l: #5b8cff;
  --purple: #7b5cff;
  --cyan: #26e0d8;
  --green: #22b573;
  --orange: #f59331;
  --line-green: #06c755;
  --grad: linear-gradient(100deg,#3b6bff 0%,#6f63ff 52%,#9a58ff 100%);
  --grad-txt: linear-gradient(128deg,#8af4ff 0%,#93cdff 46%,#d2b0ff 100%);
  --sh-s: 0 2px 10px rgba(16,27,48,.05);
  --sh-m: 0 10px 34px rgba(16,27,48,.09);
  --sh-l: 0 26px 70px rgba(16,27,48,.14);
  --r: 18px;
  --r-l: 26px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  font-feature-settings: "palt" 1;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.85;
  font-weight: 500;
  letter-spacing: .02em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.wrap {
  width: min(100% - var(--gut)*2, var(--wrap));
  margin-inline: auto;
}

.wrap-hero {
  width: min(100% - clamp(20px,1.7vw,26px)*2, var(--wrap-hero));
  margin-inline: auto;
}

.wrap-hd {
  width: min(100% - clamp(20px,1.7vw,26px)*2, var(--wrap-hd));
  margin-inline: auto;
}

.wrap-lg {
  width: min(100% - clamp(20px,1.7vw,26px)*2, 1560px);
  margin-inline: auto;
}

.en {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 800;
  letter-spacing: .04em;
}

/* ==========================================================================
   2-1. スクロール時のフェードイン
   JS が .is-in を付与。prefers-reduced-motion では無効化
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s cubic-bezier(.2,.7,.25,1),transform .75s cubic-bezier(.2,.7,.25,1);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion:reduce) {
  .reveal {
    opacity: 1!important;
    transform: none!important;
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   3-1. ヘッダー / グローバルナビ / ドロワー
   ========================================================================== */
.hd {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(227,233,242,.9);
  transition: box-shadow .3s;
}

.hd.is-scr {
  box-shadow: 0 6px 24px rgba(16,27,48,.08);
}

.hd__in {
  display: flex;
  align-items: center;
  gap: clamp(16px,2vw,34px);
  height: 78px;
}

.logo {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -.02em;
  color: #101b30;
  flex: none;
}

.gnav {
  display: flex;
  align-items: center;
  gap: clamp(14px,1.5vw,26px);
  font-size: 13.5px;
  font-weight: 700;
  color: #33455f;
}

.gnav a {
  position: relative;
  padding: 26px 2px;
  white-space: nowrap;
  transition: color .25s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.gnav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.7,.25,1);
}

.gnav a:hover {
  color: var(--blue);
}

.gnav a:hover::after,
.gnav a.is-active::after {
  transform: scaleX(1);
}

.gnav a.is-active {
  color: var(--blue);
}

.gnav__div {
  width: 1px;
  height: 22px;
  background: #dbe2ee;
  flex: none;
}

.gnav__pg {
  color: #5b6b86;
}

.gnav__pg svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  opacity: .7;
  transition: transform .25s;
}

.gnav__pg:hover svg {
  transform: translate(2px,-2px);
}

.hd__cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1.6px solid var(--line-green);
  color: #0a9e48;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  transition: .28s;
  white-space: nowrap;
}

.btn-line img {
  width: 18px;
}

.btn-line:hover {
  background: var(--line-green);
  color: #fff;
  box-shadow: 0 8px 22px rgba(6,199,85,.3);
}

.btn-line:hover .li-g {
  display: none;
}

.btn-line .li-w {
  display: none;
}

.btn-line:hover .li-w {
  display: block;
}

.btn-hd {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  padding: 13px 24px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(59,107,255,.34);
  transition: .3s;
}

.btn-hd:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(59,107,255,.45);
  filter: saturate(1.12);
}

.btn-hd svg {
  width: 13px;
  height: 13px;
  stroke: #fff;
  stroke-width: 2.8;
  fill: none;
}

@media (max-width:1360px) {
  .hd__cta .btn-line {
    display: none;
  }
}

.burger {
  display: none;
  margin-left: auto;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  border: 1px solid var(--line);
  position: relative;
  background: #fff;
}

.burger span {
  position: absolute;
  left: 14px;
  width: 20px;
  height: 2px;
  background: #101b30;
  border-radius: 2px;
  transition: .3s;
}

.burger span:nth-child(1) {
  top: 18px;
}

.burger span:nth-child(2) {
  top: 24px;
}

.burger span:nth-child(3) {
  top: 30px;
}

.is-open .burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.is-open .burger span:nth-child(2) {
  opacity: 0;
}

.is-open .burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   3-2. ボタン / チップ / LINE注記（全ページ共通）
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-weight: 700;
  border-radius: 999px;
  transition: transform .3s cubic-bezier(.2,.7,.25,1),box-shadow .3s,filter .3s;
  position: relative;
  overflow: hidden;
}

.btn--grad {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 16px 40px rgba(59,107,255,.42);
}

.btn--grad::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,#5b8cff,#b071ff);
  opacity: 0;
  transition: opacity .35s;
}

.btn--grad>* {
  position: relative;
  z-index: 1;
}

.btn--grad:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 52px rgba(59,107,255,.5);
}

.btn--grad:hover::after {
  opacity: 1;
}

.btn--lg {
  font-size: clamp(17px,1.55vw,21px);
  padding: 24px 46px;
  letter-spacing: .05em;
}

.btn__ar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  display: grid;
  place-items: center;
  flex: none;
}

.btn__ar svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  stroke-width: 2.6;
  fill: none;
}

/* chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.17);
  color: #e7eeff;
  backdrop-filter: blur(6px);
}

.chip svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* LINE note */
.br-sp,
.br-ctab {
  display: none;
}

.lnote {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: #b7c6e6;
}

.lnote .lico {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--line-green);
  display: grid;
  place-items: center;
  flex: none;
}

.lnote .lico img {
  width: 15px;
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   4-1. トップ：ヒーロー
   背景画像＋6枚のUIカードの重ね配置。カードは .l--xxx で位置指定
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(70vh,720px);
  display: flex;
  align-items: center;
  padding: 150px 0 52px;
  background: var(--navy);
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(92deg,rgba(4,8,20,.94) 0%,rgba(5,10,24,.82) 38%,rgba(5,10,26,.42) 66%,rgba(5,10,26,.32) 100%);
}

.hero__glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .5;
  pointer-events: none;
}

.hero__glow--a {
  width: 700px;
  height: 700px;
  right: -140px;
  top: -200px;
  background: #1d4bff;
  opacity: .42;
}

.hero__glow--b {
  width: 600px;
  height: 600px;
  right: 14%;
  bottom: -240px;
  background: #7b3cff;
  opacity: .38;
}

.hero__in {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.38fr);
  gap: clamp(16px,1.8vw,36px);
  align-items: start;
  position: relative;
}

.hero__copy {
  order: 1;
  align-self: start;
}

.hv {
  order: 2;
  align-self: center;
  --hvb: clamp(0px,calc((100vw - 1150px)*.36),178px);
  width: calc(100% + var(--hvb));
  margin-left: calc(-1 * var(--hvb));
}

.hero__copy {
  color: #fff;
  container-type: inline-size;
  transform: translateX(clamp(6px,2.6vw,50px));
}

.hero h1 {
  font-size: clamp(30px,7.5cqi,58px);
  font-weight: 900;
  line-height: 1.56;
  letter-spacing: -.005em;
  text-shadow: 0 4px 30px rgba(0,0,0,.5);
}

.hero h1 .em {
  background: var(--grad-txt);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.9em;
  line-height: 1.06;
  display: inline-block;
  margin: 0 -.13em 0 -.08em;
  vertical-align: -.1em;
}

.hero__lead {
  margin-top: 32px;
  font-size: clamp(15.5px,3.45cqi,26px);
  line-height: 2.05;
  color: #c9d6f0;
  font-weight: 500;
}

.hero__lead .hl {
  color: #7fe8ff;
}

.hero .chips {
  margin-top: 34px;
  width: fit-content;
}

.hero .chip {
  font-size: clamp(13.5px,2.35cqi,18px);
  padding: 13px 24px;
}

.hero .chip svg {
  width: 20px;
  height: 20px;
}

.hero__btn {
  margin-top: 40px;
  width: fit-content;
}

.hero__btn .btn--lg {
  font-size: clamp(17px,3.75cqi,28px);
  padding: 29px 58px;
}

.hero .lnote {
  margin-top: 32px;
  width: fit-content;
  font-size: clamp(13px,2.2cqi,17px);
}

/* hero visual */
.hv {
  position: relative;
  aspect-ratio: 1/.6;
  min-height: 300px;
}

.hv .l {
  position: absolute;
  display: block;
}

.hv .l img {
  width: 100%;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,.55));
  opacity: 0;
  transform: translate3d(0,34px,0) scale(.96);
  backface-visibility: hidden;
}

.l--value {
  width: 43.5%;
  left: 21.4%;
  top: 18%;
  z-index: 4;
}

.l--term {
  width: 24.7%;
  left: 12.3%;
  top: 0;
  z-index: 5;
}

.l--market {
  width: 30%;
  right: 3%;
  top: 26.5%;
  z-index: 2;
}

.l--skills {
  width: 30.4%;
  right: 3%;
  top: 69%;
  z-index: 3;
}

.l--map {
  width: 20.1%;
  left: 1.6%;
  top: 59%;
  z-index: 6;
}

.l--badge {
  width: 22%;
  right: 0;
  top: 0;
  z-index: 7;
}

/* 1) entrance */
.hv.is-in .l img {
  animation: hvIn .95s cubic-bezier(.2,.75,.25,1) forwards;
}

.hv.is-in .l--term img {
  animation-delay: .05s;
}

.hv.is-in .l--market img {
  animation-delay: .17s;
}

.hv.is-in .l--value img {
  animation-delay: .29s;
}

.hv.is-in .l--map img {
  animation-delay: .43s;
}

.hv.is-in .l--skills img {
  animation-delay: .53s;
}

.hv.is-in .l--badge img {
  animation: hvPop .95s cubic-bezier(.2,.75,.25,1) .66s forwards;
}

@keyframes hvIn {
  to{opacity: 1;
  transform: translate3d(0,0,0) scale(1)};
}

@keyframes hvPop {
  0%{opacity: 0;
  transform: translate3d(0,18px,0) scale(.7)}62%{opacity:1;
  transform: translate3d(0,0,0) scale(1.08)}100%{opacity:1;
  transform: translate3d(0,0,0) scale(1)};
}

/* 2) continuous drift (starts after entrance) */
.hv.is-anim .l img {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  will-change: transform;
}

.hv.is-anim .l--term img {
  animation: drift 7.5s ease-in-out 0s infinite both;
}

.hv.is-anim .l--market img {
  animation: drift 8.6s ease-in-out .5s infinite both;
}

.hv.is-anim .l--value img {
  animation: drift 9.4s ease-in-out .2s infinite both;
}

.hv.is-anim .l--map img {
  animation: drift 8.1s ease-in-out .8s infinite both;
}

.hv.is-anim .l--skills img {
  animation: drift 7.9s ease-in-out .35s infinite both;
}

.hv.is-anim .l--badge img {
  animation: badgeFloat 6.4s ease-in-out 0s infinite both;
}

@keyframes drift {
  0%,100%{transform: translate3d(0,0,0)}50%{transform:translate3d(0,-11px,0)};
}

@keyframes badgeFloat {
  0%,100%{transform: translate3d(0,0,0) rotate(-2.5deg)}50%{transform:translate3d(0,-16px,0) rotate(2.5deg)};
}

/* 3) glow pulse behind the stack */
.hv::before {
  content: "";
  position: absolute;
  left: 14%;
  top: 10%;
  width: 72%;
  height: 82%;
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(72,140,255,.42),transparent 72%);
  filter: blur(48px);
  animation: hvPulse 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  will-change: opacity;
}

@keyframes hvPulse {
  0%,100%{opacity: .5}50%{opacity:.9};
}

@media (prefers-reduced-motion:reduce) {
  .hv .l img {
    opacity: 1;
    transform: none;
    animation: none!important;
  }

  .hv::before {
    animation: none;
  }
}

/* ==========================================================================
   3-3. セクションの共通枠（.sec / .stitle）
   ========================================================================== */
.sec {
  padding: clamp(74px,7.2vw,120px) 0;
}

.sec--soft {
  background: var(--bg-soft);
}

.sec--tight {
  padding-block: clamp(44px,3.6vw,62px);
}

.sec--grad {
  background: linear-gradient(180deg,#f4f7fc 0%,#ffffff 100%);
}

.stitle {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-size: clamp(24px,2.5vw,36px);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.5;
}

.stitle::before,
.stitle::after {
  content: "";
  width: clamp(30px,4vw,68px);
  height: 2px;
  background: linear-gradient(90deg,transparent,#c3cee3);
}

.stitle::after {
  background: linear-gradient(90deg,#c3cee3,transparent);
}

.slead {
  margin: 20px auto 0;
  max-width: 760px;
  text-align: center;
  color: var(--muted);
  font-size: 16px;
  line-height: 2;
}

/* ==========================================================================
   4-2. トップ：診断で分かること
   ========================================================================== */
.know {
  margin-top: clamp(26px,2.4vw,38px);
  width: min(100%,1320px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(18px,1.8vw,28px);
}

.kcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(24px,2.1vw,32px) clamp(20px,1.8vw,27px);
  box-shadow: var(--sh-s);
  transition: transform .35s cubic-bezier(.2,.7,.25,1),box-shadow .35s,border-color .35s;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  grid-template-rows: auto auto minmax(0,1fr);
  column-gap: clamp(12px,1.05vw,17px);
  row-gap: 13px;
}

.kcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-l);
  border-color: #cfdcf5;
}

.kcard__ic {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: clamp(48px,4vw,63px);
  flex: none;
}

.kcard__ic svg {
  width: 100%;
  height: auto;
  display: block;
}

.kcard h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: clamp(15.5px,1.24vw,18px);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.5;
  text-wrap: pretty;
}

.kcard p {
  grid-column: 2;
  grid-row: 2;
  color: var(--muted);
  font-size: clamp(15px,1.15vw,17px);
  line-height: 1.95;
  text-wrap: pretty;
}

.kbar {
  grid-column: 1/-1;
  grid-row: 3;
  align-self: end;
  padding-top: clamp(18px,1.7vw,26px);
}

.kbar__track {
  display: block;
  height: 14px;
  border-radius: 99px;
  background: #e9eefb;
  overflow: hidden;
}

.kbar__fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--grad);
  width: 0;
  transition: width 1.3s cubic-bezier(.2,.7,.25,1) .15s;
}

.is-in .kbar__fill {
  width: var(--w,78%);
}

.kbar__row {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 700;
}

.kbar__row b {
  display: block;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: clamp(24px,2.05vw,31px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0;
  margin-top: 3px;
}

.kbar__row b span {
  font-size: 15px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 700;
}

.kbar__row .up b {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kbar__row .up {
  text-align: right;
}

.kfaces {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  display: flex;
  gap: clamp(12px,1.2vw,20px);
  padding-top: clamp(16px,1.5vw,24px);
}

.kfaces svg {
  width: clamp(36px,3.3vw,48px);
  height: auto;
}

.kmini {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  padding-top: clamp(16px,1.5vw,24px);
  display: grid;
  gap: 14px;
}

.kmini__r {
  display: grid;
  grid-template-columns: clamp(84px,6.5vw,96px) minmax(0,1fr);
  align-items: center;
  gap: 14px;
}

.kmini__l {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  border-radius: 99px;
  padding: 6px 0;
}

.kmini__r:nth-child(1) .kmini__l {
  background: linear-gradient(90deg,#3b6bff,#7b5cff);
}

.kmini__r:nth-child(2) .kmini__l {
  background: linear-gradient(90deg,#17b877,#3ecf8e);
}

.kmini__t {
  display: block;
  height: 14px;
  border-radius: 99px;
  background: #e9eefb;
  overflow: hidden;
}

.kmini__f {
  display: block;
  height: 100%;
  border-radius: 99px;
  width: 0;
  transition: width 1.3s cubic-bezier(.2,.7,.25,1) .3s;
}

.is-in .kmini__f {
  width: var(--w);
}

.kmini__r:nth-child(1) .kmini__f {
  background: linear-gradient(90deg,#3b6bff,#7b5cff);
}

.kmini__r:nth-child(2) .kmini__f {
  background: linear-gradient(90deg,#17b877,#48d79b);
}

/* ==========================================================================
   4-3. トップ：あなたはどのタイプ？
   ========================================================================== */
.types {
  margin-top: clamp(26px,2.4vw,38px);
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: clamp(18px,1.7vw,26px);
}

.tcard {
  position: relative;
  background: #fff;
  border: 1.6px solid var(--tc,#dbe4f7);
  border-radius: var(--r-l);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-s);
  transition: transform .35s cubic-bezier(.2,.7,.25,1),box-shadow .35s;
}

.tcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--tg);
}

.tcard:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-l);
}

.tcard__h {
  padding: 30px 26px 0;
  text-align: center;
}

.tcard__h h3 {
  font-size: clamp(17px,1.35vw,20px);
  font-weight: 900;
  color: var(--tc);
  letter-spacing: .03em;
}

.tcard__im {
  padding: 16px 20px 6px;
  background: var(--tb);
  display: grid;
  place-items: center;
  min-height: 168px;
}

.tcard__im img {
  width: 100%;
  max-width: 280px;
}

.tcard__b {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tcard__b p {
  color: var(--ink-2);
  font-size: 14.6px;
  line-height: 1.95;
  flex: 1;
}

.tmore {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--tc);
  align-self: flex-end;
}

.tmore svg {
  width: 16px;
  height: 16px;
  transition: transform .3s;
}

.tcard:hover .tmore svg {
  transform: translateX(5px);
}

.t1 {
  --tc: #2f6bff;
  --tb: #f2f6ff;
  --tg: linear-gradient(90deg,#2f6bff,#63a4ff);
}

.t2 {
  --tc: #17a56c;
  --tb: #f0fbf5;
  --tg: linear-gradient(90deg,#17a56c,#57d69c);
}

.t3 {
  --tc: #e2871a;
  --tb: #fff8ee;
  --tg: linear-gradient(90deg,#e2871a,#ffbe5c);
}

.t4 {
  --tc: #7b5cff;
  --tb: #f6f3ff;
  --tg: linear-gradient(90deg,#7b5cff,#b18bff);
}

/* ==========================================================================
   3-4. 90秒CTA帯（トップ・下層ページ共通）
   ========================================================================== */
.ctab {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(46px,4.3vw,68px) 0;
  color: #fff;
}

.ctab__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ctab__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ctab__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg,rgba(4,9,22,.93),rgba(6,12,30,.7));
}

/* the in-page band uses the supplied 90SEC artwork and breaks out wider than the section */
.ctab--in {
  --cw: min(100vw - 52px, 1760px);
  width: var(--cw);
  margin-inline: calc(50% - var(--cw)/2);
  margin-top: clamp(40px,3.6vw,62px);
  margin-bottom: 0;
  padding: clamp(26px,2.4vw,40px) clamp(24px,2.6vw,52px);
  aspect-ratio: 2172/724;
  border-radius: clamp(14px,1.5vw,26px);
  display: flex;
  align-items: center;
  container-type: inline-size;
  background: #03060f;
}

.ctab--in .ctab__bg::after {
  display: none;
}

.ctab--in .ctab__grid {
  width: min(100%,52cqi);
  margin-inline: auto;
  display: block;
  text-align: center;
}

.ctab--in .chips {
  justify-content: center;
}

.ctab--in .btn {
  margin-inline: auto;
}

.ctab--in .lnote {
  justify-content: center;
  text-align: left;
}

.ctab .tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(12px,1.05cqi,16px);
  font-weight: 800;
  padding: .6em 1.5em;
  border-radius: 999px;
  border: 1.5px solid rgba(84,214,255,.5);
  background: rgba(20,60,110,.35);
  color: #a9ecff;
}

.ctab h2 {
  margin-top: .5em;
  font-size: clamp(19px,3.35cqi,52px);
  font-weight: 900;
  line-height: 1.36;
  letter-spacing: .005em;
}

.ctab h2 .em {
  background: var(--grad-txt);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ctab__lead {
  margin-top: .9em;
  color: #c2d0ec;
  font-size: clamp(12.5px,1.42cqi,20px);
  line-height: 1.8;
}

.ctab .chips {
  margin-top: 1.4em;
  gap: .7em;
}

.ctab .chip {
  font-size: clamp(11.5px,1.15cqi,17px);
  padding: .62em 1.35em;
  gap: .5em;
}

.ctab .chip svg {
  width: 1.15em;
  height: 1.15em;
}

.ctab .btn {
  margin-top: 1.3em;
  width: min(100%,38cqi);
}

.ctab .btn--lg {
  font-size: clamp(14px,1.65cqi,24px);
  padding: .95em 1.6em;
  gap: .6em;
}

.ctab .btn__ar {
  width: 1.55em;
  height: 1.55em;
}

.ctab .btn__ar svg {
  width: .62em;
  height: .62em;
}

.ctab .lnote {
  margin-top: 1.15em;
  font-size: clamp(11px,1.12cqi,16px);
}

.ctab .lnote .lico {
  width: 1.7em;
  height: 1.7em;
}

.ctab .lnote .lico img {
  width: 1em;
}

@media (max-width:900px) {
  .ctab--in {
    aspect-ratio: auto;
    padding: clamp(28px,5vw,44px) clamp(22px,5vw,40px);
  }

  .ctab--in .ctab__bg img {
    object-position: 78% center;
  }

  .ctab--in .ctab__bg::after {
    display: block;
    background: linear-gradient(180deg,rgba(4,9,22,.7),rgba(5,11,26,.78));
  }

  .ctab--in {
    container-type: normal;
  }

  .ctab--in .tag {
    font-size: 12.5px;
  }

  .ctab--in h2 {
    font-size: clamp(21px,5.2vw,30px);
  }

  .ctab--in .ctab__lead {
    font-size: 14px;
  }

  .ctab--in .chip {
    font-size: 12.5px;
  }

  .ctab--in .btn {
    width: 100%;
  }

  .ctab--in .btn--lg {
    font-size: 15.5px;
  }

  .ctab--in .lnote {
    font-size: 12.5px;
  }

  .br-ctab {
    display: inline;
  }

  .ctab--in .ctab__grid {
    width: 100%;
    text-align: center;
  }

  .ctab--in h2 {
    font-size: clamp(22px,5.9vw,34px);
    line-height: 1.45;
  }

  .ctab--in .ctab__lead {
    font-size: clamp(13px,3.5vw,16px);
    line-height: 1.85;
  }

  .ctab--in .chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-items: center;
    margin-top: 1.6em;
  }

  .ctab--in .chip {
    font-size: clamp(12px,3.2vw,14px);
    padding: 11px 8px;
    width: 100%;
    justify-content: center;
  }

  .ctab--in .chip:last-child {
    grid-column: 1/-1;
    width: min(100%,62%);
  }

  .ctab--in .btn {
    width: 100%;
    margin-top: 1.5em;
  }

  .ctab--in .btn--lg {
    font-size: clamp(13.5px,3.9vw,17px);
    padding: 16px 12px;
    gap: 8px;
    white-space: nowrap;
  }

  .ctab--in .btn__ar {
    width: 26px;
    height: 26px;
  }

  .ctab--in .lnote {
    justify-content: center;
    text-align: left;
    gap: 9px;
  }

  .ctab--in .lnote .lico {
    width: 24px;
    height: 24px;
  }
}

/* ==========================================================================
   4-4. トップ：ご利用の流れ
   ========================================================================== */
.flow {
  margin-top: clamp(26px,2.4vw,38px);
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: clamp(16px,1.4vw,24px);
  align-items: stretch;
}

.fcard {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(26px,2.4vw,38px) clamp(24px,2.1vw,32px);
  box-shadow: var(--sh-s);
  transition: transform .35s cubic-bezier(.2,.7,.25,1),box-shadow .35s;
  display: flex;
  flex-direction: column;
}

.fcard:hover {
  transform: translateY(-7px);
  box-shadow: var(--sh-m);
}

.fcard::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * clamp(16px,1.4vw,24px) / 2 - 8px);
  width: 16px;
  height: 16px;
  border-top: 2.6px solid #b9c7e2;
  border-right: 2.6px solid #b9c7e2;
  transform: translateY(-50%) rotate(45deg);
}

.fcard:last-child::after {
  display: none;
}

.fcard__hd {
  display: flex;
  align-items: baseline;
  gap: clamp(12px,1.1vw,16px);
  min-height: clamp(78px,7.2vw,106px);
}

.fcard__n {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 800;
  font-size: clamp(34px,3.3vw,50px);
  color: #d3ddf2;
  line-height: 1;
  flex: none;
}

.fcard__hd h3 {
  font-size: clamp(17px,1.5vw,21px);
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: .01em;
  text-wrap: pretty;
}

.fcard__ic {
  margin: 22px 0;
  height: clamp(88px,7.6vw,112px);
  display: grid;
  place-items: center;
}

.fcard__ic svg {
  width: clamp(80px,7vw,104px);
  height: auto;
}

.fcard p {
  color: var(--muted);
  font-size: clamp(14.5px,1.12vw,16.5px);
  line-height: 1.92;
  flex: 1;
  text-wrap: pretty;
}

.lphone {
  width: clamp(58px,5vw,74px);
  aspect-ratio: .72;
  border-radius: 14px;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(16,27,48,.2);
  border: 3.4px solid #1c2a45;
}

.lphone .lico {
  display: grid;
  place-items: center;
  width: 62%;
}

.lphone .lico img {
  width: 100%;
}

/* ==========================================================================
   4-5. トップ：なぜ無料で使えるの？ / 代表メッセージ
   ========================================================================== */
.why {
  margin-top: clamp(26px,2.4vw,38px);
  display: grid;
  grid-template-columns: minmax(0,1.28fr) minmax(0,1fr);
  gap: clamp(20px,2vw,32px);
  align-items: stretch;
}

.why__l {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(14px,1.3vw,20px);
}

.wcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(22px,2vw,30px) clamp(18px,1.6vw,24px);
  box-shadow: var(--sh-s);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .35s,box-shadow .35s;
}

.wcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-m);
}

.wcard__ic {
  height: clamp(66px,5.6vw,82px);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.wcard__ic svg {
  width: clamp(60px,5.2vw,76px);
  height: auto;
}

.wcard h3 {
  font-size: clamp(15px,1.18vw,17.5px);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0;
  text-wrap: pretty;
}

.wcard p {
  margin-top: 12px;
  color: var(--muted);
  font-size: clamp(13.2px,1.02vw,14.8px);
  line-height: 1.9;
  letter-spacing: 0;
  text-wrap: pretty;
}

.msg {
  background: linear-gradient(150deg,#fff,#f7faff);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(28px,2.6vw,44px);
  box-shadow: var(--sh-m);
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: clamp(22px,2.3vw,38px);
  align-items: start;
}

.msg__ph {
  width: clamp(112px,9.5vw,152px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  box-shadow: 0 14px 34px rgba(16,27,48,.2);
  border: 4px solid #fff;
}

.msg__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.msg h3 {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .05em;
}

.msg p {
  margin-top: 18px;
  color: var(--ink-2);
  font-size: 15.6px;
  line-height: 2.1;
}

.msg__sig {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed #ccd7ea;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 700;
}

.msg__sig b {
  display: block;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: .14em;
  margin-top: 8px;
}

/* ==========================================================================
   4-6. トップ：よくあるご質問（details/summary）
   ========================================================================== */
.faq {
  margin-top: clamp(24px,2.2vw,36px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 22px;
  align-content: start;
}

.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--sh-s);
  transition: box-shadow .3s,border-color .3s;
  height: max-content;
}

.faq details[open] {
  box-shadow: var(--sh-m);
  border-color: #cfdcf5;
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 19px 24px;
  font-size: 15px;
  font-weight: 700;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  margin-left: auto;
  width: 11px;
  height: 11px;
  border-right: 2.4px solid #7d8ca8;
  border-bottom: 2.4px solid #7d8ca8;
  transform: rotate(45deg) translateY(-3px);
  transition: transform .3s;
  flex: none;
}

.faq details[open] summary::after {
  transform: rotate(-135deg) translateY(-3px);
}

.faq .q {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--grad);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 13px;
  font-weight: 800;
  flex: none;
}

.faq .a {
  padding: 0 24px 22px 66px;
  color: var(--muted);
  font-size: 14.4px;
  line-height: 2;
}

/* ==========================================================================
   4-7. （未使用）旧・最終CTA帯
   現在トップからは削除済み。復活させる場合に使用
   ========================================================================== */
.last {
  position: relative;
  background: var(--navy);
  color: #fff;
  padding: clamp(42px,3.8vw,60px) 0;
  overflow: hidden;
  isolation: isolate;
}

.last::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(1000px 340px at 18% 30%,rgba(45,90,255,.42),transparent 70%),
             radial-gradient(900px 320px at 82% 70%,rgba(140,60,255,.34),transparent 70%),
             linear-gradient(180deg,#050b1a,#081026);
}

.last h2 {
  text-align: center;
  font-size: clamp(21px,2.35vw,34px);
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: .02em;
}

.last h2 .em {
  background: var(--grad-txt);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.last .btn {
  width: 100%;
}

/* ==========================================================================
   3-5. フッター
   ========================================================================== */
.ft {
  background: #050a17;
  color: #93a3c2;
  padding: 36px 0;
}

.ft .logo {
  color: #fff;
  font-size: 24px;
}

.ft nav {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  font-size: 12.8px;
  font-weight: 600;
}

.ft nav a:hover {
  color: #fff;
}

/* ==========================================================================
   7. レスポンシブ
   1360 / 1180 / 1000 / 900 / 820 / 680px の順に記述
   ========================================================================== */
@media (max-width:1180px) {
  .gnav {
    display: none;
  }

  .burger {
    display: block;
  }

  .hd__cta {
    display: none;
  }

  .hd__in {
    gap: 16px;
  }

  .know,
  .types,
  .flow {
    grid-template-columns: repeat(2,1fr);
  }

  .fcard::after {
    display: none;
  }

  .why {
    grid-template-columns: 1fr;
  }

  .why__l {
    grid-template-columns: repeat(3,1fr);
  }

  .br-sp {
    display: inline;
  }

  .hero__in {
    grid-template-columns: 1fr;
    gap: clamp(22px,3vw,36px);
    align-items: stretch;
  }

  .hero__copy {
    display: contents;
  }

  .hero h1 {
    order: 1;
    font-size: clamp(22px,6.7vw,46px);
  }

  .hero__lead {
    order: 2;
    margin-top: 0;
  }

  .hero .chips {
    display: none;
  }

  .hv {
    order: 3;
    margin-block: clamp(4px,1.2vw,14px);
  }

  .hero__btn {
    order: 4;
    margin-top: 0;
  }

  .hero .lnote {
    order: 5;
    margin-top: 0;
  }

  .hero__lead {
    font-size: clamp(15px,1.95vw,19px);
  }

  .hero .chip {
    font-size: clamp(13px,1.6vw,15.5px);
    padding: 11px 20px;
  }

  .hero .chip svg {
    width: 18px;
    height: 18px;
  }

  .hero__btn {
    width: min(100%,540px);
  }

  .hero__btn .btn--lg {
    font-size: clamp(15.5px,2.1vw,20px);
    padding: clamp(18px,2vw,24px) clamp(20px,2.6vw,36px);
    gap: 12px;
    width: 100%;
  }

  .hero .lnote {
    font-size: clamp(12.5px,1.5vw,15px);
  }

  .hero {
    padding: 120px 0 84px;
  }

  .hv {
    aspect-ratio: 1/.62;
    --hvb: 0px;
    width: 100%;
    margin-left: 0;
    max-width: 760px;
    justify-self: center;
  }

  .hero__copy {
    text-align: left;
  }

  .ctab__grid {
    grid-template-columns: 1fr;
  }

  .ctab .chips {
    justify-content: center;
  }

  .ctab .lnote {
    justify-content: center;
    text-align: left;
  }
}

@media (max-width:820px) {
  .last h2 {
    text-align: center;
  }

  .msg {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .msg__sig {
    text-align: center;
  }

  .faq {
    grid-template-columns: 1fr;
  }

  .why__l {
    grid-template-columns: 1fr;
  }
}

/* --- 680px以下：ヒーロー画像を縦積みグリッドに切り替え --- */
@media (max-width:680px) {
  .hv {
    position: static;
    aspect-ratio: auto;
    min-height: 0;
    width: 100%;
    max-width: 470px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(9px,2.4vw,14px);
    align-items: center;
  }

  .hv::before {
    display: none;
  }

  .hv .l {
    position: static;
    width: auto;
  }

  .hv .l img {
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.5));
  }

  .hv .l--value {
    grid-column: 1/-1;
    grid-row: 1;
  }

  .hv .l--market {
    grid-column: 1;
    grid-row: 2;
  }

  .hv .l--map {
    grid-column: 2;
    grid-row: 2;
  }

  .hv .l--skills {
    grid-column: 1/-1;
    grid-row: 3;
  }

  .hv .l--term,
  .hv .l--badge {
    display: none;
  }
}

@media (max-width:680px) {
  body {
    font-size: 15px;
  }

  .know,
  .types,
  .flow {
    grid-template-columns: 1fr;
  }

  .stitle {
    gap: 14px;
  }

  .hero h1 {
    font-size: clamp(19px,6.55vw,32px);
  }

  .btn--lg {
    font-size: 15.5px;
    padding: 20px 24px;
    gap: 10px;
    width: 100%;
  }

  .btn__ar {
    width: 30px;
    height: 30px;
  }

  .ctab--in {
    border-radius: 22px;
  }

  .ft nav {
    gap: 16px 20px;
  }

  .tcard__im {
    min-height: 0;
  }

  .lnote {
    font-size: 12.5px;
  }
}

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 78px 0 auto;
  z-index: 79;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transform: translateY(-14px);
  opacity: 0;
  visibility: hidden;
  transition: .32s;
  box-shadow: 0 20px 40px rgba(16,27,48,.14);
  max-height: calc(100dvh - 78px);
  overflow-y: auto;
}

.is-open .drawer {
  transform: none;
  opacity: 1;
  visibility: visible;
}

.drawer__in {
  padding: 20px var(--gut) 30px;
}

.drawer h4 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  color: #93a1b8;
  margin: 22px 0 4px;
}

.drawer h4:first-child {
  margin-top: 0;
}

.drawer li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: 15px;
}

.drawer li a svg {
  width: 13px;
  height: 13px;
  stroke: #93a1b8;
  stroke-width: 2.4;
  fill: none;
  margin-left: auto;
}

.drawer__cta {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.drawer .btn-hd,
.drawer .btn-line {
  width: 100%;
  justify-content: center;
  padding: 16px;
  font-size: 15px;
}

/* ==========================================================================
   5-1. 下層ページ共通（ページヘッダー / 本文 .prose）
   ========================================================================== */
.phead {
  position: relative;
  background: linear-gradient(112deg,#f4f7fd 0%,#eef3fc 46%,#f5f2ff 100%);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(100px,8vw,124px) 0 clamp(30px,3vw,46px);
}

.phead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(900px 320px at 12% 20%,rgba(45,90,255,.42),transparent 70%),
             radial-gradient(800px 300px at 88% 80%,rgba(140,60,255,.34),transparent 70%),
             linear-gradient(180deg,#050b1a,#0a1226);
}

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #93a9d4;
  font-weight: 600;
}

.crumb a:hover {
  color: #fff;
}

.crumb span {
  opacity: .5;
}

.phead h1 {
  margin-top: 12px;
  font-size: clamp(26px,3.2vw,42px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: .01em;
  background: linear-gradient(100deg,#16234d 0%,#1f3fb8 42%,#5b4bd6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}

.phead h1 .em {
  background: var(--grad-txt);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.phead p {
  margin-top: 14px;
  max-width: 760px;
  color: #c2d0ec;
  font-size: clamp(14px,1.15vw,16.5px);
  line-height: 1.95;
}

.prose {
  max-width: 880px;
  font-size: clamp(15px,1.12vw,16.5px);
  line-height: 2.05;
  color: var(--ink-2);
}

.prose h2 {
  margin: clamp(34px,3.2vw,48px) 0 16px;
  font-size: clamp(19px,1.65vw,24px);
  font-weight: 900;
  color: var(--ink);
  padding-left: 16px;
  border-left: 5px solid transparent;
  border-image: var(--grad) 1;
  line-height: 1.5;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin: 28px 0 12px;
  font-size: clamp(16.5px,1.35vw,19px);
  font-weight: 900;
  color: var(--ink);
}

.prose p {
  margin-bottom: 18px;
}

.prose ul,
.prose ol {
  margin: 0 0 18px;
  padding-left: 1.4em;
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li {
  margin-bottom: 8px;
}

.prose a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 22px;
  font-size: 14.5px;
}

.prose th,
.prose td {
  border: 1px solid var(--line);
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--bg-soft);
  font-weight: 800;
  white-space: nowrap;
  width: 30%;
}

.prose small {
  color: var(--muted);
  font-size: 13px;
}

.form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(26px,2.6vw,40px);
  box-shadow: var(--sh-m);
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 9px;
}

.req {
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  background: #e2483c;
  border-radius: 5px;
  padding: 3px 7px;
  letter-spacing: .04em;
}

.opt {
  font-size: 10.5px;
  font-weight: 800;
  color: #68788f;
  background: #eef2f8;
  border-radius: 5px;
  padding: 3px 7px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fbfcfe;
  border: 1.6px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  transition: .25s;
}

.field textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.8;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(59,107,255,.13);
}

.field .err {
  display: none;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: #e2483c;
}

.field.is-err input,
.field.is-err select,
.field.is-err textarea {
  border-color: #e2483c;
  background: #fff7f6;
}

.field.is-err .err {
  display: block;
}

.agree {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
  margin-bottom: 22px;
}

.agree input {
  width: 19px;
  height: 19px;
  margin-top: 3px;
  flex: none;
  accent-color: var(--blue);
}

.agree-err {
  margin: -14px 0 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: #e2483c;
}

.agree-err[hidden] {
  display: none;
}

.form .btn {
  width: 100%;
}

.fdone {
  display: none;
  text-align: center;
  padding: clamp(30px,3vw,48px) 10px;
}

.fdone svg {
  width: 76px;
  height: 76px;
  margin-bottom: 20px;
}

.fdone h2 {
  font-size: clamp(20px,1.9vw,26px);
  font-weight: 900;
}

.fdone p {
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 2;
}

.is-sent .form__body {
  display: none;
}

.is-sent .fdone {
  display: block;
}

.aside {
  display: grid;
  gap: 16px;
}

/* ==========================================================================
   6-3. コラム一覧
   ========================================================================== */
.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(24px,2.4vw,36px);
}

.cat {
  font-size: 13px;
  font-weight: 800;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: #48596f;
  transition: .25s;
}

.cat:hover,
.cat.is-on {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(59,107,255,.28);
}

.cols {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(18px,1.8vw,28px);
}

.col {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--sh-s);
  transition: transform .35s cubic-bezier(.2,.7,.25,1),box-shadow .35s;
}

.col:hover {
  transform: translateY(-7px);
  box-shadow: var(--sh-l);
}

.col h3 {
  margin-top: 12px;
  font-size: clamp(16px,1.3vw,18.5px);
  font-weight: 900;
  line-height: 1.65;
  flex: 1;
}

.col p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
}

/* ==========================================================================
   6-4. コラム記事詳細
   ========================================================================== */
.art {
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap: clamp(28px,3.2vw,56px);
  align-items: start;
}

.toc {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(22px,2vw,28px);
  margin-bottom: 36px;
}

.toc h2 {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  font-size: 16px;
}

.toc ol {
  margin: 0;
  padding-left: 1.3em;
  font-size: 14.5px;
  line-height: 1.9;
}

.toc a {
  color: var(--ink-2);
  text-decoration: none;
}

.toc a:hover {
  color: var(--blue);
}

.src {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  font-size: 13.5px;
  line-height: 1.9;
}

.src h3 {
  margin: 0 0 10px;
  font-size: 14.5px;
}

.src ol {
  padding-left: 1.3em;
  margin: 0;
}

.side {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 16px;
}

.artcta .btn {
  margin-top: 16px;
  width: 100%;
  font-size: 14.5px;
  padding: 15px 14px;
}

.rel {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(16px,1.6vw,24px);
  margin-top: clamp(36px,3.4vw,52px);
}

/* ==========================================================================
   6-5. 市場価値診断（ステップ形式）
   ========================================================================== */
.qz {
  width: 100%;
  min-width: 0;
}

.qz__bar {
  height: 10px;
  border-radius: 99px;
  background: #e9eefb;
  overflow: hidden;
}

.qz__fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--grad);
  width: 8%;
  transition: width .45s cubic-bezier(.2,.7,.25,1);
}

.qz__card {
  margin-top: 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(26px,2.8vw,44px);
  box-shadow: var(--sh-m);
}

.qz__q {
  font-size: clamp(18px,1.7vw,24px);
  font-weight: 900;
  line-height: 1.6;
  text-wrap: pretty;
}

.qz__opts {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 12px;
}

.qz__opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  border: 1.8px solid var(--line);
  border-radius: 16px;
  padding: 17px 20px;
  font-size: 15.5px;
  font-weight: 700;
  background: #fbfcfe;
  transition: .25s;
}

.qz__opt:hover {
  border-color: var(--blue);
  background: #fff;
  transform: translateX(3px);
  box-shadow: 0 8px 22px rgba(59,107,255,.14);
}

.qz__opt.is-on {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(59,107,255,.13);
}

.qz__opt.is-on .qz__k {
  background: var(--grad);
  color: #fff;
}

.qz__nav {
  margin-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.qz__back {
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
  padding: 14px 22px;
  border-radius: 999px;
  border: 1.6px solid var(--line);
  background: #fff;
}

.qz__back:hover {
  color: var(--ink);
  border-color: #c6d2e6;
}

.qz__back[disabled] {
  opacity: .35;
  cursor: default;
}

/* ==========================================================================
   6-6. 診断結果
   ========================================================================== */
.res {
  display: grid;
  gap: clamp(18px,1.8vw,26px);
}

.kmini--res .kmini__f {
  width: var(--w);
}

/* ==========================================================================
   6-8. 404
   ========================================================================== */
.nf {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 140px 0 90px;
}

.nf h1 {
  margin-top: 12px;
  font-size: clamp(20px,2.2vw,30px);
  font-weight: 900;
}

.nf p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 2;
}

@media (max-width:1000px) {
  .art {
    grid-template-columns: 1fr;
  }

  .side {
    position: static;
  }

  .cols,
  .rel {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width:680px) {
  .cols,
  .rel {
    grid-template-columns: 1fr;
  }

  .prose th {
    width: auto;
    white-space: normal;
  }

  .prose table,
  .prose thead,
  .prose tbody,
  .prose tr,
  .prose th,
  .prose td {
    display: block;
  }

  .prose th {
    border-bottom: 0;
  }

  .qz__nav {
    flex-direction: column-reverse;
  }

  .qz__nav .btn {
    width: 100%;
  }
}

/* ==========================================================================
   8. 市場価値診断ページ（/diagnosis/）
   ========================================================================== */
.hd--min .hd__in {
  justify-content: space-between;
}

.dgh {
  position: relative;
  overflow: hidden;
  padding: clamp(96px,7.4vw,116px) 0 clamp(10px,1vw,16px);
  background: linear-gradient(115deg,#f5f7fd 0%,#eef2fc 46%,#f4f2ff 100%);
}

.dgh::before {
  content: "";
  position: absolute;
  left: -6%;
  top: -40%;
  width: 46%;
  height: 180%;
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(120,160,255,.18),transparent 72%);
  pointer-events: none;
}

.dgh__in {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.64fr);
  gap: clamp(16px,2vw,34px);
  align-items: center;
}

.dgh__copy {
  padding-left: clamp(0px,7.2vw,136px);
}

.dgh h1 {
  font-size: clamp(34px,4.6vw,66px);
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.24;
  background: linear-gradient(102deg,#1f3fb8 0%,#3b6bff 38%,#7b5cff 72%,#9a58ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}

.dgh p {
  margin-top: 20px;
  color: var(--ink-2);
  font-size: clamp(13.5px,1.06vw,15.5px);
  line-height: 2.05;
  letter-spacing: .03em;
}

.dgh__vis {
  position: relative;
  margin-bottom: calc(-1 * clamp(18px,1.8vw,28px));
}

.dgh__vis img {
  width: 100%;
  max-width: 540px;
  margin-left: auto;
  height: auto;
  display: block;
}

.dg {
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(248px,20vw,306px);
  gap: clamp(18px,1.9vw,30px);
  align-items: start;
}

.qz__top {
  display: flex;
  align-items: center;
  gap: clamp(12px,1.6vw,24px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px clamp(18px,1.8vw,26px);
  box-shadow: var(--sh-s);
}

.qz__count {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.qz__count b {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 23px;
  color: var(--ink);
  margin-right: 2px;
}

.qz__pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.qz__time {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.qz__time svg {
  width: 16px;
  height: 16px;
  stroke: var(--blue);
  stroke-width: 2;
  fill: none;
}

.qz__bar {
  flex: 1;
  min-width: 60px;
  height: 9px;
  border-radius: 99px;
  background: #e9eefb;
  overflow: hidden;
}

.qz__card {
  margin-top: clamp(14px,1.4vw,20px);
}

.qz__num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 800;
  font-size: clamp(15px,1.3vw,18px);
  color: var(--blue);
  letter-spacing: .06em;
}

.qz__q {
  margin-top: 10px;
}

.qz__sub {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.85;
}

.qz__opt {
  position: relative;
}

.qz__radio {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 2px solid #c3cee3;
  flex: none;
  display: grid;
  place-items: center;
  transition: .2s;
}

.qz__radio::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
  transform: scale(0);
  transition: transform .2s;
}

.qz__opt.is-on .qz__radio {
  border-color: var(--blue);
}

.qz__opt.is-on .qz__radio::after {
  transform: scale(1);
}

.qz__opt--multi .qz__radio {
  border-radius: 6px;
}

.qz__opt--multi .qz__radio::after {
  border-radius: 2px;
}

.qz__num-input {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.8px solid var(--line);
  border-radius: 16px;
  padding: 14px 20px;
  background: #fbfcfe;
  max-width: 330px;
  transition: .25s;
}

.qz__num-input:focus-within {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(59,107,255,.13);
}

.qz__num-input input {
  width: 100%;
  font: inherit;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  border: 0;
  background: none;
  outline: none;
  -moz-appearance: textfield;
}

.qz__num-input input::-webkit-outer-spin-button,
.qz__num-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qz__num-input span {
  font-size: 15px;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}

.qz__hint {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 24px;
  background: #f5f8fe;
  border: 1px solid #e2e9f7;
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-2);
}

.qz__hint svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
}

.qz__err {
  display: none;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: #e2483c;
}

.qz__err.is-on {
  display: block;
}

.qz__nav {
  margin-top: 26px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 14px;
}

.qz__nav .btn {
  width: 100%;
}

.qz__feats {
  margin-top: clamp(14px,1.4vw,20px);
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(10px,1.1vw,16px);
}

.qz__feat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--sh-s);
}

.qz__feat svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.qz__feat b {
  display: block;
  font-size: 13.5px;
  font-weight: 900;
}

.qz__feat span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}

.sc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(18px,1.5vw,22px);
  box-shadow: var(--sh-s);
  margin-bottom: clamp(10px,1vw,14px);
  transition: box-shadow .35s, border-color .35s;
}

.sc:hover {
  border-color: #d5e0f5;
  box-shadow: var(--sh-m);
}

.sc__chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 12px;
}

.sc__h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2fa;
}

.sc__h em {
  font-style: normal;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e3eaf8;
  color: #8496b3;
  font-size: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.sc__lbl {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}

.sc__range {
  margin-top: 8px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 700;
  letter-spacing: .01em;
  font-size: clamp(21px,1.75vw,25px);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.sc__range i {
  font-style: normal;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: .5em;
}

.sc__foot {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.sc__foot b {
  color: var(--ink);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 16px;
}

.sc__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--blue);
}

.sc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sc__t {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 13px 6px;
  text-align: center;
  transition: .25s;
}

.sc__t {
  display: block;
}

.sc__t:hover {
  border-color: #a9c0ee;
  background: #fafbff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59,107,255,.12);
}

.sc__t img {
  display: block;
  width: auto;
  height: 40px;
  margin-inline: auto;
}

.sc__t b {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-2);
}

.sc__legend i.dash {
  border-top-style: dashed;
  border-color: #b8c4dc;
}

.fea3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(20px,2.4vw,44px);
  text-align: center;
}

.fea3 article {
  padding: 0 clamp(6px,1vw,18px);
}

.fea3 svg,
.fea3 img {
  width: auto;
  height: clamp(72px,5.8vw,88px);
  margin-inline: auto;
  display: block;
}

.fea3 h3 {
  margin-top: 16px;
  font-size: clamp(15.5px,1.28vw,18px);
  font-weight: 900;
}

.fea3 p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.95;
}

/* ==========================================================================
   9. 診断結果ページ（/result/）
   ========================================================================== */
.rh {
  position: relative;
  overflow: hidden;
  padding: clamp(108px,9.5vw,142px) 0 clamp(30px,3vw,46px);
  background: linear-gradient(140deg,#f4f7fd 0%,#eef3fc 40%,#e9f0ff 100%);
}

.rh__in {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.02fr);
  gap: clamp(24px,3vw,52px);
  align-items: center;
}

.rbadge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 800;
  color: var(--blue);
  background: #fff;
  border: 1.5px solid #cfdcf8;
  border-radius: 999px;
  padding: 9px 20px;
}

.rbadge svg {
  width: 16px;
  height: 16px;
  stroke: var(--blue);
  stroke-width: 2;
  fill: none;
}

.rh h1 {
  margin-top: 18px;
  font-size: clamp(27px,3.15vw,46px);
  font-weight: 900;
  line-height: 1.42;
  letter-spacing: .01em;
}

.rh h1 .em {
  background: linear-gradient(100deg,#2f6bff,#7b5cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border-bottom: 4px solid #c6d5ff;
  padding-bottom: 2px;
}

.rh__lead {
  margin-top: 20px;
  color: var(--ink-2);
  font-size: clamp(14px,1.12vw,16px);
  line-height: 2;
}

.rh__cta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn-line-fill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(120deg,#0bbf55,#06a548);
  color: #fff;
  font-weight: 800;
  border-radius: 14px;
  padding: 15px 24px;
  box-shadow: 0 14px 30px rgba(6,165,72,.3);
  transition: .3s;
}

.btn-line-fill:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 38px rgba(6,165,72,.38);
}

.btn-line-fill img {
  width: 26px;
  filter: brightness(0) invert(1);
}

.btn-line-fill b {
  display: block;
  font-size: 15.5px;
}

.btn-line-fill small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  opacity: .9;
  font-weight: 600;
}

.btn-line-fill svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  stroke-width: 2.6;
  fill: none;
  margin-left: 4px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.6px solid var(--line);
  border-radius: 14px;
  padding: 15px 22px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink-2);
  transition: .25s;
}

.btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.btn-ghost svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.rh__redo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.rh__redo:hover {
  color: var(--blue);
}

.rh__redo svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.rangecard {
  background: #fff;
  border-radius: 26px;
  padding: clamp(24px,2.6vw,40px);
  box-shadow: 0 24px 60px rgba(30,55,110,.14);
}

.rangecard__h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(15px,1.35vw,18px);
  font-weight: 900;
}

.rangecard__v {
  margin-top: 14px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 800;
  font-size: clamp(30px,4.2vw,58px);
  line-height: 1.1;
  white-space: nowrap;
  background: linear-gradient(100deg,#2f6bff,#7b5cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rangecard__v i {
  font-style: normal;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: .42em;
  font-weight: 800;
}

.rstats {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rstat--up b {
  background: linear-gradient(100deg,#2f6bff,#7b5cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rscale {
  margin-top: 34px;
  position: relative;
  padding: 54px 0 66px;
}

.rscale__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 56px;
  height: 3px;
  border-radius: 99px;
  background: #e4eaf7;
}

.rscale__band {
  position: absolute;
  top: 53px;
  height: 9px;
  border-radius: 99px;
  background: linear-gradient(90deg,#3b6bff,#7b5cff);
  box-shadow: 0 3px 12px rgba(59,107,255,.34);
}

.rscale__edge {
  position: absolute;
  top: 51px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 3.4px solid #3b6bff;
  transform: translateX(-50%);
}

.rscale__edge#rEdgeHi {
  border-color: #7b5cff;
}

.rscale__cur {
  position: absolute;
  top: 53px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8496b3;
  transform: translateX(-50%);
}

.rscale__pin {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--grad);
  border-radius: 999px;
  padding: 7px 16px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(59,107,255,.32);
}

.rscale__pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  background: #7b5cff;
  transform: translateX(-50%) rotate(45deg);
}

.rscale__dot {
  position: absolute;
  top: 41px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad);
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(59,107,255,.42);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.rscale__mark {
  position: absolute;
  top: 78px;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#rTickLow {
  color: #3b6bff;
}

#rTickHigh {
  color: #7b5cff;
}

.rscale__end {
  position: absolute;
  top: 79px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.rscale__end--l {
  left: 0;
}

.rscale__end--r {
  right: 0;
}

.rscale__now {
  position: absolute;
  top: 106px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  background: #eef2f9;
  border-radius: 999px;
  padding: 6px 13px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rangecard__note {
  margin-top: 20px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.8;
}

.rsec {
  padding: clamp(34px,3.4vw,54px) 0;
}

.rgrid {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(0,1fr);
  gap: clamp(20px,2.2vw,34px);
  align-items: start;
}

.rbox {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(22px,2.2vw,32px);
  box-shadow: var(--sh-s);
}

.rbox__h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(16px,1.35vw,19px);
  font-weight: 900;
  margin-bottom: 20px;
}

.rbox__h em {
  font-style: normal;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #e3eaf8;
  color: #8496b3;
  font-size: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.rbox__h .all {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--blue);
}

.tgrid {
  display: grid;
  grid-template-columns: minmax(0,1.32fr) repeat(3,minmax(0,1fr));
  gap: 14px;
}

.tmine {
  border: 2px solid var(--blue);
  border-radius: 18px;
  padding: clamp(15px,1.3vw,19px) clamp(18px,1.9vw,26px);
  background: linear-gradient(160deg,#f5f8ff,#fff);
}

.tmine__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--grad);
  border-radius: 999px;
  padding: 5px 13px;
}

.tmine__n {
  display: block;
  margin-top: 14px;
}

.tmine__n img {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
  margin-bottom: 10px;
}

.tmine__n b {
  font-size: clamp(19px,1.75vw,25px);
  font-weight: 900;
  color: var(--blue);
  line-height: 1.4;
}

.tmine p {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 13.8px;
  line-height: 1.9;
}

.tmine a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--blue);
}

.tother {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 14px;
  text-align: center;
  background: #fff;
  transition: .25s;
}

.tother:hover {
  border-color: #c9d6f2;
  box-shadow: var(--sh-m);
}

.tother img {
  display: block;
  width: 100%;
  max-width: 128px;
  height: auto;
  margin-inline: auto;
}

.tother b {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 900;
}

.tother p {
  margin-top: 9px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.75;
}

.share {
  text-align: center;
}

.share__card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  background: linear-gradient(160deg,#f7f9ff,#fff);
  text-align: left;
}

.share__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.share__top span {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 800;
  font-size: 19px;
}

.share__top em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  background: #fff;
}

.share__card p {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}

.share__card strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: clamp(18px,1.7vw,23px);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.share__card strong i {
  font-style: normal;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: .55em;
}

.share__type {
  display: inline-block;
  margin-top: 12px;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  background: var(--grad);
  border-radius: 999px;
  padding: 6px 14px;
}

.share__bars {
  margin-top: 16px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 54px;
}

.share__bars span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: #cdd9f5;
}

.share__bars span:nth-child(2n) {
  background: #b9a6ff;
}

.share button {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--blue);
}

.share button svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.share small {
  display: block;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--muted);
}

.radar {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(18px,2vw,32px);
  align-items: center;
}

.radar svg {
  width: 100%;
  height: auto;
}

.radar ul {
  display: grid;
  gap: 12px;
}

.radar li {
  display: flex;
  gap: 11px;
  font-size: 13.8px;
  line-height: 1.85;
  color: var(--ink-2);
}

.radar li svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 3px;
}

.radar__legend {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
}

.radar__legend span {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.radar__legend i {
  width: 20px;
  height: 0;
  border-top: 2.5px solid var(--blue);
}

.radar__legend i.dash {
  border-top-style: dashed;
  border-color: #b8c4dc;
}

.fitchips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-width: 0;
}

.fitchip {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 800;
}

.fitchip svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.jobs {
  display: grid;
  gap: 12px;
}

.job {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  transition: .25s;
}

.job:hover {
  border-color: #c9d6f2;
  box-shadow: var(--sh-m);
}

.job__ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eef3ff;
  display: grid;
  place-items: center;
}

.job__ic svg {
  width: 19px;
  height: 19px;
}

.job span {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
}

.job__tags {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.job__tags em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: #5a6b88;
  background: #f1f5fc;
  border-radius: 5px;
  padding: 3px 8px;
}

.job__pay {
  text-align: right;
  white-space: nowrap;
}

.job__pay b {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 15px;
  color: var(--blue);
}

.job__pay span {
  font-size: 10.5px;
}

.steps3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(14px,1.5vw,22px);
}

.step3 {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr);
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  background: #fff;
}

.step3::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * clamp(14px,1.5vw,22px)/2 - 6px);
  width: 12px;
  height: 12px;
  border-top: 2.4px solid #c3cee3;
  border-right: 2.4px solid #c3cee3;
  transform: translateY(-50%) rotate(45deg);
}

.steps3 .step3:last-child::after {
  display: none;
}

.step3__ic {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}

.step3__ic svg,
.step3__ic img {
  width: 100%;
  height: auto;
}

.step3 b {
  display: block;
  font-size: 14.5px;
  font-weight: 900;
}

.step3 span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.75;
}

.trust4 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: clamp(12px,1.3vw,20px);
}

.trust {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(16px,1.6vw,22px);
  background: #fff;
}

.trust svg {
  width: 38px;
  height: 38px;
}

.trust b {
  display: block;
  font-size: 14px;
  font-weight: 900;
}

.trust span {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.8;
}

.lastcta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  padding: clamp(40px,3.8vw,62px) 0;
}

.lastcta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,rgba(5,11,26,.92) 0%,rgba(8,16,38,.66) 52%,rgba(10,18,44,.42) 100%);
}

/* 支給の夜景背景（2200×731） */
.lastcta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #050b1a;
}

.lastcta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}

.lastcta__in {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(24px,3vw,50px);
  align-items: center;
}

.lastcta h2 {
  font-size: clamp(21px,2.35vw,33px);
  font-weight: 900;
  line-height: 1.55;
}

.lastcta__pts {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: #b8c8e8;
}

.lastcta__pts span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.lastcta__pts svg {
  width: 15px;
  height: 15px;
  stroke: #4ade80;
  stroke-width: 2.6;
  fill: none;
}

.lastcta__r {
  text-align: center;
}

.lastcta__tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  padding: 7px 18px;
  margin-bottom: 14px;
}

.lastcta .btn-line-fill {
  width: 100%;
  justify-content: center;
  padding: 20px 24px;
  border-radius: 16px;
}

.lastcta .btn-line-fill b {
  font-size: clamp(16px,1.5vw,21px);
}

.lastcta__note {
  margin-top: 14px;
  font-size: 12px;
  color: #a9bde0;
}

@media (max-width:1100px) {
  .dg,
  .rh__in,
  .rgrid,
  .dgh__in,
  .lastcta__in {
    grid-template-columns: 1fr;
  }

  .dgh__vis {
    max-width: 520px;
    margin-inline: auto;
  }

  .tgrid {
    grid-template-columns: 1fr 1fr;
  }

  .tmine {
    grid-column: 1/-1;
  }

  .trust4 {
    grid-template-columns: 1fr 1fr;
  }

  .lastcta__r {
    text-align: left;
  }
}

@media (max-width:760px) {
  .qz__opts {
    grid-template-columns: 1fr;
  }

  .qz__num-input {
    max-width: 100%;
  }

  .dgh__copy {
    padding-left: 0;
  }

  .qz__top {
    flex-wrap: wrap;
  }

  .qz__bar {
    order: 3;
    width: 100%;
    flex: none;
  }

  .qz__feats,
  .fea3,
  .steps3 {
    grid-template-columns: 1fr;
  }

  .step3::after {
    display: none;
  }

  .qz__nav {
    grid-template-columns: 1fr;
  }

  .radar,
  .fitchips {
    grid-template-columns: 1fr;
  }

  .tgrid,
  .trust4 {
    grid-template-columns: 1fr;
  }

  .rstats {
    grid-template-columns: 1fr;
  }

  .job {
    grid-template-columns: auto minmax(0,1fr);
    row-gap: 10px;
  }

  .job__pay {
    grid-column: 2;
    text-align: left;
  }
}

/* ==========================================================================
   10. 高さユーティリティ（ミニグラフの棒）
   ========================================================================== */
.h30 {
  height: 30%;
}

.h38 {
  height: 38%;
}

.h46 {
  height: 46%;
}

.h52 {
  height: 52%;
}

.h56 {
  height: 56%;
}

.h62 {
  height: 62%;
}

.h70 {
  height: 70%;
}

.h80 {
  height: 80%;
}

.h88 {
  height: 88%;
}

.fea3--gap {
  margin-top: clamp(26px,2.4vw,38px);
}

.sc__radar {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 4px;
}

.rbox--gap {
  margin-top: clamp(20px,2.2vw,34px);
}

.rangecard__h em,
.rbox__h em,
.sc__h em {
  flex: none;
}

.rbox__h .sc__lbl {
  margin-left: auto;
  font-weight: 600;
}

.tothers {
  display: contents;
}

.sc__h_i {
  font-style: normal;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #e3eaf8;
  color: #8496b3;
  font-size: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
}

/* 結果ページ：タイプカードの「次の一手」 */
.tmine__sh {
  margin-top: 16px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .06em;
}

.tmine__steps {
  margin-top: 6px;
  display: grid;
  gap: 5px;
  counter-reset: st;
}

.tmine__steps li {
  position: relative;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-2);
  counter-increment: st;
}

.tmine__steps li::before {
  content: counter(st,decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .12em;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--blue);
}

/* ==========================================================================
   11. 拡張フッター（カンプ6〜9に準拠・全ページ共通）
   ========================================================================== */
.ftx {
  background: #0a1226;
  color: #93a3c2;
  padding: clamp(40px,3.8vw,58px) 0 0;
}

.ftx__top {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) repeat(3,minmax(0,.8fr)) minmax(0,1.15fr);
  gap: clamp(20px,2.4vw,40px);
  padding-bottom: clamp(28px,2.8vw,42px);
}

.ftx .logo {
  color: #fff;
  font-size: 26px;
}

.ftx__about {
  margin-top: 16px;
  font-size: 12.5px;
  line-height: 2;
  color: #8fa1c2;
}

.ftx__pts {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 11.5px;
  font-weight: 700;
  color: #a9bbdc;
}

.ftx__pts span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ftx__pts svg {
  width: 14px;
  height: 14px;
  stroke: #4ade80;
  stroke-width: 2.6;
  fill: none;
}

.ftx h4 {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .08em;
  margin-bottom: 14px;
}

.ftx nav {
  display: grid;
  gap: 11px;
  font-size: 12.5px;
}

.ftx nav a:hover {
  color: #fff;
}

.ftx__line {
  background: #111c38;
  border: 1px solid #1e2c50;
  border-radius: 16px;
  padding: 20px;
}

.ftx__line b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.ftx__line small {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  color: #8fa1c2;
  line-height: 1.8;
}

.ftx__line a {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #06c755;
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  border-radius: 10px;
  padding: 13px;
  transition: .25s;
}

.ftx__line a:hover {
  background: #05a848;
}

.ftx__line img {
  width: 20px;
  filter: brightness(0) invert(1);
}

.ftx__btm {
  border-top: 1px solid #1b2745;
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  font-size: 11.5px;
}

.ftx__btm nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.ftx__btm .c {
  margin-left: auto;
  letter-spacing: .04em;
}

/* ==========================================================================
   12. 下層ページのヒーロー（明るい帯）
   ========================================================================== */
.lh {
  position: relative;
  overflow: hidden;
  padding: clamp(104px,8.4vw,134px) 0 clamp(26px,2.6vw,42px);
  background: linear-gradient(112deg,#f4f7fd 0%,#eef3fc 46%,#f5f2ff 100%);
}

.lh__in {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.98fr);
  gap: clamp(20px,2.6vw,44px);
  align-items: center;
}

.lh__eyebrow {
  font-size: 13px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: .06em;
}

.lh h1 {
  margin-top: 14px;
  font-size: clamp(30px,4vw,58px);
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1.26;
  background: linear-gradient(102deg,#16234d 0%,#1f3fb8 42%,#5b4bd6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}

.lh p {
  margin-top: 18px;
  color: var(--ink-2);
  font-size: clamp(14px,1.1vw,16px);
  line-height: 2;
}

.lh__vis {
  position: relative;
}

.lh__vis>img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 44px rgba(40,70,140,.16));
}

.lh__ph {
  position: absolute;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(20,40,90,.22);
  border: 3px solid #fff;
}

.lh__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lh__ph--a {
  width: 27%;
  aspect-ratio: 3/4;
  right: 22%;
  top: -4%;
}

.lh__ph--b {
  width: 24%;
  aspect-ratio: 3/4;
  right: 0;
  top: 26%;
}

.lh__ph--c {
  width: 23%;
  aspect-ratio: 3/4;
  left: 2%;
  bottom: -6%;
}

/* 規約系ページの帯 */
.lh--doc {
  padding: clamp(96px,7.6vw,120px) 0 clamp(20px,2vw,32px);
}

.lh--doc .lh__in {
  grid-template-columns: minmax(0,1fr) minmax(0,.7fr);
}

.lh--doc h1 {
  font-size: clamp(26px,3vw,40px);
}

.lh__en {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: .08em;
}

/* ==========================================================================
   13. コラム一覧
   ========================================================================== */
.clist {
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(260px,22vw,320px);
  gap: clamp(20px,2.4vw,38px);
  align-items: start;
}

.cbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(18px,1.8vw,26px);
}

.cbar__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cbar__cats a {
  font-size: 12.5px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.4px solid var(--line);
  background: #fff;
  color: #48596f;
  transition: .22s;
}

.cbar__cats a:hover,
.cbar__cats a.is-on {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
}

.cbar__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.csearch {
  position: relative;
}

.csearch input {
  width: clamp(180px,18vw,250px);
  font: inherit;
  font-size: 13.5px;
  border: 1.4px solid var(--line);
  border-radius: 10px;
  padding: 11px 38px 11px 14px;
  background: #fff;
  transition: .22s;
}

.csearch input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(59,107,255,.12);
}

.csearch svg {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: #8496b3;
  stroke-width: 2;
  fill: none;
}

.cbar select {
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  border: 1.4px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}

.cfeat {
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(0,1fr);
  gap: clamp(18px,2vw,30px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(16px,1.6vw,22px);
  box-shadow: var(--sh-s);
  margin-bottom: clamp(18px,1.8vw,26px);
  transition: transform .35s,box-shadow .35s;
}

.cfeat:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-l);
}

.cfeat img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

.cmeta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}

.ctag {
  font-size: 11px;
  font-weight: 800;
  color: #7b5cff;
  background: #f2effe;
  border-radius: 6px;
  padding: 4px 10px;
}

.ctag--b {
  color: var(--blue);
  background: #eef3ff;
}

.cfeat h3 {
  margin-top: 12px;
  font-size: clamp(17px,1.5vw,21px);
  font-weight: 900;
  line-height: 1.6;
}

.cfeat p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.95;
}

.cmore {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--blue);
}

.cgrid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(14px,1.5vw,22px);
}

.ccard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sh-s);
  transition: transform .35s,box-shadow .35s;
}

.ccard:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-m);
}

.ccard img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.ccard__b {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ccard h3 {
  margin-top: 10px;
  font-size: 14.5px;
  font-weight: 900;
  line-height: 1.65;
  flex: 1;
}

.ccard p {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.9;
}

.pager {
  margin-top: clamp(24px,2.4vw,36px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}

.pager a,
.pager span {
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1.4px solid var(--line);
  background: #fff;
  padding: 0 12px;
}

.pager a:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.pager .is-on {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
}

.pager .dots {
  border: 0;
  background: none;
}

.scta {
  background: linear-gradient(160deg,#0d1a44,#1d2a6b 60%,#2b1f6b);
  border-radius: 18px;
  padding: clamp(20px,1.9vw,26px);
  color: #fff;
}

.scta b {
  display: block;
  font-size: clamp(15px,1.3vw,18px);
  font-weight: 900;
  line-height: 1.7;
}

.scta ul {
  margin-top: 14px;
  display: grid;
  gap: 9px;
  font-size: 12px;
  color: #c5d4f2;
}

.scta li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.scta li svg {
  width: 14px;
  height: 14px;
  stroke: #5fe0a0;
  stroke-width: 2.8;
  fill: none;
  flex: none;
}

.scta a {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--grad);
  border-radius: 10px;
  padding: 14px;
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 10px 24px rgba(59,107,255,.32);
}

.rank {
  display: grid;
  gap: 14px;
}

.rank li {
  display: grid;
  grid-template-columns: auto 64px minmax(0,1fr);
  gap: 11px;
  align-items: center;
}

.rank__n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eef3ff;
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
}

.rank li:nth-child(1) .rank__n {
  background: var(--grad);
  color: #fff;
}

.rank img {
  width: 64px;
  height: 44px;
  object-fit: cover;
  border-radius: 7px;
  display: block;
}

.rank b {
  display: block;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.65;
}

.rank span {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--muted);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags a {
  font-size: 11.5px;
  font-weight: 700;
  color: #48596f;
  background: #f3f6fc;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 11px;
}

.tags a:hover {
  background: #eef3ff;
  color: var(--blue);
  border-color: #cfdcf8;
}

/* ==========================================================================
   14. コラム記事詳細
   ========================================================================== */
.post {
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(270px,23vw,330px);
  gap: clamp(22px,2.8vw,48px);
  align-items: start;
}

.post__head .cmeta {
  margin-bottom: 14px;
}

.post h1 {
  font-size: clamp(24px,2.5vw,34px);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: .01em;
}

.post__lead {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 2;
}

.post__hero {
  margin-top: 22px;
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.post__share {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.post__share a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #101b30;
}

.post__share a.fb {
  background: #1877f2;
}

.post__share a.ln {
  background: #06c755;
}

.post__share svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

.post__share img {
  width: 17px;
  filter: brightness(0) invert(1);
}

.ptoc {
  margin-top: 26px;
  background: #f5f8fd;
  border: 1px solid #e4ebf7;
  border-radius: 14px;
  padding: 20px 24px;
}

.ptoc b {
  font-size: 13px;
  font-weight: 800;
}

.ptoc b span {
  margin-left: 8px;
  font-size: 11px;
  color: var(--blue);
  font-weight: 700;
}

.ptoc ol {
  margin: 12px 0 0;
  padding-left: 1.4em;
  display: grid;
  gap: 7px;
  font-size: 13px;
  line-height: 1.8;
}

.ptoc a {
  color: var(--ink-2);
}

.ptoc a:hover {
  color: var(--blue);
}

.psec {
  margin-top: clamp(30px,3vw,46px);
}

.psec__h {
  display: flex;
  align-items: center;
  gap: 14px;
}

.psec__n {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--grad);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  flex: none;
}

.psec__h h2 {
  font-size: clamp(17px,1.5vw,21px);
  font-weight: 900;
  line-height: 1.5;
}

.psec p {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 2.05;
}

.ptable {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(0,1fr);
  gap: clamp(14px,1.6vw,24px);
  align-items: start;
}

.ptable table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.ptable th,
.ptable td {
  border: 1px solid var(--line);
  padding: 11px 14px;
  text-align: left;
}

.ptable thead th {
  background: #f3f6fc;
  font-weight: 800;
  font-size: 12.5px;
}

.ptable tbody th {
  font-weight: 600;
  color: var(--ink-2);
}

.ptable td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pstat {
  background: #f5f8fd;
  border: 1px solid #e4ebf7;
  border-radius: 14px;
  padding: 22px;
  text-align: center;
}

.pstat svg {
  width: 44px;
  height: 44px;
  margin-inline: auto;
}

.pstat span {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 800;
}

.pstat b {
  display: block;
  margin-top: 6px;
  font-size: clamp(24px,2.4vw,34px);
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.pstat small {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--muted);
}

.p5 {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 12px;
  text-align: center;
}

.p5 svg {
  width: 34px;
  height: 34px;
  margin-inline: auto;
}

.p5 span {
  display: block;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink-2);
}

.p3 {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}

.p3 article {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}

.p3 em {
  font-style: normal;
  font-size: 14px;
  font-weight: 800;
  color: var(--blue);
}

.p3 b {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 900;
}

.p3 p {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.9;
}

.pcta {
  margin-top: clamp(28px,2.8vw,42px);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 20px;
  align-items: center;
  background: linear-gradient(105deg,#2f4fd8,#6f4fe0 55%,#8a4fe0);
  border-radius: 16px;
  padding: clamp(20px,2vw,28px);
  color: #fff;
}

.pcta b {
  display: block;
  font-size: clamp(16px,1.5vw,20px);
  font-weight: 900;
  line-height: 1.6;
}

.pcta span {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  color: #dbe4ff;
  line-height: 1.85;
}

.pcta__btn {
  background: #fff;
  border-radius: 12px;
  padding: 14px 22px;
  text-align: center;
  white-space: nowrap;
}

.pcta__btn em {
  font-style: normal;
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--blue);
  background: #eef3ff;
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 8px;
}

.pcta__btn i {
  font-style: normal;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 900;
  color: var(--ink);
}

.pnav {
  margin-top: clamp(26px,2.6vw,40px);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-2);
}

.pnav a:hover {
  color: var(--blue);
}

.pside {
  display: grid;
  gap: clamp(14px,1.4vw,20px);
}

.pbox {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--sh-s);
}

.pbox h3 {
  font-size: 13.5px;
  font-weight: 900;
  margin-bottom: 14px;
}

.pcats {
  display: grid;
  font-size: 13px;
}

.pcats a {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}

.pcats a:last-child {
  border-bottom: 0;
}

.pcats a:hover {
  color: var(--blue);
}

.prank {
  display: grid;
  gap: 14px;
}

.prank li {
  display: grid;
  grid-template-columns: 70px minmax(0,1fr);
  gap: 11px;
  position: relative;
}

.prank img {
  width: 70px;
  height: 52px;
  object-fit: cover;
  border-radius: 7px;
  display: block;
}

.prank__n {
  position: absolute;
  left: 0;
  top: 0;
  width: 19px;
  height: 19px;
  background: var(--grad);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  display: grid;
  place-items: center;
  border-radius: 0 0 6px 0;
}

.prank b {
  display: block;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.65;
}

.prank em {
  font-style: normal;
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--blue);
  background: #eef3ff;
  border-radius: 5px;
  padding: 3px 8px;
}

.pfree {
  background: linear-gradient(160deg,#f4f7ff,#fff);
  border: 1px solid #dfe7f8;
  border-radius: 16px;
  padding: 22px;
  text-align: center;
}

.pfree b {
  display: block;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.7;
}

.pfree b em {
  font-style: normal;
  color: var(--blue);
  font-size: 1.2em;
}

.pfree p {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.85;
}

.pfree ul {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  text-align: left;
  font-size: 12px;
}

.pfree li {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pfree li svg {
  width: 14px;
  height: 14px;
  stroke: var(--blue);
  stroke-width: 2.8;
  fill: none;
  flex: none;
}

.pfree img {
  margin-top: 14px;
  width: 100%;
  height: auto;
}

.pfree a {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--grad);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  border-radius: 10px;
  padding: 13px;
}

/* ==========================================================================
   15. 採用企業さまへ
   ========================================================================== */
.bh {
  position: relative;
  overflow: hidden;
  padding: clamp(104px,8.4vw,132px) 0 clamp(24px,2.4vw,38px);
  background: linear-gradient(112deg,#f5f7fd 0%,#eef3fc 50%,#f6f2ff 100%);
}

.bh__in {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.02fr);
  gap: clamp(20px,2.6vw,44px);
  align-items: center;
}

.bh h1 {
  margin-top: 12px;
  font-size: clamp(30px,3.7vw,52px);
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: .03em;
}

.bh h1 em {
  font-style: normal;
  background: linear-gradient(102deg,#1f3fb8,#5b4bd6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bh p {
  margin-top: 20px;
  color: var(--ink-2);
  font-size: clamp(13.5px,1.05vw,15.5px);
  line-height: 2.05;
}

.bh__cta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.issues {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: clamp(16px,1.8vw,28px);
}

.issue svg {
  width: 40px;
  height: 40px;
}

.issue b {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 900;
}

.issue p {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.95;
}

.reasons {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: clamp(12px,1.4vw,20px);
}

.reason img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.reason b {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.65;
  text-align: center;
}

.reason p {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.9;
  text-align: center;
}

.talents {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: clamp(12px,1.4vw,20px);
}

.talent {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 12px;
}

.talent img {
  width: 74px;
  height: 98px;
  object-fit: cover;
  border-radius: 9px;
  display: block;
}

.talent b {
  display: block;
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.5;
}

.talent dl {
  margin-top: 8px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 4px 8px;
  font-size: 10.5px;
  line-height: 1.6;
}

.talent dt {
  color: var(--muted);
  white-space: nowrap;
}

.talent dd {
  margin: 0;
  font-weight: 700;
  color: var(--ink-2);
}

.case {
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(0,1.15fr);
  gap: clamp(18px,2vw,32px);
  align-items: stretch;
}

.case__l {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

.case__l img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case__l span {
  position: absolute;
  left: 16px;
  top: 16px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--grad);
  border-radius: 999px;
  padding: 5px 13px;
}

.case__l div {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  background: linear-gradient(0deg,rgba(6,12,28,.86),transparent);
  color: #fff;
}

.case__l b {
  display: block;
  font-size: 13px;
  font-weight: 800;
}

.case__l q {
  display: block;
  margin-top: 10px;
  font-size: clamp(14px,1.3vw,17px);
  font-weight: 900;
  line-height: 1.7;
}

.case__l p {
  margin-top: 10px;
  font-size: 11.5px;
  color: #c5d4f2;
  line-height: 1.9;
}

.case__r {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(20px,2vw,30px);
}

.flow5 {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 10px;
}

.flow5 li {
  position: relative;
  text-align: center;
}

.flow5 li::after {
  content: "";
  position: absolute;
  top: 22px;
  right: -9px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #c3cee3;
  border-right: 2px solid #c3cee3;
  transform: rotate(45deg);
}

.flow5 li:last-child::after {
  display: none;
}

.flow5 svg {
  width: 34px;
  height: 34px;
  margin-inline: auto;
}

.flow5 em {
  font-style: normal;
  display: block;
  margin-top: 10px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--blue);
}

.flow5 b {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 900;
}

.flow5 span {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.7;
}

.safe {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: clamp(10px,1.2vw,18px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(20px,2vw,30px);
}

.safe article {
  text-align: center;
  padding: 0 4px;
}

.safe svg {
  width: 34px;
  height: 34px;
  margin-inline: auto;
}

.safe b {
  display: block;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1.6;
}

.safe span {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.75;
}

.bform {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  gap: clamp(18px,2vw,32px);
  align-items: start;
}

.bform__g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}

.bform__g .field--full {
  grid-column: 1/-1;
}

/* ==========================================================================
   16. 404 / 規約系
   ========================================================================== */
.nf2 {
  position: relative;
  overflow: hidden;
  padding: clamp(104px,8.4vw,132px) 0 clamp(30px,3vw,48px);
}

.nf2__in {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(20px,3vw,50px);
  align-items: center;
}

.nf2__n {
  font-size: clamp(72px,11vw,150px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  background: linear-gradient(110deg,#6f8dff,#3b6bff 45%,#7b5cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nf2 h1 {
  margin-top: 10px;
  font-size: clamp(22px,2.4vw,34px);
  font-weight: 900;
  letter-spacing: .02em;
}

.nf2 p {
  margin-top: 20px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 2.05;
}

.nf2__btns {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.nf2 img {
  width: 100%;
  height: auto;
  display: block;
}

.nf4 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: clamp(12px,1.4vw,20px);
}

.nf4 article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(18px,1.8vw,24px);
  text-align: center;
  transition: .28s;
}

.nf4 article:hover {
  border-color: #c9d6f2;
  box-shadow: var(--sh-m);
  transform: translateY(-4px);
}

.nf4 svg {
  width: 38px;
  height: 38px;
  margin-inline: auto;
}

.nf4 b {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 900;
}

.nf4 span {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.8;
}

.lineband {
  background: linear-gradient(120deg,#f2f6fd,#eef2fc);
  border: 1px solid #e2e9f7;
  border-radius: 20px;
  padding: clamp(22px,2.2vw,34px);
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: clamp(16px,2vw,32px);
  align-items: center;
}

.lineband__ph {
  width: clamp(80px,7vw,110px);
  aspect-ratio: .55;
  border-radius: 14px;
  background: linear-gradient(160deg,#1b2740,#0d1730);
  border: 3px solid #16233c;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px rgba(16,27,48,.22);
}

.lineband__r {
  text-align: center;
}

.lineband__ph span {
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #06c755;
  display: grid;
  place-items: center;
}

.lineband__ph img {
  width: 60%;
  filter: brightness(0) invert(1);
}

.lineband b {
  display: block;
  font-size: clamp(16px,1.6vw,22px);
  font-weight: 900;
  line-height: 1.6;
}

.lineband p {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.9;
}

.lineband__r small {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
}

.doc {
  max-width: 900px;
  margin-inline: auto;
}

.doc__dates {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.dsec {
  margin-top: clamp(26px,2.6vw,38px);
}

.dsec__h {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dsec__n {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  flex: none;
}

.dsec__h h2 {
  font-size: clamp(15.5px,1.35vw,18px);
  font-weight: 900;
  color: #16234d;
}

.dsec p {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 2.05;
}

.dsec ul,
.dsec ol {
  margin-top: 12px;
  padding-left: 1.4em;
  display: grid;
  gap: 7px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.95;
}

.dsec ul {
  list-style: disc;
}

.dsec ol {
  list-style: decimal;
}

.dsec a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dnote {
  margin-top: 14px;
  background: #f5f8fd;
  border: 1px solid #e4ebf7;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.dcontact {
  margin-top: clamp(26px,2.6vw,38px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(20px,2vw,28px);
}

.dcontact b {
  font-size: 14px;
  font-weight: 900;
}

.dcontact dl {
  margin-top: 14px;
  display: grid;
  gap: 10px;
  font-size: 13px;
}

.dcontact dl div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dcontact svg {
  width: 16px;
  height: 16px;
  stroke: #8496b3;
  stroke-width: 2;
  fill: none;
  flex: none;
}

@media (max-width:1100px) {
  .clist,
  .post,
  .bform,
  .case {
    grid-template-columns: 1fr;
  }

  .cgrid,
  .talents,
  .nf4,
  .issues {
    grid-template-columns: 1fr 1fr;
  }

  .reasons,
  .safe {
    grid-template-columns: repeat(3,1fr);
  }

  .ftx__top {
    grid-template-columns: 1fr 1fr;
  }

  .lh__in,
  .bh__in,
  .nf2__in,
  .lh--doc .lh__in {
    grid-template-columns: 1fr;
  }

  .lh__vis,
  .nf2 img {
    max-width: 560px;
    margin-inline: auto;
  }

  .dcols {
    grid-template-columns: 1fr;
  }
}

@media (max-width:760px) {
  .cgrid,
  .talents,
  .nf4,
  .issues,
  .p3,
  .reasons,
  .bform__g {
    grid-template-columns: 1fr;
  }

  .safe,
  .p5 {
    grid-template-columns: 1fr 1fr;
  }

  .flow5 {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .flow5 li::after {
    display: none;
  }

  .cfeat,
  .pcta,
  .ptable {
    grid-template-columns: 1fr;
  }

  .lineband {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .ftx__top {
    grid-template-columns: 1fr;
  }

  .cbar__tools {
    margin-left: 0;
    width: 100%;
  }

  .csearch,
  .csearch input {
    width: 100%;
  }
}

/* インラインの矢印アイコンの既定サイズ（指定漏れによる巨大化を防ぐ） */
.cmore svg,
.scta a svg,
.btn-ghost svg,
.pnav svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.qz__feat svg {
  flex: none;
}

.ccard__b .cmore {
  margin-top: auto;
  padding-top: 12px;
}

/* 詳細度の逆転対策（.nf2 p / .lh p が個別クラスを上書きしていたため） */
.nf2 .nf2__n {
  font-size: clamp(72px,11vw,150px);
  margin-top: 0;
}

.lh .lh__en {
  font-size: 14px;
  margin-top: 8px;
}

.lh .lh__eyebrow {
  font-size: 13px;
  margin-top: 0;
}

.bh .lh__eyebrow {
  font-size: 13px;
  margin-top: 0;
}

.doc .doc__dates {
  margin-top: 22px;
}

@media (max-width:760px) {
  .clist>div {
    min-width: 0;
  }

  .cbar {
    flex-direction: column;
    align-items: stretch;
  }

  .cbar__tools {
    flex-wrap: wrap;
  }

  .cbar select {
    flex: 1;
  }
}

@media (max-width:520px) {
  .pager {
    flex-wrap: wrap;
  }

  .pager a,
  .pager span {
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    font-size: 12px;
  }
}

/* ==========================================================================
   17. 診断結果ページ 調整
   ========================================================================== */
/* --- 推定市場価値年収カード：数値を大きく --- */
/* --- 目盛りバー：レンジ帯・両端ドット・中央値マーカー --- */
/* --- サイドバーを細く、文字を大きく --- */
.rgrid {
  grid-template-columns: minmax(0,2fr) minmax(0,1fr);
}

.share__card {
  padding: 18px;
}

.share__top span {
  font-size: 17px;
}

.share__card p {
  font-size: 13.5px;
}

.share__card strong {
  font-size: clamp(19px,1.7vw,24px);
}

.share__type {
  font-size: 12.5px;
  padding: 7px 15px;
}

.share__bars {
  height: 44px;
}

.share button {
  font-size: 13.5px;
}

.share small {
  font-size: 12px;
}

.fitchip {
  padding: 12px 13px;
  font-size: 13px;
  gap: 9px;
}

.fitchip svg {
  width: 24px;
  height: 24px;
}

.job {
  padding: 12px 13px;
  gap: 11px;
}

.job span {
  font-size: 11.5px;
}

.job__pay b {
  font-size: 14px;
}

/* --- タイプ判定：あなたのタイプは横長、その他は下に3列 --- */
.tgrid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}

.tmine--wide {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: clamp(176px,17%,236px) minmax(0,1fr);
  column-gap: clamp(18px,2vw,34px);
  row-gap: 6px;
  align-items: start;
}

.tmine--wide .tmine__tag {
  grid-column: 1/-1;
  justify-self: start;
}

.tmine--wide .tmine__n {
  grid-column: 1;
  grid-row: 2 / span 5;
  margin-top: 0;
  text-align: center;
}

.tmine--wide .tmine__n img {
  max-width: 100%;
  margin: 0 auto 10px;
}

.tmine--wide .tmine__n b {
  display: block;
  line-height: 1.5;
}

.tmine--wide #rTypeDesc,
.tmine--wide .sc__lbl,
.tmine--wide .tmine__sh,
.tmine--wide .tmine__steps,
.tmine--wide a {
  grid-column: 2;
}

.tmine--wide #rTypeDesc {
  margin-top: 2px;
  font-size: clamp(15px,1.22vw,17px);
  line-height: 1.9;
}

.tmine--wide .sc__lbl {
  margin-top: 0;
  font-size: 12.5px;
}

.tmine--wide .tmine__sh {
  margin-top: 4px;
  font-size: 13px;
}

.tmine--wide a {
  margin-top: 6px;
  font-size: 14px;
}

.tmine__steps {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.tother {
  padding: 16px 14px;
}

.tother img {
  max-width: 118px;
}

.tother b {
  font-size: 14.5px;
}

.tother p {
  font-size: 12.5px;
  line-height: 1.8;
}

/* --- 強みと伸びしろ：横長・説明を読みやすく --- */
.radar {
  grid-template-columns: clamp(300px,32%,420px) minmax(0,1fr);
  gap: clamp(20px,2.4vw,40px);
  align-items: center;
}

.radar li {
  font-size: 14.5px;
  line-height: 1.95;
}

.radar li svg {
  width: 19px;
  height: 19px;
  margin-top: 2px;
}

.radar__legend {
  font-size: 12.5px;
}

/* --- 次のアクション：丸番号を外したぶんの調整 --- */
.step3 {
  grid-template-columns: auto minmax(0,1fr);
  gap: 14px;
  padding: 18px 20px;
}

.step3__ic {
  width: 40px;
  height: 40px;
}

@media (max-width:1100px) {
  .rgrid {
    grid-template-columns: 1fr;
  }

  .tmine--wide {
    grid-template-columns: 1fr;
  }

  .tmine--wide a {
    grid-column: 1;
  }

  .tgrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:760px) {
  .tgrid,
  .fitchips {
    grid-template-columns: 1fr;
  }

  .radar {
    grid-template-columns: 1fr;
  }

  .rscale {
    padding: 36px 0 54px;
  }

  .rscale__mark,
  .rscale__now {
    font-size: 11px;
  }
}

/* ==========================================================================
   18. 運営会社・規約系の追加パーツ
   ========================================================================== */
.cbadges {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: clamp(12px,1.3vw,18px);
}

.cbadge {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(16px,1.6vw,22px);
  text-align: center;
  box-shadow: var(--sh-s);
}

.cbadge span {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}

.cbadge b {
  display: block;
  margin-top: 8px;
  font-size: clamp(15px,1.4vw,19px);
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.dmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

.dlead {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 2.05;
}

.doc__dates {
  margin-top: 20px;
}

.dcontact dl div {
  align-items: flex-start;
}

.dcontact dl svg {
  margin-top: 3px;
}

.prose td small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

@media (max-width:760px) {
  .cbadges {
    grid-template-columns: 1fr 1fr;
  }
}

/* 現在地の表示（ヘッダー／フッター） */
.ftx nav a.is-active,
.ftx__btm nav a.is-active {
  color: #fff;
  font-weight: 800;
}

.ftx nav a.is-active::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  margin-right: 7px;
  vertical-align: middle;
}

.gnav a.is-active {
  color: var(--blue);
}

.gnav a.is-active::after {
  transform: scaleX(1);
}

.drawer a.is-active {
  color: var(--blue);
  font-weight: 800;
}

/* ==========================================================================
   19. ご利用の流れ・よくあるご質問（/guide/）
   ========================================================================== */
.gsteps {
  margin-top: clamp(26px,2.4vw,38px);
  display: grid;
  gap: clamp(14px,1.5vw,22px);
}

.gstep {
  display: grid;
  grid-template-columns: clamp(96px,10vw,132px) minmax(0,1fr);
  gap: clamp(18px,2vw,34px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(20px,2vw,30px) clamp(20px,2.2vw,34px);
  box-shadow: var(--sh-s);
  transition: transform .35s cubic-bezier(.2,.7,.25,1),box-shadow .35s;
}

.gstep:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-m);
}

.gstep__ic {
  display: grid;
  place-items: center;
}

.gstep__ic svg {
  width: clamp(72px,7vw,96px);
  height: auto;
}

.gstep__hd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.gstep__n {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: clamp(26px,2.6vw,36px);
  color: #d3ddf2;
  line-height: 1;
}

.gstep__hd h3 {
  font-size: clamp(17px,1.55vw,22px);
  font-weight: 900;
  line-height: 1.5;
}

.gstep__hd em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  background: var(--grad);
  border-radius: 999px;
  padding: 5px 12px;
}

.gstep__t {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 2;
}

.gstep__l {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.gstep__l li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
}

.gstep__l svg {
  width: 15px;
  height: 15px;
  stroke: #17a56c;
  stroke-width: 2.8;
  fill: none;
  flex: none;
}

.gpoints {
  margin-top: clamp(24px,2.2vw,34px);
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: clamp(14px,1.5vw,22px);
}

.gpoint {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(20px,2vw,28px);
  text-align: center;
  box-shadow: var(--sh-s);
}

.gpoint svg {
  width: 44px;
  height: 44px;
  margin-inline: auto;
}

.gpoint b {
  display: block;
  margin-top: 14px;
  font-size: 14.5px;
  font-weight: 900;
  line-height: 1.6;
}

.gpoint p {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.95;
}

@media (max-width:900px) {
  .gpoints {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:680px) {
  .gstep {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: center;
  }

  .gstep__hd {
    justify-content: center;
  }

  .gstep__l {
    justify-content: center;
  }

  .gpoints {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   20. 4タイプとは（/types/）
   ========================================================================== */
.th {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(102px,8.2vw,128px) 0 clamp(26px,2.6vw,42px);
  background: linear-gradient(120deg,#f6f8fd 0%,#eff3fc 46%,#f6f3ff 100%);
}

.th__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.th__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.th__in {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(22px,3vw,52px);
  align-items: center;
  margin-top: clamp(18px,2vw,32px);
}

.th h1 {
  font-size: clamp(30px,3.9vw,54px);
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: .02em;
}

.th h1 .em {
  background: linear-gradient(100deg,#2f6bff 0%,#4d7bff 40%,#7b5cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.th p {
  margin-top: 20px;
  color: var(--ink-2);
  font-size: clamp(13.5px,1.05vw,15.5px);
  line-height: 2.05;
}

/* 各タイプの詳細 */
.tdets {
  padding-top: clamp(28px,2.6vw,42px);
  display: grid;
  gap: clamp(16px,1.8vw,26px);
  grid-template-columns: repeat(2,1fr);
  align-items: stretch;
}

.tdet:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-m);
}

.tdet__ph {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

.tdet__n {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tdet__n img {
  width: clamp(36px,3.4vw,48px);
  height: auto;
}

.tdet__n b {
  font-size: clamp(21px,2.1vw,30px);
  font-weight: 900;
  letter-spacing: .01em;
}

.tdet--t1 .tdet__n b {
  color: #2f6bff;
}

.tdet--t2 .tdet__n b {
  color: #17a56c;
}

.tdet--t3 .tdet__n b {
  color: #d97b0f;
}

.tdet--t4 .tdet__n b {
  color: #7b5cff;
}

.tdet__lead {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: clamp(14.5px,1.2vw,16.5px);
  line-height: 2;
}

.tdet__l {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
  padding-top: 18px;
}

.tdet__l dt {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  text-align: center;
  white-space: nowrap;
}

.tdet__l dd {
  margin: 0;
  font-size: clamp(13.5px,1.12vw,15.5px);
  color: var(--ink-2);
  line-height: 1.85;
}

.tdet--t1 .tdet__l dt {
  background: #3b6bff;
}

.tdet--t2 .tdet__l dt {
  background: #17a56c;
}

.tdet--t3 .tdet__l dt {
  background: #e2871a;
}

.tdet--t4 .tdet__l dt {
  background: #7b5cff;
}

/* 比較表 */
.tcomp {
  margin-top: clamp(24px,2.2vw,36px);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--sh-s);
}

.tcomp table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 900px;
}

.tcomp th,
.tcomp td {
  border-bottom: 1px solid #eef2f8;
  padding: 16px 18px;
  vertical-align: middle;
  font-size: 12.5px;
  line-height: 1.85;
  text-align: center;
}

.tcomp tr:last-child th,
.tcomp tr:last-child td {
  border-bottom: 0;
}

.tcomp thead th {
  background: #f6f9fe;
  font-weight: 900;
  font-size: 14px;
  padding: 18px 14px;
  border-bottom: 1px solid #e3eaf5;
}

.tcomp thead th img {
  width: 30px;
  height: auto;
  margin-inline: auto;
  margin-bottom: 8px;
  display: block;
}

.tcomp thead th:first-child {
  background: #f6f9fe;
}

.tcomp tbody th {
  width: 180px;
  background: #fafbfe;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink-2);
  text-align: left;
  white-space: nowrap;
  border-right: 1px solid #eef2f8;
}

.tcomp tbody th span.tcomp__ic {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eef3ff;
  margin-right: 10px;
  vertical-align: middle;
}

.tcomp tbody th svg {
  width: 15px;
  height: 15px;
}

.tcomp tbody tr:nth-child(2n) td {
  background: #fcfdff;
}

.tcomp td {
  color: var(--ink-2);
}

.tcomp td small {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--muted);
}

.tcomp tbody td:not(:last-child) {
  border-right: 1px solid #f2f5fa;
}

.c-t1 {
  color: #2f6bff;
}

.c-t2 {
  color: #17a56c;
}

.c-t3 {
  color: #d97b0f;
}

.c-t4 {
  color: #7b5cff;
}

.tfaq__more {
  margin-top: 22px;
  text-align: center;
}

@media (max-width:1100px) {
  .th__in {
    grid-template-columns: 1fr;
  }

  .tdet {
    grid-template-columns: clamp(150px,24%,220px) minmax(0,1fr);
  }

  .tdet .qmini {
    display: none;
  }
}

@media (max-width:680px) {
  .tdet {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .tdet__ph {
    max-width: 280px;
    margin-inline: auto;
  }

  .tdet__l {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }

  .tdet__l dt {
    justify-self: start;
    margin-top: 8px;
  }
}

/* ==========================================================================
   21. 全体調整（見出しの改行・CTA帯の余白）
   ========================================================================== */
/* 13) 見出しが1〜2文字だけ折り返さないように。サイズも全ページで統一 */
.stitle {
  font-size: clamp(22px,2.35vw,33px);
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.slead {
  text-wrap: balance;
}

.rbox__h,
.rangecard__h,
.sc__h,
.pbox h3 {
  text-wrap: balance;
  word-break: keep-all;
}

.lh h1,
.bh h1,
.th h1,
.dgh h1,
.rh h1,
.post h1 {
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.tcard b,
.tdet__n b,
.gstep__hd h3,
.issue b,
.reason b,
.gpoint b {
  text-wrap: balance;
  word-break: keep-all;
}

/* 7) 90秒CTA帯の上余白を詰める */
.sec--tight:has(> .wrap-lg > .ctab--in) {
  padding-top: clamp(20px,1.8vw,30px);
}

/* 1) コラム・採用の見出し帯にも背景画像 */
.lh,
.bh {
  position: relative;
  isolation: isolate;
}

.lh .th__bg,
.bh .th__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.lh .th__bg img,
.bh .th__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

/* ==========================================================================
   22. 診断結果ページ（レスポンシブ強化）
   ========================================================================== */
/* 2) 現在の年収／想定年収アップを大きく */
.rstat {
  padding: 22px 18px;
}

.rstat span {
  font-size: 13px;
}

.rstat b {
  margin-top: 12px;
  font-size: clamp(26px,2.6vw,36px);
  letter-spacing: -.01em;
}

.rstat b i {
  font-size: .5em;
}

.rstat--up b {
  font-size: clamp(24px,2.35vw,33px);
}

.rstat:not(.rstat--up) b {
  font-size: clamp(22px,2.05vw,29px);
  color: var(--ink-2);
}

/* 3) 目盛りの丸：桁数に応じて可変。4桁でも収まるように */
.rscale__dot {
  width: auto;
  min-width: 40px;
  height: 40px;
  padding: 0 9px;
  border-radius: 999px;
  top: 39px;
  font-size: 13.5px;
  letter-spacing: -.01em;
}

.rscale__pin {
  font-size: 11.5px;
  padding: 6px 14px;
}

/* ==========================================================================
   23. 4タイプの特徴（PC：画像／本文／象限グラフの横並び・左右交互）
   ========================================================================== */
.tdets {
  padding-top: clamp(28px,2.6vw,42px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px,1.8vw,26px);
}

.tdet {
  display: grid;
  grid-template-columns: clamp(240px,27%,380px) minmax(0,1fr) clamp(150px,16%,215px);
  gap: clamp(20px,2.6vw,46px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(22px,2.2vw,34px) clamp(22px,2.4vw,38px);
  box-shadow: var(--sh-s);
  transition: transform .35s cubic-bezier(.2,.7,.25,1),box-shadow .35s;
}

.tdet:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-m);
}

.tdet--r {
  grid-template-columns: clamp(150px,16%,215px) minmax(0,1fr) clamp(240px,27%,380px);
}

.tdet__im {
  min-width: 0;
}

.tdet__ph {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

.tdet__map {
  min-width: 0;
}

.tdet__n {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tdet__n img {
  width: clamp(36px,3.4vw,48px);
  height: auto;
}

.tdet__n b {
  font-size: clamp(21px,2.1vw,30px);
  font-weight: 900;
  letter-spacing: .01em;
}

.tdet--t1 .tdet__n b {
  color: #2f6bff;
}

.tdet--t2 .tdet__n b {
  color: #17a56c;
}

.tdet--t3 .tdet__n b {
  color: #d97b0f;
}

.tdet--t4 .tdet__n b {
  color: #7b5cff;
}

.tdet__lead {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: clamp(14.5px,1.2vw,16.5px);
  line-height: 2;
}

.tdet__l {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.tdet__l li {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 16px;
  align-items: center;
}

.tdet__k {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  text-align: center;
  white-space: nowrap;
  min-width: 112px;
}

.tdet__v {
  font-size: clamp(13.5px,1.12vw,15.5px);
  color: var(--ink-2);
  line-height: 1.85;
}

.tdet--t1 .tdet__k {
  background: #3b6bff;
}

.tdet--t2 .tdet__k {
  background: #17a56c;
}

.tdet--t3 .tdet__k {
  background: #e2871a;
}

.tdet--t4 .tdet__k {
  background: #7b5cff;
}

/* 象限内の位置図 */
.qmini {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(160deg,#fbfcff,#f5f8fe);
}

.qmini__x {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1.4px;
  background: #d9e2f2;
}

.qmini__y {
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 1.4px;
  background: #d9e2f2;
}

.qmini__dot {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
}

.qmini__dot::after {
  content: "";
  position: absolute;
  left: 22%;
  top: 16%;
  width: 34%;
  height: 26%;
  border-radius: 50%;
  background: rgba(255,255,255,.65);
}

.qmini__dot--t1 {
  background: radial-gradient(circle at 32% 28%,#8ab0ff,#2f6bff 62%,#1f45c4);
  box-shadow: 0 5px 12px rgba(47,107,255,.45),0 0 0 7px rgba(47,107,255,.12);
}

.qmini__dot--t2 {
  background: radial-gradient(circle at 32% 28%,#7ce0ad,#17a56c 62%,#0f7a4e);
  box-shadow: 0 5px 12px rgba(23,165,108,.42),0 0 0 7px rgba(23,165,108,.14);
}

.qmini__dot--t3 {
  background: radial-gradient(circle at 32% 28%,#ffd08a,#e2871a 62%,#b06510);
  box-shadow: 0 5px 12px rgba(226,135,26,.42),0 0 0 7px rgba(226,135,26,.16);
}

.qmini__dot--t4 {
  background: radial-gradient(circle at 32% 28%,#c3aeff,#7b5cff 62%,#5335d4);
  box-shadow: 0 5px 12px rgba(123,92,255,.42),0 0 0 7px rgba(123,92,255,.14);
}

/* タブレット以下：象限グラフを隠して2カラムに */
@media (max-width:1100px) {
  .tdet,
  .tdet--r {
    grid-template-columns: clamp(200px,30%,300px) minmax(0,1fr);
  }

  .tdet__map {
    display: none;
  }
}

/* スマホ：画像を上、説明を下に積む */
@media (max-width:760px) {
  .tdet,
  .tdet--r {
    display: block;
    padding: 0;
    overflow: hidden;
  }

  .tdet__im {
    padding: clamp(16px,4vw,24px);
    background: linear-gradient(160deg,#f6f9ff,#fff);
    display: grid;
    place-items: center;
  }

  .tdet--t1 .tdet__im {
    background: linear-gradient(160deg,#f2f7ff,#fff);
  }

  .tdet--t2 .tdet__im {
    background: linear-gradient(160deg,#f0fbf5,#fff);
  }

  .tdet--t3 .tdet__im {
    background: linear-gradient(160deg,#fff8ef,#fff);
  }

  .tdet--t4 .tdet__im {
    background: linear-gradient(160deg,#f7f4ff,#fff);
  }

  .tdet__ph {
    max-width: 420px;
    margin-inline: auto;
  }

  .tdet__b {
    padding: clamp(18px,4.6vw,26px);
  }

  .tdet__l li {
    grid-template-columns: 1fr;
    gap: 8px;
    background: #f8fafd;
    border: 1px solid #eaf0f8;
    border-radius: 12px;
    padding: 12px 16px;
  }

  .tdet__k {
    justify-self: start;
    min-width: 0;
  }
}

/* ==========================================================================
   24. 採用企業さまへ（課題カード・流れの横スライド・相談導線）
   ========================================================================== */
.issues {
  gap: clamp(14px,1.5vw,22px);
}

.issue {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(20px,2vw,28px);
  box-shadow: var(--sh-s);
  transition: transform .35s,box-shadow .35s;
}

.issue:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-m);
}

.issue__ic {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(150deg,#eef3ff,#f5f1ff);
}

.issue__ic svg {
  width: 32px;
  height: 32px;
}

.issue b {
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 1.6;
}

.issue p {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.95;
}

.flow5__wrap {
  margin-top: 18px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

.flow5 {
  display: flex;
  gap: 14px;
  min-width: max-content;
}

.flow5 li {
  position: relative;
  width: 180px;
  flex: none;
  text-align: center;
  background: #f8fafd;
  border: 1px solid #e8eef7;
  border-radius: 14px;
  padding: 18px 14px;
}

.flow5 li::after {
  top: 50%;
  right: -11px;
}

.flow5__ic {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-inline: auto;
  background: linear-gradient(150deg,#eef3ff,#f5f1ff);
}

.flow5__ic svg {
  width: 30px;
  height: 30px;
}

.flow5 em {
  margin-top: 12px;
  font-size: 11.5px;
  letter-spacing: .06em;
}

.flow5 b {
  margin-top: 6px;
  font-size: 14.5px;
}

.flow5 span {
  margin-top: 8px;
  font-size: 11.5px;
}

.flow5__hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  display: none;
}

.flow5__wrap::-webkit-scrollbar {
  height: 6px;
}

.flow5__wrap::-webkit-scrollbar-thumb {
  background: #d7e0ee;
  border-radius: 99px;
}

.bcontact {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  gap: clamp(20px,2.4vw,40px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(24px,2.6vw,40px);
  box-shadow: var(--sh-m);
}

.bcontact h2 {
  font-size: clamp(19px,1.9vw,26px);
  font-weight: 900;
  line-height: 1.5;
}

.bcontact p {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.95;
}

.bcontact__pts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 18px;
}

.bcontact__pts svg {
  width: 15px;
  height: 15px;
  stroke: #17a56c;
  stroke-width: 2.8;
  fill: none;
  flex: none;
}

.bcontact__r {
  display: grid;
  gap: 14px;
  justify-items: center;
}

.bcontact__r .btn {
  width: 100%;
}

/* ==========================================================================
   25. レスポンシブ（今回の修正ぶん）
   ========================================================================== */
@media (max-width:1100px) {
  /* 10) 11) スマホでは画像を先に出す */
  .lh__in,
  .bh__in {
    display: flex;
    flex-direction: column;
  }

  .lh__copy,
  .bh__copy {
    order: 2;
  }

  .lh__vis {
    order: 1;
    width: 100%;
  }

  .tdets {
    grid-template-columns: 1fr;
  }
}

@media (max-width:900px) {
  /* 4) 診断結果：タイプ判定を縦積みに */
  .tgrid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .tmine--wide {
    display: block;
    text-align: center;
    padding: clamp(18px,3vw,24px);
  }

  .tmine--wide .tmine__n {
    display: block;
    margin: 14px 0 0;
  }

  .tmine--wide .tmine__n img {
    max-width: min(100%,300px);
    margin: 0 auto 10px;
  }

  .tmine--wide .tmine__n b {
    font-size: clamp(20px,5.2vw,26px);
  }

  .tmine--wide #rTypeDesc {
    margin-top: 12px;
    font-size: 14.5px;
    text-align: left;
  }

  .tmine--wide .sc__lbl {
    margin-top: 10px;
  }

  .tmine--wide .tmine__sh {
    margin-top: 16px;
    text-align: left;
  }

  .tmine--wide .tmine__steps {
    text-align: left;
  }

  .tmine--wide a {
    display: inline-block;
    margin-top: 14px;
  }

  .tother {
    display: block;
    text-align: center;
    padding: 18px;
  }

  .tother img {
    max-width: min(100%,260px);
    margin-inline: auto;
  }

  .tother b {
    margin-top: 12px;
    font-size: 16px;
  }

  .tother p {
    margin-top: 8px;
    font-size: 13px;
  }

  /* 3) 目盛りバー：ラベルの重なりを防ぐ */
  .rscale {
    padding: 56px 0 96px;
  }

  .rscale__mark {
    top: 80px;
    font-size: 11.5px;
  }

  .rscale__end {
    top: 80px;
    font-size: 11px;
  }

  .rscale__now {
    top: 112px;
    font-size: 11px;
    padding: 5px 11px;
  }

  .rscale__dot {
    min-width: 36px;
    height: 36px;
    font-size: 12.5px;
    top: 41px;
  }

  .flow5__hint {
    display: block;
  }
}

@media (max-width:760px) {
  /* 2) 現在の年収／想定年収アップ */
  .rstats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .rstat {
    padding: 16px 10px;
  }

  .rstat span {
    font-size: 11.5px;
  }

  .rstat:not(.rstat--up) b {
    font-size: 22px;
  }

  .rstat--up b {
    font-size: 24px;
  }

  .rstat b i {
    font-size: .46em;
  }

  /* 3) 端のラベルは左右に逃がす */
  .rscale__end--l {
    left: 0;
  }

  .rscale__end--r {
    right: 0;
  }

  .rscale__mark {
    max-width: 46%;
  }

  .issue__ic {
    width: 52px;
    height: 52px;
  }

  .issue__ic svg {
    width: 28px;
    height: 28px;
  }

  .bcontact {
    grid-template-columns: 1fr;
  }

  .tdet__l li {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tdet__k {
    justify-self: start;
  }
}

@media (max-width:520px) {
  .rstats {
    grid-template-columns: 1fr;
  }

  .rscale__now {
    white-space: normal;
    text-align: center;
    max-width: 60%;
  }
}

/* 導入事例・フォームのはみ出し対策 */
.case,
.case__l,
.case__r,
.bform,
.form,
.pbox {
  min-width: 0;
}

.case__l img {
  max-width: 100%;
}

@media (max-width:1100px) {
  .case {
    grid-template-columns: 1fr;
  }

  .case__l {
    aspect-ratio: 16/10;
  }
}

@media (max-width:760px) {
  .case__l {
    aspect-ratio: 4/3;
  }

  .case__l div {
    position: static;
    background: none;
    color: var(--ink);
    padding: 16px 0 0;
  }

  .case__l q {
    color: var(--ink);
  }

  .case__l p {
    color: var(--muted);
  }

  .case__l {
    aspect-ratio: auto;
    border-radius: 0;
    overflow: visible;
  }

  .case__l img {
    border-radius: 16px;
    height: auto;
  }

  .case__l span {
    left: 12px;
    top: 12px;
  }
}

/* 見出し内の補足テキストが狭い画面ではみ出すのを防ぐ */
.rbox__h {
  flex-wrap: wrap;
}

.rbox__h .sc__lbl {
  margin-left: auto;
  min-width: 0;
  flex: 1 1 100%;
  white-space: normal;
}

@media (min-width:761px) {
  .rbox__h .sc__lbl {
    flex: 0 1 auto;
  }
}

.rbox,
.rbox>div,
.radar,
.jobs,
/* 目盛りバー：狭い画面ではレンジの数値ラベルを省く（上の大きな数値と重複するため） */
@media (max-width:760px) {
  .rscale {
    padding: 56px 0 74px;
  }

  .rscale__mark {
    display: none;
  }

  .rscale__end {
    top: 76px;
  }

  .rscale__now {
    top: 76px;
  left: 50% !important;
  transform: translateX(-50%);
  };
}

/* お問い合わせページ：ページヘッダーを他の下層ページと同じ明るい帯に */
.phead::before {
  background: none;
}

.phead .crumb {
  color: #7b869c;
}

.phead .crumb a {
  color: #7b869c;
}

.phead .crumb a:hover {
  color: var(--blue);
}

.phead .crumb span {
  color: #c3cee3;
}

.phead p {
  color: var(--ink-2);
}

/* ==========================================================================
   26. 採用企業さまへ・コラム一覧（レスポンシブの並び／相談CTA）
   ========================================================================== */
/* 7) まずは採用のご相談から */
.bcontact {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(0,.85fr);
  gap: clamp(22px,2.6vw,44px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(26px,2.8vw,44px);
  box-shadow: var(--sh-m);
}

.bcontact__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  color: #fff;
  background: var(--grad);
  border-radius: 999px;
  padding: 6px 16px;
}

.bcontact h2 {
  margin-top: 14px;
  font-size: clamp(20px,2vw,28px);
  font-weight: 900;
  line-height: 1.5;
}

.bcontact>div>p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.95;
}

.bcontact__pts {
  margin-top: 20px;
  display: grid;
  gap: 12px;
}

.bcontact__pts li {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 12px;
  align-items: start;
}

.bcontact__pts svg {
  width: 20px;
  height: 20px;
  stroke: #17a56c;
  stroke-width: 2.8;
  fill: none;
  flex: none;
  margin-top: 2px;
}

.bcontact__pts b {
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: var(--ink);
}

.bcontact__r {
  background: linear-gradient(160deg,#f4f7ff,#f8f5ff);
  border: 1px solid #e3e9f8;
  border-radius: 18px;
  padding: clamp(22px,2.2vw,30px);
  text-align: center;
}

.bcontact__rh {
  margin: 0 0 14px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink-2);
}

.bcontact__r .btn {
  width: 100%;
}

.bcontact__mail {
  margin-top: 16px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.9;
}

.bcontact__mail a {
  font-weight: 800;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 9) 送信完了イメージを外したのでフォームは1カラム */
.bform--single {
  grid-template-columns: minmax(0,1fr);
  max-width: 900px;
  margin-inline: auto;
}

@media (max-width:1100px) {
  /* 3) 8) 見出し → 画像 → 説明 の順に */
  .bh__copy,
  .lh__copy {
    display: contents;
  }

  .bh__in>.lh__vis,
  .lh__in>.lh__vis {
    order: 2;
    margin: clamp(18px,2.4vw,28px) auto 0;
  }

  .lh__eyebrow {
    order: 1;
  }

  .bh h1,
  .lh h1 {
    order: 1;
  }

  .bh__lead,
  .lh__lead {
    order: 3;
    margin-top: clamp(16px,2vw,24px);
  }

  .bh__cta {
    order: 4;
  }

  .bcontact {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   27. 見出しの孤立行対策（スマホで1〜2文字だけ改行されるのを防ぐ）
   ========================================================================== */
@media (max-width:1100px) {
  /* セクション見出し：装飾線を細くし、文字を画面幅に追従させる */
  .stitle {
    font-size: clamp(17px,4.9vw,26px);
    gap: 10px;
  }

  .stitle::before,
  .stitle::after {
    max-width: 24px;
  }

  .lh h1,
  .bh h1,
  .th h1,
  .dgh h1,
  .rh h1,
  .post h1,
  .nf2 h1,
  .phead h1 {
    font-size: clamp(22px,6.4vw,38px);
  }

  .psec__h h2 {
    font-size: clamp(16px,4.5vw,20px);
  }

  .dsec__h h2 {
    font-size: clamp(14.5px,4vw,17px);
  }

  .ccard h3 {
    font-size: clamp(13.5px,3.7vw,15px);
  }

  .cfeat h3 {
    font-size: clamp(15.5px,4.4vw,19px);
  }

  .sc__h,
  .rbox__h,
  .rangecard__h,
  .gstep__hd h3 {
    font-size: clamp(13.5px,3.8vw,16px);
  }

  .bcontact h2 {
    font-size: clamp(18px,5vw,24px);
  }
}

@media (max-width:400px) {
  .stitle {
    font-size: clamp(16px,4.6vw,20px);
  }

  .stitle::before,
  .stitle::after {
    display: none;
  }

  .lh h1,
  .bh h1,
  .th h1,
  .dgh h1,
  .rh h1,
  .post h1,
  .nf2 h1,
  .phead h1 {
    font-size: clamp(20px,6vw,30px);
  }

  .psec__h h2 {
    font-size: 16px;
  }

  .dsec__h h2 {
    font-size: 14.5px;
  }

  .ccard h3 {
    font-size: 13.5px;
  }
}

/* 長いタイトルは最終行に1〜2文字だけ残さない（text-wrap: pretty） */
h1,
h2,
h3,
.ccard h3,
.cfeat h3,
.rank b,
.prank b,
.tcard b,
.job b {
  text-wrap: pretty;
}

@media (max-width:1100px) {
  .ccard h3 {
    font-size: clamp(13px,3.6vw,15px);
    line-height: 1.6;
  }

  .qz__q {
    font-size: clamp(16px,4.6vw,21px);
  }

  .kbar__row b {
    text-wrap: pretty;
  }
}

/* 記事タイトルは2行までに省略（3行目に数文字だけ残るのを防ぐ） */
.ccard h3,
.rank b,
.prank b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

@media (max-width:1100px) {
  .ccard h3 {
    -webkit-line-clamp: 2;
  }
}

/* 残りの見出しも1行に収める */
@media (max-width:1100px) {
  .psec__h h2 {
    font-size: clamp(14.5px,4.1vw,19px);
  }

  .dsec__h h2 {
    font-size: clamp(13.5px,3.75vw,16.5px);
  }

  .nf2 h1 {
    font-size: clamp(19px,5.4vw,30px);
  }

  .kbar__row b {
    font-size: clamp(13px,3.6vw,16px);
  }
}

@media (max-width:1100px) {
  .psec__h {
    gap: 10px;
  }

  .psec__n {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  .psec__h h2 {
    font-size: clamp(13.5px,3.8vw,19px);
    line-height: 1.5;
  }

  .post h1 {
    font-size: clamp(18px,4.9vw,30px);
    line-height: 1.55;
  }
}

/* 特に長い記事タイトル・見出し */
@media (max-width:1100px) {
  .post h1 {
    font-size: clamp(17px,4.6vw,30px);
  }
}

@media (max-width:360px) {
  .kbar__row b {
    font-size: 12.5px;
  }
}

@media (max-width:400px) {
  .kbar__row b {
    font-size: clamp(11.5px,3.4vw,14px);
  }
}

@media (max-width:400px) {
  .kcard h3 {
    font-size: clamp(12.5px,3.9vw,15.5px);
  }
}

/* 「まずは採用のご相談から」のポイント行を2段組みに */
.bcontact__pts li {
  align-items: start;
}

.bcontact__pts b {
  margin-bottom: 3px;
}

.bcontact__pts span {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.8;
}

/* ==========================================================================
   28. アクセシビリティ / SEO 用（見た目には影響しない）
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--grad);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
}

.skip:focus {
  left: 0;
}

.drawer__h {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.ftx__h {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .08em;
  margin-bottom: 14px;
}

/* ==========================================================================
   29. 4タイプ・お問い合わせ・見出し画像の調整
   ========================================================================== */
/* 4タイプ：右のマップを外したぶん、見出しは左揃えのまま全幅で使う */
.th {
  padding: clamp(104px,8.4vw,132px) 0 clamp(34px,3.4vw,52px);
}

.th__in {
  display: block;
  margin-top: clamp(14px,1.6vw,24px);
}

.th h1 {
  font-size: clamp(30px,3.9vw,54px);
  line-height: 1.3;
}

.th p {
  margin-top: 18px;
  max-width: 720px;
}

/* お問い合わせ：見出し帯を他の下層ページと同じ高さに、本文との間も詰める */
.phead+.sec {
  padding-top: clamp(24px,2.4vw,38px);
}

.bform--single {
  max-width: 960px;
}

/* 見出しまわりの人物写真を少し傾けて動きを出す */
.lh__ph {
  transition: transform .5s cubic-bezier(.2,.7,.25,1);
}

.lh__ph--a {
  transform: rotate(-5deg);
}

.lh__ph--b {
  transform: rotate(6.5deg);
}

.lh__ph--c {
  transform: rotate(-7.5deg);
}

.lh__vis:hover .lh__ph--a {
  transform: rotate(-2.5deg) translateY(-4px);
}

.lh__vis:hover .lh__ph--b {
  transform: rotate(3.5deg) translateY(-4px);
}

.lh__vis:hover .lh__ph--c {
  transform: rotate(-4deg) translateY(-4px);
}

@media (prefers-reduced-motion:reduce) {
  .lh__ph,
  .lh__vis:hover .lh__ph {
    transition: none;
  }
}

/* お問い合わせ：見出し帯にも他ページと同じ背景パターンを敷いて余白を締める */
.contact-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(24px,2.6vw,40px);
  box-shadow: var(--sh-m);
}

/* ==========================================================================
   30. お問い合わせ：案内サイドバー
   ========================================================================== */
.bform {
  grid-template-columns: minmax(0,1.5fr) clamp(280px,26%,360px);
  align-items: start;
}

.cside {
  display: grid;
  gap: clamp(12px,1.3vw,18px);
}

.cside__box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(20px,2vw,26px);
  box-shadow: var(--sh-s);
}

.cside__h {
  font-size: 13.5px;
  font-weight: 900;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #eef2fa;
}

.cside__list {
  display: grid;
  gap: 16px;
}

.cside__list li {
  display: block;
}

.cside__list b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.6;
}

.cside__list b::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grad);
  margin-right: 8px;
  vertical-align: middle;
}

.cside__list span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.85;
}

.cside__note {
  display: grid;
  gap: 9px;
  list-style: disc;
  padding-left: 1.2em;
}

.cside__note li {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.85;
}

.cside__note b {
  font-weight: 800;
  color: var(--ink-2);
}

.cside__note a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cside__box--mail {
  background: linear-gradient(160deg,#f4f7ff,#f8f5ff);
  border-color: #e3e9f8;
}

.cside__mail {
  font-size: 14.5px;
  font-weight: 800;
}

.cside__mail a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}

.cside__t {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.8;
}

.cside__box--mail .btn-line-fill {
  margin-top: 16px;
  width: 100%;
  justify-content: center;
  padding: 14px;
}

.cside__box--mail .btn-line-fill b {
  font-size: 14px;
}

.cside__box--org {
  background: #f8fafd;
}

.cside__org {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.7;
}

.cside__org span {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.8;
}

@media (max-width:1100px) {
  .bform {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   31. 4タイプ（スマホ）
   ========================================================================== */
/* 1) セクション見出しの装飾線をスマホでも表示する */
@media (max-width:400px) {
  .stitle::before,
  .stitle::after {
    display: block;
    max-width: 20px;
  }
}

/* 2) スマホでは常に画像が先、その下に説明 */
@media (max-width:760px) {
  .tdet,
  .tdet--r {
    display: flex;
    flex-direction: column;
  }

  .tdet__im {
    order: 1;
  }

  .tdet__b {
    order: 2;
  }

  .tdet__map {
    order: 3;
    display: none;
  }
}

/* ==========================================================================
   32. ビジョン ／ バリュー（トップページ）
   ========================================================================== */
.vv{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:clamp(48px,4.6vw,76px) 0}
.vv::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(900px 380px at 12% 18%,rgba(45,90,255,.42),transparent 68%),
             radial-gradient(760px 340px at 88% 82%,rgba(120,60,255,.34),transparent 70%),
             linear-gradient(155deg,#050b1a 0%,#0b1430 55%,#141033 100%)}
.vv__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(22px,3vw,56px);align-items:end}
.vv__label{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.22em;color:#8ab4ff;
  padding-bottom:8px;border-bottom:1.6px solid rgba(138,180,255,.4)}
.vv__h{margin-top:20px;font-size:clamp(26px,3.3vw,46px);font-weight:900;line-height:1.42;letter-spacing:.01em}
.vv__h .em{background:linear-gradient(100deg,#8af4ff 0%,#93cdff 46%,#d2b0ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.vv__t{font-size:clamp(13.5px,1.1vw,15.5px);line-height:2.15;color:#c3d2f0}
.vv__bottom{margin-top:clamp(34px,3.6vw,58px);padding-top:clamp(30px,3vw,46px);border-top:1px solid rgba(255,255,255,.12)}
.vv__vh{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 22px}
.vv__vh h3{font-size:clamp(19px,2vw,28px);font-weight:900;letter-spacing:.01em}
.vv__list{margin-top:clamp(22px,2.4vw,34px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.vcard{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);border-radius:18px;
  padding:clamp(20px,2.1vw,30px);transition:transform .35s cubic-bezier(.2,.7,.25,1),background .35s,border-color .35s}
.vcard:hover{transform:translateY(-5px);background:rgba(255,255,255,.09);border-color:rgba(138,180,255,.4)}
.vcard__n{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:clamp(22px,2.2vw,30px);
  font-weight:800;line-height:1;background:linear-gradient(100deg,#8af4ff,#b9a6ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.vcard b{display:block;margin-top:14px;font-size:clamp(15px,1.4vw,18px);font-weight:900}
.vcard p{margin-top:12px;font-size:13px;line-height:1.95;color:#b6c6e6}

@media (max-width:900px){
  .vv__top{grid-template-columns:1fr;align-items:start}
  .vv__t{margin-top:4px}
  .vv__list{grid-template-columns:1fr}
}

/* ==========================================================================
   33. 記事本文（WordPressエディタから出力される部分）
   ========================================================================== */
.post__body{margin-top:clamp(20px,2vw,30px)}
.post__body > *:first-child{margin-top:0}

.post__body p{margin-top:16px;color:var(--ink-2);font-size:clamp(14px,1.15vw,15.5px);line-height:2.05}
.post__body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.post__body a:hover{opacity:.75}
.post__body strong,.post__body b{font-weight:800;color:var(--ink)}
.post__body em{font-style:normal;background:linear-gradient(transparent 62%,rgba(59,107,255,.18) 0)}

.post__body h3{margin-top:clamp(26px,2.4vw,36px);font-size:clamp(16px,1.4vw,19px);font-weight:900;line-height:1.6;
  padding-left:14px;border-left:4px solid var(--blue)}
.post__body h4{margin-top:22px;font-size:clamp(14.5px,1.25vw,17px);font-weight:800;line-height:1.6}

.post__body ul,.post__body ol{margin-top:16px;padding-left:1.5em;display:grid;gap:9px;
  color:var(--ink-2);font-size:clamp(13.5px,1.1vw,15px);line-height:1.95}
.post__body ul{list-style:disc}
.post__body ol{list-style:decimal}
.post__body li::marker{color:var(--blue)}

/* 画像は必ず枠内に収める（サイズ未生成の大きな画像でも崩れないように） */
.post__body img,.post__body iframe,.post__body video{max-width:100%;height:auto;display:block;border-radius:12px}
.post__body figure{margin:clamp(20px,2vw,28px) 0}
.post__body figure img{margin-inline:auto}
.post__body figcaption{margin-top:10px;font-size:12px;color:var(--muted);text-align:center;line-height:1.8}
.post__body .alignleft{float:left;margin:6px 20px 16px 0;max-width:50%}
.post__body .alignright{float:right;margin:6px 0 16px 20px;max-width:50%}
.post__body .aligncenter{margin-inline:auto}
.post__body .wp-caption{max-width:100%}

.post__body blockquote{margin:clamp(20px,2vw,28px) 0;padding:clamp(16px,1.6vw,22px) clamp(18px,1.8vw,26px);
  background:#f5f8fd;border-left:4px solid #c3d4f5;border-radius:0 12px 12px 0}
.post__body blockquote p{margin-top:8px;font-size:13.5px}
.post__body blockquote p:first-child{margin-top:0}

.post__body table{width:100%;margin-top:18px;border-collapse:collapse;font-size:13.5px}
.post__body th,.post__body td{border:1px solid var(--line);padding:11px 14px;text-align:left;line-height:1.8}
.post__body thead th{background:#f3f6fc;font-weight:800;font-size:12.5px}
.post__body .wp-block-table{overflow-x:auto}

.post__body code{background:#f3f6fc;border:1px solid var(--line);border-radius:6px;padding:2px 7px;
  font-size:.92em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.post__body pre{margin-top:18px;padding:18px 20px;background:#0d1730;border-radius:12px;overflow-x:auto;
  color:#c9d6f5;font-size:13px;line-height:1.85}
.post__body pre code{background:none;border:0;padding:0;color:inherit}

.post__body hr{margin:clamp(26px,2.6vw,38px) 0;border:0;border-top:1px solid var(--line)}

/* 記事内の見出しセクション（h2 から自動生成される枠） */
.post__body .psec:first-of-type{margin-top:clamp(24px,2.2vw,34px)}

/* 一覧・関連記事のサムネイル：サイズ未生成の画像でも比率を保つ */
.ccard img,.cfeat img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.rank img,.prank img{object-fit:cover;display:block}
.post__hero{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}

/* サイドバー「あなたにおすすめ」（順位バッジなし） */
.prank--plain li{grid-template-columns:70px minmax(0,1fr)}
.prank--plain li::before{display:none}

/* ==========================================================================
   34. Contact Form 7 を使う場合の表示調整
   （プラグイン側のマークアップを、素のフォームと同じ見た目にそろえる）
   ========================================================================== */
.form--cf7 .wpcf7-form-control-wrap{display:block;margin-top:8px}
.form--cf7 .field{margin-bottom:0}
.form--cf7 .field label{margin-bottom:0}

.form--cf7 input[type="text"],
.form--cf7 input[type="email"],
.form--cf7 input[type="tel"],
.form--cf7 select,
.form--cf7 textarea{width:100%}

/* 同意チェック */
.form--cf7 .agree{display:flex;align-items:flex-start;gap:10px;margin-top:20px}
.form--cf7 .wpcf7-acceptance{display:inline-flex}
.form--cf7 .wpcf7-list-item{margin:0}
.form--cf7 .wpcf7-list-item-label{display:none}

/* 送信ボタン */
.form--cf7 input[type="submit"],
.form--cf7 .wpcf7-submit{display:block;width:100%;margin-top:22px;border:0;cursor:pointer;
  background:var(--grad);color:#fff;font:inherit;font-size:clamp(15px,1.35vw,17px);font-weight:800;
  letter-spacing:.02em;border-radius:999px;padding:19px 32px;
  box-shadow:0 14px 30px rgba(59,107,255,.32);transition:transform .25s,box-shadow .25s,filter .25s}
.form--cf7 input[type="submit"]:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 18px 38px rgba(59,107,255,.4)}
.form--cf7 input[type="submit"]:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* 送信中のぐるぐる */
.form--cf7 .wpcf7-spinner{margin:14px auto 0;display:block}

/* エラー・完了メッセージ */
.form--cf7 .wpcf7-not-valid-tip{margin-top:7px;font-size:12px;font-weight:700;color:#e5484d}
.form--cf7 .wpcf7-not-valid{border-color:#e5484d !important;background:#fff6f6 !important}
.form--cf7 .wpcf7-response-output{margin:22px 0 0 !important;padding:16px 20px !important;
  border-radius:12px !important;border:1px solid var(--line) !important;
  font-size:13.5px;line-height:1.9;background:#f7f9fd}
.form--cf7 form.sent .wpcf7-response-output{border-color:#a9e0c4 !important;background:#f0fbf5;color:#127a52}
.form--cf7 form.invalid .wpcf7-response-output,
.form--cf7 form.failed .wpcf7-response-output{border-color:#f4c2c4 !important;background:#fff6f6;color:#b4262b}

@media (max-width:760px){
  .form--cf7 input[type="submit"]{padding:17px 24px}
}

/* ==========================================================================
   35. 記事本文で使われている独自クラス
   （既存記事のHTMLに合わせたスタイル。テーマ側の同名クラスと衝突しないよう
     すべて .post__body の中でのみ効くようにしています）
   ========================================================================== */

/* 補足ボックス */
.post__body .callout{margin:clamp(20px,2vw,28px) 0;padding:clamp(18px,1.8vw,24px);
  background:#f4f8fe;border:1px solid #dbe6f8;border-left:4px solid var(--blue);border-radius:0 12px 12px 0}
.post__body .callout p{margin-top:10px}
.post__body .callout p:first-child{margin-top:0}
.post__body .callout .lbl{display:inline-block;margin-bottom:10px;font-size:11.5px;font-weight:800;
  color:#fff;background:var(--blue);border-radius:999px;padding:5px 13px}

/* 記事内のCTA */
.post__body .cta-box{margin:clamp(24px,2.4vw,34px) 0;padding:clamp(22px,2.2vw,30px);
  background:linear-gradient(120deg,#eef3ff,#f5f1ff);border:1px solid #dfe6fa;border-radius:18px;text-align:center}
.post__body .cta-box .t{display:block;font-size:clamp(15px,1.4vw,19px);font-weight:900;line-height:1.6;color:var(--ink)}
.post__body .cta-box .s{display:block;margin-top:10px;font-size:13px;color:var(--muted);line-height:1.9}
.post__body .cta-box .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:18px;padding:15px 30px;border-radius:999px;font-size:14.5px;font-weight:800;
  text-decoration:none;transition:transform .25s,box-shadow .25s,filter .25s}
.post__body .cta-box .btn:hover{transform:translateY(-2px);filter:brightness(1.05);opacity:1}
.post__body .cta-box .btn.primary{background:var(--grad);color:#fff;box-shadow:0 12px 26px rgba(59,107,255,.3)}
.post__body .cta-box .btn.sub{background:#fff;color:var(--blue);border:1.6px solid #cfdcfa}

/* 手順リスト */
.post__body .steps{margin:clamp(20px,2vw,28px) 0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:s}
.post__body .steps li{position:relative;counter-increment:s;padding:14px 18px 14px 54px;
  background:#f8fafd;border:1px solid #eaf0f8;border-radius:12px;font-size:13.5px;line-height:1.9;color:var(--ink-2)}
.post__body .steps li::before{content:counter(s);position:absolute;left:16px;top:14px;
  width:24px;height:24px;border-radius:50%;background:var(--grad);color:#fff;
  font-size:12px;font-weight:800;display:grid;place-items:center}

/* 記事内のよくある質問（テーマの .faq とは別物） */
.post__body .faq{margin:clamp(20px,2vw,28px) 0;display:grid;grid-template-columns:1fr;gap:10px}
.post__body .faq dt{font-size:14px;font-weight:800;color:var(--ink);line-height:1.7;
  padding:14px 18px;background:#f2f6fd;border-radius:12px 12px 0 0}
.post__body .faq dd{margin:0 0 6px;font-size:13.5px;color:var(--ink-2);line-height:1.95;
  padding:14px 18px;background:#fafbfe;border:1px solid #eef2f8;border-top:0;border-radius:0 0 12px 12px}

/* 出典・注記 */
.post__body .sources{margin-top:clamp(24px,2.4vw,32px);padding:16px 20px;background:#fafbfe;
  border:1px solid var(--line);border-radius:12px}
.post__body .sources li{font-size:12px;color:var(--muted);line-height:1.9}
.post__body .note{margin-top:14px;font-size:12px;color:var(--muted);line-height:1.9}

/* 図版・作例 */
.post__body .body-fig{margin:clamp(22px,2.2vw,32px) 0}
.post__body .body-fig img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.post__body .example{margin:clamp(20px,2vw,28px) 0;padding:clamp(18px,1.8vw,24px);
  background:#fff;border:1.6px dashed #cfdcfa;border-radius:14px}
.post__body .example .lbl{display:inline-block;margin-bottom:10px;font-size:11.5px;font-weight:800;
  color:var(--blue);background:#eef3ff;border-radius:999px;padding:5px 13px}
.post__body .after{border-color:#bfe8d1;background:#f6fdf9}
.post__body .after .lbl{color:#127a52;background:#e4f7ed}

@media (max-width:760px){
  .post__body .cta-box .btn{width:100%}
  .post__body .steps li{padding-left:48px}
}

/* ヒーローの表示例に関する注記 */
.hero__disc{margin-top:10px;font-size:11.5px;line-height:1.8;color:rgba(255,255,255,.5)}

/* フッターの許可番号 */
.ftx__lic{margin-top:16px;font-size:11.5px;line-height:1.9;color:rgba(255,255,255,.62)}
.ftx__lic span{color:rgba(255,255,255,.45)}

@media (max-width:760px){
  .hero__disc{font-size:11px}
}

/* フッターのLINEカードが、他カラムの高さに引き伸ばされないようにする */
.ftx__top{align-items:start}
.ftx__line{align-self:start}