@charset "UTF-8";
/* ============================================================
   株式会社ネオシス｜再スタート応援LP
   design/final の3枚のデザインカンプを再現
   （HUD・見出し・番号バッジ・開閉アイコン・旗・羊皮紙などは
     img/ の素材をそのまま使用。カード枠・ボタンはCSS描画）
   ============================================================ */

/* ------------------------------------------------------------
   0. Design tokens
------------------------------------------------------------ */
:root{
  /* 色（design/final から抽出） */
  --navy-900:#001732;
  --navy-800:#001a3c;
  --navy-700:#022245;
  --navy-600:#002043;
  --navy-500:#0b3163;
  --navy-400:#143462;
  --navy-line:#0d2c57;

  --orange-700:#a33203;
  --orange-600:#bc3a01;
  --orange-500:#c93e01;
  --orange-450:#c74402;
  --orange-400:#e0560d;
  --orange-300:#f08a1f;
  --orange-200:#ffb547;

  --cream-100:#ffffff;
  --cream-200:#f8f6f1;
  --cream-300:#f5f4f0;
  --cream-400:#efedE9;
  --cream-500:#e6e2d8;

  --gold:#b39973;

  --ink:#0d2140;
  --ink-soft:#3d5471;
  --ink-mute:#6b7f96;

  /* フォント */
  --ff-ja:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Meiryo",sans-serif;
  --ff-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --ff-pixel:"Press Start 2P","DotGothic16",monospace;
  --ff-dot:"DotGothic16","Noto Sans JP",sans-serif;

  /* レイアウト */
  --wrap:1160px;
  --gutter:clamp(18px,4vw,40px);
}

/* ------------------------------------------------------------
   1. Reset / base
------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--ff-ja);
  font-weight:500;
  color:var(--ink);
  background:var(--cream-300);
  line-height:1.75;
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;border:0;}
h1,h2,h3,h4,p,dl,dd,dt,ul,ol,figure{margin:0;padding:0;}
ul,ol{list-style:none;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input,textarea,select{font:inherit;color:inherit;}
em{font-style:normal;}

.container{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* 視覚的に隠す（自動投稿対策のハニーポット等） */
.visually-hidden{
  position:absolute !important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ドット絵素材は補間なしで拡大（画像素材は基本これを適用） */
.hero__status,.hero__pixel,
.worry-card__figure img,
.flow3__icon,.point-card__icon,
.cta-band__pixel img,
.work-card__icon,
.quest__title,.quest-step__flag,
.support-chip img,.support__wizard,
.faq__adviser-img,.num-badge img,.faq-toggle img,
.requirement__title,.parchment dt img,
.company-table dt img,
.contact__title,.secure__icon{
  image-rendering:pixelated;
}

/* 出現アニメーション
   transform は装飾（skew / rotate / ずらし）で使うため、
   アニメーションには独立プロパティ translate を使って衝突を避ける */
[data-reveal]{
  opacity:0;
  translate:0 24px;
  transition:opacity .7s ease,translate .7s cubic-bezier(.22,.7,.3,1);
}
[data-reveal].is-in{opacity:1;translate:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1;translate:none;transition:none;}
}

/* ------------------------------------------------------------
   2. 共通パーツ
------------------------------------------------------------ */
.sec-title{
  font-size:clamp(21px,3.1vw,36px);
  font-weight:900;
  line-height:1.42;
  letter-spacing:.04em;
  text-align:center;
  color:var(--ink);
}
.sec-title--light{color:#fff;text-shadow:0 3px 0 rgba(0,10,26,.45);}
.sec-title--left{text-align:left;}

/* オレンジのきらめき */
.spark{
  display:inline-block;
  color:var(--orange-300);
  font-size:.6em;
  line-height:1;
  vertical-align:.22em;
  margin-inline:.5em;
  text-shadow:0 0 12px rgba(240,138,31,.75);
}

/* ボタン（ui-cta-frame-orange と同じ見た目をCSSで再現） */
.btn{
  --btn-top:#e2551c;
  --btn-mid:var(--orange-500);
  --btn-bottom:var(--orange-700);
  --btn-fg:#fff;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:1em;
  min-width:min(320px,100%);
  padding:.95em 1.3em .95em 1.6em;
  color:var(--btn-fg);
  font-weight:700;
  font-size:clamp(15px,1.35vw,19px);
  letter-spacing:.06em;
  line-height:1.2;
  background:linear-gradient(180deg,var(--btn-top) 0%,var(--btn-mid) 55%,var(--btn-bottom) 100%);
  border:3px solid var(--navy-900);
  border-radius:9px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.55),
    inset 0 4px 0 rgba(255,255,255,.22),
    inset 0 -4px 0 rgba(0,0,0,.2),
    0 5px 0 var(--navy-900);
  transition:transform .12s ease,box-shadow .12s ease,filter .2s ease;
}
.btn:hover{transform:translateY(2px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),inset 0 4px 0 rgba(255,255,255,.22),inset 0 -4px 0 rgba(0,0,0,.2),0 3px 0 var(--navy-900);filter:saturate(1.12);}
.btn:active{transform:translateY(5px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),0 0 0 var(--navy-900);}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.btn__text{flex:1 1 auto;text-align:center;}
/* 「＞」 */
.btn__arrow{
  flex:0 0 auto;
  width:.46em;
  height:.46em;
  border-top:3px solid currentColor;
  border-right:3px solid currentColor;
  transform:rotate(45deg);
  filter:drop-shadow(1px -1px 0 rgba(0,0,0,.25));
}
.btn--hero{min-width:min(330px,100%);margin-top:clamp(16px,2.2vw,28px);}
.btn--wide{min-width:min(420px,100%);font-size:clamp(17px,1.35vw,26px);padding:1.0em 1.4em 1.0em 1.7em;}
.btn--company{margin-top:clamp(18px,2.4vw,30px);min-width:min(330px,100%);}
.btn--submit{width:100%;font-size:clamp(18px,2vw,27px);padding:1em 1.3em;margin-top:clamp(12px,1.6vw,22px);}
.btn--ghost{
  --btn-fg:var(--orange-600);
  background:#fff;
  box-shadow:inset 0 0 0 2px rgba(0,23,50,.12),inset 0 -3px 0 rgba(0,0,0,.08),0 5px 0 var(--navy-900);
  min-width:min(280px,100%);
}
.btn--ghost:hover{background:#fffdf8;}

/* LINE（公式ブランドカラー #06C755）
   ※LINEロゴは公式素材をそのまま使う規定のため、自作アイコンは置かず
     ブランドカラー＋テキストのみで表現する */
.btn--line{
  --btn-top:#3ad97f;
  --btn-mid:#06c755;
  --btn-bottom:#04983f;
  --btn-fg:#fff;
}
/* 電話（サイトのRPGパレットに合わせたブルー） */
.btn--tel{
  --btn-top:#3f74c0;
  --btn-mid:#1d4d93;
  --btn-bottom:#0e2d5e;
  --btn-fg:#fff;
}
/* サブCTAは矢印を持たないので中央寄せにする */
.btn--line,
.btn--tel{
  justify-content:center;
  gap:.55em;
}
.btn--line .btn__text,
.btn--tel .btn__text{flex:0 1 auto;}

/* 主CTA（1段目）＋ LINE・電話（2段目）のまとまり */
.cta-set{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:clamp(8px,1vw,12px);
}
.cta-set .btn{margin-top:0;}
.cta-set__sub{
  display:flex;
  flex-wrap:nowrap;
  gap:clamp(8px,1vw,12px);
}
.cta-set__sub .btn{
  flex:1 1 0;
  min-width:0;
  padding-left:1.1em;
  padding-right:1.1em;
}
.cta-set--hero{
  align-items:flex-start;
  margin-top:clamp(16px,2.2vw,28px);
  width:min(330px,100%);
}
.cta-set--hero .btn--hero{width:100%;min-width:0;}
.cta-set--hero .cta-set__sub{width:100%;}

/* スプライトシートから1コマだけ表示する共通仕組み
   （ui-faq-number-badges / ui-faq-toggle-icons） */
.num-badge,
.faq-toggle{
  position:relative;
  flex:0 0 auto;
  overflow:hidden;
}
.num-badge img,
.faq-toggle img{
  position:absolute;
  max-width:none;
}
.num-badge{
  width:clamp(32px,3.5vw,48px);
  aspect-ratio:384 / 392;
}
.num-badge img{
  top:-37.24%;
  width:565.63%;
  height:184.69%;
  left:var(--nb-x,-23.44%);
}
.num-badge--1{--nb-x:-23.44%;}
.num-badge--2{--nb-x:-164.06%;}
.num-badge--3{--nb-x:-301.04%;}
.num-badge--4{--nb-x:-440.89%;}

.faq-toggle{
  width:clamp(20px,2.3vw,32px);
  aspect-ratio:439 / 448;
  align-self:center;
}
.faq-toggle img{
  top:-48.66%;
  width:404.10%;
  height:198.00%;
  left:-82.69%; /* ＋ */
}
.faq-item.is-open .faq-toggle img{left:-221.41%;} /* − */

/* ------------------------------------------------------------
   2.5 ハンバーガーメニュー（ページ内リンク）
------------------------------------------------------------ */
/* メニュー展開中は背面のスクロールを止める */
html.is-nav-open,
html.is-nav-open body{overflow:hidden;}

/* トグルボタン：ドット風のプレート */
.nav-toggle{
  position:fixed;
  z-index:90;
  top:clamp(10px,1.4vw,20px);
  right:clamp(10px,1.4vw,20px);
  display:grid;
  justify-items:center;
  align-content:center;
  width:clamp(52px,4.6vw,64px);
  height:clamp(52px,4.6vw,64px);
  background:linear-gradient(180deg,#0b3163 0%,#021b3a 60%,#010f22 100%);
  border:3px solid #fff;
  border-radius:9px;
  box-shadow:0 0 0 3px var(--navy-900),0 5px 0 rgba(0,10,26,.5);
  transition:filter .2s ease;
}
.nav-toggle:hover{filter:brightness(1.15);}
.nav-toggle:focus-visible{outline:3px solid var(--orange-300);outline-offset:4px;}
.nav-toggle__bars{
  display:grid;
  gap:5px;
  width:clamp(22px,1.9vw,26px);
}
.nav-toggle__bars i{
  display:block;
  height:4px;
  background:var(--orange-300);
  border-radius:1px;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .2s ease;
}
.nav-toggle__label{
  margin-top:5px;
  font-family:var(--ff-pixel);
  font-size:clamp(6px,.55vw,7px);
  line-height:1;
  letter-spacing:.04em;
  color:#fff;
}
.nav-toggle__label::after{content:"MENU";}
/* 開いているときは × に */
.nav-toggle.is-open .nav-toggle__bars i:nth-child(1){transform:translateY(9px) rotate(45deg);}
.nav-toggle.is-open .nav-toggle__bars i:nth-child(2){opacity:0;}
.nav-toggle.is-open .nav-toggle__bars i:nth-child(3){transform:translateY(-9px) rotate(-45deg);}
.nav-toggle.is-open .nav-toggle__label::after{content:"CLOSE";}

/* 全画面オーバーレイ */
.gnav{
  position:fixed;
  inset:0;
  z-index:85;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(76px,8vw,104px) var(--gutter) clamp(28px,4vw,48px);
  background:var(--navy-900) url("../img/backgrounds/bg-worries-navy.png") no-repeat center/cover;
  overflow-y:auto;
  overscroll-behavior:contain;
  /* visibility ではなく opacity + pointer-events + inert で閉じる。
     閉じている間も要素はレイアウト上に存在するため、開いた直後に
     フォーカス移動が確実に効く（visibility:hidden だと focus() が無効になる） */
  opacity:0;
  pointer-events:none;
  transition:opacity .32s ease;
  image-rendering:pixelated;
}
.gnav.is-open{opacity:1;pointer-events:auto;}
/* inert 非対応ブラウザ向けの保険 */
.gnav[inert]{pointer-events:none;}
.gnav::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("../img/ui/deco-sparkles.png") repeat center/clamp(200px,24vw,320px) auto;
  opacity:.16;
  pointer-events:none;
}
/* 収まるときは上下中央、あふれるときは上端から（margin:auto の性質を利用） */
.gnav__inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:840px;
  margin-block:auto;
  image-rendering:auto;
  transform:translateY(18px);
  transition:transform .42s cubic-bezier(.2,.8,.3,1);
}
.gnav__inner:focus{outline:0;}
.gnav.is-open .gnav__inner{transform:none;}

.gnav__logo{
  line-height:1.2;
  padding-bottom:clamp(12px,1.6vw,20px);
  border-bottom:3px solid rgba(255,255,255,.18);
}
.gnav__logo-ja{
  display:block;
  font-size:clamp(16px,1.7vw,23px);
  font-weight:900;
  color:#fff;
}
.gnav__logo-en{
  display:block;
  font-size:clamp(10px,1vw,13px);
  font-weight:700;
  letter-spacing:.12em;
  color:var(--orange-300);
}

.gnav__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(20px,3vw,52px);
  margin-top:clamp(14px,2vw,26px);
}
.gnav__list a{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(9px,1.2vw,16px);
  padding:clamp(11px,1.25vw,15px) 2px;
  border-bottom:2px dotted rgba(255,255,255,.26);
  color:#fff;
  font-size:clamp(12.5px,1.3vw,16px);
  font-weight:700;
  line-height:1.45;
  transition:color .2s ease,border-color .2s ease,padding-left .2s ease;
}
.gnav__list a:hover,
.gnav__list a:focus-visible{
  color:var(--orange-200);
  border-color:rgba(255,181,71,.6);
  padding-left:clamp(6px,.8vw,12px);
  outline:0;
}
.gnav__list a:focus-visible{outline:3px solid var(--orange-300);outline-offset:2px;}
.gnav__num{
  font-family:var(--ff-pixel);
  font-size:.8em;
  line-height:1;
  color:var(--orange-300);
}
.gnav__text{min-width:0;}
.gnav__arrow{
  width:.42em;
  height:.42em;
  border-top:3px solid currentColor;
  border-right:3px solid currentColor;
  transform:rotate(45deg);
  opacity:.7;
}

.gnav__foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(12px,2vw,28px);
  margin-top:clamp(20px,2.8vw,36px);
}
.gnav__btns{
  flex:1 1 auto;
  min-width:0;
  max-width:360px;
  margin-bottom:clamp(2px,.6vw,8px);
}
.gnav__cta{
  min-width:0;
}
.gnav__pixel{
  flex:0 0 auto;
  width:clamp(74px,7.4vw,112px);
  image-rendering:pixelated;
}

/* メニュー展開中は追従CTAを隠す */
html.is-nav-open .sp-cta{opacity:0;pointer-events:none;}

@media (max-width:767px){
  .gnav__list{grid-template-columns:1fr;}
  .gnav__list a{padding-block:11px;font-size:13.5px;}
  .gnav__foot{align-items:center;gap:10px;}
  /* .btn{min-width:100%} に打ち勝たせる */
  .gnav__foot .gnav__cta{flex:1 1 auto;min-width:0;margin-bottom:0;}
  .gnav__pixel{width:58px;}
}
@media (prefers-reduced-motion:reduce){
  .nav-toggle,.gnav,.gnav__inner,.nav-toggle__bars i{transition:none;}
  .gnav__inner{transform:none;}
}

/* ------------------------------------------------------------
   3. HERO
------------------------------------------------------------ */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--cream-300);
}
.hero__bg{
  position:absolute;
  inset:0;
  background:url("../img/backgrounds/bg-hero-island.png") no-repeat center/cover;
  image-rendering:pixelated;
}
.hero__inner{
  position:relative;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:clamp(22px,3vw,34px) var(--gutter) 0;
  min-height:clamp(520px,45.5vw,700px);
}

/* ロゴ */
.logo{position:relative;z-index:5;line-height:1.15;}
.logo__ja{
  display:block;
  font-size:clamp(15px,1.55vw,21px);
  font-weight:900;
  color:var(--ink);
}
.logo__en{
  display:block;
  font-size:clamp(10px,1vw,13px);
  font-weight:700;
  letter-spacing:.12em;
  color:var(--ink-soft);
}

/* ステータスHUD（画像素材） */
.hero__status{
  position:absolute;
  z-index:6;
  top:clamp(12px,1.8vw,24px);
  right:calc(var(--gutter) - clamp(2px,.5vw,8px));
  width:clamp(210px,25vw,320px);
  filter:drop-shadow(0 6px 16px rgba(0,11,25,.4));
}

/* コピー */
.hero__copy{position:relative;z-index:5;padding-top:clamp(14px,2.2vw,30px);max-width:min(500px,45%);}
.hero__title{
  font-size:clamp(34px,5.4vw,66px);
  font-weight:900;
  line-height:1.15;
  letter-spacing:.01em;
  color:var(--ink);
}
.hero__title span{display:block;}
.hero__title .is-orange{color:var(--orange-500);}
.hero__lead{
  margin-top:clamp(12px,1.7vw,22px);
  font-size:clamp(13px,1.35vw,18px);
  font-weight:700;
  color:var(--ink);
}

/* 人物・ドット絵 */
.hero__worker{
  position:absolute;
  z-index:4;
  left:33%;
  bottom:0;
  height:92%;
  width:auto;
  max-width:none;
  filter:drop-shadow(0 10px 26px rgba(0,20,50,.3));
  pointer-events:none;
}
.hero__pixel{
  position:absolute;
  z-index:4;
  right:clamp(18px,4vw,60px);
  bottom:clamp(6px,1.4vw,20px);
  width:clamp(52px,6.6vw,92px);
  pointer-events:none;
}

/* ------------------------------------------------------------
   4. 悩み（WORRIES）
------------------------------------------------------------ */
.worries{
  position:relative;
  padding:clamp(40px,5vw,64px) 0 clamp(44px,5.4vw,70px);
  background:var(--navy-600) url("../img/backgrounds/bg-worries-navy.png") no-repeat center/cover;
  border-top:4px solid var(--navy-900);
  border-bottom:4px solid var(--navy-900);
  image-rendering:pixelated;
}
.worries > .container{image-rendering:auto;}
.worries__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.37fr);
  gap:clamp(16px,2.2vw,30px);
  align-items:stretch;
  margin-top:clamp(24px,3.2vw,44px);
}
.worry-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,20px);
}

/* 悩みカード（ui-card-frame-cream と同じ見た目をCSSで再現） */
.worry-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(14px,1.6vw,22px) clamp(8px,1.1vw,16px) clamp(8px,1vw,14px);
  background:#fcf9f3;
  border:4px solid var(--navy-line);
  border-radius:8px;
  box-shadow:
    inset 0 0 0 3px #fcf9f3,
    inset 0 0 0 5px var(--gold),
    0 6px 0 rgba(0,10,26,.55);
}
.worry-card__text{
  font-size:clamp(12px,1.3vw,17px);
  font-weight:700;
  line-height:1.55;
  text-align:center;
  color:var(--ink);
}
/* 下向き三角 */
.worry-card__caret{
  display:block;
  width:0;height:0;
  margin:.5em auto .2em;
  border-left:clamp(4px,.45vw,6px) solid transparent;
  border-right:clamp(4px,.45vw,6px) solid transparent;
  border-top:clamp(5px,.55vw,8px) solid var(--ink);
}
.worry-card__figure{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  margin-top:auto;
}
.worry-card__figure img{
  width:clamp(104px,13.2vw,186px);
  max-width:none;
}

/* CONTINUE? パネル（ui-dialogue-frame-navy 相当） */
.continue-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(16px,2vw,28px) clamp(14px,1.8vw,26px);
  background:radial-gradient(120% 130% at 50% 20%,#062246 0%,#01112400 70%),#011124;
  border:3px solid #f7f7f6;
  border-radius:8px;
  box-shadow:
    inset 0 0 0 3px #011124,
    inset 0 0 30px rgba(0,0,0,.5),
    0 6px 0 rgba(0,10,26,.5);
}
.continue-panel__title{
  font-family:var(--ff-pixel);
  font-size:clamp(14px,1.8vw,25px);
  line-height:1.1;
  color:#fff;
  text-shadow:3px 3px 0 rgba(0,0,0,.55);
}
.continue-panel__text{
  margin-top:clamp(10px,1.3vw,18px);
  font-size:clamp(12px,1.25vw,16px);
  font-weight:700;
  line-height:1.7;
  color:#fff;
}
.continue-panel__choices{
  margin-top:clamp(12px,1.6vw,22px);
  font-family:var(--ff-pixel);
  font-size:clamp(13px,1.6vw,22px);
  line-height:1.9;
}
/* YES / NO の頭を揃えるため、どちらもカーソル幅ぶんの列を持つグリッドにする */
.continue-panel__yes,
.continue-panel__no{
  display:grid;
  grid-template-columns:1.5em auto;
  align-items:baseline;
  justify-content:start;
  text-shadow:2px 2px 0 rgba(0,0,0,.5);
}
.continue-panel__no::before{content:"";}
.continue-panel__yes{
  color:var(--orange-200);
  transition:filter .2s ease,transform .2s ease;
}
.continue-panel__cursor{
  animation:blink 1.1s steps(1,end) infinite;
}
.continue-panel__yes:hover{filter:brightness(1.2);transform:translateX(3px);}
.continue-panel__no{color:#96a9c0;}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

/* ------------------------------------------------------------
   5. サービス紹介 + 動画（ABOUT）
------------------------------------------------------------ */
.about{
  padding:clamp(44px,5.4vw,72px) 0 clamp(46px,5.6vw,76px);
  background:var(--cream-400) url("../img/backgrounds/bg-about-clouds.png") no-repeat center/cover;
}
.about__inner{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(22px,3.4vw,52px);
  align-items:start;
}
.about__text{
  margin-top:clamp(14px,2vw,26px);
  font-size:clamp(12px,1.25vw,16px);
  line-height:1.95;
  color:var(--ink);
}

/* 3ステップ */
.flow3{
  display:flex;
  align-items:flex-start;
  gap:clamp(4px,.9vw,14px);
  margin-top:clamp(20px,2.8vw,38px);
}
.flow3__item{flex:1 1 0;min-width:0;text-align:center;}
.flow3__icon{
  width:clamp(46px,5.6vw,80px);
  height:clamp(46px,5.6vw,80px);
  object-fit:contain;
  margin:0 auto clamp(6px,.8vw,10px);
}
.flow3__label{
  display:block;
  font-size:clamp(10px,1.05vw,14px);
  font-weight:700;
  line-height:1.5;
  color:var(--ink);
}
.flow3__arrow{
  flex:0 0 auto;
  align-self:center;
  width:clamp(14px,1.7vw,24px);
  height:clamp(14px,1.7vw,24px);
  margin-top:clamp(-16px,-1.6vw,-8px);
  background:var(--navy-500);
  clip-path:polygon(0 28%,55% 28%,55% 4%,100% 50%,55% 96%,55% 72%,0 72%);
}

/* 動画
   .movie__embed の中身は YouTube 発行の埋め込みタグに丸ごと差し替え可能。
   貼り付けた iframe の width/height/style 属性は下の指定で上書きされる。 */
.movie__frame{
  position:relative;
  border:4px solid var(--navy-line);
  border-radius:4px;
  box-shadow:0 8px 0 rgba(0,20,50,.18),0 16px 34px rgba(0,20,50,.16);
  overflow:hidden;
  background:#0b0b0d;
}
.movie__embed{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
}
.movie__embed > iframe,
.movie__embed > object,
.movie__embed > embed,
.movie__embed > video{
  position:absolute !important;
  inset:0;
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none;
  border:0;
}

/* ------------------------------------------------------------
   6. 4つのポイント（POINTS）
------------------------------------------------------------ */
.points{
  position:relative;
  padding:clamp(40px,4.8vw,64px) 0 clamp(44px,5.2vw,70px);
  background:var(--navy-700) url("../img/backgrounds/bg-support-points-map.png") no-repeat center/cover;
  border-top:4px solid var(--navy-900);
  image-rendering:pixelated;
}
/* デザインの濃紺トーンに寄せ、見出し・カードの可読性を確保する */
.points::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(1,17,38,.88) 0%,
    rgba(1,20,44,.62) 24%,
    rgba(1,22,48,.5) 60%,
    rgba(1,20,44,.6) 100%);
  pointer-events:none;
}
.points > .container{position:relative;image-rendering:auto;}
.points__title em{
  color:var(--orange-300);
  font-size:1.55em;
  line-height:1;
  vertical-align:-.06em;
  padding-inline:.06em;
}
.point-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(46px,5.4vw,74px) clamp(28px,5vw,88px);
  margin-top:clamp(40px,4.6vw,62px);
}
.point-card{
  position:relative;
  width:100%;
  max-width:clamp(280px,34vw,410px);
  margin-inline:auto;
  padding:clamp(30px,3.4vw,44px) clamp(16px,2vw,28px) clamp(20px,2.4vw,32px);
  text-align:center;
  background:#fcf9f3;
  border:4px solid var(--navy-line);
  border-radius:clamp(14px,2vw,26px);
  box-shadow:
    inset 0 0 0 3px #fcf9f3,
    inset 0 0 0 5px var(--gold),
    0 8px 0 rgba(0,10,26,.5),
    0 14px 30px rgba(0,10,26,.35);
}
.point-card:nth-child(2){transform:translateY(clamp(-16px,-1.6vw,0px));}
.point-card:nth-child(4){transform:translateY(clamp(-10px,-1vw,0px));}
/* 番号バッジ（リボン型に無理に整形せず、素直なプレートにする） */
.point-card__ribbon{
  position:absolute;
  top:clamp(-17px,-1.9vw,-12px);
  left:50%;
  transform:translateX(-50%);
  min-width:clamp(58px,6.6vw,88px);
  padding:.4em .8em;
  font-family:var(--ff-pixel);
  font-size:clamp(11px,1.25vw,17px);
  line-height:1.2;
  text-align:center;
  color:var(--ink);
  background:var(--cream-200);
  border:3px solid var(--navy-line);
  border-radius:6px;
  box-shadow:inset 0 0 0 2px var(--cream-200),inset 0 0 0 3px var(--gold),0 4px 0 rgba(0,10,26,.45);
}
.point-card__icon{
  width:clamp(44px,5.2vw,74px);
  height:clamp(44px,5.2vw,74px);
  object-fit:contain;
  margin:clamp(4px,.6vw,8px) auto clamp(8px,1vw,14px);
}
.point-card__title{
  font-size:clamp(13px,1.5vw,20px);
  font-weight:900;
  line-height:1.4;
  color:var(--ink);
}
.point-card__text{
  margin-top:clamp(6px,.9vw,12px);
  font-size:clamp(11px,1.1vw,14px);
  line-height:1.7;
  color:var(--ink-soft);
  text-wrap:balance;
}

/* ------------------------------------------------------------
   7. CTA バナー
------------------------------------------------------------ */
.cta-band{
  position:relative;
  padding:clamp(14px,1.8vw,24px) 0;
  background:linear-gradient(180deg,var(--orange-400) 0%,var(--orange-500) 48%,var(--orange-700) 100%);
  border-top:4px solid var(--navy-900);
  border-bottom:4px solid var(--navy-900);
  overflow:hidden;
}
/* きらめきを帯全体にタイル状に散らす */
.cta-band::before{
  content:"";
  position:absolute;inset:0;
  background:url("../img/ui/deco-sparkles.png") repeat center/clamp(190px,22vw,300px) auto;
  opacity:.4;
  image-rendering:pixelated;
  pointer-events:none;
}
.cta-band--dark::before{opacity:.5;}
.cta-band__inner{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:clamp(12px,2.2vw,32px);
}
.cta-band__inner--center{justify-content:center;}
.cta-band__body{
  flex:0 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px,1.4vw,18px);
}
/* 主CTA＋LINE・電話の並び（入りきらない幅では帯の中で改行させる） */
.cta-band__btns{
  flex:0 1 auto;
  min-width:0;
  width:min(390px,100%);
}
.cta-band__btns .btn{min-width:0;}
.cta-band__text{
  font-size:clamp(15px,1.9vw,26px);
  font-weight:900;
  line-height:1.4;
  color:#fff;
  text-shadow:0 3px 0 rgba(0,10,26,.4);
  text-align:center;
}
.cta-band__text--lg{font-size:clamp(17px,2.2vw,30px);}
/* キャラクターは上半身だけ見せる */
.cta-band__pixel{
  position:relative;
  flex:0 0 auto;
  display:block;
  width:clamp(50px,6vw,88px);
  aspect-ratio:1 / 1.05;
  overflow:hidden;
}
.cta-band__pixel img{
  position:absolute;
  top:0;left:50%;
  width:118%;
  max-width:none;
  transform:translateX(-50%);
}
.cta-band__pixel--lg{width:clamp(60px,7.4vw,112px);aspect-ratio:1 / 1.28;}

.cta-band--dark{
  padding:clamp(22px,3vw,40px) 0;
  background:linear-gradient(180deg,#03203f 0%,var(--navy-900) 70%,#000d1e 100%);
}

/* ------------------------------------------------------------
   8. 製造のお仕事例（WORKS）
------------------------------------------------------------ */
.works{
  position:relative;
  padding:clamp(40px,5vw,66px) 0 clamp(44px,5.4vw,72px);
  background:var(--cream-300) url("../img/backgrounds/bg-about-clouds.png") no-repeat center/cover;
  border-top:4px solid var(--navy-900);
}
.works__inner{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(20px,3vw,44px);
  align-items:start;
}
.works__eyebrow{
  display:flex;
  align-items:center;
  gap:.35em;
  font-size:clamp(11px,1.15vw,15px);
  font-weight:700;
  color:var(--orange-500);
  letter-spacing:.06em;
}
.works__title{
  margin-top:clamp(6px,.9vw,12px);
  font-size:clamp(32px,4.6vw,58px);
  font-weight:900;
  line-height:1.14;
  color:var(--ink);
}
.works__lead{
  margin-top:clamp(12px,1.8vw,24px);
  font-size:clamp(12px,1.2vw,16px);
  font-weight:700;
  line-height:1.8;
  color:var(--ink);
}
.work-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.4vw,20px);
}
.work-card{
  position:relative;
  overflow:hidden;
  background:var(--navy-line);
  border:4px solid var(--navy-line);
  border-radius:4px;
  box-shadow:0 6px 0 rgba(0,20,50,.2);
  transform:skewX(-4deg);
}
.work-card > *{transform:skewX(4deg);}
.work-card__photo{
  width:116%;
  max-width:none;   /* img{max-width:100%} に打ち勝たせる（斜めカットのはみ出し分） */
  margin-left:-8%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:center 35%;
}
.work-card__icon{
  position:absolute;
  left:clamp(8px,1.2vw,16px);
  bottom:clamp(8px,1.2vw,16px);
  width:clamp(36px,4.2vw,60px);
  height:clamp(36px,4.2vw,60px);
  object-fit:contain;
  padding:clamp(3px,.4vw,6px);
  background:rgba(252,249,243,.94);
  border:3px solid var(--navy-line);
  border-radius:4px;
}
.work-card__label{
  position:absolute;
  right:0;
  bottom:clamp(10px,1.5vw,20px);
  padding:.42em clamp(12px,1.5vw,22px) .42em clamp(16px,2vw,28px);
  font-size:clamp(13px,1.5vw,20px);
  font-weight:900;
  color:#fff;
  letter-spacing:.03em;
  background:var(--orange-500);
  border:3px solid var(--navy-900);
  border-right:0;
  box-shadow:0 4px 0 rgba(0,10,26,.4);
}
.work-card--wide{grid-column:1 / -1;}
.work-card--wide .work-card__photo{aspect-ratio:24/7;}

/* ------------------------------------------------------------
   9. JOB START QUEST（FLOW）
------------------------------------------------------------ */
.quest{
  position:relative;
  padding:clamp(34px,4.2vw,56px) 0 clamp(40px,5vw,66px);
  background:var(--navy-900) url("../img/backgrounds/bg-job-start-quest.png") no-repeat center/cover;
  border-top:4px solid var(--navy-900);
  image-rendering:pixelated;
}
.quest__head{position:relative;z-index:3;image-rendering:auto;}
/* 背景マップが明るいため、見出しはダークパネルの上に載せて可読性を確保する */
.quest__headline{
  display:inline-block;
  max-width:min(480px,100%);
  padding:clamp(14px,1.6vw,20px) clamp(16px,2vw,28px) clamp(14px,1.8vw,22px);
  background:rgba(2,18,40,.76);
  border:3px solid rgba(255,255,255,.32);
  border-radius:10px;
  box-shadow:inset 0 0 0 2px rgba(2,18,40,.9),0 5px 0 rgba(0,10,26,.4);
  backdrop-filter:blur(2px);
}
.quest__title{
  width:min(400px,100%);
  filter:drop-shadow(3px 3px 0 rgba(0,0,0,.6));
}
.quest__sub{
  /* 見出し画像の透明余白を詰める */
  margin-top:clamp(-34px,-2.5vw,-9px);
  font-size:clamp(14px,1.65vw,23px);
  font-weight:900;
  color:var(--orange-300);
  text-shadow:0 2px 0 rgba(0,0,0,.7);
}
.quest__lead{
  margin-top:clamp(6px,.9vw,12px);
  font-size:clamp(11px,1.15vw,15px);
  line-height:1.8;
  color:#eaf1fb;
  text-wrap:balance;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.quest__mark{
  position:relative;
  z-index:3;
  display:inline-block;
  padding:.4em .7em .45em;
  font-family:var(--ff-pixel);
  line-height:1.3;
  background:rgba(2,18,40,.76);
  border:3px solid rgba(255,255,255,.34);
  border-radius:7px;
  box-shadow:0 3px 0 rgba(0,10,26,.4);
}
.quest__mark--start{
  margin:clamp(12px,1.6vw,20px) 0 0 var(--gutter);
  font-size:clamp(10px,1.25vw,17px);
  color:#fff;
  text-shadow:2px 2px 0 rgba(0,0,0,.7);
}
.quest__mark--goal{
  margin:clamp(6px,1vw,12px) 0 0 clamp(14px,2vw,28px);
  font-size:clamp(12px,1.55vw,22px);
  color:var(--orange-200);
  text-align:center;
  text-shadow:2px 2px 0 rgba(0,0,0,.7),0 0 18px rgba(255,181,71,.7);
}

/* ステップ（狭い画面：カード積み） */
.quest-steps{
  position:relative;
  z-index:3;
  width:100%;
  max-width:var(--wrap);
  margin:clamp(18px,2.6vw,34px) auto 0;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);
}
.quest-step{
  position:relative;
  padding-left:clamp(42px,4.8vw,58px);
}
.quest-step__flag{
  position:absolute;
  top:clamp(4px,.6vw,10px);
  left:0;
  width:clamp(30px,3.4vw,42px);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.55));
}
/* テキストの下に枠を敷いて視認性を確保する */
.quest-step__body{
  padding:clamp(9px,1.1vw,14px) clamp(11px,1.3vw,17px) clamp(10px,1.2vw,15px);
  background:rgba(2,18,40,.8);
  border:3px solid rgba(255,255,255,.34);
  border-radius:8px;
  box-shadow:inset 0 0 0 2px rgba(2,18,40,.9),0 4px 0 rgba(0,10,26,.4);
}
.quest-step__title{
  display:flex;
  align-items:baseline;
  gap:.35em;
  font-size:clamp(13px,1.45vw,20px);
  font-weight:900;
  color:#fff;
  text-shadow:2px 2px 0 rgba(0,0,0,.7);
}
.quest-step__num{
  font-family:var(--ff-pixel);
  font-size:1.1em;
  color:var(--orange-200);
  text-shadow:2px 2px 0 rgba(0,0,0,.7);
}
.quest-step__text{
  margin-top:.35em;
  font-size:clamp(10px,1vw,13px);
  line-height:1.65;
  color:#dbe5f2;
  text-shadow:1px 1px 0 rgba(0,0,0,.75);
}

/* ------------------------------------------------------------
   10. RESTART STORIES
------------------------------------------------------------ */
.stories{
  position:relative;
  padding:clamp(38px,4.6vw,62px) 0 clamp(42px,5.2vw,72px);
  background:var(--orange-450) url("../img/backgrounds/bg-restart-stories.png") no-repeat left center/cover;
  border-top:4px solid var(--navy-900);
  image-rendering:pixelated;
}
.stories__inner{
  position:relative;
  image-rendering:auto;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-left:clamp(80px,17vw,220px);
  padding-right:var(--gutter);
}
.stories__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(12px,2vw,30px);
}
.stories__slash{margin-right:.2em;font-weight:700;}
.stories__lead{
  font-size:clamp(11px,1.15vw,15px);
  font-weight:700;
  line-height:1.7;
  color:#ffe9d8;
  text-align:right;
}
.story-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.8vw,28px);
  margin-top:clamp(22px,3vw,42px);
}
/* ui-story-card-frame と同じ「少し傾いた紙」の見え方をCSSで再現 */
.story-card{
  position:relative;
  padding:clamp(8px,1vw,14px) clamp(8px,1vw,14px) clamp(14px,1.8vw,24px);
  background:#fbf7ef;
  border:1px solid rgba(0,23,50,.12);
  border-radius:3px;
  box-shadow:
    inset 0 0 0 4px #fbf7ef,
    inset 0 0 0 5px rgba(210,150,90,.5),
    0 8px 0 rgba(80,26,2,.26),
    0 14px 26px rgba(60,18,0,.22);
  transform:rotate(-1.2deg);
}
.story-card:nth-child(2){transform:rotate(.9deg);}
.story-card:nth-child(3){transform:rotate(-.4deg);}
.story-card__photo{
  overflow:hidden;
  border:2px solid rgba(0,23,50,.14);
}
.story-card__photo img{
  width:100%;
  aspect-ratio:5/4;
  object-fit:cover;
  object-position:center 30%;
}
.story-card__title{
  margin-top:clamp(10px,1.4vw,18px);
  font-size:clamp(14px,1.6vw,22px);
  font-weight:900;
  line-height:1.35;
  color:var(--orange-500);
}
.story-card__text{
  margin-top:clamp(6px,.9vw,12px);
  font-size:clamp(10px,1.05vw,14px);
  line-height:1.7;
  color:var(--ink);
  text-wrap:balance;
}

/* ------------------------------------------------------------
   11. ひとりで戦わなくていい。（SUPPORT）
------------------------------------------------------------ */
.support{
  position:relative;
  padding:clamp(48px,6.4vw,88px) 0 clamp(52px,6.8vw,94px);
  background:#a8d4ea url("../img/backgrounds/bg-support-sky.png") no-repeat center 64%/cover;
  border-top:4px solid var(--navy-900);
  image-rendering:pixelated;
  overflow:hidden;
}
.support__inner{
  position:relative;
  image-rendering:auto;
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(20px,3vw,44px);
  align-items:center;
}
.support__copy{align-self:start;padding-top:clamp(4px,1vw,14px);}
.support__copy .sec-title{
  font-size:clamp(26px,3.9vw,50px);
  text-shadow:0 2px 0 rgba(255,255,255,.55);
}
.support__lead{
  margin-top:clamp(14px,2vw,26px);
  font-size:clamp(11px,1.15vw,15px);
  font-weight:700;
  line-height:1.75;
  color:var(--ink);
  text-wrap:balance;
  text-shadow:0 0 10px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.95),0 1px 0 rgba(255,255,255,.9);
}
.support-menu{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.3vw,18px) clamp(10px,1.4vw,22px);
  padding-right:clamp(56px,11vw,180px);
}
/* 項目は必ず1行。高さも自動的に揃う */
.support-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(5px,.8vw,10px);
  min-height:clamp(38px,3.6vw,54px);
  padding:clamp(6px,.7vw,10px) clamp(10px,1.2vw,18px);
  background:rgba(255,255,255,.97);
  border:3px solid var(--navy-line);
  border-radius:999px;
  box-shadow:0 4px 0 rgba(0,23,50,.28);
  font-size:clamp(11px,1.15vw,16px);
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  color:var(--ink);
}
/* アイコン素材は縦長・横長が混在するため、正方形の枠に収めて高さを揃える */
.support-chip img{
  flex:0 0 auto;
  width:clamp(19px,2.1vw,29px);
  height:clamp(19px,2.1vw,29px);
  object-fit:contain;
}
.support-chip span{flex:0 0 auto;}
.support-chip--a{transform:translateX(clamp(14px,3vw,46px));}
.support-chip--b{transform:translateX(clamp(26px,5vw,80px));}
.support-chip--c{transform:translateX(clamp(-8px,-1vw,0px));}
.support-chip--d{transform:translateX(clamp(6px,1.4vw,22px));}
.support-chip--e{transform:translateX(clamp(-4px,-.5vw,0px));}
.support-chip--f{transform:translateX(clamp(2px,.8vw,12px));}
.support__wizard{
  position:absolute;
  right:0;
  bottom:clamp(-22px,-2.2vw,-8px);
  width:clamp(96px,12vw,190px);
  filter:drop-shadow(0 8px 18px rgba(0,30,60,.3));
  pointer-events:none;
}

/* ------------------------------------------------------------
   12. FAQ
------------------------------------------------------------ */
.faq{
  position:relative;
  padding:clamp(38px,4.6vw,60px) 0 clamp(42px,5vw,68px);
  background:#c9d5df url("../img/backgrounds/bg-faq-sky.png") no-repeat center/cover;
  border-top:4px solid var(--navy-900);
  image-rendering:pixelated;
}
.faq__inner{
  position:relative;
  image-rendering:auto;
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(18px,2.6vw,40px);
  align-items:start;
}
.faq__title{
  font-size:clamp(24px,3.3vw,42px);
  font-weight:900;
  line-height:1.3;
  color:var(--ink);
}
.faq__en{
  margin-top:clamp(2px,.4vw,6px);
  font-size:clamp(15px,1.9vw,26px);
  font-weight:700;
  letter-spacing:.12em;
  color:var(--ink-soft);
}
.faq__adviser{
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:clamp(4px,.8vw,10px);
  margin-top:clamp(20px,3.6vw,58px);
}
.faq__adviser-img{flex:0 0 auto;width:clamp(84px,10.4vw,158px);}
.faq__balloon{
  position:relative;
  padding:clamp(8px,1.1vw,15px) clamp(10px,1.4vw,18px);
  font-size:clamp(10px,1.05vw,14px);
  line-height:1.6;
  color:var(--ink);
  background:#fff;
  border:3px solid var(--navy-line);
  border-radius:6px;
  box-shadow:0 4px 0 rgba(0,23,50,.2);
}
.faq__balloon::before{
  content:"";
  position:absolute;
  left:-14px;bottom:24%;
  width:14px;height:16px;
  background:var(--navy-line);
  clip-path:polygon(100% 0,100% 100%,0 52%);
}
.faq__balloon::after{
  content:"";
  position:absolute;
  left:-9px;bottom:26%;
  width:10px;height:12px;
  background:#fff;
  clip-path:polygon(100% 0,100% 100%,0 52%);
}

/* アコーディオン（ui-faq-accordion-frame 相当をCSSで再現） */
.faq-list{display:flex;flex-direction:column;gap:clamp(9px,1.2vw,17px);}
.faq-item{
  background:#f8f5ef;
  border:3px solid #022766;
  border-radius:clamp(10px,1.3vw,18px);
  box-shadow:inset 0 0 0 2px #fefef9,0 4px 0 rgba(0,23,50,.22);
  overflow:hidden;
}
.faq-item__q{
  display:flex;
  align-items:center;   /* テキストを枠の中央に揃える */
  gap:clamp(10px,1.4vw,20px);
  width:100%;
  padding:clamp(11px,1.4vw,20px) clamp(12px,1.6vw,24px);
  text-align:left;
}
.faq-item__q:focus-visible{outline:3px solid var(--orange-500);outline-offset:-6px;}
.faq-item__wrap{flex:1 1 auto;min-width:0;display:block;}
.faq-item__question{
  display:block;
  font-size:clamp(13px,1.45vw,20px);
  font-weight:900;
  line-height:1.45;
  color:var(--ink);
}
.faq-item__answer{
  display:block;
  overflow:hidden;
  max-height:0;
  opacity:0;
  font-size:clamp(10px,1.05vw,14px);
  line-height:1.7;
  color:var(--ink-soft);
  transition:max-height .38s ease,opacity .3s ease,margin-top .38s ease;
}
.faq-item.is-open .faq-item__answer{margin-top:.5em;max-height:20em;opacity:1;}

/* ------------------------------------------------------------
   13. REQUIREMENT（募集要項）
------------------------------------------------------------ */
.requirement{
  position:relative;
  padding:clamp(34px,4.2vw,56px) 0 clamp(42px,5.2vw,70px);
  background:#031023 url("../img/backgrounds/bg-requirement-dungeon.png") no-repeat center/cover;
  border-top:4px solid #000c1c;
  image-rendering:pixelated;
}
.requirement > .container{image-rendering:auto;}
.requirement__title{
  width:min(760px,88%);
  /* 見出し画像の透明余白（上下）を詰める */
  margin:clamp(-92px,-7.2vw,-26px) auto clamp(-96px,-7.4vw,-28px);
  filter:drop-shadow(3px 3px 0 rgba(0,0,0,.6));
}
.requirement__sub{
  text-align:center;
  font-family:var(--ff-dot);
  font-size:clamp(15px,1.9vw,27px);
  letter-spacing:.14em;
  color:var(--orange-300);
  text-shadow:0 2px 0 rgba(0,0,0,.6);
}
/* 羊皮紙は1枚（ui-parchment-panel）。その上を2カラムに分ける
   ui-parchment-panel は破れ端のぶん透明余白を持つ（縦 8.8%〜90.6% / 横 3%〜96.9%）ため、
   背景は擬似要素を外側に広げて敷き、紙面がちょうど枠いっぱいに来るよう補正する。
   これで項目数が増えて縦に伸びても、文字が破れ端の外へ出ない。 */
.requirement__panels{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(20px,3.4vw,56px);
  margin-top:clamp(22px,3vw,40px);
  padding:clamp(26px,3.4vw,48px) clamp(28px,3.6vw,54px);
}
.requirement__panels::before{
  content:"";
  position:absolute;
  top:-11%;
  bottom:-11%;
  left:-3.3%;
  right:-3.3%;
  background:url("../img/ui/ui-parchment-panel.png") no-repeat center/100% 100%;
  filter:drop-shadow(0 0 30px rgba(255,170,70,.16));
  image-rendering:pixelated;
  pointer-events:none;
}
.requirement__panels > *{position:relative;z-index:1;}
.parchment{
  display:flex;
  flex-direction:column;
}
/* 2カラムの境目に控えめな仕切り */
.requirement__panels .parchment + .parchment{
  padding-left:clamp(20px,3.4vw,56px);
  border-left:2px dashed rgba(120,88,42,.4);
}
.parchment__row{
  flex:1 1 0;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(8px,1.2vw,18px);
  align-items:center;
  padding:clamp(8px,1.1vw,15px) 0;
  border-bottom:2px dashed rgba(120,88,42,.45);
}
.parchment__row:last-child{border-bottom:0;}
.parchment dt{
  display:flex;
  align-items:center;
  gap:clamp(6px,.8vw,11px);
  font-size:clamp(11px,1.2vw,16px);
  font-weight:900;
  color:#3a2a10;
}
.parchment dt img{
  flex:0 0 auto;
  width:clamp(20px,2.3vw,32px);
  height:clamp(20px,2.3vw,32px);
  object-fit:contain;
}
.parchment dd{
  font-size:clamp(11px,1.2vw,16px);
  font-weight:700;
  line-height:1.55;
  color:#3a2a10;
}
.requirement__note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,1.2vw,16px);
  max-width:min(760px,100%);
  margin:clamp(22px,3vw,40px) auto 0;
  padding:clamp(11px,1.4vw,20px) clamp(14px,2vw,30px);
  font-size:clamp(12px,1.4vw,20px);
  font-weight:900;
  color:#fff;
  background:rgba(3,18,38,.66);
  border:3px solid var(--orange-300);
  border-radius:8px;
  box-shadow:0 0 26px rgba(255,170,70,.2);
}
.requirement__note-mark{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:clamp(22px,2.4vw,34px);
  height:clamp(22px,2.4vw,34px);
  font-family:var(--ff-pixel);
  font-size:clamp(10px,1.1vw,15px);
  color:var(--orange-200);
  border:3px solid var(--orange-300);
  border-radius:50%;
}

/* ------------------------------------------------------------
   14. COMPANY（会社概要）
------------------------------------------------------------ */
.company{
  position:relative;
  padding:clamp(40px,5vw,66px) 0 clamp(44px,5.4vw,72px);
  background:
    url("../img/backgrounds/company-building-composite.png") no-repeat 80% center/auto 100%,
    var(--cream-400);
  border-top:4px solid var(--navy-900);
}
.company__body{position:relative;max-width:min(560px,52%);}
.company__title{
  font-family:var(--ff-serif);
  font-size:clamp(30px,4.3vw,56px);
  font-weight:700;
  font-variant:small-caps;
  line-height:1.05;
  letter-spacing:.02em;
  color:var(--navy-500);
}
.company__sub{
  margin-top:clamp(4px,.6vw,10px);
  font-size:clamp(15px,1.85vw,25px);
  font-weight:900;
  color:var(--navy-500);
}
.company-table{margin-top:clamp(16px,2.4vw,34px);}
.company-table__row{
  display:grid;
  grid-template-columns:minmax(0,.5fr) minmax(0,1fr);
  gap:clamp(8px,1.4vw,20px);
  align-items:start;
  padding:clamp(8px,1.1vw,15px) 0;
  border-bottom:2px solid rgba(13,44,87,.14);
}
.company-table dt{
  display:flex;
  align-items:center;
  gap:clamp(6px,.8vw,11px);
  font-size:clamp(11px,1.2vw,16px);
  font-weight:900;
  color:var(--navy-500);
}
.company-table dt img{
  flex:0 0 auto;
  width:clamp(20px,2.2vw,30px);
  height:clamp(20px,2.2vw,30px);
  object-fit:contain;
}
.company-table dd{
  font-size:clamp(11px,1.2vw,16px);
  line-height:1.6;
  color:var(--ink);
}

/* ------------------------------------------------------------
   15. CONTACT（READY TO CONTINUE?）
------------------------------------------------------------ */
.contact{
  position:relative;
  padding:clamp(40px,5vw,66px) 0 clamp(44px,5.4vw,74px);
  background:#0b1430 url("../img/backgrounds/bg-contact-desktop.png") no-repeat center/cover;
  border-top:4px solid var(--navy-900);
  image-rendering:pixelated;
}
.contact__inner{
  position:relative;
  image-rendering:auto;
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(22px,3.4vw,52px);
  align-items:start;
}
.contact__copy{padding-top:clamp(6px,1.4vw,22px);}
.contact__title{
  width:min(430px,94%);
  image-rendering:pixelated;
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,.6));
}
.contact__lead{
  margin-top:clamp(8px,1.4vw,20px);
  font-size:clamp(16px,2.1vw,29px);
  font-weight:900;
  color:#fff;
  text-shadow:0 3px 0 rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.5);
}
.contact__note{
  margin-top:clamp(6px,.9vw,12px);
  font-size:clamp(11px,1.15vw,15px);
  color:#f2f5fb;
  text-shadow:0 2px 6px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.7);
}

/* LINE・電話での相談導線 */
.contact__line{
  margin-top:clamp(14px,2vw,26px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(7px,.9vw,11px);
  width:min(390px,100%);
}
.contact__line .cta-set__sub{width:100%;}
.contact__line .btn{min-width:0;}
.contact__line-text{
  font-size:clamp(11px,1.15vw,15px);
  font-weight:700;
  color:#f2f5fb;
  text-shadow:0 2px 6px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.7);
}

/* フォーム */
.contact-form{
  padding:clamp(16px,2.2vw,32px) clamp(14px,2vw,30px) clamp(20px,2.6vw,36px);
  background:var(--cream-200);
  border:4px solid #fff;
  border-radius:6px;
  box-shadow:0 0 0 4px var(--orange-500),0 14px 34px rgba(0,0,0,.45);
}
.field{
  display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(8px,1.2vw,18px);
  align-items:start;
  margin-bottom:clamp(9px,1.2vw,16px);
}
.field__label{
  display:flex;
  align-items:center;
  gap:.5em;
  padding-top:.6em;
  font-size:clamp(11px,1.15vw,15px);
  font-weight:700;
  color:var(--ink);
}
.badge{
  flex:0 0 auto;
  display:inline-block;
  padding:.18em .55em;
  font-size:clamp(8px,.85vw,11px);
  font-weight:700;
  line-height:1.4;
  letter-spacing:.04em;
  border-radius:3px;
}
.badge--req{color:#fff;background:var(--orange-500);}
.badge--any{color:var(--ink-soft);background:#dfdcd4;border:1px solid #c8c4ba;}
.field__input input,
.field__input textarea{
  display:block;
  width:100%;
  padding:.62em .8em;
  font-size:clamp(11px,1.15vw,15px);
  background:#fff;
  border:2px solid #d6d2c8;
  border-radius:4px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field__input textarea{resize:vertical;min-height:5.4em;line-height:1.7;}
.field__input input::placeholder,
.field__input textarea::placeholder{color:#b3aea3;}
.field__input input:focus,
.field__input textarea:focus{
  outline:0;
  border-color:var(--orange-500);
  box-shadow:0 0 0 3px rgba(201,62,1,.16);
}
.field__input input[aria-invalid="true"],
.field__input textarea[aria-invalid="true"]{border-color:#c0392b;background:#fff6f4;}
.field__error{
  margin-top:.35em;
  font-size:clamp(10px,1.02vw,13px);
  font-weight:700;
  color:#c0392b;
}
.field__error:empty{display:none;}

/* 個人情報保護方針 スクロールウィンドウ */
.policy{
  margin-top:clamp(12px,1.6vw,22px);
  padding:clamp(10px,1.3vw,18px);
  background:#fff;
  border:2px solid #d6d2c8;
  border-radius:4px;
}
.policy__title{
  font-size:clamp(11px,1.15vw,15px);
  font-weight:700;
  color:var(--ink);
}
.policy__scroll{
  margin-top:.6em;
  max-height:clamp(96px,11vw,150px);
  overflow-y:auto;
  padding-right:.8em;
  font-size:clamp(9px,.98vw,13px);
  font-weight:400;
  line-height:1.85;
  color:var(--ink-soft);
  scrollbar-width:thin;
  scrollbar-color:#c3bfb5 #efece5;
}
.policy__scroll:focus-visible{outline:2px solid var(--orange-500);outline-offset:2px;}
.policy__scroll::-webkit-scrollbar{width:9px;}
.policy__scroll::-webkit-scrollbar-track{background:#efece5;border-radius:5px;}
.policy__scroll::-webkit-scrollbar-thumb{background:#c3bfb5;border-radius:5px;}
.policy__scroll h4{
  margin-top:1.2em;
  font-size:1.02em;
  font-weight:700;
  color:var(--ink);
}
.policy__scroll h4:first-child{margin-top:0;}
.policy__scroll p{margin-top:.4em;}
.policy__scroll ul{margin:.4em 0 0;padding-left:1.1em;list-style:disc;}
.policy__scroll li{margin-top:.2em;}

/* 同意チェック */
.agree{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.6em;
  margin-top:clamp(10px,1.3vw,18px);
}
.agree__label{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  cursor:pointer;
  font-size:clamp(11px,1.15vw,15px);
  font-weight:700;
  color:var(--ink);
}
.agree__label input{position:absolute;opacity:0;width:1px;height:1px;}
.agree__box{
  flex:0 0 auto;
  position:relative;
  width:clamp(15px,1.5vw,20px);
  height:clamp(15px,1.5vw,20px);
  background:#fff;
  border:2px solid #b9b5aa;
  border-radius:3px;
  transition:background-color .18s ease,border-color .18s ease;
}
.agree__box::after{
  content:"";
  position:absolute;
  top:16%;left:28%;
  width:36%;height:62%;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
  transform:rotate(42deg) scale(0);
  transform-origin:center;
  transition:transform .18s ease;
}
.agree__label input:checked + .agree__box{background:var(--orange-500);border-color:var(--orange-500);}
.agree__label input:checked + .agree__box::after{transform:rotate(42deg) scale(1);}
.agree__label input:focus-visible + .agree__box{outline:3px solid var(--orange-500);outline-offset:2px;}
.agree .field__error{flex:1 1 100%;margin-top:0;}

.secure{
  display:flex;
  align-items:center;
  gap:.5em;
  margin-top:clamp(8px,1vw,14px);
  font-size:clamp(9px,.98vw,13px);
  color:var(--ink-soft);
}
.secure__icon{flex:0 0 auto;width:clamp(14px,1.5vw,20px);}

/* 送信ボタン付近のエラー表示（reCAPTCHA・通信エラーなど） */
.field__error--form{
  margin-top:clamp(8px,1vw,14px);
  text-align:center;
}

/* reCAPTCHA v3
   バッジは非表示にし、代わりに規約で必須の文面を掲示する
   （バッジを出すと右下固定になり、SPの追従CTAと干渉するため） */
.grecaptcha-badge{
  visibility:hidden;
  /* 既定で right:-186px が当たるため、環境によって横スクロールが出るのを防ぐ */
  right:0 !important;
  pointer-events:none;
}
.recaptcha-note{
  margin-top:clamp(10px,1.3vw,16px);
  font-size:clamp(9px,.94vw,12px);
  line-height:1.7;
  text-align:center;
  color:var(--ink-mute);
}
.recaptcha-note a{
  color:var(--orange-600);
  text-decoration:underline;
}
.recaptcha-note a:hover{color:var(--orange-500);}

/* 送信中のボタン状態 */
.btn--submit.is-sending{
  pointer-events:none;
  filter:grayscale(.35) brightness(.92);
}

/* ------------------------------------------------------------
   15.5 サンクスページ / エラー画面（thanks.html・mail.php）
------------------------------------------------------------ */
.result{
  position:relative;
  display:flex;
  align-items:center;
  min-height:100vh;
  min-height:100svh;
  padding:clamp(40px,6vw,80px) 0;
  background:#0b1430 url("../img/backgrounds/bg-contact-desktop.png") no-repeat center/cover;
  image-rendering:pixelated;
}
.result::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(3,12,30,.55) 0%,rgba(3,12,30,.3) 45%,rgba(3,12,30,.6) 100%);
  pointer-events:none;
}
.result__inner{
  position:relative;
  z-index:1;
  image-rendering:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(18px,2.6vw,34px);
}
.result__logo{text-align:center;line-height:1.2;}
.result__logo-ja{
  display:block;
  font-size:clamp(15px,1.6vw,21px);
  font-weight:900;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.result__logo-en{
  display:block;
  font-size:clamp(10px,1vw,13px);
  font-weight:700;
  letter-spacing:.12em;
  color:var(--orange-300);
}

.result__panel{
  width:100%;
  max-width:640px;
  padding:clamp(28px,3.6vw,52px) clamp(20px,3vw,44px) clamp(24px,3.2vw,44px);
  text-align:center;
  background:var(--cream-200);
  border:4px solid #fff;
  border-radius:8px;
  box-shadow:0 0 0 4px var(--orange-500),0 16px 38px rgba(0,0,0,.5);
}
.result__pixel{
  width:clamp(78px,9vw,120px);
  margin:0 auto clamp(10px,1.4vw,18px);
  image-rendering:pixelated;
}
.result__eyebrow{
  font-family:var(--ff-pixel);
  font-size:clamp(11px,1.3vw,18px);
  line-height:1.3;
  letter-spacing:.04em;
  color:var(--orange-500);
}
.result__title{
  margin-top:clamp(10px,1.4vw,18px);
  font-size:clamp(21px,2.9vw,38px);
  font-weight:900;
  line-height:1.4;
  color:var(--ink);
  text-wrap:balance;
}
.result__lead{
  margin-top:clamp(12px,1.8vw,24px);
  font-size:clamp(12px,1.25vw,16px);
  line-height:1.9;
  color:var(--ink-soft);
}
.result__note{
  margin-top:clamp(18px,2.4vw,32px);
  text-align:left;
  border-top:2px dashed rgba(13,44,87,.2);
}
.result__note-row{
  display:grid;
  grid-template-columns:minmax(0,.45fr) minmax(0,1fr);
  gap:clamp(8px,1.4vw,20px);
  padding:clamp(9px,1.2vw,15px) 0;
  border-bottom:2px dashed rgba(13,44,87,.2);
}
.result__note dt{
  font-size:clamp(11px,1.15vw,15px);
  font-weight:900;
  color:var(--navy-500);
}
.result__note dd{
  font-size:clamp(11px,1.15vw,15px);
  line-height:1.75;
  color:var(--ink);
}
.result__btn{margin-top:clamp(20px,2.8vw,36px);}

/* エラー画面 */
.result__mark{
  display:grid;
  place-items:center;
  width:clamp(52px,5.4vw,72px);
  height:clamp(52px,5.4vw,72px);
  font-family:var(--ff-pixel);
  font-size:clamp(20px,2.4vw,32px);
  color:var(--orange-200);
  background:rgba(3,18,38,.7);
  border:3px solid var(--orange-300);
  border-radius:50%;
  box-shadow:0 0 26px rgba(255,170,70,.3);
}
.result__errors{
  width:100%;
  max-width:560px;
  margin-top:clamp(6px,1vw,14px);
  padding:clamp(14px,1.8vw,24px) clamp(16px,2vw,28px);
  text-align:left;
  background:rgba(255,255,255,.94);
  border:3px solid var(--orange-500);
  border-radius:6px;
}
.result__errors li{
  padding-left:1.3em;
  font-size:clamp(11.5px,1.2vw,15px);
  font-weight:700;
  line-height:1.8;
  color:#a3260f;
  text-indent:-1.3em;
}
.result__errors li::before{content:"・";}
/* エラー画面はパネルなしで中央に組むため、見出し類の色を反転 */
.result:not(.result--thanks) .result__eyebrow{color:var(--orange-200);text-shadow:2px 2px 0 rgba(0,0,0,.6);}
.result:not(.result--thanks) .result__title{color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.5);}
.result:not(.result--thanks) .result__lead{color:#e9eff8;text-shadow:0 2px 6px rgba(0,0,0,.7);text-align:center;}

@media (max-width:767px){
  .result{background-image:url("../img/backgrounds/bg-contact-mobile.png");}
  .result__br{display:none;}
  .result__note-row{grid-template-columns:1fr;gap:2px;}
  .result__btn{width:100%;}
}

/* ------------------------------------------------------------
   16. FOOTER / 追従CTA
------------------------------------------------------------ */
.site-footer{
  padding:clamp(14px,1.8vw,24px) 0;
  background:var(--navy-400);
  border-top:4px solid var(--navy-900);
}
.site-footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.6em 1.4em;
}
.site-footer__logo{
  display:flex;
  align-items:baseline;
  gap:clamp(8px,1.4vw,20px);
  color:#fff;
}
.site-footer__ja{font-size:clamp(13px,1.4vw,19px);font-weight:900;}
.site-footer__en{font-size:clamp(10px,1.05vw,14px);font-weight:700;letter-spacing:.1em;}
.site-footer__copy{
  font-size:clamp(9px,.98vw,12px);
  letter-spacing:.03em;
  color:rgba(255,255,255,.85);
}

.sp-cta{
  position:fixed;
  z-index:60;
  left:12px;right:12px;
  bottom:12px;
  display:none;
  gap:8px;
  transform:translateY(160%);
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.sp-cta__btn{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4em;
  padding:.9em .4em;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  background:linear-gradient(180deg,var(--orange-500),var(--orange-700));
  border:3px solid var(--navy-900);
  border-radius:8px;
  box-shadow:0 4px 0 var(--navy-900),0 8px 20px rgba(0,0,0,.3);
}
.sp-cta__btn--line{
  background:linear-gradient(180deg,#06c755,#04983f);
}
.sp-cta__btn--tel{
  background:linear-gradient(180deg,#1d4d93,#0e2d5e);
}
.sp-cta.is-visible{transform:none;}

/* ============================================================
   17. クエスト：広い画面では背景マップの足場に重ねる
   セクションを背景画像と同じ縦横比に固定し、
   % 座標が背景の座標と一致するようにする
============================================================ */
@media (min-width:1025px){
  .quest{
    aspect-ratio:1672 / 941;
    padding:clamp(30px,3.2vw,46px) 0 0;
  }
  .quest__mark{position:absolute;margin:0;}
  .quest__mark--start{left:56.5%;top:1.5%;}  /* 赤い屋根の家の真上 */
  .quest__mark--goal{left:78%;top:1.5%;}     /* 城の真上 */

  .quest-steps{
    position:absolute;
    inset:0;
    display:block;
    margin:0;
    padding:0;
    max-width:none;
  }
  .quest-step{
    position:absolute;
    width:15%;
    padding:0;
  }
  .quest-step__flag{
    top:auto;
    bottom:100%;
    left:-2.3vw;
    width:2.6vw;
    margin-bottom:-.5vw;
  }
  .quest-step__title{gap:.3em;}
  /* 足場の座標（bg-job-start-quest 実測）
     経路は「赤い屋根の家（スタート）→ 左下へ下る → 中央下から右上の城（ゴール）」 */
  .quest-step--1{left:53%;top:36.5%;}    /* 家のすぐ下の足場 */
  .quest-step--2{left:38.5%;top:54%;}
  .quest-step--3{left:17%;top:78.5%;}    /* 左下いちばん奥の足場 */
  .quest-step--4{left:52.5%;top:75%;}
  .quest-step--5{left:70%;top:53%;width:17.5%;}
}

/* ============================================================
   18. Responsive
============================================================ */
@media (max-width:1024px){
  .worries__grid{grid-template-columns:1fr;}
  .continue-panel__text br{display:none;}
  .about__inner,
  .works__inner,
  .support__inner,
  .faq__inner,
  .contact__inner{grid-template-columns:1fr;}
  .about__body{order:1;}
  .movie{order:2;}
  .quest__title{width:min(400px,66%);}
  /* START! / LEVEL UP! はマップ上の目印なので、重ねない幅では隠す */
  .quest__mark{display:none;}
  .company__body{max-width:min(560px,68%);}
  .support-menu{padding-right:0;}
  .support__wizard{width:clamp(88px,12vw,150px);}
  .field{grid-template-columns:1fr;gap:.3em;}
  .field__label{padding-top:0;}
  .requirement__title{width:min(720px,96%);}
}

@media (max-width:767px){
  :root{--gutter:18px;}
  .spark{display:none;}

  /* HERO
     CTAボタンの下に「左＝人物 / 右＝ステータスバー」の行を置く */
  .hero{--hero-band:calc(46vw + 26px);background:var(--cream-300);}
  .hero__bg{
    top:auto;
    bottom:0;
    height:var(--hero-band);
    background-position:center 44%;
  }
  .hero__bg::after{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:26%;
    background:linear-gradient(180deg,var(--cream-300) 6%,rgba(245,244,240,0) 100%);
  }
  .hero__inner{
    min-height:0;
    padding-top:16px;
    padding-bottom:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "logo   logo"
      "copy   copy"
      "worker status";
    align-items:end;
    column-gap:10px;
  }
  .logo{grid-area:logo;}
  .hero__copy{grid-area:copy;max-width:100%;padding-top:14px;}
  .hero__title{font-size:clamp(31px,9.2vw,44px);}
  .hero__title .is-orange{font-size:.9em;}
  .btn{min-width:100%;}
  .hero__worker{
    grid-area:worker;
    position:static;
    left:auto;right:auto;top:auto;bottom:auto;
    height:var(--hero-band);
    width:auto;
    max-width:none;
    margin-top:16px;
    filter:none;
  }
  .hero__status{
    grid-area:status;
    position:static;
    align-self:center;
    justify-self:end;
    width:100%;
    max-width:270px;
    margin:0;
    filter:drop-shadow(0 4px 10px rgba(0,11,25,.45));
  }
  .hero__pixel{display:none;}

  /* 悩み：テキストを残り幅の中央に置き、右にイラスト。中央に空白が出ないようにする */
  .worry-list{grid-template-columns:1fr;}
  .worry-card{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:12px 12px 12px 14px;
  }
  .worry-card__text{flex:1 1 auto;text-align:center;font-size:15px;}
  .worry-card__caret{display:none;}
  .worry-card__figure{
    flex:0 0 auto;
    width:118px;
    margin-top:0;
    justify-content:center;
  }
  .worry-card__figure img{width:114px;}
  .continue-panel{align-items:center;text-align:center;}
  .continue-panel__no{padding-left:0;}

  /* 4つのポイント */
  .point-list{grid-template-columns:1fr;gap:44px;}
  .point-card{max-width:100%;}
  .point-card:nth-child(n){transform:none;}

  /* CTA：キャラクターは単独行にせず、ボタンの横に並べる */
  .cta-band__inner{flex-wrap:wrap;justify-content:center;gap:10px 12px;}

  .cta-band:not(.cta-band--dark) .cta-band__text{flex:1 1 100%;order:1;}
  .cta-band:not(.cta-band--dark) .cta-band__pixel{order:2;}
  .cta-band:not(.cta-band--dark) .cta-band__btns{order:3;flex:1 1 auto;min-width:0;}

  /* body を display:contents にして、テキスト／ボタンを個別に並べ替える */
  .cta-band--dark .cta-band__body{display:contents;}
  .cta-band--dark .cta-band__text{flex:1 1 100%;order:1;}
  .cta-band--dark .cta-band__pixel--left{order:2;}
  .cta-band--dark .cta-band__btns{order:3;flex:1 1 auto;min-width:0;}
  .cta-band--dark .cta-band__pixel--right{order:4;}

  /* .btn の min-width:100% を打ち消し、まとまりの中で幅を分け合わせる */
  .cta-band__btns{width:auto;}
  .cta-set .btn,
  .cta-set__sub .btn{min-width:0;}
  .cta-set--hero{width:100%;}
  /* 2つ並びのサブCTAが狭い幅で2行に折り返さないよう詰める */
  .cta-set__sub .btn{
    padding-left:.65em;
    padding-right:.65em;
    font-size:13.5px;
    letter-spacing:.02em;
  }

  /* お仕事例 */
  .work-list{grid-template-columns:1fr;}
  .work-card__photo,
  .work-card--wide .work-card__photo{aspect-ratio:16/9;}
  .works__title{font-size:clamp(30px,9vw,42px);}
  .works__lead br{display:none;}

  /* クエスト */
  .quest__title{width:min(340px,86%);}
  .quest-steps{grid-template-columns:1fr;}
  .quest-step__text br{display:none;}

  /* RESTART STORIES
     縦組みロゴは狭い画面では巨大化するため、テクスチャ部分だけを見せる */
  .stories{background-position:26% center;}
  .stories__inner{padding-left:var(--gutter);}
  .stories__head{flex-direction:column;align-items:flex-start;}
  .stories__lead{text-align:left;}
  .story-list{grid-template-columns:1fr;gap:18px;}
  .story-card{transform:none;}
  .story-card:nth-child(n){transform:none;}
  .story-card__photo img{aspect-ratio:16/10;}
  .story-card__text br{display:none;}

  /* サポート */
  .support{padding:36px 0 40px;}
  .support-menu{grid-template-columns:1fr;}
  .support-chip{transform:none;}
  .support-chip:nth-child(n){transform:none;}
  .support__wizard{position:static;width:110px;margin:18px auto 0;}
  .support__lead br{display:none;}

  /* FAQ */
  .faq__adviser{margin-top:18px;}
  .faq-item__q{gap:10px;padding:13px 12px;}

  /* 募集要項 */
  .requirement__panels{
    grid-template-columns:1fr;
    padding:26px 24px;
  }
  .parchment__row{padding:9px 0;}
  .requirement__panels .parchment + .parchment{
    padding-left:0;
    border-left:0;
  }
  /* 1カラムに落ちたとき、応募資格（1つ目の最終行）と給与の間にも点線を引く */
  .requirement__panels .parchment:first-of-type .parchment__row:last-child{
    border-bottom:2px dashed rgba(120,88,42,.45);
  }
  .parchment__row{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);}
  .parchment dd br{display:none;}
  .requirement__note{text-align:left;}

  /* 会社概要 */
  .company{
    background:
      url("../img/backgrounds/company-building-composite.png") no-repeat right bottom/auto 58%,
      var(--cream-400);
    padding-bottom:calc(58vw + 24px);
  }
  .company__body{max-width:100%;}
  .company-table__row{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);}

  /* フォーム */
  .contact{background-image:url("../img/backgrounds/bg-contact-mobile.png");}
  .contact-form{padding:16px 14px 22px;}
  .contact__title{width:min(300px,88%);}

  /* フッター */
  .site-footer__inner{justify-content:center;text-align:center;}
  .site-footer__logo{justify-content:center;flex-wrap:wrap;}

  .sp-cta{display:flex;}
}

@media (max-width:400px){
  .hero__title{font-size:30px;}
  .worry-card__text{font-size:14px;}
}

@media print{
  .sp-cta,.movie,.hero__status{display:none !important;}
  body{background:#fff;}
}