@charset "utf-8";
/* 採用「レンズ」ページ共通（属性別サンプル）— 稼ぎたい方へ／自分の時間が欲しい方へ
   設計書: docs/design-recruit-section-2026-09-09.md §7
   共有の page-sub.css / common.min.css は変更しない。上書きは .page-lens 配下で限定する。
   未確認の事実は数字を書かず .ln-slot（黄枠の空欄）で表す。空欄がそのままヒアリング項目になる。 */

.page-lens {
  --ln-navy: var(--color-main, #04225c);
  --ln-navy2: var(--color-bg6, #0b2a66);
  --ln-yellow: var(--color-bg9, #fad622);
  --ln-grey: #eef1f6;
  --sub-slope: 7rem;
}
@media (max-width: 767px) { .page-lens { --sub-slope: 4rem; } }
.page-lens .sub-main { background-color: #fff; }

/* ============================================================
   0. ヒーロー（静止画。スクラブなし・100svh より低い「入口」の高さ）
   ============================================================ */
.page-lens .ln-hero { min-height: 78svh; }
.page-lens .ln-hero__media { position: absolute; inset: 0; height: auto; overflow: hidden; }
.page-lens .ln-hero__media picture,
.page-lens .ln-hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
  transform: none; opacity: 1;
}
.page-lens .ln-hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(4,18,44,.74) 0%, rgba(4,18,44,.54) 24%, rgba(4,18,44,.18) 40%, rgba(4,18,44,0) 52%),
    linear-gradient(to top, rgba(4,18,44,.5) 0, rgba(4,18,44,0) 30%);
}
.page-lens .ln-hero__inner {
  position: absolute; inset: 0; z-index: 3; min-height: 78svh;
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  max-width: none; margin-inline: 0;
  padding: 13rem 8rem calc(var(--sub-slope) + 8rem) 23rem;
}
.page-lens .ln-hero__contents { max-width: 52rem; margin: 3rem 0 0; }
.page-lens .ln-hero__label,
.page-lens .ln-hero__label span { color: #fff; }
.page-lens .ln-hero__label { text-shadow: 0 .1rem 1.2rem rgba(0,0,0,.55); }
.page-lens .ln-hero__ja { margin-top: 2.2rem; }
.page-lens .ln-hero__ribbon { margin: 0 0 1.8rem; }
.page-lens .ln-hero__ribbon .st-slant {
  display: inline-block; background: #111; color: #fff;
  font-family: var(--font-gothic2); font-weight: 800;
  font-size: 1.6rem; letter-spacing: .06em; line-height: 1;
  padding: 1.1rem 1.8rem; transform: skewX(-8deg);
}
.page-lens .ln-hero__ribbon .st-slant > * { display: inline-block; transform: skewX(8deg); }
.page-lens .ln-hero__title {
  margin: 0; font-family: var(--sub-serif); font-weight: 700;
  font-size: clamp(2.8rem, 3.8vw, 5rem); line-height: 1.38; letter-spacing: .04em; color: #fff;
  text-shadow: 0 .2rem 2.4rem rgba(0,0,0,.45), 0 .1rem .6rem rgba(0,0,0,.28);
}
.page-lens .ln-hero__en { margin-top: 1.6rem; color: #fff; font-size: 1.3rem; letter-spacing: .3em; text-shadow: 0 .1rem 1.2rem rgba(0,0,0,.5); }
.page-lens .ln-hero__lead { margin-top: 2rem; color: #fff; font-weight: 500; max-width: 34em; font-size: 1.6rem; line-height: 2; text-shadow: 0 .1rem 1.4rem rgba(0,0,0,.5); }
.page-lens .ln-hero__crumb { margin-top: 2.6rem; }
.page-lens .ln-hero__crumb li, .page-lens .ln-hero__crumb a { color: #fff; text-shadow: 0 .1rem 1rem rgba(0,0,0,.55); }
.page-lens .ln-hero__cap {
  position: absolute; z-index: 4; right: 8rem; bottom: calc(var(--sub-slope) + 2.4rem);
  font-family: var(--sub-en); font-weight: 600; font-size: 1.1rem; letter-spacing: .32em;
  color: #fff; text-shadow: 0 .1rem 1rem rgba(0,0,0,.55); white-space: nowrap;
}

/* ============================================================
   歩き方ピル（全レンズ共通・先頭と末尾）
   ============================================================ */
.page-lens .ln-nav { background: var(--ln-grey); padding: 2.2rem 0; }
.page-lens .ln-nav__list { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 0; padding: 0; list-style: none; }
.page-lens .ln-nav__list a {
  display: inline-flex; align-items: center; gap: .6rem;
  background: #fff; color: var(--ln-navy); text-decoration: none;
  border-radius: 999px; padding: .9rem 1.8rem; font-size: 1.3rem; font-weight: 700;
  box-shadow: 0 .4rem 1.4rem rgba(4,34,92,.12); transition: transform .18s ease;
}
.page-lens .ln-nav__list a:hover { transform: translateY(-.2rem); }
.page-lens .ln-nav__list a:focus-visible { outline: .3rem solid var(--ln-yellow); outline-offset: .3rem; }
.page-lens .ln-nav__list a[aria-current="page"] { background: var(--ln-navy); color: #fff; }

/* ============================================================
   3つの不安（Q&A）
   ============================================================ */
.page-lens .ln-qa { padding-block: 10rem; }
.page-lens .ln-qa__head { margin-bottom: 4.4rem; }
.page-lens .ln-qa__list { display: grid; gap: 2.4rem; margin: 0; padding: 0; list-style: none; }
.page-lens .ln-qa__item { background: #fff; border: 1px solid #dfe4ec; border-radius: 1.2rem; padding: 3.2rem 3.6rem; }
.page-lens .ln-qa__q {
  display: flex; gap: 1.4rem; align-items: baseline; margin: 0 0 1.6rem;
  font-family: var(--font-gothic2); font-weight: 800; font-size: 2.2rem; line-height: 1.5; color: var(--ln-navy);
}
.page-lens .ln-qa__q::before {
  content: "Q"; flex: 0 0 auto; font-family: var(--sub-en); font-style: italic; font-size: 2.4rem;
  color: var(--ln-yellow); -webkit-text-stroke: .12rem var(--ln-navy);
}
.page-lens .ln-qa__a { margin: 0; font-size: 1.55rem; line-height: 2.05; }
.page-lens .ln-qa__a + .ln-qa__a { margin-top: 1.2em; }

/* 未確認の数字が入る枠（サンプル用）— 空欄がそのままヒアリング項目 */
.page-lens .ln-slot {
  display: inline-flex; flex-direction: column; gap: .3rem;
  min-width: 20rem; margin: .4rem .4rem .4rem 0; padding: 1rem 1.6rem;
  border: .2rem dashed var(--ln-yellow); border-radius: .8rem; background: #fffdf0;
  vertical-align: middle;
}
.page-lens .ln-slot b { font-family: var(--font-gothic2); font-weight: 800; font-size: 1.5rem; color: var(--ln-navy); line-height: 1.4; }
.page-lens .ln-slot small { font-size: 1.15rem; color: #7a6a20; letter-spacing: .02em; }
.page-lens .ln-slot--wide { display: flex; min-width: 0; }

.page-lens .ln-note-sample {
  margin-top: 3.6rem; padding: 2rem 2.4rem; border-radius: 1rem;
  background: #fffdf0; border: 1px solid #f0e3a8; font-size: 1.3rem; line-height: 1.95; color: #6b5c17;
}
.page-lens .ln-note-sample b { display: block; font-size: 1.4rem; color: var(--ln-navy); margin-bottom: .4rem; }

/* ============================================================
   事実カード（法令・確定事実だけを置く帯）
   ============================================================ */
.page-lens .ln-facts { background: var(--ln-navy2); color: #fff; padding-block: 9rem; }
.page-lens .ln-facts__head { margin-bottom: 3.6rem; }
.page-lens .ln-facts__head .st-sec__title { color: #fff; }
.page-lens .ln-facts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.page-lens .ln-fact { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: 1.2rem; padding: 2.8rem 2.4rem; }
.page-lens .ln-fact h3 { margin: 0 0 1rem; font-family: var(--font-gothic2); font-weight: 800; font-size: 1.7rem; line-height: 1.5; }
.page-lens .ln-fact p { margin: 0; font-size: 1.35rem; line-height: 1.95; color: rgba(255,255,255,.86); }
.page-lens .ln-fact cite { display: block; margin-top: 1.2rem; font-size: 1.1rem; font-style: normal; color: rgba(255,255,255,.6); }

/* ============================================================
   物語へのディープリンク
   ============================================================ */
.page-lens .ln-story { padding-block: 10rem; background: #fff; }
.page-lens .ln-story__head { margin-bottom: 3.6rem; }
.page-lens .ln-story__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.page-lens .ln-story__card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid #dfe4ec; border-radius: 1.2rem; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.page-lens .ln-story__card:hover { transform: translateY(-.4rem); box-shadow: 0 1.4rem 3.4rem rgba(4,34,92,.16); }
.page-lens .ln-story__card:focus-visible { outline: .3rem solid var(--ln-yellow); outline-offset: .3rem; }
.page-lens .ln-story__card img { width: 100%; height: 20rem; object-fit: cover; display: block; }
.page-lens .ln-story__body { padding: 2.2rem 2.4rem 2.6rem; }
.page-lens .ln-story__body b { display: block; font-family: var(--font-gothic2); font-weight: 800; font-size: 1.7rem; color: var(--ln-navy); margin-bottom: .8rem; }
.page-lens .ln-story__body span { font-size: 1.35rem; line-height: 1.9; }
.page-lens .ln-story__soon { display: inline-block; margin-top: 1.2rem; font-size: 1.1rem; padding: .3rem .9rem; border-radius: 999px; background: var(--ln-grey); color: #6b7280; }

/* ============================================================
   ENTRY（短い帯。要項は持たない）
   ============================================================ */
.page-lens .ln-entry { background: var(--ln-navy); color: #fff; padding-block: 9rem; text-align: center; }
.page-lens .ln-entry__title { font-family: var(--sub-serif); font-weight: 700; font-size: clamp(2.4rem, 3vw, 3.8rem); line-height: 1.5; letter-spacing: .04em; margin: 1.6rem 0 0; }
.page-lens .ln-entry__txt { margin-top: 1.8rem; font-size: 1.5rem; line-height: 2; }
.page-lens .ln-entry__tel {
  display: inline-flex; align-items: center; gap: 1.4rem; margin-top: 3.2rem;
  background: #fff; color: var(--ln-navy); text-decoration: none;
  border-radius: 999px; padding: 1.4rem 3rem 1.4rem 1.4rem;
  box-shadow: 0 1rem 2.8rem rgba(0,0,0,.28); transition: transform .18s ease;
}
.page-lens .ln-entry__tel:hover { transform: translateY(-.2rem); }
.page-lens .ln-entry__tel:focus-visible { outline: .3rem solid var(--ln-yellow); outline-offset: .3rem; }
.page-lens .ln-entry__tel-ic { width: 4rem; height: 4rem; border-radius: 50%; background: var(--ln-navy); color: #fff; display: grid; place-items: center; }
.page-lens .ln-entry__tel-ic svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-lens .ln-entry__tel-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; }
.page-lens .ln-entry__tel-txt b { font-family: var(--sub-en); font-style: normal; font-size: 2.8rem; font-weight: 800; letter-spacing: .02em; }
.page-lens .ln-entry__tel-txt small { font-size: 1.15rem; color: #5b6270; }
.page-lens .ln-entry__note { margin-top: 2.2rem; font-size: 1.25rem; line-height: 1.9; color: rgba(255,255,255,.78); }
.page-lens .ln-entry__req { margin-top: 2rem; font-size: 1.3rem; }
.page-lens .ln-entry__req a { color: var(--ln-yellow); }

/* ============================================================
   タブレット・SP
   ============================================================ */
@media (max-width: 1199px) {
  .page-lens .ln-hero__inner { padding-left: 5rem; padding-right: 5rem; }
  .page-lens .ln-hero__cap { right: 5rem; }
  .page-lens .ln-facts__grid, .page-lens .ln-story__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-aspect-ratio: 1/1), (max-width: 767px) {
  .page-lens .ln-hero { min-height: 72svh; }
  .page-lens .ln-hero__media::after {
    background:
      linear-gradient(to bottom, rgba(4,18,44,.55) 0, rgba(4,18,44,.15) 16svh, rgba(4,18,44,0) 30svh),
      linear-gradient(to top, rgba(4,18,44,.68) 0, rgba(4,18,44,.24) 26svh, rgba(4,18,44,0) 44svh);
  }
  .page-lens .ln-hero__inner { min-height: 72svh; padding: 10rem 0 calc(var(--sub-slope) + 13.2rem); flex-direction: column; align-items: center; justify-content: flex-end; }
  .page-lens .ln-hero__contents { margin: 0; padding-inline: 2.4rem; width: 100%; max-width: none; text-align: center; }
  .page-lens .ln-hero__ribbon { display: flex; justify-content: center; }
  .page-lens .ln-hero__title { font-size: clamp(2.2rem, 6.4vw, 3rem); line-height: 1.5; }
  .page-lens .ln-hero__lead, .page-lens .ln-hero__crumb, .page-lens .ln-hero__cap { display: none; }
  .page-lens .ln-hero__chara { display: none; }
}

@media (max-width: 767px) {
  .page-lens .ln-qa, .page-lens .ln-facts, .page-lens .ln-story, .page-lens .ln-entry { padding-block: 6.4rem; }
  .page-lens .ln-qa__item { padding: 2.4rem 2rem; }
  .page-lens .ln-qa__q { font-size: 1.8rem; }
  .page-lens .ln-facts__grid, .page-lens .ln-story__grid { grid-template-columns: 1fr; }
  .page-lens .ln-slot { min-width: 0; width: 100%; }
  .page-lens .ln-entry__tel { padding: 1.2rem 2.2rem 1.2rem 1.2rem; }
  .page-lens .ln-entry__tel-txt b { font-size: 2.2rem; }
  .page-lens .ln-story__card img { height: 17rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-lens .ln-nav__list a, .page-lens .ln-story__card, .page-lens .ln-entry__tel { transition: none; }
}

/* Editorial answers and a three-way workstyle comparison. */
.page-lens .ln-qa__list{display:block;margin-top:5rem}
.page-lens .ln-qa__item{position:relative;display:grid;grid-template-columns:9rem minmax(0,1fr);column-gap:3rem;padding:3.8rem 0;border:0;border-top:1px solid rgba(4,34,92,.22);border-radius:0;background:transparent;box-shadow:none}
.page-lens .ln-qa__number{grid-row:span 2;font-family:var(--sub-en);font-size:6.4rem;line-height:1;color:var(--ln-navy);font-style:italic;font-weight:800;opacity:.24}
.page-lens .ln-qa__q{font-size:2.6rem;line-height:1.6;margin:0}
.page-lens .ln-qa__q:before{display:none}
.page-lens .ln-qa__a{font-size:1.8rem;line-height:2;max-width:76rem;margin-top:1.4rem}
.page-lens .ln-workstyles{overflow:hidden}
.ln-workstyles__intro{font-size:1.7rem;line-height:1.9;margin-top:2rem}
.ln-workstyles__tabs{display:flex;margin-top:4.4rem;border-bottom:1px solid #ffffff60}
.ln-workstyles__tabs[hidden]{display:none}
.ln-workstyles__tabs button{flex:1;min-height:6.8rem;background:transparent;color:#fff;border:0;border-bottom:.4rem solid transparent;font-size:2.1rem;font-weight:800;cursor:pointer;transition:background .25s,color .25s}
.ln-workstyles__tabs button[aria-selected=true]{background:#fad622;color:#04225c;border-color:#fad622}
.ln-workstyles__tabs button:focus-visible{outline:3px solid #fff;outline-offset:4px}
.ln-shift{position:relative;min-height:41rem;padding:6rem 0;overflow:hidden;isolation:isolate}
.ln-shift[hidden]{display:none}
.ln-shift__en{position:absolute;right:-1rem;top:1rem;font-family:var(--sub-en);font-size:clamp(13rem,19vw,29rem);font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1px #ffffff24;pointer-events:none;z-index:-1}
.ln-shift__body{max-width:65rem;animation:shift-enter .4s ease both}
.ln-shift__label{font-family:var(--sub-en);font-size:1.4rem;letter-spacing:.12em;color:#fad622}
.ln-shift h3{font-family:var(--sub-serif);font-size:clamp(3.3rem,4vw,5.4rem);line-height:1.45;margin:1.5rem 0 2rem}
.ln-shift__body>p:not(.ln-shift__label){font-size:1.7rem;line-height:2}
.ln-shift__ask{border-top:1px solid #ffffff45;margin-top:2.4rem;padding-top:1.8rem}
.ln-workstyles__note{font-size:1.3rem;line-height:1.8;opacity:.8}
.ln-story__more{display:block;margin-top:1.4rem;font-weight:800;color:#04225c}
@keyframes shift-enter{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}
@media(max-width:767px){
 .page-lens .ln-qa__item{grid-template-columns:4.2rem minmax(0,1fr);column-gap:1.6rem;padding:2.8rem 0}
 .page-lens .ln-qa__number{font-size:3.8rem}
 .page-lens .ln-qa__q{font-size:2rem}
 .page-lens .ln-qa__a{font-size:1.6rem;grid-column:2;line-height:1.9}
 .ln-workstyles__tabs button{font-size:1.8rem;min-height:6rem}
 .ln-shift{padding:4rem 0;min-height:43rem}
 .ln-shift__en{top:2rem;font-size:12rem}
 .ln-shift__body>p:not(.ln-shift__label){font-size:1.6rem}
}
@media(prefers-reduced-motion:reduce){.ln-shift__body{animation:none}.ln-workstyles__tabs button{transition:none}}

/* ヒーロー直下の楔の色（page-sub.css の .st-page-head::after）。
   給与・収入／勤務時間・休日は、ヒーローの次が灰色の「歩き方」ナビ。
   既定の白のままだと斜面の下に白い三角が残る（殿指摘 2026-09-15）。 */
.page-lens .st-page-head { --head-next: var(--sub-gray); }